/* ============================================================
   Navegación agrupada y acceso de clientes
   ============================================================
   La fila llevaba once enlaces al mismo nivel: qué vendemos, quiénes somos
   y utilidades, todo revuelto. Ahora son cuatro entradas y dos de ellas
   despliegan. El desplegable abre al pasar el ratón y también al pulsar,
   porque en una pantalla táctil no hay ratón que pasar.
   ============================================================ */

.nav__grupo{position:relative}

.nav__jefe{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;font:inherit;
}
.nav__caret{
  width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease-out);opacity:.7;
}
.nav__grupo.is-open .nav__caret{transform:rotate(180deg)}

.nav__sub{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-8px);
  min-width:216px;padding:8px;z-index:40;
  background:var(--bg-elev);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),
             visibility .25s;
}
/* El puente invisible evita que el menú se cierre al cruzar el hueco. */
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}

.nav__grupo:hover .nav__sub,
.nav__grupo:focus-within .nav__sub,
.nav__grupo.is-open .nav__sub{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}

.nav__opt{
  display:block;padding:10px 14px;border-radius:11px;
  font-family:var(--font);font-weight:500;font-size:.92rem;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.nav__opt:hover{background:color-mix(in srgb,var(--accent-500) 9%,transparent);color:var(--ink)}
.nav__opt.is-active{
  color:var(--accent-600);font-weight:600;
  background:color-mix(in srgb,var(--accent-500) 8%,transparent);
}

/* Sobre el banner oscuro de la portada el desplegable mantiene su fondo
   claro: es una superficie, no parte de la cabecera. */
body:not(.sin-banner) .header:not(.is-stuck) .nav__opt{color:var(--ink-2)}
body:not(.sin-banner) .header:not(.is-stuck) .nav__opt:hover{color:var(--ink)}
body:not(.sin-banner) .header:not(.is-stuck) .nav__opt.is-active{color:var(--accent-600)}

/* ---------------- Acceso de clientes ---------------- */
.acceso{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-2);text-decoration:none;
  font-family:var(--font);font-weight:600;font-size:.83rem;white-space:nowrap;
  transition:border-color .25s var(--ease),color .25s var(--ease),
             background .25s var(--ease);
}
.acceso svg{
  width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.acceso:hover{
  border-color:var(--accent-500);color:var(--accent-600);
  background:color-mix(in srgb,var(--accent-500) 7%,transparent);
}
body:not(.sin-banner) .header:not(.is-stuck) .acceso{
  border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.9);
}
body:not(.sin-banner) .header:not(.is-stuck) .acceso:hover{
  border-color:#fff;color:#fff;background:rgba(255,255,255,.12);
}
body:not(.sin-banner) .header.nav-open .acceso{border-color:var(--line);color:var(--ink-2)}

/* ---------------- Estrecho ---------------- */
@media (max-width:1180px){
  /* Antes de plegar del todo, el acceso se queda en el icono. */
  .acceso span{display:none}
  .acceso{padding:9px 11px}
}

@media (max-width:900px){
  /* En el panel desplegable no hay sitio para submenús: los grupos se
     abren del todo y hacen de titulillo. */
  .nav__grupo{width:100%}
  .nav__jefe{
    width:100%;justify-content:space-between;
    padding:14px 8px 8px;font-size:.75rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);border-bottom:none;
    pointer-events:none;
  }
  .nav__jefe.is-active{color:var(--accent-600)}
  .nav__caret{display:none}
  .nav__sub{
    position:static;transform:none;opacity:1;visibility:visible;
    pointer-events:auto;min-width:0;padding:0;
    background:none;border:none;box-shadow:none;
  }
  .nav__sub::before{display:none}
  .nav__opt{
    padding:13px 8px;font-size:1.05rem;border-radius:0;
    border-bottom:1px solid var(--line);
  }
  .nav__opt:hover,.nav__opt.is-active{background:none}
  .acceso{padding:8px 13px}
  .acceso span{display:none}
}