/* =========================================================
   Paloma & Fausto — Save the Date · "Lado A · Lado B"
   ========================================================= */

:root{
  --paper:#F2EBD7;
  --paper-2:#E7DDC4;
  --oxblood:#4A0E12;
  --oxblood-deep:#3A090C;
  --oxblood-2:#631218;
  --wine:#8C1D24;
  --cognac:#B26B2E;
  --gold:#C79A55;

  /* El coñac de marca da 3.7:1 sobre el oxblood y 3.5:1 sobre el crema: vale para
     titulares grandes, pero falla AA (4.5:1) en cualquier texto pequeño. --cognac-text
     es la variante legible; cambia de valor según el fondo de la sección. */
  --cognac-lite:#D99A52;  /* sobre fondo oscuro → 6.4:1 */
  --cognac-deep:#8A4E1E;  /* sobre fondo crema  → 5.5:1 */
  --cognac-text:var(--cognac-lite); /* el body es oxblood */
  --ink:#24160F;
  --ink-deep:#0F0805; /* texto sobre coñac: --ink se queda en 4.2:1, esto da 4.8:1 */
  --ink-soft:#3A211B;

  --font-serif:"Cormorant Garamond", Georgia, serif;
  --font-caps:"Cinzel", Georgia, serif;
  --font-script:"Pinyon Script", cursive;
  --font-mono:"Space Mono", ui-monospace, monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1240px;
  --pad:clamp(1.25rem, 5vw, 5rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{
  font-family:var(--font-serif);
  background:var(--oxblood);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-loading{overflow:hidden;height:100vh}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--cognac);color:var(--ink)}

/* ---------- Type helpers ---------- */
.eyebrow, .mini-label, .track__label, .sound-toggle__txt, .side-label{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.68rem;
  font-weight:400;
}
.script-accent{
  font-family:var(--font-script);
  color:var(--cognac-text);
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1;
  font-weight:400;
}
.section-title{
  font-family:var(--font-serif);
  font-weight:300;
  font-size:clamp(2.6rem,8vw,5.8rem);
  line-height:.98;
  letter-spacing:-.01em;
}
.section-title span{font-style:italic;color:var(--cognac)}
.mini-label{color:var(--cognac-text);display:inline-block;margin-bottom:.4rem}

/* ---------- Grain ---------- */
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---------- Custom cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border:1px solid var(--cognac);border-radius:50%;
  transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s,opacity .3s;
  mix-blend-mode:difference;opacity:0;
}
.cursor__dot{position:absolute;inset:0;margin:auto;width:4px;height:4px;border-radius:50%;background:var(--cognac)}
.cursor.is-hot{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(199,154,85,.12);border-color:transparent}
.cursor.is-hot .cursor__dot{width:0;height:0}
body.cursor-ready .cursor{opacity:1}
@media (hover:hover) and (pointer:fine){body.cursor-ready *{cursor:none}}

/* ---------- Top bar ---------- */
/* Antes usaba mix-blend-mode:difference y se volvía ilegible al pasar sobre imágenes de
   tono medio (se invertía hacia el propio fondo). Ahora: transparente sobre el hero, con
   un velo que sostiene el texto, y barra sólida en cuanto empieza el scroll. */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:600;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(.9rem,2.2vw,1.6rem) var(--pad);
  color:var(--paper);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),backdrop-filter .45s var(--ease),
             border-color .45s var(--ease),padding .45s var(--ease);
}
.topbar::after{ /* velo: despega el texto del hero sin dibujar todavía una barra */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(20,5,7,.55), transparent);
  transition:opacity .45s var(--ease);
}
.topbar.is-scrolled{
  background:rgba(35,7,10,.9);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:rgba(199,154,85,.3);
  padding-top:clamp(.7rem,1.6vw,1.05rem);
  padding-bottom:clamp(.7rem,1.6vw,1.05rem);
}
.topbar.is-scrolled::after{opacity:0}
.topbar__brand img{width:46px;height:auto;filter:brightness(0) invert(1);opacity:.9;transition:width .45s var(--ease)}
.topbar.is-scrolled .topbar__brand img{width:38px}
.topbar__side{display:flex;align-items:center;gap:1.4rem}
.side-label{color:var(--paper);opacity:.8}
.track-toggle{display:flex;align-items:center;gap:.6rem;min-height:44px;padding:0 .2rem;color:var(--paper);opacity:.85;transition:opacity .3s}
.track-toggle:hover,.track-toggle:focus-visible{opacity:1}
.track-toggle__ico{display:flex;flex-direction:column;justify-content:center;gap:3px;width:14px}
.track-toggle__ico i{display:block;height:1px;background:currentColor}
.track-toggle__ico i:nth-child(2){width:70%}
.track-toggle__ico i:nth-child(3){width:45%}
.track-toggle__txt{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.28em;font-size:.68rem}
.sound-toggle{min-height:44px}
.sound-toggle{display:flex;align-items:center;gap:.6rem;color:var(--paper);opacity:.85;transition:opacity .3s}
.sound-toggle:hover{opacity:1}
.sound-toggle__bars{display:flex;align-items:flex-end;gap:2px;height:14px}
.sound-toggle__bars i{width:2px;height:5px;background:currentColor;transition:height .2s}
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i{animation:eq .9s ease-in-out infinite}
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(2){animation-delay:.15s}
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(3){animation-delay:.3s}
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}

/* ---------- Scroll progress (tonearm) ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:650;background:rgba(255,255,255,.08)}
.progress__mark{position:absolute;top:0;width:1px;height:100%;background:rgba(242,235,215,.35);
  transform:translateX(-.5px);transition:background .3s,width .3s}
.progress__mark.is-active{width:2px;background:var(--cognac);box-shadow:0 0 6px rgba(178,107,46,.85)}
.progress__fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cognac),var(--wine));transform-origin:left}

/* ================= HERO ================= */
.hero{position:relative;height:100svh;width:100%;overflow:hidden;background:var(--paper)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 42%, transparent 40%, rgba(74,14,18,.10) 100%);pointer-events:none;z-index:0}
.hero__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

.turntable{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;z-index:1}
.turntable img{width:min(78vmin,660px);height:auto;filter:drop-shadow(0 30px 60px rgba(74,14,18,.18))}
.turntable__hint{position:absolute;bottom:13%;left:0;right:0;text-align:center}
.turntable__hint span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.35em;text-transform:uppercase;color:var(--wine);opacity:.85}

.hero__photo{
  position:absolute;inset:0;
  --r:140%;
  clip-path:circle(var(--r) at 50% 45%);
  will-change:clip-path;
}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero__scrim{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 12%, transparent 30%, rgba(30,6,8,.35) 70%, rgba(30,6,8,.72) 100%),
  linear-gradient(180deg, rgba(20,5,7,.35) 0%, transparent 26%, transparent 55%, rgba(20,5,7,.78) 100%);}

.hero__copy{
  position:relative;z-index:5;text-align:center;padding:0 var(--pad);
}
.hero__copy>*{will-change:opacity,transform}
/* El fondo es una foto: sin este velo la fecha y los nombres bajan a ~2.3:1 sobre las
   zonas claras (la piel, la camisa). Reforzado para que el peor píxel también aguante. */
