/* === CSS v206 === */

/* -------------------------
   Design tokens
------------------------- */
:root{
  --bg:#fbfaf8;
  --surface: rgba(255,255,255,.90);
  --text:#1f2328;
  --muted: rgba(31,35,40,.65);
  --line: rgba(31,35,40,.12);
  --shadow: 0 28px 70px rgba(0,0,0,.10);

  --accent: rgba(231,223,214,.90);
  --accent2: rgba(221,230,225,.90);
  --accent3: rgba(220,232,255,.85);
  
  --story-slide-w: 86vw; /* fallback si JS no llega a setearlo */

  /* Brand / section colors */
  --brand: #cbdcf6;
  --section-peach: #FCE9D8;
  --section-green: #D9E8DE;

  /* Typography */
  --font-ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-editorial: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-signature: "Pinyon Script", cursive;

  /* Backwards-compatible aliases */
  --sans: var(--font-ui);
  --serif: var(--font-editorial);

  --radius: 18px;
  --transition: 500ms ease;
  --topbar-h: 56px;

  /* Fondo wash + textura (si existe /img/Fondo.png) */
  --bg-wash: var(--brand);
  --bg-wash-opacity: .18;     /* 0.12–0.26 */
  --bg-texture-opacity: .10;  /* 0.06–0.16 */

  /* Splash: textura real del sobre (subir a /assets/Textura-Sobre.png) */
  --envelope-texture: url("/assets/Textura-Sobre.png");
  --envelope-texture-opacity: .075; /* 0.10–0.26 */
}

/* -------------------------
   Base / reset
------------------------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
[hidden]{ display:none !important; }

body{
  font-family: var(--serif);
  color: var(--text);
  background: var(--bg);
  overflow: auto; /* scroll por defecto (bloqueamos solo en splash/intro) */
}

/* Scroll habilitado tras abrir */
html.is-open body{ overflow:auto; }

/* Menú abierto: lock */
html.menu-open, html.menu-open body{
  overflow:hidden;
  height:100%;
  touch-action:none;
}

/* Evitar scroll horizontal por full-bleed */
html, body{ overflow-x:hidden; }

/* Fondo global (robusto): wash + textura opcional */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(231,223,214,.22), transparent 60%),
    radial-gradient(900px 700px at 80% 90%, rgba(221,230,225,.22), transparent 60%),
    linear-gradient(180deg, #fbfaf8, #f6f3ef);
}
/* Fondo global SIN imagen */
html::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: transparent;
}

/* -------------------------
   Layout helpers
------------------------- */
.container{
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
}

.section__inner{
  max-width: 980px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

@media (max-width: 520px){
  .container{ padding: 0 16px; }
  .section__inner{ padding-left: 16px; padding-right: 16px; }
}

/* -------------------------
   Topbar
------------------------- */

/* =====================================================================
   SECTION: NAV
   ===================================================================== */

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display:flex;
  align-items:center;
  background: rgba(251,250,248,.80);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner{
  width: min(980px, calc(100% - 40px));
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
}
.brand{
  text-decoration:none;
  color: var(--text);
  font-size:16px;
}
.menu-toggle{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.75);
  font-size:18px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Topbar transparente SOLO mientras estamos en el Hero */
.topbar.is-hero{
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Ajustes sutiles para legibilidad sobre imagen */
.topbar.is-hero .brand{
  color: rgba(31,35,40,.92);
}
.topbar.is-hero .nav a{
  color: rgba(31,35,40,.88);
}
.topbar.is-hero .menu-toggle{
  background: rgba(255,255,255,.55);
  border-color: rgba(31,35,40,.12);
}

/* Si el menú móvil está abierto, forzamos topbar sólida (mejor UX) */
html.menu-open .topbar{
  background: rgba(251,250,248,.80);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* -------------------------
   Nav (mobile)
------------------------- */
.nav{
  position: fixed;
  top: var(--topbar-h);
  left:0;
  right:0;
  background: rgba(251,250,248,.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 12px 14px 18px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .35s ease, transform .35s ease;
  z-index: 80;
}
.nav.is-open{ opacity: 1; pointer-events:auto; transform: translateY(0); }

.nav-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 6px 6px 2px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 6px;
}
.nav-title{
  font-family: var(--sans);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nav-close{
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  cursor:pointer;
}
.nav a{
  font-family: var(--sans);
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--text);
  text-decoration:none;
}
.nav a.is-active{
  background: rgba(231,223,214,.60);
  border: 1px solid rgba(31,35,40,.10);
}

.nav-backdrop{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.18);
  opacity: 0;
  pointer-events:none;
  transition: opacity .25s ease;
  z-index: 70;
}
.nav-backdrop.is-open{ opacity:1; pointer-events:auto; }

/* Desktop nav */
@media (min-width: 760px){
  .menu-toggle{ display:none; }
  .nav-backdrop{ display:none !important; }
  .nav{
    position: static;
    display:flex;
    flex-direction: row;
    gap: 10px;
    padding: 0;
    background: transparent;
    border: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .nav-head{ display:none; }
}

/* -------------------------
   Hero
------------------------- */

/* =====================================================================
   SECTION: HERO (#home / hero)
   ===================================================================== */

.hero{ padding: 90px 0 40px; text-align:center; }
.kicker{
  font-family: var(--sans);
  font-size:12px;
  letter-spacing:.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin:0 0 10px;
}
.title{
  font-size: 56px;
  font-weight: normal;
  margin: 0 0 10px;
}
.lead{
  font-family: var(--sans);
  color: var(--muted);
  margin: 14px auto 0;
  max-width: 62ch;
}
.hero-actions{
  margin-top: 22px;
  display:flex;
  justify-content:center;
}
.hero-cta{ min-width: 240px; }
.hero-divider{
  margin: 28px auto 0;
  width: min(420px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.14), transparent);
}
@media (max-width: 480px){
  .title{ font-size: 44px; }
  .hero{ padding: 78px 0 34px; }
}

/* -------------------------
   Sections
------------------------- */
.section{ padding: 54px 0; }
.section-title{ font-size: 32px; font-weight: normal; margin: 0 0 18px; }
.section--with-divider{ position: relative; }
.section-divider{
  width: min(520px, 85%);
  height: 1px;
  margin: 0 auto 22px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
}

/* =========================================================
   Secciones (Editorial 2026)
   - Full-bleed + color solo en: Cuenta atrás, Cómo llegar y Footer
   - Resto: blanco
========================================================= */

/* Respiración tipo editorial */
.section{ padding: 86px 0; }
@media (max-width: 520px){
  .section{ padding: 68px 0; }
}

/* Full-bleed real SOLO para estas secciones */
#cuenta-atras,

/* =====================================================================
   SECTION: CÓMO LLEGAR (#como-llegar)
   ===================================================================== */

#como-llegar,

/* =====================================================================
   SECTION: FOOTER
   ===================================================================== */

.footer{
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
}

/* Fondos */
#cuenta-atras{ background: var(--section-peach); }
#como-llegar{ background: var(--section-green); }
.footer{ background: var(--section-green); }

/* Ancho “bonito” del contenido interno */
#cuenta-atras .section__inner,
#como-llegar .section__inner,
.footer .footer-inner{
  max-width: 980px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
@media (max-width: 520px){
  #cuenta-atras .section__inner,
  #como-llegar .section__inner,
  .footer .footer-inner{
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* “Cómo llegar” (valor único, sin duplicidad) */
#como-llegar{ padding-top: 28px; padding-bottom: 32px; }


/* -------------------------
   Cards / grids (blanco editorial)
------------------------- */
.card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 22px;
  box-shadow: 0 20px 50px rgba(0,0,0,.06);
  padding: 22px;
  font-family: var(--sans);
}

.info{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
}

.info-title{ margin:0 0 6px; font-size:16px; font-weight:900; }
.info-text{ margin:0; color: var(--muted); }

/* Contenedores “flush” (ej: mapa + contenido) */
.card--flush{ padding: 0; overflow: hidden; }

/* Ya no usamos tintes: los anulamos para que no vuelvan a aparecer */
.card--tint-a,
.card--tint-b,
.card--tint-c{
  background: #ffffff;
}

.card-title{ margin: 0 0 10px; font-weight: 900; }
.card-text{ margin: 0 0 10px; color: var(--muted); line-height: 1.55; }

.grid3{ display:grid; grid-template-columns:1fr; gap:14px; }
.grid2{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width: 760px){
  .grid3{ grid-template-columns: repeat(3, 1fr); }
  .grid2{ grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------
   Countdown
------------------------- */
#cuenta-atras .card.countdown{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.count-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  text-align:center;
}

/* Mini tarjetas: blanco sólido, premium */
.count-item{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:18px 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
}

.num{ font-size:34px; font-family: var(--serif); }
.lbl{ font-size:12px; color: var(--muted); font-family: var(--sans); }
.count-note{ margin:14px 0 0; color: var(--muted); font-size:13px; text-align:left; }

/* Responsive: 2x2 en móvil */
@media (max-width: 520px){
  .count-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
}

/* -------------------------
   Buttons / pills
------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-decoration:none;
  font-family: var(--sans);
  font-size:14px;
  cursor:pointer;
  transition: background var(--transition), transform var(--transition);
  width: fit-content;
}

.btn:hover{ background: rgba(0,0,0,.05); transform: translateY(-1px); }
.btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(203,220,246,.50);
  outline: none;
}
.btn-primary{ background: var(--accent); }
.btn-secondary{ background: var(--accent2); }
.btn-ghost{ background: transparent; }

.btn--peach{
  background-color: #FFE2C6;
  border-color: #F2C9A8;   /* no hace falta redeclarar border completo */
  color: var(--text);
  font-weight: 600;
}

/* Mantiene el “lift” del .btn:hover, aquí solo cambiamos color/borde */
.btn--peach:hover{
  background-color: #FAD8BC;
  border-color: #E6B894;
}

/* Accesibilidad: foco visible elegante */
.btn--peach:focus-visible{
  outline: 2px solid rgba(242,201,168,.7);
  outline-offset: 3px;
}

/* En tu HTML lo usas */
.btn--full{ width: 100%; justify-content: center; }

.pill{
  font-family: var(--sans);
  font-size: 13px;
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  gap: 6px;
  line-height: 1;
}
.pill strong{ font-weight: 800; letter-spacing: .01em; }
.pill--a{ background: var(--accent); }
.pill--b{ background: var(--accent2); }
.pill--c{ background: var(--accent3); }

/* -------------------------
   Location (stack)
------------------------- */
/* Cómo llegar: el contenedor grande (mapa + tarjetas) va en verde y sin halo */
#como-llegar .card.card--flush.location.location--stack{
  background: var(--section-green);
  border: 0;
  box-shadow: none;
  overflow: hidden; /* recorta blur de sombras internas (halo) */
}

.card.card--flush.location.location--stack{
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
}
.location--stack .location-media{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.02);
}
.location--stack .location-media iframe{
  display:block;
  width:100%;
  height: clamp(280px, 42vw, 440px);
  border:0;
}
.location-bottom{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 760px){
  .location-bottom{
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
  }
}

.location-mini{ border-radius: 18px; background: #ffffff; }
.location-title{ margin:0; font-family: var(--sans); font-weight:900; }
.location-sub{ margin:0; font-family: var(--sans); color: var(--muted); }

.location-address{
  margin: 8px 0 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.60);
}
.location-mini .location-actions{
  width: 100%;
  display:flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}
.location-mini .location-actions > .btn{ width: 100%; min-height: 46px; white-space: nowrap; }
.copy-msg{ margin: 0; min-height: 18px; font-family: var(--sans); font-size: 13px; color: var(--muted); }

.transport-mini{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}
@media (min-width: 760px){
  .transport-mini{
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
}
.transport-mini-card{
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  display:flex;
  flex-direction: column;
}
.transport-mini-head{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 8px;
}
.transport-mini-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.7);
  display:grid;
  place-items:center;
}
.transport-mini-title{
  font-family: var(--sans);
  font-weight: 900;
  line-height: 1.1;
}
.transport-mini-sub{
  font-family: var(--sans);
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.transport-mini-meta{
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(31,35,40,.08);
  display:grid;
  gap: 10px;
}
.tmeta{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap: 8px;
  align-items: start;
}
.tmeta-k{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--muted);
  text-transform: uppercase;
}
.tmeta-v{
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
}

.transport-times{
  margin-top: 10px;
  display:grid;
  gap: 12px;
}
.tt-label{
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 8px;
}
.transport-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items:center;
  margin-top: 0;
}

@media (max-width: 420px){
  .tmeta{ grid-template-columns: 1fr; gap: 6px; }
  .pill{ width: 100%; }
}

/* Centrar “Parking gratuito” en la tarjeta coche */
.transport-mini-card--car .transport-row{
  margin-top: auto;
  margin-bottom: auto;
}

/* -------------------------
   IBAN
------------------------- */

/* =====================================================================
   SECTION: REGALOS (#regalos) — Editorial refinado
   ===================================================================== */

#regalos{
  background: transparent; /* quitamos el fondo melocotón general */
}

/* Header */
#regalos .gift-head{
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
}

#regalos .gift-sub{
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(31,35,40,.72);
}

/* Card principal */
#regalos .gift-card{
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(31,35,40,.06);
  border-radius: 26px;
  padding: 28px;
  max-width: 820px;
  box-shadow: 0 30px 70px rgba(0,0,0,.06);
}

/* Texto */
#regalos .gift-text{
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(31,35,40,.72);
}

#regalos .gift-wink{
  margin: 0 0 22px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(31,35,40,.85);
}

/* IBAN */
#regalos .iban-box{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: rgba(252,233,216,.18); /* melocotón solo aquí */
  border: 1px solid rgba(31,35,40,.08);
  border-radius: 20px;
  padding: 18px 20px;
}

#regalos .iban-label{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(31,35,40,.45);
}

#regalos .iban-value{
  font-family: var(--sans);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .08em;
  color: rgba(31,35,40,.92);
}

/* Botón copiar más premium */
#regalos .btn-copy{
  margin-left: auto;
  border-radius: 999px;
  padding: 10px 18px;
  border: 1px solid rgba(31,35,40,.12);
  background: #ffffff;
  color: rgba(31,35,40,.85);
  font-weight: 600;
  transition: all 200ms ease;
}

#regalos .btn-copy:hover{
  background: #A9DDE3;
  border-color: #A9DDE3;
  color: #1f2328;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(169,221,227,.35);
}

#regalos .btn-copy:active{
  transform: translateY(0);
}

#regalos .gift-thanks{
  margin: 20px 0 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(31,35,40,.62);
}

/* Mobile */
@media (max-width: 520px){
  #regalos .gift-card{
    padding: 22px;
  }

  #regalos .iban-box{
    gap: 12px;
  }

  #regalos .btn-copy{
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }
}

/* -------------------------
   FAQ
------------------------- */
.faq details{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  padding: 12px 12px;
}
.faq details + details{ margin-top: 10px; }
.faq summary{ cursor:pointer; font-family: var(--sans); font-weight: 900; }
.faq p{ margin: 10px 0 0; font-family: var(--sans); color: var(--muted); line-height: 1.55; }

/* -------------------------
   RSVP (form)
------------------------- */

/* =====================================================================
   SECTION: RSVP (#rsvp) — scoped + coherente con #A9DDE3
   ===================================================================== */

#rsvp .form{ display:grid; gap: 18px; }
#rsvp .field{ display:grid; gap: 8px; }

#rsvp label{
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
}

/* RSVP: label de grupo (no es label real) */
.field-label{
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

#rsvp input,
#rsvp textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  outline: none;
  font-family: var(--sans);
  font-size: 14px;
}

#rsvp textarea{ resize: vertical; min-height: 90px; }

/* Focus coherente con identidad (aguamarina #A9DDE3) */
#rsvp input:focus-visible,
#rsvp textarea:focus-visible,
#rsvp select:focus-visible{
  border-color: rgba(169,221,227,.75);
  box-shadow: 0 0 0 3px rgba(169,221,227,.45);
  outline: none;
}

/* Segmented */
#rsvp .segmented{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#rsvp .segmented--3{ grid-template-columns: 1fr; }
@media (min-width: 760px){
  #rsvp .segmented--3{ grid-template-columns: repeat(3, 1fr); }
}

#rsvp .seg{
  position: relative;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.75);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  font-family: var(--sans);
  user-select: none;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

#rsvp .seg input{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

#rsvp .seg span{
  position: relative;
  z-index: 1;
  font-weight: 800; /* un pelín menos bloque que 900 */
  color: rgba(31,35,40,.92);
}

/* Segmented – Selected en azul identidad (#A9DDE3) */
#rsvp .seg:has(input:checked){
  background: rgba(169,221,227,.30);
  border-color: rgba(169,221,227,.75);
}

/* Hover suave */
#rsvp .seg:hover{
  border-color: rgba(169,221,227,.55);
  transform: translateY(-1px);
}

/* Focus accesible aguamarina */
#rsvp .seg:has(input:focus-visible){
  box-shadow: 0 0 0 3px rgba(169,221,227,.40);
}

/* Checked + focused: refuerza halo */
#rsvp .seg:has(input:checked:focus-visible){
  box-shadow: 0 0 0 3px rgba(169,221,227,.55);
}

/* Bloques */
#rsvp .attending-block{
  border: 1px dashed rgba(0,0,0,.14);
  border-radius: 16px;
  padding: 18px;
  background: rgba(255,255,255,.72);
  display: grid;
  gap: 16px;
}

#rsvp .card-mini{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  padding: 18px;

  /* ✅ aire interno consistente */
  display: grid;
  gap: 14px;
  align-content: start;
}

#rsvp .bus-details{
  margin-top: 12px;
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
}

#rsvp .guests-container{ display:grid; gap: 12px; }

#rsvp .guest-card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.80);
  padding: 12px;
}

#rsvp .guest-card--primary{
  background: #ffffff !important;
  background-image: none !important;
}

#rsvp .guest-tag{
  font-family: var(--sans);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);

  /* ✅ ritmo editorial */
  display: block;
  margin: 0 0 2px;
}

#rsvp .guest-list-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* RSVP — Acompañantes: aire real (compatible con botón “Quitar” debajo del título) */
#rsvp .guests-container{
  gap: 16px;
}

#rsvp .guest-card{
  padding: 22px;                 
  border-radius: 16px;
  display: grid;
  gap: 16px;                    
  align-content: start;
}

/* Header: aunque sea “stack”, le damos ritmo */
#rsvp .guest-list-head{
  display: grid;
  gap: 12px;
  align-items: start;
  margin-bottom: 6px;     
}

/* Título */
#rsvp .guest-card .guest-tag{
  margin: 0;                     /* controlado */
}

/* Botón “Quitar” con aire y tamaño cómodo */
#rsvp .guest-card .btn{
  justify-self: start;           /* queda alineado a la izquierda */
  padding: 9px 16px;
  border-radius: 999px;
  margin: 0 0 2px;               /* micro aire antes del siguiente bloque */
}

/* RSVP — Header real del acompañante (DOM: .guest-head + .guest-remove) */
#rsvp .guest-card .guest-head{
  display: grid;
  gap: 10px;                 /* aire entre “ACOMPAÑANTE” y botón */
  padding-bottom: 6px;      /* aire antes de los campos */
  margin-bottom: 3px;
}

/* Botón quitar: un poco más cómodo + no pegado */
#rsvp .guest-card .guest-head .guest-remove{
  justify-self: start;
  padding: 9px 16px;         /* más aire */
  border-radius: 999px;
}

/* Acciones */
#rsvp .form-actions{ display:flex; align-items:center; gap: 14px; flex-wrap: wrap; }
#rsvp .form-msg{ margin:0; min-height: 20px; color: var(--muted); font-family: var(--sans); }
#rsvp .form-hint{ margin:8px 0 0; color: var(--muted); font-family: var(--sans); font-size: 12px; }

/* Resultado */
#rsvp .rsvp-result{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
}

#rsvp .rsvp-result-inner{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#rsvp .rsvp-result-title{
  font-family: var(--sans);
  font-weight: 900; /* 1000 puede ser demasiado y no aporta */
  font-size: 18px;
  margin: 0 0 6px;
}

#rsvp .rsvp-result-text{
  font-family: var(--sans);
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* Intro editorial RSVP */
#rsvp .rsvp-intro{
  margin: 6px 0 26px;
  font-family: var(--sans);
  font-size: clamp(14px, 1.4vw, 15px);
  line-height: 1.65;
  color: rgba(31,35,40,.70);
  max-width: 58ch;
}

#rsvp .rsvp-intro-strong{
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 17px);
  color: rgba(31,35,40,.92);
  display: inline-block;
  margin-bottom: 4px;
}

/* Micro detalle editorial (muy sutil) */
#rsvp .rsvp-intro-strong::after{
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 6px;
  background: rgba(169,221,227,.55); /* #A9DDE3 */
  border-radius: 2px;
}

/* Aire general del contenedor del form */
#rsvp .card.form{ padding: 26px; }

/* Móvil: aire controlado */
@media (max-width: 520px){
  #rsvp .card.form{ padding: 18px; }
  #rsvp .card-mini{ padding: 16px; }
}

/* Respeto a reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  #rsvp .seg{ transition: none; }
  #rsvp .seg:hover{ transform: none; }
}

/* -------------------------
   Footer
------------------------- */
.footer{
  padding: 56px 0 78px;
  text-align:center;
  font-family: var(--sans);
  color: var(--muted);
}
.footer-inner{ display:flex; flex-direction: column; align-items:center; gap: 8px; }
.footer-mark{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.70);
  opacity: .95;
  animation: pulse 2.8s ease-in-out infinite;
}
.footer-title{ margin:0; color: var(--text); font-size: 18px; }
.footer-sub{ margin:0; font-size: 13px; color: var(--muted); }
@keyframes pulse{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }


/* =====================================================================
   COMPONENT: BUTTONS
   ===================================================================== */

.open-btn{
  display:inline-block;
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration:none;
  color: var(--text);
  font-family: var(--sans);
  transition: background var(--transition), transform var(--transition);
  background: rgba(255,255,255,.75);
  cursor:pointer;
}
.open-btn:hover{ background: rgba(0,0,0,.05); transform: translateY(-1px); }


/* -------------------------
   Reveal (progressive enhancement)
   - Por defecto: VISIBLE (si JS falla, la web se ve)
   - Con JS (html.js): animamos desde hidden → visible
------------------------- */
.reveal{
  opacity:1;
  transform:none;
}

/* Solo si JS cargó, aplicamos la animación */
html.js.reveal-ready .reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

html.js.reveal-ready .reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
/* -------------------------
   To-top
------------------------- */
.to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
}
.to-top:hover{ background: rgba(255,255,255,.95); transform: translateY(8px); }
.to-top.is-visible{ opacity:1; pointer-events:auto; transform: translateY(0); }

/* -------------------------
   Audio toggle (mute/unmute)
------------------------- */
.audio-toggle{
  position: fixed;
  right: 18px;
  bottom: 70px; /* no pisa el to-top */
  z-index: 10001; /* por encima del splash (z-index 10000) */
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
.audio-toggle:hover{
  background: rgba(255,255,255,.95);
  transform: translateY(-1px);
}
.audio-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(203,220,246,.50), 0 14px 34px rgba(0,0,0,.10);
}

/* En móvil lo bajamos un pelín */
@media (max-width: 520px){
  .audio-toggle{ right: 16px; bottom: 66px; }
}

/* -------------------------
   Confetti
------------------------- */
#confettiCanvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  display: none;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .footer-mark{ animation:none; }
  #confettiCanvas{ display:none !important; }
}

/* -------------------------
   Programación (Timeline centrada alternada editorial)
   Minimal 2026 + guiños sutiles
   Acento: #cbdcf6
------------------------- */

/* =====================================================================
   SECTION: PROGRAMA / TIMELINE (#programa)
   ===================================================================== */


.timeline{
  --tl-accent: #cbdcf6;

  /* Línea visible pero elegante */
  --tl-line: rgba(203,220,246,.34);

  --tl-ink: rgba(31,35,40,.82);
  --tl-muted: rgba(31,35,40,.58);

  /* Mobile first: línea a la izquierda */
  --tl-line-x: 14px;

  list-style:none;
  margin:0;
  padding: 8px 0 0;
  position:relative;
}

/* Línea vertical (mobile: izquierda) */
.timeline::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:var(--tl-line-x);
  width:1px;
  background:var(--tl-line);
}

/* -------------------------
   DÍAS (capítulos centrados)
------------------------- */
.timeline-day{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:8px;
  padding: 26px 0 14px;
  margin:0;
}

.timeline-day__label{
  font-family:var(--sans);
  font-size:14px;
  font-weight:650;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tl-ink);
}

.timeline-day__sub{
  font-family:var(--sans);
  font-size:14px;
  color:var(--tl-muted);
  letter-spacing:.02em;
}

.timeline-day__rule{
  height:1px;
  width:min(720px,100%);
  background: rgba(203,220,246,.55);
}

/* Sábado: un pelín más protagonista, sin “gritar” */
.timeline-day--main .timeline-day__label{
  color: rgba(31,35,40,.88);
}
.timeline-day--main .timeline-day__rule{
  background: rgba(203,220,246,.70);
}

/* -------------------------
   EVENTOS (Mobile)
   (una columna, legible)
------------------------- */
.timeline-item{
  position:relative;
  margin:0 0 26px; /* compacto */
  padding-left:calc(var(--tl-line-x) + 28px); /* deja hueco al círculo (44px) */
}

/* Dot grande (círculo + icono) - mobile */
.timeline-dot{
  position:absolute;

  /* centrado exacto sobre la línea */
  left: var(--tl-line-x);
  top: 10px;
  transform: translateX(-50%) scale(.98);

  width: 44px;
  height: 44px;
  border-radius: 999px;

  /* Fondo blanco para contraste del icono */
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(203,220,246,.92);

  display:grid;
  place-items:center;

  opacity:.92;
  transition: opacity 360ms ease, transform 520ms ease;
}

/* Dot principal (sábado) sutilmente mayor */
.timeline-dot--main{
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,.90);
  border-color: rgba(203,220,246,.98);
}

/* Icono dentro del dot */
.tl-ico{
  width: 26px; /* ~59% de 44px */
  height: 26px;
  display:block;
}

.tl-ico *{
  fill: none;
  stroke: rgba(140,165,230,.98); /* un pelín más oscuro que #cbdcf6 */
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* Stroke draw sutil */
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
  transition: stroke-dashoffset 520ms ease;
  opacity: 1;
}

/* Entrada: mobile */
.timeline-item.reveal.is-visible .timeline-dot{
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.timeline-item.reveal.is-visible .tl-ico *{
  stroke-dashoffset: 0;
}

/* Sin tarjetas */
.timeline-card{
  border:none;
  background:transparent;
  padding:0;
  margin:0;
}

.timeline-title{
  margin:0 0 6px;
  font-family:var(--sans);
  font-weight:650;
  font-size:20px;
  line-height:1.22;
  letter-spacing:.01em;
  color:var(--tl-ink);
  display:block;
  padding:0; /* sin desplazamientos */
}

/* Quitamos la rayita azul del título */
.timeline-title::before{ content:none; }

/* “—” */
.timeline-dash{ opacity:.55; margin:0 .25em; }

/* Hora integrada */
.timeline-time{
  font-weight:600;
  font-size:14px;
  color: rgba(31,35,40,.70);
  white-space:nowrap;
}

/* Texto breve (1–2 líneas) */
.timeline-text{
  margin:0;
  font-family:var(--sans);
  color: rgba(31,35,40,.70);
  line-height:1.5;
  max-width:56ch;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.timeline-note{
  margin: 6px 0 0;
  font-family:var(--sans);
  font-size:14px;
  color: var(--tl-muted);
}

/* -------------------------
   DESKTOP (≥860px)
   Línea centrada + alternancia
------------------------- */
@media (min-width: 860px){
  .timeline{
    --tl-center: 50%;
    --tl-gap: 26px;
    --tl-max: 360px;
  }

  /* Línea centrada */
  .timeline::before{
    left: var(--tl-center);
    transform: translateX(-.5px);
  }

  /* Layout 3 columnas: izq / centro dot / dcha */
  .timeline-item{
    margin: 0 0 18px;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    column-gap: var(--tl-gap);
    align-items: center;
  }

  /* Dot en carril central */
  .timeline-dot{
    position: relative;
    left: auto;
    top: auto;

    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;

    transform: scale(.98); /* estado inicial desktop */
  }

  /* Entrada: desktop (sin translateX) */
  .timeline-item.reveal.is-visible .timeline-dot{
    opacity: 1;
    transform: scale(1);
  }

  /* Cards */
  .timeline-card{
    grid-row: 1;
    max-width: var(--tl-max);
  }

  /* Izquierda por defecto */
  .timeline-card{
    grid-column: 1;
    justify-self: end;
    padding-right: var(--tl-gap);
    text-align: right;
  }

  /* Derecha */
  .timeline-item--right .timeline-card{
    grid-column: 3;
    justify-self: start;
    padding-left: var(--tl-gap);
    padding-right: 0;
    text-align: left;
  }

  /* Título sin offsets */
  .timeline-title{
    padding: 0;
    margin: 0 0 6px;
  }
  .timeline-item--right .timeline-title{
    padding: 0;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .timeline-dot{
    transition: none;
    transform: none;
  }
  .tl-ico *{
    transition: none;
    stroke-dashoffset: 0;
  }
}

/* =========================================
   HERO EDITORIAL (Nombres protagonistas)
   Imagen: /assets/finca-mirabel.png
========================================= */

/* Utilidad accesible (si no existe ya) */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

.hero-editorial{
  /* Full-bleed aunque esté dentro de .container */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  position: relative;
  min-height: calc(100vh - var(--topbar-h));
  padding: clamp(88px, 18vh, 150px) 20px 22px;

  display: flex;
  align-items: stretch;
  justify-content: center;
  text-align: center;

  background-image: url("/assets/finca-hero-v2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 70%;

  /* Para que el texto respire */
  color: var(--text);
}

/* Overlay muy sutil: arriba más claro, abajo apenas */
.hero-editorial__overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.86) 0%,
    rgba(255,255,255,.70) 38%,
    rgba(255,255,255,.38) 72%,
    rgba(255,255,255,.18) 100%
  );
}

/* Micro textura/grano (casi imperceptible) */
.hero-editorial::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: .55;
}

/* Layout interno: TOP (texto) + BOTTOM (botón) */
.hero-editorial__inner{
  position: relative;
  z-index: 2;
  width: min(820px, 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

/* Subimos ligeramente el bloque de texto (no centrado matemático) */
.hero-editorial__top{
  padding-top: clamp(6px, 2vh, 18px);
  display: grid;
  justify-items: center;
  gap: 18px;
}

/* Fecha: más presencia + divisor fino + tracking */
.hero-date{
  font-family: var(--sans);
  /* ↓ ~10–15% menos presencia */
  font-size: clamp(11px, 1.35vw, 13px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(31,35,40,.62);

  margin: 0;
  /* ↑ un pelín más arriba (editorial secundario) */
  margin-top: -6px;

  position: relative;
  padding-bottom: 10px;
}

.hero-date::after{
  content:"";
  display:block;
  height:1px;
  width: min(200px, 62vw);
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
}

/* Frase: secundaria pero fuerte */
.hero-phrase{
  margin: 0;
  max-width: 34ch;
  margin-inline: auto;
  font-family: var(--serif);
  line-height: 1.25;
  color: rgba(31,35,40,.90);
  font-size: clamp(18px, 3.6vw, 26px);
}

.hero-phrase .hero-line{
  display:block;
}

.hero-phrase-strong{
  font-weight: 500;
}

.hero-highlight{
  position: relative;
  display: inline;                 /* ✅ no rompe el wrapping */
  padding: 0 .06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  isolation: isolate;
}

.hero-highlight::after{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  bottom: 1px;
  height: 10px;                    /* tu grosor */
  background: rgba(169,221,227,.75);
  border-radius: 8px;
  z-index: -1;                     /* ahora funciona por isolation */
  pointer-events: none;
}


/* Nombres: protagonistas absolutos */
.hero-names{
  margin: 0;
  font-family: 'Pinyon Script', cursive;
  font-weight: 400;
  line-height: 1.05;

  /* Ajustado para caligrafía */
  font-size: clamp(56px, 10vw, 120px);
  letter-spacing: 0.01em;

  color: rgba(31,35,40,.96);
}

.hero-amp{
  color: var(--section-green);
  font-weight: inherit;
  padding: 0 .12em;
}

/* BOTTOM: botón al final con aire */
.hero-editorial__bottom{
  padding-bottom: clamp(4px, 2vh, 18px);
  display: flex;
  justify-content: center;
}

/* Botón ligero: no compite con titular */
.btn-hero{
  padding: 12px 26px;
  border-radius: 999px;
  border: 1px solid rgba(31,35,40,.16);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(6px);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: .02em;
  transition: background .28s ease, transform .28s ease, border-color .28s ease;
}
.btn-hero:hover{
  background: rgba(255,255,255,.82);
  border-color: rgba(31,35,40,.20);
  transform: translateY(-1px);
}
.btn-hero:focus-visible{
  box-shadow: 0 0 0 3px rgba(203,220,246,.45);
  outline: none;
}

/* Mobile fine-tuning */
@media (max-width: 520px){
  .hero-editorial{
    /* un pelín menos de aire arriba para que no “flote” */
    padding: 76px 16px 18px;

    /* impacto como desktop */
    background-size: cover;

    /* foco: centramos mejor la finca detrás del texto */
    background-position: 50% 56%;

    /* altura: evita sensación de vacío */
    min-height: 86svh;
  }

  /* micro control: menos separación interna para que todo se compacte */
  .hero-editorial__inner{ gap: 14px; }
  .hero-editorial__top{ gap: 12px; }
}


/* =========================================
   Tipografía (consolidada)
   - UI: Inter
   - Editorial: Cormorant
   - Firma: Pinyon (solo nombres hero)
========================================= */

/* Base global */
html, body{ font-family: var(--font-ui); }

/* Titulares editoriales */
.section-title,
section h2,
section h3{
  font-family: var(--font-editorial);
  font-weight: 500;
  letter-spacing: .01em;
}

/* Hero */
.hero-names{
  font-family: var(--font-signature);
  font-size: clamp(64px, 10vw, 130px); 
  line-height: 1.02;
}

.hero-names .hero-amp{
  color: inherit; 
  font-weight: inherit;
}

/* Fecha ahora con mismo impacto visual */
.hero-date{
  font-family: var(--font-editorial);
  font-size: clamp(40px, 6.5vw, 85px); 
  font-weight: 500;
  letter-spacing: .03em; /* reducido para que no se vea exagerado */
  text-transform: none;  /* más elegante al crecer */
  line-height: 1.1;
}

/* Frase se mantiene más ligera */
.hero-phrase{
  font-family: var(--font-ui);
  font-weight: 500;
}

/* Timeline (legible) */
.timeline-day__label{
  font-family: var(--font-editorial);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.timeline-time{
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
}


/* =========================================
   Dress code – CONSOLIDADO (editorial, sin cards)
   Objetivo:
   - look editorial (aire + tipografía limpia)
   - 2 columnas en desktop
   - imagen soporte (35–40%) / texto protagonista (60–65%)
   - sin !important, sin widths fijos heredados
========================================= */

/* Encabezado editorial de sección (si solo se usa aquí, se queda; si lo reutilizas, perfecto) */
.section-head{
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}
.section-subtitle{
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Base (mobile-first) */
.dresscode-grid{
  display: grid;
  gap: 20px;
  margin-top: 18px;
}

/* Si en tu HTML existe .dresscode-card de etapas anteriores, lo neutralizamos para que no parezca “tarjeta UI” */
.dresscode-card{
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Imagen: integrada, suave (sin “bloque encajonado”) */
.dresscode-media{
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
}
.dresscode-media img{
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(.98) contrast(.98);
}

/* Columna texto: editorial, sin tarjeta */
.dresscode-copy{
  display: grid;
  align-content: start;
  gap: 16px;
  padding-top: 6px;
}
.dresscode-lead{
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.55;
  max-width: 58ch;
  color: rgba(31,35,40,.88);
}

/* Reglas (ligeras, sin bullets) */
.dresscode-rules{
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(31,35,40,.10);
  max-width: 56ch;
}
.dresscode-rule{
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .01em;
  color: rgba(31,35,40,.82);
}

/* Layout editorial en desktop */
@media (min-width: 680px){
  /* Proporción editorial (imagen soporte / texto protagonista) */
  .dresscode-grid{
    grid-template-columns: 36% 64%;
    column-gap: clamp(28px, 3.2vw, 56px);
    align-items: start;
  }

  /* Imagen más contenida, con aire arriba */
  .dresscode-media{
    margin-top: 22px;
    max-width: 420px;
    aspect-ratio: 4 / 5; /* un pelín menos alta que 3/4 */
  }
  .dresscode-media img{
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  /* Texto: respira respecto a la imagen */
  .dresscode-copy{
    padding-top: 22px;
    padding-left: 6px;
  }
}

/* Desktop grande */
@media (min-width: 1024px){
  .dresscode-grid{
    grid-template-columns: 35% 65%;
  }
  .dresscode-media{
    max-width: 460px;
    margin-top: 26px;
  }
}

/* -------------------------
   Nuestra historia – Carrusel editorial (centro protagonista + peek)
   - Centro nítido y dominante
   - Laterales visibles (peek simétrico)
   - Bloque editorial centrado y debajo del texto
------------------------- */

/* =====================================================================
   SECTION: HISTORIA (#historia) + GALERÍA
   ===================================================================== */


.story{ text-align: center; }

.story-intro{
  margin: 10px auto 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(31,35,40,.72);
  max-width: 42ch;
}

/* Bloque centrado */
.story-carousel{
  position: relative;
  margin: 18px auto 0;
  padding-bottom: 6px;
  max-width: 980px;              /* ancho “editorial” (más como te gustaba antes) */
}

.story-viewport{
  overflow: hidden;
  outline: none;
  touch-action: pan-y;
  width: 100%;

  /* Peek estable y simétrico */
  padding: 14px clamp(18px, 4.8vw, 72px) 6px;
}

/* Track se mueve por JS */
.story-track{
  display: flex;
  align-items: center;
  gap: 18px;
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform 700ms cubic-bezier(.22,1,.36,1);
}

/* El ancho real lo fija JS con --story-slide-w */
.story-slide{
  flex: 0 0 var(--story-slide-w);
  margin: 0;
  border-radius: 22px;
  overflow: hidden;

  /* Alto consistente para que siempre “existan” 3 presencias */
  height: clamp(260px, 34vw, 520px);

  transform: scale(.92);
  opacity: .92;
  transition: transform 700ms cubic-bezier(.22,1,.36,1), opacity 400ms ease;
}

.story-slide.is-active{
  transform: scale(1);
  opacity: 1;
}

.story-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
}

/* Flechas minimal */
.story-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(31,35,40,.10);
  background: rgba(255,255,255,.78);
  color: rgba(31,35,40,.70);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  transition: opacity 250ms ease, transform 250ms ease, background 250ms ease;
  z-index: 5;
  pointer-events: auto;
  opacity: .55;
}
.story-carousel:hover .story-nav{ opacity: .9; }
.story-nav:hover{ background: rgba(255,255,255,.95); transform: translateY(-50%) scale(1.03); }
.story-nav svg{ width: 18px; height: 18px; }

.story-nav--prev{ left: 10px; }
.story-nav--next{ right: 10px; }

/* Dots discretos */
.story-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.story-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(203,220,246,.55); /* #cbdcf6 */
  cursor: pointer;
  transition: transform 250ms ease, background 250ms ease, opacity 250ms ease;
  opacity: .75;
}
.story-dot[aria-current="true"]{
  background: rgba(203,220,246,1);
  opacity: 1;
  transform: scale(1.2);
}

/* Mobile */
@media (max-width: 520px){
  .story-intro{ font-size: 13px; max-width: 34ch; }

  .story-track{ gap: 14px; }
  .story-viewport{ padding: 12px clamp(14px, 4.8vw, 48px) 6px; }

  .story-slide{
    height: clamp(240px, 72vw, 420px);
    border-radius: 20px;
  }

  .story-nav{ display: none; }
}
/* =========================================================
   COMO LLEGAR – Modo llegada (scoped)
   (Aislado bajo #como-llegar para NO afectar Galería u otras secciones)
   Fix: evitar “hueco” en Bus + mantener botones abajo en Coche
   ========================================================= */

#como-llegar .arrival-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 10px;
}

@media (min-width: 860px){
  #como-llegar .arrival-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#como-llegar .arrival-card{
  position: relative;
  height: 100%;
  width: 100%;
  min-width: 0;
  overflow: hidden;

  border: 1px solid rgba(31,35,40,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  padding: 18px 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.06);

  /* ✅ mejor que grid aquí: evita empujar contenido al fondo */
  display: flex;
  flex-direction: column;
}

#como-llegar .arrival-head{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

/* Iconos (pin/bus/coche): trazo suave, evita “mancha negra” */
#como-llegar .location-spot__ico,
#como-llegar .arrival-ico{
  color: rgba(140,165,230,.98);
}

/* Más aire entre el bloque de localización y el mapa */
#como-llegar .location-spot{
  margin-bottom: 18px; /* prueba 18–28px */
}
@media (min-width: 860px){
  #como-llegar .location-spot{
    margin-bottom: 22px;
  }
}

/* Tamaño fijo de iconos (coherente y centrado) */
#como-llegar .location-spot__ico,
#como-llegar .arrival-ico{
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  align-self: center;
  border-radius: 18px;
  border: 1px solid rgba(31,35,40,.10);
  background: rgba(255,255,255,.55);
}

#como-llegar .arrival-ico-svg{ width: 28px; height: 28px; display:block; }

#como-llegar .location-spot__ico svg,
#como-llegar .arrival-ico svg{
  width: 28px;
  height: 28px;
  display: block;
}

#como-llegar .location-spot__ico svg,
#como-llegar .location-spot__ico svg *,
#como-llegar .arrival-ico svg,
#como-llegar .arrival-ico svg *{
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#como-llegar .arrival-title{
  font-family: var(--sans, var(--font-ui, Inter, system-ui));
  font-weight: 900;
  font-size: 15px;
  line-height: 1.15;
  color: rgba(31,35,40,.92);
}

#como-llegar .arrival-sub{
  font-family: var(--sans, var(--font-ui, Inter, system-ui));
  font-size: 13px;
  line-height: 1.35;
  color: rgba(31,35,40,.62);
  margin-top: 3px;
}

#como-llegar .arrival-meta{
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(31,35,40,.08);

  /* ✅ ya NO se pega abajo => desaparece el hueco grande */
  margin-top: 12px;
}

/* En coche: queremos botones abajo SIEMPRE */
#como-llegar .arrival-card--car .location-actions{
  display: grid;
  gap: 10px;
  width: 100%;

  /* ✅ empuja acciones al fondo solo en “coche” */
  margin-top: auto;
}

#como-llegar .location-spot{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: left;
}

/* Fix solape en “Bus”: etiquetas largas (RECOMENDACIÓN) no deben invadir la columna del valor */
#como-llegar .arrival-meta .tmeta{
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

/* Permitir que el grid encaje bien (evita overflow “por defecto” de min-width:auto) */
#como-llegar .arrival-meta .tmeta-k,
#como-llegar .arrival-meta .tmeta-v{
  min-width: 0;
}

/* La etiqueta puede partir línea sin solapar */
#como-llegar .arrival-meta .tmeta-k{
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
}

/* El valor también debe poder partir si es largo */
#como-llegar .arrival-meta .tmeta-v{
  overflow-wrap: anywhere;
}
    /* Forzar & del Hero en negro como nombres */
    .hero-names .hero-amp{ color: inherit !important; }

/* =====================================================================
   SAFE EDIT ZONE (HTML order)
   - Añade aquí ajustes por sección SIN tocar reglas globales.
   - Preferir selectores con ID (#como-llegar, #historia, etc.) para evitar efectos dominó.
   ===================================================================== */

/* [SECTION OVERRIDE] INTRO (#intro) */

/* [SECTION OVERRIDE] HERO (#home) */

/* [SECTION OVERRIDE] CUENTA ATRÁS (#cuenta-atras) – Add to calendar */
#cuenta-atras .cal-cta{
  margin-top: 16px;
  text-align: center;
}

#cuenta-atras .cal-cta__copy{
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(31,35,40,.62);
}

#cuenta-atras .cal-cta__links{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 13px;
}

#cuenta-atras .cal-link{
  color: rgba(31,35,40,.78);
  text-decoration: none;
  border-bottom: 1px solid rgba(31,35,40,.18);
  padding-bottom: 1px;
  transition: border-color 250ms ease, color 250ms ease, transform 250ms ease;
}

#cuenta-atras .cal-link:hover{
  color: rgba(31,35,40,.92);
  border-bottom-color: rgba(31,35,40,.35);
  transform: translateY(-1px);
}

#cuenta-atras .cal-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(203,220,246,.45);
  border-radius: 6px;
}

#cuenta-atras .cal-sep{
  color: rgba(31,35,40,.38);
}

/* [SECTION OVERRIDE] HISTORIA + GALERÍA (#historia) */

/* [SECTION OVERRIDE] PROGRAMA / TIMELINE (#programa) */

/* [SECTION OVERRIDE] CÓMO LLEGAR (#como-llegar) */

/* [SECTION OVERRIDE] DRESS CODE (#dress-code) */

/* [SECTION OVERRIDE] FAQ
#faq .faq-head{
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  text-align: left;
}

#faq .faq-sub{
  margin: 0;
  font-family: var(--font-ui, Inter, system-ui);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(31,35,40,.68);
  max-width: 62ch;
}

#faq .faq-list{
  display: grid;
  gap: 12px;
}

/* Cada item: sin card pesada, solo línea + fondo sutil */
#faq .faq-item{
  border: 1px solid rgba(31,35,40,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  padding: 0;
  overflow: hidden;
  transition: background 250ms ease, border-color 250ms ease, transform 250ms ease;
}

#faq .faq-item:hover{
  background: rgba(255,255,255,.88);
  border-color: rgba(31,35,40,.14);
  transform: translateY(-1px);
}

/* Estado abierto: un pelín más “tinta” editorial */
#faq .faq-item[open]{
  background: rgba(255,255,255,.86);
  border-color: rgba(31,35,40,.14);
}

#faq summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-family: var(--font-ui, Inter, system-ui);
  font-weight: 700;
  font-size: 14px;
  color: rgba(31,35,40,.88);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  -webkit-tap-highlight-color: transparent;
}

/* Quitar marcador default */
#faq summary::-webkit-details-marker{ display: none; }

/* Caret minimal */
#faq summary::after{
  content: "＋";
  font-weight: 700;
  color: rgba(31,35,40,.55);
  transition: transform 250ms ease, color 250ms ease;
}

/* Abierto: cambia símbolo y estilo */
#faq details[open] summary::after{
  content: "—";
  color: rgba(31,35,40,.65);
}

#faq .faq-body{
  padding: 0 16px 14px;
  border-top: 1px solid rgba(31,35,40,.08);
}

#faq .faq-body p{
  margin: 12px 0 0;
  font-family: var(--font-ui, Inter, system-ui);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(31,35,40,.70);
  max-width: 70ch;
}

/* Focus visible accesible (usa aguamarina #A9DDE3) */
#faq summary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(169,221,227,.55);
  border-radius: 14px;
}

/* Mobile fine-tuning */
@media (max-width: 520px){
  .hero-editorial{
    padding: 90px 18px 20px;

    /* Volvemos a cover para mantener impacto */
    background-size: cover;

    /* Ajustamos foco para que la casa quede visible */
    background-position: 50% 22%;

    /* Menos altura para evitar sensación de vacío */
    min-height: 82svh;
  }
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  #faq .faq-item{ transition: none; }
  #faq .faq-item:hover{ transform: none; }
  #faq summary::after{ transition: none; }
}

/* [SECTION OVERRIDE] REGALOS / IBAN (#iban) */

/* [SECTION OVERRIDE] RSVP (#rsvp) */

/* RSVP result calendar */
.rsvp-calendar{
  margin-top: 18px;
}

.rsvp-calendar__copy{
  margin: 0 0 6px;
  font-size: 13px;
  color: rgba(31,35,40,.65);
}

.rsvp-calendar__links{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

/* [DEBUG/HOTFIX] RSVP — Forzar selected en azul (#A9DDE3) */
#rsvp label.seg:has(input:checked){
  background: rgba(169,221,227,.30) !important;
  border-color: rgba(169,221,227,.75) !important;
}

/* Focus teclado (aguamarina) */
#rsvp label.seg:has(input:focus-visible){
  box-shadow: 0 0 0 3px rgba(169,221,227,.40) !important;
  border-color: rgba(169,221,227,.75) !important;
}

#rsvp label.seg:has(input:checked:focus-visible){
  box-shadow: 0 0 0 3px rgba(169,221,227,.55) !important;
}

/* [SECTION OVERRIDE] RSVP — CTA “Enviar confirmación” visible y premium */
#rsvp .form-actions{
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;

  /* ✅ centra el CTA y lo integra mejor en el card */
  justify-content: center;
}

/* Botón principal: más presencia + coherencia con #A9DDE3 */
#rsvp .form-actions .btn.btn-primary{
  background: rgba(169,221,227,.55);          /* #A9DDE3 */
  border-color: rgba(169,221,227,.80);
  color: rgba(31,35,40,.92);
  font-weight: 800;

  /* ✅ ancho consistente (desktop) */
  width: min(340px, 100%);
  justify-content: center;
}

#rsvp .form-actions .btn.btn-primary:hover{
  background: rgba(169,221,227,.68);
  transform: translateY(-1px);
}

/* Mensaje de estado debajo, ocupa línea completa */
#rsvp .form-actions .form-msg{
  flex-basis: 100%;
  text-align: center;
  min-height: 18px;
}

/* Móvil: CTA a todo ancho */
@media (max-width: 520px){
  #rsvp .form-actions{
    justify-content: stretch;
  }
  #rsvp .form-actions .btn.btn-primary{
    width: 100%;
  }
}
/* [SECTION OVERRIDE] FOOTER */


/* Accesibilidad: reducir animaciones si el usuario lo solicita */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
/* =========================================================
   Reveal (progressive enhancement)
   - Sin JS (o si JS falla): el contenido SE VE
   - Con JS (html.js): animación suave al entrar
   ========================================================= */

/* Default: visible */
.reveal{
  opacity: 1;
  transform: none;
}

/* Con JS: pre-estado oculto y animable */
html.js .reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}

/* Visible cuando JS añade .is-visible */
html.js .reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================================
   SPLASH (Sobre 3D) + IntroPanel + Open
   ÚNICA FUENTE DE VERDAD (alineado con tu HTML actual)
   - Estados: html.is-splash / html.is-envelope-opening / html.is-envelope-intro / html.is-intro / html.is-open
   ===================================================================== */

/* Lock scroll SOLO durante splash/reveal */
html.is-splash, html.is-splash body,
html.is-reveal, html.is-reveal body{
  height: 100%;
  overflow: hidden;
}

/* Main: que no asome por debajo */
html.is-splash main#home,
html.is-reveal main#home{ visibility: hidden !important; }
html.is-open   main#home{ visibility: visible !important; }

/* ---------------------------------------------------------
   SPLASH container
--------------------------------------------------------- */
#splash.splash--full-envelope{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;

  /* ✅ Marfil neutro (premium) — sin beige/sepia */
  background:
    radial-gradient(1200px 820px at 50% 38%, rgba(255,255,255,.98), rgba(255,255,255,0) 62%),
    radial-gradient(1200px 900px at 50% 86%, rgba(0,0,0,.10), rgba(0,0,0,0) 66%),
    linear-gradient(180deg, #fcfbf8 0%, #f3efe6 100%);
    
    /* Fondo del splash: nunca negro */
  background: radial-gradient(1200px 700px at 50% 40%,
  rgba(255,255,255,.92) 0%,
  rgba(252,233,216,.28) 40%,
  rgba(217,232,222,.22) 70%,
  rgba(255,255,255,.92) 100%);
}

/* Grain muy sutil (sin assets)
   ✅ sin viñeta oscura (evita “capa sucia”)
*/
#splash.splash--full-envelope::before{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;

  /* ✅ Menos dominante (evita “capa sucia”) */
  opacity:.10;
  background:
    radial-gradient(900px 520px at 50% 28%, rgba(255,255,255,.60) 0%, rgba(255,255,255,0) 62%),
    repeating-linear-gradient(0deg,  rgba(31,35,40,.006) 0px, rgba(31,35,40,.006) 1px, transparent 1px, transparent 12px),
    repeating-linear-gradient(90deg, rgba(31,35,40,.004) 0px, rgba(31,35,40,.004) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(135deg, rgba(31,35,40,.003) 0px, rgba(31,35,40,.003) 1px, transparent 1px, transparent 20px);

  filter: blur(.20px) brightness(1.08) saturate(.90);
}

/* El botón ocupa todo (tap real) */
#openEnvelope.splash-hit{
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent !important;
  cursor: pointer;
  position: relative;

  /* ✅ stack: todos los hijos comparten la misma celda */
  display: grid;
  place-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;

  -webkit-tap-highlight-color: transparent;
}

/* Todos los hijos del botón se superponen (evita “descuadre” por auto-placement) */
#openEnvelope.splash-hit > *{
  grid-area: 1 / 1;
}

/* ---------------------------------------------------------
   Sobre 3D (env3d) — CLASES QUE COINCIDEN CON TU HTML
--------------------------------------------------------- */
/* =========================================
   SOBRE REAL (imagen)
   - cerrado por defecto
   - al abrir: crossfade a sobre abierto
   ========================================= */

/* Base de ambas imágenes del sobre (closed/open) */
#splash.splash--full-envelope .env3d__img{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  /* CLAVE: que rellene el contenedor */
  object-fit: contain;
  object-position: center;
  background: transparent;
  display: block;
}

/* ===========================================
   Crossfade real CLOSED -> OPEN (estable)
   =========================================== */

/* Base */
#splash.splash--full-envelope .env3d__img--closed,
#splash.splash--full-envelope .env3d__img--open{
  opacity: 0;
  transition: opacity 1100ms ease;
  will-change: opacity;
  transform-origin: center;
}

/* CLOSED: 1:1 */
#splash.splash--full-envelope .env3d__img--closed{
  transform: scale(1);
}

/* OPEN: compensamos recorte para que no parezca zoom */
#splash.splash--full-envelope .env3d__img--open{
  transform: scale(.93);
}

/* Ajuste móvil */
@media (max-width: 520px){
  #splash.splash--full-envelope .env3d__img--open{
    transform: scale(.91);
  }
}


/* Estado inicial: SOLO cerrado visible */
html.is-splash:not(.is-envelope-opening):not(.is-envelope-intro):not(.is-reveal)
  #splash.splash--full-envelope .env3d__img--closed{
  opacity: 1 !important;
}
html.is-splash:not(.is-envelope-opening):not(.is-envelope-intro):not(.is-reveal)
  #splash.splash--full-envelope .env3d__img--open{
  opacity: 0 !important;
}

/* Apertura: OPEN visible, CLOSED totalmente fuera (sin ghost) */
html.is-envelope-opening #splash.splash--full-envelope .env3d__img--closed,
html.is-envelope-intro   #splash.splash--full-envelope .env3d__img--closed,
html.is-reveal           #splash.splash--full-envelope .env3d__img--closed{
  opacity: 0 !important;
}

html.is-envelope-opening #splash.splash--full-envelope .env3d__img--open,
html.is-envelope-intro   #splash.splash--full-envelope .env3d__img--open,
html.is-reveal           #splash.splash--full-envelope .env3d__img--open{
  opacity: 1 !important;
}

/* Orden de capas (por si hay dudas) */
#splash.splash--full-envelope .env3d__img--closed{ z-index: 3; }
#splash.splash--full-envelope .env3d__img--open{   z-index: 6; }

/* =========================================================
   MODO EJEMPLO 2 (Canva-like)
   - Usamos tus PNG closed/open (crossfade)
   - Desactivamos capas 3D procedurales (pocket/flap/paper)
   ========================================================= */

/* ✅ PNG visibles (closed/open) */
#splash.splash--full-envelope .env3d__img{
  pointer-events: none;
}

/* ✅ Capas procedurales OFF (no queremos “apertura 3D real”) */
#splash.splash--full-envelope .env3d__paper,
#splash.splash--full-envelope .env3d__back,
#splash.splash--full-envelope .env3d__pocket,
#splash.splash--full-envelope .env3d__flap,
#splash.splash--full-envelope .env3d__flapShadow{
  opacity: 0 !important;
  pointer-events: none;
}

/* Contenedor del sobre: centrado editorial */
#splash.splash--full-envelope .env3d{
  position: relative;

  /* Tamaño base: editorial, sin “sobre gigante” */
  width: min(1100px, 86vw);
  aspect-ratio: 4 / 3;

  margin: 0 auto;
  border-radius: 22px;
  overflow: visible;

  filter: drop-shadow(0 34px 90px rgba(0,0,0,.12));
  z-index: 10;
  display: block;

  /* Más natural (menos arriba que antes) */
  transform: translateY(-2vh);

  background: transparent !important;
}

/* Mobile: centrado y sin subirlo demasiado */
@media (max-width: 520px){
  #splash.splash--full-envelope .env3d{
    width: min(760px, 96vw);
    transform: translateY(0);
  }
}

/* Portátil/desktop medio */
@media (min-width: 900px){
  #splash.splash--full-envelope .env3d{
    width: min(1120px, 82vw);
    transform: translateY(-2vh);
  }
}

/* Desktop grande (evita 1380/1520 que te lo “cambia” respecto a la grabación) */
@media (min-width: 1200px){
  #splash.splash--full-envelope .env3d{
    width: min(1180px, 74vw);
    transform: translateY(-2vh);
  }
}

/* Desktop XL */
@media (min-width: 1440px){
  #splash.splash--full-envelope .env3d{
    width: min(1240px, 68vw);
    transform: translateY(-2vh);
  }
}

/* Orden de capas (Ejemplo 2) */
#splash.splash--full-envelope .env3d__img--closed{ z-index: 2; }
#splash.splash--full-envelope .env3d__img--open{   z-index: 3; }
#splash.splash--full-envelope .env3d__card{        z-index: 4; }
#splash.splash--full-envelope .splash-caption{     z-index: 15; }
#splash.splash--full-envelope .splash-seal{        z-index: 20; }
/* Breath premium (solo si NO reduce motion) */
@media (prefers-reduced-motion: no-preference){
  html.is-splash:not(.is-envelope-opening):not(.is-envelope-intro) #splash.splash--full-envelope .env3d{
    animation: splashFloat 4.8s ease-in-out infinite;
  }

  html.is-splash:not(.is-envelope-opening):not(.is-envelope-intro) #splash.splash--full-envelope .splash-seal{
    animation: sealBreath 2.8s ease-in-out infinite;
  }
}


/* Feedback claro */
#openEnvelope.splash-hit:hover .splash-seal{
  transform: translate(-50%,-50%) scale(1.03);
  transition: transform 220ms ease;
}

#openEnvelope.splash-hit:focus-visible .splash-seal{
  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 -6px 10px rgba(0,0,0,.10),
    0 0 0 4px rgba(169,221,227,.35); /* #A9DDE3 */
}

/* Papel (base) */
#splash.splash--full-envelope .env3d__paper{
  position:absolute;
  inset:0;
  border-radius: 22px;
  overflow: hidden;

  /* ✅ Marfil cálido “algodón” (sin beige oscuro) */
  background:
    radial-gradient(1400px 900px at 50% 30%, rgba(255,255,255,.94), rgba(255,255,255,0) 64%),
    radial-gradient(1200px 900px at 50% 94%, rgba(0,0,0,.07), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #fff7ea 0%, #efe1cc 100%);

  /* ✅ relieve suave para que se lea premium */
  border: 1px solid rgba(31,35,40,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -18px 34px rgba(0,0,0,.10);
}

/* Textura real del sobre (marfil cálido premium, sin “sepia”) */
#splash.splash--full-envelope .env3d__paper::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* 1) Un wash marfil (neutraliza amarillos) + 2) textura */
  background-image:
    linear-gradient(180deg, rgba(255,248,238,.62), rgba(255,244,232,.38)),
    var(--envelope-texture);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;

  opacity: var(--envelope-texture-opacity);

  /* Clave: usamos “luminance-only” para que la textura NO tiña */
  background-blend-mode: normal, luminosity;

  /* “Grading” para que la textura aporte fibra, no color */
  filter:
    grayscale(1)
    brightness(1.16)
    contrast(1.05);
}

/* Micro-grain extra (muy sutil, para “algodón artesanal”)
   ✅ ÚNICO ::after (sin duplicados)
   ✅ NO multiply (evita “sepia/sucio”)
*/
#splash.splash--full-envelope .env3d__paper::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  opacity: .030;
  mix-blend-mode: soft-light;

  background:
    repeating-linear-gradient(0deg, rgba(31,35,40,.010) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(31,35,40,.008) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(135deg, rgba(31,35,40,.006) 0 1px, transparent 1px 20px);
}

/* Back del sobre (pliegues) */
#splash.splash--full-envelope .env3d__back{
  position:absolute;
  inset:0;
  transform: translateZ(6px);

  background-image:
    radial-gradient(980px 700px at 50% 40%, rgba(255,255,255,.78), rgba(255,255,255,0) 58%),
    radial-gradient(1000px 780px at 50% 88%, rgba(0,0,0,.13), rgba(0,0,0,0) 64%),
    linear-gradient(180deg, rgba(250,244,234,.95), rgba(235,226,210,.95));
  background-size: auto, auto, auto;
  background-position: center, center, center;
  background-repeat: no-repeat;

  /* Sin soft-light */
  background-blend-mode: normal, normal, normal;
}


/* Card: (⚠️ eliminado bloque antiguo "sale" para evitar descuadres)
   La única definición válida de .env3d__card está en:
   "Intro integrado dentro del sobre (SIN panel modal)"
*/

/* Mantengo solo el sheen, que sí se usa dentro de la tarjeta integrada */
#splash.splash--full-envelope .env3d__card-sheen{
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 28%, rgba(255,255,255,0) 58%);
  opacity: .25;
}

/* Anticipation: un mini-abrir antes del giro grande */
html.is-envelope-opening #splash.splash--full-envelope .env3d__flap{
  transform: translateZ(90px) rotateX(-18deg);
  transition-duration: 220ms;
}

/* Sombra bajo flap (si existe) */
#splash.splash--full-envelope .env3d__flapShadow{
  position:absolute;
  inset:0;
  transform: translateZ(40px);
  opacity: 0;
  background: radial-gradient(closest-side, rgba(0,0,0,.20), transparent 70%);
  filter: blur(10px);
  transition: opacity 520ms ease;
}

/* ---------------------------------------------------------
   SELLO / LOGO — proporción premium + centrado óptico
--------------------------------------------------------- */
#splash.splash--full-envelope{
  --seal-x: 50%;
  --seal-y: 53%;

  /* ✅ micro-compensación óptica (ajusta solo estos px) */
  --seal-nudge-x:  2px;
  --seal-nudge-y:  0px;
}

#splash.splash--full-envelope .splash-seal{
  position: absolute;
  left: calc(var(--seal-x) + var(--seal-nudge-x));
  top:  calc(var(--seal-y) + var(--seal-nudge-y));
  transform: translate(-50%,-50%) scale(1);

/* ✅ más presencia y legibilidad del monograma */
  width:  clamp(175px, 12.5vw, 260px);
  height: clamp(175px, 12.5vw, 260px);

  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border: none;

  display: grid;
  place-items: center;
  z-index: 40;

  opacity: 1;
  transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 900ms ease;
  will-change: transform, opacity;
}

#splash.splash--full-envelope .splash-seal__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: 50% 50%;
  pointer-events: none;

  /* micro realce (sin “aro”) */
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.22));
}

/* Mobile: sello/logo más pequeño (NO afecta desktop) */
@media (max-width: 520px){
  #splash.splash--full-envelope{
    /* micro ajuste opcional para que no quede “pegado” */
    --seal-y: 52%;
  }

  #splash.splash--full-envelope .splash-seal{
    width:  clamp(120px, 24vw, 155px);
    height: clamp(120px, 24vw, 155px);
  }
}

/* En intro/reveal se desvanece (no sale volando) */
html.is-envelope-intro #splash.splash--full-envelope .splash-seal,
html.is-reveal       #splash.splash--full-envelope .splash-seal{
  opacity: 0;
  transform: translate(-50%,-50%) scale(.92);
}

/* Caption */
#splash.splash--full-envelope .splash-caption{
  position:absolute;
  left: 50%;
  top: calc(50% + clamp(90px, 20vw, 140px));
  transform: translateX(-50%);
  text-align: center;
  display: grid;
  gap: 6px;
  opacity: .72;
  pointer-events:none;
  z-index: 15;
}
#splash.splash--full-envelope .splash-caption__title{
  font-family: var(--serif);
  font-size: clamp(18px, 3.2vw, 26px);
  letter-spacing: .02em;
  color: rgba(31,35,40,.78);
}
#splash.splash--full-envelope .splash-caption__sub{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(31,35,40,.55);
}
/* ---------------------------------------------------------
   Animación (enganchada al JS)
--------------------------------------------------------- */
html.is-envelope-opening #splash.splash--full-envelope .splash-caption,
html.is-envelope-intro   #splash.splash--full-envelope .splash-caption,
html.is-reveal           #splash.splash--full-envelope .splash-caption{
  opacity: 0;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

html.is-envelope-intro #splash.splash--full-envelope .env3d__flap{
  transform: translateZ(90px) rotateX(-122deg);
  filter: brightness(1.03);
}
html.is-envelope-intro #splash.splash--full-envelope .env3d__flapShadow{
  opacity: .60;
}
html.is-envelope-intro #splash.splash--full-envelope .env3d__card{
  opacity: 1;
  /* ✅ NO tocamos transform aquí: la posición la define el bloque "inset: ...".
     Esto evita saltos y descuadres al cambiar de estado. */
}

/* Cuando el JS hace is-splash-exit, se desvanece */
html.is-splash.is-splash-exit #splash.splash--full-envelope{
  opacity: 0;
  transition: opacity 560ms ease;
}

/* ================================
   OVERRIDE: sello sube al click y desaparece ANTES de tarjeta
   (sin usar is-reveal)
================================ */

/* Sello: continuidad premium (sin “pausa”) */
html.is-envelope-opening #splash.splash--full-envelope .splash-seal{
  /* ✅ más evidente: se nota el “arranque” */
  transform: translate(-50%,-50%) translateY(-42px) scale(.96);
  opacity: .92;
  transition:
    transform 420ms cubic-bezier(.22,.85,.3,1),
    opacity 420ms ease;
  will-change: transform, opacity;
}

html.is-envelope-intro #splash.splash--full-envelope .splash-seal{
  /* ✅ desaparece antes de la tarjeta (a prueba de otras reglas) */
  transform: translate(-50%,-50%) translateY(-120px) scale(.90);
  opacity: 0 !important;
  transition:
    transform 360ms cubic-bezier(.2,.9,.2,1),
    opacity 280ms ease;
  pointer-events: none;
}
/* Tarjeta: animación estable (sin vh) + buen encuadre en móvil */
html.is-envelope-opening #splash.splash--full-envelope .env3d__card{
  opacity: 0;
  transform: scale(.86) translateY(22%);
  filter: blur(9px);
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
}

/* La tarjeta aparece en intro */
html.is-envelope-intro #splash.splash--full-envelope .env3d__card{
  opacity: 1;
  transform: scale(.98) translateY(12%);
  filter: blur(0px);
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
}

/* Settled final cuando ya está el contenido */
html.is-reveal #splash.splash--full-envelope .env3d__card{
  opacity: 1;
  transform: scale(1) translateY(9%);
  filter: blur(0);
  box-shadow: 0 26px 72px rgba(0,0,0,.16);
}

/* Mobile: tarjeta + contenido (responsive real) */
@media (max-width: 520px){
  /* 1) Más alto útil de tarjeta para que quepan nombres + texto */
  #splash.splash--full-envelope .env3d__card{
    inset: 14% 8% 38% 8%;   /* ⬅️ antes: 18% 9% 48% 9% (muy baja altura) */
    border-radius: 16px;
  }

  /* 2) Movimiento más contenido (sin “subir/bajar” raro) */
  html.is-envelope-opening #splash.splash--full-envelope .env3d__card{
    transform: scale(.90) translateY(18%);
  }
  html.is-envelope-intro #splash.splash--full-envelope .env3d__card{
    transform: scale(.99) translateY(12%);
  }
  html.is-reveal #splash.splash--full-envelope .env3d__card{
    transform: scale(1) translateY(10%);
  }

  /* 3) Padding + tipografía mobile */
  #splash.splash--full-envelope .env3d__cardContent{
    inset: 14px;
    gap: 8px;
  }

  #splash.splash--full-envelope .env3d__date{
    font-size: 10.5px;
    letter-spacing: .18em;
  }

  /* 🔑 nombres: clamp más bajo para iPhone (evita recorte) */
  #splash.splash--full-envelope .env3d__names{
    font-size: clamp(26px, 9.2vw, 44px);
    line-height: 1.02;
  }

  #splash.splash--full-envelope .env3d__line{
    font-size: 13px;
    line-height: 1.55;
    margin-top: 10px;
    max-width: 28ch;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Extra: móviles muy pequeños */
@media (max-width: 360px){
  #splash.splash--full-envelope .env3d__card{
    inset: 13% 7% 36% 7%;
  }
  #splash.splash--full-envelope .env3d__names{
    font-size: clamp(24px, 10.2vw, 40px);
  }
}

/* Desaparición final del sello (cuando el splash se cierra) */
html.is-splash.is-splash-exit #splash.splash--full-envelope .splash-seal{
  opacity: 0;
  transform: translate(-50%,-50%) translateY(-140px) scale(.90);
  transition:
    transform 900ms cubic-bezier(.2,.9,.2,1),
    opacity 800ms ease;
  pointer-events: none;
}

/* Tarjeta: sale “desde dentro” (scale + blur) + más transparencia */
#splash.splash--full-envelope .env3d__card{
  position: absolute;

  /* Mantén tu tamaño actual (ajusta si lo necesitas) */
  inset: 18% 30% 54% 30%;
  border-radius: 18px;
  overflow: hidden;

  /* ✅ clave: que el scale “nazca” desde dentro del sobre (parte inferior) */
  transform-origin: 50% 100%;

  /* ✅ base (azul suave) + un pelín más “papel” */
  background:
  linear-gradient(145deg, rgba(215,224,238,.88), rgba(205,215,230,.75));

  border: 1px solid rgba(31,35,40,.10);
  box-shadow: 0 18px 46px rgba(0,0,0,.14);

  opacity: 0;
  transform: scale(.84) translateY(14vh);
  filter: blur(8px);

  transition:
    transform 1700ms cubic-bezier(.16,1,.3,1),
    opacity 700ms ease,
    filter 900ms ease,
    box-shadow 900ms ease;

  z-index: 4;
  will-change: opacity, transform, filter;
}

/* Textura sutil de “papel” en la tarjeta (premium, sin assets) */
#splash.splash--full-envelope .env3d__card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* fibras + micrograin muy sutil */
  background:
    repeating-linear-gradient(0deg,
      rgba(31,35,40,.020) 0 1px,
      rgba(255,255,255,0) 1px 10px),
    repeating-linear-gradient(90deg,
      rgba(31,35,40,.014) 0 1px,
      rgba(255,255,255,0) 1px 14px),
    radial-gradient(1200px 700px at 50% 35%,
      rgba(255,255,255,.35) 0%,
      rgba(255,255,255,0) 62%);

  opacity: .14;                 /* ajusta 0.10–0.18 si quieres más/menos */
  mix-blend-mode: soft-light;   /* textura sin “ensuciar” */
  filter: blur(.18px);
  z-index: 0;
}

/* Luz editorial suave (simula papel real, sin brillos “plasticosos”) */
#splash.splash--full-envelope .env3d__card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(900px 520px at 30% 20%,
      rgba(255,255,255,.45) 0%,
      rgba(255,255,255,0) 60%),
    radial-gradient(980px 720px at 70% 95%,
      rgba(0,0,0,.08) 0%,
      rgba(0,0,0,0) 62%);

  opacity: .22;
  mix-blend-mode: overlay;
  z-index: 0;
}


/* Texto dentro de tarjeta: más contraste sobre azul */
#splash.splash--full-envelope .env3d__cardContent{
  color: rgba(31,35,40,.90);
}

#splash.splash--full-envelope .env3d__date{
  color: rgba(31,35,40,.62);
}

#splash.splash--full-envelope .env3d__line{
  color: rgba(31,35,40,.74);
}

/* Orden interno de capas dentro de la tarjeta */
#splash.splash--full-envelope .env3d__card{ isolation: isolate; }
#splash.splash--full-envelope .env3d__card-sheen{ z-index: 1; }
#splash.splash--full-envelope .env3d__cardContent{ z-index: 2; }

/* La tarjeta aparece cuando el sobre está en modo “intro/reveal” */
html.is-envelope-intro #splash.splash--full-envelope .env3d__card{
  opacity: 1;
}

/* Contenido dentro de la tarjeta: oculto por defecto */
#splash.splash--full-envelope .env3d__cardContent{
  position: absolute;
  inset: 18px;
  display: grid;
  gap: 10px;
  align-content: center;
  text-align: center;

  opacity: 0;
  transform: translateY(16px) scale(.992);

  /* ✅ más lento y con más “aire” */
  transition:
    opacity 980ms ease 420ms,
    transform 1400ms cubic-bezier(.2,.9,.2,1) 420ms;

  will-change: opacity, transform;
}

/* Aparece en la misma fase de apertura */
html.is-envelope-opening #splash.splash--full-envelope .env3d__cardContent,
html.is-envelope-intro   #splash.splash--full-envelope .env3d__cardContent,
html.is-reveal           #splash.splash--full-envelope .env3d__cardContent{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Legibilidad premium del texto dentro de la tarjeta */
#splash.splash--full-envelope .env3d__cardContent{
  color: rgba(31,35,40,.88);
}

#splash.splash--full-envelope .env3d__date{
  color: rgba(31,35,40,.62);
}

#splash.splash--full-envelope .env3d__names{
  color: rgba(31,35,40,.92);
}

#splash.splash--full-envelope .env3d__line{
  color: rgba(31,35,40,.70);
}

/* Reveal del contenido (2ª fase)
   - Funciona tanto en is-envelope-intro (primer click) como en is-reveal (si lo usas después)
*/
html.is-envelope-intro #splash.splash--full-envelope .env3d__cardContent,
html.is-reveal        #splash.splash--full-envelope .env3d__cardContent{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Tipos (alineados con tu identidad) */
#splash.splash--full-envelope .env3d__date{
  display:inline-block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(31,35,40,.60);
}

#splash.splash--full-envelope .env3d__names{
  font-family: var(--font-signature), cursive;
  font-weight: 400;
  font-size: clamp(32px, 8.6vw, 76px);
  line-height: 1.05;
  color: rgba(31,35,40,.92);
}

#splash.splash--full-envelope .env3d__amp{
  opacity: .45;
  padding: 0 .08em;
}

#splash.splash--full-envelope .env3d__line{
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.8;                 /* Más aire */
  letter-spacing: 0.2px;
  color: rgba(31,35,40,.72);        /* Un poco más contraste */
  margin-top: 26px;                 /* Más separación bajo los nombres */
  max-width: 320px;                 /* Más editorial */
  margin-left: auto;
  margin-right: auto;
}

#splash.splash--full-envelope .env3d__soft{
  color: rgba(31,35,40,.72);
}

/* Ajuste fino mobile: tarjeta + textos (evita recortes en iPhone) */
@media (max-width: 520px){

  /* ✅ Caja de la tarjeta: más ancha y más alta (para que quepan nombres + texto) */
  #splash.splash--full-envelope .env3d__card{
    inset: 14% 7% 36% 7%;
    border-radius: 16px;
  }

  /* ✅ Movimiento: más sutil (sin “salto” raro) */
  html.is-envelope-opening #splash.splash--full-envelope .env3d__card{
    transform: scale(.92) translateY(16%);
  }
  html.is-envelope-intro #splash.splash--full-envelope .env3d__card{
    transform: scale(.99) translateY(11%);
  }
  html.is-reveal #splash.splash--full-envelope .env3d__card{
    transform: scale(1) translateY(9%);
  }

  /* ✅ Contenido interior: más compacto */
  #splash.splash--full-envelope .env3d__cardContent{
    inset: 12px;
    gap: 7px;
  }

  #splash.splash--full-envelope .env3d__date{
    font-size: 10px;
    letter-spacing: .18em;
  }

  /* 🔑 CLAVE: nombres más pequeños en móvil (evita que “Olgui & Sergio” se recorte) */
  #splash.splash--full-envelope .env3d__names{
    font-size: clamp(22px, 9.6vw, 38px);
    line-height: 1.02;
  }

  #splash.splash--full-envelope .env3d__line{
    font-size: 12.8px;
    line-height: 1.5;
    margin-top: 10px;
    max-width: 26ch;
    margin-left: auto;
    margin-right: auto;
  }
}

#introPanel .open-btn--pill:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(169,221,227,.35), 0 18px 46px rgba(0,0,0,.12);
}

/* =========================================================
   SPLASH VISIBILIDAD (Fuente única)
   - Por defecto: VISIBLE desde el primer frame
   - Solo se oculta en OPEN (html.is-open)
   - Mantiene compatibilidad con html.is-splash / html.is-intro
   ========================================================= */

/* ✅ Default: splash ON */
#splash{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .60s ease;
}

/* En OPEN: garantizar apagado */
html.is-open #splash{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .60s ease, visibility 0s linear .60s;
}


/* =========================================================
   RECUERDOS PAGE
   Página independiente "coming soon" para después de la boda
   ========================================================= */

body.recuerdos-page{
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(169,221,227,.16), transparent 60%),
    radial-gradient(900px 700px at 80% 90%, rgba(217,232,222,.20), transparent 60%),
    linear-gradient(180deg, #fbfaf8, #f7f3ee);
  color: #1f2328;
  font-family: var(--font-ui);
}

/* Header */
.recuerdos-header{
  width: 100%;
  padding: 22px 20px 0;
  box-sizing: border-box;
}

.recuerdos-logo{
  display: inline-block;
  text-decoration: none;
  color: #1f2328;
  font-family: var(--font-editorial);
  font-size: 18px;
  letter-spacing: .01em;
}

/* Hero */
.recuerdos-hero{
  padding: 72px 20px 28px;
}

.recuerdos-hero-inner{
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}

.recuerdos-title{
  margin: 0;
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: clamp(44px, 7vw, 88px);
  line-height: .98;
  letter-spacing: -.02em;
  color: rgba(31,35,40,.96);
}

.recuerdos-subtitle{
  margin: 24px auto 0;
  max-width: 32ch;
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.7;
  color: rgba(31,35,40,.72);
}

/* Bloque coming soon */
.recuerdos-coming{
  padding: 12px 20px 24px;
}

.recuerdos-coming-inner{
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 32px;
  text-align: center;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(31,35,40,.06);
  border-radius: 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,.06);
  backdrop-filter: blur(14px);
}

.recuerdos-text{
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(31,35,40,.78);
}

.recuerdos-text.small{
  margin-top: 14px;
  font-size: 14px;
  color: rgba(31,35,40,.56);
}

/* Galería placeholder */
.recuerdos-galeria{
  padding: 48px 20px 90px;
}

.recuerdos-grid{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}

.recuerdos-placeholder{
  min-height: 380px;
  border-radius: 36px;
  border: 1px dashed rgba(31,35,40,.08);
  background:
    radial-gradient(600px 300px at 50% 20%, rgba(169,221,227,.18), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.66));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 30px 80px rgba(0,0,0,.05);
}

.recuerdos-placeholder span{
  display: block;
  font-size: 42px;
  line-height: 1;
  margin-bottom: 14px;
}

.recuerdos-placeholder p{
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  color: rgba(31,35,40,.62);
}

/* Cierre */
.recuerdos-footer{
  padding: 0 20px 54px;
  text-align: center;
}

.recuerdos-footer p{
  margin: 0;
  font-family: var(--font-editorial);
  font-size: 16px;
  line-height: 1.6;
  color: rgba(31,35,40,.72);
}

/* Responsive */
@media (max-width: 520px){
  .recuerdos-header{
    padding: 18px 16px 0;
  }

  .recuerdos-hero{
    padding: 56px 16px 22px;
  }

  .recuerdos-subtitle{
    margin-top: 18px;
    max-width: 26ch;
    font-size: 15px;
    line-height: 1.65;
  }

  .recuerdos-coming{
    padding: 8px 16px 20px;
  }

  .recuerdos-coming-inner{
    padding: 22px 18px;
    border-radius: 22px;
  }

  .recuerdos-text{
    font-size: 15px;
    line-height: 1.7;
  }

  .recuerdos-text.small{
    font-size: 13px;
  }

  .recuerdos-galeria{
    padding: 22px 16px 56px;
  }

  .recuerdos-placeholder{
    min-height: 240px;
    border-radius: 24px;
    padding: 22px;
  }

  .recuerdos-placeholder span{
    font-size: 36px;
    margin-bottom: 12px;
  }

  .recuerdos-placeholder p{
    font-size: 14px;
  }

  .recuerdos-footer{
    padding: 0 16px 42px;
  }
}

.recuerdos-galeria-title{
  max-width: 760px;
  margin: 0 auto 34px;
  text-align: center;
  font-family: var(--font-editorial);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(31,35,40,.78);
}