/**
 * Theme Name: BuddyX Child
 * Description: This is a child theme of BuddyX, generated by Merlin WP.
 * Author: <a href="https://github.com/vapvarun/buddyx">wbcomdesigns,vapvarun</a>
 * Template: buddyx
 * Version: 4.5.8
 */

/* =============================================================================
   ÍNDICE
   1. FUENTES
   2. VARIABLES CSS
   3. RESET Y BASE
   4. TIPOGRAFÍA
   5. HEADER Y NAVEGACIÓN
   6. ICONOS (LUPA, CAMPANA, HAMBURGUESA)
   7. DROPDOWN NOTIFICACIONES
   8. BOTONES
   9. SECCIONES Y CONTAINERS
   10. CARDS SYSTEM
   11. FOOTER
   12. UTILIDADES
   13. ADMIN BAR FIXES
   14. MENÚ HAMBURGUESA MOBILE
   15. RESPONSIVE
   16. HEADER NEGRO — PÁGINAS PÚBLICAS
   17. FOOTER NEGRO — PÁGINAS PÚBLICAS
   18. BOTÓN ACCEDER
============================================================================= */


/* =============================================================================
   1. FUENTES
============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');


/* =============================================================================
   2. VARIABLES CSS
============================================================================= */

:root {
    --spacing-global:         0px;
    --content-padding:        30px;
    --apple-section-padding:  50px;
    --apple-large-padding:    80px;
    --apple-card-gap:         20px;

    --font-headings: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:     'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

    --color-primary:        #1d1d1f;
    --color-secondary:      #86868b;
    --color-accent:         #CC8E03;
    --color-text:           #1d1d1f;
    --color-text-light:     #86868b;
    --color-background:     #FFFFFF;
    --color-background-alt: #f5f5f7;
    --color-border:         #e5e5e7;
    --color-button:         #CC8E03;
    --color-highlight:      #CC8E03;

    --corner-radius:       28px;
    --corner-radius-small: 12px;
    --corner-radius-large: 40px;

    --container-max-width: 1400px;

    --text-size-large:   48px;
    --text-size-medium:  32px;
    --text-size-small:   21px;
    --text-size-body:    17px;
    --text-size-caption: 14px;
}


/* =============================================================================
   3. RESET Y BASE
============================================================================= */

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--color-background) !important;
    font-family: var(--font-body) !important;
    font-size: var(--text-size-body) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    letter-spacing: -0.022em !important;
    color: var(--color-text) !important;
    -webkit-font-smoothing: antialiased !important;
    font-synthesis: none !important;
}

div#page.site {
    background-color: var(--color-background) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.site-header-wrapper,
#masthead.site-header,
.site-branding {
    margin-top: 0 !important;
}

.admin-bar #page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#page, .site {
    background-color: var(--color-background) !important;
}

.entry-content,
.site-main,
main,
.content,
.wp-block-group,
.wp-site-blocks {
    padding: 0 !important;
    margin: 0 !important;
}


/* =============================================================================
   4. TIPOGRAFÍA
============================================================================= */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-headings) !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

h1 {
    font-size: var(--text-size-large) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.003em !important;
}

h2 {
    font-size: var(--text-size-medium) !important;
    font-weight: 600 !important;
    line-height: 1.125 !important;
}

h3 {
    font-size: var(--text-size-small) !important;
    font-weight: 600 !important;
    line-height: 1.19048 !important;
}

h4, h5, h6 {
    font-size: var(--text-size-body) !important;
    font-weight: 600 !important;
    line-height: 1.23536 !important;
}

body, p, li, div, span {
    font-family: var(--font-body) !important;
    font-size: var(--text-size-body) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    letter-spacing: -0.022em !important;
    color: var(--color-text) !important;
}

p, .entry-content p, .apple-body-text {
    text-align: justify !important;
    font-family: var(--font-body) !important;
}

