/* 
 * Estilos para Formularios de HubSpot Embebidos
 * Utiliza las variables CSS oficiales de HubSpot para anular los estilos por defecto.
 * Documentación: https://developers.hubspot.com/docs/cms/start-building/features/forms/forms
 */

:root {
    /* --- Estilos Globales --- */
    --hsf-default-background__padding: 0px !important;
    --hsf-global__font-family: 'Graphik', sans-serif !important;
    --hsf-progressbar-text__font-family: 'Graphik', sans-serif !important;
    --hsf-default-button__font-family: 'Graphik', sans-serif !important;
    --hsf-default-progressbar-text__font-family: 'Graphik', sans-serif !important;
    --hsf-default-field-input__font-family: 'Graphik', sans-serif !important;
    --hsf-richtext__font-family: 'Graphik', sans-serif !important;
    --hsf-default-richtext__font-family: 'Graphik', sans-serif !important;
    --hsf-richtext__font-size: 14px !important;
    --hsf-progressbar-text__font-size: 14px;
    --hsf-default-progressbar-text__font-size: 14px;
    --hsf-global__color: #333 !important;
    --hsf-global-error__color: #c82333 !important;
    --hsf-erroralert__font-size: 12px !important;
    /* --- Espaciado --- */
    --hsf-row__vertical-spacing: 10px !important;
    --hsf-module__vertical-spacing: 0px !important;

    /* --- Labels y Texto de Campos --- */
    --hsf-field-label__font-family: 'Graphik', sans-serif !important;
    --hsf-field-label__font-size: 14px !important;
    --hsf-field-label__color: #333 !important;
    --hsf-field-label-requiredindicator__color: #c82333 !important;

    /* --- Inputs (Text, Email, etc.) --- */
    --hsf-field-input__font-family: 'Graphik', sans-serif !important;
    --hsf-default-field-input__font-size: 14px !important;
    --hsf-field-input__color: #333 !important;
    --hsf-field-input__background-color: #fff !important;
    --hsf-field-input__border-color: #ccc !important;
    --hsf-field-input__border-width: 1px !important;
    --hsf-field-input__border-radius: 4px !important;
    --hsf-field-input__padding: 10px 10px !important;

    /* --- Botón de Envío (Estilo SHA) --- */
    --hsf-button__font-family: 'Graphik', sans-serif !important;
    --hsf-button__font-size: 16px !important;
    --hsf-button__color: #555 !important;
    --hsf-button__background-color: #555 !important;
    --hsf-button__border-radius: 40px !important;
    --hsf-button__background-color: none !important;
    --hsf-button__padding: 12px 24px !important;
    --hsf-button__box-shadow: none !important;

    /* --- Estilos Adicionales (Hover, Focus) --- */
    /* Nota: HubSpot no proporciona variables para estados como :hover o :focus. */
    /* Estos se pueden anular con selectores más específicos si es necesario, */
    /* aunque es más complejo debido al iframe. */
}


[data-hsfc-id=Renderer] .hsfc-ProgressBar__Progress {

    height: 6px !important;
}

[data-hsfc-id=Renderer] .hsfc-ProgressBar__Progress>div {
    height: 6px !important;
}

[data-hsfc-id=Renderer] .hsfc-Button:not([disabled]):hover {
    transform: none !important;
}

[data-hsfc-id=Renderer] .hsfc-Button {
    border: solid 1px #555 !important;

    transition: none !important;
}

[data-hsfc-id=Renderer] .hsfc-Button:hover {
    border: solid 1px #555 !important;
    background: #555 !important;
    color: #fff !important;
    transition: none !important;
}