/* ---------------------------------------
 *
 * HOJA DE ESTILOS DE LANDING 3er CONGRESO PALMERO MEXICANO
 * Versión: 2.0.0
 * Fecha de creación: 23/01/2026
 * Fecha de edición: 03/02/2026
 *
--------------------------------------- */

/* IMPORTAR */
@import url('reset.css');
@import url('color_scheme.css');
@import url('font_face.css');
@import url('effects.css');


/* GENERALES */
html { scroll-behavior: smooth; }

html body {
    background: rgb(var(--celeste));
    font-family: var(--body_font), sans-serif;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 300;
    color: rgba(var(--blanco), 0.8);
}

h1, h2, h3, h4 , h5, h6 {
    font-family: var(--body_font);
    color: rgba(var(--blanco));
    line-height: 1.2;
}

h1, h2, h3 { font-weight: 300; }
h4, h5, h6 { font-weight: normal; }

h1 {
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: -1px;
}

h2 {
    font-size: 2rem;
    letter-spacing: -1px;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
    letter-spacing: -1px;
}

h5 { font-size: 1.25rem; }

h6 { font-size: 1rem; }

strong { font-weight: bold; }
b { font-weight: 500; }

small {
    font-size: 0.875rem;
    font-weight: normal;
}

a {
    font-size: inherit;
    font-weight: bold;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    transition: ease-in-out 0.3s;
}
a:hover { color: inherit; }

button { cursor: pointer; }

section, div, header, footer, main, form { box-sizing: border-box; }

hr {
    border-color: var(--verde_vivo);
    margin: 1.25rem 0;
}

img { width: 100%; }


/* CONTENEDORES */
.wrap_content {
    max-width: 1360px;
    padding: 0 1.25rem;
    margin: 0 auto;
}

.wrap_content.form {
    max-width: 940px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.wrap_content.form * { color: var(--negro); }

.site_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
}

.main_header {
    padding: 1rem 0;
    width: 100%;
    transition: ease-in-out 1s;
}

.main_header.sticky {
    position: fixed;
    top: 0;
    z-index: 1025;
    background-color: rgb(var(--celeste), 0.5);
    backdrop-filter: blur(2rem);
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.site_footer {
    background-color: var(--verde3);
    border-top: 1px solid var(--verde_vivo);
    padding: 0 1.25rem;
}

.footer_content {
    max-width: 1360px;
    margin: 0 auto;
    font-size: 1.125rem;
}

.site_copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 0;
}

