:root{
    /* Colores */
    --col-bg: linear-gradient(130deg, rgb(16, 16, 16), rgb(49, 49, 49));
    --col-magenta: #bb0073;
    --col-blue: #009cdd;
    --col-yellow: #fbe91c;

    /* Colores claros */
    --col-magenta-light: #ff2faf;
    --col-blue-light: #38c3ff;
    --col-yellow-light: #fff268;

    /* Colores oscuros */
    --col-magenta-dark: #b3006f;
    --col-blue-dark: #008ac5;
    --col-yellow-dark: #baaa00;

    /* Colores con transparencia */
    --col-magenta-trans: #fd009c7c;
    --col-blue-trans: #009bdd7c;
    --col-yellow-trans: #fbe81d7c;

    /* Fuentes */
    --font-KB: "Kohinoor Bangla", Helvetica, sans-serif;
    --font-KB-light: "Kohinoor Bangla_l", Helvetica, sans-serif;
    --font-Lei: "Leicester", "Courier New", Courier, monospace;
    --font-Lei-light: "Leicester-l", "Courier New", Courier, monospace;
    --font-Lei-bold: "Leicester-b", "Courier New", Courier, monospace;
}
/* --------------------------------- Fuentes -------------------------------- */
@font-face {
    font-family: "Kohinoor Bangla";
    font-style: normal;
    src: url(../fonts/Kohinoor_Bangla/KohinoorBangla-Regular.otf) format("woff2");
}
@font-face {
    font-family: "Kohinoor Bangla_l";
    font-style: normal;
    src: url(../fonts/Kohinoor_Bangla/KohinoorBangla-Light.otf) format("woff2");
}
@font-face {
    font-family: "Leicester";
    font-style: normal;
    src: url(../fonts/Leicester/Leicester_text.TTF) format("woff2");
}
@font-face {
    font-family: "Leicester-l";
    font-style: normal;
    src: url(../fonts/Leicester/Leicester_light.TTF) format("woff2");
}
@font-face {
    font-family: "Leicester-b";
    font-style: normal;
    src: url(../fonts/Leicester/Leicester_bold.TTF) format("woff2");
}

/* ----------------------- Reglas generales generales ----------------------- */

/* ---- Barra de desplazamiento ---- */
/* Tamaño */
::-webkit-scrollbar {
    width: 0.6rem;
}

  
/* El carril */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.501); 
    background: grey;
}
   
/* La barra */
::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, cyan, magenta, yellow);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.501);
}
  
/* Cuando se le pasa el raton por encima */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, rgb(0, 161, 161), rgb(161, 0, 161), rgb(161, 161, 0));
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.501);
}


/* Reset navegador */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: transparent;
}
html{
    scroll-behavior: smooth;
}
/* Reset del efecto en el focus */
:focus{
    border: 0px solid transparent;
    outline: 0px solid transparent;
}

h3{
    margin: 0.2rem 0;
    font-family: var(--font-KB);
    letter-spacing: 0.1rem;
}
h1{
    font-size: 1.5rem;
    font-family: var(--font-KB);
    font-weight: 100;
    letter-spacing: 0.1rem;
}
hr{
    height: 0.1rem;
    background: white;
    margin: 0.2rem 0 1.5rem 0;
}
strong.colorize,
em{
    font-weight: bolder;
    font-style: italic;
    text-transform: uppercase;
}
.colorize.blue,
.blue{
    color: var(--col-blue-light);
}
.colorize.magen,
.magen{
    color: var(--col-magenta-light);
}
.colorize.yell,
.yell{
    color: var(--col-yellow-light);
}

