/* El punto es el menú: header mínimo (logo, dónde estás, Servicios³, CTA y el botón del punto)
   y un menú a pantalla completa que se abre como una onda desde el punto, con la señal adentro. */
.nav { position: fixed; inset: 0 0 auto; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 18px var(--gut); background: none !important; border: 0 !important; backdrop-filter: none !important; pointer-events: none; }
.nav > * { pointer-events: auto; }
body.caso { padding-top: 92px; }

/* logo: al bajar se mete en su pastilla para no pisar los títulos */
.nav .logo { display: inline-flex; align-items: center; height: 50px; padding: 0 2px; border: 1px solid transparent; border-radius: 999px; transition: background-color 0.3s ease, border-color 0.3s ease, padding 0.35s var(--ease-out); }
.nav.is-scrolled .logo, .nav.is-scrolled .nav__donde, .nav.is-scrolled .nav__serv, .nav.is-scrolled .nav__menu { border-color: rgba(255, 255, 255, 0.12); background: rgba(17, 17, 17, 0.62); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.nav.is-scrolled .logo { padding: 0 20px; }

/* dónde estás: el nombre de la sección gira al cambiar */
.nav__donde { display: inline-flex; align-items: center; gap: 10px; height: 38px; margin: 0; padding: 0 16px 0 14px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; font: 500 13px/1 var(--f-text); color: var(--mute); }
.nav__donde > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); animation: latir 2.4s ease-out infinite; }
@keyframes latir { 0% { box-shadow: 0 0 0 0 rgba(170, 238, 33, 0.45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(170, 238, 33, 0); } }
.nav__roll { position: relative; display: inline-grid; height: 16px; overflow: hidden; }
.nav__roll b { grid-area: 1 / 1; font-weight: 500; line-height: 16px; color: var(--paper); white-space: nowrap; transition: transform 0.5s var(--ease-out), opacity 0.35s ease; }
.nav__roll b.sale { transform: translateY(-110%); opacity: 0; }
.nav__roll b.entra { transform: translateY(110%); opacity: 0; }

/* derecha */
.nav__cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav__cta .btn--sm { height: 50px; padding: 0 22px; }
.nav__serv { display: inline-flex; align-items: center; height: 50px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: none; color: var(--paper); font: 600 14px/1 var(--f-brand); cursor: pointer; }
.nav__serv sup { margin-left: 3px; font: 600 10px/1 var(--f-brand); color: var(--lime); }
.nav__menu { position: relative; display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 8px 0 20px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: none; color: var(--paper); font: 600 14px/1 var(--f-brand); cursor: pointer; }
.nav__menu-dot { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--lime); transition: transform 0.4s var(--ease-out); }
.nav__menu-dot::before, .nav__menu-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -0.8px 0 0 -6px; background: var(--ink); transition: transform 0.35s var(--ease-out); }
.nav__menu-dot::before { transform: translateY(-3px); }
.nav__menu-dot::after { transform: translateY(3px); }
.nav__menu[aria-expanded="true"] .nav__menu-dot::before { transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] .nav__menu-dot::after { transform: rotate(-45deg); }
.nav__menu-dot > i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--lime); opacity: 0; }
.nav__donde, .nav__serv, .nav__menu, .nav__cta .btn--sm { transition: opacity 0.3s ease, border-color 0.2s ease, background-color 0.3s ease; }
@media (hover: hover) and (pointer: fine) {
  .nav__serv:hover, .nav__menu:hover { border-color: rgba(255, 255, 255, 0.4); }
  .nav__menu:hover .nav__menu-dot { transform: scale(1.08); }
  .nav__menu:hover .nav__menu-dot > i { animation: onda-btn 1.1s var(--ease-out) infinite; }
}
@keyframes onda-btn { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.1); opacity: 0; } }
.nav__serv:focus-visible, .nav__menu:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.menu-abierto .nav .logo, .menu-abierto .nav__menu { padding-left: 2px; background: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-abierto .nav__menu { padding-left: 20px; }
.menu-abierto .nav__donde, .menu-abierto .nav__serv, .menu-abierto .nav__cta .btn--sm { opacity: 0; pointer-events: none; }

/* ---------- el menú: se abre como una onda desde el punto ---------- */
.menu { --cx: 100%; --cy: 0%; position: fixed; inset: 0; z-index: 35; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--ink); clip-path: circle(0px at var(--cx) var(--cy)); transition: clip-path 0.85s var(--ease-in-out); }
.menu[hidden] { display: none; }
.menu.is-open { clip-path: circle(150vmax at var(--cx) var(--cy)); }
.menu__onda { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.menu__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: clamp(24px, 4vw, 80px); align-items: center; padding: 104px var(--gut) 20px calc(var(--gut) + 30px); pointer-events: none; }
.menu__in > * { pointer-events: auto; }
.menu__links { display: grid; justify-items: start; }
.menu__links a { position: relative; display: flex; align-items: baseline; gap: 18px; padding: 1px 0; color: var(--paper); transition: color 0.3s ease, transform 0.45s var(--ease-out); }
.menu__links a span { width: 26px; font: 500 12px/1 var(--f-text); letter-spacing: 0.1em; color: var(--dim); transform: translateY(-1.1em); }
.menu__links a b { display: block; font: 600 clamp(38px, 5vw, 78px)/1.06 var(--f-brand); letter-spacing: -0.045em; white-space: nowrap; overflow: hidden; }
.menu__links a b > em { display: inline-block; font-style: normal; transform: translateY(105%); transition: transform 0.75s var(--ease-out); transition-delay: calc(0.3s + var(--i, 0) * 0.05s); }
.menu.is-open .menu__links a b > em { transform: none; }
.menu__links a::before { content: ""; position: absolute; left: -30px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--lime); transform: scale(0); transition: transform 0.35s var(--ease-out); }
.menu__links.is-hover a { color: rgba(255, 255, 255, 0.28); }
.menu__links a.is-on { color: var(--paper); transform: translateX(22px); }
.menu__links a.is-on::before { transform: scale(1); }
.menu__links a:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; border-radius: 6px; }
.menu__links a.is-aqui span { color: var(--lime); }

