@charset "utf-8";

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Bold.eot');
    src: url('../fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gotham-Bold.woff2') format('woff2'),
        url('../fonts/Gotham-Bold.woff') format('woff'),
        url('../fonts/Gotham-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Book';
    src: url('../fonts/Gotham-Book.eot');
    src: url('../fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gotham-Book.woff2') format('woff2'),
        url('../fonts/Gotham-Book.woff') format('woff'),;
     
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Black.eot');
    src: url('../fonts/Gotham-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gotham-Black.woff2') format('woff2'),
        url('../fonts/Gotham-Black.woff') format('woff'),;
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham Ultra';
    src: url('../fonts/Gotham-Ultra.eot');
    src: url('../fonts/Gotham-Ultra.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gotham-Ultra.woff2') format('woff2'),
        url('../fonts/Gotham-Ultra.woff') format('woff'),;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-MediumItalic.eot');
    src: url('../fonts/Gotham-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gotham-MediumItalic.woff2') format('woff2'),
        url('../fonts/Gotham-MediumItalic.woff') format('woff'),;
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Gotham Ultra';
    src: url('../fonts/Gotham-UltraItalic.eot');
    src: url('../fonts/Gotham-UltraItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gotham-UltraItalic.woff2') format('woff2'),
        url('../fonts/Gotham-UltraItalic.woff') format('woff'),;
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family:'Gotham Italic' ;
    src: url(../fonts/Gotham-BookItalic_.otf);
}

a  { 
    font-family: 'Gotham';
    text-decoration:none;
    text-align: center;
    color:#f0f0f0;
    transition: 0.3s;
}

a:hover{
  color:#F39200;
  opacity: 1;
}


body {
    background-color: rgba(20, 20, 20);
    width:100vw;
    height:100vh;
    overflow-x: hidden;
    overflow-y: auto;
    margin:0;

}

 h1{
    font-size: 3.3em;
    font-family: 'Gotham';
    color: #f2f2f2;
    margin:0;

  }

  h2{
    font-size: 2em;
    font-family: 'Gotham';
    color: #f2f2f2;
         margin:0;

  }

  h3{
      font-family: 'Gotham';
    font-size: 1.8em;
    color: #f2f2f2;
    margin:0;
  }

  h4{
    font-family: 'Gotham';
    font-size: 1.6em;
    color: #f2f2f2;
         margin:0;

  }

  h5{
    font-size: 1em;
        font-family: 'Gotham';
         margin:0;
    color: #f2f2f2;
  }

  h6{
    font-family: 'gotham';
    font-size: 1em;
    color: #F39200;
    margin:0;
  }

  a {
    font-size: 1em;
    color: #f2f2f2;
    
  }

  p {
    font-size: 0.8em;
    font-family: 'Gotham Book';
     color: #f2f2f2;
     margin:0;
     text-wrap: pretty;

  }

#barra-superior{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  width:96vw;
  height:7vh;
  padding: 0 2vw 0 2vw;
  background-color: rgba(20, 20, 20, 0.8);
  z-index: 1;
  position:fixed;
  left:0;
  top:0;
}

#header-logo{
  display:flex;
  flex-direction: column;
  justify-content: center;
  width:42vw;
  height:5vh;
  align-self: flex-start;
  margin: 0.5vh 0vw 0.5vh 0;

}

#header-logo h4{
  text-align: left;
} 

#barra-superior-desktop{
  display:none;
}

.presentation-desktop{
  display:none;
}


#proyectos-main-desktop{
  display:none;
}

/* - - - - HAMBURGER MENU - - - - */
/* - - - - HAMBURGER MENU - - - - */
/* - - - - HAMBURGER MENU - - - - */
/* - - - - HAMBURGER MENU - - - - */

#hamburger-menu{
  width: 10vw;
  height:4vh;
  
}
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ .menu__box {
left: 0 !important;
}

