/* =========================================================
   Óptica La Curacao — Página Estilo
   "Tu estilo es único, tu asesoría también".

   Los colores salen de la paleta de theme.json (`--wp--preset--color--*`), así
   que cambiarlos en Apariencia → Editor → Estilos repinta la página. El hex
   que acompaña a cada var() es sólo el respaldo del diseño original.
   ========================================================= */

.oc-est-hero {
	position: relative;
}

.oc-est-hero,
.oc-est-hero__img,
.oc-est-hero__img img {
	display: block;
	margin: 0;
}

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

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

/* El botón "Ver Catálogo" va montado a caballo sobre el borde inferior del
   banner, centrado en el ancho de la página (no de la columna de texto). */
.oc-est-hero__btn-wrap {
	position: absolute;
	left: 50%;
	bottom: 0;
	margin: 0;
	transform: translate(-50%, 50%);
	z-index: 2;
}

.oc-btn-catalogo .wp-block-button__link {
	display: inline-block;
	white-space: nowrap;
	background: linear-gradient(90deg, #00D2C9 0%, #0088B3 100%);
	color: #fff;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: .3px;
	text-decoration: none;
	padding: 15px 48px;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(0, 136, 179, .35);
	transition: transform .15s ease;
}

.oc-btn-catalogo .wp-block-button__link:hover {
	color: #fff;
	transform: translateY(-2px);
}

/* ---------- Titulares de sección (dos líneas: gris + azul) ---------- */
.oc-est-title {
	color: var(--wp--preset--color--slate, #4D4D4D);
	font-size: clamp(26px, 3.4vw, 44px);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: -.5px;
	margin: 0 0 54px;
}

.oc-est-title strong {
	color: var(--wp--preset--color--blue-mid, #3981A9);
	font-weight: 800;
}

.oc-est-title--rostros {
	color: var(--wp--preset--color--slate-soft, #616161);
	margin-bottom: 60px;
}

.oc-est-title--rostros strong {
	color: var(--wp--preset--color--teal-deep, #0083AD);
}

/* ---------- Zigzag de modelos ---------- */
.oc-est-zigzag {
	display: grid;
	/* Las filas se solapan visualmente en el diseño: casi sin hueco. */
	gap: 12px;
}

.oc-est-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: center;
}

/* Filas invertidas: el texto pasa a la izquierda sin tocar el orden del DOM
   (la imagen sigue leyéndose primero, que es como se describe el bloque). */
.oc-est-row.is-flip .oc-est-row__img {
	grid-column: 2;
	grid-row: 1;
}

.oc-est-row.is-flip .oc-est-row__text {
	grid-column: 1;
	grid-row: 1;
}

.oc-est-row__img {
	margin: 0;
}

.oc-est-row__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
}

/* El bloque de texto se ajusta a su contenido y va centrado dentro de la
   columna, con el texto alineado a la izquierda: así el titular más largo
   («cualquier outfit») ocupa más ancho, igual que en el diseño. */
.oc-est-row__text {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.oc-est-row__title {
	color: var(--wp--preset--color--slate, #4D4D4D);
	font-size: clamp(24px, 3.1vw, 40px);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -.5px;
	margin: 0 0 18px;
}

.oc-est-row__eyebrow {
	color: var(--wp--preset--color--teal-deep, #0083AD);
	font-size: clamp(12px, 1.1vw, 15px);
	font-weight: 400;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	line-height: 1.7;
	margin: 0;
}

/* ---------- Marcas ---------- */
.oc-est-marcas {
	padding-bottom: 70px;
}

/* LA REJILLA ANTERIOR, DE MOMENTO SE QUEDA
   El pattern ya no genera `.oc-est-marcas__grid`, pero el contenido vive en la
   base de datos de cada sitio y las páginas de Estilo publicadas siguen
   trayendo ese marcado hasta que se vuelvan a sembrar. Sin estas reglas las
   seis marcas se caen a una sola columna en un sitio que hoy se ve bien, así
   que la retícula se mantiene como puente. Se puede borrar —junto con sus dos
   overrides del responsive— cuando todos los sitios estén re-sembrados. */
.oc-est-marcas__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	justify-items: center;
	gap: 34px 30px;
	margin-bottom: 46px;
}

/* Las marcas nuevas van en el mismo carrusel que cierra el Catálogo: la caja
   gris y las flechas de trazo son las de allí, para que las dos páginas se
   lean como la misma pieza. */
.oc-est-marcas-carousel {
	position: relative;
	box-sizing: border-box;
	padding: 0 70px;
	margin-bottom: 46px;
}

.oc-est-marcas-carousel .oc-carousel__arrow {
	width: 46px;
	height: 46px;
	background: transparent;
	box-shadow: none;
	border: 2px solid var(--wp--preset--color--teal-bright, #35DBE7);
	color: var(--wp--preset--color--teal-bright, #35DBE7);
}

.oc-est-marcas-carousel .oc-carousel__arrow:hover {
	background: var(--wp--preset--color--teal-bright, #35DBE7);
	color: #fff;
}

.oc-est-marcas-carousel .oc-carousel__arrow--prev {
	left: 6px;
}

.oc-est-marcas-carousel .oc-carousel__arrow--next {
	right: 6px;
}

.oc-est-marca {
	margin: 0;
}

/* Dentro del carrusel cada marca va en una caja gris, como en el Catálogo. La
   caja se acota al carrusel a propósito: en la rejilla anterior los logotipos
   iban sueltos sobre el fondo, y sin acotarla las páginas aún sin re-sembrar
   se llenarían de cajas grises que su diseño no tiene. */
.oc-est-marcas-carousel .oc-est-marca {
	padding: 26px 18px;
	background: var(--wp--preset--color--mist, #F2F2F2);
}

.oc-est-marca img {
	display: block;
	width: auto;
	max-width: 100%;
	/* Alto común para que los logotipos pesen lo mismo pese a sus proporciones. */
	height: 46px;
	margin-inline: auto;
	object-fit: contain;
}

/* Píldora de borde degradado: el diseño la trae como imagen; aquí es un borde
   real para que el texto siga siendo texto. */
.oc-est-pill {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 14px 40px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(90deg, var(--wp--preset--color--sky, #4A9FD4) 0%, var(--wp--preset--color--teal, #14A0BE) 50%, #00C2C7 100%) border-box;
	color: var(--wp--preset--color--slate-soft, #616161);
	font-size: clamp(12px, 1.2vw, 16px);
	letter-spacing: 3px;
	text-transform: uppercase;
}

/* ---------- Tipos de rostro ---------- */
.oc-est-rostros {
	/* El CTA compartido pinta su interior con esta variable. */
	--oc-cta-bg: var(--wp--preset--color--mist, #F2F2F2);
	background: var(--wp--preset--color--mist, #F2F2F2);
	padding-block: 64px 76px;
}

.oc-est-rostros__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 54px 40px;
}

/* ALINEAR LAS TARJETAS DE UNA MISMA FILA
   Cada tarjeta son dos piezas apiladas —el nombre y el cuerpo (ilustración +
   texto)— pero hasta ahora se apilaban dentro de la tarjeta, sin relación con
   las vecinas. «Triángulo invertido» es el único rótulo que ocupa dos líneas,
   así que empujaba su cuerpo 26px hacia abajo y esa fila dejaba de estar
   alineada con las otras dos tarjetas.

   Con `subgrid` la tarjeta deja de repartir su alto y cede sus dos filas a la
   retícula de arriba: el nombre de las tres tarjetas comparte track y el
   cuerpo también, así que las ilustraciones arrancan a la misma altura sea
   cual sea el largo del rótulo. No hace falta reservar dos líneas a todos los
   nombres, que en el móvil (una sola columna) habría dejado un hueco muerto
   bajo cada uno.

   La separación entre nombre y cuerpo la sigue poniendo el `margin-bottom` de
   `.oc-est-rostro__name`; de ahí el `row-gap: 0`, que anula el hueco de fila
   que la tarjeta heredaría del contenedor (54px) para los tracks que ocupa.
   Entre filas de tarjetas sí manda el del contenedor, porque ninguna tarjeta
   cruza ese hueco.

   Va dentro de `@supports` porque sin subgrid el `grid-row: span 2` solo
   descuadraría la retícula: donde no haya soporte se queda el comportamiento
   de antes, que es correcto salvo por este desnivel. */
@supports (grid-template-rows: subgrid) {
	.oc-est-rostro {
		display: grid;
		grid-row: span 2;
		grid-template-rows: subgrid;
		row-gap: 0;
	}
}

.oc-est-rostro__name {
	color: var(--wp--preset--color--slate-soft, #616161);
	font-size: clamp(17px, 1.7vw, 23px);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 14px;
	/* Centrado sobre la ilustración, no sobre la tarjeta entera. */
	width: 52%;
}

.oc-est-rostro__body {
	display: grid;
	grid-template-columns: 52% 1fr;
	gap: 16px;
	align-items: start;
}

.oc-est-rostro__img {
	margin: 0;
}

.oc-est-rostro__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

.oc-est-rostro__text {
	color: var(--wp--preset--color--slate-soft, #616161);
	font-size: 13.5px;
	line-height: 1.45;
	margin: 0;
}

/* La silueta encabeza el texto (bloque optica-curacao/icon). */
.oc-est-rostro__glyph {
	display: block;
	margin-bottom: 10px;
	line-height: 0;
	color: var(--wp--preset--color--slate-soft, #616161);
}

/* =========================================================
   Responsive
   El diseño sólo define escritorio; aquí van las decisiones para tablet y
   móvil, con los mismos cortes que usa la otra página de campaña (packs.css).
   ========================================================= */

/* ---------- Tablet (<= 980px) ---------- */
@media (max-width: 980px) {
	/* El banner trae el texto incrustado y a esta anchura la franja quedaría
	   demasiado baja para leerlo: se recorta por la derecha (donde sólo hay
	   modelos) y se conserva el titular.

	   El recorte es para el panorámico, no para la pieza vertical, que ya viene
	   compuesta para pantallas estrechas. Se excluye por `:not()` en vez de
	   apuntar a `--ancho` para que también alcance a las páginas todavía sin
	   re-sembrar, cuyo hero es un solo `.oc-est-hero__img` sin modificador. */
	.oc-est-hero__img:not(.oc-est-hero__img--movil) img {
		aspect-ratio: 3 / 1;
		object-fit: cover;
		object-position: left center;
	}

	.oc-est-title {
		margin-bottom: 38px;
	}

	.oc-btn-catalogo .wp-block-button__link {
		font-size: 19px;
		padding: 13px 36px;
	}

	.oc-est-row {
		gap: 20px;
	}

	.oc-est-marcas__grid {
		gap: 26px 20px;
	}

	.oc-est-marcas-carousel {
		padding: 0 54px;
	}

	.oc-est-marcas-carousel .oc-carousel__arrow {
		width: 40px;
		height: 40px;
	}

	.oc-est-marca img {
		height: 38px;
	}

	.oc-est-rostros__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 44px 34px;
	}
}

/* ---------- Móvil (<= 640px) ---------- */
@media (max-width: 640px) {
	/* Hasta ahora el móvil recortaba el panorámico a 2.4/1 porque no había
	   pieza vertical. Ya la hay, así que se cambia de imagen en vez de
	   recortarla: el texto del banner deja de encogerse con el ancho. */
	.oc-est-hero__img--ancho {
		display: none;
	}

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

	.oc-btn-catalogo .wp-block-button__link {
		font-size: 17px;
		padding: 12px 30px;
	}

	/* El zigzag se apila: imagen y debajo su texto, centrado. */
	.oc-est-zigzag {
		gap: 34px;
	}

	.oc-est-row,
	.oc-est-row.is-flip {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.oc-est-row.is-flip .oc-est-row__img,
	.oc-est-row.is-flip .oc-est-row__text {
		grid-column: 1;
		grid-row: auto;
	}

	.oc-est-row__text {
		text-align: center;
	}

	.oc-est-row__title {
		margin-bottom: 12px;
	}

	.oc-est-marcas {
		padding-bottom: 50px;
	}

	.oc-est-marcas__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 18px;
		margin-bottom: 34px;
	}

	.oc-est-marcas-carousel {
		padding: 0 34px;
		margin-bottom: 34px;
	}

	.oc-est-marcas-carousel .oc-carousel__arrow {
		width: 34px;
		height: 34px;
	}

	.oc-est-marca img {
		height: 32px;
	}

	.oc-est-pill {
		padding: 12px 22px;
		letter-spacing: 1.6px;
	}

	.oc-est-rostros {
		padding-block: 46px 56px;
	}

	.oc-est-rostros__grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	/* La tarjeta sigue siendo horizontal (ilustración + texto): apilarla dejaría
	   la ilustración enorme y el texto suelto. */
	.oc-est-rostro__name,
	.oc-est-rostro__body {
		max-width: 420px;
		margin-inline: auto;
	}

	.oc-est-rostro__name {
		width: 42%;
		max-width: 176px;
		margin-inline: 0;
	}

	.oc-est-rostro__body {
		grid-template-columns: 42% 1fr;
		gap: 14px;
	}
}