/* =====================================================================
   ALEXIS & JOEL — Sistema de diseño
   Otoñal floral: mostaza · terracota · magenta · vino · salvia · crema
   ===================================================================== */

:root {
  /* Color · paleta de la referencia del cliente */
  --wine:       #d54d5c;   /* vino profundo (acento principal) */
  --wine-deep:  #6f0220;   /* vino más oscuro (hover) */
  --wine-soft:  #d43b59;   /* magenta (acento secundario, texto) */
  --blush:      #f2d5aa;   /* crema cálido */
  --blush-deep: #d8615d;   /* terracota rosado */
  --rose:       #d8615d;   /* terracota */
  --paper:      #FBF6EC;   /* lienzo claro */
  --paper-2:    #F1E4CB;   /* crema profundo */
  --paper-3:    #EAD9B8;   /* crema más profundo */
  --gold:       #d98f16;   /* mostaza */
  --gold-deep:  #a86b0d;   /* mostaza profundo */
  --gold-soft:  #e8c27a;   /* mostaza suave */
  --text:       #3a2f22;   /* tinta cálida */
  --text-soft:  #6b5d49;
  --on-wine:    #FBF3E4;
  --sage:       #898c79;   /* salvia (acento extra) */
  --sage-deep:  #545a38;   /* oliva profundo */
  --rust:       #cf5113;   /* naranja quemado (acento extra) */

  /* Tipografías */
  --f-script:  'Parisienne', cursive;
  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-body:    'EB Garamond', Georgia, serif;
  --f-label:   'Jost', 'Helvetica Neue', sans-serif;

  /* Easing */
  --ease-silk: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.15, 1);

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --nav-h:  clamp(3.6rem, 8vh, 4.6rem);
  --maxw:   1080px;
}

/* 1. RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

body {
  font-family: var(--f-body);
  color: var(--text);
  background: var(--paper);
  line-height: 1.7;
  overflow-x: hidden;
  animation: pageIn .8s var(--ease-silk) both;
}
body.is-leaving { animation: pageOut .42s var(--ease-soft) forwards; }

@media (prefers-reduced-motion: reduce) {
  body, body.is-leaving { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* 2. TIPOGRAFÍA */
.script { font-family: var(--f-script); font-weight: 400; line-height: 1.38; color: var(--wine); }
.eyebrow {
  font-family: var(--f-label); font-weight: 400; font-size: .68rem;
  letter-spacing: .34em; text-transform: uppercase; color: var(--sage-deep);
  display: inline-block;
}
.muted { color: var(--text-soft); }
strong { font-weight: 600; color: var(--wine); }

/* Título de sección: script grande + línea de mayúsculas.
   min-width:0 en los hijos evita el desbordamiento clásico de flexbox: sin
   esto, un flex-item de texto no se encoge nunca por debajo de su ancho
   "natural" (todo en una sola línea) y en pantallas angostas el título se
   sale del viewport en vez de partirse en dos líneas. */
.stitle { display: flex; flex-direction: column; align-items: center; gap: .1rem; max-width: 100%; }
.stitle__script { font-family: var(--f-script); font-size: clamp(2.6rem, 2rem + 3.2vw, 4.4rem); color: var(--wine); line-height: 1.32; min-width: 0; max-width: 100%; text-align: center; }
.stitle__caps {
  font-family: var(--f-label); font-weight: 400; font-size: clamp(.62rem,.58rem+.2vw,.74rem);
  letter-spacing: .32em; text-transform: uppercase; color: var(--sage-deep); margin-top: .5rem;
  min-width: 0; max-width: 100%; text-align: center;
}