.wrap_columns {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.wrap_columns .column {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.wrap_heading {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    text-align: center;
}

.wrap_footer {
    display: flex;
    flex-direction: column;
}

.hero .wrap_heading { max-width: 32rem; }

.wrap_secc {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.wrap_excerpt {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    justify-content: center;
}

.bg_magazine {
    background-color: var(--verde3);
    background-image: url('../imgs/congreso/img_fondo_revista_mob.webp');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    border-top: 1px solid var(--verde_vivo);
    text-align: center;
}

.wrap_group_button {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 1.25rem 0;
}

/* Grids */
.grid_2x2, .grid_3, .grid_4, .grid_4x1, .grid_4x4, .grid_5, .grid_5x1 {
    display: grid;
    grid-template-columns: 1fr;
}

.grid_2x2, .grid_3 { gap: 1.25rem; }

.grid_4x4 { gap: 0.625rem; }

.grid_4 {
    align-items: center;
    justify-items: center;
    gap: 1.25rem;
}

.grid_col {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    height: 100%;
}


/* COMPONENTES */
/* Navegación */
.main_nav { display: none; }

.main_nav a {
    padding: 0.75rem;
    color: rgba(var(--blanco), 1);
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
}

.main_nav a:hover {
    box-shadow: inset 0 -4px 0 var(--verde_vivo);
}

.main_nav a.active {
    box-shadow: inset 0 -4px 0 var(--naranja_fruto);
    text-transform: uppercase;
    letter-spacing: 0.4rem;
}

.second_nav {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
    align-items: center;
}

.comp_nav {
    display: flex;
    flex-direction: column;
}

.comp_nav a {
    font-size: 1.125rem;
    font-weight: normal;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.625rem 0;
}

.comp_nav a:hover { color: rgba(var(--blanco), 1); }

.comp_nav i { color: var(--naranja_fruto); }

.comp_menu_social { display: none; }

/* Botones */
* .button {
    background-color: transparent;
    border: 1px solid var(--naranja_fruto);
    border-radius: 2rem;
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    transition: ease-in-out 0.3s;
    color: rgb(var(--blanco));
}

* .button.primary {
    background-color: var(--naranja_fruto);
    padding: 1rem 2rem;
    text-transform: uppercase;
    color: rgb(var(--blanco));
}

* .button.sm { padding: 0.75rem 1rem !important; }

* .button:hover,
* .button.primary:hover {
    background-color: var(--verde_vivo);
    border-color: var(--verde_vivo);
}

.button_toggle {
    padding: 0.25rem 0.5rem;
    background-color: transparent;
    border-radius: unset;
    border: unset;
    font-weight: 500;
    margin-left: auto;
    color: rgba(var(--blanco), 0.8);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
}
.button_toggle:hover { color: rgba(var(--blanco), 1); }

.button.disabled,
.button.disabled:hover {
    cursor: not-allowed;
    background-color: var(--celeste1);
    border-color: var(--gris);
    color: var(--gris);
}

.button_fab {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    right: 2rem;
    bottom: 2rem;
    z-index: 1024;
    width: 5rem;
    height: 5rem;
    background-color: var(--verde_vivo);
    border-radius: 1rem;
    font-size: 2.5rem;
    text-decoration: none;
    color: var(--blanco);
    transition: ease-in-out 0.3s;
}
.button_fab:hover { background-color: var(--verde3); }

/* Imágenes */
.site_brand { width: 120px; }

.hero img { width: 100%; }

.grid img {
    height: 100%;
    object-fit: cover;
}

.grid_4 img:first-child:not(.comp_block img) { max-width: 16rem; }
.grid_4 img:nth-child(2):not(.comp_block img) { max-width: 12.5rem; }
.grid_4 img:nth-child(3):not(.comp_block img) { max-width: 8rem; }
.grid_4 img:last-child:not(.comp_block img) { max-width: 12rem; }

.grid_4 .grid_col img { max-width: 100%; }

.pic_speaker {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 3rem;
}

.banner_price {
    width: 100%;
    border-top-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
}

/* Títulos */
.hero h2 { font-size: 1.5rem; }

.comp_subtitle {
    font-weight: 300;
    letter-spacing: 3px;
}

.comp_subtitle::after {
    content: '';
    display: block;
    width: 21rem;
    height: 1px;
    background-color: var(--verde_vivo);
    margin: 0.625rem auto 0;
}

/* Badges */
.comp_badge {
    background-color: var(--celeste3);
    border-radius: 2rem;
    padding: 0.4rem 1rem;
    text-align: center;
}

/* Contador */
.comp_counter {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
    padding-top: 1.25rem;
    margin: 0 auto;
    max-width: 41rem;
}

.comp_counter_grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: space-between;
}

.comp_counter_card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.comp_counter_card:not(:last-child)::after {
    display: block;
    content: ':';
    font-size: 2rem;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
}

.counterNumber {
    font-size: 2rem;
    font-weight: bold;
}

.comp_counter_number {
    padding-top: 1.25rem;
    border-top: 1px solid var(--verde_vivo);
}

/* Cards */
.comp_card {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    padding: 1.25rem 1.25rem;
    gap: 0.625rem;
    position: relative;
}

.comp_card.p_40 { padding: 2.5rem 2.5rem; }

.grid_4x1 .comp_card { border-bottom: 1px solid var(--verde_vivo); }

.grid_5 .comp_card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.625rem;
    justify-content: start;
    min-height: 6rem;
    padding: 0.625rem;
}

.grid_5x1 .comp_card {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 0.625rem;
    text-align: center;
}

.grid_5 .comp_card:not(:last-child) { border-bottom: 1px solid var(--verde_vivo); }

.grid_top_center .comp_card {
    justify-items: center;
    text-align: center;
}

.grid_borderless .comp_card { border: 0 !important; }

.comp_block {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 1.25rem;
    gap: 0.625rem;
}

.grid_sponsor .comp_block {
    padding: 0;
    gap: 0;
}

.grid_sponsor img { width: 100%; }

.grid_sponsor .comp_data {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.625rem;
    border-top: 1px solid var(--naranja_fruto);
    color: var(--negro);
}

.grid_sponsor .comp_data p { font-size: 1rem; }

.grid_sponsor .comp_data label {
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--gris);
    text-transform: uppercase;
    letter-spacing: 4px;
}

