/* ==========================================================================
   MassterFX · estilos del tema
   1. Fuentes   2. Variables   3. Base   4. Utilidades   5. Botones
   6. Barra de anuncio   7. Cabecera   8. Inicio   9. Pie   10. Contenido genérico
   ========================================================================== */

/* 1. Fuentes (alojadas en el propio sitio, las mismas de studio.massterfx.com):
   Space Grotesk para todo el texto y JetBrains Mono para etiquetas y datos. */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

/* 2. Sistema de diseño: TODOS los colores, tamaños y espacios salen de aquí */
:root {
	/* Marca */
	--c-violet: #6d0be7;         /* morado MassterFX: botones y acentos */
	--c-violet-bright: #8a3dff;  /* morado al pasar el mouse y títulos en acento */
	--c-violet-soft: #b794ff;    /* morado claro: enlaces e íconos sobre fondo oscuro */
	--c-lime: #a5d257;           /* verde MassterFX: precios, estados y detalles */
	--c-lavender: #765dba;       /* pie de página */
	--c-sky: #3ab8ff;
	--c-amber: #ffb224;

	/* Fondos y superficies */
	--c-black: #06030d;          /* fondo general */
	--c-night: #0b0420;          /* texto sobre verde y fondos profundos */
	--c-deep: #120730;           /* inicio del degradado de secciones */
	--card: rgba(18, 10, 38, .88);
	--card-media: #160b33;
	--card-border: rgba(170, 140, 255, .16);
	--surface: rgba(255, 255, 255, .05);
	--surface-strong: rgba(255, 255, 255, .1);
	--border: rgba(255, 255, 255, .12);
	--glow: 0 18px 40px -24px rgba(109, 11, 231, .55);

	/* Texto */
	--c-white: #fff;
	--text-2: var(--text-2); /* párrafos */
	--text-3: #a7a1c2;                  /* datos secundarios */

	/* Tipografía: Space Grotesk (texto y títulos) + JetBrains Mono (etiquetas y datos) */
	--font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--fs-display: clamp(44px, 6.2vw, 84px); /* título del inicio */
	--fs-h1: clamp(36px, 4.2vw, 56px);      /* títulos de página */
	--fs-h2: clamp(30px, 3.4vw, 42px);        /* títulos de sección */
	--fs-h3: 24px;                          /* títulos de tarjeta grande */
	--fs-h4: 20px;                          /* títulos de tarjeta */
	--fs-h5: 16px;                          /* menú y botones */
	--fs-price: 42px;
	--fs-lead: 18px;
	--fs-base: 16px;
	--fs-md: 15px;
	--fs-sm: 14px;
	--fs-xs: 12.5px;
	--lh-display: 1;
	--lh-heading: 1.1;
	--lh-body: 1.6;
	--lh-snug: 1.45;

	/* Formas y medidas */
	--container: 1140px;
	--gutter: 16px;
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--header-h: 76px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--c-black);
	color: var(--c-white);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; line-height: var(--lh-heading); letter-spacing: -.02em; text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; border-radius: 4px; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* 4. Utilidades */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 1000; padding: 10px 16px; background: var(--c-lime); color: var(--c-night); border-radius: var(--radius-sm); font-weight: 700; }
.skip-link:focus { top: 12px; }

.eyebrow { margin: 0 0 12px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow--lime { color: var(--c-lime); }
.eyebrow--violet { color: var(--c-violet-soft); }

/* Etiquetas, datos y metadatos en monoespaciada (como en studio.massterfx.com) */
.eyebrow, .chip, .hero__stats, .route-card__badge, .module-card__num, .module-card__status, .price-card__badge,
.lesson__num, .lesson__meta, .tutorial-card__tags, .route-card__meta, .module-card__stats, .auth__divider,
.price-strip__perks, .fact-row span, .price-card__note, .join__note,
.product-card__price del, .category-bar a span, .site-footer__copy {
	font-family: var(--font-mono); letter-spacing: .02em;
}
.eyebrow { letter-spacing: .16em; }

/* 5. Botones */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4em;
	min-height: 48px; padding: 8px 22px 8px;
	border: 1px solid transparent; border-radius: var(--radius-sm);
	font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 500; letter-spacing: -.005em; line-height: 1;
	transition: transform .2s var(--ease), background-color .2s, border-color .2s, box-shadow .2s;
}
.btn .icon { width: .6em; height: .6em; margin-top: -4px; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--c-violet); border-color: var(--c-violet-bright); box-shadow: 0 10px 30px -10px rgba(109, 11, 231, .8); }
.btn--primary:hover { background: var(--c-violet-bright); }
.btn--glass { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255, 255, 255, .2); }
.btn--sm { min-height: 40px; padding: 6px 16px; font-size: var(--fs-sm); }
.btn--lg { min-height: 54px; padding: 10px 26px; font-size: 17px; }
.btn--block { width: 100%; }

/* 6. Barra de anuncio */
.announce {
	position: relative; z-index: 60;
	display: flex; align-items: center; justify-content: center;
	padding: 8px 48px;
	background: var(--c-lime); color: var(--c-night);
}
.announce[hidden] { display: none; }
.announce__text { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 400; line-height: 1.3; text-align: center; }
.announce__cta { padding: 3px 14px 3px; border: 1.5px solid currentColor; border-radius: 999px; font-weight: 500; white-space: nowrap; transition: background-color .2s, color .2s; }
.announce__cta:hover { background: var(--c-night); color: var(--c-lime); border-color: var(--c-night); }
.announce__close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; }
.announce__close:hover { background: rgba(0, 0, 0, .1); }
.announce__close .icon { width: 18px; height: 18px; }

/* 7. Cabecera */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11, 4, 32, .92); border-bottom: 1px solid var(--border); }
.site-header--overlay { position: absolute; top: auto; left: 0; right: 0; background: transparent; border-bottom-color: transparent; }
.site-header.is-stuck { position: fixed; top: 0; background: rgba(11, 4, 32, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--border); animation: header-in .3s var(--ease); }
@keyframes header-in { from { transform: translateY(-100%); } }
.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.site-logo { display: block; width: 74px; flex: none; }
.site-logo svg { width: 100%; height: auto; }

.site-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 28px; }
.nav-list > li { position: relative; }
.nav-list > li > a, .nav-link {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 0;
	font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1;
	transition: color .2s;
}
.nav-list > li > a:hover, .nav-link:hover, .nav-list .current-menu-item > a { color: var(--c-lime); }
.nav-list > .menu-item-has-children > a::after {
	content: ""; width: 8px; height: 8px; margin: -6px 0 0 2px;
	border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
	transition: transform .2s;
}
.sub-menu {
	position: absolute; top: calc(100% + 8px); left: -16px; min-width: 260px; padding: 8px;
	background: rgba(18, 7, 48, .97); border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .7);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .2s, transform .2s var(--ease), visibility .2s;
}
.sub-menu::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu,
.menu-item-has-children.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.menu-item-has-children:hover > a::after, .menu-item-has-children.is-open > a::after { transform: rotate(225deg); margin-top: 2px; }
.sub-menu a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); transition: background-color .2s; }
.sub-menu a:hover { background: var(--surface-strong); }
.sub-menu strong { display: block; font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 500; line-height: 1.1; }
.sub-menu span { display: block; color: var(--text-3); font-size: var(--fs-sm); line-height: var(--lh-snug); }

.site-nav__actions { display: flex; align-items: center; gap: 20px; }
.cart-link { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: background-color .2s; }
.cart-link:hover { background: var(--surface-strong); }
.cart-link .icon { width: 20px; height: 20px; }
.cart-link__count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 1px 5px; border-radius: 999px; background: var(--c-lime); color: var(--c-night); font-size: var(--fs-xs); font-weight: 700; line-height: 16px; text-align: center; }

.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; place-items: center; border-radius: var(--radius-sm); }
.nav-toggle .icon { width: 26px; height: 26px; }
.nav-toggle__close { display: none; }

