/* =========================================================
   Invitación de boda · Sara y Alberto
   Paleta tomada de la invitación impresa

   RESPONSIVE
   - Todo va en rem/em y el tamaño base de la página crece con la
     pantalla, así que se ve proporcionado tanto con zoom al 300 %
     como en monitores enormes o con el zoom al 25 %.
   - Móvil        (< 600 px)   : una columna, flores en las esquinas
   - Tablet       (600–899 px) : una columna más ancha
   - Escritorio   (≥ 900 px)   : texto centrado y flores a los lados,
                                 mapa en horizontal
   - Pantallas muy pequeñas (< 360 px), móvil apaisado (poca altura)
     y pantallas muy grandes (≥ 1600 px) tienen ajustes propios.
   ========================================================= */
:root{
  --paper:#fdfbf6;
  --paper-2:#f5efe3;
  --teal:#5a9bab;
  --teal-d:#3d7c8d;
  --teal-num:#3a7a8c;      /* teal más oscuro para cifras: más contraste */
  --teal-l:#cfe3e8;
  --ink:#23282b;
  --ink-soft:#5d6569;
  --tan:#b99968;
  --line:rgba(90,155,171,.35);

  --f-body:'Marcellus',Cambria,'Palatino Linotype',Georgia,'Times New Roman',serif;
  --f-num:'Marcellus',Cambria,'Palatino Linotype','Times New Roman',serif;
  --ease:cubic-bezier(.22,.7,.2,1);

  --gutter:max(1.5rem, env(safe-area-inset-left), env(safe-area-inset-right));
}

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

/* Tamaño base fluido: 100 % (lo que tenga el usuario) en móvil y crece
   suavemente en pantallas grandes hasta un 190 %. */
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  font-size:clamp(100%, 50% + .55vw, 190%);
}
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--paper);
  font-size:clamp(1rem,.95rem + .25vw,1.14rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{               /* velos de acuarela muy suaves de fondo */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vmax 45vmax at 100% 0%, rgba(207,227,232,.55), transparent 62%),
    radial-gradient(55vmax 40vmax at 0% 100%, rgba(185,153,104,.13), transparent 62%),
    var(--paper);
}
body.locked{overflow:hidden;height:100vh;height:100svh}

img{display:block;max-width:100%;height:auto;-webkit-user-drag:none;user-select:none}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Revelado al hacer scroll ---------- */
.rv{opacity:0;transform:translateY(1.5rem);
    transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);
    transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

/* =========================================================
   PORTADA
   ========================================================= */
#cover{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden}
.cover__half{
  position:absolute;top:0;bottom:0;width:50.6%;
  background:var(--paper);
  transition:transform 1.7s var(--ease) .35s;
  will-change:transform;
}
.cover__half--l{left:0}
.cover__half--r{right:0}
.cover__half::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 50%, rgba(207,227,232,.35), transparent 70%);
}
.cover__flor{position:absolute;pointer-events:none;z-index:1;transform-origin:50% 100%;
             animation:sway 8s ease-in-out infinite alternate}
.cover__flor--l{left:0;top:50%;width:clamp(6rem,26vw,14.5rem);translate:0 -50%}
.cover__flor--r{right:-2%;top:56%;width:clamp(5.6rem,24vw,13.5rem);animation-delay:-3s}
.cover__flor--tr{right:-3%;top:-2%;width:clamp(5rem,20vw,10.5rem);animation-delay:-5s}

.cover__center{position:relative;z-index:3;text-align:center;padding:0 1rem;
               transition:opacity .7s ease, transform 1s var(--ease)}
.cover__eyebrow,.eyebrow{
  font-size:.88rem;letter-spacing:.26em;text-transform:uppercase;color:var(--teal-d);
}
.cover__eyebrow{margin-bottom:1.6rem;animation:fadeUp 1.4s var(--ease) .2s both}
.cover__hint{margin-top:1.6rem;font-size:.9rem;letter-spacing:.22em;text-transform:uppercase;
             color:var(--ink-soft);animation:fadeUp 1.4s var(--ease) 1s both, breathe 2.6s ease-in-out 2.4s infinite}

