/* =========================
   GALERÍA DE CLIENTES · carrusel de paneles verticales (estilo "strip slider")
   Un escenario oscuro con la foto activa al centro, grande y nítida, y a cada
   lado paneles más angostos y atenuados. Al avanzar, los paneles se deslizan
   escalonados y las fotos se mueven un poco distinto que su marco (parallax).
   La posición y el ancho de cada panel los calcula galeria-slider.js; aquí vive
   todo lo demás (colores, transiciones, textos y controles).
========================= */
/* De orilla a orilla (sin relleno ni esquinas redondeadas, como el marquee de antes).
   En celular el sitio le pone relleno lateral a toda la sección; aquí se quita. */
.seccion-galeria{ padding-left:0; padding-right:0; }
.gs{
  box-sizing:border-box; width:100%; margin:34px 0 0; padding:0;
  --gs-dur:265ms; --gs-ease:cubic-bezier(.25,.85,.25,1);
}
.gs-escenario{
  position:relative; overflow:hidden; isolation:isolate;
  height:clamp(320px,35.2vw,416px);
  background:var(--bg-dark); border-radius:0;
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
  /* Margen de los textos y controles: alineado con el texto del encabezado de la
     sección (contenedor de 1180 px) aunque el escenario llegue de orilla a orilla. */
  --gs-x:max(var(--pad-x), calc((100% - var(--container)) / 2 + var(--pad-x)));
}

/* Paneles */
.gs-panel{
  position:absolute; top:0; bottom:0; left:6000px; width:300px; margin:0;
  overflow:hidden; background:var(--bg-dark-2); border-radius:10px; cursor:pointer;
  filter:brightness(var(--luz,1));
  transition:left var(--gs-dur) var(--gs-ease), width var(--gs-dur) var(--gs-ease), opacity .2s ease, filter var(--gs-dur) ease;
  will-change:left,width;
}
.gs-panel.gs-sin-transicion{ transition:none; }
.gs-panel.es-activo{ cursor:default; }
.gs-panel.es-oculto{ pointer-events:none; }

/* La foto es más ancha que su marco: así puede desplazarse unos píxeles dentro
   de él y se nota el parallax. */
.gs-img{
  position:absolute; top:0; left:-48px; width:calc(100% + 96px); height:100%;
  max-width:none; object-fit:cover; display:block;
  transform:translateX(var(--par,0px));
  transition:transform calc(var(--gs-dur) * 1.25) var(--gs-ease);
}
/* Todas las fotos van a color y nítidas. La del centro está encendida; las demás se
   apagan parejo (cada panel con su propia luz, sin degradado dentro de él) y más
   mientras más lejos del centro. galeria-slider.js pone --luz según la distancia.
   Antes de que arranque el script no hay transiciones. */
.gs-escenario:not(.gs-listo) .gs-panel,
.gs-escenario:not(.gs-listo) .gs-img{ transition:none; }

/* Sombra suave en la parte baja de cada foto, para que el lugar se lea sobre cualquier
   imagen (va detrás del logo y del texto). */
.gs-panel::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(7,11,20,.62) 0%, rgba(7,11,20,.28) 50%, rgba(7,11,20,0) 100%);
}

/* Logo de Tru Iron encima de cada foto, abajo a la derecha (igual que en las tarjetas de
   unidades): no va metido en el archivo, se pone al mostrarla. */
.gs-marca{
  position:absolute; z-index:2; right:10px; bottom:10px; width:30%; min-width:56px; max-width:120px; height:auto;
  opacity:.6; pointer-events:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
}

/* Línea de progreso (arriba) y etiqueta. Ancho fijo (≈ el de un nombre de lugar típico). */
.gs-progreso{
  position:absolute; z-index:5; left:var(--gs-x); width:min(250px, calc(100% - 2 * var(--gs-x))); top:18px; height:2px;
  background:rgba(255,255,255,.22); border-radius:2px; overflow:hidden; pointer-events:none;
}
.gs-progreso-barra{ display:block; height:100%; background:#fff; transform:scaleX(0); transform-origin:left center; }
.gs-etiqueta{
  position:absolute; z-index:5; left:var(--gs-x); top:30px; margin:0; pointer-events:none;
  font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85);
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}

/* Lugar de la entrega: abajo a la izquierda, grande, alineado con el texto del encabezado. */
.gs-lugar{
  position:absolute; z-index:5; left:var(--gs-x); bottom:20px; margin:0; max-width:calc(100% - var(--gs-x) - 190px);
  display:flex; align-items:center; gap:10px; pointer-events:none;
  font-size:clamp(1.5rem,3.2vw,2.6rem); font-weight:800; letter-spacing:-.02em; line-height:1.05; color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6);
}
.gs-lugar-bloque{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.gs-lugar-etq{ font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; line-height:1; color:rgba(255,255,255,.85); }
.gs-lugar-etq[hidden]{ display:none; }
.gs-lugar svg{ width:.62em; height:.62em; fill:currentColor; flex:0 0 auto; opacity:.9; }
.gs-lugar-txt.gs-cambia{ animation:gs-entra .22s var(--gs-ease) both; }
@keyframes gs-entra{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* Contador y flechas (abajo a la derecha) */
.gs-controles{ position:absolute; z-index:5; right:var(--gs-x); bottom:22px; display:flex; align-items:center; gap:14px; }
.gs-contador{ font-size:.82rem; font-weight:600; letter-spacing:.06em; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums; }
.gs-contador b{ font-weight:800; color:#fff; }
.gs-flechas{ display:flex; gap:8px; }
.gs-flecha{
  width:38px; height:38px; display:grid; place-items:center; padding:0; cursor:pointer;
  border-radius:50%; border:1px solid rgba(255,255,255,.45); background:rgba(7,11,20,.35); color:#fff;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.gs-flecha:hover{ background:rgba(255,255,255,.18); border-color:#fff; }
.gs-flecha:active{ transform:scale(.94); }
.gs-flecha:focus-visible, .gs-escenario:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.gs-flecha svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

@media (max-width:700px){
  .gs-escenario{ height:clamp(304px,89.6vw,368px); }
  .gs-lugar{ max-width:calc(100% - var(--gs-x) - 120px); bottom:18px; }
  .gs-controles{ bottom:18px; gap:10px; }
  .gs-contador{ display:none; }
}

/* Sin JavaScript solo se ve la primera foto, al centro. */
.gs-escenario:not(.gs-listo) .gs-panel:first-of-type{ left:calc(50% - 136px); width:272px; }

@media (prefers-reduced-motion:reduce){
  .gs-panel, .gs-img{ transition:none; }
  .gs-lugar-txt.gs-cambia{ animation:none; }
  .gs-progreso{ display:none; }
}