/* ============================================================
   TEMAS.CSS: personalidad de los temas 2 a 10 sobre la base nueva

   base.css pone la estructura y los componentes; acá cada tema
   cambia carácter: superficies, forma, barra superior, menú,
   botones, tarjetas, portada del sitio y SU PROPIO MOVIMIENTO.
   Los colores siguen saliendo de la marca de cada academia
   (--color-primario, --color-header-bg): ningún tema fija colores
   de marca. Todos respetan prefers-reduced-motion (ver base.css).

   Cada tema abre con sus razones (una línea por decisión: color,
   tipografía, forma, composición, movimiento). Si una técnica no
   tiene razón escrita, no va.

   Selectores: html[data-tema="N"]. El tema 1 (Base) no tiene
   bloque: es base.css tal cual.
   ============================================================ */

/* Animación de entrada del contenido: cada tema la reemplaza por la suya */
@media (prefers-reduced-motion: no-preference) {
  html[data-tema] .ui-app #ax-contenido ~ :is(div, main, section),
  html[data-tema].ui-app #ax-contenido ~ :is(div, main, section) { animation-duration: var(--ax-entrada-dur, .38s); }
}


/* ════════════════════════════════════════════════════════════
   2 · ESTRUCTURA: corporativo, ángulos rectos, bordes que sostienen todo.
   Color: fondo gris frío del color de la barra; el primario solo marca
   (filete superior de las tarjetas, ítem activo, panel de la portada).
   Tipografía: Manrope 800 en títulos (firme, corporativa) + IBM Plex Sans
   en el cuerpo (diseñada para interfaces con datos y tablas).
   Forma: radios casi nulos y botones de contorno en mayúscula corta: se lee
   como un formulario institucional, no como una app de consumo.
   Portada: partida; el panel lleva el nombre de la institución en un bloque
   sólido del color de marca (identidad, no decoración).
   Movimiento: seco, lineal, entra de costado (.22s).
   ════════════════════════════════════════════════════════════ */
html[data-tema="2"] {
  --ax-curva: cubic-bezier(.4, 0, .2, 1);
}
/* Superficies propias del tema: solo en modo claro (en oscuro manda la paleta oscura de la base) */
html[data-tema="2"]:not([data-theme="dark"]) {
  --ax-bg: oklch(from var(--color-header-bg) 0.972 0.004 h);
  --ax-line: oklch(from var(--color-header-bg) 0.88 0.01 h);
  --ax-line-2: oklch(from var(--color-header-bg) 0.78 0.014 h);
}
html[data-tema="2"][data-theme="dark"] { --ax-line: oklch(from var(--color-primario) 0.8 0.02 h / .16); --ax-line-2: oklch(from var(--color-primario) 0.8 0.02 h / .28); }
html[data-tema="2"] :is(.card, .form-card, .stat, .hm-curso, .hm-pend, .hm-seguir, .admin-option, .tool-btn, .modal-inner, #content-inner, .sidebar) {
  box-shadow: none !important; border-width: 1px; border-color: var(--ax-line-2);
}
html[data-tema="2"] :is(.card, .form-card, .hm-curso, .admin-option) { border-top: 3px solid var(--color-primario); }
html[data-tema="2"] .ax-item { border-radius: 0; }
html[data-tema="2"] .ax-item.is-activo { background: transparent; box-shadow: inset 3px 0 0 var(--color-primario); }
html[data-tema="2"] .ax-item.is-activo::before { display: none; }
html[data-tema="2"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn) {
  background: transparent; color: var(--ax-ink); border: 1.5px solid var(--ax-ink); box-shadow: none;
  text-transform: uppercase; letter-spacing: .06em; font-size: .8rem;
}
html[data-tema="2"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn):hover {
  background: var(--ax-ink); color: var(--ax-surface); border-color: var(--ax-ink);
}
html[data-tema="2"] .ax-pub-nav a.ax-pub-cta { border-radius: 0; background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
html[data-tema="2"] .ax-pub-nav a.ax-pub-cta:hover { background: #fff; color: var(--color-header-bg); }
/* Portada partida: panel sólido del color de marca con el nombre de la institución */
html[data-tema="2"].ui-publico .hero-split { background: var(--color-header-bg); }
html[data-tema="2"].ui-publico .hero-split-panel { border-radius: 0; border: 0; background: var(--color-primario); }
html[data-tema="2"].ui-publico .hero-split-panel span { color: var(--ax-on-accent); text-align: left; justify-self: start; align-self: end; padding: 10%; }
html[data-tema="2"].ui-publico .hero-split .cta-buttons .btn-primary { background: #fff; color: var(--color-header-bg); border-color: #fff; }
html[data-tema="2"].ui-publico .hero-split .cta-buttons .btn-primary:hover { background: var(--color-primario); color: var(--ax-on-accent); border-color: var(--color-primario); }
html[data-tema="2"].ui-publico .hero-split .cta-buttons .btn-secondary { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
html[data-tema="2"].ui-publico .features-grid { border: 1px solid var(--ax-line-2); }
html[data-tema="2"].ui-publico .feature-card { padding: 28px !important; border-left: 1px solid var(--ax-line-2) !important; }
html[data-tema="2"].ui-publico .feature-card:first-child { border-left: 0 !important; }
@media (prefers-reduced-motion: no-preference) {
  html[data-tema="2"] { --ax-entrada-dur: .22s; }
  html[data-tema="2"].ui-app #ax-contenido ~ :is(div, main, section) { animation-name: t2-entra; animation-timing-function: linear; }
  @keyframes t2-entra { from { opacity: 0; transform: translateX(-10px); } }
}


/* ════════════════════════════════════════════════════════════
   3 · SUAVE: orgánico y aireado (coaches, bienestar, cursos personales).
   Color: fondo apenas teñido del primario; las superficies blancas se
   separan del fondo por color, sin bordes.
   Tipografía: Sora (terminaciones redondeadas, cálida) en todo.
   Forma: radios amplios. Píldora SOLO en botones: es el único tema donde la
   forma blanda es la personalidad; el menú y los campos no son píldoras.
   Sombra: solo en lo que se toca (tarjetas de curso, accesos, avance del
   curso). Los contenedores de lectura no flotan.
   Movimiento: lento, el contenido sube y se asienta (.6s).
   ════════════════════════════════════════════════════════════ */
html[data-tema="3"] {
  --ax-curva: cubic-bezier(.22, 1, .36, 1);
  --t3-sombra: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -14px rgba(16,24,40,.22);
}
/* Superficies propias del tema: solo en modo claro (en oscuro manda la paleta oscura de la base) */
html[data-tema="3"]:not([data-theme="dark"]) {
  --ax-bg: oklch(from var(--color-primario) 0.975 0.012 h);
  --ax-surface-2: oklch(from var(--color-primario) 0.955 0.02 h);
}
html[data-tema="3"][data-theme="dark"] { --t3-sombra: 0 14px 32px -16px rgba(0,0,0,.6); }
html[data-tema="3"] :is(.card, .form-card, .stat, .hm-pend, #content-inner, .sidebar, .contact-form) {
  border: 0 !important; box-shadow: none !important; border-radius: var(--radio-lg); background-color: var(--ax-surface);
}
html[data-tema="3"] :is(.hm-curso, .admin-option, .tool-btn, .courses-grid .course-card, .cx .cx-curso) {
  border: 0 !important; box-shadow: var(--t3-sombra) !important; border-radius: var(--radio-lg);
}
html[data-tema="3"] .ax-item { border-radius: var(--radio-md); }
html[data-tema="3"] .ax-item.is-activo::before { display: none; }
html[data-tema="3"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn, .btn-secondary) { border-radius: var(--radio-pill); }
html[data-tema="3"] :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) { border-color: transparent; background-color: var(--ax-surface-2); box-shadow: none; }
html[data-tema="3"] :is(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea):focus { background-color: var(--ax-surface); border-color: var(--ax-accent-line); }
html[data-tema="3"].ui-publico .features-grid { gap: 20px; border: 0; }
html[data-tema="3"].ui-publico .feature-card, html[data-tema="3"].ui-publico .feature-card + .feature-card {
  padding: 28px !important; border: 0 !important; background: var(--ax-surface); border-radius: var(--radio-lg); box-shadow: none;
}
html[data-tema="3"].ui-publico .features-grid.fg-escalonado .feature-card:nth-child(even) { transform: translateY(24px); }
@media (prefers-reduced-motion: no-preference) {
  html[data-tema="3"] { --ax-entrada-dur: .6s; }
  html[data-tema="3"].ui-app #ax-contenido ~ :is(div, main, section) { animation-name: t3-entra; }
  @keyframes t3-entra { from { opacity: 0; transform: translateY(14px) scale(.985); } }
  html[data-tema="3"] :is(.admin-option, .tool-btn, .hm-curso, .courses-grid .course-card, .cx .cx-curso) { transition: transform .45s var(--ax-curva), box-shadow .45s var(--ax-curva); }
  html[data-tema="3"] :is(.admin-option, .tool-btn, .courses-grid .course-card, .cx .cx-curso):hover { transform: translateY(-4px); }
}


/* ════════════════════════════════════════════════════════════
   4 · EDITORIAL: premium, como una revista. Mucho aire, reglas finas.
   Color: casi monocromo; el primario aparece en subrayados y en el panel.
   Tipografía: Fraunces (serif con carácter) en títulos grandes + Manrope
   en el cuerpo para que las tablas del campus sigan siendo legibles.
   Portada: partida, sin etiqueta sobre el título; el panel lleva el nombre
   de la institución en serif itálica, como la cabecera de un diario.
   Movimiento: solo fundido; los enlaces se subrayan de izquierda a derecha.
   ════════════════════════════════════════════════════════════ */
html[data-tema="4"] {
  --ax-curva: cubic-bezier(.25, .1, .25, 1);
}
/* Superficies propias del tema: solo en modo claro (en oscuro manda la paleta oscura de la base) */
html[data-tema="4"]:not([data-theme="dark"]) {
  --ax-bg: oklch(from var(--color-header-bg) 0.985 0.004 h);
  --ax-surface-2: oklch(from var(--color-header-bg) 0.965 0.006 h);
}
html[data-tema="4"] :is(h1, h2, h3, .cx-titulo, .cx-nombre, .hero-title, .section-title) { font-weight: 600; letter-spacing: -.02em; }
html[data-tema="4"].ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2) { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 600; }
html[data-tema="4"] :is(.card, .form-card, .stat, .hm-curso, .hm-pend, .admin-option, .tool-btn, #content-inner, .sidebar) { box-shadow: none !important; }
html[data-tema="4"] :is(.card, .form-card) > :is(h2, h3):first-child { font-family: var(--font-titulos); font-size: 1.3rem; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid var(--ax-line); }
html[data-tema="4"] .ax-grupo-tit { font-family: var(--font-titulos); font-style: italic; font-weight: 500; font-size: .85rem; }
html[data-tema="4"] .ax-item.is-activo { background: transparent; color: var(--ax-ink); }
html[data-tema="4"] .ax-item.is-activo span { text-decoration: underline; text-decoration-color: var(--color-primario); text-decoration-thickness: 2px; text-underline-offset: .35em; }
html[data-tema="4"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn) {
  background: transparent; color: var(--ax-ink); border: 1px solid var(--ax-ink); box-shadow: none;
  text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; padding: 12px 20px;
}
html[data-tema="4"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn):hover { background: var(--ax-ink); color: var(--ax-surface); }
html[data-tema="4"].ui-publico .hero-split { background: var(--ax-bg); color: var(--ax-ink); border-bottom: 1px solid var(--ax-line); }
html[data-tema="4"].ui-publico .hero-split :is(.hero-title) { color: var(--ax-ink); -webkit-text-fill-color: var(--ax-ink); font-size: clamp(2.8rem, 7vw, 5.6rem); font-weight: 500; }
html[data-tema="4"].ui-publico .hero-split .hero-subtitle { color: var(--ax-ink-2); }
html[data-tema="4"].ui-publico .hero-split .cta-buttons .btn-secondary { color: var(--ax-ink); border-color: var(--ax-line-2); background: transparent; }
html[data-tema="4"].ui-publico .hero-split-panel { border: 0; border-radius: 0; background: var(--ax-accent-soft); border-block: 2px solid var(--ax-ink); }
html[data-tema="4"].ui-publico .hero-split-panel span { font-style: italic; font-weight: 500; color: var(--ax-ink); }
/* Enlaces del sitio: el subrayado se dibuja de izquierda a derecha */
html[data-tema="4"] :is(.ax-pie-col a, .courses-grid .course-link, .cx-link, .link-inline) {
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ax-curva);
}
html[data-tema="4"] :is(.ax-pie-col a, .courses-grid .course-link, .cx-link, .link-inline):hover { background-size: 100% 1px; }
/* Razones en zigzag: cada razón es un párrafo que alterna el lado (ritmo de revista).
   El CSS heredado ponía título y texto uno al lado del otro y quedaban apretados. */
html[data-tema="4"].ui-publico .features-grid.fg-zigzag { grid-template-columns: 1fr; border-top: 0; }
html[data-tema="4"].ui-publico .features-grid.fg-zigzag .feature-card { display: block; max-width: 60ch; padding: 22px 0 !important; border-left: 0 !important; border-top: 1px solid var(--ax-line); text-align: left; }
html[data-tema="4"].ui-publico .features-grid.fg-zigzag .feature-card:nth-child(even) { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  html[data-tema="4"] { --ax-entrada-dur: .5s; }
  html[data-tema="4"].ui-app #ax-contenido ~ :is(div, main, section) { animation-name: t4-entra; }
  @keyframes t4-entra { from { opacity: 0; } }
}


/* ════════════════════════════════════════════════════════════
   5 · IMPACTO: bold, de cartel. Borde grueso y títulos en mayúscula apretada.
   Tipografía: Bricolage Grotesque (grotesca expresiva de cartel, con ancho
   óptico para títulos enormes) + Manrope en el cuerpo.
   Sombra: la "sombra sticker" (sin desenfoque) va SOLO en lo que se puede
   presionar (botones, tarjetas de curso, accesos, "Seguí donde dejaste"):
   así la sombra significa "esto se toca". Los contenedores llevan solo borde.
   Portada: sin insignia sobre el título; el impacto lo da la tipografía.
   Movimiento: rápido, con rebote; los botones se hunden al presionarlos.
   ════════════════════════════════════════════════════════════ */
html[data-tema="5"] {
  --ax-curva: cubic-bezier(.34, 1.56, .64, 1);
  --t5-borde: var(--ax-ink);
  --t5-sombra: 4px 4px 0 var(--ax-ink);
}
html[data-tema="5"][data-theme="dark"] { --t5-borde: oklch(from var(--color-primario) 0.85 0.05 h); --t5-sombra: 4px 4px 0 oklch(from var(--color-primario) 0.85 0.05 h / .6); }
html[data-tema="5"] :is(h1, h2, .hero-title, .section-title, .cx-titulo, .cx-nombre) { text-transform: uppercase; letter-spacing: -.02em; }
html[data-tema="5"] :is(.card, .form-card, .stat, .hm-curso, .hm-pend, #content-inner, .sidebar, .contact-form) {
  border: 2px solid var(--t5-borde) !important; box-shadow: none !important;
}
html[data-tema="5"] :is(.hm-seguir, .admin-option, .tool-btn, .courses-grid .course-card, .cx .cx-curso) {
  border: 2px solid var(--t5-borde) !important; box-shadow: var(--t5-sombra) !important;
}
html[data-tema="5"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn) {
  border: 2px solid var(--t5-borde); box-shadow: 3px 3px 0 var(--t5-borde); font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  transition: transform .12s var(--ax-curva), box-shadow .12s var(--ax-curva), background .12s;
}
html[data-tema="5"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn):hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--t5-borde); }
html[data-tema="5"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn, .btn-secondary):active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--t5-borde); }
html[data-tema="5"] .ax-item.is-activo { background: var(--color-primario); color: var(--ax-on-accent); border: 2px solid var(--t5-borde); }
html[data-tema="5"] .ax-item.is-activo .ui-ic { color: var(--ax-on-accent); }
html[data-tema="5"] .ax-item.is-activo::before { display: none; }
html[data-tema="5"].ui-publico .hero-title { font-size: clamp(2.8rem, 8vw, 5.8rem); line-height: .98; }
html[data-tema="5"].ui-publico .features-grid { gap: 18px; border: 0; }
html[data-tema="5"].ui-publico .feature-card, html[data-tema="5"].ui-publico .feature-card + .feature-card {
  padding: 24px !important; border: 2px solid var(--t5-borde) !important; box-shadow: none; background: var(--ax-surface); border-radius: var(--radio-md);
}
@media (prefers-reduced-motion: no-preference) {
  html[data-tema="5"] { --ax-entrada-dur: .42s; }
  html[data-tema="5"].ui-app #ax-contenido ~ :is(div, main, section) { animation-name: t5-entra; }
  @keyframes t5-entra { from { opacity: 0; transform: scale(.97); } }
}


/* ════════════════════════════════════════════════════════════
   6 · CRISTAL: moderno y digital.
   Vidrio en DOS lugares y ninguno más: la barra superior (deja ver el
   contenido que pasa por debajo al desplazarse, así se sabe que hay más)
   y el panel de la portada. Tarjetas y menú son superficies sólidas.
   Portada: el fondo se parte en dos colores de la marca y el panel de vidrio
   queda encima del corte; sin ese corte el vidrio no se vería como vidrio.
   Tipografía: Sora en títulos + Poppins en el cuerpo (geométricas, digitales).
   Forma: radios medianos; sin píldoras.
   Movimiento: el contenido entra desenfocado y se enfoca (.55s).
   ════════════════════════════════════════════════════════════ */
html[data-tema="6"] {
  --ax-curva: cubic-bezier(.16, 1, .3, 1);
}
/* Superficies propias del tema: solo en modo claro (en oscuro manda la paleta oscura de la base) */
html[data-tema="6"]:not([data-theme="dark"]) {
  --ax-bg: oklch(from var(--color-primario) 0.965 0.02 h);
}
html[data-tema="6"] .ax-top { background: color-mix(in oklch, var(--ax-top-bg) 80%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
html[data-tema="6"] .ax-item { border-radius: var(--radio-md); }
html[data-tema="6"] .ax-item.is-activo { background: color-mix(in oklch, var(--color-primario) 16%, transparent); }
html[data-tema="6"] .ax-item.is-activo::before { display: none; }
html[data-tema="6"].ui-publico .hero-vidrio {
  background: linear-gradient(115deg, var(--color-header-bg) 0 58%, var(--color-primario) 58% 100%);
}
html[data-tema="6"].ui-publico .hero-vidrio-panel {
  max-width: 820px; padding: clamp(28px, 4vw, 48px) !important; border-radius: var(--radio-lg);
  background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.18) !important;
  -webkit-backdrop-filter: blur(18px) !important; backdrop-filter: blur(18px) !important; box-shadow: 0 24px 60px -24px rgba(0,0,0,.55) !important;
}
/* El CSS heredado ponía vidrio también en razones, cursos y formulario: acá son sólidos */
html[data-tema="6"].ui-publico :is(.features-grid.fg-vidrio .feature-card, .courses-grid.cg-vidrio .course-card, .contact-section.form-vidrio .contact-form) {
  background: var(--ax-surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--ax-line);
}
/* El CSS heredado ponía un halo difuminado en la esquina de cada sección: se quita */
html[data-tema="6"].ui-publico :is(.features-section, .courses-section, .contact-section)::after { content: none; }
@media (prefers-reduced-motion: no-preference) {
  html[data-tema="6"] { --ax-entrada-dur: .55s; }
  html[data-tema="6"].ui-app #ax-contenido ~ :is(div, main, section) { animation-name: t6-entra; }
  @keyframes t6-entra { from { opacity: 0; filter: blur(8px); } }
}


/* ════════════════════════════════════════════════════════════
   7 · CLÁSICO: institucional, universitario. Denso, líneas rectas.
   Tipografía: Source Serif 4 (serif académica) + Source Sans 3 (su pareja
   diseñada para leer en pantalla).
   Color: el primario solo como filete bajo la barra y la portada.
   Composición: "¿Por qué elegirnos?" como lista con título a la izquierda,
   como un programa de estudios.
   Movimiento: casi quieto (.2s), para no distraer en un entorno de estudio.
   ════════════════════════════════════════════════════════════ */
html[data-tema="7"] {
  --ax-curva: ease;
}
/* Superficies propias del tema: solo en modo claro (en oscuro manda la paleta oscura de la base) */
html[data-tema="7"]:not([data-theme="dark"]) {
  --ax-bg: oklch(from var(--color-header-bg) 0.978 0.005 h);
}
html[data-tema="7"] .ax-top { border-bottom: 3px solid var(--color-primario); }
html[data-tema="7"] :is(.card, .form-card, .stat, .hm-curso, .hm-pend, .admin-option, .tool-btn, #content-inner, .sidebar) { box-shadow: none !important; border-radius: var(--radio-sm); }
html[data-tema="7"] :is(.card, .form-card) > :is(h2, h3):first-child { font-size: 1.1rem; padding-bottom: 10px; border-bottom: 2px solid var(--ax-ink); }
html[data-tema="7"].ui-app :is(.card, .form-card) { padding: 20px; }
html[data-tema="7"].ui-app td { padding: 9px 12px; }
html[data-tema="7"] .ax-item { border-radius: 0; padding: 7px 10px; }
html[data-tema="7"] .ax-item.is-activo { background: var(--ax-surface-2); }
html[data-tema="7"] .ax-grupo-tit { text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
html[data-tema="7"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn, .btn-secondary) { border-radius: var(--radio-sm); box-shadow: none; }
html[data-tema="7"].ui-publico :is(.hero-section, .about-hero) { background: var(--color-header-bg); border-bottom: 4px solid var(--color-primario); }
html[data-tema="7"].ui-publico .hero-title { font-weight: 600; letter-spacing: -.01em; }
html[data-tema="7"].ui-publico .features-grid.fg-lista { grid-template-columns: 1fr; }
html[data-tema="7"].ui-publico .features-grid.fg-lista .feature-card { display: grid; grid-template-columns: 240px 1fr; gap: 24px; padding: 18px 0 !important; border-left: 0 !important; border-bottom: 1px solid var(--ax-line); }
@media (prefers-reduced-motion: no-preference) {
  html[data-tema="7"] { --ax-entrada-dur: .2s; }
  html[data-tema="7"].ui-app #ax-contenido ~ :is(div, main, section) { animation-name: t7-entra; }
  @keyframes t7-entra { from { opacity: .4; } }
}
@media (max-width: 720px) {
  html[data-tema="7"].ui-publico .features-grid.fg-lista .feature-card { grid-template-columns: 1fr; gap: 6px; }
}


/* ════════════════════════════════════════════════════════════
   8 · NEÓN: cartel luminoso de noche (academias de tecnología, gaming, música).
   Oscuro por defecto: un neón solo se ve encendido sobre fondo oscuro.
   Brillo en UN elemento por pantalla: el indicador del ítem activo del menú
   en el campus, y la línea bajo el título en la portada. Botones y tarjetas
   no brillan: cambian de borde.
   Tipografía: Chakra Petch en títulos (cortes rectos de letrero luminoso,
   no monoespaciada) + IBM Plex Sans en el cuerpo (legible sobre oscuro).
   Movimiento: el contenido se enciende como un tubo; el indicador respira.
   ════════════════════════════════════════════════════════════ */
html[data-tema="8"] {
  --ax-curva: steps(1, end);
}
/* Neón es oscuro aunque el usuario no haya elegido modo oscuro */
html[data-tema="8"]:not([data-theme="light"]) {
  --ax-bg: oklch(from var(--color-header-bg) 0.14 min(c, 0.03) h);
  --ax-surface: oklch(from var(--color-header-bg) 0.18 min(c, 0.03) h);
  --ax-surface-2: oklch(from var(--color-header-bg) 0.22 min(c, 0.03) h);
  --ax-line: color-mix(in oklch, var(--color-primario) 18%, transparent);
  --ax-line-2: color-mix(in oklch, var(--color-primario) 32%, transparent);
  --ax-ink: oklch(from var(--color-primario) 0.95 0.02 h);
  --ax-ink-2: oklch(from var(--color-primario) 0.8 0.03 h);
  --ax-ink-3: oklch(from var(--color-primario) 0.64 0.03 h);
  --ax-accent-ink: oklch(from var(--color-primario) max(l, 0.8) c h);
  --ax-accent-soft: color-mix(in oklch, var(--color-primario) 14%, transparent);
  --ax-top-bg: oklch(from var(--color-header-bg) 0.11 min(c, 0.03) h);
  color-scheme: dark;
}
html[data-tema="8"] :is(h1, h2, h3, .ax-grupo-tit, .hm-etiqueta) { font-family: var(--font-titulos); }
html[data-tema="8"] .hero-title { text-transform: uppercase; letter-spacing: .01em; }
html[data-tema="8"] :is(.card, .form-card, .stat, .hm-curso, .hm-pend, .hm-seguir, .admin-option, .tool-btn, #content-inner, .sidebar) { box-shadow: none !important; }
html[data-tema="8"] :is(.hm-seguir, .admin-option, .tool-btn, .courses-grid .course-card, .cx .cx-curso):hover { border-color: var(--color-primario) !important; }
html[data-tema="8"] .ax-item.is-activo { background: var(--ax-accent-soft); color: var(--ax-accent-ink); }
html[data-tema="8"] .ax-item.is-activo::before { box-shadow: 0 0 12px var(--color-primario); }
html[data-tema="8"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn) {
  background: transparent; color: var(--ax-accent-ink); border: 1.5px solid var(--color-primario); box-shadow: none;
  font-family: var(--font-titulos); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem;
}
html[data-tema="8"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn):hover { background: var(--color-primario); color: var(--ax-on-accent); }
/* Portada: una sola línea encendida entre el título y el subtítulo */
html[data-tema="8"].ui-publico .hero-section { background: var(--ax-top-bg); border-bottom: 1px solid var(--ax-line-2); }
html[data-tema="8"].ui-publico .hero-neon .hero-subtitle::before {
  content: ''; display: block; width: 88px; height: 3px; margin: 6px 0 22px; border-radius: 2px;
  background: var(--color-primario); box-shadow: 0 0 18px var(--color-primario);
}
html[data-tema="8"].ui-publico .features-grid.fg-terminal .feature-card { display: block; }
/* El CSS heredado armaba razones, cursos y formulario como terminal (monoespaciada, ">" y "$"): se anula */
html[data-tema="8"].ui-publico :is(.features-grid.fg-terminal .feature-card, .contact-section.form-terminal .form-input) { font-family: var(--font-cuerpo); }
html[data-tema="8"].ui-publico :is(.features-grid.fg-terminal .feature-card, .courses-grid.cg-terminal .course-card)::before { content: none; }
html[data-tema="8"].ui-publico :is(.features-section, .courses-section, .mission-section, .mission-section-compact, .contact-section, .cx) { background: var(--ax-bg); }
@media (prefers-reduced-motion: no-preference) {
  html[data-tema="8"] { --ax-entrada-dur: .5s; }
  html[data-tema="8"].ui-app #ax-contenido ~ :is(div, main, section) { animation-name: t8-enciende; animation-timing-function: linear; }
  @keyframes t8-enciende { 0% { opacity: 0; } 12% { opacity: .8; } 18% { opacity: .2; } 30% { opacity: 1; } 36% { opacity: .5; } 50%, 100% { opacity: 1; } }
  html[data-tema="8"] .ax-item.is-activo::before { animation: t8-respira 2.6s ease-in-out infinite; }
  @keyframes t8-respira { 50% { box-shadow: 0 0 20px var(--color-primario); } }
  html[data-tema="8"].ui-publico .hero-neon .hero-subtitle::before { animation: t8-enciende 1.2s linear both; }
}


/* ════════════════════════════════════════════════════════════
   9 · AURORA: vibrante y creativo (arte, diseño, idiomas para jóvenes).
   El degradé va en UN lugar: el fondo de la portada, que pasa lento del
   color de la barra a un tono vecino del primario (eso es la "aurora").
   Botones, barra y menú son de color plano.
   Tipografía: Unbounded en títulos (ancha, expansiva) + Manrope en el cuerpo.
   Forma: radios amplios en tarjetas; botones y menú con radio mediano.
   Composición: "¿Por qué elegirnos?" en bento (la primera razón ocupa más).
   Movimiento: el contenido sube con resorte; la aurora se desplaza (20s).
   ════════════════════════════════════════════════════════════ */
html[data-tema="9"] {
  --ax-curva: cubic-bezier(.34, 1.4, .64, 1);
  --t9-a: var(--color-primario);
  --t9-b: oklch(from var(--color-primario) l c calc(h + 70));
}
/* Superficies propias del tema: solo en modo claro (en oscuro manda la paleta oscura de la base) */
html[data-tema="9"]:not([data-theme="dark"]) {
  --ax-bg: oklch(from var(--color-primario) 0.972 0.015 h);
}
html[data-tema="9"] :is(.card, .form-card, .stat, .hm-curso, .hm-pend, .admin-option, .tool-btn, #content-inner, .sidebar, .contact-form, .courses-grid .course-card, .cx .cx-curso) {
  border: 0 !important; border-radius: var(--radio-lg);
}
html[data-tema="9"] .ax-item { border-radius: var(--radio-md); }
html[data-tema="9"] .ax-item.is-activo { background: var(--ax-accent-soft); color: var(--ax-accent-ink); }
html[data-tema="9"] .ax-item.is-activo::before { display: none; }
html[data-tema="9"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn) {
  border: 0; border-radius: var(--radio-md);
  transition: transform .3s var(--ax-curva), background .2s;
}
html[data-tema="9"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn):hover { transform: translateY(-2px); }
html[data-tema="9"].ui-publico .hero-aurora {
  background: linear-gradient(115deg, var(--color-header-bg) 0%, var(--color-header-bg) 30%,
    color-mix(in oklch, var(--t9-b) 55%, var(--color-header-bg)) 65%, color-mix(in oklch, var(--t9-a) 70%, var(--color-header-bg)) 100%);
  background-size: 180% 100%; background-position: 0 0;
}
html[data-tema="9"].ui-publico .features-grid.fg-bento { grid-template-columns: repeat(6, 1fr); gap: 16px; border: 0; }
html[data-tema="9"].ui-publico .features-grid.fg-bento .feature-card { grid-column: span 2; padding: 26px !important; border: 0 !important; border-radius: var(--radio-lg); background: var(--ax-surface); box-shadow: none; }
html[data-tema="9"].ui-publico .features-grid.fg-bento .feature-card:first-child { grid-column: span 4; grid-row: span 2; background: var(--ax-accent-soft); }
/* El CSS heredado ponía manchas radiales en el fondo de cada sección: se quitan */
html[data-tema="9"].ui-publico :is(.features-section, .courses-section, .contact-section) { background-image: none; }
@media (max-width: 860px) { html[data-tema="9"].ui-publico .features-grid.fg-bento { grid-template-columns: 1fr; } html[data-tema="9"].ui-publico .features-grid.fg-bento .feature-card, html[data-tema="9"].ui-publico .features-grid.fg-bento .feature-card:first-child { grid-column: auto; grid-row: auto; } }
@media (prefers-reduced-motion: no-preference) {
  html[data-tema="9"] { --ax-entrada-dur: .7s; }
  html[data-tema="9"].ui-app #ax-contenido ~ :is(div, main, section) { animation-name: t9-entra; }
  @keyframes t9-entra { from { opacity: 0; transform: translateY(18px); } }
  html[data-tema="9"].ui-publico .hero-aurora { animation: t9-fluye 20s ease-in-out infinite alternate; }
  @keyframes t9-fluye { to { background-position: 100% 0; } }
}


/* ════════════════════════════════════════════════════════════
   10 · CINÉTICO: póster suizo.
   Color: blanco y negro + el primario como único acento (hover, ícono activo).
   Tipografía: Archivo Black en títulos enormes en mayúscula + Archivo en el
   cuerpo (misma familia: el póster se lee como una sola pieza).
   Forma: cero radios, cero sombras, filetes de 2px.
   Portada: título gigante sin etiqueta encima.
   Movimiento: instantáneo; barridos que revelan el contenido.
   ════════════════════════════════════════════════════════════ */
html[data-tema="10"] {
  --ax-curva: cubic-bezier(.7, 0, .2, 1);
  --radio-xs: 0px; --radio-sm: 0px; --radio-md: 0px; --radio-lg: 0px; --radio-pill: 0px;
  --ax-bg: #FFFFFF;
  --ax-surface-2: #F2F2F2;
  --ax-line: #111111;
  --ax-line-2: #111111;
  --ax-ink: #0A0A0A;
  --ax-ink-2: #2B2B2B;
}
html[data-tema="10"][data-theme="dark"] { --ax-bg: #0A0A0A; --ax-surface: #111111; --ax-surface-2: #1A1A1A; --ax-line: #EDEDED; --ax-line-2: #EDEDED; --ax-ink: #F5F5F5; --ax-ink-2: #D0D0D0; }
html[data-tema="10"] :is(h1, h2, .hero-title, .section-title, .cx-titulo, .cx-nombre) { text-transform: uppercase; letter-spacing: -.02em; line-height: .95; }
html[data-tema="10"].ui-app :is(.top-bar, .page-header, .header-row, .ca-header) :is(h1, h2) { font-size: clamp(2rem, 4vw, 3.2rem); }
html[data-tema="10"] :is(.card, .form-card, .stat, .hm-curso, .hm-pend, .hm-seguir, .admin-option, .tool-btn, #content-inner, .sidebar, .contact-form, .courses-grid .course-card, .cx .cx-curso, .modal-inner) {
  border: 2px solid var(--ax-line) !important; box-shadow: none !important; border-radius: 0 !important;
}
html[data-tema="10"] .ax-nav { border-right: 2px solid var(--ax-line); }
html[data-tema="10"] .ax-item { border-radius: 0; text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; font-weight: 600; }
html[data-tema="10"] .ax-item.is-activo { background: var(--ax-ink); color: var(--ax-bg); }
html[data-tema="10"] .ax-item.is-activo .ui-ic { color: var(--color-primario); }
html[data-tema="10"] .ax-item.is-activo::before { display: none; }
html[data-tema="10"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn) {
  background: var(--ax-ink); color: var(--ax-bg); border: 2px solid var(--ax-ink); box-shadow: none;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: .8rem; transition: none;
}
html[data-tema="10"] :is(.btn, .btn-primary, .btn-submit, .course-btn, .ax-btn, .cx-btn):hover { background: var(--color-primario); color: var(--ax-on-accent); border-color: var(--color-primario); }
html[data-tema="10"].ui-publico .hero-poster { background: var(--ax-bg); color: var(--ax-ink); border-bottom: 2px solid var(--ax-line); }
html[data-tema="10"].ui-publico .hero-poster .hero-title { color: var(--ax-ink); -webkit-text-fill-color: var(--ax-ink); font-size: clamp(3rem, 10vw, 8rem); }
html[data-tema="10"].ui-publico .hero-poster .hero-content > * { max-width: none; }
html[data-tema="10"].ui-publico .hero-poster .hero-subtitle { color: var(--ax-ink-2); max-width: 52ch; }
html[data-tema="10"].ui-publico .hero-poster .cta-buttons .btn-secondary { background: transparent; color: var(--ax-ink); border: 2px solid var(--ax-ink); }
html[data-tema="10"].ui-publico .features-grid { border-top: 2px solid var(--ax-line); }
html[data-tema="10"].ui-publico .feature-card + .feature-card { border-left: 2px solid var(--ax-line) !important; }
@media (max-width: 860px) { html[data-tema="10"].ui-publico .feature-card + .feature-card { border-left: 0 !important; } html[data-tema="10"].ui-publico .feature-card { border-bottom: 2px solid var(--ax-line) !important; } }
@media (prefers-reduced-motion: no-preference) {
  html[data-tema="10"] { --ax-entrada-dur: .5s; }
  html[data-tema="10"].ui-app #ax-contenido ~ :is(div, main, section) { animation-name: t10-barre; animation-timing-function: var(--ax-curva); }
  @keyframes t10-barre { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  html[data-tema="10"].ui-publico .hero-poster .hero-title { animation: t10-barre .7s var(--ax-curva) both; }
}