@font-face{ font-family:'Roboto'; src:url("https://3416190.fs1.hubspotusercontent-na1.net/hubfs/3416190/fonts/Roboto-Regular.ttf"); }
@font-face{ font-family:'Roboto-Light'; src:url("https://3416190.fs1.hubspotusercontent-na1.net/hubfs/3416190/fonts/Roboto-Light.ttf"); }
@font-face{ font-family:'Roboto-SemiBold'; src:url("https://3416190.fs1.hubspotusercontent-na1.net/hubfs/3416190/fonts/Roboto-Medium.ttf"); }
@font-face{ font-family:'Roboto-Bold'; src:url("https://3416190.fs1.hubspotusercontent-na1.net/hubfs/3416190/fonts/Roboto-Bold.ttf"); }

.site-header { width: 100%; height: 70px; background-color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.site-header .container { width: 90%!important; max-width: 1600px; margin: 0 auto; }
.site-header .box { display: flex; align-items: center; justify-content: space-between; }
.site-header ul { max-width: 700px; list-style: none; display: flex; align-items: center; justify-content: center; }
.site-header ul > li { font-family: 'Roboto-Semibold'; font-size: 18px; line-height: 1.4%; color: #FF5900; }
.site-header ul > li a { display: block; width: max-content; text-decoration: none; color:currentColor; }
.site-header ul > li:not(:last-child) { margin-right: 30px; }
.site-header ul > li .button { display: block; padding: 10px 20px; max-width: max-content; font-family: 'Roboto-Semibold'; font-size: 18px; color: #FFFFFF; background: #FF5900; border: none; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15); border-radius:5px; }
.site-header ul > li .button.naranja { color: #FFFFFF; background: #FF5900;}
.site-header ul > li .button.morado { color: #FFFFFF; background: #432f64; }
.site-header ul > li .button.blanco { color: #FF5900; background: #FFFFFF; }
.site-header ul > li .button.rojo { color: #FFFFFF; background: #E1003C; }
.site-header img { max-height: 50px; }
.site-header .box .kebab { display: none; align-items: center; justify-content: flex-end; cursor: pointer; height: 100%;  }
.site-header .box .kebab span { width: 6px; height: 6px; background-color: #FF5900; margin: 0 2px; border-radius: 50%; }

@media screen and (max-width: 1199px) {
  .site-header ul > li { font-size: 16px; }
  .site-header ul > li:not(:last-child) { margin-right: 20px; }
  .site-header ul > li .button { padding: 10px; font-size: 16px; }
}

@media screen and (max-width: 991px) {
  .site-header { height: 60px; }
  .site-header img { height: 34px; }
  .site-header .box .kebab { display: flex; }
  .site-header .box ul { display: none; background-color: #FFFFFF; min-width: 180px; padding: 0; box-shadow: 0px 8px 8px -4px rgb(0 0 0 / 20%); margin: 0; position: absolute; right: 0; top: 60px; z-index: 999;  }
  .site-header .box ul > li { position: relative; padding: 20px 0; color: #FF5900; text-align: center; }
  .site-header .box ul > li.button{ padding: 10px; }
  .site-header .box ul > .nav-item a { padding: 0 20px; }
  .site-header .box ul > li.li-menu::after { content: ''; width: 90%; height: 1px; background-color: #FF5900; position: absolute; right: 0; left: 0; bottom: 0; margin: 0 auto;  }
  .options-open .site-header .box ul { display: block; }
}

/* ===== SUBMENÚ: ESTILO BASE ===== */
.site-header .nav > li { position: relative; }
.site-header .nav > li > a { position: relative; }

/* Caja del submenú (oculto por defecto) */
.site-header .nav > li > .submenu{
  display: none;
  position: absolute;
  left: 0; 
  top: 100%;
  min-width: 220px;
  background: #fff;
  padding: 8px 0;
  margin: 0;
  list-style: none;
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
  border-radius: 4px;
  z-index: 999;
}

/* Items del submenú */
.site-header .nav > li > .submenu > li{
  margin: 0;
  padding: 0;
  border-left: 4px solid #FF5900;
}
.site-header .nav > li > .submenu > li:not(:last-child){
  border-bottom: 1px solid #f3f3f1;
}
.site-header .nav > li > .submenu > li > a{
  display: block;
  padding: 10px 12px;
  font-family: 'Roboto-Semibold';
  font-size: 16px;
  color: #000;
  text-decoration: none;
}
.site-header .nav > li > .submenu > li:hover{ background:#f3f3f1; }
.site-header .nav > li.open { padding-top: 20px; padding-bottom: 0 }
.site-header .nav > li.open .submenu { padding: 0; }
.site-header .nav li.open .nav-item { padding: 0; margin: 0 }
.site-header .nav li.open > .nav-link { margin-bottom: 20px; }
.site-header .nav > li > .submenu > li > a { padding: 20px 24px; }

/* Flechita en elementos con hijos (desktop) */
@media (min-width: 992px){
  .site-header .nav > li > .submenu{ 100%; }
  .site-header .nav > li > a.has-children{ padding-right: 18px; }
  .site-header .nav > li > a.has-children::after{
    content: '▾';
    position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
    font-size: 14px; color: currentColor;
  }
  /* Mostrar submenú al hover (desktop) */
  .site-header .nav > li:hover > .submenu{ display: block; }
}

/* ===== MOBILE: acordeón ===== */
@media (max-width: 991px){
  /* Tu menú ya cae en panel; apilamos items */
  .site-header .box ul.nav{ width: 100%; }
  .site-header .nav > li{ width: 100%; }
  .site-header .nav > li > a{ display:block; padding:12px 16px; }
  .site-header .nav .nav-item:not(:last-child) { border-bottom: 1px #F3F3F1 solid; }
  /* Flechita en mobile */
  .site-header .nav > li > a.has-children{
    padding-right: 44px;
  }
  .site-header .nav > li > a.has-children::after{
    content:'▾';
    position:absolute; right: 10px; top:50%; transform:translateY(-50%);
    font-size:16px; color: currentColor;
  }
  .site-header .nav > li.open > a.has-children::after{
    transform: translateY(-50%) rotate(180deg);
  }

  /* Submenú dentro del flujo */
  .site-header .nav > li > .submenu{
    position: static;
    display: none;        /* se abre con .open */
    box-shadow: none;
    border-radius: 0;
  }
  .site-header .nav > li.open > .submenu{ display: block; padding: 0; }


}