/* ============================================================
   CINTHIA & PABLO — sistema de diseño
   Concepto: DOS TORRES. El palacio tiene dos torres simétricas
   unidas por un cuerpo central. Dos nombres, un eje.
   ============================================================ */
:root{
  --crema:#F1EADD;      /* fondo base, tomado de la referencia de ilustración */
  --marfil:#FAF6EE;     /* superficies elevadas */
  --salvia:#6F7C5E;     /* línea de la ilustración + acento (trazos, hairlines, títulos) */
  --salvia-texto:#5E6A4E; /* el mismo verde, un punto más oscuro, para texto pequeño:
                             #6F7C5E sobre crema da 3.8:1 y no llega al mínimo AA de 4.5:1 */
  --musgo:#3F4735;      /* verde profundo */
  --piedra:#C9B79C;     /* arena, hairlines */
  --tinta:#2B2822;      /* texto */
  --tinta-suave:#6B6455;
  --error:#A6483A;      /* terracota apagado, para el único mensaje de error del sitio */

  --display:"Cormorant Garamond",Georgia,serif;
  --util:"Jost","Helvetica Neue",sans-serif;

  --gut:clamp(20px,5vw,40px);
  --sec:clamp(76px,13vw,168px);
  --nav-h:60px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--crema);color:var(--tinta);
  font-family:var(--util);font-weight:300;
  font-size:clamp(15px,3.6vw,16px);line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
ul{list-style:none;margin:0;padding:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
[id]{scroll-margin-top:calc(var(--nav-h) + 8px)}

/* --------------------------------------------------- tipografía */
.eyebrow{
  font-family:var(--util);font-size:clamp(9.5px,2.5vw,11px);
  text-transform:uppercase;letter-spacing:.34em;color:var(--salvia-texto);
  font-weight:400;margin:0;
}
.display{
  font-family:var(--display);font-weight:300;line-height:.94;
  letter-spacing:.02em;margin:0;
}
.lead{
  font-family:var(--display);font-weight:300;
  font-size:clamp(21px,5.4vw,30px);line-height:1.5;color:var(--tinta);
  margin:0;
}
.body-copy{max-width:52ch;color:var(--tinta-suave)}
em{font-style:italic}

/* --------------------------------------------------- placeholder */
.ph{
  color:var(--salvia-texto);
  border-bottom:1px dashed rgba(111,124,94,.45);
  padding-bottom:.08em;
}
.ph--block{display:block;border-bottom:0;padding:0}
.ph--block::after{content:"";display:block;width:88px;height:1px;margin:1.1em auto 0;
  background:repeating-linear-gradient(90deg,var(--salvia) 0 5px,transparent 5px 10px);opacity:.6}
.eyebrow .ph{border-bottom-style:dashed}

/* --------------------------------------------------- estructura */
.wrap{width:100%;max-width:1240px;margin:0 auto;
  padding-left:max(var(--gut),env(safe-area-inset-left));
  padding-right:max(var(--gut),env(safe-area-inset-right))}
.section{padding:var(--sec) 0;position:relative}

/* --------------------------------------------------- nav */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:12px;min-height:var(--nav-h);
  padding:8px max(var(--gut),env(safe-area-inset-right)) 8px max(var(--gut),env(safe-area-inset-left));
  padding-top:calc(8px + env(safe-area-inset-top));
  /* .96 y no .86: sobre la sección musgo del RSVP, un fondo más translúcido
     hundía el contraste de los enlaces por debajo del mínimo */
  background:rgba(241,234,221,.96);backdrop-filter:blur(9px);
  border-bottom:1px solid transparent;
  transform:translateY(-102%);transition:transform .55s cubic-bezier(.2,.7,.2,1),border-color .55s;
}
.nav.is-on{transform:translateY(0);border-bottom-color:rgba(201,183,156,.5)}
/* si el foco de teclado entra en la barra estando aún oculta, se muestra:
   si no, las primeras pulsaciones de Tab enfocan enlaces invisibles */
.nav:focus-within{transform:translateY(0)}
.nav__mark{font-family:var(--display);font-size:17px;letter-spacing:.16em;white-space:nowrap;
  text-decoration:none;display:flex;align-items:center;min-height:44px;min-width:44px}
