/* ============================================================
   TIPOGRAFÍA — autoalojada (P20). Antes se cargaba desde Google
   Fonts; estos 4 archivos son el subset "latin" (cubre español)
   de las mismas 3 familias, servidos same-origin desde
   /assets/fonts/. Space Grotesk e IBM Plex Sans son variables:
   Google sirve un solo archivo por familia para todo el rango de
   peso — por eso un @font-face con font-weight en rango, no uno
   por cada peso. IBM Plex Mono no es variable: un archivo por peso.
   Total los 4 archivos: ~104KB (antes: misma descarga, pero desde
   un origen aparte —fonts.gstatic.com— con su propia conexión).
   ============================================================ */
@font-face{
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/assets/fonts/space-grotesk-variable-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-variable-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
}

/* ============================================================
   PALETA DE MARCA — colores oficiales de Precodata.
   Tomados del sitio en producción (precodata.com.uy):
     El color de marca es el navy #071C3B (--marca-osc). El celeste
     #7698CF (--marca-clara) es el acento real del sitio actual.
     --marca-intermedia es el azul medio derivado para enlaces / franjas
     / CTA sobre fondo claro (contraste AA: 7.6:1 sobre papel, 8.7:1 con
     texto blanco). Cambiar estos tres valores actualiza todo el sitio.
   ============================================================ */
:root{
  --marca-osc:        #071C3B;  /* NAVY — color de marca. Fondos hero/footer y títulos      */
  --marca-intermedia: #1E4E8F;  /* azul medio derivado — enlaces, franjas, CTA sobre claro  */
  --marca-clara:      #7698CF;  /* celeste — acentos sobre fondo oscuro (= sitio actual)    */

  /* Neutros derivados */
  --tinta:#0C1F2B;
  --papel:#F1F4F9;   /* antes #F7F9FC: un poco más oscuro para que se distinga del blanco en pantallas muy luminosas (1.10:1 contra blanco, antes 1.06:1) */
  --blanco:#FFFFFF;
  --acero:#475764;   /* texto secundario: 7:1 sobre blanco (antes #5B6B78, 5.5:1); sigue claramente más claro que --tinta (16.8:1) */
  --filo:rgba(12,31,43,.14);
  --filo-solido:#DDE0E1;  /* = --filo compuesto sobre blanco, pero opaco (para fills sobre fondos no blancos) */
  --filo-oscuro:rgba(255,255,255,.14);

  --max:1200px;
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
/* scroll-padding-top: al saltar a un ancla, el navegador deja este espacio
   arriba para que el header fijo (74px) no tape el título de la sección.
   Aplica a toda la web: secciones del Home, #contacto del footer y los
   bloques del índice lateral de las páginas internas. */
html{scroll-behavior:smooth;scroll-padding-top:90px}
/* Sin desplazamiento animado si el usuario pide reducir el movimiento; el
   salto de ancla es instantáneo (el scroll-padding-top se sigue respetando). */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Anillo de foco bitono: contorno navy (color de marca) + halo blanco
   exterior (box-shadow). Sobre fondo claro se ve el navy (17:1); sobre navy
   se ve el blanco (17:1). Da >=3:1 en todos los fondos del sitio, incluidos
   los botones celestes y la franja CTA azul (WCAG 1.4.11 / 2.4.11). */
:focus-visible{outline:3px solid var(--marca-osc);outline-offset:2px;box-shadow:0 0 0 7px var(--blanco)}
/* Grillas "pegadas" y tarjetas contiguas (Productos e íconos de Biometría en
   la Home, logos de Partners, etc.): el elemento con foco se eleva para que el
   anillo se dibuje por encima de las celdas vecinas. position:relative sin
   desplazamiento no altera el layout. */
.prod__card:focus-visible,
.plogos a:focus-visible,
.ancla:focus-visible,
.partner:focus-visible,
.caso:focus-visible{position:relative;z-index:1}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* Oculto a la vista pero disponible para lectores de pantalla
   (p. ej. un h2 que agrupa los títulos de una sección sin encabezado visible). */
.oculto-visual{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* Enlaces de salto: primeros elementos enfocables de la página. Ocultos
   fuera de pantalla, aparecen arriba a la izquierda al recibir el foco de
   teclado. Apuntan a #contenido (<main>) y a #nav. */
.skip-link{
  position:fixed;top:0;left:12px;z-index:200;
  transform:translateY(-120%);
  background:var(--marca-osc);color:var(--blanco);
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.02em;
  padding:12px 18px;border-radius:0 0 2px 2px;text-decoration:none;
  transition:transform .16s ease;
}
/* El skip-link tiene fondo navy: acá el contorno del foco es blanco. */
.skip-link:focus-visible{transform:translateY(0);outline:2px solid var(--blanco);outline-offset:-4px;box-shadow:none}
#contenido:focus,#contenido:focus-visible,#nav:focus,#nav:focus-visible{outline:none;box-shadow:none}

.campo{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acero);
}

/* ---------- HEADER ---------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--filo);transition:box-shadow .2s ease}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px;transition:height .18s ease}
.hd__logo img{width:auto;height:auto;max-height:34px;max-width:none;transition:max-height .18s ease}
/* Header compacto: al hacer scroll (JS agrega .scrolled en <html>) se achica
   el alto y el logo, y aparece una sombra leve. Queda igual de pegado arriba. */
.scrolled .hd .wrap{height:58px}
.scrolled .hd__logo img{max-height:27px}
.scrolled .hd{box-shadow:0 3px 14px -9px rgba(12,31,43,.32)}
@media(prefers-reduced-motion:reduce){
  .hd,.hd .wrap,.hd__logo img,.burger span{transition:none}
}
.nav{display:flex;align-items:center;gap:4px}
.nav__link{
  font-family:var(--display);font-size:12.5px;font-weight:500;letter-spacing:.12em;line-height:1.6;
  text-transform:uppercase;color:var(--acero);padding:10px 14px;border-radius:2px;
  border:1px solid transparent;
  display:inline-flex;align-items:center;gap:7px;transition:color .18s,background .18s,border-color .18s;
}
/* El disparador de "Productos y servicios" es un <button>: se resetea antes
   de las reglas de hover/activo para que las herede igual que un <a>. */
.nav__toggle{background:none;cursor:pointer}
/* Hover como un botón sutil: fondo papel + borde hairline (--filo). El borde
   transparente se reserva siempre (box-sizing:border-box) para no mover nada. */
.nav__link:hover{color:var(--marca-intermedia);background:var(--papel);border-color:var(--filo)}
.nav__link--on{color:var(--marca-intermedia);background:var(--papel);border-color:var(--marca-clara)}
.nav__item{position:relative}
.nav__caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.nav__toggle[aria-expanded="true"] .nav__caret{transform:rotate(225deg) translateY(2px)}
.drop{
  position:absolute;top:calc(100% + 10px);left:0;transform:translateY(-6px);
  min-width:268px;background:var(--blanco);border:1px solid var(--filo);
  box-shadow:0 24px 50px -20px rgba(7,47,82,.45);padding:8px;
  opacity:0;visibility:hidden;transition:.2s;
}
/* El submenú se abre SOLO por interacción explícita (click / Enter / Espacio),
   cuyo estado lo lleva aria-expanded (lo setea el JS). Sin apertura por hover:
   así el estado visible y el semántico (aria-expanded, giro de la flecha) nunca
   se desincronizan. El foco de teclado tampoco lo abre. */
.nav__toggle[aria-expanded="true"] + .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop a{display:block;padding:10px 14px;font-size:14.5px;border-left:2px solid transparent;transition:color .15s,background .15s,border-color .15s}
.drop a:hover{background:var(--papel);border-left-color:var(--marca-intermedia);color:var(--marca-intermedia)}
/* Página actual dentro del submenú: filete lateral fijo + fondo (como el hover, pero permanente). */
.drop a[aria-current="page"]{background:var(--papel);border-left-color:var(--marca-intermedia);color:var(--marca-intermedia)}
.burger{display:none;background:none;border:1px solid var(--filo);color:var(--tinta);width:44px;height:40px;cursor:pointer;align-items:center;justify-content:center;gap:4px;flex-direction:column;border-radius:2px}
.burger span{display:block;width:18px;height:1.5px;background:var(--tinta);transition:transform .2s ease,opacity .2s ease}
/* Menú abierto: las 3 barras se transforman en una X (señal de "cerrar").
   translateY = altura de barra (1.5) + gap (4) = 5.5px para juntar las
   barras extremas en el centro antes de rotar. */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--marca-osc);color:var(--blanco);overflow:hidden}
