/* ==========================================================================
   Invitación · Jazmín & Víctor · 15 · 01 · 2027
   Paleta, tipografías y medidas viven acá arriba. Cambiar acá cambia todo.
   ========================================================================== */

:root{
  /* Color -------------------------------------------------------------- */
  --olivo:          #4A5533;   /* protagonista */
  --olivo-hondo:    #2F3720;   /* fondos oscuros */
  --olivo-claro:    #7C8759;   /* líneas, iconos, detalles */
  --salvia:         #C3C9B0;   /* texto secundario sobre fondo oscuro */
  --marfil:         #F5F1E6;   /* fondo cálido */
  --blanco:         #FCFAF4;   /* fondo claro alterno */
  --nieve:          #F7F5F0;   /* fondo del sobre */
  --tinta:          #26281F;   /* texto principal */
  --tinta-suave:    #565A4B;   /* texto secundario */
  --alerta:         #8C4A38;   /* errores de formulario */

  /* Dorado del sello de lacre */
  --dorado:         #C4A461;
  --dorado-claro:   #E8D5A3;
  --dorado-hondo:   #8F7130;

  /* Tipografía --------------------------------------------------------- */
  --display: 'Bodoni Moda', 'Times New Roman', serif;
  --monograma: 'Cormorant Garamond', 'Times New Roman', serif;
  /* Great Vibes: trazo más abierto y ancho que Pinyon, se lee mejor en celular */
  --manuscrita: 'Great Vibes', 'Snell Roundhand', cursive;
  --texto: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Ritmo -------------------------------------------------------------- */
  --aire: clamp(4.5rem, 11vw, 8.5rem);   /* separación vertical entre secciones */
  --ancho: 68rem;
  --borde: 1px solid color-mix(in srgb, var(--olivo) 22%, transparent);
}

*,*::before,*::after{ box-sizing:border-box }

