/* Verificación de variables CSS - Color rojo TGR */
:root {
        --tgr-primary: #f93048;
        --tgr-primary-contrast: #ffffff;
        --tgr-light-bg: rgba(235, 238, 242, 0.5);
        --tgr-chart-primary: var(--tgr-kpi-primary); /* Coincide con KPI primary */
        --tgr-chart-secondary: var(--tgr-kpi-secondary); /* Coincide con KPI secondary */
        --tgr-chart-tertiary: var(--tgr-kpi-tertiary); /* Coincide con KPI tertiary */
        --tgr-chart-quaternary: var(--tgr-kpi-quaternary); /* Coincide con KPI quaternary */
        
        /* Secuencia de colores azul-púrpura para KPI - Modo Claro */
        --tgr-kpi-primary: #18183D; /* Azul oscuro empresarial (inicial) */
        --tgr-kpi-secondary: #2D2D5A; /* Azul-púrpura más claro */
        --tgr-kpi-tertiary: #424277; /* Azul-púrpura intermedio */
        --tgr-kpi-quaternary: #53529B; /* Azul-púrpura medio (patrón base) */
        --tgr-kpi-quinary: #6767B4; /* Azul-púrpura claro (patrón base) */
        --tgr-kpi-senary: #7A7ACD; /* Azul-púrpura más claro */
        --tgr-kpi-septenary: #8D8DE6; /* Azul-púrpura muy claro */
        --tgr-kpi-octonary: #A0A0FF; /* Azul-púrpura pastel */
        
        /* Color amarillo brillante para iconos con efecto shine */
        --tgr-icon-shine: #ffd700; /* Amarillo dorado brillante */
    }

/* Modo oscuro - colores rojos */
[data-bs-theme="dark"] {
        --tgr-chart-primary: var(--tgr-kpi-primary); /* Coincide con KPI primary */
        --tgr-chart-secondary: var(--tgr-kpi-secondary); /* Coincide con KPI secondary */
        --tgr-chart-tertiary: var(--tgr-kpi-tertiary); /* Coincide con KPI tertiary */
        --tgr-chart-quaternary: var(--tgr-kpi-quaternary); /* Coincide con KPI quaternary */
        
        /* Secuencia de colores azul-púrpura para KPI - Modo Oscuro (invertida) */
        --tgr-kpi-primary: #D9D9FF; /* Azul-púrpura muy pastel (más claro) */
        --tgr-kpi-secondary: #C6C6FF; /* Azul-púrpura pastel */
        --tgr-kpi-tertiary: #B3B3FF; /* Azul-púrpura muy claro */
        --tgr-kpi-quaternary: #A0A0FF; /* Azul-púrpura más claro */
        --tgr-kpi-quinary: #8D8DE6; /* Azul-púrpura claro */
        --tgr-kpi-senary: #7A7ACD; /* Azul-púrpura intermedio */
        --tgr-kpi-septenary: #6767B4; /* Azul-púrpura más oscuro (patrón inicial) */
        --tgr-kpi-octonary: #53529B; /* Azul-púrpura base (patrón inicial) */
        
        /* Color amarillo brillante para iconos con efecto shine en modo oscuro */
        --tgr-icon-shine: #ffed4e; /* Amarillo más brillante para modo oscuro */
    }
    
    /* Estilos de respaldo para asegurar color rojo vibrante */
    .tgr-title-1 > div:nth-child(2),
    .tgr-title-1 > div:last-child {
        background: var(--tgr-title-tag-bg, #18183D) !important;
        color: var(--tgr-title-tag-color, #ffffff) !important;
        border: var(--tgr-title-tag-border, 2px solid #18183D) !important;
    }
    
    .link-secondary.active,
    #tgr-contact-link,
    #tgr-contact-link .nav-link-title,
    #tgr-contact-link .icon,
    #tgr-contact-link .nav-link-icon svg {
        color: var(--tgr-link-color) !important;
        text-decoration-color: var(--tgr-link-color) !important;
    }
    
    /* Estados hover para enlaces */
    .link-secondary:hover,
    #tgr-contact-link:hover,
    #tgr-contact-link:hover .nav-link-title,
    #tgr-contact-link:hover .icon,
    #tgr-contact-link:hover .nav-link-icon svg {
        color: var(--tgr-link-hover) !important;
        text-decoration-color: var(--tgr-link-hover) !important;
    }
    
    /* Estados active para enlaces */
    .link-secondary:active,
    #tgr-contact-link:active,
    #tgr-contact-link:active .nav-link-title,
    #tgr-contact-link:active .icon,
    #tgr-contact-link:active .nav-link-icon svg {
        color: var(--tgr-link-active) !important;
        text-decoration-color: var(--tgr-link-active) !important;
    }

.turbo-progress-bar {
        background-color: var(--tgr-primary);
}

/* Estilos para el logo
/* Modo claro */
.cls-1 {
        fill: #18183D; /* color que quieras para light mode */
}

/* Modo oscuro */
[data-bs-theme="dark"] .cls-1 {
        fill: #F93048; /* color que quieras para dark mode */
}

/* Tamaño del SVG con ajuste al ancho a su contenedor */
.logo svg {
        width: 30%;
        height: auto;
}

.tgr-title-1 {
        color: #18183D;
}

/* Modo oscuro */
[data-bs-theme="dark"] .tgr-title-1 {
        color: #fff;
}

/* Clase base para tipografía Lexend */
.lexend-rooster {
        font-size: clamp(0.8rem, 5vw, 3rem);
        font-family: "Lexend", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
}

/* Clase específica para títulos H1 con espaciado */
.rooster-h1 {
        font-size: clamp(1rem, 6vw, 3.5rem);
        font-family: "Lexend", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
        margin-top: clamp(3rem, 8vw, 6rem);
        margin-bottom: clamp(3rem, 8vw, 6rem);
        color: var(--tgr-dark-blue);
}

/* Modo oscuro para rooster-h1 */
[data-bs-theme="dark"] .rooster-h1 {
        color: var(--tgr-primary-contrast, #ffffff);
}

/* Clase específica para títulos H1 con espaciado - versión index con fuente más grande */
.rooster-index-h1 {
        font-size: clamp(1.2rem, 7vw, 4rem);
        font-family: "Lexend", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;
        margin-top: clamp(3rem, 8vw, 6rem);
        margin-bottom: clamp(3rem, 8vw, 6rem);
        color: var(--tgr-dark-blue);
}

/* Modo oscuro para rooster-index-h1 */
[data-bs-theme="dark"] .rooster-index-h1 {
        color: var(--tgr-primary-contrast, #ffffff);
}

/* Responsividad para rooster-h1 - ahora manejada con clamp() */

/* Responsividad para rooster-index-h1 - eliminada ya que se usa clamp() para márgenes fluidos */

/* Clase para métricas de dashboard */
.tgr-metric-h1 {
        font-size: clamp(0.75rem, 4.5vw, 2.625rem); /* 75% del tamaño de rooster-h1 */
        font-weight: 700;
        font-style: normal;
        margin: 0;
        padding: 0;
        line-height: 1.2;
        color: #dc3545; /* Rojo inicial para llamar la atención */
        text-align: center;
        display: block;
        transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Clase para animación inicial (solo se aplica una vez) */
.tgr-metric-h1.animate-initial {
        animation: tgr-metric-initial-pulse 4s ease-in-out forwards;
}

/* Estado final después de la animación - mantener color KPI primary */
.tgr-metric-h1.animate-initial.animation-complete {
        color: var(--tgr-kpi-primary) !important; /* Color KPI primary final forzado solo cuando termine la animación */
}

/* Animación inicial de una sola vez - 8 segundos */
@keyframes tgr-metric-initial-pulse {
        0% {
                color: #dc3545; /* Rojo */
                transform: scale(1);
        }
        8% {
                color: #dc3545; /* Rojo - mantener más tiempo */
                transform: scale(1.01);
        }
        16% {
                color: #dc3545; /* Rojo - mantener más tiempo */
                transform: scale(1.02);
        }
        24% {
                color: #dc3545; /* Rojo - mantener más tiempo */
                transform: scale(1.03);
        }
        32% {
                color: #dc3545; /* Rojo - mantener más tiempo */
                transform: scale(1.04);
        }
        40% {
                color: #dc3545; /* Rojo - mantener más tiempo */
                transform: scale(1.05);
        }
        48% {
                color: #dc3545; /* Rojo - mantener más tiempo */
                transform: scale(1.06);
        }
        56% {
                color: #dc3545; /* Rojo - mantener más tiempo */
                transform: scale(1.07);
        }
        64% {
                color: #dc3545; /* Rojo - mantener más tiempo */
                transform: scale(1.08);
        }
        72% {
                color: #8B5CF6; /* Morado */
                transform: scale(1.05);
        }
        80% {
                color: #8B5CF6; /* Morado */
                transform: scale(1.03);
        }
        88% {
                color: #8B5CF6; /* Morado */
                transform: scale(1.02);
        }
        96% {
                color: var(--tgr-kpi-primary); /* Color KPI primary */
                transform: scale(1.01);
        }
        100% {
                color: var(--tgr-kpi-primary); /* Color KPI primary final */
                transform: scale(1);
        }
}

/* Efecto hover */
.tgr-metric-h1:hover {
        color: var(--tgr-kpi-primary) !important;
        transform: scale(1.1);
}

/* Modo oscuro para métricas */
[data-bs-theme="dark"] .tgr-metric-h1 {
        color: #ff6b6b; /* Rojo claro inicial para modo oscuro */
}

/* Animación inicial para modo oscuro */
[data-bs-theme="dark"] .tgr-metric-h1.animate-initial {
        animation: tgr-metric-initial-pulse-dark 4s ease-in-out forwards;
}

/* Estado final después de la animación en modo oscuro - mantener color KPI primary */
[data-bs-theme="dark"] .tgr-metric-h1.animate-initial.animation-complete {
        color: var(--tgr-kpi-primary) !important; /* Color KPI primary final forzado solo cuando termine la animación */
}

/* Animación inicial específica para modo oscuro - 8 segundos */
@keyframes tgr-metric-initial-pulse-dark {
        0% {
                color: #ff6b6b; /* Rojo claro para modo oscuro */
                transform: scale(1);
        }
        8% {
                color: #ff6b6b; /* Rojo claro - mantener más tiempo */
                transform: scale(1.01);
        }
        16% {
                color: #ff6b6b; /* Rojo claro - mantener más tiempo */
                transform: scale(1.02);
        }
        24% {
                color: #ff6b6b; /* Rojo claro - mantener más tiempo */
                transform: scale(1.03);
        }
        32% {
                color: #ff6b6b; /* Rojo claro - mantener más tiempo */
                transform: scale(1.04);
        }
        40% {
                color: #ff6b6b; /* Rojo claro - mantener más tiempo */
                transform: scale(1.05);
        }
        48% {
                color: #ff6b6b; /* Rojo claro - mantener más tiempo */
                transform: scale(1.06);
        }
        56% {
                color: #ff6b6b; /* Rojo claro - mantener más tiempo */
                transform: scale(1.07);
        }
        64% {
                color: #ff6b6b; /* Rojo claro - mantener más tiempo */
                transform: scale(1.08);
        }
        72% {
                color: #A855F7; /* Morado claro */
                transform: scale(1.05);
        }
        80% {
                color: #A855F7; /* Morado claro */
                transform: scale(1.03);
        }
        88% {
                color: #A855F7; /* Morado claro */
                transform: scale(1.02);
        }
        96% {
                color: var(--tgr-kpi-primary); /* Color KPI primary */
                transform: scale(1.01);
        }
        100% {
                color: var(--tgr-kpi-primary); /* Color KPI primary final */
                transform: scale(1);
        }
}

/* Hover en modo oscuro */
[data-bs-theme="dark"] .tgr-metric-h1:hover {
        color: var(--tgr-kpi-primary) !important;
        transform: scale(1.1);
}

/* Clase reutilizable para fondos de página con imagen */
.tgr-page-bg {
        --tgr-bg-image-light: url('../static/img/heroBg.46e2bb18.png'); /* Imagen para modo claro */
        --tgr-bg-image-dark: url('../static/img/heroBg.46e2bb18.png'); /* Imagen para modo oscuro */
        position: relative;
}

/* Fondo con opacidad usando pseudo-elemento para modo claro */
.tgr-page-bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: var(--tgr-bg-image-light);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 100% auto;
        background-attachment: scroll;
        opacity: 0.30; /* Ligeramente transparente */
        z-index: -1; /* Detrás del contenido */
        pointer-events: none; /* No interfiere con interacciones */
}

/* Modo oscuro con imagen específica y transparencia */
[data-bs-theme="dark"] .tgr-page-bg::before {
        background-image: var(--tgr-bg-image-dark);
}

/* Responsividad para la clase de fondo reutilizable */
@media (max-width: 1200px) {
        .tgr-page-bg::before {
                background-image: none !important; /* Ocultar en resoluciones inferiores a 1200px */
        }
        
        [data-bs-theme="dark"] .tgr-page-bg::before {
                background-image: none !important; /* Ocultar también en modo oscuro */
        }
}

/* Reducir tamaño del SVG Layer_1 de manera unificada con responsividad */
#Layer_1 {
        width: 30% !important; /* 40% adicional más pequeño que 50% */
        height: auto !important;
        max-width: 150px !important; /* Reducido proporcionalmente */
}

/* Responsividad para el SVG Layer_1 - reducción más gradual */
@media (max-width: 1200px) {
        #Layer_1 {
                width: 28% !important; /* Reducción más ligera */
                max-width: 140px !important;
        }
}