.nav__mark em{font-style:italic;color:var(--salvia-texto)}
.nav__links{display:none;gap:28px}
.nav__links a{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;color:var(--tinta-suave);
  display:flex;align-items:center;min-height:44px;
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s;
}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--salvia-texto);border-bottom-color:var(--salvia)}
.nav__links a.is-active{color:var(--salvia-texto);border-bottom-color:var(--piedra)}
.nav__actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav__cta{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--salvia);color:var(--salvia-texto);
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border-radius:999px;white-space:nowrap;transition:background .35s,color .35s;
}
.nav__cta:hover,.nav__cta:focus-visible{background:var(--salvia);color:var(--crema)}
.burger{width:44px;height:44px;display:grid;place-items:center;background:none;
  border:0;padding:0;cursor:pointer;color:var(--tinta)}
.burger i{display:block;width:20px;height:1px;background:currentColor;
  transition:transform .35s ease,opacity .35s ease}
.burger i+i{margin-top:6px}
@media (min-width:900px){
  .nav{display:grid;grid-template-columns:1fr auto 1fr;gap:20px}
  .nav__links{display:flex;justify-content:center}
  .nav__actions{margin-left:0;justify-self:end}
  .burger{display:none}
}

/* menú móvil a pantalla completa */
.menu{
  position:fixed;inset:0;z-index:70;background:var(--crema);
  /* align-content:safe center + overflow-y:auto — centrado cuando cabe, con scroll
     cuando no. Sin esto, en móvil apaisado los últimos enlaces quedan fuera de
     pantalla y son inalcanzables, porque el documento está bloqueado. */
  display:grid;justify-items:center;align-content:safe center;
  overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--nav-h) + 24px) max(var(--gut),env(safe-area-inset-right))
          max(40px,env(safe-area-inset-bottom)) max(var(--gut),env(safe-area-inset-left));
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s .5s;
}
.menu.is-open{opacity:1;visibility:visible;transform:none;
  transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s}
.menu__close{position:absolute;top:calc(8px + env(safe-area-inset-top));
  right:max(var(--gut),env(safe-area-inset-right));
  width:44px;height:44px;display:grid;place-items:center;background:none;border:0;
  padding:0;cursor:pointer;color:var(--tinta);font-family:var(--display);
  font-size:30px;line-height:1}
.menu__links{display:grid;gap:clamp(14px,3.4vh,26px);text-align:center;width:100%}
.menu__links a{
  font-family:var(--display);font-weight:300;font-size:clamp(30px,9vw,44px);
  line-height:1.1;text-decoration:none;color:var(--tinta);
  display:block;padding:6px 0;min-height:44px;transition:color .3s;
}
.js .menu__links a{opacity:0;transform:translateY(14px)}
.menu.is-open .menu__links a{opacity:1;transform:none;
  transition:opacity .5s ease calc(var(--i,0)*60ms + 80ms),
             transform .5s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*60ms + 80ms),color .3s}
.menu__links a.is-active,.menu__links a:hover,.menu__links a:focus-visible{color:var(--salvia)}
.menu__cta{margin-top:clamp(10px,2vh,20px);font-family:var(--util)!important;
  font-size:11px!important;letter-spacing:.28em;text-transform:uppercase;color:var(--salvia)!important}
.is-locked,.is-locked body{overflow:hidden}

/* --------------------------------------------------- hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(58px,11vh,104px) 0 clamp(22px,4.5vh,44px);overflow:hidden}
.hero__top{text-align:center;position:relative;z-index:3}
.hero__place{margin-bottom:10px}
.hero__stage{position:relative;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(6px,2.4vh,22px);
  margin:clamp(10px,2.5vh,30px) 0}

.hero__art{
  width:min(104%,560px);margin-inline:auto;
  transition:clip-path 2.4s cubic-bezier(.16,.8,.24,1),opacity 1.4s ease;
}
/* revelación: el dibujo emerge de abajo arriba, como si se trazara */
.js .hero__art{clip-path:inset(100% 0 0 0);opacity:0}
.hero.is-in .hero__art{clip-path:inset(0 0 0 0);opacity:1}
.hero__art img{width:100%;height:auto}