@media (max-width: 960px) {
	.nav-toggle { display: grid; }
	.site-nav {
		position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw);
		flex-direction: column; align-items: stretch; gap: 8px; margin: 0;
		padding: calc(var(--header-h) + 8px) 24px 32px;
		background: var(--c-deep); border-left: 1px solid var(--border);
		overflow-y: auto;
		transform: translateX(100%); visibility: hidden;
		transition: transform .3s var(--ease), visibility .3s;
	}
	.nav-open .site-nav { transform: none; visibility: visible; }
	.nav-open .nav-toggle { position: relative; z-index: 2; }
	.nav-open .nav-toggle__open { display: none; }
	.nav-open .nav-toggle__close { display: block; }
	.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .6); }
	.nav-open { overflow: hidden; }
	.site-header { z-index: 55; }
	.nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-list > li { border-bottom: 1px solid var(--border); }
	.nav-list > li > a { width: 100%; padding: 12px 0; font-size: var(--fs-h3); justify-content: space-between; }
	.sub-menu { position: static; min-width: 0; padding: 0 0 12px; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; }
	.menu-item-has-children.is-open > .sub-menu { display: block; }
	.menu-item-has-children:hover > .sub-menu { display: none; }
	.menu-item-has-children.is-open:hover > .sub-menu { display: block; }
	.site-nav__actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 16px; }
	.site-nav__actions .nav-link { justify-content: center; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
	.site-nav__actions .btn { min-height: 52px; font-size: var(--fs-h4); }
	.cart-link { align-self: center; }
}

/* 8. Inicio ---------------------------------------------------------------- */

/* Hero */
.hero { position: relative; display: flex; align-items: flex-start; min-height: min(100svh, 980px); padding: calc(var(--header-h) + 64px) 0 80px; overflow: hidden; isolation: isolate; background: var(--c-night); }
.hero__media { position: absolute; inset: 0; z-index: -1; background: var(--c-night) url("../media/hero-poster.webp") center / cover no-repeat; }
.hero__video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s; }
.hero__video.is-ready { opacity: 1; }
.hero__media::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(5, 2, 16, .94) 0%, rgba(5, 2, 16, .78) 38%, rgba(5, 2, 16, .35) 70%, rgba(5, 2, 16, .2) 100%),
		linear-gradient(180deg, rgba(5, 2, 16, .55) 0%, transparent 25%, transparent 70%, var(--c-deep) 100%);
}
.hero__inner { max-width: calc(var(--container) + var(--gutter) * 2); }
.hero .eyebrow { position: relative; padding-bottom: 14px; margin-bottom: 18px; text-transform: none; letter-spacing: .02em; font-size: var(--fs-md); }
.hero .eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 2px; background: var(--c-violet); }
.hero__title { display: flex; flex-direction: column; max-width: 640px; margin-bottom: 22px; font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: -.035em; }
.hero__line { display: block; }
.hero__line--light { font-weight: 400; }
.hero__line--accent { color: var(--c-violet-bright); text-shadow: 0 0 40px rgba(109, 11, 231, .55); }
.hero__lead { max-width: 520px; margin-bottom: 28px; color: var(--text-2); font-size: var(--fs-base); }

.hero__features { display: grid; grid-template-columns: repeat(4, minmax(0, 120px)); gap: 20px; margin-bottom: 32px; }
.hero__features li { display: flex; flex-direction: column; gap: 10px; color: var(--text-2); font-size: var(--fs-xs); font-weight: 400; line-height: var(--lh-snug); }
.hero__features .icon { width: 30px; height: 26px; color: var(--c-violet-soft); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--text-2); font-size: var(--fs-sm); }
.hero__stats li { display: inline-flex; align-items: center; gap: 8px; }
.hero__stats .icon { width: 12px; height: 12px; color: var(--c-lime); }

/* Cuerpo del inicio con el degradado de la marca */
.home__body { background: linear-gradient(180deg, var(--c-deep) 0%, var(--c-black) 100%); }
.section { padding: 72px 0; }
.section__head { margin-bottom: 36px; text-align: center; }
.section__title { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-display); }

/* Tarjetas de caminos */
.paths { padding-top: 56px; }
.paths__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.path-card {
	--tone: var(--c-violet-soft);
	position: relative; display: flex; flex-direction: column; min-height: 300px; overflow: hidden;
	background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius);
	box-shadow: var(--glow);
	transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.path-card--sky { --tone: var(--c-sky); }
.path-card--amber { --tone: var(--c-amber); }
.path-card--lime { --tone: var(--c-lime); }
.path-card:hover { transform: translateY(-6px); border-color: var(--tone); box-shadow: 0 18px 50px -14px color-mix(in srgb, var(--tone) 55%, transparent); }
.path-card__img { position: absolute; inset: 0 0 auto; width: 100%; height: 50%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); transition: transform .6s var(--ease); }
.path-card:hover .path-card__img { transform: scale(1.05); }
.path-card__body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 142px 18px 18px; }
.path-card__title { margin-bottom: 8px; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: 1; }
.path-card__text { margin-bottom: 16px; color: var(--text-2); font-size: var(--fs-md); line-height: var(--lh-snug); }
.path-card__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--tone); font-weight: 700; font-size: var(--fs-md); }
.path-card__cta .icon { width: 9px; height: 14px; transition: transform .2s; }
.path-card:hover .path-card__cta .icon { transform: translateX(4px); }

/* Herramientas */
.tools__layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.tools__intro { padding: 24px; background: rgba(0, 0, 0, .35); border-radius: var(--radius); }
.tools__intro p { color: var(--text-2); line-height: var(--lh-snug); }
.perks { display: grid; gap: 12px; margin-top: 18px; }
.perks li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--text-2); }
.perks .icon { width: 16px; height: 16px; color: var(--c-violet-soft); }

.tools__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tool-card {
	position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; min-height: 250px; padding: 20px 14px 20px;
	background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--glow);
	text-align: center; transition: transform .3s var(--ease), border-color .3s;
}
a.tool-card:hover { transform: translateY(-6px); border-color: var(--c-lime); }
.tool-card__icon { width: 56px; height: 56px; margin-bottom: 14px; }
.tool-card__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; line-height: var(--lh-display); }
.tool-card__status { margin-top: 6px; color: var(--text-2); font-size: var(--fs-sm); }
.tool-card__meta { margin-top: auto; width: 100%; padding-bottom: 10px; color: var(--text-2); font-size: var(--fs-sm); border-bottom: 2px solid rgba(255, 255, 255, .2); }
.tool-card--live .tool-card__meta { color: var(--c-violet-soft); font-weight: 700; border-bottom: 4px solid var(--c-lime); }

/* Marcas */
.brands { padding: 40px 0; }
.brands__title { margin-bottom: 28px; text-align: center; font-size: var(--fs-h2); font-weight: 400; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.marquee__group img { height: 34px; width: auto; filter: grayscale(1) brightness(1.15); opacity: .6; transition: filter .3s, opacity .3s; }
.marquee__group img.is-dark { filter: grayscale(1) invert(1); }
.marquee__group img:hover { filter: none; opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Llamado final */
.join { padding-bottom: 96px; }
.join__box {
	display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 28px; align-items: center;
	padding: 32px 36px;
	background: rgba(118, 93, 186, .28); border: 1px solid var(--border); border-radius: var(--radius-lg);
	box-shadow: 0 19px 26px 1px rgba(0, 0, 0, .78);
}
.join__title { margin-bottom: 12px; font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-display); }
.join__text { margin: 0; color: var(--text-2); font-size: var(--fs-md); }
.join__checks { display: grid; gap: 10px; }
.join__checks li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); color: var(--text-2); }
.join__checks .icon { width: 16px; height: 16px; color: var(--c-lime); }
.join__note { margin: 10px 0 0; text-align: center; color: var(--text-2); font-size: var(--fs-sm); }

