/*
 * PRIAS · Edición 27 — "El escenario"
 * La página es el escenario del afiche: arriba la pared LED con el logo,
 * abajo el piso brillante azul acero donde vive todo lo demás.
 *
 * Índice
 *  0. Tipografías propias
 *  1. Tokens y base
 *  2. Piezas comunes (botones, etiquetas, títulos)
 *  3. Hero: escenario, pared, contador, piso
 *  4. Formulario
 *  5. Secciones del piso
 *  6. Cierre y pie · 6b. Política de Privacidad (privacidad.html)
 *  7. Barras fijas
 *  8. Movimiento
 */

/* ------------------------------------------------------------------ */
/* 0. Tipografías propias                                              */
/* ------------------------------------------------------------------ */

/*
 * Se sirven desde assets/fonts/ (licencia en assets/fonts/LICENSE.txt): la página no llama a
 * ningún tercero. Solo los subconjuntos "latin" y "latin-ext"; el navegador baja cada archivo
 * únicamente si el texto lo necesita (unicode-range). Archivo es variable: un mismo archivo
 * cubre los pesos 400 a 700.
 */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "League Gothic";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/league-gothic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "League Gothic";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("../assets/fonts/league-gothic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/michroma-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Michroma";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/michroma-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ */
/* 1. Tokens y base                                                    */
/* ------------------------------------------------------------------ */

/*
 * Fuentes de respaldo ajustadas al ancho de las definitivas (medido contra Arial):
 * mientras llegan las definitivas, el texto ocupa lo mismo y nada salta de línea.
 * Para el titular, primero DIN Condensed Bold (viene en iPhone y en Mac): es alta y condensada
 * como la definitiva, así que si la fuente tarda o no llega el afiche se sigue pareciendo al afiche.
 */
@font-face {
  font-family: "League Gothic Fallback 0";
  src: local("DINCondensed-Bold"), local("DIN Condensed Bold");
  size-adjust: 88%;
  ascent-override: 96%;
  descent-override: 20%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "League Gothic Fallback";
  src: local("Arial Narrow"), local("ArialNarrow");
  size-adjust: 64%;
}
@font-face {
  font-family: "League Gothic Fallback 2";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 53%;
}
@font-face {
  font-family: "Michroma Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 140%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Roboto");
  size-adjust: 98%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Roboto Bold");
  font-weight: 600 700;
  size-adjust: 95%;
}

:root {
  /* Marca (muestreados de los afiches) */
  --red: #EC1C24;
  --red-ui: #DF151D;        /* botones: blanco encima pasa 4.5:1 */
  --red-ui-hover: #C10F17;
  --red-text: #C4121A;      /* errores sobre blanco */
  --indigo: #343474;
  --navy: #2C445C;
  --blue: #4C84AC;
  --yellow: #F4E43C;
  --gold: #C4B49C;
  --gold-hi: #E9DEC8;
  --teal: #046C84;
  --ice: #F5FAFD;

  /* Escena */
  --arena: #04111D;
  --truss: #081828;
  --floor-900: #071625;
  --floor-800: #0C2036;
  --floor-700: #11293F;
  --floor-600: #1B3553;
  --floor-500: #2A476A;
  --steel: #486888;
  --steel-hi: #8898B8;

  /* Texto */
  --ink: #0B1B2E;
  --slate: #43546A;
  --on-floor: #F5FAFD;
  --on-floor-2: #C5D2E2;
  --on-floor-3: #9BAEC6;

  --line: rgba(196, 222, 255, .2);
  --line-strong: rgba(214, 232, 255, .48);

  --f-display: "League Gothic", "League Gothic Fallback 0", "League Gothic Fallback", "League Gothic Fallback 2", "Arial Narrow", Impact, sans-serif;
  --f-techno: "Michroma", "Michroma Fallback", Arial, sans-serif;
  --f-text: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: 20px;
  --focus: var(--yellow);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 14px;
}
/* Hasta 1159 px hay barra fija abajo (68 px): lo que recibe el foco se detiene por encima de ella */
@media (max-width: 1159px) { html { scroll-padding-bottom: 84px; } }

body {
  margin: 0;
  background: var(--floor-900);
  color: var(--on-floor);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; }
img { max-width: 100%; height: auto; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }

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

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 12px 18px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  border-radius: 10px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline-color: var(--indigo); }
main:focus { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: min(100% - var(--gutter) * 2, 1180px);
  margin-inline: auto;
}

/* ------------------------------------------------------------------ */
/* 2. Piezas comunes                                                   */
/* ------------------------------------------------------------------ */

/* Etiqueta "techno": solo rótulos cortos, nunca texto corrido */
.label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-techno);
  font-size: .6875rem;
  line-height: 1.35;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.label::before {
  content: "";
  flex: none;
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .8;
}
.label--ink { color: var(--ink); font-size: .75rem; }
.label--center { justify-content: center; text-align: center; }
.label--center::after {
  content: "";
  flex: none;
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .8;
}
.label--big { font-size: .75rem; letter-spacing: .14em; }

