/* Javier y Natalia · 5 de diciembre de 2026
   Portado del HTML original. Los valores son los suyos, no interpretaciones. */

/* Recortadas al alfabeto que usa la web (latín + acentos españoles):
   de 899 KB a 27 KB la manuscrita, de 55 a 15 la de texto.
   woff2 primero; woff queda de reserva para navegadores viejos. */
@font-face{
  font-family:'Beyond Infinity';
  src:url('../assets/BeyondInfinity.woff2') format('woff2'),
      url('../assets/BeyondInfinity.woff') format('woff');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Baskerville SB';
  src:url('../assets/BaskervilleSemiBold.woff2') format('woff2'),
      url('../assets/BaskervilleSemiBold.woff') format('woff');
  font-weight:400; font-display:swap;
}

:root{
  --tinta:#922826;
  --tinta-oscura:#6E1D1B;
  --papel:#FBF6EE;
  --borde:rgba(146,40,38,.3);
  --linea:rgba(146,40,38,.28);
  --linea-tenue:rgba(146,40,38,.14);
  /* Ancho de columna, compartido por ermita, tarjetas, foto y formulario.
     Fijo en 550 se quedaba corto en pantallas grandes y dejaba 400px de
     margen muerto a cada lado; ahora crece con la ventana. El techo de 720
     está para que el párrafo en versalitas no haga líneas kilométricas. */
  --ancho-contenido:clamp(550px,40vw,720px);
  --calle:clamp(32px,4vw,72px);   /* separación entre las dos columnas */

  /* El bloque completo: dos columnas más la calle. El timeline de Momentos
     usa esta misma medida, así las tres secciones comparten bordes. */
  --ancho-bloque:calc(var(--ancho-contenido) * 2 + var(--calle));

  /* Aire entre secciones. Estaba repartido en siete valores distintos
     (130, 130, 106, 130, 110, 106, 130) heredados del HTML original.
     El mínimo es bajo a propósito: en móvil el aire se paga en scroll. */
  --aire:clamp(88px,11vw,200px);
  --manuscrita:'Beyond Infinity', cursive;
  --texto:'Baskerville SB', Georgia, serif;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}

html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--texto); overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--tinta);}
a:hover{color:var(--tinta-oscura);}
img{display:block;}
input,select,textarea,button{font-family:inherit; color:inherit;}
::placeholder{color:rgba(146,40,38,.35);}

/* El tracking ancho en versalitas deja un hueco a la derecha de la última
   letra; se compensa empujando el mismo valor por la izquierda. */

[data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity 1s ease var(--retardo,0s), transform 1s ease var(--retardo,0s);
}
[data-reveal].visible{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1; transform:none; transition:none;}
  /* Sin animación la tira quedaba congelada y con 38 fotos inalcanzables:
     si no se mueve sola, que se pueda deslizar con el dedo. */
  .tira__marco{overflow-x:auto; -webkit-overflow-scrolling:touch;}
}

/* ── Navegación ───────────────────────────────────────────── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  /* Fondo casi opaco en vez de desenfoque. Un backdrop-filter en barra fija
     obliga a recalcular el desenfoque en cada fotograma de scroll, y es de
     los peores culpables de scroll a tirones en iOS. La diferencia visual
     con .97 de opacidad es inapreciable. */
  background:rgba(251,246,238,.97);
  border-bottom:1px solid var(--linea-tenue);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:11px 12px 10px;
}
.nav__logo{font-family:var(--manuscrita); font-size:22px; line-height:1; text-decoration:none; flex:none;}
.nav__menu{flex:1 1 auto; display:flex; justify-content:center;}
.nav__links{display:flex; align-items:center; justify-content:center; gap:clamp(12px,3.6vw,32px);}

