/* Ahorita Va — hoja de estilos
   Escritorio (≥1100px): lienzo de 1440 px de la maqueta escalado con --u (calc(1*var(--u)) = 1px de la maqueta).
   Las coordenadas están medidas del PDF (puntos = px). "NNu" y T(...) los resuelve build.py.
   Tablet/móvil (<1100px): maquetado fluido propio. */

/* ───────── Tipografías (WOFF2 con subconjunto latino) ───────── */
@font-face{font-family:"Montserrat";font-weight:900;font-style:normal;font-display:swap;src:url(../fonts/montserrat-black.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/poppins-medium.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/poppins-semibold.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/poppins-bold.woff2) format("woff2")}
@font-face{font-family:"Permanent Marker";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/permanent-marker.woff2) format("woff2")}

:root{
  --rojo:#d3141e; --rojo-vivo:#e81813; --amarillo:#fec00b; --azul:#030d33; --tinta:#1a1414;
  --beige:#ece7e3; --pagina:#f3f6f7; --gris:#4d4d4d;
  --pildora:linear-gradient(90deg,#e8180f 0%,#f36c0f 50%,#fdb70a 100%);
  --fuente:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --marcador:"Permanent Marker","Comic Sans MS",cursive;
  --titulo:"Montserrat",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--pagina);color:var(--tinta);font:500 16px/1.5 var(--fuente);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px}