@media (max-width: 992px) {
        #Layer_1 {
                width: 26% !important; /* Reducción más ligera */
                max-width: 130px !important;
        }
}

@media (max-width: 768px) {
        #Layer_1 {
                width: 24% !important; /* Reducción más ligera */
                max-width: 120px !important;
        }
}

@media (max-width: 576px) {
        #Layer_1 {
                width: 22% !important; /* Reducción más ligera */
                max-width: 110px !important;
        }
}

@media (max-width: 480px) {
        #Layer_1 {
                width: 20% !important; /* Reducción más ligera */
                max-width: 100px !important;
        }
}

/* Ocultar dashboard KPI en dispositivos pequeños */
@media (max-width: 1000px) {
        .kpi-dashboard {
                display: none !important;
        }
        #funny-dashboard {
                display: none !important;
        }
}

.lexend-font {
        font-family: "Lexend", sans-serif;
}

/* Gap uniforme para secciones */
.section,
.section-secondary {
        margin-top: 3rem;
        margin-bottom: 3rem;
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
}

/* Clase para resaltado de fondo a discreción */
.tgr-section-highlight {
        background-color: var(--tgr-light-bg); /* Reducida opacidad para mejor visibilidad de imagen de fondo */
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding-left: calc(50vw - 50%);
        padding-right: calc(50vw - 50%);
        /* Extender hacia arriba completamente el margen para cobertura total */
        margin-top: -3rem !important; /* 100% del margen (3rem) */
        padding-top: 6rem !important; /* 3rem original + 3rem de extensión */
}

