/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 14/01/2024, 12:07:44 PM
    Author     : pcgc7
*/

:root {
    --colorAzul: #003f6f;
    --colorDorado: #b59a47;
    --colorBlanco: #fff;
    --colorWhitesmoke: #f5f5f5;
    --colorAlabaster: #f2f0e6;
    --colorSilver: #ccc;
    --colorRojo: #cc0000;
}

/* Encabezado */
.encabezado { z-index: 50; background: linear-gradient(to right, var(--colorWhitesmoke) 0%, var(--colorDorado) 100%); box-shadow: 0 0.625em 0.625em 0 rgba(0,0,0,0.5); }
header a .img-fluid { max-width: 85%; }
header .p-4 { padding: 1.5em !important; }

/* Menú */
.menu ul li { font-size: 1.25em; }
.menu ul { justify-content: space-around; }

/* Botón del menú */
div.btnMenu i { font-size: 2em; }
div.btnMenu.mr-5 { margin-right: 3em !important; }
div.btnMenu.pb-3 { padding-bottom: 1em !important; }
li.nav-item.mx-5 { margin-left: 2em !important; margin-right: 2em !important; }

/* Sección de noticias */
.imgFondoAzul { background-image: url('../imagenes/fondoAzul.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
.contenido { max-width: 90% !important; }
.m-2 { margin: 0.5em !important; }
.mb-0.pt-3.font-weight-bold { padding-top: 1em !important; }
h2 { font-size: 2em !important; }
p { font-size: 0.85em; }
.icono { font-size: 2.5em; }
.row.my-5 { margin-top: 2.5em !important; margin-bottom: 2.5em !important; }
h3 { font-size: 1.5em !important; }
h5 { font-size: 1.25em !important; }
h6 { font-size: 1em !important; }
.card { width: 95% !important; }
.card-body .btn { font-size: 1em !important; }

/********************* Media queries *********************/

/* Dispositivos con orientación horizontal con una resolución de pantalla mayor a 1424px y menor que 1648px */
@media screen and (min-width: 1424px) and (max-width: 1647.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 80%; }
    header .p-4 { padding: 1.5em !important; }
            
    /* Menú */
    .menu ul li { font-size: 95%; }
    .menu ul { justify-content: space-around; }    
            
    /* Botón del menú */
    div.btnMenu i { font-size: 2em; }
    div.btnMenu.mr-5 { margin-right: 2.5em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0.75em !important; }
    li.nav-item.mx-5 { margin-left: 1.75em !important; margin-right: 1.75em !important; }
    
    /* Sección de noticias */
    .contenido { max-width: 90%!important; }    
    .m-2 { margin: 0.5em !important; }
    .mb-0.pt-3.font-weight-bold { padding-top: 0.75em !important; }
    h2 { font-size: 1.5em !important; }
    p { font-size: 0.75em; }
    .icono { font-size: 2.5em; }
    .row.my-5 { margin-top: 2.5em !important; margin-bottom: 2.5em !important; }
    h3 { font-size: 1.5em !important; }
    h5 { font-size: 1.25em !important; }
    h6 { font-size: 1em !important; }
    .card { width: 95% !important; }
    .card-body .btn { font-size: 1em !important; }
    
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 1200px y menor que 1424px */
@media screen and (min-width: 1200px) and (max-width: 1423.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 80%; }
    header .p-4 { padding: 1.25em !important; }
    
    /* Menú */
    .menu ul li { font-size: 90%; }
    .menu ul { justify-content: space-around; }    
                    
    /* Botón del menú */
    div.btnMenu i { font-size: 2em; }
    div.btnMenu.mr-5 { margin-right: 2.5em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0.75em !important; }
    li.nav-item.mx-5 { margin-left: 1.25em !important; margin-right: 1.25em !important; }
    
    /* Sección de noticias */
    .contenido { max-width: 90% !important; }
    .m-2 { margin: 0.5em !important; }
    .mb-0.pt-3.font-weight-bold { padding-top: 0.75em !important; }
    h2 { font-size: 1.5em !important; }
    p { font-size: 0.75em; }
    .icono { font-size: 2em; }
    .row.my-5 { margin-top: 2.25em !important; margin-bottom: 2.25em !important; }
    h3 { font-size: 1.25em !important; }
    h5 { font-size: 1em !important; }
    h6 { font-size: 0.75em !important; }
    .card { width: 95% !important; }
    .card-body .btn { font-size: 0.75em !important; }
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 992px y menor que 1200px */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 75%; }
    header .p-4 { padding: 1.25em!important; }       
    
    /* Menú */
    .menu ul li { font-size: 85%; }
    .menu ul { justify-content: space-around; }    
            
    /* Botón del menú */
    div.btnMenu i { font-size: 2em; }
    div.btnMenu.mr-5 { margin-right: 2em!important; }
    div.btnMenu.pb-3 { padding-bottom: 0.5em!important; }
    li.nav-item.mx-5 { margin-left: 1em!important; margin-right: 1em!important; }
    
    /* Sección de noticias */
    .contenido { max-width: 90% !important; }
    .m-2 { margin: 0.5em !important; }
    .mb-0.pt-3.font-weight-bold { padding-top: 0.75em !important; }
    h2 { font-size: 1.5em !important; }
    p { font-size: 0.75em; }
    .icono { font-size: 2em; }
    .row.my-5 { margin-top: 2em !important; margin-bottom: 2em !important; }
    h3 { font-size: 1.25em !important; }
    h5 { font-size: 1em !important; }
    h6 { font-size: 0.75em !important; }
    .card { width: 100% !important; }
    .card-body .btn { font-size: 0.75em !important; }      
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 768px y menor que 992px */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 70%; }
    header .p-4 { padding: 1.25em !important; }
        
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { justify-content: space-around; }
            
    /* Botón del menú */
    div.btnMenu i { font-size: 2em; }
    div.btnMenu.mr-5 { margin-right: 2em!important; }
    div.btnMenu.pb-3 { padding-bottom: 0.5em!important; }
    li.nav-item.mx-5 { margin-left: 0.75em!important; margin-right: 0.75em!important; }
    
    /* Sección de noticias */
    .contenido { max-width: 90% !important; }
    .m-2 { margin: 0.25em !important; }
    .mb-0.pt-3.font-weight-bold { padding-top: 0.75em !important; }
    h2 { font-size: 1.25em !important; }
    p { font-size: 0.75em; }
    .icono { font-size: 1.5em; }
    .row.my-5 { margin-top: 1.75em !important; margin-bottom: 1.75em !important; }
    h3 { font-size: 1em !important; }
    h5 { font-size: 1em !important; }
    h6 { font-size: 0.75em !important; }
    .card { width: 100% !important; }
    .card-body .btn { font-size: 0.75em !important; }     
}

