/* ==========================================================================
   Formulario de enrolamiento — Hispana de Seguros

   Todo cuelga de `.hs-enrol` por dos razones: aísla el formulario del tema
   (Astra usa selectores como `.entry-content h3`, que ganarían a una clase
   suelta) y deja claro qué pertenece al plugin.

   Índice
     1. Tokens
     2. Base
     3. Cabecera
     4. Barra de progreso
     5. Pasos
     6. Rejilla
     7. Campos
     8. Preguntas de salud
     9. Beneficiarios
    10. Aceptación
    11. Verificación
    12. Botones
    13. Navegación y final
    14. Responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */

.hs-enrol {
	/* Color */
	--hs-dorado: #8D6301;
	--hs-dorado-oscuro: #6F4E01;
	--hs-crema: #FBF7EF;
	--hs-crema-borde: #EFE6D2;
	--hs-tinta: #2E2A24;
	--hs-tenue: #6B6459;
	--hs-borde: #DCD8D0;
	--hs-fondo: #FFFFFF;
	--hs-inerte: #F6F4F0;
	--hs-error: #B3352A;
	--hs-error-fondo: #FDF6F5;
	--hs-error-borde: #EDC7C2;
	--hs-exito: #1E7B4D;
	--hs-exito-fondo: #EFF7F2;
	--hs-exito-borde: #CCE5D8;

	/* Escala tipográfica — siete pasos, sin valores sueltos fuera de aquí */
	--hs-t-micro: 11px;   /* insignias, notas legales */
	--hs-t-menor: 12px;   /* ayudas, errores, metadatos */
	--hs-t-etiqueta: 13px;/* etiquetas de campo, texto legal */
	--hs-t-base: 14px;    /* cuerpo e inputs */
	--hs-t-mayor: 16px;   /* entradas destacadas */
	--hs-t-titulo: 20px;  /* título de paso */
	--hs-t-cabecera: 26px;/* título del documento */

	/* Interlineado */
	--hs-alto-ajustado: 1.35;
	--hs-alto-normal: 1.55;
	--hs-alto-holgado: 1.75;

	/* Espaciado — múltiplos de 4 */
	--hs-e1: 4px;
	--hs-e2: 8px;
	--hs-e3: 12px;
	--hs-e4: 16px;
	--hs-e5: 20px;
	--hs-e6: 24px;
	--hs-e8: 32px;
	--hs-e10: 40px;

	/* Formas */
	--hs-radio: 12px;
	--hs-radio-chico: 8px;
	--hs-sombra: 0 1px 2px rgba(46, 42, 36, .04), 0 8px 28px rgba(46, 42, 36, .07);
	--hs-anillo: 0 0 0 3px rgba(141, 99, 1, .13);

	max-width: 980px;
	margin: 0 auto;
	padding: 0 var(--hs-e4) var(--hs-e10);
	color: var(--hs-tinta);
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: var(--hs-t-base);
	line-height: var(--hs-alto-normal);
	box-sizing: border-box;
}

/* ---------- 2. Base ------------------------------------------------------ */

.hs-enrol *,
.hs-enrol *::before,
.hs-enrol *::after {
	box-sizing: inherit;
}

/* `hidden` debe ganar a cualquier display propio (los botones son flex). */
.hs-enrol [hidden] {
	display: none !important;
}

/* ---------- 3. Cabecera -------------------------------------------------- */

.hs-enrol .hs-cabecera {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--hs-e4);
	padding: var(--hs-e10) 0 var(--hs-e2);
	margin-bottom: var(--hs-e8);
}

.hs-enrol .hs-logo {
	width: 230px;
	max-width: 100%;
	height: auto;
}

.hs-enrol .hs-cabecera__texto {
	max-width: 640px;
}

.hs-enrol .hs-cabecera__texto h1 {
	margin: 0;
	font-size: var(--hs-t-cabecera);
	line-height: var(--hs-alto-ajustado);
	font-weight: 700;
	color: var(--hs-dorado);
	text-transform: uppercase;
	text-wrap: balance;
}

.hs-enrol .hs-cabecera__texto p {
	margin: var(--hs-e1) 0 0;
	font-size: var(--hs-t-base);
	font-weight: 500;
	color: var(--hs-tenue);
	text-transform: uppercase;
}

.hs-enrol .hs-referencia {
	display: inline-flex;
	align-items: center;
	gap: var(--hs-e2);
	font-size: var(--hs-t-micro);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--hs-dorado);
}

.hs-enrol .hs-referencia small {
	font-size: var(--hs-t-micro);
	font-weight: 400;
	text-transform: none;
	color: var(--hs-tenue);
}

.hs-enrol .hs-referencia small::before {
	content: "·";
	margin-right: var(--hs-e2);
}

/* ---------- 4. Barra de progreso ----------------------------------------- */

.hs-enrol .hs-progreso {
	display: flex;
	list-style: none;
	margin: 0 0 var(--hs-e6);
	padding: 0;
}

.hs-enrol .hs-progreso__item {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hs-e2);
	text-align: center;
	padding-top: var(--hs-e1);
}

/* Línea que une los pasos */
.hs-enrol .hs-progreso__item::before {
	content: "";
	position: absolute;
	top: 20px;
	right: 50%;
	width: 100%;
	height: 2px;
	background: var(--hs-borde);
	z-index: 0;
	transition: background-color .45s ease;
}

.hs-enrol .hs-progreso__item:first-child::before {
	display: none;
}

.hs-enrol .hs-progreso__item.es-hecho::before,
.hs-enrol .hs-progreso__item.es-activo::before {
	background: var(--hs-dorado);
}

.hs-enrol .hs-progreso__punto {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--hs-fondo);
	border: 2px solid var(--hs-borde);
	color: var(--hs-tenue);
	font-size: var(--hs-t-etiqueta);
	font-weight: 600;
	transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.hs-enrol .hs-progreso__texto {
	font-size: var(--hs-t-menor);
	font-weight: 500;
	line-height: var(--hs-alto-ajustado);
	color: var(--hs-tenue);
	transition: color .25s ease;
}

/* Paso activo: late en bucle para señalar dónde estás. */
.hs-enrol .hs-progreso__item.es-activo .hs-progreso__punto {
	border-color: var(--hs-dorado);
	background: var(--hs-dorado);
	color: #fff;
	animation: hs-latido 2.2s ease-out infinite;
}

.hs-enrol .hs-progreso__item.es-activo .hs-progreso__texto {
	color: var(--hs-dorado);
	font-weight: 600;
}

@keyframes hs-latido {
	0%   { box-shadow: 0 0 0 2px rgba(141, 99, 1, .30); }
	70%  { box-shadow: 0 0 0 11px rgba(141, 99, 1, 0); }
	100% { box-shadow: 0 0 0 2px rgba(141, 99, 1, 0); }
}

/* Paso cumplido: el número se sustituye por una marca de verificación. */
.hs-enrol .hs-progreso__item.es-hecho .hs-progreso__punto {
	border-color: var(--hs-dorado);
	background: var(--hs-crema);
	color: var(--hs-dorado);
	font-size: 0;
}

/* La palomita es un SVG con el trazo centrado en su viewBox, así queda
   exactamente en el eje del círculo. Con bordes rotados nunca cuadraba. */
.hs-enrol .hs-progreso__item.es-hecho .hs-progreso__punto::after {
	content: "";
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%238D6301' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	animation: hs-marca .32s cubic-bezier(.2, 1.4, .4, 1);
}

@keyframes hs-marca {
	from { opacity: 0; transform: scale(.4); }
	to   { opacity: 1; transform: scale(1); }
}

/* ---------- 5. Pasos ----------------------------------------------------- */