/* adelantos */
.menu__prev { position: relative; min-height: 400px; }
.menu__prev > section { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 24px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; background: rgba(17, 17, 17, 0.74); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.985); transition: opacity 0.3s ease, transform 0.45s var(--ease-out), visibility 0s linear 0.3s; }
.menu__prev > section.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s ease 0.05s, transform 0.45s var(--ease-out) 0.05s, visibility 0s; }
.mp-t { margin: 0; font: 600 clamp(24px, 2.2vw, 32px)/1.15 var(--f-brand); letter-spacing: -0.025em; }
.mp-t em { font-style: normal; color: var(--lime); }
.mp-p { margin: 0; color: var(--mute); line-height: 1.6; font-size: 15px; }
.mp-casos { display: grid; margin: 4px 0 0; padding: 0; list-style: none; }
.mp-casos a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font: 600 16px/1.2 var(--f-brand); }
.mp-casos a small { font: 400 13px/1.2 var(--f-text); color: var(--dim); }
.mp-casos a:hover { color: var(--lime); }
/* navegador simulado del adelanto (en la home no está caso.css, por eso va acá) */
.menu__prev .marco { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #161616; }
.menu__prev .marco__bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--line); font: 500 11px/1 var(--f-text); color: var(--dim); }
.menu__prev .marco__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.menu__prev .marco__bar span { margin-left: 8px; }
.menu__prev .marco img, .menu__prev .marco video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; background: #1a1a1a; }
.mp-preg { display: grid; margin: 0; padding: 0; list-style: none; }
.mp-preg li { padding: 12px 0; border-top: 1px solid var(--line); font: 500 15px/1.4 var(--f-text); }
.mp-contacto a { display: block; font: 600 clamp(20px, 1.8vw, 26px)/1.4 var(--f-brand); letter-spacing: -0.02em; }
.mp-contacto a:hover { color: var(--lime); }
.dd-k { margin: 0; font: 500 11px/1 var(--f-text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.dd-item { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; transition: background-color 0.2s ease; }
.dd-item b { display: flex; align-items: center; gap: 8px; font: 600 17px/1.2 var(--f-brand); letter-spacing: -0.02em; color: var(--paper); }
.dd-item small { display: block; margin-top: 5px; font: 400 13.5px/1.45 var(--f-text); color: var(--mute); }
.dd-item .badge { padding: 4px 8px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 600 11px/1 var(--f-brand); letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) { .dd-item:hover { background: rgba(255, 255, 255, 0.06); } }
.glifo--dd { display: block; width: 92px; height: 52px; margin: 0; }
.dd-guia { display: flex; justify-content: space-between; padding: 12px 10px 0; border-top: 1px solid var(--line); font: 500 14px/1 var(--f-text); color: var(--mute); }
.dd-guia span { color: var(--lime); }
.dd-guia:hover { color: var(--paper); }

.menu__pie { position: relative; display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; padding: 18px var(--gut) 24px; border-top: 1px solid var(--line); background: var(--ink); font: 500 13px/1 var(--f-text); color: var(--dim); opacity: 0; transition: opacity 0.4s ease 0.5s; }
.menu.is-open .menu__pie { opacity: 1; }
.menu__pie a:hover { color: var(--paper); }
.menu__pie span { margin-left: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) { .nav__serv { display: none; } }
@media (max-width: 900px) {
  .menu__in { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding: 96px var(--gut) 24px; overflow-y: auto;
    -webkit-mask-image: linear-gradient(transparent 0, transparent 70px, #000 100px); mask-image: linear-gradient(transparent 0, transparent 70px, #000 100px); }
  .menu__prev { position: relative; min-height: 0; flex: none; }
  .menu__prev > section { display: none; }
  .menu__prev > section[data-prev="servicios"] { position: static; display: flex; opacity: 1; visibility: visible; transform: none; padding: 14px; }
  .menu__links a.is-on { transform: none; }
  .menu__links a::before { display: none; }
  .menu__links.is-hover a { color: var(--paper); }
}
@media (max-width: 640px) {
  .nav__donde { display: none; }
  .nav__cta .btn--sm { display: none; }
  .nav__menu { padding-left: 16px; }
  .menu__links a b { font-size: 34px; }
  .menu__pie span { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
  .menu__links a b > em { transition: none; transform: none; }
  .nav__donde > i { animation: none; }
}