/* UNO Sabe / Plus 91 — landing informativa; sin navegación ni redirecciones.
   Recreación en código de los PDF de Figma: desktop (frame 1440) y móvil (frame 402).
   Todas las medidas son "px de diseño" multiplicados por --u, que escala el frame al viewport:
   - desktop (>=900px): --u = ancho útil/1440, sin tope: el diseño escala proporcional en cualquier pantalla (1366, 1920, 2560...);
   - móvil/tablet (<900px): --u = 100vw/402, máximo 1.5px (en tablet el frame móvil se centra).
   --cx es el borde izquierdo del frame dentro de una sección a todo el ancho. */

@font-face{font-family:"Archivo";src:url("assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo-latin-wdth-italic.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap}

:root{
  --navy:#002e6d;--sky:#3996d0;--yellow:#f8d000;--gold:#f5d32c;--red:#cc3628;--paper:#f0f4f7;
  --vw:100vw;--u:calc(var(--vw) / 1440);--frame:1440;
  --cx:calc(50% - var(--frame) * var(--u) / 2);
}
@media (max-width:899.98px){:root{--u:min(1.5px,calc(var(--vw) / 402));--frame:402}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--navy);font-family:"Archivo",Arial,Helvetica,sans-serif;font-stretch:106%;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,p,ul,dl,dd{margin:0}
ul{padding:0;list-style:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Saltos de línea propios de cada PDF: .d solo en desktop, .m solo en móvil */
@media (min-width:900px){br.m{display:none}}
@media (max-width:899.98px){br.d{display:none}}

/* Titulares: Archivo Black itálica (equivalente libre de la Univers Black Extended Oblique del diseño) */
.slogan,.what__title,.tagline,.benefits__title,.benefit__text,.price,.faq__title,.stations__title{font-weight:900;font-style:italic;font-stretch:100%;text-transform:uppercase;line-height:1;word-spacing:.1em}

/* ---------- Header ---------- */
.site-header{height:calc(129 * var(--u));background:var(--navy);display:flex;align-items:center;padding-left:calc(var(--cx) + 86 * var(--u))}
.site-header__logo{width:calc(206 * var(--u))}

/* ---------- Hero ---------- */
.hero{position:relative;height:calc(532 * var(--u));overflow:hidden;background:var(--navy);isolation:isolate}
.hero__photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 91%;z-index:-3}
.hero__panel,.hero__corner{position:absolute;left:0;top:0;opacity:.82;pointer-events:none}
.hero__panel{z-index:-2;height:100%;width:calc(var(--cx) + 818 * var(--u));
  clip-path:polygon(calc(100% - 420 * var(--u)) 0,calc(100% - 3 * var(--u)) 0,calc(100% - 252 * var(--u)) 100%,0 100%,0 calc(399 * var(--u)),calc(100% - 818 * var(--u)) calc(399 * var(--u)));
  background:
    radial-gradient(ellipse calc(330 * var(--u)) calc(260 * var(--u)) at calc(100% - 20 * var(--u)) 0,#52bdf0 0%,rgba(46,131,192,.75) 38%,rgba(7,49,124,0) 100%),
    linear-gradient(235deg,#0d4790 0%,#062a78 22%,#00135d 42%,#000a56 60%,#021a5d 80%,#092d6a 100%)}
.hero__corner{z-index:-1;height:calc(403 * var(--u));width:calc(var(--cx) + 400 * var(--u));
  clip-path:polygon(0 0,100% 0,calc(100% - 400 * var(--u)) 100%,0 100%);
  background:linear-gradient(to bottom left,#3a96d0 0%,#13447f 30%,#031c55 55%,#000a3c 75%,#00001c 100%)}
.hero__content{position:absolute;inset:0;pointer-events:none}
.slogan{position:absolute;left:calc(var(--cx) + 121 * var(--u));top:calc(92 * var(--u));font-size:calc(77 * var(--u));color:#fff}
.slogan__line{display:block;line-height:.69;white-space:nowrap}
.slogan__line--1{font-stretch:93%}
.slogan__line--2{font-size:.675em;font-weight:600;font-stretch:78%;margin:.19em 0 0 1.558em}
.slogan__line--3{font-stretch:93%;margin:.196em 0 0 1.506em;color:var(--yellow)}
.hero__brand{position:absolute;left:calc(var(--cx) + 156 * var(--u));top:calc(331 * var(--u));width:calc(441 * var(--u))}
.hero__play{position:absolute;z-index:2;left:calc(var(--cx) + 1003 * var(--u));top:calc(227 * var(--u));width:calc(104 * var(--u));height:calc(104 * var(--u));padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:transform .2s ease,filter .2s ease}
.hero__play img{width:100%;height:100%}
.hero__play:hover{transform:scale(1.08);filter:drop-shadow(0 0 16px #ffffff90)}
.hero__play:focus-visible{outline:4px solid var(--yellow);outline-offset:5px}

/* ---------- ¿Qué es Plus 91? ---------- */
.what{position:relative;height:calc(712 * var(--u));overflow:hidden;background:var(--paper);isolation:isolate}
.what__shape{position:absolute;z-index:-2;top:0;bottom:0;right:0;left:calc(var(--cx) + 777 * var(--u));
  clip-path:polygon(calc(408 * var(--u)) 0,100% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,#0b3a86 0%,#062e79 45%,#022877 100%)}
.what__shape::before,.what__shape::after{content:"";position:absolute;inset:0}
.what__shape::before{clip-path:polygon(calc(575 * var(--u)) 0,100% 0,100% 100%,calc(333 * var(--u)) 100%,calc(644 * var(--u)) calc(126 * var(--u)),calc(529 * var(--u)) calc(126 * var(--u)));
  background:linear-gradient(180deg,#123f80 0%,#0b347a 40%,#002577 100%)}
.what__shape::after{background:radial-gradient(circle at calc(502 * var(--u)) calc(93 * var(--u)),rgba(72,186,255,.9) 0,rgba(35,120,205,.45) calc(55 * var(--u)),rgba(10,60,140,0) calc(150 * var(--u)))}
.what__pump{position:absolute;z-index:-1;left:calc(var(--cx) + 660 * var(--u));top:calc(23 * var(--u));width:calc(689 * var(--u));max-width:none;pointer-events:none}
.what__inner{width:calc(var(--frame) * var(--u));margin:0 auto;padding:calc(71.6 * var(--u)) 0 0 calc(107 * var(--u))}
.what__title span{display:block}
.what__title-top{font-size:calc(64 * var(--u));color:var(--sky)}
.what__title-main{font-size:calc(96 * var(--u));font-stretch:102%;margin-top:calc(-5.8 * var(--u))}
.what__text{margin-top:calc(58.2 * var(--u));font-size:calc(24 * var(--u));line-height:calc(30 * var(--u))}

/* "No es regular. Es [Plus 91]" — mismas proporciones en ambos PDF; --k escala el bloque */
.tagline{--k:var(--u);text-transform:none;position:relative;width:calc(466 * var(--k));height:calc(158 * var(--k));margin-top:calc(50 * var(--u));color:var(--navy);font-size:calc(48.4 * var(--k))}
.tagline__bar{position:absolute;background:var(--gold);white-space:nowrap}
.tagline__bar--top{left:calc(26.7 * var(--k));top:calc(3.3 * var(--k));width:calc(438.3 * var(--k));height:calc(75.2 * var(--k));padding:0 0 calc(4.6 * var(--k)) calc(42.1 * var(--k));line-height:calc(70.6 * var(--k));clip-path:polygon(5.7% 0,100% 0,95.2% 100%,0 100%)}
.tagline__bar--es{left:calc(1 * var(--k));top:calc(86.8 * var(--k));width:calc(146 * var(--k));height:calc(71.5 * var(--k));padding-left:calc(46.4 * var(--k));line-height:calc(55.1 * var(--k));clip-path:polygon(16.2% 0,100% 0,84.4% 100%,0 100%)}
.tagline__badge{position:absolute;left:calc(150 * var(--k));top:calc(80 * var(--k));width:calc(288 * var(--k));height:calc(93 * var(--k));border-radius:calc(5.3 * var(--k));background:var(--red)}
.tagline__badge img{position:absolute;left:8.9%;top:16.5%;width:82.2%}

/* ---------- Regular no basta ---------- */
.benefits{position:relative;height:calc(680 * var(--u));overflow:hidden;background:linear-gradient(90deg,#03498f 0,var(--navy) 50%);color:#fff;isolation:isolate}
.benefits__photo{position:absolute;z-index:-2;left:calc(var(--cx) + 335 * var(--u));top:calc(35 * var(--u));width:max(calc(1108 * var(--u)),calc(100% - var(--cx) - 335 * var(--u)));max-width:none}
.benefits__shape{position:absolute;z-index:-1;left:calc(var(--cx) - 140 * var(--u));top:0;width:calc(1501 * var(--u));height:calc(781 * var(--u));
  clip-path:polygon(9.6% 0,95.3% 0,75.2% 72.7%,100% 79.6%,94.3% 100%,0 100%,0 87.5%,2.3% 79.8%,0 77.5%,0 25%);
  background:radial-gradient(ellipse 45% 55% at 18% 3%,#0a7bd0 0%,rgba(10,123,208,0) 100%),linear-gradient(100deg,#0354a3 0%,#0562b2 25%,#0758a4 45%,#08448a 65%,#0b3272 90%)}
.benefits__inner{width:calc(var(--frame) * var(--u));margin:0 auto;padding-top:calc(82.8 * var(--u))}
.benefits__title{font-size:calc(96 * var(--u));color:var(--yellow);text-align:center}
.benefits__list{display:grid;grid-template-columns:calc(314 * var(--u)) calc(374 * var(--u)) calc(386 * var(--u));margin:calc(32.2 * var(--u)) 0 0 calc(192 * var(--u))}
.benefit{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.benefit+.benefit::before{content:"";position:absolute;left:0;top:calc(26 * var(--u));height:calc(230 * var(--u));width:1px;background:rgba(150,200,255,.35)}
.benefit img{width:calc(142 * var(--u));height:calc(142 * var(--u))}
.benefit__text{margin-top:calc(18.4 * var(--u));font-size:calc(36 * var(--u));line-height:calc(45 * var(--u))}
.benefit__text span{display:block}
.benefit__text::after{content:"";display:block;width:calc(116 * var(--u));height:calc(9 * var(--u));margin:calc(17.6 * var(--u)) auto 0;background:var(--gold);transform:skewX(-20deg)}
.price{--k:var(--u);position:relative;width:calc(761 * var(--k));height:calc(84 * var(--k));margin:calc(44 * var(--u)) 0 0 calc(312 * var(--u));color:var(--navy);font-size:calc(44.4 * var(--k))}
.price__text{position:absolute;left:calc(1.3 * var(--k));top:calc(1.7 * var(--k));width:calc(758.7 * var(--k));height:calc(79.9 * var(--k));line-height:calc(79.9 * var(--k));text-align:center;white-space:nowrap;background:var(--gold);clip-path:polygon(4.65% 0,100% 0,95.65% 100%,0 100%)}

/* ---------- Preguntas frecuentes + estaciones ---------- */
.information{background:var(--paper)}
.information__inner{width:calc(1230 * var(--u));margin:0 auto}
.faq__title{padding-top:calc(60.6 * var(--u));font-size:calc(64 * var(--u));font-stretch:96%}
.faq__title-light{color:var(--sky)}
.faq__list{margin-top:calc(36.4 * var(--u))}
.faq__item{--px:calc(50 * var(--u));--pt:calc(17 * var(--u));--pb:calc(21 * var(--u));border:calc(3 * var(--u)) solid var(--sky);border-radius:calc(16 * var(--u));background:#fff;overflow:hidden;transition:box-shadow .2s ease}
.faq__item:hover{box-shadow:0 6px 18px rgba(0,46,109,.10)}
.faq__item+.faq__item{margin-top:calc(24 * var(--u))}
/* Pregunta (siempre visible) */
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:calc(16 * var(--u));padding:var(--pt) var(--px) var(--pb);list-style:none;cursor:pointer;font-size:calc(24 * var(--u));line-height:calc(30 * var(--u));font-weight:700;font-stretch:81%;-webkit-tap-highlight-color:transparent}
.faq__q::-webkit-details-marker{display:none}
.faq__q::marker{content:''}
.faq__q:hover .faq__q-text{color:var(--sky)}
.faq__q:focus-visible{outline:3px solid var(--sky);outline-offset:-6px;border-radius:calc(12 * var(--u))}
.faq__chev{flex:none;width:calc(28 * var(--u));height:calc(28 * var(--u));min-width:18px;min-height:18px;fill:var(--sky);transition:transform .3s ease}
.faq__item[open] .faq__chev{transform:rotate(180deg)}
.faq__item[open] .faq__q{padding-bottom:0}
/* Respuesta (desplegable) */
.faq__a{padding:calc(5 * var(--u)) var(--px) var(--pb);font-size:calc(24 * var(--u));line-height:calc(30 * var(--u))}
/* Apertura suave donde el navegador lo soporta (Chrome/Edge 131+); en el resto abre al instante */
:root{interpolate-size:allow-keywords}
.faq__item::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete}
.faq__item[open]::details-content{block-size:auto}
/* Estaciones desplegables: la barra azul del título abre y cierra el listado (misma apertura suave que las FAQ) */
.stations__details::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
.stations__details[open]::details-content{block-size:auto}
.stations__summary{display:block;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stations__summary::-webkit-details-marker{display:none}
.stations__summary::marker{content:''}
.stations__summary:focus-visible{outline:none}
.stations__summary:focus-visible .stations__title{outline:3px solid var(--sky);outline-offset:4px}
.stations__summary:hover .stations__title{background:#0b4a99}
.stations__title{position:relative;padding-right:calc(44 * var(--u));transition:background .2s ease}
.stations__title-img{width:calc(590 * var(--u))!important}
.stations__chev{position:absolute;right:calc(24 * var(--u));top:50%;width:calc(36 * var(--u));height:calc(36 * var(--u));min-width:16px;min-height:16px;transform:translateY(-50%);fill:#fff;transition:transform .3s ease}
.stations__details[open] .stations__chev{transform:translateY(-50%) rotate(180deg)}
.stations__title{display:flex;align-items:center;justify-content:center;width:calc(748 * var(--u));height:calc(81 * var(--u));margin:calc(50 * var(--u)) auto 0;border-radius:calc(20 * var(--u));background:var(--navy);color:#fff;font-size:calc(48 * var(--u));font-stretch:97%;text-align:center;text-transform:none;white-space:nowrap}
.stations__title-img{display:block;width:calc(627 * var(--u));height:auto;max-width:none;pointer-events:none;user-select:none}
.stations__list{display:grid;grid-template-columns:calc(361 * var(--u)) calc(361 * var(--u)) auto;grid-auto-flow:row dense;margin-top:calc(35 * var(--u));padding:calc(39 * var(--u)) 0 calc(46 * var(--u)) calc(83 * var(--u));border:calc(5 * var(--u)) solid var(--navy);border-radius:calc(24 * var(--u));font-size:calc(24 * var(--u));line-height:calc(30 * var(--u))}
/* Orden por columnas igual al PDF: 1–29 | 30–58 | 59–87 */
.stations__list li{grid-column:1;white-space:nowrap}
.stations__list li:nth-child(n+30){grid-column:2}
.stations__list li:nth-child(n+59){grid-column:3}
.footer{display:flex;flex-direction:column;align-items:center;padding:calc(52 * var(--u)) 0 calc(48 * var(--u))}
.footer__logo{width:calc(181 * var(--u));height:auto}
/* Cada red es un enlace propio; la zona táctil nunca baja de 44×44 px */
.footer__social{--icon:calc(30 * var(--u));--hit:max(44px,calc(46 * var(--u)));display:flex;justify-content:center;gap:calc(4 * var(--u));margin-top:calc(18 * var(--u) - (var(--hit) - var(--icon)) / 2)}
.footer__social a{display:flex;align-items:center;justify-content:center;width:var(--hit);height:var(--hit);border-radius:50%}
.footer__social a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.footer__social img{width:var(--icon);height:var(--icon);transition:transform .15s ease}
.footer__social a:hover img{transform:scale(1.08)}

/* ---------- Móvil y tablet: frame de 402 del PDF móvil ---------- */
@media (max-width:899.98px){
  .site-header{height:calc(65 * var(--u));justify-content:center;padding-left:0}
  .site-header__logo{width:calc(118 * var(--u))}

  .hero{--hu:max(var(--u),calc(100vw / 484));height:calc(298 * var(--u))}
  .hero__photo{inset:auto;left:calc(50% - 494 * var(--hu));top:calc(-67 * var(--hu));width:calc(736 * var(--hu));height:auto;object-fit:fill}
  .hero__corner{display:none}
  .hero__panel{width:100%;opacity:.86;clip-path:polygon(0 35.2%,94.5% 95%,100% 87.9%,100% 100%,0 100%);
    background:linear-gradient(105deg,#4aa6dd 0%,#2569b4 22%,#0f3a92 45%,#0a1f78 70%,#06146a 100%)}
  .slogan{left:calc(var(--cx) + 20.2 * var(--u));top:calc(178.9 * var(--u));font-size:calc(21.04 * var(--u))}
  .hero__brand{left:calc(var(--cx) + 19 * var(--u));top:calc(238 * var(--u));width:calc(137 * var(--u))}
  .hero__play{left:calc(var(--cx) + 179 * var(--u));top:calc(90 * var(--u));width:calc(44 * var(--u));height:calc(44 * var(--u))}

  .what{height:calc(530 * var(--u))}
  .what__shape{left:calc(var(--cx) + 167 * var(--u));clip-path:polygon(calc(303 * var(--u)) 0,100% 0,100% 100%,0 100%)}
  .what__shape::before{clip-path:polygon(calc(418 * var(--u)) 0,100% 0,100% 100%,calc(242 * var(--u)) 100%,calc(457 * var(--u)) calc(122 * var(--u)),calc(372 * var(--u)) calc(122 * var(--u)))}
  .what__shape::after{background:radial-gradient(circle at calc(352 * var(--u)) calc(97 * var(--u)),rgba(72,186,255,.8) 0,rgba(35,120,205,.4) calc(35 * var(--u)),rgba(10,60,140,0) calc(95 * var(--u)))}
  .what__pump{left:calc(var(--cx) + 154 * var(--u));top:calc(224 * var(--u));width:calc(309 * var(--u));transform:scaleX(-1)}
  .what__inner{padding:calc(39.3 * var(--u)) 0 0 calc(33 * var(--u))}
  .what__title{width:calc(312 * var(--u));text-align:center}
  .what__title-top{font-size:calc(20 * var(--u))}
  .what__title-main{font-size:calc(40 * var(--u));margin-top:calc(1.3 * var(--u))}
  .what__text{margin-top:calc(28.9 * var(--u));font-size:calc(15 * var(--u));line-height:calc(19 * var(--u))}
  .tagline{--k:calc(.3863 * var(--u));margin-top:calc(85.5 * var(--u))}

  .benefits{height:calc(365 * var(--u))}
  .benefits__photo{left:calc(var(--cx) - 294 * var(--u));top:calc(-16 * var(--u));width:calc(738 * var(--u))}
  .benefits__shape{left:calc(var(--cx) - 441 * var(--u));width:calc(848 * var(--u));height:calc(441 * var(--u))}
  .benefits__inner{padding-top:calc(41 * var(--u))}
  .benefits__title{font-size:calc(24 * var(--u))}
  .benefits__list{display:block;margin:calc(19 * var(--u)) 0 0 calc(33 * var(--u))}
  .benefit{flex-direction:row;text-align:left}
  .benefit+.benefit{margin-top:calc(30.5 * var(--u))}
  .benefit+.benefit::before{left:calc(1 * var(--u));top:calc(-15 * var(--u));width:calc(162 * var(--u));height:calc(1.5 * var(--u));background:rgba(57,150,208,.9)}
  .benefit img{width:calc(46.5 * var(--u));height:calc(46.5 * var(--u))}
  .benefit__text{margin:0 0 0 calc(12.5 * var(--u));font-size:calc(20 * var(--u));line-height:1;white-space:nowrap}
  .benefit__text span{display:inline}
  .benefit__text::after{display:none}
  .price{--k:calc(.385 * var(--u));margin:calc(26 * var(--u)) 0 0 calc(56 * var(--u))}

  .information__inner{width:calc(402 * var(--u))}
  .faq__title{padding:calc(37.3 * var(--u)) calc(10 * var(--u)) 0 0;text-align:center}
  .faq__title span{display:block}
  .faq__title-light{font-size:calc(20 * var(--u))}
  .faq__title-dark{font-size:calc(40 * var(--u));margin-top:calc(2.3 * var(--u))}
  .faq__list{margin:calc(24.4 * var(--u)) calc(30 * var(--u)) 0 calc(34 * var(--u))}
  .faq__item{--px:calc(19 * var(--u));--pt:calc(14.6 * var(--u));--pb:calc(14.4 * var(--u));border-width:calc(3 * var(--u));border-radius:calc(14 * var(--u))}
  .faq__q{gap:calc(8 * var(--u));padding-right:calc(12 * var(--u))}
  .faq__a{padding-right:calc(10 * var(--u))}
  .faq__chev{width:calc(22 * var(--u));height:calc(22 * var(--u))}
  .faq__item+.faq__item{margin-top:calc(21 * var(--u))}
  .faq__q{font-size:calc(16 * var(--u));line-height:calc(20 * var(--u))}
  .faq__a{padding-top:calc(6 * var(--u));font-size:calc(13 * var(--u));line-height:calc(16 * var(--u))}
  .stations__title{width:calc(311 * var(--u));height:calc(46 * var(--u));margin-top:calc(25 * var(--u));border-radius:calc(10 * var(--u));font-size:calc(20 * var(--u))}
  .stations__title-img{width:calc(261 * var(--u))}
  .stations__title{padding-right:calc(24 * var(--u))}
  .stations__title-img{width:calc(238 * var(--u))!important}
  .stations__chev{right:calc(10 * var(--u));width:calc(20 * var(--u));height:calc(20 * var(--u))}
  .stations__list{grid-template-columns:calc(151 * var(--u)) auto;margin:calc(27 * var(--u)) calc(23 * var(--u)) 0 calc(31 * var(--u));padding:calc(22.5 * var(--u)) 0 calc(22.5 * var(--u)) calc(15 * var(--u));border-width:calc(3 * var(--u));border-radius:calc(16 * var(--u));font-size:calc(12 * var(--u));line-height:calc(15 * var(--u))}
  /* Móvil: dos columnas parejas (1–44 | 45–87) en el mismo orden, en vez de 58 | 29 */
  .stations__list li:nth-child(n){grid-column:1}
  .stations__list li:nth-child(n+45){grid-column:2}
  .footer{padding:calc(32 * var(--u)) 0 calc(20 * var(--u))}
  .footer__logo{width:calc(77 * var(--u))}
  .footer__social{--icon:calc(20 * var(--u));--hit:44px;gap:0;margin-top:calc(8 * var(--u) - (var(--hit) - var(--icon)) / 2)}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero__play{transition:none}}

/* ---------- Video en el hero (sin modal ni fondo oscurecido) ----------
   .is-mini: mini pantalla flotante (estilo YouTube) mientras el hero no está a la vista. */
.vp{position:absolute;z-index:6;left:calc(var(--cx) + 720 * var(--u));top:calc(86 * var(--u));width:calc(640 * var(--u));aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;color:#fff;font-stretch:100%;box-shadow:0 18px 44px rgba(0,20,50,.45),0 0 0 1px rgba(255,255,255,.35);opacity:0;visibility:hidden;transform:scale(.97);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s}
.hero.is-active .vp{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease}
.hero__play{transition:transform .2s ease,filter .2s ease,opacity .3s ease}
.hero.is-active:not(.is-paused) .hero__play{opacity:0;visibility:hidden;pointer-events:none}
.vp video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000;cursor:pointer}
.vp button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.vp button:focus-visible,.vp__seek:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.vp__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transition:background .15s ease,opacity .3s ease}
.vp__icon:hover{background:rgba(255,255,255,.18)}
.vp svg{display:block;width:24px;height:24px;fill:currentColor}
.vp .i-play,.vp .i-sound{display:none}
.vp.is-paused .i-play,.vp:not(.is-muted) .i-sound{display:block}
.vp.is-paused .i-pause,.vp:not(.is-muted) .i-muted{display:none}
.vp__close,.vp__expand{position:absolute;top:8px;background:rgba(0,20,50,.55)}
.vp__close{right:8px}
.vp__expand{left:8px;display:none}
.vp__close:hover,.vp__expand:hover{background:rgba(0,46,109,.9)}
.vp__bigplay{position:absolute;z-index:2;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;display:none;align-items:center;justify-content:center;padding:0 0 0 4px;border:2px solid #fff;border-radius:50%;background:rgba(0,46,109,.75);cursor:pointer;transition:transform .15s ease}
.vp__bigplay:hover{transform:scale(1.06)}
.vp__bigplay svg{width:34px;height:34px}
.vp.is-paused .vp__bigplay{display:flex}
.vp__unmute{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 10px;border:0;border-radius:999px;background:var(--yellow);color:var(--navy)!important;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.vp__unmute svg{width:20px;height:20px}
.vp__unmute[hidden]{display:none}
.vp__controls{position:absolute;left:0;right:0;bottom:0;padding:30px 8px 4px;pointer-events:none;background:linear-gradient(to top,rgba(0,15,40,.78),rgba(0,15,40,0));transition:opacity .3s ease}
.vp__controls>*{pointer-events:auto}
.vp__row{display:flex;align-items:center;gap:2px}
.vp__fs{margin-left:auto}
.vp .i-fs-exit,.vp.is-fullscreen .i-fs-enter{display:none}
.vp.is-fullscreen .i-fs-exit{display:block}
/* Pantalla completa: la tarjeta entera con sus controles */
.vp:fullscreen{width:100vw!important;max-width:none!important;height:100vh;aspect-ratio:auto;border-radius:0;box-shadow:none;transform:none;cursor:auto}
.vp:fullscreen .vp__expand{display:none!important}
.vp:fullscreen video{object-fit:contain}
/* El video ocupa exactamente el banner del hero, con sus mismas dimensiones, en todos los anchos.
   En pausa se oculta y vuelve a verse la imagen original del banner (colaborador, slogan) con su botón Play,
   que continúa desde el mismo punto. En la mini pantalla la pausa no la oculta. */
.vp{left:0;top:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;transform:none}
.vp video{object-fit:cover}
.hero.is-active.is-paused:not(.is-mini) .vp{opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
@media (min-width:900px){
  .vp__unmute{top:18px;left:calc(var(--cx) + 121 * var(--u));min-height:44px;font-size:15px}
  .vp__close{top:16px;right:16px}
  .vp__controls{padding:48px 16px 8px}
  .vp__bigplay{width:88px;height:88px;margin:-44px 0 0 -44px}
  .vp__bigplay svg{width:40px;height:40px}
}
}
.vp__time{margin-left:6px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.vp__seek{--p:0%;-webkit-appearance:none;appearance:none;display:block;width:calc(100% - 16px);height:16px;margin:0 8px;padding:0;background:transparent;cursor:pointer}
.vp__seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--yellow) var(--p),rgba(255,255,255,.35) var(--p))}
.vp__seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border:0;border-radius:50%;background:var(--yellow)}
.vp__seek::-moz-range-track{height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.vp__seek::-moz-range-progress{height:4px;border-radius:2px;background:var(--yellow)}
.vp__seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--yellow)}
.vp.controls-hidden .vp__controls,.vp.controls-hidden .vp__close,.vp.controls-hidden .vp__expand{opacity:0;pointer-events:none}
.vp.controls-hidden video{cursor:none}
@media (max-width:899.98px){
  .vp__unmute{min-height:36px;font-size:13px}
  .vp__bigplay{width:60px;height:60px;margin:-30px 0 0 -30px}
  .vp__bigplay svg{width:28px;height:28px}
}
/* Mini pantalla flotante */
.hero.is-mini{z-index:50}
.hero.is-mini .vp{position:fixed;left:auto;top:auto;right:20px;bottom:20px;width:400px;max-width:calc(100vw - 32px);height:auto;aspect-ratio:16/9;border-radius:12px;box-shadow:0 14px 36px rgba(0,20,50,.45),0 0 0 1px rgba(255,255,255,.35);animation:mini-in .25s ease both}
.hero.is-mini .vp video{object-fit:contain}
.hero.is-mini .vp__close{top:8px;right:8px}
.hero.is-mini .vp__expand{display:inline-flex}
.hero.is-mini .vp__icon{width:38px;height:38px}
.hero.is-mini .vp svg{width:22px;height:22px}
.hero.is-mini .vp__unmute{left:52px;top:8px;min-height:34px;padding:0 10px 0 8px;font-size:12px}
.hero.is-mini .vp__unmute svg{width:18px;height:18px}
.hero.is-mini .vp__bigplay{top:42%;width:52px;height:52px;margin:-26px 0 0 -26px}
.hero.is-mini .vp__controls{padding-top:22px}
@media (max-width:899.98px){
  /* Mini pantalla compacta en móvil: solo íconos */
  .hero.is-mini .vp{right:12px;bottom:12px;width:min(220px,calc(100vw - 24px))}
  .hero.is-mini .vp__time{display:none}
  .hero.is-mini .vp__icon{width:34px;height:34px}
  .hero.is-mini .vp svg{width:20px;height:20px}
  .hero.is-mini .vp__close,.hero.is-mini .vp__expand{top:4px}
  .hero.is-mini .vp__close{right:4px}
  .hero.is-mini .vp__expand{left:4px}
  .hero.is-mini .vp__unmute{top:4px;left:42px;width:34px;height:34px;min-height:34px;padding:0;gap:0;justify-content:center;font-size:0}
  .hero.is-mini .vp__bigplay{top:45%;width:42px;height:42px;margin:-21px 0 0 -21px}
  .hero.is-mini .vp__bigplay svg{width:22px;height:22px}
  .hero.is-mini .vp__controls{padding:14px 4px 0}
  .hero.is-mini .vp__seek{height:10px}
}
/* Arrastre de la mini pantalla y zona para soltar y cerrar (táctil) */
.hero.is-mini .vp{touch-action:none;cursor:grab}
.hero.is-mini .vp.is-dragging{cursor:grabbing;transition:none;box-shadow:0 22px 50px rgba(0,20,50,.55)}
.hero.is-mini .vp.is-dragging video{cursor:grabbing}
.hero.is-mini .vp.is-dismissing{opacity:0;scale:.8;transition:opacity .2s ease,scale .2s ease}
.vp-dropzone{position:fixed;left:50%;bottom:28px;z-index:60;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;font:700 12px/1 "Archivo",Arial,sans-serif;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.vp-dropzone.is-visible{opacity:1;transform:translate(-50%,0)}
.vp-dropzone__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:rgba(0,20,50,.75);border:2px solid #fff;transition:transform .15s ease,background .15s ease}
.vp-dropzone__icon svg{width:26px;height:26px;fill:#fff}
.vp-dropzone.is-hot .vp-dropzone__icon{transform:scale(1.2);background:var(--red)}
@keyframes mini-in{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vp,.hero.is-mini .vp,.vp__controls,.hero__content{transition:none;animation:none}}

/* Fondo diagonal oficial de "Regular no basta" (forma del cliente, no contiene texto) */
.benefits__shape{clip-path:none;background:url("assets/benefits-shape.webp") 0 0/100% 100% no-repeat}

/* ===== Titulares con las piezas oficiales del cliente (PNG 3x, nítidas) =====
   Reproducen la tipografía de marca del diseño. El texto real sigue en el HTML (accesible y para buscadores),
   solo se vuelve transparente. Posiciones medidas sobre los PDF con detección automática. */
.information{position:relative}
.tx{position:absolute;z-index:3;height:auto;max-width:none;pointer-events:none;user-select:none}
.tx-m{display:none}
/* El slogan, "No es regular. Es" y "Y todo, al mismo precio" se muestran como texto real (las piezas en imagen venían borrosas de origen) */
.benefits__title,.faq__title,.faq__title *,.stations__title{color:transparent!important}
.tx-que-es{left:calc(var(--cx) + 106 * var(--u));top:calc(65 * var(--u));width:calc(507 * var(--u))}
.tagline__badge{z-index:2}
.tx-regular{left:calc(var(--cx) + 191 * var(--u));top:calc(92 * var(--u));width:calc(1067 * var(--u))}
.tx-calidad{left:calc(var(--cx) + 262 * var(--u));top:calc(374 * var(--u));width:calc(179 * var(--u))}
.tx-limpieza{left:calc(var(--cx) + 599 * var(--u));top:calc(370 * var(--u));width:calc(190 * var(--u))}
.tx-rendimiento{left:calc(var(--cx) + 935 * var(--u));top:calc(370 * var(--u));width:calc(280 * var(--u))}
.tx-faq{left:calc(var(--cx) + 109 * var(--u));top:calc(67 * var(--u));width:calc(900 * var(--u))}
@media (min-width:900px){.what__title,.what__title *,.benefit__text>span{color:transparent!important}}
@media (max-width:899.98px){
  .tx-d{display:none}.tx-m{display:block}
  .tx-regular{left:calc(var(--cx) + 69 * var(--u));top:calc(43.3 * var(--u));width:calc(267 * var(--u))}
  .tx-faq-a{left:calc(var(--cx) + 130.7 * var(--u));top:calc(39.3 * var(--u));width:calc(133 * var(--u))}
  .tx-faq-b{left:calc(var(--cx) + 58.7 * var(--u));top:calc(63.3 * var(--u));width:calc(280 * var(--u))}
}
/* Foto de la estación: posición exacta medida contra la imagen embebida en el PDF */
.benefits__photo{left:calc(var(--cx) + 350 * var(--u))!important;top:calc(.8 * var(--u))!important;width:calc(1091 * var(--u))!important}
@media (max-width:899.98px){.benefits__photo{left:calc(var(--cx) - 184.5 * var(--u))!important;top:calc(3.7 * var(--u))!important;width:calc(611.3 * var(--u))!important}}