/* ============================================================
   GALERÍA — Ávalos y Asociados
   Referencia: galeria.png (Figma node 1:640)
   Regla: el Gallery Widget nativo de Elementor Pro es el componente
   principal. Este CSS solo cubre lo que el widget no reproduce:
   1) Forma de píldora de los filtros (borde + radio + padding + fondo activo)
   2) Ratio exacto de imagen de la referencia (181/331 = 54.683%)
      usando la variable CSS propia del widget (--aspect-ratio).
   ============================================================ */

/* 1) Filtros en píldora — colores y tipografía vienen de los controles nativos */
.avalos-gallery-dark .elementor-gallery-title {
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  padding: 9px 24px;
}
.avalos-gallery-dark .elementor-gallery-title.elementor-item-active,
.avalos-gallery-dark .elementor-gallery-title--active {
  background-color: #082746;
  border-color: #082746;
}

/* 1c) Estado activo inicial de "Todas" (paint determinista pre-JS; al
   interactuar, el JS de Elementor gestiona .elementor-item-active) */
.avalos-gallery-dark
  .elementor-gallery__titles-container:not(:has(.elementor-item-active))
  .elementor-gallery-title[data-gallery-index="all"] {
  background-color: #082746;
  border-color: #082746;
  color: #ffffff;
}

/* 1b) Reset margen de párrafo del Text Editor (infla el header vs referencia) */
.avalos-gallery-intro .elementor-widget-text-editor p {
  margin: 0;
}

/* 2) Ratio de imagen exacto de la referencia (variable nativa del widget).
   !important necesario: el widget pinta --aspect-ratio como inline style. */
.avalos-gallery-dark .e-gallery-grid {
  --aspect-ratio: 54.683% !important;
}