/* ============================================================
   The First Night — Sofía & Marco
   Estilos según 01_IMPLEMENTATION_GUIDE.md
   Arquitectura: cada escena = una composición única.
   Ilustración 9:16 al centro, textos superpuestos en Safe Areas.
   Papel canvas ocupando el resto del viewport.
   ============================================================ */

/* ---------- Fuentes locales (guide sección 4) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Paleta cerrada — guide sección 5 */
  --canvas: #F6F2EA;
  --arena: #DCCBB6;
  --lino: #EFE8DD;
  --azul-egeo: #4C6A8A;
  --bruma-marina: #AEBFCC;
  --oro-calido: #D8B87A;
  --verde-olivo: #7A8264;
  --carbon-calido: #4A433C;

  /* Espaciado base 8px */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* Márgenes por dispositivo */
  --margin: 32px;

  /* Tipografía */
  --f-editorial: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --f-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: var(--f-ui);
  font-size: 16px;
  color: var(--carbon-calido);
  background: var(--canvas);
  min-height: 100vh;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ol, ul, dl, dd, dt, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
main { display: block; }

/* ---------- Layer 01 · Canvas fijo global (guide sección 2) ---------- */
.canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--canvas) url("media/papel-canvas.png") center / cover no-repeat;
}
@media (min-width: 768px) {
  .canvas {
    background-size: auto 100vh;
    background-repeat: repeat;
  }
}

/* ============================================================
   ESCENA — composición única
   ============================================================ */

/* La escena ocupa el alto del viewport y centra su stage 9:16 */
.scene {
  position: relative;
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
}

/* Stage 9:16 — dentro vive la ilustración + los textos superpuestos */
.scene__stage {
  position: relative;
  width: 100%;
  height: 100svh;
  aspect-ratio: 9 / 16;
  max-width: 100vw;
  overflow: hidden;
  /* Fallback si el vídeo aún no ha pintado — evita ver transparencia */
  background: var(--lino);
}
@media (min-width: 768px) {
  .scene__stage {
    height: 100vh;
    height: 100dvh;
    max-height: 900px;
    width: auto;
    max-width: none;
  }
}

/* Layer 02 · Luma / ilustración full bleed */
.scene__stage > video,
.scene__stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* Layer 03 · HTML absoluto dentro del stage */
.scene__content {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 8% 8%;
  text-align: center;
  align-items: center;
  pointer-events: none;
}
.scene__content > * { pointer-events: auto; }

/* Posiciones — para elegir Safe Area por escena.
   Empezamos todas con --top/--bottom; ajustaremos escena a escena. */
.scene__content--top {
  top: 0;
  left: 0;
  right: 0;
}
/* Baja el bloque top ~20% de la altura del stage — usado en Scene 01
   para dejar respirar la ilustración por encima de los nombres. */
.scene__content--top.scene__content--lowered {
  top: 20%;
}
.scene__content--bottom {
  bottom: 0;
  left: 0;
  right: 0;
}
.scene__content--left {
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}
.scene__content--right {
  top: 0;
  bottom: 0;
  right: 0;
  width: 60%;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
}
.scene__content--center {
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

/* ============================================================
   PORTAL · experiencia independiente. Se monta al cargar el
   documento y se desmonta cuando el usuario atraviesa la puerta.
   No comparte contenedores con la Historia.
   ============================================================ */
.portal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--canvas) url("media/papel-canvas.png") center / cover no-repeat;
  overflow: hidden;
}
.portal__stage {
  position: relative;
  width: 100%;
  height: 100svh;
  aspect-ratio: 9 / 16;
  max-width: 100vw;
  overflow: hidden;
  background: var(--lino);
}
@media (min-width: 768px) {
  .portal__stage {
    height: 100svh;
    max-height: 900px;
    width: auto;
    max-width: none;
  }
}
.portal__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
.portal__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
  background: transparent;
  border: 0;
}
.portal__btn:focus-visible {
  outline: 2px dashed rgba(76, 106, 138, 0.4);
  outline-offset: -8px;
}

