@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   Entry point del theme "finca" → dist/css/finca.css
   Boda de campo editorial · lino y papel texturado, grabados a plumilla en oro
   y burdeos protagonista · cuerpo de texto en monoespaciada de máquina de
   escribir. Portado del mockup PLANTILLA/finca/home.png.

   Nace de campillo: lo único que no aparece aquí es el sobre lacrado (la
   invitación abre directo en la portada, ver finca.js). Padres, sin niños,
   canciones y nota de voz sí están, agregados a pedido con override propio.

   Los partials se importan uno a uno a propósito: así no queda CSS muerto.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   Theme "finca" — tokens de diseño.
   Boda de campo en versión editorial. Rediseño 2026 a partir del export de
   Claude Design en PLANTILLA/finca_nuevo/ (identidad anterior documentada en
   git history: monoespaciada + Bodoni Moda).

   Finca nace de campillo, pero el cambio de identidad NO es el tono: es el
   reparto. Campillo reserva el burdeos a acentos mínimos; aquí el burdeos es
   protagonista — botones sólidos, la línea del itinerario, los enlaces y el
   footer entero a sangre. La sección Recomendaciones es la única con fondo
   oliva sólido, a propósito: es el único quiebre de paleta de toda la página.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Paleta ───────────────────────────────────────────────────────────── */
  --c-lino: #EFE8DA; /* fondo dominante del body */
  --c-papel: #EAE7DE; /* Gentle Taupe · banda con textura y grabado */
  --c-tarjeta: #FFFDF8; /* tarjetas: papel nuevo, casi blanco */
  --c-burdeos: #491C28; /* Crater Brown · protagonista: CTAs, footer */
  --c-burdeos-cl: #6B2E3C; /* hover / estados */
  --c-mostaza: #8A793A; /* Dark Mustard · sobre / papelería */
  --c-verde-neutro: #AFAB7E; /* Neutral Green · acentos secundarios */
  --c-oro: #998551; /* grabados a plumilla heredados de campillo */
  --c-oro-suave: #C1B697;
  --c-oliva: #625822; /* fondo sólido de Recomendaciones + headings H2 */
  --c-oliva-dorado: #DFD074; /* subtítulos sobre fondo oliva */
  --c-vino-link: #6E2A2A; /* enlaces */
  --c-vino-link-hv: #4E1E1E; /* enlaces: hover */
  --c-separador: #827837; /* líneas/separadores finos entre bloques */
  --c-tinta: #3B2A1E; /* texto base del body */
  --c-tinta-cont: #4D3500; /* texto de contenido: itinerario, FAQ, RSVP, modales */
  --c-tinta-soft: #6F6455; /* rótulos secundarios, descripciones */
  --c-borde: #D8CFBE; /* bordes claros: inputs, checkboxes, tarjetas */
  --c-borde-suave: #E7E0D2;
  --c-linea: rgba(59,42,30,.20);
  --c-hairline: rgba(59,42,30,.14);
  --c-sombra: rgba(59,42,30,.10);
  /* ── Tipografía ──────────────────────────────────────────────────────────
     Cuatro familias, cada una con un rol fijo — no intercambiables:
       display      Playfair Display   títulos H2, subtítulos, acentos
       script       Pinyon Script      nombres de los novios, kickers script
       body-ui      Raleway            labels, botones, rótulos cortos en caja alta
       body-content Times New Roman    párrafos largos, horas, nombres de lugar
                                        (fuente de SISTEMA a propósito, sin
                                        sustituto web — es un acento deliberado
                                        del diseño, se acepta la variación entre
                                        plataformas) */
  --font-script: "Pinyon Script", cursive;
  --font-display: "Playfair Display", serif;
  --font-body-ui: "Raleway", sans-serif;
  --font-body-content: "Times New Roman", Times, serif;
  /* Alias para el overlay compartido "sobre con música"
     (dev/sass/components/_opening-sobre-tarjeta.scss), que espera --serif. */
  --serif: var(--font-display);
  --track-wide: .30em; /* rótulos: MADRID · ESPAÑA */
  --track-mid: .18em;
  --track-tight: .10em;
  /* ── Ritmo vertical ───────────────────────────────────────────────────── */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 28px;
  --space-lg: 48px;
  --space-xl: 84px;
  --space-2xl: 124px;
  --content: 480px;
  --gutter: 26px;
  /* Campillo declara --radius:2px porque "el papel no tiene esquinas
     redondeadas". En Finca eso ya no aplica: el mockup redondea tarjetas y
     botones a conciencia. */
  --radius-card: 14px;
  --radius-btn: 6px;
  --radius-sheet: 24px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* Base del theme finca: bandas, tipos, sección, botones y utilidades. */
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--c-lino);
  color: var(--c-tinta);
  font-family: var(--font-body-content);
  font-size: 15px;
  line-height: 1.78;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RITMO DE BANDAS
   La página alterna dos tratamientos de fondo, y esa alternancia es del
   layout — no de cada componente. Un component.php nunca declara su propio
   background: declara su clase de banda y hereda de aquí.

     .band--papel  bg_pared.png a cubrir toda la banda (cover) + a veces un
                   grabado dorado que sangra al borde
     .band--lisa   plano en #EAE7DE, sin grabado, deja respirar

   itinerary es un caso aparte: su fondo de pared es event-specific
   (marca.pared_itinerario) y se pinta con su propia clase .itinerary--pared
   en vez de con .band--papel — ver themes/finca/components/itinerary/.

   Regla al insertar una sección nueva: mira la vecina, nunca dos papel
   seguidas.
   ═══════════════════════════════════════════════════════════════════════════ */
.band {
  position: relative;
  overflow: hidden;
}

/* #EAE7DE (--c-papel), no --c-lino (#EFE8DA, ese es el fondo del body): el
   export usa este tono en countdown, ubicaciones y comment wall — las tres
   bandas planas de la invitación. */
.band--lisa {
  background: var(--c-papel);
}

/* Dos bandas de fondo sólido, fuera de la alternancia papel/lisa a propósito:
   son los únicos quiebres de paleta de toda la invitación (Regalos en vino,
   Recomendaciones en oliva). El texto de las clases base (eyebrow, title,
   parrafo, rotulo) se repinta claro aquí; las tarjetas blancas dentro de
   estas bandas no necesitan nada especial porque ya son claras de por sí. */
.band--vino {
  background: var(--c-burdeos);
}

.band--vino .eyebrow,
.band--vino .section__title,
.band--vino .parrafo,
.band--vino .rotulo {
  color: var(--c-tarjeta);
}

.band--oliva {
  background: var(--c-oliva);
}

.band--oliva .eyebrow,
.band--oliva .rotulo {
  color: var(--c-tarjeta);
}

/* Una sola instancia de la textura, escalada a cubrir la banda entera — así
   la usa el export en galería/itinerario/faq/rsvp (bg_pared.png, cover,
   sin repetir, centrada). Bienvenida es la excepción: ahí el export SÍ la
   repite en mosaico a tamaño natural bajo su propio grabado, ver _intro.scss. */
.band--papel {
  background-color: var(--c-papel);
  background-image: url("../img/finca/paper.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* El grabado remata la banda; el CSS decide dónde, el PHP solo dice cuál.
   Van en oro y a sangre: sobresalen del ancho de contenido a propósito. */
.grabado {
  pointer-events: none;
  user-select: none;
}

/* Los remates de cabecera y de pie FLUYEN en el grid en vez de posicionarse
   en absoluto. Es a propósito: su alto depende de la imagen que suba el
   organizador, y un absoluto obligaría a adivinar ese alto con un padding
   fijo — que es justo como el grabado de la fachada acababa montado sobre la
   fecha del countdown. Fluyendo, la sección reserva el hueco sola, sea cual
   sea la proporción, y el margen negativo lo devuelve al borde de la banda. */
.grabado--pie,
.grabado--cabecera {
  grid-column: full;
  width: 100%;
  height: auto;
}

.grabado--pie {
  margin-top: var(--space-lg);
  margin-bottom: calc(-1 * var(--space-xl));
}

.grabado--cabecera {
  justify-self: center;
  width: min(62%, 240px);
  margin-top: calc(-1 * var(--space-xl));
  margin-bottom: var(--space-lg);
}

/* Imagen de fondo (no <img>) al pie de la banda: alto fijo en vez de
   "cover"/"contain", así la escena se ve al mismo tamaño en móvil y
   escritorio. En viewports angostos el propio ancho del bloque recorta los
   costados y solo se enfoca el centro, en vez de encoger la escena entera. */
.grabado--fondo {
  grid-column: full;
  width: 100%;
  height: 220px;
  margin-top: var(--space-lg);
  margin-bottom: calc(-1 * var(--space-xl));
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: auto 220px;
}

/* Las enredaderas de esquina sí van en absoluto: son decoración pequeña y de
   tamaño conocido (assets del theme), pensada para asomar por el borde. */
.grabado--esquina-inf,
.grabado--esquina-sup,
.grabado--esquina-sup-izq {
  position: absolute;
  z-index: 0;
}

.grabado--esquina-inf {
  right: 0;
  bottom: 0;
  width: min(66%, 270px);
}

.grabado--esquina-sup {
  right: 0;
  top: 0;
  width: min(46%, 190px);
}

.grabado--esquina-sup-izq {
  left: 0;
  top: 0;
  width: min(46%, 190px);
}

/* El contenido siempre por encima de las esquinas */
.band > *:not(.grabado) {
  position: relative;
  z-index: 1;
}

/* ── Tipos base ──────────────────────────────────────────────────────────── */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 1.05;
}

/* Rótulo de sección: "CUENTA REGRESIVA", "NUESTRA", "PREGUNTAS" */
.eyebrow {
  font-family: var(--font-body-ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-tinta);
  margin: 0;
}

/* Rótulo corto en caja alta: "MADRID · ESPAÑA", "INVITACIÓN A NOMBRE DE" */
.rotulo {
  font-family: var(--font-body-ui);
  font-size: 0.78rem;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-tinta);
  margin: 0;
}

/* Cuerpo de texto narrativo: horas, direcciones, párrafos largos — la fuente
   de sistema es un acento deliberado del diseño (ver _tokens.scss). */
.parrafo {
  font-family: var(--font-body-content);
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--c-tinta);
  max-width: 34ch;
  margin: 0 auto;
}

.parrafo--soft {
  color: var(--c-tinta-soft);
}

/* Hairline corto y centrado que separa bloques dentro de una sección.
   No va a todo el ancho: es una marca de respiración, no un borde. */
.hairline {
  width: 90px;
  height: 1px;
  margin: var(--space-md) auto;
  background: var(--c-linea);
  border: 0;
}

/* ── Estructura de sección ───────────────────────────────────────────────── */
/* La sección ocupa todo el ancho (su banda llega a los bordes) y centra el
   contenido en una columna de --content con márgenes mínimos de --gutter. */
.section {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, var(--content)) [content-end] minmax(var(--gutter), 1fr) [full-end];
  padding: var(--space-xl) 0;
  text-align: center;
  position: relative;
}

.section > *:not(.grabado) {
  grid-column: content;
}

.section > .btn {
  justify-self: center;
}

.section__head {
  margin-bottom: var(--space-md);
}

/* Buenos deseos, Regalos, FAQ, Itinerario y Ubicaciones: mismo padding
   vertical que el resto de secciones (var(--space-xl)), pero a la mitad —
   a pedido, para acercar estas 5 bandas entre sí. Igual en mobile, tablet
   y desktop (sin @media: acá no hay override responsive que pisar). */
.goodwishes,
.gifts,
.faq,
.itinerary,
.venues {
  padding: calc(var(--space-xl) / 2) 0;
}

/* Título de sección: 40px en TODAS las secciones del export, sin excepción
   (countdown, FAQ, Recomendaciones, Registry, RSVP, Comment Wall, Itinerario,
   Detalles del Evento) — valor fijo en px, no rem, para que sea idéntico en
   mobile y escritorio sin depender del font-size del body. NO va en
   versalitas ni en script — el script queda para los nombres y para
   Ceremonia/Recepción. */
.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--c-tinta);
  margin: 6px 0 0;
}

.section__title--script {
  font-family: var(--font-script);
  font-size: 2.9rem;
  letter-spacing: 0;
  line-height: 1;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
/* Todo lo accionable es burdeos. .btn perfilado · .btn--solid macizo. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--c-burdeos);
  background: transparent;
  color: var(--c-burdeos);
  font-family: var(--font-body-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.btn:hover {
  background: var(--c-burdeos);
  color: var(--c-tarjeta);
}

.btn--solid {
  background: var(--c-burdeos);
  color: var(--c-tarjeta);
  border-color: var(--c-burdeos);
}

.btn--solid:hover {
  background: var(--c-burdeos-cl);
  border-color: var(--c-burdeos-cl);
  color: var(--c-tarjeta);
}

.btn--block {
  width: 100%;
}

.btn--ghost {
  border-color: var(--c-linea);
  color: var(--c-tinta-soft);
}

.btn--ghost:hover {
  background: var(--c-papel);
  color: var(--c-tinta);
}

.btn svg {
  flex: none;
}

/* Enlace de cuerpo: burdeos subrayado */
.link {
  color: var(--c-burdeos);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ── Tarjeta ─────────────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--c-tarjeta);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 30px var(--c-sombra);
  padding: var(--space-md) var(--space-sm);
}

/* Fotografía: a color, sin tratamiento — el rediseño 2026 dejó el filtro
   vintage B/N+sepia de la versión anterior. La clase se conserva vacía (en
   vez de borrarla del markup) porque sigue marcando semánticamente qué
   elementos son fotografías, por si un ajuste futuro necesita volver a
   tratarlas como grupo. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.95s var(--ease), transform 0.95s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* ═══ Animación de apertura · Cortina vertical ═══════════════════════════════
   Puerto literal del viejo componente `seal` (classic/flowers), que a su vez
   es el mismo código que corría en la plantilla `terracota`. Dos mitades del
   sobre se abren hacia arriba/abajo al tocar el sello. Mobile-only por
   diseño: en pantallas ≥480px la coreografía no compone bien.

   El componente PHP ya decide si esto va al DOM (config.envelope), así que
   acá no hace falta ningún gate por clase en <body> — a diferencia del
   `_sealv.sass` original, que dependía de `.body-envelope`.
   ═══════════════════════════════════════════════════════════════════════════ */
body.is-locked-cortina {
  overflow: hidden;
}
@media (min-width: 480px) {
  body.is-locked-cortina {
    overflow: auto;
  }
}

.envelope-wrapper {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--opening-cortina-bg, #f0f4e2);
  z-index: 9999;
  transition: background-color 1s ease;
}
@media (min-width: 480px) {
  .envelope-wrapper {
    display: none;
  }
}
.envelope-wrapper.blanco {
  background-color: transparent !important;
  pointer-events: none;
}
.envelope-wrapper.is-done {
  display: none;
}

