/* ===== INSITOR — DESIGN SYSTEM ===== */
:root{
  --ink:#0B1420;
  --ink-2:#111C29;
  --ink-3:#0E1826;
  --paper:#EDEAE2;
  --slate:#8C9BAA;
  --amber:#E8A33D;
  --cyan:#57D6CB;
  --line: rgba(237,234,226,0.12);
  --line-strong: rgba(237,234,226,0.24);
  --maxw: 1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* compensa la nav sticky al saltar a un ancla (#auditoria, #faq...) */
:target{scroll-margin-top:96px;}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* Recorta el desborde horizontal (ticker, beam-field). CLAVE: 'clip' en vez
     de 'hidden' — 'hidden' convierte al body en contenedor de scroll y en iOS
     Safari eso rompe el position:sticky del header (deja de pegarse al top y
     el contenido se ve pasar por encima). 'clip' recorta igual pero no crea
     contenedor de scroll. 'hidden' queda de fallback para navegadores viejos. */
  overflow-x:hidden;
  overflow-x:clip;
}
h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:600;
  line-height:1.08;
  margin:0;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
/* Grano de película: rompe la planitud digital sin coste de red (SVG inline).
   pointer-events:none — puramente decorativo, no intercepta nada. */
body::after{
  content:''; position:fixed; inset:0; z-index:2000; pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mono{font-family:'IBM Plex Mono',monospace;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
a{color:inherit;}
::selection{background:var(--amber); color:var(--ink);}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}
img{max-width:100%;display:block;}

/* ===== SKIP LINK ===== */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--amber); color:#1A1204; padding:12px 20px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px;
  text-decoration:none; border-radius:0 0 3px 0;
}
.skip-link:focus{left:0;}

/* ===== NAV ===== */
/* main y footer crean su propio contexto de apilamiento con z-index bajo.
   Sin esto, en iOS Safari los elementos animados del contenido (botones del
   hero, reveals, filas del escáner) se promocionan a capas de composición
   y se pintan POR ENCIMA del header fijo — se veía el CTA ámbar del escáner
   sobre la barra de estado del iPhone. Con el contexto propio, ninguna capa
   del contenido puede escapar por encima del nav (z-index:100). */
main, footer{position:relative; z-index:1;}
nav.site{
  position:sticky; top:0; z-index:100;
  /* fuerza capa de composición propia en WebKit sin crear bloque contenedor
     (transform/will-change romperían el panel fixed del menú) */
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:rgba(11,20,32,0.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease, background .3s ease;
}
nav.site.scrolled{
  background:rgba(11,20,32,0.94);
  box-shadow:0 12px 32px rgba(4,8,14,0.45);
}
/* backdrop-filter crea un bloque contenedor para los descendientes con
   position:fixed. Con el menú abierto hay que desactivarlo: si no, el panel
   se posiciona respecto a la barra (72px) en vez de respecto a la pantalla,
   se queda sin fondo y los enlaces se superponen al contenido. */
body.nav-open nav.site{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:var(--ink);
}
body.nav-open{overflow:hidden;}
nav.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces',serif; font-weight:600; font-size:20px;
  text-decoration:none; letter-spacing:0.01em; color:var(--paper);
}
.logo-mark{width:26px;height:20px;flex:none;display:flex;align-items:center;}
.logo-mark svg{width:100%;height:100%;}
.nav-links{
  display:flex; align-items:center; gap:34px;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-size:14.5px; font-weight:500; text-decoration:none;
  color:var(--slate); position:relative; padding:6px 0;
  transition:color .2s ease;
}
.nav-links a:hover{color:var(--paper);}
.nav-links a.active{color:var(--amber);}
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px;
  height:2px; background:var(--amber);
}
/* ===== SUBMENÚ DE SERVICIOS =====
   Se abre con :hover y con :focus-within, así funciona con ratón y con
   teclado sin necesitar JavaScript. En móvil se muestra siempre desplegado
   dentro del panel, donde no hay hover posible. */
.has-sub{position:relative;}
/* El chevron es un elemento propio, no un ::after: el pseudo-elemento del
   enlace ya lo ocupa el subrayado de página activa, y al fusionarse en la
   cascada salía una marca suelta flotando bajo el texto. */
.chev{
  display:inline-block; width:5px; height:5px; margin-left:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:.7;
  transition:transform .2s ease;
}
.has-sub:hover .chev,.has-sub:focus-within .chev{transform:translateY(0) rotate(225deg);}
.subnav{
  position:absolute; top:calc(100% + 10px); left:-18px; min-width:250px;
  background:var(--ink-2); border:1px solid var(--line-strong); border-radius:4px;
  list-style:none; margin:0; padding:8px; z-index:120;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav{opacity:1; visibility:visible; transform:translateY(0);}
/* Puente invisible: evita que el submenú se cierre al pasar el ratón por el hueco */
.has-sub::after{content:''; position:absolute; top:100%; left:0; right:0; height:12px;}
.subnav li{display:block;}
.subnav a{
  display:block; padding:10px 12px; border-radius:3px; font-size:14px;
  color:var(--paper); line-height:1.35;
}
.subnav a small{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:var(--slate); margin-top:3px; letter-spacing:.03em;
}
.subnav a:hover,.subnav a:focus-visible{background:var(--ink-3); color:var(--amber);}
.subnav a:hover small,.subnav a:focus-visible small{color:var(--slate);}

.nav-right{display:flex; align-items:center; gap:22px;}
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:32px; height:32px; padding:0; position:relative;
}
.nav-toggle span{
  position:absolute; left:5px; right:5px; height:1.5px; background:var(--paper);
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle span:nth-child(1){top:11px;}
.nav-toggle span:nth-child(2){top:18px;}
.nav-toggle span:nth-child(3){top:25px;}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ===== BOTÓN FLOTANTE DE MENÚ (móvil) =====
   Aparece al bajar, cuando la barra estática ya se ha ido. translateZ(0) le
   da capa de composición propia — aquí es seguro porque no contiene ningún
   elemento fixed (a diferencia del nav, donde rompería el panel del menú). */
.menu-fab{
  display:none; position:fixed; right:20px; z-index:90;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  width:54px; height:54px; border-radius:50%;
  background:var(--ink-2); border:1px solid var(--line-strong);
  box-shadow:0 10px 28px rgba(4,8,14,0.55);
  cursor:pointer; padding:0;
  transform:translateZ(0) scale(.85); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.menu-fab.show{opacity:1; transform:translateZ(0) scale(1); pointer-events:auto;}
.menu-fab span{
  display:block; width:20px; height:1.5px; background:var(--paper);
  margin:4.5px auto;
}
body.nav-open .menu-fab{opacity:0; pointer-events:none;}
@media (max-width: 900px){
  .menu-fab{display:block;}
}

/* ===== BUTTONS ===== */
/* Familia de botones: tres niveles, una misma forma (píldora).
   1. primary — relleno ámbar sólido (conversión)
   2. glass   — cristal translúcido (nav, acciones secundarias destacadas)
   3. ghost   — borde fino (terciario)
   Todos comparten: elevación al hover, relleno tintado, escala al pulsar,
   y luz en el canto superior. */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 24px; border-radius:100px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.98); transition-duration:.08s;}
