/* ═══════════════════════════════════════════════════════════════
   SHOWCASE SLIDER

   Medidas tomadas de la referencia (captura de 1916 px de ancho):
     · tarjeta 490 × 305  →  16:10, un 25.6% del ancho de ventana
     · hueco entre tarjetas 30 px
     · las tarjetas sangran por los dos lados: se ven trozos de la
       anterior y la siguiente, que es lo que anuncia que hay más
     · el nombre de la obra centrada, debajo y en el acento
   ═══════════════════════════════════════════════════════════════ */

.ss {
  background: #fff;
  padding: calc(var(--nav-alto) + clamp(20px, 3vh, 44px)) 0 clamp(50px, 8vh, 100px);
}

/* ── El carrusel ───────────────────────────────────────────────── */
.ss-carrusel {
  position: relative;
  overflow: hidden;
  cursor: grab;
  /* Sin esto, arrastrar sobre las tarjetas selecciona texto e imágenes
     y el gesto se convierte en un borrón azul. */
  user-select: none; -webkit-user-select: none;
}
.ss-carrusel.esta-arrastrando { cursor: grabbing; }

.ss-pista {
  display: flex;
  gap: clamp(14px, 1.6vw, 30px);
  width: max-content;   /* la pista es más ancha que la ventana: los
                           clones del bucle no deben comprimirse */
  /* El desplazamiento lo escribe el JavaScript. will-change lo manda a
     su propia capa: son varias imágenes moviéndose a la vez. */
  will-change: transform;
  /* El mini alejamiento del scroll. Lo escribe el JavaScript según la
     velocidad y por defecto es 1, o sea sin efecto. */
  --zoom: 1;
}

/* El zoom va en la TARJETA y no en la pista: escalando la pista se
   escalarían también los huecos entre tarjetas, y al frenar se vería
   el conjunto respirar en vez de las fotos alejarse.

   Sin transition: el valor ya viene suavizado desde el JavaScript
   fotograma a fotograma, y una transición encima lo dejaría gomoso. */
.ss-obra {
  flex: none;
  width: clamp(230px, 25.6vw, 520px);
  text-decoration: none;
  display: block;
}

/* Todas las fotos se ven IGUAL de vivas. Llegué a apagar las que no
   estaban centradas —al 55%— y no es lo que hace la referencia: allí
   las tarjetas están todas encendidas y lo único que distingue a la
   del centro es que aparece su rótulo debajo. Apagarlas convertía el
   carrusel en una fila de cosas desactivadas. */
.ss-obra-marco {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: clamp(10px, 1vw, 16px);
  overflow: hidden;
  background: #eceded;
  /* El mini alejamiento del scroll. Sin transition: el valor ya viene
     suavizado desde el JavaScript fotograma a fotograma, y una
     transición encima lo dejaría gomoso. */
  transform: scale(var(--zoom));
  transform-origin: center;
}

.ss-obra-marco picture, .ss-obra-marco img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;   /* el arrastre lo gestiona el contenedor */
}

/* El rótulo cuelga de su propia tarjeta y aparece al pasar el puntero
   POR ELLA. No depende de cuál esté centrada: el scroll solo mueve.

   Es CSS puro, sin JavaScript de por medio: la tarjeta ya sabe cuándo
   la están señalando. */
.ss-obra-rot {
  display: flex; align-items: center; gap: 9px;
  margin-top: clamp(14px, 2vh, 22px);
  color: var(--acento, #ff7a1a);
  font-size: clamp(13px, 1.05vw, 16px); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.ss-obra:hover .ss-obra-rot,
.ss-obra:focus-visible .ss-obra-rot { opacity: 1; transform: none; }
.ss-obra-rot svg {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.ss-obra:hover .ss-obra-rot svg { transform: translateX(4px); }

/* En pantalla táctil no hay puntero que pasar, así que los rótulos
   se quedan todos visibles: si no, los nombres serían inalcanzables. */
@media (hover: none) {
  .ss-obra-rot { opacity: 1; transform: none; }
}

/* El aviso va FUERA de la pista: dentro se movería con ella. */
.ss-aviso {
  /* Centrado sobre el MARCO, no sobre el alto total: el carrusel
     ahora incluye el rótulo, y con top:50% el aviso caería bajo la
     foto en vez de encima de ella. */
  position: absolute; top: 0; left: 50%; margin-top: 14.5%;
  transform: translateX(-50%);
  padding: 9px 18px; border-radius: 99px;
  background: rgba(20,22,28,.62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font-size: 13.5px; letter-spacing: -.01em;
  pointer-events: none;
  transition: opacity .4s ease;
}
/* Se retira en cuanto queda claro que se puede mover. */
.ss-carrusel.ya-movido .ss-aviso { opacity: 0; }

/* ── El pie ────────────────────────────────────────────────────── */
.ss-pie {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 90px);
  align-items: end;
  max-width: var(--ancho-max); margin: 0 auto;
  padding: clamp(60px, 10vh, 130px) var(--hd-pad) 0;
}

.ss-pie-datos {
  display: grid; grid-template-columns: auto 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.ss-pie-rotulo {
  font-size: 13.5px; color: #8b909a;
  margin-bottom: 16px;
}
.ss-redes { display: flex; gap: 9px; }
.ss-red {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #f0f0f2;
  transition: background .22s ease;
}
.ss-red:hover { background: #e2e2e6; }
.ss-red svg { width: 15px; height: 15px; fill: #14161c; }

.ss-pie-lugar { font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; color: #2c313b; }
.ss-pie-lugar span { display: block; }

/* ── La declaración ────────────────────────────────────────────── */
.ss-marca {
  font-size: clamp(16px, 1.4vw, 22px); font-weight: 600;
  letter-spacing: -.02em; color: #14161c;
  margin-bottom: clamp(14px, 2vh, 26px);
}
.ss-frase {
  font-size: clamp(30px, 3.4vw, 62px); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.04;
  text-transform: uppercase; color: #14161c;
  margin-bottom: clamp(16px, 2.2vh, 28px);
}
/* Cada frase en su renglón: el corte está elegido, no lo decide el
   ancho de la ventana. */
.ss-frase span { display: block; }

.ss-sub {
  font-size: clamp(15px, 1.25vw, 22px);
  line-height: 1.4; letter-spacing: -.015em; color: #2c313b;
  margin-bottom: clamp(16px, 2.2vh, 26px);
}

.ss-cta {
  position: relative;
  display: inline-block;
  font-size: clamp(14px, 1.1vw, 18px);
  color: var(--acento, #ff7a1a); text-decoration: none;
  padding-bottom: 3px;
}
/* Subrayado que se retira desde la izquierda al acercarse, como los
   botones del hero: el mismo gesto en todo el sitio. */
.ss-cta::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform-origin: left;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.ss-cta:hover::after { transform: scaleX(0); transform-origin: right; }

@media (max-width: 900px) {
  .ss-pie { grid-template-columns: 1fr; gap: clamp(36px, 6vh, 60px); align-items: start; }
  /* La declaración primero: es lo que se viene a leer. */
  .ss-pie-decir { order: -1; }
}
@media (max-width: 560px) {
  .ss-pie-datos { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin alejamiento. */
  .ss-obra-marco { transform: none; }
  .ss-obra-rot { opacity: 1; transform: none; }
  .ss-aviso { display: none; }
}