/* ===================== FUENTES (archivos locales en assets/fonts) =====================
   Toyota Type: fuente de marca de Toyota, sin costo para quien trabaja para la marca.
   Descarga oficial: brand.toyota.com → Downloads → "Website Toolkit" (WOFF2), requiere iniciar sesión.
   Copia los 5 pesos en assets/fonts con estos nombres:
     ToyotaType-Light.woff2 · ToyotaType-Regular.woff2 · ToyotaType-Semibold.woff2
     ToyotaType-Bold.woff2  · ToyotaType-Black.woff2
   Estado: instalados Regular (400), Bold (700) y Black (900). Faltan Light (300) y Semibold (600):
   mientras tanto el navegador usa Regular para 300 y Bold para 600 (pesos reales, sin negrita sintética).
   Al agregar cada archivo, descomenta su línea.
   Poppins: SIL Open Font License (ver assets/fonts/OFL-Poppins.txt). */
/* pendiente (falta el archivo): @font-face{font-family:"Toyota Type";font-style:normal;font-weight:300;font-display:swap;src:local("Toyota Type Light"),local("ToyotaType-Light"),url(../fonts/ToyotaType-Light.woff2) format("woff2")} */
@font-face{font-family:"Toyota Type";font-style:normal;font-weight:400;font-display:swap;src:local("Toyota Type Regular"),local("ToyotaType-Regular"),url(../fonts/ToyotaType-Regular.woff2) format("woff2")}
/* pendiente (falta el archivo): @font-face{font-family:"Toyota Type";font-style:normal;font-weight:600;font-display:swap;src:local("Toyota Type Semibold"),local("ToyotaType-Semibold"),url(../fonts/ToyotaType-Semibold.woff2) format("woff2")} */
@font-face{font-family:"Toyota Type";font-style:normal;font-weight:700;font-display:swap;src:local("Toyota Type Bold"),local("ToyotaType-Bold"),url(../fonts/ToyotaType-Bold.woff2) format("woff2")}
@font-face{font-family:"Toyota Type";font-style:normal;font-weight:900;font-display:swap;src:local("Toyota Type Black"),local("ToyotaType-Black"),url(../fonts/ToyotaType-Black.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-300.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/poppins-900.woff2) format("woff2")}
:root{
  /* Escritorio: medidas exactas del Figma escaladas con --u (ver bloque ESCRITORIO).
     --wrap solo se usa como base del diseño móvil. */
  --max:1440px;
  --wrap:min(var(--max), 100% - 48px);
  --wrap-vw:min(var(--max), 100vw - 48px);
  --blue:#19a2d5;
  --pink:#e05c93;
  --orange:#f7a400;
  --ink:#43454a;
  --gray:#eeeeee;
  --placeholder:#d9d9d9;
  --t:"Toyota Type","Poppins",system-ui,sans-serif;
  --p:"Poppins",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:160px}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--t);-webkit-font-smoothing:antialiased}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0}
button{font:inherit;cursor:pointer;border:0;background:none;padding:0;color:inherit}
.page{position:relative;width:100%;overflow-x:clip}
.frame{position:relative;width:min(100%,1920px);margin:0 auto}

