/* ═══════════════════════════════════════════════════════════════
   CASE CAROUSEL — el marco baja con la página, la imagen se desliza
   dentro de él.

   Medidas tomadas de la referencia (captura de 1915 px de ancho):
     · tarjeta de 1430 px → el contenedor de 1440 centrado, el mismo
       que usan el header y el resto del sitio. NO va a sangre.
     · proporción 2.6:1, bastante apaisada
     · esquinas de ~26 px
     · el título abajo a la izquierda, enorme y en versalitas
     · el botón abajo a la derecha, píldora con contorno y un punto
   ═══════════════════════════════════════════════════════════════ */

.cc {
  /* relative para que la capa de grano se cuelgue de aquí, e isolate
     para que su mezcla se quede dentro de la sección y no intente
     mezclarse con el header, que va por encima. */
  position: relative;
  isolation: isolate;

  background: #0a0a0a;
  padding: calc(var(--nav-alto) + clamp(24px, 5vh, 76px)) var(--hd-pad)
           clamp(60px, 10vh, 140px);
}

/* El contenedor de siempre: las tarjetas se alinean con el logotipo del
   header en vez de irse a los filos. */
.cc-pista {
  max-width: var(--ancho-max);
  margin: 0 auto;
}


/* ── La tarjeta ────────────────────────────────────────────────────
   El marco no hace nada raro: baja con la página como cualquier otro
   bloque. Lo único que se mueve aparte es la imagen de dentro. */
.cc-caso {
  position: relative;
  aspect-ratio: 2.6 / 1;
  min-height: 300px;
  border-radius: clamp(16px, 1.8vw, 28px);
  overflow: hidden;          /* recorta la imagen que sobra por arriba y por abajo */
  background: #16181c;
  isolation: isolate;
}

/* Aire entre tarjeta y tarjeta. Generoso a propósito: cada una es una
   pieza suelta, no una fila de una lista, y el negro de en medio es lo
   que las separa como piezas. Va en vh para que en pantallas altas
   respire más y en portátiles no se coma el recorrido. */
.cc-caso + .cc-caso { margin-top: clamp(56px, 11vh, 160px); }


/* ── El medio ──────────────────────────────────────────────────────
   Aquí está el efecto. La imagen es MÁS ALTA que el marco, y lo que le
   sobra es todo su recorrido: mientras la tarjeta cruza la pantalla, la
   fotografía se desliza dentro de su propio marco de arriba abajo.

   El resultado es que la tarjeta parece una ventana y detrás pasa la
   fotografía. Y como el sobrante existe por los dos lados, nunca se ve
   un borde vacío.

   LOS DOS VALORES VAN ATADOS. --cc-alto es cuánto mide la imagen
   respecto al marco, y --cc-corre cuánto se desplaza, medido sobre su
   propia altura. El segundo sale del primero:

       corre = -(alto - 100) / alto * 100

   Con 150% de alto → -(50/150)*100 = -33.33%. Así el recorrido acaba
   justo cuando el borde inferior de la imagen llega al del marco, ni un
   píxel antes —quedaría movimiento sin usar— ni uno después —asomaría
   el fondo—.

   Subir --cc-alto hace el movimiento más fuerte, pero recorta más: a
   150% se ve dos tercios de la fotografía a la vez. Ahí está el
   equilibrio, y por eso los dos números viven aquí arriba juntos.

   --avance lo escribe el JavaScript: va de 0 —tarjeta asomando por
   abajo— a 1 —tarjeta saliendo por arriba—. */
.cc-medio {
  position: absolute; inset: 0;
  --cc-alto:  150%;
  --cc-corre: -33.33%;
}

/* <picture> desaparece de la maquetación y deja al <img> colgando
   directamente de .cc-medio. Sin esto habría dos cajas encajadas, cada
   una con su --cc-alto y su transform, y el recorrido saldría al doble
   —y encima recortando el doble—. */
.cc-medio picture { display: contents; }

.cc-medio img, .cc-video {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: var(--cc-alto);
  object-fit: cover;
  display: block;

  --avance: .5;
  /* En 0 se ve la parte de arriba de la fotografía, en 1 la de abajo. */
  transform: translate3d(0, calc(var(--avance) * var(--cc-corre)), 0);
  will-change: transform;
}

/* El vídeo entra por encima de la imagen cuando ya tiene fotogramas que
   mostrar; antes es transparente y se ve la imagen. Sin esto se cuela
   un negro al arrancar. */
.cc-video { opacity: 0; z-index: 1; transition: opacity .5s ease; }
.cc-video.esta-jugando { opacity: 1; }


