/* Opener del inicio · «la galería»: muro 3D de portadas reales que se deslizan; al bajar se endereza,
   se acerca y una portada crece hasta volverse el fondo del inicio. --o es el avance del scroll (0 → 1). */

.opener { --o: 0; --zmax: 8; position: relative; z-index: 3; height: 270vh; height: 270svh; color: #FFF6FB; margin-top: -1px;
	margin-bottom: -100vh; margin-bottom: -100svh; pointer-events: none; }  /* el inicio queda debajo de la última pantalla */
.opener-escena { pointer-events: auto; }
.opener.al-final .opener-escena { pointer-events: none; visibility: hidden; }
.opener-escena {
	--a: clamp(0, calc(var(--o) / .62), 1);                 /* el muro se endereza y se acerca */
	--t: clamp(0, calc(var(--o) / .32), 1);                 /* el texto se va */
	--z: clamp(0, calc((var(--o) - .48) / .42), 1);         /* la portada crece */
	--m: clamp(0, calc((var(--z) - .74) / .2), 1);           /* la portada se funde con el fondo del inicio */
	--f: clamp(0, calc((var(--o) - .9) / .08), 1);          /* y la escena se desvanece sobre el inicio, que ya está en su lugar */
	opacity: calc(1 - var(--f));
	position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; isolation: isolate;
	background: radial-gradient(90% 70% at 50% 40%, #3A1A48, #1C0F25 70%);
}

/* El muro */
.opener-muro { position: absolute; inset: -35%; display: grid; place-items: center; z-index: 0; perspective: 1500px; }
.opener-plano { --w: clamp(120px, min(11.5vw, 24vmin), 250px); --g: clamp(12px, 2.2vmin, 26px);
	display: flex; gap: var(--g); align-items: flex-start; transform-style: preserve-3d;
	transform: rotateX(calc((1 - var(--a)) * 26deg)) rotateZ(calc((1 - var(--a)) * -15deg)) scale(calc(1 + var(--a) * var(--a) * .9));
	transition: opacity 1.4s cubic-bezier(.16, 1, .3, 1), scale 1.8s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.opener:not(.listo) .opener-plano { opacity: 0; scale: .82; }
.opener-col { width: var(--w); flex: none; }
.opener-col.c1, .opener-col.c3, .opener-col.c5, .opener-col.c7 { margin-top: calc(var(--w) * -.9); }
.opener-cinta { display: flex; flex-direction: column; gap: var(--g); animation: op-sube var(--d, 70s) linear infinite; animation-delay: var(--dl, 0s); will-change: transform; }
.opener-col.c0 .opener-cinta { --d: 74s; --dl: -12s; }
.opener-col.c1 .opener-cinta { --d: 62s; --dl: -30s; animation-direction: reverse; }
.opener-col.c2 .opener-cinta { --d: 80s; --dl: -5s; }
.opener-col.c3 .opener-cinta { --d: 58s; --dl: -41s; animation-direction: reverse; }
.opener-col.c4 .opener-cinta { --d: 76s; --dl: -22s; }
.opener-col.c5 .opener-cinta { --d: 66s; --dl: -9s; animation-direction: reverse; }
.opener-col.c6 .opener-cinta { --d: 84s; --dl: -50s; }
.opener-col.c7 .opener-cinta { --d: 64s; --dl: -18s; animation-direction: reverse; }
.opener-col.c8 .opener-cinta { --d: 78s; --dl: -36s; }
@keyframes op-sube { to { transform: translateY(calc(-50% - var(--g) / 2)); } }
.opener-cinta img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: calc(var(--w) * .07);
	box-shadow: 0 0 0 1px rgb(255 255 255 / .06), 0 26px 40px -16px rgb(0 0 0 / .7); background: #2B1638; }
.opener.quieto-muro .opener-cinta { animation-play-state: paused; }

/* Velo para que el titular se lea, y brillo que respira */
.opener-velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: calc(1 - var(--a) * .7);
	background: radial-gradient(58% 50% at 50% 50%, rgb(28 15 37 / .86), rgb(28 15 37 / .5) 58%, rgb(28 15 37 / .2) 80%),
		linear-gradient(180deg, rgb(28 15 37 / .55), transparent 22% 78%, rgb(28 15 37 / .7)); }

/* El titular */
.opener-texto { position: relative; z-index: 2; max-width: 64rem; padding: 0 var(--margen); text-align: center; display: grid; justify-items: center;
	opacity: calc(1 - var(--t)); transform: translateY(calc(var(--t) * -9vh)) scale(calc(1 - var(--t) * .06)); }
.opener-ceja { font-weight: 700; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: #F3B6D6; margin-bottom: 18px; }
.opener-titulo { font-family: var(--titulos); font-weight: 400; font-size: clamp(2.9rem, 6.6vw, 6.4rem); line-height: 1; letter-spacing: -.02em; color: #FFF6FB; text-wrap: balance; text-shadow: 0 10px 40px rgb(0 0 0 / .45); }
.opener-titulo em { font-style: normal; color: transparent; background: linear-gradient(100deg, #F6B93B 0%, #EE6A50 35%, #EE7FB0 65%, #B57BE0 100%); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 8px 26px rgb(238 106 80 / .35)); }
.opener-titulo .l { display: inline-block; transition: opacity .9s cubic-bezier(.16, 1, .3, 1), translate 1.1s cubic-bezier(.16, 1, .3, 1), filter .9s ease; }
.opener:not(.listo) .opener-titulo .l { opacity: 0; translate: 0 .45em; filter: blur(10px); }
.opener-titulo .l:nth-child(1) { transition-delay: .35s; } .opener-titulo .l:nth-child(2) { transition-delay: .45s; } .opener-titulo .l:nth-child(3) { transition-delay: .55s; }
.opener-titulo .l:nth-child(4) { transition-delay: .62s; } .opener-titulo .l:nth-child(5) { transition-delay: .7s; } .opener-titulo .l:nth-child(6) { transition-delay: .85s; }
.opener-bajada, .opener-acciones, .opener-ceja { transition: opacity 1s ease 1.1s, translate 1.1s cubic-bezier(.16, 1, .3, 1) 1.1s; }
.opener-ceja { transition-delay: .2s; }
.opener:not(.listo) .opener-bajada, .opener:not(.listo) .opener-acciones, .opener:not(.listo) .opener-ceja { opacity: 0; translate: 0 14px; }
.opener-bajada { margin-top: 24px; max-width: 40rem; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.55; color: rgb(255 246 251 / .8); }
.opener-acciones { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.opener-seguir { color: #FFF6FB; font-weight: 600; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.opener-seguir span { display: inline-block; animation: op-baja 1.8s ease-in-out infinite; }
@keyframes op-baja { 50% { translate: 0 5px; } }

/* La portada que crece hasta volverse el fondo del inicio */
/* La tarjeta se dibuja en su tamaño final (--cw, la escala que cubre la pantalla) y empieza reducida:
   así el navegador la pinta grande y se ve nítida en todo el recorrido, sin pixelarse al crecer. */
.opener-carta { --w: clamp(120px, min(11.5vw, 24vmin), 250px); --cw: calc(var(--w) * var(--zmax));
	position: absolute; left: 50%; top: 50%; z-index: 3; width: var(--cw); aspect-ratio: 3 / 4; margin: calc(var(--cw) * -.667) 0 0 calc(var(--cw) * -.5);
	border-radius: calc(var(--cw) * .07 * (1 - var(--m))); overflow: hidden; pointer-events: none;
	opacity: clamp(0, calc(var(--z) * 12), 1); box-shadow: 0 calc(var(--cw) * .12) calc(var(--cw) * .24) calc(var(--cw) * -.08) rgb(0 0 0 / calc(.7 * (1 - var(--m))));
	transform: rotate(calc((1 - var(--z)) * -14deg)) scale(calc((.06 + var(--z) * var(--z) * (var(--zmax) - .06)) / var(--zmax))); will-change: transform, opacity; }
.opener-carta { background: #FBF6EC; container-type: inline-size; }
.carta-papel { position: absolute; inset: 0; background: #FBF6EC url("img/correo/papel.webp") center / 140% auto; display: grid; place-items: center; overflow: hidden; }
.carta-marco { position: absolute; inset: 5.5cqi; border: .6cqi solid #7A2E8E; border-radius: 3cqi; opacity: .85; }
.carta-marco::after { content: ""; position: absolute; inset: 1.6cqi; border: .25cqi solid rgb(122 46 142 / .45); border-radius: 2cqi; }
.carta-estampilla { position: absolute; top: 9cqi; right: 9cqi; width: 22cqi; height: auto; rotate: 6deg; filter: drop-shadow(0 1.4cqi 1.6cqi rgb(58 30 74 / .25)); }
.carta-matasellos { position: absolute; top: 12cqi; right: 22cqi; width: 40cqi; height: auto; opacity: .35; rotate: -8deg; }
.carta-centro { position: relative; display: grid; justify-items: center; text-align: center; margin-top: -6cqi; }
.carta-ceja { font: italic 400 5.4cqi/1 var(--titulos); color: #65586F; letter-spacing: .02em; }
.carta-logo { width: 80cqi; height: auto; }
.carta-linea { font: 600 3.9cqi/1.35 var(--texto); color: #5E2170; letter-spacing: .14em; text-transform: uppercase; }
.carta-sello { position: absolute; bottom: 9cqi; left: 50%; width: 22cqi; height: auto; translate: -50% 0; filter: drop-shadow(0 1.6cqi 2cqi rgb(44 24 56 / .4)); }

/* Sombra que cae sobre el muro mientras la tarjeta crece, para que la tarjeta sea lo único que se mire */
.opener-sombra { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: clamp(0, calc(var(--z) * 2.2), .86);
	background: radial-gradient(42% 52% at 50% 50%, rgb(28 15 37 / .55), rgb(14 7 19 / .96) 75%); }
.opener-carta::after { content: ""; position: absolute; inset: 0; background: var(--sc-canvas, #FBF8FC); opacity: var(--m); }

.opener-pista { position: absolute; left: 50%; bottom: clamp(18px, 4vh, 36px); z-index: 2; translate: -50% 0; margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: rgb(255 246 251 / .6); opacity: calc(1 - var(--t) * 2); display: grid; justify-items: center; gap: 10px; }
.opener-pista::after { content: ""; width: 1px; height: 42px; background: linear-gradient(rgb(255 246 251 / .7), transparent); transform-origin: top; animation: op-linea 2s ease-in-out infinite; }
@keyframes op-linea { 0% { scale: 1 0; } 50% { scale: 1 1; } 100% { scale: 1 0; transform-origin: bottom; } }

@media (hover: hover) and (pointer: fine) {
	.opener-seguir:hover { color: #F3B6D6; }
}
@media (max-width: 700px) {
	.opener { height: 250vh; height: 250svh; }
	.opener-plano, .opener-carta { --w: 31vw; }
	.opener-plano { --g: 10px; }
	.opener-titulo { font-size: clamp(2.6rem, 13vw, 3.6rem); }
	.opener-acciones { flex-direction: column; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.opener { height: auto; margin-bottom: 0; pointer-events: auto; }
	.opener-escena { position: relative; min-height: 100svh; opacity: 1; }
	.opener-cinta { animation: none; }
	.opener-carta, .opener-pista { display: none; }
	.opener-texto, .opener-plano { transform: none; opacity: 1; }
	.opener-plano { transform: rotateX(18deg) rotateZ(-12deg); }
	.opener:not(.listo) .opener-titulo .l, .opener:not(.listo) .opener-bajada, .opener:not(.listo) .opener-acciones, .opener:not(.listo) .opener-ceja, .opener:not(.listo) .opener-plano { opacity: 1; translate: none; filter: none; scale: none; }
}

/* Arreglo del inicio en celular: el sello de la sección de planes sobresalía 18 px y dejaba mover la página de lado. */
.planes-joya { overflow-x: clip; }