/* ============================================
    1. AJUSTES GLOBALES Y SCROLL
=============================================== */
html, body {
    overflow-y: scroll !important;
}

html {
    scrollbar-gutter: stable !important;
}

/* ============================================
    2. CABECERA Y CUERPO (BACKGROUNDS)
=============================================== */
header.header, .container-header, .site-grid > header, header, .site-header, .navbar, .topbar {
    background: #0A1A2F !important;
    border-bottom: 1px solid #E2E8F0 !important;
    position: relative;
}

/* ============================================
    3. ANULACIÓN TOTAL DEL TÍTULO HEREDADO
=============================================== */
div.page-header, .item-page h1, .page-header h1, h1.page-title, .article-title, h1[itemprop="name"] {
    display: none !important;
}

/* ============================================
    4. CATEGORÍAS Y LISTADOS
=============================================== */
.category-module, .category-module * { text-align: center !important; }
.com-content-article .article-info, .com-content-category .category-info { display: none !important; }
.category-list .list-title a { color: #004080 !important; font-weight: 600; text-decoration: none; }

/* ============================================
    5. MENÚ PRINCIPAL (DJ-MEGAMENU)
=============================================== */
.dj-megamenu-toggler, .dj-mobile-menu-button { transform: scale(0.75) !important; }

.dj-megamenu > li > a {
    min-height: 44px;
    height: 44px;
    line-height: 44px;
    padding: 0 25px !important; 
    border: none !important;
    color: #FFFFFF !important;      
    font-weight: 500 !important;
    border-radius: 8px !important;
}

.dj-megamenu > li > a:hover {
    box-shadow: inset 0 0 0 2px #C9A45C !important; 
    color: #C9A45C !important; 
}


/* ============================================
    6. SIDEBARS Y MENÚS LATERALES
=============================================== */
.sidebar-menu {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    margin-bottom: 25px;
    border: 2px solid #C9A45C;
}

/* ============================================
    7. MEDIA QUERIES
=============================================== */
@media (max-width: 768px) { .site-grid { display: flex; flex-direction: column; } }
@media (min-width: 769px) {
    ul.dj-megamenu-nav { display: flex !important; justify-content: center !important; align-items: center !important; }
    .dj-megamenu-nav > li { margin: 0 9px !important; }
}


/* ============================================
    9. FIX PWA / iOS
=============================================== */
html, body { overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }

/* ============================================
    10. BOTONES ESPECIALES (CTA) - ESCRITORIO Y MÓVIL
=============================================== */

/* BOTONES PRIMARIOS: TRABAJAR CON IA y ESTUDIAR (Fondo Blanco) */
.dj-megamenu li a.btn-aula-domina,
.dj-megamenu li a.btn-trabajar-ia,
.dj-mobile-nav li a.btn-aula-domina,
.dj-mobile-nav li a.btn-trabajar-ia {
    background-color: #FFFFFF !important;
    color: #003366 !important;
    font-weight: 900 !important; 
    text-transform: uppercase !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    transition: all 0.2s ease-in-out !important;
}

/* BOTÓN LOGIN: RESALTADO DORADO (No compite con los blancos) */
.dj-megamenu li a.btn-login-secundario,
.dj-mobile-nav li a.btn-login-secundario {
    border: 2px solid #C9A45C !important; /* Dorado de marca */
    color: #C9A45C !important;
    background-color: rgba(201, 164, 92, 0.05) !important; /* Fondo sutil */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
}

.dj-megamenu li a.btn-login-secundario:hover,
.dj-mobile-nav li a.btn-login-secundario:hover {
    background-color: #C9A45C !important;
    color: #0A1A2F !important; /* Texto oscuro al pasar el mouse */
}

/* Ajustes específicos de escritorio */
@media (min-width: 769px) {
    .dj-megamenu li a.btn-aula-domina, .dj-megamenu li a.btn-trabajar-ia {
        padding: 0 20px !important;
        margin-left: 12px !important;
        height: 36px !important;
        margin-top: 4px !important;
    }
    .dj-megamenu li a.btn-login-secundario {
        padding: 0 15px !important;
        height: 34px !important;
        margin-top: 5px !important;
        margin-left: 10px !important;
    }
}

/* ============================================
    11. ESTILO MÓVIL (DJ-MOBILE)
=============================================== */
.dj-mobile-nav li a:not(.btn-aula-domina):not(.btn-login-secundario):not(.btn-trabajar-ia) {
    background-color: rgba(255, 255, 255, 0.05) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    margin: 4px 12px !important;
    padding: 12px 15px !important;
}

.dj-mobile-nav li a.btn-login-secundario,
.dj-mobile-nav li a.btn-aula-domina,
.dj-mobile-nav li a.btn-trabajar-ia {
    margin: 10px 12px !important;
    padding: 12px !important;
}

.dj-mobile-nav { background: #0A1A2F !important; width: 300px !important; }

/* =========================================================
   OVERRIDE QUIRÚRGICO: DJ-MEGAMENU (BLACK PREMIUM TOTAL L2 & L3)
   ========================================================= */

/* 1. Limpieza total de viñetas e íconos nativos en todos los niveles */
.dj-megamenu ul.dj-submenu li,
.dj-megamenu ul.dj-submenu li a {
    list-style: none !important;
    background-image: none !important;
    text-indent: 0 !important;
    margin: 0 !important;
}
.dj-megamenu ul.dj-submenu li::before, .dj-megamenu ul.dj-submenu li::after,
.dj-megamenu ul.dj-submenu li a::before, .dj-megamenu ul.dj-submenu li a::after {
    display: none !important; content: none !important;
}

/* 2. Contenedor Principal (Caja del Menú Nivel 2) */
.dj-megamenu ul.dj-submenu {
    background: #02060c !important; /* Negro absoluto de base */
    border-radius: 8px !important; /* Curvatura moderna */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important;
    padding: 8px 0 !important;
}

/* Matar fondos blancos residuales del Nivel 3 */
.dj-megamenu ul.dj-submenu ul {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. JERARQUÍA: NIVEL 2 (Padres: "IA Premium", "Informes Médicos") */
.dj-megamenu ul.dj-submenu > li > a {
    display: block !important;
    padding: 14px 24px !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important; /* Bold para jerarquía */
    color: #ffffff !important; /* Blanco puro */
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

/* Hover Nivel 2 */
.dj-megamenu ul.dj-submenu > li > a:hover {
    color: #D4AF37 !important;
    background: rgba(255, 255, 255, 0.03) !important; /* Tinte sutil */
    padding-left: 28px !important; /* Desplazamiento */
}

/* 4. JERARQUÍA: NIVEL 3 (Hijos: "Informe Ecografía Abdominal") */
.dj-megamenu ul.dj-submenu ul li > a {
    display: block !important;
    padding: 12px 24px 12px 42px !important; /* Indentación profunda */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: #a0aabf !important; /* Gris azulado para subordinación */
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.15, 0, 0.15, 1) !important;
    position: relative !important;
    text-decoration: none !important;
}

/* Indicador visual Nivel 3 (Línea minimalista) */
.dj-megamenu ul.dj-submenu ul li > a::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 24px !important;
    top: 50% !important;
    width: 6px !important;
    height: 1px !important;
    background: #5a6478 !important; /* Gris oscuro */
    transition: all 0.3s ease !important;
}

/* Hover Nivel 3 */
.dj-megamenu ul.dj-submenu ul li > a:hover {
    color: #ffffff !important; /* Ilumina a blanco puro */
    background: rgba(212, 175, 55, 0.05) !important; /* Glow dorado imperceptible */
    padding-left: 48px !important;
}

/* Animar la línea indicadora al Hover */
.dj-megamenu ul.dj-submenu ul li > a:hover::before {
    background: #D4AF37 !important; /* Se enciende en dorado */
    width: 12px !important; /* Se alarga indicando selección */
}

/* Limpieza de bordes finales */
.dj-megamenu ul.dj-submenu > li:last-child > a,
.dj-megamenu ul.dj-submenu ul li:last-child > a {
    border-bottom: none !important;
}
/* ============================================
   8. SUBCATEGORÍAS NATIVAS (HARVARD BLACK PREMIUM - ANIMATED GLOW)
   Sincronizado con user.js (.aula-info-wrapper y .aula-btn-pill)
=============================================== */

/* 1. Ocultar el encabezado global "Subcategorías" */
.category-children > h3,
.com-content-category-blog__children > h3,
.cat-children > h3 {
    display: none !important;
}

/* 2. Arquitectura Flexbox con FONDO OSCURO PREMIUM (Contenedor principal) */
.category-children,
.com-content-category-blog__children,
.com-content-category-blog__children > ul,
.cat-children {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 30px !important;
    list-style: none !important;
    padding: 60px 20px !important;
    margin: 40px auto !important;
    max-width: 1200px !important;
    background-color: #02060c !important; /* FONDO NEGRO ABSOLUTO DETRÁS */
    border-radius: 16px !important;
}

/* 3. Ocultar imágenes y descripción basura nativa */
.category-children img,
.com-content-category-blog__children img,
.cat-children img,
.category-children .category-desc,
.com-content-category-blog__children .category-desc,
.cat-children .category-desc {
    display: none !important;
}

/* 4. La Tarjeta (Estado Normal) */
.category-children > li,
.category-children > div,
.com-content-category-blog__children > ul > li,
.com-content-category-blog__children > div,
.cat-children > li {
    flex: 0 1 calc(33.333% - 20px) !important;
    min-width: 300px !important;
    max-width: 360px !important;
    background: #08111e !important; /* Azul Navy muy oscuro */
    border-radius: 16px !important;
    border: 1px solid rgba(212, 175, 55, 0.1) !important; 
    padding: 35px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.4s cubic-bezier(0.15, 0, 0.15, 1) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative; 
    overflow: hidden;
}

/* 5. ANIMACIÓN HOVER DE LA TARJETA (ILUMINACIÓN DORADA Y BORDES) */
.category-children > li:hover,
.category-children > div:hover,
.com-content-category-blog__children > ul > li:hover,
.com-content-category-blog__children > div:hover,
.cat-children > li:hover {
    transform: translateY(-10px) !important; 
    background: #02060c !important; 
    border: 1px solid #D4AF37 !important; 
    box-shadow: 0 0 30px 5px rgba(212, 175, 55, 0.4) !important; 
}

/* 6. COLOR BLANCO PARA LOS TÍTULOS (Blindado) */
.aula-info-wrapper h3,
.aula-info-wrapper .item-title,
.aula-info-wrapper h3 a,
.aula-info-wrapper .item-title a,
.category-children a:not(.aula-btn-pill),
.com-content-category-blog__children a:not(.aula-btn-pill),
.cat-children a:not(.aula-btn-pill) {
    display: block !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #ffffff !important; 
    margin: 0 0 25px 0 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    white-space: normal !important;
    transition: color 0.3s ease;
}

.category-children > li:hover .aula-info-wrapper h3 a {
    color: #ffffff !important; 
}

/* 7. Wrapper inyectado por tu JS */
.aula-info-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    justify-content: space-between !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 8. BOTÓN ELÉCTRICO DORADO (ESPECIFICIDAD MÁXIMA PARA APLASTAR A LA PLANTILLA) */
html body div .aula-info-wrapper a.aula-btn-pill {
    display: inline-flex !important;
    margin-top: auto !important;
    padding: 12px 24px !important;
    background: #ffffff !important; 
    color: #000000 !important; 
    
    /* BORDE Y GLOW HIPER VISIBLES */
    border: 3px solid #D4AF37 !important; 
    box-shadow: 0 0 20px 4px rgba(212, 175, 55, 0.8) !important; 
    
    border-radius: 40px !important; 
    font-weight: 900 !important;
    font-size: 0.95rem !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    width: fit-content !important;
    box-sizing: border-box !important;
    letter-spacing: 0.5px !important;
}

/* Hover del Botón (Glow Extremo) */
html body div .category-children > li:hover .aula-info-wrapper a.aula-btn-pill,
html body div .com-content-category-blog__children > ul > li:hover .aula-info-wrapper a.aula-btn-pill,
html body div .cat-children > li:hover .aula-info-wrapper a.aula-btn-pill {
    background: #D4AF37 !important;
    color: #000000 !important; 
    border-color: #D4AF37 !important;
    box-shadow: 0 0 30px 8px rgba(212, 175, 55, 1) !important; 
}
/* ============================================
   OVERRIDE GLOBAL: BOTONERA DE MÓDULOS (AZUL HARVARD)
   Aplasta el <style> interno de los artículos
=============================================== */

/* 1. Contenedor de la botonera (Fondo Azul Oscuro) */
html body .aula-container .tabs-nav {
    background-color: #020b18 !important; /* Azul/Navy muy oscuro */
    padding: 20px !important;
    border-radius: 12px !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* 2. Botones de Módulos (Azul Harvard) */
html body .aula-container .tabs-nav .tab-btn:not(.btn-update) {
    background-color: #003366 !important; 
    color: #ffffff !important;
    border: 1px solid #004a99 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

/* 3. Hover de los Botones (Se ilumina) */
html body .aula-container .tabs-nav .tab-btn:not(.btn-update):hover {
    background-color: #0050a0 !important; 
    border-color: #0050a0 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0, 80, 160, 0.4) !important;
}

/* 4. Botón Activo (Dorado Premium para indicar dónde está el alumno) */
html body .aula-container .tabs-nav .tab-btn.active:not(.btn-update) {
    background-color: #D4AF37 !important; 
    color: #000000 !important;
    border-color: #D4AF37 !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6) !important;
}
/* =========================================================
   OPERACIÓN QUIRÚRGICA: ELIMINACIÓN TOTAL DE MARCO BLANCO
   ========================================================= */

/* 1. Atacamos el contenedor de ID específico (máxima prioridad) */
#dj-megamenu-container .dj-megamenu-dropdown,
#dj-megamenu-container ul.dj-submenu,
.dj-megamenu-dropdown,
.dj-megamenu-dropdown-inner {
    background-color: transparent !important; /* Transparencia total al wrapper */
    background: none !important;
    border: none !important;
    box-shadow: none !important; /* Eliminamos sombras que parezcan bordes */
}

/* 2. Forzamos el fondo negro SOLO al elemento que tiene las curvas */
#dj-megamenu-container ul.dj-submenu {
    background: #02060c !important; 
    border-radius: 8px !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important; /* Borde dorado tenue */
    overflow: hidden !important; /* CLAVE: Corta las esquinas blancas del contenido hijo */
}

/* 3. Limpieza de items internos que puedan tener fondo blanco heredado */
#dj-megamenu-container ul.dj-submenu li,
#dj-megamenu-container ul.dj-submenu li a {
    background: transparent !important;
}
/* =========================================================
   OVERRIDE DE ALTA ESPECIFICIDAD: ANIQUILACIÓN DEL CREMA
   ========================================================= */


/* 3. Fix Membership Pro (Tarjetas Dark Premium) */
html body .mp-plans-container .mp-plan, 
html body .mp-plan-info-wrapper {
    background-color: #0a1120 !important; /* Slate Dark */
    border: 1px solid #1e293b !important;
}

html body h1, 
html body h2, 
html body h3, 
html body .mp-plan-title {
    color: var(--cassiopeia-color-link) !important;
}
/* =========================================================
   1. OVERRIDE GLOBAL DE ENLACES (PLANTILLA CASSIOPEIA)
   Mata el azul/violeta nativo en TODO el sitio web
   ========================================================= */

:root:root {
    --cassiopeia-color-link: #7a899c !important; 
    --cassiopeia-color-hover: #ffffff !important; /* Blanco al pasar el mouse */
}

/* Ataque directo a la etiqueta ancla en todos sus estados */
html body a,
html body a:link,
html body a:visited {
    color: #7a899c !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

html body a:hover,
html body a:focus {
    color: #ffffff !important;
}

/* Protección para que los botones con etiqueta <a> no se vuelvan grises */
html body a.btn, 
html body a[class*="btn-"] {
    color: #ffffff !important;
}

/* =========================================================
   2. MEMBERSHIP PRO: DESTRUCCIÓN DE TARJETAS Y BOTONES VERDES
   ========================================================= */

/* Atrapa componentes Bootstrap y contenedores genéricos del componente */
html body .com_osmembership .card,
html body .com_osmembership .well,
html body .com_osmembership .panel,
html body [class*="osmembership"] .card,
html body [class*="osmembership"] .well,
html body div[class*="-plan"],
html body div[class*="plan-container"],
html body .row > .col-md-6 > div,
html body .row > .col-md-4 > div {
    background-color: #0a1120 !important; /* Slate Dark */
    background: #0a1120 !important;
    border: 1px solid #1e293b !important;
    border-radius: 8px !important;
}

/* Evita que el fondo oscuro pise las cajas internas */
html body .com_osmembership .card .card,
html body [class*="osmembership"] div[style*="background-color: #"] {
    background-color: inherit; 
}

/* BOTONES: Destrucción de degradados verdes e inyección de Teal Siemens */
html body div[id*="membership"] .btn-success,
html body div[class*="membership"] .btn-success,
html body div[id*="membership"] .btn,
html body div[class*="membership"] .btn {
    background-color: #0d9488 !important; /* Teal Siemens */
    background-image: none !important;
    border: 1px solid #0f766e !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-shadow: none !important; 
    box-shadow: none !important; 
    background-repeat: no-repeat !important;
}

/* HOVER DEL BOTÓN: Mantener oscuro y plano */
html body div[id*="membership"] .btn-success:hover,
html body div[class*="membership"] .btn-success:hover,
html body div[id*="membership"] .btn:hover,
html body div[class*="membership"] .btn:hover {
    background-color: #0f766e !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* =========================================================
   3. BOTONES MEMBERSHIP PRO (AGREGAR AL FINAL)
   Arregla el texto invisible y aniquila el verde
   ========================================================= */

/* A. Botón COMPRAR (Fuerza Teal Siemens y mata el verde nativo) */
html body [class*="osmembership"] a.btn-primary,
html body [class*="osmembership"] a.btn-success,
html body [class*="osmembership"] button,
html body [class*="osmembership"] input.btn {
    background-color: #0d9488 !important; 
    background-image: none !important;
    border: 1px solid #0d9488 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}

/* B. Botón DETALLES (Fuerza fondo oscuro para que el texto se lea) */
html body [class*="osmembership"] a.btn:not(.btn-primary):not(.btn-success) {
    background-color: #1e293b !important; /* Slate Dark */
    background-image: none !important;
    border: 1px solid #334155 !important;
    color: #7a899c !important; 
    text-shadow: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

/* C. Hover unificado para todos los botones */
html body [class*="osmembership"] a.btn:hover {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}


/* =========================================================
   OVERRIDE GLOBAL DE BOTONES (PLANTILLA CASSIOPEIA / BOOTSTRAP)
   Aniquila el verde y aplica Azul Apple Action
   ========================================================= */

/* 1. BOTÓN COMPRAR (CERO VERDE -> Azul Apple puro) */
html body .btn-success,
html body .btn-primary,
html body button.btn-success,
html body button.btn-primary,
html body input.btn-success,
html body input.btn-primary {
    background-color: #0071e3 !important; /* Azul Apple */
    background-image: none !important;
    border-color: #0071e3 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

html body .btn-success:hover,
html body .btn-primary:hover {
    background-color: #005cbf !important; /* Azul oscuro al pasar el mouse */
    border-color: #005cbf !important;
    color: #ffffff !important;
}

/* 2. BOTÓN DETALLES / SECUNDARIOS (Mata el fondo blanco -> Slate Dark) */
html body .btn-secondary,
html body .btn-light,
html body .btn-default,
html body a.btn:not(.btn-primary):not(.btn-success),
html body button.btn:not(.btn-primary):not(.btn-success) {
    background-color: #1e293b !important; /* Slate Dark */
    background-image: none !important;
    border: 1px solid #334155 !important;
    color: #7a899c !important; 
    text-shadow: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

html body .btn-secondary:hover,
html body .btn-light:hover,
html body .btn-default:hover,
html body a.btn:not(.btn-primary):not(.btn-success):hover {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #ffffff !important; 
}
/* Membership Pro - duración/valores del plan (tabla) */
.osm-plan-property-value,
.osm-plan-property-value * {
  color: #fff !important;
}

/* Por si el valor viene dentro de una tabla oscura */
table .osm-plan-property-value {
  color: #fff !important;
}
/* Membership Pro - labels (columna izquierda / nombre de propiedad) */
.osm-plan-property-name,
.osm-plan-property-label,
.osm-plan-property-title,
.osm-plan-property-caption {
  color: rgba(255,255,255,.85) !important;
}

/* Por si el plugin no usa esas clases: fuerza 1ra columna de la tabla */
table td:first-child,
table th:first-child {
  color: rgba(255,255,255,.85) !important;
}
/* =========================================================
   DJ-MEGAMENU: SUBIR TONO SOLO EN ÍTEMS PRINCIPALES (TOP LEVEL)
   - No toca submenús
   - NO toca botones/CTA (TRABAJAR CON IA / ESTUDIAR / LOGIN)
   ========================================================= */

/* Ítems normales del menú principal (top level) */
ul.dj-megamenu-nav > li > a:not(.btn-aula-domina):not(.btn-trabajar-ia):not(.btn-login-secundario),
ul.dj-megamenu > li > a:not(.btn-aula-domina):not(.btn-trabajar-ia):not(.btn-login-secundario),
ul.dj-megamenu-nav > li > a:not(.btn-aula-domina):not(.btn-trabajar-ia):not(.btn-login-secundario) *,
ul.dj-megamenu > li > a:not(.btn-aula-domina):not(.btn-trabajar-ia):not(.btn-login-secundario) * {
  color: #F3F7FF !important;  /* casi blanco, premium */
  opacity: 1 !important;
}

/* Hover SOLO top level de ítems normales (dorado) */
ul.dj-megamenu-nav > li:hover > a:not(.btn-aula-domina):not(.btn-trabajar-ia):not(.btn-login-secundario),
ul.dj-megamenu > li:hover > a:not(.btn-aula-domina):not(.btn-trabajar-ia):not(.btn-login-secundario),
ul.dj-megamenu-nav > li:hover > a:not(.btn-aula-domina):not(.btn-trabajar-ia):not(.btn-login-secundario) *,
ul.dj-megamenu > li:hover > a:not(.btn-aula-domina):not(.btn-trabajar-ia):not(.btn-login-secundario) * {
  color: #C9A45C !important;
}
/* --- FONDO OSCURO ABSOLUTO PARA TOP HEADER Y CABECERA (CASSIOPEIA) --- */
header.header, 
.container-header, 
.container-top-a {
    background-color: #02060c !important;
    background-image: none !important; /* Elimina cualquier degradado nativo */
    border: none !important;
    box-shadow: none !important;
}

/* --- CENTRADO GLOBAL + HAMBURGUESA INDEPENDIENTE EN MÓVIL (CASSIOPEIA) --- */
.container-header {
    grid-template-columns: 1fr !important;
    row-gap: 10px !important; /* Reducido para achicar la altura total */
    padding-top: 10px !important; /* Reducido para achicar la altura total */
    padding-bottom: 5px !important; /* Ajuste inferior */
    position: relative; /* Clave para anclar la hamburguesa */
}

.container-header .navbar-brand {
    margin: 0 auto !important;
    justify-content: center !important;
    display: flex !important;
    width: 100% !important;
}

/* Reducción del logo un 20% universal (PC y Móvil) */
.container-header .navbar-brand img {
    transform: scale(0.8) !important;
    transform-origin: center !important;
    margin: -10px 0 !important; /* Elimina el espacio fantasma que deja el scale, permitiendo que el header sea más bajo */
}

/* Comportamiento Menú PC */
@media (min-width: 992px) {
    .container-header .container-nav {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
}

/* Comportamiento Menú Móvil (Hamburguesa) */
@media (max-width: 991px) {
    .container-header .container-nav {
        position: absolute !important;
        right: 15px !important;
        top: 25px !important; /* Ajustado proporcionalmente al nuevo padding */
        width: auto !important;
    }
}
/* =========================================================
   DJ-MEGAMENU: JERARQUÍA VISUAL EN MÓVIL (NIVEL 0 / 1 / 2)
   SOLO móvil. No toca desktop. Respeta tus CTA.
   ========================================================= */
@media (max-width: 991.98px){

  /* ---------- NIVEL 0 (padres) ---------- */
  .dj-mobile-nav > li > a:not(.btn-aula-domina):not(.btn-login-secundario):not(.btn-trabajar-ia){
    font-weight: 700 !important;
    font-size: 1.08rem !important;
    color: #ffffff !important;
    text-transform: none !important;
    letter-spacing: .8px !important;
    padding: 14px 16px !important;
    margin: 6px 12px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 8px !important;
  }

  /* ---------- NIVEL 1 (submenú) ---------- */
  .dj-mobile-nav > li > ul > li > a:not(.btn-aula-domina):not(.btn-login-secundario):not(.btn-trabajar-ia){
    font-weight: 600 !important;
    font-size: 1rem !important;
    color: #D4AF37 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 12px 16px 12px 34px !important;
    margin: 4px 12px !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(212,175,55,0.18) !important;
    border-left: 4px solid rgba(212,175,55,0.55) !important;
    border-radius: 8px !important;
  }

  /* ---------- NIVEL 2 (sub-submenú) ---------- */
  .dj-mobile-nav > li > ul > li > ul > li > a:not(.btn-aula-domina):not(.btn-login-secundario):not(.btn-trabajar-ia){
    font-weight: 500 !important;
    font-size: .95rem !important;
    color: #a0aabf !important;
    padding: 10px 16px 10px 50px !important;
    margin: 3px 12px !important;
    background: rgba(0,0,0,0.22) !important;
    border: 1px solid rgba(160,170,191,0.16) !important;
    border-left: 4px solid rgba(160,170,191,0.22) !important;
    border-radius: 8px !important;
  }

  /* Flecha / toggler de despliegue: alineación y color */
  .dj-mobile-nav .dj-toggler,
  .dj-mobile-nav .dj-submenu-toggler,
  .dj-mobile-nav .dj-mobile-toggler{
    opacity: .75 !important;
  }
  .dj-mobile-nav .dj-toggler:active,
  .dj-mobile-nav .dj-submenu-toggler:active,
  .dj-mobile-nav .dj-mobile-toggler:active{
    opacity: 1 !important;
  }
}
/* =========================================================
   FIX SCROLL iOS (iPhone/iPad) - evita rebote/scroll-lock
   ========================================================= */
@supports (-webkit-touch-callout: none) {

  html, body{
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
    -webkit-overflow-scrolling: auto !important; /* clave: evita el “lag” */
  }

  /* Evitar “scroll dentro de scroll” en contenedores grandes */
  .site-grid,
  .site,
  .container-main,
  main,
  #content,
  .container-component{
    overflow: visible !important;
  }
}
@supports (-webkit-touch-callout: none) {

  /* Evita “rubber band” raro y bloqueos por fixed */
  body{
    position: relative !important;
    overscroll-behavior-y: none !important;
    touch-action: pan-y !important;
  }

  /* Si DJ/offcanvas usa fixed, que no bloquee la página */
  .dj-offcanvas,
  .dj-offcanvas-wrapper,
  .dj-megamenu-offcanvas,
  .dj-offcanvas-menu{
    -webkit-overflow-scrolling: auto !important;
  }
}
/* --- ALERTAS DEL SISTEMA (CREMA + DORADO, alineado al sitio) --- */
joomla-alert,
.alert,
#system-message-container .alert {
    background-color: #faf6ec !important;
    background-image: none !important;
    color: #0C2340 !important;
    border: 1px solid #d8c69a !important;
    border-left: 4px solid #B8860B !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(12,35,64,.10) !important;
    padding: 14px 18px !important;

    /* Anular variables nativas de Bootstrap 5 */
    --bs-alert-bg: #faf6ec !important;
    --bs-alert-color: #0C2340 !important;
    --bs-alert-border-color: #d8c69a !important;
}

/* Texto interno hereda navy */
joomla-alert div,
joomla-alert p,
.alert div,
.alert p,
.alert-message {
    color: #0C2340 !important;
}

/* Borde izquierdo semántico por tipo de alerta */
joomla-alert[type="success"], .alert-success { border-left-color: #2e7d32 !important; }
joomla-alert[type="danger"], joomla-alert[type="error"], .alert-danger, .alert-error { border-left-color: #c62828 !important; }
joomla-alert[type="warning"], .alert-warning { border-left-color: #B8860B !important; }
joomla-alert[type="info"], .alert-info { border-left-color: #1976d2 !important; }

/* Iconos y botón cerrar visibles sobre crema */
joomla-alert span[class^="icon-"],
joomla-alert button,
.alert button.btn-close {
    filter: none !important;
    color: #0C2340 !important;
    opacity: 0.75 !important;
}
joomla-alert button:hover,
.alert button.btn-close:hover {
    opacity: 1 !important;
}

/* =========================================================
   12. FOOTER BLACK PREMIUM (MARCO EXACTO Y SEPARACIÓN)
   ========================================================= */
html body .site-grid > .container-footer,
html body footer.container-footer,
html body .site-footer,
html body footer.footer {
    /* Fondo exacto al body (#020617) */
    background-color: #020617 !important; 
    background-image: none !important;
    
    /* Marco perimetral blanco */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
    
    /* Ancho 1200px y SEPARACIÓN SUPERIOR de 80px */
    max-width: 1200px !important;
    width: calc(100% - 40px) !important;
    margin: 80px auto 40px auto !important; 
    
    /* Espacio interno */
    padding: 45px 50px 35px 50px !important;
    
    /* Liberación de grilla nativa */
    grid-column: 1 / -1 !important; 
    justify-self: center !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    html body .site-grid > .container-footer,
    html body footer.container-footer {
        padding: 40px 25px 30px 25px !important;
        margin-top: 40px !important; /* Menos separación en móviles */
    }
}
/* =========================================================
   FIX: ELIMINACIÓN DE BRECHA ENTRE HEADER Y ARTÍCULOS
   ========================================================= */
/* 1. Elimina el borde inferior claro del header */
header.header, 
.container-header, 
.site-grid > header {
    border-bottom: none !important;
}

/* 2. Elimina los espacios, paddings y gaps nativos de Cassiopeia */
.site-grid {
    gap: 0 !important;
}

.container-component, 
.container-main, 
main, 
#content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 3. Oculta contenedores vacíos del sistema que generan franjas fantasma */
.container-breadcrumb:empty,
#system-message-container:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
}
/* =========================================================
   OSMEMBERSHIP: FONDO NEGRO PREMIUM + SIN MARCOS AZULES
   Override final - no toca botones ni menús
   ========================================================= */

/* Contenedores principales del componente */
html body .com-osmembership,
html body .osm-plans-wrapper,
html body .osm-plan-wrapper,
html body .osm-plan,
html body .osm-plan-inner,
html body .osm-plan-header,
html body .osm-plan-body,
html body .osm-plan-footer,
html body .osm-plan-price,
html body .osm-plan-description,
html body .osm-plan-properties,
html body .osm-plan-property,
html body table.osm-plan-properties,
html body .osm-checkout,
html body .osm-checkout-wrapper,
html body #osm-checkout,
html body .osm-form,
html body .osm-account,
html body .osm-account-wrapper {
    background-color: #02060c !important;
    background: #02060c !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Títulos de planes: dorado premium */
html body .osm-plan-title,
html body .osm-plan-title a,
html body .osm-plan-name,
html body .osm-plan h2,
html body .osm-plan h3 {
    color: #D4AF37 !important;
    font-weight: 900 !important;
}

/* Precios: blanco brillante */
html body .osm-plan-price,
html body .osm-plan-price *,
html body .osm-price,
html body .osm-price * {
    color: #ffffff !important;
}

/* Textos generales del componente */
html body .com-osmembership p,
html body .com-osmembership li,
html body .com-osmembership td,
html body .com-osmembership th,
html body .com-osmembership span,
html body .com-osmembership label {
    color: #e2e8f0 !important;
}

/* Tablas internas: sin fondo */
html body .com-osmembership table,
html body .com-osmembership tr,
html body .com-osmembership td,
html body .com-osmembership th {
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Separadores de fila alternos */
html body .com-osmembership tr:nth-child(even) td {
    background-color: rgba(255,255,255,0.02) !important;
}
/* === OSMEMBERSHIP: COLUMNAS 5 Y 7 - FONDO NEGRO PREMIUM === */
html body .osm-description-details,
html body .col-md-5.osm-description-details,
html body .col-md-7.osm-description-details,
html body .osm-plan-details,
html body .osm-plan-wrapper,
html body .osm-plan-container,
html body .osm-plan-col,
html body .col-md-5,
html body .col-md-7 {
    background-color: #02060c !important;
    background: #02060c !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
/* ===MODULE-CARD HIGHLIGHT - FONDO NEGRO PREMIUM === */
html body .module-card.highlight {
    background-color: #02060c !important;
    background: #02060c !important;
    background-image: none !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
    box-shadow: none !important;
}
/* === AULA CONTAINER - FONDO NEGRO PREMIUM === */
html body .aula-container {
    background-color: #02060c !important;
    background: #02060c !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* === OSMEMBERSHIP CHECKOUT: SANGRÍA LABELS === */
html body .col-md-3.form-control-label {
    padding-left: 60px !important;
}
/* === OSMEMBERSHIP: SANGRÍA HEADINGS, LOGIN, REGISTRO Y BOTONES === */
html body .osm-heading,
html body #osm-existing-user-login,
html body #osm-new-user-register,
html body .btn.btn-primary,
html body .osm-btn-login,
html body .osm-page-title {
    padding-left: 60px !important;
}
/* === DJ-MEGAMENU: FIX COLUMNAS MEGAMENU === */
.dj-megamenu ul.dj-submenu ul li > a {
    padding: 8px 12px 8px 20px !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
}
.dj-megamenu ul.dj-submenu ul li > a::before {
    display: none !important;
}

/* === DJ-MEGAMENU: SUBMENÚS 2DO Y 3ER NIVEL - FONDO AZUL OSCURO === */
.dj-megamenu ul.dj-submenu ul.dj-submenu {
    background: #02060c !important;
    border-radius: 8px !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important;
    padding: 8px 0 !important;
    min-width: 260px !important;
}
.dj-megamenu ul.dj-submenu ul.dj-submenu li > a {
    display: block !important;
    padding: 12px 24px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #a0aabf !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.4 !important;
}
.dj-megamenu ul.dj-submenu ul.dj-submenu li > a:hover {
    color: #D4AF37 !important;
    background: rgba(255, 255, 255, 0.03) !important;
    padding-left: 28px !important;
}
/* === MOBILE MENU: POSICIÓN IZQUIERDA + SCROLL === */
.dj-accordion.dj-accordion-dark {
    position: relative !important;
    height: auto !important;
    overflow-y: visible !important;
    z-index: 9999 !important;
    width: auto !important;
}

/* Contenido interno: fixed solo cuando está abierto */
.dj-accordion.dj-accordion-dark .dj-accordion-in {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 300px !important;
    height: 100vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding-bottom: 40px !important;
    background: #02060c !important;
    z-index: 9999 !important;
}
/* === TABLET HORIZONTAL: DESACTIVAR HEADER STICKY === */
@media (min-width: 980px) and (max-width: 1199px) and (orientation: landscape) {
    header.header.container-header {
        position: relative !important;
        top: auto !important;
    }
}
/* === MEGAMENU: SUBMENÚS CASCADA HACIA LA IZQUIERDA === */
.dj-megamenu li.parent .dj-subwrap .dj-subwrap {
    left: auto !important;
    right: 100% !important;
}
/* =========================================================
   MEMBERSHIP PRO: TARJETAS COMPACTAS - SELECTOR EXACTO
   Reemplaza el bloque anterior al final del user.css
   ========================================================= */

/* 3 COLUMNAS */
html body .osm-item-wrapper.col-md-4,
html body .col-md-4.osm-item-wrapper {
    width: 33.333% !important;
    max-width: 33.333% !important;
    flex: 0 0 33.333% !important;
    padding: 10px 12px !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
    float: none !important;
}

html body .osm-plans-wrapper .row,
html body .com-osmembership .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

/* ANULAR EL HEIGHT INLINE de osm-item-description-text */
html body .osm-item-description,
html body .osm-item-description-text,
html body div.osm-item-description-text {
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
}

/* TÍTULO h2 → tamaño h4 */
html body .osm-item-title,
html body .osm-item-title a,
html body .com-osmembership h2.osm-item-title,
html body .com-osmembership .osm-item-title h2,
html body .com-osmembership h2 {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
    color: #D4AF37 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* TARJETA INTERNA */
html body .osm-item-description-text .dm-membership-rect-premium,
html body .dm-membership-rect-premium.ultra-compact {
    margin: 0 !important;
}

/* DESCRIPCIÓN */
html body .osm-plan-description,
html body .osm-plan p,
html body .com-osmembership p,
html body .com-osmembership li {
    font-size: 0.82rem !important;
    line-height: 1.6 !important;
    margin-bottom: 10px !important;
    color: #c8d0dc !important;
}

/* PRECIO */
html body .osm-plan-price,
html body .osm-price {
    margin: 10px 0 14px !important;
    font-size: 1.3rem !important;
}

/* BOTONES */
html body .osm-plan .btn-primary,
html body .osm-plan .btn-success,
html body .osm-taskbar .btn {
    font-size: 0.8rem !important;
    padding: 8px 14px !important;
    margin-top: 8px !important;
}

/* TABLET: 2 columnas */
@media (max-width: 1024px) and (min-width: 601px) {
    html body .osm-item-wrapper.col-md-4,
    html body .col-md-4.osm-item-wrapper {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        padding: 10px 12px !important;
    }
}

/* MÓVIL: 1 columna */
@media (max-width: 600px) {
    html body .osm-item-wrapper.col-md-4,
    html body .col-md-4.osm-item-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 8px 10px !important;
    }
}
/* =========================================================
   OSMEMBERSHIP: LAYOUT PRODUCTO INDIVIDUAL — FULL WIDTH DESKTOP
   Traslada el formato móvil (columna única) a todas las pantallas.
   La descripción larga ocupa el 100% del ancho.
   El precio/botón COMPRAR queda debajo, no a la derecha.
   ========================================================= */

/* 1. Destruye el grid Bootstrap en el contenedor raíz del producto */
html body .com-osmembership .row,
html body .com-osmembership > .container > .row,
html body .com-osmembership .osm-plan-wrapper {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

/* 2. Descripción larga: 100% del ancho en todas las pantallas */
html body .com-osmembership .col-md-5,
html body .com-osmembership .col-md-7,
html body .com-osmembership .col-md-8,
html body .com-osmembership .col-md-4,
html body .com-osmembership .col-sm-5,
html body .com-osmembership .col-sm-7,
html body .com-osmembership [class*="col-md-"],
html body .com-osmembership [class*="col-sm-"],
html body .com-osmembership [class*="col-xs-"],
html body .osm-description-details,
html body .osm-plan-details,
html body .osm-plan-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
}

/* 3. Caja de precio + botón COMPRAR: full width, separada arriba */
html body .com-osmembership .osm-plan-price-wrapper,
html body .com-osmembership .osm-plan-footer,
html body .com-osmembership .osm-checkout-wrapper,
html body .com-osmembership table.osm-plan-properties,
html body .com-osmembership .osm-taskbar {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 32px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding-top: 24px !important;
    float: none !important;
    clear: both !important;
}

/* 4. Tabla de precio: legible */
html body .com-osmembership table.osm-plan-properties,
html body .com-osmembership .osm-plan-properties table {
    width: 100% !important;
    max-width: 700px !important;
    margin-bottom: 24px !important;
}

/* 5. Botón COMPRAR */
html body .com-osmembership .btn-primary,
html body .com-osmembership .btn-success,
html body .com-osmembership a.btn-primary,
html body .com-osmembership .osm-taskbar .btn {
    display: inline-block !important;
    min-width: 200px !important;
    width: auto !important;
    padding: 14px 40px !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    background-color: #0071e3 !important;
    border-color: #0071e3 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    clear: none !important;
}

html body .com-osmembership .btn-primary:hover,
html body .com-osmembership .btn-success:hover {
    background-color: #005cbf !important;
    border-color: #005cbf !important;
}
/* =========================================================
   OSMEMBERSHIP: FIX TASKBAR BLANCA
   ========================================================= */
html body .osm-taskbar,
html body .osm-taskbar.clearfix {
    background-color: #02060c !important;
    background: #02060c !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
/* =========================================================
   OSMEMBERSHIP: FIX ROW/TASKBAR BLANCOS — ALTA ESPECIFICIDAD
   ========================================================= */
html body.site .com-osmembership .row.clearfix,
html body.site .com-osmembership .row,
html body.site .com-osmembership .clearfix,
html body.site .osm-taskbar,
html body.site .osm-taskbar.clearfix,
html body .com-osmembership .row.clearfix,
html body .com-osmembership .row,
html body .com-osmembership .clearfix,
html body .osm-taskbar.clearfix {
    background-color: #02060c !important;
    background: #02060c !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* =========================================================
   OSMEMBERSHIP: FIX DEFINITIVO — PRECIO CENTRADO, SIN BLANCO
   ========================================================= */

/* Mata el col vacío que genera el blanco */
html body .com-osmembership .row.clearfix > [class*="col-"] {
    background: #02060c !important;
    background-color: #02060c !important;
}

/* Fuerza la fila completa a negro */
html body .com-osmembership .row.clearfix {
    background: #02060c !important;
    background-color: #02060c !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Taskbar: centrado total */
html body .com-osmembership .osm-taskbar,
html body .osm-taskbar,
html body .osm-taskbar.clearfix {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #02060c !important;
    background-color: #02060c !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 24px 0 !important;
    text-align: center !important;
    display: block !important;
    clear: both !important;
    margin: 0 auto !important;
}

/* Precio y etiquetas: centrados */
html body .com-osmembership .osm-taskbar table,
html body .com-osmembership .osm-taskbar .osm-plan-price,
html body .com-osmembership .osm-taskbar p {
    margin: 0 auto 12px auto !important;
    text-align: center !important;
    float: none !important;
}

/* Botón centrado */
html body .com-osmembership .osm-taskbar .btn,
html body .com-osmembership .osm-taskbar a.btn,
html body .com-osmembership .osm-taskbar .btn-primary {
    display: inline-block !important;
    margin: 8px auto 0 auto !important;
    float: none !important;
    min-width: 200px !important;
    clear: both !important;
}

/* Destruye la columna fantasma blanca */
html body .com-osmembership .col-md-5:empty,
html body .com-osmembership .col-md-4:empty,
html body .com-osmembership .col-md-3:empty,
html body .com-osmembership [class*="col-"]:empty {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* === FIX DEFINITIVO: ROW CLEARFIX BLANCO === */
html body .row.clearfix {
    background: #02060c !important;
    background-color: #02060c !important;
    background-image: none !important;
}
/* === OSMEMBERSHIP: DESCRIPCIÓN CORTA — FONDO AZUL OSCURO === */
html body .osm-item-description,
html body .osm-item-description.clearfix {
    background-color: #08111e !important;
    background: #08111e !important;
}
/* === OSMEMBERSHIP: ELIMINAR MARCOS Y SEPARACIONES BLANCOS === */
html body .com-osmembership,
html body .com-osmembership *,
html body .osm-plans-wrapper,
html body .osm-item-wrapper,
html body .osm-item-wrapper.col-md-4 {
    border-color: transparent !important;
    outline: none !important;
}

html body .com-osmembership .container,
html body .com-osmembership .container-fluid {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* ============================================================
   MEMBERSHIP PRO — Checkout/signup (v2 minimalista)
   Scope: solo páginas com_osmembership
   Paleta: navy #0C2340 / dorado #E8B800 / blanco / gris #d1d5db
   ============================================================ */

/* --- Inputs, selects y textareas: borde gris sutil --- */
body.com_osmembership input[type="text"],
body.com_osmembership input[type="email"],
body.com_osmembership input[type="password"],
body.com_osmembership input[type="tel"],
body.com_osmembership input[type="number"],
body.com_osmembership input[type="search"],
body.com_osmembership input[type="url"],
body.com_osmembership select,
body.com_osmembership textarea {
    background-color: #ffffff !important;
    color: #0C2340 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    box-shadow: none !important;
    -webkit-text-fill-color: #0C2340 !important;
}

/* Autofill (Chrome/Safari) */
body.com_osmembership input:-webkit-autofill,
body.com_osmembership input:-webkit-autofill:hover,
body.com_osmembership input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #0C2340 !important;
    caret-color: #0C2340 !important;
}

/* Foco — dorado solo en este estado */
body.com_osmembership input:focus,
body.com_osmembership select:focus,
body.com_osmembership textarea:focus {
    background-color: #ffffff !important;
    color: #0C2340 !important;
    border-color: #E8B800 !important;
    outline: 2px solid rgba(232, 184, 0, 0.25) !important;
    outline-offset: 1px !important;
}

/* Placeholders */
body.com_osmembership input::placeholder,
body.com_osmembership textarea::placeholder {
    color: #6c757d !important;
    opacity: 0.85 !important;
}

/* --- Labels --- */
body.com_osmembership label,
body.com_osmembership .control-label {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    margin-bottom: 4px !important;
}

/* Asteriscos de campos requeridos */
body.com_osmembership .required,
body.com_osmembership label .required,
body.com_osmembership .star {
    color: #E8B800 !important;
    font-weight: 700 !important;
}

/* --- Encabezados sin subrayado --- */
body.com_osmembership h1,
body.com_osmembership h2,
body.com_osmembership h3,
body.com_osmembership legend {
    color: #E8B800 !important;
    border-bottom: none !important;
    padding-bottom: 4px !important;
    margin-top: 28px !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.3px !important;
}

/* --- Barra blanca "¿Olvidó contraseña?" → transparente --- */
body.com_osmembership .forgot-password,
body.com_osmembership .links,
body.com_osmembership .links-recovery,
body.com_osmembership .login-links,
body.com_osmembership form#login-form + div,
body.com_osmembership form#login-form ~ p,
body.com_osmembership #form-login-username + .row,
body.com_osmembership .com_users-links {
    background-color: transparent !important;
    color: #cbd5e1 !important;
    padding: 8px 0 !important;
    margin: 8px 0 !important;
}

/* Cualquier div/p con fondo blanco residual de OSM */
body.com_osmembership div[style*="background"],
body.com_osmembership p[style*="background"] {
    background-color: transparent !important;
}

/* --- Botones --- */
body.com_osmembership .btn,
body.com_osmembership button[type="submit"],
body.com_osmembership input[type="submit"],
body.com_osmembership .btn-primary,
body.com_osmembership #btn-login {
    background-color: #E8B800 !important;
    color: #0C2340 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 26px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

body.com_osmembership .btn:hover,
body.com_osmembership button[type="submit"]:hover,
body.com_osmembership input[type="submit"]:hover,
body.com_osmembership .btn-primary:hover,
body.com_osmembership #btn-login:hover {
    background-color: #d4a700 !important;
    color: #0C2340 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* --- Botón "ojo" (mostrar/ocultar contraseña) integrado --- */
body.com_osmembership .input-password-toggle,
body.com_osmembership button.input-password-toggle,
body.com_osmembership .input-group .btn[type="button"],
body.com_osmembership .input-group button.btn-secondary {
    background-color: #ffffff !important;
    color: #0C2340 !important;
    border: 1px solid #d1d5db !important;
    border-left: none !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
    text-transform: none !important;
    transform: none !important;
}

body.com_osmembership .input-password-toggle:hover,
body.com_osmembership button.input-password-toggle:hover,
body.com_osmembership .input-group .btn[type="button"]:hover {
    background-color: #f3f4f6 !important;
    color: #0C2340 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Input dentro de input-group con botón ojo: sin borde derecho */
body.com_osmembership .input-group input[type="password"],
body.com_osmembership .input-group input[type="text"] {
    border-right: none !important;
    border-radius: 6px 0 0 6px !important;
}

/* --- Radios y checkboxes --- */
body.com_osmembership input[type="radio"],
body.com_osmembership input[type="checkbox"] {
    accent-color: #E8B800 !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
}

/* --- Tooltips de error --- */
body.com_osmembership .invalid-tooltip,
body.com_osmembership .tip-text,
body.com_osmembership [role="tooltip"],
body.com_osmembership .form-control-feedback {
    background-color: #b00020 !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
}

body.com_osmembership input.invalid,
body.com_osmembership input.is-invalid {
    border-color: #b00020 !important;
    background-color: #fff5f5 !important;
}

/* --- Badge "USD" pegado al input --- */
body.com_osmembership .input-group {
    display: flex !important;
    align-items: stretch !important;
}

body.com_osmembership .input-group-text,
body.com_osmembership .add-on,
body.com_osmembership .input-group-addon,
body.com_osmembership .input-group-prepend .input-group-text,
body.com_osmembership .input-group > span:first-child {
    background-color: #E8B800 !important;
    color: #0C2340 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border: 1px solid #E8B800 !important;
    border-right: none !important;
    border-radius: 6px 0 0 6px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    margin-right: 0 !important;
}

/* Input que sigue al badge USD */
body.com_osmembership .input-group > input,
body.com_osmembership .input-group-text + input {
    border-radius: 0 6px 6px 0 !important;
    border-left: none !important;
}

/* --- Texto descriptivo --- */
body.com_osmembership p,
body.com_osmembership .description,
body.com_osmembership .form-text {
    color: #cbd5e1 !important;
}

/* --- Enlaces --- */
body.com_osmembership a {
    color: #E8B800 !important;
    text-decoration: none !important;
}

body.com_osmembership a:hover {
    color: #ffd633 !important;
    text-decoration: underline !important;
}

/* --- Tabla resumen --- */
body.com_osmembership table {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

body.com_osmembership table th {
    color: #E8B800 !important;
    background-color: rgba(232, 184, 0, 0.08) !important;
    border-bottom: 1px solid rgba(232, 184, 0, 0.2) !important;
}

body.com_osmembership table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* --- Selector de país --- */
body.com_osmembership select[name*="country"],
body.com_osmembership #country_id {
    background-color: #ffffff !important;
    color: #0C2340 !important;
}

/* --- Cupón de descuento --- */
body.com_osmembership input[name*="coupon"],
body.com_osmembership #coupon_code {
    background-color: #ffffff !important;
    color: #0C2340 !important;
    font-weight: 600 !important;
}
/* ============================================================
   MEMBERSHIP PRO — Compactación (v2.1)
   AGREGAR al final de user.css (NO reemplaza el bloque anterior)
   ============================================================ */

/* --- Contenedor centrado y angosto --- */
body.com_osmembership .item-page,
body.com_osmembership .com-content-article__body,
body.com_osmembership main .container,
body.com_osmembership #osm-register-form,
body.com_osmembership form[id*="register"],
body.com_osmembership form[id*="subscribe"],
body.com_osmembership form[id*="osm"],
body.com_osmembership .osm-form,
body.com_osmembership #osmembership {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

/* Fallback: cualquier form directo dentro de la página OSM */
body.com_osmembership main form,
body.com_osmembership .item-page > form {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- Inputs más compactos --- */
body.com_osmembership input[type="text"],
body.com_osmembership input[type="email"],
body.com_osmembership input[type="password"],
body.com_osmembership input[type="tel"],
body.com_osmembership input[type="number"],
body.com_osmembership input[type="search"],
body.com_osmembership input[type="url"],
body.com_osmembership select,
body.com_osmembership textarea {
    padding: 7px 10px !important;
    font-size: 14px !important;
    height: auto !important;
    min-height: 36px !important;
    line-height: 1.3 !important;
}

/* --- Labels más chicos y juntos --- */
body.com_osmembership label,
body.com_osmembership .control-label {
    font-size: 13px !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
}

/* --- Encabezados de sección compactos --- */
body.com_osmembership h1 {
    font-size: 22px !important;
    margin-top: 16px !important;
    margin-bottom: 8px !important;
}

body.com_osmembership h2 {
    font-size: 18px !important;
    margin-top: 18px !important;
    margin-bottom: 8px !important;
}

body.com_osmembership h3 {
    font-size: 15px !important;
    margin-top: 14px !important;
    margin-bottom: 6px !important;
}

/* --- Espacio entre filas reducido --- */
body.com_osmembership .row,
body.com_osmembership .form-group,
body.com_osmembership .control-group,
body.com_osmembership .controls,
body.com_osmembership div[class*="form-group"],
body.com_osmembership .field-row {
    margin-bottom: 10px !important;
}

/* --- Botones compactos --- */
body.com_osmembership .btn,
body.com_osmembership button[type="submit"],
body.com_osmembership input[type="submit"],
body.com_osmembership .btn-primary,
body.com_osmembership #btn-login {
    padding: 8px 22px !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
}

/* --- Botón "ojo" alineado con el input compacto --- */
body.com_osmembership .input-password-toggle,
body.com_osmembership button.input-password-toggle,
body.com_osmembership .input-group .btn[type="button"] {
    padding: 6px 10px !important;
    min-height: 36px !important;
}

/* --- Badge USD compacto --- */
body.com_osmembership .input-group-text,
body.com_osmembership .add-on,
body.com_osmembership .input-group-addon,
body.com_osmembership .input-group > span:first-child {
    font-size: 12px !important;
    padding: 0 10px !important;
    min-height: 36px !important;
}

/* --- Texto descriptivo --- */
body.com_osmembership p,
body.com_osmembership .description,
body.com_osmembership .form-text {
    font-size: 13px !important;
    margin-bottom: 8px !important;
    line-height: 1.45 !important;
}

/* --- Tabla resumen compacta --- */
body.com_osmembership table th,
body.com_osmembership table td {
    padding: 6px 10px !important;
    font-size: 13px !important;
}

/* --- Botón "volver" (flecha azul superior) más chico --- */
body.com_osmembership a.back-button,
body.com_osmembership .btn-back,
body.com_osmembership a[class*="back"] {
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
}
/* ============================================================
   MEMBERSHIP PRO — Centrar título e intro (v2.3)
   AGREGAR al final de user.css
   ============================================================ */

/* Título "Suscripción" e intro: alinear al ancho del card (950px) */
body.com_osmembership .page-header,
body.com_osmembership main > h1,
body.com_osmembership main > h2,
body.com_osmembership main > p,
body.com_osmembership main > div > h1,
body.com_osmembership main > div > h2,
body.com_osmembership main > div > p,
body.com_osmembership .item-page > h1,
body.com_osmembership .item-page > h2,
body.com_osmembership .item-page > p,
body.com_osmembership .com-content > h1,
body.com_osmembership .com-content > h2,
body.com_osmembership .com-content > p,
body.com_osmembership .container > h1,
body.com_osmembership .container > h2,
body.com_osmembership .container > p,
body.com_osmembership .container-fluid > h1,
body.com_osmembership .container-fluid > h2,
body.com_osmembership .container-fluid > p,
body.com_osmembership #osm-container > h1,
body.com_osmembership #osm-container > h2,
body.com_osmembership #osm-container > p,
body.com_osmembership .osm-container > h1,
body.com_osmembership .osm-container > h2,
body.com_osmembership .osm-container > p,
body.com_osmembership .com-content-article__body > h1,
body.com_osmembership .com-content-article__body > h2,
body.com_osmembership .com-content-article__body > p,
body.com_osmembership #content > h1,
body.com_osmembership #content > h2,
body.com_osmembership #content > p,
body.com_osmembership #content-top > h1,
body.com_osmembership #content-top > p {
    max-width: 950px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* Excepción: encabezados/textos dentro del form deben quedar pegados al borde del card */
body.com_osmembership form h1,
body.com_osmembership form h2,
body.com_osmembership form h3,
body.com_osmembership form p,
body.com_osmembership form * h1,
body.com_osmembership form * h2,
body.com_osmembership form * h3 {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* ============================================================
   MEMBERSHIP PRO — Centrar h3/h4 intermedios (v2.5)
   AGREGAR al final de user.css
   ============================================================ */

/* Centrar h3 y h4 fuera del form (ej: "Información de la cuenta") */
body.com_osmembership main > h3,
body.com_osmembership main > h4,
body.com_osmembership main > div > h3,
body.com_osmembership main > div > h4,
body.com_osmembership .item-page > h3,
body.com_osmembership .item-page > h4,
body.com_osmembership .com-content > h3,
body.com_osmembership .com-content > h4,
body.com_osmembership #content > h3,
body.com_osmembership #content > h4,
body.com_osmembership #content-top > h3,
body.com_osmembership #content-top > h4 {
    max-width: 950px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* h3/h4 dentro del form NO deben tener este padding/margin extra */
body.com_osmembership form h3,
body.com_osmembership form h4,
body.com_osmembership form * h3,
body.com_osmembership form * h4 {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* ============================================================
   MEMBERSHIP PRO — Responsive + ancho ampliado (v2.7)
   AGREGAR al final de user.css
   Sustituye los anchos previos. Aplica a TODAS las vistas OSM.
   ============================================================ */

/* --- Wrapper maestro: 1200px + responsive --- */
body.com_osmembership #osm-signup-page,
body.com_osmembership .osm-container {
    max-width: 1200px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 16px 24px !important;
    box-sizing: border-box !important;
}

/* --- Form de registro (card) hereda el ancho del wrapper --- */
body.com_osmembership .osm-container form:last-of-type,
body.com_osmembership .osm-container form:only-of-type,
body.com_osmembership main form:last-of-type {
    max-width: 100% !important;
    width: 100% !important;
}

/* --- Tablet (≤ 1024px) --- */
@media (max-width: 1024px) {
    body.com_osmembership #osm-signup-page,
    body.com_osmembership .osm-container {
        padding: 14px 18px !important;
    }
}

/* --- Mobile (≤ 768px) --- */
@media (max-width: 768px) {
    body.com_osmembership #osm-signup-page,
    body.com_osmembership .osm-container {
        padding: 12px 14px !important;
    }
    
    body.com_osmembership main form:last-of-type,
    body.com_osmembership .osm-container form:last-of-type,
    body.com_osmembership main form:only-of-type {
        padding: 18px 16px !important;
    }
    
    body.com_osmembership label,
    body.com_osmembership .control-label {
        font-size: 13px !important;
    }
    
    body.com_osmembership h1 { font-size: 19px !important; }
    body.com_osmembership h2 { font-size: 16px !important; }
    body.com_osmembership h3 { font-size: 14px !important; }
}

/* --- Mobile chico (≤ 480px) --- */
@media (max-width: 480px) {
    body.com_osmembership #osm-signup-page,
    body.com_osmembership .osm-container {
        padding: 8px 8px !important;
    }
    
    body.com_osmembership main form:last-of-type,
    body.com_osmembership .osm-container form:last-of-type,
    body.com_osmembership main form:only-of-type {
        padding: 14px 12px !important;
        border-radius: 10px !important;
    }
    
    body.com_osmembership input,
    body.com_osmembership select,
    body.com_osmembership textarea {
        font-size: 13px !important;
        padding: 6px 8px !important;
        min-height: 32px !important;
    }
    
    body.com_osmembership .input-group-text,
    body.com_osmembership .add-on,
    body.com_osmembership .input-group-addon {
        font-size: 11px !important;
        padding: 0 8px !important;
        min-height: 32px !important;
    }
    
    body.com_osmembership .btn,
    body.com_osmembership button[type="submit"] {
        padding: 7px 16px !important;
        font-size: 12px !important;
        width: 100% !important; /* botones full-width en móvil */
    }
}

/* ============================================================
   ELIMINAR franja blanca/clara superior
   ============================================================ */
body.com_osmembership .osm-container > div:first-child,
body.com_osmembership .osm-container > .page-header,
body.com_osmembership .osm-container > .osm-page-header,
body.com_osmembership .osm-container > .osm-banner,
body.com_osmembership .osm-container > .osm-header,
body.com_osmembership .osm-container > [class*="banner"],
body.com_osmembership .osm-container > [class*="header"]:not(form),
body.com_osmembership .osm-container > [class*="page-title"],
body.com_osmembership .osm-container .well:empty,
body.com_osmembership .osm-container .panel:empty,
body.com_osmembership .osm-container > div[class=""]:not([id*="signup"]):empty {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* ============================================================
   MEMBERSHIP PRO — Forgot password texto oscuro (v3.0)
   AGREGAR al final de user.css
   ============================================================ */

/* Texto de la barra "¿Olvidó contraseña? / ¿Recordar usuario?" en negro */
body.com_osmembership #osm-forgot-username-password a,
body.com_osmembership #osm-forgot-username-password .nav-link,
body.com_osmembership #osm-forgot-username-password li a,
body.com_osmembership #osm-forgot-username-password ul a {
    color: #0C2340 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

body.com_osmembership #osm-forgot-username-password a:hover,
body.com_osmembership #osm-forgot-username-password .nav-link:hover,
body.com_osmembership #osm-forgot-username-password li a:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

body.com_osmembership #osm-forgot-username-password a:visited {
    color: #0C2340 !important;
}
/* === MOSTRAR BOTÓN PASSKEY SOLO EN ACCESO PROFESOR (itemid-507) === */
body.itemid-507 button.plg_system_webauthn_login_button,
body.itemid-507 button[id^="plg_system_webauthn"],
body.itemid-507 [class*="plg_system_webauthn"] {
    display: inline-flex !important;
}
/* === Reducir tipografía submenú DJ-MegaMenu === */
.dj-megamenu .dj-submenu a,
.dj-megamenu .dj-submenu .dj-up-a,
.dj-megamenu .dj-submenu .dj-menutitle,
.dj-megamenu ul.dj-submenu li > a {
    font-size: 14px !important;
    line-height: 1.3 !important;
}
/* === Quitar márgenes/bordes blancos del submenú DJ-MegaMenu === */
.dj-megamenu .dj-up-w,
.dj-megamenu ul.dj-submenu,
.dj-megamenu .dj-submenu {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
/* === Quitar borde/separador residual del submenú === */
.dj-megamenu .dj-submenu li,
.dj-megamenu .dj-submenu .dj-menuitem,
.dj-megamenu .dj-submenu a {
    border: none !important;
    outline: none !important;
}
.dj-megamenu .dj-submenu .dj-separator {
    display: none !important;
}
/* === Recortar esquinas del submenú (elimina blanco en ángulos) === */
.dj-megamenu .dj-up-w,
.dj-megamenu ul.dj-submenu,
.dj-megamenu .dj-submenu {
    overflow: hidden !important;
    border-radius: 6px !important;
}
/* ============================================================
   Instituto Dómina — Recuadro "Ecografía en Urgencias" (.main-bottom.card) → CREMA
   Acotado SOLO a ese recuadro. Pegar al FINAL de user.css.
   ============================================================ */

/* Card del módulo → crema */
.main-bottom.card {
  background: #faf6ec !important;
  background-color: #faf6ec !important;
  background-image: none !important;
  border: 1px solid #d8c69a !important;
  border-top: 3px solid #B8860B !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(12,35,64,.14) !important;
  color: #0C2340 !important;
}

/* Encabezado "Ecografía en Urgencias" → franja dorada */
.main-bottom.card .card-header {
  background: #B8860B !important;
  background-color: #B8860B !important;
  color: #020608 !important;
  font-weight: 800 !important;
  border-bottom: 1px solid #d8c69a !important;
}

/* Cuerpo → crema */
.main-bottom.card .card-body {
  background: #faf6ec !important;
  background-color: #faf6ec !important;
  color: #0C2340 !important;
}

/* Links del menú interno → dorado sobre crema */
.main-bottom.card .mod-menu li a,
.main-bottom.card .nav-item a,
.main-bottom.card a {
  color: #8a6608 !important;
  text-decoration: none !important;
}
.main-bottom.card .mod-menu li a:hover,
.main-bottom.card .nav-item a:hover,
.main-bottom.card a:hover {
  color: #B8860B !important;
  text-decoration: underline !important;
}
/* ============================================================
   Instituto Dómina — Formulario JoomTestimonials → CREMA
   Clases: #jb_template, .juit-form, .predefined-field-*, .form-control, .form-label
   Acotado a #jb_template. Pegar al FINAL de user.css.
   ============================================================ */

/* Contenedor del formulario → tarjeta crema */
#jb_template .juit-form,
#jb_template form#adminForm {
  background: #faf6ec !important;
  background-color: #faf6ec !important;
  background-image: none !important;
  border: 1px solid #d8c69a !important;
  border-top: 3px solid #B8860B !important;
  border-radius: 14px !important;
  padding: clamp(20px,3vw,34px) !important;
  box-shadow: 0 4px 18px rgba(12,35,64,.14) !important;
  color: #0C2340 !important;
}

/* Etiquetas → navy */
#jb_template .form-label,
#jb_template label,
#jb_template p,
#jb_template span {
  color: #0C2340 !important;
}

/* Inputs / textarea / select → blanco, borde crema */
#jb_template .form-control,
#jb_template input[type="text"],
#jb_template input[type="email"],
#jb_template textarea,
#jb_template select {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0C2340 !important;
  border: 1px solid #d8c69a !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}
#jb_template input::placeholder,
#jb_template textarea::placeholder { color: #7a715f !important; }

#jb_template .form-control:focus,
#jb_template input:focus,
#jb_template textarea:focus,
#jb_template select:focus {
  outline: none !important;
  border-color: #B8860B !important;
  background-color: #fffdf6 !important;
  box-shadow: 0 0 0 2px rgba(184,134,11,.18) !important;
}

/* Botón ENVIAR → dorado */
#jb_template button[type="submit"],
#jb_template input[type="submit"],
#jb_template .btn,
#jb_template .btn-primary {
  background: #B8860B !important;
  background-color: #B8860B !important;
  background-image: none !important;
  color: #020608 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(184,134,11,.28) !important;
}
#jb_template button[type="submit"]:hover,
#jb_template input[type="submit"]:hover,
#jb_template .btn:hover,
#jb_template .btn-primary:hover {
  background-color: #FFD060 !important;
  transform: translateY(-2px) !important;
}

/* Estrellas de calificación → dorado */
#jb_template .predefined-field-vote .star,
#jb_template .predefined-field-vote i {
  color: #B8860B !important;
}
/* ============================================================
   Instituto Dómina — Listado de testimonios (.testiItem) → CREMA
   Clases: #jt-menu, .testimonialsContainer, .testiItem
   Acotado a #jt-menu. Pegar al FINAL de user.css.
   ============================================================ */

/* Cada card de testimonio → crema */
#jt-menu .testiItem {
  background: #faf6ec !important;
  background-color: #faf6ec !important;
  background-image: none !important;
  border: 1px solid #d8c69a !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(12,35,64,.14) !important;
  color: #0C2340 !important;
}

/* Texto de la opinión → navy */
#jt-menu .testiItem p,
#jt-menu .testiItem .testi-text,
#jt-menu .testiItem span,
#jt-menu .testiItem div {
  color: #0C2340 !important;
}

/* Nombre del autor → navy fuerte */
#jt-menu .testiItem .testi-name,
#jt-menu .testiItem h3,
#jt-menu .testiItem h4,
#jt-menu .testiItem strong,
#jt-menu .testiItem b {
  color: #0C2340 !important;
}

/* Categoría / fecha → tono apagado */
#jt-menu .testiItem .testi-category,
#jt-menu .testiItem .testi-date,
#jt-menu .testiItem small,
#jt-menu .testiItem em {
  color: #7a715f !important;
}

/* Estrellas → dorado */
#jt-menu .testiItem .star,
#jt-menu .testiItem i,
#jt-menu .testiItem .testi-rating {
  color: #B8860B !important;
}

/* Enlaces dentro de la card → dorado */
#jt-menu .testiItem a {
  color: #8a6608 !important;
}
#jt-menu .testiItem a:hover {
  color: #B8860B !important;
}
/* ============================================================
   CHECKOUT OSMEMBERSHIP → CREMA  ·  v-FINAL
   PEGAR AL FINAL DE user.css (después de TODO lo demás).
   Usa body.com_osmembership para ganarle a las reglas oscuras viejas.
   ============================================================ */

/* CARD ÚNICO (#osm-signup-page) → CREMA  (pisa el rgba(70,130,180) del bloque v2.9) */
body.com_osmembership #osm-signup-page,
body.com_osmembership .osm-container {
  background-color: #faf6ec !important;
  background: #faf6ec !important;
  background-image: none !important;
  border: 1px solid #d8c69a !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 22px rgba(12,35,64,.14) !important;
  color: #0C2340 !important;
}

/* Cualquier contenedor OSM oscuro dentro del signup → crema */
body.com_osmembership #osm-signup-page .com-osmembership,
body.com_osmembership #osm-signup-page form,
body.com_osmembership #osm-signup-page .row,
body.com_osmembership #osm-signup-page .row.clearfix,
body.com_osmembership #osm-signup-page [class*="col-"] {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
}

/* TÍTULO "Suscripción" → dorado oscuro legible */
body.com_osmembership .osm-page-title,
body.com_osmembership #osm-signup-page .osm-page-title {
  color: #8a6608 !important;
}

/* SUBTÍTULO "Información de Pago" (h3.osm-heading) → dorado oscuro */
body.com_osmembership .osm-heading,
body.com_osmembership #osm-signup-page h3 {
  color: #8a6608 !important;
  border-bottom: 1px solid #d8c69a !important;
}

/* MENSAJE intro (.osm-message) y texto general → navy */
body.com_osmembership .osm-message,
body.com_osmembership #osm-signup-page p,
body.com_osmembership #osm-signup-page .description,
body.com_osmembership #osm-signup-page .form-text {
  color: #0C2340 !important;
}
/* Negrita del plan dentro del intro → dorado oscuro */
body.com_osmembership .osm-message strong,
body.com_osmembership #osm-signup-page p strong {
  color: #8a6608 !important;
}

/* LABELS (Nombre, País, Teléfono, Email, etc.) → navy  (pisa el #ffffff viejo) */
body.com_osmembership #osm-signup-page label,
body.com_osmembership #osm-signup-page .control-label,
body.com_osmembership #osm-signup-page .form-control-label,
body.com_osmembership #osm-signup-page .col-md-3.form-control-label {
  color: #0C2340 !important;
  font-weight: 600 !important;
}

/* ASTERISCO obligatorio → rojo de marca */
body.com_osmembership #osm-signup-page .required,
body.com_osmembership #osm-signup-page label .required,
body.com_osmembership #osm-signup-page .star {
  color: #cf3b35 !important;
}

/* INPUTS / SELECT → BLANCOS, texto navy, borde dorado tenue */
body.com_osmembership #osm-signup-page input[type="text"],
body.com_osmembership #osm-signup-page input[type="email"],
body.com_osmembership #osm-signup-page input[type="number"],
body.com_osmembership #osm-signup-page input[type="tel"],
body.com_osmembership #osm-signup-page select,
body.com_osmembership #osm-signup-page .form-control,
body.com_osmembership #osm-signup-page .eb-form-control input,
body.com_osmembership #osm-signup-page .eb-form-control select {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #0C2340 !important;
  border: 1px solid #d8c69a !important;
  border-radius: 8px !important;
  -webkit-text-fill-color: #0C2340 !important;
}
body.com_osmembership #osm-signup-page input::placeholder { color: #7a715f !important; }

/* OPCIONES DE PAGO (radios Tarjeta / Paypal) → navy */
body.com_osmembership #osm-signup-page #payment_method_container,
body.com_osmembership #osm-signup-page #payment_method_container label,
body.com_osmembership #osm-signup-page .payment_information,
body.com_osmembership #osm-signup-page .payment_information label {
  color: #0C2340 !important;
}

