/*
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 : 08/06/2023, 09:15:38 AM
    Author     : pcgc7
*/

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

* {
    box-sizing: border-box;    
}
body {
    font-family: 'Open Sans', sans-serif;
}
:root {
    --colorAzul: #003958;
    --colorDorado: #b59a47;
    --colorBlanco: #fff;
    --colorWhitesmoke: #f5f5f5;
    --colorAlabaster: #f2f0e6;
    --colorSilver: #ccc;
    --colorOscuro: #333;
}
::-webkit-scrollbar {display: none;}

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

.contenedor {
    display: grid;
    
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(12, 10.5em);    
    
    grid-template-areas:
    "encabezado encabezado encabezado encabezado encabezado encabezado"
    "contenido  contenido  contenido  contenido  contenido  contenido"
    "contenido  contenido  contenido  contenido  contenido  contenido"
    "contenido  contenido  contenido  contenido  contenido  contenido"
    "contenido  contenido  contenido  contenido  contenido  contenido"
    "contenido  contenido  contenido  contenido  contenido  contenido"        
    "contenido  contenido  contenido  contenido  contenido  contenido"    
    "contenido  contenido  contenido  contenido  contenido  contenido"
    "contenido  contenido  contenido  contenido  contenido  contenido"
    "contenido  contenido  contenido  contenido  contenido  contenido"    
    "piepagina  piepagina  piepagina  piepagina  piepagina  piepagina"    
    "piepagina  piepagina  piepagina  piepagina  piepagina  piepagina";
}

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

