@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Great+Vibes&family=Playfair+Display:ital,wght@0,500;0,700;1,500&display=swap');

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

:root {
  --negro: #0d0005;
  --vino: #260812;
  --vino-profundo: #140207;
  --oro: #C9A84C;
  --oro-claro: #E8C96A;
  --crema: #FDFAF4;
  --rosa: #F4BFCC;
  --texto: #E8DDD0;
  --texto-dim: #b8a99a;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--negro);
  color: var(--texto);
  font-family: 'Cormorant Garamond', serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.locked {
  overflow: hidden;
}

#particles-global {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.pgp {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: 0;
  animation: particulaFlota linear infinite;
}

@keyframes particulaFlota {
  0% { opacity: 0; transform: translateY(0) scale(1); }
  12% { opacity: .55; }
  85% { opacity: .25; }
  100% { opacity: 0; transform: translateY(-100vh) scale(.45); }
}

.vignette-global {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 34%, rgba(0,0,0,.72) 100%);
}

/* ==================================================
   PANTALLA DEL SOBRE
   El SVG del sobre queda igual; aquí solo se controla
   tamaño, entrada y apertura.
================================================== */
#pantalla-sobre {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 50%, rgba(201,168,76,.10), transparent 30%),
    radial-gradient(ellipse at 50% 76%, rgba(77,19,30,.85) 0%, rgba(13,0,5,.98) 54%, #000 100%);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}

#pantalla-sobre.saliendo {
  opacity: 0;
  transform: scale(1.035);
  filter: blur(6px);
  pointer-events: none;
}

.sobre-scene {
  position: relative;
  width: min(92vw, 420px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
  transform: translateY(22px) scale(.98);
  filter:
    drop-shadow(0 18px 46px rgba(0,0,0,.62))
    drop-shadow(0 0 55px rgba(201,168,76,.18));
  transition: opacity 1s ease, transform 1s cubic-bezier(.2,.8,.3,1), filter .35s ease;
}

.sobre-scene.entrada {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.sobre-scene:hover {
  filter:
    drop-shadow(0 20px 56px rgba(0,0,0,.68))
    drop-shadow(0 0 74px rgba(201,168,76,.28));
}

.sobre-scene:active {
  transform: scale(.975);
}

.sobre-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ribbon-group {
  transform-origin: 50% 50%;
  transition: opacity .45s ease, transform .48s ease;
}

.sobre-scene.abierto .ribbon-group {
  opacity: 0;
  transform: translateY(-10px) scale(.92);
}

.lacre-group {
  transform-origin: 50% 50%;
}

.sobre-scene.abierto .lacre-group {
  animation: lacreRomper .68s ease forwards;
}

@keyframes lacreRomper {
  0% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
  35% { opacity: .85; transform: scale(1.12) translateY(-6px) rotate(-4deg); }
  100% { opacity: 0; transform: scale(.48) translateY(44px) rotate(18deg); }
}

#flapTopGroup {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  transition: transform .86s cubic-bezier(.22,.8,.25,1), opacity .55s ease .18s;
}

.sobre-scene.abierto #flapTopGroup {
  transform: rotateX(180deg) translateY(-18px);
  opacity: .12;
}

.hint-abrir {
  position: relative;
  z-index: 3;
  max-width: 90vw;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(13px, 3.6vw, 17px);
  letter-spacing: 3px;
  color: var(--crema);
  opacity: .72;
  animation: hintPulse 2.2s ease-in-out infinite;
}

@keyframes hintPulse {
  0%, 100% { opacity: .38; transform: translateY(0); }
  50% { opacity: .86; transform: translateY(-2px); }
}

.candelabros {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.candelabro {
  position: absolute;
  bottom: 0;
  opacity: .18;
}

.candelabro-izq { left: 2%; }
.candelabro-der { right: 2%; transform: scaleX(-1); }

.llama {
  transform-origin: 50% 100%;
  animation: llamaParpadeo 1.8s ease-in-out infinite;
}

@keyframes llamaParpadeo {
  0%, 100% { opacity: .82; transform: scaleY(1) scaleX(1); }
  25% { opacity: 1; transform: scaleY(1.06) scaleX(.96); }
  50% { opacity: .88; transform: scaleY(.96) scaleX(1.03); }
  75% { opacity: 1; transform: scaleY(1.04) scaleX(.98); }
}

/* ==================================================
   PORTADA: aparece hasta después de abrir el sobre
================================================== */
#pantalla-portada {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #050001;
  transition: opacity .8s ease, visibility .8s ease;
}

#pantalla-portada.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.portada-hero {
  position: relative;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background:
    radial-gradient(circle at 50% 15%, rgba(201,168,76,.18), transparent 34%),
    linear-gradient(180deg, #120307, #020001);
}

.portada-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.015);
  filter: saturate(1.05) contrast(1.04) brightness(.82);
  animation: portadaZoom 7s ease forwards;
}

@keyframes portadaZoom {
  from { transform: scale(1.08); }
  to { transform: scale(1.015); }
}

.portada-overlay-top {
  position: absolute;
  inset: 0 0 auto 0;
  height: 43vh;
  background:
    linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(20,2,7,.68) 28%, rgba(20,2,7,.26) 68%, transparent 100%);
  z-index: 1;
}

.portada-overlay-bottom {
  position: absolute;
  inset: auto 0 0 0;
  height: 44vh;
  background: linear-gradient(0deg, rgba(0,0,0,.78), transparent);
  z-index: 1;
}

.portada-glow {
  position: absolute;
  top: -8vh;
  left: 50%;
  width: min(92vw, 520px);
  height: 35vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(201,168,76,.22), transparent 68%);
  filter: blur(10px);
  z-index: 1;
  pointer-events: none;
}

.portada-copy {
  position: relative;
  z-index: 3;
  width: min(92vw, 560px);
  padding: max(34px, env(safe-area-inset-top)) 20px 0;
  text-align: center;
  color: #fff7ef;
  opacity: 0;
  transform: translateY(-16px);
}

#pantalla-portada.visible .portada-copy {
  animation: tituloPortada .95s .16s ease forwards;
}

@keyframes tituloPortada {
  to { opacity: 1; transform: translateY(0); }
}

.portada-nombre {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(64px, 22vw, 128px);
  line-height: .78;
  letter-spacing: .5px;
  color: #fffaf2;
  text-shadow:
    0 5px 20px rgba(0,0,0,.76),
    0 0 30px rgba(201,168,76,.18);
}

.portada-subtitulo {
  margin-top: 12px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(20px, 6vw, 34px);
  color: #f3e7d2;
  text-shadow: 0 3px 12px rgba(0,0,0,.8);
}

.portada-apellido {
  margin-top: 8px;
  font-size: clamp(12px, 3.6vw, 17px);
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: rgba(253,250,244,.78);
  text-shadow: 0 3px 10px rgba(0,0,0,.8);
}

.portada-pista {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 6vh, 58px);
  transform: translateX(-50%);
  z-index: 8;

  width: 100%;
  padding: 0 18px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;

  text-align: center;
  pointer-events: none;
}


#pantalla-portada.visible .portada-pista {
  animation: pistaEntrada .8s 1s ease forwards;
}

.portada-pista span {
  width: 1px;
  height: 34px;
  display: block;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 247, 239, 0.75),
    transparent
  );
  opacity: 0.7;
}

