/* ======== GENERALES ======== */
/* Estilos para todo el cuerpo de la página (fondo, fuente, etc.) */
body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background-color: #ffffff;
    color: #222;
}

/* /* ======== HEADER ======== /
/* El contenedor principal de la barra de navegación (<header>) /
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1a202c;
    padding: 15px 40px;
    color: white;
    /* quede fijo /
    position: sticky;
    z-index: 1000;
    top: 0;
}

/* La imagen del logo (<img src="ACASALogoAcerosA[1].png">) *
header .logo img {
    width: 80px;
}
header .logo {
    display: flex;
    align-items: center;
    gap: 15px; 
}
header .logo h2 {
    margin: 0; 
    font-size: 1.5em; 
}
/* La lista (<ul>) que contiene los enlaces de navegación /
nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

/* Cada enlace (<a>) individual en la navegación (Productos, Sucursales, Login) *
nav a {
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background 0.3s;
}

/* El efecto al pasar el mouse sobre un enlace de navegación *
nav a:hover {
    background: #ff8c42;
}
 */

/* ======== CONTENIDO PRINCIPAL (Misión, Visión, etc.) ======== */

/* Contenedor para una sección (<section class="info-section">) */
.info-section {
    display: flex;          /* Pone texto e imagen uno al lado del otro */
    align-items: center;    /* Centra verticalmente */
    gap: 40px;              /* Espacio entre texto e imagen */
    margin-bottom: 50px;    /* Espacio entre secciones */
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* El bloque (div) que contiene el título y el párrafo (<div class="text-content">) */
.info-section .text-content {
    flex: 1; /* Ocupa 1 parte del espacio flex (la mitad) */
    max-width: 50%;
}

/* La imagen (<img class="info-image">) dentro de la sección */
.info-section .info-image {
    flex: 1;              /* Ocupa la otra parte del espacio flex (la otra mitad) */
    width: 100%; 
    max-width: 50%;       
    height: 350px;        
    object-position: center; /* Centra la imagen */
    object-fit: cover;    /* Evita que la imagen se deforme (la recorta) */
    border-radius: 5px;
}

/* Clase especial para la sección "Por qué elegir" (<section class="info-section reverse">) */
.info-section.reverse {
    flex-direction: row-reverse; /* Invierte el orden (imagen a la izquierda) */
}

/* Estilos del texto dentro de las secciones de información */

/* El título (<h1>Misión</h1>, <h1>Visión</h1>) dentro del bloque de texto */
.text-content h1 {
    font-size: 4em;
    margin-top: 0;
    margin-bottom: 20px;
    color: #222;
}

/* El párrafo (<p>...</p>) dentro del bloque de texto */
.text-content p {
    font-size: 1.7em;
    color: #555;
}



/* ======== FOOTER ======== /

/* El contenedor principal del pie de página (<footer>) *
footer {
    background: #1a202c;
    color: white;
    padding: 40px 20px;
}

/* Contenedor (Flexbox) para las 4 columnas del footer (<div class="footer-sections">) *
.footer-sections {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: left;
}

/* Los títulos de cada columna del footer (<h3>Horario...</h3>, <h3>Sucursal...</h3>, etc.) *
footer h3 {
    color: #ff8c42;
}

/* Los enlaces (links) dentro del footer (<a href="#mision">, etc.) *
footer a {
    color: #cbd5e0;
    text-decoration: none;
}

/* Las imágenes (íconos) de redes sociales (<div class="redes"><img>) *
.redes img {
    width: 30px;
    margin: 0 5px;
}

/* El texto de copyright al final del footer (<p class="copy">) *
.copy {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
}

/* ======== RESPONSIVE ======== */
/* Estilos que se aplican SOLO en pantallas de 768px de ancho o menos *
@media (max-width: 768px) {
    
    /* Hace que las columnas del footer se pongan una sobre otra (en vertical) *
    .footer-sections {
        flex-direction: column;
        text-align: center;
    }
}