.hs-enrol .hs-form {
	background: var(--hs-fondo);
	border: 1px solid var(--hs-borde);
	border-radius: var(--hs-radio);
	box-shadow: var(--hs-sombra);
	padding: var(--hs-e8);
}

.hs-enrol .hs-paso__encabezado {
	text-align: center;
	margin-bottom: var(--hs-e6);
	padding-bottom: var(--hs-e5);
	border-bottom: 1px solid var(--hs-crema-borde);
}

.hs-enrol .hs-seccion {
	display: block;
	font-size: var(--hs-t-micro);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--hs-dorado);
	margin-bottom: var(--hs-e1);
}

.hs-enrol .hs-paso__encabezado h2 {
	margin: 0;
	font-size: var(--hs-t-titulo);
	line-height: var(--hs-alto-ajustado);
	font-weight: 600;
	color: var(--hs-tinta);
	text-wrap: balance;
}

.hs-enrol .hs-paso__encabezado p {
	margin: var(--hs-e1) auto 0;
	max-width: 640px;
	font-size: var(--hs-t-base);
	color: var(--hs-tenue);
	/* Reparte los renglones en vez de dejar una palabra suelta abajo. */
	text-wrap: balance;
}

.hs-enrol .hs-subtitulo {
	grid-column: 1 / -1;
	margin: var(--hs-e3) 0 0;
	font-size: var(--hs-t-menor);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--hs-dorado);
}

/* ---------- 6. Rejilla --------------------------------------------------- */

.hs-enrol .hs-rejilla {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--hs-e5);
}

.hs-enrol .hs-col-1  { grid-column: span 1; }
.hs-enrol .hs-col-2  { grid-column: span 2; }
.hs-enrol .hs-col-3  { grid-column: span 3; }
.hs-enrol .hs-col-4  { grid-column: span 4; }
.hs-enrol .hs-col-5  { grid-column: span 5; }
.hs-enrol .hs-col-6  { grid-column: span 6; }
.hs-enrol .hs-col-12 { grid-column: 1 / -1; }

/* ---------- 7. Campos ---------------------------------------------------- */

.hs-enrol .hs-campo {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hs-enrol .hs-campo__etiqueta {
	display: block;
	margin-bottom: var(--hs-e1);
	font-size: var(--hs-t-etiqueta);
	font-weight: 500;
	line-height: var(--hs-alto-ajustado);
	color: var(--hs-tinta);
}

.hs-enrol .hs-obligatorio {
	color: var(--hs-dorado);
	font-weight: 700;
}

.hs-enrol .hs-input {
	width: 100%;
	padding: 10px var(--hs-e3);
	font-family: inherit;
	font-size: var(--hs-t-base);
	line-height: var(--hs-alto-ajustado);
	color: var(--hs-tinta);
	background: var(--hs-fondo);
	border: 1px solid var(--hs-borde);
	border-radius: var(--hs-radio-chico);
	transition: border-color .18s ease, box-shadow .18s ease;
	appearance: none;
}

.hs-enrol .hs-input::placeholder {
	color: #A8A296;
}

.hs-enrol select.hs-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6459' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--hs-e3) center;
	padding-right: var(--hs-e8);
}

.hs-enrol .hs-input:focus {
	outline: none;
	border-color: var(--hs-dorado);
	box-shadow: var(--hs-anillo);
}

.hs-enrol .hs-input[readonly] {
	background: var(--hs-inerte);
	color: var(--hs-tenue);
	cursor: not-allowed;
}

.hs-enrol textarea.hs-input {
	resize: vertical;
	min-height: 80px;
	line-height: var(--hs-alto-normal);
}

.hs-enrol .hs-campo__ayuda {
	margin: var(--hs-e1) 0 0;
	font-size: var(--hs-t-menor);
	line-height: var(--hs-alto-ajustado);
	color: var(--hs-tenue);
}

.hs-enrol .hs-campo__error {
	margin: var(--hs-e1) 0 0;
	font-size: var(--hs-t-menor);
	font-weight: 500;
	line-height: var(--hs-alto-ajustado);
	color: var(--hs-error);
}

