/*
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 : 07/06/2023, 05:44:15 PM
    Author     : pcgc7
*/

/*********************** Estilos generales de la página ***********************/

* {
    box-sizing: border-box;
}
body {
    font-family: 'Open Sans', sans-serif;
    background-image: url('../imagenes/fondoAzul.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
:root {
    --colorAzul: #003958;
    --colorDorado: #b59a47;
    --colorBlanco: #fff;
    --colorWhitesmoke: #f5f5f5;
    --colorAlabaster: #f2f0e6;
    --colorSilver: #ccc;
    --colorRojo: #cc0000;
}
::-webkit-scrollbar {display: none;}

/********************** Estilos contenedor de la página ***********************/

.contenedor {
    display: grid;
    
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 15.25em repeat(10, 1fr);
   
    grid-template-areas:
    "encabezado encabezado encabezado encabezado encabezado encabezado"
    "texto      texto      texto      texto      texto      texto"
    "texto      texto      texto      texto      texto      texto"
    "texto      texto      texto      texto      texto      texto"
    "texto      texto      texto      texto      texto      texto"
    "texto      texto      texto      texto      texto      texto"
    "texto      texto      texto      texto      texto      texto"
    "texto      texto      texto      texto      texto      texto"
    "texto      texto      texto      texto      texto      texto"
    "texto      texto      texto      texto      texto      texto";
}

/*************************** Estilos sección header ***************************/

.contenedor .encabezado {
    grid-area: encabezado;
    
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 20;
    background: linear-gradient(to right, #f5f5f5 0%, #b59a47 100%);
    box-shadow: 0 0.625em 0.625em 0 rgba(0,0,0,0.5);
}
.contenedor .encabezado .logo {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.contenedor .encabezado .logo img {
    width: 65%;
    padding: 1em;
    margin: 1.85em 0;
}
.contenedor .encabezado .logo .btnMenu {
    display: none;
    color: var(--colorAzul);
    text-decoration: none;
    font-size: 1.5em;
}
.contenedor .encabezado .menu {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    
    border-top: 0.0625em solid var(--colorAzul);
}
.contenedor .encabezado .menu a {
    padding: 0.5em 0;
    margin: 0.5em 0;
    font-size: 1em;
    font-weight: 700;
    color: var(--colorAzul);
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 0.16em solid transparent;
}
.contenedor .encabezado .menu i {
    margin-right: 0.5em;
}
.contenedor .encabezado .menu a:hover {
    border-bottom: 0.16em solid var(--colorAzul);
}

/************************* Estilos sección principal **************************/

.contenedor .contenido {
    grid-area: texto;
    
    margin: 0 auto;
    max-width: 85%;
    padding: 1.25em;
    background: var(--colorWhitesmoke);
    border-radius: 0.625em;
    border: 0.125em solid var(--colorDorado);
    box-shadow: 0 0.625em 0.625em 0 rgba(0,0,0,0.5);
}
.contenedor .contenido .btnVolverArriba {
    display: none;
    width: 2.5em;
    height: 2.5em;
    padding: 0.65em 0.85em;
    font-size: 1.875em;
    border-radius: 50%;
    background: var(--colorAzul);
    color: var(--colorDorado);
    cursor: pointer;
    position: fixed;
    bottom: 0.5em;
    right: 1em;
}
.contenedor .contenido article h1 {
    font-size: 2em;
    font-weight: bold;
    margin: 0.3125em 0;
    color: var(--colorAzul);
}
.contenedor .contenido article hr {
    margin-bottom: 1.5em;
    height: 0.2em;
    background: var(--colorDorado);
    border: none;
}
.contenedor .contenido article p {     
    font-size: 1em;
    margin: 0.5em 0;
}

/* Agrega distintos tipos de formatos y caracteristicas especiales al texto */
.textoVinetas1 {
    list-style-type: disc;
}
.textoVinetas2 {
    list-style-type: square;
}
.textoVinetas1, .textoVinetas2 {
    margin-left: 0.3em;
}
.textoGrande {
    background: var(--colorWhitesmoke);
    width: 9em;
    height: 9em;
    float: left;
    margin-right: 0.5em;
    padding: 0.5em;
    font-size: 2em;
    font-weight: 700;
    line-height: 2em;
    border-right: 0.3125em solid var(--colorDorado);
}
.textoGrande h6 {
    text-indent: 0;
    margin: 0;
}
blockquote {
    text-align: center;
    font-weight: bold;
}

/* Cambia el color de los números, letras y separadores en listas ordenadas */
.formatoNumeros ol li {
    list-style-type: none;
    counter-increment: listaNumeros;
    position: relative;
    margin-left: 0.5em;
}
.formatoNumeros ol li::before {
    font-weight: bold;
    content: counter(listaNumeros)".";
    left: -2em;
    position: absolute;
    text-align: right;
    width: 1.5em;
}
.formatoLetras ol li {
    list-style-type: none;
    counter-increment: listaLetras;
    position: relative;
    margin-left: 0.5em;
}
.formatoLetras ol li::before {
    font-weight: bold;
    content: counter(listaLetras, lower-alpha)".";
    left: -2em;
    position: absolute;
    text-align: right;
    width: 1.5em;
}

/********************* Estilos para dispositivos móviles **********************/

/* 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) {
    .contenedor {
        grid-template-rows: 14em repeat(9, 1fr);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 60%;   
        margin: 1.5em 0;
    }
    
    /* Menú de opciones */
    .contenedor .encabezado .menu a {
        font-size: 1em;
    }
    .contenedor .encabezado .menu i {
        margin-right: 0.75em;
    }  
    
    /* Sección del artículo  */
    .contenedor .contenido {
        max-width: 85%;
    }  
    .contenedor .contenido article h1 {
        font-size: 1.75em;
    }
    .contenedor .contenido article h3 {
        font-size: 1em;
    }
    .contenedor .contenido article hr {
        height: 0.2em;
        margin-bottom: 1em;
    }   
    .contenedor .contenido .btnVolverArriba {
        font-size: 1.5em;
        bottom: 0.5em;
        right: 1em;
    }
    
    /* Formatos para los textos del artículo  */
    .contenedor .contenido article p,
    .formatoNumeros, .formatoLetras, .textoVinetas1,
    .textoVinetas2, blockquote {
        font-size: 1em;                                  
    } 
    .textoVinetas1, .textoVinetas2,
    .formatoNumeros, .formatoLetras {
        margin-left: -1em;
    }    
    .textoGrande {
        width: 9.5em;
        height: 9.5em;
        font-size: 1.75em;
        line-height: 2.2em;
        margin-right: 0.5em;
        padding: 0.25em 0.5em;
    }
}

/* Dispositivos con orientación horizontal con una resolución de pantalla mayor a 1200px y menor que 1424px */
@media screen and (min-width: 1200px) and (max-width: 1423.98px) {
    .contenedor {
        grid-template-rows: 13em repeat(9, 1fr);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 55%;        
        margin: 1.25em 0;
    }
    
    /* Menú de opciones */
    .contenedor .encabezado .menu a {
        font-size: 0.95em;
    }
    .contenedor .encabezado .menu i {
        margin-right: 0.75em;
    }  
    
    /* Sección del artículo  */
    .contenedor .contenido {
        max-width: 85%;
    }  
    .contenedor .contenido article h1 {
        font-size: 1.75em;
    }
    .contenedor .contenido article h3 {
        font-size: 0.95em;
    }
    .contenedor .contenido article hr {
        height: 0.2em;
        margin-bottom: 1em;
    }   
    .contenedor .contenido .btnVolverArriba {
        font-size: 1.5em;
        bottom: 0.5em;
        right: 0.75em;
    }
    
    /* Formatos para los textos del artículo  */
    .contenedor .contenido article p,
    .formatoNumeros, .formatoLetras, .textoVinetas1,
    .textoVinetas2, blockquote {
        font-size: 0.95em;                                  
    } 
    .textoVinetas1, .textoVinetas2,
    .formatoNumeros, .formatoLetras {
        margin-left: -1em;
    }    
    .textoGrande {
        width: 8.5em;
        height: 8.5em;
        font-size: 1.75em;
        line-height: 2em;
        margin-right: 0.5em;
        padding: 0.25em 0.5em;
    }
}

/* Dispositivos con orientación horizontal con una resolución de pantalla mayor a 992px y menor que 1200px */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {    
    .contenedor {
        grid-template-rows: 11.75em repeat(10, 1fr);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 50%;  
        margin: 1em 0;
    }
    
    /* Menú de opciones */
    .contenedor .encabezado .menu a {
        font-size: 0.85em;
    }
    .contenedor .encabezado .menu i {
        margin-right: 0.75em;
    }  
    
    /* Sección del artículo  */
    .contenedor .contenido {
        max-width: 85%;
    }  
    .contenedor .contenido article h1 {
        font-size: 1.5em;
    }
    .contenedor .contenido article h3 {
        font-size: 1em;
    }
    .contenedor .contenido article hr {
        height: 0.1em;
        margin-bottom: 1em;
    }   
    .contenedor .contenido .btnVolverArriba {
        font-size: 1.5em;
        bottom: 0.5em;
        right: 0.35em;
    }
    
    /* Formatos para los textos del artículo  */
    .contenedor .contenido article p,
    .formatoNumeros, .formatoLetras, .textoVinetas1,
    .textoVinetas2, blockquote {
        font-size: 0.95em;                                  
    } 
    .textoVinetas1, .textoVinetas2,
    .formatoNumeros, .formatoLetras {
        margin-left: -1.25em;
    }    
    .textoGrande {
        width: 8.5em;
        height: 8.5em;
        font-size: 1.75em;
        line-height: 2em;
        margin-right: 0.5em;
        padding: 0.25em 0.5em;
    }
}

/* 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) {               
    .contenedor {
        grid-template-rows: 10.25em repeat(10, 1fr);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 45%;  
        margin: 0.75em 0;
    }
    
    /* Menú de opciones */
    .contenedor .encabezado .menu a {
        font-size: 0.75em;
    }
    .contenedor .encabezado .menu i {
        margin-right: 0.75em;
    }  
           
    /* Sección del artículo  */
    .contenedor .contenido {
        max-width: 90%;
    }  
    .contenedor .contenido article h1 {
        font-size: 1.25em;
    }
    .contenedor .contenido article h3 {
        font-size: 0.75em;
    }
    .contenedor .contenido article hr {
        height: 0.1em;
        margin-bottom: 0.75em;
    }   
    .contenedor .contenido .btnVolverArriba {
        font-size: 1.5em;
        bottom: 0.5em;
        right: 0.25em;
    }
    
    /* Formatos para los textos del artículo  */
    .contenedor .contenido article p,
    .formatoNumeros, .formatoLetras, .textoVinetas1,
    .textoVinetas2, blockquote {
        font-size: 0.75em;                                  
    } 
    .textoVinetas1, .textoVinetas2,
    .formatoNumeros, .formatoLetras {
        margin-left: -1.25em;
    }    
    .textoGrande {
        width: 7.5em;
        height: 7.5em;
        font-size: 1.75em;
        line-height: 1.15em;
        margin-right: 0.5em;
        padding: 0.25em 0.5em;
    }
}

/* Estilo 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) {
    .contenedor {
        grid-template-rows: 9.75em repeat(10, 1fr);
    } 
    
    /* Encabezado */
    .contenedor .encabezado .logo {
        justify-content: space-between;
        margin-right: 1em;                    
    }    
    .contenedor .encabezado .logo img {
        width: 40%;
        margin: 0.5em 0;
    }
        
    /* Menú de opciones */
    .contenedor .encabezado .logo .btnMenu {
        display: inline-block;
        font-size: 1.25em;                                    
    }
    .contenedor .encabezado .menu a {
        font-size: 0.75em;
        padding: 0.75em 1em;
    }
    .contenedor .encabezado .menu i {
        margin-right: 0.75em;
    }
        
    /* Sección del artículo  */
    .contenedor .contenido {
        max-width: 90%;
    }  
    .contenedor .contenido article h1 {
        font-size: 1em;
    }
    .contenedor .contenido article h3 {
        font-size: 0.75em;
    }
    .contenedor .contenido article hr {
        height: 0.1em;
        margin-bottom: 0.75em;
    }                                                   
    .contenedor .contenido .btnVolverArriba {         
        font-size: 1em;                                    
        right: 0.25em;                                     
    }

    /* Formatos para los textos del artículo  */
    .contenedor .contenido article p,
    .formatoNumeros, .formatoLetras, .textoVinetas1,
    .textoVinetas2, blockquote {
        font-size: 0.75em;                                  
    } 
    .textoVinetas1, .textoVinetas2,
    .formatoNumeros, .formatoLetras {
        margin-left: -1.5em;        
    }                            
    .textoGrande {
        width: 6.5em;                                         
        height: 6.5em; 
        font-size: 1.75em; 
        line-height: 1em;
        margin-right: 0.5em;
        padding: 0.25em 0.5em;
    }
}

/* Dispositivos con orientación horizontal con una resolución de pantalla máxima de 576px */
@media screen and (max-width: 575.98px) {
    .contenedor {
        grid-template-rows: 6em repeat(10, 1fr);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo {
        justify-content: space-between;
        margin-right: 1em;                    
    }  
    .contenedor .encabezado .logo img {
        width: 35%;  
        margin: 0.25em 0;
    }
        
    /* Menú de opciones */
    .contenedor .encabezado .logo .btnMenu {
        display: inline-block;
        font-size: 1.25em;                                    
    }
    .contenedor .encabezado .menu a {
        font-size: 0.75em;
        padding: 0.75em 1em;
    }
    .contenedor .encabezado .menu i {
        margin-right: 0.75em;
    }
        
    /* Sección del artículo  */
    .contenedor .contenido {
        max-width: 90%;
    }  
    .contenedor .contenido article h1 {
        font-size: 1em;
    }
    .contenedor .contenido article h3 {
        font-size: 0.75em;
    }
    .contenedor .contenido article hr {
        height: 0.1em;
        margin-bottom: 0.75em;
    }                                                   
    .contenedor .contenido .btnVolverArriba {         
        font-size: 1em;                                    
        right: 0.25em;                                     
    }

    /* Formatos para los textos del artículo  */
    .contenedor .contenido article p,
    .formatoNumeros, .formatoLetras, .textoVinetas1,
    .textoVinetas2, blockquote {
        font-size: 0.75em;                                  
    } 
    .textoVinetas1, .textoVinetas2,
    .formatoNumeros, .formatoLetras {
        margin-left: -1.5em;        
    }                            
    .textoGrande {
        width: 6.5em;                                         
        height: 6.5em; 
        font-size: 1.75em;  
        line-height: 1em;
        margin-right: 0.5em;
        padding: 0.25em 0.5em;
    }
}