html, body {
    margin: 0;
    padding: 0;
    background-color: #f1f1f1;
    font-family: "Inter Tight", sans-serif;
}

@view-transition{
    navigation: auto;
}

::view-transition-old(root), ::view-transition-new(root){
    animation-duration: 0.5s;
}

p, a{
    color:#000000;
    text-decoration: none;
    font-size: 14px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding: 0px;
    margin: 0px;
}

.p-grey{
    color: #858585;
}

small{
    font-size: 11px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding: 0px;
    margin: 0px;
    color: #858585;
}

mark{
    display: inline-block;
    font-size: 14px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding: 2px 12px; /*espacio a los lados del mark*/
    margin: 0px;
    background-color: #ff91e5;
    color: #000000;
    border-radius: 24px;
    margin-bottom: 4px;
}

button{
    font-family: "Inter Tight", sans-serif;
    font-size: 14px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background-color: #FF7BD8;
    width:fit-content;
    padding: 8px 16px;
    border: none;
    border-radius: 40px;
    transition: all ease-in-out 0.8s;
}

button:hover{
    background-color: rgb(47, 47, 47);
    color: #ffffff;
    cursor: pointer;
}

.blackbutton{
    background-color: #ffffff00;
    color: #020202;
    border: 1px solid #4f4f4f;
}

.buttonstogether{
    display: flex;
    flex-direction: row;
    row-gap: 4px;
}

h1{
    font-size: 104px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding: 0px;
    margin: 0px;
    letter-spacing: -0.2rem;
    text-box: trim-both cap alphabetic; /*trim la caja de texto por arriba y por debajo*/

}

h2{
   font-size: 48px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding: 0px;
    margin: 0px;
}

h3{ /*EN ABOUT*/
    font-size: 32px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding: 0px;
    margin: 0px;
}

h4{ /*HIDE TXT*/
    font-size: 20px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding: 0px;
    margin: 0px;
}

