/* ═══════════════════════════════════════════════════════════
   Sergio & Tijana · Ohrid
   Paleta: acuarela mediterránea-balcánica
   ═══════════════════════════════════════════════════════════ */

:root{
  --paper:#FBF5EC;
  --paper-2:#F4E9DA;
  --paper-3:#EFE1CE;
  --ink:#2A3C4A;
  --ink-soft:#62727C;
  --lake:#1F4F63;
  --lake-2:#3D7E96;
  --lake-3:#9FC4CE;
  --gold:#B98F46;
  --gold-2:#D9BE83;
  --terra:#C97B5A;
  --rose:#DFA9A3;
  --sage:#8FA68A;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --script:"Pinyon Script","Cormorant Garamond",cursive;

  --ease:cubic-bezier(.22,.9,.28,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --tabh:74px;
  --maxw:940px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

html,body{height:100%}

body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 44% at 8% 6%,rgba(159,196,206,.28),transparent 70%),
    radial-gradient(46% 36% at 96% 22%,rgba(223,169,163,.22),transparent 70%),
    radial-gradient(56% 40% at 50% 104%,rgba(143,166,138,.22),transparent 72%);
}

body.is-intro{overflow:hidden}

/* ───────── grano de papel ───────── */
.grain{
  position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.28'/></svg>");
}

/* ═══════════════════════════════════════════
   LACRE · la invitación se abre antes de nada
   ═══════════════════════════════════════════ */
.fx{position:absolute;width:0;height:0;overflow:hidden}

.seal{position:fixed;inset:0;z-index:700}
.seal__bleed{position:absolute;inset:0}
/* el papel se sale de pantalla: así la aguada deshilacha los bordes fuera de cuadro */
.seal__sheet{position:absolute;inset:-110px;background:var(--paper)}
.seal__inner{
  position:absolute;inset:110px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:32px;padding:40px 24px;
}

.seal__frame{position:absolute;inset:20px;border:1px solid rgba(185,143,70,.45);pointer-events:none}
.seal__frame::after{
  content:"";position:absolute;inset:7px;border:1px solid rgba(185,143,70,.24);
}
.seal__frame .corner{position:absolute;width:52px;height:52px;color:var(--sage);opacity:.85}
.seal__frame .c1{top:-6px;left:-6px}
.seal__frame .c2{top:-6px;right:-6px;transform:scaleX(-1)}
.seal__frame .c3{bottom:-6px;left:-6px;transform:scaleY(-1)}
.seal__frame .c4{bottom:-6px;right:-6px;transform:scale(-1)}

.seal__hint{
  margin:0;font-size:.63rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;text-align:center;
  animation:breathe 3.4s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}

.wax{
  border:0;background:none;padding:0;cursor:pointer;line-height:0;
  -webkit-tap-highlight-color:transparent;
  animation:waxIn 1.1s var(--ease) both;
}
.wax svg{width:clamp(124px,34vw,168px);height:auto;overflow:visible}
@keyframes waxIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}

.wax__shadow{fill:rgba(80,30,24,.24);filter:blur(7px)}
.wax__disco{fill:#A23F36;stroke:#7F2A23;stroke-width:1.4}
.wax__anillo{stroke:#8B322A;stroke-width:1.6;opacity:.55}
.wax__sello,.wax__ondas circle{transform-origin:70px 70px}
.wax__mono{
  fill:#7E2A23;
  font-family:var(--serif);font-size:40px;font-weight:500;letter-spacing:.04em;
  filter:drop-shadow(0 1.2px 0 rgba(255,222,214,.32)) drop-shadow(0 -1px 0 rgba(60,16,12,.4));
}
.wax__mono .amp{font-family:var(--script);font-size:36px}

/* las ondas solo existen al abrirlo */
.wax__ondas circle{opacity:0}

.wax:hover{animation:none}
.wax:hover .wax__sello{transform:scale(1.04);transition:transform .45s var(--ease)}

/* Al tocar, el lacre NO se rompe: se hunde un poco, se abre en ondas
   sobre el agua y se va creciendo. Nada de partirse en dos. */
.seal.is-opening .wax__sello{animation:sello .95s var(--ease) forwards}
.seal.is-opening .wax__ondas circle{animation:onda 1.25s var(--ease-soft) forwards}
.seal.is-opening .wax__ondas circle:nth-child(2){animation-delay:.16s}
.seal.is-opening .wax__ondas circle:nth-child(3){animation-delay:.32s}
.seal.is-opening .wax__shadow{animation:sombraOut .5s var(--ease) forwards}
.seal.is-opening .seal__hint{opacity:0;transition:opacity .3s}
@keyframes sello{
  0%{transform:scale(1);opacity:1}
  24%{transform:scale(.9);opacity:1}
  100%{transform:scale(1.55);opacity:0}
}
@keyframes onda{
  0%{transform:scale(1);opacity:0}
  18%{opacity:.75}
  100%{transform:scale(2.5);opacity:0}
}
@keyframes sombraOut{to{opacity:0;transform:scale(1.2)}}

/* y el papel se deshace en aguada */
.seal.is-dissolving .seal__bleed{filter:url(#fxBleed)}
.seal.is-dissolving .seal__sheet{-webkit-mask:url(#fxWash);mask:url(#fxWash)}
.seal.is-dissolving .seal__inner{opacity:0;transition:opacity .5s var(--ease-soft)}

/* sin la aguada: simple desvanecido */
.seal.is-plain{opacity:0;transition:opacity .45s linear;pointer-events:none}

/* mientras el lacre está puesto, la portada espera detrás */
body.is-sealed .intro__eyebrow,
body.is-sealed .intro__names span,
body.is-sealed .intro__names em,
body.is-sealed .intro__date,
body.is-sealed .intro__enter,
body.is-sealed .sc-boat{animation-play-state:paused}

/* ═══════════════════════════════════════════
   INTRO
   ═══════════════════════════════════════════ */
.intro{
  position:fixed;inset:0;z-index:500;
  display:grid;place-items:center;
  background:var(--paper);
  overflow:hidden;
}
.intro__scene{position:absolute;inset:0}
.scene{width:100%;height:100%;display:block}

.intro__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(251,245,236,.82) 0%,rgba(251,245,236,.5) 26%,rgba(251,245,236,0) 52%),
    linear-gradient(0deg,rgba(31,79,99,.34) 0%,rgba(31,79,99,0) 28%);
}

/* la portada se apoya en el cielo; la barca navega por debajo */
.intro{align-items:start}
.intro__copy{
  position:relative;z-index:2;
  text-align:center;color:var(--ink);
  padding:0 24px;
  margin-top:calc(6vh + env(safe-area-inset-top));
  text-shadow:0 1px 22px rgba(251,245,236,.85);
}
.intro__eyebrow{
  margin:0 0 18px;
  font-size:.7rem;letter-spacing:.42em;text-transform:uppercase;font-weight:400;
  opacity:0;animation:riseIn 1.1s var(--ease) 1.5s forwards;
}
.intro__names{
  margin:0;font-family:var(--serif);font-weight:300;
  /* el segundo límite evita que los nombres invadan la barca en pantallas bajas */
  font-size:clamp(2.4rem,min(13vw,15.5vh),7.4rem);line-height:.94;letter-spacing:.01em;
}
.intro__names span{display:block;opacity:0;animation:riseIn 1.3s var(--ease) forwards}
.intro__names span:nth-child(1){animation-delay:1.9s}
.intro__names span:nth-child(3){animation-delay:2.5s}
.intro__names em{
  display:block;font-family:var(--script);font-style:normal;
  font-size:.52em;line-height:1;color:var(--gold);
  margin:-.06em 0;opacity:0;animation:riseIn 1.1s var(--ease) 2.25s forwards;
}
.intro__date{
  margin:22px 0 0;font-family:var(--serif);font-size:1.06rem;
  letter-spacing:.3em;text-transform:uppercase;font-weight:400;
  opacity:0;animation:riseIn 1.1s var(--ease) 3.05s forwards;
}
.intro__enter{
  margin-top:34px;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 30px;
  font-family:var(--sans);font-size:.74rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);background:rgba(251,245,236,.55);
  border:1px solid rgba(42,60,74,.3);border-radius:100px;
  cursor:pointer;backdrop-filter:blur(6px);text-shadow:none;
  opacity:0;animation:riseIn 1s var(--ease) 3.6s forwards;
  transition:background .4s,border-color .4s,transform .4s,color .4s;
}
.intro__enter:hover{background:var(--lake);border-color:var(--lake);color:var(--paper);transform:translateY(-2px)}
.intro__enter svg{animation:nudge 2.4s ease-in-out 4.6s infinite}

/* portátiles con ventana baja: compactamos la portada para no pisar la barca */
@media (orientation:landscape) and (max-height:700px){
  .intro__copy{margin-top:2vh}
  .intro__eyebrow{margin-bottom:10px;font-size:.62rem}
  .intro__date{margin-top:12px;font-size:.86rem}
  .intro__enter{margin-top:14px;padding:9px 22px;font-size:.66rem}
}

@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.intro.is-out{
  opacity:0;transform:scale(1.06);
  transition:opacity 1.05s var(--ease-soft),transform 1.4s var(--ease-soft);
  pointer-events:none;
}

/* ───────── animaciones de la escena ───────── */
.sc-boat{animation:sailIn 6.5s var(--ease) forwards}
.scene--hero .sc-boat{animation:none}

/* En pantallas verticales el encuadre se estrecha: acercamos el pueblo,
   la iglesia y el sol para que sigan entrando en cuadro. */
.scene.is-portrait .sc-town{transform:translateX(320px)}
.scene.is-portrait .sc-kaneo{transform:translateX(-320px)}
.scene.is-portrait .sc-sun{transform:translateX(-170px)}
.scene.is-portrait .sc-pier{transform:translateX(-205px)}

/* ───────── el embarcadero de la fiesta ───────── */
.arch{animation:sway 7s ease-in-out infinite;transform-origin:903px 548px}
@keyframes sway{0%,100%{transform:rotate(-.7deg) scale(1.15)}50%{transform:rotate(.7deg) scale(1.15)}}
.lanterns{animation:hang 4.2s ease-in-out infinite;transform-origin:905px 436px}
@keyframes hang{0%,100%{transform:rotate(-2.4deg)}50%{transform:rotate(2.4deg)}}
.boat-lanterns{animation:hang2 3.6s ease-in-out infinite;transform-origin:212px -8px}
@keyframes hang2{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.lanterns circle,.boat-lanterns circle{animation:candle 3.1s ease-in-out infinite}
@keyframes candle{0%,100%{opacity:.82}50%{opacity:1}}
.bulbs circle{animation:twinkle 2.8s ease-in-out infinite}
.bulbs circle:nth-child(2){animation-delay:-.6s}
.bulbs circle:nth-child(3){animation-delay:-1.2s}
.bulbs circle:nth-child(4){animation-delay:-1.8s}
.bulbs circle:nth-child(5){animation-delay:-2.4s}
@keyframes twinkle{0%,100%{opacity:.55}50%{opacity:1}}
/* la gente del muelle: cada uno a lo suyo */
.guest .arm-a{transform-origin:8px 27px}
.guest .arm-b{transform-origin:22px 27px}
@keyframes greet{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes greetInv{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}

.g-wave .arm-a{animation:greet 1.5s ease-in-out infinite}
.g-wave .arm-b{animation:greetInv 1.5s ease-in-out infinite}
.g-wave2 .arm-a{animation:greet 1.25s ease-in-out infinite -.3s}

.g-jump{animation:jump 1.05s cubic-bezier(.3,0,.4,1) infinite}
@keyframes jump{0%,100%{transform:translateY(0)}45%{transform:translateY(-15px)}}

.clap-l{transform-origin:7px 26px;animation:clapL .52s ease-in-out infinite}
.clap-r{transform-origin:22px 26px;animation:clapR .52s ease-in-out infinite}
@keyframes clapL{0%,100%{transform:rotate(-13deg)}50%{transform:rotate(6deg)}}
@keyframes clapR{0%,100%{transform:rotate(13deg)}50%{transform:rotate(-6deg)}}

.toast-arm{transform-origin:23px 30px;animation:toast 2.6s ease-in-out infinite}
@keyframes toast{0%,100%{transform:rotate(0)}30%{transform:rotate(-15deg)}60%{transform:rotate(-15deg)}}

.g-dance{animation:dance 1.1s ease-in-out infinite;transform-origin:15px 54px}
@keyframes dance{
  0%,100%{transform:rotate(-5deg) translateY(0)}
  50%{transform:rotate(5deg) translateY(-3px)}
}
.g-dance .arm-a{animation:greet 1.1s ease-in-out infinite}
.g-dance .arm-b{animation:greetInv 1.1s ease-in-out infinite}

.g-photo .flash{animation:flash 4.5s ease-in-out infinite}
@keyframes flash{0%,86%,100%{opacity:.35}90%{opacity:1}94%{opacity:.5}}

.g-shoulders{animation:heave 2.4s ease-in-out infinite}
@keyframes heave{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* la segunda fila queda un poco atras: mas suave y mas apagada */
.row-back{opacity:.72}
.g-sway{animation:sway2 3.2s ease-in-out infinite;transform-origin:15px 54px}
@keyframes sway2{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.g-shoulders .kid .arm-a{animation:greet 1.3s ease-in-out infinite;transform-origin:10px -10px}
.g-shoulders .kid .arm-b{animation:greetInv 1.3s ease-in-out infinite;transform-origin:20px -10px}

.g-throw .arm-a{animation:greet 1.9s ease-in-out infinite -.5s}
.g-throw .arm-b{animation:greetInv 1.9s ease-in-out infinite -.5s}

.confetti circle{animation:conf 3.4s ease-in-out infinite}
.confetti circle:nth-child(2n){animation-duration:4.2s;animation-delay:-1.1s}
.confetti circle:nth-child(3n){animation-duration:2.9s;animation-delay:-2s}
.confetti circle:nth-child(5n){animation-duration:3.8s;animation-delay:-.7s}
@keyframes conf{
  0%,100%{transform:translateY(0) scale(1);opacity:.75}
  50%{transform:translateY(-13px) scale(1.12);opacity:1}
}
.wake-petals ellipse{animation:driftPetal 6s ease-in-out infinite}
.wake-petals ellipse:nth-child(2){animation-delay:-1.2s}
.wake-petals ellipse:nth-child(3){animation-delay:-2.4s}
.wake-petals ellipse:nth-child(4){animation-delay:-3.6s}
.wake-petals ellipse:nth-child(5){animation-delay:-4.8s}
@keyframes driftPetal{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(8deg)}}
@keyframes sailIn{from{transform:translateX(-660px) scale(.86)}to{transform:translateX(0) scale(1)}}
.boat-bob{animation:bob 4.6s ease-in-out infinite;transform-origin:500px 600px}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.1deg)}50%{transform:translateY(-7px) rotate(1.1deg)}}
.oars{animation:row 2.3s ease-in-out infinite;transform-origin:94px 44px}
@keyframes row{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.arms-s{animation:row 2.3s ease-in-out infinite;transform-origin:41px 22px}
.veil{animation:veil 5s ease-in-out infinite;transform-origin:28px 6px}
@keyframes veil{0%,100%{transform:skewX(0deg)}50%{transform:skewX(-7deg)}}
.bouquet{animation:bob2 3.4s ease-in-out infinite}
@keyframes bob2{0%,100%{transform:translate(30px,44px) rotate(-3deg)}50%{transform:translate(30px,42px) rotate(3deg)}}
.garland{animation:bob2b 3.9s ease-in-out infinite}
@keyframes bob2b{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

.sun-rays{animation:spin 70s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.shimmer{animation:shim 5.5s ease-in-out infinite}
@keyframes shim{0%,100%{opacity:.55;transform:scaleX(1)}50%{opacity:.95;transform:scaleX(1.07)}}
.sc-clouds{animation:drift 46s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(58px)}}
.birds{animation:fly 34s linear infinite}
@keyframes fly{0%{transform:translate(-120px,22px);opacity:0}8%{opacity:.6}92%{opacity:.6}100%{transform:translate(980px,-52px);opacity:0}}

.w1{animation:wave 9s linear infinite}
.w2{animation:wave 13s linear infinite reverse}
.w3{animation:wave 17s linear infinite}
.w4{animation:wave 22s linear infinite reverse}
@keyframes wave{to{transform:translateX(240px)}}

/* ═══════════════════════════════════════════
   PÉTALOS
   ═══════════════════════════════════════════ */
.petals{position:fixed;inset:0;z-index:600;pointer-events:none;overflow:hidden}
.petal{
  position:absolute;top:-8vh;
  will-change:transform;
  animation:fall linear infinite;
}
.petal svg{display:block;animation:twirl ease-in-out infinite alternate}
@keyframes fall{to{transform:translateY(118vh)}}
@keyframes twirl{
  from{transform:rotate(-40deg) scaleX(.5)}
  to{transform:rotate(60deg) scaleX(1)}
}

/* ═══════════════════════════════════════════
   APP
   ═══════════════════════════════════════════ */
.app{
  position:relative;z-index:1;
  min-height:100%;
  opacity:0;
  transition:opacity 1s var(--ease-soft) .25s;
}
body:not(.is-intro) .app{opacity:1}

/* ───────── topbar ───────── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:300;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  padding-top:calc(14px + env(safe-area-inset-top));
  transition:background .5s,box-shadow .5s;
}
.topbar.is-stuck{
  background:rgba(251,245,236,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(185,143,70,.18);
}
.topbar__mark{
  font-family:var(--serif);font-size:1.18rem;letter-spacing:.16em;
  color:var(--ink);opacity:0;transition:opacity .5s;
}
.topbar.is-stuck .topbar__mark{opacity:1}
.topbar__mark em{font-family:var(--script);font-style:normal;color:var(--gold);font-size:1.2em}

.topbar__right{display:flex;align-items:center;gap:9px}

/* ───────── botón de música ───────── */
.snd{
  display:grid;place-items:center;
  width:36px;height:36px;padding:0;
  border:1px solid rgba(185,143,70,.22);border-radius:50%;
  background:rgba(251,245,236,.7);backdrop-filter:blur(10px);
  color:var(--ink-soft);cursor:pointer;
  transition:color .35s,background .35s,border-color .35s,transform .35s;
  -webkit-tap-highlight-color:transparent;
}
.snd:hover{color:var(--lake);transform:translateY(-1px)}
.snd > *{grid-area:1/1}
.snd__mute{width:19px;height:19px}
.snd__bars{display:none;align-items:flex-end;gap:2.5px;height:15px}
.snd__bars i{width:2.5px;border-radius:2px;background:currentColor;animation:eq .9s ease-in-out infinite}
.snd__bars i:nth-child(1){height:6px;animation-delay:-.45s}
.snd__bars i:nth-child(2){height:14px;animation-delay:-.15s}
.snd__bars i:nth-child(3){height:9px;animation-delay:-.65s}
.snd__bars i:nth-child(4){height:12px}
@keyframes eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

.snd[aria-pressed="true"]{background:var(--lake);border-color:var(--lake);color:var(--paper)}
.snd[aria-pressed="true"] .snd__mute{display:none}
.snd[aria-pressed="true"] .snd__bars{display:flex}


/* ───────── vistas ───────── */
.views{position:relative}
.view{display:none}
.view.is-active{display:block;animation:viewIn .62s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.wrap{
  max-width:var(--maxw);margin:0 auto;
  padding:0 22px calc(var(--tabh) + 54px + env(safe-area-inset-bottom));
}
.view:not(#v-home) .wrap{padding-top:calc(74px + env(safe-area-inset-top))}

/* ───────── HERO ───────── */
.hero{position:relative;height:82svh;min-height:440px;max-height:760px;overflow:hidden}
.hero__art{position:absolute;inset:0}
.hero__art .scene{width:100%;height:100%}
.hero__fade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(251,245,236,.3) 0,rgba(251,245,236,0) 22%),
    linear-gradient(0deg,var(--paper) 0%,rgba(251,245,236,.86) 12%,rgba(31,79,99,.34) 42%,rgba(31,79,99,0) 66%);
}
.hero__copy{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 22px 30px;text-align:center;
}
.eyebrow{
  margin:0 0 12px;font-size:.64rem;letter-spacing:.4em;text-transform:uppercase;
  font-weight:500;color:var(--gold);
}
.names{
  margin:0;font-family:var(--serif);font-weight:300;color:var(--ink);
  font-size:clamp(2.6rem,10.5vw,5.1rem);line-height:.96;
}
.names em{
  font-family:var(--script);font-style:normal;color:var(--gold);
  font-size:.62em;padding:0 .1em;vertical-align:-.04em;
}
.hero__meta{
  margin-top:16px;display:flex;align-items:center;justify-content:center;gap:14px;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);
}
.dot{width:4px;height:4px;border-radius:50%;background:var(--gold);display:inline-block}

/* ───────── el panel de invitación ───────── */
.invite{
  position:relative;
  margin:44px auto 0;max-width:560px;
  padding:36px 28px 32px;text-align:center;
  border:1px solid rgba(185,143,70,.3);
  background:linear-gradient(168deg,rgba(255,255,255,.66),rgba(244,233,218,.42));
}
.invite::before,.invite::after{
  content:"";position:absolute;width:26px;height:26px;
  border:1px solid var(--gold);opacity:.55;
}
.invite::before{top:7px;left:7px;border-right:0;border-bottom:0}
.invite::after{bottom:7px;right:7px;border-left:0;border-top:0}

.invite__pre{
  margin:0 0 16px;font-size:.6rem;letter-spacing:.36em;text-transform:uppercase;
  font-weight:500;color:var(--gold);
}
.invite__main{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.3rem,5.4vw,1.78rem);line-height:1.45;color:var(--ink);
}
.invite__rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:24px 0 20px}
.invite__rule i{width:54px;height:1px;background:rgba(185,143,70,.5)}
.invite__rule b{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);opacity:.8}
.invite__when{
  margin:0 0 7px;font-family:var(--serif);font-size:1.14rem;
  letter-spacing:.1em;color:var(--lake);
}
.invite__where{
  margin:0;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
}

/* ───────── botón de WhatsApp ───────── */
.wa{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:14px;padding:12px 24px;
  border-radius:100px;text-decoration:none;
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);background:var(--lake);
  box-shadow:0 10px 26px -16px rgba(31,79,99,.9);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s;
}
.wa svg{width:17px;height:17px;flex:0 0 auto}
.wa:hover{background:#18404F;transform:translateY(-2px);box-shadow:0 15px 30px -15px rgba(31,79,99,.95)}

/* ───────── cuenta atrás ───────── */
.countdown{margin:44px 0 8px;text-align:center}
.count__label{
  margin:0 0 16px;font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);
}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:460px;margin:0 auto}
.count__c{
  position:relative;padding:16px 4px 13px;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(244,233,218,.5));
  border:1px solid rgba(185,143,70,.22);border-radius:3px;
}
.count__c::after{
  content:"";position:absolute;inset:4px;border:1px solid rgba(185,143,70,.14);
  border-radius:2px;pointer-events:none;
}
.count__c b{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,7vw,2.5rem);line-height:1;color:var(--lake);
  font-variant-numeric:tabular-nums;
}
.count__c small{
  display:block;margin-top:7px;font-size:.55rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* ───────── carta ───────── */
.letter{margin:52px auto 0;max-width:620px;text-align:center}
.flourish{width:120px;height:24px;color:var(--gold);opacity:.75;margin-bottom:22px}
.letter p{
  margin:0 0 18px;font-family:var(--serif);font-size:1.24rem;line-height:1.62;
  color:var(--ink);font-weight:300;
}
.letter .sign{
  margin-top:28px;font-family:var(--serif);font-size:1.5rem;letter-spacing:.06em;color:var(--lake);
}
.letter .sign em{font-family:var(--script);font-style:normal;color:var(--gold);font-size:1.1em}

/* ───────── cabecera de vista ───────── */
.vhead{text-align:center;margin:14px 0 40px}
.vhead__orn{display:block;color:var(--gold);opacity:.75;line-height:0;margin-bottom:14px}
.vhead__orn svg{width:26px;height:26px}
.vhead h2{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:clamp(2.2rem,8vw,3.4rem);line-height:1.04;color:var(--ink);
}
.vhead p{margin:12px auto 0;max-width:38ch;font-size:.88rem;line-height:1.6;color:var(--ink-soft)}
.vhead .sprig{display:block;margin:20px auto 0;width:150px;height:26px;color:var(--sage);opacity:.8}

/* ═══════════════════════════════════════════
   LA GUÍA · bloques que pinta el renderizador
   ═══════════════════════════════════════════ */
.lead{
  margin:0 0 24px;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.18rem,4.2vw,1.36rem);line-height:1.6;color:var(--ink);
}
.parrafo{margin:0 0 18px;font-size:.94rem;line-height:1.72;color:var(--ink-soft)}