/* Filete dorado */
.rule { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 1.2rem auto; }
.rule::before, .rule::after { content: ""; width: clamp(34px, 12vw, 80px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.rule::after { background: linear-gradient(90deg, var(--gold), transparent); }
.rule i { width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg); display: block; }

/* 3. NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: .7rem var(--gutter);
  background: rgba(213,77,92,0); transition: background .5s var(--ease-soft), box-shadow .5s;
}
.nav.is-stuck { background: rgba(251,246,236,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(213,77,92,.16); }
.nav__links { display: flex; align-items: center; justify-content: center; list-style: none; flex-wrap: wrap; }
.nav__links li { display: flex; align-items: center; }
.nav__links li:not(:last-child)::after { content: "\2766"; font-size: .7rem; color: var(--gold); opacity: .85; margin: 0 clamp(.55rem,1.5vw,1.1rem); }
.nav__links a {
  font-family: var(--f-label); font-weight: 400; font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sage-deep); position: relative; padding: .4em 0; transition: color .35s;
}
.nav__links a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1.5px; background: var(--gold); transition: left .4s var(--ease-silk), right .4s var(--ease-silk); }
.nav__links a:hover { color: var(--gold); }
.nav__links a:hover::after, .nav__links a.is-active::after { left: 0; right: 0; }
.nav__toggle { display: none; }

/* 4. BOTONES */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-label); font-weight: 400; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--wine-deep); background: var(--gold); padding: .92em 2em; border-radius: 2px; border: 1px solid var(--gold);
  transition: background .4s, color .4s, transform .4s var(--ease-silk), letter-spacing .4s, box-shadow .4s;
  box-shadow: 0 10px 22px -14px rgba(217,143,22,.7);
}
.btn:hover { background: #b87610; border-color: #b87610; transform: translateY(-2px); letter-spacing: .26em; }
.btn--ghost { background: transparent; color: var(--wine); box-shadow: none; }
.btn--ghost:hover { background: var(--wine); color: var(--on-wine); }
.btn--gold {
  background: linear-gradient(155deg, var(--gold-soft), var(--gold) 55%, #A8710F);
  color: var(--wine-deep); border-color: var(--gold);
  box-shadow: 0 14px 30px -14px rgba(217,143,22,.75), inset 0 1px 0 rgba(255,255,255,.5);
  font-weight: 500;
}
.btn--gold:hover { background: linear-gradient(155deg, #F2DDAE, var(--gold-soft) 55%, var(--gold)); border-color: var(--gold-soft); color: var(--wine-deep); }
/* botones dentro de bandas vino */
.band--wine .btn { background: var(--on-wine); color: var(--wine); border-color: var(--on-wine); }
.band--wine .btn:hover { background: #fff; color: var(--wine-deep); }
.band--wine .btn--ghost { background: transparent; color: var(--on-wine); border-color: rgba(251,243,228,.6); }
.band--wine .btn--ghost:hover { background: var(--on-wine); color: var(--wine); }

/* 5. LAYOUT */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.center { text-align: center; }
.section { padding-block: clamp(3.5rem, 9vw, 6.5rem); position: relative; }
.band { padding-block: clamp(3.5rem, 9vw, 6.5rem); position: relative; }
.band--cream { background: var(--paper-2); }
.band--wine { background: var(--wine); color: var(--on-wine); }
.band--wine .eyebrow, .band--wine .stitle__caps { color: var(--gold-soft); }
.band--wine .stitle__script, .band--wine .script { color: var(--on-wine); }
.band--wine .muted { color: rgba(251,243,228,.78); }
.band--wine strong { color: #fff; }
.band--wine .rule i { border-color: var(--gold-soft); }

/* 6. FLORALES */
.floral { position: absolute; pointer-events: none; z-index: 3; height: auto; filter: drop-shadow(0 6px 14px rgba(58,47,34,.22)); }
.garland { width: clamp(150px, 30vw, 260px); height: auto; margin: 0 auto; display: block; }
.divider-floral { display: block; margin: 0 auto clamp(1.4rem, 4vw, 2.4rem); width: clamp(120px, 24vw, 200px); opacity: .96; }

/* 7. HERO (centrado, sobre papel) */
.page { position: relative; overflow: hidden; }

.hero { text-align: center; padding: calc(var(--nav-h) + clamp(2rem,7vw,4rem)) var(--gutter) clamp(2rem,6vw,3.5rem); max-width: 760px; margin-inline: auto; position: relative; z-index: 2; }
.hero .eyebrow { color: var(--sage-deep); }
.hero__logo { width: clamp(230px, 48vw, 380px); height: auto; margin: .4rem auto 1rem; }
.hero__date {
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  position: relative; margin-top: 1.1rem;
  font-family: var(--f-label); font-weight: 400; text-transform: uppercase;
  font-size: clamp(.72rem,.66rem+.22vw,.92rem); color: var(--gold-soft);
  padding: .92em 1.8em; border: 1px solid rgba(232,194,122,.5);
  transition: color .45s var(--ease-silk), background .45s var(--ease-silk), box-shadow .45s, transform .45s var(--ease-silk);
}
.hero__date-day { letter-spacing: .26em; }
.hero__date-loc { display: inline-flex; align-items: center; gap: .45em; position: relative; padding-top: .6rem; font-size: .82em; letter-spacing: .16em; }
.hero__date-loc::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 66%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); }
.hero__pin { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.hero__date::before, .hero__date::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border: 1px solid var(--gold); transform: rotate(45deg); transition: background .45s; }
.hero__date::before { left: -3.5px; }
.hero__date::after { right: -3.5px; }
.hero__date:hover { color: var(--wine-deep); background: var(--gold-soft); border-color: var(--gold-soft); transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(232,194,122,.85); }
.hero__date:hover::before, .hero__date:hover::after { background: var(--gold-soft); }
.hero__date:hover .hero__date-loc::before { background: linear-gradient(90deg, transparent, rgba(111,2,32,.6), transparent); }
.hero__quote { font-family: var(--f-display); font-style: italic; color: var(--sage-deep); font-size: clamp(1.15rem,1rem+.8vw,1.55rem); max-width: 30ch; margin: 1.3rem auto 0; line-height: 1.5; }

/* Cita de amor del hero */
.lovequote {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.15rem); line-height: 1.5;
  color: var(--wine-soft); max-width: 24ch; margin: 1.8rem auto 0; text-align: center;
}
.lovequote__ref {
  display: block; margin-top: .9rem; font-style: normal;
  font-family: var(--f-script); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.4rem);
  line-height: 1; color: var(--gold);
  text-shadow: 0 1px 10px rgba(217,143,22,.35);
}
.lovequote__ref::before, .lovequote__ref::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: clamp(22px, 6vw, 44px); height: 1px; margin: 0 .7rem;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.lovequote__ref::after { background: linear-gradient(90deg, var(--gold-soft), transparent); }
.scroll-cue { font-family: var(--f-label); font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sage-deep); margin-top: 2.6rem; display: inline-flex; flex-direction: column; align-items: center; gap: .55rem; }
.scroll-cue span { width: 1px; height: 32px; background: linear-gradient(var(--gold), transparent); animation: cue 1.9s var(--ease-soft) infinite; }
@keyframes cue { 0% { transform: scaleY(.25); transform-origin: top; opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.25); transform-origin: bottom; opacity: .35; } }

