/* reglas de contenedor */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
}
html, body {
    height: 100vh;
    width: 100vw;
    overflow-x: hidden; /* Previene el scroll horizontal */
}
div.headernew {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 4rem;
    padding: 0.6rem 0rem;
    background-color: var(--rojo_leon_2);
}
div.contenedor_base {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
    width: 100%;
    min-width: 100%;
    background-color: var(--neutral_2);
}
/* regla de visibilidad */
.oculto {
    display: none;
}
.visible {
    display: flex;
}
/* regla de textos */
h2, h3, p, a{
    color: var(--neutral_7);
    line-height: 1.35;
    white-space: pre-wrap;
    font-family: var(--fuente_1);
}
h2.titulos_especiales {
    font-family: var(--fuente_1);
    font-size: 22px;
    font-weight: 500;
}
h2.titulos {
    font-family: var(--fuente_1);
    font-size: 20px;
    font-weight: 500;
}
h3.subtitulos {
    font-family: var(--fuente_1);
    font-size: 18px;
    font-weight: 500;
}
h3.subtitulos_especiales {
    font-family: var(--fuente_1);
    font-size: 18px;
    font-weight: 500;
}
p.parrafos{
    font-size: 16px;
    font-family: var(--fuente_1);
}
p.parrafos_especiales{
    font-size: 16px;
    font-weight: 500;
    font-family: var(--fuente_1);
}
p.parrafos_especiales_v2{
    font-size: 18px;
    font-weight: 500;
    font-family: var(--fuente_1);
}
p.breadcrumbs{
    font-size: 14px;
    font-family: var(--fuente_1);
    font-weight: 500;
}
button.boton, a.boton{
    font-size: 16px;
    font-family: var(--fuente_1);
    font-weight: bold;
}
button, a {
    border-radius: 8px;
    cursor: pointer;
    transition: border-radius 0.5s ease;
}
button:hover, a:hover{
    border-radius: 5px;
    cursor: pointer;
}

/* regla de imagenes */
img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* O 'contain', según lo que necesites */
    object-position: center; /* Ajusta la posición de la imagen si es necesario */
    background-color: var(--transparente); /* Color de fondo para las áreas no cubiertas */
}
/* Reglas de movil */
@media (max-width: 768px) {
    /* Para navegadores webkit (Chrome, Safari, nuevas versiones de Edge) */

    body {
        height: auto !important;
        width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Ocultar la barra de desplazamiento para IE, Edge y Firefox */
    body {
        -ms-overflow-style: none;  /* IE y Edge */
    }
    /* Ocultar la barra de desplazamiento para Chrome, Safari y Opera */
    body::-webkit-scrollbar {
        display: none;
    }


    /* regla de textos */
    h2, h3, p, a{
        color: var(--neutral_7);
        white-space: pre-wrap;
        font-size: 14px;
    }
    h2.titulos_especiales {
        font-family: var(--fuente_1);
        font-size: 20px;
        font-weight: 500;
    }
    h2.titulos {
        font-family: var(--fuente_1);
        font-size: 18px;
        font-weight: 500;
    }
    h3.subtitulos {
        font-family: var(--fuente_1);
        font-size: 16px;
        font-weight: 500;
    }
    h3.subtitulos_especiales {
        font-family: var(--fuente_1);
        font-size: 17px;
        font-weight: 500;
    }
    p.parrafos{
        font-size: 14px;
        font-family: var(--fuente_1);
    }
    /*Este seria el nuevo o no?*/
    p.parrafos_especiales{
        font-size: 15px;
        font-weight: 500;
        font-family: var(--fuente_1);
    }
    p.breadcrumbs{
        font-size: 12px;
        font-family: var(--fuente_1);
        font-weight: 500;
    }
    button {
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: border-radius 0.5s ease;
    }
    button:hover{
        border-radius: 5px;
        cursor: pointer;
    }
}