/* -------------------------------------------------------------------------- */
/* Página de inicio */
body.cover{
    height: 100vh;
    background: var(--col-bg);
    overflow: hidden;
    overflow: -moz-hidden-unscrollable;
}
/* Actividades de la agenda 2022 / 2023 */
.cover>a{
    font-family: var(--font-KB-light);
    color: white;
    padding: 0.5rem;
    border: 0.15rem solid white;
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    z-index: 999;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
    font-size: 1rem;
    animation: button-appearing 1s backwards 2s, fadein 1s backwards 2.3s;
}
.cover>a:hover{
    background: white;
    color: black;
}
.cover>a>i{
    font-family: var(--font-Lei-bold);
    color: #d04bbe;
    text-transform: uppercase;
    font-style: normal;
    font-size: larger;
}
.cover>a>b{
    font-family: var(--font-Lei-bold);
    color: #2c82bd;
    font-weight: normal;
    font-size: larger;
}
@keyframes button-appearing {
    0%{
        left: -50%;
    }
    100%{
        left: 50%;
    }
}
@-webkit-keyframes button-appearing {
    0%{
        left: -50%;
    }
    100%{
        left: 50%;
    }
}
/* Caja para colorear según la sección: */
body>div.box-sect{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15vw;
    transform-origin: left bottom; 
    transform: rotate(-20deg);
    z-index: -1;
}
div.box-sect.contact{
    background: linear-gradient(90deg, var(--col-blue), #76d6ff);
}
div.box-sect.services{
    background: linear-gradient(90deg, var(--col-magenta), var(--col-magenta-light));
}
div.box-sect.about-us{
    background: linear-gradient(90deg, var(--col-yellow-dark), var(--col-yellow-light));
}


/* ------------------------- Encabezado con contacto ------------------------ */
header.contact-header{
    width: 100%;
    position: absolute;
    z-index: 2;
    font-family: var(--font-KB);
    color: white;
    left: 0;
    bottom: 0;
}
header.contact-header svg{
    fill: white;
    width: 3vw;
    min-width: 30px;
    height: 3vw;
    min-height: 30px;
    padding: 0.3vw;
    border-radius: 50%;
}
header.contact-header a:focus svg,
header.contact-header a:hover svg{
    background: rgba(255, 255, 255, 0.287);
}
header.contact-header>ul{
    display: flex;
    justify-content: space-around;
    gap: 2%;
    width: 100%;
}
header.contact-header ul li{
    position: relative;
}

/* Popups para los enlaces de contacto */
div.popup{
    position: absolute;
    display: flex;
    flex-direction: column;
    background: #000;
    bottom:calc(100% + 1rem);
    left: 50%;
    transform: translate(-50%);    
    padding: 1rem;
    z-index: 999;
    -webkit-animation: fadein 0.5s, translating 0.5s;
            animation: fadein 0.5s, translating 0.5s;
    transition: bottom 0.3s, opacity 0.3s;
}
header.contact-header>ul>li:nth-of-type(1) div.popup{
    right:unset;
    left:0%;
    transform: translate(0);
}
header.contact-header>ul>li:nth-of-type(2) div.popup{
    right:unset;
    left:50%;
    transform: translate(-25%);
}
header.contact-header>ul>li:nth-of-type(4) div.popup{
    transform: translate(-75%);
}
header.contact-header>ul>li:nth-of-type(5) div.popup{
    left:unset;
    right:0%;
    transform: translate(0);
}
div.popup a{
    color: rgb(195, 195, 195);
}
div.popup a:hover,
div.popup a:focus{
    color: rgb(255, 255, 255);
}
/* Para resaltar elementos de los popups: */
div.popup b{
    font-weight: normal;
}
div.popup b.b{
    color: var(--col-blue-light);
}
div.popup b.m{
    color: var(--col-magenta-light);
}
div.popup b.y{
    color: var(--col-yellow-light);
}

/* variables personalizadas para ubicar la flecha con ::after */
header.contact-header>ul>li.select{
    --c-bottom: 100%;
    --c-opacity: 1;
}

header.contact-header>ul>li.select::after{    
    content: "";
    position: absolute;
    bottom: var(--c-bottom);
    opacity: var(--c-opacity);
    left: 50%;
    transform: translate(-50%);
    border-right: 0.5rem solid transparent;
    border-left: 0.5rem solid transparent;
    border-top: 0.5rem solid black;
    border-bottom: 0.5rem solid transparent;
    -webkit-animation: fadein 0.5s;
            animation: fadein 0.5s;
    transition: bottom 0.3s, opacity 0.3s;
}

div.popup h3{
    margin: 0 0 0.5rem 0;
}
/* Para la el popup del "horario" */
div.popup span.openornot{
    align-self: center;
    padding: 0.5rem 0 0 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}
div.popup span.openornot i{
    font-style: normal;
    color: white;
    font-size: 0.8rem;
}
/* Cambia de color según si la empresa está abierta o no */
div.popup span.openornot.open{
    color: rgb(0, 199, 0);
}
div.popup span.openornot.close{
    color:  rgb(255, 47, 64);
}
/* Botón cerrar */
div.popup button{
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    width: 1rem;
    height: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border:none;
    z-index: 1000;
    line-height: 0;
    font-size: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}
div.popup button:focus,
div.popup button:hover{
    background: rgba(79, 79, 79, 0.3);
    box-shadow: 0 0 0.1rem rgba(255, 255, 255, 0.3);
}
div.popup button:focus span,
div.popup button:hover span{
    background: rgb(255, 255, 255);
}
/* Signo del botón cerrar */
div.popup button>span{
    display: inline-block;
    position:absolute;
    width: 100%;
    height: 0.1rem;
    background: rgb(202, 202, 202);
    top: 50%;
    left: 0;
}
/* Para hacer que tenga forma de cruz */
div.popup button>span:nth-of-type(1){
    transform: translateY(-50%) rotate(45deg);
}
div.popup button>span:nth-of-type(2){
    transform: translateY(-50%) rotate(-45deg);
}

/* -------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------- */
/*                     Solo sirve para la página de Inicio                    */
/* -------------------------------------------------------------------------- */

.cover main{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cover main div:not(.frame, .box-list, .grad-circle){
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    offset: 5px;
}

.cover main div:not(.slider) img:first-child{
    transition: transform 1s;
    height: 30vh;    
    width: 35vw;
    -o-object-position: bottom;
       object-position: bottom; /* Para posicionar la imagen respecto de su propio contenedor */
    -o-object-fit: contain;
       object-fit: contain; /* Para hacer que la imagen no sobresalga de su contenedor. NECESITA EL ESTABLECIMIENTO DE UN WIDTH Y UN HEIGHT */
    transform-origin: bottom center; /* Desde dónde se aplica la transformación */

}
subvencion-component{
    overflow: hidden;
}
/* ------------------- Círculos de colores para la portada ------------------ */
.cover .grad-circle{
    position: absolute;
    transform: translate(-50%, 0%);
    width: 10vmax;
    height: 10vmax;
    border-radius: 50%;
    z-index: -999;
    -webkit-filter: blur(10vmax);
            filter: blur(10vmax);
    -webkit-animation: fadein 5s both;
            animation: fadein 5s both;
}
.cover .grad-circle:nth-of-type(3){
    top: 0%;
    left: 0;
    background: var(--col-blue);
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
}
.cover .grad-circle:nth-of-type(4){
    top:50%;
    left: 0%;
    background: var(--col-magenta);
    transform: translate(-50%, -50%);
    -webkit-animation-delay: 4s;
            animation-delay: 4s;
}
.cover .grad-circle:nth-of-type(5){
    bottom: 0;
    left: 0;
    background: var(--col-yellow);
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
}
/* -------------------------------------------------------------------------- */
/* Da formato al div que contiene el logo y el símbolo: */
div#other-logo{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
}
/* Primera imagen, que es el icono: */
div#other-logo img:nth-child(1){
    position: absolute;
    top: -10%;
    right:  -13%;
    width: 25%;
    height: 35%;
    -webkit-animation: go-away-anim 3s backwards;
            animation: go-away-anim 3s backwards;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;

}
/* Imagen del logo sin icono */
div#other-logo #other-cover-img{
    width: 60vmin;
    height: 40vmin;
    -o-object-fit: contain;
       object-fit: contain;
}
/* Menú */
.other-menu{
    position: absolute;
    right: 0;
    top:10%;
    overflow-x: clip;
    overflow-y: visible;
    height:-webkit-fit-content;
    height:-moz-fit-content;
    height:fit-content;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    font-family: var(--font-KB);
    font-weight: 900;
    font-size: 1.1rem;
    transition: width 0.3s;
}
/* Menú de navegación */
.other-menu nav{
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    width: 100%;
    display: flex;
    justify-content: right;
    text-align: right;
    flex: 1 1 300px;
}
/* Lista del menú: */
.other-menu nav ul{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0px;
    gap: 10px;
}
/* Elementos de la lista del menú */
.other-menu nav ul li{
    align-self: flex-end;
    width: 100%;
    max-width: 200px;
    min-width: 180px;
    height: 2rem;
    overflow: hidden;
    transition: transform 0.3s;
    transform-origin: center right;
    transform: translateX(10px) rotate(-30deg) skew(-30deg);
    z-index: 999;
    box-shadow: -5px 0rem 0rem 0rem transparent,
    0 0 5px 0 black;
}

/* Dando formato a cada elemento de la lista según su orden: */
.other-menu nav ul li:nth-of-type(1){
    background: linear-gradient(90deg, var(--col-blue) 50%, var(--col-blue-dark));
}
.other-menu nav ul li:nth-of-type(2){
    background: linear-gradient(90deg, var(--col-magenta) 50%, var(--col-magenta-dark));
}
.other-menu nav ul li:nth-of-type(3){
    background: linear-gradient(90deg, var(--col-yellow) 50%, var(--col-yellow-dark));
}
/* Enlaces del menú */
.other-menu nav ul a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: white;
    letter-spacing: 0.05rem;
    text-shadow: 1px 1px 5px black;
    text-decoration: none;
    transition: text-shadow 0.2s, color 0.3s, -webkit-backdrop-filter 0.3s;
    transition: backdrop-filter 0.3s, text-shadow 0.2s, color 0.3s;
    transition: backdrop-filter 0.3s, text-shadow 0.2s, color 0.3s, -webkit-backdrop-filter 0.3s;
}
/* La clase select-li es para que la pestaña sea elegida en función de en qué página me encuentro */
.other-menu nav li:focus,
.other-menu nav li:hover,
.other-menu nav li.select-li{
    transform: translateX(0px) translateY(5px) rotate(-30deg) skew(-30deg);
    box-shadow: -5px 0rem 0rem 0rem white,
    0 0 5px 0 black;
}
/* El enlace cuando tenga un hover: */
.other-menu nav li:focus a,
.other-menu nav li:hover a,
.other-menu nav li.select-li a{
    -webkit-backdrop-filter: brightness(130%);
            backdrop-filter: brightness(130%);
    color: black;
    text-shadow: 0px 0px 6px white,
    0 0 3px white;
}
ul{
    list-style: none;
}

/* Lista que enseña una pequeña muestra de las actividades realizadas */
body.cover main div.box-list{
    position: absolute;
    top: 10vh;
    left: 5vw;
    color: white;
    font-family: var(--font-Lei-light);
    width: 14rem;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    letter-spacing: 0.1rem;
    transform: rotate(-20deg) skew(-20deg);
}
body.cover main div.box-list ul{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    background: transparent;
}
body.cover main div.box-list ul li{
    /* Una letra equivale a 0.62rem aproximadamente. Eso con un espacio de 0.1rem */
    width: 9rem;
    font-size: 1rem;
    padding: 0.4rem 0;
    overflow-x:hidden;
    transform: skew(20deg);
    text-shadow: 0 0 0.1rem black, 
    0 0 0.2rem black,
    0 0 0.3rem black;
}


