/* ============================================================
   Poquito Corazón — Landing v3.2 "Broadsheet"
   ============================================================
   Compilado desde el design system:
     colors_and_type.css  → paleta de marca y tipografías
     landing/_v3-2.css    → la landing

   Cambios respecto al original del design system:
     · Las fuentes apuntan a /assets/fonts/*.woff2 (antes .ttf).
       WOFF2 pesa ~70% menos y es el único formato que hace falta hoy.
     · Solo se declaran los 11 cortes que la página usa de verdad,
       no los 19 del design system.
     · Se retiraron las clases de utilidad .pc-* : son para las
       fichas del design system y esta página no usa ninguna.
     · Se eliminó `h1 { @apply .pc-h1; }` — `@apply` es una directiva
       de Tailwind, no CSS válido, y el navegador la descartaba.
   ============================================================ */

/* ---------- Tipografías ----------
   Kanit viene con el alfabeto tailandés completo; estos archivos están
   recortados a latín + latín extendido, que cubre todo el español.
   Cada corte bajó de ~50 KB a ~14 KB. */
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/Kanit-Light.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 300; font-display: swap; src: url("/assets/fonts/Kanit-LightItalic.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/Kanit-Regular.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/Kanit-Medium.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/Kanit-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/Kanit-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/Kanit-Bold.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/Kanit-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/Kanit-Black.woff2") format("woff2"); }
@font-face { font-family: "Kanit"; font-style: italic; font-weight: 900; font-display: swap; src: url("/assets/fonts/Kanit-BlackItalic.woff2") format("woff2"); }
@font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/SpecialElite-Regular.woff2") format("woff2"); }

:root {
  /* ---------- Paleta de marca (Brandbook) ----------
     Cinco colores con nombre y referencia Pantone. No añadir colores
     a esta paleta sin consultarlo con la marca. */

  /* Rojo Corazón · Pantone 484 C — el alma de la marca. */
  --pc-rojo-corazon:  #70000E;
  /* Rojo Intenso · Pantone 4975 C — rojo de sombra / superposición. */
  --pc-rojo-intenso:  #4E0000;
  /* Gris Intenso · Pantone 19-4201 TSX — tinta, texto corrido. */
  --pc-gris-intenso:  #252629;
  /* Gris Claro · Pantone 13-4108 TCX — superficie gris suave. */
  --pc-gris-claro:    #D5D5D8;
  /* Blanco Mezcal · Pantone White C — papel. */
  --pc-blanco-mezcal: #FEFEFE;

  /* ---------- Tipografía ---------- */
  --font-display: "Kanit", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "Kanit", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "Special Elite", ui-monospace, "Courier New", monospace;

  /* ---------- Landing v3 ----------
     El papel cálido y la tinta son propios de esta pieza: el broadsheet
     no usa el blanco puro del brandbook, sino un crudo impreso. */
  --v3-max: 1480px;
  --v3-gutter: 56px;
  --v3-paper: #f4eee2;
  --v3-paper-2: #ece4d0;
  --v3-paper-3: #e3d8be;
  --v3-ink: #1a1814;
  --v3-ink-2: #2a261e;
  --v3-corazon: var(--pc-rojo-corazon);
  --v3-corazon-deep: var(--pc-rojo-intenso);
  --v3-ember: #b8852f;
  --v3-line: rgba(26, 24, 20, 0.18);
  --v3-line-strong: rgba(26, 24, 20, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; }

html { scroll-behavior: smooth; }

body.v3 {
  background: var(--v3-paper);
  color: var(--v3-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* grano de papel */
  background-image:
    radial-gradient(rgba(26,24,20,0.025) 1px, transparent 1px),
    radial-gradient(rgba(26,24,20,0.018) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 1px;
}
.v3 a { color: inherit; text-decoration: none; }
.v3 img { display: block; max-width: 100%; }

/* Las fotos van envueltas en <picture> para servir WebP con respaldo JPEG.
   Sin esto, el <picture> — y no el <img> — sería el hijo directo de cada
   grid o flex, y se perderían reglas como `.v3-tierra-gallery img.main`.
   `display: contents` hace que el <picture> desaparezca del layout y el
   <img> vuelva a ser el hijo directo, igual que en el diseño original. */
.v3 picture { display: contents; }

/* Consecuencia de la línea anterior: al disolver el <picture>, sus <source>
   también quedan expuestos al layout y el navegador los trata como bloques.
   En la galería de La Lomita eso metía 6 elementos en un grid de 3 celdas y
   descuadraba el mosaico entero. Los <source> nunca se pintan — solo le
   dicen al navegador qué archivo elegir — así que ocultarlos es seguro. */
.v3 picture source { display: none; }

/* El texto de los enlaces del menú debe quedar visible al saltar a su
   sección; sin esto el título queda pegado al borde superior. */
.v3 section[id] { scroll-margin-top: 24px; }

/* ============================================================
   MASTHEAD — cabecera de periódico. Fila de fecha + barra de título.
   ============================================================ */
.v3-masthead {
  position: relative;
  border-bottom: 3px solid var(--v3-ink);
  background: var(--v3-paper);
}
.v3-mast-meta {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px var(--v3-gutter);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--v3-ink-2);
  border-bottom: 1px solid var(--v3-ink);
}
.v3-mast-meta .center {
  text-align: center;
  letter-spacing: 0.3em;
  font-weight: 600;
}
.v3-mast-meta .right { text-align: right; }
.v3-mast-meta .red { color: var(--v3-corazon); }
.v3-mast-bar {
  padding: 22px var(--v3-gutter);
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 40px; align-items: center;
}
.v3-mast-bar .mark {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display);
  font-weight: 900; font-size: 18px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--v3-corazon);
}
.v3-mast-bar .mark img { height: 32px; width: auto; }
.v3-mast-bar .links {
  display: flex; gap: 28px; justify-content: center;
  font-family: var(--font-display);
  font-weight: 600; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--v3-ink);
}
.v3-mast-bar .links a { transition: color 200ms; }
.v3-mast-bar .links a:hover { color: var(--v3-corazon); }
.v3-mast-bar .cta {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--v3-ink); color: var(--v3-paper);
  padding: 14px 22px; border-radius: 0;
  transition: all 200ms;
}
.v3-mast-bar .cta:hover { background: var(--v3-corazon); }

