/* 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 */
/* El contenedor principal */
.hero-section {
    position: relative; /* Necesario para anclar el video dentro de esta caja */
    min-height: 70vh; 
    padding: 140px 0 100px 0; 
    overflow: hidden; /* Esto recorta cualquier pedazo de video que se salga de la caja */
    /* ¡OJO! Ya no hay 'background' aquí, porque el fondo ahora es el video */
}

/* CAPA 0: El Video */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    /* Este transform mágico hace que el centro del video SIEMPRE sea el centro de la pantalla */
    transform: translateX(-50%) translateY(-50%); 
    object-fit: cover; /* Evita que el video se aplaste o deforme */
    z-index: 0; /* Al fondo de todo */
}

/* CAPA 1: El Filtro Polarizado Azul */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Nuestro clásico degradado corporativo */
    background: linear-gradient(135deg, rgba(91, 155, 213, 0.85) 0%, rgba(44, 62, 80, 0.9) 100%);
    z-index: 1; /* Por encima del video, pero debajo de las letras */
}

/* 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 */
    aspect-ratio: 1 / 1; /* REGLA DE ORO: Fuerza proporción 1 a 1 siempre */
    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);
}

/* =========================================
   14. Carrusel Infinito de Clientes (Marquee)
   ========================================= */

/* 1. La ventana visible: Oculta los logos que se salen de la pantalla */
.logos-slider {
    overflow: hidden;
    padding: 20px 0;
    white-space: nowrap;
    position: relative;
    background: #ffffff;
}

/* Sombra degradada a los costados para que los logos no "aparezcan de golpe" */
.logos-slider::before,
.logos-slider::after {
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    content: "";
    z-index: 2;
    pointer-events: none;
}

.logos-slider::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
}

.logos-slider::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
}

/* 2. La pista que se mueve: Animación continua */
.logos-track {
    display: inline-flex;
    align-items: center;
    gap: 60px; /* Espacio entre cada logo */
    animation: scrollLogos 25s linear infinite; /* 25 segundos por vuelta, suave e infinito */
}

/* Pausar el movimiento si el usuario pone el mouse encima */
.logos-slider:hover .logos-track {
    animation-play-state: paused;
}

/* 3. Estilo individual de cada logo */
.cliente-logo {
    height: 45px; /* Altura uniforme para todos */
    width: auto;
    object-fit: contain;
    filter: grayscale(100%); /* Efecto elegante: blanco y negro */
    opacity: 0.6;            /* Ligeramente transparente */
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* Al pasar el mouse, el logo cobra su color original y crece un poco */
.cliente-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

/* 4. La matemática del movimiento en bucle */
@keyframes scrollLogos {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%); /* Se desplaza la mitad exacta (porque duplicamos la lista) */
    }
}

/* =========================================
   15. Galería de Proyectos por Servicio (Puede eliminarse dependiendo de la desición de servicios)
   ========================================= */

/* Contenedor individual de cada foto en la galería */
.proyecto-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    background-color: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.proyecto-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

/* La imagen dentro de la tarjeta: forzamos proporción 4:3 uniforme */
.proyecto-img {
    width: 100%;
    height: 220px;
    object-fit: cover; /* Evita que la foto se deforme */
    transition: transform 0.5s ease;
}

/* Efecto de zoom suave al pasar el mouse por encima */
.proyecto-item:hover .proyecto-img {
    transform: scale(1.08);
}

/* Capa oscura con icono de lupa que aparece en el hover */
.proyecto-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 62, 80, 0.6); /* Azul oscuro translúcido */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 28px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.proyecto-item:hover .proyecto-overlay {
    opacity: 1;
}

/* ========================================= 
   16. Visor Lightbox Personalizado (In-Page) (Puede eliminarse dependiendo de la desición de servicios)
   ========================================= */

/* Fondo oscuro que cubre toda la pantalla */
.custom-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.92); /* Azul oscuro casi negro muy elegante */
    z-index: 9999; /* Asegura que esté por encima de TODO (menú, whatsapp, etc.) */
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(8px); /* Efecto moderno de desenfoque en el fondo */
}

/* Cuando se activa el visor */
.custom-lightbox.active {
    display: flex;
    opacity: 1;
}

/* Contenedor de la imagen */
.lightbox-content {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* La imagen ampliada */
#lightbox-img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    object-fit: contain;
    transform: scale(0.92);
    transition: transform 0.3s ease;
}

.custom-lightbox.active #lightbox-img {
    transform: scale(1); /* Efecto suave de zoom al abrir */
}

/* Botón "X" en la esquina superior derecha */
.lightbox-close {
    position: absolute;
    top: 25px;
    right: 35px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: #ffffff;
    font-size: 34px;
    line-height: 1;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    z-index: 10000;
}

/* Efecto hover: se vuelve rojo y gira un poco */
.lightbox-close:hover {
    background-color: #ef4444;
    border-color: #ef4444;
    transform: rotate(90deg);
}

/* =========================================
   17. Fondo Dinámico del Hero de Servicios (Puede eliminarse dependiendo de la desición de servicios)
   ========================================= */

.hero-service-section {
    min-height: 380px;
    background-color: var(--color-secundario); /* Respaldo mientras carga la imagen */
}

/* Capa 0: Fondo con animación suave */
.hero-service-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
    transition: background-image 1.2s ease-in-out;
}

/* Capa 1: Filtro de contraste oscuro */
.hero-service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.88) 0%, rgba(15, 23, 42, 0.92) 100%);
    z-index: 1;
}

/* =========================================
   18. Portafolio Visual Puro (Showcase) (Puede eliminarse dependiendo de la desición de servicios)
   ========================================= */

.portfolio-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: #0f172a;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.18);
}

.portfolio-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.portfolio-card:hover img {
    transform: scale(1.06);
    opacity: 0.85;
}

/* Etiqueta flotante inferior con el nombre del trabajo */
.portfolio-badge-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 15px;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95), transparent);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
}

/* =========================================
   19. Tarjeta del Equipo Humano (Contacto)
   ========================================= */

.team-contact-card {
    border-radius: 20px;
    overflow: hidden;
    background-color: #ffffff;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Contenedor de la imagen */
.team-img-wrapper {
    position: relative;
    width: 100%;
    /* En PC mantenemos una altura proporcional a la columna del mapa */
    height: 320px; 
    overflow: hidden;
    background-color: var(--color-secundario);
}

.team-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que la foto se distorsione en cualquier pantalla */
    object-position: center top; /* Prioriza el encuadre en los rostros */
    transition: transform 0.5s ease;
}

.team-contact-card:hover .team-img-wrapper img {
    transform: scale(1.03); /* Efecto sutil al interactuar */
}

/* Insignia sobre la foto */
.team-badge {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    backdrop-filter: blur(6px);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Ajuste específico para pantallas móviles (Android / iOS) */
@media (max-width: 767.98px) {
    .team-img-wrapper {
        height: 230px; /* Reducimos altura para no empujar los teléfonos muy abajo */
    }
}