.cortina-vertical-frame {
  position: relative;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.envelope1,
.envelope2 {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(50vh + 6px);
  object-fit: cover;
  display: block;
}

.envelope1 {
  top: 0;
  object-position: 50% 100%;
}

.envelope2 {
  bottom: 0;
  object-position: 50% 0%;
}

.seal-content {
  position: absolute;
  display: flex;
  margin: 0 auto;
  height: 250px;
  width: 100%;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
}

.seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-seal {
  width: 170px;
  height: 170px;
}

/* ═══ Animación de apertura · Sobre + tarjeta ════════════════════════════════
   Formato único ("con música", puerto literal de entrehojas): dos gestos —
   click en el sobre dispara una campanita sintetizada y la solapa gira en 3D,
   luego aparece el botón "Entrar" que arranca la música de fondo. Las
   variables de color/tipografía llevan un fallback neutro para que cualquier
   plantilla que elija este tipo se vea razonable sin tener que declarar nada;
   la plantilla de origen sigue viéndose IGUAL porque ya define esos tokens
   (así el fallback nunca gana ahí).
   ═══════════════════════════════════════════════════════════════════════════ */
body.is-locked {
  overflow: hidden;
}

.opener {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 40px;
  background: radial-gradient(120% 90% at 50% 30%, var(--tertiary-100, #FCFBF9), var(--tertiary-200, #F4F1EB));
}

.opener.is-gone {
  display: none;
}

.opener__eyebrow {
  color: var(--primary-500, #647E69);
}

.opener.is-open .opener__eyebrow {
  visibility: hidden;
}

.opener__stage {
  position: relative;
  width: min(440px, 90vw);
  height: min(580px, 74vh);
  display: flex;
  align-items: center;
  justify-content: center;
}

.opener__hit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 240px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  z-index: 6;
}

.opener.is-open .opener__hit {
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .opener:not(.is-open) .opener__hit:hover {
    transform: translate(-50%, -50%) translateY(-5px);
  }
}
.opener__back {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 240px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(160deg, #FBF9F5, #F2EEE6);
  border: 1px solid var(--hairline, rgba(124, 149, 128, 0.32));
  box-shadow: 0 28px 56px rgba(74, 97, 80, 0.22);
}

.opener__pocket {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 240px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(160deg, #F6F2EA, #EBE5DA);
  clip-path: polygon(0% 30%, 50% 66%, 100% 30%, 100% 100%, 0% 100%);
  border-radius: 8px;
}

.opener__pocket::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent, rgba(196, 168, 106, 0));
  clip-path: polygon(0% 30%, 50% 66%, 100% 30%, 100% 31.5%, 50% 67.5%, 0% 31.5%);
  background-color: var(--gold-soft, #DCC99B);
  opacity: 0.7;
}

.opener__flap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 240px;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(180deg, #F4EFE7, #EFE9DF);
  clip-path: polygon(0% 0%, 100% 0%, 50% 66%);
  transform-origin: 50% 0;
  transition: transform 1.4s cubic-bezier(0.5, 0, 0.16, 1);
  filter: drop-shadow(0 1.5px 0 var(--gold-soft, #DCC99B));
}

.opener.is-open .opener__flap {
  transform: translate(-50%, -50%) rotateX(180deg);
}

.opener.is-flap-open .opener__flap {
  z-index: 1;
}

.opener__seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(28px);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  background: var(--opening-accent, var(--primary, #7C9580));
  border: 1.5px solid var(--gold-soft, #DCC99B);
  box-shadow: 0 4px 14px rgba(74, 97, 80, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  transition: opacity 0.8s ease;
}

.opener.is-open .opener__seal {
  opacity: 0;
}

.opener__seal--img {
  width: 60px;
  height: 60px;
  border-radius: 0;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.opener__seal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.opener.is-open .opener__back,
.opener.is-open .opener__pocket {
  animation: opening-st-sink 1.3s cubic-bezier(0.5, 0, 0.3, 1) 2.9s both;
}

.opener.is-open .opener__flap {
  animation: opening-st-layer-fade 1s ease 2.9s both;
}

@keyframes opening-st-sink {
  0% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translateY(48px) scale(0.8);
    opacity: 0;
  }
}
@keyframes opening-st-layer-fade {
  to {
    opacity: 0;
  }
}
.opener__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 330px;
  transform: translate(-50%, -50%) translateY(6px) scale(0.32);
  transform-origin: 50% 50%;
  background: #fff;
  border: 1px solid var(--hairline, rgba(124, 149, 128, 0.32));
  border-radius: 10px;
  padding: 38px 32px 34px;
  text-align: center;
  z-index: 2;
  box-shadow: 0 30px 64px rgba(52, 53, 47, 0.26);
  display: none;
}

.opener__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background: var(--gold-soft, #DCC99B);
  opacity: 0.8;
}

.opener.is-open .opener__card {
  display: block;
  animation: opening-st-card-bloom 4.4s cubic-bezier(0.2, 0.66, 0.2, 1) both;
}

@keyframes opening-st-card-bloom {
  0% {
    transform: translate(-50%, -50%) translateY(6px) scale(0.32);
    z-index: 2;
  }
  30% {
    transform: translate(-50%, -50%) translateY(6px) scale(0.32);
    z-index: 2;
  }
  60% {
    transform: translate(-50%, -50%) translateY(-168px) scale(0.32);
    z-index: 2;
  }
  67% {
    transform: translate(-50%, -50%) translateY(-168px) scale(0.32);
    z-index: 2;
  }
  68% {
    transform: translate(-50%, -50%) translateY(-168px) scale(0.32);
    z-index: 12;
  }
  100% {
    transform: translate(-50%, -50%) translateY(0) scale(1);
    z-index: 12;
  }
}
@media (prefers-reduced-motion: reduce) {
  .opener.is-open .opener__card {
    display: block;
    animation: none;
    transform: translate(-50%, -50%);
    z-index: 12;
  }
  .opener__back, .opener__pocket, .opener__flap, .opener__seal {
    display: none;
  }
}
.card__sprig {
  color: var(--primary, #7C9580);
  margin-bottom: 6px;
}

.card__sprig svg {
  width: min(160px, 46%);
  height: auto;
  display: block;
  margin: 0 auto;
}

.card__hello {
  color: var(--primary-500, #647E69);
  margin-bottom: 10px;
  font-size: 0.7rem;
}

.card__name {
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-weight: 500;
  font-size: 2.3rem;
  line-height: 1.08;
  color: var(--ink, #34352F);
  margin: 0 0 14px;
}

.card__rule {
  width: 46px;
  height: 1px;
  background: var(--line, #B6C7B4);
  margin: 0 auto 16px;
}

.card__passes {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 4px 0 14px;
}

.card__passes-num {
  font-family: var(--serif, "Cormorant Garamond", Georgia, serif);
  font-style: italic;
  font-weight: 600;
  font-size: 4rem;
  line-height: 0.9;
  color: var(--primary, #7C9580);
}

.card__passes-text {
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-soft, #6E665B);
  margin-top: 8px;
}

.card__date {
  font-family: var(--serif, Georgia, serif);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--primary-600, #4A6150);
  margin-top: 4px;
}

.card__btn {
  margin-top: 26px;
  width: 100%;
  background: var(--opening-accent, var(--primary, #7C9580));
  color: #fff;
  border: 0;
  padding: 16px 22px;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 0.3s ease;
  cursor: pointer;
}

.card__btn:hover {
  background: var(--primary-500, #647E69);
}

.card__garland {
  width: 100%;
  max-width: 210px;
  height: auto;
  display: block;
  margin: 0 auto 14px;
  color: var(--primary, #7C9580);
}

.opener__hint {
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft, #6E665B);
  display: flex;
  align-items: center;
  gap: 9px;
}

.opener.is-open .opener__hint {
  display: none;
}

.opener__hint::before, .opener__hint::after {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--line, #B6C7B4);
}

/* ═══ Animación de apertura · Sobre + tarjeta · Clásico ══════════════════════
   Formato hermano de "Con música" (mismo tipo `sobre_tarjeta`): apertura 3D
   real de la solapa (rotationX vía GSAP, ver opening-sobre-tarjeta-clasico.js)
   en vez del giro CSS 2D. Todas las clases van namespaced con el sufijo
   "-clasico"/"Clasico" para no chocar con ningún otro componente del motor.

   La silueta del sobre (solapa, bolsillo, pliegues, forro de rombos) vive en
   el SVG de component.php, en un viewBox común de 1433 x 1000; acá sólo van la
   paleta, la escala y la mecánica 3D. Prototipo aislado y fotos de referencia:
   PLANTILLA/finca_sobre_v2/.

   La tarjeta sigue reusando los MISMOS tokens con fallback que
   opening-sobre-tarjeta-con-musica (--primary, --ink, --tertiary-100,
   --hairline, --serif...). La paleta del sobre en cambio es fija (--oc-*):
   replica el papel oliva de la papelería, no el color del theme.
   ═══════════════════════════════════════════════════════════════════════════ */
body.is-locked {
  overflow: hidden;
}

.opener-clasico {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: radial-gradient(circle at 50% 40%, var(--tertiary-50, #f6f3ec) 0%, var(--tertiary-100, #efebe2) 48%, var(--tertiary-200, #e4dfd4) 100%);
  color: var(--ink, #4f5135);
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  --oc-olive-hi: #8b8247;
  --oc-olive-lo: #736933;
  --oc-pocket-hi: #908949;
  --oc-pocket-lo: #6b5f28;
  --oc-flap-hi: #9b9459;
  --oc-flap: #8a8145;
  --oc-flap-lo: #7e753b;
  --oc-flap-back-hinge: #5a5320;
  --oc-flap-back-tip: #6a632e;
  --oc-liner-light: #e6dfd1;
  --oc-liner-dark: #a89888;
}

.opener-clasico.is-gone {
  display: none;
}

.opener-clasico__eyebrow {
  color: var(--primary-500, #647E69);
}

.opener-clasico.is-open .opener-clasico__eyebrow {
  display: none;
}

.opener-clasico__hint {
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft, #6E665B);
  display: flex;
  align-items: center;
  gap: 9px;
}

.opener-clasico.is-open .opener-clasico__hint {
  display: none;
}

.opener-clasico__hint::before, .opener-clasico__hint::after {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--line, #B6C7B4);
}

.opener-clasico__stage {
  --envelope-clasico-width: min(600px, 84vw, 62vh);
  position: relative;
  width: min(900px, 92vw);
  height: min(720px, 78vh);
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  display: grid;
  place-items: center;
  perspective: 1500px;
  overflow: visible;
}

.opener-clasico--enter-outside .opener-clasico__stage {
  max-height: calc(100vh - 230px);
  max-height: calc(100dvh - 230px);
}

.opener-clasico__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.envelope-clasico-layer {
  position: absolute;
  left: 50%;
  top: 62%;
  width: var(--envelope-clasico-width);
  aspect-ratio: 1433/1000;
  display: block;
  overflow: visible;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

.envelope-clasico-base {
  z-index: 1;
  filter: drop-shadow(0 10px 12px rgba(70, 62, 40, 0.22)) drop-shadow(0 2px 3px rgba(70, 62, 40, 0.1));
}

.envelope-clasico-front {
  z-index: 4;
}

.envelope-clasico-flap-shadow {
  z-index: 5;
}

.envelope-clasico-flap-layer {
  position: absolute;
  left: 50%;
  top: 62%;
  z-index: 6;
  width: var(--envelope-clasico-width);
  aspect-ratio: 1433/1000;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform, opacity;
}

.envelope-clasico-flap {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0%;
  transform-style: preserve-3d;
  will-change: transform;
}

.flap-clasico-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  backface-visibility: hidden;
}

.flap-clasico-face--front {
  transform: translateZ(0.4px);
}

.flap-clasico-mark {
  opacity: 0.9;
  pointer-events: none;
}

.flap-clasico-face--inside {
  transform: translateZ(-0.4px) rotateY(180deg);
}

.envelope-clasico-trigger {
  position: absolute;
  left: 50%;
  top: 62%;
  z-index: 7;
  width: var(--envelope-clasico-width);
  aspect-ratio: 1433/1000;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.envelope-clasico-trigger:focus-visible {
  outline: 2px solid var(--opening-accent, var(--primary, #7C9580));
  outline-offset: 6px;
}

.opener-clasico.is-open .envelope-clasico-trigger {
  display: none;
}

.card-clasico {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(430px, 76vw);
  max-width: calc(100vw - 32px);
  aspect-ratio: 0.7/1;
  z-index: 3;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.65);
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform, opacity;
  container-type: inline-size;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 20%, #fffefb 0%, var(--tertiary-100, #fbf8f0) 70%);
  box-shadow: 0 34px 70px rgba(48, 38, 30, 0.23), 0 8px 20px rgba(48, 38, 30, 0.1);
  overflow: hidden;
}

.card-clasico::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--hairline, rgba(129, 118, 106, 0.28));
  border-radius: 9px;
  pointer-events: none;
}

.opener-clasico.is-open .card-clasico {
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .card-clasico {
    opacity: 1;
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }
  .envelope-clasico-base, .envelope-clasico-front,
  .envelope-clasico-flap-shadow, .envelope-clasico-flap-layer,
  .envelope-clasico-trigger {
    display: none;
  }
  .opener-clasico__hint {
    display: none;
  }
  .opener-clasico__enter {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .card-clasico--img {
    cursor: pointer;
  }
}
.card-clasico--img {
  width: min(1000px, 90vw);
  max-width: calc(100vw - 32px);
  aspect-ratio: 1280/913;
  border-radius: 2px;
  background: transparent;
}

.card-clasico--img::before {
  content: none;
}

.opener-clasico.is-ready .card-clasico--img {
  cursor: pointer;
}

.card-clasico__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.opener-clasico__enter {
  min-height: clamp(46px, 6vw, 56px);
  padding: 0 clamp(24px, 5vw, 40px);
  border: 0;
  border-radius: 999px;
  background: var(--opening-accent, var(--primary, #789181));
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(10px, 1.5vw, 14px);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(65, 81, 69, 0.14);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.opener-clasico.is-ready .opener-clasico__enter {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.card-clasico__inner {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  padding: clamp(34px, 5.5vw, 54px) clamp(22px, 5vw, 44px) clamp(34px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  text-align: center;
  color: var(--ink, #536c5d);
}

.card-clasico__botanical {
  width: clamp(72px, 23%, 112px);
  color: var(--primary-500, #718b7a);
  margin-bottom: clamp(22px, 5vh, 40px);
  flex: 0 0 auto;
}

.card-clasico__botanical svg {
  display: block;
  width: 100%;
  height: auto;
}

.card-clasico__welcome {
  margin: 0 0 clamp(14px, 2.8vh, 24px);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(9px, 1.65vw, 15px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--primary-600, #587566);
  white-space: nowrap;
}

.card-clasico__guest {
  margin: 0;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(30px, 5.6vw, 53px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--ink, #242522);
}

.card-clasico__passes-block {
  margin-top: clamp(14px, 2.2vh, 22px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.card-clasico__passes-number {
  margin: 0;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: clamp(62px, 10.8vw, 100px);
  line-height: 0.82;
  font-weight: 400;
  color: var(--primary, #718d7c);
}

.card-clasico__passes-label {
  margin: clamp(13px, 2vh, 19px) 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(11px, 1.9vw, 18px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-soft, #767873);
  white-space: nowrap;
}

.card-clasico__date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 15px);
  width: 100%;
  margin-top: clamp(24px, 3.8vh, 36px);
  color: var(--ink, #536c5d);
}

.card-clasico__date-icon {
  width: clamp(23px, 5vw, 31px);
  height: clamp(23px, 5vw, 31px);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-clasico__date p {
  margin: 0;
  font-family: var(--serif, Georgia, "Times New Roman", serif);
  font-size: clamp(12px, 2.05vw, 18px);
  line-height: 1.25;
  font-style: italic;
  color: var(--primary-600, #4c6255);
  white-space: nowrap;
}

.card-clasico__cta {
  width: min(100%, 360px);
  min-height: clamp(52px, 8vw, 66px);
  margin-top: clamp(18px, 2.6vh, 28px);
  border: 0;
  border-radius: 999px;
  padding: 0 clamp(18px, 4vw, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 16px);
  background: var(--opening-accent, var(--primary, #789181));
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(10px, 1.55vw, 15px);
  font-weight: 400;
  letter-spacing: 0.15em;
  white-space: nowrap;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(65, 81, 69, 0.12);
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.3s ease;
}

.card-clasico__cta:hover {
  background: var(--primary-500, #647E69);
}

/* Laptop compacta (ej. 1366x768): solo se reduce la escala del sobre. */
@media (min-width: 900px) and (max-height: 800px) {
  .opener-clasico__stage {
    --envelope-clasico-width: min(480px, 68vw, 58vh);
    width: min(760px, 90vw);
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
  }
  .opener-clasico--enter-outside .opener-clasico__stage {
    max-height: calc(100vh - 128px);
    max-height: calc(100dvh - 128px);
  }
}
@media (max-width: 600px) {
  .opener-clasico {
    padding: 16px;
  }
  .opener-clasico__stage {
    --envelope-clasico-width: min(90vw, 560px);
    width: 100%;
    height: min(80vh, 760px);
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
  }
  .opener-clasico--enter-outside .opener-clasico__stage {
    max-height: calc(100vh - 150px);
    max-height: calc(100dvh - 150px);
  }
  .card-clasico {
    width: min(86vw, 430px);
    max-width: calc(100vw - 24px);
  }
  .card-clasico--img {
    width: min(94vw, 560px);
    max-width: calc(100vw - 16px);
  }
  .card-clasico__inner {
    padding: 7.8cqw 6.2cqw 7.8cqw;
    position: absolute;
  }
  .card-clasico__botanical {
    width: 18.5cqw;
    margin-bottom: 5cqw;
  }
  .card-clasico__welcome {
    font-size: 2.65cqw;
    letter-spacing: 0.22em;
    margin-bottom: 3cqw;
  }
  .card-clasico__guest {
    font-size: 10.25cqw;
    line-height: 0.98;
  }
  .card-clasico__passes-block {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 2;
  }
  .card-clasico__passes-number {
    font-size: clamp(72px, 14cqw, 102px);
    line-height: 0.82;
  }
  .card-clasico__passes-label {
    margin-top: clamp(12px, 2.4cqw, 18px);
    font-size: clamp(13px, 2.7cqw, 19px);
    letter-spacing: 0.22em;
  }
  .card-clasico__date {
    position: absolute;
    left: 50%;
    bottom: clamp(108px, 19cqw, 126px);
    width: calc(100% - 12cqw);
    margin: 0;
    transform: translateX(-50%);
    gap: clamp(10px, 2.6cqw, 16px);
  }
  .card-clasico__date-icon {
    width: clamp(26px, 5.4cqw, 32px);
    height: clamp(26px, 5.4cqw, 32px);
  }
  .card-clasico__date p {
    font-size: clamp(14px, 2.8cqw, 19px);
  }
  .card-clasico__cta {
    position: absolute;
    left: 50%;
    bottom: clamp(34px, 6.2cqw, 46px);
    width: calc(100% - 18cqw);
    min-height: clamp(66px, 12cqw, 76px);
    margin: 0;
    padding: 0 clamp(16px, 4cqw, 28px);
    gap: 0;
    transform: translateX(-50%);
    font-size: clamp(15px, 3.25cqw, 19px);
    letter-spacing: 0.11em;
    white-space: nowrap;
  }
}
@media (max-height: 650px) and (orientation: landscape) {
  .opener-clasico__stage {
    --envelope-clasico-width: min(60vh, 520px);
    height: calc(100vh - 48px);
  }
  .card-clasico {
    width: min(48vw, 360px);
  }
  .card-clasico--img {
    width: min(62vw, 520px);
  }
}
@media (max-width: 380px) {
  .opener-clasico__stage {
    --envelope-clasico-width: 94vw;
  }
  .card-clasico {
    width: 78vw;
  }
  .card-clasico--img {
    width: 94vw;
  }
  .card-clasico__inner {
    padding: 7.2cqw 5.8cqw 7.2cqw;
  }
  .card-clasico__botanical {
    width: 18cqw;
    margin-bottom: 4.6cqw;
  }
  .card-clasico__welcome {
    font-size: 2.25cqw;
    margin-bottom: 2.8cqw;
  }
  .card-clasico__guest {
    font-size: 9.7cqw;
  }
  .card-clasico__passes-number {
    font-size: 14cqw;
  }
  .card-clasico__passes-label {
    font-size: 2.7cqw;
    margin-top: 2.8cqw;
  }
  .card-clasico__date {
    bottom: 23.5cqw;
  }
  .card-clasico__date p {
    font-size: 3.2cqw;
  }
  .card-clasico__cta {
    bottom: 7.2cqw;
    min-height: 11.7cqw;
    font-size: 2.8cqw;
    letter-spacing: 0.08em;
  }
}
/* Desktop: la composición sigue la misma jerarquía aprobada en mobile, sin
   tocar la animación del sobre. */
@media (min-width: 601px) {
  .card-clasico__welcome {
    transform: translateY(-8px);
    margin-bottom: clamp(10px, 2.2vh, 18px);
  }
  .card-clasico__guest {
    transform: translateY(-8px);
  }
  .card-clasico__passes-block {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    margin: 0;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  .card-clasico__date {
    position: absolute;
    left: 50%;
    bottom: 17.5%;
    width: 88%;
    margin: 0;
    transform: translateX(-50%);
    z-index: 2;
  }
  .card-clasico__cta {
    position: absolute;
    left: 50%;
    bottom: 6.8%;
    width: min(84%, 360px);
    margin: 0;
    transform: translateX(-50%);
    z-index: 2;
  }
}
@media (min-width: 900px) {
  .card-clasico__botanical {
    transform: translateY(-10px);
  }
  .card-clasico__welcome {
    font-size: clamp(9px, 1.45vw, 13px);
    transform: translateY(-14px);
    margin-bottom: clamp(10px, 2vh, 16px);
  }
  .card-clasico__guest {
    font-size: clamp(30px, 5.15vw, 49px);
    transform: translateY(-13px);
  }
  .card-clasico__passes-number {
    font-size: clamp(62px, 10.2vw, 94px);
  }
  .card-clasico__date {
    bottom: 19%;
  }
}
/* ═══ Animación de apertura · Presentación ════════════════════════════════════
   2 formatos: "Clásica" (moderna, sin ícono) y "Corazón" (arte original de
   pinku, con corazón de neón animado — hoy disponible para cualquier
   plantilla). Los botones (.opening-*__cta) llevan un estilo propio de
   respaldo para plantillas que no definan `.btn.light`/`.btn-pink` — en
   moderna/pinku ese respaldo pierde contra su propio botón (más específico),
   así que ninguna de las dos cambia de aspecto.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Formato "Clásica" (moderna) ────────────────────────────────────────── */
.opening-presentacion-clasica {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  text-align: center;
  padding: 40px;
  background: var(--ivory, #F7F4EE);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  transition: opacity 1.1s ease, transform 1.1s ease;
}

.opening-presentacion-clasica.gone {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

.opening-presentacion-clasica__eye {
  font-family: var(--label, inherit);
  font-size: 11px;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  color: var(--sage-mid, #7C9580);
}

.opening-presentacion-clasica__mono {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 1px solid var(--line-strong, rgba(0, 0, 0, 0.18));
  display: flex;
  align-items: center;
  justify-content: center;
}

.opening-presentacion-clasica__mono span {
  font-family: var(--display, serif);
  font-size: 38px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--sage-deep, #56654E);
  white-space: nowrap;
}

.opening-presentacion-clasica__names {
  font-family: var(--display, serif);
  font-weight: 300;
  font-size: clamp(58px, 18vw, 86px);
  line-height: 0.95;
  color: var(--ink, #2B2B26);
}

.opening-presentacion-clasica__names em {
  font-style: italic;
  display: block;
  font-size: 0.4em;
  color: var(--sage-mid, #7C9580);
  margin: 0.1em 0;
}

.opening-presentacion-clasica__sub {
  font-family: var(--display, serif);
  font-style: italic;
  font-size: 21px;
  color: var(--ink-soft, #6E665B);
}

.opening-presentacion-clasica__cta {
  margin-top: 14px;
  padding: 14px 32px;
  border-radius: 999px;
  border: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ivory, #F7F4EE);
  color: var(--sage-deep, #56654E);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.opening-presentacion-clasica__hint {
  opacity: 0.6;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft, #6E665B);
}

/* ── Formato "Corazón" (cualquier plantilla, arte original de pinku) ─────── */
@keyframes opening-presentacion-heartbeat {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  15% {
    transform: translate(-50%, -50%) scale(1.12);
  }
  30% {
    transform: translate(-50%, -50%) scale(0.97);
  }
  45% {
    transform: translate(-50%, -50%) scale(1.1);
  }
  60% {
    transform: translate(-50%, -50%) scale(1);
  }
}
.opening-presentacion-corazon {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 40px 32px;
  background: var(--ink, #1A1A1A);
  text-align: center;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.opening-presentacion-corazon.gone {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}

.opening-presentacion-corazon__sparkles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.opening-presentacion-corazon__sparkle {
  position: absolute;
  line-height: 1;
  animation-name: sparkleTwinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes sparkleTwinkle {
  0%, 100% {
    opacity: 0.15;
    transform: scale(0.7);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.15);
  }
}
@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0) rotate(-1.5deg);
  }
  50% {
    transform: translateY(-8px) rotate(1.5deg);
  }
}
.opening-presentacion-corazon__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 480px;
}

.opening-presentacion-corazon__eyebrow {
  margin: 0;
  color: var(--pink-soft, #ff7ec2);
}

.opening-presentacion-corazon__logo-wrap {
  position: relative;
  width: 100%;
}

/* Corazón de neón: imagen (default universal = la de pinku, o la propia del
   evento), nunca dibujo CSS — así se ve igual en cualquier plantilla. */
.opening-presentacion-corazon__heart {
  position: absolute;
  top: 53%;
  left: 50%;
  width: min(130%, 92vw);
  max-width: min(130%, 92vw);
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  animation: opening-presentacion-heartbeat 1.6s ease-in-out infinite;
}
@media (min-width: 768px) {
  .opening-presentacion-corazon__heart {
    width: 118%;
    max-width: 118%;
  }
}

.opening-presentacion-corazon__logo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: auto;
  animation: logoFloat 4s ease-in-out infinite;
}

.opening-presentacion-corazon__date {
  margin: 0;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
}

.opening-presentacion-corazon__cta {
  margin-top: 6px;
  padding: 15px 34px;
  border-radius: 999px;
  border: 0;
  background: var(--pink-neon, #ff2d95);
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.opening-presentacion-corazon__hint {
  margin: 0;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

/* Entrada directa por el enlace de un regalo (pinku): el opener no llega a
   pintar ni un fotograma. La marca `.sin-opener` en <html> la pone un script
   inline en el <head> de pinku, antes de que el bundle corra. */
.sin-opener .opening-presentacion-corazon {
  display: none;
}

/* ═══ Restricciones alimentarias · sheet posterior a la confirmación ═════════
   Markup: public/templates/components/diet/component.php (común a todos los
   themes). JS: dev/js/components/diet.js.

   Base compartida con variables --idiet-*: cada theme solo pisa las variables
   (acento, tipografías) desde su entry, igual que hace con --imenu-*.
   Móvil: bottom sheet. Desde 640px: tarjeta centrada.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --idiet-bg: #fffdf9;
  --idiet-ink: #2b2a28;
  --idiet-muted: rgba(43, 42, 40, .62);
  --idiet-line: rgba(43, 42, 40, .16);
  --idiet-accent: var(--main-theme-color, #3a3a36);
  --idiet-on-accent: #fff;
  --idiet-font-display: inherit;
  --idiet-font-body: inherit;
  --idiet-radius: 22px;
}

.idiet {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--idiet-font-body);
  color: var(--idiet-ink);
}

.idiet[hidden] {
  display: none;
}

.idiet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 18, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.idiet__sheet {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  padding: 28px 22px calc(22px + env(safe-area-inset-bottom));
  border-radius: var(--idiet-radius) var(--idiet-radius) 0 0;
  background: var(--idiet-bg);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
  text-align: left;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.idiet__head,
.idiet__foot {
  flex-shrink: 0;
}

.idiet__people {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.idiet.is-open .idiet__scrim {
  opacity: 1;
}

.idiet.is-open .idiet__sheet {
  transform: translateY(0);
}

.idiet__eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--idiet-accent);
}

.idiet__title {
  margin: 0 0 8px;
  font-family: var(--idiet-font-display);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--idiet-ink);
}

.idiet__text {
  margin: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--idiet-muted);
}

.idiet__person {
  min-width: 0;
  margin: 0 0 18px;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--idiet-line);
}

.idiet__person[hidden] {
  display: none;
}

.idiet__name {
  float: left;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--idiet-ink);
}

.idiet__chips {
  clear: both;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.idiet__chip {
  position: relative;
  cursor: pointer;
}

.idiet__chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.idiet__chip span {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--idiet-line);
  border-radius: 999px;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--idiet-ink);
  background: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.idiet__chip input:checked + span {
  border-color: var(--idiet-accent);
  background: var(--idiet-accent);
  color: var(--idiet-on-accent);
}

.idiet__chip input:focus-visible + span {
  outline: 2px solid var(--idiet-accent);
  outline-offset: 2px;
}

.idiet__other {
  box-sizing: border-box;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--idiet-line);
  border-radius: 12px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--idiet-ink);
  background: #fff;
}

.idiet__other[hidden] {
  display: none;
}

.idiet__other:focus {
  outline: none;
  border-color: var(--idiet-accent);
}

/* Estados de la tarjeta (data-state, ver component.php): una persona
   delegada o que ya respondió por su cuenta solo muestra su aviso. */
.idiet__status {
  display: none;
  font-size: 0.9rem;
  color: var(--idiet-muted);
}

.idiet__status p {
  margin: 0 0 6px;
}

.idiet__person[data-state=delegated] .idiet__status--delegated,
.idiet__person[data-state=self] .idiet__status--self {
  display: block;
}

.idiet__person:not([data-state=open]) .idiet__form {
  display: none;
}

.idiet__link {
  margin: 0 16px 0 0;
  padding: 4px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--idiet-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.idiet__status-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.idiet__link--share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.idiet__link--share span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.idiet__share-icon {
  flex: 0 0 auto;
  color: var(--idiet-accent);
}

.idiet__delegate {
  margin-top: 10px;
}

.idiet__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.idiet__save,
.idiet__skip {
  width: 100%;
  padding: 14px 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.idiet__save {
  border: 0;
  background: var(--idiet-accent);
  color: var(--idiet-on-accent);
}

.idiet__save:disabled {
  opacity: 0.55;
  cursor: default;
}

.idiet__skip {
  border: 0;
  background: transparent;
  color: var(--idiet-muted);
}

.idiet__thanks {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--idiet-accent);
}

.idiet__thanks[hidden] {
  display: none;
}

html.idiet-lock,
html.idiet-lock body {
  overflow: hidden;
}

@media (min-width: 640px) {
  .idiet {
    align-items: center;
  }
  .idiet__sheet {
    padding: 34px 32px 28px;
    border-radius: var(--idiet-radius);
    transform: translateY(24px);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
  }
  .idiet.is-open .idiet__sheet {
    opacity: 1;
  }
  .idiet__actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }
  .idiet__save,
  .idiet__skip {
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .idiet__scrim,
  .idiet__sheet {
    transition: none;
  }
}
/* ═══ Disparador "editar restricciones" ═══════════════════════════════════
   Reabre #idiet (ver dev/js/components/diet.js). Dos variantes, misma
   estructura (public/templates/components/diet/_reopen-trigger.php):
     --inline    titular: en el flujo normal, debajo del bloque de RSVP/QR
                 de cada theme. Sin posición propia: hereda el lugar donde
                 el theme lo insertó; un theme puede afinar margen/alineación
                 con su propio override si hace falta.
     --floating  acompañante (?encuesta=…): no tiene bloque de RSVP propio,
                 así que va fija abajo-izquierda — el menú flotante ocupa el
                 centro y el botón de música la derecha en todos los themes.
   ═══════════════════════════════════════════════════════════════════════ */
.idiet-reopen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: center;
  align-self: center;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 0;
  padding: 12px 24px;
  border: 1px solid var(--idiet-line);
  border-radius: 999px;
  background: transparent;
  color: var(--idiet-accent);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.idiet-reopen:hover {
  border-color: var(--idiet-accent);
  background: var(--idiet-accent);
  color: var(--idiet-on-accent);
}

.idiet-reopen:focus-visible {
  outline: 2px solid var(--idiet-accent);
  outline-offset: 2px;
}

.idiet-reopen[hidden] {
  display: none;
}

.idiet-reopen__add[hidden],
.idiet-reopen__edit[hidden] {
  display: none;
}

.idiet-reopen--floating {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  margin: 0;
  max-width: calc(100vw - 32px);
  background: var(--idiet-bg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

/* ═══ "Cómo llegar" · elegir Google Maps o Waze ══════════════════════════════
   Markup: public/templates/components/directions/component.php (común a todos
   los themes). JS: dev/js/components/directions.js.

   Reutiliza las variables --idiet-* (components/_diet.scss): cada theme ya las
   pisa con su acento y sus tipografías, así este sheet toma el mismo look sin
   tocar ningún theme. Sube desde abajo en todos los anchos.
   ═══════════════════════════════════════════════════════════════════════════ */
.idir {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--idiet-font-body);
  color: var(--idiet-ink);
}

.idir[hidden] {
  display: none;
}

.idir__scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 18, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.idir__sheet {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  padding: 14px 22px calc(18px + env(safe-area-inset-bottom));
  border-radius: var(--idiet-radius) var(--idiet-radius) 0 0;
  background: var(--idiet-bg);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.idir.is-open .idir__scrim {
  opacity: 1;
}

.idir.is-open .idir__sheet {
  transform: translateY(0);
}

.idir__grip {
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: var(--idiet-line);
}

.idir__title {
  margin: 0 0 4px;
  font-family: var(--idiet-font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--idiet-ink);
}

.idir__place {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--idiet-muted);
}

.idir__place[hidden] {
  display: none;
}

.idir__options {
  display: grid;
  gap: 10px;
  margin: 20px 0 6px;
}

.idir__option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--idiet-line);
  border-radius: 16px;
  background: transparent;
  color: var(--idiet-ink);
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.idir__option:hover,
.idir__option:focus-visible {
  border-color: var(--idiet-accent);
  outline: none;
}

.idir__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--idiet-accent);
  color: var(--idiet-on-accent);
}

.idir__label {
  font-weight: 500;
}

.idir__cancel {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--idiet-muted);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

html.idir-lock,
html.idir-lock body {
  overflow: hidden;
}

@media (min-width: 640px) {
  .idir__sheet {
    margin-bottom: 24px;
    border-radius: var(--idiet-radius);
    transform: translateY(calc(100% + 24px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .idir__scrim,
  .idir__sheet {
    transition: none;
  }
}
/* Menú: base compartida (comportamiento de los 4 modos) + piel del theme. */
/* ═══════════════════════════════════════════════════════════════════════════
   Menú de navegación — base compartida por todas las plantillas.

   Aquí vive el COMPORTAMIENTO visual (posición, plegado, breakpoints); cada
   theme repinta encima con sus colores y tipografía sobreescribiendo las
   variables de abajo o las propias reglas. Ningún valor de marca en este
   archivo: los defaults son neutros a propósito.

   Modos:
     .imenu--flotante  + --iconos | --iconos-texto   barra inferior
     .imenu--web       + --movil  | --movil-desktop  hamburguesa + panel lateral

   Estados (una sola polaridad para las cuatro plantillas):
     .imenu.is-visible        barra flotante revelada  (base = oculta)
     .imenu.is-open           panel lateral abierto
     .imenu__link.is-active   sección actual
     .imenu__toggle.is-dark   hamburguesa sobre fondo claro
     body.imenu-locked        scroll bloqueado con el panel abierto
   ═══════════════════════════════════════════════════════════════════════════ */
.imenu {
  /* Ganchos de repintado por theme. */
  --imenu-bg: rgba(255, 255, 255, .92);
  --imenu-color: #444;
  --imenu-color-active: #000;
  --imenu-border: rgba(0, 0, 0, .08);
  --imenu-shadow: 0 12px 30px rgba(0, 0, 0, .16);
  --imenu-radius: 999px;
  --imenu-icon: 21px;
  /* Desfase al hacer scroll a una sección (lo lee menu.js). */
  --imenu-offset: 8px;
  --imenu-panel-bg: #fff;
  --imenu-panel-w: min(78vw, 320px);
  --imenu-ease: cubic-bezier(.4, 0, .2, 1);
  /* Curva tipo drawer de iOS: más carácter que la genérica de arriba para
     la hamburguesa y el panel, que son los dos movimientos más "físicos"
     del menú. */
  --imenu-ease-drawer: cubic-bezier(.32, .72, 0, 1);
  z-index: 120;
}

body.imenu-locked {
  overflow: hidden;
}

.imenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.imenu__link {
  display: flex;
  align-items: center;
  color: var(--imenu-color);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}

.imenu__link.is-active {
  color: var(--imenu-color-active);
}

.imenu__svg {
  width: var(--imenu-icon);
  height: var(--imenu-icon);
  display: block;
}

/* ── Modo flotante: barra inferior ─────────────────────────────────────────
   Base oculta + .is-visible para revelar. Es la polaridad que ya usaban
   entrehojas y campillo; moderna venía con la inversa (.hidden). */
.imenu--flotante {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(160%);
  opacity: 0;
  pointer-events: none;
  max-width: calc(100vw - 28px);
  background: var(--imenu-bg);
  border: 1px solid var(--imenu-border);
  border-radius: var(--imenu-radius);
  box-shadow: var(--imenu-shadow);
  transition: transform 0.42s var(--imenu-ease), opacity 0.42s ease;
  /* El marco (fondo + borde redondeado) siempre recorta lo que haya adentro:
     así, aunque el contenido se desplace o un ícono quede a medio revelar
     durante el scroll horizontal, nunca se ve nada fuera de la pastilla. */
  overflow: hidden;
}

.imenu--flotante.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.imenu--flotante .imenu__list {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  /* Los ítems nunca se achican por debajo de su tamaño natural (flex-shrink:0
     en .imenu__item, más abajo): si no entran todos con el ancho disponible,
     la lista se desplaza horizontalmente adentro del marco en vez de dejar
     que algún ícono se salga de la pastilla. Antes, con seis ítems (varias
     secciones + música), el ícono de tamaño fijo de cada theme (p.ej. los
     46px de moderna) no podía achicarse al ritmo del ítem que sí se
     achicaba, y se desbordaba fuera del marco redondeado. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.imenu--flotante .imenu__list::-webkit-scrollbar {
  display: none;
}

.imenu--flotante .imenu__item {
  flex-shrink: 0;
}

.imenu--flotante .imenu__link {
  justify-content: center;
  border-radius: 50%;
  width: 42px;
  height: 42px;
}

/* Solo iconos: el nombre queda accesible pero no visible. */
.imenu--iconos .imenu__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Iconos + nombre: columna, con el rótulo pequeño debajo. */
.imenu--iconos-texto .imenu__link {
  flex-direction: column;
  gap: 3px;
  width: auto;
  min-width: 58px;
  height: auto;
  padding: 6px 8px;
  border-radius: 16px;
}

.imenu--iconos-texto .imenu__label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

/* ── Ítem de música (solo modo flotante, cuando config.music=true) ─────────
   Estructura genérica: la nota va visible y el ecualizador oculto por
   defecto. Cada theme ya tenía esta misma dualidad en su botón flotante de
   esquina, con su propio disparador de estado (una clase o un atributo) — la
   piel de cada uno decide CUÁNDO se cruzan los dos íconos, no cómo se ven. */
/* Selector compuesto (.imenu__icon.imenu__icon--eq), no solo la clase de
   variante: cada theme redefine `.imenu__icon` genérico para su pastilla de
   ícono normal (p.ej. moderna, con display:flex), y una sola clase perdería
   esa pulseada por orden de compilación en vez de por especificidad. */
.imenu__icon.imenu__icon--eq {
  display: none;
  /* Centradas dentro de la pastilla (no ancladas abajo): en un botón redondo
     chico casi no se nota la diferencia, pero en la pastilla ovalada de
     iconos-texto flex-end dejaba un hueco visible arriba. Con center, cada
     barra crece/decrece hacia los dos lados de su propio centro. */
  align-items: flex-end;
  padding: 5px;
  justify-content: center;
  gap: 2px;
  /* Sin height NI max-height propios, a propósito: el tamaño de la caja lo
     pone la regla genérica .imenu__icon de cada theme (ej. 46×30px en
     moderna), la misma que ya usa el ícono de nota. `height` y `max-height`
     en la misma caja se toman el mínimo de los dos — poner cualquiera de los
     dos acá vuelve a achatar la caja por debajo de esos 30px, y como
     .imenu__list centra cada botón como bloque completo, el rótulo "Música"
     termina en otra altura que el resto. El límite de las barritas ya lo da
     el keyframe (máximo 16px) y su propio max-height individual, abajo. */
}

.imenu__icon--eq i {
  width: 2.5px;
  max-height: 16px;
  background: currentColor;
  border-radius: 2px;
  animation: imenu-eq 0.9s ease-in-out infinite;
}

.imenu__icon--eq i:nth-child(2) {
  animation-delay: 0.15s;
}

.imenu__icon--eq i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes imenu-eq {
  0%, 100% {
    height: 5px;
  }
  50% {
    height: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .imenu__icon--eq i {
    animation: none;
  }
}
/* ── Modo web: hamburguesa + panel lateral ────────────────────────────────── */
.imenu__toggle {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 340;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.imenu__toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: #fff;
  transition: transform 0.22s var(--imenu-ease-drawer), opacity 0.2s ease, background 0.3s ease;
}

.imenu__toggle.is-dark span {
  background: #333;
}

.imenu__toggle.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.imenu__toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.imenu__toggle.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Con el panel abierto, .imenu__close (dentro del panel) queda casi en el
   mismo punto de pantalla que esta hamburguesa transformada en X: sin
   ocultarla, las dos X se superponen y se ve una línea de más cruzando el
   ícono de cerrar. */
.imenu__toggle.is-open {
  opacity: 0;
  pointer-events: none;
}

.imenu__scrim {
  position: fixed;
  inset: 0;
  z-index: 330;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.imenu__scrim.is-visible {
  opacity: 1;
}

.imenu--web {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 335;
  width: var(--imenu-panel-w);
  background: var(--imenu-panel-bg);
  transform: translateX(100%);
  transition: transform 0.32s var(--imenu-ease-drawer);
  overflow-y: auto;
  /* La hamburguesa es fija: hay que descontarla al saltar a una sección. */
  --imenu-offset: 64px;
}

.imenu--web.is-open {
  transform: none;
}

/* En modo web el ítem activo no se marca con color ni con pastilla de
   fondo en el ícono (a diferencia de la barra flotante inferior, donde sí
   corresponde): en el panel/barra web, ícono y rótulo se quedan siempre con
   el color oscuro normal del texto, activo o no. */
.imenu--web .imenu__link.is-active {
  color: var(--imenu-color);
}

.imenu--web .imenu__link.is-active .imenu__icon {
  background: none;
  color: inherit;
}

.imenu__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--imenu-color);
  cursor: pointer;
}

.imenu__close svg {
  width: 20px;
  height: 20px;
  display: block;
  margin: 0 auto;
}

.imenu--web .imenu__list {
  padding: 72px 28px 28px;
}

.imenu--web .imenu__link {
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--imenu-border);
}

/* En el panel lateral el icono es opcional: manda el texto. Tamaño con
   variable + fallback: sin config del organizador, mismo .82rem de siempre.
   Se revierte a fijo dentro del media query de escritorio (más abajo) para
   que la variable NUNCA llegue a la barra horizontal — el campo del panel es
   explícitamente "solo menú móvil". */
.imenu--web .imenu__label {
  font-size: var(--imenu-mobile-font-size, 0.82rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Modo web · móvil y PC: en escritorio pasa a barra horizontal ──────────
   El breakpoint es el de campillo/finca (900px), que son las plantillas con
   modo web. Un theme con otro breakpoint puede repetir este bloque con el
   suyo. */
@media (min-width: 900px) {
  .imenu--movil-desktop {
    /* fixed, no sticky: flota sobre la portada desde el primer pixel de
       scroll en vez de reservar su propio alto en el flujo (lo que
       empujaría la foto de portada hacia abajo, al ser el primer hijo del
       body ahora que el nav se imprime antes del contenido). */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    transform: none;
    background: var(--imenu-bg);
    border-bottom: 1px solid var(--imenu-border);
    overflow: visible;
    --imenu-offset: 72px;
  }
  /* Selector compuesto (.imenu--web.imenu--movil-desktop), no solo
     .imenu--movil-desktop: mismo motivo que el color personalizado más
     abajo — algún theme (finca) fija su propio padding en
     «.imenu--web .imenu__list/.imenu__link» (pensado para el panel lateral
     vertical) con la misma especificidad, y al compilarse después le ganaba
     a esto por orden, inflando la barra horizontal con el padding del
     drawer móvil. Con la clase de más, esta gana siempre. */
  .imenu--web.imenu--movil-desktop .imenu__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding: 16px 24px;
  }
  .imenu--web.imenu--movil-desktop .imenu__link {
    padding: 4px 0;
    border-bottom: 0;
    transition: color 0.16s ease, transform 0.16s ease;
  }
  .imenu--web.imenu--movil-desktop .imenu__link:active {
    transform: scale(0.97);
  }
  /* Transición suave del fondo/blur al cruzar el umbral portada↔scrolled
     (el color en sí lo deciden las reglas "Fondo/texto de la barra, por
     estado" más abajo, que reemplazan lo que antes vivía acá). */
  .imenu--web.imenu--movil-desktop {
    transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
  }
  /* En escritorio el menú ya está a la vista: sobran hamburguesa y velo.
     La variante viaja como clase propia en cada uno (la pone component.php)
     porque van antes del <nav> y no se los puede alcanzar con ~. */
  .imenu__toggle.imenu--movil-desktop,
  .imenu__scrim.imenu--movil-desktop,
  .imenu--movil-desktop .imenu__close {
    display: none;
  }
  /* La barra horizontal se lee mejor sin los iconos. */
  .imenu--movil-desktop .imenu__icon {
    display: none;
  }
  /* ── Ampliación: configuración desktop de "Menú web + Modo móvil y PC" ──
     Todo lo de acá solo entra en juego si component.php agregó la clase
     correspondiente (según event.json → menu.desktop); sin config guardada
     ninguna de estas reglas aplica y la barra se comporta exactamente igual
     que antes de esta ampliación. */
  /* Comportamiento="Ocultar al hacer scroll hacia abajo" + Posición="Seguir
     durante todo el scroll": mismo triplete transform/opacity/transition que
     .imenu--flotante.is-visible (arriba), alternado por menu.js con la misma
     máquina de histéresis (DELTA) que ya usaba la barra flotante. */
  .imenu--movil-desktop.imenu--autohide {
    transition: transform 0.42s var(--imenu-ease), opacity 0.42s ease;
  }
  .imenu--movil-desktop.imenu--autohide:not(.is-visible) {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  /* Posición="Solo al inicio": vuelve al flujo normal del documento (ya no es
     el primer hijo fijo/flotante), así que no acompaña el scroll ni se
     convierte en sticky/fixed. */
  .imenu--movil-desktop.imenu--top-only {
    position: static;
  }
  /* Alineación del grupo completo de enlaces (centro ya es el default de
     arriba, sin cambios). Sin efecto si hay un espaciado elegido (ver
     imenu--justify-* más abajo, con más especificidad a propósito). */
  .imenu--movil-desktop.imenu--align-left .imenu__list {
    justify-content: flex-start;
  }
  .imenu--movil-desktop.imenu--align-right .imenu__list {
    justify-content: flex-end;
  }
  /* Espaciado entre links: misma propiedad que la alineación de arriba
     (justify-content), así que si el organizador eligió una opción acá, tiene
     que ganarle a imenu--align-left/right sin importar el orden de
     compilación. Selector compuesto de 3 clases (.imenu--web +
     .imenu--movil-desktop + .imenu--justify-*) contra las 2 de alineación. */
  .imenu--web.imenu--movil-desktop.imenu--justify-around .imenu__list {
    justify-content: space-around;
  }
  .imenu--web.imenu--movil-desktop.imenu--justify-between .imenu__list {
    justify-content: space-between;
  }
  .imenu--web.imenu--movil-desktop.imenu--justify-evenly .imenu__list {
    justify-content: space-evenly;
  }
  /* Tamaño de letra del menú móvil: la variable que usa .imenu--web
     .imenu__label (arriba) es "solo móvil" por pedido explícito, así que acá
     se revierte a fijo — la barra de escritorio nunca hereda
     --imenu-mobile-font-size aunque el organizador la haya configurado. */
  .imenu--web.imenu--movil-desktop .imenu__label {
    font-size: 0.82rem;
  }
  /* ── Fondo/texto de la barra, por estado ───────────────────────────────
     "cover" = mientras la barra está sobre la portada (selector base,
     :not(.is-dark)); "scrolled" = una vez que sale de ella (.is-dark, la
     misma señal que ya recolorea la hamburguesa vía coverAware en menu.js,
     pero ahora aplicada a la barra en sí siempre que exista, ver menu.js).
     Cada estado tiene su propio "sin color"/personalizado, para que el
     organizador pueda diferenciarlos igual que hace con el color. */
  /* Portada: fondo. */
  .imenu--web.imenu--movil-desktop:not(.is-dark) {
    background: var(--imenu-bg-cover-custom, var(--imenu-bg));
  }
  .imenu--web.imenu--movil-desktop.imenu--cover-bg-none:not(.is-dark) {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  /* Portada: texto (mismo criterio de especificidad de 3 clases que ya
     usaba esta regla antes del desdoblamiento, para ganarle a
     «.imenu--web .imenu__link» de algún theme, p.ej. moderna). */
  .imenu--web.imenu--movil-desktop:not(.is-dark) .imenu__link,
  .imenu--web.imenu--movil-desktop:not(.is-dark) .imenu__link.is-active {
    color: var(--imenu-color-cover-custom, var(--imenu-color-desktop, var(--imenu-color)));
  }
  /* Scrolled (fuera de portada): fondo. Con blur/sombra de "vidrio sólido"
     salvo que el organizador haya elegido "sin color" para este estado. */
  /* Scrolled: texto. */
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .imenu--web.imenu--movil-desktop:not(.is-dark) .imenu__link:hover {
    color: var(--imenu-color-cover-custom, var(--imenu-color-hover, var(--imenu-color-active)));
  }
}
@media (min-width: 900px) {
  .imenu--web.imenu--movil-desktop.is-dark {
    background: var(--imenu-bg-scrolled-custom, var(--imenu-bg-scrolled, var(--imenu-bg)));
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.22);
  }
  .imenu--web.imenu--movil-desktop.imenu--scrolled-bg-none.is-dark {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .imenu--web.imenu--movil-desktop.is-dark .imenu__link,
  .imenu--web.imenu--movil-desktop.is-dark .imenu__link.is-active {
    color: var(--imenu-color-scrolled-custom, var(--imenu-color-desktop, var(--imenu-color)));
  }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .imenu--web.imenu--movil-desktop.is-dark .imenu__link:hover {
    color: var(--imenu-color-scrolled-custom, var(--imenu-color-hover, var(--imenu-color-active)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .imenu,
  .imenu__scrim,
  .imenu__toggle span,
  .imenu--movil-desktop.imenu--autohide {
    transition: none;
  }
}
/* Menú de navegación — piel de finca.
   El comportamiento (hamburguesa, panel lateral, breakpoints) vive en la base
   compartida components/_menu.scss; aquí solo el color, el tipo y las medidas.
   Portado del `_drawer.scss` anterior para que la invitación se vea igual:
   panel burdeos a sangre por la derecha, rótulos en versalitas. */
.imenu {
  --imenu-panel-bg: var(--c-burdeos);
  --imenu-panel-w: min(78vw, 320px);
  --imenu-color: #FFFDF8;
  --imenu-color-active: #FFFDF8;
  --imenu-border: rgba(255, 253, 248, .18);
  --imenu-ease: var(--ease);
  /* La hamburguesa es fija arriba a la derecha: hay que descontarla al saltar. */
  --imenu-offset: 76px;
  /* Barra de escritorio: antes caía en el blanco genérico compartido (finca
     nunca definía --imenu-bg, que --imenu-color/-active de arriba jamás
     necesitaron porque el panel móvil es sólido burdeos). Acá se usa el
     mismo "papel casi blanco" que ya tienen las tarjetas de finca
     (--c-tarjeta: #FFFDF8), en vidrio translúcido — mismo espíritu que la
     barra de moderna/entrehojas, con la identidad propia de finca en vez del
     default. --imenu-color-desktop es el texto que le corresponde a ESE
     fondo claro (--imenu-color de arriba es crema, pensado para el panel
     burdeos oscuro: sobre papel claro sería invisible). */
  --imenu-bg: rgba(255, 253, 248, .82);
  --imenu-color-desktop: var(--c-tinta);
  --imenu-color-hover: var(--c-burdeos);
}

/* Igual que la barra de escritorio: --imenu-color de arriba es crema
   (#FFFDF8), pensado para el panel burdeos sólido del drawer. La barra
   flotante usa el mismo fondo claro que la de escritorio (--imenu-bg,
   papel translúcido), así que con el crema de arriba los íconos quedaban
   casi invisibles — texto y trazo casi del mismo tono que el fondo (ver
   captura). Se repinta con la tinta oscura de finca y el burdeos para el
   ítem activo, igual que ya se hace en la barra de escritorio. */
.imenu--flotante {
  --imenu-color: var(--c-tinta);
  --imenu-color-active: var(--c-burdeos);
}

/* Hamburguesa: crema sobre la portada, tinta al entrar en el papel. */
.imenu__toggle {
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 340;
}

.imenu__toggle span {
  width: 24px;
  height: 1.5px;
  background: #FFFDF8;
}

.imenu__toggle.is-dark span {
  background: var(--c-tinta);
}

.imenu__scrim {
  background: rgba(53, 43, 33, 0.5);
}

.imenu--web .imenu__list {
  padding: 76px 28px 28px;
}

/* Excepción documentada: el export usa Times New Roman para los enlaces del
   drawer (no Raleway como el resto de labels de UI) — es la misma fuente de
   contenido, aquí en mayúsculas y más grande, no un rótulo pequeño. */
.imenu--web .imenu__link {
  font-family: var(--font-body-content);
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: var(--track-tight);
  text-transform: none;
  padding: 16px 0;
}

.imenu__close {
  color: #FFFDF8;
}

/* Portada — fotografía a sangre con los nombres en script. */
.cover {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 0 var(--gutter) clamp(56px, 14vh, 110px);
  overflow: hidden;
  background: var(--c-tinta);
}

.cover__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* El degradado nace donde arrancan los nombres: la mitad superior de la foto
   queda limpia y la inferior gana el contraste que el texto necesita. */
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 15, 12, 0.18) 0%, rgba(20, 15, 12, 0.1) 34%, rgba(20, 15, 12, 0.55) 72%, rgba(20, 15, 12, 0.86) 100%);
}

.cover__inner {
  position: relative;
  z-index: 2;
  color: #FFFDF8;
}

.cover__topline {
  font-family: var(--font-body-ui);
  font-size: 0.68rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin: 0 0 var(--space-sm);
  opacity: 0.9;
}

.cover__names {
  margin: 0;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.95;
}

.cover__name {
  font-size: clamp(3rem, 15vw, 4.6rem);
  text-shadow: 0 2px 24px rgba(20, 15, 12, 0.45);
}

.cover__amp {
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  margin: -0.3em 0 0.6em 0;
  opacity: 0.85;
}

.cover__fecha {
  font-family: var(--font-body-ui);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: var(--track-mid);
  margin: var(--space-md) 0 var(--space-xs);
}

.cover__ciudad {
  font-family: var(--font-body-ui);
  font-size: 0.74rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin: 0;
  opacity: 0.88;
}

/* Pista de scroll: el filete crece y se desvanece en bucle. */
.cover__cue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 2;
  margin: 0;
  color: #FFFDF8;
  font-family: var(--font-body-ui);
  font-size: 0.6rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  opacity: 0.7;
}

.cover__cue span {
  display: block;
  width: 1px;
  height: 34px;
  margin: 8px auto 0;
  background: currentColor;
  transform-origin: top;
  animation: cover-cue 2.4s var(--ease) infinite;
}

@keyframes cover-cue {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  40% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cover__cue span {
    animation: none;
  }
}
/* Bienvenida — banda de papel con monograma y fondo de árboles al pie.
   Excepción a .band--papel (ver _base.scss): aquí el export SÍ repite la
   textura en mosaico a tamaño natural desde la esquina superior izquierda,
   en vez de una sola instancia a cubrir toda la banda — es la única sección
   donde bg_pared se usa así. */
.intro.band--papel {
  background-size: auto;
  background-position: top left;
  background-repeat: repeat;
}

/* Menos aire arriba que el genérico --space-xl (84px) de .section: la
   descripción quedaba con mucha distancia del borde superior de la banda. */
.intro {
  padding-top: var(--space-lg);
}

.intro__texto {
  max-width: 36ch;
}

/* Mismo tamaño de letra que las respuestas de FAQ (.faq__a, _faq.scss),
   a pedido: la descripción de Bienvenida se leía más grande que el resto
   del cuerpo de la invitación. Los primeros dos párrafos llevan 28px de
   por medio; el último, 40px antes del sello. */
.intro__texto p {
  font-size: 1.07rem;
  line-height: 1.4;
  margin: 0 0 28px;
}

.intro__texto p:last-child {
  margin-bottom: 40px;
}

/* Monograma ovalado: el único lugar donde sobrevive el verde oliva. El
   tamaño calza con el sello real (106×122); object-fit lo contiene sin
   deformar si algún evento sube un monograma con otra proporción. Sin
   margin-top: el espacio ya lo da el margin-bottom del último párrafo. */
.intro__monograma {
  width: 106px;
  height: 122px;
  object-fit: contain;
  margin: 0 auto;
}

/* El fondo de árboles al pie de la banda usa la clase compartida
   .grabado--fondo (ver _base.scss) — reutilizada también por countdown,
   pero cada una necesita su propia altura: la relación de aspecto de la
   arboleda (588×193) da ~269px de alto para los ~820px de ancho con que
   el export la muestra — a esa altura el ancho resultante iguala casi
   exactamente el --content de escritorio en el segundo breakpoint (820px),
   así que ahí se ve completa; en mobile/tablet se recorta por los costados
   a propósito, igual que en el export. */
.intro .grabado--fondo {
  height: 269px;
  background-size: auto 269px;
  /* Menos separación del sello que el margin-top:var(--space-lg) genérico
     de .grabado--fondo (_base.scss) — quedaba mucho aire entre el
     monograma y el fondo de árboles. */
  margin-top: var(--space-md);
}

/* ═══ PADRES / PADRINOS ═══════════════════════════════════════════════════
   Columnas centradas: un grupo por columna, envuelven en móvil angosto. */
.parents__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg) var(--space-xl);
  margin-top: var(--space-md);
}

.parents__side {
  flex: 1 1 160px;
  max-width: 220px;
}

.parents__label {
  margin-bottom: var(--space-xs);
}

.parents__name {
  max-width: none;
  margin: 2px 0 0;
}

/* Cuenta regresiva — cifras separadas por dos puntos reales (no un filete
   vertical: eso fue un error de esta migración, corregido aquí). Fila flex,
   no grid de 4 columnas — así el separador es un elemento más de la fila,
   igual que en el diseño exportado. */
/* Menos aire arriba que el genérico --space-xl (84px) de .section: el
   título "Solo Faltan" quedaba con mucha distancia del borde superior. */
.countdown {
  padding-top: var(--space-lg);
}

.countdown__grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Menos separación del título que antes (era var(--space-lg), 48px, y
     luego var(--space-md), 28px): sumado al margin-bottom de .section__head
     (28px) seguía viéndose separado de más. */
  margin-top: var(--space-sm);
}

.countdown__cell {
  text-align: center;
  min-width: 58px;
}

.countdown__num {
  font-family: var(--font-body-ui);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  color: var(--c-tinta);
  font-variant-numeric: lining-nums;
}

.countdown__lab {
  display: block;
  font-family: var(--font-body-ui);
  font-size: 14px;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  /* Literal del export: más oscuro que --c-tinta-soft (#6F6455), propio de
     esta sección — no se generaliza al token compartido sin auditar el
     resto de usos de --c-tinta-soft. */
  color: #6B5842;
  margin-top: 4px;
}

/* El separador es su propio elemento de la fila, con un margen inferior que
   lo sube para alinearse con el CENTRO de la cifra, no con la etiqueta de
   abajo (que el separador no tiene). */
.countdown__sep {
  font-family: var(--font-body-ui);
  font-size: 32px;
  line-height: 1;
  color: var(--c-vino-link);
  margin: 0 2px 22px;
}

.countdown__cuando {
  margin-top: 34px;
}

.countdown__fecha {
  font-family: var(--font-body-ui);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--c-tinta);
  margin: 0 0 8px;
}

.countdown__ciudad {
  font-family: var(--font-body-ui);
  font-size: 16px;
  letter-spacing: 2px;
  color: #6B5842;
}

/* Fondo de fachada: igual técnica que bienvenida/recomendaciones (altura
   fija, ancho automático según la proporción real de fachada.png), anclada
   en mobile a un punto calculado — no al centro, ver _desktop.scss para el
   cambio a center en tablet/escritorio. La altura reproduce el ancho de
   1180px del export (fachada.png es 1976×822 → 491px de alto para ese
   ancho): a esta escala la imagen no cabe entera ni en el --content más
   ancho del theme (820px), pero acá pesa más igualar la escala grande del
   mockup que garantizar que se vea completa — a diferencia de bienvenida,
   donde ambos objetivos coincidían por su proporción más angosta.

   El edificio, en la imagen nativa, ocupa aprox. 600-1350px de 1976px de
   ancho; el porcentaje decide cuánto de su lado izquierdo queda tapado por
   el borde del contenedor (~480px, --content móvil) — más bajo = se ve más
   edificio, más alto = se tapa más. Ajustar aquí si hace falta afinar. */
.countdown .grabado--fondo {
  height: 491px;
  background-size: auto 491px;
  background-position: 76% 100%;
  /* Menos separación del bloque fecha/ciudad que el margin-top:var(--space-lg)
     genérico de .grabado--fondo (_base.scss) — quedaba mucho aire entre
     "23 de Abril · 2027 / Madrid · España" y la fachada. Reducido a pedido
     explícito (var(--space-md) → var(--space-xs) → 0 → -8px): ya en 0 no
     quedaba token más chico, así que sigue en negativo, corriendo la
     fachada hacia arriba, debajo del texto. */
  margin-top: -8px;
}

/* Galería — variante polaroid: pila vertical con marco blanco, siempre recta. */
/* .section da var(--space-xl) (84px) arriba y abajo por igual — acá no hay
   .section__head que empuje el contenido, así que la caja ya era simétrica.
   Lo que desbalanceaba a la vista era la sombra de la última polaroid
   (box-shadow:0 12px 28px, ver .polaroid más abajo): no ocupa layout, pero
   come visualmente el aire de abajo, así que el padding-bottom real lleva
   ese blur (28px) de más para que el hueco se VEA igual que el de arriba.
   Reducido a la mitad a pedido explícito — top y bottom escalan juntos
   (42px y 42px+14px) para seguir viéndose parejos entre sí. */
.gallery {
  padding-top: calc(var(--space-xl) / 2);
  padding-bottom: calc(var(--space-xl) / 2 + 14px);
}

.gallery__polaroids {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

/* Mobile: una columna (por defecto, arriba). Tablet (900-1279px, el mismo
   corte "no-mobile" que usa el resto del theme): 2 fotos en una fila y la
   3ª centrada debajo. Desktop (1280px+): las 3 en una sola fila.

   grid-column:full saca la fila del --content angosto (pensado para columnas
   de texto) y la deja usar un ancho propio, más generoso: con solo un
   porcentaje del --content normal (720-820px) cada foto quedaba MÁS CHICA
   que en mobile (donde tiene hasta 320px para ella sola) — al revés de lo
   esperado. Todos los anchos de acá son calc() exacto ("contenedor menos
   los gaps entre fotos, dividido entre cuántas van por fila"), no un
   porcentaje aproximado — así entran siempre, sin que el redondeo del
   navegador empuje una foto de más a la fila de abajo por unos pocos
   píxeles (eso fue lo que pasaba antes con el 30%/45% aproximado). */
@media (min-width: 900px) {
  .gallery__polaroids {
    grid-column: full;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-lg);
    max-width: 700px;
    margin-inline: auto;
  }
  /* 2 por fila: la 3ª pide el mismo ancho exacto, ya no cabe y flex-wrap la
     baja sola a su propia fila, centrada por el justify-content de arriba. */
  .polaroid {
    width: min(320px, (100% - var(--space-lg)) / 2);
  }
}
@media (min-width: 1280px) {
  .gallery__polaroids {
    flex-wrap: nowrap;
    max-width: 1080px;
  }
  /* Acá el cálculo es "entre 3", así que ya no sobra ninguna: nowrap además
     descarta cualquier salto de línea accidental. */
  .polaroid {
    width: min(320px, (100% - 2 * var(--space-lg)) / 3);
    flex: 0 0 auto;
  }
}
/* Rectas siempre — el export no las inclina. El zig-zag alternado que
   había aquí antes (y que solo se corregía al pasar el cursor) era una
   licencia nuestra que no estaba en el diseño; se quita. */
.polaroid {
  margin: 0;
  width: min(100%, 320px);
  background: var(--c-tarjeta);
  padding: 12px 12px 14px;
  box-shadow: 0 12px 28px rgba(53, 43, 33, 0.16);
  cursor: zoom-in;
}

.polaroid:focus-visible {
  outline: 2px solid var(--c-burdeos);
  outline-offset: 3px;
}

.polaroid__img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.polaroid__pie {
  display: block;
  padding-top: 10px;
  font-family: var(--font-body-ui);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--c-tinta-soft);
}

.polaroid__title {
  display: block;
  color: var(--c-tinta);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  font-size: 0.68rem;
}

.polaroid__desc {
  display: block;
}

/* Ubicaciones — un bloque por lugar, cada uno con su grabado a plumilla. */
/* "Detalles" (encima del h2 "del Evento") no es el eyebrow genérico del
   resto del theme (Raleway, mayúsculas, chico): acá el export lo pone en
   Playfair Display, caja normal, 24px — solo dentro de esta sección. */
.venues .eyebrow {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 2px;
}

.venues__bloque {
  margin-top: var(--space-xl);
}

.venues__bloque:first-of-type {
  margin-top: var(--space-md);
}

/* Ícono según el tipo de ubicación (Ceremonia/Recepción) — el mockup de
   Claude Design no define dónde va en finca (nunca existió en ese diseño),
   así que se muestra encima del título, mismo criterio que otras plantillas
   que sí lo tienen junto al nombre del lugar. No aparece si el organizador
   elige "Sin ícono". */
.venues__icono {
  display: flex;
  justify-content: center;
  color: var(--c-vino-link);
  margin: 0 0 10px;
}

.venues__kind {
  font-size: 56px;
  color: var(--c-vino-link);
  margin: 0 0 18px;
}

/* El grabado es ilustración: va en oro y no compite con el texto. Ancho fijo
   (no un porcentaje con tope) — calca las medidas reales del export
   (313×229 / 313×234), altura libre según la proporción real de cada foto. */
.venues__grabado {
  width: 313px;
  max-width: 88%;
  margin: 0 auto 24px;
}

.venues__place {
  font-family: var(--font-body-content);
  font-weight: 400;
  font-size: 42px;
  line-height: 1.15;
  color: var(--c-tinta);
  margin: 0 0 14px;
}

.venues__data {
  font-family: var(--font-body-content);
  font-size: 22px;
  line-height: 1.4;
  color: var(--c-tinta);
  max-width: 280px;
  margin: 0 auto 16px;
}

.venues__hora {
  font-family: var(--font-body-content);
  font-size: 38px;
  color: var(--c-tinta);
  margin: 0 0 22px;
}

/* Botón propio: el .btn compartido es chico y en versalitas (pensado para
   CTAs cortos como "Copiar"); acá el export pide caja normal, más grande y
   con más aire — se pisa lo necesario sin dejar de heredar el color sólido
   burdeos de .btn--solid. */
.venues__cta {
  font-family: var(--font-body-ui);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: normal;
  text-transform: none;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 12px;
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
}

/* Dress code — etiqueta grande y una línea por público. */
/* El grabado de la esquina ocupa el pie derecho, así que la sección reserva
   espacio abajo para que la última línea no se le monte encima. */
.dresscode {
  padding-bottom: calc(var(--space-xl) + 120px);
}

.dresscode__linea {
  font-size: 0.82rem;
  color: var(--c-tinta);
  margin: var(--space-sm) 0 0;
}

.dresscode__linea:first-of-type {
  margin-top: var(--space-lg);
}

.dresscode__nota {
  margin-top: var(--space-md);
}

.dresscode__evitar {
  font-size: 0.72rem;
  color: var(--c-tinta-soft);
  margin: var(--space-lg) 0 0;
}

.dresscode__muestras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.dresscode__muestra {
  width: 64px;
}

.dresscode__chip {
  width: 38px;
  height: 38px;
  margin: 0 auto 8px;
  border-radius: 50%;
  border: 1px solid var(--c-linea);
  position: relative;
  overflow: hidden;
}

/* Diagonal de "evitar": el color se enseña y se tacha a la vez. */
.dresscode__chip::after {
  content: "";
  position: absolute;
  inset: -30%;
  border-top: 1px solid rgba(53, 43, 33, 0.55);
  transform: rotate(45deg);
  transform-origin: center;
}

.dresscode__lab {
  font-family: var(--font-body-ui);
  font-size: 0.62rem;
  line-height: 1.35;
  letter-spacing: var(--track-tight);
  color: var(--c-tinta-soft);
  margin: 0;
}

/* Historia — theme finca.
   Esta hoja es solo la piel del layout "popup": dos polaroids solapadas +
   botón. El timeline numerado (layout "timeline") vive en
   _story-timeline.scss y el contenido del popup en sí (todos los
   capítulos) en _story-modal.scss — cada variante en su propio archivo,
   igual que se hizo con itinerary-structure esta sesión. */
.story__pila {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin: var(--space-lg) 0 var(--space-md);
  min-height: 190px;
}

.story__polaroid {
  margin: 0;
  width: 150px;
  background: var(--c-tarjeta);
  padding: 9px 9px 11px;
  box-shadow: 0 10px 24px rgba(53, 43, 33, 0.18);
  cursor: zoom-in;
}

.story__polaroid:focus-visible {
  outline: 2px solid var(--c-burdeos);
  outline-offset: 3px;
}

/* Se montan una sobre otra, con la segunda desplazada y por encima. */
.story__polaroid:nth-child(1) {
  transform: rotate(-3deg);
}

.story__polaroid:nth-child(2) {
  transform: rotate(2deg) translate(-16px, 26px);
  z-index: 1;
}

.story__polaroid img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.story__cta {
  margin-top: var(--space-md);
}

/* Historia — layout "timeline" (Timeline numerado), theme finca.
   Misma estructura que themes/entrehojas/components/_story.scss
   (.eh-story-timeline): línea punteada central, capítulos alternados a
   izquierda/derecha, numeral gigante decorativo detrás del texto. Clases
   propias (.fc-story-timeline*) para no colisionar con .eh-story-* ni con
   el layout "popup" de este mismo theme (_story.scss/_story-modal.scss).
   Colores/tipografía: los tokens ya establecidos para finca (Playfair para
   numeral/título, Times para cuerpo, --c-tinta-cont para texto de
   contenido — mismo criterio que Itinerario esta sesión). No hay export
   literal de Claude Design para esta variante: finca nunca mostró este
   layout, así que es un puerto de la estructura de entrehojas, no una
   copia de píxeles. */
.fc-story-timeline {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  padding-top: 8px;
  /* .section (theme base) trae text-align:center; acá el default es
     izquierda (mismo criterio que .eh-story-timeline en entrehojas) — solo
     el bloque data-side="right" lo pisa a la derecha, más abajo. */
  text-align: left;
}

.fc-story-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 36px;
  width: 1px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(var(--c-hairline) 0 4px, transparent 4px 11px);
}

.fc-story-timeline__chapter {
  position: relative;
  padding: 0 0 var(--space-xl);
}

.fc-story-timeline__chapter:last-child {
  padding-bottom: 4px;
}

.fc-story-timeline__num {
  position: absolute;
  top: -22px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.6rem;
  line-height: 1;
  color: var(--c-oro-suave);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.fc-story-timeline__chapter[data-side=left] .fc-story-timeline__num {
  right: 6px;
}

.fc-story-timeline__chapter[data-side=right] .fc-story-timeline__num {
  left: 6px;
}

/* Clic para ver la foto en grande: mismo lightbox compartido que ya usan
   las polaroids del layout "popup" (data-lb + #lb/#lb-img, ver
   initLightbox() en finca.js) — no hace falta JS nuevo, solo el atributo
   en el markup (ver component.php). Mismo comportamiento que entrehojas
   (que usa su propio lightbox con zoom), aplicado con el mecanismo que ya
   tiene finca en vez de duplicar uno nuevo. */
.fc-story-timeline__photo {
  position: relative;
  z-index: 1;
  width: 76%;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 20px 40px -26px var(--c-sombra);
  cursor: zoom-in;
}

.fc-story-timeline__photo:focus-visible {
  outline: 2px solid var(--c-burdeos);
  outline-offset: 3px;
}

.fc-story-timeline__chapter[data-side=right] .fc-story-timeline__photo {
  margin-left: auto;
}

.fc-story-timeline__photo img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
}

.fc-story-timeline__copy {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  max-width: 30ch;
}

.fc-story-timeline__chapter[data-side=right] .fc-story-timeline__copy {
  margin-left: auto;
  text-align: right;
}

.fc-story-timeline__year {
  /* .rotulo (_base.scss), no .eyebrow: .eyebrow (.66rem) queda reservado al
     rótulo superior de la sección entera — este es un rótulo por capítulo,
     mismo tamaño que ya usa el resto del theme para ese rol. */
  font-family: var(--font-body-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-tinta-soft);
  margin: 0 0 8px;
}

.fc-story-timeline__caption {
  /* Mismo tamaño que .rec__title/.faq__q: el heading de bloque ya
     establecido en el resto de Finca para este rol (subtítulo de un
     capítulo/pregunta), antes más chico (1.5rem) sin motivo de diseño. */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--c-tinta-cont);
  margin: 0 0 10px;
}

.fc-story-timeline__body {
  /* Igualado a .faq__a: el párrafo largo ya legible del theme (antes .92rem,
     visiblemente más chico que el resto del cuerpo de Finca sin motivo de
     diseño). Fijo en rem como el resto de la tipografía del theme, así que
     se ve igual en mobile/tablet/escritorio sin exagerar en ningún viewport. */
  font-family: var(--font-body-content);
  font-size: 1.07rem;
  line-height: 1.8;
  color: var(--c-tinta-cont);
  margin: 0;
}

/* Historia — popup con todos los capítulos (layout "popup"), theme finca.
   Estructura literal del bloque "HISTORIA MODAL" del export de Claude
   Design (PLANTILLA/finca_nuevo/Invitacion Valentina y Alonso.dc.html,
   líneas 296-312): en mobile es pantalla completa, fondo burdeos sólido,
   sin backdrop-click-to-close (el export tampoco lo tiene, solo el botón
   ×) — a diferencia de .modal-back/.gw-sheet (_modal.scss), que son
   bottom-sheets con backdrop. La adaptación a escritorio (el mockup es
   solo mobile) vive en _desktop.scss.
   z-index: el export usa 90/95 como escala relativa propia del mockup, no
   sirven acá. .modal-back/.gw-sheet de este theme ya usan 400 (subido de
   300, ver _modal.scss) para quedar arriba de .imenu__toggle (340, la
   hamburguesa de modo "web") — el popup de historia necesita lo mismo:
   reportado en vivo, la hamburguesa quedaba flotando sobre este popup y
   tapaba su botón de cerrar. 420 lo deja arriba de esos 400, mismo criterio
   que .lb (lightbox) en _extras.scss. */
.story-modal {
  position: fixed;
  inset: 0;
  z-index: 420;
  background: var(--c-burdeos);
  display: none;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.story-modal.on {
  display: flex;
  opacity: 1;
}

.story-modal__close {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--c-tarjeta);
  cursor: pointer;
}

.story-modal__close svg {
  width: 22px;
  height: 22px;
}

.story-modal__head {
  text-align: center;
  padding: 64px 24px 24px;
}

.story-modal__eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  color: var(--c-tarjeta);
  margin: 0;
}

.story-modal__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.5rem;
  color: var(--c-tarjeta);
  margin: 0;
}

.story-modal__card {
  background: var(--c-tarjeta);
  border-radius: var(--radius-card);
  margin: 0 20px 40px;
  padding: 36px 28px;
  text-align: center;
}

.story-modal__chapter {
  margin-bottom: var(--space-lg);
}

.story-modal__chapter:last-child {
  margin-bottom: 0;
}

.story-modal__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  color: var(--c-tinta-cont);
  margin: 0 0 16px;
}

.story-modal__caption {
  font-family: var(--font-body-ui);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-tinta-cont);
  margin: 0 0 16px;
}

.story-modal__body {
  font-family: var(--font-body-ui);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-tinta-cont);
  margin: 0;
  white-space: pre-line;
}

@media (prefers-reduced-motion: reduce) {
  .story-modal {
    transition: none;
  }
}
/* Itinerario: geometría de las 4 estructuras (compartida) + piel del theme. */
/* ═══════════════════════════════════════════════════════════════════════════
   Itinerario — geometría de las 4 estructuras visuales del selector del panel
   (linear-left, linear-right, linear-alternate, list).

   Igual que components/_menu.scss: acá vive el COMPORTAMIENTO/geometría
   (posición de línea, alternancia, layout de lista); cada theme repinta
   encima fijando las custom properties de abajo con su propia paleta y
   tipografía. Ningún valor de marca en este archivo: los defaults son
   neutros a propósito.
   ═══════════════════════════════════════════════════════════════════════════ */
.itinerary-structure {
  /* Ganchos de repintado por theme. */
  --itin-max-width: 480px;
  --itin-gap-x: 22px;
  --itin-block-gap: 48px;
  --itin-step-gap: 26px;
  --itin-line-color: rgba(0, 0, 0, .15);
  --itin-line-width: 1px;
  --itin-dot-size: 11px;
  --itin-dot-color: var(--itin-line-color);
  --itin-icon-size: 44px;
  --itin-icon-bg: transparent;
  --itin-icon-border: 1px solid rgba(0, 0, 0, .15);
  --itin-icon-color: inherit;
  /* Separador opcional bajo cada paso (linear-left/right), no last-child. */
  --itin-body-divider: none;
  --itin-body-divider-pad: 0;
  /* Posición de la línea en linear-left/right: por defecto, centro del ícono;
     un theme puede fijarla aparte si su diseño histórico no cae en la mitad exacta. */
  --itin-line-offset: calc(var(--itin-icon-size) / 2);
  --itin-head-align: left;
  --itin-head-gap: 6px;
  --itin-head-title-font: inherit;
  --itin-head-title-size: .92rem;
  --itin-head-title-color: inherit;
  --itin-head-subtitle-font: inherit;
  --itin-head-subtitle-size: .84rem;
  --itin-head-subtitle-color: inherit;
  --itin-head-description-font: inherit;
  --itin-head-description-size: .8rem;
  --itin-head-description-color: inherit;
  --itin-time-font: inherit;
  --itin-time-size: 1.5rem;
  --itin-time-color: inherit;
  --itin-title-font: inherit;
  --itin-title-size: .72rem;
  --itin-title-tracking: .1em;
  --itin-title-color: inherit;
  --itin-place-color: inherit;
  --itin-note-color: inherit;
  --itin-label-font: inherit;
  --itin-label-size: .9rem;
  --itin-label-color: inherit;
  --itin-value-font: inherit;
  --itin-value-size: 1.3rem;
  --itin-value-color: inherit;
  --itin-divider-color: rgba(0, 0, 0, .2);
  max-width: var(--itin-max-width);
  margin: 0 auto;
}

.itinerary-block {
  position: relative;
}

.itinerary-block + .itinerary-block {
  margin-top: var(--itin-block-gap);
}

.itinerary-block:first-child {
  margin-top: var(--itin-block-gap-first, 0);
}

.itinerary-block__head {
  display: flex;
  flex-direction: column;
  gap: var(--itin-head-gap);
  text-align: var(--itin-head-align);
  margin-bottom: 20px;
}

.itinerary-block__title {
  font-family: var(--itin-head-title-font);
  font-size: var(--itin-head-title-size);
  color: var(--itin-head-title-color);
  margin: 0;
}

.itinerary-block__subtitle {
  font-family: var(--itin-head-subtitle-font);
  font-size: var(--itin-head-subtitle-size);
  color: var(--itin-head-subtitle-color);
  margin: 0;
}

.itinerary-block__description {
  font-family: var(--itin-head-description-font);
  font-size: var(--itin-head-description-size);
  color: var(--itin-head-description-color);
  margin: 0;
}

.itinerary-block__steps {
  position: relative;
}

/* ── Contenido común de un paso (linear-left/right/alternate) ───────────── */
.itinerary-step__time {
  font-family: var(--itin-time-font);
  font-size: var(--itin-time-size);
  color: var(--itin-time-color);
  line-height: 1;
  margin: 0;
}

.itinerary-step__title {
  font-family: var(--itin-title-font);
  font-size: var(--itin-title-size);
  letter-spacing: var(--itin-title-tracking);
  text-transform: uppercase;
  color: var(--itin-title-color);
  margin: 7px 0 0;
}

.itinerary-step__place {
  font-size: 0.82rem;
  color: var(--itin-place-color);
  margin: 10px 0 0;
  line-height: 1.45;
}

/* Variante con ícono fijo de plantilla (ver itinerary_render_blocks() —
   $renderPlaceIcon): el ícono va en la misma línea que el nombre del lugar,
   siempre a su izquierda y pegado a él (.itinerary-step__place-name es un
   solo bloque inline, así que un text-align heredado lo alinea como unidad
   sin separar ícono de texto). La dirección va en su propia línea debajo,
   sin indentar bajo el ícono. */
.itinerary-step__place-name {
  display: inline-flex;
  align-items: center;
  gap: var(--itin-place-icon-gap, 7px);
}

.itinerary-step__place-icon {
  flex: 0 0 auto;
  width: var(--itin-place-icon-size, 14px);
  height: var(--itin-place-icon-size, 14px);
  color: var(--itin-place-icon-color, currentColor);
}

.itinerary-step__place-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.itinerary-step__address {
  display: block;
  opacity: 0.85;
  margin-top: 2px;
}

.itinerary-step__note {
  font-size: 0.8rem;
  color: var(--itin-note-color);
  margin: 9px 0 0;
  line-height: 1.5;
}

/* ── linear-left / linear-right: línea a un costado, ícono como marcador ── */
.itinerary-structure--linear-left .itinerary-block__steps,
.itinerary-structure--linear-right .itinerary-block__steps {
  position: relative;
}

.itinerary-structure--linear-left .itinerary-block__steps::before,
.itinerary-structure--linear-right .itinerary-block__steps::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: var(--itin-line-width);
  background: var(--itin-line-color);
}

.itinerary-structure--linear-left .itinerary-block__steps::before {
  left: var(--itin-line-offset);
}

.itinerary-structure--linear-right .itinerary-block__steps::before {
  right: var(--itin-line-offset);
}

.itinerary-structure--linear-left .itinerary-step,
.itinerary-structure--linear-right .itinerary-step {
  position: relative;
  padding-bottom: var(--itin-step-gap);
}

.itinerary-structure--linear-left .itinerary-step:last-child,
.itinerary-structure--linear-right .itinerary-step:last-child {
  padding-bottom: 0;
}

.itinerary-structure--linear-left .itinerary-step {
  padding-left: calc(var(--itin-icon-size) + var(--itin-gap-x));
  text-align: left;
}

.itinerary-structure--linear-right .itinerary-step {
  padding-right: calc(var(--itin-icon-size) + var(--itin-gap-x));
  text-align: right;
}

.itinerary-structure--linear-left .itinerary-step__icon,
.itinerary-structure--linear-right .itinerary-step__icon {
  position: absolute;
  z-index: 1;
  top: 0;
  width: var(--itin-icon-size);
  height: var(--itin-icon-size);
  border-radius: 50%;
  background: var(--itin-icon-bg);
  border: var(--itin-icon-border);
  color: var(--itin-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.itinerary-structure--linear-left .itinerary-step__icon {
  left: 0;
}

.itinerary-structure--linear-right .itinerary-step__icon {
  right: 0;
}

/* Decoración fija en el hueco entre un paso y el siguiente (no se pinta tras
   el último paso del bloque, ver itinerary_render_blocks()). Centrada en el
   hueco — a igual distancia del ícono de arriba y del de abajo — sin
   importar cuántos pasos tenga el bloque. */
.itinerary-structure--linear-left .itinerary-step__gap-deco,
.itinerary-structure--linear-right .itinerary-step__gap-deco {
  position: absolute;
  bottom: calc(var(--itin-step-gap) / 2);
  width: var(--itin-gap-deco-size, 26px);
  height: auto;
  pointer-events: none;
  color: var(--itin-gap-deco-color, var(--itin-line-color));
}

.itinerary-structure--linear-left .itinerary-step__gap-deco {
  left: var(--itin-line-offset);
  transform: translate(-50%, 50%);
}

.itinerary-structure--linear-right .itinerary-step__gap-deco {
  right: var(--itin-line-offset);
  transform: translate(50%, 50%);
}

.itinerary-step__gap-deco svg {
  width: 100%;
  height: auto;
  display: block;
}

.itinerary-structure--linear-left .itinerary-step__icon svg,
.itinerary-structure--linear-right .itinerary-step__icon svg,
.itinerary-structure--linear-left .itinerary-step__icon img,
.itinerary-structure--linear-right .itinerary-step__icon img {
  width: 50%;
  height: 50%;
}

.itinerary-structure--linear-right .itinerary-step__place {
  margin-left: auto;
}

.itinerary-structure--linear-left .itinerary-step:not(:last-child) .itinerary-step__body,
.itinerary-structure--linear-right .itinerary-step:not(:last-child) .itinerary-step__body {
  border-bottom: var(--itin-body-divider);
  padding-bottom: var(--itin-body-divider-pad);
}

/* ── linear-alternate: línea centrada, hitos alternan de lado ────────────── */
.itinerary-structure--linear-alternate .itinerary-block__steps {
  position: relative;
}

.itinerary-structure--linear-alternate .itinerary-block__steps::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: var(--itin-line-width);
  margin-left: calc(var(--itin-line-width) / -2);
  background: var(--itin-line-color);
}

.itinerary-structure--linear-alternate .itinerary-step {
  position: relative;
  width: 50%;
  padding: 0 var(--itin-gap-x) var(--itin-step-gap);
}

.itinerary-structure--linear-alternate .itinerary-step:last-child {
  padding-bottom: 0;
}

.itinerary-structure--linear-alternate .itinerary-step:nth-child(odd) {
  margin-left: 50%;
  text-align: left;
}

.itinerary-structure--linear-alternate .itinerary-step:nth-child(even) {
  margin-left: 0;
  text-align: right;
}

.itinerary-structure--linear-alternate .itinerary-step::before {
  content: "";
  position: absolute;
  top: 0.45em;
  width: var(--itin-dot-size);
  height: var(--itin-dot-size);
  border-radius: 50%;
  background: var(--itin-dot-color);
}

.itinerary-structure--linear-alternate .itinerary-step:nth-child(odd)::before {
  left: calc(var(--itin-dot-size) / -2);
}

.itinerary-structure--linear-alternate .itinerary-step:nth-child(even)::before {
  right: calc(var(--itin-dot-size) / -2);
}

/* En esta estructura el marcador es siempre el punto de la línea: el badge de
   ícono no aplica acá (ver itinerary_render_blocks(), que no lo emite). */
/* Decoración del hueco (ver arriba): sobre la línea central, pegada al lado
   del paso que la originó — mismo criterio que el punto de arriba. */
.itinerary-structure--linear-alternate .itinerary-step__gap-deco {
  position: absolute;
  bottom: calc(var(--itin-step-gap) / 2);
  width: var(--itin-gap-deco-size, 26px);
  height: auto;
  pointer-events: none;
  color: var(--itin-gap-deco-color, var(--itin-line-color));
}

.itinerary-structure--linear-alternate .itinerary-step:nth-child(odd) .itinerary-step__gap-deco {
  left: 0;
  transform: translate(-50%, 50%);
}

.itinerary-structure--linear-alternate .itinerary-step:nth-child(even) .itinerary-step__gap-deco {
  right: 0;
  transform: translate(50%, 50%);
}

/* ── list: sin línea, texto centrado, separador corto entre pasos ───────── */
.itinerary-structure--list .itinerary-block__head {
  text-align: center;
  align-items: center;
}

.itinerary-structure--list .itinerary-step {
  text-align: center;
  padding: 18px 0;
}

.itinerary-structure--list .itinerary-step:first-child {
  padding-top: 0;
}

.itinerary-structure--list .itinerary-step:last-child {
  padding-bottom: 0;
}

.itinerary-structure--list .itinerary-step:not(:last-child)::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--itin-divider-color);
  margin: 18px auto 0;
}

.itinerary-structure--list .itinerary-step__label {
  font-family: var(--itin-label-font);
  font-size: var(--itin-label-size);
  color: var(--itin-label-color);
  margin: 0 0 4px;
}

.itinerary-structure--list .itinerary-step__value {
  font-family: var(--itin-value-font);
  font-size: var(--itin-value-size);
  color: var(--itin-value-color);
  margin: 0;
}

.itinerary-structure--list .itinerary-step__place,
.itinerary-structure--list .itinerary-step__address {
  font-size: 0.82rem;
  color: var(--itin-place-color);
  opacity: 0.85;
  margin: 6px 0 0;
}

/* Itinerario — piel de finca.
   La geometría de las 4 estructuras vive en la base compartida
   components/_itinerary-structure.scss; acá solo color, tipografía y medidas.
   Valores portados 1:1 de la línea burdeos con hitos en zig-zag que este theme
   ya tenía, para que 'linear-alternate' (default histórico) se vea igual.
   'linear-left'/'linear-right' comparten el mismo tratamiento (fondo,
   espaciados, tipografía, línea/puntos) — son combinaciones nuevas sin
   diseño propio, así que siguen el mismo lenguaje visual que 'linear-alternate'. */
/* Fuentes: mismo lenguaje tipográfico en las 4 estructuras (nació con
   "Lista", ver más abajo — Times New Roman/Playfair Display/Raleway no se
   usan en el resto del theme, por eso viven acá y no en _tokens.scss).
   Declaradas en .itinerary (la <section> completa) y no en .itinerary-structure
   porque el encabezado (.eyebrow/.section__title) es hermano de
   .itinerary-structure, no descendiente — necesitan un ancestro común para
   heredar la misma variable. */
.itinerary {
  --itin-font-playfair: "Playfair Display", serif;
  --itin-font-times: "Times New Roman", Times, serif;
  --itin-font-raleway: "Raleway", sans-serif;
}

/* La ventana del itinerario NO sangra hasta el borde de la banda (a
   diferencia del resto de .grabado--cabecera del theme, pensados para eso —
   ver _base.scss: "el margen negativo lo devuelve al borde de la banda"):
   el export (línea 117-119) deja el padding de la sección limpio (88px ≈
   --space-xl, sin cancelarlo) y solo 20px de margen inferior antes del
   título. Medido en vivo: con el margin-top negativo del default, el hueco
   entre el borde superior de la sección y la ventana quedaba en 0px. */
.itinerary > .grabado--cabecera {
  margin-top: 0;
  margin-bottom: 20px;
}

.itinerary-structure {
  --itin-block-gap: var(--space-xl);
  --itin-block-gap-first: var(--space-lg);
  --itin-gap-x: var(--space-md);
  --itin-step-gap: var(--space-lg);
  --itin-line-color: var(--c-burdeos);
  --itin-line-width: 2px;
  --itin-dot-size: 11px;
  --itin-dot-color: var(--c-burdeos);
  /* Finca nunca ilustra el ícono elegido por paso (solo pinta el punto de la
     línea, ver itinerary_render_blocks()): un tamaño de badge de 44px (el
     default compartido, pensado para temas con ícono real) desperdicia
     espacio de línea que acá nadie ocupa. Un valor menor deja la línea/los
     puntos más cerca del contenido en 'linear-left'/'linear-right'. */
  --itin-icon-size: 24px;
  --itin-head-align: center;
  --itin-head-title-color: var(--c-tinta);
  --itin-head-title-size: .92rem;
  --itin-head-subtitle-color: var(--c-tinta);
  --itin-head-subtitle-size: .84rem;
  --itin-head-description-color: var(--c-tinta-soft);
  --itin-head-description-size: .76rem;
  /* Igualado al tamaño de "Lista" (--itin-value-size/--itin-label-size más
     abajo, literales del export: 38px/24px) — antes eran 1.4rem/.78rem
     (22px/12px), visiblemente más chicos que "Lista" sin motivo de diseño.
     'linear-left'/'linear-right' tienen columna completa (verificado en vivo
     con el contenido real de este evento: 0px de overflow desde 320px de
     viewport), así que usan este tamaño tal cual; 'linear-alternate' lo
     reduce más abajo solo donde su columna angosta (50%) lo exige. */
  --itin-time-font: var(--itin-font-times);
  --itin-time-size: 2.375rem;
  --itin-time-color: var(--c-tinta);
  --itin-title-font: var(--itin-font-times);
  --itin-title-size: 1.5rem;
  --itin-title-tracking: 0;
  --itin-title-color: var(--c-tinta-soft);
  --itin-place-color: var(--c-tinta-soft);
  /* Mismo color que "Black tie" en "Lista" (--c-tinta-cont, ver
     .itinerary-step__value--note más abajo): ambos leen el mismo campo
     (`note`) cuando un paso no tiene hora, por ej. "Dress code". */
  --itin-note-color: var(--c-tinta-cont);
  --itin-label-font: var(--itin-font-times);
  --itin-label-color: var(--c-tinta);
  --itin-value-font: var(--itin-font-times);
  --itin-value-color: var(--c-tinta);
  --itin-divider-color: var(--c-linea);
}

/* Título/subtítulo/descripción de bloque: mismo estilo en las 4 estructuras
   (título Times New Roman bold subrayado en vino, subtítulo Playfair Display
   bold, descripción Times New Roman entre paréntesis — los pone el CSS, no el
   admin, así el campo de texto sigue siendo plano en el panel). Tamaños,
   colores y márgenes son literales del bloque "ITINERARIO" del export de
   Claude Design (PLANTILLA/finca_nuevo/Invitacion Valentina y Alonso.dc.html,
   líneas 121-146): 28px/24px/20px, sin tracking, y #4D3500 (--c-tinta-cont,
   ya documentado en _tokens.scss como "texto de contenido: itinerario…") en
   vez del --c-tinta genérico — mismo error que ya se había cometido y
   corregido en RSVP/FAQ/modal/goodwishes (ver comentario en _rsvp.scss). */
.itinerary-block__head {
  /* Los 3 elementos ya declaran su propio margin-bottom exacto (abajo): el
     gap/margin-bottom del layout base (_itinerary-structure.scss) sumaría un
     espaciado extra que el export no tiene. */
  gap: 0;
  margin-bottom: 0;
}

.itinerary-block__title {
  font-family: var(--itin-font-times);
  font-weight: 700;
  text-decoration: underline;
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.75rem;
  color: var(--c-burdeos);
  margin: 0 0 0 0;
}

.itinerary-block__subtitle {
  font-family: var(--itin-font-playfair);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.5rem;
  color: var(--c-tinta-cont);
  margin: 0 0 8px;
}

/* Bloque sin descripción (ej. "Ceremonia y Recepción"): el subtítulo es el
   último elemento de la cabecera y va seguido directo de los pasos, con más
   aire (28px en el export) en vez de los 8px que separan subtítulo↔descripción. */
.itinerary-block__subtitle:last-child {
  margin-bottom: 28px;
}

.itinerary-block__description {
  font-family: var(--itin-font-times);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 1.25rem;
  color: var(--c-tinta-cont);
  margin: 0;
}

.itinerary-block__description::before {
  content: "(";
}

.itinerary-block__description::after {
  content: ")";
}

/* ═══ Común a las 3 estructuras con línea (izquierda / derecha / intercalado) ═══ */
/* Línea 1px más gruesa y columna con menos padding lateral (junto con
   --itin-icon-size de arriba, deja la línea/los puntos a una distancia
   razonable del texto en vez del hueco pensado para un badge de ícono). */
.itinerary-structure--linear-left,
.itinerary-structure--linear-right,
.itinerary-structure--linear-alternate {
  --itin-line-width: 3px;
  --itin-gap-x: 18px;
}

/* Más aire entre la cabecera del bloque y el primer punto (quedaba pegado). */
.itinerary-structure--linear-left .itinerary-block__steps,
.itinerary-structure--linear-right .itinerary-block__steps,
.itinerary-structure--linear-alternate .itinerary-block__steps {
  padding-top: 18px;
}

.itinerary-structure--linear-left .itinerary-block__steps::before,
.itinerary-structure--linear-right .itinerary-block__steps::before,
.itinerary-structure--linear-alternate .itinerary-block__steps::before {
  top: 18px;
}

/* Hora y título del paso: mismo tratamiento en las 3 estructuras (negrita la
   hora, tracking limpio) — el tamaño base ya viene de --itin-time-size/
   --itin-title-size (arriba), igualado al de "Lista" donde el ancho lo
   permite. */
.itinerary-structure--linear-left .itinerary-step__time,
.itinerary-structure--linear-right .itinerary-step__time,
.itinerary-structure--linear-alternate .itinerary-step__time {
  font-weight: 700;
}

.itinerary-structure--linear-left .itinerary-step__title,
.itinerary-structure--linear-right .itinerary-step__title,
.itinerary-structure--linear-alternate .itinerary-step__title {
  margin-top: 2px;
  text-transform: none;
}

.itinerary-structure--linear-left .itinerary-step__place,
.itinerary-structure--linear-right .itinerary-step__place,
.itinerary-structure--linear-alternate .itinerary-step__place {
  font-family: var(--itin-font-times);
}

/* El campo `note` hace de valor cuando un paso no tiene hora (ej. "Dress
   code" → "Black tie"): mismo tamaño que "Black tie" en "Lista" (2rem, ver
   .itinerary-step__value--note) para que no quede chico al lado de un título
   ya agrandado arriba — 'linear-left'/'linear-right' lo usan tal cual
   (columna completa); 'linear-alternate' lo escalona más abajo. */
.itinerary-structure--linear-left .itinerary-step__note,
.itinerary-structure--linear-right .itinerary-step__note {
  font-family: var(--itin-font-raleway);
  font-size: 2rem;
}

.itinerary-structure--linear-alternate .itinerary-step__note {
  font-family: var(--itin-font-raleway);
}

/* 'linear-alternate': columna angosta (50% del bloque, a diferencia de
   'linear-left'/'linear-right' que usan la columna completa) — el tamaño de
   "Lista" (38px/24px) no entra en una sola línea sin cruzar la línea guía
   por debajo de los ~720px de columna que da la sección en escritorio (ver
   _desktop.scss, que ensancha esta estructura ahí y restaura el tamaño
   completo). Primer intento: achicar todo para que quepa en una línea
   (14px/9.5px) — se veía chico e ilegible (reportado en vivo). Segundo
   intento, el actual: la HORA es corta ("5:00 pm") y entra igual de grande
   en una sola línea; el TÍTULO es el que no entra ("Ceremonia Religiosa:") —
   así que se le permite pasar a 2 líneas (white-space:normal, mismo patrón
   ya usado por .itinerary-block__title con textos largos) en vez de forzarlo
   a un tamaño diminuto. Cada valor probado en vivo con Playwright:
     <600px (mobile)  → hora 24px (0px overflow desde 360px; nowrap),
                         título 15px (envuelve a 2 líneas, no desborda).
     600-899px        → hora 28px (0px overflow desde 390px), título 17px. */
.itinerary-structure--linear-alternate .itinerary-step__time {
  font-size: 24px;
  letter-spacing: 0;
}

.itinerary-structure--linear-alternate .itinerary-step__title {
  font-size: 15px;
  white-space: normal;
  line-height: 1.25;
}

.itinerary-structure--linear-alternate .itinerary-step__place {
  font-size: 0.8rem;
  opacity: 0.85;
  margin-top: 4px;
}

/* Mismo criterio que arriba para el campo `note` (ej. "Black tie") — probado
   sin overflow en las 2 medidas en todo el rango 320-768px. */
.itinerary-structure--linear-alternate .itinerary-step__note {
  font-size: 20px;
}

@media (min-width: 600px) {
  .itinerary-structure--linear-alternate .itinerary-step__time {
    font-size: 28px;
  }
  .itinerary-structure--linear-alternate .itinerary-step__title {
    font-size: 17px;
  }
  .itinerary-structure--linear-alternate .itinerary-step__note {
    font-size: 24px;
  }
}
/* Hora (+ a.m./p.m.) y título del paso en una sola línea, en las 3
   estructuras con línea — antes se partían en 2 líneas. */
.itinerary-step__time,
.itinerary-step__title {
  white-space: nowrap;
}

/* ═══ 'linear-left' / 'linear-right' ═══ */
/* Finca nunca ilustra el ícono elegido (ver component.php, $renderIcon =
   null): sin esto la línea quedaba sin ningún marcador. Mismo punto que ya
   usa 'linear-alternate'. Centrado en el grosor de la línea (no solo en el
   offset), igual que ya hace el punto de 'linear-alternate'. */
.itinerary-structure--linear-left .itinerary-step::before,
.itinerary-structure--linear-right .itinerary-step::before {
  content: "";
  position: absolute;
  top: 0.45em;
  width: var(--itin-dot-size);
  height: var(--itin-dot-size);
  border-radius: 50%;
  background: var(--itin-dot-color);
}

.itinerary-structure--linear-left .itinerary-step::before {
  left: calc(var(--itin-line-offset) - var(--itin-dot-size) / 2);
}

.itinerary-structure--linear-right .itinerary-step::before {
  right: calc(var(--itin-line-offset) - var(--itin-dot-size) / 2);
}

/* La línea compartida se posiciona por su borde izquierdo/derecho, no por su
   centro (a diferencia de 'linear-alternate', que sí se centra con
   margin-left negativo) — quedaba corrida respecto al punto, que sí está
   centrado en --itin-line-offset. Misma corrección que ya usa 'alternate'. */
.itinerary-structure--linear-left .itinerary-block__steps::before {
  left: calc(var(--itin-line-offset) - var(--itin-line-width) / 2);
}

.itinerary-structure--linear-right .itinerary-block__steps::before {
  right: calc(var(--itin-line-offset) - var(--itin-line-width) / 2);
}

/* Fondo de pared — se muestra en las 4 estructuras (el component.php solo lo
   omite si el evento no tiene marca.pared_itinerario subida). */
.itinerary--pared {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Encabezado de la sección ("Itinerario" + etiqueta superior): mismo estilo
   en las 4 estructuras, solo dentro de esta sección — .section__title/
   .eyebrow son clases genéricas que usan todas las secciones de Finca, no se
   tocan fuera de acá. */
.itinerary .eyebrow,
.itinerary .section__title {
  font-family: var(--itin-font-playfair);
  color: var(--c-tinta);
}

/* Acorta a pedido el espacio entre el título "Itinerario" y el primer
   bloque (p. ej. "Welcome Party"): pisa solo acá el margin-bottom genérico
   de .section__head (_base.scss), que sigue aplicando sin cambios al resto
   de las secciones. */
.itinerary .itinerary__head {
  margin-bottom: 0;
}

/* ═══ 'list' ═══ */
.itinerary-structure--list {
  --itin-label-color: var(--c-tinta);
  --itin-value-color: var(--c-tinta);
  --itin-divider-color: var(--c-tinta-cont);
}

/* Etiqueta/valor del paso: propios de "Lista" (las otras 3 estructuras usan
   .itinerary-step__time/__title en vez de __label/__value — ver
   itinerary_render_blocks()), pero con la misma familia tipográfica. Tamaños
   y márgenes literales del export (ver comentario arriba de
   .itinerary-block__title): label/value 24px/38px, separador de paso 36px
   con margen 20px, "Black tie" (valor sin hora) en Raleway 32px #4D3500. */
.itinerary-structure--list .itinerary-step__label {
  font-family: var(--itin-font-times);
  font-size: 1.5rem;
  /* Menos separación que el margin-bottom:4px genérico de
     _itinerary-structure.scss, a pedido explícito (mismo criterio que el
     margin-top del título de paso en linear-left/right/alternate, más
     arriba en este archivo). */
  margin: 0 0 2px;
}

.itinerary-structure--list .itinerary-step__value {
  font-family: var(--itin-font-times);
  font-size: 2.375rem;
}

/* Paso sin hora (ej. "Dress code: Black tie"): el valor viene de la nota, no
   de la hora — ver itinerary_render_blocks() ($valueFromNote). */
.itinerary-structure--list .itinerary-step__value--note {
  font-family: var(--itin-font-raleway);
  font-size: 2rem;
  color: var(--c-tinta-cont);
}

.itinerary-structure--list .itinerary-step {
  padding: 10px 0;
}

.itinerary-structure--list .itinerary-step:not(:last-child)::after {
  width: 36px;
  background: var(--c-tinta-cont);
  opacity: 1;
  margin: 20px auto 0;
}

/* Separador entre bloques (marca.separador_itinerario, ver component.php,
   $blockGapDecoration): tamaño natural del archivo (104×104, sin agrandar).
   Margen reducido a pedido para acortar el espacio entre bloques. */
.itinerary-block__gap-deco {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}

.itinerary-block__gap-deco img {
  width: 104px;
  height: 104px;
  display: block;
}

/* Recomendaciones — única banda con fondo sólido oliva de toda la
   invitación (ver .band--oliva en _base.scss). El H2 de sección se repinta
   como "marca de agua" (crema, muy translúcido) y cada subtítulo de bloque
   va en dorado — el único lugar donde aparece ese color. */
/* El grabado de la finca encabeza la banda a tamaño fijo (no "cover"): en
   móvil el propio ancho del viewport lo recorta por los costados y solo se
   ve la parte central, y desde 586px de ancho se lee entero. El padding
   superior reserva su alto (32px de aire + 264px de imagen) para que el
   título no se le monte. Pisa el fondo plano de .band--oliva, que se declara
   antes en la cascada (_base.scss). */
.recommendations {
  background-color: var(--c-oliva);
  background-image: url("../img/finca/recomendaciones-ornamento.png");
  background-repeat: no-repeat;
  background-position: top 32px center;
  background-size: 586px 264px;
  padding-top: 296px;
}

.recommendations .section__title {
  color: var(--c-papel);
  opacity: 0.4;
}

/* Los enlaces de la banda oliva van en crema y NO cambian al visitarse: el
   burdeos de .link (pensado para las bandas claras) se pierde sobre el oliva
   y el morado de :visited del navegador rompería la paleta. */
.recommendations .link,
.recommendations .link:visited,
.recommendations .link:hover,
.recommendations .link:active {
  color: var(--c-papel);
}

/* El hairline compartido usa --c-linea (oscuro) y 90px de ancho: sobre oliva
   sería invisible además de no calzar con la medida del export (47px). */
.recommendations .hairline {
  width: 47px;
  margin: 36px auto;
  background: var(--c-papel);
}

.rec__bloque {
  margin-top: var(--space-md);
}

.rec__bloque:first-of-type {
  margin-top: var(--space-lg);
}

/* El título de cada bloque en Playfair Display dorado — distinto del cuerpo
   en Raleway que lo responde. */
.rec__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--c-oliva-dorado);
  margin: 0 0 var(--space-md);
}

/* ── kind: list ──────────────────────────────────────────────────────────── */
.rec__lista {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 32ch;
  font-family: var(--font-body-ui);
  font-size: 1.07rem;
  color: var(--c-papel);
}

/* El export separa los renglones con <br> dentro de un solo bloque —
   nuestro markup usa <li>, así que el espacio entre líneas lo da solo el
   line-height (igual de generoso), sin sumarle además un margin-bottom. */
.rec__lista li {
  line-height: 2.2;
}

/* Un elemento con url pero "mostrar como vínculo: No" sigue siendo un <a>
   clickeable, pero no debe heredar el azul/subrayado por defecto del
   navegador: se ve como el texto plano del resto de la lista. */
.rec__enlace-plano {
  color: inherit;
  text-decoration: none;
}

.rec__lista--left {
  text-align: left;
}

.rec__lista--center {
  text-align: center;
}

.rec__lista--right {
  text-align: right;
}

/* La viñeta solo tiene sentido con el texto a la izquierda; a centro o
   derecha se ve igual que los antiguos bloques de enlaces (sin viñeta). */
.rec__lista--left li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 4px;
}

.rec__lista--left li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--c-papel);
}

.rec__lista--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-sm);
}

/* ── kind: contact ───────────────────────────────────────────────────────── */
.rec__contacto-nombre {
  font-family: var(--font-body-ui);
  font-size: 1.07rem;
  line-height: 2.2;
  color: var(--c-papel);
  margin: 0;
}

.rec__contacto-tel {
  font-family: var(--font-body-ui);
  font-size: 1.07rem;
  line-height: 2.2;
  color: var(--c-papel);
  margin: 0;
}

/* ── kind: text ──────────────────────────────────────────────────────────── */
.rec__texto {
  font-family: var(--font-body-ui);
  font-size: 1.07rem;
  line-height: 1.7;
  color: var(--c-papel);
}

/* ═══ SIN NIÑOS ═══════════════════════════════════════════════════════════
   Aviso breve: rótulo + título + un párrafo, sin grabado propio. Reutiliza
   .section__head / .eyebrow / .section__title / .parrafo de _base.scss, así
   que no necesita casi nada propio. */
.notchildren .parrafo {
  margin-top: var(--space-md);
}

/* Preguntas frecuentes — cada bloque separado por una línea corta y centrada
   (.faq__divider), como el resto de Finca (Recomendaciones usa el mismo
   recurso vía .hairline).

   .section es display:grid (ver _base.scss), y en grid los márgenes de
   hermanos NO colapsan. Por eso el espacio entre bloques lo pone SOLO el
   divider (margin arriba y abajo, iguales) — si .faq__item también trajera
   su propio margin-top, se sumaría en vez de colapsar y el espacio de abajo
   del divider quedaría el doble que el de arriba. */
.faq .section__title {
  color: var(--c-oliva);
}

.faq__item:first-of-type {
  margin-top: var(--space-lg);
}

.faq__divider {
  width: 47px;
  height: 1px;
  margin: 36px auto;
  border: 0;
  background: var(--c-separador);
}

/* La pregunta en didona, la respuesta en Raleway — mismo contraste que usa
   Recomendaciones, para que las dos secciones se lean como una familia. */
.faq__q {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.3;
  color: var(--c-tinta-cont);
  margin: 0 0 var(--space-sm);
}

.faq__a {
  font-family: var(--font-body-ui);
  font-size: 1.07rem;
  line-height: 1.8;
  color: var(--c-tinta-cont);
  width: 100%;
  padding: 0 44px;
}
.faq__a.parrafo {
  max-width: none;
  margin: 0;
}

/* Variante accordion: acá .faq__a es el <div id="faq-panel-…"> que envuelve
   un <p class="parrafo"> APARTE (distinto del caso "plain" de arriba, donde
   .faq__a es directamente el <p>) — la tipografía de la regla de arriba no
   llegaba por herencia porque .parrafo (_base.scss) ya trae su propio
   font-family/font-size/line-height/color explícitos en ese <p>, que le
   ganan a lo heredado del div contenedor (medido en vivo: 15.2px Times New
   Roman en vez de los 17.12px Raleway que .faq__a sí tenía). Se repiten acá
   los mismos valores literales — no "inherit": el selector .faq__a.parrafo
   de arriba TAMBIÉN matchea en "plain" sobre el mismo elemento, y un
   font-size:inherit ahí heredaría del padre real del nodo en vez del
   1.07rem que esa regla ya declara, rompiendo el caso que sí funcionaba. */
.faq__a .parrafo {
  font-family: var(--font-body-ui);
  font-size: 1.07rem;
  line-height: 1.8;
  color: var(--c-tinta-cont);
  max-width: none;
  margin: 0;
}

/* Solo la respuesta de "accordion" va justificada — ni el título "FAQ"
   (.section__title, centrado como siempre) ni la pregunta (.faq__q, sigue a
   la izquierda) ni la variante "plain" se tocan. */
.faq--accordion .faq__a .parrafo {
  text-align: justify;
}

/* Variante accordion: la pregunta es un botón con un ícono +/- que gira hacia
   "-" al abrirse, y la respuesta se pliega animando su altura real (la mide
   dev/js/components/faq.js con scrollHeight), no un tope arbitrario como
   max-height:60vh. El JS pone .faq-js-ready al arrancar — sin JS, la
   respuesta queda simplemente visible.
   Sin font:inherit (lo tenía antes): el shorthand "font" resetea TODAS las
   propiedades de fuente, no solo la que un <button> necesita — pisaba el
   font-family/font-size/line-height/font-weight de 1.6rem Playfair que ya
   pone .faq__q más arriba, dejando la pregunta en el tamaño/tipografía por
   defecto del body (16px Times New Roman, medido en vivo). .faq__q ya fija
   todo lo necesario con una regla de clase, que le gana de sobra al estilo
   nativo del botón sin hacer falta este reset. */
.faq--accordion .faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.faq__q-text {
  flex: 1 1 auto;
}

.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: transform 0.6s var(--ease);
}
.faq__icon::before {
  width: 100%;
  height: 2px;
  transform: translate(-50%, -50%);
}
.faq__icon::after {
  width: 2px;
  height: 100%;
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__item.is-open .faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-js-ready .faq--accordion .faq__a {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.6s var(--ease), opacity 0.6s var(--ease), margin-top 0.6s var(--ease);
}

.faq-js-ready .faq--accordion .faq__item.is-open .faq__a {
  opacity: 1;
  margin-top: var(--space-sm);
}

@media (prefers-reduced-motion: reduce) {
  .faq-js-ready .faq--accordion .faq__a {
    transition: none;
  }
  .faq__icon::before,
  .faq__icon::after {
    transition: none;
  }
}
/* Regalos — banda vino sólida, sin ícono encima del título (ver _base.scss
   .band--vino). Cada cuenta va en una tarjeta blanca con una fila por campo
   (número de cuenta, CCI), cada una con su propio botón de copiar.
   Tamaños calcados literales del bloque "REGALOS" del export — el primer
   intento reusó tamaños genéricos del theme (.95rem/.86rem/.62rem/.66rem)
   en vez de los 16/12/14px reales del style="" de cada línea. */
/* La descripción de esta sección es Raleway 16px, no la fuente de contenido
   global (Times New Roman) que usa .parrafo en el resto del sitio — el
   export mezcla las dos fuentes de cuerpo por sección, no de forma sitewide. */
.gifts .parrafo {
  font-family: var(--font-body-ui);
  font-size: 16px;
}

/* La tarjeta apila: datos del banco arriba, luego una fila por campo
   (número de cuenta, CCI) — cada fila con su propio botón de copiar. */
.gifts__card {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-top: var(--space-md);
}

.gifts__card:first-of-type {
  margin-top: var(--space-lg);
}

.gifts__datos {
  min-width: 0;
  margin-bottom: var(--space-sm);
}

.gifts__banco {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--c-burdeos);
  margin: 0 0 4px;
}

.gifts__owner {
  font-family: var(--font-body-content);
  font-size: 0.72rem;
  color: var(--c-tinta-soft);
  margin: 0;
}

/* Fila de un campo (número de cuenta o CCI): label + valor a la izquierda,
   botón de copiar a la derecha. Todas menos la última llevan un hairline
   debajo, igual que el export. */
.gifts__campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--c-hairline);
}

.gifts__campo:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.gifts__datos + .gifts__campo {
  padding-top: 0;
}

.gifts__campo-datos {
  min-width: 0;
}

.gifts__campo-label {
  font-family: var(--font-body-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--c-burdeos);
  opacity: 0.65;
  margin: 0 0 4px;
}

/* El número se lee en la fuente de contenido, como el resto de valores. */
.gifts__iban,
.gifts__cci {
  font-family: var(--font-body-content);
  font-size: 16px;
  line-height: 1.4;
  color: var(--c-tinta);
  margin: 0;
  word-break: break-word;
}

/* Botón de copiar: ícono + label, 2 estados (normal/hecho) ya en el DOM,
   la visibilidad la decide esta clase — el JS solo alterna .is-done. 14px
   caja normal en el export, no los .66rem(≈10px) en versalitas de .btn. */
.gifts__copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
}

.gifts__copy-i {
  display: none;
}

.gifts__copy-i svg {
  display: block;
}

.gifts__copy-i--normal {
  display: block;
}

.gifts__copy.is-done .gifts__copy-i--normal {
  display: none;
}

.gifts__copy.is-done .gifts__copy-i--done {
  display: block;
}

.gifts__registry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  text-align: left;
  margin-top: var(--space-lg);
}

.gifts__registry-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--c-burdeos);
  margin: 0 0 6px;
}

.gifts__registry-eyebrow svg {
  flex: none;
}

.gifts__registry-title {
  font-family: var(--font-body-content);
  font-weight: 400;
  font-size: 16px;
  color: var(--c-burdeos);
  margin: 0;
}

.gifts__registry-cta {
  flex: none;
  padding: 11px 18px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
}

.gifts__notes {
  margin-top: var(--space-md);
}

.gifts__note {
  margin: 0;
}

.gifts__note + .gifts__note {
  margin-top: 10px;
}

/* ═══ SUGERENCIA DE CANCIONES ═════════════════════════════════════════════
   Formulario simple: input + botón en fila, mensaje de gracias debajo. */
.songs__form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  max-width: 420px;
  margin: var(--space-md) auto 0;
}

.songs__input {
  flex: 1 1 220px;
  padding: 13px 16px;
  border: 1px solid var(--c-borde);
  border-radius: var(--radius-btn);
  background: var(--c-tarjeta);
  color: var(--c-tinta);
  font-family: var(--font-body-content);
  font-size: 0.9rem;
}

.songs__input:focus {
  outline: 2px solid var(--c-burdeos-cl);
  outline-offset: 1px;
}

.songs__send {
  flex: none;
}

.songs__thanks {
  margin-top: var(--space-sm);
  font-family: var(--font-body-ui);
  font-size: 0.72rem;
  letter-spacing: var(--track-tight);
  color: var(--c-tinta-soft);
  min-height: 1.2em;
}

/* RSVP — tarjeta blanca sobre la banda de papel, entre dos enredaderas.
   Valores calcados literales del bloque "RSVP" + "RSVP MODAL" del export: el
   primer intento se apoyó en las clases de texto genéricas del theme
   (.rotulo/.parrafo con sus tamaños/colores por defecto) en vez de leer el
   style="" de cada línea — todo salía chico y con el ink genérico --c-tinta/
   --c-tinta-soft en vez del #4D3500 real que usa el export en todo este
   bloque (--c-tinta-cont en _tokens.scss). Corregido acá leyendo el literal. */
/* Las enredaderas ocupan las esquinas opuestas, así que la banda se abre por
   arriba y por abajo para que la tarjeta no se les monte. */
.rsvp {
  padding-top: calc(var(--space-xl) + 40px);
  padding-bottom: calc(var(--space-xl) + 80px);
}

/* enredadera001/002.png (ver component.php): en mobile se muestran a su
   tamaño completo (no al min(%,px) genérico de .grabado--esquina-* en
   _base.scss, que las achicaba) y se corren con transform hacia afuera del
   borde — así se esconde la mitad HORIZONTAL sangrando fuera del viewport,
   con el alto completo (un intento anterior recortaba con clip-path
   vertical y la imagen quedaba incompleta en su altura, que era justo lo
   que no se quería). Mismo mecanismo que ya usa el export literal de
   Claude Design para este bloque (left:-39px / right:-95px, un offset
   negativo que sangra la imagen fuera del borde). .band{overflow:hidden}
   (_base.scss) es lo que evita que la mitad sangrada dispare scroll
   horizontal. En escritorio (_desktop.scss) se ven completas, sin
   desplazamiento, con el tamaño que ya tenían antes de esta sección. */
.rsvp .grabado--esquina-sup-izq {
  width: 250px;
  transform: translateX(-50%);
}

.rsvp .grabado--esquina-inf {
  width: 311px;
  transform: translateX(50%);
}

/* "RSVP" y "Comment Wall" son los dos únicos títulos de sección del export
   que NO usan el ink por defecto de .section__title: van en oliva. */
.rsvp .section__title {
  color: var(--c-oliva);
}

/* El h2 "RSVP" trae solo 8px de margen inferior en el export (línea 252:
   margin:0 0 8px) — ahí abajo empieza la tarjeta directo, sin el
   --space-md (28px) genérico de .section__head. Sin esto quedaba el doble
   de aire del que tiene el diseño entre el título y la tarjeta. */
.rsvp .section__head {
  margin-bottom: 8px;
}

/* border-radius/padding calcados del export (línea 253 del .dc.html):
   6px de esquina (no los 14px genéricos de .tarjeta) y 10px de padding
   propio — el ritmo vertical real lo dan los márgenes de cada hijo
   (.rsvp__label/.rsvp__name/.rsvp__nota más abajo), no el padding de la
   tarjeta. Sin margin-top propio: el gap contra el título ya lo da
   .rsvp .section__head de arriba. Fijo en px como el resto de la tarjeta,
   así que se ve igual en mobile/tablet/escritorio — el único ajuste de
   escritorio es el max-width de _desktop.scss (la tarjeta no se estira al
   ancho de columna de escritorio), nunca el padding/margen interno. */
.rsvp__card {
  padding: 10px;
  border-radius: 6px;
}

/* El estado lo marca el servidor con is-confirmed / is-cancelled sobre la
   tarjeta (y finca.js lo cambia al confirmar), así que por defecto se ve el
   pendiente y los otros dos quedan ocultos. */
.rsvp__confirmed, .rsvp__cancelled {
  display: none;
}

.rsvp__card.is-confirmed .rsvp__pending,
.rsvp__card.is-cancelled .rsvp__pending {
  display: none;
}

.rsvp__card.is-confirmed .rsvp__confirmed {
  display: block;
}

.rsvp__card.is-cancelled .rsvp__cancelled {
  display: block;
}

/* 46px arriba / 49px abajo, literales del export (línea 255) — el gap de
   arriba es lo único que separa el texto del borde de la tarjeta (el
   padding propio de .rsvp__card ya bajó a 10px, ver arriba). */
.rsvp__label {
  font-family: var(--font-body-ui);
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--c-tinta-cont);
  margin: 46px 0 49px;
}

.rsvp__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
  margin: 0;
  color: var(--c-tinta-cont);
}

/* 46px antes de la nota (línea 256 del export) — solo en el estado
   pendiente: .rsvp__name es una clase compartida con los títulos de
   confirmed/cancelled (otro ritmo, no tocar acá). */
.rsvp__pending .rsvp__name {
  margin-bottom: 46px;
}

/* "Por favor confirmar antes del..." va en Raleway en el export, no en la
   fuente de contenido (Times) que hereda .parrafo. */
.rsvp__nota {
  font-family: var(--font-body-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-tinta-cont);
  margin: var(--space-md) auto var(--space-md);
  max-width: 31ch;
}

/* 0 arriba / 55px abajo, literales del export (línea 257: margin:0 0 55px
   en ese <p>) — el gap de arriba ya lo da .rsvp__pending .rsvp__name de
   arriba, y sumarle además el var(--space-md) genérico de .rsvp__nota
   dejaba doble espacio ahí y nada antes del botón (reportado en vivo).
   Solo el estado pendiente: es el único con un botón justo después de la
   nota (el vencido no tiene CTA, y confirmed/cancelled usan la misma clase
   para otro párrafo con su propio ritmo). */
.rsvp__pending .rsvp__nota {
  margin-top: 0;
  margin-bottom: 55px;
}

/* Botón "RSVP" que abre el modal: caja normal (no versalitas), sin
   letter-spacing — el .btn compartido es un CTA chico en versalitas, pensado
   para otras secciones (ver .venues__cta, que ya se sale de .btn con el
   mismo criterio). 28px/16px (versión anterior) daba ~64px de alto —
   visiblemente más alto que cualquier otro botón de Finca (.btn de base:
   15px/28px de padding + .72rem); 22px/14px dejan el botón a ~54px, grande
   pero proporcionado a la tarjeta. */
#rsvp-open {
  font-size: 22px;
  text-transform: none;
  letter-spacing: normal;
  padding: 10px 16px;
  width: 280px;
  max-width: 100%;
}

.rsvp__qr-card {
  width: 196px;
  margin: var(--space-sm) auto;
  padding: 14px;
  background: var(--c-tarjeta);
  border: 1px solid var(--c-linea);
  border-radius: var(--radius-btn);
}

.rsvp__qr-card img {
  width: 100%;
  aspect-ratio: 1;
  background: var(--c-papel);
}

.rsvp__code {
  font-family: var(--font-body-ui);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: var(--track-wide);
  color: var(--c-tinta-soft);
  margin: 10px 0 0;
}

.rsvp__qr-note {
  font-family: var(--font-body-ui);
  font-size: 14px;
  color: var(--c-tinta-cont);
  margin: 8px auto 0;
  max-width: 30ch;
}

/* Las filas en sí (.rsvp__attendee, un <p> por invitado) las genera el JS
   y se estilan en _extras.scss — acá solo el contenedor. */
.rsvp__attendees {
  margin: var(--space-sm) 0 0;
  padding: 0;
}

/* Confirmado y cancelado: 24px de aire arriba/abajo dentro de la tarjeta —
   .rsvp__card solo trae 10px propios (ver arriba) y, a diferencia del
   estado pendiente, acá ningún hijo trae su propio margen grande para
   separarse del borde (.rsvp__name/.rsvp__nota no tienen margin-top
   cuando NO están en .rsvp__pending), así que el título y el botón/nota
   quedaban pegados al borde de la tarjeta (reportado en vivo en los dos
   estados). Pendiente no lo necesita: ya tiene su propio ritmo (46-55px)
   en .rsvp__label/.rsvp__name/.rsvp__nota. */
.rsvp__confirmed, .rsvp__cancelled {
  padding: 24px 0;
}

/* El resto del modal "¿Quiénes asisten?" (.person/.pname/.ptag, el título en
   script en vez de Playfair) se corrige en _modal.scss — ese partial se
   importa DESPUÉS de este en finca.scss, así que una regla acá para esas
   mismas clases quedaría pisada en la cascada (misma especificidad, gana el
   que carga último). */
#rsvp-confirm, #rsvp-decline {
  font-size: 18px;
  text-transform: none;
  letter-spacing: normal;
}

/* Aire antes del primer botón (después de personas/días) y entre los dos
   botones — antes quedaban pegados al bloque de arriba y entre sí
   (rediseño de Claude Design). */
#rsvp-confirm {
  margin-top: 6px;
}

#rsvp-decline {
  margin-top: 10px;
}

/* Buenos deseos — sobre grabado, CTA burdeos y muro de mensajes en tarjetas.
   Valores del muro (.gw-card__*) y de los botones calcados literales del
   bloque "COMMENT WALL" del export — el primer intento usó las fuentes/
   tamaños por defecto del theme en vez del style="" real de cada línea. */
/* Ícono→título: el export deja el ícono a 2px del h2 (casi sin aire, ver
   margin:0 auto 2px en el export) — acá se deja un poco de aire real
   (--space-sm, 16px) en vez de los --space-md (28px) de antes, que se veían
   con más distancia de la que pide el diseño, sin llegar al extremo de 2px
   (el resto del theme no usa huecos tan chicos entre bloques). */
.goodwishes__icono {
  width: 158px;
  margin: 0 auto var(--space-sm);
}

/* "RSVP" y "Comment Wall" son los dos únicos títulos de sección del export
   que no usan el ink por defecto de .section__title: van en oliva. */
.goodwishes .section__title {
  color: var(--c-oliva);
}

/* Subtítulo ("Estamos muy emocionados de verlos..."): el .parrafo compartido
   es Times New Roman/1.8/--c-tinta/34ch (pensado para párrafos largos de
   otras secciones) — acá el export pide Raleway/1.4/--c-tinta-cont/300px.
   Scopeado a .goodwishes para no tocar el .parrafo genérico que usan Historia,
   FAQ, etc. */
.goodwishes .parrafo {
  font-family: var(--font-body-ui);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--c-tinta-cont);
  max-width: 300px;
  /* .parrafo compartido trae margin:0 auto (sin separación propia abajo,
     pensado para párrafos que cierran una sección) — acá le sigue el botón,
     así que necesita su propio margin-bottom. Iguala el hueco que ya deja
     .section__head entre el título y este párrafo (medido en vivo: 48px,
     --space-lg), para que título→descripción y descripción→botón queden
     parejos, como pidió el usuario. */
  margin-bottom: var(--space-lg);
}

/* El muro de la página es UNA sola tarjeta blanca (el export las agrupa así,
   con un divisor fino entre mensajes) — no N tarjetas apiladas con sombra.
   El JS (initGoodwishes() en finca.js) sigue insertando cada mensaje como su
   propio <article class="gw-card"> suelto dentro de #gw-feed: acá se resuelve
   solo con CSS, sin tocar ese DOM — .goodwishes__grid pasa a ser la tarjeta y
   cada .gw-card queda transparente, con el divisor puesto por CSS entre
   hermanos consecutivos. */
.goodwishes__grid {
  background: var(--c-tarjeta);
  border-radius: 8px;
  padding: 36px 24px;
  margin-top: var(--space-lg);
  text-align: center;
}

/* Sin buenos deseos todavía, #gw-feed queda vacío (refresh() en
   initGoodwishes() no le agrega ningún .gw-card) — sin esto, la tarjeta
   blanca se seguía viendo igual, vacía, solo por su padding propio. */
.goodwishes__grid:empty {
  display: none;
}

.gw-card {
  padding: 0;
}

.gw-card + .gw-card {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 0.75px solid var(--c-burdeos);
}

/* El nombre del que escribe: Playfair Display 400, color --c-separador
   (#827837), no el ink genérico. El mensaje va en Raleway recto (NO cursiva
   Playfair, que es lo que había antes) — el export solo usa cursiva Playfair
   para las comillas de apertura, que acá no se separan en un nodo propio. */
.gw-card__by {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  color: var(--c-separador);
  margin: 0 0 28px;
  letter-spacing: 0;
  text-transform: none;
}

/* padding:0 65px indenta el mensaje respecto a la tarjeta (literal del
   export) — solo aplica acá, en el muro de la página; .gw-card--full (la
   lista del modal "Mensajes de amor", ver _extras.scss) lo cancela, porque
   ahí cada mensaje ya tiene su propia tarjeta angosta con borde. */
.gw-card__msg {
  font-family: var(--font-body-ui);
  font-style: normal;
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-tinta-cont);
  margin: 0 0 28px;
  padding: 0 65px;
}

/* .gw-card__date vive en components/_extras.scss, que se importa después:
   declararla aquí también solo quedaba muerta bajo la cascada. */
/* Botones principales ("Escribir mensaje"/"Ver más mensajes"): 20px, caja
   normal, sin letter-spacing — el .btn compartido es un CTA chico en
   versalitas pensado para otras secciones (mismo criterio ya aplicado en
   .venues__cta y en #rsvp-open). Ancho fijo 316px (literal del export, sobre
   un canvas de 480px) — antes el botón se achicaba al ancho de su propio
   texto (237px medido en vivo), bastante más angosto que el diseño.
   max-width:100% lo protege en una columna más angosta que 316px. */
#gw-open, #gw-more {
  width: 280px;
  max-width: 100%;
  padding: 10px 20px;
  font-size: 20px;
  text-transform: none;
  letter-spacing: normal;
}

/* icono-lapiz.png / icono-corazon.png (dist/img/finca/), tamaño literal del
   export: 12×13 y 18×18 respectivamente. */
.goodwishes__btn-icon {
  display: block;
}

#gw-open .goodwishes__btn-icon {
  width: 12px;
  height: 13px;
}

#gw-more .goodwishes__btn-icon {
  width: 18px;
  height: 18px;
}

/* "Ver más mensajes" quedaba pegado al card (0px medido en vivo) — .goodwishes__more
   no existe en el markup (el botón es #gw-more suelto, sin esa clase), así
   que esta regla nunca aplicaba. El hueco de arriba (botón "Escribir
   mensaje" → card) lo da .goodwishes__grid{margin-top:var(--space-lg)}
   arriba; acá se iguala esa misma distancia, como pidió el usuario. */
#gw-more {
  margin-top: var(--space-lg);
}

/* ═══ NOTA DE VOZ ═════════════════════════════════════════════════════════
   Reproductor con onda de barras — mismas clases BEM que el componente
   default (public/dev/sass/components/_voicenote.sass), solo cambia la piel:
   tipografía y paleta de finca. No entra en el sistema de bandas (band--X):
   se le da directamente el tono papel/lisa (--c-papel) para no romper la
   secuencia con sus vecinas (Buenos deseos → Nota de voz → Cierre). */
.voicenote {
  padding: var(--space-xl) var(--gutter);
  background: var(--c-papel);
  text-align: center;
}

.voicenote__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-body-ui);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-tinta);
}

.voicenote__title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  color: var(--c-tinta);
}

.voicenote__player {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
  margin: 0 auto;
  padding: 14px 18px 14px 14px;
  border: 1px solid var(--c-borde);
  border-radius: var(--radius-sheet);
  background: var(--c-tarjeta);
  box-shadow: 0 10px 30px var(--c-sombra);
  text-align: left;
}

.voicenote__play {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--c-burdeos);
  color: var(--c-tarjeta);
  cursor: pointer;
  transition: transform 0.15s, opacity 0.2s;
}

.voicenote__play:hover {
  opacity: 0.85;
}

.voicenote__play:active {
  transform: scale(0.94);
}

/* Triángulo y barras dibujados con bordes: sin iconos que cargar. */
.voicenote__icon-play {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--c-tarjeta);
}

.voicenote__icon-pause {
  display: none;
  width: 14px;
  height: 17px;
  border-left: 4px solid var(--c-tarjeta);
  border-right: 4px solid var(--c-tarjeta);
}

.voicenote__player.is-playing .voicenote__icon-play {
  display: none;
}

.voicenote__player.is-playing .voicenote__icon-pause {
  display: block;
}

.voicenote__body {
  flex: 1;
  min-width: 0;
}

.voicenote__wave {
  position: relative;
  height: 34px;
  cursor: pointer;
}

.voicenote__bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.voicenote__bars span {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--c-borde);
}

/* Capa iluminada: se recorta con clip-path, no con el ancho, para no encoger
   las barras de dentro. */
.voicenote__bars--fill {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.1s linear;
}

.voicenote__bars--fill span {
  background: var(--c-burdeos);
}

.voicenote__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.voicenote__author {
  font-family: var(--font-body-ui);
  font-size: 0.62rem;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  color: var(--c-tinta-soft);
}

.voicenote__time {
  font-family: var(--font-body-content);
  font-size: 0.78rem;
  color: var(--c-tinta-soft);
  font-variant-numeric: tabular-nums;
}

.voicenote__hint {
  margin: var(--space-md) auto 0;
  max-width: 420px;
  font-family: var(--font-body-content);
  font-size: 0.82rem;
  color: var(--c-tinta-soft);
}

/* Cierre — fotografía a sangre. Sin texto en el mockup: la foto respira sola. */
.closing {
  position: relative;
  /* max() en vez de dos min-height sueltos: con dos declaraciones separadas
     la segunda simplemente pisa a la primera (no "gana la más alta"). 400px
     es un piso de seguridad (mismo criterio que moderna, que usa 520px) para
     ventanas muy bajas y anchas, donde 55svh solo no alcanza a mantener a la
     pareja en cuadro — en mobile/desktop normales manda 55svh igual que antes. */
  min-height: max(55svh, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-xl) var(--gutter);
  overflow: hidden;
  background: var(--c-tinta);
}

/* object-position:25% (no el 50% por defecto) porque en la foto real de este
   evento la pareja cae hacia la izquierda del encuadre (aprox. 21%-56% del
   ancho) — centrado a secas dejaba al novio casi fuera de cuadro en mobile,
   donde el contenedor angosto obliga a recortar mucho ancho; 38% todavía lo
   dejaba pegado al borde. Es un ajuste a mano para ESTA foto puntual: si se
   sube otra foto a este mismo slot puede hacer falta recalcular el número
   (ver _desktop.scss para el valor de escritorio, que sí puede quedarse
   centrado porque ahí se recorta menos). */
.closing__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 25% center;
}

/* El velo solo aparece cuando hay texto encima que necesite contraste; sin él
   la fotografía se ve limpia, que es como la pide el mockup. */
.closing:has(.closing__inner)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(53, 43, 33, 0.42);
}

.closing__inner {
  position: relative;
  z-index: 2;
  color: var(--c-tarjeta);
}

/* Propio y no el .eyebrow genérico de _base.scss: ese usa --c-tinta (oscuro,
   pensado para fondos claros) y quedaría casi invisible sobre la foto oscura
   de esta banda — acá hereda el --c-tarjeta claro de .closing__inner. */
.closing__eyebrow {
  font-family: var(--font-body-ui);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  margin: 0 0 var(--space-sm);
}

.closing__title {
  font-family: var(--font-script);
  font-size: 3.1rem;
  margin: 0 0 var(--space-sm);
}

.closing__firma {
  font-family: var(--font-body-ui);
  font-size: 0.72rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 2.2;
  margin: 0;
  opacity: 0.9;
}

/* Footer — burdeos a sangre, con el monograma montado sobre el borde superior.
   Es el único bloque que invierte el contraste, y por eso cierra.

   Valores calcados literales del export (bloque "FOOTER" del .dc.html): el
   primer intento de este bloque se armó a partir de un resumen agregado
   ("rótulo chico en versalitas") en vez de leer el style="" de cada línea, y
   terminó con todas las fuentes/tamaños equivocados (la mitad del tamaño real
   en varios casos) y color equivocado (--c-tarjeta, casi blanco puro, en vez
   de --c-papel, el crema cálido que usa el export). Corregido acá leyendo el
   style="" literal de cada línea del bloque FOOTER. */
.footer {
  position: relative;
  background: var(--c-burdeos);
  color: var(--c-papel);
  text-align: center;
  padding: 94px var(--gutter) calc(56px + env(safe-area-inset-bottom));
}

/* Se sube para quedar a caballo entre la foto del cierre y el color: el sello
   parece pegado sobre el pliegue, como en la papelería. -61px y el
   padding-top:94px de arriba son el mismo par de números del export, que acá
   usa position:absolute (no margin) — con margin-top en flujo normal el
   padding-top del footer se resta contra el margen negativo (94-61=33px) y
   el sello queda 33px DENTRO del footer, sin tocar la foto. absolute con
   top:-61px sí mide desde el borde del footer, igual que el export. */
.footer__monograma {
  position: absolute;
  top: -61px;
  left: 50%;
  transform: translateX(-50%);
  width: 106px;
}

.footer__firma {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  margin: 0 0 18px;
}

.footer__novios {
  font-size: 40px;
  margin: 0 0 33px;
}

.footer__amp {
  margin: 0 0.22em;
}

.footer__fecha {
  font-family: var(--font-body-ui);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 2px;
  margin: 0 0 8px;
}

.footer__ciudad {
  font-family: var(--font-body-ui);
  font-size: 16px;
  text-transform: uppercase;
  margin: 0 0 8px;
}

/* Hashtag de la boda (ej. "#MANCHELLA") — mismo tratamiento que la ciudad. Es
   opcional (event.config.footer_hashtag), así que el aire de 56px antes de
   "Una experiencia de..." lo pone el margin-top de .footer__credito, no el
   margin-bottom de esta línea: así el espaciado queda igual con o sin
   hashtag configurado. */
.footer__hashtag {
  font-family: var(--font-body-ui);
  font-size: 16px;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.footer__credito {
  font-family: var(--font-body-ui);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 56px 0 0;
}

.footer__credito a {
  color: inherit;
  text-decoration: none;
}

/* ═══ MODALES — mecanismo de entrehojas (bottom sheets) ══════════════════
   Mismas clases e ids que themes/entrehojas: .modal-back/.modal + .on para el
   RSVP, .gw-sheet y .aw-sheet + .is-open para buenos deseos. Cambia la piel,
   no la estructura: el JS del theme depende de estos nombres.
   z-index en 400 (no 300, como venía): finca usa modo "web" (hamburguesa +
   panel lateral, ver components/_menu.scss), y .imenu__toggle vive fijo a
   z-index:340 — por encima de un modal a 300, la hamburguesa quedaba
   flotando sobre el popup y tapaba su botón de cerrar (reportado en vivo
   con el popup de Nuestra Historia, que tiene el mismo problema con
   cualquier modal de este theme, no solo ese). 400 deja margen sobre los
   334/335/340 de scrim/panel/hamburguesa. Mismo ajuste en
   campillo/components/_modal.scss (el otro theme con modo "web"). */
/* Fondo del overlay: oliva oscuro translúcido (rgba(98,88,34,.7) = --c-oliva
   al 70%, el mismo tono ya usado por .gw-sheet__backdrop/.aw-sheet__backdrop
   más abajo) en vez del marrón-burdeos anterior — nuevo diseño de Claude
   Design para "¿Quiénes asisten?", visualmente igual al resto de sheets del
   theme en vez de un color aparte solo para este modal. */
.modal-back {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(98, 88, 34, 0.7);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.modal-back.on {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--c-tarjeta);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding: 14px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.45s var(--ease);
  max-height: 90vh;
  overflow: auto;
}

.modal-back.on .modal {
  transform: none;
}

.modal-x, .gw-sheet__x, .aw-sheet__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-tinta-soft);
  opacity: 0.55;
  padding: 0;
  transition: opacity 0.2s;
}

.modal-x:hover, .gw-sheet__x:hover, .aw-sheet__close:hover {
  opacity: 1;
}

.grab, .gw-sheet__handle, .aw-sheet__handle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: var(--c-linea);
  margin: 0 auto 18px;
}

/* .aw-sheet__panel es flex column (ver arriba): sin esto el handle se
   estiraría/achicaría como cualquier otro ítem flex en vez de mantener su
   alto fijo de 5px. */
.aw-sheet__handle {
  flex: 0 0 auto;
}

/* Título en Playfair Display 28px en el export ("Déjanos un mensaje",
   "¡Gracias!", "Mensajes de amor") — no el script burdeos que había acá,
   que es la firma de OTROS títulos del sitio (Ceremonia/Recepción, "Con
   cariño"...) pero no la de estos modales. */
.gw-sheet__title, .aw-sheet__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  text-align: center;
  margin: 0;
  color: var(--c-tinta-cont);
  line-height: 1.2;
}