/* FOTO PAREJA (encabezado enmarcado) */
.couple-photo { position: relative; max-width: 540px; margin: 0 auto; }
.couple-photo__img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; border: 7px solid var(--wine); outline: 1px solid var(--gold); outline-offset: 5px; box-shadow: 0 26px 54px -30px rgba(58,47,34,.6); }
.couple-photo .floral { position: absolute; z-index: 3; pointer-events: none; height: auto; filter: drop-shadow(0 8px 16px rgba(58,47,34,.26)); }
.couple-photo .floral--tl { top: -9%; left: -11%; width: clamp(100px, 27vw, 188px); transform: rotate(180deg); }
.couple-photo .floral--br { bottom: -8%; right: -11%; width: clamp(100px, 27vw, 188px); }
.band--wine .couple-photo__img { border-color: var(--on-wine); outline-color: var(--gold-soft); box-shadow: 0 26px 54px -30px rgba(0,0,0,.55); }
.couple-band { display: flex; flex-direction: column; align-items: center; padding-inline: var(--gutter); }
.couple-band .rule { margin-top: 1.9rem; }
@media (max-width: 560px) {
  .couple-photo { max-width: 320px; }
  .couple-photo .floral--tl { top: -7%; left: -8%; width: clamp(70px, 24vw, 106px); }
  .couple-photo .floral--br { bottom: -6%; right: -8%; width: clamp(70px, 24vw, 106px); }
}

/* FOTO ENMARCADA HORIZONTAL */
.bigphoto { position: relative; max-width: 880px; margin: 0 auto; }
.bigphoto__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: center 26%; display: block;
  border: 7px solid var(--on-wine); outline: 1px solid var(--gold); outline-offset: 5px;
  box-shadow: 0 26px 54px -30px rgba(0,0,0,.55); }
.bigphoto .floral { position: absolute; z-index: 3; pointer-events: none; height: auto; filter: drop-shadow(0 8px 16px rgba(58,47,34,.26)); }
.bigphoto .floral--tl { top: -16%; left: -3%; width: clamp(96px, 15vw, 180px); transform: rotate(180deg); }
.bigphoto .floral--br { bottom: -16%; right: -3%; width: clamp(96px, 15vw, 180px); }
@media (max-width: 560px) {
  .bigphoto { max-width: 280px; }
  .bigphoto__img { aspect-ratio: 4/3; }
  .bigphoto .floral--tl { top: -9%; left: -7%; width: clamp(72px, 24vw, 110px); }
  .bigphoto .floral--br { bottom: -9%; right: -7%; width: clamp(72px, 24vw, 110px); }
}

/* FRASE DE AMOR */
.love-quote { text-align: center; padding-block: clamp(2.5rem, 9vw, 6rem); }
.love-quote__text { font-family: var(--f-script); color: var(--sage-deep); font-size: clamp(2.9rem, 2rem + 6.5vw, 6rem); line-height: 1.34; max-width: 16ch; margin-inline: auto; }
.love-quote__text::after { content: ""; display: block; width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); margin: 1.4rem auto 0; }
.love-quote--tight { padding-bottom: clamp(.6rem,2vw,1.2rem); }
.love-quote--tight .love-quote__text::after { display: none; }
/* Toda la página usa la misma imagen "fondo 1" (ver body.theme-floral);
   esta banda solo cambia el color de acento del texto para variar. */
.love-quote--green .love-quote__text {
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  color: var(--wine); font-size: clamp(1.4rem, 1.05rem + 1.7vw, 2.2rem);
  line-height: 1.55; max-width: 28ch;
}

/* ===== FECHA + CITA + CONTADOR — estilo editorial en negro,
   distinto al resto de invitaciones (sin bordes dorados). ===== */