.seal{
  position:relative;display:grid;place-items:center;margin:0 auto;
  width:clamp(8.75rem,38vw,11.25rem);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--paper) 70%);
  border:1px solid var(--teal);
  box-shadow:0 .6rem 2.5rem rgba(61,124,141,.18), inset 0 0 0 .45rem var(--paper), inset 0 0 0 calc(.45rem + 1px) var(--line);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:sealIn 1.6s var(--ease) .5s both;
  transition:transform .4s var(--ease), box-shadow .4s;
}
.seal:hover,.seal:focus-visible{transform:scale(1.05);box-shadow:0 .9rem 2.9rem rgba(61,124,141,.28), inset 0 0 0 .45rem var(--paper), inset 0 0 0 calc(.45rem + 1px) var(--teal)}
.seal:focus-visible{outline:2px solid var(--teal-d);outline-offset:6px}
.seal img{width:46%;height:auto;position:relative;z-index:2}
.seal__ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--teal);
            animation:ring 3s ease-out infinite;opacity:0}
.seal__ring--2{animation-delay:1.5s}

#cover.is-open .cover__center{opacity:0;transform:scale(1.25);pointer-events:none}
#cover.is-open .cover__half--l{transform:translateX(-102%)}
#cover.is-open .cover__half--r{transform:translateX(102%)}
#cover.is-gone{display:none}

/* Móvil en horizontal / ventanas muy bajas */
@media (max-height:520px){
  .seal{width:clamp(5.5rem,30vh,8rem)}
  .cover__eyebrow{margin-bottom:.8rem}
  .cover__hint{margin-top:.8rem}
  .cover__flor--l,.cover__flor--r{width:clamp(4.5rem,22vh,9rem)}
  .cover__flor--tr{width:clamp(4rem,18vh,7rem)}
}

/* =========================================================
   Pétalos (canvas)
   ========================================================= */
#petals{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}

/* =========================================================
   HERO / INVITACIÓN  (texto centrado)
   ========================================================= */
.hero{
  position:relative;overflow:hidden;
  min-height:100vh;min-height:100svh;
  padding:clamp(2.2rem,7vw,5rem) var(--gutter) 6.8rem;
  display:flex;justify-content:center;
}
.hero__text{position:relative;z-index:3;width:100%;max-width:35rem;margin:0 auto;text-align:center;
  font-size:clamp(1rem,.9rem + .5vw,1.35rem)}
.hero__text p{margin-bottom:1.15em;text-wrap:balance;
  text-shadow:0 0 .9rem var(--paper),0 0 .5rem var(--paper),0 0 .25rem var(--paper)}
