/* ╔═══════════════════════════════════════════════════════════════════════════════════════════╗
   ║  🎯 ESTILOS PARA SECCIÓN DE SERVICIOS                                                     ║
   ║                                                                                            ║
   ║  Consolida los estilos inline de los 9 carruseles de servicios                           ║
   ║  en clases CSS reutilizables para mejor mantenimiento                                     ║
   ║                                                                                            ║
   ║  📦 CLASES PRINCIPALES:                                                                    ║
   ║  • .servicio-carousel: Contenedor del carousel                                            ║
   ║  • .servicio-text: Contenedor de texto del servicio                                       ║
   ║  • .servicio-title: Título del servicio                                                   ║
   ║  • .servicio-description: Descripción del servicio                                        ║
   ║  • .servicio-item: Items de lista del servicio                                            ║
   ║  • .servicio-item-icon: Ícono circular de item                                            ║
   ║                                                                                            ║
   ╚═══════════════════════════════════════════════════════════════════════════════════════════╝ */

/* ============================================
   CONTENEDOR DEL CAROUSEL
   ============================================ */

.servicio-carousel {
    position: relative;
    z-index: 2;
}

/* ============================================
   CONTENEDOR DE TEXTO (lado derecho)
   ============================================ */

.servicio-text {
    margin-top: -20px;
}

/* Variantes de margen para servicios específicos */
.servicio-text.text-servicio-1,
.servicio-text.text-servicio-2,
.servicio-text.text-servicio-3,
.servicio-text.text-servicio-4,
.servicio-text.text-servicio-5,
.servicio-text.text-servicio-6,
.servicio-text.text-servicio-7,
.servicio-text.text-servicio-8,
.servicio-text.text-servicio-9 {
    margin-top: -20px;
}

/* ============================================
   TÍTULO DEL SERVICIO
   ============================================ */

.servicio-title {
    font-size: 1.2rem;
}

.servicio-title span[data-translate] {
    font-size: 1.2rem;
}

/* ============================================
   DESCRIPCIÓN DEL SERVICIO
   ============================================ */

.servicio-description {
    font-size: 0.95rem;
    text-align: justify;
}

/* ============================================
   ITEMS DE LISTA DEL SERVICIO
   ============================================ */

/* Contenedor de item */
.servicio-item {
    margin-bottom: 10px;
}

/* Ícono circular del item */
.servicio-item-icon {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Texto del item */
.servicio-item-text {
    color: rgb(48, 48, 48);
    font-size: 0.9rem;
    flex: 1;
}

/* Contenedor flex para alinear ícono y texto */
.servicio-item-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

/* ============================================
   CONTADOR ANIMADO (Servicio 1)
   ============================================ */

.service-counter {
    /* Estilos del contador ya están en gep-services-counter.js/css */
}

.service-counter .counter-container {
    text-align: center;
}

/* ============================================
   RESPONSIVE - MÓVIL
   ============================================ */

@media (max-width: 768px) {
    .servicio-text {
        margin-top: 10px;
    }

    .servicio-title {
        font-size: 1rem;
    }

    .servicio-title span[data-translate] {
        font-size: 1rem;
    }

    .servicio-description {
        font-size: 0.9rem;
    }

    .servicio-item-text {
        font-size: 0.85rem;
    }

    .servicio-item-icon {
        width: 20px;
        height: 20px;
        font-size: 0.55rem;
    }
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    .servicio-text {
        margin-top: -10px;
    }

    .servicio-title {
        font-size: 1.1rem;
    }

    .servicio-title span[data-translate] {
        font-size: 1.1rem;
    }
}

/* ============================================
   MEJORAS vs VERSIÓN INLINE
   ============================================

   ✓ Eliminados ~200+ estilos inline repetidos
   ✓ Clases reutilizables para los 9 servicios
   ✓ Mantenimiento centralizado
   ✓ Responsive design consolidado
   ✓ Mejor rendimiento (menos HTML)

   ============================================ */