/* Eliminar margen superior cuando hay secciones resaltadas consecutivas */
.section.tgr-section-highlight + .section.tgr-section-highlight {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
}

/* Alternativa más específica para asegurar que se aplique */
div.section.tgr-section-highlight + div.section.tgr-section-highlight {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
}

/* Modo oscuro para resaltado de secciones */
[data-bs-theme="dark"] .tgr-section-highlight {
        background-color: rgba(99, 102, 241, 0.05); /* Color consistente con s3middleware.html */
}

/* ===== ESTILOS PARA IMÁGENES SVG CON ALTURA PERFECTA Y TRAZOS FINOS ===== */

/* Asegurar que las filas con imágenes se estiren para igualar altura */
.row.items-center {
        align-items: stretch !important;
}

/* Contenedores de imágenes SVG que se adaptan a la altura del texto */
.row.items-center .col-3[data-animation="svg-container"],
.tgr-svg-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        min-height: 0 !important;
}

/* Contenedor específico para imágenes que se ajusta al texto */
.tgr-img-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 100% !important;
        flex-shrink: 1 !important;
}

/* Asegurar que las columnas de texto determinen la altura */
.row.items-center .col-9,
.tgr-text-column {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: 1rem;
        line-height: 1.4;
}

/* Ajustar las imágenes SVG para que se adapten al contenedor */
.row.items-center .col-3[data-animation="svg-container"] svg,
.tgr-svg-container svg,
.tgr-responsive-img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
}

/* Aplicar color KPI primary a elementos SVG dentro de imágenes responsivas */
.tgr-responsive-img svg,
.tgr-responsive-img svg *,
.tgr-responsive-img svg path,
.tgr-responsive-img svg circle,
.tgr-responsive-img svg rect,
.tgr-responsive-img svg polygon,
.tgr-responsive-img svg ellipse,
.tgr-responsive-img svg line,
.tgr-responsive-img svg polyline,
.tgr-responsive-img svg text,
.tgr-responsive-img svg g {
        fill: none !important;
        color: var(--tgr-kpi-primary) !important;
        stroke: var(--tgr-kpi-primary) !important;
        stroke-width: 2 !important;
}

/* Forzar color en todos los elementos SVG de imágenes responsivas - más específico */
.tgr-responsive-img svg [fill],
.tgr-responsive-img svg [stroke],
.tgr-responsive-img svg circle[fill],
.tgr-responsive-img svg path[fill],
.tgr-responsive-img svg rect[fill],
.tgr-responsive-img svg polygon[fill] {
        fill: none !important;
        stroke: var(--tgr-kpi-primary) !important;
        stroke-width: 2 !important;
}

/* Sobrescribir colores inline específicos */
.tgr-responsive-img svg circle[fill="#18183d"],
.tgr-responsive-img svg path[fill="#18183d"],
.tgr-responsive-img svg rect[fill="#18183d"],
.tgr-responsive-img svg polygon[fill="#18183d"] {
        fill: none !important;
        stroke: var(--tgr-kpi-primary) !important;
        stroke-width: 2 !important;
}

/* Forzar que las imágenes SVG en tgr-img-container se ajusten al contenedor */
.tgr-img-container svg {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        display: block !important;
        /* Forzar el ajuste ignorando atributos HTML */
        min-width: 0 !important;
        min-height: 0 !important;
        /* Limitar el tamaño máximo */
        max-width: 200px !important;
        max-height: 200px !important;
}