.btn-primary{
  background:var(--amber); color:#1A1204;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.28);
}
.btn-primary:hover{
  background:#F0B358;
  box-shadow:0 8px 24px rgba(232,163,61,0.25), inset 0 1px 0 rgba(255,255,255,0.32);
}
.btn-ghost{border-color:var(--line-strong); color:var(--paper); background:transparent;}
.btn-ghost:hover{border-color:var(--cyan); color:var(--cyan); background:rgba(87,214,203,0.08);}
.btn-sm{padding:9px 19px; font-size:13.5px;}
/* Píldora de cristal para la nav: menos gritona que el bloque ámbar sólido.
   El borde lo dibuja el ::before degradado (luz cayendo desde arriba). */
.btn-glass{
  position:relative; border-radius:100px;
  background:rgba(237,234,226,0.05);
  color:var(--paper);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn-glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(180deg,
    rgba(237,234,226,0.35) 0%, rgba(237,234,226,0.10) 35%,
    rgba(237,234,226,0.03) 60%, rgba(237,234,226,0.16) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.btn-glass:hover{background:rgba(232,163,61,0.14); color:var(--amber);}
.btn-glass:hover::before{
  background:linear-gradient(180deg,
    rgba(232,163,61,0.55) 0%, rgba(232,163,61,0.18) 40%,
    rgba(232,163,61,0.06) 65%, rgba(232,163,61,0.28) 100%);
}

/* ===== TICKER ===== */
.ticker-wrap{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ink-3); overflow:hidden; padding:15px 0;
  /* fundido en los bordes: la cinta entra y sale en vez de cortarse en seco */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ticker-track{
  display:flex; gap:52px; width:max-content;
  animation:ticker 26s linear infinite;
}
.ticker-track span{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px;
  letter-spacing:0.04em; color:var(--slate); white-space:nowrap;
}
.ticker-track span.ok{color:var(--cyan);}
.ticker-track span.warn{color:var(--amber);}
.ticker-wrap:hover .ticker-track{animation-play-state:paused;}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ===== SECTIONS ===== */
section{padding:100px 0; border-bottom:1px solid var(--line);}
section.tight{padding:72px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.kicker{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--amber);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
}
.kicker::before{
  content:''; width:7px;height:7px;border-radius:50%; background:currentColor;
  box-shadow:0 0 8px currentColor; animation:kickerPulse 3.2s ease-in-out infinite;
}
.kicker.cyan{color:var(--cyan);}
@keyframes kickerPulse{
  0%,100%{box-shadow:0 0 6px currentColor; opacity:.85;}
  50%{box-shadow:0 0 14px currentColor; opacity:1;}
}
.section-head h2{font-size:clamp(26px,3.4vw,38px);}
.section-head p{color:var(--slate); font-size:16.5px; margin-top:16px;}

/* ===== PAGE HERO (interior pages) ===== */
.page-hero{padding:76px 0 64px; border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(32px,4.6vw,50px); max-width:760px;}
.page-hero p.lede{color:var(--slate); font-size:17.5px; max-width:600px; margin-top:20px;}

/* ===== HOME HERO ===== */
.hero{position:relative; overflow:hidden; padding:110px 0 0; border-bottom:none;}
.beam-field{
  position:absolute; top:-320px; left:50%; width:1100px; height:1100px;
  transform:translateX(-50%);
  background:conic-gradient(from 0deg, transparent 0deg, transparent 78deg,
    rgba(232,163,61,0.35) 88deg, transparent 98deg, transparent 250deg,
    rgba(87,214,203,0.30) 260deg, transparent 270deg, transparent 360deg);
  filter:blur(40px); animation:sweep 16s linear infinite; pointer-events:none;
}
@keyframes sweep{ to{ transform:translateX(-50%) rotate(360deg); } }
.hero-inner{position:relative; z-index:2; max-width:760px; padding-bottom:76px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--cyan); margin-bottom:22px;
  opacity:0; animation:rise .7s ease forwards; animation-delay:.05s;
}
.eyebrow::before{content:''; width:7px;height:7px;border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan);}
.hero h1{
  font-size:clamp(34px,5.4vw,58px); margin-bottom:22px;
  opacity:0; animation:rise .8s ease forwards; animation-delay:.16s;
}
.hero h1 em{font-style:italic; color:var(--amber);}
.hero p.lede{
  font-size:18px; color:var(--slate); max-width:560px; margin-bottom:34px;
  opacity:0; animation:rise .8s ease forwards; animation-delay:.30s;
}
.hero-ctas{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  opacity:0; animation:rise .8s ease forwards; animation-delay:.44s;
}
.hero-fine{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--slate); margin-top:26px;
  opacity:0; animation:rise .8s ease forwards; animation-delay:.55s;}
@keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }

/* ===== HERO: REVEAL PALABRA A PALABRA =====
   El JS trocea el h1 en spans con máscara. El texto completo sigue en el HTML
   inicial — los crawlers (que no ejecutan JS) lo leen igual. Si el JS no
   corre, se aplica la animación 'rise' de siempre como fallback. */