.bullets{margin:0 0 10px;padding-left:1.15em}
.bullets li{margin-bottom:12px;font-size:.92rem;line-height:1.68;color:var(--ink-soft)}
.bullets li::marker{color:var(--gold)}

/* Índice de atajos. En móvil es una fila que se desliza con el dedo, con
   un degradado a la derecha que avisa de que hay más. En escritorio no hay
   gesto de deslizar, así que los chips se reparten en varias líneas. */
.indice{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:7px;margin:0 0 38px;
}
.indice button{font-size:.64rem;padding:7px 13px}
@media (min-width:700px){
  .indice{gap:8px}
  .indice button{font-size:.68rem;padding:8px 15px}
}
.indice button{
  flex:0 0 auto;white-space:nowrap;cursor:pointer;
  padding:8px 15px;border-radius:100px;
  font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.05em;
  color:var(--ink-soft);background:rgba(255,255,255,.62);
  border:1px solid rgba(185,143,70,.28);
  transition:background .35s var(--ease),border-color .35s,color .35s,transform .35s;
}
.indice button:hover{
  background:var(--lake);border-color:var(--lake);color:var(--paper);transform:translateY(-1px);
}

/* ───────── iconos dibujados a línea ─────────
   Todos los trazos llevan pathLength="1", así que con una sola animación
   se dibujan solos aunque midan cosas distintas. */
.ico > *{stroke-dasharray:1;stroke-dashoffset:1}
[data-reveal].in .ico > *{animation:trazo 1s var(--ease-soft) both}
[data-reveal].in .ico > *:nth-child(2){animation-delay:.14s}
[data-reveal].in .ico > *:nth-child(3){animation-delay:.28s}
[data-reveal].in .ico > *:nth-child(4){animation-delay:.42s}
[data-reveal].in .ico > *:nth-child(5){animation-delay:.56s}
@keyframes trazo{to{stroke-dashoffset:0}}

.subhead__ico{
  flex:0 0 auto;display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(185,143,70,.38);
  background:rgba(255,255,255,.6);
  color:var(--gold);
}
.subhead__ico .ico{width:19px;height:19px}

.subhead{
  scroll-margin-top:86px;
  margin:52px 0 20px;font-family:var(--sans);font-weight:500;
  font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:14px;
}
.subhead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(185,143,70,.4),transparent)}

/* ───────── timeline ───────── */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{
  content:"";position:absolute;left:72px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(185,143,70,.42) 12%,rgba(185,143,70,.42) 88%,transparent);
}
.timeline li{position:relative;display:grid;grid-template-columns:64px 1fr;gap:26px;padding:0 0 30px}
.timeline li::before{
  content:"";position:absolute;left:67px;top:7px;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--gold);
}
.timeline time{
  font-family:var(--serif);font-size:1.16rem;color:var(--lake);
  text-align:right;padding-top:1px;font-variant-numeric:tabular-nums;
}
.timeline h3{margin:0 0 6px;font-family:var(--serif);font-weight:500;font-size:1.34rem;color:var(--ink)}
.timeline p{margin:0;font-size:.9rem;line-height:1.62;color:var(--ink-soft)}

