/* Grillas de contenidos — tarjetas (con acordeón opcional) y acordeón por períodos. Estilos propios: solo dependen del sistema de diseño base. */
.cca-v2 .cca-v2__cgrid {
	--cca-v2-grid-line: rgb(0 0 0 / 20%);
	scroll-margin-top: 100px;
	overflow-wrap: anywhere;
}
.cca-v2 .cca-v2__cgrid--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__cgrid.cca-v2--dark {
	--cca-v2-grid-line: rgb(255 255 255 / 30%);
}
.cca-v2 .cca-v2__cgrid-label {
	margin: 0 0 24px;
	line-height: 1.3;
}
/* Tarjetas: 8 px de padding arriba y abajo del componente. */
.cca-v2 .cca-v2__cgrid--cards {
	padding-block: 8px;
}

/* Tarjetas */
.cca-v2 .cca-v2__cgrid-items {
	display: grid;
	gap: 8px;
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cca-v2 .cca-v2__cgrid--cols-4 .cca-v2__cgrid-items {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cca-v2 .cca-v2__cgrid--cols-3 .cca-v2__cgrid-items {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cca-v2 .cca-v2__cgrid--cols-2 .cca-v2__cgrid-items {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cca-v2 .cca-v2__cgrid-card {
	min-width: 0;
}
.cca-v2 .cca-v2__cgrid-summary {
	display: block;
	margin: 0;
	list-style: none;
}
.cca-v2 summary.cca-v2__cgrid-summary {
	cursor: pointer;
}
.cca-v2 .cca-v2__cgrid-summary::-webkit-details-marker {
	display: none;
}
.cca-v2 .cca-v2__cgrid-summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}
.cca-v2 .cca-v2__cgrid-media {
	display: block;
}
.cca-v2 .cca-v2__cgrid-image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
.cca-v2 .cca-v2__cgrid--cards .cca-v2__cgrid-image {
	border-radius: var(--cca-v2-radius);
}
.cca-v2 .cca-v2__cgrid--cards .cca-v2__cgrid-media {
	aspect-ratio: 1 / 1;
	background: var(--cca-v2-gray-400);
}
.cca-v2 .cca-v2__cgrid-name,
.cca-v2 .cca-v2__cgrid-year {
	display: block;
	font-family: var(--cca-v2-font-text);
	font-size: 16px;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: 0;
}
.cca-v2 .cca-v2__cgrid-name {
	margin-top: 12px;
	font-weight: 400;
}
.cca-v2 .cca-v2__cgrid-year {
	margin-top: 4px;
	color: var(--cca-v2-gray-800);
	font-weight: 300;
}
/* Tarjeta abierta: el contenido del autor reemplaza a la foto (mismo cuadrado, fondo negro); el nombre y el año quedan debajo.
   La transición es un fundido: el cuadrado negro aparece sobre la foto y el texto entra desde abajo con un pequeño retraso.
   Las demás tarjetas se atenúan. El panel vive dentro del summary, así que un clic en cualquier parte de la tarjeta la abre o la cierra.
   En fondo negro se invierte: el cuadrado es blanco. */
.cca-v2 .cca-v2__cgrid-card .cca-v2__cgrid-summary {
	position: relative;
}
.cca-v2 .cca-v2__cgrid-media {
	overflow: hidden;
	border-radius: var(--cca-v2-radius);
}
.cca-v2 .cca-v2__cgrid-image {
	transition: transform 300ms ease;
}
.cca-v2 summary.cca-v2__cgrid-summary:hover .cca-v2__cgrid-image {
	transform: scale(1.025);
}
.cca-v2 .cca-v2__cgrid-panel {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 8px;
	overflow: auto;
	border-radius: var(--cca-v2-radius);
	background: #000;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.4s ease,
		visibility 0s linear 0.4s;
}
.cca-v2 .cca-v2__cgrid-details[open] .cca-v2__cgrid-panel {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}
.cca-v2 .cca-v2__cgrid-panel > span {
	display: block;
	margin: 0 0 12px;
	font-family: var(--cca-v2-font-text);
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0;
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}
.cca-v2 .cca-v2__cgrid-details[open] .cca-v2__cgrid-panel > span {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.5s ease 0.15s,
		transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s;
}
.cca-v2 .cca-v2__cgrid-details[open] .cca-v2__cgrid-panel > span + span {
	transition-delay: 0.25s;
}
.cca-v2 .cca-v2__cgrid-panel > span:last-child {
	margin-bottom: 0;
}
.cca-v2 .cca-v2__cgrid-subtitle {
	font-weight: 300;
}
.cca-v2 .cca-v2__cgrid-text {
	color: rgb(255 255 255 / 70%);
	font-weight: 300;
}
.cca-v2 .cca-v2__cgrid-card {
	transition: opacity 0.45s ease;
}
.cca-v2
	.cca-v2__cgrid-items:has(details[open])
	.cca-v2__cgrid-card:not(:has(details[open])) {
	opacity: 0.4;
}
.cca-v2
	.cca-v2__cgrid.cca-v2--dark
	.cca-v2__cgrid-details[open]
	.cca-v2__cgrid-panel,
.cca-v2 .cca-v2__cgrid.cca-v2--dark .cca-v2__cgrid-panel {
	background: #fff;
	color: #000;
}
.cca-v2 .cca-v2__cgrid.cca-v2--dark .cca-v2__cgrid-text {
	color: rgb(0 0 0 / 60%);
}
@media (prefers-reduced-motion: reduce) {
	.cca-v2
		:is(
			.cca-v2__cgrid-card,
			.cca-v2__cgrid-image,
			.cca-v2__cgrid-panel,
			.cca-v2__cgrid-panel > span
		) {
		transition: none !important;
	}
	.cca-v2 summary.cca-v2__cgrid-summary:hover .cca-v2__cgrid-image {
		transform: none;
	}
}

/* Acordeón por períodos — alineado a la grilla de 12 columnas (gap de 8 px): la foto va en la columna 1, el texto desde la 3 y el ícono en la 12.
   El contenido desplegado usa las mismas columnas: cargos en la 3-6 (cargo en 2 columnas, nombre en 2) y grupos desde la 7, justo a la mitad (título en 1 columna, nombres en las 4 siguientes). La columna 12 queda libre para el + / -. */
.cca-v2 .cca-v2__cgrid-rows {
	border-top: 1px solid var(--cca-v2-grid-line);
}
.cca-v2 .cca-v2__cgrid-button {
	margin-block: 20px;
}
/* Con boton abajo: el ultimo item no lleva linea separadora antes del boton. */
.cca-v2 .cca-v2__cgrid-rows--with-button .cca-v2__cgrid-row:last-child {
	border-bottom: 0;
}
.cca-v2 .cca-v2__cgrid-row {
	border-bottom: 1px solid var(--cca-v2-grid-line);
}
.cca-v2 .cca-v2__cgrid-row-summary {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 8px;
	align-items: start;
	padding: 20px 0 32px;
	margin: 0;
	list-style: none;
}
.cca-v2 summary.cca-v2__cgrid-row-summary {
	cursor: pointer;
}
/* Filas con foto: 20 px de padding arriba y abajo de la foto. */
.cca-v2 .cca-v2__cgrid-row-summary--photo {
	padding-block: 20px;
}
.cca-v2 .cca-v2__cgrid-row-summary::-webkit-details-marker {
	display: none;
}
.cca-v2 .cca-v2__cgrid-row-summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}
.cca-v2 .cca-v2__cgrid-row-head {
	grid-column: 3 / span 9;
	grid-row: 1;
	display: block;
	min-width: 0;
}
/* Foto al principio de cada fila: 110 x 110 px (una columna de la grilla). */
.cca-v2 .cca-v2__cgrid-thumb {
	grid-column: 1;
	grid-row: 1;
	display: block;
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: 3px;
}
.cca-v2 .cca-v2__cgrid-period {
	display: block;
	font-family: var(--cca-v2-font-headline);
	font-size: 40px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.cca-v2 .cca-v2__cgrid-row-head .cca-v2__cgrid-person {
	display: block;
	margin-top: 12px;
	font-family: var(--cca-v2-font-text);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
}
.cca-v2 .cca-v2__cgrid-icon {
	grid-column: 12;
	grid-row: 1;
	justify-self: end;
	margin-right: 20px;
	width: 1em;
	font-family: var(--cca-v2-font-headline);
	font-size: 40px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-align: center;
}
.cca-v2 .cca-v2__cgrid-icon::before {
	content: "+";
}
.cca-v2 .cca-v2__cgrid-row[open] .cca-v2__cgrid-icon::before {
	content: "-";
}
.cca-v2 .cca-v2__cgrid-row-panel {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 8px;
	row-gap: 24px;
	padding-bottom: 32px;
	font-size: 16px;
	line-height: 1.4;
}
.cca-v2 .cca-v2__cgrid-row-panel > * {
	min-width: 0;
}
/* align-content: start: si la otra lista es mas alta (por ejemplo cuando los nombres de los grupos pasan a 4 lineas), las filas no se estiran. */
.cca-v2 .cca-v2__cgrid-roles,
.cca-v2 .cca-v2__cgrid-groups {
	display: grid;
	grid-template-columns: subgrid;
	align-content: start;
	margin: 0;
}
.cca-v2 .cca-v2__cgrid-roles {
	grid-column: 3 / span 4;
	row-gap: 8px;
}
.cca-v2 .cca-v2__cgrid-groups {
	grid-column: 7 / span 5;
	row-gap: 16px;
}
.cca-v2 :is(.cca-v2__cgrid-role, .cca-v2__cgrid-group) {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
}
.cca-v2 .cca-v2__cgrid-roles dt {
	grid-column: span 2;
}
.cca-v2 .cca-v2__cgrid-roles dd {
	grid-column: span 2;
}
.cca-v2 .cca-v2__cgrid-groups dt {
	grid-column: span 1;
	font-weight: var(--cca-v2-weight-medium);
}
.cca-v2 .cca-v2__cgrid-groups dd {
	grid-column: span 4;
}
/* Cargos: el cargo en Stack Sans Text 400 y el nombre en Light 300, ambos de 16 px / 140 %, con 4 px de separación vertical entre cargos. */
.cca-v2 .cca-v2__cgrid-roles :is(dt, dd) {
	font-family: var(--cca-v2-font-text);
	font-size: 16px;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: 0;
}
.cca-v2 .cca-v2__cgrid-roles dt {
	font-weight: 400;
}
.cca-v2 .cca-v2__cgrid-roles dd,
.cca-v2 .cca-v2__cgrid-groups dd {
	margin: 0;
	color: var(--cca-v2-gray-800);
	font-weight: 300;
}
.cca-v2 .cca-v2__cgrid-groups dd p {
	margin: 0 0 8px;
}
.cca-v2 .cca-v2__cgrid-groups dd p:last-child {
	margin-bottom: 0;
}

/* Animación al abrir y cerrar un período: la altura se despliega con suavidad y el contenido entra con un fundido y un leve movimiento.
   Mejora progresiva: usa ::details-content e interpolate-size, que hoy están en los navegadores modernos; en los demás la fila se abre al instante, como siempre. */
.cca-v2 .cca-v2__cgrid-row {
	interpolate-size: allow-keywords;
}
.cca-v2 .cca-v2__cgrid-row-panel {
	opacity: 0;
	transform: translateY(-8px);
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}
.cca-v2 .cca-v2__cgrid-row[open] .cca-v2__cgrid-row-panel {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.5s ease 0.12s,
		transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s;
}
@starting-style {
	.cca-v2 .cca-v2__cgrid-row[open] .cca-v2__cgrid-row-panel {
		opacity: 0;
		transform: translateY(-8px);
	}
}
@supports selector(::details-content) {
	.cca-v2 .cca-v2__cgrid-row::details-content {
		height: 0;
		overflow: clip;
		transition:
			height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
			content-visibility 0.5s allow-discrete;
	}
	.cca-v2 .cca-v2__cgrid-row[open]::details-content {
		height: auto;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cca-v2 .cca-v2__cgrid-row::details-content {
		transition: none !important;
	}
	.cca-v2 .cca-v2__cgrid-row-panel,
	.cca-v2 .cca-v2__cgrid-row[open] .cca-v2__cgrid-row-panel {
		transition: none !important;
	}
	.cca-v2 .cca-v2__cgrid-row-panel {
		opacity: 1;
		transform: none;
	}
}


@media (max-width: 1099px) {
	.cca-v2
		:is(.cca-v2__cgrid--cols-4, .cca-v2__cgrid--cols-3)
		.cca-v2__cgrid-items {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.cca-v2 :is(.cca-v2__cgrid-period, .cca-v2__cgrid-icon) {
		font-size: var(--cca-v2-type-subheadline);
	}
	.cca-v2 :is(.cca-v2__cgrid-roles, .cca-v2__cgrid-groups) {
		grid-column: 3 / span 9;
	}
	.cca-v2 .cca-v2__cgrid-roles dt {
		grid-column: span 3;
	}
	.cca-v2 .cca-v2__cgrid-roles dd {
		grid-column: span 6;
	}
	.cca-v2 .cca-v2__cgrid-groups dt {
		grid-column: span 2;
	}
	.cca-v2 .cca-v2__cgrid-groups dd {
		grid-column: span 7;
	}
}
@media (max-width: 767px) {
	.cca-v2
		:is(.cca-v2__cgrid--cols-4, .cca-v2__cgrid--cols-3)
		.cca-v2__cgrid-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cca-v2 .cca-v2__cgrid-row-summary {
		display: flex;
		gap: 16px;
		padding: 16px 0 24px;
	}
	.cca-v2 .cca-v2__cgrid-row-summary--photo {
		padding-block: 20px;
	}
	.cca-v2 .cca-v2__cgrid-thumb {
		width: 80px;
		height: 80px;
	}
	.cca-v2 .cca-v2__cgrid-row-head .cca-v2__cgrid-person {
		margin-top: 8px;
	}
	.cca-v2 .cca-v2__cgrid-row-panel {
		padding-bottom: 24px;
	}
	.cca-v2 .cca-v2__cgrid-thumb {
		flex: none;
	}
	.cca-v2 .cca-v2__cgrid-row-head {
		flex: 1 1 auto;
	}
	.cca-v2 .cca-v2__cgrid-icon {
		flex: none;
		margin-right: 0;
	}
	.cca-v2 .cca-v2__cgrid-row-panel {
		grid-template-columns: minmax(0, 1fr);
	}
	.cca-v2 :is(.cca-v2__cgrid-roles, .cca-v2__cgrid-groups) {
		display: block;
		grid-column: 1;
	}
	.cca-v2 .cca-v2__cgrid-role {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 8px;
		margin-bottom: 4px;
	}
	.cca-v2 .cca-v2__cgrid-group {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		gap: 8px;
		margin-bottom: 16px;
	}
	.cca-v2 :is(.cca-v2__cgrid-roles, .cca-v2__cgrid-groups) :is(dt, dd) {
		grid-column: auto;
	}
}
@media (max-width: 359px) {
	.cca-v2 .cca-v2__cgrid .cca-v2__cgrid-items {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Logos: celdas cuadradas blancas con borde fino sobre un panel gris claro (8 px de padding y 4 px entre celdas).
   En fondo gris el panel pasa a blanco; en fondo negro el panel es translúcido y las celdas siguen blancas, para que los logos oscuros se vean. */
.cca-v2 .cca-v2__cgrid-logos {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 8px;
	list-style: none;
}
.cca-v2 .cca-v2__cgrid--logos.cca-v2__cgrid--gray .cca-v2__cgrid-logos {
	background: #fff;
}
.cca-v2 .cca-v2__cgrid--logos.cca-v2--dark .cca-v2__cgrid-logos {
	background: rgb(255 255 255 / 12%);
}
.cca-v2 .cca-v2__cgrid--cols-6 .cca-v2__cgrid-logos {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.cca-v2 .cca-v2__cgrid--cols-4 .cca-v2__cgrid-logos {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cca-v2 .cca-v2__cgrid--cols-9 .cca-v2__cgrid-logos {
	grid-template-columns: repeat(9, minmax(0, 1fr));
}
.cca-v2 .cca-v2__cgrid-logo {
	min-width: 0;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--cca-v2-gray-400);
	background: #fff;
	color: #000;
}
.cca-v2 .cca-v2__cgrid-logo > :is(a, span) {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 16%;
	color: inherit;
	text-decoration: none;
}
.cca-v2 .cca-v2__cgrid-logo > a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}
.cca-v2 .cca-v2__cgrid-logo-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
@media (max-width: 1099px) {
	.cca-v2
		:is(.cca-v2__cgrid--cols-9, .cca-v2__cgrid--cols-6, .cca-v2__cgrid--cols-4)
		.cca-v2__cgrid-logos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.cca-v2 .cca-v2__cgrid--logos .cca-v2__cgrid-logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Sponsors: carrusel de logos que avanza de a pantallas completas (venia de la home). Usa el contenedor de seccion de la home (cca-v2-home.css).
   Cada logo va en un contenedor de hasta 111 x 75 px, ajustado adentro, con 16 px entre contenedores; 9 contenedores suman 1127 px y el resto es para la etiqueta.
   Sin JavaScript, o con "reducir movimiento", es una fila estática que se acomoda en varias líneas. Con assets/js/cca-v2-sponsors.js (clase is-carousel) va en una sola línea
   que se desplaza una pantalla cada vez; el contenedor recorta lo que queda fuera. */
.cca-v2 .cca-v2__home-section--sponsors {
	padding-block: 32px;
}
.cca-v2 .cca-v2__sponsors-row {
	display: grid;
	grid-template-columns: minmax(120px, 1fr) minmax(0, 1127px);
	gap: 24px;
	align-items: center;
}
.cca-v2 .cca-v2__sponsors-carousel {
	min-width: 0;
	overflow: hidden;
}
.cca-v2 .cca-v2__sponsors-caption {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.cca-v2 .cca-v2__sponsors-caption .cca-v2__label { margin: 0; }
.cca-v2 .cca-v2__sponsors-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	background: transparent;
	font-family: var(--cca-v2-font-mono);
	font-size: 12px;
	cursor: pointer;
}
.cca-v2 .cca-v2__sponsors-toggle[hidden] { display: none; }
.cca-v2 .cca-v2__sponsor-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cca-v2 .cca-v2__sponsors-carousel.is-carousel .cca-v2__sponsor-list {
	flex-wrap: nowrap;
	width: max-content;
}
.cca-v2 .cca-v2__sponsor-list li {
	flex: 0 0 111px;
	width: 111px;
	height: 75px;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cca-v2 .cca-v2__sponsor-list li > :is(a, span) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.cca-v2 .cca-v2__sponsor-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.cca-v2 .cca-v2__sponsor-name {
	font-family: var(--cca-v2-font-headline);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.1;
	text-align: center;
	overflow-wrap: anywhere;
}
/* De 768 a 1439 px: el contenedor de logos va pegado a la derecha, junto a la etiqueta a la izquierda. */
@media (min-width: 768px) and (max-width: 1439px) {
	.cca-v2 .cca-v2__sponsors-carousel {
		justify-self: end;
		max-width: 100%;
	}
	.cca-v2 .cca-v2__sponsor-list {
		justify-content: flex-end;
	}
}
@media (max-width: 767px) {
	.cca-v2 .cca-v2__sponsors-row {
		grid-template-columns: minmax(0, 1fr);
	}
	.cca-v2 .cca-v2__sponsors-caption {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	/* En móvil el contenedor de logos va centrado (el carrusel mide justo lo que ocupan los logos enteros que muestra). */
	.cca-v2 .cca-v2__sponsors-carousel {
		justify-self: center;
		max-width: 100%;
	}
	.cca-v2 .cca-v2__sponsor-list {
		justify-content: center;
	}
}