@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:#0a0a0a;color:#eee;}

/* NAV */
header{display:flex;justify-content:space-between;align-items:center;padding:20px;  background: rgba(0, 0, 0, 0.65);position:sticky;top:0;z-index:1000;}
nav{display:flex;gap:20px;}
nav a{color:#fff;text-decoration:none;position:relative;}
nav a::after{content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;background:#ff2a2a;transition:.3s;}
nav a:hover::after{width:100%;}

/* MOBILE MENU */
/* Configuración para móviles */
@media (max-width: 768px) {
    #nav {
        display: none; /* Oculto por defecto */
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #0a0a0a; /* Color oscuro como tu diseño */
        z-index: 1000;
    }

    /* Esta es la clase que activa el JS */
    #nav.active {
        display: flex !important;
    }

    .menu-toggle {
        display: block;
        cursor: pointer;
        font-size: 2rem;
    }
}

/* HERO */
.hero img{width:100%;height:70vh;object-fit:cover;}
.hero h1{text-align:center;margin-top:-80px;font-size:2.5rem;}

/* SECTIONS */
.section{padding:60px 20px;text-align:center;max-width:900px;margin:auto;}

/* BANNER */
.banner img{width:100%;height:300px;object-fit:cover;}

/* POSTS */
.posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;padding:40px;}
.card{background:#111;border-radius:12px;overflow:hidden;transition:.4s;}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #ff2a2a33;}
.card img{width:100%;height:200px;object-fit:cover;}
.card h3{padding:15px;}

/* FOOTER */
footer{padding:30px;text-align:center;background: rgba(73, 4, 4);}
footer a{margin:0 10px;color:#aaa;text-decoration:none;}
footer a:hover{color:#ff2a2a;}

/* POPUP */
.popup{position:fixed;width:100%;height:100%;background:#000c;backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;}
.popup-box{background:#111;padding:40px;border-radius:20px;text-align:center;border:1px solid #ff2a2a;}
.popup button{margin:10px;padding:10px 20px;border:none;cursor:pointer;}
.btn-red{background:#ff2a2a;color:#fff;}
.btn-dark{background:#222;color:#fff;}

.social-icons {
  margin-bottom: 10px;
}

.social-icons a {
  color: #aaa;
  margin: 0 10px;
  font-size: 18px;
  transition: 0.3s;
}

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

.farewell {
  position: relative;
  height: 350px;
  background: url('../img/banner-home-3.png') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.farewell .overlay {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  padding: 40px;
  border-radius: 12px;
  max-width: 700px;
  text-align: center;
}

.farewell p {
  color: #eee;
  line-height: 1.6;
}

.gallery {
  padding: 60px 20px;
}

/* GRID */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* ITEM */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

/* IMAGEN */
.gallery-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: 0.5s ease;
}

/* HOVER ZOOM */
.gallery-item:hover img {
  transform: scale(1.08);
  filter: brightness(0.6);
}

/* OVERLAY */
.gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: 0.4s ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* BOTÓN SUTIL */
.visit-btn {
  border: 1px solid rgba(255,255,255,0.4);
  padding: 8px 18px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  backdrop-filter: blur(6px);
  transition: 0.3s;
}

.visit-btn:hover {
  border-color: #ff2a2a;
  color: #ff2a2a;
}

/* LIGHTBOX */
.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  inset: 0;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: center;
}

.lightbox img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}

/* HERO ENTRADA */
.post-hero {
  position: relative;
  height: 60vh;
  overflow: hidden;
}

.post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
}

.post-hero-overlay {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.post-hero-overlay h1 {
  color: #fff;
  font-size: 2.5rem;
  max-width: 800px;
}

/* CONTENIDO */
.post-content {
  background: #f5f5f5;
  color: #222;
  padding: 60px 20px;
}

.post-content p {
  max-width: 800px;
  margin: 0 auto 25px;
  line-height: 1.8;
  text-align: justify;
  font-size: 1.1rem;
}

/* BANNER FINAL */
.post-banner {
  position: relative;
  height: 300px;
  background: url('../img/galeria/1.png') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-banner-overlay {
  background: rgba(0,0,0,0.6);
  padding: 30px;
  border-radius: 10px;
}

.post-banner-overlay h2 {
  color: #fff;
}

/* RESPONSIVE */
@media(max-width:768px){
  .post-hero {
    height: 40vh;
  }

  .post-hero-overlay h1 {
    font-size: 1.6rem;
    padding: 0 10px;
  }
}