.portada-pista p {
  margin: 0;
  width: 100%;
  max-width: none;

  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(11px, 3vw, 15px);
  font-weight: 400;
  letter-spacing: clamp(3.2px, 1vw, 7px);
  line-height: 1;

  color: rgba(255, 247, 239, 0.82);
  text-transform: uppercase;
  text-align: center;

  white-space: nowrap;
}

@media (max-width: 480px) {
  .portada-pista {
    bottom: 34px;
    padding: 0 10px;
    gap: 8px;
  }

  .portada-pista span {
    height: 24px;
  }

  .portada-pista p {
    font-size: 11px;
    letter-spacing: 3px;
    white-space: nowrap;
    text-align: center;
  }
}

@keyframes pistaEntrada {
  to { opacity: 1; }
}

@keyframes lineaPista {
  0%, 100% { transform: scaleY(.55); opacity: .45; }
  50% { transform: scaleY(1); opacity: .9; }
}

@media (max-width: 520px) {
  #pantalla-sobre { padding: 18px; }
  .sobre-scene { width: min(94vw, 390px); }
  .candelabro { width: 48px; height: auto; opacity: .13; }
  .portada-copy { padding-top: max(38px, env(safe-area-inset-top)); }
  .portada-img { object-position: center center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================================================
   SECCIÓN INICIAL — FANTASMA DE LA ÓPERA
   Paleta: oscuro + menta/rosa/lila/amarillo/crema
================================================== */
.seccion-inicial {
  position: relative;
  width: 100%;
  min-height: 100svh;
  padding: clamp(54px, 8vh, 86px) 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  background:
    radial-gradient(circle at 50% 10%, rgba(143, 221, 193, .10), transparent 30%),
    radial-gradient(circle at 84% 62%, rgba(216, 187, 222, .08), transparent 34%),
    radial-gradient(circle at 16% 70%, rgba(244, 191, 204, .07), transparent 32%),
    linear-gradient(180deg, #030303 0%, #0d0005 48%, #1A1A1A 100%);
}

.seccion-inicial::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.82), transparent 28%, transparent 72%, rgba(0,0,0,.82)),
    radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.72) 100%);
  z-index: 0;
  pointer-events: none;
}

.seccion-inicial::after {
  content: '';
  position: absolute;
  inset: clamp(18px, 4vw, 34px);
  border: 1px solid rgba(253, 250, 244, .10);
  box-shadow:
    inset 0 0 0 1px rgba(143, 221, 193, .06),
    0 0 34px rgba(0,0,0,.55);
  z-index: 1;
  pointer-events: none;
}

/* Fondo teatral sutil */
.inicial-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(242, 224, 138, .08), transparent 34%),
    repeating-linear-gradient(
      90deg,
      rgba(253,250,244,.018) 0px,
      rgba(253,250,244,.018) 1px,
      transparent 1px,
      transparent 92px
    );
  opacity: .85;
  pointer-events: none;
}

/* Tarjeta principal */
.inicial-card {
  position: relative;
  z-index: 2;
  width: min(92vw, 560px);
  min-height: min(82svh, 760px);
  padding: clamp(34px, 7vw, 56px) clamp(18px, 6vw, 42px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 4.6vh, 38px);
  text-align: center;

  background:
    linear-gradient(180deg, rgba(26,26,26,.84), rgba(13,0,5,.88)),
    radial-gradient(circle at 50% 0%, rgba(143,221,193,.08), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(216,187,222,.06), transparent 44%);
  border: 1px solid rgba(253, 250, 244, .13);
  box-shadow:
    0 24px 74px rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(253,250,244,.035),
    inset 0 0 50px rgba(0,0,0,.44);
  backdrop-filter: blur(3px);
}

.inicial-card::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(143, 221, 193, .14);
  pointer-events: none;
}

.inicial-card::after {
  content: '';
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(242, 224, 138, .08);
  pointer-events: none;
}

/* Separadores programados */
.inicial-deco {
  width: min(88%, 410px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 3;
}

.inicial-deco span {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(253,250,244,.42),
    rgba(143,221,193,.48),
    transparent
  );
}

.inicial-deco span:last-child {
  background: linear-gradient(
    270deg,
    transparent,
    rgba(253,250,244,.42),
    rgba(244,191,204,.44),
    transparent
  );
}

.inicial-deco i {
  width: 9px;
  height: 9px;
  display: block;
  transform: rotate(45deg);
  background: rgba(242, 224, 138, .78);
  box-shadow:
    0 0 12px rgba(242,224,138,.36),
    0 0 24px rgba(143,221,193,.14);
}

.inicial-deco-bottom {
  margin-top: -4px;
}

/* Texto */
.inicial-texto {
  position: relative;
  z-index: 3;
  width: min(100%, 430px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inicial-texto p {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(19px, 4.9vw, 28px);
  line-height: 1.18;
  color: rgba(253, 250, 244, .90);
  text-shadow: 0 4px 16px rgba(0,0,0,.68);
}

/* Imagen de la inicial */
.inicial-imagen-wrap {
  position: relative;
  z-index: 3;
  width: min(92vw, 430px);
  margin: clamp(2px, 1vh, 8px) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inicial-imagen-wrap::before {
  content: '';
  position: absolute;
  width: 78%;
  height: 42%;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(143,221,193,.13), transparent 68%);
  filter: blur(12px);
  pointer-events: none;
}

.inicial-img {
  position: relative;
  z-index: 2;
  width: min(100%, 410px);
  height: auto;
  display: block;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 20px rgba(0,0,0,.58))
    drop-shadow(0 0 14px rgba(242,224,138,.14));
}

/* Fecha */
.inicial-fecha {
  position: relative;
  z-index: 3;
  width: min(92%, 390px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 4vw, 26px);
  margin-top: -8px;
}

.inicial-fecha span {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(16px, 4.8vw, 26px);
  letter-spacing: clamp(2px, .8vw, 4px);
  text-transform: uppercase;
  color: rgba(253,250,244,.84);
  text-shadow: 0 3px 12px rgba(0,0,0,.65);
}

.inicial-fecha strong {
  position: relative;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(58px, 16vw, 92px);
  line-height: .86;
  padding: 0 clamp(12px, 3.6vw, 22px);
  color: #FDFAF4;
  text-shadow:
    0 4px 16px rgba(0,0,0,.72),
    0 0 22px rgba(242,224,138,.16);
}

.inicial-fecha strong::before,
.inicial-fecha strong::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1px;
  height: 78%;
  transform: translateY(-50%);
  background: linear-gradient(
    180deg,
    transparent,
    rgba(143,221,193,.52),
    rgba(253,250,244,.44),
    transparent
  );
}

.inicial-fecha strong::before {
  left: 0;
}

.inicial-fecha strong::after {
  right: 0;
}

/* Ajuste móvil */
@media (max-width: 480px) {
  .seccion-inicial {
    padding: 48px 12px;
    align-items: flex-start;
  }

  .seccion-inicial::after {
    inset: 16px;
  }

  .inicial-card {
    width: min(94vw, 430px);
    min-height: auto;
    padding: 34px 16px 38px;
    gap: 24px;
  }

  .inicial-card::before {
    inset: 9px;
  }

  .inicial-card::after {
    inset: 17px;
  }

  .inicial-texto {
    width: min(100%, 350px);
    gap: 12px;
  }

  .inicial-texto p {
    font-size: clamp(18px, 5.1vw, 22px);
    line-height: 1.15;
  }

  .inicial-imagen-wrap {
    width: min(100%, 360px);
    margin-top: -2px;
  }

  .inicial-img {
    width: min(100%, 350px);
  }

  .inicial-fecha {
    width: 100%;
    gap: 10px;
    margin-top: -6px;
  }

  .inicial-fecha span {
    font-size: 15px;
    letter-spacing: 2px;
  }

  .inicial-fecha strong {
    font-size: 58px;
    padding: 0 12px;
  }

  .inicial-deco {
    width: 86%;
    gap: 10px;
  }
}

