/* ============================================================================
   home-rubro.css — Skin de la home pública por rubro (templates claude-design)
   ----------------------------------------------------------------------------
   Se carga SOLO en la home anónima (Index.cshtml -> @section Styles), DESPUÉS de
   site.css y del <style> inline de _Layout. Eleva el look de la home pública hacia
   los templates sin tocar el dashboard ni el resto de la app.

   Estrategia de paleta (decisión 2026-06-16): la home pública usa acento PROPIO,
   independiente de ThemeModePresetService. En vez de inventar tokens nuevos y
   re-pisar regla por regla, REDEFINIMOS los tokens --theme-* a nivel
   `body.home-skin-<rubro>` (especificidad 0,1,1, le gana al :root inline que es
   0,1,0). Así toda la maquinaria existente del home (hero, badges, CTA, contacto,
   navbar, footer, cards) recolorea sola al acento de la skin. Los Presets globales
   quedan intactos: el dashboard y demás páginas (donde este archivo NO se carga)
   siguen con su paleta.

   Scope:
     body.home-skin-<rubro>  -> tokens + navbar/footer (viven fuera del wrapper)
     .home-layout-rubro      -> contenido del home (cards, secciones nuevas)
   ============================================================================ */

/* ============================================================
   SKIN: ARTE  (mint #9ed0c5 + rosa #e58fc0, página cálida, footer neutro oscuro)
   ============================================================ */
body.home-skin-arte {
    --theme-primary: #9ed0c5;
    --theme-primary-rgb: 158, 208, 197;
    --theme-primary-interactive: #2f7a6c;
    --theme-secondary: #e58fc0;
    --theme-secondary-rgb: 229, 143, 192;
    --theme-background: #faf7f4;
    --theme-footer: #2f3338;
    /* (D) Alinear el primario de Bootstrap al acento de la skin para que los
       botones de los modales (Ingresar/Registrarme) salgan mint y no violeta.
       --bs-primary se declara en :root como var(--theme-primary), pero se resuelve
       en el contexto de :root; redefinirlo acá (en el body) lo recolorea para todo
       lo que cuelga del body en la home pública (incluidos los modales). */
    --bs-primary: #9ed0c5;
    --bs-primary-rgb: 158, 208, 197;
}

/* En DESKTOP el hero pasa por DEBAJO de la nav fija (efecto template, todos los
   rubros): anulamos el padding-top que setea adjustBodyPadding() en _Layout, así la
   nav transparente flota sobre el hero. En MOBILE no: la nav es una barra glass
   sólida y el hero arranca debajo, para que el badge no se confunda con el navbar. */
@media (min-width: 992px) {
    body.home-public { padding-top: 0 !important; }
}

/* ============================================================
   NAVBAR ARTE — tema claro: transparente sobre el hero pastel, texto oscuro,
   superficie blanca con blur al scrollear (clase nav-scrolled vía JS de _Layout).
   ============================================================ */