.gw-sheet__sub {
  font-family: var(--font-body-ui);
  font-size: 14px;
  text-align: center;
  color: var(--c-tinta-cont);
  margin: 9px auto 22px;
  max-width: 32ch;
}

/* "¿Quiénes asisten?": rediseño de Claude Design — mismo Playfair Display
   que el resto de títulos de modal, pero en oliva (no el ink genérico),
   como el H2 "RSVP" de la sección. */
.modal h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  text-align: center;
  margin: 0;
  color: var(--c-oliva);
  line-height: 1.2;
}

.modal .m-sub {
  font-family: var(--font-body-ui);
  font-size: 14px;
  text-align: center;
  color: var(--c-tinta-soft);
  margin: 9px auto 26px;
  max-width: 32ch;
}

/* Filas de invitado y de día (más abajo): mismo tratamiento de tarjeta
   —borde 1px, esquinas redondeadas, más padding— que reemplaza la fila
   plana/cuadrada anterior (rediseño de Claude Design). */
.person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--c-borde);
  border-radius: var(--radius-card);
  margin-bottom: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}

.person.on {
  border-color: var(--c-burdeos);
  background: rgba(132, 144, 63, 0.08);
}

/* "Playfair Display" 700 16px en el export — .pname no traía font-family
   propia y heredaba la de cuerpo (Times New Roman). */
