/* ============================================================
   PASTELERA PRO: BUTTERCREAM EDITION — Landing de captación
   Luisa Quiroz · Vainilla Cakes
   Design system: rosa pastel + fucsia de marca (logo) + carbón
   ============================================================ */

/* ---------- Tokens / Variables ---------- */
:root {
  /* Paleta — el fucsia sale del logo oficial del evento; el carbón y el marfil,
     de la torta de referencia (negro mate + buttercream marfil + perlas). */
  --rose:        #FBEEF3;  /* fondo general, rosa pastel */
  --rose-deep:   #F6DFE9;  /* bloques alternos */
  --rose-line:   #EFC9D9;  /* bordes suaves */
  --fucsia:      #E8386C;  /* color de marca (logo) */
  --fucsia-deep: #C42655;
  /* Fucsia oscurecido para texto sobre rosa (contraste 4.9:1) */
  --fucsia-ink:  #B21E4C;
  --ivory:       #FFFBF8;
  --charcoal:    #201A1D;  /* negro mate de la torta */
  --charcoal-2:  #2E2529;
  --gold:        #C9A227;
  --gold-light:  #E0C376;

  /* Rosas del hero. La pared del set de Luisa es un greige malva (#C5BCC0); la foto se
     recolorea a rosa al generar el asset (ver README) y estos tonos son los que quedan,
     para que la imagen y el fondo del hero sean el mismo color. */
  --hero-top:   #FCF0F5;
  --hero-mid:   #F5E1EB;
  --hero-deep:  #E9CFDC;  /* = el tono de la pared en la foto ya recoloreada */
  --hero-line:  rgba(192, 160, 99, 0.38);  /* hairline dorado del logo de marca */

  /* Texto */
  --ink:      #2C2126;
  --ink-soft: #6E5C64;
  --white:    #ffffff;

  /* Tipografías: Cormorant Garamond acompaña la serif del logo,
     Parisienne el trazo de "Buttercream", Montserrat el cuerpo. */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Montserrat", system-ui, sans-serif;
  --font-script:  "Parisienne", cursive;

  /* Layout */
  --maxw: 1180px;
  --radius: 22px;
  --radius-lg: 34px;
  --shadow-soft: 0 18px 50px -20px rgba(232, 56, 108, 0.32);
  --shadow-card: 0 22px 60px -28px rgba(44, 33, 38, 0.30);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--rose);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* Textura de fondo: puntos finísimos tipo perlas del pastel. Va en ::before fijo
   para que no repinte en cada scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(rgba(232, 56, 108, 0.10) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--rose);
  opacity: 0.7;
}

/* ---------- Utilidades ---------- */
.container { width: min(92%, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 8vw, 7rem) 0; position: relative; }

/* Fondo alterno: separa visualmente secciones contiguas que si no se funden
   en un mismo bloque rosa. */
.video-section,
.story-section {
  background: rgba(246, 223, 233, 0.55);
  border-top: 1px solid var(--rose-line);
  border-bottom: 1px solid var(--rose-line);
}

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fucsia-ink);
  display: inline-block;
  margin-bottom: 0.9rem;
}
.script { font-family: var(--font-script); font-weight: 400; line-height: 1; }
.title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.06;
  font-size: clamp(2.2rem, 5.2vw, 3.7rem);
  letter-spacing: -0.005em;
}
/* El aire que antes ponía el separador. */
.center .title { margin-bottom: 1.5rem; }
.title em { font-style: italic; color: var(--fucsia-ink); }
.lead { color: var(--ink-soft); font-size: clamp(1rem, 1.4vw, 1.12rem); max-width: 48ch; }
.center { text-align: center; margin-inline: auto; }
.center .lead { margin-inline: auto; }

/* Los títulos van sin separador debajo: el hairline + ícono centrado era el mismo
   recurso que usa la landing de Adriana y se notaba prestado. Acá el peso lo lleva
   la tipografía sola (volanta chica en versalitas + título Cormorant). */

/* ---------- Botones ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em;
  padding: 1rem 2rem; border-radius: 100px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  will-change: transform;
}
.btn-cta {
  color: #fff;
  background: linear-gradient(135deg, var(--fucsia), var(--fucsia-deep));
  box-shadow: 0 14px 32px -12px rgba(196, 38, 85, 0.65);
}
.btn-cta:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 22px 44px -14px rgba(196, 38, 85, 0.7); }
/* Barrido de brillo sobre el botón (se dispara solo, llama la atención sin parpadeos). */
.btn-cta::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  animation: shine 4.5s var(--ease) infinite;
}
@keyframes shine { 0%, 65% { left: -120%; } 100% { left: 180%; } }
.btn-lg { padding: 1.1rem 2.4rem; font-size: 1.05rem; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn-cta::after, .marquee-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   HERO
   ============================================================ */
/* Fondo del hero: rosa de punta a punta. La luz baja desde arriba a la izquierda (el lado
   del texto, para que el logo fucsia tenga contraste) y el rosa se profundiza hacia abajo.
   La foto de Luisa viene recoloreada al mismo rosa, así la pared de la imagen y el fondo
   de la web son el mismo color y la foto se apoya sobre la página sin marco ni recorte. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* En diagonal: el rosa más claro queda del lado del texto (el logo fucsia necesita
     contraste) y se profundiza hacia la derecha-abajo, que es donde está la foto. El tono
     final es el mismo que el de la pared en la imagen, así el rectángulo de la foto no
     se recorta contra el fondo. */
  background:
    radial-gradient(ellipse 65% 85% at 16% 26%, #FFF9FC, transparent 68%),
    linear-gradient(115deg, var(--hero-top) 0%, var(--hero-mid) 48%, var(--hero-deep) 100%);
}
/* Hairline dorado tipo pieza editorial (el dorado del logo de Vainilla Cakes).
   Solo en desktop: en mobile la foto sangra hasta el borde de la pantalla y el marco
   le quedaba cruzado por encima. */
@media (min-width: 900px) {
  .hero::before {
    content: "";
    position: absolute; inset: 14px;
    border: 1px solid var(--hero-line);
    border-radius: 6px;
    pointer-events: none;
    z-index: 2;
  }
}
/* Grano finísimo: un degradado tan grande banda en pantallas de 8 bits; el ruido lo
   rompe y de paso le da textura de papel. */
.hero::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}

.hero-grid { display: grid; }
.hero-visual { display: flex; justify-content: center; }
.hero-photo { position: relative; }

/* Halo detrás de la foto, con el mismo degradado que la pared de la imagen y desenfocado.
   Sirve de colchón: el borde de la foto se funde con el halo (color idéntico) y el halo,
   al estar borroso, se funde con el rosa del fondo. Es lo que permite usar la foto con
   sus colores originales —la pared del set de Luisa es un greige malva, no rosa— sin que
   el rectángulo de la imagen se recorte contra la página.
   Los tres colores son los valores muestreados de la pared en la foto original. */