/* ============================================================
   HERO
   ============================================================ */
.v3-hero {
  position: relative;
  border-bottom: 3px solid var(--v3-ink);
  overflow: hidden;
  background: var(--v3-paper);
}
.v3-hero-inner {
  position: relative;
  max-width: var(--v3-max); margin: 0 auto;
  padding: 64px var(--v3-gutter) 80px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: auto auto;
  gap: 64px;
  align-items: end;
  min-height: calc(100vh - 130px);
}

.v3-spine {
  grid-column: 1 / 2;
  align-self: start;
  /* Cuatro columnas, una por elemento: número, procedencia, filete y
     graduación. El original declaraba tres para cuatro hijos, así que el
     filete se quedaba sin ancho — invisible — y la graduación caía a un
     segundo renglón en vez de alinearse a la derecha. */
  display: grid; grid-template-columns: auto auto 1fr auto;
  gap: 18px; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--v3-ink-2);
  margin-bottom: 40px;
}
.v3-spine .num {
  background: var(--v3-corazon); color: var(--v3-paper);
  padding: 4px 10px; font-weight: 600;
  letter-spacing: 0.18em;
}
.v3-spine .line { height: 1px; background: var(--v3-line-strong); }

.v3-hero-side {
  grid-column: 1 / 2;
  grid-row: 1;
  position: relative;
  z-index: 3;
  display: flex; flex-direction: column;
  padding-top: 8px;
}

.v3-hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(60px, 9vw, 140px);
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--v3-ink);
  margin-bottom: 36px;
  text-wrap: balance;
}
.v3-hero-title .ital {
  font-style: italic; font-weight: 300;
  color: var(--v3-ink);
  letter-spacing: -0.02em;
}
.v3-hero-title .corazon-word {
  color: var(--v3-corazon);
  position: relative;
  display: inline-block;
}
.v3-hero-title .corazon-word::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--v3-corazon);
}
.v3-hero-title .small {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--v3-ink-2);
  margin-top: 28px;
  text-transform: uppercase;
}

.v3-hero-lede {
  max-width: 44ch;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px; line-height: 1.6;
  color: rgba(26,24,20,0.82);
  margin-bottom: 36px;
  text-wrap: pretty;
}
.v3-hero-lede em {
  font-style: italic;
  color: var(--v3-corazon);
  font-weight: 500;
}

.v3-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.v3-hero-media {
  grid-column: 2 / 3;
  grid-row: 1;
  position: relative;
  align-self: stretch;
  display: flex; align-items: stretch; justify-content: flex-end;
}
.v3-hero-photo {
  position: relative;
  width: 100%; height: 100%;
  min-height: 72vh;
  overflow: hidden;
  background: var(--v3-ink);
  border: 2px solid var(--v3-ink);
}
.v3-hero-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) saturate(0.92);
}
.v3-hero-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.v3-hero-stamp {
  position: absolute; top: 22px; right: 22px; z-index: 4;
  width: 124px; height: 124px;
  background: var(--v3-corazon);
  border-radius: 50%;
  display: grid; place-items: center;
  transform: rotate(-12deg);
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  border: 2px solid var(--v3-paper);
}
.v3-hero-stamp img { width: 64%; height: 64%; filter: brightness(2.5); }

.v3-hero-photo-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--v3-paper);
}
.v3-hero-photo-caption .lot { color: var(--v3-ember); }

