header.header {
  background-color: rgba(248, 248, 248, 1.0);
  
}

.hs-inline-edit .header {
  position: static;
}

.body-wrapper [data-global-resource-path*="header.html"],
.body-wrapper [data-global-resource-path*="megamenu.html"] {
  position: relative;
}

.body-wrapper--header-fixed [data-global-resource-path*="header.html"],
.body-wrapper--header-fixed [data-global-resource-path*="megamenu.html"],
.body-wrapper--header-dynamic_scroll_up [data-global-resource-path*="header.html"],
.body-wrapper--header-dynamic_scroll_up [data-global-resource-path*="megamenu.html"]{
  position: sticky;
  top: 0;
  z-index: 3;
}

.body-wrapper--header-dynamic_scroll_up .header {
  transition: all linear 0.2s;
}

.body-wrapper--header-dynamic_scroll_up.scroll-down .header{
  opacity: 0;
  visibility: hidden;
}

.body-wrapper--header-dynamic_scroll_up.scroll-down .header__navigation--toggle{
  display: none;
}
.body-wrapper--header-transparent header.header {
  background-color: transparent;
  transition: all linear 0.2s;
  box-shadow: initial;
}
.body-wrapper--header-transparent.scroll-transparent header.header {
  background-color: rgba(248, 248, 248, 1.0);
  
}
.body-wrapper--header-transparent [data-global-resource-path*="header.html"],
.body-wrapper--header-transparent [data-global-resource-path*="megamenu.html"]{
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

.header__container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1286px;
  padding: 32px 24px;
  margin: 0 auto;
}

@media screen and (max-width: 1200px){
	.header__container {
    padding: 32px 24px;  
	}
}

.header__menu--flex {
  display: flex;
}

.header__search--toggle,
.header__language-switcher--toggle {    
  margin-left: 30px;
}

.header__search--toggle path {
	stroke: rgba(5, 102, 138, 1.0);
}

.header__search--close {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  cursor: pointer;
  left: 0;
  bottom: 0;
}

.top-header {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 0px;
}

.header__navigation--toggle {
  display: none;
}

#nav-toggle {
  display: none;
}

/* Styles for the Logo */
.header__logo {
  margin-right: auto;
  position: relative;
  z-index: 3;
}

.header__logo img {
  max-width: 100%;
  max-width: 200px;
  display: block;
}

.header__logo--tablet {
  display: none;
}

/* Styles for the Search Bar */
.header__search {
  position: fixed;
  opacity: 0;
  visibility: hidden;
  display: block;
  z-index: -1;
  background-color: rgba(57 ,65 ,73,0.4);
  transition: all ease-in-out 0.3s;
  top: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  right: 0;
  left: 0;
}

.header .hs-search-field__bar button svg {
  height: 16px;
}

.header__search.open { 
  opacity: 1;
  visibility: visible;
  z-index: 999;
}
.header__search--content {
  align-content: center;
  display: grid;
  height: 100%;
  padding: 10px;
}
.header__search--box {
  background-color: rgb(248, 248, 248);
  padding: 32px;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 610px;
  margin: auto;
  border-radius: 16px;
}

