/* ============================================================
   PLIEGO — sistema de diseño de Concept Co
   Hoja compartida. Vivía en línea dentro de index.html; se sacó el
   29 de septiembre de 2026 para poder aplicarla al resto del sitio sin
   mantener una copia por página, que es como divergen.

   Cómo está ordenada, de arriba abajo:
     1. Variables y base
     2. Barra y pie
     3. Bandas (.osc / .cla / .bla) y retícula de registro
     4. El eje de 52 px, el margen de dibujo y las cotas
     5. Componentes (botón partido, hilo, placa, mazo, cifras)
     6. Secciones
     7. Móvil

   Dos reglas que no se rompen:
     · Ningún color se fija suponiendo un fondo. Cada elemento hereda el de
       su banda (`.osc .bl`, `.cla .bl`…). Cinco bugs de elementos invisibles
       salieron de olvidarlo.
     · El color es tinta, no pintura: filetes, cifras y marcas. La única
       superficie rellena son las tarjetas del blog, y es deliberado.

   Al tocar esta hoja hay que correr, antes de desplegar:
       python3 herramientas/versionar_css.py
   Firebase la sirve con `immutable`, así que sin versión nueva nadie ve
   el cambio. Ya pasó una vez.
   ============================================================ */

  :root{
    /* Página: fondo blanco */
    --bg:#FFFFFF;
    --bg-soft:#F5F7FB;
    --ink:#0E1630;
    --ink-2:#1B2340;
    --muted:#5A6480;
    --muted-2:#8A93AD;
    --line:#E7EBF3;
    /* Acentos de marca (del logo) */
    --blue:#1E9BF0;
    --cyan:#16B9C6;
    --green:#22C58A;
    /* Color de las tarjetas Banamex (indigo/teal del fondo anterior) */
    --card-1:#0F1A44;
    --card-2:#0C2E3D;
    --card-3:#123A6B;
    --radius:24px;
    --radius-sm:18px;
    --shadow-card:0 30px 60px -24px rgba(15,26,68,.45);
    --shadow-soft:0 20px 46px -20px rgba(18,30,66,.40);
    --glass-border:rgba(255,255,255,.18);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;background:var(--bg);overflow-x:hidden}
  body{
    font-family:'Rubik',system-ui,sans-serif;
    color:var(--ink);
    background:transparent;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  /* Fondo animado: red neuronal discreta */
  /* La red neuronal vive DENTRO del héroe, no detrás de toda la página.
     Estaba fixed cubriéndolo todo, y sobre el blanco sus líneas azules quedaban
     lavadas: ensuciaban la zona clara en vez de darle textura. Sobre el fondo
     oscuro del héroe sí se sostiene. */
  #neural{position:absolute;inset:0;z-index:0;pointer-events:none}
  .hero > .wrap{position:relative;z-index:1}

  /* Fondo de las secciones claras: los mismos tres degradados del héroe —azul,
     cian y verde de marca— a opacidad muy baja. Va en un pseudoelemento fijo
     para no repetirse por sección ni alterar el flujo. Las secciones que ya
     traen fondo propio (--bg-soft) lo tapan, y esa alternancia da el ritmo. */
  body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(620px 380px at 10% 4%,  rgba(30,155,240,.13), transparent 64%),
      radial-gradient(540px 400px at 92% 22%, rgba(22,185,198,.12), transparent 64%),
      radial-gradient(600px 420px at 62% 86%, rgba(34,197,138,.12), transparent 62%)}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{width:min(1200px,92%);margin-inline:auto}
  section{padding:96px 0}
  h1,h2,h3{line-height:1.12;font-weight:700;letter-spacing:-.02em}
  h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin-bottom:16px}
  /* Tarjeta clara. La usan “Arranca sin montar…” y las preguntas frecuentes.
     La sombra es baja y muy difusa: sobre blanco, una sombra fuerte se ve
     sucia. Sin transform en hover — no son elementos clicables y ese
     levantamiento es justo el gesto de la tarjeta genérica. */
  /* Tarjeta BLANCA sobre un plano gris. Antes era gris sobre blanco: tres
     puntos de diferencia, así que no se despegaba por más sombra que llevara.
     Ahora la define el contraste con el fondo y la sombra puede quedarse
     discreta, que es lo que evita el aspecto de plantilla. */
  /* Barra de acento en el canto, con el degradado del logo en una escala más
     oscura: los tonos vivos se lavaban contra el gris claro de la tarjeta.
     Mismo matiz, ~40% menos de luminosidad. */

  .lead{font-size:1.08rem;color:var(--muted);max-width:62ch}
  .center .lead{margin-inline:auto}
  /* texto de acento en color sólido: azul vívido (sin degradado en letras) */

  /* El botón acumulaba cuatro señales de plantilla: radio de 999px, cristal
     con backdrop-filter, resplandor de color y levantamiento en hover.
     Ahora es un rectángulo de color plano con radio corto. El hover cambia el
     color, no la posición: mover el botón bajo el cursor es el gesto genérico. */
  .btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.98rem;
    padding:15px 28px;border-radius:4px;transition:background .2s, color .2s, border-color .2s;
    cursor:pointer;border:0}
  /* #2E6BF0 y no el azul del logo: sobre este último el texto blanco queda en
     3.00:1, debajo de AA. Este da 4.69:1 y ya es el azul de acento que usa
     casos.html, así que además unifica. */
  .btn-primary{background:#2E6BF0;color:#fff}
  .btn-primary:hover{background:#1D5AD8}

  /* Tarjetas claras de apoyo */
  .soft{background:none;border:0;border-radius:0;box-shadow:none}

  /* NAV */
  header.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.82);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
  .brand{display:inline-flex;align-items:center}
  .brand img{height:clamp(30px,4vw,42px);width:auto;max-width:200px;object-fit:contain;display:block}
  .brand .fallback{font-weight:800;color:var(--ink);font-size:1.15rem;letter-spacing:-.02em}
  nav.links{display:flex;gap:28px;font-weight:500;font-size:.95rem;color:var(--muted);white-space:nowrap}
  nav.links a:hover{color:var(--ink)}
  .menu-btn{display:none;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer}
  .nav-menu{display:contents}
  .nav-cta{display:flex;align-items:center;gap:9px;flex:none}
  .nav-cta .btn{padding:8px 15px;font-size:.95rem;white-space:nowrap}
  .nav-cta .btn-portal svg{width:14px;height:14px}
  .btn-portal{background:#123A38;color:#fff;border:1px solid #123A38;
    box-shadow:0 10px 24px -12px rgba(18,58,56,.6)}
  .btn-portal:hover{background:#0D2C2B;border-color:#0D2C2B;color:#fff}
  .btn-portal svg{width:15px;height:15px}
  @media(max-width:1240px) and (min-width:761px){
    .nav-inner{gap:12px}
    nav.links{gap:16px;font-size:.95rem}
    .nav-cta{gap:7px}
    .nav-cta .btn{padding:7px 11px;font-size:.87rem}
    .nav-cta .btn-portal svg{width:12px;height:12px}
  }
  @media(max-width:760px){
    .menu-btn{display:block}
    .nav-menu{display:none}
    header.nav.open .nav-menu{display:flex;flex-direction:column;gap:6px;position:absolute;left:0;right:0;top:100%;
      background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);padding:14px 6% 18px;
      backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 22px 34px -22px rgba(0,0,0,.28)}
    header.nav.open .nav-menu .links{display:flex;flex-direction:column;gap:0}
    header.nav.open .nav-menu .links a{padding:13px 2px;border-top:1px solid var(--line);font-size:1rem;color:var(--ink)}
    header.nav.open .nav-menu .nav-cta{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:12px}
    header.nav.open .nav-menu .nav-cta .btn{width:100%;justify-content:center;font-size:.95rem;padding:12px 16px}
  }

  /* HERO — fondo oscuro degradado */
  .hero{padding:112px 0 88px;position:relative;overflow:hidden;
    background:
      radial-gradient(720px 400px at 82% -2%, rgba(30,155,240,.30), transparent 62%),
      radial-gradient(640px 440px at 2% 98%, rgba(34,197,138,.24), transparent 62%),
      radial-gradient(620px 520px at 58% 122%, rgba(22,185,198,.20), transparent 60%),
      linear-gradient(160deg,#0B1330,#070C1C 60%,#05091A)}
  .hero h1{color:#fff}
  .hero p{color:#C4D0E8}
  /* Sin píldora. Es lo primero que se ve del sitio, así que va como versalitas
     espaciadas —el mismo lenguaje del .eyebrow— y no como cápsula. */
  /* El secundario es solo contorno: dos botones rellenos lado a lado compiten
     entre sí y no dejan claro cuál es la acción principal. */

  @keyframes pulse{70%{box-shadow:0 0 0 9px rgba(34,197,138,0)}100%{box-shadow:0 0 0 0 rgba(34,197,138,0)}}
  /* HÉROE · margen de dibujo.
     La franja vertical de la izquierda sustituye al antetítulo en versalitas.
     Cumple la misma función —contextualizar antes del titular— pero viene del
     pliego técnico y no de la convención web de 2014, que es la que traen
     todos los sitios del sector. Va DENTRO del .wrap para que su filete caiga
     sobre el mismo eje que el resto de la página. */

  /* El golpe sale de la escala, no del color: la premisa chica arriba y la
     pregunta siete veces más grande. Por eso el titular ya no lleva acento
     azul — no le hace falta y era justo la marca de época. */
  .hero h1{margin-bottom:0}
  .hero h1 .premisa{display:block;color:#93A9CC;font-size:1rem;font-weight:500;
    letter-spacing:.01em;margin-bottom:4px}
  .hero h1 .pregunta{display:block;color:#fff;font-weight:700;letter-spacing:-.045em;
    line-height:.92;font-size:clamp(3rem,9.5vw,6.4rem)}
  .hero p{font-size:1rem;color:#A9BDD9;max-width:48ch;margin-top:26px;margin-bottom:0}
  .hero p .hl{color:#fff;font-weight:600}
  /* Blanco, no azul: los tres sitios del sector tienen el botón de color, y el
     blanco da 14:1 de contraste contra los 3.9:1 del azul que traíamos. */
  .hero .btn-hero{background:#fff;color:#0B1330;border-radius:0;font-weight:700;
    font-size:1.01rem;display:inline-flex;align-items:center;padding:0 0 0 24px;transition:.18s}
  /* Filete oscuro: este botón es blanco, al revés que los demás. */
  .hero .btn-hero::after{content:'\2192';align-self:stretch;display:flex;align-items:center;
    margin-left:22px;padding:13px 16px;border-left:1px solid rgba(11,19,48,.22);
    font-size:1rem;line-height:1}
  .hero .btn-hero:hover{background:#DCE6F7}
  .hero .enlace-hero{color:#fff;font-size:1.01rem;border-bottom:1px solid rgba(255,255,255,.4);
    padding-bottom:2px;transition:.18s}
  .hero .enlace-hero:hover{border-bottom-color:#fff}

  /* Cotas. El cian del logo deja de rellenar superficies y pasa a rotular:
     una marca de 9 px sobre cada renglón y la cifra. A ese tamaño el tono ya
     no compite con nadie, y es el color real de la marca —el azul que usábamos
     antes estaba 17° corrido hacia el violeta, justo en la familia de moda. */

  

  /* ------------------------------------------------------------------
     Botón partido. El relleno + contorno lado a lado es el par de la
     época: dos bloques del mismo peso para dos acciones que no valen lo
     mismo. Aquí el principal conserva toda la invitación al clic —importa,
     porque ahí aterriza el tráfico de Ads— pero un filete interior lo
     separa en etiqueta y flecha, como la placa de un aparato. El
     secundario deja de ser botón y baja a enlace subrayado.
     Se resuelve con ::after para no tocar los 30 botones del sitio uno
     por uno; el texto sigue siendo el mismo nodo de siempre. */
  .btn-primary{border-radius:0;gap:0;align-items:center;padding:0 0 0 24px}
  .btn-primary::after{content:'\2192';align-self:stretch;display:flex;align-items:center;
    margin-left:22px;padding:14px 16px;border-left:1px solid var(--filete-btn,rgba(255,255,255,.30));
    font-size:1rem;line-height:1}
  /* En la barra superior el botón es chico: ahí el filete apretaría, así
     que conserva su forma compacta y solo pierde la esquina redondeada. */
  .nav-cta .btn-primary,.nav-right .btn-primary{padding:8px 15px}
  .nav-cta .btn-primary::after,.nav-right .btn-primary::after{display:none}

  /* El secundario ya no compite: pierde caja y queda como enlace. */
  .btn-ghost{background:none;color:var(--ink);border:0;border-radius:0;
    padding:0 0 3px;border-bottom:1px solid #B9C2D4;font-weight:600}
  .btn-ghost:hover{border-bottom-color:var(--ink);color:var(--ink)}

  /* MSP value strip (claras) */
  
  .vcard .ic{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;
    font-size:1.35rem;margin-bottom:14px}
  .vcard.v1 .ic{background:#D4EAFF}
  .vcard.v2 .ic{background:#CFF3EF}
  .vcard.v3 .ic{background:#D3F4E2}
  .vcard.v4 .ic{background:#DEE2FB}
  /* íconos de línea (planos) */
  .vcard.v1 .ic{color:#1E6FC4}
  .vcard.v2 .ic{color:#0E8A93}
  .vcard.v3 .ic{color:#128A5E}
  .vcard.v4 .ic{color:#4B54D6}
  .info-item .ic{color:#8FB8FF}

  /* ===== SERVICIOS — hoja de especificación =====
     Antes: rejilla bento de tarjetas de cristal con resplandores. Ahora cada
     servicio es un renglón separado por reglas de un píxel. Sin radio, sin
     sombra, sin contenedor: la jerarquía la hace la tipografía. */
  /* Servicios vuelve al oscuro, a todo lo ancho. La tarjeta clara del starter
     es la que aporta el respiro entre el héroe y esta sección. */
  .services .wrap{position:relative;z-index:1}
  .services .svc-head .lead{color:#B9C6E4;font-size:.98rem;max-width:64ch}


  /* Nota de alcance al pie del catálogo.
     Va aquí y no dentro de una fila porque aplica a TODO el catálogo. El texto
     replica la columna «No incluido» de la cotización y la cláusula de compras:
     si el sitio promete más ancho que el contrato, la corrección llega en la
     mesa y ahí sale cara. Se cierra con la autorización previa a propósito —el
     límite real es también una garantía para el cliente. */
  /* Centrada y sin borde propio: la fila 05 ya aporta su línea inferior. Al
     dejar de ser el último hijo del contenedor, `.svc-row:last-child` dejó de
     apagársela, así que un borde aquí arriba pintaba dos filetes juntos. */
  .svc-nota .rot{display:block;font-size:.79rem;letter-spacing:.14em;text-transform:uppercase;
    font-weight:700;color:#8FB8FF;margin-bottom:11px}
  /* La columna de 52 px ya no lleva número: lleva la marca.
     Los números eran ornamento —los servicios son un catálogo, no una
     secuencia: Infraestructura no va «antes» que Seguridad y nadie pide «el
     servicio 03»—, y además eran el elemento que compartíamos con los sitios
     del sector. La columna se conserva porque mide exactamente lo mismo que
     el margen del héroe: de ahí para abajo la página tiene un solo eje. */

  /* La marca de producto va DENTRO del título, en su propia línea pero como
     parte del mismo bloque de texto. Antes iba como etiqueta pequeña encima:
     ese “texto chico → título → descripción” es la fórmula que delata la
     plantilla y aquí se repetía cinco veces seguidas. */
  .svc-id h3 .marca{display:block;font-size:.81rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--acc,var(--blue));margin-bottom:2px}

  /* Tres columnas: es lo que más altura ahorra. Baja a dos y a una. */

  /* Sobre el oscuro los acentos vivos del logo pasan AA de sobra
     (5.6:1, 7.0:1 y 7.5:1), así que aquí sí van tal cual. */  
  
  
  /* Capacidades plegables. La clase .colapsable la pone el JS, así que sin
     JavaScript se ven las seis: nunca se esconde contenido que el usuario no
     pueda recuperar. Se ocultan a partir de la cuarta, es decir se deja el
     primer renglón de la rejilla de tres. */
  .svc-caps.colapsable:not(.abierto) li:nth-child(n+4){display:none}
  
  
  
  .svc-mas .chev{width:14px;height:14px;transition:transform .22s}
  .svc-mas[aria-expanded="true"] .chev{transform:rotate(180deg)}
  @media(prefers-reduced-motion: reduce){.svc-mas .chev{transition:none}}


  /* glows detrás para que el cristal "refracte" color */
  .services .wrap{position:relative;z-index:1}
  

  /* ===== Tarjetas "Dos pilares" — dark moderno con glow y borde de acento ===== */
  /* borde con degradado de acento */
  /* brillo que sigue al cursor (spotlight) */

  

  
  .b-small .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;
    margin-bottom:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}

  /* Tarjetas de servicio (3 por fila) */
  

  /* RECURSOS / BLOG */
  /* RECURSOS — índice, no tarjetas.
     Antes eran tres tarjetas de cristal oscuro sobre blanco: la fórmula
     completa. Ahora cada pieza es una columna abierta con una regla gruesa
     arriba en su color. Sin caja, sin sombra, sin radio.
     Es un tratamiento distinto al de servicios a propósito: aquí no hay
     numeración ni renglones, para que las secciones no se repitan entre sí. */
  /* RECURSOS sobre oscuro, a todo lo ancho. Con el marco gris quedaba
     demasiado claro encadenado a la FAQ; el bloque oscuro le devuelve peso. */
  /* text-align por sí solo no basta: .lead tiene max-width:62ch y
     `.center .lead` le pone margin-inline:auto, así que el bloque quedaba
     centrado aunque el texto fuera a la izquierda. Hay que anular el margen. */
  
  /* Columnas abiertas, ya no tarjetas.
     Traían caja, esquina de 14 px y una cinta de 3 px de acento arriba: es el
     componente más repetido de la época —TechPoint usa la misma cinta, solo que
     a la izquierda de cada renglón— y además contradecía lo que ya hicimos en
     el héroe y en los servicios.
     Ahora usan el mismo lenguaje que el resto de la página: filete superior y
     una marca corta de acento en el borde, idéntica a la de las filas de
     servicios y a las cotas del héroe. */
  .rec{display:flex;flex-direction:column;padding:18px 0 0;position:relative;
    background:none;border:none;border-radius:0;
    border-top:1px solid rgba(255,255,255,.26)}
  .rec::before{content:'';position:absolute;left:0;top:0;width:22px;height:2px;
    background:var(--vivo,var(--blue))}
  /* La etiqueta baja al pie, junto al enlace. Arriba formaba el trío
     “etiqueta → título → descripción” que se repite en toda plantilla. */
  .rec .rpie{margin-top:18px;display:flex;align-items:baseline;justify-content:space-between;gap:14px}
  .rec .rtag{font-size:.77rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:#8A97BC;flex:none}
  .rec h3{font-size:1.16rem;color:#fff;margin-bottom:8px;letter-spacing:-.015em}
  .rec p{font-size:1.01rem;color:#B9C6E4;margin-bottom:0;flex:1}
  .rec .rlink{color:var(--acc,var(--blue));font-weight:600;font-size:.99rem;
    display:inline-flex;gap:7px;align-items:center;
    border-bottom:1.5px solid currentColor;padding-bottom:2px;transition:.2s}
  .rec .rlink:hover{color:#fff}
  /* Regla en el tono vivo (es gráfica); enlace en la variante que alcanza AA
     sobre blanco, porque es texto. */
  /* Sobre oscuro los tonos vivos del logo pasan AA de sobra, así que el
     enlace y la regla usan el mismo color. */
  .rec.v-a{--vivo:var(--blue);--acc:var(--blue)}
  .rec.v-b{--vivo:var(--cyan);--acc:var(--cyan)}
  .rec.v-c{--vivo:var(--green);--acc:var(--green)}

  /* PROYECTOS Y CONSULTORÍA (por proyecto) */
  
  
  .proj .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px;
    background:#EAF1FF;border:1px solid #D6E3FB;color:#2E6BF0}
  .proj .ic svg{width:22px;height:22px;display:block}
  .proj.highlight .ic{background:#DDF3E8;border-color:#BFE7D3;color:#0E7A55}

  /* STEPS (claras) */
  
  

  /* MODELO — lienzo animado (estilo mapa de nodos) */
  /* MODELO — línea de tiempo.
     Antes era un canvas con seis nodos alrededor de un centro y líneas
     trazadas por JS hasta ese centro… donde estaba el título, así que lo
     atravesaban siempre. Y el acomodo radial escondía lo más importante:
     que es una secuencia con orden, del 1 al 6.
     Ahora la línea ES la secuencia. Sin canvas, sin JS, sin nodos absolutos. */

  /* La espina: una sola línea continua a la altura de los marcadores. */

  /* ---- Animación de entrada ----
     La espina se traza de izquierda a derecha, y detrás de ella van saliendo
     los puntos y el texto, escalonados. El orden de la animación refuerza lo
     que la sección quiere decir: que esto es una secuencia.
     Solo se anima transform y opacity, que el navegador resuelve en la GPU
     sin recalcular el layout. */


  /* El retardo lo marca --i, que se asigna en el marcado. El punto sale
     primero y el texto lo sigue 120ms después. */

  /* Quien pidió menos movimiento ve todo en su sitio, sin transición. */
  

  
  


  /* STARTER — empresas que empiezan
     Antes: tarjetón de 30px de radio con degradado y tres subtarjetas de
     cristal. Ahora: banda a sangre y tres pasos separados por reglas
     verticales. Es un proceso, así que no lleva la misma forma que la hoja
     de especificación de servicios — la variedad sale del contenido. */
  /* Tarjeta clara sobre blanco, con el gris suave de la sección de proyectos.
     Es la que aporta el respiro claro entre el héroe oscuro y los servicios
     oscuros, así que no necesita ser otra banda de color. */
  /* Plano gris sobre el que descansan las tarjetas blancas. #E3E9F4 da 1.22:1
     de luminancia contra el blanco: suficiente para que se separen sin que la
     página deje de leerse clara. Con #F5F7FB eran 1.07 y no se distinguían.
     Translúcido a propósito: el canvas neural va fijo en z-index -1 y un gris
     sólido lo taparía justo donde hoy se alcanza a ver. */
  /* Es la sección que convierte, así que necesita peso visual. En vez de
     resaltar una palabra del título en color —el recurso de siempre— lleva
     una barra de acento en el canto con el degradado del logo. Ancla sin
     gritar y es propio de la marca. */
  
  
  /* El botón va dentro del bloque de texto, después del párrafo: en la columna
     derecha quedaba flotando sin relación con nada. */
  /* Botón oscuro sobre fondo claro. Lo usan el starter y las preguntas
     frecuentes, así que no va anidado en ninguna sección. */

  /* Botón claro sobre fondo oscuro. Antes vivía dentro de .starter; se saca
     porque el bloque de preguntas frecuentes también lo usa. */

  /* Tres pasos en fila, separados por regla vertical. El número va como cifra
     tenue, no como ficha de color. */
  /* Cada paso toma un color del logo, en la variante que alcanza AA sobre el
     gris de la tarjeta: los vivos se quedan en 2.1–2.8:1 y no sirven para
     texto. La barra del canto sí usa los vivos, porque es gráfica. */
  

  /* ¿POR QUÉ AHORA? — estadísticas */
  .why .lead{color:#BFD3DE}
  /* Evidencia. Antes eran seis tarjetas iguales con un anillo de progreso al lado.
     Dos problemas: seis cifras en rejilla es la misma plantilla que estamos quitando
     de toda la página, y sobre todo los anillos NO codificaban nada —«324 mil
     millones» llevaba un arco a la mitad, que no representa ninguna proporción—.
     Un medidor que no mide es peor que no tener medidor.
     Ahora son dos clases de prueba con peso distinto, y la jerarquía lo dice:
     a la izquierda lo que medimos nosotros, grande; a la derecha el contexto de
     industria, subordinado. No son pares y no deben verse como pares. */
  

  /* ===== CLIENTES — más grande + carrusel infinito ===== */
  .marquee{margin-top:50px;overflow:hidden;position:relative;padding:18px 0;
    -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .track{display:flex;align-items:center;gap:96px;width:max-content;animation:scroll 34s linear infinite}
  .marquee:hover .track{animation-play-state:paused}
  @keyframes scroll{to{transform:translateX(-50%)}}
  /* caja uniforme: cada logo se ajusta dentro sin deformarse */
  .track img{width:220px;height:82px;object-fit:contain;filter:grayscale(1);opacity:.62;
    transition:.25s;flex:none}
  .track img:hover{filter:none;opacity:1;transform:scale(1.05)}
  @media(max-width:600px){.track img{width:150px;height:60px}.track{gap:60px}}

  /* ===== TECNOLOGÍAS — muro estático =====
     Antes era un segundo carrusel infinito. Dos marquees en la misma página es
     la firma más reconocible de los sitios armados con generador, y la mecánica
     de bucle existe para insinuar que los logos no caben: con 19 no hace falta
     fingirlo.
     Se quitó también la tarjeta blanca de cada logo. La sección hereda el fondo
     blanco de la página, así que ese recuadro no separaba nada de nada — solo
     agregaba 19 cajas. Dos de los archivos (Fabric y Power BI) traen fondo
     blanco horneado, y justo por eso funcionan sin tarjeta: se funden.
     El gris se aplica solo donde hay cursor; en táctil no hay hover que lo
     devuelva, así que ahí los logos van a color desde el principio. */
  .tech-item{display:flex;align-items:center;justify-content:center;
    width:132px;height:52px;flex:none}
  .tech-item img{max-height:42px;max-width:132px;width:auto;height:auto;object-fit:contain}
  @media (hover:hover){
    .tech-item img{filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s}
    .tech-item:hover img{filter:none;opacity:1}
  }
  .tech-item .dot{width:9px;height:9px;border-radius:50%;flex:none;
    background:linear-gradient(120deg,var(--blue),var(--cyan))}
  @media(max-width:640px){
    
    .tech-item{width:104px;height:44px}
    .tech-item img{max-height:34px;max-width:104px}
  }

  /* FAQ (claras) */
  details{padding:2px 20px;transition:.2s}
  details[open]{border-color:var(--blue)}
  summary{cursor:pointer;list-style:none;font-weight:600;font-size:1.03rem;padding:13px 0;display:flex;
    justify-content:space-between;align-items:center;gap:16px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";font-size:1.3rem;color:var(--blue);font-weight:300;transition:.25s}
  details[open] summary::after{transform:rotate(45deg)}
  details p{padding:0 0 14px;color:var(--muted);font-size:.97rem}
  /* FAQ dentro de tarjeta de color con spotlight */
  /* PREGUNTAS FRECUENTES — lista, no tarjeta.
     Era el último bloque de cristal oscuro de la página. Ahora es una lista
     de definición sobre blanco, separada por reglas de un píxel: cada
     pregunta se abre en su lugar, sin caja ni contenedor.
     Otro tratamiento más, distinto de la hoja de especificación y del
     índice, para que ninguna sección se repita. */
  /* La FAQ va dentro del marco gris: sobre blanco puro quedaba sin cuerpo y
     no se distinguía de la sección vecina. Mismo tratamiento que el starter. */
  

  /* NEXT (claras) */
  

  /* CONTACT (fondo oscuro como el hero) */
  
  .contact-info h2{margin-bottom:16px}
  .contact-info p{color:var(--muted);margin-bottom:28px;max-width:44ch}
  .info-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}
  .info-item .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
    font-size:1.1rem;flex:none;background:var(--bg-soft);border:1px solid var(--line)}
  .info-item b{display:block;font-size:.98rem}
  .info-item span{color:var(--muted);font-size:1.03rem}
  form.soft{padding:0}
  .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:520px){.row{grid-template-columns:1fr}}
  .field{margin-bottom:18px}
  label{display:block;font-size:.95rem;font-weight:500;margin-bottom:7px;color:var(--ink-2)}
  label .req{color:var(--green)}
  input,textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;
    font-family:inherit;font-size:.96rem;color:var(--ink);background:var(--bg-soft);transition:.2s}
  input::placeholder,textarea::placeholder{color:var(--muted-2)}
  input:focus,textarea:focus{outline:none;border-color:var(--blue);background:#fff;
    box-shadow:0 0 0 4px rgba(30,155,240,.12)}
  textarea{resize:vertical;min-height:120px}
  form .btn-primary{width:100%;justify-content:center;margin-top:6px}
  .form-note{font-size:.91rem;color:var(--muted-2);text-align:center;margin-top:14px}
  .aviso-simplificado{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;
    padding:14px 16px;margin:6px 0 16px;font-size:.87rem;line-height:1.55;color:var(--muted)}
  .aviso-simplificado b{color:var(--ink)}
  .aviso-simplificado a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  .casilla-negativa{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding-top:12px;
    border-top:1px solid var(--line);cursor:pointer}
  .casilla-negativa input{margin-top:2px;width:16px;height:16px;accent-color:var(--accent);flex:none;cursor:pointer}
  .casilla-negativa span{color:var(--ink);font-size:.89rem}

  /* FOOTER (claro) */
  footer{padding:60px 0 30px;border-top:1px solid var(--line)}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:38px}
  @media(max-width:720px){.foot-grid{grid-template-columns:1fr;gap:28px}}
  .foot-brand{display:inline-flex;margin-bottom:16px}
  .foot-brand img{height:clamp(44px,6vw,60px);width:auto;max-width:230px;object-fit:contain}
  footer p{font-size:1.03rem;color:var(--muted);max-width:40ch}
  footer h4{color:var(--ink);font-size:.91rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
  footer ul{list-style:none;display:grid;gap:10px;font-size:1.03rem;color:var(--muted)}
  footer ul a:hover{color:var(--ink)}
  .foot-bottom{border-top:1px solid var(--line);padding-top:22px;
    display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.93rem;color:var(--muted-2)}
  .foot-bottom a:hover{color:var(--ink)}


/* ============================================================================
   SISTEMA «PLIEGO» — septiembre de 2026
   Reemplaza el lenguaje anterior: degradados de ambiente, tarjetas con cinta de
   acento y antetítulos en versalitas sobre el titular. Estas reglas van DESPUÉS
   de las viejas a propósito: donde coinciden, mandan estas.
     · Bandas por sistema: .osc / .cla / .bla, nunca dos iguales seguidas.
     · Eje de 52 px: todo cuelga de .eje > .mk, que carga la marca y el rótulo.
     · El color es tinta, no pintura. Dos únicos picos de degradado en la
       página: «Medimos» y el cierre del pie.
     · Ningún color fijado en el HTML: cada elemento hereda el de su banda.
   ============================================================================ */

*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#0E1630;--muted:#5A6480;--muted2:#8A93AD;--linea:#E7EBF3;
      --logo:#0077CC;--blue:#1E9BF0;--cian:#00BFBF;--cian-aa:#007A7A;--green:#22C58A;--osc:#0C1A44}
body{font-family:'Rubik',system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.6;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,92%);margin-inline:auto}
.osc{color:#fff;
  /* Base más viva y profunda que el plano anterior: una sola transición suave,
     sin manchas radiales. No es atmósfera, es profundidad de tinta. */
  background-color:#0C1A44;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    radial-gradient(circle,rgba(19,215,215,.22) 1.2px,transparent 1.7px),
    linear-gradient(168deg,#0E1F4E,#0A1638 58%,#081228);
  background-size:96px 96px,96px 96px,96px 96px,100% 100%}
/* La banda clara era #F4F5F7: un 4% por debajo del blanco. Pegada a una
   banda `.bla` el canto se nota y funciona, pero **sola no se lee como gris**
   — y en la landing las bandas claras nunca quedan juntas, así que ahí se
   veía blanca. Hoy es #E9EDF4, un 9% por debajo del blanco: sigue siendo
   banda clara, pero se sostiene sin necesitar una vecina que la contraste. */
.cla{background-color:#E9EDF4;
  background-image:
    linear-gradient(rgba(14,22,48,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(14,22,48,.05) 1px,transparent 1px),
    radial-gradient(circle,rgba(0,122,122,.42) 1.3px,transparent 1.8px);
  background-size:88px 88px,88px 88px,88px 88px}
.bla{background:#fff}
section{padding:104px 0}
.eje{display:grid;grid-template-columns:52px 1fr}
/* La marca de registro.
   Era un filete corto de 22 × 2 px, y suelto en el margen se leía como el
   guion de acento que traen todos los sitios de plantilla: la última pieza
   del patrón que veníamos quitando. Una cruz girada es la marca de registro
   de un pliego —la que alinea las planchas de color al imprimir—, así que
   dice lo mismo que la retícula y viene del mismo sitio.
   Se dibuja con dos degradados sobre el mismo cuadro: no hace falta un SVG
   ni un carácter tipográfico, y hereda el color de su banda. */
.mk{padding-top:6px}
.mk i{display:block;width:13px;height:13px;transform:rotate(45deg);
  background:
    linear-gradient(var(--cian),var(--cian)) center/13px 1.6px no-repeat,
    linear-gradient(var(--cian),var(--cian)) center/1.6px 13px no-repeat}
.cla .mk i,.bla .mk i{
  background:
    linear-gradient(var(--logo),var(--logo)) center/13px 1.6px no-repeat,
    linear-gradient(var(--logo),var(--logo)) center/1.6px 13px no-repeat}
.col{padding-left:40px}
h2{font-size:clamp(1.55rem,3.1vw,2.15rem);letter-spacing:-.025em;line-height:1.12;margin-bottom:10px}
.lead{color:#A9BDD9;font-size:.98rem;max-width:62ch}
.cla .lead,.bla .lead{color:var(--muted)}
.rot{font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#7E96BE;display:block;margin-bottom:14px}
.cla .rot,.bla .rot{color:var(--muted2)}
/* El antetítulo en versalitas flotando encima del titular es el mismo patrón
   que sacamos del héroe. Aquí baja a la columna del margen y se pone vertical,
   como el rótulo de un pliego: sigue orientando, pero deja de ser el adorno
   de landing que traen todos los sitios del sector. */
.eje>.mk{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.mrot{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font-size:.69rem;letter-spacing:.26em;text-transform:uppercase;font-weight:700;color:#7E96BE}
.cla .mrot,.bla .mrot{color:var(--muted2)}
.col>.rot{display:none}
.bp{display:inline-flex;align-items:center;background:#fff;color:var(--osc);font-weight:700;font-size:.99rem;padding:0 0 0 22px}
.cla .bp,.bla .bp{background:var(--osc);color:#fff}
.bp .fl{padding:13px 15px;margin-left:20px;border-left:1px solid rgba(11,19,48,.22)}
.cla .bp .fl,.bla .bp .fl{border-left-color:rgba(255,255,255,.28)}
/* El enlace hereda el color de su banda. Antes se fijaba a mano en el HTML y
   bastaba mover una sección de clara a oscura para que desapareciera: fue lo
   que pasó con el del FAQ. */
.bl{font-size:.99rem;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;
  transition:border-color .2s}
.bl:hover{border-bottom-color:#fff}
.cla .bl,.bla .bl{color:var(--ink);border-bottom-color:#B9C2D4}
.cla .bl:hover,.bla .bl:hover{border-bottom-color:var(--ink)}
.acc{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:36px}
/* héroe */
.hero{padding:0}
.margen{border-right:1px solid rgba(255,255,255,.22);display:flex;align-items:flex-end;justify-content:center;padding:22px 0}
.margen span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:#7E96BE;font-weight:700}
.hcuerpo{padding:70px 0 58px 40px}
.premisa{display:block;color:#93A9CC;font-size:.98rem;margin-bottom:4px}
.preg{display:block;color:#fff;font-weight:700;letter-spacing:-.045em;line-height:.9;font-size:clamp(3rem,9.5vw,6.6rem)}
.hsub{color:#A9BDD9;font-size:.96rem;max-width:46ch;margin-top:26px}
.tira{margin-top:60px;border-top:1px solid rgba(255,255,255,.28);display:flex;flex-wrap:wrap}
.it{flex:1 1 168px;padding:16px 26px 0 0;position:relative}
/* Mismo criterio que los hitos: entre 760 y 1000 px las cuatro cotas caben
   de a tres y la cuarta quedaba sola abajo. De a dos reparten parejo. */
@media(max-width:1000px) and (min-width:761px){.it{flex:1 1 44%}}
.it::before{content:'';position:absolute;left:0;top:0;width:1px;height:9px;background:#13D7D7}
.it b{display:block;color:#13D7D7;font-size:.97rem;font-weight:700;line-height:1.25}
.it span{display:block;color:#A7BCDA;font-size:.83rem;line-height:1.5;margin-top:5px}
/* ARRANCA · maqueta ICOMAT: titular grande arriba, rejilla con filete abajo */
/* Titular al mismo eje que la rejilla y el botón: alinear a la derecha
     dejaba tres bloques colgando de márgenes distintos. */
  .icomat h2{font-size:clamp(1.9rem,4.4vw,3.1rem);max-width:19ch;line-height:1.1;margin-bottom:48px}
.ic-rej{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px}
.ic-cel{border-top:1px solid rgba(14,22,48,.22);padding-top:18px}
.ic-cel b{display:block;font-size:1rem;font-weight:700;margin-bottom:16px;max-width:18ch}
.ic-cel p{font-size:1rem;color:var(--muted2);max-width:34ch}

/* ============ MAZO EN ARCO (Osmo) ============
   Va hasta abajo, en la zona de exploración: es el único lugar de la página
   donde un adorno no le cuesta nada a nadie. Las tarjetas se acomodan sobre una
   curva, la del centro se endereza y las vecinas se inclinan y se apagan.
   El hilo punteado que las atraviesa es el mismo de los servicios, aquí curvo. */
.mazo-sec{overflow:hidden}
.selector{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px}
.selector button{background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:.91rem;font-weight:700;letter-spacing:.02em;color:#7E96BE;padding:9px 0 0;
  position:relative;transition:color .22s}
.selector button::before{content:'';position:absolute;left:0;top:0;width:22px;height:2px;
  background:transparent;transition:background .22s}
.selector button[aria-selected="true"]{color:#fff}
.selector button[aria-selected="true"]::before{background:#13D7D7}
.mazo{position:relative;height:478px;margin-top:38px}
.arco{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.arco path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:5 7}
.tarj{position:absolute;left:50%;top:26px;width:384px;height:366px;margin-left:-192px;
  background:#101C46;border:1px solid rgba(255,255,255,.14);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;
  transition:transform .55s cubic-bezier(.22,.8,.26,1), opacity .45s ease, filter .45s ease;
  transform-origin:50% 120%}
/* Recorte al logotipo.
   La portada se genera para compartirse sola, así que trae la categoría y el
   titular dibujados dentro — y la tarjeta los repetía debajo. Midiendo el PNG:
   el logo va del 15.7% al 22.2% de alto y la categoría no arranca hasta el
   38.3%. A 74 px de alto sobre 384 de ancho se ve el logo y el degradado, y el
   texto queda fuera de cuadro. */
.tarj .im{height:74px;background:#0C1A44;position:relative;overflow:hidden;flex:none;
  border-bottom:1px solid rgba(255,255,255,.12)}
.tarj .im img{width:100%;height:auto;display:block;object-fit:cover;object-position:top}
.tarj .im .falta{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:16px;font-size:.81rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#5E7BA8;
  background:repeating-linear-gradient(135deg,#0E1B42 0 9px,#101F4B 9px 18px)}
.tarj .cu{padding:22px 26px 24px;display:flex;flex-direction:column;flex:1}
.tarj .cat{font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#13D7D7}
.tarj h3{font-size:1.62rem;line-height:1.18;margin:11px 0 0;letter-spacing:-.02em;color:#fff;letter-spacing:-.01em}
.tarj .min{margin-top:auto;font-size:.89rem;color:#7E96BE}
.tarj .ver{margin-top:14px;font-size:1.01rem;font-weight:700;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;align-self:flex-start}
.tarj.act{z-index:5}
/* Color rotado, como el menú de Osmo: verde, teal y tinta, en ciclo de tres.
   El ciclo está corrido para que la tarjeta que ya viene centrada al cargar
   (el script arranca en la cuarta) sea la verde: es la que se ve antes de que
   nadie toque nada.
   Es la única superficie rellena de la página, y se permite aquí por lo mismo
   que se permitió el arco: la zona de exploración es donde un recurso gráfico
   no le cuesta nada al argumento. Los tres tonos son oscuros y de la paleta
   —azul de banda, teal del logo, verde de Recursos— así que el texto blanco
   mantiene el contraste y la sección no se vuelve un semáforo. */
.tarj[data-i="0"],.tarj[data-i="3"],.tarj[data-i="6"]{background:#0F3A2C}
.tarj[data-i="1"],.tarj[data-i="4"]{background:#0C3340}
.tarj[data-i="0"] .cat,.tarj[data-i="3"] .cat,.tarj[data-i="6"] .cat{color:#35D999}
.tarj[data-i="1"] .cat,.tarj[data-i="4"] .cat{color:#19D5D5}
.tarj[data-i="0"] .im,.tarj[data-i="3"] .im,.tarj[data-i="6"] .im{background:#0A2A20}
.tarj[data-i="1"] .im,.tarj[data-i="4"] .im{background:#09262F}
.mazo-pie{display:flex;align-items:center;gap:16px;margin-top:40px}
.flecha{width:42px;height:42px;border:1px solid rgba(255,255,255,.28);background:none;color:#fff;
  cursor:pointer;display:grid;place-items:center;font-size:1rem;transition:.2s}
.flecha:hover{background:rgba(255,255,255,.1);border-color:#fff}
@media(prefers-reduced-motion:reduce){.tarj{transition:none}}
@media(max-width:900px){.mazo{height:410px}.tarj{width:270px;height:310px;margin-left:-135px}}

/* Caja de digresión.
   La única sección contenida de la página, y va aquí por lo que significa:
   «¿No buscas una iguala?» es un paréntesis en el argumento, no un paso del
   mismo. Meterla en una caja hace que la forma diga lo que el texto dice.
   En Arranca no funcionaría: ese sí es argumento principal y cortarlo del
   ancho completo rompería la continuidad con Servicios. */
.digresion{border:1px solid rgba(14,22,48,.16);border-radius:26px;padding:52px 48px;
  background:rgba(14,22,48,.02)}
.digresion .acc{margin-top:28px}
/* Sobre banda oscura el filete y el fondo de la caja —pensados para banda
   clara— quedaban invisibles. */
.osc .digresion{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.03)}
/* Variante llena, el mismo recurso que `.dcell.tinta`: se usa cuando la caja
   tiene que resaltar sobre el resto de la sección, no solo separarse. */
.digresion.tinta{background:var(--osc);border-color:transparent;color:#fff}
.digresion.tinta h3{color:#fff}
.digresion.tinta p{color:#C4D0E8}
.digresion.tinta b{color:#fff}
@media(max-width:700px){.digresion{padding:36px 26px;border-radius:20px}}

/* Hilo de cota.
   Lo único que vale la pena del menú de Osmo: la línea punteada que enhebra
   los elementos. Allá conecta tarjetas inclinadas y no significa nada; aquí
   baja por la columna de 52 px y une las marcas de las cinco filas, que sí
   están en secuencia. Es una línea de referencia de plano, no un adorno. */
.hilo{position:relative}
.hilo::before{content:'';position:absolute;left:0;top:12px;bottom:30px;width:1px;
  background-image:linear-gradient(rgba(255,255,255,.26) 52%,transparent 52%);
  background-size:1px 8px}
.cla .hilo::before,.bla .hilo::before{
  background-image:linear-gradient(rgba(14,22,48,.24) 52%,transparent 52%)}
/* La marca deja de flotar y nace del hilo. */
.hilo .fila .mk i{margin-left:0}
@media(max-width:900px){.hilo::before{display:none}}

/* servicios */
.fila{display:grid;grid-template-columns:52px 1fr 1.5fr;gap:26px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.10);align-items:start}
.fila:last-of-type{border-bottom:none}
.marca{display:block;font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cian);font-weight:700;margin-bottom:5px}
.fila h3{font-size:1.18rem;letter-spacing:-.015em;line-height:1.3}
.fila>div:last-child p{font-size:1.01rem;color:#B9C6E4}
/* La fila nació en la banda oscura de Servicios. Sus colores suponían ese
   fondo, que es el error que ya costó cinco elementos invisibles, así que
   aquí quedan declaradas también sus variantes claras. */
.cla .fila,.bla .fila{border-bottom-color:rgba(14,22,48,.10)}
.cla .fila>div:last-child p,.bla .fila>div:last-child p{color:var(--muted)}
/* Cierre de fila: filete corto y texto un punto más apagado, para que se lea
   como conclusión y no como una viñeta más. Lo usan la landing y los casos. */
.resp{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.92rem;line-height:1.65;color:#A9BDD9}
.cla .resp,.bla .resp{border-top-color:rgba(14,22,48,.12);color:var(--muted)}
.resp b{color:#fff}
.cla .resp b,.bla .resp b{color:var(--ink)}
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 22px;margin-top:16px}
/* Como en la versión anterior: guion al frente, sin filete y en tono tenue.
   El filete las volvía celdas de tabla y competía con el hilo del margen. */
.caps div{position:relative;padding-left:15px;font-size:.91rem;color:#8FA3C4;line-height:1.55;margin-bottom:9px}
.caps div::before{content:'—';position:absolute;left:0;top:0;color:#5E7BA8}
.bla .caps div,.cla .caps div{color:var(--muted)}
.bla .caps div::before,.cla .caps div::before{color:var(--muted2)}
.mas{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:#7E96BE;font-weight:700;margin-top:16px;display:inline-block}
/* hitos */
/* Seis columnas fijas servían mientras el único usuario fuera el inicio, que
   tiene seis etapas. La landing tiene cuatro y llenaba cuatro huecos de seis:
   apretadas contra el margen izquierdo, con un tercio de la sección vacío a
   la derecha. `auto-fit` colapsa las pistas que sobran y reparte el ancho
   entre las que hay, así que la misma regla sirve para cuatro y para seis sin
   que cada página tenga que corregirla. */
.hitos{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:0 30px;
  margin-top:56px;border-top:1px solid rgba(255,255,255,.28)}
.bla .hitos,.cla .hitos{border-top-color:rgba(14,22,48,.24)}
/* Debajo de ~1150 px las seis etapas del inicio ya no caben en una fila y
   `auto-fit` dejaba cinco arriba y una suelta abajo. Dos columnas reparten
   parejo tanto las seis del inicio como las cuatro de la landing: ningún
   recuento posible deja un renglón cojo. */
@media(max-width:1150px){.hitos{grid-template-columns:1fr 1fr}}
.bla .hito span,.cla .hito span{color:var(--muted)}
.bla .hito::before,.cla .hito::before{background:var(--logo)}
.hito{padding:16px 0 0;position:relative}
.hito::before{content:'';position:absolute;left:0;top:0;width:1px;height:9px;background:var(--cian)}
.hito b{display:block;font-size:.97rem;line-height:1.25}
.hito span{display:block;font-size:.83rem;color:#9DB2CE;margin-top:5px;line-height:1.5}
/* EVIDENCIA · maqueta SPINX «Somos» */
.spinx{display:grid;grid-template-columns:1.12fr 1fr;gap:0 80px;align-items:start}
 /* El recorte de la «s» venía de combinar background-clip:text con
    letter-spacing negativo: la caja del texto termina antes que el glifo.
    El padding derecho devuelve el espacio que el tracking se comió. */
.gran{font-size:clamp(3rem,7.4vw,5.2rem);font-weight:800;letter-spacing:-.04em;line-height:1.02;
  background:linear-gradient(95deg,#1E9BF0,#00BFBF 46%,#22C58A);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:22px;display:inline-block;padding-right:.12em}
.equis{font-size:clamp(1.3rem,2.7vw,1.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.28;max-width:20ch;margin-bottom:26px}
.equis em{font-style:normal;color:#7E96BE;font-weight:400}
.spinx>div:first-child p{color:#A9BDD9;font-size:.95rem;max-width:52ch}
.spinx a.sub{border-bottom:1px solid currentColor}
.cif{margin-bottom:44px}
.cif b{display:block;font-size:clamp(1.9rem,3.7vw,2.7rem);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.cif span{display:block;font-size:.99rem;color:#9DB2CE;margin-top:7px;max-width:36ch}
.cif em{display:block;font-style:normal;font-size:.81rem;color:#7FAFC0;margin-top:7px}
.cif.propia b{color:var(--cian)}

/* DISTINTIVOS · rejilla de ICOMAT.
   Sí son tarjetas, pero de otra especie que las que quitamos: sin cinta de
   acento, sin borde, contraste bajísimo contra el fondo, y el contenido pegado
   al pie con el hueco arriba a propósito. Y una sola lleva énfasis — el color
   se gasta una vez, no seis. */
.dist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
/* La celda es una placa con pestaña, el mismo componente del pie de Contacto
   pero en chico: el nombre del diferenciador vive en la lengüeta y el cuerpo
   queda solo con la explicación. Se hizo así porque el nombre y la explicación
   no son lo mismo —uno rotula, el otro argumenta— y meterlos en el mismo
   bloque los dejaba leyéndose como un párrafo con la primera línea en negritas.
   Sin radio, como todo el pliego: la pestaña se lee como pestaña justamente
   porque el canto es recto. */
.dcell{--placa:#D9E0EA;background:none;border:0;padding:0;display:flex;flex-direction:column}
.dcell .pest,.dcell .cuerpo{background:var(--placa);
  transition:background .28s ease, color .28s ease}
.dcell .pest{position:relative;align-self:flex-start;max-width:calc(100% - 42px);
  padding:11px 20px 10px;border-radius:16px 16px 0 0;
  font-size:.92rem;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
/* El acuerdo entre la pestaña y el cuerpo: un cuadrito a la derecha del que se
   recorta un cuarto de círculo. Sin él la pestaña se ve pegada con cinta; con
   él la lengüeta nace del cuerpo, que es lo que la hace lengüeta.
   El color sale de --placa para que el relleno, la curva y el hover no puedan
   discrepar: es una sola variable, no tres declaraciones. */
.dcell .pest::after{content:'';position:absolute;right:-16px;bottom:0;width:16px;height:16px;
  background:radial-gradient(circle at 100% 0, transparent 16px, var(--placa) 16.5px);
  transition:background .28s ease}
.dcell .cuerpo{flex:1;min-height:126px;padding:20px 22px 24px;display:flex;flex-direction:column;
  border-radius:0 16px 16px 16px}
.dcell .cuerpo p{font-size:1rem;color:var(--muted2);line-height:1.5}
.dcell.tinta{--placa:var(--osc)}
.dcell.tinta .pest{color:#fff}
.dcell.tinta .cuerpo p{color:#8FA3C4;margin-bottom:18px}
.dcell.tinta .rl{font-size:.95rem;font-weight:700;color:#fff;margin-top:auto;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;align-self:flex-start}
/* Al pasar el cursor, la celda toma el color de la primera. Es lo que hace
   ICOMAT: en vez de sombra o borde, la tarjeta se pasa al lado oscuro. Como el
   color de la página se gasta una sola vez, el recorrido del mouse es lo único
   que lo mueve de sitio. La pestaña viaja con el cuerpo: si cambiara solo uno,
   la placa se partiría en dos piezas. */
.dcell:not(.tinta):hover{--placa:var(--osc)}
.dcell:not(.tinta):hover .pest{color:#fff}
.dcell:not(.tinta):hover .cuerpo p{color:#8FA3C4}
@media(prefers-reduced-motion:reduce){.dcell .pest,.dcell .cuerpo{transition:none}}
@media(max-width:900px){.dist{grid-template-columns:1fr}.dcell .cuerpo{min-height:0}}

/* clientes · carrusel */
.marquee{overflow:hidden;margin:52px 0 12px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.track{display:flex;align-items:center;gap:90px;width:max-content;animation:scroll 34s linear infinite}
/* Los logos NO se normalizan por alto.
   Con un alto fijo, un logotipo ancho —una palabra estirada— ocupa el doble
   de superficie que una marca cuadrada, y la cuadrada se ve diminuta al
   lado. Medido en los que hay: el más ancho tenía 2.7 veces la masa visual
   del circular.
   El alto de cada uno lo calcula el cargador a partir de su proporción real
   (ver el script del carrusel de clientes en index.html). Aquí solo quedan
   el tope de ancho y el alto de respaldo por si el script no corre. */
.track img{height:40px;width:auto;max-width:190px;object-fit:contain;filter:grayscale(1);opacity:.62}
@keyframes scroll{to{transform:translateX(-50%)}}
/* recursos */
/* Maqueta de ICOMAT «No vendemos máquinas»: titular arriba a la izquierda,
   un vacío grande en diagonal, y el contenido empujado abajo a la derecha.
   El hueco no es desperdicio: es lo que obliga a leer el titular primero. */
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:34px}
.icostruct .cuerpo .rec:nth-child(3){grid-column:1 / -1;max-width:calc(50% - 23px)}
@media(max-width:980px){
  
  .icostruct .cuerpo .rec:nth-child(3){grid-column:auto;max-width:100%}
}
/* Es una cota, no una tarjeta con icono.
   Traía el tratamiento de Jeton —cuadro de color con glifo por acción, y el
   enlace del mismo color— y eso es justo el patrón que llevamos meses sacando
   del sitio: el icono no decía nada que el título no dijera ya, y los tres
   colores no eran semánticos, eran tres acentos repartidos. Hoy comparte forma
   con las cotas de Compromisos y de Servicios: filete, rótulo, título, texto y
   el enlace en el color de la banda. */
.rec{border-top:1px solid rgba(255,255,255,.26);padding-top:18px;position:relative;
  display:flex;flex-direction:column}
.rec::before{content:'';position:absolute;left:0;top:0;width:22px;height:2px;background:var(--cian)}
.rec .rt{display:block;font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7E96BE;font-weight:700;margin-bottom:10px}
.rec h3{font-size:1.08rem;line-height:1.26;letter-spacing:-.015em;margin-bottom:8px;max-width:22ch}
.rec p{font-size:.97rem;color:#9DB2CE;margin-bottom:16px}
.rec .rl{display:inline-block;align-self:flex-start;margin-top:auto;
  font-size:.95rem;font-weight:600;color:var(--cian);border-bottom:1px solid}
.bla .rec,.cla .rec{border-top-color:rgba(14,22,48,.20)}
.bla .rec p,.cla .rec p{color:var(--muted)}
.bla .rec::before,.cla .rec::before{background:var(--logo)}
.bla .rec .rt,.cla .rec .rt{color:var(--muted2)}
.bla .rec .rl,.cla .rec .rl{color:var(--logo)}
/* faq */
/* Dos columnas al mismo nivel: el titular manda a la izquierda y la lista
   ocupa la derecha. Sin el vacío en diagonal de la sección de arriba —aquí no
   hay nada que hacer esperar, solo preguntas que se leen en orden. */
.dos-col{display:grid;grid-template-columns:.85fr 1.5fr;gap:0 70px;align-items:start}
.dos-col h2{max-width:14ch}
.dos-col .lead{margin-top:14px}
@media(max-width:980px){.dos-col{grid-template-columns:1fr;gap:34px}}
.faq{margin-top:0}
.faq div:first-child{border-top:none;padding-top:0}
.faq div{border-top:1px solid rgba(14,22,48,.14);padding:16px 0}
.osc .faq div{border-top-color:rgba(255,255,255,.16)}
.osc .faq p{color:#9DB2CE}
.faq b{display:block;font-size:.98rem;margin-bottom:4px}
.faq p{font-size:.99rem;color:var(--muted);max-width:76ch}
/* tecnologías · muro de logos */
.muro{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 48px;margin-top:38px}
.muro div,.muro .tech-item{width:132px;height:52px;display:flex;align-items:center;justify-content:center;
    background:none;border:0;padding:0;box-shadow:none}
.muro img{max-height:42px;max-width:132px;object-fit:contain}
@media (hover:hover){.muro img{filter:grayscale(1);opacity:.62;transition:.25s}.muro div:hover img{filter:none;opacity:1}}
/* PIE · placa con muesca (Landon Norris) + formulario visible */
.placa{position:relative;background:#0C1A44;color:#fff;border-radius:0;padding:64px 0 52px;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:88px 88px,88px 88px}
/* Pestaña: sobresale por arriba como la de una carpeta. Antes era un recorte
   blanco encima de la placa, que leía como mordida y no como lengüeta. */
.placa{margin-top:36px}
.placa::before{content:'';position:absolute;top:-32px;left:50%;transform:translateX(-50%);
  width:240px;height:34px;background:#0C1A44;border-radius:16px 16px 0 0}
.placa .wrap{width:min(1180px,92%);margin-inline:auto}
/* La placa es oscura pero vive dentro de una sección clara, así que heredaba
   el botón de fondo claro —relleno oscuro— y quedaba invisible sobre sí misma.
   Aquí manda el color de la placa, no el de la sección que la contiene. */
.placa .bp{background:#fff;color:var(--osc)}
.placa .bp .fl{border-left-color:rgba(11,19,48,.22)}
.placa .bp:hover{background:#DCE6F7}
.placa h2{text-align:center;font-size:clamp(1.8rem,4.2vw,3rem);max-width:18ch;margin:0 auto 10px;line-height:1.08}
/* Segundo y último pico de color de la página. El mismo degradado de
   «Medimos», aquí en el cierre: uno a la mitad, donde está el argumento, y otro
   al final, donde está la acción. El padding derecho evita el recorte que ya
   nos mordió con la «s» — el espaciado negativo deja la caja más corta que el
   último glifo. */
.placa h2 .ac{
  background:linear-gradient(95deg,#1E9BF0,#00BFBF 46%,#22C58A);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.1em}
.placa .sub{text-align:center;color:#A9BDD9;font-size:.95rem;max-width:52ch;margin:0 auto 46px}
.pie-rej{display:grid;grid-template-columns:1.4fr .7fr .7fr;gap:0 56px;align-items:start}
.pie-col .rot{text-align:left}
/* El formulario flotaba: los campos tenían borde pero el conjunto no empezaba
   ni terminaba en ningún lado. Se delimita con el mismo recurso del resto de la
   página —filete y marca de cota arriba, filete abajo— en vez de meterlo en una
   caja, que sería vocabulario nuevo. */
form{display:grid;gap:12px;position:relative;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.26)}
form::before{content:'';position:absolute;left:0;top:0;width:22px;height:2px;background:#13D7D7}
input,textarea{font-family:inherit;font-size:1.01rem;color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);border-radius:0;padding:12px 14px;width:100%}
input::placeholder,textarea::placeholder{color:#7E96BE}
/* El botón se alinea al borde derecho del formulario, a la misma vertical
   donde terminan los campos. La nota de respuesta ocupa el hueco de la
   izquierda en vez de quedar colgando debajo. */

.pie-baja{margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.87rem;color:#7E96BE}
@media(max-width:980px){
  .spinx,.pie-rej{grid-template-columns:1fr;gap:40px}
  .ic-rej{max-width:100%;grid-template-columns:1fr}
  .icomat h2{margin-left:0}
  .fila{grid-template-columns:44px 1fr;gap:18px}.fila>div:last-child{grid-column:2}
  .caps{grid-template-columns:1fr}.hitos{grid-template-columns:1fr 1fr}.tres{grid-template-columns:1fr}
}

/* El formulario real —con su aviso simplificado y su casilla— dentro de la placa. */
.placa-form .field label{color:#A9BDD9}
.placa-form input,.placa-form textarea,.placa-form select{background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:0}
/* El desplegable no existía en el formulario del inicio y salía con el estilo
   del navegador —caja blanca— en medio de campos oscuros. Las opciones sí van
   en claro: el menú lo dibuja el sistema operativo y heredar el fondo oscuro
   deja texto blanco sobre blanco en varios navegadores. */
.placa-form select{width:100%;padding:12px 14px;font-family:inherit;font-size:.97rem;
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#A9BDD9 50%),
                   linear-gradient(135deg,#A9BDD9 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.placa-form select option{background:#fff;color:var(--osc)}
.placa-form input::placeholder,.placa-form textarea::placeholder{color:#7E96BE}
.placa-form .aviso-simplificado{background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);color:#A9BDD9;border-radius:0}
.placa-form .aviso-simplificado b{color:#fff}
.placa-form .aviso-simplificado a{color:#13D7D7}
.placa-form .form-note{color:#7E96BE}
.placa-form .req{color:#13D7D7}
.placa-form .btn-primary{background:#fff;color:var(--osc)}
.placa-form .btn-primary::after{border-left-color:rgba(11,19,48,.22)}
.placa-datos .info-item{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.placa-datos .info-item .ic{width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.2);border-radius:0}
.placa-datos .info-item .ic svg{width:18px;height:18px;stroke:#13D7D7;fill:none}
.placa-datos .info-item b{display:block;font-size:1.01rem;color:#fff}
.placa-datos .info-item span{font-size:.95rem;color:#A9BDD9}
.placa-datos h2{text-align:left;margin:0 0 10px}
.placa-datos>.contact-info>p{color:#A9BDD9;margin-bottom:24px}
.placa .pie-rej{grid-template-columns:1.5fr .9fr}
@media(max-width:980px){.placa .pie-rej{grid-template-columns:1fr}}

/* El ícono heredaba `background:var(--bg-soft)` de la regla base —pensada para
   banda clara— y salía blanco sobre la placa oscura. */
.placa-datos .info-item .ic{background:none}
/* El formulario, compacto: dentro de la placa no compite con nada, así que no
   necesita el aire que tenía cuando vivía en su propia sección. */
.placa-form .field{margin-bottom:12px}
.placa-form textarea{min-height:92px;resize:vertical}
.placa-form .aviso-simplificado{font-size:.85rem;line-height:1.5;padding:14px 16px;margin-top:6px}
.placa-form .casilla-negativa{font-size:.85rem;margin-top:10px}
/* Sexto caso del color fijado fuera de su banda: el texto de la casilla traía
   `color:var(--ink)` de cuando el formulario vivía sobre fondo claro. Dentro
   de la placa oscura quedaba tinta sobre tinta. El acento de la casilla
   también se ajusta: `--accent` es el azul de banda clara. */
.placa-form .casilla-negativa span{color:#A9BDD9}
.placa-form .casilla-negativa input{accent-color:var(--cian)}
.placa-form .envio{margin-top:16px}
.placa{padding:58px 0 44px}
.placa .sub{margin-bottom:38px}

/* El bloque de diferenciadores pesa tanto como «Arranca», así que comparte
   su cuerpo de titular. */
.dist-sec h2{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.1;max-width:18ch}
/* Sobre banda clara la celda era #EEF0F4 contra un fondo #F4F5F7: un solo tono
   de diferencia y no se distinguía. El relleno vive hoy en la pestaña y el
   cuerpo, no en el contenedor. */

/* Capacidades ocultas: el mock solo traía tres por servicio y el rótulo
   prometía el resto sin que existieran. Ahora están todas en el marcado —que
   es lo que indexa Google— y se pliegan por CSS. */
.caps .oculta{display:none}
.caps.abierta .oculta{display:block}
.mas{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:#7E96BE;
  font-weight:700;margin-top:14px;display:inline-block;transition:color .2s}
.mas:hover{color:#fff}
.bla .mas,.cla .mas{color:var(--muted2)} .bla .mas:hover,.cla .mas:hover{color:var(--ink)}

/* El título de las tarjetas de Recursos traía `color:#fff` fijado desde el
   diseño anterior, cuando esa sección vivía en banda oscura. Al pasar a banda
   clara quedó blanco sobre blanco: invisible. Quinto caso del mismo error, y
   la razón de la regla de no fijar color en el marcado ni fuera de la banda. */
.bla .rec h3,.cla .rec h3{color:var(--ink)}

/* ============ MÓVIL ============
   El rótulo vertical del margen es un recurso de pliego: funciona cuando hay
   ancho de sobra al costado. En un teléfono se come 52 px de los ~330 útiles y
   empuja todo el contenido contra el borde derecho. Abajo de 760 px la marca de
   cota se acuesta —sigue siendo la misma marca, solo horizontal— y el rótulo
   desaparece: el titular ya dice de qué va la sección. */
@media(max-width:760px){
  .eje{grid-template-columns:1fr}
  .eje>.mk{flex-direction:row;align-items:center;padding-top:0;margin-bottom:16px}
  .mrot{display:none}
  .col{padding-left:0}
  .hero .margen{display:none}
  .hcuerpo{padding:48px 0 44px}
  .tira{margin-top:40px}
  .it{flex:1 1 100%;padding:14px 0 0}
  /* El muro de tecnologías caía a un logo por renglón: veinte renglones de
     alto para una sección que es un vistazo, no una lectura. */
  .muro{gap:20px 16px;margin-top:28px}
  .muro div,.muro .tech-item{width:98px;height:44px}
  .muro img{max-height:34px;max-width:98px}
  /* El mazo en arco necesita ancho para que se asomen las vecinas; en un
     teléfono solo cabe una y el arco deja de significar algo. Se convierte en
     un carrusel de desplazamiento con imán, que es el gesto que ahí se espera.
     Los estilos llevan !important porque el script escribe en el `style` del
     elemento y una hoja normal no le gana. */
  .mazo-sec .arco{display:none}
  .mazo{height:auto;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-top:26px;padding-bottom:12px;-webkit-overflow-scrolling:touch}
  .tarj{position:static!important;flex:0 0 82%;width:auto!important;height:auto!important;
    min-height:286px;margin-left:0!important;transform:none!important;opacity:1!important;
    filter:none!important;scroll-snap-align:center}
  .selector,.flecha{display:none}
  .mazo-pie{margin-top:22px}
}

/* ============ PIE DE PÁGINAS INTERIORES ============
   El inicio y la landing cierran con la placa con pestaña, que lleva el
   formulario dentro. Las páginas interiores no tienen formulario, así que
   cierran con este pie: la misma placa oscura, sin la pestaña ni el vidrio. */
footer.pie{background:var(--osc);color:#fff;padding:44px 0 40px;position:relative}
footer.pie::before{content:'';position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--cian),transparent 62%)}
footer.pie .wrap{display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;flex-wrap:wrap;font-size:.88rem;color:#7E96BE}
footer.pie a{color:#A9BDD9;text-decoration:none;transition:color .2s}
footer.pie a:hover{color:#fff}
footer.pie .liga{display:flex;gap:16px;flex-wrap:wrap}

/* ============ CABECERA DE PÁGINA INTERIOR ============
   El inicio abre con el héroe. Las interiores abrían con una sección normal
   —eje, rótulo vertical, titular mediano— y al llegar no había ninguna señal
   de cambio de página: se sentía seguir en el inicio.

   Esta cabecera es el cajetín del pliego: identifica la lámina. Ruta a la
   izquierda, dato que la dimensiona a la derecha, titular al tamaño de
   página y no de sección. Deliberadamente NO lleva eje ni rótulo girado —
   eso es exactamente lo que la distingue de una sección. */
.cabecera{padding:92px 0 68px}
.ruta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:#7E96BE;padding-bottom:13px;margin-bottom:38px;
  border-bottom:1px solid rgba(255,255,255,.18)}
.cla .ruta,.bla .ruta{color:var(--muted2);border-bottom-color:rgba(14,22,48,.13)}
.ruta a{color:inherit;text-decoration:none;transition:color .2s}
.ruta a:hover{color:#fff}
.cla .ruta a:hover,.bla .ruta a:hover{color:var(--ink)}
.ruta .sep{opacity:.45}
.ruta .aqui{color:#fff}
.cla .ruta .aqui,.bla .ruta .aqui{color:var(--ink)}
.ruta .hoja{margin-left:auto;color:var(--cian);letter-spacing:.14em}
.cla .ruta .hoja,.bla .ruta .hoja{color:var(--logo)}
.cabecera h1{font-size:clamp(2.1rem,5.4vw,3.9rem);line-height:1.02;letter-spacing:-.042em;
  max-width:17ch;margin:0 0 20px;font-weight:700}
.cabecera .lead{max-width:60ch;font-size:1.03rem}
@media(max-width:760px){
  .cabecera{padding:52px 0 44px}
  .ruta{margin-bottom:26px}
  .ruta .hoja{margin-left:0;width:100%}
}