.hero__copy::before{
  content:"";position:absolute;inset:-16% -12%;z-index:-1;pointer-events:none;
  background:radial-gradient(62% 62% at 50% 50%, rgba(16,4,6,.72), rgba(16,4,6,.34) 58%, transparent 82%);
}
.hero__copy .eyebrow{display:flex;gap:.8rem;align-items:center;justify-content:center;color:var(--paper);opacity:.85;margin-bottom:1.6rem}
.hero__copy .eyebrow b{color:var(--cognac)}
.hero__logo{width:min(60vw,440px);height:auto;aspect-ratio:1200/852;object-fit:contain;margin:0 auto .2rem;filter:drop-shadow(0 4px 30px rgba(0,0,0,.5))}
.hero__names{font-family:var(--font-serif);font-style:italic;font-weight:300;font-size:clamp(1.4rem,3.4vw,2.1rem);letter-spacing:.02em;opacity:.92}
.hero__names em{color:var(--cognac);font-style:italic}
.hero__meta{
  margin-top:2rem;display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;
}
.hero__meta .dot{width:5px;height:5px;border-radius:50%;background:var(--cognac)}
.hero__actions{margin-top:2.2rem;display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.hero__actions .btn--ghost{border-color:rgba(242,235,215,.55);background:rgba(20,5,7,.35);backdrop-filter:blur(4px);opacity:.95}
.hero__actions .btn--ghost:hover{border-color:var(--paper);opacity:1}

.scroll-cue{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:.7rem;opacity:.85}
.scroll-cue span:first-child{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.3em;font-size:.6rem}
.scroll-cue__line{width:1px;height:44px;background:linear-gradient(var(--cognac),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* loading state (JS-driven intro) */
.is-loading .hero__photo{--r:0%}
.is-loading .turntable{opacity:1}
.is-loading .hero__copy{opacity:0}
.is-loading .scroll-cue,.is-loading .topbar,.is-loading .progress{opacity:0}
/* default (no-JS / post-intro) */
.hero__copy{opacity:1}

/* ================= TRACK scaffolding ================= */
.track{position:relative;padding:clamp(5rem,12vh,10rem) var(--pad);overflow:hidden}
.track__label{
  position:absolute;top:clamp(1.6rem,4vh,3rem);left:var(--pad);
  display:flex;gap:1.2rem;color:var(--cognac-text);
}
.track__label span:first-child{color:inherit}
.track__label span:last-child{opacity:.85}

/* reveal utility */
.reveal{opacity:0;transform:translateY(34px)}
body:not(.is-loading) .reveal.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}

/* alternating sleeves */
.rsvp,.dresscode,.outro{background:var(--oxblood-deep);color:var(--paper)}
.story,.playlist,.hotel{background:var(--paper);color:var(--ink);--cognac-text:var(--cognac-deep)}
.story .track__label,.playlist .track__label,.hotel .track__label{color:var(--wine)}
.story .script-accent,.playlist .script-accent,.hotel .script-accent{color:var(--wine)}

/* deco illustrations */
.deco{position:absolute;pointer-events:none;opacity:.9;z-index:1}
.deco--cockatiel{width:min(26vw,220px);top:12%;right:6%;opacity:.5}
.deco--car{width:min(38vw,320px);right:-2%;bottom:8%;opacity:.35}
.deco--table{width:min(40vw,360px);left:-4%;bottom:-4%;opacity:.22}

/* ================= COUNTDOWN ================= */
.countdown{
  position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--paper);isolation:isolate;
  background:var(--ink) url("assets/img/gramophone.webp") center/cover no-repeat;
}
.countdown::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(80% 70% at 50% 45%, rgba(58,9,12,.55), rgba(30,6,8,.86) 80%),
    linear-gradient(180deg, rgba(20,5,7,.92) 0%, rgba(58,9,12,.55) 30%, rgba(58,9,12,.55) 70%, rgba(20,5,7,.95) 100%);
}
.countdown__inner{max-width:960px;position:relative;z-index:1}
.countdown__title{font-family:var(--font-serif);font-weight:300;font-style:italic;font-size:clamp(2rem,6vw,4rem);margin:.3rem 0 2.6rem;line-height:1}
.clock{display:flex;align-items:flex-start;justify-content:center;gap:clamp(.6rem,2.5vw,2rem)}
.clock__unit{display:flex;flex-direction:column;align-items:center;min-width:clamp(58px,14vw,140px)}
.clock__num{
  font-family:var(--font-caps);font-weight:500;
  font-size:clamp(3rem,11vw,8rem);line-height:.9;
  font-variant-numeric:tabular-nums;color:var(--paper);
  text-shadow:0 8px 40px rgba(0,0,0,.4);
}
.clock__lbl{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.24em;font-size:.6rem;margin-top:.9rem;color:var(--cognac-text)}
/* iba en --wine sobre fondo oscuro: 1.1:1, prácticamente invisible */
.clock__sep{font-family:var(--font-caps);font-size:clamp(2rem,7vw,5rem);color:var(--cognac-text);line-height:1;padding-top:.2em}
.countdown__date{margin-top:2.6rem;font-family:var(--font-mono);letter-spacing:.3em;font-size:.8rem;opacity:.7}