.portada-hero {
  margin-bottom: 0;
}

.seccion-inicial {
  margin-top: 0;
}
/* ==================================================
   SECCIÓN CUENTA REGRESIVA — ESTILO PORTADA
   Imagen visible, título arriba y contador abajo
================================================== */

.seccion-countdown {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: #050001;
}

/* Fondo completo como portada */
.countdown-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../img/fondo2.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: saturate(1.06) contrast(1.03) brightness(.92);
  transform: scale(1.015);
}

/* Sombras suaves, no tan oscuras */
.countdown-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.38) 0%,
      rgba(0,0,0,.08) 30%,
      rgba(0,0,0,.12) 55%,
      rgba(0,0,0,.58) 100%
    ),
    radial-gradient(
      ellipse at center,
      transparent 38%,
      rgba(0,0,0,.38) 100%
    );
  pointer-events: none;
}

/* Quitamos cualquier marco o borde */
.seccion-countdown::before,
.seccion-countdown::after {
  display: none !important;
}

/* Contenedor general: reparte arriba y abajo */
.countdown-content {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 100svh;
  padding:
    max(44px, env(safe-area-inset-top))
    16px
    max(46px, env(safe-area-inset-bottom));

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Quitamos bordes internos */
.countdown-content::before,
.countdown-content::after {
  display: none !important;
}

/* Bloque superior */
.countdown-top {
  width: min(94vw, 720px);
  margin-top: clamp(12px, 3vh, 34px);
}

.countdown-small {
  margin: 0 0 8px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(18px, 4.8vw, 26px);
  line-height: 1.12;
  color: rgba(253,250,244,.92);
  text-shadow:
    0 4px 14px rgba(0,0,0,.82),
    0 0 16px rgba(0,0,0,.55);
}

.countdown-title {
  margin: 0;
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(96px, 27vw, 168px);
  line-height: .78;
  color: #fffaf2;
  text-shadow:
    0 8px 24px rgba(0,0,0,.88),
    0 0 26px rgba(253,250,244,.12);
}

/* Bloque inferior */
.countdown-bottom {
  width: min(96vw, 760px);
  margin-bottom: clamp(18px, 4vh, 42px);
}

/* Contador abajo */
.countdown-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: end;
  justify-content: center;
  gap: clamp(3px, 1.6vw, 14px);
}

.countdown-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #FDFAF4;
}

.countdown-item strong {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(38px, 11.5vw, 82px);
  line-height: .9;
  letter-spacing: 1px;
  color: #FDFAF4;
  text-shadow:
    0 6px 18px rgba(0,0,0,.92),
    0 0 14px rgba(253,250,244,.12);
}

.countdown-item span {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(10px, 3vw, 15px);
  letter-spacing: clamp(1.6px, .7vw, 4px);
  text-transform: uppercase;
  color: rgba(253,250,244,.82);
  text-shadow: 0 4px 12px rgba(0,0,0,.88);
}

.countdown-sep {
  padding-bottom: clamp(20px, 5vw, 38px);
  font-family: 'Playfair Display', serif;
  font-size: clamp(32px, 8.5vw, 66px);
  line-height: 1;
  color: rgba(253,250,244,.70);
  text-shadow: 0 5px 16px rgba(0,0,0,.90);
}

.countdown-date {
  margin: clamp(24px, 4vh, 38px) auto 0;
  width: fit-content;
  max-width: 100%;
  padding: 0;

  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 5vw, 30px);
  font-style: italic;
  color: rgba(253,250,244,.92);
  text-shadow:
    0 5px 18px rgba(0,0,0,.92),
    0 0 14px rgba(0,0,0,.55);

  border: none !important;
}

.countdown-date strong {
  font-family: 'Playfair Display', serif;
  font-size: 1.18em;
  font-weight: 500;
  color: #FDFAF4;
}

/* Ya no usamos separadores decorativos en esta sección */
.countdown-deco,
.countdown-deco-top,
.countdown-deco-bottom {
  display: none !important;
}

@media (max-width: 520px) {
  .seccion-countdown {
    min-height: 100svh;
  }

  .countdown-bg {
    background-position: center center;
    filter: saturate(1.06) contrast(1.02) brightness(.96);
  }

  .countdown-velo {
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.30) 0%,
        rgba(0,0,0,.05) 30%,
        rgba(0,0,0,.08) 55%,
        rgba(0,0,0,.52) 100%
      ),
      radial-gradient(
        ellipse at center,
        transparent 42%,
        rgba(0,0,0,.32) 100%
      );
  }

  .countdown-content {
    padding:
      max(38px, env(safe-area-inset-top))
      10px
      max(40px, env(safe-area-inset-bottom));
  }

  .countdown-top {
    margin-top: 12px;
  }

  .countdown-small {
    font-size: clamp(17px, 4.7vw, 21px);
    padding: 0 12px;
  }

  .countdown-title {
    font-size: clamp(92px, 27vw, 118px);
  }

  .countdown-bottom {
    margin-bottom: 18px;
  }

  .countdown-grid {
    gap: 3px;
  }

  .countdown-item strong {
    font-size: clamp(35px, 11.2vw, 48px);
  }

  .countdown-item span {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  .countdown-sep {
    padding-bottom: 19px;
    font-size: 31px;
  }

  .countdown-date {
    margin-top: 26px;
    font-size: 19px;
  }
}

/* ==================================================
   SECCIÓN PADRES Y PADRINOS
   Estilo oscuro como segunda sección · Sin color vino
================================================== */

.seccion-familia {
  position: relative;
  width: 100%;
  min-height: 100svh;
  padding: clamp(54px, 8vh, 86px) 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  background:
    radial-gradient(circle at 50% 12%, rgba(143, 221, 193, .10), transparent 32%),
    radial-gradient(circle at 84% 65%, rgba(216, 187, 222, .08), transparent 34%),
    radial-gradient(circle at 16% 72%, rgba(244, 191, 204, .07), transparent 32%),
    linear-gradient(180deg, #030303 0%, #0d0005 48%, #1A1A1A 100%);
}

.familia-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(242, 224, 138, .08), transparent 34%),
    repeating-linear-gradient(
      90deg,
      rgba(253,250,244,.018) 0px,
      rgba(253,250,244,.018) 1px,
      transparent 1px,
      transparent 92px
    );
  opacity: .85;
  pointer-events: none;
}

.familia-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78), transparent 28%, transparent 72%, rgba(0,0,0,.78)),
    radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.66) 100%);
  pointer-events: none;
}

.seccion-familia::before {
  content: '';
  position: absolute;
  inset: clamp(18px, 4vw, 34px);
  z-index: 2;
  border: 1px solid rgba(253,250,244,.10);
  box-shadow:
    inset 0 0 0 1px rgba(143,221,193,.06),
    0 0 34px rgba(0,0,0,.55);
  pointer-events: none;
}