body.home-skin-arte .sweet-navbar {
    background-color: transparent !important;
    backdrop-filter: none;
    box-shadow: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
body.home-skin-arte .sweet-navbar.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 1px 0 rgba(52, 58, 64, 0.06);
}
body.home-skin-arte .sweet-navbar .navbar-brand,
body.home-skin-arte .sweet-navbar .navbar-brand.text-white,
body.home-skin-arte .sweet-navbar .nav-link {
    color: var(--theme-quaternary, #343a40) !important;
}
body.home-skin-arte .sweet-navbar .nav-link:hover,
body.home-skin-arte .sweet-navbar .nav-link.active {
    color: #2f7a6c !important;
}
body.home-skin-arte .sweet-navbar .navbar-toggler {
    border-color: rgba(52, 58, 64, 0.18);
}
body.home-skin-arte .sweet-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(52,58,64,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Botones de auth en la nav (revelados al scrollear): legibles sobre superficie clara. */
body.home-skin-arte .arte-nav-auth-btn--login {
    color: var(--theme-quaternary, #343a40);
    border-color: rgba(52, 58, 64, 0.25);
}
body.home-skin-arte .arte-nav-auth-btn--login:hover,
body.home-skin-arte .arte-nav-auth-btn--login:focus {
    background: rgba(52, 58, 64, 0.06);
    color: var(--theme-quaternary, #343a40);
}
body.home-skin-arte .arte-nav-auth-btn--register {
    background: #343a40;
    color: #fff;
    border-color: #343a40;
}
body.home-skin-arte .arte-nav-auth-btn--register:hover,
body.home-skin-arte .arte-nav-auth-btn--register:focus {
    background: #23272b;
    color: #fff;
    border-color: #23272b;
}

/* Mobile: con la nav transparente sobre el hero claro, el menú hamburguesa
   desplegado quedaba sin fondo (links flotando, ilegibles). Le damos un panel
   blanco al collapse. Solo arte (los otros rubros tienen nav opaca). */
@media (max-width: 991.98px) {
    body.home-skin-arte .sweet-navbar .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(12px);
        border-radius: 0 0 16px 16px;
        margin-top: 0.5rem;
        padding: 0.5rem 1rem 1rem;
        box-shadow: 0 12px 26px rgba(52, 58, 64, 0.12);
    }
}

/* ============================================================
   HERO ARTE — split 2-col claro pastel + collage (template home_arte)
   ============================================================ */
.home-skin-arte .home-hero-arte-split {
    background: linear-gradient(135deg, #ffd2e6 0%, #d9c2ea 42%, #a9d6cb 100%) !important;
    color: #2e1a33;
    border: 0;
    border-radius: 0;
    min-height: auto;
    padding: 6.5rem 2rem 4.5rem;
    overflow: hidden;
}
.home-skin-arte .home-hero-arte-split::before {
    background:
        radial-gradient(ellipse 50% 40% at 82% 8%, rgba(255, 255, 255, 0.45), transparent 60%),
        radial-gradient(ellipse 60% 50% at 8% 100%, rgba(158, 208, 197, 0.5), transparent 60%);
}
.home-skin-arte .home-hero-arte-split::after { background: none; }

.home-hero-arte-grid {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}
.home-hero-arte-copy { text-align: left; }

/* Texto del hero en oscuro para legibilidad sobre el pastel (el template usa
   blanco, de contraste muy bajo; si lo querés idéntico, cambiar a #fff). */
.home-skin-arte .home-hero-arte-split .home-hero-title,
.home-skin-arte .home-hero-arte-split .home-hero-title-text { color: #2e1a33; text-shadow: none; }
.home-skin-arte .home-hero-arte-split .home-hero-description { color: rgba(46, 26, 51, 0.78); margin-left: 0; max-width: 46ch; }
.home-skin-arte .home-hero-arte-split .home-hero-actions { justify-content: flex-start; }

.home-skin-arte .home-hero-arte-split .home-hero-badge {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    color: #2f7a6c !important;
}

/* Botones legibles sobre pastel: A oscuro sólido, B blanco con texto teal. */
.home-skin-arte .home-hero-arte-split .home-hero-btn-a {
    background: #343a40 !important;
    color: #fff !important;
    border-color: #343a40 !important;
}
.home-skin-arte .home-hero-arte-split .home-hero-btn-a:hover,
.home-skin-arte .home-hero-arte-split .home-hero-btn-a:focus,
.home-skin-arte .home-hero-arte-split .home-hero-btn-a:active {
    background: #23272b !important;
    color: #fff !important;
    border-color: #23272b !important;
}
.home-skin-arte .home-hero-arte-split .home-hero-btn-b {
    background: #fff !important;
    color: #2f7a6c !important;
    border-color: #fff !important;
}
.home-skin-arte .home-hero-arte-split .home-hero-btn-b:hover,
.home-skin-arte .home-hero-arte-split .home-hero-btn-b:focus,
.home-skin-arte .home-hero-arte-split .home-hero-btn-b:active {
    background: rgba(255, 255, 255, 0.85) !important;
    color: #2f7a6c !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}

/* Collage de tiles + chips flotantes */
.home-hero-arte-collage { position: relative; height: 420px; }
.home-hero-tile {
    position: absolute;
    border-radius: 20px;
    overflow: hidden;
    border: 5px solid #fff;
    box-shadow: 0 20px 50px rgba(72, 52, 80, 0.28);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.95);
    font-size: 2rem;
    padding: 0;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.home-hero-tile:not(:disabled):hover,
.home-hero-tile:focus-visible {
    box-shadow: 0 24px 60px rgba(72, 52, 80, 0.34);
    filter: saturate(1.08);
}
.home-hero-tile:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.9);
    outline-offset: 4px;
}
.home-hero-tile img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.home-hero-tile:disabled {
    cursor: default;
}
.home-hero-tile:disabled:hover {
    filter: none;
}
.home-hero-tile--t1 { width: 56%; height: 64%; top: 0; right: 4%; transform: rotate(3deg); background: linear-gradient(135deg, #ffc9e1, #c5a8d9); }
.home-hero-tile--t2 { width: 46%; height: 50%; bottom: 2%; left: 0; transform: rotate(-4deg); z-index: 3; background: linear-gradient(135deg, #9ed0c5, #76b9ab); }
.home-hero-tile--t3 { width: 36%; height: 40%; bottom: 12%; right: 2%; transform: rotate(6deg); z-index: 4; background: linear-gradient(135deg, #f0a9cd, #e07db0); }
.home-hero-tile--t1:not(:disabled):hover,
.home-hero-tile--t1:focus-visible { transform: rotate(3deg) translateY(-4px); }
.home-hero-tile--t2:not(:disabled):hover,
.home-hero-tile--t2:focus-visible { transform: rotate(-4deg) translateY(-4px); }
.home-hero-tile--t3:not(:disabled):hover,
.home-hero-tile--t3:focus-visible { transform: rotate(6deg) translateY(-4px); }
.home-hero-chip {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 14px;
    padding: 11px 15px;
    box-shadow: 0 12px 28px rgba(72, 52, 80, 0.22);
}
.home-hero-chip i { color: #e58fc0; font-size: 1.05rem; }
.home-hero-chip-text { display: flex; flex-direction: column; line-height: 1.2; }
.home-hero-chip-text strong { font-size: 0.82rem; color: #343a40; }
.home-hero-chip-text small { font-size: 0.7rem; color: rgba(52, 58, 64, 0.6); }
.home-hero-chip--a { top: 8%; left: -6%; }
.home-hero-chip--b { bottom: 6%; right: -4%; }
.home-hero-artwork-modal .modal-content {
    background: #111827;
    color: #fff;
    border: 0;
}
.home-hero-artwork-modal .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}
.home-hero-artwork-modal .btn-close {
    filter: invert(1);
}
.home-hero-artwork-modal__image {
    width: 100%;
    max-height: min(76vh, 760px);
    object-fit: contain;
    display: block;
    border-radius: 10px;
    background: #0b1020;
}

@media (max-width: 991.98px) {
    .home-hero-arte-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .home-hero-arte-copy { text-align: center; }
    .home-skin-arte .home-hero-arte-split .home-hero-actions { justify-content: center; }
    .home-skin-arte .home-hero-arte-split .home-hero-description { margin-left: auto; margin-right: auto; }
    .home-hero-arte-collage { display: none; }
    /* En mobile la nav es una barra glass SÓLIDA y el hero arranca DEBAJO de ella
       (el body conserva el padding-top = alto de la nav, porque el padding-top:0
       solo aplica en desktop). Así el badge queda inequívocamente dentro del hero,
       alineado arriba, y no se pisa con el navbar. */
    body.home-skin-arte .sweet-navbar {
        background-color: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(16px) saturate(1.3);
        box-shadow: 0 1px 0 rgba(52, 58, 64, 0.08);
    }
    /* Hero más alto: poco padding arriba (la nav ya está afuera) y bastante abajo
       para que la onda no corte la meta ("Comunidad"). */
    .home-skin-arte .home-hero-arte-split { padding: 2.5rem 1.25rem 6.5rem; }
    .home-hero-arte-meta { justify-content: center; }
    .home-hero-arte-wave { height: 44px; }
}

/* ============================================================
   HERO ARTE — meta (bullets dentro del hero, reemplaza al strip band en arte)
   ============================================================ */
.home-hero-arte-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.6rem;
    margin-top: 1.75rem;
}
.home-hero-arte-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.86rem;
    color: #2f7a6c;
}
.home-hero-arte-meta-item i { font-size: 0.95rem; }

/* Onda al pie del hero: "recorta" el pastel hacia la sección siguiente
   (color de --theme-tertiary, igual que #como-funciona). */
.home-hero-arte-wave {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70px;
    display: block;
    z-index: 1;
}
.home-hero-arte-wave path { fill: var(--theme-tertiary, #f5ede1); }

/* ============================================================
   HERO-STRIP — banda de bullets bajo el hero (patrón común a todos los rubros)
   ============================================================ */
.home-rubro-strip {
    background: var(--theme-primary);
    color: #143b34;
}

.home-rubro-strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem 2.25rem;
    padding: 0.85rem 0;
}

.home-rubro-strip-item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
}

.home-rubro-strip-item i {
    font-size: 1rem;
    opacity: 0.9;
}

/* CARDS DE CATÁLOGO: el re-skin (hover-lift + borde de acento) se promovió a
   global en site.css (.student-course-card), porque el componente
   _StudentCourseCard se comparte con el dashboard del alumno. Los colores
   (badge, "Ver más", botón) ya usan --theme-primary, así que recolorean solos
   con los tokens de skin de arriba. No hace falta nada scopeado acá. */

/* ============================================================
   ¿POR QUÉ ELEGIRNOS? — rotador del panel grande (común a todos los rubros)
   El panel (.home-rubro-benefits-visual) tiene fondo oscuro (HeroInlineStyle),
   así que las slides van con texto blanco. El JS (Index @section Scripts) arma
   las slides desde las .home-benefit-card y rota cada ~3.5s (+ hover/click).
   ============================================================ */
.home-benefit-card { cursor: pointer; }
.home-benefit-card.is-benefit-active {
    border-color: var(--theme-primary);
    box-shadow: 0 12px 30px rgba(var(--theme-primary-rgb, 158, 208, 197), 0.4);
    transform: translateY(-3px);
}
.home-rubro-benefits-rotator { position: absolute; inset: 0; z-index: 2; }
.home-rubro-benefits-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.85rem;
    padding: 2.5rem;
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition: opacity 0.6s cubic-bezier(.2, .7, .2, 1), transform 0.6s cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
    color: #fff;
}
.home-rubro-benefits-slide.active { opacity: 1; transform: none; }
.home-rubro-benefits-slide-icon {
    width: 86px;
    height: 86px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    font-size: 2.2rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.38);
}
.home-rubro-benefits-slide h4 {
    font-family: var(--theme-font-heading-primary);
    font-weight: 800;
    font-size: 1.5rem;
    color: #fff;
    margin: 0;
}
.home-rubro-benefits-slide p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.98rem;
    line-height: 1.55;
    max-width: 30ch;
    margin: 0;
}
.home-rubro-benefits-dots {
    position: absolute;
    bottom: 1.1rem;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}
.home-rubro-benefits-dots button {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: width 0.3s ease, background 0.3s ease;
}
.home-rubro-benefits-dots button.on { width: 22px; background: #fff; }
@media (prefers-reduced-motion: reduce) {
    .home-rubro-benefits-slide { transition: none; }
}

/* ============================================================
   CONOCÉ A TU DOCENTE — tarjeta estilo template (avatar con anillo, 2-col)
   Markup nuevo (avatar + monograma + ring) en _HomeDocentes; estilos con tokens
   para que funcionen en cualquier rubro que comparta el partial.
   ============================================================ */
.home-docente-card,
.home-docentes-grid.is-single .home-docente-card {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 2rem;
    max-width: 860px;
    width: 100%;
    padding: 2.25rem 2.5rem;
    border-radius: var(--theme-radius-lg, 20px);
}
.home-docente-avatar {
    position: relative;
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
/* Selector específico para ganarle a `.home-docentes-grid.is-single
   .home-docente-photo { width:120px }` (0,3,0), que dejaba la foto chica y
   arriba-izquierda dentro del anillo. */
.home-docentes-grid .home-docente-avatar .home-docente-photo,
.home-docentes-grid.is-single .home-docente-avatar .home-docente-photo,
.home-docente-avatar .home-docente-monogram {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 0;
    display: block;
}
.home-docente-monogram {
    display: grid;
    place-items: center;
    font-family: var(--theme-font-heading-primary);
    font-weight: 800;
    font-size: 3.4rem;
    color: #fff;
    background: linear-gradient(150deg, var(--theme-secondary, #e58fc0), var(--theme-primary, #9ed0c5));
    box-shadow: 0 16px 36px rgba(var(--theme-primary-rgb, 158, 208, 197), 0.5);
}
.home-docente-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px dashed rgba(var(--theme-primary-rgb, 158, 208, 197), 0.7);
    pointer-events: none;
}
.home-docente-name {
    font-family: var(--theme-font-heading-primary);
    font-size: 1.5rem;
}
.home-docente-info { min-width: 0; }
/* Título / rol del docente (ícono + texto), recolorea por rubro vía tokens */
.home-docente-role {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.15rem 0 0.7rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-primary, #6b5bd2) 14%, transparent);
    color: var(--theme-primary, #6b5bd2);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}
.home-docente-role i { font-size: 0.9em; }
/* Indicadores del docente (años / alumnos / valoración) */
.home-docente-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin-top: 1.35rem;
}
.home-docente-stat b {
    display: block;
    font-family: var(--theme-font-heading-primary);
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--theme-quaternary, #343a40);
}
.home-docente-stat span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: rgba(var(--theme-quaternary-rgb, 52, 58, 64), 0.65);
}
@media (max-width: 680px) {
    .home-docente-card,
    .home-docentes-grid.is-single .home-docente-card {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
        padding: 2rem 1.5rem;
    }
    .home-docente-stats { justify-content: center; }
}

/* ============================================================
   (A) ¿CÓMO FUNCIONA? — pasos como tarjetas (común a todos los rubros)
   Número grande tenue + ícono en caja con gradiente, card con hover.
   ============================================================ */
.home-layout-rubro .home-how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 2.5rem;
}
.home-layout-rubro .home-how-connector { display: none; }
.home-layout-rubro .home-how-step {
    position: relative;
    max-width: none;
    text-align: left;
    background: #fff;
    border: 1px solid rgba(var(--theme-primary-rgb, 158, 208, 197), 0.28);
    border-radius: var(--theme-radius-lg, 20px);
    padding: 2rem 1.75rem;
    box-shadow: var(--theme-shadow-1, 0 4px 14px rgba(0, 0, 0, 0.08));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.home-layout-rubro .home-how-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--theme-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.15));
}
.home-layout-rubro .home-how-step-num {
    position: absolute;
    top: 0.65rem;
    right: 1.25rem;
    width: auto;
    height: auto;
    margin: 0;
    background: transparent;
    color: rgba(var(--theme-primary-rgb, 158, 208, 197), 0.45);
    font-family: var(--theme-font-heading-primary);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}
.home-layout-rubro .home-how-step-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    color: #fff;
    margin: 0 0 1rem;
    background: linear-gradient(140deg, var(--theme-primary, #9ed0c5), var(--theme-primary-interactive, #2f7a6c));
    box-shadow: 0 10px 22px rgba(var(--theme-primary-rgb, 158, 208, 197), 0.45);
}
.home-layout-rubro .home-how-step h5 { font-size: 1.15rem; margin-bottom: 0.5rem; }
@media (max-width: 768px) {
    .home-layout-rubro .home-how-steps { grid-template-columns: 1fr; }
    .home-layout-rubro .home-how-step { display: block; }
}

/* ============================================================
   (B) ¿QUÉ VAS A APRENDER? — tiles con gradiente (solo arte, paleta del template)
   ============================================================ */
.home-layout-arte .home-rubros-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}
.home-layout-arte .home-rubro-card {
    position: relative;
    overflow: hidden;
    border: 0;
    min-height: 175px;
    padding: 1.6rem 1.4rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    box-shadow: var(--theme-shadow-1, 0 4px 14px rgba(0, 0, 0, 0.08));
}
.home-layout-arte .home-rubro-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(40, 30, 46, 0.32));
    z-index: 0;
}
.home-layout-arte .home-rubro-card > * { position: relative; z-index: 1; }
.home-layout-arte .home-rubro-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--theme-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.15));
    border-color: transparent;
}
.home-layout-arte .home-rubro-icon {
    color: #fff;
    font-size: 1.7rem;
    margin: 0 0 auto;
}
.home-layout-arte .home-rubro-num {
    width: auto;
    height: auto;
    margin: 0.75rem 0 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    align-self: flex-start;
}
.home-layout-arte .home-rubro-card h6 { color: #fff; font-size: 1.05rem; margin: 0.45rem 0 0.3rem; }
.home-layout-arte .home-rubro-card p { color: rgba(255, 255, 255, 0.92); }
.home-layout-arte .home-rubro-card:nth-child(6n+1) { background: linear-gradient(150deg, #e58fc0, #c5a8d9); }
.home-layout-arte .home-rubro-card:nth-child(6n+2) { background: linear-gradient(150deg, #9ed0c5, #6aa99c); }
.home-layout-arte .home-rubro-card:nth-child(6n+3) { background: linear-gradient(150deg, #b79bd6, #9ed0c5); }
.home-layout-arte .home-rubro-card:nth-child(6n+4) { background: linear-gradient(150deg, #76b9ab, #c5a8d9); }
.home-layout-arte .home-rubro-card:nth-child(6n+5) { background: linear-gradient(150deg, #f0a9cd, #b79bd6); }
.home-layout-arte .home-rubro-card:nth-child(6n+6) { background: linear-gradient(150deg, #9ed0c5, #e58fc0); }

/* ============================================================
   /Courses/Info — skin pública (vista de producto: alumno o anónimo)
   product-details.css ya deriva todo de --theme-* (color-mix), así que al activar
   la skin en el <body> la página .sda-pd recolorea sola a la paleta mint, y el
   navbar/footer toman las reglas body.home-skin-arte de arriba. Acá solo ajustamos
   lo que difiere del diseño: hero con gradiente pastel + aire para la nav transparente.
   ============================================================ */
body.home-skin-arte .sda-pd-hero {
    /* Full-bleed igual que la home: rompe el .container y cubre todo el ancho. */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(125deg, #ffd6e8 0%, #e7c9ee 38%, #cdbcec 60%, #a8dccf 100%);
    padding-top: 6.5rem;
    padding-bottom: 4rem;
    align-items: center;
    position: relative;
}
body.home-skin-arte .sda-pd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse 50% 55% at 82% 8%, rgba(255, 255, 255, 0.45) 0%, transparent 60%);
    pointer-events: none;
}
/* Onda inferior como en la home (empalma el hero con el lienzo crema de abajo). */
body.home-skin-arte .sda-pd-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 48px;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,28 C220,52 440,8 660,18 C880,28 1080,56 1280,30 L1280,60 Z' fill='%23faf7f4'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
body.home-skin-arte .sda-pd-hero-left { padding-bottom: 0; position: relative; z-index: 2; }
body.home-skin-arte .sda-pd-cover-wrap { align-self: center; position: relative; z-index: 2; }
body.home-skin-arte .sda-pd-cover-box { border-radius: var(--radius-lg, 20px); }
@media (max-width: 991.98px) {
    /* En mobile el body conserva el padding-top = alto de la nav (el 0 es desktop),
       así que el hero ya arranca debajo de la nav: poco padding arriba. */
    body.home-skin-arte .sda-pd-hero { padding-top: 2.5rem; }
}

/* ============================================================================
   SKIN: TECNOLOGÍA  (verde neón sobre slate oscuro; CUERPO claro paper)
   Al revés que arte: el cuerpo/página es claro y el HERO es oscuro (matrix).
   product-details.css y el shell de home derivan de --theme-*, así que con el
   token block recolorea solo; el hero (home e Info) se oscurece acá.
   ============================================================================ */
body.home-skin-tech {
    /* Acento legible en superficies CLARAS (eyebrow, em, íconos, bordes). El verde
       neón puro (#00ff88) se usa solo como "pop" sobre superficies oscuras. */
    --theme-primary: #0a7d46;
    --theme-primary-rgb: 10, 125, 70;
    --theme-primary-interactive: #04b765;
    --theme-navbar: #0c1014;
    --theme-navbar-rgb: 12, 16, 20;
    --theme-secondary: #0b7d92;
    --theme-secondary-rgb: 11, 125, 146;
    --theme-background: #f3f5f7;
    --theme-footer: #0c1014;
    --bs-primary: #0a7d46;
    --bs-primary-rgb: 10, 125, 70;
    --skin-neon: #00ff88;
}

/* ---- Navbar tech: blanco sobre el hero oscuro; glass claro al scrollear ---- */
body.home-skin-tech .sweet-navbar { background-color: transparent !important; box-shadow: none; }
body.home-skin-tech .sweet-navbar.nav-scrolled {
    background-color: rgba(243, 245, 247, 0.92) !important;
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(17, 22, 28, 0.08);
}
body.home-skin-tech .sweet-navbar .navbar-brand,
body.home-skin-tech .sweet-navbar .navbar-brand.text-white,
body.home-skin-tech .sweet-navbar .nav-link { color: #fff !important; }
body.home-skin-tech .sweet-navbar.nav-scrolled .navbar-brand,
body.home-skin-tech .sweet-navbar.nav-scrolled .nav-link { color: var(--theme-quaternary, #11161c) !important; }
body.home-skin-tech .sweet-navbar.nav-scrolled .nav-link:hover { color: var(--theme-primary-interactive, #04b765) !important; }
body.home-skin-tech .sweet-navbar.nav-scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(17,22,28,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* "Registrarme" del nav: neón sólido con texto oscuro */
body.home-skin-tech .arte-nav-auth-btn--register {
    background: var(--skin-neon, #00ff88);
    color: #0c1014;
    border-color: var(--skin-neon, #00ff88);
}
@media (max-width: 991.98px) {
    /* En mobile el nav tech es una barra glass OSCURA (no clara): así el título se
       lee SIEMPRE (blanco sobre oscuro), colapsado o scrolleado, sin depender del
       fondo de atrás; y el menú desplegado es un panel oscuro con links verdes. */
    body.home-skin-tech .sweet-navbar,
    body.home-skin-tech .sweet-navbar.nav-scrolled {
        background-color: rgba(12, 16, 20, 0.96) !important;
        backdrop-filter: blur(16px) saturate(1.3);
        box-shadow: 0 1px 0 rgba(0, 255, 136, 0.14);
    }
    /* Título siempre blanco (gana al .text-white de Bootstrap y al estado scrolled). */
    body.home-skin-tech .sweet-navbar .navbar-brand,
    body.home-skin-tech .sweet-navbar .navbar-brand.text-white,
    body.home-skin-tech .sweet-navbar.nav-scrolled .navbar-brand,
    body.home-skin-tech .sweet-navbar.nav-scrolled .navbar-brand.text-white { color: #fff !important; }
    /* Links del menú en verde (legibles sobre el panel oscuro). */
    body.home-skin-tech .sweet-navbar .nav-link,
    body.home-skin-tech .sweet-navbar.nav-scrolled .nav-link { color: var(--skin-neon, #00ff88) !important; }
    body.home-skin-tech .sweet-navbar .nav-link:hover,
    body.home-skin-tech .sweet-navbar .nav-link.active { color: #fff !important; }
    /* Menú hamburguesa desplegado: panel oscuro con borde neón sutil. */
    body.home-skin-tech .sweet-navbar .navbar-collapse {
        background-color: rgba(12, 16, 20, 0.98);
        border: 1px solid rgba(0, 255, 136, 0.18);
        border-radius: 0 0 16px 16px;
        margin-top: 0.5rem;
        padding: 0.5rem 1rem 1rem;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
    }
    /* Toggler claro sobre la barra oscura. */
    body.home-skin-tech .sweet-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.22); }
    body.home-skin-tech .sweet-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    /* "Ingresar" sobre el panel oscuro: claro (anula el oscuro general de home-public). */
    body.home-skin-tech .arte-nav-auth-btn--login {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.35);
    }
    body.home-skin-tech .arte-nav-auth-btn--login:hover,
    body.home-skin-tech .arte-nav-auth-btn--login:focus {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
}

/* ---- Home hero tech (centrado, oscuro + matrix): acentos neón ---- */
/* El hero centrado trae solo 4rem de padding-top; en desktop pasa por debajo de la
   nav fija, así que necesita más aire arriba para despejarla (en mobile el body ya
   reserva el alto de la nav). */
body.home-skin-tech .home-hero-rubro-layout { padding-top: 6.5rem; }
@media (max-width: 991.98px) {
    body.home-skin-tech .home-hero-rubro-layout { padding-top: 2.5rem; }
}
body.home-skin-tech .home-hero-banner .home-hero-badge {
    color: var(--skin-neon, #00ff88) !important;
    border-color: currentColor !important;
    background: rgba(0, 255, 136, 0.12) !important;
}
body.home-skin-tech .home-hero-banner .home-hero-title em { color: var(--skin-neon, #00ff88); }
body.home-skin-tech .home-hero-banner .home-hero-btn-a {
    background: var(--skin-neon, #00ff88) !important;
    color: #0c1014 !important;
    border-color: var(--skin-neon, #00ff88) !important;
}
body.home-skin-tech .home-hero-banner .home-hero-btn-a:hover,
body.home-skin-tech .home-hero-banner .home-hero-btn-a:focus {
    background: #33ffa1 !important;
    color: #0c1014 !important;
    border-color: #33ffa1 !important;
}
body.home-skin-tech .home-hero-banner .home-hero-btn-b {
    background: transparent !important;
    color: var(--skin-neon, #00ff88) !important;
    border-color: rgba(0, 255, 136, 0.5) !important;
}
body.home-skin-tech .home-hero-banner .home-hero-btn-b:hover,
body.home-skin-tech .home-hero-banner .home-hero-btn-b:focus {
    background: rgba(0, 255, 136, 0.1) !important;
    color: var(--skin-neon, #00ff88) !important;
    border-color: rgba(0, 255, 136, 0.5) !important;
}
/* Eyebrows monoespaciadas (carácter terminal) */
body.home-skin-tech .home-section-eyebrow { font-family: var(--theme-font-mono, ui-monospace, monospace); }
/* Strip de bullets: neón sólido con texto oscuro */
body.home-skin-tech .home-rubro-strip { background: var(--skin-neon, #00ff88); color: #0c1014; }
/* Botón primario de cards/CTA en neón (firma tech), texto oscuro */
body.home-skin-tech .student-primary-btn,
body.home-skin-tech .home-rubro-cta-btn {
    background: var(--skin-neon, #00ff88);
    border-color: var(--skin-neon, #00ff88);
    color: #0c1014;
}

/* ---- /Courses/Info tech: hero oscuro + grid neón + onda hacia el paper ---- */
body.home-skin-tech .sda-pd-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(160deg, #11161c 0%, #0c1014 55%, #06090c 100%);
    padding-top: 6.5rem;
    padding-bottom: 4rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}
body.home-skin-tech .sda-pd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(0, 255, 136, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 136, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}
body.home-skin-tech .sda-pd-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 48px;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,28 C220,52 440,8 660,18 C880,28 1080,56 1280,30 L1280,60 Z' fill='%23f3f5f7'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
body.home-skin-tech .sda-pd-hero-left,
body.home-skin-tech .sda-pd-cover-wrap { position: relative; z-index: 2; }
body.home-skin-tech .sda-pd-hero-title,
body.home-skin-tech .sda-pd-hero-tagline,
body.home-skin-tech .sda-pd-hero-stat { color: #fff; }
body.home-skin-tech .sda-pd-hero-title em { color: var(--skin-neon, #00ff88); }
body.home-skin-tech .sda-pd-hero-stat i { color: var(--skin-neon, #00ff88); }
body.home-skin-tech .sda-pd-hero .sda-pd-badge { color: #fff; background: rgba(255, 255, 255, 0.14); }
body.home-skin-tech .sda-pd-cover-box { border-radius: var(--radius-lg, 20px); }
@media (max-width: 991.98px) {
    body.home-skin-tech .sda-pd-hero { padding-top: 2.5rem; }
}
/* Matrix del hero de Info detrás del contenido */
body.home-skin-tech .sda-pd-hero .hero-matrix { z-index: 0; }

/* ============================================================================
   SKIN TÉCNICA Y OFICIOS — industrial: ink/slate oscuro + acento ÁMBAR + teal de
   apoyo (template tec_y_ofi). Estructura igual a tech (hero oscuro centrado, nav
   transparente sobre el hero, CTA band oscura), cambiando neón → ámbar.
   ============================================================================ */
body.home-skin-tecnica {
    /* Ámbar PROFUNDO (#d98f12) como acento legible sobre superficies CLARAS
       (eyebrow, em, íconos, bordes). El ámbar puro (#ffbc45) es el "pop" sobre
       superficies oscuras (hero, CTA, strip). */
    --theme-primary: #d98f12;
    --theme-primary-rgb: 217, 143, 18;
    --theme-primary-interactive: #e0a526;
    --theme-navbar: #2b2f36;
    --theme-navbar-rgb: 43, 47, 54;
    --theme-secondary: #2f7a6c;
    --theme-secondary-rgb: 47, 122, 108;
    --theme-background: #f4f2ee;
    --theme-footer: #21242a;
    --bs-primary: #d98f12;
    --bs-primary-rgb: 217, 143, 18;
    --skin-amber: #ffbc45;
}

/* ---- Navbar técnica: blanco sobre el hero oscuro; glass claro al scrollear ---- */
body.home-skin-tecnica .sweet-navbar { background-color: transparent !important; box-shadow: none; }
body.home-skin-tecnica .sweet-navbar.nav-scrolled {
    background-color: rgba(244, 242, 238, 0.92) !important;
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(43, 47, 54, 0.08);
}
body.home-skin-tecnica .sweet-navbar .navbar-brand,
body.home-skin-tecnica .sweet-navbar .navbar-brand.text-white,
body.home-skin-tecnica .sweet-navbar .nav-link { color: #fff !important; }
body.home-skin-tecnica .sweet-navbar.nav-scrolled .navbar-brand,
body.home-skin-tecnica .sweet-navbar.nav-scrolled .nav-link { color: var(--theme-quaternary, #2b2f36) !important; }
body.home-skin-tecnica .sweet-navbar.nav-scrolled .nav-link:hover { color: var(--theme-primary-interactive, #e0a526) !important; }
body.home-skin-tecnica .sweet-navbar.nav-scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(43,47,54,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* "Registrarme" del nav: ámbar sólido con texto ink */
body.home-skin-tecnica .arte-nav-auth-btn--register {
    background: var(--skin-amber, #ffbc45);
    color: #2b2f36;
    border-color: var(--skin-amber, #ffbc45);
}
@media (max-width: 991.98px) {
    /* En mobile el nav técnica es una barra glass OSCURA (ink): el título se lee
       SIEMPRE (blanco sobre oscuro); el menú desplegado es un panel oscuro con
       links ámbar. */
    body.home-skin-tecnica .sweet-navbar,
    body.home-skin-tecnica .sweet-navbar.nav-scrolled {
        background-color: rgba(43, 47, 54, 0.96) !important;
        backdrop-filter: blur(16px) saturate(1.3);
        box-shadow: 0 1px 0 rgba(255, 188, 69, 0.16);
    }
    body.home-skin-tecnica .sweet-navbar .navbar-brand,
    body.home-skin-tecnica .sweet-navbar .navbar-brand.text-white,
    body.home-skin-tecnica .sweet-navbar.nav-scrolled .navbar-brand,
    body.home-skin-tecnica .sweet-navbar.nav-scrolled .navbar-brand.text-white { color: #fff !important; }
    body.home-skin-tecnica .sweet-navbar .nav-link,
    body.home-skin-tecnica .sweet-navbar.nav-scrolled .nav-link { color: var(--skin-amber, #ffbc45) !important; }
    body.home-skin-tecnica .sweet-navbar .nav-link:hover,
    body.home-skin-tecnica .sweet-navbar .nav-link.active { color: #fff !important; }
    body.home-skin-tecnica .sweet-navbar .navbar-collapse {
        background-color: rgba(43, 47, 54, 0.98);
        border: 1px solid rgba(255, 188, 69, 0.2);
        border-radius: 0 0 16px 16px;
        margin-top: 0.5rem;
        padding: 0.5rem 1rem 1rem;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
    }
    body.home-skin-tecnica .sweet-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.22); }
    body.home-skin-tecnica .sweet-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    body.home-skin-tecnica .arte-nav-auth-btn--login {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.35);
    }
    body.home-skin-tecnica .arte-nav-auth-btn--login:hover,
    body.home-skin-tecnica .arte-nav-auth-btn--login:focus {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
}

/* ---- Home hero técnica (centrado, oscuro ink + grilla/chispas): acentos ámbar ---- */
body.home-skin-tecnica .home-hero-rubro-layout { padding-top: 6.5rem; }
@media (max-width: 991.98px) {
    body.home-skin-tecnica .home-hero-rubro-layout { padding-top: 2.5rem; }
}
/* Fondo ink (reemplaza el violeta por defecto #0f0520) + grilla blueprint enmascarada */
body.home-skin-tecnica .home-hero-banner { --hero-bg: linear-gradient(160deg, #2b2f36 0%, #23272d 55%, #1b1e23 100%); }
body.home-skin-tecnica .home-hero-banner::before {
    background-image:
        linear-gradient(rgba(255, 188, 69, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 188, 69, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 70% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 90% 80% at 70% 30%, #000 30%, transparent 75%);
}
body.home-skin-tecnica .home-hero-banner .home-hero-badge {
    color: var(--skin-amber, #ffbc45) !important;
    border-color: currentColor !important;
    background: rgba(255, 188, 69, 0.12) !important;
}
body.home-skin-tecnica .home-hero-banner .home-hero-title em { color: var(--skin-amber, #ffbc45); }
body.home-skin-tecnica .home-hero-banner .home-hero-btn-a {
    background: var(--skin-amber, #ffbc45) !important;
    color: #2b2f36 !important;
    border-color: var(--skin-amber, #ffbc45) !important;
}
body.home-skin-tecnica .home-hero-banner .home-hero-btn-a:hover,
body.home-skin-tecnica .home-hero-banner .home-hero-btn-a:focus {
    background: #ffc864 !important;
    color: #2b2f36 !important;
    border-color: #ffc864 !important;
}
body.home-skin-tecnica .home-hero-banner .home-hero-btn-b {
    background: transparent !important;
    color: var(--skin-amber, #ffbc45) !important;
    border-color: rgba(255, 188, 69, 0.5) !important;
}
body.home-skin-tecnica .home-hero-banner .home-hero-btn-b:hover,
body.home-skin-tecnica .home-hero-banner .home-hero-btn-b:focus {
    background: rgba(255, 188, 69, 0.1) !important;
    color: var(--skin-amber, #ffbc45) !important;
    border-color: rgba(255, 188, 69, 0.5) !important;
}
/* Strip de bullets: ámbar sólido con texto ink */
body.home-skin-tecnica .home-rubro-strip { background: var(--skin-amber, #ffbc45); color: #2b2f36; }
/* Botón primario de cards/CTA en ámbar (firma técnica), texto ink */
body.home-skin-tecnica .student-primary-btn,
body.home-skin-tecnica .home-rubro-cta-btn {
    background: var(--skin-amber, #ffbc45);
    border-color: var(--skin-amber, #ffbc45);
    color: #2b2f36;
}
/* CTA band: glow ámbar (en vez del violeta neutro) + eyebrow ámbar brillante */
body.home-skin-tecnica .home-rubro-cta-section {
    background:
        radial-gradient(120% 120% at 12% 100%, rgba(255, 188, 69, 0.2) 0%, transparent 55%),
        linear-gradient(135deg, #2b2f36 0%, #1f2227 100%) !important;
}
body.home-skin-tecnica .home-rubro-cta-eyebrow { color: var(--skin-amber, #ffbc45); }

/* ---- /Courses/Info técnica: hero oscuro ink + grilla ámbar + onda hacia el paper ---- */
body.home-skin-tecnica .sda-pd-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(160deg, #2b2f36 0%, #23272d 55%, #1b1e23 100%);
    padding-top: 6.5rem;
    padding-bottom: 4rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}
body.home-skin-tecnica .sda-pd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 188, 69, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 188, 69, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}
body.home-skin-tecnica .sda-pd-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 48px;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,28 C220,52 440,8 660,18 C880,28 1080,56 1280,30 L1280,60 Z' fill='%23f4f2ee'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
body.home-skin-tecnica .sda-pd-hero-left,
body.home-skin-tecnica .sda-pd-cover-wrap { position: relative; z-index: 2; }
body.home-skin-tecnica .sda-pd-hero-title,
body.home-skin-tecnica .sda-pd-hero-tagline,
body.home-skin-tecnica .sda-pd-hero-stat { color: #fff; }
body.home-skin-tecnica .sda-pd-hero-title em { color: var(--skin-amber, #ffbc45); }
body.home-skin-tecnica .sda-pd-hero-stat i { color: var(--skin-amber, #ffbc45); }
body.home-skin-tecnica .sda-pd-hero .sda-pd-badge { color: #fff; background: rgba(255, 255, 255, 0.14); }
body.home-skin-tecnica .sda-pd-cover-box { border-radius: var(--radius-lg, 20px); }
@media (max-width: 991.98px) {
    body.home-skin-tecnica .sda-pd-hero { padding-top: 2.5rem; }
}

/* ---- Decoración industrial del hero (glow ámbar + chispas tipo brasa): home + Info ---- */
body.home-skin-tecnica .home-hero-banner .hero-industrial,
body.home-skin-tecnica .sda-pd-hero .hero-industrial {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.hero-industrial-glow {
    position: absolute;
    top: -12%;
    right: -8%;
    width: 540px;
    height: 540px;
    max-width: 80%;
    background: radial-gradient(circle, rgba(255, 188, 69, 0.22), transparent 65%);
}
.hero-spark {
    position: absolute;
    bottom: -12px;
    width: var(--spark-size, 3px);
    height: var(--spark-size, 3px);
    border-radius: 50%;
    background: var(--skin-amber, #ffbc45);
    box-shadow: 0 0 6px rgba(255, 188, 69, 0.85);
    opacity: 0;
    animation: hero-spark-rise var(--spark-d, 6s) linear infinite;
    animation-delay: var(--spark-delay, 0s);
}
@keyframes hero-spark-rise {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    12% { opacity: var(--spark-o, 0.9); }
    85% { opacity: var(--spark-o, 0.9); }
    100% { transform: translateY(-360px) scale(0.35); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-spark { animation: none; opacity: 0; }
}

/* ============================================================================
   SKIN NEGOCIOS Y FINANZAS — corporativo/sobrio: navy oscuro + acento DORADO +
   teal de apoyo (template negocios_y_finanzas). Estructura igual a tech/técnica
   (hero oscuro centrado, nav transparente sobre el hero, CTA band oscura).
   ============================================================================ */
body.home-skin-biz {
    /* Dorado PROFUNDO (#b8923a) como acento legible sobre superficies CLARAS
       (eyebrow, em, íconos, bordes). El dorado puro (#e0bf63) es el "pop" sobre
       superficies oscuras (hero navy, CTA, strip). */
    --theme-primary: #b8923a;
    --theme-primary-rgb: 184, 146, 58;
    --theme-primary-interactive: #c8a24a;
    --theme-navbar: #15233b;
    --theme-navbar-rgb: 21, 35, 59;
    --theme-secondary: #2f7a6c;
    --theme-secondary-rgb: 47, 122, 108;
    --theme-background: #f4f3ef;
    --theme-footer: #0f1a2e;
    --bs-primary: #b8923a;
    --bs-primary-rgb: 184, 146, 58;
    --skin-gold: #e0bf63;
}

/* ---- Navbar negocios: blanco sobre el hero navy; glass claro al scrollear ---- */
body.home-skin-biz .sweet-navbar { background-color: transparent !important; box-shadow: none; }
body.home-skin-biz .sweet-navbar.nav-scrolled {
    background-color: rgba(244, 243, 239, 0.92) !important;
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(21, 35, 59, 0.08);
}
body.home-skin-biz .sweet-navbar .navbar-brand,
body.home-skin-biz .sweet-navbar .navbar-brand.text-white,
body.home-skin-biz .sweet-navbar .nav-link { color: #fff !important; }
body.home-skin-biz .sweet-navbar.nav-scrolled .navbar-brand,
body.home-skin-biz .sweet-navbar.nav-scrolled .nav-link { color: var(--theme-quaternary, #15233b) !important; }
body.home-skin-biz .sweet-navbar.nav-scrolled .nav-link:hover { color: var(--theme-primary-interactive, #c8a24a) !important; }
body.home-skin-biz .sweet-navbar.nav-scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(21,35,59,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* "Registrarme" del nav: dorado sólido con texto navy */
body.home-skin-biz .arte-nav-auth-btn--register {
    background: var(--skin-gold, #e0bf63);
    color: #15233b;
    border-color: var(--skin-gold, #e0bf63);
}
@media (max-width: 991.98px) {
    /* Mobile: barra glass OSCURA (navy) → título legible siempre; menú desplegado
       panel navy con links dorados. */
    body.home-skin-biz .sweet-navbar,
    body.home-skin-biz .sweet-navbar.nav-scrolled {
        background-color: rgba(21, 35, 59, 0.96) !important;
        backdrop-filter: blur(16px) saturate(1.3);
        box-shadow: 0 1px 0 rgba(224, 191, 99, 0.16);
    }
    body.home-skin-biz .sweet-navbar .navbar-brand,
    body.home-skin-biz .sweet-navbar .navbar-brand.text-white,
    body.home-skin-biz .sweet-navbar.nav-scrolled .navbar-brand,
    body.home-skin-biz .sweet-navbar.nav-scrolled .navbar-brand.text-white { color: #fff !important; }
    body.home-skin-biz .sweet-navbar .nav-link,
    body.home-skin-biz .sweet-navbar.nav-scrolled .nav-link { color: var(--skin-gold, #e0bf63) !important; }
    body.home-skin-biz .sweet-navbar .nav-link:hover,
    body.home-skin-biz .sweet-navbar .nav-link.active { color: #fff !important; }
    body.home-skin-biz .sweet-navbar .navbar-collapse {
        background-color: rgba(21, 35, 59, 0.98);
        border: 1px solid rgba(224, 191, 99, 0.2);
        border-radius: 0 0 16px 16px;
        margin-top: 0.5rem;
        padding: 0.5rem 1rem 1rem;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
    }
    body.home-skin-biz .sweet-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.22); }
    body.home-skin-biz .sweet-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    body.home-skin-biz .arte-nav-auth-btn--login {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.35);
    }
    body.home-skin-biz .arte-nav-auth-btn--login:hover,
    body.home-skin-biz .arte-nav-auth-btn--login:focus {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
}

/* ---- Home hero biz (centrado, navy + grid/candlesticks): acentos dorados ---- */
body.home-skin-biz .home-hero-rubro-layout { padding-top: 6.5rem; }
@media (max-width: 991.98px) {
    body.home-skin-biz .home-hero-rubro-layout { padding-top: 2.5rem; }
}
/* Fondo navy (reemplaza el violeta por defecto #0f0520) */
body.home-skin-biz .home-hero-banner { --hero-bg: linear-gradient(160deg, #1a2a45 0%, #15233b 55%, #0f1a2e 100%); }
body.home-skin-biz .home-hero-banner .home-hero-badge {
    color: var(--skin-gold, #e0bf63) !important;
    border-color: currentColor !important;
    background: rgba(224, 191, 99, 0.12) !important;
}
body.home-skin-biz .home-hero-banner .home-hero-title em { color: var(--skin-gold, #e0bf63); }
body.home-skin-biz .home-hero-banner .home-hero-btn-a {
    background: var(--skin-gold, #e0bf63) !important;
    color: #15233b !important;
    border-color: var(--skin-gold, #e0bf63) !important;
}
body.home-skin-biz .home-hero-banner .home-hero-btn-a:hover,
body.home-skin-biz .home-hero-banner .home-hero-btn-a:focus {
    background: #e8cb7e !important;
    color: #15233b !important;
    border-color: #e8cb7e !important;
}
body.home-skin-biz .home-hero-banner .home-hero-btn-b {
    background: transparent !important;
    color: var(--skin-gold, #e0bf63) !important;
    border-color: rgba(224, 191, 99, 0.5) !important;
}
body.home-skin-biz .home-hero-banner .home-hero-btn-b:hover,
body.home-skin-biz .home-hero-banner .home-hero-btn-b:focus {
    background: rgba(224, 191, 99, 0.1) !important;
    color: var(--skin-gold, #e0bf63) !important;
    border-color: rgba(224, 191, 99, 0.5) !important;
}
/* Strip de bullets: dorado sólido con texto navy */
body.home-skin-biz .home-rubro-strip { background: var(--skin-gold, #e0bf63); color: #15233b; }
/* Botón primario de cards/CTA en dorado (firma negocios), texto navy */
body.home-skin-biz .student-primary-btn,
body.home-skin-biz .home-rubro-cta-btn {
    background: var(--skin-gold, #e0bf63);
    border-color: var(--skin-gold, #e0bf63);
    color: #15233b;
}
/* CTA band: navy + glow dorado (en vez del violeta neutro) + eyebrow dorado */
body.home-skin-biz .home-rubro-cta-section {
    background:
        radial-gradient(120% 120% at 12% 100%, rgba(224, 191, 99, 0.18) 0%, transparent 55%),
        linear-gradient(135deg, #15233b 0%, #0f1a2e 100%) !important;
}
body.home-skin-biz .home-rubro-cta-eyebrow { color: var(--skin-gold, #e0bf63); }

/* ---- /Courses/Info biz: hero navy + grid/candlesticks dorados + onda al paper ---- */
body.home-skin-biz .sda-pd-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(160deg, #1a2a45 0%, #15233b 55%, #0f1a2e 100%);
    padding-top: 6.5rem;
    padding-bottom: 4rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}
body.home-skin-biz .sda-pd-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 48px;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,28 C220,52 440,8 660,18 C880,28 1080,56 1280,30 L1280,60 Z' fill='%23f4f3ef'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
body.home-skin-biz .sda-pd-hero-left,
body.home-skin-biz .sda-pd-cover-wrap { position: relative; z-index: 2; }
body.home-skin-biz .sda-pd-hero-title,
body.home-skin-biz .sda-pd-hero-tagline,
body.home-skin-biz .sda-pd-hero-stat { color: #fff; }
body.home-skin-biz .sda-pd-hero-title em { color: var(--skin-gold, #e0bf63); }
body.home-skin-biz .sda-pd-hero-stat i { color: var(--skin-gold, #e0bf63); }
body.home-skin-biz .sda-pd-hero .sda-pd-badge { color: #fff; background: rgba(255, 255, 255, 0.14); }
body.home-skin-biz .sda-pd-cover-box { border-radius: var(--radius-lg, 20px); }
@media (max-width: 991.98px) {
    body.home-skin-biz .sda-pd-hero { padding-top: 2.5rem; }
}

/* ---- Decoración negocios (grid dorado + glow + candlesticks): home + Info ---- */
body.home-skin-biz .home-hero-banner .hero-biz-grid,
body.home-skin-biz .sda-pd-hero .hero-biz-grid,
body.home-skin-biz .home-hero-banner .hero-biz-candles,
body.home-skin-biz .sda-pd-hero .hero-biz-candles {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.hero-biz-grid {
    inset: 0;
    background:
        radial-gradient(circle at 80% 12%, rgba(224, 191, 99, 0.2) 0%, transparent 55%),
        linear-gradient(rgba(224, 191, 99, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(224, 191, 99, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 52px 52px, 52px 52px;
    background-repeat: no-repeat, repeat, repeat;
}
.hero-biz-candles {
    inset: auto 0 0 0;
    height: 170px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 14px;
    padding: 0 9%;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%);
    mask-image: linear-gradient(to top, #000 35%, transparent 100%);
}
.hero-biz-candle {
    position: relative;
    width: 10px;
    height: var(--candle-h, 30px);
    margin-bottom: var(--candle-o, 0px);
    border-radius: 2px;
    transform-origin: bottom;
    animation: hero-biz-candle-rise 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-biz-candle.is-positive { background: var(--skin-gold, #e0bf63); box-shadow: 0 0 10px rgba(224, 191, 99, 0.45); }
.hero-biz-candle.is-negative { background: rgba(224, 191, 99, 0.3); }
.hero-biz-candle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -9px;
    bottom: -9px;
    width: 2px;
    transform: translateX(-50%);
    background: inherit;
    opacity: 0.6;
}
@keyframes hero-biz-candle-rise {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-biz-candle { animation: none; }
}

/* ============================================================================
   SKIN MÚSICA — escenario/ritmo: violeta profundo + acento CYAN + lavanda de apoyo
   (template home_musica). Estructura igual a tech/biz (hero oscuro centrado, nav
   transparente sobre el hero, CTA band oscura), en violeta/cyan.
   ============================================================================ */
body.home-skin-musica {
    /* Cyan PROFUNDO (#0d7990) como acento legible sobre superficies CLARAS
       (eyebrow, em, íconos, bordes). El cyan puro (#42e7ff) es el "pop" sobre
       superficies oscuras (hero violeta, CTA, strip). */
    --theme-primary: #0d7990;
    --theme-primary-rgb: 13, 121, 144;
    --theme-primary-interactive: #169fc0;
    --theme-navbar: #1d1450;
    --theme-navbar-rgb: 29, 20, 80;
    --theme-secondary: #8a5fb0;
    --theme-secondary-rgb: 138, 95, 176;
    --theme-background: #f4f2f7;
    --theme-footer: #150d3a;
    --bs-primary: #0d7990;
    --bs-primary-rgb: 13, 121, 144;
    --skin-cyan: #42e7ff;
}

/* ---- Navbar música: blanco sobre el hero violeta; glass claro al scrollear ---- */
body.home-skin-musica .sweet-navbar { background-color: transparent !important; box-shadow: none; }
body.home-skin-musica .sweet-navbar.nav-scrolled {
    background-color: rgba(244, 242, 247, 0.92) !important;
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(29, 20, 80, 0.08);
}
body.home-skin-musica .sweet-navbar .navbar-brand,
body.home-skin-musica .sweet-navbar .navbar-brand.text-white,
body.home-skin-musica .sweet-navbar .nav-link { color: #fff !important; }
body.home-skin-musica .sweet-navbar.nav-scrolled .navbar-brand,
body.home-skin-musica .sweet-navbar.nav-scrolled .nav-link { color: var(--theme-quaternary, #1d1450) !important; }
body.home-skin-musica .sweet-navbar.nav-scrolled .nav-link:hover { color: var(--theme-primary-interactive, #169fc0) !important; }
body.home-skin-musica .sweet-navbar.nav-scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(29,20,80,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* "Registrarme" del nav: cyan sólido con texto violeta */
body.home-skin-musica .arte-nav-auth-btn--register {
    background: var(--skin-cyan, #42e7ff);
    color: #1d1450;
    border-color: var(--skin-cyan, #42e7ff);
}
@media (max-width: 991.98px) {
    /* Mobile: barra glass OSCURA (violeta) → título legible siempre; menú desplegado
       panel violeta con links cyan. */
    body.home-skin-musica .sweet-navbar,
    body.home-skin-musica .sweet-navbar.nav-scrolled {
        background-color: rgba(29, 20, 80, 0.96) !important;
        backdrop-filter: blur(16px) saturate(1.3);
        box-shadow: 0 1px 0 rgba(66, 231, 255, 0.16);
    }
    body.home-skin-musica .sweet-navbar .navbar-brand,
    body.home-skin-musica .sweet-navbar .navbar-brand.text-white,
    body.home-skin-musica .sweet-navbar.nav-scrolled .navbar-brand,
    body.home-skin-musica .sweet-navbar.nav-scrolled .navbar-brand.text-white { color: #fff !important; }
    body.home-skin-musica .sweet-navbar .nav-link,
    body.home-skin-musica .sweet-navbar.nav-scrolled .nav-link { color: var(--skin-cyan, #42e7ff) !important; }
    body.home-skin-musica .sweet-navbar .nav-link:hover,
    body.home-skin-musica .sweet-navbar .nav-link.active { color: #fff !important; }
    body.home-skin-musica .sweet-navbar .navbar-collapse {
        background-color: rgba(29, 20, 80, 0.98);
        border: 1px solid rgba(66, 231, 255, 0.2);
        border-radius: 0 0 16px 16px;
        margin-top: 0.5rem;
        padding: 0.5rem 1rem 1rem;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
    }
    body.home-skin-musica .sweet-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.22); }
    body.home-skin-musica .sweet-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    body.home-skin-musica .arte-nav-auth-btn--login {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.35);
    }
    body.home-skin-musica .arte-nav-auth-btn--login:hover,
    body.home-skin-musica .arte-nav-auth-btn--login:focus {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
}

/* ---- Home hero música (centrado, violeta + ecualizador/notas): acentos cyan ---- */
body.home-skin-musica .home-hero-rubro-layout { padding-top: 6.5rem; }
@media (max-width: 991.98px) {
    body.home-skin-musica .home-hero-rubro-layout { padding-top: 2.5rem; }
}
/* Fondo violeta (reemplaza el por defecto #0f0520) + glows radiales (cyan / lavanda) */
body.home-skin-musica .home-hero-banner { --hero-bg: linear-gradient(165deg, #2a1c6e 0%, #1d1450 52%, #150d3a 100%); }
body.home-skin-musica .home-hero-banner::before {
    background: radial-gradient(circle at 86% 6%, rgba(66, 231, 255, 0.22) 0%, transparent 60%);
}
body.home-skin-musica .home-hero-banner::after {
    background: radial-gradient(circle at 6% 100%, rgba(197, 168, 217, 0.2) 0%, transparent 60%);
}
body.home-skin-musica .home-hero-banner .home-hero-badge {
    color: var(--skin-cyan, #42e7ff) !important;
    border-color: currentColor !important;
    background: rgba(66, 231, 255, 0.12) !important;
}
body.home-skin-musica .home-hero-banner .home-hero-title em {
    color: var(--skin-cyan, #42e7ff);
    text-shadow: 0 0 28px rgba(66, 231, 255, 0.45);
}
body.home-skin-musica .home-hero-banner .home-hero-btn-a {
    background: var(--skin-cyan, #42e7ff) !important;
    color: #1d1450 !important;
    border-color: var(--skin-cyan, #42e7ff) !important;
}
body.home-skin-musica .home-hero-banner .home-hero-btn-a:hover,
body.home-skin-musica .home-hero-banner .home-hero-btn-a:focus {
    background: #6deeff !important;
    color: #1d1450 !important;
    border-color: #6deeff !important;
}
body.home-skin-musica .home-hero-banner .home-hero-btn-b {
    background: transparent !important;
    color: var(--skin-cyan, #42e7ff) !important;
    border-color: rgba(66, 231, 255, 0.5) !important;
}
body.home-skin-musica .home-hero-banner .home-hero-btn-b:hover,
body.home-skin-musica .home-hero-banner .home-hero-btn-b:focus {
    background: rgba(66, 231, 255, 0.1) !important;
    color: var(--skin-cyan, #42e7ff) !important;
    border-color: rgba(66, 231, 255, 0.5) !important;
}
/* Strip de bullets: cyan sólido con texto violeta */
body.home-skin-musica .home-rubro-strip { background: var(--skin-cyan, #42e7ff); color: #1d1450; }
/* Botón primario de cards/CTA en cyan (firma música), texto violeta */
body.home-skin-musica .student-primary-btn,
body.home-skin-musica .home-rubro-cta-btn {
    background: var(--skin-cyan, #42e7ff);
    border-color: var(--skin-cyan, #42e7ff);
    color: #1d1450;
}
/* CTA band: violeta + glow cyan (en vez del violeta neutro) + eyebrow cyan */
body.home-skin-musica .home-rubro-cta-section {
    background:
        radial-gradient(120% 120% at 12% 100%, rgba(66, 231, 255, 0.16) 0%, transparent 55%),
        linear-gradient(135deg, #1d1450 0%, #150d3a 100%) !important;
}
body.home-skin-musica .home-rubro-cta-eyebrow { color: var(--skin-cyan, #42e7ff); }

/* ---- /Courses/Info música: hero violeta + ecualizador/notas + onda al paper ---- */
body.home-skin-musica .sda-pd-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(165deg, #2a1c6e 0%, #1d1450 52%, #150d3a 100%);
    padding-top: 6.5rem;
    padding-bottom: 4rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}
body.home-skin-musica .sda-pd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 86% 8%, rgba(66, 231, 255, 0.2) 0%, transparent 58%);
    pointer-events: none;
}
body.home-skin-musica .sda-pd-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 48px;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,28 C220,52 440,8 660,18 C880,28 1080,56 1280,30 L1280,60 Z' fill='%23f4f2f7'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
body.home-skin-musica .sda-pd-hero-left,
body.home-skin-musica .sda-pd-cover-wrap { position: relative; z-index: 2; }
body.home-skin-musica .sda-pd-hero-title,
body.home-skin-musica .sda-pd-hero-tagline,
body.home-skin-musica .sda-pd-hero-stat { color: #fff; }
body.home-skin-musica .sda-pd-hero-title em { color: var(--skin-cyan, #42e7ff); }
body.home-skin-musica .sda-pd-hero-stat i { color: var(--skin-cyan, #42e7ff); }
body.home-skin-musica .sda-pd-hero .sda-pd-badge { color: #fff; background: rgba(255, 255, 255, 0.14); }
body.home-skin-musica .sda-pd-cover-box { border-radius: var(--radius-lg, 20px); }
@media (max-width: 991.98px) {
    body.home-skin-musica .sda-pd-hero { padding-top: 2.5rem; }
}

/* ---- Decoración música (ecualizador de barras + notas flotantes): home + Info ---- */
body.home-skin-musica .home-hero-banner .hero-bars,
body.home-skin-musica .sda-pd-hero .hero-bars,
body.home-skin-musica .home-hero-banner .hero-notes,
body.home-skin-musica .sda-pd-hero .hero-notes {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.hero-bars {
    inset: auto 0 0 0;
    height: 130px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    padding: 0 2vw;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 100%);
    mask-image: linear-gradient(to top, #000 40%, transparent 100%);
}
.hero-bar {
    flex: 1;
    height: var(--bar-h, 30px);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--skin-cyan, #42e7ff), rgba(66, 231, 255, 0.05));
    opacity: var(--bar-o, 0.6);
    transform-origin: bottom;
    animation: hero-bar-eq var(--bar-d, 2s) ease-in-out infinite;
    animation-delay: var(--bar-delay, 0s);
}
@keyframes hero-bar-eq {
    0%, 100% { transform: scaleY(var(--bar-min, 0.3)); }
    50% { transform: scaleY(var(--bar-max, 1)); }
}
.hero-notes { inset: 0; overflow: hidden; }
.hero-notes span {
    position: absolute;
    color: var(--skin-cyan, #42e7ff);
    opacity: 0.32;
    font-size: 1.5rem;
    animation: hero-note-float 7s ease-in-out infinite;
}
.hero-notes span:nth-child(1) { left: 8%; top: 32%; font-size: 1.3rem; animation-delay: 0s; }
.hero-notes span:nth-child(2) { left: 18%; top: 64%; font-size: 1.7rem; animation-delay: -1.4s; }
.hero-notes span:nth-child(3) { left: 74%; top: 28%; font-size: 1.4rem; animation-delay: -2.6s; }
.hero-notes span:nth-child(4) { left: 86%; top: 58%; font-size: 1.9rem; animation-delay: -3.8s; }
.hero-notes span:nth-child(5) { left: 44%; top: 18%; font-size: 1.2rem; animation-delay: -0.8s; }
.hero-notes span:nth-child(6) { left: 60%; top: 70%; font-size: 1.6rem; animation-delay: -5s; }
@keyframes hero-note-float {
    0%, 100% { transform: translateY(0) rotate(-6deg); opacity: 0.22; }
    50% { transform: translateY(-24px) rotate(8deg); opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-bar { animation: none; transform: scaleY(var(--bar-min, 0.4)); }
    .hero-notes span { animation: none; }
}

/* ============================================================================
   SKIN ACTIVIDAD FÍSICA Y BIENESTAR — enérgico/saludable: verde menta (lime) +
   coral de apoyo sobre carbón (coal). Estructura igual a música/biz (hero oscuro
   centrado, nav transparente sobre el hero, CTA band oscura).
   ============================================================================ */
body.home-skin-fit {
    /* Lime PROFUNDO (#0c8a5e) como acento legible sobre superficies CLARAS
       (eyebrow, em, íconos, bordes). El lime puro (#68f6ba) es el "pop" sobre
       superficies oscuras (hero carbón, CTA, strip). */
    --theme-primary: #0c8a5e;
    --theme-primary-rgb: 12, 138, 94;
    --theme-primary-interactive: #16b87f;
    --theme-navbar: #122821;
    --theme-navbar-rgb: 18, 40, 33;
    --theme-secondary: #ff7a59;
    --theme-secondary-rgb: 255, 122, 89;
    --theme-background: #f2f6f4;
    --theme-footer: #0c1d18;
    --bs-primary: #0c8a5e;
    --bs-primary-rgb: 12, 138, 94;
    --skin-lime: #68f6ba;
}

/* ---- Navbar fit: blanco sobre el hero carbón; glass claro al scrollear ---- */
body.home-skin-fit .sweet-navbar { background-color: transparent !important; box-shadow: none; }
body.home-skin-fit .sweet-navbar.nav-scrolled {
    background-color: rgba(242, 246, 244, 0.92) !important;
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(18, 40, 33, 0.08);
}
body.home-skin-fit .sweet-navbar .navbar-brand,
body.home-skin-fit .sweet-navbar .navbar-brand.text-white,
body.home-skin-fit .sweet-navbar .nav-link { color: #fff !important; }
body.home-skin-fit .sweet-navbar.nav-scrolled .navbar-brand,
body.home-skin-fit .sweet-navbar.nav-scrolled .nav-link { color: var(--theme-quaternary, #122821) !important; }
body.home-skin-fit .sweet-navbar.nav-scrolled .nav-link:hover { color: var(--theme-primary-interactive, #16b87f) !important; }
body.home-skin-fit .sweet-navbar.nav-scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(18,40,33,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* "Registrarme" del nav: lime sólido con texto carbón */
body.home-skin-fit .arte-nav-auth-btn--register {
    background: var(--skin-lime, #68f6ba);
    color: #122821;
    border-color: var(--skin-lime, #68f6ba);
}
@media (max-width: 991.98px) {
    /* Mobile: barra glass OSCURA (carbón) → título legible siempre; menú desplegado
       panel carbón con links lime. */
    body.home-skin-fit .sweet-navbar,
    body.home-skin-fit .sweet-navbar.nav-scrolled {
        background-color: rgba(18, 40, 33, 0.96) !important;
        backdrop-filter: blur(16px) saturate(1.3);
        box-shadow: 0 1px 0 rgba(104, 246, 186, 0.16);
    }
    body.home-skin-fit .sweet-navbar .navbar-brand,
    body.home-skin-fit .sweet-navbar .navbar-brand.text-white,
    body.home-skin-fit .sweet-navbar.nav-scrolled .navbar-brand,
    body.home-skin-fit .sweet-navbar.nav-scrolled .navbar-brand.text-white { color: #fff !important; }
    body.home-skin-fit .sweet-navbar .nav-link,
    body.home-skin-fit .sweet-navbar.nav-scrolled .nav-link { color: var(--skin-lime, #68f6ba) !important; }
    body.home-skin-fit .sweet-navbar .nav-link:hover,
    body.home-skin-fit .sweet-navbar .nav-link.active { color: #fff !important; }
    body.home-skin-fit .sweet-navbar .navbar-collapse {
        background-color: rgba(18, 40, 33, 0.98);
        border: 1px solid rgba(104, 246, 186, 0.2);
        border-radius: 0 0 16px 16px;
        margin-top: 0.5rem;
        padding: 0.5rem 1rem 1rem;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
    }
    body.home-skin-fit .sweet-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.22); }
    body.home-skin-fit .sweet-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    body.home-skin-fit .arte-nav-auth-btn--login {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.35);
    }
    body.home-skin-fit .arte-nav-auth-btn--login:hover,
    body.home-skin-fit .arte-nav-auth-btn--login:focus {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
}

/* ---- Home hero fit (centrado, carbón + pulso/ECG): acentos lime ---- */
body.home-skin-fit .home-hero-rubro-layout { padding-top: 6.5rem; }
@media (max-width: 991.98px) {
    body.home-skin-fit .home-hero-rubro-layout { padding-top: 2.5rem; }
}
/* Fondo carbón (reemplaza el por defecto #0f0520) + glows radiales (lime / coral) */
body.home-skin-fit .home-hero-banner { --hero-bg: linear-gradient(165deg, #1a3a2e 0%, #122821 52%, #0c1d18 100%); }
body.home-skin-fit .home-hero-banner::before {
    background: radial-gradient(circle at 86% 6%, rgba(104, 246, 186, 0.24) 0%, transparent 60%);
}
body.home-skin-fit .home-hero-banner::after {
    background: radial-gradient(circle at 6% 100%, rgba(255, 122, 89, 0.18) 0%, transparent 60%);
}
body.home-skin-fit .home-hero-banner .home-hero-badge {
    color: var(--skin-lime, #68f6ba) !important;
    border-color: currentColor !important;
    background: rgba(104, 246, 186, 0.12) !important;
}
body.home-skin-fit .home-hero-banner .home-hero-title em {
    color: var(--skin-lime, #68f6ba);
    text-shadow: 0 0 28px rgba(104, 246, 186, 0.45);
}
body.home-skin-fit .home-hero-banner .home-hero-btn-a {
    background: var(--skin-lime, #68f6ba) !important;
    color: #122821 !important;
    border-color: var(--skin-lime, #68f6ba) !important;
}
body.home-skin-fit .home-hero-banner .home-hero-btn-a:hover,
body.home-skin-fit .home-hero-banner .home-hero-btn-a:focus {
    background: #88f9c9 !important;
    color: #122821 !important;
    border-color: #88f9c9 !important;
}
body.home-skin-fit .home-hero-banner .home-hero-btn-b {
    background: transparent !important;
    color: var(--skin-lime, #68f6ba) !important;
    border-color: rgba(104, 246, 186, 0.5) !important;
}
body.home-skin-fit .home-hero-banner .home-hero-btn-b:hover,
body.home-skin-fit .home-hero-banner .home-hero-btn-b:focus {
    background: rgba(104, 246, 186, 0.1) !important;
    color: var(--skin-lime, #68f6ba) !important;
    border-color: rgba(104, 246, 186, 0.5) !important;
}
/* Strip de bullets: lime sólido con texto carbón */
body.home-skin-fit .home-rubro-strip { background: var(--skin-lime, #68f6ba); color: #122821; }
/* Botón primario de cards/CTA en lime (firma fit), texto carbón */
body.home-skin-fit .student-primary-btn,
body.home-skin-fit .home-rubro-cta-btn {
    background: var(--skin-lime, #68f6ba);
    border-color: var(--skin-lime, #68f6ba);
    color: #122821;
}
/* CTA band: carbón + glow lime (en vez del violeta neutro) + eyebrow lime */
body.home-skin-fit .home-rubro-cta-section {
    background:
        radial-gradient(120% 120% at 12% 100%, rgba(104, 246, 186, 0.16) 0%, transparent 55%),
        linear-gradient(135deg, #122821 0%, #0c1d18 100%) !important;
}
body.home-skin-fit .home-rubro-cta-eyebrow { color: var(--skin-lime, #68f6ba); }

/* ---- /Courses/Info fit: hero carbón + glow + pulso + onda al paper ---- */
body.home-skin-fit .sda-pd-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(165deg, #1a3a2e 0%, #122821 52%, #0c1d18 100%);
    padding-top: 6.5rem;
    padding-bottom: 4rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}
body.home-skin-fit .sda-pd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 86% 8%, rgba(104, 246, 186, 0.2) 0%, transparent 58%);
    pointer-events: none;
}
body.home-skin-fit .sda-pd-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 48px;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,28 C220,52 440,8 660,18 C880,28 1080,56 1280,30 L1280,60 Z' fill='%23f2f6f4'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
body.home-skin-fit .sda-pd-hero-left,
body.home-skin-fit .sda-pd-cover-wrap { position: relative; z-index: 2; }
body.home-skin-fit .sda-pd-hero-title,
body.home-skin-fit .sda-pd-hero-tagline,
body.home-skin-fit .sda-pd-hero-stat { color: #fff; }
body.home-skin-fit .sda-pd-hero-title em { color: var(--skin-lime, #68f6ba); }
body.home-skin-fit .sda-pd-hero-stat i { color: var(--skin-lime, #68f6ba); }
body.home-skin-fit .sda-pd-hero .sda-pd-badge { color: #fff; background: rgba(255, 255, 255, 0.14); }
body.home-skin-fit .sda-pd-cover-box { border-radius: var(--radius-lg, 20px); }
@media (max-width: 991.98px) {
    body.home-skin-fit .sda-pd-hero { padding-top: 2.5rem; }
}

/* ---- Decoración fit (línea de pulso / ECG animada): home + Info ---- */
body.home-skin-fit .home-hero-banner .hero-pulse,
body.home-skin-fit .sda-pd-hero .hero-pulse {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    z-index: 0;
    opacity: 0.5;
    overflow: hidden;
    pointer-events: none;
}
.hero-pulse svg { width: 200%; height: 100%; display: block; }
.hero-pulse-line {
    fill: none;
    stroke: var(--skin-lime, #68f6ba);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(104, 246, 186, 0.7));
    animation: hero-pulse-move 6s linear infinite;
}
@keyframes hero-pulse-move {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-pulse-line { animation: none; }
}

/* ============================================================================
   SKIN EDUCACIÓN GENERAL — sobrio/académico: azul pizarra (#46618c) + bronce de
   apoyo sobre azul tinta (#1c2940). Estructura igual a música/fit (hero oscuro
   centrado, nav transparente sobre el hero, CTA band oscura).
   ============================================================================ */
body.home-skin-edu {
    /* Azul pizarra PROFUNDO (#36507a) como acento legible sobre superficies CLARAS;
       el azul pizarra claro (#7d9bc9) es el "pop" sobre superficies oscuras. */
    --theme-primary: #36507a;
    --theme-primary-rgb: 54, 80, 122;
    --theme-primary-interactive: #46618c;
    --theme-navbar: #1c2940;
    --theme-navbar-rgb: 28, 41, 64;
    --theme-secondary: #9c7f44;
    --theme-secondary-rgb: 156, 127, 68;
    --theme-background: #f6f3f6;
    --theme-footer: #131d2e;
    --bs-primary: #36507a;
    --bs-primary-rgb: 54, 80, 122;
    --skin-edu: #7d9bc9;
}

/* ---- Navbar edu: blanco sobre el hero azul tinta; glass claro al scrollear ---- */
body.home-skin-edu .sweet-navbar { background-color: transparent !important; box-shadow: none; }
body.home-skin-edu .sweet-navbar.nav-scrolled {
    background-color: rgba(246, 243, 246, 0.92) !important;
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(28, 41, 64, 0.08);
}
body.home-skin-edu .sweet-navbar .navbar-brand,
body.home-skin-edu .sweet-navbar .navbar-brand.text-white,
body.home-skin-edu .sweet-navbar .nav-link { color: #fff !important; }
body.home-skin-edu .sweet-navbar.nav-scrolled .navbar-brand,
body.home-skin-edu .sweet-navbar.nav-scrolled .nav-link { color: var(--theme-quaternary, #1c2940) !important; }
body.home-skin-edu .sweet-navbar.nav-scrolled .nav-link:hover { color: var(--theme-primary-interactive, #46618c) !important; }
body.home-skin-edu .sweet-navbar.nav-scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(28,41,64,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
body.home-skin-edu .arte-nav-auth-btn--register {
    background: var(--skin-edu, #7d9bc9);
    color: #1c2940;
    border-color: var(--skin-edu, #7d9bc9);
}
@media (max-width: 991.98px) {
    body.home-skin-edu .sweet-navbar,
    body.home-skin-edu .sweet-navbar.nav-scrolled {
        background-color: rgba(28, 41, 64, 0.96) !important;
        backdrop-filter: blur(16px) saturate(1.3);
        box-shadow: 0 1px 0 rgba(125, 155, 201, 0.18);
    }
    body.home-skin-edu .sweet-navbar .navbar-brand,
    body.home-skin-edu .sweet-navbar .navbar-brand.text-white,
    body.home-skin-edu .sweet-navbar.nav-scrolled .navbar-brand,
    body.home-skin-edu .sweet-navbar.nav-scrolled .navbar-brand.text-white { color: #fff !important; }
    body.home-skin-edu .sweet-navbar .nav-link,
    body.home-skin-edu .sweet-navbar.nav-scrolled .nav-link { color: var(--skin-edu, #7d9bc9) !important; }
    body.home-skin-edu .sweet-navbar .nav-link:hover,
    body.home-skin-edu .sweet-navbar .nav-link.active { color: #fff !important; }
    body.home-skin-edu .sweet-navbar .navbar-collapse {
        background-color: rgba(28, 41, 64, 0.98);
        border: 1px solid rgba(125, 155, 201, 0.22);
        border-radius: 0 0 16px 16px;
        margin-top: 0.5rem;
        padding: 0.5rem 1rem 1rem;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
    }
    body.home-skin-edu .sweet-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.22); }
    body.home-skin-edu .sweet-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    body.home-skin-edu .arte-nav-auth-btn--login {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.35);
    }
    body.home-skin-edu .arte-nav-auth-btn--login:hover,
    body.home-skin-edu .arte-nav-auth-btn--login:focus {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
}

/* ---- Home hero edu (centrado, azul tinta + glifos académicos): acentos pizarra ---- */
body.home-skin-edu .home-hero-rubro-layout { padding-top: 6.5rem; }
@media (max-width: 991.98px) {
    body.home-skin-edu .home-hero-rubro-layout { padding-top: 2.5rem; }
}
body.home-skin-edu .home-hero-banner { --hero-bg: linear-gradient(165deg, #243650 0%, #1c2940 52%, #131d2e 100%); }
body.home-skin-edu .home-hero-banner::before {
    background: radial-gradient(circle at 86% 6%, rgba(70, 97, 140, 0.26) 0%, transparent 60%);
}
body.home-skin-edu .home-hero-banner::after {
    background: radial-gradient(circle at 6% 100%, rgba(156, 127, 68, 0.2) 0%, transparent 60%);
}
body.home-skin-edu .home-hero-banner .home-hero-badge {
    color: var(--skin-edu, #7d9bc9) !important;
    border-color: currentColor !important;
    background: rgba(125, 155, 201, 0.12) !important;
}
body.home-skin-edu .home-hero-banner .home-hero-title em {
    color: var(--skin-edu, #7d9bc9);
    text-shadow: 0 0 28px rgba(70, 97, 140, 0.5);
}
body.home-skin-edu .home-hero-banner .home-hero-btn-a {
    background: var(--skin-edu, #7d9bc9) !important;
    color: #1c2940 !important;
    border-color: var(--skin-edu, #7d9bc9) !important;
}
body.home-skin-edu .home-hero-banner .home-hero-btn-a:hover,
body.home-skin-edu .home-hero-banner .home-hero-btn-a:focus {
    background: #97b2d8 !important;
    color: #1c2940 !important;
    border-color: #97b2d8 !important;
}
body.home-skin-edu .home-hero-banner .home-hero-btn-b {
    background: transparent !important;
    color: var(--skin-edu, #7d9bc9) !important;
    border-color: rgba(125, 155, 201, 0.5) !important;
}
body.home-skin-edu .home-hero-banner .home-hero-btn-b:hover,
body.home-skin-edu .home-hero-banner .home-hero-btn-b:focus {
    background: rgba(125, 155, 201, 0.1) !important;
    color: var(--skin-edu, #7d9bc9) !important;
    border-color: rgba(125, 155, 201, 0.5) !important;
}
body.home-skin-edu .home-rubro-strip { background: #46618c; color: #fff; }
body.home-skin-edu .student-primary-btn,
body.home-skin-edu .home-rubro-cta-btn {
    background: var(--skin-edu, #7d9bc9);
    border-color: var(--skin-edu, #7d9bc9);
    color: #1c2940;
}
body.home-skin-edu .home-rubro-cta-section {
    background:
        radial-gradient(120% 120% at 12% 100%, rgba(125, 155, 201, 0.16) 0%, transparent 55%),
        linear-gradient(135deg, #1c2940 0%, #131d2e 100%) !important;
}
body.home-skin-edu .home-rubro-cta-eyebrow { color: var(--skin-edu, #7d9bc9); }

/* ---- /Courses/Info edu: hero azul tinta + glow + glifos + onda al paper ---- */
body.home-skin-edu .sda-pd-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(165deg, #243650 0%, #1c2940 52%, #131d2e 100%);
    padding-top: 6.5rem;
    padding-bottom: 4rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}
body.home-skin-edu .sda-pd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 86% 8%, rgba(70, 97, 140, 0.22) 0%, transparent 58%);
    pointer-events: none;
}
body.home-skin-edu .sda-pd-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 48px;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,28 C220,52 440,8 660,18 C880,28 1080,56 1280,30 L1280,60 Z' fill='%23f6f3f6'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
body.home-skin-edu .sda-pd-hero-left,
body.home-skin-edu .sda-pd-cover-wrap { position: relative; z-index: 2; }
body.home-skin-edu .sda-pd-hero-title,
body.home-skin-edu .sda-pd-hero-tagline,
body.home-skin-edu .sda-pd-hero-stat { color: #fff; }
body.home-skin-edu .sda-pd-hero-title em { color: var(--skin-edu, #7d9bc9); }
body.home-skin-edu .sda-pd-hero-stat i { color: var(--skin-edu, #7d9bc9); }
body.home-skin-edu .sda-pd-hero .sda-pd-badge { color: #fff; background: rgba(255, 255, 255, 0.14); }
body.home-skin-edu .sda-pd-cover-box { border-radius: var(--radius-lg, 20px); }
@media (max-width: 991.98px) {
    body.home-skin-edu .sda-pd-hero { padding-top: 2.5rem; }
}

/* ---- Decoración edu (glifos académicos flotantes): home + Info ---- */
body.home-skin-edu .home-hero-banner .hero-edu-deco,
body.home-skin-edu .sda-pd-hero .hero-edu-deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.hero-edu-deco-item {
    position: absolute;
    color: var(--skin-edu, #7d9bc9);
    opacity: var(--edu-opacity, 0.3);
    animation: hero-edu-float var(--edu-float-duration, 6s) ease-in-out infinite,
               hero-edu-twinkle var(--edu-twinkle-duration, 2.4s) ease-in-out infinite;
}
@keyframes hero-edu-float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-22px) rotate(5deg); }
}
@keyframes hero-edu-twinkle {
    0%, 100% { opacity: calc(var(--edu-opacity, 0.3) * 0.55); }
    50% { opacity: var(--edu-opacity, 0.3); filter: brightness(var(--edu-brightness, 1.3)); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-edu-deco-item { animation: none; }
}

/* ============================================================================
   SKIN OTROS / MULTIDISCIPLINAR — neutro/agnóstico: periwinkle (#a9b6ff) + slate
   sobre azul noche (#1e2438). Estructura igual a música/fit; deco = red de nodos.
   ============================================================================ */
body.home-skin-otros {
    /* Periwinkle PROFUNDO (#3a44a0) como acento legible sobre superficies CLARAS;
       el periwinkle claro (#a9b6ff) es el "pop" sobre superficies oscuras. */
    --theme-primary: #3a44a0;
    --theme-primary-rgb: 58, 68, 160;
    --theme-primary-interactive: #5560c4;
    --theme-navbar: #1e2438;
    --theme-navbar-rgb: 30, 36, 56;
    --theme-secondary: #6b7693;
    --theme-secondary-rgb: 107, 118, 147;
    --theme-background: #f4f5f8;
    --theme-footer: #151a29;
    --bs-primary: #3a44a0;
    --bs-primary-rgb: 58, 68, 160;
    --skin-peri: #a9b6ff;
}

/* ---- Navbar otros: blanco sobre el hero azul noche; glass claro al scrollear ---- */
body.home-skin-otros .sweet-navbar { background-color: transparent !important; box-shadow: none; }
body.home-skin-otros .sweet-navbar.nav-scrolled {
    background-color: rgba(244, 245, 248, 0.92) !important;
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 1px 0 rgba(30, 36, 56, 0.08);
}
body.home-skin-otros .sweet-navbar .navbar-brand,
body.home-skin-otros .sweet-navbar .navbar-brand.text-white,
body.home-skin-otros .sweet-navbar .nav-link { color: #fff !important; }
body.home-skin-otros .sweet-navbar.nav-scrolled .navbar-brand,
body.home-skin-otros .sweet-navbar.nav-scrolled .nav-link { color: var(--theme-quaternary, #1e2438) !important; }
body.home-skin-otros .sweet-navbar.nav-scrolled .nav-link:hover { color: var(--theme-primary-interactive, #5560c4) !important; }
body.home-skin-otros .sweet-navbar.nav-scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(30,36,56,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
body.home-skin-otros .arte-nav-auth-btn--register {
    background: var(--skin-peri, #a9b6ff);
    color: #1e2438;
    border-color: var(--skin-peri, #a9b6ff);
}
@media (max-width: 991.98px) {
    body.home-skin-otros .sweet-navbar,
    body.home-skin-otros .sweet-navbar.nav-scrolled {
        background-color: rgba(30, 36, 56, 0.96) !important;
        backdrop-filter: blur(16px) saturate(1.3);
        box-shadow: 0 1px 0 rgba(169, 182, 255, 0.18);
    }
    body.home-skin-otros .sweet-navbar .navbar-brand,
    body.home-skin-otros .sweet-navbar .navbar-brand.text-white,
    body.home-skin-otros .sweet-navbar.nav-scrolled .navbar-brand,
    body.home-skin-otros .sweet-navbar.nav-scrolled .navbar-brand.text-white { color: #fff !important; }
    body.home-skin-otros .sweet-navbar .nav-link,
    body.home-skin-otros .sweet-navbar.nav-scrolled .nav-link { color: var(--skin-peri, #a9b6ff) !important; }
    body.home-skin-otros .sweet-navbar .nav-link:hover,
    body.home-skin-otros .sweet-navbar .nav-link.active { color: #fff !important; }
    body.home-skin-otros .sweet-navbar .navbar-collapse {
        background-color: rgba(30, 36, 56, 0.98);
        border: 1px solid rgba(169, 182, 255, 0.22);
        border-radius: 0 0 16px 16px;
        margin-top: 0.5rem;
        padding: 0.5rem 1rem 1rem;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
    }
    body.home-skin-otros .sweet-navbar .navbar-toggler { border-color: rgba(255, 255, 255, 0.22); }
    body.home-skin-otros .sweet-navbar .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    body.home-skin-otros .arte-nav-auth-btn--login {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.35);
    }
    body.home-skin-otros .arte-nav-auth-btn--login:hover,
    body.home-skin-otros .arte-nav-auth-btn--login:focus {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
}

/* ---- Home hero otros (centrado, azul noche + red de nodos): acentos periwinkle ---- */
body.home-skin-otros .home-hero-rubro-layout { padding-top: 6.5rem; }
@media (max-width: 991.98px) {
    body.home-skin-otros .home-hero-rubro-layout { padding-top: 2.5rem; }
}
body.home-skin-otros .home-hero-banner { --hero-bg: linear-gradient(165deg, #2a3252 0%, #1e2438 52%, #151a29 100%); }
body.home-skin-otros .home-hero-banner::before {
    background: radial-gradient(circle at 86% 6%, rgba(169, 182, 255, 0.22) 0%, transparent 60%);
}
body.home-skin-otros .home-hero-banner::after {
    background: radial-gradient(circle at 6% 100%, rgba(107, 118, 147, 0.22) 0%, transparent 60%);
}
body.home-skin-otros .home-hero-banner .home-hero-badge {
    color: var(--skin-peri, #a9b6ff) !important;
    border-color: currentColor !important;
    background: rgba(169, 182, 255, 0.12) !important;
}
body.home-skin-otros .home-hero-banner .home-hero-title em {
    color: var(--skin-peri, #a9b6ff);
    text-shadow: 0 0 28px rgba(169, 182, 255, 0.45);
}
body.home-skin-otros .home-hero-banner .home-hero-btn-a {
    background: var(--skin-peri, #a9b6ff) !important;
    color: #1e2438 !important;
    border-color: var(--skin-peri, #a9b6ff) !important;
}
body.home-skin-otros .home-hero-banner .home-hero-btn-a:hover,
body.home-skin-otros .home-hero-banner .home-hero-btn-a:focus {
    background: #c0caff !important;
    color: #1e2438 !important;
    border-color: #c0caff !important;
}
body.home-skin-otros .home-hero-banner .home-hero-btn-b {
    background: transparent !important;
    color: var(--skin-peri, #a9b6ff) !important;
    border-color: rgba(169, 182, 255, 0.5) !important;
}
body.home-skin-otros .home-hero-banner .home-hero-btn-b:hover,
body.home-skin-otros .home-hero-banner .home-hero-btn-b:focus {
    background: rgba(169, 182, 255, 0.1) !important;
    color: var(--skin-peri, #a9b6ff) !important;
    border-color: rgba(169, 182, 255, 0.5) !important;
}
body.home-skin-otros .home-rubro-strip { background: #5560c4; color: #fff; }
body.home-skin-otros .student-primary-btn,
body.home-skin-otros .home-rubro-cta-btn {
    background: var(--skin-peri, #a9b6ff);
    border-color: var(--skin-peri, #a9b6ff);
    color: #1e2438;
}
body.home-skin-otros .home-rubro-cta-section {
    background:
        radial-gradient(120% 120% at 12% 100%, rgba(169, 182, 255, 0.16) 0%, transparent 55%),
        linear-gradient(135deg, #1e2438 0%, #151a29 100%) !important;
}
body.home-skin-otros .home-rubro-cta-eyebrow { color: var(--skin-peri, #a9b6ff); }

/* ---- /Courses/Info otros: hero azul noche + glow + red de nodos + onda al paper ---- */
body.home-skin-otros .sda-pd-hero {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background: linear-gradient(165deg, #2a3252 0%, #1e2438 52%, #151a29 100%);
    padding-top: 6.5rem;
    padding-bottom: 4rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}
body.home-skin-otros .sda-pd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 86% 8%, rgba(169, 182, 255, 0.2) 0%, transparent 58%);
    pointer-events: none;
}
body.home-skin-otros .sda-pd-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 48px;
    z-index: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 60' preserveAspectRatio='none'%3E%3Cpath d='M0,60 L0,28 C220,52 440,8 660,18 C880,28 1080,56 1280,30 L1280,60 Z' fill='%23f4f5f8'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}
body.home-skin-otros .sda-pd-hero-left,
body.home-skin-otros .sda-pd-cover-wrap { position: relative; z-index: 2; }
body.home-skin-otros .sda-pd-hero-title,
body.home-skin-otros .sda-pd-hero-tagline,
body.home-skin-otros .sda-pd-hero-stat { color: #fff; }
body.home-skin-otros .sda-pd-hero-title em { color: var(--skin-peri, #a9b6ff); }
body.home-skin-otros .sda-pd-hero-stat i { color: var(--skin-peri, #a9b6ff); }
body.home-skin-otros .sda-pd-hero .sda-pd-badge { color: #fff; background: rgba(255, 255, 255, 0.14); }
body.home-skin-otros .sda-pd-cover-box { border-radius: var(--radius-lg, 20px); }
@media (max-width: 991.98px) {
    body.home-skin-otros .sda-pd-hero { padding-top: 2.5rem; }
}

/* ---- Decoración otros (red de nodos SVG): home + Info ---- */
body.home-skin-otros .home-hero-banner .hero-net,
body.home-skin-otros .sda-pd-hero .hero-net {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.5;
    overflow: hidden;
    pointer-events: none;
}
.hero-net svg { width: 100%; height: 100%; display: block; }
.hero-net line { stroke: rgba(169, 182, 255, 0.35); stroke-width: 1; }
.hero-net circle { fill: var(--skin-peri, #a9b6ff); }
.hero-net .hero-net-dot {
    animation: hero-net-pulse 3.5s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
@keyframes hero-net-pulse {
    0%, 100% { opacity: 0.4; r: 3; }
    50% { opacity: 1; r: 5; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-net .hero-net-dot { animation: none; }
}

/* ============================================================================
   AJUSTES COMPARTIDOS (todos los rubros skineados)
   ============================================================================ */
/* Botón "Ingresar" del nav: el auth aparece sobre superficies CLARAS (nav glass al
   scrollear / menú mobile), así que texto y borde oscuros para que se lea. */
body.home-public .arte-nav-auth-btn--login {
    color: var(--theme-quaternary, #343a40);
    border-color: rgba(0, 0, 0, 0.22);
}
body.home-public .arte-nav-auth-btn--login:hover,
body.home-public .arte-nav-auth-btn--login:focus {
    background: rgba(0, 0, 0, 0.05);
    color: var(--theme-quaternary, #343a40);
}

/* CTA "No postergues..." como rectángulo redondeado CONTENIDO (no full-bleed), en
   todos los layouts — estilo tarjeta del template. */
#homeScroll > .home-rubro-cta-section {
    width: min(1140px, 92%) !important;
    max-width: 1140px;
    margin: 3.5rem auto !important;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 3.5rem) !important;
    border-radius: var(--theme-radius-lg, 28px) !important;
}

/* ============================================================================
   ANCHO DEL CONTENIDO DEL HERO = .container del navbar (todos los layouts).
   El fondo del hero sigue full-bleed; solo el contenido se alinea a los bordes
   del contenido del navbar, replicando los breakpoints de Bootstrap .container
   (igual que el footer). Arte usa max-width en la grilla; el hero centrado e Info
   usan padding-inline = (100% - container)/2 + 12px (el inset del .container).
   ============================================================================ */
.home-hero-arte-grid { width: 100%; max-width: 100%; margin-inline: auto; padding-inline: 12px; }
/* Home hero centrado: su contenedor padre YA es del ancho visible del body, así que
   el % del padding se resuelve bien (alineación exacta con el .container del navbar). */
body.home-public .home-hero-rubro-layout:not(.home-hero-arte-split) { padding-inline: 1rem; }
/* Info de curso: el hero es full-bleed (width:100vw; margin-left:calc(-50vw+50%)) y su
   contenedor padre es ANGOSTO, así que un padding en % se resuelve contra el padre (mal,
   el contenido se iba a los bordes). Usamos 100vw: el offset del scrollbar que mete el
   margin-left se cancela con el de 100vw, quedando el contenido alineado al navbar. */
body.home-public .sda-pd-hero { padding-inline: 1rem; }
@media (min-width: 576px) {
    .home-hero-arte-grid { max-width: 540px; }
    body.home-public .home-hero-rubro-layout:not(.home-hero-arte-split) { padding-inline: max(12px, calc((100% - 540px) / 2 + 12px)); }
    body.home-public .sda-pd-hero { padding-inline: max(1rem, calc((100vw - 540px) / 2 + 12px)); }
}
@media (min-width: 768px) {
    .home-hero-arte-grid { max-width: 720px; }
    body.home-public .home-hero-rubro-layout:not(.home-hero-arte-split) { padding-inline: max(12px, calc((100% - 720px) / 2 + 12px)); }
    body.home-public .sda-pd-hero { padding-inline: max(1rem, calc((100vw - 720px) / 2 + 12px)); }
}
@media (min-width: 992px) {
    .home-hero-arte-grid { max-width: 960px; }
    body.home-public .home-hero-rubro-layout:not(.home-hero-arte-split) { padding-inline: max(12px, calc((100% - 960px) / 2 + 12px)); }
    body.home-public .sda-pd-hero { padding-inline: max(1rem, calc((100vw - 960px) / 2 + 12px)); }
}
@media (min-width: 1200px) {
    .home-hero-arte-grid { max-width: 1140px; }
    body.home-public .home-hero-rubro-layout:not(.home-hero-arte-split) { padding-inline: max(12px, calc((100% - 1140px) / 2 + 12px)); }
    body.home-public .sda-pd-hero { padding-inline: max(1rem, calc((100vw - 1140px) / 2 + 12px)); }
}
@media (min-width: 1400px) {
    .home-hero-arte-grid { max-width: 1320px; }
    body.home-public .home-hero-rubro-layout:not(.home-hero-arte-split) { padding-inline: max(12px, calc((100% - 1320px) / 2 + 12px)); }
    body.home-public .sda-pd-hero { padding-inline: max(1rem, calc((100vw - 1320px) / 2 + 12px)); }
}