/* [hidden] tiene que ganarle a los display: grid/flex de más abajo */
[hidden]{ display:none !important }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--marfil);
  color:var(--tinta);
  font-family:var(--texto);
  font-weight:300;
  font-size:clamp(1rem, .96rem + .3vw, 1.075rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.sobre-cerrado{ overflow:hidden; height:100dvh }

img{ display:block; max-width:100% }

:focus-visible{
  outline:2px solid var(--olivo-claro);
  outline-offset:3px;
  border-radius:2px;
}

/* El "&" nunca va en manuscrita: dentro de una script se confunde con una
   letra más. Va en Cormorant recta —no cursiva: la cursiva de esta familia
   dibuja un "&" con voluta, que era justo el que no se entendía. */
.portada__nombres em,
.cierre__nombres em,
.sobre__tarjeta-nombres em{
  font-family:var(--monograma);
  font-style:normal;
  font-weight:400;
}


/* ==========================================================================
   Acuarelas de hojas
   Se posicionan por sección; el color lo pone cada una.
   ========================================================================== */

.hoja,
.sobre__hoja{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:0;
}


/* ==========================================================================
   0 · EL SOBRE
   ========================================================================== */

.sobre{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:5vh 1.25rem calc(5vh + env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 90% at 50% 40%, #FFFFFF 0%, var(--nieve) 55%, #EFEBE2 100%);
  transition:opacity .7s ease, visibility .7s;
}

.sobre.se-fue{ opacity:0; visibility:hidden; pointer-events:none }

/* acuarelas verdes del fondo */
.sobre__hoja{ color:var(--olivo-claro) }
.sobre__hoja--a{
  width:min(46vw, 17rem); top:-4%; left:-9%;
  transform:rotate(18deg); opacity:.5;
}
.sobre__hoja--b{
  width:min(42vw, 15rem); bottom:-6%; right:-8%;
  transform:rotate(-162deg); opacity:.42;
}
.sobre__hoja--c{
  width:min(38vw, 13rem); top:8%; right:-4%;
  transform:rotate(24deg); opacity:.34;
}

.sobre__marco{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1.5rem, 4.5vh, 2.5rem);
  width:100%;
  max-width:30rem;
}

/* Las dos líneas del sobre comparten tamaño, peso y color: son un par. */
.sobre__antesala,
.sobre__pista{
  margin:0;
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.4em;
  text-indent:.4em;            /* compensa el espaciado de la última letra */
  text-transform:uppercase;
  color:var(--olivo-hondo);
  transition:opacity .35s ease;
}

.sobre__antesala{ opacity:.95 }
.sello-abierto .sobre__antesala{ opacity:0 }

/* --- la pieza: es el botón que abre --------------------------------------- */
.sobre__pieza{
  position:relative;
  display:block;
  width:min(100%, 26rem);
  aspect-ratio:1.5 / 1;
  padding:0;
  border:0;
  background:transparent;
  perspective:1400px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.sobre__pieza:hover{ transform:translateY(-4px) }
.sobre__pieza:active{ transform:translateY(-1px) }
.sello-abierto .sobre__pieza{ cursor:default }

.sobre__cuerpo{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}

/* frente del sobre (olivo), tapa la tarjeta al salir */
.sobre__frente{
  position:absolute;
  inset:0;
  z-index:3;
  background:linear-gradient(168deg, #5D6B41 0%, #4E5A35 55%, #414C2C 100%);
  border-radius:3px;
  box-shadow:0 26px 60px -20px rgba(52,62,32,.5);
}
/* pliegues laterales, apenas visibles */
.sobre__frente::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:3px;
  background:
    linear-gradient(to right,  rgba(0,0,0,.07) 0 1px, transparent 1px) 0 0/50.5% 100% no-repeat,
    linear-gradient(to left,   rgba(0,0,0,.07) 0 1px, transparent 1px) 100% 0/50.5% 100% no-repeat;
  clip-path:polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
}

/* solapa superior que se abre */
.sobre__solapa{
  position:absolute;
  top:0; left:0; right:0;
  height:66%;
  z-index:4;
  overflow:hidden;
  background:linear-gradient(172deg, #6A784C 0%, #58663A 60%, #4A5730 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform .85s cubic-bezier(.66,.02,.28,1), z-index 0s .42s;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.3);
}
.sello-abierto .sobre__solapa{
  transform:rotateX(-172deg);
  z-index:1;
}

/* hojas impresas en la solapa */
.sobre__solapa-hojas{
  position:absolute;
  top:6%; left:50%;
  width:64%;
  transform:translateX(-50%);
  color:#DDE3CB;
  opacity:.55;
}

/* sello de lacre dorado */
.sobre__sello{
  position:absolute;
  top:56%; left:50%;
  z-index:6;
  width:clamp(4rem, 18%, 5rem);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  /* borde irregular: el lacre nunca queda redondo perfecto */
  border-radius:47% 53% 51% 49% / 50% 48% 52% 50%;
  background:
    radial-gradient(68% 68% at 34% 28%, var(--dorado-claro) 0%, var(--dorado) 46%, var(--dorado-hondo) 100%);
  box-shadow:
    0 5px 14px -3px rgba(70,55,15,.5),
    inset 0 1px 2px rgba(255,255,255,.55),
    inset 0 -3px 7px rgba(90,70,20,.45);
  transition:opacity .3s ease .05s, transform .5s cubic-bezier(.5,-0.4,.6,1);
}
/* anillo interior grabado */
.sobre__sello::after{
  content:'';
  position:absolute;
  inset:11%;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.28);
}
.sello-abierto .sobre__sello{
  opacity:0;
  transform:translate(-50%,-50%) scale(.62) rotate(-14deg);
}

.sobre__sello-monograma{
  position:relative;
  z-index:1;
  font-family:var(--monograma);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.4rem, 6vw, 1.75rem);
  line-height:1;
  letter-spacing:.02em;
  color:#5C4A18;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.sobre__sello-monograma em{ font-style:italic; opacity:.65; font-size:.78em; padding:0 .04em }

/* tarjeta que emerge */
.sobre__tarjeta{
  position:absolute;
  left:8%; right:8%;
  top:12%;
  z-index:2;
  padding:1.25rem 1rem 1.6rem;
  text-align:center;
  background:linear-gradient(180deg, #FEFDF9 0%, #F7F3E8 100%);
  border-radius:2px;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.4);
  transform:translateY(14%);
  opacity:0;
  transition:transform .95s cubic-bezier(.2,.7,.2,1) .3s, opacity .4s ease .3s;
}
.sello-abierto .sobre__tarjeta{
  transform:translateY(-42%);
  opacity:1;
}

.sobre__tarjeta-eyebrow{
  margin:0 0 .5rem;
  font-size:.6rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--olivo-claro);
}
.sobre__tarjeta-nombres{
  margin:0;
  font-family:var(--manuscrita);
  font-size:clamp(1.6rem, 7vw, 2.1rem);
  line-height:1.15;
  color:var(--olivo);
}
.sobre__tarjeta-nombres em{ font-size:.72em; opacity:.7; padding:0 .06em }
.sobre__tarjeta-fecha{
  margin:.5rem 0 0;
  font-size:.66rem;
  letter-spacing:.34em;
  color:var(--tinta-suave);
}

.sobre__pista{
  animation:latir 2.8s ease-in-out infinite;
}
.sello-abierto .sobre__pista{ opacity:0; animation:none }

@keyframes latir{
  0%,100%{ opacity:.6 }
  50%    { opacity:1 }
}


/* ==========================================================================
   1 · PORTADA
   ========================================================================== */

.invitacion{ opacity:0; transition:opacity .9s ease }
.invitacion.a-la-vista{ opacity:1 }

.portada{
  position:relative;
  min-height:100dvh;
  display:grid;
  /* el contenido va abajo: así la foto de los novios queda despejada arriba */
  place-items:end center;
  overflow:hidden;
  background:var(--olivo-hondo);
  padding:calc(env(safe-area-inset-top) + 3rem) 1.5rem clamp(7rem, 18vh, 9rem);
}

.portada__foto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 28%;
}

.portada__velo{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(26,31,17,.55) 0%,
    rgba(26,31,17,.16) 24%,
    rgba(26,31,17,.34) 46%,
    rgba(26,31,17,.74) 72%,
    rgba(26,31,17,.93) 100%);
}

.portada__contenido{
  position:relative;
  text-align:center;
  color:var(--blanco);
  max-width:44rem;
}

/* Va anclado arriba del todo, por encima de las caras de la foto: en pantallas
   cortas el bloque de abajo llegaba a taparlas. */
.portada__anuncio{
  position:absolute;
  top:calc(env(safe-area-inset-top) + clamp(4rem, 10vh, 5.5rem));
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  margin:0;
  width:max-content;
  max-width:calc(100% - 2rem);
  font-size:clamp(.72rem, 3vw, .85rem);
  font-weight:500;
  letter-spacing:.58em;
  text-indent:.58em;
  text-transform:uppercase;
  white-space:nowrap;
  color:#F4F2E9;
  text-shadow:0 2px 14px rgba(0,0,0,.6), 0 0 30px rgba(0,0,0,.35);
}

/* Los nombres se apilan en el celular y se ponen en una línea en pantallas
   anchas. Así el "&" nunca queda huérfano al final de una línea. */
.portada__nombres{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family:var(--manuscrita);
  font-weight:400;
  font-size:clamp(3rem, 13.5vw, 6.25rem);
  line-height:1.05;
  letter-spacing:.01em;
  text-shadow:0 4px 30px rgba(0,0,0,.5);
}
.portada__nombres em{
  font-size:.5em;
  line-height:1;
  opacity:.8;
  margin:.1em 0;
}
@media (min-width:44rem){
  .portada__nombres{ flex-direction:row; gap:.1em; align-items:baseline }
  .portada__nombres em{ font-size:.46em; margin:0 }
}

