/* MAGO Blocks · base. Variables sobrescribibles desde el tema: --mago-brand, --mago-ink, etc. */
:root {
	--mago-brand: var(--wp--preset--color--primary, #1f4fd8);
	--mago-brand-ink: #fff;
	--mago-ink: var(--wp--preset--color--contrast, #14161a);
	--mago-paper: var(--wp--preset--color--base, #fff);
	--mago-soft: #f3f5f9;
	--mago-line: rgba(20, 22, 26, .12);
	--mago-radius: 16px;
	--mago-gap: clamp(1rem, 2.5vw, 1.75rem);
	--mago-space: clamp(3rem, 8vw, 6rem);
	--mago-max: 1160px;
	--mago-narrow: 760px;
}

[class*="wp-block-mago-"] { box-sizing: border-box; }
[class*="wp-block-mago-"] *, [class*="wp-block-mago-"] *::before, [class*="wp-block-mago-"] *::after { box-sizing: inherit; }

.mago-hero, .mago-features, .mago-faq, .mago-testimonials, .mago-pricing, .mago-cta, .mago-stats, .mago-steps, .mago-marquee {
	padding-block: var(--mago-space);
	padding-inline: 1rem;
	color: var(--mago-ink);
}
.mago-inner { max-width: var(--mago-max); margin-inline: auto; }
.mago-inner.mago-narrow { max-width: var(--mago-narrow); }
.mago-inner.is-center, .is-center .mago-head { text-align: center; }

/* Fondos */
.mago-bg-soft { background: var(--mago-soft); }
.mago-bg-dark { background: #0f1115; color: #f4f5f7; --mago-line: rgba(255, 255, 255, .16); --mago-soft: rgba(255, 255, 255, .06); }
.mago-bg-brand { background: var(--mago-brand); color: var(--mago-brand-ink); --mago-line: rgba(255, 255, 255, .3); }

/* Tipografía */
.mago-eyebrow { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; opacity: .75; }
.mago-title { margin: 0 0 .75rem; font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.12; text-wrap: balance; }
h1.mago-title { font-size: clamp(2.2rem, 6vw, 4rem); }
.mago-intro { margin: 0 0 1.5rem; max-width: 62ch; font-size: 1.1rem; opacity: .85; text-wrap: pretty; }
.is-center .mago-intro, .mago-narrow.is-center .mago-intro { margin-inline: auto; }
.mago-head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

/* Rejilla adaptable sin media queries: columnas por ancho disponible */
.mago-grid {
	display: grid;
	gap: var(--mago-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--mago-max) / (var(--mago-cols, 3) + .6))), 1fr));
}

/* Tarjetas */
.mago-card {
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--mago-line);
	border-radius: var(--mago-radius);
	background: var(--mago-soft);
	transition: transform .25s ease, box-shadow .25s ease;
}
.mago-bg-soft .mago-card { background: var(--mago-paper); }
.mago-card__title { margin: 0 0 .5rem; font-size: 1.2rem; line-height: 1.25; }
.mago-card p { margin: 0; opacity: .85; }
.mago-card a { color: inherit; text-underline-offset: .2em; }
.mago-icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: .75rem; border-radius: 12px; background: var(--mago-brand); color: var(--mago-brand-ink); font-size: 1.25rem; }

/* Botones */
.mago-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.5rem 0 0; }
.is-center .mago-actions { justify-content: center; }
.mago-btn { display: inline-block; padding: .85rem 1.4rem; border-radius: 999px; font-weight: 700; text-decoration: none; line-height: 1; border: 2px solid transparent; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.mago-btn.is-primary { background: var(--mago-brand); color: var(--mago-brand-ink); }
.mago-bg-brand .mago-btn.is-primary { background: #fff; color: var(--mago-brand); }
.mago-btn.is-ghost { border-color: currentColor; color: inherit; }
.mago-btn:hover { transform: translateY(-2px); }
.mago-btn:focus-visible, .mago-faq summary:focus-visible, .mago-compare__range:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

img.mago-hero__img, .mago-compare__img { display: block; width: 100%; height: auto; }

/* ===== Efectos ===== */
@media (prefers-reduced-motion: no-preference) {

	/* reveal: scroll-driven CSS si el navegador lo soporta; si no, fx.js usa IntersectionObserver */
	@supports (animation-timeline: view()) {
		[data-mago-fx="reveal"] .mago-item,
		[data-mago-fx="reveal"] .mago-head > * {
			animation: mago-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
	}
	@keyframes mago-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

	.mago-fx-ready[data-mago-fx="reveal"] .mago-item,
	.mago-fx-ready[data-mago-fx="reveal"] .mago-head > * { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 70ms); }
	.mago-fx-ready[data-mago-fx="reveal"].is-in .mago-item,
	.mago-fx-ready[data-mago-fx="reveal"].is-in .mago-head > * { opacity: 1; transform: none; }

	/* gradient: fondo animado */
	[data-mago-fx="gradient"] {
		background: linear-gradient(120deg, var(--mago-brand), #7a3cff, #00b8d9, var(--mago-brand));
		background-size: 300% 300%;
		color: #fff;
		animation: mago-flow 14s ease infinite;
	}
	@keyframes mago-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

	/* spotlight: luz que sigue al cursor (fx.js actualiza --mx / --my) */
	[data-mago-fx="spotlight"] { position: relative; isolation: isolate; }
	[data-mago-fx="spotlight"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .22), transparent 60%); }

	/* parallax: desplazamiento suave de la imagen */
	@supports (animation-timeline: view()) {
		[data-mago-fx="parallax"] .mago-hero__img,
		[data-mago-fx="parallax"] .mago-hero__media img { animation: mago-parallax linear both; animation-timeline: view(); }
	}
	@keyframes mago-parallax { from { transform: translateY(-4%) scale(1.06); } to { transform: translateY(4%) scale(1.06); } }

	/* tilt: fx.js escribe --rx / --ry en cada tarjeta */
	[data-mago-fx="tilt"] .mago-item { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
	/* magnetic: fx.js escribe --tx / --ty en los botones */
	[data-mago-fx="magnetic"] .mago-btn { transform: translate(var(--tx, 0px), var(--ty, 0px)); }
}
.mago-icon .mago-icon__svg { width: 1.45rem; height: 1.45rem; }
.mago-card__img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--mago-radius, 12px) - 4px); margin-bottom: 1rem; }

.mago-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }