/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
 .blog-navfooter .container {
   
    max-width: 80%!important;
}
.custom-blog-banner {
    padding: 30px 0!important;
}

.custom-blog-banner__title {
    
   font-size: 24px!important; 
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .custom-blog-banner__title {
        font-size: 20px !important; /* Tamaño de fuente responsivo con !important */
    }
}
/* Estilos para la barra social inferior */

.blog-navfooter .container {
    padding-top: 28px;
    padding-bottom: 28px;
  padding: 50px;
}

   /* Reduce el margen en la clase mi texto */
.mi.texto {
       margin: 30px 0 !important;
}
@media (max-width: 768px) {
    .mi.texto {
        margin: 10px 0 !important; /* Ajusta el margen a 10px en móviles */
    }
}
/* Reduce el espacio alrededor de los iconos sociales */
.social-bar {
    margin: 5px 0 !important; /* Ajusta el espacio vertical */
    padding: 10px 0 !important; /* Mantén el padding si es necesario, o quítalo */
}

/* Media query para ajustar el tamaño de fuente en dispositivos móviles */
@media (max-width: 768px) {
    .mi.texto {
        font-size: 14px !important; /* Establece el tamaño de fuente a 14px en móviles */
    }
}

.social-bar {
    padding: 10px 0; /* Espacio vertical arriba y abajo */
}

.social-bar .icons {
    display: flex;
    justify-content: space-evenly;
    padding: 4px 0;
    border-radius: 8px;
}

 .social-bar-bottom .icons {
    display: flex;
    justify-content: space-evenly;
    padding: 14px 600px;
    border-radius: 8px;
}

.social-bar .icons a {
    margin: 0 8px !important; /* Espaciado entre los íconos */
}

/* Ajustes para la barra lateral */
.sidebar-desktop {
    padding: 5px!important; /* Ajusta el valor según lo necesites */
}

/* Muestra el formulario en móviles */
@media (max-width: 768px) {
    .sidebar-desktop {
        display: block !important; /* Asegúrate de que el formulario sea visible */
        width: 100%; /* Ocupa todo el ancho */
        padding: 10px; /* Ajusta el padding */
        box-shadow: none; /* Puedes quitar la sombra en móviles si lo deseas */
        margin-left: -10px; /* Ajuste del margen */
        margin-top: -35px;
    }
}

/* Ajustes para el formulario */
.blog-sidebar-form {
    border: 3px solid #e0690f; /* Bordes del formulario */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25); /* Sombra para el formulario */
    width: 130%; /* Asegúrate de que ocupe el 100% */
    padding: 25px; /* Ajusta el padding para móviles */
    margin: 20px;
    margin-left: 33px;
}

.blog-sidebar-form .hs-form-field input,
.blog-sidebar-form .hs-form-field select,
.blog-sidebar-form .hs-form-field textarea {
    width: calc(100% - 20px); /* Ajusta el ancho */
}

/* Asegura que los botones también sean responsivos */
.blog-sidebar-form .hs-button {
    width: 100%; /* Botón ocupa todo el ancho */
}

/* Estructura principal en Desktop */
.container .row {
    display: flex;
    flex-wrap: wrap;
}

/* Contenedor de formulario en Desktop */
.formulario {
    flex: 1; /* Asegura que ocupe un ancho proporcional */
    order: 2; /* Posiciona el formulario a la derecha de la imagen */
    max-width: 350px; /* Ajusta el ancho del formulario */
   position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}



/* Ajustes específicos para Responsive */
@media (max-width: 768px) {
    .container .row {
        flex-direction: column; /* Coloca los elementos en columna */
    }

    .formulario {
        max-width: 100%; /* El formulario ocupa todo el ancho en móviles */
        order: 3; /* Asegura que el formulario esté abajo del texto */
    }

    .header-image,
    .rich-text-below {
        order: 1; /* Imagen y texto van primero en móviles */
    }
}
<style>
.custom-header-container .blog-banner-section__title,
.custom-header-container .blog-banner-section__title span {
    font-size: 20px;  /* Tamaño de fuente */
    line-height: 26px; /* Altura de línea */
    color: #fff;       /* Color del texto */
}

/* Media query para hacer el texto más pequeño en dispositivos móviles */
@media (max-width: 768px) {
    .custom-header-container .blog-banner-section__title,
    .custom-header-container .blog-banner-section__title span {
        font-size: 16px;  /* Tamaño de fuente reducido en móviles */
        line-height: 22px; /* Altura de línea reducida en móviles */
    }
}
   /* Espacio entre la imagen de portada y los iconos sociales */
}
.header-image img {
    width: 100% !important;
    height: auto !important;
    padding-top: 40px;
  padding-right: 0px;
}
@media (max-width: 768px) {
    .header-image img {
        padding-top: 5px; /* Ajusta el padding superior en móviles */
        margin-right: 16px; /* Si realmente necesitas mover la imagen hacia la izquierda, usa un margen negativo */
    }
}
/* Espacio entre los iconos sociales y el texto */
.social-bar {
    margin: 10px 0 !important; /* Ajusta el margen superior e inferior de la barra social */
}


