@charset "UTF-8";
/* =========================================================
   Mis XV años · Sara Murcia
   Rebuild of the Canva design (DAHQurslsPE) — HTML5 + CSS3
   ========================================================= */

/* ── Fuentes ─────────────────────────────────────────────── */
@font-face{
  font-family:"SM Serif"; font-style:normal; font-weight:400;
  src:url("../fonts/body-400.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"SM Serif"; font-style:normal; font-weight:700;
  src:url("../fonts/body-700.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"SM Serif"; font-style:italic; font-weight:700;
  src:url("../fonts/body-700i.woff2") format("woff2");
  font-display:swap;
}

/* ── Tokens ──────────────────────────────────────────────── */
:root{
  /* Paleta extraída del diseño de Canva */
  --wine:#a73245;
  --wine-ink:#fefcf3;
  --pink-top:#ffcad9;
  --cream:#fff0e7;
  --paper:#fefcf3;

  --font-body:"SM Serif", Georgia, "Times New Roman", serif;

  /* Escala fluida */
  --step--1:clamp(.94rem, .88rem + .30vw, 1.13rem);
  --step-0 :clamp(1.06rem, .96rem + .50vw, 1.38rem);
  --step-1 :clamp(1.25rem, 1.08rem + .85vw, 1.88rem);
  --step-2 :clamp(1.50rem, 1.22rem + 1.40vw, 2.50rem);
  --step-3 :clamp(1.90rem, 1.45rem + 2.25vw, 3.40rem);

  --measure:22ch;
  --wrap:min(100% - 2.5rem, 46rem);
  --hero-w:44rem;   /* ancho de la "tarjeta" de portada */
  --gap-section:clamp(3rem, 9vw, 6.5rem);
  --radius-pill:999px;
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}

body{
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.4;
  color:var(--wine);
  background:var(--paper);
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* ── Utilidades ──────────────────────────────────────────── */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;inset-inline-start:.5rem;inset-block-start:-4rem;
  z-index:100;padding:.6rem 1rem;border-radius:.5rem;
  background:var(--wine);color:var(--wine-ink);text-decoration:none;
  transition:inset-block-start .2s;
}
.skip-link:focus{inset-block-start:.5rem}

:where(a,button):focus-visible{
  outline:3px solid var(--wine);
  outline-offset:3px;
  border-radius:.35rem;
}

/* ── Estructura de secciones ─────────────────────────────── */
.section{
  position:relative;
  padding-inline:1.25rem;
  padding-block:var(--gap-section);
  text-align:center;
}
.section > *{
  margin-inline:auto;
  max-width:var(--wrap);
}

.lettering{margin-inline:auto}
.lettering--fecha  {width:min(88%, 30rem); margin-block:.6rem 1.6rem}
.lettering--lugar  {width:min(52%, 15rem)}
.lettering--hora   {width:min(74%, 22rem); margin-block-start:clamp(2.5rem,7vw,4rem)}
.lettering--dress  {width:min(66%, 20rem)}
.lettering--quince {width:min(66%, 19rem)}
.lettering--cierre {width:min(84%, 26rem)}

/* ── Portada ─────────────────────────────────────────────── */
.hero{
  position:relative;
  padding-block-start:clamp(1.5rem,5vw,3rem);
  background:linear-gradient(180deg, var(--pink-top) 0%, var(--cream) 100%);
}
/* La portada se comporta como una tarjeta: la ilustración y la cenefa
   de rosas comparten el mismo ancho para conservar la proporción del
   diseño original (1366 px de Canva). */
.hero__inner{
  position:relative;
  width:min(100% - 1.5rem, var(--hero-w));
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr; /* lettering e ilustración se superponen */
}
.hero__name{
  grid-area:1/1;
  z-index:2;
  align-self:start;
  justify-self:start;
  width:min(62%, 20rem);
  margin-inline-start:clamp(.25rem, 2vw, 1.25rem);
}
.hero__girl{
  grid-area:1/1;
  z-index:1;
  justify-self:end;
  width:79%;
  margin-block-start:clamp(2.5rem, 11vw, 3.5rem);
}
.roses{display:block;margin-inline:auto}
.roses--hero{
  position:relative;
  z-index:3;
  width:min(100%, var(--hero-w));
  margin-block-start:-8%;
}
.roses--divider{
  /* nunca más ancho que su contenedor: evita scroll horizontal en móvil */
  width:min(100%, var(--hero-w));
  max-width:none;
  margin-block-start:clamp(2.5rem,8vw,4.5rem);
}

/* ── Mensaje ─────────────────────────────────────────────── */
.section--message{
  background:var(--cream);
  padding-block-start:clamp(1.5rem,5vw,2.5rem);
}
.message{
  font-weight:700;
  font-style:italic;
  font-size:var(--step-1);
  line-height:1.45;
  max-width:var(--measure);
  text-wrap:balance;
}

/* ── Fecha ───────────────────────────────────────────────── */
.section--date{
  background:var(--cream);
  padding-block-start:0;
}
.lead{
  font-size:var(--step-2);
  font-weight:700;
  line-height:1.3;
}

/* ── Cuenta regresiva ────────────────────────────────────── */
.countdown{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(.15rem,1.2vw,.6rem);
  font-variant-numeric:tabular-nums;
}
.countdown__unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:clamp(3.1rem,15vw,5.5rem);
}
.countdown__num{
  font-size:var(--step-3);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.01em;
}
.countdown__lbl{
  font-size:clamp(.6rem,2.1vw,.8rem);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-block-start:.35rem;
  opacity:.8;
}
.countdown__sep{
  font-size:var(--step-3);
  font-weight:700;
  line-height:1.05;
  opacity:.55;
}
.countdown__unit--sec .countdown__num{opacity:.72}
.countdown__done{
  font-size:var(--step-2);
  font-weight:700;
  font-style:italic;
  margin-block-start:1rem;
}

/* ── Lugar y hora ────────────────────────────────────────── */
.section--venue{background:var(--cream);padding-block-start:0}
.venue__name,
.venue__time{
  font-size:var(--step-2);
  font-weight:700;
  margin-block-start:.35rem;
  text-wrap:balance;
}

/* ── Botones ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  margin-block-start:1.1rem;
  padding:.55em 1.9em;
  min-height:44px;
  background:var(--wine);
  color:var(--wine-ink);
  font-size:var(--step--1);
  text-decoration:underline;
  text-underline-offset:.18em;
  border-radius:var(--radius-pill);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px -8px rgba(167,50,69,.6);
}
.btn:active{transform:translateY(0)}

.btn--wa{
  text-decoration:none;
  font-size:var(--step-0);
  font-weight:700;
  padding-inline:1.5em;
  background:#25d366;
  color:#0b3d1f;
}
.btn--wa:hover{box-shadow:0 8px 20px -8px rgba(37,211,102,.75)}
.btn__ico{width:1.35em;height:1.35em;fill:currentColor;flex:none}

/* ── Dress code ──────────────────────────────────────────── */
.section--dress{background:var(--cream);overflow:hidden}
.dress__level{font-size:var(--step-1);font-weight:700;margin-block-start:.5rem}
.dress__hint{font-size:var(--step-0);margin-block-start:.15rem}

/* 3×3 en móvil, 5+4 desde tablet — nunca deja un color huérfano */
.palette{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  justify-items:center;
  gap:clamp(1rem,4vw,1.9rem) clamp(.5rem,2.5vw,1.2rem);
  margin-block-start:clamp(1.6rem,5vw,2.4rem);
  max-width:34rem;
}
@media (min-width:30rem){
  .palette{grid-template-columns:repeat(5, minmax(0,1fr))}
}
.swatch{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
}
.swatch__dot{
  inline-size:clamp(2.6rem,11vw,3.4rem);
  block-size:clamp(2.6rem,11vw,3.4rem);
  border-radius:50%;
  background:var(--c);
  box-shadow:0 2px 8px -3px rgba(74,14,31,.45);
}
.swatch__lbl{
  font-size:clamp(.72rem,2.4vw,.95rem);
  line-height:1.2;
  text-wrap:balance;
}

/* ── Colores reservados ──────────────────────────────────── */
.section--reserved{
  background:var(--cream) url("../img/art/watercolor.jpg") center/cover no-repeat;
  padding-block:clamp(3.5rem,10vw,6rem);
}
.frame{
  position:relative;
  width:min(100% - 1rem, 34rem);
  padding:clamp(2rem,7vw,3.2rem) clamp(1.25rem,5vw,2.5rem);
  background:#fff;
  border:2px solid var(--wine);
  border-radius:clamp(1.5rem,6vw,2.75rem);
  box-shadow:0 0 0 6px #fff, 0 18px 45px -25px rgba(74,14,31,.55);
}
.reserved__title{font-size:var(--step-1);font-weight:700;margin-block-start:.6rem}
.reserved__sub{font-size:var(--step-0);margin-block-start:.1rem}
.palette--reserved{
  grid-template-columns:repeat(3, minmax(0,1fr));
  max-width:22rem;
  margin-block-start:1.6rem;
}
@media (min-width:30rem){
  .palette--reserved{grid-template-columns:repeat(3, minmax(0,1fr))}
}

/* ── Lluvia de sobres + RSVP ─────────────────────────────── */
.section--rsvp{background:var(--paper);overflow:hidden}
.gift__title{font-size:var(--step-1);font-weight:700}
.gift__icon{
  width:min(30%, 7.5rem);
  margin-block:1rem clamp(2.5rem,8vw,3.5rem);
}
.rsvp__title{font-size:var(--step-1);font-weight:700}
.rsvp__phone{margin-block-start:.9rem;font-size:var(--step-1);font-weight:700}
.rsvp__phone a{text-decoration:none}
.rsvp__phone a:hover{text-decoration:underline}

/* ── Decoración de fondo ─────────────────────────────────── */
.deco{
  position:absolute;
  z-index:0;
  opacity:.55;
  pointer-events:none;
  user-select:none;
}
.section--dress > :not(.deco),
.section--rsvp  > :not(.deco){position:relative;z-index:1}

.deco--flower-l{inset-block-start:6%;inset-inline-start:-14%;width:min(46%,16rem)}
.deco--flower-r{inset-block-start:6%;inset-inline-end:-14%;width:min(46%,16rem);transform:scaleX(-1)}
.deco--lilies-l{inset-block-end:6%;inset-inline-start:-9%;width:min(38%,13rem)}
.deco--lilies-r{inset-block-end:6%;inset-inline-end:-9%;width:min(38%,13rem);transform:scaleX(-1)}

/* ── Cierre ──────────────────────────────────────────────── */
.section--closing{
  background:var(--paper);
  padding-block:clamp(2.5rem,8vw,5rem) clamp(3.5rem,10vw,6rem);
}

/* ── Botón de música ─────────────────────────────────────── */
.music-toggle{
  position:fixed;
  inset-block-end:max(1rem, env(safe-area-inset-bottom));
  inset-inline-end:1rem;
  z-index:50;
  display:grid;
  place-items:center;
  inline-size:48px;
  block-size:48px;
  border-radius:50%;
  background:var(--wine);
  color:var(--wine-ink);
  box-shadow:0 6px 18px -6px rgba(74,14,31,.65);
  cursor:pointer;
  transition:transform .18s ease;
}
.music-toggle:hover{transform:scale(1.06)}
.music-toggle svg{width:22px;height:22px;fill:currentColor;grid-area:1/1}
.music-toggle .ico-play{display:none}
.music-toggle .ico-mute{display:block}
.music-toggle[aria-pressed="true"] .ico-play{display:block}
.music-toggle[aria-pressed="true"] .ico-mute{display:none}
/* Si el audio falla, el control se atenúa pero permanece visible */
.music-toggle:disabled{opacity:.4;cursor:not-allowed;transform:none}
/* Un ancestro con transform crearía bloque contenedor para position:fixed */
.music-toggle{will-change:auto}

/* ── Escritorio ──────────────────────────────────────────── */
@media (min-width:48rem){
  :root{--hero-w:46rem}
  .deco--flower-l,.deco--flower-r{inset-inline:auto;width:min(22%,14rem)}
  .deco--flower-l{inset-inline-start:max(1rem, calc(50% - 26rem))}
  .deco--flower-r{inset-inline-end:max(1rem, calc(50% - 26rem))}
  .deco--lilies-l{inset-inline-start:max(1rem, calc(50% - 24rem))}
  .deco--lilies-r{inset-inline-end:max(1rem, calc(50% - 24rem))}
  .hero__name{width:min(48%,19rem)}
}

/* ── Preferencias del sistema ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

@media print{
  .music-toggle,.skip-link,.btn{display:none!important}
  body{background:#fff}
  .section{break-inside:avoid;padding-block:1.5rem}
}