/**
 * Botón de Arrepentimiento: el formulario debajo del texto legal.
 *
 * Se apoya en los mismos tokens y en la misma trampa antibots (`.hbg-hp`) que
 * el formulario de presupuesto de Servicios.
 */

.hbg-arrep {
	/* `div.site` es un flex en columna: sin esto la sección se estira a su
	   contenido mínimo. Ya pasó con la portada. */
	width: 100%;
	min-width: 0;
	max-width: var(--hbg-ancho-max);
	margin-inline: auto;
	padding-inline: var(--hbg-e5);
	padding-block: 0 var(--hbg-e8);
}

.hbg-arrep__inner {
	max-width: 640px;
	padding: var(--hbg-e6);
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	border-radius: var(--hbg-radio);
}

.hbg-arrep__titulo {
	margin: 0 0 var(--hbg-e5);
	font-family: var(--hbg-fuente-titulo);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--hbg-texto);
}

/* ------------------------------- campos -------------------------------- */

.hbg-arrep__form .hbg-form__campo {
	display: grid;
	gap: var(--hbg-e2);
	margin: 0 0 var(--hbg-e4);
}

.hbg-arrep__form label {
	color: var(--hbg-texto-suave);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.9rem;
	font-weight: 600;
}

.hbg-arrep__form label span {
	color: var(--hbg-neon);
}

.hbg-arrep__form input,
.hbg-arrep__form textarea {
	width: 100%;
	min-height: 48px;
	padding: var(--hbg-e3);
	background: var(--hbg-superficie-2);
	border: 1px solid var(--hbg-borde-fuerte);
	border-radius: var(--hbg-radio-sm);
	color: var(--hbg-texto);
	font-family: var(--hbg-fuente-texto);
	font-size: 1rem;
}

.hbg-arrep__form textarea {
	min-height: 110px;
	resize: vertical;
}

.hbg-arrep__form input:focus-visible,
.hbg-arrep__form textarea:focus-visible {
	outline: 2px solid var(--hbg-neon);
	outline-offset: 2px;
	border-color: var(--hbg-neon);
}

/* --------------------------- errores y avisos --------------------------- */

.hbg-arrep__form .is-error input,
.hbg-arrep__form .is-error textarea {
	border-color: var(--hbg-error);
}

.hbg-form__aviso {
	color: var(--hbg-error);
	font-size: 0.85rem;
}

.hbg-arrep__error {
	margin: 0 0 var(--hbg-e4);
	padding: var(--hbg-e3) var(--hbg-e4);
	background: rgba(255, 92, 92, 0.1);
	border: 1px solid rgba(255, 92, 92, 0.45);
	border-radius: var(--hbg-radio-sm);
	color: var(--hbg-error);
	font-size: 0.92rem;
}

.hbg-arrep__nota {
	margin: 0 0 var(--hbg-e5);
	color: var(--hbg-texto-tenue);
	font-size: 0.85rem;
}

/* Confirmación. Reemplaza al formulario entero, así no queda la tentación de
   volver a enviar lo mismo. */
.hbg-arrep__ok {
	margin: 0;
	padding: var(--hbg-e5);
	background: rgba(57, 255, 20, 0.08);
	border: 1px solid rgba(57, 255, 20, 0.45);
	border-radius: var(--hbg-radio-sm);
	color: var(--hbg-texto);
	font-size: 1.02rem;
	line-height: 1.6;
}

@media (max-width: 640px) {
	.hbg-arrep__inner {
		padding: var(--hbg-e4);
	}
}