.hero h1.split{opacity:1; animation:none;}
.hero h1 .w{
  display:inline-block; overflow:hidden; vertical-align:top;
  /* margen para que los descendentes de Fraunces no se recorten con la máscara */
  padding-bottom:.12em; margin-bottom:-.12em;
}
.hero h1 .w > span{
  display:inline-block; transform:translateY(112%);
  transition:transform .85s cubic-bezier(.22,1,.36,1);
}
.hero h1.split-in .w > span{transform:translateY(0);}

/* ===== REVEAL ON SCROLL ===== */
.reveal{
  opacity:0; transform:translateY(26px); filter:blur(5px);
  transition:opacity .7s ease, transform .7s ease, filter .7s ease;
}
.reveal.in-view{opacity:1; transform:translateY(0); filter:blur(0);}
.reveal-group.in-view > *:nth-child(1){transition-delay:.04s;}
.reveal-group.in-view > *:nth-child(2){transition-delay:.12s;}
.reveal-group.in-view > *:nth-child(3){transition-delay:.20s;}
.reveal-group.in-view > *:nth-child(4){transition-delay:.28s;}
.reveal-group.in-view > *:nth-child(5){transition-delay:.36s;}
.reveal-group.in-view > *:nth-child(6){transition-delay:.44s;}

/* ===== SPOTLIGHT EN TARJETAS =====
   Halo ámbar que sigue al cursor. El JS marca con .glow los elementos con
   hover real (ratón); en táctil no se activa nada. */
.glow{position:relative;}
.glow::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(230px circle at var(--mx,50%) var(--my,50%),
    rgba(232,163,61,0.08), transparent 65%);
  opacity:0; transition:opacity .35s ease;
}
.glow:hover::after{opacity:1;}

/* ===== BORDE DE CRISTAL (piezas clave) =====
   Borde degradado dibujado con máscara: más luz arriba, se apaga hacia
   abajo, vuelve un poco al fondo — como un canto de vidrio iluminado.
   Solo en las piezas que deben destacar; el resto conserva el borde plano. */
.scan, .pilot, .converge, .subnav{border-color:transparent;}
.scan::before, .pilot::before, .converge::before, .subnav::before,
.card.featured::before, .cal-embed::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(180deg,
    rgba(237,234,226,0.22) 0%, rgba(237,234,226,0.07) 30%,
    rgba(237,234,226,0.03) 60%, rgba(237,234,226,0.10) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:1;
}
.scan, .pilot, .converge{position:relative;}
/* La destacada y el bloque converge llevan el degradado en su color de marca */
.card.featured{border-color:transparent; position:relative;}
.card.featured::before{
  background:linear-gradient(180deg,
    rgba(232,163,61,0.55) 0%, rgba(232,163,61,0.18) 35%,
    rgba(232,163,61,0.08) 65%, rgba(232,163,61,0.30) 100%);
  transition:opacity .25s ease; opacity:.85;
}
.card.featured:hover{border-color:transparent;}
.card.featured:hover::before{opacity:1;}
.converge::before{
  background:linear-gradient(180deg,
    rgba(87,214,203,0.45) 0%, rgba(87,214,203,0.14) 35%,
    rgba(87,214,203,0.06) 65%, rgba(87,214,203,0.24) 100%);
}

/* ===== LUZ EN EL CANTO SUPERIOR =====
   Highlight interior de 1px: da volumen físico a las superficies. */
.card, .step, .track, .shift-col, .pilot, .converge, .value-item{
  box-shadow:inset 0 1px 0 rgba(237,234,226,0.06);
}
.card:hover{box-shadow:0 16px 36px rgba(0,0,0,0.28), inset 0 1px 0 rgba(237,234,226,0.09);}

/* ===== SHIFT (antes/ahora) ===== */
.shift-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden;
}
.shift-col{background:var(--ink-2); padding:36px 32px;}
.shift-col h3{
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:13px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--slate); margin-bottom:20px;
}
.shift-col.now h3{color:var(--cyan);}
.shift-col ul{list-style:none; margin:0; padding:0;}
.shift-col li{padding:12px 0; border-top:1px solid var(--line); font-size:15.5px;}
.shift-col li:first-of-type{border-top:none;}
/* Disponible para cuando haya un dato con fuente citable que colocar bajo la
   columna "ahora". Sin uso ahora mismo — no había fuente para el dato anterior. */
.shift-stat{margin-top:28px; padding-top:24px; border-top:1px solid var(--line-strong);
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--slate);}
.shift-stat b{color:var(--cyan); font-size:15px;}

/* ===== CARDS / SERVICES ===== */
.services{display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:20px;}
.card{
  background:var(--ink-2); border:1px solid var(--line); border-radius:4px;
  padding:32px 28px; display:flex; flex-direction:column;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px); border-color:var(--line-strong); box-shadow:0 16px 36px rgba(0,0,0,0.28);}
.card.featured{border-color:rgba(232,163,61,0.45); background:linear-gradient(160deg, rgba(232,163,61,0.08), var(--ink-2) 55%);}
.card.featured:hover{border-color:var(--amber);}
.card-tag{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--amber); margin-bottom:14px;}
.card.featured .card-tag{display:inline-block; padding:3px 9px; border-radius:100px; background:rgba(232,163,61,0.16);}
.card h3{font-size:21px; font-weight:600; margin-bottom:12px;}
.card p{color:var(--slate); font-size:15px; flex:1; margin-bottom:22px;}
.card-link{font-size:14.5px; font-weight:600; color:var(--paper); text-decoration:none; display:inline-flex; align-items:center; gap:6px; border-top:1px solid var(--line); padding-top:18px; transition:gap .2s ease, color .2s ease;}
.card-link:hover{color:var(--amber); gap:10px;}
.card-link:active{transform:scale(.97);}

/* ===== PROCESS STEPS ===== */
.process{display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.step{padding:36px 30px; background:var(--ink-2); border-right:1px solid var(--line); transition:background .2s ease;}
.step:hover{background:var(--ink-3);}
.step:last-child{border-right:none;}
.step-num{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--cyan); margin-bottom:18px;}
.step h3{font-size:19px; margin-bottom:10px; font-weight:600;}
.step p{color:var(--slate); font-size:14.5px; margin:0;}