/* -------------------------------------------------------------------------- */
/*              Páginas "contacto", "servicio" y "sobre nosotros"             */
/* -------------------------------------------------------------------------- */
/* ------------------------------- Encabezado ------------------------------- */
body:not(.cover){
    background: var(--col-bg);
    display: flex;
    font-family: "Kohinoor Bangla";
}
/* ---------------------------------- Menú ---------------------------------- */
.other-menu.no-index{
    top: 1%
}
.other-menu.no-index nav ul li{
    min-width: 170px;
    transition: transform 0.3s, outline 0.5s;
}
.other-menu.no-index nav ul li:nth-of-type(1){
    background: linear-gradient(90deg, rgb(75, 75, 75) 50%, rgba(17, 17, 17, 0.653));;
}
.other-menu.no-index nav ul li:nth-of-type(2){
    background: linear-gradient(90deg, var(--col-blue) 50%, var(--col-blue-dark));
}
.other-menu.no-index nav ul li:nth-of-type(3){
    background: linear-gradient(90deg, var(--col-magenta) 50%, var(--col-magenta-dark));
}
.other-menu.no-index nav ul li:nth-of-type(4){
    background: linear-gradient(90deg, var(--col-yellow) 50%, var(--col-yellow-dark));
}

/* ---------------------------- Página "contacto" --------------------------- */

.contact{
    display: flex;
    flex-wrap: wrap;
    color: white;
    justify-content: center;
    width: 100%;    
}

/* Estilo aplicado a la sección contacto, a la de servicios y a de sobre nosotros: */
.about-us>section,
.contact>section,
.services>section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6% 2% 2%;
    width: 100%;
}
/* Esto afecta a las dos secciones principales: "Visítanos" y "Contáctanos" */
.contact>section>article{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 4%;
}
/* -------------------------- Sección localización -------------------------- */
.contact>section>article>article:nth-child(1){
    max-width: 500px;
    /* width: 40%; */
    min-width: 250px; /* CAMBIADO */
}
h3>a{
    color: white;
    font-style: italic;
}
h3>a:hover,
h3>a:focus,
/* Y enlaces de correos: */
.contact ul li ul li a:focus,
.contact ul li ul li a:hover{
    color: var(--col-blue-light);
    
}
.contact li address a span span{
    position: relative; /* Posición relativa para poder ubicar el .frame con el hover */
    font-size: 1.2rem;
    display: inline-block;
}

/* --------------------------- Sección de contacto -------------------------- */
.contact>section>article>article>article{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2%;
    flex-wrap: wrap;
}
/* ------------------------- Información de contacto ------------------------ */
.contact section>article>article>article>ul{
    width: 55%;
    max-width: 600px;
}

.contact>section article ul>li>a>p{
    width: calc(90% - 3rem);
    margin-left: 3rem;
    font-size: 1rem;
    letter-spacing: 0.15rem;
    font-family: var(--font-KB-light);
}
/* Imagen del logo */
.about-us>section>img,
.contact>section>img,
.services>section>img{
    display: inline-block;
    margin-bottom: 5%;
    width: 30%;
    max-width: 500px;
}
body:not(.cover) .contact li a{
    text-decoration: none;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
/* Configuración de los iconos */
body:not(.cover) .contact svg{
    /* fill: #4dcaff ; */
    fill: var(--col-blue-light);
    background: rgba(122, 122, 122, 0.431);
    border-radius:50%;
    padding: 0.3rem;

    width: 5vw;
    height: 5vw;
    min-width: 40px;
    min-height: 40px;
    max-width: 50px;
    max-height: 50px;

}
/* Listas del horario y de los correos: */
body:not(.cover) .contact li ul{
    display: inline-block;
    margin-left: 4rem;
}
/* Para separar la lista de datos de contacto entre sí */
body:not(.cover) .contact ul li:not(li>ul>li){
    margin-bottom: 5%;
}
body:not(.cover) .contact ul li:first-child{
    margin-top: 3%;
}
/* Para que el contenido quede alineado dentro de las listas: */
body:not(.cover) .contact li ul>li{
    --size-related: 1.3rem; /* Variable que afecta a lo que hay en su interior */
    flex-wrap: nowrap;
    font-size: var(--size-related);
    position: relative;
}
/* -------------------- Puntos de la lista personalizada -------------------- */
body:not(.cover) .contact li ul>li::before{
    content: "";
    display: inline-block;
    position: absolute;
    left: -1.5rem;
    top:50%;
    transform: translateY(-50%);
    overflow: visible;
    width: 0.6rem;
    height: 0.6rem;
    background: var(--col-blue-light);    
}
body:not(.cover) .contact li ul>li>a{
    font-size: var(--size-related);
    text-decoration: underline;
    font-style: italic;
    display: inline-block;
}
/* Para que los iconos queden centrados respecto de las letras */
body:not(.cover) .contact li>span,
body:not(.cover) .contact a>span{
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2rem;
}
body:not(.cover) .contact a:focus span,
body:not(.cover) .contact a:hover span,
body:not(.cover) .contact a:focus li,
body:not(.cover) .contact a:hover li{
    text-shadow: 0 0 10px var(--col-blue-light);
}

/* Efecto brillo para los iconos */
body:not(.cover) .contact a:focus svg,
body:not(.cover) .contact a:hover svg{
    -webkit-filter: brightness(120%);
            filter: brightness(120%);
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3);
}
body:not(.cover) .contact li a span span{
    position: relative;
    box-sizing: content-box;
    padding: 0 0.5rem;
}

/* Formulario */
form{
    position: relative;
    padding: 5% 1.5rem 4%;
    min-width: 200px;
    width: 50%;
    max-width: 350px;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 999;
}

form h2,
h2{
    letter-spacing: 0.2rem;
    /* margin-bottom: 0.5rem; */
}
form span.brackets{
    --negative-border-w: -0.5rem;
}
form label{
    margin-bottom: 0.3rem;
}
form input,
form textarea,
form label{
    position: relative;
    display: inline-block;
    width: 100%;
    letter-spacing: 0.1rem;
}

form input:hover,
form input:focus,
form textarea:hover,
form textarea:focus{
    background: rgb(193, 193, 193);
    color: black;
    outline: 0.1rem solid white;
    outline-offset: 0.2rem;
}
form input{
    margin-bottom: 1rem;
    height: 2rem;
    background-color: rgb(100, 100, 100);
    transition: background 0.3s, color 0.3s;
    color: white;
    padding-left: 0.5rem;
    border: 0px solid transparent;
}
form textarea{
    background-color: rgb(100, 100, 100);
    transition: background 0.3s, color 0.3s;
    color: white;
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border: 0px solid transparent;
}
form input::-webkit-input-placeholder, form textarea::-webkit-input-placeholder{
    color: grey;
}
form input::-moz-placeholder, form textarea::-moz-placeholder{
    color: grey;
}
form input:-ms-input-placeholder, form textarea:-ms-input-placeholder{
    color: grey;
}
form input::-ms-input-placeholder, form textarea::-ms-input-placeholder{
    color: grey;
}
form input::placeholder,
form textarea::placeholder{
    color: grey;
}
form button{
    width: 100%;
    padding: 0.4rem 0;
    margin-top: 1rem;
    font-family: var(--font-KB);
    font-size: 1rem;
    background: transparent;
    color: white;
    border: 2px solid white;
    letter-spacing: 0.1rem;
    transition: color 0.3s, background 0.3s;
}
form button:focus,
form button:hover{
    cursor: pointer;
    background: white;
    color:black;
}
form button:active{
    border: 2px ridge white;
    transform: scale(0.98);
}
/* Minimapa: */
iframe{
    display: inline-block;
    width: 100%;
    height: 200px;
    max-width: 400px;
    min-width: 200px;
}

/* -------------------------------------------------------------------------- */
/*                                  Servicios                                 */
/* -------------------------------------------------------------------------- */

/* Da formato a otras páginas y algunos elementos de las mismas: */
main.about-us,
.services{
    color: white;
    font-family: var(--font-KB);
    width: 100%;
}
main.about-us h1,
.contact h1,
.services h1{
    font-family: var(--font-Lei-light);
    margin: 0;
}