/* BADGES "USD" → dorado (ya estaban, reforzado dentro del signup) */
body.com_osmembership #osm-signup-page .input-group-text,
body.com_osmembership #osm-signup-page .input-group-addon,
body.com_osmembership #osm-signup-page .add-on {
  background-color: #B8860B !important;
  background: #B8860B !important;
  color: #020608 !important;
  border: 1px solid #B8860B !important;
  font-weight: 800 !important;
}

/* BOTÓN "Continuar al pago" → dorado, texto oscuro (pisa el #E8B800/azul viejo) */
body.com_osmembership #osm-signup-page .btn,
body.com_osmembership #osm-signup-page .btn-primary,
body.com_osmembership #osm-signup-page button[type="submit"],
body.com_osmembership #osm-signup-page input[type="submit"],
body.com_osmembership #osm-signup-page .form-actions .btn {
  background-color: #B8860B !important;
  background: linear-gradient(90deg, #B8860B 0%, #d4a017 100%) !important;
  background-image: linear-gradient(90deg, #B8860B 0%, #d4a017 100%) !important;
  color: #020608 !important;
  border: 1px solid #B8860B !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}
body.com_osmembership #osm-signup-page .btn:hover,
body.com_osmembership #osm-signup-page .btn-primary:hover,
body.com_osmembership #osm-signup-page button[type="submit"]:hover {
  background: linear-gradient(90deg, #a8780a 0%, #B8860B 100%) !important;
  background-image: linear-gradient(90deg, #a8780a 0%, #B8860B 100%) !important;
  color: #020608 !important;
}

/* TABLA resumen (si aparece) → crema legible */
body.com_osmembership #osm-signup-page table {
  background-color: #f3ecd8 !important;
  background: #f3ecd8 !important;
  color: #0C2340 !important;
}
body.com_osmembership #osm-signup-page table th {
  color: #8a6608 !important;
  background-color: #fbf2d8 !important;
  border-bottom: 1px solid #d8c69a !important;
}
body.com_osmembership #osm-signup-page table td {
  color: #0C2340 !important;
  border-bottom: 1px solid #d8c69a !important;
}