/* ================= STORY / GALLERY ================= */
.story__intro{max-width:640px;margin:0 0 clamp(2.5rem,6vw,4.5rem)}
.story__title{margin-bottom:clamp(1.4rem,3vw,2.2rem)}
/* Desktop: titular a la izquierda y relato a la derecha. El texto en una sola columna a
   640px dejaba media pantalla vacía y estiraba la sección a ~1200px de alto. */
@media (min-width:901px){
  .story__intro{
    max-width:var(--maxw);
    display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
    gap:clamp(2rem,5vw,4.5rem);align-items:start;
  }
  .story__title{margin-bottom:0}
}
.story__text{display:flex;flex-direction:column;gap:.85em;font-size:clamp(1.08rem,1.9vw,1.32rem);line-height:1.5;color:var(--ink-soft)}
/* las fechas en la mono del sitio: son los "tiempos" de la historia, como en una funda de disco */
.story__text b{
  font-family:var(--font-mono);font-weight:400;font-size:.82em;
  letter-spacing:.04em;color:var(--cognac-text);white-space:nowrap;
}
.gallery{columns:2;column-gap:clamp(1.2rem,3vw,2.4rem)}
.gallery__item{position:relative;overflow:hidden;border-radius:2px;break-inside:avoid;margin:0 0 clamp(1.2rem,3vw,2.4rem);box-shadow:0 30px 60px -30px rgba(58,9,12,.5)}
.gallery__item img{width:100%;height:auto;display:block;transition:transform 1.4s var(--ease)}
.gallery__item:hover img{transform:scale(1.05)}

/* ================= RSVP ================= */
.rsvp__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center;max-width:var(--maxw);margin:0 auto}
.rsvp__intro{position:relative}
.side-flip{font-family:var(--font-mono);letter-spacing:.4em;text-transform:uppercase;font-size:.7rem;color:var(--cognac-text);margin-bottom:1rem}
.rsvp .section-title span{color:var(--cognac)}
.rsvp__note{margin-top:1.4rem;font-size:1.15rem;line-height:1.55;opacity:.85;max-width:34ch}

.rsvp__form{display:flex;flex-direction:column;gap:1.6rem;background:rgba(255,255,255,.03);border:1px solid rgba(199,154,85,.25);padding:clamp(1.6rem,4vw,2.8rem);border-radius:4px;backdrop-filter:blur(2px)}
.field{display:flex;flex-direction:column;gap:.6rem}
.field label,.field legend{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;color:var(--cognac-text)}
.field label i,.field legend i{text-transform:none;letter-spacing:.02em;opacity:.6}
.field input[type=text]{
  background:transparent;border:none;border-bottom:1px solid rgba(242,235,215,.3);
  color:var(--paper);font-family:var(--font-serif);font-size:1.35rem;padding:.5rem 0;transition:border-color .3s;
}
.field input[type=text]::placeholder{color:rgba(242,235,215,.35);font-style:italic}
.field input[type=text]:focus{outline:none;border-color:var(--cognac)}
.field--choice{border:none}
.choice{display:flex;align-items:center;margin-top:.7rem}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label{display:flex;align-items:center;gap:.9rem;font-family:var(--font-serif);text-transform:none;letter-spacing:0;font-size:1.3rem;color:var(--paper);cursor:pointer}
.choice__mark{width:20px;height:20px;border:1px solid var(--cognac);border-radius:50%;flex:0 0 auto;position:relative;transition:.3s}
.choice input:checked + label .choice__mark{background:var(--cognac);box-shadow:inset 0 0 0 4px var(--oxblood-deep)}

/* ---------- RSVP · autocompletado de invitados ---------- */
.field--search{position:relative}
.rsvp__results{
  position:absolute;z-index:20;left:0;right:0;top:100%;margin:.35rem 0 0;padding:.3rem;
  list-style:none;max-height:15rem;overflow-y:auto;
  background:var(--oxblood);border:1px solid rgba(242,235,215,.18);border-radius:4px;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.7)
}
.rsvp__results[hidden]{display:none}
.rsvp__result{
  padding:.6rem .7rem;border-radius:3px;cursor:pointer;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;line-height:1.45;color:var(--paper)
}
.rsvp__result:hover,.rsvp__result.is-active{background:rgba(242,235,215,.12)}
.rsvp__result span{display:block;opacity:.6;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;margin-top:.15rem}
.rsvp__hint{margin:.5rem 0 0;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;opacity:.7;line-height:1.6}
.rsvp__hint.is-error{opacity:1;color:var(--cognac-text)}
.rsvp__hint a{color:var(--cognac-text);text-underline-offset:3px}

