@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Kalam:wght@400;700&family=Nunito:wght@400;600;700;800&display=swap");

/* ============================================================================
   ESTILO TALLER — capa de tema compartida
   Lleva la estetica de index-prueba2.html (papel kraft sobre mesa de madera)
   al resto de la web SIN tocar el contenido ni la estructura de las paginas.

   MODELO: la mesa de madera es el fondo. TODO el contenido vive sobre hojas
   de papel kraft (.hero, .section-inner, .cta-bottom, tarjetas), asi que
   dentro de ellas manda la tinta oscura. Solo la barra de navegacion y el
   pie quedan sobre la madera desnuda, y ahi el texto va en crema.
   Un color no puede contrastar sobre papel claro Y sobre madera oscura a la
   vez: por eso importa saber sobre que se apoya cada cosa.

   Se enlaza DESPUES del <style> de cada pagina, por eso gana a igualdad de
   especificidad. Los !important estan donde la pagina original usa
   selectores mas especificos que estos.

   Los bloques de codigo se dejan OSCUROS a proposito: se leen como una
   pantalla apoyada sobre el papel y conservan el resaltado de sintaxis.
   ========================================================================= */

:root{
  /* --- paleta taller (identica a index-prueba2.html) --- */
  --wood1:#6f4a2e; --wood2:#5a3b24; --wood-dark:#432b1a;
  --paper:#e8dcc0; --paper2:#efe3ca; --paper-claro:#f4ecd6;
  --ink:#3a2c1e; --ink-soft:#6b5842; --line:#d8c7a4;
  --yellow:#f4c430; --yellow-d:#e0ad12; --note:#fff3a8;
  --red:#c2432c; --blue:#3f7fb8; --green:#5a9e5c; --purple:#7c6bb0;
  --marron:#8a5222;
  --font-poster:'Kalam',system-ui,cursive;
  --font-hand:'Caveat',cursive;
  --font:'Nunito',system-ui,sans-serif;

  /* --- remapeo de los tokens oscuros que ya usaban las paginas --- */
  --dark-900:#e8dcc0; --dark-800:#e8dcc0; --dark-700:#efe3ca;
  --dark-600:#d8c7a4; --dark-500:#c9b591;
  --white:#3a2c1e;
  --gray-300:#4a3a28; --gray-400:#6b5842; --gray-500:#7d6a52;
  --accent:#c2432c; --accent-dim:rgba(216,84,63,.14);
  --green-500:#3f7a3c; --amber-500:#96690f; --red-500:#c8442f;
  --font-main:'Nunito',system-ui,sans-serif;
}

/* ---------- la mesa ---------- */
body{
  font-family:var(--font)!important;
  color:var(--ink)!important;
  background:
    linear-gradient(rgba(55,37,22,.12), rgba(38,26,16,.30)),
    url("wood-bg.png") top center/100% auto repeat-y,
    #5a3b24!important;
}

/* ============================================================================
   HOJAS DE PAPEL — todo el contenido se apoya en una
   ========================================================================= */
/* Si una <section> ya trae su propio contenedor interno (*-inner), la seccion
   solo hace de espaciador y la hoja de papel es el contenedor. Si no lo trae,
   la hoja es la seccion misma. Este orden importa: antes .hero quedaba sobre
   la madera porque la regla generica de <section> iba despues y la pisaba. */
section:has(> [class$="-inner"]),
.section:has(> [class$="-inner"]),
header:has(> [class$="-inner"]){
  background:transparent!important;border:none!important;
  padding:.4rem 1.25rem!important;box-shadow:none!important;
  max-width:none!important;margin:0!important;
}
section:not(:has(> [class$="-inner"])),
.hero:not(:has(> [class$="-inner"])),
.hero-2,.cta-bottom,.page-header,.section-inner,
[class$="-inner"],
body > .wrap{
  position:relative;
  background:var(--paper) url("kraft-paper.png") center/560px!important;
  color:var(--ink)!important;
  border:none!important;
  border-radius:12px;
  box-shadow:inset 0 0 70px rgba(120,85,45,.16), 0 18px 34px rgba(0,0,0,.34);
  padding:clamp(1.6rem,4vw,3rem)!important;
  margin:1.6rem auto!important;
  max-width:1160px;
}

/* tarjetas: papel mas claro sobre la hoja */
.material-card,.problem-card,.project-card,.card,.panel,.box,.step-card,
.info-card,.tip,.note-box,.robot-card,.sesion-card,.kit-card,
.project-item,.feature-card,.resource-card{
  background:var(--paper-claro) url("kraft-paper_claro.png") center/300px!important;
  color:var(--ink)!important;
  border:none!important;
  border-radius:10px;
  box-shadow:0 8px 16px rgba(0,0,0,.28);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease;
}
.material-card:hover,.problem-card:hover,.project-card:hover,.card:hover,
.robot-card:hover,.sesion-card:hover,.kit-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 30px rgba(0,0,0,.34);
}

/* ---------- tipografia (sobre papel) ---------- */
h1,h2,h3,h4,.section-title,.hero-title,.page-title{
  font-family:var(--font-poster);line-height:1.12;color:var(--ink)!important;text-shadow:none!important;
}
.hero-title .highlight,.highlight{color:#8a5222!important}
.section-label,.hero-badge,.sec-kicker{
  font-family:var(--font-hand)!important;font-size:1.35rem!important;
  color:var(--marron)!important;letter-spacing:0!important;text-transform:none!important;
}
.section-subtitle,.hero-subtitle,.section-desc,.page-subtitle{
  font-family:var(--font-hand)!important;font-size:1.25rem!important;color:var(--ink-soft)!important;
}
p,li,td{color:var(--ink-soft)}
strong,b{color:var(--ink)}
a{color:inherit}

/* ============================================================================
   SOBRE LA MADERA DESNUDA — el pie
   El MENU del sitio ya NO se estiliza aqui: vive en menu-taller.css, que es
   el CSS literal del menu de la portada y se carga en todas las paginas.
   Estas reglas se quitaron porque sus !important pisaban al menu compartido
   (sobre todo .mobile-menu, que quedaba con tinta oscura sobre fondo oscuro).
   ========================================================================= */
footer,.footer{
  background:transparent!important;border:none!important;
  box-shadow:none!important;backdrop-filter:none!important;
}
footer,footer a,footer p,footer span,footer small,.footer-text,.footer-links a{
  color:#efe2c9!important;font-weight:700;
}
footer a:hover,.footer-links a:hover{color:var(--yellow)!important}

/* la barra secundaria de seccion (subnav) si sigue siendo cosa del tema */
.subnav{background:transparent!important;border:none!important;box-shadow:none!important}
.subnav-link{color:#efe2c9!important;font-weight:700}
.subnav-link:hover{color:#fff!important}
.subnav-link.active{color:var(--yellow)!important}

/* ---------- botones ---------- */
.btn,button.btn,a.btn,.btn-primary,.btn-project,.cta-actions a{
  font-family:var(--font-poster)!important;font-weight:700!important;
  background:var(--yellow)!important;color:#4a3410!important;
  border:none!important;border-radius:14px;
  box-shadow:0 5px 0 var(--yellow-d);
  transition:.1s;
}
.btn:hover,.btn-primary:hover,.btn-project:hover,.cta-actions a:hover{
  transform:translateY(2px);box-shadow:0 3px 0 var(--yellow-d);
}
.btn-secondary,.btn.secondary,.btn-outline{
  background:var(--red)!important;color:#fff!important;box-shadow:0 5px 0 #b23f2d;border:none!important;
}

/* ---------- chips, etiquetas y pildoras ---------- */
/* text-align a la izquierda: muchas de estas pastillas son <button>, y el
   navegador les pone text-align:center por defecto. En las de una linea no se
   nota, pero al partir en dos el texto quedaba centrado y descuadraba. */
.chip,.tag,.badge,.pin-badge,.card-badge,.project-tag,.robot-pill,.concept-tag{
  text-align:left!important;
  background:rgba(120,85,45,.12)!important;
  border:1px dashed var(--ink-soft)!important;
  color:var(--ink)!important;
  border-radius:100px;font-weight:700;
  text-shadow:none!important;
}
.hero-feature,.level-label,.hero-stat{border-radius:10px}
.hero-stat-value{color:var(--marron)!important}
.hero-stat-label{color:var(--ink-soft)!important}

/* ---------- separadores y tablas ---------- */
hr,.section-divider{border:none!important;height:2px;background:rgba(120,85,45,.22)!important}
table{color:var(--ink)}
th{background:rgba(120,85,45,.14)!important;color:var(--ink)!important}
td,th{border-color:var(--line)!important}

/* ============================================================================
   BLOQUES DE CODIGO — se quedan oscuros a proposito
   Son la "pantalla" del taller. Hay que reponerlos porque el remapeo de
   tokens (--white, --dark-800...) los habria aclarado.
   ========================================================================= */
pre,code,.code-block,.code-body,.code-header,.editor,.terminal,
.project-thumb,.microbit-visual-badge,.pin-letter{
  background:#1b1712!important;
  color:#e9e2d4!important;
}
pre,code,.code-block,.code-body,.editor,.terminal{
  font-family:'JetBrains Mono',ui-monospace,monospace!important;
}
.code-block,.editor,.terminal{
  border-radius:10px;
  box-shadow:0 12px 24px rgba(0,0,0,.40);
  border:1px solid rgba(255,255,255,.08)!important;
}
.code-header{
  background:#241e18!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  border-radius:10px 10px 0 0;
}
.code-block *,.code-body *,pre *{text-shadow:none!important}
/* resaltado de sintaxis: se mantiene como venia */
.kw{color:#c792ea!important} .fn{color:#82aaff!important} .var{color:#f7f0d8!important}
.num{color:#f78c6c!important} .str{color:#c3e88d!important} .cm{color:#8b9bb4!important}
.code-dot{border:none!important}
pre a,code a{color:inherit}

/* ---------- accesibilidad ---------- */
@media(prefers-reduced-motion:reduce){
  .material-card,.problem-card,.project-card,.card,.robot-card{transition:none}
}

/* ============================================================================
   MAS CONTENEDORES DE CONTENIDO -> hoja de papel
   Cada familia de paginas envuelve el contenido de forma distinta:
     *-inner   index.html (hero-inner, vota-inner, yt-inner, contact-inner...)
     .wrap     paginas de actividad 01-08 y login
   Al limitar *-inner a hijos directos de <section>, quedan fuera
   .navbar-inner y .footer-inner, que deben seguir sobre la madera desnuda.
   ========================================================================= */
section > [class$="-inner"],
section > div:only-child,
body > .wrap{
  position:relative;
  background:var(--paper) url("kraft-paper.png") center/560px!important;
  color:var(--ink)!important;
  border:none!important;
  border-radius:12px;
  box-shadow:inset 0 0 70px rgba(120,85,45,.16), 0 18px 34px rgba(0,0,0,.34);
  padding:clamp(1.4rem,3.4vw,2.6rem)!important;
  margin:1.4rem auto!important;
  max-width:1160px;
}
/* los adornos de fondo del hero antiguo (destellos, rejillas) sobran sobre papel */
.hero-grid-bg,.hero-bg-glow,.hero-bg-glow-2,.que-bg,.space-bg{display:none!important}

/* texto claro sobre botones de color saturado */
.btn-secondary,.btn.secondary,.btn-outline,.btn-red,.btn-danger,
[class*="btn"][style*="background:#c8442f"],[class*="btn"][style*="background:#6a5a95"]{
  color:#fff!important;
}

/* ============================================================================
   ULTIMOS CASOS DETECTADOS POR LA AUDITORIA
   ========================================================================= */
/* rotulos de categoria que quedan sobre la madera, fuera de una hoja */
[class*="category-label"],[class*="category-title"],[class*="kits-category"]{
  color:#f6ecd8!important;text-shadow:0 2px 0 rgba(0,0,0,.28);
}
[class*="category-label"]{color:var(--yellow)!important;font-family:var(--font-hand)!important}

/* enlaces de navegacion con color propio que caen sobre la madera */
/* (retirada: [class*="nav-link"] pisaba los enlaces del menu compartido) */

/* texto claro sobre cualquier boton/pastilla de color saturado */
/* .shop-link vive sobre rojo en unas paginas y sobre papel en otras: en vez de
   fijar el color del texto, se le da tratamiento completo de boton. */
.shop-link,.btn-comprar,[class*="btn"][class*="shop"],
button.primary,button.btn,.btn.primary,[class*="btn-"]:not(.btn-outline):not(.btn-secondary){
  background:var(--yellow)!important;color:#4a3410!important;
  border:none!important;border-radius:14px;box-shadow:0 4px 0 var(--yellow-d);
  font-family:var(--font-poster)!important;font-weight:700!important;
}
/* .shop-link nacio como enlace de texto suelto: la regla de arriba le da
   aspecto de boton pero no le daba relleno, asi que el texto se salia por las
   esquinas redondeadas. Se le da el relleno que le faltaba y forma de pastilla. */
.shop-link,.btn-comprar,[class*="btn"][class*="shop"]{
  padding:.45rem 1.05rem!important;
  line-height:1.15!important;
  border-radius:100px!important;
  white-space:nowrap;
  text-decoration:none!important;
  /* en servo.html el boton se estira a lo ancho de su columna: centrando el
     texto queda bien tanto si se estira como si se ajusta al contenido */
  justify-content:center;
}
.shop-link:hover,.btn-comprar:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--yellow-d)}

.btn-purple,.btn-danger,.btnlabel{background:var(--purple)!important;color:#fff!important;box-shadow:0 4px 0 #5f5290}
.btn-danger{background:var(--red)!important;box-shadow:0 4px 0 #b23f2d}
/* red de seguridad: cualquier boton sin estilo propio, tinta legible */
button{color:var(--ink)}

/* el ambar sobre tonos medios (#d8c7a4) necesita un punto mas de oscuridad */
summary,.summary,details > summary{color:#85610d!important}


/* Etiquetas que pueden quedar FUERA de una hoja: necesitan papel solido,
   no un translucido (sobre la madera un translucido sigue siendo madera). */
.level-chip,.level-label,.space-tag,.hero-stat,.hero-feature{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--paper-claro) url("kraft-paper_claro.png") center/240px!important;
  border:1.5px dashed var(--ink-soft)!important;
  color:var(--ink)!important;
  border-radius:10px;padding:.4rem 1rem;
  box-shadow:0 6px 12px rgba(0,0,0,.22);
  text-shadow:none!important;
}
.level-chip{border-radius:100px}

/* marca del logo en cualquiera de sus variantes de clase */
nav [class*="logo"] > span,nav [class*="brand"] > span,
.navbar [class*="logo"] > span,.navbar [class*="brand"] > span{color:var(--yellow)!important}

/* pastillas sobre color saturado */
.yt-play-pill,[class*="play-pill"]{color:#fff!important}

/* botones de utilidad sin estilo propio: pastilla de papel legible */
/* ...excluyendo los botones de la barra de navegacion, que viven sobre la
   madera y ya tienen su color crema mas arriba. */
button:not(.btn):not([class*="btn-"]):not(.primary):not([class*="shop"]):not([class*="nav"]):not(.steam-lang-btn):not(.mtoggle):not([class*="lang"]):not([class*="copy"]):not(.code-tab):not(.an-tool):not(.an-size):not(.an-color):not(.ci-swatch):not(.pet-opt){
  background:rgba(120,85,45,.14)!important;color:var(--ink)!important;
  border:1px dashed var(--ink-soft)!important;border-radius:100px;
  font-family:var(--font)!important;font-weight:700;
}

/* numeros de sesion de las paginas de relato: van sobre teal/morado saturado */
span.n,.session-num,.sesion-num{color:#fff!important}

/* migas de pan y enlaces de vuelta: viven sobre la madera */
.breadcrumb,.breadcrumb a,[class*="breadcrumb"],[class*="breadcrumb"] a,[class*="crumb"] a{
  color:#e7d9bf!important;font-weight:700;
}
[class*="breadcrumb"] a:hover{color:var(--yellow)!important}

/* barra superior simple (login): vive sobre la madera */
.topbar,.topbar *{color:#efe2c9!important}
.topbar a{font-weight:700}

/* ============================================================================
   La barra y el pie NUNCA son hoja de papel, se llame como se llame su
   contenedor interno. Se excluyen por contexto (dentro de nav/footer) y no
   por nombre de clase, que varia entre familias de pagina.
   ========================================================================= */
nav [class$="-inner"],footer [class$="-inner"],
.navbar [class$="-inner"],.footer [class$="-inner"],
nav [class$="-inner"] *,footer [class$="-inner"] *{
  background-image:none!important;
}
nav [class$="-inner"],footer [class$="-inner"],
.navbar [class$="-inner"],.footer [class$="-inner"]{
  background-color:transparent!important;
  box-shadow:none!important;border-radius:0!important;
  padding:.6rem 1.25rem!important;margin:0 auto!important;
}

/* rotulillo de seccion de las paginas de relato */
.sec-k,span.sec-k{color:#8a5222!important}

/* ============================================================================
   Las migas de pan aparecen en dos sitios: sobre la madera (crema, arriba) y
   DENTRO del hero o de una hoja (tinta). Esta regla, mas especifica, cubre el
   segundo caso; no se puede negar un ancestro en CSS, asi que se invierte.
   ========================================================================= */
.hero [class*="breadcrumb"],.hero [class*="breadcrumb"] a,.hero [class*="breadcrumb"] span,
[class$="-inner"] [class*="breadcrumb"],[class$="-inner"] [class*="breadcrumb"] a,
[class$="-inner"] [class*="breadcrumb"] span,
body > .wrap [class*="breadcrumb"],body > .wrap [class*="breadcrumb"] a,
.hero [class*="crumb"] a,[class$="-inner"] [class*="crumb"] a{
  color:var(--ink-soft)!important;font-weight:700;
}
.hero [class*="breadcrumb"] a:hover,[class$="-inner"] [class*="breadcrumb"] a:hover{color:var(--marron)!important}

/* botones "fantasma" sobre papel */
.btn.ghost,.btn-ghost,a.ghost{
  background:rgba(120,85,45,.10)!important;color:var(--ink)!important;
  border:1.5px dashed var(--ink-soft)!important;box-shadow:none!important;
}

/* los rotulos de categoria tambien pueden caer DENTRO de una hoja */
.hero [class*="category-label"],[class$="-inner"] [class*="category-label"],
section [class*="category-label"]{color:var(--marron)!important;text-shadow:none!important}
.hero [class*="category-title"],[class$="-inner"] [class*="category-title"],
section [class*="category-title"]{color:var(--ink)!important;text-shadow:none!important}

/* el boton fantasma de las paginas de relato usa a.btn.ghost (0,2,1) */
a.btn.ghost,a.btn-ghost{
  background:rgba(120,85,45,.10)!important;color:var(--ink)!important;
  border:1.5px dashed var(--ink-soft)!important;box-shadow:none!important;
}

/* ============================================================================
   MIGA DE PAN: aparece dentro del hero, fuera de el, sobre papel y sobre
   madera segun la pagina. En vez de perseguir cada contexto, se le da su
   propia pastilla de papel y asi es legible siempre.
   ========================================================================= */
[class*="breadcrumb"],.crumbs{
  display:inline-flex!important;align-items:center;gap:.4rem;flex-wrap:wrap;
  background:var(--paper-claro) url("kraft-paper_claro.png") center/240px!important;
  border:1.5px dashed var(--ink-soft)!important;border-radius:100px;
  padding:.3rem .9rem!important;width:auto!important;
  box-shadow:0 4px 10px rgba(0,0,0,.20);
}
[class*="breadcrumb"],[class*="breadcrumb"] a,[class*="breadcrumb"] span,.crumbs a{
  color:var(--ink-soft)!important;font-weight:700;text-shadow:none!important;
}
[class*="breadcrumb"] a:hover{color:var(--marron)!important}
[class*="breadcrumb"] a[class*="breadcrumb"]{display:inline!important;background:none!important;
  border:none!important;padding:0!important;box-shadow:none!important}

/* la subnav tampoco es hoja de papel */
.subnav [class$="-inner"],.subnav-inner{
  background-color:transparent!important;background-image:none!important;
  box-shadow:none!important;border-radius:0!important;
}
.subnav-link,.subnav a{color:#efe2c9!important}
.subnav-link.active,.subnav a.active{color:var(--yellow)!important}

/* botones de compra: fondo verde/rojo saturado -> texto claro */
/* .buy-btn esta sobre papel en unas paginas y sobre color en otras: en vez
   de fijar el color del texto se le da el boton completo, que vale siempre. */
.buy-btn,a.buy-btn,[class*="comprar"]{
  background:var(--yellow)!important;color:#4a3410!important;
  border:none!important;border-radius:14px;box-shadow:0 4px 0 var(--yellow-d);
  font-family:var(--font-poster)!important;font-weight:700!important;
}

/* ============================================================================
   PANTALLAS SIMULADAS (OLED, barras de lectura analogica, visor del robot).
   Igual que los bloques de codigo, se dejan oscuras A PROPOSITO: representan
   una pantalla encendida apoyada sobre el papel. Se les repone el contraste
   interno, que el remapeo de tokens habria aclarado.
   ========================================================================= */
.oled-screen,[class*="oled-"],[class*="analog-bar"],[class*="display"],
.screen,.visor,[class*="lcd"]{
  background:#141a14!important;border-radius:8px;
  box-shadow:inset 0 0 18px rgba(0,0,0,.6), 0 8px 16px rgba(0,0,0,.34);
}
[class*="oled-"] *,[class*="analog-bar"] *,.screen *,.visor *{text-shadow:none!important}
[class*="oled-title"],[class*="oled-line"],.screen,.visor{color:#8ef0a0!important}
[class*="oled-line-dim"],[class*="-dim"]{color:#5aa86a!important}
[class*="analog-bar-val"]{color:#8ef0a0!important}

/* --- ultimos casos sueltos detectados por la auditoria --- */
/* texto claro que quedaba sobre fondo amarillo de marca */
[style*="background:#f4c430"],[style*="background: #f4c430"],
[class*="badge"][class*="warn"],.pill-amarilla{color:#4a3410!important}
/* rotulos dentro de una pantalla simulada: van en verde de fosforo */
[class*="oled-"] .section-label,[class*="oled-"] [class*="label"],
.screen .section-label,[class*="display"] [class*="label"]{color:#8ef0a0!important}
/* negritas sueltas sobre la madera en las paginas de relato */
body > b,body > p > b,section > b,section > p > b{color:#f0e2c6!important}

/* ============================================================================
   RECORTES CLAROS SOBRE PAPEL CLARO
   Fotos de producto sin fondo (beebot, tale-bot, mtiny...) que se recortaron
   para lucir sobre fondo oscuro. Sobre el papel kraft pierden el borde, asi
   que se les da sombra para despegarlos de la hoja.
   ========================================================================= */
img[src*="nobg"],img[src*="-cut"],.robot-card img,.kit-card img,
.comp img,.product-img,[class*="producto"] img{
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.30)) drop-shadow(0 1px 2px rgba(90,60,30,.35));
}

/* ============================================================================
   AIRE ENTRE HOJAS
   Dos causas del hueco enorme entre secciones:
   1) El hero traia min-height:100vh del diseno anterior. Sobre fondo oscuro
      no se notaba; convertido en hoja de papel deja ~130px de papel vacio
      arriba y abajo del contenido, porque ademas centra en vertical.
   2) El margen entre hojas (1.6rem) sumado al padding de la <section>.
   ========================================================================= */
.hero{min-height:0!important}
/* El hero venia como display:flex y su hoja era un item con flex:0 1 auto, asi
   que se ajustaba al ANCHO DEL CONTENIDO (1147px) en vez de estirarse hasta el
   tope de 1160px: quedaba mas estrecha que las secciones de abajo. Como bloque
   se comporta igual que el resto. */
.hero:has(> [class$="-inner"]){display:block!important}

.hero,.cta-bottom,.page-header,.section-inner,
[class$="-inner"],body > .wrap,
section:not(:has(> [class$="-inner"])){
  margin:.55rem auto!important;
}
section:has(> [class$="-inner"]),.section:has(> [class$="-inner"]){
  padding:0 1.25rem!important;
}
/* la barra y el pie no entran en este ajuste */
nav [class$="-inner"],footer [class$="-inner"],
.navbar [class$="-inner"],.footer [class$="-inner"]{margin:0 auto!important}

/* ============================================================================
   SECCION DE PROGRAMACION
   ========================================================================= */

/* 1) El boton Copiar heredaba mi estilo de "boton de utilidad" (tinta oscura
      sobre papel), pero vive sobre la cabecera OSCURA del bloque de codigo:
      quedaba invisible. Aqui va en claro. */
/* Especificidad alta a proposito: la regla generica de "botones de utilidad"
   acumula una cadena de :not() que suma mas de lo esperado, y este boton vive
   sobre la cabecera OSCURA del bloque de codigo. Con html body no hay pelea. */
html body .code-header .code-copy,
html body button.code-copy,
html body .code-copy{
  background:rgba(255,255,255,.10)!important;
  color:#e9e2d4!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:8px!important;
  font-family:var(--font)!important;font-weight:700;font-size:.78rem;
  padding:.3rem .85rem!important;cursor:pointer;transition:.15s;
}
html body .code-header .code-copy:hover,html body button.code-copy:hover{
  background:var(--yellow)!important;color:#4a3410!important;
  border-color:var(--yellow)!important;
}

/* 2) Las pestanas (MakeCode JS / MicroPython) tocaban el bloque de codigo */
.code-tabs{margin-bottom:14px!important;display:flex;gap:.6rem;flex-wrap:wrap}

/* 3) El video de la derecha arrancaba a la altura de las PESTANAS, no del
      bloque de codigo. Se baja lo que miden las pestanas mas su separacion. */
.code-layout{align-items:start!important}
.code-aside{margin-top:56px!important}

/* 4) Las tarjetas de ejemplo ahora llevan el mismo bloque de terminal que el
      de arriba: el contenedor deja de pintar fondo propio. */
.code-example-body{background:transparent!important;padding:0 1rem 1rem!important}
.code-example-body .code-block{border-radius:10px;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.34)}
.code-example-body .code-header{padding:.5rem .75rem!important;display:flex;align-items:center;justify-content:space-between}
.code-example-body .code-body{padding:.9rem 1rem!important;overflow-x:auto}
.code-example-body pre{background:transparent!important;margin:0;white-space:pre;font-size:.82rem;line-height:1.55}
.code-dots{display:flex;gap:6px;align-items:center}
.code-dot{width:11px;height:11px;border-radius:50%;display:inline-block}
.code-dot:nth-child(1){background:#ff5f57}
.code-dot:nth-child(2){background:#febc2e}
.code-dot:nth-child(3){background:#28c840}