/**
 * Panels — columnas de color a sangre, numeradas.
 *
 * Home (nodo 1:137): tres de 420px, enlaces, sólo título.
 * Institucional (nodo 61:1051): cuatro de 320px, sin enlace, con bajada.
 * El alto lo fija el shortcode con `--cvp-panels-h`.
 */
.cvp-panels { display: flex; background: var(--cvp-white); }

/* Federá pone un título sobre la tira; el título respeta el container y la
   tira sigue yendo a sangre. */
.cvp-panels-wrap > .cvp-container { padding-block: var(--cvp-sp-5) 0; }

.cvp-panels__section-title {
	font-size: var(--cvp-fs-lg);
	color: var(--cvp-navy);
	margin: 0 0 var(--cvp-sp-3);
}

.cvp-panels__item {
	flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; justify-content: space-between;
	gap: var(--cvp-sp-3);
	min-height: var(--cvp-panels-h, 420px); padding: var(--cvp-sp-4);
	text-decoration: none; color: var(--cvp-white);
	transition: filter var(--cvp-dur) var(--cvp-ease);
}

/* Sólo los que son enlaces reaccionan al mouse. */
a.cvp-panels__item:hover,
a.cvp-panels__item:focus-visible { filter: brightness(1.12); }

.cvp-panels__item--navy   { background: var(--cvp-navy); }
.cvp-panels__item--yellow { background: var(--cvp-yellow); color: var(--cvp-navy); }
.cvp-panels__item--green  { background: var(--cvp-green); }
.cvp-panels__item--orange { background: var(--cvp-orange); }
.cvp-panels__item--black  { background: var(--cvp-black); }

.cvp-panels__num {
	font-family: var(--cvp-font-text); font-weight: 700;
	font-size: var(--cvp-fs-md); line-height: 1;
}

/* Título y bajada van juntos abajo; el número queda arriba. */
.cvp-panels__body {
	display: flex; flex-direction: column; gap: var(--cvp-sp-1);
}

.cvp-panels__title {
	font-family: var(--cvp-font-display); font-weight: 700;
	font-size: var(--cvp-fs-lg); line-height: 1.1; text-transform: uppercase;
}

.cvp-panels__text {
	font-family: var(--cvp-font-text); font-weight: 400;
	font-size: var(--cvp-fs-sm); line-height: 1.4; color: inherit;
}

@media (max-width: 900px) {
	.cvp-panels { flex-direction: column; }
	.cvp-panels__item { min-height: min(var(--cvp-panels-h, 220px), 220px); }
}

/*
 * El Figma del 18 de setiembre subió la bajada de los pilares de Institucional
 * de 14 a 20. Es el único listado de paneles que la sube: Prevención la tiene
 * en 13 y Federá no lleva bajada, así que el ajuste cuelga de la página. En
 * mobile queda en 14, como está dibujado.
 */
@media (min-width: 901px) {
	.cvp-pag-institucional .cvp-panels__text { font-size: var(--cvp-fs-md); }
}

/* Mobile: paneles de 160, separados por 2px (nodo 148:1019). */
@media (max-width: 700px) {
	.cvp-panels { gap: 2px; }
	.cvp-panels__item { min-height: min(var(--cvp-panels-h, 160px), 160px); }
}

/*
 * El título del panel mide distinto en cada pantalla y el componente sólo
 * acierta en el Home: 20 en Institucional, 19 en Prevención y 17 en Federá
 * (mobile 22, 20 y 18). Con los 28 de fábrica las tres se veían una medida
 * más grandes que el diseño.
 */
.cvp-pag-institucional .cvp-panels__title          { font-size: 1.375rem; }   /* 22 mobile */
.cvp-pag-prevencion-cooperativa .cvp-panels__title { font-size: var(--cvp-fs-md); }
.cvp-pag-federa-tu-cooperativa .cvp-panels__title  { font-size: 1.125rem; }   /* 18 mobile */

@media (min-width: 901px) {
	.cvp-pag-institucional .cvp-panels__title          { font-size: var(--cvp-fs-md); }   /* 20 */
	.cvp-pag-prevencion-cooperativa .cvp-panels__title { font-size: 1.1875rem; }          /* 19 */
	.cvp-pag-federa-tu-cooperativa .cvp-panels__title  { font-size: 1.0625rem; }          /* 17 */
}

/* Figma del 6 de octubre de 2026: el cuarto pilar de Institucional lleva la bajada en 14, mientras los
   otros tres van en 20. Es así en el diseño; se copia tal cual. */
@media (min-width: 901px) {
	.cvp-pag-institucional .cvp-panels__item:nth-child(4) .cvp-panels__text { font-size: 0.875rem; }
}