nav, .menu, .navbar, .nav-menu, .navigation,
.menu-item, .nav-item, .menu-link, .nav-link,
.main-navigation, .primary-menu, .header-menu,
.site-navigation, .menu-primary, .nav-primary {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: var(--text-size-body) !important;
}


/* =============================================================================
   5. HEADER Y NAVEGACIÓN
============================================================================= */

.site-header-wrapper {
    padding: 15px 0 !important;
    min-height: 90px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 1000 !important;
    background-color: var(--color-background) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

#masthead.site-header {
    padding: 8px 0 !important;
}

.site-branding {
    padding: 5px 0 !important;
}

.site-logo-wrapper img.custom-logo {
    max-height: 70px !important;
    width: auto !important;
}

.site-header-wrapper .container {
    max-width: var(--container-max-width) !important;
    width: 100% !important;
    padding: 0 var(--content-padding) !important;
}

.main-navigation a {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.main-navigation a:hover {
    color: var(--color-accent) !important;
}

.site-header a,
.main-navigation a,
.menu a,
.nav a,
header a {
    text-decoration-color: var(--color-accent) !important;
}

.site-header .menu-item a:hover,
.main-navigation .menu-item a:hover {
    color: var(--color-accent) !important;
    text-decoration-color: var(--color-accent) !important;
}

/* Ocultar duplicados BuddyX */
.buddypress-icons-wrapper .search:first-child,
.buddypress-icons-wrapper .notification:first-child {
    display: none !important;
}

.menu-icons-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}



/* --- Fix header área cliente: container con mismo margen que web pública --- */
body.imagic-cliente-page .site-header-wrapper .container {
    margin-left: 192px !important;
    margin-right: 192px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    max-width: none !important;
    width: auto !important;
    box-sizing: border-box !important;
}

/* =============================================================================
   6. ICONOS — LUPA, CAMPANA, HAMBURGUESA
============================================================================= */

.buddypress-icons-wrapper .search,
.buddypress-icons-wrapper .search-icon,
.desktop-icons .search,
.desktop-icons .search-icon,
.menu-icons-wrapper .search,
.menu-icons-wrapper .search-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    color: var(--color-text) !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
    text-decoration: none !important;
    position: relative !important;
    background: none !important;
    border: none !important;
}

.buddypress-icons-wrapper .search:hover,
.desktop-icons .search:hover,
.menu-icons-wrapper .search:hover {
    color: var(--color-accent) !important;
}

.buddypress-icons-wrapper .search::before,
.desktop-icons .search::before,
.menu-icons-wrapper .search::before {
    content: "\f002" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    display: inline-block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.user-notifications,
.user-notifications .bp-icon-wrap,
.user-notifications a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    color: var(--color-text) !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
    position: relative !important;
    background: none !important;
    border: none !important;
}

.user-notifications:hover {
    color: var(--color-accent) !important;
}

.user-notifications .bp-icon-wrap::before {
    content: "\f0f3" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    display: inline-block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.fa.fa-search,
.fa.fa-bell,
.buddypress-icons-wrapper .fa,
.desktop-icons .fa,
.menu-icons-wrapper .fa,
.user-notifications .fa,
.search .fa {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* =============================================================================
   7. DROPDOWN NOTIFICACIONES
============================================================================= */

#bp-notify.bp-header-submenu {
    background-color: var(--color-background) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--corner-radius-small) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
    padding: 0 !important;
    min-width: 280px !important;
    max-width: 320px !important;
}

.bp-header-submenu .alert-message {
    padding: 1rem !important;
}

.bp-header-submenu .alert {
    background-color: var(--color-background-alt) !important;
    border: none !important;
    border-radius: var(--corner-radius-small) !important;
    color: var(--color-text) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    padding: 0.75rem 1rem !important;
}

.bp-header-submenu .dropdown-footer,
.bp-header-submenu .dropdown-footer a {
    display: none !important;
}

.bp-header-submenu .notification-list,
.bp-header-submenu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bp-header-submenu .notification-list li,
.bp-header-submenu ul li {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-family: var(--font-body) !important;
    font-size: 0.9rem !important;
    transition: background-color 0.2s ease !important;
}

