:root {
    --azul-oscuro: #2c3e50;
    --azul-boton: #3f51b5; 
    --gris-fondo: #f4f4f4;
    --blanco: #ffffff;
    --negro-texto: #1a1a1a;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    color: var(--negro-texto);
}

html {
    scroll-behavior: smooth; 
    scroll-padding-top: 120px; 
}

/*--------------------> Header <-----------------*/
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10%;
    background: var(--blanco);
    /*Para que baje junto con la pagina*/
    position: sticky;
    top: 0; /* Le indica que se "pegue" en la parte más alta de la pantalla */
    z-index: 1000; /* CRÍTICO: Asegura que el menú pase POR ENCIMA de las fotos y no por debajo */
    transition: background-color 0.4s ease, padding 0.4s ease;
}

header img { height: 80px; }

/* --- CLASE ACTIVA CUANDO HACES SCROLL --- */
header.scrolled {
    background-color: #222222; /* Tono gris oscuro / casi negro */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Sombra más fuerte */
    padding: 10px 5%; /* Opcional: hace la barra un poco más delgada al bajar */
}

/* Letras blancas cuando hace scroll */
header.scrolled nav a {
    color: #ffffff; 
}

/* Color azul al pasar el ratón cuando el fondo es oscuro */
header.scrolled nav a:hover {
    color: #4dabf7; /* Un azul un poco más brillante para que contraste */
}

/* El truco mágico para el logo: Convertirlo a blanco */
header.scrolled .logo img {
    /* Esto toma tu logo negro/gris y lo pinta completamente de blanco */
    filter: brightness(0) invert(1); 
    height: 70px; /* Opcional: hace el logo un poco más pequeño al bajar */
}

.logo {
    margin-bottom: 5px;   /* Espacio entre logo y menú */
}


nav ul {
    display: flex;
    list-style: none;
    gap: 65px;
}

nav a {
    text-decoration: none;
    color: var(--negro-texto);
    font-weight: 600;       /* Texto del menú un poco más grueso */
    font-size: 1rem;     /* Un poco más grande */
    text-transform: uppercase; /* Opcional, para más impacto industrial */
    transition: color 0.3s;
}

nav a:hover { color: var(--azul-boton); }