.menu__btn {
position: fixed;
top: 3vh;
left: 90vw;
width: 7vw;
height: 26px;
z-index: 2;
cursor: pointer;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #f0f0f0;
transition-duration: .25s;
}
.menu__btn > span::before {
content: '';
top: -8px;
}
.menu__btn > span::after {
content: '';
top: 8px;
}
.menu__box {
display: block;
position: fixed;
top: 0;
left: 100vw;
width: 100vw;
height: 100vh;
margin: -5vh 0 0 0;
padding: 15vh 0 0 0;
list-style: none;
background-color:rgba(20, 20, 20, 0.8);
transition-duration: .25s;
z-index:1;
}
.menu__item {
display: block;
width:60vw;
padding: 8vh 20vw 1vh 20vw;
color: #f0f0f0;
font-family: 'Gotham';
font-size: 1.6em;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}

.menu__item:hover {
text-decoration:underline
}

.menu_idioma{
display: block;
width:60vw;
padding: 5vh 20vw 0 20vw;
color: #f0f0f0;
font-family: 'Gotham Book';
font-size: 1.2em;
text-decoration: none;
transition-duration: .25s;
}

.menu_idioma:hover {
  text-decoration:underline
}

#footer-social {
  width:96vw;
  height:5vh;
  display:flex;
  flex-direction:row;
  padding: 0 0 0 32vw;
  margin-top:5vh;
}
  

.footer-col{
  width:10vw;
  padding: 0 0 0 0;
  margin:0 1vw 0 1vw;
}

.footer-col img{
  min-width:100%;
}


/* - - - - FIN DEL HAMBURGER MENU - - - - */
/* - - - - FIN DEL HAMBURGER MENU - - - - */
/* - - - - FIN DEL HAMBURGER MENU - - - - */
/* - - - - FIN DEL HAMBURGER MENU - - - - */





/* - - -  - - - - - - - - - - - - - - - - HOME MÓVIL -- - - - - - - - - - - - -  - - - */
/* - - -  - - - - - - - - - - - - - - - - HOME MÓVIL -- - - - - - - - - - - -  - - - */
/* - - -  - - - - - - - - - - - - - - - - HOME MÓVIL -- - - - - - - - - - - -  - - - */
/* - - -  - - - - - - - - - - - - - - - - HOME MÓVIL -- - - - - - - - - - - -  - - - */

.desktop{
  display:none;
}

#presentation{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  width:100vw;
  margin: 7vh 0 0vh 0;

}

#presentation-logo{
  width:90vw;
  margin: 1vh 5vw 1vh 5vw;
  padding: 0 0 0 0;

}

#presentation-logo img{
 max-width:100%;
}

#presentation-title{
  width:90vw;
  height: auto;
  margin: 0 5vw 0vh 5vw;
  padding: 0 0 0 0;

}

#presentation-title h1{
  font-family:'Gotham';
  color:#f0f0f0;
   font-weight:bold;
  font-style: normal;
  font-size:2em;
  padding:0;
  text-align:left;
}

#presentation-description{
  width:90vw;
  margin: 0 5vw 0 5vw;
  padding: 0 0 0 0;

}

#presentation-description p{
  font-family:'Gotham';
  color:#f0f0f0;
  font-weight:bold;
  font-style: normal;
  font-size:2em;
  text-align:left;
  margin: 0 0 1vh 0;
}

#presentation-work{
margin-top:5vh;
}

.presentation-links{
  width:85vw;
  margin: 1vh 0vw 2vh 0vw;
  padding: 0 0vw 0 0vw;

}

.presentation-links a{
  
    display: flex; /* Allows centering */
    align-items: left; /* Centers vertically */
    justify-content: left; /* Centers horizontally */
    text-align: left; /* Ensures text alignment */
    width: 100%; /* Ensures full width if needed */
    height: 100%; /* Ensures full height if needed */
    font-size:2.5em;
 
 

}


#contact-form {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  margin-top: 3vh;
  width:88vw;
}

#contact-form label{
  display: flex;
  flex-direction: column;
  font-family: 'Gotham Book';
  color: #f2f2f2;
  font-size: 1em;
}

.contact-form-input {
  padding: 0.8vh 1vw;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  font-size: 1em;
  font-family: 'Gotham Book';
  color: #f2f2f2;
  background-color: rgba(20, 20, 20, 0.8);
}


