/* tektarion.com · el sitio publicado, construido desde la variante G «Taller de cristal» (OT-WEB.13).
   F llevada a la noche: fondo cobalto profundo iluminado por la luz de los tres materiales
   (coral = materia prima, cobalto = estructura, menta = lo que ya funciona), y paneles de vidrio
   en tres niveles de profundidad. En el héroe, el desorden entra a un tablero que se llena.
   Esta vuelta: una sola escala de espaciado (--e-1 … --e-8) para todo margen, relleno y
   separación, ritmo vertical uniforme y lectura a 45–65 caracteres. Sin JavaScript. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("recursos/fuentes/archivo-latin-wdth-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("recursos/fuentes/ibm-plex-sans-latin.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  /* Paleta */
  --fondo: #0a1647;
  --fondo-hondo: #070f33;
  --cobalto: #3654f0;
  --cobalto-luz: #6f8cff;
  --cobalto-texto: #9db0ff;
  --coral: #ff6a52;
  --coral-texto: #ff9a88;
  --menta: #2fd39a;
  --menta-texto: #7ef0c4;
  --hielo: #f2f5ff;
  --hielo-suave: #c3cbef;
  --tinta: #0b1033;
  --trazo: #8f9ad0;               /* gráficos finos sobre vidrio */

  /* Escala de espaciado: la única que usan márgenes, rellenos y separaciones. */
  --e-1: 0.25rem;   /*  4 px · separaciones mínimas dentro de un dato */
  --e-2: 0.5rem;    /*  8 px · entre elementos de una lista corta */
  --e-3: 0.75rem;   /* 12 px · entre un rótulo y su contenido */
  --e-4: 1rem;      /* 16 px · título → párrafo; entre párrafos */
  --e-5: 1.5rem;    /* 24 px · entre tarjetas; entre bloques de una tarjeta */
  --e-6: 2rem;      /* 32 px · relleno de tarjetas; encabezado de sección → contenido */
  --e-7: 3rem;      /* 48 px · relleno de sección en teléfono */
  --e-8: 4.5rem;    /* 72 px · relleno de sección en escritorio */
  --seccion: var(--e-8);
  --medida: 60ch;

  /* Nivel 1 · luz ambiental (intensidad máxima en el centro de cada luz) */
  --luz-cobalto: rgba(54, 84, 240, 0.45);
  --luz-coral: rgba(255, 106, 82, 0.28);
  --luz-menta: rgba(47, 211, 154, 0.22);

  /* Nivel 2 · vidrio */
  --vidrio: rgba(22, 38, 110, 0.62);
  --vidrio-solido: #16286e;
  --vidrio-borde: rgba(255, 255, 255, 0.12);
  --brillo: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --sombra-2: 0 20px 40px rgba(3, 8, 40, 0.5);

  /* Nivel 3 · elevado */
  --elevado: rgba(16, 29, 92, 0.86);
  --elevado-solido: #101f63;
  --elevado-borde: rgba(255, 255, 255, 0.2);
  --sombra-3: 0 30px 60px rgba(3, 8, 40, 0.6);

  --desenfoque: blur(18px);

  /* Solo dentro del logo de Kordanza. */
  --k-tinta: #10182b;
  --k-sobre: #eef0f4;
  --k-cian: #0f9fb0;
  --k-ambar: #c1780f;

  --letra: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --titular: "Archivo", "Arial Black", var(--letra);
  --ancho: 80rem;
  --margen: var(--e-6);
}
@media (max-width: 40rem) { :root { --seccion: var(--e-7); --margen: var(--e-4); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fondo); color: var(--hielo); font-family: var(--letra); font-size: 1.0625rem; line-height: 1.6; }
h1, h2, h3 { margin: 0; font-family: var(--titular); font-stretch: 112%; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
p, ul { margin: 0; }
a { color: var(--cobalto-texto); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--menta-texto); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
section[id] { scroll-margin-top: var(--e-4); }

.saltar { position: absolute; left: var(--e-4); top: -4rem; z-index: 10; padding: var(--e-2) var(--e-4); background: var(--hielo); color: var(--tinta); font-weight: 600; text-decoration: none; }
.saltar:focus { top: var(--e-4); }

/* ---------- Niveles 2 y 3: vidrio y elevado. Por defecto, sólidos (respaldo). ---------- */
.vidrio { background: var(--vidrio-solido); border: 1px solid var(--vidrio-borde); border-radius: 20px; box-shadow: var(--brillo), var(--sombra-2); }
.elevado { background: var(--elevado-solido); border: 1px solid var(--elevado-borde); border-radius: 20px; box-shadow: var(--brillo), var(--sombra-3); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 40.0625rem) {
    .vidrio { background: var(--vidrio); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque); }
    .elevado { background: var(--elevado); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque); }
  }
}
@media (prefers-reduced-transparency: reduce) {
  .vidrio { background: var(--vidrio-solido); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .elevado { background: var(--elevado-solido); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Botones ---------- */
.boton { display: inline-block; padding: var(--e-4) var(--e-5); border: 1px solid transparent; border-radius: 12px; font-family: var(--titular); font-stretch: 110%; font-weight: 720; font-size: 1.02rem; line-height: 1.2; text-decoration: none; }
.boton-principal { background: var(--cobalto); color: #ffffff; border-color: rgba(255, 255, 255, 0.18); box-shadow: var(--brillo); }
.boton-principal:hover { background: #2a45d6; }
.boton-secundario { background: rgba(255, 255, 255, 0.04); border-color: var(--hielo-suave); color: var(--hielo); }
.boton-secundario:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------- Cabecera (sólida, en el flujo) ---------- */
.cabecera-caja { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding-block: var(--e-5); }
.marca { display: inline-flex; align-items: center; gap: var(--e-3); color: var(--hielo); text-decoration: none; }
.marca-logo { width: 2rem; height: 2rem; flex: none; }
.marca-nombre { font-family: var(--titular); font-stretch: 125%; font-weight: 820; font-size: 1.25rem; }
.cabecera-acciones { display: flex; align-items: center; gap: var(--e-5); }
.nav ul { display: flex; align-items: center; gap: var(--e-5); padding: 0; list-style: none; }
.nav a { display: inline-block; padding-block: var(--e-2); color: var(--hielo); text-decoration: none; font-size: 0.97rem; }
.nav a:hover { text-decoration: underline; }
.nav-contacto { display: inline-block; padding: var(--e-2) var(--e-4); border-radius: 10px; background: var(--coral); color: var(--tinta); font-weight: 600; font-size: 0.97rem; text-decoration: none; white-space: nowrap; }
.nav-contacto:hover { background: #ff8470; }
.nav-movil { display: none; position: relative; }
.menu summary { display: inline-flex; align-items: center; gap: var(--e-2); padding: var(--e-2) var(--e-3); border: 1px solid var(--hielo-suave); border-radius: 10px; color: var(--hielo); font-size: 0.97rem; cursor: pointer; list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.menu[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.menu-lista { position: absolute; right: 0; top: calc(100% + var(--e-2)); z-index: 5; display: grid; gap: var(--e-1); min-width: 12rem; padding: var(--e-2); list-style: none; background: var(--elevado-solido); border: 1px solid var(--elevado-borde); border-radius: 14px; box-shadow: var(--sombra-3); }
.menu-lista a { display: block; padding: var(--e-3) var(--e-4); border-radius: 8px; color: var(--hielo); text-decoration: none; }
.menu-lista a:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------- Héroe: titular, bajada y botones apilados; debajo, la escena ---------- */
.heroe { padding-block: var(--seccion); background:
  radial-gradient(52rem 34rem at 80% 72%, var(--luz-cobalto), transparent 70%),
  radial-gradient(26rem 24rem at 6% 84%, var(--luz-coral), transparent 70%); }
.heroe-cabeza { display: grid; gap: var(--e-5); }
.heroe h1 { max-width: 21ch; font-size: clamp(2.4rem, 4.6vw, 4.2rem); font-stretch: 105%; line-height: 1.06; letter-spacing: -0.03em; }
.heroe-bajada { max-width: 56ch; color: var(--hielo-suave); font-size: 1.15rem; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

.escena { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); align-items: center; margin-top: var(--e-8); }
.desorden { display: block; width: 100%; height: auto; overflow: visible; }
.desorden-tira { display: none; }
.pieza { filter: drop-shadow(0 10px 16px rgba(3, 8, 40, 0.55)); }
.p-papel { fill: var(--hielo); }
.p-renglon { fill: #c3cbe6; }
.p-firma { fill: none; stroke: var(--cobalto); stroke-width: 2.5; stroke-linecap: round; }
.p-nota { fill: #ffb4a6; }
.p-mano { fill: none; stroke: var(--tinta); stroke-width: 2.5; stroke-linecap: round; }
.p-cabecera-hoja { fill: var(--coral); }
.p-rejilla { fill: none; stroke: #c3cbe6; stroke-width: 1.5; }
.p-celda { fill: #ffd2c9; }
.p-chat { fill: var(--coral); }
.p-punto { fill: var(--hielo); }
.cauces-ancho .cauce { stroke: url(#cauce-ancho); }
.cauces-tira .cauce { stroke: url(#cauce-tira); }
.cauce { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.g-materia { stop-color: var(--coral); }
.g-estructura { stop-color: var(--cobalto-luz); }
.ficha { fill: var(--coral); opacity: 0; }

/* El tablero: nivel 3. Interfaz con la letra de lectura, como una aplicación. */
.tablero-figura { margin: 0; min-width: 0; }
.tablero { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); overflow: hidden; font-size: 0.8125rem; line-height: 1.4; color: var(--hielo); }
.t-lateral { display: flex; flex-direction: column; gap: var(--e-1); padding: var(--e-4) var(--e-3); border-right: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); }
.t-marca { display: block; margin: 0 0 var(--e-4) var(--e-2); }
.t-marca svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: var(--cobalto-texto); stroke-width: 1.75; stroke-linecap: round; }
.t-nav { padding: var(--e-2) var(--e-3); border-radius: 8px; color: var(--hielo-suave); }
.t-nav-activo { background: rgba(54, 84, 240, 0.35); color: var(--hielo); font-weight: 600; box-shadow: inset 2px 0 0 var(--cobalto-luz); }
.t-cuerpo { display: grid; gap: var(--e-4); padding: var(--e-5); min-width: 0; }
.t-barra { display: flex; align-items: center; gap: var(--e-3); }
.t-titulo { font-family: var(--titular); font-stretch: 110%; font-weight: 720; font-size: 1.05rem; }
.t-buscar { margin-left: auto; padding: var(--e-2) var(--e-3); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; color: var(--hielo-suave); min-width: 12rem; }
.t-indicadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
.t-ind { display: grid; gap: var(--e-1); padding: var(--e-3) var(--e-4); border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.t-ind-etiqueta, .t-ind-nota { color: var(--hielo-suave); }
.t-ind-valor { font-family: var(--titular); font-stretch: 105%; font-weight: 760; font-size: 1.6rem; line-height: 1.1; }
.t-ind-nota.t-ok { color: var(--menta-texto); }
.t-grafica { padding: var(--e-3) var(--e-4); border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.t-grafica-titulo { color: var(--hielo-suave); }
.t-linea { display: block; width: 100%; height: auto; margin-top: var(--e-2); }
.t-guia { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.t-area { fill: rgba(47, 211, 154, 0.14); }
.t-trazo { fill: none; stroke: var(--menta); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.t-dias { display: flex; justify-content: space-around; color: var(--hielo-suave); font-size: 0.75rem; }
.t-tabla { width: 100%; border-collapse: collapse; }
.t-tabla th { padding: var(--e-2); text-align: left; font-weight: 500; color: var(--hielo-suave); }
.t-tabla td { padding: var(--e-2); border-top: 1px solid rgba(255, 255, 255, 0.08); white-space: nowrap; }
.t-estado { display: inline-block; white-space: nowrap; padding: var(--e-1) var(--e-3); border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.t-entregado { background: var(--menta); color: var(--tinta); }
.t-ruta { background: var(--cobalto); color: #ffffff; }
.t-despachar { background: var(--coral); color: var(--tinta); }
.tablero-figura figcaption { margin-top: var(--e-3); text-align: right; font-size: 0.85rem; color: var(--hielo-suave); }

/* La única animación: el desorden entra al tablero y lo llena. Sin movimiento, se ve lleno. */
@media (prefers-reduced-motion: no-preference) {
  .cauce { stroke-dasharray: 1; animation: trazar 0.7s ease-out both; }
  .cauce-1 { animation-delay: 0.3s; }
  .cauce-2 { animation-delay: 0.5s; }
  .cauce-3 { animation-delay: 0.7s; }
  .cauce-4 { animation-delay: 0.9s; }
  .ficha { animation-duration: 0.75s; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); animation-fill-mode: both; }
  .desorden-ancho .ficha-1 { animation-name: ancho-1; animation-delay: 0.35s; }
  .desorden-ancho .ficha-2 { animation-name: ancho-2; animation-delay: 0.55s; }
  .desorden-ancho .ficha-3 { animation-name: ancho-3; animation-delay: 0.75s; }
  .desorden-ancho .ficha-4 { animation-name: ancho-4; animation-delay: 0.95s; }
  .desorden-tira .ficha-1 { animation-name: tira-1; animation-delay: 0.35s; }
  .desorden-tira .ficha-2 { animation-name: tira-2; animation-delay: 0.55s; }
  .desorden-tira .ficha-3 { animation-name: tira-3; animation-delay: 0.75s; }
  .desorden-tira .ficha-4 { animation-name: tira-4; animation-delay: 0.95s; }
  .t-ind { animation: aparecer 0.4s ease-out both; }
  .t-ind-1 { animation-delay: 1s; }
  .t-ind-2 { animation-delay: 1.12s; }
  .t-ind-3 { animation-delay: 1.24s; }
  .t-trazo { stroke-dasharray: 1; animation: trazar 0.8s ease-out 1.35s both; }
  .t-area { animation: fundido 0.5s ease-out 1.85s both; }
  .t-fila { animation: fundido 0.4s ease-out both; }
  .t-fila-1 { animation-delay: 1.6s; }
  .t-fila-2 { animation-delay: 1.75s; }
  .t-fila-3 { animation-delay: 1.9s; }
  .t-fila-4 { animation-delay: 2.05s; }
}
@keyframes trazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes ancho-1 { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(154px, 4px); } }
@keyframes ancho-2 { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(92px, -30px); } }
@keyframes ancho-3 { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(132px, -54px); } }
@keyframes ancho-4 { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(60px, -38px); } }
@keyframes tira-1 { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(102px, 62px); } }
@keyframes tira-2 { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(30px, 68px); } }
@keyframes tira-3 { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50px, 104px); } }
@keyframes tira-4 { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-108px, 64px); } }

/* ---------- Secciones: un solo ritmo ---------- */
.seccion { padding-block: var(--seccion); }
.encabezado { max-width: 46rem; }
.encabezado h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.encabezado p { max-width: var(--medida); margin-top: var(--e-4); color: var(--hielo-suave); font-size: 1.12rem; }

/* Servicios: tarjetas de vidrio en dos columnas, para leer a 55–62 caracteres. */
.seccion-servicios { background: radial-gradient(36rem 28rem at 4% 28%, var(--luz-menta), transparent 70%); }
.servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); margin-top: var(--e-6); padding: 0; list-style: none; }
.servicio { display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-6); }
.servicio-producto { grid-column: 1 / -1; }
.placa { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; box-shadow: var(--brillo); }
.placa-cobalto { background: var(--cobalto); color: #ffffff; }
.placa-coral { background: var(--coral); color: var(--tinta); }
.placa-menta { background: var(--menta); color: var(--tinta); }
.icono { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icono-kordanza { width: 2.1rem; height: 2.1rem; }
.servicio h3 { font-size: 1.35rem; font-stretch: 108%; font-weight: 720; line-height: 1.15; }
.servicio p { max-width: var(--medida); color: var(--hielo-suave); }
.que-es { color: var(--hielo); }
.recibes-titulo { margin-bottom: var(--e-3); color: var(--hielo); font-weight: 600; }
.recibes ul { display: grid; gap: var(--e-2); padding: 0; list-style: none; }
.recibes li { position: relative; max-width: var(--medida); padding-left: var(--e-5); color: var(--hielo-suave); }
.recibes li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--marca-lista, var(--cobalto-luz)); }
.luz-coral .recibes li::before { --marca-lista: var(--coral); }
.luz-menta .recibes li::before { --marca-lista: var(--menta); }
.servicio .sirve { margin-top: auto; padding-top: var(--e-4); border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--hielo); font-style: italic; }
.servicio .sirve a { font-style: normal; white-space: nowrap; }
.servicio-producto .recibes ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-2) var(--e-5); }
/* Cambio de luz al pasar o enfocar: la tarjeta sube al nivel 3 y la placa se enciende detrás. */
.luz-cobalto { --luz-tarjeta: rgba(111, 140, 255, 0.6); }
.luz-coral { --luz-tarjeta: rgba(255, 106, 82, 0.55); }
.luz-menta { --luz-tarjeta: rgba(47, 211, 154, 0.55); }
.servicio:hover, .servicio:focus-within { border-color: var(--elevado-borde); box-shadow: var(--brillo), var(--sombra-3), 0 0 0 1px var(--luz-tarjeta), 0 0 3.5rem 0 var(--luz-tarjeta); }
@media (prefers-reduced-motion: no-preference) { .servicio { transition: box-shadow 0.25s ease, border-color 0.25s ease; } }
.k-placa { fill: var(--k-tinta); stroke: #3a4763; stroke-width: 1; }
.k-orbita { fill: none; stroke: var(--k-sobre); stroke-width: 2; }
.k-cian { fill: var(--k-cian); }
.k-ambar { fill: var(--k-ambar); }

/* Método: 2 × 2, cada etapa con lo que recibes. */
.seccion-metodo { background: radial-gradient(46rem 26rem at 50% 55%, var(--luz-cobalto), transparent 70%); }
.etapas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); margin-top: var(--e-6); padding: 0; list-style: none; }
.etapa { display: grid; align-content: start; gap: var(--e-4); padding: var(--e-6); }
.etapa-num { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--cobalto); color: #ffffff; font-family: var(--titular); font-stretch: 110%; font-weight: 820; font-size: 1.15rem; box-shadow: var(--brillo); }
.etapa h3 { font-size: 1.35rem; font-stretch: 108%; font-weight: 720; line-height: 1.15; }
.etapa p { max-width: var(--medida); color: var(--hielo-suave); }
.etapa .etapa-recibes { color: var(--hielo); }
.etapa-recibes-titulo { font-weight: 600; color: var(--menta-texto); }
.incluye { display: grid; gap: var(--e-3); margin-top: var(--e-5); padding: var(--e-6); }
.incluye h3 { font-size: 1.15rem; font-stretch: 108%; }

/* Kordanza */
.seccion-kordanza { background: radial-gradient(34rem 26rem at 86% 50%, var(--luz-menta), transparent 70%); }
.producto { display: grid; gap: var(--e-6); }
.producto-texto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--e-7); align-items: start; }
.producto-texto > .hechos { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; align-self: center; }
.producto-marca { display: flex; align-items: center; gap: var(--e-4); }
.producto-logo { width: 3.5rem; height: 3.5rem; flex: none; }
.producto h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.producto-texto > p { max-width: var(--medida); margin-top: var(--e-4); color: var(--hielo-suave); font-size: 1.1rem; }
.hechos { display: grid; gap: var(--e-3); margin-top: var(--e-5); padding: 0; list-style: none; }
.hechos li { position: relative; max-width: var(--medida); padding-left: var(--e-5); color: var(--hielo-suave); }
.hechos li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.65rem; height: 0.65rem; border-radius: 3px; background: var(--menta); }
.hechos strong { color: var(--hielo); font-weight: 600; }
.producto-texto > .producto-accion { margin-top: var(--e-6); }
/* La ventana de Kordanza: el mismo tablero del héroe, con su dirección y su logo. */
.ventana-kordanza { margin: 0; min-width: 0; }
.tablero-kordanza { grid-template-rows: auto 1fr; }
.t-direccion { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-4); border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); color: var(--hielo-suave); }
.t-candado { width: 0.875rem; height: 0.875rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.t-marca-kordanza { display: flex; align-items: center; gap: var(--e-2); font-family: var(--titular); font-stretch: 110%; font-weight: 720; font-size: 0.95rem; }
.t-marca-kordanza svg { width: 1.6rem; height: 1.6rem; stroke: none; }
.t-logo-compacto { display: none; }
.t-logo-compacto svg { display: block; width: 1.5rem; height: 1.5rem; }
.ventana-kordanza figcaption { margin-top: var(--e-3); text-align: right; font-size: 0.85rem; color: var(--hielo-suave); }

/* Quiénes somos */
/* Sin el panel «La empresa», los tres principios ocupan el ancho en tres columnas. */
.nosotros-cuerpo { margin-top: var(--e-6); }
.principios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5) var(--e-7); margin: 0; }
.principios > div { padding-left: var(--e-5); border-left: 3px solid var(--coral); }
.principios dt { font-family: var(--titular); font-stretch: 108%; font-weight: 720; font-size: 1.3rem; }
.principios dd { max-width: var(--medida); margin: var(--e-2) 0 0; color: var(--hielo-suave); }