/* ENLACES dentro del signup → dorado oscuro */
body.com_osmembership #osm-signup-page a {
  color: #8a6608 !important;
}
body.com_osmembership #osm-signup-page a:hover {
  color: #B8860B !important;
}

/* Barra "¿Olvidó contraseña?" si aparece → texto navy sobre crema */
body.com_osmembership #osm-forgot-username-password,
body.com_osmembership #osm-forgot-username-password a {
  color: #0C2340 !important;
}
/* ============================================================
   PRODUCTO OSMEMBERSHIP → FONDO CREMA (3 zonas)
   Migra: fondo detrás de las tarjetas + franjas entre cards +
   banda vacía sobre COMPRAR.  La tabla Acceso/Precio NO se toca.
   Máxima especificidad para vencer reglas viejas (html body ...).
   Pegar al FINAL de user.css.
   ============================================================ */

/* 1) CONTENEDOR PRINCIPAL del producto → crema */
html body.com_osmembership #osm-plan-item,
html body.com_osmembership #osm-plan-item.osm-container,
html body.com_osmembership .osm-container,
html body.site.com_osmembership #osm-plan-item {
  background-color: #faf6ec !important;
  background: #faf6ec !important;
  background-image: none !important;
}

/* 2) FILAS / COLUMNAS / WRAPPERS internos → transparentes (heredan crema) */
html body.com_osmembership #osm-plan-item .osm-item-description,
html body.com_osmembership #osm-plan-item .osm-item-description.clearfix,
html body.com_osmembership #osm-plan-item .osm-item-heading-box,
html body.com_osmembership #osm-plan-item .row,
html body.com_osmembership #osm-plan-item .row.clearfix,
html body.com_osmembership #osm-plan-item .clearfix,
html body.com_osmembership #osm-plan-item [class*="col-"] {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
}