.hs-enrol .hs-campo.es-invalido .hs-input {
	border-color: var(--hs-error);
	background: var(--hs-error-fondo);
}

.hs-enrol .hs-campo.es-invalido .hs-campo__etiqueta {
	color: var(--hs-error);
}

/* Teléfono con prefijo fijo de Ecuador */
.hs-enrol .hs-telefono {
	display: flex;
	align-items: stretch;
}

.hs-enrol .hs-telefono__pais {
	display: flex;
	align-items: center;
	gap: 3px;
	flex-shrink: 0;
	padding: 0 var(--hs-e2);
	font-size: var(--hs-t-menor);
	font-weight: 500;
	color: var(--hs-tenue);
	background: var(--hs-crema);
	border: 1px solid var(--hs-borde);
	border-right: 0;
	border-radius: var(--hs-radio-chico) 0 0 var(--hs-radio-chico);
	white-space: nowrap;
}

.hs-enrol .hs-telefono .hs-input {
	border-radius: 0 var(--hs-radio-chico) var(--hs-radio-chico) 0;
}

/* Porcentaje con sufijo */
.hs-enrol .hs-porcentaje {
	position: relative;
	display: flex;
	align-items: center;
}

.hs-enrol .hs-porcentaje .hs-input {
	padding-right: var(--hs-e6);
	text-align: right;
	-moz-appearance: textfield;
}

.hs-enrol .hs-porcentaje .hs-input::-webkit-outer-spin-button,
.hs-enrol .hs-porcentaje .hs-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.hs-enrol .hs-porcentaje span {
	position: absolute;
	right: var(--hs-e3);
	font-size: var(--hs-t-etiqueta);
	font-weight: 600;
	color: var(--hs-tenue);
	pointer-events: none;
}

/* ---------- 8. Preguntas de salud ---------------------------------------- */

/* `display: block` a propósito: .hs-campo es flex y aquí no lo queremos. */
.hs-enrol .hs-pregunta {
	display: block;
	background: var(--hs-crema);
	border: 1px solid var(--hs-crema-borde);
	border-radius: 10px;
	padding: var(--hs-e5);
}

.hs-enrol .hs-pregunta__texto {
	display: flex;
	gap: var(--hs-e3);
	align-items: flex-start;
	margin: 0 0 var(--hs-e4);
	padding: 0 0 var(--hs-e4);
	border-bottom: 1px solid var(--hs-crema-borde);
	font-size: var(--hs-t-base);
	font-weight: 500;
	line-height: var(--hs-alto-normal);
	color: var(--hs-tinta);
}

.hs-enrol .hs-pregunta__enunciado {
	flex: 1;
	min-width: 0;
}

.hs-enrol .hs-pregunta__numero {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: var(--hs-dorado);
	color: #fff;
	font-size: var(--hs-t-menor);
	font-weight: 600;
}

.hs-enrol .hs-opciones {
	display: flex;
	gap: var(--hs-e2);
}

.hs-enrol .hs-opcion {
	display: flex;
	align-items: center;
	gap: var(--hs-e2);
	padding: var(--hs-e2) var(--hs-e5);
	background: var(--hs-fondo);
	border: 1.5px solid var(--hs-borde);
	border-radius: var(--hs-radio-chico);
	font-size: var(--hs-t-base);
	font-weight: 500;
	cursor: pointer;
	transition: border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.hs-enrol .hs-opcion:hover {
	border-color: var(--hs-dorado);
}

.hs-enrol .hs-opcion input {
	accent-color: var(--hs-dorado);
	margin: 0;
}

.hs-enrol .hs-opcion:has(input:checked) {
	border-color: var(--hs-dorado);
	box-shadow: var(--hs-anillo);
	color: var(--hs-dorado);
}

/* Los detalles condicionales entran con un desliz corto */
.hs-enrol .hs-condicional {
	animation: hs-aparecer .22s ease;
}

@keyframes hs-aparecer {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- 9. Beneficiarios --------------------------------------------- */

.hs-enrol .hs-total {
	background: var(--hs-crema);
	border: 1px solid var(--hs-crema-borde);
	border-radius: 10px;
	padding: var(--hs-e4) var(--hs-e5);
	margin-bottom: var(--hs-e5);
}

.hs-enrol .hs-total__texto {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--hs-e3);
}

.hs-enrol .hs-total__etiqueta {
	font-size: var(--hs-t-menor);
	font-weight: 500;
	text-transform: uppercase;
	color: var(--hs-tenue);
}

.hs-enrol .hs-total__texto strong {
	font-size: var(--hs-t-titulo);
	font-weight: 700;
	color: var(--hs-dorado);
	transition: color .3s ease;
}

.hs-enrol .hs-total__barra {
	height: 6px;
	margin: var(--hs-e2) 0 var(--hs-e1);
	background: #E7E0D2;
	border-radius: 999px;
	overflow: hidden;
}

.hs-enrol .hs-total__barra span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--hs-dorado);
	transition: width .3s ease, background-color .3s ease;
}

.hs-enrol .hs-total.es-completo .hs-total__barra span { background: var(--hs-exito); }
.hs-enrol .hs-total.es-completo .hs-total__texto strong { color: var(--hs-exito); }
.hs-enrol .hs-total.es-completo .hs-total__nota { color: var(--hs-exito); }
.hs-enrol .hs-total.es-pasado .hs-total__barra span { background: var(--hs-error); }
.hs-enrol .hs-total.es-pasado .hs-total__texto strong { color: var(--hs-error); }
.hs-enrol .hs-total.es-pasado .hs-total__nota { color: var(--hs-error); }

.hs-enrol .hs-total__nota {
	margin: 0;
	font-size: var(--hs-t-menor);
	color: var(--hs-tenue);
}

.hs-enrol .hs-beneficiarios {
	display: flex;
	flex-direction: column;
	gap: var(--hs-e3);
	margin-bottom: var(--hs-e4);
}

.hs-enrol .hs-beneficiario {
	border: 1px solid var(--hs-borde);
	border-radius: 10px;
	padding: var(--hs-e4) var(--hs-e5) var(--hs-e5);
	background: var(--hs-fondo);
	animation: hs-aparecer .22s ease;
}

/* La fila de un beneficiario reparte proporcional, no por las 12 columnas. */
.hs-enrol .hs-beneficiario .hs-rejilla {
	grid-template-columns:
		minmax(0, 3.5fr)
		minmax(0, 3.2fr)
		minmax(0, 3fr)
		minmax(0, 2.3fr)
		minmax(0, 1.5fr);
	gap: var(--hs-e3);
}

.hs-enrol .hs-beneficiario .hs-rejilla > .hs-campo {
	grid-column: auto;
}

.hs-enrol .hs-beneficiario__cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--hs-e3);
}

.hs-enrol .hs-beneficiario__titulo {
	font-size: var(--hs-t-micro);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--hs-dorado);
}

.hs-enrol .hs-quitar {
	/* Explícito porque Astra da padding y min-width a todo `button`. */
	width: 30px;
	min-width: 30px;
	height: 30px;
	flex: 0 0 auto;
	padding: 0;
	display: grid;
	place-items: center;
	font-size: 20px;
	line-height: 1;
	color: var(--hs-tenue);
	background: transparent;
	border: 1px solid var(--hs-borde);
	border-radius: 6px;
	cursor: pointer;
	transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.hs-enrol .hs-quitar:hover {
	color: var(--hs-error);
	border-color: var(--hs-error);
	background: var(--hs-error-fondo);
}

/* ---------- 10. Aceptación ----------------------------------------------- */

.hs-enrol .hs-legal {
	grid-column: 1 / -1;
	max-height: 260px;
	overflow-y: auto;
	padding: var(--hs-e5);
	background: var(--hs-crema);
	border: 1px solid var(--hs-crema-borde);
	border-radius: 10px;
}

.hs-enrol .hs-legal p {
	margin: 0;
	font-size: var(--hs-t-etiqueta);
	line-height: var(--hs-alto-holgado);
	color: var(--hs-tenue);
	text-align: justify;
}

.hs-enrol .hs-confirmacion {
	display: flex;
	align-items: flex-start;
	gap: var(--hs-e3);
	padding: var(--hs-e4) var(--hs-e5);
	background: var(--hs-fondo);
	border: 1.5px solid var(--hs-borde);
	border-radius: 10px;
	font-size: var(--hs-t-base);
	font-weight: 500;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

.hs-enrol .hs-confirmacion:has(input:checked) {
	border-color: var(--hs-dorado);
	background: var(--hs-crema);
}

.hs-enrol .hs-confirmacion input {
	width: 18px;
	height: 18px;
	margin: 0;
	flex-shrink: 0;
	accent-color: var(--hs-dorado);
}

/* ---------- 11. Verificación --------------------------------------------- */

.hs-enrol .hs-tarjeta-verificacion {
	max-width: 420px;
	margin: 0 auto;
	padding: var(--hs-e8);
	background: var(--hs-crema);
	border: 1px solid var(--hs-crema-borde);
	border-radius: var(--hs-radio);
}

/* Cada etapa entra deslizándose desde la derecha: se lee como «avanzas». */
.hs-enrol .hs-etapa {
	animation: hs-entrar .3s cubic-bezier(.2, .7, .3, 1);
}

@keyframes hs-entrar {
	from { opacity: 0; transform: translateX(18px); }
	to   { opacity: 1; transform: none; }
}

/* Nota explicativa al pie de cada campo de la verificación. */
.hs-enrol .hs-nota {
	margin: 0 0 var(--hs-e4);
	padding: var(--hs-e3);
	background: #fff;
	border: 1px solid var(--hs-crema-borde);
	border-radius: var(--hs-radio-chico);
	font-size: var(--hs-t-menor);
	line-height: var(--hs-alto-normal);
	color: var(--hs-tenue);
}

.hs-enrol .hs-nota strong {
	color: var(--hs-tinta);
	font-weight: 600;
}

/* Las tres entradas de la verificación comparten tamaño y caja: al pasar de
   cédula a correo y a código no debe notarse ningún salto. */
.hs-enrol .hs-input--grande,
.hs-enrol .hs-input--codigo {
	font-size: var(--hs-t-mayor);
	padding: var(--hs-e3) var(--hs-e4);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.hs-enrol .hs-input--codigo {
	font-weight: 600;
}

/* Validación en vivo: el borde responde mientras se escribe. */
.hs-enrol .hs-input.es-ok {
	border-color: var(--hs-exito);
	background: var(--hs-exito-fondo);
}

.hs-enrol .hs-input.es-ok:focus {
	box-shadow: 0 0 0 3px rgba(30, 123, 77, .13);
}

.hs-enrol .hs-input.es-mal {
	border-color: var(--hs-error);
	background: var(--hs-error-fondo);
}

.hs-enrol .hs-input.es-mal:focus {
	box-shadow: 0 0 0 3px rgba(179, 53, 42, .13);
}


.hs-enrol .hs-aviso {
	margin: 0 0 var(--hs-e4);
	padding: 10px var(--hs-e3);
	border-radius: var(--hs-radio-chico);
	font-size: var(--hs-t-etiqueta);
	font-weight: 500;
}

.hs-enrol .hs-aviso--ok {
	color: var(--hs-exito);
	background: var(--hs-exito-fondo);
	border: 1px solid var(--hs-exito-borde);
}

/* ---------- 12. Botones -------------------------------------------------- */

.hs-enrol .hs-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hs-e2);
	padding: 11px var(--hs-e8);
	font-family: inherit;
	font-size: var(--hs-t-base);
	font-weight: 600;
	line-height: var(--hs-alto-ajustado);
	border-radius: var(--hs-radio-chico);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
	text-decoration: none;
}

.hs-enrol .hs-boton--principal {
	background: var(--hs-dorado);
	border-color: var(--hs-dorado);
	color: #fff;
}

.hs-enrol .hs-boton--principal:hover:not(:disabled) {
	background: var(--hs-dorado-oscuro);
	border-color: var(--hs-dorado-oscuro);
}

.hs-enrol .hs-boton--secundario {
	background: transparent;
	border-color: var(--hs-dorado);
	color: var(--hs-dorado);
}

.hs-enrol .hs-boton--secundario:hover:not(:disabled) {
	background: var(--hs-dorado);
	color: #fff;
}

.hs-enrol .hs-boton--fantasma {
	background: transparent;
	border-color: var(--hs-borde);
	color: var(--hs-tenue);
}

.hs-enrol .hs-boton--fantasma:hover:not(:disabled) {
	border-color: var(--hs-tenue);
	color: var(--hs-tinta);
}

.hs-enrol .hs-boton--enlace {
	background: none;
	border: 0;
	padding: var(--hs-e2) 0 0;
	width: 100%;
	font-size: var(--hs-t-etiqueta);
	color: var(--hs-tenue);
	font-weight: 500;
	text-decoration: underline;
}

.hs-enrol .hs-boton--enlace:hover:not(:disabled) {
	color: var(--hs-dorado);
}

.hs-enrol .hs-boton--ancho {
	width: 100%;
	margin-top: var(--hs-e4);
}

.hs-enrol .hs-boton:disabled {
	opacity: .55;
	cursor: not-allowed;
}

/* El botón pasa por tres estados: reposo → trabajando → hecho. En cada uno
   cambia el icono y el texto, y el texto se cruza con un fundido para que el
   cambio se note como una transición y no como un salto. */

.hs-enrol .hs-boton__icono {
	display: none;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.hs-enrol .hs-boton.es-cargando .hs-boton__icono,
.hs-enrol .hs-boton.es-exito .hs-boton__icono {
	display: flex;
}

.hs-enrol .hs-boton__texto {
	transition: opacity .16s ease, transform .16s ease;
}

.hs-enrol .hs-boton.es-cambiando .hs-boton__texto {
	opacity: 0;
	transform: translateY(-3px);
}

/* Trabajando */
.hs-enrol .hs-boton.es-cargando .hs-boton__icono::before {
	content: "";
	width: 15px;
	height: 15px;
	border: 2.2px solid rgba(255, 255, 255, .38);
	border-top-color: #fff;
	border-radius: 50%;
	animation: hs-girar .7s linear infinite;
}

.hs-enrol .hs-boton--secundario.es-cargando .hs-boton__icono::before,
.hs-enrol .hs-boton--fantasma.es-cargando .hs-boton__icono::before,
.hs-enrol .hs-boton--enlace.es-cargando .hs-boton__icono::before {
	border-color: rgba(141, 99, 1, .28);
	border-top-color: var(--hs-dorado);
}

/* Hecho: el botón se pone verde y la palomita se dibuja sola. */
.hs-enrol .hs-boton.es-exito {
	background: var(--hs-exito);
	border-color: var(--hs-exito);
	color: #fff;
	animation: hs-asentar .35s ease-out;
}

.hs-enrol .hs-marca {
	width: 16px;
	height: 16px;
	overflow: visible;
}

.hs-enrol .hs-marca path {
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 26;
	stroke-dashoffset: 26;
	animation: hs-trazar .4s .05s ease-out forwards;
}

@keyframes hs-trazar {
	to { stroke-dashoffset: 0; }
}

@keyframes hs-asentar {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.025); }
	100% { transform: scale(1); }
}

@keyframes hs-girar {
	to { transform: rotate(360deg); }
}

/* ---------- 13. Navegación y final --------------------------------------- */

.hs-enrol .hs-navegacion {
	display: flex;
	align-items: center;
	gap: var(--hs-e3);
	margin-top: var(--hs-e8);
	padding-top: var(--hs-e6);
	border-top: 1px solid var(--hs-crema-borde);
}

.hs-enrol .hs-navegacion__espacio {
	flex: 1;
}

.hs-enrol .hs-error-global {
	margin: var(--hs-e5) 0 0;
	padding: var(--hs-e3) var(--hs-e4);
	background: var(--hs-error-fondo);
	border: 1px solid var(--hs-error-borde);
	border-left: 4px solid var(--hs-error);
	border-radius: var(--hs-radio-chico);
	color: var(--hs-error);
	font-size: var(--hs-t-etiqueta);
	font-weight: 500;
}

.hs-enrol .hs-exito {
	text-align: center;
	padding: var(--hs-e10) var(--hs-e5);
	color: var(--hs-exito);
}

.hs-enrol .hs-exito h2 {
	margin: var(--hs-e4) 0 var(--hs-e2);
	font-size: var(--hs-t-titulo);
	color: var(--hs-tinta);
}

.hs-enrol .hs-exito p {
	margin: 0 auto;
	max-width: 420px;
	font-size: var(--hs-t-base);
	color: var(--hs-tenue);
}

.hs-enrol .hs-nota-registro {
	margin: var(--hs-e5) 0 0;
	font-size: var(--hs-t-micro);
	line-height: var(--hs-alto-normal);
	color: var(--hs-tenue);
	text-align: center;
}

/* ---------- 13b. Señuelo para robots -------------------------------------- */

/*
 * Fuera de la vista, pero presente en el HTML: un robot que rellena todo lo
 * que encuentra cae aquí. No se usa `display:none` porque los robots más
 * cuidadosos se saltan lo que está oculto de esa forma.
 */
.hs-enrol .hs-senuelo {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- 14. Responsive ----------------------------------------------- */

@media (max-width: 860px) {
	.hs-enrol .hs-progreso__texto { display: none; }
	.hs-enrol .hs-progreso__item { gap: 0; }
}

@media (max-width: 720px) {
	.hs-enrol { padding-bottom: var(--hs-e6); }

	.hs-enrol .hs-form { padding: var(--hs-e5) var(--hs-e4); }

	.hs-enrol .hs-cabecera { padding-top: var(--hs-e6); }
	.hs-enrol .hs-logo { width: 190px; }
	.hs-enrol .hs-cabecera__texto h1 { font-size: var(--hs-t-titulo); }
	.hs-enrol .hs-cabecera__texto p { font-size: var(--hs-t-etiqueta); }

	/* Todo a una sola columna */
	.hs-enrol .hs-rejilla > [class*="hs-col-"] { grid-column: 1 / -1; }

	.hs-enrol .hs-beneficiario .hs-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hs-enrol .hs-beneficiario .hs-rejilla > .hs-campo { grid-column: 1 / -1; }
	.hs-enrol .hs-beneficiario .hs-rejilla > .hs-campo:nth-child(3),
	.hs-enrol .hs-beneficiario .hs-rejilla > .hs-campo:nth-child(4),
	.hs-enrol .hs-beneficiario .hs-rejilla > .hs-campo:nth-child(5) { grid-column: span 1; }

	.hs-enrol .hs-opcion { flex: 1; justify-content: center; }

	.hs-enrol .hs-navegacion { flex-wrap: wrap; }
	.hs-enrol .hs-navegacion .hs-boton { flex: 1 1 100%; }
	.hs-enrol .hs-navegacion__espacio { display: none; }

	.hs-enrol .hs-tarjeta-verificacion { padding: var(--hs-e5) var(--hs-e4); }
	.hs-enrol .hs-input--codigo { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.hs-enrol *,
	.hs-enrol *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}