/* ═══════════════════════════════════════════════════════════════
   UNO Costa Rica — El combustible que te llena de premios
   Todas las proporciones derivan de LP CR UNO.pdf (1441x9180) y
   LP CR UNO mobile.pdf (402x5975). No hay coordenadas absolutas:
   cada medida es un porcentaje del contenedor o un clamp() fluido.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Colores muestreados de los PNG oficiales, no aproximados */
  --blue-deep:  #002E6D;  /* Background_Color.png, tramo final */
  --blue-dark:  #000D20;  /* Background_Color.png, tramo inicial */
  --blue-band:  #1F4D8A;  /* Background_Color-1.png, plano */
  --blue-lift:  #427BAD;  /* Background_Color-2.png, tramo final */
  --yellow:     #FFCD00;
  --sky:        #3098D5;
  --ink:        #1D2733;

  --shell: 1441px;
  --pad: clamp(16px, 4vw, 48px);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  --font: "Segoe UI", system-ui, -apple-system, Arial, Helvetica, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--blue-deep);
  scroll-behavior:smooth;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--blue-deep);
  color:#fff;
  font-family:var(--font);
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
/* <picture> es inline por defecto: como caja intermedia hacía que los %
   de sus <img> se resolvieran contra su ancho natural en vez del
   contenedor, encogiendo y descentrando los títulos. */
picture{display:block;width:100%}
button,input,a{font:inherit}
button{border:0;background:none;color:inherit;cursor:pointer}
[hidden]{display:none!important}

:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--yellow);color:var(--blue-deep);
  padding:12px 20px;font-weight:800;border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

/* Columna de contenido.
   Los % de cada elemento son relativos al ANCHO DE DISEÑO (1441 / 402),
   así que las secciones NO llevan padding lateral: si lo llevaran, el
   porcentaje se calcularía sobre la caja interior y todo encogería.
   El aire lateral lo da el propio % de cada elemento. */
.s1,.s2,.s3,.s4,.s5{
  width:100%;
  margin-inline:auto;
}
.s2,.s3,.s4,.s5{max-width:var(--shell)}

/* ══════════════ SECCIÓN 1 — HERO ══════════════
   El hero NO es una pila de bandas: es una composición solapada.
   Medido en LP CR UNO.pdf (1441): título 203..452, foto 385.5..1409.5,
   «GANA 2 GEELY» 1290..1608. El título monta 66.5px sobre la foto y el
   banner monta 119.5px sobre los autos. Sin esos solapes el hero se lee
   como tres bloques sueltos en vez de una sola imagen. */
.s1{
  max-width:none;
  padding-inline:0;
  /* La banda solo se ve por encima de la foto (arranca al 12.9% en
     desktop y al 11.8% en mobile). El corte al 14% queda detrás de la
     foto, así que por debajo el fondo ya es azul profundo puro y el
     degradado del pie aterriza sin costura. */
  background:linear-gradient(180deg,var(--blue-band) 0,var(--blue-band) 14%,var(--blue-deep) 14%);
  padding-top:clamp(28px,14.09vw,203px);   /* 203/1441 */
}

/* 999/1441 = 69.3% del ancho de diseño */
.s1__title{position:relative;z-index:2;margin:0 auto;width:min(69.3%,999px)}
.s1__title img{width:100%}

/* La foto sangra a ancho completo, pero con la RELACIÓN DE DISEÑO
   (1441x1024). Hasta 1441px eso coincide con el ratio nativo del asset
   (4316/3069) y no recorta nada. Por encima recorta solo cielo, porque
   el anclaje es 'bottom': los autos no se cortan nunca. */
.s1__visual{
  position:relative;z-index:1;
  margin-top:max(-67px,-4.61vw);           /* solape -66.5/1441 */
}
/* El PDF dibuja una capa de degradado de 1440x360 sobre el pie de la foto
   (desktop y=1110..1470, mobile y=305..404) que la funde con el azul. Sin
   ella el asfalto corta en seco contra el fondo. Los alfa salen de
   despejar la mezcla contra el render del PDF, que apila DOS capas ahí:
   72%→0 · 80%→.29 · 85%→.41 · 90%→.55 · 95%→.82 · 100%→1 */
.s1__visual::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,46,109,0)    72%,
    rgba(0,46,109,.29)  80%,
    rgba(0,46,109,.41)  85%,
    rgba(0,46,109,.55)  90%,
    rgba(0,46,109,.82)  95%,
    rgba(0,46,109,1)   100%);
}
.s1__visual img{
  width:100%;
  aspect-ratio:1441/1024;
  object-fit:cover;
  object-position:center bottom;
}