.hero__text p strong{font-weight:400;color:#000;border-bottom:1px solid var(--line)}

.names{
  width:min(100%,31rem);margin:0 auto clamp(1.4rem,4vw,2.1rem);
  -webkit-mask-image:linear-gradient(115deg,#000 44%,transparent 56%);
          mask-image:linear-gradient(115deg,#000 44%,transparent 56%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;
  -webkit-mask-position:100% 0;mask-position:100% 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
body.opened .names{animation:write 3.2s cubic-bezier(.5,.1,.3,1) .6s forwards}

.date{font-family:var(--f-num);font-size:clamp(2.5rem,10.5vw,3.8rem);line-height:1.1;color:var(--teal-num);
      letter-spacing:.07em;margin:.2em 0 .45em !important}
.hero__text .script--sm{width:min(58vw,15.6rem);margin:.5em auto 1.2em}

.hero__rsvp{margin-top:2.2em;font-size:1em;color:var(--ink-soft)}
.hero__rsvp a{font-size:1.1em;letter-spacing:.05em;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);white-space:nowrap;
               transition:color .3s,border-color .3s}
.hero__rsvp a:hover{color:var(--teal-d);border-color:var(--teal)}

/* --- Flores del hero ---
   Móvil/tablet: una arriba a la derecha y otra (girada) abajo a la izquierda,
   difuminadas hacia el centro para que el texto se lea bien. */
.hero__flowers,.hero__flowers-b{position:absolute;pointer-events:none;max-width:none;z-index:1;opacity:0}
.hero__flowers--l{display:none}
.hero__flowers--r{
  top:0;right:-20vw;width:min(70vw,27.5rem);transform-origin:100% 0;
  -webkit-mask-image:linear-gradient(to left,#000 28%,rgba(0,0,0,.18) 100%);
          mask-image:linear-gradient(to left,#000 28%,rgba(0,0,0,.18) 100%);
}
.hero__flowers-b{
  bottom:0;left:-9vw;width:min(54vw,18.75rem);scale:-1 1;transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to left,#000 35%,rgba(0,0,0,.2) 100%),linear-gradient(to top,transparent 0,#000 30%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to left,#000 35%,rgba(0,0,0,.2) 100%),linear-gradient(to top,transparent 0,#000 30%);
          mask-composite:intersect;
}
body.opened .hero__flowers--r{animation:flowerIn 2.6s var(--ease) .3s forwards, sway 9s ease-in-out 2.9s infinite alternate}
body.opened .hero__flowers--l{animation:flowerIn 2.6s var(--ease) .9s forwards, sway 11s ease-in-out 3.5s infinite alternate}
body.opened .hero__flowers-b{animation:flowerIn 2.6s var(--ease) 1.2s forwards, sway 10s ease-in-out 3.8s infinite alternate}

.scrollcue{position:absolute;left:50%;bottom:1.6rem;z-index:4;width:1.75rem;height:2.9rem;transform:translateX(-50%);
           border:1px solid var(--teal);border-radius:1.25rem;opacity:0;transition:opacity 1s 5s}
body.opened .scrollcue{opacity:.8}
.scrollcue span{position:absolute;left:50%;top:.55rem;width:4px;height:.5rem;margin-left:-2px;border-radius:2px;
                background:var(--teal);animation:cue 1.9s ease-in-out infinite}

/* Tablet */
@media (min-width:600px){
  .hero__text{max-width:37rem}
  .hero__flowers--r{right:-9vw;width:min(46vw,27.5rem)}
  .hero__flowers-b{left:-4vw;width:min(38vw,20rem)}
}

/* Escritorio: flores a ambos lados y el texto en el centro */
@media (min-width:900px){
  .hero{min-height:max(100vh,60rem);min-height:max(100svh,60rem);padding-inline:var(--gutter)}
  .hero__text{max-width:36rem}
  .hero__flowers-b{display:none}
  .hero__flowers--r,.hero__flowers--l{
    display:block;top:0;height:calc(100% - 4rem);width:auto;max-width:27vw;
    object-fit:contain;object-position:right top;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero__flowers--r{right:0}
  .hero__flowers--l{left:0;top:5%;height:calc(90% - 4rem);max-width:24vw;scale:-1 1;transform-origin:50% 0}
}

/* Móvil apaisado y ventanas bajas: no forzar altura completa */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:0;padding-bottom:5rem}
  .scrollcue{display:none}
}

/* =========================================================
   SECCIONES GENÉRICAS
   ========================================================= */
.sec{position:relative;overflow:hidden;padding:clamp(4.4rem,12vw,7.5rem) var(--gutter);text-align:center}
.sec > *:not(.deco){position:relative;z-index:2}
.script{margin:0 auto}
.h2{font-weight:400;font-size:clamp(1.5rem,5.6vw,2.3rem);line-height:1.25;margin:.5em auto .6em;max-width:20em;text-wrap:balance}
.lead{max-width:34em;margin:0 auto 2.4em;color:var(--ink-soft);text-wrap:balance}

.deco{position:absolute;pointer-events:none;z-index:1;opacity:.95}
.deco--tr{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%);mask-image:linear-gradient(to bottom,transparent 0,#000 26%);
          top:-2%;right:-6%;width:clamp(5.6rem,24vw,12rem);transform-origin:80% 0;animation:sway 9s ease-in-out infinite alternate}
.deco--br{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 26%);mask-image:linear-gradient(to top,transparent 0,#000 26%);
          bottom:-1%;right:-5%;width:clamp(9.4rem,44vw,20.6rem);transform-origin:100% 100%;animation:sway 10s ease-in-out infinite alternate}
.deco--l{left:0;top:50%;width:clamp(3.5rem,16vw,12rem);translate:0 -50%;transform-origin:0 50%;animation:swayY 9s ease-in-out infinite alternate}
.deco--r{right:-3%;top:50%;width:clamp(3.3rem,15vw,10.6rem);translate:0 -50%;transform-origin:100% 50%;animation:swayY 11s ease-in-out infinite alternate}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;max-width:100%;
  padding:.85em 1.6em;border-radius:999px;border:1px solid var(--teal);
  background:var(--teal);color:#fff;text-decoration:none;font:inherit;font-size:.95rem;letter-spacing:.06em;
  cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap;
  transition:background .3s,color .3s,transform .3s var(--ease),box-shadow .3s;
  box-shadow:0 .4rem 1.25rem rgba(61,124,141,.2);
}
.btn:hover{background:var(--teal-d);border-color:var(--teal-d);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--teal-d);outline-offset:3px}
.btn svg{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.btn svg .fill{fill:currentColor;stroke:none}
.btn--ghost{background:transparent;color:var(--teal-d);box-shadow:none}
.btn--ghost:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn--wa{background:var(--teal-d);border-color:var(--teal-d)}
.actions,.cal{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:2em}

/* =========================================================
   MENÚ RÁPIDO (entre la invitación y la cuenta atrás)
   ========================================================= */
.quicknav{padding:clamp(1.6rem,5vw,2.6rem) var(--gutter) 0;text-align:center;position:relative;z-index:3}
.quicknav__label{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.9rem}
.quicknav__list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem .6rem;max-width:36rem;margin:0 auto}
.quicknav__list a{
  display:inline-block;padding:.5em 1.05em;border:1px solid var(--line);border-radius:999px;
  font-size:.8rem;letter-spacing:.03em;color:var(--teal-d);text-decoration:none;white-space:nowrap;
  background:rgba(253,251,246,.6);
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease);
}
.quicknav__list a:hover{background:var(--teal);color:#fff;border-color:var(--teal);transform:translateY(-1px)}

/* =========================================================
   CUENTA ATRÁS
   ========================================================= */
.sec--count{padding-block:clamp(3.5rem,10vw,5.6rem);
  background:linear-gradient(180deg,transparent,rgba(207,227,232,.35) 30%,rgba(207,227,232,.35) 70%,transparent)}
.count{display:flex;justify-content:center;gap:clamp(.4rem,3vw,1.6rem);margin:1.6em auto .4em}
.count__item{min-width:clamp(4rem,19vw,6.9rem);padding:.4em 0;position:relative}
.count__item + .count__item::before{content:"";position:absolute;left:calc(clamp(.4rem,3vw,1.6rem) / -2);top:18%;bottom:18%;width:1px;background:var(--line)}
.count__item span{display:block;font-family:var(--f-num);font-size:clamp(2.2rem,10vw,4.2rem);line-height:1.1;color:var(--teal-num);
                  font-variant-numeric:tabular-nums}
.count__item span.tick{animation:tick .5s var(--ease)}
.count__item small{display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.count__end{font-family:var(--f-num);font-size:2.4rem;color:var(--teal-num);margin-top:.6em}

/* =========================================================
   CÓMO LLEGAR
   ========================================================= */
.script{width:min(80vw,21.25rem)}
.script--det{width:min(62vw,14.5rem)}
.script--como{width:min(88vw,23.5rem)}   /* incluye un margen transparente para que nada quede pegado al borde */
.script--finca{width:min(84vw,25rem);margin-top:.6em}

.map{margin:1.6em auto 0}
.map svg{width:100%;height:auto;overflow:visible;margin:0 auto}
.map__v{max-width:25rem}
.map__h{display:none;max-width:56rem}

.route{stroke-dasharray:1;stroke-dashoffset:1}
.map.in .route--soft{animation:draw 3.4s cubic-bezier(.5,.1,.3,1) .2s forwards}
.map.in .route--main{animation:draw 3.4s cubic-bezier(.5,.1,.3,1) .35s forwards}
.stop{opacity:0;transform-box:fill-box;transform-origin:center}
.stop rect{fill:#c9ad8f}
.map.in .stop{animation:pop .7s var(--ease) forwards;animation-delay:calc(.5s + var(--i) * .7s)}
.stop--fin{transform-origin:center}
.lbl{font-family:var(--f-body);font-size:15px;fill:var(--ink)}
.lbl--b{font-size:17px}
.pulse{transform-box:fill-box;transform-origin:center;animation:ping 2.4s ease-out infinite}

@media (min-width:900px){       /* en escritorio el río va en horizontal, como en la invitación */
  .map__v{display:none}
  .map__h{display:block}
  .lbl{font-size:14px}
  .lbl--b{font-size:16px}
}

/* =========================================================
   DETALLES
   ========================================================= */
.sec--det{padding-bottom:clamp(9.4rem,34vw,18.7rem)}
.timeline{--tcol:5.7rem;list-style:none;width:fit-content;max-width:100%;margin:2.2em auto 0;text-align:left;position:relative;padding-left:0}
.timeline::before{
  content:"";position:absolute;left:calc(var(--tcol) + 1.25rem - 1px);top:.8em;bottom:.8em;width:1px;background:var(--teal);
  transform:scaleY(0);transform-origin:top;transition:transform 2.2s var(--ease) .3s
}
.timeline.in::before{transform:scaleY(1)}
.timeline li{display:grid;grid-template-columns:var(--tcol) 1fr;column-gap:2.5rem;padding:.55em 0;align-items:baseline;position:relative;
             opacity:0;transform:translateX(-14px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d)}
.timeline.in li{opacity:1;transform:none}
.timeline li::after{content:"";position:absolute;left:calc(var(--tcol) + 1.25rem - 4px);top:1.05em;width:7px;height:7px;border-radius:50%;
                    background:var(--paper);border:1px solid var(--teal);transform:scale(0);transition:transform .6s var(--ease);transition-delay:calc(var(--d) + .2s)}
.timeline.in li::after{transform:scale(1)}
.timeline time{font-family:var(--f-num);font-size:1.65rem;color:var(--teal-num);line-height:1.2;letter-spacing:.04em}
.timeline span{font-size:1.1rem}


/* Código de vestimenta */
.lead strong{font-weight:400;color:var(--ink);border-bottom:1px solid var(--teal)}
.dress__sep{width:3.5rem;height:1px;background:var(--teal);margin:2.4rem auto 2rem;opacity:.6}
.dress__sub{font-weight:400;font-size:clamp(1.25rem,4.6vw,1.6rem);line-height:1.3;color:var(--teal-d);letter-spacing:.03em;margin:0 auto .9rem;text-wrap:balance}
.dress{display:flex;justify-content:center;gap:clamp(1.8rem,9vw,4rem);margin-top:2.2rem}
.swatch{display:grid;justify-items:center;gap:.8rem;margin:0}
.swatch figcaption{font-size:.86rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
.swatch__c{position:relative;display:block;width:clamp(4.6rem,21vw,6rem);aspect-ratio:1;border-radius:50%;
           border:1px solid rgba(35,40,43,.18);box-shadow:0 .4rem 1.3rem rgba(61,124,141,.14)}
.swatch__c--blanco{background:#fff}
.swatch__c--azul{background:#bfe1f1}
.swatch__c::after{                        /* tachado: se dibuja al aparecer */
  content:"";position:absolute;left:-8%;right:-8%;top:50%;height:2px;border-radius:2px;background:#b5675a;
  transform:translateY(-50%) rotate(-45deg) scaleX(0);transition:transform .8s var(--ease) 1s}
.dress.in .swatch__c::after{transform:translateY(-50%) rotate(-45deg) scaleX(1)}
.dress__note{margin-top:2rem;color:var(--ink-soft);font-size:.95em}

/* =========================================================
   CONFIRMACIÓN
   ========================================================= */
.sec--rsvp{background:linear-gradient(180deg,transparent,rgba(245,239,227,.9) 18%,rgba(245,239,227,.9) 82%,transparent)}
.cards{display:grid;gap:1.1rem;max-width:47.5rem;margin:0 auto;grid-template-columns:1fr}
@media (min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card{background:rgba(253,251,246,.85);border:1px solid var(--line);border-radius:1.1rem;padding:1.9rem 1.4rem 1.6rem;
      box-shadow:0 .6rem 2.1rem rgba(61,124,141,.09);position:relative}
.card::before{content:"";position:absolute;inset:.45rem;border:1px solid rgba(90,155,171,.16);border-radius:.75rem;pointer-events:none}
.card h3{font-weight:400;font-size:1.55rem;color:var(--teal-d);letter-spacing:.06em}
.card__tel{font-family:var(--f-num);font-size:1.9rem;margin:.1em 0 1em;letter-spacing:.07em;color:var(--ink)}
.card__btns{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}

/* Fecha límite de confirmación */
.deadline{display:inline-block;max-width:100%;margin:0 auto 2rem;padding:1rem 1.8rem 1.1rem;border:1px solid var(--line);
          border-radius:1.1rem;background:rgba(253,251,246,.85)}
.deadline__t{font-size:.86rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-d)}
.deadline__d{font-family:var(--f-num);font-size:clamp(1.5rem,6vw,2rem);line-height:1.25;margin:.15rem 0 0;color:var(--teal-num);
             font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;letter-spacing:.03em}
.deadline__s{font-size:.9rem;color:var(--ink-soft)}
.deadline__c{margin:.7rem auto 0;padding-top:.6rem;border-top:1px solid var(--line);font-size:.92rem;color:var(--ink-soft);
             font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.deadline__c:empty{display:none}
.deadline__c b{font-weight:400;color:var(--ink);font-size:1.12em}
.deadline__c.is-last{color:var(--teal-d);letter-spacing:.06em}



/* Aviso de alergias */
.allergy{display:flex;align-items:center;gap:1rem;max-width:34rem;margin:1.6rem auto 0;padding:1.1rem 1.4rem;text-align:left;
         background:rgba(253,251,246,.85);border:1px solid var(--line);border-radius:1.1rem}
.allergy svg{flex:none;width:2rem;height:2rem;fill:none;stroke:var(--teal-d);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.allergy__t{font-size:.86rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-d);margin-bottom:.15rem}
.allergy p{margin:0;line-height:1.5}
.allergy strong{font-weight:400;border-bottom:1px solid var(--teal)}
@media (max-width:420px){.allergy{flex-direction:column;text-align:center;gap:.6rem}}

/* =========================================================
   REGALO
   ========================================================= */
.sec--gift{padding-inline:max(var(--gutter),clamp(2.9rem,14vw,14.4rem));padding-block:clamp(5rem,14vw,8rem)}
.mono{width:5.25rem;margin:0 auto 1.6em}
.gift{margin-bottom:1.8em;text-wrap:balance}
.iban{display:flex;flex-wrap:wrap;justify-content:center;gap:.2em .8em;font-family:var(--f-num);font-size:clamp(1.25rem,5vw,1.85rem);
      letter-spacing:.09em;margin:0 auto 1.3em;color:var(--ink)}

/* =========================================================
   ALOJAMIENTO
   ========================================================= */
.sec--hotels{background:linear-gradient(180deg,transparent,rgba(207,227,232,.3) 22%,rgba(207,227,232,.3) 78%,transparent)}
.hotels{display:grid;gap:1.1rem;max-width:47.5rem;margin:0 auto;grid-template-columns:1fr}
@media (min-width:640px){.hotels{grid-template-columns:1fr 1fr}}
.hotel{background:rgba(253,251,246,.85);border:1px solid var(--line);border-radius:1.1rem;padding:1.8rem 1.5rem 1.7rem;
       box-shadow:0 .6rem 2.1rem rgba(61,124,141,.09);position:relative;display:flex;flex-direction:column;align-items:center;gap:.55rem}
.hotel::before{content:"";position:absolute;inset:.45rem;border:1px solid rgba(90,155,171,.16);border-radius:.75rem;pointer-events:none}
.hotel h3{font-weight:400;font-size:1.35rem;color:var(--teal-d);letter-spacing:.04em}
.hotel__addr{font-size:.82rem;letter-spacing:.04em;color:var(--ink-soft)}
.hotel__desc{font-size:.95rem;color:var(--ink-soft);line-height:1.55;max-width:22em}
.hotel__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.3em 1.2em;font-size:.86rem;color:var(--ink);margin-top:.1rem}
.hotel__price{font-family:var(--f-num);color:var(--teal-num);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.hotel .btn{margin-top:.65rem}
.hotel .btn svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hotel__note{max-width:34rem;margin:1.8rem auto 0;color:var(--ink-soft);font-size:.85em}

/* =========================================================
   FOOTER, TOAST, MÚSICA
   ========================================================= */
.foot{text-align:center;padding:3.1rem var(--gutter) max(4rem,env(safe-area-inset-bottom));border-top:1px solid var(--line);margin:0 auto;max-width:32.5rem}
.foot__names{font-family:var(--f-num);font-size:2rem;color:var(--teal);letter-spacing:.06em}
.foot__date{font-family:var(--f-num);font-size:1.3rem;letter-spacing:.2em;margin-top:.2em}
.foot__small{font-size:.9rem;color:var(--ink-soft);letter-spacing:.14em;text-transform:uppercase;margin-top:.8em}

.toast{position:fixed;left:50%;bottom:max(1.6rem,env(safe-area-inset-bottom));z-index:120;transform:translate(-50%,30px);opacity:0;pointer-events:none;
       max-width:calc(100vw - 2rem);text-align:center;
       background:var(--teal-d);color:#fff;padding:.7em 1.4em;border-radius:999px;font-size:.92rem;letter-spacing:.04em;
       transition:opacity .4s,transform .5s var(--ease);box-shadow:0 .5rem 1.6rem rgba(0,0,0,.18)}
.toast.show{opacity:1;transform:translate(-50%,0)}

.music{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));z-index:90;
       width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid var(--teal);
       background:rgba(253,251,246,.92);color:var(--teal-d);display:grid;place-items:center;cursor:pointer;
       box-shadow:0 .4rem 1.25rem rgba(61,124,141,.2);-webkit-tap-highlight-color:transparent;transition:transform .3s var(--ease)}
.music[hidden]{display:none}
.music:hover{transform:scale(1.08)}
.music svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.music__off{position:absolute;width:1.9rem;height:1.5px;background:var(--teal-d);transform:rotate(-45deg);transition:opacity .3s}
.music[aria-pressed="true"] .music__off{opacity:0}
.music[aria-pressed="true"]{animation:breathe 2.4s ease-in-out infinite}

/* =========================================================
   AJUSTES POR TAMAÑO
   ========================================================= */
/* Textos del regalo/confirmación: en pantallas estrechas se ignoran los saltos de línea */
@media (max-width:700px){.gift br,.lead br{display:none}}

/* IBAN en 2 filas en móvil */
@media (max-width:520px){
  .iban{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:.1em 1em}
}

/* Móviles estrechos o zoom muy alto (< 360 px de ancho útil) */
@media (max-width:359px){
  .count{display:grid;grid-template-columns:repeat(2,1fr);row-gap:.4rem}
  .count__item + .count__item::before{display:none}
  .iban{grid-template-columns:repeat(2,auto)}
  .btn{white-space:normal;text-align:center}
  .hero__text br{display:none}
  .card{padding-inline:1rem}
  .timeline{--tcol:4.9rem}
  .timeline time{font-size:1.4rem}
  .timeline li{column-gap:1.4rem}
  .timeline::before{left:calc(var(--tcol) + .7rem - 1px)}
  .timeline li::after{left:calc(var(--tcol) + .7rem - 4px)}
}
@media (max-width:400px){ .btn{white-space:normal;text-align:center} }

/* Pantallas grandes: más aire, contenido algo más ancho */
@media (min-width:1600px){
  .hero__text{max-width:40rem}
  .cards{max-width:52rem}
  .map__h{max-width:62rem}
}

/* ---------- Cifras legibles ----------
   Alineadas a la misma altura (nada de números "colgando" como en
   algunas tipografías clásicas) y con un trazo un poco más firme. */
.date,.count__item span,.count__end,.timeline time,.card__tel,.iban,.foot__date,.hero__rsvp a{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}
.date,.count__item span,.timeline time,.card__tel,.iban{-webkit-text-stroke:.35px currentColor}

/* =========================================================
   KEYFRAMES
   ========================================================= */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes sealIn{from{opacity:0;transform:scale(.6) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.7);opacity:0}}
@keyframes sway{from{transform:rotate(-.9deg) translateY(0)}to{transform:rotate(1.3deg) translateY(7px)}}
@keyframes swayY{from{transform:rotate(-1.4deg)}to{transform:rotate(1.4deg)}}
@keyframes flowerIn{from{opacity:0;transform:translateX(60px) scale(1.06)}to{opacity:1;transform:none}}
@keyframes write{to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@keyframes tick{0%{opacity:.2;transform:translateY(-10px)}100%{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes ping{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.8);opacity:0}}

/* =========================================================
   Accesibilidad: sin animaciones si el usuario lo pide
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv,.timeline li,.hero__flowers,.hero__flowers-b,.stop,.scrollcue{opacity:1 !important;transform:none !important}
  .timeline::before{transform:none}
  .timeline li::after{transform:none}
  .route{stroke-dashoffset:0}
  .names{-webkit-mask-image:none;mask-image:none}
  #petals{display:none}
}