body {
  padding-left: 50px;
  margin: 0px;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  background: rgb(206,210,213);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Load Archivo from local font file */
@font-face {
  font-family: 'Archivo';
  src: url('Archivo-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block; /* cambiá swap por block */
}
@font-face {
  font-family: 'IBMPlexMono';
  src: url('IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@keyframes entrarIzquierda {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

/* Header styles: full width, height equal to text (32px) */
.site-header {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: strech;
  gap: 20px;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1500;
  background-image: url('imagenes/rectangulo.header.png');
  background-size: 100% 100%;
  background-position: center;
  background-color: transparent; 
}
.site-header h1 {
  animation: entrarIzquierda 0.7s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  font-family: 'Archivo', sans-serif;
  font-size: 24px;
  white-space: nowrap;
  background-color: rgb(243,241,239);
  margin: 0;
  line-height: 1;
  font-weight: 400;
  padding:5px 25px;
}

.site-nav {
  animation: entrarIzquierda 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
  display: flex;
  align-items: center;
  background-color: rgb(243,241,239);
  /* keep next to h1 on the left; gap handles spacing */
  width: 100%;
  padding:5px 25px;
  opacity: 1;
  clip-path: inset(0 100% 0 0);
}
/* para que .site-nav no sea invisible antes de arrancar */


.menu-toggle {
  display: none;
}


.site-nav .idioma {
  margin-left: auto;
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 12px !important;
  color: rgb(0, 0, 0) !important;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgb(0, 0, 0);
  margin-top: 5px;
}

.site-nav a {
  font-family: 'Archivo', sans-serif;
  font-size: 24px;
  text-decoration: none;
  color: inherit;
  font-weight: 400;
  color:rgb(206,210,213);
  transition: color 0.2s;
}

.site-nav a:hover {
  color: black;
}

.site-nav a.activo {
  color: black;
}

#texto{
  text-indent: 25px;
}

.site-section {
  animation: entrarIzquierda 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
  display: flex;
  font-size: 9px;
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  gap:0.5%;
}

.col {
  background-color: rgb(243,241,239);
  display: flex;
  flex-direction: column;
  width: 33%;
}

.col a{
  color: inherit;
}

.inner-col {
  display:flex;
}

.inner-col > div {
  flex: 1;
}

.inner-col p{
  margin:0px;
  font-size:9px;
  text-indent: 25px;
}

.menu{
  padding: 25px 0px;
}

.menu nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.menu nav a {
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 9px;
  background-color:rgb(243,241,239);
  color: black;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background-color 0.2s, color 0.2s;
}

.menu nav a:hover,
.menu nav a.activo {
  background-color: black;
  color: rgb(243,241,239);
}

.main-col {
 /* background-color: rgb(250, 253, 247);*/
  display: flex;
  flex-direction: column;
  width: 33%;
  gap:25px;
  text-indent: 25px;
}

.main-col h2{
  font-size: 24px;
  margin: 0;
  font-weight: 400;
}

.trabajos {
  display: flex;
  font-size: 12px;
  gap:0.5%;
}

.trabajo-imagen{
  animation: entrarIzquierda 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
  text-indent: 0;
  width: 100%;
  height: auto;
  display: block;
}

.inner-col div{
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 9px;
  animation: entrarIzquierda 1.1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
}

.celda{
  animation: entrarIzquierda 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
  background-color: rgb(243,241,239);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.trabajo-descripcion {
  animation: entrarIzquierda 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.celda:hover .trabajo-descripcion {
  max-height: 200px; /* valor mayor al alto real del texto */
  transition: max-height 0.2s ease-in-out; 
}

.celda .inner-col{
  border-bottom: 1px solid rgb(192, 192, 192);
}
.celda h2{
  border-bottom: 1px solid rgb(192, 192, 192);
}
.celda img{
  border-bottom: 1px solid rgb(192, 192, 192);
}

#overlay-contacto {
  padding-left: 50px;
  padding-top: 40px;
  padding-bottom: 0;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: none;
  z-index: 2000;
  box-sizing: border-box;
  overflow: hidden;
}

.overlay-content {
  background-image: url("imagenes/contact.fondo.g1.png");
  background-size: 100% 100%;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 25px; /* los 25px después del texto */
}

.overlay-content h2 {
  padding-top: 20px;
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  font-size: 9px;
  margin: 0;
}

.resaltado {
  background-color: rgb(38, 255, 0);
  padding: 0 4px; /* opcional, da un poco de aire a los costados */
}

.overlay-content p,
.overlay-content a {
  font-size: 45px;
  color:black;
  margin: 0;
  line-height: 1;
}

.overlay-text-block {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.close-button {
  align-self: flex-end;
  width: calc(100% / 6);  /* un sexto del overlay siempre en desktop */
  background: none;
  border: none;
  cursor: pointer;
  margin: 0;
}

.close-button img {
  display: block;
  width: 100%;
  height: auto;
}

.sobre-mi{
  padding-top:35px;
  display: flex;
  font-size: 24px;
  gap:0.5%;
}

.main-col1{
  animation: entrarIzquierda 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
  display: flex;
  flex-direction: column;
  width: 33%;
}

.main-col2{
  animation: entrarIzquierda 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
  display: flex;
  flex-direction: column;
  width: 66.5%;
  background-color: rgb(243,241,239);
}

.main-col2 p{
  animation: entrarIzquierda 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
  font-size: 24px;
}

.seccion-texto p:first-of-type {
  text-indent: 25px;
}

.seccion-texto p{
  margin-top: 0;
  margin-bottom: 10px;
}

.seccion-texto h1 {
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 9px;
  background-color: rgb(243,241,239);
  display: block;
}

.datita {
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 9px;
  display:flex;
  background-color: rgb(243,241,239);
  border-bottom: 0.5px solid rgb(206,210,213)
}

.datita > div {
  flex: 1;
}

.timeline {
  display: flex;
  flex-direction: column;
  background-color: rgb(243,241,239);
}

.timeline-item {
  display: flex;
  gap: 15px;
  padding: 5px 0px;
}

.timeline-fecha {
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 7px;
  white-space: nowrap;
  width: 25px;
  flex-shrink: 0;
}

.timeline-desc {
  font-size: 20px;
  padding: 0px 25px;

}

.trabajo-descripcion-larga{
  background-color: rgb(243,241,239);
}

.main-col3{
  animation: entrarIzquierda 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
  display: flex;
  flex-direction: column;
  width: 33%;
}

.main-col3 h1{
  text-indent: 25px;
}

.main-col4{
  animation: entrarIzquierda 1s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
  display: flex;
  margin-left: auto;
  flex-direction: column;
  width: 33%;
  background-color: rgb(243,241,239);
}

.trabajo-descripcion-larga .main-col4 p{
  animation: entrarIzquierda 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 10px;
}

.trabajo-descripcion-larga .main-col4 h1{
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size:7px;
}

.timeline-desc2 {
  font-size: 14px;
}

.linea{
  background-color: rgb(243,241,239);
  border-bottom: 1px solid rgb(192, 192, 192);
}

.datita2 {
  display:flex;
  margin-top:25px;
  width: 33%;
}

.datita2 > div {
  flex: 1;
  margin:0px;
  font-size:9px;
  text-indent: 25px;
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
}

#subrayado{
  text-decoration: underline;
  margin-bottom:25px;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(173, 176, 178);
  font-size: 12px;
  margin-top: 40px;
}

.site-footer img{
  width:10%;
}

.carrusel-wrapper {
  margin-top:25px;
  position: relative;
  width: 100%;
 /* background-color: rgb(243, 241, 239);*/
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.carrusel {
  position: relative;
  width: 100%;
  height: 100%;
}

.carrusel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%); /* escondidas por defecto */
  transition: transform 0.5s ease-in-out;
}

.carrusel-slide img {
  height: 100%;
  width: auto;
  display: block;
  object-fit: contain;
}

.carrusel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
 /* background: rgb(243, 241, 239);*/
  border: none;
  font-size: 22px;
  font-weight: 400;
  cursor: pointer;
  z-index: 10;
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.2s, color 0.2s;
}

.carrusel-btn:hover {
  background: black;
  color: rgb(243, 241, 239);
}

.carrusel-btn.prev { left: 10px; }
.carrusel-btn.next { right: 10px; }


.trabajo-descripcion-larga {
  display: flex;
  font-size: 32px;
  gap:0.5%;
}

.trabajo-descripcion-larga h1{
  font-size: 24px;
  margin: 0;
  font-weight: 400;
}

.trabajo-descripcion-larga p {
  text-indent: 25px;
  font-size: 24px;
  margin: 0;
  font-weight: 400;
}

#info{
  font-size: 15px;
  background-color:rgb(243,241,239);
}

.btn-siguiente {
  margin-top:25px;
  margin-left: auto;
  margin-right: 25px;
  margin-bottom: 25px;
  padding: 4px 10px;
  background-color:rgb(243,241,239);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
  display: block;
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 12px !important;
  color: rgb(0, 0, 0) !important;
  border-radius: 999px;
  border: 1px solid rgb(0, 0, 0);
}

.btn-siguiente:hover,
.btn-siguiente.activo {
  background-color: black;
  color: rgb(243,241,239)!important;
}


/*estilo popup mijardin*/
#popup-jardin {
  display:none; 
  position:fixed; 
  width:100%; 
  height:auto; 
  background:transparent; 
  z-index:1000;
  justify-content: flex-start;
  align-items: center;
  
} 

