/* ============================================================================
   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;
    --theme-on-footer: #ffffff;       /* footer oscuro del público -> texto/iconos claros */
    --theme-on-footer-rgb: 255, 255, 255;
    /* (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;
}
/* Botón hamburguesa: la nav de arte es clara, así que el toggler va como pill
   blanca con el ícono en tinta. `filter: none` es obligatorio: site.css fuerza
   `brightness(0) invert(1)` sobre .navbar-toggler-icon (ícono blanco para las
   navs oscuras) y sin anularlo estos trazos oscuros se invierten a blanco y
   desaparecen sobre la barra glass.
   TODO el bloque va dentro del breakpoint mobile: el toggler no existe en
   desktop (navbar-expand-lg lo esconde con `display: none`) y estas reglas le
   ganan en especificidad, así que fuera de la media query reaparecía en web. */
@media (max-width: 991.98px) {
    body.home-skin-arte .sweet-navbar .navbar-toggler {
        background: #fff;
        border: 1px solid rgba(52, 58, 64, 0.14);
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    }
    body.home-skin-arte .sweet-navbar .navbar-toggler:hover,
    body.home-skin-arte .sweet-navbar .navbar-toggler:focus {
        border-color: rgba(52, 58, 64, 0.3);
    }
    body.home-skin-arte .sweet-navbar .navbar-toggler-icon {
        filter: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3e%3cpath stroke='%23343a40' stroke-linecap='round' stroke-width='2.2' d='M3 5.5h16M3 11h16M3 16.5h16'/%3e%3c/svg%3e");
    }
    /* Abierto: el mismo botón pasa a "X" en acento (Bootstrap mantiene
       aria-expanded en el trigger del collapse). */
    body.home-skin-arte .sweet-navbar .navbar-toggler[aria-expanded="true"] {
        background: rgba(158, 208, 197, 0.25);
        border-color: rgba(47, 122, 108, 0.25);
        box-shadow: none;
    }
    body.home-skin-arte .sweet-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath stroke='%232f7a6c' stroke-linecap='round' stroke-width='2.2' d='M4 4l12 12M16 4L4 16'/%3e%3c/svg%3e");
    }
}

/* Avatar-trigger del menú de usuario: sobre la barra clara de arte el blanco
   translúcido no se ve, va con tinte del acento. */
body.home-skin-arte .sweet-navbar .navbar-avatar-toggle {
    background: rgba(158, 208, 197, 0.2);
    border-color: rgba(52, 58, 64, 0.14);
}

/* 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;
}

/* ============================================================
   MENÚ HAMBURGUESA MOBILE — GEOMETRÍA COMÚN A TODOS LOS RUBROS
   (rediseño 2026-07)
   Antes los ítems salían como links subrayados con espaciado enorme y los CTAs
   con ancho de contenido. Acá va SOLO la forma (filas de 48px, radios, orden y
   ancho de los CTAs); el color lo pone cada skin más abajo, por eso este bloque
   va primero en el archivo y no define ni `color` ni `background`.
   ============================================================ */