/* Aplicar color KPI primary a elementos SVG en tgr-img-container */
.tgr-img-container svg,
.tgr-img-container svg *,
.tgr-img-container svg path,
.tgr-img-container svg circle,
.tgr-img-container svg rect,
.tgr-img-container svg polygon,
.tgr-img-container svg ellipse,
.tgr-img-container svg line,
.tgr-img-container svg polyline,
.tgr-img-container svg text,
.tgr-img-container svg g {
        fill: none !important;
        color: var(--tgr-kpi-primary) !important;
        stroke: var(--tgr-kpi-primary) !important;
        stroke-width: 2 !important;
}

/* Forzar color en todos los elementos SVG de tgr-img-container - más específico */
.tgr-img-container svg [fill],
.tgr-img-container svg [stroke],
.tgr-img-container svg circle[fill],
.tgr-img-container svg path[fill],
.tgr-img-container svg rect[fill],
.tgr-img-container svg polygon[fill] {
        fill: none !important;
        stroke: var(--tgr-kpi-primary) !important;
        stroke-width: 2 !important;
}

/* Sobrescribir colores inline específicos en tgr-img-container */
.tgr-img-container svg circle[fill="#18183d"],
.tgr-img-container svg path[fill="#18183d"],
.tgr-img-container svg rect[fill="#18183d"],
.tgr-img-container svg polygon[fill="#18183d"] {
        fill: none !important;
        stroke: var(--tgr-kpi-primary) !important;
        stroke-width: 2 !important;
}

/* Trazos finos para SVGs - base */
[data-animation="svg-container"] svg path,
.tgr-svg-container svg path,
.tgr-responsive-img path {
        stroke-width: 4 !important; /* Trazos finos por defecto */
}

/* Responsividad para trazos finos */
@media (max-width: 768px) {
        [data-animation="svg-container"] svg path,
        .tgr-svg-container svg path,
        .tgr-responsive-img path {
                stroke-width: 4 !important; /* Mantener delgado en móviles */
        }
        
        /* Ajustar tamaño de imágenes en tablets */
        .tgr-img-container svg {
                max-width: 150px !important;
                max-height: 150px !important;
        }
}

@media (max-width: 576px) {
        [data-animation="svg-container"] svg path,
        .tgr-svg-container svg path,
        .tgr-responsive-img path {
                stroke-width: 3.5 !important; /* Aún más delgado en móviles pequeños */
        }
        
        /* Ajustar tamaño de imágenes en móviles */
        .tgr-img-container svg {
                max-width: 120px !important;
                max-height: 120px !important;
        }
}

@media (max-width: 480px) {
        [data-animation="svg-container"] svg path,
        .tgr-svg-container svg path,
        .tgr-responsive-img path {
                stroke-width: 3 !important; /* Muy delgado en móviles XS */
        }
        
        /* Ajustar tamaño de imágenes en móviles XS */
        .tgr-img-container svg {
                max-width: 100px !important;
                max-height: 100px !important;
        }
}

/* Responsividad para gap de secciones */
@media (max-width: 768px) {
        .section,
        .section-secondary {
                margin-top: 2.25rem;
                margin-bottom: 2.25rem;
                padding-top: 1.125rem;
                padding-bottom: 1.125rem;
        }
        
        /* Ajustar el ancho completo en tablets */
        .tgr-section-highlight {
                margin-left: -15px;
                margin-right: -15px;
                padding-left: 15px;
                padding-right: 15px;
                background-color: var(--tgr-light-bg) !important; /* Opacidad reducida para mejor visibilidad de imagen de fondo */
                /* Extender hacia arriba completamente el margen en tablets */
                margin-top: -2.25rem !important; /* 100% del margen (2.25rem) */
                padding-top: 4.5rem !important; /* 2.25rem + 2.25rem */
        }
        
        /* Eliminar margen superior en tablets para secciones consecutivas */
        .section.tgr-section-highlight + .section.tgr-section-highlight {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
        }
        
        /* Alternativa más específica para tablets */
        div.section.tgr-section-highlight + div.section.tgr-section-highlight {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
        }
        
        /* Modo oscuro en tablets */
        [data-bs-theme="dark"] .tgr-section-highlight {
                background-color: rgba(99, 102, 241, 0.05) !important;
        }
}