.hero-photo::before {
  content: "";
  position: absolute;
  inset: -44px;
  z-index: -1;
  border-radius: 70px;
  background: linear-gradient(180deg, #D6CDD1 0%, #C8BFC3 45%, #BDB3B8 100%);
  filter: blur(44px);
  pointer-events: none;
}

/* Los bordes de la foto se desvanecen para que no quede un canto recto contra el fondo
   (por más que el color coincida, el degradado de la pared nunca calza exacto). Los
   porcentajes están medidos sobre la imagen: el desvanecido lateral termina antes de las
   manos de Luisa (14% y 83%) y el superior, antes del logo dorado de Vainilla Cakes
   (arranca al 6%). Son dos capas de máscara intersecadas; si un navegador viejo no
   soporta mask-composite, aplica solo la horizontal y la foto se sigue viendo entera. */
.hero-photo img {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 95%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 4.5%);
          mask-image:
    linear-gradient(90deg, transparent 0, #000 7%, #000 95%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 4.5%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* Difuminado del borde inferior: la mesada blanca de la foto se apaga en el rosa del
   fondo en vez de cortarse en seco. En mobile, el logo del evento se apoya justo acá. */
.hero-photo::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 18%;
  background: linear-gradient(180deg, transparent, #BDB3B8);
  pointer-events: none;
}

/* Sello sobre la foto. Bien abajo, sobre la parte ya desvanecida: más arriba tapa la
   base de la torta, que es parte de lo que hay que mostrar. */
.hero-stamp {
  position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%);
  z-index: 1;
  background: rgba(32, 26, 29, 0.88);
  color: var(--ivory);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.55rem 1.2rem; border-radius: 100px;
  border: 1px solid rgba(224, 195, 118, 0.35);
  white-space: nowrap;
}

/* ---------- HERO · DESKTOP ---------- */
@media (min-width: 900px) {
  .hero { padding: clamp(2.5rem, 5vh, 4rem) 0; }
  .hero-grid {
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;   /* la foto queda centrada respecto del bloque de texto */
  }
  /* En desktop la foto va a la derecha; en mobile queda primera (orden del HTML). */
  .hero-visual { order: 2; }
  .hero-copy   { order: 1; }
  .hero-photo  { width: min(100%, 440px); }
  .hero-photo img { width: 100%; height: auto; }
}

/* ---------- HERO · MOBILE ----------
   Requisito: el hero entero tiene que entrar en pantalla sin scrollear. Por eso acá
   todo se mide contra la altura de la ventana (svh = viewport chico, el que queda con
   las barras del navegador visibles) en vez de con tamaños fijos:
   la foto se dimensiona contra la altura de la ventana, el logo se apoya sobre el pie
   de la imagen y el resto del bloque va compactado. */
@media (max-width: 899px) {
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-start;   /* la foto arranca pegada al borde de arriba, sin aire */
    padding: 0 0 clamp(0.8rem, 2.5vh, 1.6rem);
    /* Tono plano hasta el 62%, más abajo de donde termina la foto: así el degradado del
       pie de la imagen aterriza exactamente en el mismo color que hay justo debajo. */
    background:
      linear-gradient(180deg,
        var(--hero-mid) 0%,
        var(--hero-mid) 62%,
        var(--hero-top) 82%,
        #F4DEE9 100%);
  }
  .hero-grid { width: 100%; }

  /* Foto a sangre: de borde izquierdo a borde derecho de la pantalla. */
  .hero-visual { margin-inline: calc(50% - 50vw); width: 100vw; }
  .hero-photo { width: 100%; }
  /* Sin recorte: el asset de mobile ya viene encuadrado (se le sacó el logo de pared de
     arriba, que era lo que empujaba la torta fuera de cuadro) y entra completo —de la
     cabeza de Luisa a la base de la torta— con solo darle el ancho de la pantalla. */
  .hero-photo img {
    width: 100%;
    height: auto;
    /* Sin máscaras: la foto llega a los bordes de la pantalla, no hay fondo contra el cual
       fundir los cantos, y desvanecerlos dejaría franjas claras a los lados. */
    -webkit-mask-image: none;
            mask-image: none;
  }
  /* Degradado del pie: tapa el corte de la imagen y la funde con el fondo de la landing.
     Encima se apoya el logo del evento. Corto (24%) y bien abajo: más alto se comía la
     torta, que es lo que hay que mostrar. */
  .hero-photo::after {
    height: 16%;
    background: linear-gradient(180deg, transparent, var(--hero-mid) 78%, var(--hero-mid));
  }
  /* El halo no hace falta a sangre y solo ensuciaría el borde inferior. */
  .hero-photo::before { display: none; }

  /* El logo del evento, montado sobre ese degradado. El monte baja en la misma proporción
     que el degradado, y con él baja todo el bloque de abajo.
     El monte compensa exactamente lo que crece el logo: como los dos se miden en svh,
     agrandar el logo un 15% (16svh → 18.4svh) suma 2.4svh, y el monte sube esos mismos
     2.4svh (4.2 → 6.6). Altura neta del hero: sin cambios, sigue entrando sin scroll. */
  .hero-copy {
    position: relative;
    z-index: 1;
    margin-top: clamp(-82px, -6.6svh, -41px);
  }
  .hero-stamp { display: none; }  /* chocaría con el logo */

}

.hero-copy { text-align: center; }
@media (min-width: 900px) { .hero-copy { text-align: left; } }

/* El logo es cuadrado: cada píxel de ancho es un píxel de alto, así que su tamaño
   manda en la altura del hero. En mobile se mide contra la pantalla (svh) para que el
   bloque entero siga entrando sin scroll. */
.event-logo { margin-bottom: 0.7rem; }
.event-logo img {
  /* 15% más grande que el original (50vw / 16svh / 210px). El que manda en los tamaños
     de teléfono reales es el término en svh; lo compensa el monte de .hero-copy. */
  width: min(57.5vw, 18.4svh, 242px);
  height: auto;
  margin-inline: auto;
}
/* En desktop también se mide contra la altura: en un portátil de 800px de alto un logo
   fijo de 360px empuja el formulario fuera de pantalla. */
@media (min-width: 900px) { .event-logo img { width: clamp(280px, 40vh, 380px); margin-inline: 0; } }

.hero-dates {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--ivory);
  border: 1px solid rgba(192, 160, 99, 0.45);
  color: var(--fucsia-ink);
  font-weight: 700; font-size: clamp(0.78rem, 2.6vw, 0.86rem); letter-spacing: 0.03em;
  padding: 0.45rem 1rem; border-radius: 100px;
  margin-bottom: 0.9rem;
  box-shadow: 0 10px 24px -16px rgba(196, 38, 85, 0.55);
}
.hero-dates svg { flex: none; color: var(--fucsia); }