.services h2{
    font-weight: 100;
    letter-spacing: 0.1rem;
}
.services>section>article>a>article>h2{
    font-family: var(--font-Lei-light);
}
.services>section:not(#editorial, #corporativo, #packaging, #otros, #marketing){
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
.services>section>article{
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

.services>section>h1{
    text-transform: uppercase;
    margin: 3rem 0;
    text-align: center;
}
/* -------------------- Lista de actividades de Servicios ------------------- */
.services>section>article>ul{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    flex-wrap: wrap;
    width: 95%;
    max-width: 1200px;
}
.services article>ul>span.brackets{
    width: 1rem;
    --border-col: white;
    --negative-border-w: -0.5rem;
}

.services>section>article>ul>li{
    flex-wrap: wrap;
    width: 30%;
    min-width: 200px;
}

/* ------------------ Categorías de la lista de actividades ----------------- */
.services>section>article>ul>li>h2{
    font-family: var(--font-Lei-light);
    display: flex;
    margin-bottom: 1.5rem;
}
.services>section>article>ul>li>ul{
    margin: 0.5rem 0 2rem 0;
    display: flex;
    flex-direction: column;
}
.services>section>article>ul>li>ul>li{
    margin: 0.15rem 0;
}
/* Estilo independiente por elemento en la lista de actividades */
.services>section>article>ul>li:nth-of-type(2)>ul>li,
.services>section>article>ul>li:nth-of-type(2)>h2{
    text-align: center;
    justify-content: center;
}
.services>section>article>ul>li:nth-of-type(3)>ul>li,
.services>section>article>ul>li:nth-of-type(3)>h2
{
    text-align: right;
    justify-content: right;
}
/* Añade color a cada categoría de la lista de actividades */
.services>section>article>ul>li:nth-of-type(1)>h2{
    color: var(--col-blue-light)
}
.services>section>article>ul>li:nth-of-type(2)>h2{
    color: var(--col-magenta-light)
}
.services>section>article>ul>li:nth-of-type(3)>h2{
    color: var(--col-yellow-light);
}
/* -------------------------------------------------------------------------- */

/* Categorías de los productos en SERVICIOS */
.services>section>article>a{
    flex: 1 1 330px;
    padding: 1%;
    max-width: 450px;
    margin: 1%;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    align-items: center;
    transition: transform 0.5s, box-shadow 0.5s;
}

/* Corchetes aplicado a los párrafos de las descripciones de las secciones: */
.services a>article>p{
    position: relative;
    margin-bottom: 1rem;
    padding: 0.5rem;
}
/* Botones "Saber más" */
.services a>button{
    width: 80%;
    margin-top: 1rem;
    padding: 0.5rem;
    font-family: var(--font-KB);
    font-variant: small-caps;
    font-size: 1rem;
    background: transparent;
    color: white;
    border: 2px solid white;
    letter-spacing: 0.1rem;
    transition: color 0.3s, background 0.3s;
}
/* Efectos de los botones "Saber más" */
.services a:focus>button,
.services a:hover>button{
    cursor: pointer;
    background: white;
    color:black;
}
.services a>button:active{
    border: 2px ridge white;
    transform: scale(0.95);
}
/* Modificación de los corchetes: */
.services a>article>p>span.brackets{
    --border-width: 0.1rem;
    --negative-border-w: -0.5rem;
    --border-col: white;
    width: 1rem;
}
.services a:focus,
.services a:hover{
    -webkit-filter: brightness(110%);
            filter: brightness(110%);
    background: rgb(49, 49, 49);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.333);
    transform: scale(1.05); 
}
.services a:focus p,
.services a:hover p{
    text-shadow: 0 0 2px black,
    0 0 3px black,
    0 0 7px rgba(255, 255, 255, 0.245),
    0 0 20px rgba(255, 255, 255, 0.3);
}
.services a{
    position: relative;
    text-decoration: none;
    color: white;
}

.services p{
    font-size: 0.8rem;
    letter-spacing: 0.05rem;
    text-align: justify;
    word-wrap: break-word;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    text-justify: inter-word;
    text-indent: 1rem;
    font-family: var(--font-KB-light);
}
.services a img{
    display: inline-block;
    width: 100%;
    height: 30vh;   
    max-height: 400px;   
    min-height: 300px;   
    height: 400px;   
    -o-object-fit: contain;   
       object-fit: contain;
}
/* ---------------------- Construcción del marco .frame --------------------- */
/* Construcción del marco: */
.services a .frame,
.contact .frame{
    position: absolute;
    width: 1rem;
    height: 1rem;
    transition: border-color 0.3s;
}

/* Se da tamaño a los bordes que queremos que destaquen con un 
color transparente y a los que no, se le da un tamaño de 0 */
.contact .frame:nth-of-type(1),
.services .frame:nth-of-type(1){
    top: -4px;
    left: -4px;
    border-left: 2px solid transparent;
    border-top: 2px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 0px solid transparent;
}

.contact .frame:nth-of-type(2),
.services .frame:nth-of-type(2){
    top: -4px;
    right: -4px;
    border-top: 2px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 0px solid transparent;
}
.contact .frame:nth-of-type(3),
.services .frame:nth-of-type(3){
    bottom: -4px;
    left: -4px;
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-right: 0px solid transparent;
    border-top: 0px solid transparent;
}
.contact .frame:nth-of-type(4),
.services .frame:nth-of-type(4){
    bottom: -4px;
    right: -4px;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-top: 0px solid transparent;
    border-left: 0px solid transparent;
}
/* ------------------ Da color a los bordes con más de 0px ------------------ */
/* Página servicios */
.services a:focus .frame,
.services a:hover .frame{
    border-color: var(--col-magenta-light);
}
/* Página contacto */
.contact a:focus .frame,
.contact a:hover .frame{
    border-color: var(--col-blue-light);
}


/* -------------------------------- El target en servicios ------------------------------- */
#editorial,
#corporativo,
#packaging,
#marketing{
    display:none;
    padding: 0;
    margin: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: white;
    color: black;
}


#editorial>article>h2,
#corporativo>article>h2,
#packaging>article>h2,
#marketing>article>h2{
    width: 100%;
    font-family: var(--font-Lei-light);
    text-align: center;
    text-transform: uppercase;
    padding: 10px 0;
    font-size: 3rem;
    color: black;
    margin: 3rem 0;
}

#editorial hr,
#corporativo hr,
#packaging hr,
#marketing hr{
    background: #000;
}

#editorial:target,
#corporativo:target,
#packaging:target,
#marketing:target{
    display: flex;
}

