/* ========================================
   GALERÍA (FOTOS + VIDEOS) — FIX MÓVIL
   Objetivo: que los “puntos/indicadores” queden SIEMPRE horizontales y
   que el layout no se rompa por inline-styles.
   ======================================== */

@media (max-width: 768px){
  /* Sección: menos aire y mejor ritmo */
  #galeria{
    padding: 4.5rem 0 !important;
  }

  /* El grid que viene inline (2 columnas) -> 1 columna en móvil */
  #galeria .container > div[style*="grid-template-columns"]{
    grid-template-columns: 1fr !important;
    gap: 2.25rem !important;
    max-width: 560px !important;
  }

  /* Slides más bajos en móvil (la altura inline es 380px) */
  #galeria #carruselFotos > div,
  #galeria #carruselVideos > div{
    height: 290px !important;
  }

  /* Indicadores: forzar horizontal sí o sí */
  #galeria #indicadoresFotos,
  #galeria #indicadoresVideos{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.45rem !important;

    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;        /* si hay muchos (fotos=20) */
    overflow-y: hidden !important;

    padding: 0.25rem 0.25rem !important;
    margin-top: 0.75rem !important;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox */
  }
  #galeria #indicadoresFotos::-webkit-scrollbar,
  #galeria #indicadoresVideos::-webkit-scrollbar{
    width: 0;
    height: 0;
  }

  /* Cada punto (se crea por JS como <div style="..."></div>) */
  #galeria #indicadoresFotos > div,
  #galeria #indicadoresVideos > div{
    flex: 0 0 auto !important;
    display: block !important;
  }
}

@media (max-width: 480px){
  /* Compactación extra: menos alto en carruseles */
  #galeria #carruselFotos > div,
  #galeria #carruselVideos > div{
    height: 230px !important;
  }

  #galeria{ padding: 4rem 0 !important; }

  #galeria #carruselFotos > div,
  #galeria #carruselVideos > div{
    height: 320px !important;
  }

  #galeria #indicadoresFotos,
  #galeria #indicadoresVideos{
    gap: 0.4rem !important;
    padding: 0.2rem 0.2rem !important;
  }
}