/* 12 · Noche de Ópera — telón de terciopelo borgoña, luz teatral cálida y detalles dorados.
   El telón cubre la portada y se abre al abrir el sobre; la apertura es el foco del escenario, que con el scroll
   se vuelve panorámica mientras el telón termina de salir. Luego el telón reaparece, discreto, en los márgenes.
   Cada sección entra como un acto (I a VI) y la cuenta pasa los días como página. */

.c-xv-noche-de-opera { --nombre-color: #F6EFE4; }
/* Cada paño ocupa el alto de la pantalla; cerrados se tocan al centro, al abrir se recogen a los lados (con su borla). */
.c-xv-noche-de-opera { --pano: 60vh; }
.c-xv-noche-de-opera .op-telon { position: absolute; top: -3vh; height: 106vh; width: calc(var(--pano) * 1.06); transition: translate 2.4s cubic-bezier(.77,0,.175,1); filter: drop-shadow(0 0 40px rgba(0,0,0,.55)); }
.c-xv-noche-de-opera .op-pano { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.c-xv-noche-de-opera .op-borla { position: absolute; width: 26%; top: 46%; transform: rotate(-8deg); }
.c-xv-noche-de-opera .op-izq { left: calc(50vw - var(--pano) * 1.06 + 2vw); transform: translateX(calc(var(--p, 0) * -20vw)); }
.c-xv-noche-de-opera .op-izq .op-borla { right: 26%; }
.c-xv-noche-de-opera .op-der { right: calc(50vw - var(--pano) * 1.06 + 2vw); transform: translateX(calc(var(--p, 0) * 20vw)); }
.c-xv-noche-de-opera .op-der .op-borla { left: 26%; transform: scaleX(-1) rotate(-8deg); }
html.e-abierto .c-xv-noche-de-opera .op-izq { translate: calc(-50vw + 16vw) 0; }
html.e-abierto .c-xv-noche-de-opera .op-der { translate: calc(50vw - 16vw) 0; }
.c-xv-noche-de-opera .op-monograma { position: absolute; left: 50%; top: calc(var(--a1t) - 9vh); width: min(14vh, 22vw); aspect-ratio: 1; transform: translateX(-50%); display: grid; place-items: center; opacity: calc(1 - var(--p, 0) * 2); z-index: 4; }
.c-xv-noche-de-opera .op-monograma img { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-xv-noche-de-opera .op-monograma span { font-family: var(--script); font-size: min(6vh, 9vw); color: #D4B57E; }
.c-xv-noche-de-opera .op-foco { position: absolute; inset: 0; background: radial-gradient(50% 60% at 50% 70%, rgba(246, 239, 228, .55), rgba(90, 35, 52, .5) 60%, #21191C); }
.c-xv-noche-de-opera .e-nombre { color: #F6EFE4; }
.c-xv-noche-de-opera .e-evento { color: #D4B57E; letter-spacing: .5em; }
.c-xv-noche-de-opera .e-apertura { filter: drop-shadow(0 0 40px rgba(246, 239, 228, .2)); }
.c-xv-noche-de-opera .base-escena, .c-xv-noche-de-opera { --a1t: 22vh; }

/* El telón en los márgenes después de la portada (fijo, discreto, detrás del contenido). */
.op-margenes { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: clamp(0, (var(--avance, 0) - .08) * 8, .9); }
.op-m { position: absolute; top: -2vh; height: 104vh; width: 9vw; object-fit: cover; filter: brightness(.85); }
.op-m-izq { left: -3vw; object-position: right; }
.op-m-der { right: -3vw; object-position: left; }

/* Entrada: el telón cerrado; la salida «abre» lo parte al medio. */
.c-xv-noche-de-opera .xv-entrada { background: #21191C; }
.c-xv-noche-de-opera .en-telon-izq, .c-xv-noche-de-opera .en-telon-der { position: absolute; top: 0; height: 100%; width: 51%; object-fit: fill; }
.c-xv-noche-de-opera .en-telon-izq { left: 0; object-position: right; }
.c-xv-noche-de-opera .en-telon-der { right: 0; object-position: left; }
.c-xv-noche-de-opera .xv-entrada-contenido { background: radial-gradient(closest-side, rgba(33, 25, 28, .8), rgba(33, 25, 28, .55) 70%, transparent); padding: 50px 60px; border-radius: 50%; }
.c-xv-noche-de-opera .xv-entrada .xv-monograma { color: #D4B57E; border-color: #C5A46A; }

.vj-medalla { position: relative; width: 130px; aspect-ratio: 1; display: grid; place-items: center; }
.vj-medalla img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vj-medalla span { font-family: var(--script); font-size: 2.6rem; color: #D4B57E; }

.c-xv-noche-de-opera .e-numero { font-family: var(--script); font-weight: 400; letter-spacing: 0; -webkit-text-stroke: 1px rgba(197, 164, 106, .4); }
.c-xv-noche-de-opera .e-rotulo { color: #D4B57E; letter-spacing: .3em; }
.c-xv-noche-de-opera .xv-titulo { font-weight: 300; letter-spacing: .01em; }
.c-xv-noche-de-opera .xv-titulo .xv-script { color: #D4B57E; }
.c-xv-noche-de-opera .e-mes { color: #D4B57E; }
.c-xv-noche-de-opera .e-dia { color: #F6EFE4; }
/* Luz marfil en las zonas de contenido. */
.c-xv-noche-de-opera .e-lugar, .c-xv-noche-de-opera .e-rsvp, .c-xv-noche-de-opera .e-detalles .xv-superficie {
	--tinta: #21191C; --tinta-2: #5A4A48; --acento: #7A2E44; --linea: rgba(33, 25, 28, .16); --papel: #F6EFE4; --boton: #5A2334; --boton-tinta: #F6EFE4;
	background: #F6EFE4; color: #21191C; border-color: rgba(197, 164, 106, .6);
}
.c-xv-noche-de-opera .e-cierre { background: radial-gradient(45% 45% at 50% 45%, rgba(246, 239, 228, .18), transparent 70%); }
@media (max-width: 760px) {
	.c-xv-noche-de-opera { --pano: 48vw; }
	.c-xv-noche-de-opera .op-telon { width: 56vw; }
	.c-xv-noche-de-opera .op-izq { left: -4vw; }
	.c-xv-noche-de-opera .op-der { right: -4vw; }
	html.e-abierto .c-xv-noche-de-opera .op-izq { translate: -36vw 0; }
	html.e-abierto .c-xv-noche-de-opera .op-der { translate: 36vw 0; }
	.op-margenes { display: none; }
	.c-xv-noche-de-opera { --a1t: 20vh; }
}

@media (max-width:760px) { .c-xv-noche-de-opera .e-cierre .e-marco { min-width:0; } .c-xv-noche-de-opera .e-nombre-fin { font-size:clamp(2.8rem,14vw,5rem); max-width:100%; overflow-wrap:anywhere; } }