/* Contenido simple — imagen o video sin texto, hasta dos piezas por bloque sobre la grilla de 12 columnas (gap de 8 px, padding lateral de 8 px del contenedor).
   Medidas de referencia con el contenedor de 1424 px: 12 col = 1424 × 708, 8 col = 948 × 708, 3 col = 350 × 350, 2 col = 236 × 236, 1 col = 111 × 111. Estilos propios: solo dependen del sistema de diseño base. */
.cca-v2 .cca-v2__simple { scroll-margin-top: 100px; }
.cca-v2 .cca-v2__simple--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__simple-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: start; }
/* La primera pieza va al inicio de la fila y la segunda al final. Si juntas pasan de 12 columnas, la segunda baja a la fila siguiente. */
.cca-v2 .cca-v2__simple-piece { --span: 12; grid-column: 1 / span var(--span); min-width: 0; margin: 0; }
.cca-v2 .cca-v2__simple-piece:nth-child(2) { grid-column: calc(13 - var(--span)) / span var(--span); }
.cca-v2 .cca-v2__simple-piece--s12 { --span: 12; }
.cca-v2 .cca-v2__simple-piece--s8 { --span: 8; }
.cca-v2 .cca-v2__simple-piece--s6 { --span: 6; }
.cca-v2 .cca-v2__simple-piece--s4 { --span: 4; }
.cca-v2 .cca-v2__simple-piece--s3 { --span: 3; }
.cca-v2 .cca-v2__simple-piece--s2 { --span: 2; }
.cca-v2 .cca-v2__simple-piece--s1 { --span: 1; }
.cca-v2 .cca-v2__simple-media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--cca-v2-radius); background: var(--cca-v2-gray-400); }
.cca-v2 .cca-v2__simple-piece--s12 .cca-v2__simple-media { aspect-ratio: 1424 / 708; }
.cca-v2 .cca-v2__simple-piece--s8 .cca-v2__simple-media { aspect-ratio: 948 / 708; }
/* 6 columnas: cuadrada (708 × 708) o, con la proporción elegida, 3:2 (708 × 472). */
.cca-v2 .cca-v2__simple-piece--s6.cca-v2__simple-piece--r32 .cca-v2__simple-media { aspect-ratio: 3 / 2; }
/* Un video de 12, 8 o 6 columnas es 16:9 (1424 × 801, 948 × 533 y 708 × 398), la proporción del reproductor. */
.cca-v2 :is(.cca-v2__simple-piece--s12, .cca-v2__simple-piece--s8, .cca-v2__simple-piece--s6).cca-v2__simple-piece--video .cca-v2__simple-media { aspect-ratio: 16 / 9; }
.cca-v2 .cca-v2__simple-image, .cca-v2 .cca-v2__simple-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cca-v2 .cca-v2__simple-video { background: #000; }
/* Video con enlace: un botón redondo con un icono de enlace, arriba a la derecha (círculo negro translúcido de 24 px con borde blanco, icono de 16 px). */
.cca-v2 .cca-v2__simple-open { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid #fff; border-radius: 50%; background: #00000033; color: #fff; }
.cca-v2 .cca-v2__simple-open { transition: background-color 150ms ease, color 150ms ease; }
/* Hover: los colores se invierten (círculo blanco, icono negro). */
@media (hover: hover) { .cca-v2 .cca-v2__simple-open:hover { background: #fff; color: #000; } }
.cca-v2 .cca-v2__simple-open:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cca-v2 .cca-v2__simple-open { transition: none; } }
.cca-v2 .cca-v2__simple-open svg { width: 16px; height: 16px; }
/* Imagen con enlace: el enlace ocupa todo el recuadro. */
.cca-v2 .cca-v2__simple-link { display: block; width: 100%; height: 100%; color: inherit; }
.cca-v2 .cca-v2__simple-link:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
/* Zoom suave al pasar el mouse, solo en las imágenes con enlace (avisa que son clicables): mismo efecto y valores que las tarjetas de la home. */
.cca-v2 .cca-v2__simple-link .cca-v2__simple-image { transition: transform 300ms ease; }
.cca-v2 .cca-v2__simple-link:hover .cca-v2__simple-image { transform: scale(1.025); }
/* With no JS, keep native video controls and a normal destination link below the frame. */
.cca-v2 .cca-v2__simple-video-link { display: block; padding-block: 12px; color: inherit; text-underline-offset: 3px; }
.cca-v2 [data-video-link-ready] .cca-v2__simple-video-frame { position: relative; }
.cca-v2 [data-video-link-ready] .cca-v2__simple-video-link { position: absolute; inset: 0; z-index: 1; padding: 0; border-radius: var(--cca-v2-radius); }
.cca-v2 [data-video-link-ready] .cca-v2__simple-video-link-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cca-v2 .cca-v2__simple-video-link:focus-visible { outline: 3px solid #fff; outline-offset: -4px; box-shadow: inset 0 0 0 7px #000; }
.cca-v2 .cca-v2__simple-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid currentColor; border-radius: 0 0 var(--cca-v2-radius) var(--cca-v2-radius); color: var(--cca-v2-ink); background: var(--cca-v2-surface); }
.cca-v2 .cca-v2__simple-control { flex: 1 1 96px; min-width: 0; padding-inline: 8px; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.cca-v2 .cca-v2__simple-progress { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; font-family: var(--cca-v2-font-mono); font-size: 12px; }
.cca-v2 .cca-v2__simple-progress input { flex: 1 1 100px; min-width: 44px; max-width: 100%; min-height: 44px; margin: 0; accent-color: currentColor; }
.cca-v2 .cca-v2__simple-status { flex: 1 0 100%; }
.cca-v2 .cca-v2__simple-status:empty, .cca-v2 :is(.cca-v2__simple-controls, .cca-v2__simple-control)[hidden] { display: none; }
.cca-v2 .cca-v2__simple-controls :is(button, input):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cca-v2 .cca-v2__simple-piece:fullscreen { display: flex; flex-direction: column; width: 100%; height: 100%; background: #000; }
.cca-v2 .cca-v2__simple-piece:fullscreen .cca-v2__simple-video-frame { flex: 1; min-height: 0; }
.cca-v2 .cca-v2__simple-piece:fullscreen .cca-v2__simple-media { height: 100%; aspect-ratio: auto; border-radius: 0; }
.cca-v2 .cca-v2__simple-piece:fullscreen .cca-v2__simple-video { object-fit: contain; }
.cca-v2 .cca-v2__simple-piece:fullscreen .cca-v2__simple-controls { flex: none; }
@media (prefers-reduced-motion: reduce) { .cca-v2 .cca-v2__simple-link:hover .cca-v2__simple-image { transform: none; } }
/* Móvil: 12, 8 y 6 columnas ocupan todo el ancho; las piezas chicas se ensanchan para no quedar diminutas (3 → la mitad, 2 → un tercio, 1 → un cuarto). */
@media (max-width: 767px) {
  .cca-v2 :is(.cca-v2__simple-piece--s8, .cca-v2__simple-piece--s6, .cca-v2__simple-piece--s4) { --span: 12; }
  .cca-v2 .cca-v2__simple-piece--s3 { --span: 6; }
  .cca-v2 .cca-v2__simple-piece--s2 { --span: 4; }
  .cca-v2 .cca-v2__simple-piece--s1 { --span: 3; }
}