/* --- Estilos del botón hamburguesa (Oculto en escritorio) --- */
.menu-hamburguesa {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.menu-hamburguesa span {
    width: 30px;
    height: 3px;
    background-color: var(--negro-texto);
    transition: 0.3s;
}

/* --- VISTA MÓVIL (Media Query) --- */
@media (max-width: 768px) {
    header {
        padding: 10px 5%; /* Menos padding lateral en móvil */
    }

    .menu-hamburguesa {
        display: flex; /* Mostrar el botón en móvil */
        z-index: 1001;
    }

    nav {
        display: none; /* Ocultar el menú por defecto */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--blanco);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    /* Clase que activaremos con JavaScript */
    nav.active {
        display: block;
    }

    nav ul {
        flex-direction: column; /* Lista vertical */
        gap: 0;
        padding: 0;
    }

    nav li {
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
    }

    nav a {
        display: block;
        padding: 20px;
    }

    /* Ajuste para cuando el header tiene scroll (fondo oscuro) */
    header.scrolled .menu-hamburguesa span {
        background-color: #ffffff;
    }
    
    header.scrolled nav {
        background-color: #222222;
    }
}

/*--------------------> Hero Section <-----------------*/
.hero {
    height: 60vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                url('../Imagenes principal/Imagen_principal.JPG'); 
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 10%;
    color: var(--blanco);
}

.hero-content {
    max-width: 850px;       
}

.hero-content h1 {
    font-size: 3.8rem;     
    font-weight: 800;       
    margin-bottom: 25px;
    margin-top: 2px;
    line-height: 1.1;
    letter-spacing: -1px;  
}

.hero-content p {
    font-size: 1.3rem;     
    font-weight: 400;
    max-width: 700px;
    margin-top: 50px;
    margin-bottom: 35px;
    margin-left: 10px;
    margin-right: 10px;
    opacity: 0.9;
}

.btn-primary {
    display: inline-block;
    background-color: var(--azul-boton);
    color: var(--blanco);
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.btn-primary:hover {
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .hero {
        padding-top: 100px; 
        min-height: 80vh;   
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center; 
    }

    .hero h1 {
        font-size: 1.8rem;   
        line-height: 1.2;
        margin-bottom: 15px;
        padding: 0 5%;       
    }

    .hero p {
        font-size: 1rem;
        padding: 0 10%;
    }

    .hero .btn-primary {
        padding: 12px 25px;
        font-size: 0.9rem;
    }
}

/*--------------------> Servicios Section <-----------------*/
.servicios {
    padding: 70px 4%; /* Espacio generoso arriba y abajo */
    background-color: var(--blanco);
    text-align: center;
}

.titulo-seccion {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--negro-texto);
    margin-bottom: 60px;
    letter-spacing: 2px;
}

/* Grid para acomodar las tarjetas */
.grid-servicios {
    display: grid;
    /* Esto crea columnas automáticas que no midan menos de 200px */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px; /* Espacio entre las tarjetas */
}

/* --- ESTILOS DE LAS TARJETAS DE SERVICIOS --- */

.tarjeta-servicio {
    /* (Mantén tus estilos actuales de fondo, sombras, etc. aquí) */
    
    position: relative; /* ¡MUY IMPORTANTE! Esto ancla el cuadro explicativo a la tarjeta */
    overflow: hidden;   /* Esconde cualquier cosa que se salga del borde de la tarjeta */
    cursor: pointer;    /* Cambia la flecha por una "manita" para indicar que es interactivo */
}

/* --- EL CUADRO EXPLICATIVO (Oculto por defecto) --- */
.info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cubre toda la foto */
    background-color: rgba(30, 41, 59, 0.9); /* Un tono azul muy oscuro y semi-transparente */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    box-sizing: border-box;
    
    /* Efecto de animación: Empieza invisible y un poco "caído" */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease; /* Transición súper suave de 0.4 segundos */
}

/* El texto dentro del cuadro explicativo */
.info-overlay p {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    margin: 0;
}

/* --- EL EFECTO: Al pasar el cursor encima (:hover) --- */
.tarjeta-servicio:hover .info-overlay {
    opacity: 1; 
    transform: translateY(0); 
}

.tarjeta-servicio img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.tarjeta-servicio:hover img {
    transform: scale(1.05); 
}

.tarjeta-servicio {
    background: var(--blanco);
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); 
    border: 1px solid #f0f0f0; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-servicio:hover {
    transform: translateY(-10px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.12); 
}

.tarjeta-servicio img {
    width: 100%;
    height: 220px;
    object-fit: cover; 
    display: block;
}

/* Estilos para el texto del servicio */
.tarjeta-servicio h3 {
    padding: 25px 15px;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--negro-texto);
    text-transform: uppercase; 
}

/*--------------------> Nosotros Section <-----------------*/
.nosotros {
    padding: 80px 5%; /* Mucho espacio arriba y abajo para que la sección respire */
    background-color: var(--blanco);
}

.contenedor-dos-columnas {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    gap: 80px; 
    max-width: 1200px; 
    margin: 0 auto; 
}

/* --- ESTILOS DEL TEXTO --- */
.columna-texto {
    flex: 1; 
}

.titulo-seccion-izq {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--negro-texto);
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.columna-texto p {
    font-size: 1.15rem; /* Texto un poco más grande para facilitar lectura */
    line-height: 1.6; /* Espacio entre líneas para que no se vea amontonado */
    color: #333; 
    margin-bottom: 40px;
    text-align: left; /* Mantiene el texto alineado a la izquierda */
}