.contenedor .encabezado {
    grid-area: encabezado;
    
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
                    
    width: 100%;    
    z-index: 80; 
    background: linear-gradient(to right, #f5f5f5 0%, #b59a47 100%);        
    box-shadow: 0 0.75em 0.75em 0 rgba(0,0,0,0.5);           
}
.contenedor .encabezado .logo img {
    width: 65%;
    padding-left: 1em;
}

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

.contenedor .contenido {
    grid-area: contenido;

    display: grid;    
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(9, 10.5em);
                
    grid-template-areas:    
    "opciones   opciones   opciones   opciones   opciones   opciones"
    "opciones   opciones   opciones   opciones   opciones   opciones"
    "opciones   opciones   opciones   opciones   opciones   opciones"
    "opciones   opciones   opciones   opciones   opciones   opciones"
    "opciones   opciones   opciones   opciones   opciones   opciones"        
    "imagenes   imagenes   imagenes   imagenes   imagenes   imagenes"
    "imagenes   imagenes   imagenes   imagenes   imagenes   imagenes"
    "imagenes   imagenes   imagenes   imagenes   imagenes   imagenes"      
    "imagenes   imagenes   imagenes   imagenes   imagenes   imagenes";
}

/******************** Estilos imagen de fondo *********************************/

.contenedor .contenido .imagenFondo {
    grid-area: opciones;
            
    display: flex;    
    align-items: center; 
    
    background-image: url('../imagenes/ImgIglesia_1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 70;
    box-shadow: 0 0.75em 0.75em 0 rgba(0,0,0,0.7);
}

/******************** Estilos de opciones del menú ****************************/

.contenedor .contenido .fondoMenu {
    display: flex;
    flex-direction: column;    
    
    height: 60%;
    width: 100%;
    text-align: center;
    background-color: rgba(255,255,255,0.5);                
}
.contenedor .contenido .marcoTitulo {     
    margin: 3.5em 0;
}
.contenedor .contenido .titulo {          
    font-weight: 700;
    z-index: 60;
    text-transform: uppercase;
    margin: 0;
}

/* Recuadro que envuelve el texto del título */
.titulo span {
    position: relative;
    z-index: 50;
    padding: 0.5em 3em;
    background-color: var(--colorAzul);
    color: var(--colorDorado);    
    border-radius: 0.3125em;        
}

/* Línea creada que acompaña el texto del título */
.titulo::after {
    content: "";
    display: inline-block;
    height: 0.125em;
    width: 90%;
    background: var(--colorAzul);
    position: relative;
    top: -1.5em;
    z-index: 40;
}
.contenedor .contenido .menu {
    display: flex;    
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 7.5em;
}
.contenedor .contenido .menu .item {                
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    width: 20%;    
    height: 100%; 
    padding-top: 2em;
    padding-bottom: 1em;
    text-decoration: none;    
    color: var(--colorAzul);
    transition: all ease .3s;
    box-shadow: 0 0.625em 0.625em rgba(0, 0, 0, 0.6);       
    border: 0.125em solid var(--colorSilver);
    border-radius: 0.625em;  
}
.contenedor .contenido .menu .item:hover {    
    border: 0.15em solid var(--colorAzul);
    background: var(--colorAlabaster);
    border-radius: 0.625em;
    cursor: pointer;
}
.contenedor .contenido .menu .opcion {
    font-size: 3.5em;
}

/******************** Estilos galería de imágenes *****************************/

.contenedor .contenido .carrusel {
    grid-area: imagenes;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    background-image: url('../imagenes/imgMuro.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;                  
}
.contenedor .carrusel .contenedor-imagenes {               
    max-width: 85%;    
}
.contenedor .carrusel .contenedor-imagenes .items {
    width: 85%;
    height: 85%;
    margin: 3.5em 2.15em;     
    position: relative;
}
.contenedor .carrusel .contenedor-imagenes .items .overlay {
    width: 85%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;        
    border-radius: 0.5em;    
    background: rgba(0, 0, 0, 0.5);
}
.contenedor .carrusel .contenedor-imagenes .slick-center .overlay {
    opacity: 0;    
}
.contenedor .carrusel .contenedor-imagenes .items img {
    width: 85%;
    height: 85%;
    border: 0.5em double var(--colorAzul);
    border-radius: 0.5em;
    padding: 0.5em;
    transition: all linear .4s;
}
.contenedor .carrusel .contenedor-imagenes .slick-center img {
    transform: scale(1.2);
}

/******************** Estilos flechas siguiente y anterior ********************/

.contenedor-imagenes .flecha-previo,
.contenedor-imagenes .flecha-siguiente {
    position: absolute;
    top: 39%;
    z-index: 30;
    color: var(--colorAzul);
    width: 1.5em;
    font-size: 4em;
    text-align: center;
}
/* La flecha izquierda se ubica fuera de las imagenes */
.contenedor-imagenes .flecha-previo {    
    left: -8%;
}
/* La flecha derecha se ubica fuera de las imagenes */
.contenedor-imagenes .flecha-siguiente {    
    right: -8%;    
}
.contenedor-imagenes .flecha-previo:hover,
.contenedor-imagenes .flecha-siguiente:hover {
    cursor: pointer;
    color: var(--colorDorado);
}

/******************** Estilos botones indicadores  ****************************/

.contenedor-imagenes .slick-dots {
    position: relative;
    bottom: 0;
    left: 0;
    width: 30%;
    z-index: 30;
    text-align: center;
    margin: 0 auto;
}
.contenedor-imagenes ul.slick-dots {
    padding: 0;    
}
.contenedor-imagenes .slick-dots li {
    list-style: none;
    width: 0.75em;
    height: 0.75em;
    background: var(--colorAzul);
    border-radius: 50%;
    display: inline-block;
    margin: 0.35em;
}
.contenedor-imagenes .slick-dots li.slick-active {
    background: var(--colorDorado);
}
.contenedor-imagenes .slick-dots li button {
    display: none;
}

/******************** Estilos para el pie de la página ************************/

.contenedor .contenedorPiepagina {
    grid-area: piepagina;  
    
    display: flex;             
    flex-wrap: wrap;         
    background-color: var(--colorAzul);
    z-index: 20; 
}
.contenedor .contenedorPiepagina .contenidoFooter {
    display: flex;    
    flex-direction: row; 
    justify-content: space-around;
    align-items: center;
    width: 100%;
}
.wave {
    height: 25%;
    width: 100%;
    position: relative;
    bottom: 2.75em;    
}
.columna-menu, .columna-redes, .columna-contacto {
    width: 25%;
    margin-bottom: 1em;
}
.columna-logo {
    display: flex;
    flex-direction: column;    
    align-items: center;
    
    width: 25%;
}
.columna-logo img {
    width: 50%;
}
.columna-menu h2, .columna-redes h2, .columna-contacto h2 {
    font-size: 1em;
    margin-top: 0;    
    font-weight: 600;
    color: var(--colorDorado);
}
.columna-menu a, .columna-menu ul, .columna-redes .redes label,
.columna-redes .redes .icono, .columna-contacto .datos, 
.columna-contacto .datos a {
    color: var(--colorBlanco);
}
.columna-menu a, .columna-redes .redes a, .columna-contacto .datos a {    
    text-decoration: none;    
}
.columna-menu a:hover, .columna-redes .redes a label:hover,
.columna-contacto .datos a:hover {
    color: var(--colorDorado); 
}
.columna-menu ul {
    display: flex;
    flex-direction: column;    
    align-items: flex-start;
    
    font-size: 0.8em;
    margin: 0 1em; 
    padding-left: 0.75em;
    line-height: 2em;       
}
.columna-redes .redes, .columna-contacto .datos {
    display: flex;
    flex-direction: row;    
    align-items: center;    
}
.columna-redes .redes .icono, .columna-contacto .datos .icono {
    width: 1.25em;                                          
    font-size: 1.25em;                                         
    text-align: center;
}
.columna-redes .redes label, .columna-contacto .datos label,
.columna-contacto .datos a {
    margin-left: 1em;                                       
}
.columna-redes .redes, .columna-contacto .datos {        
    font-size: 0.8em;
    line-height: 2.75em;
}
.contenedorInformacion {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    width: 100%;
    height: 18%;           
    background: var(--colorAzul);
    border-top: 0.0625em solid var(--colorDorado);           
}
.barraInfo {
    font-size: 0.8em;
    color: var(--colorDorado);
}

/********************** 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: repeat(12, 8em);
    }
    .contenedor .contenido {
        grid-template-rows: repeat(9, 8em);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 60%;
    }

    /* Menú de opciones */
    .contenedor .contenido .fondoMenu {
        height: 60%;
    }
    .contenedor .contenido .marcoTitulo {
        margin: 1.75em 0;
    }        
    .contenedor .contenido .titulo, .tituloItem {
        font-size: 1.25em;
        margin: 1em 0;        
    }
    .contenedor .contenido .menu {                    
        margin-top: 4em;        
    } 
    .contenedor .contenido .menu .item {                    
        width: 20%;            
        padding-top: 1.75em;                             
        padding-bottom: 0.75em;
        background-color: var(--colorWhitesmoke);    
    }     
    .contenedor .contenido .menu .opcion {
        font-size: 2em;
    }  
  
    /* Carrusel de imágenes */
    .contenedor .carrusel .contenedor-imagenes {
        max-width: 85%;        
    }
    .contenedor .carrusel .contenedor-imagenes .items {        
        margin: 3.5em 2em;             
    }
    .contenedor .carrusel .contenedor-imagenes .items,
    .contenedor .carrusel .contenedor-imagenes .items img {
        width: 85%;
        height: 85%;        
    }
    .contenedor .carrusel .contenedor-imagenes .items .overlay {
        width: 85%;
        height: 99%;        
    }
    .contenedor .carrusel .contenedor-imagenes .items img {
        padding: 0.25em;
    }       
    .contenedor-imagenes .flecha-previo,
    .contenedor-imagenes .flecha-siguiente {          
        font-size: 4em;        
    } 
    .contenedor-imagenes .flecha-previo {
        left: -6%;
    }
    .contenedor-imagenes .flecha-siguiente {
        right: -6%;
    }
    .contenedor-imagenes .slick-dots {  
        width: 30%;
        bottom: 1em;          
    }
    .contenedor-imagenes .slick-dots li {        
        width: 0.75em;
        height: 0.75em;        
    }         
                        
    /* Footer */
    .contenedor .contenedorPiepagina {
        align-content: center;
    }
    .contenedor .contenedorPiepagina .wave {
        bottom: 2.5em;
    }
    .columna-logo img {
        width: 50%;
    }
    .columna-menu, .columna-redes, .columna-contacto {
        width: 25%;
    }
    .columna-menu ul {
        font-size: 0.8em;
        line-height: 1.95em;
        padding-left: 0.75em;
    }
    .columna-redes .redes, .columna-contacto .datos {
        font-size: 0.8em;
        line-height: 2.6em;
    }
    .columna-redes .redes .icono, .columna-contacto .datos .icono {
        font-size: 1.25em;
    }
    .columna-menu h2, .columna-redes h2, .columna-contacto h2 {
        font-size: 1em;
    }
    .contenedorInformacion .barraInfo {
        font-size: 0.8em;
    }
}

/* 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: repeat(12, 8em);
    }
    .contenedor .contenido {
        grid-template-rows: repeat(9, 8em);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 55%;
    }
            
    /* Menú de opciones */
    .contenedor .contenido .fondoMenu {
        height: 60%;
    }
    .contenedor .contenido .marcoTitulo {
        margin: 1.75em 0;
    }        
    .contenedor .contenido .titulo, .tituloItem {
        font-size: 1.25em;
        margin: 1em 0;        
    }
    .contenedor .contenido .menu {                    
        margin-top: 4.5em;        
    } 
    .contenedor .contenido .menu .item {                    
        width: 20%;            
        padding-top: 1.5em;                             
        padding-bottom: 0.75em;
        background-color: var(--colorWhitesmoke);    
    }     
    .contenedor .contenido .menu .opcion {
        font-size: 2em;
    }  
            
    /* Carrusel de imágenes */
    .contenedor .carrusel .contenedor-imagenes {
        max-width: 85%;        
    }
    .contenedor .carrusel .contenedor-imagenes .items {        
        margin: 3.5em 1.75em;             
    }
    .contenedor .carrusel .contenedor-imagenes .items,
    .contenedor .carrusel .contenedor-imagenes .items img {
        width: 85%;
        height: 85%;        
    }
    .contenedor .carrusel .contenedor-imagenes .items .overlay {
        width: 85%;
        height: 99%;        
    }
    .contenedor .carrusel .contenedor-imagenes .items img {
        padding: 0.25em;
    }
    .contenedor-imagenes .flecha-previo,
    .contenedor-imagenes .flecha-siguiente {          
        font-size: 3em;        
    } 
    .contenedor-imagenes .flecha-previo {
        left: -6%;
    }
    .contenedor-imagenes .flecha-siguiente {
        right: -6%;
    }
    .contenedor-imagenes .slick-dots {  
        width: 30%;
        bottom: 1em;          
    }
    .contenedor-imagenes .slick-dots li {        
        width: 0.75em;
        height: 0.75em;        
    }         
    
    /* Footer */
    .contenedor .contenedorPiepagina {
        align-content: center;
    }
    .contenedor .contenedorPiepagina .wave {
        bottom: 2.5em;
    }
    .columna-logo img {
        width: 50%;
    }
    .columna-menu, .columna-redes, .columna-contacto {
        width: 25%;
    }
    .columna-menu ul {
        font-size: 0.8em;
        line-height: 1.95em;
        padding-left: 0.75em;
    }
    .columna-redes .redes, .columna-contacto .datos {
        font-size: 0.8em;
        line-height: 2.6em;
    }
    .columna-redes .redes .icono, .columna-contacto .datos .icono {
        font-size: 1.25em;
    }
    .columna-menu h2, .columna-redes h2, .columna-contacto h2 {
        font-size: 1em;
    }
    .contenedorInformacion .barraInfo {
        font-size: 0.8em;
    }
}

/* 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: repeat(12, 8em);
    }
    .contenedor .contenido {
        grid-template-rows: repeat(9, 8em);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 50%;
    }
            
    /* Menú de opciones */
    .contenedor .contenido .fondoMenu {
        height: 55%;
    }
    .contenedor .contenido .marcoTitulo {
        margin: 1.75em 0;
    }        
    .contenedor .contenido .titulo, .tituloItem {
        font-size: 1em;
        margin: 1em 0;        
    }
    .contenedor .contenido .menu {                    
        margin-top: 5.25em;        
    } 
    .contenedor .contenido .menu .item {                    
        width: 20%;
        padding-top: 1.25em; 
        padding-bottom: 0.5em;
        background-color: var(--colorWhitesmoke);
    }     
    .contenedor .contenido .menu .opcion {
        font-size: 1.75em;
    }  
                
    /* Carrusel de imágenes */
    .contenedor .carrusel .contenedor-imagenes {
        max-width: 85%;        
    }
    .contenedor .carrusel .contenedor-imagenes .items {        
        margin: 3.5em 1.35em;             
    }
    .contenedor .carrusel .contenedor-imagenes .items,
    .contenedor .carrusel .contenedor-imagenes .items img {
        width: 85%;
        height: 85%;        
    } 
    .contenedor .carrusel .contenedor-imagenes .items .overlay {
        width: 85%;
        height: 99%;        
    } 
    .contenedor .carrusel .contenedor-imagenes .items img {
        padding: 0.25em;
    }
    .contenedor-imagenes .flecha-previo,
    .contenedor-imagenes .flecha-siguiente {          
        font-size: 2em;        
    } 
    .contenedor-imagenes .flecha-previo {
        left: -6%;
    }
    .contenedor-imagenes .flecha-siguiente {
        right: -6%;
    }
    .contenedor-imagenes .slick-dots {  
        width: 30%;
        bottom: 1.5em;          
    }
    .contenedor-imagenes .slick-dots li {        
        width: 0.75em;
        height: 0.75em;        
    }  
                        
    /* Footer */
    .contenedor .contenedorPiepagina {
        align-content: center;
    }
    .contenedor .contenedorPiepagina .wave {
        bottom: 2.5em;
    }
    .columna-logo img {
        width: 50%;
    }
    .columna-menu, .columna-redes, .columna-contacto {
        width: 25%;
    }
    .columna-menu ul {
        font-size: 0.7em;
        line-height: 1.8em;
        padding-left: 0.75em;
    }
    .columna-redes .redes, .columna-contacto .datos {
        font-size: 0.7em;
        line-height: 2.45em;
    }
    .columna-redes .redes .icono, .columna-contacto .datos .icono {
        font-size: 1.25em;
    }
    .columna-menu h2, .columna-redes h2, .columna-contacto h2 {
        font-size: 1em;
    }
    .contenedorInformacion .barraInfo {
        font-size: 0.7em;
    }
}

