/*
 * layout.css
 *
 * Estilos globales de estructura y grid, incluyendo containers, rows, columns.
 * Define áreas principales de la página, alineaciones, posiciones absolutas/relativas y flex.
 * Las clases aquí ayudan a organizar el layout y la fluidez de los elementos en el site.
 */

 .wrapper {
    padding: 0 clamp(12px, 3vw, 24px);
    margin: 0 auto;
    max-width: 1600px;
     
}

.wrapper-full {
    padding: 24px 24px 0 24px;
}

.wrapper .area-main-centered,
.wrapper .area-main,
.wrapper .area-full {
    box-sizing: border-box;
    max-width: min(1337px, 100%);
    padding: clamp(24px, 2vw, 64px) clamp(24px, 2vw, 64px) 0 clamp(24px, 2vw, 64px);
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(16px, 3vw, 24px);
}

.wrapper .area-main-centered {
    max-width: 877px;
    padding-inline: 1rem;
    margin-inline: auto;
}

.wrapper .area-main {
    margin: 0;
}
/*Area full no hay que tocarlo, es el layout 3 columnas*/
.wrapper .area-full {
    margin: 0 auto;
}

.wrapper .area-main h2,
.wrapper .area-main-centered h2,
.wrapper .area-full h2{
    width: 100%;
}

/*Regla para eliminar padding si area-main no tiene ningún hijo */
.wrapper .area-main:not(:has(> *)) {
   padding: 0;
}