/* ============================================================
   PAM26 — Landing de registro del evento gratuito
   "Domina Pasteles con Estructura · Edición Flamenco"
   Pamela Pastor · 14 al 20 de septiembre de 2026

   ESTRUCTURA: las mismas secciones que Coquette (Adriana) y Pastelera Pro (Luisa), en el mismo
   orden — hero, video, las dos clases, historia, testimonios, contador y pie.
   La sección "Esto es para vos si…" existió y se sacó el 23/08/2026 por decisión de Juan.
   Al sacarla quedaban dos seccion-alt pegadas, así que se corrió la alternancia de fondos:
   video (normal) → las dos clases (alt) → historia (normal) → testimonios (alt) → cierre.

   IDENTIDAD (22/08/2026): la paleta oficial del cliente, con una regla que manda sobre todo
   lo demás: EL VINO ES PARA DESTACAR, NO PARA TODO.
     · el fondo es un degradé entre el rosa empolvado y el azul cielo, sobre blanco marfil
     · el texto va en un vino tan oscuro que se lee negro — no en el vino pleno, ni en gris
     · el vino aparece en el botón, en las palabras destacadas y poco más
     · el segundo tono es el mismo vino aclarado (los verdes de la paleta quedaron sin uso)
   Si en una pantalla hay más de dos o tres cosas en vino, está mal.
   ============================================================ */

:root {
  /* ---- Paleta oficial, tal cual la entregó el cliente ----
     Rojo vino #AD1B45 · Rosa empolvado #E998A5 · Azul cielo #ACE6FF
     Verde oliva oscuro #3E5A2F · Verde salvia #A1BF7A · Blanco marfil #F0EBE5 */

  --marfil:  #F0EBE5;   /* la base de toda la página */

  /* Las superficies van translúcidas para que el degradé se vea a través de las tarjetas.
     La sólida es para lo que se apoya sobre algo oscuro (el marco negro del video). */
  --superficie:        rgba(255, 253, 250, .72);
  --superficie-2:      rgba(240, 235, 229, .85);
  --superficie-solida: #FBF8F4;

  /* ---- Texto ----
     Vino muy oscurecido: se lee casi negro pero es cálido y de la familia, y deja que el vino
     pleno destaque. Los tokens se llaman por su ROL, no por su color: ya cambió tres veces. */
  --tinta:       #43252B;   /* texto principal · 8,4:1 hasta en la zona más rosa del degradé */
  --tinta-suave: #67494D;   /* texto secundario · 4,9:1 en esa misma zona */

  /* ---- El vino: solo destaque ----
     Botón, palabras marcadas, "Flamenco" y la etiqueta de secciones sin datos. Nada más. */
  --vino:       #AD1B45;   /* 5,1:1 sobre la zona más rosa · 6,9:1 con texto blanco encima */
  --vino-hondo: #8A1436;   /* hover */
  --vino-claro: #C13F5D;   /* solo para el brillo de "Flamenco" (3,5:1 — texto grande únicamente) */
  --vino-humo:  #FBE9EB;   /* relleno de acento muy suave */
  --sobre-vino: #FFF4F1;   /* lo que va ENCIMA del vino */

  /* ---- Los verdes ----
     🔴 SIN USO desde el 23/08/2026: son de la paleta oficial, pero como color de texto no
     convencieron y se sacaron de toda la interfaz. Quedan definidos porque el lugar donde sí
     pegarían es la decoración —hojas, filetes, un fondo de sección—, no la tipografía. */
  --oliva:       #3E5A2F;
  --salvia:      #A1BF7A;
  --salvia-humo: #E8F0DC;

  --linea:      #E2D9CF;
  --linea-suave:#EBE4DC;

  --ancho: 1160px;
  --radio: 14px;

  /* ---- Tipografías del manual ----
     🔴 Recoleta, Noah y Amsterdam One son COMERCIALES: no están en Google Fonts y no se pueden
     descargar. Van primeras en cada pila y hoy no resuelven, así que entra el sustituto libre
     más parecido. Cuando lleguen los .woff2 con licencia web se descomenta el @font-face de
     abajo y la landing cambia de tipografía sin tocar ninguna otra regla. */
  --display: "Recoleta", "Fraunces", Georgia, "Times New Roman", serif;
  --texto:   "Noah", "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --firma:   "Amsterdam One", "Sacramento", "Snell Roundhand", cursive;
}