/* El botón de sección actual solo existe en móvil. */
.nav__actual{display:none;}
.nav__link{
  text-decoration:none; white-space:nowrap; font-size:clamp(8px,2.3vw,9.5px);
  letter-spacing:.24em; text-transform:uppercase; padding:4px 0 3px;
  border-bottom:1px solid transparent; opacity:.6;
  transition:opacity .3s ease, border-color .3s ease;
}
.nav__link:hover,.nav__link.activo{opacity:1;}
.nav__link.activo{border-bottom-color:var(--tinta);}
.nav__rsvp{
  flex:none; text-decoration:none; white-space:nowrap;
  font-size:clamp(8.5px,2.3vw,9.5px); letter-spacing:.2em; text-transform:uppercase;
  padding:7px 11px 6px; padding-left:calc(12px + .24em);
  border:1px solid rgba(146,40,38,.45); border-radius:999px;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.nav__rsvp:hover{background:var(--tinta); color:var(--papel); border-color:var(--tinta);}

/* ── Portada ──────────────────────────────────────────────── */
/* Sin ilustración: el nombre es la portada. Los bloques de arriba y abajo
   van con margin-top:auto para que el nombre quede ópticamente centrado. */

.portada{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:56px 26px 52px; gap:0;
}
.portada__sobre{
  margin:0 0 0; margin-top:auto;
  font-size:11px; letter-spacing:.42em; text-transform:uppercase; padding-left:.42em;
}
.portada__nombres{
  font-family:var(--manuscrita); font-weight:400;
  font-size:clamp(58px,16vw,290px); line-height:1;
  margin:22px 0 0; padding:0 clamp(6px,2.5vw,56px); text-wrap:balance;
}
.portada__datos{
  display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:auto;
}
.portada__fecha{margin:0; font-size:13px; letter-spacing:.34em; text-transform:uppercase; padding-left:.34em;}
.portada__lugar{margin:0; font-size:11px; letter-spacing:.34em; text-transform:uppercase; padding-left:.34em; opacity:.75;}
.raya{display:block; width:34px; height:1px; background:rgba(146,40,38,.4);}

/* ── La boda: ilustración + dos tarjetas ──────────────────── */
/* Fluido con flex-wrap, sin media query: por debajo de ~700px las dos
   mitades se apilan solas. */

/* Dos columnas: ilustración a la izquierda, tarjetas a la derecha. Dentro
   de esa columna las dos tarjetas se apilan en vertical y ocupan todo su
   ancho — subdividirla otra vez en dos las dejaba estrechísimas. */
.boda{
  scroll-margin-top:60px; padding:var(--aire) 26px 8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:40px; text-align:center;
}
.boda__ilustracion{display:flex; justify-content:center; width:100%;}
.boda__ilustracion img{width:100%; max-width:var(--ancho-contenido);}
.boda__columna{display:flex; flex-direction:column; align-items:center; width:100%;}

.tarjetas{display:flex; flex-direction:column; gap:26px; width:100%; max-width:var(--ancho-contenido);}
.tarjeta{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width:100%;
  border:1px solid var(--borde); border-radius:8px; padding:30px 20px 26px;
  transition:border-color .35s ease, background .35s ease,
             opacity 1s ease var(--retardo,0s), transform 1s ease var(--retardo,0s);
}
.tarjeta:hover{border-color:rgba(146,40,38,.7); background:rgba(146,40,38,.035);}
.tarjeta__rotulo{margin:0; font-size:10px; letter-spacing:.42em; text-transform:uppercase; padding-left:.42em; opacity:.6;}
.tarjeta__hora{margin:0; font-size:26px; letter-spacing:.16em; padding-left:.16em;}
.tarjeta__lugar{
  margin:0; font-size:12.5px; letter-spacing:.2em; text-transform:uppercase;
  line-height:2.1; padding-left:.2em;
}
.tarjeta__lugar span{opacity:.7;}
.tarjeta__boton{
  margin-top:auto; text-decoration:none; white-space:nowrap;
  border:1px solid rgba(146,40,38,.5); border-radius:999px;
  padding:14px 16px; padding-left:calc(16px + .16em);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  transition:background .35s ease, color .35s ease;
}
.tarjeta__boton:hover{background:var(--tinta); color:var(--papel);}

/* ── Títulos comunes ──────────────────────────────────────── */

.titulo{
  font-family:var(--manuscrita); font-weight:400;
  font-size:clamp(40px,12vw,62px); line-height:1; margin:0 0 34px; text-align:center;
}
.titulo--corto{font-size:clamp(38px,11vw,58px); line-height:1.05; margin-bottom:16px;}
.subtitulo{
  font-size:10px; letter-spacing:.34em; text-transform:uppercase; padding-left:.34em;
  opacity:.6; margin:0 0 44px; text-align:center;
}

/* ── Momentos ─────────────────────────────────────────────── */
/* Dos disposiciones. En móvil la vertical de siempre; desde 700px la
   horizontal del timeline impreso: iconos arriba, línea con marcas, horas
   debajo. Cuatro columnas en un móvil dejarían 78px por hito — "VICTORIA
   GARDEN" partido en cuatro líneas — así que ahí se queda en vertical. */

.momentos-seccion{
  scroll-margin-top:60px; padding:var(--aire) 26px 8px;
  display:flex; flex-direction:column; align-items:center;
}
.momentos-seccion .titulo{margin-bottom:12px;}

.momentos{position:relative; width:100%; max-width:var(--ancho-contenido); list-style:none; margin:0; padding:0;}
.momentos::before{
  content:''; position:absolute; left:31px; top:24px; bottom:24px;
  width:1px; background:var(--linea);
}
.momento{
  position:relative; display:grid; grid-template-columns:64px 1fr;
  gap:22px; align-items:center; padding:18px 0;
}
.momento__icono{
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px; background:var(--papel); border-radius:50%;
}
.momento__icono img{width:52px; height:52px; object-fit:contain;}
.momento__punto{display:none;}
.momento__texto{display:flex; flex-direction:column; gap:9px; padding-top:2px;}
.momento__hora{font-size:21px; letter-spacing:.16em; padding-left:.16em;}
.momento__hora small{font-size:.66em; letter-spacing:.12em;}
.momento__lugar{font-size:11px; letter-spacing:.2em; text-transform:uppercase; line-height:1.9; padding-left:.2em;}
.momento__ciudad{font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding-left:.2em; opacity:.6;}

@media (min-width:700px){
  .momentos{
    --alto-icono:clamp(72px,8.5vw,104px);
    --fila-marca:16px;
    max-width:var(--ancho-bloque);
    display:grid; grid-template-columns:repeat(4,1fr);
    gap:0 clamp(10px,2.4vw,28px);
    margin-top:12px;
  }

  /* La línea que cruza los cuatro hitos. Va justo en el centro de la fila
     de marcas, que tiene alto fijo: así no depende de cuánto ocupe el texto. */
  .momentos::before{
    left:0; right:0; width:auto; bottom:auto;
    top:calc(var(--alto-icono) + (var(--fila-marca) / 2));
    height:1px; background:var(--tinta); opacity:.9;
  }

  .momento{
    grid-template-columns:none;
    grid-template-rows:var(--alto-icono) var(--fila-marca) auto;
    justify-items:center; gap:0; padding:0; text-align:center;
  }

  .momento__icono{
    width:auto; height:var(--alto-icono); background:none; border-radius:0;
    align-items:flex-end;
  }
  /* Altura explícita: estos SVG solo traen viewBox, sin width/height, y con
     height:auto colapsan a cero. */
  .momento__icono img{
    height:calc(var(--alto-icono) - 8px);
    width:auto; max-width:100%; object-fit:contain;
  }

  .momento__punto{
    display:block; align-self:center;
    width:5px; height:5px; border-radius:50%; background:var(--tinta);
  }

  .momento__texto{gap:10px; padding-top:20px; align-items:center;}
  .momento__hora{font-size:clamp(17px,2vw,21px);}
  .momento__lugar{line-height:1.8; text-wrap:balance;}
  .momento__ciudad{opacity:.55;}
}

/* ── Doble columna: foto fija + formulario y regalo ───────── */
/* La foto (foto-20) es un retrato muy alto, ratio 0.667. Partida en dos
   columnas por debajo de 1024px cada mitad se queda en ~350px: la foto se
   come todo el alto y el formulario va estrangulado. Así que hasta el
   portátil va en una sola columna. */

.doble{scroll-margin-top:60px; margin-top:var(--aire); display:flex; flex-direction:column;}

/* Apilada, la foto necesita respirar antes del título que viene debajo.
   En escritorio este relleno lo anula la regla de foto fija. */
.doble__foto{padding:0 26px calc(var(--aire) * .6); display:flex; justify-content:center;}
.doble__foto img{
  width:100%; max-width:var(--ancho-contenido); height:auto;
  border-radius:8px;
}
.doble__columna{display:flex; flex-direction:column; justify-content:flex-start;}

@media (min-width:1024px){
  /* Mismo padding lateral que .boda: así las dos secciones comparten
     rejilla y los bordes de ermita/foto y tarjetas/formulario cuadran. */
  .doble{
    flex-direction:row; flex-wrap:nowrap; justify-content:center;
    align-items:flex-start; padding:0 26px; gap:0 var(--calle);
  }
  /* Reparto a partes iguales con tope: flex-wrap decide si envuelve mirando
     la BASE, no el ancho ya encogido, así que una base de 550px hacía que se
     apilaran a 1024 aunque cupieran de sobra. Base 0 y tope por max-width. */
  .doble__foto,
  .doble__columna{flex:1 1 0; min-width:0; max-width:var(--ancho-contenido);}

  /* La foto se queda fija mientras pasan el formulario y el regalo.
     Mismo corte que las dos columnas: fijarla apilada no tendría sentido. */
  .doble__foto[data-foto-fija]{
    position:sticky; top:13svh; align-self:flex-start;
    padding-top:0; padding-bottom:0;
  }
  /* Ancho fijo para que case con la ermita; la altura se limita a 74svh
     para que quepa en pantalla estando fija, recortando con cover. */
  .doble__foto[data-foto-fija] img{
    width:100%; max-width:var(--ancho-contenido);
    height:74svh; object-fit:cover; object-position:center;
  }
}

.bloque{padding:0 26px 20px; display:flex; flex-direction:column; align-items:center;}
.bloque--regalo{scroll-margin-top:60px; padding:var(--aire) 26px 24px; text-align:center;}

.limite{
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; padding-left:.28em;
  opacity:.7; text-align:center; line-height:2.2; margin:0 0 40px; max-width:340px;
}

/* ── Separador (solo hay uno en toda la página) ───────────── */

.separador{display:flex; align-items:center; justify-content:center; gap:26px; padding:calc(var(--aire) * .8) 40px 0;}
.separador img{height:38px; opacity:.9;}
.separador__linea{height:1px; flex:1; max-width:120px; background:var(--linea);}

/* ── Formulario ───────────────────────────────────────────── */

.formulario{width:100%; max-width:var(--ancho-contenido); display:flex; flex-direction:column; gap:34px;}
.campo{display:flex; flex-direction:column; gap:12px; border:0; margin:0; padding:0;}
.campo--grupo{gap:14px;}
.campo__etiqueta{font-size:10px; letter-spacing:.32em; text-transform:uppercase; padding-left:.32em; opacity:.65;}

.formulario input[type=text],
.formulario input[type=number],
.formulario textarea{
  background:transparent; border:0; border-bottom:1px solid rgba(146,40,38,.35);
  border-radius:0; padding:8px 2px 10px; font-size:15px; letter-spacing:.06em;
  outline:none; resize:none;
}
.formulario input:focus,.formulario textarea:focus{border-bottom-color:var(--tinta);}
.formulario input[type=number]{-moz-appearance:textfield;}
.formulario input[type=number]::-webkit-outer-spin-button,
.formulario input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}

