/* ============================================================
   NAV — barra superior, menú móvil y selector de idioma
   ============================================================ */

.nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:var(--z-nav);
  display:flex;align-items:center;gap:var(--space-lg);
  padding:var(--space-sm) var(--gutter);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(14px);
  border-block-end:1px solid var(--hairline);
  transition:transform var(--dur-base) var(--ease);
}
/* Se esconde al bajar y reaparece al subir. La clase la pone nav.js */
.nav.is-hidden{transform:translateY(-100%)}

.nav__brand{
  font-weight:var(--w-bold);letter-spacing:-.02em;
  text-decoration:none;white-space:nowrap;
}
.nav__brand span{color:var(--muted);font-weight:var(--w-regular)}

.nav__links{
  display:flex;gap:var(--space-lg);margin-inline-start:auto;
  font-size:var(--step--1);
}
.nav__links a{
  text-decoration:none;font-weight:var(--w-medium);
  padding-block:.35rem;position:relative;
}
/* El subrayado crece desde la izquierda. transform en vez de width
   para que lo anime la GPU y no recalcule layout en cada frame. */
.nav__links a::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:0;height:1.5px;
  background:var(--link,var(--coral-text));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-fast) var(--ease);
}
.nav__links a:hover::after{transform:scaleX(1)}
/* La página actual se marca con aria-current, no con una clase:
   así el lector de pantalla también lo anuncia. */
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}

.nav__end{display:flex;align-items:center;gap:var(--space-md)}

.nav__cv{
  font-size:var(--step--1);padding:.45rem 1.1rem;
  border:1.5px solid currentColor;border-radius:var(--r-pill);
  text-decoration:none;font-weight:var(--w-medium);white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}
.nav__cv:hover{background:var(--ink);color:var(--paper)}

/* ---------- Idioma ---------- */
.lang{display:flex;align-items:center;gap:.35rem;font-size:var(--step--1)}
.lang button{
  font:inherit;font-weight:var(--w-medium);background:none;border:0;
  padding:.2rem .1rem;cursor:pointer;color:var(--muted);
  border-block-end:1.5px solid transparent;
}
.lang button[aria-pressed="true"]{color:var(--ink);border-block-end-color:var(--ink)}
.lang .sep{color:var(--muted);user-select:none}

/* ---------- Botón hamburguesa ---------- */
.nav__toggle{
  display:none;font:inherit;background:none;border:0;cursor:pointer;
  padding:.4rem;color:inherit;
}
.nav__toggle svg{display:block}
.nav__toggle line{
  stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
  transition:transform var(--dur-base) var(--ease),
             opacity var(--dur-fast) var(--ease);
  transform-origin:center;
}
.nav__toggle[aria-expanded="true"] .l1{transform:translateY(5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .l2{opacity:0}
.nav__toggle[aria-expanded="true"] .l3{transform:translateY(-5px) rotate(-45deg)}

/* ---------- Panel móvil ---------- */
.menu{
  position:fixed;inset:0;z-index:var(--z-menu);
  background:var(--slate);color:var(--on-slate);
  display:flex;flex-direction:column;justify-content:center;
  gap:var(--space-md);padding:var(--gutter);
  transform:translateY(-100%);
  transition:transform var(--dur-base) var(--ease);
}
.menu[data-open="true"]{transform:translateY(0)}
/* inert lo saca del tab order cuando está cerrado; el hidden de respaldo
   es para navegadores viejos que no entienden inert. */
.menu[hidden]{display:flex}

.menu a{
  font-size:var(--step-4);font-weight:var(--w-bold);
  letter-spacing:var(--track-tight);text-decoration:none;line-height:1.05;
}
.menu a:hover{color:var(--coral-bright)}
.menu__foot{
  margin-block-start:var(--space-xl);display:flex;gap:var(--space-md);
  flex-wrap:wrap;align-items:center;font-size:var(--step--1);
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav__links,.nav__cv{display:none}
  .nav__toggle{display:block}
  .nav__end{margin-inline-start:auto}
}
@media (min-width:901px){
  .menu{display:none}
}

/* Cuando el menú está abierto se congela el scroll del fondo */
body.is-locked{overflow:hidden}

/* ============================================================
   FOOTER
   ============================================================ */
.foot__cta{font-size:var(--step-4);max-width:18ch}
.foot__actions{
  display:flex;gap:var(--space-sm);flex-wrap:wrap;
  margin-block-start:var(--space-xl);
}
.foot__social{
  display:flex;gap:var(--space-lg);flex-wrap:wrap;
  margin-block-start:var(--space-2xl);font-size:var(--step--1);
}
.foot__social a{text-decoration:underline;text-underline-offset:4px}
.foot__legal{
  display:flex;gap:var(--space-md) var(--space-lg);flex-wrap:wrap;
  justify-content:space-between;align-items:baseline;
  margin-block-start:var(--space-xl);
  padding-block-start:var(--space-md);
  border-block-start:1px solid var(--hairline-alt);
  font-size:var(--step--1);color:var(--muted-alt);
}
.foot__sig{margin:0;max-width:none}
.foot__legal nav{display:flex;gap:var(--space-md);flex-wrap:wrap}
.foot__legal a{text-decoration:underline;text-underline-offset:3px}

.foot__mail{
  margin-block-start:var(--space-lg);font-size:var(--step-1);
  font-weight:var(--w-medium);
}

/* Cerrar el menú móvil. Va dentro del panel porque el panel tapa la
   barra: el botón hamburguesa queda debajo y no se puede alcanzar. */
.menu__close{
  position:absolute;inset-block-start:var(--space-md);inset-inline-end:var(--gutter);
  background:none;border:0;padding:.5rem;cursor:pointer;color:inherit;
  line-height:0;
}
.menu__close svg line{
  stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
}
.menu__close:focus-visible{outline:2px solid currentColor;outline-offset:3px}