/* ---------- RSVP · grupo seleccionado ---------- */
.rsvp__group{
  margin:0 0 1.6rem;padding:1rem 1.1rem;border-radius:4px;
  background:rgba(242,235,215,.07);border:1px solid rgba(242,235,215,.16)
}
.rsvp__group[hidden]{display:none}
.rsvp__group-name{font-family:var(--font-serif);font-style:italic;font-size:1.35rem;line-height:1.2;margin:0}
.rsvp__group-spaces{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin:.45rem 0 0}
.rsvp__change{
  margin-top:.7rem;padding:0;background:none;border:0;cursor:pointer;color:var(--cognac-text);
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:underline;text-underline-offset:3px
}

/* ---------- RSVP · selector de espacios ---------- */
.field--spaces{border:none}  /* mismo reset que .field--choice */
.field--spaces[hidden],.field--choice[hidden],.field--optional[hidden]{display:none}
.spaces{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.7rem}
.spaces label{position:relative;display:block}
.spaces__opt{
  display:block;min-width:3.1rem;padding:.6rem .85rem;cursor:pointer;text-align:center;
  border:1px solid rgba(242,235,215,.28);border-radius:3px;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.06em;color:var(--paper);
  transition:background .25s ease,border-color .25s ease,color .25s ease
}
.spaces__opt:hover{border-color:rgba(242,235,215,.6)}
.spaces input{position:absolute;opacity:0;width:0;height:0}
.spaces input:checked + .spaces__opt{background:var(--cognac);border-color:var(--cognac);color:var(--ink-deep)}
.spaces input:focus-visible + .spaces__opt{outline:2px solid var(--paper);outline-offset:2px}
.choice input:focus-visible + label .choice__mark{outline:2px solid var(--paper);outline-offset:3px}

.rsvp__status{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;min-height:1.2em;color:var(--gold)}
.rsvp__status.is-error{color:#ffb4a8}

/* buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.8rem;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.22em;font-size:.74rem;
  padding:1.05rem 2.2rem;border-radius:40px;overflow:hidden;transition:transform .4s var(--ease),color .4s;
}
.btn--primary{background:var(--cognac);color:var(--ink-deep)}
.btn--primary::before{content:"";position:absolute;inset:0;background:var(--paper);transform:translateY(101%);transition:transform .5s var(--ease);z-index:0}
.btn--primary:hover::before{transform:translateY(0)}
.btn--primary .btn__label,.btn--primary .btn__needle{position:relative;z-index:1}
.btn--primary:hover{color:var(--oxblood)}
.btn__needle{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(0,0,0,.12)}
.btn--ghost{border:1px solid currentColor;opacity:.8}
.btn--ghost:hover{opacity:1;transform:translateY(-2px)}
.btn[disabled]{opacity:.5;pointer-events:none}
.rsvp__form .btn{align-self:flex-start}

/* ================= PLAYLIST ================= */
.playlist__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:center;max-width:var(--maxw);margin:0 auto}
.playlist__disc{display:flex;justify-content:center}
.spin-vinyl{width:min(70vw,420px);aspect-ratio:1;filter:drop-shadow(0 40px 60px rgba(58,9,12,.4));animation:spin 8s linear infinite}
.spin-vinyl svg{width:100%;height:100%}
.vinyl-arc{font-family:var(--font-mono);font-size:9px;letter-spacing:2px}
.vinyl-arc--sm{font-size:7px;letter-spacing:1.5px}
@keyframes spin{to{transform:rotate(360deg)}}
.playlist__note{margin:1.4rem 0 2rem;font-size:1.15rem;line-height:1.55;color:var(--ink-soft);max-width:40ch}
.spotify-embed{border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(58,9,12,.5);min-height:80px}
.spotify-embed iframe{display:block;width:100%;border:0;border-radius:14px}

/* ================= DRESS CODE ================= */
.dresscode__head{max-width:720px;margin:0 auto clamp(2.6rem,6vw,4.2rem);text-align:center}

