/* ==========================================================================
   UNIFICAR LAS BOTONERAS DEL HÉROE
   Se carga la última: fija el TAMAÑO y la COLOCACIÓN de los botones,
   pero no los colores (cada tema pone los suyos).
   ========================================================================== */

/* el bloque de texto mide lo mismo en los tres temas */
.hero .wrap{max-width:660px !important}

/* grupo de botones: siempre en fila, con el mismo aire */
.hero .cta{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:12px !important;
  max-width:100% !important;
  margin-top:26px !important;
}
.hero .cta .btn{
  font-size:16.5px !important;
  padding:13px 18px !important;
  line-height:1.25 !important;
  border-radius:13px !important;
  white-space:nowrap !important;
  width:auto !important;
}

/* pastillas de confianza: mismo tamaño y misma rejilla */
.hero .trust{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  max-width:100% !important;
  margin-top:16px !important;
}
.hero .trust span{
  font-size:13.5px !important;
  padding:8px 13px !important;
  line-height:1.2 !important;
  border-radius:999px !important;
}

/* en pantallas medianas se reduce un poco para que sigan entrando dos */
@media (max-width:1200px){
  .hero .cta .btn{font-size:15px !important;padding:12px 14px !important}
}
@media (max-width:640px){
  .hero .cta .btn{white-space:normal !important;width:100% !important;text-align:center !important}
  .hero .trust span{font-size:13px !important}
}


/* mismo relleno interior del panel en los tres temas: así las pastillas
   se parten exactamente igual */
.hero .wrap{padding:30px 32px !important}

/* el titular y el párrafo, con el mismo ancho útil */
.hero h1{max-width:15ch !important}
.hero .lead{max-width:46ch !important}
@media (max-width:640px){
  .hero .wrap{padding:22px 18px !important}
  .hero h1, .hero .lead{max-width:none !important}
}


/* la sombra dura del panel se salía del héroe y overflow la cortaba:
   le damos aire abajo para que la sombra se vea entera */
.hero{
  padding-top:10px !important;
  padding-bottom:34px !important;
}
/* en split no hay panel, así que no hace falta ese aire extra */
html[data-tema="split"] .hero{padding-bottom:0 !important}
@media (max-width:900px){
  .hero{padding-bottom:24px !important}
}


/* =====================================================================
   El robot fantasma de fondo en las páginas que no tienen héroe
   (cursos, herramienta del nombre, guías). El héroe ya lo lleva encima.
   ===================================================================== */
body:not(:has(.hero)){
  background-image:url("/assets/robot-fondo.webp");
  background-repeat:no-repeat;
  background-position:right -10vw bottom -14vh;
  background-size:min(44vw,540px);
  background-attachment:fixed;
}
html[data-tema="noche"] body:not(:has(.hero)){
  background-image:url("/assets/robot-fondo-oscuro.webp");
}
@media (max-width:900px){
  body:not(:has(.hero)){
    background-size:78vw;
    background-position:right -12vw bottom -4vh;
  }
}



/* =====================================================================
   En monitores anchos el hero se estiraba de borde a borde: el texto se
   iba a la izquierda y el robot a la derecha, mientras las secciones de
   abajo quedan centradas en 1120px. Aqui se le da el mismo margen.
   ===================================================================== */
.hero{
  padding-left:max(24px, calc((100% - 1120px) / 2)) !important;
  padding-right:max(24px, calc((100% - 1120px) / 2)) !important;
}

/* =====================================================================
   El robot va pegado al panel, no al borde del contenedor.
   Hero = fila centrada: [panel] [robot] con el robot metido debajo del
   panel (margen negativo), asi el solape se ve en cualquier ancho.
   ===================================================================== */
.hero{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  min-height:0 !important;
}
.hero .wrap{order:1;margin:0 !important;flex:0 1 auto;z-index:2;min-width:0 !important}
.hero-fondo{
  position:relative !important;inset:auto !important;order:2;
  width:auto !important;height:auto !important;max-width:none !important;
  margin:0 0 0 -140px !important;
  display:block !important;pointer-events:none;
}
.hero-fondo img{
  height:min(64vh,560px) !important;width:auto !important;max-width:52vw !important;
  object-fit:contain !important;object-position:50% 50% !important;
  -webkit-mask-image:none !important;mask-image:none !important;
}
@media (max-width:900px){
  .hero{
    flex-direction:column !important;align-items:stretch !important;
    padding:14px 16px 26px !important;
  }
  .hero .wrap{
    box-sizing:border-box !important;
    width:100% !important;max-width:100% !important;
    margin:0 !important;padding:22px 16px !important;order:1;
  }
  .hero-fondo{margin:-16px 0 0 !important;order:2;width:100% !important}
  .hero-fondo img{height:min(30vh,220px) !important;max-width:86vw !important;margin:0 auto !important;display:block}
  .hero h1,.hero .lead{max-width:none !important}
  .hero h1 .grad{white-space:normal !important}
  .hero h1{overflow-wrap:anywhere}
  .hero .cta .btn{width:100% !important;justify-content:center !important}
}