/* ===== LONG PROCESS (proceso.html) ===== */
.milestone{display:grid; grid-template-columns:120px 1fr; gap:40px; padding:44px 0; border-top:1px solid var(--line);}
/* El primero arranca pegado: si no, se suman los 100px de la sección
   y los 44px del hito, y quedan 144px de vacío tras la línea divisoria. */
.milestone:first-child{border-top:none; padding-top:0;}
.milestone-num{font-family:'IBM Plex Mono',monospace; font-size:15px; color:var(--cyan);}
.milestone-num small{display:block; font-size:11px; color:var(--slate); margin-top:6px; letter-spacing:0.05em;}
.milestone h2,.milestone h3{font-size:23px; margin-bottom:12px; font-weight:600;}
.milestone p{color:var(--slate); font-size:15.5px; max-width:620px; margin:0 0 14px;}
.milestone ul{margin:14px 0 0; padding-left:18px; color:var(--slate); font-size:14.5px;}
.milestone li{margin-bottom:6px;}

/* ===== PILOT ===== */
.pilot{
  background:var(--ink-2); border:1px solid var(--line); border-radius:4px; padding:48px 44px;
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
}
.pilot h2{font-size:clamp(22px,3vw,30px); margin-bottom:14px;}
.pilot p{color:var(--slate); font-size:15.5px; max-width:520px;}
.pilot-slots{font-family:'IBM Plex Mono',monospace; text-align:center; white-space:nowrap;}
.pilot-slots .num{font-size:40px; color:var(--amber); line-height:1;}
.pilot-slots .label{font-size:11.5px; color:var(--slate); letter-spacing:0.06em; text-transform:uppercase; margin-top:6px;}

/* ===== ABOUT / CREDIBILITY ===== */
.about-block{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start;}
.about-signal{
  border:1px solid var(--line); border-radius:4px; padding:28px; background:var(--ink-2);
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--slate);
}
.about-signal .line{display:flex; justify-content:space-between; padding:9px 0; border-top:1px solid var(--line);}
.about-signal .line:first-child{border-top:none;}
.about-signal .line b{color:var(--paper); font-weight:500;}
.pull-quote{
  font-family:'Fraunces',serif; font-style:italic; font-size:clamp(22px,2.6vw,28px);
  line-height:1.35; color:var(--paper); border-left:2px solid var(--amber); padding-left:28px; margin:40px 0;
}
.values-list{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:4px; overflow:hidden; margin-top:40px;}
.value-item{background:var(--ink-2); padding:26px 26px;}
.value-item h3,.value-item h4{font-family:'Fraunces',serif; font-size:17px; font-weight:600; margin-bottom:8px;}
.value-item p{color:var(--slate); font-size:14px; margin:0;}

/* ===== CONTACT ===== */
.contact-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px;}
.contact-grid h2{font-size:clamp(28px,4vw,42px); margin-bottom:18px;}
.contact-grid p.lede{color:var(--slate); font-size:16.5px; max-width:420px;}
.contact-direct{margin-top:32px;}
.contact-direct a{font-family:'IBM Plex Mono',monospace; font-size:15px; color:var(--cyan); text-decoration:none;}
.contact-direct a:hover{text-decoration:underline;}
form{display:flex; flex-direction:column; gap:16px;}
.field{display:flex; flex-direction:column; gap:7px;}
label{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--slate);}
input,textarea,select{
  background:var(--ink-2); border:1px solid var(--line-strong); border-radius:3px;
  padding:12px 14px; color:var(--paper); font-family:'Inter',sans-serif; font-size:15px;
}
input:focus,textarea:focus,select:focus{border-color:var(--cyan); outline:none;}
textarea{resize:vertical; min-height:96px;}
.form-note{font-size:13px; color:var(--slate);}
/* Consentimiento RGPD. La etiqueta aquí es texto corrido, no un rótulo en
   mono/mayúsculas como el resto de campos: tiene que poder leerse. */
.field-check .check-row{display:flex; align-items:flex-start; gap:11px;}
.field-check input[type="checkbox"]{
  appearance:none; flex:none; width:18px; height:18px; margin-top:2px;
  border:1px solid var(--line-strong); border-radius:3px; background:var(--ink-2);
  cursor:pointer; position:relative;
}
.field-check input[type="checkbox"]:checked{background:var(--amber); border-color:var(--amber);}
.field-check input[type="checkbox"]:checked::after{
  content:''; position:absolute; left:5px; top:1px; width:5px; height:10px;
  border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.field-check input[type="checkbox"]:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}
.field-check label{
  font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.6;
  letter-spacing:normal; text-transform:none; color:var(--slate); cursor:pointer;
}
.field-check label a{color:var(--cyan);}
.booking-note{
  display:flex; gap:16px; align-items:flex-start; background:var(--ink-2);
  border:1px solid var(--line); border-radius:4px; padding:22px 24px; margin-bottom:32px;
}
.booking-note .dot{width:8px;height:8px;border-radius:50%; background:var(--cyan); margin-top:7px; flex:none; box-shadow:0 0 8px var(--cyan);}
.booking-note p{margin:0; color:var(--slate); font-size:14.5px;}
.booking-note b{color:var(--paper);}
.booking-note a{color:var(--cyan); text-decoration:none;}
.booking-note a:hover{text-decoration:underline;}
/* display:flex del propio .booking-note pisa el atributo [hidden] (UA
   display:none), así que el JS no lo podía ocultar al activar el calendario.
   Lo forzamos aquí. */
.booking-note[hidden]{display:none;}

/* ===== AGENDA (calendario Cal.com) ===== */
.booking-head{max-width:640px; margin-bottom:30px;}
.booking-head h2{font-size:clamp(28px,4vw,42px); margin:14px 0 14px;}
.booking-head .lede{color:var(--slate); font-size:16.5px; max-width:560px;}
/* Contenedor del embed: sin caja pesada. Solo una franja fina alrededor del
   iframe donde se ve el halo (linterna). El iframe va por encima (z-index:1)
   para que el halo quede detrás y no tiña el calendario. */
