/**
 * Hero — nodo 1:79 del Figma.
 *
 * Fondo navy con la foto encima al 60%. El texto va sobre la foto con
 * text-shadow, tal cual el diseño.
 */
.cvp-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--cvp-hero-h, 479px);
	background: var(--cvp-navy);
	color: var(--cvp-white);
	overflow: hidden;
}

/* La foto es un <img> y no un background para poder darle fetchpriority
   y que el LCP no dependa de que el CSS resuelva primero. */
.cvp-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.cvp-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-block: var(--cvp-sp-6);
}

.cvp-hero--center .cvp-hero__inner { align-items: center; text-align: center; }

/* Kicker: 14px, tracking 1.12px → 0.08em. */
.cvp-hero__kicker {
	font-family: var(--cvp-font-text);
	font-weight: 700;
	font-size: var(--cvp-fs-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cvp-white);
	margin: 0 0 0.5rem;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/*
 * Título: Rubik Bold, leading-none, un span por línea. El tope del clamp lo
 * pone cada pantalla —el diseño va de 38 en Prevención a 64 en el Home—; el
 * piso y el tramo fluido son del componente.
 */
.cvp-hero__title {
	font-family: var(--cvp-font-display);
	font-weight: 700;
	font-size: clamp(2.25rem, 4.2vw, var(--cvp-hero-title-max, 4rem));
	line-height: 1;
	color: var(--cvp-white);
	text-transform: uppercase;
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	margin: 0;
}

.cvp-hero__title span { display: block; }

/* Bajada: 20px, ancho 700px en el diseño. */
.cvp-hero__text {
	font-size: var(--cvp-fs-md);
	line-height: 1.35;
	color: var(--cvp-white);
	text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	max-width: 700px;
	margin: var(--cvp-sp-2) 0 0;
}

/*
 * El Figma del 18 de setiembre subió la bajada, pero no parejo: 23 en Home y
 * 22 en Formá, mientras Federá (18) y Contacto (17) siguen por debajo de los
 * 20 del componente. Se ajustan las dos que subieron y el resto queda en 20,
 * que es el promedio con el que se armó.
 */
.cvp-pag-home .cvp-hero__text            { font-size: 1.4375rem; }  /* 23 */
.cvp-pag-forma-tu-cooperativa .cvp-hero__text { font-size: 1.375rem; }  /* 22 */

/* CtaRow: gap 16. */
.cvp-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cvp-sp-2);
	margin-top: var(--cvp-sp-3);
}

@media (max-width: 600px) {
	.cvp-hero__ctas { flex-direction: column; align-items: stretch; }
	.cvp-hero__ctas .cvp-btn { justify-content: center; }
}

/* Cuando el fondo viene envuelto en <picture>, el wrapper toma el lugar
   del <img> en el posicionamiento absoluto. */
.cvp-hero picture:has(.cvp-hero__bg),
.cvp-bigcta picture:has(.cvp-bigcta__bg) {
	position: absolute;
	inset: 0;
	display: block;
}

/* --- Variantes de tema ------------------------------------------------- */
/* El hero de Historia (nodo 1:356) es amarillo con texto navy, no foto. */