.pildoras{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.pildora{
  background:transparent; color:var(--tinta);
  border:1px solid rgba(146,40,38,.35); border-radius:999px;
  padding:15px 10px; padding-left:calc(10px + .28em);
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.pildora.activa{background:var(--tinta); color:var(--papel); border-color:var(--tinta);}

.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.enviar{
  margin-top:6px; background:var(--tinta); color:var(--papel);
  border:1px solid var(--tinta); border-radius:999px;
  padding:18px 26px; padding-left:calc(26px + .3em);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  cursor:pointer; transition:opacity .3s ease;
}
.enviar:hover{opacity:.82;}
.enviar[disabled]{opacity:.5; cursor:progress;}

.aviso{font-size:11px; letter-spacing:.14em; line-height:1.9; text-align:center; margin:0; opacity:.85;}

.gracias{
  display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;
  border:1px solid var(--borde); border-radius:4px; padding:48px 28px;
  width:100%; max-width:var(--ancho-contenido);
}
.gracias img{height:44px;}
.gracias__titulo{font-family:var(--manuscrita); font-size:38px; line-height:1; margin:0;}
.gracias__texto{font-size:11px; letter-spacing:.24em; text-transform:uppercase; line-height:2.2; padding-left:.24em; margin:0;}

/* ── Regalo / IBAN ────────────────────────────────────────── */

/* Ahora son tres párrafos: entre ellos va menos aire que hasta el IBAN,
   y con line-height 2.5 el texto ya respira de por sí. */
.parrafo + .parrafo{margin-top:-14px;}
.parrafo{
  max-width:var(--ancho-contenido); margin:0 0 36px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  line-height:2.5; padding-left:.16em; text-wrap:pretty;
}
.iban{
  display:flex; flex-direction:column; align-items:center; gap:20px;
  border:1px solid var(--borde); border-radius:4px; padding:32px 22px;
  width:100%; max-width:var(--ancho-contenido);
}
.iban__rotulo{margin:0; font-size:9.5px; letter-spacing:.42em; text-transform:uppercase; padding-left:.42em; opacity:.6;}
.iban__fila{display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;}
.iban__numero{font-size:clamp(14px,4.4vw,17px); letter-spacing:.1em;}
.iban__boton{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none;
  background:transparent; color:var(--tinta);
  border:1px solid rgba(146,40,38,.45); border-radius:8px; cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.iban__boton:hover{background:var(--tinta); color:var(--papel); border-color:var(--tinta);}
.iban__boton .icono-check{display:none;}
.iban__boton.copiado{background:var(--tinta); color:var(--papel); border-color:var(--tinta);}
.iban__boton.copiado .icono-copiar{display:none;}
.iban__boton.copiado .icono-check{display:block;}

/* ── Tira de fotos ────────────────────────────────────────── */

.tira{padding:var(--aire) 0 0; display:flex; flex-direction:column; align-items:center; overflow:hidden;}
.tira__cabecera{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  align-self:stretch; padding-bottom:12px; margin:0 26px 26px;
  border-bottom:1px solid rgba(146,40,38,.22);
  font-size:10px; letter-spacing:.34em; text-transform:uppercase; padding-left:.34em;
}
.tira__cabecera .tenue{letter-spacing:.24em; padding-left:.24em; opacity:.65; text-align:right;}
.tira__marco{width:100%; overflow:hidden;}
/* Capa de arrastre: solo se mueve cuando el dedo la mueve. */
.tira__cinta{
  width:max-content;
  transform:translate3d(var(--arrastre,0px),0,0);
  /* pan-y deja pasar el scroll vertical de la página; el horizontal es nuestro. */
  touch-action:pan-y;
  cursor:grab;
  user-select:none; -webkit-user-select:none;
}
.tira__cinta.arrastrando{cursor:grabbing;}

/* Capa de animación. La lleva el CSS, no JavaScript: corre en el compositor,
   no depende de temporizadores ni de detectar si la sección se ve, y sigue
   funcionando con la pestaña en segundo plano. */
.tira__carril{
  display:flex; align-items:flex-start; gap:12px; width:max-content;
  animation:desfile 90s linear infinite;
}
.tira__cinta.arrastrando .tira__carril{animation-play-state:paused;}
@keyframes desfile{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-50%,0,0);}
}
.tira__carril img{-webkit-user-drag:none; user-select:none; pointer-events:none;}
.tira__marco{cursor:grab;}
/* El carril mide 7000px: sin aislarlo, cada fotograma de su animación
   invita al navegador a revisar el resto de la página. */
.tira{contain:layout paint;}
/* Todas al mismo tamaño. Las originales mezclan verticales (13), cuadradas
   (6) y una apaisada, y eso dejaba la tira dentada por abajo. 3:4 es el
   punto medio: recorta poco a las verticales y no destroza las cuadradas.
   object-position algo por encima del centro porque en los retratos las
   caras caen en la mitad superior. */
.tira__carril img{
  width:clamp(176px,47vw,272px);
  aspect-ratio:3 / 4;
  height:auto;
  object-fit:cover;
  object-position:center 42%;
  flex:none; border-radius:8px;
}

/* ── Cierre: la mesa va a sangre, de borde a borde ────────── */

.cierre{
  padding:var(--aire) 0 0;
  display:flex; flex-direction:column; align-items:center; text-align:center; overflow:hidden;
}
.cierre__sobre{
  margin:0 26px; font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  padding-left:.42em; opacity:.65;
}
.cierre__frase{
  font-family:var(--manuscrita); font-size:clamp(32px,9.2vw,48px);
  line-height:1.25; margin:18px 26px 10px; max-width:440px;
}
.cierre__firma{
  margin:6px 26px 0; font-size:10.5px; letter-spacing:.34em; text-transform:uppercase;
  padding-left:.34em; opacity:.75;
}
/* El solape de la ilustración con el texto funciona en pantallas anchas,
   donde hay sitio de sobra. En móvil se comía la firma, así que ahí va
   separada y el solape entra a partir de 700px. */
.cierre__mesa{width:100%; margin-top:32px;}
@media (min-width:700px){
  .cierre__mesa{margin-top:-9%;}
}


/* ── Alineación de las dos secciones ──────────────────────── */
/* Va al final a propósito: .bloque y .bloque--regalo se declaran más abajo
   que la media query de .doble y, con la misma especificidad, ganaban por
   orden de aparición. */

@media (min-width:1024px){
  .boda{
    flex-direction:row; flex-wrap:nowrap; justify-content:center;
    align-items:center; gap:40px var(--calle);
  }
  .boda__ilustracion,
  .boda__columna{flex:1 1 0; min-width:0; max-width:var(--ancho-contenido);}

  .doble__foto{padding-left:0; padding-right:0;}
  .bloque,
  .bloque--regalo{padding-left:0; padding-right:0;}
}


/* ── Navegación en móvil: una sección, desplegable ────────── */
/* Los tres enlaces caben a 375px, pero apretados y con la zona de toque
   pequeñísima. Mejor mostrar dónde estás y abrir las tres al pulsar. */

@media (max-width:699px){
  .nav{position:fixed;}
  .nav__inner{position:relative;}

  /* Centrado contra la ventana, no contra el hueco entre logo y RSVP:
     esos dos miden distinto (29 y 57px), así que el centro del hueco cae
     14px a la izquierda del centro real y no cuadraba con el desplegable. */
  /* Relleno vertical simétrico: con 6px arriba y 5px abajo el texto caía
     medio píxel por debajo del logo y del RSVP. */
  .nav__inner{padding-top:11px; padding-bottom:11px;}

  .nav__actual{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    display:block;
    background:transparent; color:var(--tinta); border:0;
    padding:6px 10px; padding-left:calc(10px + .24em);
    font-family:inherit; font-size:9.5px; letter-spacing:.24em;
    text-transform:uppercase; cursor:pointer;
  }

  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--papel);
    border-bottom:1px solid var(--linea-tenue);
    /* Oculto sin display:none para que la transición pueda animarse. */
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav__menu.abierto .nav__links{opacity:1; visibility:visible; transform:none;}

  .nav__link{
    padding:15px 26px; padding-left:calc(26px + .24em);
    border-bottom:0; opacity:.75; font-size:10px;
    text-align:center;
  }
  .nav__link + .nav__link{border-top:1px solid rgba(146,40,38,.10);}
  .nav__link.activo{opacity:1; border-bottom:0; background:rgba(146,40,38,.045);}
}