/* Responsivo del inicio */
@media (max-width: 1080px) {
	.paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tools__layout { grid-template-columns: 1fr; }
	.tools__grid { grid-template-columns: repeat(5, minmax(150px, 1fr)); overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x mandatory; }
	.tools__grid li { scroll-snap-align: start; }
	.join__box { grid-template-columns: 1fr 1fr; }
	.join__copy { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	:root { --header-h: 64px; }
	.announce { padding: 8px 44px 8px 12px; }
	.announce__text { font-size: var(--fs-lead); }
	.site-logo { width: 62px; }
	.hero { min-height: 0; padding: calc(var(--header-h) + 32px) 0 56px; }
	.hero__media::after { background: linear-gradient(180deg, rgba(5, 2, 16, .7) 0%, rgba(5, 2, 16, .82) 60%, var(--c-deep) 100%); }
	.hero__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hero__features li { flex-direction: row; align-items: center; }
	.hero__features .icon { width: 24px; height: 22px; }
	.hero__actions .btn { flex: 1 1 100%; }
	.section { padding: 52px 0; }
	.paths__grid { grid-template-columns: 1fr; }
	.path-card { min-height: 260px; }
	.tools__grid { grid-template-columns: repeat(5, 46%); }
	.join__box { grid-template-columns: 1fr; padding: 26px 22px; }
	.marquee__group { gap: 40px; padding-right: 40px; }
	.marquee__group img { height: 26px; }
}

/* 9. Pie de página */
.site-footer { background: var(--c-lavender); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-top: 28px; padding-bottom: 28px; }
.socials { display: flex; gap: 6px; margin-bottom: 8px; }
.socials a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; transition: background-color .2s; }
.socials a:hover { background: rgba(255, 255, 255, .18); }
.socials .icon { width: 18px; height: 18px; }
.site-footer__copy { margin: 0; font-size: var(--fs-sm); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.footer-links a { font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 400; line-height: 1; transition: opacity .2s; }
.footer-links a:hover { opacity: .75; }

/* 10. Contenido genérico (páginas que todavía usan el editor o Elementor) */
.page-content { min-height: 50vh; }
.page-content--boxed { padding: 64px 0; }
.page-content--boxed .entry-title { margin-bottom: 24px; font-size: var(--fs-h2); }
.entry-content > * { max-width: 100%; }
.entry-content a { color: var(--c-violet-soft); text-decoration: underline; text-underline-offset: 3px; }
.entry-content h2 { margin: 1.4em 0 .5em; font-size: var(--fs-h2); }
.entry-content h3 { margin: 1.2em 0 .4em; font-size: var(--fs-h3); }
.entry-content ul { list-style: disc; padding-left: 1.4em; margin-bottom: 1em; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-bottom: 32px; }
.post-card { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.post-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card__title { padding: 13px 16px 13px; font-size: var(--fs-h4); font-weight: 500; }
.nav-links { display: flex; gap: 8px; justify-content: center; }
.nav-links .page-numbers { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.nav-links .current { background: var(--c-violet); border-color: var(--c-violet); }

/* Restos de plugins que aún imprimen HTML en el pie (ventanas emergentes de
   Elementor y Ultimate Member) en las páginas que ya son 100% del tema. */
.mfx-theme-page [data-elementor-type="popup"],
.mfx-theme-page .elementor-location-popup,
.mfx-theme-page .um-modal,
.mfx-theme-page .um-modal-overlay,
.mfx-theme-page #loftloader-wrapper { display: none !important; }

/* La barra de oferta antigua de Elementor: la reemplaza la barra del tema. */
.elementor-location-floating_buttons { display: none !important; }

/* El kit de Elementor pinta el fondo morado; el tema manda. */
body.wp-theme-massterfx { background-color: var(--c-black); }

/* ==========================================================================
   Página de Cursos
   ========================================================================== */
.courses, .inner-page {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .85)),
		var(--c-black) url("../img/cursos/fondo-lineas-v2.webp") center top / cover no-repeat;
}
.page-hero { padding: 24px 0 8px; }
.page-hero__box {
	position: relative; overflow: hidden; isolation: isolate;
	min-height: 480px; display: flex; align-items: center;
	padding: 48px 40px; border-radius: var(--radius); background: #050010;
}
.page-hero__art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.page-hero__box::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(5, 0, 16, .96) 0%, rgba(5, 0, 16, .85) 40%, rgba(5, 0, 16, 0) 72%); }
.page-hero__copy { max-width: 520px; }
.page-hero__title { display: flex; flex-direction: column; margin-bottom: 16px; font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-display); }
.page-hero__title .is-accent { color: var(--c-violet-bright); }
.page-hero__lead { max-width: 460px; color: var(--text-2); font-size: var(--fs-md); }

.feature-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.feature-row li { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); line-height: var(--lh-snug); }
.feature-row .icon { width: 26px; height: 26px; margin-bottom: 8px; color: var(--c-violet-soft); }
.feature-row strong { font-weight: 700; }
.feature-row span { color: var(--text-2); }

.routes { padding-top: 48px; }
.routes__title { margin-bottom: 20px; font-size: var(--fs-h2); font-weight: 700; }
.routes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.route-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
	box-shadow: var(--glow); transition: transform .3s var(--ease), border-color .3s;
}
.route-card--live { border-color: rgba(165, 210, 87, .5); }
.route-card--live:hover { transform: translateY(-6px); border-color: var(--c-lime); }
.route-card__media { position: relative; margin: 8px 8px 0; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 3 / 2; }
.route-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.route-card--live:hover .route-card__media img { transform: scale(1.04); }
.route-card__badge { position: absolute; top: 8px; left: 8px; padding: 3px 10px 3px; border-radius: 6px; background: rgba(60, 60, 70, .85); font-size: var(--fs-xs); font-weight: 700; }
.route-card--live .route-card__badge { background: var(--c-lime); color: var(--c-night); }
.route-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 18px; }
.route-card__title { margin-bottom: 8px; font-size: var(--fs-h3); font-weight: 500; }
.route-card__title a::after { content: ""; position: absolute; inset: 0; }
.route-card { position: relative; }
.route-card__text { margin-bottom: 14px; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.route-card__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 16px; color: var(--text-2); font-size: var(--fs-xs); }
.route-card__meta li { display: inline-flex; align-items: center; gap: 6px; }
.route-card__meta .icon { width: 14px; height: 14px; color: var(--c-lime); }
.route-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.route-card__price { margin: 0; font-size: var(--fs-sm); }
.route-card__price strong { font-size: var(--fs-lead); }
.route-card__price.is-muted { color: var(--text-3); }
.route-card__link { position: relative; z-index: 1; }
.btn--disabled { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .15); color: var(--text-3); cursor: not-allowed; }
.btn--disabled:hover { transform: none; }

.includes-card {
	padding: 26px 24px; background: var(--card);
	border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--glow);
}
.includes-card__title { margin-bottom: 18px; text-align: center; font-size: var(--fs-h3); font-weight: 500; }
.includes-card ul { display: grid; gap: 18px; }
.includes-card li { display: flex; align-items: flex-start; gap: 14px; }
.includes-card .icon { width: 28px; height: 28px; margin-top: 2px; color: var(--c-lime); }
.includes-card strong { display: block; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; line-height: 1; }
.includes-card li span { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-snug); }

.fit__text { max-width: 820px; margin: 14px auto 0; color: var(--text-2); }
.video-embed { position: relative; max-width: 960px; margin: 0 auto; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 9; background: var(--card-media); box-shadow: var(--glow); }
.video-embed__player { width: 100%; height: 100%; object-fit: cover; }
.video-embed__play {
	position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; display: grid; place-items: center;
	border-radius: 50%; background: var(--c-violet); box-shadow: 0 0 0 10px rgba(109, 11, 231, .3), 0 12px 40px rgba(0, 0, 0, .6);
	transition: transform .2s var(--ease), background-color .2s;
}
.video-embed__play svg { width: 34px; height: 34px; margin-left: 4px; fill: #fff; }
.video-embed__play:hover { transform: scale(1.06); background: var(--c-violet-bright); }
.video-embed.is-playing .video-embed__play { display: none; }

@media (max-width: 1080px) {
	.routes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.page-hero__box { min-height: 0; padding: 220px 20px 24px; align-items: flex-end; }
	.page-hero__art { height: 300px; object-position: 80% center; }
	.page-hero__box::before { background: linear-gradient(180deg, rgba(5, 0, 16, 0) 0, rgba(5, 0, 16, .85) 200px, rgba(5, 0, 16, .98) 280px); }
	.feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.routes__grid { grid-template-columns: 1fr; }
	.routes__title { font-size: var(--fs-h3); }
}

/* ==========================================================================
   Proyectos, Recursos y Tutoriales
   ========================================================================== */
.btn--lime { background: var(--c-lime); border-color: var(--c-lime); color: var(--c-night); font-weight: 500; }
.btn--lime:hover { background: #b9e36b; }

.page-hero__trailer { margin-top: 26px; min-height: 56px; gap: 10px; text-align: left; }
.page-hero__trailer .icon { width: 18px; height: 18px; margin: -3px 0 0; }
.page-hero__trailer small { display: block; font-family: var(--font-body); font-size: var(--fs-xs); opacity: .8; margin-left: 4px; }

.software-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 22px; }
.software-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: var(--fs-sm); transition: border-color .2s, background-color .2s; }
.software-chips a:hover, .software-chips a[aria-current] { border-color: var(--c-lime); background: rgba(165, 210, 87, .12); }
.software-chips img { width: 24px; height: 24px; object-fit: contain; }
.software-chips a:not(:has(img)) { padding-left: 14px; }

.catalog { padding-top: 36px; }
.price-strip {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
	margin-bottom: 40px; padding: 16px 22px;
	background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--glow);
}
.price-strip__label { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 400; line-height: 1; }
.price-strip__label .icon { width: 30px; height: 30px; color: var(--c-lime); }
.price-strip__label strong { color: var(--c-lime); font-size: var(--fs-h3); font-weight: 700; }
.price-strip__perks { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-xs); color: var(--text-2); }
.price-strip__perks li { display: inline-flex; align-items: center; gap: 6px; }
.price-strip__perks .icon { width: 14px; height: 14px; color: var(--c-violet-soft); }

.catalog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.catalog__empty { padding: 32px; text-align: center; color: var(--text-3); border: 1px dashed var(--border); border-radius: var(--radius); }

.product-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
	box-shadow: var(--glow); transition: transform .3s var(--ease), border-color .3s;
}
.product-card:hover { transform: translateY(-6px); border-color: var(--c-violet-bright); }
.product-card__media { display: block; margin: 8px 8px 0; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 16 / 9; background: var(--card-media); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px; }
.product-card__title { margin-bottom: 8px; font-size: var(--fs-h3); font-weight: 500; }
.product-card__title a::after { content: ""; position: absolute; inset: 0; }
.product-card__text { margin-bottom: 14px; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.product-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.product-card__foot .btn { position: relative; z-index: 1; }
.product-card__price { margin: 0; display: flex; flex-direction: column; line-height: 1.1; }
.product-card__price strong { color: var(--c-lime); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; }
.product-card__price del { color: var(--text-3); font-size: var(--fs-xs); }

.video-dialog { width: min(1000px, 94vw); padding: 0; border: 0; border-radius: var(--radius); background: #000; color: #fff; overflow: visible; }
.video-dialog::backdrop { background: rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.video-dialog video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #000; }
.video-dialog__close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.video-dialog__close .icon { width: 20px; height: 20px; }

.tutorials__list { padding-top: 32px; }
.category-bar {
	position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; padding: 12px;
	background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
}
.category-bar a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px; border-radius: 999px; font-size: var(--fs-sm); color: var(--text-2); transition: background-color .2s, color .2s; }
.category-bar a span { color: var(--text-3); font-size: var(--fs-xs); }
.category-bar a:hover { background: var(--surface-strong); color: #fff; }
.category-bar a[aria-current] { background: var(--c-violet); color: #fff; }
.category-bar a[aria-current] span { color: var(--text-2); }
.category-bar__search { margin-left: auto; }
.category-bar__search input { width: 220px; min-height: 38px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: rgba(0, 0, 0, .4); color: #fff; font: inherit; font-size: var(--fs-sm); }
.category-bar__search input::placeholder { color: var(--text-3); }

.tutorial-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 36px; }
.tutorial-card { overflow: hidden; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-sm); transition: transform .3s var(--ease), border-color .3s; }
.tutorial-card:hover { transform: translateY(-4px); border-color: var(--c-violet-bright); }
.tutorial-card__link { display: block; }
.tutorial-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--card-media); }
.tutorial-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tutorial-card__title { display: block; padding: 8px 12px 8px; font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 500; line-height: 1.05; }
.tutorial-card__tags { margin: 0; padding: 0 12px 12px; color: var(--text-3); font-size: var(--fs-xs); }

.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.nav-links .page-numbers { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 14px 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.nav-links a.page-numbers:hover { border-color: var(--c-violet-bright); }

.upsell__box { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 28px; padding: 20px; background: rgba(118, 93, 186, .22); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.upsell__img { width: 100%; border-radius: var(--radius); }
.upsell__title { margin-bottom: 10px; font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-display); }
.upsell__copy p { color: var(--text-2); }

@media (max-width: 1080px) {
	.catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tutorial-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.catalog__grid, .upsell__box { grid-template-columns: 1fr; }
	.tutorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.tutorial-card__title { font-size: var(--fs-lead); }
	.category-bar { flex-wrap: nowrap; overflow-x: auto; }
	.category-bar a { flex: none; }
	.category-bar__search { flex: none; }
	.category-bar__search input { width: 180px; }
	.price-strip__label { flex-wrap: wrap; }
}
.page-hero__trailer { flex-wrap: wrap; justify-content: flex-start; padding-top: 12px; padding-bottom: 10px; }
.page-hero__trailer small { flex-basis: 100%; margin: 2px 0 0 28px; }

/* ==========================================================================
   Fichas de producto
   ========================================================================== */
.product-hero .page-hero__title { font-size: var(--fs-h1); }
.product-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 40px 0 8px; }
.product-hero__actions { margin-top: 26px; }
.product-hero__img { width: 100%; border-radius: var(--radius); box-shadow: var(--glow); }

.vimeo-facade { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 9; background: var(--card-media); box-shadow: var(--glow); }
.vimeo-facade img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); }
.vimeo-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.buy-box { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.buy-box__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; flex-basis: 100%; }
.buy-box__price strong { color: var(--c-lime); font-family: var(--font-display); font-size: var(--fs-price); font-weight: 700; line-height: var(--lh-display); }
.buy-box__price del { color: var(--text-3); }
.buy-box__alt { color: var(--c-violet-soft); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; }
.chip { display: inline-block; padding: 3px 10px 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: var(--text-2); font-size: var(--fs-xs); }

.fact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.fact-row li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .05); font-size: var(--fs-xs); }
.fact-row .icon { grid-row: span 2; width: 20px; height: 20px; align-self: center; color: var(--c-lime); }
.fact-row span { color: var(--text-3); }
.fact-row strong { font-size: var(--fs-md); }

.pricing__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; }
.price-card { position: relative; display: flex; flex-direction: column; padding: 30px 28px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--glow); }
.price-card--featured { border: 2px solid var(--c-violet-bright); background: linear-gradient(180deg, rgba(109, 11, 231, .22), rgba(14, 8, 30, .95) 45%); }
.price-card__badge { position: absolute; top: -14px; left: 28px; margin: 0; padding: 3px 14px 3px; border-radius: 999px; background: var(--c-lime); color: var(--c-night); font-size: var(--fs-xs); font-weight: 700; }
.price-card__title { font-size: var(--fs-h2); font-weight: 700; }
.price-card__sub { margin: 8px 0 18px; color: var(--text-2); font-size: var(--fs-md); }
.price-card__list { display: grid; gap: 10px; margin-bottom: 24px; }
.price-card__list li { display: flex; gap: 10px; font-size: var(--fs-md); }
.price-card__list .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--c-lime); }
.price-card__price { margin-top: auto; margin-bottom: 18px; }
.price-card__before { margin: 0; color: var(--text-3); font-size: var(--fs-md); }
.price-card__off { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 6px; background: var(--c-lime); color: var(--c-night); font-weight: 700; font-size: var(--fs-xs); }
.price-card__now { margin: 0; color: #fff; font-family: var(--font-display); font-size: var(--fs-price); font-weight: 700; line-height: 1; }
.price-card__note { margin: 4px 0 0; color: var(--text-3); font-size: var(--fs-xs); }

.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 32px; padding: 18px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); }
.stat-strip li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.stat-strip .icon { grid-row: span 2; width: 30px; height: 30px; color: var(--c-violet-soft); }
.stat-strip strong { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; line-height: 1; }
.stat-strip span { color: var(--text-3); font-size: var(--fs-xs); }

.modules__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.module-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); transition: transform .3s var(--ease), border-color .3s; }
.module-card:hover { transform: translateY(-5px); border-color: var(--c-violet-bright); }
.module-card.is-available { border-color: rgba(165, 210, 87, .55); }
.module-card__media { position: relative; aspect-ratio: 16 / 9; }
.module-card__media img { width: 100%; height: 100%; object-fit: cover; }
.module-card__num, .module-card__status { position: absolute; top: 8px; padding: 2px 9px 2px; border-radius: 6px; font-size: var(--fs-xs); font-weight: 700; }
.module-card__num { left: 8px; background: rgba(0, 0, 0, .7); }
.module-card__status { right: 8px; background: rgba(60, 60, 70, .9); }
.is-available .module-card__status { background: var(--c-lime); color: var(--c-night); }
.module-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px; }
.module-card__title { margin-bottom: 6px; font-size: var(--fs-h4); font-weight: 500; line-height: 1; }
.module-card__title a::after { content: ""; position: absolute; inset: 0; }
.module-card__text { margin-bottom: 10px; color: var(--text-2); font-size: var(--fs-xs); line-height: var(--lh-snug); }
.module-card__stats { margin-bottom: 10px; color: var(--c-lime); font-size: var(--fs-xs); }
.module-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.module-card__more { display: inline-flex; align-items: center; gap: 4px; color: var(--c-violet-soft); font-size: var(--fs-xs); font-weight: 700; }
.module-card__more .icon { width: 8px; height: 12px; }
.module-card .product-card__price strong { font-size: var(--fs-h4); }

.mentor__box { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: center; padding: 26px; background: rgba(118, 93, 186, .2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mentor__photo { width: 100%; border-radius: var(--radius); filter: grayscale(1); }
.mentor__name { margin-bottom: 12px; font-size: var(--fs-price); font-weight: 700; }
.mentor__copy p { color: var(--text-2); }

.faq__list { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.faq__item { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-sm); }
.faq__item summary { cursor: pointer; list-style: none; padding: 16px 48px 14px 18px; position: relative; font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.1; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--c-lime); font-size: var(--fs-h3); }
.faq__item[open] summary::after { content: "–"; }
.faq__item > p, .faq__item > ul { margin: 0; padding: 0 18px 16px; color: var(--text-2); }
.check-list { display: grid; gap: 8px; }
.check-list li { display: flex; gap: 10px; }
.check-list .icon { width: 15px; height: 15px; margin-top: 3px; color: var(--c-lime); }

.join__box--route { grid-template-columns: 1.6fr 1fr; }

.learn__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.learn__list li { display: flex; gap: 10px; font-size: var(--fs-base); }
.learn__list .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--c-lime); }

.lessons__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.lessons__head .routes__title { margin-bottom: 4px; }
.lessons__sub { margin: 0; color: var(--text-3); }
.lesson-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.lesson { display: grid; grid-template-columns: 320px 1fr; gap: 24px; padding: 14px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); }
.lesson__media { overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 16 / 9; background: var(--card-media); }
.lesson__media video, .lesson__media img { width: 100%; height: 100%; object-fit: cover; }
.lesson__num { margin: 0 0 2px; color: var(--c-lime); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.lesson__title { margin-bottom: 8px; font-size: var(--fs-h3); font-weight: 500; }
.lesson__text { color: var(--text-2); font-size: var(--fs-md); }
.lesson__meta { color: var(--text-3); font-size: var(--fs-xs); }
.lesson__classes summary { cursor: pointer; color: var(--c-violet-soft); font-weight: 700; font-size: var(--fs-sm); }
.lesson__classes ol { list-style: decimal; columns: 2; column-gap: 24px; margin: 10px 0 0; padding-left: 20px; color: var(--text-2); font-size: var(--fs-sm); }

.two-lists__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.info-card { padding: 24px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); }
.info-card__title { margin-bottom: 14px; font-size: var(--fs-h3); font-weight: 500; }
.info-card ul { display: grid; gap: 10px; }
.info-card li { display: flex; gap: 10px; }
.info-card .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--c-lime); }

.about-class__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
.about-class__text { color: var(--text-2); }
.about-class__apps { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.about-class__apps .icon { width: 18px; height: 18px; color: var(--c-lime); }
.about-class__grid .faq__item { margin-top: 10px; }

.asset-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 36px; }
.asset-features li { display: flex; flex-direction: column; gap: 4px; padding: 22px; text-align: center; align-items: center; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); }
.asset-features .icon { width: 30px; height: 30px; color: var(--c-violet-soft); margin-bottom: 6px; }
.asset-features strong { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; line-height: 1; }
.asset-features span { color: var(--text-2); font-size: var(--fs-sm); }
.asset-body { max-width: 820px; margin-bottom: 30px; }
.asset-body p { color: var(--text-2); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gallery-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }

@media (max-width: 1080px) {
	.modules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.product-hero__grid, .about-class__grid, .two-lists__grid, .pricing__grid, .mentor__box, .join__box--route { grid-template-columns: 1fr; }
	.product-hero__grid { gap: 24px; padding-top: 24px; }
	.product-hero__media { order: -1; }
	.mentor__photo { max-width: 220px; }
	.lesson { grid-template-columns: 1fr; }
	.learn__list { grid-template-columns: 1fr; }
	.asset-features { grid-template-columns: 1fr; }
	.gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.modules__grid { grid-template-columns: 1fr; }
	.lesson__classes ol { columns: 1; }
	.price-card { padding: 26px 20px; }
}

/* ==========================================================================
   Formularios y página de acceso
   ========================================================================== */
.field { display: grid; gap: 6px; }
.field > span { color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; }
.field small { color: var(--text-3); font-weight: 400; }
.field input, .field textarea, .field select {
	width: 100%; min-height: 48px; padding: 11px 14px 11px;
	background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-size: var(--fs-base);
	border: 1px solid var(--card-border); border-radius: var(--radius-sm);
	transition: border-color .2s, box-shadow .2s;
}
.field input:focus { outline: none; border-color: var(--c-violet-bright); box-shadow: 0 0 0 3px rgba(138, 61, 255, .25); }
.field--trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-snug); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c-violet-bright); flex: none; }
.check a, .auth-form__row a { color: var(--c-violet-soft); text-decoration: underline; text-underline-offset: 3px; }

.notice { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.notice--error { background: rgba(255, 82, 82, .12); border: 1px solid rgba(255, 82, 82, .35); color: #ffb3b3; }
.notice--ok { background: rgba(165, 210, 87, .12); border: 1px solid rgba(165, 210, 87, .35); color: var(--c-lime); }

.auth { padding: 48px 0 88px; }
.auth__grid { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: 56px; align-items: center; }
.auth__title { margin-bottom: 18px; font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-display); }
.auth__title .is-accent { color: var(--c-violet-bright); }
.auth__lead { color: var(--text-2); font-size: var(--fs-lead); }
.auth__perks { display: grid; gap: 16px; margin-top: 8px; }
.auth__perks li { display: flex; gap: 14px; align-items: flex-start; }
.auth__perks .icon { width: 26px; height: 26px; color: var(--c-violet-soft); }
.auth__perks strong { display: block; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 500; line-height: 1; }
.auth__perks span { color: var(--text-2); font-size: var(--fs-md); }

.auth__card { padding: 26px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--glow); }
.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 20px; background: rgba(0, 0, 0, .35); border-radius: 999px; }
.auth__tabs button { min-height: 42px; border-radius: 999px; font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 500; color: var(--text-2); transition: background-color .2s, color .2s; }
.auth__tabs button[aria-selected="true"] { background: var(--c-violet); color: #fff; }
.google-signin { display: flex; justify-content: center; min-height: 44px; }
.google-signin__button { width: 100%; max-width: 400px; display: flex; justify-content: center; }
.auth__divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-form { display: grid; gap: 16px; }
.auth-form[hidden] { display: none; }
.auth-form__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); }
.auth-form__note { margin: -4px 0 0; text-align: center; color: var(--text-3); font-size: var(--fs-xs); }

@media (max-width: 860px) {
	.auth { padding-top: 24px; }
	.auth__grid { grid-template-columns: 1fr; gap: 28px; }
	.auth__card { order: -1; padding: 20px; }
	.auth__title { font-size: var(--fs-h2); }
}
.google-signin[hidden], .auth__divider[hidden] { display: none; }

/* Página siempre a pantalla completa: el pie queda abajo aunque haya poco contenido */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body > .site-main, body > main { flex: 1 0 auto; }
@media (min-width: 961px) and (hover: hover) {
	.courses, .inner-page { background-attachment: fixed; }
}