/* Configuración de los productos: */
.products{
    margin:0;
    padding: 0;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.products:nth-child(even){
    background: rgb(246, 246, 246);
}
.products:nth-child(odd){
    background: white;
    color: black;
}
.products h3{
    --bg-col-arrow: black;
    position: relative;
    text-align: center;
    letter-spacing: 0.2rem;
    font-family: var(--font-KB-light);
    font-weight: 100;
    font-size: 1.3rem;
    margin: 0;
    background: var(--bg-col-arrow);
    width: 100%;
    color: white !important;
    padding: 1rem 0;
    
}
/* FLECHA */
.products h3::after{
    content: "";
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    background: var(--bg-col-arrow);
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
            clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
/* ------------------- Lista de navegación para el slider: ------------------ */
.products ul.slider-list{
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    margin: 0 0 1rem 0;
    flex-wrap: wrap;
}
.products ul.slider-list>li{
    position: relative;
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    background: rgba(0, 0, 0, 0.527);
    border-radius: 50%;
    cursor: pointer;
    margin: 0 0.25%;
}

/* Para evitar el error visual en las pantallas táctiles de que se mantenga
seleccionado el botón de la lista del slider aunque hayamos pasado de imagen */
@media (hover: hover){
    .products ul.slider-list>li:focus,
    .products ul.slider-list>li:hover,
    .products ul.slider-list>li.selected{
        background: rgba(255, 255, 255, 0.5);
        box-shadow: inset 0 0 0.2rem rgba(0, 0, 0, 0.452), 0 0 5px rgba(0,0,0, 0.3);
    }
    body .products ul.slider-list>li:nth-of-type(3n+1):focus,
    body .products ul.slider-list>li:nth-of-type(3n+1):hover,
    body .products ul.slider-list>li:nth-of-type(3n+1).selected{
        background: var(--col-blue-trans);
    }
    body .products ul.slider-list>li:nth-of-type(3n+2):focus,
    body .products ul.slider-list>li:nth-of-type(3n+2):hover,
    body .products ul.slider-list>li:nth-of-type(3n+2).selected{
        background: var(--col-magenta-trans);
    }
    body .products ul.slider-list>li:nth-of-type(3n+3):focus,
    body .products ul.slider-list>li:nth-of-type(3n+3):hover,
    body .products ul.slider-list>li:nth-of-type(3n+3).selected{
        background: var(--col-yellow-trans);
    }
}

/* Y en las pantallas que no tienen hover, no se lo configuramos: */
@media (hover: none){
    .products ul.slider-list>li:focus,
    /* .products ul.slider-list>li:hover, */
    .products ul.slider-list>li.selected{
        background: rgba(255, 255, 255, 0.5);
        box-shadow: inset 0 0 0.2rem rgba(0, 0, 0, 0.452), 0 0 5px rgba(0,0,0, 0.3);
    }
    body .products ul.slider-list>li:nth-of-type(3n+1):focus,
    /* body .products ul.slider-list>li:nth-of-type(3n+1):hover, */
    body .products ul.slider-list>li:nth-of-type(3n+1).selected{
        background: var(--col-blue-trans);
    }
    body .products ul.slider-list>li:nth-of-type(3n+2):focus,
    /* body .products ul.slider-list>li:nth-of-type(3n+2):hover, */
    body .products ul.slider-list>li:nth-of-type(3n+2).selected{
        background: var(--col-magenta-trans);
    }
    body .products ul.slider-list>li:nth-of-type(3n+3):focus,
    /* body .products ul.slider-list>li:nth-of-type(3n+3):hover, */
    body .products ul.slider-list>li:nth-of-type(3n+3).selected{
        background: var(--col-yellow-trans);
    }
}
/* --------------------------------- Slider --------------------------------- */
.products div.slider{
    align-self: flex-start;
    width: 70%;
    height: 100vh;
    padding: 0;
    margin: 0;
    position: relative;
    cursor: pointer; 
}
.products div.slider img{
    align-self: flex-start;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -o-object-fit: contain;
       object-fit: contain;
    opacity: 0; /* Es importante establecer esta propiedad en cero, porque de lo contrario, al eliminar la clase "to-fadeout" vuelve a su estado por defecto  */
}

.products p{
    font-size: 1rem;
    position: absolute;
    top: 15%;
    right: 2%;
    padding: 1.5rem 1rem;
    width: 30%;
    min-width: 200px;
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    font-family: var(--font-KB-light);
    letter-spacing: normal;
    text-shadow: 0 0 2px white, 0 0 3px white, 0 0 4px white;
}
.products:nth-child(odd) div.slider{
    align-self: flex-end;
}
.products:nth-child(odd) p{
    left:2%;
    right: unset;
}
/* ------------ Corchetes para resaltar textos y otros elementos: ----------- */
span.brackets{
    --border-width: 0.1rem;
    --negative-border-w: calc(-1 * var(--border-width));
    --border-col: black;
    display: inline-block;
    position: absolute;
    top: var(--negative-border-w);
    bottom: var(--negative-border-w);
    width: 1rem;
    border-top: var(--border-width) solid var(--border-col);
    border-bottom: var(--border-width) solid var(--border-col);
}
span.brackets:nth-of-type(1){
    left: var(--negative-border-w);
    border-left: var(--border-width) solid var(--border-col);
}
span.brackets:nth-of-type(2){
    right: var(--negative-border-w);
    border-right: var(--border-width) solid var(--border-col);
}
/* Para el formulario de contacto */
.contact span.brackets{
    --border-col: white;
    width: 1rem;
}
/* Para "Sobre nosotros" */
.about-us span.brackets{
    --border-col: white;
    width: 1rem;
    --negative-border-w: 0rem;
    --border-width: 0.15rem
}
/* -------------------------------------------------------------------------- */
/*                               Sobre nosotros                               */
/* -------------------------------------------------------------------------- */


main.about-us>section>article>h1{
    font-size: 2rem;
    text-transform: uppercase;
    margin: 3rem 0;
    text-align: center;
}
main.about-us>section>article{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
}
main.about-us p{
    padding: 0.5rem 2rem;
    font-size: 1rem;
    letter-spacing: 0.05rem;
    text-align: justify;
    word-wrap: break-word;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
    text-justify: inter-word;
    text-indent: 1rem;
    min-width: 200px;
    font-family: var(--font-KB-light);
    font-weight: 100;
}
main.about-us p:first-of-type{
    padding-top: 1rem;
}
main.about-us p:last-of-type{
    padding-bottom: 1rem;
}
main.about-us article:nth-of-type(1)>div{
    position:relative;
    width: 90%;
    max-width: 1200px;
}
main.about-us article:nth-of-type(2)>div{
    display: grid;
    width: 100%;
    max-width: 1200px;
    gap: 0 1rem;
    grid-template-columns: repeat(auto-fill, 370px);
    grid-template-rows: repeat(auto-fill, 1fr);
    justify-content: center;
}
main.about-us article img{
    margin-bottom: 1rem;
    display: inline-block;
    position: relative;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 0.5s, box-shadow 0.5s;
}
main.about-us article img:hover{
    transform: scale(1.05);
}

/* Forma del PLACEHOLDER */
main.about-us article img[src=""]{
    outline: 1px solid red;
    background: rgba(59, 59, 59, 1);
}
/* Contenido del placeholder */
main.about-us article img[src=""]::after{
    content: "PLACEHOLDER";
    color: #fbe91c;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    overflow: visible;
}

#cookies{
    position: absolute;
    bottom: 1rem;
    left: 0;
    z-index: 3;
    display: flex;
    height: auto;
    width: auto;
}

#subvencion{
    position: absolute;
    bottom: 130px;
    right: 0;
    z-index: 3;
    display: flex;
    height: 200px;
    width: 200px;
}




