/* Cabecera y sus tres desplegables. Medidas tomadas del diseño.

   --alto-cabecera es lo que mide de verdad, con su borde: lo usan el hero
   para meterse justo por debajo y las anclas para no quedarse tapadas. En
   /producto y /soluciones el JavaScript lo vuelve a medir y lo afina. */
:root {
  --alto-cabecera: 89px;
}

@media (max-width: 1119px) {
  :root {
    --alto-cabecera: 65px;
  }
}

/* Las imágenes van en bloque: como elementos en línea arrastran el hueco
   del descendente y descuadran todas las filas. */
.cabecera picture {
  display: flex;
  flex: none;
}

.cabecera img {
  display: block;
}

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line2);
  transition: background 0.26s cubic-bezier(0.22, 0.61, 0.25, 1), border-color 0.26s;
}

.cabecera__interior {
  max-width: 1440px;
  margin: 0 auto;
  /* El mismo aire arriba que abajo: antes eran 16 px arriba y 0 abajo, y
     al pasar la cabecera a clara se notaba descuadrada. */
  height: 56px;
  padding: 16px clamp(20px, 5.5cqi, 80px);
  box-sizing: content-box;
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
}

.cabecera__marca {
  display: flex;
  align-items: center;
  flex: none;
}

.cabecera__logo {
  height: 26px;
  width: auto;
  display: block;
}

.cabecera__nav {
  display: none;
  flex: 1;
  align-self: stretch;
}

/* La barra de abajo es solo del menú de móvil: en escritorio no existe.
   Esta regla va fuera del media query a propósito; dentro, el escritorio se
   quedaba sin ninguna y el botón «Atrás» salía en la cabecera. */
.cabecera__barra-movil {
  display: none;
}

