/* ====== GALERÍA ÉPICA - ESTILO HOME - MOMENTOS ÉPICOS ====== */

/* Contenedor con estilo hero */
[data-route="galeria"] .container{
  max-width:min(1200px,95vw);
  margin-inline:auto;
  padding:clamp(40px,8vw,96px) clamp(20px,4vw,48px);
}

/* Header épico como el hero */
[data-route="galeria"] .section-header{
  text-align:center;
  margin-bottom:clamp(60px,10vw,120px);
  position:relative;
}

[data-route="galeria"] .section-title{
  font-size:clamp(48px,8vw,80px);
  font-weight:900;
  margin:0 0 24px;
  background:linear-gradient(135deg, #fff, #D4AF37);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:0 4px 20px rgba(212,175,55,.3);
  line-height:1.1;
}

[data-route="galeria"] .section-subtitle{
  font-size:clamp(20px,3vw,28px);
  color:#c9cede;
  margin:0 auto;
  max-width:800px;
  line-height:1.6;
  opacity:.95;
}

/* Grid épico con márgenes grandes */
[data-route="galeria"] .gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
  gap:clamp(40px,6vw,80px);
  margin:0;
  padding:0;
}

/* En móvil, fotos aún grandes pero adaptadas */
@media (max-width:768px){
  [data-route="galeria"] .gallery-grid{
    grid-template-columns:1fr;
    gap:clamp(32px,8vw,64px);
  }
}

/* Cards épicos con estilo hero */
[data-route="galeria"] .gallery-card{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.10), transparent 60%), rgba(20,20,24,.25);
  outline:2px solid rgba(255,255,255,.15);
  outline-offset:-2px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  transition:all .4s cubic-bezier(.4,.2,.2,1);
  transform:translateY(0);
}

[data-route="galeria"] .gallery-card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  outline-color:rgba(212,175,55,.4);
}

/* Las imágenes como momentos épicos */
[data-route="galeria"] .gallery-card img{
  display:block;
  width:100%;
  height:clamp(300px,40vw,500px); /* Altura épica */
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center;
  transition:transform .6s cubic-bezier(.4,.2,.2,1);
  transform:scale(1);
}

[data-route="galeria"] .gallery-card:hover img{
  transform:scale(1.08); /* Zoom épico */
}

/* Overlay épico con información */
[data-route="galeria"] .gallery-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    transparent 40%,
    rgba(0,0,0,.7) 100%
  );
  z-index:2;
  opacity:0;
  transition:opacity .4s ease;
}

[data-route="galeria"] .gallery-card:hover::before{
  opacity:1;
}

/* Texto épico sobre las fotos */
[data-route="galeria"] .gallery-card figcaption{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:clamp(24px,4vw,48px);
  z-index:3;
  color:#fff;
  text-align:center;
  transform:translateY(20px);
  opacity:0;
  transition:all .4s ease;
}

[data-route="galeria"] .gallery-card:hover figcaption{
  transform:translateY(0);
  opacity:1;
}

[data-route="galeria"] .gallery-card .photo-title{
  font-size:clamp(24px,3vw,36px);
  font-weight:800;
  margin:0 0 12px;
  text-shadow:2px 2px 8px rgba(0,0,0,.8);
  color:#fff;
}

[data-route="galeria"] .gallery-card .photo-desc{
  font-size:clamp(16px,2vw,20px);
  opacity:.95;
  margin:0;
  text-shadow:1px 1px 4px rgba(0,0,0,.8);
  color:#c9cede;
  line-height:1.5;
}

/* Animación de entrada épica */
[data-route="galeria"] .gallery-card{
  opacity:0;
  transform:translateY(40px);
  animation:epicFadeIn .8s cubic-bezier(.4,.2,.2,1) forwards;
}

[data-route="galeria"] .gallery-card:nth-child(1){ animation-delay:.1s; }
[data-route="galeria"] .gallery-card:nth-child(2){ animation-delay:.2s; }
[data-route="galeria"] .gallery-card:nth-child(3){ animation-delay:.3s; }
[data-route="galeria"] .gallery-card:nth-child(4){ animation-delay:.4s; }
[data-route="galeria"] .gallery-card:nth-child(5){ animation-delay:.5s; }
[data-route="galeria"] .gallery-card:nth-child(6){ animation-delay:.6s; }

@keyframes epicFadeIn{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Botón épico al final */
[data-route="galeria"] .gallery-cta{
  text-align:center;
  margin-top:clamp(60px,10vw,120px);
  padding:clamp(40px,6vw,80px);
  background:radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.10), transparent 60%), rgba(20,20,24,.25);
  border-radius:24px;
  outline:1px solid rgba(255,255,255,.15);
}

[data-route="galeria"] .btn-epic{
  display:inline-block;
  padding:18px 36px;
  background:linear-gradient(135deg, #D4AF37, #FFD700);
  color:#0a090d;
  font-size:clamp(16px,2vw,20px);
  font-weight:800;
  border-radius:16px;
  text-decoration:none;
  transition:all .3s ease;
  box-shadow:0 14px 32px rgba(212,175,55,.45);
  transform:translateY(0);
}

[data-route="galeria"] .btn-epic:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 20px 40px rgba(212,175,55,.6);
}