/* Dos grupos: Mujeres (colores + paleta + referencias) y Hombres (descripción + referencias). */
.dresscode__looks{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:clamp(3.4rem,8vw,6rem)}
.dresscode__group-title{
  display:flex;align-items:center;gap:1.1rem;
  font-family:var(--font-caps);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  font-size:1.05rem;color:var(--cognac-text);
}
.dresscode__group-title::after{content:"";flex:1;height:1px;background:rgba(199,154,85,.28)}
.dresscode__lead{margin:1rem 0 2rem;font-size:1.12rem;line-height:1.5;opacity:.88;max-width:52ch}
.dresscode__lead em{color:var(--cognac-text);font-style:italic}
/* "Referencias de estilo" separa la paleta de las fotos dentro del grupo Mujeres */
.dresscode__refs-label{margin-top:2.2rem}

.lookrow__grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.7rem,2vw,1.6rem);margin-top:1rem}
.look img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:2px;box-shadow:0 26px 48px -28px rgba(0,0,0,.65);transition:transform 1.2s var(--ease)}
.look img:hover{transform:scale(1.04)}
.look__cap{
  display:block;margin-top:.85rem;text-align:center;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;
  font-size:.62rem;color:var(--paper);opacity:.8;
}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}
.chip{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-serif);font-size:1.02rem;padding:.48rem .95rem .48rem .55rem;border:1px solid rgba(242,235,215,.16);border-radius:40px;background:rgba(242,235,215,.04)}
.chip__dot{width:20px;height:20px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(242,235,215,.4), 0 2px 6px rgba(0,0,0,.4);flex:0 0 auto}

/* ================= HOTEL ================= */
/* La tarjeta es oscura dentro de una sección clara: sin esto hereda el .hotel .script-accent
   en --wine y el titulillo queda a 1.7:1 sobre el oxblood, ilegible. */
.hotel__card{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:var(--maxw);margin:0 auto;background:var(--oxblood);color:var(--paper);border-radius:4px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(58,9,12,.6);--cognac-text:var(--cognac-lite)}
.hotel__card .script-accent{color:var(--cognac-text)}
.hotel__media{position:relative;min-height:340px}
.hotel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hotel__pin{position:absolute;left:1.4rem;bottom:1.4rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.2em;font-size:.64rem;background:var(--cognac);color:var(--ink-deep);padding:.5rem .9rem;border-radius:30px}
.hotel__body{padding:clamp(2rem,4vw,3.4rem)}
.hotel__name{font-family:var(--font-serif);font-weight:300;font-size:clamp(2rem,4.5vw,3.2rem);line-height:1;margin:.3rem 0 1.6rem}
.hotel__facts{list-style:none;display:flex;flex-direction:column;gap:1.1rem;margin-bottom:2rem}
.hotel__facts li{font-size:1.08rem;line-height:1.5;opacity:.92}
.hotel__facts .mini-label{display:block;color:var(--cognac-text);margin-bottom:.2rem}
.hotel__actions{display:flex;gap:1rem;flex-wrap:wrap}
.hotel__mailrow{margin-top:1.4rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;opacity:.72;word-break:break-word}

/* ================= OUTRO ================= */
.outro{position:relative;min-height:96vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.outro__inner{position:relative;z-index:2;padding:0 var(--pad)}
.outro__car{position:absolute;left:50%;top:2%;width:min(52vw,440px);transform:translateX(-160%);opacity:.26;z-index:-1;pointer-events:none}
.outro__compass{width:92px;margin:0 auto 1.8rem;opacity:.95}
.outro__title{font-family:var(--font-serif);font-weight:300;font-style:italic;font-size:clamp(2.6rem,9vw,6.5rem);line-height:1;margin:.2rem 0}
.outro__meta{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.24em;font-size:.74rem;opacity:.8;margin-top:.6rem}
.outro__logo{width:min(50vw,320px);margin:2.6rem auto 1.6rem;opacity:.9}
.outro__credit{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;opacity:.72;text-transform:uppercase}
/* crédito discreto de la agencia — un acento, no protagonista */
.outro__by-julu{display:inline-flex;align-items:center;gap:.6em;margin-top:1.5rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);text-decoration:none;transition:opacity .3s ease}
.outro__by-julu span{opacity:.64;transition:opacity .3s ease}
.outro__by-julu img{height:22px;width:auto;display:block;opacity:.85;transition:opacity .3s ease}
.outro__by-julu:hover span{opacity:.72}
.outro__by-julu:hover img{opacity:1}

