/* ============================================================================
   MIS XV AÑOS · LAURA TRUJILLO
   Hoja de estilos única — mobile first
   ----------------------------------------------------------------------------
   1.  Tokens
   2.  Reset y base
   3.  Utilidades y accesibilidad
   4.  Tipografía
   5.  Ornamentos (filetes, perlas, medallones, guirnaldas)
   6.  Botones
   7.  Portada
   8.  Papel / secciones
   9.  Fotografías
   10. Fecha y cuenta regresiva
   11. Itinerario
   12. Galería deslizable
   13. Vestimenta, regalos, notas
   14. Cierre
   15. Controles flotantes (música y RSVP)
   16. Animaciones (reveal + partículas)
   17. Breakpoints
   18. prefers-reduced-motion
   ========================================================================== */

/* ── 1 · Tokens ─────────────────────────────────────────────────────────── */
:root{
  /* Paleta — marfil, rosa empolvado, rose gold, champán, papel de lujo */
  --ivory:        #FFFCFA;
  --ivory-warm:   #FFF8F4;
  --blush-mist:   #F8E8E7;
  --blush:        #EDCDCB;
  --rose-dust:    #D4AAA6;
  --rose-deep:    #AD7A72;
  --rose-gold:    #BC827A;
  --terracotta:   #9C6358;
  --champagne:    #EFE3D3;
  --gold:         #BC827A;   /* líneas y filetes — ahora rose gold, no dorado */
  --gold-soft:    #C7A58E;
  --sage:         #B9A58E;
  --ambient:      #F3E9E4;

  /* Tinta — todos los tonos de texto cumplen contraste AA sobre marfil */
  --ink:          #654D4B;   /* títulos y datos              */
  --ink-soft:     #8A7370;   /* cuerpo de texto              */
  --label:        #93594F;   /* antetítulos en versalitas    */
  --rose-ink:     #9C5F57;   /* rosa para texto pequeño      */
  --ink-faint:    #BBA6A2;   /*         solo decorativo              */

  /* Tipografías */
  --f-script: 'Great Vibes', 'Brush Script MT', cursive;
  --f-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-sans:   'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Ritmo y medidas */
  --paper-w:  34.5rem;          /* 552px */
  --measure:  20rem;            /* 320px — ancho cómodo de lectura, frase emocional */
  --pad-x:    clamp(1.375rem, 6vw, 2.125rem);
  --gap-sect: clamp(4.5rem, 15vw, 6.5rem);

  /* Movimiento */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  /* Sombras — muy suaves; el estilo depende de color y espacio, no de elevación */
  --sh-photo: 0 18px 50px -18px rgba(120,70,70,.16), 0 2px 10px rgba(120,70,70,.06);
  --sh-soft:  0 10px 30px -14px rgba(120,70,70,.12);
  --sh-btn:   none;
}


