* {margin:0;padding:0;box-sizing:border-box;}
/* TIPOGRAFÍA 1: Aplicación de Montserrat */
html,body{
    width:100%;
    height:100%;
    font-family:'Montserrat', sans-serif;
    background:#000;
    color:#fff;
    overflow-x:hidden;
    scroll-behavior:smooth;
    padding-bottom:55px;
}

/* Variables de espacio fijo (altura de nav y footer) */
:root {
    --nav-height: 40px; /* Altura aproximada del menú */
    --footer-height: 55px; /* Altura fija del footer */
}

/* NAV */
nav{
    position:fixed;
    top:0;
    width:100%;
    background:rgba(255,255,255,0.1);
    backdrop-filter:blur(8px);
    display:flex;
    justify-content:center;
    gap:25px;
    padding:10px 0;
    z-index:1000;
    height: var(--nav-height); 
    box-sizing: content-box; 
}
nav a{color:#fff;text-decoration:none;font-weight:bold;font-size:15px;}
nav a:hover{color:#00ff88;}

/* SECCIONES: Padding para evitar solapamiento */
section{
    /* CORRECCIÓN 1: Usar min-height para que el contenido se pueda estirar */
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:url('img/bg-loco-n7.png') center/cover no-repeat;
    gap:40px;
    padding-top: calc(var(--nav-height) + 20px); 
    padding-bottom: calc(var(--footer-height) + 20px);
    box-sizing: border-box; 
}

/* Logo de página 1 más grande (760px) */
.inicio img.logo-inicio{width:760px;height:auto;}

.contenido{display:flex;justify-content:space-between;align-items:center;padding:0 8%;}
.columna{width:45%;}

/* IMÁGENES RESPONSIVE: Ajuste de imagen para que no se salga del contenedor */
.columna img{
    max-width: 100%; 
    height: auto;
}

/* IMAGEN DE NOSOTROS (Achicar más operario.png) */
.img-operario {
    max-width: 75%; /* Ajuste final */
    height: auto;
}


.contenido h2{color:#fff;margin-bottom:20px; font-size: 32px;}
/* Estilo para los subtítulos h3 de contacto */
.contenido h3{
    color:#fff;
    margin-bottom:10px;
    font-weight: 400; 
    font-size: 20px;
}

.contenido p{
    margin-bottom:10px;
    line-height:1.5;
    color:#fff;
    /* Párrafos Justificados */
    text-align: justify;
}

/* MISION / VISION */
.vm{
    flex-direction:column;
    text-align:center;
    gap:10px;
}

/* Estilos para los bloques de texto e imagen */
section#paginaVM .bloque {
    max-width: 900px; 
    margin: 10px auto; 
}

/* Separar Títulos de Párrafos */
section#paginaVM h2 {
    margin-bottom: 25px; 
}

/* Estilos de párrafos de Misión/Visión */
section#paginaVM p {
    text-align: justify;
    margin-bottom: 25px; 
}

/* Agrandamos la imagen central */
.vm img{width:400px;height:auto;margin:10px auto;} 


/* CONTACTO (REHECHO Y ESPACIADO OPTIMIZADO) */
#contacto-info{
    position: static; 
    background: none; 
    padding:0;
    border-radius:0;
    width:auto;
    color:white;
    font-weight:bold;
    margin-top: 30px; 
    text-align: left;
}

/* Agrupamiento para control de espaciado entre grupos (Teléfonos/Correo) */
.contact-group {
    margin-bottom: 20px; /* Espacio entre Teléfonos y Correo */
}

/* Estilo para los títulos de contacto (Teléfonos, Correo, Redes) */
.contact-title {
    font-weight: 700; /* Coincide con la imagen */
    margin-bottom: 5px; /* Espacio debajo del título */
    font-size: 18px; 
    color: #00ff88; /* Color de realce */
}

/* Estilo para los enlaces de contacto */
#contacto-info a {
    display: block; 
    color: white; 
    text-decoration: none;
    font-size: 20px; /* Tamaño del texto del contacto grande */
    line-height: 1.2; /* Tighter interlineado entre las líneas de teléfono (Ajuste Final) */
    margin-bottom: 5px; /* Pequeño espacio entre cada línea de contacto */
}
#contacto-info a:hover {
    color: #00ff88; 
}

/* Estilo para las imágenes de los enlaces de contacto */
#contacto-info a img{
    height:25px; 
    margin-left: 8px; 
    vertical-align: middle; 
}


/* Imagen de contacto a la derecha (Agrandar más contacto.png) */
.img-contacto-derecha {
    max-width: 150%; /* Ajuste final */
    height: auto;
}


/* FOOTER */
footer{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    background:white;
    color:black;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:25px;
    height: var(--footer-height); 
    box-shadow:0 -2px 5px rgba(0,0,0,0.15);
    z-index: 1000; 
}
/* Letra de footer mucho más pequeña */
footer span {
    font-size: 10px; 
    font-weight: 400; 
}
footer img{height:32px;transition:0.3s;}
footer img:hover{transform:scale(1.1);}


/* MEDIA QUERIES (Responsive para móviles) */
@media (max-width: 768px) {
    
	/* CORRECCIÓN CRÍTICA: Ajuste del logo para móvil */
    .inicio img.logo-inicio{
        width: 80%; /* Lo hacemos más pequeño */
        max-width: 320px; /* Limite máximo si la pantalla es muy ancha (ej: tablet en vertical) */
    }

    /* CORRECCIÓN CRÍTICA PARA EL SOLAPAMIENTO: Fuerza a que el contenido en todas las secciones inicie desde arriba */
    section {
        align-items: flex-start; 
        justify-content: flex-start;
    }
    
    /* CORRECCIÓN 2: Apilamiento de columnas y ancho completo */
    .contenido {
        flex-direction: column; /* Apila las columnas verticalmente */
        padding: 0 5%; /* Menos padding en móvil */
        text-align: center; /* Centra el contenido principal */
        /* Asegura que no haya alineación vertical indeseada */
        align-items: stretch;
        justify-content: flex-start; 
    }
    
    .columna {
        width: 100%; /* Cada columna ocupa todo el ancho */
        margin-bottom: 20px; /* Espacio entre las secciones apiladas */
    }

    /* Misión/Visión en móvil: vuelve a ancho completo y ajusta la imagen */
    section#paginaVM .bloque {
        max-width: 100%; 
    }
    .vm img{width:100%; max-width: 320px;} /* Reducimos la imagen en móvil */
    
    section#paginaVM p {
        text-align: left; 
    }
    /* El contacto en móvil se centra */
    #contacto-info {
        text-align: center;
    }
    /* Ajuste de imágenes de contacto en móvil */
    #contacto-info a img {
        height: 18px;
    }
    
    /* Mantenemos el contenido de la primera columna (izq) a la izquierda */
    .columna.izquierda {
        text-align: left; 
    }
}