.v3-hero-meta {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--v3-ink);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(26,24,20,0.6);
}
.v3-hero-meta strong {
  display: block;
  color: var(--v3-ink);
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: 0.04em;
  margin-top: 6px;
}

.v3-btn {
  font-family: var(--font-display);
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 16px 24px;
  display: inline-flex; align-items: center; gap: 12px;
  border-radius: 0; border: 1px solid transparent;
  transition: all 200ms cubic-bezier(0.2,0,0,1);
  cursor: pointer;
}
.v3-btn .arrow { display: inline-block; width: 22px; height: 1px; background: currentColor; position: relative; }
.v3-btn .arrow::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.v3-btn-primary { background: var(--v3-corazon); color: var(--v3-paper); }
.v3-btn-primary:hover { background: var(--v3-corazon-deep); }
.v3-btn-ghost { background: transparent; color: var(--v3-ink); border-color: var(--v3-ink); }
.v3-btn-ghost:hover { background: var(--v3-ink); color: var(--v3-paper); }

.v3-hero-ticker {
  border-top: 2px solid var(--v3-ink);
  background: var(--v3-ink);
  color: var(--v3-paper);
  overflow: hidden;
  padding: 14px 0;
}
.v3-hero-ticker-track {
  display: flex; gap: 48px; white-space: nowrap;
  animation: v3-marq 50s linear infinite;
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
}
.v3-hero-ticker-track .dot { color: var(--v3-corazon); }
@keyframes v3-marq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   MANIFIESTO
   ============================================================ */
.v3-manifesto {
  position: relative;
  background: var(--v3-corazon);
  color: var(--v3-paper);
  border-bottom: 3px solid var(--v3-ink);
  overflow: hidden;
}
.v3-manifesto-watermark {
  position: absolute; right: -8%; top: -10%; height: 130%;
  opacity: 0.16; pointer-events: none;
}
.v3-manifesto-inner {
  position: relative; max-width: var(--v3-max); margin: 0 auto;
  padding: 120px var(--v3-gutter);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px; align-items: center;
}
.v3-manifesto-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(254,254,254,0.7);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.v3-manifesto-eyebrow::before {
  content: ""; width: 32px; height: 1px; background: rgba(254,254,254,0.5);
}
.v3-manifesto h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(36px, 5vw, 80px);
  line-height: 1.0; letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--v3-paper);
  margin-bottom: 28px;
  text-wrap: balance;
}
.v3-manifesto h2 .ital { font-style: italic; font-weight: 300; color: rgba(254,254,254,0.7); }
.v3-manifesto h2 .under {
  display: inline-block;
  border-bottom: 4px solid var(--v3-paper);
  padding-bottom: 4px;
}
.v3-manifesto p {
  font-family: var(--font-body); font-weight: 300;
  font-size: 17px; line-height: 1.6;
  color: rgba(254,254,254,0.88);
  max-width: 48ch;
  text-wrap: pretty;
}

.v3-manifesto-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(254,254,254,0.35);
  border-bottom: 1px solid rgba(254,254,254,0.35);
}
.v3-mstat {
  padding: 28px 24px;
  border-right: 1px solid rgba(254,254,254,0.35);
}
.v3-mstat:last-child { border-right: none; }
.v3-mstat .lbl {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(254,254,254,0.7);
  margin-bottom: 12px;
}
.v3-mstat .val {
  font-family: var(--font-display); font-weight: 900;
  font-size: 56px; line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--v3-paper);
  margin-bottom: 10px;
}
.v3-mstat .desc {
  font-family: var(--font-body); font-weight: 300;
  font-size: 13px; line-height: 1.5;
  color: rgba(254,254,254,0.75);
}

/* ============================================================
   LA TIERRA
   ============================================================ */