.hero .wrap{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding-top:112px;padding-bottom:72px;
}
.hero__eyebrow{color:var(--marca-clara);margin:0 0 22px}
/* Título visual del hero: es un <p>, no un encabezado. El <h1> de la página es el lead (.hero__lead),
   que describe lo que hace Precodata; este texto solo conserva el aspecto del título de marca. */
.hero__titulo{
  font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(2.9rem,6vw,4.6rem);margin:0 0 22px;
}
.hero__titulo em{font-style:normal;color:var(--marca-clara)}
.hero__lead{font-weight:400;font-size:1.12rem;line-height:1.65;color:rgba(255,255,255,.76);max-width:46ch;margin:0 0 36px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 26px;border:1px solid transparent;transition:.18s;display:inline-block;cursor:pointer;
}
.btn--marca{background:var(--marca-clara);color:var(--marca-osc)}
.btn--marca:hover{background:#fff}
.btn--intermedia{background:var(--marca-intermedia);color:var(--blanco)}
.btn--intermedia:hover{background:var(--marca-osc)}
.btn--ghost{border-color:rgba(255,255,255,.34);color:#fff}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hero__art{position:relative;display:flex;justify-content:center;width:100%}
.hero__glow{position:absolute;inset:-10%;background:radial-gradient(circle,rgba(79,155,216,.22),transparent 62%);filter:blur(30px);pointer-events:none}

/* ---------- HERO — bio: validación biométrica (firma > huella > iris) ----------
   Un solo lugar de dibujo (.bio-stage), las tres capas superpuestas y el
   CSS decide cuál se ve mediante un ciclo de 15s por keyframes (ver más
   abajo). assets/js/hero-bio.js solo construye la geometría SVG una vez
   al cargar; no hay JS controlando el ciclo. */
.bio-hero{position:relative;width:100%;max-width:330px;display:flex;flex-direction:column;align-items:center;gap:24px}
.bio-stage{position:relative;width:100%;aspect-ratio:1}
.bio-marco,.bio-capa{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bio-marco{opacity:.32}
.bio-marco path{fill:none;stroke:var(--marca-clara);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.bio-scan{position:absolute;left:0;top:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(118,152,207,.9),transparent);opacity:.5;pointer-events:none;display:none}

.bio-traza{fill:none;stroke:var(--marca-clara);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1400;stroke-dashoffset:0}
.bio-traza--blanca{stroke:#fff}
.bio-o7{opacity:.7}
.bio-o55{opacity:.55}
.bio-o45{opacity:.45}
.bio-punto{fill:var(--marca-clara);opacity:0}
.bio-marcador{opacity:0}

/* estático (sin animación / reduced-motion): las tres capas superpuestas y quietas */
.g-iris .bio-traza,.g-huella .bio-traza,.g-firma .bio-traza{stroke-dashoffset:0}
.g-firma{opacity:.95}
.g-huella{opacity:.6}
.g-iris{opacity:.24}
.g-iris .bio-punto,.g-firma .bio-punto,.g-huella .bio-marcador{opacity:.7}

.bio-pasos{width:100%;max-width:300px}
.bio-pasos__fila{display:flex;justify-content:space-between;margin-bottom:12px}
.bio-paso{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.bio-riel{position:relative;height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.bio-riel__relleno{position:absolute;left:0;top:0;height:2px;width:33.333%;background:var(--marca-clara);box-shadow:0 0 8px rgba(118,152,207,.7)}

@media(prefers-reduced-motion:no-preference){
  .g-iris,.g-huella,.g-firma{opacity:1}
  .g-iris .bio-traza,.g-huella .bio-traza,.g-firma .bio-traza{stroke-dashoffset:1400}
  .g-iris .bio-punto,.g-firma .bio-punto,.g-huella .bio-marcador{opacity:0}
  .bio-scan{display:block;animation:bioScan 5s linear infinite}
  /* orden de la secuencia: firma -> huella -> iris, un tercio del ciclo c/u */
  .g-firma .bio-traza{animation:bioFirma 15s ease-in-out infinite}
  .g-huella .bio-traza{animation:bioHuella 15s ease-in-out infinite}
  .g-iris .bio-traza{animation:bioIris 15s ease-in-out infinite}
  .g-firma .bio-punto{animation:bioPuntoFirma 15s ease-in-out infinite}
  .g-huella .bio-marcador{animation:bioMarcadorHuella 15s ease-in-out infinite}
  .g-iris .bio-punto{animation:bioPuntoIris 15s ease-in-out infinite}
  .bio-riel__relleno{animation:bioRiel 15s ease-in-out infinite}
  .bio-paso[data-paso="firma"]{animation:bioPasoFirma 15s ease-in-out infinite}
  .bio-paso[data-paso="huella"]{animation:bioPasoHuella 15s ease-in-out infinite}
  .bio-paso[data-paso="iris"]{animation:bioPasoIris 15s ease-in-out infinite}
}
@keyframes bioScan{0%{top:0}50%{top:100%}100%{top:0}}
/* tramo 1 (0-32%): firma */
@keyframes bioFirma{0%{stroke-dashoffset:1400}12%{stroke-dashoffset:0}26%{stroke-dashoffset:0}32%{stroke-dashoffset:1400}100%{stroke-dashoffset:1400}}
@keyframes bioPuntoFirma{0%,12%{opacity:0}17%{opacity:1}26%{opacity:1}31%{opacity:0}100%{opacity:0}}
@keyframes bioPasoFirma{0%,30%{color:var(--marca-clara)}35%,100%{color:rgba(255,255,255,.3)}}
/* tramo 2 (33-65%): huella */
@keyframes bioHuella{0%,33%{stroke-dashoffset:1400}45%{stroke-dashoffset:0}59%{stroke-dashoffset:0}65%{stroke-dashoffset:1400}100%{stroke-dashoffset:1400}}
@keyframes bioMarcadorHuella{0%,45%{opacity:0}51%{opacity:1}59%{opacity:1}64%{opacity:0}100%{opacity:0}}
@keyframes bioPasoHuella{0%,33%{color:rgba(255,255,255,.3)}38%,63%{color:var(--marca-clara)}68%,100%{color:rgba(255,255,255,.3)}}
/* tramo 3 (66-98%): iris */
@keyframes bioIris{0%,66%{stroke-dashoffset:1400}78%{stroke-dashoffset:0}92%{stroke-dashoffset:0}98%{stroke-dashoffset:1400}100%{stroke-dashoffset:1400}}
@keyframes bioPuntoIris{0%,78%{opacity:0}83%{opacity:1}92%{opacity:1}97%{opacity:0}100%{opacity:0}}
@keyframes bioPasoIris{0%,66%{color:rgba(255,255,255,.3)}71%,97%{color:var(--marca-clara)}100%{color:rgba(255,255,255,.3)}}
@keyframes bioRiel{0%,30%{transform:translateX(0)}34%,63%{transform:translateX(100%)}67%,96%{transform:translateX(200%)}100%{transform:translateX(200%)}}

/* ---------- SECCIONES ---------- */
.sec{padding:80px 0}
.sec--papel{background:var(--papel)}
.sec--blanco{background:var(--blanco)}
/* Textura lateral de puntos (solo sobre .sec--papel): la grilla de 24px de las animaciones de casos, en azul de marca
   muy tenue, pegada a los costados de la franja y desvaneciéndose hacia el contenido. Es solo decoración (pseudo-elementos,
   sin pointer-events). El ancho es el espacio libre a cada lado del bloque de 840px, entre 120 y 320px; con menos de
   1100px de pantalla ya no hay costado libre y se oculta. Se usa en "Precodata hoy". */
.sec--puntos{position:relative;overflow:hidden}
.sec--puntos::before,.sec--puntos::after{
  content:"";position:absolute;top:0;bottom:0;z-index:0;pointer-events:none;
  width:clamp(120px,calc((100% - 840px) / 2 - 10px),320px);
  background-image:radial-gradient(circle at center,rgba(30,78,143,.24) 1.1px,transparent 1.7px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(to right,#000 0,rgba(0,0,0,.55) 40%,rgba(0,0,0,.16) 75%,transparent 100%);
  mask-image:linear-gradient(to right,#000 0,rgba(0,0,0,.55) 40%,rgba(0,0,0,.16) 75%,transparent 100%);
}
.sec--puntos::before{left:0}
.sec--puntos::after{right:0;transform:scaleX(-1)}
.sec--puntos > .wrap{position:relative;z-index:1}
@media(max-width:1100px),print{.sec--puntos::before,.sec--puntos::after{display:none}}
.sec__head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:40px;border-bottom:1px solid var(--filo);padding-bottom:18px}
.sec__head h2{
  font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.35;margin:0;
}
.sec__head a{font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--marca-intermedia);white-space:nowrap}
.sec__head a:hover{text-decoration:underline;text-underline-offset:4px}

/* Precodata hoy (Home): rompe la línea recta del sitio. El bloque va
   centrado (no ocupa todo el ancho); el título y el enlace se alinean a la
   derecha para recostarse sobre las cifras, que van en 2×2 sin desfase.
   Números grandes en navy, etiquetas en mono. */
.hoy{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:160px;align-items:start;max-width:840px;margin:0 auto}
.hoy__intro{display:flex;flex-direction:column;align-items:flex-end;gap:16px;text-align:right}
.hoy__intro h2{font-family:var(--display);font-weight:600;letter-spacing:-.015em;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.08;margin:0;color:var(--tinta);text-wrap:balance}
.hoy__intro a{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--marca-intermedia);white-space:nowrap}
.hoy__intro a:hover{text-decoration:underline;text-underline-offset:4px}
.hoy__cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;row-gap:40px}
.cifra{display:flex;flex-direction:column;gap:12px}
.cifra b{font-family:var(--display);font-weight:600;font-size:clamp(3rem,5vw,4rem);line-height:.92;color:var(--marca-intermedia)}
.cifra span{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--acero)}
/* variante con texto en lugar de número: el título en mayúsculas, en 2 líneas, mide
   lo mismo que una cifra (clamp(3rem,5vw,4rem) × .92 de alto) para que las
   tarjetas de dato queden parejas. */
.cifra--texto b{font-size:clamp(1.4rem,2.2vw,1.75rem);font-weight:700;line-height:1.05;text-transform:uppercase}

/* Productos (Home): sin título; una franja navy arriba (igual color que el
   hero) sobre la que se montan las primeras tarjetas, para que la sección
   parezca apoyarse sobre el hero sin usar márgenes negativos. */
#productos{position:relative;padding-top:0}
#productos::before{content:"";position:absolute;left:0;right:0;top:0;height:92px;background:var(--marca-osc);z-index:0}
#productos > .wrap{position:relative;z-index:1;padding-top:44px}

.prod{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filo-solido);border:1px solid var(--filo-solido)}
.prod__card{background:var(--blanco);padding:34px 30px 30px;display:flex;flex-direction:column;gap:14px;transition:background .2s}
.prod__card:hover{background:#fff}
.prod__card:hover .prod__icon,.prod__card:hover h3{color:var(--marca-intermedia)}
.prod__card:hover h3{text-decoration:underline;text-underline-offset:4px}
.prod__icon{color:var(--tinta);height:48px;transition:color .2s}
.prod__icon svg{width:48px;height:48px;stroke:currentColor;fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.prod__card h3{font-family:var(--display);font-size:1.375rem;line-height:1.35;font-weight:600;margin:0;text-wrap:balance;transition:color .2s}
.prod__card p{margin:0;font-size:15.4px;color:var(--acero);line-height:1.62}
.prod__more{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--marca-intermedia)}

/* Partners (Home): grilla horizontal que sangra a los bordes del viewport y
   se navega con scroll horizontal. Cada tarjeta enlaza a su detalle en
   partners.php. Dos grupos: arriba nombre + descripción (alineados igual
   en todas las tarjetas), abajo el logo como segunda línea de lectura. */
.partners{
  display:flex;gap:16px;
  overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
  /* aire arriba/abajo para el anillo de foco (el scroll horizontal recorta
     el eje vertical); el margen negativo mantiene el alto ocupado igual. */
  padding-block:10px;margin-block:-10px;
}
.partners::-webkit-scrollbar{display:none}
.partner{
  flex:0 0 260px;
  background:var(--blanco);border:1px solid var(--filo);
  padding:24px 22px;display:flex;flex-direction:column;gap:16px;
  transition:border-color .2s;
}
.partner:hover{border-color:var(--marca-intermedia)}
.partner__txt{display:flex;flex-direction:column;gap:12px}
.partner__nombre{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.35;margin:0;color:var(--tinta);text-wrap:balance;transition:color .2s}
.partner:hover .partner__nombre{color:var(--marca-intermedia);text-decoration:underline;text-underline-offset:4px}
.partner p{margin:0;font-size:15px;line-height:1.6;color:var(--acero)}
.partner__logo{
  box-sizing:content-box;margin-top:auto;height:56px;
  display:flex;align-items:center;justify-content:center;
  padding-top:22px;border-top:1px solid var(--filo);
}
.partner__logo img{max-height:56px;width:auto;object-fit:contain}

/* .plogos — grilla compacta de logos SOLO en partners.php (no en el Home):
   solo el logo, a color, y cada celda enlaza a su bloque de detalle.
   Con 14 partners: 2 filas de 7 en escritorio; en mobile, 2 columnas.
   Si cambia la cantidad, usar un múltiplo del número de columnas para no
   dejar celdas vacías (el gris del fondo asomaría). */
.plogos{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--filo);border:1px solid var(--filo)}
.plogos a{background:var(--blanco);display:flex;align-items:center;justify-content:center;padding:16px 14px;min-height:80px;transition:background .18s}
.plogos a:hover{background:var(--papel)}
.plogos img{max-height:36px;max-width:100%;width:auto;object-fit:contain;transition:transform .18s}
.plogos a:hover img{transform:scale(1.06)}

/* .logo-mono — para logos de partners que solo existen en blanco (pensados
   para fondos oscuros). Recolorea vía CSS en vez de pedir un archivo nuevo:
   el <img> real se hace invisible (opacity, no display/visibility, para que
   el alt siga en el árbol de accesibilidad) y un ::before del mismo tamaño
   pinta --tinte usando la propia imagen como máscara de alfa. --tinte y
   --logo-url los define el PHP/JS que arma cada partner (campo 'tinte'). */
.logo-mono{position:relative;display:inline-flex}
.logo-mono img{opacity:0}
.logo-mono::before{
  content:'';position:absolute;inset:0;
  background-color:var(--tinte);
  -webkit-mask:var(--logo-url) center/contain no-repeat;
  mask:var(--logo-url) center/contain no-repeat;
}

.clientes{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--filo);border:1px solid var(--filo)}
.cliente{background:var(--blanco);aspect-ratio:1.5/1;display:flex;align-items:center;justify-content:center;padding:16px}
.cliente img{max-height:52px;max-width:100%;width:auto;object-fit:contain;transition:transform .22s}
.cliente:hover img{transform:scale(1.05)}
.clientes__pie{margin:18px 0 0;font-size:14px;color:var(--acero)}

/* ---------- FRANJA DE CLIENTES (Home) — logos paginados ----------
   La grilla completa (.clientes/.cliente) queda para la futura
   página clientes.php; en el Home los logos se muestran de a 6 con
   flechas y puntos. El conteo por vista lo maneja datos-grillas.js. */
.tira{position:relative;padding:0 68px}
.tira__viewport{overflow:hidden}
.tira__track{display:flex;will-change:transform;transition:transform .55s cubic-bezier(.4,.72,.3,1)}
.tira__pagina{flex:0 0 100%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:40px;align-items:center;min-height:112px}
.tira__logo{display:flex;align-items:center;justify-content:center;padding:8px}
.tira__logo img{max-height:48px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.8;transition:filter .22s,opacity .22s,transform .22s}
.tira__logo:hover img{filter:none;opacity:1;transform:scale(1.04)}
.tira__flecha{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:2px;border:1px solid var(--filo);background:var(--blanco);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tinta);transition:border-color .18s,color .18s}
.tira__flecha:hover{border-color:var(--marca-intermedia);color:var(--marca-intermedia)}
.tira__flecha--prev{left:0}
.tira__flecha--next{right:0}
.tira__flecha svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tira__puntos{display:flex;gap:20px;justify-content:center;margin-top:28px}
/* El punto es sobre todo un indicador; se puede pulsar, pero la navegación
   principal son las flechas. El ::before le da un área táctil de 24x24 px
   (WCAG 2.5.8) sin agrandar el punto visible; el gap de 20px evita que las
   áreas de puntos contiguos se solapen. */
.tira__punto{position:relative;width:7px;height:7px;border-radius:50%;background:var(--filo);border:none;padding:0;cursor:pointer;transition:background .18s,transform .18s}
.tira__punto::before{content:"";position:absolute;top:50%;left:50%;width:24px;height:24px;transform:translate(-50%,-50%)}
.tira__punto:hover{background:rgba(12,31,43,.34)}
.tira__punto[aria-current="true"]{background:var(--marca-intermedia);transform:scale(1.25)}
@media(prefers-reduced-motion:reduce){.tira__track{transition:none}}

/* ---------- CASOS DE ÉXITO (Home) ----------
   Tarjeta de contenido con imagen. La imagen es una ilustración animada
   (.caso__foto--ilu, ver más abajo) o, si el caso no tiene, el placeholder
   .caso__foto--marca con el isotipo. No hay variante con foto. */
.casos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.caso{position:relative;display:flex;flex-direction:column;border:1px solid var(--filo);background:var(--blanco)}
.caso__foto{position:relative;aspect-ratio:18/9;overflow:hidden;background:var(--marca-osc)}
.caso__foto--marca{
  background-color:var(--marca-osc);
  background-image:
    linear-gradient(to top right, rgba(7,28,59,.96) 0%, rgba(7,28,59,.35) 55%, rgba(7,28,59,0) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='86'%3E%3Cpath d='M0 80 L34 0 L58 0 L24 80 Z' fill='%237698CF' fill-opacity='.5'/%3E%3C/svg%3E");
  background-size:cover, 60px 86px;
  background-repeat:no-repeat, repeat;
  background-position:center, top left;
}
/* Ilustración animada (includes/casos-ilu/*.php): SVG en línea de 720x360 (2:1, igual que .caso__foto), en el lenguaje
   del Hero (trazo que se dibuja, marco de esquinas, marcadores) sobre el azul de marca con un resplandor celeste.
   Estado base = estado final (el que ve quien pide menos movimiento); el ciclo de 10 s va solo con movimiento permitido. */
.caso__foto--ilu{background:radial-gradient(ellipse 31% 62% at 50% 50%,rgba(79,155,216,.26),transparent),var(--marca-osc)}
.caso__foto--ilu svg{display:block;width:100%;height:100%}
.ilu-t{fill:none;stroke:var(--marca-clara);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.ilu-w{stroke:#fff}
.ilu-vivo{stroke-width:var(--w,1.6px)}
.ilu-o4{opacity:.4}
.ilu-o55{opacity:.55}
.ilu-o7{opacity:.7}
.ilu-br{fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.ilu-punto{fill:var(--marca-clara)}
.ilu-punto--w{fill:#fff}
.ilu-par circle{fill:none;stroke:#fff;stroke-width:1.2;opacity:.82}
.ilu-scan{opacity:0}
.ilu-fondo{fill:var(--marca-osc);opacity:.94}
.ilu-halo{fill:var(--marca-clara);fill-opacity:.16}
/* lector de huellas (huella-votacion.php): crestas que se engrosan, ventana que se enciende, barrido ascendente que revela la huella y LED */
.ilu-cresta{stroke-width:var(--w,1.4px)}
.ilu-luz{fill:var(--marca-clara);fill-opacity:.12;stroke:none}
.ilu-led{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round}
.ilu-scan-sube,.ilu-scan-lado{opacity:0}
.ilu-firma{stroke-width:var(--w,2.4px)}
.ilu-onda{stroke-dashoffset:1}
.ilu-gl{stroke-width:var(--w,1.6px)}
@media(prefers-reduced-motion:no-preference){
  .ilu-cresta{animation:iluCresta 10s ease-in-out infinite}
  .ilu-luz{animation:iluLuz 10s ease-in-out infinite}
  .ilu-led{animation:iluLed 10s ease-in-out infinite}
  .ilu-rev{animation:iluRevela 10s ease-in-out infinite}
  .ilu-scan-sube{animation:iluSube 10s linear infinite}
  .ilu-scan-lado{animation:iluLado 10s linear infinite}
  .ilu-firma{animation:iluFirma 10s ease-in-out infinite}
  .ilu-gl-1{animation:iluGl1 10s ease-in-out infinite}
  .ilu-gl-2{animation:iluGl2 10s ease-in-out infinite}
  .ilu-gl-3{animation:iluGl3 10s ease-in-out infinite}
  .ilu-gl-4{animation:iluGl4 10s ease-in-out infinite}
  .ilu-onda-1{animation:iluOnda1 10s ease-in-out infinite}
  .ilu-onda-2{animation:iluOnda2 10s ease-in-out infinite}
  .ilu-onda-3{animation:iluOnda3 10s ease-in-out infinite}
  .ilu-malla-t{animation:iluMallaT 10s ease-in-out infinite}
  .ilu-puntos-t{animation:iluPuntosT 10s ease-in-out infinite}
  .ilu-vivo{animation:iluVivo 10s ease-in-out infinite}
  .ilu-malla{animation:iluMalla 10s ease-in-out infinite}
  .ilu-puntos{animation:iluPuntos 10s ease-in-out infinite}
  .ilu-scan{animation:iluScan 10s linear infinite}
  .ilu-par{animation:iluPar 10s ease-in-out infinite}
  .ilu-anillo{animation:iluAnillo 10s ease-in-out infinite}
  .ilu-halo{animation:iluHalo 10s ease-in-out infinite}
  .ilu-fondo{animation:iluFondo 10s ease-in-out infinite}
  .ilu-check{animation:iluCheck 10s ease-in-out infinite}
  .ilu-br{animation:iluMarco 10s ease-in-out infinite}
}
/* El rostro entra con línea fina (0-28%) y se engrosa al analizarlo (32-48%), cuando aparece la malla; todo se retira entre 92 y 97% */
@keyframes iluVivo{0%,6%{stroke-dashoffset:1;stroke-width:calc(var(--w,1.6px)*.45)}28%,32%{stroke-dashoffset:0;stroke-width:calc(var(--w,1.6px)*.45)}48%,92%{stroke-dashoffset:0;stroke-width:var(--w,1.6px)}97%,100%{stroke-dashoffset:1;stroke-width:var(--w,1.6px)}}
@keyframes iluCresta{0%,28%{stroke-width:calc(var(--w,1.4px)*.45)}48%,100%{stroke-width:var(--w,1.4px)}}
@keyframes iluLuz{0%,24%{fill-opacity:0}32%,92%{fill-opacity:.12}96%,100%{fill-opacity:0}}
@keyframes iluLed{0%,66%{stroke:var(--marca-clara);opacity:.4}76%,92%{stroke:#fff;opacity:1}96%,100%{stroke:var(--marca-clara);opacity:.4}}
@keyframes iluRevela{0%,22%{transform:translateY(152px)}44%,92%{transform:translateY(0)}97%,100%{transform:translateY(152px)}}
/* captura en secuencia (kiosco): cada dibujo entra con línea fina en su turno (6-32%) y todos se engrosan a la vez (32-48%) */
@keyframes iluGl1{0%,6%{stroke-dashoffset:1;stroke-width:calc(var(--w,1.6px)*.45)}14%,32%{stroke-dashoffset:0;stroke-width:calc(var(--w,1.6px)*.45)}48%,92%{stroke-dashoffset:0;stroke-width:var(--w,1.6px)}97%,100%{stroke-dashoffset:1;stroke-width:var(--w,1.6px)}}
@keyframes iluGl2{0%,12%{stroke-dashoffset:1;stroke-width:calc(var(--w,1.6px)*.45)}20%,32%{stroke-dashoffset:0;stroke-width:calc(var(--w,1.6px)*.45)}48%,92%{stroke-dashoffset:0;stroke-width:var(--w,1.6px)}97%,100%{stroke-dashoffset:1;stroke-width:var(--w,1.6px)}}
@keyframes iluGl3{0%,18%{stroke-dashoffset:1;stroke-width:calc(var(--w,1.6px)*.45)}26%,32%{stroke-dashoffset:0;stroke-width:calc(var(--w,1.6px)*.45)}48%,92%{stroke-dashoffset:0;stroke-width:var(--w,1.6px)}97%,100%{stroke-dashoffset:1;stroke-width:var(--w,1.6px)}}
@keyframes iluGl4{0%,24%{stroke-dashoffset:1;stroke-width:calc(var(--w,1.6px)*.45)}32%{stroke-dashoffset:0;stroke-width:calc(var(--w,1.6px)*.45)}48%,92%{stroke-dashoffset:0;stroke-width:var(--w,1.6px)}97%,100%{stroke-dashoffset:1;stroke-width:var(--w,1.6px)}}
@keyframes iluOnda1{0%,26%{stroke-dashoffset:1;opacity:1}32%,36%{stroke-dashoffset:0;opacity:1}40%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes iluOnda2{0%,30%{stroke-dashoffset:1;opacity:1}36%,40%{stroke-dashoffset:0;opacity:1}44%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes iluOnda3{0%,34%{stroke-dashoffset:1;opacity:1}40%,44%{stroke-dashoffset:0;opacity:1}48%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes iluFirma{0%,26%{stroke-dashoffset:1;stroke-width:calc(var(--w,2.4px)*.45)}46%,50%{stroke-dashoffset:0;stroke-width:calc(var(--w,2.4px)*.45)}62%,92%{stroke-dashoffset:0;stroke-width:var(--w,2.4px)}97%,100%{stroke-dashoffset:1;stroke-width:var(--w,2.4px)}}
@keyframes iluMallaT{0%,48%{stroke-dashoffset:1}60%,92%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1}}
@keyframes iluPuntosT{0%,54%{opacity:0}60%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes iluLado{0%,26%{opacity:0;transform:translateX(0)}28%{opacity:.8;transform:translateX(0)}46%{opacity:.8;transform:translateX(300px)}48%,100%{opacity:0;transform:translateX(300px)}}
@keyframes iluSube{0%,22%{opacity:0;transform:translateY(0)}24%{opacity:.8;transform:translateY(0)}44%{opacity:.8;transform:translateY(-152px)}46%,100%{opacity:0;transform:translateY(-152px)}}
@keyframes iluMalla{0%,28%{stroke-dashoffset:1}46%,92%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1}}
@keyframes iluAnillo{0%,66%{stroke-dashoffset:1}74%,92%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1}}
@keyframes iluCheck{0%,72%{stroke-dashoffset:1}80%,92%{stroke-dashoffset:0}97%,100%{stroke-dashoffset:1}}
@keyframes iluPuntos{0%,40%{opacity:0}46%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes iluPar{0%,56%{opacity:0}62%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes iluScan{0%,28%{opacity:0;transform:translateY(0)}30%{opacity:.8;transform:translateY(0)}48%{opacity:.8;transform:translateY(236px)}50%,100%{opacity:0;transform:translateY(236px)}}
@keyframes iluHalo{0%,72%{fill-opacity:0}80%,92%{fill-opacity:.16}96%,100%{fill-opacity:0}}
@keyframes iluFondo{0%,66%{opacity:0}72%,92%{opacity:.94}96%,100%{opacity:0}}
@keyframes iluMarco{0%,70%{stroke:var(--marca-clara);opacity:.32}76%,92%{stroke:#fff;opacity:.9}96%,100%{stroke:var(--marca-clara);opacity:.32}}
.caso__body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
/* categoría: etiqueta liviana sobre la imagen (esquina superior izquierda) */
.caso__cat{position:absolute;top:12px;left:12px;z-index:1;margin:0;padding:4px 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;
  color:var(--blanco);background:rgba(7,28,59,.72);border:1px solid rgba(255,255,255,.3)}
/* cliente: solo, arriba del título, con su logo bien pequeño antes del nombre. El logo es un PNG exportado
   para esto (assets/img/casos/, recortado al logo, sin margen transparente), así que no necesita márgenes negativos.
   min-height = alto del logo: así el título arranca a la misma altura con o sin logo */
.caso__cliente{display:flex;align-items:center;gap:8px;min-height:28px;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acero)}
.caso__cliente-logo{display:block;flex:none;height:28px;width:auto}
.caso__title{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.35;color:var(--tinta);margin:0;text-wrap:balance;transition:color .2s}
/* título con enlace externo ('enlace' del caso): mismo aspecto, flecha ↗ y hover como el de los enlaces */
.caso__title a{color:inherit}
.caso__title a::after{content:"\2197";margin-left:.35em;font-size:.8em;color:var(--marca-intermedia)}
.caso__title a:hover{color:var(--marca-intermedia);text-decoration:underline;text-underline-offset:4px}
.caso__desc{margin:0;font-size:15px;line-height:1.6;color:var(--acero)}
.caso__more{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--marca-intermedia)}
/* Pie: botón "Consultar" (y "Conocer más" en las tarjetas con url) */
.caso__pie{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:12px}
.caso__pie .caso__more{margin-top:0;padding-top:0}
.caso__pie a.caso__more:hover{text-decoration:underline;text-underline-offset:4px}
/* botón "Consultar" (mailto) del pie: el .btn--intermedia, más compacto */
.caso__acciones{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px}
.btn--caso{padding:11px 20px}
a.caso:hover .caso__title{color:var(--marca-intermedia);text-decoration:underline;text-underline-offset:4px}

/* ---------- FOOTER ---------- */
.ft{background:var(--marca-osc);color:rgba(255,255,255,.74);padding:60px 0 0}
.ft__marca{margin-bottom:56px}
.ft__logo{height:34px;width:auto;display:block}
.ft__top{display:grid;grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);gap:80px;padding-bottom:52px;border-bottom:1px solid var(--filo-oscuro)}
.ft h3{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--marca-clara);margin:0 0 16px;font-weight:500}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ft__nav-cols{display:flex;flex-wrap:wrap;gap:14px 44px}
.ft__nav-cols ul{flex:none}
.ft ul a{font-size:14.5px}
.ft a:not(.btn):hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ft__social:hover span{text-decoration:underline;text-underline-offset:3px}
.ft__contacto{font-style:normal}
.ft__dato{font-size:14.5px;margin:0 0 20px;line-height:1.6}
.ft__dato span{display:block;color:var(--marca-clara);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:5px}
.ft__social{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;margin-top:4px}
.ft__social svg{width:17px;height:17px;flex:none}
.ft__cert img{width:150px;max-width:100%;height:auto;display:block}
.ft__legal{padding:28px 0}
.ft__legal p{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1040px){
  .hero__lead{max-width:none}
  .prod{grid-template-columns:repeat(2,1fr)}
  .clientes{grid-template-columns:repeat(4,1fr)}
  .casos{grid-template-columns:repeat(2,1fr)}
  .ft__top{grid-template-columns:1fr 1fr;gap:48px}
}
@media(max-width:860px){
  .burger{display:flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:12px 12px 24px;border-bottom:1px solid var(--filo);
    box-shadow:0 20px 40px -24px rgba(12,31,43,.4);display:none;
  }
  .nav[data-open="true"]{display:flex}
  /* El padding horizontal se reparte: poco en .nav (el recuadro del ítem activo
     queda cerca de los laterales) y más en .nav__link (aire entre borde y texto).
     La suma deja el texto ~alineado con el logo del header. */
  .nav__link{padding:14px 12px;font-size:13px}
  .nav__toggle{width:100%;text-align:left}
  .nav__caret{margin-left:auto}
  /* Submenú móvil = acordeón: colapsado con display:none (NO reserva espacio);
     al activar el botón se muestra debajo. El opacity/visibility de escritorio
     se neutraliza acá para que al mostrarse el contenido sea visible. */
  .drop{position:static;transform:none;min-width:0;background:transparent;border:none;box-shadow:none;padding:0 0 8px 16px;opacity:1;visibility:visible;display:none}
  .nav__toggle[aria-expanded="true"] + .drop{display:block}
  .drop a{color:var(--acero);border-left:1px solid var(--filo);padding:9px 14px}
  .drop a:hover{background:transparent;color:var(--marca-intermedia);border-left-color:var(--marca-intermedia)}
  .hero .wrap{grid-template-columns:1fr;padding-top:44px;padding-bottom:40px;gap:44px}
  .hero__titulo{line-height:1.15;font-size:clamp(3rem,6vw,4.6rem)}
  .hero__glow{inset:-50%}
  .hero__art{order:-1;max-width:240px;margin:0 auto}
  .bio-pasos{display:none}
  .hero__cta .btn{width:100%;text-align:center;font-size:14px}
  .sec{padding:68px 0}
  .sec__head{flex-direction:column;align-items:flex-start;gap:6px}
  .hoy{grid-template-columns:1fr;gap:32px;max-width:none;margin:0}
  .hoy__intro{align-items:flex-start;text-align:left}
}
@media(max-width:640px){
  .wrap{padding:0 24px}
  .prod{grid-template-columns:1fr}
  .clientes{grid-template-columns:repeat(3,1fr)}
  .plogos{grid-template-columns:repeat(2,1fr)}
  .hoy__cifras{column-gap:24px;row-gap:30px}
  #productos::before{height:60px}
  #productos > .wrap{padding-top:30px}
  .ft__top{grid-template-columns:1fr;gap:34px}
  .ft__nav-cols{flex-direction:column;gap:9px}
  .tira{padding:0 40px}
  .tira__pagina{gap:24px 16px;min-height:0}
  .tira__logo{padding:6px 4px}
  .tira__flecha{width:40px;height:40px}
  .tira__flecha--prev{left:-8px}
  .tira__flecha--next{right:-8px}

  /* casos de éxito: carrusel de scroll horizontal, una tarjeta casi
     al ancho con un pedazo de la siguiente a la vista como señal */
  .casos{
    display:flex;grid-template-columns:none;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:-24px;padding-inline:24px;
    padding-block:10px;margin-block:-10px;
  }
  .casos::-webkit-scrollbar{display:none}
  .caso{flex:0 0 87vw;scroll-snap-align:start}
  /* en /casos.php el listado es una grilla de una columna, no carrusel */
  .casos.casos--grilla{display:grid;grid-template-columns:1fr;gap:20px;overflow:visible;scroll-snap-type:none;margin:0;padding:0}
  .casos--grilla .caso{flex:none}

  /* partners: en mobile, snap por tarjeta. El scroll-padding fijo mantiene
     la primera tarjeta alineada con el contenido (padding de .wrap = 24px). */
  .partners{scroll-snap-type:x mandatory;scroll-padding-inline:24px}
  .partner{flex-basis:min(78vw,300px);scroll-snap-align:start}
}

/* ============================================================
   COMPONENTES DE PÁGINAS INTERNAS
   Agregado sobre el sistema de v6_1 para Empresa y Productos.
   Reutiliza las mismas variables y el mismo lenguaje visual del Home.
   ============================================================ */

/* ---------- CABECERA DE PÁGINA INTERNA ---------- */
/* Imagen de fondo opcional por página: definir --ph-img en el <section>
   (ej. style="--ph-img:url(/assets/img/pagehead/pageheadEmpr.jpg)").
   El velo navy es un degradado (100°): tapa el texto a la izquierda
   y se abre hacia la derecha para dejar ver la foto.
   --ph-veil = opacidad del navy sobre el texto (subir = menos foto);
   los otros dos stops bajan 24% y 54% respecto de ese valor. */
.pagehead{
  --ph-veil:92%;
  background:var(--marca-osc);
  background-image:
    linear-gradient(100deg,
      color-mix(in srgb, var(--marca-osc) var(--ph-veil), transparent) 0%,
      color-mix(in srgb, var(--marca-osc) calc(var(--ph-veil) - 24%), transparent) 42%,
      color-mix(in srgb, var(--marca-osc) calc(var(--ph-veil) - 54%), transparent) 100%),
    var(--ph-img, none);
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  color:var(--blanco);
  min-height:360px;
  padding:60px 0;
  display:grid;
  align-content:center;
}
.pagehead > .wrap{width:100%}   /* ocupa todo el ancho dentro del grid; su propio max-width lo centra */
.pagehead__eyebrow{color:var(--marca-clara);margin:0 0 14px}
.pagehead h1{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.05;font-size:clamp(2.2rem,4.6vw,3.9rem);max-width:20ch;text-wrap:balance;margin:0 0 14px}
.pagehead__lead{font-size:1.05rem;line-height:1.6;color:rgba(255,255,255,.78);max-width:54ch;margin:0}

/* ---------- BLOQUE DE TEXTO ---------- */
.texto{max-width:74ch}
.texto p{margin:0 0 18px;font-size:15.5px;line-height:1.7;color:var(--tinta)}
.texto h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;font-size:1.2rem;line-height:1.3;color:var(--tinta);margin:34px 0 10px}
.texto h3:first-child{margin-top:0}
.texto ul{margin:0 0 18px;padding:0;list-style:none}
.texto li{position:relative;padding-left:22px;font-size:15.5px;line-height:1.7;color:var(--tinta);margin:0 0 8px}
.texto li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;background:var(--marca-clara)}
.texto p:last-child,.texto ul:last-child,.texto li:last-child{margin-bottom:0}
/* Enlaces dentro de un párrafo/lista: color de marca + subrayado para que
   contrasten con el texto de al lado. */
.texto a{color:var(--marca-intermedia);text-decoration:underline;text-underline-offset:3px}
.texto a:hover{color:var(--marca-osc)}

/* ---------- TARJETAS-ANCLA (introducción de una página de producto) ----------
   Grilla de celdas contiguas con línea fina (como .prod, con --filo-solido);
   cada tarjeta enlaza a una sección de la misma página. Lleva título y
   descripción; el ícono (.prod__icon) es opcional. Tamaños de texto como las
   tarjetas de Partners de la Home.
   .intro-anclas = presentación a la izquierda (1/3) + .anclas a la derecha (2/3).
   .anclas = 3 columnas; .anclas--5 = 5 en una sola fila; .anclas--2 = 2 columnas. En tablet pasan a 2
   columnas (la última, si queda sola, ocupa el ancho completo) y en móvil a 1.
   .tarjetas / .tarjeta = el mismo aspecto sin enlace ni hover, para agrupar
   información (3 columnas, 1 en móvil). Título en .tarjeta__titulo; el cuerpo va
   dentro de un .texto para heredar párrafos y viñetas.
   .tarjetas--1 = una sola tarjeta suelta (ej. una cifra destacada con .cifra).
   .texto-dato = texto a la izquierda y un dato destacado a la derecha; apila
   en móvil. En su variante --ficha la primera columna es una ficha de producto. */
.intro-anclas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:start}
.anclas,.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--filo-solido);border:1px solid var(--filo-solido)}
.anclas--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.anclas--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tarjetas--1{grid-template-columns:1fr}
.ancla,.tarjeta{background:var(--blanco);padding:24px 22px;display:flex;flex-direction:column;gap:10px;transition:background .2s}
.ancla:hover{background:var(--papel)}
.ancla__titulo,.tarjeta__titulo{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.35;margin:0;color:var(--tinta);text-wrap:balance;transition:color .2s}
.ancla:hover .ancla__titulo{color:var(--marca-intermedia);text-decoration:underline;text-underline-offset:4px}
.ancla:hover .prod__icon{color:var(--marca-intermedia)}
.ancla__desc{margin:0;font-size:15px;line-height:1.6;color:var(--acero)}
@media(max-width:1040px){
  .intro-anclas{grid-template-columns:1fr;gap:32px}
  .anclas--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anclas--5 .ancla:last-child:nth-child(odd){grid-column:1/-1}
}
/* texto + dato destacado */
.texto-dato{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:start;margin-bottom:34px}
.texto-dato .tarjetas{margin-top:6px}   /* alinea el borde superior con la primera línea del texto */
/* variante con ficha: a la izquierda una .ficha (imagen, nombre, descripción y lista) en una
   columna más angosta, y a la derecha una tarjeta de dato. Para un solo producto desarrollado. */
.texto-dato--ficha{grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-bottom:0}
.texto + .texto-dato--ficha{margin-top:28px}   /* separa la introducción de la sección */
.texto-dato .ficha__img{margin-top:6px}   /* alinea el recuadro con la primera línea del texto de al lado */
@media(max-width:1040px){.texto-dato--ficha{grid-template-columns:1fr;gap:28px}.texto-dato--ficha .ficha{max-width:460px}.texto-dato--ficha .ficha__img,.texto-dato--ficha .texto-dato__lado{margin-top:0}.texto-dato--ficha .texto-dato__lado{max-width:none}}
@media(max-width:640px){.texto-dato{grid-template-columns:1fr;gap:24px}}
@media(max-width:640px){
  .anclas,.anclas--5,.anclas--2,.tarjetas{grid-template-columns:1fr}
  .anclas--5 .ancla:last-child:nth-child(odd){grid-column:auto}
}
/* ---------- FICHAS DE PRODUCTO (hardware) ----------
   Tres equipos en fila: imagen arriba (recuadro horizontal 3:2), título y descripción
   abajo, sin borde de tarjeta. Las imágenes son PNG con fondo transparente: se ajustan
   al alto del recuadro en proporción (object-fit:contain) y los laterales quedan vacíos
   con el color de fondo del recuadro. El cuerpo va dentro de un .texto para heredar el
   estilo de párrafo. 3 columnas, 2 en tablet (≤1040px) y 1 en móvil (≤640px). */
.fichas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:28px}
.fichas + .texto,.texto-dato + .texto{margin-top:28px}
.indice__bloque > .texto + .tarjetas{margin-top:28px}   /* solo si las tarjetas van sueltas en el bloque; dentro de .texto-dato conservan su alineación */
.ficha{display:flex;flex-direction:column;gap:14px;min-width:0}
.ficha__img{aspect-ratio:3/2;background:var(--papel);border:1px solid var(--filo-solido);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ficha__img img{display:block;width:100%;height:100%;object-fit:contain}
/* video de demostración (columna del dato en .texto-dato--ficha): marco 16:9 con el botón de pausa
   superpuesto (lo agrega assets/js/video-control.js sobre un <video data-pausable>) y un pie de foto */
.texto-dato__lado{display:flex;flex-direction:column;gap:32px;min-width:0;max-width:420px;margin-top:6px}   /* más angosta que su columna; el 6px alinea con el recuadro de la ficha */
.texto-dato__lado .tarjetas{margin-top:0}
.video-demo{margin:0}
.video-marco{position:relative;aspect-ratio:16/9;background:var(--marca-osc);overflow:hidden}
.video-marco video{display:block;width:100%;height:100%;object-fit:cover}
.video-demo figcaption{margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--acero)}
.video-control{position:absolute;right:10px;bottom:10px;width:36px;height:36px;padding:0;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:rgba(7,28,59,.6);color:var(--blanco);cursor:pointer;opacity:.85;transition:background .15s,opacity .15s}
.video-control svg{width:14px;height:14px;fill:currentColor}
.video-control:hover{background:var(--marca-osc);opacity:1}
.video-control:focus-visible{opacity:1;outline:2px solid var(--blanco);outline-offset:0;box-shadow:0 0 0 4px var(--marca-osc)}
@media(pointer:coarse){.video-control{width:44px;height:44px}}
.ficha__titulo{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.35;margin:6px 0 0;color:var(--tinta);text-wrap:balance}
@media(max-width:1040px){.fichas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.fichas{grid-template-columns:1fr}}
.texto--sep{margin-bottom:40px}   /* prosa de intro antes de una grilla */

/* dos bloques de título + texto lado a lado (mismo formato que una sección
   de texto, repetido en 2 columnas iguales). */
.dos-columnas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:104px}

/* ¿Cómo nos preparamos? — la norma ISO como titular, en una fila con
   las marcas de certificación y el texto. */
.prepara{display:grid;grid-template-columns:minmax(0,1fr) max-content 190px;gap:56px;align-items:start}
.prepara__norma{display:flex;flex-direction:column;gap:16px}
.prepara__cod{display:flex;flex-direction:column;font-family:var(--display);font-weight:600;font-size:clamp(2.4rem,4.6vw,3.7rem);line-height:1;letter-spacing:-.02em;color:var(--marca-osc)}
.prepara__cod em{font-style:normal;color:var(--acero)}
.prepara__norma p{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--acero)}
.prepara__sello{width:190px;max-width:100%;height:auto;display:block}

/* ---------- ESTADÍSTICAS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--filo);border:1px solid var(--filo)}
.stat{background:var(--blanco);padding:28px 24px;display:flex;flex-direction:column;gap:6px}
.stat b{font-family:var(--display);font-size:2.1rem;font-weight:600;color:var(--marca-intermedia)}
.stat span{font-size:13px;color:var(--acero)}

/* ---------- VALORES / CARACTERÍSTICAS (grilla de 3) ---------- */
.valores{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filo);border:1px solid var(--filo)}
.valor{background:var(--blanco);padding:30px 26px;display:flex;flex-direction:column;gap:10px}
.valor h3{font-family:var(--display);font-size:1.1rem;font-weight:600;margin:0}
.valor p{margin:0;font-size:14.5px;line-height:1.6;color:var(--acero)}

/* Nuestros valores: sin cajas, ícono de trazo fino en chip cuadrado;
   los 3 chips recorren la escala de azules (--v por tarjeta). */
.valores-b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px}
.valor-b{display:flex;flex-direction:column;gap:12px}
.valor-b__ico{width:64px;height:64px;margin-bottom:12px;border-radius:2px;background:var(--v);color:var(--v-ico,#fff);display:flex;align-items:center;justify-content:center}
.valor-b__ico svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.valor-b h3{font-family:var(--display);font-weight:600;font-size:1.375rem;line-height:1.3;margin:0;color:var(--tinta)}
.valor-b p{margin:0;font-size:15.5px;line-height:1.7;color:var(--acero)}

/* ---------- CTA DE CIERRE DE PÁGINA INTERNA ---------- */
.cta-final{background:var(--marca-intermedia);color:var(--blanco);padding:52px 0;text-align:center}
.cta-final h2{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 12px}
.cta-final p{margin:0 0 24px;color:rgba(255,255,255,.82);font-size:15px}

/* ---------- 404 ---------- */
.error404{padding:90px 0 120px}
.error404 .campo{margin:0 0 14px}
.error404 h1{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.1;font-size:clamp(2.2rem,4.6vw,3.4rem);margin:0 0 16px;text-wrap:balance}
.error404__lead{font-size:1.05rem;line-height:1.6;color:var(--acero);max-width:68ch;margin:0 0 30px}
@media(max-width:640px){.error404{padding:72px 0 90px}}

/* ---------- ÍNDICE LATERAL + BLOQUES DE TEXTO ----------
   Página con varios bloques y un menú lateral pegajoso para saltar
   entre ellos. El resaltado del bloque visible lo hace
   assets/js/indice-lateral.js (IntersectionObserver). */
.indice{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:start}
.indice__nav{position:sticky;top:98px;display:flex;flex-direction:column;gap:2px}
.indice__nav .campo{margin:0 0 14px}
/* .indice__links envuelve los <a> para poder darles su propia tira de
   scroll en móvil (ver media query); en escritorio es invisible para el
   layout (display:contents), los <a> siguen siendo ítems directos del
   flex de .indice__nav como antes. */
.indice__links{display:contents}
.indice__link{font-family:var(--display);font-size:14px;font-weight:500;line-height:1.4;color:var(--acero);padding:12px 12px 12px 14px;border-left:2px solid var(--filo);text-wrap:balance;transition:color .15s,border-color .15s,background .15s}
.indice__link:hover{color:var(--marca-intermedia);background:var(--papel);border-left-color:var(--marca-clara)}
.indice__link--on{color:var(--marca-osc);border-left-color:var(--marca-intermedia);font-weight:600}
.indice__body{display:flex;flex-direction:column;gap:72px;min-width:0}
@media(max-width:1040px){.indice__body{gap:52px}}
/* Estructura del bloque, con o sin logo:
   <article class="indice__bloque"> [<img class="indice__bloque-logo">] <h2> <div class="texto"> </article>
   Sin logo, el bloque fluye a ancho completo. Con logo, pasa a dos columnas:
   el logo a la izquierda y el h2 + el texto a la derecha, alineados en vertical.
   El desfase para el header fijo ahora lo da html{scroll-padding-top}. */
.indice__bloque h2{font-family:var(--display);font-weight:600;letter-spacing:-.015em;font-size:clamp(1.55rem,2.6vw,2rem);margin:0 0 16px;color:var(--tinta)}
.indice__bloque h2 span{display:block;font-size:.66em;font-weight:400;letter-spacing:0;color:var(--acero);margin-top:6px}
.indice__bloque:has(.indice__bloque-logo){display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:28px;align-items:start}
.indice__bloque:has(.indice__bloque-logo) > .indice__bloque-logo{grid-column:1;grid-row:1;max-width:100%;max-height:40px;width:auto;height:auto;justify-self:start}
.indice__bloque:has(.indice__bloque-logo) > :not(.indice__bloque-logo){grid-column:2;min-width:0}
/* enlace a un documento (folleto PDF, etc.) dentro de un bloque de texto.
   Misma tipografía que los párrafos (--body 15.5px), con color de enlace. */
.enlace-doc{display:inline-flex;align-items:center;gap:4px;margin-top:20px;font-size:15.5px;color:var(--marca-intermedia)}
.enlace-doc:hover{text-decoration:underline;text-underline-offset:4px}
.enlace-doc svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* enlace externo dentro de un párrafo (primera mención de un partner, etc.) */
.enlace-ext{color:var(--marca-intermedia);text-decoration:underline;text-underline-offset:3px}
.enlace-ext:hover{color:var(--marca-osc)}
.enlace-ext__ico{width:.8em;height:.8em;margin-left:.16em;vertical-align:-.06em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:860px){
  .dos-columnas{grid-template-columns:1fr;gap:44px}
  .indice{grid-template-columns:1fr;gap:28px}
  /* Índice móvil = "En esta página" en su propia línea arriba, y debajo una
     tira de pestañas con scroll horizontal en vez de que los links se
     apilen envueltos. Al separar el rótulo de la tira (.indice__links deja
     de ser display:contents) las pestañas ganan todo el ancho disponible.
     El resaltado de la pestaña activa se mantiene (lo sigue armando
     indice-lateral.js) pero es secundario: en móvil el uso esperado es
     scrollear y explorar, no seguir el indicador.
     La tira sangra a los bordes del viewport (mismo truco que .partners):
     margin-inline negativo + padding-inline igual y positivo se cancelan
     para la primera pestaña (queda alineada con el resto del contenido),
     pero la última pestaña ya no se corta en el borde del .wrap sino que
     puede asomar hasta el borde real de la pantalla — más señal de que hay
     más para scrollear. Al usar vw en vez de un valor fijo, funciona igual
     sin importar si el padding del .wrap en ese ancho es 24px o 28px. */
  .indice__nav{position:static;gap:12px;min-width:0}
  .indice__nav .campo{margin:0}
  .indice__links{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);border-bottom:1px solid var(--filo);padding-bottom:18px}
  .indice__links::-webkit-scrollbar{display:none}
  .indice__link{flex:0 0 auto;white-space:nowrap;border-left:none;border-top:2px solid var(--filo);padding:8px 12px}
  .indice__link--on{border-left:none;border-top-color:var(--marca-intermedia)}
  .indice__bloque:has(.indice__bloque-logo){grid-template-columns:1fr;row-gap:14px}
  .indice__bloque:has(.indice__bloque-logo) > .indice__bloque-logo,
  .indice__bloque:has(.indice__bloque-logo) > :not(.indice__bloque-logo){grid-column:1;grid-row:auto}
}

@media(max-width:1040px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .valores{grid-template-columns:1fr}
}
@media(max-width:860px){
  .valores-b{grid-template-columns:1fr;gap:44px}
}
@media(max-width:1040px){
  .prepara{grid-template-columns:1fr;gap:36px}
  .prepara__sello{width:220px}
}
@media(max-width:640px){
  .stats{grid-template-columns:1fr}
}

/* ============================================================
   REVELADO SUAVE AL SCROLL
   Aparición sutil de bloques al entrar en pantalla (fade + 12px).
   Plumbing centralizado: el <script> inline de head-meta.php pone
   <html class="con-aparicion"> SOLO si el navegador puede animar y no
   se pidió prefers-reduced-motion; assets/js/aparicion.js elige los
   bloques (les agrega .reveal + --i) y los revela una sola vez.
   Sin JS / sin IntersectionObserver / reduced-motion / print / con el
   failsafe disparado => todo visible, cero animación.
   Opt-out: poner .no-reveal en un contenedor.
   Solo cambian opacity y transform: no hay salto de layout. */
.con-aparicion .reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s cubic-bezier(.4,.72,.3,1),
             transform .6s cubic-bezier(.4,.72,.3,1);
  transition-delay:calc(min(var(--i, 0), 3) * 70ms);
}
.con-aparicion .reveal.is-visible{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion: reduce){
  .con-aparicion .reveal{opacity:1;transform:none;transition:none;}
}
@media print{
  .con-aparicion .reveal{opacity:1 !important;transform:none !important;}
}