/************************* VARIABLES ****************************/
:root{
    --menu-translate: 150%;
    --menu-display-responsive : none;

    --pico-primary-focus: var(--pico-primary-hover) !important;
    /* --pico-text-selection-color: var(--pico-primary-hover) !important;  */
}

[data-theme='light']:root{
    --background-component-color: #f3f3f3;
    --background-color-footer: rgb(216, 216, 216);
    --menu-border-color: #b1b1b1;

    --cms-button-color: #fff;
}

[data-theme='dark']:root{
    --background-component-color: #171b25; /*#13171f*/
    --background-color-footer: #0f121a;
    --menu-border-color: #131313;

    --cms-button-color: #fff;
}

body{
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
}
body::-webkit-scrollbar { display: none }

body *{
    transition: color .3s, background-color .4s;
}

button{
    background-color: var(--pico-primary);
    border-color: var(--pico-primary);
}

/************************* HEADER ****************************/

.cms-topData{ background-color: var(--pico-primary) }
.cms-topData div{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    justify-content: space-between;
    padding: 8px 5px;
    color: #fff;
    font-size: .8em;
}
.cms-topData i{ margin-right: 5px; }

/* @media screen and (max-width: 850px){
    .cms-TopData{ display: none }
} */

.cms-header{
    position: relative;
    z-index: 100;
    border-bottom: 1px solid var(--menu-border-color);
}
.cms-header ul:first-child li{ padding: 0; padding-left: 10px }
.cms-header img{ height: 80px }

.cms-menu{
    display: var(--menu-display-responsive);
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    width: 100%;
    /* display: flex; */
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: var(--pico-background-color);
    box-shadow: 0px 15px 11px -7px rgba(0,0,0,0.18);
    padding-top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 300px;
    /* transform: translateX(var(--menu-translate));
    transition: transform .4s; */
}
.cms-menu li a:hover{ text-decoration: none }

.cms-menu::-webkit-scrollbar { width: 12px }
.cms-menu::-webkit-scrollbar-track { background: var(--pico-background-color) }
.cms-menu::-webkit-scrollbar-thumb {
    background-color: var(--pico-h4-color);
    border-radius: 20px;
    border: 4px solid var(--pico-background-color);
}

@media screen and (max-width: 1024px){
    .cms-menu li{
        width: 100%;
        padding: 0;
        margin: 9px 0;
    }
    .cms-menu li:first-child{ margin-top: 0 }
    .cms-menu li a{ display: block; padding: 14px 20px; font-size: 1.2em; }
    .cms-menu li a:hover{ background-color: var(--pico-text-selection-color); color: #fff; }
}

.cms-menu--activo{
    --menu-translate: 0;
    --menu-display-responsive: flex;
}

@media screen and (min-width: 1024px){
    #ButtonMenu{ display:none }

    .cms-menu{ 
        --menu-translate: 0px;
        --menu-display-responsive: block;
        position: relative;
        /* display: block; */
        width: fit-content;
        background-color: transparent;
        box-shadow: none;
        min-height: auto;
    }
    .cms-menu li a{ position: relative }
    .cms-menu li a::after{
        content: '';
        position: absolute;
        bottom: 2px;
        left: 3px;
        width: calc(100% - 3px);
        height: 2px;
        background-color: var(--pico-primary);
        border-radius: 6px;
        transform-origin: center;
        transform: scaleX(0);
        transition: transform .3s;
    } 
    .cms-menu li a:hover::after{ 
        transform: scaleX(1);
    }

}

/* Permitir que el menu se deslize junto con el scroll */
.cms-stickyHeader{
    background-color: var(--pico-background-color);
    position: sticky;
    top: 0;
    /* border-bottom: 1px solid #b1b1b1; */
}

/*********************** CLASES DEFINIDAS *******************/

#Loading{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    background-color: var(--pico-background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.loading-rueda{
    border: 6px solid var(--pico-primary);
    border-radius: 50%;
    border-left-color: transparent;
    width: 50px;
    height: 50px;
    animation: giro 1s linear infinite;
}