/* ───────── tarjetas ───────── */
.cards{display:grid;grid-template-columns:1fr;gap:14px}
.card{
  position:relative;padding:24px 22px;
  background:linear-gradient(158deg,rgba(255,255,255,.78),rgba(244,233,218,.55));
  border:1px solid rgba(185,143,70,.2);border-radius:3px;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s;
}
.card::before{
  content:"";position:absolute;left:0;top:0;width:34px;height:34px;
  border-left:1px solid var(--gold);border-top:1px solid var(--gold);opacity:.35;
  transition:width .5s var(--ease),height .5s var(--ease),opacity .5s;
}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -18px rgba(31,79,99,.42);border-color:rgba(185,143,70,.4)}
.card:hover::before{width:56px;height:56px;opacity:.7}
.card h3{margin:0 0 9px;font-family:var(--serif);font-weight:500;font-size:1.36rem;color:var(--ink)}
.card p{margin:0;font-size:.9rem;line-height:1.64;color:var(--ink-soft)}
.card .tag{
  display:inline-block;margin-bottom:10px;padding:3px 9px;
  font-size:.58rem;font-weight:600;letter-spacing:.18em;
  color:var(--paper);background:var(--lake);border-radius:2px;
}
.iban{margin-top:14px!important;font-size:.78rem!important;letter-spacing:.04em}
.iban code{font-family:var(--sans);color:var(--lake);font-weight:500}

