/* Menu with animated icons: desktop pills with a gliding highlight, mobile launcher panel */

/* Desktop links */
.nav-links {
  position: relative;
  gap: 2px;
  isolation: isolate;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 7px;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 700ms var(--sm-ease);
}

.nav-links a::after { display: none; }

.nav-ico {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  color: var(--aw-deep);
  background: var(--aw-mist);
  box-shadow: inset 0 0 0 1px #35a6e322;
  transition: background 700ms var(--sm-ease), color 700ms var(--sm-ease), box-shadow 700ms var(--sm-ease), rotate 900ms var(--sm-ease), scale 900ms var(--sm-ease);
}

.nav-ico::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--aw-deep), var(--aw-sky));
  opacity: 0;
  transition: opacity 700ms var(--sm-ease);
}

.nav-ico svg {
  position: relative;
  width: 17px;
  height: 17px;
  stroke-width: 2.1;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.nav-links a:hover .nav-ico,
.nav-links a:focus-visible .nav-ico,
.nav-links a[aria-current] .nav-ico {
  color: #fff;
  box-shadow: 0 6px 14px #35a6e355;
  rotate: -8deg;
  scale: 1.08;
}

.nav-links a:hover .nav-ico::before,
.nav-links a:focus-visible .nav-ico::before,
.nav-links a[aria-current] .nav-ico::before { opacity: 1; }

/* The icon redraws itself on hover */
.nav-links a:hover .nav-ico svg,
.nav-links a:focus-visible .nav-ico svg { animation: nav-redraw 1100ms var(--sm-ease) both; }

@keyframes nav-redraw {
  0% { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}

/* Current section keeps a soft halo pulsing around its icon */
.nav-links a[aria-current] .nav-ico::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1.5px solid var(--aw-sky);
  animation: nav-halo 2600ms var(--sm-ease) infinite;
}

@keyframes nav-halo {
  0% { opacity: .8; scale: .9; }
  70%, 100% { opacity: 0; scale: 1.35; }
}

.nav-links a[aria-current] { color: var(--aw-deep); }

/* Gliding highlight behind the hovered or current link (positioned by menu.js) */
.nav-glider {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  width: var(--nav-w, 0px);
  height: 44px;
  translate: var(--nav-x, 0px) -50%;
  border-radius: 999px;
  background: linear-gradient(90deg, #eaf4fb, #dff0fb);
  box-shadow: inset 0 0 0 1px #35a6e326;
  opacity: 0;
  transition: translate 800ms var(--sm-ease), width 800ms var(--sm-ease), opacity 600ms var(--sm-ease);
}

.nav-links.has-glider .nav-glider { opacity: 1; }

/* "7" bubble on Proyectos */
.nav-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  margin-left: -2px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--aw-sky), #2a74ad);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 3px 8px #35a6e355;
  animation: nav-badge 3200ms var(--sm-ease) infinite;
}

@keyframes nav-badge {
  0%, 70%, 100% { translate: 0 0; }
  80% { translate: 0 -3px; }
  90% { translate: 0 0; }
}

/* Icons draw in one by one after the curtain, then breathe in turn, very slowly */
.nav-links a:not(:hover):not(:focus-visible) .nav-ico svg {
  animation: nav-redraw 1800ms var(--sm-ease) both, nav-breathe 9s ease-in-out infinite;
  animation-delay: var(--nav-in, 900ms), var(--nav-idle, 3s);
}

.nav-links a:nth-of-type(2) .nav-ico svg { --nav-in: 1040ms; --nav-idle: 4.5s; }
.nav-links a:nth-of-type(3) .nav-ico svg { --nav-in: 1180ms; --nav-idle: 6s; }
.nav-links a:nth-of-type(4) .nav-ico svg { --nav-in: 1320ms; --nav-idle: 7.5s; }
.nav-links a:nth-of-type(5) .nav-ico svg { --nav-in: 1460ms; --nav-idle: 9s; }
.nav-links a:nth-of-type(6) .nav-ico svg { --nav-in: 1600ms; --nav-idle: 10.5s; }

@keyframes nav-breathe {
  0%, 12%, 100% { scale: 1; rotate: 0deg; }
  5% { scale: 1.16; rotate: -10deg; }
}

/* "Hablemos" button with a chat bubble whose dots type */
.nav-cta { gap: 9px; }

.nav-cta-ico {
  width: 20px;
  height: 20px;
  stroke-width: 2.1;
  animation: nav-chat 4s var(--sm-ease) infinite;
}

@keyframes nav-chat {
  0%, 80%, 100% { rotate: 0deg; }
  85% { rotate: -12deg; }
  92% { rotate: 8deg; }
}

/* Mobile: animated burger */
.mobile-menu summary { gap: 10px; font-weight: 600; color: var(--aw-deep); }

.burger {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aw-deep), var(--aw-sky));
  box-shadow: 0 6px 16px #35a6e355;
  transition: rotate 800ms var(--sm-ease);
}

.burger i {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: translate 600ms var(--sm-ease), rotate 600ms var(--sm-ease), opacity 400ms var(--sm-ease), width 600ms var(--sm-ease);
}

.burger i:nth-child(1) { top: 14px; }
.burger i:nth-child(2) { top: 19px; width: 11px; }
.burger i:nth-child(3) { top: 24px; }

.mobile-menu[open] .burger { rotate: 90deg; }
.mobile-menu[open] .burger i:nth-child(1) { translate: 0 5px; rotate: 45deg; }
.mobile-menu[open] .burger i:nth-child(2) { opacity: 0; width: 0; }
.mobile-menu[open] .burger i:nth-child(3) { translate: 0 -5px; rotate: -45deg; }

