:root{
  --gdc-orange:#ff7a00;
  --sticky-offset:72px; /* ajusta si tu navbar fija mide distinto */
}

/* Barra de tabs sticky con sombra al bajar */
.nav-container{
  position: sticky;
  top: var(--sticky-offset);
  z-index: 1020;
  background:#fff;
  transition: box-shadow .2s ease;
}
.nav-container.is-stuck{ box-shadow: 0 10px 24px rgba(0,0,0,.08); }

/* Indicador deslizante (lo inyecta el JS) */
#myTabs{ position: relative; }
#myTabs .active-indicator{
  position:absolute; bottom:0; height:3px; width:0; left:0;
  background:var(--gdc-orange); border-radius:2px;
  transition:left .25s ease, width .25s ease;
}

/* Micro-interacciones sin cambiar tu paleta */
#myTabs .nav-link{ transition: transform .15s ease, opacity .2s ease; }
#myTabs .nav-link:hover{ transform: translateY(-1px); }
.icon-circle{
  width:44px;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:#fff; box-shadow: inset 0 0 0 1.5px rgba(255,122,0,.25); transition: box-shadow .25s ease;
}
#myTabs .nav-link.active .icon-circle{
  box-shadow: inset 0 0 0 2px var(--gdc-orange), 0 6px 18px rgba(255,122,0,.18);
}

/* Asegura buen anclaje si usas hashes (no obligatorio) */
.tab-pane{ scroll-margin-top: calc(var(--sticky-offset) + 16px); }


/* MOBILE: barra de tabs deslizante */
#myTabs{
  display:flex;
  overflow-x:auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap:.5rem;
  padding:.25rem .5rem .5rem;
  position: relative; /* importante para el indicador */
}
#myTabs::-webkit-scrollbar{ height:0; }
#myTabs{ scrollbar-width: none; }
#myTabs .nav-item{
  flex:0 0 auto;
  scroll-snap-align:center;
  min-width:80px;
  text-align:center;
}
/* Indicador naranja (el JS ajusta left/width) */
#myTabs .active-indicator{
  position:absolute; bottom:0; height:3px; width:0; left:0;
  background:#ff7a00; border-radius:2px;
  transition:left .25s ease, width .25s ease;
}

/* --- FIX: icono se sale del círculo --- */
.icon-circle{ 
  overflow: hidden;              /* recorta cualquier desborde */
}

/* neutraliza el margin-top inline de la building */
.icon-circle .fa-building{ 
  margin-top: 0 !important; 
}

/* ajusta el tamaño del stack para que quepa cómodo en 44x44 */
.icon-circle .fa-stack{
  font-size: 18px;               /* tamaño controlado del stack */
  width: 1.9em; 
  height: 1.9em; 
  line-height: 1.9em;
}
.icon-circle .fa-stack i{
  line-height: inherit;
}

/* alineación fina de las dos capas */
.icon-circle .fa-stack .fa-hand-holding{
  transform: translateY(2px) scale(.95);
}
.icon-circle .fa-stack .fa-building{
  transform: translateY(-4px) scale(.9);
}