/* 1. RESET Y CONFIGURACIÓN ESTRICTA */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header, section, footer, aside, nav, article { display: block; }

body {
    text-align: center;
    background-color: #2d3436; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: 100vh; 
    overflow: hidden; 
    display: flex;
    justify-content: center;
    align-items: center; 
}

/* 2. EL CONTENEDOR (MÁS ANCHO Y CON ALTURA FIJA) */
.agrupar {
    width: 98%;           
    max-width: 1600px;    
    height: 96vh;         
    background-color: white;
    border: 3px solid #000;
    display: flex;
    flex-wrap: wrap;      
    align-content: flex-start; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

/* 3. CABECERA, MENÚ Y PIE */
.cabecera, .menu, .pie { width: 100%; }

.cabecera {
    background: #fffbb9;
    padding: 5px 20px;   
    border-bottom: 2px solid #999;
}
.cabecera h1 { text-align: left; font-size: 20px; }

.menu {
    background: orangered; color: white;
    padding: 4px 20px;
    text-align: left; border: 3px dotted greenyellow;
}
.menu li { display: inline-block; padding: 2px 15px; font: bold 12px Verdana; }

.pie {
    padding: 8px; color: #ffffff; background: #2d3436;
    font-size: 11px;
    align-self: flex-end; 
}

/* 4. CUERPO DE LA PÁGINA (COLUMNAS FLEXIBLES) */
.seccion {
    width: 60%;           
    height: calc(100% - 95px); /* Calcula el alto sobrante */
    padding: 10px;
}

article {
    background: #fffbbc; border: 1px solid #999;
    padding: 15px; font-style: italic; 
    text-align: center; /* ¡REGRESAMOS EL TEXTO AL CENTRO! */
    height: 100%; 
    overflow-y: auto; 
}
article h1 { font-size: 22px; margin-bottom: 5px; }
article h2 { font-size: 16px; margin-bottom: 10px; }
article p { font-size: 16px; line-height: 1.4; } /* Letra un poco más grande */

/* --- NUEVA CONFIGURACIÓN DE COLUMNAS --- */

/* Contenedores principales de las columnas */
.columna, .columnaDos {
    width: 20%;           
    height: calc(100% - 95px);
    padding: 10px 5px;
    display: flex; 
    flex-direction: column; /* Alinea los hijos (bloques) de arriba a abajo */
}

/* Configuración de los cuadros verdes de la izquierda */
.columna blockquote {
    flex-grow: 1;            /* Hace que AMBOS cuadros crezcan para llenar el espacio */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el texto y la imagen verticalmente */
    align-items: center;     /* Centra todo horizontalmente */
    
    border: 2px solid black; 
    padding: 10px;
    margin-bottom: 10px;
    color: darkred; 
    background: greenyellow; 
    font-size: 0.85em;
    font-weight: bold;
    text-align: center;
}

/* El segundo cuadro verde (el del GIF) será un poco más grande */
.columna blockquote:nth-child(2) {
    flex-grow: 1.5; 
}

/* Configuración de la columna derecha (Turquesa) */
.columnaDos { 
    border: 2px solid black; 
    padding: 5px;
    font-weight: bold; 
    margin-bottom: 10px;
    font-size: 1em; 
    color: green; 
    background: turquoise; 
    font-style: oblique; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 5. EL DOMADOR DE IMÁGENES (CORREGIDO) */
img {
    max-width: 95%; /* Evita que toque los bordes del cuadro */
    max-height: 80%; /* Deja espacio para el texto arriba/abajo */
    object-fit: contain; 
    display: block; 
    margin: 5px auto;
}

.seccion img {
    width: 90px; /* ¡LAS CARITAS VUELVEN A SER GRANDES! */
    max-height: 90px; 
    border-radius: 50%; 
    display: block; /* Esto hace que se apilen hacia abajo y no se peguen al texto */
    margin: 10px auto;
}

/* 6. MODO CELULAR (RESPONSIVE) */
@media (max-width: 768px) {
    body { height: auto; overflow: auto; } 
    .agrupar { height: auto; width: 100%; margin: 0; border: none; }
    .seccion, .columna, .columnaDos { width: 100%; height: auto; }
    img { max-height: 50vh; } 
}