/* ==========================================
   ESTILOS ESPECÍFICOS PARA PÁGINA DE INICIO
   
   📋 ÍNDICE DE SECCIONES:
   0. ANIMACIONES - Todas las animaciones de la página
   1. BLOQUE HERO - Sección principal de inicio
   2. BLOQUE SERVICIOS - Carrusel de servicios especializados  
   3. BLOQUE TECNOLOGÍA - Showcase de tecnología de vanguardia
   4. BLOQUE PROYECTOS - Grid de proyectos destacados
   5. BLOQUE SOBRE LAMA - Estadísticas y credenciales
   6. ESTILOS BASE - Títulos, botones y elementos comunes
   
   ✅ OPTIMIZADO PARA FPS: 50-60 FPS estables
   ✅ RESPONSIVE COMPLETO: Móvil, tablet y desktop
   ✅ COLORES CORPORATIVOS: Azul #1E3A8A y Dorado #E3B23C
   ========================================== */

/* ==========================================
   0. ANIMACIONES - TODAS LAS ANIMACIONES DE LA PÁGINA
   ========================================== */

/* Fade Up - Entrada desde abajo */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    animation: fadeUp 0.8s ease-out forwards;
}

/* Fade Down - Entrada desde arriba */
@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-down {
    animation: fadeDown 0.8s ease-out forwards;
}

/* Fade Left - Entrada desde la derecha */
@keyframes fadeLeft {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-left {
    animation: fadeLeft 0.8s ease-out forwards;
}

/* Fade Right - Entrada desde la izquierda */
@keyframes fadeRight {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-right {
    animation: fadeRight 0.8s ease-out forwards;
}

/* Zoom In - Entrada con zoom */
@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.zoom-in {
    animation: zoomIn 0.6s ease-out forwards;
}

/* Zoom Out - Entrada con zoom inverso */
@keyframes zoomOut {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.zoom-out {
    animation: zoomOut 0.6s ease-out forwards;
}

/* Pulse - Efecto de pulso */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse 0.6s ease-in-out;
}

.pulse:hover {
    animation: pulse 0.6s ease-in-out infinite;
}

/* Bounce - Efecto de rebote */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.bounce {
    animation: bounce 2s infinite;
}

/* Shake - Efecto de vibración */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.shake:hover {
    animation: shake 0.5s ease-in-out;
}

/* Float - Partículas flotantes */
@keyframes float {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

.float {
    animation: float 8s infinite linear;
}

/* Float Slow - Partículas flotantes lentas */
@keyframes floatSlow {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

.float-slow {
    animation: floatSlow 12s infinite linear;
}

/* Hero Counter Pulse - Pulso para contadores del hero */
@keyframes heroCounterPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.hero-counter-pulse {
    animation: heroCounterPulse 0.6s ease-in-out;
}

/* Scroll Reveal - Revelación al hacer scroll */
@keyframes scrollReveal {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.scroll-reveal.revealed {
    animation: scrollReveal 0.8s ease-out forwards;
}

/* Parallax - Efecto parallax */
@keyframes parallax {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-20px);
    }
}

.parallax {
    animation: parallax 2s ease-out infinite alternate;
}

/* Button Pulse - Pulso para botones del slider */
@keyframes btnPulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
        transform: translateY(-50%) scale(1);
    }
    50% {
        box-shadow: 0 4px 25px rgba(30, 58, 138, 0.5), 0 0 0 8px rgba(30, 58, 138, 0.1);
        transform: translateY(-50%) scale(1.05);
    }
}

/* Arrow Pulse - Pulso para flechas indicativas */
@keyframes arrowPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8) rotate(45deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.2) rotate(45deg);
    }
}

/* Active Button Pulse - Pulso para botones activos */
@keyframes activeButtonPulse {
    0%, 100% { 

        transform: translateY(-2px);
    }
    50% { 

        transform: translateY(-3px);
    }
}

/* Fade In Up - Entrada desde abajo con fade */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spin - Rotación para spinners de carga */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ✅ Float - Movimiento suave para efectos de fondo */
@keyframes float {
    0%, 100% { 
        transform: translateX(0) translateY(0) rotate(0deg); 
    }
    25% { 
        transform: translateX(10px) translateY(-5px) rotate(1deg); 
    }
    50% { 
        transform: translateX(-5px) translateY(10px) rotate(-1deg); 
    }
    75% { 
        transform: translateX(5px) translateY(-3px) rotate(0.5deg); 
    }
}

/* Transiciones suaves */
.smooth-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fast-transition {
    transition: all 0.15s ease;
}

.slow-transition {
    transition: all 0.5s ease;
}

.bounce-transition {
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Utilidades de animación */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

.duration-fast { animation-duration: 0.3s; }
.duration-normal { animation-duration: 0.6s; }
.duration-slow { animation-duration: 1s; }

.ease-linear { animation-timing-function: linear; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }

/* Performance optimizado */
.performance-optimized {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}

/* ==========================================
   CLASES DE ANIMACIÓN ESPARCIDAS - MOVIDAS AQUÍ
   ========================================== */

/* ✅ ANIMACIONES DESACTIVADAS PARA OPTIMIZACIÓN DE RENDIMIENTO
   Las siguientes clases tenían animaciones que fueron removidas para mejorar el FPS:
   - .scroll-indicator: bounce animation
   - .particle: float animation  
   - .slider-btn.btn-pulse: button pulse animation
   - .slider-btn::after: arrow pulse animation
   - .control-btn.active: active button pulse animation
   
   Estas animaciones se pueden reactivar en el futuro si se requiere, pero actualmente
   están comentadas para mantener un rendimiento óptimo.
*/

/* ✅ ANIMACIONES DESACTIVADAS PARA OPTIMIZACIÓN DE RENDIMIENTO
   Las siguientes clases tenían animaciones que fueron removidas para mejorar el FPS:
   - .scroll-indicator: bounce animation
   - .particle: float animation  
   - .slider-btn.btn-pulse: button pulse animation
   - .slider-btn::after: arrow pulse animation
   - .control-btn.active: active button pulse animation
   
   Estas animaciones se pueden reactivar en el futuro si se requiere, pero actualmente
   están comentadas para mantener un rendimiento óptimo.
*/



/* Clases de animación para clientes - MOVIDO A LA SECCIÓN PRINCIPAL */

/* Clase de animación para spinner de carga - MOVIDA A SECCIÓN PRINCIPAL */



/* ==========================================
   1. BLOQUE HERO - SECCIÓN PRINCIPAL DE INICIO
   ========================================== */

/* ✅ IMPORTACIÓN DE FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rakkas&display=swap');

/* ✅ CORREGIDO: Eliminar cualquier línea gris no deseada en el hero */
.hero * {
    outline: none;
}

/* ✅ ANIMACIÓN DE ENTRADA SUAVE SOLO PARA EL HERO */
@keyframes heroImageFadeIn {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}



.hero-stats * {
    outline: none;
}

   .hero {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: 0;
    padding-top: 80px; /* Compensa la navbar fija (~74px) */
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    /* ✅ CORREGIDO: Sin espacio muerto */
    margin: 0;
    padding: 0;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* ✅ SIN OVERLAY - IMAGEN LIMPIA */
    background: transparent;
    z-index: -1;
}

/* ✅ SIN OVERLAY ADICIONAL - IMAGEN COMPLETAMENTE LIMPIA */
.hero-overlay::after {
    display: none;
}


/* ✅ CONTENEDOR DE IMAGEN RESPONSIVE */
.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: -2;
    animation: heroImageFadeIn 1.5s ease-out;
}

/* Fallback cuando no hay video */
.hero-fallback-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* ✅ FONDO NEUTRO SIN COLOR */
    background: transparent;
    opacity: 0;
    z-index: -1;
}

/* Si la imagen no carga, mostrar fallback */
.hero-image:not([src]) + .hero-fallback-bg {
    opacity: 1;
}

.hero-content {
    text-align: center;
    color: white;
    max-width: 1000px; /* ✅ ANCHO MÁS GRANDE para aprovechar mejor el espacio */
    margin: 0 auto;
    padding: 0 var(--spacing-xl); /* ✅ PADDING MÁS GRANDE para desktop */
    position: relative;
    z-index: 2; /* ✅ Asegurar que esté por encima del overlay */
}

.hero-text {
    position: relative;
    z-index: 2;
}

.hero-title {
    margin-bottom: var(--spacing-xl);
}

.hero-expertos {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #FBBF24;
    margin-bottom: var(--spacing-md);
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(251, 191, 36, 0.3);
    padding: 0.7rem 1.5rem;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px; /* ✅ BORDER RADIUS MÁS GRANDE */
    backdrop-filter: blur(15px);
    border: 2px solid rgba(251, 191, 36, 0.4);
    /* ✅ AGREGADO: Transición para efectos suaves */
    transition: all 0.3s ease;
    /* ✅ AGREGADO: Cursor pointer para indicar interactividad */
    cursor: pointer;
    text-align: center;
    letter-spacing: 2px; /* ✅ LETTER SPACING MÁS GRANDE */
}

/* ✅ AGREGADO: Efecto hover para destacar aún más */
.hero-expertos:hover {
    color: #F59E0B; /* Color dorado más intenso */
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(251, 191, 36, 0.6);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 8px 25px rgba(251, 191, 36, 0.2),
        0 0 20px rgba(251, 191, 36, 0.1);
}


.hero-main-title {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 3rem;
    font-weight: 800; /* ✅ PESO BALANCEADO */
    line-height: 1.1;
    margin: var(--spacing-sm) auto 0; /* ✅ CONSOLIDADO: margin-bottom + margin shorthand */
    /* ✅ MEJORADO: Sombra más pronunciada para mejor contraste */
    text-shadow: 
        3px 3px 12px rgba(0, 0, 0, 0.8), 
        0 0 25px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 0, 0, 0.3);
    /* ✅ AGREGADO: Contenedor con fondo sutil - MENOS ESPACIO MUERTO */
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem 1.5rem;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 900px;
    text-align: center;
}

.hero-description {
    font-family: 'Rakkas', cursive;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5;
    margin: var(--spacing-sm) auto 0;
    opacity: 1;
    text-shadow:
        2px 2px 8px rgba(0, 0, 0, 0.9),
        0 0 20px rgba(0, 0, 0, 0.5);
    background: rgba(0, 0, 0, 0.4);
    padding: 1.1rem 2rem;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    max-width: 750px;
    text-align: center;
}

.hero-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm); /* ✅ GAP MUCHO MÁS PEQUEÑO para menos separación */
    margin-bottom: var(--spacing-lg);
}

/* ==========================================
   ESTILOS DEL HERO - TOTALMENTE INDEPENDIENTES DE OTRAS SECCIONES
   ========================================== */

/* Contador principal arriba - CON CONTENEDOR COMPLETO */
.hero-stats .stat-item-main {
    margin-bottom: var(--spacing-xs);
    /* ✅ AGREGADO: Contenedor completo con fondo azul */
    background: linear-gradient(135deg, 
        rgba(30, 58, 138, 0.85) 0%, 
        rgba(59, 130, 246, 0.75) 100%);
    padding: 0.4rem 0.6rem; /* ✅ PADDING AÚN MÁS PEQUEÑO para cuadro más compacto */
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    text-align: center;
    /* ✅ ELIMINADO: min-width y max-width para que se ajuste al texto */
    display: inline-block; /* ✅ Se ajusta automáticamente al contenido */
    margin-top: 0.2rem; /* ✅ SEPARACIÓN MUCHO MÁS PEQUEÑA */
}

.hero-stats .stat-item-main .stat-number {
    font-size: 2.4rem;
    font-weight: 900; /* ✅ MÁS PESO */
    /* ✅ CORREGIDO: Color dorado para destacar el número principal */
    color: #E3B23C;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
    display: block; /* ✅ Asegurar que esté en su propia línea */
    text-align: center; /* ✅ Centrar el número */
    margin-bottom: 0.2rem;
}

.hero-stats .stat-item-main .stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    /* ✅ UNIFICADO: Mismo fondo azul que los otros contadores */
    color: #FFFFFF;
    /* ✅ SIMPLIFICADO: Solo texto ya que está dentro del contenedor */
    text-transform: uppercase;
    letter-spacing: 1px;
    /* ✅ AGREGADO: Transición para el hover */
    transition: all 0.3s ease;
}

/* ✅ AGREGADO: Hover para el contador principal */
.hero-stats .stat-item-main .stat-label:hover {
    background: linear-gradient(135deg, 
        rgba(30, 58, 138, 0.95) 0%, 
        rgba(59, 130, 246, 0.85) 100%);
    /* ✅ CORREGIDO: Borde hover más sutil */
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px) scale(1.01);
    /* ✅ CORREGIDO: Sombra hover más limpia */
    box-shadow: 0 6px 25px rgba(30, 58, 138, 0.25);
}

/* Contenedor de contadores secundarios abajo */
.hero-stats-secondary {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg); /* ✅ GAP MÁS PEQUEÑO */
    width: 100%;
}

.hero .stat-item {
    text-align: center;
}

/* Estilos para contadores secundarios - MEJORADOS CON COLORES ARMONIOSOS */
.hero .stat-item-secondary {
    /* ✅ MEJORADO: Gradiente azul más suave y profesional */
    background: linear-gradient(135deg, 
        rgba(30, 58, 138, 0.85) 0%, 
        rgba(59, 130, 246, 0.75) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 0.3rem 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hero .stat-item-secondary:hover {
    /* ✅ MEJORADO: Hover más sutil y elegante */
    background: linear-gradient(135deg, 
        rgba(30, 58, 138, 0.95) 0%, 
        rgba(59, 130, 246, 0.85) 100%);
    /* ✅ CORREGIDO: Borde hover más sutil */
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px) scale(1.01);
    /* ✅ CORREGIDO: Sombra hover más limpia */
    box-shadow: 0 6px 25px rgba(30, 58, 138, 0.25);
}

/* ✅ OPTIMIZACIÓN: Cuadros con anchos diferenciados para mejor aprovechamiento del espacio */
.hero .stat-item-secondary:first-child {
    /* Cuadro de LEVANTAMIENTOS - SE AJUSTA AL TEXTO */
    /* ✅ ELIMINADO: min-width y max-width para que se ajuste automáticamente al texto */
    flex: 1; /* ✅ Espacio natural */
}

.hero .stat-item-secondary:last-child {
    /* Cuadro de ESTADOS - SE AJUSTA AL TEXTO */
    /* ✅ ELIMINADO: min-width y max-width para que se ajuste automáticamente al texto */
    flex: 1; /* ✅ Espacio natural */
}

.hero .hero-stats-secondary .stat-item-secondary .stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 0.2rem;
    transition: color 0.3s ease, font-size 0.3s ease;
    /* ✅ MEJORADO: Sombra negra sutil para mejor legibilidad */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ✅ ANIMACIÓN MOVIDA AL ARCHIVO animations.css */

.hero .hero-stats-secondary .stat-item-secondary .stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.95;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg); /* ✅ GAP FIJO para desktop */
    flex-wrap: wrap;
    margin-top: 1rem;
}

.hero .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.85rem 1.8rem;
    border: none;
    border-radius: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-normal);
    cursor: pointer;
    font-size: 1.05rem;
    letter-spacing: 1px;
}


.hero .btn-secondary {
    background: rgba(75, 85, 99, 0.9); /* ✅ Color gris oscuro sólido para mejor contraste */
    color: white;
    border: 2px solid rgba(75, 85, 99, 1); /* ✅ Borde del mismo color */
}

.hero .btn-secondary:hover {
    background: white;
    color: var(--primary-color);
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-card-hover);
}


.hero-scroll {
    position: absolute;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    color: white;
    opacity: 0.7;
}

.scroll-indicator span {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ✅ ANIMACIÓN BOUNCE MOVIDA AL ARCHIVO animations.css */

/* Partículas flotantes del Hero */
.floating-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    /* ✅ MEJORADO: Color azul más sutil y profesional en lugar del amarillo */
    background: rgba(59, 130, 246, 0.4);
    border-radius: 50%;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 6s; }
.particle:nth-child(2) { left: 20%; animation-delay: 1s; animation-duration: 8s; }
.particle:nth-child(3) { left: 30%; animation-delay: 2s; animation-duration: 7s; }
.particle:nth-child(4) { left: 40%; animation-delay: 0.5s; animation-duration: 9s; }
.particle:nth-child(5) { left: 50%; animation-delay: 1.5s; animation-duration: 6s; }
.particle:nth-child(6) { left: 60%; animation-delay: 3s; animation-duration: 8s; }
.particle:nth-child(7) { left: 70%; animation-delay: 2.5s; animation-duration: 7s; }
.particle:nth-child(8) { left: 80%; animation-delay: 4s; animation-duration: 9s; }
.particle:nth-child(9) { left: 90%; animation-delay: 0.8s; animation-duration: 6s; }

/* ✅ ANIMACIÓN FLOAT MOVIDA AL ARCHIVO animations.css */

/* ==========================================
   2. BLOQUE SERVICIOS - CARRUSEL DE SERVICIOS ESPECIALIZADOS
   ========================================== */

/* Variables de colores para la página de inicio */
:root {
    --inicio-bg-azul: #1E3A8A;
    --inicio-bg-amarillo: #E3B23C;
    --inicio-texto-claro: #FFFFFF;
    --inicio-texto-oscuro: #1A202C;
}

/* Secciones alternadas de fondo - Solo para servicios específicos */
.services.section-bg-azul {
    background: linear-gradient(135deg, var(--inicio-bg-azul) 0%, #2563EB 100%);
    color: var(--inicio-texto-claro);
    margin-top: 0; /* Eliminar margen superior */
    padding-top: var(--spacing-3xl); /* Padding superior para separación */
}

/* CORREGIR COLORES DEL TEXTO EN LA SECCIÓN DE SERVICIOS */
.services.section-bg-azul .section-title,
.services.section-bg-azul .section-subtitle {
    color: #FFFFFF; /* TEXTO BLANCO OBLIGATORIO */
}

/* Estilos para container y section-header en servicios */
.services .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.services .section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.services .scroll-animate {
    /* Placeholder para animaciones de scroll */
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ✅ ESTILOS MOVIDOS AL BLOQUE PRINCIPAL DE SERVICIOS - Sin duplicados */

/* ✅ REGLAS ELIMINADAS - Los botones se manejan en las reglas principales sin duplicados */

/* ==========================================
   SLIDER DE SERVICIOS - SISTEMA AUTOMÁTICO PROFESIONAL
   ========================================== */

/* Contenedor principal del slider */
.servicios-slider-container,
.inicio-servicios-slider {
    position: relative;
    margin-top: 1.5rem; /* Reducido de 3rem a 1.5rem */
    width: 100vw;
    max-width: 100vw;
    padding: 0;
    overflow: hidden;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.servicios-slider {
    display: flex;
    align-items: center;
    padding: 2.5rem 0; /* ✅ AUMENTADO de 2rem a 2.5rem para mejor espaciado */
    min-height: 650px; /* ✅ AUMENTADO de 550px a 650px para tarjetas MÁS ALTAS */
    overflow: hidden;
    position: relative;
    width: 100vw;
    max-width: 100vw;
    
    /* Variables CSS para controlar difuminado */
    --difuminado-izquierdo: hidden;
    --difuminado-derecho: hidden;
}

/* DIFUMINADO INTELIGENTE - Más ancho para mejor efecto visual */
.servicios-slider::before,
.servicios-slider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px; /* ✅ AUMENTADO de 50px a 80px para mejor efecto visual */
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.servicios-slider::before {
    left: 0;
    background: linear-gradient(to right, rgba(30, 58, 138, 1) 0%, rgba(30, 58, 138, 0.8) 40%, rgba(30, 58, 138, 0.3) 80%, transparent 100%);
    opacity: var(--difuminado-izquierdo, 0);
    visibility: var(--difuminado-izquierdo, hidden);
}

.servicios-slider::after {
    right: 0;
    background: linear-gradient(to left, rgba(30, 58, 138, 1) 0%, rgba(30, 58, 138, 0.8) 40%, rgba(30, 58, 138, 0.3) 80%, transparent 100%);
    opacity: var(--difuminado-derecho, 0);
    visibility: var(--difuminado-derecho, hidden);
}

.servicios-slider-inner {
    display: flex;
    align-items: center;
    transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: max-content;
    padding: 0; /* El centrado lo maneja el JS con centerOffset */
}


/* Tarjetas de servicios - SISTEMA AUTOMÁTICO Y CLICKEABLE */
.servicio-item {
    width: calc(50vw - 4rem); /* 2 cards visibles en desktop, descontando márgenes */
    min-width: calc(50vw - 4rem);
    max-width: 680px;
    min-height: 600px; /* ✅ MANTENER altura de 600px para tarjetas altas */
    height: auto;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border: 2px solid rgba(30, 58, 138, 0.15);
    flex-shrink: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
    margin: 0 1rem;
    position: relative;
    overflow: hidden;
    transform: translateY(0) scale(1);
    cursor: pointer; /* Hacer clickeable toda la tarjeta */
}

/* ✅ NUEVO: Colores de fondo alternados para las tarjetas de servicios */
.servicio-item:nth-child(odd) {
    background: linear-gradient(135deg, #F8FAFF 0%, #E6F0FF 100%); /* Azul muy suave */
    border-color: rgba(30, 58, 138, 0.15);
}

.servicio-item:nth-child(even) {
    background: linear-gradient(135deg, #FFFBF0 0%, #FFF8E1 100%); /* Dorado muy suave */
    border-color: rgba(227, 178, 60, 0.15);
}

/* ✅ NUEVO: Hover con colores mejorados */
.servicio-item:hover {
    background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%); /* Dorado en hover */
    border-color: #E3B23C;
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* ✅ NUEVO: Línea superior dorada en hover */
.servicio-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #E3B23C, #FFD700, #E3B23C);
    transform: scaleX(0);
    transition: transform 0.4s ease;
    z-index: 5;
}

.servicio-item:hover::before {
    transform: scaleX(1);
}

/* ✅ NUEVO: Colores de texto adaptados a los fondos */
.servicio-item:nth-child(odd) .servicio-titulo {
    color: #1E3A8A; /* Azul oscuro para fondo azul claro */
}

.servicio-item:nth-child(even) .servicio-titulo {
    color: #8B5A2B; /* Marrón dorado para fondo dorado claro */
}


/* ✅ NUEVO: Colores de descripción adaptados */
.servicio-item:nth-child(odd) .servicio-descripcion {
    color: #2D3748; /* Gris oscuro para fondo azul claro */
}

.servicio-item:nth-child(even) .servicio-descripcion {
    color: #4A5568; /* Gris medio para fondo dorado claro */
}


/* Contenido de las tarjetas - SISTEMA DE ALTURAS FIJAS */
.servicio-contenido {
    display: flex;
    min-height: 600px; /* ✅ AUMENTADO de 500px a 600px */
    height: 600px; /* ✅ AUMENTADO de 500px a 600px para consistencia */
    position: relative;
}

/* Texto a la izquierda - SISTEMA DE ALTURA FIJA CON ESPACIO PARA BOTÓN */
.servicio-texto {
    flex: none; /* ✅ NO FLEXIBLE - ALTURA FIJA */
    width: 50%; /* ✅ ANCHO FIJO para consistencia */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 3.5rem; /* ✅ AUMENTADO de 3rem a 3.5rem para mejor espaciado */
    padding-right: 2.5rem; /* ✅ AUMENTADO de 2rem a 2.5rem */
    padding-bottom: 6rem; /* ✅ AUMENTADO de 5rem a 6rem para botón más abajo */
    position: relative;
}

.servicio-titulo {
    font-size: 2rem; /* ✅ AUMENTADO de 1.8rem a 2rem para tarjetas MÁS GRANDES */
    font-weight: 700;
    color: #1E3A8A;
    margin-bottom: 2rem; /* ✅ AUMENTADO de 1.5rem a 2rem para mejor espaciado */
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.3px;

    line-height: 1.3;
}

.servicio-item:hover .servicio-titulo {
    color: #E3B23C;
    transform: translateY(-2px);
}

/* ✅ ESTILOS ESPECÍFICOS PARA SECCIÓN AZUL - INTEGRADOS EN EL BLOQUE PRINCIPAL */
.services.section-bg-azul .servicio-titulo {
    color: #1E3A8A; /* Título azul en las tarjetas */
}

.services.section-bg-azul .servicio-descripcion {
    color: #2D3748; /* Descripción oscura en las tarjetas */
}

.servicio-descripcion {
    color: #2D3748;
    line-height: 1.9; /* ✅ AUMENTADO de 1.8 a 1.9 para mejor legibilidad */
    margin-bottom: 0; /* ✅ SIN MARGEN INFERIOR - botón está fijo */
    font-weight: 500;
    font-size: 1.2rem; /* ✅ AUMENTADO de 1.1rem a 1.2rem para tarjetas MÁS GRANDES */

    flex-grow: 1;
}

.servicio-item:hover .servicio-descripcion {
    color: #1A202C;
}

/* Botón Saber más información - POSICIÓN Y TAMAÑO FIJO */
.servicio-enlace {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* ✅ CENTRAR CONTENIDO */
    gap: 1rem; /* ✅ AUMENTADO de 0.8rem a 1rem para mejor espaciado */
    color: #000000; /* ✅ COLOR NEGRO para mejor contraste sobre azul claro */
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;

    margin-top: 0; /* ✅ SIN MARGEN AUTOMÁTICO */
    margin-bottom: 0; /* ✅ SIN MARGEN INFERIOR */
    padding: 1.2rem 4rem; /* ✅ AUMENTADO padding horizontal de 3.5rem a 4rem para texto en UNA LÍNEA */
    background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
    border: 2px solid #E3B23C;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(227, 178, 60, 0.25);
    position: absolute; /* ✅ POSICIÓN ABSOLUTA */
    bottom: 1.5rem; /* ✅ AUMENTADO de 1rem a 1.5rem para mejor espaciado */
    left: 2.5rem; /* ✅ REDUCIDO de 3rem a 2.5rem para compensar botón MÁS ANCHO */
    right: 2.5rem; /* ✅ REDUCIDO de 3rem a 2.5rem para compensar botón MÁS ANCHO */
    height: 56px; /* ✅ AUMENTADO de 52px a 56px para mejor proporción */
    min-height: 56px; /* ✅ AUMENTADO de 52px a 56px */
    max-height: 56px; /* ✅ AUMENTADO de 52px a 56px */
    overflow: hidden;
    transform: translateY(0);
    pointer-events: auto; /* Permitir clicks en el botón */
    box-sizing: border-box; /* ✅ INCLUIR PADDING EN DIMENSIONES */
    white-space: nowrap; /* ✅ FORZAR TEXTO EN UNA SOLA LÍNEA */
}

.servicio-enlace::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s ease;
}

.servicio-enlace:hover {
    gap: 0.8rem;
    background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%); /* ✅ FONDO AZUL OSCURO */
    color: #FFFFFF; /* ✅ TEXTO BLANCO para contraste perfecto */
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.4); /* ✅ SOMBRA AZUL */
    border-color: #1E3A8A; /* ✅ BORDE AZUL OSCURO */
}

.servicio-enlace:hover::before {
    left: 100%;
}

.servicio-enlace i {
    font-size: 1.4rem; /* ✅ AUMENTADO de 1.3rem a 1.4rem para tarjetas MÁS GRANDES */

}

.servicio-enlace:hover i {
    transform: translateX(5px) scale(1.1);
    color: #FFFFFF; /* ✅ ÍCONO BLANCO en hover */
}

/* Foto a la derecha - FOTOS REALES CON ALTURA FIJA (RESPETANDO DIMENSIONES ACTUALES) */
.servicio-imagen {
    flex: none; /* ✅ NO FLEXIBLE - ALTURA FIJA */
    width: 50%; /* ✅ ANCHO FIJO para consistencia */
    min-height: 600px; /* ✅ MANTENER: Exactamente 600px de altura */
    height: 600px; /* ✅ MANTENER: Exactamente 600px de altura */
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: none;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
    /* ✅ NUEVO: Preparado para fotos reales */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ✅ NUEVO: Imagen real del servicio */
.servicio-imagen .imagen-real {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantener proporción de la imagen */
    object-position: center; /* Centrar la imagen */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Por debajo del overlay y placeholder */
    transition: transform 0.4s ease; /* Transición suave para hover */
}

/* ✅ NUEVO: Efecto hover en la imagen */
.servicio-item:hover .servicio-imagen .imagen-real {
    transform: scale(1.05); /* Ligero zoom en hover */
}

/* ✅ NUEVO: Placeholder como fallback (cuando no hay imagen) */
.imagen-placeholder.fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%); /* Fondo dorado */
    z-index: 2; /* Por encima de la imagen */
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* ✅ NUEVO: Ocultar placeholder cuando hay imagen */
.servicio-imagen:has(.imagen-real) .imagen-placeholder.fallback {
    opacity: 0; /* Ocultar placeholder cuando hay imagen */
}

/* ✅ NUEVO: Mostrar placeholder cuando NO hay imagen */
.servicio-imagen:not(:has(.imagen-real)) .imagen-placeholder.fallback {
    opacity: 1; /* Mostrar placeholder cuando NO hay imagen */
}

.servicio-item:hover .servicio-imagen {
    transform: scale(1.05);
    box-shadow: inset 0 0 30px rgba(227, 178, 60, 0.3);
}

.servicio-imagen::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.8s ease;
    z-index: 3; /* Por encima de la imagen y placeholder */
}

.servicio-item:hover .servicio-imagen::before {
    left: 100%;
}

.imagen-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #1E3A8A;

}

.servicio-item:hover .imagen-placeholder {
    color: #1A202C;
    transform: scale(1.1);
}

.imagen-placeholder i {
    font-size: 4.5rem; /* ✅ AUMENTADO de 4rem a 4.5rem para tarjetas MÁS GRANDES */
    margin-bottom: 1.2rem; /* ✅ AUMENTADO de 1rem a 1.2rem para mejor espaciado */
    opacity: 0.7;

}

.servicio-item:hover .imagen-placeholder i {
    opacity: 1;
    transform: rotateY(180deg);
}

.imagen-placeholder span {
    font-weight: 600;
    color: #333;
    font-size: 1.2rem; /* ✅ AUMENTADO de 1.1rem a 1.2rem para tarjetas MÁS GRANDES */

}

.servicio-item:hover .imagen-placeholder span {
    color: #1A202C;
}

/* FLECHAS EN LOS COSTADOS - POSICIONAMIENTO CORREGIDO */
.slider-controles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    pointer-events: none; /* Para que no interfiera con el difuminado */
}

.slider-controles .slider-btn {
    pointer-events: auto; /* Restaurar eventos para los botones */
}

/* Botón izquierdo - POSICIONAMIENTO CORREGIDO */
.slider-btn.prev {
    position: absolute;
    left: 20px; /* ✅ AUMENTADO de 12px a 20px para mejor posicionamiento con difuminado más ancho */
    top: 50%; /* Centrado verticalmente */
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Botón derecho - POSICIONAMIENTO CORREGIDO */
.slider-btn.next {
    position: absolute;
    right: 20px; /* ✅ AUMENTADO de 12px a 20px para mejor posicionamiento con difuminado más ancho */
    top: 50%; /* Centrado verticalmente */
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Mostrar botones cuando están activos */
.slider-btn.active {
    opacity: 1;
    visibility: visible;
}

.slider-btn {
    background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
    color: white;
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
    font-size: 1.2rem;
    position: relative;
    overflow: hidden;
}


/* ANIMACIÓN DE FLECHA INDICATIVA */
.slider-btn::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    /* ✅ ANIMACIÓN MOVIDA ARRIBA */
}

.slider-btn.prev::after {
    left: -30px;
    border-right: none;
    border-top: none;
    transform: rotate(45deg);
}

.slider-btn.next::after {
    right: -30px;
    border-left: none;
    border-bottom: none;
    transform: rotate(45deg);
}

.slider-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.slider-btn:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1E3A8A 100%);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.4);
}

.slider-btn:hover::before {
    left: 100%;
}

.slider-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: translateY(-50%) scale(0.9);
    animation: none;
}

.slider-btn:disabled:hover {
    transform: translateY(-50%) scale(0.9);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
}

.slider-puntos {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem; /* Reducido de 2rem a 1.5rem para mejor espaciado */
    margin-bottom: 0.5rem; /* Agregado margen inferior para separación del botón */
}

.slider-punto {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3); /* Cambiado a blanco semi-transparente */
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid rgba(255, 255, 255, 0.5); /* Borde blanco */
}

.slider-punto:hover {
    background: rgba(255, 255, 255, 0.6); /* Hover más blanco */
    transform: scale(1.1);
}

.slider-punto.activo {
    background: #FFFFFF; /* Punto activo completamente blanco */
    transform: scale(1.3);
    border-color: #FFFFFF;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Sombra blanca para destacar */
}

/* Botón Ver Todos los Servicios - FONDO BLANCO CON TEXTO AZUL */
.servicios-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem; /* Reducido de 2rem a 1.5rem para mejor espaciado */
    padding: 0.5rem 0; /* Reducido de 1rem a 0.5rem */
}

.servicios-cta .btn {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%); /* Fondo blanco */
    color: #1E3A8A; /* Texto azul */
    padding: 0.8rem 1.8rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.15); /* Sombra azul sutil */
    border: 2px solid rgba(30, 58, 138, 0.2); /* Borde azul sutil */
    font-size: 1rem;
}

.servicios-cta .btn:hover {
    background: linear-gradient(135deg, #F8FAFC 0%, #E6F0FF 100%); /* Hover azul muy claro */
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.25);
    color: #1E3A8A; /* Mantener texto azul */
    text-decoration: none;
    border-color: rgba(30, 58, 138, 0.3); /* Borde más visible en hover */
}

/* ==========================================
   3. BLOQUE TECNOLOGÍA - TECNOLOGÍA DE VANGUARDIA
   ========================================== */

/* ✅ ESTILOS ESPECÍFICOS PARA TECNOLOGÍA - MOVIDOS DESDE STYLES.CSS */
/* ✅ ELIMINADO: .technology.section-bg-amarillo ahora usa el estilo general .section-title */

/* Mantener solo estilos para párrafos descriptivos (NO títulos) */
.technology.section-bg-amarillo p {
    color: #374151;
    font-weight: 500;
    line-height: 1.7;
}

/* ✅ EFECTOS ESPECIALES PARA ELEMENTOS INTERACTIVOS - TECNOLOGÍA */
.technology.section-bg-amarillo .btn,
.technology.section-bg-amarillo button,
.technology.section-bg-amarillo .card,
.technology.section-bg-amarillo .feature-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.technology.section-bg-amarillo .btn:hover,
.technology.section-bg-amarillo .card:hover,
.technology.section-bg-amarillo .feature-card:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ✅ BOTONES ESPECÍFICOS PARA TECNOLOGÍA */
.technology.section-bg-amarillo .btn-primary {
    background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 6px -1px rgba(30, 58, 138, 0.3);
}

.technology.section-bg-amarillo .btn-primary:hover {
    background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(30, 58, 138, 0.4);
}

.technology.section-bg-amarillo .btn-secondary {
    background: rgba(255, 255, 255, 0.9);
    color: #1F2937;
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}

.technology.section-bg-amarillo .btn-secondary:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}


/* ==========================================
   3.5. ESTILOS CON PREFIJO INICIO PARA TECNOLOGÍA Y ABOUT
   ========================================== */

/* Estilos para sección de tecnología en página de inicio */
/* ✅ TÍTULO DE TECNOLOGÍA MEJORADO PARA FONDO AMARILLO */
.inicio-tech-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: var(--spacing-lg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
}

/* Estilos para text-center en tecnología */
.technology .text-center {
    text-align: center;
}

/* ✅ DESCRIPCIÓN DE TECNOLOGÍA MEJORADA PARA FONDO AMARILLO */
.inicio-tech-description {
    font-size: 1.1rem;
    color: #374151;
    line-height: 1.7;
    margin-bottom: var(--spacing-2xl);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.inicio-tech-features {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    flex-grow: 1;
    justify-content: flex-start;
}

/* ✅ TARJETAS DE CARACTERÍSTICAS MEJORADAS PARA FONDO AMARILLO */
.inicio-tech-feature {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
    display: flex;
    gap: var(--spacing-lg);
    align-items: flex-start;
    backdrop-filter: blur(15px);
}

.inicio-tech-feature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--bg-gradient-vibrant);
    transform: scaleY(0);
    transition: var(--transition-normal);
}

.inicio-tech-feature:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 1);
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgba(255, 255, 255, 0.6);
}

.inicio-tech-feature:hover::before {
    transform: scaleY(1);
}

.inicio-feature-icon {
    width: 70px;
    height: 70px;
    background: var(--bg-gradient-vibrant);
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.inicio-feature-icon i {
    font-size: 1.75rem;
    color: white;
    transition: var(--transition-normal);
}

.inicio-tech-feature:hover .inicio-feature-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--shadow-card);
}

.inicio-feature-content h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1F2937;
    margin-bottom: var(--spacing-sm);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.inicio-feature-content p {
    color: #374151;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
    font-weight: 500;
}

/* ==========================================
   SECCIÓN ABOUT REDISEÑADA COMPLETAMENTE 
   ========================================== */

/* ✅ ABOUT - FONDO AMARILLO SIMPLIFICADO - SIN LAG */
.about.section-bg-amarillo {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 50%, #FCD34D 100%);
    color: #1F2937;
    position: relative;
    overflow: hidden;
    /* ✅ ELIMINADO: margin-top para evitar espacios blancos y cambios constantes */
    padding-top: 1rem; /* ✅ MÍNIMO: Solo padding interno para estabilidad */
}

/* ✅ TECNOLOGÍA - FONDO AMARILLO SIMPLIFICADO - SIN LAG */
.technology.section-bg-amarillo {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 50%, #FCD34D 100%);
    color: #1F2937;
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
    width: 100vw;
    max-width: 100vw;
}

/* ✅ HEADER CENTRADO - CLASE ÚNICA */
.inicio-tech-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
}

.inicio-tech-header .inicio-tech-subtitle {
    font-size: 1.3rem;
    color: #1E40AF;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ✅ GRID DE TARJETAS VERTICAL - 4 TARJETAS MÁS ALTAS - CLASE ÚNICA */
.inicio-tech-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(280px, 1fr));
    gap: 2rem;
    position: relative;
    z-index: 2;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ✅ TARJETAS DE TECNOLOGÍA - PANEL DE PRECISIÓN */
.inicio-tech-card {
    background: #FFFFFF;
    border-radius: 18px;
    padding: 0;
    min-height: 500px;
    box-shadow:
        0 8px 24px rgba(30, 58, 138, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.06);
    border-top: 4px solid #1E3A8A;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.inicio-tech-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 40px rgba(30, 58, 138, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ✅ IMAGEN DE TARJETA */
.inicio-tech-card-image {
    margin-bottom: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.inicio-tech-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(to bottom, transparent, #FFFFFF);
    pointer-events: none;
    z-index: 1;
}

.inicio-tech-card-image .tech-imagen-real {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.inicio-tech-card-image .image-placeholder.fallback {
    display: none;
}

.inicio-tech-card-image .image-placeholder {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    border: 2px dashed #D1D5DB;
}

.inicio-tech-card-image .image-placeholder i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: #9CA3AF;
}

.inicio-tech-card-image .image-placeholder span {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

/* ✅ HEADER DE TARJETA */
.inicio-tech-card-header {
    text-align: center;
    margin-bottom: 0.8rem;
    padding: 1rem 1.5rem 0;
}

.inicio-tech-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1E3A8A;
    margin: 0 0 0.4rem 0;
    font-family: var(--font-primary);
    letter-spacing: 0.01em;
}

.inicio-tech-card-brands {
    color: #E3B23C;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0;
}

/* ✅ CUERPO DE TARJETA */
.inicio-tech-card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 0 1.5rem 1.5rem;
}

.inicio-tech-card-description {
    color: #374151;
    line-height: 1.6;
    margin-bottom: 1.2rem;
    font-size: 0.92rem;
}

/* ✅ VENTAJAS DEL EQUIPO */
.inicio-tech-card-advantages {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: auto;
}

.inicio-advantage-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.8rem;
    background: rgba(30, 58, 138, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(30, 58, 138, 0.12);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.inicio-advantage-item:hover {
    background: rgba(30, 58, 138, 0.1);
    border-color: rgba(30, 58, 138, 0.3);
    transform: translateX(4px);
}

.inicio-advantage-item i {
    color: #1E3A8A;
    font-size: 0.8rem;
    background: rgba(30, 58, 138, 0.12);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.inicio-advantage-item span {
    color: #1F2937;
    font-weight: 500;
    font-size: 0.83rem;
}

/* ✅ Asegurar que los elementos con z-index no bloqueen la selección */
.section-bg-amarillo .container-full-width {
    position: relative;
    z-index: 10;
}

/* ==========================================
   CONTENEDOR SIN RESTRICCIONES DE ANCHO
   ========================================== */

.container-full-width {
    width: 100vw; /* USAR TODO EL ANCHO DE LA PANTALLA */
    max-width: none; /* SIN RESTRICCIONES */
    margin: 0;
    padding: 0 2rem; /* Solo padding lateral mínimo */
    position: relative;
    left: 50%;
    transform: translateX(-50%); /* Centrar sin limitar ancho */
    box-sizing: border-box;
}



/* CTA Central */
.about-cta-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inicio-about-cta-compact {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%);
    padding: 2.5rem 2rem;
    border-radius: 25px;
    text-align: center;
    border: 2px solid rgba(30, 64, 175, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    width: 100%;
    position: relative;
    z-index: 5;
}

/* Asegurar que todo el texto del CTA sea seleccionable */
.inicio-about-cta-compact * {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.inicio-about-cta-compact h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.3;
}

.inicio-about-cta-compact p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1.8rem;
    font-weight: 400;
    line-height: 1.5;
}

.cta-buttons-compact {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons-compact .btn {
    padding: 0.9rem 1.8rem;
    font-size: 1rem;
    min-width: 180px;
    border-radius: 10px;
}

/* Certificaciones Horizontales (Derecha) */
.about-certificaciones-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inicio-about-credentials-horizontal {
    background: linear-gradient(135deg, 
                rgba(240, 253, 244, 0.95) 0%, 
                rgba(220, 252, 231, 0.9) 50%, 
                rgba(187, 247, 208, 0.85) 100%); /* Verde suave para confianza */
    padding: 2.5rem;
    border-radius: 25px;
    border: 1px solid rgba(34, 197, 94, 0.2); /* Borde verde sutil */
    box-shadow: 0 15px 35px rgba(34, 197, 94, 0.15), 
                0 5px 15px rgba(16, 185, 129, 0.12); /* Sombra verde suave */
    width: 100%;
    position: relative;
}

/* Efecto de línea superior verde */
.inicio-about-credentials-horizontal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #10B981 0%, #34D399 50%, #10B981 100%);
    border-radius: 25px 25px 0 0;
}

.credentials-title-horizontal {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 1.5rem;
    text-align: center;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.credentials-horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.8rem 1.2rem;
}

.credential-horizontal {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.8); /* Más opaco sobre fondo verde */
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    border: 1px solid rgba(34, 197, 94, 0.15); /* Borde verde muy sutil */
    transition: all 0.3s ease;
    min-height: 60px;
    justify-content: flex-start;
    box-shadow: 0 5px 15px rgba(34, 197, 94, 0.12); /* Sombra verde suave */
}

.credential-horizontal:hover {
    transform: translateX(2px);
}

.credential-horizontal i {
    color: #10b981;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ==========================================
   MANTENIENDO ESTILOS EXISTENTES
   ========================================== */

.about-left-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

/* Historia Expandida - DISEÑO CON COLOR AZUL GRIS SUAVE */
.inicio-about-story-compact {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.story-title-compact {
    font-size: 2rem; /* TEXTO AÚN MÁS GRANDE */
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 1.25rem 0; /* ELIMINADO margin-top para alineación perfecta */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.3;
}

/* Cuadro principal de contenido de historia */
.story-content-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 20px 40px rgba(30, 64, 175, 0.15), 
                0 8px 25px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 3px solid rgba(30, 64, 175, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    min-height: 500px; /* AUMENTADO para igualar altura con Valores */
    width: 100%; /* ✅ NUEVO: Usar 100% del contenedor como otros cuadros exitosos */
    /* ❌ ELIMINADO: max-width: 75%; - Era la causa del problema */
    margin: 0 auto;
    height: 100%; /* OCUPAR TODA LA ALTURA DISPONIBLE */
}

/* Layout horizontal para historia - DESKTOP */
.story-content-horizontal {
    display: grid;
    grid-template-columns: 1.1fr 1fr; /* TEXTO IZQUIERDA + IMAGEN DERECHA MENOS ANCHA */
    gap: 2rem;
    align-items: stretch; /* ESTIRAR PARA OCUPAR TODA LA ALTURA */
    margin-top: 1rem;
    flex: 1; /* OCUPAR ESPACIO DISPONIBLE */
    min-height: 450px; /* ALTURA MÍNIMA AUMENTADA PARA IMAGEN MÁS LARGA */
}

/* Título dentro del cuadro */
.story-content-box .story-title-compact {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 1rem 0; /* Ajustado para estar dentro del cuadro */
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.3;
    border-bottom: 2px solid rgba(30, 64, 175, 0.1);
    padding-bottom: 1rem;
}

.story-text-section {
    flex: 1;
}

.story-text-second {
    margin-top: 1rem !important;
}

.story-highlights {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(30, 64, 175, 0.12);
}

.story-highlight-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.story-highlight-item i {
    color: var(--primary-color);
    width: 18px;
    flex-shrink: 0;
}

.story-text-compact {
    font-size: 1.2rem; /* TEXTO AÚN MÁS LEGIBLE */
    line-height: 1.6; /* INTERLINEADO AUMENTADO */
    color: var(--text-primary);
    margin: 0; /* REMOVIDO margin-bottom para mejor control */
    font-weight: 400;
}

.story-image-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.story-text-compact strong {
    color: var(--primary-color);
    font-weight: 600;
}





/* Imagen real en sección historia */
.story-image-real {
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: 200px;
}
.story-img-real {
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    border-radius: 15px;
    display: block;
}

/* Placeholder para imagen en historia */
.story-image-placeholder {
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(227, 178, 60, 0.1) 0%, rgba(30, 64, 175, 0.1) 100%);
    padding: 2rem;
    border: 2px solid rgba(30, 64, 175, 0.3);
    text-align: center;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    width: 100%;
    margin-top: 0;
}

.story-image-placeholder:hover {
    transform: translateY(-2px);
    /* box-shadow y background eliminados — evitan repaint */
}

/* Estadísticas Horizontales - MOVIDO A SECCIÓN DESKTOP COMPLETA */

/* Estadísticas Expandidas */
.inicio-about-stats-vertical {
    display: flex;
    flex-direction: column;
    gap: 1.2rem; /* MÁS ESPACIO entre estadísticas */
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
    padding: 2rem; /* MÁS PADDING */
    border-radius: 20px; /* Bordes más suaves */
    border: 2px solid rgba(30, 64, 175, 0.1);
}

.stat-vertical {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* MÁS ESPACIO entre número y etiqueta */
    padding: 1.2rem; /* MÁS PADDING interno */
    background: rgba(255, 255, 255, 0.8);
    border-radius: 15px; /* Bordes más redondeados */
    transition: all 0.3s ease;
    min-height: 60px; /* Altura mínima para mejor proporción */
}

.stat-vertical:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateX(8px); /* Movimiento más pronunciado */
    box-shadow: 0 5px 15px rgba(30, 64, 175, 0.15);
}

.stat-vertical .stat-number {
    font-size: 2rem; /* NÚMEROS MÁS GRANDES */
    font-weight: 800;
    color: var(--primary-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-width: 70px; /* MÁS ANCHO para mejor alineación */
}

.stat-vertical .stat-label {
    font-size: 1rem; /* ETIQUETAS MÁS LEGIBLES */
    font-weight: 600; /* Peso más fuerte */
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

/* ==========================================
   COLUMNA CENTRAL: Carrusel Compacto
   ========================================== */

.about-center-column {
    display: flex;
    align-items: center;
    height: 100%;
}

.about-photo-carousel-compact {
    background: linear-gradient(135deg, 
                rgba(255, 255, 255, 1) 0%, 
                rgba(248, 250, 252, 0.98) 50%, 
                rgba(241, 245, 249, 0.95) 100%); /* Fondo más limpio y elegante */
    border-radius: 30px; /* Bordes más redondeados */
    padding: 0; /* SIN PADDING para el nuevo diseño horizontal */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12), 
                0 15px 35px rgba(75, 85, 99, 0.08), 
                inset 0 1px 0 rgba(255, 255, 255, 0.8); /* Sombra más elegante + luz interna */
    border: 2px solid rgba(30, 64, 175, 0.08); /* Borde azul muy sutil pero visible */
    width: 100%;
    height: 100%;
    min-height: 650px; /* ALTURA MÍNIMA igual al bloque izquierdo */
    max-height: 700px; /* ALTURA MÁXIMA aumentada */

    position: relative;
    overflow: visible; /* Permitir que los botones se vean por fuera */
    z-index: 1; /* Z-INDEX BASE para el contenedor */
}


/* CSS ANTIGUO DEL CARRUSEL ELIMINADO - REEMPLAZADO POR DISEÑO HORIZONTAL */

/* ==========================================
   COLUMNA DERECHA: Valores + Credenciales
   ========================================== */

.about-right-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

/* Valores Expandidos - DISEÑO CON COLOR DORADO CREMA */

/* Credenciales Expandidas */
.inicio-about-credentials-mini {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
    padding: 2rem; /* MÁS PADDING */
    border-radius: 20px; /* Bordes más suaves */
    border: 2px solid rgba(16, 185, 129, 0.15);
}

.credentials-title-mini {
    font-size: 1.4rem; /* TÍTULO MÁS GRANDE */
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 1.5rem; /* MÁS ESPACIO */
    text-align: center;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.credentials-mini {
    display: flex;
    flex-direction: column;
    gap: 1.2rem; /* MÁS ESPACIO entre credenciales */
}

.credential-mini {
    display: flex;
    align-items: center;
    gap: 1rem; /* MÁS ESPACIO entre icono y texto */
    padding: 1rem 1.5rem; /* MÁS PADDING interno */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 25px; /* Bordes más redondeados */
    font-size: 1rem; /* TEXTO MÁS LEGIBLE */
    font-weight: 500;
    color: var(--text-primary);
    border: 1px solid rgba(16, 185, 129, 0.2);
    transition: all 0.3s ease;
    min-height: 50px; /* Altura mínima para mejor proporción */
}

.credential-mini:hover {
    background: rgba(16, 185, 129, 0.1);
    transform: translateX(-5px); /* Movimiento más pronunciado */
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2);
}

.credential-mini i {
    color: #10b981;
    font-size: 1.2rem; /* ICONO MÁS GRANDE */
}

/* ==========================================
   CALL TO ACTION MÁS COMPACTO
   ========================================== */

.inicio-about-cta {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.06) 0%, rgba(59, 130, 246, 0.06) 100%);
    padding: 3rem 2rem; /* MÁS PADDING */
    border-radius: 25px; /* Bordes más suaves */
    text-align: center;
    border: 2px solid rgba(30, 64, 175, 0.1);
    margin-top: 2rem; /* MÁS ESPACIO superior */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* Sombra sutil */
}

.cta-content h3 {
    font-size: 2rem; /* TÍTULO MÁS GRANDE */
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 1.2rem; /* MÁS ESPACIO */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.3;
}

.cta-content p {
    font-size: 1.2rem; /* TEXTO MÁS LEGIBLE */
    color: var(--text-secondary);
    margin-bottom: 2rem; /* MÁS ESPACIO */
    font-weight: 400;
    line-height: 1.5;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem; /* MÁS ESPACIO entre botones */
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons .btn {
    padding: 1rem 2rem; /* BOTONES MÁS GRANDES */
    font-size: 1.1rem; /* TEXTO DE BOTONES MÁS GRANDE */
    min-width: 200px; /* Ancho mínimo para botones */
}

/* ==========================================
   LADO IZQUIERDO: CONTENIDO 
   ========================================== */

.inicio-about-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

/* Historia de la empresa */
.inicio-about-story {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    padding: 2.5rem;
    border-radius: 20px;
    border: 2px solid rgba(30, 64, 175, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.story-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative;
}

.story-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--bg-gradient-vibrant);
    border-radius: 2px;
}

.story-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.story-text:last-child {
    margin-bottom: 0;
}

.story-text strong {
    color: var(--primary-color);
    font-weight: 600;
}

/* Valores y diferenciadores */
.inicio-about-values {
    background: linear-gradient(135deg, rgba(227, 178, 60, 0.05) 0%, rgba(249, 197, 21, 0.05) 100%);
    padding: 2.5rem;
    border-radius: 20px;
    border: 2px solid rgba(227, 178, 60, 0.15);
}

.values-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 2rem;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.values-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 COLUMNAS para 3 filas de 2 elementos */
    gap: 1.2rem;
    row-gap: 1.5rem; /* REDUCIDO el espacio entre filas */
    margin-top: 1.2rem; /* REDUCIDO el espacio desde el título */
    flex: 1; /* OCUPAR ESPACIO DISPONIBLE */
    align-content: start; /* ALINEAR AL INICIO */
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
}



.value-item {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    transition: all 0.3s ease;
    border: 1px solid rgba(227, 178, 60, 0.1);
}

.value-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(227, 178, 60, 0.2);
    background: rgba(255, 255, 255, 0.95);
}

.value-icon {
    width: 40px;
    height: 40px;
    background: var(--bg-gradient-vibrant);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(227, 178, 60, 0.3);
}

.value-icon i {
    font-size: 1.2rem;
    color: white;
}

.value-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.value-content p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* Estadísticas compactas */
.inicio-about-stats-compact {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
    padding: 2rem;
    border-radius: 20px;
    border: 2px solid rgba(30, 64, 175, 0.1);
}

.stats-compact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-compact {
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
}

.stat-compact:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 20px rgba(30, 64, 175, 0.15);
}

.stat-compact .stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin-bottom: 0.5rem;
}

.stat-compact .stat-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Credenciales compactas */
.inicio-about-credentials-compact {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
    padding: 2rem;
    border-radius: 20px;
    border: 2px solid rgba(16, 185, 129, 0.15);
}

.credentials-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 1.5rem;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.credentials-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.credential-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.credential-badge:hover {
    background: rgba(16, 185, 129, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2);
}

.credential-badge i {
    color: #10b981;
    font-size: 1rem;
}

/* ==========================================
   LADO DERECHO: CARRUSEL DE FOTOS 
   ========================================== */

.inicio-about-visual {
    position: sticky;
    top: 2rem;
}

.about-photo-carousel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    border-radius: 25px;
    padding: 2rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(30, 64, 175, 0.1);
}

.carousel-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.carousel-slides {
    position: relative;
    width: 100%;
    height: 500px;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.carousel-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.slide-image {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    margin-bottom: 1.5rem;
}

.slide-image img.imagen-real {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.slide-image:hover img.imagen-real {
    transform: scale(1.05);
}

.slide-image .image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    border-radius: 15px;
}

.slide-image .image-placeholder.fallback {
    display: flex;
}

.slide-image .image-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.6;
}

.slide-image .image-placeholder span {
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
}

.slide-caption {
    padding: 1rem 0;
}

.slide-caption h4 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.8rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.slide-caption p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Controles del carrusel */
.carousel-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    pointer-events: none;
}

.carousel-btn {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(30, 64, 175, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;

}

.carousel-btn:hover {
    background: rgba(30, 64, 175, 0.1);
}

.carousel-btn i {
    font-size: 1.2rem;
    color: var(--primary-color);
}

/* Indicadores */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(30, 64, 175, 0.3);
    border: none;
    cursor: pointer;
}

.indicator.active {
    background: var(--primary-color);
    opacity: 1;
}

.indicator:hover {
    background: var(--primary-color);
}

/* ==========================================
   CALL TO ACTION FINAL 
   ========================================== */

/* ✅ ELIMINADO: Duplicado de .inicio-about-cta - ya existe en línea 2334 */
/* ✅ ELIMINADO: Duplicado de .cta-content - ya existe en línea 2344 */
/* ✅ ELIMINADO: Duplicado de .cta-buttons - ya existe en línea 2361 */


/* ==========================================
   4. BLOQUE PROYECTOS - PROYECTOS DESTACADOS
   ========================================== */

.projects {
    padding: var(--spacing-3xl) 2rem; /* ✅ OPTIMIZADO: Padding lateral para mejor espaciado */
    position: relative;
    overflow: hidden;
}

/* Estilos específicos para projects */
.projects.section-bg-azul {
    background: linear-gradient(135deg, var(--inicio-bg-azul) 0%, #2563EB 100%);
    color: var(--inicio-texto-claro);
}

.projects .container {
    max-width: 100%; /* ✅ CORREGIDO: Usar todo el ancho disponible */
    margin: 0 auto;
    padding: 0 2rem; /* ✅ OPTIMIZADO: Padding lateral para respiración */
}

.projects .scroll-animate {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.projects .section-title,
.projects .section-subtitle {
    color: #FFFFFF;
}

/* ✅ CORREGIDO: Estilos para project overlay y category */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent; /* ✅ CORREGIDO: Fondo transparente para que se vea siempre */
    display: flex;
    align-items: flex-end;
    padding: 1rem;
    opacity: 1; /* ✅ CORREGIDO: Siempre visible */
    transition: all 0.3s ease;
}

/* ✅ NUEVO: Solo el fondo oscuro aparece en hover */
.inicio-proyectos-card:hover .project-overlay {
    background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(30,58,138,0.6) 100%);
}

/* ✅ NUEVO: Contenedor de categoría amarillo - ESTADO NORMAL */
.projects .project-category {
    background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%); /* ✅ NUEVO: Contenedor amarillo */
    color: #1a202c; /* ✅ NUEVO: Texto oscuro para contraste */
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid rgba(255, 255, 255, 0.3); /* ✅ NUEVO: Borde sutil */
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3); /* ✅ NUEVO: Sombra dorada */
    transition: all 0.3s ease; /* ✅ NUEVO: Transición suave */
}

/* ✅ NUEVO: Efecto hover para las categorías - MAYOR ESPECIFICIDAD */
.projects .inicio-proyectos-card:hover .project-category {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%); /* ✅ NUEVO: Color naranja en hover */
    color: #ffffff; /* ✅ NUEVO: Texto blanco en hover */
    transform: translateY(-2px) scale(1.05); /* ✅ NUEVO: Elevación y escala */
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.4); /* ✅ NUEVO: Sombra naranja */
    border-color: rgba(255, 255, 255, 0.5); /* ✅ NUEVO: Borde más visible */
}

/* ✅ NUEVO: Efecto hover para el contenido del proyecto */
.inicio-proyectos-card:hover .project-content {
    background: linear-gradient(135deg, #FFFFFF 0%, #F1F3F4 100%); /* ✅ NUEVO: Fondo más claro en hover */
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05); /* ✅ NUEVO: Sombra interna sutil */
}

/* Placeholder SIEMPRE oculto hasta que JS añada .visible (imagen fallida) */
.project-image .image-placeholder:not(.visible) {
    display: none !important;
}

/* Estilos para fallback */
.projects .image-placeholder.fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    border: 2px dashed rgba(30, 58, 138, 0.2);
    min-height: 200px;
}

/* Estilos para projects CTA */
.projects-cta {
    text-align: center;
    margin-top: 3rem;
}

.projects-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #F8FAFC 0%, #E6F0FF 100%);
    color: #1E3A8A;
    border: 2px solid rgba(30, 58, 138, 0.2);
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.15);
}

.projects-cta .btn:hover {
    background: linear-gradient(135deg, #E6F0FF 0%, #DBEAFE 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.25);
    color: #1E3A8A;
    text-decoration: none;
}


/* Grid de proyectos ULTRA-OPTIMIZADO para la página de inicio */
.inicio-proyectos-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columnas fijas - SIN minmax() */
    gap: 1rem; /* ✅ OPTIMIZADO: Gap más compacto para tarjetas más anchas */
    margin-top: 2rem; /* Margen fijo - SIN variables CSS */
    max-width: 100%; /* ✅ OPTIMIZADO: Usar 100% del contenedor */
    width: 100%; /* ✅ OPTIMIZADO: Usar 100% del contenedor */
    margin-left: 0; /* ✅ OPTIMIZADO: Alineado a la izquierda */
    margin-right: 0; /* ✅ OPTIMIZADO: Sin margen derecho */
    padding: 0; /* ✅ OPTIMIZADO: Sin padding para aprovechar todo el espacio */
    overflow-x: visible;
    /* ✅ CORREGIDO: Centrado perfecto sin left/transform */
    position: relative;
    /* ✅ NUEVO: Centrado automático perfecto */
    justify-self: center;
    align-self: center;
}

/* ✅ NUEVO: Ajustar el header de la sección para centrado perfecto */
.projects .section-header {
    max-width: 1200px;
    margin: 0 auto 3rem auto;
    padding: 0 2rem;
}

/* ============================================================
   CARRUSEL PROYECTOS — "Expediente Maestro"
   Split-layout: imagen izquierda / contenido derecho (navy)
   Composited-only transitions: transform 60fps garantizados
   ============================================================ */

.proy-showcase {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

/* Viewport que recorta el track deslizante */
.proy-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Track: todos los slides en línea horizontal */
.proy-track {
    display: flex;
    will-change: transform;
    transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Cada slide ocupa 100% del viewport */
.proy-slide {
    min-width: 100%;
    display: grid;
    grid-template-columns: 56% 44%;
    min-height: 580px;
}

/* ── Columna imagen ── */
.proy-img-wrap {
    position: relative;
    overflow: hidden;
    background: #0d1b35;
}

.proy-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.proy-img-wrap:hover .proy-img {
    transform: scale(1.05);
}

/* Fallback cuando la imagen no carga */
.proy-img-fb {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d1b35 0%, #1E3A8A 100%);
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
    gap: 0.75rem;
}

.proy-img-fb.visible { display: flex; }

.proy-img-fb i { font-size: 2.5rem; color: rgba(227, 178, 60, 0.55); }

/* Badge de categoría */
.proy-badge-wrap {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 2;
}

.proy-badge {
    display: inline-block;
    background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%);
    color: #1a202c;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 0.45rem 1.1rem;
    border-radius: 100px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* Gradiente oscuro suave en la parte inferior de la imagen */
.proy-img-wrap::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(13, 27, 53, 0.55) 0%, transparent 100%);
    pointer-events: none;
}

/* ── Columna contenido ── */
.proy-info {
    position: relative;
    background: #0d1b35;
    padding: 3.25rem 3.25rem 2.75rem 3rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Separador dorado vertical */
.proy-info::before {
    content: '';
    position: absolute;
    top: 10%; left: 0;
    width: 2px; height: 80%;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(227, 178, 60, 0.55) 30%,
        rgba(227, 178, 60, 0.55) 70%,
        transparent 100%);
}

/* Número fantasma decorativo — Playfair Display */
.proy-ghost-num {
    position: absolute;
    bottom: -1rem; right: 1.5rem;
    font-size: 10rem;
    font-weight: 900;
    color: rgba(227, 178, 60, 0.055);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing: -0.04em;
}

/* Contador de posición */
.proy-counter {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(227, 178, 60, 0.85);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

/* Título — Playfair Display para elegancia editorial */
.proy-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

/* Descripción */
.proy-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    flex: 1;
    margin-bottom: 0;
}

/* Etiquetas de ubicación/fecha */
.proy-tags {
    display: flex;
    gap: 0.65rem;
    flex-wrap: nowrap;
    margin-top: 2rem;
    flex-shrink: 0;
}

.proy-tag {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 0.85rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(227, 178, 60, 0.22);
    border-radius: 10px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.proy-tag i {
    color: #E3B23C;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* ── Controles: prev · dots · next ── */
.proy-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    margin-top: 2rem;
}

.proy-arrow {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.proy-arrow:hover {
    background: rgba(227, 178, 60, 0.18);
    border-color: rgba(227, 178, 60, 0.55);
    transform: scale(1.1);
}

.proy-dots {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.proy-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, transform 0.25s ease, width 0.3s ease, border-radius 0.3s ease;
    will-change: transform, width;
}

.proy-dot.active {
    background: #E3B23C;
    transform: scale(1.1);
    width: 28px;
    border-radius: 4px;
}

/* ── Responsive ── */

@media (max-width: 1200px) {
    .proy-slide {
        grid-template-columns: 52% 48%;
        min-height: 530px;
    }
    .proy-ghost-num { font-size: 8rem; }
    .proy-title { font-size: 1.75rem; }
    .proy-info { padding: 2.75rem 2.75rem 2.25rem 2.5rem; }
}

@media (max-width: 1024px) {
    .proy-slide {
        grid-template-columns: 50% 50%;
        min-height: 480px;
    }
    .proy-info { padding: 2.25rem 2rem; }
    .proy-title { font-size: 1.6rem; }
    .proy-desc { font-size: 0.9rem; }
    .proy-ghost-num { font-size: 7rem; }
}

@media (max-width: 768px) {
    .proy-slide {
        grid-template-columns: 1fr;
        grid-template-rows: 280px auto;
        min-height: auto;
    }
    .proy-info {
        padding: 2rem 1.75rem;
    }
    .proy-info::before { display: none; }
    .proy-title { font-size: 1.5rem; }
    .proy-ghost-num { font-size: 5.5rem; bottom: -0.5rem; right: 1rem; }
}

@media (max-width: 600px) {
    .proy-slide { grid-template-rows: 240px auto; }
    .proy-info { padding: 1.75rem 1.5rem; }
    .proy-title { font-size: 1.35rem; }
    .proy-counter { margin-bottom: 1rem; }
    .proy-ghost-num { font-size: 4.5rem; }
}

@media (max-width: 480px) {
    .proy-slide { grid-template-rows: 210px auto; }
    .proy-info { padding: 1.5rem 1.25rem; }
    .proy-title { font-size: 1.2rem; margin-bottom: 1rem; }
    .proy-desc { font-size: 0.88rem; line-height: 1.6; }
    .proy-tags { gap: 0.4rem; margin-top: 1.25rem; }
    .proy-tag { font-size: 0.78rem; padding: 0.5rem 0.55rem; }
    .proy-ghost-num { font-size: 4rem; }
    .proy-controls { gap: 1.25rem; margin-top: 1.5rem; }
    .proy-arrow { width: 40px; height: 40px; }
}

@media (max-width: 360px) {
    .proy-slide { grid-template-rows: 190px auto; }
    .proy-info { padding: 1.25rem 1rem; }
    .proy-tags { flex-direction: column; }
    .proy-tag { justify-content: flex-start; }
}

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


.inicio-proyectos-card {
    background: #FFFFFF; /* Color sólido - SIN gradientes */
    border-radius: 16px; /* Valor fijo - SIN variables CSS */
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra SIMPLE y LIGERA */
    border: 1px solid rgba(30, 58, 138, 0.1);
    /* ✅ OPTIMIZADO: Transición suave para evitar parpadeos */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.3s ease, 
                background-color 0.3s ease;
    position: relative;
    transform: translateY(0);
    /* ✅ OPTIMIZADO: Altura mínima ajustada para eliminar espacio muerto */
    min-height: 480px; /* ✅ REDUCIDO: De 520px a 480px para mejor proporción */
    height: auto; /* Altura automática para acomodar contenido */
    /* ✅ NUEVO: Ancho mínimo para tarjetas más anchas */
    min-width: 280px; /* ✅ NUEVO: Ancho mínimo para tarjetas más anchas */
    width: 100%; /* Usar todo el ancho disponible en la columna */
    /* ✅ OPTIMIZADO: Prevenir parpadeos en animaciones */
    will-change: transform, box-shadow, border-color, background-color;
    /* ✅ OPTIMIZADO: Aceleración por hardware para animaciones más suaves */
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ✅ ANIMACIÓN DE HOVER OPTIMIZADA - SIN PARPADEO */
.inicio-proyectos-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: #E3B23C;
    background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
    /* ✅ OPTIMIZADO: Transición más suave para evitar parpadeos */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.3s ease, 
                background 0.3s ease;
}

/* Línea dorada en el hover IDÉNTICA A SERVICIOS */
.inicio-proyectos-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #E3B23C, #FFD700);
    transform: scaleX(0);
    /* ✅ OPTIMIZADO: Transición más suave para evitar parpadeos */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 16px 16px 0 0;
}

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

/* IMAGEN del proyecto */
.project-image {
    height: 190px;
    background: #1e3a5f;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Imagen real dentro del proyecto */
.project-image .imagen-real {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ✅ OPTIMIZADO: Transición más suave para evitar parpadeos */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Placeholder de imagen cuando no hay imagen real */
.project-image .image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e3a5f 0%, #1e3a8a 100%);
    display: none; /* oculto por defecto — se muestra via JS con onerror */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    gap: 0.5rem;
}

.project-image .image-placeholder.visible {
    display: flex;
}

/* CONTENIDO del proyecto — flex column que ocupa toda la altura disponible */
.project-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ✅ NUEVO: Colores alternados optimizados para texto negro */
/* Tarjetas impares (1ª, 3ª, 5ª) - Color gris claro profesional */
.inicio-proyectos-card:nth-child(odd) .project-content {
    background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%); /* ✅ NUEVO: Gris claro profesional */
}

/* Tarjetas pares (2ª, 4ª) - Color blanco cremoso */
.inicio-proyectos-card:nth-child(even) .project-content {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%); /* ✅ NUEVO: Blanco cremoso */
}

/* Título del proyecto */
.project-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a202c; /* ✅ MANTENIDO: Color oscuro para buena legibilidad */
    margin-bottom: 0.75rem;
    line-height: 1.2;
    transition: color 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Descripción del proyecto — crece para empujar etiquetas al fondo */
.project-description {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.5;
    flex: 1;
    margin-bottom: 0;
    transition: color 0.3s ease;
}

/* Detalles del proyecto — siempre en una sola línea, anclados al fondo */
.project-details {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

/* Etiquetas de detalle — ancho igual, sin wrapping */
.detail-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #1a202c;
    transition: transform 0.3s ease, opacity 0.3s ease;
    background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%);
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-item i {
    margin-right: 0.5rem;
    color: #e3b23c;
    font-size: 0.8rem;
}

/* ✅ NUEVO: Efecto hover para los detail-item */
.inicio-proyectos-card:hover .detail-item {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%); /* ✅ NUEVO: Color naranja en hover */
    color: #ffffff; /* ✅ NUEVO: Texto blanco en hover */
    transform: translateY(-2px) scale(1.02); /* ✅ NUEVO: Elevación y escala */
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4); /* ✅ NUEVO: Sombra naranja */
    border-color: rgba(255, 255, 255, 0.5); /* ✅ NUEVO: Borde más visible */
}

.inicio-proyectos-card:hover .detail-item i {
    color: #ffffff; /* ✅ NUEVO: Icono blanco en hover */
}



/* Grid de Estadísticas Principales - REDISEÑADO PROFESIONAL */
.inicio-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* ✅ NUEVO: 4 columnas iguales sin minmax */
    gap: 1.5rem; /* Espaciado fijo sin variables CSS */
    margin: 2rem auto; /* ✅ CENTRADO: Margen automático para centrar */
    max-width: 1200px; /* ✅ LIMITADO: Ancho máximo para mejor proporción */
    padding: 0 1rem; /* ✅ PADDING: Espaciado lateral mínimo */
    /* ✅ FLEXBOX: Centrado perfecto */
    justify-content: center;
    align-items: stretch;
}

/* Tarjetas de estadísticas individuales - REDISEÑADAS PROFESIONALMENTE */
.inicio-stat-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px solid #e2e8f0;
    border-radius: 24px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    /* ✅ NUEVO: Estructura de tarjeta moderna */
    display: flex;
    flex-direction: column;
    min-height: 280px;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

/* Hover effects para las tarjetas de estadísticas */
.inicio-stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08);
    border-color: #e3b23c;
}

/* Iconos de las estadísticas */
.stat-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #e3b23c 0%, #ffd700 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem auto;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
    box-shadow: 0 4px 15px rgba(227, 178, 60, 0.2), 0 2px 8px rgba(227, 178, 60, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.9);
}

/* Hover effect para los iconos */
.inicio-stat-card:hover .stat-icon {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 8px 25px rgba(227, 178, 60, 0.3), 0 4px 15px rgba(227, 178, 60, 0.2);
}

/* Iconos FontAwesome dentro del círculo */
.stat-icon i {
    color: #ffffff;
    font-size: 1.8rem;
    transition: transform 0.3s ease;
    font-weight: 600;
}

/* Hover effect para los iconos internos */
.inicio-stat-card:hover .stat-icon i {
    transform: scale(1.1);
}

/* Números de las estadísticas - SOLO para secciones que no sean Hero */
.inicio-about-stats .stat-number,
.inicio-about-credentials .stat-number,
.inicio-about-story .stat-number {
    font-size: 3.2rem;
    font-weight: 900;
    color: #1a202c;
    margin-bottom: 0.75rem;
    letter-spacing: -0.03em;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Etiquetas de las estadísticas - SOLO para secciones que no sean Hero */
.inicio-about-stats .stat-label,
.inicio-about-credentials .stat-label,
.inicio-about-story .stat-label {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1f2937;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 1rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Descripción de las estadísticas */
.stat-description {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.5;
    margin-top: auto;
    opacity: 0.85;
    transition: color 0.3s ease;
}

/* Hover effects para elementos internos de las tarjetas */






/* Sección de credenciales - REDISEÑADA PROFESIONALMENTE */
.about-credentials-summary {
    margin: 4rem auto 2rem auto;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: 3rem 2rem;
    border-radius: 24px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 15px rgba(0, 0, 0, 0.05);
    max-width: 1200px;
}

/* Grid de credenciales dentro de la sección */
.credentials-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
    align-items: stretch;
    justify-content: center;
}

/* Items individuales de credenciales */
.credential-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 2.5rem 1.5rem;
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    border: 2px solid rgba(226, 232, 240, 0.8);
    height: 100%;
    min-height: 180px;
}

/* Hover effect para las credenciales */
.credential-summary-item:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1), 0 6px 15px rgba(0, 0, 0, 0.06);
    border-color: #e3b23c;
}

/* ==========================================
   5. BLOQUE SOBRE LAMA - ESTADÍSTICAS Y CREDENCIALES
   ========================================== */

/* ✅ ELIMINADO: .about.section-bg-amarillo ahora usa el estilo general .section-title */

/* Mantener solo estilos para párrafos descriptivos (NO títulos) */
.about.section-bg-amarillo p {
    color: #374151;
    font-weight: 500;
    line-height: 1.7;
}

/* ✅ EFECTOS ESPECIALES PARA ELEMENTOS INTERACTIVOS - SOBRE LAMA */
.about.section-bg-amarillo .btn,
.about.section-bg-amarillo button,
.about.section-bg-amarillo .card,
.about.section-bg-amarillo .feature-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about.section-bg-amarillo .btn:hover,
.about.section-bg-amarillo .card:hover,
.about.section-bg-amarillo .feature-card:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-2px);
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ✅ BOTONES ESPECÍFICOS PARA SOBRE LAMA */
.about.section-bg-amarillo .btn-primary {
    background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 6px -1px rgba(30, 58, 138, 0.3);
}

.about.section-bg-amarillo .btn-primary:hover {
    background: linear-gradient(135deg, #1E40AF 0%, #2563EB 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(30, 58, 138, 0.4);
}

.about.section-bg-amarillo .btn-secondary {
    background: rgba(255, 255, 255, 0.9);
    color: #1F2937;
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}

.about.section-bg-amarillo .btn-secondary:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}

/* Forzar selección de texto en todos los elementos de la sección */
.inicio-about-header *,
.inicio-about-story-compact *,
.inicio-about-values-compact *,
.inicio-about-stats-compact-horizontal *,
.inicio-about-credentials-horizontal * {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    cursor: text;
}

/* Header de la sección About */
.inicio-about-header {
    margin-bottom: 4rem;
    max-width: 1400px; /* Limitar solo el header para que no se extienda demasiado */
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

/* Estilos para text-center en about */
.about .text-center {
    text-align: center;
}

.about-title-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    border: 2px solid rgba(30, 64, 175, 0.2);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    margin-bottom: 3rem;
    box-shadow: 0 8px 25px rgba(30, 64, 175, 0.15);
    text-align: center;
    position: relative;
    overflow: hidden;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.about-title-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
}

.inicio-about-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 3rem; /* ✅ CONSISTENTE con otros títulos */
    font-weight: 800; /* ✅ CONSISTENTE con otros títulos */
    color: var(--primary-color); /* ✅ CONSISTENTE con otros títulos */
    text-align: center;
    margin: 0 0 1.5rem 0;
    position: relative;
    line-height: 1.2;
    z-index: 1;
}

.inicio-about-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: var(--bg-gradient-vibrant);
    border-radius: 2px;
}

.inicio-about-subtitle {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================
   LAYOUT REESTRUCTURADO DE 2 FILAS
   ========================================== */

/* FILA SUPERIOR: Historia + Valores */
.inicio-about-top-row {
    display: grid;
    grid-template-columns: 2fr 1fr; /* HISTORIA MÁS ANCHA QUE VALORES */
    gap: 3rem; /* Gap aumentado para mejor separación */
    margin-bottom: 3rem;
    align-items: center; /* CENTRADO VERTICAL para alineación perfecta */
    justify-items: stretch; /* ✅ CORREGIDO: Que los elementos ocupen todo el ancho de sus celdas */
    padding: 0 2rem; /* Menos padding para más ancho */
    width: 100%;
}

/* FILA INFERIOR: Estadísticas + CTA + Certificaciones */
.inicio-about-bottom-row {
    display: grid;
    grid-template-columns: 1.3fr 2fr 1.3fr; /* MÁS ANCHO: Estadísticas - CTA - Certificaciones */
    gap: 2.5rem; /* Menos gap para más espacio a columnas */
    margin-bottom: 2rem;
    align-items: center; /* Centrar verticalmente */
    padding: 0 2rem; /* Menos padding para más ancho */
    width: 100%;
}

/* ==========================================
   SECCIONES DE LA FILA SUPERIOR
   ========================================== */

/* Historia (Izquierda) */
.about-historia-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Carrusel (Centro) */
.about-carousel-section {
    display: flex;
    align-items: stretch; /* CAMBIADO para alineación perfecta */
    height: 100%;
    position: relative; /* NECESARIO para posicionar controles e indicadores */
}

/* Estilos para el carrusel horizontal */
.carousel-container-horizontal {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
    box-shadow: 0 20px 40px rgba(30, 64, 175, 0.15), 
                0 8px 25px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border: 3px solid rgba(30, 64, 175, 0.4);
    border-radius: 24px;
    min-height: 650px;
}

.carousel-slides-horizontal {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide-horizontal {
    min-width: 100%;
    display: none;
}

.carousel-slide-horizontal.active {
    display: block;
}

.slide-content-horizontal {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr;
    gap: 2rem;
    height: 100%;
    padding: 1.5rem;
    min-height: 650px;
    align-items: stretch;
}


.slide-text-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.5rem 0;
    height: 100%;
}

.slide-title-horizontal {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.slide-description-horizontal {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.2rem;
    text-align: left;
}

.slide-features {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 1.5rem;
    flex: 1;
    justify-content: flex-start;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    padding: 1rem;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-radius: 12px;
    border: 1px solid rgba(30, 64, 175, 0.1);
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.05);
    transition: all 0.3s ease;
}

.feature-item i {
    color: var(--primary-color);
    width: 16px;
}

.feature-item span {
    font-weight: 500;
    color: var(--text-primary);
}

.feature-item:hover {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%);
    border-color: rgba(30, 64, 175, 0.2);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.1);
    transform: translateX(5px) translateY(-2px);
}

.slide-image-section {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.slide-image-horizontal {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    width: 100%;
    flex: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(248, 250, 252, 0.05) 100%);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 2px solid rgba(30, 64, 175, 0.1);
}

.slide-image-horizontal img.imagen-real {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.3s ease;
}

.slide-image-horizontal:hover img.imagen-real {
    transform: scale(1.05);
}

/* Ocultar placeholder cuando hay imagen real */
.slide-image-horizontal:has(.imagen-real) .image-placeholder-horizontal {
    display: none;
}


.image-placeholder-horizontal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    border: 2px dashed rgba(30, 58, 138, 0.3);
    height: 100%;
    width: 100%;
    min-height: 350px;
    position: absolute;
    top: 0;
    left: 0;
}

.carousel-controls-horizontal {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}

.carousel-btn-horizontal {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(30, 58, 138, 0.2);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: var(--primary-color);
    font-size: 1.1rem;
}

.carousel-btn-horizontal:hover {
    background: linear-gradient(135deg, #E3B23C 0%, #FFD700 100%);
    color: #1E3A8A;
    border-color: #E3B23C;
    transform: translateY(-50%);
    box-shadow: 0 8px 20px rgba(227, 178, 60, 0.5);
}

.carousel-btn-horizontal:active {
    background: linear-gradient(135deg, #D4A017 0%, #E6C200 100%);
    color: #1E3A8A;
    border-color: #D4A017;
    transform: translateY(-50%);
    box-shadow: 0 4px 12px rgba(227, 178, 60, 0.3);
}

.carousel-btn-horizontal.prev {
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.carousel-btn-horizontal.next {
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.carousel-indicators-horizontal {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.9) 0%, rgba(59, 130, 246, 0.8) 100%);
    border-radius: 20px;
    box-shadow: 0 6px 15px rgba(30, 64, 175, 0.3),
                0 2px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(227, 178, 60, 0.3);
    backdrop-filter: blur(10px);
}

.indicator-horizontal {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.indicator-horizontal.active {
    background: linear-gradient(135deg, #E3B23C 0%, #FFD700 100%);
    border-color: #E3B23C;
    transform: scale(1.4);
    box-shadow: 0 4px 12px rgba(227, 178, 60, 0.4),
                0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Valores (Derecha) */
.about-valores-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Estilos para valores */
.inicio-about-values-compact {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%; /* OCUPAR TODA LA ALTURA DISPONIBLE */
    min-height: 500px; /* MISMAS ALTURA QUE HISTORIA */
}

.values-title-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    border: 2px solid rgba(30, 64, 175, 0.2);
    border-radius: 15px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.values-title-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
}

.values-title-compact {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.3;
    position: relative;
    z-index: 1;
}


.value-item-compact {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    transition: transform 0.3s ease;
    border: 1px solid rgba(217, 119, 6, 0.1);
    min-height: 80px;
    box-shadow: 0 5px 15px rgba(217, 119, 6, 0.1);
    will-change: transform;
}

.value-item-compact:hover {
    transform: translateX(-3px);
}

.value-icon-small {
    width: 50px;
    height: 50px;
    background: var(--bg-gradient-vibrant);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(227, 178, 60, 0.4);
}

.value-icon-small i {
    font-size: 1.4rem;
    color: white;
}

.value-content-small h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.value-content-small p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
    font-weight: 400;
}

/* Estilos para estadísticas */

/* Estilos para CTA */

/* Estilos para certificaciones */

/* Estilos para image-coming-soon */
.image-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    border: none;
    width: 100%;
    min-height: 160px;
    justify-content: center;
}

.image-coming-soon i {
    font-size: 2.5rem;
    color: var(--primary-color);
    opacity: 0.7;
}

.image-coming-soon span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
}

/* ==========================================
   SECCIONES DE LA FILA INFERIOR
   ========================================== */

/* Estadísticas Horizontales (Izquierda) */
.about-stats-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ✅ ESTILOS BASE PARA ESTADÍSTICAS - DESKTOP */
.inicio-about-stats-compact-horizontal {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    border: 2px solid rgba(30, 64, 175, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 12px 30px rgba(30, 64, 175, 0.2);
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.inicio-about-stats-compact-horizontal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.02) 0%, rgba(227, 178, 60, 0.02) 100%);
    pointer-events: none;
}

.stats-horizontal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    row-gap: 1.5rem;
    margin-top: 1.5rem;
    position: relative;
    z-index: 1;
}

.stat-horizontal {
    background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
    border: 1px solid rgba(30, 64, 175, 0.2);
    border-radius: 14px;
    padding: 2rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.stat-horizontal:hover {
    transform: translateY(-4px);
    /* border-color, background y box-shadow eliminados — evitan repaint */
}

.stat-horizontal .stat-number {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #1E40AF;
    line-height: 1;
    margin-bottom: 0.5rem;
    display: block;
}

.stat-horizontal .stat-number-small {
    font-size: 1.6rem;
    line-height: 1.2;
}

.stat-horizontal .stat-label {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}


/* Título de la sección Sobre LAMA */
.about-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 4rem; /* ✅ TAMAÑO FIJO para desktop */
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: var(--spacing-lg);
    text-align: center;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* CTA del bloque Sobre LAMA */
.about-cta {
    text-align: center;
    margin-top: 3rem;
}

.about-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
}

/* ==========================================
   ESTILOS DE HISTORIA Y VALORES
   ========================================== */





/* ==========================================
   6. ESTILOS BASE - TÍTULOS, BOTONES Y ELEMENTOS COMUNES
   ========================================== */

/* ==========================================
   6.1. ESTILOS BASE PARA TÍTULOS DE SECCIÓN
   ========================================== */

/* Títulos de sección principales */
.section-title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 1rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Subtítulos de sección base */
.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
        text-align: center;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Container base */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Section header base */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

/* Scroll animate base */
.scroll-animate {
    opacity: 1;
    transition: opacity 0.3s ease;
}


.btn.btn-primary.btn-full {
    background: linear-gradient(135deg, var(--primary-color) 0%, #2563EB 100%);
    color: white;
    border: none;
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    font-size: 1.1rem;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;

    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
}

.btn.btn-primary.btn-full::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.btn.btn-primary.btn-full:hover {
    background: linear-gradient(135deg, #2563EB 0%, var(--primary-color) 100%);
    color: white; /* ✅ AGREGADO: Color de texto blanco para contraste */
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.4);
}

.btn.btn-primary.btn-full:hover::before {
    left: 100%;
}

.btn.btn-primary.btn-full i {
    margin-left: var(--spacing-sm);
    transition: transform 0.3s ease;
}

.btn.btn-primary.btn-full:hover i {
    transform: translateX(5px);
}



/* ==========================================
   6.2. ESTILOS BASE PARA BOTONES - APLICABLES EN TODA LA PÁGINA
   ========================================== */

/* Estilos base para todos los botones */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-normal);
    cursor: pointer;
    font-size: 1rem;
    font-family: var(--font-primary);
}

/* Botón primario */
.btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background: var(--accent-color);
    color: #1A202C; /* ✅ AGREGADO: Color de texto oscuro para contraste */
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-card-hover);
}

/* Botón secundario */
.btn-secondary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-card-hover);
}

/* ✅ ESPECÍFICO: Botón primario en CTA con mejor contraste */
.about-cta-section .btn-primary {
    background: var(--primary-color);
    color: white;
    border: 2px solid var(--primary-color);
}

.about-cta-section .btn-primary:hover {
    background: var(--accent-color);
    color: white; /* ✅ CORREGIDO: Mantener texto blanco para mejor contraste */
    border-color: var(--accent-color);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(227, 178, 60, 0.4);
}

/* ✅ ESPECÍFICO: Botón secundario en CTA con mejor contraste */
.about-cta-section .btn-secondary:hover {
    background: #1A202C; /* ✅ Fondo oscuro para mejor contraste */
    color: white;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(26, 32, 44, 0.4);
}

/* Botón de ancho completo */
.btn-full {
    width: 100%;
    justify-content: center;
}



/* ==========================================
   FIN DEL BLOQUE 6: ESTILOS BASE - BOTONES
   ========================================== */

/* ==========================================
   7. BLOQUE CONTACTO - "¿Listo para tu próximo proyecto?"
   ========================================== */

/* 🎯 SECCIÓN CONTACTO - CONTENEDOR PRINCIPAL */
.contact {
    padding: 6rem 0;
    /* ✅ CAMBIADO: Fondo con imagen en lugar de azul */
    background: url('../assets/lama_logo2.jpg') center/cover no-repeat;
    position: relative;
    overflow: hidden;
}

/* ✅ NUEVO: Overlay oscuro para mejorar legibilidad */
.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(30, 58, 138, 0.4) 100%);
    z-index: 1;
    pointer-events: none;
}

/* ✅ PATRÓN ADICIONAL PARA CONTACTO - INDEPENDIENTE */
.contact::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.4;
    z-index: 2;
    pointer-events: none;
}

.contact .container {
    position: relative;
    z-index: 10; /* ✅ AUMENTADO: Para que esté por encima de todos los pseudo-elementos */
}

/* 🎯 DISEÑO GRID DEL CONTACTO */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

/* 🎯 INFORMACIÓN DE CONTACTO */
.contact-info {
    color: white;
}

.contact-title {
        font-family: 'Poppins', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.contact-description {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 3rem;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 🎯 DETALLES DE CONTACTO */
.contact-details {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.contact-item {
        display: flex;
        align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.2);
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.contact-icon {
        width: 50px;
        height: 50px;
    background: linear-gradient(135deg, #E3B23C 0%, #F59E0B 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    box-shadow: 0 4px 15px rgba(227, 178, 60, 0.3);
        flex-shrink: 0;
}

.contact-icon i {
    font-size: 1.2rem;
    color: #1A202C;
}

.contact-text h4 {
        font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 0.25rem;
}

.contact-text p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* 🎯 ENLACES DE CONTACTO */
.contact .phone-link,
.contact .email-link {
    color: #E3B23C;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

/* Nombres junto a los teléfonos (Ing. Luis Alberto, etc.) */
.phone-owner {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    font-style: italic;
}

.contact .phone-link:hover,
.contact .email-link:hover {
    color: #F59E0B;
    text-shadow: 0 2px 4px rgba(227, 178, 60, 0.3);
}

/* 🎯 REDES SOCIALES */
.contact-social {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.social-link {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    color: #FFFFFF;
        text-decoration: none;
        transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    }

.social-link:hover {
    background: #E3B23C;
    color: #1A202C;
        transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(227, 178, 60, 0.4);
}

/* 🎯 FORMULARIO DE CONTACTO - DESKTOP */
.contact-form-desktop {
    background: rgba(255, 255, 255, 0.95);
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 🎯 FORMULARIO DE CONTACTO - MÓVIL */
.contact-form-mobile {
    display: none; /* Oculto por defecto en desktop */
    background: rgba(255, 255, 255, 0.95);
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin: 2rem 0;
}

.form {
    display: grid;
    gap: 1.5rem;
}

.form-group {
        display: flex;
        flex-direction: column;
}

/* Ambos formularios tienen fondo blanco — labels oscuros en los dos */
.contact-form-mobile .form-group label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.contact-form-desktop .form-group label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 1rem;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
        transition: all 0.3s ease;
    background: #FFFFFF;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #1E3A8A;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
        transform: translateY(-2px);
    }

.form-group textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}

/* 🎯 BOTÓN ENVIAR MENSAJE */
.contact-form-desktop .btn,
.contact-form-mobile .btn {
    background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
    color: white;
    border: none;
    padding: 1.2rem 2rem;
    border-radius: 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1rem;
    width: 100%;
}


.contact-form-desktop .btn:hover,
.contact-form-mobile .btn:hover {
    background: linear-gradient(135deg, #E3B23C 0%, #F59E0B 100%);
    color: #1A202C;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(227, 178, 60, 0.4);
}

.contact-form-desktop .btn i,
.contact-form-mobile .btn i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.contact-form-desktop .btn:hover i,
.contact-form-mobile .btn:hover i {
    transform: translateX(5px);
}



/* ========================================== 
   FIN DEL BLOQUE 7: CONTACTO
   ========================================== */








/* ==========================================
   8. BLOQUE CLIENTES - "Nuestros Clientes"
   ========================================== */

/* ========================================
   CARRUSEL DE CLIENTES - DISEÑO PROFESIONAL
   ======================================== */

/* ========================================
   SECCIÓN DE CLIENTES - NUEVO DISEÑO CON IMAGEN DE FONDO
   ✅ REEMPLAZADO: Fondo con cuadros y gradientes por imagen difuminada
   ✅ OPTIMIZADO: Mejor rendimiento sin elementos costosos
   ✅ RESPONSIVE: Imagen adaptada para móvil, tablet y desktop
   ======================================== */

/* Sección de clientes con imagen de fondo */
.clientes {
    position: relative;
    overflow: hidden;
    padding: 4rem 0;
    background: linear-gradient(135deg, #0b1a3e 0%, #1E3A8A 50%, #122a6e 100%);
}

/* Gradientes decorativos estáticos — sin repeating-radial-gradient (caro) */
.clientes::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 70% at 10% 50%, rgba(227,178,60,0.06) 0%, transparent 55%),
        radial-gradient(ellipse 50% 60% at 90% 40%, rgba(59,130,246,0.07) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ── Tiras marquee de logos — solo transform, cero repaint ──
   @keyframes anima únicamente transform → compositor GPU → 60fps garantizado */

.clientes-logos-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3rem;
    overflow: hidden;
}

.clb-strip {
    overflow: hidden;
    width: 100%;
}

.clb-track {
    display: flex;
    align-items: center;
    gap: 4rem;
    width: max-content;
    will-change: transform;
}

.clb-track--left {
    animation: clb-slide-left 30s linear infinite;
}

.clb-track--right {
    animation: clb-slide-right 35s linear infinite;
}

@keyframes clb-slide-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes clb-slide-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Tarjeta de vidrio — replica exacta del canvas original */
.clb-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    min-width: 130px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    opacity: 0.82;
    flex-shrink: 0;
}

.clb-img {
    height: 50px;
    width: 100px;
    object-fit: contain;
}

.clb-name {
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-primary, 'Inter', sans-serif);
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}

@media (max-width: 768px) {
    .clientes-logos-bg { gap: 2rem; }
    .clb-track { gap: 2rem; }
    .clb-card { min-width: 110px; padding: 10px 12px; }
    .clb-img { height: 40px; width: 80px; }
}

@media (max-width: 480px) {
    .clientes-logos-bg { gap: 1.5rem; }
    .clb-track { gap: 1.5rem; }
    .clb-card { min-width: 90px; padding: 8px 10px; }
    .clb-img { height: 32px; width: 65px; }
    .clb-name { font-size: 9px; }
}

/* Imagen de fondo difuminada (fallback) */
.clientes-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('assets/empresa/oficinas-lama.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(3px) brightness(0.7);
    opacity: 0.8;
    z-index: 0;
}

/* Fallback si no hay imagen */
.clientes-bg-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    opacity: 0.9;
    z-index: 1;
}

.clientes .container {
    position: relative;
    z-index: 2;
}

/* Contenedor principal del carrusel - OPTIMIZADO PARA RENDIMIENTO */
.inicio-clientes-carousel-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 2rem auto; /* ✅ NUEVO: Margen inferior para separar de los indicadores */
    padding: 2rem 80px; /* ✅ CORREGIDO: Padding lateral para dar espacio a las flechas (60px + 20px margen) */
    overflow: visible; /* ✅ CORREGIDO: Cambiado de hidden a visible para mostrar las flechas */
    background: rgba(255, 255, 255, 0.98);
    border-radius: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 2;
}

/* Carrusel principal - OPTIMIZADO PARA RENDIMIENTO */
.inicio-clientes-carousel {
    display: flex;
    transition: transform 0.3s ease-out;
    width: 100%;
    position: relative;
    will-change: transform;
    overflow: hidden;
}

.inicio-clientes-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.8) 0%, 
        transparent 10%, 
        transparent 90%, 
        rgba(255, 255, 255, 0.8) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Slides individuales - ANCHURA FIJA Y CONSISTENTE */
.inicio-clientes-slide {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%; /* ✅ ANCHURA FIJA */
    min-width: 100%; /* ✅ ANCHURA MÍNIMA */
    max-width: 100%; /* ✅ ANCHURA MÁXIMA */
    padding: 0 1rem;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    z-index: 1;
}

/* Slide activo */
.inicio-clientes-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative; /* ✅ POSITION RELATIVE PARA FLUJO NORMAL */
    z-index: 2; /* ✅ Z-INDEX MAYOR PARA ESTAR ARRIBA */
}

/* ELIMINADO: hover que causaba problemas de rendimiento */

/* Tarjetas de cliente destacadas */
.inicio-cliente-card-featured {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255,255,255,0.5) inset;
    transition: transform 0.3s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.6);
    position: relative;
    overflow: hidden;
    will-change: transform;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ✅ NUEVO: Efecto de brillo sutil en las tarjetas */
.inicio-cliente-card-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Sombra elevada pre-pintada — solo se anima opacity (composited, sin repaint) */
.inicio-cliente-card-featured::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 0.3s ease-out;
    pointer-events: none;
    z-index: 0;
}

.inicio-cliente-card-featured:hover {
    transform: translateY(-8px) scale(1.02);
}

.inicio-cliente-card-featured:hover::after {
    opacity: 1;
}

.inicio-cliente-card-featured:hover .cliente-logo-container {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    transform: scale(1.05);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Contenedor del logo - OPTIMIZADO PARA IMÁGENES RECORTADAS */
.cliente-logo-container {
    position: relative;
    width: 100%;
    height: 170px;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 2px solid rgba(14, 165, 233, 0.2);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    will-change: transform;
    
    /* ✅ FLEX SHRINK 0 PARA MANTENER TAMAÑO */
    flex-shrink: 0;
}

/* ✅ NUEVO: Efecto de brillo en el contenedor de logos */
.cliente-logo-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.4) 0%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.2) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ELIMINADO: pseudo-elemento complejo que causaba problemas de rendimiento */

/* Imagen del cliente */
.cliente-imagen-featured {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease-out;
    position: relative;
    z-index: 2;
    will-change: transform;
}

.inicio-cliente-card-featured:hover .cliente-imagen-featured {
    transform: scale(1.05);
}

/* ✅ INFORMACIÓN DEL CLIENTE - ALTURA AUMENTADA (ELIMINADO DUPLICADO) */

/* ✅ NOMBRE DEL CLIENTE - MEJOR ORGANIZADO (ELIMINADO DUPLICADO) */

/* ✅ CATEGORÍA DEL CLIENTE - MEJOR PRESENTACIÓN (ELIMINADO DUPLICADO) */



/* Placeholder para fallback */
.cliente-placeholder-featured {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 0.9rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.cliente-placeholder-featured i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #adb5bd;
    transition: all 0.3s ease;
}

.inicio-cliente-card-featured:hover .cliente-placeholder-featured i {
    color: #007bff;
    transform: scale(1.1);
}

.inicio-cliente-card-featured:hover .cliente-placeholder-featured {
    color: #495057;
}

/* Información del cliente */
.cliente-info-featured {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0.5rem;
    border-radius: 10px;
}

.cliente-info-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.8) 0%, 
        rgba(248, 249, 250, 0.6) 100%);
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.inicio-cliente-card-featured:hover .cliente-info-featured::before {
    opacity: 1;
}

.cliente-nombre-featured {
    font-size: 1.3rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 0.8rem;
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.cliente-nombre-featured::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.inicio-cliente-card-featured:hover .cliente-nombre-featured {
    color: #0f172a;
    transform: translateY(-1px);
}

.inicio-cliente-card-featured:hover .cliente-nombre-featured::after {
    width: 100%;
}

.cliente-categoria-featured {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 25px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 1rem;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ✅ NUEVO: Colores específicos por tipo de industria */
.cliente-categoria-featured[data-industry="industrial"] {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
}

.cliente-categoria-featured[data-industry="comercial"] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

.cliente-categoria-featured[data-industry="vivienda"] {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
}

.cliente-categoria-featured[data-industry="construccion"] {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.4);
}

.cliente-categoria-featured[data-industry="gobierno"] {
    background: linear-gradient(135deg, #1f2937, #111827);
    box-shadow: 0 6px 20px rgba(31, 41, 55, 0.4);
}

.cliente-categoria-featured[data-industry="financiero"] {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 6px 20px rgba(8, 145, 178, 0.4);
}

.cliente-categoria-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent);
    transition: left 0.5s ease;
}

.inicio-cliente-card-featured:hover .cliente-categoria-featured::before {
    left: 100%;
}







/* Controles del carrusel */
.inicio-clientes-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
    padding: 0 1rem;
}

.inicio-clientes-controls::before,
.inicio-clientes-controls::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 255, 255, 0.7) 50%, 
        transparent 100%);
    pointer-events: none;
    z-index: -1;
}

.inicio-clientes-controls::before {
    left: 0;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 255, 255, 0.7) 50%, 
        transparent 100%);
}

.inicio-clientes-controls::after {
    right: 0;
    background: linear-gradient(270deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 255, 255, 0.7) 50%, 
        transparent 100%);
}

.inicio-clientes-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.inicio-clientes-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent);
    transition: left 0.5s ease;
}

.inicio-clientes-btn:hover::before {
    left: 100%;
}

.inicio-clientes-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    background: linear-gradient(135deg, #0056b3, #004085);
}

.inicio-clientes-btn:active {
    transform: scale(0.95);
}

.inicio-clientes-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(1);
}

/* Estilos específicos para botones prev y next */
.inicio-clientes-prev {
    left: 0; /* ✅ CORREGIDO: Cambiado de -60px a 0 para que quede dentro del contenedor */
}

.inicio-clientes-next {
    right: 0; /* ✅ CORREGIDO: Cambiado de -60px a 0 para que quede dentro del contenedor */
}

/* Header de la sección mejorado - OPTIMIZADO PARA NUEVO FONDO */
.clientes .section-header {
    margin-bottom: 3rem;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    border: 2px solid rgba(255, 255, 255, 0.6);
}

.clientes .section-header::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

/* ✅ ELIMINADO: .clientes .section-title ahora usa el estilo general */

.clientes .section-subtitle {
    font-size: 1.1rem;
    color: #2d3748;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* Indicadores del carrusel */
.inicio-clientes-indicators {
    display: flex;
    justify-content: center;
    gap: 0.8rem; /* ✅ AUMENTADO: Más separación entre círculos */
    margin-top: 4.5rem; /* ✅ AUMENTADO: Mucho más separación del carrusel (de 3rem a 4.5rem) */
    padding: 1.5rem 2rem; /* ✅ AUMENTADO: Más padding para mejor respiración */
    background: rgba(255, 255, 255, 0.97);
    border-radius: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative; /* ✅ NUEVO: Para efectos adicionales */
}

/* ✅ NUEVO: Efecto de brillo sutil en el contenedor de indicadores */
.inicio-clientes-indicators::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.2) 0%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.1) 100%);
    border-radius: 30px;
    pointer-events: none;
    z-index: 1;
}

.inicio-clientes-indicator {
    width: 14px; /* ✅ AUMENTADO: Más grande para mejor visibilidad */
    height: 14px; /* ✅ AUMENTADO: Más grande para mejor visibilidad */
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1); /* ✅ MEJORADO: Gradiente sutil */
    cursor: pointer;
    transition: all 0.4s ease; /* ✅ MEJORADO: Transición más suave */
    border: 2px solid rgba(255, 255, 255, 0.5); /* ✅ MEJORADO: Borde sutil */
    position: relative;
    overflow: hidden;
    z-index: 2; /* ✅ NUEVO: Para estar sobre el efecto de brillo */
}

.inicio-clientes-indicator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8); /* ✅ MEJORADO: Gradiente azul */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease; /* ✅ MEJORADO: Transición más suave */
}

.inicio-clientes-indicator.active::before {
    width: 100%;
    height: 100%;
}

.inicio-clientes-indicator:hover {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8); /* ✅ MEJORADO: Gradiente en hover */
    transform: scale(1.3); /* ✅ AUMENTADO: Más escala en hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* ✅ NUEVO: Sombra en hover */
}

.inicio-clientes-indicator.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8); /* ✅ MEJORADO: Gradiente activo */
    transform: scale(1.4); /* ✅ AUMENTADO: Más escala cuando está activo */
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); /* ✅ NUEVO: Sombra azul cuando está activo */
    border-color: rgba(59, 130, 246, 0.3); /* ✅ NUEVO: Borde azul cuando está activo */
}



.inicio-cliente-card-featured:nth-child(1) { animation-delay: 0.1s; }
.inicio-cliente-card-featured:nth-child(2) { animation-delay: 0.2s; }
.inicio-cliente-card-featured:nth-child(3) { animation-delay: 0.3s; }


/* ✅ ELIMINADO: Estilos duplicados de hover - ya están definidos arriba */





/* Mejoras de accesibilidad */
.inicio-clientes-btn:focus {
    outline: 3px solid rgba(0, 123, 255, 0.5);
    outline-offset: 2px;
}

.inicio-clientes-indicator:focus {
    outline: 2px solid rgba(0, 123, 255, 0.5);
    outline-offset: 2px;
}

/* Estados de carga */
.inicio-clientes-carousel.loading {
    opacity: 0.7;
    pointer-events: none;
}

.inicio-clientes-carousel.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    /* ✅ ANIMACIÓN MOVIDA ARRIBA */
}

/* ========================================
   ESTADÍSTICAS DE CLIENTES - DISEÑO MEJORADO
   ======================================== */

.clientes-cta {
    margin-top: 3rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.clientes-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, 
        rgba(0, 123, 255, 0.05) 0%, 
        transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

.clientes-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 2rem;
    list-style: none;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fb 50%, #dff0f4 100%);
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* ==========================================
   ESTILOS DE LA SECCIÓN DE CLIENTES - TOTALMENTE INDEPENDIENTES DEL HERO
   ✅ OPTIMIZADO PARA RENDIMIENTO: 60 FPS estables
   ✅ ELIMINADOS: backdrop-filter, gradientes complejos, transiciones largas
   ✅ SIMPLIFICADOS: efectos hover, pseudo-elementos complejos
   ========================================== */

/* ESTILOS ESPECÍFICOS PARA LA SECCIÓN DE CLIENTES - OPTIMIZADOS PARA IMAGEN DE FONDO */
.clientes .stat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.2rem 1.8rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.6);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    font-size: 1.1rem;
    color: #1a365d;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.clientes .stat-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(0, 123, 255, 0.1), 
        transparent);
    transition: left 0.5s ease;
}

.clientes .stat-item:hover::before {
    left: 100%;
}

.clientes .stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-color: #007bff;
}

.clientes .stat-item i {
    font-size: 1.5rem;
    color: #007bff;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.clientes .stat-item i::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(0, 123, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    z-index: -1;
}

.clientes .stat-item:hover i::before {
    width: 40px;
    height: 40px;
}

.clientes .stat-item:hover i {
    transform: scale(1.2);
}

.clientes .stat-item strong {
    color: #007bff;
    font-weight: 700;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.clientes .stat-item strong::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #007bff, #28a745);
    transition: width 0.3s ease;
}

.clientes .stat-item:hover strong::after {
    width: 100%;
}

/* ==========================================
   FIN DEL BLOQUE 8: CLIENTES
   ========================================== */

/* ==========================================
   MEDIA QUERY 360px - BLOQUE HERO
   Optimización específica para móviles pequeños
   ========================================== */

@media (max-width: 360px) {
/* ==========================================
   BREAKPOINT 360px - INICIO DE BLOQUE 2 (SERVICIOS)
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE 2 (SERVICIOS) - CONTENEDOR PRINCIPAL
       ========================================== */
       .servicios-slider-container,
       .inicio-servicios-slider {
           margin-top: 1rem;
           width: 100vw;
           max-width: 100vw;
           padding: 0;
           overflow: hidden;
           margin-left: calc(-50vw + 50%);
           margin-right: calc(-50vw + 50%);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (SERVICIOS) - CONTENEDOR PRINCIPAL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CARRUSEL) - SLIDER PRINCIPAL
          ========================================== */
       .servicios-slider {
           display: flex;
           align-items: center;
           padding: 1.5rem 0; /* ✅ PADDING REDUCIDO para 360px */
           min-height: 480px; /* ✅ ALTURA REDUCIDA para eliminar espacio muerto */
           overflow: hidden;
           position: relative;
           width: 100vw;
           max-width: 100vw;
           
           /* Variables CSS para controlar difuminado */
           --difuminado-izquierdo: hidden;
           --difuminado-derecho: hidden;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CARRUSEL) - SLIDER PRINCIPAL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (DIFUMINADO) - GRADIENTES LATERALES
          ========================================== */
       /* DIFUMINADO INTELIGENTE - Más ancho para 360px */
       .servicios-slider::before,
       .servicios-slider::after {
           content: '';
           position: absolute;
           top: 0;
           bottom: 0;
           width: 30px; /* Más ancho para 360px */
           z-index: 10;
           pointer-events: none;
           transition: opacity 0.5s ease;
       }
   
       .servicios-slider::before {
           left: 0;
           background: linear-gradient(to right, rgba(30, 58, 138, 1) 0%, rgba(30, 58, 138, 0.8) 40%, rgba(30, 58, 138, 0.3) 80%, transparent 100%);
           opacity: var(--difuminado-izquierdo, 0);
           visibility: var(--difuminado-izquierdo, hidden);
       }
   
       .servicios-slider::after {
           right: 0;
           background: linear-gradient(to left, rgba(30, 58, 138, 1) 0%, rgba(30, 58, 138, 0.8) 40%, rgba(30, 58, 138, 0.3) 80%, transparent 100%);
           opacity: var(--difuminado-derecho, 0);
           visibility: var(--difuminado-derecho, hidden);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (DIFUMINADO) - GRADIENTES LATERALES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CONTENEDOR INTERNO) - WRAPPER DE SLIDES
          ========================================== */
       .servicios-slider-inner {
           display: flex;
           align-items: center;
           transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           width: max-content;
           padding: 0 0.5rem; /* ✅ PADDING MÍNIMO para 360px - SOBRESCRIBE inicio.css */
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CONTENEDOR INTERNO) - WRAPPER DE SLIDES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (TARJETAS) - CARDS DE SERVICIOS
          ========================================== */
       /* TARJETAS DE SERVICIOS - UNO EN UNO PARA 360px - DIMENSIONES OPTIMIZADAS */
       .servicio-item {
           width: 320px; /* ✅ ANCHO OPTIMIZADO para 360px */
           min-width: 320px;
           height: 480px; /* ✅ ALTURA REDUCIDA para eliminar espacio muerto */
           min-height: 480px;
           max-height: 480px;
           background: white;
           border-radius: 12px; /* ✅ BORDER RADIUS REDUCIDO */
           box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* ✅ SOMBRA MÁS SUAVE */
           border: 2px solid rgba(30, 58, 138, 0.15);
           flex-shrink: 0;
           transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           display: block;
           margin: 0 0.5rem; /* ✅ MARGEN MÍNIMO para 360px */
           position: relative;
           overflow: hidden;
       }
   
       /* COLORES ALTERNADOS PARA CADA TARJETA */
       .servicio-item:nth-child(odd) {
           background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
           border-color: rgba(30, 58, 138, 0.2);
       }
   
       .servicio-item:nth-child(even) {
           background: linear-gradient(135deg, #F0F4FF 0%, #E6F0FF 100%);
           border-color: rgba(30, 58, 138, 0.25);
       }
   
       /* ANIMACIONES PROFESIONALES AL HOVER */
       .servicio-item:hover {
           transform: translateY(-6px) scale(1.02); /* ✅ ANIMACIÓN SUAVE para 360px */
           box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); /* ✅ SOMBRA SUAVE */
           border-color: #E3B23C;
           background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
       }
   
       .servicio-item::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           height: 4px; /* ✅ ALTURA REDUCIDA */
           background: linear-gradient(90deg, #E3B23C, #FFD700, #E3B23C);
           transform: scaleX(0);
           transition: transform 0.4s ease;
           z-index: 5;
       }
   
       .servicio-item:hover::before {
           transform: scaleX(1);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (TARJETAS) - CARDS DE SERVICIOS
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CONTENIDO) - TEXTO E IMÁGENES
          ========================================== */
       /* Contenido de las tarjetas - DISTRIBUCIÓN VERTICAL OPTIMIZADA */
       .servicio-contenido {
           display: flex;
           flex-direction: column; /* ✅ VERTICAL: texto arriba, imagen abajo */
           height: 480px; /* ✅ ALTURA REDUCIDA para eliminar espacio muerto */
           min-height: 480px;
           max-height: 480px;
           position: relative;
       }
   
       /* Texto arriba - ALTURA OPTIMIZADA PARA 360px */
       .servicio-texto {
           flex: 1; /* ✅ FLEXIBLE para ocupar espacio disponible */
           min-height: 200px; /* ✅ ALTURA MÍNIMA REDUCIDA */
           width: 100%;
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
           padding: 1.2rem; /* ✅ PADDING REDUCIDO para 360px */
           padding-bottom: 0.8rem;
           position: relative;
           box-sizing: border-box;
       }
   
       .servicio-titulo {
           font-size: 1.3rem; /* ✅ TAMAÑO OPTIMIZADO para 360px */
           font-weight: 700;
           color: #1E3A8A;
           margin-bottom: 0.8rem; /* ✅ MARGEN REDUCIDO */
           line-height: 1.3; /* ✅ LINE-HEIGHT COMPACTO */
           text-align: left;
           transition: all 0.4s ease;
       }
   
       .servicio-item:hover .servicio-titulo {
           color: #E3B23C;
           transform: translateY(-2px);
       }
   
       .servicio-descripcion {
           color: #2D3748;
           line-height: 1.5; /* ✅ LINE-HEIGHT COMPACTO */
           margin-bottom: 0;
           font-weight: 500;
           font-size: 0.9rem; /* ✅ TAMAÑO REDUCIDO para 360px */
           text-align: left;
           flex-grow: 1; /* ✅ Ocupar espacio disponible */
           display: flex;
           align-items: flex-start;
       }
   
       .servicio-item:hover .servicio-descripcion {
           color: #1A202C;
       }
   
       /* Botón Saber más información - OCULTO EN 360px PARA MEJOR UX */
       .servicio-enlace {
           display: none; /* ✅ OCULTO en 360px - mejor UX */
       }

       /* TAP HINT - Indicador de navegación en móvil 360px */
       .servicio-item::after {
           content: 'Toca para más información →';
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           background: rgba(30, 58, 138, 0.88);
           color: white;
           font-size: 0.75rem;
           font-weight: 600;
           text-align: center;
           padding: 0.5rem 1rem;
           z-index: 10;
           letter-spacing: 0.02em;
           font-family: var(--font-primary);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CONTENIDO) - TEXTO E IMÁGENES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (IMÁGENES) - PLACEHOLDERS Y FALLBACKS
          ========================================== */
       /* Imagen abajo - ALTURA OPTIMIZADA PARA 360px */
       .servicio-imagen {
           flex: none;
           height: 280px;
           min-height: 280px;
           max-height: 280px;
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: center;
           border-top: 1px solid rgba(30, 58, 138, 0.1);
           position: relative;
           overflow: hidden;
           transition: all 0.5s ease;
           box-sizing: border-box;
       }
   
       /* COLORES ALTERNADOS PARA LAS IMÁGENES */
       .servicio-item:nth-child(odd) .servicio-imagen {
           background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
           box-shadow: inset 0 0 20px rgba(227, 178, 60, 0.15);
       }
   
       .servicio-item:nth-child(even) .servicio-imagen {
           background: linear-gradient(135deg, #E6F0FF 0%, #B3D9FF 100%);
           box-shadow: inset 0 0 20px rgba(30, 58, 138, 0.15);
       }
   
       .servicio-item:hover .servicio-imagen {
           background: linear-gradient(135deg, #FFE082 0%, #FFD700 100%);
           box-shadow: inset 0 0 25px rgba(227, 178, 60, 0.25);
           transform: scale(1.05);
       }
   
       /* Placeholder de imagen - VISIBLE COMO EN PC */
       .imagen-placeholder {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           text-align: center;
           color: #1E3A8A;
           transition: all 0.4s ease;
           height: 100%;
           width: 100%;
           position: relative;
           padding: 1rem; /* ✅ PADDING REDUCIDO para eliminar espacio muerto */
       }
       
       .imagen-placeholder i {
           font-size: 2.5rem; /* ✅ TAMAÑO REDUCIDO para 360px */
           margin-bottom: 0.5rem;
           opacity: 0.7;
           transition: all 0.4s ease;
       }
       
       .imagen-placeholder span {
           font-weight: 600;
           color: #333;
           font-size: 0.8rem; /* ✅ TAMAÑO REDUCIDO para 360px */
           transition: all 0.4s ease;
           margin-bottom: 0.5rem; /* ✅ MARGEN REDUCIDO para eliminar espacio muerto */
       }
   
       /* TEXTO INFORMATIVO - REEMPLAZA AL BOTÓN EN 360px */
       .servicio-item .imagen-placeholder::after,
       .servicio-item .imagen-placeholder.fallback::after {
           content: "💡 Selecciona para más informaciónrmación";
           position: absolute;
           bottom: 0; /* ✅ PEGADO HASTA ABAJO */
           left: 0;
           right: 0;
           background: rgba(30, 58, 138, 0.9);
           color: white;
           padding: 0.4rem 0.6rem; /* ✅ PADDING MÁS REDUCIDO para 360px */
           border-radius: 0 0 12px 12px; /* ✅ SIN BORDE INFERIOR - coincide con border-radius de la tarjeta */
           font-size: 0.7rem; /* ✅ TAMAÑO MÁS REDUCIDO para 360px */
           font-weight: 500;
           text-align: center;
           line-height: 1.1; /* ✅ LINE-HEIGHT MÁS COMPACTO */
           z-index: 999; /* ✅ Z-INDEX MUY ALTO para estar encima de todo */
           opacity: 1; /* ✅ OPAQUE para debug */
           transition: opacity 0.3s ease;
           display: block;
       }
   
       /* ✅ ASEGURAR QUE LAS IMÁGENES NO TAPEN EL TEXTO INFORMATIVO */
       .servicio-imagen .imagen-real {
           z-index: 3;
       }
   
   
       /* Ocultar placeholder cuando hay imagen real en 360px */
       .servicio-imagen:has(.imagen-real) .imagen-placeholder.fallback {
           opacity: 0;
           display: none;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (IMÁGENES) - PLACEHOLDERS Y FALLBACKS
          ========================================== */
   
       .servicio-item:hover .imagen-placeholder::after {
           opacity: 1;
           background: rgba(30, 58, 138, 1);
       }
   
       /* ==========================================
          INICIO DE BLOQUE 2 (NAVEGACIÓN) - FLECHAS DE CONTROL
          ========================================== */
       /* FLECHAS DE NAVEGACIÓN - OPTIMIZADAS PARA 360px */
       .slider-btn {
           background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
           color: white;
           border: none;
           width: 45px; /* ✅ TAMAÑO REDUCIDO para 360px */
           height: 45px; /* ✅ TAMAÑO REDUCIDO para 360px */
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           box-shadow: 0 3px 12px rgba(30, 58, 138, 0.25);
           font-size: 1rem; /* ✅ TAMAÑO REDUCIDO para 360px */
           position: relative;
           overflow: hidden;
           z-index: 25;
       }
   
       .slider-btn:hover {
           transform: translateY(-50%) scale(1.05);
           box-shadow: 0 6px 20px rgba(30, 58, 138, 0.35);
       }
   
       .slider-btn.prev {
           position: absolute;
           left: 5px; /* ✅ POSICIÓN AJUSTADA para 360px */
           top: 50%;
           transform: translateY(-50%);
           opacity: 0;
           visibility: hidden;
           transition: all 0.4s ease;
       }
   
       .slider-btn.next {
           position: absolute;
           right: 5px; /* ✅ POSICIÓN AJUSTADA para 360px */
           top: 50%;
           transform: translateY(-50%);
           opacity: 0;
           visibility: visible;
           transition: all 0.4s ease;
       }
   
       /* Mostrar botones cuando están activos */
       .slider-btn.active {
           opacity: 1;
           visibility: visible;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (NAVEGACIÓN) - FLECHAS DE CONTROL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (INDICADORES) - PUNTOS DE NAVEGACIÓN
          ========================================== */
       /* PUNTOS INDICADORES - OPTIMIZADOS PARA 360px */
       .slider-puntos {
           display: flex;
           justify-content: center;
           gap: 0.8rem; /* ✅ GAP REDUCIDO para 360px */
           margin-top: 1rem;
           margin-bottom: 1rem;
       }
   
       .slider-punto {
           width: 8px; /* ✅ TAMAÑO REDUCIDO para 360px */
           height: 8px; /* ✅ TAMAÑO REDUCIDO para 360px */
           border-radius: 50%;
           background: rgba(30, 58, 138, 0.3);
           cursor: pointer;
           transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           position: relative;
           overflow: hidden;
       }
   
       .slider-punto::before {
           content: '';
           position: absolute;
           top: 0;
           left: -100%;
           width: 100%;
           height: 100%;
           background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
           transition: left 0.6s ease;
       }
   
       .slider-punto:hover {
           background: rgba(30, 58, 138, 0.6);
           transform: scale(1.2);
       }
   
       .slider-punto.activo {
           background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
           transform: scale(1.3);
           box-shadow: 0 2px 8px rgba(30, 58, 138, 0.4);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (INDICADORES) - PUNTOS DE NAVEGACIÓN
          ========================================== */
   
       .slider-punto.activo::before {
           left: 100%;
       }
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CTA) - BOTÓN VER TODOS
          ========================================== */
       /* BOTÓN VER TODOS LOS SERVICIOS - OPTIMIZADO PARA 360px */
       .servicios-cta {
           text-align: center;
           margin-top: 1.5rem;
           margin-bottom: 1rem;
       }
   
       .servicios-cta .btn {
           padding: 0.8rem 1.5rem; /* ✅ PADDING REDUCIDO para 360px */
           font-size: 0.9rem; /* ✅ TAMAÑO REDUCIDO para 360px */
           border-radius: 12px; /* ✅ BORDER RADIUS REDUCIDO */
           min-width: 200px; /* ✅ ANCHO MÍNIMO REDUCIDO */
           max-width: 280px; /* ✅ ANCHO MÁXIMO REDUCIDO */
       }
   
       .servicios-cta .btn i {
           font-size: 1rem; /* ✅ TAMAÑO REDUCIDO para 360px */
       }
   
       /* RESPONSIVE ADJUSTMENTS PARA 360px */
       .servicios-cta .btn span {
           font-size: 0.9rem; /* ✅ TAMAÑO REDUCIDO para 360px */
           font-weight: 600;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CTA) - BOTÓN VER TODOS (FINAL DE BLOQUE 2 SERVICIOS)
          ========================================== */
/* ==========================================
   BREAKPOINT 360px - MÓVIL MUY PEQUEÑO - INICIO DE BLOQUE 3 (TECNOLOGÍA)
   ========================================== */


    /* ==========================================
       INICIO DE BLOQUE 3 (TECNOLOGÍA) - CONTENEDOR PRINCIPAL
       ========================================== */
    
    /* Sección principal de tecnología - Optimización para móvil muy pequeño */
    .technology.section-bg-amarillo {
        padding: 2rem 0;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Contenedor de ancho completo - Ajustes para móvil muy pequeño */
    .technology .container-full-width {
        padding: 0 1rem;
        max-width: 100%;
        margin: 0;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (TECNOLOGÍA) - CONTENEDOR PRINCIPAL
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (HEADER) - ENCABEZADO DE TECNOLOGÍA
       ========================================== */
    
    /* Header centrado - Optimización para móvil muy pequeño */
    .inicio-tech-header {
        text-align: center;
        margin-bottom: 2rem;
        padding: 0 0.5rem;
        max-width: 100%;
    }
    
    /* Título principal - Tamaño reducido para móvil muy pequeño */
    .inicio-tech-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: #1F2937;
        margin-bottom: 0.8rem;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
    }
    
    /* Subtítulo - Tamaño optimizado para móvil muy pequeño */
    .inicio-tech-header .inicio-tech-subtitle {
        font-size: 1rem;
        color: #1E40AF;
        font-weight: 600;
        margin-bottom: 0.8rem;
        line-height: 1.4;
    }
    
    /* Descripción - Texto más pequeño y compacto */
    .inicio-tech-description {
        font-size: 0.9rem;
        color: #374151;
        line-height: 1.6;
        margin-bottom: 1.5rem;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
        padding: 0 0.5rem;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (HEADER) - ENCABEZADO DE TECNOLOGÍA
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (SHOWCASE) - GRID DE TARJETAS TECNOLÓGICAS
       ========================================== */
    
    /* Grid de tarjetas - Una columna en móvil muy pequeño */
    .inicio-tech-cards-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 0 0.5rem;
    }
    
    /* Tarjetas de tecnología - Optimización para móvil muy pequeño */
    .inicio-tech-card {
        background: #FFFFFF;
        border-radius: 12px;
        padding: 0;
        min-height: 380px;
        box-shadow: 0 8px 24px rgba(30, 58, 138, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
        border-top: 4px solid #1E3A8A;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    /* Efecto hover suavizado para móvil */
    .inicio-tech-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1);
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (SHOWCASE) - GRID DE TARJETAS TECNOLÓGICAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (IMÁGENES) - PLACEHOLDERS DE EQUIPOS
       ========================================== */
    
    /* Imagen de tarjeta - Altura reducida para móvil muy pequeño */
    .inicio-tech-card-image {
        margin-bottom: 0.8rem;
        text-align: center;
    }
    
    /* Placeholder de imagen - Tamaño optimizado para móvil muy pequeño */
    .inicio-tech-card-image .image-placeholder {
        width: 100%;
        height: 160px;
        background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #6B7280;
        border: 2px dashed #D1D5DB;
    }
    
    /* Icono del placeholder - Tamaño reducido */
    .inicio-tech-card-image .image-placeholder i {
        font-size: 2rem;
        margin-bottom: 0.3rem;
        color: #9CA3AF;
    }
    
    /* Texto del placeholder - Tamaño pequeño */
    .inicio-tech-card-image .image-placeholder span {
        font-size: 0.8rem;
        font-weight: 500;
        text-align: center;
        line-height: 1.2;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (IMÁGENES) - PLACEHOLDERS DE EQUIPOS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (CONTENIDO) - HEADERS Y TÍTULOS DE TARJETAS
       ========================================== */
    
    /* Header de tarjeta - Centrado y compacto */
    .inicio-tech-card-header {
        text-align: center;
        margin-bottom: 0.8rem;
        padding: 1rem 1.5rem 0;
    }
    
    /* Título de tarjeta - Tamaño optimizado para móvil muy pequeño */
    .inicio-tech-card-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1E3A8A;
        margin: 0 0 0.3rem 0;
        line-height: 1.3;
    }
    
    /* Marcas de equipos - Texto más pequeño */
    .inicio-tech-card-brands {
        color: #E3B23C;
        font-weight: 600;
        font-size: 0.8rem;
        margin: 0;
        line-height: 1.2;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (CONTENIDO) - HEADERS Y TÍTULOS DE TARJETAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (CUERPO) - DESCRIPCIONES Y VENTAJAS
       ========================================== */
    
    /* Cuerpo de tarjeta - Flexbox optimizado */
    .inicio-tech-card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 0 1.5rem 1.5rem;
    }
    
    /* Descripción de tarjeta - Texto compacto */
    .inicio-tech-card-description {
        color: #374151;
        line-height: 1.4;
        margin-bottom: 0.8rem;
        font-size: 0.85rem;
        text-align: center;
    }
    
    /* Ventajas del equipo - Diseño compacto */
    .inicio-tech-card-advantages {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    /* Elementos de ventaja - Tamaño reducido */
    .inicio-advantage-item {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.25rem 0.4rem;
        background: rgba(30, 58, 138, 0.05);
        border-radius: 4px;
        border: 1px solid rgba(30, 58, 138, 0.12);
        box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.05);
        transition: transform 0.15s ease, background-color 0.15s ease;
    }
    
    /* Efecto hover suavizado para elementos de ventaja */
    .inicio-advantage-item:hover {
        background: rgba(30, 58, 138, 0.08);
        transform: translateX(2px);
    }
    
    /* Icono de ventaja - Tamaño reducido */
    .inicio-advantage-item i {
        color: #1E3A8A;
        font-size: 0.8rem;
        background: rgba(30, 58, 138, 0.12);
        width: 20px;
        height: 20px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    /* Texto de ventaja - Tamaño pequeño */
    .inicio-advantage-item span {
        color: #1F2937;
        font-weight: 600;
        font-size: 0.75rem;
        line-height: 1.2;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (CUERPO) - DESCRIPCIONES Y VENTAJAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (UTILIDADES) - ELEMENTOS DE APOYO
       ========================================== */
    
    /* Asegurar que los elementos con z-index no bloqueen la selección */
    .section-bg-amarillo .container-full-width {
        position: relative;
        z-index: 10;
    }
    
    /* Texto centrado para tecnología */
    .technology .text-center {
        text-align: center;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (UTILIDADES) - ELEMENTOS DE APOYO
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE 3 (TECNOLOGÍA) - MÓVIL MUY PEQUEÑO 360px
       ========================================== */

/* ==========================================
   MEDIA QUERY 360px - BLOQUE 4: PROYECTOS DESTACADOS
   Optimización específica para móviles muy pequeños
   Basado en la estructura del BLOQUE 3 (Tecnología) para 360px
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE 4 (PROYECTOS) - CONTENEDOR PRINCIPAL
       ========================================== */
    
    /* Sección principal de proyectos - Optimización para móvil muy pequeño */
    .projects.section-bg-azul {
        padding: 2rem 0;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Contenedor de ancho completo - Ajustes para móvil muy pequeño */
    .projects .container {
        padding: 0 1rem;
        max-width: 100%;
        margin: 0;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (PROYECTOS) - CONTENEDOR PRINCIPAL
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 4 (HEADER) - ENCABEZADO DE PROYECTOS
       ========================================== */
    
    /* Header centrado - Optimización para móvil muy pequeño */
    .projects .section-header {
        text-align: center;
        margin-bottom: 2rem;
        padding: 0 0.5rem;
        max-width: 100%;
    }
    
    /* Título principal - Tamaño reducido para móvil muy pequeño */
    .projects .section-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: #FFFFFF;
        margin-bottom: 0.8rem;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    /* Subtítulo - Tamaño reducido para móvil muy pequeño */
    .projects .section-subtitle {
        font-size: 0.9rem;
        color: #E5E7EB;
        line-height: 1.4;
        margin-bottom: 1.5rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
        padding: 0 0.5rem;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (HEADER) - ENCABEZADO DE PROYECTOS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 4 (GRID) - GRID DE TARJETAS DE PROYECTOS
       ========================================== */
    
    /* Grid de proyectos - Una columna en móvil muy pequeño */
    .inicio-proyectos-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 0 0.5rem;
    }
    
    /* Tarjetas de proyectos - OPTIMIZADAS PARA ELIMINAR ESPACIO MUERTO */
    .inicio-proyectos-card {
        background: #FFFFFF;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(30, 58, 138, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        min-height: 380px; /* ✅ NUEVO: Altura mínima reducida para eliminar espacio muerto */
        height: auto; /* ✅ NUEVO: Altura automática para acomodar contenido */
    }
    
    /* Efecto hover desactivado en móvil */
    .inicio-proyectos-card:hover {
        transform: none;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* Imagen del proyecto - Altura reducida para móvil muy pequeño */
    .project-image {
        height: 200px;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    
    /* Imagen real del proyecto */
    .project-image .imagen-real {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }
    
    /* Placeholder de imagen */
    .project-image .image-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
        color: #6B7280;
        font-size: 2rem;
        width: 100%;
        height: 100%;
    }
    
    .project-image .image-placeholder span {
        font-size: 0.8rem;
        margin-top: 0.5rem;
        text-align: center;
        padding: 0 1rem;
    }
    
    /* Overlay del proyecto */
    .project-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(30,58,138,0.2) 100%);
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 1rem;
    }
    
    /* Categoría del proyecto */
    .project-category {
        background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%);
        color: #1a202c;
        padding: 0.4rem 0.8rem;
        border-radius: 15px;
        font-size: 0.75rem;
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
    }
    
    .project-content {
        padding: 1.2rem 1rem 1rem 1rem;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    
    /* Título del proyecto */
    .project-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1a202c;
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }
    
    .project-description {
        font-size: 0.8rem;
        color: #4B5563;
        line-height: 1.4;
        flex: 1;
        margin-bottom: 0;
    }
    
    .project-details {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    
    /* Item de detalle - AMARILLO COMO EN DESKTOP */
    .detail-item {
        background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%); /* ✅ CORREGIDO: Fondo amarillo como desktop */
        color: #1a202c; /* ✅ CORREGIDO: Texto oscuro para contraste */
        padding: 0.4rem 0.7rem; /* ✅ AUMENTADO: Padding más grande */
        border-radius: 12px; /* ✅ AUMENTADO: Bordes más redondeados */
        font-size: 0.75rem; /* ✅ AUMENTADO: De 0.7rem a 0.75rem */
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.4rem; /* ✅ AUMENTADO: De 0.3rem a 0.4rem */
        border: 2px solid rgba(255, 255, 255, 0.3); /* ✅ NUEVO: Borde sutil */
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3); /* ✅ NUEVO: Sombra dorada */
        transition: all 0.3s ease;
        flex: 1; /* ✅ NUEVO: Hacer que los items se distribuyan equitativamente */
        min-width: 0; /* ✅ NUEVO: Permitir que se encojan si es necesario */
    }
    
    .detail-item i {
        color: #1a202c; /* ✅ CORREGIDO: Icono oscuro para contraste */
        font-size: 0.7rem; /* ✅ AUMENTADO: De 0.6rem a 0.7rem */
        margin-right: 0.3rem; /* ✅ NUEVO: Margen derecho para separación */
    }
    
    /* ✅ NUEVO: Efecto hover para los detail-item (desactivado en móvil) */
    .inicio-proyectos-card:hover .detail-item {
        background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%); /* ✅ NUEVO: Color naranja en hover */
        color: #ffffff; /* ✅ NUEVO: Texto blanco en hover */
        transform: translateY(-2px) scale(1.02); /* ✅ NUEVO: Elevación y escala */
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4); /* ✅ NUEVO: Sombra naranja */
        border-color: rgba(255, 255, 255, 0.5); /* ✅ NUEVO: Borde más visible */
    }
    
    .inicio-proyectos-card:hover .detail-item i {
        color: #ffffff; /* ✅ NUEVO: Icono blanco en hover */
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (GRID) - GRID DE TARJETAS DE PROYECTOS
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE 4 (PROYECTOS) - MÓVIL MUY PEQUEÑO 360px
       ========================================== */
           
/* ==========================================
   MEDIA QUERY 360px - BLOQUE CLIENTES
   Optimización específica para móviles muy pequeños
   Basado en la estructura del BLOQUE PROYECTOS para 360px
   ========================================== */

   
   /* ==========================================
      INICIO DE BLOQUE CLIENTES - CONTENEDOR PRINCIPAL
      ========================================== */
   
   /* Sección principal de clientes - Optimización para móvil muy pequeño */
   .clientes {
    padding: 2rem 0;
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Contenedor de ancho completo - Ajustes para móvil muy pequeño */
.clientes .container {
    padding: 0 1rem;
    max-width: 100%;
    margin: 0;
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES - CONTENEDOR PRINCIPAL
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (HEADER) - ENCABEZADO DE CLIENTES
   ========================================== */

/* Header centrado - Optimización para móvil muy pequeño */
.clientes .section-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 0 0.5rem;
    max-width: 100%;
}

/* Título principal - Tamaño reducido para móvil muy pequeño */
/* ✅ ELIMINADO: .clientes .section-title 360px ahora usa el estilo general */

/* Subtítulo - Tamaño reducido para móvil muy pequeño */
.clientes .section-subtitle {
    font-size: 0.9rem;
    color: #000000; /* ✅ CAMBIADO: Color negro para mejor legibilidad en 360px */
    line-height: 1.4;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); /* ✅ AJUSTADO: Sombra blanca para contraste */
    padding: 0 0.5rem;
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (HEADER) - ENCABEZADO DE CLIENTES
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CARRUSEL) - CARRUSEL DE CLIENTES
   ========================================== */

/* Contenedor del carrusel - COMPLETAMENTE TRANSPARENTE SIN ELEMENTOS BLANCOS */
.inicio-clientes-carousel-container {
    padding: 0; /* ✅ ELIMINADO: Sin padding para eliminar espacios blancos */
    margin: 0 auto;
    max-width: 100%;
    background: transparent; /* ✅ TRANSPARENTE: Fondo completamente transparente */
    border-radius: 0; /* ✅ ELIMINADO: Sin bordes redondeados que crean espacios blancos */
    box-shadow: none; /* ✅ ELIMINADO: Sin sombra */
    backdrop-filter: none; /* ✅ ELIMINADO: Sin blur */
    border: none; /* ✅ NUEVO: Sin bordes */
}

/* Carrusel principal - MANTIENE COMPORTAMIENTO HORIZONTAL PARA 360px */
.inicio-clientes-carousel {
    display: flex;
    flex-direction: row; /* ✅ CORREGIDO: Mantiene flujo horizontal */
    gap: 0; /* ✅ CORREGIDO: Sin gap entre slides */
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* ✅ NUEVO: Oculta slides no activos */
}

/* Slides individuales - UNA TARJETA POR SLIDE EN MÓVIL MUY PEQUEÑO */
.inicio-clientes-slide {
    display: flex;
    flex-direction: row; /* ✅ CORREGIDO: Mantiene flujo horizontal */
    gap: 0.8rem; /* ✅ NUEVO: Gap entre tarjetas dentro del slide */
    width: 100%;
    min-width: 100%; /* ✅ NUEVO: Ancho mínimo para ocupar todo el carrusel */
    opacity: 0; /* ✅ CORREGIDO: Invisible por defecto */
    visibility: hidden; /* ✅ CORREGIDO: Oculto por defecto */
    position: absolute; /* ✅ NUEVO: Posición absoluta para superposición */
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Slide activo - VISIBLE */
.inicio-clientes-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative; /* ✅ NUEVO: Posición relativa cuando está activo */
}

/* Tarjetas de cliente - SEMI-TRANSPARENTES PARA MOSTRAR LOGOS DE FONDO */
.inicio-cliente-card-featured {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    padding: 1rem; /* ✅ REDUCIDO: Padding más compacto para móvil */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ✅ MEJORADO: Sombra más suave */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.3); /* ✅ MEJORADO: Borde más sutil */
    position: relative;
    overflow: hidden;
    min-height: 280px; /* ✅ REDUCIDO: Altura más compacta para móvil */
    height: auto;
    width: calc(50% - 0.4rem); /* ✅ NUEVO: Ancho para 2 tarjetas por slide */
    max-width: calc(50% - 0.4rem);
    flex-shrink: 0; /* ✅ NUEVO: No se encoge */
    flex-grow: 0; /* ✅ NUEVO: No crece */
}

/* Efecto hover desactivado en móvil */
.inicio-cliente-card-featured:hover {
    transform: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Contenedor del logo - SEMI-TRANSPARENTE PARA MOSTRAR LOGOS DE FONDO */
.cliente-logo-container {
    position: relative;
    width: 100%;
    height: 100px; /* ✅ REDUCIDO: Altura más compacta para carrusel */
    min-height: 100px;
    max-height: 100px;
    margin-bottom: 0.8rem; /* ✅ REDUCIDO: Margen inferior más pequeño */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 249, 255, 0.85);
    border-radius: 10px; /* ✅ REDUCIDO: Bordes menos redondeados */
    overflow: hidden;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 1px solid rgba(14, 165, 233, 0.3); /* ✅ MEJORADO: Borde más sutil */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); /* ✅ MEJORADO: Sombra más sutil */
    flex-shrink: 0;
}

/* Imagen del cliente - Tamaño optimizado para móvil muy pequeño */
.cliente-imagen-featured {
    width: 100%;
    height: 100%;
    min-width: 80px;
    min-height: 80px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease-out;
    position: relative;
    z-index: 2;
}

/* Información del cliente - Optimizada para móvil muy pequeño */
.cliente-info-featured {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0.5rem;
    border-radius: 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Nombre del cliente - Tamaño optimizado para carrusel horizontal en 360px */
.cliente-nombre-featured {
    font-size: 0.95rem; /* ✅ REDUCIDO: Tamaño más compacto */
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem; /* ✅ REDUCIDO: Margen inferior más pequeño */
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-align: center; /* ✅ NUEVO: Centrado para mejor apariencia */
}

/* Categoría del cliente - Optimizada para carrusel horizontal en 360px */
.cliente-categoria-featured {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 0.3rem 0.6rem; /* ✅ REDUCIDO: Padding más compacto */
    border-radius: 15px; /* ✅ REDUCIDO: Bordes menos redondeados */
    font-size: 0.65rem; /* ✅ REDUCIDO: Tamaño más pequeño */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px; /* ✅ REDUCIDO: Espaciado más compacto */
    margin-bottom: 0.3rem; /* ✅ REDUCIDO: Margen inferior más pequeño */
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3); /* ✅ REDUCIDO: Sombra más sutil */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    align-self: center;
}

/* Colores específicos por tipo de industria - Optimizados para móvil */
.cliente-categoria-featured[data-industry="industrial"] {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.cliente-categoria-featured[data-industry="comercial"] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.cliente-categoria-featured[data-industry="vivienda"] {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.cliente-categoria-featured[data-industry="construccion"] {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.3);
}

.cliente-categoria-featured[data-industry="gobierno"] {
    background: linear-gradient(135deg, #1f2937, #111827);
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.3);
}

.cliente-categoria-featured[data-industry="financiero"] {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CARRUSEL) - CARRUSEL DE CLIENTES
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CONTROLES) - CONTROLES DE NAVEGACIÓN
   ========================================== */

/* Controles del carrusel - POSICIONADOS EN LOS COSTADOS SIN ELEMENTOS BLANCOS */
.inicio-clientes-controls {
    position: absolute;
    top: 50%;
    left: -0.5rem; /* ✅ AJUSTADO: Más hacia la izquierda */
    right: -0.5rem; /* ✅ AJUSTADO: Más hacia la derecha */
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    padding: 0;
    z-index: 10;
    pointer-events: none; /* ✅ NUEVO: Para que no interfiera con el carrusel */
}

/* ✅ ELIMINAR PSEUDO-ELEMENTOS QUE CREAN LÍNEAS VERTICALES */
.inicio-clientes-controls::before,
.inicio-clientes-controls::after {
    display: none; /* ✅ ELIMINADO: Sin gradientes blancos verticales */
}

/* Botones de navegación - MÁS PEQUEÑOS Y SIN SOMBRAS BLANCAS */
.inicio-clientes-btn {
    width: 32px; /* ✅ REDUCIDO: De 40px a 32px */
    height: 32px; /* ✅ REDUCIDO: De 40px a 32px */
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem; /* ✅ REDUCIDO: De 1rem a 0.8rem */
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4); /* ✅ REDUCIDO: Sombra más sutil */
    position: relative;
    overflow: hidden;
    pointer-events: auto; /* ✅ NUEVO: Para que sean clickeables */
}

.inicio-clientes-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.inicio-clientes-btn:active {
    transform: scale(0.95);
}

.inicio-clientes-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(1);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CONTROLES) - CONTROLES DE NAVEGACIÓN
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (INDICADORES) - INDICADORES DE PAGINACIÓN
   ========================================== */

/* Indicadores del carrusel - COMPLETAMENTE TRANSPARENTES SIN ELEMENTOS BLANCOS */
.inicio-clientes-indicators {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding: 0.8rem 1rem; /* ✅ REDUCIDO: Padding más pequeño */
    background: transparent; /* ✅ ELIMINADO: Sin fondo blanco */
    border-radius: 0; /* ✅ ELIMINADO: Sin bordes redondeados */
    backdrop-filter: none; /* ✅ ELIMINADO: Sin blur */
    box-shadow: none; /* ✅ ELIMINADO: Sin sombra */
    border: none; /* ✅ ELIMINADO: Sin bordes */
    position: relative;
}

/* Indicador individual - Tamaño optimizado para móvil muy pequeño */
.inicio-clientes-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    cursor: pointer;
    transition: all 0.4s ease;
    border: 2px solid rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.inicio-clientes-indicator:hover {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    transform: scale(1.2);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.inicio-clientes-indicator.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    transform: scale(1.3);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.3);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (INDICADORES) - INDICADORES DE PAGINACIÓN
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CTA) - ESTADÍSTICAS DE CLIENTES
   ========================================== */

/* CTA de clientes - Optimizado para móvil muy pequeño */
.clientes-cta {
    margin-top: 2rem;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Estadísticas de clientes - Optimizadas para móvil muy pequeño */
.clientes-stats {
    display: flex;
    flex-direction: column;
    gap: 0.8rem; /* ✅ REDUCIDO: Gap más pequeño */
    justify-content: center;
    align-items: center;
    max-width: 100%;
    padding: 1rem 0.5rem; /* ✅ NUEVO: Padding para mejor espaciado */
}

/* Item de estadística - DISEÑO COMPACTO COMPLETAMENTE TRANSPARENTE PARA 360px */
.clientes .stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* ✅ NUEVO: Distribución horizontal */
    gap: 0.5rem; /* ✅ REDUCIDO: Gap más pequeño */
    background: transparent; /* ✅ CAMBIADO: Fondo completamente transparente para 360px */
    backdrop-filter: none; /* ✅ ELIMINADO: Sin efecto glassmorphism */
    padding: 0.6rem 0.8rem; /* ✅ REDUCIDO: Padding más compacto */
    border-radius: 0; /* ✅ ELIMINADO: Sin bordes redondeados */
    box-shadow: none; /* ✅ ELIMINADO: Sin sombra */
    border: none; /* ✅ ELIMINADO: Sin borde */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 100%; /* ✅ NUEVO: Ancho completo */
    max-width: 320px; /* ✅ NUEVO: Ancho máximo controlado */
    min-height: 50px; /* ✅ NUEVO: Altura mínima consistente */
}

/* Efecto hover desactivado en móvil para mantener transparencia */
.clientes .stat-item:hover {
    transform: none;
    box-shadow: none;
    background: transparent;
}

/* Icono de estadística - Optimizado para móvil muy pequeño */
.clientes .stat-item i {
    font-size: 1.1rem; /* ✅ REDUCIDO: Tamaño más pequeño */
    color: #007bff;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    flex-shrink: 0; /* ✅ NUEVO: No se encoge */
}

/* Texto de estadística - Optimizado para móvil muy pequeño */
.clientes .stat-item strong {
    color: #007bff;
    font-weight: 700;
    font-size: 1rem; /* ✅ REDUCIDO: Tamaño más pequeño */
    margin-right: 0.2rem; /* ✅ REDUCIDO: Margen más pequeño */
    flex-shrink: 0; /* ✅ NUEVO: No se encoge */
}

/* Texto descriptivo - NUEVO: Estilo para el texto descriptivo */
.clientes .stat-item span {
    color: #1e293b;
    font-weight: 500;
    font-size: 0.85rem; /* ✅ Tamaño pequeño para móvil */
    text-align: right;
    flex-grow: 1; /* ✅ NUEVO: Ocupa el espacio restante */
    line-height: 1.2;
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CTA) - ESTADÍSTICAS DE CLIENTES
   ========================================== */

/* ==========================================
   FINAL DE BLOQUE CLIENTES - MÓVIL MUY PEQUEÑO 360px
   ========================================== */
       
/* ==========================================
   BREAKPOINT 360px - MÓVIL EXTRA PEQUEÑO
   BLOQUE: SOBRE LAMA TOPOGRAFÍA
   RECREADO DESDE CERO - BASADO EN HTML EXITOSO
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA - SECCIÓN PRINCIPAL
       ========================================== */
    
    /* Contenedor principal - OPTIMIZADO PARA MÁXIMO ANCHO */
    .about.section-bg-amarillo {
        padding: 1.5rem 0;
        margin: 0;
        overflow-x: hidden;
        scroll-behavior: smooth;
        width: 100vw;
        max-width: 100vw;
        font-size: 14px;
        line-height: 1.4;
    }
    
    /* Contenedor de ancho completo - SIN RESTRICCIONES */
    .container-full-width {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0 0.5rem;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (HEADER) - TÍTULO Y SUBTÍTULO
       ========================================== */
    
    .inicio-about-header {
        margin-bottom: 1.5rem;
        text-align: center;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .about-title-container {
        max-width: 100%;
        width: 100%;
        padding: 1.2rem;
        margin: 0 auto 1.5rem auto;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        border: 2px solid rgba(30, 64, 175, 0.3);
        border-radius: 16px;
        box-shadow: 0 8px 20px rgba(30, 64, 175, 0.12);
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    
    .about-title-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .inicio-about-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 0.8rem;
        line-height: 1.2;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .inicio-about-subtitle {
        font-size: 0.9rem;
        color: var(--text-secondary);
        line-height: 1.4;
        margin: 0;
        font-weight: 400;
        max-width: 100%;
    }

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (HEADER) - TÍTULO Y SUBTÍTULO
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (FILA SUPERIOR) - HISTORIA + VALORES
       ========================================== */
    
    .inicio-about-top-row {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 2rem;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (HISTORIA) - NUESTRA TRAYECTORIA
       ========================================== */
    
    .about-historia-section {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .inicio-about-story-compact {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* Cuadro principal de contenido - MÁXIMO ANCHO */
    .story-content-box {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        border-radius: 16px;
        padding: 1.2rem;
        box-shadow: 0 8px 20px rgba(30, 64, 175, 0.12);
        border: 2px solid rgba(30, 64, 175, 0.3);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    
    /* Título del bloque */
    .story-title-compact {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0 0 0.8rem 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
        text-align: center;
    }
    
    /* Layout vertical para móvil */
    .story-content-horizontal {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 0;
    }
    
    /* Sección de texto */
    .story-text-section {
        width: 100%;
        order: 1;
    }
    
    .story-text-compact {
        font-size: 0.9rem;
        line-height: 1.5;
        color: var(--text-color);
        margin: 0;
        text-align: left;
    }
    
    .story-text-compact strong {
        color: var(--primary-color);
        font-weight: 600;
    }
    
    /* Sección de imagen */
    .story-image-section {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        order: 2;
    }
    
    .story-image-placeholder {
        border-radius: 12px;

        padding: 1.5rem;
        border: 2px solid rgba(30, 64, 175, 0.3);
        text-align: center;
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 200px;
        margin: 0;
    }
    
    .story-image-placeholder:hover {
        transform: translateY(-2px);
    }
    
    .image-coming-soon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
        color: var(--primary-color);
    }
    
    .image-coming-soon i {
        font-size: 2rem;
        color: var(--primary-color);
    }
    
    .image-coming-soon span {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--primary-color);
        text-align: center;
    }

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (HISTORIA) - NUESTRA TRAYECTORIA
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (VALORES) - LO QUE NOS DIFERENCIA
       ========================================== */
    
    .about-valores-section {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .inicio-about-values-compact {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* Título de valores - MÁXIMO ANCHO */
    .values-title-container {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 12px;
        padding: 1rem 0.8rem;
        margin-bottom: 1rem;
        box-shadow: 0 4px 12px rgba(30, 64, 175, 0.1);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .values-title-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .values-title-compact {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
    }
    
    /* Grid de valores - OPTIMIZADO PARA 360px */
    .values-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
        row-gap: 1rem;
        margin-top: 0;
        flex: 1;
        align-content: start;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Items de valores */
    .value-item-compact {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 10px;
        padding: 0.8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        transition: transform 0.3s ease;
        min-height: 80px;
        justify-content: center;
    }
    
    .value-item-compact:hover {
        transform: translateY(-2px);
    }
    
    /* Iconos de valores */
    .value-icon-small {
        width: 32px;
        height: 32px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.3rem;
        box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
    }
    
    .value-icon-small i {
        font-size: 0.9rem;
        color: white;
    }
    
    /* Contenido de valores */
    .value-content-small {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.2rem;
        width: 100%;
    }
    
    .value-content-small h4 {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--primary-color);
        margin: 0;
        line-height: 1.2;
        font-family: 'Poppins', sans-serif;
    }
    
    .value-content-small p {
        font-size: 0.7rem;
        color: var(--text-secondary);
        line-height: 1.2;
        margin: 0;
        font-weight: 500;
        text-align: center;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (VALORES) - LO QUE NOS DIFERENCIA
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (FILA SUPERIOR) - HISTORIA + VALORES
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (FILA INFERIOR) - ESTADÍSTICAS + CTA + CERTIFICACIONES
       ========================================== */
    
    .inicio-about-bottom-row {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding: 0;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (ESTADÍSTICAS) - ESTADÍSTICAS DE EMPRESA
       ========================================== */
    
    .about-stats-section {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .inicio-about-stats-compact-horizontal {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 12px;
        padding: 0.8rem;
        box-shadow: 0 4px 12px rgba(30, 64, 175, 0.1);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-stats-compact-horizontal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .stats-horizontal-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
        row-gap: 0.8rem;
        margin-top: 0.8rem;
    }
    
    .stat-horizontal {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 8px;
        padding: 1rem 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.3rem;
        min-width: 0;
        width: 100%;
        transition: transform 0.3s ease;
    }
    
    .stat-horizontal:hover {
        transform: translateY(-2px);
    }
    
    .stat-number {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--primary-color);
        line-height: 1;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .stat-label {
        font-size: 0.55rem;
        color: var(--text-secondary);
        font-weight: 500;
        line-height: 1.0;
        letter-spacing: 0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (ESTADÍSTICAS) - ESTADÍSTICAS DE EMPRESA
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (CTA) - CALL TO ACTION
       ========================================== */
    
    .about-cta-section {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .inicio-about-cta-compact {
        background: linear-gradient(135deg, rgba(30, 64, 175, 0.95) 0%, rgba(59, 130, 246, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.3);
        border-radius: 12px;
        padding: 1rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(30, 64, 175, 0.2);
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-cta-compact::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .inicio-about-cta-compact h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: white;
        margin: 0 0 0.5rem 0;
        line-height: 1.2;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .inicio-about-cta-compact p {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.4;
        margin: 0 0 1rem 0;
    }
    
    .cta-buttons-compact {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
    }
    
    .cta-buttons-compact .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.8rem;
        border-radius: 8px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
        font-weight: 600;
        min-width: 200px;
        justify-content: center;
    }
    
    .cta-buttons-compact .btn-primary {
        background: linear-gradient(135deg, #E3B23C 0%, #FFD700 100%);
        color: var(--primary-color);
        border: 1px solid rgba(227, 178, 60, 0.3);
    }
    
    .cta-buttons-compact .btn-primary:hover {
        background: linear-gradient(135deg, #D4A017 0%, #E6C200 100%);
        transform: translateY(-2px);

    }
    
    .cta-buttons-compact .btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .cta-buttons-compact .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (CTA) - CALL TO ACTION
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (CERTIFICACIONES) - CREDENCIALES Y CERTIFICACIONES
       ========================================== */
    
    .about-certificaciones-section {
        width: 100%;
        max-width: 100%;
        order: 3;
    }
    
    .inicio-about-credentials-horizontal {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 12px;
        padding: 0.8rem;
        box-shadow: 0 4px 12px rgba(30, 64, 175, 0.1);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-credentials-horizontal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .credentials-title-horizontal {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0 0 0.8rem 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
    }
    
    .credentials-horizontal {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        align-items: center;
    }
    
    .credential-horizontal {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 8px;
        padding: 0.6rem 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--primary-color);
        transition: all 0.3s ease;
        width: 100%;
        justify-content: center;
    }
    
    .credential-horizontal:hover {
        transform: translateY(-2px);
    }
    
    .credential-horizontal i {
        font-size: 0.9rem;
        color: var(--primary-color);
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (CERTIFICACIONES) - CREDENCIALES Y CERTIFICACIONES
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (FILA INFERIOR) - ESTADÍSTICAS + CTA + CERTIFICACIONES
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (UTILIDADES) - OPTIMIZACIONES Y OVERRIDES
       ========================================== */
    
    /* Asegurar que todo el texto sea seleccionable */
    .about.section-bg-amarillo * {
        user-select: text;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        box-sizing: border-box;
    }
    
    /* Asegurar que no haya scroll horizontal */
    body {
        overflow-x: hidden;
    }
    
    /* Asegurar que los botones sean táctiles */
    .btn, .value-item-compact, .stat-horizontal, .credential-horizontal {
        min-height: 44px;
        touch-action: manipulation;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (UTILIDADES) - OPTIMIZACIONES Y OVERRIDES
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA - MÓVIL MUY PEQUEÑO 360px
       ========================================== */

    /* ==========================================
       OVERRIDES ESPECÍFICOS PARA 360px - SOBRESCRITURA DE ESTILOS BASE
       ========================================== */
    
    /* Sobrescribir cualquier max-width del CSS base */
    .about.section-bg-amarillo .container-full-width,
    .about.section-bg-amarillo .inicio-about-header,
    .about.section-bg-amarillo .inicio-about-top-row,
    .about.section-bg-amarillo .inicio-about-bottom-row,
    .about.section-bg-amarillo .about-historia-section,
    .about.section-bg-amarillo .about-valores-section,
    .about.section-bg-amarillo .about-stats-section,
    .about.section-bg-amarillo .about-cta-section,
    .about.section-bg-amarillo .about-certificaciones-section,
    .about.section-bg-amarillo .inicio-about-story-compact,
    .about.section-bg-amarillo .inicio-about-values-compact,
    .about.section-bg-amarillo .story-content-box,
    .about.section-bg-amarillo .values-title-container,
    .about.section-bg-amarillo .inicio-about-stats-compact-horizontal,
    .about.section-bg-amarillo .inicio-about-cta-compact,
    .about.section-bg-amarillo .inicio-about-credentials-horizontal,
    .about.section-bg-amarillo .about-title-container {
        max-width: 100%;
        width: 100%;
    }
    
    /* Forzar layout vertical en todos los contenedores */
    .about.section-bg-amarillo .inicio-about-top-row {
        display: flex;
        flex-direction: column;
    }
    
    .about.section-bg-amarillo .inicio-about-bottom-row {
        display: flex;
        flex-direction: column;
    }

    /* ==========================================
       FINAL OVERRIDES ESPECÍFICOS PARA 360px - SOBRESCRITURA DE ESTILOS BASE
   ========================================== */
       
          
} /* 🎯 FIN BLOQUE HERO - 360px */

/* ==========================================
   MEDIA QUERY 480px - BLOQUE HERO
   Optimización específica para móviles medianos
   Basado en media_360px_hero.css pero adaptado para 480px
   ========================================== */

@media (max-width: 480px) and (min-width: 361px) {
/* ==========================================
   BREAKPOINT 480px - INICIO DE BLOQUE 2 (SERVICIOS)
   ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE 2 (SERVICIOS) - CONTENEDOR PRINCIPAL
       ========================================== */
       .servicios-slider-container,
       .inicio-servicios-slider {
           margin-top: 1rem;
           width: 100vw;
           max-width: 100vw;
           padding: 0;
           overflow: hidden;
           margin-left: calc(-50vw + 50%);
           margin-right: calc(-50vw + 50%);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (SERVICIOS) - CONTENEDOR PRINCIPAL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CARRUSEL) - SLIDER PRINCIPAL
          ========================================== */
       .servicios-slider {
           display: flex;
           align-items: center;
           padding: 1.5rem 0; /* ✅ PADDING REDUCIDO para 480px */
           min-height: 500px; /* ✅ ALTURA REDUCIDA para eliminar espacio muerto */
           overflow: hidden;
           position: relative;
           width: 100vw;
           max-width: 100vw;
           
           /* Variables CSS para controlar difuminado */
           --difuminado-izquierdo: hidden;
           --difuminado-derecho: visible;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CARRUSEL) - SLIDER PRINCIPAL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (DIFUMINADO) - GRADIENTES LATERALES
          ========================================== */
       /* DIFUMINADO LATERAL - OPTIMIZADO PARA 480px */
       .servicios-slider::before,
       .servicios-slider::after {
           content: '';
           position: absolute;
           top: 0;
           bottom: 0;
           width: 30px; /* Más ancho para 480px */
           z-index: 10;
           pointer-events: none;
           transition: opacity 0.5s ease;
       }
   
       .servicios-slider::before {
           left: 0;
           background: linear-gradient(to right, rgba(30, 58, 138, 1) 0%, rgba(30, 58, 138, 0.8) 40%, rgba(30, 58, 138, 0.3) 80%, transparent 100%);
           opacity: var(--difuminado-izquierdo);
       }
   
       .servicios-slider::after {
           right: 0;
           background: linear-gradient(to left, rgba(30, 58, 138, 1) 0%, rgba(30, 58, 138, 0.8) 40%, rgba(30, 58, 138, 0.3) 80%, transparent 100%);
           opacity: var(--difuminado-derecho);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (DIFUMINADO) - GRADIENTES LATERALES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CONTENEDOR INTERNO) - WRAPPER DE SLIDES
          ========================================== */
       .servicios-slider-inner {
           display: flex;
           align-items: center;
           transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           width: max-content;
           padding: 0 0.8rem; /* ✅ PADDING para 480px - SOBRESCRIBE inicio.css */
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CONTENEDOR INTERNO) - WRAPPER DE SLIDES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (TARJETAS) - CARDS DE SERVICIOS
          ========================================== */
       /* TARJETAS DE SERVICIOS - UNO EN UNO PARA 480px - DIMENSIONES OPTIMIZADAS */
       .servicio-item {
           width: 380px; /* ✅ ANCHO OPTIMIZADO para 480px */
           min-width: 380px;
           height: 500px; /* ✅ ALTURA REDUCIDA para eliminar espacio muerto */
           min-height: 500px;
           max-height: 500px;
           background: white;
           border-radius: 12px; /* ✅ BORDER RADIUS REDUCIDO */
           box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* ✅ SOMBRA MÁS SUAVE */
           border: 2px solid rgba(30, 58, 138, 0.15);
           flex-shrink: 0;
           transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           display: block;
           margin: 0 0.4rem; /* ✅ MARGEN para 480px */
           position: relative;
           overflow: hidden;
       }
   
       /* COLORES ALTERNADOS PARA CADA TARJETA */
       .servicio-item:nth-child(odd) {
           background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
           border-color: rgba(30, 58, 138, 0.2);
       }
   
       .servicio-item:nth-child(even) {
           background: linear-gradient(135deg, #F0F4FF 0%, #E6F0FF 100%);
           border-color: rgba(30, 58, 138, 0.25);
       }
   
       /* EFECTO HOVER EN TARJETAS */
       .servicio-item:hover {
           transform: translateY(-8px);
           box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
           border-color: rgba(30, 58, 138, 0.3);
       }
   
       /* EFECTO DE BORDE DORADO AL HOVER */
       .servicio-item::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           height: 4px;
           background: linear-gradient(90deg, #E3B23C, #FFD700, #E3B23C);
           transform: scaleX(0);
           transition: transform 0.4s ease;
           z-index: 5;
       }
   
       .servicio-item:hover::before {
           transform: scaleX(1);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (TARJETAS) - CARDS DE SERVICIOS
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CONTENIDO) - TEXTO E IMÁGENES
          ========================================== */
       /* Contenido de las tarjetas - DISTRIBUCIÓN VERTICAL OPTIMIZADA PARA 480px */
       .servicio-contenido {
           display: flex;
           flex-direction: column; /* ✅ VERTICAL: texto arriba, imagen abajo */
           height: 500px; /* ✅ ALTURA REDUCIDA para eliminar espacio muerto */
           min-height: 500px;
           max-height: 500px;
           position: relative;
       }
   
       /* Texto arriba - ALTURA OPTIMIZADA PARA 480px */
       .servicio-texto {
           flex: 1; /* ✅ FLEXIBLE para ocupar espacio disponible */
           min-height: 220px; /* ✅ ALTURA MÍNIMA REDUCIDA */
           width: 100%;
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
           padding: 1.2rem; /* ✅ PADDING REDUCIDO para 480px */
           padding-bottom: 0.8rem;
           position: relative;
           box-sizing: border-box;
       }
   
       .servicio-titulo {
           font-size: 1.4rem; /* ✅ TAMAÑO OPTIMIZADO para 480px */
           font-weight: 700;
           color: #1E3A8A;
           margin-bottom: 0.8rem; /* ✅ MARGEN REDUCIDO */
           line-height: 1.3; /* ✅ LINE-HEIGHT COMPACTO */
           text-align: left;
           transition: all 0.4s ease;
       }
   
       .servicio-item:hover .servicio-titulo {
           color: #E3B23C;
           transform: translateY(-2px);
       }
   
       .servicio-descripcion {
           color: #2D3748;
           line-height: 1.5; /* ✅ LINE-HEIGHT COMPACTO */
           margin-bottom: 0;
           font-weight: 500;
           font-size: 0.9rem; /* ✅ TAMAÑO REDUCIDO para 480px */
           text-align: left;
           flex-grow: 1; /* ✅ Ocupar espacio disponible */
           display: flex;
           align-items: flex-start;
       }
   
       .servicio-item:hover .servicio-descripcion {
           color: #1A202C;
       }
   
       /* Botón Saber más información - OCULTO EN 480px PARA MEJOR UX */
       .servicio-enlace {
           display: none; /* ✅ OCULTO en 480px - mejor UX */
       }

       /* TAP HINT - Indicador de navegación en móvil 480px */
       .servicio-item::after {
           content: 'Toca para más información →';
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           background: rgba(30, 58, 138, 0.88);
           color: white;
           font-size: 0.78rem;
           font-weight: 600;
           text-align: center;
           padding: 0.55rem 1rem;
           z-index: 10;
           letter-spacing: 0.02em;
           font-family: var(--font-primary);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CONTENIDO) - TEXTO E IMÁGENES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (IMÁGENES) - PLACEHOLDERS Y FALLBACKS
          ========================================== */
       /* Imagen abajo - ALTURA OPTIMIZADA PARA 480px */
       .servicio-imagen {
           flex: none;
           height: 300px;
           min-height: 300px;
           max-height: 300px;
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: center;
           border-top: 1px solid rgba(30, 58, 138, 0.1);
           position: relative;
           background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
           box-shadow: inset 0 0 20px rgba(227, 178, 60, 0.15);
           transition: all 0.5s ease;
           box-sizing: border-box;
       }
   
       /* COLORES ALTERNADOS PARA LAS IMÁGENES */
       .servicio-item:nth-child(odd) .servicio-imagen {
           background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
           box-shadow: inset 0 0 20px rgba(227, 178, 60, 0.15);
       }
   
       .servicio-item:nth-child(even) .servicio-imagen {
           background: linear-gradient(135deg, #E6F0FF 0%, #B3D9FF 100%);
           box-shadow: inset 0 0 20px rgba(30, 58, 138, 0.15);
       }
   
       .servicio-item:hover .servicio-imagen {
           background: linear-gradient(135deg, #FFE082 0%, #FFD700 100%);
           box-shadow: inset 0 0 25px rgba(227, 178, 60, 0.25);
           transform: scale(1.05);
       }
   
       /* Placeholder de imagen - VISIBLE COMO EN PC */
       .imagen-placeholder {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           text-align: center;
           color: #1E3A8A;
           font-size: 0.9rem;
           font-weight: 500;
           width: 100%;
           height: 100%;
           position: relative;
           padding: 1rem; /* ✅ PADDING REDUCIDO para eliminar espacio muerto */
       }
   
       .imagen-placeholder i {
           font-size: 2.2rem; /* ✅ TAMAÑO REDUCIDO para 480px */
           margin-bottom: 0.4rem;
           opacity: 0.7;
           transition: all 0.3s ease;
       }
   
       .imagen-placeholder span {
           font-size: 0.75rem; /* ✅ TAMAÑO REDUCIDO para 480px */
           opacity: 0.8;
           transition: all 0.3s ease;
           margin-bottom: 0.4rem; /* ✅ MARGEN REDUCIDO para eliminar espacio muerto */
       }
   
       .servicio-item:hover .imagen-placeholder i {
           transform: scale(1.1);
           opacity: 1;
       }
   
       .servicio-item:hover .imagen-placeholder span {
           opacity: 1;
       }
   
       /* TEXTO INFORMATIVO - REEMPLAZA AL BOTÓN EN 480px */
       .servicio-item .imagen-placeholder::after,
       .servicio-item .imagen-placeholder.fallback::after {
           content: "💡 Toca para más info";
           position: absolute;
           bottom: 0; /* ✅ PEGADO HASTA ABAJO */
           left: 0;
           right: 0;
           background: rgba(30, 58, 138, 0.9);
           color: white;
           padding: 0.4rem 0.6rem; /* ✅ PADDING MÁS REDUCIDO para 480px */
           border-radius: 0 0 12px 12px; /* ✅ SIN BORDE INFERIOR - coincide con border-radius de la tarjeta */
           font-size: 0.7rem; /* ✅ TAMAÑO MÁS REDUCIDO para 480px */
           font-weight: 500;
           text-align: center;
           line-height: 1.1; /* ✅ LINE-HEIGHT MÁS COMPACTO */
           z-index: 999; /* ✅ Z-INDEX MUY ALTO para estar encima de todo */
           opacity: 1; /* ✅ OPAQUE para debug */
           transition: opacity 0.3s ease;
           display: block;
       }
   
       /* ✅ ASEGURAR QUE LAS IMÁGENES NO TAPEN EL TEXTO INFORMATIVO */
       .servicio-imagen .imagen-real {
           z-index: 3;
       }
   
       /* Ocultar placeholder cuando hay imagen real en 480px */
       .servicio-imagen:has(.imagen-real) .imagen-placeholder.fallback {
           opacity: 0;
           display: none;
       }
   
       .servicio-item:hover .imagen-placeholder::after {
           opacity: 1;
           background: rgba(30, 58, 138, 1);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (IMÁGENES) - PLACEHOLDERS Y FALLBACKS
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (NAVEGACIÓN) - FLECHAS DE CONTROL
          ========================================== */
       /* FLECHAS DE NAVEGACIÓN - OPTIMIZADAS PARA 480px */
       .slider-btn {
           background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
           color: white;
           border: none;
           width: 40px;
           height: 40px;
           border-radius: 50%;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1rem; /* ✅ TAMAÑO REDUCIDO para 480px */
           position: relative;
           overflow: hidden;
           z-index: 25;
       }
   
       .slider-btn:hover {
           transform: scale(1.1);
           box-shadow: 0 4px 15px rgba(30, 58, 138, 0.4);
       }
   
       .slider-btn.prev {
           position: absolute;
           left: 5px; /* ✅ POSICIÓN AJUSTADA para 480px */
           top: 50%;
           transform: translateY(-50%);
       }
   
       .slider-btn.next {
           position: absolute;
           right: 5px; /* ✅ POSICIÓN AJUSTADA para 480px */
           top: 50%;
           transform: translateY(-50%);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (NAVEGACIÓN) - FLECHAS DE CONTROL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (INDICADORES) - PUNTOS DE NAVEGACIÓN
          ========================================== */
       /* PUNTOS INDICADORES - OPTIMIZADOS PARA 480px */
       .slider-puntos {
           display: flex;
           justify-content: center;
           gap: 0.5rem;
           margin-top: 1rem;
           flex-wrap: wrap;
       }
   
       .slider-punto {
           width: 8px;
           height: 8px;
           border-radius: 50%;
           background: #CBD5E1;
           cursor: pointer;
           transition: all 0.3s ease;
           position: relative;
           overflow: hidden;
       }
   
       .slider-punto.activo {
           background: #1E3A8A;
           transform: scale(1.2);
           box-shadow: 0 0 10px rgba(30, 58, 138, 0.5);
       }
   
       .slider-punto:hover {
           background: #2563EB;
           transform: scale(1.1);
       }
   
       /* EFECTO DE RAYA DORADA EN PUNTOS ACTIVOS */
       .slider-punto::before {
           content: '';
           position: absolute;
           top: 0;
           left: -100%;
           width: 100%;
           height: 100%;
           background: linear-gradient(90deg, transparent, #FFD700, transparent);
           transition: left 0.5s ease;
       }
   
       .slider-punto.activo::before {
           left: 100%;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (INDICADORES) - PUNTOS DE NAVEGACIÓN
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CTA) - BOTÓN VER TODOS
          ========================================== */
       /* BOTÓN VER TODOS LOS SERVICIOS - OPTIMIZADO PARA 480px */
       .servicios-cta {
           text-align: center;
           margin-top: 1.5rem;
           margin-bottom: 1rem;
       }
   
       .servicios-cta .btn {
           padding: 0.8rem 1.5rem; /* ✅ PADDING REDUCIDO para 480px */
           font-size: 0.9rem; /* ✅ TAMAÑO REDUCIDO para 480px */
           border-radius: 12px; /* ✅ BORDER RADIUS REDUCIDO */
           min-width: 200px; /* ✅ ANCHO MÍNIMO REDUCIDO */
           max-width: 280px; /* ✅ ANCHO MÁXIMO REDUCIDO */
       }
   
       .servicios-cta .btn i {
           font-size: 1rem; /* ✅ TAMAÑO REDUCIDO para 480px */
       }
   
       /* RESPONSIVE ADJUSTMENTS PARA 480px */
       .servicios-cta .btn span {
           font-size: 0.9rem; /* ✅ TAMAÑO REDUCIDO para 480px */
           font-weight: 600;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CTA) - BOTÓN VER TODOS (FINAL DE BLOQUE 2 SERVICIOS)
          ========================================== */
/* ==========================================
   BREAKPOINT 480px - MÓVIL PEQUEÑO - INICIO DE BLOQUE 3 (TECNOLOGÍA)
   ========================================== */


    /* ==========================================
       INICIO DE BLOQUE 3 (TECNOLOGÍA) - CONTENEDOR PRINCIPAL
       ========================================== */
    
    /* Sección principal de tecnología - Optimización para móvil pequeño */
    .technology.section-bg-amarillo {
        padding: 2.5rem 0;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Contenedor de ancho completo - Ajustes para móvil pequeño */
    .technology .container-full-width {
        padding: 0 1.2rem;
        max-width: 100%;
        margin: 0;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (TECNOLOGÍA) - CONTENEDOR PRINCIPAL
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (HEADER) - ENCABEZADO DE TECNOLOGÍA
       ========================================== */
    
    /* Header centrado - Optimización para móvil pequeño */
    .inicio-tech-header {
        text-align: center;
        margin-bottom: 2.2rem;
        padding: 0 0.8rem;
        max-width: 100%;
    }
    
    /* Título principal - Tamaño mejorado para móvil pequeño */
    .inicio-tech-title {
        font-size: 2rem;
        font-weight: 700;
        color: #1F2937;
        margin-bottom: 1rem;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
    }
    
    /* Subtítulo - Tamaño optimizado para móvil pequeño */
    .inicio-tech-header .inicio-tech-subtitle {
        font-size: 1.1rem;
        color: #1E40AF;
        font-weight: 600;
        margin-bottom: 0.9rem;
        line-height: 1.4;
    }
    
    /* Descripción - Texto mejorado y más legible */
    .inicio-tech-description {
        font-size: 1rem;
        color: #374151;
        line-height: 1.6;
        margin-bottom: 1.8rem;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
        padding: 0 0.8rem;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (HEADER) - ENCABEZADO DE TECNOLOGÍA
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (SHOWCASE) - GRID DE TARJETAS TECNOLÓGICAS
       ========================================== */
    
    /* Grid de tarjetas - Una columna en móvil pequeño */
    .inicio-tech-cards-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.2rem;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 0 0.8rem;
    }
    
    /* Tarjetas de tecnología - Optimización para móvil pequeño */
    .inicio-tech-card {
        background: #FFFFFF;
        border-radius: 14px;
        padding: 0;
        min-height: 420px;
        box-shadow: 0 8px 24px rgba(30, 58, 138, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
        border-top: 4px solid #1E3A8A;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    /* Efecto hover mejorado para móvil pequeño */
    .inicio-tech-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (SHOWCASE) - GRID DE TARJETAS TECNOLÓGICAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (IMÁGENES) - PLACEHOLDERS DE EQUIPOS
       ========================================== */
    
    /* Imagen de tarjeta - Altura mejorada para móvil pequeño */
    .inicio-tech-card-image {
        margin-bottom: 1rem;
        text-align: center;
    }
    
    /* Placeholder de imagen - Tamaño optimizado para móvil pequeño */
    .inicio-tech-card-image .image-placeholder {
        width: 100%;
        height: 180px;
        background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #6B7280;
        border: 2px dashed #D1D5DB;
    }
    
    /* Icono del placeholder - Tamaño mejorado */
    .inicio-tech-card-image .image-placeholder i {
        font-size: 2.2rem;
        margin-bottom: 0.4rem;
        color: #9CA3AF;
    }
    
    /* Texto del placeholder - Tamaño mejorado */
    .inicio-tech-card-image .image-placeholder span {
        font-size: 0.85rem;
        font-weight: 500;
        text-align: center;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (IMÁGENES) - PLACEHOLDERS DE EQUIPOS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (CONTENIDO) - HEADERS Y TÍTULOS DE TARJETAS
       ========================================== */
    
    /* Header de tarjeta - Centrado y bien espaciado */
    .inicio-tech-card-header {
        text-align: center;
        margin-bottom: 1rem;
        padding: 1rem 1.5rem 0;
    }
    
    /* Título de tarjeta - Tamaño optimizado para móvil pequeño */
    .inicio-tech-card-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: #1F2937;
        margin: 0 0 0.4rem 0;
        line-height: 1.3;
    }
    
    /* Marcas de equipos - Texto mejorado */
    .inicio-tech-card-brands {
        color: #E3B23C;
        font-weight: 600;
        font-size: 0.85rem;
        margin: 0;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (CONTENIDO) - HEADERS Y TÍTULOS DE TARJETAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (CUERPO) - DESCRIPCIONES Y VENTAJAS
       ========================================== */
    
    /* Cuerpo de tarjeta - Flexbox optimizado */
    .inicio-tech-card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 0 1.5rem 1.5rem;
    }
    
    /* Descripción de tarjeta - Texto mejorado */
    .inicio-tech-card-description {
        color: #374151;
        line-height: 1.5;
        margin-bottom: 1rem;
        font-size: 0.9rem;
        text-align: center;
    }
    
    /* Ventajas del equipo - Diseño mejorado */
    .inicio-tech-card-advantages {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    /* Elementos de ventaja - Tamaño mejorado */
    .inicio-advantage-item {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.5rem;
        background: rgba(30, 58, 138, 0.05);
        border-radius: 5px;
        border: 1px solid rgba(30, 58, 138, 0.12);
        box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.05);
        transition: transform 0.15s ease, background-color 0.15s ease;
    }
    
    /* Efecto hover mejorado para elementos de ventaja */
    .inicio-advantage-item:hover {
        background: rgba(30, 58, 138, 0.08);
        transform: translateX(3px);
    }
    
    /* Icono de ventaja - Tamaño mejorado */
    .inicio-advantage-item i {
        color: #E3B23C;
        font-size: 0.85rem;
        background: rgba(227, 178, 60, 0.15);
        width: 22px;
        height: 22px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    /* Texto de ventaja - Tamaño mejorado */
    .inicio-advantage-item span {
        color: #1F2937;
        font-weight: 600;
        font-size: 0.8rem;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (CUERPO) - DESCRIPCIONES Y VENTAJAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (UTILIDADES) - ELEMENTOS DE APOYO
       ========================================== */
    
    /* Asegurar que los elementos con z-index no bloqueen la selección */
    .section-bg-amarillo .container-full-width {
        position: relative;
        z-index: 10;
    }
    
    /* Texto centrado para tecnología */
    .technology .text-center {
        text-align: center;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (UTILIDADES) - ELEMENTOS DE APOYO
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE 3 (TECNOLOGÍA) - MÓVIL PEQUEÑO 480px
       ========================================== */



/* ==========================================
   MEDIA QUERY 480px - BLOQUE 4: PROYECTOS DESTACADOS
   Optimización específica para móviles pequeños
   Basado en la estructura del BLOQUE 3 (Tecnología) para 480px
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE 4 (PROYECTOS) - CONTENEDOR PRINCIPAL
       ========================================== */
    
    /* Sección principal de proyectos - Optimización para móvil pequeño */
    .projects.section-bg-azul {
        padding: 2.5rem 0;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Contenedor de ancho completo - Ajustes para móvil pequeño */
    .projects .container {
        padding: 0 1.2rem;
        max-width: 100%;
        margin: 0;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (PROYECTOS) - CONTENEDOR PRINCIPAL
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 4 (HEADER) - ENCABEZADO DE PROYECTOS
       ========================================== */
    
    /* Header centrado - Optimización para móvil pequeño */
    .projects .section-header {
        text-align: center;
        margin-bottom: 2.2rem;
        padding: 0 0.8rem;
        max-width: 100%;
    }
    
    /* Título principal - Tamaño mejorado para móvil pequeño */
    .projects .section-title {
        font-size: 2rem;
        font-weight: 700;
        color: #FFFFFF;
        margin-bottom: 1rem;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    /* Subtítulo - Tamaño mejorado para móvil pequeño */
    .projects .section-subtitle {
        font-size: 1rem;
        color: #E5E7EB;
        line-height: 1.4;
        margin-bottom: 1.8rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
        padding: 0 0.8rem;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (HEADER) - ENCABEZADO DE PROYECTOS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 4 (GRID) - GRID DE TARJETAS DE PROYECTOS
       ========================================== */
    
    /* Grid de proyectos - Una columna en móvil pequeño */
    .inicio-proyectos-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.4rem; /* ✅ AUMENTADO: De 1.2rem a 1.4rem para mejor separación */
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 0 0.8rem;
    }
    
    /* Tarjetas de proyectos - OPTIMIZADAS PARA ELIMINAR ESPACIO MUERTO */
    .inicio-proyectos-card {
        background: #FFFFFF;
        border-radius: 14px; /* ✅ AUMENTADO: De 12px a 14px */
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* ✅ MEJORADO: Sombra más suave */
        border: 1px solid rgba(30, 58, 138, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        min-height: 400px; /* ✅ AUMENTADO: De 380px a 400px para 480px */
        height: auto; /* ✅ NUEVO: Altura automática para acomodar contenido */
    }
    
    /* Efecto hover desactivado en móvil */
    .inicio-proyectos-card:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }
    
    /* Imagen del proyecto - Altura optimizada para móvil pequeño */
    .project-image {
        height: 260px; /* ✅ AUMENTADO: De 250px a 260px para 480px */
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    
    /* Imagen real del proyecto */
    .project-image .imagen-real {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }
    
    /* Placeholder de imagen */
    .project-image .image-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
        color: #6B7280;
        font-size: 2.4rem; /* ✅ AUMENTADO: De 2.2rem a 2.4rem */
        width: 100%;
        height: 100%;
    }
    
    .project-image .image-placeholder span {
        font-size: 0.9rem; /* ✅ AUMENTADO: De 0.85rem a 0.9rem */
        margin-top: 0.5rem;
        text-align: center;
        padding: 0 1rem;
    }
    
    /* Overlay del proyecto */
    .project-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(30,58,138,0.2) 100%);
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 1.2rem; /* ✅ AUMENTADO: De 1rem a 1.2rem */
    }
    
    /* Categoría del proyecto */
    .project-category {
        background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%);
        color: #1a202c;
        padding: 0.5rem 1rem; /* ✅ AUMENTADO: De 0.4rem 0.8rem a 0.5rem 1rem */
        border-radius: 15px;
        font-size: 0.85rem; /* ✅ AUMENTADO: De 0.75rem a 0.85rem */
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
    }
    
    .project-content {
        padding: 1.4rem 1.2rem 1.2rem 1.2rem;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    
    /* Título del proyecto - Optimizado para 480px */
    .project-title {
        font-size: 1.4rem; /* ✅ AUMENTADO: De 1.3rem a 1.4rem */
        font-weight: 700;
        color: #1a202c;
        margin-bottom: 0.8rem; /* ✅ AUMENTADO: De 0.7rem a 0.8rem */
        line-height: 1.3;
    }
    
    .project-description {
        font-size: 0.95rem;
        color: #4B5563;
        line-height: 1.5;
        flex: 1;
        margin-bottom: 0;
    }
    
    .project-details {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin-top: 1.2rem;
    }
    
    /* Item de detalle - AMARILLO COMO EN DESKTOP */
    .detail-item {
        background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%); /* ✅ CORREGIDO: Fondo amarillo como desktop */
        color: #1a202c; /* ✅ CORREGIDO: Texto oscuro para contraste */
        padding: 0.5rem 0.8rem; /* ✅ AUMENTADO: De 0.4rem 0.7rem a 0.5rem 0.8rem */
        border-radius: 12px;
        font-size: 0.8rem; /* ✅ AUMENTADO: De 0.75rem a 0.8rem */
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.5rem; /* ✅ AUMENTADO: De 0.4rem a 0.5rem */
        border: 2px solid rgba(255, 255, 255, 0.3); /* ✅ NUEVO: Borde sutil */
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3); /* ✅ NUEVO: Sombra dorada */
        transition: all 0.3s ease;
        flex: 1; /* ✅ NUEVO: Hacer que los items se distribuyan equitativamente */
        min-width: 0; /* ✅ NUEVO: Permitir que se encojan si es necesario */
    }
    
    .detail-item i {
        color: #1a202c; /* ✅ CORREGIDO: Icono oscuro para contraste */
        font-size: 0.75rem; /* ✅ AUMENTADO: De 0.7rem a 0.75rem */
        margin-right: 0.4rem; /* ✅ AUMENTADO: De 0.3rem a 0.4rem */
    }
    
    /* ✅ NUEVO: Efecto hover para los detail-item (desactivado en móvil) */
    .inicio-proyectos-card:hover .detail-item {
        background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%); /* ✅ NUEVO: Color naranja en hover */
        color: #ffffff; /* ✅ NUEVO: Texto blanco en hover */
        transform: translateY(-2px) scale(1.02); /* ✅ NUEVO: Elevación y escala */
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4); /* ✅ NUEVO: Sombra naranja */
        border-color: rgba(255, 255, 255, 0.5); /* ✅ NUEVO: Borde más visible */
    }
    
    .inicio-proyectos-card:hover .detail-item i {
        color: #ffffff; /* ✅ NUEVO: Icono blanco en hover */
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (GRID) - GRID DE TARJETAS DE PROYECTOS
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE 4 (PROYECTOS) - MÓVIL PEQUEÑO 480px
       ========================================== */

/* ==========================================
   MEDIA QUERY 480px - BLOQUE CLIENTES
   Optimización específica para móviles pequeños
   Basado en la estructura del BLOQUE CLIENTES para 360px
   ========================================== */

   
   /* ==========================================
      INICIO DE BLOQUE CLIENTES - CONTENEDOR PRINCIPAL
      ========================================== */
   
   /* Sección principal de clientes - Optimización para móvil pequeño */
   .clientes {
    padding: 2.5rem 0; /* ✅ AUMENTADO: De 2rem a 2.5rem para más espacio */
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Contenedor de ancho completo - Ajustes para móvil pequeño */
.clientes .container {
    padding: 0 1.2rem; /* ✅ AUMENTADO: De 1rem a 1.2rem para más espacio */
    max-width: 100%;
    margin: 0;
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES - CONTENEDOR PRINCIPAL
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (HEADER) - ENCABEZADO DE CLIENTES
   ========================================== */

/* Header centrado - Optimización para móvil pequeño */
.clientes .section-header {
    text-align: center;
    margin-bottom: 2.2rem; /* ✅ AUMENTADO: De 2rem a 2.2rem */
    padding: 0 0.8rem; /* ✅ AUMENTADO: De 0.5rem a 0.8rem */
    max-width: 100%;
}

/* Título principal - Tamaño aumentado para móvil pequeño */
/* ✅ ELIMINADO: .clientes .section-title 480px ahora usa el estilo general */

/* Subtítulo - Tamaño aumentado para móvil pequeño */
.clientes .section-subtitle {
    font-size: 1rem; /* ✅ AUMENTADO: De 0.9rem a 1rem */
    color: #000000; /* ✅ MANTENIDO: Color negro para mejor legibilidad */
    line-height: 1.4;
    margin-bottom: 1.8rem; /* ✅ AUMENTADO: De 1.5rem a 1.8rem */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    padding: 0 0.8rem; /* ✅ AUMENTADO: De 0.5rem a 0.8rem */
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (HEADER) - ENCABEZADO DE CLIENTES
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CARRUSEL) - CARRUSEL DE CLIENTES
   ========================================== */

/* Contenedor del carrusel - COMPLETAMENTE TRANSPARENTE SIN ELEMENTOS BLANCOS */
.inicio-clientes-carousel-container {
    padding: 0; /* ✅ MANTENIDO: Sin padding para eliminar espacios blancos */
    margin: 0 auto;
    max-width: 100%;
    background: transparent; /* ✅ TRANSPARENTE: Fondo completamente transparente */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados que crean espacios blancos */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
    border: none; /* ✅ MANTENIDO: Sin bordes */
}

/* Carrusel principal - MANTIENE COMPORTAMIENTO HORIZONTAL PARA 480px */
.inicio-clientes-carousel {
    display: flex;
    flex-direction: row; /* ✅ MANTENIDO: Mantiene flujo horizontal */
    gap: 0; /* ✅ MANTENIDO: Sin gap entre slides */
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* ✅ MANTENIDO: Oculta slides no activos */
}

/* Slides individuales - DOS TARJETAS POR SLIDE EN MÓVIL PEQUEÑO */
.inicio-clientes-slide {
    display: flex;
    flex-direction: row; /* ✅ MANTENIDO: Mantiene flujo horizontal */
    gap: 1rem; /* ✅ AUMENTADO: De 0.8rem a 1rem para más espacio entre tarjetas */
    width: 100%;
    min-width: 100%; /* ✅ MANTENIDO: Ancho mínimo para ocupar todo el carrusel */
    opacity: 0; /* ✅ MANTENIDO: Invisible por defecto */
    visibility: hidden; /* ✅ MANTENIDO: Oculto por defecto */
    position: absolute; /* ✅ MANTENIDO: Posición absoluta para superposición */
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Slide activo - VISIBLE */
.inicio-clientes-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative; /* ✅ MANTENIDO: Posición relativa cuando está activo */
}

/* Tarjetas de cliente - SEMI-TRANSPARENTES PARA MOSTRAR LOGOS DE FONDO */
.inicio-cliente-card-featured {
    background: rgba(255, 255, 255, 0.85); /* ✅ MANTENIDO: Fondo semi-transparente */
    border-radius: 18px; /* ✅ AUMENTADO: De 16px a 18px para bordes más redondeados */
    padding: 1.2rem; /* ✅ AUMENTADO: De 1rem a 1.2rem para más espacio interno */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ✅ MANTENIDO: Sombra más suave */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.3); /* ✅ MANTENIDO: Borde más sutil */
    position: relative;
    overflow: hidden;
    min-height: 300px; /* ✅ AUMENTADO: De 280px a 300px para más altura */
    height: auto;
    width: calc(50% - 0.5rem); /* ✅ AJUSTADO: De 0.4rem a 0.5rem para mejor separación */
    max-width: calc(50% - 0.5rem);
    flex-shrink: 0; /* ✅ MANTENIDO: No se encoge */
    flex-grow: 0; /* ✅ MANTENIDO: No crece */
}

/* Efecto hover desactivado en móvil */
.inicio-cliente-card-featured:hover {
    transform: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Contenedor del logo - SEMI-TRANSPARENTE PARA MOSTRAR LOGOS DE FONDO */
.cliente-logo-container {
    position: relative;
    width: 100%;
    height: 110px; /* ✅ AUMENTADO: De 100px a 110px para más espacio */
    min-height: 110px;
    max-height: 110px;
    margin-bottom: 1rem; /* ✅ AUMENTADO: De 0.8rem a 1rem */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 249, 255, 0.7); /* ✅ MANTENIDO: Fondo semi-transparente */
    border-radius: 12px; /* ✅ AUMENTADO: De 10px a 12px para bordes más redondeados */
    overflow: hidden;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 1px solid rgba(14, 165, 233, 0.3); /* ✅ MANTENIDO: Borde más sutil */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); /* ✅ MANTENIDO: Sombra más sutil */
    flex-shrink: 0;
}

/* Imagen del cliente - Tamaño optimizado para móvil pequeño */
.cliente-imagen-featured {
    width: 100%;
    height: 100%;
    min-width: 90px; /* ✅ AUMENTADO: De 80px a 90px para logos más grandes */
    min-height: 90px; /* ✅ AUMENTADO: De 80px a 90px para logos más grandes */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease-out;
    position: relative;
    z-index: 2;
}

/* Información del cliente - Optimizada para móvil pequeño */
.cliente-info-featured {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0.6rem; /* ✅ AUMENTADO: De 0.5rem a 0.6rem */
    border-radius: 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Nombre del cliente - Tamaño optimizado para móvil pequeño */
.cliente-nombre-featured {
    font-size: 1rem; /* ✅ AUMENTADO: De 0.95rem a 1rem */
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.6rem; /* ✅ AUMENTADO: De 0.5rem a 0.6rem */
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-align: center; /* ✅ MANTENIDO: Centrado para mejor apariencia */
}

/* Categoría del cliente - Optimizada para móvil pequeño */
.cliente-categoria-featured {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 0.4rem 0.8rem; /* ✅ AUMENTADO: De 0.3rem 0.6rem a 0.4rem 0.8rem */
    border-radius: 18px; /* ✅ AUMENTADO: De 15px a 18px para bordes más redondeados */
    font-size: 0.7rem; /* ✅ AUMENTADO: De 0.65rem a 0.7rem */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px; /* ✅ AUMENTADO: De 0.3px a 0.4px */
    margin-bottom: 0.4rem; /* ✅ AUMENTADO: De 0.3rem a 0.4rem */
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3); /* ✅ MANTENIDO: Sombra más sutil */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    align-self: center;
}

/* Colores específicos por tipo de industria - Optimizados para móvil pequeño */
.cliente-categoria-featured[data-industry="industrial"] {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.3);
}

.cliente-categoria-featured[data-industry="comercial"] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3);
}

.cliente-categoria-featured[data-industry="vivienda"] {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 3px 8px rgba(124, 58, 237, 0.3);
}

.cliente-categoria-featured[data-industry="construccion"] {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    box-shadow: 0 3px 8px rgba(234, 88, 12, 0.3);
}

.cliente-categoria-featured[data-industry="gobierno"] {
    background: linear-gradient(135deg, #1f2937, #111827);
    box-shadow: 0 3px 8px rgba(31, 41, 55, 0.3);
}

.cliente-categoria-featured[data-industry="financiero"] {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 3px 8px rgba(8, 145, 178, 0.3);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CARRUSEL) - CARRUSEL DE CLIENTES
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CONTROLES) - CONTROLES DE NAVEGACIÓN
   ========================================== */

/* Controles del carrusel - FLOTANTES SIN LÍNEAS HORIZONTALES (IGUAL A 360px) */
.inicio-clientes-controls {
    position: absolute;
    top: 50%;
    left: -0.5rem; /* ✅ IGUAL A 360px: Más hacia la izquierda para flotar */
    right: -0.5rem; /* ✅ IGUAL A 360px: Más hacia la derecha para flotar */
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    padding: 0; /* ✅ IGUAL A 360px: Sin padding para eliminar líneas horizontales */
    z-index: 10;
    pointer-events: none; /* ✅ MANTENIDO: Para que no interfiera con el carrusel */
}

/* ✅ ELIMINAR PSEUDO-ELEMENTOS QUE CREAN LÍNEAS VERTICALES (IGUAL A 360px) */
.inicio-clientes-controls::before,
.inicio-clientes-controls::after {
    display: none; /* ✅ IGUAL A 360px: Sin gradientes blancos verticales */
}

/* Botones de navegación - Tamaño optimizado para móvil pequeño */
.inicio-clientes-btn {
    width: 36px; /* ✅ AUMENTADO: De 32px a 36px para mejor visibilidad */
    height: 36px; /* ✅ AUMENTADO: De 32px a 36px para mejor visibilidad */
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem; /* ✅ AUMENTADO: De 0.8rem a 0.9rem */
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.4); /* ✅ AUMENTADO: Sombra más visible */
    position: relative;
    overflow: hidden;
    pointer-events: auto; /* ✅ MANTENIDO: Para que sean clickeables */
}

.inicio-clientes-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.inicio-clientes-btn:active {
    transform: scale(0.95);
}

.inicio-clientes-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(1);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CONTROLES) - CONTROLES DE NAVEGACIÓN
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (INDICADORES) - INDICADORES DE PAGINACIÓN
   ========================================== */

/* Indicadores del carrusel - COMPLETAMENTE TRANSPARENTES SIN ELEMENTOS BLANCOS */
.inicio-clientes-indicators {
    display: flex;
    justify-content: center;
    gap: 0.8rem; /* ✅ AUMENTADO: De 0.6rem a 0.8rem para más separación */
    margin-top: 1.8rem; /* ✅ AUMENTADO: De 1.5rem a 1.8rem */
    padding: 1rem 1.2rem; /* ✅ AUMENTADO: De 0.8rem 1rem a 1rem 1.2rem */
    background: transparent; /* ✅ MANTENIDO: Sin fondo blanco */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados */
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    border: none; /* ✅ MANTENIDO: Sin bordes */
    position: relative;
}

/* Indicador individual - Tamaño optimizado para móvil pequeño */
.inicio-clientes-indicator {
    width: 12px; /* ✅ AUMENTADO: De 10px a 12px para mejor visibilidad */
    height: 12px; /* ✅ AUMENTADO: De 10px a 12px para mejor visibilidad */
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    cursor: pointer;
    transition: all 0.4s ease;
    border: 2px solid rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.inicio-clientes-indicator:hover {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    transform: scale(1.2);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.inicio-clientes-indicator.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    transform: scale(1.3);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.3);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (INDICADORES) - INDICADORES DE PAGINACIÓN
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CTA) - ESTADÍSTICAS DE CLIENTES
   ========================================== */

/* CTA de clientes - Optimizado para móvil pequeño */
.clientes-cta {
    margin-top: 2.5rem; /* ✅ AUMENTADO: De 2rem a 2.5rem */
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Estadísticas de clientes - Optimizadas para móvil pequeño */
.clientes-stats {
    display: flex;
    flex-direction: column;
    gap: 1.2rem; /* ✅ AUMENTADO: De 1rem a 1.2rem para más separación */
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

/* Item de estadística - COMPLETAMENTE TRANSPARENTE SIN ELEMENTOS BLANCOS */
.clientes .stat-item {
    display: flex;
    align-items: center;
    gap: 1rem; /* ✅ AUMENTADO: De 0.8rem a 1rem para más separación */
    background: transparent; /* ✅ MANTENIDO: Sin fondo blanco */
    padding: 1rem 1.4rem; /* ✅ AUMENTADO: De 0.8rem 1rem a 1rem 1.4rem */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    border: none; /* ✅ MANTENIDO: Sin bordes */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 300px; /* ✅ AUMENTADO: De 280px a 300px para más ancho */
    max-width: 100%;
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
}

/* Efecto hover desactivado en móvil para evitar sombras blancas */
.clientes .stat-item:hover {
    transform: none;
    box-shadow: none;
}

/* Icono de estadística - Optimizado para móvil pequeño */
.clientes .stat-item i {
    font-size: 1.4rem; /* ✅ AUMENTADO: De 1.2rem a 1.4rem */
    color: #007bff;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Texto de estadística - Optimizado para móvil pequeño */
.clientes .stat-item strong {
    color: #007bff;
    font-weight: 700;
    font-size: 1.2rem; /* ✅ AUMENTADO: De 1.1rem a 1.2rem */
    margin-right: 0.4rem; /* ✅ AUMENTADO: De 0.3rem a 0.4rem */
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CTA) - ESTADÍSTICAS DE CLIENTES
   ========================================== */

/* ==========================================
   FINAL DE BLOQUE CLIENTES - MÓVIL PEQUEÑO 480px
   ========================================== */

/* ==========================================
   BREAKPOINT 480px - MÓVIL PEQUEÑO
   BLOQUE: SOBRE LAMA TOPOGRAFÍA
   OPTIMIZADO PARA PANTALLAS DE 480px
   BASADO EN EL DISEÑO EXITOSO DE 360px
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA - SECCIÓN PRINCIPAL
       ========================================== */
    
    /* Contenedor principal - OPTIMIZADO PARA 480px */
    .about.section-bg-amarillo {
        padding: 2rem 0;
        margin: 0;
        overflow-x: hidden;
        scroll-behavior: smooth;
        width: 100vw;
        max-width: 100vw;
        font-size: 15px;
        line-height: 1.5;
    }
    
    /* Contenedor de ancho completo - SIN RESTRICCIONES */
    .container-full-width {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0 1rem;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (HEADER) - TÍTULO Y SUBTÍTULO
       ========================================== */
    
    .inicio-about-header {
        margin-bottom: 2rem;
        text-align: center;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .about-title-container {
        max-width: 100%;
        width: 100%;
        padding: 1.5rem;
        margin: 0 auto 2rem auto;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        border: 2px solid rgba(30, 64, 175, 0.3);
        border-radius: 18px;
        box-shadow: 0 10px 25px rgba(30, 64, 175, 0.15);
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    
    .about-title-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .inicio-about-title {
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 1rem;
        line-height: 1.2;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .inicio-about-subtitle {
        font-size: 1rem;
        color: var(--text-secondary);
        line-height: 1.5;
        margin: 0;
        font-weight: 400;
        max-width: 100%;
    }

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (HEADER) - TÍTULO Y SUBTÍTULO
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (FILA SUPERIOR) - HISTORIA + VALORES
       ========================================== */
    
    .inicio-about-top-row {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin-bottom: 2.5rem;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (HISTORIA) - NUESTRA TRAYECTORIA
       ========================================== */
    
    .about-historia-section {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .inicio-about-story-compact {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* Cuadro principal de contenido - MÁXIMO ANCHO */
    .story-content-box {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        border-radius: 18px;
        padding: 1.5rem;
        box-shadow: 0 10px 25px rgba(30, 64, 175, 0.15);
        border: 2px solid rgba(30, 64, 175, 0.3);
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    
    /* Título del bloque */
    .story-title-compact {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0 0 1rem 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
        text-align: center;
    }
    
    /* Layout vertical para móvil */
    .story-content-horizontal {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        margin-top: 0;
    }
    
    /* Sección de texto */
    .story-text-section {
        width: 100%;
        order: 1;
    }
    
    .story-text-compact {
        font-size: 1rem;
        line-height: 1.6;
        color: var(--text-color);
        margin: 0;
        text-align: left;
    }
    
    .story-text-compact strong {
        color: var(--primary-color);
        font-weight: 600;
    }
    
    /* Sección de imagen */
    .story-image-section {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        order: 2;
    }
    
    .story-image-placeholder {
        border-radius: 14px;

        padding: 2rem;
        border: 2px solid rgba(30, 64, 175, 0.3);
        text-align: center;
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 220px;
        margin: 0;
    }
    
    .story-image-placeholder:hover {


        transform: translateY(-2px);

    }
    
    .image-coming-soon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        color: var(--primary-color);
    }
    
    .image-coming-soon i {
        font-size: 2.5rem;
        color: var(--primary-color);
    }
    
    .image-coming-soon span {
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--primary-color);
        text-align: center;
    }

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (HISTORIA) - NUESTRA TRAYECTORIA
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (VALORES) - LO QUE NOS DIFERENCIA
       ========================================== */
    
    .about-valores-section {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .inicio-about-values-compact {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* Título de valores - MÁXIMO ANCHO */
    .values-title-container {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 14px;
        padding: 1.2rem 1rem;
        margin-bottom: 1.2rem;
        box-shadow: 0 6px 15px rgba(30, 64, 175, 0.12);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .values-title-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .values-title-compact {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
    }
    
    /* Grid de valores - OPTIMIZADO PARA 480px */
    .values-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        row-gap: 1.2rem;
        margin-top: 0;
        flex: 1;
        align-content: start;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Items de valores */
    .value-item-compact {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 12px;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.6rem;
        transition: transform 0.3s ease;
        min-height: 90px;
        justify-content: center;
    }
    
    .value-item-compact:hover {


        transform: translateY(-2px);

    }
    
    /* Iconos de valores */
    .value-icon-small {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.4rem;
        box-shadow: 0 3px 10px rgba(30, 64, 175, 0.35);
    }
    
    .value-icon-small i {
        font-size: 1rem;
        color: white;
    }
    
    /* Contenido de valores */
    .value-content-small {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.3rem;
        width: 100%;
    }
    
    .value-content-small h4 {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--primary-color);
        margin: 0;
        line-height: 1.2;
        font-family: 'Poppins', sans-serif;
    }
    
    .value-content-small p {
        font-size: 0.75rem;
        color: var(--text-secondary);
        line-height: 1.3;
        margin: 0;
        font-weight: 500;
        text-align: center;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (VALORES) - LO QUE NOS DIFERENCIA
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (FILA SUPERIOR) - HISTORIA + VALORES
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (FILA INFERIOR) - ESTADÍSTICAS + CTA + CERTIFICACIONES
       ========================================== */
    
    .inicio-about-bottom-row {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (ESTADÍSTICAS) - ESTADÍSTICAS DE EMPRESA
       ========================================== */
    
    .about-stats-section {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .inicio-about-stats-compact-horizontal {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 14px;
        padding: 1rem;
        box-shadow: 0 6px 15px rgba(30, 64, 175, 0.12);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-stats-compact-horizontal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .stats-horizontal-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        row-gap: 1rem;
        margin-top: 1rem;
    }
    
    .stat-horizontal {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 10px;
        padding: 1.2rem 0.8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.4rem;
        min-width: 0;
        width: 100%;
        transition: transform 0.3s ease;
    }
    
    .stat-horizontal:hover {


        transform: translateY(-2px);

    }
    
    .stat-number {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--primary-color);
        line-height: 1;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .stat-label {
        font-size: 0.6rem;
        color: var(--text-secondary);
        font-weight: 500;
        line-height: 1.1;
        letter-spacing: 0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (ESTADÍSTICAS) - ESTADÍSTICAS DE EMPRESA
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (CTA) - CALL TO ACTION
       ========================================== */
    
    .about-cta-section {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .inicio-about-cta-compact {
        background: linear-gradient(135deg, rgba(30, 64, 175, 0.95) 0%, rgba(59, 130, 246, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.3);
        border-radius: 14px;
        padding: 1.2rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(30, 64, 175, 0.25);
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-cta-compact::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .inicio-about-cta-compact h3 {
        font-size: 1.2rem;
        font-weight: 700;
        color: white;
        margin: 0 0 0.6rem 0;
        line-height: 1.2;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .inicio-about-cta-compact p {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.4;
        margin: 0 0 1.2rem 0;
    }
    
    .cta-buttons-compact {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .cta-buttons-compact .btn {
        padding: 0.7rem 1.4rem;
        font-size: 0.9rem;
        border-radius: 10px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        transition: all 0.3s ease;
        font-weight: 600;
        min-width: 220px;
        justify-content: center;
    }
    
    .cta-buttons-compact .btn-primary {
        background: linear-gradient(135deg, #E3B23C 0%, #FFD700 100%);
        color: var(--primary-color);
        border: 1px solid rgba(227, 178, 60, 0.3);
    }
    
    .cta-buttons-compact .btn-primary:hover {
        background: linear-gradient(135deg, #D4A017 0%, #E6C200 100%);
        transform: translateY(-2px);

    }
    
    .cta-buttons-compact .btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .cta-buttons-compact .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(255, 255, 255, 0.25);
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (CTA) - CALL TO ACTION
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (CERTIFICACIONES) - CREDENCIALES Y CERTIFICACIONES
       ========================================== */
    
    .about-certificaciones-section {
        width: 100%;
        max-width: 100%;
        order: 3;
    }
    
    .inicio-about-credentials-horizontal {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 14px;
        padding: 1rem;
        box-shadow: 0 6px 15px rgba(30, 64, 175, 0.12);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-credentials-horizontal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .credentials-title-horizontal {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0 0 1rem 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
    }
    
    .credentials-horizontal {
        display: flex;
        flex-direction: column;
        gap: 0.8rem;
        align-items: center;
    }
    
    .credential-horizontal {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 10px;
        padding: 0.8rem 1.2rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--primary-color);
        transition: all 0.3s ease;
        width: 100%;
        justify-content: center;
    }
    
    .credential-horizontal:hover {


        transform: translateY(-2px);

    }
    
    .credential-horizontal i {
        font-size: 1rem;
        color: var(--primary-color);
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (CERTIFICACIONES) - CREDENCIALES Y CERTIFICACIONES
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (FILA INFERIOR) - ESTADÍSTICAS + CTA + CERTIFICACIONES
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (UTILIDADES) - OPTIMIZACIONES Y OVERRIDES
       ========================================== */
    
    /* Asegurar que todo el texto sea seleccionable */
    .about.section-bg-amarillo * {
        user-select: text;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        box-sizing: border-box;
    }
    
    /* Asegurar que no haya scroll horizontal */
    body {
        overflow-x: hidden;
    }
    
    /* Asegurar que los botones sean táctiles */
    .btn, .value-item-compact, .stat-horizontal, .credential-horizontal {
        min-height: 48px;
        touch-action: manipulation;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (UTILIDADES) - OPTIMIZACIONES Y OVERRIDES
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA - MÓVIL PEQUEÑO 480px
       ========================================== */

    /* ==========================================
       OVERRIDES ESPECÍFICOS PARA 480px - SOBRESCRITURA DE ESTILOS BASE
       ========================================== */
    
    /* Sobrescribir cualquier max-width del CSS base */
    .about.section-bg-amarillo .container-full-width,
    .about.section-bg-amarillo .inicio-about-header,
    .about.section-bg-amarillo .inicio-about-top-row,
    .about.section-bg-amarillo .inicio-about-bottom-row,
    .about.section-bg-amarillo .about-historia-section,
    .about.section-bg-amarillo .about-valores-section,
    .about.section-bg-amarillo .about-stats-section,
    .about.section-bg-amarillo .about-cta-section,
    .about.section-bg-amarillo .about-certificaciones-section,
    .about.section-bg-amarillo .inicio-about-story-compact,
    .about.section-bg-amarillo .inicio-about-values-compact,
    .about.section-bg-amarillo .story-content-box,
    .about.section-bg-amarillo .values-title-container,
    .about.section-bg-amarillo .inicio-about-stats-compact-horizontal,
    .about.section-bg-amarillo .inicio-about-cta-compact,
    .about.section-bg-amarillo .inicio-about-credentials-horizontal,
    .about.section-bg-amarillo .about-title-container {
        max-width: 100%;
        width: 100%;
    }
    
    /* Forzar layout vertical en todos los contenedores */
    .about.section-bg-amarillo .inicio-about-top-row {
        display: flex;
        flex-direction: column;
    }
    
    .about.section-bg-amarillo .inicio-about-bottom-row {
        display: flex;
        flex-direction: column;
    }

    /* ==========================================
       FINAL OVERRIDES ESPECÍFICOS PARA 480px - SOBRESCRITURA DE ESTILOS BASE
       ========================================== */
       

   
} /* 🎯 FIN BLOQUE HERO - 480px */


/* ==========================================
   MEDIA QUERY 600px - BLOQUE HERO
   Optimización específica para móviles grandes
   Basado en media_480px_hero.css pero adaptado para 600px
   ========================================== */

@media (max-width: 600px) and (min-width: 481px) {
/* ==========================================
   BREAKPOINT 600px - INICIO DE BLOQUE 2 (SERVICIOS)
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE 2 (SERVICIOS) - CONTENEDOR PRINCIPAL
       ========================================== */
       .servicios-slider-container,
       .inicio-servicios-slider {
           margin-top: 1rem;
           width: 100vw;
           max-width: 100vw;
           padding: 0;
           overflow: hidden;
           margin-left: calc(-50vw + 50%);
           margin-right: calc(-50vw + 50%);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (SERVICIOS) - CONTENEDOR PRINCIPAL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CARRUSEL) - SLIDER PRINCIPAL
          ========================================== */
       .servicios-slider {
           display: flex;
           align-items: center;
           padding: 1rem 0; /* ✅ PADDING MÁS REDUCIDO para 600px */
           min-height: 420px; /* ✅ ALTURA MÁS REDUCIDA para no tapar "Expertos en" */
           overflow: hidden;
           position: relative;
           width: 100vw;
           max-width: 100vw;
           
           /* Variables CSS para controlar difuminado */
           --difuminado-izquierdo: hidden;
           --difuminado-derecho: visible;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CARRUSEL) - SLIDER PRINCIPAL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (DIFUMINADO) - GRADIENTES LATERALES
          ========================================== */
       /* DIFUMINADO LATERAL - OPTIMIZADO PARA 600px */
       .servicios-slider::before,
       .servicios-slider::after {
           content: '';
           position: absolute;
           top: 0;
           bottom: 0;
           width: 30px; /* Más ancho para 600px */
           z-index: 10;
           pointer-events: none;
           transition: opacity 0.5s ease;
       }
   
       .servicios-slider::before {
           left: 0;
           background: linear-gradient(to right, rgba(30, 58, 138, 1) 0%, rgba(30, 58, 138, 0.8) 40%, rgba(30, 58, 138, 0.3) 80%, transparent 100%);
           opacity: var(--difuminado-izquierdo);
       }
   
       .servicios-slider::after {
           right: 0;
           background: linear-gradient(to left, rgba(30, 58, 138, 1) 0%, rgba(30, 58, 138, 0.8) 40%, rgba(30, 58, 138, 0.3) 80%, transparent 100%);
           opacity: var(--difuminado-derecho);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (DIFUMINADO) - GRADIENTES LATERALES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CONTENEDOR INTERNO) - WRAPPER DE SLIDES
          ========================================== */
       .servicios-slider-inner {
           display: flex;
           align-items: center;
           transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           width: max-content;
           padding: 0 1rem; /* ✅ PADDING para 600px - SOBRESCRIBE inicio.css */
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CONTENEDOR INTERNO) - WRAPPER DE SLIDES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (TARJETAS) - CARDS DE SERVICIOS
          ========================================== */
       /* TARJETAS DE SERVICIOS - UNO EN UNO PARA 600px - DIMENSIONES OPTIMIZADAS */
       .servicio-item {
           width: 420px; /* ✅ ANCHO OPTIMIZADO para 600px */
           min-width: 420px;
           height: 520px; /* ✅ ALTURA REDUCIDA para eliminar espacio muerto */
           min-height: 520px;
           max-height: 520px;
           background: white;
           border-radius: 12px; /* ✅ BORDER RADIUS REDUCIDO */
           box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* ✅ SOMBRA MÁS SUAVE */
           border: 2px solid rgba(30, 58, 138, 0.15);
           flex-shrink: 0;
           transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           display: block;
           margin: 0 0.4rem; /* ✅ MARGEN para 600px */
           position: relative;
           overflow: hidden;
       }
   
       /* COLORES ALTERNADOS PARA CADA TARJETA */
       .servicio-item:nth-child(odd) {
           background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
           border-color: rgba(30, 58, 138, 0.2);
       }
   
       .servicio-item:nth-child(even) {
           background: linear-gradient(135deg, #F0F4FF 0%, #E6F0FF 100%);
           border-color: rgba(30, 58, 138, 0.25);
       }
   
       /* EFECTO HOVER EN TARJETAS */
       .servicio-item:hover {
           transform: translateY(-8px);
           box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
           border-color: rgba(30, 58, 138, 0.3);
       }
   
       /* EFECTO DE BORDE DORADO AL HOVER */
       .servicio-item::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           height: 4px;
           background: linear-gradient(90deg, #E3B23C, #FFD700, #E3B23C);
           transform: scaleX(0);
           transition: transform 0.4s ease;
           z-index: 5;
       }
   
       .servicio-item:hover::before {
           transform: scaleX(1);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (TARJETAS) - CARDS DE SERVICIOS
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CONTENIDO) - TEXTO E IMÁGENES
          ========================================== */
       /* Contenido de las tarjetas - DISTRIBUCIÓN VERTICAL OPTIMIZADA PARA 600px */
       .servicio-contenido {
           display: flex;
           flex-direction: column; /* ✅ VERTICAL: texto arriba, imagen abajo */
           height: 520px; /* ✅ ALTURA REDUCIDA para eliminar espacio muerto */
           min-height: 520px;
           max-height: 520px;
           position: relative;
       }
   
       /* Texto arriba - ALTURA OPTIMIZADA PARA 600px */
       .servicio-texto {
           flex: 1; /* ✅ FLEXIBLE para ocupar espacio disponible */
           min-height: 240px; /* ✅ ALTURA MÍNIMA REDUCIDA */
           width: 100%;
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
           padding: 1.4rem; /* ✅ PADDING REDUCIDO para 600px */
           padding-bottom: 0.8rem;
           position: relative;
           box-sizing: border-box;
       }
   
       .servicio-titulo {
           font-size: 1.5rem; /* ✅ TAMAÑO OPTIMIZADO para 600px */
           font-weight: 700;
           color: #1E3A8A;
           margin-bottom: 0.8rem; /* ✅ MARGEN REDUCIDO */
           line-height: 1.3; /* ✅ LINE-HEIGHT COMPACTO */
           text-align: left;
           transition: all 0.4s ease;
       }
   
       .servicio-item:hover .servicio-titulo {
           color: #E3B23C;
           transform: translateY(-2px);
       }
   
       .servicio-descripcion {
           color: #2D3748;
           line-height: 1.5; /* ✅ LINE-HEIGHT COMPACTO */
           margin-bottom: 0;
           font-weight: 500;
           font-size: 0.95rem; /* ✅ TAMAÑO REDUCIDO para 600px */
           text-align: left;
           flex-grow: 1; /* ✅ Ocupar espacio disponible */
           display: flex;
           align-items: flex-start;
       }
   
       .servicio-item:hover .servicio-descripcion {
           color: #1A202C;
       }
   
       /* Botón Saber más información - OCULTO EN 600px PARA MEJOR UX */
       .servicio-enlace {
           display: none; /* ✅ OCULTO en 600px - mejor UX */
       }

       /* TAP HINT - Indicador de navegación en móvil 600px */
       .servicio-item::after {
           content: 'Toca para más información →';
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           background: rgba(30, 58, 138, 0.88);
           color: white;
           font-size: 0.8rem;
           font-weight: 600;
           text-align: center;
           padding: 0.55rem 1rem;
           z-index: 10;
           letter-spacing: 0.02em;
           font-family: var(--font-primary);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CONTENIDO) - TEXTO E IMÁGENES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (IMÁGENES) - PLACEHOLDERS Y FALLBACKS
          ========================================== */
       /* Imagen abajo - ALTURA OPTIMIZADA PARA 600px */
       .servicio-imagen {
           flex: none;
           height: 320px;
           min-height: 320px;
           max-height: 320px;
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: center;
           border-top: 1px solid rgba(30, 58, 138, 0.1);
           position: relative;
           background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
           box-shadow: inset 0 0 20px rgba(227, 178, 60, 0.15);
           transition: all 0.5s ease;
           box-sizing: border-box;
       }
   
       /* COLORES ALTERNADOS PARA LAS IMÁGENES */
       .servicio-item:nth-child(odd) .servicio-imagen {
           background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
           box-shadow: inset 0 0 20px rgba(227, 178, 60, 0.15);
       }
   
       .servicio-item:nth-child(even) .servicio-imagen {
           background: linear-gradient(135deg, #E6F0FF 0%, #B3D9FF 100%);
           box-shadow: inset 0 0 20px rgba(30, 58, 138, 0.15);
       }
   
       .servicio-item:hover .servicio-imagen {
           background: linear-gradient(135deg, #FFE082 0%, #FFD700 100%);
           box-shadow: inset 0 0 25px rgba(227, 178, 60, 0.25);
           transform: scale(1.05);
       }
   
       /* Placeholder de imagen - VISIBLE COMO EN PC */
       .imagen-placeholder {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           text-align: center;
           color: #1E3A8A;
           font-size: 0.9rem;
           font-weight: 500;
           width: 100%;
           height: 100%;
           position: relative;
           padding: 1rem; /* ✅ PADDING REDUCIDO para eliminar espacio muerto */
       }
   
       .imagen-placeholder i {
           font-size: 2.3rem; /* ✅ TAMAÑO REDUCIDO para 600px */
           margin-bottom: 0.4rem;
           opacity: 0.7;
           transition: all 0.3s ease;
       }
   
       .imagen-placeholder span {
           font-size: 0.75rem; /* ✅ TAMAÑO REDUCIDO para 600px */
           opacity: 0.8;
           transition: all 0.3s ease;
           margin-bottom: 0.4rem; /* ✅ MARGEN REDUCIDO para eliminar espacio muerto */
       }
   
       .servicio-item:hover .imagen-placeholder i {
           transform: scale(1.1);
           opacity: 1;
       }
   
       .servicio-item:hover .imagen-placeholder span {
           opacity: 1;
       }
   
       /* TEXTO INFORMATIVO - REEMPLAZA AL BOTÓN EN 600px */
       .servicio-item .imagen-placeholder::after,
       .servicio-item .imagen-placeholder.fallback::after {
           content: "💡 Toca para más info";
           position: absolute;
           bottom: 0; /* ✅ PEGADO HASTA ABAJO */
           left: 0;
           right: 0;
           background: rgba(30, 58, 138, 0.9);
           color: white;
           padding: 0.4rem 0.6rem; /* ✅ PADDING MÁS REDUCIDO para 600px */
           border-radius: 0 0 12px 12px; /* ✅ SIN BORDE INFERIOR - coincide con border-radius de la tarjeta */
           font-size: 0.7rem; /* ✅ TAMAÑO MÁS REDUCIDO para 600px */
           font-weight: 500;
           text-align: center;
           line-height: 1.1; /* ✅ LINE-HEIGHT MÁS COMPACTO */
           z-index: 999; /* ✅ Z-INDEX MUY ALTO para estar encima de todo */
           opacity: 1; /* ✅ OPAQUE para debug */
           transition: opacity 0.3s ease;
           display: block;
       }
   
       /* ✅ ASEGURAR QUE LAS IMÁGENES NO TAPEN EL TEXTO INFORMATIVO */
       .servicio-imagen .imagen-real {
           z-index: 3;
       }
   
       /* Ocultar placeholder cuando hay imagen real en 600px */
       .servicio-imagen:has(.imagen-real) .imagen-placeholder.fallback {
           opacity: 0;
           display: none;
       }
   
       .servicio-item:hover .imagen-placeholder::after {
           opacity: 1;
           background: rgba(30, 58, 138, 1);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (IMÁGENES) - PLACEHOLDERS Y FALLBACKS
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (NAVEGACIÓN) - FLECHAS DE CONTROL
          ========================================== */
       /* FLECHAS DE NAVEGACIÓN - OPTIMIZADAS PARA 600px */
       .slider-btn {
           background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
           color: white;
           border: none;
           width: 45px;
           height: 45px;
           border-radius: 50%;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1.1rem; /* ✅ TAMAÑO REDUCIDO para 600px */
           position: relative;
           overflow: hidden;
           z-index: 25;
       }
   
       .slider-btn:hover {
           transform: scale(1.1);
           box-shadow: 0 4px 15px rgba(30, 58, 138, 0.4);
       }
   
       .slider-btn.prev {
           position: absolute;
           left: 5px; /* ✅ POSICIÓN AJUSTADA para 600px */
           top: 50%;
           transform: translateY(-50%);
       }
   
       .slider-btn.next {
           position: absolute;
           right: 5px; /* ✅ POSICIÓN AJUSTADA para 600px */
           top: 50%;
           transform: translateY(-50%);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (NAVEGACIÓN) - FLECHAS DE CONTROL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (INDICADORES) - PUNTOS DE NAVEGACIÓN
          ========================================== */
       /* PUNTOS INDICADORES - OPTIMIZADOS PARA 600px */
       .slider-puntos {
           display: flex;
           justify-content: center;
           gap: 0.6rem;
           margin-top: 1rem;
           flex-wrap: wrap;
       }
   
       .slider-punto {
           width: 8px;
           height: 8px;
           border-radius: 50%;
           background: #CBD5E1;
           cursor: pointer;
           transition: all 0.3s ease;
           position: relative;
           overflow: hidden;
       }
   
       .slider-punto.activo {
           background: #1E3A8A;
           transform: scale(1.2);
           box-shadow: 0 0 10px rgba(30, 58, 138, 0.5);
       }
   
       .slider-punto:hover {
           background: #2563EB;
           transform: scale(1.1);
       }
   
       /* EFECTO DE RAYA DORADA EN PUNTOS ACTIVOS */
       .slider-punto::before {
           content: '';
           position: absolute;
           top: 0;
           left: -100%;
           width: 100%;
           height: 100%;
           background: linear-gradient(90deg, transparent, #FFD700, transparent);
           transition: left 0.5s ease;
       }
   
       .slider-punto.activo::before {
           left: 100%;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (INDICADORES) - PUNTOS DE NAVEGACIÓN
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CTA) - BOTÓN VER TODOS
          ========================================== */
       /* BOTÓN VER TODOS LOS SERVICIOS - OPTIMIZADO PARA 600px */
       .servicios-cta {
           text-align: center;
           margin-top: 1.5rem;
           margin-bottom: 1rem;
       }
   
       .servicios-cta .btn {
           padding: 0.8rem 1.5rem; /* ✅ PADDING REDUCIDO para 600px */
           font-size: 0.9rem; /* ✅ TAMAÑO REDUCIDO para 600px */
           border-radius: 12px; /* ✅ BORDER RADIUS REDUCIDO */
           min-width: 200px; /* ✅ ANCHO MÍNIMO REDUCIDO */
           max-width: 280px; /* ✅ ANCHO MÁXIMO REDUCIDO */
       }
   
       .servicios-cta .btn i {
           font-size: 1rem; /* ✅ TAMAÑO REDUCIDO para 600px */
       }
   
       /* RESPONSIVE ADJUSTMENTS PARA 600px */
       .servicios-cta .btn span {
           font-size: 0.9rem; /* ✅ TAMAÑO REDUCIDO para 600px */
           font-weight: 600;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CTA) - BOTÓN VER TODOS (FINAL DE BLOQUE 2 SERVICIOS)
          ========================================== */
/* ==========================================
   BREAKPOINT 600px - MÓVIL GRANDE - INICIO DE BLOQUE 3 (TECNOLOGÍA)
   ========================================== */


    /* ==========================================
       INICIO DE BLOQUE 3 (TECNOLOGÍA) - CONTENEDOR PRINCIPAL
       ========================================== */
    
    /* Sección principal de tecnología - Optimización para móvil grande */
    .technology.section-bg-amarillo {
        padding: 3rem 0;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Contenedor de ancho completo - Ajustes para móvil grande */
    .technology .container-full-width {
        padding: 0 1.5rem;
        max-width: 100%;
        margin: 0;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (TECNOLOGÍA) - CONTENEDOR PRINCIPAL
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (HEADER) - ENCABEZADO DE TECNOLOGÍA
       ========================================== */
    
    /* Header centrado - Optimización para móvil grande */
    .inicio-tech-header {
        text-align: center;
        margin-bottom: 2.5rem;
        padding: 0 1rem;
        max-width: 100%;
    }
    
    /* Título principal - Tamaño mejorado para móvil grande */
    .inicio-tech-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: #1F2937;
        margin-bottom: 1.2rem;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
    }
    
    /* Subtítulo - Tamaño optimizado para móvil grande */
    .inicio-tech-header .inicio-tech-subtitle {
        font-size: 1.2rem;
        color: #1E40AF;
        font-weight: 600;
        margin-bottom: 1rem;
        line-height: 1.4;
    }
    
    /* Descripción - Texto mejorado y más legible */
    .inicio-tech-description {
        font-size: 1.05rem;
        color: #374151;
        line-height: 1.7;
        margin-bottom: 2rem;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
        padding: 0 1rem;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (HEADER) - ENCABEZADO DE TECNOLOGÍA
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (SHOWCASE) - GRID DE TARJETAS TECNOLÓGICAS
       ========================================== */
    
    /* Grid de tarjetas - Dos columnas en móvil grande */
    .inicio-tech-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    /* Tarjetas de tecnología - Optimización para móvil grande */
    .inicio-tech-card {
        background: #FFFFFF;
        border-radius: 15px;
        padding: 0;
        min-height: 450px;
        box-shadow: 0 8px 24px rgba(30, 58, 138, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
        border-top: 4px solid #1E3A8A;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    /* Efecto hover mejorado para móvil grande */
    .inicio-tech-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (SHOWCASE) - GRID DE TARJETAS TECNOLÓGICAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (IMÁGENES) - PLACEHOLDERS DE EQUIPOS
       ========================================== */
    
    /* Imagen de tarjeta - Altura optimizada para móvil grande */
    .inicio-tech-card-image {
        margin-bottom: 1.1rem;
        text-align: center;
    }
    
    /* Placeholder de imagen - Tamaño optimizado para móvil grande */
    .inicio-tech-card-image .image-placeholder {
        width: 100%;
        height: 200px;
        background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #6B7280;
        border: 2px dashed #D1D5DB;
    }
    
    /* Icono del placeholder - Tamaño mejorado */
    .inicio-tech-card-image .image-placeholder i {
        font-size: 2.4rem;
        margin-bottom: 0.5rem;
        color: #9CA3AF;
    }
    
    /* Texto del placeholder - Tamaño mejorado */
    .inicio-tech-card-image .image-placeholder span {
        font-size: 0.9rem;
        font-weight: 500;
        text-align: center;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (IMÁGENES) - PLACEHOLDERS DE EQUIPOS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (CONTENIDO) - HEADERS Y TÍTULOS DE TARJETAS
       ========================================== */
    
    /* Header de tarjeta - Centrado y bien espaciado */
    .inicio-tech-card-header {
        text-align: center;
        margin-bottom: 1.1rem;
        padding: 1rem 1.5rem 0;
    }
    
    /* Título de tarjeta - Tamaño optimizado para móvil grande */
    .inicio-tech-card-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1F2937;
        margin: 0 0 0.5rem 0;
        line-height: 1.3;
    }
    
    /* Marcas de equipos - Texto mejorado */
    .inicio-tech-card-brands {
        color: #E3B23C;
        font-weight: 600;
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (CONTENIDO) - HEADERS Y TÍTULOS DE TARJETAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (CUERPO) - DESCRIPCIONES Y VENTAJAS
       ========================================== */
    
    /* Cuerpo de tarjeta - Flexbox optimizado */
    .inicio-tech-card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 0 1.5rem 1.5rem;
    }
    
    /* Descripción de tarjeta - Texto mejorado */
    .inicio-tech-card-description {
        color: #374151;
        line-height: 1.5;
        margin-bottom: 1.1rem;
        font-size: 0.95rem;
        text-align: center;
    }
    
    /* Ventajas del equipo - Diseño mejorado */
    .inicio-tech-card-advantages {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }
    
    /* Elementos de ventaja - Tamaño mejorado */
    .inicio-advantage-item {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.35rem 0.6rem;
        background: rgba(30, 58, 138, 0.05);
        border-radius: 6px;
        border: 1px solid rgba(30, 58, 138, 0.12);
        box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.05);
        transition: transform 0.15s ease, background-color 0.15s ease;
    }
    
    /* Efecto hover mejorado para elementos de ventaja */
    .inicio-advantage-item:hover {
        background: rgba(30, 58, 138, 0.08);
        transform: translateX(4px);
    }
    
    /* Icono de ventaja - Tamaño mejorado */
    .inicio-advantage-item i {
        color: #E3B23C;
        font-size: 0.9rem;
        background: rgba(227, 178, 60, 0.15);
        width: 24px;
        height: 24px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    /* Texto de ventaja - Tamaño mejorado */
    .inicio-advantage-item span {
        color: #1F2937;
        font-weight: 600;
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (CUERPO) - DESCRIPCIONES Y VENTAJAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (UTILIDADES) - ELEMENTOS DE APOYO
       ========================================== */
    
    /* Asegurar que los elementos con z-index no bloqueen la selección */
    .section-bg-amarillo .container-full-width {
        position: relative;
        z-index: 10;
    }
    
    /* Texto centrado para tecnología */
    .technology .text-center {
        text-align: center;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (UTILIDADES) - ELEMENTOS DE APOYO
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE 3 (TECNOLOGÍA) - MÓVIL GRANDE 600px
       ========================================== */

/* ==========================================
   MEDIA QUERY 600px - BLOQUE 4: PROYECTOS DESTACADOS
   Optimización específica para móviles grandes
   Basado en la estructura del BLOQUE 3 (Tecnología) para 600px
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE 4 (PROYECTOS) - CONTENEDOR PRINCIPAL
       ========================================== */
    
    /* Sección principal de proyectos - Optimización para móvil grande */
    .projects.section-bg-azul {
        padding: 3rem 0;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Contenedor de ancho completo - Ajustes para móvil grande */
    .projects .container {
        padding: 0 1.5rem;
        max-width: 100%;
        margin: 0;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (PROYECTOS) - CONTENEDOR PRINCIPAL
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 4 (HEADER) - ENCABEZADO DE PROYECTOS
       ========================================== */
    
    /* Header centrado - Optimización para móvil grande */
    .projects .section-header {
        text-align: center;
        margin-bottom: 2.5rem;
        padding: 0 1rem;
        max-width: 100%;
    }
    
    /* Título principal - Tamaño mejorado para móvil grande */
    .projects .section-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: #FFFFFF;
        margin-bottom: 1.2rem;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    /* Subtítulo - Tamaño mejorado para móvil grande */
    .projects .section-subtitle {
        font-size: 1.1rem;
        color: #E5E7EB;
        line-height: 1.4;
        margin-bottom: 2rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
        padding: 0 1rem;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (HEADER) - ENCABEZADO DE PROYECTOS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 4 (GRID) - GRID DE TARJETAS DE PROYECTOS
       ========================================== */
    
    /* Grid de proyectos - Una columna en móvil grande */
    .inicio-proyectos-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.6rem; /* ✅ AUMENTADO: De 1.4rem a 1.6rem para mejor separación */
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    /* Tarjetas de proyectos - OPTIMIZADAS PARA ELIMINAR ESPACIO MUERTO */
    .inicio-proyectos-card {
        background: #FFFFFF;
        border-radius: 16px; /* ✅ AUMENTADO: De 14px a 16px */
        overflow: hidden;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* ✅ MEJORADO: Sombra más pronunciada */
        border: 1px solid rgba(30, 58, 138, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        min-height: 420px; /* ✅ AUMENTADO: De 400px a 420px para 600px */
        height: auto; /* ✅ NUEVO: Altura automática para acomodar contenido */
    }
    
    /* Efecto hover desactivado en móvil */
    .inicio-proyectos-card:hover {
        transform: none;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }
    
    /* Imagen del proyecto - Altura optimizada para móvil grande */
    .project-image {
        height: 280px; /* ✅ AUMENTADO: De 260px a 280px para 600px */
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    
    /* Imagen real del proyecto */
    .project-image .imagen-real {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }
    
    /* Placeholder de imagen */
    .project-image .image-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
        color: #6B7280;
        font-size: 2.6rem; /* ✅ AUMENTADO: De 2.4rem a 2.6rem */
        width: 100%;
        height: 100%;
    }
    
    .project-image .image-placeholder span {
        font-size: 1rem; /* ✅ AUMENTADO: De 0.9rem a 1rem */
        margin-top: 0.5rem;
        text-align: center;
        padding: 0 1rem;
    }
    
    /* Overlay del proyecto */
    .project-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(30,58,138,0.2) 100%);
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 1.4rem; /* ✅ AUMENTADO: De 1.2rem a 1.4rem */
    }
    
    /* Categoría del proyecto */
    .project-category {
        background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%);
        color: #1a202c;
        padding: 0.6rem 1.2rem; /* ✅ AUMENTADO: De 0.5rem 1rem a 0.6rem 1.2rem */
        border-radius: 15px;
        font-size: 0.9rem; /* ✅ AUMENTADO: De 0.85rem a 0.9rem */
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
    }
    
    .project-content {
        padding: 1.6rem 1.4rem 1.4rem 1.4rem;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    
    /* Título del proyecto - Optimizado para 600px */
    .project-title {
        font-size: 1.5rem; /* ✅ AUMENTADO: De 1.4rem a 1.5rem */
        font-weight: 700;
        color: #1a202c;
        margin-bottom: 1rem; /* ✅ AUMENTADO: De 0.8rem a 1rem */
        line-height: 1.3;
    }
    
    .project-description {
        font-size: 1rem;
        color: #4B5563;
        line-height: 1.5;
        flex: 1;
        margin-bottom: 0;
    }
    
    .project-details {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin-top: 1.4rem;
    }
    
    /* Item de detalle - AMARILLO COMO EN DESKTOP */
    .detail-item {
        background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%); /* ✅ CORREGIDO: Fondo amarillo como desktop */
        color: #1a202c; /* ✅ CORREGIDO: Texto oscuro para contraste */
        padding: 0.6rem 1rem; /* ✅ AUMENTADO: De 0.5rem 0.8rem a 0.6rem 1rem */
        border-radius: 12px;
        font-size: 0.85rem; /* ✅ AUMENTADO: De 0.8rem a 0.85rem */
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.6rem; /* ✅ AUMENTADO: De 0.5rem a 0.6rem */
        border: 2px solid rgba(255, 255, 255, 0.3); /* ✅ NUEVO: Borde sutil */
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3); /* ✅ NUEVO: Sombra dorada */
        transition: all 0.3s ease;
        flex: 1; /* ✅ NUEVO: Hacer que los items se distribuyan equitativamente */
        min-width: 0; /* ✅ NUEVO: Permitir que se encojan si es necesario */
    }
    
    .detail-item i {
        color: #1a202c; /* ✅ CORREGIDO: Icono oscuro para contraste */
        font-size: 0.8rem; /* ✅ AUMENTADO: De 0.75rem a 0.8rem */
        margin-right: 0.5rem; /* ✅ AUMENTADO: De 0.4rem a 0.5rem */
    }
    
    /* ✅ NUEVO: Efecto hover para los detail-item (desactivado en móvil) */
    .inicio-proyectos-card:hover .detail-item {
        background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%); /* ✅ NUEVO: Color naranja en hover */
        color: #ffffff; /* ✅ NUEVO: Texto blanco en hover */
        transform: translateY(-2px) scale(1.02); /* ✅ NUEVO: Elevación y escala */
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4); /* ✅ NUEVO: Sombra naranja */
        border-color: rgba(255, 255, 255, 0.5); /* ✅ NUEVO: Borde más visible */
    }
    
    .inicio-proyectos-card:hover .detail-item i {
        color: #ffffff; /* ✅ NUEVO: Icono blanco en hover */
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (GRID) - GRID DE TARJETAS DE PROYECTOS
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE 4 (PROYECTOS) - MÓVIL GRANDE 600px
       ========================================== */

/* ==========================================
   MEDIA QUERY 600px - BLOQUE CLIENTES
   Optimización específica para móviles medianos
   Basado en la estructura del BLOQUE CLIENTES para 480px
   ========================================== */

   
   /* ==========================================
      INICIO DE BLOQUE CLIENTES - CONTENEDOR PRINCIPAL
      ========================================== */
   
   /* Sección principal de clientes - Optimización para móvil mediano */
   .clientes {
    padding: 3rem 0; /* ✅ AUMENTADO: De 2.5rem a 3rem para más espacio */
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Contenedor de ancho completo - Ajustes para móvil mediano */
.clientes .container {
    padding: 0 1.5rem; /* ✅ AUMENTADO: De 1.2rem a 1.5rem para más espacio */
    max-width: 100%;
    margin: 0;
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES - CONTENEDOR PRINCIPAL
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (HEADER) - ENCABEZADO DE CLIENTES
   ========================================== */

/* Header centrado - Optimización para móvil mediano */
.clientes .section-header {
    text-align: center;
    margin-bottom: 2.5rem; /* ✅ AUMENTADO: De 2.2rem a 2.5rem */
    padding: 0 1rem; /* ✅ AUMENTADO: De 0.8rem a 1rem */
    max-width: 100%;
}

/* Título principal - Tamaño aumentado para móvil mediano */
/* ✅ ELIMINADO: .clientes .section-title 600px ahora usa el estilo general */

/* Subtítulo - Tamaño aumentado para móvil mediano */
.clientes .section-subtitle {
    font-size: 1.1rem; /* ✅ AUMENTADO: De 1rem a 1.1rem */
    color: #000000; /* ✅ MANTENIDO: Color negro para mejor legibilidad */
    line-height: 1.4;
    margin-bottom: 2rem; /* ✅ AUMENTADO: De 1.8rem a 2rem */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    padding: 0 1rem; /* ✅ AUMENTADO: De 0.8rem a 1rem */
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (HEADER) - ENCABEZADO DE CLIENTES
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CARRUSEL) - CARRUSEL DE CLIENTES
   ========================================== */

/* Contenedor del carrusel - COMPLETAMENTE TRANSPARENTE SIN ELEMENTOS BLANCOS */
.inicio-clientes-carousel-container {
    padding: 0; /* ✅ MANTENIDO: Sin padding para eliminar espacios blancos */
    margin: 0 auto;
    max-width: 100%;
    background: transparent; /* ✅ TRANSPARENTE: Fondo completamente transparente */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados que crean espacios blancos */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
    border: none; /* ✅ MANTENIDO: Sin bordes */
}

/* Carrusel principal - MANTIENE COMPORTAMIENTO HORIZONTAL PARA 600px */
.inicio-clientes-carousel {
    display: flex;
    flex-direction: row; /* ✅ MANTENIDO: Mantiene flujo horizontal */
    gap: 0; /* ✅ MANTENIDO: Sin gap entre slides */
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* ✅ MANTENIDO: Oculta slides no activos */
}

/* Slides individuales - DOS TARJETAS POR SLIDE EN MÓVIL MEDIANO */
.inicio-clientes-slide {
    display: flex;
    flex-direction: row; /* ✅ MANTENIDO: Mantiene flujo horizontal */
    gap: 1.2rem; /* ✅ AUMENTADO: De 1rem a 1.2rem para más espacio entre tarjetas */
    width: 100%;
    min-width: 100%; /* ✅ MANTENIDO: Ancho mínimo para ocupar todo el carrusel */
    opacity: 0; /* ✅ MANTENIDO: Invisible por defecto */
    visibility: hidden; /* ✅ MANTENIDO: Oculto por defecto */
    position: absolute; /* ✅ MANTENIDO: Posición absoluta para superposición */
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Slide activo - VISIBLE */
.inicio-clientes-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative; /* ✅ MANTENIDO: Posición relativa cuando está activo */
}

/* Tarjetas de cliente - SEMI-TRANSPARENTES PARA MOSTRAR LOGOS DE FONDO */
.inicio-cliente-card-featured {
    background: rgba(255, 255, 255, 0.85); /* ✅ MANTENIDO: Fondo semi-transparente */
    border-radius: 20px; /* ✅ AUMENTADO: De 18px a 20px para bordes más redondeados */
    padding: 1.4rem; /* ✅ AUMENTADO: De 1.2rem a 1.4rem para más espacio interno */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ✅ MANTENIDO: Sombra más suave */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.3); /* ✅ MANTENIDO: Borde más sutil */
    position: relative;
    overflow: hidden;
    min-height: 320px; /* ✅ AUMENTADO: De 300px a 320px para más altura */
    height: auto;
    width: calc(50% - 0.6rem); /* ✅ AJUSTADO: De 0.5rem a 0.6rem para mejor separación */
    max-width: calc(50% - 0.6rem);
    flex-shrink: 0; /* ✅ MANTENIDO: No se encoge */
    flex-grow: 0; /* ✅ MANTENIDO: No crece */
}

/* Efecto hover desactivado en móvil */
.inicio-cliente-card-featured:hover {
    transform: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Contenedor del logo - SEMI-TRANSPARENTE PARA MOSTRAR LOGOS DE FONDO */
.cliente-logo-container {
    position: relative;
    width: 100%;
    height: 120px; /* ✅ AUMENTADO: De 110px a 120px para más espacio */
    min-height: 120px;
    max-height: 120px;
    margin-bottom: 1.2rem; /* ✅ AUMENTADO: De 1rem a 1.2rem */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 249, 255, 0.7); /* ✅ MANTENIDO: Fondo semi-transparente */
    border-radius: 14px; /* ✅ AUMENTADO: De 12px a 14px para bordes más redondeados */
    overflow: hidden;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 1px solid rgba(14, 165, 233, 0.3); /* ✅ MANTENIDO: Borde más sutil */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); /* ✅ MANTENIDO: Sombra más sutil */
    flex-shrink: 0;
}

/* Imagen del cliente - Tamaño optimizado para móvil mediano */
.cliente-imagen-featured {
    width: 100%;
    height: 100%;
    min-width: 100px; /* ✅ AUMENTADO: De 90px a 100px para logos más grandes */
    min-height: 100px; /* ✅ AUMENTADO: De 90px a 100px para logos más grandes */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease-out;
    position: relative;
    z-index: 2;
}

/* Información del cliente - Optimizada para móvil mediano */
.cliente-info-featured {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0.8rem; /* ✅ AUMENTADO: De 0.6rem a 0.8rem */
    border-radius: 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Nombre del cliente - Tamaño optimizado para móvil mediano */
.cliente-nombre-featured {
    font-size: 1.1rem; /* ✅ AUMENTADO: De 1rem a 1.1rem */
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.7rem; /* ✅ AUMENTADO: De 0.6rem a 0.7rem */
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-align: center; /* ✅ MANTENIDO: Centrado para mejor apariencia */
}

/* Categoría del cliente - Optimizada para móvil mediano */
.cliente-categoria-featured {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 0.5rem 1rem; /* ✅ AUMENTADO: De 0.4rem 0.8rem a 0.5rem 1rem */
    border-radius: 20px; /* ✅ AUMENTADO: De 18px a 20px para bordes más redondeados */
    font-size: 0.75rem; /* ✅ AUMENTADO: De 0.7rem a 0.75rem */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px; /* ✅ AUMENTADO: De 0.4px a 0.5px */
    margin-bottom: 0.5rem; /* ✅ AUMENTADO: De 0.4rem a 0.5rem */
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3); /* ✅ MANTENIDO: Sombra más sutil */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    align-self: center;
}

/* Colores específicos por tipo de industria - Optimizados para móvil mediano */
.cliente-categoria-featured[data-industry="industrial"] {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.3);
}

.cliente-categoria-featured[data-industry="comercial"] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3);
}

.cliente-categoria-featured[data-industry="vivienda"] {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 3px 8px rgba(124, 58, 237, 0.3);
}

.cliente-categoria-featured[data-industry="construccion"] {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    box-shadow: 0 3px 8px rgba(234, 88, 12, 0.3);
}

.cliente-categoria-featured[data-industry="gobierno"] {
    background: linear-gradient(135deg, #1f2937, #111827);
    box-shadow: 0 3px 8px rgba(31, 41, 55, 0.3);
}

.cliente-categoria-featured[data-industry="financiero"] {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 3px 8px rgba(8, 145, 178, 0.3);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CARRUSEL) - CARRUSEL DE CLIENTES
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CONTROLES) - CONTROLES DE NAVEGACIÓN
   ========================================== */

/* Controles del carrusel - FLOTANTES SIN LÍNEAS HORIZONTALES (IGUAL A 480px) */
.inicio-clientes-controls {
    position: absolute;
    top: 50%;
    left: -0.5rem; /* ✅ IGUAL A 480px: Más hacia la izquierda para flotar */
    right: -0.5rem; /* ✅ IGUAL A 480px: Más hacia la derecha para flotar */
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    padding: 0; /* ✅ IGUAL A 480px: Sin padding para eliminar líneas horizontales */
    z-index: 10;
    pointer-events: none; /* ✅ MANTENIDO: Para que no interfiera con el carrusel */
}

/* ✅ ELIMINAR PSEUDO-ELEMENTOS QUE CREAN LÍNEAS VERTICALES (IGUAL A 480px) */
.inicio-clientes-controls::before,
.inicio-clientes-controls::after {
    display: none; /* ✅ IGUAL A 480px: Sin gradientes blancos verticales */
}

/* Botones de navegación - Tamaño optimizado para móvil mediano */
.inicio-clientes-btn {
    width: 40px; /* ✅ AUMENTADO: De 36px a 40px para mejor visibilidad */
    height: 40px; /* ✅ AUMENTADO: De 36px a 40px para mejor visibilidad */
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem; /* ✅ AUMENTADO: De 0.9rem a 1rem */
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); /* ✅ AUMENTADO: Sombra más visible */
    position: relative;
    overflow: hidden;
    pointer-events: auto; /* ✅ MANTENIDO: Para que sean clickeables */
}

.inicio-clientes-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.inicio-clientes-btn:active {
    transform: scale(0.95);
}

.inicio-clientes-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(1);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CONTROLES) - CONTROLES DE NAVEGACIÓN
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (INDICADORES) - INDICADORES DE PAGINACIÓN
   ========================================== */

/* Indicadores del carrusel - COMPLETAMENTE TRANSPARENTES SIN ELEMENTOS BLANCOS */
.inicio-clientes-indicators {
    display: flex;
    justify-content: center;
    gap: 1rem; /* ✅ AUMENTADO: De 0.8rem a 1rem para más separación */
    margin-top: 2rem; /* ✅ AUMENTADO: De 1.8rem a 2rem */
    padding: 1.2rem 1.5rem; /* ✅ AUMENTADO: De 1rem 1.2rem a 1.2rem 1.5rem */
    background: transparent; /* ✅ MANTENIDO: Sin fondo blanco */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados */
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    border: none; /* ✅ MANTENIDO: Sin bordes */
    position: relative;
}

/* Indicador individual - Tamaño optimizado para móvil mediano */
.inicio-clientes-indicator {
    width: 14px; /* ✅ AUMENTADO: De 12px a 14px para mejor visibilidad */
    height: 14px; /* ✅ AUMENTADO: De 12px a 14px para mejor visibilidad */
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    cursor: pointer;
    transition: all 0.4s ease;
    border: 2px solid rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.inicio-clientes-indicator:hover {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    transform: scale(1.2);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.inicio-clientes-indicator.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    transform: scale(1.3);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.3);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (INDICADORES) - INDICADORES DE PAGINACIÓN
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CTA) - ESTADÍSTICAS DE CLIENTES
   ========================================== */

/* CTA de clientes - Optimizado para móvil mediano */
.clientes-cta {
    margin-top: 3rem; /* ✅ AUMENTADO: De 2.5rem a 3rem */
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Estadísticas de clientes - Optimizadas para móvil mediano */
.clientes-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* ✅ AUMENTADO: De 1.2rem a 1.5rem para más separación */
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

/* Item de estadística - COMPLETAMENTE TRANSPARENTE SIN ELEMENTOS BLANCOS */
.clientes .stat-item {
    display: flex;
    align-items: center;
    gap: 1.2rem; /* ✅ AUMENTADO: De 1rem a 1.2rem para más separación */
    background: transparent; /* ✅ MANTENIDO: Sin fondo blanco */
    padding: 1.2rem 1.6rem; /* ✅ AUMENTADO: De 1rem 1.4rem a 1.2rem 1.6rem */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    border: none; /* ✅ MANTENIDO: Sin bordes */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 320px; /* ✅ AUMENTADO: De 300px a 320px para más ancho */
    max-width: 100%;
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
}

/* Efecto hover desactivado en móvil para evitar sombras blancas */
.clientes .stat-item:hover {
    transform: none;
    box-shadow: none;
}

/* Icono de estadística - Optimizado para móvil mediano */
.clientes .stat-item i {
    font-size: 1.6rem; /* ✅ AUMENTADO: De 1.4rem a 1.6rem */
    color: #007bff;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Texto de estadística - Optimizado para móvil mediano */
.clientes .stat-item strong {
    color: #007bff;
    font-weight: 700;
    font-size: 1.3rem; /* ✅ AUMENTADO: De 1.2rem a 1.3rem */
    margin-right: 0.5rem; /* ✅ AUMENTADO: De 0.4rem a 0.5rem */
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CTA) - ESTADÍSTICAS DE CLIENTES
   ========================================== */

/* ==========================================
   FINAL DE BLOQUE CLIENTES - MÓVIL MEDIANO 600px
       ========================================== */

/* ==========================================
   BREAKPOINT 600px - MÓVIL MEDIANO
   BLOQUE: SOBRE LAMA TOPOGRAFÍA
   OPTIMIZADO PARA PANTALLAS DE 600px
   BASADO EN EL DISEÑO EXITOSO DE 480px
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA - SECCIÓN PRINCIPAL
       ========================================== */
    
    /* Contenedor principal - OPTIMIZADO PARA 600px */
    .about.section-bg-amarillo {
        padding: 2.5rem 0;
        margin: 0;
        overflow-x: hidden;
        scroll-behavior: smooth;
        width: 100vw;
        max-width: 100vw;
        font-size: 16px;
        line-height: 1.5;
    }
    
    /* Contenedor de ancho completo - SIN RESTRICCIONES */
    .container-full-width {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0 1.5rem;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (HEADER) - TÍTULO Y SUBTÍTULO
       ========================================== */
    
    .inicio-about-header {
        margin-bottom: 2.5rem;
        text-align: center;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .about-title-container {
        max-width: 100%;
        width: 100%;
        padding: 2rem;
        margin: 0 auto 2.5rem auto;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        border: 2px solid rgba(30, 64, 175, 0.3);
        border-radius: 20px;
        box-shadow: 0 12px 30px rgba(30, 64, 175, 0.18);
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    
    .about-title-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .inicio-about-title {
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 1.2rem;
        line-height: 1.2;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .inicio-about-subtitle {
        font-size: 1.1rem;
        color: var(--text-secondary);
        line-height: 1.6;
        margin: 0;
        font-weight: 400;
        max-width: 100%;
    }

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (HEADER) - TÍTULO Y SUBTÍTULO
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (FILA SUPERIOR) - HISTORIA + VALORES
       ========================================== */
    
    .inicio-about-top-row {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        margin-bottom: 3rem;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (HISTORIA) - NUESTRA TRAYECTORIA
       ========================================== */
    
    .about-historia-section {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .inicio-about-story-compact {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* Cuadro principal de contenido - MÁXIMO ANCHO */
    .story-content-box {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        border-radius: 20px;
        padding: 2rem;
        box-shadow: 0 12px 30px rgba(30, 64, 175, 0.18);
        border: 2px solid rgba(30, 64, 175, 0.3);
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    
    /* Título del bloque */
    .story-title-compact {
        font-size: 1.7rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0 0 1.2rem 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
        text-align: center;
    }
    
    /* Layout vertical para móvil */
    .story-content-horizontal {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-top: 0;
    }
    
    /* Sección de texto */
    .story-text-section {
        width: 100%;
        order: 1;
    }
    
    .story-text-compact {
        font-size: 1.05rem;
        line-height: 1.7;
        color: var(--text-color);
        margin: 0;
        text-align: left;
    }
    
    .story-text-compact strong {
        color: var(--primary-color);
        font-weight: 600;
    }
    
    /* Sección de imagen */
    .story-image-section {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        order: 2;
    }
    
    .story-image-placeholder {
        border-radius: 16px;

        padding: 2.5rem;
        border: 2px solid rgba(30, 64, 175, 0.3);
        text-align: center;
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 240px;
        margin: 0;
    }
    
    .story-image-placeholder:hover {


        transform: translateY(-3px);

    }
    
    .image-coming-soon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.2rem;
        color: var(--primary-color);
    }
    
    .image-coming-soon i {
        font-size: 3rem;
        color: var(--primary-color);
    }
    
    .image-coming-soon span {
        font-size: 1rem;
        font-weight: 500;
        color: var(--primary-color);
        text-align: center;
    }

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (HISTORIA) - NUESTRA TRAYECTORIA
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (VALORES) - LO QUE NOS DIFERENCIA
       ========================================== */
    
    .about-valores-section {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .inicio-about-values-compact {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* Título de valores - MÁXIMO ANCHO */
    .values-title-container {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 16px;
        padding: 1.5rem 1.2rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 8px 20px rgba(30, 64, 175, 0.15);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .values-title-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .values-title-compact {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
    }
    
    /* Grid de valores - OPTIMIZADO PARA 600px */
    .values-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
        row-gap: 1.5rem;
        margin-top: 0;
        flex: 1;
        align-content: start;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Items de valores */
    .value-item-compact {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 14px;
        padding: 1.2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.8rem;
        transition: transform 0.3s ease;
        min-height: 100px;
        justify-content: center;
    }
    
    .value-item-compact:hover {


        transform: translateY(-3px);

    }
    
    /* Iconos de valores */
    .value-icon-small {
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
        box-shadow: 0 4px 12px rgba(30, 64, 175, 0.4);
    }
    
    .value-icon-small i {
        font-size: 1.1rem;
        color: white;
    }
    
    /* Contenido de valores */
    .value-content-small {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.4rem;
        width: 100%;
    }
    
    .value-content-small h4 {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-color);
        margin: 0;
        line-height: 1.2;
        font-family: 'Poppins', sans-serif;
    }
    
    .value-content-small p {
        font-size: 0.8rem;
        color: var(--text-secondary);
        line-height: 1.4;
        margin: 0;
        font-weight: 500;
        text-align: center;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (VALORES) - LO QUE NOS DIFERENCIA
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (FILA SUPERIOR) - HISTORIA + VALORES
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (FILA INFERIOR) - ESTADÍSTICAS + CTA + CERTIFICACIONES
       ========================================== */
    
    .inicio-about-bottom-row {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        padding: 0;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (ESTADÍSTICAS) - ESTADÍSTICAS DE EMPRESA
       ========================================== */
    
    .about-stats-section {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .inicio-about-stats-compact-horizontal {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 8px 20px rgba(30, 64, 175, 0.15);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-stats-compact-horizontal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .stats-horizontal-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
        row-gap: 1.2rem;
        margin-top: 1.2rem;
    }
    
    .stat-horizontal {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 12px;
        padding: 1.5rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        min-width: 0;
        width: 100%;
        transition: transform 0.3s ease;
    }
    
    .stat-horizontal:hover {


        transform: translateY(-3px);

    }
    
    .stat-number {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--primary-color);
        line-height: 1;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .stat-label {
        font-size: 0.65rem;
        color: var(--text-secondary);
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (ESTADÍSTICAS) - ESTADÍSTICAS DE EMPRESA
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (CTA) - CALL TO ACTION
       ========================================== */
    
    .about-cta-section {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .inicio-about-cta-compact {
        background: linear-gradient(135deg, rgba(30, 64, 175, 0.95) 0%, rgba(59, 130, 246, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.3);
        border-radius: 16px;
        padding: 1.5rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 12px 30px rgba(30, 64, 175, 0.3);
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-cta-compact::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .inicio-about-cta-compact h3 {
        font-size: 1.3rem;
        font-weight: 700;
        color: white;
        margin: 0 0 0.8rem 0;
        line-height: 1.2;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .inicio-about-cta-compact p {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.5;
        margin: 0 0 1.5rem 0;
    }
    
    .cta-buttons-compact {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        align-items: center;
    }
    
    .cta-buttons-compact .btn {
        padding: 0.8rem 1.6rem;
        font-size: 1rem;
        border-radius: 12px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        transition: all 0.3s ease;
        font-weight: 600;
        min-width: 240px;
        justify-content: center;
    }
    
    .cta-buttons-compact .btn-primary {
        background: linear-gradient(135deg, #E3B23C 0%, #FFD700 100%);
        color: var(--primary-color);
        border: 1px solid rgba(227, 178, 60, 0.3);
    }
    
    .cta-buttons-compact .btn-primary:hover {
        background: linear-gradient(135deg, #D4A017 0%, #E6C200 100%);
        transform: translateY(-3px);

    }
    
    .cta-buttons-compact .btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .cta-buttons-compact .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (CTA) - CALL TO ACTION
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (CERTIFICACIONES) - CREDENCIALES Y CERTIFICACIONES
       ========================================== */
    
    .about-certificaciones-section {
        width: 100%;
        max-width: 100%;
        order: 3;
    }
    
    .inicio-about-credentials-horizontal {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 16px;
        padding: 1.5rem;
        box-shadow: 0 8px 20px rgba(30, 64, 175, 0.15);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-credentials-horizontal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .credentials-title-horizontal {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0 0 1.2rem 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
    }
    
    .credentials-horizontal {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .credential-horizontal {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 12px;
        padding: 1rem 1.4rem;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        font-size: 0.9rem;
        font-weight: 500;
        color: var(--primary-color);
        transition: all 0.3s ease;
        width: 100%;
        justify-content: center;
    }
    
    .credential-horizontal:hover {


        transform: translateY(-3px);

    }
    
    .credential-horizontal i {
        font-size: 1.1rem;
        color: var(--primary-color);
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (CERTIFICACIONES) - CREDENCIALES Y CERTIFICACIONES
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (FILA INFERIOR) - ESTADÍSTICAS + CTA + CERTIFICACIONES
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (UTILIDADES) - OPTIMIZACIONES Y OVERRIDES
       ========================================== */
    
    /* Asegurar que todo el texto sea seleccionable */
    .about.section-bg-amarillo * {
        user-select: text;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        box-sizing: border-box;
    }
    
    /* Asegurar que no haya scroll horizontal */
    body {
        overflow-x: hidden;
    }
    
    /* Asegurar que los botones sean táctiles */
    .btn, .value-item-compact, .stat-horizontal, .credential-horizontal {
        min-height: 50px;
        touch-action: manipulation;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (UTILIDADES) - OPTIMIZACIONES Y OVERRIDES
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA - MÓVIL MEDIANO 600px
       ========================================== */

    /* ==========================================
       OVERRIDES ESPECÍFICOS PARA 600px - SOBRESCRITURA DE ESTILOS BASE
       ========================================== */
    
    /* Sobrescribir cualquier max-width del CSS base */
    .about.section-bg-amarillo .container-full-width,
    .about.section-bg-amarillo .inicio-about-header,
    .about.section-bg-amarillo .inicio-about-top-row,
    .about.section-bg-amarillo .inicio-about-bottom-row,
    .about.section-bg-amarillo .about-historia-section,
    .about.section-bg-amarillo .about-valores-section,
    .about.section-bg-amarillo .about-stats-section,
    .about.section-bg-amarillo .about-cta-section,
    .about.section-bg-amarillo .about-certificaciones-section,
    .about.section-bg-amarillo .inicio-about-story-compact,
    .about.section-bg-amarillo .inicio-about-values-compact,
    .about.section-bg-amarillo .story-content-box,
    .about.section-bg-amarillo .values-title-container,
    .about.section-bg-amarillo .inicio-about-stats-compact-horizontal,
    .about.section-bg-amarillo .inicio-about-cta-compact,
    .about.section-bg-amarillo .inicio-about-credentials-horizontal,
    .about.section-bg-amarillo .about-title-container {
        max-width: 100%;
        width: 100%;
    }
    
    /* Forzar layout vertical en todos los contenedores */
    .about.section-bg-amarillo .inicio-about-top-row {
        display: flex;
        flex-direction: column;
    }
    
    .about.section-bg-amarillo .inicio-about-bottom-row {
        display: flex;
        flex-direction: column;
    }

    /* ==========================================
       FINAL OVERRIDES ESPECÍFICOS PARA 600px - SOBRESCRITURA DE ESTILOS BASE
       ========================================== */

      
} /* 🎯 FIN BLOQUE HERO - 600px */

/* ==========================================
   MEDIA QUERY 768px - BLOQUE HERO
   Optimización específica para tablets
   Basado en media_600px_hero.css pero adaptado para 768px
   ========================================== */

@media (max-width: 768px) and (min-width: 601px) {
/* ==========================================
   BREAKPOINT 768px - INICIO DE BLOQUE 2 (SERVICIOS)
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE 2 (SERVICIOS) - CONTENEDOR PRINCIPAL
       ========================================== */
       .servicios-slider-container,
       .inicio-servicios-slider {
           margin-top: 1rem;
           width: 100vw;
           max-width: 100vw;
           padding: 0;
           overflow: hidden;
           margin-left: calc(-50vw + 50%);
           margin-right: calc(-50vw + 50%);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (SERVICIOS) - CONTENEDOR PRINCIPAL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CARRUSEL) - SLIDER PRINCIPAL
          ========================================== */
       .servicios-slider {
           display: flex;
           align-items: center;
           padding: 1.5rem 0; /* ✅ PADDING REDUCIDO para 768px */
           min-height: 540px; /* ✅ ALTURA REDUCIDA para eliminar espacio muerto */
           overflow: hidden;
           position: relative;
           width: 100vw;
           max-width: 100vw;
           
           /* Variables CSS para controlar difuminado */
           --difuminado-izquierdo: hidden;
           --difuminado-derecho: visible;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CARRUSEL) - SLIDER PRINCIPAL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (DIFUMINADO) - GRADIENTES LATERALES
          ========================================== */
       /* DIFUMINADO LATERAL - OPTIMIZADO PARA 768px */
       .servicios-slider::before,
       .servicios-slider::after {
           content: '';
           position: absolute;
           top: 0;
           bottom: 0;
           width: 30px; /* Más ancho para 768px */
           z-index: 10;
           pointer-events: none;
           transition: opacity 0.5s ease;
       }
   
       .servicios-slider::before {
           left: 0;
           background: linear-gradient(to right, rgba(30, 58, 138, 1) 0%, rgba(30, 58, 138, 0.8) 40%, rgba(30, 58, 138, 0.3) 80%, transparent 100%);
           opacity: var(--difuminado-izquierdo);
       }
   
       .servicios-slider::after {
           right: 0;
           background: linear-gradient(to left, rgba(30, 58, 138, 1) 0%, rgba(30, 58, 138, 0.8) 40%, rgba(30, 58, 138, 0.3) 80%, transparent 100%);
           opacity: var(--difuminado-derecho);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (DIFUMINADO) - GRADIENTES LATERALES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CONTENEDOR INTERNO) - WRAPPER DE SLIDES
          ========================================== */
       .servicios-slider-inner {
           display: flex;
           align-items: center;
           transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           width: max-content;
           padding: 0 1.2rem; /* ✅ PADDING para 768px - SOBRESCRIBE inicio.css */
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CONTENEDOR INTERNO) - WRAPPER DE SLIDES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (TARJETAS) - CARDS DE SERVICIOS
          ========================================== */
       /* TARJETAS DE SERVICIOS - UNO EN UNO PARA 768px - DIMENSIONES OPTIMIZADAS */
       .servicio-item {
           width: 460px; /* ✅ ANCHO OPTIMIZADO para 768px */
           min-width: 460px;
           height: 540px; /* ✅ ALTURA REDUCIDA para eliminar espacio muerto */
           min-height: 540px;
           max-height: 540px;
           background: white;
           border-radius: 12px; /* ✅ BORDER RADIUS REDUCIDO */
           box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* ✅ SOMBRA MÁS SUAVE */
           border: 2px solid rgba(30, 58, 138, 0.15);
           flex-shrink: 0;
           transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           display: block;
           margin: 0 0.4rem; /* ✅ MARGEN para 768px */
           position: relative;
           overflow: hidden;
       }
   
       /* COLORES ALTERNADOS PARA CADA TARJETA */
       .servicio-item:nth-child(odd) {
           background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
           border-color: rgba(30, 58, 138, 0.2);
       }
   
       .servicio-item:nth-child(even) {
           background: linear-gradient(135deg, #F0F4FF 0%, #E6F0FF 100%);
           border-color: rgba(30, 58, 138, 0.25);
       }
   
       /* EFECTO HOVER EN TARJETAS */
       .servicio-item:hover {
           transform: translateY(-8px);
           box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
           border-color: rgba(30, 58, 138, 0.3);
       }
   
       /* EFECTO DE BORDE DORADO AL HOVER */
       .servicio-item::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           height: 4px;
           background: linear-gradient(90deg, #E3B23C, #FFD700, #E3B23C);
           transform: scaleX(0);
           transition: transform 0.4s ease;
           z-index: 5;
       }
   
       .servicio-item:hover::before {
           transform: scaleX(1);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (TARJETAS) - CARDS DE SERVICIOS
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CONTENIDO) - TEXTO E IMÁGENES
          ========================================== */
       /* Contenido de las tarjetas - DISTRIBUCIÓN VERTICAL OPTIMIZADA PARA 768px */
       .servicio-contenido {
           display: flex;
           flex-direction: column; /* ✅ VERTICAL: texto arriba, imagen abajo */
           height: 540px; /* ✅ ALTURA REDUCIDA para eliminar espacio muerto */
           min-height: 540px;
           max-height: 540px;
           position: relative;
       }
   
       /* Texto arriba - ALTURA OPTIMIZADA PARA 768px */
       .servicio-texto {
           flex: 1; /* ✅ FLEXIBLE para ocupar espacio disponible */
           min-height: 260px; /* ✅ ALTURA MÍNIMA REDUCIDA */
           width: 100%;
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
           padding: 1.6rem; /* ✅ PADDING REDUCIDO para 768px */
           padding-bottom: 0.8rem;
           position: relative;
           box-sizing: border-box;
       }
   
       .servicio-titulo {
           font-size: 1.6rem; /* ✅ TAMAÑO OPTIMIZADO para 768px */
           font-weight: 700;
           color: #1E3A8A;
           margin-bottom: 0.8rem; /* ✅ MARGEN REDUCIDO */
           line-height: 1.3; /* ✅ LINE-HEIGHT COMPACTO */
           text-align: left;
           transition: all 0.4s ease;
       }
   
       .servicio-item:hover .servicio-titulo {
           color: #E3B23C;
           transform: translateY(-2px);
       }
   
       .servicio-descripcion {
           color: #2D3748;
           line-height: 1.5; /* ✅ LINE-HEIGHT COMPACTO */
           margin-bottom: 0;
           font-weight: 500;
           font-size: 1rem; /* ✅ TAMAÑO REDUCIDO para 768px */
           text-align: left;
           flex-grow: 1; /* ✅ Ocupar espacio disponible */
           display: flex;
           align-items: flex-start;
       }
   
       .servicio-item:hover .servicio-descripcion {
           color: #1A202C;
       }
   
       /* Botón Saber más información - OCULTO EN 768px PARA MEJOR UX */
       .servicio-enlace {
           display: none; /* ✅ OCULTO en 768px - mejor UX */
       }

       /* TAP HINT - Indicador de navegación en móvil 768px */
       .servicio-item::after {
           content: 'Toca para más información →';
           position: absolute;
           bottom: 0;
           left: 0;
           right: 0;
           background: rgba(30, 58, 138, 0.88);
           color: white;
           font-size: 0.82rem;
           font-weight: 600;
           text-align: center;
           padding: 0.6rem 1rem;
           z-index: 10;
           letter-spacing: 0.02em;
           font-family: var(--font-primary);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CONTENIDO) - TEXTO E IMÁGENES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (IMÁGENES) - PLACEHOLDERS Y FALLBACKS
          ========================================== */
       /* Imagen abajo - ALTURA OPTIMIZADA PARA 768px */
       .servicio-imagen {
           flex: none;
           height: 350px;
           min-height: 350px;
           max-height: 350px;
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: center;
           border-top: 1px solid rgba(30, 58, 138, 0.1);
           position: relative;
           background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
           box-shadow: inset 0 0 20px rgba(227, 178, 60, 0.15);
           transition: all 0.5s ease;
           box-sizing: border-box;
       }
   
       /* COLORES ALTERNADOS PARA LAS IMÁGENES */
       .servicio-item:nth-child(odd) .servicio-imagen {
           background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
           box-shadow: inset 0 0 20px rgba(227, 178, 60, 0.15);
       }
   
       .servicio-item:nth-child(even) .servicio-imagen {
           background: linear-gradient(135deg, #E6F0FF 0%, #B3D9FF 100%);
           box-shadow: inset 0 0 20px rgba(30, 58, 138, 0.15);
       }
   
       .servicio-item:hover .servicio-imagen {
           background: linear-gradient(135deg, #FFE082 0%, #FFD700 100%);
           box-shadow: inset 0 0 25px rgba(227, 178, 60, 0.25);
           transform: scale(1.05);
       }
   
       /* Placeholder de imagen - VISIBLE COMO EN PC */
       .imagen-placeholder {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           text-align: center;
           color: #1E3A8A;
           font-size: 0.9rem;
           font-weight: 500;
           width: 100%;
           height: 100%;
           position: relative;
           padding: 1rem; /* ✅ PADDING REDUCIDO para eliminar espacio muerto */
       }
   
       .imagen-placeholder i {
           font-size: 2.4rem; /* ✅ TAMAÑO REDUCIDO para 768px */
           margin-bottom: 0.4rem;
           opacity: 0.7;
           transition: all 0.3s ease;
       }
   
       .imagen-placeholder span {
           font-size: 0.75rem; /* ✅ TAMAÑO REDUCIDO para 768px */
           opacity: 0.8;
           transition: all 0.3s ease;
           margin-bottom: 0.4rem; /* ✅ MARGEN REDUCIDO para eliminar espacio muerto */
       }
   
       .servicio-item:hover .imagen-placeholder i {
           transform: scale(1.1);
           opacity: 1;
       }
   
       .servicio-item:hover .imagen-placeholder span {
           opacity: 1;
       }
   
       /* TEXTO INFORMATIVO - REEMPLAZA AL BOTÓN EN 768px */
       .servicio-item .imagen-placeholder::after,
       .servicio-item .imagen-placeholder.fallback::after {
           content: "💡 Toca para más info";
           position: absolute;
           bottom: 0; /* ✅ PEGADO HASTA ABAJO */
           left: 0;
           right: 0;
           background: rgba(30, 58, 138, 0.9);
           color: white;
           padding: 0.4rem 0.6rem; /* ✅ PADDING MÁS REDUCIDO para 768px */
           border-radius: 0 0 12px 12px; /* ✅ SIN BORDE INFERIOR - coincide con border-radius de la tarjeta */
           font-size: 0.7rem; /* ✅ TAMAÑO MÁS REDUCIDO para 768px */
           font-weight: 500;
           text-align: center;
           line-height: 1.1; /* ✅ LINE-HEIGHT MÁS COMPACTO */
           z-index: 999; /* ✅ Z-INDEX MUY ALTO para estar encima de todo */
           opacity: 1; /* ✅ OPAQUE para debug */
           transition: opacity 0.3s ease;
           display: block;
       }
   
       /* ✅ ASEGURAR QUE LAS IMÁGENES NO TAPEN EL TEXTO INFORMATIVO */
       .servicio-imagen .imagen-real {
           z-index: 3;
       }
   
       /* Ocultar placeholder cuando hay imagen real en 768px */
       .servicio-imagen:has(.imagen-real) .imagen-placeholder.fallback {
           opacity: 0;
           display: none;
       }
   
       .servicio-item:hover .imagen-placeholder::after {
           opacity: 1;
           background: rgba(30, 58, 138, 1);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (IMÁGENES) - PLACEHOLDERS Y FALLBACKS
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (NAVEGACIÓN) - FLECHAS DE CONTROL
          ========================================== */
       /* FLECHAS DE NAVEGACIÓN - OPTIMIZADAS PARA 768px */
       .slider-btn {
           background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
           color: white;
           border: none;
           width: 50px;
           height: 50px;
           border-radius: 50%;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1.2rem; /* ✅ TAMAÑO REDUCIDO para 768px */
           position: relative;
           overflow: hidden;
           z-index: 25;
       }
   
       .slider-btn:hover {
           transform: scale(1.1);
           box-shadow: 0 4px 15px rgba(30, 58, 138, 0.4);
       }
   
       .slider-btn.prev {
           position: absolute;
           left: 5px; /* ✅ POSICIÓN AJUSTADA para 768px */
           top: 50%;
           transform: translateY(-50%);
       }
   
       .slider-btn.next {
           position: absolute;
           right: 5px; /* ✅ POSICIÓN AJUSTADA para 768px */
           top: 50%;
           transform: translateY(-50%);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (NAVEGACIÓN) - FLECHAS DE CONTROL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (INDICADORES) - PUNTOS DE NAVEGACIÓN
          ========================================== */
       /* PUNTOS INDICADORES - OPTIMIZADOS PARA 768px */
       .slider-puntos {
           display: flex;
           justify-content: center;
           gap: 0.7rem;
           margin-top: 1rem;
           flex-wrap: wrap;
       }
   
       .slider-punto {
           width: 8px;
           height: 8px;
           border-radius: 50%;
           background: #CBD5E1;
           cursor: pointer;
           transition: all 0.3s ease;
           position: relative;
           overflow: hidden;
       }
   
       .slider-punto.activo {
           background: #1E3A8A;
           transform: scale(1.2);
           box-shadow: 0 0 10px rgba(30, 58, 138, 0.5);
       }
   
       .slider-punto:hover {
           background: #2563EB;
           transform: scale(1.1);
       }
   
       /* EFECTO DE RAYA DORADA EN PUNTOS ACTIVOS */
       .slider-punto::before {
           content: '';
           position: absolute;
           top: 0;
           left: -100%;
           width: 100%;
           height: 100%;
           background: linear-gradient(90deg, transparent, #FFD700, transparent);
           transition: left 0.5s ease;
       }
   
       .slider-punto.activo::before {
           left: 100%;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (INDICADORES) - PUNTOS DE NAVEGACIÓN
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CTA) - BOTÓN VER TODOS
          ========================================== */
       /* BOTÓN VER TODOS LOS SERVICIOS - OPTIMIZADO PARA 768px */
       .servicios-cta {
           text-align: center;
           margin-top: 1.5rem;
           margin-bottom: 1rem;
       }
   
       .servicios-cta .btn {
           padding: 0.8rem 1.5rem; /* ✅ PADDING REDUCIDO para 768px */
           font-size: 0.9rem; /* ✅ TAMAÑO REDUCIDO para 768px */
           border-radius: 12px; /* ✅ BORDER RADIUS REDUCIDO */
           min-width: 200px; /* ✅ ANCHO MÍNIMO REDUCIDO */
           max-width: 280px; /* ✅ ANCHO MÁXIMO REDUCIDO */
       }
   
       .servicios-cta .btn i {
           font-size: 1rem; /* ✅ TAMAÑO REDUCIDO para 768px */
       }
   
       /* RESPONSIVE ADJUSTMENTS PARA 768px */
       .servicios-cta .btn span {
           font-size: 0.9rem; /* ✅ TAMAÑO REDUCIDO para 768px */
           font-weight: 600;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CTA) - BOTÓN VER TODOS (FINAL DE BLOQUE 2 SERVICIOS)
          ========================================== */
/* ==========================================
   BREAKPOINT 768px - TABLET - INICIO DE BLOQUE 3 (TECNOLOGÍA)
   ========================================== */


    /* ==========================================
       INICIO DE BLOQUE 3 (TECNOLOGÍA) - CONTENEDOR PRINCIPAL
       ========================================== */
    
    /* Sección principal de tecnología - Optimización para tablet */
    .technology.section-bg-amarillo {
        padding: 3.5rem 0;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Contenedor de ancho completo - Ajustes para tablet */
    .technology .container-full-width {
        padding: 0 2rem;
        max-width: 100%;
        margin: 0;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (TECNOLOGÍA) - CONTENEDOR PRINCIPAL
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (HEADER) - ENCABEZADO DE TECNOLOGÍA
       ========================================== */
    
    /* Header centrado - Optimización para tablet */
    .inicio-tech-header {
        text-align: center;
        margin-bottom: 3rem;
        padding: 0 1.5rem;
        max-width: 100%;
    }
    
    /* Título principal - Tamaño mejorado para tablet */
    .inicio-tech-title {
        font-size: 2.4rem;
        font-weight: 700;
        color: #1F2937;
        margin-bottom: 1.5rem;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
    }
    
    /* Subtítulo - Tamaño optimizado para tablet */
    .inicio-tech-header .inicio-tech-subtitle {
        font-size: 1.3rem;
        color: #1E40AF;
        font-weight: 600;
        margin-bottom: 1.2rem;
        line-height: 1.4;
    }
    
    /* Descripción - Texto mejorado y más legible */
    .inicio-tech-description {
        font-size: 1.1rem;
        color: #374151;
        line-height: 1.7;
        margin-bottom: 2.5rem;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
        padding: 0 1.5rem;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (HEADER) - ENCABEZADO DE TECNOLOGÍA
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (SHOWCASE) - GRID DE TARJETAS TECNOLÓGICAS
       ========================================== */
    
    /* Grid de tarjetas - Dos columnas en tablet */
    .inicio-tech-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 0 1.5rem;
    }
    
    /* Tarjetas de tecnología - Optimización para tablet */
    .inicio-tech-card {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 0;
        min-height: 480px;
        box-shadow: 0 8px 24px rgba(30, 58, 138, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
        border-top: 4px solid #1E3A8A;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    /* Efecto hover mejorado para tablet */
    .inicio-tech-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (SHOWCASE) - GRID DE TARJETAS TECNOLÓGICAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (IMÁGENES) - PLACEHOLDERS DE EQUIPOS
       ========================================== */
    
    /* Imagen de tarjeta - Altura optimizada para tablet */
    .inicio-tech-card-image {
        margin-bottom: 1.2rem;
        text-align: center;
    }
    
    /* Placeholder de imagen - Tamaño optimizado para tablet */
    .inicio-tech-card-image .image-placeholder {
        width: 100%;
        height: 220px;
        background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #6B7280;
        border: 2px dashed #D1D5DB;
    }
    
    /* Icono del placeholder - Tamaño mejorado */
    .inicio-tech-card-image .image-placeholder i {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        color: #9CA3AF;
    }
    
    /* Texto del placeholder - Tamaño mejorado */
    .inicio-tech-card-image .image-placeholder span {
        font-size: 0.9rem;
        font-weight: 500;
        text-align: center;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (IMÁGENES) - PLACEHOLDERS DE EQUIPOS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (CONTENIDO) - HEADERS Y TÍTULOS DE TARJETAS
       ========================================== */
    
    /* Header de tarjeta - Centrado y bien espaciado */
    .inicio-tech-card-header {
        text-align: center;
        margin-bottom: 1.2rem;
        padding: 1rem 1.5rem 0;
    }
    
    /* Título de tarjeta - Tamaño optimizado para tablet */
    .inicio-tech-card-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: #1F2937;
        margin: 0 0 0.5rem 0;
        line-height: 1.3;
    }
    
    /* Marcas de equipos - Texto mejorado */
    .inicio-tech-card-brands {
        color: #E3B23C;
        font-weight: 600;
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (CONTENIDO) - HEADERS Y TÍTULOS DE TARJETAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (CUERPO) - DESCRIPCIONES Y VENTAJAS
       ========================================== */
    
    /* Cuerpo de tarjeta - Flexbox optimizado */
    .inicio-tech-card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 0 1.5rem 1.5rem;
    }
    
    /* Descripción de tarjeta - Texto mejorado */
    .inicio-tech-card-description {
        color: #374151;
        line-height: 1.5;
        margin-bottom: 1.2rem;
        font-size: 1rem;
        text-align: center;
    }
    
    /* Ventajas del equipo - Diseño mejorado */
    .inicio-tech-card-advantages {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    /* Elementos de ventaja - Tamaño mejorado */
    .inicio-advantage-item {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.6rem;
        background: rgba(30, 58, 138, 0.05);
        border-radius: 6px;
        border: 1px solid rgba(30, 58, 138, 0.12);
        box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.05);
        transition: transform 0.15s ease, background-color 0.15s ease;
    }
    
    /* Efecto hover mejorado para elementos de ventaja */
    .inicio-advantage-item:hover {
        background: rgba(30, 58, 138, 0.08);
        transform: translateX(4px);
    }
    
    /* Icono de ventaja - Tamaño mejorado */
    .inicio-advantage-item i {
        color: #E3B23C;
        font-size: 0.9rem;
        background: rgba(227, 178, 60, 0.15);
        width: 24px;
        height: 24px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    /* Texto de ventaja - Tamaño mejorado */
    .inicio-advantage-item span {
        color: #1F2937;
        font-weight: 600;
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (CUERPO) - DESCRIPCIONES Y VENTAJAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (UTILIDADES) - ELEMENTOS DE APOYO
       ========================================== */
    
    /* Asegurar que los elementos con z-index no bloqueen la selección */
    .section-bg-amarillo .container-full-width {
        position: relative;
        z-index: 10;
    }
    
    /* Texto centrado para tecnología */
    .technology .text-center {
        text-align: center;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (UTILIDADES) - ELEMENTOS DE APOYO
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE 3 (TECNOLOGÍA) - TABLET 768px
       ========================================== */
/* ==========================================
   MEDIA QUERY 768px - BLOQUE 4: PROYECTOS DESTACADOS
   Optimización específica para tablets pequeñas
   Basado en la estructura del BLOQUE 3 (Tecnología) para 768px
       ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE 4 (PROYECTOS) - CONTENEDOR PRINCIPAL
       ========================================== */
    
    /* Sección principal de proyectos - Optimización para tablet pequeña */
    .projects.section-bg-azul {
        padding: 3.5rem 0;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Contenedor de ancho completo - Ajustes para tablet pequeña */
    .projects .container {
        padding: 0 1.8rem;
        max-width: 100%;
        margin: 0;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (PROYECTOS) - CONTENEDOR PRINCIPAL
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 4 (HEADER) - ENCABEZADO DE PROYECTOS
       ========================================== */
    
    /* Header centrado - Optimización para tablet pequeña */
    .projects .section-header {
        text-align: center;
        margin-bottom: 2.8rem;
        padding: 0 1.2rem;
        max-width: 100%;
    }
    
    /* Título principal - Tamaño mejorado para tablet pequeña */
    .projects .section-title {
        font-size: 2.4rem;
        font-weight: 700;
        color: #FFFFFF;
        margin-bottom: 1.4rem;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    /* Subtítulo - Tamaño mejorado para tablet pequeña */
    .projects .section-subtitle {
        font-size: 1.2rem;
        color: #E5E7EB;
        line-height: 1.4;
        margin-bottom: 2.2rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
        padding: 0 1.2rem;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (HEADER) - ENCABEZADO DE PROYECTOS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 4 (GRID) - GRID DE TARJETAS DE PROYECTOS
       ========================================== */
    
    /* Grid de proyectos - Dos columnas en tablet pequeña */
    .inicio-proyectos-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.4rem;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 0 1.2rem;
    }
    
    /* Tarjetas de proyectos - OPTIMIZADAS PARA ELIMINAR ESPACIO MUERTO */
    .inicio-proyectos-card {
        background: #FFFFFF;
        border-radius: 18px; /* ✅ AUMENTADO: De 16px a 18px */
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); /* ✅ MEJORADO: Sombra más pronunciada */
        border: 1px solid rgba(30, 58, 138, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        min-height: 440px; /* ✅ AUMENTADO: De 420px a 440px para 768px */
        height: auto; /* ✅ NUEVO: Altura automática para acomodar contenido */
    }
    
    /* Efecto hover desactivado en móvil */
    .inicio-proyectos-card:hover {
        transform: none;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    }
    
    /* Imagen del proyecto - Altura optimizada para tablet pequeña */
    .project-image {
        height: 300px; /* ✅ AUMENTADO: De 280px a 300px para 768px */
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    
    /* Imagen real del proyecto */
    .project-image .imagen-real {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }
    
    /* Placeholder de imagen */
    .project-image .image-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
        color: #6B7280;
        font-size: 2.8rem; /* ✅ AUMENTADO: De 2.6rem a 2.8rem */
        width: 100%;
        height: 100%;
    }
    
    .project-image .image-placeholder span {
        font-size: 1.1rem; /* ✅ AUMENTADO: De 1rem a 1.1rem */
        margin-top: 0.5rem;
        text-align: center;
        padding: 0 1rem;
    }
    
    /* Overlay del proyecto */
    .project-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(30,58,138,0.2) 100%);
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 1.6rem; /* ✅ AUMENTADO: De 1.4rem a 1.6rem */
    }
    
    /* Categoría del proyecto */
    .project-category {
        background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%);
        color: #1a202c;
        padding: 0.7rem 1.4rem; /* ✅ AUMENTADO: De 0.6rem 1.2rem a 0.7rem 1.4rem */
        border-radius: 15px;
        font-size: 0.95rem; /* ✅ AUMENTADO: De 0.9rem a 0.95rem */
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
    }
    
    .project-content {
        padding: 1.8rem 1.6rem 1.6rem 1.6rem;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    
    /* Título del proyecto - Optimizado para 768px */
    .project-title {
        font-size: 1.6rem; /* ✅ AUMENTADO: De 1.5rem a 1.6rem */
        font-weight: 700;
        color: #1a202c;
        margin-bottom: 1.2rem; /* ✅ AUMENTADO: De 1rem a 1.2rem */
        line-height: 1.3;
    }
    
    .project-description {
        font-size: 1.05rem;
        color: #4B5563;
        line-height: 1.5;
        flex: 1;
        margin-bottom: 0;
    }
    
    .project-details {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin-top: 1.6rem;
    }
    
    /* Item de detalle - AMARILLO COMO EN DESKTOP */
    .detail-item {
        background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%); /* ✅ CORREGIDO: Fondo amarillo como desktop */
        color: #1a202c; /* ✅ CORREGIDO: Texto oscuro para contraste */
        padding: 0.7rem 1.2rem; /* ✅ AUMENTADO: De 0.6rem 1rem a 0.7rem 1.2rem */
        border-radius: 12px;
        font-size: 0.9rem; /* ✅ AUMENTADO: De 0.85rem a 0.9rem */
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.7rem; /* ✅ AUMENTADO: De 0.6rem a 0.7rem */
        border: 2px solid rgba(255, 255, 255, 0.3); /* ✅ NUEVO: Borde sutil */
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3); /* ✅ NUEVO: Sombra dorada */
        transition: all 0.3s ease;
        flex: 1; /* ✅ NUEVO: Hacer que los items se distribuyan equitativamente */
        min-width: 0; /* ✅ NUEVO: Permitir que se encojan si es necesario */
    }
    
    .detail-item i {
        color: #1a202c; /* ✅ CORREGIDO: Icono oscuro para contraste */
        font-size: 0.85rem; /* ✅ AUMENTADO: De 0.8rem a 0.85rem */
        margin-right: 0.6rem; /* ✅ AUMENTADO: De 0.5rem a 0.6rem */
    }
    
    /* ✅ NUEVO: Efecto hover para los detail-item (desactivado en móvil) */
    .inicio-proyectos-card:hover .detail-item {
        background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%); /* ✅ NUEVO: Color naranja en hover */
        color: #ffffff; /* ✅ NUEVO: Texto blanco en hover */
        transform: translateY(-2px) scale(1.02); /* ✅ NUEVO: Elevación y escala */
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4); /* ✅ NUEVO: Sombra naranja */
        border-color: rgba(255, 255, 255, 0.5); /* ✅ NUEVO: Borde más visible */
    }
    
    .inicio-proyectos-card:hover .detail-item i {
        color: #ffffff; /* ✅ NUEVO: Icono blanco en hover */
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (GRID) - GRID DE TARJETAS DE PROYECTOS
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE 4 (PROYECTOS) - TABLET PEQUEÑA 768px
       ========================================== */
           

/* ==========================================
   MEDIA QUERY 768px - BLOQUE CLIENTES
   Optimización específica para tablets pequeñas
   Basado en la estructura del BLOQUE CLIENTES para 600px
   ========================================== */

   
   /* ==========================================
      INICIO DE BLOQUE CLIENTES - CONTENEDOR PRINCIPAL
      ========================================== */
   
   /* Sección principal de clientes - Optimización para tablet pequeña */
   .clientes {
    padding: 3.5rem 0; /* ✅ AUMENTADO: De 3rem a 3.5rem para más espacio */
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Contenedor de ancho completo - Ajustes para tablet pequeña */
.clientes .container {
    padding: 0 2rem; /* ✅ AUMENTADO: De 1.5rem a 2rem para más espacio */
    max-width: 100%;
    margin: 0;
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES - CONTENEDOR PRINCIPAL
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (HEADER) - ENCABEZADO DE CLIENTES
   ========================================== */

/* Header centrado - Optimización para tablet pequeña */
.clientes .section-header {
    text-align: center;
    margin-bottom: 3rem; /* ✅ AUMENTADO: De 2.5rem a 3rem */
    padding: 0 1.2rem; /* ✅ AUMENTADO: De 1rem a 1.2rem */
    max-width: 100%;
}

/* Título principal - Tamaño aumentado para tablet pequeña */
/* ✅ ELIMINADO: .clientes .section-title 768px ahora usa el estilo general */

/* Subtítulo - Tamaño aumentado para tablet pequeña */
.clientes .section-subtitle {
    font-size: 1.2rem; /* ✅ AUMENTADO: De 1.1rem a 1.2rem */
    color: #000000; /* ✅ MANTENIDO: Color negro para mejor legibilidad */
    line-height: 1.4;
    margin-bottom: 2.2rem; /* ✅ AUMENTADO: De 2rem a 2.2rem */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    padding: 0 1.2rem; /* ✅ AUMENTADO: De 1rem a 1.2rem */
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (HEADER) - ENCABEZADO DE CLIENTES
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CARRUSEL) - CARRUSEL DE CLIENTES
   ========================================== */

/* Contenedor del carrusel - COMPLETAMENTE TRANSPARENTE SIN ELEMENTOS BLANCOS */
.inicio-clientes-carousel-container {
    padding: 0; /* ✅ MANTENIDO: Sin padding para eliminar espacios blancos */
    margin: 0 auto;
    max-width: 100%;
    background: transparent; /* ✅ TRANSPARENTE: Fondo completamente transparente */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados que crean espacios blancos */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
    border: none; /* ✅ MANTENIDO: Sin bordes */
}

/* Carrusel principal - MANTIENE COMPORTAMIENTO HORIZONTAL PARA 768px */
.inicio-clientes-carousel {
    display: flex;
    flex-direction: row; /* ✅ MANTENIDO: Mantiene flujo horizontal */
    gap: 0; /* ✅ MANTENIDO: Sin gap entre slides */
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* ✅ MANTENIDO: Oculta slides no activos */
}

/* Slides individuales - DOS TARJETAS POR SLIDE EN TABLET PEQUEÑA */
.inicio-clientes-slide {
    display: flex;
    flex-direction: row; /* ✅ MANTENIDO: Mantiene flujo horizontal */
    gap: 1.5rem; /* ✅ AUMENTADO: De 1.2rem a 1.5rem para más espacio entre tarjetas */
    width: 100%;
    min-width: 100%; /* ✅ MANTENIDO: Ancho mínimo para ocupar todo el carrusel */
    opacity: 0; /* ✅ MANTENIDO: Invisible por defecto */
    visibility: hidden; /* ✅ MANTENIDO: Oculto por defecto */
    position: absolute; /* ✅ MANTENIDO: Posición absoluta para superposición */
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Slide activo - VISIBLE */
.inicio-clientes-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative; /* ✅ MANTENIDO: Posición relativa cuando está activo */
}

/* Tarjetas de cliente - SEMI-TRANSPARENTES PARA MOSTRAR LOGOS DE FONDO */
.inicio-cliente-card-featured {
    background: rgba(255, 255, 255, 0.85); /* ✅ MANTENIDO: Fondo semi-transparente */
    border-radius: 22px; /* ✅ AUMENTADO: De 20px a 22px para bordes más redondeados */
    padding: 1.6rem; /* ✅ AUMENTADO: De 1.4rem a 1.6rem para más espacio interno */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ✅ MANTENIDO: Sombra más suave */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.3); /* ✅ MANTENIDO: Borde más sutil */
    position: relative;
    overflow: hidden;
    min-height: 340px; /* ✅ AUMENTADO: De 320px a 340px para más altura */
    height: auto;
    width: calc(50% - 0.75rem); /* ✅ AJUSTADO: De 0.6rem a 0.75rem para mejor separación */
    max-width: calc(50% - 0.75rem);
    flex-shrink: 0; /* ✅ MANTENIDO: No se encoge */
    flex-grow: 0; /* ✅ MANTENIDO: No crece */
}

/* Efecto hover desactivado en móvil */
.inicio-cliente-card-featured:hover {
    transform: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Contenedor del logo - SEMI-TRANSPARENTE PARA MOSTRAR LOGOS DE FONDO */
.cliente-logo-container {
    position: relative;
    width: 100%;
    height: 130px; /* ✅ AUMENTADO: De 120px a 130px para más espacio */
    min-height: 130px;
    max-height: 130px;
    margin-bottom: 1.4rem; /* ✅ AUMENTADO: De 1.2rem a 1.4rem */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 249, 255, 0.7); /* ✅ MANTENIDO: Fondo semi-transparente */
    border-radius: 16px; /* ✅ AUMENTADO: De 14px a 16px para bordes más redondeados */
    overflow: hidden;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 1px solid rgba(14, 165, 233, 0.3); /* ✅ MANTENIDO: Borde más sutil */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); /* ✅ MANTENIDO: Sombra más sutil */
    flex-shrink: 0;
}

/* Imagen del cliente - Tamaño optimizado para tablet pequeña */
.cliente-imagen-featured {
    width: 100%;
    height: 100%;
    min-width: 110px; /* ✅ AUMENTADO: De 100px a 110px para logos más grandes */
    min-height: 110px; /* ✅ AUMENTADO: De 100px a 110px para logos más grandes */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease-out;
    position: relative;
    z-index: 2;
}

/* Información del cliente - Optimizada para tablet pequeña */
.cliente-info-featured {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 1rem; /* ✅ AUMENTADO: De 0.8rem a 1rem */
    border-radius: 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Nombre del cliente - Tamaño optimizado para tablet pequeña */
.cliente-nombre-featured {
    font-size: 1.2rem; /* ✅ AUMENTADO: De 1.1rem a 1.2rem */
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.8rem; /* ✅ AUMENTADO: De 0.7rem a 0.8rem */
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-align: center; /* ✅ MANTENIDO: Centrado para mejor apariencia */
}

/* Categoría del cliente - Optimizada para tablet pequeña */
.cliente-categoria-featured {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 0.6rem 1.2rem; /* ✅ AUMENTADO: De 0.5rem 1rem a 0.6rem 1.2rem */
    border-radius: 22px; /* ✅ AUMENTADO: De 20px a 22px para bordes más redondeados */
    font-size: 0.8rem; /* ✅ AUMENTADO: De 0.75rem a 0.8rem */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px; /* ✅ AUMENTADO: De 0.5px a 0.6px */
    margin-bottom: 0.6rem; /* ✅ AUMENTADO: De 0.5rem a 0.6rem */
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3); /* ✅ MANTENIDO: Sombra más sutil */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    align-self: center;
}

/* Colores específicos por tipo de industria - Optimizados para tablet pequeña */
.cliente-categoria-featured[data-industry="industrial"] {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.3);
}

.cliente-categoria-featured[data-industry="comercial"] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3);
}

.cliente-categoria-featured[data-industry="vivienda"] {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 3px 8px rgba(124, 58, 237, 0.3);
}

.cliente-categoria-featured[data-industry="construccion"] {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    box-shadow: 0 3px 8px rgba(234, 88, 12, 0.3);
}

.cliente-categoria-featured[data-industry="gobierno"] {
    background: linear-gradient(135deg, #1f2937, #111827);
    box-shadow: 0 3px 8px rgba(31, 41, 55, 0.3);
}

.cliente-categoria-featured[data-industry="financiero"] {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 3px 8px rgba(8, 145, 178, 0.3);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CARRUSEL) - CARRUSEL DE CLIENTES
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CONTROLES) - CONTROLES DE NAVEGACIÓN
   ========================================== */

/* Controles del carrusel - FLOTANTES SIN LÍNEAS HORIZONTALES (IGUAL A 600px) */
.inicio-clientes-controls {
    position: absolute;
    top: 50%;
    left: -0.5rem; /* ✅ IGUAL A 600px: Más hacia la izquierda para flotar */
    right: -0.5rem; /* ✅ IGUAL A 600px: Más hacia la derecha para flotar */
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    padding: 0; /* ✅ IGUAL A 600px: Sin padding para eliminar líneas horizontales */
    z-index: 10;
    pointer-events: none; /* ✅ MANTENIDO: Para que no interfiera con el carrusel */
}

/* ✅ ELIMINAR PSEUDO-ELEMENTOS QUE CREAN LÍNEAS VERTICALES (IGUAL A 600px) */
.inicio-clientes-controls::before,
.inicio-clientes-controls::after {
    display: none; /* ✅ IGUAL A 600px: Sin gradientes blancos verticales */
}

/* Botones de navegación - Tamaño optimizado para tablet pequeña */
.inicio-clientes-btn {
    width: 44px; /* ✅ AUMENTADO: De 40px a 44px para mejor visibilidad */
    height: 44px; /* ✅ AUMENTADO: De 40px a 44px para mejor visibilidad */
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem; /* ✅ AUMENTADO: De 1rem a 1.1rem */
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); /* ✅ MANTENIDO: Sombra más visible */
    position: relative;
    overflow: hidden;
    pointer-events: auto; /* ✅ MANTENIDO: Para que sean clickeables */
}

.inicio-clientes-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.inicio-clientes-btn:active {
    transform: scale(0.95);
}

.inicio-clientes-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(1);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CONTROLES) - CONTROLES DE NAVEGACIÓN
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (INDICADORES) - INDICADORES DE PAGINACIÓN
   ========================================== */

/* Indicadores del carrusel - COMPLETAMENTE TRANSPARENTES SIN ELEMENTOS BLANCOS */
.inicio-clientes-indicators {
    display: flex;
    justify-content: center;
    gap: 1.2rem; /* ✅ AUMENTADO: De 1rem a 1.2rem para más separación */
    margin-top: 2.2rem; /* ✅ AUMENTADO: De 2rem a 2.2rem */
    padding: 1.4rem 1.8rem; /* ✅ AUMENTADO: De 1.2rem 1.5rem a 1.4rem 1.8rem */
    background: transparent; /* ✅ MANTENIDO: Sin fondo blanco */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados */
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    border: none; /* ✅ MANTENIDO: Sin bordes */
    position: relative;
}

/* Indicador individual - Tamaño optimizado para tablet pequeña */
.inicio-clientes-indicator {
    width: 16px; /* ✅ AUMENTADO: De 14px a 16px para mejor visibilidad */
    height: 16px; /* ✅ AUMENTADO: De 14px a 16px para mejor visibilidad */
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    cursor: pointer;
    transition: all 0.4s ease;
    border: 2px solid rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.inicio-clientes-indicator:hover {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    transform: scale(1.2);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.inicio-clientes-indicator.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    transform: scale(1.3);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.3);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (INDICADORES) - INDICADORES DE PAGINACIÓN
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CTA) - ESTADÍSTICAS DE CLIENTES
   ========================================== */

/* CTA de clientes - Optimizado para tablet pequeña */
.clientes-cta {
    margin-top: 3.5rem; /* ✅ AUMENTADO: De 3rem a 3.5rem */
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Estadísticas de clientes - Optimizadas para tablet pequeña */
.clientes-stats {
    display: flex;
    flex-direction: column;
    gap: 1.8rem; /* ✅ AUMENTADO: De 1.5rem a 1.8rem para más separación */
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

/* Item de estadística - COMPLETAMENTE TRANSPARENTE SIN ELEMENTOS BLANCOS */
.clientes .stat-item {
    display: flex;
    align-items: center;
    gap: 1.4rem; /* ✅ AUMENTADO: De 1.2rem a 1.4rem para más separación */
    background: transparent; /* ✅ MANTENIDO: Sin fondo blanco */
    padding: 1.4rem 1.8rem; /* ✅ AUMENTADO: De 1.2rem 1.6rem a 1.4rem 1.8rem */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    border: none; /* ✅ MANTENIDO: Sin bordes */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 340px; /* ✅ AUMENTADO: De 320px a 340px para más ancho */
    max-width: 100%;
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
}

/* Efecto hover desactivado en móvil para evitar sombras blancas */
.clientes .stat-item:hover {
    transform: none;
    box-shadow: none;
}

/* Icono de estadística - Optimizado para tablet pequeña */
.clientes .stat-item i {
    font-size: 1.8rem; /* ✅ AUMENTADO: De 1.6rem a 1.8rem */
    color: #007bff;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Texto de estadística - Optimizado para tablet pequeña */
.clientes .stat-item strong {
    color: #007bff;
    font-weight: 700;
    font-size: 1.4rem; /* ✅ AUMENTADO: De 1.3rem a 1.4rem */
    margin-right: 0.6rem; /* ✅ AUMENTADO: De 0.5rem a 0.6rem */
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CTA) - ESTADÍSTICAS DE CLIENTES
   ========================================== */

/* ==========================================
   FINAL DE BLOQUE CLIENTES - TABLET PEQUEÑA 768px
   ========================================== */
       
/* ==========================================
   BREAKPOINT 768px - TABLET PEQUEÑA
   BLOQUE: SOBRE LAMA TOPOGRAFÍA
   OPTIMIZADO PARA TABLETS PEQUEÑAS DE 768px
   BASADO EN EL DISEÑO EXITOSO DE 600px
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA - SECCIÓN PRINCIPAL
       ========================================== */
    
    /* Contenedor principal - OPTIMIZADO PARA TABLET PEQUEÑA */
    .about.section-bg-amarillo {
        padding: 3rem 0;
        margin: 0;
        overflow-x: hidden;
        scroll-behavior: smooth;
        width: 100vw;
        max-width: 100vw;
        font-size: 16px;
        line-height: 1.6;
    }
    
    /* Contenedor de ancho completo - SIN RESTRICCIONES */
    .container-full-width {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0 2rem;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (HEADER) - TÍTULO Y SUBTÍTULO
       ========================================== */
    
    .inicio-about-header {
        margin-bottom: 3rem;
        text-align: center;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .about-title-container {
        max-width: 100%;
        width: 100%;
        padding: 2.5rem;
        margin: 0 auto 3rem auto;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        border: 2px solid rgba(30, 64, 175, 0.3);
        border-radius: 22px;
        box-shadow: 0 15px 35px rgba(30, 64, 175, 0.2);
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    
    .about-title-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .inicio-about-title {
        font-size: 2.4rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 1.5rem;
        line-height: 1.2;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .inicio-about-subtitle {
        font-size: 1.2rem;
        color: var(--text-secondary);
        line-height: 1.7;
        margin: 0;
        font-weight: 400;
        max-width: 100%;
    }

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (HEADER) - TÍTULO Y SUBTÍTULO
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (FILA SUPERIOR) - HISTORIA + VALORES
       ========================================== */
    
    .inicio-about-top-row {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        margin-bottom: 3.5rem;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (HISTORIA) - NUESTRA TRAYECTORIA
       ========================================== */
    
    .about-historia-section {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .inicio-about-story-compact {
        display: flex;
        flex-direction: column;
        gap: 1.8rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* Cuadro principal de contenido - MÁXIMO ANCHO */
    .story-content-box {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        border-radius: 22px;
        padding: 2.5rem;
        box-shadow: 0 15px 35px rgba(30, 64, 175, 0.2);
        border: 2px solid rgba(30, 64, 175, 0.3);
        display: flex;
        flex-direction: column;
        gap: 1.8rem;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    
    /* Título del bloque */
    .story-title-compact {
        font-size: 1.9rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0 0 1.5rem 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
        text-align: center;
    }
    
    /* Layout vertical para tablet pequeña */
    .story-content-horizontal {
        display: flex;
        flex-direction: column;
        gap: 1.8rem;
        margin-top: 0;
    }
    
    /* Sección de texto */
    .story-text-section {
        width: 100%;
        order: 1;
    }
    
    .story-text-compact {
        font-size: 1.1rem;
        line-height: 1.8;
        color: var(--text-color);
        margin: 0;
        text-align: left;
    }
    
    .story-text-compact strong {
        color: var(--primary-color);
        font-weight: 600;
    }
    
    /* Sección de imagen */
    .story-image-section {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        order: 2;
    }
    
    .story-image-placeholder {
        border-radius: 18px;

        padding: 3rem;
        border: 2px solid rgba(30, 64, 175, 0.3);
        text-align: center;
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 260px;
        margin: 0;
    }
    
    .story-image-placeholder:hover {


        transform: translateY(-4px);

    }
    
    .image-coming-soon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        color: var(--primary-color);
    }
    
    .image-coming-soon i {
        font-size: 3.5rem;
        color: var(--primary-color);
    }
    
    .image-coming-soon span {
        font-size: 1.1rem;
        font-weight: 500;
        color: var(--primary-color);
        text-align: center;
    }

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (HISTORIA) - NUESTRA TRAYECTORIA
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (VALORES) - LO QUE NOS DIFERENCIA
       ========================================== */
    
    .about-valores-section {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .inicio-about-values-compact {
        display: flex;
        flex-direction: column;
        gap: 1.8rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* Título de valores - MÁXIMO ANCHO */
    .values-title-container {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 18px;
        padding: 2rem 1.5rem;
        margin-bottom: 1.8rem;
        box-shadow: 0 10px 25px rgba(30, 64, 175, 0.18);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .values-title-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .values-title-compact {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
    }
    
    /* Grid de valores - OPTIMIZADO PARA TABLET PEQUEÑA */
    .values-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        row-gap: 1.8rem;
        margin-top: 0;
        flex: 1;
        align-content: start;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Items de valores */
    .value-item-compact {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 16px;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
        transition: transform 0.3s ease;
        min-height: 110px;
        justify-content: center;
    }
    
    .value-item-compact:hover {


        transform: translateY(-4px);

    }
    
    /* Iconos de valores */
    .value-icon-small {
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.6rem;
        box-shadow: 0 5px 15px rgba(30, 64, 175, 0.45);
    }
    
    .value-icon-small i {
        font-size: 1.2rem;
        color: white;
    }
    
    /* Contenido de valores */
    .value-content-small {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
        width: 100%;
    }
    
    .value-content-small h4 {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--primary-color);
        margin: 0;
        line-height: 1.2;
        font-family: 'Poppins', sans-serif;
    }
    
    .value-content-small p {
        font-size: 0.85rem;
        color: var(--text-secondary);
        line-height: 1.5;
        margin: 0;
        font-weight: 500;
        text-align: center;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (VALORES) - LO QUE NOS DIFERENCIA
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (FILA SUPERIOR) - HISTORIA + VALORES
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (FILA INFERIOR) - ESTADÍSTICAS + CTA + CERTIFICACIONES
       ========================================== */
    
    .inicio-about-bottom-row {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        padding: 0;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (ESTADÍSTICAS) - ESTADÍSTICAS DE EMPRESA
       ========================================== */
    
    .about-stats-section {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .inicio-about-stats-compact-horizontal {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 18px;
        padding: 2rem;
        box-shadow: 0 10px 25px rgba(30, 64, 175, 0.18);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-stats-compact-horizontal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .stats-horizontal-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        row-gap: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .stat-horizontal {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 14px;
        padding: 2rem 1.2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.6rem;
        min-width: 0;
        width: 100%;
        transition: transform 0.3s ease;
    }
    
    .stat-horizontal:hover {


        transform: translateY(-4px);

    }
    
    .stat-number {
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary-color);
        line-height: 1;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .stat-label {
        font-size: 0.7rem;
        color: var(--text-secondary);
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: 0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (ESTADÍSTICAS) - ESTADÍSTICAS DE EMPRESA
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (CTA) - CALL TO ACTION
       ========================================== */
    
    .about-cta-section {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .inicio-about-cta-compact {
        background: linear-gradient(135deg, rgba(30, 64, 175, 0.95) 0%, rgba(59, 130, 246, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.3);
        border-radius: 18px;
        padding: 2rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(30, 64, 175, 0.35);
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-cta-compact::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .inicio-about-cta-compact h3 {
        font-size: 1.4rem;
        font-weight: 700;
        color: white;
        margin: 0 0 1rem 0;
        line-height: 1.2;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .inicio-about-cta-compact p {
        font-size: 1.1rem;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.6;
        margin: 0 0 1.8rem 0;
    }
    
    .cta-buttons-compact {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
    
    .cta-buttons-compact .btn {
        padding: 1rem 2rem;
        font-size: 1.1rem;
        border-radius: 14px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.8rem;
        transition: all 0.3s ease;
        font-weight: 600;
        min-width: 260px;
        justify-content: center;
    }
    
    .cta-buttons-compact .btn-primary {
        background: linear-gradient(135deg, #E3B23C 0%, #FFD700 100%);
        color: var(--primary-color);
        border: 1px solid rgba(227, 178, 60, 0.3);
    }
    
    .cta-buttons-compact .btn-primary:hover {
        background: linear-gradient(135deg, #D4A017 0%, #E6C200 100%);
        transform: translateY(-4px);

    }
    
    .cta-buttons-compact .btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .cta-buttons-compact .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-4px);
        box-shadow: 0 10px 25px rgba(255, 255, 255, 0.35);
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (CTA) - CALL TO ACTION
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (CERTIFICACIONES) - CREDENCIALES Y CERTIFICACIONES
       ========================================== */
    
    .about-certificaciones-section {
        width: 100%;
        max-width: 100%;
        order: 3;
    }
    
    .inicio-about-credentials-horizontal {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 18px;
        padding: 2rem;
        box-shadow: 0 10px 25px rgba(30, 64, 175, 0.18);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-credentials-horizontal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .credentials-title-horizontal {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0 0 1.5rem 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
    }
    
    .credentials-horizontal {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        align-items: center;
    }
    
    .credential-horizontal {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 14px;
        padding: 1.2rem 1.6rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--primary-color);
        transition: all 0.3s ease;
        width: 100%;
        justify-content: center;
    }
    
    .credential-horizontal:hover {


        transform: translateY(-4px);

    }
    
    .credential-horizontal i {
        font-size: 1.2rem;
        color: var(--primary-color);
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (CERTIFICACIONES) - CREDENCIALES Y CERTIFICACIONES
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (FILA INFERIOR) - ESTADÍSTICAS + CTA + CERTIFICACIONES
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (UTILIDADES) - OPTIMIZACIONES Y OVERRIDES
       ========================================== */
    
    /* Asegurar que todo el texto sea seleccionable */
    .about.section-bg-amarillo * {
        user-select: text;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        box-sizing: border-box;
    }
    
    /* Asegurar que no haya scroll horizontal */
    body {
        overflow-x: hidden;
    }
    
    /* Asegurar que los botones sean táctiles */
    .btn, .value-item-compact, .stat-horizontal, .credential-horizontal {
        min-height: 52px;
        touch-action: manipulation;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (UTILIDADES) - OPTIMIZACIONES Y OVERRIDES
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA - TABLET PEQUEÑA 768px
       ========================================== */

    /* ==========================================
       OVERRIDES ESPECÍFICOS PARA 768px - SOBRESCRITURA DE ESTILOS BASE
       ========================================== */
    
    /* Sobrescribir cualquier max-width del CSS base */
    .about.section-bg-amarillo .container-full-width,
    .about.section-bg-amarillo .inicio-about-header,
    .about.section-bg-amarillo .inicio-about-top-row,
    .about.section-bg-amarillo .inicio-about-bottom-row,
    .about.section-bg-amarillo .about-historia-section,
    .about.section-bg-amarillo .about-valores-section,
    .about.section-bg-amarillo .about-stats-section,
    .about.section-bg-amarillo .about-cta-section,
    .about.section-bg-amarillo .about-certificaciones-section,
    .about.section-bg-amarillo .inicio-about-story-compact,
    .about.section-bg-amarillo .inicio-about-values-compact,
    .about.section-bg-amarillo .story-content-box,
    .about.section-bg-amarillo .values-title-container,
    .about.section-bg-amarillo .inicio-about-stats-compact-horizontal,
    .about.section-bg-amarillo .inicio-about-cta-compact,
    .about.section-bg-amarillo .inicio-about-credentials-horizontal,
    .about.section-bg-amarillo .about-title-container {
        max-width: 100%;
        width: 100%;
    }
    
    /* Forzar layout vertical en todos los contenedores */
    .about.section-bg-amarillo .inicio-about-top-row {
        display: flex;
        flex-direction: column;
    }
    
    .about.section-bg-amarillo .inicio-about-bottom-row {
        display: flex;
        flex-direction: column;
    }

    /* ==========================================
       FINAL OVERRIDES ESPECÍFICOS PARA 768px - SOBRESCRITURA DE ESTILOS BASE
   ========================================== */
       


} /* 🎯 FIN BLOQUE HERO - 768px */

/* ==========================================
   MEDIA QUERY 900px - BLOQUE HERO
   Optimización específica para desktop pequeño
   Basado en media_768px_hero.css pero adaptado para 900px
   ========================================== */

@media (max-width: 900px) and (min-width: 769px) {
/* ==========================================
   BREAKPOINT 900px - INICIO DE BLOQUE 2 (SERVICIOS)
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE 2 (SERVICIOS) - CONTENEDOR PRINCIPAL
       ========================================== */
       .servicios-slider-container,
       .inicio-servicios-slider {
           margin-top: 1rem;
           width: 100vw;
           max-width: 100vw;
           padding: 0;
           overflow: hidden;
           margin-left: calc(-50vw + 50%);
           margin-right: calc(-50vw + 50%);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (SERVICIOS) - CONTENEDOR PRINCIPAL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CARRUSEL) - SLIDER PRINCIPAL
          ========================================== */
       .servicios-slider {
           display: flex;
           align-items: center;
           padding: 2rem 0; /* ✅ PADDING para 900px */
           min-height: 400px; /* ✅ ALTURA OPTIMIZADA para 900px */
           overflow: hidden;
           position: relative;
           width: 100vw;
           max-width: 100vw;
           
           /* Variables CSS para controlar difuminado */
           --difuminado-izquierdo: hidden;
           --difuminado-derecho: visible;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CARRUSEL) - SLIDER PRINCIPAL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (DIFUMINADO) - GRADIENTES LATERALES
          ========================================== */
       /* DIFUMINADO LATERAL - MÁS ANCHO PARA 900px */
       .servicios-slider::before,
       .servicios-slider::after {
           content: '';
           position: absolute;
           top: 0;
           bottom: 0;
           width: 80px; /* Más ancho para 900px */
           z-index: 10;
           pointer-events: none;
           transition: opacity 0.5s ease;
       }
   
       .servicios-slider::before {
           left: 0;
           background: linear-gradient(to right, rgba(30, 58, 138, 0.9) 0%, rgba(30, 58, 138, 0.6) 40%, rgba(30, 58, 138, 0.3) 70%, transparent 100%);
           opacity: var(--difuminado-izquierdo);
       }
   
       .servicios-slider::after {
           right: 0;
           background: linear-gradient(to left, rgba(30, 58, 138, 0.9) 0%, rgba(30, 58, 138, 0.6) 40%, rgba(30, 58, 138, 0.3) 70%, transparent 100%);
           opacity: var(--difuminado-derecho);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (DIFUMINADO) - GRADIENTES LATERALES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CONTENEDOR INTERNO) - WRAPPER DE SLIDES
          ========================================== */
       .servicios-slider-inner {
           display: flex;
           align-items: center;
           transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           width: max-content;
           padding: 0 2rem; /* ✅ PADDING para centrado en 900px */
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CONTENEDOR INTERNO) - WRAPPER DE SLIDES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (TARJETAS) - CARDS DE SERVICIOS
          ========================================== */
       /* TARJETAS DE SERVICIOS - HORIZONTALES PARA 900px - MÁS ANCHAS Y MENOS ALTAS */
       .servicio-item {
           width: 800px; /* ✅ ANCHO MÁS AMPLIO para 900px */
           min-width: 800px;
           height: 400px; /* ✅ ALTURA REDUCIDA para 900px */
           min-height: 400px;
           max-height: 400px;
           background: white;
           border-radius: 16px;
           box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
           border: 2px solid rgba(30, 58, 138, 0.15);
           flex-shrink: 0;
           transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           display: flex; /* ✅ HORIZONTAL: texto izquierda, imagen derecha */
           margin: 0 0.4rem; /* ✅ MARGEN para 900px */
           position: relative;
           overflow: hidden;
       }
   
       /* COLORES ALTERNADOS PARA CADA TARJETA */
       .servicio-item:nth-child(odd) {
           background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
           border-color: rgba(30, 58, 138, 0.2);
       }
   
       .servicio-item:nth-child(even) {
           background: linear-gradient(135deg, #F0F4FF 0%, #E6F0FF 100%);
           border-color: rgba(30, 58, 138, 0.25);
       }
   
       /* EFECTO HOVER EN TARJETAS */
       .servicio-item:hover {
           transform: translateY(-8px);
           box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
           border-color: rgba(30, 58, 138, 0.3);
       }
   
       /* EFECTO DE BORDE DORADO AL HOVER */
       .servicio-item::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           height: 4px;
           background: linear-gradient(90deg, #E3B23C, #FFD700, #E3B23C);
           transform: scaleX(0);
           transition: transform 0.4s ease;
           z-index: 5;
       }
   
       .servicio-item:hover::before {
           transform: scaleX(1);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (TARJETAS) - CARDS DE SERVICIOS
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CONTENIDO) - TEXTO E IMÁGENES
          ========================================== */
       /* Contenido de las tarjetas - DISTRIBUCIÓN HORIZONTAL PARA 900px */
       .servicio-contenido {
           display: flex;
           flex-direction: row; /* ✅ HORIZONTAL: texto izquierda, imagen derecha */
           height: 400px; /* ✅ ALTURA para 900px */
           min-height: 400px;
           max-height: 400px;
           position: relative;
           width: 100%;
       }
   
       /* Texto izquierda - ANCHO OPTIMIZADO PARA 900px */
       .servicio-texto {
           flex: 1; /* ✅ FLEXIBLE para ocupar espacio disponible */
           min-height: 400px; /* ✅ ALTURA COMPLETA para 900px */
           width: 50%; /* ✅ MITAD DEL ANCHO */
           display: flex;
           flex-direction: column;
           justify-content: center; /* ✅ CENTRADO VERTICAL */
           padding: 2rem; /* ✅ PADDING para 900px */
           position: relative;
           box-sizing: border-box;
       }
   
       .servicio-titulo {
           font-size: 1.8rem; /* ✅ TAMAÑO para 900px */
           font-weight: 700;
           color: #1E3A8A;
           margin-bottom: 1rem;
           line-height: 1.3;
           text-align: left;
           transition: all 0.4s ease;
       }
   
       .servicio-item:hover .servicio-titulo {
           color: #E3B23C;
           transform: translateY(-2px);
       }
   
       .servicio-descripcion {
           color: #2D3748;
           line-height: 1.6;
           margin-bottom: 1.5rem;
           font-weight: 500;
           font-size: 1rem;
           text-align: left;
           flex-grow: 1;
           display: flex;
           align-items: flex-start;
       }
   
       .servicio-item:hover .servicio-descripcion {
           color: #1A202C;
       }
   
       /* Botón Saber más información - VISIBLE EN 900px */
       .servicio-enlace {
           display: inline-flex; /* ✅ VISIBLE en 900px */
           align-items: center;
           gap: 0.5rem;
           padding: 0.8rem 1.5rem;
           background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
           color: white;
           text-decoration: none;
           border-radius: 8px;
           font-weight: 600;
           font-size: 0.9rem;
           transition: all 0.3s ease;
           align-self: flex-start;
       }
   
       .servicio-enlace:hover {
           background: linear-gradient(135deg, #E3B23C 0%, #FFD700 100%);
           transform: translateY(-2px);
           box-shadow: 0 4px 15px rgba(227, 178, 60, 0.3);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CONTENIDO) - TEXTO E IMÁGENES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (IMÁGENES) - PLACEHOLDERS Y FALLBACKS
          ========================================== */
       /* Imagen derecha - ANCHO OPTIMIZADO PARA 900px */
       .servicio-imagen {
           flex: none;
           height: 400px; /* ✅ ALTURA COMPLETA para 900px */
           min-height: 400px;
           max-height: 400px;
           width: 50%; /* ✅ MITAD DEL ANCHO */
           display: flex;
           align-items: center;
           justify-content: center;
           border-left: 1px solid rgba(30, 58, 138, 0.1);
           position: relative;
           background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
           box-shadow: inset 0 0 20px rgba(227, 178, 60, 0.15);
           transition: all 0.5s ease;
           box-sizing: border-box;
       }
   
       /* COLORES ALTERNADOS PARA LAS IMÁGENES */
       .servicio-item:nth-child(odd) .servicio-imagen {
           background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
           box-shadow: inset 0 0 20px rgba(227, 178, 60, 0.15);
       }
   
       .servicio-item:nth-child(even) .servicio-imagen {
           background: linear-gradient(135deg, #E6F0FF 0%, #B3D9FF 100%);
           box-shadow: inset 0 0 20px rgba(30, 58, 138, 0.15);
       }
   
       .servicio-item:hover .servicio-imagen {
           background: linear-gradient(135deg, #FFE082 0%, #FFD700 100%);
           box-shadow: inset 0 0 25px rgba(227, 178, 60, 0.25);
           transform: scale(1.02);
       }
   
       /* Placeholder de imagen - VISIBLE COMO EN PC */
       .imagen-placeholder {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           text-align: center;
           color: #1E3A8A;
           font-size: 1rem;
           font-weight: 500;
           width: 100%;
           height: 100%;
           position: relative;
           padding: 2rem;
       }
   
       .imagen-placeholder i {
           font-size: 3rem;
           margin-bottom: 0.5rem;
           opacity: 0.7;
           transition: all 0.3s ease;
       }
   
       .imagen-placeholder span {
           font-size: 0.9rem;
           opacity: 0.8;
           transition: all 0.3s ease;
           margin-bottom: 0.5rem;
       }
   
       .servicio-item:hover .imagen-placeholder i {
           transform: scale(1.1);
           opacity: 1;
       }
   
       .servicio-item:hover .imagen-placeholder span {
           opacity: 1;
       }
   
       /* TEXTO INFORMATIVO - OCULTO EN 900px (YA HAY BOTÓN) */
       .servicio-item .imagen-placeholder::after,
       .servicio-item .imagen-placeholder.fallback::after {
           display: none; /* ✅ OCULTO en 900px - ya hay botón */
       }
   
       /* ✅ ASEGURAR QUE LAS IMÁGENES NO TAPEN EL TEXTO INFORMATIVO */
       .servicio-imagen .imagen-real {
           z-index: 1;
       }
   
       /* Ocultar placeholder cuando hay imagen real en 900px */
       .servicio-imagen:has(.imagen-real) .imagen-placeholder.fallback {
           opacity: 0;
           display: none;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (IMÁGENES) - PLACEHOLDERS Y FALLBACKS
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (NAVEGACIÓN) - FLECHAS DE CONTROL
          ========================================== */
       /* FLECHAS DE NAVEGACIÓN - OPTIMIZADAS PARA 900px */
       .slider-btn {
           background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
           color: white;
           border: none;
           width: 55px;
           height: 55px;
           border-radius: 50%;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1.3rem;
           position: relative;
           overflow: hidden;
           z-index: 25;
           transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           box-shadow: 0 4px 15px rgba(30, 58, 138, 0.25);
       }
   
       .slider-btn:hover {
           transform: translateY(-50%) scale(1.05);
           box-shadow: 0 6px 20px rgba(30, 58, 138, 0.35);
       }
   
       .slider-btn.prev {
           position: absolute;
           left: 0.5rem; /* ✅ MÁS ALEJADO para 900px */
           top: 50%;
           transform: translateY(-50%);
           opacity: 0;
           visibility: hidden;
           transition: all 0.4s ease;
       }
   
       .slider-btn.next {
           position: absolute;
           right: 0.5rem; /* ✅ MÁS ALEJADO para 900px */
           top: 50%;
           transform: translateY(-50%);
           opacity: 0;
           visibility: visible;
           transition: all 0.4s ease;
       }
   
       /* Mostrar botones cuando están activos */
       .slider-btn.active {
           opacity: 1;
           visibility: visible;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (NAVEGACIÓN) - FLECHAS DE CONTROL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (INDICADORES) - PUNTOS DE NAVEGACIÓN
          ========================================== */
       /* PUNTOS INDICADORES - OPTIMIZADOS PARA 900px */
       .slider-puntos {
           display: flex;
           justify-content: center;
           gap: 0.8rem;
           margin-top: 1.5rem;
           flex-wrap: wrap;
       }
   
       .slider-punto {
           width: 10px;
           height: 10px;
           border-radius: 50%;
           background: #CBD5E1;
           cursor: pointer;
           transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           position: relative;
           overflow: hidden;
       }
   
       .slider-punto.activo {
           background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
           transform: scale(1.3);
           box-shadow: 0 2px 8px rgba(30, 58, 138, 0.4);
       }
   
       .slider-punto:hover {
           background: #2563EB;
           transform: scale(1.2);
       }
   
       /* EFECTO DE RAYA DORADA EN PUNTOS ACTIVOS */
       .slider-punto::before {
           content: '';
           position: absolute;
           top: 0;
           left: -100%;
           width: 100%;
           height: 100%;
           background: linear-gradient(90deg, transparent, #FFD700, transparent);
           transition: left 0.6s ease;
       }
   
       .slider-punto.activo::before {
           left: 100%;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (INDICADORES) - PUNTOS DE NAVEGACIÓN
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CTA) - BOTÓN VER TODOS
          ========================================== */
       /* BOTÓN VER TODOS LOS SERVICIOS - OPTIMIZADO PARA 900px */
       .servicios-cta {
           text-align: center;
           margin-top: 2rem;
           margin-bottom: 1rem;
       }
   
       .servicios-cta .btn {
           padding: 1rem 2rem;
           font-size: 1rem;
           border-radius: 12px;
           min-width: 250px;
           max-width: 320px;
       }
   
       .servicios-cta .btn i {
           font-size: 1.1rem;
       }
   
       /* RESPONSIVE ADJUSTMENTS PARA 900px */
       .servicios-cta .btn span {
           font-size: 1rem;
           font-weight: 600;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CTA) - BOTÓN VER TODOS (FINAL DE BLOQUE 2 SERVICIOS)
          ========================================== */
   
/* ==========================================
   BREAKPOINT 900px - TABLET GRANDE - INICIO DE BLOQUE 3 (TECNOLOGÍA)
   ========================================== */


    /* ==========================================
       INICIO DE BLOQUE 3 (TECNOLOGÍA) - CONTENEDOR PRINCIPAL
       ========================================== */
    
    /* Sección principal de tecnología - Optimización para tablet grande */
    .technology.section-bg-amarillo {
        padding: 4rem 0;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Contenedor de ancho completo - Ajustes para tablet grande */
    .technology .container-full-width {
        padding: 0 2rem;
        max-width: 100%;
        margin: 0;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (TECNOLOGÍA) - CONTENEDOR PRINCIPAL
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (HEADER) - ENCABEZADO DE TECNOLOGÍA
       ========================================== */
    
    /* Header centrado - Optimización para tablet grande */
    .inicio-tech-header {
        text-align: center;
        margin-bottom: 3rem;
        padding: 0 2rem;
        max-width: 100%;
    }
    
    /* Título principal - Tamaño mejorado para tablet grande */
    .inicio-tech-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: #1F2937;
        margin-bottom: 1.5rem;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
    }
    
    /* Subtítulo - Tamaño optimizado para tablet grande */
    .inicio-tech-header .inicio-tech-subtitle {
        font-size: 1.3rem;
        color: #1E40AF;
        font-weight: 600;
        margin-bottom: 1.2rem;
        line-height: 1.4;
    }
    
    /* Descripción - Texto mejorado y más legible */
    .inicio-tech-description {
        font-size: 1.1rem;
        color: #374151;
        line-height: 1.7;
        margin-bottom: 2.5rem;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
        padding: 0 2rem;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (HEADER) - ENCABEZADO DE TECNOLOGÍA
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (SHOWCASE) - GRID DE TARJETAS TECNOLÓGICAS
       ========================================== */
    
    /* Grid de tarjetas - Dos columnas en tablet grande (2x2) */
    .inicio-tech-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 0 2rem;
    }
    
    /* Tarjetas de tecnología - Optimización para tablet grande */
    .inicio-tech-card {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 0;
        min-height: 480px;
        box-shadow: 0 8px 24px rgba(30, 58, 138, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
        border-top: 4px solid #1E3A8A;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    /* Efecto hover mejorado para tablet grande */
    .inicio-tech-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (SHOWCASE) - GRID DE TARJETAS TECNOLÓGICAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (IMÁGENES) - PLACEHOLDERS DE EQUIPOS
       ========================================== */
    
    /* Imagen de tarjeta - Altura optimizada para tablet grande */
    .inicio-tech-card-image {
        margin-bottom: 1.2rem;
        text-align: center;
    }
    
    /* Placeholder de imagen - Tamaño optimizado para tablet grande */
    .inicio-tech-card-image .image-placeholder {
        width: 100%;
        height: 200px;
        background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #6B7280;
        border: 2px dashed #D1D5DB;
    }
    
    /* Icono del placeholder - Tamaño mejorado */
    .inicio-tech-card-image .image-placeholder i {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        color: #9CA3AF;
    }
    
    /* Texto del placeholder - Tamaño mejorado */
    .inicio-tech-card-image .image-placeholder span {
        font-size: 0.9rem;
        font-weight: 500;
        text-align: center;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (IMÁGENES) - PLACEHOLDERS DE EQUIPOS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (CONTENIDO) - HEADERS Y TÍTULOS DE TARJETAS
       ========================================== */
    
    /* Header de tarjeta - Centrado y bien espaciado */
    .inicio-tech-card-header {
        text-align: center;
        margin-bottom: 1.2rem;
        padding: 1rem 1.5rem 0;
    }
    
    /* Título de tarjeta - Tamaño optimizado para tablet grande */
    .inicio-tech-card-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: #1F2937;
        margin: 0 0 0.5rem 0;
        line-height: 1.3;
    }
    
    /* Marcas de equipos - Texto mejorado */
    .inicio-tech-card-brands {
        color: #E3B23C;
        font-weight: 600;
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (CONTENIDO) - HEADERS Y TÍTULOS DE TARJETAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (CUERPO) - DESCRIPCIONES Y VENTAJAS
       ========================================== */
    
    /* Cuerpo de tarjeta - Flexbox optimizado */
    .inicio-tech-card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 0 1.5rem 1.5rem;
    }
    
    /* Descripción de tarjeta - Texto mejorado */
    .inicio-tech-card-description {
        color: #374151;
        line-height: 1.5;
        margin-bottom: 1.2rem;
        font-size: 1rem;
        text-align: center;
    }
    
    /* Ventajas del equipo - Diseño mejorado */
    .inicio-tech-card-advantages {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    /* Elementos de ventaja - Tamaño mejorado */
    .inicio-advantage-item {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.6rem;
        background: rgba(30, 58, 138, 0.05);
        border-radius: 6px;
        border: 1px solid rgba(30, 58, 138, 0.12);
        box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.05);
        transition: transform 0.15s ease, background-color 0.15s ease;
    }
    
    /* Efecto hover mejorado para elementos de ventaja */
    .inicio-advantage-item:hover {
        background: rgba(30, 58, 138, 0.08);
        transform: translateX(4px);
    }
    
    /* Icono de ventaja - Tamaño mejorado */
    .inicio-advantage-item i {
        color: #E3B23C;
        font-size: 0.9rem;
        background: rgba(227, 178, 60, 0.15);
        width: 24px;
        height: 24px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    /* Texto de ventaja - Tamaño mejorado */
    .inicio-advantage-item span {
        color: #1F2937;
        font-weight: 600;
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (CUERPO) - DESCRIPCIONES Y VENTAJAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (UTILIDADES) - ELEMENTOS DE APOYO
       ========================================== */
    
    /* Asegurar que los elementos con z-index no bloqueen la selección */
    .section-bg-amarillo .container-full-width {
        position: relative;
        z-index: 10;
    }
    
    /* Texto centrado para tecnología */
    .technology .text-center {
        text-align: center;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (UTILIDADES) - ELEMENTOS DE APOYO
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE 3 (TECNOLOGÍA) - TABLET GRANDE 900px (2x2)
       ========================================== */

/* ==========================================
   MEDIA QUERY 900px - BLOQUE 4: PROYECTOS DESTACADOS
   Optimización específica para tablets grandes
   Basado en la estructura del BLOQUE 3 (Tecnología) para 900px
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE 4 (PROYECTOS) - CONTENEDOR PRINCIPAL
       ========================================== */
    
    /* Sección principal de proyectos - Optimización para tablet grande */
    .projects.section-bg-azul {
        padding: 4rem 0;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Contenedor de ancho completo - Ajustes para tablet grande */
    .projects .container {
        padding: 0 2rem;
        max-width: 100%;
        margin: 0;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (PROYECTOS) - CONTENEDOR PRINCIPAL
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 4 (HEADER) - ENCABEZADO DE PROYECTOS
       ========================================== */
    
    /* Header centrado - Optimización para tablet grande */
    .projects .section-header {
        text-align: center;
        margin-bottom: 3rem;
        padding: 0 1.5rem;
        max-width: 100%;
    }
    
    /* Título principal - Tamaño mejorado para tablet grande */
    .projects .section-title {
        font-size: 2.6rem;
        font-weight: 700;
        color: #FFFFFF;
        margin-bottom: 1.6rem;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    /* Subtítulo - Tamaño mejorado para tablet grande */
    .projects .section-subtitle {
        font-size: 1.3rem;
        color: #E5E7EB;
        line-height: 1.4;
        margin-bottom: 2.4rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
        padding: 0 1.5rem;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (HEADER) - ENCABEZADO DE PROYECTOS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 4 (GRID) - GRID DE TARJETAS DE PROYECTOS
       ========================================== */
    
    /* Grid de proyectos - Dos columnas en tablet grande */
    .inicio-proyectos-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 0 1.5rem;
    }
    
    /* Tarjetas de proyectos - OPTIMIZADAS PARA ELIMINAR ESPACIO MUERTO */
    .inicio-proyectos-card {
        background: #FFFFFF;
        border-radius: 20px; /* ✅ AUMENTADO: De 18px a 20px */
        overflow: hidden;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); /* ✅ MEJORADO: Sombra más pronunciada */
        border: 1px solid rgba(30, 58, 138, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        min-height: 460px; /* ✅ AUMENTADO: De 440px a 460px para 900px */
        height: auto; /* ✅ NUEVO: Altura automática para acomodar contenido */
    }
    
    /* Efecto hover desactivado en móvil */
    .inicio-proyectos-card:hover {
        transform: none;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    }
    
    /* Imagen del proyecto - Altura optimizada para tablet grande */
    .project-image {
        height: 320px; /* ✅ AUMENTADO: De 300px a 320px para 900px */
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    
    /* Imagen real del proyecto */
    .project-image .imagen-real {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }
    
    /* Placeholder de imagen */
    .project-image .image-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
        color: #6B7280;
        font-size: 3rem; /* ✅ AUMENTADO: De 2.8rem a 3rem */
        width: 100%;
        height: 100%;
    }
    
    .project-image .image-placeholder span {
        font-size: 1.2rem; /* ✅ AUMENTADO: De 1.1rem a 1.2rem */
        margin-top: 0.5rem;
        text-align: center;
        padding: 0 1rem;
    }
    
    /* Overlay del proyecto */
    .project-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(30,58,138,0.2) 100%);
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 1.8rem; /* ✅ AUMENTADO: De 1.6rem a 1.8rem */
    }
    
    /* Categoría del proyecto */
    .project-category {
        background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%);
        color: #1a202c;
        padding: 0.8rem 1.6rem; /* ✅ AUMENTADO: De 0.7rem 1.4rem a 0.8rem 1.6rem */
        border-radius: 15px;
        font-size: 1rem; /* ✅ AUMENTADO: De 0.95rem a 1rem */
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
    }
    
    .project-content {
        padding: 2rem 1.8rem 1.8rem 1.8rem;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    
    /* Título del proyecto - Optimizado para 900px */
    .project-title {
        font-size: 1.7rem; /* ✅ AUMENTADO: De 1.6rem a 1.7rem */
        font-weight: 700;
        color: #1a202c;
        margin-bottom: 1.4rem; /* ✅ AUMENTADO: De 1.2rem a 1.4rem */
        line-height: 1.3;
    }
    
    .project-description {
        font-size: 1.1rem;
        color: #4B5563;
        line-height: 1.5;
        flex: 1;
        margin-bottom: 0;
    }
    
    .project-details {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin-top: 1.8rem;
    }
    
    /* Item de detalle - AMARILLO COMO EN DESKTOP */
    .detail-item {
        background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%); /* ✅ CORREGIDO: Fondo amarillo como desktop */
        color: #1a202c; /* ✅ CORREGIDO: Texto oscuro para contraste */
        padding: 0.8rem 1.4rem; /* ✅ AUMENTADO: De 0.7rem 1.2rem a 0.8rem 1.4rem */
        border-radius: 12px;
        font-size: 0.95rem; /* ✅ AUMENTADO: De 0.9rem a 0.95rem */
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.8rem; /* ✅ AUMENTADO: De 0.7rem a 0.8rem */
        border: 2px solid rgba(255, 255, 255, 0.3); /* ✅ NUEVO: Borde sutil */
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3); /* ✅ NUEVO: Sombra dorada */
        transition: all 0.3s ease;
        flex: 1; /* ✅ NUEVO: Hacer que los items se distribuyan equitativamente */
        min-width: 0; /* ✅ NUEVO: Permitir que se encojan si es necesario */
    }
    
    .detail-item i {
        color: #1a202c; /* ✅ CORREGIDO: Icono oscuro para contraste */
        font-size: 0.9rem; /* ✅ AUMENTADO: De 0.85rem a 0.9rem */
        margin-right: 0.7rem; /* ✅ AUMENTADO: De 0.6rem a 0.7rem */
    }
    
    /* ✅ NUEVO: Efecto hover para los detail-item (desactivado en móvil) */
    .inicio-proyectos-card:hover .detail-item {
        background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%); /* ✅ NUEVO: Color naranja en hover */
        color: #ffffff; /* ✅ NUEVO: Texto blanco en hover */
        transform: translateY(-2px) scale(1.02); /* ✅ NUEVO: Elevación y escala */
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4); /* ✅ NUEVO: Sombra naranja */
        border-color: rgba(255, 255, 255, 0.5); /* ✅ NUEVO: Borde más visible */
    }
    
    .inicio-proyectos-card:hover .detail-item i {
        color: #ffffff; /* ✅ NUEVO: Icono blanco en hover */
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (GRID) - GRID DE TARJETAS DE PROYECTOS
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE 4 (PROYECTOS) - TABLET GRANDE 900px
       ========================================== */
           
/* ==========================================
   MEDIA QUERY 900px - BLOQUE CLIENTES
   Optimización específica para tablets medianas
   Basado en la estructura del BLOQUE CLIENTES para 768px
   ========================================== */

   
   /* ==========================================
      INICIO DE BLOQUE CLIENTES - CONTENEDOR PRINCIPAL
      ========================================== */
   
   /* Sección principal de clientes - Optimización para tablet mediana */
   .clientes {
    padding: 4rem 0; /* ✅ AUMENTADO: De 3.5rem a 4rem para más espacio */
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Contenedor de ancho completo - Ajustes para tablet mediana */
.clientes .container {
    padding: 0 2.5rem; /* ✅ AUMENTADO: De 2rem a 2.5rem para más espacio */
    max-width: 100%;
    margin: 0;
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES - CONTENEDOR PRINCIPAL
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (HEADER) - ENCABEZADO DE CLIENTES
   ========================================== */

/* Header centrado - Optimización para tablet mediana */
.clientes .section-header {
    text-align: center;
    margin-bottom: 3.5rem; /* ✅ AUMENTADO: De 3rem a 3.5rem */
    padding: 0 1.5rem; /* ✅ AUMENTADO: De 1.2rem a 1.5rem */
    max-width: 100%;
}

/* Título principal - Tamaño aumentado para tablet mediana */
/* ✅ ELIMINADO: .clientes .section-title 900px ahora usa el estilo general */

/* Subtítulo - Tamaño aumentado para tablet mediana */
.clientes .section-subtitle {
    font-size: 1.3rem; /* ✅ AUMENTADO: De 1.2rem a 1.3rem */
    color: #000000; /* ✅ MANTENIDO: Color negro para mejor legibilidad */
    line-height: 1.4;
    margin-bottom: 2.4rem; /* ✅ AUMENTADO: De 2.2rem a 2.4rem */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    padding: 0 1.5rem; /* ✅ AUMENTADO: De 1.2rem a 1.5rem */
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (HEADER) - ENCABEZADO DE CLIENTES
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CARRUSEL) - CARRUSEL DE CLIENTES
   ========================================== */

/* Contenedor del carrusel - COMPLETAMENTE TRANSPARENTE SIN ELEMENTOS BLANCOS */
.inicio-clientes-carousel-container {
    padding: 0; /* ✅ MANTENIDO: Sin padding para eliminar espacios blancos */
    margin: 0 auto;
    max-width: 100%;
    background: transparent; /* ✅ TRANSPARENTE: Fondo completamente transparente */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados que crean espacios blancos */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
    border: none; /* ✅ MANTENIDO: Sin bordes */
}

/* Carrusel principal - MANTIENE COMPORTAMIENTO HORIZONTAL PARA 900px */
.inicio-clientes-carousel {
    display: flex;
    flex-direction: row; /* ✅ MANTENIDO: Mantiene flujo horizontal */
    gap: 0; /* ✅ MANTENIDO: Sin gap entre slides */
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* ✅ MANTENIDO: Oculta slides no activos */
}

/* Slides individuales - DOS TARJETAS POR SLIDE EN TABLET MEDIANA */
.inicio-clientes-slide {
    display: flex;
    flex-direction: row; /* ✅ MANTENIDO: Mantiene flujo horizontal */
    gap: 1.8rem; /* ✅ AUMENTADO: De 1.5rem a 1.8rem para más espacio entre tarjetas */
    width: 100%;
    min-width: 100%; /* ✅ MANTENIDO: Ancho mínimo para ocupar todo el carrusel */
    opacity: 0; /* ✅ MANTENIDO: Invisible por defecto */
    visibility: hidden; /* ✅ MANTENIDO: Oculto por defecto */
    position: absolute; /* ✅ MANTENIDO: Posición absoluta para superposición */
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Slide activo - VISIBLE */
.inicio-clientes-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative; /* ✅ MANTENIDO: Posición relativa cuando está activo */
}

/* Tarjetas de cliente - SEMI-TRANSPARENTES PARA MOSTRAR LOGOS DE FONDO */
.inicio-cliente-card-featured {
    background: rgba(255, 255, 255, 0.85); /* ✅ MANTENIDO: Fondo semi-transparente */
    border-radius: 24px; /* ✅ AUMENTADO: De 22px a 24px para bordes más redondeados */
    padding: 1.8rem; /* ✅ AUMENTADO: De 1.6rem a 1.8rem para más espacio interno */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ✅ MANTENIDO: Sombra más suave */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.3); /* ✅ MANTENIDO: Borde más sutil */
    position: relative;
    overflow: hidden;
    min-height: 360px; /* ✅ AUMENTADO: De 340px a 360px para más altura */
    height: auto;
    width: calc(50% - 0.9rem); /* ✅ AJUSTADO: De 0.75rem a 0.9rem para mejor separación */
    max-width: calc(50% - 0.9rem);
    flex-shrink: 0; /* ✅ MANTENIDO: No se encoge */
    flex-grow: 0; /* ✅ MANTENIDO: No crece */
}

/* Efecto hover desactivado en móvil */
.inicio-cliente-card-featured:hover {
    transform: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Contenedor del logo - SEMI-TRANSPARENTE PARA MOSTRAR LOGOS DE FONDO */
.cliente-logo-container {
    position: relative;
    width: 100%;
    height: 140px; /* ✅ AUMENTADO: De 130px a 140px para más espacio */
    min-height: 140px;
    max-height: 140px;
    margin-bottom: 1.6rem; /* ✅ AUMENTADO: De 1.4rem a 1.6rem */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 249, 255, 0.7); /* ✅ MANTENIDO: Fondo semi-transparente */
    border-radius: 18px; /* ✅ AUMENTADO: De 16px a 18px para bordes más redondeados */
    overflow: hidden;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 1px solid rgba(14, 165, 233, 0.3); /* ✅ MANTENIDO: Borde más sutil */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); /* ✅ MANTENIDO: Sombra más sutil */
    flex-shrink: 0;
}

/* Imagen del cliente - Tamaño optimizado para tablet mediana */
.cliente-imagen-featured {
    width: 100%;
    height: 100%;
    min-width: 120px; /* ✅ AUMENTADO: De 110px a 120px para logos más grandes */
    min-height: 120px; /* ✅ AUMENTADO: De 110px a 120px para logos más grandes */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease-out;
    position: relative;
    z-index: 2;
}

/* Información del cliente - Optimizada para tablet mediana */
.cliente-info-featured {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 1.2rem; /* ✅ AUMENTADO: De 1rem a 1.2rem */
    border-radius: 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Nombre del cliente - Tamaño optimizado para tablet mediana */
.cliente-nombre-featured {
    font-size: 1.3rem; /* ✅ AUMENTADO: De 1.2rem a 1.3rem */
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.9rem; /* ✅ AUMENTADO: De 0.8rem a 0.9rem */
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-align: center; /* ✅ MANTENIDO: Centrado para mejor apariencia */
}

/* Categoría del cliente - Optimizada para tablet mediana */
.cliente-categoria-featured {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 0.7rem 1.4rem; /* ✅ AUMENTADO: De 0.6rem 1.2rem a 0.7rem 1.4rem */
    border-radius: 24px; /* ✅ AUMENTADO: De 22px a 24px para bordes más redondeados */
    font-size: 0.85rem; /* ✅ AUMENTADO: De 0.8rem a 0.85rem */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px; /* ✅ AUMENTADO: De 0.6px a 0.7px */
    margin-bottom: 0.7rem; /* ✅ AUMENTADO: De 0.6rem a 0.7rem */
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3); /* ✅ MANTENIDO: Sombra más sutil */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    align-self: center;
}

/* Colores específicos por tipo de industria - Optimizados para tablet mediana */
.cliente-categoria-featured[data-industry="industrial"] {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.3);
}

.cliente-categoria-featured[data-industry="comercial"] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3);
}

.cliente-categoria-featured[data-industry="vivienda"] {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 3px 8px rgba(124, 58, 237, 0.3);
}

.cliente-categoria-featured[data-industry="construccion"] {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    box-shadow: 0 3px 8px rgba(234, 88, 12, 0.3);
}

.cliente-categoria-featured[data-industry="gobierno"] {
    background: linear-gradient(135deg, #1f2937, #111827);
    box-shadow: 0 3px 8px rgba(31, 41, 55, 0.3);
}

.cliente-categoria-featured[data-industry="financiero"] {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 3px 8px rgba(8, 145, 178, 0.3);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CARRUSEL) - CARRUSEL DE CLIENTES
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CONTROLES) - CONTROLES DE NAVEGACIÓN
   ========================================== */

/* Controles del carrusel - FLOTANTES SIN LÍNEAS HORIZONTALES (IGUAL A 768px) */
.inicio-clientes-controls {
    position: absolute;
    top: 50%;
    left: -0.5rem; /* ✅ IGUAL A 768px: Más hacia la izquierda para flotar */
    right: -0.5rem; /* ✅ IGUAL A 768px: Más hacia la derecha para flotar */
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    padding: 0; /* ✅ IGUAL A 768px: Sin padding para eliminar líneas horizontales */
    z-index: 10;
    pointer-events: none; /* ✅ MANTENIDO: Para que no interfiera con el carrusel */
}

/* ✅ ELIMINAR PSEUDO-ELEMENTOS QUE CREAN LÍNEAS VERTICALES (IGUAL A 768px) */
.inicio-clientes-controls::before,
.inicio-clientes-controls::after {
    display: none; /* ✅ IGUAL A 768px: Sin gradientes blancos verticales */
}

/* Botones de navegación - Tamaño optimizado para tablet mediana */
.inicio-clientes-btn {
    width: 48px; /* ✅ AUMENTADO: De 44px a 48px para mejor visibilidad */
    height: 48px; /* ✅ AUMENTADO: De 44px a 48px para mejor visibilidad */
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem; /* ✅ AUMENTADO: De 1.1rem a 1.2rem */
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); /* ✅ MANTENIDO: Sombra más visible */
    position: relative;
    overflow: hidden;
    pointer-events: auto; /* ✅ MANTENIDO: Para que sean clickeables */
}

.inicio-clientes-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.inicio-clientes-btn:active {
    transform: scale(0.95);
}

.inicio-clientes-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(1);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CONTROLES) - CONTROLES DE NAVEGACIÓN
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (INDICADORES) - INDICADORES DE PAGINACIÓN
   ========================================== */

/* Indicadores del carrusel - COMPLETAMENTE TRANSPARENTES SIN ELEMENTOS BLANCOS */
.inicio-clientes-indicators {
    display: flex;
    justify-content: center;
    gap: 1.4rem; /* ✅ AUMENTADO: De 1.2rem a 1.4rem para más separación */
    margin-top: 2.4rem; /* ✅ AUMENTADO: De 2.2rem a 2.4rem */
    padding: 1.6rem 2rem; /* ✅ AUMENTADO: De 1.4rem 1.8rem a 1.6rem 2rem */
    background: transparent; /* ✅ MANTENIDO: Sin fondo blanco */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados */
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    border: none; /* ✅ MANTENIDO: Sin bordes */
    position: relative;
}

/* Indicador individual - Tamaño optimizado para tablet mediana */
.inicio-clientes-indicator {
    width: 18px; /* ✅ AUMENTADO: De 16px a 18px para mejor visibilidad */
    height: 18px; /* ✅ AUMENTADO: De 16px a 18px para mejor visibilidad */
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    cursor: pointer;
    transition: all 0.4s ease;
    border: 2px solid rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.inicio-clientes-indicator:hover {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    transform: scale(1.2);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.inicio-clientes-indicator.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    transform: scale(1.3);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.3);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (INDICADORES) - INDICADORES DE PAGINACIÓN
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CTA) - ESTADÍSTICAS DE CLIENTES
   ========================================== */

/* CTA de clientes - Optimizado para tablet mediana */
.clientes-cta {
    margin-top: 4rem; /* ✅ AUMENTADO: De 3.5rem a 4rem */
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Estadísticas de clientes - Optimizadas para tablet mediana */
.clientes-stats {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* ✅ AUMENTADO: De 1.8rem a 2rem para más separación */
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

/* Item de estadística - COMPLETAMENTE TRANSPARENTE SIN ELEMENTOS BLANCOS */
.clientes .stat-item {
    display: flex;
    align-items: center;
    gap: 1.6rem; /* ✅ AUMENTADO: De 1.4rem a 1.6rem para más separación */
    background: transparent; /* ✅ MANTENIDO: Sin fondo blanco */
    padding: 1.6rem 2rem; /* ✅ AUMENTADO: De 1.4rem 1.8rem a 1.6rem 2rem */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    border: none; /* ✅ MANTENIDO: Sin bordes */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 360px; /* ✅ AUMENTADO: De 340px a 360px para más ancho */
    max-width: 100%;
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
}

/* Efecto hover desactivado en móvil para evitar sombras blancas */
.clientes .stat-item:hover {
    transform: none;
    box-shadow: none;
}

/* Icono de estadística - Optimizado para tablet mediana */
.clientes .stat-item i {
    font-size: 2rem; /* ✅ AUMENTADO: De 1.8rem a 2rem */
    color: #007bff;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Texto de estadística - Optimizado para tablet mediana */
.clientes .stat-item strong {
    color: #007bff;
    font-weight: 700;
    font-size: 1.5rem; /* ✅ AUMENTADO: De 1.4rem a 1.5rem */
    margin-right: 0.7rem; /* ✅ AUMENTADO: De 0.6rem a 0.7rem */
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CTA) - ESTADÍSTICAS DE CLIENTES
   ========================================== */

/* ==========================================
   FINAL DE BLOQUE CLIENTES - TABLET MEDIANA 900px
   ========================================== */
       
/* ==========================================
   BREAKPOINT 900px - TABLET MEDIANA
   BLOQUE: SOBRE LAMA TOPOGRAFÍA
   OPTIMIZADO PARA PANTALLAS DE 900px
   BASADO EN EL DISEÑO EXITOSO DE 768px
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA - SECCIÓN PRINCIPAL
       ========================================== */
    
    /* Contenedor principal - OPTIMIZADO PARA TABLET MEDIANA */
    .about.section-bg-amarillo {
        padding: 3.5rem 0;
        margin: 0;
        overflow-x: hidden;
        scroll-behavior: smooth;
        width: 100vw;
        max-width: 100vw;
        font-size: 16px;
        line-height: 1.6;
    }
    
    /* Contenedor de ancho completo - SIN RESTRICCIONES */
    .container-full-width {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0 2.5rem;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (HEADER) - TÍTULO Y SUBTÍTULO
       ========================================== */
    
    .inicio-about-header {
        margin-bottom: 3.5rem;
        text-align: center;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .about-title-container {
        max-width: 100%;
        width: 100%;
        padding: 3rem;
        margin: 0 auto 3.5rem auto;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        border: 2px solid rgba(30, 64, 175, 0.3);
        border-radius: 24px;
        box-shadow: 0 18px 40px rgba(30, 64, 175, 0.22);
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    
    .about-title-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .inicio-about-title {
        font-size: 2.6rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 1.8rem;
        line-height: 1.2;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .inicio-about-subtitle {
        font-size: 1.3rem;
        color: var(--text-secondary);
        line-height: 1.8;
        margin: 0;
        font-weight: 400;
        max-width: 100%;
    }

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (HEADER) - TÍTULO Y SUBTÍTULO
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (FILA SUPERIOR) - HISTORIA + VALORES
       ========================================== */
    
    .inicio-about-top-row {
        display: flex;
        flex-direction: column;
        gap: 3.5rem;
        margin-bottom: 4rem;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (HISTORIA) - NUESTRA TRAYECTORIA
       ========================================== */
    
    .about-historia-section {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .inicio-about-story-compact {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* Cuadro principal de contenido - MÁXIMO ANCHO */
    .story-content-box {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        border-radius: 24px;
        padding: 3rem;
        box-shadow: 0 18px 40px rgba(30, 64, 175, 0.22);
        border: 2px solid rgba(30, 64, 175, 0.3);
        display: flex;
        flex-direction: column;
        gap: 2rem;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    
    /* Título del bloque */
    .story-title-compact {
        font-size: 2.1rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0 0 1.8rem 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
        text-align: center;
    }
    
    /* Layout vertical para tablet mediana */
    .story-content-horizontal {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin-top: 0;
    }
    
    /* Sección de texto */
    .story-text-section {
        width: 100%;
        order: 1;
    }
    
    .story-text-compact {
        font-size: 1.15rem;
        line-height: 1.9;
        color: var(--text-color);
        margin: 0;
        text-align: left;
    }
    
    .story-text-compact strong {
        color: var(--primary-color);
        font-weight: 600;
    }
    
    /* Sección de imagen */
    .story-image-section {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        order: 2;
    }
    
    .story-image-placeholder {
        border-radius: 20px;

        padding: 3.5rem;
        border: 2px solid rgba(30, 64, 175, 0.3);
        text-align: center;
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 280px;
        margin: 0;
    }
    
    .story-image-placeholder:hover {


        transform: translateY(-5px);

    }
    
    .image-coming-soon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.8rem;
        color: var(--primary-color);
    }
    
    .image-coming-soon i {
        font-size: 4rem;
        color: var(--primary-color);
    }
    
    .image-coming-soon span {
        font-size: 1.2rem;
        font-weight: 500;
        color: var(--primary-color);
        text-align: center;
    }

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (HISTORIA) - NUESTRA TRAYECTORIA
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (VALORES) - LO QUE NOS DIFERENCIA
       ========================================== */
    
    .about-valores-section {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .inicio-about-values-compact {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* Título de valores - MÁXIMO ANCHO */
    .values-title-container {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 20px;
        padding: 2.5rem 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 12px 30px rgba(30, 64, 175, 0.2);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .values-title-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .values-title-compact {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
    }
    
    /* Grid de valores - OPTIMIZADO PARA TABLET MEDIANA */
    .values-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem;
        row-gap: 2rem;
        margin-top: 0;
        flex: 1;
        align-content: start;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Items de valores */
    .value-item-compact {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 18px;
        padding: 1.8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.2rem;
        transition: transform 0.3s ease;
        min-height: 120px;
        justify-content: center;
    }
    
    .value-item-compact:hover {


        transform: translateY(-5px);

    }
    
    /* Iconos de valores */
    .value-icon-small {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.8rem;
        box-shadow: 0 6px 18px rgba(30, 64, 175, 0.5);
    }
    
    .value-icon-small i {
        font-size: 1.3rem;
        color: white;
    }
    
    /* Contenido de valores */
    .value-content-small {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.6rem;
        width: 100%;
    }
    
    .value-content-small h4 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--primary-color);
        margin: 0;
        line-height: 1.2;
        font-family: 'Poppins', sans-serif;
    }
    
    .value-content-small p {
        font-size: 0.9rem;
        color: var(--text-secondary);
        line-height: 1.6;
        margin: 0;
        font-weight: 500;
        text-align: center;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (VALORES) - LO QUE NOS DIFERENCIA
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (FILA SUPERIOR) - HISTORIA + VALORES
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (FILA INFERIOR) - ESTADÍSTICAS + CTA + CERTIFICACIONES
       ========================================== */
    
    .inicio-about-bottom-row {
        display: flex;
        flex-direction: column;
        gap: 3.5rem;
        padding: 0;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (ESTADÍSTICAS) - ESTADÍSTICAS DE EMPRESA
       ========================================== */
    
    .about-stats-section {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .inicio-about-stats-compact-horizontal {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 20px;
        padding: 2.5rem;
        box-shadow: 0 12px 30px rgba(30, 64, 175, 0.2);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-stats-compact-horizontal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .stats-horizontal-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem;
        row-gap: 1.8rem;
        margin-top: 1.8rem;
    }
    
    .stat-horizontal {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 16px;
        padding: 2.5rem 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.8rem;
        min-width: 0;
        width: 100%;
        transition: transform 0.3s ease;
    }
    
    .stat-horizontal:hover {


        transform: translateY(-5px);

    }
    
    .stat-number {
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--primary-color);
        line-height: 1;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .stat-label {
        font-size: 0.75rem;
        color: var(--text-secondary);
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: 0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (ESTADÍSTICAS) - ESTADÍSTICAS DE EMPRESA
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (CTA) - CALL TO ACTION
       ========================================== */
    
    .about-cta-section {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .inicio-about-cta-compact {
        background: linear-gradient(135deg, rgba(30, 64, 175, 0.95) 0%, rgba(59, 130, 246, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.3);
        border-radius: 20px;
        padding: 2.5rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 18px 40px rgba(30, 64, 175, 0.4);
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-cta-compact::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .inicio-about-cta-compact h3 {
        font-size: 1.5rem;
        font-weight: 700;
        color: white;
        margin: 0 0 1.2rem 0;
        line-height: 1.2;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .inicio-about-cta-compact p {
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.7;
        margin: 0 0 2rem 0;
    }
    
    .cta-buttons-compact {
        display: flex;
        flex-direction: column;
        gap: 1.8rem;
        align-items: center;
    }
    
    .cta-buttons-compact .btn {
        padding: 1.2rem 2.5rem;
        font-size: 1.2rem;
        border-radius: 16px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        transition: all 0.3s ease;
        font-weight: 600;
        min-width: 280px;
        justify-content: center;
    }
    
    .cta-buttons-compact .btn-primary {
        background: linear-gradient(135deg, #E3B23C 0%, #FFD700 100%);
        color: var(--primary-color);
        border: 1px solid rgba(227, 178, 60, 0.3);
    }
    
    .cta-buttons-compact .btn-primary:hover {
        background: linear-gradient(135deg, #D4A017 0%, #E6C200 100%);
        transform: translateY(-5px);

    }
    
    .cta-buttons-compact .btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .cta-buttons-compact .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(255, 255, 255, 0.4);
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (CTA) - CALL TO ACTION
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (CERTIFICACIONES) - CREDENCIALES Y CERTIFICACIONES
       ========================================== */
    
    .about-certificaciones-section {
        width: 100%;
        max-width: 100%;
        order: 3;
    }
    
    .inicio-about-credentials-horizontal {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 20px;
        padding: 2.5rem;
        box-shadow: 0 12px 30px rgba(30, 64, 175, 0.2);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-credentials-horizontal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .credentials-title-horizontal {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0 0 1.8rem 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
    }
    
    .credentials-horizontal {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
    
    .credential-horizontal {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 16px;
        padding: 1.5rem 2rem;
        display: flex;
        align-items: center;
        gap: 1.2rem;
        font-size: 1rem;
        font-weight: 500;
        color: var(--primary-color);
        transition: all 0.3s ease;
        width: 100%;
        justify-content: center;
    }
    
    .credential-horizontal:hover {


        transform: translateY(-5px);

    }
    
    .credential-horizontal i {
        font-size: 1.3rem;
        color: var(--primary-color);
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (CERTIFICACIONES) - CREDENCIALES Y CERTIFICACIONES
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (FILA INFERIOR) - ESTADÍSTICAS + CTA + CERTIFICACIONES
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (UTILIDADES) - OPTIMIZACIONES Y OVERRIDES
       ========================================== */
    
    /* Asegurar que todo el texto sea seleccionable */
    .about.section-bg-amarillo * {
        user-select: text;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        box-sizing: border-box;
    }
    
    /* Asegurar que no haya scroll horizontal */
    body {
        overflow-x: hidden;
    }
    
    /* Asegurar que los botones sean táctiles */
    .btn, .value-item-compact, .stat-horizontal, .credential-horizontal {
        min-height: 54px;
        touch-action: manipulation;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (UTILIDADES) - OPTIMIZACIONES Y OVERRIDES
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA - TABLET MEDIANA 900px
       ========================================== */

    /* ==========================================
       OVERRIDES ESPECÍFICOS PARA 900px - SOBRESCRITURA DE ESTILOS BASE
       ========================================== */
    
    /* Sobrescribir cualquier max-width del CSS base */
    .about.section-bg-amarillo .container-full-width,
    .about.section-bg-amarillo .inicio-about-header,
    .about.section-bg-amarillo .inicio-about-top-row,
    .about.section-bg-amarillo .inicio-about-bottom-row,
    .about.section-bg-amarillo .about-historia-section,
    .about.section-bg-amarillo .about-valores-section,
    .about.section-bg-amarillo .about-stats-section,
    .about.section-bg-amarillo .about-cta-section,
    .about.section-bg-amarillo .about-certificaciones-section,
    .about.section-bg-amarillo .inicio-about-story-compact,
    .about.section-bg-amarillo .inicio-about-values-compact,
    .about.section-bg-amarillo .story-content-box,
    .about.section-bg-amarillo .values-title-container,
    .about.section-bg-amarillo .inicio-about-stats-compact-horizontal,
    .about.section-bg-amarillo .inicio-about-cta-compact,
    .about.section-bg-amarillo .inicio-about-credentials-horizontal,
    .about.section-bg-amarillo .about-title-container {
        max-width: 100%;
        width: 100%;
    }
    
    /* Forzar layout vertical en todos los contenedores */
    .about.section-bg-amarillo .inicio-about-top-row {
        display: flex;
        flex-direction: column;
    }
    
    .about.section-bg-amarillo .inicio-about-bottom-row {
        display: flex;
        flex-direction: column;
    }

    /* ==========================================
       FINAL OVERRIDES ESPECÍFICOS PARA 900px - SOBRESCRITURA DE ESTILOS BASE
   ========================================== */
       

   
} /* 🎯 FIN BLOQUE HERO - 900px */

/* ==========================================
   MEDIA QUERY 1024px - BLOQUE HERO
   Optimización específica para desktop normal (laptops)
   Basado en media_900px_hero.css pero adaptado para 1024px
   ========================================== */

@media (max-width: 1024px) and (min-width: 901px) {
/* ==========================================
   BREAKPOINT 1024px - INICIO DE BLOQUE 2 (SERVICIOS)
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE 2 (SERVICIOS) - CONTENEDOR PRINCIPAL
       ========================================== */
       .servicios-slider-container,
       .inicio-servicios-slider {
           margin-top: 1rem;
           width: 100vw;
           max-width: 100vw;
           padding: 0;
           overflow: hidden;
           margin-left: calc(-50vw + 50%);
           margin-right: calc(-50vw + 50%);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (SERVICIOS) - CONTENEDOR PRINCIPAL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CARRUSEL) - SLIDER PRINCIPAL
          ========================================== */
       .servicios-slider {
           display: flex;
           align-items: center;
           padding: 2rem 0; /* ✅ PADDING para 1024px */
           min-height: 420px; /* ✅ ALTURA OPTIMIZADA para 1024px */
           overflow: hidden;
           position: relative;
           width: 100vw;
           max-width: 100vw;
           
           /* Variables CSS para controlar difuminado */
           --difuminado-izquierdo: hidden;
           --difuminado-derecho: visible;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CARRUSEL) - SLIDER PRINCIPAL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (DIFUMINADO) - GRADIENTES LATERALES
          ========================================== */
       /* DIFUMINADO LATERAL - MÁS ANCHO PARA 1024px */
       .servicios-slider::before,
       .servicios-slider::after {
           content: '';
           position: absolute;
           top: 0;
           bottom: 0;
           width: 80px; /* Más ancho para 1024px */
           z-index: 10;
           pointer-events: none;
           transition: opacity 0.5s ease;
       }
   
       .servicios-slider::before {
           left: 0;
           background: linear-gradient(to right, rgba(30, 58, 138, 0.9) 0%, rgba(30, 58, 138, 0.6) 40%, rgba(30, 58, 138, 0.3) 70%, transparent 100%);
           opacity: var(--difuminado-izquierdo);
       }
   
       .servicios-slider::after {
           right: 0;
           background: linear-gradient(to left, rgba(30, 58, 138, 0.9) 0%, rgba(30, 58, 138, 0.6) 40%, rgba(30, 58, 138, 0.3) 70%, transparent 100%);
           opacity: var(--difuminado-derecho);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (DIFUMINADO) - GRADIENTES LATERALES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CONTENEDOR INTERNO) - WRAPPER DE SLIDES
          ========================================== */
       .servicios-slider-inner {
           display: flex;
           align-items: center;
           transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           width: max-content;
           padding: 0 2rem; /* ✅ PADDING para centrado en 1024px */
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CONTENEDOR INTERNO) - WRAPPER DE SLIDES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (TARJETAS) - CARDS DE SERVICIOS
          ========================================== */
       /* TARJETAS DE SERVICIOS - HORIZONTALES PARA 1024px - MÁS ANCHAS Y MENOS ALTAS */
       .servicio-item {
           width: calc(50vw - 2rem); /* 2 cards visibles en 1024px */
           min-width: calc(50vw - 2rem);
           max-width: 680px;
           height: 420px; /* ✅ ALTURA REDUCIDA para 1024px */
           min-height: 420px;
           max-height: 420px;
           background: white;
           border-radius: 16px;
           box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
           border: 2px solid rgba(30, 58, 138, 0.15);
           flex-shrink: 0;
           transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           display: flex; /* ✅ HORIZONTAL: texto izquierda, imagen derecha */
           margin: 0 0.4rem; /* ✅ MARGEN para 1024px */
           position: relative;
           overflow: hidden;
       }
   
       /* COLORES ALTERNADOS PARA CADA TARJETA */
       .servicio-item:nth-child(odd) {
           background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
           border-color: rgba(30, 58, 138, 0.2);
       }
   
       .servicio-item:nth-child(even) {
           background: linear-gradient(135deg, #F0F4FF 0%, #E6F0FF 100%);
           border-color: rgba(30, 58, 138, 0.25);
       }
   
       /* EFECTO HOVER EN TARJETAS */
       .servicio-item:hover {
           transform: translateY(-8px);
           box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
           border-color: rgba(30, 58, 138, 0.3);
       }
   
       /* EFECTO DE BORDE DORADO AL HOVER */
       .servicio-item::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           height: 4px;
           background: linear-gradient(90deg, #E3B23C, #FFD700, #E3B23C);
           transform: scaleX(0);
           transition: transform 0.4s ease;
           z-index: 5;
       }
   
       .servicio-item:hover::before {
           transform: scaleX(1);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (TARJETAS) - CARDS DE SERVICIOS
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CONTENIDO) - TEXTO E IMÁGENES
          ========================================== */
       /* Contenido de las tarjetas - DISTRIBUCIÓN HORIZONTAL PARA 1024px */
       .servicio-contenido {
           display: flex;
           flex-direction: row; /* ✅ HORIZONTAL: texto izquierda, imagen derecha */
           height: 420px; /* ✅ ALTURA para 1024px */
           min-height: 420px;
           max-height: 420px;
           position: relative;
           width: 100%;
       }
   
       /* Texto izquierda - ANCHO OPTIMIZADO PARA 1024px */
       .servicio-texto {
           flex: 1; /* ✅ FLEXIBLE para ocupar espacio disponible */
           min-height: 420px; /* ✅ ALTURA COMPLETA para 1024px */
           width: 50%; /* ✅ MITAD DEL ANCHO */
           display: flex;
           flex-direction: column;
           justify-content: center; /* ✅ CENTRADO VERTICAL */
           padding: 2rem; /* ✅ PADDING para 1024px */
           position: relative;
           box-sizing: border-box;
       }
   
       .servicio-titulo {
           font-size: 1.9rem; /* ✅ TAMAÑO para 1024px */
           font-weight: 700;
           color: #1E3A8A;
           margin-bottom: 1rem;
           line-height: 1.3;
           text-align: left;
           transition: all 0.4s ease;
       }
   
       .servicio-item:hover .servicio-titulo {
           color: #E3B23C;
           transform: translateY(-2px);
       }
   
       .servicio-descripcion {
           color: #2D3748;
           line-height: 1.6;
           margin-bottom: 1.5rem;
           font-weight: 500;
           font-size: 1rem;
           text-align: left;
           flex-grow: 1;
           display: flex;
           align-items: flex-start;
       }
   
       .servicio-item:hover .servicio-descripcion {
           color: #1A202C;
       }
   
       /* Botón Saber más información - VISIBLE EN 1024px */
       .servicio-enlace {
           display: inline-flex; /* ✅ VISIBLE en 1024px */
           align-items: center;
           gap: 0.5rem;
           padding: 0.8rem 1.5rem;
           background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
           color: white;
           text-decoration: none;
           border-radius: 8px;
           font-weight: 600;
           font-size: 0.9rem;
           transition: all 0.3s ease;
           align-self: flex-start;
       }
   
       .servicio-enlace:hover {
           background: linear-gradient(135deg, #E3B23C 0%, #FFD700 100%);
           transform: translateY(-2px);
           box-shadow: 0 4px 15px rgba(227, 178, 60, 0.3);
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CONTENIDO) - TEXTO E IMÁGENES
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (IMÁGENES) - PLACEHOLDERS Y FALLBACKS
          ========================================== */
       /* Imagen derecha - ANCHO OPTIMIZADO PARA 1024px */
       .servicio-imagen {
           flex: none;
           height: 420px; /* ✅ ALTURA COMPLETA para 1024px */
           min-height: 420px;
           max-height: 420px;
           width: 50%; /* ✅ MITAD DEL ANCHO */
           display: flex;
           align-items: center;
           justify-content: center;
           border-left: 1px solid rgba(30, 58, 138, 0.1);
           position: relative;
           background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
           box-shadow: inset 0 0 20px rgba(227, 178, 60, 0.15);
           transition: all 0.5s ease;
           box-sizing: border-box;
       }
   
       /* COLORES ALTERNADOS PARA LAS IMÁGENES */
       .servicio-item:nth-child(odd) .servicio-imagen {
           background: linear-gradient(135deg, #FFF8E1 0%, #FFE082 100%);
           box-shadow: inset 0 0 20px rgba(227, 178, 60, 0.15);
       }
   
       .servicio-item:nth-child(even) .servicio-imagen {
           background: linear-gradient(135deg, #E6F0FF 0%, #B3D9FF 100%);
           box-shadow: inset 0 0 20px rgba(30, 58, 138, 0.15);
       }
   
       .servicio-item:hover .servicio-imagen {
           background: linear-gradient(135deg, #FFE082 0%, #FFD700 100%);
           box-shadow: inset 0 0 25px rgba(227, 178, 60, 0.25);
           transform: scale(1.02);
       }
   
       /* Placeholder de imagen - VISIBLE COMO EN PC */
       .imagen-placeholder {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           text-align: center;
           color: #1E3A8A;
           font-size: 1rem;
           font-weight: 500;
           width: 100%;
           height: 100%;
           position: relative;
           padding: 2rem;
       }
   
       .imagen-placeholder i {
           font-size: 3.2rem;
           margin-bottom: 0.5rem;
           opacity: 0.7;
           transition: all 0.3s ease;
       }
   
       .imagen-placeholder span {
           font-size: 0.9rem;
           opacity: 0.8;
           transition: all 0.3s ease;
           margin-bottom: 0.5rem;
       }
   
       .servicio-item:hover .imagen-placeholder i {
           transform: scale(1.1);
           opacity: 1;
       }
   
       .servicio-item:hover .imagen-placeholder span {
           opacity: 1;
       }
   
       /* TEXTO INFORMATIVO - OCULTO EN 1024px (YA HAY BOTÓN) */
       .servicio-item .imagen-placeholder::after,
       .servicio-item .imagen-placeholder.fallback::after {
           display: none; /* ✅ OCULTO en 1024px - ya hay botón */
       }
   
       /* ✅ ASEGURAR QUE LAS IMÁGENES NO TAPEN EL TEXTO INFORMATIVO */
       .servicio-imagen .imagen-real {
           z-index: 1;
       }
   
       /* Ocultar placeholder cuando hay imagen real en 1024px */
       .servicio-imagen:has(.imagen-real) .imagen-placeholder.fallback {
           opacity: 0;
           display: none;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (IMÁGENES) - PLACEHOLDERS Y FALLBACKS
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (NAVEGACIÓN) - FLECHAS DE CONTROL
          ========================================== */
       /* FLECHAS DE NAVEGACIÓN - OPTIMIZADAS PARA 1024px */
       .slider-btn {
           background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
           color: white;
           border: none;
           width: 60px;
           height: 60px;
           border-radius: 50%;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 1.4rem;
           position: relative;
           overflow: hidden;
           z-index: 25;
           transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           box-shadow: 0 4px 15px rgba(30, 58, 138, 0.25);
       }
   
       .slider-btn:hover {
           transform: translateY(-50%) scale(1.05);
           box-shadow: 0 6px 20px rgba(30, 58, 138, 0.35);
       }
   
       .slider-btn.prev {
           position: absolute;
           left: 0.5rem; /* ✅ MÁS ALEJADO para 1024px */
           top: 50%;
           transform: translateY(-50%);
           opacity: 0;
           visibility: hidden;
           transition: all 0.4s ease;
       }
   
       .slider-btn.next {
           position: absolute;
           right: 0.5rem; /* ✅ MÁS ALEJADO para 1024px */
           top: 50%;
           transform: translateY(-50%);
           opacity: 0;
           visibility: visible;
           transition: all 0.4s ease;
       }
   
       /* Mostrar botones cuando están activos */
       .slider-btn.active {
           opacity: 1;
           visibility: visible;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (NAVEGACIÓN) - FLECHAS DE CONTROL
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (INDICADORES) - PUNTOS DE NAVEGACIÓN
          ========================================== */
       /* PUNTOS INDICADORES - OPTIMIZADOS PARA 1024px */
       .slider-puntos {
           display: flex;
           justify-content: center;
           gap: 0.8rem;
           margin-top: 1.5rem;
           flex-wrap: wrap;
       }
   
       .slider-punto {
           width: 10px;
           height: 10px;
           border-radius: 50%;
           background: #CBD5E1;
           cursor: pointer;
           transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           position: relative;
           overflow: hidden;
       }
   
       .slider-punto.activo {
           background: linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
           transform: scale(1.3);
           box-shadow: 0 2px 8px rgba(30, 58, 138, 0.4);
       }
   
       .slider-punto:hover {
           background: #2563EB;
           transform: scale(1.2);
       }
   
       /* EFECTO DE RAYA DORADA EN PUNTOS ACTIVOS */
       .slider-punto::before {
           content: '';
           position: absolute;
           top: 0;
           left: -100%;
           width: 100%;
           height: 100%;
           background: linear-gradient(90deg, transparent, #FFD700, transparent);
           transition: left 0.6s ease;
       }
   
       .slider-punto.activo::before {
           left: 100%;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (INDICADORES) - PUNTOS DE NAVEGACIÓN
          ========================================== */
   
       /* ==========================================
          INICIO DE BLOQUE 2 (CTA) - BOTÓN VER TODOS
          ========================================== */
       /* BOTÓN VER TODOS LOS SERVICIOS - OPTIMIZADO PARA 1024px */
       .servicios-cta {
           text-align: center;
           margin-top: 2rem;
           margin-bottom: 1rem;
       }
   
       .servicios-cta .btn {
           padding: 1rem 2rem;
           font-size: 1rem;
           border-radius: 12px;
           min-width: 250px;
           max-width: 320px;
       }
   
       .servicios-cta .btn i {
           font-size: 1.1rem;
       }
   
       /* RESPONSIVE ADJUSTMENTS PARA 1024px */
       .servicios-cta .btn span {
           font-size: 1rem;
           font-weight: 600;
       }
       /* ==========================================
          FINAL DE BLOQUE 2 (CTA) - BOTÓN VER TODOS (FINAL DE BLOQUE 2 SERVICIOS)
          ========================================== */
/* ==========================================
   BREAKPOINT 1024px - DESKTOP PEQUEÑO - INICIO DE BLOQUE 3 (TECNOLOGÍA)
   ========================================== */


    /* ==========================================
       INICIO DE BLOQUE 3 (TECNOLOGÍA) - CONTENEDOR PRINCIPAL
       ========================================== */
    
    /* Sección principal de tecnología - Optimización para desktop pequeño */
    .technology.section-bg-amarillo {
        padding: 4rem 0;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Contenedor de ancho completo - Ajustes para desktop pequeño */
    .technology .container-full-width {
        padding: 0 2rem;
        max-width: 100%;
        margin: 0;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (TECNOLOGÍA) - CONTENEDOR PRINCIPAL
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (HEADER) - ENCABEZADO DE TECNOLOGÍA
       ========================================== */
    
    /* Header centrado - Optimización para desktop pequeño */
    .inicio-tech-header {
        text-align: center;
        margin-bottom: 3rem;
        padding: 0 2rem;
        max-width: 100%;
    }
    
    /* Título principal - Tamaño completo para desktop pequeño */
    .inicio-tech-title {
        font-size: 2.5rem;
        font-weight: 700;
        color: #1F2937;
        margin-bottom: 1.5rem;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9);
    }
    
    /* Subtítulo - Tamaño optimizado para desktop pequeño */
    .inicio-tech-header .inicio-tech-subtitle {
        font-size: 1.3rem;
        color: #1E40AF;
        font-weight: 600;
        margin-bottom: 1.2rem;
        line-height: 1.4;
    }
    
    /* Descripción - Texto completo y legible */
    .inicio-tech-description {
        font-size: 1.1rem;
        color: #374151;
        line-height: 1.7;
        margin-bottom: 2.5rem;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
        padding: 0 2rem;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (HEADER) - ENCABEZADO DE TECNOLOGÍA
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (SHOWCASE) - GRID DE TARJETAS TECNOLÓGICAS
       ========================================== */
    
    /* Grid de tarjetas - Dos columnas en desktop pequeño (2x2) */
    .inicio-tech-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 0 2rem;
    }
    
    /* Tarjetas de tecnología - Optimización para desktop pequeño */
    .inicio-tech-card {
        background: #FFFFFF;
        border-radius: 16px;
        padding: 0;
        min-height: 480px;
        box-shadow: 0 8px 24px rgba(30, 58, 138, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
        border-top: 4px solid #1E3A8A;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    /* Efecto hover completo para desktop pequeño */
    .inicio-tech-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (SHOWCASE) - GRID DE TARJETAS TECNOLÓGICAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (IMÁGENES) - PLACEHOLDERS DE EQUIPOS
       ========================================== */
    
    /* Imagen de tarjeta - Altura optimizada para desktop pequeño */
    .inicio-tech-card-image {
        margin-bottom: 1.2rem;
        text-align: center;
    }
    
    /* Placeholder de imagen - Tamaño optimizado para desktop pequeño */
    .inicio-tech-card-image .image-placeholder {
        width: 100%;
        height: 220px;
        background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #6B7280;
        border: 2px dashed #D1D5DB;
    }
    
    /* Icono del placeholder - Tamaño completo */
    .inicio-tech-card-image .image-placeholder i {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
        color: #9CA3AF;
    }
    
    /* Texto del placeholder - Tamaño completo */
    .inicio-tech-card-image .image-placeholder span {
        font-size: 0.9rem;
        font-weight: 500;
        text-align: center;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (IMÁGENES) - PLACEHOLDERS DE EQUIPOS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (CONTENIDO) - HEADERS Y TÍTULOS DE TARJETAS
       ========================================== */
    
    /* Header de tarjeta - Centrado y bien espaciado */
    .inicio-tech-card-header {
        text-align: center;
        margin-bottom: 1.2rem;
        padding: 1rem 1.5rem 0;
    }
    
    /* Título de tarjeta - Tamaño optimizado para desktop pequeño */
    .inicio-tech-card-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: #1F2937;
        margin: 0 0 0.5rem 0;
        line-height: 1.3;
    }
    
    /* Marcas de equipos - Texto completo */
    .inicio-tech-card-brands {
        color: #E3B23C;
        font-weight: 600;
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (CONTENIDO) - HEADERS Y TÍTULOS DE TARJETAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (CUERPO) - DESCRIPCIONES Y VENTAJAS
       ========================================== */
    
    /* Cuerpo de tarjeta - Flexbox optimizado */
    .inicio-tech-card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 0 1.5rem 1.5rem;
    }
    
    /* Descripción de tarjeta - Texto completo */
    .inicio-tech-card-description {
        color: #374151;
        line-height: 1.5;
        margin-bottom: 1.2rem;
        font-size: 1rem;
        text-align: center;
    }
    
    /* Ventajas del equipo - Diseño completo */
    .inicio-tech-card-advantages {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    /* Elementos de ventaja - Tamaño completo */
    .inicio-advantage-item {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.6rem;
        background: rgba(30, 58, 138, 0.05);
        border-radius: 6px;
        border: 1px solid rgba(30, 58, 138, 0.12);
        box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.05);
        transition: transform 0.15s ease, background-color 0.15s ease;
    }
    
    /* Efecto hover completo para elementos de ventaja */
    .inicio-advantage-item:hover {
        background: rgba(30, 58, 138, 0.08);
        transform: translateX(4px);
    }
    
    /* Icono de ventaja - Tamaño completo */
    .inicio-advantage-item i {
        color: #E3B23C;
        font-size: 0.9rem;
        background: rgba(227, 178, 60, 0.15);
        width: 24px;
        height: 24px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    /* Texto de ventaja - Tamaño completo */
    .inicio-advantage-item span {
        color: #1F2937;
        font-weight: 600;
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (CUERPO) - DESCRIPCIONES Y VENTAJAS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 3 (UTILIDADES) - ELEMENTOS DE APOYO
       ========================================== */
    
    /* Asegurar que los elementos con z-index no bloqueen la selección */
    .section-bg-amarillo .container-full-width {
        position: relative;
        z-index: 10;
    }
    
    /* Texto centrado para tecnología */
    .technology .text-center {
        text-align: center;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 3 (UTILIDADES) - ELEMENTOS DE APOYO
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE 3 (TECNOLOGÍA) - DESKTOP PEQUEÑO 1024px (2x2)
       ========================================== */

/* ==========================================
   MEDIA QUERY 1024px - BLOQUE 4: PROYECTOS DESTACADOS
   Optimización específica para pantallas grandes (2 columnas)
   Basado en la estructura del BLOQUE 3 (Tecnología) para 1024px
   ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE 4 (PROYECTOS) - CONTENEDOR PRINCIPAL
       ========================================== */
    
    /* Sección principal de proyectos - Optimización para pantalla grande */
    .projects.section-bg-azul {
        padding: 4.5rem 0;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Contenedor de ancho completo - Ajustes para pantalla grande */
    .projects .container {
        padding: 0 2.5rem;
        max-width: 100%;
        margin: 0;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (PROYECTOS) - CONTENEDOR PRINCIPAL
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 4 (HEADER) - ENCABEZADO DE PROYECTOS
       ========================================== */
    
    /* Header centrado - Optimización para pantalla grande */
    .projects .section-header {
        text-align: center;
        margin-bottom: 3.5rem;
        padding: 0 2rem;
        max-width: 100%;
    }
    
    /* Título principal - Tamaño mejorado para pantalla grande */
    .projects .section-title {
        font-size: 2.8rem;
        font-weight: 700;
        color: #FFFFFF;
        margin-bottom: 1.8rem;
        line-height: 1.2;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    }
    
    /* Subtítulo - Tamaño mejorado para pantalla grande */
    .projects .section-subtitle {
        font-size: 1.4rem;
        color: #E5E7EB;
        line-height: 1.4;
        margin-bottom: 2.6rem;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
        padding: 0 2rem;
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (HEADER) - ENCABEZADO DE PROYECTOS
       ========================================== */

    /* ==========================================
       INICIO DE BLOQUE 4 (GRID) - GRID DE TARJETAS DE PROYECTOS (2 COLUMNAS)
       ========================================== */
    
    /* Grid de proyectos - DOS COLUMNAS en pantalla grande */
    .inicio-proyectos-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* ✅ NUEVO: 2 columnas en lugar de 1 */
        gap: 2.2rem; /* ✅ AUMENTADO: De 2rem a 2.2rem para mejor separación */
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        padding: 0 2rem;
    }
    
    /* ✅ NUEVO: Centrar el último cuadro cuando hay número impar */
    .inicio-proyectos-grid .inicio-proyectos-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 50%; /* ✅ Limitar el ancho para que no se vea muy ancho */
    }
    
    /* Tarjetas de proyectos - OPTIMIZADAS PARA ELIMINAR ESPACIO MUERTO Y APROVECHAR ANCHO */
    .inicio-proyectos-card {
        background: #FFFFFF;
        border-radius: 22px; /* ✅ AUMENTADO: De 20px a 22px */
        overflow: hidden;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); /* ✅ MEJORADO: Sombra más pronunciada */
        border: 1px solid rgba(30, 58, 138, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        min-height: 380px; /* ✅ REDUCIDO: De 480px a 380px para tarjetas más cortas */
        height: auto; /* ✅ NUEVO: Altura automática para acomodar contenido */
        max-width: 100%; /* ✅ NUEVO: Aprovechar todo el ancho disponible */
    }
    
    /* Efecto hover desactivado en móvil */
    .inicio-proyectos-card:hover {
        transform: none;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    }
    
    /* Imagen del proyecto - Altura optimizada para pantalla grande (más compacta) */
    .project-image {
        height: 220px; /* ✅ REDUCIDO: De 340px a 220px para tarjetas más cortas */
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    
    /* Imagen real del proyecto */
    .project-image .imagen-real {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }
    
    /* Placeholder de imagen */
    .project-image .image-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
        color: #6B7280;
        font-size: 3.2rem; /* ✅ AUMENTADO: De 3rem a 3.2rem */
        width: 100%;
        height: 100%;
    }
    
    .project-image .image-placeholder span {
        font-size: 1.3rem; /* ✅ AUMENTADO: De 1.2rem a 1.3rem */
        margin-top: 0.5rem;
        text-align: center;
        padding: 0 1rem;
    }
    
    /* Overlay del proyecto */
    .project-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(30,58,138,0.2) 100%);
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 2rem; /* ✅ AUMENTADO: De 1.8rem a 2rem */
    }
    
    /* Categoría del proyecto */
    .project-category {
        background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%);
        color: #1a202c;
        padding: 0.9rem 1.8rem; /* ✅ AUMENTADO: De 0.8rem 1.6rem a 0.9rem 1.8rem */
        border-radius: 15px;
        font-size: 1.05rem; /* ✅ AUMENTADO: De 1rem a 1.05rem */
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
    }
    
    .project-content {
        padding: 1.5rem 1.8rem 1.8rem 1.8rem;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    
    /* Título del proyecto - Optimizado para 1024px (más compacto) */
    .project-title {
        font-size: 1.4rem; /* ✅ REDUCIDO: De 1.8rem a 1.4rem para más compacto */
        font-weight: 700;
        color: #1a202c;
        margin-bottom: 0.8rem; /* ✅ REDUCIDO: De 1.6rem a 0.8rem para más compacto */
        line-height: 1.3;
    }
    
    .project-description {
        font-size: 0.95rem;
        color: #4B5563;
        line-height: 1.4;
        flex: 1;
        margin-bottom: 0;
    }
    
    .project-details {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    
    /* Item de detalle - AMARILLO COMO EN DESKTOP (más compacto) */
    .detail-item {
        background: linear-gradient(135deg, #FFD700 0%, #E3B23C 100%); /* ✅ CORREGIDO: Fondo amarillo como desktop */
        color: #1a202c; /* ✅ CORREGIDO: Texto oscuro para contraste */
        padding: 0.6rem 1rem; /* ✅ REDUCIDO: De 0.9rem 1.6rem a 0.6rem 1rem para más compacto */
        border-radius: 12px;
        font-size: 0.85rem; /* ✅ REDUCIDO: De 1rem a 0.85rem para más compacto */
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.6rem; /* ✅ REDUCIDO: De 0.9rem a 0.6rem para más compacto */
        border: 2px solid rgba(255, 255, 255, 0.3); /* ✅ NUEVO: Borde sutil */
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3); /* ✅ NUEVO: Sombra dorada */
        transition: all 0.3s ease;
        flex: 1; /* ✅ NUEVO: Hacer que los items se distribuyan equitativamente */
        min-width: 0; /* ✅ NUEVO: Permitir que se encojan si es necesario */
    }
    
    .detail-item i {
        color: #1a202c; /* ✅ CORREGIDO: Icono oscuro para contraste */
        font-size: 0.75rem; /* ✅ REDUCIDO: De 0.95rem a 0.75rem para más compacto */
        margin-right: 0.5rem; /* ✅ REDUCIDO: De 0.8rem a 0.5rem para más compacto */
    }
    
    /* ✅ NUEVO: Efecto hover para los detail-item (desactivado en móvil) */
    .inicio-proyectos-card:hover .detail-item {
        background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%); /* ✅ NUEVO: Color naranja en hover */
        color: #ffffff; /* ✅ NUEVO: Texto blanco en hover */
        transform: translateY(-2px) scale(1.02); /* ✅ NUEVO: Elevación y escala */
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4); /* ✅ NUEVO: Sombra naranja */
        border-color: rgba(255, 255, 255, 0.5); /* ✅ NUEVO: Borde más visible */
    }
    
    .inicio-proyectos-card:hover .detail-item i {
        color: #ffffff; /* ✅ NUEVO: Icono blanco en hover */
    }
    
    /* ==========================================
       FINAL DE BLOQUE 4 (GRID) - GRID DE TARJETAS DE PROYECTOS (2 COLUMNAS)
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE 4 (PROYECTOS) - PANTALLA GRANDE 1024px (2 COLUMNAS)
       ========================================== */

/* ==========================================
   MEDIA QUERY 1024px - BLOQUE CLIENTES
   Optimización específica para tablets grandes
   Basado en la estructura del BLOQUE CLIENTES para 900px
   ========================================== */

   
   /* ==========================================
      INICIO DE BLOQUE CLIENTES - CONTENEDOR PRINCIPAL
      ========================================== */
   
   /* Sección principal de clientes - Optimización para tablet grande */
   .clientes {
    padding: 4.5rem 0; /* ✅ AUMENTADO: De 4rem a 4.5rem para más espacio */
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Contenedor de ancho completo - Ajustes para tablet grande */
.clientes .container {
    padding: 0 3rem; /* ✅ AUMENTADO: De 2.5rem a 3rem para más espacio */
    max-width: 100%;
    margin: 0;
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES - CONTENEDOR PRINCIPAL
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (HEADER) - ENCABEZADO DE CLIENTES
   ========================================== */

/* Header centrado - Optimización para tablet grande */
.clientes .section-header {
    text-align: center;
    margin-bottom: 4rem; /* ✅ AUMENTADO: De 3.5rem a 4rem */
    padding: 0 1.8rem; /* ✅ AUMENTADO: De 1.5rem a 1.8rem */
    max-width: 100%;
}

/* Título principal - Tamaño aumentado para tablet grande */
/* ✅ ELIMINADO: .clientes .section-title 1024px ahora usa el estilo general */

/* Subtítulo - Tamaño aumentado para tablet grande */
.clientes .section-subtitle {
    font-size: 1.4rem; /* ✅ AUMENTADO: De 1.3rem a 1.4rem */
    color: #000000; /* ✅ MANTENIDO: Color negro para mejor legibilidad */
    line-height: 1.4;
    margin-bottom: 2.6rem; /* ✅ AUMENTADO: De 2.4rem a 2.6rem */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    padding: 0 1.8rem; /* ✅ AUMENTADO: De 1.5rem a 1.8rem */
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (HEADER) - ENCABEZADO DE CLIENTES
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CARRUSEL) - CARRUSEL DE CLIENTES
   ========================================== */

/* Contenedor del carrusel - COMPLETAMENTE TRANSPARENTE SIN ELEMENTOS BLANCOS */
.inicio-clientes-carousel-container {
    padding: 0; /* ✅ MANTENIDO: Sin padding para eliminar espacios blancos */
    margin: 0 auto;
    max-width: 100%;
    background: transparent; /* ✅ TRANSPARENTE: Fondo completamente transparente */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados que crean espacios blancos */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
    border: none; /* ✅ MANTENIDO: Sin bordes */
}

/* Carrusel principal - MANTIENE COMPORTAMIENTO HORIZONTAL PARA 1024px */
.inicio-clientes-carousel {
    display: flex;
    flex-direction: row; /* ✅ MANTENIDO: Mantiene flujo horizontal */
    gap: 0; /* ✅ MANTENIDO: Sin gap entre slides */
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* ✅ MANTENIDO: Oculta slides no activos */
}

/* Slides individuales - DOS TARJETAS POR SLIDE EN TABLET GRANDE */
.inicio-clientes-slide {
    display: flex;
    flex-direction: row; /* ✅ MANTENIDO: Mantiene flujo horizontal */
    gap: 2rem; /* ✅ AUMENTADO: De 1.8rem a 2rem para más espacio entre tarjetas */
    width: 100%;
    min-width: 100%; /* ✅ MANTENIDO: Ancho mínimo para ocupar todo el carrusel */
    opacity: 0; /* ✅ MANTENIDO: Invisible por defecto */
    visibility: hidden; /* ✅ MANTENIDO: Oculto por defecto */
    position: absolute; /* ✅ MANTENIDO: Posición absoluta para superposición */
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Slide activo - VISIBLE */
.inicio-clientes-slide.active {
    opacity: 1;
    visibility: visible;
    position: relative; /* ✅ MANTENIDO: Posición relativa cuando está activo */
}

/* Tarjetas de cliente - SEMI-TRANSPARENTES PARA MOSTRAR LOGOS DE FONDO */
.inicio-cliente-card-featured {
    background: rgba(255, 255, 255, 0.85); /* ✅ MANTENIDO: Fondo semi-transparente */
    border-radius: 26px; /* ✅ AUMENTADO: De 24px a 26px para bordes más redondeados */
    padding: 2rem; /* ✅ AUMENTADO: De 1.8rem a 2rem para más espacio interno */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* ✅ MANTENIDO: Sombra más suave */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 1px solid rgba(255, 255, 255, 0.3); /* ✅ MANTENIDO: Borde más sutil */
    position: relative;
    overflow: hidden;
    min-height: 380px; /* ✅ AUMENTADO: De 360px a 380px para más altura */
    height: auto;
    width: calc(50% - 1rem); /* ✅ AJUSTADO: De 0.9rem a 1rem para mejor separación */
    max-width: calc(50% - 1rem);
    flex-shrink: 0; /* ✅ MANTENIDO: No se encoge */
    flex-grow: 0; /* ✅ MANTENIDO: No crece */
}

/* Efecto hover desactivado en móvil */
.inicio-cliente-card-featured:hover {
    transform: none;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Contenedor del logo - SEMI-TRANSPARENTE PARA MOSTRAR LOGOS DE FONDO */
.cliente-logo-container {
    position: relative;
    width: 100%;
    height: 150px; /* ✅ AUMENTADO: De 140px a 150px para más espacio */
    min-height: 150px;
    max-height: 150px;
    margin-bottom: 1.8rem; /* ✅ AUMENTADO: De 1.6rem a 1.8rem */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 249, 255, 0.7); /* ✅ MANTENIDO: Fondo semi-transparente */
    border-radius: 20px; /* ✅ AUMENTADO: De 18px a 20px para bordes más redondeados */
    overflow: hidden;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    border: 1px solid rgba(14, 165, 233, 0.3); /* ✅ MANTENIDO: Borde más sutil */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); /* ✅ MANTENIDO: Sombra más sutil */
    flex-shrink: 0;
}

/* Imagen del cliente - Tamaño optimizado para tablet grande */
.cliente-imagen-featured {
    width: 100%;
    height: 100%;
    min-width: 130px; /* ✅ AUMENTADO: De 120px a 130px para logos más grandes */
    min-height: 130px; /* ✅ AUMENTADO: De 120px a 130px para logos más grandes */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform 0.3s ease-out;
    position: relative;
    z-index: 2;
}

/* Información del cliente - Optimizada para tablet grande */
.cliente-info-featured {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 1.4rem; /* ✅ AUMENTADO: De 1.2rem a 1.4rem */
    border-radius: 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Nombre del cliente - Tamaño optimizado para tablet grande */
.cliente-nombre-featured {
    font-size: 1.4rem; /* ✅ AUMENTADO: De 1.3rem a 1.4rem */
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem; /* ✅ AUMENTADO: De 0.9rem a 1rem */
    font-family: 'Inter', sans-serif;
    line-height: 1.2;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    text-align: center; /* ✅ MANTENIDO: Centrado para mejor apariencia */
}

/* Categoría del cliente - Optimizada para tablet grande */
.cliente-categoria-featured {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 0.8rem 1.6rem; /* ✅ AUMENTADO: De 0.7rem 1.4rem a 0.8rem 1.6rem */
    border-radius: 26px; /* ✅ AUMENTADO: De 24px a 26px para bordes más redondeados */
    font-size: 0.9rem; /* ✅ AUMENTADO: De 0.85rem a 0.9rem */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px; /* ✅ AUMENTADO: De 0.7px a 0.8px */
    margin-bottom: 0.8rem; /* ✅ AUMENTADO: De 0.7rem a 0.8rem */
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3); /* ✅ MANTENIDO: Sombra más sutil */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    align-self: center;
}

/* Colores específicos por tipo de industria - Optimizados para tablet grande */
.cliente-categoria-featured[data-industry="industrial"] {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 3px 8px rgba(5, 150, 105, 0.3);
}

.cliente-categoria-featured[data-industry="comercial"] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.3);
}

.cliente-categoria-featured[data-industry="vivienda"] {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 3px 8px rgba(124, 58, 237, 0.3);
}

.cliente-categoria-featured[data-industry="construccion"] {
    background: linear-gradient(135deg, #ea580c, #c2410c);
    box-shadow: 0 3px 8px rgba(234, 88, 12, 0.3);
}

.cliente-categoria-featured[data-industry="gobierno"] {
    background: linear-gradient(135deg, #1f2937, #111827);
    box-shadow: 0 3px 8px rgba(31, 41, 55, 0.3);
}

.cliente-categoria-featured[data-industry="financiero"] {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    box-shadow: 0 3px 8px rgba(8, 145, 178, 0.3);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CARRUSEL) - CARRUSEL DE CLIENTES
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CONTROLES) - CONTROLES DE NAVEGACIÓN
   ========================================== */

/* Controles del carrusel - FLOTANTES SIN LÍNEAS HORIZONTALES (IGUAL A 900px) */
.inicio-clientes-controls {
    position: absolute;
    top: 50%;
    left: -0.5rem; /* ✅ IGUAL A 900px: Más hacia la izquierda para flotar */
    right: -0.5rem; /* ✅ IGUAL A 900px: Más hacia la derecha para flotar */
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    padding: 0; /* ✅ IGUAL A 900px: Sin padding para eliminar líneas horizontales */
    z-index: 10;
    pointer-events: none; /* ✅ MANTENIDO: Para que no interfiera con el carrusel */
}

/* ✅ ELIMINAR PSEUDO-ELEMENTOS QUE CREAN LÍNEAS VERTICALES (IGUAL A 900px) */
.inicio-clientes-controls::before,
.inicio-clientes-controls::after {
    display: none; /* ✅ IGUAL A 900px: Sin gradientes blancos verticales */
}

/* Botones de navegación - Tamaño optimizado para tablet grande */
.inicio-clientes-btn {
    width: 52px; /* ✅ AUMENTADO: De 48px a 52px para mejor visibilidad */
    height: 52px; /* ✅ AUMENTADO: De 48px a 52px para mejor visibilidad */
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem; /* ✅ AUMENTADO: De 1.2rem a 1.3rem */
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); /* ✅ MANTENIDO: Sombra más visible */
    position: relative;
    overflow: hidden;
    pointer-events: auto; /* ✅ MANTENIDO: Para que sean clickeables */
}

.inicio-clientes-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.inicio-clientes-btn:active {
    transform: scale(0.95);
}

.inicio-clientes-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: scale(1);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CONTROLES) - CONTROLES DE NAVEGACIÓN
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (INDICADORES) - INDICADORES DE PAGINACIÓN
   ========================================== */

/* Indicadores del carrusel - COMPLETAMENTE TRANSPARENTES SIN ELEMENTOS BLANCOS */
.inicio-clientes-indicators {
    display: flex;
    justify-content: center;
    gap: 1.6rem; /* ✅ AUMENTADO: De 1.4rem a 1.6rem para más separación */
    margin-top: 2.6rem; /* ✅ AUMENTADO: De 2.4rem a 2.6rem */
    padding: 1.8rem 2.2rem; /* ✅ AUMENTADO: De 1.6rem 2rem a 1.8rem 2.2rem */
    background: transparent; /* ✅ MANTENIDO: Sin fondo blanco */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados */
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    border: none; /* ✅ MANTENIDO: Sin bordes */
    position: relative;
}

/* Indicador individual - Tamaño optimizado para tablet grande */
.inicio-clientes-indicator {
    width: 20px; /* ✅ AUMENTADO: De 18px a 20px para mejor visibilidad */
    height: 20px; /* ✅ AUMENTADO: De 18px a 20px para mejor visibilidad */
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    cursor: pointer;
    transition: all 0.4s ease;
    border: 2px solid rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.inicio-clientes-indicator:hover {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    transform: scale(1.2);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.inicio-clientes-indicator.active {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    transform: scale(1.3);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.3);
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (INDICADORES) - INDICADORES DE PAGINACIÓN
   ========================================== */

/* ==========================================
   INICIO DE BLOQUE CLIENTES (CTA) - ESTADÍSTICAS DE CLIENTES
   ========================================== */

/* CTA de clientes - Optimizado para tablet grande */
.clientes-cta {
    margin-top: 4.5rem; /* ✅ AUMENTADO: De 4rem a 4.5rem */
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Estadísticas de clientes - LAYOUT DE 2+1 PARA 1024px */
.clientes-stats {
    display: flex;
    flex-direction: row; /* ✅ CAMBIADO: De column a row para layout horizontal */
    flex-wrap: wrap; /* ✅ NUEVO: Permite que se envuelvan a la siguiente línea */
    gap: 1.5rem; /* ✅ REDUCIDO: De 2.2rem a 1.5rem para menos separación */
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

/* Item de estadística - OPTIMIZADO PARA LAYOUT 2+1 */
.clientes .stat-item {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* ✅ REDUCIDO: De 1.8rem a 0.8rem para menos separación */
    background: transparent; /* ✅ MANTENIDO: Sin fondo blanco */
    padding: 1.2rem 1.5rem; /* ✅ REDUCIDO: De 1.8rem 2.2rem a 1.2rem 1.5rem */
    border-radius: 0; /* ✅ MANTENIDO: Sin bordes redondeados */
    box-shadow: none; /* ✅ MANTENIDO: Sin sombra */
    border: none; /* ✅ MANTENIDO: Sin bordes */
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 280px; /* ✅ REDUCIDO: De 380px a 280px para que quepan 2 en una línea */
    max-width: calc(50% - 0.75rem); /* ✅ NUEVO: Máximo 50% menos gap para 2 por línea */
    backdrop-filter: none; /* ✅ MANTENIDO: Sin blur */
    flex: 1; /* ✅ NUEVO: Permite que se distribuyan uniformemente */
}

/* ✅ NUEVO: Tercer elemento centrado en su propia línea */
.clientes .stat-item:nth-child(3) {
    flex-basis: 100%; /* ✅ NUEVO: Ocupa toda la línea */
    max-width: 300px; /* ✅ NUEVO: Ancho fijo para centrado */
    justify-content: center; /* ✅ NUEVO: Centrado horizontal */
}

/* Efecto hover desactivado en móvil para evitar sombras blancas */
.clientes .stat-item:hover {
    transform: none;
    box-shadow: none;
}

/* Icono de estadística - Optimizado para tablet grande */
.clientes .stat-item i {
    font-size: 2.2rem; /* ✅ AUMENTADO: De 2rem a 2.2rem */
    color: #007bff;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

/* Texto de estadística - Optimizado para tablet grande */
.clientes .stat-item strong {
    color: #007bff;
    font-weight: 700;
    font-size: 1.6rem; /* ✅ AUMENTADO: De 1.5rem a 1.6rem */
    margin-right: 0.8rem; /* ✅ AUMENTADO: De 0.7rem a 0.8rem */
}

/* ==========================================
   FINAL DE BLOQUE CLIENTES (CTA) - ESTADÍSTICAS DE CLIENTES
   ========================================== */

/* ==========================================
   FINAL DE BLOQUE CLIENTES - TABLET GRANDE 1024px
       ========================================== */
/* ==========================================
   BREAKPOINT 1024px - TABLET GRANDE / LAPTOP PEQUEÑO
   BLOQUE: SOBRE LAMA TOPOGRAFÍA
   OPTIMIZADO PARA PANTALLAS DE 1024px
   BASADO EN EL DISEÑO EXITOSO DE 900px
       ========================================== */

    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA - SECCIÓN PRINCIPAL
       ========================================== */
    
    /* Contenedor principal - OPTIMIZADO PARA TABLET GRANDE */
    .about.section-bg-amarillo {
        padding: 4rem 0;
        margin: 0;
        overflow-x: hidden;
        scroll-behavior: smooth;
        width: 100vw;
        max-width: 100vw;
        font-size: 16px;
        line-height: 1.7;
    }
    
    /* Contenedor de ancho completo - SIN RESTRICCIONES */
    .container-full-width {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0 3rem;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (HEADER) - TÍTULO Y SUBTÍTULO
       ========================================== */
    
    .inicio-about-header {
        margin-bottom: 4rem;
        text-align: center;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }
    
    .about-title-container {
        max-width: 100%;
        width: 100%;
        padding: 3.5rem;
        margin: 0 auto 4rem auto;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        border: 2px solid rgba(30, 64, 175, 0.3);
        border-radius: 26px;
        box-shadow: 0 20px 45px rgba(30, 64, 175, 0.25);
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    
    .about-title-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .inicio-about-title {
        font-size: 2.8rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 2rem;
        line-height: 1.2;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .inicio-about-subtitle {
        font-size: 1.4rem;
        color: var(--text-secondary);
        line-height: 1.9;
        margin: 0;
        font-weight: 400;
        max-width: 100%;
    }

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (HEADER) - TÍTULO Y SUBTÍTULO
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (FILA SUPERIOR) - HISTORIA + VALORES
       ========================================== */
    
    .inicio-about-top-row {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        margin-bottom: 4.5rem;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (HISTORIA) - NUESTRA TRAYECTORIA
       ========================================== */
    
    .about-historia-section {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .inicio-about-story-compact {
        display: flex;
        flex-direction: column;
        gap: 2.2rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* Cuadro principal de contenido - MÁXIMO ANCHO */
    .story-content-box {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        border-radius: 26px;
        padding: 3.5rem;
        box-shadow: 0 20px 45px rgba(30, 64, 175, 0.25);
        border: 2px solid rgba(30, 64, 175, 0.3);
        display: flex;
        flex-direction: column;
        gap: 2.2rem;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    
    /* Título del bloque */
    .story-title-compact {
        font-size: 2.3rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0 0 2rem 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
        text-align: center;
    }
    
    /* Layout vertical para tablet grande */
    .story-content-horizontal {
        display: flex;
        flex-direction: column;
        gap: 2.2rem;
        margin-top: 0;
    }
    
    /* Sección de texto */
    .story-text-section {
        width: 100%;
        order: 1;
    }
    
    .story-text-compact {
        font-size: 1.2rem;
        line-height: 2.0;
        color: var(--text-color);
        margin: 0;
        text-align: left;
    }
    
    .story-text-compact strong {
        color: var(--primary-color);
        font-weight: 600;
    }
    
    /* Sección de imagen */
    .story-image-section {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        order: 2;
    }
    
    .story-image-placeholder {
        border-radius: 22px;

        padding: 4rem;
        border: 2px solid rgba(30, 64, 175, 0.3);
        text-align: center;
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 300px;
        margin: 0;
    }
    
    .story-image-placeholder:hover {


        transform: translateY(-6px);

    }
    
    .image-coming-soon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        color: var(--primary-color);
    }
    
    .image-coming-soon i {
        font-size: 4.5rem;
        color: var(--primary-color);
    }
    
    .image-coming-soon span {
        font-size: 1.3rem;
        font-weight: 500;
        color: var(--primary-color);
        text-align: center;
    }

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (HISTORIA) - NUESTRA TRAYECTORIA
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (VALORES) - LO QUE NOS DIFERENCIA
       ========================================== */
    
    .about-valores-section {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .inicio-about-values-compact {
        display: flex;
        flex-direction: column;
        gap: 2.2rem;
        width: 100%;
        max-width: 100%;
    }
    
    /* Título de valores - MÁXIMO ANCHO */
    .values-title-container {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 22px;
        padding: 3rem 2.5rem;
        margin-bottom: 2.2rem;
        box-shadow: 0 15px 35px rgba(30, 64, 175, 0.22);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .values-title-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .values-title-compact {
        font-size: 1.7rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
    }
    
    /* Grid de valores - OPTIMIZADO PARA TABLET GRANDE */
    .values-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        row-gap: 2.2rem;
        margin-top: 0;
        flex: 1;
        align-content: start;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Items de valores */
    .value-item-compact {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 20px;
        padding: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.4rem;
        transition: transform 0.3s ease;
        min-height: 130px;
        justify-content: center;
    }
    
    .value-item-compact:hover {


        transform: translateY(-6px);

    }
    
    /* Iconos de valores */
    .value-icon-small {
        width: 52px;
        height: 52px;
        background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
        box-shadow: 0 7px 20px rgba(30, 64, 175, 0.55);
    }
    
    .value-icon-small i {
        font-size: 1.4rem;
        color: white;
    }
    
    /* Contenido de valores */
    .value-content-small {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.8rem;
        width: 100%;
    }
    
    .value-content-small h4 {
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--primary-color);
        margin: 0;
        line-height: 1.2;
        font-family: 'Poppins', sans-serif;
    }
    
    .value-content-small p {
        font-size: 0.95rem;
        color: var(--text-secondary);
        line-height: 1.7;
        margin: 0;
        font-weight: 500;
        text-align: center;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (VALORES) - LO QUE NOS DIFERENCIA
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (FILA SUPERIOR) - HISTORIA + VALORES
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (FILA INFERIOR) - ESTADÍSTICAS + CTA + CERTIFICACIONES
       ========================================== */
    
    .inicio-about-bottom-row {
        display: flex;
        flex-direction: column;
        gap: 4rem;
        padding: 0;
    }
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (ESTADÍSTICAS) - ESTADÍSTICAS DE EMPRESA
       ========================================== */
    
    .about-stats-section {
        width: 100%;
        max-width: 100%;
        order: 1;
    }
    
    .inicio-about-stats-compact-horizontal {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 22px;
        padding: 3rem;
        box-shadow: 0 15px 35px rgba(30, 64, 175, 0.22);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-stats-compact-horizontal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .stats-horizontal-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        row-gap: 2rem;
        margin-top: 2rem;
    }
    
    .stat-horizontal {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 18px;
        padding: 3rem 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
        min-width: 0;
        width: 100%;
        transition: transform 0.3s ease;
    }
    
    .stat-horizontal:hover {


        transform: translateY(-6px);

    }
    
    .stat-number {
        font-size: 2.4rem;
        font-weight: 700;
        color: var(--primary-color);
        line-height: 1;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .stat-label {
        font-size: 0.8rem;
        color: var(--text-secondary);
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: 0.1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (ESTADÍSTICAS) - ESTADÍSTICAS DE EMPRESA
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (CTA) - CALL TO ACTION
       ========================================== */
    
    .about-cta-section {
        width: 100%;
        max-width: 100%;
        order: 2;
    }
    
    .inicio-about-cta-compact {
        background: linear-gradient(135deg, rgba(30, 64, 175, 0.95) 0%, rgba(59, 130, 246, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.3);
        border-radius: 22px;
        padding: 3rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        box-shadow: 0 20px 45px rgba(30, 64, 175, 0.45);
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-cta-compact::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .inicio-about-cta-compact h3 {
        font-size: 1.6rem;
        font-weight: 700;
        color: white;
        margin: 0 0 1.5rem 0;
        line-height: 1.2;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    
    .inicio-about-cta-compact p {
        font-size: 1.3rem;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.8;
        margin: 0 0 2.5rem 0;
    }
    
    .cta-buttons-compact {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        align-items: center;
    }
    
    .cta-buttons-compact .btn {
        padding: 1.4rem 3rem;
        font-size: 1.3rem;
        border-radius: 18px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 1.2rem;
        transition: all 0.3s ease;
        font-weight: 600;
        min-width: 300px;
        justify-content: center;
    }
    
    .cta-buttons-compact .btn-primary {
        background: linear-gradient(135deg, #E3B23C 0%, #FFD700 100%);
        color: var(--primary-color);
        border: 1px solid rgba(227, 178, 60, 0.3);
    }
    
    .cta-buttons-compact .btn-primary:hover {
        background: linear-gradient(135deg, #D4A017 0%, #E6C200 100%);
        transform: translateY(-6px);

    }
    
    .cta-buttons-compact .btn-secondary {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .cta-buttons-compact .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(255, 255, 255, 0.45);
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (CTA) - CALL TO ACTION
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (CERTIFICACIONES) - CREDENCIALES Y CERTIFICACIONES
       ========================================== */
    
    .about-certificaciones-section {
        width: 100%;
        max-width: 100%;
        order: 3;
    }
    
    .inicio-about-credentials-horizontal {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 2px solid rgba(30, 64, 175, 0.2);
        border-radius: 22px;
        padding: 3rem;
        box-shadow: 0 15px 35px rgba(30, 64, 175, 0.22);
        text-align: center;
        position: relative;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    .inicio-about-credentials-horizontal::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #E3B23C 0%, #FFD700 50%, #E3B23C 100%);
    }
    
    .credentials-title-horizontal {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--primary-color);
        margin: 0 0 2rem 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.2;
    }
    
    .credentials-horizontal {
        display: flex;
        flex-direction: column;
        gap: 1.8rem;
        align-items: center;
    }
    
    .credential-horizontal {
        background: linear-gradient(135deg, rgba(227, 178, 60, 0.08) 0%, rgba(30, 64, 175, 0.08) 100%);
        border: 1px solid rgba(30, 64, 175, 0.2);
        border-radius: 18px;
        padding: 1.8rem 2.5rem;
        display: flex;
        align-items: center;
        gap: 1.5rem;
        font-size: 1.05rem;
        font-weight: 500;
        color: var(--primary-color);
        transition: all 0.3s ease;
        width: 100%;
        justify-content: center;
    }
    
    .credential-horizontal:hover {


        transform: translateY(-6px);

    }
    
    .credential-horizontal i {
        font-size: 1.4rem;
        color: var(--primary-color);
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (CERTIFICACIONES) - CREDENCIALES Y CERTIFICACIONES
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (FILA INFERIOR) - ESTADÍSTICAS + CTA + CERTIFICACIONES
       ========================================== */
    
    /* ==========================================
       INICIO DE BLOQUE SOBRE LAMA (UTILIDADES) - OPTIMIZACIONES Y OVERRIDES
       ========================================== */
    
    /* Asegurar que todo el texto sea seleccionable */
    .about.section-bg-amarillo * {
        user-select: text;
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        box-sizing: border-box;
    }
    
    /* Asegurar que no haya scroll horizontal */
    body {
        overflow-x: hidden;
    }
    
    /* Asegurar que los botones sean táctiles */
    .btn, .value-item-compact, .stat-horizontal, .credential-horizontal {
        min-height: 56px;
        touch-action: manipulation;
    }
    
    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA (UTILIDADES) - OPTIMIZACIONES Y OVERRIDES
       ========================================== */

    /* ==========================================
       FINAL DE BLOQUE SOBRE LAMA - TABLET GRANDE 1024px
       ========================================== */

    /* ==========================================
       OVERRIDES ESPECÍFICOS PARA 1024px - SOBRESCRITURA DE ESTILOS BASE
       ========================================== */
    
    /* Sobrescribir cualquier max-width del CSS base */
    .about.section-bg-amarillo .container-full-width,
    .about.section-bg-amarillo .inicio-about-header,
    .about.section-bg-amarillo .inicio-about-top-row,
    .about.section-bg-amarillo .inicio-about-bottom-row,
    .about.section-bg-amarillo .about-historia-section,
    .about.section-bg-amarillo .about-valores-section,
    .about.section-bg-amarillo .about-stats-section,
    .about.section-bg-amarillo .about-cta-section,
    .about.section-bg-amarillo .about-certificaciones-section,
    .about.section-bg-amarillo .inicio-about-story-compact,
    .about.section-bg-amarillo .inicio-about-values-compact,
    .about.section-bg-amarillo .story-content-box,
    .about.section-bg-amarillo .values-title-container,
    .about.section-bg-amarillo .inicio-about-stats-compact-horizontal,
    .about.section-bg-amarillo .inicio-about-cta-compact,
    .about.section-bg-amarillo .inicio-about-credentials-horizontal,
    .about.section-bg-amarillo .about-title-container {
        max-width: 100%;
        width: 100%;
    }
    
    /* Forzar layout vertical en todos los contenedores */
    .about.section-bg-amarillo .inicio-about-top-row {
        display: flex;
        flex-direction: column;
    }
    
    .about.section-bg-amarillo .inicio-about-bottom-row {
        display: flex;
        flex-direction: column;
    }

    /* ==========================================
       FINAL OVERRIDES ESPECÍFICOS PARA 1024px - SOBRESCRITURA DE ESTILOS BASE
       ========================================== */
       

  
} /* 🎯 FIN BLOQUE HERO - 1024px */

/* ==========================================
   SECCIÓN: RESULTADOS TECNOLÓGICOS
   ========================================== */

.resultados-tech {
    background: linear-gradient(160deg, #0a1440 0%, #0f2060 50%, #0a1440 100%);
    padding: 5rem 0 6rem;
    position: relative;
    overflow: hidden;
}

.resultados-tech::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(59,130,246,0.07) 0%, transparent 50%),
                      radial-gradient(circle at 80% 30%, rgba(30,58,138,0.1) 0%, transparent 50%);
    pointer-events: none;
}

.resultados-tech .section-title {
    color: #fff;
}

.resultados-tech .section-subtitle {
    color: rgba(255,255,255,0.65);
}

.resultados-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
    align-items: stretch;
}

.resultado-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
    will-change: transform;
}

/* Sombra via ::after + opacity — composited, sin repaint */
.resultado-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.resultado-card:hover {
    transform: translateY(-6px);
}

.resultado-card:hover::after {
    opacity: 1;
}

.resultado-video-wrap {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.resultado-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.resultado-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,20,60,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sin transición de background — evita repaint */
}

.resultado-play-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: transform 0.3s ease;
    will-change: transform;
}

.resultado-card:hover .resultado-play-btn {
    transform: scale(1.1);
    /* Sin cambio de background/border-color — evita repaint */
}

.resultado-play-btn i {
    color: #fff;
    font-size: 1.1rem;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resultado-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--accent-color, #E3B23C);
    color: #1a1a1a;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 20px;
    z-index: 2;
}

.resultado-info {
    padding: 1.4rem 1.5rem 1.6rem;
}

.resultado-titulo {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.resultado-desc {
    font-size: 0.83rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px) {
    .resultados-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 600px) {
    .resultados-tech {
        padding: 3rem 0 4rem;
    }
}

/* Specs chips bajo descripción */
.resultado-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.resultado-specs span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(59,130,246,0.12);
    border: 1px solid rgba(59,130,246,0.25);
    color: #93c5fd;
    font-size: 0.75rem;
    padding: 0.25rem 0.65rem;
    border-radius: 20px;
    font-weight: 500;
}

.resultado-specs span i {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Botón "Ver video completo" */
.resultado-ver-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    background: transparent;
    border: 1px solid rgba(96,165,250,0.5);
    color: #60a5fa;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    letter-spacing: 0.02em;
}

.resultado-ver-btn:hover {
    background: rgba(59,130,246,0.15);
    border-color: #60a5fa;
    color: #fff;
}

/* ==========================================
   MODAL DE VIDEO FULLSCREEN
   ========================================== */
.video-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(6px);
}

.video-modal-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

.video-modal-container {
    position: relative;
    width: 100%;
    max-width: 960px;
    background: #0d1b3e;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(59,130,246,0.25);
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.video-modal-overlay.is-open .video-modal-container {
    transform: scale(1);
}

.video-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.video-modal-close:hover {
    background: rgba(239,68,68,0.7);
    border-color: #ef4444;
}

.video-modal-player {
    position: relative;
    aspect-ratio: 16/9;
    background: #000;
}

.video-modal-player video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.video-modal-info {
    padding: 1.5rem 1.75rem 1.75rem;
}

.video-modal-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.6rem;
    line-height: 1.3;
}

.video-modal-desc {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0 0 1rem;
}

.video-modal-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.video-modal-specs span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.3);
    color: #93c5fd;
    font-size: 0.78rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-weight: 500;
}

.video-modal-specs span i {
    color: #60a5fa;
    font-size: 0.72rem;
}

/* ═══════════════════════════════════════════════════
   SOBRE LAMA — "MERIDIAN" REDESIGN
   Clases prefijadas sa- para cero conflictos
═══════════════════════════════════════════════════ */

/* ── Sección base ── */
.sa-section {
    background: #0d1b2a;
    color: #e2e8f0;
    position: relative;
    overflow: hidden;
    padding: 0;
}

/* ── Watermark "35" ── */
.sa-ghost {
    position: absolute;
    top: -2rem;
    right: -2rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(14rem, 22vw, 22rem);
    font-weight: 700;
    color: rgba(227,178,60,0.04);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

/* ── Textura topográfica ── */
.sa-topo {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 80% 50% at 15% 60%, rgba(227,178,60,0.05) 0%, transparent 55%),
        radial-gradient(ellipse 60% 60% at 85% 30%, rgba(59,130,246,0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ── HERO BAND ── */
.sa-hero {
    position: relative;
    z-index: 1;
    padding: 4rem 0 3.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.sa-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.sa-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #E3B23C;
    margin-bottom: 1rem;
    border-left: 3px solid #E3B23C;
    padding-left: 0.75rem;
}

.sa-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 4vw, 3.6rem);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 1.25rem;
}

.sa-title em {
    font-style: italic;
    color: #E3B23C;
}

.sa-subtitle {
    font-size: 1.05rem;
    color: #94a3b8;
    line-height: 1.7;
    margin: 0;
    max-width: 480px;
}

/* Stats en el hero */
.sa-hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.sa-stat {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.sa-stat:hover {
    border-color: rgba(227,178,60,0.4);
    background: rgba(227,178,60,0.06);
}

.sa-stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: #E3B23C;
    line-height: 1;
}

.sa-stat-num sup {
    font-size: 1.2rem;
    vertical-align: super;
}

.sa-stat-lbl {
    font-size: 0.82rem;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* ── GRID PRINCIPAL ── */
.sa-content-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2rem;
    padding: 3rem 0;
    align-items: start;
}

/* Tarjeta Historia */
.sa-story-card,
.sa-values-card {
    background: rgba(255,255,255,0.97);
    border-radius: 20px;
    padding: 2.25rem;
    color: #1e293b;
    box-shadow: 0 24px 56px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.2);
}

.sa-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E3A8A;
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #E3B23C;
}

/* Imagen con caption */
.sa-story-img-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    height: 200px;
}

.sa-story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sa-img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(13,27,42,0.88));
    padding: 1.5rem 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
}

.sa-caption-sub {
    color: #E3B23C;
    font-size: 0.75rem;
}

.sa-body-text {
    font-size: 0.97rem;
    line-height: 1.7;
    color: #374151;
    margin: 0 0 1rem;
}

.sa-body-text strong { color: #1E3A8A; font-weight: 600; }
.sa-body-text:last-of-type { margin-bottom: 1.25rem; }

.sa-highlights {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}

.sa-hl {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: #374151;
}

.sa-hl i {
    color: #E3B23C;
    width: 16px;
    flex-shrink: 0;
}

.sa-hl strong { color: #1E3A8A; }

/* Valores */
.sa-values-grid {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.sa-value {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: transform 0.25s ease, border-color 0.25s ease;
    will-change: transform;
}

.sa-value:hover {
    transform: translateX(4px);
    border-color: rgba(227,178,60,0.5);
}

.sa-v-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #1E3A8A 0%, #2563eb 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sa-v-icon i {
    color: #fff;
    font-size: 1rem;
}

.sa-v-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sa-v-text strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.sa-v-text span {
    font-size: 0.82rem;
    color: #64748b;
}

/* ── TIMELINE BAND ── */
.sa-timeline-band {
    position: relative;
    z-index: 1;
    background: rgba(0,0,0,0.25);
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 3rem 0;
}

.sa-timeline-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #E3B23C;
    margin: 0 0 2rem;
    text-align: center;
}

.sa-timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: relative;
}

/* Línea horizontal continua */
.sa-timeline::before {
    content: '';
    position: absolute;
    top: 18px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #E3B23C 15%, #E3B23C 85%, transparent);
}

.sa-tl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 0 0.5rem;
}

.sa-tl-year {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #E3B23C;
    line-height: 1;
}

.sa-tl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #E3B23C;
    border: 2px solid #0d1b2a;
    box-shadow: 0 0 0 3px rgba(227,178,60,0.3);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.sa-tl-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.5;
    max-width: 130px;
}

/* ── CREDENTIALS BAND ── */
.sa-cred-band {
    position: relative;
    z-index: 1;
    padding: 2.5rem 0;
    background: rgba(255,255,255,0.02);
}

.sa-cred-title {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0 0 1.5rem;
    text-align: center;
}

.sa-cred-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
}

.sa-cred {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 100px;
    font-size: 0.82rem;
    color: #cbd5e1;
    font-weight: 500;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.sa-cred:hover {
    background: rgba(227,178,60,0.12);
    border-color: rgba(227,178,60,0.4);
    color: #E3B23C;
}

.sa-cred i {
    color: #E3B23C;
    font-size: 0.78rem;
}

/* ── RESPONSIVE 1024px ── */
@media (max-width: 1024px) {
    .sa-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .sa-subtitle { max-width: 100%; }
    .sa-hero-stats { grid-template-columns: repeat(4, 1fr); }
    .sa-content-grid { grid-template-columns: 1fr; }
    .sa-timeline { grid-template-columns: 1fr; gap: 1.5rem; }
    .sa-timeline::before { display: none; }
    .sa-tl-item { flex-direction: row; text-align: left; align-items: flex-start; gap: 1rem; }
    .sa-tl-year { min-width: 55px; }
    .sa-tl-desc { max-width: none; }
}

@media (max-width: 768px) {
    .sa-hero { padding: 3rem 0 2.5rem; }
    .sa-hero-stats { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .sa-stat-num { font-size: 2rem; }
    .sa-content-grid { padding: 2rem 0; }
    .sa-story-card, .sa-values-card { padding: 1.75rem; }
    .sa-ghost { font-size: 10rem; }
}

@media (max-width: 480px) {
    .sa-hero-stats { grid-template-columns: 1fr 1fr; }
    .sa-stat { padding: 1.1rem 0.9rem; }
    .sa-stat-num { font-size: 1.7rem; }
    .sa-timeline-band { padding: 2rem 0; }
    .sa-cred-band { padding: 2rem 0; }
}