/* 3) BANDA vacía sobre COMPRAR (.osm-taskbar) → transparente */
html body.com_osmembership #osm-plan-item .osm-taskbar,
html body.com_osmembership #osm-plan-item .osm-taskbar.clearfix,
html body.com_osmembership .osm-taskbar.clearfix,
html body .osm-taskbar.clearfix {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* NOTA: la tabla "Acceso por / Precio" (.osm-plan-properties / .osm-taskbar table)
   conserva su fondo propio — NO se incluye acá a propósito. */
/* =========================================================
   CUENTA DE USUARIO — Membership Pro (Itemid 511)
   Tabla de suscripciones: tarjeta crema + texto navy
   Pegar al final de user.css
   ========================================================= */

/* Contenedor tabla = tarjeta crema */
body.itemid-511 table {
  background: #faf6ec !important;
  border: 1px solid #d8c69a !important;
  border-radius: 12px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}

/* Encabezado: barra navy con texto dorado */
body.itemid-511 table thead th,
body.itemid-511 table th {
  background: #0C2340 !important;
  color: #FFD060 !important;
  border-bottom: 2px solid #d8c69a !important;
  padding: 12px 14px !important;
  font-weight: 700 !important;
  text-align: left !important;
}

/* Celdas: fondo crema, texto navy */
body.itemid-511 table tbody td,
body.itemid-511 table td {
  background: #faf6ec !important;
  color: #0C2340 !important;
  border-bottom: 1px solid #e7dcbf !important;
  padding: 11px 14px !important;
}

/* Filas alternas (cebra suave) */
body.itemid-511 table tbody tr:nth-child(even) td {
  background: #f5eeda !important;
}

/* Última fila sin borde inferior */
body.itemid-511 table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Enlaces dentro de la tabla (factura / renovar) */
body.itemid-511 table a {
  color: #8a6608 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}
body.itemid-511 table a:hover {
  color: #0C2340 !important;
}
/* =====================================================================
   PÁGINA "EDITE SU PERFIL" (com_users / view=profile) → CLARA/CREMA  v4
   Scope: body.view-profile.  Contenido en crema, HEADER/NAV/FOOTER en navy.
   Pegar al FINAL de user.css, REEMPLAZANDO el bloque anterior.
   ===================================================================== */

/* 1) Fondo crema del body de esta página */
html body.site.view-profile{
  background:#fffdf7 !important;
  background-color:#fffdf7 !important;
  background-image:none !important;
}

/* 2) PROTEGER header/nav/footer: todo grid-child que NO sea el contenido → navy */
html body.site.view-profile .site-grid > .grid-child:not(.container-component){
  background:#030810 !important;
  background-color:#030810 !important;
  background-image:none !important;
}

/* 3) Contenido en crema (solo el bloque del componente) */
html body.site.view-profile .container-component,
html body.site.view-profile main,
html body.site.view-profile #content,
html body.site.view-profile .item-page,
html body.site.view-profile .com-users-profile-edit,
html body.site.view-profile .profile-edit,
html body.site.view-profile #member-profile{
  background:#fffdf7 !important;
  background-color:#fffdf7 !important;
  background-image:none !important;
  color:#0C2340 !important;
}

/* 4) Títulos, leyendas y etiquetas → oscuro legible */
body.view-profile .container-component h1,
body.view-profile .container-component h2,
body.view-profile .container-component h3,
body.view-profile .container-component h4,
body.view-profile .container-component legend,
body.view-profile .container-component label,
body.view-profile .container-component .control-label,
body.view-profile .container-component p{
  color:#0C2340 !important;
}

/* 5) Campos de texto y DESPLEGABLES → blanco, texto oscuro, borde visible */
body.view-profile .container-component input,
body.view-profile .container-component select,
body.view-profile .container-component textarea{
  background:#ffffff !important;
  background-color:#ffffff !important;
  color:#0C2340 !important;
  border:1px solid #d8c69a !important;
  -webkit-text-fill-color:#0C2340 !important;
}

/* 6) Texto de ayuda → gris suave legible */
body.view-profile .container-component small,
body.view-profile .container-component .form-text,
body.view-profile .container-component .text-muted{
  color:#7a715f !important;
}

/* 7) Botones del formulario → dorado (solo dentro del form) */
body.view-profile #member-profile button,
body.view-profile #member-profile .btn,
body.view-profile #member-profile [type="submit"]{
  background:#B8860B !important;
  background-color:#B8860B !important;
  color:#020608 !important;
  border:1px solid #8a6608 !important;
}
/* =========================================================
   H1 sin franja dorada — multi-artículo
   Para agregar uno nuevo: sumá su ID dentro del :is()
   en los 3 grupos.
   ========================================================= */