/* - - -  - - - - - - - - - - - - - - - -  FIN DE HOME MÓVIL -- - - - - - - - - - - -  - - - */
/* - - -  - - - - - - - - - - - - - - - -  FIN DE HOME MÓVIL -- - - - - - - - - - - -  - - - */
/* - - -  - - - - - - - - - - - - - - - -  FIN DE HOME MÓVIL -- - - - - - - - - - - -  - - - */
/* - - -  - - - - - - - - - - - - - - - -  FIN DE HOME MÓVIL -- - - - - - - - - - - -  - - - */




#contenido-movil{
  width:90vw;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:center;
  gap:2vh;
  margin:0vh 0 0vh 0;
  padding: 8vh 5vw 0 5vw;
  overflow-x: hidden;
  overflow-y: auto;
}




#main-photo-movil{
  width: 88vw;
  margin: 0 2vw 0 2vw;
}

#main-photo-movil img{
  max-width: 100%;
}

#intro-text-movil{
  width: 88vw;
  margin: 0 2vw 0vh 2vw;
}

.proyecto-text-movil{
  width: 88vw;
  margin: 0 2vw 0 2vw;
}

.subtitulo-movil{
  width:88vw;
  margin: 0vh 0 0 0;
}


.h5-about-movil{
  width:90vw;
  margin: 1vh 0 1vh 0;
}

.p-about-movil{
  width:90vw;
}

.proyecto-movil{
  width:88vw;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  margin: 0 0 0 0;
  padding: 0 1vw 0 1vw;
}

.proyecto-movil img{
  max-width: fit-content;
}

.experience-movil{
  display:flex;
  flex-direction:column;
  flex-wrap: nowrap;
  width:90vw;
  margin:0 0 5vh 0;
 
}

.img-content-movil-about{
  width:90vw;
}

.img-content-movil-about img{
  object-fit: cover;
  width: 90vw; 
}


#education-movil{
  margin-top: 3vh; 
  margin-bottom:3vh;
  width:88vw;
}

#education-movil h6{
  font-size: 1.5em;
  font-family: 'Gotham';
  color:#F39200;
}

.education-movil-module{
  width:82vw;
  margin: 3vh 0 0 0;
  padding: 0 2vw 0 2vw;
}

.education-movil-module p{
color:#f2f2f2
}

#back-to-top-movil{
  width:88vw;
}

#back-to-home-movil{
  width:88vw;
  margin: 3vh 1vw 10vh 1vw;
}

#back-to-top-movil a {
  display: flex;
  justify-content: center;
  align-items: center;
 font-size: 1.6em;
  text-align: center;
}

#back-to-home-movil a {
  display: flex;
  justify-content: center;
  align-items: center;
 font-size: 1.6em;
  text-align: center;
}


#subtitulo-contact{
  width:96vw;
  margin: 0 2vw 0 2vw ;
}

#mailto-contact-movil{
  width:44vw;
  margin: 3vh 0 0 0;
  padding: 0 28vw 0 28vw;
}

#mailto-contact-movil a {
  text-align: center;
}

.img-content-movil{
  width:79vw;
}

.img-content-movil img{
  object-fit: cover;
  width:88vw;
  height:40vh;
}

.img-proyecto-movil{
  width:88vw;
}

.img-proyecto-movil img{
  object-fit: cover;
  
  width:88vw;
}

.credits-img-movil{
  width:88vw;
}

#presentation-nav{
    display:flex;
    flex-direction:column;
    gap:2vh;
    width:fit-content;
    height:fit-content;
    padding: 1vh 1vw 1vh 1vw;

    justify-content:flex-start;
}

#presentation-nav a {
  background: #F39200;
  color: white;
  padding: 0.5em 1.5em;       /* pill shape */
  border-radius: 999px;       /* fully rounded */
  
  text-decoration: none;
  text-transform: lowercase;  /* matches your screenshot */
  letter-spacing: 0.5px;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;

 
}

 li {
    font-family: 'gotham Book';
    font-size: 1em;
    color: #f2f2f2;
    margin:0.5vh 0 0.5vh 0;
  }

  ul li::marker {
  color: #F39200; /* tu color */
}