/* ============================================================
   TIPOGRAFÍA (guide sección 4)
   ============================================================ */
.kicker {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--carbon-calido);
}
.hero {
  font-family: var(--f-editorial);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.05;
  color: var(--azul-egeo);
  letter-spacing: 0.005em;
}
.h1 {
  font-family: var(--f-editorial);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  color: var(--azul-egeo);
}
.h2 {
  font-family: var(--f-editorial);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  color: var(--carbon-calido);
  font-style: italic;
}
.h3 {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--carbon-calido);
}
.body {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.65;
  color: var(--carbon-calido);
  max-width: 34ch;
}
.small {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  color: var(--carbon-calido);
}
.meta {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--verde-olivo);
  text-transform: uppercase;
}
.body strong { color: var(--azul-egeo); font-weight: 500; }

/* ---------- Info list (Ceremonia, Banquete) ---------- */
.info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  align-items: center;
  padding-top: var(--sp-2);
}
.info > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.info dt {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--verde-olivo);
}
.info dd {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--carbon-calido);
}

/* ============================================================
   ESCENAS DE LIBRO (Protocolo, Timeline) — sin ilustración
   Se leen sobre el papel canvas, con carácter editorial.
   ============================================================ */
.scene--book {
  min-height: 100vh;
  padding: var(--sp-12) var(--margin);
  display: block;
}
.book {
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.editorial-title {
  font-family: var(--f-editorial);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: var(--azul-egeo);
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.editorial-intro {
  font-family: var(--f-editorial);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  font-style: italic;
  color: var(--carbon-calido);
  max-width: 40ch;
  margin: 0 auto;
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(74, 67, 60, 0.15);
}

/* Bloque complementario a Scene 01 · fecha + intro sobre canvas.
   Sin título ni separadores — respira como una página en blanco
   de un libro. */
.book--complementary {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-8);
}
.book--complementary .editorial-date {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--verde-olivo);
  margin: 0 0 var(--sp-6) 0;
}
.book--complementary .editorial-intro {
  border-bottom: 0;
  padding-bottom: 0;
  max-width: 34ch;
  font-size: 22px;
  line-height: 1.5;
}
.editorial-h3 {
  font-family: var(--f-editorial);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  color: var(--azul-egeo);
  margin-bottom: var(--sp-1);
}

/* ---------- Protocolo — pausa editorial breve ---------- */
.book__blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding-top: var(--sp-6);
  text-align: left;
}
.book__block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.book__block .body { max-width: 46ch; }

/* ============================================================
   TIMELINE · clímax visual
   Path SVG orgánico que se dibuja con el scroll, nodos que
   aparecen alternando izquierda / derecha, transición del
   trazado hacia azul noche en el último tramo.
   ============================================================ */
.timeline {
  position: relative;
  margin-top: var(--sp-8);
  padding: var(--sp-8) 0 var(--sp-12) 0;
  color: var(--verde-olivo);
  transition: color 1800ms ease;
}
.timeline--twilight {
  color: var(--azul-egeo);
}
.timeline__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.timeline__path {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
}
.timeline__nodes {
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}
.timeline__node {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--sp-3);
  align-items: center;
  padding: 0 var(--sp-3);
}
.timeline__icon-wrap {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  position: relative;
}
.timeline__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(74, 67, 60, 0.08));
}
.timeline__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.timeline__time {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: currentColor;
  margin: 0;
}
.timeline__node h3 { color: currentColor; }
.timeline__body .body { max-width: 40ch; margin-top: 2px; color: var(--carbon-calido); }

/* ============================================================
   CTA
   ============================================================ */
