/* ============================================================
   WofferLab — Menú hamburguesa global (estética Lando Norris adaptada)
   Overlay full-screen con grid de fotos + links grandes apilados,
   eyebrow tipográfico, socials y toggle ES/EN. Funciona en todas
   las páginas y en todos los dispositivos.
   ============================================================ */

/* ============ BOTÓN HAMBURGUESA ============ */
.ham{
  position:fixed;top:18px;right:var(--pad);z-index:var(--z-ham);
  width:54px;height:54px;display:grid;place-items:center;
  background:var(--ham-bg, rgba(10,14,22,.55));
  border:1px solid var(--ham-bd, rgba(255,255,255,.14));
  border-radius:50%;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  cursor:pointer;color:var(--ham-fg, #eef1f6);
  transition:background .45s ease, border-color .45s ease, color .45s ease, transform .35s ease;
}
.ham:hover{
  background:var(--ham-bg-hover, rgba(20,28,42,.72));
  border-color:var(--accent);
  transform:translateY(-1px);
}
/* en escenas de fondo claro, la hamburguesa se invierte */
body.is-light .ham{
  --ham-bg:rgba(255,255,255,.58);
  --ham-bg-hover:rgba(255,255,255,.78);
  --ham-bd:rgba(21,24,31,.14);
  --ham-fg:#15181f;
}
/* mientras el menú está abierto, fuerza el estilo oscuro (el overlay siempre es oscuro) */
body.menu-open .ham{
  --ham-bg:rgba(10,14,22,.55);
  --ham-bg-hover:rgba(20,28,42,.72);
  --ham-bd:rgba(255,255,255,.14);
  --ham-fg:#eef1f6;
}
.ham__lines{position:relative;width:20px;height:14px;display:block}
.ham__lines span{
  position:absolute;left:0;right:0;height:1.6px;background:currentColor;border-radius:2px;
  transition:transform .45s cubic-bezier(.65,0,.35,1), top .35s ease .1s, opacity .2s ease;
}
.ham__lines span:nth-child(1){top:0}
.ham__lines span:nth-child(2){top:6.2px}
.ham__lines span:nth-child(3){top:12.4px}
.ham.is-open .ham__lines span:nth-child(1){top:6.2px;transform:rotate(45deg)}
.ham.is-open .ham__lines span:nth-child(2){opacity:0;transform:scaleX(0)}
.ham.is-open .ham__lines span:nth-child(3){top:6.2px;transform:rotate(-45deg)}

/* ============ OVERLAY ============ */
.navmenu{
  position:fixed;top:0;left:0;width:100%;z-index:var(--z-menu);
  height:100vh;height:100dvh; /* dvh: respeta barras del navegador / taskbar en móvil */
  visibility:hidden;pointer-events:none;
  color:#eef1f6;
}
.navmenu.is-open{visibility:visible;pointer-events:auto}

.navmenu__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 18% 28%, rgba(57,98,165,.30), transparent 65%),
    radial-gradient(ellipse 70% 55% at 82% 78%, rgba(106,153,221,.18), transparent 60%),
    #070a0f;
  opacity:0;transform:translateY(-100%);
  transition:transform .9s cubic-bezier(.86,0,.07,1), opacity .35s ease;
  will-change:transform,opacity;
}
.navmenu.is-open .navmenu__bg{opacity:1;transform:translateY(0)}

/* textura topográfica sutil con SVG inline */
.navmenu__topo{
  position:absolute;inset:0;opacity:0;
  background-image:
    repeating-radial-gradient(circle at 18% 30%, transparent 0 38px, rgba(160,200,255,.06) 38px 39px),
    repeating-radial-gradient(circle at 82% 78%, transparent 0 42px, rgba(160,200,255,.05) 42px 43px);
  mix-blend-mode:screen;
  transition:opacity .8s ease .2s;
}
.navmenu.is-open .navmenu__topo{opacity:.55}

.navmenu__inner{
  position:relative;width:100%;height:100%;
  display:flex;flex-direction:column;
  padding:clamp(88px,11vh,116px) var(--pad) calc(30px + env(safe-area-inset-bottom));
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none; /* firefox */
}
.navmenu__inner::-webkit-scrollbar{display:none}