/* 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: repeat(12, 6.45em);
    }
    .contenedor .contenido {
        grid-template-rows: repeat(9, 6.45em);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 45%;
    }
        
    /* Menú de opciones */
    .contenedor .contenido .fondoMenu {
        height: 55%;
    }
    .contenedor .contenido .marcoTitulo {
        margin: 1.25em 0;
    }        
    .contenedor .contenido .titulo, .tituloItem {
        font-size: 0.75em;
        margin: 1em 0;        
    }
    .contenedor .contenido .menu {                    
        margin-top: 5.25em;        
    } 
    .contenedor .contenido .menu .item {                    
        width: 20%;
        padding-top: 1em; 
        padding-bottom: 0.25em;       
        background-color: var(--colorWhitesmoke);
    }     
    .contenedor .contenido .menu .opcion {
        font-size: 1.5em;
    }  
    
    /* Carrusel de imágenes */
    .contenedor .carrusel .contenedor-imagenes {
        max-width: 85%;        
    }
    .contenedor .carrusel .contenedor-imagenes .items {        
        margin: 3.5em 1em;             
    }
    .contenedor .carrusel .contenedor-imagenes .items,
    .contenedor .carrusel .contenedor-imagenes .items img {
        width: 85%;
        height: 85%;        
    }
    .contenedor .carrusel .contenedor-imagenes .items .overlay {
        width: 85%;
        height: 98%;        
    }
    .contenedor .carrusel .contenedor-imagenes .items img {
        padding: 0.25em;
    }
    .contenedor-imagenes .flecha-previo,
    .contenedor-imagenes .flecha-siguiente {          
        font-size: 1.75em;        
    } 
    .contenedor-imagenes .flecha-previo {
        left: -7%;
    }
    .contenedor-imagenes .flecha-siguiente {
        right: -7%;
    }
    .contenedor-imagenes .slick-dots {  
        width: 30%;
        bottom: 2em;          
    }
    .contenedor-imagenes .slick-dots li {        
        width: 0.5em;
        height: 0.5em;        
    }  
        
    /* Footer */
    .contenedor .contenedorPiepagina {
        align-content: center;
    }
    .contenedor .contenedorPiepagina .wave {
        bottom: 2.25em;
    }
    .columna-logo, .columna-logo img {
        display: none;
    }
    .columna-menu, .columna-redes, .columna-contacto {
        width: 25%;
    }
    .columna-menu ul {
        font-size: 0.6em;
        line-height: 1.8em;
        padding-left: 0.75em;
    }
    .columna-redes .redes, .columna-contacto .datos {
        font-size: 0.6em;
        line-height: 2.15em;
    }
    .columna-redes .redes .icono, .columna-contacto .datos .icono {
        font-size: 1em;
    }
    .columna-menu h2, .columna-redes h2, .columna-contacto h2 {
        font-size: 0.85em;
    }
    .contenedorInformacion .barraInfo {
        font-size: 0.6em;
    }    
}

