/* El header es uno solo: "Producto" y "Para empresas" son las dos raices, y
   cada una despliega sus secciones en un panel. Se abre al pasar el mouse
   (y con foco de teclado); en touch el primer toque abre y el segundo navega,
   eso lo resuelve header.js. Aca vive solo el aspecto y la transicion, porque
   :hover no se puede expresar con los estilos inline del artboard. */

[data-menu] { position: relative; flex-shrink: 0; }

[data-menu-trigger] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  transition: background .18s ease, color .18s ease;
}
[data-menu-trigger]:hover { background: #F5F3FB; }
[data-menu-chev] { transition: transform .22s cubic-bezier(.23,1,.32,1); }
[data-menu-open] > [data-menu-trigger] { background: #F5F3FB; }
[data-menu-open] > [data-menu-trigger] [data-menu-chev] { transform: rotate(180deg); }

[data-menu-panel] {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 10;
  min-width: 218px;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(31,36,48,.08);
  box-shadow: 0 18px 44px rgba(27,21,48,.18);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .24s cubic-bezier(.23,1,.32,1), visibility .2s;
}
/* Puente invisible sobre el hueco entre la raiz y el panel: sin esto el mouse
   sale del [data-menu] al bajar y el panel se cierra en el camino. */
[data-menu-panel]::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
[data-menu-open] > [data-menu-panel] { opacity: 1; visibility: visible; transform: translateY(0); }
[data-menu-panel] a:hover { background: #F5F0FF; color: #5B21B6; }

/* Brillo que cruza los botones violeta (#7C3AED). Se agrega la clase al boton;
   el destello vive en ::after para no tener que repetir un <span> en cada uno. */
/* Se anima `left` y no translateX: el % de translateX es del ancho del propio
   destello (64px), asi que en botones anchos no llegaba al otro extremo. El % de
   `left` es del boton, y el destello siempre cruza de punta a punta. */
@keyframes lfSheen {
  0%   { left: -90px; opacity: 0; }
  14%  { opacity: .5; }
  46%  { opacity: .5; }
  62%  { left: 100%; opacity: 0; }
  100% { left: 100%; opacity: 0; }
}
.lf-sheen { position: relative; overflow: hidden; }
.lf-sheen::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -90px;
  width: 64px;
  height: 140%;
  transform: skewX(-16deg);
  pointer-events: none;
  filter: blur(9px);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.34) 35%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.34) 65%, rgba(255,255,255,0) 100%);
  animation: lfSheen 4.6s cubic-bezier(.4,0,.2,1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-menu-panel] { transition: none; }
  .lf-sheen::after { animation: none; }
}

/* Con las secciones adentro del dropdown la barra ocupa mucho menos: el corte
   donde hay que esconder la navegacion baja de 1080px a 720px (a 680 el CTA
   quedaba pegado al borde de la pastilla). */
@media (max-width: 720px) {
  [data-header] nav[data-nav] { display: none !important; }
  [data-header] [data-login] { margin-left: auto; }
}

/* "Ingresar" es para quien ya tiene cuenta porque su empresa usa FARO. Entra
   en el header cuando hay lugar: arriba de 840px junto a la navegacion, y
   entre 521 y 720px, donde la navegacion ya se escondio. En los otros dos
   tramos no entra sin empujar el CTA afuera de la pastilla: se esconde, y
   queda la linea "La empresa ya trabaja con FARO?" del hero y del cierre. */
@media (min-width: 721px) and (max-width: 840px) {
  [data-header] [data-login] { display: none !important; }
}
@media (max-width: 520px) {
  [data-header] [data-login] { display: none !important; }
  [data-header] header > div > a:last-child { margin-left: auto; }
}

/* A 375px la marca completa + el CTA no entraban (el CTA tocaba el borde):
   se achican el hueco, el margen izquierdo, la marca y el CTA lo justo. Y si
   igual falta lugar (360px, o una ventana angosta con barra de scroll), cede
   el nombre de la marca, que se recorta con puntos suspensivos: el CTA nunca
   sale de la pastilla. */
@media (max-width: 420px) {
  [data-header] header > div { gap: 10px !important; padding-left: 14px !important; }
  [data-header] header > div > a:first-child { flex-shrink: 1 !important; min-width: 0; }
  [data-header] [data-brand-word] { font-size: 14.5px !important; overflow: hidden; text-overflow: ellipsis; }
  [data-header] header > div > a:last-child { padding: 0 14px !important; }
}
@media (max-width: 359px) {
  [data-header] [data-brand-word] { display: none; }
}