/* ==========================================================
   Diseño "Antifaz" · XV años · baile de máscaras
   terciopelo vino + luz de velas que sigue el dedo → arrastrar el antifaz → nombre en caligrafía dorada
   ========================================================== */

:root {
  --negro: #0b0507;
  --vino: #5c0f24;
  --vino-osc: #2b0711;
  --vino-cl: #a3244a;
  --oro: #d8b46a;
  --oro-cl: #f5e1a4;
  --oro-osc: #9a7432;
  --crema: #f1e6d6;
  --suave: rgba(241, 230, 214, .7);
  --oro-texto: linear-gradient(100deg, #b8893a 0%, #fff1bf 32%, #d8b46a 52%, #fff4cf 74%, #a67c2e 100%);
  --antifaz-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-230 -112 460 180'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1bf'/%3E%3Cstop offset='.5' stop-color='%23d8b46a'/%3E%3Cstop offset='1' stop-color='%239a7432'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' fill-rule='evenodd' d='M0 -40C-20 -58 -50 -70 -85 -66C-130 -62 -170 -80 -222 -100C-212 -62 -220 -30 -206 2C-190 40 -150 62 -105 62C-70 62 -45 50 -28 34C-18 24 -10 16 0 14C10 16 18 24 28 34C45 50 70 62 105 62C150 62 190 40 206 2C220 -30 212 -62 222 -100C170 -80 130 -62 85 -66C50 -70 20 -58 0 -40ZM-165 -16C-140 -46 -80 -44 -48 -8C-68 20 -132 22 -165 -16ZM165 -16C140 -46 80 -44 48 -8C68 20 132 22 165 -16Z'/%3E%3C/svg%3E");

  --s-fondo: transparent;
  --s-tinta: var(--crema);
  --s-suave: var(--suave);
  --s-acento: var(--oro);
  --s-acento-tinta: #2a0610;
  --s-tarjeta: linear-gradient(170deg, rgba(92, 15, 36, .42), rgba(16, 4, 8, .86));
  --s-borde: rgba(216, 180, 106, .3);
  --s-radio: 20px;
  --s-sombra: 0 22px 40px -24px rgba(0, 0, 0, .95);
  --s-fuente: "Cormorant Garamond", Georgia, serif;
  --s-titulo: "Great Vibes", cursive;
  --s-titulo-tam: clamp(2.6rem, 11vw, 3.4rem);
  --s-etiqueta: "Cinzel", Georgia, serif;
  --s-num: "Cinzel", Georgia, serif;
  --s-titulo-color: var(--oro-cl);
  --s-btn-linea-color: var(--oro-cl);
  color-scheme: dark;
}

body {
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(92, 15, 36, .55), transparent 60%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 1.5%, rgba(255, 220, 190, .02) 3%, rgba(0, 0, 0, .28) 6%),
    linear-gradient(180deg, #120408 0%, #1f060e 50%, #0d0306 100%);
  background-attachment: fixed;
  color: var(--crema);
  font-family: var(--s-fuente);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Hero: baile de máscaras ---------- */
.baile {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto auto auto 1.25fr;
  justify-items: center;
  padding: calc(env(safe-area-inset-top) + 26px) 16px calc(env(safe-area-inset-bottom) + 60px);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: var(--crema);
  background: var(--negro);
}
.baile:not(.listo) { touch-action: none; }   /* mientras está el antifaz, el dedo mueve la luz (no la página) */

/* Terciopelo en penumbra */
.terciopelo {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(90% 55% at 50% 42%, rgba(92, 15, 36, .5), transparent 72%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .42) 0 2%, rgba(255, 220, 200, .025) 4.5%, rgba(0, 0, 0, .22) 7%, rgba(0, 0, 0, .42) 9%),
    linear-gradient(180deg, #14050a 0%, #24070f 55%, #0c0305 100%);
}
.terciopelo::after { content: ""; position: absolute; inset: 0; background: var(--grano); opacity: .9; }

/* Terciopelo iluminado: solo se ve donde está la luz (máscara radial que sigue el dedo) */
.luz-capa {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .34) 0 2%, rgba(255, 214, 170, .1) 4.5%, rgba(0, 0, 0, .14) 7%, rgba(0, 0, 0, .34) 9%),
    radial-gradient(70% 50% at 50% 45%, #9a2241, transparent 75%),
    linear-gradient(180deg, #5e1124 0%, #861b35 50%, #4a0c1c 100%);
  -webkit-mask-image: radial-gradient(circle var(--lr, 170px) at var(--lx, 50%) var(--ly, 36%), #000 0%, rgba(0, 0, 0, .85) 30%, rgba(0, 0, 0, .32) 64%, transparent 100%);
  mask-image: radial-gradient(circle var(--lr, 170px) at var(--lx, 50%) var(--ly, 36%), #000 0%, rgba(0, 0, 0, .85) 30%, rgba(0, 0, 0, .32) 64%, transparent 100%);
}
.damasco { position: absolute; inset: 0; width: 100%; height: 100%; }
.secreto {
  position: absolute;
  margin: 0;
  color: #f6d991;
  text-shadow: 0 0 14px rgba(255, 196, 120, .5);
  pointer-events: none;
}
.secreto--1 { left: 5%; top: 12%; display: grid; justify-items: center; transform: rotate(-8deg); }
.secreto__dia { font-family: "Cinzel", serif; font-size: clamp(3.4rem, 15vw, 5.6rem); font-weight: 600; line-height: .9; }
.secreto__mes { font-family: "Great Vibes", cursive; font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1; }
.secreto--2 { right: 3%; top: 34%; writing-mode: vertical-rl; font-family: "Cinzel", serif; font-size: clamp(1.3rem, 5.4vw, 1.9rem); letter-spacing: .4em; }
.secreto--3 { left: 4%; bottom: 25%; max-width: 8em; font-family: "Great Vibes", cursive; font-size: clamp(1.5rem, 6.4vw, 2.1rem); line-height: 1.1; text-align: left; transform: rotate(-7deg); }
.secreto--4 { right: 5%; top: 6%; max-width: 13em; font-family: "Cinzel", serif; font-size: .64rem; letter-spacing: .28em; line-height: 1.8; text-transform: uppercase; text-align: right; }

/* Resplandor cálido que acompaña a la luz */
.luz-brillo {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 150, .32) 0%, rgba(255, 170, 90, .12) 34%, rgba(255, 150, 80, 0) 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate3d(-9999px, 0, 0);
  will-change: transform;
}

/* Candelabros */
.candelabro {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 4px);
  z-index: 0;
  width: clamp(58px, 16vw, 124px);
  height: auto;
  aspect-ratio: 120 / 200;
  overflow: visible;
  pointer-events: none;
}
.candelabro--izq { left: max(4px, 2%); }
.candelabro--der { right: max(4px, 2%); transform: scaleX(-1); }
.llama__fuego { transform-box: fill-box; transform-origin: 50% 100%; animation: parpadeo 1.25s ease-in-out infinite alternate; }
.llama__halo { transform-box: fill-box; transform-origin: center; animation: halo 2.2s ease-in-out infinite alternate; }
.llama--1 .llama__fuego { animation-duration: 1.05s; animation-delay: -.4s; }
.llama--2 .llama__fuego { animation-duration: 1.4s; animation-delay: -.8s; }
.llama--1 .llama__halo { animation-delay: -1s; }
.candelabro--der .llama__fuego { animation-delay: -.6s; }
@keyframes parpadeo {
  0% { transform: scale(1, 1) skewX(0deg); }
  30% { transform: scale(.9, 1.1) skewX(4deg); }
  60% { transform: scale(1.06, .93) skewX(-3deg); }
  100% { transform: scale(.96, 1.05) skewX(1deg); }
}
@keyframes halo { from { opacity: .7; transform: scale(.9); } to { opacity: 1; transform: scale(1.1); } }

/* Textos (antes / después) */
.baile__arriba, .baile__abajo { position: relative; z-index: 3; display: grid; justify-items: center; }
.baile__arriba { grid-row: 2; }
.baile__abajo { grid-row: 4; min-height: 132px; align-content: start; }
.baile__arriba > *, .baile__abajo > * { grid-area: 1 / 1; margin: 0; transition: opacity .9s ease, transform .9s ease, visibility 0s; }

.baile__q {
  margin: 0;
  padding: 0 .2em;
  font-family: "Great Vibes", cursive;
  font-size: clamp(2rem, 8.4vw, 2.9rem);
  line-height: 1.15;
  background: var(--oro-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6));
}
.baile__sub { margin: 6px 0 0; font-family: "Cinzel", serif; font-size: .62rem; letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; color: rgba(245, 225, 164, .72); }
.baile__fecha {
  align-self: end;
  font-family: "Cinzel", serif;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--oro-cl);
  opacity: 0;
  transform: translateY(10px);
}
.baile__fecha i { font-style: normal; margin: 0 .7em; font-size: .6em; color: var(--vino-cl); }
.baile.revelado .baile__pre { opacity: 0; transform: translateY(-12px); }
.baile.revelado .baile__fecha { opacity: 1; transform: none; transition-delay: 2.6s; }