.s1__prizes{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(20px,4.72vw,68px);             /* 68/1441 */
  margin-top:max(-120px,-8.29vw);          /* solape -119.5/1441 */
}
.s1__cars{width:min(81.9%,1180px)}   /* 1180/1441 */
.s1__fuel{width:min(64.7%,933px)}    /* 932.5/1441 */

/* ── Bodegón de premios ──
   Las etiquetas son assets sueltos posicionados en %.
   Los % vienen de medir AMBOS PDF: coinciden dentro de 1.5 puntos,
   así que una sola disposición sirve para los dos breakpoints. */
.s1__pack{
  position:relative;
  margin:clamp(20px,3.33vw,48px) auto 0;   /* 48/1441 */
  width:min(78.3%,1129px);           /* 1129/1441 */
  aspect-ratio:1129/698;
}
.s1__pack-art{
  position:absolute;left:13%;top:0;width:86.7%;
}
.s1__label{position:absolute}
.s1__label--lub{left:0;    top:10.5%; width:32.5%}
.s1__label--bon{left:56.6%;top:9.8%;  width:43.3%}
.s1__label--par{left:52.7%;top:85.3%; width:24.6%}

/* ══════════════ TÍTULOS DE SECCIÓN ══════════════ */
.section-title{margin:0 auto;display:flex;justify-content:center}
.section-title img{width:100%}

/* ══════════════ SECCIÓN 2 — CÓMO PARTICIPAR ══════════════ */
.s2{padding-block:clamp(40px,6.9vw,130px) 0}
.s2 .section-title{width:min(45%,652px)}       /* 652/1441 */
.s2__steps{display:block;margin:clamp(26px,6.7vw,120px) auto 0;width:min(88.8%,1279px)}
.s2__steps img{width:100%}

/* ══════════════ SECCIÓN 3 — SORTEOS ══════════════ */
.s3{padding-block:clamp(46px,9.1vw,170px) 0}
.s3 .section-title{width:min(70.7%,1019px)}    /* 1019/1441 */

.s3__grid{
  list-style:none;margin:clamp(28px,6.5vw,118px) auto 0;padding:0;
  width:min(76.8%,1107px);                      /* 1107/1441 */
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,1.9vw,30px);
}
.s3__grid img{width:100%}

/* Sorteo final: desktop compone; mobile usa el asset ya armado */
.s3__final{margin-top:clamp(40px,10.1vw,185px)}
.s3__final-m{display:none}
.s3__final-d{display:flex;flex-direction:column;align-items:center}
/* Pills de fondo — colores muestreados de Rectangle_Sorteo_Final*.png */
.pill{
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;
  padding:clamp(6px,.85vw,15px) clamp(16px,2.2vw,42px);
}
.pill--sky{background:var(--sky)}
.pill--yellow{background:var(--yellow)}
.pill img{width:100%}

.s3__final-kicker{width:min(36.1%,520px)}      /* 520/1441 con el pill */
.s3__final-date{width:min(28%,403px);margin-top:clamp(12px,1.6vw,30px)}
.s3__final-logo{width:min(72.4%,1043px);margin-top:clamp(18px,2.4vw,46px)}

/* El blanco sangra por la izquierda y el azul por la derecha, solapados,
   tal como en el PDF (x=0..1110 arriba y x=336..1441 abajo) */
.s3__final-cars{
  position:relative;width:100%;
  margin-top:clamp(10px,1.4vw,26px);
  aspect-ratio:1441/877;
}
.s3__final-cars img{position:absolute;width:77%}
.s3__final-cars img:first-child{left:-2%;top:0}
.s3__final-cars img:last-child{right:-2%;top:29%}

/* ══════════════ SECCIÓN 4 — ESTACIONES ══════════════ */
.s4{padding-block:clamp(44px,4.1vw,78px) 0}
.s4 .section-title{width:min(67.1%,967px)}     /* 967/1441 */
.s4__lead{margin:clamp(8px,.85vw,16px) auto 0;width:min(49.9%,719px)}   /* 719/1441 */
.s4__lead img{width:100%}

/* ── Buscador ──
   Reconstruido como HTML funcional. Conserva la silueta de
   Buscador.png (pill blanco, radio completo, sombra suave, icono a
   cada lado) pero con iconografía UNO: el asset original es una
   captura de Google Maps y no puede embarcarse. */
