/* Variables de color y tipografía */
:root {
    --color-background: #F3F3F3;
    --color-text-dark: #1f1f1f;
    --color-button-bg: #000000;
    --font-primary: 'Frank Ruhl Libre', serif;
    --font-secondary: 'Manrope', sans-serif;
}

/* Reset y Estilos Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-background);
    color: var(--color-text-dark);
    font-family: var(--font-secondary);
    line-height: 1.6;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Contenedor principal: Aplicamos text-align: left aquí para anular cualquier centrado heredado */
.page-container {
    width: 90%;
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 20px 0;
    text-align: left; /* CORRECCIÓN FINAL para Safari y el logo */
}

/* ---------------------------------------------------------------------------------- */
/* --- ESTILOS DE HEADER (LOGO y SELECTOR DE IDIOMA) --- */
/* ---------------------------------------------------------------------------------- */
.header {
    /* **MODIFICACIÓN:** Usamos flexbox para alinear el logo y el selector de idioma. */
    display: flex; 
    justify-content: space-between; /* Empuja logo a izq y selector a derecha */
    align-items: center; /* Alineación vertical */
    padding: 20px 0;
    margin-bottom: 20px; 
    width: 100%;
}

.logo-container {
    display: block; 
}

/* Logo principal de ARDOGROUP (Ahora PNG) */
.ardogroup-logo-img {
    height: 60px; /* **CORRECCIÓN DE DISTORSIÓN DEL LOGO: Altura Fija** */
    max-height: 60px; 
    width: auto;      
    display: block;   
    margin: 0;        
    /* Eliminamos las reglas de image-rendering que son específicas de SVG */
}

/* --- ESTILOS DE SELECTOR DE IDIOMA --- */
.language-selector {
    font-size: 1rem;
    font-weight: 500;
    padding-top: 5px; 
}

.lang-link {
    text-decoration: none;
    color: var(--color-text-dark);
    opacity: 0.6; 
    transition: opacity 0.2s;
}

.lang-link:hover {
    opacity: 1;
}

.lang-link.active {
    opacity: 1;
    font-weight: 700;
}

.lang-separator {
    margin: 0 5px; 
    color: var(--color-text-dark);
    opacity: 0.5;
}


/* ---------------------------------------------------------------------------------- */
/* --- ESTILOS DE SECCIÓN PRINCIPAL (HERO) --- */
/* ---------------------------------------------------------------------------------- */

.hero-section {
    display: flex;
    flex-direction: column; 
    gap: 40px;
    padding-bottom: 50px;
}

.main-title {
    font-family: var(--font-primary);
    font-weight: 500; 
    font-size: 2.2rem; 
    line-height: 1.1;
    margin-bottom: 30px;
}

.description-text {
    font-size: 1rem;
    margin-bottom: 15px;
}

/* Estilo del Botón de Contacto (con borde curveado del 5%) */
.contact-button {
    display: inline-block;
    background-color: var(--color-button-bg);
    color: white;
    padding: 12px 25px;
    margin-top: 20px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 5%; 
}

.contact-button:hover {
    background-color: #333333;
}

/* Contenedor Flex para las dos imágenes (Móvil) */
.content-images {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    align-items: flex-start; /* Ajustamos la alineación al inicio */
    width: 100%;
    /* Corrección de scroll: Límites relativos a la ventana */
    min-height: 30vh; 
    max-height: 65vh; 
    overflow: hidden; 
}

.image-placeholder {
    flex-shrink: 0; 
    overflow: hidden; 
    /* width: 0; - Se anula en los selectores específicos */
    position: relative; 
    /* Altura BASE para que las imágenes tengan un límite visual en móvil */
    height: 400px; 
}

/* Estilos de las imágenes reales */
.hero-image {
    width: 100%;
    height: 100%;
    /* **CLAVE CONTRA LA DISTORSIÓN:** Mantiene las proporciones, cortando lo que sobra. */
    object-fit: cover; 
    display: block;
}

/* 720x650 (Relación: 1.11) */
.image-placeholder-1 {
    width: 65%;
    /* **CORRECCIÓN:** Altura fija para evitar distorsión en móvil */
    height: 360px; 
}

/* 400x550 (Relación: 0.73) */
.image-placeholder-2 {
    width: 35%;
    /* **CORRECCIÓN:** Altura fija para evitar distorsión en móvil */
    height: 400px; 
}


/* ---------------------------------------------------------------------------------- */
/* --- ESTILOS DE FOOTER (CONTACTO Y LOGOS) --- */
/* ---------------------------------------------------------------------------------- */

.footer {
    display: flex;
    flex-direction: column; 
    gap: 30px;
    padding: 40px 0;
    border-top: 1px solid #e0e0e0;
}

.contact-info {
    font-size: 0.85rem;
    line-height: 1.5;
}

.contact-info strong {
    font-weight: 700;
}

.associated-logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
    align-items: center;
    justify-items: start;
}

.logo-link {
    display: flex;
    height: 70px; 
    align-items: center;
    justify-content: center;
    width: 100%; 
}

/* Oculta el placeholder de texto */
.logo-link img + .logo-text-placeholder,
.logo-text-placeholder {
    display: none;
}

/* Estilo para los logos SVG/PNG inferiores (70px de ancho) */
.logo-link img {
    width: 70px; 
    height: auto;
    display: block;
}


/* ---------------------------------------------------------------------------------- */
/* --- MEDIA QUERIES PARA RESPONSIVIDAD (Versión Desktop/Tablet) --- */
/* ---------------------------------------------------------------------------------- */

@media (min-width: 992px) {
    .page-container {
        padding: 50px 0;
    }

    .header {
        margin-bottom: 50px;
    }

    /* Layout principal para Desktop/Tablet con CSS Grid */
    .hero-section {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 80px;
        align-items: start;
        padding-bottom: 50px; 
        /* Límites de altura para evitar el scroll innecesario */
        max-height: calc(100vh - 200px); 
    }

    .main-title {
        font-size: 2.8rem; 
        margin-bottom: 40px;
    }

    .content-text {
        padding-right: 50px; 
    }

    .content-images {
        /* Ocupa el 100% de la altura de la celda de la grilla */
        height: 100%; 
        min-height: 400px;
        max-height: 100%; 
        align-items: stretch;
    }

    /* En desktop, los contenedores de imagen se ajustan a la altura del grid item. */
    .image-placeholder-1 {
        width: 65%;
        height: 100%; 
    }

    .image-placeholder-2 {
        width: 35%;
        height: 85%; /* Mantiene una proporción visual similar a la imagen original */
    }

    /* Footer para Desktop/Tablet */
    .footer {
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
    }

    .associated-logos {
        grid-template-columns: repeat(4, 70px); 
        gap: 30px;
        justify-items: end; 
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .associated-logos {
        grid-template-columns: repeat(4, 1fr); 
        justify-items: start;
    }
}