/* ═══════════════════════════════════════════════════════════════════
   JOATHI LOGÍSTICA · Encabezado único del sitio público (LGX-976)
   Componente <header class="site-head"> (logo, ☰, nav y acciones).
   Todo va scopeado bajo .site-head: no hay reglas globales, así que
   se puede cargar en páginas con otra hoja base (cotizador.html) sin
   pisar sus .btn ni su .wrap. En las páginas con site-v6.css se carga
   DESPUÉS de site-v6.css. El toggle del ☰ está en assets/js/site-head.js.
   ═══════════════════════════════════════════════════════════════════ */

/* Variables propias (mismos valores que :root de site-v6.css) */
.site-head{
 --color-frost-glow:#d1e4fa;
 --color-void-violet:#1f8a4c;
 --color-violet-light:#6fd393;
 --primary-light:#6fd393;
 --tinta:#d1e4fa;
 --bruma:#9db0cf;
 --superficie-2:rgba(17,21,38,.92);
 --linea:rgba(186,215,247,.12);
 --linea-fuerte:rgba(186,215,247,.24);
 --body:'Inter',system-ui,sans-serif;
 --mono:'JetBrains Mono',monospace;
 --sombra:0 24px 60px -18px rgba(0,0,0,.55);
 --foco:0 0 0 3px rgba(31,138,76,.45);
 --wrap:1180px;
}

/* Base del componente (lo que en site-v6 venía de *, body, a, img, button y .wrap) */
.site-head,.site-head *,.site-head *::before,.site-head *::after{box-sizing:border-box}
.site-head{position:sticky;top:0;z-index:900;margin:0;padding:0;
 background:rgba(7,9,20,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
 border-bottom:1px solid var(--linea);
 font-family:var(--body);font-size:16px;font-weight:400;line-height:1.65;color:var(--tinta);
 letter-spacing:normal;text-align:left;-webkit-font-smoothing:antialiased}
.site-head a{color:inherit;text-decoration:none}
.site-head img{max-width:100%;display:block}
.site-head button{font-family:inherit}
.site-head :focus-visible{outline:none;box-shadow:var(--foco);border-radius:6px}
.site-head .wrap{width:min(var(--wrap),calc(100% - 40px));max-width:none;margin:0 auto;padding:0;
 position:static;z-index:auto}

/* Barra, marca y navegación */
.site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.site-head .brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.site-head .brand img{height:40px;width:auto}
.site-head .brand .tag{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
 color:var(--bruma);display:block;margin-top:2px}
.site-head .nav{display:flex;align-items:center;gap:6px}
.site-head .nav .lk{padding:9px 14px;border-radius:8px;font-weight:600;font-size:14px;color:var(--bruma);
 transition:background .18s,color .18s;white-space:nowrap}
.site-head .nav .lk:hover{background:var(--superficie-2);color:var(--color-frost-glow)}
.site-head .nav .lk[aria-current="page"]{color:var(--color-frost-glow);background:var(--superficie-2)}
.site-head .nav .sep{width:1px;height:24px;background:var(--linea-fuerte);margin:0 8px}
.site-head .nav .acciones{display:flex;gap:10px;align-items:center}

/* Botones del encabezado (explícitos para ganarle a cualquier .btn de la página) */
.site-head .btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
 margin:0;padding:12px 22px;width:auto;min-width:0;height:auto;
 border-radius:12px;border:1.5px solid transparent;outline:none;
 font-family:var(--body);font-weight:700;font-size:14.5px;font-style:normal;line-height:inherit;
 letter-spacing:normal;text-transform:none;text-decoration:none;text-shadow:none;white-space:normal;
 background:transparent;color:inherit;box-shadow:none;opacity:1;filter:none;
 cursor:pointer;position:relative;overflow:hidden;corner-shape:notch;will-change:transform;
 transition:transform .18s,box-shadow .18s,background .18s,border-color .18s,text-shadow .18s}
.site-head .btn::before{content:'';position:absolute;inset:-2px;border-radius:inherit;corner-shape:inherit;
 background:linear-gradient(115deg,transparent 35%,rgba(224,168,58,.38) 47%,rgba(255,255,255,.6) 50%,rgba(224,168,58,.38) 53%,transparent 65%);
 transform:translateX(-140%);transition:transform .6s ease;pointer-events:none;mix-blend-mode:screen}
.site-head .btn:hover::before{transform:translateX(140%)}
.site-head .btn:active{transform:translateY(1px) scale(.97)}
.site-head .btn-oro{background:linear-gradient(135deg,var(--color-void-violet),var(--color-violet-light));
 color:#fff;border-color:transparent;box-shadow:0 12px 28px -10px rgba(31,138,76,.55)}
.site-head .btn-oro:hover{background:linear-gradient(135deg,#2fa863,#82dfa4);color:#fff;transform:translateY(-2px);
 box-shadow:0 14px 34px -10px rgba(31,138,76,.75),0 0 30px -6px rgba(224,168,58,.5);
 text-shadow:0 0 12px rgba(255,255,255,.45)}
.site-head .btn-linea{background:transparent;color:var(--color-frost-glow);border-color:var(--linea-fuerte)}
.site-head .btn-linea:hover{border-color:var(--primary-light);background:var(--superficie-2);color:var(--color-frost-glow);
 box-shadow:0 0 28px -6px color-mix(in srgb,var(--primary-light),transparent 45%);
 text-shadow:0 0 10px rgba(209,228,250,.5)}
.site-head .btn:focus-visible{outline:none}

/* Botón ☰ (solo visible en el teléfono) */
.site-head .menu-btn{display:none;margin:0;padding:0;background:rgba(11,14,26,.6);
 border:1px solid var(--linea-fuerte);border-radius:12px;
 width:44px;height:44px;font-size:20px;line-height:normal;color:var(--color-frost-glow);cursor:pointer}

@media(max-width:1024px){
 .site-head .nav .lk{font-size:13px;padding:8px 10px}
 .site-head .btn{padding:10px 16px;font-size:13.5px}
}
@media(max-width:880px){
 .site-head .menu-btn{display:grid;place-items:center}
 .site-head .nav{position:fixed;inset:76px 16px auto;transform:translateY(-12px);opacity:0;pointer-events:none;
  flex-direction:column;align-items:stretch;background:rgba(9,12,24,.98);border:1px solid var(--linea);
  border-radius:16px;box-shadow:var(--sombra);padding:14px;gap:4px;transition:.22s;z-index:950;
  backdrop-filter:blur(20px)}
 .site-head .nav.abierto{transform:none;opacity:1;pointer-events:auto}
 .site-head .nav .lk{padding:12px 14px;border-radius:10px}
 .site-head .nav .sep{width:auto;height:1px;margin:8px 10px}
 .site-head .nav .acciones{flex-direction:column;gap:8px}
 .site-head .nav .acciones .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
 .site-head .btn::before{animation:none}
 .site-head .btn:hover{transform:none}
}