/* Contenedor principal oscuro, no vino */
.familia-content {
  position: relative;
  z-index: 3;
  width: min(92vw, 560px);
  padding: clamp(38px, 7vw, 58px) clamp(18px, 6vw, 42px);
  text-align: center;

  background:
    linear-gradient(180deg, rgba(26,26,26,.84), rgba(13,0,5,.88)),
    radial-gradient(circle at 50% 0%, rgba(143,221,193,.08), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(216,187,222,.06), transparent 44%);
  border: 1px solid rgba(253,250,244,.13);
  box-shadow:
    0 24px 74px rgba(0,0,0,.62),
    inset 0 0 0 1px rgba(253,250,244,.035),
    inset 0 0 50px rgba(0,0,0,.44);
  backdrop-filter: blur(3px);
}

.familia-content::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(143,221,193,.14);
  pointer-events: none;
}

.familia-content::after {
  content: '';
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(242,224,138,.08);
  pointer-events: none;
}

.familia-intro {
  position: relative;
  z-index: 4;
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(21px, 5vw, 32px);
  line-height: 1.16;
  color: rgba(253,250,244,.90);
  text-shadow: 0 4px 16px rgba(0,0,0,.68);
}

.familia-intro-sec {
  margin-top: 4px;
}

/* Separadores con paleta correcta */
.familia-deco {
  position: relative;
  z-index: 4;
  width: min(88%, 410px);
  margin: 22px auto 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.familia-deco-mid {
  margin: 30px auto 24px;
}

.familia-deco span {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(253,250,244,.42),
    rgba(143,221,193,.48),
    transparent
  );
}

.familia-deco span:last-child {
  background: linear-gradient(
    270deg,
    transparent,
    rgba(253,250,244,.42),
    rgba(244,191,204,.44),
    transparent
  );
}

.familia-deco i {
  width: 9px;
  height: 9px;
  display: block;
  transform: rotate(45deg);
  background: rgba(242,224,138,.78);
  box-shadow:
    0 0 12px rgba(242,224,138,.36),
    0 0 24px rgba(143,221,193,.14);
}

.familia-nombres {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.familia-nombre {
  margin: 0;
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(42px, 11vw, 74px);
  line-height: .96;
  color: #FDFAF4;
  text-shadow:
    0 5px 20px rgba(0,0,0,.76),
    0 0 18px rgba(143,221,193,.10);
}

/* móvil */
@media (max-width: 520px) {
  .seccion-familia {
    padding: 48px 12px;
  }

  .seccion-familia::before {
    inset: 16px;
  }

  .familia-content {
    width: min(94vw, 430px);
    padding: 34px 16px 38px;
  }

  .familia-content::before {
    inset: 9px;
  }

  .familia-content::after {
    inset: 17px;
  }

  .familia-intro {
    font-size: clamp(20px, 5.4vw, 26px);
  }

  .familia-nombre {
    font-size: clamp(38px, 12vw, 56px);
  }

  .familia-deco {
    width: 86%;
    gap: 10px;
    margin: 20px auto 22px;
  }

  .familia-deco-mid {
    margin: 26px auto 22px;
  }
}

/* ==================================================
   ANIMACIONES GSAP
   Estados base para que no brinquen los textos
================================================== */

.inicial-deco-top,
.inicial-texto p,
.inicial-imagen-wrap,
.inicial-fecha,
.inicial-deco-bottom,
.countdown-small,
.countdown-title,
.countdown-grid,
.countdown-date,
.familia-intro,
.familia-deco,
.familia-nombre,
.familia-intro-sec {
  will-change: transform, opacity, filter;
}
.familia-intro,
.familia-deco,
.familia-nombre,
.familia-intro-sec,
.evento-eyebrow,
.evento-deco,
.evento-titulo,
.evento-card,
.evento-btn {
  will-change: transform, opacity, filter;
}
/* Evita que la animación anterior de portada choque con GSAP */
#pantalla-portada.visible .portada-copy,
#pantalla-portada.visible .portada-pista {
  animation-fill-mode: forwards;
}

/* ==================================================
   SECCIÓN EVENTO — CEREMONIA Y RECEPCIÓN
   Más imagen, menos blur, más elegante
================================================== */

.seccion-evento {
  position: relative;
  width: 100%;
  min-height: 100svh;
  padding: clamp(46px, 7vh, 78px) 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #030303;
}

/* Imagen más visible */
.evento-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../img/fondo3.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: saturate(1.08) contrast(1.02) brightness(1.08);
  transform: scale(1.01);
  pointer-events: none;
}

/* Velo mucho más ligero */
.evento-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.22) 0%,
      rgba(0,0,0,.06) 28%,
      rgba(0,0,0,.10) 58%,
      rgba(0,0,0,.46) 100%
    ),
    radial-gradient(
      ellipse at center,
      transparent 46%,
      rgba(0,0,0,.36) 100%
    );
  pointer-events: none;
}

/* Marco exterior más fino */
.seccion-evento::before {
  content: '';
  position: absolute;
  inset: clamp(18px, 4vw, 34px);
  z-index: 2;
  border: 1px solid rgba(253,250,244,.10);
  box-shadow:
    inset 0 0 0 1px rgba(143,221,193,.05),
    0 0 28px rgba(0,0,0,.38);
  pointer-events: none;
}

/* Contenedor más transparente y sin blur pesado */
.evento-content {
  position: relative;
  z-index: 3;
  width: min(92vw, 540px);
  padding: clamp(34px, 6vw, 52px) clamp(18px, 5.6vw, 38px);
  text-align: center;

  background:
    linear-gradient(180deg, rgba(5,5,5,.34), rgba(5,5,5,.46)),
    radial-gradient(circle at 50% 0%, rgba(143,221,193,.08), transparent 44%),
    radial-gradient(circle at 50% 100%, rgba(244,191,204,.05), transparent 46%);
  border: 1px solid rgba(253,250,244,.12);
  box-shadow:
    0 22px 60px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(253,250,244,.035);
  backdrop-filter: none;
}

/* Bordes internos más sutiles */
.evento-content::before {
  content: '';
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(143,221,193,.12);
  pointer-events: none;
}

.evento-content::after {
  content: '';
  position: absolute;
  inset: 21px;
  border: 1px solid rgba(253,250,244,.06);
  pointer-events: none;
}

.evento-eyebrow {
  position: relative;
  z-index: 4;
  margin: 0;
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(56px, 15vw, 92px);
  line-height: .86;
  color: #FDFAF4;
  text-shadow:
    0 6px 22px rgba(0,0,0,.82),
    0 0 18px rgba(143,221,193,.12);
}

.evento-deco {
  position: relative;
  z-index: 4;
  width: min(86%, 390px);
  margin: 24px auto 30px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.evento-deco span {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(253,250,244,.38),
    rgba(143,221,193,.48),
    transparent
  );
}

.evento-deco span:last-child {
  background: linear-gradient(
    270deg,
    transparent,
    rgba(253,250,244,.38),
    rgba(244,191,204,.42),
    transparent
  );
}

.evento-deco i {
  width: 9px;
  height: 9px;
  display: block;
  transform: rotate(45deg);
  background: rgba(242,224,138,.76);
  box-shadow:
    0 0 12px rgba(242,224,138,.28),
    0 0 20px rgba(143,221,193,.12);
}

.evento-titulo {
  display: none !important;
}

