/* ============================================================
   LITTLE BANDITS — CSS personalizado del sitio
   Archivo del child theme: assets/css/lb-custom.css
   Encolado desde functions.php (prioridad 99, carga tras Elementor).
   Edita ESTE archivo; LiteSpeed lo minifica/combina automáticamente.

   Contenido:
   1) Degradados multi-color (Elementor nativo solo hace 2 colores)
   2) Fix de la galería de Elementor (espacios en blanco)

   Cómo aplicar las clases: en el Container/Widget de Elementor,
   pestaña Avanzado > "CSS Classes" > escribe la clase (sin punto).
   En los banners, deja el fondo del container en None.
   ============================================================ */


/* ============================================================
   1) BANNERS CON DEGRADADO MULTI-COLOR
   ============================================================ */

/* HERO suave (Home + Atracciones) — 5 paradas pastel · clase: lb-grad-hero */
.lb-grad-hero {
  background: linear-gradient(135deg,
      #fefaf5 0%, #faf3ea 25%, #fdf0f6 50%, #f0f4fd 75%, #f5f0ff 100%) !important;
}

/* HERO Eventos — 4 paradas · clase: lb-grad-hero-eventos */
.lb-grad-hero-eventos {
  background: linear-gradient(135deg,
      #fefaf5 0%, #fdf0f6 30%, #f0f4fd 60%, #f5f0ff 100%) !important;
}

/* HERO FAQ — 4 paradas · clase: lb-grad-hero-faq */
.lb-grad-hero-faq {
  background: linear-gradient(135deg,
      #fefaf5 0%, #f5f0ff 40%, #fdf0f6 70%, #f0f4fd 100%) !important;
}

/* Sección "Tipos de eventos" (Home) — 3 paradas · clase: lb-grad-eventos-section */
.lb-grad-eventos-section {
  background: linear-gradient(180deg,
      #ffffff 0%, #f8f4ff 50%, #fff0f5 100%) !important;
}

/* BANNER CTA del Footer — 4 paradas vibrantes · clase: lb-grad-cta-footer */
.lb-grad-cta-footer {
  background: linear-gradient(135deg,
      #e8dff5 0%, #f4b8cc 40%, #a8d8ea 70%, #c4b5f5 100%) !important;
}

/* BANNER del Formulario (Eventos) — 4 paradas vibrantes · clase: lb-grad-cta-form */
.lb-grad-cta-form {
  background: linear-gradient(135deg,
      #e8dff5 0%, #f4b8cc 35%, #fde8a0 65%, #a8d8ea 100%) !important;
}

/* CTA suave bajo la Galería (Home) — 3 paradas 10% · clase: lb-grad-cta-soft */
.lb-grad-cta-soft {
  background: linear-gradient(90deg,
      rgba(244,184,204,0.10) 0%, rgba(196,181,245,0.10) 50%, rgba(168,216,234,0.10) 100%) !important;
}

/* CTA suave de FAQ (Home) — 3 paradas 5% · clase: lb-grad-cta-soft-blue */
.lb-grad-cta-soft-blue {
  background: linear-gradient(90deg,
      rgba(168,216,234,0.05) 0%, rgba(196,181,245,0.05) 50%, rgba(244,184,204,0.05) 100%) !important;
}

/* Texto blanco más legible sobre los banners vibrantes (opcional) */
.lb-grad-cta-footer .elementor-heading-title,
.lb-grad-cta-form .elementor-heading-title {
  text-shadow: 0 1px 2px rgba(91,74,106,0.12);
}


/* ============================================================
   2) FIX DE LA GALERÍA DE ELEMENTOR — clase: lb-gallery
   ============================================================ */

/* A) Galería BÁSICA (widget "Image Gallery" / shortcode WP) */
.lb-gallery .gallery {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 !important;
}
.lb-gallery .gallery-item {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  padding: 0 !important;
}
.lb-gallery .gallery-icon,
.lb-gallery .gallery-item a {
  display: block;
  height: 100%;
  margin: 0 !important;
}
.lb-gallery .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1;        /* cuadrado; usa 4/5 para vertical estilo IG */
  object-fit: cover;
  border: none !important;
  border-radius: 16px;
  display: block;
  transition: transform .4s ease;
}
.lb-gallery .gallery-item img:hover { transform: scale(1.04); }
.lb-gallery .gallery-caption { display: none !important; }

/* B) Galería PRO (widget "Gallery", e-gallery) */
.lb-gallery .elementor-gallery-item,
.lb-gallery .e-gallery-item {
  background-size: cover !important;
  background-position: center center !important;
  border-radius: 16px;
  overflow: hidden;
}
.lb-gallery .elementor-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lb-gallery .elementor-gallery__titles-container { margin-bottom: 24px; }

/* Responsive */
@media (max-width: 1024px) {
  .lb-gallery .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .lb-gallery .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lb-gallery .gallery-item img { border-radius: 12px; }
}


/* ============================================================
   3) BADGE de atracción — ocultar si está vacío (respaldo del filtro PHP)
   Aplica la clase  lb-badge  al widget Icon List del badge.
   ============================================================ */
.lb-badge:has(.elementor-icon-list-text:empty) { display: none !important; }
.lb-badge .elementor-icon-list-text:empty { display: none !important; }


/* ============================================================
   4) FUENTES DE MARCA para contextos sin Elementor (404, etc.)
   ============================================================ */
@font-face { font-family:'SugarPeachy'; src:url('https://littlebandits.co/wp-content/uploads/2026/06/SugarPeachy-Black.woff2') format('woff2'); font-weight:900; font-display:swap; }
@font-face { font-family:'CoreSans'; src:url('https://littlebandits.co/wp-content/uploads/2026/06/CoreSansC-45Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'CoreSans'; src:url('https://littlebandits.co/wp-content/uploads/2026/06/CoreSansC-65Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }


/* ============================================================
   5) PÁGINA 404 (plantilla 404.php del child theme)
   ============================================================ */
.lb-404 {
  /* romper el contenedor del tema para ocupar todo el ancho */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fefaf5 0%, #fdf0f6 50%, #f5f0ff 100%);
  padding: 64px 20px;
  text-align: center;
}
.lb-404-inner { max-width: 580px; margin: 0 auto; }
.lb-404-logo { width: 200px; height: auto; margin-bottom: 24px; }
.lb-404-num {
  font-family: 'SugarPeachy', 'Comic Sans MS', cursive;
  font-weight: 900;
  font-size: 130px;
  line-height: 1;
  margin-bottom: 4px;
  background: linear-gradient(90deg, #8e79f5, #d4789e 55%, #6bb7d6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lb-404-title {
  font-family: 'SugarPeachy', 'Comic Sans MS', cursive;
  font-weight: 900;
  color: #5b4a6a;
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 12px;
}
.lb-404-text {
  font-family: 'CoreSans', system-ui, sans-serif;
  color: #6b6280;
  font-size: 17px;
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 440px;
}
.lb-404-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.lb-btn {
  display: inline-block;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: 'CoreSans', sans-serif;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s, border-color .2s, color .2s;
}
.lb-btn-primary { background: #8e79f5; color: #fff; box-shadow: 0 6px 20px rgba(142,121,245,.25); }
.lb-btn-primary:hover { transform: translateY(-2px); background: #7a63e8; color: #fff; }
.lb-btn-ghost { background: #fff; color: #5b4a6a; border: 2px solid rgba(196,181,245,.30); }
.lb-btn-ghost:hover { border-color: #8e79f5; color: #8e79f5; }
.lb-btn-wa { background: #b5d8a0; color: #3d5a2a; }
.lb-btn-wa:hover { transform: translateY(-2px); background: #a3cc8a; color: #3d5a2a; }
@media (max-width: 600px) {
  .lb-404-num { font-size: 92px; }
  .lb-404-title { font-size: 23px; }
  .lb-btn { padding: 12px 22px; }
}