.mark { text-align: center; padding: clamp(1.6rem,5vw,2.6rem) var(--gutter) clamp(2.6rem,7vw,4.2rem); max-width: 640px; margin-inline: auto; }
.mark__date { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); letter-spacing: .08em; text-transform: uppercase; color: #171717; }
.mark__rule { width: 44px; height: 2px; background: #171717; margin: 1rem auto; }
.mark__loc { font-family: var(--f-label); font-weight: 400; font-size: .68rem; letter-spacing: .32em; text-transform: uppercase; color: #171717; }
.mark__quote { font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.85rem); color: #171717; margin-top: 2.3rem; }
.mark__countdown { display: inline-flex; justify-content: center; gap: clamp(.6rem,2.2vw,1.3rem); margin-top: 2.5rem; }
.mark__cell { display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: clamp(58px,14vw,78px); padding-top: .5rem; border-top: 2px solid #171717; }
.mark__num { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.8rem,6vw,2.6rem); line-height: 1; color: #171717; font-variant-numeric: tabular-nums; }
.mark__label { font-family: var(--f-label); font-weight: 400; font-size: .54rem; letter-spacing: .22em; text-transform: uppercase; color: #171717; opacity: .68; }

/* SECTION HEAD + CALENDARIO */
.section__head { text-align: center; margin-bottom: clamp(1.6rem,4vw,2.4rem); }
.section__head .divider-floral { margin-bottom: .8rem; }
/* line-height amplio + padding-bottom: la cola de la "g" de Parisienne baja
   mucho y, si se sale de la caja, el bloque siguiente (que lleva fondo
   sólido) se pinta encima y la recorta. */
.section-title { font-family: var(--f-script); font-size: clamp(2.4rem,1.9rem+3vw,3.8rem); color: var(--wine); line-height: 1.5; padding-bottom: .12em; margin-top: .2rem; }
.calendar { max-width: 360px; margin: 0 auto; position: relative; padding: clamp(1.5rem,4vw,2.1rem); background: var(--paper); border: 1px solid var(--gold); box-shadow: 0 20px 44px -28px rgba(58,47,34,.5); }
.calendar::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(217,143,22,.4); pointer-events: none; }
.calendar__sticker { position: absolute; top: -44px; right: -24px; width: clamp(76px,19vw,116px); transform: rotate(-20deg); z-index: 4; pointer-events: none; filter: drop-shadow(0 7px 14px rgba(58,47,34,.22)); }
.calendar__month { font-family: var(--f-script); font-size: clamp(2rem,7vw,2.7rem); color: var(--wine); line-height: 1.34; margin-bottom: .5rem; }
.calendar table { width: 100%; table-layout: fixed; border-collapse: collapse; position: relative; z-index: 1; }
.calendar th { font-family: var(--f-label); font-weight: 400; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); padding: .5rem 0; }
.calendar td { font-family: var(--f-display); font-size: 1.02rem; color: var(--text); height: 2.3em; text-align: center; }
.calendar td.is-day { color: var(--on-wine); font-weight: 600; background: radial-gradient(circle at 50% 50%, var(--rust) 0 1.05em, transparent 1.05em); }
.calendar__note { font-family: var(--f-label); font-weight: 300; letter-spacing: .14em; text-transform: uppercase; font-size: .62rem; color: var(--sage-deep); margin-top: .9rem; }

/* 8. CONTADOR */
.countdown { display: inline-flex; justify-content: center; gap: clamp(.45rem,1.8vw,1rem); margin-top: 2.2rem; }
.countdown__cell {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  min-width: clamp(60px,16vw,84px); padding: 1.1rem .5rem .85rem;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1px solid var(--gold-soft);
  box-shadow: 0 16px 32px -24px rgba(58,47,34,.55), inset 0 0 0 3px rgba(255,255,255,.4);
}
.countdown__cell::before { content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 16px; height: 1px; background: var(--rose); }
.countdown__num { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.9rem,7vw,2.9rem); line-height: 1; color: var(--wine); font-variant-numeric: tabular-nums; }
.countdown__label { font-family: var(--f-label); font-weight: 400; font-size: .54rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sage-deep); }

/* 9. FOTO ENMARCADA (genérica) */
.framephoto { position: relative; max-width: 460px; margin: 0 auto; }
.framephoto__img { width: 100%; aspect-ratio: 4/5; object-fit: cover; box-shadow: 0 24px 50px -28px rgba(58,47,34,.55); }
.framephoto .floral--tl { top: -8%; left: -10%; width: clamp(100px, 26vw, 190px); }
.framephoto .floral--br { bottom: -7%; right: -10%; width: clamp(100px, 26vw, 200px); transform: rotate(180deg); }

/* 10. MONOGRAMA */
.mono { display: inline-flex; align-items: stretch; gap: .7rem; font-family: var(--f-display); font-weight: 500; font-size: clamp(2.4rem,7vw,3.4rem); color: var(--wine); letter-spacing: .04em; }
.mono span:nth-child(2) { width: 1px; background: var(--gold); align-self: stretch; }