/* Ventana emergente de acceso */
.auth-dialog {
	width: min(460px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 0; overflow: auto;
	border: 0; border-radius: var(--radius-lg); background: transparent; color: #fff;
}
.auth-dialog::backdrop { background: rgba(4, 1, 12, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.auth-dialog[open] { animation: dialog-in .25s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.auth-dialog .auth__card { padding-top: 54px; background: #120a26; }
.auth-dialog__title { position: absolute; top: 20px; left: 26px; right: 60px; margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.auth-dialog__title strong { color: #fff; }
.auth-dialog__close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.auth-dialog__close:hover { background: rgba(255, 255, 255, .16); }
.auth-dialog__close .icon { width: 18px; height: 18px; }
.auth-form [aria-busy="true"] { opacity: .7; cursor: progress; }

/* ==========================================================================
   Tutorial individual
   ========================================================================== */
.tutorial { padding: 28px 0 80px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.breadcrumbs a { color: var(--text-2); }
.breadcrumbs a:hover { color: var(--c-lime); }
.tutorial__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.tutorial__player .vimeo-facade { border-radius: var(--radius); }
.tutorial__player .vimeo-facade img { filter: brightness(.85); }
.tutorial__cover { width: 100%; border-radius: var(--radius); }
.tutorial__badge { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 6px; background: rgba(0, 0, 0, .75); font-family: var(--font-mono); font-size: var(--fs-xs); }
.tutorial__head { margin: 24px 0 14px; }
.tutorial__title { margin-bottom: 14px; font-size: var(--fs-h1); line-height: var(--lh-heading); }
.tutorial__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tag-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--card-border); border-radius: 999px; background: var(--surface); font-size: var(--fs-sm); transition: border-color .2s; }
.tag-chip:hover { border-color: var(--c-lime); }
.tag-chip img { width: 18px; height: 18px; object-fit: contain; }
.tutorial__fact { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.tutorial__fact .icon { width: 14px; height: 14px; }
.tutorial__desc { max-width: 720px; color: var(--text-2); font-size: var(--fs-lead); line-height: var(--lh-body); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.share__label { margin-right: 4px; color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; }
.share a, .share button { padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: var(--fs-sm); color: var(--text-2); transition: border-color .2s, color .2s; }
.share a:hover, .share button:hover { border-color: var(--c-violet-bright); color: #fff; }

.tutorial__side { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 16px; }
.resource-card { padding: 22px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--glow); }
.resource-card__title { margin-bottom: 14px; font-size: var(--fs-h3); }
.resource-card__list { display: grid; gap: 8px; margin-bottom: 18px; }
.resource-card__list li { display: flex; gap: 10px; color: var(--text-2); font-size: var(--fs-sm); }
.resource-card__list .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--c-lime); }
.resource-card .btn .icon { width: 18px; height: 18px; margin: 0; }
.resource-card__note { margin: 10px 0 0; text-align: center; color: var(--text-3); font-size: var(--fs-xs); }
.resource-card__note a { color: var(--c-violet-soft); text-decoration: underline; text-underline-offset: 3px; }
.community-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.community-card > .icon { width: 28px; height: 28px; color: #8c9eff; }
.community-card__title { margin: 0 0 4px; font-weight: 700; font-size: var(--fs-sm); }
.community-card a { display: inline-flex; align-items: center; gap: 6px; color: var(--c-violet-soft); font-size: var(--fs-sm); }
.community-card a .icon { width: 8px; height: 12px; }
.upsell-card { display: block; overflow: hidden; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); transition: border-color .2s, transform .3s var(--ease); }
.upsell-card:hover { border-color: var(--c-violet-bright); transform: translateY(-3px); }
.upsell-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.upsell-card__body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.upsell-card__body .eyebrow { margin: 0; }
.upsell-card__body strong { font-size: var(--fs-h4); line-height: var(--lh-heading); }
.upsell-card__text { color: var(--text-2); font-size: var(--fs-sm); }
.upsell-card__price { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; color: var(--c-lime); font-weight: 700; font-size: var(--fs-lead); }
.upsell-card__price em { display: inline-flex; align-items: center; gap: 4px; color: var(--c-violet-soft); font-style: normal; font-size: var(--fs-sm); }
.upsell-card__price .icon { width: 8px; height: 12px; }
.related { margin-top: 64px; }

@media (max-width: 960px) {
	.tutorial__layout { grid-template-columns: 1fr; }
	.tutorial__side { position: static; }
	.tutorial__main { display: contents; }
	.tutorial__player { order: 1; flex: none; width: calc(100% + var(--gutter) * 2); aspect-ratio: 16 / 9; margin: 0 calc(var(--gutter) * -1); }
	.tutorial__player .vimeo-facade { height: 100%; }
	.tutorial__player .vimeo-facade { border-radius: 0; }
	.tutorial__head { order: 2; margin-top: 4px; }
	.tutorial__desc { order: 3; font-size: var(--fs-base); }
	.tutorial__side { order: 4; }
	.share { order: 5; }
	.tutorial__layout { display: flex; flex-direction: column; gap: 18px; }
}

/* ==========================================================================
   Mi cuenta y formularios de WooCommerce
   ========================================================================== */
.account-page { padding: 40px 0 88px; }
.auth__grid--account { align-items: start; }
.account { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.account__nav { position: sticky; top: calc(var(--header-h) + 16px); padding: 16px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); }
.account__user { display: flex; gap: 12px; align-items: center; padding: 4px 6px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.account__avatar { width: 44px; height: 44px; border-radius: 50%; }
.account__user strong { display: block; font-size: var(--fs-md); }
.account__user span { display: block; max-width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); font-size: var(--fs-xs); }
.account__nav ul { display: grid; gap: 2px; }
.account__nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; transition: background-color .2s, color .2s; }
.account__nav a .icon { width: 16px; height: 16px; color: var(--text-3); }
.account__nav a:hover { background: var(--surface-strong); color: #fff; }
.account__nav a[aria-current] { background: var(--c-violet); color: #fff; }
.account__nav a[aria-current] .icon { color: #fff; }
.account__content { min-width: 0; }
.account__title { margin-bottom: 18px; font-size: var(--fs-h2); }
.account__title + .account__lead { margin-top: -12px; }
.account__content form em, .account__content .description { display: block; margin-top: -6px; color: var(--text-3); font-size: var(--fs-xs); font-style: normal; }
.account__lead { color: var(--text-2); }
.account-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 28px; }
.account-stats li { padding: 16px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); }
.account-stats strong { display: block; font-size: var(--fs-h2); line-height: 1; }
.account-stats span { display: block; margin-top: 4px; line-height: 1.3; color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.account-block { margin-bottom: 32px; }
.account-block__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.account-block__head h3 { font-size: var(--fs-h4); }
.account-block__head a { color: var(--c-violet-soft); font-size: var(--fs-sm); }
.tutorial-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.empty-state { padding: 22px; border: 1px dashed var(--card-border); border-radius: var(--radius); color: var(--text-2); }
.empty-state p { margin-bottom: 12px; }
.empty-state .btn { margin-right: 6px; }

.course-list { display: grid; gap: 12px; }
.course-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 12px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); transition: border-color .2s; }
.course-row:hover { border-color: var(--c-violet-bright); }
.course-row__media { overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 16 / 9; background: var(--card-media); }
.course-row__media img { width: 100%; height: 100%; object-fit: cover; }
.course-row__body strong { display: block; margin-bottom: 10px; font-size: var(--fs-lead); }
.progress { display: block; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-violet), var(--c-lime)); }
.course-row__meta { display: block; margin-top: 6px; color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.course-row__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--c-lime); font-weight: 700; font-size: var(--fs-sm); white-space: nowrap; }
.course-row__cta .icon { width: 8px; height: 12px; }

/* Elementos de WooCommerce dentro de la cuenta, carrito y pago */
.account__content h2, .account__content h3, .woocommerce h2, .woocommerce h3 { margin: 0 0 14px; }
.woocommerce table.shop_table, .account__content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: var(--fs-sm); background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; }
.woocommerce table th, .woocommerce table td, .account__content table th, .account__content table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.woocommerce table th, .account__content table th { color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; }
.woocommerce form .form-row, .account__content form p { display: grid; gap: 6px; margin: 0 0 16px; }
.woocommerce form label, .account__content form label { color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; }
.woocommerce form .input-text, .woocommerce form input[type="text"], .woocommerce form input[type="email"], .woocommerce form input[type="password"], .woocommerce form input[type="tel"], .woocommerce form select, .woocommerce form textarea,
.account__content input[type="text"], .account__content input[type="email"], .account__content input[type="password"] {
	width: 100%; min-height: 46px; padding: 10px 14px; background: rgba(0, 0, 0, .35); color: #fff; font: inherit; border: 1px solid var(--card-border); border-radius: var(--radius-sm);
}
.woocommerce form .input-text:focus, .account__content input:focus { outline: none; border-color: var(--c-violet-bright); box-shadow: 0 0 0 3px rgba(138, 61, 255, .25); }
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .account__content .button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border: 1px solid var(--c-violet-bright); border-radius: var(--radius-sm);
	background: var(--c-violet); color: #fff; font: 500 var(--fs-md) / 1 var(--font-body); cursor: pointer; transition: background-color .2s;
}
.woocommerce .button:hover, .account__content .button:hover { background: var(--c-violet-bright); }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice {
	margin: 0 0 18px; padding: 14px 16px; list-style: none; border-radius: var(--radius-sm); font-size: var(--fs-sm);
	background: rgba(138, 61, 255, .12); border: 1px solid rgba(138, 61, 255, .35); color: var(--text-2);
}
.woocommerce-error { background: rgba(255, 82, 82, .12); border-color: rgba(255, 82, 82, .35); color: #ffb3b3; }
.woocommerce-message a, .woocommerce-info a, .account__content p a { color: var(--c-violet-soft); }
.woocommerce fieldset { margin: 20px 0; padding: 18px; border: 1px solid var(--card-border); border-radius: var(--radius); }
.woocommerce fieldset legend { padding: 0 8px; font-weight: 700; }
.woocommerce-LostPassword, .lost_reset_password { max-width: 520px; }

@media (max-width: 860px) {
	.account { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.account__nav { position: static; min-width: 0; padding: 12px; }
	.account__user { padding-bottom: 12px; }
	.account-stats { gap: 8px; }
	.account-stats li { padding: 12px; }
	.account__nav ul { display: flex; overflow-x: auto; gap: 6px; }
	.account__nav a { white-space: nowrap; }
	.account-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tutorial-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.course-row { grid-template-columns: 110px minmax(0, 1fr); }
	.course-row__cta { grid-column: 2; }
}

/* ==========================================================================
   Cursos: portada del curso y reproductor de lecciones
   ========================================================================== */
.course-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-bottom: 48px; }
.course-hero__title { margin-bottom: 22px; font-size: var(--fs-h1); line-height: var(--lh-heading); }
.course-progress { max-width: 460px; margin-bottom: 24px; }
.course-progress p { margin-top: 8px; color: var(--text-2); font-size: var(--fs-sm); }
.course-progress strong { color: #fff; }
.course-hero .btn .icon { width: 16px; height: 16px; }
.course__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.course__side { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 16px; }
.course-about { padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-sm); color: var(--text-2); }
.course-about summary { cursor: pointer; color: #fff; font-weight: 500; }
.course-about__text { margin-top: 12px; }
.course-about__text p + p { margin-top: 10px; }

.syllabus { display: grid; gap: 12px; counter-reset: none; }
.lesson-item__link { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 12px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); transition: border-color .2s, transform .2s; }
a.lesson-item__link:hover { border-color: var(--c-violet-bright); transform: translateY(-2px); }
.lesson-item__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--c-violet), #1c0a45); }
.lesson-item__media img { width: 100%; height: 100%; object-fit: cover; }
.lesson-item__num { position: absolute; left: 8px; bottom: 6px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .65); font-family: var(--font-mono); font-size: var(--fs-xs); }
.lesson-item__body strong { display: block; font-size: var(--fs-lead); line-height: var(--lh-snug); }
.lesson-item__meta { display: block; margin-top: 6px; color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-xs); }
.lesson-item__state { display: grid; place-items: center; width: 40px; height: 40px; margin-right: 6px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.lesson-item__state .icon { width: 16px; height: 16px; }
.lesson-item.is-done .lesson-item__state { background: rgba(165, 210, 87, .15); color: var(--c-lime); }
.lesson-item.is-next .lesson-item__link { border-color: var(--c-violet-bright); box-shadow: var(--glow); }
.lesson-item.is-next .lesson-item__state { background: var(--c-violet); }
.lesson-item.is-locked .lesson-item__link { opacity: .55; }

.player__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.lesson-player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #000; box-shadow: var(--glow); }
.lesson-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__head { margin: 22px 0 18px; }
.player__head .eyebrow { margin-bottom: 8px; }
.player__title { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.player__sub { margin-top: 6px; color: var(--text-3); }
.player__actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0 24px; border-bottom: 1px solid var(--border); }
.player__stepper { display: flex; gap: 8px; }
.player__stepper .btn:disabled { opacity: .4; cursor: default; }
.player__complete { display: flex; align-items: center; gap: 12px; }
.player__complete form { margin: 0; }
.player__complete .learndash_mark_complete_button, .player__complete input[type="submit"] {
	min-height: 40px; padding: 6px 18px; border: 1px solid var(--c-lime); border-radius: var(--radius-sm); background: var(--c-lime); color: var(--c-night);
	font: 500 var(--fs-sm) / 1 var(--font-body); cursor: pointer;
}
.player__complete .learndash_mark_complete_button:hover { background: #b9e36b; }
.player__done { display: inline-flex; align-items: center; gap: 8px; color: var(--c-lime); font-weight: 500; font-size: var(--fs-sm); }
.player__done .icon { width: 18px; height: 18px; }
.player__complete .btn .icon { width: 8px; height: 12px; }
.player__content { margin-top: 24px; color: var(--text-2); }

.assignment { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: center; margin-top: 28px; padding: 24px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); }
.assignment h2 { margin-bottom: 10px; font-size: var(--fs-h4); }
.assignment__text { color: var(--text-2); font-size: var(--fs-sm); }
.assignment__text p { margin-bottom: 10px; }
.assignment__text .btn { margin-top: 8px; }
.assignment__text .btn .icon { width: 18px; height: 18px; }
.assignment__img { width: 100%; border-radius: var(--radius); }

.player__layout > .player__extra { grid-column: 1; margin-top: 0; }
.player__side { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 14px; }
.side-panel { padding: 14px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); }
.side-panel__title { display: flex; justify-content: space-between; gap: 10px; margin: 2px 4px 12px; font-weight: 700; font-size: var(--fs-md); }
.side-panel__title span { color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; }
.side-panel__title a:hover { color: var(--c-lime); }
.side-panel .progress { margin: 0 4px 12px; height: 6px; }
.class-list { display: grid; gap: 2px; max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.class-list a { display: flex; gap: 12px; align-items: baseline; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-snug); transition: background-color .2s; }
.class-list a:hover { background: var(--surface-strong); color: #fff; }
.class-list a[aria-current] { background: rgba(138, 61, 255, .22); color: #fff; }
.class-list__num { flex: none; width: 22px; color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-xs); text-align: right; }
.class-list a[aria-current] .class-list__num { color: var(--c-lime); }
.side-links { display: grid; gap: 8px; }
.side-links .btn .icon { width: 18px; height: 18px; }
.outline { display: grid; gap: 2px; }
.outline a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-2); font-size: var(--fs-sm); }
.outline a:hover { background: var(--surface-strong); color: #fff; }
.outline a[aria-current] { background: var(--c-violet); color: #fff; }
.outline .icon { flex: none; width: 14px; height: 14px; color: var(--text-3); }
.outline .is-done .icon { color: var(--c-lime); }
.outline a[aria-current] .icon { color: #fff; }
.outline .is-locked a { opacity: .5; }

.lesson-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; }
.lesson-pager__link { display: grid; gap: 4px; max-width: 46%; padding: 14px 18px; border: 1px solid var(--card-border); border-radius: var(--radius); background: var(--surface); font-weight: 500; transition: border-color .2s; }
.lesson-pager__link span { color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; }
.lesson-pager__link:hover { border-color: var(--c-violet-bright); }
.lesson-pager__link--next { margin-left: auto; text-align: right; }
.lesson-locked { max-width: 640px; margin: 40px auto; text-align: center; }
.lesson-locked > .icon { width: 28px; height: 28px; margin-bottom: 12px; color: var(--c-violet-soft); }

@media (max-width: 1024px) {
	.course-hero, .course__layout, .player__layout { grid-template-columns: minmax(0, 1fr); }
	.course__side, .player__side { position: static; grid-column: auto; grid-row: auto; }
	.class-list { max-height: 320px; }
}
@media (max-width: 640px) {
	.course-hero { gap: 24px; }
	.lesson-item__link { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
	.lesson-item__state { display: none; }
	.lesson-item__body strong { font-size: var(--fs-md); }
	.assignment { grid-template-columns: minmax(0, 1fr); padding: 18px; }
	.player__actions { flex-direction: column; align-items: stretch; }
	.player__stepper .btn { flex: 1; }
	.player__complete { justify-content: space-between; }
	.lesson-pager__link { max-width: none; flex: 1; }
}

/* ==========================================================================
   Carrito y pago
   ========================================================================== */
.commerce__head { margin: 8px 0 28px; }
.commerce__title { font-size: var(--fs-h1); line-height: var(--lh-heading); }
.commerce__lead { margin-top: 8px; color: var(--text-2); }
.commerce .woocommerce-form-coupon-toggle .woocommerce-info, .commerce .woocommerce-form-login-toggle .woocommerce-info { background: var(--surface); border-color: var(--border); }
.commerce form.checkout_coupon, .commerce form.woocommerce-form-login { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: -6px 0 18px; padding: 16px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); }
.commerce form.checkout_coupon p { margin: 0; }
.commerce form.checkout_coupon .form-row-first { flex: 1 1 220px; }
.commerce .clear { display: none; }

/* Pago: datos a la izquierda, resumen a la derecha. */
.commerce form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 0 32px; align-items: start; }
.commerce form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.commerce #customer_details { grid-column: 1; grid-row: 1 / span 3; padding: 24px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); }
.commerce #customer_details .col-2:empty, .commerce .woocommerce-additional-fields { display: none; }
.commerce #customer_details h3 { margin-bottom: 18px; font-size: var(--fs-h4); }
.commerce .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.commerce .woocommerce-billing-fields__field-wrapper .form-row-wide, .commerce .woocommerce-billing-fields__field-wrapper #billing_country_field { grid-column: 1 / -1; }
.commerce .form-row .required { color: var(--c-violet-soft); text-decoration: none; }
.commerce .form-row .optional { color: var(--text-3); font-weight: 400; }
.commerce .form-row .description { margin-top: 4px; color: var(--text-3); font-size: var(--fs-xs); }
.commerce .woocommerce-account-fields { margin-top: 10px; }
.commerce #order_review_heading { grid-column: 2; margin: 0 0 12px; font-size: var(--fs-h4); }
.commerce #order_review { grid-column: 2; position: sticky; top: calc(var(--header-h) + 16px); padding: 20px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--glow); }
.commerce #order_review table.shop_table { margin-bottom: 16px; background: transparent; border: 0; border-radius: 0; }
.commerce #order_review th, .commerce #order_review td { padding: 10px 0; }
.commerce #order_review thead { display: none; }
.commerce #order_review .product-name { color: #fff; font-size: var(--fs-md); text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.commerce #order_review .product-total, .commerce #order_review tfoot td { text-align: right; }
.commerce #order_review tfoot th { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-2); }
.commerce #order_review .order-total th, .commerce #order_review .order-total td { color: #fff; font-size: var(--fs-lead); font-weight: 700; border-bottom: 0; }

/* Métodos de pago. */
.commerce #payment { background: transparent; }
.commerce #payment ul.payment_methods { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; border: 0; }
.commerce #payment ul.payment_methods > li { padding: 12px 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--card-border); border-radius: var(--radius-sm); }
.commerce #payment ul.payment_methods > li > label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #fff; font-weight: 500; cursor: pointer; }
.commerce #payment ul.payment_methods > li > label img { max-height: 22px; width: auto; }
.commerce #payment ul.payment_methods > li > input { accent-color: var(--c-violet-bright); margin-right: 6px; }
.commerce #payment .payment_box { margin-top: 10px; padding: 12px 0 0; background: transparent; color: var(--text-2); font-size: var(--fs-sm); }
.commerce #payment .payment_box::before { display: none; }
.commerce #payment .payment_box fieldset { margin: 0; padding: 0; border: 0; }
.commerce .woocommerce-privacy-policy-text { color: var(--text-3); font-size: var(--fs-xs); }
.commerce .woocommerce-terms-and-conditions-wrapper { margin: 12px 0; font-size: var(--fs-sm); }
.commerce .woocommerce-terms-and-conditions-wrapper label { display: flex; gap: 8px; align-items: flex-start; }
.commerce .woocommerce-terms-and-conditions-wrapper a { color: var(--c-violet-soft); }
.commerce #place_order { width: 100%; min-height: 54px; font-size: 17px; font-weight: 700; background: var(--c-lime); border-color: var(--c-lime); color: var(--c-night); }
.commerce #place_order:hover { background: #b9e36b; }
.checkout-trust { display: grid; gap: 8px; margin-top: 16px; color: var(--text-3); font-size: var(--fs-xs); }
.checkout-trust li { display: flex; gap: 10px; align-items: flex-start; }
.checkout-trust .icon { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--c-lime); }
.commerce .blockUI.blockOverlay { background: rgba(11, 4, 32, .6) !important; }

