:root{
  --violet-0: #1C0B2A;      /* base (violeta puro oscuro) */
  --violet-1: #2A1246;      /* panel */
  --violet-2: #4B2A7A;      /* acento */
  --violet-soft: #7A5AB0;

  --gold-0: #C8A24A;        /* dorado principal */
  --gold-1: #EAD9A6;        /* brillo */
  --gold-2: #9A6F2B;        /* sombra dorado */

  --text: #F6F1FF;
  --muted: rgba(246,241,255,.78);

  --shadow: 0 18px 70px rgba(0,0,0,.38);
  --radius: 26px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  overflow: hidden;
  background:
    radial-gradient(1200px 800px at 50% 35%, rgba(75,42,122,.55), transparent 62%),
    radial-gradient(1000px 700px at 50% 92%, rgba(200,162,74,.14), transparent 60%),
    linear-gradient(180deg, var(--violet-0), #14061f 85%);
}

a{ color: inherit; }

/* Top controls */
.top-controls{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 90;
}
.icon-btn{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(200,162,74,.35);
  background: rgba(28,11,42,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor:pointer;
}
.icon-btn .icon{
  font-size: 18px;
  color: var(--gold-0);
}
.icon-btn.is-on{
  border-color: rgba(234,217,166,.55);
  box-shadow: 0 0 0 4px rgba(200,162,74,.12), 0 10px 30px rgba(0,0,0,.35);
}

/* SNAP container */
.snap{
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;

  /* damasco suave en todo el scroll */
  background-image: url("assets/damask.svg");
  background-size: 520px 520px;
  background-repeat: repeat;
  background-position: center;
}

/* Sections */
.screen{
  height: 100vh;
  scroll-snap-align: start;
  display:grid;
  place-items:center;
  padding: 60px 0;
}
.screen--tint{
  background: linear-gradient(180deg, rgba(255,255,255,.00), rgba(255,255,255,.03));
}
.screen--hero{
  background:
    radial-gradient(900px 620px at 50% 20%, rgba(200,162,74,.13), transparent 62%),
    radial-gradient(900px 700px at 50% 85%, rgba(122,90,176,.18), transparent 65%);
}

/* Entrance animation per screen */
.screen__content{
  width: min(1040px, calc(100% - 40px));
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity .75s ease, transform .75s ease;
  will-change: transform, opacity;
}
.screen.is-active .screen__content{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* FRAME (panel barroco) */
.frame{
  position: relative;
  border-radius: var(--radius);

  /* más aire vertical para evitar cortes de tipografías script */
  padding: 38px 22px;

  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid rgba(234,217,166,.22);
  background:
    radial-gradient(900px 600px at 50% 20%, rgba(75,42,122,.55), rgba(42,18,70,.92)),
    linear-gradient(180deg, rgba(42,18,70,.96), rgba(28,11,42,.96));
}

/* brillo foil sutil en el borde */
.frame::before{
  content:"";
  position:absolute; inset:0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(234,217,166,.75),
    rgba(200,162,74,.55),
    rgba(154,111,43,.45),
    rgba(234,217,166,.65));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* damasco por encima dentro del panel, MUY suave */
.frame::after{
  content:"";
  position:absolute; inset:0;
  background-image: url("assets/damask.svg");
  background-size: 520px 520px;
  opacity: .08;
  pointer-events:none;
}

/* mantener el contenido arriba de los fondos */
.frame > *{ position: relative; z-index: 2; }

/* Ornamentos barrocos en 4 esquinas (usamos background múltiple para no ensuciar HTML) */
.frame{
  background-image:
    radial-gradient(900px 600px at 50% 20%, rgba(75,42,122,.55), rgba(42,18,70,.92)),
    linear-gradient(180deg, rgba(42,18,70,.96), rgba(28,11,42,.96)),
    url("assets/ornaments/corner.svg"),
    url("assets/ornaments/corner.svg"),
    url("assets/ornaments/corner.svg"),
    url("assets/ornaments/corner.svg");
  background-repeat: no-repeat;
  background-size: auto, auto, 128px 128px, 128px 128px, 128px 128px, 128px 128px;
  background-position:
    center, center,
    10px 10px, calc(100% - 138px) 10px,
    calc(100% - 138px) calc(100% - 138px), 10px calc(100% - 138px);
}

/* Flor mínima violeta (solo en algunos frames) */
.frame--floral{
  background-image:
    radial-gradient(900px 600px at 50% 20%, rgba(75,42,122,.55), rgba(42,18,70,.92)),
    linear-gradient(180deg, rgba(42,18,70,.96), rgba(28,11,42,.96)),
    url("assets/ornaments/corner.svg"),
    url("assets/ornaments/corner.svg"),
    url("assets/ornaments/corner.svg"),
    url("assets/ornaments/corner.svg"),
    url("assets/flor-violeta.svg");
  background-repeat: no-repeat;
  background-size: auto, auto, 128px 128px, 128px 128px, 128px 128px, 128px 128px, 150px 150px;
  background-position:
    center, center,
    10px 10px, calc(100% - 138px) 10px,
    calc(100% - 138px) calc(100% - 138px), 10px calc(100% - 138px),
    calc(100% - 170px) calc(100% - 175px);
}

/* Typography */
.h2{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.0rem, 3.3vw, 2.6rem);
  margin: 0 0 10px;
  color: rgba(234,217,166,.95);
  letter-spacing: .02em;
}
.lead{
  margin: 14px auto 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
  text-align:center;
}
.sub{ margin: 0 0 18px; color: var(--muted); }

.script{
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  letter-spacing: .01em;
}

/* & base (solo si lo usás inline en intro/cierre) */
.amp{
  color: var(--gold-0);
  font-weight: 700;
  font-family: "Cormorant Garamond", Georgia, serif;
}

/* GOLD shimmer (foil sutil) */
.gold-shimmer{
  background: linear-gradient(90deg,
    var(--gold-2) 0%,
    var(--gold-0) 28%,
    var(--gold-1) 50%,
    var(--gold-0) 72%,
    var(--gold-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
}

/* Overlay shimmer UNA VEZ */
.gold-shimmer::after{
  content:"";
  position:absolute;
  inset: -8px 0;              /* clave para que NO corte en Great Vibes */
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 45%, transparent 60%);
  transform: translateX(-120%);
  animation: shimmerOnce 1.6s 1.1s ease forwards;
  mix-blend-mode: overlay;
  pointer-events:none;
}
@keyframes shimmerOnce{
  to{ transform: translateX(120%); opacity:0; }
}

/* Date badge */
.hero-top{
  display:flex;
  justify-content:center;
  margin-bottom: 6px;
}
.badge-date{
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: .16em;
  font-size: .88rem;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(234,217,166,.26);
  background: rgba(20,6,31,.35);
  color: rgba(234,217,166,.9);
}

/* Nombres en columna (CENTRO) - evita cortes */
.names-stack{
  display: grid;
  place-items: center;
  text-align: center;
  margin-top: 14px;
  margin-bottom: 10px;
  padding: 10px 0 14px;       /* aire para que no corte */
}

/* Nombres grandes */
.names-stack .name{
  font-size: clamp(3.4rem, 7vw, 5.3rem);
  line-height: 1.15;          /* Great Vibes necesita altura */
  padding: 6px 0;             /* aire extra */
  display: inline-block;      /* evita recortes raros */
}

/* & centrado */
.amp--stack{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  color: rgba(234,217,166,.95);
  margin: 6px 0 6px;
  letter-spacing: .12em;
}

/* Variante de nombres para cierre */
.names-stack--closing .name{
  font-size: clamp(2.8rem, 6vw, 4.4rem);
  line-height: 1.15;
  padding: 6px 0;
}

/* Divider + verse */
.divider{
  display:flex; align-items:center; justify-content:center; gap: 10px;
  margin: 10px 0 18px;
}
.divider__line{ width: 120px; height: 1px; background: rgba(234,217,166,.45); }
.divider__heart{ color: rgba(234,217,166,.85); }

.verse{
  margin: 0 auto;
  width: min(880px, 100%);
  background: rgba(20,6,31,.35);
  border: 1px solid rgba(234,217,166,.16);
  border-radius: 20px;
  padding: 22px 20px;
  text-align:left;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}
.verse p{ margin: 0 0 12px; color: rgba(246,241,255,.88); line-height: 1.7; }
.verse footer{ color: rgba(234,217,166,.92); font-weight: 800; }

/* Cards (agenda/ubicaciones) */
/* ✅ CAMBIO: ahora se centra con 2 tarjetas (auto-fit + justify-content) */
.cards{
  display:grid;
  gap: 14px;
  margin-top: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-content: center;
}
@media (min-width: 981px){
  /* en desktop, limitamos el ancho de columna para que 2 tarjetas queden juntitas y centradas */
  .cards{
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
  }
}

@media (max-width: 980px){
  body{ overflow: auto; }
  .cards{ grid-template-columns: 1fr; justify-content: stretch; }
}

.card{
  background: rgba(20,6,31,.32);
  border: 1px solid rgba(234,217,166,.14);
  border-radius: 20px;
  padding: 16px 16px 14px;
  text-align:left;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
.card__top{
  display:flex; align-items:center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.card h3{
  margin:0;
  color: rgba(234,217,166,.95);
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
}
.meta{ margin: 0 0 6px; font-weight: 700; color: rgba(246,241,255,.88); }
.muted{ color: var(--muted); }
.tiny{ margin-top: 14px; font-size: .92rem; color: var(--muted); }

code{
  background: rgba(20,6,31,.45);
  border: 1px solid rgba(234,217,166,.18);
  padding: 2px 6px;
  border-radius: 10px;
  color: rgba(234,217,166,.92);
}

/* Pills */
.pill{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(234,217,166,.18);
  background: rgba(20,6,31,.35);
  font-weight: 900;
  color: rgba(234,217,166,.92);
  font-size: .9rem;
}
.pill--gold{
  background: rgba(200,162,74,.18);
  border-color: rgba(234,217,166,.25);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  text-decoration:none;
  border: 1px solid rgba(234,217,166,.35);
  background: rgba(20,6,31,.35);
  color: rgba(234,217,166,.95);
  font-weight: 900;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.btn:active{ transform: translateY(1px); }
.btn:hover{
  border-color: rgba(234,217,166,.55);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}

.btn--gold{
  background: linear-gradient(180deg, rgba(234,217,166,.25), rgba(200,162,74,.22));
  border-color: rgba(234,217,166,.45);
  color: rgba(234,217,166,.98);
}
.btn--big{ width: 100%; padding: 14px 18px; font-size: 1.02rem; }

/* Panel text blocks */
.panel{
  width: min(880px, 100%);
  margin: 0 auto;
  background: rgba(20,6,31,.32);
  border: 1px solid rgba(234,217,166,.16);
  border-radius: 20px;
  padding: 20px;
  text-align:left;
  line-height: 1.7;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}

/* Alias */
.alias{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed rgba(234,217,166,.30);
  border-radius: 18px;
  background: rgba(20,6,31,.25);
}
.alias__label{ font-size: .86rem; color: rgba(246,241,255,.75); font-weight: 800; }
.alias__value{ font-size: 1.18rem; font-weight: 950; color: rgba(234,217,166,.95); letter-spacing:.2px; }
.thanks{ margin-top: 12px; color: rgba(234,217,166,.95); font-weight: 900; }

/* Scroll indicator */
.scroll-indicator{
  margin-top: 18px;
  display:flex;
  justify-content:center;
  gap: 8px;
  opacity: .85;
}
.scroll-indicator .dot{
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgba(234,217,166,.35);
  animation: pulse 1.2s infinite ease-in-out;
}
.scroll-indicator .dot:nth-child(2){ animation-delay: .15s; }
.scroll-indicator .dot:nth-child(3){ animation-delay: .3s; }
@keyframes pulse{
  0%,100%{ transform: translateY(0); opacity: .45; }
  50%{ transform: translateY(4px); opacity: 1; }
}

/* INTRO */
.intro{
  position: fixed;
  inset:0;
  z-index: 100;
  display:grid;
  place-items:center;
  background: rgba(10,4,16,.65);
  backdrop-filter: blur(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.intro.is-hidden{
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.intro__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 50% 25%, rgba(75,42,122,.55), transparent 60%),
    radial-gradient(800px 560px at 50% 60%, rgba(200,162,74,.18), transparent 60%);
  opacity: .95;
}
.frame--intro{
  width: min(820px, calc(100% - 40px));
  text-align:center;
}
.intro__orn img{
  width: 180px;
  opacity: .95;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
.intro__title{
  margin-top: 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  letter-spacing: .32em;
  color: rgba(234,217,166,.92);
  font-size: .98rem;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp .75s .25s ease forwards;
}
.intro__names{
  margin-top: 12px;
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp .85s .45s ease forwards;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
}
@keyframes fadeUp{
  to{ opacity:1; transform: translateY(0); }
}
.intro__hint{
  margin-top: 16px;
  color: rgba(246,241,255,.75);
  font-weight: 700;
  opacity: 0;
  animation: hintIn .8s .85s ease forwards;
}
@keyframes hintIn{ to{ opacity:1; } }
.chev{
  display:block;
  margin-top: 6px;
  animation: bounce 1.2s infinite ease-in-out;
  color: rgba(234,217,166,.75);
}
@keyframes bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

/* Upload */
.upload{ width: min(900px, 100%); margin: 0 auto; }
.upload__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 860px){
  .upload__grid{ grid-template-columns: 1fr; }
}
.field{ display:block; text-align:left; }
.field__label{ display:block; font-weight: 900; color: rgba(234,217,166,.92); margin-bottom: 6px; }
.field__hint{ display:block; margin-top: 6px; font-size: .88rem; color: rgba(246,241,255,.72); }

.input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(234,217,166,.22);
  background: rgba(20,6,31,.35);
  outline: none;
  color: rgba(246,241,255,.92);
}
.input:focus{
  border-color: rgba(234,217,166,.55);
  box-shadow: 0 0 0 4px rgba(200,162,74,.12);
}

.drop{
  display:block;
  padding: 18px;
  border-radius: 20px;
  border: 1px dashed rgba(234,217,166,.30);
  background: rgba(20,6,31,.25);
  text-align:center;
  margin: 12px 0 14px;
  cursor:pointer;
}
.drop input{ display:none; }
.drop__title{ font-weight: 950; color: rgba(234,217,166,.95); }
.drop__sub{ margin-top: 6px; color: rgba(246,241,255,.75); }

.upload__msg{ margin-top: 12px; font-weight: 900; color: rgba(234,217,166,.92); }
.hp{ position:absolute; left:-9999px; opacity:0; }

/* Gallery thumbs */
.gallery{
  width: min(920px, 100%);
  margin: 18px auto 0;
  text-align:left;
}
.gallery__title{
  margin: 12px 0 8px;
  color: rgba(234,217,166,.95);
  font-family: "Cormorant Garamond", Georgia, serif;
}
.gallery__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 980px){
  .gallery__grid{ grid-template-columns: repeat(2, 1fr); }
}
.thumb{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(234,217,166,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  aspect-ratio: 1 / 1;
  background: rgba(20,6,31,.28);
}
.thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .35s ease;
}
.thumb:hover img{ transform: scale(1.08); }

/* Closing */
.closing{
  width: min(820px, calc(100% - 40px));
  margin: 0 auto;
  text-align:center;
}
.closing__mini{
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  letter-spacing: .30em;
  color: rgba(234,217,166,.85);
  text-transform: uppercase;
}
.closing__line{
  width: 170px;
  height: 1px;
  margin: 14px auto 12px;
  background: rgba(234,217,166,.45);
}
.closing__end{ color: rgba(246,241,255,.80); font-weight: 800; }


/* RSVP pages */
.page{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 60px 20px;
}
.page__inner{ width: min(960px, 100%); }
.stack{ display:grid; gap: 14px; }
.textarea{ min-height: 110px; resize: vertical; }

.choice-group{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.choice{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(234,217,166,.25);
  background: rgba(20,6,31,.35);
  color: rgba(234,217,166,.95);
  font-weight: 900;
  cursor: pointer;
}
.choice input{ accent-color: var(--gold-0); }

.rsvp-actions{
  display:flex;
  gap: 12px;
  align-items:center;
  flex-wrap: wrap;
}
.rsvp-msg{ margin-top: 12px; font-weight: 900; color: rgba(234,217,166,.92); }

.counts{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}
.count{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(234,217,166,.20);
  background: rgba(20,6,31,.35);
  font-weight: 900;
  color: rgba(234,217,166,.95);
}

.badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 900;
  border: 1px solid rgba(234,217,166,.25);
}
.badge--yes{
  color: rgba(234,217,166,.98);
  background: rgba(200,162,74,.18);
}
.badge--no{
  color: rgba(246,241,255,.92);
  background: rgba(122,90,176,.18);
}

.list{ display:grid; gap: 12px; }
.list-item{
  background: rgba(20,6,31,.32);
  border: 1px solid rgba(234,217,166,.16);
  border-radius: 18px;
  padding: 14px;
  text-align:left;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}
.list-item__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.list-item__name{
  font-weight: 900;
  color: rgba(234,217,166,.95);
}
.list-item__time{ color: rgba(246,241,255,.72); font-size: .85rem; }
.list-item__note{
  margin-top: 6px;
  color: var(--muted);
  white-space: pre-wrap;
}

/* ===== Carrusel Galería (Sección 7) ===== */
.gallery__grid{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (10px * 1)) / 2); /* 2 visibles en móvil */
  gap: 10px;
  overflow: hidden;
  scroll-snap-type: x mandatory;
  padding: 4px 2px;
}

/* Cada slide */
.gallery__grid .thumb{
  scroll-snap-align: start;
  width: 100%;
}

/* 4 visibles en escritorio */
@media (min-width: 981px){
  .gallery__grid{
    grid-auto-columns: calc((100% - (10px * 3)) / 4); /* 4 visibles en PC */
  }
}

/* opcional: suaviza la transición de autoslide */
.gallery__grid.is-sliding{
  scroll-behavior: smooth;
}
/* ===== GALERÍA COMO CARRUSEL (pisa la grilla vieja) ===== */
.gallery__grid{
  /* pisa el grid de 4 columnas anterior */
  display: grid !important;
  grid-template-columns: none !important;

  grid-auto-flow: column !important;
  gap: 10px !important;

  /* esto es CLAVE: el carrusel necesita scroll horizontal */
  overflow-x: auto !important;
  overflow-y: hidden !important;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  padding: 4px 2px;
  -webkit-overflow-scrolling: touch;
}

/* Ocultar scrollbar (opcional, queda más limpio) */
.gallery__grid{
  scrollbar-width: none; /* Firefox */
}
.gallery__grid::-webkit-scrollbar{
  display: none; /* Chrome/Safari/Edge */
}

/* 2 visibles en celular */
.gallery__grid{
  grid-auto-columns: calc((100% - 10px) / 2) !important;
}

/* 4 visibles en PC */
@media (min-width: 981px){
  .gallery__grid{
    grid-auto-columns: calc((100% - (10px * 3)) / 4) !important;
  }
}

.gallery__grid .thumb{
  scroll-snap-align: start;
}
/* --- FIX: secciones largas (s7/s8) no se enciman --- */
.screen{
  height: auto;        /* antes 100vh */
  min-height: 100vh;   /* mantiene pantalla completa como mínimo */
  padding: 60px 0;
}

/* por si algún navegador flashea con snap en secciones largas */
.snap{
  scroll-snap-type: y mandatory;
}

/* en móvil damos un poco más de aire */
@media (max-width: 980px){
  .screen{
    padding: 76px 0;
  }
}

/* RSVP nota más compacta */
#s8 .textarea{
  min-height: 70px;     /* altura base */
  max-height: 140px;    /* hasta dónde puede estirarse */
}
/* --- CIERRE CON FOTO --- */
#s9{
  background:
    linear-gradient(rgba(28,11,42,.65), rgba(28,11,42,.88)),
    url("assets/novios.jpg") center/cover no-repeat;
}

/* mejora contraste texto */
#s9 .frame{
  background: rgba(20,6,31,.55);
  backdrop-filter: blur(6px);
}