/* Asegúrate de que el formulario se muestre correctamente */
.sidebar-desktop {
   
      padding: 16px !important;
    margin-top: 10px;
    margin-right: -30px;
    margin-left: 5px;
}
}
   @media (max-width: 768px) {
    .sidebar-desktop {
        display: block !important;
        width: 100%;
        padding: 10px;
        box-shadow: none;
        margin-left: -48px;
        margin-top: -40px;
    }
}

/* Ajustes para el formulario en dispositivos móviles */
@media (max-width: 768px) {
    .formulario {
        max-width: 100% !important; /* Asegúrate de que el formulario ocupe casi todo el ancho en móviles */
        padding: 10px !important; /* Ajusta el padding para móviles */
        display: block !important;
        width: 88%;
        padding: 20px;
        /* box-shadow: none; */
        margin-left: -81px;
    }
}

.hs-richtext .hs-main-font-element {
    margin-bottom: 20px !important; /* Añade margen inferior de 20px */
}

/* Asegúrate de que la imagen dentro de header-image ocupe el 100% */
.header-image img {
    width: 100% !important; /* Asegúrate de que la imagen ocupe todo el ancho disponible */
    height: auto !important; /* Mantiene la proporción de la imagen */
      padding-top: 40px;
      padding-right: 0px;
}

/* Ajustes responsivos para móviles */
@media (max-width: 768px) {
    .header-image {
        padding: 10px; /* Reduce el padding en móviles si es necesario */
                padding-top: 0px;
    }
}
@media (max-width: 768px) {
    .hs_cos_wrapper.hs_cos_wrapper_widget.hs_cos_wrapper_type_inline_rich_text {
        margin-top: 45px !important; /* Elimina el espacio superior */
    }

    .mi.texto {
        font-size: 14px !important; /* Establece el tamaño de fuente a 14px en móviles */
    }
    
    .social-bar {
        margin: 5px 0 !important; /* Ajusta el espacio vertical */
        padding: 10px 0 !important; /* Mantén el padding si es necesario, o quítalo */
    }
}
 
   /* Form styles */

.blog-sidebar-form {
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    border: 3px solid #E0690F;
    padding: 35px;
    margin-left: 45px; /* Margen por defecto para desktop */
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .blog-sidebar-form {
        margin-left: 60px; /* Margen para móviles */
    }
}


.blog-sidebar-form label.hs-error-msg {
  color: red;
  font-size: 10px;
  line-height: 16px;
}

.blog-sidebar-form ul.no-list.hs-error-msgs.inputs-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.blog-sidebar-form .hs-form-field input[type=text],
.blog-sidebar-form .hs-form-field input[type=email],
.blog-sidebar-form .hs-form-field input[type=tel],
.blog-sidebar-form .hs-form-field select,
.blog-sidebar-form .hs-form-field textarea {  
  border: solid 1px #939498;
  padding: 10px 10px;
  border-radius: 8px;
  width: 100% !important;
  font-size:12px;
}

.blog-sidebar-form .hs-button,
.blog-sidebar-form .hs-button:hover {
  background-color: #FF7A12;
  border: 1px solid #FF7A12;
  width: 100%;
  border-radius: 21px;
  font-size: 14px;
}

.blog-sidebar-form .form-title {
  margin-bottom: 30px;
}

.legal-consent-container .hs-richtext p, 
.legal-consent-container .hs-richtext a,
form .hs-main-font-element p,
form .hs-main-font-element a {
  font-size: 12px;
  text-transform: unset;
  letter-spacing: unset;
  line-height: 1;
}

.blog-sidebar-form .legal-consent-container .hs-richtext p {
  margin-top:15px;
  margin-bottom:0;
  font-size: 12px;
}

form .hs-main-font-element p {
  margin-top: 15px;
  margin-bottom: 15px;
}

.blog-sidebar-form .legal-consent-container .hs-richtext p:last-child {
  margin-bottom:15px;

}

/*.blog-sidebar-form .hs-form-field label span {
  display: none;
}*/

li.hs-form-booleancheckbox label span {
  display: block !important;
  font-size: 10px;
  line-height: 13px;
}

ul.inputs-list {
  padding: 0;
  list-style-type: none !important;
}
#hs_form_target_form_861828353 {
    padding: 20px !important; /* Aplica padding de 20px */
}
/* Aplica solo a .blog-navfooter y sus contenedores */
.blog-navfooter .container, 
.blog-navfooter .container-sm, 
.blog-navfooter .container-md, 
.blog-navfooter .container-lg, 
.blog-navfooter .container-xl {
    max-width:  1250px; /* O el valor que desees */
}
   #hs_cos_wrapper_module_17308105912131 {
  
}