.baile__antes { display: grid; justify-items: center; gap: 10px; padding-top: 4px; }
.baile.revelado .baile__antes { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.baile__luz { margin: 0; max-width: 22em; font-style: italic; font-size: 1.02rem; line-height: 1.3; color: rgba(245, 225, 164, .82); }
.baile__hint { margin: 0; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: "Cinzel", serif; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(241, 230, 214, .78); }
.baile__dedo { flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--oro); box-shadow: 0 0 8px rgba(216, 180, 106, .7); animation: dedo 2.4s ease-in-out infinite; }
@keyframes dedo { 0% { transform: translateX(-6px); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateX(14px); opacity: 1; } 100% { transform: translateX(18px); opacity: 0; } }
.baile.pista .baile__hint { animation: pista .6s ease 2; }
@keyframes pista { 50% { transform: scale(1.08); color: var(--oro-cl); } }

.btn-quitar {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 2px;
  padding: 0 22px;
  border: 1px solid rgba(216, 180, 106, .75);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(122, 21, 48, .7), rgba(43, 7, 17, .88));
  color: var(--oro-cl);
  font-family: "Cinzel", serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 230, 180, .25);
  transition: transform .2s ease, box-shadow .3s;
}
.btn-quitar:active { transform: scale(.96); }
.btn-quitar:focus-visible { outline: 2px solid var(--oro-cl); outline-offset: 3px; }
.btn-quitar__ico { width: 28px; height: 11px; flex: none; color: var(--oro); }