.cal-embed{
  position:relative; min-height:600px; padding:12px; margin-bottom:8px;
  background:var(--ink-2); border:1px solid transparent; border-radius:10px; overflow:hidden;
}
/* iframe por encima del canto de cristal (::before) y del halo (::after). */
.cal-embed iframe{width:100%!important; border:0; position:relative; z-index:2; border-radius:6px;}
/* Halo de la linterna, un poco más amplio para que se lea en la franja. */
.cal-embed.glow::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
  rgba(232,163,61,0.16), transparent 60%);}

/* Aviso previo a cargar el calendario. Mientras está en pantalla no se ha
   pedido nada a Cal.com: es lo que nos ahorra el banner de cookies. */
.cal-consent{
  background:var(--ink-2); border:1px solid var(--line-strong); border-radius:10px;
  padding:34px 32px; max-width:620px;
}
.cal-consent-t{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--amber); margin:0 0 12px;
}
.cal-consent-d{color:var(--slate); font-size:14.5px; line-height:1.7; margin:0 0 24px;}
.cal-consent-d b{color:var(--paper);}
.cal-consent-d a{color:var(--cyan);}
.cal-consent-acc{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.cal-consent-alt{color:var(--slate); font-size:14px; text-decoration:underline;}
.cal-consent-alt:hover{color:var(--paper);}

/* ===== FAQ ===== */
.faq{border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.faq details{background:var(--ink-2); border-top:1px solid var(--line);}
.faq details:first-child{border-top:none;}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 26px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  font-family:'Fraunces',serif; font-size:18px; font-weight:600; line-height:1.3;
  transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--amber);}
.faq summary::after{
  content:'+'; font-family:'IBM Plex Mono',monospace; font-size:20px;
  color:var(--cyan); flex:none; line-height:1; transition:transform .25s ease;
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details[open] .faq-body{animation:faqIn .35s ease;}
@keyframes faqIn{ from{opacity:0; transform:translateY(-5px);} to{opacity:1; transform:translateY(0);} }
.faq .faq-body{padding:0 26px 24px; color:var(--slate); font-size:15.5px; max-width:680px;}
.faq .faq-body p{margin:0 0 12px;}
.faq .faq-body p:last-child{margin-bottom:0;}
.faq .faq-body b{color:var(--paper); font-weight:600;}

/* ===== ITINERARIOS QUE CONVERGEN (proceso) ===== */
.tracks{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.track{
  background:var(--ink-2); border:1px solid var(--line); border-radius:4px;
  padding:28px 26px 30px; display:flex; flex-direction:column;
  border-top:2px solid var(--line-strong);
}
.track.entry{border-top-color:var(--amber);}
.track-tag{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--slate); margin-bottom:12px;
}
.track.entry .track-tag{color:var(--amber);}
.track h3{font-size:20px; margin-bottom:8px;}
.track > p{color:var(--slate); font-size:14.5px; margin:0 0 20px;}
.track ol{
  list-style:none; margin:0 0 22px; padding:0; counter-reset:paso; flex:1;
}
.track ol li{
  counter-increment:paso; position:relative; padding:12px 0 12px 34px;
  border-top:1px solid var(--line); font-size:14.5px; color:var(--paper);
}
.track ol li:first-child{border-top:none;}
.track ol li::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute; left:0; top:13px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--cyan);
}
.track ol li em{display:block; font-style:normal; color:var(--slate); font-size:13.5px; margin-top:3px;}
.track .card-link{margin-top:auto;}

.converge-arrow{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:0; padding:30px 0 26px; color:var(--slate);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase;
}
.converge-arrow::before,.converge-arrow::after{
  content:''; height:1px; background:var(--line); flex:1; max-width:220px;
}
.converge{
  background:linear-gradient(160deg, rgba(87,214,203,0.07), var(--ink-2) 55%);
  border:1px solid rgba(87,214,203,0.35); border-radius:4px; padding:40px 38px;
}
.converge h3{font-size:23px; margin-bottom:10px;}
.converge > p{color:var(--slate); font-size:15.5px; margin:0 0 28px; max-width:620px;}
.converge-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:4px; overflow:hidden;}
.converge-step{background:var(--ink-2); padding:22px 20px;}
.converge-step .n{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--cyan); margin-bottom:10px;}
.converge-step h4{font-family:'Fraunces',serif; font-size:16px; font-weight:600; margin:0 0 6px;}
.converge-step p{color:var(--slate); font-size:13.5px; margin:0;}

/* ===== PANEL DE ANÁLISIS (demo del escáner) ===== */
.scan{
  background:var(--ink-3); border:1px solid var(--line); border-radius:4px;
  overflow:hidden; font-family:'IBM Plex Mono',monospace;
}
.scan-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:12px; padding:18px 24px; border-bottom:1px solid var(--line);
  background:var(--ink-2);
}
.scan-head .cmd{font-size:13px; color:var(--paper);}
.scan-head .cmd b{color:var(--cyan); font-weight:400;}
.scan-head .time{font-size:11.5px; color:var(--slate); letter-spacing:.05em;}
.scan-group{padding:8px 24px 18px;}
.scan-group h3{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--slate);
  margin:20px 0 4px;
}
.scan-row{
  display:grid; grid-template-columns:14px 1fr auto; gap:12px; align-items:baseline;
  padding:11px 0; border-top:1px solid var(--line); font-size:13.5px;
}
.scan-row .mark{color:var(--amber); font-size:14px; line-height:1;}
.scan-row.ok .mark{color:var(--cyan);}
.scan-row .txt{color:var(--paper); line-height:1.5;}
.scan-row .txt code{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px;
  background:rgba(232,163,61,0.12); color:var(--amber);
  padding:1px 5px; border-radius:2px;
}
.scan-row .lvl{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate); white-space:nowrap;
}
.scan-row.crit .lvl{color:var(--amber);}
.scan-foot{
  padding:16px 24px; border-top:1px solid var(--line); background:var(--ink-2);
  font-size:12px; color:var(--slate); line-height:1.6;
}
.scan-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;}

