/* =========================================================
   Media Innova 5.0 — hoja de estilos
   Paleta y tipografía según el Manual de Marca v2 (oct. 2026).
   Concepto: "El Foco". La lente del isotipo (círculo con punto)
   guía la composición: anillos concéntricos, tarjetas con relieve
   y un único acento en Azul Innova (Celeste claro sobre Azul Marino).
   ========================================================= */

:root{
  /* Paleta oficial */
  --marino:#2C5A9C;     /* Azul Marino · títulos, texto y fondos oscuros */
  --innova:#0290F6;     /* Azul Innova · acentos, botones, cifras */
  --celeste:#8CC9FA;    /* Celeste claro · acentos sobre Azul Marino */
  --profundo:#0A63B0;   /* Azul Profundo · enlaces e iconos */
  --teal:#75A2A3;       /* Verde Azulado · detalles (nunca texto sobre blanco) */
  --grafito:#646668;    /* Grafito · texto de apoyo */
  --niebla:#E0EAEB;     /* Niebla · fondos suaves */
  --blanco:#FFFFFF;
  /* Derivados funcionales */
  --marino-2:#244C86;
  --line-d:rgba(255,255,255,.2);
  --line-l:rgba(44,90,156,.16);
  --soft-d:#E3ECF6;

  --f-d:'Poppins',Arial,sans-serif;
  --f-b:'Nunito',Arial,sans-serif;

  --r:22px;
  --r-sm:14px;
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
  --gut:max(16px,env(safe-area-inset-left,0px));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--blanco);color:var(--marino);font-family:var(--f-b);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{font-family:var(--f-d);margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ol,ul{margin:0;padding:0;list-style:none}
em{font-style:normal}
:focus-visible{outline:2px solid var(--innova);outline-offset:4px;border-radius:6px}
::selection{background:var(--innova);color:var(--marino)}

.wrap{width:100%;max-width:1320px;margin-inline:auto;padding-inline:var(--gut)}
@media (min-width:760px){.wrap{padding-inline:clamp(24px,4vw,56px)}}

.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--innova);color:var(--marino);padding:10px 16px;border-radius:10px;font-family:var(--f-d);font-weight:600}
.skip:focus{top:16px}

.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Fondos */
.dark{background:var(--marino);color:var(--blanco)}
.light{background:var(--blanco);color:var(--marino)}
.niebla{background:var(--niebla);color:var(--marino)}

/* ---------- Tipos comunes ---------- */
.eyebrow,.kicker{font-family:var(--f-d);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--soft-d)}
.kicker{display:flex;align-items:center;gap:14px;color:var(--profundo)}
.kicker span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid currentColor;letter-spacing:0;font-size:11px}
.dark .kicker{color:var(--innova)}
.title{font-size:clamp(38px,6.2vw,92px);margin-top:20px}
.title em{color:var(--innova)}
.light .title em,.niebla .title em{color:var(--profundo)}
.title-sm{font-size:clamp(30px,4.2vw,58px)}
.sec-head{margin-bottom:clamp(40px,6vw,80px)}
.sec-head-row{display:grid;gap:22px;align-items:end}
@media (min-width:900px){.sec-head-row{grid-template-columns:1.4fr 1fr;gap:56px}}
.sec-lede{font-size:clamp(17px,1.4vw,20px);color:var(--grafito);max-width:48ch}
.dark .sec-lede{color:var(--soft-d)}
.fine{margin-top:28px;font-size:13px;color:var(--grafito)}

/* ---------- Botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 28px;border-radius:999px;background:var(--innova);color:var(--marino);font-family:var(--f-d);font-weight:600;font-size:15px;letter-spacing:.01em;border:2px solid var(--marino);box-shadow:5px 5px 0 var(--marino);transition:box-shadow .3s var(--ease),translate .3s var(--ease);overflow:hidden;isolation:isolate;white-space:nowrap}
.dark .btn{border-color:var(--innova);box-shadow:5px 5px 0 var(--blanco)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blanco);border-radius:inherit;transform:translateY(102%);transition:transform .45s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{box-shadow:2px 2px 0 var(--marino);translate:3px 3px}
.dark .btn:hover{box-shadow:2px 2px 0 var(--blanco)}
.btn:active{box-shadow:0 0 0 var(--marino);translate:5px 5px}
.btn .ico{transition:transform .35s var(--ease)}
.btn:hover .ico{transform:translateX(4px)}
.btn-sm{height:44px;padding:0 20px;font-size:14px;box-shadow:3px 3px 0 var(--blanco)!important}
.btn-xl{height:72px;padding:0 40px;font-size:18px}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-d);font-weight:600;font-size:15px;color:var(--profundo);padding-bottom:4px;background:linear-gradient(currentColor,currentColor) left bottom/100% 1.5px no-repeat;transition:background-size .45s var(--ease),gap .3s}
.link-arrow::after{content:"→";transition:transform .3s var(--ease)}
.link-arrow:hover{background-size:0 1.5px;background-position:right bottom;gap:14px}
.dark .link-arrow{color:var(--blanco)}

/* ---------- Tarjetas con relieve (como el logotipo) ---------- */
.relief{position:relative;background:var(--blanco);color:var(--marino);border:2px solid var(--marino);border-radius:var(--r);box-shadow:10px 10px 0 var(--innova)}
.relief-dark{background:var(--marino);color:var(--blanco);box-shadow:10px 10px 0 var(--innova)}
.relief-blue{background:var(--innova);color:var(--marino);box-shadow:10px 10px 0 var(--marino)}
.dark .relief{border-color:var(--innova)}
.relief-dark-card{background:var(--marino-2);border:1.5px solid var(--line-d);border-radius:var(--r);transition:border-color .35s,box-shadow .45s var(--ease),translate .45s var(--ease)}
.relief-dark-card:hover{border-color:var(--innova);box-shadow:8px 8px 0 var(--innova);translate:-4px -4px}
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),box-shadow .5s var(--ease)}