.baile__despues { opacity: 0; pointer-events: none; display: grid; justify-items: center; }
.baile.revelado .baile__despues { opacity: 1; transition-delay: .2s; }
.firma { margin: 0; width: min(90vw, 500px); line-height: 0; outline: none; }
.firma__svg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 170; overflow: visible; filter: drop-shadow(0 0 10px rgba(255, 196, 110, .35)); }
.firma__txt {
  fill: url(#firmaOro);
  fill-opacity: 0;
  stroke: url(#firmaOro);
  stroke-width: 1.4;
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
}
.baile.firmando .firma__txt { animation: trazar 3.2s cubic-bezier(.45, .1, .3, 1) forwards, rellenar 1.4s ease 2.1s forwards; }
@keyframes trazar { from { stroke-dashoffset: 1100; } to { stroke-dashoffset: 0; } }
@keyframes rellenar { from { fill-opacity: 0; } to { fill-opacity: 1; } }
.baile__xv { margin: 4px 0 0; font-family: "Cinzel", serif; font-size: .7rem; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--oro-cl); opacity: 0; transform: translateY(8px); transition: opacity 1s ease, transform 1s ease; }
.baile__xv i { font-style: normal; color: var(--vino-cl); }
.baile.revelado .baile__xv { opacity: 1; transform: none; transition-delay: 2.2s; }

.desliza-c { color: var(--oro-cl); z-index: 4; }

/* ---------- Escenario: retrato + antifaz ---------- */
.escenario {
  --p: min(60vw, 290px, 35svh);
  grid-row: 3;
  position: relative;
  z-index: 2;
  width: var(--p);
  height: calc(var(--p) * 1.25);
  margin: calc(var(--p) * .17) 0 calc(var(--p) * .07);
}

.retrato { position: absolute; inset: 0; }
.retrato__oval {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: #140509;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 34px 60px -24px rgba(0, 0, 0, .9), 0 0 70px rgba(142, 31, 60, .4);
  transform: translateZ(0);
  transition: box-shadow 1.6s ease;
}
.baile.revelado .retrato__oval { box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 34px 60px -24px rgba(0, 0, 0, .9), 0 0 80px rgba(255, 200, 120, .35); }
.retrato__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: blur(5px) saturate(.6);
  transform: scale(1.1);
  transition: filter 1.4s ease, transform 2.4s cubic-bezier(.2, .8, .2, 1);
}
.baile.revelado .retrato__foto { filter: none; transform: scale(1); }
.retrato__velo {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% 50%, rgba(11, 3, 6, .8), rgba(11, 3, 6, .96));
}
.baile.revelado .retrato__velo { opacity: 0 !important; transition: opacity 1.2s ease; }
.retrato__marco { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; overflow: visible; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7)); }

