.
El renderer expone variables --hsf-* (override limpio); los suplementos
cubren lo que las variables no alcanzan. */
.hs-form-html {
/* Global */
--hsf-global__font-family: 'Inter', system-ui, -apple-system, sans-serif;
--hsf-global__font-size: 16px;
--hsf-global__color: #0A0A0A;
--hsf-global__error-color: #B03A3A;
/* Contenedor del form: plano, sin caja (estilo Typeform) */
--hsf-background__background-color: transparent;
--hsf-background__border-width: 0;
--hsf-background__padding: 0;
/* Pregunta / headings */
--hsf-heading__color: #0A0A0A;
--hsf-heading__font-family: 'Inter', system-ui, sans-serif;
--hsf-richtext__color: #444444;
/* Labels de campo (estilo Typeform: regulares, no chiquitos) */
--hsf-field-label__color: #0A0A0A;
--hsf-field-label__font-size: 16px;
--hsf-field-label-requiredindicator__color: #A07830;
--hsf-field-description__color: #737373;
--hsf-field-description__font-size: 14px;
/* Inputs: SIN caja — solo línea inferior (suplemento abajo) */
--hsf-field-input__background-color: transparent;
--hsf-field-input__border-width: 0;
--hsf-field-input__border-radius: 0;
--hsf-field-input__padding: 6px 0 8px;
--hsf-field-input__font-size: 22px;
--hsf-field-input__color: #0A0A0A;
--hsf-field-input__placeholder-color: #B9B2A5;
--hsf-field-dropdown-options__border-radius: 12px;
/* Textarea: misma línea inferior */
--hsf-field-textarea__background-color: transparent;
--hsf-field-textarea__border-width: 0;
--hsf-field-textarea__border-radius: 0;
--hsf-field-textarea__padding: 6px 0 8px;
--hsf-field-textarea__font-size: 20px;
/* Botón: pill negra de marca (.kbtn--primary), compacto a la izquierda */
--hsf-button__background-color: #0A0A0A;
--hsf-button__color: #FFFFFF;
--hsf-button__border-color: #C9A84C;
--hsf-button__border-width: 1px;
--hsf-button__border-style: solid;
--hsf-button__border-radius: 9999px;
--hsf-button__padding: 17px 36px;
--hsf-button__font-family: 'Inter', system-ui, sans-serif;
--hsf-button__font-size: 16px;
--hsf-button__font-weight: 500;
--hsf-button__width: auto;
--hsf-button--hover__background-color: #1A1613;
--hsf-button--hover__border-color: #FFD255;
--hsf-button--hover__color: #FFFFFF;
--hsf-button--focus__background-color: #1A1613;
--hsf-button--focus__border-color: #FFD255;
--hsf-button--focus__color: #FFFFFF;
--hsf-navigationrow-buttons__justify-content: flex-start;
--hsf-navigationrow-buttons-single__justify-content: flex-start;
/* Barra de progreso — dorado sobre riel cálido */
--hsf-progressbar-trackLine__background-color: #EFEAE0;
--hsf-progressbar-progressLine__background-color: #C9A84C;
--hsf-progressbar-text__color: #737373;
--hsf-progressbar-text__font-size: 13px;
/* Errores / avisos */
--hsf-erroralert__color: #B03A3A;
--hsf-erroralert__font-size: 13px;
--hsf-infoalert__color: #444444;
/* Espaciado entre campos: aireado como Typeform */
--hsf-module__vertical-spacing: 22px;
--hsf-row__vertical-spacing: 22px;
--hsf-row__horizontal-spacing: 20px;
}
/* ── Suplementos ── */
/* Inputs de línea inferior (firma Typeform). Foco: la línea se engrosa y
se vuelve dorada — sin anillos ni cajas. */
.hs-form-html .hsfc-TextInput,
.hs-form-html .hsfc-TextareaInput,
.hs-form-html .hsfc-DropdownInput,
.hs-form-html .hsfc-DateInput {
border-bottom: 1px solid #0A0A0A !important;
box-shadow: none !important;
outline: none !important;
}
.hs-form-html .hsfc-TextInput:focus,
.hs-form-html .hsfc-TextareaInput:focus,
.hs-form-html .hsfc-DropdownInput:focus,
.hs-form-html .hsfc-DateInput:focus {
border-bottom: 2px solid #C9A84C !important;
margin-bottom: -1px;
}
/* Teléfono: el contenedor lleva la línea; los inputs internos van limpios */
.hs-form-html .hsfc-PhoneInput {
border: 0 !important;
border-bottom: 1px solid #0A0A0A !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.hs-form-html .hsfc-PhoneInput:focus-within {
border-bottom: 2px solid #C9A84C !important;
margin-bottom: -1px;
}
.hs-form-html .hsfc-PhoneInput input { font-size: 22px !important; }
/* La línea inferior vive SOLO en el contenedor: los elementos internos
(input del número, select de país) van sin borde para evitar doble línea */
.hs-form-html .hsfc-PhoneInput input,
.hs-form-html .hsfc-PhoneInput .hsfc-TextInput,
.hs-form-html .hsfc-PhoneInput select {
border: 0 !important;
box-shadow: none !important;
outline: none !important;
background: transparent !important;
}
.hs-form-html .hsfc-PhoneInput input:focus,
.hs-form-html .hsfc-PhoneInput .hsfc-TextInput:focus {
border: 0 !important;
margin-bottom: 0 !important;
}
/* Selector de bandera: fuera el separador vertical del renderer + aire
entre bandera y número */
.hs-form-html .hsfc-PhoneInput { gap: 4px; }
.hs-form-html .hsfc-PhoneInput__FlagAndCaret {
border: 0 !important;
background: transparent !important;
padding-right: 10px;
margin-right: 6px;
}
/* Pickers (selects cerrados + bandera del teléfono): aire a la izquierda
para que el texto no nazca pegado al borde */
.hs-form-html .hsfc-DropdownInput { padding-left: 14px !important; padding-right: 14px !important; }
.hs-form-html .hsfc-PhoneInput__FlagAndCaret { padding-left: 10px; }
/* Panel flotante de opciones del dropdown: altura contenida con scroll
interno (sin esto crece hasta tapar los botones del form) + look de menú */
.hs-form-html .hsfc-DropdownOptions {
position: relative; /* sin posición el z-index no aplica */
z-index: 200;
max-height: 300px;
overflow-y: auto;
background: #FFFFFF !important;
border: 1px solid #E0DCD5;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(20, 16, 8, 0.18);
}
.hs-form-html .hsfc-DropdownOptions__List {
background: #FFFFFF !important;
margin: 0;
padding: 0 8px 8px;
list-style: none;
}
.hs-form-html .hsfc-DropdownOptions__List__ListItem {
background: #FFFFFF;
border-radius: 8px;
cursor: pointer;
}
.hs-form-html .hsfc-DropdownOptions__List__ListItem:hover,
.hs-form-html .hsfc-DropdownOptions__List__ListItem--selected {
background: #FAF3E1;
}
.hs-form-html .hsfc-DropdownOptions__Search {
position: sticky;
top: 0;
background: #FFFFFF;
padding: 8px;
}
.hs-form-html .hsfc-DropdownOptions__List__ListItem { padding: 9px 14px; }
/* Buscador dentro de dropdowns (selector de país, selects con search):
escala de UI compacta, no la de respuesta (22px ahí es gigante) */
.hs-form-html .hsfc-DropdownOptions__Search .hsfc-TextInput {
font-size: 14px !important;
padding: 8px 10px !important;
border: 1px solid #E0DCD5 !important;
border-radius: 8px !important;
background: #FFFFFF !important;
}
.hs-form-html .hsfc-DropdownOptions__Search .hsfc-TextInput:focus {
border-color: #C9A84C !important;
margin-bottom: 0 !important;
}
.hs-form-html .hsfc-DropdownOptions__List__ListItem { font-size: 14px !important; padding-left: 14px !important; }
/* Ocultar el LABEL del grupo radio/checkbox: la pregunta ya vive en el
Heading del paso (estilo Typeform), así que el label del campo (con su
RequiredIndicator suelto) es redundante. Solo el label directo del grupo;
las opciones (label dentro de __Options) y los labels de inputs de texto
NO se tocan. */
.hs-form-html .hsfc-RadioFieldGroup > label.hsfc-FieldLabel,
.hs-form-html .hsfc-CheckboxFieldGroup > label.hsfc-FieldLabel {
display: none !important;
}
/* ── Opciones (radio Y checkbox) = cards estilo Typeform con letra ──
Card blanca, borde fino, letra A/B/C en badge; seleccionada = tinte dorado
+ borde dorado + ✓. El control nativo se oculta (el input sigue en el DOM
y enfocable; el estado se pinta en la card). */
.hs-form-html .hsfc-RadioFieldGroup__Options,
.hs-form-html .hsfc-CheckboxFieldGroup__Options {
display: grid !important;
/* auto-fit: los grupos con MUCHAS opciones cortas (especialidades) llenan
4 columnas; los de POCAS opciones largas (cómo responden) colapsan las
columnas vacías y las cards se estiran a lo ancho, sin amontonar el texto. */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important;
min-width: 0;
gap: 8px !important;
counter-reset: kopt;
}
@media (max-width: 520px) {
.hs-form-html .hsfc-RadioFieldGroup__Options,
.hs-form-html .hsfc-CheckboxFieldGroup__Options { grid-template-columns: 1fr !important; }
}
/* gotcha renderer: cada label vive en un
anónimo con margin-bottom:8px */
.hs-form-html div.hsfc-RadioFieldGroup__Options > *:not(:last-child),
.hs-form-html div.hsfc-CheckboxFieldGroup__Options > *:not(:last-child) {
margin-bottom: 0 !important;
}
.hs-form-html .hsfc-RadioFieldGroup__Options > div,
.hs-form-html .hsfc-CheckboxFieldGroup__Options > div {
display: flex;
align-items: stretch;
min-width: 0;
}
.hs-form-html .hsfc-RadioFieldGroup__Options label.hsfc-FieldLabel,
.hs-form-html .hsfc-CheckboxFieldGroup__Options label.hsfc-FieldLabel {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
box-sizing: border-box;
min-height: 58px;
margin: 0;
padding: 8px 12px;
background: #FFFFFF;
border: 1px solid #D9D2C4;
border-radius: 8px;
font-size: 14px !important;
font-weight: 500;
line-height: 1.25;
color: #0A0A0A;
cursor: pointer;
user-select: none;
min-width: 0;
word-break: normal;
overflow-wrap: break-word;
hyphens: none;
position: relative;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
/* El texto de la opción va en …: dejar que encoja
y rompa línea (si no, el texto largo empuja el ancho de la card) */
.hs-form-html .hsfc-RadioFieldGroup__Options label.hsfc-FieldLabel > span,
.hs-form-html .hsfc-CheckboxFieldGroup__Options label.hsfc-FieldLabel > span {
min-width: 0;
overflow-wrap: break-word;
}
/* Letra A/B/C (badge estilo Typeform) */
.hs-form-html .hsfc-RadioFieldGroup__Options label.hsfc-FieldLabel::before,
.hs-form-html .hsfc-CheckboxFieldGroup__Options label.hsfc-FieldLabel::before {
counter-increment: kopt;
content: counter(kopt, upper-alpha);
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 1px solid #C9A84C;
border-radius: 4px;
background: #FBF7EE;
font-size: 11px;
font-weight: 700;
color: #0A0A0A;
}
/* Control nativo oculto pero accesible (focus/teclado siguen funcionando) */
.hs-form-html .hsfc-RadioFieldGroup__Options label.hsfc-FieldLabel input,
.hs-form-html .hsfc-CheckboxFieldGroup__Options label.hsfc-FieldLabel input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
pointer-events: none;
}
.hs-form-html .hsfc-RadioFieldGroup__Options label.hsfc-FieldLabel:hover,
.hs-form-html .hsfc-CheckboxFieldGroup__Options label.hsfc-FieldLabel:hover {
border-color: #C9A84C;
background: #FDFBF5;
}
/* Seleccionada: tinte dorado + letra invertida + ✓ a la derecha */
.hs-form-html .hsfc-RadioFieldGroup__Options label.hsfc-FieldLabel:has(input:checked),
.hs-form-html .hsfc-CheckboxFieldGroup__Options label.hsfc-FieldLabel:has(input:checked) {
background: #FAF3E1;
border-color: #C9A84C;
box-shadow: inset 0 0 0 1px #C9A84C;
/* sin cambio de font-weight: el peso sintetizado se ve como otra fuente;
el estado ya lo comunican fondo + borde + ✓ */
}
.hs-form-html .hsfc-RadioFieldGroup__Options label.hsfc-FieldLabel:has(input:checked)::before,
.hs-form-html .hsfc-CheckboxFieldGroup__Options label.hsfc-FieldLabel:has(input:checked)::before {
background: #C9A84C;
color: #FFFFFF;
}
.hs-form-html .hsfc-RadioFieldGroup__Options label.hsfc-FieldLabel:has(input:checked)::after,
.hs-form-html .hsfc-CheckboxFieldGroup__Options label.hsfc-FieldLabel:has(input:checked)::after {
content: '✓';
margin-left: auto;
font-weight: 700;
color: #A07830;
}
.hs-form-html .hsfc-RadioFieldGroup__Options label.hsfc-FieldLabel:has(input:focus-visible),
.hs-form-html .hsfc-CheckboxFieldGroup__Options label.hsfc-FieldLabel:has(input:focus-visible) {
box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.35);
}
/* Botón: pill negra de marca con glow al hover (borde dorado vivo + doble
halo, mismo lenguaje que los CTAs glowy del sitio) */
.hs-form-html .hsfc-Button {
min-width: 200px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.hs-form-html .hsfc-Button:hover:not([disabled]) {
transform: translateY(-2px);
box-shadow:
0 0 0 1px rgba(255, 210, 85, 0.55),
0 0 22px rgba(255, 210, 85, 0.45),
0 0 44px rgba(201, 168, 76, 0.25);
}
.hs-form-html .hsfc-Button:active:not([disabled]) { transform: translateY(0); }
.hs-form-html .hsfc-Button[disabled] {
background-color: #0A0A0A;
border-color: #C9A84C;
color: #FFFFFF;
opacity: 0.5;
cursor: not-allowed;
}
/* Pregunta / heading: escala Typeform (grande pero no de landing) */
.hs-form-html .hsfc-Heading,
.hs-form-html .hsfc-Heading h1,
.hs-form-html .hsfc-Heading h2,
.hs-form-html .hsfc-Heading h3,
.hs-form-html .hsfc-Heading p,
.hs-form-html .hsfc-Heading span,
.hs-form-html .hsfc-RichText h1,
.hs-form-html .hsfc-RichText h2 {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: clamp(22px, 2.4vw, 26px) !important;
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: -0.01em;
margin-top: 0;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
overflow-wrap: break-word;
word-break: normal;
}
.hs-form-html .hsfc-RichText h3 { font-size: clamp(18px, 2vw, 20px) !important; font-weight: 600 !important; }
.hs-form-html .hsfc-RichText p { font-size: 16px; line-height: 1.55; }
/* ── Transición entre pasos (multi-step) ──
Altura estable en desktop + botón anclado abajo-izquierda (zona de
navegación fija, como Typeform) + fade-in del contenido. */
@media (min-width: 900px) {
.hs-form-html .hsfc-Step__Content {
min-height: 560px;
display: flex;
flex-direction: column;
}
.hs-form-html .hsfc-Step__Content .hsfc-NavigationRow {
margin-top: auto !important;
padding-top: 20px;
}
}
@keyframes hsfcStepIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
.hs-form-html .hsfc-Step {
animation: hsfcStepIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
.hs-form-html .hsfc-Step { animation: none; }
}
/* ── Móvil estilo Typeform: nav sticky + flecha de regresar ──
Las listas largas scrollean por debajo; los botones quedan siempre a la
vista con un degradado blanco. "Anterior" se vuelve flecha circular. */
@media (max-width: 767px) {
/* STICKY KILLER: .ksection trae overflow:hidden (landing-konko.css) y el
módulo del form envuelve en .ksection.kformnext — con ese ancestro el
sticky jamás pega. Solo esta sección, solo móvil. */
.ksection.kformnext { overflow: visible !important; }
.hs-form-html .hsfc-NavigationRow {
position: sticky;
bottom: 0;
z-index: 20;
background: linear-gradient(to top, #FFFFFF 78%, rgba(255, 255, 255, 0));
padding: 16px 0 12px;
margin-top: 10px !important;
}
/* fila horizontal SIEMPRE (el renderer los apila full-width bajo 430px) */
.hs-form-html .hsfc-NavigationRow__Buttons {
flex-direction: row !important;
align-items: center;
gap: 10px !important;
}
.hs-form-html .hsfc-NavigationRow__Buttons > * { width: auto !important; }
/* "Anterior" (primer botón cuando hay dos) → flecha circular compacta */
.hs-form-html .hsfc-NavigationRow__Buttons > .hsfc-Button:first-child:not(:only-child),
.hs-form-html .hsfc-NavigationRow__Buttons > *:first-child:not(:only-child) > .hsfc-Button {
font-size: 0 !important;
min-width: 0 !important;
width: 48px !important;
height: 48px !important;
padding: 0 !important;
flex: 0 0 48px;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 50% !important;
background: #FFFFFF !important;
color: #0A0A0A !important;
border: 1px solid #E0DCD5 !important;
}
.hs-form-html .hsfc-NavigationRow__Buttons > .hsfc-Button:first-child:not(:only-child)::before,
.hs-form-html .hsfc-NavigationRow__Buttons > *:first-child:not(:only-child) > .hsfc-Button::before {
content: '←';
font-size: 20px;
line-height: 1;
}
/* "Continuar" ocupa el resto de la fila */
.hs-form-html .hsfc-NavigationRow__Buttons > .hsfc-Button:last-child,
.hs-form-html .hsfc-NavigationRow__Buttons > *:last-child > .hsfc-Button {
flex: 1 1 auto;
width: 100% !important;
}
}
/* Post-submit (gracias) */
.hs-form-html .hsfc-PostSubmit {
font-family: 'Inter', system-ui, sans-serif;
color: #0A0A0A;
}
.hs-form-html .hsfc-PostSubmit h1,
.hs-form-html .hsfc-PostSubmit h2 {
font-size: clamp(22px, 2.6vw, 28px) !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
/* ── Pantallas de ruteo post-submit (MQL scheduler · No-MQL gracias) ──
Inyectadas por module.js dentro de .hs-form-html al enviarse el form. */
.hs-form-html .kfn-screen {
font-family: 'Inter', system-ui, sans-serif;
color: #0A0A0A;
}
.hs-form-html .kfn-screen__title {
font-size: clamp(24px, 2.8vw, 30px) !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: -0.02em;
margin: 0 0 10px !important;
color: #0A0A0A !important;
}
.hs-form-html .kfn-screen__sub {
font-size: clamp(15px, 1.6vw, 17px) !important;
line-height: 1.55 !important;
color: #737373 !important;
margin: 0 0 22px !important;
max-width: 640px;
}
/* MQL — perks (Demo en vivo · Plan · Resultados) */
.hs-form-html .kfn-perks {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
margin: 0 0 22px;
}
.hs-form-html .kfn-perk {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: #262626;
}
.hs-form-html .kfn-perk::before {
content: '✓';
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: #FAF3E1;
color: #A07830;
font-size: 12px;
font-weight: 700;
}
/* MQL — nota bajo el embed */
.hs-form-html .kfn-note {
margin: 16px 0 0;
font-size: 13px;
color: #737373;
text-align: center;
}
/* MQL — contenedor del scheduler de HubSpot Meetings */
.hs-form-html .meetings-iframe-container {
width: 100%;
min-height: 660px;
margin: 0;
}
.hs-form-html .meetings-iframe-container iframe {
width: 100% !important;
border: 0 !important;
}
/* No-MQL — bloque de gracias */
.hs-form-html .kfn-ty { max-width: 560px; }
.hs-form-html .kfn-ty__badge {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: #FFD255;
color: #0A0A0A;
font-size: 24px;
font-weight: 700;
margin-bottom: 18px;
}
.hs-form-html .kfn-ty__link {
display: inline-flex;
align-items: center;
height: 56px;
padding: 0 30px;
background: #0A0A0A;
color: #FFFFFF !important;
border: 1px solid #C9A84C;
border-radius: 9999px;
font-size: 16px;
font-weight: 500;
text-decoration: none !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hs-form-html .kfn-ty__link:hover {
transform: translateY(-2px);
box-shadow: 0 4px 24px rgba(201, 168, 76, 0.3);
}
@media (max-width: 520px) {
.hs-form-html .meetings-iframe-container { min-height: 620px; }
}