#popup-contenido {
   width: calc(33.33% - 21px); /* descuenta el gap de 2px y el margin del body */
   position:relative; 
   display:inline-block;
   margin-top: 5px;
   max-height: 110vh;
  }

#popup-img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 70vh;
  object-fit: contain;
  object-position: left;
}
#popup-desc{
  margin:0; font-size:12px; font-family:inherit;
  background:rgb(243,241,239); 
}

#close-button {
  position:absolute; 
  top:10px; 
  right:10px; 
  color: black; 
  background:rgba(243,241,239); 
  border:none; 
  font-size:20px; 
  cursor:pointer; 
  width:30px; 
  height:30px; 
  display:flex; 
  align-items:center; 
  justify-content:center;
}

@media (max-width: 1024px) {
  .site-header h1 {
    font-size:20px;
    line-height: 1;
  }

  .site-nav a {
    font-size: 20px;
  }

  .main-col h2{
    font-size: 18px;
    margin: 0;
    font-weight: 400;
  }

  .site-header a{
    line-height: 0.8;
  }

  .seccion-texto p{
    font-size: 15px;
  }

  .timeline-desc {
  font-size: 15px;
  }

  .seccion-texto h1{
    font-size: 6px;
  } 

  .timeline-fecha{
    font-size: 6px;
  }
  
  .main-col3 h1{
    font-size: 18px;
  }

  .seccion-texto p{
    font-size: 15px;
  }

  .timeline-fecha{
    font-size: 6px;
  }

  #titulo{
    font-size: 6px;
  }

  .timeline-desc2 {
  font-size: 15px;
  }

  #overlay-contacto {
  padding-left: 50px;
  padding-top: 34px;
}
  .close-button {
    width: calc(100% / 6);
  }
.overlay-content p,
.overlay-content a {
  font-size: 25px;
}
}

@media (max-width: 768px){

  .close-button {
    width: 50%;
  }

  .overlay-text-block {
    width: 100%;
  }

  .site-header {
    /*flex-wrap: wrap;*/
    position: sticky;
    top: 0;
    background-image: url('../imagenes/rectangulo.header.png');
    background-size: 100% 100%;
    background-position: center;
    align-items: stretch;
  }

  .site-header h1 {
    font-size:20px;
    line-height: 1;
  }

  .site-header a{
    line-height: 0.8;
  }

  .menu{
   padding-top: 20px;
   padding-bottom: 0%;
  }

  .site-nav .idioma {
    margin:0px;
    font-size: 12px !important;
    color: rgb(0, 0, 0) !important;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgb(0, 0, 0);
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .contact-links {
    display: block;
    text-align: left;
  }

  .menu-toggle {
    display: flex;
    position: relative; /* saca el absolute */
    margin-left: auto;
    height: 100%; /* mismo alto que el header */
    padding: 0px 10px;
    background-color: rgb(243,241,239);
    border: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 101;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    color: black !important;
    flex-shrink: 0;
  }

  .celda:hover .trabajo-descripcion {
    max-height: 0;
  }

  .trabajo-descripcion.visible {
    max-height: 200px;
    transition: max-height 0.5s ease-in-out;
  }

  .site-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 25px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2000;
    border-top: 1px solid rgb(192, 192, 192);
  }

  .site-nav.abierto {
    display: flex;
  }

  .site-nav a {
    font-size: 20px;
    padding: 5px 0;
  }

  .site-section {
    flex-direction: column;
    width: 100%;
  }

  .col {
    width: 100%;
    border-top: 1px solid rgb(192, 192, 192);
  }

  .col a{
    padding-left: 25px;
  }

  .trabajos {
    flex-direction: column;
  }

  .main-col {
    width: 100%;
    padding-top: 20px;
  }

  .sobre-mi {
    flex-direction: column;
  }
  .main-col2 p{
  animation: entrarIzquierda 1.2s cubic-bezier(0.77, 0, 0.175, 1) 0.2s forwards;
  background-color: rgb(243,241,239);
  text-indent: 25px;
}

  .main-col1 {
    width: 100%;
    position: sticky;
    top: 34px; /* igual al alto del header */
    align-self: flex-start;
    height: fit-content;
  }

  .main-col2 {
    z-index: 1;
    width: 100%;
  }

  .seccion-texto p{
    font-size: 15px;
  }

  .timeline-desc {
  font-size: 15px;
  }

  .seccion-texto h1{
    font-size: 6px;
  } 

  .timeline-fecha{
    font-size: 6px;
  }

  #titulo{
    font-size: 6px;
  }

  .timeline-desc2 {
  font-size: 15px;
  }

  .main-col3 {
    width: 100%;
    position: sticky;
    top: 34px; /* igual al alto del header */
    align-self: flex-start;
    height: fit-content;
  }

  .main-col3 h1{
  margin-bottom: 25px;
  }

  .main-col4 {
    z-index: 1;
    width: 100%;
    font-size: 15px;
  }

  .trabajo-detalle {
    width: 100%;
  }

  .trabajo-descripcion-larga {
    flex-direction: column;
  }

  .trabajo-descripcion-larga p{
    font-size: 12px;
  }