/* ── El grano ──────────────────────────────────────────────────────
   Ruido en SVG embebido: pesa unos cientos de bytes y no pide nada al
   servidor.

   UNA SOLA CAPA para toda la sección, no una por tarjeta. Es lo que lo
   convierte en filtro y no en textura: el grano no pertenece a las
   fotografías, pertenece a la escena.

   background-attachment: fixed ancla el dibujo a la ventana y no a la
   página: el grano no viaja con el scroll, se queda quieto mientras por
   debajo pasan las tarjetas. Vive en el objetivo, no en lo filmado.

   DÓNDE SE VE. En los medios tonos de las fotografías. En el negro
   entre tarjetas no, y es correcto: overlay no toca las sombras. Un
   grano que se viera también sobre el negro no sería grano, sería una
   trama pegada por encima de todo.

   EL RUIDO. feTurbulence a secas devuelve ruido DE COLOR y con la
   opacidad también al azar; sobre una fotografía eso se lava y no se
   distingue nada. Por eso lleva dos pasos más:
     · feColorMatrix saturate 0 lo deja en gris. Sin esto son
       motitas de colores, que es ruido digital y no grano.
     · el segundo feColorMatrix sube el contraste del gris y fija la
       opacidad, para que cada partícula tenga un valor definido en vez
       de un velo aguado.

   EL TAMAÑO DE PARTÍCULA es lo que separa el grano de la estática. Una
   frecuencia alta da puntos de un píxel: eso es nieve de televisor. A
   0.42 y dibujado a tamaño real la partícula ronda los dos píxeles, que
   es lo que se lee como emulsión. */
.cc-grano {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: overlay;
  background-attachment: fixed;
  /* El parpadeo. Sin él esto es una trama impresa encima; con él es
     grano. El ruido de una película cambia en cada fotograma, y esa
     vibración es la mitad del efecto. */
  animation: cc-grano-vibra .72s steps(1, end) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeColorMatrix type='matrix' values='2 0 0 0 -0.5 0 2 0 0 -0.5 0 0 2 0 -0.5 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
}

/* No se redibuja el ruido en cada salto: se mueve de sitio, que es
   mucho más barato y a esta velocidad se ve igual. Los desplazamientos
   son deliberadamente irregulares y ninguno múltiplo de los 150px del
   mosaico; si lo fueran, el dibujo caería sobre sí mismo y el grano
   parecería quieto.

   Ocho saltos en .72s son unos 11 por segundo. Es la cadencia donde el
   ojo lo lee como grano vivo: más lento se ve el salto uno por uno, y
   más rápido se emborrona en un gris y además se paga en repintados. */
@keyframes cc-grano-vibra {
  0%     { background-position:   0px    0px; }
  12.5%  { background-position: -32px  -18px; }
  25%    { background-position:  25px  -41px; }
  37.5%  { background-position: -18px   31px; }
  50%    { background-position:  43px   12px; }
  62.5%  { background-position: -47px  -28px; }
  75%    { background-position:  12px   46px; }
  87.5%  { background-position: -26px   -7px; }
}

/* Más denso abajo, que es donde vive el texto, y se abre hacia arriba
   para no tapar la pieza. */
.cc-velo {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(0deg,  rgba(6,6,10,.84) 0%, rgba(6,6,10,.38) 40%, transparent 72%),
    linear-gradient(90deg, rgba(6,6,10,.52) 0%, transparent 56%);
}


/* ── El texto ──────────────────────────────────────────────────── */
.cc-texto {
  position: absolute; z-index: 3;
  left: 0; bottom: clamp(22px, 3.4vh, 40px);
  padding: 0 clamp(20px, 2.8vw, 44px);
  max-width: min(680px, 58%);
}

.cc-titulo {
  font-size: clamp(26px, 3.1vw, 52px); font-weight: 800;
  letter-spacing: -.035em; line-height: 1;
  text-transform: uppercase; color: #fff;
  margin-bottom: clamp(10px, 1.4vh, 16px);
}

.cc-resumen {
  font-size: clamp(13px, .95vw, 15px);
  line-height: 1.55; color: rgba(255,255,255,.84);
}


/* ── El botón ──────────────────────────────────────────────────── */
.cc-cta {
  position: absolute; z-index: 3;
  right: clamp(20px, 2.8vw, 44px);
  bottom: clamp(22px, 3.4vh, 40px);
  display: inline-flex; align-items: center; gap: 11px;
  height: 46px; padding: 0 24px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 99px;
  color: #fff; text-decoration: none; white-space: nowrap;
  font-size: clamp(11.5px, .88vw, 13px); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.cc-cta:hover { background: #fff; border-color: #fff; color: #0a0a0a; }

.cc-cta-punto {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.cc-cta:hover .cc-cta-punto { transform: scale(1.8); }


/* ── Tamaños ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* 2.6:1 en una pantalla estrecha deja una tira de 130 px de alto: el
     texto no cabe y la imagen no se ve. En vertical la tarjeta se pone
     de pie. */
  .cc-caso { aspect-ratio: 4 / 5; min-height: 380px; }
  /* Un fondo anclado a la ventana obliga a repintar en cada fotograma, y
     en móvil eso se paga en tirones. Ahí el grano viaja con la página:
     se pierde el matiz y se gana el scroll. */
  .cc-grano { background-attachment: scroll; }
  .cc-texto { max-width: 100%; bottom: clamp(80px, 12vh, 104px); }
  .cc-cta { left: clamp(20px, 2.8vw, 44px); right: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-cta:hover .cc-cta-punto { transform: none; }
  /* El grano se queda, el parpadeo no: es movimiento constante en toda
     la pantalla, justo lo que esta preferencia existe para evitar. */
  .cc-grano { animation: none; }
  /* La imagen se queda a ras del marco y no se desliza. */
  .cc-medio { --cc-alto: 100%; --cc-corre: 0%; }
  .cc-medio img, .cc-video { transform: none; will-change: auto; }
}