/* =========================================================================
   Mastercoip 2026 — página «Gracias».

   Adonde llegan los formularios al enviarse (inc/pages/gracias.php). No hay
   artboard: es hermana de la 404 —la misma banda lila a sangre, el texto en
   crema y la píldora de vuelta a la portada—, con un tick donde la 404 lleva
   el «404». Todo centrado, en vertical y en horizontal.
   ========================================================================= */

.coip-gracias {
	/* Tamaños a 1920 que se reducen por breakpoint. El titular es el «Page
	   not found» de la 404: Bold 80/96. */
	--coip-gracias-icono: 72px;
	--coip-gracias-titulo: 80px;
	--coip-gracias-gap-titulo: 24px;
	--coip-gracias-gap-texto: 28px;
	--coip-gracias-gap-cta: 50px;

	display: flex;
	align-items: center;
	justify-content: center;
	/* La banda ocupa lo que queda de ventana bajo la barra superior y el menú. */
	min-height: calc(100vh - var(--coip-topbar-h) - var(--coip-navbar-h));
	min-height: calc(100svh - var(--coip-topbar-h) - var(--coip-navbar-h));
	padding-block: 60px;
	background: var(--coip-lilac);
	color: var(--coip-cream);
	text-align: center;
}

.coip-gracias__inner {
	width: 100%;
	max-width: calc(var(--coip-container) + (var(--coip-gutter) * 2));
	padding-inline: var(--coip-gutter);
}

/* El tick de «Mi cuenta» (cuenta-ok.svg): trazo en currentColor, o sea crema. */
.coip-gracias__icono {
	display: block;
	width: var(--coip-gracias-icono);
	height: var(--coip-gracias-icono);
	margin-inline: auto;
}

.coip-gracias__icono svg {
	display: block;
	width: 100%;
	height: 100%;
}

.coip-gracias__title {
	margin: var(--coip-gracias-gap-titulo) 0 0;
	font-size: var(--coip-gracias-titulo);
	line-height: var(--coip-lh);
	font-weight: 700;
}

.coip-gracias__text {
	max-width: 623px;
	margin: var(--coip-gracias-gap-texto) auto 0;
	font-size: var(--coip-fs-body);
	line-height: var(--coip-lh);
	font-weight: 400;
}

/* -------------------------------------------------------------------------
   CTA «VUELVE A LA HOME»
   La píldora de la 404: 417 x 40, borde de 1 px y radio 20. El rótulo se
   centra en el hueco que queda a la izquierda del chevron.

   Gesto 2 del lenguaje de hover (base.css): se rellena en crema y el rótulo
   pasa al violeta, como en la 404. Para eso la familia está en FAMILIAS, en
   assets/js/cta-fx.js; aquí sólo se dicen los dos colores.
   ---------------------------------------------------------------------- */

.coip-gracias__cta {
	--coip-fx-fill: var(--coip-cream);
	--coip-fx-ink: var(--coip-violet);

	display: flex;
	align-items: center;
	width: 417px;
	max-width: 100%;
	height: 40px;
	margin: var(--coip-gracias-gap-cta) auto 0;
	/* 11 px + el borde de 1 px = los 12 px de hueco del chevron. */
	padding-inline: 11px;
	border: 1px solid currentColor;
	border-radius: var(--coip-radius);
	font-size: var(--coip-fs-ui);
	line-height: var(--coip-lh-ui);
	font-weight: 500;
}

.coip-gracias__cta-label {
	flex: 1 1 auto;
	text-align: center;
}

.coip-gracias__cta-chevron {
	flex: none;
}

/* El contorno de teclado va en crema: con la píldora rellena, currentColor ya
   es el violeta y se perdería contra la banda. */
.coip-gracias__cta:focus-visible {
	outline: 2px solid var(--coip-cream);
	outline-offset: 3px;
}

.coip-gracias__cta:focus-visible .coip-gracias__cta-chevron {
	transform: translateX(var(--coip-nudge));
}

@media (hover: hover) and (pointer: fine) {
	.coip-gracias__cta:hover .coip-gracias__cta-chevron {
		transform: translateX(var(--coip-nudge));
	}
}

/* -------------------------------------------------------------------------
   Breakpoints
   ---------------------------------------------------------------------- */

@media (max-width: 1279px) {
	.coip-gracias {
		--coip-gracias-titulo: 64px;
	}
}

@media (max-width: 1023px) {
	.coip-gracias {
		--coip-gracias-titulo: 56px;
		--coip-gracias-gap-cta: 44px;
	}
}

@media (max-width: 767px) {
	.coip-gracias {
		--coip-gracias-icono: 56px;
		--coip-gracias-titulo: 44px;
		--coip-gracias-gap-titulo: 20px;
		--coip-gracias-gap-texto: 20px;
		--coip-gracias-gap-cta: 36px;

		padding-block: 48px;
	}

	.coip-gracias__text {
		font-size: 18px;
	}
}

@media (max-width: 479px) {
	.coip-gracias {
		--coip-gracias-titulo: 36px;
	}
}