/* ============ GRID PRINCIPAL ============ */
/* `flex:1 0 auto` permite que el grid crezca con su contenido (cuando el
   submenú se expande y el menu entero pasa de 100vh) y que el .navmenu__inner
   haga scroll. Sin `0 auto` el grid quedaba clavado al espacio sobrante y
   el contenido se solapaba con el footer. */
.navmenu__grid{
  flex:1 0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,6vw,90px);
  align-items:stretch;
  min-height:0;
}

/* ---- IZQUIERDA: logo 3D ---- */
.navmenu__logo3d{
  position:relative;
  height:100%;width:100%;
  min-height:0;
  display:grid;place-items:center;
  opacity:0;transform:translateY(28px) scale(.96);
  will-change:transform,opacity;
}
.navmenu__logo3d::before{
  content:"";position:absolute;inset:8% 8%;
  background:radial-gradient(circle,rgba(57,98,165,.22),rgba(57,98,165,.04) 55%,transparent 75%);
  pointer-events:none;z-index:0;
}
.navmenu__logo3d__canvas{
  position:relative;z-index:1;
  width:100%;height:100%;display:block;
}
.navmenu__logo3d__tag{
  position:absolute;left:0;bottom:0;z-index:2;
  font-family:var(--font-m);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(238,241,246,.45);
  display:flex;align-items:center;gap:10px;
}
.navmenu__logo3d__tag::before{
  content:"";width:24px;height:1px;background:currentColor;
}

/* ---- DERECHA: links + eyebrow ---- */
.navmenu__col{
  display:flex;flex-direction:column;
  min-height:0;
}
.navmenu__links{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(8px,1.7vh,22px);
  margin-top:clamp(6px,1.6vh,24px);
  width:100%;
}
.navmenu__link{
  position:relative;display:inline-flex;align-items:baseline;gap:18px;
  font-family:var(--font-d);font-weight:700;
  /* escala con el ancho para llenar la columna derecha en escritorio sin que
     el item más largo ("IA para tu empresa") haga wrap; aireado por el gap */
  font-size:clamp(2rem,3.6vw,3.7rem);
  letter-spacing:-.03em;line-height:1.05;color:#eef1f6;
  padding:5px 0;
  overflow:hidden;
}
.navmenu__link-no{
  font-family:var(--font-m);font-weight:500;font-size:11px;
  letter-spacing:.16em;color:var(--accent);
  align-self:flex-start;margin-top:18px;opacity:.7;
}
.navmenu__link-text{
  display:inline-block;position:relative;
  vertical-align:top;line-height:1;
}
.navmenu__link-text .word{
  display:inline-block;white-space:nowrap;vertical-align:top;
}
/* cada carácter es una "ventana" con overflow:hidden; dentro, una pila
   con dos copias del char (out + in) que se desplaza en hover */
.navmenu__link-text .char{
  display:inline-block;overflow:hidden;
  line-height:1;height:1em;
  vertical-align:top;
  transform:translateY(110%);
  will-change:transform;
}
.navmenu__link.is-ready .navmenu__link-text .char{transform:translateY(0)}
.navmenu__link-text .char-stack{
  display:inline-block;
  transition:transform .55s cubic-bezier(.65,0,.35,1);
  will-change:transform;
}
.navmenu__link-text .char-out,
.navmenu__link-text .char-in{display:block;line-height:1}
.navmenu__link-text .char-in{color:var(--accent)}
.navmenu__link:hover .navmenu__link-text .char-stack{transform:translateY(-50%)}