.v3-tierra {
  position: relative;
  border-bottom: 3px solid var(--v3-ink);
  background: var(--v3-paper);
  overflow: hidden;
}
.v3-tierra-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 92vh;
}
.v3-tierra-photo {
  position: relative; overflow: hidden;
  border-right: 3px solid var(--v3-ink);
}
.v3-tierra-gallery {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  background: var(--v3-ink);
}
.v3-tierra-gallery img {
  position: static;
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.05) saturate(0.92);
}
.v3-tierra-gallery img.main { grid-row: 1 / 3; }
.v3-tierra-photo .tag {
  position: absolute; top: 24px; left: 24px; z-index: 2;
  background: var(--v3-paper); color: var(--v3-ink);
  padding: 8px 14px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--v3-ink);
}
.v3-tierra-photo .coords {
  position: absolute; bottom: 24px; left: 24px; z-index: 2;
  background: var(--v3-ink); color: var(--v3-paper);
  padding: 14px 18px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  border-left: 4px solid var(--v3-corazon);
}
.v3-tierra-photo .coords strong {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: 0.04em;
  color: var(--v3-paper); margin-top: 4px;
}
.v3-tierra-copy {
  padding: 96px 64px 96px var(--v3-gutter);
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.v3-tierra-num {
  position: absolute; top: 48px; right: 48px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 220px; line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--v3-line-strong);
  pointer-events: none;
}
.v3-tierra-eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--v3-corazon); margin-bottom: 20px;
  display: flex; align-items: center; gap: 14px;
  position: relative;
}
.v3-tierra-eyebrow::before {
  content: ""; width: 32px; height: 1px; background: var(--v3-corazon);
}
.v3-tierra h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.92; letter-spacing: -0.025em;
  text-transform: uppercase; color: var(--v3-ink);
  margin-bottom: 32px;
  text-wrap: balance;
  position: relative;
}
.v3-tierra h2 .ital { font-style: italic; font-weight: 300; }
.v3-tierra h2 .red { color: var(--v3-corazon); }
.v3-tierra-body {
  font-family: var(--font-body); font-weight: 300;
  font-size: 17px; line-height: 1.6;
  color: rgba(26,24,20,0.82);
  max-width: 46ch; margin-bottom: 36px;
  text-wrap: pretty;
  position: relative;
}
.v3-tierra-pull {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--v3-ink);
  position: relative;
}
.v3-tierra-pull > div {
  padding: 18px 0;
  border-bottom: 1px solid var(--v3-line);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(26,24,20,0.55);
  padding-right: 20px;
}
.v3-tierra-pull > div:nth-child(even) {
  padding-right: 0; padding-left: 20px;
  border-left: 1px solid var(--v3-line);
}
.v3-tierra-pull strong {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; letter-spacing: 0.04em;
  color: var(--v3-ink); margin-top: 6px;
}

/* ============================================================
   PROCESO
   ============================================================ */
.v3-proceso {
  position: relative;
  background: var(--v3-ink);
  color: var(--v3-paper);
  border-bottom: 3px solid var(--v3-ink);
  padding: 120px var(--v3-gutter);
  overflow: hidden;
}
.v3-proceso-watermark {
  position: absolute; left: -10%; bottom: -20%;
  width: 70%;
  opacity: 0.08;
  pointer-events: none;
}
.v3-proceso-head {
  position: relative;
  max-width: var(--v3-max); margin: 0 auto 64px;
  display: grid; grid-template-columns: 1.5fr 1fr;
  gap: 64px; align-items: end;
}
.v3-proceso-head .eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--v3-corazon); margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.v3-proceso-head .eyebrow::before {
  content: ""; width: 32px; height: 1px; background: var(--v3-corazon);
}
.v3-proceso-head h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(56px, 8.5vw, 156px);
  line-height: 0.86; letter-spacing: -0.04em;
  text-transform: uppercase; color: var(--v3-paper);
  text-wrap: balance;
}
.v3-proceso-head h2 .ital { font-style: italic; font-weight: 300; color: rgba(244,238,226,0.6); }
.v3-proceso-head h2 .red { color: var(--v3-corazon); }
.v3-proceso-head p {
  font-family: var(--font-body); font-weight: 300;
  font-size: 16px; line-height: 1.6;
  color: rgba(244,238,226,0.78);
  max-width: 40ch;
  text-wrap: pretty;
}

.v3-steps {
  position: relative;
  max-width: var(--v3-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 2px solid var(--v3-paper);
}
.v3-step {
  padding: 36px 32px 32px;
  border-right: 2px solid var(--v3-paper);
  position: relative;
  display: flex; flex-direction: column;
}
.v3-step:last-child { border-right: none; }
.v3-step:nth-child(even) { background: rgba(244,238,226,0.04); }
.v3-step-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: 110px; line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--v3-corazon);
  margin-bottom: 12px;
}
.v3-step-tag {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244,238,226,0.6);
  margin-bottom: 36px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(244,238,226,0.2);
}
.v3-step-photo {
  height: 220px;
  margin: 0 -32px 36px;
  position: relative;
  overflow: hidden;
}
.v3-step-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.9) contrast(1.05);
}
.v3-step-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(26,24,20,0.5));
}
.v3-step h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; line-height: 0.96;
  letter-spacing: -0.02em;
  text-transform: uppercase; color: var(--v3-paper);
  margin-bottom: 14px;
}
.v3-step h3 .ital { font-style: italic; font-weight: 300; }
.v3-step p {
  font-family: var(--font-body); font-weight: 300;
  font-size: 14px; line-height: 1.6;
  color: rgba(244,238,226,0.72);
  margin-bottom: 28px;
  text-wrap: pretty;
}
.v3-step-meta {
  margin-top: auto;
  border-top: 1px solid rgba(244,238,226,0.2);
  padding-top: 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(244,238,226,0.55);
}
.v3-step-meta strong {
  display: block; font-family: var(--font-display);
  font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
  color: var(--v3-paper); margin-top: 4px;
}

