/* ---------------------------------------
 *
 * 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: var(--celeste1);
    font-family: var(--body_font), sans-serif;
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 300;
    color: var(--negro);
}

h1, h2, h3, h4 , h5, h6 {
    font-family: var(--body_font);
    color: inherit;
    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;
}

.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(--blanco), 0.5);
    backdrop-filter: blur(2rem);
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--verde3);
    background-image: url('../imgs/congreso/img_fondo_legales.webp');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    text-align: center;
    padding: 2.5rem;
    gap: 0.625rem;
}

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

.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_footer {
    display: flex;
    flex-direction: column;
}

.wrap_body, .wrap_article {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.wrap_article { text-align: justify; }

/* Grids */
.grid_4 {
    display: grid;
    grid-template-columns: 1fr;
}

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


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

.main_nav a {
    padding: 0.75rem;
    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 { box-shadow: inset 0 -4px 0 var(--verde_vivo); }

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

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

.comp_menu_social { display: none; }

/* Breadcrumbs */
.hero .comp_breadcrumbs { color: rgb(var(--blanco)); }

.comp_breadcrumbs {
    display: flex;
    flex-direction: row;
    gap: 0.2rem;
    justify-items: center;
    color: inherit;
}

.comp_breadcrumbs a {
    display: flex;
    place-items: center;
    color: inherit;
}

.comp_breadcrumbs *:not(:first-child)::before {
    content: '/';
    display: inline-block;
    margin-right: 0.2rem;
    color: var(--verde_vivo);
}

/* 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: inherit;
}

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

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

.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: rgb(var(--blanco));
    transition: ease-in-out 0.3s;
}
.button_fab:hover { background-color: var(--verde3); }

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

.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; }

/* Sidebar */
.comp_aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.comp_aside_title {
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--verde_vivo);
}

/* Lista */
.wrap_article ul {
    list-style-type: disc;
    padding-left: 1rem;
}

.wrap_article li::marker { color: var(--verde_vivo); }


/* UTILITARIOS */
/* Paddings y Márgenes */
.mb_40 { margin-bottom: 2.5rem; }
.mb_100 { margin-bottom: 6.25rem; }

.py_40 {
    padding-top: 2.5rem;
    padding-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'); }

/* Textos */
.fs_3 { font-size: 1.75rem; }

.fw_bold { font-weight: bold; }

.f_italic { font-style: italic;}

.hero h1 { color: rgb(var(--blanco)); }

.wrap_article h6 {
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}

.selected { background-color: rgba(235, 118, 22, 0.5);}


/* 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_footer { align-items: center; }

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

    .hero {
        align-items: start;
        justify-content: center;
    }

    /* Grids */
    .grid_4 { 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: rgb(var(--blanco));
        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);
    }
}

@media (min-width: 1024px) {
    /* Imágenes */
    .site_brand { width: 192px; }

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

    /* Contenedores */
    .wrap_body {
        flex-direction: row;
        justify-content: space-between;
    }

    .wrap_article { width: 66.66%; }

    /* Aside */
    .comp_aside { width: 25%; }
}

@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; }

    h6 { font-size: 1.25rem; }

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

    /* Textos */
    .fs_3 { font-size: 1.85rem; }
}