.hero-sub {
  font-size: clamp(0.95rem, 1.6vw, 1.18rem);
  color: #5C4A52;
  max-width: 52ch;
  margin-inline: auto;
}
@media (min-width: 900px) { .hero-sub { margin-inline: 0; } }
.hero-sub strong { color: var(--charcoal); font-weight: 700; }
.hl {
  background: linear-gradient(180deg, transparent 62%, rgba(232, 56, 108, 0.22) 62%);
  font-weight: 600; color: var(--charcoal);
  /* Sin esto, al partirse en dos líneas el resaltado se dibuja una sola vez
     estirado sobre ambas y se ve como una caja rota. */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* El formulario va suelto sobre el fondo del hero, sin tarjeta: el campo y el botón
   ya tienen entidad propia y la caja marfil recortaba el bloque del resto del hero. */
.hero-form {
  margin-top: clamp(1rem, 2.2vh, 1.8rem);
  max-width: 440px;
  margin-inline: auto;
}
@media (min-width: 900px) { .hero-form { margin-inline: 0; } }

.field {
  display: flex; align-items: center; gap: 0.7rem;
  background: #fff;
  border: 1.5px solid var(--rose-line);
  border-radius: 100px;
  padding: 0.2rem 1.1rem;
  /* Sin la tarjeta detrás, la sombra es lo que despega el campo del fondo. */
  box-shadow: 0 12px 28px -18px rgba(120, 70, 92, 0.55);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field:focus-within { border-color: var(--fucsia); box-shadow: 0 0 0 4px rgba(232, 56, 108, 0.14); }
.field svg { flex: none; }
.field input {
  flex: 1; border: none; outline: none; background: none;
  font-family: inherit; font-size: 0.98rem; color: var(--ink);
  padding: 0.9rem 0;
  min-width: 0;
}
.field input::placeholder { color: #A9959D; }

.form-submit { width: 100%; margin-top: 0.7rem; }
.form-submit:disabled { opacity: 0.85; cursor: default; transform: none; }
.form-msg { font-size: 0.86rem; margin-top: 0.6rem; min-height: 1.2em; text-align: center; }
.form-msg.err { color: var(--fucsia-deep); font-weight: 600; }
.form-msg.ok  { color: #2E7D4F; font-weight: 600; }

.form-note {
  font-size: 0.74rem; color: var(--ink-soft); text-align: center;
  margin-top: 0.45rem; line-height: 1.45;
}

/* En mobile el hueco reservado para el mensaje del formulario se saca: son 20px que
   hacen falta para que el hero entre entero. El mensaje aparece igual al enviar; el
   pequeño salto de layout solo lo ve quien ya apretó el botón. */
@media (max-width: 899px) { .form-msg { min-height: 0; margin-top: 0; } }

/* Pantallas bajas (iPhone SE, mini, navegadores con barras grandes): el hero sigue
   teniendo que entrar entero, así que se sacrifica primero la letra chica del form. */
@media (max-width: 899px) and (max-height: 780px) {
  .form-note { display: none; }
  .hero-sub  { font-size: 0.9rem; }
  /* Acá el alto de la foto lo manda el ancho de la pantalla, no la altura: en un teléfono
     ancho y bajo (414×736, iPhone SE apaisado de barras) la imagen completa no entra. Se
     recorta lo mínimo, y desde abajo, que es donde el degradado tapa el corte. */
  .hero-photo img {
    height: clamp(260px, 46svh, 400px);
    object-fit: cover;
    object-position: 50% 10%;
  }
}

/* ============================================================
   MARQUEE DE TÉCNICAS
   ============================================================ */
.marquee {
  background: var(--charcoal);
  color: var(--ivory);
  padding: 1.05rem 0;
  overflow: hidden;
  /* Desvanecido en los bordes: el texto no "choca" contra el borde de pantalla. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; gap: 2.6rem; white-space: nowrap;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee-track span {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  font-style: italic;
  letter-spacing: 0.01em;
  display: inline-flex; align-items: center; gap: 2.6rem;
}
.marquee-track span::after {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fucsia);
  flex: none;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   VIDEO
   ============================================================ */
.video-wrap { max-width: 860px; margin-top: 2.2rem; }
.video-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--rose-line);
  background: var(--charcoal);
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 9;
}
.video-el { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--charcoal); }

/* Marcador mientras no está el video final (se borra al subir el MP4). */
.video-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; color: rgba(255, 251, 248, 0.72);
  background: repeating-linear-gradient(45deg, #2A2226, #2A2226 14px, #241D21 14px, #241D21 28px);
  text-align: center; padding: 1.5rem;
}
.video-placeholder strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--ivory); }
.video-placeholder span { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ============================================================
   LO QUE APRENDERÁS — Día 1 / Día 2
   ============================================================ */
.days-grid {
  display: grid;
  gap: 1.4rem;
  margin-top: 2.8rem;
}
/* Las fotos de las tortas son verticales (3:4), así que en desktop la tarjeta se
   acuesta —foto al costado, texto al lado— y va una por fila alternando el lado.
   En una grilla de dos columnas la foto vertical dejaría tarjetas de ~1150px. */
@media (min-width: 880px) { .days-grid { gap: 1.8rem; } }

.day-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  border: 1px solid var(--rose-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.day-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: rgba(232, 56, 108, 0.45); }

.day-media {
  position: relative;
  aspect-ratio: 3 / 4; /* el nativo de las fotos: entra la torta completa, sin recorte */
  background: var(--rose-deep);
  overflow: hidden;
}
.day-media picture { display: block; width: 100%; height: 100%; }
.day-media img { width: 100%; height: 100%; object-fit: cover; }
/* El marcador de "falta la imagen" se enciende desde el onerror del <img>. */
.day-media .photo-placeholder { position: absolute; inset: 0; }

.day-badge {
  position: absolute; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  background: linear-gradient(135deg, var(--fucsia), var(--fucsia-deep));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 700; line-height: 1;
  padding: 0.45rem 1.1rem 0.5rem; border-radius: 100px;
  box-shadow: 0 12px 26px -12px rgba(196, 38, 85, 0.8);
}
.day-badge b {
  font-family: var(--font-body);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.85;
}

.day-body {
  position: relative;
  flex: 1;
  padding: 1.5rem 1.5rem 1.7rem;
}
/* Spotlight: un halo sigue al cursor. Las coordenadas las escribe script.js
   en --mx/--my; sin JS la tarjeta se ve igual, solo sin el halo. */
.day-body::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(232, 56, 108, 0.12), transparent 62%);
  opacity: 0; transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.day-card:hover .day-body::before { opacity: 1; }