.antifaz {
  position: absolute;
  z-index: 6;
  left: calc(50% - var(--p) * .8);
  top: calc(var(--p) * -.0683);
  width: calc(var(--p) * 1.6);
  height: calc(var(--p) * 1.1733);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 40px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 59%;
  will-change: transform;
}
.antifaz:active, .antifaz.arrastrando { cursor: grabbing; }
.antifaz:focus-visible { outline: 2px solid var(--oro-cl); outline-offset: -6px; }
.antifaz.fuera { pointer-events: none; }
.antifaz__flota { display: block; width: 100%; height: 100%; animation: flotar 5.5s ease-in-out infinite alternate; }
.antifaz.arrastrando .antifaz__flota, .antifaz.fuera .antifaz__flota { animation-play-state: paused; }
@keyframes flotar { from { transform: translateY(0) rotate(-.8deg); } to { transform: translateY(-7px) rotate(.8deg); } }
.antifaz__svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.af-brillo { animation: barrido 5.5s ease-in-out infinite; }
@keyframes barrido { 0%, 55% { transform: translateX(-250px); } 100% { transform: translateX(320px); } }
.af-chispa { transform-box: fill-box; transform-origin: center; opacity: 0; animation: chispa 2.6s ease-in-out infinite; }
.af-chispa--2 { animation-delay: -.9s; }
.af-chispa--3 { animation-delay: -1.3s; }
.af-chispa--4 { animation-delay: -2.1s; }
.af-chispa--5 { animation-delay: -.4s; animation-duration: 3.1s; }
.af-chispa--6 { animation-delay: -1.8s; animation-duration: 3.4s; }
@keyframes chispa {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.2) rotate(45deg); }
  60% { opacity: .85; transform: scale(.9) rotate(70deg); }
  80% { opacity: 0; transform: scale(.3) rotate(90deg); }
}

