/* ── Promo Formula H 2026 · landing de un solo CTA ───────────────────────── */

/* Heineken Serif 18, la serif de marca. Autohospedada en WOFF2 y subseteada a
   latín: ~30 KB por peso en vez de ~71 KB del .otf. Los .otf originales están
   en fonts-src/, fuera del deploy. Ver README para resubsetear. */

@font-face {
  font-family: "Heineken Serif 18";
  src: url("assets/fonts/HeinekenSerif18-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Heineken Serif 18";
  src: url("assets/fonts/HeinekenSerif18-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Heineken Serif 18";
  src: url("assets/fonts/HeinekenSerif18-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Heineken Serif 18";
  src: url("assets/fonts/HeinekenSerif18-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Muestreados del PSB después de convertir Apple RGB → sRGB. */
  --green-bright: #0b9c42;
  --green:        #009440;
  --green-mid:    #00883a;
  --green-edge:   #007430;
  --green-dark:   #005a1e;   /* "Méxi" */
  --red:          #e42404;   /* CTA y "co" */

  --ink: #ffffff;
  --pad: clamp(1.4rem, 5vw, 4.5rem);

  /* El titular y el bloque de logos comparten esta medida: en el arte los dos
     miden lo mismo. Una sola variable para que no se desincronicen.
     Tope en 3.4rem en el layout apilado: con solo 9.4vw, a 768 px el titular
     crecía casi al tamaño de desktop y empujaba el CTA fuera del fold. */
  --title-size: clamp(2.15rem, 9.4vw, 3.4rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--green-edge);
  color: var(--ink);
  font-family: "Heineken Serif 18", Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.25;
  text-wrap: pretty;
}

img { display: block; max-width: 100%; height: auto; }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.hero { position: relative; }

/* Contenedor del arte. Los sellos se posicionan contra esta caja, no contra el
   viewport, así quedan donde van en las dos versiones del layout. */
.media { position: relative; }

/* Móvil: el arte es una banda recortada sobre el brindis. aspect-ratio en vez
   de altura fija en svh para que el recorte escale con el ancho; el tope en
   svh evita que en pantallas cortas empuje el CTA fuera del fold. */
.art {
  width: 100%;
  aspect-ratio: 7 / 5;
  max-height: 38svh;
  object-fit: cover;
  object-position: 78% 45%;
}

/* Empalma la banda con el panel: sin esto el borde inferior de la foto choca
   en seco con el verde. */
.media::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 20%;
  background: linear-gradient(to bottom, rgba(0, 148, 64, 0) 0%, var(--green) 92%);
  pointer-events: none;
}

.seal { position: absolute; z-index: 2; height: auto; }
.seal--enjoy   { top: 5%; right: 3.5%; width: clamp(42px, 9vw, 72px); }
.seal--driving { bottom: 7%; right: 3.5%; width: clamp(58px, 13vw, 108px); }

.panel {
  position: relative;
  z-index: 1;
  background: radial-gradient(120% 125% at 22% 42%,
    var(--green-bright) 0%,
    var(--green) 45%,
    var(--green-mid) 74%,
    var(--green-edge) 100%);
  padding: clamp(1.9rem, 6vw, 4rem) var(--pad) clamp(2.4rem, 8vw, 4.5rem);
}

.panel__inner { width: 100%; max-width: 32rem; }

/* ── Tipografía ──────────────────────────────────────────────────────────── */

.title {
  margin: 0 0 clamp(1.1rem, 3.5vw, 1.9rem);
  font-size: var(--title-size);
  font-weight: 800;   /* ExtraBold es el peso más alto que trae la familia */
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 18px rgba(0, 45, 18, 0.26);
}

.title__dark { color: var(--green-dark); }
.title__red  { color: var(--red); }

.lead {
  margin: 0 0 clamp(1.5rem, 5vw, 2.3rem);
  max-width: 34ch;
  font-size: clamp(1rem, 3.6vw, 1.3rem);
  line-height: 1.32;
}

.lead strong { display: block; font-weight: 700; }

.lead__soft {
  display: block;
  margin-top: 0.45em;
  font-weight: 400;
}

/* ── Logos ───────────────────────────────────────────────────────────────── */

/* Un solo PNG con las dos filas: sale del grupo "todos logos" del PSB, así
   conserva exactamente el espaciado y la alineación del arte original.

   En el arte el bloque de logos y la línea "Grand Prix" miden lo mismo (489 px
   de 1800). Heredando --title-size y midiendo el ancho en em (5.9em ≈ el ancho
   de "Grand Prix"), esa relación se mantiene en cualquier ancho de pantalla. */
.brands-wrap {
  position: relative;
  width: min(100%, 5.9em);
  font-size: var(--title-size);
  margin-bottom: clamp(1.5rem, 5vw, 2.2rem);
}

.brands {
  display: block;
  width: 100%;
  margin: 0;
}

/* .brands es un solo PNG plano, no logos individuales — estos overlays son
   invisibles, posicionados en % sobre el archivo real (900×345), medidos
   directo sobre los píxeles del logo (no estimados de una captura). El bloque
   no tiene override en el breakpoint de 56rem, solo cambia de tamaño
   manteniendo proporción, así que el % se mantiene alineado en mobile y
   desktop. */
.brand-link {
  position: absolute;
  display: block;
}

.brand-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.brand-link--nacional {
  left: 24.6%;
  top: 77.9%;
  width: 19.4%;
  height: 20.1%;
}

.brand-link--jumbo {
  left: 45.8%;
  top: 82.9%;
  width: 30.9%;
  height: 14.3%;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */

.cta {
  display: inline-block;
  padding: 0.62em 1.9em;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: clamp(1.25rem, 5vw, 1.7rem);
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(0, 40, 15, 0.3);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.cta:hover,
.cta:focus-visible {
  background: #f42e0c;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 40, 15, 0.38);
}

.cta:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(0, 40, 15, 0.3); }

.cta:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

/* ── Legal ───────────────────────────────────────────────────────────────── */

.legal {
  background: #002d0e;
  color: rgba(255, 255, 255, 0.72);
  padding: clamp(1.25rem, 4vw, 2rem) var(--pad);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.5;
}

.legal p { margin: 0 auto; max-width: 78ch; }
.legal p + p { margin-top: 0.7em; }

.legal__warn { color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }

.legal__link { margin-top: 0.9em; font-size: 0.78rem; }
.legal__link a { color: #fff; text-decoration: underline; font-weight: 600; }

/* ── Desktop ─────────────────────────────────────────────────────────────── */

/* Acá el arte pasa a cubrir todo el hero y el copy va encima de su zona verde,
   igual que en el arte original: no hay empalme que disimular ni verde de CSS
   que tenga que coincidir con el de la imagen. */
@media (min-width: 56rem) {
  /* Acá la columna de texto es solo el 46 % del ancho, así que el titular se
     mide contra el viewport con otra pendiente. */
  :root { --title-size: clamp(2.4rem, 5.4vw, 4.6rem); }

  .hero {
    min-height: 100svh;
    display: grid;
    grid-template-columns: 46fr 54fr;
    align-items: center;
  }

  .media { position: absolute; inset: 0; z-index: 0; }
  .media::after { content: none; }

  /* object-position: left mantiene la zona verde completa a la vista cuando el
     viewport es más angosto que el 3:2 del arte y el cover recorta a lo ancho.
     Lo que se pierde es el borde derecho de la foto, no el copy. */
  .art {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    max-height: none;
    object-position: left center;
  }

  .seal--enjoy   { top: 5%; right: 2.5%; width: clamp(46px, 4.4vw, 74px); }
  .seal--driving { bottom: 5%; right: 2.5%; width: clamp(62px, 6.6vw, 110px); }

  .panel {
    grid-column: 1;
    background: none;
    padding-block: 3rem;
  }

  .panel__inner { margin-left: auto; }
}

@media (min-width: 90rem) {
  .panel__inner { max-width: 36rem; }
}

/* ── Preferencias del usuario ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
  .cta:hover, .cta:focus-visible { transform: none; }
}