/* ══════════ JOATHI · MENÚ-CONTENEDOR + MARCA (compartido) · 2026-08-03 ══════════
   Se usa en index.html, servicios.html, cobertura.html, quienes-somos.html,
   contacto.html y cotizador.html. Nav con forma de contenedor ISO; las dos
   acciones (ACCESO JOATHIVA · COTIZAR OPERATIVA) se ven claramente distintas. */
:root{
 --oro:#FEDC00; --oro-hi:#ffe95c; --verde:#0E3B2E; --verde-950:#06231b;
 --noche:#05060f; --tinta:#eef3f0; --bruma:#a9b8b1; --linea:rgba(254,220,0,.16);
 --display:'Archivo',sans-serif; --cuerpo:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
}
.jv-hd{position:fixed;inset:0 0 auto;z-index:900;padding:12px 0;
 background:rgba(5,6,15,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.jv-wrap{width:min(1180px,calc(100% - 32px));margin-inline:auto}
/* el menú ES un contenedor */
.jv-cnt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
 padding:10px 18px;border-radius:6px;border:1px solid rgba(0,0,0,.6);overflow:hidden;
 background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 24%,rgba(0,0,0,.28) 74%,rgba(0,0,0,.5)),
            repeating-linear-gradient(90deg,#0E3B2E 0 11px,#0b3025 11px 22px);
 box-shadow:0 14px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18)}
.jv-cnt::before{content:'';position:absolute;left:0;right:0;top:0;height:7px;
 background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(0,0,0,.35));border-bottom:1px solid rgba(0,0,0,.5)}
.jv-cnt::after{content:'';position:absolute;left:0;right:0;bottom:0;height:8px;
 background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(255,255,255,.10));border-top:1px solid rgba(0,0,0,.5)}
.jv-cnt i.cst{position:absolute;width:14px;height:11px;border-radius:2px;z-index:2;
 background:linear-gradient(180deg,#5d646d,#2a2f36);border:1px solid rgba(0,0,0,.7)}
.jv-cnt i.tl{left:3px;top:2px}.jv-cnt i.tr{right:3px;top:2px}
.jv-cnt i.bl{left:3px;bottom:2px}.jv-cnt i.br{right:3px;bottom:2px}
/* marca */
.jv-brand{position:relative;z-index:3;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.jv-brand img{height:38px;width:auto;display:block;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.jv-brand small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.26em;
 color:rgba(255,255,255,.62);margin-top:3px;text-transform:uppercase}
/* navegación */
.jv-nav{position:relative;z-index:3;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.jv-nav .lk{padding:9px 13px;border-radius:5px;font:600 13px/1 var(--cuerpo);color:rgba(255,255,255,.8);
 text-decoration:none;transition:background .18s,color .18s}
.jv-nav .lk:hover,.jv-nav .lk[aria-current="page"]{background:rgba(255,255,255,.10);color:#fff}
/* separador: de acá en adelante son ACCIONES */
.jv-sep{width:1px;height:26px;margin:0 6px;background:rgba(255,255,255,.22)}
.jv-act{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:6px;
 font:800 12.5px/1 var(--display);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
 border:2px solid transparent;transition:transform .16s,box-shadow .16s,background .18s;white-space:nowrap}
.jv-act::before{content:'';width:7px;height:7px;border-radius:50%;flex:0 0 auto}
/* acción 1 · acceso (contorno oro) */
.jv-acceso{color:var(--oro);border-color:var(--oro);background:rgba(254,220,0,.08)}
.jv-acceso::before{background:var(--oro);box-shadow:0 0 8px var(--oro)}
.jv-acceso:hover{background:rgba(254,220,0,.2);transform:translateY(-2px)}
/* acción 2 · cotizar (oro sólido = acción principal) */
.jv-cotizar{color:var(--verde-950);background:var(--oro);border-color:var(--oro);
 box-shadow:0 10px 26px rgba(254,220,0,.32)}
.jv-cotizar::before{background:var(--verde-950)}
.jv-cotizar:hover{background:var(--oro-hi);transform:translateY(-2px);box-shadow:0 14px 32px rgba(254,220,0,.45)}
@media(max-width:1000px){
 .jv-nav .lk{padding:8px 9px;font-size:12px}
 .jv-act{padding:10px 12px;font-size:11px}
 .jv-brand small{display:none}
}
@media(max-width:640px){
 .jv-cnt{flex-direction:column;align-items:stretch;gap:10px;padding:14px}
 .jv-nav{justify-content:center}
 .jv-sep{display:none}
 .jv-act{flex:1 1 auto;justify-content:center}
}