.portada__filete{
  display:block;
  width:8.5rem;
  height:2.6rem;
  margin:1.4rem auto 1.6rem;
  color:#E9E7DC;
  opacity:.8;
}

.portada__frase{
  margin:0 auto;
  max-width:26rem;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.05rem, 3.9vw, 1.3rem);
  line-height:1.65;
  color:#F2F0E6;
  text-shadow:0 2px 16px rgba(0,0,0,.45);
}

.portada__desliza{
  position:absolute;
  bottom:calc(1.75rem + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:#E4E2D6;
  font-size:.58rem;
  letter-spacing:.4em;
  text-transform:uppercase;
}
.portada__desliza i{
  display:block;
  width:1px;
  height:2.6rem;
  background:linear-gradient(#E4E2D6, transparent);
  animation:respirar 2.6s ease-in-out infinite;
}
@keyframes respirar{
  0%,100%{ opacity:.35; transform:scaleY(.7); transform-origin:top }
  50%    { opacity:1;   transform:scaleY(1);  transform-origin:top }
}


/* ==========================================================================
   Piezas compartidas
   ========================================================================== */

.seccion{
  position:relative;
  overflow:hidden;
  padding:var(--aire) 1.5rem;
}

.contenedor{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  text-align:center;
}
.contenedor--angosto{ max-width:38rem }

/* Los rótulos de sección ("La cita", "Dress code", "Regalos", "Confirmación
   de asistencia") son un solo sistema: mismo tamaño, mismo peso, mismo color.
   El interletrado baja a .3em para que el más largo entre en una línea en
   celular. */
.eyebrow{
  margin:0 0 1rem;
  font-size:clamp(.7rem, 2.5vw, .78rem);
  font-weight:500;
  line-height:1.5;
  letter-spacing:.26em;
  text-indent:.26em;
  text-transform:uppercase;
  color:var(--olivo);
}
.eyebrow--claro{ color:#E6EBD6 }

.titulo{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem, 7.5vw, 3.1rem);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--olivo);
}
.titulo--claro{ color:var(--blanco) }

.divisor{
  display:block;
  width:7rem;
  height:2.2rem;
  margin:1.5rem auto 2rem;
  color:var(--olivo-claro);
}
.divisor--claro{ color:var(--salvia); opacity:.8 }

.parrafo{
  margin:0 auto 1.1rem;
  max-width:34rem;
  color:var(--tinta-suave);
}
.parrafo--claro{ color:#DDE0D0 }
.parrafo:last-child{ margin-bottom:0 }
/* Jost sólo viene en 300/400/500: un <strong> normal (700) lo engordaría el
   navegador a la fuerza y se ve sucio. Se destaca con el 500 y el olivo. */
.parrafo strong{ font-weight:500; color:var(--olivo) }

/* botones */
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:1rem 2.3rem;
  border:1px solid var(--olivo);
  border-radius:2px;
  background:transparent;
  color:var(--olivo);
  font-family:var(--texto);
  font-weight:400;
  font-size:.76rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  transition:background .3s ease, color .3s ease, transform .2s ease;
}
.boton:hover,
.boton:focus-visible{ background:var(--olivo); color:var(--marfil) }
.boton:active{ transform:translateY(1px) }

.boton--pleno{
  width:100%;
  background:var(--olivo);
  color:var(--marfil);
}
.boton--pleno:hover,
.boton--pleno:focus-visible{ background:var(--olivo-hondo); color:var(--marfil) }
.boton--pleno[disabled]{ opacity:.6; cursor:progress }

.boton--suave{ border-color:color-mix(in srgb, var(--olivo) 40%, transparent) }

/* dos líneas fijas: cada mitad de la frase se mantiene entera */
.boton--dos-lineas{
  flex-direction:column;
  gap:.3rem;
  line-height:1.2;
  padding-block:.85rem;
}
.boton--dos-lineas span{ white-space:nowrap }

/* --- aparición al hacer scroll -------------------------------------------
   Los bloques que tienen piezas adentro (título, filete, párrafos, tarjetas)
   no se mueven ellos: reparten la entrada entre sus piezas, una detrás de
   otra. El escalonado es corto a propósito, para que se note el movimiento y
   no la espera. Los que no tienen piezas —el carrusel— entran de una. */
.revelar{
  opacity:0;
  transform:translateY(1.75rem);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.revelar.visible{ opacity:1; transform:none }

.revelar--piezas{ opacity:1; transform:none; transition:none }

.pieza{
  opacity:0;
  transform:translateY(1.4rem);
  transition:opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1);
}
.pieza.entra{ opacity:1; transform:none }


/* ==========================================================================
   2 · VERSÍCULO
   ========================================================================== */

.seccion--versiculo{
  background:var(--blanco);
  padding-top:calc(var(--aire) * 1.25);
  padding-bottom:calc(var(--aire) * 1.25);
}

.hoja--vers-a{
  color:var(--olivo-claro);
  width:min(40vw, 14rem);
  top:-3%; left:-8%;
  transform:rotate(14deg);
  opacity:.5;
}
.hoja--vers-b{
  color:var(--olivo-claro);
  width:min(38vw, 13rem);
  bottom:-4%; right:-7%;
  transform:rotate(-166deg);
  opacity:.44;
}

.versiculo{
  margin:0;
  position:relative;
  padding:0 clamp(0rem, 4vw, 2rem);
}
.versiculo::before,
.versiculo::after{
  content:'';
  display:block;
  width:1px;
  height:3.5rem;
  margin:0 auto;
  background:linear-gradient(var(--olivo-claro), transparent);
  opacity:.6;
}
.versiculo::after{ background:linear-gradient(transparent, var(--olivo-claro)) }

.versiculo p{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.3rem, 5vw, 1.95rem);
  line-height:1.6;
  color:var(--olivo-hondo);
  margin:2.5rem 0;
}
.versiculo cite{
  display:block;
  margin-bottom:2.5rem;
  font-style:normal;
  font-size:.7rem;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--olivo);
}