.finder{
  margin:clamp(24px,6.7vw,100px) auto 0;        /* 97/1441 */
  width:min(65%,937px);                        /* 936.9/1441 */
  display:flex;gap:clamp(8px,1vw,16px);
  position:relative;
}
.finder__search{
  flex:1 1 auto;min-width:0;position:relative;
  display:flex;align-items:center;
  min-height:clamp(54px,4.2vw,64px);     /* usable: el 11.3vw del PDF
                                            es un mockup, no un input */
  background:#fff;border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  padding-inline:clamp(14px,1.4vw,22px);
}
.finder__pin{width:clamp(20px,1.7vw,26px);height:clamp(20px,1.7vw,26px);flex:0 0 auto}
.finder__search input{
  flex:1 1 auto;min-width:0;
  border:0;outline:0;background:none;
  color:var(--ink);font-size:clamp(14px,1.35vw,19px);font-weight:600;
  padding:clamp(13px,1.35vw,20px) clamp(8px,.9vw,14px);
}
.finder__search input::placeholder{color:#9AA3AC;font-weight:500}
.finder__search input::-webkit-search-cancel-button{display:none}
.finder__clear{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:#E8EDF2;color:#5C6871;font-size:19px;line-height:1;
}
.finder__geo{
  flex:0 1 auto;min-width:0;
  min-height:clamp(54px,4.2vw,64px);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--sky);color:#fff;border-radius:999px;
  padding:0 clamp(14px,1.5vw,26px);
  font-size:clamp(14px,1.35vw,19px);font-weight:800;font-style:italic;
  text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:filter .15s ease;
}
.finder__geo:hover{filter:brightness(1.08)}
.finder__geo:disabled{opacity:.6;cursor:progress}
.finder__geo svg{width:clamp(16px,1.35vw,21px);height:clamp(16px,1.35vw,21px);flex:0 0 auto}

.finder__results{
  position:absolute;z-index:40;left:0;right:0;top:calc(100% + 8px);
  list-style:none;margin:0;padding:6px;
  background:#fff;border-radius:var(--r-md);
  box-shadow:0 18px 44px rgba(0,0,0,.34);
  max-height:min(46vh,340px);overflow:auto;
}
.finder__results li+li{border-top:1px solid #EAEFF4}
.finder__results button{
  display:block;width:100%;text-align:left;
  padding:12px 14px;border-radius:var(--r-sm);
}
.finder__results button:hover,.finder__results button:focus-visible{background:#F1F7FC}
.finder__results strong{display:block;color:var(--blue-deep);font-size:15px;font-weight:800}
.finder__results small{display:block;margin-top:3px;color:#5C6871;font-size:13px;line-height:1.4}
.finder__results .no-coords{display:inline-block;margin-top:4px;color:#8A6D00;font-size:11px;font-weight:700}
.finder__empty{padding:14px;color:#5C6871;font-size:13px;text-align:center}

/* ── Banner superior del mapa ──
   Pegado visualmente al mapa: comparte ancho y cierra por abajo. */
.banner{
  margin:clamp(20px,4.3vw,64px) auto 0;
  width:min(71.8%,1034px);                     /* igual ancho que el mapa */
  display:flex;align-items:center;gap:clamp(10px,1.2vw,20px);
  background:var(--blue-band);
  border:1px solid rgba(255,255,255,.16);
  border-bottom:0;
  border-radius:var(--r-md) var(--r-md) 0 0;
  padding:clamp(12px,1.3vw,20px) clamp(14px,1.5vw,24px);
}
.banner__pin{
  flex:0 0 auto;width:14px;height:14px;border-radius:50%;
  background:var(--yellow);box-shadow:0 0 0 4px rgba(255,205,0,.26);
}
.banner__copy{min-width:0;flex:1 1 auto}
.banner__copy small{
  display:block;color:var(--yellow);
  font-size:clamp(11px,.9vw,13px);font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;
}
.banner__copy strong{
  display:block;margin-top:2px;
  font-size:clamp(17px,1.55vw,24px);font-weight:900;
  font-style:italic;text-transform:uppercase;line-height:1.15;
}
.banner__copy span{
  display:block;margin-top:3px;color:#CFE0F1;
  font-size:clamp(13px,1.1vw,16px);line-height:1.4;
}
.banner__actions{
  flex:0 0 auto;display:flex;align-items:center;gap:clamp(8px,.8vw,12px);
}
/* Salida de la selección: secundaria, para no competir con «Cómo llegar» */
.banner__reset{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.45);
  border-radius:999px;padding:9px clamp(12px,1.2vw,18px);
  font-size:clamp(12px,1.05vw,15px);font-weight:800;font-style:italic;
  text-transform:uppercase;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease;
}
.banner__reset:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.8)}
.banner__reset svg{width:15px;height:15px;flex:0 0 auto}

.banner__go{
  flex:0 0 auto;
  background:var(--yellow);color:var(--blue-deep);
  border-radius:999px;padding:11px clamp(16px,1.5vw,24px);
  font-size:clamp(13px,1.1vw,16px);font-weight:900;font-style:italic;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;
}
.banner__go:hover{filter:brightness(1.06)}

/* ── Mapa ── */
.map-wrap{
  margin:clamp(20px,4.3vw,64px) auto 0;         /* 62/1441 */
  width:min(71.8%,1034px);                     /* 1034/1441 */
  position:relative;
}
.banner:not([hidden]) + .map-wrap{margin-top:0}
#map{
  width:100%;aspect-ratio:1034/905;            /* Map_Placeholder.png */
  border-radius:var(--r-md);
  background:#A3D4E4;
  border:1px solid rgba(255,255,255,.16);
  z-index:1;
}
.banner:not([hidden]) ~ .map-wrap #map{border-radius:0 0 var(--r-md) var(--r-md)}
.map-fallback{
  position:absolute;inset:0;z-index:2;margin:0;
  display:grid;place-content:center;text-align:center;
  background:var(--blue-band);border-radius:var(--r-md);
  padding:24px;color:#DCE8F4;font-size:14px;line-height:1.5;
}
.map-note{
  margin:14px auto 0;width:min(71.8%,1034px);
  color:#AFC6DE;font-size:clamp(11px,.92vw,13px);line-height:1.5;
}

/* ── Marcadores ── */
.uno-pin{
  width:26px;height:26px;border-radius:50% 50% 50% 0;
  background:var(--sky);border:2.5px solid #fff;
  transform:rotate(-45deg);
  box-shadow:0 3px 9px rgba(0,0,0,.4);
  transition:background .18s ease,transform .18s ease;
}
.uno-pin::after{
  content:"";position:absolute;left:50%;top:50%;
  width:8px;height:8px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);
}
.uno-pin--active{background:var(--yellow);transform:rotate(-45deg) scale(1.22)}
.uno-pin--active::after{background:var(--blue-deep)}