:is(
  #domina-home,
  #domina-trabajo,
  #domina-guia,
  #domina-unificado,
  #domina-method-page,
  #domina-webinars-page,
  #domina-live-page,
  #domina-novedades-page,
  #domina-soporte-page,
  #domina-faq-page,
  #manual-alumno-page
) .gold-strip:has(h1){
  background: #030810 !important;
  background-color: #030810 !important;
  background-image: none !important;
}
:is(
  #domina-home,
  #domina-trabajo,
  #domina-guia,
  #domina-unificado,
  #domina-method-page,
  #domina-webinars-page,
  #domina-live-page,
  #domina-novedades-page,
  #domina-soporte-page,
  #domina-faq-page,
  #manual-alumno-page
) .gold-strip:has(h1) h1{
  color: #ffffff !important;
}
:is(
  #domina-home,
  #domina-trabajo,
  #domina-guia,
  #domina-unificado,
  #domina-method-page,
  #domina-webinars-page,
  #domina-live-page,
  #domina-novedades-page,
  #domina-soporte-page,
  #domina-faq-page,
  #manual-alumno-page
) .gold-strip:has(h1) .strip-sub{
  color: #c2d0e8 !important;
}
/* =========================================================
   PÁGINA DE PERFIL → Card centrada (no borde a borde)
   ========================================================= */

