/* SOCIAL LEARN PR - IDENTIDAD AZUL */

:root {
    --sl-blue: #9D17FF;
    --sl-blue-dark: #8210DF;
    --sl-blue-light: #A5CDFF;
    --sl-blue-gradient: linear-gradient(
        135deg,
        #9D17FF 0%,
        #8210DF 100%
    );
}

/* Botones originales de HiStudy */
.rbt-btn.btn-gradient,
.rbt-btn.btn-gradient:hover,
.btn-gradient,
.btn-gradient:hover {
    background: var(--sl-blue-gradient) !important;
    background-image: var(--sl-blue-gradient) !important;
}

/* Gradientes decorativos principales */
.bg-gradient-1 {
    background-image: linear-gradient(
        135deg,
        #EFF6FF 0%,
        #DCEBFF 100%
    ) !important;
}

/* Bordes con gradiente */
.rbt-gradient-border::before {
    background: var(--sl-blue-gradient) !important;
    background-image: var(--sl-blue-gradient) !important;
}

/* Textos que utilizan las clases de gradiente */
.rbt-gradient-text,
.gradient-text {
    background-image: var(--sl-blue-gradient) !important;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Elementos de marca y enlaces destacados */
.rbt-btn.btn-gradient,
.btn-gradient {
    border-color: transparent !important;
    color: #FFFFFF !important;
}

/* Estados interactivos */
.rbt-btn.btn-gradient:focus-visible,
.btn-gradient:focus-visible {
    outline: 2px solid var(--sl-blue-dark);
    outline-offset: 3px;
}

/* Evitar cambios en imágenes y contenido multimedia */


/* Social Learn PR - bordes azules del footer */
.academy-footer .rbt-btn.btn-border-gradient {
    --color-primary: #9D17FF;
    --color-secondary: #8210DF;
}

.academy-footer .rbt-btn.btn-border-gradient::before,
.academy-footer .rbt-btn.btn-border-gradient::after {
    background: linear-gradient(135deg, #9D17FF, #8210DF) !important;
    background-image: linear-gradient(135deg, #9D17FF, #8210DF) !important;
}

/* SOCIAL LEARN - BOTON FOOTER AZUL */
.academy-footer .contact-btn .rbt-btn.btn-border-gradient {
    background: #9D17FF !important;
    background-image: none !important;
    border: 2px solid #9D17FF !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease;
}

.academy-footer .contact-btn .rbt-btn.btn-border-gradient::before,
.academy-footer .contact-btn .rbt-btn.btn-border-gradient::after {
    display: none !important;
    content: none !important;
}

.academy-footer .contact-btn .rbt-btn.btn-border-gradient:hover {
    background: #8210DF !important;
    border-color: #8210DF !important;
    color: #FFFFFF !important;
}

.academy-footer .contact-btn .rbt-btn.btn-border-gradient .btn-text,
.academy-footer .contact-btn .rbt-btn.btn-border-gradient .btn-icon {
    color: #FFFFFF !important;
}


/* SOCIAL LEARN - LOGO DEL FOOTER SEGUN MODO */
.academy-footer .social-learn-footer-logo-light {
    content: url('/branding/social-learn-brand/logo-dark.png');
}

html[data-theme="dark"] .academy-footer .social-learn-footer-logo-light,
body.dark .academy-footer .social-learn-footer-logo-light,
body.active-dark-mode .academy-footer .social-learn-footer-logo-light,
body.dark-mode .academy-footer .social-learn-footer-logo-light,
[data-theme="dark"] .academy-footer .social-learn-footer-logo-light {
    content: url('/branding/social-learn-brand/logo-light.png');
}


/* SOCIAL LEARN - PALETA GENERAL V2 */

/* Variables originales de componentes HiStudy */
:root {
    --color-primary: #9D17FF;
    --color-secondary: #8210DF;
    --color-pink: #9D17FF;
}

/* Encabezados publicos */
.rbt-page-banner-wrapper {
    background: linear-gradient(
        120deg,
        #EAF3FF 0%,
        #DCEBFF 55%,
        #F5F9FF 100%
    ) !important;
}

.rbt-page-banner-wrapper .rbt-banner-image {
    background: none !important;
    background-image: none !important;
}

/* Precios y elementos destacados */
.rbt-pricing-area .pricing-table .pricing-header .price,
.rbt-pricing-area .pricing-table .pricing-header .price-text,
.rbt-pricing-area .pricing-table .pricing-header .currency,
.rbt-pricing-area .pricing-table .pricing-header .price-value {
    color: #8210DF;
}

/* Botones con bordes degradados */
.rbt-btn.btn-border-gradient {
    --color-primary: #9D17FF;
    --color-secondary: #8210DF;
}

/* Modo oscuro de los encabezados */
body.active-dark-mode .rbt-page-banner-wrapper,
body.dark-mode .rbt-page-banner-wrapper,
html[data-theme="dark"] .rbt-page-banner-wrapper {
    background: linear-gradient(
        120deg,
        #14243D 0%,
        #1C365B 100%
    ) !important;
}

/* FIN PALETA GENERAL V2 */



/* INICIO SOCIAL LEARN MENU MOVIL */

/* Fondo exterior: conservar la capa oscura de HiStudy */
.popup-mobile-menu {
    background-color: rgba(0,0,0,.80) !important;
}

/* MODO CLARO */
body .popup-mobile-menu .inner-wrapper {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #18243A !important;
}

body .popup-mobile-menu .inner-wrapper .inner-top,
body .popup-mobile-menu .inner-wrapper .mobile-menu-bottom,
body .popup-mobile-menu .inner-wrapper .mainmenu-nav {
    background: transparent !important;
}

/* Conservar el primer contenedor de logo */
body .popup-mobile-menu .inner-top .logo.logo-dark {
    display: block !important;
    visibility: visible !important;
}

body .popup-mobile-menu .inner-top .logo.logo-light {
    display: none !important;
}

body .popup-mobile-menu .inner-top .logo.logo-dark img {
    content: url('/branding/social-learn-brand/logo-dark.png') !important;
    display: block !important;
    width: auto !important;
    max-width: 185px !important;
    max-height: 52px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* MODO OSCURO: clase real de HiStudy */
body.active-dark-mode .popup-mobile-menu .inner-wrapper {
    background: #151923 !important;
    background-color: #151923 !important;
    color: #F4F7FF !important;
}

body.active-dark-mode .popup-mobile-menu .inner-wrapper
.inner-top .logo.logo-dark img {
    content: url('/branding/social-learn-brand/logo-light.png') !important;
}

/* Enlaces, contacto y cierre: modo claro */
body .popup-mobile-menu .inner-wrapper .mainmenu-nav a,
body .popup-mobile-menu .inner-wrapper .mainmenu-nav a span,
body .popup-mobile-menu .inner-wrapper .description,
body .popup-mobile-menu .inner-wrapper .rbt-short-title,
body .popup-mobile-menu .inner-wrapper .rbt-information-list a,
body .popup-mobile-menu .inner-wrapper .rbt-information-list i,
body .popup-mobile-menu .inner-wrapper .social-icon a,
body .popup-mobile-menu .inner-wrapper .close-button,
body .popup-mobile-menu .inner-wrapper .close-button i {
    color: #18243A !important;
    -webkit-text-fill-color: #18243A !important;
}

/* Enlaces, contacto y cierre: modo oscuro */
body.active-dark-mode .popup-mobile-menu
.inner-wrapper .mainmenu-nav a,
body.active-dark-mode .popup-mobile-menu
.inner-wrapper .mainmenu-nav a span,
body.active-dark-mode .popup-mobile-menu
.inner-wrapper .description,
body.active-dark-mode .popup-mobile-menu
.inner-wrapper .rbt-short-title,
body.active-dark-mode .popup-mobile-menu
.inner-wrapper .rbt-information-list a,
body.active-dark-mode .popup-mobile-menu
.inner-wrapper .rbt-information-list i,
body.active-dark-mode .popup-mobile-menu
.inner-wrapper .social-icon a,
body.active-dark-mode .popup-mobile-menu
.inner-wrapper .close-button,
body.active-dark-mode .popup-mobile-menu
.inner-wrapper .close-button i {
    color: #F4F7FF !important;
    -webkit-text-fill-color: #F4F7FF !important;
}

/* Boton inferior: azul oficial */
body .popup-mobile-menu .inner-wrapper
.mobile-menu-bottom .rbt-btn.btn-border-gradient {
    background: #9D17FF !important;
    background-image: none !important;
    border: 2px solid #9D17FF !important;
    box-shadow: none !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

body .popup-mobile-menu .inner-wrapper
.mobile-menu-bottom .rbt-btn.btn-border-gradient::before,
body .popup-mobile-menu .inner-wrapper
.mobile-menu-bottom .rbt-btn.btn-border-gradient::after {
    display: none !important;
    content: none !important;
}

body .popup-mobile-menu .inner-wrapper
.mobile-menu-bottom .rbt-btn.btn-border-gradient span {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Bordes del panel */
body .popup-mobile-menu .inner-wrapper .inner-top,
body .popup-mobile-menu .inner-wrapper .mobile-menu-bottom {
    border-color: #E5EAF2 !important;
}

body.active-dark-mode .popup-mobile-menu
.inner-wrapper .inner-top,
body.active-dark-mode .popup-mobile-menu
.inner-wrapper .mobile-menu-bottom {
    border-color: #343D50 !important;
}

/* FIN SOCIAL LEARN MENU MOVIL */



/* SOCIAL LEARN BOTON CERRAR MENU */

.popup-mobile-menu .inner-wrapper .inner-top
.rbt-btn-close .close-button {
    background: #EFF6FF !important;
    color: #18243A !important;
    border: 1px solid #DCEBFF !important;
    opacity: 1 !important;
}

.popup-mobile-menu .inner-wrapper .inner-top
.rbt-btn-close .close-button i {
    color: #18243A !important;
    -webkit-text-fill-color: #18243A !important;
    opacity: 1 !important;
    font-size: 24px !important;
}

/* Modo oscuro */
body.active-dark-mode .popup-mobile-menu
.inner-wrapper .inner-top .rbt-btn-close .close-button {
    background: #293244 !important;
    border-color: #414D65 !important;
    color: #FFFFFF !important;
}

body.active-dark-mode .popup-mobile-menu
.inner-wrapper .inner-top .rbt-btn-close .close-button i {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* FIN BOTON CERRAR MENU */


/* SOCIAL LEARN CONTRASTE INICIO */

/* Modo claro: titulos y descripciones */
body.active-light-mode .academy-hero .inner .title,
body.active-light-mode .academy-home-copy h1,
body.active-light-mode .academy-home-copy h2,
body.active-light-mode .academy-intro-categorias h1,
body.active-light-mode .academy-intro-categorias h2 {
    color: #1B2435 !important;
    -webkit-text-fill-color: #1B2435 !important;
}

/* Modo oscuro: títulos */
body.active-dark-mode .academy-hero .inner .title,
body.active-dark-mode .academy-hero .inner .title *,
body.active-dark-mode .academy-home-copy h1,
body.active-dark-mode .academy-home-copy h2,
body.active-dark-mode .academy-intro-categorias h1,
body.active-dark-mode .academy-intro-categorias h2 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-shadow: none !important;
}

/* Modo oscuro: subtitulos y descripciones */
body.active-dark-mode .academy-hero .inner .description,
body.active-dark-mode .academy-home-copy p,
body.active-dark-mode .academy-intro-categorias p {
    color: #D5DDED !important;
    -webkit-text-fill-color: #D5DDED !important;
}

/* FIN SOCIAL LEARN CONTRASTE INICIO */