/* Card más limpia, menos pesada */
.evento-card {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 22px 18px;
  display: flex;
  align-items: center;
  gap: 15px;
  text-align: left;

  background:
    linear-gradient(135deg, rgba(0,0,0,.28), rgba(253,250,244,.035)),
    rgba(253,250,244,.035);
  border: 1px solid rgba(253,250,244,.13);
  box-shadow:
    0 14px 34px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(143,221,193,.035);
}

/* Icono diferente: salón/casa */
.evento-icono {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(143,221,193,.18), rgba(253,250,244,.04));
  border: 1px solid rgba(143,221,193,.32);
  box-shadow:
    0 0 22px rgba(143,221,193,.12),
    inset 0 0 16px rgba(253,250,244,.04);
}

.evento-icono svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #8FDDC1;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(143,221,193,.24));
}

.evento-info {
  min-width: 0;
}

.evento-label {
  display: inline-block;
  margin-bottom: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(13px, 3.3vw, 16px);
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(143,221,193,.82);
  text-shadow: 0 3px 10px rgba(0,0,0,.65);
}

.evento-lugar {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 6.2vw, 36px);
  line-height: 1.04;
  color: #FDFAF4;
  text-shadow: 0 4px 14px rgba(0,0,0,.72);
}

.evento-texto {
  margin: 10px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(16px, 4.2vw, 22px);
  line-height: 1.18;
  color: rgba(253,250,244,.78);
  text-shadow: 0 3px 12px rgba(0,0,0,.68);
}

/* Botón más fino, ya no parece card pesada */
.evento-btn {
  position: relative;
  z-index: 4;
  width: fit-content;
  max-width: 100%;
  margin: 28px auto 0;
  padding: 13px 18px 13px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 4.2vw, 22px);
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  color: #FDFAF4;
  text-decoration: none;

  background: rgba(0,0,0,.28);
  border: 1px solid rgba(143,221,193,.36);
  box-shadow:
    0 12px 28px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(253,250,244,.04);
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.evento-btn::before {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(143,221,193,.42),
    rgba(244,191,204,.30),
    transparent
  );
  opacity: .65;
}

.evento-btn:hover {
  transform: translateY(-2px);
  background: rgba(0,0,0,.36);
  border-color: rgba(244,191,204,.46);
  box-shadow:
    0 16px 34px rgba(0,0,0,.42),
    0 0 22px rgba(143,221,193,.10),
    inset 0 0 0 1px rgba(253,250,244,.05);
}

.evento-btn:active {
  transform: translateY(0) scale(.98);
}

.evento-btn-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(143,221,193,.12);
  border: 1px solid rgba(143,221,193,.24);
}

.evento-btn-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #8FDDC1;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Móvil */
@media (max-width: 520px) {
  .seccion-evento {
    padding: 46px 12px;
  }

  .evento-fondo {
    background-position: center center;
    filter: saturate(1.08) contrast(1.02) brightness(1.12);
  }

  .evento-velo {
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,.04) 30%,
        rgba(0,0,0,.08) 58%,
        rgba(0,0,0,.42) 100%
      ),
      radial-gradient(
        ellipse at center,
        transparent 48%,
        rgba(0,0,0,.32) 100%
      );
  }

  .seccion-evento::before {
    inset: 16px;
  }

  .evento-content {
    width: min(94vw, 430px);
    padding: 32px 15px 36px;
    background:
      linear-gradient(180deg, rgba(5,5,5,.26), rgba(5,5,5,.40)),
      radial-gradient(circle at 50% 0%, rgba(143,221,193,.075), transparent 44%),
      radial-gradient(circle at 50% 100%, rgba(244,191,204,.045), transparent 46%);
  }

  .evento-content::before {
    inset: 9px;
  }

  .evento-content::after {
    inset: 17px;
  }

  .evento-eyebrow {
    font-size: clamp(53px, 14.5vw, 70px);
  }

  .evento-deco {
    margin: 22px auto 28px;
  }

  .evento-card {
    padding: 19px 14px;
    gap: 12px;
    align-items: flex-start;
  }

  .evento-icono {
    width: 47px;
    height: 47px;
    flex-basis: 47px;
    border-radius: 15px;
  }

  .evento-icono svg {
    width: 25px;
    height: 25px;
  }

  .evento-label {
    font-size: 12px;
    letter-spacing: 1.8px;
  }

  .evento-lugar {
    font-size: clamp(23px, 6.6vw, 29px);
  }

  .evento-texto {
    font-size: clamp(16px, 4.4vw, 19px);
  }

  .evento-btn {
    width: auto;
    min-width: 72%;
    padding: 14px 18px 14px 22px;
  }
}



























/* FIX PORTADA: asegura que Itzel Edith sí aparezca */
#pantalla-portada.visible .portada-copy {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  filter: none;
  z-index: 10;
}

.portada-copy {
  pointer-events: none;
}

.portada-nombre,
.portada-apellido,
.portada-subtitulo {
  position: relative;
  z-index: 11;
}


/* ==================================================
   FIX DEFINITIVO DE SCROLL
   La invitación scrollea dentro de #pantalla-portada
================================================== */

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  position: relative;
}

body.locked {
  overflow: hidden !important;
}

body:not(.locked) {
  overflow: hidden !important;
}

/* El sobre sí queda fijo arriba */
#pantalla-sobre {
  position: fixed;
}

/* Este será el contenedor real del scroll */
#pantalla-portada {
  position: fixed;
  inset: 0;
  z-index: 5;

  width: 100%;
  height: 100dvh;
  min-height: 100dvh;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  overflow-x: hidden;
  overflow-y: hidden;

  background: #050001;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;

  transition: opacity .8s ease, visibility .8s ease;
}

#pantalla-portada.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  touch-action: pan-y;
}

/* Cada sección ocupa pantalla completa */
#pantalla-portada section {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  flex-shrink: 0;
}

/* Evita que algo invisible tape el gesto */
#pantalla-sobre.saliendo {
  pointer-events: none !important;
}

/* Por si el navegador no reconoce dvh */
@supports not (height: 100dvh) {
  #pantalla-portada {
    height: 100vh;
    min-height: 100vh;
  }

  #pantalla-portada section {
    min-height: 100vh;
  }
}




/* ==================================================
   SECCIÓN GALERÍA — CARRUSEL DE ETAPAS
================================================== */

.seccion-galeria {
  position: relative;
  width: 100%;
  min-height: 100svh;
  padding: clamp(46px, 7vh, 76px) 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  background:
    radial-gradient(circle at 50% 12%, rgba(143, 221, 193, .10), transparent 32%),
    radial-gradient(circle at 84% 66%, rgba(216, 187, 222, .08), transparent 34%),
    radial-gradient(circle at 16% 72%, rgba(244, 191, 204, .07), transparent 32%),
    linear-gradient(180deg, #030303 0%, #0d0005 50%, #1A1A1A 100%);
}

.galeria-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(242, 224, 138, .08), transparent 34%),
    repeating-linear-gradient(
      90deg,
      rgba(253,250,244,.018) 0px,
      rgba(253,250,244,.018) 1px,
      transparent 1px,
      transparent 92px
    );
  opacity: .9;
  pointer-events: none;
}

.galeria-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78), transparent 28%, transparent 72%, rgba(0,0,0,.78)),
    radial-gradient(ellipse at center, transparent 44%, rgba(0,0,0,.62) 100%);
  pointer-events: none;
}

