body {
  padding-left: 50px;
  margin: 0px;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background-color: rgb(40, 40, 40);
 /* background-image: url('imagenes/alo.png');*/
  background-size: cover;
  background-repeat: no-repeat;
}

/* 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);
  }
}


p {
  font-size:15px;
  text-indent: 25px;
}


/* 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.header2.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(255,92,175);
  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: linear-gradient(to right, rgb(255,92,175), rgb(255, 19, 3));
  /* 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,59,110);
  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: linear-gradient(to right, rgb(255,92,175), rgb(255, 19, 3));
  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:12px;
  text-indent: 25px;
}

#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.n1.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-size: 9px;
  font-weight: 400;
  margin: 0;
}
.resaltado {
  background-color: rgb(255,92,175);
  padding: 0 4px; /* opcional, da un poco de aire a los costados */
}

.overlay-content p,
.overlay-content a {
  font-size: 45px;
  color:rgb(255,92,175);
  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;
}

.bienvenida{
  position: fixed;
  bottom: 0;
  right: 0;
  width: calc(100% / 6);
  padding-right: 25px;
  padding-bottom: 120px;
}

.bienvenida img{
  display: block;
  width: 100%;
  height: auto;
  padding-top: 50px;
}

.bienvenida p{
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  text-indent: 25px;
  font-size: 9px;
  color: rgb(125, 125, 125);
}

.bienvenida h2 {
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 9px;
  display:flex;
  color: rgb(125, 125, 125);
  text-indent: 0px;
}


.datita2{
  margin-top:25px;
  display:flex;
  padding:0px 25px;
  background-color: rgb(243,241,239);
  font-size: 12px;
  Gap: 13.5%;
}

.datita2{
  border-bottom: 1px solid rgb(192, 192, 192);
}

.main-col1 h1{
  background-color: rgb(243,241,239);
}

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

/*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;
   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(40,40,40); 
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 9px;
  display:flex;
  color: rgb(125, 125, 125);
  text-indent: 0px;
}

#close-button {
  position:absolute; 
  top:0px; 
  right:0px; 
  background:none; 
  border:none; 
  font-size:20px; 
  cursor:pointer; 
  width:35px; 
  height:35px; 
  display:flex; 
  align-items:center; 
  justify-content:center;
}

#close-button img {
  width: 100%;
  height: auto;
}

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

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

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

  #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.header2.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(255,97,175);
    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;
    background-color: rgb(243,241,239);
  }

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

  .site-nav a {
    font-size: 20px;
    padding: 5px 0;
    color:rgb(206,59,110);
  }

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

  .col {
    width: 100%;
  }

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

  .trabajos {
    flex-direction: column;
  }

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

 
  .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%;
  }

  .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:none; 
   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{
  margin:0; 
  font-size:12px; 
  font-family:inherit;
  background:rgb(40,40,40); 
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 9px;
  display:flex;
  color: rgb(125, 125, 125);
}

.menu-toggle{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: black;
}

.bienvenida {
  position: fixed;
  left: 50px;
  right: 0;
  width: auto; /* ocupa desde left:50px hasta el borde derecho */
  padding-bottom: 20px;
}

.bienvenida img{
  display: block;
  width: 100%;
  height: auto;
  padding-top: 10px;
}

.bienvenida p{
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  text-indent: 25px;
  font-size: 6px;
  color: rgb(125, 125, 125);
}

.bienvenida h2 {
  font-family: 'IBMPlexMono', 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 6px;
  display:flex;
  color: rgb(125, 125, 125);
  text-indent: 0px;
}

}