/* Mobile: launcher panel */
.mobile-menu > .mm-panel {
  width: min(330px, calc(100vw - 32px));
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 12px;
  border-radius: 26px;
  background: #ffffffee;
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px #173d6030, inset 0 0 0 1px #35a6e31f;
  transform-origin: 100% 0;
  animation: mm-open 600ms var(--sm-ease) both;
}

@keyframes mm-open {
  from { opacity: 0; scale: .92; translate: 0 -10px; }
  to { opacity: 1; scale: 1; translate: 0 0; }
}

.mm-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 10px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
  letter-spacing: .02em;
}

.mm-head img { border-radius: 50%; }

.mobile-menu .mm-panel a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 10px;
  border-radius: 16px;
  animation: mm-item 700ms var(--sm-ease) both;
  transition: background 500ms var(--sm-ease);
}

.mobile-menu .mm-panel a:nth-of-type(1) { animation-delay: 60ms; }
.mobile-menu .mm-panel a:nth-of-type(2) { animation-delay: 110ms; }
.mobile-menu .mm-panel a:nth-of-type(3) { animation-delay: 160ms; }
.mobile-menu .mm-panel a:nth-of-type(4) { animation-delay: 210ms; }
.mobile-menu .mm-panel a:nth-of-type(5) { animation-delay: 260ms; }
.mobile-menu .mm-panel a:nth-of-type(6) { animation-delay: 310ms; }
.mobile-menu .mm-panel a:nth-of-type(7) { animation-delay: 360ms; }
.mobile-menu .mm-panel a:nth-of-type(8) { animation-delay: 410ms; }
.mobile-menu .mm-panel a:nth-of-type(9) { animation-delay: 460ms; }

@keyframes mm-item {
  from { opacity: 0; translate: 14px 0; }
  to { opacity: 1; translate: 0 0; }
}

.mobile-menu .mm-panel a:hover,
.mobile-menu .mm-panel a[aria-current] { background: var(--aw-mist); }

.mm-ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 13px;
  color: var(--aw-deep);
  background: linear-gradient(145deg, #eaf4fb, #d5ebf9);
  box-shadow: inset 0 0 0 1px #35a6e326;
  transition: background 600ms var(--sm-ease), color 600ms var(--sm-ease), rotate 700ms var(--sm-ease);
}

.mm-ico svg {
  width: 21px;
  height: 21px;
  stroke-width: 2;
  stroke-dasharray: 1;
  animation: nav-redraw 1300ms var(--sm-ease) both;
}

.mobile-menu .mm-panel a:hover .mm-ico,
.mobile-menu .mm-panel a[aria-current] .mm-ico {
  color: #fff;
  background: linear-gradient(135deg, var(--aw-deep), var(--aw-sky));
  rotate: -6deg;
}

.mm-text { display: grid; min-width: 0; line-height: 1.25; }
.mm-text b { font-size: 15px; font-weight: 620; color: var(--ink); }
.mm-text small { font-size: 12.5px; color: var(--muted); }

/* Contact closes the list as a gradient call to action */
.mobile-menu .mm-panel a.mm-cta {
  margin-top: 8px;
  padding: 11px 14px 11px 10px;
  background: linear-gradient(120deg, var(--aw-deep), #2a74ad 60%, var(--aw-sky));
  box-shadow: 0 10px 24px #225b8a40;
}

.mobile-menu .mm-panel a.mm-cta:hover { background: linear-gradient(120deg, #1d4f78, #2a74ad 60%, var(--aw-sky)); }
.mm-cta .mm-ico { color: #fff; background: #ffffff26; box-shadow: none; }
.mm-cta .mm-text b { color: #fff; }
.mm-cta .mm-text small { color: #d7ecf9; }
.mm-arrow { width: 20px; height: 20px; margin-left: auto; color: #fff; animation: sm-nudge 2.6s var(--sm-ease) infinite; }

/* Narrower desktops: tighter pills, then icons only with labels kept for screen readers */
@media (max-width: 1240px) {
  .nav-links a { padding-right: 10px; gap: 6px; }
  .nav-ico { width: 27px; height: 27px; }
  .nav-ico svg { width: 15px; height: 15px; }
  .nav-badge { display: none; }
}

@media (min-width: 801px) and (max-width: 1100px) {
  .nav-links { gap: 4px; }
  .nav-links a { padding: 6px; }
  .nav-ico { width: 38px; height: 38px; }
  .nav-ico svg { width: 19px; height: 19px; }
  .nav-label {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    translate: -50% -4px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms var(--sm-ease), translate 600ms var(--sm-ease);
  }
  .nav-links a:hover .nav-label,
  .nav-links a:focus-visible .nav-label { opacity: 1; translate: -50% 0; }
  .nav-glider { height: 50px; }
}

/* Still versions */
body.motion-off .nav-ico svg,
body.motion-off .nav-ico::after,
body.motion-off .nav-badge,
body.motion-off .nav-cta-ico,
body.motion-off .mm-panel,
body.motion-off .mm-panel a,
body.motion-off .mm-ico svg,
body.motion-off .mm-arrow { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .nav-ico svg, .nav-ico::after, .nav-badge, .nav-cta-ico,
  .mobile-menu > .mm-panel, .mobile-menu .mm-panel a, .mm-ico svg, .mm-arrow { animation: none !important; }
  .nav-glider, .nav-ico, .burger, .burger i { transition: none; }
}