.bp-header-submenu .notification-list li:hover {
    background-color: var(--color-background-alt) !important;
}

.bp-header-submenu .notification-list li:last-child {
    border-bottom: none !important;
}

.user-notifications {
    position: relative !important;
}

.user-notifications #bp-notify {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    z-index: 1000 !important;
    margin-top: 0.5rem !important;
}


/* =============================================================================
   8. BOTONES
============================================================================= */

.btn, .button, .wp-block-button__link,
.btn-primary, .button-primary {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    font-size: var(--text-size-body) !important;
    color: #ffffff !important;
    background-color: var(--color-button) !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 980px !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    line-height: 1.23536 !important;
    letter-spacing: -0.022em !important;
    min-width: 44px !important;
}

.btn:hover, .button:hover, .wp-block-button__link:hover,
.btn-primary:hover, .button-primary:hover {
    background-color: #D9A41A !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(204, 142, 3, 0.3) !important;
}

.btn-secondary {
    background-color: transparent !important;
    color: var(--color-accent) !important;
    border: 1px solid var(--color-accent) !important;
}

.btn-secondary:hover {
    background-color: var(--color-accent) !important;
    color: #ffffff !important;
}


/* =============================================================================
   9. SECCIONES Y CONTAINERS
============================================================================= */

.apple-section {
    background-color: var(--color-background);
    padding: var(--apple-section-padding) 0;
    width: 100%;
}

.apple-section-alt {
    background-color: #CC8E03;
    padding: var(--apple-section-padding) 0;
    width: 100%;
}

.apple-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
    box-sizing: border-box;
}

.highlight-section,
.featured-block,
.wp-block-group.has-background {
    background-color: var(--color-background-alt) !important;
    border-radius: 18px !important;
    padding: 2rem !important;
}


/* =============================================================================
   10. CARDS SYSTEM
============================================================================= */

.apple-cards-grid,
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--apple-card-gap);
    margin: var(--apple-section-padding) 0;
}

.apple-card,
.service-card,
.feature-card {
    background-color: var(--color-background);
    border-radius: 18px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.apple-card:hover,
.service-card:hover,
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.apple-card .card-icon,
.service-card .card-icon,
.feature-card .card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem auto;
    background-color: var(--color-background-alt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--color-accent);
}

.apple-card h3,
.service-card h3,
.feature-card h3,
.apple-card-title {
    font-family: var(--font-headings) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    color: var(--color-primary) !important;
    text-align: center !important;
}

.apple-card p,
.service-card p,
.feature-card p,
.apple-card-description {
    font-family: var(--font-body) !important;
    font-size: 0.95rem !important;
    color: #6e6e73 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    line-height: 1.6 !important;
}

.apple-headline {
    font-family: var(--font-headings) !important;
    font-size: var(--text-size-large) !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    line-height: 1.05 !important;
}

.apple-subheadline {
    font-family: var(--font-body) !important;
    font-size: var(--text-size-small) !important;
    font-weight: 400 !important;
    color: var(--color-secondary) !important;
    text-align: center !important;
    margin-bottom: 40px !important;
}

.apple-body-text {
    font-family: var(--font-body) !important;
    font-size: var(--text-size-body) !important;
    font-weight: 400 !important;
    color: var(--color-text) !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    text-align: justify !important;
}

.apple-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin: 20px 0;
    width: 100%;
    box-sizing: border-box;
}

.apple-grid > p:empty,
.apple-grid > br {
    display: none !important;
}

[class^="apple-col-"] {
    text-align: justify;
}


/* =============================================================================
   11. FOOTER BASE
============================================================================= */

.apple-footer {
    background-color: var(--color-background-alt);
    padding: var(--apple-section-padding) 0 30px;
    border-top: 1px solid var(--color-border);
}

.apple-footer-content {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding);
    text-align: center;
}

.apple-footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.apple-footer-links a {
    color: var(--color-secondary);
    text-decoration: none;
    font-size: var(--text-size-caption);
    transition: color 0.2s ease;
}