/* - - -  - - - - - - - - - - - - - - - -  SCROLL ANIMADO FOTOS MOVIL -- - - - - - - - - - - -  - - - */
/* - - -  - - - - - - - - - - - - - - - -  SCROLL ANIMADO FOTOS MOVIL -- - - - - - - - - - - -  - - - */
/* - - -  - - - - - - - - - - - - - - - -  SCROLL ANIMADO FOTOS MOVIL -- - - - - - - - - - - -  - - - */

.inline-photo {
  
  opacity: 0;
  transform: translateX(1em);
  transition: transform 4s .20s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;

  will-change: transform, opacity;
}

.inline-photo.is-visible {
  opacity: 1;
  transform: translateX(-1vw);
}


.inline-photo-vert {
  opacity: 0;
  transform: translateX(2em);
  transition: transform 2s .20s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;

  
  will-change: transform, opacity;
}

.inline-photo-vert.is-visible {
  opacity: 1;
  transform: translateX(-1vh);
}

/* - - -  - - - - - - - - - - - - - - - - FIN DE SCROLL ANIMADO FOTOS MOVIL -- - - - - - - - - -  - - - */
/* - - -  - - - - - - - - - - - - - - - - FIN DE SCROLL ANIMADO FOTOS MOVIL -- - - - - - - - - -  - - - */
/* - - -  - - - - - - - - - - - - - - - - FIN DE SCROLL ANIMADO FOTOS MOVIL -- - - - - -- - - -  - - - */



@media only screen and (min-width: 320px){

  #presentation-title h1{
      font-size:3em;
  }

  

  .menu__item{
      font-size:1.4em;
      padding: 0vh 0vw 0vh 0vw;
      margin:4vh 20vw 4vh 20vw;

  }

  .menu_idioma{
      font-size:0.9em;
      font-family:'Gotham Book';
      padding: 0vh 0vw 0 0vw;
      margin: 5vh 20vw 0 20vw;

  }

  .img-content-movil{
  width:73vw;
  height:30vh;
  
}

.img-content-movil img{
  object-fit: cover;
  height:30vh;


}
}



@media only screen and (min-width: 400px){

  #header-logo{
    width:42vw;
   
    padding: 0.5vh 0 0 0; 
  }

  #header-logo h4{
    font-size:1.1em;
  }
}

@media only screen and (min-width:420px){
  #contenido-movil h6{
    font-size:1.1em;
  }
  .education-movil p{
    font-size:1em;
  }
}

@media only screen and (min-width: 480px){

  .proyecto-movil{
    height:50vh;
  }
  

  #presentation-description{
      margin-top:0vh;
  }



  .img-content-movil{
  width:73vw;
  height:40vh;
  
}

.img-content-movil img{
  object-fit: cover;
  height:40vh;
}

  #footer-social{
      margin-top:12vh;
  }

#back-to-top-movil{
  width:28vw;
  padding: 0 30vw 0 30vw; 
  margin: 3vh 0 5vh 0;
}

}

@media only screen and (min-width: 540px){

  .menu__btn{
    width:5vw;
  }
  .proyecto-movil{
    height:55vh;
  }
  
  #presentation-title{
      margin-top:3vh;
  }

  #contenido-movil h1{
      font-size:3.5em;
  }

  
  #footer-social{
      padding: 0 0 0 35vw;
  }

  .footer-col{
      width:8vw;
  }

  .experience-movil{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom:5vh;
    height:53vh;
    width:88vw; 
  }

  .img-content-movil-about{
    width:73vw;

  }
  
  .img-content-movil-about img{
    object-fit: cover; 
  
  }

#back-to-top-movil{
  width:28vw;
  padding: 0 31vw 0 31vw; 
  margin: 3vh 0 5vh 0;
}

#back-to-top-movil a{
  font-size:1.2em;
}
}



@media only screen and (min-width: 600px){
 
  #presentation-title{
      margin-top:5vh;
  }
  
  .menu__item{
      font-size:1.9em;
      padding: 5vh 20vw 1vh 20vw;
  }

  .menu_idioma{
      font-size:1.2em;
      font-family:'Gotham Book';
      padding: 6vh 20vw 0 20vw;
  }

  .img-content-movil{
  width:73vw;
}


