/* Variables CSS para facilitar cambios de color */
:root {
    --primary-font: 'Arial', sans-serif;
    --background-color: #f4f4f4;
    --card-background-color: #fff;
    --shadow-color: rgba(0,0,0,0.1);
    --text-color: #333; /* Color de texto general */
}

body {
    font-family: var(--primary-font);
    background-color: var(--background-color);
    margin: 0;
    padding: 20px;
    color: var(--text-color); /* Aplicar color de texto general */
    line-height: 1.6; /* Mejorar legibilidad del texto */
}

/* Encabezado */
.header {
    text-align: center; /* Centrar elementos dentro del header */
    margin-bottom: 20px;
}

.header__logo {
    display: block;
    margin: 0 auto; /* Centra el logo */
    max-width: 200px;
    height: auto;
}

/* Contenido Principal */
.main-content {
    max-width: 900px; /* Un poco más ancho para el contenido principal */
    margin: 0 auto;
    padding: 0 15px; /* Pequeño padding horizontal para móviles */
}

.main-content__image {
    display: block;
    margin: 0 auto 30px auto; /* Centra la imagen y añade margen inferior */
    max-width: 100%; /* Asegura que la imagen no se desborde */
    height: auto;
    border-radius: 8px; /* Bordes ligeramente redondeados para la imagen */
    box-shadow: 0 2px 4px var(--shadow-color); /* Sombra sutil para la imagen */
}

/* Galería de Imágenes */
.image-gallery {
    display: flex;
    flex-wrap: wrap; /* Permite que las imágenes pasen a la siguiente línea en pantallas pequeñas */
    justify-content: center; /* Centra las imágenes horizontalmente */
    gap: 20px; /* Espacio entre las imágenes */
    margin-top: 30px; /* Espacio superior con la imagen principal */
    margin-bottom: 30px; /* Espacio inferior con el anuncio */
    padding: 0 10px; /* Pequeño padding horizontal para los bordes */
}

.image-item {
    /* Clave: min-width: 0 para permitir que el elemento flex se encoja */
    min-width: 0; 
    
    /* flex-basis ajusta el tamaño base de cada item. 
       Aquí, queremos que intenten ocupar un tercio, pero con flexibilidad. */
    flex: 1 1 calc(33.33% - 20px); 
    
    max-width: calc(33.33% - 20px); /* Límite para que no crezcan demasiado */
    margin-bottom: 15px; /* Espacio inferior entre filas si se envuelven */
    text-align: center;
    box-sizing: border-box; /* Asegura que padding y border se incluyan en el ancho/alto */
}

.image-item img {
    display: block;
    width: 100%; /* Asegura que la imagen ocupe el 100% del ancho de su contenedor (.image-item) */
    height: auto;
    border-radius: 5px;
    box-shadow: 0 1px 3px var(--shadow-color);
    margin-bottom: 5px;
}

.image-item p {
    font-size: 0.9em;
    color: #555;
    margin-top: 5px;
}

/* Estilo para la sección del anuncio */
.announcement {
    font-size: 1.2em;
    background-color: var(--card-background-color);
    padding: 25px; /* Aumentar un poco el padding */
    border-radius: 10px; /* Bordes más redondeados */
    box-shadow: 0 6px 12px var(--shadow-color); /* Sombra más pronunciada */
    text-align: center; /* Centrar el texto del anuncio */
    margin-bottom: 20px; /* Espacio inferior */
}

.announcement p {
    margin: 0; /* Eliminar margen por defecto del párrafo dentro del anuncio */
    font-weight: 500; /* Texto un poco más grueso */
    color: #444; /* Un color de texto ligeramente diferente para el anuncio */
}

/* Diseño Responsivo */
@media (max-width: 768px) { /* Un breakpoint más común */
    body {
        padding: 15px;
    }

    .announcement {
        font-size: 1.1em;
        padding: 20px;
    }

    .header__logo {
        max-width: 150px; /* Logo un poco más pequeño en móviles */
    }

    .image-item {
        flex: 1 1 calc(50% - 20px); /* Dos imágenes por fila en tablets */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 480px) { /* Breakpoint para móviles muy pequeños */
    body {
        padding: 10px;
    }

    .announcement {
        font-size: 1em;
        padding: 15px;
    }

    .image-item {
        flex: 1 1 100%; /* Una imagen por fila en móviles pequeños */
        max-width: 100%;
    }
}