/* navbar.css — el NAVBAR ESTÁNDAR de rmorenodot.com para las páginas internas
   (Servicio.html). Mismo lenguaje que la home: wordmark + links + selector ES/EN
   + burger que abre el dropdown analógico (consola de fósforo). Aquí el nav es
   STICKY y visible de inmediato (la home lo desvanece con JS tras el hero). */

.site-nav {
  position: sticky; top: 0; z-index: 40; opacity: 1;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
/* service page (look color): navbar flotante con un scrim/glare analógico tenue
   (fade oscuro arriba + blur suave) para que el texto no se pierda sobre el color */
[data-svc-look="color"] .site-nav {
  position: fixed; inset-inline: 0; top: 0;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--svc) 30%, transparent) 0%, color-mix(in srgb, var(--svc) 10%, transparent) 60%, transparent 100%),
    linear-gradient(to bottom, color-mix(in srgb, #000 34%, transparent) 0%, color-mix(in srgb, #000 12%, transparent) 55%, transparent 100%);
  -webkit-backdrop-filter: blur(3px) saturate(1.5) brightness(1.05); backdrop-filter: blur(3px) saturate(1.5) brightness(1.05);
  border-bottom-color: transparent;
}
[data-svc-look="color"] .site-nav .nav-link,
[data-svc-look="color"] .site-nav .nav-clock,
[data-svc-look="color"] .site-nav .nav-mark { text-shadow: 0 1px 10px rgba(0,0,0,.45); }
/* home (index / Portal de entrada): el nav flota FIJO y arranca invisible; el JS
   lo desvanece hacia adentro (opacity 0 → 1) tras el settle del portal. Hereda
   border-bottom + blur del .site-nav base. Antes esto vivía duplicado inline en
   index.html y Portal de entrada.html — ahora navbar.css es la fuente única. */
[data-home] .site-nav {
  position: fixed; inset-inline: 0; top: 0; opacity: 0;
  background:
    linear-gradient(to bottom, color-mix(in srgb, #000 30%, transparent) 0%, transparent 100%),
    color-mix(in oklab, var(--bg) 80%, transparent);
}
[data-home] .site-nav .nav-link,
[data-home] .site-nav .nav-clock,
[data-home] .site-nav .nav-mark { text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.nav-inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: max(16px, env(safe-area-inset-top)) max(clamp(20px, 5vw, 56px), env(safe-area-inset-right)) 16px max(clamp(20px, 5vw, 56px), env(safe-area-inset-left));
}
.nav-mark { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 42px); }
.nav-link {
  font-family: var(--type-family-workhorse); font-weight: 500;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mute); transition: color .2s var(--ease-out);
  text-decoration: none; white-space: nowrap;
}
.nav-link:hover {
  color: var(--fg);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  text-decoration-color: var(--nav-cat, color-mix(in srgb, var(--fg) 40%, transparent));
}
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-clock { color: var(--mute); white-space: nowrap; }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; color: var(--fg); padding: 8px; align-items: center; }

/* selector ES / EN */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border: 1px solid color-mix(in srgb, var(--paper) 24%, transparent); border-radius: 999px; background: transparent;
}
.lang-opt {
  font-family: var(--type-family-workhorse); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 58%, transparent); background: none; border: 0; cursor: pointer;
  padding: 5px 9px; border-radius: 999px; min-height: 28px; line-height: 1;
  transition: color .2s var(--ease-out), background .2s var(--ease-out);
}
.lang-opt.on { color: var(--ink); background: var(--paper); font-weight: 800; }
.lang-opt:not(.on):hover { color: var(--paper); }
/* service page (look color): pill seleccionado en blanco, texto del color del servicio */
[data-svc-look="color"] .lang-toggle .lang-opt.on { color: var(--svc); background: var(--paper); }

/* ── dropdown analógico (canon de pop-ups) ──────────────────────────────── */
.nav-dd-scrim {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(6,5,4,.22); opacity: 0; pointer-events: none;
  transition: opacity .24s var(--ease-out);
}
.nav-dd-scrim.on { opacity: 1; pointer-events: auto; }
.nav-dd {
  position: fixed; z-index: 41;
  top: calc(max(16px, env(safe-area-inset-top)) + 52px);
  right: max(clamp(20px, 5vw, 56px), env(safe-area-inset-right));
  width: max-content; pointer-events: none;
}
.nav-dd-panel {
  --hud: var(--cat-verde, #618E48);
  position: relative; min-width: 234px; overflow: hidden;
  background:
    radial-gradient(140% 80% at 50% -10%, color-mix(in srgb, var(--hud) 9%, transparent) 0%, transparent 55%),
    linear-gradient(rgba(18,24,18,.80), rgba(8,11,8,.88));
  border: 1px solid color-mix(in srgb, var(--hud) 45%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 24px 54px -18px rgba(0,0,0,.85),
              inset 0 0 50px -22px color-mix(in srgb, var(--hud) 40%, transparent);
  -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
  transform-origin: top right;
  transform: translateY(-12px) scale(.95); opacity: 0; pointer-events: none;
  transition: transform .34s var(--ease-stand), opacity .26s var(--ease-out);
}
.nav-dd.on .nav-dd-panel { transform: none; opacity: 1; pointer-events: auto; }
.nav-dd-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--hud) 24%, transparent) .8px, transparent 1.6px);
  background-size: 15px 15px; opacity: .12;
}
.nav-dd-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.13) 2px 3px); mix-blend-mode: multiply;
}
.nav-dd-br { position: absolute; width: 12px; height: 12px; z-index: 3; pointer-events: none;
  border: 1.5px solid color-mix(in srgb, var(--hud) 85%, transparent); }
.nav-dd-br.tl { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
.nav-dd-br.tr { top: 5px; right: 5px; border-left: 0; border-bottom: 0; }
.nav-dd-br.bl { bottom: 5px; left: 5px; border-right: 0; border-top: 0; }
.nav-dd-br.br { bottom: 5px; right: 5px; border-left: 0; border-top: 0; }
.nav-dd-head {
  position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 11px 9px; border-bottom: 1px solid color-mix(in srgb, var(--hud) 26%, transparent);
  font-family: var(--type-family-workhorse); font-weight: 600; font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--hud) 84%, #fff 18%);
  text-shadow: 0 0 7px color-mix(in srgb, var(--hud) 40%, transparent);
}
.nav-dd-head .an-rec { width: 6px; height: 6px; border-radius: 50%; background: var(--hud);
  box-shadow: 0 0 7px var(--hud); margin-right: .55em; display: inline-block; vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) { .nav-dd-head .an-rec { animation: navRecBlink 1.4s steps(1) infinite; } }
@keyframes navRecBlink { 0%,60% { opacity: 1; } 61%,100% { opacity: .25; } }
.nav-dd-head-r { color: color-mix(in srgb, var(--hud) 58%, #fff 20%); }
.nav-dd-list { position: relative; z-index: 3; display: flex; flex-direction: column; padding: 6px; gap: 3px; }
.nav-dd-row {
  --cat: var(--cat-sienna);
  display: flex; align-items: center; justify-content: space-between; gap: 1.6em;
  padding: 12px; border-radius: 3px; text-decoration: none;
  font-family: var(--type-family-workhorse); font-weight: 600; font-size: 14.5px; letter-spacing: .01em;
  color: var(--paper); border: 1px solid transparent;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}
.nav-dd-row:hover, .nav-dd-row:focus-visible {
  background: color-mix(in srgb, var(--cat) 16%, transparent);
  border-color: color-mix(in srgb, var(--cat) 55%, transparent); outline: none;
}
.nav-dd-dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--cat); box-shadow: 0 0 8px color-mix(in srgb, var(--cat) 70%, transparent); }
.nav-burger.is-open { color: var(--cat-sienna); }

/* sub-items de servicios dentro del dropdown (burger) — indentados */
.nav-dd-subs { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 4px 14px;
  padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--hud, var(--cat-verde)) 24%, transparent); }
.nav-dd-sub {
  --cat: var(--cat-azure);
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 3px;
  text-decoration: none; color: color-mix(in srgb, var(--paper) 82%, transparent);
  font-family: var(--type-family-workhorse); font-weight: 500; font-size: 13px; letter-spacing: .01em;
  border: 1px solid transparent;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}
.nav-dd-sub:hover, .nav-dd-sub:focus-visible {
  background: color-mix(in srgb, var(--cat) 14%, transparent);
  border-color: color-mix(in srgb, var(--cat) 50%, transparent); color: var(--paper); outline: none;
}
.nav-dd-sub .nav-dd-dot { width: 6px; height: 6px; }
.nav-dd-sub-num { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  color: color-mix(in srgb, var(--paper) 42%, transparent); font-variant-numeric: tabular-nums; }

/* desktop: "servicios" con mini-dropdown analógico al hover/focus */
.nav-svc { position: relative; display: inline-flex; }
.nav-mini {
  --hud: var(--cat-verde, #618E48);
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px);
  margin-top: 10px; min-width: 196px; z-index: 60;
  display: flex; flex-direction: column; padding: 7px; gap: 2px;
  background: linear-gradient(rgba(18,24,18,.92), rgba(8,11,8,.95));
  border: 1px solid color-mix(in srgb, var(--hud) 42%, transparent);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 20px 44px -16px rgba(0,0,0,.85);
  -webkit-backdrop-filter: blur(13px); backdrop-filter: blur(13px);
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease-out), transform .24s var(--ease-stand);
}
.nav-mini::before {
  /* puente invisible para no perder el hover al bajar el cursor */
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.nav-svc:hover .nav-mini, .nav-svc:focus-within .nav-mini {
  opacity: 1; pointer-events: auto; transform: translate(-50%, 0);
}
.nav-mini-row {
  --cat: var(--cat-azure);
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 3px;
  text-decoration: none; color: var(--paper); border: 1px solid transparent;
  font-family: var(--type-family-workhorse); font-weight: 600; font-size: 13.5px; letter-spacing: .01em;
  text-transform: none;
  transition: background .16s var(--ease-out), border-color .16s var(--ease-out);
}
.nav-mini-row:hover, .nav-mini-row:focus-visible {
  background: color-mix(in srgb, var(--cat) 16%, transparent);
  border-color: color-mix(in srgb, var(--cat) 52%, transparent); outline: none;
}
.nav-mini-num { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  color: var(--mute); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .nav-dd-panel { transition: opacity .2s linear; transform: none; }
  .nav-mini { transition: opacity .15s linear; }
}

/* el nav desktop colapsa a burger en ≤920 */
@media (max-width: 920px) {
  .nav-links, .nav-clock { display: none; }
  .nav-burger { display: inline-flex; min-width: 44px; min-height: 44px; justify-content: center; }
}
@media (pointer: coarse) {
  .nav-link { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-links { gap: clamp(14px, 2vw, 30px); }
}
/* viewports angostos (≤360): el wordmark + lang + burger no caben con el
   padding/gap default → tighten para garantizar scroll-x = 0 a 320px */
@media (max-width: 360px) {
  .nav-inner {
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 14px max(14px, env(safe-area-inset-left));
    gap: 12px;
  }
  .nav-right { gap: 12px; }
}