/* ── 2 · Reset y base ───────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:1rem;
}

body{
  min-height:100svh;
  font-family:var(--f-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background-color:var(--ambient);
  background-image:
    radial-gradient(60rem 40rem at 12% 8%,  rgba(248,232,231,.55), transparent 62%),
    radial-gradient(52rem 38rem at 88% 30%, rgba(239,227,211,.50), transparent 60%),
    radial-gradient(46rem 34rem at 50% 96%, rgba(212,170,166,.28), transparent 64%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}

body.is-locked{ overflow:hidden; }

img,svg{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; }
ul,ol{ list-style:none; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:3px;
  border-radius:4px;
}


/* ── 3 · Utilidades y accesibilidad ─────────────────────────────────────── */
.sr-only{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

.skip-link{
  position:fixed; top:.5rem; left:.5rem; z-index:200;
  padding:.75rem 1.125rem; border-radius:999px;
  background:var(--ivory); color:var(--ink);
  font-size:.8125rem; letter-spacing:.08em; text-decoration:none;
  border:1px solid rgba(188,130,122,.4);
  box-shadow:var(--sh-soft);
  transform:translateY(-160%);
  transition:transform .25s var(--ease);
}
.skip-link:focus-visible{ transform:translateY(0); }

[hidden]{ display:none !important; }


/* ── 4 · Tipografía ─────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--f-sans);
  font-size:.6875rem; font-weight:400;
  letter-spacing:.42em; text-indent:.42em;
  text-transform:uppercase;
  color:var(--label);
}
.eyebrow--light{
  color:#FFF3EF;
  text-shadow:0 1px 12px rgba(90,50,60,.55);
}

.title{
  font-family:var(--f-serif);
  font-weight:500;
  font-size:clamp(1.1875rem,5.2vw,1.4375rem);
  line-height:1.35;
  letter-spacing:.22em; text-indent:.22em;
  text-transform:uppercase;
  color:var(--ink);
  text-wrap:balance;
}

.title-sm{
  font-family:var(--f-serif);
  font-weight:500;
  font-size:clamp(.9375rem,4vw,1.0625rem);
  line-height:1.8;
  letter-spacing:.3em; text-indent:.3em;
  text-transform:uppercase;
  color:var(--ink);
  text-wrap:balance;
}

.script{
  font-family:var(--f-script);
  font-weight:400;
  line-height:1.18;
  color:var(--rose-deep);
}

.name{
  font-size:clamp(2.75rem,14vw,4.5rem);
  text-shadow:0 3px 22px rgba(188,130,122,.2);
  text-wrap:balance;
}

.quote{
  font-family:var(--f-serif);
  font-style:italic; font-weight:400;
  font-size:clamp(1.0625rem,4.4vw,1.1875rem);
  line-height:1.72;
  color:var(--ink-soft);
  max-width:var(--measure);
  margin-inline:auto;
  text-wrap:pretty;
}
.quote--sm{ font-size:clamp(.9688rem,4vw,1.0625rem); }

.quote::before{ content:'\201C'; }
.quote::after{ content:'\201D'; }

.body-text{
  font-weight:300;
  font-size:.9063rem;
  letter-spacing:.045em;
  line-height:1.8;
  color:var(--ink-soft);
  max-width:var(--measure);
  margin-inline:auto;
  text-wrap:pretty;
}

.venue{
  font-family:var(--f-serif);
  font-weight:600;
  font-size:clamp(1.1875rem,5vw,1.375rem);
  letter-spacing:.1em; text-indent:.1em;
  line-height:1.45;
  color:var(--ink);
  text-wrap:balance;
}
.venue--wide{ letter-spacing:.26em; text-indent:.26em; text-transform:uppercase; font-size:1.0625rem; }

.gift-title{
  font-size:clamp(2.25rem,10vw,2.875rem);
  margin-top:.25rem;
  text-wrap:balance;
}

.meta{
  font-weight:300;
  font-size:.875rem;
  letter-spacing:.12em;
  color:var(--ink-soft);
}

.note{
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--ink-soft);
  max-width:var(--measure);
  margin-inline:auto;
  font-style:italic;
}

.parents{
  font-size:clamp(1.875rem,8.5vw,2.375rem);
  color:var(--terracotta);
  line-height:1.35;
}
.parents .amp{
  display:block;
  font-family:var(--f-serif);
  font-style:italic;
  font-size:.5em;
  color:var(--gold);
}
.parents [data-is-pending]{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:.44em;
  letter-spacing:.06em;
  color:var(--ink-faint);
}

.hint-swipe{
  font-size:.6875rem;
  letter-spacing:.26em; text-indent:.26em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* Estado «pendiente de confirmar» — discreto, nunca un corchete suelto */
[data-is-pending]{
  font-family:var(--f-serif);
  font-style:italic;
  letter-spacing:.04em;
  color:var(--ink-faint);
  text-transform:none;
}


/* ── 5 · Ornamentos ─────────────────────────────────────────────────────── */
.rule{
  display:flex; align-items:center; justify-content:center;
  gap:.75rem;
  margin-inline:auto;
  width:min(100%,13.75rem);
}
.rule span{
  flex:1 1 auto; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.rule span:last-child{ background:linear-gradient(90deg,var(--gold),transparent); }
.rule--light span{ background:linear-gradient(90deg,transparent,rgba(255,243,239,.85)); }
.rule--light span:last-child{ background:linear-gradient(90deg,rgba(255,243,239,.85),transparent); }

.pearl{
  flex:none;
  width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff 0 28%, #F2E3E6 55%, #D7BDC4 100%);
  box-shadow:0 1px 3px rgba(120,70,70,.4), inset 0 0 2px rgba(255,255,255,.9);
}
.pearl--sm{ width:5px; height:5px; }

.pearls{
  display:flex; align-items:center; justify-content:center;
  gap:.5625rem;
}

.flourish{ width:min(82%,17.5rem); margin-inline:auto; }
.flourish--sm{ width:min(70%,15rem); }

.tiara{
  width:4.5rem; margin-inline:auto;
  filter:drop-shadow(0 2px 8px rgba(120,70,70,.45));
}

.medallion{
  display:grid; place-items:center;
  width:3.5rem; height:3.5rem;
  margin-inline:auto;
  border-radius:50%;
  color:var(--rose-gold);
  background:linear-gradient(165deg,#FFFDFB,#FAEDF0);
  border:1px solid rgba(188,130,122,.45);
  box-shadow:0 8px 20px -8px rgba(120,70,70,.14), inset 0 1px 0 #fff;
}
.medallion svg{ width:1.5rem; height:1.5rem; }

/* Ramos grandes entrando parcialmente desde las esquinas — el papel los recorta
   en su propio borde, como si la ilustración continuara fuera de la tarjeta. */
.corner-flora{
  position:absolute; z-index:0;
  width:clamp(6.5rem,28vw,9.5rem);
  pointer-events:none;
  opacity:.7;
  filter:drop-shadow(0 4px 10px rgba(120,70,70,.08));
}
.corner-flora--paper-tl{ top:-1.25rem; left:-1.75rem; }
.corner-flora--paper-tr{ top:-.5rem; right:-2rem; transform:scaleX(-1); }
.corner-flora--closing-bl{ bottom:-1.5rem; left:-1.75rem; }
.corner-flora--closing-br{ bottom:-1.5rem; right:-1.75rem; transform:scaleX(-1); }

/* Mariposas pequeñas y discretas — nunca más de un par por zona */
.butterfly{
  position:absolute; z-index:3;
  width:1.625rem; height:1.625rem;
  pointer-events:none;
  animation:flutter 7.5s var(--ease-soft) infinite alternate;
}
.butterfly--sm{ width:1.25rem; height:1.25rem; }
@keyframes flutter{
  0%   { transform:translateY(0) rotate(-3deg); }
  100% { transform:translateY(-4px) rotate(3deg); }
}

.butterfly--hero{ top:17%; right:14%; animation-delay:-2s; }
.butterfly--present{ top:-.25rem; right:14%; animation-delay:-4s; }
.butterfly--rsvp{ top:-.125rem; left:20%; animation-delay:-1s; }
.butterfly--closing{ position:relative; display:inline-block; margin-block:.125rem; animation-delay:-3s; }


/* ── 6 · Botones ────────────────────────────────────────────────────────── */
/* Outline rose gold — nunca relleno sólido; se siente a papelería impresa */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.625rem;
  min-height:2.875rem;            /* ≥44px táctil */
  padding:.9375rem 2rem;
  border-radius:999px;
  font-family:var(--f-sans);
  font-size:.75rem; font-weight:400;
  letter-spacing:.26em; text-indent:.26em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--rose-gold);
  background:transparent;
  border:1px solid rgba(188,130,122,.55);
  box-shadow:none;
  position:relative;
  transition:background-color .25s var(--ease), border-color .25s var(--ease), transform .22s var(--ease);
}
.btn:active{ transform:scale(.975); }
.btn:hover{ background-color:rgba(188,130,122,.07); border-color:rgba(188,130,122,.8); }

.btn--lg{ padding:1.0625rem 2.25rem; font-size:.7813rem; }

.btn--ghost{
  color:var(--rose-gold);
  background:transparent;
  border:1px solid rgba(188,130,122,.5);
  box-shadow:none;
}
.btn--ghost:hover{ background-color:rgba(188,130,122,.07); }

.btn__i{ width:1rem; height:1rem; flex:none; margin-right:-.24em; }

.btn-row{
  display:flex; flex-wrap:wrap; gap:.75rem;
  align-items:center; justify-content:center;
}


/* ── 7 · Portada ────────────────────────────────────────────────────────── */
.opening{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:stretch;
  padding:
    calc(env(safe-area-inset-top) + 1.375rem)
    calc(env(safe-area-inset-right) + 1.375rem)
    calc(env(safe-area-inset-bottom) + 1.375rem)
    calc(env(safe-area-inset-left) + 1.375rem);
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(248,232,231,.9), transparent 70%),
    var(--ambient);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.opening.is-out{
  opacity:0;
  transform:scale(1.06);
  filter:blur(6px);
  pointer-events:none;
}

.opening__stage{
  position:relative;
  width:min(100%,32rem);
  height:100%;
  margin-inline:auto;
  --arch:clamp(10rem,42vw,14rem);
}

/* La ventana en arco recorta la fotografía; los adornos quedan fuera */
.opening__window{
  position:absolute; inset:0;
  overflow:hidden;
  border-radius:var(--arch) var(--arch) 1.25rem 1.25rem;
  background:linear-gradient(165deg,#F8E7EB,#F2D6DE 55%,#EDCAD5);
  box-shadow:0 26px 70px -24px rgba(140,90,102,.55);
  isolation:isolate;
}
/* Filete claro interior */
.opening__window::after{
  content:''; position:absolute; z-index:3; inset:.625rem;
  border:1px solid rgba(255,246,240,.55);
  border-radius:inherit;
  pointer-events:none;
}

.opening__photo{
  position:absolute; inset:0;
  margin:0; width:100%; height:100%;
  border-radius:0; border:0; outline:0; box-shadow:none;
  aspect-ratio:auto;
}
.opening__photo::before{ display:none; }

/* El marco de espera se coloca en la mitad superior del arco */
.opening__photo .photo__ph{ inset:0 0 38% 0; }

.opening__scrim{
  position:absolute; z-index:2; inset:0;
  background:linear-gradient(to top,
    rgba(78,42,50,.72) 0%,
    rgba(78,42,50,.46) 28%,
    rgba(78,42,50,.10) 54%,
    transparent 76%);
}

.opening__flora{
  position:absolute; z-index:4;
  width:clamp(6.5rem,30vw,9rem);
  opacity:.95;
  pointer-events:none;
  filter:drop-shadow(0 6px 14px rgba(140,90,102,.25));
}
.opening__flora--tl{ top:6%;        left:-1.25rem; }
.opening__flora--br{ bottom:-.5rem; right:-1.25rem; transform:scale(-1); }

.opening__content{
  position:absolute; z-index:4;
  inset:auto 0 0 0;
  display:grid; justify-items:center;
  gap:.875rem;
  padding:0 1.5rem clamp(2rem,7vh,3rem);
  text-align:center;
}
.opening__name{
  font-size:clamp(2.5rem,12vw,4.25rem);
  text-wrap:balance;
  color:#FFF4F0;
  text-shadow:0 2px 26px rgba(70,36,44,.6), 0 1px 3px rgba(70,36,44,.35);
}
.opening .tiara{ filter:drop-shadow(0 2px 10px rgba(60,30,38,.6)); }
.opening .tiara path{ stroke:#FFE9E0; }
.opening .rule{ width:min(100%,11rem); }
.opening .pearl{ box-shadow:0 1px 4px rgba(60,30,38,.5); }
/* Sobre la fotografía el outline se aclara para seguir siendo legible,
   pero conserva el mismo lenguaje: fondo transparente, nunca relleno. */
.opening .btn{
  margin-top:.375rem;
  color:#FFF6F1;
  border-color:rgba(255,246,241,.6);
}
.opening .btn:hover{ background-color:rgba(255,246,241,.12); border-color:rgba(255,246,241,.85); }
.opening--empty .btn{ color:var(--rose-gold); border-color:rgba(188,130,122,.55); }
.opening--empty .btn:hover{ background-color:rgba(188,130,122,.07); border-color:rgba(188,130,122,.8); }

/* Portada sin fotografía todavía — versión clara, nunca un velo oscuro vacío */
.opening--empty .opening__scrim{
  background:linear-gradient(to top,
    rgba(253,250,247,.95) 0%,
    rgba(248,232,231,.78) 32%,
    rgba(248,232,231,.22) 60%,
    transparent 78%);
}
.opening--empty .eyebrow--light{ color:var(--label); text-shadow:none; }
.opening--empty .opening__name{
  color:var(--rose-deep);
  text-shadow:0 3px 20px rgba(188,130,122,.18);
}
.opening--empty .tiara{ filter:drop-shadow(0 2px 8px rgba(120,70,70,.4)); }
.opening--empty .tiara path{ stroke:var(--rose-gold); }
.opening--empty .rule--light span{ background:linear-gradient(90deg,transparent,var(--gold)); }
.opening--empty .rule--light span:last-child{ background:linear-gradient(90deg,var(--gold),transparent); }
.opening--empty .pearl{ box-shadow:0 1px 3px rgba(120,70,70,.4); }


/* ── 8 · Papel / secciones ──────────────────────────────────────────────── */
.invitation{
  opacity:0;
  visibility:hidden;
  transform:translateY(1.5rem);
  transition:opacity 1s var(--ease) .12s, transform 1s var(--ease) .12s, visibility 0s linear 1.2s;
}
.invitation.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity 1s var(--ease) .18s, transform 1s var(--ease) .18s, visibility 0s;
}
.invitation:focus{ outline:none; }

.paper{
  position:relative;
  width:min(100%,var(--paper-w));
  margin-inline:auto;
  padding-top:clamp(2.75rem,9vw,4rem);
  background-color:var(--ivory);
  background-image:
    radial-gradient(110% 22% at 50% 0%,   rgba(248,232,231,.95), transparent 68%),
    radial-gradient(70% 16% at 4% 34%,    rgba(248,232,231,.42), transparent 72%),
    radial-gradient(70% 16% at 96% 62%,   rgba(239,227,211,.42), transparent 72%),
    radial-gradient(90% 18% at 50% 100%,  rgba(248,232,231,.9),  transparent 70%);
  box-shadow:0 0 70px -10px rgba(120,70,70,.1);
  overflow:clip;
}
/* Textura de seda muy tenue */
.paper::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 47%, transparent 60%),
    repeating-linear-gradient(115deg, rgba(212,170,166,.022) 0 2px, transparent 2px 9px);
  pointer-events:none;
}

.section{
  position:relative; z-index:2;
  display:grid; justify-items:center;
  gap:1rem;
  padding:0 var(--pad-x) var(--gap-sect);
  text-align:center;
}
.section > .btn{ margin-top:.75rem; }
.section > .medallion{ margin-bottom:.25rem; }

.section--intro{ gap:1.5rem; }
.section--present{ gap:.25rem; }
.section--parents{ gap:.75rem; }
.section--parents .eyebrow{ margin-top:1.375rem; }
.section--parents .parents{ margin-top:.375rem; }
.section--parents .pearls{ margin-top:.75rem; }
.section--date{ gap:.625rem; }
.section--count{ padding-bottom:calc(var(--gap-sect) * .9); }
.section--story{ gap:clamp(1.75rem,6vw,2.5rem); }
.section--gallery{ gap:.875rem; }
.section--rsvp{ scroll-margin-top:2rem; }

.hero-sentinel{
  position:absolute; top:0; left:0;
  width:1px; height:1px;
  pointer-events:none;
}

/* Lockup «mis XV años» */
.lockup{
  display:grid;
  grid-template-columns:auto auto auto;
  align-items:center;
  justify-content:center;
  gap:0 .5rem;
  color:var(--terracotta);
}
.lockup__mis,
.lockup__anios{
  font-family:var(--f-script);
  font-size:clamp(1.75rem,8vw,2.25rem);
  line-height:1;
  padding-bottom:.3em;
}
.lockup__xv{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:clamp(4rem,20vw,5.75rem);
  line-height:1;
  letter-spacing:.02em;
  color:var(--rose-gold);
  text-shadow:0 3px 24px rgba(188,130,122,.22);
}
.section--present .name{
  margin-top:.35rem;
  line-height:1.05;
}
.section--present .rule{ margin-top:1.25rem; }


/* ── 9 · Fotografías ────────────────────────────────────────────────────── */
.photo{
  position:relative;
  margin-inline:auto;
  overflow:hidden;
  background:linear-gradient(160deg,#FBF0F0,#F5E0DE 55%,#F0D3D0);
  border:1px solid rgba(188,130,122,.55);
  outline:3px solid var(--ivory);
  outline-offset:-4px;
  box-shadow:var(--sh-photo);
  isolation:isolate;
}
/* Halo acuarelado, casi transparente, detrás de la fotografía */
.photo::before{
  content:''; position:absolute; z-index:-1; inset:-1.5rem;
  background:radial-gradient(ellipse at 50% 45%, rgba(212,170,166,.22), transparent 68%);
  filter:blur(10px);
  pointer-events:none;
}

.photo__img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--pos,50% 50%);
}

/* Marco de espera — elegante mientras no hay fotografía */
.photo__ph{
  position:absolute; inset:0;
  display:grid; place-content:center; justify-items:center;
  gap:.625rem;
  padding:0 1.25rem;
  text-align:center;
}
.photo__ph svg{ width:3rem; height:3rem; opacity:.55; }
.photo__ph span{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:.8125rem;
  letter-spacing:.04em;
  color:var(--ink-soft);
}

/* Formas de marco */
.photo[data-frame='arco']{
  aspect-ratio:3/4;
  width:min(100%,20rem);
  border-radius:50% 50% 1.25rem 1.25rem / 34% 34% 3% 3%;
}
.photo[data-frame='ovalo']{
  aspect-ratio:3/4;
  border-radius:50% 50% 48% 48% / 42% 42% 58% 58%;
}
.photo[data-frame='rect']{
  aspect-ratio:4/5;
  border-radius:1rem;
}
/* A sangre: se estira en la rejilla y desborda el padding hasta el borde
   del papel. Sin justify-self:stretch la figura no tendría ancho propio. */
.photo[data-frame='bleed']{
  aspect-ratio:5/4;
  justify-self:stretch;
  width:auto;
  margin-inline:calc(var(--pad-x) * -1);
  border-radius:0;
  border-inline:0;
  outline-width:0;
}

/* Composición editorial de dos fotografías superpuestas */
.duo{
  position:relative;
  width:100%;
  padding-bottom:22%;
}
.photo--duoA{ width:64%; margin-inline:0 auto; }
.photo--duoB{
  position:absolute; right:0; bottom:0; z-index:2;
  width:52%;
}


/* ── 10 · Fecha y cuenta regresiva ──────────────────────────────────────── */
.datecard{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.875rem,4vw,1.375rem);
  margin-top:.25rem;
}
.datecard__side{
  flex:none;
  padding:.625rem 0;
  font-family:var(--f-serif);
  font-weight:500;
  font-size:clamp(.8125rem,3.6vw,.9375rem);
  letter-spacing:.26em; text-indent:.26em;
  text-transform:uppercase;
  color:var(--ink);
  border-top:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
  white-space:nowrap;
}
.datecard__day{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:clamp(4rem,19vw,4.75rem);
  line-height:1;
  color:var(--rose-gold);
  font-variant-numeric:lining-nums;
  text-shadow:0 3px 18px rgba(188,130,122,.18);
}
.datecard__year{
  font-family:var(--f-serif);
  font-size:1rem;
  letter-spacing:.4em; text-indent:.4em;
  color:var(--label);
}
.date-pending{
  font-family:var(--f-serif);
  font-style:italic;
  font-size:1.125rem;
  letter-spacing:.06em;
  color:var(--ink-faint);
}

