/* 02 · Nombre en Escena — azul noche, luz perlada lateral. El nombre ocupa la pantalla y la fotografía aparece
   detrás, entre sus trazos. Al bajar, el nombre se reparte en los márgenes (eco vertical) y se reúne en el cierre. */

.c-xv-nombre-en-escena {
	--v0t: 18vh; --v0r: 33vw; --v0b: 16vh; --v0l: 33vw; --v0k: 2px;
	--v1t: 18vh; --v1r: 33vw; --v1b: 16vh; --v1l: 33vw; --v1k: 2px;
	--v2t: 24vh; --v2r: 5vw;  --v2b: 26vh; --v2l: 5vw;  --v2k: 2px;
	--nombre-tam: clamp(6rem, 21vw, 21rem);
	--nombre-color: #F5F2ED; --marco: #CEABBC; --radio: 10px; --titulo-peso: 300;
}
.c-xv-nombre-en-escena .r-arte { background: radial-gradient(70% 70% at 70% 30%, #2F4062, #17243C); }
.c-xv-nombre-en-escena .r-arte-luz { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.c-xv-nombre-en-escena .r-ventana-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,36,60,.15), rgba(23,36,60,.55)); }

/* Títulos al centro; el nombre pasa por delante de la ventana. */
.c-xv-nombre-en-escena .r-titulos { left: 50%; top: 50%; justify-items: center; text-align: center; transform: translate(-50%, calc(-50% + var(--m2) * 2vh)) scale(calc(1 - var(--m2) * .3)); }
.c-xv-nombre-en-escena .r-nombre { text-shadow: 0 6px 50px rgba(10, 16, 30, .55); letter-spacing: .01em; }
.c-xv-nombre-en-escena .r-evento { color: #E2C3D1; font-weight: 500; letter-spacing: .5em; }
.c-xv-nombre-en-escena .r-fecha { color: #C3CBD8; }
.c-xv-nombre-en-escena .r-cabecera { border-bottom-color: rgba(245, 242, 237, .25); }

/* El eco: el mismo nombre en contorno, a los lados; aparece al dejar la portada y se apaga antes del cierre. */
.c-xv-nombre-en-escena .r-eco {
	position: fixed; z-index: -1; top: 50%; margin: 0; pointer-events: none;
	font-family: var(--script); font-size: min(16vh, 9vw); line-height: 1; white-space: nowrap;
	color: transparent; -webkit-text-stroke: 1px rgba(206, 171, 188, .55);
	writing-mode: vertical-rl;
	opacity: clamp(0, min((var(--avance, 0) - .07) * 10, (.9 - var(--avance, 0)) * 10), .6);
	transition: opacity .3s;
}
.c-xv-nombre-en-escena .r-eco-a { left: 1vw; transform: translateY(calc(-50% + (var(--avance, 0) - .5) * -30vh)) rotate(180deg); }
.c-xv-nombre-en-escena .r-eco-b { right: 1vw; transform: translateY(calc(-50% + (var(--avance, 0) - .5) * 30vh)); }

/* Secciones: azul que aclara hacia el cierre, cifras monumentales. */
.c-xv-nombre-en-escena .xv-titulo { font-weight: 300; letter-spacing: -.01em; }
.c-xv-nombre-en-escena .xv-titulo .xv-script { color: #E2C3D1; }
.c-xv-nombre-en-escena .r-dia { font-weight: 200; color: #F5F2ED; }
.c-xv-nombre-en-escena .r-mes { font-family: var(--script); text-transform: none; color: #E2C3D1; font-size: clamp(3rem, 7vw, 6rem); }
.c-xv-nombre-en-escena .r-anio { color: #C3CBD8; }
.c-xv-nombre-en-escena .r-fecha-grid { grid-template-areas: "k k" "dia datos" "cuenta cuenta"; }
.c-xv-nombre-en-escena .r-cuenta-caja { flex-direction: column; align-items: center; border-top-color: rgba(245, 242, 237, .2); }
.c-xv-nombre-en-escena .r-cuenta { justify-items: center; }
.c-xv-nombre-en-escena .r-cuenta .xv-num { color: #F5F2ED; }
.c-xv-nombre-en-escena .r-reticula { border-top-color: rgba(245, 242, 237, .5); }
.c-xv-nombre-en-escena .r-orn { opacity: .8; border-radius: 50%; }
.c-xv-nombre-en-escena .xv-superficie { background: rgba(30, 46, 75, .92); }
.c-xv-nombre-en-escena .r-cierre { background: radial-gradient(70% 60% at 50% 55%, rgba(206, 171, 188, .22), transparent 70%); }
.c-xv-nombre-en-escena .r-nombre-fin { color: #F5F2ED; font-size: calc(clamp(5rem, 16vw, 14rem) * var(--n, 1)); }
.c-xv-nombre-en-escena .xv-entrada-nombre { font-size: clamp(4rem, 16vw, 9rem); }
.c-xv-nombre-en-escena .en-fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 760px) {
	.c-xv-nombre-en-escena {
		--v0t: 22vh; --v0r: 16vw; --v0b: 20vh; --v0l: 16vw;
		--v1t: 22vh; --v1r: 16vw; --v1b: 20vh; --v1l: 16vw;
		--v2t: 30vh; --v2r: 3vw;  --v2b: 30vh; --v2l: 3vw;
		--nombre-tam: clamp(4rem, 24vw, 7rem);
	}
	.c-xv-nombre-en-escena .r-titulos { left: 50%; right: auto; top: 50%; width: 92vw; transform: translate(-50%, -50%) scale(calc(1 - var(--m2) * .2)); }
	.c-xv-nombre-en-escena .r-eco { display: none; }
	.c-xv-nombre-en-escena .r-fecha-grid { grid-template-areas: "k" "dia" "datos" "cuenta"; }
}
html.quieto .c-xv-nombre-en-escena .r-eco { display: none; }