@media (max-width: 576px) {
        .section,
        .section-secondary {
                margin-top: 1.5rem;
                margin-bottom: 1.5rem;
                padding-top: 0.75rem;
                padding-bottom: 0.75rem;
        }
        
        /* Ajustar el ancho completo en móviles */
        .tgr-section-highlight {
                margin-left: -15px;
                margin-right: -15px;
                padding-left: 15px;
                padding-right: 15px;
                background-color: var(--tgr-light-bg) !important; /* Opacidad reducida para mejor visibilidad de imagen de fondo */
                /* Extender hacia arriba completamente el margen en móviles */
                margin-top: -1.5rem !important; /* 100% del margen (1.5rem) */
                padding-top: 3rem !important; /* 1.5rem + 1.5rem */
        }
        
        /* Eliminar margen superior en móviles para secciones consecutivas */
        .section.tgr-section-highlight + .section.tgr-section-highlight {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
        }
        
        /* Alternativa más específica para móviles */
        div.section.tgr-section-highlight + div.section.tgr-section-highlight {
                margin-top: 0 !important;
                margin-bottom: 0 !important;
        }
        
        /* Modo oscuro en móviles */
        [data-bs-theme="dark"] .tgr-section-highlight {
                background-color: rgba(99, 102, 241, 0.05) !important;
        }
}

/* Estilo para imágenes responsivas que se ajustan al contenedor */
.tgr-responsive-img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        /* Color principal KPI para imágenes */
        fill: var(--tgr-kpi-primary);
        color: var(--tgr-kpi-primary);
        /* Optimizaciones de rendimiento */
        will-change: transform;
        transform: translateZ(0);
        /* Transición suave para cambios de tamaño */
        transition: all 0.3s ease-in-out;
}

/* Reducir tamaño en pantallas grandes */
@media (max-width: 1200px) {
        .tgr-responsive-img {
                max-width: 80%;
                max-height: 80%;
        }
}

/* Reducir más en pantallas medianas */
@media (max-width: 992px) {
        .tgr-responsive-img {
                max-width: 60%;
                max-height: 60%;
        }
}

/* Reducir aún más en pantallas pequeñas */
@media (max-width: 900px) {
        .tgr-responsive-img {
                max-width: 40%;
                max-height: 40%;
        }
}

/* Ocultar imagen en resoluciones inferiores a 1000px */
@media (max-width: 1000px) {
        .tgr-responsive-img {
                display: none !important;
        }
        
        .tgr-overlay-img-container {
                display: none !important;
        }
}

/* Estilo para contenedores de imágenes responsivas */
.tgr-img-container {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: auto;
        min-width: 0;
        flex-shrink: 1;
}

/* Clase para alineación superior específica */
.tgr-align-top {
        align-self: flex-start !important;
}

/* Ajustar el contenedor según el tamaño de la imagen */
@media (max-width: 1200px) {
        .tgr-img-container {
                max-width: 80%;
        }
}

@media (max-width: 992px) {
        .tgr-img-container {
                max-width: 60%;
        }
}

@media (max-width: 900px) {
        .tgr-img-container {
                max-width: 40%;
        }
}

/* Ocultar contenedor en resoluciones inferiores a 1000px */
@media (max-width: 1000px) {
        .tgr-img-container {
                display: none !important;
        }
}

/* Estilo para la columna de texto que se ajusta dinámicamente */
.tgr-text-column {
        flex: 1;
        min-width: 0;
        padding-left: 1rem;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
}

/* Ajustar padding de la columna de texto según el tamaño de la imagen */
@media (max-width: 1200px) {
        .tgr-text-column {
                padding-left: 0.8rem;
        }
}

@media (max-width: 992px) {
        .tgr-text-column {
                padding-left: 0.6rem;
        }
}

@media (max-width: 900px) {
        .tgr-text-column {
                padding-left: 0.4rem;
        }
}

/* En resoluciones inferiores a 1000px, la columna de texto ocupa todo el ancho */
@media (max-width: 1000px) {
        .tgr-text-column {
                padding-left: 0;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                flex: 1 1 100%;
                max-width: 100%;
        }
}

/* Sobrescribir cualquier padding superior/inferior de Bootstrap para tgr-text-column */
.tgr-text-column,
.col-9.tgr-text-column,
.row .tgr-text-column {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
}

/* ===== ESTILOS PARA BOTÓN CORPORATIVO ===== */

/* Clase reutilizable para botones con colores corporativos */
.btn-corporate {
        background-color: var(--tgr-kpi-primary) !important;
        border-color: var(--tgr-kpi-primary) !important;
        color: #ffffff !important;
        font-weight: 500;
        transition: all var(--tgr-transition-normal) var(--tgr-ease-in-out);
}

.btn-corporate:hover {
        background-color: var(--tgr-kpi-secondary) !important;
        border-color: var(--tgr-kpi-secondary) !important;
        color: #ffffff !important;
        transform: translateY(-1px);
        box-shadow: var(--tgr-shadow-md);
}

