/*inicializamos el documento*/
* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #f0eeea;
}

#wrapper {
    width: 100%;
    height: auto;
}
/*retícula empieza aquí*/
.grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.3) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 1px, transparent 1px);
  background-size: calc((100% - 160px) / 12) 40px; /* 12 columnas con márgenes laterales */
  background-position: 30px 0; /* margen izquierdo de 80px */
  display: none;
}

.grid-overlay.active {
  display: block;
}

.toggle-btn {
    position: fixed;
    top: 2rem;
    right: 2rem;
    z-index: 10000;
  
    background-color: transparent; /* elimina fondo */
    color: #761612;
    border: none; /* sin borde */
    border-radius: 0;
    cursor: pointer;
    font-size: 3vw;
  
    padding: 0;
    outline: none;
  
}

/*retícula termina aquí*/


  /*Estilos para el encabezado*/
  .header {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
   
  }
  /* BOTÓN ☰ */
.btn-menu {
  position: fixed;
  top: 1rem;
  left: 1rem;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10000;
  color: #761612;
  background-color: transparent;
}

/* CHECKBOX OCULTO */
#btn-menu {
  display: none;
}

/* MENÚ LATERAL */
.container-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 9999;
}

.cont-menu {
  width: 250px;
  background: #f0eeea;
  height: 100%;
  padding: 2rem 1rem;
  transform: translateX(-100%);
  transition: all 0.4s ease;
  position: relative;
}

#btn-menu:checked ~ .container-menu {
  opacity: 1;
  visibility: visible;
}

#btn-menu:checked ~ .container-menu .cont-menu {
  transform: translateX(0%);
}

.cont-menu nav ul {
  list-style: none;
}

.cont-menu nav ul li {
  margin-bottom: 1rem;
  margin-top: 10%;
}

.cont-menu nav a {
  font-family: 'Climate Crisis', sans-serif;
  text-decoration: none;
  font-size: 1.2rem;
  color: #761612;
  display: block;
  transition: 0.3s;
}

.cont-menu nav a:hover {
  background: #cac8c5;
  padding-left: 10px;
}

.cerrar-menu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: #761612;
}
.logo img {
  width: 4%;
  margin-top: 1%;
  margin-left: 4%;
  
}
#btn-menu:checked + .btn-menu {
  display: none;
}


  /*Fin de Menù lateral*/
  
  /*empiezan los bloques*/
.horizontal {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}

/* BLOQUES SECCIONALES */
.despliegue,
.despliegue2, .despliegue3,
.despliegue4, .despliegue5, .despliegue6, 
.despliegue7,.despliegue8,
.despliegue9, .despliegue10, .despliegue11,
.despliegue12, .despliegue13,
.despliegue14{
  flex: 0 0 100vw;
  height: 100vh;
  scroll-snap-align: start;
}

/* PRIMERA SECCIÓN: IZQUIERDA */
.despliegue {
  display: flex;
  justify-content: start;
  align-items: center;
}

/* SEGUNDA SECCIÓN: DERECHA */

.despliegue2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
.despliegue3 {
    display: flex;
    justify-content: center;
  align-items: center;
  }
  .despliegue4 {
    display: flex;
    justify-content: center;
  align-items: center;
  }
  .despliegue5 {
    display: flex;
    justify-content: center;
  align-items: center;
    
  }
  .despliegue6 {
    display: flex;
    justify-content: center;
  align-items: center;
  }
  .despliegue7 {
    display: flex;
    justify-content: center;
  align-items: center;
  }
  .despliegue8 {
    display: flex;
    justify-content: center;
  align-items: center;
  }
  .despliegue9 {
    display: flex;
    justify-content: center;
  align-items: center;
  }
  .despliegue10 {
    display: flex;
    justify-content: center;
  align-items: center;
  }
  .despliegue11 {
    display: flex;
    justify-content: center;
  align-items: center;
  }
  .despliegue12 {
    display: flex;
    justify-content: center;
  align-items: center;
  }
  .despliegue13 {
        display: flex;
    justify-content: center;
  align-items: center;
  }
/* CONTENIDO DE LA SECCIÓN IZQUIERDA */
.titulo1 {
  width: 100%;
  
  padding:0;
  margin-left: 2%;
  margin-top: 12.5%;
}