.hero__names{position:relative;z-index:2;width:100%;text-align:center;pointer-events:none;margin:0}
.hero__name{
  display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(56px,17vw,120px);line-height:.92;color:var(--tinta);
  transition:opacity 1.1s ease .5s,transform 1.1s cubic-bezier(.16,.8,.24,1) .5s;
}
.js .hero__name{opacity:0;transform:translateY(16px)}
/* escalonado en orden de lectura: Cinthia · & · Pablo */
.hero__amp{
  display:block;font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(20px,5.2vw,30px);color:var(--salvia-texto);line-height:1;margin:.1em 0;
  transition:opacity 1s ease .72s;
}
.js .hero__amp{opacity:0}
.hero__name--b{transition-delay:.95s}
.hero.is-in .hero__name,.hero.is-in .hero__amp{opacity:1;transform:none}

.hero__foot{position:relative;z-index:3;text-align:center;
  transition:opacity 1s ease 1.2s,transform 1s ease 1.2s}
.js .hero__foot{opacity:0;transform:translateY(10px)}
.hero.is-in .hero__foot{opacity:1;transform:none}
.hero__date{margin-bottom:14px}
.scroll-cue{display:inline-block;width:1px;height:44px;background:var(--piedra);position:relative;overflow:hidden}
.scroll-cue::after{content:"";position:absolute;inset:0;background:var(--salvia);
  animation:cue 2.6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* desktop: los nombres se alinean con las dos torres y el dibujo pasa por detrás.
   Los nombres reparten el ancho a partes iguales para que el ampersand caiga
   exactamente sobre el eje central, con nombres de distinta longitud. */
@media (min-width:900px){
  .hero__stage{display:flex;flex-direction:row;min-height:min(66vh,600px);min-height:min(66svh,600px);margin:0}
  .hero__art{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(70%,820px);margin:0}
  .hero__names{display:flex;align-items:center;max-width:1140px;margin:0 auto;
    padding-left:max(var(--gut),env(safe-area-inset-left));
    padding-right:max(var(--gut),env(safe-area-inset-right))}
  .hero__name{font-size:clamp(60px,7vw,100px);flex:1 1 0;min-width:0}
  .hero__name--a{text-align:left}
  .hero__name--b{text-align:right}
  /* halo crema: el ampersand se lee sobre el dibujo sin taparlo */
  .hero__amp{
    flex:0 0 auto;
    font-size:28px;margin:0;width:64px;height:64px;line-height:64px;border-radius:50%;
    background:radial-gradient(circle,var(--crema) 52%,rgba(241,234,221,0) 72%);
  }
}
@media (min-width:1240px){ .hero__art{width:min(64%,860px)} }

/* --------------------------------------------------- bloques */
.stack{display:grid;gap:clamp(26px,6vw,44px)}
.center{text-align:center}
/* El ancho de lectura se fija en el propio párrafo (#historia .lead, más
   abajo) con ch reales de SU fuente (Cormorant Garamond). Aquí no: este div
   hereda la fuente del body (Jost), y un ch calculado con esa fuente no
   corresponde al ancho real del texto que se ve en pantalla. */
.measure{margin-inline:auto}

/* 68ch ≈ objetivo de 65-70 caracteres por línea, medido en la tipografía
   real del párrafo (Cormorant Garamond, no la del body): antes el límite
   vivía en el div contenedor con la fuente equivocada y quedaba angosto.
   En móvil no hace nada (el ancho disponible ya es menor), así que no
   hace falta ninguna media query aparte. */
#historia .lead{max-width:68ch;margin-inline:auto}
.leaf-rule{display:flex;align-items:center;gap:16px;justify-content:center;color:var(--salvia)}
.leaf-rule::before,.leaf-rule::after{content:"";height:1px;flex:1;max-width:110px;background:var(--piedra)}
.leaf-rule svg{width:19px;height:19px;overflow:visible}
.leaf-rule path{fill:none;stroke:currentColor;stroke-width:1.25;
  stroke-dasharray:46;stroke-dashoffset:46;transition:stroke-dashoffset 1.4s ease}
.reveal.is-in .leaf-rule path{stroke-dashoffset:0}

/* el lugar */
.place{display:grid;gap:clamp(30px,6vw,56px);align-items:center}
.place__detail{position:relative;background:var(--marfil);border:1px solid rgba(201,183,156,.55);
  padding:clamp(14px,4vw,26px);overflow:hidden}
.place__photo{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.place__caption{margin-top:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--salvia-texto)}
@media (min-width:900px){
  .place{grid-template-columns:1.05fr .95fr;gap:clamp(48px,7vw,90px)}
  .place__text{padding-right:20px}
}

/* información del día — dos columnas simétricas: la metáfora de las torres */
.day{display:grid;gap:0;border-top:1px solid var(--piedra);border-bottom:1px solid var(--piedra)}
.day__col{padding:clamp(30px,7vw,54px) clamp(6px,3vw,34px);text-align:center;position:relative}
.day__col+.day__col{border-top:1px solid rgba(201,183,156,.55)}
.day__label{margin-bottom:16px}
.day__time{font-family:var(--display);font-size:clamp(32px,9vw,50px);font-weight:300;line-height:1;margin:0 0 12px}
.day__note{font-size:13px;letter-spacing:.05em;color:var(--tinta-suave);margin:0}
@media (min-width:720px){
  .day{grid-template-columns:repeat(3,1fr)}
  .day__col+.day__col{border-top:0;border-left:1px solid rgba(201,183,156,.55)}
}

/* galería editorial: espejo | anillo grande | puerto, siempre centrado y
   simétrico — nada de columnas descentradas ni huecos irregulares */
.gal{display:grid;gap:clamp(14px,3.5vw,26px);grid-template-columns:1fr;
  max-width:1100px;margin:0 auto}
.frame{position:relative;background:var(--marfil);border:1px solid rgba(201,183,156,.6);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.frame::after{content:attr(data-slot);position:absolute;bottom:11px;left:11px;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--salvia-texto)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame__hint{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--salvia-texto);
  text-align:center;padding:20px}
/* Tres fotos, no cuatro: espejo y puerto comparten proporción 3:4, y en
   escritorio también el mismo ancho de columna, así que renderizan como una
   caja idéntica. Anillo/manos es cuadrada de origen y ocupa el doble de
   ancho: la pieza grande y centrada del collage. */
.g2{aspect-ratio:3/4}
.g3{aspect-ratio:1/1}
.g4{aspect-ratio:3/4}
.gal__aside{padding:4px 0;text-align:center}
.pull{position:relative;padding-left:1.1em;display:inline-block;text-align:left}
.pull::before{content:"“";position:absolute;left:0;top:-.06em;
  font-family:var(--display);font-size:2.1em;line-height:1;color:var(--piedra)}
/* cierre a juego con la apertura: mismo tamaño, tipografia y color. En el
   flujo normal del texto (no absoluto) para que siga a la ultima palabra
   se rompa donde se rompa la linea, en vez de fijarse al borde del bloque. */
.pull::after{content:"”";font-family:var(--display);font-size:2.1em;line-height:0;
  color:var(--piedra);vertical-align:-.34em;margin-left:.03em}
@media (min-width:900px){
  /* una sola fila, tres columnas simétricas: laterales iguales (1fr) y el
     anillo/manos al doble de ancho (2fr) en el centro. Sin desplazamientos,
     sin columnas vacías: el propio grid-template-columns crea la simetría */
  .gal{grid-template-columns:1fr 2fr 1fr;align-items:center}
  /* la cita queda debajo de las tres fotos, centrada, como pie de foto del
     collage — no suelta en un hueco de columna */
  .gal__aside{grid-column:1/-1;margin-top:6px}
}

/* ubicación */
.map{position:relative;aspect-ratio:4/3;background:var(--marfil);
  border:1px solid rgba(201,183,156,.6);overflow:hidden}
@media (min-width:720px){.map{aspect-ratio:16/10}}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* El mapa no se carga hasta que se pide: mientras tanto se ve este marcador
   estático (cuadrícula + pin), con el aviso de privacidad y las dos opciones. */
.map__grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(201,183,156,.35) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(201,183,156,.35) 1px,transparent 1px);
  background-size:44px 44px}
.map__pin{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:20px;text-align:center}
.pin-dot{width:9px;height:9px;border-radius:50%;background:var(--salvia);margin:0 auto 12px;position:relative}
.pin-dot::after{content:"";position:absolute;inset:-11px;border:1px solid var(--salvia);
  border-radius:50%;opacity:.45}
.map__addr{font-family:var(--display);font-size:18px;line-height:1.3;margin:0 0 8px}
.map__notice{font-size:11.5px;line-height:1.5;color:var(--tinta-suave);max-width:27ch;margin:0 0 14px}
.map__load{font-family:var(--util);font-size:10px;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--salvia-texto);background:var(--crema);
  border:1px solid var(--salvia);border-radius:999px;
  display:inline-flex;align-items:center;min-height:44px;padding:0 22px;cursor:pointer;
  transition:background .35s,color .35s}
.map__load:hover,.map__load:focus-visible{background:var(--salvia);color:var(--crema)}
.map.is-loaded .map__grid,.map.is-loaded .map__pin{display:none}
.map__links{margin:14px 0 0;text-align:center}
.map__links a,.foot-links a,.legal-back{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--salvia-texto);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  border-bottom:1px solid transparent;transition:border-color .3s}
.map__links a:hover,.map__links a:focus-visible,
.foot-links a:hover,.foot-links a:focus-visible,
.legal-back:hover,.legal-back:focus-visible{border-bottom-color:var(--salvia)}
.info-grid{display:grid;gap:26px;margin-top:clamp(30px,6vw,46px)}
@media (min-width:720px){
  .info-grid{grid-template-columns:repeat(3,1fr);gap:34px}
  .info-grid--dia{grid-template-columns:repeat(2,1fr)}
  .info-grid--llegar .info-grid__wide{grid-column:1/-1}
}
.info-grid dt{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--salvia-texto);margin-bottom:9px}
.info-grid dd{margin:0;font-family:var(--display);font-size:19px;line-height:1.45}
.info-grid--llegar .info-grid__wide dd{line-height:1.9}
.lodging{display:inline-block;padding:12px 0 6px;color:var(--salvia-texto);text-decoration:none;
  border-bottom:1px solid var(--piedra);transition:border-color .3s,color .3s}