.apple-footer-links a:hover {
    color: var(--color-primary);
}

/* Footer horizontal widget */
.footer-horizontal {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 10px var(--content-padding);
    text-align: center;
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.site-info {
    display: none !important;
}

.footer-horizontal a {
    color: var(--color-primary);
    text-decoration: none;
    margin: 0 6px;
    transition: color 0.3s ease;
}

.footer-horizontal a:hover {
    color: var(--color-accent);
}

.footer-divider {
    border: 0;
    border-top: 0.5px solid rgba(255,255,255,0.15);
    width: 80%;
    margin: 4px 0;
}


/* =============================================================================
   12. UTILIDADES
============================================================================= */

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 1rem !important; }
.mt-2 { margin-top: 2rem !important; }
.mt-3 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 1rem !important; }
.mb-2 { margin-bottom: 2rem !important; }
.mb-3 { margin-bottom: 3rem !important; }

.text-center  { text-align: center !important; }
.text-left    { text-align: left !important; }
.text-justify { text-align: justify !important; }

.highlight-text,
.text-highlight {
    color: var(--color-highlight) !important;
    font-weight: 600 !important;
}

html {
    scroll-behavior: smooth;
}

::selection {
    background-color: var(--color-accent);
    color: var(--color-background);
}

*:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

*:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.wp-block-columns,
.wp-block-column {
    margin: 0 !important;
    padding: 0 !important;
}

.site-wrapper,
.site-main,
.post-layout {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* =============================================================================
   13. ADMIN BAR FIXES
============================================================================= */

body.admin-bar #page {
    margin-top: 32px !important;
}

body.admin-bar .site-header-wrapper {
    top: 0 !important;
}

#wpadminbar {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    z-index: 99999 !important;
}

html.admin-bar body,
html.admin-bar body #page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.admin-bar .site-header,
.admin-bar .video-hero-section,
.admin-bar .apple-section {
    margin-top: 0 !important;
}

.video-hero-section {
    position: relative;
    top: 0 !important;
    margin-top: 0 !important;
}


/* =============================================================================
   14. MENÚ HAMBURGUESA MOBILE
============================================================================= */

.primary-menu-container.buddyx-desktop-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.primary-menu-container.buddyx-desktop-menu ul#primary-menu {
    display: flex !important;
    flex-direction: row !important;
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-menu-container.buddyx-desktop-menu ul#primary-menu li {
    display: inline-block !important;
    margin: 0 15px;
}

#menu-toggle {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 10001 !important;
}

#menu-toggle i {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 20px !important;
    color: var(--color-accent) !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

#menu-toggle i::before {
    content: "\f0c9" !important;
}

#menu-toggle.menu-opened i::before {
    content: "\f00d" !important;
}

#menu-toggle:focus-visible {
    outline: 2px solid var(--color-accent) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}


/* =============================================================================
   15. RESPONSIVE
============================================================================= */

@media (max-width: 1440px) {
    :root { --content-padding: 25px; }
}

@media (max-width: 1024px) {
    :root {
        --apple-section-padding: 40px;
        --apple-large-padding:   60px;
        --text-size-large:       36px;
        --text-size-medium:      28px;
    }

    .primary-menu-container.buddyx-desktop-menu { display: none !important; }
    .primary-menu-container.buddyx-mobile-menu  { display: block !important; }
    #menu-toggle { display: flex !important; }

    .site-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 15px !important;
        min-height: 60px !important;
    }

    .site-branding {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
    }

    .buddypress-icons-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
    }

    .buddyx-mobile-icon .bp-icon-wrap { display: none !important; }

    .primary-menu-container.buddyx-mobile-menu ul#primary-menu {
        display: block !important;
    }

    .primary-menu-container.buddyx-mobile-menu ul#primary-menu li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .primary-menu-container.buddyx-mobile-menu ul#primary-menu li a {
        display: block !important;
        width: 100% !important;
        padding: 16px 24px !important;
        text-align: left !important;
    }

    .apple-grid { grid-template-columns: 1fr !important; gap: 30px; }

    h1 { font-size: 2.5rem !important; }
    h2 { font-size: 2rem !important; }
    h3 { font-size: 1.5rem !important; }

    .admin-bar .primary-menu-container.buddyx-mobile-menu {
        top: 32px;
        height: calc(100vh - 32px);
    }
}

