/* =========================================================
   Óptica La Curacao — Página Protección
   Tratamientos SoClear, SunFast Colors y BlueBlock.

   Los colores salen de la paleta de theme.json (`--wp--preset--color--*`), así
   que cambiarlos en Apariencia → Editor → Estilos repinta la página.
   ========================================================= */

/* ---------- Hero ----------
   El diseño entrega dos recortes distintos, uno ancho y otro para móvil, así
   que aquí no se recorta nada: se muestra el que toca. */
.oc-prot-hero,
.oc-prot-hero__img,
.oc-prot-hero__img img {
	display: block;
	margin: 0;
}

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

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

/* ---------- Clarity ----------
   Presenta la línea de lentes digitales antes de los tratamientos: la
   ilustración y el logotipo a la izquierda, las preguntas y la explicación a
   la derecha. */
.oc-prot-clarity {
	padding-block: 64px 20px;
}

.oc-prot-clarity__grid {
	display: grid;
	grid-template-columns: 38% 1fr;
	gap: 40px;
	align-items: start;
	margin-bottom: 46px;
}

.oc-prot-clarity__lentes {
	max-width: 420px;
	margin: 0 0 26px;
}

.oc-prot-clarity__lentes img {
	display: block;
	width: 100%;
	height: auto;
}

.oc-prot-clarity__logo {
	max-width: 280px;
	margin: 0;
}

.oc-prot-clarity__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Las tres preguntas se escalonan hacia la derecha y se oscurecen, como en el
   diseño: cada una es un párrafo real (no una imagen) para que el contenido
   siga siendo editable. */
.oc-prot-clarity__bubbles {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	margin-bottom: 34px;
}

.oc-prot-clarity__bubble {
	display: inline-block;
	margin: 0;
	padding: 12px 28px;
	border-radius: 999px;
	color: #fff;
	font-weight: 800;
	font-size: clamp(16px, 1.6vw, 22px);
	white-space: nowrap;
}

.oc-prot-clarity__bubble.is-1 {
	background: #9DC8EE;
	margin-right: 34%;
}

.oc-prot-clarity__bubble.is-2 {
	background: #3AA0E1;
	margin-right: 17%;
}

.oc-prot-clarity__bubble.is-3 {
	background: #0080CB;
	margin-right: 0;
}