/* ── Popup UNO (reemplaza el popup blanco de Leaflet) ── */
.leaflet-popup-content-wrapper{
  background:var(--blue-deep);color:#fff;
  border-radius:var(--r-md);padding:0;overflow:hidden;
  box-shadow:0 14px 38px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18);
}
.leaflet-popup-content{margin:0;width:262px!important;line-height:1.45}
.leaflet-popup-tip{background:var(--blue-deep)}
.leaflet-popup-close-button{color:#fff!important;font-size:19px!important;padding:7px 8px 0 0!important}
.leaflet-popup-close-button:hover{color:var(--yellow)!important}

.pop__kicker{
  background:var(--yellow);color:var(--blue-deep);
  padding:7px 13px;font-size:11px;font-weight:900;
  letter-spacing:.11em;text-transform:uppercase;
}
.pop__body{padding:13px 15px 15px}
.pop__name{
  display:block;font-size:16px;font-weight:900;font-style:italic;
  text-transform:uppercase;line-height:1.2;
}
.pop__addr{display:block;margin-top:6px;color:#C8DCEF;font-size:13px}
.pop__prov{display:block;margin-top:4px;color:#8FB0CE;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.pop__dist{display:block;margin-top:9px;color:var(--yellow);font-size:14px;font-weight:900}
.pop__go{
  display:block;margin-top:11px;
  background:var(--yellow);color:var(--blue-deep);
  border-radius:999px;padding:9px 13px;
  font-size:13px;font-weight:900;font-style:italic;
  text-transform:uppercase;text-align:center;text-decoration:none;
}
.pop__go:hover{filter:brightness(1.06)}

.leaflet-control-zoom a{color:var(--blue-deep)!important;font-weight:800}
.leaflet-container{font-family:var(--font)}
.leaflet-control-attribution{font-size:10px}

/* ══════════════ SECCIÓN 5 — CTA ══════════════ */
.s5{
  padding-block:clamp(46px,11.5vw,210px) clamp(40px,5vw,100px);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(14px,1.8vw,32px);
}
.cta{
  display:block;width:min(68.6%,989px);        /* 989/1441 */
  padding:0;border-radius:999px;
  transition:transform .15s ease,filter .15s ease;
}
.cta:hover{transform:translateY(-2px);filter:brightness(1.05)}
.cta img{width:100%}

/* ══════════════ MODAL REGLAMENTO ══════════════ */
.terms{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:clamp(0px,3vh,40px) clamp(0px,3vw,40px)}
.terms__backdrop{position:absolute;inset:0;background:rgba(0,12,30,.84);backdrop-filter:blur(5px)}
.terms__dialog{
  position:relative;z-index:1;
  width:min(1080px,100%);height:min(100%,900px);
  display:flex;flex-direction:column;
  background:#F6F9FC;
  border-radius:clamp(0px,2vw,var(--r-lg));
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.terms__head{
  flex:0 0 auto;
  background:var(--blue-deep);color:#fff;
  padding:clamp(16px,2vw,26px) clamp(18px,2.4vw,34px);
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
}
.terms__head span{display:block;color:var(--yellow);font-size:11px;font-weight:900;letter-spacing:.16em}
.terms__head h2{margin:6px 0 0;font-size:clamp(17px,2.1vw,31px);line-height:1.1;font-style:italic}
.terms__x{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:var(--yellow);color:var(--blue-deep);
  font-size:26px;line-height:1;font-weight:700;
}
.terms__rule{flex:0 0 auto;height:7px;background:var(--yellow)}
.terms__body{
  flex:1 1 auto;min-height:0;
  display:flex;
  background:#F6F9FC;
}
/* Visor del PDF: ocupa todo el cuerpo del modal. El scroll lo maneja el
   visor del navegador, así que el contenedor no debe scrollear también. */
.terms__pdf{flex:1 1 auto;width:100%;min-height:0;border:0;display:block;background:#F6F9FC}

body.is-locked{overflow:hidden}

/* ═══════════════ TABLET — 720 a 1023 ═══════════════ */
@media (max-width:1023px){
  .s1__title{width:min(78%,999px)}
  .s1__cars{width:min(88%,1180px)}
  .s1__fuel{width:min(74%,933px)}
  .s1__pack{width:min(86%,1129px)}
  .s2 .section-title{width:min(58%,652px)}
  .s2__steps{width:min(96%,1279px)}
  .s3 .section-title{width:min(82%,1019px)}
  .s3__grid{width:min(90%,1107px)}
  .s3__final-kicker{width:min(42%,435px)}
  .s3__final-date{width:min(33%,343px)}
  .s3__final-logo{width:min(84%,1043px)}
  .s4 .section-title{width:min(80%,967px)}
  .finder{width:min(88%,937px)}
  .banner,.map-wrap,.map-note{width:min(92%,1034px)}
  #map{aspect-ratio:1/1}
  .cta{width:min(82%,989px)}
}

/* ═══════════════ MOBILE — hasta 719 ═══════════════
   Composición del PDF mobile (402x5975): ritmo vertical propio,
   NO es el desktop reducido. */
@media (max-width:719px){
  .s1{
    /* misma lógica que desktop: corte detrás de la foto */
    background:linear-gradient(180deg,var(--blue-band) 0,var(--blue-band) 12.5%,var(--blue-deep) 12.5%);
    padding-top:clamp(18px,12.19vw,56px);  /* 49/402 */
  }
  /* 289/402 = 71.9% */
  .s1__title{width:71.9%}
  /* En mobile el título apenas monta y el banner pega sin solapar */
  .s1__visual{margin-top:max(-16px,-3.73vw)}   /* -15/402 */
  .s1__visual img{aspect-ratio:402/286}       /* ratio nativo, sin recorte */

  .s1__prizes{gap:clamp(18px,6.14vw,30px);margin-top:0}
  .s1__cars{width:83.3%}   /* 335/402 */
  .s1__fuel{width:65.4%}   /* 263/402 */

  /* 353.2/402 = 87.9% — ratio propio del PDF mobile */
  .s1__pack{width:87.9%;aspect-ratio:353/209;margin-top:clamp(20px,6.17vw,32px)}
  .s1__pack-art{left:13.1%;width:84.7%}
  .s1__label--lub{left:0;    top:10.1%; width:33.5%}
  .s1__label--bon{left:56%;  top:9.4%;  width:44%}
  .s1__label--par{left:52.2%;top:84.6%; width:25.5%}

  .s2{padding-top:clamp(38px,12.2vw,64px)}
  .s2 .section-title{width:78%}
  /* 326/402 = 81.1% — la imagen mobile ya trae los 4 pasos apilados */
  .s2__steps{width:84%;margin-top:clamp(20px,6.2vw,34px)}

  .s3{padding-top:clamp(40px,10.9vw,58px)}
  .s3 .section-title{width:81%}          /* 325.5/402 */
  /* Columna, no grilla */
  .s3__grid{
    width:84%;grid-template-columns:1fr;
    gap:clamp(22px,7.5vw,40px);          /* 30/402 */
    margin-top:clamp(30px,11.2vw,58px);  /* 45/402 */
  }
  /* El bloque final ya viene compuesto para mobile */
  .s3__final-d{display:none}
  .s3__final-m{display:block;margin:clamp(38px,13.9vw,74px) auto 0;width:96%}

  .s4{padding-top:clamp(52px,20.9vw,110px)}
  .s4 .section-title{width:53.7%}        /* 216/402 medido en el PDF */
  .s4__lead{margin-top:clamp(12px,3.6vw,20px);width:64.2%}   /* 258/402 medido */

  /* El PDF mobile apila buscador y botón */
  .finder{
    width:92%;flex-direction:column;
    margin-top:clamp(12px,3.5vw,20px);   /* 14/402 */
  }
  .finder__geo{
    width:100%;min-height:54px;
    font-size:15px;
  }
  .finder__search{min-height:54px}
  .finder__search input{font-size:16px}            /* 16px evita el zoom de iOS */
  .finder__results{top:auto;bottom:calc(100% + 8px);max-height:44vh}

  .banner{
    width:92%;
    flex-wrap:wrap;
    gap:10px 12px;
    padding:14px 16px;
  }
  .banner__copy{flex:1 1 100%}
  .banner__actions{flex:1 1 100%;gap:10px}
  .banner__reset{flex:0 0 auto;padding:11px 13px;font-size:12px;gap:6px}
  .banner__reset svg{width:15px;height:15px}
  .banner__go{flex:1 1 auto;text-align:center}

  .map-wrap,.map-note{width:92%}
  /* 315/276 = 1.141, igual que desktop; algo más alto para el dedo */
  #map{aspect-ratio:315/300}

  .leaflet-popup-content{width:232px!important}

  .s5{padding-block:clamp(36px,10.2vw,54px) clamp(44px,13vw,72px);gap:clamp(16px,5vw,26px)}
  /* 369.6/402 = 92% — pills a ancho casi completo */
  .cta{width:92%}

  .terms__dialog{height:100%;border-radius:0}
  .terms__head h2{font-size:17px}
}

/* ═══════════════ DESKTOP COMPACTO ═══════════════
   El hero conserva la composición vertical aprobada definida arriba:
   título, foto completa y «GANA 2 GEELY» apilados con sus solapes. No se
   reemplaza por una foto a sangre con object-fit:cover porque eso recorta
   la marquesina y cambia la composición de la referencia. Mobile tampoco
   se toca. Aquí solo se compactan las secciones posteriores. */
@media (min-width:1024px){
  /* Aire entre secciones: ~30% menos que el artboard */
  .s2{padding-block:clamp(32px,4.6vw,86px) 0}
  .s2__steps{margin-top:clamp(20px,4.4vw,80px)}
  .s3{padding-block:clamp(34px,6vw,112px) 0}
  .s3__grid{margin-top:clamp(22px,4.3vw,78px)}
  .s3__final{margin-top:clamp(30px,6.7vw,122px)}
  .s4{padding-block:clamp(34px,2.8vw,52px) 0}
  .finder{margin-top:clamp(18px,3.4vw,50px)}
  /* El mapa pasa a mandar por ALTO, no por relación de aspecto, para que
     toda la sección de estaciones entre en una pantalla. A 1903x955 el
     resto de la sección (títulos + buscador + banner) ocupa ~430px. */
  .banner{margin-top:clamp(16px,2.6vw,38px)}
  .map-wrap{margin-top:clamp(16px,2.6vw,38px)}
  #map{aspect-ratio:auto;height:clamp(330px,47vh,760px)}
  .s5{padding-block:clamp(34px,7.6vw,138px) clamp(30px,3.4vw,66px)}
}

@media print{
  .finder,.banner,.map-wrap,.s5,.skip-link{display:none}
}