/* EL MEGA-MENÚ CON EL ASPECTO DE LA PORTADA NUEVA, «EL TALLER» (11-nov-2026). TODAVÍA NO SE ENCOLA.
   Va DESPUÉS de mega-menu.css y solo le cambia el aspecto: esquinas rectas, filetes de tinta, la letra de la marca y sin
   emojis. Ni el HTML (inc/site-nav.php) ni el comportamiento (mega-menu.js) cambian. Si se aprueba, en la fase 2 estas
   reglas pasan a mega-menu.css y este fichero se borra. */
.stt-nav{--mt-tinta:#0B1B2B;--mt-hueso:#FAFAF7;--mt-mostaza:#F2C230;--mt-verde:#0A7D5C;--mt-gris:#56616F;--mt-pulsado:#ECE8DD;
  --mt-serif:var(--wp--preset--font-family--serif,Spectral,Georgia,serif);--mt-mono:var(--wp--preset--font-family--mono,'JetBrains Mono',ui-monospace,monospace)}
.stt-nav-menu a:hover,.stt-nav-trigger:hover{color:var(--mt-verde)}                 /* el verde de la marca sobre hueso no llegaba a 3:1 */
.stt-nav-trigger[aria-expanded="true"]{box-shadow:0 2px 0 var(--mt-tinta)}

/* el panel: una lámina con filete, sin esquinas redondas ni sombra difusa */
.stt-mega{background:var(--mt-hueso);border:2px solid var(--mt-tinta);border-top:6px solid var(--mt-mostaza);border-radius:0;box-shadow:6px 6px 0 rgba(11,27,43,.16);outline:2px solid var(--mt-tinta);outline-offset:-2px;padding:1.3rem 1.5rem 1.2rem}
.stt-mega-ic{display:none}                                                          /* sin emojis, como la portada */
.stt-mega-h{font:500 .75rem var(--mt-mono);letter-spacing:.08em;color:var(--mt-gris);margin-bottom:.8rem}

/* simuladores: cada rama, con su nombre en la letra de los títulos y su recuento en mono */
.stt-mega-rama{margin-bottom:1rem}
.stt-mega-rama-h{font:600 1rem/1.2 var(--mt-serif);text-transform:none;letter-spacing:0;color:var(--mt-tinta);padding:.34rem .5rem;margin-bottom:.3rem;background:var(--mt-color,transparent);border:1px solid var(--mt-tinta);border-bottom-width:2px}
.stt-mega-n{font:500 .75rem var(--mt-mono);color:var(--mt-tinta)}
/* el título de cada rama, con el color de su familia en la portada (la clase la pone inc/site-nav.php en la fase 2), y
   enlazado a su unidad, como los cursos del panel de unidades */