/* ---------- Marcadores de posición para imágenes ---------- */
.ph{position:relative;overflow:hidden;width:100%;height:100%;min-height:160px;background:
  repeating-radial-gradient(circle at 72% 38%,transparent 0 38px,rgba(10,99,176,.10) 38px 39.5px),
  linear-gradient(135deg,#EEF4F5,var(--niebla));color:var(--profundo)}
.ph::before{content:"";position:absolute;left:72%;top:38%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--innova);box-shadow:0 0 0 8px rgba(2,144,246,.18)}
.ph-dark{background:repeating-radial-gradient(circle at 72% 38%,transparent 0 38px,rgba(2,144,246,.16) 38px 39.5px),linear-gradient(135deg,#0B1A3C,var(--marino-2));color:var(--soft-d)}
.ph-blue{background:repeating-radial-gradient(circle at 72% 38%,transparent 0 38px,rgba(44,90,156,.14) 38px 39.5px),linear-gradient(135deg,#2BA3FA,var(--innova));color:var(--marino)}
.ph-blue::before{background:var(--marino);box-shadow:0 0 0 8px rgba(44,90,156,.15)}
.ph-paper{background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(44,90,156,.07) 22px 23px),linear-gradient(180deg,#FAFBFB,#EEF2F3)}
.ph-tag{position:absolute;left:14px;bottom:14px;z-index:1;font-family:var(--f-d);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.82);color:var(--marino);backdrop-filter:blur(6px)}
.ph-dark .ph-tag{background:rgba(44,90,156,.7);color:var(--blanco)}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph.has-img::before,.ph.has-img .ph-tag{display:none}

/* ---------- Patrón Foco (círculos concéntricos, siempre recortados) ---------- */
.foco{position:absolute;pointer-events:none;aspect-ratio:1;display:grid;place-items:center}
.foco i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(2,144,246,.32)}
.foco i:nth-child(2){inset:9%;border-color:rgba(117,162,163,.28)}
.foco i:nth-child(3){inset:18%;border-color:rgba(255,255,255,.12)}
.foco i:nth-child(4){inset:27%;border-color:rgba(2,144,246,.22)}
.foco i:nth-child(5){inset:36%;border-color:rgba(117,162,163,.22)}
.foco i:nth-child(6){inset:44%;border-color:rgba(255,255,255,.14)}
.foco i:nth-child(7){inset:48.6%;border:0;background:var(--innova)}

/* ---------- Splash ---------- */
.splash{display:none}
.js .splash{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--marino);color:var(--blanco);animation:splashOut .8s var(--ease-2) 2.6s forwards}
.splash.done{animation:splashOut .8s var(--ease-2) forwards}
.splash-rings{position:relative;width:min(56vmin,420px);aspect-ratio:1}
.splash-rings i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--innova);opacity:0;animation:ringIn 1.3s var(--ease) forwards}
.splash-rings i:nth-child(2){inset:18%;border-color:var(--teal);animation-delay:.15s}
.splash-rings i:nth-child(3){inset:36%;border-color:var(--blanco);animation-delay:.3s}
.splash-rings b{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--innova);transform:scale(0);animation:dotIn .7s var(--ease) .75s forwards}
.splash-word{position:absolute;bottom:12vh;left:0;right:0;text-align:center;font-family:var(--f-d);font-weight:600;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--soft-d);opacity:0;animation:fadeIn .8s ease .9s forwards}
@keyframes ringIn{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:scale(1)}}
@keyframes dotIn{to{transform:scale(1)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes splashOut{to{clip-path:circle(0% at 50% 50%);visibility:hidden}}
.js .splash{clip-path:circle(150% at 50% 50%)}

/* ---------- Cursor propio (solo ratón) ---------- */
.cursor{display:none}
.has-cursor .cursor{display:block;position:fixed;left:0;top:0;z-index:250;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor-ring{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1.5px solid var(--innova);transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s,border-color .3s}
.cursor-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--innova);transition:opacity .2s}
.cursor-label{position:absolute;transform:translate(-50%,-50%);font-family:var(--f-d);font-weight:600;font-size:12px;letter-spacing:.06em;color:var(--marino);opacity:0;transition:opacity .2s;white-space:nowrap}
.cursor.is-link .cursor-ring{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(2,144,246,.12)}
.cursor.is-label .cursor-ring{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--innova);border-color:var(--innova)}
.cursor.is-label .cursor-label{opacity:1}
.cursor.is-label .cursor-dot,.cursor.is-link .cursor-dot{opacity:0}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor summary{cursor:none}

.progress{position:fixed;left:0;top:0;z-index:120;height:3px;width:100%;background:var(--innova);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- Cabecera ---------- */
.hdr{position:fixed;left:0;right:0;top:calc(14px + env(safe-area-inset-top,0px));z-index:100;transition:transform .5s var(--ease)}
.hdr.is-hidden{transform:translateY(calc(-100% - 40px))}
.hdr-in{display:flex;align-items:center;gap:18px}
.hdr-in::before{content:"";position:absolute;inset:-8px calc(var(--gut) - 10px);z-index:-1;border-radius:20px;background:rgba(44,90,156,.78);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--line-d);opacity:0;transition:opacity .4s}
@media (min-width:760px){.hdr-in::before{inset:-8px calc(clamp(24px,4vw,56px) - 12px)}}
.hdr.is-solid .hdr-in::before{opacity:1}
.hdr .wrap{position:relative}
.logo-card{display:inline-flex;align-items:center;flex:none}
.logo-card .logo-full{display:none}
.logo-card .logo-iso{height:44px;width:auto}
.logo-card-lg{background:var(--blanco);border-radius:var(--r);padding:16px 22px;border:2px solid var(--marino);box-shadow:8px 8px 0 var(--innova)}
.logo-card-lg .logo-full{display:block;width:150px;height:auto}
.nav{display:none;margin-left:auto;gap:4px}
.nav a{position:relative;padding:10px 14px;font-family:var(--f-d);font-weight:500;font-size:14px;color:var(--blanco);border-radius:999px;transition:background .25s,color .25s}
.nav a:hover{background:rgba(255,255,255,.1)}
.nav a.is-active{color:var(--innova)}
.hdr-cta{display:none}
.menu-btn{margin-left:auto;display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 18px;border-radius:999px;background:var(--blanco);color:var(--marino);font-family:var(--f-d);font-weight:600;font-size:14px;border:2px solid var(--marino);box-shadow:3px 3px 0 var(--innova)}
.menu-ico{display:grid;gap:5px}
.menu-ico i{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease)}
.menu-btn[aria-expanded="true"] .menu-ico i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-ico i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (min-width:1080px){
  .nav{display:flex}
  .hdr-cta{display:inline-flex;margin-left:8px}
  .menu-btn{display:none}
}