/* ================= RESPONSIVE ================= */
@media (max-width:900px){
  .rsvp__grid,.playlist__grid,.hotel__card{grid-template-columns:1fr}
  .playlist__disc{order:-1}
  .hotel__media{min-height:260px}
}
@media (max-width:600px){
  .track__label span:last-child{display:none}
  .clock__sep{display:none}
  .clock{gap:.5rem}
  .clock__unit{min-width:0;flex:1}
  .gallery{columns:1}
  /* los 3 looks se mantienen en fila: el objetivo es comparar los colores de un vistazo */
  .lookrow__grid{gap:.45rem}
  .look__cap{margin-top:.55rem;font-size:.52rem;letter-spacing:.1em}
  .hero__meta{flex-direction:column;gap:.5rem}
  .hero__actions{flex-direction:column;align-items:stretch;gap:.7rem}
  .hero__actions .btn{justify-content:center}
  .hero__meta .dot{display:none}
  .deco--cockatiel{opacity:.3}
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .spin-vinyl,.gatefold__vinyl-disc{animation:none}
  .scroll-cue__line{animation:none}
  .reveal{opacity:1;transform:none}
}

/* La barra se aprieta con "Tracks": el lado se ve dentro del panel */
@media (max-width:480px){
  .side-label{display:none}
  .topbar__side{gap:.9rem}
  .track-toggle__txt,.sound-toggle__txt{letter-spacing:.16em;font-size:.6rem}
}

/* ================= TRACK NAV · CARÁTULA DOBLE ================= */
/* Sin perspective fija aquí a propósito: un ancestro con perspective mete al subárbol en un
   contexto 3D y Chromium deja de desplazar con la rueda el tracklist interno. La perspectiva
   se pone por JS solo mientras las páginas giran, y se retira al terminar (ver animateOpen). */
.gatefold{position:fixed;inset:0;z-index:800;display:flex;background:var(--oxblood);color:var(--paper)}
.gatefold[hidden]{display:none}
body.nav-open{overflow:hidden;position:fixed;width:100%}

.gatefold__close{position:absolute;top:clamp(.6rem,1.6vw,1.2rem);right:var(--pad);z-index:810;
  width:44px;height:44px;display:grid;place-items:center;color:var(--paper);font-size:1.1rem;opacity:.8;transition:opacity .3s}
.gatefold__close:hover,.gatefold__close:focus-visible{opacity:1}

.gatefold__page{position:relative;padding:clamp(4.5rem,9vh,6rem) clamp(1.5rem,4vw,3.5rem) clamp(1.5rem,4vh,3rem)}
.gatefold__page--art{flex:0 0 42%;overflow:hidden;display:flex;background:linear-gradient(135deg,var(--oxblood),var(--oxblood-deep))}
.gatefold__page--list{flex:1;overflow-y:auto}

/* ---- El disco ----
   Tres capas: el disco que gira (surcos + etiqueta), y encima un reflejo que NO gira.
   Esa disociación es la que hace que se lea como vinilo y no como un círculo con rayas. */
.gatefold__vinyl{position:absolute;left:-12%;top:50%;transform:translateY(-50%);
  width:min(46vh,420px);aspect-ratio:1;border-radius:50%;
  box-shadow:0 22px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.6)}
.gatefold__vinyl-disc{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
  background:
    /* surco de salida, liso */
    radial-gradient(circle at 50% 50%, transparent 0 33%, rgba(0,0,0,.35) 33% 36%, transparent 36%),
    /* surcos: dos densidades, como el prensado real */
    repeating-radial-gradient(circle at 50% 50%, rgba(242,235,215,.05) 0 1px, transparent 1px 2.5px),
    repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.5) 0 1px, transparent 1px 7px),
    /* cuerpo del disco, con el brillo del prensado descentrado */
    radial-gradient(circle at 38% 32%, #3d2521 0%, #1d1210 18%, #120a09 55%, #060404 100%);
  animation:spin 16s linear infinite;
  will-change:transform}