@media (max-width: 768px) {
    :root {
        --apple-section-padding: 30px;
        --apple-large-padding:   40px;
        --text-size-large:       28px;
        --text-size-medium:      24px;
        --content-padding:       20px;
        --container-max-width:   100%;
    }

    .site-header { padding: 0 10px !important; }

    p, .entry-content p, .apple-body-text { text-align: left !important; }

    .apple-grid { grid-template-columns: 1fr !important; gap: 20px; }

    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.25rem !important; }

    .apple-footer-links { flex-direction: column; gap: 15px; }

    body.admin-bar #page { margin-top: 46px !important; }

    .admin-bar .primary-menu-container.buddyx-mobile-menu {
        top: 46px;
        height: calc(100vh - 46px);
    }

    #menu-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

@media (max-width: 480px) {
    :root {
        --text-size-large:  24px;
        --text-size-medium: 20px;
        --corner-radius:    20px;
        --content-padding:  15px;
    }

    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }

    .content-area, .site-main { padding: 1rem 0 !important; }

    #menu-toggle {
        width: 36px !important;
        height: 36px !important;
    }

    #menu-toggle i { font-size: 18px !important; }
}

@media screen and (min-width: 1025px) {
    #menu-toggle { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    #menu-toggle,
    .primary-menu-container.buddyx-mobile-menu {
        transition: none !important;
        animation: none !important;
    }
}


/* =============================================================================
   16. HEADER NEGRO — PÁGINAS PÚBLICAS
============================================================================= */

body:not(.imagic-cliente-page) .site-header-wrapper {
    background-color: #000000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

body:not(.imagic-cliente-page) .site-header-wrapper.ih-header-hidden {
    transform: translateY(-100%) !important;
}

body:not(.imagic-cliente-page) .site-header-wrapper.ih-header-scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
}

body:not(.imagic-cliente-page) #masthead.site-header,
body:not(.imagic-cliente-page) .site-header {
    background-color: #000000 !important;
}

/* Admin bar compensa sticky */
body.admin-bar:not(.imagic-cliente-page) .site-header-wrapper {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar:not(.imagic-cliente-page) .site-header-wrapper {
        top: 46px !important;
    }
}

/* Logo blanco */
body:not(.imagic-cliente-page) .custom-logo-link img.custom-logo {
    content: url('http://distribuidora.local/wp-content/uploads/2026/05/logo-png-blanco-2.png') !important;
    filter: none !important;
}

/* Nav blanca */
body:not(.imagic-cliente-page) .main-navigation a,
body:not(.imagic-cliente-page) .site-header a,
body:not(.imagic-cliente-page) .menu a,
body:not(.imagic-cliente-page) header a {
    color: #ffffff !important;
}

body:not(.imagic-cliente-page) .main-navigation a:hover,
body:not(.imagic-cliente-page) .site-header .menu-item a:hover {
    color: var(--color-accent) !important;
}

/* Lupa */
body:not(.imagic-cliente-page) .buddypress-icons-wrapper .search,
body:not(.imagic-cliente-page) .menu-icons-wrapper .search,
body:not(.imagic-cliente-page) .desktop-icons .search {
    color: #ffffff !important;
}

body:not(.imagic-cliente-page) .buddypress-icons-wrapper .search:hover,
body:not(.imagic-cliente-page) .menu-icons-wrapper .search:hover {
    color: var(--color-accent) !important;
}

/* Campana */
body:not(.imagic-cliente-page) .user-notifications,
body:not(.imagic-cliente-page) .user-notifications .bp-icon-wrap,
body:not(.imagic-cliente-page) .user-notifications a {
    color: #ffffff !important;
}