.swatches{display:flex;gap:8px;margin-top:16px}
.swatches i{
  width:26px;height:26px;border-radius:50%;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(42,60,74,.14);
}

/* la tarjeta donde mojamos: fondo oscuro para que rompa la fila */
.card--nuestra{
  background:linear-gradient(163deg,var(--lake),#173C4A);
  border-color:transparent;
  box-shadow:0 16px 36px -22px rgba(31,79,99,.8);
}
.card--nuestra h3{color:var(--paper)}
.card--nuestra p{color:rgba(251,245,236,.8)}
.card--nuestra::before{border-color:var(--gold-2);opacity:.55}
.card--nuestra:hover::before{opacity:.9}
.card--nuestra .tag{background:var(--gold);color:#123642}
.card--nuestra .ico{color:var(--gold-2)}
.card--nuestra .link{color:var(--gold-2);border-color:rgba(217,190,131,.45)}
.card--nuestra .link:hover{color:#FFF;border-color:#FFF}

/* el chip del indice se enciende segun por donde vas leyendo */
.indice button.is-on{
  background:var(--lake);border-color:var(--lake);color:var(--paper);
}

.link{
  display:inline-block;margin-top:14px;padding:0 0 2px;
  font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lake);text-decoration:none;background:none;border:0;cursor:pointer;
  border-bottom:1px solid rgba(31,79,99,.35);
  transition:color .35s,border-color .35s;
}
.link:hover{color:var(--gold);border-color:var(--gold)}

.note{
  display:flex;gap:16px;align-items:flex-start;
  margin-top:34px;padding:20px 22px;
  border-left:2px solid var(--gold);background:rgba(185,143,70,.07);
}
.note .ico{flex:0 0 auto;width:25px;height:25px;color:var(--gold);margin-top:3px}
.note p{margin:0;font-family:var(--serif);font-size:1.08rem;line-height:1.6;color:var(--ink)}

/* ───────── datos prácticos ───────── */
.facts{list-style:none;margin:0;padding:0}
.facts li{
  position:relative;
  display:grid;grid-template-columns:1fr;gap:5px;
  padding:17px 0 17px 19px;border-bottom:1px solid rgba(185,143,70,.18);
}
/* cada dato lleva su rombo dorado */
.facts li::before{
  content:"";position:absolute;left:1px;top:23px;
  width:6px;height:6px;background:var(--gold);transform:rotate(45deg);opacity:.65;
}
.facts li:first-child{border-top:1px solid rgba(185,143,70,.18)}
.facts b{font-family:var(--sans);font-weight:600;font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.facts span{font-size:.9rem;line-height:1.64;color:var(--ink-soft)}

/* ───────── formulario ───────── */
.form{display:grid;gap:20px;max-width:560px;margin:0 auto}
.f{display:block}
.f > span,.f legend{
  display:block;margin-bottom:8px;
  font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
.f > span i,.f legend i{font-style:normal;font-weight:400;color:var(--ink-soft);letter-spacing:.1em}
.f input,.f select,.f textarea{
  width:100%;padding:13px 14px;
  font-family:var(--sans);font-size:1rem;font-weight:300;color:var(--ink);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(185,143,70,.32);border-radius:3px;
  transition:border-color .35s,box-shadow .35s,background .35s;
  -webkit-appearance:none;appearance:none;
}
.f select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%2362727C' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.f textarea{resize:vertical;min-height:88px;line-height:1.55}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--gold);background:#fff;
  box-shadow:0 0 0 3px rgba(185,143,70,.14);
}
.f input.err,.f textarea.err{border-color:#C0553F;box-shadow:0 0 0 3px rgba(192,85,63,.12)}
.hint{display:block;margin-top:7px;font-size:.74rem;font-style:normal;color:var(--ink-soft);line-height:1.5}

.f--choice{border:0;padding:0;margin:0}
.choice{display:flex;flex-wrap:wrap;gap:9px}
.choice label{
  position:relative;flex:1 1 auto;min-width:118px;
  display:flex;align-items:center;justify-content:center;
  padding:13px 14px;text-align:center;cursor:pointer;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(185,143,70,.32);border-radius:3px;
  font-size:.86rem;color:var(--ink-soft);
  transition:all .35s var(--ease);
}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice label:has(input:checked){
  background:var(--lake);border-color:var(--lake);color:var(--paper);
  box-shadow:0 6px 18px -10px rgba(31,79,99,.7);
}
.choice label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(185,143,70,.3)}

#ifYes{display:grid;gap:20px;animation:viewIn .5s var(--ease) both}

/* ───────── CTA ───────── */
.cta{
  display:block;width:100%;max-width:340px;margin:44px auto 0;
  padding:16px 30px;
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--paper);background:var(--lake);
  border:0;border-radius:100px;cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  box-shadow:0 10px 28px -14px rgba(31,79,99,.85);
}
.cta::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
  transform:translateX(-130%);
}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(31,79,99,.9)}
.cta:hover::after{transform:translateX(130%);transition:transform 1.1s var(--ease-soft)}
.cta:disabled{opacity:.55;cursor:default;transform:none}
.cta--send{margin-top:16px}