.menu{position:fixed;inset:0;z-index:90;background:var(--marino);color:var(--blanco);display:flex;align-items:center;overflow:hidden;clip-path:circle(0% at calc(100% - 60px) 40px);transition:clip-path .8s var(--ease)}
.menu[hidden]{display:none}
.menu.is-open{clip-path:circle(150% at calc(100% - 60px) 40px)}
.menu-foco{position:absolute;right:-30vmax;bottom:-30vmax;width:80vmax;height:80vmax;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 40px,rgba(2,144,246,.18) 40px 41.5px)}
.menu ol{position:relative;display:grid;gap:2px}
.menu li{overflow:hidden;border-bottom:1px solid var(--line-d)}
.menu a{display:flex;align-items:baseline;gap:16px;padding:12px 0;font-family:var(--f-d);font-weight:600;font-size:clamp(34px,9vw,64px);letter-spacing:-.04em;line-height:1.05;transform:translateY(105%);transition:transform .8s var(--ease),color .2s}
.menu.is-open a{transform:none}
.menu li:nth-child(2) a{transition-delay:.04s}.menu li:nth-child(3) a{transition-delay:.08s}.menu li:nth-child(4) a{transition-delay:.12s}.menu li:nth-child(5) a{transition-delay:.16s}.menu li:nth-child(6) a{transition-delay:.2s}
.menu a small{font-size:12px;letter-spacing:.16em;color:var(--innova)}
.menu a:hover{color:var(--innova)}

/* ---------- Revelados ---------- */
.js .reveal{opacity:0;translate:0 28px;transition:opacity 1s var(--ease),translate 1.1s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.js .reveal.in{opacity:1;translate:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block}
.split.ready .w>span{transform:translateY(108%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--wi,0)*55ms)}
.split.ready.in .w>span{transform:none}
.reveal-all .reveal{opacity:1!important;translate:none!important}
.reveal-all .split .w>span{transform:none!important}

/* =========================================================
   01 · PORTADA
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate;padding:clamp(120px,16vh,170px) 0 clamp(90px,12vh,130px)}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:30%;z-index:-1;background:linear-gradient(transparent,rgba(2,144,246,.08))}
.foco-hero{width:min(150vmax,1900px);right:-60%;top:50%;translate:0 -50%;z-index:-1;opacity:.55}
.hero-grid{display:grid;gap:56px;align-items:center}
@media (min-width:1000px){.hero-grid{grid-template-columns:1.12fr .88fr;gap:40px}}
.pulse{position:relative;width:9px;height:9px;border-radius:50%;background:var(--innova)}
.pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--innova);animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{from{transform:scale(.4);opacity:1}to{transform:scale(1.8);opacity:0}}
.hero-title{margin-top:26px;font-size:clamp(54px,9.4vw,148px);line-height:.98;letter-spacing:-.05em}
.hero-title em{color:var(--innova)}
.hero-title .dot{color:var(--innova)}
.line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.line>span{display:inline-block}
.js .hero .line>span,.js .cta .line>span{transform:translateY(110%) rotate(3deg);transform-origin:0 100%;transition:transform 1.3s var(--ease)}
.js .hero .line:nth-child(2)>span{transition-delay:.09s}
.js .hero .line:nth-child(3)>span{transition-delay:.18s}
.go .hero .line>span,.cta.in .line>span,.reveal-all .line>span{transform:none!important}
.cta .line:nth-child(2)>span{transition-delay:.1s}
.hero-lede{margin-top:30px;max-width:44ch;font-size:clamp(18px,1.55vw,22px);color:var(--soft-d)}
.hero-lede strong{color:var(--blanco);font-weight:700}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px;margin-top:38px}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.hero-proof li{font-family:var(--f-d);font-weight:500;font-size:13px;padding:8px 15px;border-radius:999px;border:1px solid var(--line-d);color:var(--soft-d)}
.hero-proof li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:9px;border-radius:50%;background:var(--teal);vertical-align:middle}
.js .hero .reveal{transition-delay:.45s}
.js .hero .hero-ctas{transition-delay:.55s}
.js .hero .hero-proof{transition-delay:.65s}
.js .hero .reveal{opacity:0}
.go .hero .reveal{opacity:1;translate:none}
/* Red de seguridad: aunque falle el JS, la portada aparece sola */
.js .hero .line>span{animation:heroSafe 0s linear 4.2s forwards}
.js .hero .reveal{animation:heroSafeFade 0s linear 4.2s forwards}
@keyframes heroSafe{to{transform:none}}
@keyframes heroSafeFade{to{opacity:1;translate:none}}

