/* --- Fuentes --- */
@font-face {
    font-family: 'Graphik Italic';
    src: url('../../assets/fonts/Graphik Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Graphik';
    src: url('../../assets/fonts/Graphik.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Idlewild';
    src: url('../../assets/fonts/Idlewild-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Adobe Caslon Pro Italic';
    src: url('../../assets/fonts/ACaslonPro-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Adobe Caslon Pro';
    src: url('../../assets/fonts/ACaslonPro-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

/* --- Reseteo y Estilos Base --- */

:root{
    --azul_primario: #072942;
    --azul_secundario: #559F93;
    --gris: #D9D9D9;
}

/*Version 13:34*/
* {
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
}

body{
    background-color: #E8E7E3; /*Fondo principal*/
    height: 100dvh;
}

.cuerpo{
    height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cuerpo.bg{
    background-image: url("../../assets/images/share/fondo.webp");
    background-size: cover;
    background-position: center;
}

.video-container {
    position: absolute;
    width: 100%;
    height: calc(100dvh - 130px);
    overflow: hidden;
    z-index: -1;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* efecto tipo background-size: cover */
}

.contenedor-menu{
    display: none;
    background-color: var(--azul_primario);
    width: 712px;
    height: 470px;
    text-align: center;
    align-content: center;
}

.intro{
    color: #fff;
    text-align: center;
    justify-items: center;
    display: none;
}

.logo{
    display: flex;
    justify-content: center;
    align-self: center;
}

.logo > img{
    width: 288px;
    height: 142px;
    margin-bottom: 70px;
}

.intro h3{
    font-family: "Graphik Italic";
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.intro p{
    font-family: "Adobe Caslon Pro Italic";
    font-style: italic;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 70px;
}

.intro .mas{
    font-family: "Idlewild";
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 350;
    letter-spacing: 5px;
    margin-bottom: 20px;
    cursor: pointer;
}

.intro .aprende{
    display: flex;
    justify-content: center;
    align-self: center;
}

.intro .aprende > img{
    width: 24px;
    height: 12px;
    cursor: pointer;
}

.menu{
    display: none;
}

.opcion-principal h3, .opcion-principal h3 > a , .contenedor-contacto h3{
    font-family: "Idlewild";
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 350;
    letter-spacing: 5px;
    cursor: pointer;
}

.opcion-principal.activa h3, .opcion-principal.activa h3 a{
    color: var(--azul_secundario);
}

.opciones{
    display: flex;
    justify-content: center;
    justify-items: center;
}

.opciones, .opciones a{
    font-family: "Idlewild";
    text-transform: uppercase;
    color: #fff;
    font-size: 10px;
    font-weight: 350;
}

.opciones hr{
    width: 18px;
    border: solid 1px var(--azul_secundario);
    margin: 24px 0;
}

.opciones.show hr{
    display: none;
}

.opciones > div{
    display: none;
    padding: 0 10px;
    margin: 19px 0;
    border-right: solid 2px var(--azul_secundario);
    letter-spacing: 3px;
}

.opciones.no.show{
    display: flex;
    justify-content: center;
    justify-items: center;
}

.opciones.no.show hr{
    display: block;
}

.opciones .last{
    border-right:none;
}

.opciones.show > div{
    display: inline-block;
}

/*Para abajo y arriba, seran 12px altura, pero al ser izq o der sera 24px*/
.boton-flecha{
    background-image: url("../../assets/images/share/flecha.webp");
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    justify-self: center;
}

.boton-flecha.abajo{
    height: 12px;
    width: 24px;
}

.boton-flecha.arriba{
    height: 12px;
    width: 24px;
    transform: rotate(180deg); /* gira 180 grados */
}

.flecha > img{
    height: 12px;
    width: 24px;
    cursor: pointer;
}

.flecha.izquierda{
    height: 24px;
    width: 12px;
    transform: rotate(90deg); /* gira 90 grados */
    place-self: center;
    align-content: center;
    margin-top: 10px;
}

.flecha-izquierda{
    display: flex;
    justify-content: center;
    justify-items: center;
    margin-top: 30px;
}

.flecha-izquierda img{
    height: 12px;
    width: 24px;
    cursor: pointer;
    transform: rotate(90deg); /* gira 90 grados */
    place-self: center;
}

.divisor{
    min-height: 70px;
    height: 70px;
    width: 100%;
    margin-top: auto;
    margin-bottom: -35px;
    z-index: 2;
    background-image: url("../../assets/images/share/divisor.webp");
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
}

.footer{
    width: 100%;
    height: 285px;
    background-color: #E8E7E3; /*Fondo principal*/
    text-align: center;
    color: var(--azul_primario);
    align-content: center;
}

.footer img{
    width: 72px;
    height: 72px;
    margin-bottom: 35px;
}

.footer p{
    font-size: 18px;
    line-height: 22px;
}

.footer .copyright{
    font-family: "Adobe Caslon Pro";
    font-style: normal;
}

.footer .derechos{
    font-family: "Adobe Caslon Pro Italic";
    font-style: italic;
}   

/* Quitar las lineas punteadas de fancybox */
.fancybox__container *:focus {
  outline: none !important;
}

/* ///////// GALERIA ///////// */

.opcion-galeria{
    cursor: pointer;
}

#galeria-menu{
    display: none;
}

#galeria-menu.show{
    display: flex;
    justify-content: right;
    justify-self: right;
}

#galeria-menu img{
    width: 20px;
    height: 20px;
    padding-right: 20px;
    cursor: pointer;
}

.contenedor-menu.show.reducido{
    height: 30px;
    min-height: 30px;
    width: 100%;
}

.contenedor-galeria{
    display: none;
    width: 100%;
    height: calc(100dvh - 130px);
    background-color: var(--gris);
}

.contenedor-galeria.show{
    display: block;
}

.galeria{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 50%);
    row-gap: 2px;
    column-gap: 3px;
    height: 100%;
}

.galeria.tres{
    grid-template-columns: repeat(3, 1fr);
}

.galeria.largo{
    grid-template-rows: repeat(1, 100%);
}

.img{
    overflow: hidden;
}

.img > img, .img > a > img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.ver-mas{
    display: none;
    font-family: "Idlewild";
    width: 100%;
    height: 30px;
    min-height: 30px;
    text-align: center;
    align-content: center;
    background-color: var(--gris);
    cursor: pointer;
    text-transform: uppercase;
    color: var(--azul_secundario);
    font-size: 18px;
    letter-spacing: 4px;
}

.divisor.no-margin-bottom{
    margin: 0;
}

.lightbox{
    align-self: anchor-center;
}

/* ///////// CONTACTO ///////// */

.contenedor-contacto{
    display: none;
    background-color: var(--azul_primario);
    width: 100%;
    height: 550px;
    text-align: center;
    align-content: center;
    transition: all 0.5s ease;
    opacity: 0;
}

.contenedor-contacto.show{
    opacity: 1;
}

.contenedor-contacto h3{
    color: var(--azul_secundario);
    margin-bottom: 50px;
}

.contactos{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, auto);
    color: #fff;
    row-gap: 100px;
}

.contacto{
    grid-column: span 2;
}

.nombre{
    font-family: "Graphik";
    text-transform: uppercase;
    font-size: 24px;
    line-height: 34px;
    letter-spacing: 2px;
}

.puesto{
    font-family: "Adobe Caslon Pro Italic";
    font-style: italic;
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
}

.email, .numero{
    font-family: "Adobe Caslon Pro";
    font-style: normal;
    font-size: 24px;
    font-weight: 300;
    line-height: 30px;
    color: #fff;
    text-decoration: none;
}

.regresar-menu{
    display: flex;
    justify-content: right;
    margin: 30px 0 20px 0;
}

.regresar-menu img{
    justify-content: right;
    padding-right: 30px;
    cursor: pointer;
}

.regresar-menu h3{
    font-family: "Idlewild";
    text-transform: uppercase;
    color: #fff;
    font-size: 20px;
    font-weight: 350;
    letter-spacing: 5px;
    cursor: pointer;
}

.mobile{
    display: none;
}

@media screen and (max-width: 1300px){

    .contenedor-menu{
        width: 600px;
        height: 300px;
    }

    .logo > img{
        width: 190px;
        height: 94px;
        margin-bottom: 40px;
    }

    .intro h3, .intro p{
        font-size: 14px;
    }

    .intro p{
        margin-bottom: 40px;
    }

    .intro .mas{
        font-size: 10px;
        margin-bottom: 20px;
    }

    .opcion-principal h3, .opcion-principal h3 > a, .contenedor-contacto h3{
        font-size: 15px;
    }

    .opciones > div{
        margin: 20px 0;
    }

    .opciones, .opciones a{
        font-size: 8px;
        letter-spacing: 3px;
    }

    .contenedor-contacto{
        height: 400px;
    }

    .contenedor-contacto h3{
        margin-bottom: 15px;
    }

    .regresar-menu{
        margin-top: 20px;
    }

    .contactos{
        row-gap: 30px;
    }

    .contenedor-galeria{
        height: calc(100dvh - 110px);
    }

    .divisor{
        min-height: 50px;
        height: 50px;
        margin-bottom: -25px;
    }

    .footer{
        height: 170px;
    }

    .footer img{
        height: 50px;
        width: 50px;
        margin-bottom: 10px;
    }

    .footer p{
        font-size: 14px;
        line-height: 16px;
    }

    .nombre, .puesto, .email, .numero{
        font-size: 16px;
    }
}

@media screen and (max-width: 900px){

    .desktop{
        display: none;
    }

    .regresar-menu img{
       width: 20px;
       height: 20px;
    }

    .contenedor-contacto h3{
        font-size: 16px;
        margin-bottom: 15px;
    }

    .contactos.mobile{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, auto);
        row-gap: 25px;
    }

    .nombre, .puesto, .email, .numero{
        font-size: 12px;
        line-height: normal;
    }

    .opciones .mobile{
        display: block;
    }
}

@media screen and (max-width: 600px){
    .video-container{
        display: none;
    }

    .cuerpo{
        background-image: url("../../assets/images/share/fondo.webp");
        background-size: cover;
        background-position: center;
    }

    .contenedor-menu{
        width: 100%;
        height: 350px;
    }

    .menu{
        justify-items: center;
    }

    .logo.mobile{   
        display: flex;
    }

    .menu .logo.mobile > img{
        margin-bottom: 20px;
    }

    .opcion-principal h3, .opcion-principal h3 > a, .contenedor-contacto h3{
        font-size: 12px;
    }

    .opciones, .opciones a{
        font-size: 8px;
    }

    .opciones hr{
        margin: 14px 0;
    }

    .opciones > div{
        margin: 10px 0;
        padding: 0 4px;
    }

    .galeria.dos{
        grid-template-columns: repeat(2, 1fr); /*Se vuelve 2 x 2*/
    }

    .regresar-menu img{
       width: 16px;
       height: 16px;
    }

    .contenedor-contacto{
        height: 350px;
    }   

    .nombre, .puesto, .email, .numero{
        font-size: 10px;
        line-height: normal;
    }

    .footer img{
        width: 40px;
        height: 40px;
    }

    .footer p{
        font-size: 12px;
    }
}

.show{
    display: block;
}

.hide{
    display: none;
}