@media (max-width: 991.98px) {
    body.home-public .sweet-navbar .navbar-collapse .navbar-nav {
        gap: 0;
    }

    body.home-public .sweet-navbar .navbar-collapse .nav-link {
        display: flex;
        align-items: center;
        min-height: 48px; /* tap target */
        padding: 0 14px;
        border-radius: 14px;
        font-weight: 600;
        font-size: 16px;
        text-decoration: none;
        opacity: 1;
    }

    /* CTAs: ancho completo, Registrarme primero. El li de Registrarme es el
       último del ul (ver _Layout.cshtml); se reordena con flex sin tocar el
       orden del markup, que es el que vale en desktop. */
    body.home-public .sweet-navbar .navbar-collapse .arte-nav-auth {
        display: block;
        order: 2;
        margin: 10px 0 0;
        padding: 0 2px;
    }

    body.home-public .sweet-navbar .navbar-collapse .arte-nav-auth:last-child {
        order: 1;
        margin-top: 0;
    }

    /* Separador entre la navegación y los CTAs (va sobre el primero visual). */
    body.home-public .sweet-navbar .navbar-collapse .arte-nav-auth:last-child::before {
        content: "";
        display: block;
        height: 1px;
        background: currentColor;
        opacity: 0.12;
        margin: 12px 4px;
    }

    body.home-public .sweet-navbar .navbar-collapse .arte-nav-auth-btn {
        width: 100%;
        min-height: 46px;
        border-radius: 999px;
        font-size: 15.5px;
        font-weight: 600;
    }

    /* Botón hamburguesa: pill de 44×44 con ícono de 22px en todos los rubros.
       El color lo define cada grupo (arte claro / resto oscuro) más abajo. */
    body.home-public .sweet-navbar .navbar-toggler {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 12px;
    }

    body.home-public .sweet-navbar .navbar-toggler-icon {
        width: 22px;
        height: 22px;
    }
}

/* Mobile, skin arte: panel glass claro colgado de la barra. Los colores acá son
   los de arte; la forma sale del bloque genérico de arriba. */
@media (max-width: 991.98px) {
    body.home-skin-arte .sweet-navbar .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(18px) saturate(1.4);
        border-radius: 0 0 22px 22px;
        margin-top: 0.5rem;
        padding: 8px 12px 12px;
        box-shadow: 0 18px 40px rgba(52, 58, 64, 0.18);
    }

    body.home-skin-arte .sweet-navbar .navbar-collapse .nav-link {
        color: #343a40 !important;
    }

    body.home-skin-arte .sweet-navbar .navbar-collapse .nav-link:hover,
    body.home-skin-arte .sweet-navbar .navbar-collapse .nav-link:focus {
        background: rgba(52, 58, 64, 0.05);
        color: #2f7a6c !important;
        opacity: 1;
    }

    /* Activo: el JS del layout marca .active por pathname, y en la home pública
       todos los ítems son anclas al mismo pathname (los marca a todos). Por eso
       el pill de "página actual" se limita al primer ítem (Inicio), que es el
       único caso en que el resaltado es correcto. */
    body.home-skin-arte .sweet-navbar .navbar-collapse .nav-item:first-child .nav-link.active {
        background: rgba(158, 208, 197, 0.22);
        color: #2f7a6c !important;
        font-weight: 700;
    }

    body.home-skin-arte .sweet-navbar .navbar-collapse .arte-nav-auth:last-child::before {
        background: rgba(52, 58, 64, 0.1);
        opacity: 1;
    }

    body.home-skin-arte .sweet-navbar .navbar-collapse .arte-nav-auth-btn--register {
        box-shadow: 0 8px 22px rgba(52, 58, 64, 0.22);
    }

    body.home-skin-arte .sweet-navbar .navbar-collapse .arte-nav-auth-btn--login {
        background: #fff;
    }
}

/* ============================================================
   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 6rem;
    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: #fff;
    color: #25313f;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 22px 70px rgba(15, 23, 42, 0.22);
}
.home-hero-artwork-modal .modal-dialog { max-width: min(720px, calc(100vw - 2rem)); }
.home-hero-artwork-modal .modal-header {
    padding: 0.9rem 1rem;
    border-bottom-color: rgba(15, 23, 42, 0.08);
}
.home-hero-artwork-modal .modal-title {
    font-size: 1rem;
    font-weight: 600;
    color: #25313f;
}
.home-hero-artwork-modal .modal-body {
    padding: 0.85rem;
}
.home-hero-artwork-modal__image {
    width: 100%;
    max-height: min(76vh, 760px);
    object-fit: contain;
    display: block;
    border-radius: 8px;
    background: #f8fafc;
}

@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 8rem; }
    .home-hero-arte-meta {
        justify-content: center;
        position: relative;      /* crea contexto propio por encima de la onda */
        z-index: 3;              /* los bullets NUNCA quedan tapados por la onda */
        margin-bottom: 1.4rem;   /* aire mínimo garantizado entre bullets y onda */
    }
    /* Onda más baja y suave en mobile: su cresta ya no llega a la fila de bullets. */
    .home-hero-arte-wave { height: 34px; }
}