/* -------------------------------------------------------------------------- */
/*                                 MEDIA QUERY                                */
/* -------------------------------------------------------------------------- */
/* Para móviles: */
@media (max-width: 700px) {
    /* ------------------- Encabezado de contacto y ubicación ------------------- */
    html body.cover header.contact-header ul{
        width: 100% !important;
    }
    
    /* ------------------------ Menú de hamburguesa ------------------------ */
    #check-hambmenu{
        position: absolute;
    }

    #lab-button{
        position: absolute;
        right: 3%;
        top:5%;
        z-index: 999;
        width: 26px;
        height: 26px;
        line-height: 0;
        font-size: 0;
        cursor: pointer;
        transition: -webkit-filter 0.3s;
        transition: filter 0.3s;
        transition: filter 0.3s, -webkit-filter 0.3s;
    }
    /* Efecto hover sobre el botón de menú */
    #lab-button:focus,
    #lab-button:hover{
        -webkit-filter: brightness(170%);
                filter: brightness(170%);
    }
    /* Efecto marcos de colores que aparecen alrededor del menú */
    #lab-button .frame{
        position: absolute;
        width: 10px;
        height: 10px;
    }
    /* Coloreado de los marcos */
    #lab-button:focus .frame:nth-of-type(1),
    #lab-button:hover .frame:nth-of-type(1){
        top: -7px;
        left: -7px;
        border-left: 2px solid rgb(60, 60, 60);
        border-top: 2px solid rgb(60, 60, 60);
    }
    #lab-button:focus .frame:nth-of-type(2),
    #lab-button:hover .frame:nth-of-type(2){
        top: -7px;
        right: -7px;
        border-top: 2px solid rgb(60, 60, 60);
        border-right: 2px solid rgb(60, 60, 60);
    }
    #lab-button:focus .frame:nth-of-type(3),
    #lab-button:hover .frame:nth-of-type(3){
        bottom: -7px;
        left: -7px;
        border-left: 2px solid rgb(60, 60, 60);
        border-bottom: 2px solid rgb(60, 60, 60);
    }
    #lab-button:focus .frame:nth-of-type(4),
    #lab-button:hover .frame:nth-of-type(4){
        bottom: -7px;
        right: -7px;
        border-right: 2px solid rgb(60, 60, 60);
        border-bottom: 2px solid rgb(60, 60, 60);
    }
    /* Configuración de las tres barras del menú */
    #lab-button>span{
        display: inline-block;
        width: 100%;
        height: 10%;
        line-height: 0;
        font-size: 0;
        transition: transform 0.3s, top 0.3s, bottom 0.3s, opacity 0.5s, left 0.3s;
        position: absolute;
        opacity: 1;
    }
    /* Coloreado de las tres barras del menú hamburguesa */
    #lab-button>span:nth-child(1){
        background: var(--col-blue-light);
        top:0%;
        left:0%;
    }
    #lab-button>span:nth-child(2){
        background: var(--col-magenta-light);
        top:50%;
        left: 0;
        transform: translateY(-50%);
    }
    #lab-button>span:nth-child(3){
        background: var(--col-yellow-light);
        bottom: 0%;
        left: 0;
    }
    /* Oculta el header en función de si está pulsado o no el checkbox */
    #check-hambmenu ~ header.other-menu{
        position: absolute;
        top: 7% !important;
        right: 0%;
        width: 0;
        height: 255px;
        max-width: -webkit-fit-content;
        max-width: -moz-fit-content;
        max-width: fit-content;
        transition: width 0.2s ease-in, transform 0.2s ease-in, top 0.2s, opacity 0.2s;
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
        transform: scaleY(0);
        transform-origin: center top; 
        z-index: 999 !important;
        opacity: 0;
    }
    /* Si está pulsado, le da un 100% de tamaño a lo ancho y una opacidad completa */
    body #check-hambmenu:checked ~ header.other-menu{
        top: 10% !important;
        width: 100%;
        transition: width 0.2s, transform 0.2s ease-in, top 0.2s;
        transform: scaleY(1);
        opacity: 1;
    }
    #check-hambmenu:checked ~ label{
        background: rgb(63, 63, 63);
    }
    #check-hambmenu:checked ~ label>span:nth-child(1){
        top:50%;
        left: 0;
        transform: translateY(-50%) rotate(45deg);
        background: white;
    }
    #check-hambmenu:checked ~ label>span:nth-child(2){
        opacity: 0;
        top:50%;
        left: 0;
        transform: rotate(45deg);
    }
    #check-hambmenu:checked ~ label>span:nth-child(3){
        bottom:50%;
        left: 0;
        transform: translateY(50%) rotate(-45deg);
        background: white;
    }
    #check-hambmenu ~ header.other-menu>nav>ul{
        gap: 10px;
    }

    article:not(.box-sect, .products, #editorial article, #corporativo article, #marketing article, #packaging article){
        width: 100% !important;
        max-width: 95% !important;
    }

    ul:not(header.menu-hamb ul, header.other-menu ul, .services ul){
        width: 85% !important;
        box-sizing: border-box !important;
    }
    body:not(.cover) form{
        max-width: 90%;
        width: 100%;
        min-width: 200px;
    }
    body iframe{
        width: 100% ;
        max-width: none;
    }
    /* -------------------------------- Servicios ------------------------------- */

    /* Cambia la posición del texto descriptivo y lo introduce en el flujo de la página  */
    .services .products p{
        position: relative;
        top: 0;
        right: 0;
        padding: 0.5rem 1rem;
        width: 95%;
        font-size: 1rem;
        margin-bottom: 2rem;
        margin-top: 1rem;
    }
    /* Cambia el aspecto de los corchetes y su posición al cambiar de posición el párrafo */
    .services .products p>span.brackets{
        width: 1rem;
        --negative-border-w: 0rem
    }
    /* Hace que la imagen de cada producto ocupe todo el ancho y se al largo de la imagen para que se vea mejor en móviles */
    .services section>article>.products div.slider{
        width: 100%;
        height: 60vh;
        min-height: 500px;
    }
    /* Evita que se descentre la imagen en hijos impares. Pero al estar al 100% de su ancho, no se percibe */
    .services .products:nth-child(odd) div.slider{
        align-self: center;
    }
    /* Evita que el texto se descentre en hijos impares: */
    .services .products:nth-child(odd) p{
        left:unset;
        right: unset;
    }
    /* ---------------- Media Query de la página "Sobre nosotros" --------------- */
    html body main.about-us article:nth-of-type(2) div{
        display: grid;
        width: 100%;
        gap: 0 1rem;
        grid-template-columns: repeat(auto-fill, 95%);
        justify-content: center;
    }

}

/* ----------------------- Para tabletas y portátiles ----------------------- */

@media (min-width: 701px) and (max-width: 1024px) {
    /* ------------------- Encabezado de contacto y ubicación ------------------- */
    /* html body.cover header.contact-header ul{
        width: 100% !important;
    }
     */
    /* ------------------------ Menú de hamburguesa ------------------------ */
    #check-hambmenu{
        position: absolute;
    }
    #lab-button{
        position: absolute;
        right: 3%;
        top:5%;
        z-index: 999;
        width: 26px;
        height: 26px;
        line-height: 0;
        font-size: 0;
        cursor: pointer;
        transition: -webkit-filter 0.3s;
        transition: filter 0.3s;
        transition: filter 0.3s, -webkit-filter 0.3s;
    }
    /* Efecto hover sobre el botón de menú */
    #lab-button:focus,
    #lab-button:hover{
        -webkit-filter: brightness(170%);
                filter: brightness(170%);
    }
    /* Efecto marcos de colores que aparecen alrededor del menú */
    #lab-button .frame{
        position: absolute;
        width: 10px;
        height: 10px;
    }
    /* Coloreado de los marcos */
    #lab-button:focus .frame:nth-of-type(1),
    #lab-button:hover .frame:nth-of-type(1){
        top: -7px;
        left: -7px;
        border-left: 2px solid rgb(60, 60, 60);
        border-top: 2px solid rgb(60, 60, 60);
    }
    #lab-button:focus .frame:nth-of-type(2),
    #lab-button:hover .frame:nth-of-type(2){
        top: -7px;
        right: -7px;
        border-top: 2px solid rgb(60, 60, 60);
        border-right: 2px solid rgb(60, 60, 60);
    }
    #lab-button:focus .frame:nth-of-type(3),
    #lab-button:hover .frame:nth-of-type(3){
        bottom: -7px;
        left: -7px;
        border-left: 2px solid rgb(60, 60, 60);
        border-bottom: 2px solid rgb(60, 60, 60);
    }
    #lab-button:focus .frame:nth-of-type(4),
    #lab-button:hover .frame:nth-of-type(4){
        bottom: -7px;
        right: -7px;
        border-right: 2px solid rgb(60, 60, 60);
        border-bottom: 2px solid rgb(60, 60, 60);
    }
    /* Configuración de las tres barras del menú */
    #lab-button>span{
        display: inline-block;
        width: 100%;
        height: 10%;
        line-height: 0;
        font-size: 0;
        transition: transform 0.3s, top 0.3s, bottom 0.3s, opacity 0.5s, left 0.3s;
        position: absolute;
        opacity: 1;
    }
    /* Coloreado de las tres barras del menú hamburguesa */
    #lab-button>span:nth-child(1){
        background: var(--col-blue-light);
        top:0%;
        left:0%;
    }
    #lab-button>span:nth-child(2){
        background: var(--col-magenta-light);
        top:50%;
        left: 0;
        transform: translateY(-50%);
    }
    #lab-button>span:nth-child(3){
        background: var(--col-yellow-light);
        bottom: 0%;
        left: 0;
    }
    /* Oculta el header en función de si está pulsado o no el checkbox */
    #check-hambmenu ~ header.other-menu{
        position: absolute;
        top: 7% !important;
        right: 0%;
        width: 0;
        height: 255px;
        max-width: -webkit-fit-content;
        max-width: -moz-fit-content;
        max-width: fit-content;
        transition: width 0.2s ease-in, transform 0.2s ease-in, top 0.2s, opacity 0.2s;
        overflow: hidden;
        display: flex;
        justify-content: flex-end;
        transform: scaleY(0);
        transform-origin: center top; 
        z-index: 999 !important;
        opacity: 0;
    }
    /* Si está pulsado, le da un 100% de tamaño a lo ancho y una opacidad completa */
    body #check-hambmenu:checked ~ header.other-menu{
        top: 10% !important;
        width: 100%;
        transition: width 0.2s, transform 0.2s ease-in, top 0.2s;
        transform: scaleY(1);
        opacity: 1;
    }
    #check-hambmenu:checked ~ label{
        background: rgb(63, 63, 63);
    }
    #check-hambmenu:checked ~ label>span:nth-child(1){
        top:50%;
        left: 0;
        transform: translateY(-50%) rotate(45deg);
        background: white;
    }
    #check-hambmenu:checked ~ label>span:nth-child(2){
        opacity: 0;
        top:50%;
        left: 0;
        transform: rotate(45deg);
    }
    #check-hambmenu:checked ~ label>span:nth-child(3){
        bottom:50%;
        left: 0;
        transform: translateY(50%) rotate(-45deg);
        background: white;
    }
    #check-hambmenu ~ header.other-menu>nav>ul{
        gap: 10px;
    }

    /* -------------------------------- Servicios ------------------------------- */

    /* Cambia la posición del texto descriptivo y lo introduce en el flujo de la página  */
    .services .products p{
        position: relative;
        top: 0;
        right: 0;
        padding: 0.5rem 1rem;
        width: 95%;
        font-size: 1rem;
        margin-bottom: 2rem;
        margin-top: 1rem;
    }
    /* Cambia el aspecto de los corchetes y su posición al cambiar de posición el párrafo */
    .services .products p>span.brackets{
        width: 1rem;
        --negative-border-w: 0rem
    }
    /* Hace que la imagen de cada producto ocupe todo el ancho y se al largo de la imagen para que se vea mejor en móviles */
    .services section>article>.products div.slider{
        width: 100%;
        height: 60vh;
        min-height: 500px;
    }
    /* Evita que se descentre la imagen en hijos impares. Pero al estar al 100% de su ancho, no se percibe */
    .services .products:nth-child(odd) div.slider{
        align-self: center;
    }
    /* Evita que el texto se descentre en hijos impares: */
    .services .products:nth-child(odd) p{
        left:unset;
        right: unset;
    }
}


/* -------------------------------------------------------------------------- */
/*                                 Animaciones                                */
/* -------------------------------------------------------------------------- */

/* Animación del logo de la página de INICIO */
#logo-cover{
    -webkit-animation: fadein-up-anim 1s backwards ease-in-out;
            animation: fadein-up-anim 1s backwards ease-in-out;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
    z-index: -1;
}
/* Animación del encabezado de la página de INICIO */
html body.cover header.contact-header{
    -webkit-animation: fadein-up-anim 1s backwards;
            animation: fadein-up-anim 1s backwards;
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
}

/* --------------------------- Carrusel en INICIO --------------------------- */
body.cover main div.slider{
    position: absolute;
    opacity: 0;
}
body.cover main div.slider img{
    position: absolute;
    /* width: 100vmin; */
    width: 80%;
    height: 70vmin;
    -o-object-fit: contain;
       object-fit: contain;
}
body.cover .to-fadeout{
    -webkit-animation: fadeout-to-left 1s both;
            animation: fadeout-to-left 1s both;
}
body.cover .to-fadein{
    -webkit-animation: fadein-scale 1s both;
            animation: fadein-scale 1s both;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}

/* Animación del logo tanto de la sección servicios como la de contacto */
.contact>section>img,
.services>section>img,
.about-us>section>img{
    -webkit-animation: fadein-down-anim 1.5s cubic-bezier(.34,1.25,.45,1.29) backwards;
            animation: fadein-down-anim 1.5s cubic-bezier(.34,1.25,.45,1.29) backwards;
}
/* ---------------- Animación de las categorías en Servicios ---------------- */
.services>section>article>a,
.contact>section>article>article{
    -webkit-animation: fadein-up-anim 1s backwards;
            animation: fadein-up-anim 1s backwards;
}
.services>section>article>a:nth-of-type(1),
.contact>section>article>article:nth-of-type(1){
    -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;
}
.services>section>article>a:nth-of-type(2),
.contact>section>article>article:nth-of-type(2){
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
}
.services>section>article>a:nth-of-type(3){
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
}
/* --------------------- Animación botón de hamburguesa --------------------- */
/* Animación del botón sólo para INICIO */
.cover #lab-button{
    -webkit-animation: fadein-left-anim 1s cubic-bezier(.17,.61,.21,2.16) backwards;
            animation: fadein-left-anim 1s cubic-bezier(.17,.61,.21,2.16) backwards;
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
}
/* Animación del botón para el resto de páginas */
body:not(.cover) #lab-button{
    -webkit-animation: fadein-left-anim 1s cubic-bezier(.17,.61,.21,2.16) both;
            animation: fadein-left-anim 1s cubic-bezier(.17,.61,.21,2.16) both;
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
}

/* -------------------- Animación menú de navegación (PC) ------------------- */
/* Sólo para INICIO */
.cover header.other-menu{
    -webkit-animation: fadein-left-anim 1s cubic-bezier(.13,.69,.38,1.19) backwards;
            animation: fadein-left-anim 1s cubic-bezier(.13,.69,.38,1.19) backwards;
    -webkit-animation-delay: 3s;
            animation-delay: 3s;
}

/* Para el resto de páginas */
header.other-menu{
    transform-origin: right bottom;
    -webkit-animation: fadein-left-anim 1s ease-in backwards;
            animation: fadein-left-anim 1s ease-in backwards;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
}
/* IMPRESCINDIBLE ESTA ANIMACIÓN QUE EVITA 
QUE APAREZCA LA BARRA DE SCROLL HORIZONTAL
MIENTRAS LA ANIMACIÓN DEL MENÚ ESTÁ FUNCIONANDO. PERO SÓLO FUNCIONA EN CHROME */
body:not(.cover){
    -webkit-animation: BODY-dont-overflowX 1.7s backwards;
            animation: BODY-dont-overflowX 1.7s backwards;
}
/* Animación de la caja de color que indica la página en la que nos encontramos */
div.box-sect{
    -webkit-animation: fadein 1.5s ease-in backwards;
            animation: fadein 1.5s ease-in backwards;
}
/* -------------------- Animación de la página de INICIO -------------------- */

div#other-logo img:nth-child(1){
    -webkit-animation: go-away-anim 3s backwards;
            animation: go-away-anim 3s backwards;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
}

/* Animaciones de la lista de actividades en el INICIO */

body.cover main div.box-list ul li{
    -webkit-animation: typing 1.5s steps(14) backwards;
            animation: typing 1.5s steps(14) backwards;
}
body.cover main div.box-list ul li:nth-of-type(1){
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
}
body.cover main div.box-list ul li:nth-of-type(2){
    -webkit-animation-delay: 5.7s;
            animation-delay: 5.7s;
}
body.cover main div.box-list ul li:nth-of-type(3){
    -webkit-animation-delay: 6.7s;
            animation-delay: 6.7s;
}
body.cover main div.box-list ul li:nth-of-type(4){
    -webkit-animation-delay: 8.2s;
            animation-delay: 8.2s;
}
body.cover main div.box-list ul li:nth-of-type(5){
    -webkit-animation-delay: 9.6s;
            animation-delay: 9.6s;
}
/* Activación del parpadeo */
body.cover main div.box-list ul li:nth-of-type(5)::after{
    content: "";
    -webkit-animation: cursor-blink 0.5s infinite;
            animation: cursor-blink 0.5s infinite
}


/* -------------------------------- Fade out -------------------------------- */
body .services .products .to-fadeout{
    -webkit-animation: fadeout 0.5s both;
            animation: fadeout 0.5s both;
}

/* ------------------------------- PARA INICIO ------------------------------ */
/* Clase que incluye la animación para #logo-cover */
#logo-cover.fadeout-cover{
    -webkit-animation: fadeout-gen 1s forwards;
            animation: fadeout-gen 1s forwards;
}
.fadeout-cover{
    -webkit-animation: fadeout-gen 0.5s forwards;
            animation: fadeout-gen 0.5s forwards;
}
/* --------------------------------- Fade in -------------------------------- */
body .services .products .to-fadein{
    -webkit-animation: fadein-right-anim 0.5s both;
            animation: fadein-right-anim 0.5s both;
    -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
}
/* ------------------------------- PARA INICIO ------------------------------ */
/* Clase que incluye la animación para #logo-cover */
.fadein-cover{
    -webkit-animation: fadein 1s forwards;
            animation: fadein 1s forwards;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
}
/* Fadein configurado para la lista de actividades del INICIO */
body.cover main div.box-list.fadein-cover{
    -webkit-animation: fadein 1s both;
            animation: fadein 1s both;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}

/* --------------------- Nuestra actividad en SERVICIOS --------------------- */
.services>section>article>ul>li:nth-of-type(1){
    -webkit-animation: fadein-up-anim 1s backwards;
            animation: fadein-up-anim 1s backwards;
}
.services>section>article>ul>li:nth-of-type(2){
    -webkit-animation: fadein-up-anim 1s backwards;
            animation: fadein-up-anim 1s backwards;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
}
.services>section>article>ul>li:nth-of-type(3){
    -webkit-animation: fadein-up-anim 1s backwards;
            animation: fadein-up-anim 1s backwards;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}
/* Los títulos de "Servicios" y "Sobre nosotros" */
.services h1:nth-of-type(1), 
.about-us article:nth-of-type(1) h1{
    -webkit-animation: fadein-right-anim 1s backwards;
            animation: fadein-right-anim 1s backwards;
}
.services h1:nth-of-type(2), 
.about-us article:nth-of-type(2) h1{
    -webkit-animation: fadein-right-anim 1s backwards;
            animation: fadein-right-anim 1s backwards;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
}
/* ----------------------- Animaciones "Sobre nosotros ---------------------- */
.about-us article:nth-of-type(1) div{
    -webkit-animation: fadein-up-anim 1s backwards;
            animation: fadein-up-anim 1s backwards;
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
}

/* -------------------------------------------------------------------------- */
/*                         Definición de los Keyframes                        */
/* -------------------------------------------------------------------------- */

/* ------------ Animaciones para el slider en INICIO ------------ */

/* Animación para los botones del Inicio */
@-webkit-keyframes translating {
    0%{
        bottom: 0;
    }
    100%{
        bottom: calc(100% + 1rem);
    }
}
@keyframes translating {
    0%{
        bottom: 0;
    }
    100%{
        bottom: calc(100% + 1rem);
    }
}
/* Animación para las imágenes del slider */
@-webkit-keyframes fadein-scale {
    0%{
        opacity: 0;
        transform: scale(0.5);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes fadein-scale {
    0%{
        opacity: 0;
        transform: scale(0.5);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

/* Animación para las imágenes del slider */
@-webkit-keyframes fadeout-to-left {
    0%{
        opacity: 1;
        transform: translate(0%);
    }
    100%{
        opacity: 0;
        transform: translate(-100%);
    }
}
@keyframes fadeout-to-left {
    0%{
        opacity: 1;
        transform: translate(0%);
    }
    100%{
        opacity: 0;
        transform: translate(-100%);
    }
}

/* Animación general pensada para el logo en INICIO */
@-webkit-keyframes fadeout-gen {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@keyframes fadeout-gen {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
/* Animación pensada para el triángulo de color en la parte superior de cada página */
@-webkit-keyframes fadein {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes fadein {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
/* Animación para desvanecimientos */
@-webkit-keyframes fadeout {
    0%{
        opacity: 1;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: scale(0.75);
    }
}
@keyframes fadeout {
    0%{
        opacity: 1;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: scale(0.75);
    }
}
/* Animaicón para el logo en INICIO y 
los diferentes objetos en las otras páginas
como algunas secciones */
@-webkit-keyframes fadein-up-anim {
    0%{
        opacity: 0;
        transform: translateY(10%);
    }
    70%{
        opacity: 0s;
        transform: translateY(-2%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadein-up-anim {
    0%{
        opacity: 0;
        transform: translateY(10%);
    }
    70%{
        opacity: 0s;
        transform: translateY(-2%);
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
/* Animación para el icono del logo en INICIO */
@-webkit-keyframes go-away-anim {
    0%{
        opacity: 1;
        transform-origin: center center;
    }

    50%{
        transform: translate(100vw, -70vh) rotate(360deg) scale(0);
    }
    80%{
        opacity: 0;
        transform: translate(0,0) rotate(0) scale(1.0);
    }
    100%{
        opacity: 1;
        transform: translate(0,0) rotate(0) scale(1.0);
    }
}

@keyframes go-away-anim {
    0%{
        opacity: 1;
        transform-origin: center center;
    }

    50%{
        transform: translate(100vw, -70vh) rotate(360deg) scale(0);
    }
    80%{
        opacity: 0;
        transform: translate(0,0) rotate(0) scale(1.0);
    }
    100%{
        opacity: 1;
        transform: translate(0,0) rotate(0) scale(1.0);
    }
}

@-webkit-keyframes fadein-down-anim {
    0%{
        opacity: 0;
        transform: translateY(-100%);
    }
    70%{
        transform: translateY(10%);
    }

    100%{
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes fadein-down-anim {
    0%{
        opacity: 0;
        transform: translateY(-100%);
    }
    70%{
        transform: translateY(10%);
    }

    100%{
        opacity: 1;
        transform: translateY(0%);
    }
}
@-webkit-keyframes fadein-left-anim {
    0%{
        opacity: 0;
        transform: translateX(100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0%);
    }
}
@keyframes fadein-left-anim {
    0%{
        opacity: 0;
        transform: translateX(100%);
    }
    100%{
        opacity: 1;
        transform: translateX(0%);
    }
}
@-webkit-keyframes fadein-right-anim {
    0%{
        opacity: 0;
        transform: translateX(-50%);
    }
    100%{
        opacity: 1;
        transform: translateX(0%);
    }
}
@keyframes fadein-right-anim {
    0%{
        opacity: 0;
        transform: translateX(-50%);
    }
    100%{
        opacity: 1;
        transform: translateX(0%);
    }
}
/* Animación para evitar que aparezca la barra de deslizamiento */
@-webkit-keyframes BODY-dont-overflowX {
    0%{
        overflow-x: hidden;
    }
    99%{
        overflow-x: hidden;
    }
    100%{
        overflow-x: auto;
    }
}
@keyframes BODY-dont-overflowX {
    0%{
        overflow-x: hidden;
    }
    99%{
        overflow-x: hidden;
    }
    100%{
        overflow-x: auto;
    }
}
/* Animación de escritura */
@-webkit-keyframes typing {
    0%{
        width: 0;
    }
    100%{
        width: 9rem;
    }
}
@keyframes typing {
    0%{
        width: 0;
    }
    100%{
        width: 9rem;
    }
}
/* Animación de parpadeo de cursor */
@-webkit-keyframes cursor-blink {
    0%{
        content: "";
    }
    100%{
        content:"|"
    }
    
}
@keyframes cursor-blink {
    0%{
        content: "";
    }
    100%{
        content:"|"
    }
    
}