/* Sin cajas: números flotando sobre dos filetes finos, como una invitación impresa */
.countdown{
  display:flex;
  align-items:stretch;
  justify-content:center;
  width:min(100%,21rem);
  margin-top:.75rem;
  padding-block:1.125rem;
  border-top:1px solid rgba(188,130,122,.4);
  border-bottom:1px solid rgba(188,130,122,.4);
}
.unit{
  position:relative;
  display:grid; gap:.5rem;
  justify-items:center;
  align-content:center;
  padding-inline:clamp(.6875rem,4vw,1.25rem);
  background:none; border:0; box-shadow:none; border-radius:0;
}
.unit + .unit::before{
  content:''; position:absolute; left:0; top:.125rem; bottom:.125rem;
  width:1px;
  background:rgba(188,130,122,.3);
}
.unit__n{
  font-family:var(--f-serif);
  font-weight:500;
  font-size:clamp(1.75rem,8.5vw,2.375rem);
  line-height:1;
  color:var(--rose-gold);
  font-variant-numeric:tabular-nums lining-nums;
}
.unit__l{
  font-size:.5938rem;
  letter-spacing:.2em; text-indent:.2em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.bigday{
  font-size:clamp(2rem,9vw,2.5rem);
  color:var(--rose-deep);
  text-shadow:0 3px 18px rgba(188,130,122,.18);
}


/* ── 11 · Itinerario ────────────────────────────────────────────────────── */
.timeline{
  position:relative;
  width:min(100%,19.5rem);
  margin-top:1rem;
  padding-left:2.125rem;
  text-align:left;
}
.timeline::before{
  content:''; position:absolute;
  left:.5rem; top:.625rem; bottom:.625rem;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent);
}
.timeline__item{ position:relative; padding-bottom:1.5rem; }
.timeline__item:last-child{ padding-bottom:0; }
.timeline__item::before{
  content:''; position:absolute;
  left:-1.9375rem; top:.375rem;
  width:11px; height:11px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #fff 0 26%, #F3DEC0 55%, var(--gold) 100%);
  box-shadow:0 0 0 3px var(--ivory), 0 0 0 4px rgba(188,130,122,.45);
}
.timeline__item:nth-child(even)::before{
  background:radial-gradient(circle at 32% 28%, #fff 0 26%, #F1CDD6 55%, var(--rose-dust) 100%);
  box-shadow:0 0 0 3px var(--ivory), 0 0 0 4px rgba(212,170,166,.5);
}
.timeline__time{
  font-family:var(--f-serif);
  font-weight:600;
  font-size:.9375rem;
  letter-spacing:.1em;
  color:var(--rose-ink);
}
.timeline__title{
  font-weight:300;
  font-size:.875rem;
  letter-spacing:.05em;
  color:var(--ink-soft);
  margin-top:.125rem;
}


/* ── 12 · Galería deslizable ────────────────────────────────────────────── */
.carousel{
  display:flex;
  gap:.875rem;
  width:100%;
  margin-top:.375rem;
  margin-inline:calc(var(--pad-x) * -1);
  padding-inline:var(--pad-x);
  padding-block:.75rem;
  width:calc(100% + var(--pad-x) * 2);
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--pad-x);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{ display:none; }

.carousel__item{
  flex:0 0 auto;
  width:min(62%,13.75rem);
  scroll-snap-align:center;
  margin:0;
}
.carousel__item .photo{ width:100%; aspect-ratio:3/4; border-radius:.875rem; }

.dots{
  display:flex; justify-content:center; gap:.5rem;
  margin-top:.25rem;
}
.dots__dot{
  width:6px; height:6px; border-radius:50%;
  background:rgba(212,170,166,.45);
  transition:width .3s var(--ease), background-color .3s var(--ease);
}
.dots__dot.is-active{
  width:20px; border-radius:999px;
  background:var(--rose-dust);
}


/* ── 13 · Vestimenta, regalos, notas ────────────────────────────────────── */
.swatches{
  display:flex; flex-wrap:wrap;
  justify-content:center; gap:1.25rem;
  margin-top:.5rem;
}
.swatch{
  display:grid; justify-items:center; gap:.5rem;
  max-width:8rem;
}
.swatch__chip{
  position:relative;
  width:3rem; height:3rem;
  border-radius:50%;
  background:var(--chip,#F3D7DE);
  border:1px solid rgba(188,130,122,.55);
  box-shadow:0 6px 16px -8px rgba(120,70,70,.18), inset 0 1px 0 rgba(255,255,255,.8);
}
/* Marca diagonal: el «no» no depende solo del color */
.swatch__chip::after{
  content:''; position:absolute; inset:-1px;
  border-radius:50%;
  background:linear-gradient(135deg,
    transparent calc(50% - 1px), rgba(156,99,88,.75) calc(50% - 1px),
    rgba(156,99,88,.75) calc(50% + 1px), transparent calc(50% + 1px));
}
.swatch__name{
  font-size:.6875rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.qr{
  display:grid; place-items:center;
  width:10.625rem; height:10.625rem;
  margin:.75rem auto 0;
  padding:.75rem;
  border-radius:1.25rem;
  background:#FFFDFB;
  border:1px solid rgba(188,130,122,.6);
  box-shadow:var(--sh-soft), inset 0 1px 0 #fff;
  overflow:hidden;
}
.qr img{ width:100%; height:100%; object-fit:contain; }
.qr figcaption{
  font-size:.6875rem; letter-spacing:.12em;
  color:var(--ink-soft);
}


/* ── 14 · Cierre ────────────────────────────────────────────────────────── */
.closing{
  position:relative;
  overflow:clip;
  width:min(100%,var(--paper-w));
  margin-inline:auto;
  padding:clamp(2.75rem,10vw,4rem) var(--pad-x)
          calc(clamp(3rem,10vw,4.5rem) + env(safe-area-inset-bottom) + 4.5rem);
  text-align:center;
  background-color:var(--ivory);
  background-image:
    radial-gradient(120% 40% at 50% 100%, rgba(248,232,231,.95), transparent 72%),
    radial-gradient(80% 26% at 50% 0%,    rgba(239,227,211,.4),  transparent 70%);
  box-shadow:0 0 70px -10px rgba(120,70,70,.1);
}
.closing__inner{ position:relative; z-index:2; display:grid; justify-items:center; gap:.75rem; }
.signature{
  font-size:clamp(2.75rem,12vw,3.375rem);
  color:var(--rose-deep);
  text-shadow:0 3px 18px rgba(188,130,122,.2);
}
.bouquet{ width:min(94%,22.5rem); margin-top:.5rem; }


/* ── 15 · Controles flotantes ───────────────────────────────────────────── */
.music{
  position:fixed; z-index:80;
  top:calc(env(safe-area-inset-top) + .875rem);
  right:calc(env(safe-area-inset-right) + .875rem);
  display:grid; place-items:center;
  width:2.875rem; height:2.875rem;
  border-radius:50%;
  color:var(--rose-gold);
  background:rgba(255,252,250,.85);
  border:1px solid rgba(188,130,122,.5);
  box-shadow:0 8px 24px -14px rgba(120,70,70,.18);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0; transform:scale(.8);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.music.is-ready{ opacity:1; transform:none; }
.music__icon{ width:1.125rem; height:1.125rem; }
.music__ring{
  position:absolute; inset:-4px;
  border-radius:50%;
  border:1px solid rgba(212,170,166,.55);
  opacity:0;
}
.music[aria-pressed='true'] .music__ring{
  opacity:1;
  animation:pulse 2.8s var(--ease-soft) infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(1);    opacity:.7; }
  50%    { transform:scale(1.14); opacity:0;  }
}

.rsvpbar{
  position:fixed; z-index:70;
  inset:auto 0 0 0;
  display:flex; justify-content:center;
  padding:.625rem var(--pad-x) calc(.625rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(253,250,247,.97) 55%, rgba(253,250,247,0));
  transform:translateY(130%);
  transition:transform .55s var(--ease), opacity .4s var(--ease);
  opacity:0;
  pointer-events:none;
}
.rsvpbar.is-visible{
  transform:none;
  opacity:1;
  pointer-events:auto;
}
.rsvpbar__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:2.875rem;
  padding:.8125rem 1.875rem;
  border-radius:999px;
  font-size:.75rem; letter-spacing:.24em; text-indent:.24em;
  text-transform:uppercase; text-decoration:none;
  color:var(--rose-gold);
  background:rgba(255,252,250,.92);
  border:1px solid rgba(188,130,122,.5);
  box-shadow:0 10px 30px -16px rgba(120,70,70,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .2s var(--ease), background-color .2s var(--ease);
}
.rsvpbar__btn:active{ transform:scale(.975); }
.rsvpbar__btn:hover{ background-color:#FFFCFA; }


/* ── 16 · Animaciones ───────────────────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:
    opacity   .78s var(--ease) calc(var(--i,0) * 90ms),
    transform .78s var(--ease) calc(var(--i,0) * 90ms);
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* Destellos de la portada — pocos nodos, puro CSS */
.sparks{
  position:absolute; z-index:4; inset:0;
  pointer-events:none;
  overflow:hidden;
}
.spark{
  position:absolute;
  width:var(--s,10px); height:var(--s,10px);
  left:var(--x,50%); top:var(--y,50%);
  color:#F0D9CE;
  opacity:0;
  animation:twinkle var(--dur,3.4s) var(--ease-soft) var(--del,0s) infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:0;   transform:scale(.6) rotate(0deg); }
  50%    { opacity:.95; transform:scale(1.05) rotate(14deg); }
}


/* ── 17 · Breakpoints ───────────────────────────────────────────────────── */

/* Pantallas muy estrechas (≤360px) */
@media (max-width:22.5em){
  :root{ --pad-x:1.125rem; }
  .unit__l{ font-size:.5313rem; letter-spacing:.1em; }
  .btn{ letter-spacing:.18em; text-indent:.18em; padding-inline:1.5rem; }
}

/* Tablet — la composición se ensancha, no se estira */
@media (min-width:48em){
  :root{
    --paper-w:36rem;
    --measure:25rem;
    --gap-sect:5.25rem;
  }
  .paper,
  .closing{ border-radius:2px; }
  .photo[data-frame='bleed']{ aspect-ratio:16/10; }
  .duo{ padding-bottom:18%; }
  .carousel__item{ width:15rem; }
}

/* Escritorio — fondo ambiental + invitación centrada tipo editorial */
@media (min-width:64em){
  :root{ --paper-w:37.5rem; }

  body{
    background-image:
      radial-gradient(48rem 42rem at 6% 12%,  rgba(248,232,231,.62), transparent 58%),
      radial-gradient(44rem 40rem at 94% 26%, rgba(239,227,211,.55), transparent 56%),
      radial-gradient(40rem 36rem at 14% 82%, rgba(212,170,166,.32), transparent 60%),
      radial-gradient(40rem 36rem at 88% 92%, rgba(248,232,231,.42), transparent 60%);
  }

  .paper{ box-shadow:0 0 110px -20px rgba(120,70,70,.16); }
  .closing{ box-shadow:0 0 110px -20px rgba(120,70,70,.16); }

  /* Las fotografías ganan presencia sin romper la columna */
  .photo[data-frame='arco']{ width:min(100%,22.5rem); }
  .photo--duoA{ width:60%; }
  .photo--duoB{ width:48%; }
  .carousel__item{ width:16rem; }

  .opening__stage{ width:min(100%,30rem); }
  .opening{ padding-block:1.75rem; }
}

@media (min-width:90em){
  :root{ --paper-w:38.75rem; }
}

/* Alturas muy cortas en horizontal — la portada no debe desbordar */
@media (max-height:34em) and (orientation:landscape){
  .opening__stage{ border-radius:6rem 6rem 1rem 1rem; }
  .opening__content{ gap:.5rem; padding-bottom:1.25rem; }
  .opening__name{ font-size:2.5rem; }
  .opening .tiara{ display:none; }
}


/* ── 18 · Movimiento reducido ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }

  /* Nada de parallax, partículas ni brillos decorativos */
  .sparks,
  .btn::after,
  .music__ring{ display:none; }

  .reveal{ opacity:1; transform:none; }

  .opening.is-out{ filter:none; transform:none; }

  .invitation{ transform:none; }
}