/* 11. VERSO / CITA */
.verse { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.4rem,1.1rem+1.4vw,2.1rem); color: var(--wine); line-height: 1.45; max-width: 24ch; margin-inline: auto; }

/* 11b. NUESTRA HISTORIA · LÍNEA DE TIEMPO POR FECHAS (ruta curva + colibrí
   animado por scroll, ver main.js). La amplitud de la onda (--wave-amp) se
   reduce en anchos intermedios (tablet) porque ahí el carril central (gap)
   ya está en su mínimo; sin esto, el colibrí casi tocaría el texto. */
.journey { max-width: 960px; margin-inline: auto; padding-inline: var(--gutter); --wave-amp: clamp(24px, 4.5vw, 64px); --wave-len: 820px; }

.journey-path { position: relative; }
.journey-route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.journey-route path { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 9; stroke-linecap: round; opacity: .55; }
.journey-plane { position: absolute; top: 0; left: 0; width: clamp(70px, 8vw, 100px); height: auto; z-index: 2; pointer-events: none; will-change: transform; filter: drop-shadow(0 8px 14px rgba(58,47,34,.35)); }

/* Puntos de aterrizaje: marcan cada fecha sobre la línea de trayectoria */
.journey-waypoint { position: absolute; top: 0; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; z-index: 1; pointer-events: none;
  background: var(--wp-color, var(--gold)); box-shadow: 0 0 0 4px var(--paper), 0 2px 6px rgba(58,47,34,.35);
  transition: transform .5s var(--ease-silk), box-shadow .5s var(--ease-silk); }
.journey-waypoint.is-active { transform: scale(1.7); box-shadow: 0 0 0 4px var(--paper), 0 0 0 8px var(--wp-color, var(--gold)), 0 4px 10px rgba(58,47,34,.4); }
@media (prefers-reduced-motion: reduce) { .journey-waypoint { transition: none; } }

/* El carril central (gap) debe ser más ancho que la amplitud de la onda
   (--wave-amp) por ambos lados, para que la trayectoria del colibrí nunca
   invada la foto ni el contenido de texto. */
.journey-stop { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(9rem, 13vw, 12rem); align-items: center; margin-bottom: clamp(3.6rem, 8vw, 6rem); }
.journey-stop:last-child { margin-bottom: 0; }

/* Solo la fecha donde está el colibrí en este momento del scroll se ve a
   color; el resto queda en blanco y negro, atenuado (ver main.js). */
.journey-stop { filter: grayscale(1) opacity(.55); transition: filter .6s var(--ease-silk); }
.journey-stop.is-active-country { filter: none; }
@media (prefers-reduced-motion: reduce) { .journey-stop { transition: none; } }
.journey-stop__text { text-align: left; }
.journey-stop:nth-child(even) .journey-stop__media { order: 2; }
.journey-stop:nth-child(even) .journey-stop__text { order: 1; text-align: right; }
.journey-stop:nth-child(even) .journey-stop__desc { margin-left: auto; }
.journey-stop:nth-child(even) .journey-stop__badge { justify-content: flex-end; }

.journey-stop__badge { display: flex; margin-bottom: .6rem; }
.journey-stop:nth-child(even) .journey-stop__badge { justify-content: flex-end; }
/* Marca de capítulo puramente tipográfica: una sola línea pequeña, gris y
   trackeada — sin círculo, sin icono, sin numeral grande. */
.stamp { display: inline-flex; }
.stamp__label { font-family: var(--f-label); font-weight: 500; font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--text-soft); }
@media (max-width: 760px) { .stamp__num { font-size: 2.6rem; } }

.journey-stop__year { display: block; font-family: var(--f-label); font-weight: 400; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--sage-deep); }
.journey-stop__country { font-family: var(--f-script); font-weight: 400; font-size: clamp(2rem, 1.7rem + 1.6vw, 2.8rem); color: var(--wine); line-height: 1.34; margin: .25rem 0 .6rem; }
.journey-stop__desc { color: var(--text-soft); max-width: 40ch; }
/* Capítulos de varios párrafos: aire entre ellos, sin tocar el ritmo del resto. */
.journey-stop__desc + .journey-stop__desc { margin-top: .85em; }

.journey-photo { position: relative; aspect-ratio: 4/3; border: 6px solid var(--sage-deep); outline: 2px solid var(--gold); outline-offset: 5px; background: var(--paper); box-shadow: 0 20px 44px -28px rgba(58,47,34,.45); display: grid; place-items: center; color: var(--sage); text-align: center; }
.journey-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.journey-photo svg { width: 36px; height: 36px; opacity: .55; }
.journey-photo span { display: block; font-family: var(--f-label); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; margin-top: .5rem; opacity: .7; }
/* Una sola flor por foto, en la esquina superior izquierda. Se ancla a la
   esquina y se desplaza con translate (porcentaje de LA FLOR, no del marco),
   así el trozo que sobresale es siempre el mismo en cualquier pantalla.
   Va arriba-izquierda a propósito: hacia arriba no hay recorte, y a la
   izquierda siempre queda aire (en móvil el carril del colibrí). Hacia la
   derecha sí se cortaría, porque la foto va pegada al borde del viewport. */