.grid_sponsor .comp_data a {
    font-weight: normal;
    font-size: 1rem;
    color: var(--naranja_fruto);
}

.comp_card_info {
    background-color: rgba(var(--info), 0.32);
    border: 1px solid rgb(var(--info));
    padding: 1.25rem 1.25rem;
    text-align: center;
}

/* Mapas */
.comp_map {
    width: 100%;
    height: 22rem;
}

/* Modales */
.comp_modal {
    position: fixed;
    z-index: 1026;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    background-color: rgb(var(--celeste), 0.75);
    backdrop-filter: blur(2rem);
    display: flex;
    flex-direction: column;
    place-items: center;
}

.comp_modal.hide { display: none !important; }

.comp_modal_content {
    width: 100%;
    background-color: var(--celeste3);
    margin: auto 0;
    padding: 1.25rem 1.25rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.comp_modal_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.comp_modal_footer {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* PDFs */
.comp_preview {
    width: 100%;
    height: 22rem;
}

/* Tabs */
.comp_tabs {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.comp_tabs_menu { display: flex; }

.comp_tab_item {
    padding: 0.5rem 1rem;
    border: 1px solid var(--naranja_fruto);
    background-color: transparent;
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    color: rgb(var(--blanco));
    transition: ease-in-out 0.3s;
}
.comp_tab_item:last-child {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}
.comp_tab_item:first-child {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
}

.comp_tab_item.active {
    background-color: var(--naranja_fruto);
    text-transform: uppercase;
    letter-spacing: 4px;
}

.comp_tab_item:hover {
    background-color: var(--verde_vivo);
    border-color: var(--verde_vivo);
}

.comp_tabs_content { width: 100%; }

.comp_tab_container { display: none; }
.comp_tab_container.active { display: block; }

/* Listas */
.comp_list_item:not(:last-child) { border-bottom: 1px solid var(--verde_vivo); }

.comp_list_item {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
}

.comp_list.stack { flex-direction: column; }
    
.comp_list.dot {
    list-style: disc;
    padding-left: 1.25rem;
}

/* Parallax */
.comp_parallax {
    position: relative;
    background-image: url('../imgs/congreso/img_camino_palmas.webp');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.25rem;
    height: 22rem;
    gap: 1.25rem;
}

.comp_parallax::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(var(--celeste), 0.75);
}

.comp_parallax * {
    position: relative;
    z-index: 2;
}

/* Formularios */
input:not([type="submit"], [type="hidden"], [type="radio"], [type="checkbox"], [type="file"]), textarea, select {
    border: 1px solid var(--gris);
    background-color: var(--celeste1);
    padding: 0.75rem 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    width: 100%;
    height: 3rem;
    color: var(--negro);
}

input[type="checkbox"], input[type="radio"] {
    border: 1px solid var(--gris);
    background-color: var(--celeste1);
}

input[type="file"] {
    border: 1px solid var(--gris);
    background-color: var(--celeste1);
    box-sizing: border-box;
    font-family: inherit;
    font-size: 1rem;
    color: var(--negro);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

input[type="file"]::file-selector-button {
    border: 0;
    background-color: var(--gris);
    font-family: inherit;
    font-size: 1rem;
    height: 3rem;
    padding: 0.75rem;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::file-selector-button:focus,
input[type="file"]::file-selector-button:active {
    background-color: var(--verde_vivo);
}

.comp_form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    width: 100%;
}

.comp_footer {
    display: grid;
    grid-template-columns: auto;
    gap: 0.625rem;
}

.comp_form_secc {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--gris);
    width: 100%;
}

.row_secc {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.625rem;
}

*:not(.radio, .checkbox) > label { font-weight: bold; }
label { font-size: 1rem; }

.comp_form_item:not(.radio, .checkbox) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
}

/* Carrusel */
.comp_carousel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

.comp_container {
    overflow: hidden;
    position: relative;
    width: 100%;
    grid-column: 1 / span 2;
}

.comp_slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.comp_slide iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.comp_carousel_button {
    width: 100%;
    height: 4.5rem;
    transition: ease-in-out 0.3s;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2rem;
    background-color: transparent;
    border: 0;
}
.comp_carousel_button.prev { background-image: url('../icons/icono_flecha_izquierda.svg'); }
.comp_carousel_button.next { background-image: url('../icons/icono_flecha_derecha.svg'); }


/* UTILITARIOS */
/* Paddings y Márgenes */
.py_secc {
    padding-top: 3.125rem;
    padding-bottom: 3.125rem;
}

.py_secc_min {
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
}

.py_40 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.mt_1 { margin-top: 0.25rem; }
.mt_20 { margin-top: 1.25rem; }

.mb_20 { margin-bottom: 1.25rem; }
.mb_40 { margin-bottom: 2.5rem; }

/* Bordes */
.border_bottom { border-bottom: 1px solid var(--verde_vivo); }
.border_top { border-top: 1px solid var(--verde_vivo); }

/* Divisores */
.divider {
    max-width: 50px;
    border: 3px solid var(--verde_vivo);
    margin: 0;
}

/* Colores */
.highlight { color: var(--verde_vivo); }

.required { color: var(--naranja_fruto); }

.bg_white { background-color: rgb(var(--blanco)); }
.bg_black { background-color: var(--negro); }
.bg_blue { background-color: var(--celeste3); }
.bg_green { background-color: var(--verde3); }

.bg_trans { background-color: rgba(var(--blanco), 0.12); }

.bg_gradient_blue {
    background: #006494;
    background: linear-gradient(180deg, var(--celeste3) 0%, rgba(var(--celeste), 1) 100%);
}

/* Iconos */
.comp_icon {
    width: 3rem;
    height: 3rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.comp_icon.lg {
    width: 6.25rem;
    height: 6.25rem;
}

.comp_icon.sm {
    width: 1.25rem;
    height: 1.25rem;
}

.comp_icon.marcador { background-image: url('../icons/icono_marcador.svg'); }
.comp_icon.palma { background-image: url('../icons/icono_palma.svg'); }
.comp_icon.portafolio { background-image: url('../icons/icono_portafolio.svg'); }
.comp_icon.corazon { background-image: url('../icons/icono_corazon.svg'); }
.comp_icon.flecha { background-image: url('../icons/icono_flecha.svg'); }
.comp_icon.check { background-image: url('../icons/icono_check.svg'); }
.comp_icon.data { background-image: url('../icons/icono_data.svg'); }
.comp_icon.chart { background-image: url('../icons/icono_chart.svg'); }
.comp_icon.global { background-image: url('../icons/icono_global.svg'); }

/* Sin scroll */
.stop { overflow: hidden; }

/* Tamaños */
.w_100 { grid-column: 1 / span 2; }

/* Display */
.d_none { display: none !important; }

/* Signos */
.plus::before { content: '+'; }


/* PUNTOS DE QUIEBRE */
@media (min-width: 768px) {
    /* Contenedores */
    .wrap_columns {
        flex-direction: row;
        justify-content: space-between;
    }

    .wrap_columns .column { max-width: 300px; }

    .site_copyright {
        flex-direction: row;
        justify-content: space-between;
    }

    .wrap_content.wrap_2x2 {
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
    }

    .bg_magazine { min-height: 37rem; }

    .bg_magazine .wrap_content {
        display: flex;
        flex-direction: column;
        place-items: center;
        gap: 1.25rem;
    }

    .bg_magazine .wrap_excerpt { max-width: 22.5rem; }

    .wrap_footer { align-items: center; }

    .wrap_group_button {
        flex-direction: row;
        gap: 0.625rem;
    }

    /* Grids */
    .grid_col:nth-child(even) { justify-content: end; }
    .grid_col:nth-child(even) img { order: 1; }

    .grid_3, .grid_4, .grid_4x1, .grid_4x4 { grid-template-columns: repeat(2, 1fr); }

    .grid_4x1 .comp_card { border-bottom: unset; }

    .grid_4x4 .comp_block:first-child {
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
    }

    .grid_4x4 img:first-child { grid-column: 1 / span 2; }
    .grid_4x4 .comp_block:nth-child(2) { grid-column: 3 / span 2; }

    .grid_5 { grid-template-columns: repeat(2, 1fr); }

    .grid_5x1 { grid-template-columns: repeat(3, 1fr); }

    /* Contador */
    .counterNumber { font-size: 3.75rem; }

    .comp_counter_card:not(:last-child)::after { font-size: 3.75rem; }

    /* Imágenes */
    .hero img { width: 32rem; }

    .bg_magazine img { max-width: 20rem; }

    /* Modales */
    .comp_modal_footer {
        flex-direction: row;
        justify-content: end;
        align-items: center;
    }

    /* PDFs */
    .comp_preview { height: 40rem; }

    /* Tabs */
    .comp_tabs { align-items: start; }

    .comp_tab_item { padding: 1rem 2rem;}

    /* Listas */
    .comp_list_item {
        flex-direction: row;
        gap: 1.25rem;
    }

    .comp_hour { width: 160px; }

    .comp_title { width: 65%; }

    /* Parallax */
    .comp_parallax { height: 45rem; }

    /* Formularios */
    .comp_footer {
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        justify-content: center;
    }
    .comp_footer *:first-child {
        grid-column: 1 / span 2;
        text-align: center;
    }

    .comp_footer.flex {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .comp_form_secc.half { grid-template-columns: repeat(2, 1fr); }

    .col2 { grid-template-columns: repeat(2, 1fr); }

    .col2 *:first-child,
    .col2 *:nth-child(2) { grid-column: 1 / span 2; }

    .row_secc { flex-direction: row; }

    .pre_footer { grid-template-columns: repeat(2, 1fr); }

    .comp_form_secc.2x2 { grid-template-columns: repeat(2, 1fr); }

    /* Navegación */
    .comp_menu_social {
        display: block;
        position: fixed;
        z-index: 1025;
        top: 0;
        bottom: 0;
        right: 2rem;
        margin-top: auto;
        margin-bottom: auto;
        height: 146px;
    }
    
    .comp_menu_social .comp_nav_link {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.5rem;
        height: 2.5rem;
        background-color: rgba(var(--celeste), 0.5);
        border-radius: 1.25rem;
        border: 1px solid var(--naranja_fruto);
        color: inherit;
        text-decoration: none;
        transition: ease-in-out 0.3s;
        backdrop-filter: blur(2px);
    }
    .comp_menu_social .comp_nav_link:not(:first-child) { margin-top: 0.625rem; }

    .comp_menu_social .comp_nav_link:hover {
        background-color: var(--verde_vivo);
        border-color: var(--verde_vivo);
    }

    /* Carrusel */
    .comp_carousel {
        grid-template-columns: 1fr;
        place-items: center;
    }

    .comp_container {
        width: 37rem;
        margin: 0 auto;
    }

    .comp_carousel_button {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 3.5rem;
        height: 100%;
    }

    .comp_carousel_button.prev { left: 0; }
    .comp_carousel_button.next { right: 0; }

    /* Paddings y Márgenes */
    .py_secc {
        padding-top: 6.25rem;
        padding-bottom: 6.25rem;
    }
}

@media (min-width: 1024px) {
    /* Contenedores */
    .hero {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1.25rem;
    }

    .hero .wrap_heading {
        order: 0;
        align-items: start;
        text-align: start;
    }

    .wrap_secc { grid-template-columns: repeat(12, 1fr); }

    .wrap_secc *:first-child { grid-column: 1 / span 7; }
    .wrap_secc *:last-child { grid-column: 9 / span 4; }

    .wrap_secc.inverted *:first-child { grid-column: 1 / span 4; }
    .wrap_secc.inverted *:last-child { grid-column: 6 / span 7; }

    .bg_magazine {
        background-image: url('../imgs/congreso/img_fondo_revista_desk.webp');
        text-align: start;
    }

    .bg_magazine .wrap_content {
        flex-direction: row;
    }

    /* Grids */
    .grid_2x2 {
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
    }

    .grid_2x2 img { order: 1; }
    .grid_2x2 .wrap_excerpt {
        order: 0;
        align-items: start;
    }

    .grid_3 { grid-template-columns: repeat(3, 1fr); }

    .grid_4 { grid-template-columns: repeat(4, 1fr); }

    .grid_4x1 {
        grid-template-columns: repeat(4, 1fr);
        place-items: center;
    }

    .grid_4x1 .comp_card { max-height: 14rem; }

    .grid_4x1.grid_top_center .comp_card {
        max-height: unset;
        height: 100%;
        place-content: start;
    }

    .grid_4x1 .comp_card:not(:last-child) {
        border-right: 1px solid var(--verde_vivo);
        border-bottom: 0;
    }

    .grid_4x4 {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .grid_4x4 .comp_card:nth-child(2) { grid-column: 3 / span 2; }

    .grid_5 { grid-template-columns: repeat(5, 1fr); }

    .grid_5 .comp_card:not(:last-child) {
        border-bottom: unset;
        border-right: 1px solid var(--verde_vivo);
    }

    .grid_5x1 { grid-template-columns: repeat(5, 1fr); }
    
    /* Imágenes */
    .site_brand { width: 192px; }

    .hero img { order: 1; }

    .grid_4x4 img:first-child { grid-row: 1 / span 2; }

    /* Mapa */
    .comp_map { height: 37rem; }

    /* Cards */
    .comp_card { align-items: start; }

    .grid_5x1 .comp_card { align-items: center; }

    .comp_block.align_start { align-items: start; }

    /* Listas */
    .comp_hour { width: 200px; }

    /* Paddings y Márgenes */
    .py_secc {
        padding-top: 12.5rem;
        padding-bottom: 12.5rem;
    }
}

@media (min-width: 1200px) {
    html body {
        font-size: 1.25rem;
        line-height: 1.5;
    }

    h1 {
        font-size: 3.7rem;
        line-height: 1;
    }
    
    h2 {
        font-size: 3rem;
        line-height: 1.2;
    }
    
    h3 { font-size: 1.85rem; }
    
    h4 { font-size: 1.75rem; }
    
    h5 { font-size: 1.375rem; }

    /* Contenedores */
    .bg_magazine { background-position: top right; }

    /* Navegación */
    .main_nav {
        display: flex;
        flex-direction: row;
    }

    /* Imágenes */
    .hero img { width: 43rem; }

    /* Modales */
    .comp_modal_content { width: 48rem; }

    /* Parallax */
    .comp_parallax { height: 67rem; }

    /* Grids */
    .grid_lg_2x2 { grid-template-columns: repeat(2, 1fr); }

    .grid_lg_2x2 input[type="file"] { max-width: 315px; }

    /* Formularios */
    .comp_footer { grid-template-columns: repeat(4, 1fr); }
    
    .comp_footer *:first-child {
        grid-column: 1 / span 2;
        text-align: start;
    }

    /* Carrusel */
    .comp_container { width: 70rem; }
}