/* Lente: composición orbital */
.hero-lens{position:relative;width:min(100%,600px);aspect-ratio:1;margin-inline:auto;--mx:0;--my:0}
.lens-orbit{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(255,255,255,.2);animation:spin 60s linear infinite}
.lens-orbit-2{inset:13%;border-style:solid;border-color:rgba(2,144,246,.35);animation-duration:44s;animation-direction:reverse}
.lens-orbit span{position:absolute;left:calc(50% + cos(var(--a))*50%);top:calc(50% + sin(var(--a))*50%);translate:-50% -50%;font-family:var(--f-d);font-weight:600;font-size:12px;letter-spacing:.06em;padding:7px 13px;border-radius:999px;background:var(--marino);border:1.5px solid var(--innova);color:var(--blanco);white-space:nowrap;animation:spin 60s linear infinite reverse}
.lens-orbit-2 span{background:var(--innova);color:var(--marino);border-color:var(--innova);animation-duration:44s;animation-direction:normal}
@keyframes spin{to{rotate:360deg}}
.lens-core{position:absolute;inset:25%;border-radius:50%;overflow:hidden;border:2px solid var(--innova);box-shadow:0 0 0 10px rgba(2,144,246,.1),0 0 90px rgba(2,144,246,.35);translate:calc(var(--mx)*12px) calc(var(--my)*12px);transition:translate .6s var(--ease)}
.lens-core .ph{min-height:0;border-radius:50%}
.lens-core .ph-tag{left:50%;bottom:14%;translate:-50% 0;white-space:nowrap;font-size:10px}
.lens-core .ph::before{left:50%;top:50%}
.lens-core .ph{background:repeating-radial-gradient(circle at 50% 50%,transparent 0 26px,rgba(2,144,246,.18) 26px 27.5px),radial-gradient(circle at 50% 50%,#10285A,var(--marino-2) 70%)}
.lens-orbit{z-index:1}
.float-card{z-index:3}
.lens-shine{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at calc(30% + var(--mx)*20%) calc(25% + var(--my)*20%),rgba(255,255,255,.28),transparent 45%);pointer-events:none}
.float-card{position:absolute;left:var(--x);top:var(--y);width:min(220px,46%);padding:18px 20px;display:grid;gap:4px;translate:calc(var(--mx)*-22px) calc(var(--my)*-22px);transition:translate .7s var(--ease),transform .5s var(--ease)}
.float-card .num{font-family:var(--f-d);font-weight:700;font-size:clamp(34px,3.6vw,48px);line-height:1;letter-spacing:-.04em;color:var(--innova)}
.float-card.relief-blue .num{color:var(--marino)}
.float-card span{font-size:13.5px;line-height:1.35;color:var(--grafito)}
.float-card.relief-blue span{color:var(--marino)}
.dark .float-card.relief{border-color:var(--marino)}
.scroll-cue{position:absolute;left:50%;bottom:26px;translate:-50% 0;display:grid;justify-items:center;gap:10px;font-family:var(--f-d);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft-d)}
.scroll-cue i{width:1.5px;height:42px;background:linear-gradient(var(--innova),transparent);animation:cue 2s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (max-width:999px){.scroll-cue{display:none}.hero-lens{width:min(100%,460px)}}
@media (max-width:520px){
  .hero-lens{width:86%}
  .lens-orbit span{font-size:10.5px;padding:5px 10px}
  .float-card{padding:13px 14px;width:50%}
  .float-card span{font-size:12px}
  .fc-a{--x:-4%!important;--y:-2%!important}
  .fc-b{--x:54%!important;--y:80%!important}
}

/* ---------- Cinta ---------- */
.ticker{background:var(--innova);color:var(--marino);border-block:2px solid var(--marino);overflow:hidden;padding:20px 0}
.ticker-track{display:flex;align-items:center;gap:34px;width:max-content;animation:ticker 32s linear infinite}
.ticker span{font-family:var(--f-d);font-weight:700;font-size:clamp(28px,4vw,58px);letter-spacing:-.035em;line-height:1;white-space:nowrap}
.ticker span.o{color:transparent;-webkit-text-stroke:1.5px var(--marino)}
.ticker b{flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--marino);background:radial-gradient(circle,var(--marino) 0 4px,transparent 4.5px)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* =========================================================
   02 · MANIFIESTO
   ========================================================= */
.manifesto{padding:clamp(100px,15vw,200px) 0 clamp(80px,10vw,140px)}
.manifesto-text{margin-top:36px;font-family:var(--f-d);font-weight:600;font-size:clamp(28px,4.3vw,64px);line-height:1.14;letter-spacing:-.035em;max-width:22ch}
.manifesto-text mark{background:none;color:var(--profundo)}
.manifesto-text .mw{transition:opacity .35s linear,color .35s}
.manifesto-text.lit .mw{opacity:.16}
.manifesto-text.lit .mw.on{opacity:1}
.manifesto-foot{display:grid;gap:30px;margin-top:clamp(48px,6vw,80px);padding-top:32px;border-top:1.5px solid var(--line-l)}
@media (min-width:800px){.manifesto-foot{grid-template-columns:1fr 1fr;align-items:center}}
.sig{display:flex;align-items:center;gap:18px}
.sig img{width:64px;height:auto}
.sig span{display:grid;font-size:15px;color:var(--grafito)}
.sig strong{font-family:var(--f-d);font-weight:600;color:var(--marino);font-size:17px}
.note{font-size:clamp(18px,1.6vw,22px);font-family:var(--f-d);font-weight:500;letter-spacing:-.01em;max-width:30ch;justify-self:end}
.note::before{content:"";display:block;width:44px;height:3px;background:var(--innova);margin-bottom:16px;border-radius:2px}

/* =========================================================
   03 · PILARES (apilados)
   ========================================================= */
.pillars{padding:clamp(60px,8vw,120px) 0 clamp(80px,10vw,140px);background:linear-gradient(var(--blanco),var(--blanco) 40%,var(--niebla))}
.stack{display:grid;gap:clamp(40px,6vh,70px)}
.pillar{position:sticky;top:calc(104px + var(--i)*26px);display:grid;gap:24px;padding:clamp(22px,3vw,40px);min-height:min(560px,74svh);transform-origin:50% 0;transform:scale(var(--s,1));transition:transform .2s linear}
@media (min-width:900px){.pillar{grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:stretch}}
.pillar-body{display:flex;flex-direction:column;gap:16px}
.pillar-n{font-family:var(--f-d);font-weight:600;font-size:13px;letter-spacing:.18em;color:var(--profundo)}
.pillar h3{font-size:clamp(52px,8.4vw,128px);letter-spacing:-.055em;line-height:.92;margin-top:auto}
.pillar-claim{font-family:var(--f-d);font-weight:600;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;line-height:1.2}
.pillar p:not(.pillar-claim){color:var(--grafito);max-width:46ch}
.pillar .ph{border-radius:var(--r-sm);min-height:240px;border:2px solid var(--marino)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-family:var(--f-d);font-weight:500;font-size:13px;padding:6px 13px;border-radius:999px;border:1.5px solid currentColor;opacity:.8}
.pillar-dark{background:var(--marino);color:var(--blanco);box-shadow:10px 10px 0 var(--innova)}
.pillar-dark .pillar-n{color:var(--innova)}
.pillar-dark p:not(.pillar-claim){color:var(--soft-d)}
.pillar-dark h3{color:var(--blanco)}
.pillar-dark .ph{border-color:var(--innova)}
.pillar-blue{background:var(--innova);box-shadow:10px 10px 0 var(--marino)}
.pillar-blue .pillar-n,.pillar-blue p:not(.pillar-claim){color:var(--marino)}

/* =========================================================
   04 · RESULTADOS
   ========================================================= */
.results{position:relative;overflow:hidden;padding:clamp(90px,12vw,170px) 0}
.foco-results{width:900px;left:-380px;bottom:-420px}
.foco-results i{border-color:rgba(10,99,176,.22)!important}
.results .wrap{position:relative}
.bento{display:grid;gap:clamp(22px,2.4vw,32px)}
@media (min-width:760px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.bento{grid-template-columns:repeat(4,1fr)}.stat-xl{grid-column:span 2;grid-row:span 2}.stat-wide{grid-column:span 2}}
.stat{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:8px;min-height:240px}
.stat .num{font-family:var(--f-d);font-weight:700;font-size:clamp(56px,6.4vw,96px);line-height:.9;letter-spacing:-.055em;color:var(--profundo);font-variant-numeric:tabular-nums;margin-top:auto}
.stat p{font-family:var(--f-d);font-weight:500;font-size:17px;line-height:1.3;letter-spacing:-.01em}
.stat-src{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--grafito)}
.relief-dark .num{color:var(--innova)}
.relief-dark .stat-src{color:var(--soft-d)}
.relief-blue .num,.relief-blue .stat-src{color:var(--marino)}
.stat-xl{padding:0;overflow:hidden}
.stat-xl .ph{flex:1;min-height:260px;border-bottom:2px solid var(--marino)}
.stat-xl .stat-body{padding:clamp(22px,2.4vw,32px);display:grid;gap:8px}
.stat-xl .num{font-size:clamp(80px,10vw,160px)}
.stat .stat-src{color:var(--profundo)}
.relief-dark .stat-src{color:var(--innova)}
.relief-blue .stat-src{color:var(--marino)}
.ben-t{font-size:clamp(38px,4.2vw,64px);letter-spacing:-.05em;line-height:.95;margin-top:auto;padding-top:28px}
.stat-xl .ben-t{font-size:clamp(48px,6vw,96px)}
.ben-k{font-family:var(--f-d);font-weight:600!important;font-size:clamp(17px,1.4vw,20px)!important}
.ben-d{font-family:var(--f-b)!important;font-weight:400!important;font-size:15.5px!important;line-height:1.55!important;color:var(--grafito);margin-top:6px}
.relief-dark .ben-d{color:var(--soft-d)}
.relief-blue .ben-d{color:var(--marino)}
.stat-row{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;margin-top:auto}
.eq{display:flex;align-items:flex-end;gap:5px;height:44px;margin-top:22px}
.eq i{flex:1;background:var(--innova);border-radius:3px 3px 0 0;height:30%;animation:eq 1.6s var(--ease-2) infinite alternate}
.eq i:nth-child(3n){animation-delay:-.4s}.eq i:nth-child(3n+1){animation-delay:-.9s}.eq i:nth-child(4n){animation-delay:-1.2s;background:var(--teal)}
@keyframes eq{to{height:100%}}