.journey-photo .floral-corner {
  position: absolute; z-index: 3; pointer-events: none; height: auto;
  top: 0; left: 0; width: clamp(66px, 9vw, 104px);
  transform: translate(-42%, -46%) rotate(-6deg);
  filter: drop-shadow(0 6px 14px rgba(58,47,34,.22));
}
@media (max-width: 760px) {
  /* El marco de la foto se reduce un poco, para dejar aire real entre su
     borde y el carril del colibrí (el outline se sale ~7px más). */
  .journey-stop__media .journey-photo { width: 88%; margin-left: auto; }
  /* Flor más pequeña y menos volada: el carril de la izquierda es estrecho. */
  .journey-photo .floral-corner { width: clamp(48px, 14vw, 66px); transform: translate(-26%, -40%) rotate(-6deg); }
}

@media (max-width: 760px) {
  /* En móvil el contenido se apila (una sola columna) y se deja un carril
     fijo más ancho a la izquierda para la línea/colibrí, en vez del carril
     central de escritorio. --wave-cx centra la onda dentro de ese carril. */
  .journey { --wave-amp: 14px; --wave-len: 560px; --wave-cx: 34px; }
  .journey-stop { grid-template-columns: 1fr; gap: 1.1rem; padding-left: 72px; margin-bottom: 3.4rem; }
  .journey-stop:nth-child(even) .journey-stop__media,
  .journey-stop:nth-child(even) .journey-stop__text { order: 0; }
  .journey-stop__text { text-align: left; }
  .journey-stop:nth-child(even) .journey-stop__text { text-align: left; }
  .journey-stop:nth-child(even) .journey-stop__desc { margin-left: 0; }
  .journey-stop:nth-child(even) .journey-stop__badge { justify-content: flex-start; }
  .journey-plane { width: 68px; }
}

/* 12. ANIMACIONES */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease-silk), transform 1s var(--ease-silk); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }
.reveal--write { opacity: 1; transform: none; -webkit-mask: linear-gradient(#000,#000) left center / 0% 300% no-repeat; mask: linear-gradient(#000,#000) left center / 0% 300% no-repeat; }
.reveal--write.is-in { animation: handwrite 1.6s var(--ease-silk) forwards; }
@keyframes handwrite { from { -webkit-mask-size: 0% 300%; mask-size: 0% 300%; } to { -webkit-mask-size: 100% 300%; mask-size: 100% 300%; } }
@media (prefers-reduced-motion: reduce) { .reveal--write { -webkit-mask: none; mask: none; } .reveal--write.is-in { animation: none; } }
/* OJO: pageIn NO debe animar transform, o rompe position:fixed en iOS. */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pageOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }


/* 13. PIE — mismo fondo 1 que el resto de la página (sin imagen propia) */
.footer { text-align: center; padding: clamp(3rem,8vw,4.5rem) var(--gutter); color: var(--text); }
.footer__flourish { width: clamp(110px, 22vw, 180px); height: auto; margin: 0 auto 1rem; filter: drop-shadow(0 6px 14px rgba(58,47,34,.3)); }
.footer__names { font-family: var(--f-script); font-size: clamp(2.4rem,7vw,3.4rem); color: var(--wine); line-height: 1.38; }
.footer .credit { font-family: var(--f-label); font-weight: 300; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); margin-top: 1rem; }

/* 14. PAGE-INTRO (páginas interiores) */
.page-intro { padding-top: calc(var(--nav-h) + clamp(2.4rem,7vw,4.4rem)); text-align: center; }

/* 15. RESPONSIVE */
@media (max-width: 860px) {
  .couple-photo { max-width: 340px; }
}
@media (max-width: 720px) {
  /* Menú hamburguesa */
  .nav { padding: .55rem .7rem; justify-content: flex-start; background: transparent; box-shadow: none; }
  .nav__toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 11px; border-radius: 4px; z-index: 210;
    background: rgba(213,77,92,.92); border: 1px solid rgba(232,194,122,.4);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .nav__toggle span { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--on-wine); transition: transform .35s var(--ease-silk), opacity .25s; }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav__links {
    position: fixed; top: 0; left: 0; right: 0; z-index: 205;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; width: 100%;
    padding: calc(var(--nav-h) + 1.3rem) 1.5rem 2rem;
    background: rgba(213,77,92,.99); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 22px 44px -18px rgba(0,0,0,.6);
    transform: translateY(-100%); transition: transform .5s var(--ease-silk);
    max-height: 100svh; overflow-y: auto;
  }
  .nav.is-open .nav__links { transform: translateY(0); }
  .nav__links li { width: 100%; justify-content: center; border-top: 1px solid rgba(232,194,122,.16); }
  .nav__links li:first-child { border-top: 0; }
  .nav__links li:not(:last-child)::after { display: none; }
  .nav__links a { display: block; width: 100%; text-align: center; padding: .95rem 0; font-size: .82rem; letter-spacing: .22em; color: var(--on-wine); }
  .nav__links a::after { display: none; }
  .nav__links a.is-active { color: var(--gold-soft); }
}