.day-body h3 {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.75rem); font-weight: 600; color: var(--charcoal);
  line-height: 1.15; margin-bottom: 1rem;
}
.day-body ul { position: relative; display: grid; gap: 0.7rem; }
.day-body li {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: 0.94rem; color: var(--ink-soft);
}
.day-body li b { color: var(--charcoal); font-weight: 600; }
.day-body .check {
  flex: none;
  display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: 0.15rem;
  border-radius: 50%;
  background: rgba(232, 56, 108, 0.12);
  color: var(--fucsia-ink);
  font-size: 0.7rem; font-weight: 700;
}

/* Desktop: la tarjeta se acuesta. La foto manda la altura (40% de ancho en 3:4
   ≈ 630px) y el texto se centra al lado. El Día 2 espeja el orden. */
@media (min-width: 880px) {
  .day-card { flex-direction: row; align-items: stretch; }
  .day-card:nth-child(even) { flex-direction: row-reverse; }

  .day-media { flex: none; width: 40%; }

  .day-body {
    display: flex; flex-direction: column; justify-content: center;
    padding: 2.4rem 2.8rem;
  }
  .day-body ul { max-width: 46ch; }
}

/* ============================================================
   HISTORIA DE LUISA
   ============================================================ */
.story-grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
  margin-top: 2.4rem;
}
/* Dos columnas solo cuando hay foto (la clase la agrega el HTML al descomentarla).
   Sin foto, el texto queda solo: se centra y se le da medida de lectura, porque a lo
   ancho del contenedor (1180px) los renglones quedan larguísimos. */
