/* ═══════════════════════════════════════════════════════════════════════
   comun.css — nav compartido + formulario de contacto compartido.
   Se enlaza DESPUÉS de los <style> propios de cada página, así estas reglas
   ganan sobre las copias antiguas que puedan quedar. Fuente única de la
   navegación: si cambia un enlace o el botón "Acceso Alumnos", se cambia
   el HTML del nav en cada página y el aspecto SOLO aquí.
   Las páginas siguen definiendo por su cuenta la posición del nav
   (fixed en portada/cursos, sticky en legales) y el wordmark.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Anclas bajo nav fija: el título aterriza DEBAJO de la barra ─── */
[id]{scroll-margin-top:84px}

/* ── Tap-targets del pie ≥24px (Lighthouse target-size): los enlaces
      legales medían 14px de alto y en móvil se fallaba el toque ── */
footer a{display:inline-block;padding-block:6px}

/* ── Pie centrado en móvil (en fila quedaba escorado a la izquierda) ── */
@media(max-width:820px){
  .foot-inner{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px}
  .foot-inner a{margin:0 8px}
}

/* ── Móvil: menos aire vertical entre secciones (el clamp de escritorio
      dejaba páramos vacíos de 300px). Gana a los :root de cada página
      porque comun.css carga el último. ── */
@media(max-width:820px){:root{--sec-pad:clamp(60px,9vh,104px)}}

/* ── Enlaces del nav ─────────────────────────────────────────────── */
nav .navlinks{
  margin-left:auto;display:flex;align-items:center;
  gap:clamp(14px,2vw,28px);
}
nav a.navlink{
  color:var(--nube);text-decoration:none;font-size:14px;font-weight:500;
  transition:color .25s;
}
nav a.navlink:hover{color:var(--hueso)}
nav a.navlink[aria-current]{color:var(--hueso)}

/* ── Selector de idioma ──────────────────────────────────────────── */
nav .lang{
  flex:none;margin-left:0;display:flex;
  border:1px solid var(--basalto);border-radius:999px;overflow:hidden;
}
nav .lang button{
  background:none;border:0;color:var(--nube);font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;padding:7px 13px;cursor:pointer;
  transition:background .25s,color .25s;
}
nav .lang button[aria-pressed="true"]{background:var(--hueso);color:var(--noche)}

/* ── Acceso Alumnos: ÚNICO botón en ámbar del nav (campus Moodle) ── */
nav a.nav-cta{
  flex:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--ambar);color:var(--noche);text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:14px;
  padding:9px 18px;border-radius:999px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
nav a.nav-cta:hover{box-shadow:0 8px 26px rgba(245,165,36,.35);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){nav a.nav-cta:hover{transform:none}}

/* ── Menú móvil (mismo burger en todas las páginas) ──────────────── */
#nav-burger{display:none;background:none;border:0;cursor:pointer;padding:10px}
#nav-burger span{
  display:block;width:22px;height:2px;background:var(--hueso);
  margin:5px 0;border-radius:2px;transition:transform .3s,opacity .3s;
}
#nav.open #nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#nav.open #nav-burger span:nth-child(2){opacity:0}
#nav.open #nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:820px){
  nav{flex-wrap:wrap}
  /* Los enlaces caen debajo de la barra; idioma y CTA se quedan visibles */
  nav .navlinks{
    display:none;order:9;width:100%;margin-left:0;
    flex-direction:column;align-items:stretch;gap:0;
  }
  #nav.open .navlinks{display:flex}
  /* Varias páginas traen heredado `nav a.navlink{display:none}` a ≤820px:
     con el menú abierto hay que ganarle en especificidad. */
  #nav.open .navlinks a.navlink{display:block}
  nav .navlinks a.navlink{
    padding:13px 4px;font-size:16px;border-top:1px solid var(--basalto);
  }
  nav .lang{margin-left:auto}
  nav a.nav-cta{padding:8px 14px;font-size:13px}
  #nav-burger{display:block}
  /* Con el menú desplegado hace falta fondo sólido: sin él, los enlaces
     caen sobre el contenido de la página y no se leen. */
  #nav.open{background:rgba(6,10,20,.94);backdrop-filter:blur(14px)}
}
@media(max-width:480px){
  nav{gap:10px}
  nav .build{display:none}      /* sello de build: estorba en móvil */
  nav a.nav-cta{padding:8px 12px;font-size:12px;margin-left:auto}
  nav .lang button{padding:6px 10px}
  /* En pantallas estrechas no caben logo + idioma + CTA + burger en una
     línea: el selector de idioma baja con el menú desplegable. */
  nav .lang{display:none;order:10;margin:12px 0 0 auto}
  #nav.open .lang{display:flex}
}

/* ═══════════════════════════════════════════════════════════════════
   Formulario de contacto inyectado por comun.js (todas las páginas
   salvo contacto.html, que ya trae el suyo). Clases con prefijo .cw-
   para no chocar con el CSS propio de cada página.
   ═════════════════════════════════════════════════════════════════ */
.cw{
  padding-block:clamp(70px,11vh,130px);
  background:var(--noche-2);border-top:1px solid var(--basalto);
}
.cw-wrap{width:min(1440px,100%);margin-inline:auto;padding-inline:var(--gutter)}
.cw-k{
  font-family:var(--mono);font-size:clamp(11px,.72vw,13px);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ambar);
  margin-bottom:14px;
}
.cw-h{
  font-weight:750;font-stretch:116%;line-height:1.05;letter-spacing:-.01em;
  font-size:clamp(1.5rem,3vw,2.4rem);text-wrap:pretty;
}
.cw-sub{color:var(--nube);margin:12px 0 30px;max-width:60ch}
.cw-form{display:grid;gap:20px;max-width:640px}
.cw-campo{display:grid;gap:8px}
.cw-campo label{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--nube);
}
.cw-campo input,.cw-campo select,.cw-campo textarea{
  width:100%;padding:13px 15px;border-radius:10px;color:var(--hueso);
  background:rgba(22,32,47,.45);border:1px solid var(--basalto);
  font-family:var(--sans);font-size:1em;
}
.cw-campo input:focus,.cw-campo select:focus,.cw-campo textarea:focus{
  border-color:rgba(245,165,36,.6);
}
.cw-campo select option{background:var(--noche-2);color:var(--hueso)}
.cw-campo textarea{min-height:150px;resize:vertical}
.cw-hp{position:absolute;left:-9999px}
.cw-rgpd{display:flex;gap:10px;align-items:flex-start;font-size:.9em;color:var(--nube)}
.cw-rgpd input{accent-color:var(--ambar);margin-top:5px;flex:none}
.cw-rgpd a{color:var(--hueso)}
.cw-btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 30px;
  border-radius:999px;border:0;background:var(--ambar);color:var(--noche);
  font-family:var(--sans);font-weight:600;font-size:15px;cursor:pointer;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
.cw-btn:hover{box-shadow:0 8px 32px rgba(245,165,36,.35);transform:translateY(-2px)}
.cw-btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.cw-msg{font-family:var(--mono);font-size:13px;letter-spacing:.04em;min-height:1.5em}
.cw-msg.ok{color:var(--verde-ok,#35c28d)}
.cw-msg.err{color:var(--rojo,#e5484d)}