/* =========================================================
   05 · SERVICIOS
   ========================================================= */
.services{padding:clamp(90px,12vw,170px) 0}
.svc-list{border-top:1.5px solid var(--marino)}
.svc{position:relative;display:grid;grid-template-columns:44px 1fr 28px;gap:6px 18px;align-items:center;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1.5px solid var(--line-l);isolation:isolate}
.svc::before{content:"";position:absolute;inset:0 calc(var(--gut)*-1);z-index:-1;background:var(--marino);transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--ease)}
.svc-n{font-family:var(--f-d);font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--profundo);transition:color .3s}
.svc-t{font-size:clamp(28px,4.2vw,62px);letter-spacing:-.045em;transition:transform .55s var(--ease),color .3s}
.svc-d{grid-column:2/4;color:var(--grafito);max-width:52ch;font-size:16px;transition:color .3s}
.svc-ico{width:28px;height:28px;color:var(--profundo);transition:transform .45s var(--ease),color .3s}
@media (min-width:1000px){
  .svc{grid-template-columns:70px minmax(0,1.1fr) minmax(0,.9fr) 36px;gap:28px}
  .svc-d{grid-column:auto}
}
@media (hover:hover){
  .svc:hover::before{transform:scaleY(1);transform-origin:50% 0}
  .svc:hover .svc-t{color:var(--blanco);transform:translateX(18px)}
  .svc:hover .svc-d{color:var(--soft-d)}
  .svc:hover .svc-n{color:var(--innova)}
  .svc:hover .svc-ico{color:var(--innova);transform:rotate(45deg) scale(1.15)}
}
.svc-preview{display:none}
.has-cursor .svc-preview{display:block;position:fixed;left:0;top:0;z-index:40;width:300px;height:360px;margin:-180px 0 0 -150px;border-radius:var(--r);overflow:hidden;border:2px solid var(--innova);box-shadow:10px 10px 0 var(--innova);pointer-events:none;opacity:0;transform:scale(.6) rotate(-6deg);transition:opacity .35s,transform .55s var(--ease)}
.svc-preview.on{opacity:1;transform:scale(1) rotate(var(--rot,0deg))}
.svc-preview .ph{position:absolute;inset:0;min-height:0;opacity:0;transition:opacity .3s}
.svc-preview .ph.on{opacity:1}

/* =========================================================
   06 · MÉTODO
   ========================================================= */
.method{position:relative;padding:clamp(90px,12vw,150px) 0}
.method-head{margin-bottom:48px}
.method-bar{margin-top:32px;height:2px;background:var(--line-d);border-radius:2px;overflow:hidden;max-width:520px}
.method-bar i{display:block;height:100%;width:100%;background:var(--innova);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.method-viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:14px 0 24px}
.method-viewport::-webkit-scrollbar{display:none}
.method-track{display:flex;gap:22px;padding-inline:var(--gut);width:max-content}
@media (min-width:760px){.method-track{padding-inline:clamp(24px,4vw,56px)}}
.step{position:relative;scroll-snap-align:start;width:min(82vw,400px);min-height:400px;padding:30px;display:flex;flex-direction:column;gap:14px}
.step-n{font-family:var(--f-d);font-weight:700;font-size:clamp(70px,7vw,110px);line-height:.85;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--innova)}
.step h3{font-size:clamp(24px,2.3vw,32px);letter-spacing:-.03em;margin-top:auto}
.step p{color:var(--soft-d);font-size:16px}
.step-ico{position:absolute;right:28px;top:30px;width:30px;height:30px;color:var(--teal)}
.step:hover .step-n{color:var(--innova)}
.step-last{background:var(--innova);border-color:var(--innova);color:var(--marino)}
.step-last p{color:var(--marino)}
.step-last .step-n{-webkit-text-stroke-color:var(--marino)}
.step-last .step-ico{color:var(--marino)}
.step-last:hover{box-shadow:8px 8px 0 var(--blanco)}
/* Escritorio: recorrido horizontal guiado por el scroll */
.method.is-pinned{padding:0}
.method.is-pinned .method-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.method.is-pinned .method-viewport{overflow:visible;scroll-snap-type:none}
.method.is-pinned .method-track{will-change:transform}

/* =========================================================
   07 · INVESTIGACIÓN
   ========================================================= */