/* Titulares: alto y condensado, como "EN PLAZA LAS AMÉRICAS" */
.h2 {
  margin-top: 14px;
  font-family: var(--f-display);
  font-size: clamp(2.9rem, 13.4vw, 5.5rem);
  line-height: .94;
  letter-spacing: .004em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff;
}
.h2--red { color: var(--red); }
.h2--sm { font-size: clamp(2.6rem, 11vw, 4.25rem); }
.h2--stack span { display: block; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 14px;
  font-family: var(--f-text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn--primary {
  background: var(--red-ui);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    inset 0 -2px 0 rgba(90, 0, 4, .22),
    0 14px 28px -12px rgba(223, 21, 29, .8);
}
.btn--primary:hover { background: var(--red-ui-hover); }
.btn--primary:active { transform: translateY(1px); }
.btn--compact { min-height: 48px; padding: 0 22px; font-size: 1.0625rem; border-radius: 12px; }
.btn--block { width: 100%; min-height: 58px; }
.btn--lg { min-height: 62px; padding: 0 30px; font-size: 1.1875rem; }
.btn--ghost {
  background: rgba(255, 255, 255, .04);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(214, 232, 255, .62);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.btn__arrow { flex: none; transition: transform .2s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Caja de luz: un panel brillante sobre el piso, primo de la pared LED */
.lightbox {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff 0%, #F5FAFD 55%, #EDF3FA 100%);
  color: var(--ink);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .8),
    0 0 80px rgba(150, 195, 250, .2),
    0 46px 80px -34px rgba(0, 6, 16, .9);
  --focus: var(--indigo);
}
.lightbox::before { /* rayos tenues, como los de la pared */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(118deg, transparent 0 58%, rgba(76, 132, 172, .06) 58% 59.2%, transparent 59.2% 66%, rgba(76, 132, 172, .045) 66% 68.4%, transparent 68.4%),
    linear-gradient(62deg, transparent 0 8%, rgba(76, 132, 172, .05) 8% 9%, transparent 9%);
  pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* 3. Hero                                                             */
/* ------------------------------------------------------------------ */

.hero {
  /* Teléfono: la foto llena el ancho y se recorta por los lados (y un poco del techo) */
  --stage-h: clamp(470px, 136vw, 650px);
  --crop: 1.06;
  --photo-h: calc(var(--stage-h) * var(--crop));
  --photo-w: calc(var(--photo-h) * 1.3416);
  --horizon: calc(var(--stage-h) * .891);
  position: relative;
  color: #fff;
}
/* Pantallas bajas (Safari o el navegador de Instagram, con sus barras, dejan unos 660 px de alto):
   el escenario cede lo justo para que las dos líneas del titular queden por encima de la barra fija.
   95px = 17 de aire + 68 de la barra + 10 de margen; 22.2vw = las dos líneas del titular.
   --vh0 es ese mismo alto medido una vez por js/main.js, para que el teclado no mueva nada.
   El logo y los textos de la pared encogen con el escenario (tercer término de sus medidas). */
@supports (height: 100svh) {
  @media (max-width: 759px) {
    .hero { --stage-h: clamp(470px, min(136vw, var(--vh0, 100svh) - 95px - 22.2vw), 650px); }
  }
}

.hero__arena {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 46px;
}
.hero__arena::before { /* la arena: pared oscura arriba, piso brillante que se apaga hacia ti */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to bottom,
    var(--arena) 0,
    #07192A calc(var(--horizon) - 5px),
    #7189AD calc(var(--horizon) + 3px),
    var(--floor-500) var(--stage-h),
    #173049 calc(var(--stage-h) + 110px),
    var(--floor-800) 100%);
}

/* --- El escenario --- */
.stage {
  position: relative;
  height: var(--stage-h);
  overflow: hidden;
  background: #E6EEF8;
}
.stage__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.stage__photo img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--photo-w);
  max-width: none;
  height: var(--photo-h);
  transform: translateX(-50%);
}
.stage__photo::after { /* el piso de la foto se funde con el piso de la página */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 11.5%;
  background: linear-gradient(to bottom, rgba(42, 71, 106, 0) 0%, rgba(42, 71, 106, .74) 58%, var(--floor-500) 100%);
}

/* --- La pared LED: el "lockup" del afiche --- */
.wall {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--stage-h) * .176);
  text-align: center;
}
.wall__logo { width: min(74vw, 352px, var(--stage-h) * .5441); }
.wall__logo img { width: 100%; }
.wall__lines { margin-top: max(-1.6vw, -8px); }
.wall__place {
  font-family: var(--f-display);
  font-size: min(11.4vw, 54px, var(--stage-h) * .0838);
  line-height: .9;
  letter-spacing: .012em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--red);
}
.wall__date {
  margin-top: .38em;
  font-size: min(4.75vw, 22.5px, var(--stage-h) * .0349);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.005em;
  white-space: nowrap;
  color: var(--indigo);
}