/* Contacto: un panel de vidrio sobre la luz coral. */
.contacto-banda { padding-block: var(--seccion); background: radial-gradient(40rem 26rem at 28% 50%, var(--luz-coral), transparent 70%); }
.contacto { display: grid; gap: var(--e-4); justify-items: start; padding: var(--e-7); }
.contacto h2 { font-size: clamp(2rem, 3.8vw, 3rem); }
.contacto > p { max-width: var(--medida); color: var(--hielo-suave); font-size: 1.1rem; }
.contacto > p.correo { margin-block: var(--e-2); font-family: var(--titular); font-stretch: 112%; font-weight: 800; font-size: clamp(1.5rem, 5.2vw, 3.5rem); line-height: 1.1; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.correo a { color: var(--hielo); text-decoration-thickness: 3px; text-decoration-color: var(--coral); text-underline-offset: 0.12em; }
.contacto > p.contacto-nota { font-size: 0.95rem; }

/* Pie normal */
.pie { background: var(--fondo-hondo); color: var(--hielo-suave); font-size: 0.95rem; }
.pie a { color: var(--hielo); }
.pie-caja { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: var(--e-5) var(--e-7); align-items: start; padding-block: var(--e-7) var(--e-6); }
.pie-nombre { display: inline-flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-2); color: var(--hielo); font-family: var(--titular); font-stretch: 125%; font-weight: 820; font-size: 1.2rem; }
.pie-logo { width: 1.6rem; height: 1.6rem; flex: none; }
.pie-nav ul { display: grid; gap: var(--e-2); padding: 0; list-style: none; }
.pie-nav a { text-decoration: none; }
.pie-nav a:hover { text-decoration: underline; }
.pie-correo a { font-weight: 600; }
.pie-legal { display: grid; gap: var(--e-3); padding-block: var(--e-5) var(--e-7); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.88rem; }
.legal { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); padding: 0; list-style: none; }
.legal a { color: var(--hielo); }