/* ===== ESCÁNER: SALIDA SECUENCIAL =====
   Las filas aparecen una a una al entrar en viewport, como salida real de
   terminal. Estados ocultos solo bajo .scan-anim (la añade el JS): sin JS
   todo es visible desde el primer pintado. */
.scan-anim .scan-row,
.scan-anim .scan-group h3{
  opacity:0; transform:translateX(-10px);
  transition:opacity .5s ease, transform .5s ease;
}
.scan-live .scan-row,
.scan-live .scan-group h3{opacity:1; transform:none;}
.scan-anim .scan-row .mark{
  display:inline-block; transform:scale(0);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
  transition-delay:inherit;
}
.scan-live .scan-row .mark{transform:scale(1);}

/* ===== ÍNDICE DE ESTUDIOS ===== */
.study-list{border-top:1px solid var(--line);}
.study{
  display:grid; grid-template-columns:150px 1fr; gap:36px;
  padding:34px 0; border-bottom:1px solid var(--line);
  text-decoration:none; transition:background .2s ease;
}
.study:hover{background:var(--ink-2);}
.study:hover h2,.study:hover h3{color:var(--amber);}
.study-date{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--slate);
}
.study-date span{display:block; color:var(--cyan); margin-top:6px;}
.study h2,.study h3{font-size:22px; margin-bottom:10px; transition:color .2s ease;}
.study p{color:var(--slate); font-size:15px; margin:0; max-width:620px;}
.study-soon{opacity:.5; cursor:default;}
.study-soon:hover{background:none;}
.study-soon:hover h2{color:var(--paper);}

/* ===== ARTÍCULO (texto largo) ===== */
.prose{max-width:680px;}
.prose h2{font-size:clamp(22px,2.8vw,28px); margin:48px 0 16px;}
.prose h3{font-size:19px; margin:34px 0 12px;}
.prose p{color:var(--slate); font-size:16.5px; margin:0 0 18px;}
.prose p b,.prose li b{color:var(--paper); font-weight:600;}
.prose ul,.prose ol{color:var(--slate); font-size:16.5px; margin:0 0 18px; padding-left:22px;}
.prose li{margin-bottom:10px;}
.prose a{color:var(--cyan);}
.prose hr{border:none; border-top:1px solid var(--line); margin:44px 0;}
/* Tablas (páginas legales). El envoltorio hace el scroll horizontal para que
   en móvil no sea la página entera la que se desplace de lado. */
.tabla-scroll{overflow-x:auto; margin:0 0 22px; border:1px solid var(--line); border-radius:4px;}
.prose table{width:100%; border-collapse:collapse; font-size:14.5px; color:var(--slate);}
.prose th,.prose td{padding:12px 16px; text-align:left; border-top:1px solid var(--line); vertical-align:top;}
.prose thead th{
  border-top:none; background:var(--ink-2); color:var(--paper);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.06em;
  text-transform:uppercase; font-weight:500; white-space:nowrap;
}
/* Marcador de dato pendiente de rellenar en las páginas legales. Salta a la
   vista a propósito: si queda uno publicado, se ve. */
.rellenar{
  background:rgba(232,163,61,0.14); border:1px dashed var(--amber); border-radius:3px;
  color:var(--amber); font-family:'IBM Plex Mono',monospace; font-size:12.5px;
  padding:1px 7px; letter-spacing:0.03em;
}
.prose code{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  background:var(--ink-2); border:1px solid var(--line);
  padding:2px 6px; border-radius:3px; color:var(--paper);
}
.prose pre{
  background:var(--ink-2); border:1px solid var(--line); border-radius:4px;
  padding:20px 22px; overflow-x:auto; margin:0 0 22px;
}
.prose pre code{background:none; border:none; padding:0; font-size:13.5px; line-height:1.7;}
.prose .callout{
  border-left:2px solid var(--cyan); padding:4px 0 4px 22px; margin:0 0 22px;
}
.prose .callout p{color:var(--paper); margin:0;}
.article-meta{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--slate); margin-top:22px;
}

/* ===== HALLAZGOS DE AUDITORÍA (informe de ejemplo) ===== */
.report-meta{
  display:flex; flex-wrap:wrap; gap:32px; padding:24px 26px; margin-bottom:36px;
  background:var(--ink-2); border:1px solid var(--line); border-radius:4px;
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--slate);
}
.report-meta b{display:block; color:var(--paper); font-size:22px; font-weight:500; margin-top:4px;}
.finding{
  border:1px solid var(--line); border-left:2px solid var(--slate); border-radius:4px;
  background:var(--ink-2); padding:24px 26px; margin-bottom:16px;
}
.finding.critico{border-left-color:var(--amber);}
.finding.alto{border-left-color:var(--cyan);}
.finding-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-bottom:12px;
}
.finding-head h3{font-size:18px; font-weight:600; margin:0;}
.sev{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; padding:3px 9px; border-radius:100px;
  border:1px solid var(--line-strong); color:var(--slate);
}
.sev.critico{color:var(--amber); border-color:rgba(232,163,61,0.5); background:rgba(232,163,61,0.1);}
.sev.alto{color:var(--cyan); border-color:rgba(87,214,203,0.5); background:rgba(87,214,203,0.1);}
.finding p{color:var(--slate); font-size:15px; margin:0 0 12px;}
.finding .quote{
  border-left:2px solid var(--line-strong); padding-left:16px; margin:0;
  color:var(--paper); font-size:15px;
}
.finding .quote small{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--slate); margin-bottom:6px;
}
.disclaimer{
  display:flex; gap:16px; align-items:flex-start; padding:22px 24px; margin-bottom:36px;
  border:1px solid rgba(232,163,61,0.4); border-radius:4px; background:rgba(232,163,61,0.06);
}
.disclaimer .dot{width:8px;height:8px;border-radius:50%; background:var(--amber);
  margin-top:7px; flex:none; box-shadow:0 0 8px var(--amber);}
.disclaimer p{margin:0; color:var(--slate); font-size:14.5px;}
.disclaimer b{color:var(--paper);}