.img-content-movil img{
  object-fit: cover;
  height:50vh;
}

#back-to-top-movil a{
  font-size:1.4em;
}
}


@media only screen and (min-width: 630px){
  .experience-movil{
    height:60vh;
  }
}


@media only screen and (min-width: 720px){

  .menu__btn{
    width:4vw;
  }
 
  #presentation-title h1{
      font-size:4.6em;
  }

  #presentation-description {
      margin-bottom:3vh;
  }

  #presentation-description p{
      font-size:2.2em;
  }

        
  .presentation-links h3{
      font-size: 2em;
  }


#footer-social{
  padding: 0 0 0 33vw;
}

.footer-col{
  width:9vw;
}

#back-to-top-movil{
  width:28vw;
  padding: 0 31vw 0 31vw; 
  margin: 5vh 0 5vh 0;
}


}

@media only screen and (min-width: 730px){
  .experience-movil{
    height:70vh;
  }
}








#contact-button{
  background: #F39200;
  color: white;
  padding: 0.5em 1.5em;       /* pill shape */
  border-radius: 999px;       /* fully rounded */
  text-decoration: none;
  font-family:'Gotham' ;
}




/* - - - - - - - - - - - - - - - - - - - - - - SCROLL HORIZONTAL - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - SCROLL HORIZONTAL - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - SCROLL HORIZONTAL - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - SCROLL HORIZONTAL - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - SCROLL HORIZONTAL - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - SCROLL HORIZONTAL - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - SCROLL HORIZONTAL - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - SCROLL HORIZONTAL - - - - - - - - - - - - - - - */




/* - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - */
/* - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - */
/* - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - */
/* - - - - -  - - - - - - - - - - - - - - - - TABLET - - - - - - - - - - - - - - - - -  - - - - - - */
/* - - - - -  - - - - - - - - - - - - - - - - TABLET - - - - - - - - - - - - - - - -  - - - - - - */
/* - - - - -  - - - - - - - - - - - - - - - - TABLET - - - - - - - - - - - - - - - -  - - - - - - */
/* - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - */
/* - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - */

@media only screen and (min-width: 768px){

  h1{
    font-size: 3.3em;
    font-family: 'Gotham';
    color: #f2f2f2;
         margin:0;

  }

  h2{
    font-size: 2em;
    font-family: 'Gotham';
    color: #f2f2f2;
         margin:0;

  }

  h3{
    font-family: 'Gotham';
    font-size: 1.8em;
    color: #f2f2f2;
    margin:0;
  }

  h4{
    font-family: 'Gotham';
    font-size: 1.6em;
    color: #f2f2f2;
         margin:0;

  }

  h5{
    font-size: 1em;
        font-family: 'Gotham';
         margin:0;
    color: #f2f2f2;
  }

  h6{
    font-family: 'gotham';
    font-size: 1em;
    color: #F39200;
    margin:0;
  }

  a {
    font-size: 1em;
    color: #f2f2f2;
    
  }

  p {
    font-size: 0.8em;
    font-family: 'Gotham Book';
     color: #f2f2f2;
     margin:0;
     text-wrap: pretty;

  }

  li {
    font-family: 'gotham Book';
    font-size: 1em;
    color: #f2f2f2;
    margin:0.5vh 0 0.5vh 0;
  }

  ul li::marker {
  color: #F39200; /* tu color */
  }

  .nav-active a {
  border-bottom: 2px solid #F39200;
  padding-bottom: 2px;
  display: inline-block;
  }


  body{
    overflow: hidden;
  }

  #barra-superior{
      display:none;
  }
  #contenido-movil{
      display:none;
  }

  #presentation{
      display:none;
  }

  #back-to-top-movil{
    display:none;
  }

  .presentation-links{
    display:none;
  }

  .desktop{
      display:flex;
      flex-direction:row;
      flex-wrap: wrap;
      width:100vw;
      height: 100vh;   
  }


  #barra-superior-desktop{
    position:fixed;
    top:0;
    left:0;
    display:flex;
    flex-direction:row;
    gap:5vw;
    width:98vw;
    height:5vh;
    padding: 1vh 1vw 1vh 1vw;
    z-index:2;
    justify-content: space-evenly;
    background-color: rgba(20, 20, 20, 0.8);
    
  }

  .barra-superior-desktop-elements{
    display:flex;
    box-sizing: border-box;
    align-items: center;
  }

  #logo-home-desktop{
   display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  margin: 0;
  }


  #links-nav-desktop{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;  /* <- horizontal alignment of its flex children */
    gap: 2rem;                /* space between "Projects / About / Contact" */
    padding: 0;
    margin: 0;
  }

  #social-desktop {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;   /* space between icons and dropdown */
  padding: 0;
  margin: 0;
  /* no flex:1, no width: fit-content */
  }