.titulo2 {
  width: 100%;
 
  padding: 0;
  text-align: center;
  margin-top: -1%;
}

h1 {
  font-family: "Roboto", sans-serif;
  font-size: 2vw;
  font-weight: 200;
  color: #761612;
}

h2 {
  font-family: "Climate Crisis", sans-serif;
  font-size: 14vw;
  color: #203c80;
  }

.fotos {
  width: 100%;
  margin-top: -4%;
}

.fotos img {
  display: block;
  width: 100%;
  height: auto;
}
/*sliderrrrr*/

.slider{
  width: 100vw;
  height: auto;
  margin: auto;
  overflow: hidden;
  margin-top: -5.2%;
  }
  .slider .slider-track{
    display: flex;
    animation: scroll 40s linear infinite;
    -webkit-animation: scroll 40s linear infinite;
    width: calc(100vw * 4);
  }
  .slider .slide{
    width: 100vw;
  }
  .slider .slide img {
    width: 100%;
  
  }
  @keyframes scroll {
    0%{
      -webkit-transform:translateX(0);
      transform:translateX(0);
    }
    100%{
      -webkit-transform:translateX(calc(-100vw * 2));
      transform:translateX(calc(-100vw * 2));
    }
  }

/* CONTENIDO DE LA SECCIÓN DERECHA */
.fotosindice {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 90vh;
}
.fotosindice a {
  display: block;
  width: 12%;
  padding: 3%;
  margin-top: 1%;
  text-align: left;
}
.fotosindice img {
  width: 100%;
  height: auto;
  display: block;
}

/*la configuración de los titulos empieza aquí*/
.titulo-proyectos {
  font-family: "Climate Crisis", sans-serif;
  font-size: 5vw;
  color: #203c80;
  text-align:right;
  margin: 2rem 0;
}
h4{
    font-family: "Climate Crisis", sans-serif;
    font-size: 2.5vw;
    color: #761612;
    margin-top: 7%;
    margin-left: 14%;
}
h5{
    font-family: "Roboto", sans-serif;
    font-weight: 150;
    font-size: 1.1vw;
    margin-top: 1%;
    margin-left: 14%;

}
h6{
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-size: 1.1vw;
    margin-top: 1%;
    margin-left: 14%;
}

.titulo_masproyectos {
  width: 50%;
  
}

#mas_proyectos h2{
  font-family: "Climate Crisis", sans-serif;
    font-size: 5vw;
    color: #761612;
    margin-top:40%;
    margin-left: 2.5%;
}
#sobre_mi h3{
  font-family: "Climate Crisis", sans-serif;
    font-size: 7vw;
    color: #203c80;
    margin-left: 14%;
    margin-top: 7%;
    
}

#sobre_mi h4{
  font-family: "Roboto", sans-serif;
  font-size: 2vw;
  font-weight: 200;
  color: #000000;
  margin-top: 3.5%;
  margin-left: 14%;
}
#sobre_mi h5{
  font-family: "Roboto", sans-serif;
  font-weight: 150;
  font-size: 1.1vw;
  margin-left: 14%;
}

#sobre_mi h6{
  font-family: "Climate Crisis", sans-serif;
    font-size: 3vw;
    color: #203c80;
    margin-left: 14%;
}
#sobre_mi2 h5{
  font-family: "Roboto", sans-serif;
  font-weight: 150;
  font-size: 1.6vw;
  margin-left: 26%;
}
#gracias h3{
  font-family: "Climate Crisis", sans-serif;
  font-size: 7vw;
  color: #203c80;
  margin-top: .1%;
  margin-left: 2%; 
}

/*la configuración de los titulos termina aquí*/

.columna1 {
    width: 60%;
   
    margin-left: 1.3%;
    margin-top: 5%;
}
.columna1 img {
    display: block;
    width: 58%;
    margin-top: -7%;
    margin-left: -2.2%;
    height: auto; 
   
}
.columna2 {
    width: 40%;
    
}
.columna2 img {
    display: block;
    width: 100%;
    height: auto; 
    
}

