/* =========================================================
   Óptica La Curacao — Página Crédito (antes del formulario)
   "¿Ya viste? Pequeñas cuotas a la vista".

   El formulario (shortcode/iframe) va después de este bloque y no lleva
   estilos propios aquí: se mantiene tal cual estaba.
   ========================================================= */

/* Acentos propios del diseño: no calzan con la paleta de theme.json. */
.oc-credito {
	--oc-credito-teal: #4FAEB5;
	--oc-credito-azul: #3A82AB;
	--oc-credito-gris: #7C7C7C;
}

/* ---------- Hero ---------- */
.oc-credito-hero {
	position: relative;
}

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

.oc-credito-hero__img img {
	display: block;
	width: 100%;
	height: auto;
}

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

/* ---------- "Elije lo que más te gusta" ---------- */
.oc-credito-elige {
	padding-block: 54px 10px;
	text-align: center;
}

.oc-credito-elige__title {
	color: var(--wp--preset--color--slate, #4D4D4D);
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 40px;
}

.oc-credito-elige__title strong {
	font-weight: 800;
}

/* Mismo carrusel que Catálogo/Estilo/Se van, pero aquí las monturas van
   sueltas sobre el blanco de la sección (sin caja ni borde) y las flechas son
   un círculo macizo, no de trazo. */
.oc-credito-carousel {
	position: relative;
	box-sizing: border-box;
	padding: 0 60px;
}

.oc-credito-carousel .oc-carousel__arrow {
	width: 46px;
	height: 46px;
	background: var(--oc-credito-teal, #4FAEB5);
	box-shadow: none;
	border: none;
	color: #fff;
}

.oc-credito-carousel .oc-carousel__arrow:hover {
	background: var(--wp--preset--color--teal-dark, #0C86A2);
	color: #fff;
}

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

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

.oc-credito-montura {
	margin: 0;
}

.oc-credito-montura img {
	display: block;
	width: 100%;
	height: auto;
}

/* Flecha decorativa: invita a seguir bajando hacia "Estrena hoy". */
.oc-credito-elige__flecha {
	margin-top: 28px;
	color: var(--wp--preset--color--teal, #14A0BE);
}

.oc-credito-elige__flecha .oc-icono {
	transform: rotate(90deg);
}

/* ---------- Estrena hoy + ayuda ---------- */
.oc-credito-cta {
	padding-block: 46px 60px;
}

/* En el diseño esta fila queda más adentro que el carrusel de arriba (que
   llega borde a borde salvo por el hueco de las flechas): no comparte el
   mismo ancho de contenido. */
.oc-credito-cta__row {
	gap: 24px;
	padding-inline: 120px;
}

.oc-credito-cta__titulo {
	color: var(--oc-credito-gris);
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 14px;
}

.oc-credito-cta__titulo strong {
	color: var(--oc-credito-gris);
	font-weight: 800;
}

.oc-credito-cta__pill {
	display: inline-block;
	margin: 0;
	padding: 12px 34px;
	border-radius: 999px;
	background: linear-gradient(90deg, #5ECCC6 0%, #4DA8B9 100%);
	color: #fff;
	font-weight: 800;
	font-size: clamp(18px, 2vw, 24px);
}

.oc-credito-cta__ayuda {
	text-align: left;
}

.oc-credito-cta__faq {
	margin: 0 0 14px;
}

.oc-credito-cta__faq a {
	color: var(--oc-credito-azul);
	font-weight: 800;
	font-size: clamp(14px, 1.3vw, 17px);
	letter-spacing: .5px;
	text-decoration: underline;
}

.oc-credito-cta__whatsapp {
	color: #919191;
	font-weight: 800;
	font-size: clamp(13px, 1.1vw, 15px);
	line-height: 1.5;
	margin: 0;
}

/* El ícono va por CSS y no como <svg> dentro del párrafo: el bloque Párrafo
   no admite SVG, así que en el editor no se veía y, al editar y guardar ese
   texto, se borraba del contenido. El <span> con SVG de las páginas creadas
   antes se oculta para no duplicar el ícono. */
.oc-credito-cta__whatsapp-ico {
	display: none;
}

.oc-credito-cta__whatsapp-num {
	color: #919191;
	font-weight: 800;
	font-size: clamp(18px, 1.8vw, 24px);
	vertical-align: middle;
}

.oc-credito-cta__whatsapp-num::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin: 0 8px 0 2px;
	vertical-align: -3px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%234FAEB5'/%3E%3Cpath fill='%23fff' d='M8.62 12.79c1.13 2.22 2.95 4.04 5.17 5.17l1.73-1.73c.21-.21.53-.28.8-.19.88.29 1.83.45 2.81.45.43 0 .78.35.78.78v2.71c0 .43-.35.78-.78.78C11.76 20.76 5.24 14.24 5.24 5.85c0-.43.35-.78.78-.78h2.72c.43 0 .78.35.78.78 0 .98.16 1.93.45 2.81.09.27.02.58-.2.8l-1.75 1.75z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- "solicita tu crédito" ---------- */
.oc-credito-solicita {
	color: var(--oc-credito-azul);
	font-size: clamp(28px, 3.6vw, 46px);
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 40px;
}

.oc-credito-solicita strong {
	color: var(--oc-credito-azul);
	font-weight: 800;
}

/* ---------- Formulario ----------
   El iframe se mantiene tal cual (no es parte de este rediseño); esto sólo lo
   centra y le da aire abajo. */
.oc-credito-formulario {
	text-align: center;
	padding-block: 0 60px;
}

.oc-credito-formulario iframe {
	max-width: 100%;
}

/* El formulario de Unicomer trae una imagen rota (su propio logo) pegada a
   la esquina superior izquierda. No podemos tocar el iframe (es contenido
   de otro dominio), así que la tapamos con un parche del color de fondo. */
.oc-credito-form-shim {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.oc-credito-form-patch {
	position: absolute;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	background: #fff;
	pointer-events: none;
}

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

/* ---------- Tablet (<= 980px) ---------- */
@media (max-width: 980px) {
	.oc-credito-carousel {
		padding: 0 54px;
	}

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

	.oc-credito-cta__row {
		padding-inline: 40px;
	}
}

/* ---------- Móvil (<= 640px) ---------- */
@media (max-width: 640px) {
	/* El banner trae el texto y la etiqueta incrustados: se cambia de imagen
	   en vez de recortarla, igual que en Estilo. */
	.oc-credito-hero__img--ancho {
		display: none;
	}

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

	.oc-credito-elige {
		padding-block: 40px 4px;
	}

	.oc-credito-elige__title {
		margin-bottom: 28px;
	}

	.oc-credito-carousel {
		padding: 0 36px;
	}

	.oc-credito-carousel .oc-carousel__arrow {
		width: 32px;
		height: 32px;
	}

	.oc-credito-carousel .oc-carousel__arrow--prev {
		left: 0;
	}

	.oc-credito-carousel .oc-carousel__arrow--next {
		right: 0;
	}

	.oc-credito-cta {
		padding-block: 34px 44px;
		text-align: center;
	}

	.oc-credito-cta__row {
		flex-direction: column;
		align-items: center;
		padding-inline: 0;
	}

	.oc-credito-cta__ayuda {
		text-align: center;
	}

	.oc-credito-solicita {
		margin-bottom: 28px;
	}
}