/*FONT CLASSES*/
.instrument-serif-regular {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.instrument-serif-regular-italic {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
}/*las de inter no hacen falta pq es la fuente default, para hacer modificaciones solamente habría que cambiar el weight y tamaño desde las clases que quiera*/


img{
    font-family: "Inter Tight", sans-serif;
    font-size: 16px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/*NAVEGACIÓN*/
nav{ /*barra cerrada*/
    position: sticky;
    top: 0;
    display: flex;
    justify-content:space-between;
    align-items:center;
    height: 40px;
    padding: 0px 12px; /*espacio a los lados del nav*/
    z-index: 3;
    background-color: #f1f1f1;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 3%;

}

.logo a{
    color: #000000;
    text-decoration: none;
    font-size: 18px;
    font-weight: 300;
   
}

.logo a:hover{
    color: #fa26b7;
}

.nav-links{
    display: flex;
    list-style: none;
    margin: 0;  
    /* mix-blend-mode:difference; */
}

.nav-links a{
    display: block;
    padding: 0px 0px;
    color: #000000;
    text-decoration: none;
    transition: all ease-in-out 100ms;
    font-size: 18px;
    font-weight: 300;
}

.nav-links a:hover{
    color: #fa26ec;
}

.language-selector {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    transform: translate(-50%, -50%);
}

.language-selector button {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 4px;
    opacity: 0.5;
}

.language-selector button.active {
    opacity: 1;
}

/* ARROWS */
.arrows{
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
    background-color: #f1f1f1;
    z-index: 3;
}

/* FOOTER */
.footer {
  padding: 12px 0px;
  margin: 0px;
  text-align: center;
  background: #f1f1f1;
}

/*ABOUUUUUUUUUT*/
.contents{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: calc(100vh - 40px);
    height: auto;
    box-sizing: border-box; /*para incluir el padding en el cálculo del tamaño total del elemento, evitando que el padding aumente el tamaño total del elemento y cause desbordamiento.*/
    padding-top: 24px;
}

.contents .block{
    display: flex;
    flex-direction: column;
     width: 400px;
    height: fit-content;
    gap: 24px;
    font-size: 13px;
}

.contents .block img{
    width: 100%;
    height: fit-content;
    object-fit: cover; /*para que la imagen se ajuste al tamaño del contenedor sin deformarse*/
}

.contents .subblock{
    display: flex;
    flex-direction: column;
    align-items: flex-start; /*align-items: flex-start; para alinear a la izquierda*/
    justify-content: space-between;/*justify-content:space-between para distribuir el espacio entre los elementos*/
    height: fit-content;
    gap: 4px;
}

.contents .subblock2{
    display: flex;
    flex-direction: row;
    align-items: flex-start; /*align-items: flex-start; para alinear a la izquierda*/
    height: fit-content;
    gap: 16px;
}

.contents .subblockbutton{
    display: flex;
    flex-direction: row;
    align-items: flex-start; /*align-items: flex-start; para alinear a la izquierda*/
    height: fit-content;
    gap: 8px;
}


.contents .info{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: fit-content;
    height: fit-content;
    gap: 12px;
}

.contents .info p:first-child { /*para el primer p dentro de info, que es la fecha, para que no se divida en varias líneas*/
    white-space: nowrap;
}

img.ventanaabout{
    position: absolute;
    z-index: 2;
    transform-origin: left top;
    left: 19%;
    top: -2%; /*lo lejos que esta del borde superior*/
    width: 25%;
}

.contenedor_minimis{
    position: absolute;
    z-index: 3;
    transform-origin: left top;
    right: 3%;
    bottom: 4%; /*lo lejos que esta del borde superior*/
}


/*INDEEEEEEEEEEEEEEEEX*/
.projects{
    display:grid;
    width: auto;
    height: fit-content;
    grid-template-columns: 1fr 1fr 1fr; /*tres columnas de igual tamaño*/
    grid-row: 1fr 1fr 1fr; /*tres filas de igual tamaño*/
    grid-column-gap: 2px;
    grid-row-gap: 2px;
    padding-left: 4px;
    padding-right: 4px;
}

.projects .projectitem{
    display: flex;
    flex-direction: column; /* Stacks them like block */
    position: relative;
    width: auto;
    cursor: pointer;
    border-radius: 0px;
    overflow: hidden;
    transition: ease-in-out 0.350s; /*se pone aqui y no en :hover pq asi me hace el ease-out tmbn*/
}

.projects .projectitem:hover{
    border-radius: 168px;
    overflow: hidden;
}

.hide{
    display: flex;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color:#ffffff;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.350s ease-in-out, visibility 0s linear 0.350s;
}

.projects .projectitem:hover .hide{
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.hide h4{
    position: relative;
    z-index: 1;
    width: 40%;
    text-align: center;
}

.hide h4 span{
    color: #FFBEEC;
}


.hide img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.projects .projectitem .projectimage{
    overflow: hidden;
}

.projects .projectitem img{
    display: block;
    width: 100%;
    transition: transform 0.7s ease;/*para que la imagen se agrande suavemente al hacer hover*/
}

.projects .projectitem img:hover{
    transform: scale(1.05);/*para agrandar la imagen un 5% al hacer hover*/
    filter: blur(4px);
}

.projects a{
    color: #000000;
    text-decoration: none;
}



/*MAIN TRABAJOS*/
.container{
    display: grid;
    grid-template-columns: 380px 1fr; /*dos columnas, la primera de 400px y la segunda ocupa el resto del espacio disponible*/
    align-items: start; /* hace que el contenido se quede pegado arriba y no desaparecer*/
    gap: 0.5rem; /*espacio entre las dos columnas =8px*/
    padding: 0px 8px 8px 8px; /*lo verde en inspeccionar*/
}


/*SIDEBARRRRRRRRRRRR*/
.container .sidebar{
    position: sticky; /*para que se quede pegado arriba y no desaparecer*/
    top: 40px; /*para que se quede pegado al nav*/
    /*lo que viene a continuación es pa lo que tiene dentro*/
    display: flex;
    flex-direction: column; /*para que los elementos dentro de sidebar se alineen de arriba a abajo*/
    align-items: flex-start; /*para que los elementos dentro de sidebar se alineen de izquierda a derecha*/ 
    padding-left: 8px; 
}

.container .sidebar .description{
    display: flex;
    flex-direction: column;
    justify-content: space-between; /*para que los elementos dentro de sidebar se alineen de arriba a abajo*/
    padding-top: 20px;
    width: 90%;
    gap: 32px;
}
.datos-project{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.textoproject{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.container .sidebar .otherprojects .itemcito h3{
    line-height: 1;
}

.container .sidebar .otherprojects .itemcito .itemcito-text{
    width: 80%;
}

 .container .sidebar .otherprojects .itemcito.active{
    /*background-color: #cfcfcf;*/
    text-decoration: underline;
    text-decoration-thickness: 3px;
}

.container .sidebar .otherprojects .itemcito:hover{
    background-color: #e9e9e983;
} 


/*GRID DE FOTOOOOOOOOOOOS*/
.container .projectimagescontainer{ 
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 4px;
    width: auto;
    flex: 1 1 0; /*para que ocupe todo el espacio disponible*/
    min-width: 0; /*Without this, the flex item can still refuse to shrink inside a flex row, causing overflow or odd sizing.*/
}

.contenedorcajitas{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    gap: 4px;
    width: auto;
    flex: 1 1 0; /*para que ocupe todo el espacio disponible*/
    min-width: 0; /*Without this, the flex item can still refuse to shrink inside a flex row, causing overflow or odd sizing.*/
}

.contenedorcajitas .cajitas{
    background-color: #f8caf1;
    height: 30px;
    width: 100%;
}

.twoimages{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    overflow: hidden;
}

.twoimages img{
    width: 100%;
    display: block;
    /* border-radius: 8px; */
}

.twoimages video{
    width: 100%;
    display: block;
    /* border-radius: 8px; */
}

.oneimage{
    display: flex;
    flex-direction: column;
    width: 100%;
    /* border-radius: 8px; */
    overflow: hidden;
}

.oneimage img{
    width: 100%;
    display: block;
}

.twoimages48{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /*doce columnas de igual tamaño*/
    gap: 4px;
    /* border-radius: 8px; */
    overflow: hidden;
}

.twoimages48 img{
    width: 100%;
    display: block;
    /* border-radius: 8px; */
}

.twoimages48 img:first-child{
    grid-column: 1/ span 4; /*empieza en la columna (linea) 1 y ocupa 4columnas*/
}

.twoimages48 img:nth-child(2){
    grid-column: 5/ span 8; /*empieza en la columna (linea) 5 y ocupa 8 columnas*/
}

.twoimages84{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /*doce columnas de igual tamaño*/
    gap: 4px;
    /* border-radius: 8px; */
    overflow: hidden;
}

.twoimages84 img{
    width: 100%;
    display: block;
    /* border-radius: 8px; */
}

.twoimages84 img:first-child{
    grid-column: 1/ span 8; /*empieza en la columna (linea) 1 y ocupa 4columnas*/
}

.twoimages84 img:nth-child(2){
    grid-column: 9/ span 4; /*empieza en la columna (linea) 5 y ocupa 8 columnas*/
}


/*RESPONSIVE DESIGN*/
@media (max-width: 768px){
    

    /*PROYECTOS TABLET*/
    .projects{
        display: grid;
        grid-template-columns: 1fr 1fr; /*2 columnas que va hacía abajo*/
        grid-row-gap: 4px;
    }

    h4{ /*HIDE TXT*/
    font-size: 18px;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding: 0px;
    margin: 0px;
}

    /*DETALLES PROYECTOS TABLET*/
    .container{
        display: grid;
        grid-template-columns:1fr; /*1columna*/
        align-items: start; /* hace que el contenido se quede pegado arriba y no desaparecer*/
        gap: 0.5rem; /*espacio entre las dos columnas =8px*/
        padding: 0px 8px 8px 8px; /*lo verde en inspeccionar*/
    }

    .container .sidebar{
    position: static; /*la posicion default*/
    top: 40px; /*para que se quede pegado al nav*/
    /*lo que viene a continuación es pa lo que tiene dentro*/
    display: flex;
    flex-direction: column; /*para que los elementos dentro de sidebar se alineen de arriba a abajo*/
    align-items: flex-start; /*para que los elementos dentro de sidebar se alineen de izquierda a derecha*/ 
    gap: 40px;
    padding-left: 8px; 
    }

    /*ABOUT TABLET*/
    .contents .block{
    display: flex;
    flex-direction: column;
    width: 300px;
    height: fit-content;
    gap: 24px;
    }

    .contents .firstcolumn{
        min-height: 0;
    }

    .contents .thirdcolumn{
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        gap: 16px;
    }

    
}


@media (max-width: 480px){
    
    /*PROYECTOS MOBILE*/
    .projects{
        display: grid;
        grid-template-columns: 1fr; /*una columna que va hacía abajo*/
        grid-row-gap: 4px;
    }
    
    /*DETALLES PROYECTOS MOBILE*/
    .container{
        display: grid;
        grid-template-columns: 1fr; /*1 Columna*/
        align-items: start; /* hace que el contenido se quede pegado arriba y no desaparecer*/
        gap: 0.5rem; /*espacio entre las dos columnas =8px*/
        padding: 0px 8px 8px 8px; /*lo verde en inspeccionar*/
    }

    .container .sidebar{
    position: static; /*la posicion default*/
    top: 40px; /*para que se quede pegado al nav*/
    /*lo que viene a continuación es pa lo que tiene dentro*/
    display: flex;
    flex-direction: column; /*para que los elementos dentro de sidebar se alineen de arriba a abajo*/
    align-items: flex-start; /*para que los elementos dentro de sidebar se alineen de izquierda a derecha*/ 
    gap: 40px;
    padding-left: 8px; 
    }


    /*ABOUT MOBILE*/
    .contents{
        padding: 16px 24px 0px 16px;
    }

    .contents .block{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    gap: 24px;
    }

    .contents button{
        font-size: 14px;
        padding: 12px 16px;
    }/* mas alto y letra mas peuqe */
}