/* 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: repeat(12, 5.55em);
    }
    .contenedor .contenido {
        grid-template-rows: repeat(9, 5.55em);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 40%;
    }
    
    /* Menú de opciones */
    .contenedor .contenido .fondoMenu {
        height: 55%;
    }
    .contenedor .contenido .marcoTitulo {
        margin: 1em 0;
    }        
    .contenedor .contenido .titulo, .tituloItem {
        font-size: 0.75em;
        margin: 1em 0;        
    }
    .contenedor .contenido .menu {                    
        margin-top: 3.75em;        
    } 
    .contenedor .contenido .menu .item {                    
        width: 20%;
        padding-top: 0.75em; 
        padding-bottom: 0em;       
        background-color: var(--colorWhitesmoke);
    }     
    .contenedor .contenido .menu .opcion {
        font-size: 1.5em;
    }  
            
    /* Carrusel de imágenes */
    .contenedor .carrusel .contenedor-imagenes {
        max-width: 85%;        
    }
    .contenedor .carrusel .contenedor-imagenes .items {        
        margin: 3.5em 0.8em;             
    }
    .contenedor .carrusel .contenedor-imagenes .items,
    .contenedor .carrusel .contenedor-imagenes .items img {
        width: 85%;
        height: 85%;        
    } 
    .contenedor .carrusel .contenedor-imagenes .items .overlay {
        width: 85%;
        height: 98%;        
    } 
    .contenedor .carrusel .contenedor-imagenes .items img {
        padding: 0.25em;
    }
    .contenedor-imagenes .flecha-previo,
    .contenedor-imagenes .flecha-siguiente {          
        font-size: 1.5em;        
    } 
    .contenedor-imagenes .flecha-previo {
        left: -7%;
    }
    .contenedor-imagenes .flecha-siguiente {
        right: -7%;
    }
    .contenedor-imagenes .slick-dots {  
        width: 30%;
        bottom: 2em;          
    }
    .contenedor-imagenes .slick-dots li {        
        width: 0.5em;
        height: 0.5em;        
    }  
    
    /* Footer */
    .contenedor .contenedorPiepagina {
        align-content: center;
    }
    .contenedor .contenedorPiepagina .wave {
        bottom: 2em;
    }
    .columna-logo, .columna-logo img {
        display: none;
    }
    .columna-menu, .columna-redes, .columna-contacto {
        width: 25%;
    }
    .columna-menu ul {
        font-size: 0.5em;
        line-height: 1.65em;
        padding-left: 0.75em;
    }
    .columna-redes .redes, .columna-contacto .datos {
        font-size: 0.5em;
        line-height: 2em;
    }
    .columna-redes .redes .icono, .columna-contacto .datos .icono {
        font-size: 0.5em;
    }
    .columna-menu h2, .columna-redes h2, .columna-contacto h2 {
        font-size: 0.75em;
    }
    .contenedorInformacion .barraInfo {
        font-size: 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: repeat(12, 4.3em);
    }
    .contenedor .contenido {
        grid-template-rows: repeat(9, 4.3em);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 35%;
    }
    
    /* Menú de opciones */
    .contenedor .contenido .fondoMenu {
        height: 60%;
    }
    .contenedor .contenido .marcoTitulo {
        margin: 1em 0;
    }        
    .contenedor .contenido .titulo, .tituloItem {
        font-size: 0.70em;
        margin: 1em 0;        
    }
    .contenedor .contenido .menu {                    
        margin-top: 1.75em;        
    } 
    .contenedor .contenido .menu .item {                    
        width: 20%;
        padding-top: 0.75em; 
        padding-bottom: 0em;   
        background-color: var(--colorWhitesmoke);
    }     
    .contenedor .contenido .menu .opcion {
        font-size: 1.5em;
    }  
            
    /* Carrusel de imágenes */
    .contenedor .carrusel .contenedor-imagenes {
        max-width: 85%;        
    }
    .contenedor .carrusel .contenedor-imagenes .items {
        margin: 3.5em 0.75em;             
    }
    .contenedor .carrusel .contenedor-imagenes .items,
    .contenedor .carrusel .contenedor-imagenes .items img {
        width: 85%;
        height: 85%;         
    }  
    .contenedor .carrusel .contenedor-imagenes .items .overlay {
        width: 85%;
        height: 97%;         
    }  
    .contenedor .carrusel .contenedor-imagenes .items img {
        padding: 0.25em;
    }
    .contenedor-imagenes .flecha-previo,
    .contenedor-imagenes .flecha-siguiente {          
        font-size: 1.5em;        
    } 
    .contenedor-imagenes .flecha-previo {
        left: -7%;
    }
    .contenedor-imagenes .flecha-siguiente {
        right: -7%;
    }
    .contenedor-imagenes .slick-dots {  
        width: 30%;
        bottom: 2em;          
    }
    .contenedor-imagenes .slick-dots li {        
        width: 0.5em;
        height: 0.5em;        
    }  
            
    /* Footer */
    .contenedor .contenedorPiepagina {
        align-content: center;
    }
    .contenedor .contenedorPiepagina .wave {
        bottom: 1.5em;
    }
    .columna-logo, .columna-logo img {
        display: none;
    }
    .columna-menu, .columna-redes, .columna-contacto {
        width: 25%;
    }
    .columna-menu ul {
        font-size: 0.5em;
        line-height: 1.5em;
        padding-left: 0.75em;
    }
    .columna-redes .redes, .columna-contacto .datos {
        font-size: 0.5em;
        line-height: 1.85em;
    }
    .columna-redes .redes .icono, .columna-contacto .datos .icono {
        font-size: 0.5em;
    }
    .columna-menu h2, .columna-redes h2, .columna-contacto h2 {
        font-size: 0.65em;
    }
    .contenedorInformacion .barraInfo {
        font-size: 0.5em;
    }
}