.insight{padding:clamp(90px,12vw,170px) 0;overflow:hidden}
.insight-grid{display:grid;gap:56px;align-items:center}
@media (min-width:1000px){.insight-grid{grid-template-columns:1.1fr .9fr;gap:80px}}
.mega{display:flex;align-items:flex-start;font-family:var(--f-d);font-weight:700;line-height:.8;letter-spacing:-.07em;margin-top:26px;color:var(--marino)}
.mega b{font-size:clamp(150px,24vw,340px);font-weight:700;font-variant-numeric:tabular-nums}
.mega span{font-size:clamp(60px,8vw,120px);color:var(--innova);margin-top:.12em}
.insight .title{margin-top:12px}
.insight .sec-lede{margin-top:22px}
.screens{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.scr{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 12px;border-radius:999px;border:1.5px solid var(--marino);font-family:var(--f-d);font-weight:600;font-size:14px;animation:bob 3.2s var(--ease-2) infinite}
.scr svg{width:20px;height:20px;fill:none;stroke:var(--profundo);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scr-phone{animation-delay:-1s;background:var(--innova)}
.scr-phone svg{stroke:var(--marino)}
.scr-laptop{animation-delay:-2s}
@keyframes bob{50%{transform:translateY(-6px)}}
.ficha{margin-top:30px;border-top:1.5px solid var(--line-l);padding-top:18px;max-width:60ch}
.ficha summary{list-style:none;display:inline-flex;align-items:center;gap:10px;font-family:var(--f-d);font-weight:600;font-size:15px;color:var(--profundo);cursor:pointer}
.ficha summary::-webkit-details-marker{display:none}
.ficha summary::before{content:"+";display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid currentColor;transition:transform .35s var(--ease)}
.ficha[open] summary::before{transform:rotate(45deg)}
.ficha p{margin-top:14px;font-size:15px;color:var(--grafito)}
.clip{margin:0;display:grid;gap:18px;justify-items:center}
.clip-card{width:min(100%,540px);aspect-ratio:1002/918;overflow:hidden;rotate:2deg;background:#fff}
.clip-card .ph>img{object-fit:contain}
.portrait-card .ph>img{object-position:50% 18%}
.clip-card .ph{border-radius:calc(var(--r) - 2px)}
.clip figcaption{font-size:14px;color:var(--grafito)}
.clip figcaption strong{font-family:var(--f-d);color:var(--marino)}

/* =========================================================
   08 · VALORES
   ========================================================= */
.values{padding:clamp(90px,12vw,160px) 0}
.values-grid{display:grid;border-top:1px solid var(--line-d)}
@media (min-width:700px){.values-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.values-grid{grid-template-columns:repeat(3,1fr)}}
.value{position:relative;padding:34px 28px 38px 0;border-bottom:1px solid var(--line-d);display:grid;gap:10px;align-content:start}
@media (min-width:700px){.value{padding-left:28px;border-left:1px solid var(--line-d)}}
.value::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--innova);transition:width .7s var(--ease)}
.value:hover::after{width:100%}
.value span{font-family:var(--f-d);font-weight:600;font-size:12px;letter-spacing:.18em;color:var(--teal)}
.value h3{font-size:clamp(22px,2.1vw,30px);letter-spacing:-.03em;transition:color .3s}
.value:hover h3{color:var(--innova)}
.value p{color:var(--soft-d);font-size:16px}

/* =========================================================
   09 · EQUIPO
   ========================================================= */
.team{padding:clamp(90px,12vw,170px) 0;overflow:hidden}
.team-grid{display:grid;gap:64px;align-items:center}
@media (min-width:980px){.team-grid{grid-template-columns:.85fr 1.15fr;gap:90px}}
.portrait{position:relative;margin:0;width:min(100%,460px);justify-self:center}
.foco-portrait{width:150%;left:-25%;top:-15%;z-index:0}
.foco-portrait i{border-color:rgba(10,99,176,.25)!important}
.portrait-card{position:relative;z-index:1;aspect-ratio:3/4;overflow:hidden}
.portrait-card .ph{border-radius:calc(var(--r) - 2px)}
.portrait-card .ph-tag{top:14px;bottom:auto}
.portrait-badge{position:absolute;z-index:2;right:-14px;bottom:-26px;display:grid;gap:2px;padding:16px 20px;max-width:210px;border-radius:var(--r-sm)}
.portrait-badge b{font-family:var(--f-d);font-size:46px;line-height:.9;letter-spacing:-.05em}
.portrait-badge span{font-size:13.5px;line-height:1.3;font-weight:600}
@media (max-width:520px){.portrait-badge{right:0}}
.role{margin-top:12px;font-family:var(--f-d);font-weight:600;color:var(--profundo);font-size:18px}
.team .sec-lede{margin-top:22px}
.awards{display:grid;gap:0;margin:36px 0 32px;border-top:1.5px solid var(--line-l)}
.awards li{display:grid;gap:4px;padding:16px 0;border-bottom:1.5px solid var(--line-l)}
@media (min-width:640px){.awards li{grid-template-columns:190px 1fr;gap:20px;align-items:baseline}}
.awards b{font-family:var(--f-d);font-weight:600;font-size:17px}
.awards span{color:var(--grafito);font-size:15.5px}

/* =========================================================
   10 · CONTACTO
   ========================================================= */
.cta{position:relative;overflow:hidden;isolation:isolate;padding:clamp(110px,15vw,200px) 0 clamp(90px,12vw,150px)}
.foco-cta{width:min(170vmax,2000px);left:50%;top:50%;translate:calc(-50% + var(--fx,0px)) calc(-50% + var(--fy,0px));z-index:-1;transition:translate 1.2s var(--ease)}
.cta-in{position:relative;display:grid;justify-items:start}
.cta-title{margin-top:28px;font-size:clamp(52px,10vw,170px);line-height:.95;letter-spacing:-.055em}
.cta-title em{color:var(--innova)}
.cta-title .dot{color:var(--innova)}
.cta .sec-lede{margin-top:28px}
.cta-actions{margin-top:40px}
.contact-grid{display:grid;gap:14px;width:100%;margin-top:64px}
@media (min-width:860px){.contact-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
.contact{display:grid;gap:6px;padding:22px 24px}
.contact small{font-family:var(--f-d);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.contact span{font-family:var(--f-d);font-weight:600;font-size:clamp(16px,1.4vw,19px);word-break:break-word}

/* ---------- Pie ---------- */
.ftr{padding:clamp(70px,9vw,120px) 0 calc(36px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-d)}
.ftr-claim{display:grid;font-family:var(--f-d);font-weight:700;font-size:clamp(46px,9vw,150px);line-height:.92;letter-spacing:-.06em}
.ftr-claim span:nth-child(1){color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.45)}
.ftr-claim span:nth-child(2){color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.7)}
.ftr-claim em{color:var(--innova)}
.ftr-row{display:grid;gap:36px;align-items:center;margin-top:clamp(56px,7vw,90px);padding-top:36px;border-top:1px solid var(--line-d)}
@media (min-width:900px){.ftr-row{grid-template-columns:auto 1fr auto;gap:56px}}
.ftr-nav{display:flex;flex-wrap:wrap;gap:8px 26px;font-family:var(--f-d);font-weight:500;font-size:15px;color:var(--soft-d)}
.ftr-nav a:hover{color:var(--innova)}
.ftr-legal{font-size:13px;color:var(--soft-d);line-height:1.6}

/* ---------- Movimiento reducido: solo se calman los efectos intrusivos ---------- */
/* =========================================================
   Manual de Marca v2: Azul Marino como color oscuro.
   Sobre Azul Marino los acentos van en Celeste claro (#8CC9FA);
   los botones son Azul Innova con texto blanco.
   ========================================================= */
::selection{color:var(--blanco)}
.skip{color:var(--blanco)}
.dark .kicker,.dark .title em,.hero-title em,.hero-title .dot,.cta-title em,.cta-title .dot,.ftr-claim em,
.nav a.is-active,.menu a small,.menu a:hover,.value:hover h3,.ftr-nav a:hover{color:var(--celeste)}
.pulse{background:var(--celeste)}
.pulse::after{border-color:var(--celeste)}
.foco i{border-color:rgba(140,201,250,.38)}
.foco i:nth-child(3),.foco i:nth-child(6){border-color:rgba(255,255,255,.16)}
.foco i:nth-child(4){border-color:rgba(140,201,250,.26)}
.foco i:nth-child(7){background:var(--celeste)}

/* Botones */
.btn{color:var(--blanco);border-color:var(--marino);box-shadow:5px 5px 0 var(--marino);transition:box-shadow .3s var(--ease),translate .3s var(--ease),color .3s}
.btn:hover{color:var(--marino)}
.dark .btn{border-color:var(--blanco);box-shadow:5px 5px 0 var(--celeste)}
.dark .btn:hover{box-shadow:2px 2px 0 var(--celeste)}

/* Tarjetas */
.relief-blue{background:var(--niebla);color:var(--marino);box-shadow:10px 10px 0 var(--innova)}
.relief-blue .num,.float-card.relief-blue .num{color:var(--profundo)}
.relief-dark .num,.relief-dark .stat-src{color:var(--celeste)}
.relief-dark-card:hover{border-color:var(--celeste);box-shadow:8px 8px 0 var(--celeste)}
.portrait-badge b{color:var(--profundo)}

/* Portada */
.lens-orbit span{background:var(--marino);border-color:var(--celeste)}
.lens-orbit-2 span{background:var(--blanco);color:var(--marino);border-color:var(--blanco)}
.lens-orbit-2{border-color:rgba(140,201,250,.45)}
.lens-core{border-color:var(--celeste)}
.scroll-cue i{background:linear-gradient(var(--celeste),transparent)}
.splash-rings i:first-child{border-color:var(--celeste)}
.splash-rings b{background:var(--celeste)}
.cursor-label{color:var(--blanco)}

/* Cinta */
.ticker{color:var(--blanco)}
.ticker span.o{-webkit-text-stroke-color:var(--blanco)}
.ticker b{border-color:var(--blanco);background:radial-gradient(circle,var(--blanco) 0 4px,transparent 4.5px)}

/* Pilares */
.pillar-dark .pillar-n{color:var(--celeste)}
.pillar-dark .ph{border-color:var(--celeste)}
.pillar-blue{background:var(--niebla);box-shadow:10px 10px 0 var(--innova)}
.pillar-blue .pillar-n{color:var(--profundo)}
.pillar-blue p:not(.pillar-claim){color:var(--marino)}

/* Servicios */
@media (hover:hover){
  .svc:hover .svc-n,.svc:hover .svc-ico{color:var(--celeste)}
}

/* Método */
.method-bar i{background:var(--celeste)}
.step-n{-webkit-text-stroke-color:var(--celeste)}
.step:hover .step-n{color:var(--celeste)}
.step-ico{color:var(--celeste)}
.step-last{background:var(--blanco);border-color:var(--blanco);color:var(--marino)}
.step-last p{color:var(--marino)}
.step-last .step-n{-webkit-text-stroke-color:var(--profundo)}
.step-last:hover .step-n{color:var(--profundo)}
.step-last .step-ico{color:var(--profundo)}
.step-last:hover{box-shadow:8px 8px 0 var(--celeste)}

/* Investigación y valores */
.scr-phone{background:var(--marino);border-color:var(--marino);color:var(--blanco)}
.scr-phone svg{stroke:var(--blanco)}
.value::after{background:var(--celeste)}
.value span,.contact small,.dark .eyebrow{color:var(--celeste)}

/* ---------- Celular: cabecera compacta y zonas táctiles cómodas ---------- */
@media (max-width:759px){
  .hdr{top:calc(10px + env(safe-area-inset-top,0px))}
  .hdr-in::before{inset:-6px 6px}
  .logo-card .logo-iso{height:34px}
  .menu-btn{height:40px;padding:0 14px;font-size:13px;gap:10px}
  .hero{padding-top:104px}
  .hero .eyebrow{align-items:flex-start;line-height:1.55;letter-spacing:.16em}
  .hero .eyebrow .pulse{margin-top:5px;flex:none}
  .hero-title{margin-top:30px}
  .link-arrow{padding-block:10px 6px;background-position:left calc(100% - 2px)}
  .ficha summary{min-height:44px}
  .ftr-nav{gap:2px 22px}
  .ftr-nav a{padding:10px 0}
  .kicker,.eyebrow,.contact small,.ph-tag{font-size:12px}
  .pillar .ph{min-height:180px}
  .cta-title{font-size:clamp(44px,13vw,170px)}
}
.method-hint{display:none}
@media (max-width:999px){
  .method-hint{display:flex;align-items:center;gap:10px;margin-top:18px;font-family:var(--f-d);font-weight:600;font-size:13px;color:var(--celeste)}
  .method-hint::after{content:"→";animation:nudge 1.6s var(--ease-2) infinite}
}
@keyframes nudge{50%{transform:translateX(6px)}}

/* ---------- Celular: fotos grandes y visibles ---------- */
.svc-thumb{display:none}
@media (hover:none),(max-width:759px){
  .svc-thumb{display:block;grid-column:1/-1;width:100%;height:auto;min-height:0;aspect-ratio:16/9;margin-top:14px;border-radius:var(--r-sm);border:2px solid var(--marino)}
}
@media (max-width:759px){
  .hero-lens{width:100%}
  .lens-core{inset:15%}
  .lens-orbit-2{inset:9%}
  .pillar .ph{min-height:0;height:auto;aspect-ratio:4/3}
  .stat-xl .ph{flex:none;min-height:0;height:auto;aspect-ratio:16/10}
}

/* ---------- Celular: la cabecera baja con la página y reaparece al subir ---------- */
@media (max-width:759px){
  .hdr{position:absolute;transition:none}
  .hdr.is-sticky{position:fixed;animation:hdrDrop .45s var(--ease)}
  .hdr .hdr-in::before{opacity:0}
  .hdr.is-sticky .hdr-in::before{opacity:1}
  .menu-open .hdr .hdr-in::before{opacity:0}
}
@keyframes hdrDrop{from{transform:translateY(-130%)}}

/* ---------- Borde seguro (iPhone, visores de archivos): la portada baja lo mismo que la cabecera ---------- */
.hero{padding-top:calc(clamp(120px,16vh,170px) + env(safe-area-inset-top,0px))}
html{scroll-padding-top:calc(96px + env(safe-area-inset-top,0px))}
.menu{padding-top:env(safe-area-inset-top,0px)}
@media (max-width:759px){
  .hero{padding-top:calc(104px + env(safe-area-inset-top,0px))}
}

/* ---------- Sin JavaScript (p. ej. vista previa de archivos del iPhone) ---------- */
.menu-btn-nojs,.menu .menu-x{display:none}
.js .menu-x,.js .menu-btn-nojs{display:none!important}
html:not(.js) #menuBtn{display:none!important}
html:not(.js) .menu{display:none;clip-path:none}
html:not(.js) .menu:target{display:flex}
html:not(.js) .menu a{transform:none}
/* El mismo botón abre y cierra: con el menú abierto, "Menú" se cambia por "Cerrar" en el mismo sitio */
html:not(.js) .nojs-open{display:inline-flex}
html:not(.js):has(#menu:target) .nojs-open{display:none}
html:not(.js):has(#menu:target) .nojs-close{display:inline-flex}
html:not(.js):has(#menu:target) .hdr{position:fixed}
.nojs-close .menu-ico i:first-child{transform:translateY(3.5px) rotate(45deg)}
.nojs-close .menu-ico i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
/* Navegadores antiguos sin :has(): botón Cerrar dentro del propio menú */
@supports not selector(:has(*)){
  html:not(.js) .menu .menu-x{display:inline-flex;position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:16px;z-index:2;align-items:center;height:44px;padding:0 18px;border-radius:999px;background:var(--blanco);color:var(--marino);font-family:var(--f-d);font-weight:600;font-size:14px;letter-spacing:0;transform:none}
  html:not(.js) .hdr{z-index:80} /* el menú queda encima y su botón Cerrar no se tapa */
}
@media (min-width:1080px){html:not(.js) .menu-btn-nojs{display:none!important}}

/* ---------- Método: foto animada en cada paso y tarjetas compactas ---------- */
.step{min-height:0;gap:12px}
.step h3{margin-top:6px}
.step-ph{display:block;position:relative;width:100%;height:auto;min-height:0;aspect-ratio:16/10;border-radius:var(--r-sm);border:2px solid var(--celeste);overflow:hidden}
.step-last .step-ph{border-color:var(--marino)}
.step-ph img{transform:translate3d(var(--sx,0px),0,0) scale(1.18);transition:transform .9s var(--ease),filter .5s}
.step:hover .step-ph img{transform:translate3d(var(--sx,0px),0,0) scale(1.28)}
/* barrido al entrar en pantalla (solo si hay JavaScript; sin él la foto se ve directamente) */
.js .step-ph{clip-path:inset(0 100% 0 0 round var(--r-sm));transition:clip-path 1.1s var(--ease)}
.js .step.in .step-ph{clip-path:inset(0 0 0 0 round var(--r-sm))}
.js .step .step-n{transition:color .6s,opacity .8s var(--ease),translate .8s var(--ease)}
.js .step:not(.in) .step-n{opacity:0;translate:-24px 0}
.reveal-all .step-ph{clip-path:none!important}
.reveal-all .step .step-n{opacity:1!important;translate:none!important}
@media (min-width:1000px){
  .step{width:380px;padding:26px}
  .step-n{font-size:clamp(56px,5.4vw,84px)}
  .step-ph{aspect-ratio:auto;height:clamp(120px,22vh,210px)}
  .method.is-pinned .method-head{margin-bottom:28px}
}
/* ---------- Fotos con un mismo tratamiento: tono frío de la marca ---------- */
.ph.has-img:not(.ph-paper) img{filter:saturate(.86) contrast(1.05)}
.ph.has-img:not(.ph-paper)::after{content:"";position:absolute;inset:0;z-index:1;background:var(--marino);mix-blend-mode:soft-light;opacity:.45;pointer-events:none}
.ph.has-img .ph-tag{display:none}
.svc-thumb,.pillar .ph,.step-ph{border-radius:var(--r-sm)}

/* ---------- Contacto: formulario ---------- */
.ct-grid{display:grid;gap:40px;width:100%;margin-top:34px;align-items:start}
@media (min-width:960px){.ct-grid{grid-template-columns:.9fr 1.1fr;gap:64px}}
.ct-info .sec-lede{margin-top:0}
.contact-list{display:grid;gap:14px;margin-top:30px}
.ct-form{display:grid;gap:18px;padding:clamp(22px,3vw,36px);box-shadow:10px 10px 0 var(--celeste)}
.dark .ct-form.relief{border-color:var(--blanco)}
.field{display:grid;gap:7px}
.field label{font-family:var(--f-d);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--marino)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--marino);background:#F6F9FA;border:1.5px solid rgba(44,90,156,.28);border-radius:12px;padding:14px 16px;transition:border-color .2s,box-shadow .2s,background .2s;appearance:none;-webkit-appearance:none}
.field textarea{resize:vertical;min-height:120px}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232C5A9C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.field input::placeholder,.field textarea::placeholder{color:#8A96A3}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--innova);background:var(--blanco);box-shadow:0 0 0 4px rgba(2,144,246,.15)}
.field.bad input,.field.bad textarea{border-color:#C0392B;box-shadow:0 0 0 4px rgba(192,57,43,.1)}
.field .err-txt{font-size:13px;color:#B03A2E;font-weight:600}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-form{justify-content:center;width:100%;height:58px;margin-top:4px}
.btn-form[disabled]{opacity:.7;cursor:progress}
.form-note{text-align:center;font-size:13px;color:var(--grafito)}
.form-live{text-align:center;font-family:var(--f-d);font-weight:600;font-size:14px;color:var(--marino);min-height:0}
.form-live:empty{display:none}
.form-msg{display:none;padding:14px 16px;border-radius:12px;font-weight:600;font-size:15px}
.form-ok{background:#E3F4EA;color:#1D6B3A;border:1.5px solid #9BD3AF}
.form-err{background:#FBE9E7;color:#9E2F22;border:1.5px solid #EDB2A9}
.form-msg:target,.form-msg.show{display:block}
.ct-form.sent .field,.ct-form.sent .btn-form,.ct-form.sent .form-note{display:none}

/* Windows trae esta opción activada por defecto: solo se calma lo intrusivo
   (salto suave del scroll y la velocidad de la cinta). El resto se mantiene. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation-duration:60s}
}