/* 05 · Cristal Contemporáneo — paneles translúcidos con bordes definidos, reflejos azul hielo y plata.
   Al abrir, los dos paneles se separan y descubren nombre y retrato; al bajar se angostan (cambian de proporción
   con clip-path, sin estirar la imagen) y quedan como ventanas a los lados. Las fotos llevan marco de cristal. */

.c-xv-cristal-contemporaneo { --nombre-color: #22324A; --radio: 14px; --radio-foto: 10px; --hilo-ancho: 3; --hilo: #AEBBCB; }

.c-xv-cristal-contemporaneo .cr-izq, .c-xv-cristal-contemporaneo .cr-der {
	top: 6vh; height: 88vh; width: auto; aspect-ratio: 600 / 1400;
	-webkit-backdrop-filter: blur(7px) saturate(1.1); backdrop-filter: blur(7px) saturate(1.1);
	transition: translate 1.8s cubic-bezier(.77,0,.175,1);
}
.c-xv-cristal-contemporaneo .cr-izq { right: 50%; transform-origin: right; clip-path: inset(0 0 0 calc(var(--p, 0) * 45%) round 6px); transform: translateX(calc(var(--p, 0) * -12vw)); }
.c-xv-cristal-contemporaneo .cr-der { left: 50%; transform-origin: left; clip-path: inset(0 calc(var(--p, 0) * 45%) 0 0 round 6px); transform: translateX(calc(var(--p, 0) * 12vw)); }
/* Cerrados antes de abrir; al abrir se separan (sin tapar el centro). */
html.m-abierto .c-xv-cristal-contemporaneo .cr-izq { translate: -22vw 0; }
html.m-abierto .c-xv-cristal-contemporaneo .cr-der { translate: 22vw 0; }
.c-xv-cristal-contemporaneo .m-ventana { --ventana-radio: 10px; --ventana-radio-clip: 10px; outline: 1px solid #AEBBCB; outline-offset: 10px; }
.c-xv-cristal-contemporaneo .m-evento { color: #32465F; }

/* Entrada: dos paneles a los lados que se abren en dos (salida «abre»). */
.c-xv-cristal-contemporaneo .xv-entrada { background: linear-gradient(135deg, #F8FAFC, #DCEAF2); }
.c-xv-cristal-contemporaneo .en-panel-izq, .c-xv-cristal-contemporaneo .en-panel-der { position: absolute; top: 4vh; height: 92vh; opacity: .9; }
.c-xv-cristal-contemporaneo .en-panel-izq { left: -6vw; }
.c-xv-cristal-contemporaneo .en-panel-der { right: -6vw; }
.c-xv-cristal-contemporaneo .xv-entrada .xv-monograma { border-radius: 10px; }

/* Viajero: un panel de cristal real (backdrop-filter) que cambia de proporción entre estaciones. */
.c-xv-cristal-contemporaneo .xv-viajero { --vj-base: 260; }
.vj-cristal {
	width: calc(260px * var(--vs, 1)); height: calc(260px * var(--vs, 1) * (.42 + var(--vm, 0) * .9));
	border-radius: 12px; border: 1.5px solid rgba(174, 187, 203, .9);
	background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(220,234,242,.25) 50%, rgba(174,187,203,.25));
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 30px 50px -30px rgba(50, 70, 95, .35);
	position: relative; overflow: hidden;
}
.vj-cristal i { position: absolute; top: -20%; left: 30%; width: 22%; height: 140%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: rotate(18deg); }

/* Secciones: arquitectura limpia; cada superficie es cristal sobre el degradado. */
.c-xv-cristal-contemporaneo .xv-titulo { font-weight: 600; letter-spacing: -.03em; }
.c-xv-cristal-contemporaneo .xv-superficie, .c-xv-cristal-contemporaneo .m-fecha-caja {
	background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(220,234,242,.6)); border: 1px solid rgba(174, 187, 203, .8);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 14px;
}
.c-xv-cristal-contemporaneo .m-dia { font-weight: 200; color: #22324A; }
.c-xv-cristal-contemporaneo .m-galeria .xv-galeria button { background: rgba(255,255,255,.6); border-color: rgba(174,187,203,.8); }
.c-xv-cristal-contemporaneo .cr-orn { display: block; width: 100%; height: 3px; background: linear-gradient(90deg, transparent, #AEBBCB, transparent); }
.c-xv-cristal-contemporaneo .m-foto-h { --ventana-radio: 12px; }
.c-xv-cristal-contemporaneo .m-cierre-caja { padding: 80px 90px; }

@media (max-width: 760px) {
	.c-xv-cristal-contemporaneo .cr-izq, .c-xv-cristal-contemporaneo .cr-der { top: 8vh; height: 84vh; }
	html.m-abierto .c-xv-cristal-contemporaneo .cr-izq { translate: -30vw 0; }
	html.m-abierto .c-xv-cristal-contemporaneo .cr-der { translate: 30vw 0; }
}

/* Segunda revisión: ancho real de pantalla sin desplazamiento lateral. */
@media (max-width:760px) {
 .c-xv-cristal-contemporaneo .m-cierre-caja { min-width:0; max-width:100%; padding:50px 24px; }
 .c-xv-cristal-contemporaneo .m-cierre-caja .xv-texto-grande { max-width:100%; font-size:clamp(2.8rem,13vw,4rem); overflow-wrap:anywhere; }
}