.saltar{position:absolute;left:12px;top:-60px;background:var(--azul);color:#fff;padding:10px 16px;border-radius:8px;z-index:200;text-decoration:none}
.saltar:focus{top:10px}

/* Marcador (Permanent Marker) y subrayados reutilizables */
.mk{font-family:var(--marcador);font-weight:400;font-synthesis:none;text-transform:uppercase}
.pil,.pildora{margin:0;background:var(--pildora);color:#fff;border-radius:999px;font-weight:500}
.pil span{color:#fff}
.pildora{display:inline-block;background:var(--pildora);color:#fff;border-radius:999px;font-weight:500;white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;text-decoration:none;font-weight:500;white-space:nowrap;border:1px solid var(--rojo);transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-borde{background:transparent;color:var(--rojo)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(211,20,30,.28)}
.btn img{width:26px;height:26px}

/* ═════════════ ESCRITORIO — lienzo 1440 ═════════════ */
@media (min-width:1100px){
  body{container-type:inline-size}
  body>*{--u:calc(min(100vw,1440px)/1440)}
  @supports (width:1cqw){ body>*{--u:calc(min(100cqw,1440px)/1440)} }
  .st{position:relative;width:calc(1440*var(--u));margin:0 auto}
  .m-solo{display:none!important}
  .t-pop{font-synthesis:none}

  /* ── Cabecera ── */
  .cab{height:calc(90*var(--u));background:#fdfdfd;position:sticky;top:0;z-index:60;box-shadow:0 calc(3*var(--u)) calc(12*var(--u)) rgba(0,0,0,.10)}
  .cab .st{height:calc(90*var(--u))}
  .logo{position:absolute;left:calc(120*var(--u));top:calc(2*var(--u));width:calc(182*var(--u));height:calc(80*var(--u))}
  .logo img{width:calc(182*var(--u));height:calc(80*var(--u))}
  .nav{position:absolute;left:calc(348.7*var(--u));top:calc(28.70*var(--u));display:flex;gap:calc(57.3*var(--u))}
  .nav a{font:500 calc(20*var(--u))/calc(30*var(--u)) var(--fuente);color:var(--tinta);text-decoration:none;white-space:nowrap}
  .nav a:hover{color:var(--rojo)}
  .cab .btn{position:absolute;height:calc(38.6*var(--u));font-size:calc(18.03*var(--u));line-height:1;padding:0}
  .cab .b-in{left:calc(936*var(--u));top:calc(23.5*var(--u));width:calc(180*var(--u))}
  .cab .b-demo{left:calc(1140*var(--u));top:calc(22.3*var(--u));width:calc(180.4*var(--u))}
  .burger,.menu-m{display:none}

  /* ── Hero ── */
  .hero{position:relative;height:calc(651*var(--u));overflow:hidden;background:var(--beige)}
  .fade{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:6;background:linear-gradient(180deg,rgba(243,246,247,0) calc(456*var(--u)),#f3f6f7 calc(638*var(--u)))}
  .sl .art{z-index:0}.sl .pn{z-index:1}.sl .a1-izq,.sl .a1-der,.sl .a2-izq,.sl .a2-der,.sl .a3-izq,.sl .a3-der{z-index:2}
  .sl .tear-s{z-index:3;opacity:.28}.sl .tear{z-index:4}.sl .sub{z-index:5}
  .sl .pil,.sl .tit,.sl .lead,.sl .btn,.sl .linea,.sl .palitos,.rev{z-index:7}
  .hero .fl-w{position:absolute;left:50%;top:0;transform:translateX(-50%);height:calc(651*var(--u));z-index:30;pointer-events:none}
  .hero .flecha{pointer-events:auto}
  .pistas{display:flex;height:100%;transition:transform .7s cubic-bezier(.65,0,.25,1);will-change:transform}
  .sl{flex:0 0 100%;position:relative;height:100%;overflow:hidden}
  .sl .st{height:100%}
  .sl1{background:linear-gradient(90deg,var(--beige) 0,var(--beige) 50%,#f8da47 50%,#f8da47 100%)}
  .sl2{background:linear-gradient(90deg,var(--beige) 0,var(--beige) 50%,#f1640f 50%,#f1640f 100%)}
  .sl2 .grad{position:absolute;left:calc(720*var(--u));top:0;width:calc(720*var(--u));height:100%;background:linear-gradient(90deg,#fcb50b 0,#f1640f 98.6%)}
  .sl3{background:linear-gradient(90deg,var(--azul) 0,var(--azul) 50%,var(--beige) 50%,var(--beige) 100%)}
  .sl .pn{position:absolute;left:0;top:0;width:calc(1440*var(--u));height:calc(651*var(--u))}
  .art{position:absolute;pointer-events:none;max-width:none}
  .mult{mix-blend-mode:multiply}
  .tear{position:absolute;max-width:none;pointer-events:none}
  .sub{position:absolute;max-width:none}

  /* textos de las diapositivas */
  .pil{position:absolute;height:calc(35*var(--u));border-radius:calc(999*var(--u));background:var(--pildora)}
  .pil span{position:absolute;left:0;right:0;text-align:center;top:calc(4.39*var(--u));white-space:nowrap;color:#fff;font:500 calc(15.45*var(--u))/calc(22*var(--u)) var(--fuente)}
  .tit{position:absolute;margin:0;font-weight:900}
  .tit .ln{display:block;font:900 calc(43.56*var(--u))/calc(52.2*var(--u)) var(--titulo);color:var(--rojo);text-transform:uppercase;text-shadow:calc(4*var(--u)) calc(4*var(--u)) 0 #fff;white-space:nowrap;letter-spacing:0}
  .tit .mk{font-size:calc(48.31*var(--u));line-height:0;color:var(--amarillo);text-shadow:calc(4*var(--u)) calc(4*var(--u)) 0 #fff}
  .lead{position:absolute;font:500 calc(19*var(--u))/calc(22.8*var(--u)) var(--fuente);color:var(--tinta);margin:0}
  .sl .btn{position:absolute;height:calc(37.5*var(--u));font-size:calc(17.53*var(--u));line-height:1;padding:0}
  .sl .btn img{width:calc(26*var(--u));height:calc(26*var(--u));position:absolute;right:calc(16.5*var(--u));top:calc(5.5*var(--u))}
  .sl .btn.b-r{background:var(--rojo);color:#fff;width:calc(229*var(--u))}
  .sl .btn.b-v{width:calc(238.8*var(--u))}
  .sl .btn span{position:absolute;white-space:nowrap}
  .flecha{position:absolute;border:0;background:none;padding:0;z-index:30}
  .flecha img{width:100%;height:100%}
  .flecha:hover{transform:scale(1.06)}
  .puntos{position:absolute;left:0;right:0;top:calc(600*var(--u));height:calc(12*var(--u));z-index:30;display:flex;justify-content:center;gap:calc(6*var(--u))}
  .puntos button{width:calc(11.5*var(--u));height:calc(11.5*var(--u));border-radius:50%;border:calc(1*var(--u)) solid var(--tinta);background:transparent;padding:0}
  .puntos button[aria-current="true"]{background:var(--tinta)}

  .rev{position:absolute;left:calc(925.4*var(--u));top:calc(537.5*var(--u));width:calc(315.2*var(--u));height:calc(75.5*var(--u));border-radius:calc(8*var(--u));background:#f8f4e8;box-shadow:0 calc(4*var(--u)) calc(12*var(--u)) rgba(0,0,0,.14)}
  .rev img.av{position:absolute;left:calc(14.6*var(--u));top:calc(20.5*var(--u));width:calc(104*var(--u));height:calc(35*var(--u))}
  .rev .est{position:absolute;left:calc(128.6*var(--u));top:calc(15.5*var(--u));width:calc(64.5*var(--u));height:calc(11.5*var(--u))}
  .rev p{position:absolute;left:calc(128.6*var(--u));top:calc(31.70*var(--u));font:500 calc(10.15*var(--u))/calc(12.1*var(--u)) var(--fuente);color:var(--tinta);white-space:nowrap}
  .rev .cor{display:inline-block;width:calc(9.5*var(--u));height:calc(8*var(--u));margin-left:calc(3*var(--u));vertical-align:baseline}
  .sl .linea,.sl .palitos{position:absolute}


  .tit .ln:last-child{margin-top:calc(5.8*var(--u))}

  /* ── Beneficios (barra flotante) ── */
  .ben{position:relative;z-index:8;height:calc(163*var(--u));margin-top:calc(-1.4*var(--u))}
  .ben .st{height:calc(163*var(--u))}
  .ben .fondo{position:absolute;left:calc(91*var(--u));top:calc(-20.6*var(--u));width:calc(1266*var(--u));height:calc(211*var(--u));max-width:none}
  .ben .pal{position:absolute;left:calc(72*var(--u));top:calc(85*var(--u));width:calc(115.5*var(--u));height:calc(121*var(--u));max-width:none;z-index:2}
  .ben ul{position:absolute;inset:0}
  .ben li{position:absolute;top:calc(29.8*var(--u));width:calc(166.2*var(--u));height:calc(112.6*var(--u));text-align:center;color:var(--gris)}
  .ben li .bg{position:absolute;left:calc(-21.1*var(--u));top:calc(-24.4*var(--u));width:calc(214.5*var(--u));height:calc(161.5*var(--u));max-width:none}
  .ben li .ic{position:absolute;left:50%;top:calc(8.7*var(--u));height:calc(39*var(--u));width:auto;transform:translateX(-50%)}
  .ben li b{position:absolute;left:0;right:0;top:calc(55.34*var(--u));font:600 calc(16.03*var(--u))/calc(19.3*var(--u)) var(--fuente);color:var(--gris)}
  .ben li:first-child b{color:#fff}

  /* ── Cómo funciona (y0 = 902.6) ── */
  .como{position:relative;height:calc(834.4*var(--u))}
  .como .st{height:100%}
  .como .pil{left:calc(653*var(--u));top:calc(80.6*var(--u));width:calc(134*var(--u))}
  .h2{position:absolute;margin:0;font:900 calc(43.56*var(--u))/calc(52.2*var(--u)) var(--titulo);color:var(--rojo);text-transform:uppercase;white-space:nowrap}
  .h2 .mk{font-size:calc(48.31*var(--u));line-height:0;color:var(--amarillo)}
  .como .h2{left:calc(493.4*var(--u));top:calc(144.38*var(--u));text-shadow:calc(4*var(--u)) calc(4*var(--u)) 0 #f9dd4b}
  .como .h2 .mk{text-shadow:calc(4*var(--u)) calc(4*var(--u)) 0 var(--rojo-vivo);margin-left:calc(4.9*var(--u))}
  .como .sub-l{position:absolute;left:calc(679.3*var(--u));top:calc(195.4*var(--u));width:calc(264*var(--u))}
  .pas{position:absolute;left:0;top:0;width:calc(1440*var(--u));height:100%}
  .pas .blob,.pas .cd,.pas .ico{position:absolute;max-width:none}
  .pas .n{position:absolute;display:flex;align-items:center;justify-content:center;width:calc(71.1*var(--u));height:calc(71.1*var(--u));border-radius:50%;color:#fff;font:900 calc(35.39*var(--u))/1 var(--titulo)}
  .pas h3{position:absolute;margin:0;font:700 calc(20*var(--u))/calc(34.3*var(--u)) var(--fuente);color:var(--azul);white-space:nowrap;text-align:center}
  .pas p{position:absolute;margin:0;font:500 calc(15*var(--u))/calc(18*var(--u)) var(--fuente);color:var(--tinta);text-align:center;white-space:nowrap}
  .pas p b{font-weight:700}
  .p1 .blob{left:calc(103*var(--u));top:calc(216.4*var(--u));width:calc(419.5*var(--u));height:calc(421.5*var(--u))}
  .p1 .cd{left:calc(142*var(--u));top:calc(243.4*var(--u));width:calc(341.5*var(--u));height:calc(366.5*var(--u))}
  .p1 .n{left:calc(274.8*var(--u));top:calc(141.4*var(--u));background:var(--amarillo)}
  .p1 .ico{left:calc(250.1*var(--u));top:calc(317.7*var(--u));width:calc(105.2*var(--u))}
  .p1 h3{left:calc(104*var(--u));width:calc(400*var(--u));top:calc(437.15*var(--u))}
  .p1 p{left:calc(104*var(--u));width:calc(400*var(--u));top:calc(479.65*var(--u))}
  .p2 .blob{left:calc(516*var(--u));top:calc(350.4*var(--u));width:calc(419.5*var(--u));height:calc(421.5*var(--u))}
  .p2 .cd{left:calc(555*var(--u));top:calc(378.4*var(--u));width:calc(341.5*var(--u));height:calc(366.5*var(--u))}
  .p2 .n{left:calc(685.9*var(--u));top:calc(763.8*var(--u));background:var(--rojo-vivo)}
  .p2 .ico{left:calc(642.9*var(--u));top:calc(454.8*var(--u));width:calc(139*var(--u))}
  .p2 h3{left:calc(516*var(--u));width:calc(408*var(--u));top:calc(580.05*var(--u))}
  .p2 p{left:calc(516*var(--u));width:calc(408*var(--u));top:calc(618.15*var(--u))}
  .p3 .blob{left:calc(928*var(--u));top:calc(216.4*var(--u));width:calc(419.5*var(--u));height:calc(421.5*var(--u))}
  .p3 .cd{left:calc(972*var(--u));top:calc(243.4*var(--u));width:calc(341.5*var(--u));height:calc(366.5*var(--u))}
  .p3 .n{left:calc(1102.7*var(--u));top:calc(141.4*var(--u));background:var(--azul)}
  .p3 .ico{left:calc(1077.6*var(--u));top:calc(319.1*var(--u));width:calc(113*var(--u))}
  .p3 h3{left:calc(928*var(--u));width:calc(420*var(--u));top:calc(440.95*var(--u))}
  .p3 p{left:calc(928*var(--u));width:calc(420*var(--u));top:calc(479.75*var(--u))}
  .como .fl1{position:absolute;left:calc(495*var(--u));top:calc(296.4*var(--u));width:calc(143.5*var(--u))}
  .como .fl2{position:absolute;left:calc(904*var(--u));top:calc(600.4*var(--u));width:calc(143.5*var(--u))}

  /* ── Negocios (y0 = 1737) ── */
  .neg{position:relative;height:calc(636*var(--u));z-index:1}
  .neg .ondas{position:absolute;left:0;top:0;width:calc(1440*var(--u));height:calc(636*var(--u))}
  .neg .st{height:100%}
  .neg .moto{position:absolute;left:calc(335*var(--u));top:calc(16*var(--u));width:calc(166*var(--u))}
  .neg .camino{position:absolute;left:calc(11*var(--u));top:calc(65*var(--u));width:calc(355*var(--u))}
  .neg .h2{left:calc(365.8*var(--u));top:calc(198.28*var(--u));text-shadow:calc(4*var(--u)) calc(4*var(--u)) 0 #fff}
  .neg .h2 .mk{display:block;position:absolute;left:calc(254.2*var(--u));top:calc(78*var(--u));white-space:nowrap;text-shadow:calc(4*var(--u)) calc(4*var(--u)) 0 #fff}
  .neg .sub-l{position:absolute;left:calc(589.8*var(--u));top:calc(307.9*var(--u));width:calc(264*var(--u))}
  .neg ul{position:absolute;left:0;top:0;width:100%;height:100%}
  .neg li{position:absolute;top:calc(377*var(--u));width:calc(204*var(--u));height:calc(202*var(--u));list-style:none;text-align:center;color:#fff}
  .neg li .cardbg{position:absolute;left:0;top:0;width:calc(204*var(--u));height:calc(202.5*var(--u));max-width:none}
  .neg li .im{position:absolute;max-width:none}
  .neg li b{position:absolute;left:0;right:calc(9*var(--u));font:700 calc(17.79*var(--u))/calc(21.3*var(--u)) var(--fuente);color:#fff}
  .tx{position:absolute;max-width:none;pointer-events:none}
  .tx-neg{left:calc(1252*var(--u));top:calc(-98.2*var(--u));width:calc(188.5*var(--u));height:calc(499.5*var(--u))}
  .tes .tx-d{left:calc(1252*var(--u));top:calc(-6.6*var(--u));width:calc(188.5*var(--u));height:calc(499.5*var(--u))}
  .tes .tx-i{left:calc(8*var(--u));top:calc(130.4*var(--u));width:calc(188.5*var(--u));height:calc(724.5*var(--u))}
  .mk .pm{position:absolute;left:calc(100% + calc(2*var(--u)));top:calc(-23.3*var(--u));width:calc(31.5*var(--u));height:calc(38.5*var(--u));max-width:none}
  .mk{position:relative}

  /* ── Funciones (y0 = 2373) ── */
  .fun{position:relative;height:calc(1096*var(--u));overflow:hidden;background:#4b3a2c;z-index:2}
  .fun .foto{position:absolute;left:calc(50% - calc(963.5*var(--u)));top:calc(-2*var(--u));width:calc(1927*var(--u));height:calc(1098*var(--u));max-width:none;object-fit:cover}
  .fun::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);z-index:1}
  .fun .st{height:100%;z-index:2}
  .fun .pil{left:calc(606*var(--u));top:calc(76.1*var(--u));width:calc(227*var(--u))}
  .fun .h2{left:calc(302*var(--u));top:calc(139.98*var(--u));color:#fff;text-shadow:calc(4*var(--u)) calc(4*var(--u)) 0 var(--rojo-vivo)}
  .fun .h2 .mk{display:block;position:absolute;left:calc(282.7*var(--u));top:calc(84.8*var(--u));white-space:nowrap;text-shadow:calc(4*var(--u)) calc(4*var(--u)) 0 var(--rojo-vivo)}
  .fun .sub-l{position:absolute;left:calc(589.8*var(--u));top:calc(256.5*var(--u));width:calc(264*var(--u))}
  .carr{position:absolute;left:0;top:calc(323*var(--u));width:calc(1440*var(--u));height:calc(620*var(--u))}
  .fc{position:absolute;top:calc(25*var(--u));width:calc(409.5*var(--u));height:calc(545*var(--u));color:var(--azul);transition:left .55s cubic-bezier(.65,0,.25,1),transform .55s cubic-bezier(.65,0,.25,1),color .4s;text-align:center}
  .fc[data-pos="0"]{left:calc(200*var(--u))}
  .fc[data-pos="1"]{left:calc(519.3*var(--u));transform:scale(1.0889);z-index:3;color:#fff}
  .fc[data-pos="2"]{left:calc(840*var(--u))}
  .fc .cf{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;transition:opacity .5s}
  .fc .cz{opacity:0}
  .fc[data-pos="1"] .cz{opacity:1}
  .fc[data-pos="1"] .cb{opacity:0}
  .fc .ico-f{position:absolute;left:50%;top:calc(38*var(--u));width:calc(245*var(--u));height:auto;transform:translateX(-50%)}
  .fc h3{position:absolute;left:calc(60*var(--u));right:calc(60*var(--u));top:calc(293.18*var(--u));font:700 calc(45.49*var(--u))/calc(54.6*var(--u)) var(--fuente);margin:0}
  .fc .caja{position:absolute;left:calc(55*var(--u));top:calc(416.9*var(--u));width:calc(299.5*var(--u));height:calc(69.2*var(--u));max-width:none}
  .fc p{position:absolute;left:calc(82.25*var(--u));width:calc(245*var(--u));top:calc(427.53*var(--u));font:500 calc(18.2*var(--u))/calc(21.8*var(--u)) var(--fuente);margin:0;color:var(--tinta)}
  .fc[data-pos="1"] p{color:#fff}
  .fc[data-pos="2"] h3,.fc[data-pos="2"] p,.fc[data-pos="2"] .ico-f{margin-left:calc(5*var(--u))}
  .carr-fl{position:absolute;border:0;padding:0;background:none;z-index:6}
  .carr-fl img{width:100%;height:100%}
  .carr-pt{position:absolute;left:0;right:0;top:calc(600.4*var(--u));display:flex;justify-content:center;gap:calc(11.4*var(--u));z-index:6}
  .carr-pt button{width:calc(19.6*var(--u));height:calc(19.6*var(--u));border-radius:50%;border:calc(1.2*var(--u)) solid #fff;background:transparent;padding:0}
  .carr-pt button[aria-current="true"]{background:#fff}

  /* ── Testimonios (y0 = 3386.6) ── */
  .tes{position:relative;margin-top:calc(-82.4*var(--u));height:calc(1077.5*var(--u));z-index:3;background:var(--beige);border-radius:calc(80.7*var(--u)) calc(80.7*var(--u)) 0 0}
  .tes .st{height:100%}
  .tes .pil{left:calc(580*var(--u));top:calc(52*var(--u));width:calc(280*var(--u))}
  .tes .h2{left:calc(389.5*var(--u));top:calc(115.88*var(--u));text-shadow:calc(4*var(--u)) calc(4*var(--u)) 0 #fff}
  .tes .h2 .mk{display:block;position:absolute;left:calc(194.5*var(--u));top:calc(84.8*var(--u));white-space:nowrap;text-shadow:calc(4*var(--u)) calc(4*var(--u)) 0 #fff}
  .tes .sub-l{position:absolute;left:calc(610.8*var(--u));top:calc(232.4*var(--u));width:calc(264*var(--u))}
  .tes .sombra{position:absolute;left:calc(95*var(--u));top:calc(278.4*var(--u));width:calc(1259*var(--u));height:calc(348*var(--u));max-width:none;opacity:.14}
  .tl{position:absolute;left:0;top:0;width:100%}
  .te{position:absolute;top:calc(304.7*var(--u));width:calc(377.5*var(--u));height:calc(380*var(--u));margin:0}
  .te .bu{position:absolute;left:0;top:0;width:calc(377.5*var(--u));height:calc(288*var(--u));max-width:none}
  .te blockquote{position:absolute;left:calc(40*var(--u));top:calc(72.65*var(--u));width:calc(320*var(--u));font:500 calc(21.85*var(--u))/calc(26.2*var(--u)) var(--fuente);color:var(--tinta);margin:0}
  .te:nth-child(2) blockquote{left:calc(38*var(--u))}.te:nth-child(3) blockquote{left:calc(36.8*var(--u))}
  .te .av{position:absolute;left:calc(-11.8*var(--u));top:calc(298.7*var(--u));width:calc(81*var(--u));height:calc(81*var(--u));border-radius:50%;object-fit:cover;max-width:none}
  .te .st5{position:absolute;left:calc(80.8*var(--u));top:calc(304*var(--u));width:calc(93*var(--u));height:calc(15*var(--u));max-width:none}
  .te .nom{position:absolute;left:calc(81.5*var(--u));top:calc(323.65*var(--u));font:700 calc(21.85*var(--u))/calc(26.2*var(--u)) var(--fuente);white-space:nowrap;color:var(--tinta)}
  .te .rol{position:absolute;left:calc(81.5*var(--u));top:calc(349.85*var(--u));font:500 calc(21.85*var(--u))/calc(26.2*var(--u)) var(--fuente);white-space:nowrap;color:var(--tinta)}

  /* ── CTA final (y0 = 4288.7) ── */
  .cta{position:relative;height:calc(457.2*var(--u));margin-top:calc(-175.4*var(--u));z-index:4}
  .cta .fondo-osc{display:none}
  .cta .st{height:100%}
  .cta-card{position:absolute;left:calc(75.5*var(--u));top:0;width:calc(1276*var(--u));height:calc(457.2*var(--u));border-radius:calc(29.1*var(--u));background:linear-gradient(90deg,#f4760e 0,#f4760e 54.7%,#fcb50b 100%);box-shadow:0 calc(12*var(--u)) calc(26*var(--u)) rgba(0,0,0,.20)}
  .cta-card .deco{position:absolute;left:0;top:0;width:calc(1276*var(--u));height:calc(457.2*var(--u));max-width:none;clip-path:inset(0 round calc(29.1*var(--u)))}
  .cta-card .izq{position:absolute;left:0;top:0;width:calc(714.4*var(--u));height:calc(457.2*var(--u));filter:drop-shadow(0 calc(5*var(--u)) calc(9*var(--u)) rgba(0,0,0,.22))}
  .cta-card .mano-w{position:absolute;left:0;top:calc(-300*var(--u));width:calc(1276*var(--u));height:calc(757.2*var(--u));clip-path:inset(0 0 0 0 round 0 0 calc(29.1*var(--u)) 0)}
  .cta-card .mano{position:absolute;left:calc(825.2*var(--u));top:calc(187*var(--u));width:calc(433.7*var(--u));height:calc(650.5*var(--u));max-width:none;transform-origin:calc(-12.8*var(--u)) 0;transform:rotate(9.297deg)}
  .cta-card .tear-f{position:absolute;left:calc(561.5*var(--u));top:calc(-11.7*var(--u));width:calc(228*var(--u));height:calc(486.5*var(--u));max-width:none}
  .cta .pil{left:calc(72.5*var(--u));top:calc(46.5*var(--u));width:calc(299.5*var(--u));position:absolute}
  .cta .h2b{position:absolute;left:calc(72.7*var(--u));top:calc(100.18*var(--u));margin:0;font:900 calc(43.56*var(--u))/calc(52.2*var(--u)) var(--titulo);color:var(--rojo);text-transform:uppercase;text-shadow:calc(4*var(--u)) calc(4*var(--u)) 0 #fff;white-space:nowrap}
  .cta .h2b .ln{display:block}
  .cta .h2b .mk{display:block;position:absolute;left:calc(13.5*var(--u));top:calc(136.8*var(--u));font-size:calc(48.31*var(--u));line-height:0;color:var(--amarillo);text-shadow:calc(4*var(--u)) calc(4*var(--u)) 0 #fff;white-space:nowrap}
  .cta .sub-l{position:absolute;left:calc(72.4*var(--u));top:calc(268.1*var(--u));width:calc(253.8*var(--u))}
  .cta p.t{position:absolute;left:calc(72.7*var(--u));top:calc(300.90*var(--u));font:500 calc(20*var(--u))/calc(24*var(--u)) var(--fuente);color:var(--tinta);margin:0;width:calc(480*var(--u))}
  .cta .btn{position:absolute;left:calc(72.7*var(--u));top:calc(375.6*var(--u));width:calc(197.5*var(--u));height:calc(38.6*var(--u));font-size:calc(18.03*var(--u));line-height:1;padding:0}

  /* ── Pie (y0 = 4464.1) ── */
  .pie{position:relative;margin-top:calc(-281.8*var(--u));height:calc(652.3*var(--u));background:var(--tinta);color:#fff;z-index:3}
  .pie .tex{position:absolute;left:50%;transform:translateX(-50%);top:0;width:calc(1441*var(--u));height:calc(652.3*var(--u));max-width:none;pointer-events:none}
  .pie .st{height:100%}
  .pie .logo-p{position:absolute;left:calc(76*var(--u));top:calc(320.7*var(--u));width:calc(285*var(--u));height:calc(125*var(--u))}
  .pie .lema{position:absolute;left:calc(76*var(--u));top:calc(471.95*var(--u));font:500 calc(15*var(--u))/calc(18*var(--u)) var(--fuente);margin:0;width:calc(340*var(--u))}
  .pie .redes{position:absolute;left:calc(76*var(--u));top:calc(538.4*var(--u));display:flex;gap:calc(11.5*var(--u))}
  .pie .redes a img{width:calc(29*var(--u));height:calc(29*var(--u))}
  .col{position:absolute}
  .col h2{margin:0;font:700 calc(15*var(--u))/calc(18*var(--u)) var(--fuente);white-space:nowrap}
  .col li{position:absolute;left:0}
  .col li a{display:flex;align-items:center;gap:calc(6*var(--u));font:500 calc(15*var(--u))/calc(18*var(--u)) var(--fuente);text-decoration:none;color:#fff;white-space:nowrap}
  .col li a img{width:calc(12.5*var(--u));height:calc(12.5*var(--u))}
  .col li a:hover{color:var(--amarillo)}
  .col-pr{left:calc(493.5*var(--u));top:calc(364.65*var(--u))}
  .col-re{left:calc(670.6*var(--u));top:calc(364.65*var(--u))}
  .col-em{left:calc(901.9*var(--u));top:calc(362.95*var(--u))}
  .col-ha{left:calc(1168.2*var(--u));top:calc(364.65*var(--u))}
  .col-pr li:nth-child(1),.col-re li:nth-child(1){top:calc(40.6*var(--u))}.col-pr li:nth-child(2),.col-re li:nth-child(2){top:calc(73.6*var(--u))}.col-pr li:nth-child(3),.col-re li:nth-child(3){top:calc(106.6*var(--u))}.col-pr li:nth-child(4),.col-re li:nth-child(4){top:calc(139.6*var(--u))}
  .col-em li:nth-child(1){top:calc(43.9*var(--u))}.col-em li:nth-child(2){top:calc(76.9*var(--u))}.col-em li:nth-child(3){top:calc(109.9*var(--u))}
  .col-ha li:nth-child(1){top:calc(44.1*var(--u))}.col-ha li:nth-child(2){top:calc(77.1*var(--u))}.col-ha li:nth-child(3){top:calc(110.1*var(--u))}
  .col-ha li a img{width:calc(22.5*var(--u));height:calc(22.5*var(--u))}
  .pie .linea-f{position:absolute;left:0;right:0;top:calc(585.3*var(--u));height:1px;background:rgba(255,255,255,.35)}
  .pie .copy{position:absolute;left:0;right:0;top:calc(608.05*var(--u));text-align:center;font:500 calc(15*var(--u))/calc(18*var(--u)) var(--fuente);margin:0}
}

/* ═════════════ TABLET / MÓVIL (<1100px) ═════════════ */
@media (max-width:1099.98px){
  .d{display:none!important}
  .st{position:relative;width:100%;max-width:640px;margin:0 auto;padding:0 20px}
  .cab{position:sticky;top:0;z-index:60;background:#fdfdfd;box-shadow:0 2px 10px rgba(0,0,0,.10)}
  .cab .st{display:flex;align-items:center;justify-content:space-between;height:64px;max-width:900px}
  .logo img{width:124px;height:auto}
  .nav,.cab .b-in,.cab .b-demo{display:none}
  .burger{display:flex;flex-direction:column;gap:5px;background:none;border:0;padding:10px}
  .burger i{display:block;width:26px;height:3px;border-radius:2px;background:var(--azul);transition:transform .2s,opacity .2s}
  .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger[aria-expanded="true"] i:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .menu-m{position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.14);padding:12px 20px 22px;display:none}
  .menu-m.abierto{display:block}
  .menu-m a{display:block;padding:13px 4px;font-size:18px;text-decoration:none;border-bottom:1px solid #eee}
  .menu-m .btn{margin-top:14px;width:100%;padding:13px 20px;border-bottom:1px solid var(--rojo)}
  .menu-m .btn-borde{margin-top:10px}

  .hero{position:relative;overflow:hidden;background:var(--beige);touch-action:pan-y}   /* el gesto horizontal es del carrusel, no de la página */
  .pistas{display:flex;transition:transform .6s cubic-bezier(.65,0,.25,1)}
  .sl{flex:0 0 100%;position:relative;display:flex;flex-direction:column;min-width:0}
  .sl1{background:linear-gradient(180deg,var(--beige) 0,var(--beige) 52%,#f8da47 52%,#f8da47 100%)}
  .sl2{background:linear-gradient(180deg,var(--beige) 0,var(--beige) 52%,#fcb50b 52%,#f1640f 100%)}
  .sl3{background:linear-gradient(180deg,var(--beige) 0,var(--beige) 52%,var(--azul) 52%,var(--azul) 100%)}
  .sl .st{padding:26px 20px 0;display:flex;flex-direction:column;align-items:center;text-align:center}
  .sl .pn,.sl .art,.sl .tear,.sl .tear-s,.sl .linea,.sl .palitos,.flecha{display:none}
  .sl .pil{position:static;padding:8px 18px;font-size:14px;line-height:1.3;border-radius:999px;white-space:normal;max-width:100%;background:var(--pildora)}
  .sl .pil span{position:static;font-size:14px;line-height:1.3;color:#fff}
  .tit{position:static;margin:16px 0 0}
  .tit .ln{display:block;font:900 clamp(25px,7.4vw,40px)/1.18 var(--titulo);color:var(--rojo);text-transform:uppercase;text-shadow:2px 2px 0 #fff}
  .tit .mk{font-size:1.1em;line-height:1;color:var(--amarillo);text-shadow:2px 2px 0 #fff;margin-left:.2em}
  .lead{position:static;font-size:16.5px;line-height:1.5;margin:14px 0 0;max-width:30em}
  .sl .btn{position:static;margin:8px 4px 0;height:46px;padding:0 24px;font-size:16px;width:auto!important}
  .sl .btn span{position:static}
  .sl .btn img{position:static;width:24px;height:24px}
  .sl .btns{display:flex;flex-wrap:wrap;justify-content:center;margin-top:12px}
  .sl .s-sub{position:relative;width:min(88%,430px);height:auto;margin:22px auto 0;max-width:none}
  .sl3 .s-sub{width:min(88%,430px)}
  .rev,.fade{display:none}
  .puntos{display:flex;justify-content:center;gap:8px;position:absolute;left:50%;transform:translateX(-50%);bottom:12px;z-index:5;background:rgba(255,255,255,.85);padding:7px 12px;border-radius:99px}
  .puntos button{width:10px;height:10px;border-radius:50%;border:1px solid var(--tinta);background:transparent;padding:0}
  .puntos button[aria-current="true"]{background:var(--tinta)}

  .ben{position:relative;z-index:3;margin-top:-16px}
  .ben .st{max-width:640px}
  .ben .fondo,.ben .pal{display:none}
  .ben ul{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;background:#fff;border-radius:20px;padding:14px;box-shadow:0 8px 24px rgba(0,0,0,.10)}
  .ben li{position:relative;border-radius:12px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.10);padding:14px 8px 12px;text-align:center;color:var(--gris)}
  .ben li:first-child{background:linear-gradient(90deg,#fdb00b,#e8180f);color:#fff}
  .ben li .bg{display:none}
  .ben li .ic{height:38px;width:auto;margin:0 auto 6px}
  .ben li b{display:block;font:600 15px/1.25 var(--fuente);color:inherit}

  .como{padding:56px 0 20px}
  .como .pil{display:block;width:max-content;margin:0 auto;padding:7px 22px;font-size:14px}
  .como .pil span{position:static}
  .h2{position:static;margin:14px 0 0;text-align:center;font:900 clamp(26px,7.4vw,40px)/1.15 var(--titulo);color:var(--rojo);text-transform:uppercase}
  .h2 .mk{font-size:1.1em;line-height:1;color:var(--amarillo);text-shadow:2px 2px 0 var(--rojo-vivo);display:inline-block}
  .como .h2{text-shadow:2px 2px 0 #f9dd4b}
  .como .sub-l{display:none}
  .pasos{display:grid;gap:44px;margin-top:40px}
  .pas{position:relative;margin:0 auto;width:min(100%,330px);padding-top:38px}
  .pas .blob{display:none}
  .pas .cd{display:none}
  .pas .n{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;color:#fff;font:900 30px/1 var(--titulo);z-index:2}
  .pas::before{content:"";position:absolute;left:0;right:0;top:32px;bottom:0;background:#fff;border-radius:34px;box-shadow:0 6px 22px rgba(0,0,0,.10)}
  .p1 .n{background:var(--amarillo)}.p2 .n{background:var(--rojo-vivo)}.p3 .n{background:var(--azul)}
  .pas .ico{position:relative;display:block;width:auto;height:92px;margin:42px auto 0;z-index:2}
  .pas h3{position:relative;z-index:2;margin:14px 14px 0;text-align:center;font:700 19px/1.3 var(--fuente);color:var(--azul)}
  .pas p{position:relative;z-index:2;margin:6px 22px 28px;text-align:center;font:500 15px/1.5 var(--fuente)}
  .como .fl1,.como .fl2,.como .deco{display:none}

  .neg{padding:40px 0 48px;background:var(--beige);border-radius:36px 36px 0 0;margin-top:20px;position:relative}
  .neg .ondas,.neg .moto,.neg .camino,.neg .sub-l,.neg .tex-d,.neg .fondo-beige{display:none}
  .neg .h2{text-shadow:2px 2px 0 #fff;margin-top:0}
  .neg .h2 .mk{text-shadow:2px 2px 0 #fff}
  .neg ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:14px;margin-top:28px}
  .neg li{position:relative;border-radius:18px;background:linear-gradient(180deg,#fff 0,#fff 56%,var(--azul) 56%);box-shadow:0 4px 14px rgba(0,0,0,.14);padding:12px 6px 12px;text-align:center;overflow:hidden;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
  .neg li .cardbg{display:none}
  .neg li .im{position:static;height:64px!important;width:auto!important;margin:0 auto;left:auto!important;top:auto!important}
  .neg li b{position:static;margin-top:8px;font:700 14px/1.2 var(--fuente);color:#fff}

  .fun{position:relative;overflow:hidden;padding:48px 0 52px;background:#4b3a2c;margin-top:-1px}
  .fun .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .fun::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18)}
  .fun .st{position:relative;z-index:2}
  .fun .pil{display:block;width:max-content;margin:0 auto;padding:7px 22px;font-size:14px}
  .fun .pil span{position:static}
  .fun .h2{color:#fff;text-shadow:2px 2px 0 var(--rojo-vivo)}
  .fun .sub-l,.carr-fl{display:none}
  .carr{margin-top:26px;display:flex;flex-direction:column;gap:18px;align-items:center}
  .fc{position:relative;width:min(100%,360px);background:#fff;border-radius:20px;padding:22px 20px 22px;text-align:center;color:var(--azul);box-shadow:0 8px 24px rgba(0,0,0,.2);overflow:hidden}
  .fc .cf{display:none}
  .fc[data-pos="1"]{background:linear-gradient(90deg,#030d33,#051a4b 45%,#106bdf);color:#fff}
  .fc .ico-f{position:relative;display:block;width:auto;height:130px;margin:0 auto 8px;left:auto;top:auto;transform:none}
  .fc h3{position:static;font:700 28px/1.2 var(--fuente);margin:0}
  .fc .caja{display:none}
  .fc p{position:static;font:500 16px/1.4 var(--fuente);margin:10px 0 0;color:inherit;background:rgba(255,255,255,.16);border-radius:12px;padding:10px 12px}
  .fc[data-pos="0"] p,.fc[data-pos="2"] p{background:#f3f3f3;color:var(--tinta)}
  .carr-pt{display:none}
  .fun .fc-orden-1{order:1}

  .tes{background:var(--beige);border-radius:36px 36px 0 0;margin-top:-30px;padding:46px 0 44px;position:relative;z-index:3}
  .tes .pil{display:block;width:max-content;margin:0 auto;padding:7px 22px;font-size:14px}
  .tes .pil span{position:static}
  .tes .h2{text-shadow:2px 2px 0 #fff}.tes .h2 .mk{text-shadow:2px 2px 0 #fff}
  .tes .sub-l,.tes .sombra,.tes .tx-i,.tes .tx-d{display:none}
  .tl{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px 20px 8px;margin:0 -20px;-webkit-overflow-scrolling:touch}
  .te{flex:0 0 min(84%,320px);scroll-snap-align:center;position:relative}
  .te .bu{display:none}
  .te blockquote{position:relative;background:#fff;border-radius:16px;padding:22px 20px;font:500 17px/1.45 var(--fuente);box-shadow:0 6px 18px rgba(0,0,0,.10);margin:0}
  .te blockquote::after{content:"";position:absolute;left:34px;bottom:-12px;border:12px solid transparent;border-top-color:#fff;border-bottom:0}
  .te .av{position:relative;display:block;width:60px;height:60px;border-radius:50%;object-fit:cover;margin-top:20px;float:left}
  .te .st5{position:relative;display:block;width:80px;height:auto;margin:22px 0 0 74px}
  .te .nom{position:relative;display:block;margin:4px 0 0 74px;font:700 17px/1.3 var(--fuente)}
  .te .rol{position:relative;display:block;margin:0 0 0 74px;font:500 15px/1.3 var(--fuente)}

  .cta{position:relative;padding:34px 0 0;background:linear-gradient(180deg,var(--beige) 0,var(--beige) 56%,var(--tinta) 56%);margin-top:-1px}
  .cta .fondo-osc{display:none}
  .cta .st{padding:0 14px}
  .cta-card{position:relative;border-radius:30px;background:var(--beige);box-shadow:0 10px 28px rgba(0,0,0,.2);overflow:hidden;padding:30px 24px 0;text-align:center}
  .cta-card .izq,.cta-card .tear-f,.cta-card .deco{display:none}
  .cta .pil{position:static;display:inline-block;padding:7px 18px;font-size:13.5px}
  .cta .pil span{position:static;font-size:13.5px}
  .cta .h2b{position:static;margin:16px 0 0;font:900 clamp(22px,6.3vw,38px)/1.18 var(--titulo);color:var(--rojo);text-transform:uppercase;text-shadow:2px 2px 0 #fff}
  .cta .h2b .ln{display:block}
  .cta .h2b .mk{display:inline-block;font-size:1.1em;line-height:1;color:var(--amarillo);text-shadow:2px 2px 0 #fff;margin-top:4px}
  .cta .sub-l{display:none}
  .cta p.t{position:static;font:500 17px/1.5 var(--fuente);margin:14px 0 0}
  .cta .btn{position:static;margin-top:18px;height:46px;padding:0 28px;font-size:17px}
  .cta-card{display:flex;flex-direction:column;align-items:center;background:var(--beige)}
  .cta-card .mano-w{order:9;position:relative;display:block;width:calc(100% + 48px);max-width:none;margin:24px -24px 0;aspect-ratio:1/1.2;overflow:hidden;background:linear-gradient(180deg,#f4760e,#fcb50b)}
  .cta-card .mano{position:absolute;left:50%;top:3%;width:108%;height:auto;max-width:none;transform:translateX(-50%);aspect-ratio:2/3}
  .cta .pil{order:1}.cta .h2b{order:2;text-align:center}.cta p.t{order:3}.cta .btn{order:4}

  .pie{position:relative;background:var(--tinta);color:#fff;padding:30px 0 22px;margin-top:-1px;z-index:3}
  .pie .tex{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}
  .pie .st{position:relative;z-index:2;max-width:640px}
  .pie .logo-p{width:210px;height:auto}
  .pie .lema{font-size:15px;margin:12px 0 0}
  .pie .redes{display:flex;gap:12px;margin-top:18px}
  .pie .redes a img{width:34px;height:34px}
  .pie .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 18px;margin-top:30px}
  .pie .col-ha{grid-column:1/-1}   /* el correo no cabe en media columna a 375 px */
  .col{position:static}
  .col h2{font:700 16px/1.3 var(--fuente);margin-bottom:10px}
  .col li{position:static;margin:0 0 9px}
  .col li a{display:flex;align-items:center;gap:8px;font:500 15px/1.3 var(--fuente);text-decoration:none;color:#fff}
  .col li a img{width:14px;height:14px}
  .col-ha li a img{width:24px;height:24px}
  .pie .linea-f{height:1px;background:rgba(255,255,255,.3);margin:26px 0 14px}
  .pie .copy{text-align:center;font-size:13.5px;margin:0}
}
@media (min-width:1100px){
  .pie .cols{display:contents}
  .d-m{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pistas,.fc,.fc .cf,.btn{transition:none!important}
}

/* [hidden] debe ganarle al display del formulario y del mensaje de gracias */
.modal-f[hidden],.modal-ok[hidden]{display:none}

/* nada debe poder desplazar la página de lado (iOS ignora overflow del body) */
html{overflow-x:clip}

@media (min-width:1100px){
  .sl1 .pil{left:calc(120*var(--u));top:calc(125*var(--u));width:calc(484*var(--u))}
  .sl1 .pil span{left:0;right:0;text-align:center;top:calc(4.39*var(--u))}
  .sl1 .tit{left:calc(123.1*var(--u));top:calc(192.78*var(--u));width:calc(600*var(--u))}
  .sl1 .tit .mk{margin-left:calc(6.3*var(--u))}
  .sl1 .lead{left:calc(120.6*var(--u));top:calc(403.65*var(--u));width:calc(495*var(--u))}
  .sl1 .b-r{left:calc(120.5*var(--u));top:calc(499*var(--u))}
  .sl1 .b-v{left:calc(366.2*var(--u));top:calc(499*var(--u))}
  .sl1 .b-r span{left:calc(17.9*var(--u));top:calc(4.36*var(--u))}
  .sl1 .b-v span{left:calc(18*var(--u));top:calc(4.36*var(--u))}
  .sl1 .linea{left:calc(321.9*var(--u));top:calc(356.9*var(--u));width:calc(264*var(--u));height:calc(12.5*var(--u))}
  .sl1 .palitos{left:calc(574*var(--u));top:calc(293.5*var(--u));width:calc(31.5*var(--u))}
  .sl2 .pil{left:calc(114*var(--u));top:calc(141.1*var(--u));width:calc(349*var(--u))}
  .sl2 .pil span{left:0;right:0;text-align:center;top:calc(4.39*var(--u))}
  .sl2 .tit{left:calc(116.3*var(--u));top:calc(208.78*var(--u));width:calc(600*var(--u))}
  .sl2 .tit .mk{margin-left:calc(6.3*var(--u))}
  .sl2 .lead{left:calc(116.3*var(--u));top:calc(361.45*var(--u));width:calc(465*var(--u))}
  .sl2 .b-r{left:calc(116.4*var(--u));top:calc(442*var(--u))}
  .sl2 .b-v{left:calc(362*var(--u));top:calc(442*var(--u))}
  .sl2 .b-r span{left:calc(17.9*var(--u));top:calc(4.36*var(--u))}
  .sl2 .b-v span{left:calc(18*var(--u));top:calc(4.36*var(--u))}
  .sl2 .linea{left:calc(309.5*var(--u));top:calc(322*var(--u));width:calc(264*var(--u));height:calc(12.5*var(--u))}
  .sl2 .palitos{left:calc(591.4*var(--u));top:calc(257.3*var(--u));width:calc(31.5*var(--u))}
  .sl3 .pil{left:calc(801.9*var(--u));top:calc(112.2*var(--u));width:calc(484*var(--u))}
  .sl3 .pil span{left:0;right:0;text-align:center;top:calc(4.39*var(--u))}
  .sl3 .tit{left:calc(804.9*var(--u));top:calc(179.98*var(--u));width:calc(600*var(--u))}
  .sl3 .tit .mk{margin-left:calc(6.3*var(--u))}
  .sl3 .lead{left:calc(802.5*var(--u));top:calc(390.85*var(--u));width:calc(495*var(--u))}
  .sl3 .b-r{left:calc(802.4*var(--u));top:calc(486.2*var(--u))}
  .sl3 .b-v{left:calc(1048*var(--u));top:calc(486.2*var(--u))}
  .sl3 .b-r span{left:calc(17.9*var(--u));top:calc(4.36*var(--u))}
  .sl3 .b-v span{left:calc(18*var(--u));top:calc(4.36*var(--u))}
  .sl3 .linea{left:calc(1003.8*var(--u));top:calc(344.2*var(--u));width:calc(264*var(--u));height:calc(12.5*var(--u))}
  .sl3 .palitos{left:calc(1255.8*var(--u));top:calc(280.8*var(--u));width:calc(31.5*var(--u))}
  .sl1 .a1-tacos{left:calc(841*var(--u));top:calc(111*var(--u));width:calc(479.5*var(--u));height:calc(454*var(--u))}
  .sl1 .a1-izq{left:calc(-59*var(--u));top:calc(265*var(--u));width:calc(476*var(--u));height:calc(368*var(--u))}
  .sl1 .a1-der{left:calc(401*var(--u));top:calc(3*var(--u));width:calc(380*var(--u));height:calc(245.5*var(--u))}
  .sl1 .tear{left:calc(604*var(--u));top:calc(3*var(--u));width:calc(324*var(--u));height:calc(648*var(--u))}
  .sl1 .tear-s{left:calc(699*var(--u));top:calc(-9*var(--u));width:calc(123*var(--u));height:calc(679*var(--u))}
  .sl1 .s-sub{left:calc(880*var(--u));top:calc(76*var(--u));width:calc(381*var(--u));height:calc(576*var(--u))}
  .sl2 .a2-elem{left:calc(841*var(--u));top:calc(42*var(--u));width:calc(500.5*var(--u));height:calc(445*var(--u))}
  .sl2 .a2-izq{left:calc(-58*var(--u));top:calc(268*var(--u));width:calc(478.5*var(--u));height:calc(368*var(--u))}
  .sl2 .a2-der{left:calc(405*var(--u));top:calc(2*var(--u));width:calc(380.5*var(--u));height:calc(246*var(--u))}
  .sl2 .tear{left:calc(603*var(--u));top:calc(2*var(--u));width:calc(324*var(--u));height:calc(648*var(--u))}
  .sl2 .tear-s{left:calc(698*var(--u));top:calc(-10*var(--u));width:calc(123*var(--u));height:calc(679*var(--u))}
  .sl2 .s-sub{left:calc(824*var(--u));top:calc(76*var(--u));width:calc(523*var(--u));height:calc(573*var(--u))}
  .sl3 .a3-elem{left:calc(103*var(--u));top:calc(24*var(--u));width:calc(500.5*var(--u));height:calc(445*var(--u))}
  .sl3 .a3-izq{left:calc(682*var(--u));top:calc(332*var(--u));width:calc(478.5*var(--u));height:calc(368*var(--u))}
  .sl3 .a3-der{left:calc(1059*var(--u));top:calc(0*var(--u));width:calc(380.5*var(--u));height:calc(246*var(--u))}
  .sl3 .tear{left:calc(507*var(--u));top:calc(-2*var(--u));width:calc(324*var(--u));height:calc(648*var(--u))}
  .sl3 .tear-s{left:calc(615*var(--u));top:calc(-14*var(--u));width:calc(123*var(--u));height:calc(679*var(--u))}
  .sl3 .s-sub{left:calc(86*var(--u));top:calc(58*var(--u));width:calc(523*var(--u));height:calc(573*var(--u))}
}

/* ───────── Página de preguntas frecuentes ───────── */
body.pg-faq{background:var(--beige)}
.doc{max-width:920px;margin:0 auto;padding:36px 20px 70px}
.migas{font-size:14px;color:#6b6460;margin-bottom:14px}.migas a{color:var(--rojo);text-decoration:none}.migas a:hover{text-decoration:underline}
.doc h1{font:900 clamp(28px,5.4vw,46px)/1.15 var(--titulo);color:var(--rojo);text-transform:uppercase;text-shadow:3px 3px 0 #fff}
.doc h1 .mk{color:var(--amarillo);font-size:1.1em;text-shadow:3px 3px 0 #fff;display:inline-block}
.actualizado{margin-top:12px;font-size:14px;color:#6b6460}
.resumen{margin-top:18px;background:#fff;border-left:6px solid var(--rojo);border-radius:14px;padding:18px 20px;font-size:17px;line-height:1.55;box-shadow:0 4px 16px rgba(0,0,0,.07)}
.doc>section,.doc>nav.toc{margin-top:38px}
.doc h2{font:900 clamp(22px,3.6vw,30px)/1.2 var(--titulo);color:var(--rojo);text-transform:uppercase;margin-bottom:16px;text-shadow:2px 2px 0 #fff}
.tabla-w{overflow-x:auto;background:#fff;border-radius:16px;box-shadow:0 4px 16px rgba(0,0,0,.07)}
.doc table{width:100%;border-collapse:collapse;font-size:16px;min-width:520px}
.doc th,.doc td{text-align:left;padding:13px 18px;vertical-align:top;border-bottom:1px solid #eee}
.doc th{width:34%;font-weight:700;color:var(--azul)}
.doc tr:last-child th,.doc tr:last-child td{border-bottom:0}
.toc{background:#fff;border-radius:16px;padding:20px 24px;box-shadow:0 4px 16px rgba(0,0,0,.07)}
.toc h2{font-size:20px;text-shadow:none;margin-bottom:10px}
.toc ol{list-style:decimal;padding-left:22px;display:grid;gap:6px}
.toc a{color:var(--azul);text-decoration:none;font-weight:600}.toc a:hover{color:var(--rojo);text-decoration:underline}
.grupo{scroll-margin-top:90px}
.qa{background:#fff;border-radius:16px;padding:18px 22px;margin-top:14px;box-shadow:0 4px 16px rgba(0,0,0,.07)}
.qa h3{font:700 19px/1.35 var(--fuente);color:var(--azul);margin-bottom:8px}
.legal p+p,.legal p+ul,.legal p+ol,.legal ul+p,.legal ol+p{margin-top:10px}
.legal ul,.legal ol{padding-left:22px;display:grid;gap:6px;margin-top:6px}.legal ul{list-style:disc}.legal ol{list-style:decimal}
.legal a,.resumen a{color:var(--azul);font-weight:600}.legal code{font-size:.92em;background:#f3efea;padding:1px 5px;border-radius:5px}
.copy a{color:inherit;text-decoration:underline}.modal-p a{color:var(--azul)}
.qa p{font-size:16.5px;line-height:1.62}
.enlace-demo{margin-top:14px;font-weight:600}.enlace-demo a{color:var(--rojo)}
.pasos-l{counter-reset:p;display:grid;gap:14px}
.pasos-l li{counter-increment:p;background:#fff;border-radius:16px;padding:18px 22px 18px 74px;position:relative;box-shadow:0 4px 16px rgba(0,0,0,.07)}
.pasos-l li::before{content:counter(p);position:absolute;left:20px;top:18px;width:38px;height:38px;border-radius:50%;background:var(--rojo);color:#fff;font:900 20px/38px var(--titulo);text-align:center}
.pasos-l h3{font:700 19px/1.35 var(--fuente);color:var(--azul)}
.pasos-l p{margin-top:4px;line-height:1.55}
.glos{display:grid;gap:12px}
.glos div{background:#fff;border-radius:14px;padding:14px 20px;box-shadow:0 4px 16px rgba(0,0,0,.07)}
.glos dt{font-weight:700;color:var(--azul)}.glos dd{margin:4px 0 0;line-height:1.55}
.cierre{text-align:center;background:linear-gradient(135deg,#f4880c,#fcb30b);border-radius:24px;padding:34px 22px;color:var(--azul)}
.cierre h2{color:#fff;text-shadow:3px 3px 0 var(--rojo-vivo)}
.cierre p{margin-bottom:18px;font-size:17px;color:#1a1414}
body.pg-faq .pie{margin-top:0}

/* ───────── Ventana "Quiero una demo" ───────── */
.modal{border:0;border-radius:22px;padding:0;width:min(94vw,480px);max-height:92vh;box-shadow:0 24px 70px rgba(0,0,0,.35);color:var(--tinta);overflow:auto}
.modal::backdrop{background:rgba(3,13,51,.62)}
.modal-f,.modal-ok{padding:28px 26px 24px;display:grid;gap:12px;position:relative}
.modal-ok{text-align:center;justify-items:center}
.modal h2{font:900 26px/1.2 var(--titulo);color:var(--rojo);text-transform:uppercase}
.modal-s{font-size:15px;color:#555}
.modal label{display:grid;gap:4px;font-size:14px;font-weight:600;color:var(--azul)}
.modal input:not([type=hidden]),.modal select,.modal textarea{font:500 16px/1.3 var(--fuente);padding:11px 12px;border:1.5px solid #d6d2cd;border-radius:11px;background:#fff;color:var(--tinta);width:100%}
.modal input:focus,.modal select:focus,.modal textarea:focus{outline:3px solid rgba(211,20,30,.25);border-color:var(--rojo)}
.modal-x{position:absolute;right:12px;top:8px;border:0;background:none;font-size:32px;line-height:1;color:#777;padding:6px 10px}
.modal-b{height:48px;font-size:17px;margin-top:4px}
.modal-p{font-size:12.5px;color:#777;text-align:center}
.modal-e{background:#fde8ea;color:#9b0f19;border-radius:10px;padding:10px 12px;font-size:14px}
.modal-e[hidden],.modal-ok[hidden]{display:none}

/* Ahorita Va — capa de animación.
   Reglas: solo se activa con html.anim (la pone main.js si NO hay prefers-reduced-motion), así sin JS o con
   "reducir movimiento" todo se ve estático y completo. Usa las propiedades independientes translate/scale/rotate
   para no pisar los transform del layout. Nada cambia el flujo (sin layout shift). */

/* ── Barra de progreso de lectura ── */
.prog{position:fixed;left:0;top:0;height:4px;width:100%;z-index:200;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--rojo),#ffb400,var(--rojo));background-size:200% 100%}
html.anim .prog{animation:prog-brillo 3s linear infinite}
@keyframes prog-brillo{to{background-position:-200% 0}}

/* ── Aparición al hacer scroll ── (solo desplazamientos verticales o escala: uno horizontal saca el elemento de la
   pantalla antes de aparecer y vuelve la página desplazable de lado en móvil) */
html.anim [data-rv]{opacity:0;translate:0 46px;transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate .8s cubic-bezier(.2,.9,.25,1.25) var(--d,0s),scale .8s cubic-bezier(.2,.9,.25,1.25) var(--d,0s),rotate .8s cubic-bezier(.2,.9,.25,1.25) var(--d,0s)}
html.anim [data-rv="pop"]{translate:0 0;scale:.6;rotate:-6deg}
html.anim [data-rv].vis{opacity:1;translate:0 0;scale:1;rotate:0deg}

/* palabras de marcador amarillas: "sello" al aparecer */
html.anim .mk.sello{display:inline-block;animation:sello .9s cubic-bezier(.2,1.6,.4,1) backwards}
@keyframes sello{0%{scale:2.2;rotate:-12deg;opacity:0}60%{scale:.92;rotate:3deg;opacity:1}100%{scale:1;rotate:0deg}}

/* líneas de subrayado: se "dibujan" */
html.anim .sub-l,html.anim .hero .linea{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.6,0,.2,1) .35s}
html.anim .sub-l.vis,html.anim .hero .sl1 .linea{clip-path:inset(0 0 0 0)}
html.anim .hero .sl1 .linea{animation:dibujar 1s cubic-bezier(.6,0,.2,1) .5s backwards}
@keyframes dibujar{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ── Hero: entrada de la primera diapositiva (rápida, sin ocultar el LCP) ── */
html.anim .hero .sl1 .pil{animation:entra-pop .7s cubic-bezier(.2,1.5,.4,1) .05s backwards}
html.anim .hero .sl1 .tit .ln{animation:entra-lin .75s cubic-bezier(.2,.9,.25,1.15) backwards}
html.anim .hero .sl1 .tit .ln:nth-child(2){animation-delay:.1s}
html.anim .hero .sl1 .tit .ln:nth-child(3){animation-delay:.2s}
html.anim .hero .sl1 .lead{animation:entra-lin .7s ease .3s backwards}
html.anim .hero .sl1 .btn{animation:entra-lin .7s ease .4s backwards}
html.anim .hero .sl1 .btn + .btn{animation-delay:.48s}
html.anim .hero .sl1 .rev{animation:entra-lin .7s ease .5s backwards}
@keyframes entra-pop{from{scale:.5;opacity:0}to{scale:1;opacity:1}}
@keyframes entra-lin{from{translate:-34px 0;opacity:0}to{translate:0 0;opacity:1}}
/* personaje / tienda del hero "respirando" anclado abajo (si flota, se despega del borde inferior del hero).
   Sin re-entrada al cambiar de diapositiva: el texto entrando de lado contra el carrusel se ve descuadrado. */
html.anim .hero .s-sub{transform-origin:50% 100%;animation:respira 4.5s ease-in-out infinite}
@keyframes respira{0%,100%{scale:1}50%{scale:1.025}}

/* ── Detalles que siempre están vivos ── */
html.anim .palitos,html.anim .pm,html.anim .ben .pal{animation:menea 2.4s ease-in-out infinite;transform-origin:0 100%}
@keyframes menea{0%,100%{rotate:0deg}25%{rotate:-12deg}75%{rotate:9deg}}
html.anim .cor{animation:latido 1.3s ease-in-out infinite;transform-origin:50% 60%}
@keyframes latido{0%,100%{scale:1}15%{scale:1.3}30%{scale:1}45%{scale:1.18}}
html.anim .rev .est,html.anim .te .st5{animation:destello 3.2s ease-in-out infinite}
@keyframes destello{0%,100%{filter:none}50%{filter:drop-shadow(0 0 6px rgba(255,190,0,.9)) brightness(1.15)}}
html.anim .moto{animation:moto 4.2s ease-in-out infinite}
@keyframes moto{0%{translate:-38px 0;rotate:0deg}45%{translate:22px -5px;rotate:-4deg}55%{translate:26px 0;rotate:2deg}100%{translate:-38px 0;rotate:0deg}}
html.anim .como .blob{animation:gira 22s linear infinite}
html.anim .como .p2 .blob{animation-direction:reverse;animation-duration:26s}
@keyframes gira{to{rotate:360deg}}
html.anim .fl1,html.anim .fl2{animation:empuja 1.8s ease-in-out infinite}
html.anim .fl2{animation-delay:.9s}
@keyframes empuja{0%,100%{translate:0 0}50%{translate:10px -4px}}
html.anim .ben li .ic{animation:rebota 3s ease-in-out infinite}
html.anim .ben li:nth-child(2) .ic{animation-delay:.25s}html.anim .ben li:nth-child(3) .ic{animation-delay:.5s}
html.anim .ben li:nth-child(4) .ic{animation-delay:.75s}html.anim .ben li:nth-child(5) .ic{animation-delay:1s}
html.anim .ben li:nth-child(6) .ic{animation-delay:1.25s}
@keyframes rebota{0%,70%,100%{translate:0 0}80%{translate:0 -9px}90%{translate:0 0}95%{translate:0 -3px}}

/* ── Botones: brillo que cruza + pulso del CTA principal ── */
html.anim .btn.btn-rojo{background-image:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.42) 50%,transparent 58%);
  background-size:300% 100%;background-repeat:no-repeat;background-position:150% 0;animation:brillo 3.6s ease-in-out infinite}
@keyframes brillo{0%,55%{background-position:150% 0}85%,100%{background-position:-50% 0}}
html.anim .btn:hover{scale:1.05}
html.anim .btn:active{scale:.96}
html.anim .btn img{transition:translate .25s cubic-bezier(.2,1.6,.4,1)}
html.anim .btn:hover img{translate:5px 0}
html.anim .cta .btn.btn-rojo{animation:brillo 3.6s ease-in-out infinite,pulso 2.2s ease-in-out infinite}
@keyframes pulso{0%,100%{box-shadow:0 0 0 0 rgba(211,20,30,.55)}60%{box-shadow:0 0 0 16px rgba(211,20,30,0)}}

/* ── Tarjetas: elevación y rebote del ícono al pasar el mouse ── */
@media (hover:hover) and (pointer:fine){
  html.anim .pas,html.anim .neg li,html.anim .te{transition:translate .35s cubic-bezier(.2,1.4,.4,1),scale .35s cubic-bezier(.2,1.4,.4,1),filter .35s}
  html.anim .pas:hover,html.anim .te:hover{translate:0 -10px;filter:drop-shadow(0 18px 22px rgba(0,0,0,.14))}
  html.anim .neg li:hover{translate:0 -10px;scale:1.04}
  html.anim .neg li:hover .im,html.anim .pas:hover .ico{animation:salto .6s cubic-bezier(.2,1.6,.4,1)}
  html.anim .ben li{transition:translate .3s cubic-bezier(.2,1.4,.4,1)}
  html.anim .ben li:hover{translate:0 -8px}
  html.anim .ben li:hover .ic{animation:salto .6s cubic-bezier(.2,1.6,.4,1)}
}
@keyframes salto{0%{scale:1;rotate:0deg}40%{scale:1.22;rotate:-8deg}70%{scale:.95;rotate:4deg}100%{scale:1;rotate:0deg}}

/* números 01/02/03 */
html.anim .pas.vis .n{animation:entra-pop .6s cubic-bezier(.2,1.6,.4,1) .25s backwards}

/* ── Confeti al enviar el formulario ── */
.confeti{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden}
.confeti i{position:absolute;top:-20px;width:10px;height:14px;border-radius:2px;animation:cae linear forwards}
@keyframes cae{to{translate:var(--x) 110vh;rotate:var(--r)}}

@media (prefers-reduced-motion:reduce){
  .prog,.confeti{display:none}
}