/* 1. Variables globales: Guardamos nuestros colores corporativos */
:root {
    --color-principal: #5B9BD5; /* El azul solicitado para Assotec */
    --color-secundario: #2C3E50; /* Un gris azulado oscuro muy elegante para contrastes */
    --color-fondo: #F8F9FA; /* Un gris extra claro para que el blanco de las tarjetas resalte */
}

/* Esto hace que el salto hacia el ID sea una animación de deslizamiento suave, no un corte brusco */
html {
    scroll-behavior: smooth;
}

/* 2. Configuración del cuerpo de la página */
body {
    background-color: var(--color-principal);
    display: flex;
    flex-direction: column;
    padding-top: 82px;
    min-height: 100vh; /* Obliga a que el cuerpo mida al menos el 100% de la pantalla, empujando el footer abajo */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía limpia y profesional */
}

main {
    background-color: var(--color-fondo);
    flex-grow: 1; /* Esto asegura que el main ocupe el espacio restante y empuje el footer abajo */
}

/* 3. Estilos del Menú (Navbar) */
.custom-navbar {
    background-color: var(--color-principal);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    /* Le decimos que cualquier cambio de tamaño o padding dure 0.3s y sea suave */
    transition: padding 0.3s ease, background-color 0.3s ease;
    padding-top: 6px;
    padding-bottom: 6px;
}

.custom-navbar .nav-link {
    color: rgba(0, 0, 0, 0.85); /* Blanco un poco transparente para los enlaces inactivos */
    font-weight: 500;
    margin-left: 15px;
    transition: color 0.3s ease; /* Efecto suave al pasar el cursor */
}

.custom-navbar .nav-link:hover,
.custom-navbar .nav-link.active {
    color: #ffffff; /* Blanco puro cuando paso el mouse o estoy en la página actual */
    font-weight: bold;
}

/* 4. Estilos del Pie de Página (Footer) */
.custom-footer {
    background-color: var(--color-secundario);
    margin-top: auto; /* Esta línea es la magia que lo pega al final de la pantalla */
}

/* =========================================
   5. Ajustes de Logos (Header y Footer)
   ========================================= */
.logo-header {
    max-height: 60px; /* Logo inicial un poco más grande */
    width: auto;
    transition: max-height 0.1s ease; /* Transición suave para cuando se encoja */
}

.navbar-shrink {
    padding-top: 3px; /* Reducimos el colchón de arriba */
    padding-bottom: 3px; /* Reducimos el colchón de abajo */
    background-color: rgba(91, 155, 213, 0.95); /* Opcional: hacemos que el azul sea un 5% transparente al hacer scroll */
}

.navbar-shrink .logo-header {
    max-height: 35px; /* Achicamos el logo cuando tenga la clase shrink */
}

.logo-footer {
    max-height: 70px;
    width: auto;
    /* TRUCO PIXIE: Si el logo que tienes es de color negro, 
       descomenta (quita los /*) la línea de abajo para volverlo blanco en el footer oscuro */
    /* filter: brightness(0) invert(1); */ 
}

/* =========================================
   6. Estilos de Enlaces del Footer
   ========================================= */
.footer-links li {
    margin-bottom: 0.5rem; /* Espaciado entre cada link */
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7); /* Blanco con 60% de opacidad */
    text-decoration: none; /* Quitamos la línea de subrayado típica de HTML */
    transition: color 0.3s ease, padding-left 0.3s ease; /* Preparamos la animación */
}

/* Efecto Hover: Qué pasa cuando el usuario pasa el mouse por encima */
.footer-links a:hover {
    color: #ffffff; /* Se vuelve blanco puro */
    padding-left: 8px; /* ¡Magia! Se desplaza un poquito a la derecha indicando que es clickeable */
}

/* =========================================
   7. Estilos de la Página de Inicio (Hero)
   ========================================= */

/* Estructura del banner gigante */
/* Estructura del banner gigante con Imagen + Overlay */
.hero-section {
    /* TRUCO PIXIE: Apilamos el gradiente rgba() SOBRE la imagen url() */
    background: 
        /* Capa 1 (Arriba): Gradiente semi-transparente. 
           91, 155, 213 es el RGB de tu #5B9BD5. El 0.85 es la opacidad (85%)
           44, 62, 80 es el RGB de tu #2C3E50. El 0.9 es la opacidad (90%) */
        linear-gradient(135deg, rgba(91, 155, 213, 0.85) 0%, rgba(44, 62, 80, 0.7) 100%),
        /* Capa 2 (Abajo): La fotografía */
        url('assets/img/heroimg.webp');
    
    /* Le decimos a la imagen que cubra todo el espacio sin deformarse */
    background-size: cover;
    /* Centramos la imagen para que siempre se vea la mejor parte sin importar la pantalla */
    background-position: center center;
    /* Le da un efecto sutil donde la imagen no se repite si la pantalla es muy grande */
    background-repeat: no-repeat;
    
    min-height: 70vh; 
    padding: 100px 0; 
}

/* Sombra suave para que el texto resalte sobre el fondo de color */
.shadow-text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Estilo personalizado para el botón del Hero */
.hero-btn {
    color: var(--color-secundario); /* Texto azul oscuro */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones fluidas */
}

/* Efecto hover: El botón "flota" un poco cuando pasas el cursor */
.hero-btn:hover {
    transform: translateY(-3px); /* Se mueve 3 pixeles hacia arriba */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Sombra más grande debajo */
    color: var(--color-principal); /* El texto cambia a azul claro */
}