/* ============================================================
   DOCUMENTAL
   ============================================================ */
.v3-doc {
  position: relative;
  background: var(--v3-paper-2);
  border-bottom: 3px solid var(--v3-ink);
  padding: 120px var(--v3-gutter);
  overflow: hidden;
}
.v3-doc-grid {
  max-width: var(--v3-max); margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: stretch;
}
.v3-doc-copy {
  display: flex; flex-direction: column;
  position: relative;
  padding-right: 20px;
}
.v3-doc-copy .stamp {
  position: absolute; right: -40px; top: -40px;
  width: 140px; height: 140px;
  display: grid; place-items: center;
  background: var(--v3-ink); color: var(--v3-paper);
  border-radius: 50%;
  transform: rotate(-14deg);
  font-family: var(--font-display); font-weight: 800;
  font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  padding: 12px;
  z-index: 3;
}
.v3-doc-copy .stamp em {
  display: block; font-style: normal; font-weight: 900;
  font-size: 28px; letter-spacing: -0.02em; color: var(--v3-corazon);
  margin-top: 4px;
}
.v3-doc-copy .eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--v3-corazon); margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.v3-doc-copy .eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--v3-corazon); }
.v3-doc-copy h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(56px, 9vw, 156px);
  line-height: 0.84; letter-spacing: -0.035em;
  text-transform: uppercase; color: var(--v3-ink);
  margin-bottom: 32px;
}
.v3-doc-copy h2 .ital { font-style: italic; font-weight: 300; }
.v3-doc-copy h2 .red { color: var(--v3-corazon); }
.v3-doc-copy p {
  font-family: var(--font-body); font-weight: 300;
  font-size: 17px; line-height: 1.6;
  color: rgba(26,24,20,0.8);
  max-width: 44ch;
  margin-bottom: 36px;
  text-wrap: pretty;
}
.v3-doc-credits {
  margin-top: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--v3-ink);
  border-bottom: 1px solid var(--v3-ink);
}
.v3-doc-credits > div {
  padding: 16px 0;
  border-right: 1px solid var(--v3-line);
  padding-right: 16px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(26,24,20,0.6);
}
.v3-doc-credits > div:nth-child(even) {
  padding-right: 0; padding-left: 16px; border-right: none;
}
.v3-doc-credits strong {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--v3-ink); margin-top: 6px;
}

.v3-player {
  position: relative;
  background: var(--v3-ink);
  border: 2px solid var(--v3-ink);
  aspect-ratio: 16 / 11;
  overflow: hidden;
  align-self: stretch;
  /* `align-self: stretch` fija la altura desde la fila, y entonces
     `aspect-ratio` deducía la ANCHURA de esa altura: 1070 px dentro de una
     columna de 835. El reproductor se salía de la pantalla y el
     `overflow: hidden` de la sección le recortaba el borde derecho.
     Con una anchura explícita manda la columna. En móvil, donde la rejilla
     pasa a una sola columna y la altura vuelve a ser automática, el
     aspect-ratio sigue gobernando y el póster conserva su 16:11. */
  width: 100%;
}
.v3-player img.poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.7) contrast(1.05);
}
.v3-player .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 30%, rgba(0,0,0,0.7) 100%);
}
.v3-player .top {
  position: absolute; top: 16px; left: 18px; right: 18px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--v3-paper);
}
.v3-player .top .rec { color: var(--v3-corazon); }
.v3-player .play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  background: var(--v3-corazon);
  border-radius: 50%; border: 4px solid var(--v3-paper);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform 200ms, background 200ms;
}
.v3-player .play:hover { transform: translate(-50%, -50%) scale(1.05); background: var(--v3-corazon-deep); }
.v3-player .play svg { width: 36px; height: 36px; fill: var(--v3-paper); margin-left: 6px; }
.v3-player .bottom {
  position: absolute; bottom: 16px; left: 18px; right: 18px;
  display: flex; justify-content: space-between; align-items: end;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--v3-paper);
}
.v3-player .bottom .title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--v3-paper);
}
.v3-player .bottom .title small {
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; font-weight: 400;
  color: rgba(244,238,226,0.7); margin-top: 6px;
}

/* El iframe que main.js inserta al pulsar reproducir. */
.v3-player iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; z-index: 5;
  background: #000;
}

/* Mientras el documental no tenga ID de YouTube o Vimeo, el botón se
   muestra apagado y sin cursor de clic, para no prometer algo que no
   va a ocurrir. main.js añade esta clase al detectar que falta el ID. */
.v3-player.is-unavailable .play {
  opacity: 0.55;
  cursor: not-allowed;
}
.v3-player.is-unavailable .play:hover {
  transform: translate(-50%, -50%);
  background: var(--v3-corazon);
}

/* ============================================================
   RECETAS
   ============================================================ */
