/**
 * HUBSPOT FORMS
 *
 * Este archivo contiene los estilos CSS para los formularios de HubSpot integrados en el sitio web.
 * Se aplican estilos específicos a los elementos del formulario, como campos de entrada, botones y mensajes de confirmación.
 * Los estilos se basan en las clases generadas por HubSpot (hsfc-*), y se utilizan variables CSS para personalizar la apariencia de los formularios.
 */

.hs-form-html[data-portal-id] {
	width: 100%;
	min-width: 0;
}

.hs-form-html[data-portal-id] .hsfc-Renderer[data-hsfc-id='Renderer'] {
	--hsf-global__font-family: 'Inter', sans-serif;
	--hsf-row__horizontal-spacing: 10px;
	--hsf-row__vertical-spacing: 10px;
	--hsf-background__padding: 32px;
	--hsf-background__background-color: rgba(58, 92, 116, 0.055);
	--hsf-background__background-image: none;
	--hsf-background__border-style: none;
	--hsf-background__border-radius: 12px;
	--hsf-heading__font-family: 'Poppins', sans-serif;
	--hsf-heading__color: #3a5c74;
	--hsf-field-input__font-family: 'Inter', sans-serif;
	--hsf-field-input__font-size: 14px;
	--hsf-field-input__color: #3a3a3a;
	--hsf-field-input__background-color: #fff;
	--hsf-field-input__border-color: transparent;
	--hsf-field-input__border-width: 1px;
	--hsf-field-input__border-style: solid;
	--hsf-field-input__border-radius: 4px;
	--hsf-field-input__padding: 12px;
	--hsf-field-input__placeholder-color: #858b92;
	--hsf-field-textarea__font-family: 'Inter', sans-serif;
	--hsf-field-textarea__font-size: 14px;
	--hsf-field-textarea__color: #3a3a3a;
	--hsf-field-textarea__background-color: #fff;
	--hsf-field-textarea__border-color: transparent;
	--hsf-field-textarea__border-width: 1px;
	--hsf-field-textarea__border-style: solid;
	--hsf-field-textarea__border-radius: 4px;
	--hsf-field-textarea__padding: 12px;
	--hsf-field-textarea__placeholder-color: #858b92;
	--hsf-button__font-family: 'Poppins', sans-serif;
	--hsf-button__font-size: 16px;
	--hsf-button__font-weight: 600;
	--hsf-button__color: #fff;
	--hsf-button__background-color: #3a5c74;
	--hsf-button__background-image: none;
	--hsf-button__border-radius: 4px;
	--hsf-button__border-style: none;
	--hsf-button__padding: 17px 24px;
	--hsf-button__width: 100%;
	--hsf-button__box-shadow: 0 3px 6px rgba(25, 48, 64, 0.18);
	--hsf-button--hover__background-color: #2e4a5e;
	--hsf-button--focus__background-color: #2e4a5e;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-Row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-Row
	> * {
	width: 100%;
	min-width: 0;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-Heading {
	margin: 0 0 14px;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.6px;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-TextInput,
.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-TextareaInput {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	box-shadow: none;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-TextInput {
	min-height: 44px;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-TextareaInput {
	min-height: 78px;
	resize: vertical;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-TextInput::placeholder,
.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-TextareaInput::placeholder {
	color: #858b92;
	opacity: 1;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	:is(input, textarea, button):focus-visible {
	outline: 2px solid #3a5c74;
	outline-offset: 2px;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	:is(input, textarea)[aria-invalid='true'] {
	border-color: #c62828;
}

/* Etiquetas accesibles: se ocultan visualmente solo tras crear el placeholder. */
.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.unikal-label-placeholder {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-DataPrivacyField {
	margin-top: 12px;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-DataPrivacyField
	:is(.hsfc-RichText, .hsfc-FieldLabel),
.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-DataPrivacyField
	:is(p, span, a) {
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: #3a3a3a !important;
	background: transparent !important;
	text-align: left !important;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-DataPrivacyField
	p {
	margin: 0;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-DataPrivacyField
	a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-CheckboxInput {
	flex-shrink: 0;
	accent-color: #3a5c74;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-NavigationRow {
	margin-top: 16px;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-NavigationRow__Buttons {
	width: 100%;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-Button {
	min-height: 56px;
}

@media (max-width: 600px) {
	.hs-form-html[data-portal-id] .hsfc-Renderer[data-hsfc-id='Renderer'] {
		--hsf-background__padding: 22px 18px;
		--hsf-field-input__font-size: 14px;
		--hsf-field-textarea__font-size: 14px;
	}
}
/* Mensaje de confirmación tras el envío. */
.hs-form-html[data-portal-id] .hsfc-PostSubmit .hsfc-Step__Content {
	padding: 40px 32px;
	text-align: center;
}

.hs-form-html[data-portal-id] .hsfc-PostSubmit .hsfc-RichText {
	width: 100%;
	font-family: 'Inter', sans-serif;
	color: #3a5c74;
}

.hs-form-html[data-portal-id] .hsfc-PostSubmit .hsfc-RichText p:first-child {
	margin: 0 0 16px;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(24px, 3vw, 32px) !important;
	line-height: 1.25 !important;
}

.hs-form-html[data-portal-id] .hsfc-PostSubmit .hsfc-RichText strong {
	font-weight: 500;
}

.hs-form-html[data-portal-id]
	.hsfc-PostSubmit
	.hsfc-RichText
	p:not(:first-child) {
	max-width: 480px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.6;
	color: #454545;
}

@media (max-width: 600px) {
	.hs-form-html[data-portal-id] .hsfc-PostSubmit .hsfc-Step__Content {
		padding: 32px 18px;
	}
}
/* Botón de envío: degradado, flecha y hover de la web. */
.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-Button {
	--hsf-button__font-family: 'Poppins', sans-serif;
	--hsf-button__font-weight: 600;
	--hsf-button__border-radius: 5px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	overflow: hidden;
	isolation: isolate;
	padding: 20px 40px;
	min-height: 0;
	font-size: 18px;
	line-height: 1.5;
	color: #fff;
	border: 0;
	border-radius: 5px;
	background: linear-gradient(90deg, #3a5c74 0%, #35d5df 100%);
	box-shadow: none;
	transition:
		transform 0.3s,
		box-shadow 0.3s;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-Button:not([disabled]):hover {
	color: #fff;
	background: linear-gradient(90deg, #35d5df 0%, #3a5c74 100%);
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(53, 213, 223, 0.35);
}

/* Flecha decorativa; deja libre el indicador de carga nativo de HubSpot. */
.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-Button:not(.hsfc-Button--loading)::after {
	content: '';
	position: static;
	display: block;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 18l6-6M13 6l6 6'/%3E%3C/svg%3E")
		center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 18l6-6M13 6l6 6'/%3E%3C/svg%3E")
		center / contain no-repeat;
	animation: none;
	pointer-events: none;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-Button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 35%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.5),
		transparent
	);
	transform: translateX(-110%) skewX(-20deg);
	pointer-events: none;
}

.hs-form-html[data-portal-id]
	.hsfc-Renderer[data-hsfc-id='Renderer']
	.hsfc-Button:not([disabled]):not(.hsfc-Button--loading):hover::before {
	animation: unikal-form-button-shine 0.85s ease-in-out both;
}

@keyframes unikal-form-button-shine {
	from {
		left: 0;
		transform: translateX(-110%) skewX(-20deg);
	}
	to {
		left: 100%;
		transform: translateX(0) skewX(-20deg);
	}
}

.hs-form-html[data-portal-id] .hsfc-PostSubmit .hsfc-RichText p:first-child {
	font-weight: 600;
	background: linear-gradient(90deg, #3a5c74 0%, #35d5df 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.hs-form-html[data-portal-id]
	.hsfc-PostSubmit
	.hsfc-RichText
	p:first-child
	strong {
	font-weight: 600;
}

@media (max-width: 1366px) {
	.hs-form-html[data-portal-id]
		.hsfc-Renderer[data-hsfc-id='Renderer']
		.hsfc-Button {
		font-size: 16px;
	}
}
@media (max-width: 1024px) {
	.hs-form-html[data-portal-id]
		.hsfc-Renderer[data-hsfc-id='Renderer']
		.hsfc-Button {
		font-size: 14px;
		padding: 15px 30px;
		gap: 5px;
	}
}
@media (max-width: 767px) {
	.hs-form-html[data-portal-id]
		.hsfc-Renderer[data-hsfc-id='Renderer']
		.hsfc-Button {
		padding: 12px 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.hs-form-html[data-portal-id]
		.hsfc-Renderer[data-hsfc-id='Renderer']
		.hsfc-Button {
		transition: none;
	}
	.hs-form-html[data-portal-id]
		.hsfc-Renderer[data-hsfc-id='Renderer']
		.hsfc-Button:hover::before {
		animation: none !important;
	}
}