@media (min-width: 860px) { .story-grid.has-photo { grid-template-columns: 0.85fr 1.15fr; } }
.story-grid:not(.has-photo) .story-text { max-width: 64ch; margin-inline: auto; }

/* Marco circular. Adriana también usa un círculo acá, así que el aro va distinto:
   en vez del borde blanco grueso, el hairline dorado separado de la foto, que es el
   mismo recurso editorial del hero.
   El tope de 380px no es estético: el original mide 495px de lado, así que más
   grande que eso la foto se empieza a ver blanda. */
.story-photo {
  position: relative;
  width: min(100%, 380px);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.story-photo picture { display: block; width: 100%; height: 100%; }
/* El recorte circular va en la imagen, no en el contenedor: así el contenedor queda
   libre para dibujar el aro por fuera (un overflow:hidden acá se lo comería). */
.story-photo img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
  background: var(--rose-deep);
  box-shadow: var(--shadow-card);
}
.story-photo::after {
  content: "";
  position: absolute; inset: -14px;
  border: 1px solid var(--hero-line);
  border-radius: 50%;
  pointer-events: none;
}

/* Marcador cuadrado mientras no está la foto de Luisa. */
.photo-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem; text-align: center; padding: 1.2rem;
  color: var(--fucsia-ink);
  background:
    repeating-linear-gradient(45deg, rgba(232,56,108,0.07), rgba(232,56,108,0.07) 12px, transparent 12px, transparent 24px),
    var(--rose-deep);
}
.photo-placeholder b { font-family: var(--font-display); font-size: 1.3rem; }
.photo-placeholder small { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }

.story-text p { margin-bottom: 1rem; color: var(--ink-soft); }
.story-text strong { color: var(--charcoal); }
.story-sign {
  font-family: var(--font-script);
  font-size: 2.4rem; color: var(--fucsia-ink);
  margin-top: 0.4rem;
}

/* ============================================================
   TESTIMONIOS — carrusel
   ============================================================ */
.carousel { position: relative; margin-top: 2.4rem; }
.carousel-viewport { overflow: hidden; border-radius: var(--radius); }
.carousel-track { display: flex; transition: transform 0.55s var(--ease); }
.carousel-slide { min-width: 100%; display: flex; justify-content: center; padding: 0.4rem; }

.testi-shot {
  width: min(100%, 340px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 6px solid var(--ivory);
  box-shadow: var(--shadow-card);
  aspect-ratio: 9 / 16;
  background: var(--rose-deep);
}
.testi-shot img,
.testi-shot video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Fondo negro: mientras el video busca el primer fotograma, el hueco no parpadea en rosa. */
.testi-shot video { background: #000; }

.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ivory); color: var(--fucsia-ink);
  border: 1px solid var(--rose-line);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
  z-index: 2;
}
.carousel-arrow:hover { transform: translateY(-50%) scale(1.08); background: #fff; }
.carousel-arrow.prev { left: 0; }
.carousel-arrow.next { right: 0; }
@media (min-width: 720px) {
  .carousel-arrow.prev { left: -6px; }
  .carousel-arrow.next { right: -6px; }
}

.carousel-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.3rem; }
.carousel-dots button {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rose-line);
  transition: width 0.3s var(--ease), background 0.3s var(--ease);
}
.carousel-dots button.active { width: 26px; border-radius: 100px; background: var(--fucsia); }

/* ============================================================
   COUNTDOWN / CIERRE
   ============================================================ */
.countdown-section {
  background: var(--charcoal);
  color: var(--ivory);
  text-align: center;
  overflow: hidden;
}
.countdown-section .title { color: var(--ivory); }
.countdown-section .title em { color: var(--gold-light); }
.countdown-section .eyebrow { color: var(--gold-light); }
.countdown-section .lead { color: rgba(255, 251, 248, 0.78); }

/* Manchas de color de fondo, hermanas de las del hero */
.countdown-deco {
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.cd-1 {
  width: 380px; height: 380px; top: -30%; left: -8%;
  background: radial-gradient(circle, rgba(232, 56, 108, 0.42), transparent 70%);
}
.cd-2 {
  width: 320px; height: 320px; bottom: -28%; right: -6%;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.35), transparent 70%);
}

/* 4 cajas en una sola fila también en pantallas de 360px: si "Seg" cae a una
   segunda línea el contador deja de leerse como una unidad. */
.countdown {
  display: flex; justify-content: center; flex-wrap: nowrap;
  gap: clamp(0.4rem, 2vw, 0.7rem);
  margin: 2rem auto 1.8rem;
}
.count-box {
  flex: 1 1 0;
  min-width: 0;
  max-width: 110px;
  background: rgba(255, 251, 248, 0.07);
  border: 1px solid rgba(255, 251, 248, 0.16);
  border-radius: 18px;
  padding: 1rem clamp(0.4rem, 2vw, 0.9rem);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.count-box .num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 600; line-height: 1;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}
.count-box .label {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 251, 248, 0.6);
  margin-top: 0.45rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--charcoal-2);
  color: rgba(255, 251, 248, 0.7);
  padding: 2.6rem 0;
  text-align: center;
}
.brand-mini {
  font-family: var(--font-display);
  font-size: 1.5rem; color: var(--ivory);
  letter-spacing: 0.02em;
}
.brand-mini small {
  display: block;
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--fucsia);
  letter-spacing: 0;
  line-height: 1.1;
}
.copyright { font-size: 0.8rem; margin-top: 0.8rem; }