@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

body,
html {

    margin: 0;
    padding: 0;
    font-family: "Bricolage Grotesque";
    /*    color: var(--color-difference, #FFF);*/
    background-color: white;
    line-height: 132%;
}

/*
body {
    opacity: 0;
    visibility: hidden;   Evita parpadeos en algunos navegadores 
    transition: opacity 1s ease-in-out, visibility 0s linear 1s;
}

body.loaded {
    opacity: 1;
    visibility: visible;
}
*/


img {

    width: 100%;
    object-fit: cover;
}


.etiquetas-proyectos a:hover {

    color: blue;
}

#portada-7 img {

    transform: scale(.6);
    /* sombra-elemento */
    box-shadow: 63px -42px 21px 0px rgba(0, 0, 0, 0.00), 40px -27px 19px 0px rgba(0, 0, 0, 0.03), 23px -15px 16px 0px rgba(0, 0, 0, 0.09), 10px -7px 12px 0px rgba(0, 0, 0, 0.15), 3px -2px 7px 0px rgba(0, 0, 0, 0.17);
}

#portada-8 img {

    transform: scale(.6);
    /* sombra-elemento */
    box-shadow: 63px -42px 21px 0px rgba(0, 0, 0, 0.00), 40px -27px 19px 0px rgba(0, 0, 0, 0.03), 23px -15px 16px 0px rgba(0, 0, 0, 0.09), 10px -7px 12px 0px rgba(0, 0, 0, 0.15), 3px -2px 7px 0px rgba(0, 0, 0, 0.17);
}

.nav-bar-style {

    mix-blend-mode: difference;

    color: white;
    align-items: flex-start;
    justify-content: flex-start;

    width: 100vw;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    z-index: 9999;
}

.wrap-nav {

    background-color: transparent;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5em;

    /*    color: var(--color-difference, #FFF);*/
    text-align: center;
    font-family: "Bricolage Grotesque";
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 28.8px */

}

.wrap-nav-item {
    display: flex;
    gap: .5em;
}

.titulo:hover {

    color: blue;
    cursor: none;
}



.visible {
    display: none;
}

.proyectos {
    width: var(--ancho-real);
    height: var(--alto-real);
    background-color: none;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    /*    mix-blend-mode: difference;*/
    z-index: 1;
/*    user-select: none;*/
}

.wrap-proyectos {

    display: inline-flex;
    position: relative;
    width: 100%;
    padding-left: 1.5em;
    padding-right: 1.5em;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    flex-direction: column;
    color: black;
    /*    gap: .05em;*/
}

.etiquetas-proyectos {

    display: inline-flex;
    width: auto;
    gap: 1.5em;
    mix-blend-mode: difference;

}

.esfera {
    position: relative;
    top: 0em;
    width: 60%;
    max-width: 600px;
    max-height: 600px;
    height: auto;
    aspect-ratio: 1 / 1;
    /* Relación de aspecto 11:1 */

    border-radius: 999px;
    background: var(--gradient-3d, radial-gradient(71.13% 71.13% at 50% 28.87%, #FFF 0%, #F0EDED 16%, #B1B1B1 38%, #414141 80%, #1F1F1F 100%));


    /* sombras */
    box-shadow: 40px 60px 60px 0px rgba(0, 0, 0, 0.25), 0px 1636px 250px 0px rgba(0, 0, 0, 0.02), 0px 1047px 250px 0px rgba(0, 0, 0, 0.15), 0px 589px 250px 0px rgba(0, 0, 0, 0.50), 0px 262px 250px 0px rgba(0, 0, 0, 0.85), 0px 65px 144px 0px rgba(0, 0, 0, 0.98);
}

.wrap-esfera {
    width: var(--ancho-real);
    height: var(--alto-real);
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    user-select: none;
    /* Deshabilita la selección de texto */


}

.esfera-halo {
    position: absolute;
    border-radius: 200px;
    background: rgba(245, 245, 245, 0.20);
    mix-blend-mode: color-dodge;
    filter: blur(120px);
    transform: rotateY(-1em);

    width: 60%;
    max-width: 600px;
    max-height: 600px;
    height: auto;
    aspect-ratio: 1 / 1;
    /* Relación de aspecto 11:1 */
}

.portada-style {
    width: 100%;
    height: 100%;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    z-index: 2;
/*    user-select: auto;*/
    /* Deshabilita la selección de texto */

}

.wrap-portada {
    width: 40%;
}

.portada-none {
    display: none;
    position: absolute;

    /* sombra-elemento */
    box-shadow: 63px -42px 21px 0px rgba(0, 0, 0, 0.00), 40px -27px 19px 0px rgba(0, 0, 0, 0.03), 23px -15px 16px 0px rgba(0, 0, 0, 0.09), 10px -7px 12px 0px rgba(0, 0, 0, 0.15), 3px -2px 7px 0px rgba(0, 0, 0, 0.17);

}




.absolute {
    position: absolute;
    display: none;
}





.wrap-conoceme {
    width: var(--ancho-real);
    height: var(--alto-real);
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    background-color: black;
}

.conoceme-text {
    padding-left: 1.5em;
    padding-right: 1.5em;
    opacity: 0;
    display: none;
    transition: 1s;
}

#conoceme-secction {
    display: none;
    opacity: 0;
}

.conoceme-pie {
    position: absolute;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: row;
    width: var(--ancho-real);
    height: var(--alto-real);
    top: 0;
    left: 0;
    /*background-color: gray;*/
}

.volver-contactar {
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    height: 3em;
    justify-content: flex-start;
    align-items: center;
    z-index: 9999;


}


.contactar {
    padding: 1.5em;
    display: flex;
    flex-direction: column;
    height: 3em;
    justify-content: flex-start;
    align-items: center;
    z-index: 9999;
}

.wrap-conoceme-contactar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    color: white;
}

.carita {
    font-size: 1.4em;
    line-height: 100%;
    position: relative;
    top: -3px;
}

#cerrar-gsap {
    position: relative;
    top: 1.3px;
}

.wrap-contacto-page {

    display: inline-flex;
    position: relative;
    width: 100%;
    padding-left: 1.5em;
    padding-right: 1.5em;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    flex-direction: column;
    color: white;
    z-index: 99;
    /*    gap: .05em;*/
}

.wrap-contacto-last {
    display: flex;
    width: 100%;
    position: absolute;
    top: 0;
    justify-content: flex-end;
    color: white;
    
       
  
    align-items: flex-start;
   

    /*    color: var(--color-difference, #FFF);*/
    text-align: center;
    font-family: "Bricolage Grotesque";
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 28.8px */
}

.categoria-contacto {
    width: 4em;
}

.numero {
    width: 1em;
    display: flex;
}