/* =====================================================================
   LEGIBILIDAD
   Atkinson Hyperlegible: tipografia disenada para baja vision, con trazos
   mas gruesos y letras que no se confunden entre si. Se sirve desde el
   propio servidor (sin Google Fonts).
   ===================================================================== */
@font-face{
  font-family:"Atkinson";
  src:url("/assets/fuentes/atkinson-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Atkinson";
  src:url("/assets/fuentes/atkinson-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
body{
  font-family:"Atkinson","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif !important;
  font-size:17px !important;
  line-height:1.62 !important;
  font-weight:400;
  letter-spacing:.005em;
}
p,li,label,td,th,figcaption{
  font-size:1.02em;
  line-height:1.62;
}
h1,h2,h3,h4{letter-spacing:-.005em}
button,input,select,textarea{font-family:inherit !important}

/* =====================================================================
   MENU UNICO: misma fila en todas las paginas, sin desbordar
   ===================================================================== */
header nav, header > div{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  row-gap:8px;
}
header nav a, header nav button, header > div a, header > div button{
  white-space:nowrap;
}
/* el enlace de la pagina en la que estas, marcado */
@media (max-width:760px){
  header nav, header > div{justify-content:flex-start}
}
/* sin iconos automaticos en el menu: igual en todas las paginas */
header nav a::before, header nav button::before,
header > div a::before, header > div button::before{
  content:none !important;
  margin:0 !important;
}

/* cabecera: logo y menu alineados en la misma linea */
header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
/* =====================================================================
   Botón de tema: uno solo, alterna a cada pulsación
   ===================================================================== */
#btnTema{
  font-weight:800 !important;
  font-size:15.5px !important;
  padding:11px 16px !important;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  min-width:132px;justify-content:center;
}
#btnTema .tema-ico{font-size:15px;line-height:1}
#btnTema:active{transform:rotate(0) translateY(1px)}

/* =====================================================================
   Carácter del día en pincel (Ma Shan Zheng recortada a 7 caracteres: 2 KB)
   ===================================================================== */
@font-face{
  font-family:"Pincel";
  src:url("/assets/fuentes/pincel.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
.caracter-hz{
  font-family:"Pincel","Noto Serif SC","Songti SC","SimSun",serif !important;
  font-size:132px !important;
  letter-spacing:0;
}
@media (max-width:520px){
  .caracter-hz{font-size:96px !important}
}
/* sello del logo junto al nombre */
header .logo, header .brand{display:inline-flex;align-items:center;gap:9px}
header .logo-sello{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:block;object-fit:cover;
}
@media (max-width:520px){
  header .logo-sello{width:28px;height:28px}
}

/* =====================================================================
   Marca de la cabecera: cabeza del robot sin fondo + xiexie.es en pincel
   ===================================================================== */
@font-face{
  font-family:"PincelMarca";
  src:url("/assets/fuentes/pincel-marca.woff2") format("woff2");
  font-weight:400;font-display:swap;
}
header .logo, header .brand{display:inline-flex;align-items:center;gap:12px}
header .logo-sello{
  width:56px !important;height:56px !important;border-radius:50%;
  display:block;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 2px 3px rgba(20,20,20,.25));
}
header .logo, header .brand{
  font-family:"PincelMarca","Atkinson",system-ui,sans-serif !important;
  font-weight:400 !important;
  font-size:34px !important;
  line-height:1.1 !important;
  letter-spacing:.01em;
  text-transform:lowercase;
}

@media (max-width:640px){
  header .logo-sello{width:42px !important;height:42px !important}
  header .logo, header .brand{font-size:26px !important;gap:9px}
}
/* el 谢谢 de la marca: igual que los demás botones (fondo oscuro, letra clara) */
header .logo .cn, header .brand .cn{
  font-family:"PincelMarca",serif !important;
  font-size:.70em !important;
  padding:3px 13px !important;
  vertical-align:middle;
  border-radius:999px !important;
  background:#141414 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border:0 !important;
  font-weight:400 !important;
}
html[data-tema="noche"] header .logo .cn,
html[data-tema="noche"] header .brand .cn{
  background:#1b2130 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
/* el 谢谢 de la marca cuando el span no lleva clase (rutinas y herramienta del nombre) */
header .logo > span:not(.logo-sello),
header .brand > span:not(.logo-sello){
  font-family:"PincelMarca",serif !important;
  font-size:.70em !important;
  padding:3px 13px !important;
  vertical-align:middle;
  border-radius:999px !important;
  background:#141414 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border:0 !important;
  font-weight:400 !important;
  display:inline-block;
}
html[data-tema="noche"] header .logo > span:not(.logo-sello),
html[data-tema="noche"] header .brand > span:not(.logo-sello){
  background:#1b2130 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
/* pastillas del menu mas compactas: caben en una fila en cualquier página */
header nav a, header nav button,
header > div a.volver{
  font-size:13.5px !important;
  padding:8px 12px !important;
  line-height:1.15 !important;
}
header .logo-sello{width:46px !important;height:46px !important}
header .logo, header .brand{font-size:30px !important;gap:9px !important}
/* la marca no se encoge y el menu se pega a la derecha, sin solaparse */
header .logo, header .brand{
  flex:0 0 auto;
  white-space:nowrap;
  min-width:0;
}
header nav, header > div > nav{margin-left:auto}
header .logo .cn, header .brand .cn,
header .logo > span:not(.logo-sello){
  margin:0 !important;
  position:static !important;
}
/* =====================================================================
   Conmutador de idioma ES | 中文
   ===================================================================== */
.sel-idioma{display:inline-flex;align-items:center;gap:0;border-radius:999px;overflow:hidden}
.sel-idioma .btn.lang{
  font-size:13.5px !important;padding:8px 12px !important;
  border-radius:0 !important;min-width:44px;
  opacity:.75;
}
.sel-idioma .btn.lang.activo{
  opacity:1;
  outline:0;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:2px;
}
html[data-tema="noche"] .sel-idioma .btn.lang.activo{outline:0}

/* aviso flotante cuando el idioma aún no está disponible */
.aviso-idioma{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%, 20px);
  background:#141414;color:#ffd400;border:3px solid #141414;border-radius:14px;
  padding:12px 18px;font-weight:700;font-size:15px;max-width:min(92vw,520px);
  box-shadow:6px 6px 0 rgba(20,20,20,.5);z-index:200;
  opacity:0;pointer-events:none;transition:opacity .18s, transform .18s;
}
.aviso-idioma.visible{opacity:1;transform:translate(-50%, 0)}
html[data-tema="noche"] .aviso-idioma{
  background:#1b2130;color:#cfe6ff;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
/* =====================================================================
   Botones en tema oscuro: amarillo de la marca en vez del degradado cian
   ===================================================================== */
html[data-tema="noche"] .btn.primary,
html[data-tema="noche"] a.btn.primary,
html[data-tema="noche"] .card .btn,
html[data-tema="noche"] .caja .btn,
html[data-tema="noche"] .rutina-caja .btn{
  background:#ffd400 !important;
  color:#141414 !important;
  -webkit-text-fill-color:#141414 !important;
  border:0 !important;
  box-shadow:none !important;
  font-weight:800 !important;
}
html[data-tema="noche"] .btn.primary:hover,
html[data-tema="noche"] a.btn.primary:hover,
html[data-tema="noche"] .card .btn:hover,
html[data-tema="noche"] .caja .btn:hover,
html[data-tema="noche"] .rutina-caja .btn:hover{
  background:#ffe24d !important;
}
/* el resto de botones "principales" (lecciones, tarjetas, herramientas) */
html[data-tema="noche"] button.principal,
html[data-tema="noche"] .btn-caja button,
html[data-tema="noche"] .buscador button,
html[data-tema="noche"] .acciones button.principal,
html[data-tema="noche"] .leccion .btn,
html[data-tema="noche"] button#btnVer,
html[data-tema="noche"] #btnPlay{
  background:#ffd400 !important;
  color:#141414 !important;
  -webkit-text-fill-color:#141414 !important;
  border:0 !important;
  box-shadow:none !important;
  font-weight:800 !important;
}
html[data-tema="noche"] button.principal:hover,
html[data-tema="noche"] .btn-caja button:hover,
html[data-tema="noche"] button#btnVer:hover{
  background:#ffe24d !important;
}

/* la cabecera cabe en una fila tambien en pantallas medianas */
@media (max-width:1240px){
  header nav a, header nav button,
  header > div a.volver{font-size:12.8px !important;padding:7px 10px !important}
  header .logo, header .brand{font-size:25px !important;gap:8px !important}
  header .logo-sello{width:40px !important;height:40px !important}
  #btnTema{min-width:106px !important;font-size:13.5px !important;padding:8px 11px !important}
  .sel-idioma .btn.lang{font-size:12.5px !important;padding:7px 9px !important;min-width:38px !important}
}
/* tambien en amarillo el bloque del caracter, los numeros de leccion y la barra */
html[data-tema="noche"] .caracter-hz,
html[data-tema="noche"] .leccion .num,
html[data-tema="noche"] .post .num{
  background:#ffd400 !important;
  color:#141414 !important;
  -webkit-text-fill-color:#141414 !important;
  border:0 !important;
}
html[data-tema="noche"] .barra i{
  background:#ffd400 !important;
}
html[data-tema="noche"] .caracter-caja{
  border-color:#ffd400 !important;
}
/* =====================================================================
   Menu: pastillas centradas, sombra suave y conmutador de idioma limpio
   ===================================================================== */
header nav a, header nav button, header > div a.volver{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 2px 6px rgba(20,20,20,.16) !important;
}
header nav a:hover, header nav button:hover{
  box-shadow:0 4px 10px rgba(20,20,20,.22) !important;
}

/* conmutador ES | 中文: una sola pastilla, mitades redondeadas */
.sel-idioma{
  display:inline-flex;align-items:center;gap:0;
  background:#141414;
  border-radius:999px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(20,20,20,.16);
}
.sel-idioma .btn.lang{
  border-radius:0 !important;
  background:transparent !important;
  color:#fffbe8 !important;
  -webkit-text-fill-color:#fffbe8 !important;
  box-shadow:none !important;
  border:0 !important;
  min-width:46px;
  padding:8px 12px !important;
  opacity:.72;
}
.sel-idioma .btn.lang.activo{
  background:#ffd400 !important;
  color:#141414 !important;
  -webkit-text-fill-color:#141414 !important;
  opacity:1;
  text-decoration:none !important;
}
html[data-tema="noche"] .sel-idioma{
  background:#1b2130;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
html[data-tema="noche"] .sel-idioma .btn.lang{color:#e8eef7 !important;-webkit-text-fill-color:#e8eef7 !important}
html[data-tema="noche"] .sel-idioma .btn.lang.activo{
  background:#ffd400 !important;color:#141414 !important;-webkit-text-fill-color:#141414 !important;
}
/* =====================================================================
   Esquema de los tres pasos de la IA (artículo de programación)
   ===================================================================== */
.pasos-ia{display:flex;align-items:stretch;gap:12px;margin:26px 0 34px;flex-wrap:wrap}
.paso-ia{
  flex:1 1 210px;min-width:0;
  background:#fffbe8;border:4px solid #141414;border-radius:16px;
  box-shadow:7px 7px 0 #141414;padding:18px 18px 16px;
}
.paso-n{
  width:34px;height:34px;border-radius:50%;background:#141414;color:#ffd400;
  display:grid;place-items:center;font-weight:900;font-size:19px;margin-bottom:10px;
}
.paso-ia h3{margin:0 0 6px;font-size:19px;line-height:1.25}
.paso-ia p{margin:0;font-size:15.5px;line-height:1.5;color:#3b3b3b}
.paso-flecha{align-self:center;font-size:30px;font-weight:900;color:#141414;flex:0 0 auto}
html[data-tema="noche"] .paso-ia{
  background:#161b26;border-color:#ffd400;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
html[data-tema="noche"] .paso-ia h3{color:#fff}
html[data-tema="noche"] .paso-ia p{color:#c7d2e4}
html[data-tema="noche"] .paso-n{background:#ffd400;color:#141414}
html[data-tema="noche"] .paso-flecha{color:#ffd400}
@media (max-width:760px){
  .paso-flecha{display:none}
  .paso-ia{flex:1 1 100%}
}