/* ============================================================
   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; }
/* Patrón tabs + detalle: la grilla queda como selector (icono + título) y la
   descripción vive SOLO en el panel rotador de al lado, para no duplicar el texto
   que ya muestra la slide activa. El JS sigue leyendo el <p> (display:none no
   afecta textContent) para armar las slides. */
.home-rubro-benefits .home-benefit-card p { display: none; }
.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);
}
/* ★ del promedio: es rating, va dorada. Selector con `b` (0,2,1) para ganarle
   a `.home-docente-stat span` (0,1,1), que si no la manda a línea aparte y la
   pinta de gris; por eso también los resets de display/margin/tamaño. */
.home-docente-stat b .home-docente-stat__star {
    display: inline;
    margin-top: 0;
    font-size: inherit;
    color: var(--theme-star-color, #f4b400);
    text-shadow: 0 0 0.01px rgba(138, 101, 0, 0.35);
}
@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; }
}

/* ---- /Courses/Info arte en PRESET OSCURO (dark mode real) ----
   La skin arte fija la estética clara (hero pastel + --theme-background crema).
   Cuando el tenant está en preset oscuro (body.theme-mode-dark), la vista de
   producto honra el modo: las cards y el price-head ya oscurecen solos
   (product-details.css deriva de --theme-surface, que el server emite dark en
   :root). Acá oscurecemos lo que la skin dejaba fijo claro —fondo de página y
   gradiente del hero— para que el texto claro (--theme-on-surface) contraste.
   Scope: .sda-pd/.sda-pd-hero solo existen en /Courses/Info (la HOME arte usa
   .home-layout-rubro), y .theme-mode-dark acota al preset oscuro; el preset
   claro conserva intacto el pastel de arriba. */
/* El <body> hereda --theme-background de la skin (#faf7f4 crema); en oscuro eso
   asomaba como franja clara arriba del hero, detrás del navbar transparente y en
   el padding-top del nav en mobile. Redefinimos el token a la rampa oscura SOLO en
   la vista de producto (:has(.sda-pd) ⇒ excluye la HOME, que comparte la skin) para
   que el fondo de página oscurezca junto con las cards. */
