/* Portada: el año del cerdo ibérico. Titular, regla de los doce meses con la montanera, lo que hay a la
   venta, familias, cooperativa, secciones, socios, guías, recetas y noticias. */

.ov-portada {
	background: var(--ov-blanco);
}

/* El campo: titular, nota del mes y regla sobre crema; las piezas a la venta, ya sobre blanco */
.ov-portada__campo {
	padding-block: clamp(20px, 2.6vw, 34px) clamp(18px, 2.5vw, 28px);
	background: var(--ov-crema);
}

.ov-portada__cabeza {
	display: grid;
	gap: 24px clamp(24px, 5vw, 72px);
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
}

@media (min-width: 960px) {
	.ov-portada__cabeza {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	}
}

.ov-portada__titulo {
	margin: 0 0 12px;
	font-size: clamp(2rem, 1.3rem + 2vw, 2.75rem);
}

.ov-portada__entradilla {
	margin: 0;
	max-width: 46rem;
	font-size: var(--ov-t-entradilla);
	color: var(--ov-tinta-suave);
}

/* El momento del año: una nota de campo junto al titular */
.ov-portada__fase {
	padding: 18px 20px 20px;
	background: var(--ov-blanco);
	border: 1px solid var(--ov-dorado-claro);
	border-top: 3px solid var(--ov-verde-imagotipo);
}

.ov-portada__fase p {
	margin: 0;
}

.ov-portada__fase-titulo {
	margin: 0 0 8px !important;
	font: 700 1.5rem / 1.2 var(--ov-serifa);
	color: var(--ov-verde-oscuro);
}

.ov-portada__fase-texto {
	font-size: var(--ov-t-pequeno);
	color: var(--ov-tinta-suave);
}

.ov-portada__fase-accion {
	margin-top: 12px;
}

/* ---------------------------------------------------------------------------------------------------
 * La regla de los doce meses
 * ------------------------------------------------------------------------------------------------ */

.ov-calendario {
	padding-block: clamp(16px, 2.5vw, 28px) 0;
}

.ov-calendario__marco {
	--ov-columnas: 12;
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--ov-columnas), minmax(0, 1fr));
	grid-template-rows: auto auto;
	row-gap: 8px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	padding: 26px 2px 4px;
}

.ov-calendario__marco:focus-visible {
	outline-offset: 2px;
}

.ov-calendario__meses {
	grid-column: 1 / -1;
	grid-row: 1;
	display: grid;
	grid-template-columns: subgrid;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--ov-verde-imagotipo);
}

.ov-calendario__mes {
	position: relative;
	display: grid;
	justify-items: center;
	padding: 12px 2px 10px;
	scroll-snap-align: center;
	background:
		linear-gradient(var(--ov-verde-imagotipo), var(--ov-verde-imagotipo)) left top / 1px 10px no-repeat;
}

.ov-calendario__mes:first-child {
	background: none;
}

.ov-calendario__abrev {
	font: 700 var(--ov-t-pequeno) / 1 var(--ov-sans);
	color: var(--ov-tinta-suave);
	letter-spacing: 0.02em;
}

.ov-calendario__mes.es-montanera .ov-calendario__abrev {
	color: var(--ov-verde-oscuro);
}

/* El mes actual: marcado en verde, con su banderita "Hoy" */
.ov-calendario__mes.es-actual .ov-calendario__abrev {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 32px;
	padding: 0 8px;
	border-radius: 2px;
	background: var(--ov-verde-imagotipo);
	color: var(--ov-blanco);
}

.ov-calendario__hoy {
	position: absolute;
	top: -26px;
	left: 50%;
	translate: -50% 0;
	padding: 3px 8px;
	background: var(--ov-dorado-oscuro);
	color: var(--ov-blanco);
	font: 700 0.75rem / 1 var(--ov-sans);
	white-space: nowrap;
}

.ov-calendario__hoy::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	translate: -50% 0;
	border: 5px solid transparent;
	border-bottom: 0;
	border-top-color: var(--ov-dorado-oscuro);
}

.ov-calendario__nota {
	margin-top: 6px;
	font: 400 0.8125rem / 1 var(--ov-sans);
	color: var(--ov-tinta-suave);
}

/* La banda de la montanera: de octubre (2.ª columna) a marzo (7.ª) */
.ov-calendario__banda {
	grid-column: 2 / 8;
	grid-row: 2;
	display: flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 14px;
	/* Texto blanco: el dorado de marca no llega a AA (4,1:1); la banda va en dorado oscuro (5,6:1) */
	background: var(--ov-dorado-oscuro);
	color: var(--ov-blanco);
	font: 700 var(--ov-t-pequeno) / 1.2 var(--ov-sans);
	border-radius: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ov-calendario__leyenda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin: 10px 0 0;
	font-size: var(--ov-t-pequeno);
	color: var(--ov-tinta-suave);
}