.header__search--box button {
	background-color: rgb(5, 102, 138);
	border:rgb(5, 102, 138);
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.header__search--box svg path {
	fill: rgb(255, 255, 255);
}

.header__search--toggle {
  cursor: pointer;
  margin-left: 30px;
}

header .hs-search-field .hs-search-field__bar form{
  display: grid;
  grid-template-columns: 1fr auto;
}

.hs-search-field__bar{
  position:relative;
}

.header__search .hs-search-field__input {
  box-sizing: border-box;
  border: 1px solid #EEE;
  background: #FFF;
  outline-color: transparent;
  outline: none;
  padding: 15px 12px;
  font-size: 20px;
  line-height: 1.75;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.header__search .hs-search-field__input:focus {
  outline-color: transparent;
  outline: none;
}

.header__search .hs-search-field__input::placeholder {
  color: #D1D6DC;
  opacity: 1;
}

.header__search .hs-search-field__input:-ms-input-placeholder {
  color: #D1D6DC;
}

.header__search .hs-search-field__input::-ms-input-placeholder {
  color: #D1D6DC;
}

.header__search .hs-search-field--open .hs-search-field__suggestions {
  position: absolute;
  width: 100%;
  background-color: white;
  border: none;
  border-radius: 0;
  z-index: 10;
  padding: 0px;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
}
.hs-search-field__suggestions .results-for {
  padding: 16px !important;
}
.header__search .hs-search-field {
  position: initial;
}
.header__search .hs-search-field__suggestions li {
  border-bottom: 1px solid #D1D6DC;
  font-family: ;
}
.header__search .hs-search-field__suggestions li:last-child {
  border-bottom: none;
}

.header__search .hs-search-field__suggestions li a {
  color: var(--body);
  text-decoration: none;
  padding: 10px;
}
.header__search .hs-search-field__suggestions li a:hover {
  background: none;
}
.header__search .hs-search-field__suggestions #results-for {
  display: none;
}

/* Styles for the Language Switcher Component */
.header__language-switcher--toggle {
  cursor: pointer;
  background-image: none;
  background-position: initial;
  background-repeat: initial;
  background-size: auto;
}

.header__language-switcher--toggle:after {
  content: "";
}

.header__language-switcher .globe_class {
  background-image: none;
  background-position: initial;
  background-repeat: initial;
  background-size: auto;
  border-radius: initial;
  width: auto;
  height: auto;
  cursor: pointer;
}

.header__language-switcher .lang_switcher_class {
  position: static;
  display: block !important;
}

.header__language-switcher .lang_list_class {
  display: block;
  visibility: hidden;
  opacity: 0;
  font-size: 0.8rem;
  top: 0;
  right: 0;
  left: initial !important;
  transform: none !important;
  padding-top: 0;
  min-width: 100px;
  text-align: left;
  transition: opacity 0.3s;
}

.header__language-switcher--wrapper:hover .lang_list_class {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s;
}

.header__language-switcher .lang_list_class.first-active::after {
  top: -22px;
  border-bottom-color: #EBEFF3;
  transition: 0.3s;
}

.header__language-switcher .lang_list_class li {
  border: none;
  background: inherit;
  padding: 10px 15px;
  font-size: 18px;
}

.header__language-switcher .lang_list_class li:first-child {
  border-top: none;
}

.header__language-switcher .lang_list_class li:last-child {
  border-bottom: none;
}

.header__language-switcher .lang_list_class li:hover {
  transition: background-color 0.3s;
  background-color: rgba(193, 190, 190, 0.1);
}

.header__language-switcher--label {
  display: flex;
  position: relative;
}

.header__language-switcher--label-current {
  font-size: 18px;
  margin-left: 10px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

/* Header CTA */
.header__cta--desktop {
  display: flex;
  align-items: center;
}

.header__cta--desktop .header__cta--main,
.header__cta--desktop .header__cta--secondary {
  margin-left: 10px;
}

.header__cta--mobile {
  text-align: center;
  padding-bottom: 150px;
  display: none;
}

.header__cta--mobile .header__cta--main,
.header__cta--mobile .header__cta--secondary {
  padding: 0 24px;
}

.header__logo .logo-company-name,
.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
  color: rgba(5, 102, 138, 1.0);
  
  font-family: Poppins;
  font-style: normal;
  font-weight: 300;
  text-decoration: none;
  
  font-size: 15px;
}

.header__language-switcher-label-current:hover,
.header__language-switcher-label-current:focus,
.header__language-switcher .lang_list_class li:hover a,
.header__language-switcher .lang_list_class li a:focus {
  color: rgba(112, 153, 48, 1.0);
}

.header__language-switcher .lang_list_class:after, .lang_list_class:before {
  display: none !important;
}

.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
  font-family: {font=Poppins, font_set=GOOGLE, styles={font-family=Poppins, font-style=normal, font-weight=normal, text-decoration=none}, size=null, size_unit=null, color=#22252B, variant=null, fallback=null, line_height=null, letter_spacing=null, casing=null, style=font-family: Poppins; font-style: normal; font-weight: normal; text-decoration: none, css=color: #22252B;font-family: Poppins;};
}

header .header__navigation--toggle > span,
header .header__navigation--toggle > span:after,
header .header__navigation--toggle > span:before {
  background-color: rgba(5, 102, 138, 1.0);
}

.header__navigation.open {
  background-color: rgba(248, 248, 248, 1.0);
}

.header__menu {
  display: block;
}

.header__search--wrapper {
  display: block
}

.menu-arrow-bg {
  color: rgba(5, 102, 138, 1.0);
}

.header__navigation--toggle,
.header__language-switcher--toggle,
.header__close--toggle {
  position: relative;
  cursor: pointer;
}

.header__navigation--toggle,
.header__search--toggle,
.header__language-switcher--toggle{    
  margin-left: 20px;
}

.header__navigation--toggle.hide,
.header__search--toggle.hide,
.header__language-switcher--toggle.hide {
  display: none;
}

.header__navigation--toggle.open,
.header__search--toggle.open,
.header__language-switcher--toggle.open {
  display: block;
}

.header__navigation--toggle.open:after,
.header__search--toggle.open:after,
.header__language-switcher--toggle.open:after {
  display: block;
}

.header__navigation--toggle:after,
.header__search--toggle:after,
.header__language-switcher--toggle:after {
  display: none;
  position: absolute;
  left: 40px;
  top: -10px;
  font-weight: 600;
  font-size: 26px;
  text-transform: uppercase;
}

.header__column {
  position: relative;
}

.header__navigation--toggle {
  font-size: 0rem;
  cursor: pointer;
  position: relative;
}

.header__navigation--toggle > span {
  display: inline-block;
  position: relative;
  height: 2px;
  width: 18px;
  border-radius: 1px;
  background: #293335;
  vertical-align: middle;
}

.header__navigation--toggle > span:before, 
.header__navigation--toggle > span:after {
  display: inline-block;
  position: absolute;
  content: "";
  height: 2px;
  border-radius: 1px;
  background: #293335;
  transition: all 200ms;
}

.header__navigation--toggle > span:before {
  top: -8px;
  width: 18px;
}

.header__navigation--toggle > span:after {
  top: 8px;
  width: 18px;
}

.header__navigation.open .header__navigation--close{
  display: block;
}

.no-scroll .header__navigation--toggle > span,
.header__navigation--close > span{
  height: 0;
}

.no-scroll .header__navigation--toggle > span:before,
.header__navigation--close > span:before{
  transform: rotate(45deg);
}

.no-scroll .header__navigation--toggle > span:after,
.header__navigation--close > span:after{
  transform: rotate(-45deg);
}

.no-scroll .header__navigation--toggle > span:after,
.no-scroll .header__navigation--toggle > span:before,
.header__navigation--close > span:after,
.header__navigation--close > span:before{
  top: 0px;
  left: 0;
  width: 18px;
}

/*--- Menu Left */
.header--menu_left .header__logo {
  margin-right: 30px;
}
.header--menu_left .header__menu {
  margin-right: auto;
}

/*--- Menu Center */
.header--menu_center .header__logo {
  margin-right: 20px;
}
.header--menu_center .header__menu {
  margin: auto;
}

/*--- Logo Top */
.header--logo_top .header__logo {
  margin: auto;
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 20px;
}

.header--logo_top .menu-section .menu-link{
  transition:all ease 0.3s;
}
.header--logo_top .header__bottom {
  background-color: rgba(5, 102, 138, 1.0);
}
.header--logo_top .header__container {
  justify-content: center;
}

@media screen and (max-width: 1200px){
  .header__navigation--toggle {
    display: block;
    order:5;
  }

  .header__menu {
    order:2;
  }

  #hs_cos_wrapper_megamenu {
    order: 2;
  }

  

  .header__cta--desktop{
    order: 3;
  }

  .header__search--wrapper{
    order: 4;
  }

  .header__cta--mobile{
    display: block;
  }

  .header__navigation.open .menu-section{
    overflow: auto;
    height: calc(100vh - 100%);
  }

  .top-header {
    padding-bottom: 10px;
  }
}

@media (max-width: 1200px) {
  .header__logo img {
    max-width: 100px;
  }
  body .navigation-primary a,
  .header__logo .logo-company-name,
  .header__language-switcher-label-current,
  .header__language-switcher .lang_list_class li a {
    font-size: 15px;
  }
  .header--logo_top .header__container {
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  .header--logo_top .header__navigation--toggle {
    margin-right: auto;
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  body .navigation-primary a,
  .header__logo .logo-company-name,
  .header__language-switcher-label-current,
  .header__language-switcher .lang_list_class li a {
    font-size: 15px;
  }

  /* HEADER = contenedor del layout mobile */
  .header{
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "logo  portal"
      "icons toggle"; /* toggle siempre a la derecha */
    align-items: center;
    gap: 10px 14px;
    padding: 12px 16px;
  }

  .main-header{
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: contents;
  }

  .header__logo{
    grid-area: logo;
    justify-self: start;
    align-self: center;
  }

  .header__language-switcher--wrapper{
    display: none !important;
  }

  /* Burger a la derecha */
  .header__navigation--toggle{
    grid-area: toggle;
    justify-self: end;
    margin: 0 !important;
  }

  /* ICONOS (search + carrito + login) abajo izquierda */
  .header__cta--desktop{ display: flex; justify-content: right; gap: 10px;}

  .header__search--wrapper{
    grid-area: icons;
    justify-self: start;
    display: flex !important;
    align-items: center;
    gap: 16px;
    margin: 0 !important;
  }

  .header__search--toggle{
    display: flex;
    align-items: center;
    line-height: 0;
  }

  /* top-header ya no existe, pero si quedara en markup no estorba */
  .top-header{ display: contents !important; }
  .top-header .header__container{
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  .top-header a,
  .top-header button{
    border-radius: 999px;
    white-space: nowrap;
  }

  /* Portal Login arriba derecha */
  #button_button_0{
    grid-area: portal;
    justify-self: end;
    align-self: start;
    margin: 0 !important;
  }

  /* ===== BOTONES SOLO ICONO EN MOBILE (carrito) ===== */
  #button_button_1{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    min-width: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    margin: 0 !important;
  }

  /* ===== LOGIN (icon + texto Login) ===== */
  #button_button_2{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 44px;
    width: auto !important;
    padding: 0 12px !important;
    min-width: 0 !important;
    line-height: 1 !important;
    font-size: 14px !important;
    text-indent: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    gap: 8px;
  }

  /* Si el label real está oculto por el theme, lo mostramos */
  #button_button_2 .button__text,
  #button_button_2 .button__label{
    display: inline !important;
    font-size: 14px !important;
    white-space: nowrap;
  }

  /* Si no hay texto real, lo inyectamos por CSS */
  #button_button_2::after{

  }

  /* asegurar icono visible */
  #button_button_1 .button__icon,
  #button_button_2 .button__icon,
  #button_button_1 .button__icon svg,
  #button_button_2 .button__icon svg{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  #button_button_1 .button__icon,
  #button_button_2 .button__icon{
    text-indent: 0 !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    position: static !important;
  }

  #button_button_1 .button__icon svg,
  #button_button_2 .button__icon svg{
    width: 20px;
    height: 20px;
  }

  /* si button2 usa imagen */
  #button_button_2 .button__icon img{
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
    margin: 0px !important;
  }

  .header__logo img{
    max-height: 44px;
    width: auto;
    height: auto;
  }

  .header__cta.header__cta--secondary {
    margin: 0px;
  }
}

.header__cta.header__cta--secondary .button {
  padding: 11.2px 10px;
}

@media(max-width: 1200px){
  .header__cta.header__cta--main .image-icon__base {
    margin: 0px !important;
  }
}

.header__cta .image-icon__base,
.header__cta .button__icon.image-icon img{
  margin-right: 10px !important;
}

/* Scroll lock when nav is open */
body.is-nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Keep everything in one row and prevent random wrapping */
.header__container{
  flex-wrap: nowrap;
  gap: 16px;                 /* optional: nicer spacing */
}

/* Let the MENU be the flexible piece */
.header__menu{
  flex: 1 1 auto;
  min-width: 0;              /* IMPORTANT: allows shrinking */
}

/* Ensure nav doesn't force width */
.header__navigation,
.menu-section{
  min-width: 0;
}

/* Keep CTAs/icons from wrapping and from shrinking weirdly */
.header__cta--desktop{
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Prevent button text from wrapping */
.header__cta--desktop .button,
.header__cta--desktop a.button,
.header__cta--desktop button{
  white-space: nowrap;
}