.stt-mega-f-maquinas{--mt-color:#5A9BD8} .stt-mega-f-electricidad{--mt-color:#F2C230} .stt-mega-f-diseno{--mt-color:#FF6B6B} .stt-mega-f-control{--mt-color:#10B981}
.stt-nav-menu .stt-mega-rama-h a{display:inline;width:auto;padding:0;font:inherit;color:var(--mt-tinta);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.stt-nav-menu .stt-mega-rama-h a:hover{color:var(--mt-tinta);text-decoration-thickness:2px}
.stt-mega-list a{border-radius:0;font-weight:500}
.stt-mega-rama .stt-mega-list a{padding:.28rem .35rem;margin-inline:-.35rem}
.stt-mega-list a:hover{background:var(--mt-pulsado);color:var(--mt-tinta)}

/* unidades: el área, una banda mostaza; cada curso, una etiqueta recta */
/* (con «.stt-nav-menu» delante: la regla general «.stt-nav-menu a» de mega-menu.css pesa más que una clase sola y dejaba
   la banda del área sin fondo y los dos enlaces del pie en la misma línea) */
.stt-nav-menu .stt-mega-area{display:block;width:auto;border-radius:0;background:var(--mt-mostaza);color:var(--mt-tinta);border:1px solid var(--mt-tinta);padding:.6rem .8rem;font:600 1.05rem var(--mt-serif)}
.stt-nav-menu .stt-mega-area:hover{color:var(--mt-tinta);text-decoration:underline}
.stt-mega-curso{margin-top:1rem}
.stt-nav-menu .stt-mega-curso a{width:auto;min-height:32px;padding:0 .75rem;border-radius:0;border-color:var(--mt-tinta);background:none;font:500 .78rem var(--mt-mono);letter-spacing:.04em;text-transform:uppercase}
.stt-nav-menu .stt-mega-curso a:hover{background:var(--mt-mostaza);border-color:var(--mt-tinta);color:var(--mt-tinta)}
.stt-nav-menu .stt-mega-mas,.stt-nav-menu .stt-mega-cta{display:block;width:auto;font-weight:600;color:var(--mt-tinta);text-decoration:underline;text-decoration-color:var(--mt-mostaza);text-decoration-thickness:2px;text-underline-offset:4px}
.stt-nav-menu .stt-mega-cta{margin-top:.9rem;padding:.9rem 0 0;border-top:2px solid var(--mt-tinta)}
.stt-nav-menu .stt-mega-cta--area{margin-top:.5rem;padding-top:0;border-top:0}

/* el selector de idioma, recto */
.stt-nav-lang .stt-lang-actual,.stt-nav-menu .stt-nav-lang .stt-lang{border-radius:0;font-family:var(--mt-mono)}
.stt-nav-menu .stt-nav-lang .stt-lang{border-color:var(--mt-tinta)}
.stt-nav-menu .stt-nav-lang .stt-lang:hover{background:var(--mt-mostaza);border-color:var(--mt-tinta);color:var(--mt-tinta)}

/* ordenador: el panel de unidades iba en una sola columna (la otra mitad, vacía) y no cabía en la pantalla; ahora, dos
   columnas sin partir un curso, y ningún panel pasa del alto de la ventana (si no cabe, se desliza por dentro) */
@media (min-width:891px){
  /* los dos paneles se anclan al borde derecho del menú, no a su botón: anclado a «Unidades», en una ventana de menos
     de unos 1.150 px el panel se salía por la izquierda (11-nov-2026). Y nunca son más anchos que la ventana. */
  .stt-nav{position:relative}
  .stt-nav-menu>li.stt-nav-has-mega{position:static}
  .stt-mega,.stt-mega--sims{left:auto;right:0;transform:translateY(-6px);max-width:calc(100vw - 2.5rem)}
  .stt-mega.is-open,.stt-mega--sims.is-open{transform:none}
  .stt-mega{max-height:calc(100vh - 84px);overflow-y:auto;overscroll-behavior:contain}
  .stt-mega:not(.stt-mega--sims) .stt-mega-inner{display:block}
  .stt-mega-unidades{columns:2;column-gap:1.8rem}
  .stt-mega-unidades .stt-mega-area,.stt-mega-unidades .stt-mega-h{column-span:all}
  .stt-mega-unidades .stt-mega-curso{break-after:avoid;margin-top:0}
  .stt-mega-unidades .stt-mega-list{break-inside:avoid;margin-bottom:1rem}
}

.stt-nav :focus-visible{outline:2px solid var(--mt-tinta);outline-offset:3px}

/* móvil: el menú es una hoja bajo la cabecera, con su filete; los paneles, dentro y sin marco */
@media (max-width:890px){
  .stt-nav-menu{background:var(--mt-hueso);border-top:2px solid var(--mt-tinta);border-bottom:2px solid var(--mt-tinta);box-shadow:none;max-height:calc(100vh - 70px);max-height:calc(100dvh - 70px);overflow-y:auto}
  .stt-nav-menu>li{border-bottom:1px solid #D9D5CA}
  .stt-nav-trigger[aria-expanded="true"]{box-shadow:none}
  .stt-mega{border:0;outline:0;box-shadow:none;background:none;padding:0 0 .8rem}
  .stt-mega-rama .stt-mega-list a{padding:.6rem .35rem}
}