/* ===== UTILIDADES (sustituyen estilos inline repetidos) ===== */
.link-inline{border-top:none; padding-top:0; display:inline-flex;}
.section-cta{text-align:center;}
.section-cta h2{font-size:clamp(24px,3.4vw,34px); margin-bottom:22px;}
.section-cta p{color:var(--slate); max-width:480px; margin:0 auto 26px;}
.no-border{border-bottom:none;}
/* Para secciones que arrancan directamente con una lista de hitos: los 100px
   de sección sobran cuando lo primero que se ve es una etiqueta pequeña. */
.pt-tight{padding-top:56px;}
.h2-sm{font-size:clamp(24px,3vw,32px);}
.accent-cyan{color:var(--cyan);}
.accent-amber{color:var(--amber);}
.p-muted{color:var(--slate); font-size:16.5px;}
.lead-para{color:var(--paper); font-size:16.5px;}
.section-gap{margin-top:44px;}
.btn-self-start{align-self:flex-start;}
.signature{
  margin-top:44px; color:var(--slate); font-family:'Fraunces',serif;
  font-style:italic; font-size:17px;
  display:flex; align-items:center; gap:18px;
}
.signature::before,.signature::after{
  content:''; height:1px; background:var(--line-strong); flex:none; width:56px;
}
/* Cargo bajo la firma. En mono y pequeño para que la firma siga siendo la
   firma y esto se lea como el pie de una carta, no como otra línea de texto. */
.signature-rol{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--slate); margin-top:10px; padding-left:74px;
}
.milestone.lead{border-top:none; padding-top:0;}
.milestone b.label{color:var(--paper);}
.stack-gap{margin-top:18px;}

/* ===== ESTADOS DE FORMULARIO ===== */
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--amber);}
.field-error{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.04em;
  color:var(--amber); text-transform:none;
}
.form-status{
  font-family:'IBM Plex Mono',monospace; font-size:13px; padding:14px 16px;
  border-radius:3px; border:1px solid var(--line-strong); background:var(--ink-2);
}
.form-status.ok{border-color:var(--cyan); color:var(--cyan);}
.form-status[hidden]{display:none;}

/* ===== BARRA DE PROGRESO DE LECTURA (estudios/artículos) ===== */
.read-progress{
  position:fixed; top:0; left:0; z-index:150;
  width:100%; height:2px; background:var(--amber);
  transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}

/* ===== FOOTER =====
   Marca + tagline a la izquierda, tres columnas con jerarquía clara a la
   derecha, y una fila de cierre en mono. Sin submenús incrustados ni
   granja de enlaces. */
