/* IMX Intro de Sobre — v1.2.4 */

/* ── OVERLAY ─────────────────────────────────────────── */
.imx-sobre-overlay {
	position: fixed !important;
	top: 0 !important; left: 0 !important;
	right: 0 !important; bottom: 0 !important;
	width: 100% !important; height: 100% !important;
	z-index: 2147483647 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	cursor: pointer !important;
	margin: 0 !important; padding: 0 !important;
	/* Empieza invisible — evita flash inicial */
	opacity: 0;
	animation: imxIn .4s ease .05s forwards;
	transition: opacity .5s ease, visibility .5s ease;
	/* Forzar capa GPU en iOS */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
@keyframes imxIn { to { opacity: 1; } }
.imx-sobre-overlay * { box-sizing: border-box; }
.imx-sobre-overlay.is-fading {
	opacity: 0 !important; visibility: hidden;
	pointer-events: none; animation: none !important;
}
/* Admin bar WP */
body.admin-bar .imx-sobre-overlay { top: 0 !important; height: 100% !important; }

/* ── STAGE ───────────────────────────────────────────── */
.imx-sobre-stage {
	position: relative;
	width: 100%; height: 100%;
	max-width: 500px; max-height: 900px;
	overflow: hidden;
	flex-shrink: 0;
	/* GPU layer para el stage completo — clave para iOS */
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* ── SVGs base ───────────────────────────────────────── */
.imx-env-base,
.imx-flap-left-svg, .imx-flap-right-svg,
.imx-flap-bottom-svg, .imx-flap-top-svg {
	position: absolute; inset: 0;
	width: 100%; height: 100%; display: block;
}

/* z=1 Base: sombra solo en desktop (en móvil pesa mucho) */
.imx-env-base {
	z-index: 1;
	will-change: opacity;
	transition: opacity .40s ease .20s;
}
@media (min-width: 501px) {
	.imx-env-base {
		filter:
			drop-shadow(0 24px 48px rgba(0,0,0,.22))
			drop-shadow(0 8px 18px rgba(0,0,0,.12));
	}
}

/* z=2 Interior */
.imx-reveal-bg {
	position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(155deg, #f8f3ec 0%, #fff 65%);
	opacity: 0; pointer-events: none;
	will-change: opacity;
}

/* z=3 Paneles — translate3d para GPU en iOS
   (translateX/Y no activan compositing en iOS Safari,
    translate3d sí lo hace) */
.imx-layer-left, .imx-layer-right, .imx-layer-bottom {
	position: absolute; inset: 0; z-index: 3;
	will-change: transform, opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.imx-layer-left {
	transition:
		-webkit-transform .85s cubic-bezier(.22,0,.36,1) .08s,
		transform .85s cubic-bezier(.22,0,.36,1) .08s,
		opacity .38s ease .50s;
}
.imx-layer-right {
	transition:
		-webkit-transform .85s cubic-bezier(.22,0,.36,1) .13s,
		transform .85s cubic-bezier(.22,0,.36,1) .13s,
		opacity .38s ease .54s;
}
.imx-layer-bottom {
	transition:
		-webkit-transform .85s cubic-bezier(.22,0,.36,1) .18s,
		transform .85s cubic-bezier(.22,0,.36,1) .18s,
		opacity .38s ease .58s;
}

/* z=4 Panel superior */
.imx-flap-top-wrap {
	position: absolute; inset: 0; z-index: 4;
	overflow: visible; pointer-events: none;
}
.imx-flap-top-panel {
	position: absolute; inset: 0;
	will-change: transform, opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition:
		-webkit-transform .88s cubic-bezier(.22,0,.36,1) .02s,
		transform .88s cubic-bezier(.22,0,.36,1) .02s,
		opacity .38s ease .46s;
}

/* z=10 Sello */
.imx-seal-wrap {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	z-index: 10;
	width:  clamp(90px, 22vw, 126px);
	height: clamp(90px, 22vw, 126px);
	pointer-events: none;
	will-change: transform, opacity;
}
.imx-seal-svg { display:block; width:100%; height:100%; overflow:visible; }
.imx-seal-img { display:block; width:100%; height:100%; object-fit:contain; border-radius:50%; }

/* z=7 Texto — tamaño controlado por CSS vars del admin */
.imx-text-layer {
	position: absolute;
	left: 50%; top: 67%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	z-index: 7;
	text-align: center;
	color: var(--imx-text, #a98a58);
	width: 76%;
	pointer-events: none;
	will-change: opacity, transform;
	transition: opacity .22s ease, transform .28s ease;
}
.imx-initials {
	font-family: Georgia, 'Times New Roman', serif;
	/* --imx-is viene del admin, clamp da límites responsive */
	font-size: var(--imx-is, 48px);
	letter-spacing: .025em;
	line-height: 1.1;
}
.imx-subtitle {
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--imx-ss2, 13px);
	letter-spacing: .40em;
	margin-top: 11px;
	font-weight: 500;
	opacity: .80;
}

/* z=9 CTA */
.imx-cta {
	position: absolute;
	left: 50%; bottom: 6%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	z-index: 9;
	text-align: center;
	color: var(--imx-text, #a98a58);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(9px, 2.4vw, 12px);
	letter-spacing: .36em; white-space: nowrap;
	pointer-events: none;
	will-change: opacity;
	transition: opacity .18s ease;
}
.imx-cta-arrow { display:block; font-size:20px; letter-spacing:0; margin-bottom:7px; opacity:.62; }

/* ═══ ANIMACIÓN ═══════════════════════════════════════
   translate3d en vez de translateX/Y:
   Activa el compositor de GPU en iOS Safari
══════════════════════════════════════════════════════ */

/* P1 */
.imx-p1 .imx-seal-wrap {
	-webkit-transform: translate(-50%,-50%) scale(.78) translateY(8px);
	transform: translate(-50%,-50%) scale(.78) translateY(8px);
	opacity: 0;
	transition:
		-webkit-transform .22s cubic-bezier(.4,0,.6,1),
		transform .22s cubic-bezier(.4,0,.6,1),
		opacity .26s ease .14s;
}
.imx-p1 .imx-text-layer {
	opacity: 0;
	-webkit-transform: translate(-50%, -57%);
	transform: translate(-50%, -57%);
}
.imx-p1 .imx-cta { opacity: 0; }

/* P2 — translate3d para activar GPU en iOS */
.imx-p2 .imx-flap-top-panel {
	-webkit-transform: translate3d(0, -108%, 0);
	transform: translate3d(0, -108%, 0);
	opacity: 0;
}
.imx-p2 .imx-layer-left {
	-webkit-transform: translate3d(-108%, 0, 0);
	transform: translate3d(-108%, 0, 0);
	opacity: 0;
}
.imx-p2 .imx-layer-right {
	-webkit-transform: translate3d(108%, 0, 0);
	transform: translate3d(108%, 0, 0);
	opacity: 0;
}
.imx-p2 .imx-layer-bottom {
	-webkit-transform: translate3d(0, 108%, 0);
	transform: translate3d(0, 108%, 0);
	opacity: 0;
}
.imx-p2 .imx-env-base { opacity: 0; }

/* P3 */
.imx-p3 .imx-reveal-bg { opacity: 1; transition: opacity .22s ease; }

/* Desktop */
@media (min-width:501px) and (min-height:901px) {
	.imx-sobre-stage { max-width:500px; max-height:900px; }
}
@supports not (height: 100dvh) {
	.imx-sobre-overlay { height: 100vh !important; }
}