/*
 * HS Consultas · formulario de 3 pasos (diseño del prototipo del 7-oct-2026).
 *
 * Todo va dentro de #hs-consultas: el id gana a las reglas del tema y del CSS adicional
 * (por ejemplo "#formulario p"), y nada de aquí se escapa al resto del sitio.
 * Los colores toman las variables --hs-* del CSS adicional del sitio; si faltan, usan las del prototipo.
 */

#hs-consultas {
	--c-verde: var(--hs-verde, #123f33);
	--c-verde-osc: var(--hs-verde-osc, #0d2f26);
	--c-tinta: var(--hs-tinta, #17392e);
	--c-texto: var(--hs-texto, #2e4a40);
	--c-texto-2: var(--hs-texto-2, #55665e);
	--c-dorado: var(--hs-dorado, #a68a56);
	--c-dorado-texto: var(--hs-dorado-texto, #846a3c);
	--c-crema: var(--hs-crema, #f7f5ee);
	--c-salvia: var(--hs-salvia, #e9ece1);
	--c-blanco: #fff;
	--c-linea: rgba(18, 63, 51, .15);
	--c-borde: rgba(18, 63, 51, .32);
	/* Borde de lo que se escribe o se ajusta (campos, segmentados, contador): 3.2:1 sobre blanco, el mínimo de WCAG es 3:1. */
	--c-borde-campo: rgba(18, 63, 51, .55);
	--c-error: #9c3b2a;
	--c-error-fondo: #fbf3f1;
	--c-pelaje-rojo: #9b4a2f;
	--c-pelaje-gris: #a3aaa4;
	--f-titulo: var(--global-heading-font-family, "Playfair", Georgia, serif);
	--f-texto: var(--global-body-font-family, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
	--curva: var(--hs-ease, cubic-bezier(.22, .61, .36, 1));
	--iti-border-color: var(--c-borde);
	--iti-hover-color: var(--c-salvia);
	--iti-icon-color: var(--c-texto-2);
	--iti-country-selector-bg: var(--c-blanco);

	box-sizing: border-box;
	background: var(--c-crema);
	border-radius: 6px;
	padding: clamp(18px, 4vw, 44px);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55);
	color: var(--c-texto);
	font: 400 16px/1.6 var(--f-texto);
	text-align: left;
	min-width: 0;
	color-scheme: light;
	/* Kadence pone word-break: break-word en el contenido: con eso, un texto apretado se parte letra por letra. */
	word-break: normal;
	overflow-wrap: break-word;
}

/*
 * El formulario ya es la tarjeta. La columna de Kadence que lo contiene queda sin fondo, sombra ni relleno:
 * si no, queda una tarjeta dentro de otra y el formulario pierde unos 100 px de ancho (en el celular, la mitad).
 */
.kt-inside-inner-col:has(> #hs-consultas) { padding: 0; background: transparent; box-shadow: none; border: 0; }

#hs-consultas *,
#hs-consultas *::before,
#hs-consultas *::after { box-sizing: border-box; }
#hs-consultas [hidden] { display: none !important; }
#hs-consultas p { color: inherit; margin: 0; }
#hs-consultas a { color: var(--c-verde); text-decoration: underline; text-underline-offset: 3px; }
/* Foco verde como en el resto del sitio (10.8:1 sobre crema; el dorado daba 3:1). */
#hs-consultas :focus-visible { outline: 2px solid var(--c-verde); outline-offset: 2px; }
/* Texto de ejemplo legible (Kadence lo pinta con su color 6, salvia: 1.2:1 sobre blanco). */
#hs-consultas input::placeholder,
#hs-consultas textarea::placeholder { color: var(--c-texto-2); opacity: 1; }
#hs-consultas fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Progreso */
#hs-consultas .hs-progreso { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0; margin: 0 0 8px; }
#hs-consultas .hs-progreso li { height: 3px; border-radius: 3px; background: var(--c-linea); margin: 0; transition: background-color .3s var(--curva); }
#hs-consultas .hs-progreso li.hs-hecho,
#hs-consultas .hs-progreso li.hs-actual { background: var(--c-verde); }
#hs-consultas .hs-progreso-texto { font-size: 13px; color: var(--c-texto-2); margin: 0 0 22px; }
#hs-consultas .hs-progreso-texto b { color: var(--c-tinta); font-weight: 600; }

/* Encabezados de cada paso */
#hs-consultas legend {
	padding: 0; margin: 0 0 6px; display: block; width: 100%;
	font: 400 clamp(1.4rem, 1.2rem + .6vw, 1.75rem)/1.2 var(--f-titulo); color: var(--c-tinta); letter-spacing: -.01em;
}
#hs-consultas legend:focus { outline: none; }
#hs-consultas .hs-ayuda-paso { margin: 0 0 22px; color: var(--c-texto-2); font-size: 15px; }

/* Campos */
#hs-consultas .hs-campos { display: grid; gap: 22px; }
#hs-consultas .hs-fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
#hs-consultas .hs-campo { display: grid; gap: 8px; align-content: start; min-width: 0; position: relative; }
#hs-consultas .hs-etiqueta { font-size: 14px; font-weight: 600; color: var(--c-verde); line-height: 1.4; }
#hs-consultas .hs-opcional { font-weight: 400; color: var(--c-texto-2); }
#hs-consultas .hs-nota { font-size: 13px; color: var(--c-texto-2); }
/* Nota "Más sobre las cookies del sitio" bajo la autorización: como las demás notas, alineada con el texto de la casilla (22 px + 12 px). */
#hs-consultas .hs-nota-cookies { margin: 6px 0 0 34px; font-size: 13px; line-height: 1.5; color: var(--c-texto-2); }
#hs-consultas .hs-error { color: var(--c-error); font-size: 13px; font-weight: 500; }
#hs-consultas .hs-error:empty { display: none; }

#hs-consultas input[type=text],
#hs-consultas input[type=email],
#hs-consultas input[type=tel],
#hs-consultas input[type=number],
#hs-consultas input[type=search],
#hs-consultas select,
#hs-consultas textarea {
	width: 100%; min-height: 48px; margin: 0;
	font: 400 16px/1.4 var(--f-texto); color: var(--c-tinta);
	background: var(--c-blanco); border: 1px solid var(--c-borde-campo); border-radius: 3px;
	padding: 12px 14px; box-shadow: none; transition: border-color .2s;
}
#hs-consultas select { appearance: auto; padding-right: 36px; color-scheme: light; }
#hs-consultas select option { color: var(--c-tinta); background: var(--c-blanco); }
#hs-consultas textarea { min-height: 96px; resize: vertical; }
#hs-consultas input:focus,
#hs-consultas select:focus,
#hs-consultas textarea:focus { outline: 2px solid var(--c-verde); outline-offset: 0; border-color: var(--c-verde); }
/* El buscador del catálogo no es el campo con error: queda con su borde. */
#hs-consultas .hs-invalido input:not([type=radio]):not([type=checkbox]):not([data-hs-buscar]),
#hs-consultas .hs-invalido select,
#hs-consultas .hs-invalido textarea,
#hs-consultas .hs-invalido .hs-seg,
#hs-consultas .hs-invalido .hs-animales { border-color: var(--c-error); }

/* Tarjetas (paso 1 y preguntas de tipo tarjeta) */
#hs-consultas .hs-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#hs-consultas .hs-tarjeta {
	position: relative; display: grid; gap: 4px; margin: 0; padding: 18px 18px 18px 50px; min-height: 64px;
	border: 1px solid var(--c-borde); border-radius: 4px; background: var(--c-blanco); cursor: pointer;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
#hs-consultas .hs-tarjeta:hover { border-color: var(--c-verde); }
#hs-consultas .hs-tarjeta input {
	position: absolute; left: 18px; top: 21px; appearance: none; -webkit-appearance: none; margin: 0;
	width: 18px; height: 18px; border: 1.5px solid var(--c-verde); border-radius: 50%; background: var(--c-blanco); cursor: pointer;
}
#hs-consultas .hs-tarjeta input:checked { background: var(--c-verde); box-shadow: inset 0 0 0 3px var(--c-blanco); }
#hs-consultas .hs-tarjeta:has(input:checked) { border-color: var(--c-verde); box-shadow: inset 0 0 0 1px var(--c-verde); background: #fbfaf6; }
#hs-consultas .hs-tarjeta:has(input:focus-visible) { outline: 2px solid var(--c-verde); outline-offset: 2px; }
/* Sin elegir: cada tarjeta se marca en rojo, no solo el aviso de abajo. */
#hs-consultas .hs-invalido .hs-tarjeta { border-color: var(--c-error); box-shadow: inset 0 0 0 1px var(--c-error); }
#hs-consultas .hs-invalido .hs-tarjeta input { border-color: var(--c-error); }
#hs-consultas .hs-tarjeta-nombre { font: 400 21px/1.2 var(--f-titulo); color: var(--c-tinta); }
#hs-consultas .hs-tarjeta-desc { font-size: 14px; color: var(--c-texto-2); line-height: 1.45; }
#hs-consultas .hs-tarjetas-pequenas .hs-tarjeta-nombre { font-size: 18px; }

/* Resumen del interés elegido */
#hs-consultas .hs-resumen {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 20px;
	padding: 10px 14px; background: var(--c-salvia); border-radius: 3px; font-size: 14px;
}
#hs-consultas .hs-resumen b { color: var(--c-tinta); }
/* Paso 3: resumen de la consulta antes de enviar. */
#hs-consultas .hs-resumen-consulta { justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; gap: 16px; padding: 12px 16px; line-height: 1.5; }
#hs-consultas .hs-resumen-consulta p { min-width: 0; color: var(--c-tinta); }
#hs-consultas .hs-resumen-titulo { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-texto-2); margin-bottom: 2px; }
#hs-consultas .hs-resumen-consulta .hs-enlace { flex: 0 0 auto; }
/* Catálogo: qué lleva elegido. */
#hs-consultas .hs-elegidos { margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--c-verde); }
#hs-consultas .hs-elegidos::before { content: "\2713"; margin-right: 6px; }
#hs-consultas .hs-enlace {
	background: none; border: 0; padding: 4px 0; margin: 0; min-height: 0; font: inherit; color: var(--c-verde);
	text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none;
}

/* Botones segmentados */
#hs-consultas .hs-seg { display: flex; flex-wrap: wrap; border: 1px solid var(--c-borde-campo); border-radius: 3px; background: var(--c-blanco); overflow: hidden; }
#hs-consultas .hs-seg label { flex: 1 1 auto; position: relative; text-align: center; cursor: pointer; margin: 0; }
#hs-consultas .hs-seg label + label { border-left: 1px solid var(--c-borde-campo); }
#hs-consultas .hs-seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
#hs-consultas .hs-seg span { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 14px; font-size: 15px; line-height: 1.3; color: var(--c-tinta); transition: background-color .2s, color .2s; }
#hs-consultas .hs-seg input:checked + span { background: var(--c-verde); color: var(--c-blanco); }
#hs-consultas .hs-seg input:focus-visible + span { outline: 2px solid var(--c-verde); outline-offset: -4px; }
/* Sobre la opción elegida (fondo verde) el contorno va en blanco. */
#hs-consultas .hs-seg input:checked:focus-visible + span { outline-color: var(--c-blanco); }
#hs-consultas .hs-muestra { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); flex: 0 0 auto; }
#hs-consultas .hs-muestra.hs-pelaje-rojo { background: var(--c-pelaje-rojo); }
#hs-consultas .hs-muestra.hs-pelaje-gris { background: var(--c-pelaje-gris); }

/* Contador */
#hs-consultas .hs-contador { display: inline-flex; align-items: stretch; border: 1px solid var(--c-borde-campo); border-radius: 3px; background: var(--c-blanco); width: max-content; max-width: 100%; }
#hs-consultas .hs-contador button {
	width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
	font: 400 20px/1 var(--f-texto); color: var(--c-verde); cursor: pointer;
}
#hs-consultas .hs-contador button:hover { background: var(--c-salvia); }
#hs-consultas .hs-contador input[type=number] {
	width: 72px; min-height: 44px; border: 0; border-left: 1px solid var(--c-linea); border-right: 1px solid var(--c-linea); border-radius: 0;
	text-align: center; padding: 8px 4px; font: 500 16px/1.4 var(--f-texto); font-variant-numeric: tabular-nums; background: transparent;
	-moz-appearance: textfield;
}
#hs-consultas .hs-contador input::-webkit-inner-spin-button,
#hs-consultas .hs-contador input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#hs-consultas .hs-contador input:focus { outline: 2px solid var(--c-verde); outline-offset: -2px; }

/* Catálogo: buscador y filtro por línea, encima del carrusel */
#hs-consultas .hs-catalogo { display: grid; gap: 10px; min-width: 0; container-type: inline-size; }
#hs-consultas .hs-catalogo-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
#hs-consultas .hs-buscar { position: relative; flex: 1 1 220px; min-width: 0; }
#hs-consultas .hs-buscar::before {
	content: ""; position: absolute; left: 13px; top: 50%; width: 11px; height: 11px; margin-top: -8px;
	border: 2px solid var(--c-texto-2); border-radius: 50%; pointer-events: none;
}
#hs-consultas .hs-buscar::after {
	content: ""; position: absolute; left: 24px; top: 50%; width: 2px; height: 7px; margin-top: 2px;
	background: var(--c-texto-2); transform: rotate(-45deg); pointer-events: none;
}
#hs-consultas .hs-buscar input { min-height: 44px; padding: 8px 12px 8px 38px; border-radius: 999px; -webkit-appearance: none; appearance: none; }
#hs-consultas .hs-buscar input::placeholder { color: var(--c-texto-2); opacity: 1; }
#hs-consultas .hs-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#hs-consultas .hs-filtro button {
	display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 8px 14px;
	font: 500 14px/1 var(--f-texto); color: var(--c-tinta); background: var(--c-blanco);
	border: 1px solid var(--c-borde); border-radius: 999px; box-shadow: none; cursor: pointer; text-transform: none; letter-spacing: 0;
}
#hs-consultas .hs-filtro button:hover { border-color: var(--c-verde); }
#hs-consultas .hs-filtro button[aria-pressed=true] { background: var(--c-verde); border-color: var(--c-verde); color: var(--c-blanco); }

/*
 * Catálogo de animales: carrusel lateral. 4 tarjetas a la vista en un formulario ancho, 3 en uno mediano,
 * 2 y el borde de la siguiente en el celular (una y el borde si el formulario es muy angosto), para que se
 * note que se puede deslizar.
 * El relleno deja ver el contorno de la tarjeta enfocada, que el desplazamiento recortaría.
 */
#hs-consultas .hs-animales {
	--hs-columnas: 1.35;
	position: relative; display: grid; grid-auto-flow: column; gap: 10px;
	grid-auto-columns: calc((100% - (var(--hs-columnas) - 1) * 10px) / var(--hs-columnas));
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
	padding: 4px; margin: -4px; scroll-padding-inline: 4px;
	border: 1px solid transparent; border-radius: 4px;
	scrollbar-width: thin; scrollbar-color: rgba(18, 63, 51, .35) transparent;
}
@container (min-width: 280px) { #hs-consultas .hs-animales { --hs-columnas: 2.3; } }
@container (min-width: 420px) { #hs-consultas .hs-animales { --hs-columnas: 3; } }
@container (min-width: 600px) { #hs-consultas .hs-animales { --hs-columnas: 4; } }
#hs-consultas .hs-animales::-webkit-scrollbar { height: 6px; }
#hs-consultas .hs-animales::-webkit-scrollbar-thumb { background: rgba(18, 63, 51, .35); border-radius: 6px; }
#hs-consultas .hs-animal { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 10px; border: 1px solid var(--c-borde); border-radius: 4px; background: var(--c-blanco); scroll-snap-align: start; transition: border-color .2s, box-shadow .2s; }
#hs-consultas .hs-animal:hover { border-color: var(--c-verde); }
#hs-consultas .hs-animal:has(input[type=checkbox]:checked) { border-color: var(--c-verde); box-shadow: inset 0 0 0 1px var(--c-verde); }
#hs-consultas .hs-animal:has(input[type=checkbox]:focus-visible) { outline: 2px solid var(--c-verde); outline-offset: 2px; }
#hs-consultas .hs-animal-elegir { position: relative; display: grid; gap: 6px; margin: 0; cursor: pointer; }
#hs-consultas .hs-animal-imagen { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 2px; overflow: hidden; background: var(--c-salvia); }
#hs-consultas .hs-animal-imagen.hs-pelaje-rojo { background: linear-gradient(160deg, #b05b3c, var(--c-pelaje-rojo)); }
#hs-consultas .hs-animal-imagen.hs-pelaje-gris { background: linear-gradient(160deg, #c3c8c3, #8d958f); }
#hs-consultas .hs-animal-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
#hs-consultas .hs-animal-linea {
	position: absolute; left: 8px; bottom: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
	color: var(--c-blanco); text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
/* Tipo de semen del Power BI: solo se marca "Sexado". */
#hs-consultas .hs-animal-tipo {
	position: absolute; left: 8px; top: 8px; padding: 2px 7px; border-radius: 10px; background: var(--c-crema); color: var(--c-tinta);
	font-size: 11px; font-weight: 600; letter-spacing: .04em; line-height: 1.5;
}
/* El nombre corta entre palabras; solo una palabra que no quepa entera se parte. */
#hs-consultas .hs-animal-nombre { font: 400 17px/1.2 var(--f-titulo); color: var(--c-tinta); padding-right: 4px; overflow-wrap: break-word; }
/* Catálogo angosto (celular): tarjetas de unos 125 px, "WINCHESTER" no cabía a 17 px. */
@container (max-width: 419px) { #hs-consultas .hs-animal-nombre { font-size: 15px; } }
#hs-consultas .hs-animal-elegir input[type=checkbox] {
	position: absolute; top: 8px; right: 8px; appearance: none; -webkit-appearance: none; margin: 0;
	width: 24px; height: 24px; border: 2px solid var(--c-blanco); border-radius: 3px; background: rgba(0, 0, 0, .25); cursor: pointer;
}
#hs-consultas .hs-animal-elegir input[type=checkbox]:checked { background: var(--c-verde); border-color: var(--c-verde); }
#hs-consultas .hs-animal-elegir input[type=checkbox]:checked::after {
	content: ""; position: absolute; left: 6px; top: 1px; width: 7px; height: 13px;
	border: solid var(--c-blanco); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
#hs-consultas .hs-animal-cantidad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; color: var(--c-texto-2); }
#hs-consultas .hs-animal-cantidad .hs-contador button { width: 34px; min-height: 36px; font-size: 17px; }
#hs-consultas .hs-animal-cantidad .hs-contador input[type=number] { width: 48px; min-height: 36px; font-size: 14px; padding: 4px 2px; }

/* Debajo del carrusel: posición y flechas (las mismas del palmarés). */
#hs-consultas .hs-catalogo-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
#hs-consultas .hs-catalogo-posicion { font-size: 13px; color: var(--c-texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
#hs-consultas .hs-catalogo-flechas { display: flex; gap: 8px; }
#hs-consultas .hs-flecha {
	display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
	border: 1px solid var(--c-verde); border-radius: 50%; background: transparent; color: var(--c-verde);
	font: 400 18px/1 var(--f-texto); cursor: pointer; box-shadow: none; transition: background-color .25s var(--curva), color .25s var(--curva), opacity .25s;
}
#hs-consultas .hs-flecha:hover:not(:disabled) { background: var(--c-verde); color: var(--c-blanco); }
#hs-consultas .hs-flecha:disabled { opacity: .3; cursor: default; }
#hs-consultas .hs-sin-resultados { padding: 14px 16px; border: 1px dashed var(--c-borde); border-radius: 4px; font-size: 14px; color: var(--c-texto-2); }
#hs-consultas .hs-sin-resultados .hs-enlace { margin-left: 4px; }
#hs-consultas .hs-visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* País y ciudad */
#hs-consultas .hs-combo { position: relative; }
#hs-consultas .hs-combo input { padding-right: 40px; }
#hs-consultas .hs-combo::after {
	content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; pointer-events: none;
	border: solid var(--c-texto-2); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg);
}
#hs-consultas .hs-combo.hs-libre::after { display: none; }
#hs-consultas .hs-combo ul {
	position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 264px; overflow-y: auto;
	margin: 0; padding: 4px 0; list-style: none; background: var(--c-blanco);
	border: 1px solid var(--c-borde); border-radius: 3px; box-shadow: 0 16px 32px -16px rgba(13, 47, 38, .35);
}
#hs-consultas .hs-combo li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 14px; cursor: pointer; font-size: 15px; line-height: 1.35; color: var(--c-tinta); }
/* La provincia ("Santo Domingo de los Tsáchilas") pasa a dos líneas antes de quitarle espacio al nombre de la ciudad. */
#hs-consultas .hs-combo li .hs-sub { flex: 0 1 auto; max-width: 55%; text-align: right; color: var(--c-texto-2); font-size: 13px; }
#hs-consultas .hs-combo li[aria-selected=true],
#hs-consultas .hs-combo li:hover { background: var(--c-salvia); }
#hs-consultas .hs-combo li.hs-extra { border-top: 1px solid var(--c-linea); color: var(--c-verde); font-weight: 500; }
#hs-consultas .hs-combo li.hs-vacio { color: var(--c-texto-2); cursor: default; }
#hs-consultas .hs-combo li.hs-vacio:hover { background: none; }

/* Teléfono (intl-tel-input) */
#hs-consultas .iti { width: 100%; display: block; }
#hs-consultas .iti__dropdown-content { border-radius: 3px; box-shadow: 0 16px 32px -16px rgba(13, 47, 38, .35); color: var(--c-tinta); }
#hs-consultas .iti__search-input { font: 400 15px/1.4 var(--f-texto); min-height: 44px; border: 0; }
#hs-consultas .iti__dial-code { color: var(--c-texto-2); }
#hs-consultas .iti__selected-country { min-height: 0; padding: 0; background: none; box-shadow: none; color: var(--c-tinta); }

/* Consentimiento */
#hs-consultas .hs-check { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-texto); cursor: pointer; }
#hs-consultas .hs-check input {
	appearance: none; -webkit-appearance: none; flex: 0 0 auto; position: relative; margin: 1px 0 0;
	width: 22px; height: 22px; border: 1.5px solid var(--c-verde); border-radius: 3px; background: var(--c-blanco); cursor: pointer;
}
#hs-consultas .hs-check input:checked { background: var(--c-verde); }
#hs-consultas .hs-check input:checked::after {
	content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px;
	border: solid var(--c-blanco); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
#hs-consultas .hs-invalido .hs-check input { border-color: var(--c-error); }

/* Campo trampa: fuera de la vista y del lector de pantalla */
#hs-consultas .hs-trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Botones */
#hs-consultas .hs-acciones { display: flex; gap: 12px; align-items: center; margin-top: 30px; }
#hs-consultas .hs-boton {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin: 0;
	font: 600 16px/1 var(--f-texto); letter-spacing: 0; text-transform: none; padding: 16px 24px;
	border-radius: 2px; border: 1px solid var(--c-verde); box-shadow: none; cursor: pointer;
	transition: background-color .25s var(--curva), color .25s var(--curva);
}
#hs-consultas .hs-boton-primario { background: var(--c-verde); color: var(--c-blanco); flex: 1; }
#hs-consultas .hs-boton-primario:hover { background: var(--c-verde-osc); color: var(--c-blanco); }
#hs-consultas .hs-boton-secundario { background: transparent; color: var(--c-verde); }
#hs-consultas .hs-boton-secundario:hover { background: var(--c-salvia); color: var(--c-verde); }
#hs-consultas .hs-boton[aria-busy=true] { opacity: .75; cursor: progress; }

#hs-consultas .hs-resumen-errores {
	margin: 22px 0 0; padding: 14px 18px; background: var(--c-error-fondo); color: var(--c-error);
	border-left: 3px solid var(--c-error); border-radius: 3px; font-size: 14px; font-weight: 500;
}
#hs-consultas .hs-creditos { margin-top: 18px; font-size: 11px; color: var(--c-texto-2); }
#hs-consultas .hs-creditos a { color: inherit; }
#hs-consultas .hs-aviso-sin-js { font-size: 15px; }