/* Estilos para dispositivos con tamaño de pantalla mayor a 576px y menor que 768px */
@media screen and (min-width: 576px) and (max-width: 767.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 65%; }
    header .p-4 { padding: 1em !important; }    
    
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { display: flex; flex-direction: column; }
            
    /* Botón del menú */
    div.btnMenu i { font-size: 1.5em; }
    div.btnMenu.mr-5 { margin-right: 1.5em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0 !important; }
    li.nav-item.mx-5 { margin-left: 0.75em !important; margin-right: 0.75em !important; }
    
    /* Sección de noticias */
    .contenido { max-width: 90% !important; }
    .m-2 { margin: 0.25em !important; }
    .mb-0.pt-3.font-weight-bold { padding-top: 0.5em !important; }
    h2 { font-size: 1.25em !important; }
    p { font-size: 0.5em; }
    .icono { font-size: 1.5em; }
    .row.my-5 { margin-top: 1.5em !important; margin-bottom: 1.5em !important; }
    h3 { font-size: 1em !important; }
    h5 { font-size: 0.75em !important; }
    h6 { font-size: 0.5em !important; }
    .card { width: 100% !important; }
    .card-body .btn { font-size: 0.5em !important; } 
}

/* Estilos para dispositivos con tamaño de pantalla menor que 576px */
@media screen and (min-width: 481px) and (max-width: 575.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 55%; }
    header .p-4 { padding: 0.75em!important; }
    
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { display: flex; flex-direction: column; }
    
    /* Botón del menú */
    div.btnMenu i { font-size: 1.5em; }
    div.btnMenu.mr-5 { margin-right: 1.5em!important; }
    div.btnMenu.pb-3 { padding-bottom: 0!important; }
    li.nav-item.mx-5 { margin-left: 0.5em !important; margin-right: 0.5em !important; }
    
    /* Sección de noticias */
    .contenido { max-width: 90% !important; }
    .m-2 { margin: 0.25em !important; }
    .mb-0.pt-3.font-weight-bold { padding-top: 0.5em !important; }
    h2 { font-size: 1em !important; }
    p { font-size: 0.5em; }
    .icono { font-size: 1em; }
    .row.my-5 { margin-top: 1.25em !important; margin-bottom: 1.25em !important; }
    h3 { font-size: 0.75em !important; }
    h5 { font-size: 0.75em !important; }
    h6 { font-size: 0.5em !important; }        
    .card-body .btn { font-size: 0.5em !important; }   
}

/* Estilos para dispositivos con tamaño de pantalla menor que 480px */
@media screen and (max-width: 480px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 45%; }
    header .p-4 { padding: 0.75em!important; }
    
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { display: flex; flex-direction: column; }
    
    /* Botón del menú */
    div.btnMenu i { font-size: 1.5em; }
    div.btnMenu.mr-5 { margin-right: 1.5em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0 !important; }
    li.nav-item.mx-5 { margin-left: 0.5em !important; margin-right: 0.5em !important; }
        
    /* Sección de noticias */
    .contenido { max-width: 90% !important; }
    .m-2 { margin: 0.25em !important; }
    .mb-0.pt-3.font-weight-bold { padding-top: 0.5em !important; }
    h2 { font-size: 1em !important; }
    .icono { font-size: 1em; } 
    p { font-size: 0.5em; }     
    .row.my-5 { margin-top: 1em !important; margin-bottom: 1em !important; }
    h3 { font-size: 0.75em !important; }
    h5 { font-size: 0.75em !important; }
    h6 { font-size: 0.5em !important; }          
    .card-body .btn { font-size: 0.5em !important; }    
}