/* ==========================================================================
   3 · LA CITA
   ========================================================================== */

.seccion--cita{ background:var(--marfil) }

.cita{
  display:grid;
  gap:clamp(2.25rem, 6vw, 3.5rem);
  align-items:center;
  text-align:center;
}
@media (min-width:56rem){
  .cita{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); text-align:left }
}

/* foto recortada en arco */
.cita__arco{
  position:relative;
  width:min(78vw, 24rem);
  margin-inline:auto;
  aspect-ratio:3 / 4;
}
@media (min-width:56rem){
  .cita__arco{ width:min(100%, 30rem); margin-inline:auto 0 }
}
.cita__arco img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* arco de catedral: semicírculo arriba, esquinas rectas abajo */
  border-radius:50% 50% 6px 6px / 38% 38% 2% 2%;
}
/* filete que repite el arco, corrido en diagonal */
.cita__arco::before{
  content:'';
  position:absolute;
  inset:-.85rem -.85rem .85rem .85rem;
  border:1px solid color-mix(in srgb, var(--olivo) 32%, transparent);
  border-radius:50% 50% 6px 6px / 38% 38% 2% 2%;
  pointer-events:none;
}

.cita__datos .eyebrow{ margin-bottom:.75rem }
.divisor--izq{ margin-left:auto; margin-right:auto }
@media (min-width:56rem){
  .divisor--izq{ margin-left:0 }
}

