/* Carrusel simple — fila de slides (imagen o logo) que se desliza hacia los lados sobre la grilla de 12 columnas (gap de 8 px, padding lateral de 8 px del contenedor).
   Cada slide ocupa 4, 6, 8 o 9 columnas. Los de 4 y 6 miden 3:2; los de 8 y 9 toman la altura de las columnas que sobran (4 y 3), para que lo que asoma del siguiente se vea cuadrado.
   Medidas de referencia con el contenedor de 1424 px: 4 col = 469 × 313, 6 col = 708 × 472, 8 col = 947 × 469, 9 col = 1066 × 350.
   Sin JavaScript sigue deslizándose (scroll horizontal con snap); el paginador de puntos lo crea assets/js/cca-v2-carousel.js. Estilos propios: solo dependen del sistema de diseño base. */
.cca-v2 .cca-v2__carousel { scroll-margin-top: 100px; }
.cca-v2 .cca-v2__carousel--gray { --cca-v2-surface: var(--cca-v2-gray-200); --cca-v2-ink: #000; color: var(--cca-v2-ink); background: var(--cca-v2-surface); }
.cca-v2 .cca-v2__carousel-viewport { --cols: 6; --gap: 8px; display: flex; flex-direction: column; gap: 16px; } /* 16 px entre los slides y el paginador */
.cca-v2 .cca-v2__carousel--c4 { --cols: 4; }
.cca-v2 .cca-v2__carousel--c6 { --cols: 6; }
.cca-v2 .cca-v2__carousel--c8 { --cols: 8; }
.cca-v2 .cca-v2__carousel--c9 { --cols: 9; }
/* 8 columnas: el slide es tan alto como 4 columnas (469 px), así lo que asoma del siguiente (4 columnas de ancho) se ve cuadrado: 469 × 469. */
.cca-v2 .cca-v2__carousel--c8 .cca-v2__carousel-media { aspect-ratio: 946.67 / 469.33; }
/* 9 columnas: el slide es tan alto como 3 columnas (350 px), así lo que asoma del siguiente (3 columnas de ancho) se ve cuadrado: 350 × 350. */
.cca-v2 .cca-v2__carousel--c9 .cca-v2__carousel-media { aspect-ratio: 1066 / 350; }
.cca-v2 .cca-v2__carousel-track { display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; overflow-x: auto; border-radius: var(--cca-v2-radius); scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
/* El borde de la ventana tiene el mismo radio (6 px) que los slides: así lo que asoma del siguiente también queda redondeado a la derecha. */
.cca-v2 .cca-v2__carousel-track::-webkit-scrollbar { display: none; }
.cca-v2 .cca-v2__carousel-track:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
/* Un slide mide lo que miden --cols columnas de la grilla de 12: (ancho − 11 gaps) / 12 por columna, más los gaps de entre ellas. */
.cca-v2 .cca-v2__carousel-slide { flex: 0 0 calc((100% - 11 * var(--gap)) / 12 * var(--cols) + (var(--cols) - 1) * var(--gap)); min-width: 0; margin: 0; scroll-snap-align: start; }
.cca-v2 .cca-v2__carousel-media { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--cca-v2-radius); background: var(--cca-v2-gray-400); }
.cca-v2 .cca-v2__carousel-media { position: relative; }
.cca-v2 :is(.cca-v2__carousel-image, .cca-v2__carousel-video) { display: block; width: 100%; height: 100%; object-fit: cover; }
.cca-v2 .cca-v2__carousel-video { background: #000; }
/* Logo: se ve entero, centrado, sobre un fondo claro (blanco si el bloque ya es gris). */
.cca-v2 .cca-v2__carousel-slide--logo .cca-v2__carousel-media { display: flex; justify-content: center; align-items: center; background: var(--cca-v2-gray-200); }
.cca-v2 .cca-v2__carousel--gray .cca-v2__carousel-slide--logo .cca-v2__carousel-media { background: var(--cca-v2-white); }
.cca-v2 .cca-v2__carousel-slide--logo .cca-v2__carousel-image { width: 60%; height: 60%; object-fit: contain; }
.cca-v2 .cca-v2__carousel-slide--logo .cca-v2__carousel-link { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; }
/* Imagen con enlace: el enlace ocupa todo el recuadro y la imagen hace un zoom suave al pasar el mouse (igual que las tarjetas de la home). */
.cca-v2 .cca-v2__carousel-link { display: block; width: 100%; height: 100%; color: inherit; }
.cca-v2 .cca-v2__carousel-link:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.cca-v2 .cca-v2__carousel-slide:not(.cca-v2__carousel-slide--logo) .cca-v2__carousel-link :is(.cca-v2__carousel-image, .cca-v2__carousel-video) { transition: transform 300ms ease; }
.cca-v2 .cca-v2__carousel-slide:not(.cca-v2__carousel-slide--logo) .cca-v2__carousel-link:hover :is(.cca-v2__carousel-image, .cca-v2__carousel-video) { transform: scale(1.025); }
/* Paginador: un punto por posición, con 16 px entre ellos. Los puntos miden 8 × 8 px y el activo es una píldora de 30 × 8 px. El área de clic es mayor que el dibujo (8 px más por cada lado, 24 px de alto). */
.cca-v2 .cca-v2__carousel-dots { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; } /* 16 px debajo de los puntos */
.cca-v2 .cca-v2__carousel-dots[hidden] { display: none; }
.cca-v2 .cca-v2__carousel-dot { position: relative; display: block; width: 8px; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: currentColor; color: inherit; cursor: pointer; appearance: none; transition: width 200ms ease; }
.cca-v2 .cca-v2__carousel-dot::after { content: ""; position: absolute; inset: -8px; }
.cca-v2 .cca-v2__carousel-dot[aria-current="true"] { width: 30px; }
.cca-v2 .cca-v2__carousel-dot:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .cca-v2 .cca-v2__carousel-slide .cca-v2__carousel-link:hover :is(.cca-v2__carousel-image, .cca-v2__carousel-video) { transform: none; }
  .cca-v2 .cca-v2__carousel-dot { transition: none; }
}
/* Móvil: cada slide ocupa casi todo el ancho para que asome el siguiente. */
@media (max-width: 767px) {
  .cca-v2 .cca-v2__carousel-slide { flex-basis: 85%; }
  .cca-v2 :is(.cca-v2__carousel--c8, .cca-v2__carousel--c9) .cca-v2__carousel-media { aspect-ratio: 3 / 2; }
}