/* Carrito. */
.commerce .woocommerce-cart-form { margin-bottom: 24px; }
.commerce .woocommerce-cart-form .product-thumbnail img { width: 96px; border-radius: var(--radius-sm); }
.commerce .woocommerce-cart-form .product-name a { color: #fff; font-weight: 500; }
.commerce .woocommerce-cart-form a.remove { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--text-2); font-size: 18px; }
.commerce .woocommerce-cart-form a.remove:hover { background: rgba(255, 82, 82, .25); color: #fff; }
.commerce .woocommerce-cart-form .quantity input { width: 64px; min-height: 40px; text-align: center; }
.commerce .woocommerce-cart-form td.actions .coupon { display: inline-flex; gap: 8px; }
.commerce .woocommerce-cart-form td.actions .coupon label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.commerce .woocommerce-cart-form td.actions { text-align: right; }
.commerce .woocommerce-cart-form td.actions .coupon { float: left; }
.commerce .cart-collaterals { max-width: 420px; margin-left: auto; padding: 20px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); }
.commerce .cart-collaterals table { border: 0; background: transparent; }
.commerce .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 54px; background: var(--c-lime); border-color: var(--c-lime); color: var(--c-night); font-weight: 700; }
.commerce .cart-empty, .commerce .return-to-shop { text-align: center; }
.commerce .return-to-shop { margin-top: 16px; }