body.home-skin-arte.theme-mode-dark:has(.sda-pd) {
    --theme-background: var(--theme-page-bg, #12161d);
}
body.home-skin-arte.theme-mode-dark .sda-pd {
    background: var(--theme-page-bg, #12161d); /* dark del server, no el crema de la skin */
}
body.home-skin-arte.theme-mode-dark .sda-pd-hero {
    /* Banda oscura tenue tintada entre los acentos de la skin (mint + rosa), un
       poco más clara que el fondo para que el hero se lea como banda. */
    background: linear-gradient(125deg,
        color-mix(in srgb, var(--theme-primary, #9ed0c5) 22%, var(--theme-surface, #1b2230)) 0%,
        var(--theme-surface, #1b2230) 55%,
        color-mix(in srgb, var(--theme-secondary, #e58fc0) 18%, var(--theme-surface, #1b2230)) 100%);
}
/* El glow blanco y la onda crema son decoración de la estética clara: en oscuro
   el glow sería un flash y la onda empalmaría con un crema inexistente. */
body.home-skin-arte.theme-mode-dark .sda-pd-hero::before { background: none; }
body.home-skin-arte.theme-mode-dark .sda-pd-hero::after {
    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='%2312161d'/%3E%3C/svg%3E") no-repeat;
    background-size: 100% 100%;
}
/* Hardening: contraste explícito del texto/badges del hero arte-oscuro, para no
   depender solo de que product-details.css flipee --sda-pd-ink (si un tenant pisa
   la rampa neutra el texto podría quedar bajo). Espeja el criterio de la skin tech;
   todo deriva de --theme-on-surface / --theme-brand-accent con fallbacks oscuros. */
body.home-skin-arte.theme-mode-dark .sda-pd-hero-title {
    color: var(--theme-on-surface, #e8edf5);
}
body.home-skin-arte.theme-mode-dark .sda-pd-hero-tagline,
body.home-skin-arte.theme-mode-dark .sda-pd-hero-stat {
    color: color-mix(in srgb, var(--theme-on-surface, #e8edf5) 82%, transparent);
}
body.home-skin-arte.theme-mode-dark .sda-pd-hero-stat i {
    color: var(--theme-brand-accent, #a8dccf);
}
body.home-skin-arte.theme-mode-dark .sda-pd-badge-type,
body.home-skin-arte.theme-mode-dark .sda-pd-badge-open {
    background: color-mix(in srgb, var(--theme-on-surface, #e8edf5) 14%, transparent);
    color: var(--theme-on-surface, #e8edf5);
    border-color: color-mix(in srgb, var(--theme-on-surface, #e8edf5) 18%, transparent);
}

/* ============================================================================
   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;
    --theme-on-footer: #ffffff;       /* footer oscuro del público -> texto/iconos claros */
    --theme-on-footer-rgb: 255, 255, 255;
    --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: #0c1014;
    color: #e6f7ee;
    border-top: 1px solid rgba(0, 255, 136, 0.22);
    border-bottom: 1px solid rgba(0, 255, 136, 0.22);
}
body.home-skin-tech .home-rubro-strip-item i { color: var(--skin-neon, #00ff88); }
/* 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;
    --theme-on-footer: #ffffff;       /* footer oscuro del público -> texto/iconos claros */
    --theme-on-footer-rgb: 255, 255, 255;
    --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;
}
/* Las capas (.hero-*) se movieron a hero-deco.css: las comparte la home del
   alumno logueado, que monta el mismo markup. Aca queda solo el gate/posicion
   por rubro de arriba. */

/* ============================================================================
   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;
    --theme-on-footer: #ffffff;       /* footer oscuro del público -> texto/iconos claros */
    --theme-on-footer-rgb: 255, 255, 255;
    --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;
}
/* Las capas (.hero-*) se movieron a hero-deco.css: las comparte la home del
   alumno logueado, que monta el mismo markup. Aca queda solo el gate/posicion
   por rubro de arriba. */

/* ============================================================================
   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;
    --theme-on-footer: #ffffff;       /* footer oscuro del público -> texto/iconos claros */
    --theme-on-footer-rgb: 255, 255, 255;
    --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;
}
/* Las capas (.hero-*) se movieron a hero-deco.css: las comparte la home del
   alumno logueado, que monta el mismo markup. Aca queda solo el gate/posicion
   por rubro de arriba. */

/* ============================================================================
   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;
    --theme-on-footer: #ffffff;       /* footer oscuro del público -> texto/iconos claros */
    --theme-on-footer-rgb: 255, 255, 255;
    --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;
}
/* Las capas (.hero-*) se movieron a hero-deco.css: las comparte la home del
   alumno logueado, que monta el mismo markup. Aca queda solo el gate/posicion
   por rubro de arriba. */

/* ============================================================================
   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;
    --theme-on-footer: #ffffff;       /* footer oscuro del público -> texto/iconos claros */
    --theme-on-footer-rgb: 255, 255, 255;
    --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;
}
/* Las capas (.hero-*) se movieron a hero-deco.css: las comparte la home del
   alumno logueado, que monta el mismo markup. Aca queda solo el gate/posicion
   por rubro de arriba. */

/* ============================================================================
   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;
    --theme-on-footer: #ffffff;       /* footer oscuro del público -> texto/iconos claros */
    --theme-on-footer-rgb: 255, 255, 255;
    --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;
}
/* Las capas (.hero-*) se movieron a hero-deco.css: las comparte la home del
   alumno logueado, que monta el mismo markup. Aca queda solo el gate/posicion
   por rubro de arriba. */

/* ============================================================================
   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)); }
}

/* 6 áreas → 3×2 pareja (evita la card huérfana) en todos los rubros */
.home-layout-rubro .home-rubros-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 860px) { .home-layout-rubro .home-rubros-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home-layout-rubro .home-rubros-grid { grid-template-columns: 1fr; } }

/* ============================================================
   MENÚ HAMBURGUESA MOBILE — RUBROS DE NAV OSCURA
   (todos menos arte: técnica, tecnología, negocios, música, fitness,
   educación y otros; sus paneles son ink/oscuro con un acento por rubro)

   Va al final del archivo a propósito: cada skin define arriba el color de sus
   links y de su panel, y acá solo se corrigen los estados que ninguna definía
   (hover, activo) más el "Ingresar", que quedaba ilegible — la regla genérica
   `body.home-public .arte-nav-auth-btn--login` le pinta tinta oscura sobre el
   panel oscuro y, al tener la misma especificidad que las reglas por skin pero
   estar después en el archivo, les ganaba.
   ============================================================ */
@media (max-width: 991.98px) {
    /* Hover/foco: velo claro, sin depender del acento de cada rubro. */
    body.home-public:not(.home-skin-arte) .sweet-navbar .navbar-collapse .nav-link:hover,
    body.home-public:not(.home-skin-arte) .sweet-navbar .navbar-collapse .nav-link:focus {
        background: rgba(255, 255, 255, 0.08);
        opacity: 1;
    }

    /* Activo: solo el primer ítem (Inicio). El JS del layout marca .active por
       pathname y en la home pública todos los ítems son anclas al mismo path. */
    body.home-public:not(.home-skin-arte) .sweet-navbar .navbar-collapse .nav-item:first-child .nav-link.active {
        background: rgba(255, 255, 255, 0.12);
        font-weight: 700;
    }

    /* Separador antes de los CTAs: claro sobre el panel oscuro. */
    body.home-public:not(.home-skin-arte) .sweet-navbar .navbar-collapse .arte-nav-auth:last-child::before {
        background: rgba(255, 255, 255, 0.16);
        opacity: 1;
    }

    /* "Ingresar": contorno claro legible sobre el panel oscuro. */
    body.home-public:not(.home-skin-arte) .sweet-navbar .navbar-collapse .arte-nav-auth-btn--login {
        background: transparent;
        color: #fff;
        border-color: rgba(255, 255, 255, 0.4);
    }

    body.home-public:not(.home-skin-arte) .sweet-navbar .navbar-collapse .arte-nav-auth-btn--login:hover,
    body.home-public:not(.home-skin-arte) .sweet-navbar .navbar-collapse .arte-nav-auth-btn--login:focus {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.55);
    }

    /* Botón hamburguesa: pill translúcida con ícono blanco (la forma sale del
       bloque genérico). `filter: none` para que el ícono no dependa del
       brightness/invert que site.css aplica a .navbar-toggler-icon. */
    body.home-public:not(.home-skin-arte) .sweet-navbar .navbar-toggler {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.28);
        box-shadow: none;
    }

    body.home-public:not(.home-skin-arte) .sweet-navbar .navbar-toggler-icon {
        filter: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-width='2.2' d='M3 5.5h16M3 11h16M3 16.5h16'/%3e%3c/svg%3e");
    }

    /* Abierto: pasa a "X". */
    body.home-public:not(.home-skin-arte) .sweet-navbar .navbar-toggler[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.45);
    }

    body.home-public:not(.home-skin-arte) .sweet-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-width='2.2' d='M4 4l12 12M16 4L4 16'/%3e%3c/svg%3e");
    }
}