/* ======= BASE ======= */
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.hero-galeria {
  position: relative;
  width: 100%;
  height: 55vh;
  min-height: 300px;
  background: url('../images/galeria-hero.png') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
   margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.hero-overlay {
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-text {
  color: white;
  max-width: 1200px;
  padding: 40px 20px;
}

.hero-title {
  font-size: 3rem;
  font-weight: 1200;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.hero-subtitle-galeria {
  font-size: 1.3rem;
  margin: 0;
  
  line-height: 1.4;
  color:#eb7c32;
}

/* ====== Estilos del bloque Síguenos ====== */
.social-cta{
  --bg: #ffffff;
  --text: #111;
  --muted:#6b7280;          /* gris subtítulo */
  --border:#e5e7eb;         /* gris borde tarjetas */
  --shadow: 0 4px 20px rgba(0,0,0,.06);
  --radius: 24px;
   padding-block: clamp(20px, 8vw, 120px); /* top & bottom */
  background: var(--bg);
}
.social-cta__inner{
  max-width: 1200px;
  margin: 0 auto 40px auto;
  padding: 0 16px;
}
.social-cta__title{
  font-size: clamp(18px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: .2px;
  text-align: center;
  color: var(--text);
  margin: 0 0 20px 0;
}
.social-cta__subtitle{
  text-align:center;
  color: var(--muted);
  font-size: clamp(16px, 2.2vw, 22px);
  margin: 0 0 58px 0;
}
.social-cta__tag{ font-weight: 600; color: var(--text); }

.social-cta__cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:30px;
  list-style:none;
  margin:0;
  padding:0;
}


@media (max-width: 860px){
  .social-cta__cards{ grid-template-columns: 1fr; }
}

.social-card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 22px 18px;
  display: grid;
  place-items: center;
  row-gap: 20px;
  text-align: center;
}
/* el icono ya existe; solo le damos forma de “pastilla” */
.social-card__icon{
  width: 38px; height: 38px;
  display:grid; place-items:center;
  border-radius: 10px;
  padding: 5px;                 /* para que el SVG respire dentro */
}

/* Instagram (degradado clásico + icono blanco) */
.social-card--ig .social-card__icon{
  background: linear-gradient(45deg,
    #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color:#fff; /* el SVG usa currentColor (fill/stroke) */
}

/* Facebook */
.social-card--fb .social-card__icon{ background:#1877F2; color:#fff; }

/* X (Twitter) */
.social-card--x .social-card__icon{ background:#000; color:#fff; }

/* YouTube */
.social-card--yt .social-card__icon{ background:#FF0000; color:#fff; }

/* TikTok (opción simple en negro con icono blanco) */
.social-card--tt .social-card__icon{ background:#000; color:#fff; }


.social-card__handle{
  font-size: 18px;
  color:#111;
}
.social-card__btn{
  font-size: 14px;
  display:inline-block;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-decoration: none;
  color:#111;
  background:#fafafa;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.social-card__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  background:#fff;
}






.bgallery-section {
  padding: 60px 20px;
  max-width: 1350px;
  margin: 35px auto;
}

/* ======= FILTROS ======= */
.gallery-filters {
  margin: 0px 0 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-start;
  
}

/* Barra flotante a pantalla completa */
.filterbar-float{
  position: fixed;
  top: calc(env(safe-area-inset-top) + 0px);
  left: 0; right: 0; width: 100%;
  z-index: 80;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  min-height: 92px;
  padding: 0px 18px;
  transform: translateY(-120%);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}


.filterbar-float.is-visible{
  transform: translateY(0);
  opacity: 1;
}

/* Botonera interna con buen espaciado y scroll horizontal si hace falta */
.filterbar-float .filters{
  display: flex;
  gap: .75rem;
  overflow: auto;
  padding: 0px 0px 0px 0px;          /* ya hay padding en el contenedor */
}

/* Contenedor interno que se alinea con los botones originales */
.filterbar-float__inner{
  box-sizing: border-box;
  width: var(--inner-width, 100%);
  margin-left: var(--inner-left, 0px);  /* lo calcula el JS */
}

/* Más altura y aire para la caja completa (ajusta a tu gusto) */
.filterbar-float{
  min-height: 92px;         /* más alta */
  padding: 40px 0px 40px 0px;       /* más aire interno */
 
}










.filter-btn {
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid #333;
  background: #fff;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Hover */
.filter-btn:hover {
  background: #333;
  color: #fff;
}

/* Activo */
.filter-btn.active {
  background: #333;
  color: #fff;
  font-weight: 500;
}

/* ======= GALERÍA ======= */
/* Contenedor de la galería: 3 columnas y espacios uniformes */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 3 columnas fijas */
  gap: 45px;                              /* mismo espacio entre filas y columnas */
  max-width: 1350px;
  margin: 80px auto;                      /* mismo espacio arriba y abajo */
  box-sizing: border-box;
  align-items: start;
}

/* Cada item es un cuadrado perfecto y no se deforma al filtrar */
.gallery-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;    /* ✅ cuadrado */
  overflow: hidden;
  background: #fff;
}

/* La imagen rellena el cuadrado sin deformarse */
.gallery-item img {
  position: absolute;     /* importante para llenar el cuadrado */
  inset: 0;               /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* Ocultar por filtro */
.gallery-item.hidden { display: none !important; }

/* Overlay/caption opcional (si lo usas) */
.gallery-caption {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; opacity: 0; z-index: 2;
  transition: opacity 0.4s ease;
}
.gallery-item::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,0.4); opacity: 0; z-index: 1;
  transition: opacity 0.3s ease;
}
.gallery-item:hover::before { opacity: 1; }
.gallery-item:hover .gallery-caption { opacity: 1; }
.gallery-item:hover img { transform: scale(1.05); }


/* Sección feed IG */
.instafeed {
  background: #4a4a4a;          /* fondo gris oscuro como en la imagen */
  padding: 80px 0px 110px 0px;         /* respiración superior/inferior */
  color: #fff;
}

/* Cabecera con badge centrado */
.instafeed-header {
  display: flex;
  justify-content: center;
  margin-bottom: 75px;
  margin-top: 25px;
}

.insta-badge {
  font-family: 'Lobster', cursive;

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  background: #111;             /* badge negro */
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
 
}

.insta-badge .ig {
  height: 17px;
  width: 17px;
  fill: currentColor;
}

/* Grid de miniaturas */
.instafeed-grid {
  max-width: 1450px;            /* ajusta para que queden 2 filas bonitas */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  padding: 0 16px;              /* un poco de respiro lateral */
  box-sizing: border-box;
}

/* Cada miniatura cuadrada perfecta (sin wrappers extra) */
/* Cada miniatura cuadrada */
.insta-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset;
  cursor: pointer;
}

.insta-item img {
  position: absolute;
  inset: 0;
  width: 100%; 
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease, opacity .35s ease;
}

/* Overlay */
.insta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0); /* invisible al inicio */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .35s ease, opacity .35s ease;
  opacity: 0;
}

/* Icono de Instagram */
.insta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0); /* invisible al inicio */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .35s ease;
  opacity: 0;
}

