/**
 * Glic Store - CSS Global
 * Estilos base y variables globales
 */

/* Importación de Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Reset y Variables Globales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Forzar Inter en todos los elementos */
*, *::before, *::after {
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
}

:root {
    --glic-primary: #00D4AA;
    --glic-secondary: #0066CC;
    --glic-accent: #00A86B;
    --glic-dark: #1A1A1A;
    --glic-light: #FFFFFF;
    --glic-gray: #F5F5F5;
    --glic-text: #333333;
    --glic-text-light: #666666;
    
    --glic-gradient: linear-gradient(135deg, #00D4AA 0%, #0066CC 100%);
    --glic-gradient-reverse: linear-gradient(135deg, #0066CC 0%, #00D4AA 100%);
    --glic-gradient-horizontal: linear-gradient(90deg, #00D4AA 0%, #0066CC 100%);
    --glic-gradient-vertical: linear-gradient(180deg, #00D4AA 0%, #0066CC 100%);
    --glic-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --glic-border-radius: 8px;
    --glic-transition: all 0.3s ease;
    
    --glic-font-family: 'Inter', sans-serif;
    --glic-font-weight-regular: 400;
    --glic-font-weight-medium: 500;
    --glic-font-weight-semibold: 600;
    --glic-font-weight-bold: 700;

    /* Sistema de z-index - Jerarquía coherente y escalable
     * 
     * Niveles locales (0-10): Para elementos dentro de contenedores con position relative
     * - Estos z-index solo afectan dentro de su stacking context local
     * - No interfieren con elementos globales como header o modales
     * 
     * Niveles globales (100+): Para elementos que deben estar por encima del contenido
     * - Header y navegación: 100-150
     * - Modales y overlays críticos: 1000+
     */
    
    /* Niveles locales (uso dentro de contenedores) */
    --z-base: 0;              /* Elementos de fondo dentro de contenedores */
    --z-content-bg: 1;        /* Overlays, gradientes, barras dentro de secciones */
    --z-content: 2;           /* Contenido principal dentro de secciones */
    --z-content-highlight: 3; /* Iconos, elementos destacados dentro de secciones */
    --z-content-nav: 5;       /* Botones de navegación dentro de secciones (flechas, etc) */
    --z-tooltip: 10;          /* Tooltips locales dentro de su contexto */
    
    /* Niveles globales - Header y Navegación */
    --z-overlay: 100;         /* Overlay del menú móvil - debajo del header */
    --z-header: 150;          /* Header sticky - siempre visible por encima del contenido */
    --z-menu: 151;            /* Menú móvil - por encima del header cuando está activo */
    --z-burger: 152;          /* Botón hamburguesa - siempre clicable */
    
    /* Niveles globales - Modales y Overlays críticos */
    --z-modal-backdrop: 1000; /* Backdrop de modales */
    --z-modal: 1001;          /* Modales, forms críticos - por encima de todo excepto sistema */

    /* Sistema de tipografía global - Variables base */
    --glic-font-size-display-xl: 3.4375rem; /* 55px - Títulos principales */
    --glic-font-size-display-lg: 2.5rem; /* 40px - Títulos de sección */
    --glic-font-size-display-md: 1.875rem; /* 30px - Títulos medianos */
    --glic-font-size-display-sm: 1.5rem; /* 24px - Títulos pequeños */
    --glic-font-size-text-xl: 1.25rem; /* 20px - Texto grande */
    --glic-font-size-text-lg: 1.125rem; /* 18px - Texto mediano */
    --glic-font-size-text-base: 1rem; /* 16px - Texto base */
    --glic-font-size-text-sm: 0.875rem; /* 14px - Texto pequeño */
    --glic-font-size-text-xs: 0.75rem; /* 12px - Texto muy pequeño */
}

.glic-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    position: relative;
}

@media (min-width: 640px) {
    .glic-container {
        max-width: 640px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px) {
    .glic-container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .glic-container {
        max-width: 1024px;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1280px) {
    .glic-container {
        max-width: 1600px;
    }
}

@media (min-width: 1440px) {
    .glic-container {
        max-width: 1800px;
    }
}

body {
    font-family: 'Inter', sans-serif !important;
    font-weight: var(--glic-font-weight-regular);
    line-height: 1.6;
    color: var(--glic-text);
    background-color: var(--glic-light);
}

/* Container Global */
.glic-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Botones Globales */
.glic-btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--glic-border-radius);
    font-weight: 600;
    cursor: pointer;
    -webkit-transition: var(--glic-transition);
    transition: var(--glic-transition);
    text-decoration: none;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--glic-font-family);
}

.glic-btn-primary {
    background: -webkit-gradient(linear, left top, right bottom, from(#00D4AA), to(#0066CC));
    background: -webkit-linear-gradient(315deg, #00D4AA 0%, #0066CC 100%);
    background: linear-gradient(135deg, #00D4AA 0%, #0066CC 100%);
    background: var(--glic-gradient);
    color: var(--glic-light);
}

.glic-btn-primary:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: var(--glic-shadow);
    box-shadow: var(--glic-shadow);
}

.glic-btn-arrow {
    font-size: 1.2rem;
}

/* Header de Secciones - Clases Generalizadas */
.glic-section-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    margin-bottom: 3rem;
}

.glic-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--glic-dark);
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.glic-section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: -webkit-gradient(linear, left top, right bottom, from(#00D4AA), to(#0066CC));
    background: -webkit-linear-gradient(315deg, #00D4AA 0%, #0066CC 100%);
    background: linear-gradient(135deg, #00D4AA 0%, #0066CC 100%);
    background: var(--glic-gradient);
    border-radius: 2px;
}

.glic-section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    font-style: normal;
    color: var(--glic-text-light);
    margin: 0 auto;
    max-width: 600px;
    line-height: 1.6;
    display: block;
}

/* Responsive para Section Title y Subtitle - Mobile */
@media (max-width: 479px) {
    .glic-section-title {
        font-size: var(--glic-font-size-display-md) !important; /* 22px */
    }
    
    .glic-section-subtitle {
        font-size: var(--glic-font-size-text-sm) !important; /* 14px */
    }
}

/* ========================================
   PAGE TITLE - Clase global para títulos de página
   ======================================== */
.glic-page-title {
    font-family: var(--glic-font-family) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-align: center !important;
    margin: -1rem 0 0.5rem 0 !important;
    position: relative !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* .glic-page-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 4px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
} */

/* Responsive para Page Title */
@media (min-width: 1440px) {
    .glic-page-title {
        font-size: 2.75rem !important; /* 44px */
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .glic-page-title {
        font-size: 2.5rem !important; /* 40px */
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .glic-page-title {
        font-size: 2.25rem !important; /* 36px */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .glic-page-title {
        font-size: 2rem !important; /* 32px */
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .glic-page-title {
        font-size: 1.75rem !important; /* 28px */
    }
}

@media (max-width: 479px) {
    .glic-page-title {
        font-size: 1.5rem !important; /* 24px */
    }
}

/* Utilidades */
.glic-text-center { text-align: center; }
.glic-text-left { text-align: left; }
.glic-text-right { text-align: right; }

/* Utilidades de Fuente */
.glic-font-light { font-weight: 300; }
.glic-font-regular { font-weight: var(--glic-font-weight-regular); }
.glic-font-medium { font-weight: var(--glic-font-weight-medium); }
.glic-font-semibold { font-weight: var(--glic-font-weight-semibold); }
.glic-font-bold { font-weight: var(--glic-font-weight-bold); }


.glic-mb-1 { margin-bottom: 0.5rem; }
.glic-mb-2 { margin-bottom: 1rem; }
.glic-mb-3 { margin-bottom: 1.5rem; }
.glic-mb-4 { margin-bottom: 2rem; }

.glic-mt-1 { margin-top: 0.5rem; }
.glic-mt-2 { margin-top: 1rem; }
.glic-mt-3 { margin-top: 1.5rem; }
.glic-mt-4 { margin-top: 2rem; }

/* ========================================
   RESPONSIVE BREAKPOINTS
   Basado en Bootstrap 5 + Foundation
   ======================================== */

/* Extra Small devices (phones, 0px and up) */
@media (min-width: 0px) {
    .glic-container {
        padding: 0 15px;
    }
    
    .glic-section-title {
        font-size: 1.8rem;
    }
    
    .glic-section-subtitle {
        font-size: 1rem;
    }
    
    .glic-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .glic-container {
        padding: 0 20px;
    }
    
    .glic-section-title {
        font-size: 2rem;
    }
    
    .glic-section-subtitle {
        font-size: 1.1rem;
    }
    
    .glic-btn {
        padding: 12px 20px;
        font-size: 1rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .glic-container {
        padding: 0 25px;
    }
    
    .glic-section-title {
        font-size: 2.2rem;
    }
    
    .glic-section-subtitle {
        font-size: 1.15rem;
    }
    
    .glic-btn {
        padding: 12px 24px;
        font-size: 1rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .glic-container {
        padding: 0 30px;
    }
    
    .glic-section-title {
        font-size: 2.4rem;
    }
    
    .glic-section-subtitle {
        font-size: 1.2rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .glic-container {
        padding: 0 40px;
    }
    
    .glic-section-title {
        font-size: 2.5rem;
    }
    
    .glic-section-subtitle {
        font-size: 1.25rem;
    }
}

/* Extra extra large devices (1400px and up) */
@media (min-width: 1400px) {
    .glic-container {
        padding: 0 50px;
    }
    
    .glic-section-title {
        font-size: 2.8rem;
    }
    
    .glic-section-subtitle {
        font-size: 1.3rem;
    }
}

/* ========================================
   SPECIFIC BREAKPOINT RANGES
   ======================================== */

/* Portrait tablet to landscape and desktop (768px to 979px) */
@media (min-width: 768px) and (max-width: 979px) {
    .glic-container {
        max-width: 750px;
    }
}

/* Landscape phone to portrait tablet (480px to 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    .glic-container {
        max-width: 100%;
        padding: 0 20px;
    }
    
    .glic-section-title {
        font-size: 1.9rem;
    }
}

/* Landscape phones and down (max-width: 480px) */
@media (max-width: 480px) {
    .glic-container {
        padding: 0 15px;
    }
    
    .glic-section-title {
        font-size: 1.6rem;
        margin-bottom: 0.8rem;
    }
    
    .glic-section-subtitle {
        font-size: 0.95rem;
    }
    
    .glic-btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

/* ========================================
   UTILITY CLASSES FOR RESPONSIVE
   ======================================== */

/* Hide on specific breakpoints */
.glic-hide-xs { display: none !important; }
.glic-hide-sm { display: none !important; }
.glic-hide-md { display: none !important; }
.glic-hide-lg { display: none !important; }
.glic-hide-xl { display: none !important; }

@media (min-width: 576px) {
    .glic-hide-xs { display: block !important; }
}

@media (min-width: 768px) {
    .glic-hide-sm { display: block !important; }
}

@media (min-width: 992px) {
    .glic-hide-md { display: block !important; }
}

@media (min-width: 1200px) {
    .glic-hide-lg { display: block !important; }
}

@media (min-width: 1400px) {
    .glic-hide-xl { display: block !important; }
}

/* ========================================
   SISTEMA DE TIPOGRAFÍA GLOBAL RESPONSIVE
   ======================================== */

/* Desktop grande (1440px+) */
@media (min-width: 1440px) {
    :root {
        --glic-font-size-display-xl: 3.4375rem; /* 55px - Títulos principales */
        --glic-font-size-display-lg: 2.5rem; /* 40px - Títulos de sección */
        --glic-font-size-display-md: 1.875rem; /* 30px - Títulos medianos */
        --glic-font-size-display-sm: 1.5rem; /* 24px - Títulos pequeños */
        --glic-font-size-text-xl: 1.25rem; /* 20px - Texto grande */
        --glic-font-size-text-lg: 1.125rem; /* 18px - Texto mediano */
        --glic-font-size-text-base: 1rem; /* 16px - Texto base */
        --glic-font-size-text-sm: 0.875rem; /* 14px - Texto pequeño */
        --glic-font-size-text-xs: 0.75rem; /* 12px - Texto muy pequeño */
    }
}

/* ========================================
   SISTEMA DE ENCAPSULACIÓN ÚNICA POR SECCIÓN
   Nomenclatura: .glic-[seccion]-[elemento]
   ======================================== */

/* ========================================
   SOLUTION HERO - Encapsulación única
   ======================================== */
.glic-solution-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: -webkit-gradient(linear, left top, right bottom, from(#00D4AA), to(#0066CC)) !important;
    background: -webkit-linear-gradient(315deg, #00D4AA 0%, #0066CC 100%) !important;
    background: linear-gradient(135deg, #00D4AA 0%, #0066CC 100%) !important;
    background: var(--glic-gradient) !important;
    padding: 50px 0 !important;
    text-align: center !important;
    color: #ffffff !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.glic-solution-hero .glic-solution-title {
    font-family: var(--glic-font-family) !important;
    font-weight: 700 !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
    color: #ffffff !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}

/* Responsive para Solution Hero - Solo títulos */
@media (min-width: 1440px) {
    .glic-solution-hero .glic-solution-title {
        font-size: 3.4375rem !important; /* 55px */
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .glic-solution-hero .glic-solution-title {
        font-size: 3rem !important; /* 48px */
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .glic-solution-hero .glic-solution-title {
        font-size: 2.5rem !important; /* 40px */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .glic-solution-hero .glic-solution-title {
        font-size: 2rem !important; /* 32px */
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .glic-solution-hero .glic-solution-title {
        font-size: 2rem !important; /* 32px */
    }
}

@media (max-width: 479px) {
    .glic-solution-hero .glic-solution-title {
        font-size: 1.75rem !important; /* 28px */
    }
}

/* ========================================
   TEAM HERO - Encapsulación única
   ======================================== */
.glic-team-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: -webkit-gradient(linear, left top, right bottom, from(#00D4AA), to(#0066CC)) !important;
    background: -webkit-linear-gradient(315deg, #00D4AA 0%, #0066CC 100%) !important;
    background: linear-gradient(135deg, #00D4AA 0%, #0066CC 100%) !important;
    background: var(--glic-gradient) !important;
    padding: 50px 0 8rem !important;
    text-align: center !important;
    color: #ffffff !important;
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    -webkit-box-pack: center !important;
    -webkit-justify-content: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-box-align: center !important;
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.glic-team-hero .glic-team-title {
    font-family: var(--glic-font-family) !important;
    font-weight: 700 !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
    color: #ffffff !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}

.glic-team-hero .glic-team-description {
    font-family: var(--glic-font-family) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
    text-align: center !important;
    color: #ffffff !important;
}

.glic-team-hero .glic-team-name {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 0.5rem !important;
    -webkit-transition: color 0.3s ease !important;
    transition: color 0.3s ease !important;
    text-transform: none !important;
}

.glic-team-hero .glic-team-position {
    font-family: 'Inter', sans-serif !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    font-style: normal !important;
}

/* Responsive para Team Hero */
@media (min-width: 1440px) {
    .glic-team-hero .glic-team-title {
        font-size: 3.4375rem !important; /* 55px */
    }
    .glic-team-hero .glic-team-description {
        font-size: 1.25rem !important; /* 20px */
    }
    .glic-team-hero .glic-team-name {
        font-size: 1.125rem !important; /* 18px */
    }
    .glic-team-hero .glic-team-position {
        font-size: 0.875rem !important; /* 14px */
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .glic-team-hero .glic-team-title {
        font-size: 3rem !important; /* 48px */
    }
    .glic-team-hero .glic-team-description {
        font-size: 1.25rem !important; /* 20px */
    }
    .glic-team-hero .glic-team-name {
        font-size: 1.125rem !important; /* 18px */
    }
    .glic-team-hero .glic-team-position {
        font-size: 0.875rem !important; /* 14px */
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .glic-team-hero .glic-team-title {
        font-size: 2.5rem !important; /* 40px */
    }
    .glic-team-hero .glic-team-description {
        font-size: 1.15rem !important; /* 18.4px */
    }
    .glic-team-hero .glic-team-name {
        font-size: 1rem !important; /* 16px */
    }
    .glic-team-hero .glic-team-position {
        font-size: 0.875rem !important; /* 14px */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .glic-team-hero .glic-team-title {
        font-size: 2rem !important; /* 32px */
    }
    .glic-team-hero .glic-team-description {
        font-size: 1.1rem !important; /* 17.6px */
    }
    .glic-team-hero .glic-team-name {
        font-size: 1rem !important; /* 16px */
    }
    .glic-team-hero .glic-team-position {
        font-size: 0.875rem !important; /* 14px */
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .glic-team-hero .glic-team-title {
        font-size: 2rem !important; /* 32px */
    }
    .glic-team-hero .glic-team-description {
        font-size: 1.1rem !important; /* 17.6px */
    }
    .glic-team-hero .glic-team-name {
        font-size: 1rem !important; /* 16px */
    }
    .glic-team-hero .glic-team-position {
        font-size: 0.875rem !important; /* 14px */
    }
}

@media (max-width: 479px) {
    .glic-team-hero .glic-team-title {
        font-size: 1.75rem !important; /* 28px */
    }
    .glic-team-hero .glic-team-description {
        font-size: 1rem !important; /* 16px */
    }
    .glic-team-hero .glic-team-name {
        font-size: 0.875rem !important; /* 14px */
    }
    .glic-team-hero .glic-team-position {
        font-size: 0.75rem !important; /* 12px */
    }
}

/* ========================================
   CONTACT HERO - Encapsulación única
   ======================================== */
.glic-contact-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: -webkit-gradient(linear, left top, right bottom, from(#00D4AA), to(#0066CC));
    background: -webkit-linear-gradient(315deg, #00D4AA 0%, #0066CC 100%);
    background: linear-gradient(135deg, #00D4AA 0%, #0066CC 100%);
    background: var(--glic-gradient);
    padding: 4rem 0;
    text-align: center;
    color: #ffffff;
}

.glic-contact-hero .glic-contact-title {
    font-family: var(--glic-font-family) !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
    color: #ffffff !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}

.glic-contact-hero .glic-contact-subtitle {
    font-family: var(--glic-font-family) !important;
    font-weight: 400 !important;
    opacity: 0.9 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    text-align: center !important;
    color: #ffffff !important;
    line-height: 1.6 !important;
}

/* Responsive para Contact Hero */
@media (min-width: 1440px) {
    .glic-contact-hero .glic-contact-title {
        font-size: 3.4375rem !important; /* 55px */
    }
    .glic-contact-hero .glic-contact-subtitle {
        font-size: 1.25rem !important; /* 20px */
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .glic-contact-hero .glic-contact-title {
        font-size: 3rem !important; /* 48px */
    }
    .glic-contact-hero .glic-contact-subtitle {
        font-size: 1.25rem !important; /* 20px */
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .glic-contact-hero .glic-contact-title {
        font-size: 2.5rem !important; /* 40px */
    }
    .glic-contact-hero .glic-contact-subtitle {
        font-size: 1.15rem !important; /* 18.4px */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .glic-contact-hero .glic-contact-title {
        font-size: 2rem !important; /* 32px */
    }
    .glic-contact-hero .glic-contact-subtitle {
        font-size: 1.1rem !important; /* 17.6px */
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .glic-contact-hero .glic-contact-title {
        font-size: 2rem !important; /* 32px */
    }
    .glic-contact-hero .glic-contact-subtitle {
        font-size: 1.1rem !important; /* 17.6px */
    }
}

@media (max-width: 479px) {
    .glic-contact-hero .glic-contact-title {
        font-size: 1.75rem !important; /* 28px */
    }
    .glic-contact-hero .glic-contact-subtitle {
        font-size: 1rem !important; /* 16px */
    }
}


/* ========================================
   FAQS HERO - Encapsulación única
   ======================================== */
.glic-faqs-hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: -webkit-gradient(linear, left top, right bottom, from(#00D4AA), to(#0066CC));
    background: -webkit-linear-gradient(315deg, #00D4AA 0%, #0066CC 100%);
    background: linear-gradient(135deg, #00D4AA 0%, #0066CC 100%);
    background: var(--glic-gradient);
    padding: 50px 0 8rem;
    color: #ffffff;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.glic-faqs-hero .glic-faqs-title {
    font-family: var(--glic-font-family) !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
    color: #ffffff !important;
    text-transform: none !important;
    line-height: 1.2 !important;
}

.glic-faqs-hero .glic-faqs-subtitle {
    font-family: var(--glic-font-family) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    text-align: center !important;
    color: #ffffff !important;
    line-height: 1.6 !important;
}

.glic-faqs-hero .glic-faqs-section-title {
    font-family: var(--glic-font-family) !important;
    font-weight: 700 !important;
    color: #363D49 !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    text-transform: none !important;
}

.glic-faqs-hero .glic-faqs-trigger {
    font-family: var(--glic-font-family) !important;
    font-weight: 500 !important;
    color: #374151 !important;
    -webkit-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
}

.glic-faqs-hero .glic-faqs-content {
    color: #6b7280 !important;
    line-height: 1.6 !important;
}

/* Responsive para FAQs Hero */
@media (min-width: 1440px) {
    .glic-faqs-hero .glic-faqs-title {
        font-size: 2.5rem !important; /* 40px */
    }
    .glic-faqs-hero .glic-faqs-subtitle {
        font-size: 1.125rem !important; /* 18px */
    }
    .glic-faqs-hero .glic-faqs-section-title {
        font-size: 1.5rem !important; /* 24px */
    }
    .glic-faqs-hero .glic-faqs-trigger {
        font-size: 1rem !important; /* 16px */
    }
    .glic-faqs-hero .glic-faqs-content {
        font-size: 0.875rem !important; /* 14px */
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .glic-faqs-hero .glic-faqs-title {
        font-size: 2.5rem !important; /* 40px */
    }
    .glic-faqs-hero .glic-faqs-subtitle {
        font-size: 1.125rem !important; /* 18px */
    }
    .glic-faqs-hero .glic-faqs-section-title {
        font-size: 1.5rem !important; /* 24px */
    }
    .glic-faqs-hero .glic-faqs-trigger {
        font-size: 1rem !important; /* 16px */
    }
    .glic-faqs-hero .glic-faqs-content {
        font-size: 0.875rem !important; /* 14px */
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .glic-faqs-hero .glic-faqs-title {
        font-size: 2.2rem !important; /* 35.2px */
    }
    .glic-faqs-hero .glic-faqs-subtitle {
        font-size: 1rem !important; /* 16px */
    }
    .glic-faqs-hero .glic-faqs-section-title {
        font-size: 1.375rem !important; /* 22px */
    }
    .glic-faqs-hero .glic-faqs-trigger {
        font-size: 1rem !important; /* 16px */
    }
    .glic-faqs-hero .glic-faqs-content {
        font-size: 0.875rem !important; /* 14px */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .glic-faqs-hero .glic-faqs-title {
        font-size: 1.8rem !important; /* 28.8px */
    }
    .glic-faqs-hero .glic-faqs-subtitle {
        font-size: 0.9375rem !important; /* 15px */
    }
    .glic-faqs-hero .glic-faqs-section-title {
        font-size: 1.25rem !important; /* 20px */
    }
    .glic-faqs-hero .glic-faqs-trigger {
        font-size: 0.9375rem !important; /* 15px */
    }
    .glic-faqs-hero .glic-faqs-content {
        font-size: 0.875rem !important; /* 14px */
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .glic-faqs-hero .glic-faqs-title {
        font-size: 1.8rem !important; /* 28.8px */
    }
    .glic-faqs-hero .glic-faqs-subtitle {
        font-size: 0.9375rem !important; /* 15px */
    }
    .glic-faqs-hero .glic-faqs-section-title {
        font-size: 1.25rem !important; /* 20px */
    }
    .glic-faqs-hero .glic-faqs-trigger {
        font-size: 0.9375rem !important; /* 15px */
    }
    .glic-faqs-hero .glic-faqs-content {
        font-size: 0.875rem !important; /* 14px */
    }
}

@media (max-width: 479px) {
    .glic-faqs-hero .glic-faqs-title {
        font-size: 1.6rem !important; /* 25.6px */
    }
    .glic-faqs-hero .glic-faqs-subtitle {
        font-size: 0.9375rem !important; /* 15px */
    }
    .glic-faqs-hero .glic-faqs-section-title {
        font-size: 1.125rem !important; /* 18px */
    }
    .glic-faqs-hero .glic-faqs-trigger {
        font-size: 0.9375rem !important; /* 15px */
    }
    .glic-faqs-hero .glic-faqs-content {
        font-size: 0.75rem !important; /* 12px */
    }
}

/* Desktop (1280px - 1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {
    :root {
        --glic-font-size-display-xl: 3rem; /* 48px - Títulos principales */
        --glic-font-size-display-lg: 2.5rem; /* 40px - Títulos de sección */
        --glic-font-size-display-md: 1.875rem; /* 30px - Títulos medianos */
        --glic-font-size-display-sm: 1.5rem; /* 24px - Títulos pequeños */
        --glic-font-size-text-xl: 1.25rem; /* 20px - Texto grande */
        --glic-font-size-text-lg: 1.125rem; /* 18px - Texto mediano */
        --glic-font-size-text-base: 1rem; /* 16px - Texto base */
        --glic-font-size-text-sm: 0.875rem; /* 14px - Texto pequeño */
        --glic-font-size-text-xs: 0.75rem; /* 12px - Texto muy pequeño */
    }
}

/* Tablet grande (1024px - 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --glic-font-size-display-xl: 2.5rem; /* 40px - Títulos principales */
        --glic-font-size-display-lg: 2.2rem; /* 35.2px - Títulos de sección */
        --glic-font-size-display-md: 1.75rem; /* 28px - Títulos medianos */
        --glic-font-size-display-sm: 1.375rem; /* 22px - Títulos pequeños */
        --glic-font-size-text-xl: 1.15rem; /* 18.4px - Texto grande */
        --glic-font-size-text-lg: 1rem; /* 16px - Texto mediano */
        --glic-font-size-text-base: 1rem; /* 16px - Texto base */
        --glic-font-size-text-sm: 0.875rem; /* 14px - Texto pequeño */
        --glic-font-size-text-xs: 0.75rem; /* 12px - Texto muy pequeño */
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --glic-font-size-display-xl: 2rem; /* 32px - Títulos principales */
        --glic-font-size-display-lg: 1.8rem; /* 28.8px - Títulos de sección */
        --glic-font-size-display-md: 1.5rem; /* 24px - Títulos medianos */
        --glic-font-size-display-sm: 1.25rem; /* 20px - Títulos pequeños */
        --glic-font-size-text-xl: 1.1rem; /* 17.6px - Texto grande */
        --glic-font-size-text-lg: 0.9375rem; /* 15px - Texto mediano */
        --glic-font-size-text-base: 1rem; /* 16px - Texto base */
        --glic-font-size-text-sm: 0.875rem; /* 14px - Texto pequeño */
        --glic-font-size-text-xs: 0.75rem; /* 12px - Texto muy pequeño */
    }
}

/* Mobile (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
    :root {
        --glic-font-size-display-xl: 2rem; /* 32px - Títulos principales */
        --glic-font-size-display-lg: 1.8rem; /* 28.8px - Títulos de sección */
        --glic-font-size-display-md: 1.5rem; /* 24px - Títulos medianos */
        --glic-font-size-display-sm: 1.25rem; /* 20px - Títulos pequeños */
        --glic-font-size-text-xl: 1.1rem; /* 17.6px - Texto grande */
        --glic-font-size-text-lg: 0.9375rem; /* 15px - Texto mediano */
        --glic-font-size-text-base: 1rem; /* 16px - Texto base */
        --glic-font-size-text-sm: 0.875rem; /* 14px - Texto pequeño */
        --glic-font-size-text-xs: 0.75rem; /* 12px - Texto muy pequeño */
    }
}

/* Mobile pequeño (max-width: 479px) */
@media (max-width: 479px) {
    :root {
        --glic-font-size-display-xl: 1.75rem; /* 28px - Títulos principales */
        --glic-font-size-display-lg: 1.6rem; /* 25.6px - Títulos de sección */
        --glic-font-size-display-md: 1.375rem; /* 22px - Títulos medianos */
        --glic-font-size-display-sm: 1.125rem; /* 18px - Títulos pequeños */
        --glic-font-size-text-xl: 1rem; /* 16px - Texto grande */
        --glic-font-size-text-lg: 0.9375rem; /* 15px - Texto mediano */
        --glic-font-size-text-base: 1rem; /* 16px - Texto base */
        --glic-font-size-text-sm: 0.875rem; /* 14px - Texto pequeño */
        --glic-font-size-text-xs: 0.75rem; /* 12px - Texto muy pequeño */
    }
}

/* ========================================
   PAGE DESCRIPTIONS - GLOBAL
   Sistema global para formato de texto de descripciones
   ======================================== */

/* Descripción de página global - Solo formato de texto */
.glic-page-description {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.125rem !important; /* 18px */
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    text-align: center !important;
    margin-bottom: 1.5rem !important;
}

.glic-page-description:last-child {
    margin-bottom: 0 !important;
}

/* Variantes de color */
.glic-page-description-light {
    color: #ffffff !important;
}

.glic-page-description-dark {
    color: var(--glic-dark) !important;
}

/* ========================================
   CARD SYSTEM - GLOBAL
   Sistema global reutilizable para cards en todas las secciones
   ======================================== */

/* Grid de cards */
.glic-card-grid {
    display: grid;
    gap: 0.75rem;
    max-width: 1200px;
    margin: 0 auto;
}

.glic-card-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.glic-card-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.glic-card-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Card base */
.glic-card {
    background: var(--glic-light);
    padding: 1.5rem 0.75rem 1.5rem;
    border-radius: var(--glic-border-radius);
    border: 1px solid #e0e0e0;
    box-shadow: var(--glic-shadow);
    display: grid;
    grid-template-rows: auto auto 1fr;
    transition: var(--glic-transition);
    min-height: 320px;
    position: relative;
}

.glic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Card con borde gradiente */
.glic-card-gradient-wrapper {
    background: var(--glic-gradient);
    padding: 2px;
    border-radius: 12px;
    transition: var(--glic-transition);
    display: flex;
}

.glic-card-gradient-wrapper .glic-card {
    border-radius: 10px;
    border: none;
    flex: 1;
}

.glic-card-gradient-wrapper:hover {
    transform: translateY(-5px);
}

.glic-card-gradient-wrapper:hover .glic-card {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Card con línea superior gradiente */
.glic-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--glic-gradient);
    transform: scaleX(0);
    transition: var(--glic-transition);
}

.glic-card:hover::before {
    transform: scaleX(1);
}

.glic-card-gradient-wrapper .glic-card::before {
    display: none;
}

/* Icono de card */
.glic-card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glic-card-icon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--glic-gradient);
    border-radius: 50%;
    transition: var(--glic-transition);
}

.glic-card:hover .glic-card-icon::before {
    transform: scale(1.05);
}

.glic-card-icon img {
    width: 36px;
    height: 36px;
    position: relative;
    z-index: 1;
    transition: var(--glic-transition);
}

.glic-card:hover .glic-card-icon img {
    transform: scale(1.1);
}

/* Título de card */
.glic-card-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #333;
    text-align: center;
    line-height: 1.3;
    margin-bottom: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Descripción de card */
.glic-card-description {
    font-family: 'Inter', sans-serif;
    font-style: normal;
    line-height: 1.45;
    overflow-wrap: break-word;
    padding: 0 0.5rem;
}

/* Responsive para cards */
@media (min-width: 1280px) {
    .glic-card-title {
        font-size: 0.95rem;
    }

    .glic-card-description {
        font-size: 0.95rem;
        text-align: justify;
        text-align-last: left;
        hyphens: auto;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .glic-card-title {
        font-size: 0.85rem;
    }

    .glic-card-description {
        font-size: 0.9rem;
    }

    .glic-card-grid-3,
    .glic-card-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .glic-card-title {
        font-size: var(--glic-font-size-text-sm);
    }

    .glic-card-description {
        font-size: var(--glic-font-size-text-xs);
    }

    .glic-card-grid-3,
    .glic-card-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .glic-card-grid,
    .glic-card-grid-2,
    .glic-card-grid-3,
    .glic-card-grid-4 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .glic-card {
        padding: 1rem 1.25rem 1rem;
        min-height: auto;
    }

    .glic-card:hover,
    .glic-card-gradient-wrapper:hover {
        transform: none;
    }

    .glic-card::before {
        display: none;
    }

    .glic-card-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 1rem;
    }

    .glic-card-icon img {
        width: 32px;
        height: 32px;
    }

    .glic-card:hover .glic-card-icon::before,
    .glic-card:hover .glic-card-icon img {
        transform: none;
    }

    .glic-card-title {
        font-size: var(--glic-font-size-text-base);
        white-space: normal;
        margin-bottom: 1rem;
    }

    .glic-card-description {
        font-size: 0.9375rem;
    }
}

@media (max-width: 480px) {
    .glic-card-grid,
    .glic-card-grid-2,
    .glic-card-grid-3,
    .glic-card-grid-4 {
        gap: 1.25rem;
    }

    .glic-card {
        padding: 1rem;
    }

    .glic-card-title {
        font-size: var(--glic-font-size-text-lg);
        margin-bottom: 0.75rem;
    }

    .glic-card-description {
        font-size: var(--glic-font-size-text-sm);
    }
}

/* ========================================
   GRADIENT SYSTEM - GLOBAL
   Sistema global de gradientes sin sobrescribir secciones específicas
   ======================================== */

/* Solo elementos base que SIEMPRE deben usar el gradiente principal */
.glic-btn-primary,
.glic-btn-integration {
    background: -webkit-gradient(linear, left top, right bottom, from(#00D4AA), to(#0066CC)) !important;
    background: -webkit-linear-gradient(315deg, #00D4AA 0%, #0066CC 100%) !important;
    background: linear-gradient(135deg, #00D4AA 0%, #0066CC 100%) !important;
    background: var(--glic-gradient) !important;
}

/* Casos especiales que necesitan gradiente horizontal */
.glic-nav-link::after {
    background: -webkit-gradient(linear, left top, right top, from(#00D4AA), to(#0066CC)) !important;
    background: -webkit-linear-gradient(left, #00D4AA 0%, #0066CC 100%) !important;
    background: linear-gradient(90deg, #00D4AA 0%, #0066CC 100%) !important;
    background: var(--glic-gradient-horizontal) !important;
}


/* ========================================
   GLOBAL BREAKPOINTS (XS, SM, MD, LG, XL, 2XL)
   Rango por ancho CSS basado en dispositivos comunes
   ======================================== */
/* XS: 240–359px (feature phones, fold portrait) */
@media (max-width: 359px) {
    /* Añadir estilos XS aquí (solo de ser necesarios a nivel global) */
}

/* SM: 360–479px (iPhones SE–S8) */
@media (min-width: 360px) and (max-width: 479px) {
    /* Añadir estilos SM aquí */
}

/* MD: 480–639px (phablets, tablets pequeñas) */
@media (min-width: 480px) and (max-width: 639px) {
    /* Añadir estilos MD aquí */
}

/* LG: 640–1023px (tablets) */
@media (min-width: 640px) and (max-width: 1023px) {
    /* Añadir estilos LG aquí */
}

/* XL: 1024–1439px (laptops medianos) */
@media (min-width: 1024px) and (max-width: 1439px) {
    /* Añadir estilos XL aquí */
}

/* 2XL: ≥1440px (monitores grandes) */
@media (min-width: 1440px) {
    /* Añadir estilos 2XL aquí */
}


/* Show only on specific breakpoints */
.glic-show-xs-only { display: block !important; }
.glic-show-sm-only { display: none !important; }
.glic-show-md-only { display: none !important; }
.glic-show-lg-only { display: none !important; }
.glic-show-xl-only { display: none !important; }

@media (min-width: 576px) {
    .glic-show-xs-only { display: none !important; }
    .glic-show-sm-only { display: block !important; }
}

@media (min-width: 768px) {
    .glic-show-sm-only { display: none !important; }
    .glic-show-md-only { display: block !important; }
}

@media (min-width: 992px) {
    .glic-show-md-only { display: none !important; }
    .glic-show-lg-only { display: block !important; }
}

@media (min-width: 1200px) {
    .glic-show-lg-only { display: none !important; }
    .glic-show-xl-only { display: block !important; }
}


/* ========================================
   WEBKIT/SAFARI COMPATIBILITY FIXES
   Prefijos adicionales para Safari/iOS
   ======================================== */

/* Smooth scrolling para Safari */
html {
    -webkit-overflow-scrolling: touch;
}

/* Fix para inputs en iOS */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
}

/* Fix para botones en Safari */
button,
.glic-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Fix para tap highlight en iOS */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

/* Fix para font smoothing en Safari/Mac */
body,
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fix para backdrop-filter en Safari */
.glic-modal-backdrop,
.glic-overlay {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Fix para sticky positioning en Safari */
.glic-header,
.glic-sticky {
    position: -webkit-sticky;
    position: sticky;
}

/* Fix para clamp() en Safari antiguo */
@supports not (font-size: clamp(1rem, 2vw, 3rem)) {
    .glic-hero-title {
        font-size: 2.5rem;
    }
    
    @media (max-width: 768px) {
        .glic-hero-title {
            font-size: 1.8rem;
        }
    }
}

/* Fix para gap en flexbox para Safari antiguo */
@supports not (gap: 1rem) {
    .glic-btn {
        margin-right: 0.5rem;
    }
    
    .glic-btn:last-child {
        margin-right: 0;
    }
}

/* Fix para object-fit en Safari */
img {
    -o-object-fit: cover;
    object-fit: cover;
}

/* Fix para user-select en Safari */
.glic-no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Fix para transform-origin en Safari */
.glic-animated {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
}

/* Fix para will-change en Safari para mejor performance */
.glic-btn-primary:hover,
.glic-animated {
    will-change: transform;
}



/* Fix para gradientes en Safari antiguo */
@supports not (background: linear-gradient(135deg, #00D4AA 0%, #0066CC 100%)) {
    .glic-btn-primary,
    .glic-team-hero,
    .glic-solution-hero,
    .glic-contact-hero,
    .glic-faqs-hero {
        background: #00D4AA;
    }
}


/* ========================================
   IMAGE OPTIMIZATION FOR SAFARI/MAC
   Optimizaciones específicas para carga de imágenes
   ======================================== */

/* Forzar aceleración por hardware en imágenes */
img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
}

/* Optimizar renderizado de imágenes en Safari */
.glic-category-image img,
.glic-country-flag img,
.glic-team-photo,
.glic-marketplace-logo img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Preload hint para navegadores que lo soporten */
img[loading="lazy"] {
    content-visibility: auto;
}

/* Fix para imágenes que no cargan en Safari */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Placeholder mientras carga la imagen */
.glic-category-image,
.glic-country-flag,
.glic-team-card-image {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    -webkit-animation: loading 1.5s ease-in-out infinite;
    animation: loading 1.5s ease-in-out infinite;
}

@-webkit-keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Detener animación cuando la imagen carga */
.glic-category-image img[loading="lazy"],
.glic-country-flag img[loading="lazy"],
.glic-team-card-image img[loading="lazy"] {
    -webkit-animation: none;
    animation: none;
}

/* ===================================================================
   ELIMINAR LOADERS RESIDUALES DE MAGENTO 1
   Forzar eliminación de cualquier background o pseudo-elemento loader
   =================================================================== */

/* Eliminar backgrounds de loader en imágenes */
img,
.img,
.glic-team-photo,
.glic-team-card-image,
.glic-category-image,
.glic-country-flag,
.glic-marketplace-logo,
.glic-logo-img,
.glic-hero-logo,
.glic-footer-logo-img {
    background: none !important;
}

/* Eliminar pseudo-elementos que puedan contener loaders */
img::before,
img::after,
.img::before,
.img::after,
.glic-team-photo::before,
.glic-team-photo::after,
.glic-team-card-image::before,
.glic-team-card-image::after,
.glic-category-image::before,
.glic-category-image::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Asegurar que las imágenes cargadas no tengan overlay */
.loaded img,
img.loaded {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Sobrescribir loaders del theme RWD de Magento 1 */
.product-image::before,
.product-image::after,
.product-image-gallery::before,
.product-image-gallery::after,
.products-grid .product-image::before,
.products-grid .product-image::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}

/* Eliminar clase loading que activa los loaders */
.product-image.loading::before,
.product-image.loading::after,
.product-image-gallery.loading::before,
.product-image-gallery.loading::after {
    display: none !important;
}

/* Forzar que nuestras imágenes custom nunca tengan la clase loading */
.glic-team-card-image.loading,
.glic-category-image.loading {
    position: relative;
}

.glic-team-card-image.loading::before,
.glic-team-card-image.loading::after,
.glic-category-image.loading::before,
.glic-category-image.loading::after {
    display: none !important;
}