/* ==========================================================
   Rober & Pri — Estilos base
   Slide 0: sobre azul cerrado sobre cielo animé.
   Slides 1+: tinta azul sobre el papel (crema) que salió del sobre.
   ========================================================== */

:root {
  --blue-900: #0b1e3f;
  --blue-800: #10306b;
  --blue-700: #1a4a9e;
  --blue-500: #3b7dd8;
  --blue-300: #8fbcf5;
  --blue-100: #dbeaff;
  --white: #ffffff;
  --pink: #f7a8c4;
  --gold: #f5d47a;
  --gold-deep: #b08a2e;

  --paper: #f7f3ec;
  /* Textura de la hoja de fondo: paper-fine-tile.jpg (grano fino, más blanca) o paper-cotton-tile.jpg (algodón, crema).
     Las versiones *-tile son la imagen + su reflejo vertical, para repetir en Y sin costura. */
  --paper-texture: url(../assets/img/paper-fine-tile.jpg);
  --ink: var(--blue-900);
  --ink-soft: #2b4a7a;

  /* Sobre: relación 1000x720 (misma que el viewBox de los SVG) y lo más grande posible */
  --env-w: min(94vw, 760px, calc(78vh / 0.72));
  --env-h: calc(var(--env-w) * 0.72);
  /* La hoja tiene la proporción de img1.png (1920x1080) para que al crecer coincida con el slide 1 */
  --paper-w: calc(var(--env-w) * 0.9);
  --paper-h: calc(var(--paper-w) / 1.7778);
  --env-blue: #0f3070;
  --env-dark: #0a1b3a;

  --font-title: 'Tangerine', cursive;
  --font-body: 'Cormorant Garamond', 'Georgia', serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button { font: inherit; }

/* ---------- Fondo de papel deslizante ---------- */
.bg-paper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--total-slides, 1) * 100vh);
  z-index: 0;
  background: var(--paper) var(--paper-texture) top center / 100% auto repeat-y;
  will-change: transform;
  pointer-events: none;
}

/* ---------- Escena del sobre ---------- */
.envelope-scene {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 5vh, 3rem);
  pointer-events: none;
}
.envelope-scene[hidden] { display: none; }

.env-wrap {
  position: relative;
  width: var(--env-w);
  height: var(--env-h);
}

.env-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0) 40%),
    linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0) 35%),
    var(--env-dark);
  box-shadow: 0 25px 60px rgba(11,30,63,0.35), 0 4px 12px rgba(11,30,63,0.2);
}

.env-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.paper {
  position: absolute;
  left: calc(50% - var(--paper-w) / 2);
  top: calc(50% - var(--paper-h) / 2);
  width: var(--paper-w);
  height: var(--paper-h);
  z-index: 2;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: 0 6px 24px rgba(11,30,63,0.28);
  transform-origin: center;
  will-change: transform;
  overflow: hidden;
}
.paper__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cuatro puntas: cada caja es el rectángulo que encierra su triángulo y gira sobre su borde exterior.
   z-index 4 cerradas (delante del papel); JS las baja a 1 al pasar los 90°. */
.env-flap {
  position: absolute;
  z-index: 4;
  perspective: 1600px;
  will-change: transform;
}
.env-flap--top    { left: 0;   top: 0;     width: 100%; height: 57%; }
.env-flap--bottom { left: 0;   top: 55.5%; width: 100%; height: 44.5%; }
.env-flap--left   { left: 0;   top: 0;     width: 50%;  height: 100%; }
.env-flap--right  { left: 50%; top: 0;     width: 50%;  height: 100%; }

.flap {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.env-flap--top    .flap { transform-origin: top center; }
.env-flap--bottom .flap { transform-origin: bottom center; }
.env-flap--left   .flap { transform-origin: left center; }
.env-flap--right  .flap { transform-origin: right center; }

.flap__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.flap__face--front svg { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45)); }
/* La cara interna tiene que ocupar EXACTAMENTE el lugar de la frontal mirando hacia atrás, para que al abrirse
   la base quede pegada al sobre y el vértice apunte hacia afuera. Arriba/abajo: giro sobre Y (el triángulo es
   simétrico en X, queda en su lugar). Laterales: giro sobre X, con el polígono del SVG pre-espejado en Y. */