.cvp-hero--yellow {
	background: var(--cvp-yellow);
	color: var(--cvp-navy);
	/* El plano amarillo del diseño lleva la trama diagonal. */
	background-image:
		repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 5px),
		repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 5px);
}
.cvp-hero--green  { background: var(--cvp-green);  color: var(--cvp-navy); }
.cvp-hero--dark   { background: #1a1a1a;           color: var(--cvp-white); }
.cvp-hero--navy   { background: var(--cvp-navy);   color: var(--cvp-white); }

/* Sin foto detrás no hace falta la sombra del texto. */
.cvp-hero:not(.cvp-hero--photo) :is(.cvp-hero__title, .cvp-hero__text, .cvp-hero__kicker) {
	text-shadow: none;
	color: inherit;
}

.cvp-hero--yellow .cvp-hero__kicker,
.cvp-hero--green .cvp-hero__kicker { color: var(--cvp-navy); opacity: 0.75; }

/* --- Hero partido — nodos 61:671 y 61:917 -----------------------------
   Texto sobre color a la izquierda (600px) y foto a la derecha (936x480).
   El contenedor deja de limitar el ancho: la foto va a sangre. */

.cvp-hero--split {
	display: grid;
	grid-template-columns: minmax(0, 600fr) 936fr;
	align-items: center;
	gap: var(--cvp-sp-4);
	padding-right: 0;
}

.cvp-hero--split .cvp-hero__inner {
	margin: 0;
	max-width: none;
	padding-block: var(--cvp-sp-5);
	padding-left: var(--cvp-gutter);
	padding-right: 0;
	order: 0;                 /* el texto va primero, como en el diseño */
}

.cvp-hero--split .cvp-hero__media {
	position: relative;
	align-self: stretch;
	overflow: hidden;
	order: 1;                 /* la foto, a la derecha */
}

.cvp-hero--split .cvp-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* En amarillo, la bajada del diseño va en blanco y casi no se lee.
   Se mantiene en navy, que es el color del resto del bloque. */
.cvp-hero--split.cvp-hero--yellow .cvp-hero__text {
	color: var(--cvp-navy);
}

@media (max-width: 900px) {
	.cvp-hero--split {
		grid-template-columns: 1fr;
		gap: 0;
		height: auto;
		min-height: 0;
	}

	.cvp-hero--split .cvp-hero__inner {
		padding-inline: var(--cvp-gutter);
	}

	.cvp-hero--split .cvp-hero__media {
		aspect-ratio: 16 / 9;
	}
}

/* --- Hero con foto en mobile — nodo 148:990 ---------------------------
   El diseño mobile no es el de escritorio angostado: cambia la composición.
   La foto deja de ser fondo y pasa a ser una tarjeta arriba, el fondo se
   aclara a celeste y el texto pasa a navy. */

@media (max-width: 700px) {
	.cvp-hero--photo {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		min-height: 0;
		background: var(--cvp-sky);
		color: var(--cvp-navy);
		padding-block: var(--cvp-sp-3) var(--cvp-sp-4);
		gap: var(--cvp-sp-3);
	}

	/* La foto sale del posicionamiento absoluto y ocupa su propio lugar. */
	.cvp-hero--photo .cvp-hero__bg,
	.cvp-hero--photo picture:has(.cvp-hero__bg) {
		position: static;
		inset: auto;
		width: calc(100% - var(--cvp-gutter) * 2);
		height: 220px;
		margin-inline: var(--cvp-gutter);
		opacity: 1 !important;    /* el shortcode la sirve al 60% para el fondo */
		object-fit: cover;
		order: -1;
	}

	.cvp-hero--photo picture:has(.cvp-hero__bg) .cvp-hero__bg {
		width: 100%;
		margin-inline: 0;
	}

	.cvp-hero--photo .cvp-hero__inner {
		padding-block: 0;
	}

	/* Sobre celeste, la sombra del texto no tiene sentido. */
	.cvp-hero--photo :is(.cvp-hero__title, .cvp-hero__text, .cvp-hero__kicker) {
		text-shadow: none;
	}

	.cvp-hero--photo .cvp-hero__kicker { color: var(--cvp-navy); }
	.cvp-hero--photo .cvp-hero__title  { color: var(--cvp-navy); font-size: 2.125rem; }
	.cvp-hero--photo .cvp-hero__text   { color: #333; font-size: 1.0625rem; }

	/* Botones a todo el ancho, apilados, 46 de alto. */
	.cvp-hero--photo .cvp-hero__ctas {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.cvp-hero--photo .cvp-hero__ctas .cvp-btn {
		justify-content: center;
		min-height: 46px;
	}

	.cvp-hero--photo .cvp-btn--secondary {
		background: var(--cvp-white);
		color: var(--cvp-navy);
	}
}

/*
 * Las medidas del hero por pantalla, del Figma. El componente trae el promedio
 * y cada página corrige lo suyo: son siete títulos distintos (64, 48, 44, 44,
 * 42, 40 y 38) y cuatro bajadas (23, 22, 18 y 17), con el mismo shortcode.
 */
.cvp-pag-institucional          { --cvp-hero-title-max: 2.75rem; }   /* 44 */
.cvp-pag-federa-tu-cooperativa  { --cvp-hero-title-max: 2.75rem; }   /* 44 */
.cvp-pag-contacto               { --cvp-hero-title-max: 3rem; }      /* 48 */
.cvp-pag-forma-tu-cooperativa   { --cvp-hero-title-max: 2.625rem; }  /* 42 */
.cvp-pag-historia               { --cvp-hero-title-max: 2.5rem; }    /* 40 */
.cvp-pag-prevencion-cooperativa { --cvp-hero-title-max: 2.375rem; }  /* 38 */

/*
 * Figma del 6 de octubre de 2026: Federá y Contacto suben la bajada a 24
 * (eran 18 y 17), y la del Home entra en una sola línea (caja de 727).
 */
.cvp-pag-federa-tu-cooperativa .cvp-hero__text { font-size: 1.5rem; }     /* 24 */
.cvp-pag-contacto .cvp-hero__text              { font-size: 1.5rem; }     /* 24 */
.cvp-pag-home .cvp-hero__text                  { max-width: 46rem; }      /* 736 */

/* Dos párrafos seguidos en la bajada (Federá). */
.cvp-hero__text + .cvp-hero__text { margin-top: var(--cvp-sp-2); }

/* El volanta de Federá: era el más chico de todos (12) y el Figma del 6 de
   octubre de 2026 lo sube a 20, como el del resto. */
.cvp-pag-federa-tu-cooperativa .cvp-hero__kicker { font-size: var(--cvp-fs-md); letter-spacing: 0.06em; }  /* 20, tracking 1.2 */

@media (max-width: 900px) {
	/* En mobile la bajada de Contacto va en 16, como el resto. */
	.cvp-pag-contacto .cvp-hero__text { font-size: var(--cvp-fs-base); }
}

/* Figma del 6 de octubre de 2026: el título de Historia va en blanco sobre el amarillo, y los puntos
   del costado también; la bajada de Contacto, en gris claro (#ccc). */
/* Con :not() en la cadena, para ganarle a la regla de los hero sin foto. */
.cvp-pag-historia .cvp-hero:not(.cvp-hero--photo) .cvp-hero__title { color: var(--cvp-white); }
.cvp-pag-historia .cvp-hero:not(.cvp-hero--photo) .cvp-hero__kicker { font-size: var(--cvp-fs-md); opacity: 1; }   /* 20, navy pleno */
.cvp-pag-historia .cvp-hero.cvp-dots { --cvp-dots-color: var(--cvp-white); }
@media (min-width: 901px) {
	/* Sólo en escritorio: en celular el hero de Contacto es celeste. */
	.cvp-pag-contacto .cvp-hero__text { color: #ccc; }
}

/* Figma del 6 de octubre de 2026: la volanta de Formá también va en 20, y la
   de las dos landings amarillas en navy pleno, sin la transparencia. */
.cvp-pag-forma-tu-cooperativa .cvp-hero__kicker { font-size: var(--cvp-fs-md); }
.cvp-pag-forma-tu-cooperativa .cvp-hero--yellow .cvp-hero__kicker,
.cvp-pag-federa-tu-cooperativa .cvp-hero--yellow .cvp-hero__kicker { opacity: 1; }