/* ==========================================================================
   RESET DE MÁRGENES (Para la estructura general)
   ========================================================================== */
html, body { 
    margin: 0 !important; 
    padding: 0 !important; 
}
.chatbot-hero { 
    margin-top: 0 !important; 
}
.cta-section { 
    margin-bottom: 0 !important; 
}

/* ==========================================================================
   SECCIÓN DE TECNOLOGÍA (Fondo Oscuro)
   ========================================================================== */
.tech-section { 
    background-color: #111111; 
    color: #ffffff; 
    padding: 80px 5%; 
    text-align: center; 
}
.tech-section h2 { 
    color: #fece1a; 
    font-size: 2.5rem; 
    margin-bottom: 10px; 
}
.tech-section > p { 
    color: #aaaaaa; 
    font-size: 1.1rem; 
    max-width: 700px; 
    margin: 0 auto 50px auto; 
}
.tech-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; 
    max-width: 1000px; 
    margin: 0 auto; 
}
.tech-card { 
    background-color: #1a1a1a; 
    padding: 40px 30px; 
    border-radius: 15px; 
    border-top: 4px solid #fece1a; 
    text-align: left; 
    transition: transform 0.3s; 
}
.tech-card:hover { 
    transform: translateY(-5px); 
}
.tech-card i { 
    font-size: 2.5rem; 
    color: #fece1a; 
    margin-bottom: 20px; 
}
.tech-card h3 { 
    font-size: 1.5rem; 
    margin-bottom: 15px; 
    color: #ffffff; 
}
.tech-card p { 
    color: #cccccc; 
    line-height: 1.6; 
}
.tech-logos { 
    display: flex; 
    gap: 15px; 
    margin-top: 20px; 
    font-size: 2rem; 
    color: #555; 
}

/* ==========================================================================
   SECCIÓN DE CLIENTES / CASOS DE ÉXITO (Fondo Claro - SLIDER)
   ========================================================================== */
.clients-section { 
    background-color: #f8f9fa; 
    padding: 80px 5%; 
    text-align: center; 
}
.clients-section h2 { 
    color: #1a1a1a; 
    font-size: 2.5rem; 
    margin-bottom: 10px; 
}
.clients-section > p { 
    color: #666666; 
    font-size: 1.1rem; 
    max-width: 700px; 
    margin: 0 auto 50px auto; 
}

/* Modificamos la tarjeta para que se adapte al Slider */
.client-card { 
    background: #ffffff; 
    width: 100%; /* Ahora toma el ancho que el slider le dé */
    max-width: 320px; /* Evita que se vea gigante en pantallas muy anchas */
    margin: 10px auto 40px auto; /* Centrado y con margen abajo para los puntitos */
    padding: 30px; 
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    transition: all 0.3s; 
    border: 1px solid #eeeeee; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    box-sizing: border-box;
}
.client-card:hover { 
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); 
    border-color: #fece1a; 
    transform: translateY(-5px); 
}

/* Espacio Circular para el Logo */
.client-logo-wrapper { 
    width: 120px; 
    height: 120px; 
    background: #fafafa; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 20px; 
    overflow: hidden; 
    border: 2px solid #f1f1f1; 
}
.client-logo-wrapper img { 
    width: 80%; 
    height: 80%; 
    object-fit: contain; 
}
.client-logo-wrapper i { 
    font-size: 3rem; 
    color: #cccccc; 
} 

.client-card h3 { 
    color: #1a1a1a; 
    font-size: 1.2rem; 
    margin-bottom: 15px; 
    text-align: center; 
}
.client-socials { 
    display: flex; 
    gap: 15px; 
    margin-top: auto; 
}
.client-socials a { 
    width: 40px; 
    height: 40px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    background: #1a1a1a; 
    color: #fece1a; 
    font-size: 1.2rem; 
    transition: background 0.3s; 
    text-decoration: none; 
}
.client-socials a:hover { 
    background: #fece1a; 
    color: #1a1a1a; 
}

/* ==========================================================================
   ESTILOS PERSONALIZADOS PARA EL SLIDER SPLIDE (Puntitos amarillos)
   ========================================================================== */
.splide-clientes .splide__pagination {
    bottom: -10px; 
}
.splide-clientes .splide__pagination__page {
    background: #cccccc; 
    width: 10px;
    height: 10px;
    margin: 3px;
}
.splide-clientes .splide__pagination__page.is-active {
    background: #fece1a; 
    transform: scale(1.4);
}

/* ==========================================================================
   RESPONSIVE (Móviles y Tablets)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Ajuste de interlineado (line-height) para todos los títulos principales */
    h1, h2, .chatbot-hero h1, .tech-section h2, .clients-section h2 {
        line-height: 1.4 !important;
    }

    /* Reducimos un poco el tamaño de las fuentes para que no rompan la pantalla */
    .tech-section h2, .clients-section h2 {
        font-size: 2rem;
    }
    
    .tech-section > p, .clients-section > p {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    /* Reducimos el padding general para darle más espacio al contenido */
    .tech-section, .clients-section {
        padding: 50px 5%;
    }

    /* Forzamos a que las tarjetas de tecnología sean de una sola columna */
    .tech-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Ajuste de márgenes internos de la tarjeta tecnológica en celular */
    .tech-card {
        padding: 30px 20px;
    }
}