/* 1. Wrappers padres → CREMA (antes navy) */
html body.site.view-profile.layout-edit,
html body.site.view-profile.layout-edit .site-grid,
html body.site.view-profile.layout-edit .container-component,
html body.site.view-profile.layout-edit main,
html body.site.view-profile.layout-edit .com-users-profile__edit {
  background: #faf6ec !important;
  background-color: #faf6ec !important;
  background-image: none !important;
}

/* 2. SOLO el form → card crema centrada */
html body.site.view-profile.layout-edit #member-profile {
  background: #faf6ec !important;
  background-color: #faf6ec !important;
  max-width: 980px !important;
  margin: 40px auto !important;
  border-radius: 16px !important;
  padding: clamp(28px, 4vw, 56px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45) !important;
}
/* =========================================================
   PÁGINA DE PERFIL — Sub-cards internas (passkey, multifactor)
   ========================================================= */

/* Sub-cards: fondo crema-2 con borde dorado */
html body.site.view-profile.layout-edit #member-profile .card,
html body.site.view-profile.layout-edit #member-profile .bg-light {
  background: #f3ecd8 !important;
  background-color: #f3ecd8 !important;
  border: 1px solid #d8c69a !important;
  color: #0C2340 !important;
}

/* Header y body de las sub-cards: transparentes (heredan el crema-2) */
html body.site.view-profile.layout-edit #member-profile .card-header,
html body.site.view-profile.layout-edit #member-profile .card-body {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom-color: #d8c69a !important;
}

/* Títulos dentro de las sub-cards (YubiKey, Passkey, etc.) → navy legible */
html body.site.view-profile.layout-edit #member-profile .card h2,
html body.site.view-profile.layout-edit #member-profile .card h3,
html body.site.view-profile.layout-edit #member-profile .card h4,
html body.site.view-profile.layout-edit #member-profile .card .h4,
html body.site.view-profile.layout-edit #member-profile .card span {
  color: #0C2340 !important;
}

/* Legend de fieldsets ("Autenticación multifactor", "Inicio de sesión...") */
html body.site.view-profile.layout-edit #member-profile fieldset > legend {
  color: #0C2340 !important;
  font-weight: 700 !important;
}
/* =========================================================
   Membership Pro → wrappers en navy (igual al resto del sitio)
   ========================================================= */
html body[class*="osmembership"],
html body[class*="osmembership"] .site-grid,
html body[class*="osmembership"] .container-main,
html body[class*="osmembership"] .container-component,
html body[class*="osmembership"] main,
html body[class*="osmembership"] #content,
html body[class*="osmembership"] .item-page,
html body[class*="planinformation"],
html body[class*="planinformation"] .site-grid,
html body[class*="planinformation"] .container-main,
html body[class*="planinformation"] .container-component,
html body[class*="planinformation"] main,
html body[class*="planinformation"] #content,
html body[class*="planinformation"] .item-page {
  background: #faf6ec !important;
  background-color: #faf6ec !important;
  background-image: none !important;
}
/* =====================================================================
   FOOTER · CIERRE FUERTE  v5 (final)
   - Estira <footer> a 100vw (su clase full-width no estaba surtiendo efecto).
   - Constriñe el .grid-child de adentro al ancho original → contenido no se desparrama.
   - Módulo transparente para que no se vea el "cuadro" interno.
   - margin-top:0 + margin-bottom:0 → cierra huecos crema arriba y abajo.
   - border-radius:0 → esquinas rectas.
   - border-bottom:none → sin línea/borde inferior.
   Pegar al FINAL de user.css. REEMPLAZA v4/v5 anterior completo.
   ===================================================================== */

/* 1) <footer> estirado a 100vw + navy + pegado arriba y abajo + esquinas rectas */
html body footer.container-footer.footer{
  width:100vw !important;
  max-width:100vw !important;
  position:relative !important;
  left:50% !important;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  border-radius:0 !important;
  border-bottom:none !important;
  background-color:#0a1120 !important;
  background:#0a1120 !important;
  background-image:none !important;
}

/* 2) .grid-child centrado y limitado al ancho original (no spread de columnas) */
html body footer.container-footer.footer > .grid-child{
  max-width:1320px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  background:transparent !important;
  background-color:transparent !important;
  padding-left:clamp(24px,5vw,72px) !important;
  padding-right:clamp(24px,5vw,72px) !important;
  border-radius:0 !important;
}

/* 3) Módulo del footer transparente (anula la regla genérica .mod-custom de user.css l.524) */
html body footer.container-footer.footer #mod-custom167{
  background:transparent !important;
  background-color:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:clamp(40px,6vw,70px) 0 !important;
}
/* =====================================================================
   SUBCATEGORÍAS · com_content category blog → tarjetas crema
   - Hereda el estilo de las cards del home (gradiente crema + gold-top + navy ink)
   - Apunta a las clases estándar de Joomla: .com-content-category-blog__child
     + .cat-children > li + .category-children > li (todas se usan).
   - Wrapper transparente (deja ver el crema del body).
   Pegar al FINAL de user.css.
   ===================================================================== */

