/* ==========================================================================
   GALERÍA — "VOZ360 por dentro": carrusel centrado
   La foto activa va grande al centro y las laterales se achican y atenúan
   según la distancia (modules/gallery.js calcula tamaños y posición).
   Rendimiento: el fondo usa miniaturas ya desenfocadas (img/galeria/blur/),
   los bordes laterales son degradados fijos (no mask-image) y la foto no se
   re-escala en cada cuadro: mide lo que la activa y la tarjeta la recorta.
   ========================================================================== */

.gallery { scroll-snap-align: start; scroll-snap-stop: normal; position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: var(--navy); color: #FFFFFF; display: flex; flex-direction: column; user-select: none; --g-ease: cubic-bezier(.22, 1, .36, 1); }
.gallery-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; will-change: transform; }
.gallery-bg span { position: absolute; inset: -40px; background-size: cover; background-position: center; opacity: 0; transition: opacity .8s ease; }
.gallery-bg span.is-on { opacity: .42; }
.gallery-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7,30,58,.85) 0%, rgba(7,30,58,.25) 30%, rgba(7,30,58,.25) 70%, rgba(7,30,58,.9) 100%); }

.gallery-header { position: relative; z-index: 2; padding-top: clamp(40px, 8vh, 80px); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.gallery-header .eyebrow { color: var(--cyan); }

.gallery-track-outer { position: relative; z-index: 1; flex: 1; min-height: 0; contain: layout style; display: flex; align-items: center; margin: clamp(14px, 3vh, 28px) 0; }
/* Bordes laterales difuminados a todo el alto (sustituyen a mask-image, que era costoso) */
.gallery::before, .gallery::after { content: ''; position: absolute; z-index: 2; top: 0; bottom: 0; width: 8%; pointer-events: none; }
.gallery::before { left: 0; background: linear-gradient(90deg, rgba(7,30,58,.9), rgba(7,30,58,0)); }
.gallery::after { right: 0; background: linear-gradient(270deg, rgba(7,30,58,.9), rgba(7,30,58,0)); }
.gallery-track { display: flex; align-items: center; gap: 16px; flex-shrink: 0; will-change: transform; transition: transform .85s var(--g-ease); }
.gallery-item { position: relative; flex-shrink: 0; margin: 0; border-radius: 14px; overflow: hidden; cursor: pointer; contain: layout paint style; transition: width .85s var(--g-ease), height .85s var(--g-ease), opacity .85s var(--g-ease); }
.gallery-item.is-active { box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.gallery.no-anim .gallery-track, .gallery.no-anim .gallery-item { transition: none; }
.gallery-item::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(7,30,58,.88) 0%, transparent 58%); }
.gallery-item::before { content: ''; position: absolute; inset: 0; z-index: 2; border: 2px solid transparent; border-radius: 14px; pointer-events: none; transition: border-color .4s ease; }
.gallery-item.is-active::before { border-color: rgba(155,231,249,.8); }
.gallery-item img { position: absolute; left: 50%; top: 50%; display: block; width: var(--g-w, 100%); height: var(--g-h, 100%); max-width: none; object-fit: cover; transform: translate(-50%, -50%); pointer-events: none; -webkit-user-drag: none; }
.gallery-caption { position: absolute; z-index: 3; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; font-family: var(--display); font-size: clamp(16px, 1.5vw, 22px); letter-spacing: -.02em; color: #FFFFFF; opacity: 0; translate: 0 10px; transition: opacity .45s ease .15s, translate .6s var(--g-ease) .15s; }
.gallery-item.is-active .gallery-caption { opacity: 1; translate: 0 0; }

.gallery-footer { position: relative; z-index: 2; padding-bottom: clamp(28px, 6vh, 56px); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.gallery-controls { display: flex; align-items: center; gap: 1rem; }
.gallery-prev, .gallery-next { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(7,30,58,.6); display: flex; align-items: center; justify-content: center; color: #FFFFFF; cursor: pointer; transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease; }
.gallery-prev svg, .gallery-next svg { width: 18px; height: 18px; }
.gallery-prev:hover, .gallery-next:hover { border-color: var(--cyan); background: rgba(155,231,249,.14); color: var(--cyan); transform: scale(1.05); }
.gallery-counter { min-width: 64px; font-family: var(--body); font-size: 14px; font-weight: 600; letter-spacing: .1em; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.gallery-drag-hint { margin-left: 1rem; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.gallery-dots { display: flex; align-items: center; gap: 4px; margin-right: 76px; } /* deja espacio al botón del bot */
.gallery-dot { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.gallery-dot span { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.3); transition: transform .35s ease, background .35s ease; }
.gallery-dot.is-active span { background: var(--cyan); transform: scale(1.6); }

@media (max-width: 768px) {
  .gallery-drag-hint { display: none; }
  .gallery-footer { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .gallery-controls { gap: .75rem; }
  .gallery-dots { flex-wrap: wrap; justify-content: flex-start; gap: 1px; margin: 0 64px 0 -2px; }
  .gallery::before, .gallery::after { width: 5%; }
  .gallery-dot { width: 18px; height: 18px; }
}
@media (max-width: 640px) {
  .gallery { min-height: 480px; }
  .gallery-footer { padding-bottom: 22px; }
  .gallery-prev, .gallery-next { width: 42px; height: 42px; }
  .gallery-header .h2 { font-size: 28px; }
  .gallery-item, .gallery-item::before { border-radius: 12px; }
}
@media (max-height: 560px) {
  .gallery { min-height: 0; }
  .gallery-header { padding-top: 14px; gap: 4px; }
  .gallery-header .h2 { font-size: clamp(20px, 3.2vw, 28px); }
  .gallery-header .eyebrow { font-size: 9px; }
  .gallery-track-outer { margin: 10px 0; }
  .gallery-footer { flex-direction: row; align-items: center; padding-bottom: 12px; }
  .gallery-dots, .gallery-drag-hint { display: none; }
  .gallery-prev, .gallery-next { width: 38px; height: 38px; }
  .gallery-caption { font-size: 14px; left: .8rem; bottom: .7rem; }
}