.seccion-galeria::before {
  content: '';
  position: absolute;
  inset: clamp(18px, 4vw, 34px);
  z-index: 2;
  border: 1px solid rgba(253,250,244,.10);
  box-shadow:
    inset 0 0 0 1px rgba(143,221,193,.06),
    0 0 34px rgba(0,0,0,.55);
  pointer-events: none;
}

.galeria-content {
  position: relative;
  z-index: 3;
  width: min(94vw, 620px);
  text-align: center;
}

.galeria-eyebrow {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(18px, 4.8vw, 26px);
  color: rgba(253,250,244,.82);
  text-shadow: 0 4px 16px rgba(0,0,0,.72);
}

.galeria-title {
  margin: 4px 0 0;
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(72px, 19vw, 122px);
  line-height: .82;
  color: #FDFAF4;
  text-shadow:
    0 8px 22px rgba(0,0,0,.86),
    0 0 22px rgba(143,221,193,.12);
}

.galeria-texto {
  width: min(92vw, 430px);
  margin: 14px auto 24px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(18px, 4.6vw, 25px);
  line-height: 1.15;
  color: rgba(253,250,244,.86);
  text-shadow: 0 4px 16px rgba(0,0,0,.72);
}

.galeria-deco {
  width: min(82%, 380px);
  margin: 14px auto 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.galeria-deco span {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(253,250,244,.42),
    rgba(143,221,193,.48),
    transparent
  );
}

.galeria-deco span:last-child {
  background: linear-gradient(
    270deg,
    transparent,
    rgba(253,250,244,.42),
    rgba(244,191,204,.44),
    transparent
  );
}

.galeria-deco i {
  width: 9px;
  height: 9px;
  display: block;
  transform: rotate(45deg);
  background: rgba(242,224,138,.78);
  box-shadow:
    0 0 12px rgba(242,224,138,.36),
    0 0 24px rgba(143,221,193,.14);
}

/* Carrusel */
.galeria-carousel {
  position: relative;
  width: min(88vw, 420px);
  aspect-ratio: 3 / 4.15;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 28px;

  background:
    linear-gradient(180deg, rgba(26,26,26,.82), rgba(5,5,5,.92)),
    radial-gradient(circle at 50% 0%, rgba(143,221,193,.10), transparent 44%);
  border: 1px solid rgba(253,250,244,.15);
  box-shadow:
    0 24px 70px rgba(0,0,0,.64),
    inset 0 0 0 1px rgba(253,250,244,.035),
    0 0 28px rgba(143,221,193,.08);
  touch-action: pan-y;
}

.galeria-carousel::before {
  content: '';
  position: absolute;
  inset: 12px;
  z-index: 4;
  border: 1px solid rgba(143,221,193,.12);
  border-radius: 20px;
  pointer-events: none;
}

.galeria-carousel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(0,0,0,.14), transparent 28%, transparent 62%, rgba(0,0,0,.42)),
    radial-gradient(ellipse at center, transparent 54%, rgba(0,0,0,.26) 100%);
  pointer-events: none;
}

.galeria-track {
  height: 100%;
  display: flex;
  transition: transform .75s cubic-bezier(.22,.8,.24,1);
  will-change: transform;
}

.galeria-slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  overflow: hidden;
}

.galeria-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.04) contrast(1.03) brightness(.94);
  transform: scale(1.015);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Botones sutiles */
.galeria-nav {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(253,250,244,.18);
  border-radius: 999px;
  display: grid;
  place-items: center;

  background: rgba(5,5,5,.34);
  color: rgba(253,250,244,.86);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(0,0,0,.42);

  transform: translateY(-50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity .25s ease,
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.galeria-nav svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.galeria-prev {
  left: 12px;
}

.galeria-next {
  right: 12px;
}

.galeria-nav:hover {
  background: rgba(143,221,193,.12);
  border-color: rgba(143,221,193,.34);
  transform: translateY(-50%) scale(1.04);
}

.galeria-nav:active {
  transform: translateY(-50%) scale(.94);
}

/* Puntitos */
.galeria-dots {
  width: min(88vw, 420px);
  margin: 18px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.galeria-dot {
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background: rgba(253,250,244,.30);
  cursor: pointer;
  transition:
    width .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.galeria-dot.is-active {
  width: 20px;
  background: rgba(143,221,193,.82);
  box-shadow:
    0 0 12px rgba(143,221,193,.34),
    0 0 20px rgba(242,224,138,.10);
}

.galeria-dot:active {
  transform: scale(.92);
}

.galeria-hint {
  margin: 13px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(13px, 3.4vw, 16px);
  font-style: italic;
  letter-spacing: 1.8px;
  color: rgba(253,250,244,.58);
  text-shadow: 0 4px 14px rgba(0,0,0,.68);
}

@media (max-width: 520px) {
  .seccion-galeria {
    padding: 44px 12px;
    align-items: center;
  }

  .seccion-galeria::before {
    inset: 16px;
  }

  .galeria-content {
    width: min(94vw, 430px);
  }

  .galeria-title {
    font-size: clamp(68px, 20vw, 92px);
  }

  .galeria-texto {
    margin-bottom: 20px;
    font-size: clamp(17px, 4.8vw, 21px);
  }

  .galeria-carousel {
    width: min(86vw, 360px);
    border-radius: 24px;
  }

  .galeria-carousel::before {
    inset: 10px;
    border-radius: 17px;
  }

  .galeria-nav {
    width: 34px;
    height: 34px;
    opacity: .78;
  }

  .galeria-prev {
    left: 10px;
  }

  .galeria-next {
    right: 10px;
  }

  .galeria-dots {
    width: min(86vw, 360px);
    gap: 6px;
  }
}

/* Para GSAP */
.galeria-eyebrow,
.galeria-deco,
.galeria-title,
.galeria-texto,
.galeria-carousel,
.galeria-dots,
.galeria-hint {
  will-change: transform, opacity, filter;
}


/* ==================================================
   ÚLTIMA SECCIÓN — RSVP / BUZÓN DE BUENOS DESEOS
   Sin blur, imagen visible, texto arriba y botón abajo
================================================== */

.seccion-rsvp {
  position: relative;
  width: 100%;
  min-height: 100svh;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  background: #030303;
}

.rsvp-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../img/fondo4.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: saturate(1.12) contrast(1.04) brightness(1.16);
  transform: scale(1.01);
  pointer-events: none;
}

/* Luces muy sutiles, sin blur fuerte */
.rsvp-luces {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 10%, rgba(143,221,193,.10), transparent 30%),
    radial-gradient(circle at 18% 74%, rgba(244,191,204,.07), transparent 34%),
    radial-gradient(circle at 84% 70%, rgba(216,187,222,.07), transparent 36%),
    radial-gradient(ellipse at 50% 0%, rgba(242,224,138,.08), transparent 40%);
  filter: none;
  pointer-events: none;
}

/* Velo ligero para leer texto, pero dejando ver la imagen */
.rsvp-velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.40) 0%,
      rgba(0,0,0,.10) 28%,
      rgba(0,0,0,.06) 52%,
      rgba(0,0,0,.48) 100%
    ),
    radial-gradient(
      ellipse at center,
      transparent 48%,
      rgba(0,0,0,.35) 100%
    );
  pointer-events: none;
}

.seccion-rsvp::before {
  content: '';
  position: absolute;
  inset: clamp(16px, 4vw, 34px);
  z-index: 3;
  border: 1px solid rgba(253,250,244,.10);
  box-shadow:
    inset 0 0 0 1px rgba(143,221,193,.06),
    0 0 34px rgba(0,0,0,.45);
  pointer-events: none;
}