.social-icon-desktop {
  display: flex;
  align-items: center;
  /* remove flex:1, it was forcing them to stretch */
  /* flex: 1; */
}

.menu_social-footer {
  display: flex;
  align-items: center;
}

  
  #social-desktop img {
  width: 4vw;      /* or 32px, whatever you like */
  height: 4vh;
  object-fit: contain;   /* or cover, but not required here */
  display: block;

}
  

/*DROPDOWN DESKTOP NAV*/

/* Container: sits as one more item in #social-desktop flex row */
.dropdown {
  position: relative;
  display: flex;        /* so the button aligns nicely in the navbar */
  align-items: center;
}

/* The visible button in the navbar */
.dropbtn {
  color: white;
  background-color: rgba(20, 20, 20, 0.8);
  padding: 0.6em 1.2em;           /* em so it scales with font-size */
  font-size: 1em;
  font-family: 'Gotham';
  border: none;
  cursor: pointer;
  white-space: nowrap;            /* prevents it from wrapping */
}

/* The dropdown panel (hidden by default) */
.dropdown-content {
  position: absolute;
  top: 100%;          /* directly under the button */
  right: 0;           /* align right edge with button (good for nav) */
  display: none;
  background-color: rgba(20, 20, 20, 0.8);
  z-index: 10;
  min-width: 10rem;   /* or 8rem/12rem depending on your labels */
  /* remove the translateX hack */
  /* transform: translateX(-8.2vw); */
}

/* Links inside */
.dropdown-content a {
  padding: 0.75em 1em;
  text-decoration: none;
  display: block;
}

/* Hover states */
.dropdown-content a:hover {
  background-color: #F39200;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #F39200;
}


/* FIN DEL DROPDOWN DESKTOP NAV*/

.contenido-desktop{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 88vw;
  height: 93vh;
  margin: 7vh 6vw 0 6vw;
  overflow: hidden;
}

.presentation-desktop{
  display:flex;
  flex-direction: column;
  overflow: hidden;
  gap:3vh;
  width: 44vw;
  height:91vh;
  margin: 1vh 0vw 1vh 0vw;
}

#marco-presentation-desktop{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  width:42vw;
  height:65vh;
  margin: 1vh 1vw 1vh 1vw;
}

#img-presentation-desktop{
  width:40vw;
  height:63vh;
  margin: 1vh 1vw 1vh 1vw;
  padding: 0 0 0 0;
  z-index:0;
}

#img-presentation-desktop img{
  height:100%;
  width:100%;
  object-fit:cover;
}

#main-text-presentation-desktop{
 max-width:42vw;
  height:auto;
  margin: 1vh 1vw 1vh 1vw;
  padding: 0 0 0 0;
  position:absolute;
  z-index: 1;
  top: 30vh;
  left:4vw;
}

#presentation-nav{
    display:flex;
    flex-direction:column;
    gap:2vh;
    width:fit-content;
    height:fit-content;
    padding: 1vh 1vw 1vh 1vw;
    justify-content:space-around;
    justify-self: flex-start;
}

#presentation-nav a {
  background: #F39200;
  color: white;
  padding: 0.5em 1.5em;       /* pill shape */
  border-radius: 999px;       /* fully rounded */
  
  text-decoration: none;
  text-transform: lowercase;  /* matches your screenshot */
  letter-spacing: 0.5px;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: background 0.2s ease, transform 0.2s ease;
}