.trabajo-descripcion-larga .main-col1,
.trabajo-descripcion-larga .main-col2 {
  width: 100%;
}
  #info{
    font-size: 12px;
  }

/*carrusel en los trabajos*/
.carrusel-wrapper {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
  }

  .carrusel {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* oculta barra en Firefox */
  }

  .carrusel::-webkit-scrollbar {
    display: none; /* oculta barra en Chrome/Safari */
  }

.carrusel-slide {
  min-width: 100%;
  scroll-snap-align: start;
  position: relative; /* sobreescribe el absolute de desktop */
  transform: none !important; /* cancela el translateX del JS */
}

  .carrusel-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .carrusel-btn {
    display: none;
  }

  /* puntos indicadores */
  .carrusel-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
  }

  .carrusel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(206, 210, 213);
    transition: background 0.2s;
  }

  .carrusel-dot.activo {
    background: black;
  }

  #popup-jardin {
  display:none; 
  position:fixed; 
  width:90%; 
  height:auto; 
  background:transparent; 
  z-index:1000;
} 

#popup-contenido {
   background:rgb(243,241,239); 
   width:100%; 
   position:relative; 
   display:inline-block;
   max-height: 90vh;
  }

#popup-img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 70vh;
  object-fit: contain;
  object-position: left;
}
#popup-desc{
  font-size:12px; 
  font-family:inherit;
}

.menu-toggle{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: black;
}
 .site-footer img{
  width:20%;
}
}