.v3-recetas {
  position: relative;
  background: var(--v3-paper);
  border-bottom: 3px solid var(--v3-ink);
  padding: 120px var(--v3-gutter);
  overflow: hidden;
}
.v3-recetas-head {
  max-width: var(--v3-max); margin: 0 auto 72px;
  position: relative;
}
.v3-recetas-head::after {
  content: "Brindis"; position: absolute;
  right: 0; bottom: -40px;
  font-family: var(--font-display); font-weight: 900;
  font-style: italic;
  font-size: 18vw; line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--v3-line);
  z-index: 0; pointer-events: none;
  letter-spacing: -0.03em;
}
.v3-recetas-head .top {
  display: flex; justify-content: space-between; align-items: end;
  gap: 64px;
  position: relative; z-index: 1;
}
.v3-recetas-head .eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--v3-corazon); margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.v3-recetas-head .eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--v3-corazon); }
.v3-recetas-head h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(56px, 8.5vw, 156px);
  line-height: 0.84; letter-spacing: -0.035em;
  text-transform: uppercase; color: var(--v3-ink);
  text-wrap: balance;
}
.v3-recetas-head h2 .ital { font-style: italic; font-weight: 300; color: rgba(26,24,20,0.5); }
.v3-recetas-head p {
  font-family: var(--font-body); font-weight: 300;
  font-size: 16px; line-height: 1.6;
  color: rgba(26,24,20,0.78);
  max-width: 38ch;
  text-wrap: pretty;
}

.v3-recetas-grid {
  position: relative;
  max-width: var(--v3-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 2px solid var(--v3-ink);
  background: var(--v3-paper-2);
}
.v3-receta {
  padding: 36px 32px 32px;
  border-right: 2px solid var(--v3-ink);
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  min-height: 660px;
  transition: background 300ms;
}
.v3-receta:last-child { border-right: none; }
.v3-receta:hover { background: var(--v3-paper-3); }

.v3-receta-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: 96px; line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--v3-corazon);
  margin-bottom: 4px;
}
.v3-receta-tag {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(26,24,20,0.65);
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--v3-line);
  display: flex; justify-content: space-between;
}
.v3-receta-tag .red { color: var(--v3-corazon); font-weight: 700; }

.v3-receta-glass {
  height: 160px;
  display: grid; place-items: center;
  margin-bottom: 24px;
  position: relative;
}
/* Cristalería dibujada en CSS, provisional hasta que lleguen las fotos. */
.v3-glass { position: relative; }
.v3-glass.copita {
  width: 100px; height: 110px;
  border: 2px solid var(--v3-ink);
  border-radius: 0 0 50% 50% / 0 0 70% 70%;
  background: linear-gradient(180deg, transparent 50%, rgba(112,0,14,0.18) 50%);
}
.v3-glass.copita::before {
  content: ""; position: absolute; left: 50%; bottom: -36px;
  transform: translateX(-50%);
  width: 64%; height: 4px; background: var(--v3-ink);
}
.v3-glass.copita::after {
  content: ""; position: absolute; left: 30%; top: 18px;
  width: 14px; height: 8px; background: var(--v3-paper);
  transform: rotate(8deg); opacity: 0.7;
}
.v3-glass.rocks {
  width: 130px; height: 130px;
  border: 2px solid var(--v3-ink);
  border-top: none;
  background: linear-gradient(180deg, transparent 35%, rgba(112,0,14,0.18) 35%);
  position: relative;
}
.v3-glass.rocks::before {
  content: ""; position: absolute; left: 18px; top: 50%;
  width: 28px; height: 28px;
  border: 2px solid var(--v3-ink);
  transform: rotate(8deg);
  background: var(--v3-paper);
}
.v3-glass.rocks::after {
  content: ""; position: absolute; right: 22px; top: 60%;
  width: 22px; height: 22px;
  border: 2px solid var(--v3-ink);
  transform: rotate(-12deg);
  background: var(--v3-paper);
}
.v3-glass.highball {
  width: 70px; height: 150px;
  border: 2px solid var(--v3-ink);
  border-top: none;
  background: linear-gradient(180deg, transparent 22%, rgba(112,0,14,0.18) 22% 75%, rgba(112,0,14,0.32) 75%);
}
.v3-glass.highball::before {
  content: ""; position: absolute; top: -16px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 2px; background: var(--v3-ink);
}
.v3-glass.highball::after {
  content: "·"; position: absolute; top: 28px; left: 8px;
  font-family: var(--font-mono); font-size: 26px;
  color: var(--v3-corazon);
}