/* Ya no es card con blur: ahora es layout sobre la imagen */
.rsvp-content {
  position: relative;
  z-index: 4;
  width: 100%;
  min-height: 100svh;
  padding:
    max(48px, env(safe-area-inset-top))
    18px
    max(46px, env(safe-area-inset-bottom));

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.rsvp-content::before,
.rsvp-content::after {
  display: none !important;
}

.rsvp-top {
  width: min(92vw, 620px);
  margin-top: clamp(8px, 2.8vh, 30px);
}

.rsvp-title {
  position: relative;
  z-index: 5;
  margin: 0;
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(76px, 21vw, 132px);
  line-height: .82;
  color: #FDFAF4;
  text-shadow:
    0 8px 26px rgba(0,0,0,.88),
    0 0 24px rgba(143,221,193,.14);
}

.rsvp-texto {
  position: relative;
  z-index: 5;
  width: min(100%, 470px);
  margin: clamp(14px, 2.4vh, 22px) auto 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(19px, 4.8vw, 28px);
  line-height: 1.15;
  color: rgba(253,250,244,.94);
  text-shadow:
    0 5px 18px rgba(0,0,0,.90),
    0 0 14px rgba(0,0,0,.45);
}

.rsvp-bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: clamp(16px, 4vh, 38px);
}

.rsvp-btn {
  position: relative;
  z-index: 5;
  min-width: min(88vw, 286px);
  min-height: 54px;
  padding: 13px 18px 13px 24px;
  border: 1px solid rgba(143,221,193,.52);
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 4.4vw, 22px);
  font-weight: 700;
  font-style: italic;
  color: #FDFAF4;

  background:
    linear-gradient(135deg, rgba(143,221,193,.28), rgba(216,187,222,.16)),
    rgba(0,0,0,.50);
  box-shadow:
    0 16px 38px rgba(0,0,0,.62),
    0 0 26px rgba(143,221,193,.16),
    inset 0 0 0 1px rgba(253,250,244,.06);
  backdrop-filter: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.rsvp-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(242,224,138,.54);
  box-shadow:
    0 20px 44px rgba(0,0,0,.68),
    0 0 30px rgba(143,221,193,.22);
}

.rsvp-btn:active {
  transform: scale(.97);
}

.rsvp-btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(143,221,193,.18);
  border: 1px solid rgba(253,250,244,.16);
}

.rsvp-btn-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #FDFAF4;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Ya no se usan estos elementos en el nuevo diseño */
.rsvp-eyebrow,
.rsvp-deco {
  display: none !important;
}

@media (max-width: 520px) {
  .rsvp-fondo {
    filter: saturate(1.14) contrast(1.03) brightness(1.18);
    background-position: center center;
  }

  .rsvp-velo {
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.36) 0%,
        rgba(0,0,0,.08) 30%,
        rgba(0,0,0,.05) 56%,
        rgba(0,0,0,.48) 100%
      ),
      radial-gradient(
        ellipse at center,
        transparent 50%,
        rgba(0,0,0,.34) 100%
      );
  }

  .seccion-rsvp::before {
    inset: 16px;
  }

  .rsvp-content {
    padding:
      max(44px, env(safe-area-inset-top))
      14px
      max(42px, env(safe-area-inset-bottom));
  }

  .rsvp-title {
    font-size: clamp(72px, 21vw, 96px);
  }

  .rsvp-texto {
    width: min(92vw, 390px);
    font-size: clamp(18px, 5vw, 22px);
  }

  .rsvp-bottom {
    margin-bottom: 20px;
  }
}
/* ==================================================
   MODAL RSVP
================================================== */

.rsvp-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.rsvp-modal.is-open {
  display: flex;
}

.rsvp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(9px);
}

.rsvp-modal-card {
  position: relative;
  z-index: 2;
  width: min(92vw, 450px);
  max-height: min(88svh, 720px);
  overflow-y: auto;
  padding: 34px 20px 22px;
  border-radius: 26px;

  background:
    linear-gradient(180deg, rgba(26,26,26,.96), rgba(5,5,5,.98)),
    radial-gradient(circle at 50% 0%, rgba(143,221,193,.10), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(244,191,204,.07), transparent 44%);
  border: 1px solid rgba(253,250,244,.14);
  box-shadow:
    0 28px 80px rgba(0,0,0,.74),
    inset 0 0 0 1px rgba(253,250,244,.04);
  text-align: center;
}

.rsvp-modal-card::before {
  content: '';
  position: absolute;
  inset: 11px;
  border-radius: 20px;
  border: 1px solid rgba(143,221,193,.13);
  pointer-events: none;
}