/* 1) Tarjetas individuales → crema con gradiente + borde dorado */
html body .com-content-category-blog__child,
html body .com-content-category-blog__children > div,
html body .com-content-category-blog__children > ul > li,
html body .category-children > li,
html body .cat-children > li {
  background: linear-gradient(180deg, #fbf2d8 0%, #faf6ec 100%) !important;
  background-color: #faf6ec !important;
  border: 1px solid #d8c69a !important;
  border-top: 3px solid #B8860B !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 12px rgba(12, 35, 64, 0.10) !important;
  transition: transform 0.35s cubic-bezier(0.15, 0, 0.15, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease !important;
}

/* 2) Hover → lift + sombra dorada (consistente con cards del aula) */
html body .com-content-category-blog__child:hover,
html body .category-children > li:hover,
html body .cat-children > li:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 32px rgba(184, 134, 11, 0.22) !important;
  border-color: #B8860B !important;
}

/* 3) Texto dentro → navy ink (títulos, links, párrafos) */
html body .com-content-category-blog__child,
html body .com-content-category-blog__child h2,
html body .com-content-category-blog__child h3,
html body .com-content-category-blog__child h4,
html body .com-content-category-blog__child p,
html body .com-content-category-blog__child a,
html body .com-content-category-blog__child a:link,
html body .com-content-category-blog__child a:visited,
html body .category-children > li,
html body .category-children > li h2,
html body .category-children > li h3,
html body .category-children > li a,
html body .cat-children > li,
html body .cat-children > li h2,
html body .cat-children > li h3,
html body .cat-children > li a {
  color: #0C2340 !important;
}

/* 4) Hover de links interiores → dorado para feedback */
html body .com-content-category-blog__child a:hover,
html body .category-children > li a:hover,
html body .cat-children > li a:hover {
  color: #8a6608 !important;
}

/* 5) Wrapper de las subcategorías → transparente
   (deja ver el crema del body, sin "tray" navy de fondo) */
html body .com-content-category-blog__children,
html body .category-children,
html body .cat-children {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  padding: 30px 0 !important;
  margin: 30px auto !important;
}
/* =====================================================================
   SUBCATEGORÍAS · Hover DORADO SUAVE (pale gold)
   - Pale-gold gradient (sutil, no saturado)
   - Borde mantiene tono crema (sin salto visual fuerte)
   - Sombra y lift atenuados
   Pegar al FINAL de user.css. REEMPLAZA al hover dorado anterior.
   ===================================================================== */

/* Transición base suave (entrada y salida del hover) */
html body.site .com-content-category-blog__child,
html body.site .com-content-category-blog__children > div,
html body.site .com-content-category-blog__children > ul > li,
html body.site .category-children > li,
html body.site .cat-children > li {
  transition: background 0.3s ease,
              background-color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              transform 0.3s ease !important;
}

/* HOVER — pale gold sutil + lift suave */
html body.site .com-content-category-blog__child:hover,
html body.site .com-content-category-blog__child:hover a,
html body.site .com-content-category-blog__child a:hover,
html body.site .com-content-category-blog__children > div:hover,
html body.site .com-content-category-blog__children > div:hover a,
html body.site .com-content-category-blog__children > ul > li:hover,
html body.site .com-content-category-blog__children > ul > li:hover a,
html body.site .category-children > li:hover,
html body.site .category-children > li:hover a,
html body.site .cat-children > li:hover,
html body.site .cat-children > li:hover a {
  background: linear-gradient(180deg, #FFF4D0 0%, #FFE699 100%) !important;
  background-color: #FFE699 !important;
  background-image: linear-gradient(180deg, #FFF4D0 0%, #FFE699 100%) !important;
  border: 1px solid #d8c69a !important;
  border-top: 3px solid #B8860B !important;
  color: #0C2340 !important;
  box-shadow: 0 6px 18px rgba(184, 134, 11, 0.18) !important;
  transform: translateY(-2px) !important;
}

/* Títulos en hover: navy intenso, fondo transparente para dejar ver el dorado */
html body.site .com-content-category-blog__child:hover h3,
html body.site .com-content-category-blog__child:hover h3 a,
html body.site .com-content-category-blog__child:hover h4,
html body.site .com-content-category-blog__child:hover h4 a,
html body.site .com-content-category-blog__children > div:hover h3,
html body.site .com-content-category-blog__children > div:hover h3 a,
html body.site .com-content-category-blog__children > ul > li:hover h3,
html body.site .com-content-category-blog__children > ul > li:hover h3 a,
html body.site .category-children > li:hover h3,
html body.site .category-children > li:hover h3 a,
html body.site .cat-children > li:hover h3,
html body.site .cat-children > li:hover h3 a {
  color: #0C2340 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* =====================================================================
   SUBCATEGORÍAS · Fondo navy edge-to-edge
   - Override del crema global (user.css línea 3262: #e8dab2)
   - Anchor: :has(.com-content-category-blog) — wrapper confirmado en DOM
   - Specificity: html:has(.com-content-category-blog) body.site .x = (0,3,2)
                  vs cream (0,1,2) → gana cómodo
   Pegar al FINAL de user.css.
   ===================================================================== */
html:has(.com-content-category-blog) body.site,
html:has(.com-content-category-blog) body.site .site-grid,
html:has(.com-content-category-blog) body.site div.site-grid,
html:has(.com-content-category-blog) body.site .container-main,
html:has(.com-content-category-blog) body.site .container-component,
html:has(.com-content-category-blog) body.site .container-banner,
html:has(.com-content-category-blog) body.site .container-main-bottom,
html:has(.com-content-category-blog) body.site .container-bottom-a,
html:has(.com-content-category-blog) body.site .container-bottom-b,
html:has(.com-content-category-blog) body.site main,
html:has(.com-content-category-blog) body.site #content,
html:has(.com-content-category-blog) body.site .item-page,
html:has(.com-content-category-blog) body.site .com-content-category-blog {
  background-color: #faf6ec !important;
  background: #faf6ec !important;
  background-image: none !important;
}
/* =====================================================================
   SUBCATEGORÍAS · Matar marco crema/dorado de .main-bottom.card
   - Fuente del marco: user.css línea 2661 (.main-bottom.card cream+gold)
   - Mismo scope que el fondo navy: solo en páginas de categoría
   - Specificity: html:has(...) body.site .main-bottom.card = (0,4,2)
                  vs .main-bottom.card (0,2,0) → gana cómodo
   Pegar al FINAL de user.css (después del bloque "fondo navy v2").
   ===================================================================== */
html:has(.com-content-category-blog) body.site .main-bottom.card,
html:has(.com-content-category-blog) body.site .card.main-bottom,
html:has(.com-content-category-blog) body.site .bottom-a.card,
html:has(.com-content-category-blog) body.site .card.bottom-a,
html:has(.com-content-category-blog) body.site .bottom-b.card,
html:has(.com-content-category-blog) body.site .card.bottom-b,
html:has(.com-content-category-blog) body.site .main-bottom .card-body,
html:has(.com-content-category-blog) body.site .bottom-a .card-body,
html:has(.com-content-category-blog) body.site .bottom-b .card-body {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* =====================================================================
   SUBCATEGORÍAS · Ocultar mensaje "Haga clic en el ítem de su interés"
   - Cubre varias variantes (descripción de categoría, alert, item-description)
   - Scope: solo páginas de categoría (no afecta alerts en otras vistas)
   Pegar al FINAL de user.css.
   ===================================================================== */
html:has(.com-content-category-blog) body.site .com-content-category-blog__description,
html:has(.com-content-category-blog) body.site .com-content-category-blog__intro,
html:has(.com-content-category-blog) body.site .com-content-category-blog .alert,
html:has(.com-content-category-blog) body.site .com-content-category-blog .alert-info,
html:has(.com-content-category-blog) body.site .com-content-category-blog .category-desc,
html:has(.com-content-category-blog) body.site .com-content-category-blog .item-description,
html:has(.com-content-category-blog) body.site .com-content-category-blog > .alert {
  display: none !important;
}
/* =====================================================================
   SUBCATEGORÍAS · Títulos de artículos en BLANCO
   - Override del color navy heredado que queda invisible sobre fondo navy
   - Cubre h2/h3 y enlaces dentro de items de blog
   Pegar al FINAL de user.css.
   ===================================================================== */
html:has(.com-content-category-blog) body.site .com-content-category-blog__items h2,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items h2 a,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items h3,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items h3 a,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items .page-header h2,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items .page-header h2 a,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items .page-header h3,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items .page-header h3 a,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items .item-title,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items .item-title a,
html:has(.com-content-category-blog) body.site .com-content-category-blog__item h2,
html:has(.com-content-category-blog) body.site .com-content-category-blog__item h2 a,
html:has(.com-content-category-blog) body.site .com-content-category-blog__item h3,
html:has(.com-content-category-blog) body.site .com-content-category-blog__item h3 a,
html:has(.com-content-category-blog) body.site .com-content-category-blog__item .page-header h2,
html:has(.com-content-category-blog) body.site .com-content-category-blog__item .page-header h2 a,
html:has(.com-content-category-blog) body.site .com-content-category-blog__item .item-title,
html:has(.com-content-category-blog) body.site .com-content-category-blog__item .item-title a {
  color: #0C2340 !important;
}

/* Hover de título: dorado (acento de marca) */
html:has(.com-content-category-blog) body.site .com-content-category-blog__items h2 a:hover,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items h3 a:hover,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items .page-header h2 a:hover,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items .item-title a:hover,
html:has(.com-content-category-blog) body.site .com-content-category-blog__item h2 a:hover,
html:has(.com-content-category-blog) body.site .com-content-category-blog__item h3 a:hover,
html:has(.com-content-category-blog) body.site .com-content-category-blog__item .page-header h2 a:hover,
html:has(.com-content-category-blog) body.site .com-content-category-blog__item .item-title a:hover {
  color: #8a6608 !important;
}
/* =====================================================================
   SUBCATEGORÍAS · Bloque "Detalles" + metadata + breadcrumb en BLANCO
   - Cubre <details>/<summary>, .article-info, breadcrumb, category-info
   Pegar al FINAL de user.css.
   ===================================================================== */
html:has(.com-content-category-blog) body.site details,
html:has(.com-content-category-blog) body.site details summary,
html:has(.com-content-category-blog) body.site details dl,
html:has(.com-content-category-blog) body.site details dt,
html:has(.com-content-category-blog) body.site details dd,
html:has(.com-content-category-blog) body.site details a,
html:has(.com-content-category-blog) body.site .article-info,
html:has(.com-content-category-blog) body.site .article-info dt,
html:has(.com-content-category-blog) body.site .article-info dd,
html:has(.com-content-category-blog) body.site .article-info a,
html:has(.com-content-category-blog) body.site .article-info-term,
html:has(.com-content-category-blog) body.site .breadcrumb,
html:has(.com-content-category-blog) body.site .breadcrumb a,
html:has(.com-content-category-blog) body.site .breadcrumb span,
html:has(.com-content-category-blog) body.site .breadcrumb li,
html:has(.com-content-category-blog) body.site .com-content-category-blog__category-info,
html:has(.com-content-category-blog) body.site .com-content-category-blog__category-info a,
html:has(.com-content-category-blog) body.site .com-content-category-blog__category-info span,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items > div > dl,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items > div > dl dt,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items > div > dl dd,
html:has(.com-content-category-blog) body.site .com-content-category-blog__items > div > dl a {
  color: #0C2340 !important;
}

/* Hover en enlaces de metadata: dorado */
html:has(.com-content-category-blog) body.site details a:hover,
html:has(.com-content-category-blog) body.site .article-info a:hover,
html:has(.com-content-category-blog) body.site .breadcrumb a:hover,
html:has(.com-content-category-blog) body.site .com-content-category-blog__category-info a:hover {
  color: #8a6608 !important;
}
/* Ocultar barra de instalación PWA en iOS */
div.ios_prompt { display: none !important; }
/* Ocultar barra de instalación PWA en Android */
.addtohomescreen-prompt { display: none !important; }

/* Ocultar ícono flotante de instalación (variante "solo ícono") */
.prompt-opener-container { display: none !important; }
/* ===== RSForm! Pro Directory – responsive (Instituto Dómina) ===== */
body.com_rsform table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse;
}
body.com_rsform table th,
body.com_rsform table td {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    padding: 8px 6px !important;
    vertical-align: top;
}
/* En móvil, si igual no entra: scroll horizontal de respaldo */
@media (max-width: 600px) {
    body.com_rsform main,
    body.com_rsform .item-page {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* ===== Módulo de acceso (mod_login) en crema ===== */

/* Tarjeta + cabecera + cuerpo -> crema */
body#top .card:has(form.mod-login),
body#top .card:has(form.mod-login) > .card-header,
body#top .card:has(form.mod-login) > .card-body {
    background: #faf6ec !important;
    border-color: #d8c69a !important;
    color: #0C2340 !important;
}

/* Título del módulo -> tinta */
body#top .card:has(form.mod-login) > .card-header {
    color: #0C2340 !important;
}

/* Etiquetas y "Recuérdeme" -> tinta */
body#top form.mod-login label,
body#top form.mod-login .control-label,
body#top form.mod-login .mod-login__remember {
    color: #0C2340 !important;
}

/* Quitar fondo oscuro de la barra del passkey */
body#top form.mod-login .mod-login__submit {
    background: transparent !important;
    border: 0 !important;
}

/* Botón passkey -> crema con borde */
body#top form.mod-login .plg_system_webauthn_login_button,
body#top form.mod-login button[id^="plg_system_webauthn"] {
    background: #faf6ec !important;
    border: 1px solid #d8c69a !important;
    border-radius: 8px !important;
    color: #0C2340 !important;
    padding: .55rem 1rem !important;
}

/* Enlaces de abajo -> tinta */
body#top form.mod-login .mod-login__options,
body#top form.mod-login .mod-login__options li,
body#top form.mod-login .mod-login__options a {
    color: #0C2340 !important;
}
body#top form.mod-login .mod-login__options a:hover {
    color: #8a6608 !important;
}
/* ===== LOGIN crema (Instituto Dómina) ===== */
#top.com_users .com-users-login__form {
    background: #faf6ec !important;
    border: 1px solid #d8c69a !important;
    border-radius: 12px !important;
    padding: 1.5rem 1.25rem !important;
    color: #0C2340 !important;
    box-shadow: 0 4px 14px rgba(12, 35, 64, .10);
}
#top.com_users .com-users-login__form label,
#top.com_users .com-users-login__form .control-label,
#top.com_users .com-users-login__remember,
#top.com_users .com-users-login__remember label,
#top.com_users .com-users-login__form legend {
    color: #0C2340 !important;
}
#top.com_users .com-users-login__form .com-users-login__submit {
    background: transparent !important;
    border: 0 !important;
}
#top.com_users .com-users-login__form .plg_system_webauthn_login_button,
#top.com_users .com-users-login__form button[id^="plg_system_webauthn"] {
    background: #faf6ec !important;
    border: 1px solid #d8c69a !important;
    border-radius: 8px !important;
    color: #0C2340 !important;
    padding: .55rem 1rem !important;
}
#top.com_users .com-users-login__options {
    background: #faf6ec !important;
    border: 1px solid #d8c69a !important;
    border-radius: 12px !important;
    margin-top: 1rem !important;
    overflow: hidden;
}
#top.com_users .com-users-login__options .list-group-item {
    background: #faf6ec !important;
    border-color: #d8c69a !important;
}
#top.com_users .com-users-login__options a,
#top.com_users .com-users-login__options .list-group-item,
#top.com_users .com-users-login__options .list-group-item a {
    color: #0C2340 !important;
}
#top.com_users .com-users-login__options a:hover {
    color: #8a6608 !important;
}
/* ============================================================
   DJ-MEGAMENU — Tipografía del submenú a 13px (era 14px)
   PEGAR AL FINAL de user.css
   ============================================================ */
html body .dj-megamenu .dj-submenu a,
html body .dj-megamenu .dj-submenu .dj-up-a,
html body .dj-megamenu .dj-submenu .dj-menutitle,
html body .dj-megamenu ul.dj-submenu li > a {
    font-size: 14px !important;
    line-height: 1.3 !important;
}
/* ===== FRANJA SUPERIOR (body + site-grid) A NEGRO — GLOBAL ===== */
html body#top.site,
html body#top.site .site-grid{background:#000000!important;background-image:none!important;}

/* ===== HEADER SIEMPRE NEGRO — GLOBAL ===== */
html body#top.site header,
html body#top.site header.header,
html body#top.site .container-header,
html body#top.site header.full-width,
html body#top.site header > div,
html body#top.site #sp-header{background:#000000!important;background-image:none!important;}

/* ===== TODAS LAS FRANJAS FULL-WIDTH DE MÓDULOS A NEGRO — GLOBAL ===== */
/* Pinta cada banda de módulo del grid, excepto el contenido del artículo */
html body#top.site .site-grid > .grid-child:not(.container-component),
html body#top.site .grid-child.full-width,
html body#top.site .full-width{
  background:#000000!important;
  background-image:none!important;
}
/* ===== FONDO DEL CONTENEDOR DE CONTENIDO A NEGRO — GLOBAL ===== */
/* La franja crema sobrante es el fondo de container-component; las tarjetas conservan su crema propio */
html body#top.site .site-grid > .grid-child.container-component{
  background:#000000!important;
  background-image:none!important;
}
/* ===== BODY A CREMA — ÚNICO CAMBIO. Header y footer siguen negros ===== */
html body#top.site,
html body#top.site .site-grid,
html body#top.site .site-grid > .grid-child.container-component{
  background:#faf6ec!important;
  background-image:none!important;
}
/* ============================================================
   OVERRIDE ULTRA-ESPECÍFICO — gana sobre los <style> de TODOS
   los artículos. Repite el ID (#top#top) para subir especificidad.
   Header negro · Footer negro · Body crema
   ============================================================ */

/* BODY + GRID + CONTENIDO → CREMA */
html body#top#top.site,
html body#top#top.site .site-grid,
html body#top#top.site .site-grid > .grid-child.container-component{
  background:#faf6ec!important;
  background-image:none!important;
}

/* HEADER → NEGRO */
html body#top#top.site header,
html body#top#top.site header.header,
html body#top#top.site .container-header,
html body#top#top.site #sp-header{
  background:#000000!important;
  background-image:none!important;
}

/* FOOTER → NEGRO */
html body#top#top.site footer,
html body#top#top.site footer.container-footer,
html body#top#top.site .container-footer{
  background:#000000!important;
  background-image:none!important;
}
/* ============================================================
   MEMBERSHIP PRO — Tabla Acceso/Precio: TEXTO OSCURO sobre crema
   (antes blanco sobre navy → ahora invisible sobre claro)
   Pegado al final: gana por orden a los color:#fff previos.
   ============================================================ */
html body[class*="osmembership"] .osm-plan-properties,
html body[class*="osmembership"] .osm-plan-properties th,
html body[class*="osmembership"] .osm-plan-properties td,
html body[class*="osmembership"] .osm-plan-properties td *,
html body[class*="osmembership"] .osm-plan-property-name,
html body[class*="osmembership"] .osm-plan-property-name *,
html body[class*="osmembership"] .osm-plan-property-value,
html body[class*="osmembership"] .osm-plan-property-value *,
html body[class*="osmembership"] .osm-plan-property-label,
html body[class*="osmembership"] .osm-plan-property-title,
html body[class*="osmembership"] .osm-plan-property-caption,
html body[class*="osmembership"] .osm-plan-price,
html body[class*="osmembership"] .osm-plan-price *,
html body[class*="osmembership"] .osm-price,
html body[class*="osmembership"] .osm-price *,
html body[class*="osmembership"] .osm-taskbar table,
html body[class*="osmembership"] .osm-taskbar table th,
html body[class*="osmembership"] .osm-taskbar table td,
html body[class*="osmembership"] .osm-taskbar table td *,
html body[class*="osmembership"] #osm-plan-item table th,
html body[class*="osmembership"] #osm-plan-item table td,
html body[class*="osmembership"] #osm-plan-item table td *,
html body[class*="planinformation"] .osm-plan-properties th,
html body[class*="planinformation"] .osm-plan-properties td,
html body[class*="planinformation"] .osm-plan-properties td *,
html body[class*="planinformation"] .osm-plan-property-name,
html body[class*="planinformation"] .osm-plan-property-value,
html body[class*="planinformation"] .osm-plan-property-value *,
html body[class*="planinformation"] .osm-plan-price,
html body[class*="planinformation"] .osm-plan-price * {
  color: #0C2340 !important;
  -webkit-text-fill-color: #0C2340 !important;
}
/* =====================================================================
   CURSOS AUDIOVISUALES (.aula-container) → CREMA · REGLA ÚNICA PARA TODOS
   - Ancla: html:has(.aula-container) — mismo patrón que subcategorías
   - Especificidad (0,3,x)+ vence al <style> del propio artículo
   - Migra TODOS los cursos sin editar cada artículo
   - No toca HTML ni JS (lazy-load Vimeo, tabs, localStorage intactos)
   ===================================================================== */