.btn-corporate:active,
.btn-corporate:focus {
        background-color: var(--tgr-kpi-tertiary) !important;
        border-color: var(--tgr-kpi-tertiary) !important;
        color: #ffffff !important;
        box-shadow: 0 0 0 0.2rem var(--tgr-kpi-secondary) !important;
}

/* Modo oscuro para botones corporativos */
[data-bs-theme="dark"] .btn-corporate {
        color: #18183D !important; /* Azul oscuro empresarial para modo oscuro */
}

[data-bs-theme="dark"] .btn-corporate:hover {
        color: #18183D !important; /* Azul oscuro empresarial para modo oscuro */
}

[data-bs-theme="dark"] .btn-corporate:active,
[data-bs-theme="dark"] .btn-corporate:focus {
        color: #18183D !important; /* Azul oscuro empresarial para modo oscuro */
}

/* Mejorar márgenes en dispositivos pequeños */
@media (max-width: 768px) {
        .container-xl {
                padding-left: 1rem;
                padding-right: 1rem;
        }
        
        .section,
        .section-secondary {
                padding-left: 0;
                padding-right: 0;
        }
        
        /* Padding específico para secciones resaltadas */
        .section.tgr-section-highlight,
        .section-secondary.tgr-section-highlight {
                padding-left: 1rem;
                padding-right: 1rem;
        }
}

@media (max-width: 576px) {
        .container-xl {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
        }
        
        .section,
        .section-secondary {
                padding-left: 0;
                padding-right: 0;
        }
        
        /* Padding específico para secciones resaltadas */
        .section.tgr-section-highlight,
        .section-secondary.tgr-section-highlight {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
        }
        
        .row {
                margin-left: -0.5rem;
                margin-right: -0.5rem;
        }
        
        .col, .col-auto, .col-12 {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
        }
}

/* ===== CONTENEDOR DE IMÁGENES SUPERPUESTAS ===== */

/* Clase genérica para contenedores con imágenes superpuestas (claro/oscuro) */
.tgr-overlay-img-container {
        position: relative;
        width: auto;
        height: auto;
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
}

/* Contenedor interno para las imágenes superpuestas */
.tgr-overlay-img-container > div {
        position: relative;
        width: 400px;
        height: 400px;
        max-width: 100%;
}

/* Ajuste para cualquier tipo de imagen dentro del contenedor superpuesto */
.tgr-overlay-img-container img,
.tgr-overlay-img-container svg {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        transition: opacity var(--tgr-transition-normal) var(--tgr-ease-in-out);
        display: block !important;
}

/* Asegurar que las imágenes se superpongan correctamente */
.tgr-overlay-img-container .img-light {
        z-index: 1;
}

.tgr-overlay-img-container .img-dark {
        z-index: 2;
}

/* Responsividad para contenedores de imágenes superpuestas */
@media (max-width: 1200px) {
        .tgr-overlay-img-container > div {
                width: 350px;
                height: 250px;
        }
}

@media (max-width: 992px) {
        .tgr-overlay-img-container > div {
                width: 300px;
                height: 200px;
        }
}

@media (max-width: 768px) {
        .tgr-overlay-img-container > div {
                width: 250px;
                height: 150px;
        }
}

@media (max-width: 576px) {
        .tgr-overlay-img-container > div {
                width: 200px;
                height: 120px;
        }
}


@media (max-width: 480px) {
        .container-xl {
                padding-left: 2rem;
                padding-right: 2rem;
        }
        
        .section,
        .section-secondary {
                padding-left: 0;
                padding-right: 0;
        }
        
        /* Padding específico para secciones resaltadas */
        .section.tgr-section-highlight,
        .section-secondary.tgr-section-highlight {
                padding-left: 2rem;
                padding-right: 2rem;
        }
        
        .row {
                margin-left: -0.75rem;
                margin-right: -0.75rem;
        }
        
        .col, .col-auto, .col-12 {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
        }
}

/* Triángulo rectángulo superior izquierdo para secciones resaltadas */
.tgr-triangle-top-right {
        position: relative;
}

.tgr-triangle-top-right::before {
        content: '';
        position: absolute;
        top: -50px;
        left: 0;
        width: 100vw;
        height: 50px;
        background-color: var(--tgr-light-bg); /* Mismo color que tgr-section-highlight */
        clip-path: polygon(0 0, 100% 100%, 0 100%);
        transform: scaleX(-1);
        z-index: -1;
        margin-left: calc(-50vw + 50%);
}

/* Modo oscuro para el triángulo */
[data-bs-theme="dark"] .tgr-triangle-top-right::before {
        background-color: rgba(99, 102, 241, 0.05); /* Mismo color que tgr-section-highlight en modo oscuro */
}