body:not(.imagic-cliente-page) .user-notifications:hover {
    color: var(--color-accent) !important;
}

/* Avatar */
body:not(.imagic-cliente-page) .site-header .bp-user-avatar img,
body:not(.imagic-cliente-page) .site-header .avatar {
    border: 2px solid rgba(255,255,255,0.3) !important;
    border-radius: 50% !important;
}

/* Nombre usuario */
body:not(.imagic-cliente-page) .site-header .user-name,
body:not(.imagic-cliente-page) .site-header .bp-header-avatar-name,
body:not(.imagic-cliente-page) #masthead span,
body:not(.imagic-cliente-page) .site-header-right span {
    color: #ffffff !important;
}

/* Hamburguesa */
body:not(.imagic-cliente-page) #menu-toggle,
body:not(.imagic-cliente-page) #menu-toggle i,
body:not(.imagic-cliente-page) #menu-toggle::before {
    color: #ffffff !important;
}

/* Dropdown notificaciones */
body:not(.imagic-cliente-page) #bp-notify.bp-header-submenu {
    background-color: #ffffff !important;
}

body:not(.imagic-cliente-page) .bp-header-submenu .alert,
body:not(.imagic-cliente-page) .bp-header-submenu .notification-list li {
    color: #1d1d1f !important;
}


/* =============================================================================
   17. FOOTER NEGRO — PÁGINAS PÚBLICAS
============================================================================= */

body:not(.imagic-cliente-page) #colophon,
body:not(.imagic-cliente-page) .site-footer,
body:not(.imagic-cliente-page) .site-footer .site-info,
body:not(.imagic-cliente-page) .site-footer .site-footer-wrapper,
body:not(.imagic-cliente-page) .footer-horizontal,
body:not(.imagic-cliente-page) .footer-horizontal .top-row,
body:not(.imagic-cliente-page) .footer-horizontal .bottom-row {
    background: #000000 !important;
    background-color: #000000 !important;
}

body:not(.imagic-cliente-page) #colophon {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* Color texto footer */
body:not(.imagic-cliente-page) .site-footer *,
body:not(.imagic-cliente-page) #colophon *,
body:not(.imagic-cliente-page) .footer-horizontal * {
    color: rgba(255, 255, 255, 0.65) !important;
    background-color: transparent !important;
}

body:not(.imagic-cliente-page) .site-footer a,
body:not(.imagic-cliente-page) #colophon a,
body:not(.imagic-cliente-page) .footer-horizontal a {
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: none !important;
}

body:not(.imagic-cliente-page) .site-footer a:hover,
body:not(.imagic-cliente-page) #colophon a:hover,
body:not(.imagic-cliente-page) .footer-horizontal a:hover {
    color: #CC8E03 !important;
}

/* Tamaño de texto y compacidad del footer */
body:not(.imagic-cliente-page) .footer-horizontal {
    padding: 8px 30px !important;
}

body:not(.imagic-cliente-page) .footer-horizontal .top-row,
body:not(.imagic-cliente-page) .footer-horizontal .bottom-row,
body:not(.imagic-cliente-page) .footer-horizontal span,
body:not(.imagic-cliente-page) .footer-horizontal a {
    font-size: 13px !important;
    line-height: 1.3 !important;
    padding: 4px 0 !important;
}

body:not(.imagic-cliente-page) .footer-horizontal .footer-divider {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    margin: 4px 0 !important;
    width: 100% !important;
}


/* =============================================================================
   18. BOTÓN ACCEDER
============================================================================= */

body:not(.imagic-cliente-page) a.btn-login {
    padding: 10px 22px !important;
    border-radius: 100px !important;
    background: #CC8E03 !important;
    color: #ffffff !important;
    border: 2px solid #CC8E03 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

body:not(.imagic-cliente-page) a.btn-login:hover {
    background: #D9A41A !important;
    border-color: #D9A41A !important;
    color: #ffffff !important;
}