/* 1. Fondos: página + contenedores Joomla + wrapper del curso → crema */
html:has(.aula-container) body.site,
html:has(.aula-container) body.site .site-grid,
html:has(.aula-container) body.site div.site-grid,
html:has(.aula-container) body.site .container-main,
html:has(.aula-container) body.site .container-component,
html:has(.aula-container) body.site main,
html:has(.aula-container) body.site #content,
html:has(.aula-container) body.site .item-page,
html:has(.aula-container) body.site .com-content-article__body,
html:has(.aula-container) body.site .aula-container,
html:has(.aula-container) body.site .container-bottom-a,
html:has(.aula-container) body.site .container-bottom-b,
html:has(.aula-container) body.site .container-main-bottom,
html:has(.aula-container) body.site .grid-child:has(#ix-wrap),
html:has(.aula-container) body.site .main-bottom:has(#ix-wrap),
html:has(.aula-container) body.site .card:has(#ix-wrap),
html:has(.aula-container) body.site .card-body:has(#ix-wrap),
html:has(.aula-container) body.site .mod-custom:has(#ix-wrap) {
  background-color: #faf6ec !important;
  background: #faf6ec !important;
  background-image: none !important;
}

/* 2. Barra de módulos (contenedor) → crema-2 con borde dorado */
html:has(.aula-container) body.site .tabs-nav {
  background: #f3ecd8 !important;
  border: 1px solid #d8c69a !important;
}

/* 3. Botones de módulo (inactivos) → navy con texto claro */
html:has(.aula-container) body.site .tab-btn {
  background: #0C2340 !important;
  border: 1px solid #0C2340 !important;
  color: #ffffff !important;
}
html:has(.aula-container) body.site .tab-btn:hover {
  background: #B8860B !important;
  border-color: #B8860B !important;
  color: #02060c !important;
  transform: translateY(-2px) !important;
}
/* Botón activo → dorado (acento de marca) */
html:has(.aula-container) body.site .tab-btn.active {
  background: #B8860B !important;
  border-color: #B8860B !important;
  color: #02060c !important;
  box-shadow: 0 0 18px rgba(184,134,11,0.35) !important;
}

/* 4. Tarjeta del módulo → crema con borde dorado */
html:has(.aula-container) body.site .module-card {
  background: #faf6ec !important;
  border: 1px solid #d8c69a !important;
  border-top: 3px solid #B8860B !important;
  box-shadow: 0 14px 32px rgba(12,35,64,0.12) !important;
}
/* Título del módulo → navy */
html:has(.aula-container) body.site .module-card h3 {
  color: #0C2340 !important;
}

/* 5. Checkbox "Módulo finalizado" → crema-2 + texto navy */
html:has(.aula-container) body.site .checkbox-container {
  background: #f3ecd8 !important;
  border: 1px solid #d8c69a !important;
}
html:has(.aula-container) body.site .checkbox-container span {
  color: #0C2340 !important;
}
html:has(.aula-container) body.site .checkbox-container:has(input:checked) span {
  color: #8a6608 !important;
}

/* 6. Pie del curso → texto oscuro + borde dorado */
html:has(.aula-container) body.site .dm-tabs-footer {
  border-top: 1px solid #d8c69a !important;
}
html:has(.aula-container) body.site .dm-footer-left,
html:has(.aula-container) body.site .dm-footer-right {
  color: #3a4256 !important;
}
/* =====================================================================
   ASISTENTE DE ESTUDIO (ImagingXpert) → tarjeta dark sobre fondo crema
   - GLOBAL: el módulo aparece en muchas páginas, no solo en cursos
   - Vence a la regla vieja (.mod-custom/.card #0a1120) que pintaba su
     contenedor oscuro. El widget #ix-session-widget conserva su dark.
   - :has(#ix-wrap) + ID adentro = especificidad (1,2,2), gana cómodo.
   ===================================================================== */
html body.site *:has(> #ix-wrap),
html body.site .mod-custom:has(#ix-wrap),
html body.site .module:has(#ix-wrap),
html body.site .card:has(#ix-wrap),
html body.site .card-body:has(#ix-wrap),
html body.site .main-bottom:has(#ix-wrap),
html body.site .grid-child:has(#ix-wrap),
html body.site .container-component:has(#ix-wrap),
html body.site .container-bottom-a:has(#ix-wrap),
html body.site .container-bottom-b:has(#ix-wrap),
html body.site .container-main-bottom:has(#ix-wrap),
html body.site main:has(#ix-wrap),
html body.site #content:has(#ix-wrap),
html body.site .item-page:has(#ix-wrap) {
  background-color: #faf6ec !important;
  background: #faf6ec !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* =====================================================================
   CABECERA PRINCIPAL (gold-strip con h1) de páginas #domina-* → CREMA
   - Generaliza el fix del título: no depende de editar cada artículo
   - Solo la franja del h1 (cabecera). Las franjas de sección (h2) quedan doradas.
   - Especificidad (1,3,1) vence al .gold-strip {#B8860B} del artículo
   ===================================================================== */
html body#top [id^="domina-"] .gold-strip:has(h1) {
  background: #faf6ec !important;
  border-bottom: 2px solid #d8c69a !important;
}
html body#top [id^="domina-"] .gold-strip:has(h1) h1 {
  color: #0C2340 !important;
}
html body#top [id^="domina-"] .gold-strip:has(h1) .strip-sub {
  color: #3a4256 !important;
}
/* =====================================================================
   CURSOS (.aula-container) → ocultar metadata Joomla "Detalles/Categoría"
   - El reset del artículo la dejaba como banda NEGRA con texto invisible
   - Mismo criterio que línea 32 (article-info oculto en otras vistas)
   ===================================================================== */
html:has(.aula-container) body.site .article-info,
html:has(.aula-container) body.site .item-content > .page-header,
html:has(.aula-container) body.site .com-content-category-blog__item .article-info {
  display: none !important;
}
/* =====================================================================
   CLASES PRÁCTICAS / SHOWCASE INDIVIDUAL (#dm-showcase-wrapper) → CREMA
   - REGLA ÚNICA para todas (mismo patrón que cursos .aula-container)
   - Vence al reset navy del propio artículo por especificidad
   - El reproductor Vimeo y el iframe quedan intactos
   ===================================================================== */
/* Fondos: página + contenedores + wrapper → crema */
html:has(#dm-showcase-wrapper) body.site,
html:has(#dm-showcase-wrapper) body.site .site-grid,
html:has(#dm-showcase-wrapper) body.site div.site-grid,
html:has(#dm-showcase-wrapper) body.site .container-main,
html:has(#dm-showcase-wrapper) body.site .container-component,
html:has(#dm-showcase-wrapper) body.site main,
html:has(#dm-showcase-wrapper) body.site #content,
html:has(#dm-showcase-wrapper) body.site .item-page,
html:has(#dm-showcase-wrapper) body.site .com-content-article__body,
html:has(#dm-showcase-wrapper) body.site #dm-showcase-wrapper {
  background-color: #faf6ec !important;
  background: #faf6ec !important;
  background-image: none !important;
}
/* Título → navy */
html:has(#dm-showcase-wrapper) body.site .dm-showcase-header h1 {
  color: #0C2340 !important;
  text-shadow: none !important;
}
/* Subtítulo → gris oscuro */
html:has(#dm-showcase-wrapper) body.site .dm-showcase-header p {
  color: #3a4256 !important;
}
/* Badge → dorado oscuro legible sobre crema */
html:has(#dm-showcase-wrapper) body.site .dm-showcase-badge {
  color: #8a6608 !important;
  background: rgba(184,134,11,0.10) !important;
  border-color: rgba(184,134,11,0.35) !important;
}
/* Pie → gris oscuro */
html:has(#dm-showcase-wrapper) body.site .dm-footer-left,
html:has(#dm-showcase-wrapper) body.site .dm-footer-right {
  color: #3a4256 !important;
}
/* Ocultar metadata Joomla (banda negra Detalles/Categoría) */
html:has(#dm-showcase-wrapper) body.site .article-info,
html:has(#dm-showcase-wrapper) body.site .item-content > .page-header,
html:has(#dm-showcase-wrapper) body.site .com-content-category-blog__item .article-info {
  display: none !important;
}
/* =====================================================================
   PÁGINAS #domina-* → CREMA · GENERALIZACIÓN (no editar cada artículo)
   - Redefine las variables navy del artículo a crema DENTRO del wrapper
     (definición directa en el wrapper gana sobre el :root del artículo)
   - Contenedores Joomla a crema; headings a navy; acentos amarillos a dorado
   - gold-strips quedan doradas; cabecera h1 ya en crema (regla previa)
   ===================================================================== */
html body#top [id^="domina-"] {
  --navy:     #faf6ec !important;
  --navy-2:   #f3ecd8 !important;
  --navy-3:   #f3ecd8 !important;
  --text:     #0C2340 !important;
  --text-sub: #3a4256 !important;
}
html:has([id^="domina-"]) body.site main,
html:has([id^="domina-"]) body.site #content,
html:has([id^="domina-"]) body.site .item-page,
html:has([id^="domina-"]) body.site .com-content-article,
html:has([id^="domina-"]) body.site .com-content-article__body {
  background-color: #faf6ec !important;
  background: #faf6ec !important;
  background-image: none !important;
}
/* Headings hardcoded #fff → navy (incluye "heading-div" tipo .video-heading) */
html body#top [id^="domina-"] h1,
html body#top [id^="domina-"] h2,
html body#top [id^="domina-"] h3,
html body#top [id^="domina-"] h4,
html body#top [id^="domina-"] .video-heading {
  color: #0C2340 !important;
}
/* Labels/acentos amarillos (#FFD060) → dorado oscuro legible en crema */
html body#top [id^="domina-"] .video-label,
html body#top [id^="domina-"] .hero-section h2 .accent {
  color: #8a6608 !important;
}
/* Ocultar metadata Joomla (banda Detalles/Categoría) en páginas #domina-* */
html:has([id^="domina-"]) body.site .article-info,
html:has([id^="domina-"]) body.site .item-content > .page-header {
  display: none !important;
}
/* =====================================================================
   TALLERES PRÁCTICOS (#dm-tabs-wrapper) → CREMA · REGLA ÚNICA PARA TODOS
   - Mismo patrón que cursos, pero clases con prefijo dm- (dm-tab-btn, etc.)
   - Vence al reset navy del artículo por especificidad
   - Reproductor Vimeo y JS de tabs intactos
   ===================================================================== */
/* Fondos: página + contenedores + wrapper → crema */
html:has(#dm-tabs-wrapper) body.site,
html:has(#dm-tabs-wrapper) body.site .site-grid,
html:has(#dm-tabs-wrapper) body.site div.site-grid,
html:has(#dm-tabs-wrapper) body.site .container-main,
html:has(#dm-tabs-wrapper) body.site .container-component,
html:has(#dm-tabs-wrapper) body.site main,
html:has(#dm-tabs-wrapper) body.site #content,
html:has(#dm-tabs-wrapper) body.site .item-page,
html:has(#dm-tabs-wrapper) body.site .com-content-article__body,
html:has(#dm-tabs-wrapper) body.site #dm-tabs-wrapper {
  background-color: #faf6ec !important;
  background: #faf6ec !important;
  background-image: none !important;
}
/* Header: título navy, subtítulo gris */
html:has(#dm-tabs-wrapper) body.site .dm-tabs-header h1 {
  color: #0C2340 !important;
  text-shadow: none !important;
}
html:has(#dm-tabs-wrapper) body.site .dm-tabs-header p {
  color: #3a4256 !important;
}
/* Badge → dorado oscuro legible */
html:has(#dm-tabs-wrapper) body.site .dm-tabs-badge {
  color: #8a6608 !important;
  background: rgba(184,134,11,0.10) !important;
  border-color: rgba(184,134,11,0.35) !important;
}
/* Botonera (contenedor) → crema-2 con borde dorado */
html:has(#dm-tabs-wrapper) body.site .dm-tabs-nav {
  background: #f3ecd8 !important;
  border: 1px solid #d8c69a !important;
}
/* Botones inactivos → navy con texto claro */
html:has(#dm-tabs-wrapper) body.site .dm-tab-btn {
  background: #0C2340 !important;
  border: 1px solid #0C2340 !important;
  color: #ffffff !important;
}
html:has(#dm-tabs-wrapper) body.site .dm-tab-btn:hover {
  background: #B8860B !important;
  border-color: #B8860B !important;
  color: #02060c !important;
}
html:has(#dm-tabs-wrapper) body.site .dm-tab-btn.active {
  background: #B8860B !important;
  border-color: #B8860B !important;
  color: #02060c !important;
  box-shadow: 0 0 18px rgba(184,134,11,0.35) !important;
}
/* Label del taller activo → dorado oscuro */
html:has(#dm-tabs-wrapper) body.site .dm-active-label span.text {
  color: #8a6608 !important;
}
/* Pie → gris oscuro */
html:has(#dm-tabs-wrapper) body.site .dm-footer-left,
html:has(#dm-tabs-wrapper) body.site .dm-footer-right {
  color: #3a4256 !important;
}
/* Ocultar metadata Joomla (banda negra) */
html:has(#dm-tabs-wrapper) body.site .article-info,
html:has(#dm-tabs-wrapper) body.site .item-content > .page-header {
  display: none !important;
}
/* ===== OSM Pro - Página de pago: oscurecer textos sobre fondo cream ===== */

/* Descripción superior "Por favor, completá la información..." */
#os_form .osm-message,
#os_form .osm-message * {
    color: #0C2340 !important;
}

/* Subtítulo "Información de Pago" */
#os_form .osm-heading {
    color: #0C2340 !important;
}

/* Labels izquierdos: "Importe Bruto", "Opciones de Pago", etc. */
#os_form .form-control-label label,
#os_form .col-md-3 label {
    color: #0C2340 !important;
}

/* Radios: texto "Tarjeta Débito-Crédito" y "Paypal" */
#os_form .eb-form-control label,
#os_form .col-md-9 label {
    color: #0C2340 !important;
}
/* ImagingXpert — contenedores de planes en crema */

#osm-plans-list-columns .osm-item-wrapper,
#osm-plans-list-columns .osm-item-description,
#osm-plans-list-columns .osm-item-description-text,
#osm-plans-list-columns .osm-taskbar {
  background: #faf6ec !important;
  background-image: none !important;
  border-color: #d8c69a !important;
  color: #0C2340 !important;
  box-shadow: none !important;
}

#osm-plans-list-columns .osm-item-wrapper {
  border: 1px solid #d8c69a !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

#osm-plans-list-columns .osm-item-heading-box {
  background: #8a6608 !important;
  background-image: none !important;
  border: 0 !important;
  color: #faf6ec !important;
}

#osm-plans-list-columns .osm-item-heading-box,
#osm-plans-list-columns .osm-item-heading-box * {
  color: #faf6ec !important;
}

#osm-plans-list-columns .osm-taskbar {
  border-top: 1px solid #d8c69a !important;
  padding: 14px 16px !important;
}
/* Un solo camino: ocultar DETALLES en el listado de planes */
#osm-plans-list-columns .osm-taskbar a.btn-secondary {
  display: none !important;
}
/* Planes: dos columnas parejas (reemplaza el bloque de ancho completo) */
#osm-plans-list-columns .osm-item-wrapper.col-md-4 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
  margin-bottom: 22px !important;
}
@media (max-width: 780px) {
  #osm-plans-list-columns .osm-item-wrapper.col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* ImagingXpert — contenedores de planes en crema */
#osm-plans-list-columns .osm-item-wrapper,
#osm-plans-list-columns .osm-item-description,
#osm-plans-list-columns .osm-item-description-text,
#osm-plans-list-columns .osm-taskbar {
  background: #faf6ec !important;
  background-image: none !important;
  border-color: #d8c69a !important;
  color: #0C2340 !important;
  box-shadow: none !important;
}
#osm-plans-list-columns .osm-item-wrapper {
  border: 1px solid #d8c69a !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
#osm-plans-list-columns .osm-item-heading-box {
  background: #8a6608 !important;
  background-image: none !important;
  border: 0 !important;
}
#osm-plans-list-columns .osm-item-heading-box,
#osm-plans-list-columns .osm-item-heading-box * {
  color: #faf6ec !important;
}
#osm-plans-list-columns .osm-taskbar {
  border-top: 1px solid #d8c69a !important;
  padding: 14px 16px !important;
}

/* Planes: dos columnas parejas */
#osm-plans-list-columns .osm-item-wrapper.col-md-4 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
  margin-bottom: 22px !important;
}
@media (max-width: 780px) {
  #osm-plans-list-columns .osm-item-wrapper.col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}