.env-flap--top    .flap__face--back,
.env-flap--bottom .flap__face--back { transform: rotateY(180deg); }
.env-flap--left   .flap__face--back,
.env-flap--right  .flap__face--back { transform: rotateX(180deg); }

.seal {
  position: absolute;
  left: 50%;
  top: 100%;
  width: clamp(96px, 26%, 200px);
  /* El PNG tiene aire transparente abajo: el lacre está centrado al 45% de su alto */
  transform: translate(-50%, -45%);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));
}
.seal img { width: 100%; height: auto; }

.open-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.open-hint__arrow {
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--blue-500), transparent);
  animation: bounce 1.8s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(10px); opacity: 0.4; }
}

/* ---------- Escenario / slides ---------- */
.stage {
  position: relative;
  z-index: 3;
  height: 100%;
  width: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  visibility: hidden;
  will-change: transform;
}
.slide[data-span="2"] { bottom: auto; height: 200vh; }
.slide--cover,
.slide--photo { padding: 0; }
.photo { width: 100%; height: auto; }
.cover__img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  max-width: none; /* el img { max-width: 100% } global la deformaría */
  transform: translateX(-50%);
}

.names {
  margin: 0;
  font-family: 'Tangerine', cursive;
  font-weight: 700;
  font-size: clamp(2.5rem, 18vw, 8rem);
  line-height: 1;
  color: var(--env-blue);
}
.names__sub {
  margin: 0.5rem 0 0;
  font-family: 'Tangerine', cursive;
  font-weight: 400;
  font-size: clamp(2.6rem, 10vw, 5rem);
  line-height: 1.1;
  color: #111;
}

.slide__content {
  max-width: 720px;
  width: 100%;
  text-align: center;
}

.anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.slide.is-active .anim { opacity: 1; transform: translateY(0); }
.slide.is-active .anim[data-delay="1"] { transition-delay: 150ms; }
.slide.is-active .anim[data-delay="2"] { transition-delay: 300ms; }
.slide.is-active .anim[data-delay="3"] { transition-delay: 450ms; }

/* ---------- Tipografía (sobre papel) ---------- */
.heading {
  margin: 0 0 0.5rem;
  font-family: var(--font-title);
  font-size: clamp(3.5rem, 14vw, 6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--env-blue);
}
.text {
  margin: 0 auto 1.5rem;
  max-width: 520px;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  line-height: 1.5;
  color: var(--ink-soft);
}

.text2 {
  margin: 0 auto 1.5rem;
  max-width: 520px;
  font-size: clamp(1.65rem, 2.4vw, 1.4rem);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- Fecha y countdown ---------- */
.lead {
  margin: 0 auto 1.5rem;
  max-width: 24ch;
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  color: #111;
}
.date {
  margin: 0 0 2rem;
  font-size: clamp(1.6rem, 6.5vw, 2.6rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums;
  color: var(--env-blue);
}

/* ---------- Cronograma: línea central, filas alternadas, íconos que se dibujan ---------- */
.timeline {
  --line: rgba(15,48,112,0.35);
  list-style: none;
  margin: 1rem auto 0;
  padding: 0;
  position: relative;
  width: min(100%, 420px);
  color: #111;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: var(--line);
}
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 2.6rem;
  min-height: clamp(4.5rem, 11vh, 7.5rem);
}
/* Corazón sobre la línea */
.timeline li::before {
  content: '♥';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--env-blue);
  color: var(--paper);
  font-size: 10px;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 3px var(--paper);
}
.tl__info {
  text-align: right;
  font-size: clamp(1rem, 2.6vh, 1.25rem);
  line-height: 1.25;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.tl__info time {
  display: block;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--env-blue);
}
.tl__icon {
  width: clamp(44px, 8vh, 64px);
  height: clamp(44px, 8vh, 64px);
  justify-self: start;
  fill: none;
  stroke: var(--env-blue);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1; /* pathLength="1" en cada trazo: se dibuja al pasar a 0 */
  transition: stroke-dashoffset 1400ms ease-out 150ms;
}
/* Filas pares: ícono a la izquierda, texto a la derecha */
.timeline li:nth-child(even) .tl__info { order: 2; text-align: left; transform: translateX(12px); }
.timeline li:nth-child(even) .tl__icon { order: 1; justify-self: end; }
.timeline li.is-in .tl__info { opacity: 1; transform: none; }
.timeline li.is-in .tl__icon { stroke-dashoffset: 0; }