/* ── Rendimiento ──────────────────────────────────────────── */
/* Solo el cierre. La tira lo llevaba y fue justo lo que rompió el carrusel:
   saltarse el render de la sección dejaba a sus hijos sin caja, y todo lo que
   dependía de medirlos dejaba de funcionar. */

/* Momentos se queda fuera a propósito: es corta, cae justo tras el pliegue
   y saltársela no ahorra nada apreciable. Las otras dos llevan su altura
   real medida, no una estimación, para que la barra de scroll no salte. */
.cierre{
  content-visibility:auto;
  contain-intrinsic-size:auto 919px;
}


/* ── Visor de fotos ───────────────────────────────────────── */

.visor{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(4px,2vw,20px); padding:clamp(12px,3vw,40px);
  background:rgba(40,12,12,.93);
  opacity:0; transition:opacity .25s ease;
}
.visor.abierto{opacity:1;}

.visor__marco{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:min(100%,900px); min-width:0;
}
.visor__marco img{
  max-width:100%; max-height:78svh; width:auto; height:auto;
  border-radius:8px; background:rgba(255,255,255,.06);
}
.visor__pie{
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  padding-left:.3em; color:rgba(251,246,238,.65);
}

.visor__cerrar,
.visor__paso{
  flex:none; display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--papel); cursor:pointer;
  border:1px solid rgba(251,246,238,.3); border-radius:50%;
  width:44px; height:44px;
  transition:background .25s ease, border-color .25s ease;
}
.visor__cerrar:hover,
.visor__paso:hover{background:rgba(251,246,238,.14); border-color:rgba(251,246,238,.55);}
.visor__cerrar{position:absolute; top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px);}

/* En móvil las flechas estorban sobre la foto: abajo y sin superponerse. */
@media (max-width:699px){
  .visor{flex-wrap:wrap; align-content:center;}
  .visor__marco{order:1; flex:1 0 100%;}
  .visor__paso{order:2; margin-top:18px;}
  .visor__paso--antes{margin-right:10px;}
  .visor__paso--despues{margin-left:10px;}
  .visor__marco img{max-height:66svh;}
}

@media (prefers-reduced-motion:reduce){
  .visor{transition:none;}
}