.v3-receta h3 {
  font-family: var(--font-display); font-weight: 900;
  font-size: 40px; line-height: 0.94;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--v3-ink);
  margin-bottom: 12px;
}
.v3-receta h3 .ital { font-style: italic; font-weight: 300; }
.v3-receta .sub {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--v3-ember);
  margin-bottom: 24px;
}
.v3-receta .desc {
  font-family: var(--font-body); font-weight: 300;
  font-size: 14px; line-height: 1.6;
  color: rgba(26,24,20,0.78);
  margin-bottom: 28px;
  text-wrap: pretty;
}
.v3-receta-ing {
  list-style: none; padding: 0;
  border-top: 1px solid var(--v3-ink);
}
.v3-receta-ing li {
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dashed var(--v3-line);
  font-family: var(--font-body); font-weight: 400;
  font-size: 14px; color: var(--v3-ink);
}
.v3-receta-ing li:last-child { border-bottom: none; }
.v3-receta-ing li small {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(26,24,20,0.55);
}
.v3-receta-foot {
  margin-top: 24px;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(26,24,20,0.55);
  border-top: 1px solid var(--v3-ink);
  padding-top: 14px;
}
.v3-receta-foot strong {
  display: block; font-family: var(--font-display);
  font-weight: 700; font-size: 12px; letter-spacing: 0.04em;
  color: var(--v3-ink); margin-top: 4px;
}

/* ============================================================
   EMBAJADORES
   ============================================================ */
.v3-embajadores {
  position: relative;
  background: var(--v3-paper-2);
  border-bottom: 3px solid var(--v3-ink);
  padding: 120px var(--v3-gutter);
}
.v3-embajadores-head {
  max-width: var(--v3-max); margin: 0 auto 64px;
}
.v3-embajadores-head .eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--v3-corazon); margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.v3-embajadores-head .eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--v3-corazon); }
.v3-embajadores-head h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 6vw, 96px);
  line-height: 0.9; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--v3-ink);
  margin-bottom: 24px;
  text-wrap: balance;
}
.v3-embajadores-head h2 .ital { font-style: italic; font-weight: 300; color: rgba(26,24,20,0.55); }
.v3-embajadores-head p {
  font-family: var(--font-body); font-weight: 300;
  font-size: 16px; line-height: 1.6;
  color: rgba(26,24,20,0.75);
  max-width: 52ch;
  text-wrap: pretty;
}
.v3-embajadores-grid {
  max-width: var(--v3-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.v3-embajador {
  border: 2px dashed var(--v3-line-strong);
  padding: 40px 20px;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  text-align: center;
  background: var(--v3-paper);
}
.v3-embajador-logo {
  width: 88px; height: 88px;
  border: 1px solid var(--v3-line-strong);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(26,24,20,0.4);
}
.v3-embajador-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: 0.02em;
  color: rgba(26,24,20,0.55);
}
.v3-embajador-tag {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--v3-corazon);
}

/* ============================================================
   BRINDIS — cierre
   ============================================================ */
.v3-close {
  position: relative;
  background: var(--v3-ink);
  color: var(--v3-paper);
  padding: 160px var(--v3-gutter) 140px;
  overflow: hidden;
  text-align: center;
}
.v3-close-watermark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 86vw; max-width: 1200px;
  opacity: 0.10;
  pointer-events: none;
}
.v3-close-inner {
  position: relative; max-width: 1100px; margin: 0 auto;
}
.v3-close .eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(244,238,226,0.7); margin-bottom: 40px;
  display: inline-flex; align-items: center; gap: 14px;
}
.v3-close .eyebrow::before, .v3-close .eyebrow::after {
  content: ""; width: 36px; height: 1px; background: rgba(244,238,226,0.5);
}
.v3-close h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(64px, 9vw, 168px);
  line-height: 0.88; letter-spacing: -0.035em;
  text-transform: uppercase; color: var(--v3-paper);
  margin-bottom: 48px;
  text-wrap: balance;
}
.v3-close h2 .ital { font-style: italic; font-weight: 300; color: rgba(244,238,226,0.7); }
.v3-close h2 .red { color: var(--v3-corazon); }
.v3-close p {
  font-family: var(--font-body); font-weight: 300;
  font-size: 18px; line-height: 1.6;
  color: rgba(244,238,226,0.85);
  max-width: 52ch; margin: 0 auto 48px;
  text-wrap: pretty;
}
.v3-close .v3-cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.v3-close .v3-btn-primary { background: var(--v3-corazon); }
.v3-close .v3-btn-primary:hover { background: var(--v3-paper); color: var(--v3-corazon); }
.v3-close .v3-btn-ghost { color: var(--v3-paper); border-color: rgba(244,238,226,0.4); }
.v3-close .v3-btn-ghost:hover { background: var(--v3-paper); color: var(--v3-ink); border-color: var(--v3-paper); }

/* ============================================================
   FOOTER
   ============================================================ */