.oc-prot-clarity__title {
	color: var(--wp--preset--color--ink, #3F4A54);
	font-size: clamp(20px, 2.2vw, 30px);
	font-weight: 400;
	letter-spacing: 3px;
	text-transform: uppercase;
	line-height: 1.35;
	margin: 0 0 22px;
}

.oc-prot-clarity__title mark {
	letter-spacing: -.5px;
	text-transform: none;
}

.oc-prot-clarity__title strong {
	color: var(--wp--preset--color--blue-deep, #065B9C);
	font-weight: 800;
	font-size: clamp(26px, 2.9vw, 40px);
}

.oc-prot-clarity__lead {
	color: var(--wp--preset--color--slate, #4D4D4D);
	font-size: clamp(16px, 1.5vw, 20px);
	margin: 0 0 14px;
}

.oc-prot-clarity__list {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--slate-soft, #6F6F6F);
	font-size: clamp(15px, 1.4vw, 19px);
	line-height: 1.4;
}

.oc-prot-clarity__list li {
	position: relative;
	margin: 0 0 20px;
	padding-left: 28px;
}

.oc-prot-clarity__list li:last-child {
	margin-bottom: 0;
}

.oc-prot-clarity__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 12px;
	height: 12px;
	transform: translateY(-50%) rotate(45deg);
	background: var(--wp--preset--color--teal-deep, #0186B1);
}

.oc-prot-clarity__list strong {
	color: var(--wp--preset--color--slate, #4D4D4D);
	font-weight: 800;
}

.oc-prot-clarity__desc {
	max-width: 900px;
	color: var(--wp--preset--color--slate-soft, #6F6F6F);
	font-size: clamp(15px, 1.4vw, 19px);
	line-height: 1.6;
	margin: 0 auto 50px;
}

.oc-prot-clarity__cta {
	color: var(--wp--preset--color--blue-deep, #065B9C);
	font-size: clamp(26px, 3.2vw, 44px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.5px;
	margin: 0;
}

/* ---------- Tratamientos ---------- */
.oc-prot-tratamientos {
	padding-block: 40px 20px;
}

.oc-prot-row {
	position: relative;
	display: grid;
	grid-template-columns: 46% 1fr;
	align-items: center;
	margin-bottom: 46px;
}

/* La tarjeta ocupa toda la fila y se desvanece hacia el lado de la foto; el
   diseño la dibuja así para que la imagen no tenga que recortarse contra un
   borde duro. */
.oc-prot-row::before {
	content: "";
	position: absolute;
	inset: 12% 0;
	border-radius: 34px;
	background: linear-gradient(90deg, #FFFFFF 0%, var(--wp--preset--color--mist-soft, #F7F7F7) 34%, var(--wp--preset--color--mist, #F2F2F2) 100%);
}

.oc-prot-row.is-flip {
	grid-template-columns: 1fr 46%;
}

.oc-prot-row.is-flip::before {
	background: linear-gradient(270deg, #FFFFFF 0%, var(--wp--preset--color--mist-soft, #F7F7F7) 34%, var(--wp--preset--color--mist, #F2F2F2) 100%);
}

.oc-prot-row.is-flip .oc-prot-row__img {
	grid-column: 2;
	grid-row: 1;
}

.oc-prot-row.is-flip .oc-prot-row__body {
	grid-column: 1;
	grid-row: 1;
}

/* La foto va montada sobre la tarjeta y sobresale por arriba y por abajo. */
.oc-prot-row__img {
	position: relative;
	z-index: 1;
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.oc-prot-row__img img {
	display: block;
	width: 100%;
	height: auto;
}

.oc-prot-row__body {
	position: relative;
	z-index: 1;
	grid-column: 2;
	grid-row: 1;
	padding: 30px 40px 30px 10px;
}

.oc-prot-row.is-flip .oc-prot-row__body {
	padding: 30px 10px 30px 40px;
}

/* Píldora azul con el nombre del tratamiento. */
.oc-prot-pill {
	display: inline-block;
	margin: 0 0 14px;
	padding: 7px 26px;
	border-radius: 999px;
	background: var(--wp--preset--color--blue-soft, #699CD5);
	color: #fff;
	font-size: clamp(12px, 1.1vw, 15px);
	font-weight: 700;
	line-height: 1.3;
}

.oc-prot-logo {
	margin: 0 0 18px;
}

.oc-prot-logo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: clamp(38px, 4.4vw, 62px);
	object-fit: contain;
}

/* Listas de beneficios. El rombo del diseño va en tres tonos que descienden
   del teal al azul y se repiten cada tres ítems. */
.oc-prot-list {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--slate-soft, #6F6F6F);
	font-size: clamp(14px, 1.35vw, 19px);
	line-height: 1.4;
}

/* Dos columnas que se llenan de arriba abajo (no en zigzag): el diseño pone
   los dos primeros beneficios en la columna izquierda. */
.oc-prot-list.is-cols {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	grid-template-columns: 1fr 1fr;
	column-gap: 26px;
}

.oc-prot-list li {
	position: relative;
	margin: 0 0 10px;
	padding-left: 26px;
}

.oc-prot-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 11px;
	height: 11px;
	transform: translateY(-50%) rotate(45deg);
	background: #45B8BD;
}

.oc-prot-list li:nth-child(3n + 2)::before {
	background: #00A0B3;
}

.oc-prot-list li:nth-child(3n)::before {
	background: #0581AC;
}

/* ---------- Paleta de SunFast ---------- */
.oc-prot-colores {
	display: grid;
	grid-template-columns: 26% 1fr;
	align-items: center;
	gap: 20px;
	margin-bottom: 56px;
	padding: 22px 30px;
	border-radius: 26px;
	background: linear-gradient(90deg, var(--wp--preset--color--mist, #F2F2F2) 0%, var(--wp--preset--color--mist-soft, #F7F7F7) 62%, #FFFFFF 100%);
}

.oc-prot-colores__title {
	color: var(--wp--preset--color--slate, #4D4D4D);
	font-size: clamp(17px, 1.8vw, 25px);
	font-weight: 800;
	line-height: 1.2;
	margin: 0;
}

.oc-prot-colores__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
}

.oc-prot-color__ball {
	margin: 0 0 4px;
}

/* El rótulo del archivo se recorta con la proporción del bloque (ver el
   pattern): aquí sólo el encuadre. */
.oc-prot-color__ball img {
	display: block;
	width: 100%;
	max-width: 74px;
	margin-inline: auto;
	object-fit: cover;
	object-position: center top;
}

.oc-prot-color__name {
	color: var(--wp--preset--color--slate-soft, #6F6F6F);
	font-size: clamp(11px, 1vw, 14px);
	margin: 0;
}

/* ---------- Cierre ---------- */
.oc-prot-cierre {
	padding-block: 40px 80px;
}

.oc-prot-cierre__eyebrow {
	color: var(--wp--preset--color--slate-soft, #6F6F6D);
	font-size: clamp(12px, 1.3vw, 18px);
	letter-spacing: 4px;
	text-transform: uppercase;
	margin: 0 0 6px;
}

.oc-prot-cierre__title {
	color: var(--wp--preset--color--teal-deep, #0186B1);
	font-size: clamp(34px, 5vw, 66px);
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1.1;
	margin: 0 0 34px;
}

/* =========================================================
   Responsive
   El diseño define escritorio y entrega además el banner de móvil; el resto de
   decisiones para tablet y móvil van aquí, con los mismos cortes que el resto
   de páginas de campaña.
   ========================================================= */

/* ---------- Tablet (<= 980px) ---------- */
@media (max-width: 980px) {
	.oc-prot-clarity__grid {
		grid-template-columns: 32% 1fr;
		gap: 26px;
	}

	.oc-prot-clarity__bubble.is-1 {
		margin-right: 20%;
	}

	.oc-prot-clarity__bubble.is-2 {
		margin-right: 8%;
	}

	.oc-prot-row,
	.oc-prot-row.is-flip {
		grid-template-columns: 42% 1fr;
	}

	.oc-prot-row.is-flip {
		grid-template-columns: 1fr 42%;
	}

	.oc-prot-row__body,
	.oc-prot-row.is-flip .oc-prot-row__body {
		padding: 24px 26px;
	}

	.oc-prot-colores {
		grid-template-columns: 1fr;
		gap: 16px;
		text-align: center;
	}

	.oc-prot-colores__title {
		text-align: center;
	}
}

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

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

	.oc-prot-clarity {
		padding-top: 44px;
	}

	.oc-prot-clarity__grid {
		grid-template-columns: 1fr;
		gap: 10px;
		text-align: center;
	}

	.oc-prot-clarity__media {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.oc-prot-clarity__lentes,
	.oc-prot-clarity__logo {
		margin-inline: auto;
	}

	.oc-prot-clarity__bubbles {
		align-items: center;
		margin-top: 24px;
	}

	.oc-prot-clarity__bubble.is-1,
	.oc-prot-clarity__bubble.is-2,
	.oc-prot-clarity__bubble.is-3 {
		margin-right: 0;
	}

	.oc-prot-clarity__list {
		display: inline-block;
		text-align: left;
	}

	/* La tarjeta se apila: foto arriba y contenido debajo, con la tarjeta ya
	   como caja completa (el degradado lateral no se aprecia apilado). */
	.oc-prot-row,
	.oc-prot-row.is-flip {
		grid-template-columns: 1fr;
		margin-bottom: 34px;
	}

	.oc-prot-row::before,
	.oc-prot-row.is-flip::before {
		inset: 34% 0 0;
		border-radius: 26px;
		background: var(--wp--preset--color--mist, #F2F2F2);
	}

	.oc-prot-row__img,
	.oc-prot-row.is-flip .oc-prot-row__img {
		grid-column: 1;
		grid-row: 1;
		width: 74%;
		margin-inline: auto;
	}

	.oc-prot-row__body,
	.oc-prot-row.is-flip .oc-prot-row__body {
		grid-column: 1;
		grid-row: 2;
		padding: 0 22px 28px;
		text-align: center;
	}

	.oc-prot-pill {
		margin-bottom: 12px;
	}

	.oc-prot-logo img {
		margin-inline: auto;
	}

	/* Las viñetas siguen alineadas a la izquierda aunque el bloque se centre:
	   una lista centrada con rombos delante se lee mal. */
	.oc-prot-list {
		display: inline-block;
		text-align: left;
	}

	.oc-prot-list.is-cols {
		display: inline-grid;
		grid-template-columns: 1fr;
	}

	.oc-prot-colores {
		margin-bottom: 34px;
		padding: 20px 16px;
	}

	.oc-prot-colores__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px 10px;
	}

	.oc-prot-cierre {
		padding-block: 20px 56px;
	}

	.oc-prot-cierre__eyebrow {
		letter-spacing: 2px;
	}
}