/* daezpro.com — 02-nav.css
   Barra de navegacion superior (.nav) y su dropdown de Servicios. */

/* ==========================================================================
   SECCIONES DE F1 (alcance del agente de fundación)
   ========================================================================== */

/* -------------------------------------------------------------- 5.1 NAV */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
          backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--border);
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:72px;
}
.nav__brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-h2);
  letter-spacing:-0.04em;
  color:var(--text-strong);
}
.nav__dot{ color:var(--accent); }

.nav__links{
  display:flex;
  align-items:center;
  gap:30px;
}
.nav__links a:not(.btn){
  font-size:var(--fs-title);
  font-weight:500;
  color:var(--text-body);
  transition:color .16s ease;
}
.nav__links a:not(.btn):hover{ color:var(--text-strong); }
.nav__cta{ margin-left:6px; padding:11px 20px; }

/* Dropdown "Servicios" (los 5 pilares de negocio, patrón Kajabi) */
.nav__drop{ position:relative; }
.nav__droptrigger{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0;
  background:none;
  border:0;
  font-size:var(--fs-title);
  font-weight:500;
  color:var(--text-body);
  transition:color .16s ease;
}
.nav__droptrigger:hover{ color:var(--text-strong); }
.nav__caret{ font-size:var(--fs-xs); transition:transform .18s ease; }
.nav__droptrigger[aria-expanded="true"] .nav__caret{ transform:rotate(180deg); }
.nav__panel{
  position:absolute;
  top:calc(100% + 16px);
  left:50%;
  min-width:370px;
  display:grid;
  gap:2px;
  padding:10px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-md);
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%) translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:110;
}
.nav__drop:hover .nav__panel,
.nav__panel.is-open{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.nav__svc{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:11px 14px;
  border-radius:var(--r-lg);
}
.nav__svc:hover{ background:var(--bg-canvas); }
.nav__svc-name{
  font-size:var(--fs-body);
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--text-strong);
}
.nav__svc-desc{ font-size:var(--fs-sm); line-height:1.4; color:var(--text-body); }

.nav__toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  padding:0;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.nav__toggle span{
  display:block;
  width:20px; height:2px;
  margin-inline:auto;
  background:var(--text-strong);
  border-radius:var(--r-xs);
  transition:transform .22s ease, opacity .22s ease;
}
.nav__toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2){ opacity:0; }
.nav__toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }