@font-face { font-family: 'noah-regular'; src: url('../fonts/noah-regular.otf'); }
@font-face { font-family: 'noah-bold'; src: url('../fonts/noah-bold.otf'); }

:root {
    --clr-main: #004678;
    --clr-main-h: #0c578d;
    --clr-second: #006cb8;
    --clr-second-h: #0d84da;
}

html { scroll-behavior: smooth; }
body { background: #eee; font-family: 'noah-regular'; font-size: 1.375rem; overflow-y: overlay; overflow-x: hidden; }
body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { width: 24px; background: #0005; border-radius: 12px; }
body::-webkit-scrollbar-thumb:hover { background: #0008; }
body::-webkit-scrollbar-thumb:active { background: #000a; }
*::selection { background-color: var(--clr-second); color: #fff; }

.menu { width: 100vw; height: 6rem; background: none; position: fixed; top: 0; left: 0; z-index: 200;
    transition: 0.3s all ease; overflow: hidden; }
.menu.activo { height: 100vh; background: var(--clr-main); }
.menu .main { margin: 1rem 2rem; float: left; width: auto; font-family: 'noah-bold'; font-weight: 700; text-decoration: none; }
.menu .main img { width: 64px; backdrop-filter: blur(8px); border-radius: 50%; transform: rotateY(0deg);
    transition: 0.5s ease all; }
.menu .main img:hover { background: #fff; animation: logo-ani 1s linear; }
.menu .icon { width: 64px; height: 64px; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(8px); color: #333; border: none; 
    font-weight: 700; border-radius: 50%; float: right; margin: 1rem 2rem; cursor: pointer; transition: 0.2s all ease;
    position: relative; z-index: 201; }
.menu .icon:hover { background: #fff; color: var(--clr-main); }
.menu.activo .icon { color: #fff; background: var(--clr-main); transition: 0.2s all ease; }
.menu.activo .icon:hover { background: #0002; }
.menu .links { position: absolute; width: 70%; height: 100%; left: -100%; top: 0; display: flex;
    flex-direction: column; justify-content: center; }
.menu.activo .links { left: 15%; }
.menu .link { width: 50%; color: #eee; text-decoration: none; text-align: center; line-height: 2.5rem; margin: 0.5rem auto; font-size: 1.5rem;
    text-transform: uppercase; transition: 0.3s all ease; }
.menu .link:hover { background: #A1E8AF; color: var(--clr-main); font-weight: 900; }
.menu .link:nth-child(3) { top: 4rem; }
.menu .link:nth-child(4) { top: 8rem; }
.menu .link:nth-child(5) { top: 12rem; }
.menu .link:nth-child(6) { top: 16rem; }
.menu .link:nth-child(7) { top: 20rem; }
.menu .link:nth-child(8) { top: 24rem; }
.menu .link:nth-child(9) { top: 28rem; }
.menu .link:nth-child(10) { top: 32rem; }

.titulo { width: 100%; font-size: 5vw; font-weight: 700; color: var(--clr-main); }
.subtitulo { width: 100%; font-size: 2vw; }

.footer { position: relative; font-size: 1.25rem; padding: 7rem 5%; z-index: 100; background: var(--clr-main); }
.footer .mapa-texto { width: 80%; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-around; margin: 0 auto 2rem auto; }
.footer .texto { width: 55%; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; text-align: left;
    color: #fff; }
.footer .texto a { text-decoration: none; color: #fff; }
.footer .texto a:hover { text-decoration: underline; }
.footer .mapa { width: 45%; border-radius: 4px; cursor: pointer; position: relative; }
.footer .mapa img { width: 100%; height: auto; transition: 0.3s ease all; }
.footer .mapa:hover img { filter: opacity(25%); }
.footer .titulo-mapa { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; flex-wrap: wrap;
    flex-direction: column; justify-content: center; opacity: 0; transition: 0.3s ease all; }
.footer .mapa:hover .titulo-mapa { opacity: 1; }
.footer .titulo-mapa h2 { background: var(--clr-main); color: #fff; }
.footer .redes a { height: auto; padding: 0 1rem; }
.footer .redes img { width: 32px; filter: invert(100%); }
.footer-logo { width: 128px; height: auto; margin: 1rem auto; }

.aviso-privacidad { padding: 7rem 10% 3rem 10%; }
.aviso-privacidad * { line-height: 2.25rem; }

/* Tamaño Mediano */
@media screen and (max-width: 992px) {
    .aviso-privacidad { padding: 9rem 5% 5rem 5%; }
}

/* Tamaño pequeño */
@media screen and (max-width: 576px) {
    .menu .links { width: 95%; }
    .menu.activo .links { left: 2.5%; }
    .menu .link { line-height: 1.25rem; font-size: 1.125rem;}
}

@keyframes logo-ani {
    0% { opacity: 1; }
    25% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}