.cabecera__lista {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cabecera__item {
  display: flex;
  align-items: stretch;
}

.cabecera__boton,
.cabecera__enlace {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: none;
  border: none;
  font: 500 var(--fs-pequeno) var(--fb);
  color: var(--ink2);
  cursor: pointer;
}

.cabecera__boton:hover,
.cabecera__enlace:hover,
.cabecera__boton[aria-expanded="true"] {
  color: var(--ink);
}

/* ---- Los tres desplegables ---- */

.cabecera__menu {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  z-index: 60;
  /* Dentro del desplegable se vuelve al modo claro aunque la cabecera
     esté en oscuro sobre el hero. */
  --ink: #03081b;
  --ink2: #565b63;
  --ink3: #74787f;
  --card: #fdfcf9;
  --bg: #f7f5f0;
  --bg2: #efece6;
  --raised: #ebe8e1;
  --raised2: #dcd8cf;
  --line: #e2ded6;
  --line2: #ebe8e2;
  --line3: #cdc8be;
  --accent: #03081b;
  --accent-h: #1c2132;
  /* Como en Attio: aparece subiendo 6 px en 200 ms. */
  animation: desplegar 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes desplegar {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cabecera__menu { animation: none; }
}

.cabecera__menu[hidden] {
  display: none;
}

/* Dónde y cuánto mide cada panel; lo de dentro lo pone megamenu.css.

   La lógica es la de Attio: los tres arrancan en la misma línea, la del
   principio del menú (no en el raíl de la página, que queda a la altura del
   logotipo y desconcierta), y cada uno mide lo que pide su contenido. Por
   eso el ancla es la lista de navegación y no cada botón: si cada panel
   colgara de su botón, Recursos abriría en un sitio y Producto en otro.

   --aire-menu es lo que hay a la izquierda de la lista: el raíl más el
   logotipo y su hueco. Sirve para que ningún panel se salga por la derecha. */
.cabecera__lista {
  position: relative;
}

.cabecera {
  --aire-menu: calc(clamp(20px, 5.5cqi, 80px) + 128px);
}

.cabecera__menu--ancho,
.cabecera__menu--soluciones,
.cabecera__menu--recursos {
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  box-sizing: border-box;
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
  max-width: calc(100vw - var(--aire-menu) - 24px);
  box-shadow:
    0 1px 2px rgba(3, 8, 27, 0.04),
    0 18px 48px rgba(3, 8, 27, 0.18);
}

/* Producto es el más ancho: cuatro pilares y la columna de Destacado. */
.cabecera__menu--ancho {
  width: 1180px;
}

.cabecera__menu--soluciones {
  width: max-content;
  max-width: calc(100vw - var(--aire-menu) - 24px);
}

/* Recursos es una sola columna. */
.cabecera__menu--recursos {
  width: 460px;
}

.cabecera__idioma {
  position: relative;
  flex: none;
  display: none;
}

.cabecera__idioma-boton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 6px;
  background: none;
  border: none;
  cursor: pointer;
  font: 600 var(--fs-pequeno) var(--fb);
  color: var(--ink);
}

.cabecera__menu--idioma {
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.cabecera__menu--idioma a {
  padding: 9px 10px;
  border-radius: 6px;
  font: 400 var(--fs-pequeno) var(--fb);
  color: var(--ink2);
}

.cabecera__menu--idioma a:hover {
  background: var(--raised);
}

.cabecera__idioma-activo {
  font-weight: 500 !important;
  color: var(--ink) !important;
}

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

.cabecera__acceder-movil {
  display: none;
}

.cabecera__acciones {
  display: none;
  align-items: center;
  gap: 10px;
  flex: none;
}

.cabecera__demo-movil {
  height: 36px;
  padding: 0 14px;
  font: 700 var(--fs-etiqueta) var(--fb);
  white-space: nowrap;
  flex: none;
  margin-left: auto;
}

.cabecera__hamburguesa {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}

/* ---- Escritorio ---- */

@media (min-width: 1120px) {
  .cabecera__nav,
  .cabecera__acciones,
  .cabecera__idioma {
    display: flex;
  }

  .cabecera__hamburguesa,
  .cabecera__demo-movil {
    display: none;
  }
}

/* ---- Móvil: el menú ocupa la pantalla ---- */

@media (max-width: 1119px) {
  .cabecera__interior {
    height: 64px;
    padding: 0 20px;
  }

  .cabecera[data-movil-abierto] .cabecera__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    /* En el móvil, 100vh es la pantalla entera, sin descontar la barra del
       navegador: el final del menú, donde está «Acceder», se quedaba debajo
       de esa barra y no había forma de llegar. Con dvh la altura es la que
       se ve de verdad. El 100vh de arriba es para los navegadores que
       todavía no entienden dvh. */
    height: calc(100vh - 64px);
    height: calc(100dvh - 64px);
    /* El menú no se desplaza entero: lo que se desplaza es la lista, y la
       barra de abajo se queda fija al final. Así no hay que pelearse con
       position: fixed, que aquí cuelga de la cabecera por el backdrop. */
    overflow: hidden;
    padding: 0;
    background: var(--bg);
  }

  .cabecera[data-movil-abierto] .cabecera__lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 20px 24px;
  }

  .cabecera[data-movil-abierto] .cabecera__lista {
    flex-direction: column;
    align-items: stretch;
  }

  .cabecera[data-movil-abierto] .cabecera__item {
    display: block;
  }

  .cabecera[data-movil-abierto] .cabecera__boton,
  .cabecera[data-movil-abierto] .cabecera__enlace {
    /* La fila entera, con la flecha pegada al borde derecho y la línea de
       lado a lado, como en Zernio. */
    width: 100%;
    box-sizing: border-box;
    height: 56px;
    justify-content: space-between;
    padding: 0;
    border-bottom: 1px solid var(--line2);
    font: 700 var(--fs-cuerpo) var(--fb);
    color: var(--ink);
  }

  /* Los tres desplegables se abren y se cierran también en móvil. El
     `:not([hidden])` es lo que faltaba: este `display: flex` ganaba al
     `display: none` del atributo, así que los tres salían siempre abiertos,
     los botones con su flecha no hacían nada y el menú medía 3.400 px, con
     «Acceder» al final de todo. */
  .cabecera[data-movil-abierto] .cabecera__menu:not([hidden]) {
    position: static;
    width: auto;
    display: flex;
    flex-direction: column;
    border: none;
    box-shadow: none;
    border-radius: 0;
    /* Sin sangría: en móvil todo arranca en la misma línea. */
    padding: 8px 0 16px;
    gap: 16px;
    background: none;
  }

  /* ---- El menú de móvil, en dos niveles ----
     Como en ClickUp y Zernio: primero la lista de secciones con su flecha,
     y al pulsar una, el panel se sustituye por su contenido. Abajo, una
     barra fija: «Acceder» en el primer nivel y «Atrás» dentro de una
     sección. Nada de acordeones: dentro ya se ve todo. */

  .cabecera[data-movil-abierto] .cabecera__nav {
    padding-bottom: 0;
  }

  /* La flecha del botón mira a la derecha: es un «entra aquí», no un
     «despliega». */
  .cabecera[data-movil-abierto] .cabecera__boton > svg {
    transform: rotate(-90deg);
  }

  /* Dentro de una sección, las demás desaparecen. */
  .cabecera[data-movil-abierto][data-movil-seccion] .cabecera__item {
    display: none;
  }

  .cabecera[data-movil-abierto][data-movil-seccion] .cabecera__item--abierto {
    display: flex;
    flex-direction: column;
  }

  /* Y el botón de la sección tampoco hace falta: ya estás dentro. */
  .cabecera[data-movil-abierto][data-movil-seccion] .cabecera__item--abierto > .cabecera__boton {
    display: none;
  }

  .cabecera[data-movil-abierto] .cabecera__barra-movil {
    flex: none;
    display: flex;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    /* Opaca de verdad: si no, la lista se ve por debajo del botón. */
    background: #f7f5f0;
    border-top: 1px solid var(--line2);
    z-index: 3;
  }

  .cabecera[data-movil-abierto] .cabecera__acceder-movil,
  .cabecera[data-movil-abierto] .cabecera__atras {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    margin: 0;
  }

  /* Una u otra, según el nivel. */
  .cabecera[data-movil-abierto] .cabecera__atras,
  .cabecera[data-movil-abierto][data-movil-seccion] .cabecera__acceder-movil {
    display: none;
  }

  .cabecera[data-movil-abierto][data-movil-seccion] .cabecera__atras {
    display: inline-flex;
  }

  /* Dentro de la sección, los grupos salen abiertos: el acordeón sobra. */
  .cabecera[data-movil-abierto] .mega__abrir {
    display: none;
  }

  .cabecera[data-movil-abierto] .cabecera__menu-cuerpo,
  .cabecera[data-movil-abierto] .cabecera__pilares,
  .cabecera[data-movil-abierto] .cabecera__soluciones--dos {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

/* ---- Sobre el hero oscuro ---- */

.cabecera[data-sobre-hero] {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  --ink: #ffffff;
  --ink2: rgba(255, 255, 255, 0.85);
  --ink3: rgba(255, 255, 255, 0.78);
  --card: transparent;
  --line: rgba(255, 255, 255, 0.5);
  --accent: #00c2ff;
  --accent-h: #00afe6;
  --on-accent: #03081b;
  --raised: transparent;
  --raised2: rgba(255, 255, 255, 0.12);
}

/* El logotipo viene en azul marino de la marca. Sobre el hero se pasa a
   blanco: primero a negro y luego invertido, que invertir el azul a secas
   lo deja color crema. */
.cabecera[data-sobre-hero] .cabecera__logo {
  filter: brightness(0) invert(1);
}

.cabecera[data-sobre-hero] .boton--secundario {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.cabecera[data-sobre-hero] .boton--secundario:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}