/* Galería ONG Tapitas — namespaced bajo .otg-gallery-root para no filtrar
   especificidad hacia el resto del tema.

   Colores 2026-09-21: tokens reales del kit global de Elementor del sitio
   (opción elementor_active_kit → post 4 → _elementor_page_settings.system_colors),
   confirmados por el usuario. OJO: la etiqueta del kit "Verde Reciclaje" es
   un nombre heredado — el hex real (#335985) es azul, se usa el hex, no la
   etiqueta. Reemplaza los verdes/ámbar inventados de la versión anterior. */
.otg-gallery-root {
  --otg-bg: #FBF9F8;
  --otg-primary: #335985;      /* kit "Verde Reciclaje" — hex real es azul */
  --otg-primary-soft: #3f6a99;
  --otg-secondary: #356381;    /* kit "Azul Comunidad" */
  --otg-text: #1B1C1C;
  --otg-text-muted: #5c6b73;
  --otg-surface: #ffffff;
  --otg-border: #BFC9BE;
  --otg-radius-md: 14px;
  --otg-radius-full: 9999px;
  --otg-shadow: 0 8px 24px rgba(51, 89, 133, 0.10);
  --otg-shadow-hover: 0 16px 34px rgba(51, 89, 133, 0.18);
  font-family: 'Be Vietnam Pro', sans-serif;
  color: var(--otg-text);
  background: var(--otg-bg);
  display: block;
}
.otg-gallery-root *, .otg-gallery-root *::before, .otg-gallery-root *::after {
  box-sizing: border-box;
}
.otg-gallery-root h1, .otg-gallery-root h2, .otg-gallery-root h3 {
  font-family: 'Manrope', sans-serif;
}

.otg-empty {
  text-align: center;
  color: var(--otg-text-muted);
  padding: 48px 24px;
  border: 1px dashed var(--otg-border);
  border-radius: var(--otg-radius-md);
}
.otg-empty__title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--otg-text);
  margin: 0 0 6px;
}
.otg-empty__hint {
  margin: 0;
  font-size: 0.92rem;
}

/* ---------- Destacados / stories ---------- */
.otg-stories {
  margin-bottom: 28px;
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--otg-shadow);
}
.otg-stories:has(#otg-stories-scroll:empty) { display: none; }
.otg-stories__title {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--otg-text-muted);
  margin: 0 0 14px;
  font-weight: 600;
}
.otg-stories__scroll {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.otg-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--otg-text);
  cursor: pointer;
  padding: 2px;
}
.otg-story__ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  padding: 3px;
  /* Anillo en azules reales del kit, no el verde→ámbar inventado anterior. */
  background: linear-gradient(135deg, var(--otg-primary), var(--otg-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow:hidden convierte al ring en el único clip circular: el círculo
     de la foto (.otg-story__img, con su propio border-radius:50%) y el del
     ring son dos elipses redondeadas de forma independiente, y a ciertos
     devicePixelRatio (pantallas retina/escalado del navegador) sus bordes
     antialiaseados no coinciden pixel a pixel — deja una medialuna de 1px
     del degradé del ring asomando en una esquina (visto en producción,
     esquina inferior derecha). getBoundingClientRect() no lo detecta porque
     ahí las cajas SÍ miden simétricas (3px de padding en los 4 lados): es un
     artefacto de rasterizado, no un problema de layout. overflow:hidden
     fuerza a que TODO lo que no sea la propia foto quede recortado por el
     círculo del ring, sin importar el redondeo del círculo interno. */
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.otg-story:hover .otg-story__ring,
.otg-story:focus-visible .otg-story__ring {
  box-shadow: 0 0 0 3px rgba(51, 89, 133, 0.20);
  transform: scale(1.04);
}
.otg-story:active .otg-story__ring {
  transform: scale(0.96);
}
.otg-story__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--otg-surface);
  display: block;
}
.otg-story__label {
  font-size: 0.76rem;
  font-weight: 600;
  max-width: 84px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.otg-story:focus-visible {
  outline: 2px solid var(--otg-primary);
  outline-offset: 3px;
  border-radius: 12px;
}

/* ---------- Tarjetas de evento: bento asimétrico, no la grilla
   "3 tarjetas iguales" (patrón desaconsejado: se siente genérico y no
   comunica que el primer evento es el que tiene más fotos). La tarjeta
   0 (ya viene ordenada por cantidad de fotos desc desde PHP) ocupa 2x2;
   el resto llena alrededor en un grid de 4 columnas. En mobile todo
   colapsa a una columna, como cualquier tarjeta más. ---------- */
.otg-events {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 18px;
}
.otg-events .otg-event-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.otg-events .otg-event-card:first-child .otg-event-card__thumb {
  aspect-ratio: auto;
  height: 100%;
}
@media (max-width: 900px) {
  .otg-events { grid-template-columns: repeat(2, 1fr); }
  .otg-events .otg-event-card:first-child { grid-column: span 2; grid-row: span 1; }
  .otg-events .otg-event-card:first-child .otg-event-card__thumb { aspect-ratio: 16 / 9; height: auto; }
}
@media (max-width: 560px) {
  .otg-events { grid-template-columns: 1fr; }
  .otg-events .otg-event-card:first-child { grid-column: 1; }
}

.otg-event-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius-md);
  overflow: hidden;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  box-shadow: var(--otg-shadow);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  animation: otg-card-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes otg-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.otg-event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--otg-shadow-hover);
}
.otg-event-card:active {
  transform: scale(0.98) translateY(-1px);
}
.otg-event-card:focus-visible {
  outline: 3px solid var(--otg-primary);
  outline-offset: 2px;
}

.otg-event-card__thumb {
  position: relative;
  overflow: hidden;
  background: #eef1ee;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
}
.otg-event-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.otg-event-card:hover .otg-event-card__thumb img {
  transform: scale(1.04);
}
.otg-event-card__count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(27, 28, 28, 0.72);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--otg-radius-full);
}

.otg-event-card__body {
  padding: 14px 16px 16px;
}
.otg-event-card__name {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--otg-primary);
}
.otg-event-card__date {
  font-size: 0.82rem;
  color: var(--otg-text-muted);
  margin-top: 5px;
}

/* ---------- Caption flotante dentro de PhotoSwipe ---------- */
.otg-pswp-caption {
  background: rgba(51, 89, 133, 0.92);
  font-size: 14px;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 640px;
  text-align: center;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .otg-event-card, .otg-event-card__thumb img, .otg-story__ring {
    transition: none;
  }
  .otg-event-card {
    animation: none;
    opacity: 1;
  }
}