/* underline SVG cuando el link es la página actual */
.navmenu__link-mark{
  position:absolute;left:0;right:auto;bottom:-2px;
  width:62%;height:14px;color:var(--accent);
  opacity:0;transform:scaleX(.3);transform-origin:0 50%;
  transition:opacity .4s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.navmenu__link.is-current .navmenu__link-mark{opacity:1;transform:scaleX(1)}

/* ============ SUBMENÚ — pilar (enlace + chevron) + sublinks colapsables ============ */
/* El item padre ya NO es un <button>: es un contenedor con un enlace (texto, va
   a la pilar) y un botón aparte (chevron, despliega). IMPORTANTE: no usar
   `font:inherit` — resetea el font-size gigante heredado de .navmenu__link. */
.navmenu__link--parent{
  display:inline-flex;align-items:center;gap:12px;
  /* hereda font-family/size/weight/color/letter-spacing de .navmenu__link */
}
.navmenu__parent-link{
  display:inline-flex;align-items:center;min-width:0;
  color:inherit;text-decoration:none;
  /* el texto gigante lo aporta .navmenu__link-text heredando el font-size del padre */
}
.navmenu__parent-link .navmenu__link-text{white-space:nowrap}
.navmenu__parent-link:focus-visible{outline:1px dashed rgba(238,241,246,.3);outline-offset:6px}
.navmenu__sub-toggle{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  font-size:inherit;line-height:1;color:inherit;
  background:transparent;border:0;margin:0;padding:6px;cursor:pointer;
}
.navmenu__sub-toggle:focus-visible{outline:1px dashed rgba(238,241,246,.3);outline-offset:6px;border-radius:4px}
.navmenu__link-chev{
  display:inline-block;width:.7em;height:.7em;flex:none;
  position:relative;align-self:center;
  color:var(--accent);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.navmenu__link-chev::before,
.navmenu__link-chev::after{
  content:"";position:absolute;top:50%;width:55%;height:2px;
  background:currentColor;border-radius:2px;transform-origin:50% 50%;
}
.navmenu__link-chev::before{left:0;transform:translateY(-50%) rotate(45deg)}
.navmenu__link-chev::after{right:0;transform:translateY(-50%) rotate(-45deg)}
.navmenu__sub-toggle[aria-expanded="true"] .navmenu__link-chev{transform:rotate(180deg)}

.navmenu__sub{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.65,0,.35,1);
  width:100%;
}
.navmenu__sub > div{overflow:hidden}
.navmenu__sub-list{
  display:flex;flex-direction:column;
  padding:10px 0 4px 28px;
  border-left:1px solid rgba(238,241,246,.12);
  margin-left:6px;
  gap:4px;
}
.navmenu__sub[aria-hidden="false"]{grid-template-rows:1fr}

/* cuando el submenú está abierto, el contenedor de links compacta su gap
   para que el menú entero quepa en pantallas medianas sin solapar. */
.navmenu__links:has(.navmenu__sub[aria-hidden="false"]){
  gap:clamp(0px,.4vh,6px);
}
.navmenu__links:has(.navmenu__sub[aria-hidden="false"]) .navmenu__link{
  padding:3px 0;
}

.navmenu__sublink{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-d);font-weight:600;
  font-size:clamp(1.05rem,1.9vw,1.55rem);
  letter-spacing:-.018em;line-height:1.2;color:rgba(238,241,246,.78);
  padding:6px 0;
  transition:color .35s ease, transform .35s ease;
}
.navmenu__sublink::before{
  content:"";width:18px;height:1px;background:var(--accent);flex:none;
  transition:width .35s ease;
}
.navmenu__sublink:hover{color:#eef1f6;transform:translateX(4px)}
.navmenu__sublink:hover::before{width:28px}
.navmenu__sublink.is-current{color:var(--accent)}
.navmenu__sublink.is-current::before{background:var(--accent);width:28px}

/* ---- eyebrow + brandline ---- */
.navmenu__brandline{
  margin-top:auto;padding-top:36px;
  display:flex;align-items:center;gap:14px;
  color:rgba(238,241,246,.5);
  font-family:var(--font-m);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
}
.navmenu__brandline::before{
  content:"";width:32px;height:1px;background:rgba(238,241,246,.32);
}

/* ============ FOOT — socials + CTA + idioma ============ */
.navmenu__foot{
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(18px,3vw,42px);
  align-items:center;
  padding-top:clamp(20px,3vh,32px);
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:clamp(18px,3vh,32px);
}
.navmenu__cta{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-d);font-weight:700;font-size:clamp(1.2rem,1.8vw,1.7rem);
  letter-spacing:-.02em;color:#eef1f6;
  padding:8px 0;
}
.navmenu__cta .ar{
  display:inline-block;color:var(--accent);transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.navmenu__cta:hover .ar{transform:translateX(8px)}
.navmenu__socials{
  display:flex;gap:clamp(14px,1.6vw,22px);align-items:center;
  font-family:var(--font-m);font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(238,241,246,.6);
}
.navmenu__socials a{position:relative;padding:6px 0}
.navmenu__socials a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.navmenu__socials a:hover{color:#eef1f6}
.navmenu__socials a:hover::after{transform:scaleX(1)}

.navmenu__lang{
  display:inline-flex;align-items:center;gap:0;
  border:1px solid rgba(255,255,255,.14);border-radius:99px;
  padding:3px;
}
.navmenu__lang-btn{
  font-family:var(--font-m);font-size:11px;letter-spacing:.14em;
  color:rgba(238,241,246,.6);background:transparent;border:0;
  padding:7px 12px;border-radius:99px;cursor:pointer;
  transition:color .3s ease, background .3s ease;
}
.navmenu__lang-btn.is-active{
  background:#eef1f6;color:#070a0f;
}
.navmenu__lang-btn:not(.is-active):hover{color:#eef1f6}

/* ============ revelado: clips iniciales ============ */
.navmenu .navmenu__link,
.navmenu .navmenu__brandline,
.navmenu .navmenu__cta,
.navmenu .navmenu__socials,
.navmenu .navmenu__lang{opacity:0;transform:translateY(28px);will-change:transform,opacity}

/* ============ RESPONSIVE ============ */
/* tablet + móvil: el logo 3D del overlay ocupaba una franja superior que en el
   rango intermedio (561–920) se solapaba con los enlaces. Lo ocultamos en todo
   ≤920 y subimos la lista editorial a ancho completo (el tratamiento que ya
   funcionaba en ≤560): links apilados, separados por hairlines, sin logo. */
@media (max-width:920px){
  .ham{top:14px;width:48px;height:48px}
  .navmenu__inner{padding:84px 22px calc(20px + env(safe-area-inset-bottom))}
  .navmenu__logo3d{display:none}
  .navmenu__grid{
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    gap:0;
  }
  .navmenu__col{justify-content:flex-start}
  .navmenu__links{margin-top:6px;gap:0;width:100%}
  .navmenu__link{
    width:100%;
    font-size:clamp(1.6rem,4.6vw,2.6rem);
    padding:clamp(13px,1.9vh,20px) 0;
    border-bottom:1px solid rgba(238,241,246,.10);
  }
  .navmenu__link--parent{display:flex;justify-content:space-between;align-items:center;width:100%;gap:10px}
  .navmenu__parent-link{flex:1 1 auto;min-width:0;overflow:hidden}
  .navmenu__sub-toggle{flex:none;min-width:44px;min-height:44px;padding:0}
  .navmenu__link-chev{align-self:center;margin-left:0}
  /* el pilar es el item más largo: su texto escala con el viewport para caber
     SIEMPRE en una sola línea (sin wrap ni scroll horizontal del overlay).
     6.1vw ≈ casi igual que los demás items (6.4vw); el min protege <360px. */
  .navmenu__link--parent .navmenu__link-text{font-size:clamp(1.4rem,6.1vw,2.3rem)}
  .navmenu__sub-list{padding:8px 0 16px 22px}
  .navmenu__brandline{margin-top:auto;padding-top:26px}
  .navmenu__foot{
    grid-template-columns:1fr;
    gap:22px;text-align:left;
  }
  .navmenu__socials{flex-wrap:wrap;gap:clamp(16px,4vw,26px)}
  /* tap targets ≥44px en los enlaces de redes */
  .navmenu__socials a{min-height:44px;display:inline-flex;align-items:center;padding:0}
  /* switcher de idioma: en desktop vivía a la derecha del foot (auto); al pasar
     a una sola columna se estiraba a todo el ancho. justify-self:start lo
     devuelve a su tamaño de contenido y los botones ganan altura de toque. */
  .navmenu__lang{justify-self:start;align-self:start;padding:4px}
  .navmenu__lang-btn{min-height:44px;padding:10px 22px;font-size:12px}
}
@media (max-width:560px){
  /* deltas de teléfono: tipografía más compacta para los items largos */
  .navmenu__link{
    font-size:clamp(1.7rem,6.4vw,2.3rem);
    padding:clamp(13px,1.9vh,19px) 0;
  }
}

@media (prefers-reduced-motion:reduce){
  .navmenu__bg,.navmenu__topo,.navmenu__logo3d,
  .navmenu .navmenu__link,.navmenu .navmenu__brandline,
  .navmenu .navmenu__cta,.navmenu .navmenu__socials,.navmenu .navmenu__lang{
    transition:none!important;transform:none!important;opacity:1!important;
  }
  .navmenu__link-text .char{transform:none!important}
}