.ov-calendario__clave {
	display: inline-block;
	width: 26px;
	height: 10px;
	margin-right: 8px;
	border-radius: 2px;
	background: var(--ov-dorado-oscuro);
	vertical-align: middle;
}

.ov-calendario__navidad {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--ov-verde-imagotipo);
	color: var(--ov-blanco);
	font-weight: 700;
}

.ov-calendario__navidad .ov-icono {
	width: 18px;
	height: 18px;
	color: var(--ov-dorado-claro);
}

@media (max-width: 760px) {
	.ov-calendario__marco {
		grid-template-columns: repeat(var(--ov-columnas), 60px);
	}

	.ov-calendario__banda {
		white-space: normal;
	}
}

/* El momento de llegada: la banda se traza de octubre a marzo y el "Hoy" se posa. Una sola vez. */
@media (prefers-reduced-motion: no-preference) {
	.ov-calendario__banda {
		animation: ov-banda-trazar 1100ms var(--ov-ease-mover) 250ms both;
	}

	.ov-calendario__hoy {
		animation: ov-hoy-posar 700ms var(--ov-ease-salida) 900ms both;
	}
}

@keyframes ov-banda-trazar {
	from {
		clip-path: inset(0 100% 0 0);
	}

	to {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes ov-hoy-posar {
	from {
		opacity: 0;
		translate: -50% -10px;
	}

	to {
		opacity: 1;
		translate: -50% 0;
	}
}

/* Lo que hay a la venta: fotos apaisadas para que precio y botón entren en la primera pantalla */
.ov-portada__venta {
	padding-block: clamp(16px, 2.2vw, 24px) var(--ov-seccion);
}

@media (min-width: 560px) {
	.ov-portada__venta .ov-tarjeta__foto {
		aspect-ratio: 4 / 3;
	}
}

.ov-portada__venta .ov-encabezado {
	margin-bottom: 14px;
}

/* En el móvil, la nota del mes en una línea y la regla justo después del titular */
@media (max-width: 760px) {
	.ov-portada__fase {
		padding: 12px 14px;
	}

	.ov-portada__fase-titulo {
		font-size: 1.1875rem;
		margin: 0 0 4px !important;
	}

	.ov-portada__entradilla {
		font-size: 1rem;
	}

	.ov-calendario__banda .ov-calendario__banda-larga {
		display: none;
	}
}

@media (min-width: 761px) {
	.ov-calendario__banda .ov-calendario__banda-corta {
		display: none;
	}

	/* En escritorio la banda ya dice qué es la montanera: la leyenda solo sale si lleva la fecha de Navidad */
	.ov-calendario__leyenda:not(:has(.ov-calendario__navidad)) {
		display: none;
	}

	.ov-calendario__clave-texto {
		display: none;
	}
}

.ov-portada__venta h2 {
	font-size: var(--ov-t-subtitular);
}

/* ---------------------------------------------------------------------------------------------------
 * Compra por familia
 * ------------------------------------------------------------------------------------------------ */

.ov-portada__familias-titulo {
	margin-bottom: 20px;
	font-size: var(--ov-t-subtitular);
}

.ov-familias-rejilla {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* Todas las cajas de la misma altura y los nombres alineados arriba, aunque la nota ocupe una o dos líneas. */
.ov-familias-rejilla li {
	display: grid;
}

.ov-familias-rejilla a {
	position: relative;
	display: grid;
	gap: 6px;
	min-height: 112px;
	align-content: start;
	padding: 18px 48px 18px 20px;
	background: var(--ov-blanco);
	border: 1px solid var(--ov-dorado-claro);
	text-decoration: none;
	transition: border-color var(--ov-d-estado) ease, transform var(--ov-d-pulsar) var(--ov-ease-salida);
}

.ov-familias-rejilla a:active {
	transform: scale(0.98);
}

.ov-familias-rejilla__nombre {
	font: 700 1.375rem / 1.15 var(--ov-serifa);
	color: var(--ov-verde-oscuro);
}

.ov-familias-rejilla__nota {
	font-size: var(--ov-t-pequeno);
	color: var(--ov-tinta-suave);
}

.ov-familias-rejilla .ov-icono {
	position: absolute;
	right: 18px;
	bottom: 20px;
	width: 22px;
	height: 22px;
	color: var(--ov-dorado-oscuro);
	transition: transform var(--ov-d-estado) var(--ov-ease-salida);
}

@media (hover: hover) and (pointer: fine) {
	.ov-familias-rejilla a:hover {
		border-color: var(--ov-dorado-oscuro);
	}

	.ov-familias-rejilla a:hover .ov-icono {
		transform: translateX(4px);
	}
}

/* ---------------------------------------------------------------------------------------------------
 * La cooperativa
 * ------------------------------------------------------------------------------------------------ */

.ov-portada__coop-rejilla {
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

@media (min-width: 900px) {
	.ov-portada__coop-rejilla {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	}
}

.ov-portada__coop-foto {
	margin: 0;
}

.ov-portada__coop-foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 2px;
}

.ov-portada__coop-texto > p {
	color: var(--ov-tinta-suave);
}

.ov-portada__coop-enlaces {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	margin: 0;
}

/* Secciones (sectores) */
.ov-sectores {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 720px) {
	.ov-sectores {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.ov-sector a {
	display: grid;
	gap: 10px;
	text-decoration: none;
}

.ov-sector__foto {
	display: block;
	overflow: hidden;
	border-radius: 2px;
	background: var(--ov-crema);
}

.ov-sector__foto img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	filter: grayscale(0.25);
	transition: transform 600ms var(--ov-ease-salida), filter var(--ov-d-estado) ease;
}

.ov-sector__nombre {
	font: 700 1.125rem / 1.2 var(--ov-serifa);
	color: var(--ov-verde-oscuro);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.ov-sector a:hover img {
		transform: scale(1.04);
		filter: none;
	}
}

/* Socios */
.ov-portada__socios-rejilla {
	display: grid;
	gap: 28px clamp(28px, 5vw, 72px);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

@media (min-width: 900px) {
	.ov-portada__socios-rejilla {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}
}

.ov-portada__socios-rejilla h2 {
	color: var(--ov-blanco);
}

.ov-portada__socios-rejilla p {
	color: var(--ov-crema);
}

.ov-socios-enlaces {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(230, 220, 198, 0.3);
}

@media (min-width: 640px) {
	.ov-socios-enlaces {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 28px;
	}
}

.ov-socios-enlaces a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	border-bottom: 1px solid rgba(230, 220, 198, 0.3);
	color: var(--ov-blanco) !important;
	font-weight: 700;
	text-decoration: none;
}

.ov-socios-enlaces .ov-icono {
	width: 20px;
	height: 20px;
	color: var(--ov-dorado);
	transition: transform var(--ov-d-estado) var(--ov-ease-salida);
}

@media (hover: hover) and (pointer: fine) {
	.ov-socios-enlaces a:hover .ov-icono {
		transform: translateX(4px);
	}
}

/* Guías del jamón */
.ov-guias {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
	.ov-guias {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
	}
}

.ov-guia-tarjeta a {
	display: grid;
	gap: 8px;
	height: 100%;
	padding: 18px;
	background: var(--ov-crema-clara);
	border: 1px solid var(--ov-dorado-claro);
	text-decoration: none;
	transition: border-color var(--ov-d-estado) ease;
}

.ov-guia-tarjeta--texto a {
	align-content: end;
	min-height: 220px;
	padding: 24px;
	background: var(--ov-verde-imagotipo);
	border-color: var(--ov-verde-imagotipo);
}

.ov-guia-tarjeta__foto {
	display: block;
	overflow: hidden;
	background: var(--ov-blanco);
}

.ov-guia-tarjeta__foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: top;
}

.ov-guia-tarjeta__titulo {
	font: 700 1.25rem / 1.2 var(--ov-serifa);
	color: var(--ov-verde-oscuro);
}

.ov-guia-tarjeta__texto {
	font-size: var(--ov-t-pequeno);
	color: var(--ov-tinta-suave);
}

.ov-guia-tarjeta--texto .ov-guia-tarjeta__titulo {
	font-size: var(--ov-t-subtitular);
	color: var(--ov-blanco);
}

.ov-guia-tarjeta--texto .ov-guia-tarjeta__texto {
	color: var(--ov-crema);
}

.ov-guia-tarjeta--texto .ov-icono {
	width: 26px;
	height: 26px;
	color: var(--ov-dorado);
}

@media (hover: hover) and (pointer: fine) {
	.ov-guia-tarjeta a:hover {
		border-color: var(--ov-dorado-oscuro);
	}
}

/* Recetas y noticias: cuatro columnas */
@media (min-width: 1100px) {
	.ov-rejilla-entradas--cuatro {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}