.pname {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--c-tinta-cont);
}

.ptag {
  display: block;
  font-family: var(--font-body-ui);
  font-size: 0.5rem;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-tinta-cont);
  margin-top: 3px;
}

/* Checkbox cuadrado (antes círculo): rediseño de Claude Design — mismo
   tamaño/transición, solo cambia border-radius. Lo reutiliza .rsvp-day
   (días de asistencia) más abajo. */
.check-toggle {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid var(--c-linea);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0.75rem;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.person.on .check-toggle {
  background: var(--c-burdeos);
  border-color: var(--c-burdeos);
  color: var(--c-tarjeta);
}

/* Días de asistencia (ver tab_rsvp_days.php): solo se pintan si el evento
   tiene bloques guardados — el modal por defecto (sin días) queda
   exactamente igual que antes de este bloque. */
.rsvp-days__label {
  font-family: var(--font-body-ui);
  font-size: 13px;
  text-align: center;
  color: var(--c-tinta-soft);
  margin: 22px 0 12px;
}

.rsvp-days {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

/* Mismo tratamiento de tarjeta que .person, pero con dos líneas de texto
   (título + descripción) en vez de una sola — el checkbox va arriba a la
   derecha en vez de centrado verticalmente, porque la tarjeta es más alta. */
.rsvp-day {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px;
  border: 1px solid var(--c-borde);
  border-radius: var(--radius-card);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}

.rsvp-day.on {
  border-color: var(--c-burdeos);
  background: rgba(132, 144, 63, 0.08);
}

.rsvp-day .check-toggle {
  margin-top: 1px;
}

.rsvp-day.on .check-toggle {
  background: var(--c-burdeos);
  border-color: var(--c-burdeos);
  color: var(--c-tarjeta);
}

.rsvp-day__titulo {
  font-family: var(--font-body-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--c-tinta-cont);
  margin: 0;
}

.rsvp-day__descripcion {
  font-family: var(--font-body-ui);
  font-size: 12px;
  color: var(--c-tinta-soft);
  margin: 3px 0 0;
}

/* En una columna angosta (o con más de 2 días) el grid de 2 columnas se
   siente apretado — una sola columna deja cada tarjeta con su ancho
   completo, igual de legible que .person. */
@media (max-width: 360px) {
  .rsvp-days {
    grid-template-columns: 1fr;
  }
}
.modal__success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 0 26px;
}

.modal.is-success .modal__body {
  display: none;
}

.modal.is-success .modal__success {
  display: flex;
}

.modal__success-text {
  font-family: var(--font-script);
  font-size: 2rem;
  color: var(--c-burdeos);
  margin: 14px 0 0;
  max-width: 24ch;
}

.gw-sheet, .aw-sheet {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
}

.gw-sheet.is-open, .aw-sheet.is-open {
  pointer-events: auto;
}

/* Bug preexistente (no introducido por este cambio, pero rompe justo lo que
   se está rediseñando acá): ambos sheets son hijos directos de
   <section class="... band ...">, y _base.scss trae
   ".band > *:not(.grabado){position:relative;z-index:1}" — con más
   especificidad (0,2,0) que ".gw-sheet,.aw-sheet{position:fixed}" (0,1,0),
   así que ese "position:relative" siempre gana y el overlay nunca llega a
   cubrir la pantalla completa (comprobado en vivo: position computado
   "relative", no "fixed"). RSVP no lo sufre porque su JS mueve #rsvp-sheet a
   <body> por otro motivo (recortes de overflow) y así deja de ser hijo de
   .band — acá se corrige la causa real, sin tocar el JS: esta regla empata
   en especificidad (0,2,0) con la de _base.scss y gana por cargar después.
   Mismo motivo para forzar acá el z-index: esa regla de _base.scss también
   pone "z-index:1" con la misma especificidad, y sin este empate explícito
   el sheet queda a z-index:1 (el de cualquier sección normal) en vez de 400,
   así que una banda posterior en el DOM pintaría encima suyo aunque esté
   "abierto". */
.band > .gw-sheet, .band > .aw-sheet {
  position: fixed;
  z-index: 400;
}

/* rgba(98,88,34,.7) = --c-oliva (#625822) al 70% — literal del export para
   los 3 backdrops de sheet (mensaje/mensajes/RSVP). Antes iba un marrón-
   burdeos (rgba(72,40,32,.5)) que no coincidía con la captura del diseño
   (fondo oliva translúcido, no marrón). */
.gw-sheet__backdrop, .aw-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(98, 88, 34, 0.7);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.35s;
}

.gw-sheet.is-open .gw-sheet__backdrop, .aw-sheet.is-open .aw-sheet__backdrop {
  opacity: 1;
}

/* border-radius 20px (no --radius-sheet, que es 24px y la usa también .modal
   de RSVP): literal del export, no comparte variable con RSVP para no
   arrastrarlo a un valor que no le corresponde. Lo demás (padding, alto,
   scroll) ya no es compartido entre los dos sheets — ver más abajo. */
/* El box-shadow (proyecta 22px hacia ARRIBA del borde superior, con 54px de
   blur) vive solo en la regla ".is-open" de abajo, no acá: con el panel
   cerrado a "translateY(101%)", ese 1% es apenas unos px de margen para un
   panel típico (mucho menos que el alcance del blur), así que la sombra
   quedaba asomando por encima del borde de pantalla ANTES de abrir el sheet
   — el bug reportado ("se ve la sombra del modal antes de que aparezca").
   Sin box-shadow en el estado cerrado no hay nada que pueda asomar. */
.gw-sheet__panel, .aw-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 520px;
  margin: 0 auto;
  background: var(--c-tarjeta);
  border-radius: 20px 20px 0 0;
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}

.gw-sheet.is-open .gw-sheet__panel, .aw-sheet.is-open .aw-sheet__panel {
  transform: translateY(0);
  box-shadow: 0 -22px 54px -22px rgba(72, 40, 32, 0.5);
}

/* "Déjanos un mensaje" es un formulario corto: el panel entero scrollea si
   hace falta (no necesita cabecera fija). Padding 28px/32px, literal del
   export. */
.gw-sheet__panel {
  padding: 14px 28px calc(32px + env(safe-area-inset-bottom));
  max-height: 90vh;
  overflow-y: auto;
}

/* "Mensajes de amor" sí puede tener muchos mensajes: la cabecera (título +
   contador + divisor) se queda fija y solo la lista de abajo scrollea, con
   su propia barra — mismo mecanismo que themes/entrehojas/_prototype.scss
   (aw-sheet__panel con height fijo + flex column; aw-sheet__head
   flex:0 0 auto; aw-sheet__list flex:1 + overflow-y:auto propio), portado
   acá con la piel de finca. Antes .aw-sheet__panel compartía el
   max-height+overflow-y:auto del formulario, así que TODO el panel
   scrolleaba junto (cabecera incluida) en vez de solo la lista. */
.aw-sheet__panel {
  padding: 14px 0 0;
  height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Borde --c-separador (#827837) sin fondo propio (se funde con la tarjeta
   blanca) y esquinas de 10px — antes tenía --c-linea + un fondo --c-lino que
   el export no trae. */
.gw-sheet__textarea {
  width: 100%;
  border: 1px solid var(--c-separador);
  border-radius: 10px;
  background: transparent;
  font-family: var(--font-body-ui);
  font-size: 15px;
  color: var(--c-tinta-cont);
  padding: 14px;
  margin-bottom: 16px;
  resize: vertical;
}

.gw-sheet__textarea:focus {
  outline: none;
  border-color: var(--c-burdeos);
}

/* "GUARDAR MENSAJE"/"CANCELAR" ya van en versalitas en el export (a
   diferencia de la mayoría de botones de esta plantilla) — el único ajuste
   real es el tamaño: 16px, no los .72rem(≈11px) de .btn. */
.gw-sheet__send, .gw-sheet__cancel {
  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

/* El export cambia el color real del botón (no solo la opacidad) cuando no
   hay texto escrito todavía: #B8A99A, un taupe apagado. */
.gw-sheet__send:disabled {
  background: #B8A99A;
  opacity: 1;
  cursor: not-allowed;
}

/* CANCELAR usa .btn--ghost compartido (también lo usa el botón "cambiar" de
   RSVP, con otro color de borde/texto) — acá se pisa scopeado a este botón
   puntual para no arrastrar el cambio a RSVP. */
.gw-sheet__cancel {
  border-color: var(--c-borde);
  color: var(--c-tinta-cont);
}

/* Cabecera fija (flex:0 0 auto, no se achica ni scrollea con la lista) —
   .aw-sheet__panel ya no tiene padding horizontal propio (ver arriba), así
   que el padding lateral va acá directo: el borde-divisor llega solo a
   sangre porque el elemento mismo ocupa el ancho completo del panel, sin
   necesitar el margen negativo que tenía antes. */
.aw-sheet__head {
  flex: 0 0 auto;
  text-align: center;
  padding: 8px 28px 20px;
  border-bottom: 1px solid var(--c-borde);
}

.aw-sheet__count {
  font-family: var(--font-body-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-separador);
  margin: 8px 0 0;
}

/* Única parte que scrollea del modal — flex:1 la deja crecer hasta el alto
   fijo de .aw-sheet__panel (85vh) y overflow-y:auto le da su propia barra,
   sin arrastrar la cabecera. */
.aw-sheet__list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 28px calc(20px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
}

/* El lightbox (#lb / .lb) vive en components/_extras.scss — el markup del
   layout lleva id y clase a la vez, así que declararlo aquí también solo
   duplicaba la regla. */
/* Piezas que solo existen en el theme (el prototipo no las tiene):
   botón de música, lightbox global y las tarjetas de deseo y de asistente.
   El menú vive en components/_menu.scss (base compartida + piel). */
/* ── Botón de música ─────────────────────────────────────────────────────── */
.music-fab {
  position: fixed;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 120;
  width: 46px;
  height: 46px;
  border: 1px solid var(--c-hairline);
  border-radius: 50%;
  background: var(--c-tarjeta);
  color: var(--c-tinta-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -16px rgba(72, 40, 32, 0.6);
}

.music-fab svg {
  width: 20px;
  height: 20px;
}

.music-fab__eq {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.music-fab__eq i {
  width: 2px;
  background: var(--c-burdeos);
  animation: eq 0.9s ease-in-out infinite;
}

.music-fab__eq i:nth-child(2) {
  animation-delay: 0.15s;
}

.music-fab__eq i:nth-child(3) {
  animation-delay: 0.3s;
}

.music-fab[aria-pressed=true] svg {
  display: none;
}

.music-fab[aria-pressed=true] .music-fab__eq {
  display: flex;
}

@keyframes eq {
  0%, 100% {
    height: 4px;
  }
  50% {
    height: 14px;
  }
}
/* ── Lightbox global ─────────────────────────────────────────────────────── */
/* La foto entra con una leve escala, no solo un fundido: el backdrop marca el
   tiempo (.35s) y la imagen llega un poco por detrás, para que se sienta
   como "se acerca" y no como un simple parpadeo de opacidad. */
.lb {
  /* z-index arriba de .imenu__toggle (340, ver components/_modal.scss para
     el detalle) — mismo motivo, la hamburguesa flotaba sobre la foto
     ampliada. */
  position: fixed;
  inset: 0;
  z-index: 420;
  background: rgba(38, 22, 18, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}

.lb.on {
  opacity: 1;
  pointer-events: auto;
}

.lb__close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: 0;
  color: var(--c-lino);
  opacity: 0.7;
}

.lb__img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  transform: scale(0.96);
  transition: transform 0.35s var(--ease);
}

.lb.on .lb__img {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .lb, .lb__img {
    transition: none;
  }
}
/* ── Tarjetas de buenos deseos (las genera el JS) ──────────────────────────
   Fecha ("25 · 11 · 2026"): Playfair Display 700 16px #4D3500 en el export —
   no la Raleway diminuta en versalitas que había antes. */
.gw-card__date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--c-tinta-cont);
  margin: 0;
}

.gw-card__read-more {
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-body-ui);
  font-size: 0.55rem;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--c-burdeos-cl);
  border-bottom: 1px solid var(--c-linea);
}

.gw-card:not(.gw-card--full):not(.gw-card--expanded) .gw-card__msg {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tarjetas dentro del modal "Mensajes de amor" (.gw-card--full, la clase que
   ya agrega makeCard() de finca.js para esta lista — no hace falta tocar el
   JS): tratamiento propio y distinto al muro de la página
   (components/_goodwishes.scss) — tarjeta bordeada individual en vez del
   divisor entre hermanos, nombre en mayúsculas Raleway, mensaje en Playfair
   itálica, fecha gris, todo centrado (título/descripción/fecha) como pidió
   el usuario — antes heredaba text-align:left de .aw-sheet__list. */
.gw-card--full {
  background: var(--c-tarjeta);
  border: 1px solid var(--c-borde-suave);
  border-radius: 8px;
  padding: 24px 16px;
  margin-bottom: 16px;
  text-align: center;
}

.gw-card--full:last-child {
  margin-bottom: 0;
}

/* Cancela el divisor entre hermanos de _goodwishes.scss (pensado para el
   muro de la página, no para esta lista con tarjeta propia por mensaje). */
.gw-card--full + .gw-card--full {
  margin-top: 0;
  padding-top: 24px;
  border-top: 1px solid var(--c-borde-suave);
}

.gw-card--full .gw-card__by {
  font-family: var(--font-body-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-separador);
  margin: 0 0 8px;
}

/* Sin comilla decorativa arriba del mensaje (::before): el usuario la marcó
   como un problema de UX real — quitaba espacio y no aportaba nada — no es
   una diferencia con el export, es una corrección sobre lo que ya se había
   hecho. El mensaje ya llega sin comillas propias desde el JS (makeCard()
   no las agrega cuando full=true, ver finca.js). */
.gw-card--full .gw-card__msg {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-tinta-cont);
  padding: 0;
  margin: 0 0 16px;
}