.lodging:hover,.lodging:focus-visible{color:var(--musgo);border-bottom-color:var(--salvia)}

/* RSVP */
.rsvp{background:var(--musgo);color:var(--crema);position:relative;overflow:hidden}
.rsvp .eyebrow{color:rgba(241,234,221,.78)}
.rsvp__inner{position:relative;z-index:2;text-align:center;max-width:640px;margin-inline:auto}
.rsvp__arch{width:clamp(120px,26vw,180px);margin:0 auto clamp(26px,5vw,40px)}
.rsvp__arch path{fill:none;stroke:rgba(241,234,221,.85);stroke-width:1.2;stroke-linecap:round;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 2s cubic-bezier(.3,.7,.3,1)}
.reveal.is-in .rsvp__arch path{stroke-dashoffset:0}
.rsvp .display{color:var(--crema)}
.rsvp__note{color:rgba(241,234,221,.82);font-size:clamp(14px,3.4vw,16px);line-height:1.8;margin:22px auto 0;max-width:42ch}
.btn{
  display:inline-block;margin-top:clamp(28px,5vw,40px);
  font-family:var(--util);font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;
  color:var(--musgo);background:var(--crema);text-decoration:none;
  padding:18px 40px;border:1px solid var(--crema);border-radius:999px;
  transition:background .4s,color .4s,transform .4s;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--crema);transform:translateY(-2px)}
.ph--dark{color:rgba(241,234,221,.88);border-bottom-color:rgba(241,234,221,.42)}
.rsvp__hint{margin:16px 0 0;font-size:12px;letter-spacing:.04em;color:rgba(241,234,221,.82)}
.rsvp__deadline{margin-top:18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(241,234,221,.72)}