/* ===== Página en construcción (overlay borroso) ===== */
.uc-overlay {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: var(--gutter);
  background: rgba(213,77,92,.4); text-align: center;
  -webkit-backdrop-filter: blur(9px) saturate(.92); backdrop-filter: blur(9px) saturate(.92);
  animation: pageIn .7s var(--ease-silk) both;
}
.uc-card {
  position: relative; background: var(--paper); border: 1px solid var(--gold);
  padding: clamp(2rem,6vw,3.4rem) clamp(1.8rem,7vw,4rem);
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.6); max-width: 92vw;
}
.uc-card::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(217,143,22,.4); pointer-events: none; }
.uc-card__icon { width: 44px; height: 44px; margin: 0 auto .9rem; color: var(--gold); }
.uc-card__title { font-family: var(--f-script); font-size: clamp(2.8rem,2rem+5vw,4.6rem); color: var(--wine); line-height: 1.32; }
.uc-card__sub { font-family: var(--f-label); font-weight: 400; text-transform: uppercase; letter-spacing: .24em; font-size: clamp(.6rem,.56rem+.2vw,.72rem); color: var(--sage-deep); margin-top: 1rem; }
.uc-card__back { margin-top: 1.7rem; }
/* en construcción: bloquear scroll, solo la tarjeta fija */
body.is-construction { position: fixed; inset: 0; overflow: hidden; }

/* ===== Conmutador de idioma ES/EN ===== */
.lang-toggle { position: fixed; top: .7rem; right: .8rem; z-index: 600; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 40px; font-family: 'Jost','Helvetica Neue',sans-serif; background: rgba(251,246,236,.93); border: 1px solid rgba(217,143,22,.7); box-shadow: 0 6px 16px -10px rgba(58,47,34,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lang-toggle button { font-family: inherit; font-size: .62rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--wine); background: transparent; border: 0; border-radius: 30px; padding: .4em .72em; cursor: pointer; line-height: 1; transition: background .3s, color .3s; }
.lang-toggle button.is-active { background: var(--wine); color: var(--on-wine); }
.lang-toggle button:not(.is-active):hover { color: var(--wine-soft); }
@media (max-width: 720px) { .lang-toggle { top: .5rem; right: .5rem; padding: 2px; } .lang-toggle button { font-size: .58rem; padding: .36em .62em; } }

/* ===== Tema floral completo (solo index) ===== */
body.theme-floral {
  background-color: var(--paper-2);
  background-image: url('../IMAGENES%20DE%20REFERENCIA/fondo%201.jpg');
  background-repeat: repeat;
  background-size: clamp(280px, 30vw, 460px) auto;
  color: var(--text);
}
body.theme-floral .section { padding-inline: var(--gutter); }

/* opción "Save the Date" destacada (script + dorado) */
.nav__links a.nav__save { font-family: var(--f-script); text-transform: none; letter-spacing: .01em; font-size: 1.5rem; line-height: 1.38; color: var(--gold-deep) !important; }
/* En el menú desplegable de celular el fondo es rosa: el dorado no se lee,
   así que ahí "Save the Date" va en negro. */
@media (max-width: 720px) { .nav__links a.nav__save { font-size: 1.8rem; color: #000 !important; } }

/* ===== Tira de fotos horizontal continua (hero, full-bleed) ===== */
.hero-strip { position: relative; left: 50%; width: 100vw; margin-left: -50vw; margin-top: .4rem; margin-bottom: .3rem; height: clamp(440px, 80vh, 900px); overflow: hidden; }
.hero-strip__track { display: flex; height: 100%; width: max-content; animation: heroMarquee 55s linear infinite; will-change: transform; }
.hero-strip__track img { height: 100%; width: auto; flex: 0 0 auto; display: block; }
/* Sin overlay de color: las fotos se ven tal cual son. Centrado en ambos
   ejes sobre la tira, como remate protagonista del carrusel. */
.hero-strip__logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: clamp(300px, 26vw, 520px); height: auto; pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.25)); }
@keyframes heroMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 600px) {
  .hero-strip { height: clamp(220px, 38vh, 340px); }
  .hero-strip__logo { width: clamp(190px, 54vw, 300px); }
}
@media (max-width: 420px) {
  /* La fecha larga ("Septiembre") no debe salirse del viewport */
  .hero__date { max-width: 94vw; padding-inline: 1.1em; }
  .hero__date-day { letter-spacing: .13em; }
}