/* =========================================
   8. Estilos de Tarjetas de Servicio (Inicio)
   ========================================= */
.service-card {
    /* Le decimos que cualquier cambio de estado dure 0.3 segundos y sea suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px; /* Bordes un poco más redondeados */
}

/* Efecto Hover: Cuando el cursor toca la tarjeta */
.service-card:hover {
    transform: translateY(-10px); /* Mueve la tarjeta 10px hacia arriba en el eje Y */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important; /* Crea una sombra más grande y difusa debajo */
}

/* Estilo para el botón de "Ver Todos los Servicios" */
.custom-outline-btn {
    color: var(--color-principal);
    border-color: var(--color-principal);
    transition: all 0.3s ease;
    border-width: 2px; /* Un borde más grueso */
}

.custom-outline-btn:hover {
    background-color: var(--color-principal);
    color: white; /* Invierte los colores al pasar el mouse */
}

/* =========================================
   9. Estilos de la Página Nosotros
   ========================================= */

/* Efecto Marca de Agua (Textura sutil de fondo) */
.nosotros-bg {
    background: 
        /* Usamos el color de fondo gris claro, pero con 96% de opacidad para tapar casi toda la foto */
        linear-gradient(rgba(226, 232, 240, 0.96), rgba(226, 232, 240, 0.90)),
        /* Reutilizamos la imagen del inicio como textura */
        url('assets/img/nosotrosbg.webp');
    
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* TRUCO PIXIE: Efecto Parallax (El fondo se queda quieto al hacer scroll) */
}

/* =========================================
   10. Tarjetas de Servicios Horizontales (Patrón Z) Página Servicios General
   ========================================= */
.service-horizontal-card {
    background-color: #ffffff;
    border-radius: 15px; /* Bordes redondeados de la tarjeta general */
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Sombra muy elegante */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* TRUCO PIXIE: Margen de frenado para que el header fixed-top no tape la tarjeta */
    scroll-margin-top: 120px;
}

.service-horizontal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

/* La magia para tu imagen circular */
.service-circle-img {
    width: 280px;  /* Ancho fijo */
    height: 280px; /* Alto fijo igual al ancho = Cuadrado */
    object-fit: cover; /* Recorta lo que sobre sin aplastar la foto */
    border-radius: 50%; /* Corta el cuadrado en un círculo perfecto */
    border: 5px solid var(--color-fondo); /* Un pequeño marco gris clarito */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Sombra para que el círculo resalte */
}

/* La línea punteada para las marcas que dibujaste en tu boceto */
.brands-footer {
    border-top: 2px dashed #dee2e6; /* border dashed es la línea punteada */
    padding-top: 15px;
    margin-top: 20px;
}

/* =========================================
   11. Estilos de la Página Servicios
   ========================================= */

/* Efecto Marca de Agua (Textura sutil de fondo) */
.servicios-bg {
    background: 
        /* Usamos el color de fondo gris claro, pero con 96% de opacidad para tapar casi toda la foto */
        linear-gradient(rgba(226, 232, 240, 1), rgba(226, 232, 240, 1)),
        /* Reutilizamos la imagen del inicio como textura */
        url('assets/img/nosotrosbg.webp');
    
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* TRUCO PIXIE: Efecto Parallax (El fondo se queda quieto al hacer scroll) */
}

/* =========================================
   12. Mega Menú de Bootstrap
   ========================================= */

/* 1. Desatamos el dropdown de su botón padre */
.has-megamenu {
    position: static !important; 
}

/* 2. Le damos el 100% de ancho a la caja que cae */
.megamenu {
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 0;
    border: none;
    border-radius: 0 0 15px 15px; /* Redondeamos solo las esquinas de abajo */
    padding: 30px 0;
    background-color: #ffffff;
}

/* 3. Estilos limpios para los links internos del menú */
.mega-link {
    color: var(--color-secundario);
    padding: 8px 0;
    background-color: transparent !important;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

/* Efecto hover: Los links se mueven a la derecha al tocarlos */
.mega-link:hover {
    color: var(--color-principal);
    padding-left: 10px;
    font-weight: 500;
}

/* TRUCO PIXIE: En computadoras (pantallas grandes), hacemos que el menú 
   se abra solo pasando el mouse, sin necesidad de hacer clic. */
@media all and (min-width: 992px) {
    .custom-navbar .has-megamenu:hover .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        margin-top: 0;
    }
}

/* =========================================
   13. Botón Flotante de WhatsApp
   ========================================= */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px; /* Distancia desde abajo */
    right: 30px;  /* Distancia desde la derecha */
    background-color: #25d366; /* Verde oficial de WhatsApp */
    color: #FFF;
    border-radius: 50%; /* Círculo perfecto */
    text-align: center;
    font-size: 30px; /* Tamaño del icono */
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Asegura que flote por encima de todo el contenido y el footer */
    
    /* Flexbox para centrar el icono perfectamente en el medio del círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    
    text-decoration: none; /* Quitamos la línea de enlace */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Efecto hover: El botón crece un poquito y la sombra se oscurece */
.whatsapp-float:hover {
    color: #FFF;
    background-color: #128C7E; /* Un verde un poco más oscuro al tocarlo */
    transform: scale(1.1); /* Escala al 110% de su tamaño */
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3);
}