/* petición de canciones — mismo patrón centrado que RSVP, pero en claro */
.songs__inner{max-width:520px;text-align:center}
.songs__note{margin:16px auto 0;max-width:44ch;color:var(--tinta-suave)}
.songs__form{margin-top:clamp(28px,5vw,40px);text-align:left;display:grid;gap:24px}
.songs__field{display:grid;gap:6px}
.songs__label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--salvia-texto)}
.songs__input{font-family:var(--display);font-size:19px;color:var(--tinta);
  background:transparent;border:0;border-bottom:1px solid var(--piedra);
  border-radius:0;padding:10px 2px;min-height:44px;width:100%;transition:border-color .3s}
.songs__input::placeholder{color:var(--tinta-suave);opacity:.55}
.songs__input:focus{outline:0;border-bottom-color:var(--salvia)}
.songs__submit{
  justify-self:center;margin-top:4px;
  font-family:var(--util);font-size:11px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;
  color:var(--salvia-texto);background:transparent;
  border:1px solid var(--salvia);border-radius:999px;
  min-height:48px;padding:0 40px;cursor:pointer;
  transition:background .35s,color .35s,transform .35s;
}
.songs__submit:hover,.songs__submit:focus-visible{background:var(--salvia);color:var(--crema);transform:translateY(-2px)}
.songs__submit:disabled{opacity:.5;cursor:not-allowed;transform:none;background:transparent;color:var(--salvia-texto)}
.songs__status{margin:2px 0 0;min-height:1.5em;font-size:13.5px;letter-spacing:.02em;color:var(--salvia-texto)}
.songs__status[data-tone="error"]{color:var(--error)}

/* cierre */
.outro{padding:var(--sec) 0 clamp(44px,8vw,72px);text-align:center;position:relative;overflow:hidden}
.outro__art{width:clamp(90px,20vw,132px);margin:0 auto clamp(28px,5vw,44px);opacity:.9}
.outro__art img{width:100%;height:auto}
.outro__names{font-family:var(--display);font-weight:300;font-size:clamp(38px,10vw,68px);
  line-height:1.06;margin:0}
.outro__amp{font-style:italic;color:var(--salvia)}
.outro__date{margin-top:20px}
.credit{margin-top:clamp(46px,8vw,72px);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tinta-suave)} /* sin opacity: rebajaba el contraste a 3.1:1 */
.foot-copy{margin:8px 0 0;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tinta-suave)}
.foot-links{margin:16px 0 0;display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
/* crédito del sitio: el texto más discreto del cierre, no compite con nada */
.site-credit{margin:28px 0 0;font-size:9px;color:var(--tinta-suave)}
.site-credit a{color:var(--salvia-texto);text-decoration:none;
  border-bottom:1px solid rgba(111,124,94,.35);transition:border-color .3s,color .3s}
.site-credit a:hover,.site-credit a:focus-visible{color:var(--musgo);border-bottom-color:var(--salvia)}

/* página de privacidad: mismo sistema visual, columna de lectura propia */
.legal{max-width:640px;margin-inline:auto}
.legal-nav{padding:20px max(var(--gut),env(safe-area-inset-right)) 0 max(var(--gut),env(safe-area-inset-left));
  padding-top:calc(20px + env(safe-area-inset-top))}
.legal-foot{padding:56px 0 clamp(40px,8vw,64px);text-align:center}

/* --------------------------------------------------- reveal */
.reveal{transition:opacity 1s cubic-bezier(.16,.8,.24,1),transform 1s cubic-bezier(.16,.8,.24,1)}
.js .reveal{opacity:0;transform:translateY(26px)}
.reveal.is-in{opacity:1;transform:none}

:focus-visible{outline:2px solid var(--salvia);outline-offset:4px}
/* sobre el verde musgo el anillo salvia solo daría 2.2:1, por debajo del 3:1 exigido */
.rsvp :focus-visible{outline-color:var(--crema)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important}
  /* con .js delante para igualar la especificidad de los estados iniciales
     y ganarles por orden: si no, el contenido se quedaría invisible */
  .js .reveal,.js .hero__name,.js .hero__amp,.js .hero__foot,.js .menu__links a,
  .reveal,.hero__name,.hero__amp,.hero__foot,.menu__links a{opacity:1;transform:none}
  .js .hero__art,.hero__art{clip-path:none;opacity:1}
  .leaf-rule path,.rsvp__arch path{stroke-dashoffset:0}
}