/* --- BOTÓN AZUL OSCURO --- */
.btn-secundario {
    display: inline-block;
    background-color: #283593; /* Azul oscuro/índigo similar al de tu diseño */
    color: var(--blanco);
    padding: 12px 28px;
    border-radius: 30px; /* Bordes muy redondeados (estilo píldora) */
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-secundario:hover {
    background-color: #1a237e; /* Se oscurece al pasar el ratón */
    transform: translateY(-2px);
}

/* --- ESTILOS DE LA IMAGEN --- */
.columna-imagen {
    flex: 1; /* Ocupa la otra mitad del espacio */
}

.columna-imagen img {
    width: 100%;
    height: auto;
    border-radius: 16px; /* BORDES REDONDEADOS de la fotografía */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Sombra sutil para darle volumen */
    display: block;
}

/* --- DISEÑO RESPONSIVO (Para Celulares) --- */
@media (max-width: 900px) {
    .contenedor-dos-columnas {
        flex-direction: column; /* Apila el texto arriba y la imagen abajo */
        gap: 40px; /* Reduce el espacio entre ellos en móviles */
    }
    
    .titulo-seccion-izq, .columna-texto p {
        text-align: center; /* Centra el texto en celulares */
    }
    
    .columna-texto {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra el botón en celulares */
    }
}

/* --- SECCIÓN GALERÍA DE PROYECTOS --- */
.galeria {
    padding: 80px 5%;
    background-color: #f9f9f9; /* Un gris casi blanco para dar contraste entre secciones */
    text-align: center;
}

/* La cuadrícula perfecta */
.grid-galeria {
    display: grid;
    /* Crea columnas que se adaptan, mínimo 300px de ancho */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; /* Espacio uniforme entre todas las fotos */
    max-width: 1200px;
    margin: 0 auto;
}

/* Contenedor de cada imagen */
.item-galeria {
    border-radius: 8px; /* Bordes ligeramente suaves */
    overflow: hidden; /* CRÍTICO: Evita que la imagen se salga al hacer el zoom del hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Sombra sutil */
    background-color: #000; /* Fondo negro por si la imagen tarda en cargar */
}

/* Estilos de la imagen: Uniformidad absoluta */
.item-galeria img {
    width: 100%;
    height: 300px; /* Altura fija para TODAS las fotos. ¡Esto crea el orden! */
    object-fit: cover; /* Recorta la imagen inteligentemente para que no se deforme ni se estire */
    display: block;
    transition: transform 0.5s ease; /* Transición suave para el zoom */
}

/* Efecto al pasar el cursor (Hover Zoom) */
.item-galeria:hover img {
    transform: scale(1.08); /* Hace un zoom del 8% hacia adentro */
    opacity: 0.9; /* Oscurece muy ligeramente la foto */
    cursor: zoom-in; /* Cambia el cursor a una lupa (opcional) */
}

/* Reutilizamos la clase del título centrado */
h2.titulo-seccion {
    /* Si no la tenías ya declarada de forma general: */
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--negro-texto);
    margin-bottom: 50px;
    letter-spacing: 1px;
}

/* --- FOOTER / CONTACTO --- */
.contacto {
    width: 100%;
    margin-top: 50px; /* Separa el footer de la galería */
}

/* Barra oscura superior */
.contacto-cta {
    background-color: #222222; /* Gris casi negro, muy elegante */
    color: var(--blanco);
    text-align: center;
    padding: 35px 20px;
}

.contacto-cta h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Contenedor inferior blanco */
.contacto-info-wrapper {
    background-color: var(--blanco);
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 40px 8% 35px 8%;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.05); 
}

/* Grupo de datos de contacto */
.contacto-datos {
    display: flex;
    gap: 40px; /* Espacio entre dirección, teléfono y correo */
    flex-wrap: wrap; /* Permite que bajen de línea si no caben */
}

.item-contacto {
    display: flex;
    align-items: center;
    gap: 15px; 
}

/* Tamaño de los iconos rojos/negros */
.icono-contacto {
    width: 28px; 
    height: auto;
}

.item-contacto span {
    font-size: 1rem;
    color: #333333;
    font-weight: 500;
}

