/* =========================================================
   Óptica La Curacao — Página Promociones
   "Estrena hoy, paga a tu ritmo" + carrusel de piezas de campaña.

   El carrusel es el mismo mecanismo que los testimonios de la portada: la fila
   se desplaza con `overflow-x` + `scroll-snap` (CSS) y el bloque
   `optica-curacao/slider-nav` sólo añade las flechas.
   ========================================================= */

/* ---------- Hero ---------- */
.oc-promos-hero,
.oc-promos-hero__img,
.oc-promos-hero__img img {
	display: block;
	margin: 0;
}

.oc-promos-hero__img img {
	width: 100%;
	height: auto;
}

.oc-promos-hero__img--movil {
	display: none;
}

/* ---------- Sección ---------- */
.oc-promos-seccion {
	padding-block: 70px 80px;
}

.oc-promos-title {
	color: var(--wp--preset--color--slate-soft, #616161);
	font-size: clamp(26px, 3.6vw, 48px);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -.5px;
	margin: 0 0 60px;
}

.oc-promos-title strong {
	color: var(--wp--preset--color--teal-deep, #0186B1);
	font-weight: 800;
}

/* ---------- Promoción destacada ----------
   Panel gris con la pieza a la izquierda y sus términos a la derecha. Es una
   retícula de dos columnas y no un flex, para que la columna de texto no se
   estire con el alto de la imagen: los términos empiezan arriba y la pieza
   manda el alto de la fila. */
.oc-promo-destacada {
	display: grid;
	grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
	gap: 54px;
	align-items: start;
	background: var(--wp--preset--color--mist, #F2F2F2);
	border-radius: 26px;
	padding: 52px;
	margin-top: 60px;
}

.oc-promo-destacada__img {
	margin: 0;
}

.oc-promo-destacada__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.oc-promo-destacada__titulo {
	color: var(--wp--preset--color--teal-deep, #0186B1);
	font-size: clamp(20px, 2.1vw, 28px);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 26px;
}

.oc-promo-destacada__p {
	color: var(--wp--preset--color--slate, #4D4D4D);
	font-size: 14px;
	line-height: 1.62;
	margin: 0 0 16px;
}

.oc-promo-destacada__p:last-child {
	margin-bottom: 0;
}

/* ---------- Rejilla del resto ----------
   Cada promoción son dos piezas separadas por un hueco: la imagen y, debajo,
   la tarjeta gris con el botón y el resumen. Van en subretícula para que las
   tarjetas de las tres columnas arranquen a la misma altura aunque los
   resúmenes tengan distinto largo. */
.oc-promo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 38px;
	margin-top: 74px;
}

.oc-promo-item {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 22px;
}

.oc-promo-item__img {
	margin: 0;
}

.oc-promo-item__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.oc-promo-item__card {
	background: var(--wp--preset--color--mist, #F2F2F2);
	border-radius: 16px;
	padding: 26px 28px 30px;
}

.oc-promo-item__btn-wrap {
	margin-bottom: 16px;
}

/* Píldora pequeña, del mismo teal que el titular de los términos. */
.oc-promo-item__btn .wp-block-button__link {
	display: inline-block;
	background: var(--wp--preset--color--teal-deep, #0186B1);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	text-decoration: none;
	padding: 9px 26px;
	border-radius: 999px;
	transition: background .15s ease;
}

.oc-promo-item__btn .wp-block-button__link:hover {
	background: #016d90;
	color: #fff;
}

.oc-promo-item__texto {
	color: var(--wp--preset--color--slate, #4D4D4D);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* El CTA de esta página va sobre blanco (valor por defecto de --oc-cta-bg). */
.oc-promos-seccion .oc-cta-asesoria {
	margin-top: 56px;
}

/* =========================================================
   Responsive
   ========================================================= */

/* ---------- Tablet (<= 980px) ---------- */
@media (max-width: 980px) {
	.oc-promos-seccion {
		padding-block: 50px 60px;
	}

	.oc-promos-title {
		margin-bottom: 40px;
	}

	/* La destacada se apila: a este ancho la columna de texto se queda en unas
	   pocas palabras por línea y los términos dejan de leerse. */
	.oc-promo-destacada {
		grid-template-columns: 1fr;
		gap: 34px;
		padding: 34px;
		border-radius: 20px;
		margin-top: 44px;
	}

	.oc-promo-destacada__img {
		max-width: 340px;
	}

	.oc-promo-grid {
		gap: 26px;
		margin-top: 54px;
	}

	.oc-promo-item {
		gap: 16px;
	}

	.oc-promo-item__card {
		padding: 20px 20px 24px;
	}
}

/* ---------- Móvil (<= 640px) ---------- */
@media (max-width: 640px) {
	.oc-promos-hero__img--ancho {
		display: none;
	}

	.oc-promos-hero__img--movil {
		display: block;
	}

	.oc-promos-seccion {
		padding-block: 36px 48px;
	}

	.oc-promos-title {
		margin-bottom: 28px;
	}

	.oc-promo-destacada {
		padding: 24px;
		gap: 26px;
		margin-top: 32px;
	}

	.oc-promo-destacada__img {
		max-width: none;
	}

	/* Una promoción por fila: con tres columnas la pieza baja de 110px de ancho
	   y el texto incrustado en ella deja de leerse. */
	.oc-promo-grid {
		grid-template-columns: 1fr;
		gap: 34px;
		margin-top: 40px;
	}

	.oc-promo-item__img {
		max-width: 340px;
		margin-inline: auto;
	}
}