html, body { overflow-x: hidden; }
    
/* Hero pagination bullets */
.hero-bullet{
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  border: 2px solid rgba(255,255,255,.9);
  background: transparent;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
  opacity: .9;
}

.hero-bullet:hover{
  transform: scale(1.08);
}

.hero-bullet.is-active{
  background: rgba(255,255,255,.95);
  opacity: 1;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


/* Separadores verticales (desktop) */
@media (min-width: 768px){
  #newsTrack .news-card{
    position: relative;
  }
  #newsTrack .news-card:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-1px;
    top: 90px;
    height: 260px;
    width: 2px;
    background: #F2B400;
    opacity: .9;
    border-radius: 999px;
  }
}


/* ================================
   DESKTOP CHICO (1270 / 1366)
   No afecta >1366
================================ */
@media (max-width: 1366px) and (min-width: 1024px){

  /* --- NAV HERO: que entre sin romper --- */

  /* Logo un poco más chico y más adentro */
  #mainNavLogo{
    left: 18px !important;           /* antes md:left-[50px] */
    width: 120px !important;         /* antes 140 */
  }

  /* Ajusto el espacio que deja el logo */
  #mainNavPill{
    margin-left: 120px !important;   /* acompaña el nuevo logo */
  }

  /* Lista: menos padding y tamaño de fuente */
  #mainNavList{
    padding-left: 22px !important;   /* antes md:px-10 */
    padding-right: 22px !important;
    font-size: 12px !important;      /* antes 13 */
    gap: 6px !important;
  }

  /* Links un poco más “finos” para ahorrar ancho */
  #mainNavList a{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Si aun así queda justo: oculto SOLO en 1024–1366 el último item (Bienestar) */
  #mainNavList li:last-child{
    display: none !important;
  }

  /* --- HERO: posiciones con top/translate fijos (opcional pero suele arreglar 1366) --- */

  /* Onda superior más arriba (en 1366 suele quedar baja) */
  #heroWaveTop{
    top: 500px !important;           /* antes top-[550px] */
    height: 420px !important;        /* antes lg:h-[500px] */
    opacity: 0.65 !important;
  }

  /* Texto del hero un toque más arriba para que no choque con ondas */
  #heroCopy{
    transform: translateY(210px) !important;  /* antes translate-y-[250px] */
  }

  /* Onda inferior (la “OLA”): subir un poco */
  #heroWaveBottom{
    top: 680px !important;           /* antes top-[720px] */
  }
}