/* ==========================================================================
   Menu de secciones en formato pildora: barra blanca redondeada con un item
   activo resaltado en degrade (icono + etiqueta). Los items los arma el
   template desde paragraph.field_seccion_empresas (field_icono_seccion +
   field_titulo_seccion + field_url_seccion).
   Ver templates/paragraph--menu-secciones.html.twig y
   js/menuSecciones.js. Depende de css/general.css (variables de
   color y tipografia).

   Mobile-first: la barra ocupa todo el ancho disponible (hasta 1309px) y
   scrollea en horizontal si los items no entran; los items se reparten con
   space-between para usar todo ese ancho en vez de quedar agrupados.
   ========================================================================== */

:root {
  --section-menu-pad: 6px;
  --section-menu-gap: 4px;
}

/* Mismo ancho y margenes que .dynamic-banner (css/bannerDinamico.css) para
   que ambos componentes ocupen exactamente el mismo espacio. */
.section-menu {
  max-width: 1309px;
  margin: 32px 16px 0;
  padding-inline: 0px;
  font-family: var(--font-base);
}

/* Barra blanca redondeada; ocupa todo el ancho del componente (1309px) y
   scrollea en horizontal sin mostrar la scrollbar si los items no entran. */
.section-menu__scroll {
  width: 100%;
  overflow-x: auto;
  border-radius: 999px;
  background: #EDF4FC;
  box-shadow: 0 8px 24px rgba(43, 27, 77, 0.1);
  padding: 20px 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.section-menu__scroll::-webkit-scrollbar {
  display: none;
}

.section-menu__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--section-menu-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.section-menu__item {
  flex-shrink: 0;
}

/* ---------- Item (icono + etiqueta) ---------- */

.section-menu__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--iplan-grey);
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.section-menu__label {
  color: var(--Gris, #7B828C);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* En el item activo la etiqueta sigue el color del link (blanco). */
.section-menu__link.is-active .section-menu__label {
  color: inherit;
}

/* El icono es un PNG de NEW/img/: su color es fijo, no hereda el del link. */
.section-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.section-menu__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Gris por defecto; version blanca solo en el item activo (sobre el degrade).
   Selectores con .section-menu__icon delante para ganarle en especificidad
   a ".section-menu__icon img { display: block }". */
.section-menu__icon .section-menu__icon-img--color {
  display: none;
}

.section-menu__link.is-active .section-menu__icon .section-menu__icon-img--grey {
  display: none;
}

.section-menu__link.is-active .section-menu__icon .section-menu__icon-img--color {
  display: block;
}

/* Item activo: pildora en degrade con icono/etiqueta en blanco. */
.section-menu__link.is-active {
  background: var(--iplan-gradient);
  color: var(--iplan-white);
}

/* Celular/tablet (<996px): items con icono se muestran solo con el icono,
   en un circulo de 40px — igual que .dynamic-banner__nav-item en
   css/bannerDinamico.css. El label vuelve a aparecer desde 996px. Los items
   sin icono siguen mostrando el label para no quedar vacios. */
.section-menu__link--has-icon {
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 100%;
}

.section-menu__link--has-icon .section-menu__label {
  display: none;
}

/* Nodos 247, 248 y 249: el item activo va en gris en lugar del degrade. */
.page-node-227 .section-menu__link.is-active,
.page-node-228 .section-menu__link.is-active,
.page-node-229 .section-menu__link.is-active {
  background: var(--iplan-grey);
  color: var(--iplan-white);
}

/* Nodos 244, 245 y 246: estilo propio del item activo. */
.page-node-230 .section-menu__link.is-active,
.page-node-231 .section-menu__link.is-active,
.page-node-232 .section-menu__link.is-active {
  background: var(--iplan-grey);
  color: var(--iplan-white);
}

/* Nodos 241, 242 y 243: estilo propio del item activo. */
.page-node-224 .section-menu__link.is-active,
.page-node-225 .section-menu__link.is-active,
.page-node-226 .section-menu__link.is-active {
  background: var(--iplan-grey);
  color: var(--iplan-white);
}

/* ==========================================================================
   >= 760px : mas aire en la barra.
   ========================================================================== */
@media (min-width: 760px) {
  :root {
    --section-menu-pad: 20px 20px;
    --section-menu-gap: 6px;
  }

}

/* ==========================================================================
   >= 996px : vuelve el label junto al icono (pildora normal).
   ========================================================================== */
@media (min-width: 996px) {
  .section-menu__link--has-icon {
    width: auto;
    height: auto;
    padding: 8px 14px;
    border-radius: 999px;
  }

  .section-menu__link--has-icon .section-menu__label {
    display: inline;
  }
}

/* ==========================================================================
   >= 1366px : se centra, igual que .dynamic-banner.
   ========================================================================== */
@media (min-width: 1366px) {
  .section-menu {
    margin: 32px auto 0 auto;
  }
}