footer{padding:64px 0 0; border-top:1px solid var(--line);}
.foot-top{
  display:grid; grid-template-columns:1.1fr 1.6fr; gap:64px;
  padding-bottom:56px;
}
.foot-brand{display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-size:19px;}
.foot-tag{color:var(--slate); font-size:14.5px; line-height:1.65; max-width:320px; margin:14px 0 20px;}
.foot-mail{
  font-family:'IBM Plex Mono',monospace; font-size:14px;
  color:var(--cyan); text-decoration:none;
}
.foot-mail:hover{text-decoration:underline;}
.foot-nav{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
.foot-col{display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
.foot-head{
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--slate);
  margin-bottom:10px;
}
.foot-col a{
  font-size:14.5px; color:var(--paper); opacity:.82; text-decoration:none;
  padding:6px 0; transition:color .2s ease, opacity .2s ease;
}
.foot-col a:hover{color:var(--amber); opacity:1;}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  gap:10px 24px; padding:22px 0 30px; border-top:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--slate);
}
.foot-sig{letter-spacing:0.04em;}
.foot-legal{display:flex; gap:18px; flex-wrap:wrap;}
.foot-legal a{color:var(--slate); text-decoration:none;}
.foot-legal a:hover{color:var(--amber); text-decoration:underline;}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px){
  /* Header en móvil: estático. Tras varios intentos, ni sticky ni fixed son
     fiables en iOS Safari (capas de composición del contenido animado se
     pintan por encima, la barra colapsable lo desancla...). Solución simple
     y a prueba de todo: la barra vive arriba del documento y se va con el
     scroll, como una web nativa. Sin posicionamiento pegajoso no hay bug
     posible. Escritorio mantiene sticky + cristal. */
  nav.site, nav.site.scrolled{
    position:static;
    background:var(--ink); backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:none;
  }
  /* Con el menú abierto la barra sí se fija (el scroll está bloqueado por
     overflow:hidden, así que iOS no puede desanclarla) y absorbe la franja
     de la isla/barra de estado con el safe-area. */
  body.nav-open nav.site{
    position:fixed; top:0; left:0; right:0;
    padding-top:env(safe-area-inset-top, 0px);
  }
  /* Con el panel a pantalla completa, logo y botón de cierre deben pintarse
     por encima de él (el panel es hijo del nav y taparía al logo, que va
     antes en el DOM) */
  body.nav-open nav.site .logo,
  body.nav-open nav.site .nav-right{position:relative; z-index:2;}
  /* Sin barra fija, los anclajes no necesitan tanto margen */
  :target{scroll-margin-top:24px;}
  /* Panel a pantalla completa: arranca en el borde físico superior (cubre
     también la franja de la isla) y deja sitio a la barra con el padding. */
  .nav-links{
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:var(--ink); flex-direction:column; align-items:flex-start;
    /* Relleno superior: deja sitio a la barra (72px) + su margen + la franja
       de la isla. Inferior: reserva sitio para el CTA fijo, así en pantallas
       bajas los últimos enlaces no quedan debajo del botón. El panel hace
       scroll propio si el menú no cabe entero. */
    padding:calc(96px + env(safe-area-inset-top, 0px)) 28px 128px;
    gap:6px; transform:translateY(-8px);
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  /* visibility:hidden saca los enlaces del orden de tabulación con el menú cerrado */
  body.nav-open .nav-links{opacity:1; visibility:visible; transform:translateY(0);}
  /* Entrada escalonada de los enlaces: misma coreografía se abra desde la
     barra o desde el botón flotante. */
  .nav-links > li{opacity:0; transform:translateY(10px); transition:opacity .3s ease, transform .3s ease;}
  body.nav-open .nav-links > li{opacity:1; transform:none;}
  body.nav-open .nav-links > li:nth-child(1){transition-delay:.04s;}
  body.nav-open .nav-links > li:nth-child(2){transition-delay:.08s;}
  body.nav-open .nav-links > li:nth-child(3){transition-delay:.12s;}
  body.nav-open .nav-links > li:nth-child(4){transition-delay:.16s;}
  body.nav-open .nav-links > li:nth-child(5){transition-delay:.20s;}
  body.nav-open .nav-links > li:nth-child(6){transition-delay:.24s;}
  /* Enlace en bloque con relleno vertical: la zona táctil llega a 44px sin
     cambiar el ritmo visual (antes el texto medía ~29px de alto). */
  .nav-links a{font-size:17px; display:block; padding:11px 0;}

  /* En móvil no hay hover: el submenú se muestra siempre, indentado.
     Reseteamos por completo la tarjeta flotante del escritorio (borde,
     radio, sombra, fondo, estados hover/focus) para que no quede ni rastro
     de la caja: aquí el submenú es una lista plana con una guía a la
     izquierda, nada más. */
  .has-sub{width:100%;}
  .chev{display:none;}
  .has-sub::after{display:none;}
  /* Fuera el marco de cristal (::before con degradado y máscara): en la
     tarjeta flotante de escritorio dibuja el borde luminoso, pero al ser
     position:absolute; inset:0 se ancla al .has-sub (position:relative) y
     encierra "Servicios" + subenlaces en una caja. En móvil el submenú es
     una lista plana, así que lo eliminamos. */
  .subnav::before{content:none;}
  .subnav,
  .has-sub:hover > .subnav,
  .has-sub:focus-within > .subnav{
    position:static; opacity:1; visibility:visible; transform:none;
    background:none; box-shadow:none; border:none; border-radius:0;
    min-width:0; padding:8px 0 0 16px; margin-top:4px;
    border-left:1px solid var(--line);
  }
  .subnav li + li{margin-top:2px;}
  .subnav a{padding:8px 0; font-size:15px; color:var(--slate);}
  .subnav a small{font-size:10.5px;}
  .subnav a:hover,.subnav a:focus-visible{background:none;}
  .nav-toggle{display:block;}
  /* el CTA sale de la barra y reaparece dentro del menú abierto */
  .nav-right .btn{display:none;}
  body.nav-open .nav-right .btn{
    display:inline-flex; justify-content:center;
    position:fixed; left:28px; right:28px; z-index:101;
    /* con viewport-fit=cover, respeta el indicador de inicio del iPhone */
    bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  }
  /* Sobre el panel del menú, el cristal necesita fondo propio para leerse */
  body.nav-open .nav-right .btn-glass{background:rgba(17,28,41,0.92);}
  .shift-grid{grid-template-columns:1fr;}
  .services{grid-template-columns:1fr;}
  .process{grid-template-columns:1fr;}
  .step{border-right:none; border-bottom:1px solid var(--line);}
  .step:last-child{border-bottom:none;}
  .pilot{grid-template-columns:1fr; text-align:left; padding:36px 28px;}
  .contact-grid{grid-template-columns:1fr; gap:40px;}
  /* Calendario en móvil: marco más ceñido y menos altura reservada (con el
     panel de detalles oculto el embed es más corto). */
  .cal-embed{padding:6px; min-height:480px; border-radius:8px;}
  .about-block{grid-template-columns:1fr; gap:36px;}
  .values-list{grid-template-columns:1fr;}
  .milestone{grid-template-columns:1fr; gap:12px;}
  .hero{padding:88px 0 0;}
  section{padding:64px 0;}
  .pull-quote{font-size:20px; padding-left:20px;}
  .faq summary{font-size:16.5px; padding:20px;}
  .faq .faq-body{padding:0 20px 20px;}

  /* El índice de estudios pasa a una columna: la fecha va encima del título */
  .study{grid-template-columns:1fr; gap:10px; padding:28px 0;}
  .study-date{display:flex; gap:10px; align-items:baseline;}
  .study-date span{display:inline; margin-top:0;}
  .study-date span::before{content:'·'; margin-right:10px; color:var(--slate);}
  .study h2,.study h3{font-size:20px;}

  /* Pie en móvil: marca arriba, columnas en fila con scroll natural a 2+1,
     y cierre apilado */
  footer{padding-top:48px;}
  .foot-top{grid-template-columns:1fr; gap:40px; padding-bottom:40px;}
  .foot-nav{grid-template-columns:1fr 1fr; gap:28px 20px;}
  .foot-col a{padding:8px 0;}
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:6px; padding:20px 0 28px;}

  .tracks{grid-template-columns:1fr;}
  .converge{padding:28px 22px;}
  .converge-steps{grid-template-columns:1fr;}
  .converge-arrow{padding:24px 0 20px; font-size:10.5px;}
  .converge-arrow::before,.converge-arrow::after{max-width:60px;}
  .scan-head,.scan-group,.scan-foot{padding-left:18px; padding-right:18px;}
  .scan-row{grid-template-columns:14px 1fr; gap:10px; font-size:13px;}
  .scan-row .lvl{grid-column:2; margin-top:2px;}
  .scan-actions .btn{width:100%; justify-content:center;}
  .report-meta{gap:20px 28px; padding:20px;}
  .finding{padding:20px;}
  .prose pre{padding:16px;}
}

@media (prefers-reduced-motion: reduce){
  .nav-links > li{opacity:1; transform:none; transition:none;}
  .menu-fab{transition:none;}
  .beam-field{animation:none;}
  .ticker-track{animation:none;}
  html{scroll-behavior:auto;}
  .eyebrow,.hero h1,.hero p.lede,.hero-ctas,.hero-fine{animation:none; opacity:1;}
  .reveal{opacity:1; transform:none; filter:none; transition:none;}
  .kicker::before{animation:none;}
  .faq details[open] .faq-body{animation:none;}
  .glow::after{display:none;}
  /* el JS ya no añade .scan-anim ni trocea el hero con reduced motion,
     pero por si acaso: todo visible */
  .scan-anim .scan-row,.scan-anim .scan-group h3{opacity:1; transform:none;}
  .scan-anim .scan-row .mark{transform:scale(1);}
  .hero h1 .w > span{transform:none; transition:none;}
}