.columna1c {
    width: 60%;
    margin-right: 2.8%;
    margin-top: 2.8%;

}
.columna1c img {
    display: block;
    width: 65%;
    height: auto; 
    margin-left: 14%;
    margin-top: 3%;
    
}
.columna2c {
    width: 40%;
    margin-left: -5%;   
}
.columna2c img {
    display: block;
    width: 95%;
    height: auto; 
    margin-top: -2%;  
}
.columna1l {
    width: 60%;
    margin-right: 2.8%;
    margin-top: 2%;
}
.columna1l img {
    display: block;
    width: 138%;
    height: auto; 
    margin-left: 28%;
    margin-top: -35%;
    
}
.columna2l {
    width: 40%;
    margin-left: -5%;
    
}
/*vino*/
.columna1v {
  width: 60%;
  margin-right: 3%;
  margin-top: .1%;
}
.columna1v img {
  display: block;
  width: 30%;
  margin-top: -2%;
  margin-left: 40%;
  height: auto;
  
}
.columna2v {
  width: 40%;
  margin-left: -5%;   
}
.columna2v img {
  display: block;
  width: 130%;
  height: auto; 
  margin-top: -2%; 
  margin-left: -25%; 
}
/*modo*/
.columna1m {
  width: 60%;
  margin-top: 7%;
  margin-left: 1.2%;
}
.columna1m img {
  display: block;
  width: 60%;
  margin-top: -11%;
  margin-left: 28%;
  height: auto;
}

.columna2m {
  width: 40%;  
}
.columna2m img {
  display: block;
  width: 100%;
  margin-top: -1%;
  height: auto;
}
/*retalle*/
.columna1r {
  width: 60%;
  
  margin-top: 5.8%;
  margin-left: 1.2%;
 
}
.columna1r img {
  display: block;
  width: 65%;
  margin-top: -8%;
  margin-left: 20%;
  
  height: auto;
  
}
.columna2r {
  width: 40%;  
}
.columna2r img {
  display: block;
  width: 90%;
  margin-top: -1%;
  height: auto;
}
/*juguete*/
.columna1j {
  width: 60%;
  margin-left: -.1%;
  margin-top: -.4%;
}
.columna1j img {
  display: block;
  width: 35%;
  margin-top: -6%;
  margin-left: 40%;
  height: auto;
}
.columna2j {
  width: 40%;
  margin-left: -3%;   
}
.columna2j img {
  display: block;
  width: 100%;
  height: auto; 
  margin-top: -2%; 
}
/*frutalia*/
.columna1f {
  width: 58%;
  margin-right: -1%;
  margin-top: 2.8%;
}
.columna1f img {
  display: block;
  width: 74%;
  margin-top: 5%;
  margin-left: 20%;
  height: auto;
}
.columna2f {
  width: 40%;
}
.columna2f img {
  display: block;
  width: 100%;
  height: auto; 
  margin-top: -2%;
}
/*ecatedrico*/
.columna1e {
  width: 57%;
  margin-right: .1%;
  margin-top: .5%;
}
.columna1e img {
  display: block;
  width: 50%;
  margin-top: 5%;
  margin-left: 20%;
  height: auto;
}
.columna2e {
  width: 40%;
}
.columna2e img {
  display: block;
  width: 120%;
  height: auto; 
  margin-top: -2%;
  margin-left: -18%;
}
/*sobre mí*/
.columna1s {
  width: 60%;
  height: 100vh;
  margin-right: 3%;
  margin-left: -5%;
  
}
.columna1s img {
  display: block;
  width: 80%;
  margin-top: -1%;
  margin-left: 10%;
  height: auto;
}
.columna2s {
  width: 30%;
  height: 100vh;
}
.columna2s img {
  display: block;
  width: 100%;
  height: auto; 
  margin-top: 4.5%; 
  margin-left: 1%;
}
.columna2s_iconos img {
  display: block;
  width: 7%;
  height: auto; 
  margin-top: -12%;
  margin-left: 14%;
}

/*slider verticaaaaal*/
.contenedor_slider2 {
  width: 30%;
  height: 100vh; /* Altura fija para contener el scroll */
  overflow: hidden;
  position: relative;
}

.slider2 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.contenedor_slider2,
.slider2 {
  position: relative;
  z-index: 1; 
}
.slider-track2 {
  display: flex;
  flex-direction: column;
  animation: scroll-vertical 60s linear infinite;
  height: calc(250vh * 8); /* 8 imágenes */
}