.formnote{margin:16px 0 0;text-align:center;font-size:.84rem;min-height:1.2em;color:#B2503A}
.formnote.ok{color:var(--sage)}

.thanks{text-align:center;padding:34px 0 8px;animation:viewIn .7s var(--ease) both}
.thanks__ring{width:106px;height:106px;color:var(--sage)}
.tr-c{stroke-dasharray:302;stroke-dashoffset:302;animation:draw 1.1s var(--ease) .1s forwards}
.tr-k{stroke-dasharray:70;stroke-dashoffset:70;animation:draw .6s var(--ease) .9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.thanks h3{margin:18px 0 10px;font-family:var(--serif);font-weight:400;font-size:2rem;color:var(--ink)}
.thanks p{margin:0 auto;max-width:34ch;font-size:.92rem;line-height:1.62;color:var(--ink-soft)}
.thanks .link{margin-top:22px}

.contact{margin-top:52px;text-align:center}
.contact p{margin:0;font-size:.84rem;color:var(--ink-soft)}

/* ═══════════════════════════════════════════
   BARRA INFERIOR TIPO APP
   ═══════════════════════════════════════════ */
.tabbar{
  position:fixed;z-index:320;
  left:50%;bottom:calc(14px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(520px,calc(100% - 24px));
  height:var(--tabh);
  display:grid;grid-template-columns:repeat(var(--n,6),1fr);
  padding:6px;
  background:rgba(251,245,236,.82);
  backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(185,143,70,.3);
  border-radius:22px;
  box-shadow:0 18px 44px -22px rgba(31,79,99,.62),0 2px 10px -4px rgba(31,79,99,.2);
}
.tabbar__pill{
  position:absolute;top:6px;bottom:6px;left:6px;
  width:calc((100% - 12px)/var(--n,6));
  background:linear-gradient(165deg,var(--lake),#17404F);
  border-radius:17px;
  transform:translateX(calc(var(--i,0) * 100%));
  transition:transform .58s var(--ease);
  box-shadow:0 8px 20px -12px rgba(31,79,99,.95);
}
.tab{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:0;background:none;cursor:pointer;padding:0;
  color:var(--ink-soft);
  transition:color .4s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.tab svg{width:19px;height:19px;transition:transform .5s var(--ease)}
.tab small{font-size:.5rem;font-weight:500;letter-spacing:.03em;text-transform:uppercase;
  transition:opacity .4s;white-space:nowrap}
.tab.is-on{color:var(--paper)}
.tab.is-on svg{transform:translateY(-1px) scale(1.08)}
.tab:not(.is-on):hover{color:var(--lake)}
.tab:not(.is-on):hover svg{transform:translateY(-2px)}

/* con seis pestañas y pantallas estrechas, las etiquetas necesitan aire */
@media (max-width:390px){
  .tab small{font-size:.45rem;letter-spacing:0}
  .tab svg{width:18px;height:18px}
  .tab{gap:4px}
}

/* ═══════════════════════════════════════════
   REVELADO AL HACER SCROLL
   ═══════════════════════════════════════════ */
[data-reveal]{opacity:0;transform:translateY(22px)}
[data-reveal].in{
  opacity:1;transform:none;
  transition:opacity .85s var(--ease-soft),transform .85s var(--ease);
}

/* ═══════════════════════════════════════════
   ESCRITORIO
   ═══════════════════════════════════════════ */
@media (min-width:700px){
  .cards{grid-template-columns:repeat(2,1fr);gap:18px}
  .card{padding:28px 26px}
  .facts li{grid-template-columns:180px 1fr;gap:22px;align-items:baseline}
  .timeline li{grid-template-columns:90px 1fr;gap:34px}
  .timeline::before{left:98px}
  .timeline li::before{left:93px}
  .timeline time{font-size:1.32rem}
  .hero{height:88svh}
  .wrap{padding-left:34px;padding-right:34px}
  .vhead{margin:26px 0 48px}
  .topbar{padding:18px 28px}
}

@media (min-width:1024px){
  :root{--tabh:66px}
  .tabbar{width:min(600px,calc(100% - 40px));border-radius:20px}
  .tab small{font-size:.55rem;letter-spacing:.06em}
  .cards{gap:20px}
  .letter p{font-size:1.32rem}
  .count{max-width:520px;gap:14px}
}

@media (hover:hover){
  .tabbar:hover{box-shadow:0 22px 52px -22px rgba(31,79,99,.7)}
}

/* ═══════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .intro__eyebrow,.intro__names span,.intro__names em,.intro__date,.intro__enter{opacity:1}
  .petals{display:none}
  [data-reveal]{opacity:1;transform:none}
  .ico > *{stroke-dashoffset:0!important}
}