*{   
    padding: 0;
    margin: 0;
    box-sizing: border-box;}

html {
  scroll-behavior: smooth;
}
:root{
    --blue: #0071ff;
    --yellow: #ffed00;
}


/* Barra de scroll */
body::-webkit-scrollbar {
  width: 17px;               /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
  background-color: black ;        /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
  background-color: white;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 4px solid rgb(0, 0, 0);  /* creates padding around scroll thumb */
}
.kursor--2 {
  mix-blend-mode: exclusion;
}


body{
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  
  background-color: black;
  
}
main{
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 50px;
}


.logo{
  max-height: auto;
  max-width: 200px;
  padding: 10px 15px 20px 15px;
  border: solid 1.5px var(--yellow);
  flex: 1;
  border-radius: 20px;
}
.logo:hover{
  cursor: pointer;
}
.nav{
  display: flex;
  justify-content: center;
  padding: 30px 0px 100px 0px;

  background-image: url(images/home/home\ work\ 3-06.png);
  background-size: contain;        
  background-repeat: no-repeat;  
  background-position: center;  
  
}
.trabajo{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 50px;
}
.texto-trabajo{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  align-items: flex-start;
  gap: 25px;
  justify-content: space-between;
  
}
.texto-trabajo-2{
  /* padding-top: 15px;
  border-top: 1px solid gray; */
  padding-bottom: 100px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 25px;
}
.texto-trabajo-3{
  padding-bottom: 100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  gap: 25px;
}


.name{
  display: flex;
  flex: 1;
  grid-column: span 2;
  text-align: left;
  gap: 25px;
  padding-right: 50px;
}
.area{
  flex: 1;
  text-align: left;
}
.year{
  flex: 1;
  text-align: right;
}
.descripcion{
  flex: 1;
  text-align: left;
}
.descripcion-hidden{
  flex: 1;
  text-align: left;
}


.portada{
  border-radius: 15px;
  width: auto;
  flex: 1;
}
.portada-hidden{
  border-radius: 15px;
  width: auto;
  flex: 1;
}
.galeria-4{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px; /* el espacio entre imágenes */
  width: 100%;
  overflow: hidden;

}
.galeria-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px; /* el espacio entre imágenes */
  width: 100%;
  overflow: hidden;

}
.galeria-2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px; /* el espacio entre imágenes */
  width: 100%;
  overflow: hidden;

}
.galeria-1{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
}
.galeria-4 img {
  width: 100%;
  height: auto;  /* Mantiene proporción real de la imagen */
  object-fit: cover; /* por si alguna es más grande, evita deformación */
  display: block;
  border-radius: 15px;
}
.galeria-3 img {
  width: 100%;
  height: auto;  /* Mantiene proporción real de la imagen */
  object-fit: cover; /* por si alguna es más grande, evita deformación */
  display: block;
  border-radius: 15px;
}
.galeria-2 img {
  width: 100%;
  height: auto;  /* Mantiene proporción real de la imagen */
  object-fit: cover; /* por si alguna es más grande, evita deformación */
  display: block;
  border-radius: 15px;
}
.galeria-1 video {
  width: 100%;
  height: 90vh;  /* Mantiene proporción real de la imagen */
  border-radius: 15px;
  object-fit: contain;
}
.galeria-3 video {
  max-width: 100%;
  height: 100%;  /* Mantiene proporción real de la imagen */
  border-radius: 15px;
  object-fit: contain;
}


.title-bar{

  display: flex;
  justify-content: space-between;
  width: auto;
  border: 1px solid white;
  border-radius: 1px;
  
}
.contacto{
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 50px;
    gap: 100px;
    
}
.footerbar{
  display: flex;
  flex-direction: column;
 gap: 50px; 
}
.enlaces-contacto{
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
}
.mail{
  grid-column: span 2;
}


h1{
    font-family: "Zalando Sans Expanded", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
    color: white;
    font-size: 16pt;
 }
h1:hover{
    cursor: pointer;
 }
h2{
    font-family: "Zalando Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 14pt;
    color: var(--blue);
}
h3{
    font-family: "Zalando Sans Expanded", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: white;
    font-size: 34pt; 
}
h4{
    font-family: "Zalando Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 18pt;
    color: var(--yellow);
}
h5{
    font-family: "Zalando Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:grey;
    font-size: 16pt; 
}
h6{
    font-family: "Zalando Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color:grey;
    font-size: 18pt; 
}
p{
    font-family: "Zalando Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: white;
    font-size: 18pt; 
    
}
a {
  text-decoration: none;
}

.contacto h2{

    font-family: "Zalando Sans Expanded", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 44pt;
    color: white;
 }
.contacto h4{
    color: white;
    font-size: 16pt;
}
.contacto h4:hover{
    cursor: pointer;
}
.contacto h5{
  font-family: "Zalando Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: white;
  font-size: 16pt;
}
.contacto h6{
    font-family: "Zalando Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 12pt;
    color: var(--yellow);
    align-self: center;
}

@media screen and (max-width: 1440px) {
h1{
    font-size: 16pt;
 }
h2{
    font-size: 14pt;
}
h3{
    font-size: 28pt; 
}
h4{
    font-size: 14pt;
}
h5{
    font-size: 12pt; 
}
h6{
    font-size: 14pt; 
}
p{
    font-size: 14pt; 
}
.contacto h2{
    font-size: 36pt;

 }

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

.texto-trabajo{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
}
.texto-trabajo-3{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
}
.galeria-4{
  display: flex;
  flex-direction: column;
  gap: 25px; /* el espacio entre imágenes */
  width: 100%;
  overflow: hidden;

}
.portada-hidden{
  display: none;
}  
}
@media screen and (max-width: 880px){

.texto-trabajo-2{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 25px;
}
.nav{
  background-position: top;  

}
.galeria-3{
  display: flex;
  flex-direction: column;


}
.galeria-2{
  display: flex;
  flex-direction: column;

}
.enlaces-contacto{
  padding-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
}
@media screen and (max-width: 600px) {
main{
  display: flex;
  flex-direction: column;
  gap: 35px;
  padding: 35px;
}

}