.slide2 {
  width: 100%;
  height: 250vh;
  flex-shrink: 0;
}

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

/* Animación vertical */
@keyframes scroll-vertical {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-100vh * 4)); /* la mitad del total */
  }
}




/*media*/
@media (max-width: 768px) {
  
  .toggle-btn {
    margin-top: -3%;
    font-size: 32px;
    margin-left: -5%;
  }
  .logo img {
    width: 10%;
    margin-left: 14%;
    margin-top: 5%;
  }
  .horizontal {
    flex-direction: column;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }
  h1 {
    font-size: 4vw;
    margin-left: -2%;
    
  }

  h2 {
    font-size: 13vw;
    text-align: left;
    margin-top: -6.5%;
  }

  .titulo1, .titulo2 {
    padding: 4vw 3%;
  }
  h3 {
    font-size: 8vw;
    
    padding: 0 2rem;
    margin-left: 1%;
  }
  h4 {
    font-size: 6vw;
    text-align: center;
    padding: 0 2rem;
    margin-left: 1%;
  }
  h5 {
    font-size: 5vw;
    text-align: left;
    padding: 0 2rem;
    margin-left: 1%;
  }
  h6 {
    font-size: 5vw;
    text-align: left;
    padding: 0 2rem;
    margin-left: 1%;
    
  }
  
  
  /*la configuración de los titulos empieza aquí*/
  .titulo-proyectos {
    font-size: 9vw;
    text-align: center;
    padding: 0 2rem;
    margin-left: 1%;
    
  }
  #sobre_mi h3{
      font-size: 8vw;
      padding: 0 2rem;
    margin-left: 1%;
      text-align: center;
  }
  #sobre_mi h4{
    font-size: 5vw;
    text-align: center;
    padding: 0 2rem;
    margin-left: 1%;
  }
  #sobre_mi h5{
    font-size: 4vw;
    text-align: center;
    padding: 0 2rem;
    margin-left: 1%;
  }
  
  #sobre_mi h6,#sobre_mi2 h6{
    font-size: 5vw;
    padding: 0 2rem;
    margin-left: 1%;
      text-align: center;
  }
  #sobre_mi2 h5{
    font-size: 4vw;
    text-align: center;
    padding: 0 2rem;
    margin-left: 1%;
  }
  #mas_proyectos h2 {
    font-size: 9vw;
    text-align: left;
    padding: 0 2rem;
    margin-left: -30%;
    
    
  }

  /*bunkitlan*/
  .despliegue3, .despliegue4,
  .despliegue5, .despliegue6,
  .despliegue7, .despliegue8,
  .despliegue9, .despliegue10,
  .despliegue11, .despliegue12,
  .despliegue13, .despliegue14{
    flex-direction: column;
    height: auto; /* Evita que corte contenido en móviles */
    padding: 2rem 0;
    scroll-snap-align: none;
  }
  .columna1, .columna2, 
  .columna1c, .columna2c,
  .columna1l, .columna2l,
  .columna1v, .columna2v,
  .columna1m, .columna2m,
  .columna1r, .columna2r,
  .columna1j, .columna2j,
  .columna1f, .columna2f,
  .columna1e, .columna2e,
  .columna1s, .columna2s,
  .fotosindice{
    width: 100%;
    margin: 0;
    text-align: center;
  }
  .columna1 img, .columna2 img,
  .columna1c img, .columna2c img,
  .columna1l img, .columna2l img,
  .columna2v img,
  .columna1m img, .columna2m img,
  .columna1r img, .columna2r img,
  .columna1j img, .columna2j img,
  .columna1f img, .columna2f img,
  .columna1s img, .columna2s img{
    margin: 1rem auto;
    width: 100%;
  }
  
  .columna1v img {
    margin: 1rem auto;
    width: 90%;
    margin-left: 10%;
  }
  .columna1e img, .columna2e img{
    margin: 1rem auto;
    width: 90%;
    margin-top: 10%;
  }
  .columna2s_iconos img{
    
    width: 5%;
    margin-top: -9%;
    margin-left: 15%;
  }
.fotosindice a {
 width: 20%;
}
}