/* Contenedor del QR */
.contacto-qr {
    display: flex;
    flex-direction: column; 
    align-items: center;    
}

.contacto-qr img {
    width: 100px; 
    height: auto; 
}

.qr-texto {
    font-size: 0.85rem;
    color: #555;
}

/* --- DISEÑO RESPONSIVO (Para Celulares) --- */
@media (max-width: 950px) {
    .contacto-info-wrapper {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .contacto-datos {
        flex-direction: column;
        gap: 25px;
        align-items: center;
    }
    
    .contacto-cta h2 {
        font-size: 1.4rem; /* Texto más pequeño en móviles */
    }
}

/* --- ESTILOS ESPECÍFICOS PARA LA PÁGINA NOSOTROS.HTML --- */
/* El rectángulo gris oscuro */
.banner-quienes-somos {
    background-color: #333333; /* Gris oscuro */
    width: 100%;
    text-align: center;
    /* El padding top de 150px es para que el menú fijo no tape el cuadro gris */
    padding: 0px 0% 40px 0%; 
    overflow: hidden;
}

/* El texto de "Quiénes somos" más grande y centrado */
.banner-quienes-somos h1 {
    color: #ffffff; 
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
    margin-top: 20px;
    letter-spacing: -1px;
}

.pagina-nosotros {
    padding: 60px 0% 20px 0%; 
    background-color: var(--blanco);
    
}

.texto-principal {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 35px;
    text-align: justify;
}

.subtitulo-nosotros {
    font-size: 1.4rem;
    color: var(--azul-boton); 
    margin-bottom: 10px;
    font-weight: 700;
}

.texto-secundario {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 25px;
    text-align: justify;
}

/* --- ESTILOS PARA LA PÁGINA DE CONTACTO (contacto.html) -- */

.banner-contacto {
    background-color: #333333;
    width: 100%;
    text-align: center;
    padding: 0 0 30px 0; 
    overflow: hidden;
}

.banner-contacto h1 {
    color: #ffffff;
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
    margin-top: 20px;
    letter-spacing: -1px;
}

.linea-decorativa {
    width: 80px;
    height: 4px;
    background-color: var(--azul-boton); 
    margin: 15px auto 0 auto;
}

/* Contenedor general de la página contacto */
.pagina-contacto-detalle {
    padding: 50px 8% 80px 8%;
    background-color: var(--blanco);
}

/* El mapa de Google */
.mapa-contenedor {
    width: 100%;
    border: 2px solid #eeeeee;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    margin-bottom: 50px; 
}

.contacto-grid-info {
    display: flex;
    justify-content: space-between;
    gap: 60px; 
}

.info-columna {
    flex: 1; 
}

/* Títulos de "Cotizaciones" y "Oficinas" */
.info-columna h3 {
    font-size: 1.8rem;
    color: var(--negro-texto);
    margin-bottom: 20px;
    border-bottom: 2px solid #eeeeee;
    padding-bottom: 10px;
}

.info-columna p {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Datos específicos de la oficina */
.dato-oficina strong {
    color: var(--azul-boton);
    font-weight: 700;
}

.dato-oficina a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s;
}

.dato-oficina a:hover {
    color: var(--azul-boton);
    text-decoration: underline;
}

/* --- ESTILOS PARA EL QR GRANDE --- */
.qr-grande-contenedor {
    margin-top: 30px;
    text-align: center; /* Centramos el QR en su columna */
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border: 1px dashed #cccccc;
}

.qr-grande {
    width: 250px; /* ¡AQUÍ ESTÁ EL TAMAÑO GRANDE! */
    height: auto;
    margin-bottom: 15px;
}

.qr-grande-contenedor span {
    display: block;
    font-size: 0.9rem;
    color: #666;
    font-weight: 600;
}

/* Hacerlo responsivo para celulares */
@media (max-width: 768px) {
    .contacto-grid-info {
        flex-direction: column; /* Una columna debajo de la otra en celular */
        gap: 40px;
    }
}