/* Descomentar cuando los archivos estén en assets/fonts/ (.woff2, licencia web).
@font-face { font-family: "Recoleta";      src: url("assets/fonts/recoleta-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Recoleta";      src: url("assets/fonts/recoleta-bold.woff2")    format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noah";          src: url("assets/fonts/noah-regular.woff2")     format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noah";          src: url("assets/fonts/noah-medium.woff2")      format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Noah";          src: url("assets/fonts/noah-bold.woff2")        format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Amsterdam One"; src: url("assets/fonts/amsterdam-one.woff2")    format("woff2"); font-weight: 400; font-display: swap; }
*/

/* Descomentar cuando los archivos estén en assets/fonts/ (.woff2, licencia web).
@font-face { font-family: "Recoleta";      src: url("assets/fonts/recoleta-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Recoleta";      src: url("assets/fonts/recoleta-bold.woff2")    format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noah";          src: url("assets/fonts/noah-regular.woff2")     format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noah";          src: url("assets/fonts/noah-medium.woff2")      format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Noah";          src: url("assets/fonts/noah-bold.woff2")        format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Amsterdam One"; src: url("assets/fonts/amsterdam-one.woff2")    format("woff2"); font-weight: 400; font-display: swap; }
*/

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.container {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 22px;
}
.centro { text-align: center; }

/* ---------- Tipografia ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0; }
em { font-style: italic; color: var(--vino); }

.antetitulo {
  font-family: var(--texto);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vino);
  margin: 0 0 12px;
}

.titulo-seccion { font-size: clamp(30px, 5.2vw, 46px); margin-bottom: 18px; }
.entrada { color: var(--tinta-suave); max-width: 60ch; margin: 0 0 34px; }
.entrada-centro { margin-left: auto; margin-right: auto; }

/* El degradé del tablero. Fijo: no scrollea con la página, así el fondo va cambiando
   debajo del contenido en vez de repetirse. Va detrás de todo y no intercepta clics. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* El celeste: UNA sola mancha, abajo a la izquierda. En el tablero llega hasta #DDE9ED
       y no aparece en ningún otro lado — por eso acá tampoco. */
    radial-gradient(34% 27% at 11% 84%, rgba(172, 230, 255, .52) 0%, rgba(172, 230, 255, 0) 72%),
    /* El rosa: una BANDA PAREJA de lado a lado que se apaga hacia abajo, no una mancha redonda.
       La grilla del tablero da el mismo valor en las nueve columnas de cada fila, así que es un
       degradé vertical. Medido: #ECBDC2 arriba → #EED9D7 al 44% → #F0EBE5 (marfil puro) al 72%. */
    linear-gradient(180deg,
      rgba(233, 152, 165, .30) 0%,
      rgba(233, 152, 165, .24) 20%,
      rgba(233, 152, 165, .12) 42%,
      rgba(233, 152, 165, 0)   62%),
    var(--marfil);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  width: 100%;
  padding: 17px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--vino);
  color: var(--sobre-vino);
  font-family: var(--texto);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: 0 12px 26px -14px rgba(173, 27, 69, .32);
}
.btn:hover { background: var(--vino-hondo); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .65; cursor: default; transform: none; }
.btn-angosto { max-width: 380px; }
.cta-video { margin-top: 38px; }

/* ============================================================
   HUECOS: mientras el material no exista, el hueco lo dice.
   Es a proposito que se vea feo: un placeholder discreto es un
   placeholder que termina publicado.
   ============================================================ */
.foto.sin-foto::before,
.dia-media.sin-foto::before,
.video-marco::before,
.testi[data-hueco]::before {
  content: attr(data-hueco);
  display: grid;
  place-items: center;
  padding: 24px;
  border: 2px dashed rgba(173, 27, 69, .28);
  border-radius: var(--radio);
  background: var(--superficie-solida);
  color: var(--vino);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ============ HERO ============ */
.hero { position: relative; padding: 0; overflow: hidden; }

/* Resplandor detras del contenido: empuja el ojo al bloque de registro sin agregar un elemento
   visible. Va en un div propio y no en un ::before del hero para poder animarlo sin repintar. */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(233, 152, 165, .30) 0%,
    rgba(233, 152, 165, .16) 40%,
    rgba(233, 152, 165, 0)   72%);
}
/* Medido sobre el render, no calculado. Con el texto en --tinta el problema de contraste que
   había con el verde desapareció: arriba de todo, donde el rosa es más fuerte (#EBBFC3),
   --tinta da 8,3:1 y --tinta-suave 4,84:1 — los dos pasan AA con margen.
   El único que no llega ahí es --vino como texto CHICO (4,23:1). Como texto grande sí:
   "Edición Flamenco" está un poco más abajo y da 4,54:1. */

.hero-grid { position: relative; display: grid; gap: 34px; }


.titulo { margin-bottom: 0; }
/* ---------- Lockup del evento ----------
   Suple al logotipo hasta que Pamela tenga uno. El detalle de por que esta armado asi esta en
   el comentario del <h1> en index.html. */
.evento { display: grid; justify-items: start; gap: 5px; }

.ev-verbo {
  font-family: var(--texto);
  font-size: clamp(13px, 2.7vw, 18px);
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--tinta);
}

.ev-nombre {
  font-size: clamp(34px, 7.6vw, 58px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.022em;
  text-wrap: balance;
}

/* Los dos filetes lo cierran como una firma y no como un renglon mas de texto: es lo que
   convierte al conjunto en algo que se lee como marca. */
.ev-edicion {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.6vw, 16px);
  margin-top: 2px;
  font-family: var(--firma);
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.1;
  color: var(--vino);
}
.ev-edicion::before,
.ev-edicion::after {
  content: "";
  flex: none;
  height: 1px;
  width: clamp(22px, 6vw, 52px);
  background: var(--linea);
}

/* "Flamenco" lleva un barrido lento del vino a su version clara. Es de los pocos lugares donde
   el vino se permite ser decorativo, y se lo permite porque es el nombre del evento.
   El punto mas claro del barrido es --vino-claro, 3,5:1: cumple el minimo de 3:1 SOLO porque la
   palabra nunca baja de 28px. Si alguna vez se achica, hay que sacar ese punto medio. */
.ev-edicion b { font-weight: 400; color: var(--vino); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ev-edicion b {
    background-image: linear-gradient(100deg,
      var(--vino) 0%, var(--vino) 32%,
      var(--vino-claro) 50%,
      var(--vino) 68%, var(--vino) 100%);
    background-size: 240% 100%;
    background-position: 120% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: ev-brillo 9s ease-in-out 1.4s infinite;
  }
}
@keyframes ev-brillo {
  0%, 16%   { background-position: 120% 0; }
  62%, 100% { background-position: -20% 0; }
}

/* Entrada escalonada. Va sobre el lockup y sobre nada mas: el resto del hero aparece de una,
   porque lo que no puede pasar es que el formulario tarde en estar. */
.evento > * { animation: ev-entra .72s cubic-bezier(.22, .61, .36, 1) backwards; }
.ev-verbo   { animation-delay: .06s; }
.ev-nombre  { animation-delay: .17s; }
.ev-edicion { animation-delay: .29s; }
@keyframes ev-entra { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  .evento > * { animation: none; }
  .ev-edicion b { animation: none; background-position: 46% 0; }
}