@keyframes giro {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
}

.cms-staticButton{
    position: fixed;
    right: 20px;
    bottom: 15px;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

#WhatsappButton{
    background-color: #25D366;
    border-color: #25D366;
    box-shadow: none !important;
    padding: 0;
}
#WhatsappButton a{
    width: 100%;
    color: #fff;
    display: block;
}
#WhatsappButton a i{
    margin-top: 1px;
    font-size: 26px;
}

#AlternThemeButton::before{
    font: var(--fa-font-solid);
    content: '\f186';
    font-size: 1.1em;
    display: inline-block;
}

[data-theme='dark']{
    #AlternThemeButton::before{
        content: '\f185';
    }
}

.cms-errorMessage{
    text-align: center;
    max-width: 600px;
    min-height: 70vh;
    margin:  auto;
    display: flex;
    gap: 2em;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.cms-errorMessage img{ width: 300px }

.cms-notFound{
    height: calc(100vh - var(--pico-block-spacing-vertical) * 2);
}

.cms-botonConEnlace{
    padding: 0;
    font-size: 1em;
}
.cms-botonConEnlace a{
    display: block;
    text-decoration:none; 
    color: var(--cms-button-color); 
    padding:10px;
}

.cms-footer{
    background-color: var(--background-color-footer);
    margin-top: 3em;
    padding-bottom: 10px;
}
.cms-footer h5{
    font-size: 1em;
    margin-bottom: 10px;
}

.cms-footerBloques{
    display: flex;
    flex-wrap: wrap;
    gap: 40px 80px;
}

.cms-footerBloques ul{ padding-inline-start: 30px; }
.cms-footerBloques ul li{ list-style: none; font-size: .8em; }
.cms-footerBloques ul li a{ text-decoration: none; font-size: 1em; }
.cms-footerCopyright{ text-align: center; margin-top: 40px; margin-bottom: 0; font-size: .8em; }

@media screen and (max-width: 768px){
    .cms-footerImage{ width: 100%; }
    .cms-footerBloques{ row-gap: 40px; }
}

@media screen and (max-width: 500px){
    .cms-footerBloques{ flex-direction: column }
}


/************************ CABECERAS *************************/
.cms-cabecera{
    width: 100%;   
}
.cms-cabecera p{ margin: 0; }
.cms-cabecera img{
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}

.cms-cabeceraSimple{ text-align: center; margin-top: 20vh; margin-bottom: 20vh; }
.cms-cabeceraSimple h1{ position: relative; margin-bottom: 1em; }
.cms-cabeceraSimple > p{ margin-top: 2em; }
.cms-cabeceraSimple p{ max-width: 800px; margin: auto }
.cms-cabeceraSimple h1::after{
    content: '';
    width: 200px;
    height: 3.5px;
    background-color: var(--pico-primary);
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.cms-cabeceraConImagen{
    display: flex;
    flex-wrap: wrap;
    gap: 1em 2em;
    justify-content: space-between;
    align-items: center;
}

/* Contenedor de imagen */
.cms-cabeceraConImagen div:last-child{
    width: 100%;
    height: auto;
    position: relative;
    flex-shrink: 0;
}

/* Contenedor de imagen */
.cms-cabeceraConImagen div:first-child{
    flex-shrink: 1;
}
.cms-cabeceraConImagen h1{
    position: relative;
    margin-bottom: 20px;
}
.cms-cabeceraConImagen h1::after{
    content: '';
    width: 150px;
    height: 3.5px;
    background-color: var(--pico-primary);
    position: absolute;
    bottom: -10px;
    left: 0px;
}

@media screen and (min-width: 768px) {
    .cms-cabeceraConImagen div:last-child{
        width: 600px;
    }
}

@media screen and (min-width: 1024px) {
    .cms-cabeceraConImagen{ flex-wrap: nowrap }
    .cms-cabeceraConImagen div:last-child{
        width: 380px;
        height: 290px;
    }
}

/************************ COMPONENTES ***********************/


/* COMPONENTE GENERAL    */
.cms-componente img{
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}

/* Configuracion general de componentes */
.cms-componente{
    background-color: var(--background-component-color);
    margin-bottom: 80px;
    padding: 20px 15px;
    font-size: .8em;
}
.cms-componente h2{ font-size: 1.6em }
.cms-componente p{ margin-bottom: 8px }


/* COMPONENTE SIMPLE CON UNA IMAGEN NORMAL */
.cms-simpleConImagen{
    display: flex;
    gap: 15px;
}

.cms-simpleConImagen h2{ position: relative; margin-bottom: 1.3em; margin-top: 10px; }
.cms-simpleConImagen h2::after{
    content: '';
    width: 150px;
    height: 2px;
    background-color: var(--pico-primary);
    position: absolute;
    bottom: -10px;
    left: 0px;
}

.cms-simpleConImagen > div{
    flex-shrink: 0;
    width: calc(100% - 350px);
}
.cms-componente > div:last-child{
    flex-shrink: 0;
}
.cms-simpleConImagen > div:first-child{
    width: 340px;
    height: 220px;
}

@media screen and (max-width: 1024px) {
    .cms-simpleConImagen{ flex-wrap: wrap }
    .cms-simpleConImagen > div:last-child{ width: 100%; }
    .cms-simpleConImagen > div:first-child{ max-width: 400px; height: auto; }
}
@media screen and (max-width: 480px){
    .cms-simpleConImagen > div:first-child{
        width: 100%;
        height: auto;
    }
}

/* SIMPLE CON BOTON */
.cms-simpleConBoton button{
    margin-top: 10px;
}

/* COMPONENTE SIMPLE CON UNA IMAGEN GRANDE (OCUPA 100% DE ANCHO) */
.cms-simpleConImagenGrande > div:first-child{ /**/
    width: 100%;
    height: 600px;
    margin-bottom: 10px;
}

@media screen and (max-width: 1024px){
    .cms-simpleConImagenGrande > div:first-child{ height: 400px }
}

@media screen and (max-width: 768px){
    .cms-simpleConImagenGrande > div:first-child{ height: 250px }
}

/* IMAGEN CON UNA CARTA SUPERPUESTA (LA CARTA CONTIENE TITULO Y CONTENIDO) */
.cms-imagenSuperPuesta{ 
    position: relative; 
    padding: 0;
    overflow: hidden;
}

.cms-imagenSuperPuesta > div:first-child{ 
    height: 600px;
    margin: 0;
}

.cms-imagenSuperPuesta > div:first-child img{ /* Contenedor de la imagen */
    filter: brightness(.4);
    transition: filter .4s;
}

.cms-imagenSuperPuesta > div:last-child{ /* Contenedor del contenido */
    position: absolute;
    bottom: 40px;
    left: 15px;
    width: 95%;
    background-color: var(--background-component-color);
    padding: 15px;
    opacity: .9;
    transform: translateY(0);
    transition: all .4s;
}

/* Hovers */
.cms-imagenSuperPuesta:hover > div:last-child{
    transform: translateY(80px);
    opacity: 0;
}
.cms-imagenSuperPuesta:hover > div:first-child img{ filter: brightness(1) }

@media screen and (max-width: 1024px){
    .cms-imagenSuperPuesta > div:first-child{ height: 400px }
}

@media screen and (max-width: 768px) {
    .cms-imagenSuperPuesta > div:last-child{ bottom: 20px; left: 10px }
}

/* COMPONENTE SIMPLE CON CONTENIDO HTML QUE CONTIENE UNA LISTA */
.cms-simpleConItemsSimples > h2{ font-size: 2em }
.cms-simpleConItemsSimples *{
    font-size: 1.2em;
}
.cms-simpleConItemsSimples ul li{ list-style: none }
.cms-simpleConItemsSimples li { 
    text-indent: -0.5em;
    font-size: .9em !important;
    vertical-align: top;
    margin-top: 20px;
}
.cms-simpleConItemsSimples li::before{
    font: var(--fa-font-solid);
    content: '\f00c';
    font-size: 1.5em;
    color: var(--pico-primary);
    display: inline-block;
    padding-right: 10px;
}

/* IMAGENES EN GRILLAS CON TITULO Y DESCRIPCION */
.cms-imagenesEnGrillas{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em 2em;
    background-color: transparent;
}

.cms-imagenesEnGrillas h2, .cms-imagenesEnGrillas p{ width: 100%; text-align: center }
.cms-imagenesEnGrillas h2{ margin-bottom: 5px }
.cms-imagenesEnGrillas div{
   width: 280px;
   height: 230px;
   display: flex;
   align-items: center;
   overflow: hidden;
}
.cms-imagenesEnGrillas div img{ height: auto; }


@media screen and (max-width:480px){
    .cms-imagenesEnGrillas div{
        width: 100%;
        height: auto;
    }
}

/* ICONOS EN GRILLAS CON TITULO Y DESCRIPCION */
.cms-iconosEnGrillas{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2em;
    padding: 20px 40px;
}

.cms-iconosEnGrillas h2, .cms-iconosEnGrillas > p{ width: 100%; text-align: center }
.cms-iconosEnGrillas div{ width: 320px }
.cms-iconosEnGrillas div i{
    font-size: 1.5em;
    border-radius: 50%;
    padding: 15px;
    color: var(--pico-primary);
    border: 2px solid var(--pico-primary);
}
.cms-iconosEnGrillas h5{ margin-top: 15px; margin-bottom: 10px; }

@media screen and (max-width:480px){
.cms-iconosEnGrillas div{ width: 100% }
}


/* ICONOS EN GRILLAS CON DESCRIPCION */
.cms-iconosEnGrillasSinTitulo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    background-color: var(--pico-background-color);
}
.cms-iconosEnGrillasSinTitulo > h2{
    width: 100%;
    text-align: center;
}
.cms-iconosEnGrillasSinTitulo > div{
    width: 200px;
    display: flex;
    gap: 40px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--background-component-color);
    padding: 20px 10px;
}
.cms-iconosEnGrillasSinTitulo div i{
    font-size: 3.6em;
    color: var(--pico-primary);
}

