/* CONFIGURACI�N GLOBAL */
body {
    font-family: var(--font-body);
    padding-top: 70px;
    /* Espacio para el header fijo */
    color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
    font-family: var(--font-heading);
}

/* UTILIDADES DIN�MICAS */
/* Sobreescribimos el bot�n primario de Bootstrap para usar NUESTRO color */
.btn-cta,
.btn-primary,
.btn-contacto {
    background-color: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    /* Área de clic más amplia */
    border-radius: 0.375rem;
    /* Borde corporativo, adiós al estilo píldora */
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-cta:hover,
.btn-primary:hover,
.btn-contacto:hover {
    filter: brightness(0.9);
    transform: translateY(-2px);
    box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15);
    color: #fff;
}

/* Estilos de Navegaci�n */
.nav-link {
    color: #555;
    font-weight: 500;
    margin-right: 1rem;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-primario);
}

/* Footer Ajustes */
footer a:hover {
    color: var(--color-primario) !important;
    text-decoration: none;
}

/* --- HERO SECTION --- */
.hero-section {
    /* Altura: 100% del alto de la ventana menos el header */
    min-height: calc(100vh - 70px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Tipograf�a Hero mejorada */
.hero-section h1 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Sombra para legibilidad */
    letter-spacing: -1px;
}

/* Animaci�n de entrada simple (Fade Up) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    /* Inicia invisible */
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

/* Bot�n outline blanco espec�fico para fondos oscuros */
.btn-outline-light {
    border-width: 2px;
    font-weight: 600;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.btn-outline-light:hover {
    color: var(--color-primario);
    /* Al pasar el mouse, texto del color de la marca */
    background-color: #fff;
    border-color: #fff;
}

/* --- SECCI�N NOSOTROS --- */
#nosotros {
    overflow: hidden;
    /* Evita que sombras grandes generen scroll horizontal */
}

/* Ajuste fino para la tipograf�a de la lista */
#nosotros ul li span {
    color: #555;
    font-weight: 500;
}

/* Efecto hover sutil en la imagen */
#nosotros img {
    transition: transform 0.4s ease;
}

#nosotros img:hover {
    transform: scale(1.02);
    /* Peque�o zoom al pasar el mouse */
}

/* --- SECCI�N SERVICIOS --- */

.service-card,
.b2b-card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 0.5rem !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover,
.b2b-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Estilo del c�rculo del icono */
.icon-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--color-primario);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Al hacer hover en la tarjeta, el c�rculo rota ligeramente */
.service-card:hover .icon-circle {
    background-color: var(--color-secundario);
    transform: scale(1.3);
}

.card-title {
    color: #333;
}

/* --- SECCI�N GALERIA --- */
/* 1. Configuraci�n de las im�genes del carrusel */
#galeria .carousel-item img {
    height: 400px;
    /* Altura fija para escritorio */
    object-fit: cover;
    /* IMPORTANTE: Recorta la imagen para llenar el espacio sin deformarla */
    object-position: center;
    /* Centra la imagen al recortar */
}

/* 2. Personalizaci�n de los controles (flechas) para que se noten m�s */
#galeria .carousel-control-prev,
#galeria .carousel-control-next {
    width: 5%;
    /* Hacemos la zona de clic m�s angosta para no tapar la foto */
}

/* 3. RESPONSIVE: Ajuste para celulares (Pantallas menores a 768px) */
@media (max-width: 768px) {
    #galeria .carousel-item img {
        height: 300px;
        /* En celular reducimos la altura para que no ocupe toda la pantalla */
    }

    #galeria h3 {
        font-size: 1.5rem;
        /* Ajustamos el tama�o del t�tulo */
    }
}

/* --- SECCI�N CLIENTES --- */

.client-logo-container {
    transition: transform 0.3s ease;
}

.client-logo {
    max-height: 60px;
    /* Forzamos una altura m�xima para que ninguno sea gigante */
    width: auto;
    /* El ancho se ajusta solo */
    /* EL TRUCO VISUAL: */
    filter: grayscale(100%);
    /* Todo a blanco y negro */
    opacity: 0.6;
    /* Un poco transparente para que no compita con el contenido */
    transition: all 0.4s ease;
}

/* Estado Hover (al pasar el mouse) */
.client-logo:hover {
    filter: grayscale(0%);
    /* Vuelve al color original */
    opacity: 1;
    /* Opacidad total */
    transform: scale(1.3);
    /* Zoom sutil */
    cursor: pointer;
}

/* --- SECCION TRABAJA CON NOSOTROS Y CONTACTANOS --- */

/* Ajuste bot�n en secci�n Trabaja con Nosotros */
#trabaja .btn-light {
    color: var(--color-primario) !important;
    /* Texto del color de la marca */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Formulario Moderno */
.form-control:focus {
    box-shadow: none;
    border: 1px solid var(--color-primario) !important;
    /* Borde de color al escribir */
    background-color: #fff !important;
}

/* Iconos de contacto redondos */
#contacto .rounded-circle {
    transition: all 0.3s ease;
}

#contacto .d-flex:hover .rounded-circle {
    background-color: var(--color-primario) !important;
}

#contacto .d-flex:hover i {
    color: white !important;
    /* Icono se vuelve blanco al pasar el mouse */
}

/* ==========================================
   AJUSTES RESPONSIVOS (MOBILE-FIRST)
   ========================================== */
@media (max-width: 768px) {

    /* Reducimos el título principal para que no desborde */
    .hero-section h1.display-3 {
        font-size: 2.5rem !important;
        line-height: 1.2;
    }

    /* El subtítulo debe ser más fácil de leer en movimiento */
    .hero-section p.lead.fs-4 {
        font-size: 1.15rem !important;
    }

    /* Damos más respiro a las secciones en móvil */
    section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}