/* Estilos para los contadores animados */
.counter-value {
    transition: all 0.5s ease;
    font-weight: 700;
    display: inline-block;
}

/* Contenedor para el número y el símbolo */
.counter-display {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

/* Estilos para el símbolo del contador */
.counter-symbol {
    font-size: 5rem !important;
    font-weight: 700 !important;
    color: #3fa7d6 !important;
    margin-left: 10px !important;
    display: inline-block !important;
}

/* Estilos específicos para contadores en la sección problematica-datos */
#problematica-datos .counter-value {
    font-size: 6rem !important;
    color: #3fa7d6 !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* Estilos para contadores en la sección estadisticas */
#estadisticas .counter-value {
    font-size: 5rem !important;
    color: #3fa7d6 !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* Estilos para el nombre del contador */
.counter-name {
    font-size: 1.5rem;
    font-weight: 600;
}

/* REGLAS ULTRA-ESPECÍFICAS PARA FORZAR TAMAÑOS GRANDES */
html body #problematica-datos .counter-value,
html body section#problematica-datos .counter-value,
.section#problematica-datos .counter-value,
#problematica-datos .container .counter-value,
.bg-dark .counter-value[data-count] {
    font-size: 6rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

html body #estadisticas .counter-value,
html body section#estadisticas .counter-value,
.section#estadisticas .counter-value,
#estadisticas .container .counter-value,
.bg-azul .counter-value[data-count] {
    font-size: 5rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #3fa7d6 !important;
}

html body .counter-symbol,
.counter-display .counter-symbol,
span.counter-symbol {
    font-size: 5rem !important;
    font-weight: 900 !important;
    color: #3fa7d6 !important;
    margin-left: 10px !important;
}

/* Animación sutil para destacar el contador cuando termina */
@keyframes counterHighlight {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.counter-completed {
    animation: counterHighlight 0.8s ease-in-out;
    text-shadow: 0 0 10px rgba(63, 167, 214, 0.5);
}

/* Estilos para iconos en la sección de líneas de trabajo */
.gremia-feature-icon {
    font-size: 4.5rem !important; /* Aumentar tamaño */
    color: #3fa7d6 !important; /* Color azul principal */
    transition: all 0.3s ease;
    background: rgba(63, 167, 214, 0.1); /* Fondo semi-transparente */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(63, 167, 214, 0.2);
}

/* Efecto hover para los iconos */
.gremia-feature-icon:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(63, 167, 214, 0.3);
}

/* Ajuste del contenedor del icono */
.service-box .mb-5 {
    text-align: center;
}

.counter-completed {
    animation: counterHighlight 0.5s ease-in-out;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    /* Contadores en index.html - Sección Problemática en Datos */
    #problematica-datos .counter-value,
    html body #problematica-datos .counter-value {
        font-size: 6rem !important;
        line-height: 1 !important;
    }
    
    /* Contadores en problematica.html - Sección Estadísticas */
    #estadisticas .counter-value,
    html body #estadisticas .counter-value {
        font-size: 5.5rem !important;
        line-height: 1 !important;
    }
    
    /* Símbolos de porcentaje */
    .counter-symbol,
    html body .counter-symbol {
        font-size: 5rem !important;
        margin-left: 8px !important;
    }
}

@media (max-width: 576px) {
    /* Contadores aún más pequeños en móviles muy pequeños */
    #problematica-datos .counter-value,
    html body #problematica-datos .counter-value {
        font-size: 4.5rem !important;
        line-height: 0.9 !important;
    }
    
    #estadisticas .counter-value,
    html body #estadisticas .counter-value {
        font-size: 4rem !important;
        line-height: 0.9 !important;
    }
    
    .counter-symbol,
    html body .counter-symbol {
        font-size: 3.5rem !important;
        margin-left: 6px !important;
    }
    
    /* Ajustar espaciado en display del contador */
    .counter-display {
        margin-bottom: 0.5rem !important;
        gap: 5px !important;
    }
}