/* ==========================================================================
   MENÚ DE BOTONES — hoja común para TODAS las páginas de xiexie.es
   Se carga la última, así que manda sobre los demás estilos.
   Tres cabeceras distintas, un mismo aspecto:
     A) portada        header.top  nav.main
     B) cursos/herram. header      a.volver
     C) guías          header.top  nav (sin clase)
   ========================================================================== */

/* ---------- piezas comunes ---------- */
header .logo,
header .brand{
  font-weight:900;letter-spacing:-.02em;text-transform:lowercase;
  text-decoration:none;color:#141414;
}
header .logo span,
header .brand .cn{
  background:#141414;color:#ffd400;-webkit-text-fill-color:#ffd400;
  border-radius:999px;padding:1px 9px;font-size:14px;
}

/* ---------- A) portada ---------- */
header.top .wrap{
  flex-wrap:nowrap;gap:14px;align-items:center;
  padding-top:12px;padding-bottom:12px;
}
header.top nav.main{
  display:flex;flex-wrap:nowrap;align-items:center;gap:10px;
  margin-left:auto;overflow-x:auto;scrollbar-width:none;padding-right:6px;
}
header.top nav.main::-webkit-scrollbar{display:none}

header.top nav.main a,
header.top nav.main button.btn.lang,
/* B) cursos y herramientas */
header a.volver,
/* C) guías */
header.top nav:not(.main) a,
header.top nav:not(.main) button.btn.lang{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:6px;
  background:#141414;
  color:#ffd400;
  -webkit-text-fill-color:#ffd400;
  border:3px solid #141414;
  border-radius:14px;
  padding:9px 15px;
  font-weight:900;
  font-size:14.5px;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:4px 4px 0 rgba(20,20,20,.85);
  transition:transform .14s, box-shadow .14s, background .14s;
  font-family:inherit;
  cursor:pointer;
}

/* el toque torcido, alternando */
header.top nav.main > *:nth-child(odd),
header a.volver:nth-of-type(odd),
header.top nav:not(.main) a:nth-of-type(odd){transform:rotate(-1.6deg)}
header.top nav.main > *:nth-child(even),
header a.volver:nth-of-type(even),
header.top nav:not(.main) a:nth-of-type(even){transform:rotate(1.4deg)}

/* movimiento al pasar el ratón: se enderezan y suben */
header.top nav.main > *:hover,
header.top nav.main > *:focus-visible,
header a.volver:hover,
header a.volver:focus-visible,
header.top nav:not(.main) a:hover,
header.top nav:not(.main) button.btn.lang:hover{
  transform:rotate(0) translateY(-2px);
  background:#000;
  box-shadow:6px 6px 0 rgba(20,20,20,.9);
  text-decoration:none;
}
header.top nav.main > *:active,
header a.volver:active,
header.top nav:not(.main) a:active{
  transform:rotate(0) translateY(1px);
  box-shadow:2px 2px 0 rgba(20,20,20,.9);
}

/* la etiqueta GRATIS dentro de una pastilla */
header .gratis{
  background:#ffd400;color:#141414;-webkit-text-fill-color:#141414;
  border-radius:999px;padding:1px 7px;font-size:11.5px;font-weight:900;
}

/* iconos */
header.top nav.main a:nth-of-type(1)::before,
header.top nav:not(.main) a:nth-of-type(1)::before{content:"🀄"}
header.top nav.main a:nth-of-type(2)::before,
header.top nav:not(.main) a:nth-of-type(2)::before{content:"🌱"}
header.top nav.main a:nth-of-type(3)::before,
header.top nav:not(.main) a:nth-of-type(3)::before{content:"💻"}
header.top nav.main a:nth-of-type(4)::before{content:"🎓"}

/* ---------- chino: letra un poco más grande ---------- */
html[lang^="zh"] header.top nav.main a,
html[lang^="zh"] header.top nav.main button.btn.lang,
html[lang^="zh"] header a.volver,
html[lang^="zh"] header.top nav:not(.main) a,
html[lang^="zh"] header.top nav:not(.main) button.btn.lang{
  font-size:17px;padding:10px 16px;letter-spacing:.04em;
}

/* ---------- móvil ---------- */
@media (max-width:900px){
  header.top .wrap{flex-wrap:wrap}
  header.top nav.main{width:100%;margin-left:0}
  header.top nav:not(.main){width:100%;display:flex;flex-wrap:wrap;gap:8px}
  header a.volver{font-size:13.5px;padding:8px 12px}
}


/* la barra de las guías tenía fondo crema: la ponemos amarilla como el resto */
header.top{
  background:#ffd400;
  border-bottom:3px solid #141414;
}
header.top .wrap{padding-top:12px;padding-bottom:12px}

/* botones pequeños dentro del contenido de los cursos (Oír, Volver...) */
.chico,
button.chico,
header .chico{
  background:#141414 !important;
  color:#ffd400 !important;
  -webkit-text-fill-color:#ffd400 !important;
  border:3px solid #141414;border-radius:12px;
  box-shadow:3px 3px 0 rgba(20,20,20,.85);
  font-weight:800;
  transition:transform .14s, box-shadow .14s, background .14s;
}
.chico:hover,
button.chico:hover{
  background:#000;transform:translateY(-2px);
  box-shadow:5px 5px 0 rgba(20,20,20,.9);
}


/* =====================================================================
   MÓVIL: el menú se parte en dos líneas en vez de salirse de la pantalla
   (esta hoja se carga la última, así que aquí sí manda)
   ===================================================================== */
@media (max-width:900px){
  header.top .wrap{flex-wrap:wrap}
  header.top nav.main{
    flex-wrap:wrap;overflow:visible;justify-content:flex-start;
    width:100%;margin-left:0;gap:8px;padding-right:0;
  }
  header.top nav.main a,
  header.top nav.main button.btn.lang,
  header a.volver,
  header.top nav:not(.main) a{font-size:14px;padding:8px 11px}
  html[lang^="zh"] header.top nav.main a,
  html[lang^="zh"] header.top nav.main button.btn.lang{font-size:15px;padding:8px 11px}
}
@media (max-width:520px){
  header.top nav.main a,
  header.top nav.main button.btn.lang{font-size:13px;padding:7px 9px}
  header.top nav.main{gap:6px}
}


/* la línea divisoria de la cabecera no debe cortar los botones torcidos */
header.top{overflow:visible}
header.top .wrap{padding-bottom:16px}
header.top nav.main a, header.top nav.main button.btn.lang{position:relative;z-index:2}