#see-my-work-desktop{
  display: flex; /* Allows centering */
  align-items: center; /* Centers vertically */
  justify-content: center; /* Centers horizontally */
  text-align: center; /* Ensures text alignment */
  width: 44vw;
  height:6vh; 
  margin: 1vh 1vw 1vh 1vw;
  padding: 2vh 27.5vw 0 27.5vw;
}

#see-my-work-desktop h1{
  
  width: 100%; /* Ensures full width if needed */
  height: 100%; /* Ensures full height if needed */
  font-family:'Gotham';
  font-size: 2em;
  color: #f0f0f0;
  margin: 0 0 1vh 0;
  line-height:1em;
}

#proyectos-main-desktop{
  display:flex;
  flex-direction: column;
  justify-content: flex-start;
  gap:3vh;
  width:44vw;
  height: 88vh;
  overflow-y: scroll;
  margin: 3vh 0vw 2vh 0vw;
  padding: 0 0vw 0 0vw;
}

#wrapper{
 display:flex; 
 flex-direction: row;
  flex-wrap: wrap;
  gap:1vw;
}

.about-experience{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap:3vh;
  width:44vw;
  overflow-y: scroll;
  margin: 3vh 0vw 1vh 0vw;
  padding: 0 0vw 0 0vw;
}

.proyecto-card-desktop {
  display: flex;
  flex-direction: column;
  width: fit-content;
  height: fit-content;
  gap: 0.6rem;
}

.experience-about-desktop {
  display: flex;
  flex-direction: column;
  width: 11vw;
  height: fit-content;
  gap: 0.4rem;
}

.experience-about-desktop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.proyecto-home-desktop{
  width:fit-content;

}


.proyecto-home-desktop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-card-title-desktop{
  display: flex;
  flex-direction: column;
  width:fit-content;
  height: fit-content;
  gap:0.2vh;
  text-align:left;
}

#contact-form {
  width:36vw;
}


/* - - - - - - - - - -- - - - -  - - - PAGINAS PROYECTTOS +  ABOUT + CONTACT - - - - - - - - - - - - - */
/* - - - - - - - - - -- - - - -  - - - PAGINAS PROYECTTOS +  ABOUT + CONTACT - - - - - - - - - - - - - */
/* - - - - - - - - - -- - - - -  - - - PAGINAS PROYECTTOS +  ABOUT + CONTACT - - - - - - - - - - - - - */
/* - - - - - - - - - -- - - - -  - - - PAGINAS PROYECTTOS +  ABOUT + CONTACT - - - - - - - - - - - - - */
/* - - - - - - - - - -- - - - -  - - - PAGINAS PROYECTTOS +  ABOUT + CONTACT - - - - - - - - - - - - - */

.desktop{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  width: 84vw;
  margin:0 8vw 0 8vw;

}

.module-row-desktop{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  width:82vw;
  height:auto;
  margin:10vh 1vw 0vh 1vw;
  padding:0 0vw 0 0vw;
}

.module-col-desktop{

  display:flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width:39vw;
  height:auto;
  margin:0vh 1vw 0vh 1vw;
  padding:0 0vw 0 0vw;
}

.page-title-desktop{
  width:36vw;
  margin: 0 0 0vh 0;
  padding: 0 0vw 0 0vw;
}


.col-izq-desktop{
  display:flex;
  flex-direction: column;
  flex-wrap:nowrap;
  gap: 1vh;
  width:36vw;
  height:96vh;
  padding: 0 2vw 0 2vw;
  margin:10vh 1vw 0 1vw;
}



.main-photo-desktop{
 
  width:100%;
 

}

.main-photo-desktop img{
  object-fit:cover;
  width: 100%;
}






.subtitulo-desktop{
  width:fit-content;
  margin: 0vh 0 0vh 0;
}

#first-subtitle-desktop{
  margin-top:0vh;
}

.proyecto-desktop{
  width:46vw;
  margin:0 0 3vh 0;
}

.img-content-desktop{
  width:39vw;
  margin-bottom:1vh;
}