/* Éxito */
#hs-consultas .hs-exito {
	position: relative; padding: 22px 24px 22px 58px; background: var(--c-blanco);
	border: 1px solid var(--c-linea); border-left: 3px solid var(--c-dorado); border-radius: 4px;
}
#hs-consultas .hs-exito:focus { outline: none; }
#hs-consultas .hs-exito::before { content: "\2727"; position: absolute; left: 22px; top: 21px; color: var(--c-dorado); font-size: 22px; line-height: 1.3; }
#hs-consultas .hs-exito-titulo { font: 400 24px/1.25 var(--f-titulo); color: var(--c-tinta); margin-bottom: 8px; }
#hs-consultas .hs-exito-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; }
#hs-consultas .hs-exito-acciones .hs-boton { flex: 0 0 auto; padding: 12px 18px; font-size: 15px; }

@media (max-width: 560px) {
	#hs-consultas .hs-tarjetas,
	#hs-consultas .hs-fila-2 { grid-template-columns: 1fr; }
	#hs-consultas .hs-acciones { flex-direction: column-reverse; align-items: stretch; }
	#hs-consultas .hs-seg label { flex-basis: 50%; }
	#hs-consultas .hs-seg label:nth-child(odd) { border-left: 0; }
	#hs-consultas .hs-seg label:nth-child(n + 3) { border-top: 1px solid var(--c-borde); }
}

@media (prefers-reduced-motion: reduce) {
	#hs-consultas *,
	#hs-consultas *::before,
	#hs-consultas *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}