﻿/* nav.css — dropdown "Soluciones" (segmentación por tipo de usuario).
   Compartido: landing topnav (sobre teal), pagenav (claro) y floatnav
   (píldora oscura, abre hacia arriba). Usa tokens de lucasx.css. */
/* lockup: "by CoreWorks" junto al brandmark (regla de marca: Lucas no va desnudo en primer fold) */
.bm-by{font-family:var(--f-mono); font-size:9px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; opacity:.72; margin-left:12px; padding-left:12px; border-left:1px solid currentColor; align-self:center; white-space:nowrap;}
@media(max-width:560px){ .bm-by{display:none;} }

.sol-dd{position:relative; display:inline-flex;}
.sol-dd__btn{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-body); cursor:pointer; background:none; border:none; white-space:nowrap;}
.sol-dd__btn svg{width:11px; height:11px; transition:transform .25s; stroke:currentColor; fill:none; stroke-width:2.6;}
.sol-dd.open .sol-dd__btn svg{transform:rotate(180deg);}
.sol-dd__menu{position:absolute; top:calc(100% + 10px); left:0; min-width:272px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:8px; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s ease, transform .22s cubic-bezier(.2,.7,.3,1); z-index:90;}
.sol-dd.open .sol-dd__menu{opacity:1; transform:none; pointer-events:auto;}
.sol-dd__item{display:block; padding:11px 13px; border-radius:var(--r-sm,8px); transition:background .18s;}
.sol-dd__item:hover{background:var(--bg-2);}
.sol-dd__item b{display:block; font-family:var(--f-display); font-weight:700; font-size:14.5px; color:var(--ink); letter-spacing:-0.01em;}
.sol-dd__item span{display:block; font-family:var(--f-mono); font-size:10.5px; color:var(--ink-faint); margin-top:2px; line-height:1.4;}
.sol-dd__all{display:flex; align-items:center; gap:6px; margin-top:6px; padding:11px 13px; border-top:1px solid var(--line); font-family:var(--f-body); font-weight:650; font-size:13.5px; color:var(--brand-deep); border-radius:var(--r-sm,8px);}
.sol-dd__all:hover{background:var(--bg-2);}

/* landing topnav (texto blanco sobre teal) */
.topnav .sol-dd__btn{color:rgba(255,255,255,.85); font-weight:600; font-size:14.5px; padding:9px 6px;}
.topnav .sol-dd__btn:hover{color:#fff;}
@media(max-width:560px){ .topnav .sol-dd{display:none;} }

/* pagenav (claro, sticky) */
.pagenav .sol-dd__btn{color:var(--ink-soft); font-weight:600; font-size:14.5px; padding:9px 12px; border-radius:var(--r-pill);}
.pagenav .sol-dd__btn:hover{color:var(--ink); background:var(--bg-2);}
.pagenav .sol-dd.open .sol-dd__btn{color:var(--brand-deep);}

/* acceso clientes (se oculta en móvil para no saturar el nav) */
@media(max-width:640px){ .btn--login{display:none;} }

/* ============ Soporte flotante (pill abajo-derecha + popover) ============ */
.soporte{position:fixed; right:18px; bottom:18px; z-index:85;}
.soporte__btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-body); font-weight:650; font-size:13.5px; color:#fff; background:rgba(7,17,15,.78); backdrop-filter:saturate(150%) blur(14px); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-pill); padding:11px 16px; cursor:pointer; box-shadow:var(--sh-md); transition:transform .2s cubic-bezier(.2,.7,.3,1), background .2s;}
.soporte__btn:hover{transform:translateY(-2px); background:rgba(7,17,15,.9);}
.soporte__btn svg{width:16px; height:16px; stroke:var(--brand-glow); fill:none; stroke-width:2; flex:none;}
/* skip-link: primer tabulador de la página; invisible hasta recibir foco */
.skiplink{position:fixed; top:0; left:50%; transform:translate(-50%,-140%); z-index:300;
  font-family:var(--f-body); font-weight:700; font-size:14px; color:#fff; background:var(--brand-deep);
  border:1px solid var(--brand-glow); border-radius:0 0 var(--r-pill) var(--r-pill); padding:12px 22px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);}
.skiplink:focus{transform:translate(-50%,0);}

.soporte__pop{position:absolute; bottom:calc(100% + 12px); right:0; width:262px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:18px; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s ease, transform .22s cubic-bezier(.2,.7,.3,1);}
.soporte.open .soporte__pop{opacity:1; transform:none; pointer-events:auto;}
.soporte__pop b{display:block; font-family:var(--f-display); font-weight:800; font-size:16px; letter-spacing:-0.02em; color:var(--ink);}
.soporte__pop p{font-size:12.5px; color:var(--ink-soft); margin:6px 0 12px; line-height:1.5;}
.soporte__mail{display:flex; justify-content:center; font-size:13px; padding:11px 14px; width:100%;}
.soporte__faq{display:inline-flex; align-items:center; margin-top:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--brand-deep);}
.soporte__faq:hover{text-decoration:underline;}
@media(max-width:560px){
  .soporte__btn span{display:none;}
  .soporte__btn{width:46px; height:46px; padding:0; justify-content:center;}
  .soporte__pop{right:-4px; width:min(262px, calc(100vw - 28px));}
}

/* floatnav (píldora oscura abajo -> menú abre hacia ARRIBA) */
.floatnav .sol-dd__btn{color:rgba(255,255,255,.82); font-weight:600; font-size:13.5px; padding:9px 15px; border-radius:var(--r-pill);}
.floatnav .sol-dd__btn:hover{background:rgba(255,255,255,.12); color:#fff;}
.floatnav .sol-dd__menu{top:auto; bottom:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);}
.floatnav .sol-dd.open .sol-dd__menu{transform:translateX(-50%);}
@media(max-width:600px){ .floatnav .sol-dd__menu{min-width:238px;} }