/* Sello "Edición 27": oro champán sobre una placa del color de la tramoya */
.sello {
  position: absolute;
  right: max(20px, 50% - 200px);
  bottom: calc(var(--stage-h) * .297);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 19px 7px 21px;
  background: linear-gradient(155deg, #12304D 0%, var(--truss) 62%);
  color: var(--gold);
  font-family: var(--f-techno);
  line-height: 1;
  text-transform: uppercase;
  clip-path: polygon(13px 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
}
.sello__word { font-size: .5625rem; letter-spacing: .2em; margin-right: -.2em; color: var(--gold-hi); }
.sello__num { font-size: 1.875rem; letter-spacing: .02em; -webkit-text-stroke: .7px currentColor; }

.wall__sponsor {
  position: absolute;
  left: max(20px, 50% - 200px);
  bottom: calc(var(--stage-h) * .297);
  display: flex;
  align-items: center;
  gap: 9px;
}
.wall__sponsor-label {
  max-width: 7.5em;
  font-size: .625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .11em;
  text-align: right;
  text-transform: uppercase;
  color: var(--indigo);
}
.wall__sponsor img { width: min(20vw, 96px, var(--stage-h) * .147); }

/* --- Contador: una franja LED en el frente de la tarima --- */
.ticker {
  position: absolute;
  left: max(14px, 50% - 230px);
  right: max(14px, 50% - 230px);
  bottom: calc(var(--stage-h) * .04);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 60px;
  padding: 0 14px;
  background: linear-gradient(180deg, #0A1A2B 0%, #040C16 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 1.5px 0 rgba(226, 240, 255, .85),
    inset 0 -1px 0 rgba(160, 200, 250, .35),
    0 14px 26px -8px rgba(2, 10, 22, .7),
    0 0 26px rgba(170, 205, 255, .18);
  color: #fff;
}
.ticker__label {
  flex: none;
  font-family: var(--f-techno);
  font-size: .625rem;
  line-height: 1.25;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.ticker__units { display: flex; align-items: stretch; }
.ticker__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 62px;
  padding: 0 6px;
}
.ticker__unit + .ticker__unit { border-left: 1px solid rgba(196, 222, 255, .22); }
.ticker__n {
  font-family: var(--f-techno);
  font-size: 1.3125rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  min-width: 2ch;
  text-align: center;
  text-shadow: 0 0 14px rgba(190, 220, 255, .55);
}
.ticker__u {
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-floor-2);
}
.ticker__msg {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}

/* --- El piso bajo la tarima: titular y bajada --- */
.hero__floor {
  position: relative;
  padding: 17px var(--gutter) 0;
}
.hero__title {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 11.9vw, 4rem);
  line-height: .93;
  letter-spacing: .004em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero__sub {
  margin-top: 10px;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.45;
  color: #DCE6F2;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ */
/* 4. Formulario                                                       */
/* ------------------------------------------------------------------ */

.lead {
  position: relative;
  z-index: 3;
  margin: 26px 12px 0;
  scroll-margin-top: 12px;
}
.lead::after { /* reflejo de la tarjeta en el piso */
  content: "";
  display: block;
  height: 40px;
  margin: 0 7%;
  background: radial-gradient(ellipse at 50% 0%, rgba(214, 232, 255, .3), transparent 68%);
  pointer-events: none;
}
.lead__card {
  position: relative;
  overflow: hidden;
  padding: 26px 20px 22px;
  isolation: isolate;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #F6FAFE 100%);
  color: var(--ink);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .85),
    0 0 70px rgba(160, 200, 250, .26),
    0 34px 70px -26px rgba(0, 6, 16, .9);
  --focus: var(--indigo);
}
.lead__card::before { /* rayos tenues de la pared LED: se disuelven hacia abajo, sin corte */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(116deg, transparent 0 66%, rgba(76, 132, 172, .07) 66% 67.6%, transparent 67.6% 74%, rgba(76, 132, 172, .05) 74% 77%, transparent 77%);
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.lead__title {
  font-family: var(--f-display);
  font-size: 2.25rem;
  line-height: .96;
  letter-spacing: .004em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--indigo);
}
.lead__support {
  margin-top: 8px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--slate);
}
.lead__noscript {
  margin: 16px 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #FFF3F3;
  color: var(--red-text);
  font-weight: 600;
  font-size: .9375rem;
}

#lead-form { margin-top: 20px; }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.field input {
  display: block;
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1.5px solid #8292A8;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field input::placeholder { color: #627082; font-weight: 400; opacity: 1; }
.field input:hover { border-color: #5C6E87; }
.field input:focus-visible {
  outline: 3px solid var(--indigo);
  outline-offset: 2px;
  border-color: var(--indigo);
  border-radius: 12px;
}
.field input[aria-invalid="true"] {
  border-color: var(--red-text);
  background: #FFF7F7;
  box-shadow: inset 0 0 0 1px var(--red-text);
}
.field-help {
  margin-top: 6px;
  font-size: .8438rem;
  line-height: 1.4;
  color: var(--slate);
}
.field-error {
  position: relative;
  margin-top: 6px;
  padding-left: 24px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--red-text);
}
.field-error::before { /* signo de aviso dibujado, no un emoji */
  content: "!";
  position: absolute;
  left: 0;
  top: .12em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--red-text);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
/* Con el aviso del teléfono a la vista sobra la ayuda: dicen lo mismo, y el formulario salta menos */
.field-error:not([hidden]) + .field-help { display: none; }
[hidden] { display: none !important; }

/* Campo trampa: fuera de pantalla, no display:none */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*
 * Consentimiento: dos casillas, ninguna premarcada.
 * La 1 (email) es obligatoria y pesa como un campo más. La 2 (llamadas y mensajes de texto) es
 * opcional: va en una placa más tenue, con su etiqueta "Opcional" encima, para que se lea como
 * un extra y no como otro requisito. Su texto es largo porque así lo exige la norma: nunca
 * menos de 13 px ni escondido tras un "ver más".
 */
.consents { margin-top: 18px; }
.consent {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 12px;
}
.consent input {
  position: relative;
  width: 28px;
  height: 28px;
  margin: 1px 0 0;
  border: 1.5px solid #6F8097;
  border-radius: 8px;
  background: #fff center / 18px 18px no-repeat;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.consent input::after { content: ""; position: absolute; inset: -11px; } /* área de toque de 50 px */
.consent input:checked {
  border-color: var(--indigo);
  background-color: var(--indigo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.6 3.6L14.5 5.2' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.consent input:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 8px; }
.consent input[aria-invalid="true"] { border-color: var(--red-text); box-shadow: inset 0 0 0 1px var(--red-text); }
.consent label {
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
}
.consent label a { color: var(--indigo); font-weight: 600; text-underline-offset: 2px; }
.consent .field-error { grid-column: 1 / -1; margin-top: 10px; }

.consent--optional {
  row-gap: 9px;
  margin-top: 16px;
  padding: 11px 14px 14px 12px;
  border: 1px solid #D8E2EE;
  border-radius: 14px;
  background: #F0F4FA;
}
.consent__tag {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 3px 9px 2px;
  border-radius: 999px;
  background: rgba(52, 52, 116, .11);
  color: var(--indigo);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.consent--optional label { font-size: .875rem; line-height: 1.5; color: #26384F; }
.consent__terms { /* la letra legal: mismo <label>, un escalón más tenue y a todo el ancho de la placa */
  display: block;
  margin: 9px 0 0 -40px;
  font-size: .8125rem;
  line-height: 1.52;
  color: var(--slate);
}
.consent__foot {
  margin-top: 12px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--slate);
}

.lead__status:empty { display: none; }
.lead__status {
  margin-top: 16px;
  padding: 12px 14px 12px 16px;
  border-left: 4px solid var(--red-text);
  border-radius: 4px 10px 10px 4px;
  background: #FFF1F1;
  color: #8E0D13;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
}

#lead-submit { position: relative; overflow: hidden; margin-top: 18px; }
#lead-submit[aria-busy="true"] { cursor: progress; background: #B6434A; box-shadow: none; }
.btn__spinner {
  display: none;
  flex: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
}
#lead-submit[aria-busy="true"] .btn__spinner { display: block; animation: spin .8s linear infinite; }
/* Con mala señal el envío puede tardar hasta unos 25 s (tres intentos): además del círculo,
   una franja de luz va y viene por el pie del botón para que nunca parezca congelado. */
#lead-submit[aria-busy="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .92), transparent) 0 0 / 42% 100% no-repeat,
    rgba(255, 255, 255, .2);
  animation: sending 1.15s ease-in-out infinite alternate;
}

.lead__fine {
  margin-top: 12px;
  font-size: .8125rem;
  line-height: 1.45;
  text-align: center;
  color: var(--slate);
}

.lead__success { padding: 8px 0 6px; outline: none; }
.lead__success:focus-visible { outline: 2px solid rgba(52, 52, 116, .55); outline-offset: 10px; border-radius: 12px; }
.lead__check { margin: 0 0 14px -6px; }
.lead__success-text { margin-top: 14px; font-size: 1.0625rem; line-height: 1.55; color: #26384F; }
.lead__success-text + .lead__success-text { margin-top: 8px; }
.lead__success-bye { margin-top: 14px; font-size: 1.0625rem; font-weight: 600; line-height: 1.45; color: var(--indigo); }
.link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--indigo);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.lead__card.is-done .lead__head { display: none; }

/* ------------------------------------------------------------------ */
/* 5. Secciones del piso                                               */
/* ------------------------------------------------------------------ */

.sec { position: relative; padding: 68px 0; }

/* --- ¿Qué es? --- */
.about {
  padding-top: 62px;
  background:
    radial-gradient(80% 44% at 100% 36%, rgba(72, 104, 136, .3), transparent 70%),
    linear-gradient(180deg, var(--floor-800) 0%, var(--floor-900) 100%);
  overflow: hidden;
}
.about::after { /* tira de luz empotrada en el piso, como en el afiche */
  content: "";
  position: absolute;
  right: -64px;
  top: 14px;
  width: 200px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #E9F3FF 30%, #E9F3FF 70%, transparent);
  box-shadow: 0 0 16px 2px rgba(170, 210, 255, .55);
  transform: rotate(-38deg);
  opacity: .7;
  pointer-events: none;
}
.about__body { margin-top: 24px; color: var(--on-floor-2); }
.about__body p + p { margin-top: 1em; }
.about__body .lede { font-size: 1.1875rem; line-height: 1.5; color: #fff; }
.mark {
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}

/* Cifras: numerales grandes, como marcas pintadas en el piso */
.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 44px;
  border-top: 1px solid var(--line-strong);
}
.fact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 0 22px 0;
  border-bottom: 1px solid var(--line);
}
.fact:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
.fact:nth-child(odd) { padding-right: 12px; }
.fact__num {
  font-family: var(--f-techno);
  font-size: clamp(2rem, 9.6vw, 3.9rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--gold);
  -webkit-text-stroke: .8px currentColor;
  white-space: nowrap;
}
.fact__num--mix sup { font-size: .42em; vertical-align: .92em; line-height: 0; margin-left: .04em; letter-spacing: .02em; }
.fact__num--mix small { margin-left: -.2em; font-size: .3em; letter-spacing: .12em; text-transform: uppercase; -webkit-text-stroke: .3px currentColor; }
.fact__cap { font-size: .9375rem; line-height: 1.35; color: var(--on-floor-2); }

/* --- Razones: caja de luz con el sedán --- */
.reasons { padding: 14px 0 60px; background: var(--floor-900); }
.reasons .wrap, .sponsor .wrap { width: min(100% - 24px, 1240px); }
.reasons__box { padding: 34px 22px 0; }
.reasons__list { margin-top: 28px; display: grid; gap: 0; }
.reason {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 6px;
  align-content: start; /* en dos columnas, la razón más corta no reparte el hueco entre título y texto */
  padding: 18px 0;
  border-top: 1px solid rgba(44, 68, 92, .2);
}
.reason__n {
  grid-row: span 2;
  padding-top: .42em;
  font-family: var(--f-techno);
  font-size: .8125rem;
  line-height: 1;
  color: var(--indigo);
}
.reason__t { font-size: 1.1875rem; font-weight: 700; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.reason__p { margin-top: 6px; font-size: 1rem; line-height: 1.5; color: var(--slate); }
.reasons__foot { position: relative; margin-top: 10px; }
.reasons__foot .btn { position: relative; z-index: 2; }
.reasons__car {
  width: 128%;
  margin: -6px -28% 0 -22px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
}
.reasons__car img { width: 100%; }

/* --- Marcas: logos en blanco sobre el piso, dentro del anillo del afiche --- */
.brands {
  padding: 30px 0 96px;
  overflow: hidden;
  background:
    radial-gradient(70% 38% at 50% 44%, rgba(72, 104, 136, .42), transparent 72%),
    linear-gradient(180deg, var(--floor-900) 0%, var(--floor-800) 46%, var(--floor-900) 100%);
}
.brands::before, .brands::after { /* las dos tiras de luz del piso, abajo, como en el afiche */
  content: "";
  position: absolute;
  bottom: 47px;
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #EAF3FF 35%, #EAF3FF 65%, transparent);
  box-shadow: 0 0 16px 2px rgba(170, 210, 255, .5);
  opacity: .6;
  pointer-events: none;
}
.brands::before { left: -34px; transform: rotate(36deg); }
.brands::after { right: -34px; transform: rotate(-36deg); box-shadow: 0 0 16px 2px rgba(255, 190, 215, .45); }
.brands__floor { position: relative; margin-top: 46px; }
.brands__ring { /* el anillo del piso del afiche */
  position: absolute;
  left: 50%;
  top: -22px;
  bottom: -22px;
  width: 172vw;
  border: 1px solid rgba(214, 232, 255, .42);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 22px rgba(170, 210, 255, .14), inset 0 0 22px rgba(170, 210, 255, .08);
  pointer-events: none;
}
.brands__head { position: relative; text-align: center; }
.brands__intro { margin: 14px auto 0; max-width: 30rem; color: var(--on-floor-2); text-wrap: balance; }
.brands__grid {
  --k: .74;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 10px 6px;
}
.brand:last-child:nth-child(odd) { grid-column: 1 / -1; }
.brand img {
  width: calc(var(--w) * var(--k) * 1px);
  max-width: 100%;
  filter: brightness(0) invert(1);
  opacity: .96;
}
.brand--genesis { --w: 150; }
.brand--giv { --w: 200; }
.brand--autogermana { --w: 204; }
.brand--chevrolet { --w: 110; }
.brand--volvo { --w: 166; }
.brand--landrover { --w: 200; }
.brand--porsche { --w: 170; }
.brand--nissan { --w: 78; }
.brand--kia { --w: 104; }
.brand--gmc { --w: 124; }
.brand--cadillac { --w: 114; }
.brands__allies {
  position: relative;
  display: grid;
  gap: 8px;
  margin-top: 58px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--on-floor-2);
}
.brands__allies-k {
  font-family: var(--f-techno);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.brands__allies-v { text-wrap: balance; }
.brands__allies-v span { white-space: nowrap; }

/* --- Presentador: caja de luz con la SUV --- */
.sponsor { padding: 6px 0 70px; background: var(--floor-900); }
.sponsor__box {
  background: linear-gradient(180deg, #FAFCFF 0%, #F2F5FC 34%, #F2F5FC 100%);
  text-align: center;
}
.sponsor__copy { padding: 40px 24px 6px; }
.sponsor__title { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.sponsor__label {
  font-family: var(--f-techno);
  font-size: 1.0625rem;
  line-height: 1.1;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  -webkit-text-stroke: .5px currentColor;
}
.sponsor__title img { width: min(58vw, 236px); }
.sponsor__text { margin: 22px auto 0; max-width: 27rem; font-size: 1.0625rem; line-height: 1.5; color: #26384F; text-wrap: pretty; }
.sponsor__car {
  margin-top: 20px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
}
.sponsor__car img { width: 100%; }

/* --- Tu visita + Preguntas --- */
.plan {
  padding: 22px 0 84px;
  background: linear-gradient(180deg, var(--floor-900) 0%, var(--floor-800) 100%);
  overflow: hidden;
}
.plan::before { /* junta del piso */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 24%, var(--line-strong) 76%, transparent);
}
.plan__grid { display: grid; gap: 68px; padding-top: 40px; }
.visit__list { margin: 26px 0 26px; border-top: 1px solid var(--line-strong); }
.visit__row { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.visit__row dt {
  font-family: var(--f-techno);
  font-size: .625rem;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--gold);
}
.visit__row dd { margin: 0; font-size: 1.1875rem; font-weight: 500; line-height: 1.4; color: #fff; text-wrap: pretty; }
.visit__row .nb { white-space: nowrap; }
.visit__note { display: block; margin-top: 10px; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--on-floor-2); }
.visit__note a, .faq__item > p a { color: #fff; font-weight: 600; text-underline-offset: 3px; }

.faq__list { margin-top: 22px; border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding: 14px 0;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font-family: var(--f-text); font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: #fff; }
.faq__item summary::after { /* signo + que gira a × */
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  background:
    linear-gradient(#fff, #fff) center / 12px 1.5px no-repeat,
    linear-gradient(#fff, #fff) center / 1.5px 12px no-repeat;
  transition: transform .25s var(--ease), background-color .2s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); background-color: rgba(255, 255, 255, .1); }
.faq__item summary:hover h3 { color: var(--gold-hi); }
.faq__item > p { padding: 0 46px 22px 0; max-width: 62ch; color: var(--on-floor-2); }

/* ------------------------------------------------------------------ */
/* 6. Cierre y pie                                                    */
/* ------------------------------------------------------------------ */

.finale { position: relative; background: var(--floor-800); }
.finale__wall {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0 72px;
  background: radial-gradient(120% 80% at 50% 8%, #fff 0%, #F3F8FD 52%, #DFE9F6 100%);
  color: var(--ink);
  text-align: center;
  clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
  --focus: var(--indigo);
}
.finale__wall::before { /* rayos de la pared LED */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(122deg, transparent 0 12%, rgba(255, 255, 255, .9) 12% 12.6%, transparent 12.6% 21%, rgba(76, 132, 172, .07) 21% 23%, transparent 23%),
    linear-gradient(58deg, transparent 0 74%, rgba(76, 132, 172, .07) 74% 76%, transparent 76% 86%, rgba(255, 255, 255, .9) 86% 86.6%, transparent 86.6%);
}
.finale__title {
  font-family: var(--f-display);
  font-size: clamp(4.6rem, 22vw, 10.5rem);
  line-height: .84;
  letter-spacing: .004em;
  text-transform: uppercase;
  color: var(--red);
  text-wrap: balance;
}
.finale__text {
  margin: 22px auto 0;
  max-width: 31rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--indigo);
  text-wrap: pretty;
}
.finale .btn { margin-top: 28px; white-space: normal; text-align: left; }
.finale__steps { /* los escalones negros de la tarima, con su filo de luz */
  height: 46px;
  background: repeating-linear-gradient(to bottom, #EAF2FC 0 2px, #050B13 2px 15.33px);
  box-shadow: 0 18px 40px -6px rgba(140, 180, 240, .25);
}

.footer {
  padding: 54px 0 46px;
  background: linear-gradient(180deg, var(--floor-800) 0%, var(--arena) 38%);
  color: var(--on-floor-2);
  font-size: .9375rem;
}
.footer__grid { display: grid; gap: 14px; }
.footer__logo { width: 232px; margin-left: -12px; }
.footer__lines { display: grid; gap: 6px; margin-top: 14px; line-height: 1.45; }
.footer__lines span { text-wrap: balance; }
.footer__lines span:first-child { color: #fff; font-weight: 600; }
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: #fff;
  font-weight: 600;
  text-underline-offset: 4px;
}

/* Crédito de plataforma, al final del pie: discreto, por debajo de todo lo del evento */
.footer__credit {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8125rem;
  letter-spacing: .02em;
}
.credit-link {
  display: inline-flex;
  align-items: center;
  gap: .32em;
  min-height: 44px;
  color: var(--on-floor-2);
  text-decoration: none;
  text-underline-offset: 4px;
}
.credit-link strong { color: #fff; font-weight: 600; }
.credit-link:hover, .credit-link:focus-visible { text-decoration: underline; }

/* ------------------------------------------------------------------ */
/* 6b. Política de Privacidad (privacidad.html)                        */
/* ------------------------------------------------------------------ */

/* La misma escena, en pequeño: la tramoya arriba con la placa del logo colgando,
   y una caja de luz sobre el piso con el texto en una columna cómoda de leer. */
.legal-page {
  background:
    radial-gradient(90% 520px at 50% 150px, rgba(72, 104, 136, .34), transparent 72%),
    linear-gradient(180deg, var(--arena) 0, var(--floor-800) 300px, var(--floor-900) 100%) var(--floor-900);
}
.legal-top {
  position: relative;
  z-index: 2;
  height: 58px;
  background: #05101C;
  box-shadow: inset 0 -1.5px 0 rgba(214, 232, 255, .4), 0 18px 36px rgba(0, 6, 16, .45);
}
.legal-top__logo { /* la placa del logo cuelga de la tramoya, como en la barra de la portada */
  position: absolute;
  left: 50%;
  top: 0;
  width: 244px;
  padding: 6px 12px 10px;
  border-radius: 0 0 20px 20px;
  background: #05101C;
  box-shadow:
    inset 0 -1.5px 0 rgba(214, 232, 255, .4),
    inset 1.5px 0 0 rgba(214, 232, 255, .22),
    inset -1.5px 0 0 rgba(214, 232, 255, .22),
    0 18px 30px rgba(0, 6, 16, .5);
  transform: translateX(-50%);
}
.legal-top__logo::before { /* tapa el filo de luz de la barra justo donde nace la placa */
  content: "";
  position: absolute;
  left: 1.5px;
  right: 1.5px;
  top: 50px;
  height: 14px;
  background: #05101C;
}
.legal-top__logo picture { position: relative; }
.legal-top__logo img { width: 220px; }

.legal { padding: 100px 0 8px; }
.legal:focus { outline: none; }
.legal__sheet {
  width: min(100% - 24px, 820px);
  margin-inline: auto;
  padding: 36px 22px 34px;
}
.legal__col { max-width: 35rem; margin-inline: auto; } /* unas 68 letras por línea */
.legal__title {
  font-family: var(--f-display);
  font-size: clamp(3.1rem, 14.4vw, 5rem);
  line-height: .92;
  letter-spacing: .004em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--red);
}
.legal__meta { margin-top: 14px; font-size: .9375rem; font-weight: 500; line-height: 1.45; color: var(--slate); }
.legal__meta span span { white-space: nowrap; }
/* En teléfono la versión baja a su propia línea; el punto separador solo existe cuando comparten línea (760 px) */
#policy-version:not([hidden]) { display: block; }
.legal__meta-dot { display: none; }
.legal__summary {
  margin-top: 26px;
  padding: 18px 18px 20px;
  border-left: 4px solid var(--indigo);
  border-radius: 4px 14px 14px 4px;
  background: #EDF2F9;
}
.legal .legal__summary h2 { /* rótulo "techno", como las etiquetas de la portada */
  margin: 0;
  font-family: var(--f-techno);
  font-size: .75rem;
  line-height: 1.35;
  letter-spacing: .16em;
  color: var(--indigo);
}
.legal .legal__summary p { margin-top: 10px; font-size: 1.125rem; font-weight: 500; line-height: 1.55; color: var(--ink); }
.legal section { scroll-margin-top: 24px; }
.legal h2 {
  margin-top: 40px;
  font-family: var(--f-display);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .008em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--indigo);
}
.legal p, .legal li { font-size: 1.0625rem; line-height: 1.65; color: #26384F; }
.legal h2 + p, .legal h2 + ul { margin-top: 12px; }
.legal ul + p, .legal p + p { margin-top: 14px; }
.legal ul { display: grid; gap: 10px; }
.legal li { position: relative; padding-left: 24px; }
.legal li::before { /* guion dibujado en vez de viñeta */
  content: "";
  position: absolute;
  left: 1px;
  top: .78em;
  width: 11px;
  height: 2px;
  border-radius: 1px;
  background: var(--indigo);
}
.legal a { color: var(--indigo); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* Quien llega desde "Términos" en el formulario ve marcada esa sección */
.legal section:target { margin: 30px -12px 0; padding: 2px 12px 16px; border-radius: 14px; background: #FFFBE0; box-shadow: inset 0 0 0 1.5px rgba(244, 228, 60, .9); }
.legal section:target h2 { margin-top: 14px; }

.legal-foot {
  padding: 34px 0 calc(46px + env(safe-area-inset-bottom, 0px));
  color: var(--on-floor-2);
  font-size: .9375rem;
  text-align: center;
}
.legal-foot .btn { white-space: normal; }
.legal-foot .btn__arrow { transform: scaleX(-1); }
.legal-foot .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }
.legal-foot__line { margin-top: 22px; line-height: 1.45; text-wrap: balance; }
.legal-foot__credit { margin-top: 4px; font-size: .8125rem; letter-spacing: .02em; }

/* ------------------------------------------------------------------ */
/* 7. Barras fijas                                                     */
/* ------------------------------------------------------------------ */

/* Barra inferior del teléfono */
.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) 18px;
  background: rgba(4, 14, 25, .94);
  box-shadow: inset 0 1.5px 0 rgba(214, 232, 255, .55), 0 -8px 22px rgba(0, 6, 16, .32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .32s var(--ease), visibility 0s linear .32s;
}
.cta-bar.is-on { transform: none; visibility: visible; transition: transform .32s var(--ease), visibility 0s; }
.cta-bar__text {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-wrap: balance;
}
.cta-bar__text::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 10px rgba(244, 228, 60, .8);
}
body.has-bar .footer { padding-bottom: calc(46px + 78px); }

/* Barra superior (pantallas grandes): la tramoya, con el logo colgando de ella */
.topbar { display: none; }

/* ------------------------------------------------------------------ */
/* 8. Movimiento                                                       */
/* ------------------------------------------------------------------ */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sending { from { background-position: -12% 0, 0 0; } to { background-position: 112% 0, 0 0; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes rise-sm { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes logo-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Entrada del hero: solo CSS, así nada depende de un script para verse */
  .wall__logo { animation: logo-in .9s var(--ease) .05s both; }
  .wall__place { animation: rise-sm .6s var(--ease) .4s both; }
  .wall__date { animation: rise-sm .6s var(--ease) .52s both; }
  .sello, .wall__sponsor { animation: fade .7s ease .75s both; }
  .ticker { animation: rise-sm .6s var(--ease) .85s both; }
  .hero__title { animation: rise-sm .7s var(--ease) .3s both; }
  .hero__sub { animation: rise-sm .7s var(--ease) .42s both; }

  /* Revelado al entrar en pantalla: la clase la pone main.js justo antes de que el bloque se vea */
  [data-reveal].is-in { animation: rise .8s var(--ease) both; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  /* Sin giros ni barridos: mientras envía, el círculo y la franja laten despacio (solo opacidad),
     para que una espera larga tampoco parezca una página congelada. */
  #lead-submit[aria-busy="true"] .btn__spinner,
  #lead-submit[aria-busy="true"]::after {
    animation-name: pulse !important;
    animation-duration: 1.6s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
  }
  #lead-submit[aria-busy="true"] .btn__spinner { border-color: #fff; }
  #lead-submit[aria-busy="true"]::after { background: rgba(255, 255, 255, .7); }
}

/* ================================================================== */
/* Teléfonos estrechos                                                 */
/* ================================================================== */
@media (max-width: 374px) {
  .ticker { gap: 8px; padding: 0 8px; }
  .ticker__unit { min-width: 54px; padding: 0 4px; }
  .ticker__n { font-size: 1.1875rem; }
  .lead__card { padding-inline: 16px; }
  .lead__title { font-size: 2.05rem; }
  .btn--block { font-size: 1.0625rem; padding: 0 14px; }
}
/* 375 a 389 px (iPhone de 375): el contador a su tamaño, pero con aire a los lados de su franja */
@media (min-width: 375px) and (max-width: 389px) {
  .ticker { gap: 10px; }
  .ticker__unit { min-width: 58px; padding: 0 4px; }
}
/* Menos de 340 px (teléfonos antiguos o con zoom de pantalla): que "ABRE EN" no se salga de la franja */
@media (max-width: 339px) {
  .ticker { gap: 6px; padding: 0 6px; }
  .ticker__label { letter-spacing: .08em; }
  .ticker__unit { min-width: 52px; padding: 0 3px; }
}
/* Hasta 389 px el botón del cierre va de lado a lado, en una sola línea y centrado */
@media (max-width: 389px) {
  .finale .btn { width: 100%; padding: 0 16px; gap: 8px; font-size: 1.125rem; }
}

/* ================================================================== */
/* Tablet: el escenario completo, sin recorte                          */
/* ================================================================== */
@media (min-width: 760px) {
  :root { --gutter: 40px; }

  .hero {
    --crop: 1;
    --stage-w: min(100vw, 1000px);
    --stage-h: calc(var(--stage-w) / 1.3416);
    --photo-w: var(--stage-w);
    --horizon: calc(var(--stage-h) * .897);
  }
  .hero__arena { padding-bottom: 64px; }
  .stage {
    width: var(--stage-w);
    margin-inline: auto;
    overflow: visible;
    background: none;
    container-type: inline-size;
  }
  .stage__photo::after { height: 10.6%; }

  /* El afiche, tal cual: posiciones tomadas del arte original */
  .wall { display: block; padding: 0; text-align: left; }
  .wall__logo { position: absolute; left: 19.3%; top: 23.6%; width: 57.6%; }
  .wall__lines { position: absolute; left: 41.3%; top: 52.3%; margin: 0; }
  .wall__place { font-size: 5.9cqw; line-height: 1; letter-spacing: -.02em; }
  .wall__date { margin-top: .06em; font-size: 3.08cqw; font-weight: 400; letter-spacing: 0; }
  .sello {
    left: 79.4%;
    right: auto;
    top: 36.8%;
    bottom: auto;
    gap: .6cqw;
    padding: .95cqw 1.5cqw .8cqw 1.8cqw;
    clip-path: polygon(1.3cqw 0, 100% 0, calc(100% - 1.3cqw) 100%, 0 100%);
  }
  .sello__word { font-size: max(1.2cqw, 10px); letter-spacing: .16em; margin-right: -.16em; }
  .sello__num { font-size: 4.5cqw; }
  .wall__sponsor { left: 12.6%; top: 58.6%; bottom: auto; flex-direction: column; align-items: flex-start; gap: .8cqw; }
  .wall__sponsor-label { max-width: none; font-size: max(1.16cqw, 10px); line-height: 1; text-align: left; }
  .wall__sponsor img { width: 11.8cqw; }

  .ticker {
    left: 50%;
    right: auto;
    bottom: 5.6%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 92%;
    height: 62px;
    gap: 22px;
    padding: 0 26px;
  }
  .ticker__label { font-size: .6875rem; }
  .ticker__unit { min-width: 74px; }
  .ticker__n { font-size: 1.5rem; }
  .ticker__msg { font-size: 1.0625rem; }

  .hero__floor { width: var(--stage-w); margin-inline: auto; padding: 30px 40px 0; text-align: center; }
  .hero__title { font-size: clamp(3.4rem, 8.2vw, 4.75rem); }
  .hero__sub { margin: 14px auto 0; max-width: 40rem; font-size: 1.125rem; }

  .lead { width: min(100% - 80px, 600px); margin: 40px auto 0; }
  .lead__card { padding: 34px 34px 28px; }
  .lead__title { font-size: 2.6rem; }

  @media (prefers-reduced-motion: no-preference) {
    .ticker { animation-name: ticker-in; }
  }

  /* Secciones */
  .label { font-size: .75rem; }
  .sec { padding: 96px 0; }
  .about { padding-top: 84px; }
  .about::after { right: -70px; top: 8px; width: 220px; }
  .about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
  .about__body { margin-top: 44px; font-size: 1.125rem; }
  .about__body .lede { font-size: 1.375rem; line-height: 1.45; }
  .h2 { font-size: clamp(3.6rem, 7.2vw, 5.6rem); }
  .h2--sm { font-size: clamp(3rem, 5.4vw, 4.25rem); }
  .facts { grid-template-columns: repeat(4, 1fr); margin-top: 64px; }
  .fact { padding: 30px 20px 30px 26px; border-left: 1px solid var(--line); }
  .fact:nth-child(odd) { padding-right: 20px; }
  .fact:nth-child(even) { padding-left: 26px; }
  .fact:first-child { padding-left: 0; border-left: 0; }
  .fact__num { font-size: clamp(2.2rem, 4.9vw, 4rem); }
  .fact__cap { font-size: 1rem; }

  .reasons { padding: 20px 0 84px; }
  .reasons .wrap, .sponsor .wrap { width: min(100% - 48px, 1240px); }
  .lightbox { border-radius: 30px; }
  .reasons__box { padding: 56px 48px 0; }
  .label--ink { font-size: .875rem; }
  .reasons__list { grid-template-columns: 1fr 1fr; column-gap: 44px; margin-top: 40px; }
  .reason { padding: 22px 0 24px; }
  .reasons__foot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; margin-top: 18px; }
  .reasons__foot .btn { margin-top: 26px; }
  .reasons__car {
    justify-self: end;
    width: min(116%, 760px);
    margin: -10px -48px 0 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%), linear-gradient(to bottom, transparent 0, #000 16%);
    mask-image: linear-gradient(to right, transparent 0, #000 16%), linear-gradient(to bottom, transparent 0, #000 16%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .brands { padding: 40px 0 150px; }
  .brands::before, .brands::after { width: 260px; bottom: 82px; }
  .brands::before { left: 3%; }
  .brands::after { right: 3%; }
  .brands__floor { margin-top: 70px; }
  .brands__ring { top: -44px; bottom: -44px; width: min(134vw, 1560px); }
  .label--big { font-size: .9375rem; }
  .brands__intro { margin-top: 18px; font-size: 1.125rem; }
  .brands__grid { --k: .92; grid-template-columns: repeat(6, 1fr); row-gap: 14px; }
  .brand { grid-column: span 2; min-height: 112px; padding: 12px 14px; }
  .brand:last-child:nth-child(odd) { grid-column: span 2; }
  .brand:nth-last-child(2) { grid-column: 2 / span 2; }
  .brands__allies { display: block; margin-top: 92px; font-size: 1.0625rem; }
  .brands__allies-k { margin-right: 10px; font-size: .6875rem; }

  .sponsor { padding: 10px 0 100px; }
  .sponsor__box { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; text-align: left; }
  .sponsor__copy { padding: 52px 8px 48px 48px; align-self: center; }
  .sponsor__title { align-items: flex-start; gap: 26px; }
  .sponsor__label { font-size: clamp(1rem, 2.2vw, 1.125rem); }
  .sponsor__title img { width: min(22vw, 250px); }
  .sponsor__text { margin: 26px 0 0; }
  .sponsor__car { /* corte en diagonal, como los laterales del escenario */
    position: relative;
    align-self: end;
    width: 100%;
    margin: 0;
    clip-path: polygon(19% 0, 100% 0, 100% 100%, 0 100%);
  }

  .plan { padding: 30px 0 110px; }
  .plan__grid { padding-top: 60px; gap: 84px; }
  .visit__row { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 20px 0; }
  .visit__row dd { font-size: 1.25rem; }
  .faq__item summary h3 { font-size: 1.1875rem; }

  .finale__wall { padding: 140px 0 96px; clip-path: polygon(0 56px, 100% 0, 100% 100%, 0 100%); }
  .finale__title { font-size: clamp(7rem, 15vw, 12.5rem); }
  .finale__text { font-size: 1.25rem; margin-top: 26px; }
  .finale .btn { margin-top: 34px; }
  .finale__steps { height: 62px; background: repeating-linear-gradient(to bottom, #EAF2FC 0 2px, #050B13 2px 20.66px); }

  .footer { padding: 72px 0 56px; }

  .consent--optional { padding: 12px 16px 15px 14px; }

  .legal-top { height: 62px; }
  .legal-top__logo::before { top: 54px; }
  .legal { padding-top: 104px; }
  .legal__sheet { padding: 64px 56px 60px; }
  .legal__title { font-size: 5.25rem; }
  .legal__meta { font-size: 1rem; }
  #policy-version:not([hidden]) { display: inline; }
  .legal__meta-dot { display: inline; }
  .legal__summary { margin-top: 32px; padding: 22px 26px 24px; }
  .legal .legal__summary p { font-size: 1.1875rem; }
  .legal h2 { margin-top: 48px; font-size: 2.25rem; }
  .legal section:target { margin: 36px -18px 0; padding: 2px 18px 18px; }
  .legal-foot { padding: 44px 0 64px; }
}
@keyframes ticker-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ================================================================== */
/* A partir de 900 px: visita y preguntas lado a lado                  */
/* ================================================================== */
@media (min-width: 900px) {
  .plan__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
  .visit { position: static; }
  .visit__row { grid-template-columns: 1fr; gap: 6px; }
  /* El titular de Preguntas baja lo que ocupa la etiqueta "TU VISITA" (30 px) más la diferencia de
     cuerpo entre los dos titulares: así los filetes de las dos listas quedan a la misma altura. */
  .faq .h2 { margin-top: calc(30px + .94 * (clamp(3.6rem, 7.2vw, 5.6rem) - clamp(3rem, 5.4vw, 4.25rem))); }
  .faq__list { margin-top: 26px; }

  .footer__grid { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: end; }
  .footer__links { margin-bottom: -12px; }
  .footer__credit { grid-column: 1 / -1; margin-top: -22px; }
}

/* A partir de 1000 px la caja de razones se parte en dos: lista a la izquierda, sedán a la derecha */
@media (min-width: 1000px) {
  /* El escenario ya no toca los bordes de la pantalla: sus lados se funden con la arena */
  .stage__photo {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 94%, transparent 100%);
  }

  .reasons__box {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 16px;
    padding: 64px 0 0 56px;
  }
  .reasons__head { grid-column: 1 / -1; padding-right: 56px; }
  .reasons__list { position: relative; z-index: 2; grid-column: 1; grid-template-columns: 1fr; margin-top: 34px; }
  .reason { grid-template-columns: 58px minmax(0, 1fr); padding: 20px 0 22px; }
  .reason__n { font-size: .875rem; }
  .reason__t { font-size: 1.25rem; }
  .reason__p { font-size: 1.0625rem; }
  .reasons__foot { display: contents; }
  .reasons__foot .btn { grid-column: 1; justify-self: start; margin: 22px 0 60px; }
  .reasons__car {
    grid-column: 2;
    grid-row: 2 / span 2;
    align-self: end;
    justify-self: end;
    width: 116%;
    max-width: none;
    margin: 0;
  }
}

/* Entre 1000 y 1159 px en ventanas bajas (iPad apaisado, ventanas estrechas de portátil): el
   escenario cede para que el titular quepa en la primera pantalla, encima de la barra fija.
   Solo desde 1000 px, donde los lados de la foto ya se funden con la arena. */
@media (min-width: 1000px) and (max-width: 1159.98px) {
  @supports (height: 100svh) {
    .hero { --stage-w: min(100vw, 1000px, max(640px, (100svh - 250px) * 1.3416)); }
  }
}

/* ================================================================== */
/* Escritorio: el escenario contenido en la arena, el formulario al    */
/* frente, a la derecha                                                */
/* ================================================================== */
@media (min-width: 1160px) {
  /* Barra superior en vez de la inferior: aquí el formulario vive arriba, en el hero */
  .cta-bar { display: none; }
  body.has-bar .footer { padding-bottom: 56px; }
  html { scroll-padding-top: 84px; }

  .topbar {
    display: block;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    height: 66px;
    background: rgba(4, 14, 25, .94);
    box-shadow: inset 0 -1.5px 0 rgba(214, 232, 255, .4), 0 18px 36px rgba(0, 6, 16, .45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateY(-240%);
    visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s linear .38s;
  }
  .topbar.is-on { transform: none; visibility: visible; transition: transform .38s var(--ease), visibility 0s; }
  .topbar__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 26px;
    width: min(100% - 48px, 1320px);
    height: 100%;
    margin-inline: auto;
  }
  .topbar__logo { /* la placa del logo cuelga de la tramoya */
    position: absolute;
    left: 0;
    top: 0;
    width: 248px;
    padding: 5px 14px 9px;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(180deg, rgba(4, 14, 25, 0) 0, #05101C 66px);
    box-shadow: inset 0 -1.5px 0 rgba(214, 232, 255, .4);
  }
  .topbar__logo::before {
    content: "";
    position: absolute;
    inset: 66px 0 0 0;
    z-index: -1;
    border-radius: 0 0 20px 20px;
    background: #05101C;
    box-shadow: inset 1.5px 0 0 rgba(214, 232, 255, .28), inset -1.5px 0 0 rgba(214, 232, 255, .28), 0 18px 30px rgba(0, 6, 16, .5);
  }
  .topbar__logo img { width: 220px; }
  .topbar__when { display: flex; align-items: baseline; gap: 14px; margin-right: auto; padding-left: 274px; white-space: nowrap; }
  .topbar__place { font-family: var(--f-display); font-size: 1.75rem; line-height: 1; letter-spacing: .012em; text-transform: uppercase; color: #FF3B42; }
  .topbar__date { font-size: 1rem; font-weight: 500; color: var(--on-floor-2); }

  .hero {
    --form-w: 484px;
    --overlap: 28px;
    --pad: clamp(24px, 3vw, 56px);
    --fit-h: calc((100vh - 236px) * 1.3416);
    --stage-w: min(calc(100vw - var(--form-w) + var(--overlap) - var(--pad) * 2), max(var(--fit-h), 640px), 1040px);
  }
  @supports (height: 100svh) {
    .hero { --fit-h: calc((100svh - 236px) * 1.3416); }
  }

  .hero__arena {
    display: grid;
    grid-template-columns: var(--stage-w) calc(var(--form-w) - var(--overlap));
    grid-template-rows: auto 1fr;
    justify-content: center;
    padding-bottom: 44px;
  }
  .hero__arena::after { /* la luz del escenario se derrama en la arena */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(90deg, rgba(4, 17, 29, .9) 0, rgba(4, 17, 29, 0) 10%, rgba(4, 17, 29, 0) 88%, rgba(4, 17, 29, .7) 100%),
      radial-gradient(46% 62% at 42% 36%, rgba(150, 190, 240, .2), transparent 72%);
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    pointer-events: none;
  }
  .stage { grid-column: 1; grid-row: 1; margin: 0; }
  .hero__floor { grid-column: 1; grid-row: 2; margin: 0; padding: 22px 56px 0 5.5%; text-align: left; }
  .hero__title { font-size: min(calc(var(--stage-w) * .0695), 4.6rem); white-space: nowrap; }
  .hero__sub { margin: 12px 0 0; max-width: 44rem; font-size: 1.0625rem; }

  .lead {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    width: var(--form-w);
    margin: clamp(22px, 4.2vh, 44px) 0 0 calc(var(--overlap) * -1);
  }
  /* Tras el registro la tarjeta es corta: se centra frente al escenario en vez de quedarse arriba */
  .lead:has(.lead__card.is-done) { align-self: center; margin-top: 0; }
  .lead__card { padding: 28px 30px 22px; }
  .lead__title { font-size: 2.5rem; }
  #lead-form { margin-top: 18px; }
  .field { margin-bottom: 12px; }
  .field input { height: 52px; }
  .consents { margin-top: 14px; }
  .consent label { font-size: .9063rem; line-height: 1.42; }
  .consent--optional { margin-top: 12px; }
  .consent--optional label { font-size: .8438rem; line-height: 1.46; }
  .consent__terms { margin-top: 7px; line-height: 1.46; }
  .consent__foot { margin-top: 10px; line-height: 1.45; }
  #lead-submit { margin-top: 16px; }
  .lead__fine { margin-top: 10px; }

  .about__grid { gap: 84px; }
  .reasons__box { padding: 72px 0 0 68px; }
  .sponsor__copy { padding-left: 68px; }
  .brands__grid { --k: 1.06; grid-template-columns: repeat(12, 1fr); max-width: 1060px; margin-inline: auto; row-gap: 20px; }
  .brand { grid-column: span 3; min-height: 128px; }
  .brand:nth-child(-n+3) { grid-column: span 4; }
  .brand:nth-last-child(2), .brand:last-child:nth-child(odd) { grid-column: span 3; }
}

/* Escritorio de altura corriente (hasta 960 px de alto, p. ej. 1440x900): el formulario se
   aprieta lo justo para que, aun con las dos casillas, el botón quede a la vista sin hacer scroll */
@media (min-width: 1160px) and (max-height: 960px) {
  .lead { margin-top: clamp(12px, 2vh, 20px); }
  .lead__card { padding: 24px 30px 18px; }
  .lead__title { font-size: 2.3rem; }
  .lead__support { margin-top: 6px; }
  #lead-form { margin-top: 14px; }
  .field { margin-bottom: 10px; }
  .field label { margin-bottom: 5px; }
  .field input { height: 48px; }
  .field-help { margin-top: 5px; }
  .consents { margin-top: 12px; }
  .consent--optional { row-gap: 7px; margin-top: 10px; padding-block: 10px 12px; }
  .consent__foot { margin-top: 9px; }
  #lead-submit { margin-top: 14px; min-height: 54px; }
  .lead__fine { margin-top: 9px; }
}

/* Escritorio bajo (la ventana real de un portátil: unos 790 px de alto, y hasta 860): el formulario
   se compacta para que el botón quede entero a la vista. Los campos siguen midiendo 48 px. */
@media (min-width: 1160px) and (max-height: 860px) {
  .lead { margin-top: 8px; }
  .lead__card { padding: 18px 28px 14px; }
  .lead__title { font-size: 2.1rem; }
  /* El título del formulario en una sola línea. Va por id: el de la confirmación comparte la
     clase y, con un nombre largo, tiene que poder partirse en dos. */
  #lead-title { font-size: 1.9rem; white-space: nowrap; }
  .lead__support { margin-top: 4px; }
  #lead-form { margin-top: 10px; }
  .field { margin-bottom: 8px; }
  .field label { margin-bottom: 4px; }
  .field input { height: 48px; }
  .field-help { margin-top: 4px; }
  .consents { margin-top: 10px; }
  .consent--optional { row-gap: 6px; margin-top: 8px; padding-block: 8px 10px; }
  .consent__terms { margin-top: 6px; }
  .consent__foot { margin-top: 8px; }
  #lead-submit { margin-top: 12px; min-height: 52px; }
  .lead__fine { margin-top: 7px; }
}

/* Portátiles más bajos todavía (1366x768, 1536x864 o 1280x720 con las barras del navegador): ni
   compactando cabe todo. La tarjeta se ensancha y Email y Teléfono comparten fila (el email, más
   ancho), para que el botón siga a la vista sin hacer scroll. */
@media (min-width: 1280px) and (max-height: 770px) {
  .hero { --form-w: 560px; }
  .field-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 12px; align-items: start; }
}