.cms-iconosEnGrillasSinTitulo > div > div{
    border-radius: 50%;
    position: relative;
    border: 2px solid var(--pico-primary);
    padding: 20px;
    width: 110px;
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cms-iconosEnGrillasSinTitulo > div > div::after{
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background-color: var(--pico-primary);
}

.cms-iconosEnGrillasSinTitulo div p{
    text-align: center;
    margin-top: 10px;
    font-size: 1.15em;
}


/* Lista de items con imagen */
.cms-listaItemsConImagen{ background-color: transparent }
.cms-listaItemsConImagen h2{ text-align: center }
.cms-listaItemsConImagen > div{
    width: 100%;
    display: flex;
    gap: 30px;
    margin-top: 40px;
}
.cms-listaItemsConImagen > div > div:first-child{
    width: 320px;
    height: 250px;
    flex-shrink: 0;
}
.cms-listaItemsConImagen h4{ position: relative; margin-bottom: 40px; margin-top: 20px; }
.cms-listaItemsConImagen h4::before{
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 150px;
    height:2px;
    background-color: var(--pico-primary);
}

@media screen and (max-width:768px){
    .cms-listaItemsConImagen > div{ 
        flex-wrap: wrap; 
        gap: 0; 
        margin-top: 30px; 
        padding-bottom: 30px;
        border-bottom: 1px solid var(--pico-h6-color);
    }
    .cms-listaItemsConImagen > div:last-child{  border-bottom: none }
    .cms-listaItemsConImagen > div > div:first-child{ width: 100%; height: auto; max-width: 300px; }

}