/*
 * PRODUCTO — ÍNDICE DE SECCIONES Y ORDEN DE CASCADA
 *
 * ORDEN ORIGINAL CONSERVADO:
 * 01. hero.php — estilos específicos de la portada
 * 02. contabilidad-seccion-1.php — ajustes específicos de Contabilidad
 * 03. page-producto.php — estilos globales finales de las 13 secciones
 *
 * TEMPLATE PARTS INCLUIDAS:
 * - hero.php
 * - modulo-ventas-seccion-1.php
 * - crm-seccion-1.php
 * - fondos-seccion-1.php
 * - stock-seccion-1.php
 * - compras-seccion-1.php
 * - proveedores-seccion-1.php
 * - proveedores-seccion-2.php
 * - bancos-seccion-1.php
 * - contabilidad-seccion-1.php
 * - reportes-seccion-1.php
 * - configuracion-seccion-1.php
 * - extras-seccion-1.php
 */

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
/* ==========================================================================
   01. hero.php — ESTILOS ESPECÍFICOS DE LA PORTADA
   ========================================================================== */

    /* Ajuste de los párrafos del Hero */
.texto-hero-producto p {
    color: #FFF;
    font-size: 21px;
    font-weight: 400;
    line-height: 30px;
    max-width: 477px;
    margin: 0;
}

/* Espacio extra debajo del último párrafo, antes de los botones */
.texto-hero-producto p:last-of-type {
    margin-top: 25px;
    margin-bottom: 10px;
}

/* Contenedor de las pastillas */
.tags-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 400px;
}

