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

    body {
      font-family: Arial, sans-serif;
      background-color: #e6f4ea;
      color: #dfede0;
    }

    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #2e7d32;
      padding: 1rem 2rem;
      color: #daede0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 1000;
    }

    .navbar h1 {
      margin: 0;
    }

    .menu {
      display: flex;
      gap: 1rem;
    }

    .menu a {
      color: white;
      text-decoration: none;
      font-weight: bold;
    }

    @media (max-width: 768px) {
      .menu {
        flex-direction: column;
        background-color: #388e3c;
        position: absolute;
        top: 60px;
        right: 0;
        display: none;
        padding: 1rem;
      }

      .menu.show {
        display: flex;
      }

      .menu-toggle {
        display: block;
        cursor: pointer;
      }
    }

    .menu-toggle {
      display: none;
      font-size: 1.5rem;
    }

    /* Galería */
    .gallery {
      margin-top: 100px;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      border: 2px solid #000;
      padding: 0 20px 50px;
    }

    .image-container {
          display: flex;
          justify-content: center; /* Alinea horizontalmente */
          align-items: center;     /* Alinea verticalmente */
          position: relative;  
    }

    .image-container img {
      max-width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
    }

    .icon-overlay {
      position: absolute;
      bottom: 3%;
      right: 3%;
      
      padding: 1em;
      border-radius: 50%;
      color: white;
      font-size: 1.5em;
      transition: transform 0.3s;
	  cursor: pointer;
    }



		/* Posiciones distintas para cada icono */
		.pos-bottom-right {
		  bottom: 3%;
		  right: 3%;
		}

		.icono-1 {
		  top: 53%;
		  left: 70%;
		}
		.icono-2 {
		  top: 28%;
		  left: 85%;
		}
		.icono-3 {
		  top: 68%;
		  left: 85%;
		}
		.icono-4 {
		  top: 63%;
		  left: 63%;
		}
		 .icono-5 {
		  top: 63%;
		  left: 80%;
		}

		 .icono-6 {
		  top: 10%;
		  left: 68%;
		}
		 .icono-7 {
		  top: 30%;
		  left: 68%;
		}
		 .icono-8 {
		  top: 52%;
		  left: 68%;
		}

		 .icono-9 {
		  top: 72%;
		  left: 68%;
		}
		 .icono-10 {
		  top: 55%;
		  left: 69%;
		}
		.icono-11 {
		  top: 65%;
		  left: 68%;
		}
		
		.icono-12 {
		  top: 64%;
		  left: 68%;
		}
		
		
		.icono-13 {
		  top: 64%;
		  left: 68%;
		}
		
		.icono-14 {
		  top: 54%;
		  left: 68%;
		}
		
		
				
	/* ✅ Capa clickeable con borde */
		.clickable-overlay-1 {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 200px;
		  height: 120px;
	        
		  background-color: rgba(255, 99, 71, 0.9); /* Verde con leve transparencia  */
		 
		  cursor: pointer; /* Manito al pasar el mouse */
		  
		  z-index: 100; /* Asegura que quede por encima de la imagen */
		}


		

    @media (max-width: 600px) {
      .icon-overlay {
        font-size: 1.2em;
        padding: 0.8em;
	
      }
	  
	  	.icono-1 {
		  top: 51%;
		  left: 70%;
		}
		.icono-2 {
		  top: 25%;
		  left: 85%;
		}
		.icono-3 {
		  top: 65%;
		  left: 85%;
		}
		
		.icono-4 {
		  top: 63%;
		  left: 80%;
		}
		 .icono-5 {
		  top: 63%;
		  left: 64%;
		}

		 .icono-6 {
		  top: 10%;
		  left: 68%;
		}
		 .icono-7 {
		  top: 30%;
		  left: 69%;
		}
		 .icono-8 {
		  top: 53%;
		  left: 68%;
		}

		 .icono-9 {
		  top: 73%;
		  left: 68%;
		}
		 .icono-10 {
		  top: 53%;
		  left: 68%;
		}
		.icono-11 {
		  top: 64%;
		  left: 68%;
		}
		
		.icono-12 {
		  top: 64%;
		  left: 68%;
		}
		
		
		.icono-13 {
		  top: 60%;
		  left: 68%;
		}
		
		.icono-14 {
		  top: 84%;
		  left: 68%;
		}
		
		
		
		
			/* ✅ Capa clickeable con borde */
		.clickable-overlay-1 {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 50px;
		  height: 30px;
	
		  background-color:  rgba(46, 125, 50, 0.9); /* Verde con leve transparencia  */
		 
		  cursor: pointer; /* Manito al pasar el mouse */
		  
		  z-index: 100; /* Asegura que quede por encima de la imagen */
		}


	}
	
 /* ✅ Footer */
    footer {
      background-color: #2e7d32;
      color: white;
      text-align: center;
      padding: 2rem 1rem;
      margin-top: auto;
    }

    footer .footer-content {
      max-width: 1000px;
      margin: 0 auto;
    }

    footer p {
      margin-bottom: 1rem;
    }

    footer .social-icons {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      margin-bottom: 1rem;
    }

    footer .social-icons a {
      color: white;
      font-size: 1.5rem;
      transition: transform 0.3s, color 0.3s;
    }

    footer .social-icons a:hover {
      transform: scale(1.2);
      color: #a5d6a7;
    }

    footer small {
      display: block;
      margin-top: 1rem;
      font-size: 0.85rem;
      opacity: 0.8;
    }
    
    
    
    
    
    h1 {
  margin: 20px 0;
  color: #dfede0;
}

.viewer {
  position: relative;
  max-width: 80%;
  margin: 20px auto;
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.viewer img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 30px;
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
}

.nav:hover {
  background: rgba(0,0,0,0.7);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px auto;
  max-width: 80%;
  gap: 10px;
}

.thumbnails img {
  width: 100px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: 0.3s;
}

.thumbnails img:hover {
  border: 2px solid #007BFF;
  transform: scale(1.05);
}