.cita__lista{ margin:0 0 2.25rem }
.cita__lista div{
  padding:.95rem 0;
  border-bottom:1px dashed color-mix(in srgb, var(--olivo) 20%, transparent);
}
.cita__lista div:first-child{ border-top:1px dashed color-mix(in srgb, var(--olivo) 20%, transparent) }
.cita__lista dt{
  font-size:.58rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--olivo-claro);
  margin-bottom:.2rem;
}
.cita__lista dd{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.1rem, 4.2vw, 1.4rem);
  line-height:1.3;
  color:var(--tinta);
}

.cuenta{ margin-top:clamp(3rem, 8vw, 4.5rem) }
.cuenta__titulo{
  margin:0 0 1.25rem;
  font-size:.62rem;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:var(--olivo-claro);
  text-align:center;
}
.cuenta__lista{
  list-style:none;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.5rem;
  max-width:26rem;
}
.cuenta__lista li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  padding:1.2rem .35rem;
  border:var(--borde);
  border-radius:2px;
  background:color-mix(in srgb, var(--blanco) 75%, transparent);
}
.cuenta__lista b{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.7rem, 7vw, 2.25rem);
  line-height:1;
  color:var(--olivo);
  font-variant-numeric:tabular-nums;
}
.cuenta__lista span{
  font-size:.55rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tinta-suave);
}


/* ==========================================================================
   4 · UNA INVITACIÓN ESPECIAL + DRESS CODE
   ========================================================================== */

.seccion--especial{
  background:
    radial-gradient(110% 75% at 50% 0%, #414C2C 0%, var(--olivo-hondo) 68%, #232A17 100%);
  color:var(--blanco);
}

/* acuarelas blancas */
.hoja--esp-a,
.hoja--esp-b,
.hoja--esp-c{ color:#FFFFFF }
.hoja--esp-a{ width:min(42vw, 15rem); top:-4%; left:-8%; transform:rotate(16deg); opacity:.16 }
.hoja--esp-b{ width:min(40vw, 14rem); bottom:-5%; right:-7%; transform:rotate(-164deg); opacity:.14 }
.hoja--esp-c{ width:min(36vw, 12rem); top:38%; right:-6%; transform:rotate(20deg); opacity:.1 }

.dress{
  margin-top:clamp(3rem, 9vw, 4.5rem);
  padding-top:clamp(2.5rem, 8vw, 3.5rem);
  border-top:1px solid color-mix(in srgb, var(--salvia) 28%, transparent);
}

/* el tamaño lo pone .titulo; acá van sólo los aires y las dos líneas */
.dress__destacado{ margin:1.5rem 0 2rem }
.dress__destacado::before,
.dress__destacado::after{
  content:'';
  display:block;
  width:4.5rem;
  height:1px;
  margin:0 auto;
  background:var(--olivo-claro);
}
.dress__destacado::before{ margin-bottom:1.35rem }
.dress__destacado::after{ margin-top:1.35rem }

.dress__sugerencias{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  max-width:26rem;
  margin:2.5rem auto 0;
}
.dress__sugerencias div{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  padding:1.35rem .75rem;
  border:1px solid color-mix(in srgb, var(--salvia) 25%, transparent);
  border-radius:2px;
}
.dress__quien{
  font-size:.58rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--salvia);
}
.dress__que{
  font-family:var(--display);
  font-size:clamp(.98rem, 3.8vw, 1.15rem);
  color:var(--blanco);
}


/* ==========================================================================
   5 · REGALOS
   ========================================================================== */

.seccion--regalos{
  background:var(--blanco);
  padding-bottom:clamp(3.5rem, 8vw, 5rem);
}

.hoja--reg-a{
  color:var(--olivo-claro);
  width:min(40vw, 14rem);
  top:-2%; right:-8%;
  transform:rotate(-18deg);
  opacity:.46;
}
.hoja--reg-b{
  color:var(--olivo-claro);
  width:min(34vw, 12rem);
  top:34%; left:-6%;
  transform:rotate(196deg);
  opacity:.38;
}

.banco{
  margin-top:2.5rem;
  padding:clamp(1.75rem, 6vw, 2.75rem) clamp(1.25rem, 5vw, 2.5rem);
  border:var(--borde);
  border-radius:2px;
  background:var(--marfil);
  max-width:38rem;
  margin-inline:auto;
}

.banco__datos{ margin:0 0 2rem }
.banco__datos div{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:.95rem 0;
  border-bottom:1px dashed color-mix(in srgb, var(--olivo) 18%, transparent);
}
.banco__datos div:last-child{ border-bottom:0; padding-bottom:0 }
.banco__datos dt{
  font-size:.58rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--olivo-claro);
}
.banco__datos dd{
  margin:0;
  font-family:var(--display);
  font-size:1.15rem;
  color:var(--tinta);
}
.banco__numero{ letter-spacing:.12em; font-variant-numeric:tabular-nums }
/* el correo es la línea más larga de la lista: se achica un poco y se permite
   cortar, si no se sale de la tarjeta en pantallas angostas */