/* Diseño de cada pastilla individual */
.tag-hero {
    background-color: #FFFFFF;
    color: var(--color-purple, #4A148C); /* Usa el violeta de tu variable, o un violeta oscuro por defecto */
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 8px; /* Bordes ligeramente redondeados como en la imagen */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra para resaltar sobre el fondo */
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
}

/* =========================
   AJUSTES RESPONSIVE PARA LOS TAGS
   ========================== */
@media screen and (max-width: 1080px) {
    .texto-hero-producto p {
        font-size: 17px;
        line-height: 24px;
    }
    .tag-hero {
        font-size: 14px;
        padding: 6px 16px;
    }
    

  }

@media screen and (max-width: 800px) {
    .tags-hero {
        justify-content: center; /* Centramos los botones en celulares */
    }
    
    .texto-hero-producto p:last-of-type{
        margin-top: 0px;
    }
}

/* ==========================================================================
   02. contabilidad-seccion-1.php — AJUSTES DE CONTABILIDAD
   ========================================================================== */

    .bg-white {
    background-color: #FFFFFF !important; 
}

/* ==========================================================================
   03. page-producto.php — ESTILOS GLOBALES FINALES
   ========================================================================== */

.salto-linea{
         margin-right: 0px;
    }
    
    @media (max-width: 768px) {
    #header-main {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.6);
        /* -webkit-backdrop-filter: blur(12px); */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding-top: 0 !important;
        margin-top: -95px;
    }
    
     .salto-linea{
         margin-right: 90px;
    }
}
    
    
    @media (min-width: 769px) {
        body, html {
            overflow-x: hidden;
        }
    }
        #producto, 
        #producto * { font-family: 'Ubuntu', sans-serif !important; }

        :root {
            --color-bg-light: #F8F9FA;
            --color-primary-dark: #002955;
            --color-purple:  #6A00A7;
            --color-purple-light: #F3E8FF;
            --color-cyan: #00B4D8;
            --border-radius-card: 16px;
            --border-radius-item: 12px;
        }

        .modulo-seccion { padding: 60px 0; }
        .bg-light-gray { background-color: #F7F7F7; }
        .bg-f7f7f7 { background-color: #F7F7F7; }
        .bg-white { background-color: #FFFFFF; }
        .container { max-width: 1320px; margin: 0 auto; padding: 0 20px; }

        /* =========================================
           HERO PRODUCTO
           ========================================= */
        .br-mobile-producto { display: none; }
        .hero-producto { margin: 20px 20px 70px; padding-top: 10px !important; padding-bottom: 0 !important; }
        .container-hero-producto { background: url('/wp-content/themes/zeus-2023/assets/img_productos/portada_producto.webp') no-repeat center center; background-size: cover; min-height: 570px; max-width: 1382px; width: 100%; display: flex; align-items: center; margin: 0 auto; border-radius: 55px; overflow: hidden; }
        .texto-hero-producto { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding-left: 75px; width: 52%; }
        .texto-hero-producto h1 { color: #FFF; font-size: 50px; font-weight: 700; line-height: 1.05; max-width: 620px; margin: 0 0 35px; }
        .texto-hero-producto p { color: #FFF; font-size: 22px; font-weight: 400; line-height: 28px; max-width: 512px; margin: 0 0 15px 0; }
        
        .tags-hero { display: flex; flex-wrap: wrap; gap: 12px; max-width: 568px; }
        .tag-hero { background-color: #FFFFFF; color: var(--color-purple, #4A148C); font-size: 16px; font-weight: 700; padding: 8px 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.5px; }

        @media screen and (max-width: 1383px) { .container-hero-producto { min-height: 500px; } .texto-hero-producto { padding-left: 55px; width: 55%; } .texto-hero-producto h1 { font-size: 42px; } .texto-hero-producto p { font-size: 18px; line-height: 25px; } }
        @media screen and (max-width: 1080px) { .container-hero-producto { min-height: 430px; } .texto-hero-producto { padding-left: 40px; } .texto-hero-producto h1 { font-size: 36px; margin-bottom: 25px; } .texto-hero-producto p { font-size: 17px; line-height: 24px; } .tag-hero { font-size: 14px; padding: 6px 16px; } }
        @media screen and (max-width: 800px) { .hero-producto { margin: 10px 7px 0; padding-top: 0 !important; } .container-hero-producto { background: url('/wp-content/themes/zeus-2023/assets/img_productos/portada_producto_mobile.webp') no-repeat center center; background-size: cover; min-height: 700px; align-items: flex-start; justify-content: center; border-radius: 30px; padding-top: 25px; } .texto-hero-producto { width: 100%; padding: 0 10px; align-items: center; text-align: center; gap: 13px; } .texto-hero-producto h1 { width: 100%; max-width: 350px; font-size: 32px; line-height: 1.08; margin-bottom: 2px; padding: 0; } .texto-hero-producto p { width: 100%; max-width: 290px; font-size: 18px; line-height: 21px; } .tags-hero { justify-content: center; font-size: 14px; padding: 6px 16px;} }
        @media screen and (max-width: 360px) { .br-desktop-producto { display: none; } .br-mobile-producto { display: initial; } }

        /* =========================================
           HEADER DE MÓDULOS (DESKTOP)
           ========================================= */
        .modulo-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; transition: all 0.3s ease;}
        .modulo-title-wrapper { display: flex; align-items: center; gap: 15px; }
        .modulo-icono img { width: 50px; height: 50px; object-fit: contain; }
        .modulo-title-text { display: flex; flex-direction: column; }
        .modulo-subtitle { color: var(--color-purple); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
        .modulo-title { color: var(--color-primary-dark); font-size: 25px; font-weight: 800; margin: 0; line-height: 1.1; text-transform: uppercase;}
        .modulo-badge { background-color: var(--color-purple-light); color: var(--color-purple); padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; }
        
        .producto-mobile-tabs-container { display: none; } /* Oculto en Desktop */

        /* =========================================
           TARJETAS Y GRILLAS
           ========================================= */
        .modulo-card { background: #FFFFFF; border-radius: var(--border-radius-card); padding: 18px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); margin-bottom: 20px; }
        .card-title { color: #6A00A7; font-size: 22px; font-weight: 700; margin-top: 0; margin-bottom: 20px; text-transform: uppercase; }

        .grid-funcionalidades-pequenas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
        .item-pequeno { background-color: var(--color-bg-light); border-radius: var(--border-radius-item); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; transition: transform 0.2s ease; }
        .item-pequeno:hover { transform: translateY(-2px); }
        .item-pequeno .item-left { display: flex; align-items: center; gap: 12px; }
        .item-pequeno .item-left img { width: 45px; height: 45px; }
        .item-pequeno .item-left span { color: #002955; font-size: 20px; font-weight: 600; }

        .grid-funcionalidades-grandes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
        .item-grande { background-color: #FFFFFF; border-radius: var(--border-radius-card); padding: 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 18px rgba(0,0,0,0.06); min-height: 80px; transition: box-shadow 0.25s ease, transform 0.25s ease; }
        .item-grande:hover { transform: translateY(-3px); box-shadow: 0 6px 22px rgba(0,0,0,0.09); }
        .item-grande .item-left { display: flex; align-items: center; gap: 15px; }
        .item-grande .item-left img { width: 45px; height: 45px; object-fit: contain; }
        .item-grande .item-left span { color: var(--color-purple); font-size: 22px; font-weight: 700; text-transform: uppercase; line-height: 1.3; }

        .layout-extras { display: grid; grid-template-columns: 3fr 1fr; gap: 15px; align-items: stretch; }
        .grid-extras-regulares { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: column; grid-template-rows: repeat(3, 1fr); gap: 15px; }

        /* Ajustes exclusivos del módulo Extras */
        @media (min-width: 769px) {
            #modulo-extras .tooltip-box {
                width: var(--desk-w, max-content) !important;
                max-width: var(--desk-mw, 285px) !important;
                left: var(--desk-left, 50%) !important;
            }

            #modulo-extras .tooltip-box::after {
                left: var(--desk-arrow-left, 50%) !important;
            }

            #modulo-extras .item-grande {
                height: var(--desk-h, auto) !important;
            }
        }

        .columna-derecha-extras {
            display: flex;
            flex-direction: column;
            gap: 15px;
            height: 100%;
        }

        .extras-portal-card { margin-bottom: 0; display: flex; flex-direction: column; gap: 20px; }
        .title-pcp { display: flex; align-items: center; gap: 10px; line-height: 1.3; }
        .extras-portal-card .items-verticales { display: flex; flex-direction: column; gap: 15px; height: 100%; }

        /* Alinea PCP y ZECHEK con las tres filas de tarjetas de la izquierda. */
        @media (min-width: 1025px) {
            .columna-derecha-extras {
                display: grid;
                grid-template-rows: repeat(3, minmax(0, 1fr));
            }

            .extras-portal-card {
                grid-row: span 2;
                min-height: 0;
            }

            #modulo-extras .columna-derecha-extras > .item-grande {
                height: auto !important;
            }
        }

        /* =========================================
           TOOLTIPS DESKTOP
           ========================================= */
        .tooltip-wrapper { position: relative; display: inline-block; cursor: pointer; }
        .tooltip-box { position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%) translateY(10px); width: max-content; max-width: 285px; padding: 9px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 100; display: flex; flex-wrap: wrap; gap: 6px; }
        .tooltip-box::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 8px; border-style: solid; }
        .tooltip-wrapper:hover .tooltip-box { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
        .tooltip-box .tag { font-size: 16px; font-weight: 500; padding: 6px 14px; border-radius: 20px; text-align: left; background-color: #FFFFFF; color: #5b6b80; border: 1px solid rgba(107, 33, 168, 0.12); box-shadow: 0 1px 2px rgba(0,0,0,0.02); }
        
        .tooltip-purple { background-color: #EDE6F2 !important; border: none; }
        .tooltip-purple::after { border-color: #EDE6F2 transparent transparent transparent !important; }
        .tooltip-cyan { background-color: #E7FFFF !important; border: none; }
        .tooltip-cyan::after { border-color: #E7FFFF transparent transparent transparent !important; }
        .tooltip-box.texto-plano { font-size: 16px; color: rgba(0, 41, 85, 0.55); font-weight: 500; text-align: center; line-height: 1.4; padding: 15px; border: none; background-color: #E7FFFF !important;}
        .tooltip-box.texto-plano::after { border-color: #E7FFFF transparent transparent transparent !important; }

        @media (max-width: 1024px) {
            .grid-funcionalidades-pequenas, .grid-funcionalidades-grandes { grid-template-columns: repeat(3, 1fr); }
            .layout-extras { grid-template-columns: 1fr; }
            .grid-extras-regulares { grid-auto-flow: row; grid-template-rows: auto; }
            .extras-portal-card .items-verticales { flex-direction: row; }
        }

        /* =========================================
           MODO MOBILE (TABS ENVUELTAS + SCROLL NATURAL)
           ========================================= */
        @media (max-width: 768px) {
            
            /* NUEVO: Variable para definir el alto exacto de tu header superior y Forzado a Sticky */
            :root {
                --alto-header-mobile: 75px; 
            }

            header, .site-header, #masthead {
                position: sticky !important;
                top: 0 !important;
                z-index: 9999 !important;
            }

            /* Asegurar que TODO el contenido esté visible */
            #producto [data-modulo] { 
                display: block !important; 
                position: relative;
            }

            /* Contenedor de Tabs Superior Fijo (NUEVO: Se pega debajo del header) */
            .producto-mobile-tabs-container {
                display: block;
                position: sticky;
                top: var(--alto-header-mobile); 
                z-index: 1000;
                background: #FFFFFF;
                padding: 18px 10px 15px;
                box-shadow: 0 4px 15px rgba(0,0,0,0.06);
                /* Borde indicador dinámico */
                --tab-active-color: #6A00A7;
                border-bottom: 4px solid var(--tab-active-color);
                transition: border-color 0.3s ease;
            }

            /* Título del menú */
            .producto-mobile-tabs-title {
                margin: 30px 0 30px 0;
                color: #002955;
                font-size: 18px;
                font-weight: 800;
                line-height: 1.2;
                text-transform: uppercase;
                text-align: center;
                letter-spacing: 0.5px;
            }

            /* Tabs en Grilla para que entren todas */
            .producto-mobile-tabs {
                display: flex;
                flex-wrap: wrap; /* Permite que bajen a la siguiente línea */
                justify-content: center;
                gap: 8px;
                padding: 0;
                margin: 0;
                list-style: none;
            }
            
            /* Estilo de la Pastilla (Tab) individual */
            .tab-item {
                background: #F0F2F5;
                color: #5b6b80;
                border-radius: 8px; /* Bordes redondos como pastillas */
                font-size: 14px;
                font-weight: 700;
                text-transform: uppercase;
                padding: 8px 12px;
                cursor: pointer;
                transition: all 0.3s ease;
                border: 1px solid transparent;
            }

            .tab-item.active {
                background: #002955;
                color: #FFFFFF;
                box-shadow: 0 3px 8px rgba(0,0,0,0.15);
                border-color: rgba(255,255,255,0.3);
            }
            
            
            .card-title {
    color: #6A00A7;
    font-size: 18px !important;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
    
    
}

.item-pequeno .item-left span {
    color: #002955;
    font-size: 16px;
    font-weight: 600;
}

.tooltip-box .tag { font-size: 14px !important; }

            /* ============================================================
               ELIMINACIÓN DE ESPACIOS BLANCOS (Padding/Margin)
               ============================================================ */
            #producto .modulo-seccion {
                padding-top: 0 !important; /* Mata el espacio blanco superior de la sección */
                padding-bottom: 20px !important;
            }

            .modulo-scroll-section {
                position: relative !important;
                z-index: 10;
                margin-top: 0 !important; /* Mata el espacio blanco superior del contenedor */
            }

        
           /* Título Interno de Módulo (Se ve como una solapita pequeña a la izquierda) */
            .modulo-header {
                position: relative; /* Cambiado de sticky a relative */
                z-index: 30;
                background-color: var(--color-primary-dark); 
                color: #FFFFFF !important;
                padding: 8px 18px !important;
                margin: 0 0 15px -20px !important;
                border-radius: 0 8px 8px 0;
                width: max-content; 
                box-shadow: 2px 4px 10px rgba(0,0,0,0.15);
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                text-transform: uppercase;
            }

            /* Colores de la Solapita Izquierda */
            [data-modulo="ventas"] .modulo-header { background-color: #002955 !important; }
            [data-modulo="crm"] .modulo-header { background-color: #002955 !important; }
            [data-modulo="fondos"] .modulo-header { background-color: #002955 !important; }
            [data-modulo="stock"] .modulo-header { background-color: #002955 !important; }
            [data-modulo="compras"] .modulo-header { background-color: #002955 !important; }
            [data-modulo="proveedores"] .modulo-header { background-color: #002955 !important;}
            [data-modulo="bancos"] .modulo-header { background-color: #002955 !important; }
            [data-modulo="contabilidad"] .modulo-header { background-color: #002955 !important; }
            [data-modulo="reportes"] .modulo-header { background-color: #002955 !important; }
            [data-modulo="configuracion"] .modulo-header { background-color: #002955 !important; }
            [data-modulo="extras"] .modulo-header { background-color: #002955 !important; }

            .modulo-title-wrapper { flex-direction: row !important; align-items: center !important; }
            .modulo-icono, .modulo-subtitle, .modulo-badge { display: none !important; }
            .modulo-title { font-size: 15px !important; font-weight: 700 !important; color: inherit !important; margin: 0 !important; letter-spacing: 0.5px; }

            /* Ajuste de grillas a 1 columna */
            .grid-funcionalidades-pequenas, .grid-funcionalidades-grandes, .grid-extras-regulares { grid-template-columns: 1fr; }
            .modulo-card { padding: 20px; }
            .extras-portal-card .items-verticales { flex-direction: column; }

            /* Apilamiento mobile debajo del menu de modulos. */
            .grid-funcionalidades-pequenas,
            .grid-funcionalidades-grandes,
            .grid-extras-regulares,
            .items-verticales {
                overflow: visible;
            }

            /* NUEVO: Las tarjetas se detienen considerando el Header Mobile + Tabs */
            .item-pequeno,
            .item-grande {
                position: sticky;
                top: calc(var(--alto-header-mobile) + var(--tabs-height, 190px) + var(--stack-offset, 0px));
                z-index: calc(20 + var(--stack-index, 0));
                box-shadow: 0 -10px 25px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
                will-change: auto;
            }

            /* Indicador de la card activa; no ocupa espacio en el layout. */
            .item-pequeno::before,
            .item-grande::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 6px;
                opacity: 0;
                z-index: 3;
                pointer-events: none;
                background: var(--Linear, linear-gradient(
                    90deg,
                    #6A00A7 -103.88%,
                    #00CDCD 105.54%
                ));
                border-radius: 22px 22px 0 0;
                transform: scaleX(0.8);
                transform-origin: center top;
                transition:
                    opacity 0.32s ease,
                    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
                will-change: opacity, transform;
            }

            .item-pequeno.stack-card-active::before,
            .item-grande.stack-card-active::before {
                opacity: 1;
                transform: scaleX(1);
            }

            /* Una card demasiado alta mantiene el desplazamiento natural. */
            .item-pequeno.stack-card-too-tall,
            .item-grande.stack-card-too-tall {
                position: relative;
                top: auto;
            }

            .item-pequeno .item-left,
            .item-grande .item-left {
                min-width: 0;
            }

            .item-pequeno .item-left span,
            .item-grande .item-left span,
            .tooltip-box .tag {
                max-width: 100%;
                box-sizing: border-box;
                overflow-wrap: anywhere;
                white-space: normal;
            }

            .item-pequeno:hover,
            .item-grande:hover {
                transform: none;
            }

            /* Tooltips permanentemente abiertos para evitar "saltos" en pantalla */
            .tiene-acordeon-mobile { flex-wrap: wrap; }
            .tiene-acordeon-mobile > .item-left { max-width: 100%; }
            
            /* Ocultamos la flechita porque ya no hay animación de abrir/cerrar */
            .tiene-acordeon-mobile::after { display: none !important; }
            
            /* Hacemos que el wrapper ocupe todo el ancho para evitar desbordes */
            .tiene-acordeon-mobile .tooltip-wrapper { 
                display: block !important; 
                width: 100% !important; 
                position: relative !important;
                -webkit-clip-path: inset(0 0 var(--tooltip-clip-bottom, 0px) 0 round var(--border-radius-item));
                clip-path: inset(0 0 var(--tooltip-clip-bottom, 0px) 0 round var(--border-radius-item));
            }
            .tiene-acordeon-mobile .icon-info { display: none !important; }
            
    
    /* ============================================================
               BLOQUEO DEL "HOVER FANTASMA" AL TOCAR LA PANTALLA EN MOBILE
               ============================================================ */
            .tiene-acordeon-mobile .tooltip-box,
            .tiene-acordeon-mobile .tooltip-wrapper:hover .tooltip-box,
            .tiene-acordeon-mobile.acordeon-activo .tooltip-box { 
                position: relative !important; 
                display: flex !important; 
                left: 0 !important; /* Cancela el centrado de PC */
                right: auto !important;
                bottom: auto !important;
                transform: none !important; /* BLOQUEA el movimiento al tocar */
                width: 100% !important; 
                max-width: 100% !important; 
                margin-top: 15px !important; 
                padding: 14px !important; 
                box-sizing: border-box !important; 
                justify-content: flex-start !important; 
                opacity: 1 !important; 
                visibility: visible !important; 
                z-index: 9;
            }

            .tiene-acordeon-mobile .tooltip-box.texto-plano,
            .tiene-acordeon-mobile .tooltip-wrapper:hover .tooltip-box.texto-plano,
            .tiene-acordeon-mobile.acordeon-activo .tooltip-box.texto-plano { 
                display: block !important; 
            }

            /* Eliminar el triángulo (::after) de la burbuja del tooltip solo en mobile */
            .tiene-acordeon-mobile .tooltip-box::after,
            .tiene-acordeon-mobile.acordeon-activo .tooltip-box::after {
                display: none !important;
            }
              .texto-hero-producto p:last-of-type {margin-top: 0px; margin-bottom: 6px!important;}
        }
        
        
        /**estilos para que no desborden los tooltips**/
        /* =========================================
           TOOLTIPS INTELIGENTES (ABREN HACIA ABAJO SI NO HAY ESPACIO)
           ========================================= */
        @media (min-width: 769px) {
            /* Invierte la posición de la caja hacia abajo */
            .tooltip-box.tooltip-down {
                bottom: auto !important;
                top: 150% !important;
                transform: translateX(-50%) translateY(-10px) !important;
            }
            
            /* Animación al hacer hover cuando está invertido */
            .tooltip-wrapper:hover .tooltip-box.tooltip-down {
                transform: translateX(-50%) translateY(0) !important;
            }
            
            /* Invierte la posición de la flechita (ahora va arriba de la caja) */
            .tooltip-box.tooltip-down::after {
                top: auto !important;
                bottom: 100% !important;
            }

            /* Invierte los colores de la flechita para que apunten hacia arriba según el color */
            .tooltip-box.tooltip-purple.tooltip-down::after {
                border-color: transparent transparent #EDE6F2 transparent !important;
            }
            .tooltip-box.tooltip-cyan.tooltip-down::after {
                border-color: transparent transparent #E7FFFF transparent !important;
            }
            .tooltip-box.texto-plano.tooltip-down::after {
                border-color: transparent transparent #E7FFFF transparent !important;
            }
        }
   /* =========================================
           FORZAR TOOLTIPS Y TARJETAS SIEMPRE AL FRENTE (SIN TAPAR EL HEADER)
           ========================================= */
        @media (min-width: 769px) {
            /* 1. Nivel base para las tarjetas SOLO EN DESKTOP */
            .item-pequeno, 
            .item-grande {
                position: relative;
                z-index: 1;
            }

            /* 2. Al pasar el mouse, pasa al frente de otras tarjetas, pero no del header */
            .item-pequeno:hover, 
            .item-grande:hover {
                z-index: 50;
            }

            /* 3. El wrapper del tooltip pasa por encima de la tarjeta activa */
            .tooltip-wrapper:hover {
                z-index: 60;
            }

            /* 4. Forzamos el tooltip box a un nivel seguro (menor que el header) */
            .tooltip-box {
                z-index: 90 !important;
            }
        }
        
       
    body {
    font-family: var(--font-primary);
    color: var(--black);
    padding-top: 95px !important;
}