.rsvp-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(253,250,244,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: rgba(253,250,244,.88);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.rsvp-modal-eyebrow {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: rgba(143,221,193,.88);
}

.rsvp-modal-card h3 {
  margin: 4px 0 8px;
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(52px, 15vw, 76px);
  line-height: .9;
  color: #FDFAF4;
  text-shadow: 0 6px 18px rgba(0,0,0,.70);
}

.rsvp-modal-text {
  width: min(100%, 340px);
  margin: 0 auto 20px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.15;
  color: rgba(253,250,244,.78);
}

.rsvp-form {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.rsvp-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rsvp-form label span {
  padding-left: 4px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
  color: rgba(253,250,244,.82);
}

.rsvp-form input,
.rsvp-form textarea {
  width: 100%;
  border: 1px solid rgba(253,250,244,.13);
  border-radius: 16px;
  padding: 13px 14px;
  outline: none;
  resize: none;

  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  color: #FDFAF4;

  background: rgba(255,255,255,.055);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.rsvp-form input::placeholder,
.rsvp-form textarea::placeholder {
  color: rgba(253,250,244,.38);
}

.rsvp-form input:focus,
.rsvp-form textarea:focus {
  border-color: rgba(143,221,193,.48);
  box-shadow:
    0 0 0 3px rgba(143,221,193,.08),
    inset 0 0 0 1px rgba(255,255,255,.03);
  background: rgba(255,255,255,.075);
}

.rsvp-submit {
  margin-top: 6px;
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(143,221,193,.38);
  border-radius: 999px;

  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
  color: #FDFAF4;

  background:
    linear-gradient(135deg, rgba(143,221,193,.20), rgba(216,187,222,.12)),
    rgba(5,5,5,.48);
  box-shadow:
    0 12px 28px rgba(0,0,0,.45),
    0 0 20px rgba(143,221,193,.10);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.rsvp-submit:active {
  transform: scale(.97);
}

/* SweetAlert personalizado */
.swal2-popup.swal-rsvp-popup {
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(26,26,26,.98), rgba(5,5,5,.98)) !important;
  border: 1px solid rgba(253,250,244,.14) !important;
  color: #FDFAF4 !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.74) !important;
}

.swal-rsvp-title {
  font-family: 'Great Vibes', cursive !important;
  font-weight: 400 !important;
  font-size: 58px !important;
  color: #FDFAF4 !important;
}

.swal-rsvp-html {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 22px !important;
  font-style: italic !important;
  color: rgba(253,250,244,.84) !important;
}

.swal-rsvp-confirm {
  border-radius: 999px !important;
  padding: 11px 28px !important;
  background: rgba(143,221,193,.24) !important;
  border: 1px solid rgba(143,221,193,.38) !important;
  color: #FDFAF4 !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 19px !important;
  font-style: italic !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.38) !important;
}

/* Confeti */
/* Confeti al frente de TODO */
.confeti-rsvp {
  position: fixed;
  inset: 0;
  z-index: 999999 !important;
  pointer-events: none;
  overflow: hidden;
}

.confeti-rsvp span {
  position: absolute;
  top: -24px;
  display: block;
  opacity: .98;
  animation: confetiRsvpCaida linear forwards;
  will-change: transform, opacity;
}

.confeti-rsvp span.circle {
  border-radius: 999px;
}

.confeti-rsvp span.strip {
  border-radius: 4px;
}

@keyframes confetiRsvpCaida {
  0% {
    transform: translate3d(0, -30px, 0) rotate(0deg);
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  100% {
    transform: translate3d(var(--x), 112svh, 0) rotate(var(--r));
    opacity: 0;
  }
}

@keyframes confetiRsvpCaida {
  0% {
    transform: translate3d(0, -20px, 0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform: translate3d(var(--x), 110svh, 0) rotate(var(--r));
    opacity: 0;
  }
}

/* Móvil */
@media (max-width: 520px) {
  .seccion-rsvp {
    padding: 46px 12px;
  }

  .seccion-rsvp::before {
    inset: 16px;
  }

  .rsvp-content {
    width: min(94vw, 430px);
    padding: 34px 16px 38px;
  }

  .rsvp-content::before {
    inset: 9px;
  }

  .rsvp-content::after {
    inset: 17px;
  }

  .rsvp-title {
    font-size: clamp(66px, 20vw, 92px);
  }

  .rsvp-texto {
    font-size: clamp(18px, 5vw, 22px);
  }

  .rsvp-modal-card {
    padding: 32px 16px 20px;
    border-radius: 24px;
  }

  .swal-rsvp-title {
    font-size: 50px !important;
  }

  .swal-rsvp-html {
    font-size: 20px !important;
  }
}

/* Para GSAP */
.rsvp-eyebrow,
.rsvp-deco,
.rsvp-title,
.rsvp-texto,
.rsvp-btn {
  will-change: transform, opacity, filter;
}

.familia-padrinos {
  gap: 14px;
}

.padrino-separador {
  width: min(210px, 70vw);
  margin: 2px auto 4px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  opacity: 0.95;
}

.padrino-separador span {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(143, 221, 193, 0.9),
    rgba(244, 191, 204, 0.75),
    transparent
  );
  box-shadow: 0 0 10px rgba(143, 221, 193, 0.35);
}

.padrino-separador i {
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 50%;
  background: #8FDDC1;
  box-shadow:
    0 0 10px rgba(143, 221, 193, 0.9),
    0 0 18px rgba(216, 187, 222, 0.45);
}


/* ==================================================
   AJUSTE RSVP: título arriba, cara visible y sobre sutil
================================================== */

.rsvp-fondo {
  background-position: center 42%;
  filter: saturate(1.12) contrast(1.04) brightness(1.20);
}

.rsvp-velo {
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.08) 26%,
      rgba(0,0,0,.03) 55%,
      rgba(0,0,0,.50) 100%
    ),
    radial-gradient(
      ellipse at center,
      transparent 54%,
      rgba(0,0,0,.32) 100%
    );
}

.rsvp-content {
  min-height: 100dvh;
  padding:
    max(24px, env(safe-area-inset-top))
    18px
    max(34px, env(safe-area-inset-bottom));

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.rsvp-top {
  width: min(94vw, 620px);
  margin-top: clamp(4px, 1.6vh, 18px);
  transform: translateY(-18px);
}

.rsvp-title {
  margin: 0;
  font-size: clamp(82px, 22vw, 138px);
  line-height: .76;
}

.rsvp-texto {
  width: min(92vw, 520px);
  margin: 16px auto 0;
  font-size: clamp(21px, 5.2vw, 30px);
  line-height: 1.06;
}

.rsvp-texto-sobre {
  width: min(88vw, 470px);
  margin-top: 12px;
  padding: 12px 16px;

  font-size: clamp(17px, 4.2vw, 22px);
  line-height: 1.14;
  color: rgba(253,250,244,.88);

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(143,221,193,.20);
  border-radius: 22px;
  box-shadow:
    0 10px 28px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(253,250,244,.035);
}

.rsvp-bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-bottom: clamp(6px, 1.5vh, 18px);
}

@media (max-width: 520px) {
  .rsvp-fondo {
    background-position: center 38%;
  }

  .rsvp-content {
    padding:
      max(20px, env(safe-area-inset-top))
      14px
      max(30px, env(safe-area-inset-bottom));
  }

  .rsvp-top {
    margin-top: 0;
    transform: translateY(-22px);
  }

  .rsvp-title {
    font-size: clamp(76px, 21vw, 104px);
    line-height: .74;
  }

  .rsvp-texto {
    margin-top: 13px;
    font-size: clamp(20px, 5.4vw, 25px);
  }

  .rsvp-texto-sobre {
    margin-top: 10px;
    padding: 11px 14px;
    font-size: clamp(16px, 4.2vw, 18px);
  }

  .rsvp-btn {
    width: min(82vw, 330px);
  }
}

/* ==================================================
   FIX RSVP: dejar libre la cara de la chica
================================================== */

.rsvp-fondo {
  background-position: center 42% !important;
  filter: saturate(1.12) contrast(1.04) brightness(1.18) !important;
}

.rsvp-content {
  min-height: 100dvh;
  padding:
    max(18px, env(safe-area-inset-top))
    16px
    max(22px, env(safe-area-inset-bottom));

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.rsvp-top {
  width: min(94vw, 620px);
  margin-top: 0;
  transform: translateY(-8px);
}

.rsvp-title {
  margin: 0;
  font-size: clamp(78px, 21vw, 132px);
  line-height: .74;
}

.rsvp-bottom {
  width: min(92vw, 560px);
  padding-bottom: clamp(8px, 2vh, 22px);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.rsvp-texto-abajo {
  width: min(88vw, 500px);
  margin: 0 auto;
  padding: 12px 16px;

  font-size: clamp(16px, 4vw, 21px);
  line-height: 1.12;
  font-style: italic;
  color: rgba(253,250,244,.92);

  background: rgba(0,0,0,.30);
  border: 1px solid rgba(143,221,193,.22);
  border-radius: 22px;
  text-shadow: 0 4px 14px rgba(0,0,0,.88);
  box-shadow:
    0 12px 28px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(253,250,244,.035);
  backdrop-filter: blur(2px);
}

.rsvp-btn {
  margin-top: 0 !important;
}

@media (max-width: 520px) {
  .rsvp-fondo {
    background-position: center 39% !important;
  }

  .rsvp-content {
    padding:
      max(16px, env(safe-area-inset-top))
      12px
      max(18px, env(safe-area-inset-bottom));
  }

  .rsvp-top {
    transform: translateY(-12px);
  }

  .rsvp-title {
    font-size: clamp(72px, 20vw, 100px);
    line-height: .72;
  }

  .rsvp-bottom {
    gap: 12px;
    padding-bottom: 10px;
  }

  .rsvp-texto-abajo {
    width: min(86vw, 360px);
    padding: 10px 13px;
    font-size: clamp(15px, 4vw, 17px);
    line-height: 1.1;
  }

  .rsvp-btn {
    width: min(82vw, 330px);
  }
}