.img-content-desktop img{
  width:100%;
}

.education-desktop-module{
  width:36vw;
  margin: 0 0 3vh 0;
}

.img-content-desktop-project-ux{
  width:15vw;
  height: auto;
}

.img-content-desktop-project-ux img{
  width:100%;
  
} 




.experience-desktop img{
  max-width:100%;
}

#mailto-contact-desktop{
  margin:0;
  width:46vw;
}


.prev, .next {
  position:relative;
  top:-22vh;
  left:0vw;
  cursor: pointer;
  width: auto;
  margin-top: 5vh;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.next{
  left:35.5vw;
}


#back-button-desktop{
  width:36vw;
  margin: 2vh 0 0vh 0;
}

#back-button-desktop a{
  font-size: calc(1vh + 1vw); margin-top: 2vh;
}

.col-der-desktop{
  display:flex;
  flex-direction: column;
  flex-wrap:nowrap;
  gap:5vh;
  
  width:36vw;
  padding: 9vh 2vw 10vh 2vw;
  overflow-y:scroll;
  overflow-x: hidden;
  height: 88vh;
  margin-top:0vh;
}

.proyectos-home-desktop{
  width:35vw;
  margin: 0.5vh 0 0.5vh 0;
}

.proyectos-home-desktop img{
  height:100%;
  width:100%;
  object-fit:cover;
}




.col-der-desktop-module-1{

  display:flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width:fit-content;
  height: fit-content;
  gap:3vh;
}
.col-der-desktop-module-2{
   display:flex;
  flex-direction: row;
  width:fit-content;
  height: fit-content;
  gap:1vw;
}
}



/* - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - */
/* - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - - - - - - - - - - - -  - - - - - - */
/* - - - - -  - - - - - - - - - - - - - - - - DESKTOP - - - - - - - - - - - - - - - - -  - - - - - - */
/* - - - - -  - - - - - - - - - - - - - - - - DESKTOP - - - - - - - - - - - - - - - - -  - - - - - - */
/* - - - - -  - - - - - - - - - - - - - - - - DESKTOP - - - - - - - - - - - - - - - - -  - - - - - - */

@media only screen and (min-width: 1024px){
  #barra-superior-desktop{
  gap:10vw;
  }
  #links-nav-desktop{
    gap:4em;
  }


#main-text-presentation-desktop{
  top: 42vh;
  left:4vw;
}

#presentation-nav{
  width: fit-content;
    flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-around;
}
#proyectos-main-desktop{
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.proyecto-home-desktop{
  width:fit-content;
}
  .proyecto-card-desktop {
  width: 20vw;
}
}

@media only screen and (min-width: 1444px){
  #barra-superior-desktop{
    gap:15vw;
  }
  #links-nav-desktop{
    gap:5em;
  }
  #main-text-presentation-desktop{
  top: 50vh;
  left:4vw;
}
}




/* Hide scrollbars on all modern browsers */
html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer/Edge */
}

/* Hide scrollbars for Webkit browsers (Chrome, Safari, Edge) */
html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none;
}


/* Base: hidden */
#image-modal {
  position: fixed;
  inset: 0;                     /* top/right/bottom/left: 0 */
  display: none;                /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* When visible */
#image-modal.is-visible {
  display: flex;
}

/* Orange overlay */
.image-modal-backdrop {
  position: absolute;
  inset: 0;
   background: #f39200a4; /* dark card on top of orange */
 
}

/* Content box */
.image-modal-content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
  padding: 1rem;
  background: rgba(20, 20, 20);
  border-radius: 16px;
  box-sizing: border-box;
}

/* Image inside modal */
#image-modal-img {
  max-width: 100%;
  max-height: 70vh;
  display: block;
  border-radius: 8px;
}

/* X button */
.image-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 0.2rem 0.3rem;
  background: rgba(20, 20, 20, 0.8);
  border-radius: 10px;
  color: white;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  border-color:  rgba(20, 20, 20, 0.8);

}

/* Mobile: force modal hidden (just in case) */
@media (max-width: 1023px) {
  #image-modal {
    display: none !important;
  }
}