/* ---------- Anchos ---------- */
@media (max-width: 64rem) {
  .pie-caja { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tablero { grid-template-columns: minmax(0, 1fr); }
  .t-lateral { display: none; }
  .servicio-producto .recibes ul { grid-template-columns: minmax(0, 1fr); }
  .tablero-kordanza .t-logo-compacto { display: block; }
}
@media (max-width: 60rem) {
  .nav-ancha { display: none; }
  .nav-movil { display: block; }
  .cabecera-acciones { gap: var(--e-3); }
}
@media (max-width: 52rem) {
  .principios, .producto-texto { grid-template-columns: minmax(0, 1fr); }
  .producto-texto > .hechos { grid-column: auto; grid-row: auto; margin-top: var(--e-5); }
  .servicios, .etapas { grid-template-columns: minmax(0, 1fr); }
  .servicio-producto { grid-column: auto; }
  .escena { grid-template-columns: minmax(0, 1fr); margin-top: var(--e-7); }
  .desorden-ancho { display: none; }
  .desorden-tira { display: block; width: 100%; max-width: 30rem; margin-inline: auto; }
  .t-col-producto { display: none; }
}
@media (max-width: 40rem) {
  .pie-caja { grid-template-columns: minmax(0, 1fr); }
  .servicio, .etapa, .incluye { padding: var(--e-5); }
  .contacto { padding: var(--e-6) var(--e-5); }
  .tablero-kordanza .t-col-origen { display: none; }
  .marca-nombre { font-size: 1.1rem; }
  .heroe h1 { font-size: 2.15rem; font-stretch: 100%; }
  .heroe-bajada { font-size: 1.05rem; }
  .t-buscar { display: none; }
  .tablero { font-size: 0.75rem; }
  .t-cuerpo { gap: var(--e-3); padding: var(--e-4); }
  .t-ind { padding: var(--e-2) var(--e-3); }
  .t-ind-valor { font-size: 1.3rem; }
  .t-tabla td, .t-tabla th { padding-inline: var(--e-1); }
  .t-tabla td:nth-child(2) { white-space: normal; }
  .t-ind-etiqueta, .t-ind-nota { font-size: 0.6875rem; }
}
@media (max-width: 24rem) {
  .cabecera-caja { gap: var(--e-2); }
  .cabecera-acciones { gap: var(--e-2); }
  .marca { gap: var(--e-2); }
  .marca-nombre { font-size: 1rem; }
  .menu summary { padding-inline: var(--e-2); }
  .nav-contacto { padding-inline: var(--e-3); }
}

/* ---------- Página 404: una columna, el mismo pie y la misma cabecera ---------- */
.aviso { padding-block: var(--seccion); }
.aviso-caja { display: grid; gap: var(--e-4); justify-items: start; }
.aviso-rotulo { color: var(--coral-texto); font-weight: 600; }
.aviso h1 { font-size: clamp(2rem, 4vw, 3rem); }
.aviso-caja > p:not([class]) { max-width: var(--medida); color: var(--hielo-suave); font-size: 1.1rem; }
.aviso-accion { margin-top: var(--e-4); }