/* Triángulo rectángulo inferior derecho para secciones resaltadas */
.tgr-triangle-bottom-right {
        position: relative;
}

.tgr-triangle-bottom-right::after {
        content: '';
        position: absolute;
        bottom: -50px;
        left: 0;
        width: 100vw;
        height: 50px;
        background-color: var(--tgr-light-bg); /* Mismo color que tgr-section-highlight */
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        z-index: -1;
        margin-left: calc(-50vw + 50%);
}

/* Modo oscuro para el triángulo inferior derecho */
[data-bs-theme="dark"] .tgr-triangle-bottom-right::after {
        background-color: rgba(99, 102, 241, 0.05); /* Mismo color que tgr-section-highlight en modo oscuro */
}

/* Estilos específicos para la página contact-us.html */
#tags-art {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(0.1rem, 0.5vw, 0.5rem);
        flex-wrap: wrap;
}

#tags-art svg {
        flex-shrink: 0;
        width: auto;
        height: clamp(1.8em, 4.5vw, 3.5em);
        vertical-align: middle;
        display: inline-block;
}

/* Responsividad para tags-art - ahora manejada con clamp() */

/* ===== SISTEMA DE RESPONSIVIDAD UNIFORME ===== */
/* 
 * Las clases rooster-h1, rooster-index-h1 y tags-art usan clamp() para
 * una reducción proporcional y uniforme de tamaños:
 * 
 * - rooster-h1: clamp(1rem, 6vw, 3.5rem) + márgenes clamp(3rem, 8vw, 6rem)
 * - rooster-index-h1: clamp(1.2rem, 7vw, 4rem) + márgenes clamp(3rem, 8vw, 6rem)  
 * - tags-art svg: clamp(1.8em, 4.5vw, 3.5em) + gap clamp(0.1rem, 0.5vw, 0.5rem)
 * 
 * Esto asegura que cuando se usan juntas, la reducción sea uniforme y proporcional.
 */


/* ===== CLASES DE UTILIDAD PARA COLORES KPI ===== */

/* Clase para obtener array de colores KPI para gráficos */
.tgr-kpi-colors {
        --kpi-colors: var(--tgr-kpi-primary), var(--tgr-kpi-secondary), var(--tgr-kpi-tertiary), var(--tgr-kpi-quaternary), var(--tgr-kpi-quinary), var(--tgr-kpi-senary), var(--tgr-kpi-septenary), var(--tgr-kpi-octonary);
}

/* Clase para colores KPI en JavaScript (para ApexCharts, Chart.js, etc.) */
.tgr-kpi-colors-js {
        /* Array de colores para usar en JavaScript */
        --kpi-colors-array: [
                "var(--tgr-kpi-primary)",
                "var(--tgr-kpi-secondary)", 
                "var(--tgr-kpi-tertiary)",
                "var(--tgr-kpi-quaternary)",
                "var(--tgr-kpi-quinary)",
                "var(--tgr-kpi-senary)",
                "var(--tgr-kpi-septenary)",
                "var(--tgr-kpi-octonary)"
        ];
}

/* ===== CLASE GENERALIZADA PARA BORDE DE TEXTO ===== */

/* Clase para agregar borde que sigue el contorno del texto - MODO CLARO Y OSCURO */
.tgr-text-border {
        display: inline-block !important;
        transition: all var(--tgr-transition-normal) var(--tgr-ease-in-out) !important;
        font-weight: 600 !important; /* Peso de fuente para mejor visibilidad del borde */
}

/* Borde con color de fondo claro para modo claro */
.tgr-text-border {
        text-shadow: 
                -1px -1px 0 var(--tgr-light-bg),
                1px -1px 0 var(--tgr-light-bg),
                -1px 1px 0 var(--tgr-light-bg),
                1px 1px 0 var(--tgr-light-bg),
                -1px 0 0 var(--tgr-light-bg),
                1px 0 0 var(--tgr-light-bg),
                0 -1px 0 var(--tgr-light-bg),
                0 1px 0 var(--tgr-light-bg) !important;
}

/* Borde azul institucional para modo oscuro */
[data-bs-theme="dark"] .tgr-text-border {
        text-shadow: 
                -1px -1px 0 var(--tgr-dark-blue),
                1px -1px 0 var(--tgr-dark-blue),
                -1px 1px 0 var(--tgr-dark-blue),
                1px 1px 0 var(--tgr-dark-blue),
                -1px 0 0 var(--tgr-dark-blue),
                1px 0 0 var(--tgr-dark-blue),
                0 -1px 0 var(--tgr-dark-blue),
                0 1px 0 var(--tgr-dark-blue) !important;
}