.gw-card--full .gw-card__date {
  font-family: var(--font-body-ui);
  font-weight: 400;
  font-size: 13px;
  color: #9A9A9A;
  margin: 0;
}

/* ── Lista de asistentes confirmados (la genera el JS) ───────────────────── */
/* justify-content:center: sin esto cada fila (flex, un solo hijo real —
   el "✓" es ::before) se pega al borde izquierdo de la tarjeta en vez de
   quedar centrada como el resto del contenido del RSVP (reportado en vivo
   con el nombre del invitado). text-align:left queda porque, con varios
   nombres, el bloque center-of-row debe leerse alineado a la izquierda
   entre sí, no cada uno centrado por separado. */
.rsvp__attendee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--c-hairline);
  margin: 0;
  text-align: left;
  font-size: 0.98rem;
}

.rsvp__attendee::before {
  content: "✓";
  color: var(--c-burdeos-cl);
  font-size: 0.8rem;
}

.rsvp__qr-note {
  font-size: 0.9rem;
  color: var(--c-tinta-soft);
  max-width: 30ch;
  margin: 12px auto 0;
}

/* Opener clásico: "Entrar a la invitación" alineado a la paleta de la plantilla
   (Crater Brown #491C28 + texto papel). Va al final de la cascada para ganar
   al fallback sage del componente compartido y al --opening-accent del sello. */
.opener-clasico__enter,
.card-clasico__cta {
  background: var(--c-burdeos);
  color: var(--c-tarjeta);
  font-family: var(--font-body-ui);
  box-shadow: 0 8px 18px rgba(73, 28, 40, 0.18);
}

.opener-clasico__enter:hover,
.card-clasico__cta:hover {
  background: var(--c-burdeos-cl);
}

/* El bloque de escritorio va al final para no perder el orden de cascada. */
/* ═══ ESCRITORIO ═════════════════════════════════════════════════════════ */
/* Finca se diseñó en vertical para el móvil, que es donde se lee una
   invitación. En pantalla ancha la columna crece pero el ritmo no cambia: las
   secciones siguen siendo bandas apiladas, no un grid de dos columnas. */
@media (min-width: 900px) {
  :root {
    --content:720px;
    --gutter:48px;
  }
  body {
    font-size: 16px;
  }
  .section {
    padding: var(--space-2xl) 0;
  }
  /* Buenos deseos, Regalos, FAQ, Itinerario y Ubicaciones: el reset genérico
     de .section de arriba las dejaba en --space-2xl completo en escritorio
     (pisando el padding a la mitad que ya tienen en mobile/tablet, ver
     _base.scss) — se repite acá, a la mitad de --space-2xl, para que el
     recorte sea el mismo en los 3 tamaños. */
  .goodwishes,
  .gifts,
  .faq,
  .itinerary,
  .venues {
    padding: calc(var(--space-2xl) / 2) 0;
  }
  /* Despedida (_closing.scss): en mobile 55svh da una caja angosta y alta,
     que calza bien con una foto de retrato (poco recorte lateral). En
     escritorio esa MISMA altura, con el viewport mucho más ancho, se
     convierte en una caja panorámica corta — object-fit:cover recorta casi
     toda la foto vertical, perdiendo a la pareja. Subir el alto acá (sin
     tocar mobile) hace que la caja siga leyendo como retrato aunque el
     ancho crezca. */
  .closing {
    min-height: 80svh;
  }
  /* En escritorio el contenedor es mucho más ancho, así que object-fit:cover
     ya no necesita recortar tanto ancho de la foto — el 38% de mobile
     (ver _closing.scss) dejaría a la pareja pegada al borde izquierdo sin
     necesidad; centrado vuelve a ser la mejor composición acá. */
  .closing__bg {
    object-position: center;
  }
  .cover__name {
    font-size: 5.4rem;
  }
  /* La foto de portada es cuadrada y el sujeto (p.ej. las manos de la
     pareja) suele quedar en su tercio superior. En mobile (viewport angosto
     y alto) object-fit:cover recorta por los costados y se ve la foto
     entera de arriba a abajo, así que ese tercio superior cae naturalmente
     cerca de la mitad de la pantalla. En escritorio es al revés: el
     viewport es mucho más ancho que alto, así que lo que se recorta es
     alto, y con el centrado por defecto (50% 50%) solo se ve una franja
     angosta centrada en la foto — empujando al sujeto casi al borde
     superior, pegado a la barra de menú.
     43% (no 0%/top del todo) se midió contra el hueco real entre la barra
     de menú y el bloque de título — que en escritorio es fijo en alto
     (nombres con tope de fuente en 5.4rem + fecha/ciudad, la única variable
     es el padding inferior en vh) — para varias resoluciones típicas
     (1366×768 hasta 1920×1200 y pantallas anchas/bajas tipo 1862×958):
     ancla arriba del todo (0%) deja al sujeto detrás del título en las más
     bajas; anclar más abajo del 45% lo empuja detrás del menú en las más
     anchas. 43% es el punto donde el sujeto entra en ese hueco en ambos
     extremos, sin importar cuán ancho o bajo sea el monitor. */
  .cover__photo {
    object-position: center 43%;
  }
  /* Con más ancho el grabado cabe entero sin comerse el texto. Todos con tope
     en px: en `--content:720px` un porcentaje solo ya vuelve a crecer sin
     freno en viewports más anchos (1440px, 1920px). */
  .grabado--pie {
    width: min(58%, 340px);
    margin-inline: auto;
  }
  .grabado--cabecera {
    width: min(38%, 300px);
  }
  .grabado--esquina-inf {
    width: min(42%, 360px);
  }
  .grabado--esquina-sup,
  .grabado--esquina-sup-izq {
    width: min(28%, 240px);
  }
  /* Mismo alto y tamaño de fondo que en móvil (ver _base.scss); solo cambia
     el padding inferior de la sección que hay que cancelar. */
  .grabado--fondo {
    margin-bottom: calc(-1 * var(--space-2xl));
  }
  /* En mobile la fachada se ancla casi al borde derecho (88%,100%, ver
     _countdown.scss) porque el recorte deja ver la esquina del edificio;
     en tablet/escritorio, con más ancho visible, se centra en vez de
     seguir sesgada a la derecha. */
  .countdown .grabado--fondo {
    background-position: center;
  }
  /* La descripción de Bienvenida (24px) se lee angosta con el 36ch de
     móvil dentro de una columna de 720-820px — más aire lateral en
     escritorio. */
  .intro__texto {
    max-width: 58ch;
  }
  /* Ceremonia y recepción, lado a lado — el organizador elige esto desde el
     panel (Ubicaciones → "Columnas en escritorio"); el componente agrega
     .venues__grid--cols-1 solo cuando elige 1 columna, así que TODO lo de
     abajo queda scopeado a ":not(.venues__grid--cols-1)" y el comportamiento
     de 2 columnas de siempre no cambia para ningún evento existente (sin el
     campo nuevo, el modificador nunca se agrega).

     N bloques, no solo 2: cada .venues__bloque es su propia celda del grid
     (grid-row:span 7, una franja por cada uno de sus 7 elementos: ícono,
     título, grabado, lugar, dirección, hora, botón), y esa celda usa
     grid-template-rows:subgrid para que sus 7 filas SEAN las 7 filas del
     grid exterior — así "lugar" de un bloque arranca a la misma altura que
     "lugar" del bloque de al lado, sea cual sea el largo de su dirección.
     La ubicación automática de CSS Grid ya hace el resto sola, sin
     nth-of-type: bloque 1 → col 1/fila 1-7, bloque 2 → col 2/fila 1-7,
     bloque 3 → col 1/fila 8-14 (debajo del 1), bloque 4 → col 2/fila 8-14
     (debajo del 2), y así con cualquier cantidad de ubicaciones que se
     agreguen. Las 42 filas de la plantilla alcanzan para 6 pares (12
     ubicaciones); las que sobran sin contenido no ocupan espacio.
     align-items:start evita que la imagen se estire para llenar la fila. */
  .venues__grid:not(.venues__grid--cols-1) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(42, auto);
    column-gap: var(--space-lg);
    align-items: start;
  }
  .venues__grid:not(.venues__grid--cols-1) > .venues__bloque {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 7;
    /* .venues__bloque (_venues.scss) trae margin-top:var(--space-xl) para el
       apilado de mobile. Con display:contents (versión anterior) ese margen
       no existía como caja y no hacía nada; ahora que el bloque SÍ es una
       caja real (subgrid lo necesita), ese margen vuelve a aplicar y sumaba
       84px extra arriba de cada bloque — de ahí el espacio enorme bajo el
       título. Se cancela acá: el espacio entre el título y la grilla lo da
       únicamente .venues__grid, y entre pares de filas ya alcanza con los
       márgenes puntuales de _venues.scss (ver .venues__cta margin-bottom). */
    margin-top: 0;
  }
  /* Los números de fila son relativos al propio subgrid de cada bloque
     (arrancan en 1 otra vez para cada par), no filas absolutas del grid
     exterior — por eso una sola regla por elemento alcanza para cualquier
     bloque, no hace falta repetirla por bloque.

     El título va en script (Pinyon Script): letras distintas ("Ceremonia"
     vs "Recepción") tienen un adorno/ascendente de altura muy distinta en
     una fuente cursiva, así que alineando la CAJA del texto arriba (el
     comportamiento por defecto) las letras se ven a saltos entre columnas.
     align-self:end ancla el título por su base en vez de por su tope: la
     línea de base es mucho más pareja entre letras que el adorno de arriba,
     así que "Ceremonia" y "Recepción" quedan a la misma altura visual. El
     ícono se ancla igual, para que quede pegado al título en vez de
     "flotando" arriba si la fila del ícono resultara más alta en una
     columna que en otra. */
  .venues__grid:not(.venues__grid--cols-1) .venues__icono {
    grid-row: 1;
    align-self: end;
  }
  .venues__grid:not(.venues__grid--cols-1) .venues__kind {
    grid-row: 2;
    align-self: end;
  }
  .venues__grid:not(.venues__grid--cols-1) .venues__grabado {
    grid-row: 3;
  }
  .venues__grid:not(.venues__grid--cols-1) .venues__place {
    grid-row: 4;
  }
  .venues__grid:not(.venues__grid--cols-1) .venues__data {
    grid-row: 5;
  }
  .venues__grid:not(.venues__grid--cols-1) .venues__hora {
    grid-row: 6;
  }
  .venues__grid:not(.venues__grid--cols-1) .venues__cta {
    grid-row: 7;
  }
  /* Espacio entre un par de bloques y el siguiente (el subgrid no lo da
     solo, cada fila ya trae su propio margen puntual entre sus elementos
     internos vía _venues.scss). */
  .venues__grid:not(.venues__grid--cols-1) .venues__cta {
    margin-bottom: var(--space-xl);
  }
  /* La última fila del grid (2 bloques con solo 2 lugares, el caso más
     común: Ceremonia + Recepción) no tiene un "próximo par" que espaciar —
     ese margin-bottom quedaba como aire muerto DENTRO de .venues__grid,
     sumado al padding-bottom de .section (medido en vivo: 188px de hueco
     bajo el botón "Cómo llegar" en vez de los 124px del padding real, casi
     el doble que el margen simétrico de arriba). Se cancela en los bloques
     de la última fila, sea cual sea la cantidad total de ubicaciones. */
  .venues__grid:not(.venues__grid--cols-1) > .venues__bloque:nth-last-child(-n+2) .venues__cta {
    margin-bottom: 0;
  }
  /* Mismo espacio arriba en las dos variantes: el título de la sección
     queda a --space-sm del bloque de ubicaciones, sea 1 o 2 columnas — en
     escritorio con la columna más ancha, --space-lg (48px) se sentía como
     un salto grande entre el título y los bloques. En 2 columnas ese aire
     lo da únicamente el margin-top de .venues__grid (los bloques ya no
     tienen margen propio, son celdas del grid); en 1 columna hay que
     cancelar el margin-top que .venues__bloque:first-of-type trae de
     _venues.scss (pensado para el apilado de mobile) para que no se sume
     con el del grid y quede el doble de aire. */
  .venues__grid {
    margin-top: var(--space-md);
  }
  .venues__grid.venues__grid--cols-1 > .venues__bloque:first-of-type {
    margin-top: 0;
  }
  /* El tamaño/layout de las polaroids en escritorio vive en
     components/_gallery.scss (import posterior a este archivo en finca.scss,
     así que cualquier regla puesta acá lo pisaría en silencio) — dos
     archivos definiendo lo mismo para el mismo breakpoint es justo lo que
     hacía que las fotos salieran más chicas que en mobile sin que se notara
     por qué. No repetir .gallery__polaroids/.polaroid en este archivo. */
  .story__pila {
    min-height: 230px;
  }
  .story__polaroid {
    width: 190px;
  }
  /* Los grabados de RSVP se ven completos en escritorio, sin el
     desplazamiento que en mobile/tablet esconde la mitad horizontal (ver
     _rsvp.scss) — mismo ancho que ya tenían las clases genéricas
     .grabado--esquina-* más arriba en este archivo, repetido acá con el
     prefijo .rsvp para ganar por especificidad al ancho fijo de mobile. */
  /* Solo en escritorio, un poco más cerca de la tarjeta (left:0 la deja
     pegada al borde de la banda, muy separada del card) — mobile/tablet no
     se tocan. */
  .rsvp .grabado--esquina-sup-izq {
    width: min(28%, 240px);
    left: 60px;
    transform: none;
  }
  .rsvp .grabado--esquina-inf {
    width: min(42%, 360px);
    transform: none;
  }
  .itinerary__hito {
    padding: 0 var(--space-lg);
  }
  /* 'linear-alternate' del itinerario: en mobile/tablet su columna angosta
     (50% del bloque, tope en 480px) obliga a achicar el texto por debajo del
     tamaño de "Lista" (ver _itinerary.scss). En escritorio la sección tiene
     mucho más ancho disponible (--content:720px, igual que el resto del
     theme) — ensanchando esta estructura puntual a esos mismos 720px, la
     columna de cada paso pasa de ~184px a ~330px y el tamaño completo de
     "Lista" (38px/24px) entra sin desbordar (verificado en vivo, 0px de
     overflow desde 900px de viewport). */
  /* max-width solo no alcanza: .itinerary-structure trae margin:0 auto
     (_itinerary-structure.scss) sin un width propio, y como grid item eso lo
     deja del ancho de su contenido en vez de estirarlo a la columna del
     grid — se vio en vivo (368px medidos en vez de 720px). width explícito
     fuerza el estiramiento real. */
  .itinerary-structure--linear-alternate {
    width: 720px;
    max-width: 720px;
  }
  .itinerary-structure--linear-alternate .itinerary-step__time {
    font-size: 2.375rem;
  }
  .itinerary-structure--linear-alternate .itinerary-step__title {
    font-size: 1.5rem;
  }
  .itinerary-structure--linear-alternate .itinerary-step__note {
    font-size: 2rem;
  }
  /* Popup de historia (layout "popup"): el export de Claude Design solo
     define la vista mobile (pantalla completa, ver _story-modal.scss) —
     esta adaptación a escritorio es nueva. Deja de cubrir el viewport
     entero y pasa a ser un diálogo centrado con tope de ancho/alto, y como
     ya no tapa toda la pantalla necesita un backdrop propio (::before) que
     el mobile no tiene.
     Centrado con margin:auto (inset:0 en las 4 puntas + width/height
     explícitos), NO con transform: un transform en .story-modal crearía un
     "containing block" nuevo para el ::before (position:fixed), y el
     backdrop quedaría confinado a la caja de 600px del diálogo en vez de
     cubrir el viewport entero — se vio en vivo (fondo sin oscurecer detrás
     del diálogo). */
  .story-modal {
    margin: auto;
    width: min(600px, 90vw);
    height: min(720px, 85vh);
    max-height: 85vh;
    border-radius: var(--radius-sheet);
    box-shadow: 0 40px 80px -30px rgba(30, 18, 12, 0.5);
  }
  .story-modal::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(30, 18, 12, 0.55);
  }
  .story-modal__head {
    padding-top: 48px;
  }
  /* .section de arriba resetea el padding con el shorthand; aquí se vuelve a
     reservar el alto del grabado de cabecera (ver _recommendations.scss), que
     en escritorio ya se ve entero porque la banda es más ancha que sus 586px. */
  .recommendations {
    padding-top: 296px;
  }
  .rec__lista {
    max-width: 38ch;
  }
  /* El párrafo de clima (kind: text) es el bloque más largo de Recomendaciones
     — mismo criterio que .faq__a: un tope en ch para que no se estire a todo
     el --content de la sección. */
  .rec__texto {
    max-width: 52ch;
    margin-inline: auto;
  }
  /* En mobile el ancho de la respuesta lo da el padding lateral fijo
     (ver _faq.scss); en desktop eso solo por sí solo dejaría la respuesta
     casi tan ancha como --content (720-820px), incómoda de leer. Un tope
     fijo en px la deja en un ancho de lectura prudente sin importar cuánto
     crezca la columna. .faq__q comparte el mismo tope para que pregunta y
     respuesta se lean en la misma columna — PERO en px, no en ch: "ch" es
     relativo al font-size de cada elemento, y .faq__q (1.6rem Playfair) y
     .faq__a (1.07rem Raleway) tienen tamaños muy distintos, así que el mismo
     "52ch" en cada uno daba anchos muy distintos (medido en vivo: 780px la
     pregunta vs 520px la respuesta) — la pregunta seguía viéndose estirada,
     con el ícono +/- del acordeón lejos del texto, aunque el tope ya estaba
     puesto. En px ambos quedan exactamente parejos. */
  .faq__q, .faq__a {
    max-width: 520px;
    margin-inline: auto;
    padding: 0;
  }
  /* Ancho FIJO, no max-width: con 600px la tarjeta llenaba toda la columna
     de escritorio (720-820px) y perdía forma de tarjeta — el contenido más
     angosto (.rsvp__nota, 31ch ≈ 280px) quedaba flotando en el centro de
     una caja mucho más ancha que él, con el botón de punta a punta abajo
     (reportado en vivo, ver imagen adjunta). 420px es una medida de
     tarjeta real, más grande que el ancho de mobile (338px) pero sin
     estirarse a lo vacío. El padding/margen interno (_rsvp.scss) es fijo
     en px y no cambia acá: se ve igual que en mobile, solo un poco más
     ancha.

     width fijo (no width:100%+max-width): .rsvp__card es un item de grid
     (.section > *{grid-column:content}, ver _base.scss) sin `width` propio
     — margin-inline:auto por sí solo, en un grid item, desactiva el
     justify-self:stretch por defecto y la caja se encoge a su contenido en
     vez de estirarse (279px medido en vivo con solo max-width, sin width).
     Un `width` fijo evita ese problema directamente, sin depender de cómo
     resuelva el navegador el auto-margin en un item de grid. */
  .rsvp__card {
    width: 420px;
    margin-inline: auto;
  }
  /* Estado pendiente ("confirmación de asistencia", sin is-confirmed ni
     is-cancelled): tarjeta más angosta que el resto de estados — el
     contenido pendiente (rótulo + nombre + nota + botón) pesa menos que el
     de confirmado (QR) o cancelado, y a 420px quedaba con más aire del que
     pide. Confirmado y cancelado mantienen los 420px de arriba. */
  .rsvp__card:not(.is-confirmed):not(.is-cancelled) {
    width: 360px;
  }
  /* El ancho lo sigue decidiendo el contenido (fit-content), pero un valor
     de campo corto (CCI, N.º de cuenta) por sí solo encoge demasiado la
     tarjeta y deja el botón pegado al texto. min-width es el piso que evita
     eso — deja el mismo respiro que en el mockup — sin dejar de crecer con
     el contenido si algún banco/label es más largo. */
  .gifts__card, .gifts__registry {
    width: fit-content;
    min-width: 420px;
    max-width: 100%;
    justify-self: center;
  }
  .rsvp__qr-card {
    width: 230px;
  }
}
/* Un segundo escalón para monitores anchos (1280px+): la columna respira un
   poco más, pero el ritmo de bandas apiladas no cambia — mismo patrón que
   usa moderna en su propio segundo breakpoint. */
@media (min-width: 1280px) {
  :root {
    --content:820px;
  }
}
:root {
  --idiet-accent: var(--c-burdeos, #6e2233);
  --idiet-font-display: var(--font-display);
}

.idiet-reopen--inline {
  gap: 9px;
  width: 280px;
  padding: 10px 20px;
  border: 1px solid var(--c-burdeos);
  border-radius: var(--radius-btn);
  background: var(--c-burdeos);
  color: var(--c-tarjeta);
  font-family: var(--font-body-ui);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: normal;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.idiet-reopen--inline:hover {
  background: var(--c-burdeos-cl);
  border-color: var(--c-burdeos-cl);
  color: var(--c-tarjeta);
}