/* ==========================================================================
   Chatealo · Megamenú del header (js/megamenu.js)
   Estilo tomado de stripe.com: al abrir, la barra del header se vuelve una
   tarjeta blanca y el panel se une debajo; el panel toma el tamaño de cada
   menú y el contenido se desliza hacia el lado del menú nuevo. La página
   de atrás se desenfoca. En tablet y mobile los menús son un acordeón.
   ========================================================================== */

.site-nav__trigger { cursor: pointer; }
.site-nav__link--has-menu::after { transition: transform .25s ease; }
.site-nav__trigger[aria-expanded="true"] { color: #000; }

@media (min-width: 1100px) {
  /* Barra blanca detrás del logo, el menú y los botones (sin mover nada de lugar) */
  .site-header__inner::before {
    content: "";
    position: absolute;
    inset: -1.4rem -2.4rem;
    z-index: -1;
    border-radius: 1.2rem 1.2rem 0 0;
    background: #fff;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .site-header.is-menu-open .site-header__inner::before { opacity: 1; }
  .site-nav__trigger[aria-expanded="true"]::after { transform: rotate(180deg); }

  /* Fondo compartido: cambia de tamaño entre un menú y otro */
  .megamenu-bg {
    position: absolute;
    top: calc(100% + 1.4rem);
    left: -2.4rem;
    z-index: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    border-radius: 0 0 1.2rem 1.2rem;
    background: #fff;
    box-shadow: 0 2.4rem 4.8rem -2.4rem rgba(0, 0, 0, .1), 0 4rem 6rem -4rem rgba(50, 50, 93, .25);
    opacity: 0;
    transform: translateY(-.8rem);
    pointer-events: none;
    transition:
      width .3s cubic-bezier(.45, .05, .55, .95),
      height .3s cubic-bezier(.45, .05, .55, .95),
      opacity .25s ease,
      transform .3s cubic-bezier(.45, .05, .55, .95);
  }
  .megamenu-bg.is-instant { transition: opacity .25s ease, transform .3s cubic-bezier(.45, .05, .55, .95); }
  .site-header.is-menu-open .megamenu-bg { opacity: 1; transform: none; }

  /* Panel de cada menú, en el mismo lugar que el fondo */
  .megamenu {
    --dir: 0;
    position: absolute;
    top: calc(100% + 1.4rem);
    left: -2.4rem;
    z-index: 1;
    display: flex;
    width: max-content;
    max-width: calc(100% + 4.8rem);
    border-radius: 0 0 1.2rem 1.2rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(calc(var(--dir) * 4rem));
    transition: opacity .25s cubic-bezier(.4, 0, .2, 1), transform .5s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .25s;
  }
  .megamenu.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s cubic-bezier(.4, 0, .2, 1) .05s, transform .5s cubic-bezier(.4, 0, .2, 1), visibility 0s;
  }

  .megamenu__col { min-width: 25rem; padding: 4.2rem 4.4rem 5.6rem; }
  .megamenu__col + .megamenu__col { border-left: .1rem solid #ececf6; }
  .megamenu__col--aside { border-bottom-right-radius: 1.2rem; background: #f7f7fd; }
}

/* Contenido de los paneles (compartido por escritorio y mobile) */
.megamenu__title {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2rem;
  color: var(--ink-strong);
}
.megamenu__links { display: grid; gap: 1rem; margin-top: 2.6rem; }
.megamenu__links a {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.3rem;
  line-height: 2.4rem;
  color: #5b5ff0;
  white-space: nowrap;
  transition: color .2s ease;
  font-weight: 500;
}
.megamenu__links a:hover { color: #3730a3; }
.megamenu__links img { flex: none; width: 2.8rem; height: 2rem; object-fit: contain; }

/* Velo desenfocado detrás del menú abierto */
.megamenu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9;
  background: rgba(245, 245, 250, .35);
  -webkit-backdrop-filter: blur(.6rem);
  backdrop-filter: blur(.6rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.megamenu-backdrop.is-visible { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }

/* ---------- Tablet y mobile: acordeón dentro del menú desplegable ---------- */
@media (max-width: 1099px) {
  .megamenu-bg,
  .megamenu-backdrop { display: none; }
  .site-nav { max-height: calc(100dvh - 12rem); overflow-y: auto; overscroll-behavior: contain; }
  .site-nav__trigger { font-family: inherit; text-align: left; }
  .site-nav__trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
  .megamenu { display: none; padding: .8rem .8rem 1.6rem; border-bottom: 1px solid #eee; }
  .site-nav__trigger[aria-expanded="true"] { border-bottom-color: transparent; }
  .site-nav__trigger[aria-expanded="true"] + .megamenu { display: grid; gap: 2.4rem; }
  .megamenu__col--aside { padding: 1.8rem 2rem; border-radius: 1.6rem; background: #f7f7fd; }
  .megamenu__title { font-size: 1.8rem; }
  .megamenu__links { gap: 1.6rem; margin-top: 1.4rem; }
  .megamenu__links a { font-size: 2rem; line-height: 2.8rem; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .megamenu,
  .megamenu-bg,
  .megamenu-backdrop { transition: none !important; }
}