/* La PUV. Unico parrafo del hero y ultima linea antes del formulario: por eso va en tinta
   plena y no en el gris secundario, y con el mismo cuerpo que la bajada de una portada. */
.hero-puv {
  margin: 20px 0 26px;
  font-family: var(--texto);
  font-size: clamp(17px, 3.4vw, 21px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--tinta);
  max-width: 48ch;
}
.hero-puv em { font-style: normal; font-weight: 700; }

/* flex-wrap para que en pantallas angostas la fecha y la aclaracion se apilen en vez de
   apretarse una contra otra. */
.fechas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--tinta-suave);
}
.fechas strong { color: var(--tinta); }
.fechas svg { flex: none; color: var(--vino); }


/* Cuatro garantias cortas debajo del formulario, como en Coquette. */
.hero-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 22px 0 0;
  padding: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tinta-suave);
}
.hero-trust li { display: flex; align-items: center; gap: 7px; }
.hero-trust svg { color: var(--tinta); flex: none; }

/* ---------- Formulario ---------- */
.form { display: grid; gap: 11px; max-width: 440px; }
.form-ancho { margin-left: auto; margin-right: auto; text-align: left; }

.campo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 16px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--superficie);
  transition: border-color .18s ease, background .18s ease;
}
.campo:focus-within { border-color: var(--vino); background: var(--superficie-2); }
.campo svg { flex: none; color: var(--tinta-suave); }
.campo input {
  flex: 1;
  min-width: 0;
  padding: 16px 0;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 16px;   /* menos de 16px hace que iOS le haga zoom al foco */
  outline: none;
}
.campo input::placeholder { color: #7C6E67; }

.form-msg { margin: 2px 0 0; font-size: 14px; min-height: 20px; }
.form-msg.ok  { color: #7BD3A0; }
.form-msg.err { color: #FF9A9A; }
.nota-centro { text-align: center; margin-top: 22px; }
.form-nota { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--tinta-suave); }

/* ---------- Foto del hero ---------- */
.foto { position: relative; border-radius: var(--radio); overflow: hidden; }
.foto img { width: 100%; height: auto; object-fit: cover; }
/* ---------- La imagen del hero, a todo el ancho ----------
   Rompe el contenedor a proposito: es un banner, y con 22px de aire a cada lado se veia como
   una tarjeta suelta en vez de la apertura de la pagina. Sin radio y sin margen arriba, se
   apoya contra el texto y contra lo que siga abajo.
   El calc() desborda por el ancho de la barra de scroll; no importa porque .hero tiene
   overflow:hidden y lo recorta. Si alguna vez se saca ese overflow, la pagina scrollea de lado. */
.hero-visual {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* El aire de abajo es lo que hace que el titulo NO pise la pieza: se apoya a caballo entre la
   cola del degrade y el fondo de la pagina. Si se achica, el titulo vuelve a subir sobre la torta. */
.hero-visual .foto { border-radius: 0; height: clamp(260px, 36svh, 330px); }
.hero-visual .foto img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Baja el encuadre: deja ver la mesada abajo, que es donde caen el degrade y el titulo,
     y empuja la pieza hacia arriba para que no la tape nada. */
  object-position: 50% 58%;
  /* El degrade NO es una capa de color encima: es una mascara sobre la propia imagen, que se
     disuelve y deja ver el fondo real de la pagina. Con una capa de color habria que adivinar
     el color del degrade del fondo en ese punto exacto, y cambia con el ancho. */
  -webkit-mask-image: linear-gradient(180deg, #000 64%, rgba(0, 0, 0, .45) 85%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(180deg, #000 64%, rgba(0, 0, 0, .45) 85%, rgba(0, 0, 0, 0) 100%);
}

/* El titulo, apoyado sobre el degrade. Absoluto: no suma alto, asi el formulario no baja. */


/* El hueco tiene la forma de lo que va a entrar: la imagen del hero es apaisada. */
.foto.sin-foto::before { aspect-ratio: 1632 / 963; }

/* ============ SECCIONES ============ */
.seccion { padding: 66px 0; }
/* Translúcida a propósito: marca el ritmo de la página sin tapar el degradé. */
.seccion-alt { background: rgba(255, 253, 250, .50); border-block: 1px solid var(--linea-suave); }

/* ---------- Video ---------- */
.video-marco {
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: #000;
  max-width: 860px;
  margin: 0 auto;
}
.video-marco::before { aspect-ratio: 16 / 9; }
.video-el { width: 100%; height: auto; display: block; }

/* ---------- Las dos clases ---------- */
.dias { display: grid; gap: 22px; }
.dia {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--superficie-2);
}
.dia-media { position: relative; }
.dia-media img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.dia-media.sin-foto::before { aspect-ratio: 3 / 4; border-radius: 0; border-width: 0 0 2px 0; }
/* El día 1 va en vino pleno y el día 2 en el vino claro. Se distinguen de un vistazo sin
   meter un segundo color en una página que es monocroma a propósito. */
.dia:nth-child(2) .dia-badge { background: var(--vino-claro); }

.dia-badge {
  position: absolute;
  left: 14px; top: 14px;
  display: grid;
  place-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--vino);
  color: var(--sobre-vino);
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
}
.dia-badge b {
  display: block;
  font-family: var(--texto);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 2px;
}
.dia-body { padding: 24px 22px 28px; }
.dia-fecha {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vino);
}
.dia-body h3 { font-size: 23px; margin-bottom: 16px; }
.dia-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.dia-body li { display: flex; gap: 11px; color: var(--tinta-suave); font-size: 15.5px; line-height: 1.5; }
.dia-body li b { color: var(--tinta); font-weight: 600; }
.check {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--vino-humo);
  color: var(--vino);
  font-size: 11px;
  font-weight: 700;
}