/* Plumas que caen al quitar el antifaz */
.pluma-cae {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 58;
  width: 28px;
  height: 74px;
  margin: -37px 0 0 -14px;
  pointer-events: none;
  opacity: 0;
  animation: caerPluma var(--dur, 3.2s) cubic-bezier(.25, .6, .45, 1) forwards;
}
.pluma-cae svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes caerPluma {
  0% { transform: translate(var(--x0), var(--y0)) rotate(var(--r0)) scale(.5); opacity: 0; }
  8% { opacity: 1; }
  32% { transform: translate(calc(var(--x0) + var(--dx) * .7), calc(var(--y0) + var(--dy))) rotate(calc(var(--r0) + 50deg)) scale(1); opacity: 1; }
  66% { transform: translate(calc(var(--x0) + var(--dx) * .9 + 34px), calc(var(--y0) + var(--dy) + 120px)) rotate(calc(var(--r0) - 20deg)) scale(1); opacity: .95; }
  100% { transform: translate(calc(var(--x0) + var(--dx) - 18px), calc(var(--y0) + var(--dy) + 260px)) rotate(calc(var(--r0) + 35deg)) scale(.95); opacity: 0; }
}

/* ---------- Secciones ---------- */
.s-titulo {
  padding: 0 .2em;
  background: var(--oro-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.s-titulo::before {
  content: "";
  display: block;
  width: 60px;
  height: 24px;
  margin: 0 auto 10px;
  background: var(--antifaz-ico) center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(216, 180, 106, .45));
}

.dedicatoria { padding-top: 96px; }
.dedicatoria__mono {
  width: 104px;
  height: 104px;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a0816, #0b0507 75%);
  box-shadow: 0 0 0 1px var(--oro), 0 0 0 6px var(--negro), 0 0 0 7px rgba(216, 180, 106, .55), 0 0 44px rgba(216, 180, 106, .28);
}
.dedicatoria__mono span {
  padding: 0 .15em;
  font-family: "Great Vibes", cursive;
  font-size: 3.4rem;
  line-height: 1;
  background: var(--oro-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dedicatoria__texto { margin: 30px 0 0; max-width: 21em; font-style: italic; font-size: clamp(1.22rem, 5vw, 1.42rem); line-height: 1.6; }
.dedicatoria__familia { margin-top: 26px; }
.dedicatoria__t { margin: 18px 0 0; font-family: "Cinzel", serif; font-size: .64rem; letter-spacing: .32em; text-transform: uppercase; color: var(--suave); }
.dedicatoria__n { margin: 4px 0 0; font-family: "Great Vibes", cursive; font-size: 1.95rem; line-height: 1.25; color: var(--oro-cl); }

/* Tarjeta sellada con lacre dorado */
.sobre { --sw: min(calc(100vw - 48px), 340px); position: relative; width: var(--sw); padding-top: calc(var(--sw) * .36); }
.sobre__hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--sw) * .36 - 34px);
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: .62rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--oro-cl);
  transition: opacity .5s ease;
  animation: latido 2.2s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.sobre.abierta .sobre__hint { opacity: 0; animation: none; }
.sobre__caja { position: relative; width: 100%; aspect-ratio: 4 / 3; perspective: 1000px; }
.sobre__fondo {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 6px;
  background: linear-gradient(160deg, #4a0c1e, #1d050b);
  box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .95), 0 0 0 1px rgba(216, 180, 106, .28);
}
.sobre__carta {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 4%;
  height: 92%;
  z-index: 2;
  margin: 0;
  padding: 14px 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #c9a24a;
  border-radius: 4px;
  outline: 1px solid rgba(154, 116, 50, .5);
  outline-offset: -6px;
  background: radial-gradient(120% 90% at 50% 0%, #fbf4e6, #efe1c6);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7);
  color: #3a0816;
  text-align: center;
  transition: transform 1s cubic-bezier(.2, .8, .2, 1) .95s;
}
.sobre.abierta .sobre__carta { transform: translateY(-50%); }
.carta__t { margin: 0; font-family: "Cinzel", serif; font-size: .54rem; letter-spacing: .24em; text-transform: uppercase; color: #7a5a1c; }
.carta__xv { margin: 4px 0 0; font-family: "Great Vibes", cursive; font-size: 1.4rem; line-height: 1.15; color: var(--vino); }
.carta__n { margin: 4px 0 0; font-style: italic; font-size: .98rem; line-height: 1.25; color: #4a1a22; }
.carta__pases { margin: 6px 0 0; font-family: "Cinzel", serif; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: #7a5a1c; }
.carta__pases b { font-size: 1.35rem; font-weight: 600; letter-spacing: 0; color: var(--vino); vertical-align: -2px; }
.carta__fecha { margin: 4px 0 0; font-family: "Cinzel", serif; font-size: .54rem; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; color: #7a5a1c; }

.sobre__frente {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px 8%;
  pointer-events: none;
}
.sobre__frente-svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, .5)); }
.sobre__req { position: relative; margin: 0; font-family: "Cinzel", serif; font-size: .56rem; letter-spacing: .28em; padding-left: .28em; text-transform: uppercase; color: rgba(245, 225, 164, .88); }
.sobre__nombre {
  position: relative;
  margin: 0;
  max-width: 100%;
  padding: 0 .2em;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.7rem, 7.4vw, 2.2rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
  background: var(--oro-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sobre__solapa {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 52%;
  z-index: 4;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.4, .1, .3, 1) .35s, z-index 0s .75s;
}
.solapa__cara { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.solapa__dorso { transform: rotateX(180deg); }
.sobre.abierta .sobre__solapa { transform: rotateX(180deg); z-index: 1; }

.lacre {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 6;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lacre:focus-visible { outline: 2px solid var(--oro-cl); outline-offset: 4px; }
.lacre__mitad { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.3, .6, .4, 1), opacity .8s ease; }
.lacre__mitad svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .6)); }
.lacre__mitad--izq { clip-path: inset(0 50% 0 0); }
.lacre__mitad--der { clip-path: inset(0 0 0 50%); }
.lacre:not([aria-expanded="true"]) .lacre__mitad { animation: tiembla 4s ease-in-out infinite; }
@keyframes tiembla { 0%, 86%, 100% { transform: rotate(0deg); } 90% { transform: rotate(-5deg); } 94% { transform: rotate(4deg); } }
.lacre__pulso { position: absolute; inset: -9px; border-radius: 50%; border: 1.5px solid rgba(245, 225, 164, .75); animation: pulso 2.2s ease-out infinite; }
@keyframes pulso { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.3); opacity: 0; } }
.sobre.abierta .lacre { pointer-events: none; }
.sobre.abierta .lacre__pulso { display: none; }
.sobre.abierta .lacre__mitad--izq { transform: translate(-30px, 46px) rotate(-30deg); opacity: 0; }
.sobre.abierta .lacre__mitad--der { transform: translate(30px, 52px) rotate(26deg); opacity: 0; }

/* Cuenta, itinerario, galería */
.s-cuenta__caja { background: linear-gradient(180deg, rgba(92, 15, 36, .55), rgba(16, 4, 8, .9)); }
.s-cuenta__num { color: var(--oro-cl); }
.s-cuenta__fin { font-family: "Great Vibes", cursive; color: var(--oro-cl); }
.s-evento { position: relative; background: var(--s-tarjeta); box-shadow: var(--s-sombra), inset 0 0 0 6px rgba(0, 0, 0, 0), inset 0 0 0 7px rgba(216, 180, 106, .16); }
.s-evento::before { content: ""; position: absolute; left: 50%; top: -1px; width: 60px; height: 2px; margin-left: -30px; background: linear-gradient(90deg, transparent, var(--oro), transparent); }
.s-evento__icono { color: var(--oro-cl); border-color: rgba(216, 180, 106, .6); background: radial-gradient(circle, rgba(92, 15, 36, .7), rgba(16, 4, 8, .9)); }
.s-evento__titulo { color: var(--oro-cl); }
.s-evento__hora { font-family: "Great Vibes", cursive; font-size: 2.3rem; color: var(--oro); }
.s-foto { padding: 5px; border: 1px solid rgba(216, 180, 106, .5); background: #140509; }
.s-foto img { border-radius: calc(var(--s-radio) - 5px); filter: saturate(.92) contrast(1.04); }
.s-galeria__rejilla--3 .s-foto:not(:first-child) { border-radius: 200px 200px 18px 18px; }
.s-galeria__rejilla--3 .s-foto:not(:first-child) img { border-radius: 200px 200px 13px 13px; }

/* Vestimenta: antifaz obligatorio */
.s-vestimenta__tipo { font-family: "Cinzel", serif; font-size: 1rem; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--oro-cl); }
.obligatorio {
  position: relative;
  max-width: 22em;
  margin: 22px 0 6px;
  padding: 22px 24px 20px;
  border: 1px solid rgba(216, 180, 106, .55);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(122, 21, 48, .5), rgba(11, 5, 7, .9));
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0), inset 0 0 0 6px rgba(216, 180, 106, .2), 0 22px 40px -24px #000;
}
.obligatorio__ico { display: block; width: 124px; height: 48px; margin: 0 auto; color: var(--oro); filter: drop-shadow(0 0 10px rgba(216, 180, 106, .5)); animation: icoLuz 3s ease-in-out infinite alternate; }
@keyframes icoLuz { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } }
.obligatorio__t {
  margin: 10px 0 4px;
  font-family: "Cinzel", serif;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
  background: var(--oro-texto);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.obligatorio__n { margin: 0; font-style: italic; font-size: 1.05rem; line-height: 1.45; color: var(--suave); }
.s-paleta li { border-color: rgba(216, 180, 106, .45); }

/* Banda con velas */
.banda { position: relative; margin: 10px 24px; overflow: hidden; border-radius: 220px 220px 24px 24px; border: 1px solid rgba(216, 180, 106, .55); box-shadow: var(--s-sombra), 0 0 0 5px var(--negro), 0 0 0 6px rgba(216, 180, 106, .25); }
.banda img { display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.banda figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 80px 26px 28px;
  background: linear-gradient(180deg, transparent, rgba(43, 7, 17, .92));
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.45rem, 6.4vw, 1.8rem);
  line-height: 1.3;
  text-align: center;
  color: var(--oro-cl);
}

.s-rsvp__saludo { font-family: "Great Vibes", cursive; font-size: 2.1rem; color: var(--oro-cl); }
.s-btn--lleno { background: linear-gradient(120deg, #b8893a, #f5e1a4 45%, #d8b46a 70%, #9a7432); color: #2a0610; }
.s-pie__n { font-family: "Great Vibes", cursive; font-size: 3rem; color: var(--oro-cl); }
.btn-musica { background: var(--vino-osc); color: var(--oro-cl); box-shadow: var(--s-sombra), 0 0 0 1px rgba(216, 180, 106, .5); }

@media (min-width: 700px) {
  .escenario { --p: min(36vw, 300px, 40svh); }
}

@media (prefers-reduced-motion: reduce) {
  .antifaz__flota, .af-brillo, .af-chispa, .llama__fuego, .llama__halo, .baile__dedo, .sobre__hint,
  .lacre__mitad, .lacre__pulso, .obligatorio__ico { animation: none !important; }
  .af-chispa { opacity: .8; }
  .firma__txt { stroke-dashoffset: 0; fill-opacity: 1; }
  .baile.firmando .firma__txt { animation: none; }
  .pluma-cae { display: none; }
  .sobre__solapa, .sobre__carta, .lacre__mitad { transition-duration: .3s; transition-delay: 0s; }
}