/* =====================================================================
   INTRO CINEMATOGRÁFICA (solo index.html)
   1) cielo fijo · 2) montaña sube · 3) colibrí vuela dejando estela ·
   4) aterriza → foto + nombres + botón.
   Se muestra solo con JS (.has-js); sin JS, index.html queda oculto y
   se puede acceder directo a invitacion.html.
   ===================================================================== */
html.cine-lock body { overflow: hidden; }

.cine { display: none; }
.has-js .cine {
  display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: #EFE6D8; -webkit-tap-highlight-color: transparent;
}
.cine.is-gone { opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .6s ease, visibility .6s !important; }

.cine__img { position: absolute; inset: 0; pointer-events: none; }
.cine__img picture { display: block; width: 100%; height: 100%; }
.cine__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cine__img--sky { z-index: 1; }
.cine__img--mountain { z-index: 2; transform: translateY(100%); }

/* Estela del colibrí (canvas) */
.cine__trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }

/* Colibrí */
.cine__bird { position: absolute; top: 0; left: 0; z-index: 7;
  width: clamp(40px, 6.5vw, 70px); height: auto; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%); transform-origin: center center;
  filter: drop-shadow(0 6px 10px rgba(58,47,34,.4)); will-change: transform, left, top; }

/* Foto + nombres + botón (aparecen al aterrizar).
   En escritorio/tablet: lado izquierdo, a media altura. En celular se
   reubica arriba, en el cielo, para no tapar la montaña (imagen 2).
   La transición vive en CSS (no en JS) para que cada breakpoint anime
   desde/hacia SU propia posición de reposo, sin transforms fijos. */
.cine__end { position: absolute; left: clamp(1.5rem, 6vw, 5rem); top: 50%; right: auto; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center;
  opacity: 0; pointer-events: none; transform: translateY(calc(-50% + 14px));
  transition: opacity .85s var(--ease-silk), transform .85s var(--ease-silk); }
.cine.is-landed .cine__end { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
@media (max-width: 760px) {
  .cine__end { right: auto; left: 50%; top: 34%; transform: translate(-50%, calc(-50% + 14px)); }
  .cine.is-landed .cine__end { transform: translate(-50%, -50%); }
  /* "Alexis & Joel" siempre en un solo renglón. */
  .cine__names { font-size: clamp(1.7rem, 6.6vw, 2.5rem); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .cine__end { transition: none; } }
/* Marco rectangular, igual que las fotos de nuestra-historia.html (.journey-photo) */
/* margin-bottom reserva el carril donde aterriza el colibrí, para que quede
   POR DEBAJO del marco y no encima de la foto. */
/* aspect-ratio 2/3 = la proporción exacta de la foto (853x1280), así se ve
   completa, sin recorte. */
.cine__photo { position: relative; width: clamp(150px, 14vw, 200px); aspect-ratio: 2/3; margin: 0 0 5.5rem;
  border: 6px solid var(--sage-deep); outline: 2px solid var(--gold); outline-offset: 5px; background: var(--paper);
  box-shadow: 0 20px 44px -28px rgba(58,47,34,.5); }
/* La foto va en position:absolute a propósito. Con height:100% en flujo
   normal se crea una dependencia circular (alto del marco -> alto de la
   foto -> alto del marco) y cada navegador la resuelve distinto: Chrome
   ignoraba el aspect-ratio y Safari no. Sacándola del flujo, el marco
   manda siempre y se ve igual en todos lados. */
.cine__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* En celular la foto se mide por ALTURA de pantalla, no por ancho: al ser
   vertical, lo que se sale de la pantalla es el alto. svh descuenta las
   barras del navegador en el móvil (vh queda de respaldo). */
@media (max-width: 760px) {
  .cine__photo { height: min(28vh, 250px); height: min(28svh, 250px);
    width: auto; margin: 0 auto 4rem; }
}
.cine__names { font-family: var(--f-script); font-size: clamp(2.2rem, 7vw, 3.2rem); color: var(--wine); line-height: 1.34; min-width: 0; max-width: 100%; text-align: center; }
.cine__btn { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .22em; font-size: .68rem;
  color: var(--on-wine); background: var(--wine); border: 1px solid var(--wine); border-radius: 2px;
  padding: .9em 2.6em; cursor: pointer; box-shadow: 0 12px 24px -12px rgba(58,47,34,.6);
  transition: background .35s, letter-spacing .35s, transform .35s; }
.cine__btn:hover { background: var(--wine-deep); letter-spacing: .26em; transform: translateY(-2px); }

/* El toggle de idioma debe verse por encima de la intro */
.lang-toggle { z-index: 1100; }

/* Saltar intro */
.cine__skip { position: absolute; top: .9rem; right: 1rem; z-index: 7;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: .2em; font-size: .58rem;
  color: var(--text-soft); background: none; border: 0; cursor: pointer; opacity: .65;
  transition: opacity .3s; }
.cine__skip:hover { opacity: 1; }
.cine.is-landed .cine__skip { display: none; }