.v3-foot {
  background: var(--v3-paper);
  color: var(--v3-ink);
  padding: 72px var(--v3-gutter) 36px;
  border-top: 3px solid var(--v3-ink);
}
.v3-foot-grid {
  max-width: var(--v3-max); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--v3-line-strong);
}
.v3-foot-brand img { height: 64px; width: auto; margin-bottom: 24px; }
.v3-foot-brand p {
  font-family: var(--font-body); font-weight: 300;
  font-size: 14px; line-height: 1.65;
  color: rgba(26,24,20,0.75);
  max-width: 36ch;
}
.v3-foot h5 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--v3-ink); margin-bottom: 22px;
  border-bottom: 1px solid var(--v3-ink);
  padding-bottom: 10px;
}
.v3-foot ul { list-style: none; padding: 0; }
.v3-foot li { margin-bottom: 12px; }
.v3-foot li a {
  font-family: var(--font-body); font-weight: 400;
  font-size: 14px; color: rgba(26,24,20,0.75);
  transition: color 200ms;
}
.v3-foot li a:hover { color: var(--v3-corazon); }
.v3-foot-bottom {
  max-width: var(--v3-max); margin: 0 auto;
  padding-top: 30px;
  display: flex; justify-content: space-between; gap: 30px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(26,24,20,0.55);
}
.v3-legal {
  background: var(--v3-corazon-deep); color: rgba(254,254,254,0.92);
  text-align: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 14px var(--v3-gutter);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .v3-hero-inner { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; padding-bottom: 64px; }
  .v3-hero-side, .v3-hero-media { grid-column: 1 / -1; }
  .v3-hero-media { grid-row: 2; }
  .v3-hero-meta { grid-row: 3; grid-template-columns: repeat(2, 1fr); gap: 20px 32px; }
  .v3-hero-photo { min-height: 60vh; }
  .v3-hero-stamp { width: 96px; height: 96px; }
  .v3-manifesto-inner { grid-template-columns: 1fr; gap: 56px; padding: 80px var(--v3-gutter); }
  .v3-manifesto-stats { grid-template-columns: 1fr; }
  .v3-mstat { border-right: none; border-bottom: 1px solid rgba(254,254,254,0.35); }
  .v3-mstat:last-child { border-bottom: none; }
  .v3-tierra-inner { grid-template-columns: 1fr; }
  .v3-tierra-photo { border-right: none; border-bottom: 3px solid var(--v3-ink); min-height: 50vh; }
  .v3-tierra-gallery { grid-template-columns: 1fr 1fr; }
  .v3-tierra-copy { padding: 64px var(--v3-gutter); }
  .v3-tierra-num { font-size: 110px; top: 24px; right: 24px; }
  .v3-proceso-head { grid-template-columns: 1fr; gap: 32px; }
  .v3-steps { grid-template-columns: 1fr 1fr; }
  .v3-step { border-right: none; border-bottom: 2px solid var(--v3-paper); }
  .v3-step:last-child { border-bottom: none; }
  .v3-doc-grid { grid-template-columns: 1fr; gap: 32px; }
  .v3-doc-copy .stamp { right: 8px; top: 8px; width: 100px; height: 100px; }
  .v3-recetas-grid { grid-template-columns: 1fr; }
  .v3-receta { border-right: none; border-bottom: 2px solid var(--v3-ink); }
  .v3-receta:last-child { border-bottom: none; }
  .v3-embajadores-grid { grid-template-columns: 1fr 1fr; }
  .v3-foot-grid { grid-template-columns: 1fr 1fr; }
  .v3-mast-bar .links { display: none; }
  .v3-mast-bar { grid-template-columns: auto 1fr auto; }
}
@media (max-width: 640px) {
  :root { --v3-gutter: 22px; }
  .v3-mast-meta { font-size: 9px; }
  .v3-mast-bar .mark { font-size: 14px; }
  .v3-hero-title { font-size: clamp(48px, 13vw, 80px); }
  .v3-hero-stamp { width: 80px; height: 80px; top: 14px; right: 14px; }
  .v3-steps { grid-template-columns: 1fr; }
  .v3-embajadores-grid { grid-template-columns: 1fr; }
  .v3-foot-grid { grid-template-columns: 1fr; }
  .v3-foot-bottom { flex-direction: column; }
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */

/* Foco visible al navegar con teclado. Sin esto, quien no usa ratón
   no puede saber en qué enlace está parado. */
.v3 a:focus-visible,
.v3 button:focus-visible {
  outline: 3px solid var(--v3-corazon);
  outline-offset: 3px;
}
.v3-proceso a:focus-visible,
.v3-close a:focus-visible,
.v3-player button:focus-visible {
  outline-color: var(--v3-paper);
}

/* El marquesina infinita y el desplazamiento suave provocan mareo a
   quien tiene sensibilidad al movimiento. El sistema operativo expone
   esa preferencia y aquí la respetamos. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v3-hero-ticker-track { animation: none; }
  .v3 *, .v3 *::before, .v3 *::after {
    transition-duration: 0.01ms !important;
  }
}