.insta-overlay svg {
  width: 19px;
  height: 19px;
  fill: #fff; /* blanco */
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .35s ease, transform .35s ease;
}

/* Hover */
.insta-item:hover .insta-overlay {
  background: rgba(0,0,0,0.4); /* oscurecer 40% */
  opacity: 1;
}

.insta-item:hover .insta-overlay svg {
  opacity: 1;
  transform: scale(1);
}


/* Responsive fino para móviles */
@media (max-width: 640px) {
  .instafeed {
    padding: 28px 0 40px;
  }
  .instafeed-grid {
    gap: 12px;
    max-width: 100%;
  }
}

/* ===== GALERÍA — columnas responsivas ===== */
/* Escritorio: 4 columnas (ya tienes esto arriba) */
.gallery-grid{
  grid-template-columns: repeat(4, 1fr);
}

/* Tablets/portátiles medianos: 3 columnas */
@media (max-width: 1024px){
  .gallery-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;                 /* un poco menos de separación */
  }
}

/* Responsive (móvil y tablet estrecha): 2 columnas */
@media (max-width: 768px){
  .gallery-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;                 /* separación más compacta */
    margin: 40px auto;         /* reduce el margen vertical */
  }
}

/* Muy estrecho (opcional): si quieres mantener 2 columnas hasta 360px,
   elimina este bloque. Si lo dejas, a 1 columna en pantallas mini. */
@media (max-width: 360px){
  .gallery-grid{
    grid-template-columns: 1fr; 
  }
}

/* ===== Galería: desactivar barra flotante en responsive ===== */
@media (max-width: 991.98px){
  /* Si existe la barra flotante .filterbar-float, la ocultamos en móvil/tablet */
  .filterbar-float,
  .filterbar-float.is-visible{
    display: none !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
  }

  /* La botonera normal (.gallery-filters) se mantiene en el flujo */
  .bgallery-section .gallery-filters{
    position: static !important;
    top: auto !important;
    margin-top: 0;
  }
}