/* ---------- Historia ---------- */
.historia-grid { display: grid; gap: 28px; align-items: center; }
/* La foto de la historia va en circulo. El radio se pone en .foto (el marco) y en la imagen:
   si va solo en el marco, en Safari la esquina de la <img> se asoma sobre el borde.

   Al 62% del ancho de su columna: a tamano completo el circulo competia con la foto del hero
   y con el titulo de la seccion. Aca es un retrato de apoyo, no una pieza principal. */
.foto-bio { width: 62%; margin-inline: auto; }
.foto-bio, .foto-bio img { border-radius: 50%; }
.foto-bio.sin-foto::before { aspect-ratio: 1; border-radius: 50%; }
.historia-texto p { color: var(--tinta-suave); margin: 0 0 16px; }
/* La firma va en la manuscrita del manual: es su lugar natural. */
.historia-firma {
  font-family: var(--firma);
  font-style: normal;
  font-size: 40px;
  line-height: 1;
  color: var(--vino) !important;
  margin-top: 26px !important;
}

/* Marca de sección sin datos confirmados. Antes era un punteado alrededor de toda la sección:
   cumplía la función pero ensuciaba la lectura del diseño. Ahora es una etiqueta chica arriba,
   que avisa lo mismo sin romper la página. Se borra sola al sacar el atributo data-pendiente. */
[data-pendiente] { position: relative; }
[data-pendiente]::before {
  content: "Sin datos confirmados · no publicar así";
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--vino-humo);
  border: 1px solid var(--vino);
  color: var(--vino);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.aviso { color: var(--vino) !important; font-weight: 600; }

/* ---------- Testimonios: carrusel ---------- */
.carrusel { position: relative; max-width: 420px; margin: 0 auto; }
.carrusel-viewport { overflow: hidden; border-radius: var(--radio); }
.carrusel-track { display: flex; transition: transform .45s ease; }
@media (prefers-reduced-motion: reduce) { .carrusel-track { transition: none; } }
.carrusel-slide { flex: 0 0 100%; min-width: 0; }
.testi { margin: 0; }

/* ---------- Tarjeta del testimonio ----------
   Lo que se ve antes de tocar play. Sin poster, así que la hace la marca: el vino de fondo y el
   círculo del play. Es un <button> de verdad, no un div con onclick: entra por teclado sola. */
.testi-play {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 24px;
  border: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--vino-hondo);   /* solo se ve mientras carga el poster */
  color: var(--sobre-vino);
  cursor: pointer;
  font-family: var(--texto);
  transition: filter .18s ease;
}
/* El cuadro del video. Va oscurecido para que el play y el texto se lean encima sin
   necesidad de una capa de color aparte. */
.testi-play img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.72);
  transition: transform .3s ease, filter .18s ease;
}
.testi-play:hover img { transform: scale(1.04); filter: brightness(.62); }
.testi-icono, .testi-label { position: relative; z-index: 1; }
.testi-icono {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--sobre-vino);
  color: var(--vino);
  padding-left: 3px;            /* el triángulo se ve centrado recién corrido a la derecha */
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .5);
  transition: transform .18s ease;
}
.testi-play:hover .testi-icono { transform: scale(1.06); }
.testi-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.testi[data-hueco]::before { aspect-ratio: 9 / 16; }
.testi video, .testi img { width: 100%; height: auto; border-radius: var(--radio); display: block; }

.carrusel-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: rgba(255, 253, 250, .92);
  backdrop-filter: blur(6px);
  color: var(--tinta);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.carrusel-flecha:hover { background: var(--vino); color: var(--sobre-vino); }
.carrusel-flecha.prev { left: -14px; }
.carrusel-flecha.next { right: -14px; }

.carrusel-puntos { display: flex; justify-content: center; gap: 2px; margin-top: 12px; }
/* El punto se ve de 8px pero el botón mide 24: en celular, un objetivo de 8px no se
   puede tocar. El punto visible se dibuja con un ::before. */
.carrusel-puntos button {
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.carrusel-puntos button::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--linea);
  transition: background .18s ease, width .18s ease;
}
.carrusel-puntos button.activo::before { background: var(--vino); width: 22px; border-radius: 999px; }

/* ---------- Cierre + contador ---------- */
.cierre { padding-bottom: 96px; }

.contador { display: flex; justify-content: center; gap: 10px; margin: 26px 0 30px; }
.reloj {
  min-width: 74px;
  padding: 14px 8px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--superficie-2);
}
.reloj strong {
  display: block;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.reloj span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.contador.oculto { display: none; }

/* ---------- Pie ---------- */
.pie {
  padding: 40px 0 124px;   /* el hueco de abajo es para que la barra fija del celular no pise el legal */
  border-top: 1px solid var(--linea-suave);
  text-align: center;
  font-size: 13.5px;
  color: var(--tinta-suave);
}
.pie-marca {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 14px;
}
.pie-marca small {
  display: block;
  font-family: var(--texto);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vino);
  margin-top: 6px;
}
.pie p { margin: 0 0 7px; }
.pie-legal { font-size: 12px; opacity: .75; }

/* ---------- Reveal ---------- */
.rev { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.rev.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; transition: none; }
}

/* ============ CELULAR ============ */
/* 🔴 La foto va primera en el DOM porque en desktop se ubica a la derecha. En celular eso la
   dejaba ocupando la pantalla entera —el hueco es 3:4— y empujaba el título y el formulario
   abajo del pliegue: la persona abría el link y no veía ni de qué se trata ni dónde anotarse.
   Acá se recorta a una banda: se sigue viendo la pieza, pero el título entra en la misma
   pantalla. svh y no vh porque la barra del navegador se come 100-150px que vh ignora. */
@media (max-width: 899px) {
  .hero { padding-top: 0; }
  .hero-grid { gap: 18px; }
  .evento { justify-items: center; }

  /* En celular la columna es una sola y alineado a la izquierda el hero queda desbalanceado:
     el titulo arranca pegado al borde y cada renglon termina en un largo distinto. Centrado,
     todo el bloque se ordena sobre el mismo eje que la foto y que el boton.
     Solo el hero: el resto de la pagina sigue alineado a la izquierda, que es lo que se lee
     mejor en los parrafos largos de las secciones. */
  .hero-copy { text-align: center; }
  .hero-puv { margin-left: auto; margin-right: auto; }
  .hero-copy .form { margin-left: auto; margin-right: auto; }
  /* Safari SI hereda text-align dentro del input: sin esto el correo se escribe centrado. */
  .hero-copy .campo input { text-align: left; }
  .hero-trust { justify-content: center; }

  /* El icono del calendario y la fecha son hermanos dentro de un flex: al centrar, el texto
     se iba al renglon de abajo y el icono quedaba solo arriba. En bloque, el icono entra
     inline en la primera linea y el conjunto se centra como un parrafo comun. */
  .fechas { display: block; }
  .fechas svg { display: inline-block; vertical-align: -3px; margin-right: 7px; }
}

/* ============ DESKTOP ============ */
@media (min-width: 900px) {
  body { font-size: 18px; }
  .hero { padding: 0 0 0; }
  /* DOS COLUMNAS: a la izquierda el nombre, la PUV, la fecha y el formulario;
     a la derecha la imagen sola, en su recuadro. */
  .hero { padding: 64px 0 72px; }
  /* 🔴 Estos cuatro numeros estan atados entre si y salen de medir, no de tantear.
     El limite real es la fila de garantias: necesita unos 510px o "Cupos limitados" se cae a un
     segundo renglon. Todo lo que no usa esa fila es lo que le queda a la imagen.
     Se probaron cinco combinaciones midiendo el ancho de la IMAGEN (no del marco):
       1.16fr/36/14/10 → 558px      1.22fr/30/12/8 → 579px  ← este
       1.20fr/32/13/8  → 573px      1.25fr/28/12/7 → 588px pero se parte la fila
     Si se toca uno, hay que volver a mirar la fila de garantias. */
  .hero-grid { grid-template-columns: 1fr 1.22fr; gap: 30px; align-items: center; }
  .hero-trust { gap: 10px 12px; }

  /* Fuera el filete izquierdo: corria "Edicion Flamenco" 68px hacia adentro (52 de linea + 16
     de aire) y rompia la alineacion con DOMINA y con el titulo. En celular se queda, porque
     ahi el lockup va centrado y los dos filetes lo cierran simetrico. */
  .ev-edicion::before { display: none; }
  .hero-visual { order: 2; }

  /* La imagen deja de ir a sangre: vuelve a su columna, con marco y sin máscara. */
  .hero-visual {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  /* El marco: una passe-partout clara con filete y una sombra baja. No es decoracion suelta —
     la propia imagen tiene dos fotos con marco blanco adentro, asi que el recuadro repite ese
     gesto en vez de inventar uno. Solo en escritorio: en celular la imagen va a sangre. */
  .hero-visual .foto {
    height: auto;
    padding: 8px;
    border: 1px solid var(--linea);
    border-radius: calc(var(--radio) + 4px);
    background: var(--superficie-solida);
    box-shadow: 0 20px 44px -26px rgba(67, 37, 43, .38);
  }
  .hero-visual .foto img { border-radius: var(--radio); }
  .hero-visual .foto img {
    height: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .seccion { padding: 96px 0; }

  .dias { grid-template-columns: repeat(2, 1fr); gap: 26px; }

  .historia-grid { grid-template-columns: .75fr 1.25fr; gap: 48px; }
  .carrusel { max-width: 460px; }
  .carrusel-flecha.prev { left: -60px; }
  .carrusel-flecha.next { right: -60px; }
  .contador { gap: 14px; }
  .reloj { min-width: 96px; padding: 18px 12px; }
  .reloj strong { font-size: 40px; }
  .pie { padding-bottom: 44px; }
}