/* Carrusel de casos: la técnica de «TiltedGridHero» (cada banner cortado en franjas verticales que
   se curvan con rotateY en un mismo espacio 3D) con la trayectoria cóncava y el globo en el eje.
   Tratamiento oscuro, con reflejo y brillo. La geometría y el movimiento los pone carrusel.js. */

.carrusel {
  --relleno: #1C1C20;          /* tono del fondo junto a la tarjeta: rellena las imágenes de otro formato */
  --vidrio: rgba(18, 18, 21, 0.55);
  --vidrio-borde: rgba(255, 255, 255, 0.14);
  position: relative; overflow: hidden;
  /* Proporción de la composición elegida (~1,9:1), sin pasar el alto de la pantalla. */
  height: clamp(520px, 52vw, calc(100svh - var(--nav-alto)));
  background: radial-gradient(70% 75% at 50% var(--halo, 26%), #3A3A42 0%, #232328 45%, #141417 100%);
  color: var(--paper);
}

/* Capa con perspectiva y fundido en los costados; adentro, el mundo 3D que comparten banners y globo. */
.carrusel__capa { position: absolute; inset: 0; pointer-events: none; transition: opacity 220ms ease; }
.carrusel__capa.cambiando { opacity: 0; }
.carrusel__mundo { position: absolute; inset: 0; transform-style: preserve-3d; }
.carrusel__tarjeta { position: absolute; transform-style: preserve-3d; }

/* Cada franja pinta su tajada de la imagen de la tarjeta: tamaño y corrimiento en variables de la
   tarjeta (--bw/--bh/--bx/--by) menos el corrimiento propio de la franja (--j). */
.f {
  position: absolute; top: 0;
  background-image: var(--img); background-repeat: no-repeat; background-origin: border-box;
  background-size: var(--bw) var(--bh); background-position: calc(var(--bx) - var(--j)) var(--by);
  background-color: var(--relleno);
  border-top: 1px solid rgba(255, 255, 255, 0.10); border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  backface-visibility: hidden;
  opacity: var(--op, 1);
  pointer-events: auto; cursor: pointer;
  transition: border-color 600ms ease;
}
.f.primera { border-left: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px 0 0 10px; }
.f.ultima { border-right: 1px solid rgba(255, 255, 255, 0.10); border-radius: 0 10px 10px 0; }
.f.dorso { background: #2E2E35; border-color: rgba(255, 255, 255, 0.08); }
/* Fundido entre imágenes de la tarjeta en foco: la siguiente entra encima, en la misma tajada. */
.f::after {
  content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; right: 0; border-radius: inherit;
  background: var(--relleno) var(--img2) no-repeat;
  background-size: var(--bw2) var(--bh2); background-position: calc(var(--bx2) - var(--j)) var(--by2);
  opacity: 0;
}
.carrusel__tarjeta.fundiendo .f::after { opacity: 1; transition: opacity 600ms ease; }
/* Brillo: reflejo de luz diagonal y continuo sobre toda la tarjeta. */
.f::before {
  content: ""; position: absolute; top: -1px; bottom: -1px; left: 0; right: 0; border-radius: inherit; z-index: 1;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.07) 26%, transparent 44%, transparent 78%, rgba(255, 255, 255, 0.10) 100%);
  background-size: var(--ancho) 100%; background-position: calc(0px - var(--j)) 0; background-repeat: no-repeat;
  transition: opacity 600ms ease;
}
.f.primera::before, .f.primera::after { left: -1px; }
.f.ultima::before, .f.ultima::after { right: -1px; }
.f.dorso::before, .f.dorso::after { display: none; }
/* Con una imagen del caso (no el banner) la tarjeta se funde con el fondo: sin brillo ni borde. */
.carrusel__tarjeta.contenida .f::before { opacity: 0; }
.carrusel__tarjeta.contenida .f { border-color: transparent; }

.carrusel__globo { position: absolute; pointer-events: auto; }
.carrusel__globo canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.carrusel__globo canvas.arrastrando { cursor: grabbing; }
.carrusel__globo .disco { position: absolute; inset: 7%; border-radius: 50%; background: var(--mist); }

/* Vidrio esmerilado: filtros, aviso del país y controles. */
.carrusel__filtros {
  position: absolute; top: var(--s-2); left: var(--s-2); right: var(--s-2); z-index: 3;
  display: flex; gap: 6px; justify-content: center; overflow-x: auto; scrollbar-width: none;
}
.carrusel__filtros::-webkit-scrollbar { display: none; }
.chip, .carrusel__pista, .carrusel__boton, .carrusel__ver {
  background: var(--vidrio); border: 1px solid var(--vidrio-borde); color: var(--paper);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.chip {
  flex: none; font: inherit; font-size: var(--fs-small); padding: 6px 12px; border-radius: 999px; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip small { font-size: var(--fs-micro); color: rgba(255, 255, 255, 0.55); margin-left: 2px; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); }
.chip[aria-pressed="true"] small { color: rgba(255, 255, 255, 0.8); }
.chip:disabled { opacity: 0.35; cursor: default; }
.chip:focus-visible, .carrusel__boton:focus-visible, .carrusel__ver:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.carrusel__pista {
  position: absolute; top: 64px; left: 50%; z-index: 2; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: baseline; white-space: nowrap;
  padding: 9px 18px; border-radius: 999px; font-size: 13px; pointer-events: none;
  transition: opacity 400ms ease;
}
.carrusel__pista b { font-weight: 600; }
.carrusel__pista span { color: rgba(255, 255, 255, 0.62); }
.carrusel__pista.oculto { opacity: 0; }

/* «Ver el caso» para teclado: invisible hasta que recibe el foco (la tarjeta se toca con el puntero). */
.carrusel__ver {
  position: absolute; left: 50%; bottom: 76px; z-index: 3; transform: translateX(-50%);
  padding: 9px 18px; border-radius: 999px; font-size: var(--fs-small); font-weight: 500; text-decoration: none;
  opacity: 0; pointer-events: none;
}
.carrusel__ver:focus-visible { opacity: 1; pointer-events: auto; }

.carrusel__controles {
  position: absolute; left: 50%; bottom: var(--s-2); z-index: 3; transform: translateX(-50%);
  display: flex; gap: 8px;
}
.carrusel__boton {
  width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center;
}
.carrusel__boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carrusel__play .play { fill: currentColor; stroke: none; display: none; }
.carrusel__play[aria-pressed="false"] .play { display: block; }
.carrusel__play[aria-pressed="false"] .pausa { display: none; }

.carrusel__aviso { padding-block: var(--s-6); }

@media (max-width: 720px) {
  .carrusel__filtros { justify-content: flex-start; }
}