.cta {
  display: inline-block;
  padding: 12px 28px;
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--canvas);
  background: var(--azul-egeo);
  border: 0;
  border-radius: 1px;
  cursor: pointer;
  transition: opacity 180ms ease-out;
  align-self: center;
  margin-top: var(--sp-3);
  text-align: center;
}
.cta:hover, .cta:focus-visible { opacity: 0.85; }
.cta:focus-visible { outline: 2px solid var(--azul-egeo); outline-offset: 3px; }
.cta--submit { align-self: stretch; margin-top: var(--sp-4); padding: 14px 28px; }

/* ============================================================
   SECCIÓN RSVP · independiente, oculta por defecto
   ============================================================ */
.rsvp {
  position: relative;
  padding: var(--sp-12) var(--margin);
  min-height: 100vh;
}
.rsvp__inner {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: center;
}
.rsvp__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: left;
  margin-top: var(--sp-6);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  border: 0;
  padding: 0;
  margin: 0;
}
.field label,
.field legend {
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--verde-olivo);
  padding: 0;
  margin: 0;
}
.field input[type="text"],
.field input[type="email"],
.field textarea {
  padding: 12px 14px;
  font-family: var(--f-ui);
  font-size: 15px;
  color: var(--carbon-calido);
  background: var(--lino);
  border: 1px solid rgba(74, 67, 60, 0.18);
  border-radius: 2px;
  transition: border-color 180ms ease-out, background 180ms ease-out;
  width: 100%;
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--azul-egeo);
  outline-offset: 2px;
  border-color: var(--azul-egeo);
  background: var(--canvas);
}
.field textarea { resize: vertical; font-family: var(--f-ui); }
.radio {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--f-ui);
  font-size: 15px;
  color: var(--carbon-calido);
  padding: 8px 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.radio input[type="radio"] {
  accent-color: var(--azul-egeo);
  width: 16px;
  height: 16px;
}
.rsvp__success {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  text-align: center;
}
.rsvp__success .hero {
  font-size: 40px;
  color: var(--azul-egeo);
}

/* ============================================================
   REVEAL — estado inicial GSAP
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  :root { --margin: 48px; }
  .kicker { font-size: 12px; }
  .hero { font-size: 56px; }
  .h1 { font-size: 42px; }
  .h2 { font-size: 28px; }
  .h3 { font-size: 15px; }
  .body { font-size: 16px; }
  .info dd { font-size: 15px; }

  .editorial-title { font-size: 64px; }
  .editorial-intro { font-size: 22px; }
  .editorial-h3 { font-size: 30px; }

  .rsvp { padding: var(--sp-16) var(--margin); }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  :root { --margin: 64px; }
  .kicker { font-size: 12px; letter-spacing: 0.32em; }
  .hero { font-size: 64px; }
  .h1 { font-size: 48px; }
  .h2 { font-size: 30px; }
  .body { font-size: 17px; }

  .editorial-title { font-size: 72px; }
  .editorial-h3 { font-size: 34px; }

  .rsvp__success .hero { font-size: 56px; }

  /* Protocolo · 2 columnas de bloques con más aire — deja de leerse
     como manual de instrucciones, se siente como una pausa editorial. */
  .book__blocks {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-8);
    row-gap: var(--sp-6);
  }

  /* Timeline · nodos alternando izquierda / derecha con el path
     serpenteando entre ellos. */
  .timeline__nodes { gap: var(--sp-12); }
  .timeline__node {
    grid-template-columns: 128px 1fr;
    gap: var(--sp-4);
    max-width: 44%;
  }
  .timeline__icon-wrap { width: 128px; height: 128px; }
  .timeline__node--left { margin-right: auto; }
  .timeline__node--right {
    margin-left: auto;
    grid-template-columns: 1fr 128px;
    text-align: right;
  }
  .timeline__node--right .timeline__body { order: 1; align-items: flex-end; }
  .timeline__node--right .timeline__icon-wrap { order: 2; }
}

/* ---------- Prefers Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}