/* Gracias por tu compra. */
.commerce--thanks .woocommerce-order { max-width: 760px; }
.commerce--thanks .woocommerce-thankyou-order-received { display: none; }
.commerce--thanks ul.woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.commerce--thanks ul.woocommerce-order-overview li { padding: 14px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; }
.commerce--thanks ul.woocommerce-order-overview strong { display: block; margin-top: 6px; color: #fff; font-family: var(--font-body); font-size: var(--fs-md); text-transform: none; }
.commerce__next { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.commerce__next .btn .icon { width: 18px; height: 18px; }

@media (max-width: 960px) {
	.commerce form.checkout { grid-template-columns: minmax(0, 1fr); }
	.commerce #customer_details, .commerce #order_review_heading, .commerce #order_review { grid-column: 1; grid-row: auto; }
	.commerce #customer_details { margin-bottom: 24px; padding: 18px; }
	.commerce #order_review { position: static; }
}
@media (max-width: 640px) {
	.commerce .woocommerce-billing-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
	.commerce .woocommerce-cart-form thead { display: none; }
	.commerce .woocommerce-cart-form tr.cart_item { display: grid; grid-template-columns: 80px 1fr; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
	.commerce .woocommerce-cart-form tr.cart_item td { padding: 0; border: 0; }
	.commerce .woocommerce-cart-form td.product-thumbnail { grid-row: span 4; }
	.commerce .woocommerce-cart-form td.product-remove { order: 9; }
	.commerce .woocommerce-cart-form td.actions .coupon { float: none; display: flex; margin-bottom: 10px; }
}
/* País: se usa el selector nativo (más rápido y accesible que select2). */
.commerce .select2-container { display: none !important; }
.commerce select.select2-hidden-accessible { position: static !important; width: 100% !important; height: auto !important; margin: 0 !important; clip: auto !important; clip-path: none !important; overflow: visible !important; border: 1px solid var(--card-border) !important; padding: 10px 14px !important; }
.commerce select { width: 100%; min-height: 46px; padding: 10px 14px; background: rgba(0, 0, 0, .35); color: #fff; font: inherit; border: 1px solid var(--card-border); border-radius: var(--radius-sm); }
.commerce select option { background: #160b33; }
.commerce .woocommerce-account-fields .create-account { margin-top: 4px; }
.commerce .woocommerce-account-fields .create-account label { color: var(--text-2); }

/* ==========================================================================
   Páginas legales
   ========================================================================== */
.legal__layout { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 48px; justify-content: center; align-items: start; padding-top: 16px; }
.legal__toc { position: sticky; top: calc(var(--header-h) + 24px); }
.legal__toc ol { display: grid; gap: 2px; border-left: 1px solid var(--border); }
.legal__toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-2); font-size: var(--fs-sm); }
.legal__toc a:hover { border-left-color: var(--c-lime); color: #fff; }
.legal__title { margin-bottom: 16px; font-size: var(--fs-h1); line-height: var(--lh-heading); }
.legal__lead { font-size: var(--fs-lead); color: #fff; }
.legal__body { color: var(--text-2); line-height: var(--lh-body); }
.legal__body p { margin-bottom: 14px; }
.legal__body section { padding-top: 32px; margin-top: 32px; border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 16px); }
.legal__body h2 { margin-bottom: 14px; color: #fff; font-size: var(--fs-h3); }
.legal__body h3 { margin: 22px 0 8px; color: #fff; font-size: var(--fs-h5); }
.legal__body ul { display: grid; gap: 8px; margin: 0 0 14px; }
.legal__body ul li { position: relative; padding-left: 20px; }
.legal__body ul li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-lime); }
.legal__body strong { color: #fff; }
@media (max-width: 860px) {
	.legal__layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.legal__toc { position: static; }
}

/* Barras flotantes viejas de Elementor (el tema ya tiene su barra de anuncio). */
[data-elementor-type="floating-buttons"], .e-floating-bars { display: none !important; }
.related__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.related__all { display: inline-flex; align-items: center; gap: 6px; color: var(--c-violet-soft); font-size: var(--fs-sm); }
.related__all .icon { width: 8px; height: 12px; }
.related__all:hover { color: var(--c-lime); }