/* ==========================================================================
   Header Mercury
   Variante del header para el sitio mercury_empresas: wordmark "iplan" en
   texto (no PNG), barra de gradiente con el mensaje + CTA centrados, y menu
   hamburguesa desplegable en celular/tablet (ver js/headerMercury.js).
   Depende de css/general.css (variables de color, tipografia y .btn base).

   Mobile-first. Mismos breakpoints y semantica que headerEmpresas.css:
   760 (misma UI que mobile, solo mas aire) / 996 (cambio grande: pasa a
   layout desktop, aparecen iconos + "Contacto" y se oculta la hamburguesa)
   / 1366 (misma UI que 996, solo mas aire en el contenedor).
   ========================================================================== */

:root {
  --mh-container-max: 1366px;
  --mh-container-pad: 16px;
  /* Alto total del header: fila superior (28 + 28 + 24) + barra (30). */
  --mh-height: 110px;
}

/* Header fijo arriba al scrollear. El top respeta la toolbar de admin de
   Drupal (--drupal-displace-offset-top) cuando hay sesion iniciada. */
.mercury-header {
  position: fixed;
  top: var(--drupal-displace-offset-top, 0px);
  left: 0;
  right: 0;
  z-index: 1000;
  background-color:#EDF4FC;
}

/* Ocupa el lugar del header en el flujo para que el contenido no quede
   tapado debajo. */
.mercury-header-spacer {
  height: var(--mh-height);
}

.mercury-header__container {
  max-width: var(--mh-container-max);
  margin: 0;
  padding: 0 var(--mh-container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ---------- Barra superior: breadcrumb / logo / acciones ---------- */

.mercury-header__top {
  background: #EDF4FC;
  padding: 28px 0 24px 0;
  overflow-x: hidden;
      max-width: 1308px;
    margin: 0 auto;
}

/* Alto maximo de la fila superior: logo, iconos y "Contacto" miden 28px.
   En celular/tablet es una grilla de 3 columnas (1fr auto 1fr) para que el
   logo quede centrado sin importar el ancho del breadcrumb o las acciones. */
.mercury-header__top .mercury-header__container {
  max-height: 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.mercury-header__top .mercury-header__actions {
  justify-self: end;
}

.mercury-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.mercury-breadcrumb__home,
.mercury-breadcrumb__current {
  color: var(--magenta-iplan, #FF006E);
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
}

.mercury-breadcrumb__home {
  color: var(--gris-iplan, #7B828C);
  font-weight: 400;
}

/* ---------- Logo (imagen NEW/img/logo_iplan_empresas.png) ---------- */

.mercury-header__logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  margin-left: 16px;
}

.mercury-header__logo img {
  display: block;
  height: 38px;
  width: auto;
}

/* ---------- Acciones ---------- */

.mercury-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Controles solo-desktop, ocultos en celular/tablet */
.mercury-header__actions .icon-btn,
.mercury-header__actions .btn--outline {
  display: none;
}

.icon-btn {
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  text-decoration: none;
}

/* Iconos PNG (NEW/img/headercontacto.png y headerayuda.png): la imagen ya
   trae el circulo, por eso el boton no lleva borde propio. */
.icon-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* "Contacto": alto fijo de 28px (el padding vertical de .btn--outline de
   general.css lo hacia mas alto). */
.mercury-header__actions .btn--outline {
  height: 28px;
  padding: 0 22px;
  color: var(--contacto-text-color, #FD006E);
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* ---------- Hamburguesa (solo celular/tablet) ---------- */

.mercury-header__hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  width: 32px;
  height: 22px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.mercury-header__hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--gris-iplan, #7B828C);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Estado abierto: las barras forman una X */
.mercury-header__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.mercury-header__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.mercury-header__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* ---------- Barra de gradiente: mensaje + CTA (centrados) ----------
   Alto FIJO de 28px en todos los breakpoints (el CTA mide 20px). El
   contenido esta dimensionado para entrar en una sola linea incluso a
   320px, asi que no hace falta wrap; overflow-x: hidden recorta cualquier
   traduccion mas larga en vez de desbordar la pagina (lo que empujaba la
   hamburguesa fuera de la pantalla). */
.mercury-header__bar {
  height: 30px;
  background: var(--iplan-gradient);
  overflow-x: hidden;
}

.mercury-header__bar .mercury-header__container {
  height: 100%;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
  padding-inline: 12px;
      max-width: 1308px;
    margin: 0 auto;
}

.mercury-header__bar-text {
  margin: 0;
  color: #EDF4FC;
  font-family: "Inter", var(--font-base);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
}

/* En celular solo se ve "somos Tecnologia Contextual": se fuerza la
   mayuscula inicial para que lea "Somos ...". Desde 996px el prefijo vuelve
   a aparecer y la frase ya arranca con mayuscula ("Nos adaptamos ..."). */
.mercury-header__bar-text::first-letter {
  text-transform: uppercase;
}

.mercury-header__bar-text-prefix {
  display: none;
}

/* CTA de la barra: pill de borde blanco sobre fondo transparente (el
   gradiente se ve a traves), texto e icono blancos. NO usa .btn--pill
   (ese es blanco solido con texto oscuro). */
.mercury-header__bar-cta {
  flex-shrink: 0;
  height: 24px;
  padding: 0 12px;
  border-color: #EDF4FC;
  background: transparent;
  color: #EDF4FC;
  font-family: "Inter", var(--font-base);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
}

.mercury-header__bar-cta svg {
  width: 12px;
  height: 12px;
  color: currentColor;
}

/* ---------- Menu desplegable (solo celular/tablet) ---------- */

.mercury-header__menu {
  display: none;
  background: var(--iplan-white);
  border-top: 1px solid rgba(43, 27, 77, 0.08);
  box-shadow: 0 12px 24px rgba(43, 27, 77, 0.12);
}

.mercury-header__menu--open {
  display: block;
}

.mercury-header__menu-list {
  list-style: none;
  margin: 0;
  padding: 8px var(--mh-container-pad);
  max-width: var(--mh-container-max);
  margin-inline: auto;
}

.mercury-header__menu-link {
  display: block;
  padding: 12px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--iplan-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 27, 77, 0.06);
}

.mercury-header__menu-list li:last-child .mercury-header__menu-link {
  border-bottom: 0;
}

/* ==========================================================================
   >= 760px : mismo layout que mobile, solo se respira un poco mas.
   ========================================================================== */
@media (min-width: 760px) {
  :root {
    --mh-container-pad: 24px;
  }

  .mercury-header__bar-text {
    font-size: 12px;
  }

  .mercury-header__bar-cta {
    font-size: 12px;
    padding: 0 14px;
  }
}

/* ==========================================================================
   >= 996px : cambio grande, pasa a layout desktop.
   ========================================================================== */
@media (min-width: 996px) {
  :root {
    --mh-container-pad: 32px;
  }

  /* Desktop: vuelve el layout flex original, con el margen izquierdo de 90px
     y los valores de breadcrumb/logo del diseno desktop. */
  .mercury-header__top .mercury-header__container {
    display: flex;
    margin: 0 0 0 0px;
    padding: 0;
  }

  .mercury-breadcrumb {
    gap: 35px;
  }

  .mercury-breadcrumb__home,
  .mercury-breadcrumb__current {
    font-size: 16px;
  }

  .mercury-header__logo {
    margin-left: 0;
  }

  .mercury-header__logo img {
    height: 46px;
    width: 114px;
  }

  .mercury-header__actions .icon-btn,
  .mercury-header__actions .btn--outline {
    display: inline-flex;
  }

  .mercury-header__hamburger {
    display: none;
  }

  /* El menu desplegable es exclusivo de celular/tablet: en desktop no se
     muestra nunca aunque quede la clase --open de un resize. */
  .mercury-header__menu,
  .mercury-header__menu--open {
    display: none;
  }

  .mercury-header__bar-text-prefix {
    display: inline;
  }

  .mercury-header__bar-cta {
    font-size: 13px;
    padding: 0 18px;
  }
}

/* ==========================================================================
   >= 1366px : mismo layout que 996px, solo mas aire en el contenedor.
   ========================================================================== */
@media (min-width: 1366px) {
  :root {
    --mh-container-pad: 48px;
  }
}

/* ---------- Hover: solo cursor pointer ----------
   Anula los cambios de hover que vienen de Bootstrap (a:hover, .btn:hover)
   y de general.css (.btn:hover opacity) re-declarando los mismos valores
   de reposo de cada elemento. */
.mercury-header a,
.mercury-header button {
  cursor: pointer;
}

.mercury-header a:hover,
.mercury-header a:focus,
.mercury-header a:active {
  text-decoration: none;
}

.mercury-header .btn:hover,
.mercury-header .btn:focus,
.mercury-header .btn:active {
  opacity: 1;
  box-shadow: none;
}

.mercury-breadcrumb__home:hover,
.mercury-breadcrumb__home:focus {
  color: var(--gris-iplan, #7B828C);
}

.mercury-breadcrumb__current:hover,
.mercury-breadcrumb__current:focus {
  color: var(--magenta-iplan, #FF006E);
}

.mercury-header .btn--outline:hover,
.mercury-header .btn--outline:focus,
.mercury-header .btn--outline:active {
  color: var(--contacto-text-color, #FD006E);
  border-color: var(--iplan-pink);
  background: transparent;
}

.mercury-header__bar-cta:hover,
.mercury-header__bar-cta:focus,
.mercury-header__bar-cta:active {
  color: #EDF4FC;
  border-color: #EDF4FC;
  background: transparent;
}

.mercury-header__menu-link:hover,
.mercury-header__menu-link:focus {
  color: var(--iplan-dark);
}

#CollapsingNavbar, #header, .highlighted{
  display:none!important;
}

/* Hover magenta exclusivo del menú Mercury Hogar */
.mercury_hogar .mercury-header .hoverMagenta a:hover,
.mercury_hogar .mercury-header .hoverMagenta a:focus-visible {
    color: var(--magenta-iplan, #FF006E) !important;
    transition: color 0.2s ease;
}

.mercury-header__menu-actions {
  display: none;
}

@media (max-width: 995px) {

  .mercury-header__menu-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    width: 100%;
    padding: 16px 20px;

    border-bottom: 1px solid #d9d9d9;
    box-sizing: border-box;
  }

  .mercury-header__menu-action {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    padding: 0;
    text-decoration: none;
  }

  .mercury-header__menu-action img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .mercury-header__menu-contact {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 4px 22px;

    border: 2px solid var(--iplan-pink);
    border-radius: 999px;

    color: var(--iplan-pink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;

    text-decoration: none;
  }

}
/* ==========================================================
   MENÚ MOBILE - ACCIONES SUPERIORES
   ========================================================== */

.mercury-header__menu-actions {
  display: none;
}

@media (max-width: 995px) {

  .mercury-header__menu-actions {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    width: 100%;
    padding: 16px 20px;

    border-bottom: 1px solid #dedede;

    background: #fff;

    box-sizing: border-box;
  }

  .mercury-header__menu-action {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;
    margin: 0;

    text-decoration: none;
  }

  .mercury-header__menu-action img {
    display: block;

    width: 28px;
    height: 28px;

    object-fit: contain;
  }

  .mercury-header__menu-contact {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 32px;
    padding: 4px 22px;

    border: 2px solid #ff006e;
    border-radius: 999px;

    color: #ff006e;
    background: transparent;

    font-size: 14px;
    font-weight: 500;
    line-height: 1;

    text-decoration: none;
  }

  .mercury-header__menu-contact:hover,
  .mercury-header__menu-contact:focus-visible {
    color: #fff;
    background: #ff006e;
  }


  /* ========================================================
     LINKS
     ======================================================== */

  .mercury-header__menu-list {
    width: 100%;
    margin: 0;
    padding: 0;

    list-style: none;

    background: #fff;
  }

  .mercury-header__menu-list li {
    width: 100%;
    margin: 0;
    padding: 0;

    border-bottom: 1px solid #ededed;
  }

  .mercury-header__menu-link {
    display: block;

    width: 100%;
    padding: 15px 20px;

    box-sizing: border-box;

    color: #222;
    background: #fff;

    font-size: 15px;
    font-weight: 400;

    text-decoration: none;
  }

  .mercury-header__menu-link:hover,
  .mercury-header__menu-link:focus-visible {
    color: #ff006e;
  }

  .mercury-header__menu-link.is-active {
    color: #ff006e;
    font-weight: 600;
  }

}