/* Botones pill */
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:100px;color:#fff;font-family:var(--t);font-weight:900;font-size:24px;line-height:34px;text-align:center;transition:transform .15s ease, filter .15s ease}
.pill:hover{transform:translateY(-2px);filter:brightness(1.06)}
.pill--blue{background:var(--blue)}
.pill--pink{background:var(--pink)}
.pill--orange{background:var(--orange)}
.c-orange{color:var(--orange)}
.c-pink{color:var(--pink)}
.c-pink2{color:#e15c93}
.section-title{font-weight:900;font-size:50px;line-height:58px}

/* ===================== NAV (1080 · alto 104 · logo 87×85 · links 17px) ===================== */
.nav{position:fixed;z-index:30;top:28px;left:50%;transform:translateX(-50%);
  --nav-blur:0;
  width:var(--wrap-vw);height:104px;
  background:rgba(255,255,255,calc(1 - var(--nav-blur) * .38));border-radius:100px;
  display:flex;align-items:center;padding:0 44px 0 24px;
  box-shadow:0 12px 32px rgba(67,69,74,calc(var(--nav-blur) * .16));
  -webkit-backdrop-filter:blur(calc(var(--nav-blur) * 18px)) saturate(calc(1 + var(--nav-blur) * .35));
  backdrop-filter:blur(calc(var(--nav-blur) * 18px)) saturate(calc(1 + var(--nav-blur) * .35))}
.nav__logo img{width:87px;height:85px;object-fit:contain}
.nav__links{display:flex;list-style:none;padding:0;margin-left:auto;gap:clamp(14px, 3.3vw, 63px)}
.nav__links a{font-size:17px;font-weight:400;white-space:nowrap;line-height:1.4;transition:color .4s ease}
.nav__links a[aria-current="page"],
.nav__links a[aria-current="page"]:hover{font-weight:700;color:var(--ink)}
.nav__links a:hover{color:var(--blue)}
.nav__toggle{display:none}

/* ===================== HERO (fondo 1080 de alto a todo el ancho · niños 1071×912) ===================== */
.hero{position:relative;padding-top:264px}
.hero__bg{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:1080px;object-fit:cover}
.hero__kids{position:relative;z-index:1;margin:0 auto;width:min(1071px, var(--wrap));height:auto;aspect-ratio:1071/912;object-fit:cover}
.hero__logotema{position:absolute;z-index:1;top:250px;right:calc((100% - var(--wrap)) / 2);width:370px;height:186px;object-fit:contain}
.hero__fade{position:absolute;z-index:2;left:0;right:0;top:881px;height:481px;background:linear-gradient(to top,#fff 50%,rgba(255,255,255,0))}
.hero__title{position:relative;z-index:3;margin:-158px auto 0;width:min(743px, var(--wrap));
  font-weight:900;font-size:50px;line-height:1.42;text-align:center}
.btn-video{position:relative;z-index:3;display:block;margin:24px auto 0;width:221px;height:69px;
  background:var(--blue);border-radius:100px;color:#fff;transition:transform .15s ease, filter .15s ease}
.btn-video:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-video__circle{position:absolute;left:13.4px;top:11.2px;width:46.5px;height:46.5px}
.btn-video__play{position:absolute;left:23.9px;top:21.7px;width:25.4px;height:25.4px;transform:rotate(90deg)}
.btn-video__play img{position:absolute;top:7.87%;bottom:25%;left:12.45%;right:12.45%;width:75.1%;height:67.13%}
.btn-video__text{position:absolute;left:82.6px;top:17.2px;font-weight:600;font-size:20px;line-height:1.45;white-space:nowrap}

/* ===================== PREMIOS (caja 1080 · tarjetas cuadradas · insignias 113) ===================== */
.premios{position:relative;width:var(--wrap);margin:134px auto 0;padding:81px 40px 35px;
  border:1px solid var(--blue);border-radius:54px;text-align:center}
.premios__tagline{font-weight:400;font-size:38px;line-height:54px}
.premios__line{position:absolute;left:50%;transform:translateX(-50%);width:min(1324px, 100% - 80px);top:212px;height:1px}
.premios__line img{width:100%;height:1px;object-fit:fill}
.premios__title{position:relative;z-index:1;width:min(497px, 100%);height:99px;margin:27px auto 0;
  background:#fff;display:flex;align-items:center;justify-content:center;color:var(--orange);font-weight:900;font-size:90px;line-height:107px}
.prizes{display:flex;justify-content:center;gap:clamp(72px, (100% - 3 * 348px) / 2, 137px);margin-top:48px;list-style:none;padding:0}
.prize{position:relative;width:min(348px, (100% - 144px) / 3)}
.prize__card{position:relative;width:100%;aspect-ratio:1;background:var(--placeholder);border-radius:35px}
.prize__img{position:absolute;object-fit:cover}
.prize--laptop .prize__img{left:-7.115%;top:-6.638%;width:114.39%;height:auto;aspect-ratio:1}
.prize--tablet .prize__img{left:-13.353%;top:-12.802%;width:126.72%;height:auto;aspect-ratio:1}
.prize--bici .prize__img{left:-13.353%;top:-13.905%;width:126.72%;height:auto;aspect-ratio:1}
.prize__badge{position:absolute;z-index:1;top:-45px;left:calc(100% - 50px);width:113px;height:113px;color:#fff;font-family:var(--p);text-align:center}
.prize__badge img{position:absolute;inset:0;width:100%;height:100%}
.prize__badge b{position:absolute;left:0;right:0;top:16px;font-weight:700;font-size:32px;line-height:1.5}
.prize__badge span{position:absolute;left:0;right:0;top:48px;font-weight:400;font-size:26px;line-height:1.5}
.prize__label{margin-top:3.5px;font-weight:900;font-size:36px;line-height:58px}
.prize__underline{margin:0 auto;width:min(167px, 100%);height:17px;object-fit:contain}
.premios__note{margin-top:31px;font-size:14px;color:rgba(0,0,0,.25);line-height:20px}

/* ===================== REQUISITOS (2 columnas · ilustración 804×999 proporcional) ===================== */
.req{position:relative;width:var(--wrap);margin:67px auto 0;display:grid;grid-template-columns:minmax(0,1fr) clamp(300px, max(44%, 100% - 768px), 804px);gap:48px;align-items:start}
.req__col{padding-top:62px;min-width:0}
.req__title{margin-left:47px;max-width:394px}
.req__lead{margin:19px 0 0 47px;font-weight:300;font-size:19px;line-height:27px}
.acc{margin-top:14px}
.acc:first-of-type{margin-top:20px}
.acc__pill{list-style:none;cursor:pointer;display:flex;align-items:center;gap:24px;min-height:90px;
  background:var(--gray);border-radius:45px;padding:14px 46px 14px 50px}
.acc__pill::-webkit-details-marker{display:none}
.acc__pill span{flex:1;max-width:485px;font-family:var(--p);font-weight:700;font-size:23px;line-height:29px}
.acc--blue .acc__pill span{color:var(--blue)}
.acc--pink .acc__pill span{color:var(--pink)}
.acc--orange .acc__pill span{color:var(--orange)}
.acc__chev{position:relative;flex:none;margin-left:auto;width:14.3px;height:7.33px;transform:rotate(180deg);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.acc.is-open .acc__chev{transform:none}
.acc__chev img{position:absolute;top:-34.09%;bottom:-34.09%;left:-17.48%;right:-17.48%;width:134.96%;height:168.18%}
.acc__clip{height:0;overflow:hidden;transition:height .45s cubic-bezier(.22,1,.36,1)}
.acc.is-open .acc__clip{height:auto}
.acc__body{margin:0;padding:22px 0 6px 47px;max-width:706px;font-weight:300;font-size:19px;line-height:1.45}
.acc__label{margin:0 0 8px;font-weight:700}
.acc__body ul + .acc__label{margin-top:18px}
.acc__body ul{padding-left:22px;margin:0}
.acc__body li + li{margin-top:8px}
.req__cta{margin-top:115px;width:min(587px, 100%);min-height:91px;padding:12px 50px;
  font-size:26px;line-height:26px;text-transform:uppercase}
.req__stage{position:relative;width:100%;aspect-ratio:804/999}
.req__stage-bg{position:absolute;left:0;top:6.214%;width:100%;height:93.786%;background:var(--pink);border-radius:47px}
.req__stage-clip{position:absolute;inset:0;overflow:hidden;border-radius:47px}
.req__stage-clip img{position:absolute;left:-1.244%;top:-0.801%;width:104.85%;height:100.8%;object-fit:cover}

/* ===================== GANADORES DESTACADOS (caja 1080 · foto + texto) ===================== */
.winner{position:relative;width:var(--wrap);margin:143px auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,637px);
  min-height:750px;box-shadow:inset 0 0 0 1px var(--blue);border-radius:54px;overflow:hidden}
.winner + .winner{margin-top:55px}
.winner--b{grid-template-columns:minmax(0,655px) minmax(0,1fr)}
.winner__photo,.winner__media{position:relative;overflow:hidden;border-radius:54px}
.winner__photo img,.winner__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Figma: foto alineada a la izquierda (se ve el caballete). Con columnas angostas se corre para que Lorena no se corte */
.winner__photo img{object-position:80% center}
.winner__media img{object-position:center}
.winner__text{padding:98px 40px 98px 52px;min-width:0}
.winner--b .winner__text{padding:98px 40px 98px 56px}
.winner__text p{margin-top:66px;max-width:544px;font-weight:300;font-size:19px;line-height:27px}
.winner__text p + p{margin-top:27px}
.winner__text strong{font-weight:700}
.winner__btn{margin-top:25px;width:min(402px, 100%);height:69px}

/* ===================== GANADORES 2025 (franja de fondo a todo el ancho · marcos 412×309) ===================== */
.g25{position:relative;margin-top:109px;text-align:center}
.g25__band{position:absolute;left:50%;transform:translateX(-50%);top:194px;width:100vw;height:1175px;object-fit:cover;object-position:center top;z-index:0}
.g25__title{position:relative;z-index:1;font-weight:900;font-size:70px;line-height:100px;color:var(--ink)}
.g25__cat{position:relative;z-index:1;margin:-10px auto 0;color:var(--blue);font-weight:400;font-size:50px;line-height:58px;transition:opacity .28s ease}
.g25__prev{position:relative;z-index:2;margin-top:14px;width:410px;height:69px}
.carousel{position:relative;z-index:1;width:var(--wrap);margin:46px auto 0;overflow:hidden}
.carousel__track{display:flex;transition:transform .6s cubic-bezier(.22,1,.36,1);will-change:transform}
.carousel__page{flex:0 0 100%;display:flex;justify-content:center;align-items:flex-start;gap:47px;list-style:none;padding:0;margin:0;min-width:0}
.slide{flex:1 1 0;max-width:412px;min-width:0}
.slide__frame{position:relative;width:100%;aspect-ratio:412/309;background:#fff;overflow:hidden}
.slide__frame img{position:absolute;inset:9px;width:calc(100% - 18px);height:calc(100% - 18px);object-fit:cover}
.slide__name{margin-top:30px;font-family:var(--p);font-weight:700;font-size:23px;line-height:29px;color:#fff;text-shadow:0 4px 14px rgba(0,0,0,.51)}
.carousel__nav{position:relative;z-index:1;display:flex;justify-content:center;gap:27px;margin-top:67px}
.carousel__nav button{width:48px;height:48px;transition:transform .15s ease, opacity .3s ease}
.carousel__nav button:hover{transform:scale(1.08)}
.carousel__nav button.is-edge,
.carousel__nav button.is-edge:hover{opacity:.35;pointer-events:none;transform:none}
.carousel__nav img{width:100%;height:100%}
.carousel__nav .prev img{transform:scaleX(-1)}

/* ===================== ¿CÓMO PARTICIPAR? (caja 1080 · alto 822 · panel azul a la derecha) ===================== */
.part{--aside:clamp(300px, 100% - 618px, 822px);
  position:relative;z-index:2;width:var(--wrap);margin:129px auto 0;min-height:822px;padding:118px 0 121px;
  background:#fff;border:1px solid var(--blue);border-radius:54px}
.part::after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;width:var(--aside);background:var(--blue);border-radius:54px;z-index:0}
.part__title{position:relative;margin-left:74px;font-weight:700;font-size:41.59px;line-height:51px;white-space:nowrap}
.deco{position:absolute;width:45px;height:64px}
.deco--1{left:18px;top:164px}
.deco--2{left:10px;top:423px}
.deco--3wrap{position:absolute;z-index:1;top:306px;left:calc(100% - var(--aside) - 70px);width:68px;height:77px;display:flex;align-items:center;justify-content:center}
.deco--3wrap img{width:45px;height:64px;transform:rotate(25.17deg) scaleX(-1)}
.steps{list-style:none;padding:0;margin:56px 0 0 106px;width:min(451px, 100% - var(--aside) - 150px);display:flex;flex-direction:column}
.step{position:relative;display:flex;align-items:center;min-height:88px;background:var(--gray);border-radius:17px;
  padding:12px 20px 12px 32px;font-weight:300;font-size:19.05px;line-height:22px}
.step strong{font-weight:700}
.step--2{margin-top:27px}
.step--3{margin-top:20px;min-height:135px}
.step--note{margin-top:28px;padding-left:26px}
.step__num{position:absolute;left:-72px;top:50%;transform:translateY(-50%);width:64px;height:64px;color:#fff;font-weight:700;font-size:36px;line-height:52px;
  display:flex;align-items:center;justify-content:center}
.step__num img{position:absolute;inset:0;width:100%;height:100%}
.step__num span{position:relative}
/* Panel azul: en 1440px mide 822×822 como el Figma. La escena (822×822 del Figma) ocupa siempre el alto completo
   del panel, centrada; si el panel es más angosto se recorta a los lados (cover) y nunca queda vacío arriba. */
.kids{position:absolute;z-index:1;top:-1px;right:-1px;bottom:-1px;width:var(--aside)}
.kids__bg{display:none}
.kids__clip{position:absolute;inset:0;overflow:hidden;border-radius:54px}
.kids__stage{position:absolute;bottom:0;left:50%;height:100%;aspect-ratio:1;transform:translateX(-50%)}
.kids__stage img{position:absolute;max-width:none}
.kids__clip img{object-fit:cover}
.kids__nino{left:-11.85%;top:-3.815%;width:83.545%;height:104.43%}
.kids__nina{left:30.696%;top:19.155%;width:79.772%;height:119.70%}
/* Partes que sobresalen del panel (Figma): solo cuando la escena no está recortada */
.kids__pop{position:absolute;overflow:hidden;display:none}
.kids__pop--nino{left:-11.85%;top:32.345%;width:18.419%;height:32.109%}
.kids__pop--nino img{left:0;top:-112.62%;width:453.58%;height:325.24%}
.kids__pop--nina{left:84.095%;top:19.155%;width:26.373%;height:60.317%}
.kids__pop--nina img{left:-202.47%;top:0;width:302.47%;height:198.45%}
.kids__btn{position:absolute;z-index:2;left:50%;top:75.69%;transform:translateX(-50%);width:279px;height:69px;font-size:27px;line-height:39px}
.kids__btn:hover{transform:translateX(-50%) translateY(-2px)}

/* ===================== CTA FINAL (barra 1080 × 186 · niños 241×205) ===================== */
.cta-bar{position:relative;width:var(--wrap);margin:53px auto 0;min-height:186px;padding:35px 32px 0;background:var(--pink);border-radius:31px;
  display:grid;grid-template-columns:minmax(580px,896px) minmax(193px,1fr) 243px;grid-template-rows:auto auto;align-items:center;column-gap:0;row-gap:0}
.cta-bar__title{grid-column:1;grid-row:1;align-self:end;color:#fff;font-weight:900;font-size:32px;line-height:58px;text-align:center}
.cta-bar__world{grid-column:1;grid-row:2;align-self:start;justify-self:center;width:min(448px, 100%);height:43px;margin-bottom:53px;padding:0 16px;line-height:28px}
/* "DEL CONCURSO MUNDIAL" es solo una etiqueta: no es botón ni enlace */
.cta-bar .cta-bar__world,.cta-bar .cta-bar__world:hover{cursor:default;transform:none;filter:none}
.cta-bar__kids{grid-column:2;grid-row:1 / span 2;align-self:end;justify-self:center;margin:-60px -24px 0;width:241px;height:205px;object-fit:cover}
.cta-bar__btn{grid-column:3;grid-row:1 / span 2;width:243px;height:69px}

/* ===================== FOOTER (a todo el ancho) ===================== */
.footer{position:relative;width:100%;margin-top:49px;background:#000;font-size:20px;line-height:29px}
.footer__wave{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.footer__inner{position:relative;z-index:1;width:min(100%,1920px);margin:0 auto;min-height:132px;display:flex;align-items:center;justify-content:space-between;gap:12px clamp(16px, 2vw, 48px);flex-wrap:wrap;padding:16px clamp(16px, 7.5vw, 144px)}
.footer__links{display:flex;align-items:center;flex-wrap:wrap;gap:8px clamp(12px, 1.5vw, 32px);min-width:0}
.footer__contact,.footer__terms,.footer__copy{position:static;white-space:nowrap}
.footer__contact{color:var(--pink);font-weight:700}
.footer__contact a{color:#fff;font-weight:400}
.footer__terms{color:var(--pink)}
.footer__terms::before{content:"|";margin-right:clamp(12px, 1.5vw, 32px)}
.footer__logo{position:static;width:202px;height:auto;flex:none}
.footer__copy{color:var(--orange);font-weight:700}

/* ===================== ESCRITORIO (≥901px): FIGMA EXACTO =====================
   Todas las medidas son las del Figma (frame HOME NUEVO, 1920px) multiplicadas por --u.
   En 1920px o más, --u = 1px: posiciones y tamaños idénticos al Figma (contenido hasta 1746px).
   En pantallas más chicas todo se escala en proporción (textos incluidos), igual al diseño.
   U(n) = calc(var(--u) * n) */
@media (min-width: 901px){
  :root{--u:calc(min(100vw, 1920px) / 1920)}
  .frame{width:calc(var(--u) * 1920)}
  .pill{font-size:calc(var(--u) * 24);line-height:calc(var(--u) * 34)}
  .pill:hover{transform:translateY(-2px)}
  .section-title{font-size:calc(var(--u) * 50);line-height:calc(var(--u) * 58)}

  /* NAV · 1559×104 en (180, 40) */
  .nav{top:calc(var(--u) * 40.17);width:calc(var(--u) * 1559.28);height:calc(var(--u) * 104.33);padding:0;display:block}
  .nav__logo img{position:absolute;left:calc(var(--u) * 34.43);top:calc(var(--u) * 6.62);width:calc(var(--u) * 86.94);height:calc(var(--u) * 85.09)}
  .nav__links{position:absolute;inset:0;margin:0;display:block}
  .nav__links li{position:absolute;top:calc(var(--u) * 39.17)}
  .nav__links li:nth-child(1){left:calc(var(--u) * 415.39)}
  .nav__links li:nth-child(2){left:calc(var(--u) * 535.31)}
  .nav__links li:nth-child(3){left:calc(var(--u) * 663.97)}
  .nav__links li:nth-child(4){left:calc(var(--u) * 875.1)}
  .nav__links li:nth-child(5){left:calc(var(--u) * 1076.88)}
  .nav__links li:nth-child(6){left:calc(var(--u) * 1331.58)}
  .nav__links a{display:block;font-size:calc(var(--u) * 17);line-height:calc(var(--u) * 24)}

  /* HERO · alto hasta el inicio de PREMIOS (y 1386.74) */
  .hero{height:calc(var(--u) * 1386.74);padding:0}
  .hero__bg{height:calc(var(--u) * 1080.14)}
  .hero__kids{position:absolute;margin:0;left:calc(var(--u) * 424.5);top:calc(var(--u) * 264.31);width:calc(var(--u) * 1071);height:calc(var(--u) * 912)}
  .hero__logotema{left:calc(var(--u) * 1275.24);right:auto;top:calc(var(--u) * 250);width:calc(var(--u) * 370);height:calc(var(--u) * 186)}
  .hero__fade{left:50%;right:auto;transform:translateX(-50%);width:100vw;top:calc(var(--u) * 881.49);height:calc(var(--u) * 481.11)}
  .hero__title{position:absolute;margin:0;left:calc(var(--u) * 555.83);top:calc(var(--u) * 1018);width:calc(var(--u) * 743);font-size:calc(var(--u) * 50);line-height:calc(var(--u) * 71)}
  .btn-video{position:absolute;margin:0;left:calc(var(--u) * 849.71);top:calc(var(--u) * 1184.1);width:calc(var(--u) * 220.59);height:calc(var(--u) * 68.9)}
  .btn-video__circle{left:calc(var(--u) * 13.4);top:calc(var(--u) * 11.21);width:calc(var(--u) * 46.48);height:calc(var(--u) * 46.48)}
  .btn-video__play{left:calc(var(--u) * 23.9);top:calc(var(--u) * 21.7);width:calc(var(--u) * 25.42);height:calc(var(--u) * 25.42)}
  .btn-video__text{left:calc(var(--u) * 82.61);top:calc(var(--u) * 17.16);font-size:calc(var(--u) * 20);line-height:calc(var(--u) * 29)}

  /* PREMIOS · caja 1718×822 en (100.76, 1386.74) */
  .premios{width:calc(var(--u) * 1718.48);height:calc(var(--u) * 821.72);margin:0 0 0 calc(var(--u) * 100.76);padding:0;border-radius:calc(var(--u) * 54)}
  /* Figma: una sola línea centrada (no debe partirse ni quedar tapada por el recuadro de PREMIOS) */
  .premios__tagline{position:absolute;z-index:2;left:0;right:0;white-space:nowrap;top:calc(var(--u) * 81.36);font-size:calc(var(--u) * 38);line-height:calc(var(--u) * 54)}
  .premios__line{left:calc(var(--u) * 196.95);transform:none;top:calc(var(--u) * 212.84);width:calc(var(--u) * 1324.57)}
  .premios__title{position:absolute;margin:0;left:calc(var(--u) * 610.79);top:calc(var(--u) * 161.86);width:calc(var(--u) * 496.89);height:calc(var(--u) * 98.54);font-size:calc(var(--u) * 90);line-height:calc(var(--u) * 107)}
  .prizes{position:absolute;inset:0;margin:0;display:block}
  .prize{position:absolute;top:calc(var(--u) * 308.78);width:calc(var(--u) * 348.06)}
  .prize--laptop{left:calc(var(--u) * 200.14)}
  .prize--tablet{left:calc(var(--u) * 685.21)}
  .prize--bici{left:calc(var(--u) * 1170.27)}
  .prize__card{border-radius:calc(var(--u) * 35)}
  .prize--laptop .prize__img{left:calc(var(--u) * -24.76);top:calc(var(--u) * -23.11);width:calc(var(--u) * 398.11)}
  .prize--tablet .prize__img{left:calc(var(--u) * -46.47);top:calc(var(--u) * -44.55);width:calc(var(--u) * 441)}
  .prize--bici .prize__img{left:calc(var(--u) * -46.47);top:calc(var(--u) * -48.39);width:calc(var(--u) * 441)}
  .prize__badge{top:calc(var(--u) * -44.8);width:calc(var(--u) * 112.98);height:calc(var(--u) * 112.98)}
  .prize--laptop .prize__badge{left:calc(var(--u) * 297.67)}
  .prize--tablet .prize__badge{left:calc(var(--u) * 291.57)}
  .prize--bici .prize__badge{left:calc(var(--u) * 294.76)}
  .prize__badge b{top:calc(var(--u) * 15.93);font-size:calc(var(--u) * 32);line-height:calc(var(--u) * 48)}
  .prize__badge span{top:calc(var(--u) * 48.14);font-size:calc(var(--u) * 26);line-height:calc(var(--u) * 39)}
  .prize__label{position:absolute;margin:0;left:calc(var(--u) * -30);right:calc(var(--u) * -30);top:calc(var(--u) * 351.48);font-size:calc(var(--u) * 36);line-height:calc(var(--u) * 58)}
  .prize__underline{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--u) * 409.48);width:calc(var(--u) * 166.58);height:calc(var(--u) * 17.15)}
  .premios__note{position:absolute;margin:0;left:calc(var(--u) * 772.24);top:calc(var(--u) * 766.82);white-space:nowrap;font-size:calc(var(--u) * 14);line-height:calc(var(--u) * 20)}

  /* textos de una sola línea en el Figma: nunca se parten aunque la fuente mida distinto */
  .g25__title,.g25__cat,.cta-bar__title,.prize__label,.req__lead,.cta-bar__world,.winner__btn,.g25__prev,.kids__btn,.cta-bar__btn{white-space:nowrap}

  /* REQUISITOS · empieza en y 2267 (imagen) · columna en x 192 */
  .req{display:flow-root;width:auto;margin:calc(var(--u) * 58.54) 0 0;min-height:calc(var(--u) * 1007)}
  .req__col{padding:0;margin-left:calc(var(--u) * 192.01);width:calc(var(--u) * 720.77)}
  .req__title{margin:calc(var(--u) * 70.08) 0 0 calc(var(--u) * 46.84);width:calc(var(--u) * 394);max-width:none}
  .req__lead{margin:calc(var(--u) * 19.17) 0 0 calc(var(--u) * 47.23);font-size:calc(var(--u) * 19);line-height:calc(var(--u) * 27)}
  .acc,.acc:first-of-type{margin-top:calc(var(--u) * 14.15)}
  .req__lead + .acc{margin-top:calc(var(--u) * 20.15)}
  .acc__pill{min-height:calc(var(--u) * 89.9);height:calc(var(--u) * 89.9);gap:0;border-radius:calc(var(--u) * 45);padding:0 calc(var(--u) * 46.47) 0 calc(var(--u) * 50.66)}
  .acc__pill span{flex:none;width:calc(var(--u) * 485.38);max-width:none;font-size:calc(var(--u) * 23);line-height:calc(var(--u) * 29)}
  .acc__chev{width:calc(var(--u) * 14.3);height:calc(var(--u) * 7.33)}
  .acc__body{padding:calc(var(--u) * 32.32) 0 calc(var(--u) * 14) calc(var(--u) * 47.23);max-width:none;width:calc(var(--u) * 706.84);font-size:calc(var(--u) * 19);line-height:calc(var(--u) * 27)}
  .acc__body ul{padding-left:calc(var(--u) * 28)}
  .acc__body li + li{margin-top:0}
  .acc__label{margin:0 0 calc(var(--u) * 8)}
  .acc__body ul + .acc__label{margin-top:calc(var(--u) * 18)}
  .req__cta{margin-top:calc(var(--u) * 100.56);width:calc(var(--u) * 586.54);min-height:0;height:calc(var(--u) * 91.1);padding:0 calc(var(--u) * 58.56);font-size:calc(var(--u) * 26);line-height:calc(var(--u) * 26)}
  .req__stage{position:absolute;left:calc(var(--u) * 1043);top:calc(var(--u) * 8);width:calc(var(--u) * 804);height:calc(var(--u) * 999);aspect-ratio:auto}
  .req__stage-bg{top:calc(var(--u) * 62.08);height:calc(var(--u) * 936.5);border-radius:calc(var(--u) * 47)}
  .req__stage-clip{border-radius:calc(var(--u) * 47)}
  .req__stage-clip img{left:calc(var(--u) * -10);top:calc(var(--u) * -8);width:calc(var(--u) * 843);height:calc(var(--u) * 1007)}

  /* GANADORA 13ª · caja 1746×750 en (100.76, 3468) */
  .winner{display:block;margin:calc(var(--u) * 142.55) 0 0 calc(var(--u) * 100.76);width:calc(var(--u) * 1746.24);height:calc(var(--u) * 749.75);min-height:0;border-radius:calc(var(--u) * 54)}
  .winner + .winner{margin-top:calc(var(--u) * 55.19)}
  .winner__photo,.winner__media{position:absolute;border-radius:calc(var(--u) * 54)}
  .winner__photo{left:0;top:calc(var(--u) * 1.38);width:calc(var(--u) * 911.91);height:calc(var(--u) * 748.5)}
  .winner__photo img{width:106.67%;height:100%;object-position:left center}
  .winner__text,.winner--b .winner__text{position:absolute;top:calc(var(--u) * 97.9);padding:0}
  .winner--a .winner__text{left:calc(var(--u) * 1049.59);width:calc(var(--u) * 544.73)}
  .winner__text p{margin-top:calc(var(--u) * 66.48);max-width:calc(var(--u) * 544.34);font-size:calc(var(--u) * 19);line-height:calc(var(--u) * 27)}
  .winner__text p + p{margin-top:calc(var(--u) * 27)}
  /* botón en su posición exacta del Figma (y 4028 / 4834) */
  .winner__btn{position:absolute;margin:0;left:calc(var(--u) * 0.39);top:calc(var(--u) * 462.53);width:calc(var(--u) * 402.38);height:calc(var(--u) * 69)}

  /* BEST FINALIST 15ª · caja en y 4273 · imagen 912×750 a la derecha */
  .winner--b .winner__text{left:calc(var(--u) * 138.08);width:calc(var(--u) * 558.79)}
  .winner__media{left:calc(var(--u) * 834.33);top:0;width:calc(var(--u) * 911.91);height:calc(var(--u) * 749.75)}
  .winner__media img{inset:0;width:100%;height:100%;object-fit:cover;object-position:center}

  /* GANADORES 2025 · título en y 5132 · franja 2088×1175 */
  .g25{margin-top:calc(var(--u) * 109.43);height:calc(var(--u) * 889.53)}
  .g25__band{top:calc(var(--u) * 194);width:max(100vw, calc(var(--u) * 2088));height:calc(var(--u) * 1175)}
  .g25__title{font-size:calc(var(--u) * 70);line-height:calc(var(--u) * 100)}
  .g25__cat{margin-top:calc(var(--u) * -10);font-size:calc(var(--u) * 50);line-height:calc(var(--u) * 58)}
  .g25__prev{margin-top:calc(var(--u) * 14);width:calc(var(--u) * 410.21);height:calc(var(--u) * 69)}
  .carousel{position:absolute;margin:0;top:calc(var(--u) * 277);left:calc(var(--u) * 294.15);width:calc(var(--u) * 1330.7)}
  .carousel__page{justify-content:flex-start;gap:calc(var(--u) * 47.04)}
  /* 3 dibujos: 412px cada uno como el Figma. Con 4 (3era categoría, dos 3er puesto) se reparten el ancho */
  .slide{flex:0 1 calc(var(--u) * 412.21);width:auto;min-width:0;max-width:none}
  .slide__frame img{inset:auto;left:calc(var(--u) * 8.98);top:calc(var(--u) * 8.41);width:calc(100% - var(--u) * 19.26);height:calc(100% - var(--u) * 16.83)}
  .slide__name{margin-top:calc(var(--u) * 30.06);font-size:calc(var(--u) * 23);line-height:calc(var(--u) * 29)}
  .carousel__nav{position:absolute;margin:0;top:calc(var(--u) * 712.53);left:calc(var(--u) * 899);gap:calc(var(--u) * 27)}
  .carousel__nav button{width:calc(var(--u) * 48);height:calc(var(--u) * 48)}

  /* ¿CÓMO PARTICIPAR? · caja 1564×822 en (178, 6022) · panel azul 822×822 */
  .part{--aside:calc(var(--u) * 822);width:calc(var(--u) * 1563.98);height:calc(var(--u) * 821.72);min-height:0;margin:0 0 0 calc(var(--u) * 178.01);padding:0;border-radius:calc(var(--u) * 54)}
  .part::after{border-radius:calc(var(--u) * 54)}
  .part__title{position:absolute;margin:0;left:calc(var(--u) * 144.02);top:calc(var(--u) * 118.47);font-size:calc(var(--u) * 41.59);line-height:calc(var(--u) * 51)}
  .deco{width:calc(var(--u) * 44.88);height:calc(var(--u) * 64.12)}
  .deco--1{left:calc(var(--u) * 88.44);top:calc(var(--u) * 164.18)}
  .deco--2{left:calc(var(--u) * 79.58);top:calc(var(--u) * 423.21)}
  /* flecha azul: posición visual del Figma (x 769–794, y 6310–6382), rotada 25.17° y reflejada */
  .deco--3wrap{left:calc(var(--u) * 572.58);top:calc(var(--u) * 287.2);width:calc(var(--u) * 67.88);height:calc(var(--u) * 77.11)}
  .deco--3wrap img{width:calc(var(--u) * 44.88);height:calc(var(--u) * 64.12)}
  .steps{position:absolute;margin:0;left:calc(var(--u) * 165.82);top:calc(var(--u) * 225.73);width:calc(var(--u) * 451.37);display:block}
  .step{min-height:0;height:calc(var(--u) * 88.48);border-radius:calc(var(--u) * 17);padding:0 0 0 calc(var(--u) * 32.07);font-size:calc(var(--u) * 19.05);line-height:calc(var(--u) * 22)}
  .step--2{margin-top:calc(var(--u) * 26.93)}
  .step--3{margin-top:calc(var(--u) * 20.52);height:calc(var(--u) * 134.64);min-height:0}
  .step--note{margin-top:calc(var(--u) * 28.21);padding-left:calc(var(--u) * 25.66)}
  .step--1 p{width:calc(var(--u) * 380)}
  .step--2 p{width:calc(var(--u) * 380)}
  .step--3 p{width:calc(var(--u) * 396)}
  .step--note p{width:calc(var(--u) * 404)}
  .step__num{left:calc(var(--u) * -71.8);top:calc(var(--u) * 7.69);transform:none;width:calc(var(--u) * 64.12);height:calc(var(--u) * 64.12);font-size:calc(var(--u) * 36);line-height:calc(var(--u) * 52)}
  .step--2 .step__num{top:calc(var(--u) * 12.82)}
  .step--3 .step__num{top:calc(var(--u) * 30.78)}
  .kids{top:-1px;right:-1px;bottom:auto;width:calc(var(--u) * 822);height:calc(var(--u) * 822)}
  .kids__clip{border-radius:calc(var(--u) * 54)}
  .kids__stage{inset:0;left:0;height:auto;aspect-ratio:auto;transform:none}
  .kids__nino{left:calc(var(--u) * -97.41);top:calc(var(--u) * -31.35);width:calc(var(--u) * 686.74);height:calc(var(--u) * 858.11)}
  .kids__nina{left:calc(var(--u) * 252.32);top:calc(var(--u) * 157.4);width:calc(var(--u) * 655.73);height:calc(var(--u) * 983.59)}
  .kids__pop{display:block}
  .kids__pop--nino{left:calc(var(--u) * -97.41);top:calc(var(--u) * 265.78);width:calc(var(--u) * 151.41);height:calc(var(--u) * 263.84)}
  .kids__pop--nina{left:calc(var(--u) * 691.26);top:calc(var(--u) * 157.4);width:calc(var(--u) * 216.79);height:calc(var(--u) * 495.64)}
  .kids__btn{left:calc(var(--u) * 271);top:calc(var(--u) * 622);transform:none;width:calc(var(--u) * 279);height:calc(var(--u) * 69);font-size:calc(var(--u) * 27);line-height:calc(var(--u) * 39)}
  .kids__btn:hover{transform:translateY(-2px)}

  /* CTA FINAL · barra 1559×186 en (180, 6897) */
  .cta-bar{display:block;margin:calc(var(--u) * 52.8) 0 0 calc(var(--u) * 180.36);width:calc(var(--u) * 1559.28);height:calc(var(--u) * 186.41);min-height:0;padding:0;border-radius:calc(var(--u) * 31)}
  .cta-bar__title{position:absolute;left:calc(var(--u) * -18.36);top:calc(var(--u) * 35.55);width:calc(var(--u) * 896);font-size:calc(var(--u) * 32);line-height:calc(var(--u) * 58)}
  .cta-bar__world{position:absolute;margin:0;left:calc(var(--u) * 221.64);top:calc(var(--u) * 90.55);width:calc(var(--u) * 448);height:calc(var(--u) * 43);padding:0;font-size:calc(var(--u) * 24);line-height:calc(var(--u) * 28)}
  .cta-bar__kids{position:absolute;margin:0;left:calc(var(--u) * 839.64);top:calc(var(--u) * -18.45);width:calc(var(--u) * 241);height:calc(var(--u) * 205)}
  .cta-bar__btn{position:absolute;left:calc(var(--u) * 1187.64);top:calc(var(--u) * 55.55);width:calc(var(--u) * 243.26);height:calc(var(--u) * 69)}

  /* FOOTER · ola 1955×132 en y 7132 */
  .footer{margin-top:calc(var(--u) * 48.76);height:calc(var(--u) * 132.38);font-size:calc(var(--u) * 20);line-height:calc(var(--u) * 29)}
  .footer__inner{display:block;width:calc(var(--u) * 1920);height:calc(var(--u) * 132.38);min-height:0;padding:0}
  .footer__links{display:block}
  .footer__contact,.footer__terms,.footer__copy{position:absolute;top:calc(var(--u) * 46.19)}
  .footer__contact{left:calc(var(--u) * 144.33)}
  .footer__terms{left:calc(var(--u) * 542.88)}
  .footer__terms::before{margin-right:calc(var(--u) * 6)}
  .footer__logo{position:absolute;left:calc(var(--u) * 876.47);top:calc(var(--u) * 43.99);width:calc(var(--u) * 201.86);height:calc(var(--u) * 33.39)}
  .footer__copy{left:calc(var(--u) * 1479.99)}
}

/* ===================== MÓVIL ===================== */
@media (max-width: 900px){
  :root{--wrap:calc(100% - 32px)}
  body{overflow-x:clip}
  .os-scrollbar{display:none}
  .nav{top:8px;width:calc(100% - 24px);height:64px;padding:0 16px;justify-content:space-between}
  .nav__logo img{width:52px;height:51px}
  .nav__toggle{display:flex;flex-direction:column;gap:5px;padding:8px}
  .nav__toggle span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px}
  .nav__links{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-radius:24px;padding:12px 24px;box-shadow:0 12px 30px rgba(0,0,0,.12)}
  .nav.is-open .nav__links{display:flex}
  .nav__links a{display:block;padding:10px 0;font-size:16px}

  .hero{padding:96px 0 32px;text-align:center}
  .hero__bg{height:70vw;min-height:320px}
  .hero__kids{width:min(520px, var(--wrap))}
  .hero__logotema{top:84px;right:16px;width:34vw;height:auto;aspect-ratio:370/186}
  .hero__fade{top:auto;bottom:0;height:55%}
  .hero__title{margin-top:-40px;font-size:26px}
  .btn-video{margin-top:16px;width:200px;height:60px}
  .btn-video__circle{left:10px;top:9px;width:42px;height:42px}
  .btn-video__play{left:19px;top:18px;width:24px;height:24px}
  .btn-video__text{left:72px;top:16px;font-size:18px}

  .premios{margin-top:24px;padding:32px 16px 24px;border-radius:32px}
  .premios__tagline{font-size:20px;line-height:28px}
  .premios__line{display:none}
  .premios__title{height:auto;margin:8px auto 0;font-size:52px}
  .prizes{flex-direction:column;align-items:center;gap:48px;margin-top:56px}
  .prize{width:min(240px, 70vw)}
  .prize__badge{transform:scale(.8);transform-origin:0 0;left:calc(100% - 46px);top:-34px}
  .prize__label{font-size:26px;line-height:40px;margin-top:12px}
  .prize__underline{width:140px}
  .premios__note{margin-top:24px;font-size:13px}

  .req{margin-top:48px;display:flex;flex-direction:column-reverse;gap:32px}
  .req__col{padding-top:0}
  .req__stage{max-width:480px;margin:0 auto}
  .req__title{margin:0;max-width:none;font-size:min(32px, calc((100vw - 32px) / 13.4));line-height:38px;white-space:nowrap}
  .req__lead{margin-left:0;font-size:16px}
  .acc__body{padding:16px 4px 8px 0;font-size:16px}
  .acc__pill{min-height:72px;padding:12px 24px;border-radius:36px;gap:12px}
  .acc__pill span{font-size:17px;line-height:22px}
  .acc__body ul{padding-left:22px}
  .req__cta{margin-top:32px;width:100%;min-height:72px;padding:14px 24px;font-size:18px;line-height:22px}

  .winner{margin-top:56px;display:flex;flex-direction:column;min-height:0;border-radius:32px}
  .winner + .winner{margin-top:24px}
  .winner__photo,.winner__media{aspect-ratio:912/750;border-radius:32px}
  .winner__media{order:-1}
  .winner__text,.winner--b .winner__text{padding:28px 20px 32px}
  .winner__text .section-title{font-size:30px;line-height:36px}
  .winner__text p{margin-top:20px;font-size:16px;line-height:24px}
  .winner__text p + p{margin-top:16px}
  .winner__btn{margin-top:24px;width:100%;max-width:340px;height:60px;font-size:18px}

  .g25{margin-top:56px}
  /* la franja empieza a media altura del botón (56 título + 36 categoría + 12 + 28 = 132px), como en el Figma */
  .g25__band{top:132px;height:calc(100% + 348px)}
  .g25__title{font-size:min(40px, calc((100vw - 32px) / 9.1));line-height:56px;white-space:nowrap}
  .g25__cat{margin-top:0;font-size:28px;line-height:36px;white-space:nowrap}
  .g25__prev{margin-top:12px;width:300px;height:56px;font-size:18px}
  .carousel{width:100%;margin-top:40px}
  .carousel__page{gap:10px;padding:0 12px}
  .slide{max-width:none}
  .slide__frame img{inset:4px;width:calc(100% - 8px);height:calc(100% - 8px)}
  .slide__name{font-size:14px;line-height:20px;margin-top:12px}
  .carousel__nav{margin-top:20px;gap:20px}
  .carousel__nav button{width:44px;height:44px}

  .part{--aside:100%;margin-top:48px;min-height:0;padding:32px 16px 0;border-radius:32px;overflow:hidden}
  .part::after{display:none}
  .part__title{margin:0;font-size:28px;line-height:36px;text-align:center;white-space:normal}
  .deco,.deco--3wrap{display:none}
  .steps{width:auto;margin:24px 0 0;gap:14px}
  .step,.step--3{min-height:76px;margin-top:0;padding:14px 16px 14px 70px;font-size:15px;line-height:20px}
  .step--note{padding-left:16px}
  .step__num{left:10px;width:48px;height:48px;font-size:24px}
  .kids{position:relative;top:auto;right:auto;bottom:auto;width:calc(100% + 32px);margin:32px -16px 0;aspect-ratio:1}
  .kids__bg{display:block;position:absolute;inset:0;background:var(--blue);border-radius:32px 32px 0 0}
  .kids__clip{border-radius:32px 32px 0 0}
  .kids__pop{display:none}
  .kids__btn{width:200px;height:56px;font-size:20px}

  .cta-bar{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:40px;padding:28px 20px;border-radius:24px;text-align:center}
  .cta-bar__title{font-size:22px;line-height:28px}
  .cta-bar__title,.cta-bar__world,.cta-bar__kids,.cta-bar__btn{align-self:center}
  .cta-bar__world{width:auto;max-width:100%;height:40px;margin:0;padding:0 20px;font-size:16px}
  .cta-bar__kids{width:160px;height:auto;aspect-ratio:241/205;margin:0}
  .cta-bar__btn{width:220px;height:56px;font-size:18px}

  .footer{margin-top:40px}
  .footer__wave{display:none}
  .footer__inner{width:100%;min-height:0;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:28px 16px 24px;text-align:center;font-size:14px;line-height:20px}
  .footer__links{flex-direction:column;align-items:center;gap:10px}
  .footer__contact,.footer__terms,.footer__copy{white-space:normal}
  .footer__terms::before{content:none;margin:0}
  .footer__logo{width:160px;order:-1}
  html{scroll-padding-top:96px}
}


/* Barra OverlayScrollbars */
.os-theme-dream{
  --os-size:8px;
  --os-padding-perpendicular:0;
  --os-padding-axis:3px;
  --os-track-border-radius:100px;
  --os-handle-border-radius:100px;
  --os-handle-bg:rgba(25,162,213,.72);
  --os-handle-bg-hover:#19a2d5;
  --os-handle-bg-active:#e05c93;
  --os-handle-min-size:64px;
  --os-handle-perpendicular-size:100%;
  --os-handle-perpendicular-size-hover:100%;
  --os-handle-perpendicular-size-active:100%;
}
.os-scrollbar{z-index:40}

/* ===================== DIÁLOGO ===================== */
.sheet{width:100%;height:100dvh;max-width:100%;max-height:100dvh;margin:0;padding:0;border:0;background:#fff;color:var(--ink);overflow:hidden;
  opacity:0;transform:translateY(28px) scale(.98);
  transition:opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1), overlay .45s allow-discrete, display .45s allow-discrete}
.sheet[open]{display:flex;flex-direction:column;opacity:1;transform:none}
.sheet.is-closing{opacity:0;transform:translateY(24px) scale(.98)}
@starting-style{
  .sheet[open]{opacity:0;transform:translateY(28px) scale(.98)}
}
.sheet::backdrop{background:rgba(67,69,74,0);transition:background .4s ease, overlay .45s allow-discrete, display .45s allow-discrete}
.sheet[open]::backdrop{background:rgba(67,69,74,.45)}
.sheet.is-closing::backdrop{background:rgba(67,69,74,0)}
@starting-style{
  .sheet[open]::backdrop{background:rgba(67,69,74,0)}
}
.sheet__bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;padding:0 24px;border-bottom:1px solid #eee}
.sheet__title{font-weight:700;font-size:20px;line-height:1.3}
.sheet__close{flex:none;height:44px;padding:0 22px;border-radius:100px;background:var(--pink);color:#fff;font-weight:700;font-size:16px}
.sheet__close:hover{filter:brightness(1.06)}
.sheet__actions{flex:none;display:flex;align-items:center;gap:16px}
.sheet__external{font-size:15px;font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.sheet__external[hidden]{display:none}
.sheet__frame{position:relative;flex:1;min-height:0;overflow:hidden}
.sheet__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
@media (max-width:900px){
  .sheet__bar{height:64px;padding:0 16px}
  .sheet__title{font-size:16px}
  .sheet__close{height:40px;padding:0 16px;font-size:15px}
  .sheet__actions{gap:10px}
  .sheet__external{font-size:13px;max-width:150px;line-height:1.25;text-align:right}
}

/* ===================== VISOR (Viewer.js) ===================== */
.slide__frame{cursor:pointer}
.slide__frame img{cursor:pointer;transition:transform .3s ease}
.slide__frame::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(43,45,50,.35);opacity:0;transition:opacity .25s ease;pointer-events:none}
.slide__frame::after{content:"";position:absolute;z-index:2;left:50%;top:50%;width:64px;height:64px;border-radius:50%;
  background:var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") center/30px no-repeat;
  box-shadow:0 6px 18px rgba(0,0,0,.25);opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);pointer-events:none}
.slide__frame:hover::before,.slide__frame:focus-within::before{opacity:1}
.slide__frame:hover::after,.slide__frame:focus-within::after{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none){
  .slide__frame::after{opacity:.9;transform:translate(-50%,-50%) scale(.6)}
}
.slide__frame:hover img{transform:scale(1.03)}
.slide__frame img:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.viewer-backdrop{background-color:rgba(43,45,50,.92)}
.viewer-title{font-family:var(--p);font-weight:600;font-size:16px;color:#fff;opacity:1}
.viewer-toolbar>ul>li{background-color:rgba(255,255,255,.14)}
.viewer-toolbar>ul>li:hover{background-color:var(--pink)}
.viewer-button{background-color:rgba(255,255,255,.14)}
.viewer-button:hover,.viewer-button:focus{background-color:var(--pink)}
.viewer-navbar{background-color:rgba(0,0,0,.35)}
.viewer-list>.viewer-active{opacity:1;box-shadow:0 0 0 2px var(--orange)}
.viewer-open .os-scrollbar{visibility:hidden}

/* Deslizamiento entre imágenes del visor */
@keyframes viewerSlideInNext{from{translate:100vw 0}to{translate:0 0}}
@keyframes viewerSlideInBack{from{translate:-100vw 0}to{translate:0 0}}
@keyframes viewerSlideOutNext{from{translate:0 0;opacity:1}to{translate:-100vw 0;opacity:.6}}
@keyframes viewerSlideOutBack{from{translate:0 0;opacity:1}to{translate:100vw 0;opacity:.6}}
.viewer-canvas>img.viewer-slide-in:not(.viewer-invisible){animation:viewerSlideInNext .55s cubic-bezier(.22,1,.36,1) both}
.viewer-canvas>img.viewer-slide-in.is-back:not(.viewer-invisible){animation-name:viewerSlideInBack}
.viewer-ghost{pointer-events:none}
.viewer-ghost>img{animation:viewerSlideOutNext .55s cubic-bezier(.22,1,.36,1) both}
.viewer-ghost>img.is-back{animation-name:viewerSlideOutBack}
@media (prefers-reduced-motion:reduce){
  .viewer-canvas>img.viewer-slide-in,.viewer-ghost>img{animation:none}
}

/* ===================== PANTALLA DE CARGA ===================== */
.loader{position:fixed;inset:0;z-index:3000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#fff;
  transition:opacity .5s ease, visibility .5s ease;
  animation:loaderFailsafe .5s ease 10s forwards}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__inner{position:relative;width:148px;height:148px;display:grid;place-items:center}
.loader__ring{position:absolute;inset:0;border-radius:50%;border:5px solid var(--gray);border-top-color:var(--pink);border-right-color:var(--blue);border-bottom-color:var(--orange);
  animation:loaderSpin 1.1s linear infinite}
.loader__logo{width:92px;height:auto;animation:loaderPulse 1.4s ease-in-out infinite}
.loader__text{font-family:var(--p);font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--ink)}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
@keyframes loaderPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
/* Respaldo: si el JS no corre, la pantalla se retira sola a los 10 s */
@keyframes loaderFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion:reduce){
  .loader__ring{animation-duration:3s}
  .loader__logo{animation:none}
}


/* ===================== VIDEO (diálogo + tema Video.js de la web) ===================== */
.vmodal{width:min(1120px, calc(100vw - 48px));max-width:none;max-height:none;margin:auto;padding:0;border:0;background:transparent;overflow:visible;
  opacity:0;transform:translateY(24px) scale(.97);
  transition:opacity .35s ease, transform .4s cubic-bezier(.22,1,.36,1), overlay .4s allow-discrete, display .4s allow-discrete}
.vmodal[open]{display:block;opacity:1;transform:none}
.vmodal.is-closing{opacity:0;transform:translateY(20px) scale(.97)}
@starting-style{ .vmodal[open]{opacity:0;transform:translateY(24px) scale(.97)} }
.vmodal::backdrop{background:rgba(67,69,74,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);
  transition:background .35s ease, backdrop-filter .35s ease, overlay .4s allow-discrete, display .4s allow-discrete}
.vmodal[open]::backdrop{background:rgba(32,34,38,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vmodal.is-closing::backdrop{background:rgba(32,34,38,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
@starting-style{ .vmodal[open]::backdrop{background:rgba(32,34,38,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)} }
.vmodal__box{position:relative;padding-top:60px}
.vmodal__close{position:absolute;top:0;right:0;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:100px;
  background:var(--pink);color:#fff;font-family:var(--t);font-weight:900;font-size:17px;letter-spacing:.02em;text-transform:uppercase;
  transition:transform .15s ease, filter .15s ease}
.vmodal__close span{font-size:24px;line-height:1;font-weight:400}
.vmodal__close:hover{transform:translateY(-2px);filter:brightness(1.06)}
.vmodal__close:focus-visible{outline:3px solid #fff;outline-offset:3px}
.vmodal__frame{position:relative;aspect-ratio:16/9;border-radius:31px;overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.vmodal__spinner{display:none;position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  border:5px solid rgba(255,255,255,.25);border-top-color:var(--orange);animation:vmodal-spin .8s linear infinite}
.vmodal.is-loading .vmodal__spinner{display:block}
@keyframes vmodal-spin{to{transform:rotate(360deg)}}

/* Tema Dream Car para Video.js */
.video-js.vjs-dreamcar{width:100%;height:100%;font-family:var(--t);color:#fff;background:#000}
.video-js.vjs-dreamcar.vjs-fluid{padding-top:56.25%}
.video-js.vjs-dreamcar .vjs-big-play-button{width:96px;height:96px;margin:-48px 0 0 -48px;line-height:92px;border:4px solid #fff;border-radius:50%;
  background:var(--pink);font-size:56px;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .2s ease, background-color .2s ease}
.video-js.vjs-dreamcar:hover .vjs-big-play-button,
.video-js.vjs-dreamcar .vjs-big-play-button:focus{background:var(--blue);transform:scale(1.06)}
.video-js.vjs-dreamcar .vjs-control-bar{height:58px;padding:0 14px;align-items:center;background:linear-gradient(to top, rgba(25,162,213,.95), rgba(25,162,213,.82));
  transition:opacity .35s ease, visibility .35s ease}
/* La barra de avance está oculta y solo aparece al mover el cursor (o tocar) sobre el video.
   main.js pone .is-idle en el marco al abrir, al quedarse quieto 1,6 s y al salir el cursor del video.
   Se mantiene visible mientras el cursor está encima de la barra o un control tiene el foco del teclado. */
.vmodal__frame.is-idle .video-js.vjs-dreamcar .vjs-control-bar{opacity:0;visibility:hidden;pointer-events:none}
.vmodal__frame.is-idle .video-js.vjs-dreamcar .vjs-control-bar:focus-within{opacity:1;visibility:visible;pointer-events:auto}
.vmodal__frame.is-idle .video-js.vjs-dreamcar.vjs-has-started{cursor:none}
.video-js.vjs-dreamcar .vjs-control{height:58px;width:44px}
.video-js.vjs-dreamcar .vjs-button > .vjs-icon-placeholder::before{font-size:28px;line-height:58px}
.video-js.vjs-dreamcar .vjs-time-control{width:auto;min-width:0;padding:0 6px;font-size:15px;font-weight:700;line-height:58px}
.video-js.vjs-dreamcar .vjs-progress-control{height:58px}
.video-js.vjs-dreamcar .vjs-progress-holder{height:8px;margin:0 12px;border-radius:8px}
.video-js.vjs-dreamcar .vjs-progress-control:hover .vjs-progress-holder{font-size:inherit}
.video-js.vjs-dreamcar .vjs-slider{background:rgba(255,255,255,.3)}
.video-js.vjs-dreamcar .vjs-load-progress,
.video-js.vjs-dreamcar .vjs-load-progress div{background:rgba(255,255,255,.45);border-radius:8px}
.video-js.vjs-dreamcar .vjs-play-progress{background:var(--orange);border-radius:8px}
/* Círculo de 16px: la barra de 8px lo corta por la mitad y no se sale por los extremos. */
.video-js.vjs-dreamcar .vjs-play-progress::before{content:""!important;top:50%;right:auto;left:max(0px, calc(100% - 16px));width:16px;height:16px;margin:0;border-radius:50%;background:#fff;transform:translateY(-50%);font-size:0;line-height:0}
.video-js.vjs-dreamcar .vjs-play-progress .vjs-svg-icon{display:none}
.video-js.vjs-dreamcar .vjs-volume-panel{align-items:center}
.video-js.vjs-dreamcar .vjs-volume-bar{border-radius:6px}
.video-js.vjs-dreamcar .vjs-volume-level{background:var(--orange);border-radius:6px}
.video-js.vjs-dreamcar .vjs-time-tooltip,
.video-js.vjs-dreamcar .vjs-mouse-display .vjs-time-tooltip{background:var(--pink);color:#fff;font-family:var(--t);font-weight:700;font-size:18px;line-height:1.1;padding:7px 10px;border-radius:8px;white-space:nowrap}
.video-js.vjs-dreamcar .vjs-loading-spinner{border-color:rgba(255,255,255,.25)}
.video-js.vjs-dreamcar .vjs-loading-spinner::before,
.video-js.vjs-dreamcar .vjs-loading-spinner::after{border-top-color:var(--orange)}
.video-js.vjs-dreamcar .vjs-control:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:8px}
.video-js.vjs-dreamcar .vjs-modal-dialog,.video-js.vjs-dreamcar .vjs-error-display{font-family:var(--t)}
@media (max-width:900px){
  .vmodal{width:calc(100vw - 24px)}
  .vmodal__box{padding-top:54px}
  .vmodal__close{height:40px;padding:0 16px;font-size:15px}
  .vmodal__frame{border-radius:18px}
  .video-js.vjs-dreamcar .vjs-big-play-button{width:72px;height:72px;margin:-36px 0 0 -36px;line-height:68px;font-size:42px}
  .video-js.vjs-dreamcar .vjs-control-bar{height:48px;padding:0 6px}
  .video-js.vjs-dreamcar .vjs-control{height:48px;width:38px}
  .video-js.vjs-dreamcar .vjs-button > .vjs-icon-placeholder::before{font-size:24px;line-height:48px}
  .video-js.vjs-dreamcar .vjs-time-control{font-size:13px;line-height:48px}
  .video-js.vjs-dreamcar .vjs-progress-control{height:48px}
}
@media (prefers-reduced-motion:reduce){ .vmodal,.vmodal::backdrop,.video-js.vjs-dreamcar .vjs-control-bar{transition:none} }

/* <picture> de las imágenes del hero y de Ganadores (versión liviana en celular): no altera el diseño */
.hero picture,.g25 picture{display:contents}

/* ===================== EDICIONES ANTERIORES (ediciones.php · Figma "Ediciones" 1920×1054) ===================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ed,.edd{position:relative;text-align:center}
.ed__title,.edd__title{font-weight:900;color:var(--ink);text-wrap:balance}
.ed__title .c-pink,.edd__title .c-pink{display:block}
.ed__grid{list-style:none;padding:0;margin:0;display:grid}
/* tarjeta 663×220: imagen del Figma + botón "VER GANADORES" (277–286×68 en x 348, y 123 dentro de la tarjeta) */
.ed-card{container-type:inline-size}
.ed-card__link{position:relative;display:block;aspect-ratio:663/220;overflow:hidden;transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease}
.ed-card__img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.ed-card__btn{position:absolute;left:52.56%;top:55.9%;width:43.13%;height:30.8%;display:flex;align-items:center;justify-content:center;
  /* el texto ocupa 226px de ancho como en el Figma (Toyota Type Bold sale más ancha en web que en Figma a 35px) */
  background:var(--pill);border-radius:3.3cqw;color:#fff;font-weight:700;font-size:4cqw;line-height:1;white-space:nowrap;transition:filter .2s ease, transform .2s ease}
.ed-card__link:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(67,69,74,.18)}
.ed-card__link:hover .ed-card__img{transform:scale(1.03)}
.ed-card__link:hover .ed-card__btn{filter:brightness(1.1);transform:scale(1.03)}
.ed-card__link:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

/* Detalle de una edición (edicion.php?n=N): mismas medidas de los marcos de Ganadores 2025 (412×309) */
.edd__back{position:absolute;display:inline-flex;align-items:center;gap:.4em;color:var(--blue);font-weight:700;transition:color .2s ease}
.edd__back:hover{color:var(--pink)}
.edd__cat-title{color:var(--blue);font-weight:400}
.edd__grid{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center}
.edd__item{flex:0 0 calc((100% - 2 * var(--gap-x)) / 3);min-width:0}
.edd__frame{box-shadow:0 10px 28px rgba(67,69,74,.16)}
.edd__name{font-family:var(--p);font-weight:700;color:var(--ink)}
.edd__pager{display:flex;justify-content:center;flex-wrap:wrap}
.edd__pager-btn{gap:.4em;padding:0 1.2em}

@media (min-width: 901px){
  .ed{padding:calc(var(--u) * 230) 0 calc(var(--u) * 133.4)}
  .ed__title{width:calc(var(--u) * 1013.66);margin:0 auto;font-size:calc(var(--u) * 50);line-height:calc(var(--u) * 58)}
  .ed__grid{margin:calc(var(--u) * 34) 0 0 calc(var(--u) * 285.55);width:calc(var(--u) * 1363.52);grid-template-columns:repeat(2, calc(var(--u) * 663));column-gap:calc(var(--u) * 37.52);row-gap:calc(var(--u) * 52)}

  .edd{padding:calc(var(--u) * 230) 0 calc(var(--u) * 120)}
  .edd__back{left:calc(var(--u) * 294.15);top:calc(var(--u) * 180);font-size:calc(var(--u) * 22)}
  .edd__title{width:calc(var(--u) * 1100);margin:0 auto;font-size:calc(var(--u) * 50);line-height:calc(var(--u) * 58)}
  .edd__gallery{width:calc(var(--u) * 1330.7);margin:0 auto}
  .edd__cat{margin-top:calc(var(--u) * 70)}
  .edd__cat-title{font-size:calc(var(--u) * 50);line-height:calc(var(--u) * 58);margin-bottom:calc(var(--u) * 36)}
  .edd__grid{--gap-x:calc(var(--u) * 47.04);column-gap:var(--gap-x);row-gap:calc(var(--u) * 40)}
  .edd__name{margin-top:calc(var(--u) * 24);font-size:calc(var(--u) * 23);line-height:calc(var(--u) * 29)}
  .edd__frame img{inset:auto;left:calc(var(--u) * 8.98);top:calc(var(--u) * 8.41);width:calc(100% - var(--u) * 19.26);height:calc(100% - var(--u) * 16.83)}
  .edd__pager{margin-top:calc(var(--u) * 90);gap:calc(var(--u) * 24)}
  .edd__pager-btn{height:calc(var(--u) * 69);min-width:calc(var(--u) * 260)}
}

@media (max-width: 900px){
  .ed{padding:104px 16px 24px}
  .ed__title{font-size:min(28px, calc((100vw - 32px) / 13));line-height:1.3}
  .ed__grid{margin-top:24px;grid-template-columns:1fr;gap:16px;max-width:663px;margin-inline:auto}

  .edd{padding:96px 16px 24px}
  .edd__back{position:static;margin-bottom:12px;font-size:16px}
  .edd__title{font-size:min(28px, calc((100vw - 32px) / 13));line-height:1.3}
  .edd__cat{margin-top:36px}
  .edd__cat-title{font-size:26px;line-height:34px;margin-bottom:16px}
  .edd__grid{--gap-x:12px;gap:20px 12px}
  .edd__item{flex-basis:calc((100% - 12px) / 2)}
  .edd__frame img{inset:4px;width:calc(100% - 8px);height:calc(100% - 8px)}
  .edd__name{margin-top:8px;font-size:13px;line-height:18px}
  .edd__pager{margin-top:40px;gap:12px}
  .edd__pager-btn{height:52px;font-size:16px;line-height:1}
}
@media (max-width: 520px){
  .edd__grid{gap:24px}
  .edd__item{flex-basis:100%}
  .edd__name{font-size:15px;line-height:20px}
}
@media (prefers-reduced-motion: reduce){
  .ed-card__link,.ed-card__img,.ed-card__btn{transition:none}
}