/* el borde exterior: los últimos milímetros de un vinilo no llevan surco */
.gatefold__vinyl-disc::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, transparent 0 95%, rgba(0,0,0,.55) 95% 100%)}
.gatefold__vinyl-label{position:relative;z-index:2;width:100%;height:100%}
.gf-arc{font-family:var(--font-mono);font-size:5.4px;letter-spacing:1.1px}
.gf-arc--sm{font-size:4.4px;letter-spacing:.9px}
/* Reflejo fijo: dos bandas suaves de luz que el disco atraviesa al girar */
.gatefold__vinyl-sheen{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:3;
  background:conic-gradient(from 205deg at 50% 50%,
    transparent 0deg, rgba(255,241,214,.13) 20deg, rgba(255,241,214,.03) 44deg, transparent 62deg,
    transparent 175deg, rgba(255,241,214,.08) 196deg, transparent 224deg);
  mix-blend-mode:screen}

.gatefold__artmeta{position:relative;z-index:2;margin-left:auto;display:flex;flex-direction:column;
  justify-content:space-between;align-items:flex-end;text-align:right}
.gatefold__stamp{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--cognac-text);line-height:2;margin:0}
.gatefold__stamp--soft{color:rgba(242,235,215,.6)}
.gatefold__names{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.5rem,3vw,2.4rem);margin:0 0 .4rem}

.gatefold__seam{width:1px;flex:none;position:relative;background:rgba(242,235,215,.14)}
.gatefold__seam span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--oxblood);color:var(--cognac-text);font-family:var(--font-mono);font-size:.55rem;
  letter-spacing:.1em;padding:.5rem .25rem;border:1px solid rgba(178,107,46,.4);border-radius:2px}

.gatefold__side{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--cognac-text);display:flex;align-items:center;gap:.8rem;margin:1.6rem 0 .4rem}
.gatefold__side:first-child{margin-top:0}
/* "Tracks A1–A4" da contexto a Lado A / Lado B, que por sí solos no lo tienen */
.gatefold__side span{color:var(--paper);opacity:.5;letter-spacing:.16em}
.gatefold__side::after{content:"";flex:1;height:1px;background:rgba(242,235,215,.2)}

.tracklist{list-style:none;margin:0;padding:0}
.tracklist a{display:flex;align-items:center;gap:1rem;min-height:48px;padding:.5rem .6rem;
  text-decoration:none;color:var(--paper);border-bottom:1px solid rgba(242,235,215,.09);
  transition:background .25s,color .25s}
.tracklist a:hover{background:rgba(242,235,215,.07)}
.tracklist a:focus-visible{background:rgba(242,235,215,.07);outline:1px solid var(--cognac);outline-offset:-1px;border-radius:3px}
.tracklist span{flex:none;width:1.8rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--cognac-text);opacity:.9}
.tracklist em{font-family:var(--font-serif);font-style:normal;font-size:clamp(1.05rem,2vw,1.35rem)}
.tracklist small{margin-left:auto;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cognac-text)}
.tracklist a[aria-current="true"] em{color:var(--cognac-text)}
.tracklist__hot a{border-bottom:none;border-left:2px solid var(--cognac);border-radius:4px;
  margin:.4rem 0;background:rgba(178,107,46,.18)}
.tracklist__hot em{font-weight:700}

@media (max-width:820px){
  .gatefold{flex-direction:column}
  .gatefold__page--art{flex:0 0 clamp(120px,18vh,170px);padding:clamp(3.6rem,8vh,4.6rem) 1.25rem 1rem}
  .gatefold__vinyl{width:min(34vw,150px);left:-8%}
  .gatefold__seam{width:auto;height:1px}
  .gatefold__seam span{display:none}
  .gatefold__page--list{padding-top:1.25rem}
  .gatefold__names,.gatefold__stamp--soft{display:none}
  /* A este tamaño la etiqueta del vinilo no cabe en su círculo: se queda solo el disco */
  /* a este tamaño el texto de la etiqueta no se lee: queda el disco girando */
  .gatefold__vinyl-label text{display:none}
}

@media (prefers-reduced-motion:reduce){
  .gatefold{animation:gf-fade .15s ease both}
}
@keyframes gf-fade{from{opacity:0}to{opacity:1}}