.banco__correo{ font-size:1rem; overflow-wrap:anywhere }

.banco__aviso{
  margin:.9rem 0 0;
  min-height:1.25rem;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--olivo);
  opacity:0;
  transition:opacity .3s ease;
}
.banco__aviso.se-ve{ opacity:1 }

/* --- carrusel continuo, avanza hacia la derecha --------------------------- */
.carrusel{
  position:relative;
  z-index:1;
  margin-top:clamp(3.5rem, 9vw, 5rem);
  overflow:hidden;
  mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.carrusel__pista{
  display:flex;
  gap:.75rem;
  width:max-content;
  /* arranca corrido media pista: al avanzar hacia la derecha nunca
     se asoma el borde izquierdo */
  animation:correr-derecha 70s linear infinite;
}
.carrusel__pista img{
  width:clamp(9rem, 34vw, 14rem);
  aspect-ratio:3 / 4;
  height:auto;
  object-fit:cover;
  border-radius:2px;
}
@keyframes correr-derecha{
  from{ transform:translate3d(-50%,0,0) }
  to  { transform:translate3d(0,0,0) }
}


/* ==========================================================================
   6 · ¿NOS ACOMPAÑAS?
   ========================================================================== */

.seccion--rsvp{ background:var(--marfil) }

.acompanas__opciones{
  display:grid;
  gap:1rem;
  margin-top:2.5rem;
  text-align:center;
}
@media (min-width:34rem){
  .acompanas__opciones{ grid-template-columns:1fr 1fr; align-items:stretch }
  .acompanas__opciones .boton{ width:100% }
}
.acompanas__opciones .boton{ padding-inline:1.25rem }

.rsvp{
  display:grid;
  gap:1.5rem;
  margin-top:2.5rem;
  text-align:left;
}

.campo{ display:flex; flex-direction:column; gap:.5rem }

.campo label{
  font-size:.62rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--olivo);
}

.campo input,
.campo textarea{
  width:100%;
  padding:.95rem 1rem;
  min-height:52px;
  border:1px solid color-mix(in srgb, var(--olivo) 25%, transparent);
  border-radius:2px;
  background:var(--blanco);
  color:var(--tinta);
  font-family:var(--texto);
  font-weight:300;
  font-size:1rem;   /* 16px evita el zoom automático en iOS */
  line-height:1.5;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.campo textarea{ resize:vertical; min-height:5.5rem }

.campo input::placeholder,
.campo textarea::placeholder{ color:color-mix(in srgb, var(--tinta-suave) 60%, transparent) }

.campo input:focus,
.campo textarea:focus{
  outline:none;
  border-color:var(--olivo);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--olivo-claro) 25%, transparent);
}

.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"]{ border-color:var(--alerta) }

.campo__error{
  margin:0;
  font-size:.78rem;
  line-height:1.4;
  color:var(--alerta);
}

.rsvp__fallo{
  margin:0;
  font-size:.85rem;
  color:var(--alerta);
  text-align:center;
}

