/* Listas — titulares, frases y nombres en columnas. Estilos propios: solo dependen del sistema de diseño base. Cargado con la plantilla piloto. */
.cca-v2 .cca-v2__list { --cca-v2-list-line: rgb(0 0 0 / 20%); scroll-margin-top: 100px; overflow-wrap: anywhere; }
/* Nombres con etiqueta lateral: único bloque con relleno vertical, 20 px arriba y abajo. */
.cca-v2 .cca-v2__list--list_names_side { padding-block: 20px; }
.cca-v2 .cca-v2__list--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__list.cca-v2--dark { --cca-v2-list-line: rgb(255 255 255 / 30%); }
.cca-v2 .cca-v2__list-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 8px; }
.cca-v2 .cca-v2__list-grid > * { min-width: 0; }
.cca-v2 .cca-v2__list-label { grid-column: 1 / -1; line-height: 1.3; }
.cca-v2 .cca-v2__list-content { grid-column: 1 / -1; }
/* Mitad izquierda: etiqueta arriba y lista en las 6 primeras columnas. Mitad derecha: etiqueta a la izquierda y lista en las 6 últimas. */
.cca-v2 .cca-v2__list--left .cca-v2__list-content { grid-column: 1 / span 6; }
.cca-v2 .cca-v2__list--right .cca-v2__list-label { grid-column: 1 / span 6; grid-row: 1; }
.cca-v2 .cca-v2__list--right .cca-v2__list-content { grid-column: 7 / span 6; grid-row: 1; }
/* Titulares y nombres con etiqueta, mitad derecha: la etiqueta va arriba de la lista, las dos en la mitad derecha. */
.cca-v2 .cca-v2__list--right:is(.cca-v2__list--list_names_side, .cca-v2__list--list_headline) :is(.cca-v2__list-label, .cca-v2__list-content) { grid-column: 7 / span 6; }
.cca-v2 .cca-v2__list--right:is(.cca-v2__list--list_names_side, .cca-v2__list--list_headline) .cca-v2__list-content { grid-row: 2; }
/* Etiqueta lateral: la etiqueta y cada columna de nombres miden lo mismo. La grilla tiene una pista por columna más una para la etiqueta (ver abajo). */
.cca-v2 .cca-v2__list--side .cca-v2__list-label { grid-column: 1; grid-row: 1; }
.cca-v2 .cca-v2__list--side .cca-v2__list-content { grid-column: 2 / -1; grid-row: 1; }
@media (min-width: 768px) {
  .cca-v2 .cca-v2__list--side-cols-1 .cca-v2__list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cca-v2 .cca-v2__list--side-cols-2 .cca-v2__list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cca-v2 .cca-v2__list--side-cols-3 .cca-v2__list-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cca-v2 .cca-v2__list--side-cols-4 .cca-v2__list-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cca-v2 .cca-v2__list--side-cols-5 .cca-v2__list-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Hasta 1099px los nombres pasan a 3 columnas como máximo; la etiqueta se ajusta para seguir midiendo igual. */
@media (min-width: 768px) and (max-width: 1099px) {
  .cca-v2 :is(.cca-v2__list--side-cols-4, .cca-v2__list--side-cols-5) .cca-v2__list-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cca-v2 .cca-v2__list-title { margin: 0 0 40px; line-height: .7; }
/* Nombres en columnas y frases: interlineado .95 sin mover el título ni la lista; el medio interlineado extra (.125em) se compensa con los márgenes. */
.cca-v2 :is(.cca-v2__list--list_names, .cca-v2__list--list_text) .cca-v2__list-title { margin: -.125em 0 calc(40px - .125em); line-height: .95; }
.cca-v2 .cca-v2__list-items { margin: 0; padding: 0; list-style: none; }
.cca-v2 .cca-v2__list-item { margin: 0; }
/* Titulares y frases: una línea divisoria sobre cada ítem. */
.cca-v2 :is(.cca-v2__list--list_headline, .cca-v2__list--list_text) .cca-v2__list-item { border-top: 1px solid var(--cca-v2-list-line); }
.cca-v2 .cca-v2__list--list_headline .cca-v2__list-item { padding-block: 12px; line-height: .95; }
.cca-v2 .cca-v2__list--list_text .cca-v2__list-item { padding-block: 16px; }
/* Nombres: columnas de arriba hacia abajo, sin líneas. */
.cca-v2 .cca-v2__list-items--names { column-gap: 8px; }
.cca-v2 .cca-v2__list--list_names .cca-v2__list-items { padding-block: 20px; }
.cca-v2 .cca-v2__list-items--names .cca-v2__list-item { break-inside: avoid; font-weight: var(--cca-v2-weight-light); }
.cca-v2 .cca-v2__list-items--cols-1 { column-count: 1; }
.cca-v2 .cca-v2__list-items--cols-2 { column-count: 2; }
.cca-v2 .cca-v2__list-items--cols-3 { column-count: 3; }
.cca-v2 .cca-v2__list-items--cols-4 { column-count: 4; }
.cca-v2 .cca-v2__list-items--cols-5 { column-count: 5; }
@media (max-width: 1099px) {
  .cca-v2 .cca-v2__list-items--cols-4, .cca-v2 .cca-v2__list-items--cols-5 { column-count: 3; }
}
@media (max-width: 767px) {
  .cca-v2 .cca-v2__list-grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .cca-v2 .cca-v2__list :is(.cca-v2__list-label, .cca-v2__list-content) { grid-column: 1; grid-row: auto; }
  .cca-v2 .cca-v2__list--right:is(.cca-v2__list--list_names_side, .cca-v2__list--list_headline) :is(.cca-v2__list-label, .cca-v2__list-content) { grid-column: 1; grid-row: auto; }
  .cca-v2 .cca-v2__list-title { margin-bottom: 24px; }
  .cca-v2 :is(.cca-v2__list--list_names, .cca-v2__list--list_text) .cca-v2__list-title { margin-bottom: calc(24px - .125em); }
  .cca-v2 .cca-v2__list-items--names:is(.cca-v2__list-items--cols-3, .cca-v2__list-items--cols-4, .cca-v2__list-items--cols-5) { column-count: 2; }
  .cca-v2 .cca-v2__list--list_headline .cca-v2__list-item { padding-block: 8px; }
  .cca-v2 .cca-v2__list--list_text .cca-v2__list-item { padding-block: 12px; }
}
@media (max-width: 359px) {
  .cca-v2 .cca-v2__list-items--names:is(.cca-v2__list-items--cols-2, .cca-v2__list-items--cols-3, .cca-v2__list-items--cols-4, .cca-v2__list-items--cols-5) { column-count: 1; }
}