/* ---------- Ubicación ---------- */
.map {
  width: 75%;
  max-width: 370px;
  aspect-ratio: 4 / 3;
  margin: 0 auto 1.25rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(15,48,112,0.2);
  box-shadow: 0 10px 30px rgba(11,30,63,0.15);
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none; /* solo vista previa: si captura el touch, no se puede seguir deslizando la página */
}

/* ---------- Componentes ---------- */
.scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blue-500);
}
.scroll-hint__arrow {
  width: 1px;
  height: 40px;
  background: linear-gradient(var(--blue-500), transparent);
  animation: bounce 1.8s ease-in-out infinite;
}
.scroll-hint--cover {
  position: absolute;
  left: 50%;
  bottom: 4rem;
  transform: translateX(-50%);
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.scroll-hint--cover .scroll-hint__arrow { background: linear-gradient(var(--white), transparent); }

.portrait {
  margin: 0 auto;
  width: min(60vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--blue-300);
  box-shadow: 0 10px 40px rgba(26,74,158,0.25);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.card {
  padding: 1.5rem 1.25rem;
  border-radius: 18px;
  background: rgba(26,74,158,0.06);
  border: 1px solid rgba(26,74,158,0.18);
}
.card h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--gold-deep);
}
.card__time { margin: 0 0 0.5rem; font-size: 1.6rem; font-weight: 700; color: var(--blue-800); }
.card p { margin: 0 0 0.75rem; line-height: 1.5; color: var(--ink-soft); }

.btn {
  display: inline-block;
  padding: 0.7rem 1.9rem;
  font-size: 1.15rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.btn--primary {
  border: var(--blue-700) solid 1px;
  color: var(--blue-700);
}
.btn--primary:hover { background: var(--blue-700); color: var(--white); }
.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
}
.actions .btn { min-width: 11rem; text-align: center; }

.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(0.75rem, 4vw, 2rem);
}
.countdown div { display: flex; flex-direction: column; align-items: center; }
.countdown b {
  font-family: var(--font-body);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(2.2rem, 1vw, 3.6rem);
  line-height: 1;
  color: #111;
}
.countdown span {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-500);
}

.bank {
  margin: 0 auto 2rem;
  padding: 1.25rem;
  max-width: 420px;
  border-radius: 18px;
  background: rgba(26,74,158,0.06);
  border: 1px solid rgba(26,74,158,0.18);
  font-size: larger;
}
.bank p { margin: 0.4rem 0; color: var(--ink-soft); }
.bank code { font-family: monospace; letter-spacing: 0.08em; color: var(--blue-700); }

.footer-note {
  font-family: var(--font-title);
  font-size: 2.2rem;
  color: var(--gold-deep);
}

/* ---------- Navegación por puntos ---------- */
.dots {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--blue-700);
  background: transparent;
  cursor: pointer;
  transition: background 300ms, transform 300ms var(--ease);
}
.dot.is-active { background: var(--blue-700); transform: scale(1.4); }
body[data-slide="0"] .dots { opacity: 0; pointer-events: none; }
.dots { transition: opacity 300ms; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .slide { padding: 1.5rem 1.25rem; }
  .dots {
    right: auto;
    top: auto;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    flex-direction: row;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}