.rsvp__gracias{
  margin-top:2.5rem;
  padding:clamp(2.25rem, 8vw, 3.25rem) 1.5rem;
  border:1px solid color-mix(in srgb, var(--olivo) 22%, transparent);
  border-radius:2px;
  background:var(--blanco);
}
.rsvp__filete{
  display:block;
  width:6.5rem;
  height:2.2rem;
  margin:0 auto 1.25rem;
  color:var(--olivo-claro);
}
.rsvp__gracias p{
  margin:0;
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(1.15rem, 4.4vw, 1.45rem);
  line-height:1.55;
  color:var(--olivo);
}


/* ==========================================================================
   7 · CIERRE
   ========================================================================== */

.cierre{
  padding:calc(var(--aire) * 1.15) 1.5rem calc(var(--aire) * .9 + env(safe-area-inset-bottom));
  text-align:center;
  background:
    radial-gradient(120% 90% at 50% 10%, #414C2C 0%, var(--olivo-hondo) 62%, #232A17 100%);
  color:var(--blanco);
}

/* El cierre repite la tipografía de la portada: los nombres en manuscrita y la
   fecha con el mismo tratamiento del "¡Nos casamos!". */
.cierre__nombres{
  margin:0;
  font-family:var(--manuscrita);
  font-weight:400;
  font-size:clamp(2.75rem, 12vw, 4.5rem);
  line-height:1.15;
  letter-spacing:.01em;
  color:var(--blanco);
}
.cierre__nombres em{
  font-size:.46em;
  opacity:.8;
  padding:0 .08em;
}

.cierre__fecha{
  margin:1.25rem 0 0;
  font-family:var(--texto);
  font-weight:500;
  font-size:clamp(.72rem, 3vw, .85rem);
  letter-spacing:.58em;
  text-indent:.58em;
  text-transform:uppercase;
  color:#F4F2E9;
}

.cierre__filete{
  display:block;
  width:7rem;
  height:2.4rem;
  margin:2.25rem auto 0;
  color:var(--olivo-claro);
}


/* ==========================================================================
   Música · botón flotante
   Aparece recién cuando se abre el sobre (el JS le saca el hidden).
   ========================================================================== */

.musica{
  position:fixed;
  right:calc(env(safe-area-inset-right) + 1rem);
  bottom:calc(env(safe-area-inset-bottom) + 1rem);
  z-index:60;
  display:grid;
  place-items:center;
  width:3rem;
  height:3rem;
  padding:0;
  border:1px solid color-mix(in srgb, var(--dorado) 60%, transparent);
  border-radius:50%;
  background:color-mix(in srgb, var(--olivo-hondo) 85%, transparent);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:#F1EEE2;
  cursor:pointer;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.6);
  animation:aparecer .6s ease both;
  transition:transform .25s ease, background .3s ease, opacity .3s ease;
}
.musica:hover{ transform:translateY(-2px); background:var(--olivo-hondo) }
.musica:active{ transform:translateY(0) }

/* apagada: se apaga también el botón, para que se note el estado */
.musica[aria-pressed="true"]{ opacity:.68 }

.musica__icono{
  grid-area:1 / 1;
  width:1.3rem;
  height:1.3rem;
}
.musica__icono--muda{ display:none }
.musica[aria-pressed="true"] .musica__icono--suena{ display:none }
.musica[aria-pressed="true"] .musica__icono--muda{ display:block }

@keyframes aparecer{
  from{ opacity:0; transform:translateY(.75rem) }
  to  { opacity:1; transform:none }
}


/* ==========================================================================
   Accesibilidad · menos movimiento
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .revelar{ opacity:1; transform:none }
  .pieza{ opacity:1; transform:none }
  .carrusel__pista{ animation:none; transform:translate3d(-50%,0,0) }
  .portada__desliza i{ animation:none; opacity:.6 }
  .sobre__pista{ animation:none; opacity:.6 }
}