:root{
  --pizarron:#16221C;
  --pizarron-2:#1E2E26;
  --pizarron-3:#233329;
  --tiza:#F4F1E8;
  --tiza-dim:#CFCBBE;
  --cuaderno:#EDE8DC;
  --cuaderno-2:#E4DECE;
  --cuaderno-linea:#AFC0D6;
  --margen-rojo:#C1594A;
  --amarillo:#EAC54F;
  --mostaza:#B9860E;
  --celeste:#5E9C92;
  --celeste-dim:#3F6E66;
  --ink:#1B2420;
  --ink-soft:#4B5850;
  --radius:14px;
  --sans:'Figtree',system-ui,sans-serif;
  --hand:'Kalam',cursive;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cuaderno);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;}
a{color:inherit;}
h1,h2,h3{font-family:var(--hand);font-weight:700;line-height:1.1;margin:0;}
p{line-height:1.65;margin:0 0 14px;}
code{font-family:var(--mono);background:rgba(27,36,32,.07);padding:1px 6px;border-radius:5px;font-size:.92em;}
.mono{font-family:var(--mono);}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:15px;
  padding:12px 22px;border-radius:999px;text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.btn-primary{background:var(--amarillo);color:var(--pizarron);box-shadow:0 5px 0 var(--mostaza);}
.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--mostaza);}
.btn-primary:disabled:hover{transform:none;}
.btn-ghost{background:transparent;border-color:rgba(27,36,32,.22);color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-ghost-dark{background:transparent;border-color:rgba(244,241,232,.3);color:var(--tiza);}
.btn-ghost-dark:hover{border-color:var(--tiza);}
.btn-sm{padding:8px 16px;font-size:13.5px;}

::selection{background:var(--amarillo);color:var(--pizarron);}

.skip-link{position:absolute;left:-9999px;background:var(--amarillo);color:var(--pizarron);font-weight:700;padding:12px 18px;border-radius:0 0 8px 0;z-index:200;text-decoration:none;}
.skip-link:focus{left:0;top:0;}

/* -------- animaciones -------- */
@keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes fadeUp{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:none;} }
@keyframes popIn{ from{opacity:0;transform:scale(.92);} to{opacity:1;transform:none;} }
@keyframes drawChalk{ from{stroke-dashoffset:400;} to{stroke-dashoffset:0;} }
@keyframes pulseRing{ 0%{box-shadow:0 0 0 0 rgba(234,197,79,.5);} 100%{box-shadow:0 0 0 14px rgba(234,197,79,0);} }
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important;}
}
.fade-up{animation:fadeUp .6s ease both;}
.pop-in{animation:popIn .35s cubic-bezier(.2,1.4,.4,1) both;}
.float{animation:floaty 4.5s ease-in-out infinite;}

/* -------- bot / mascota bubble -------- */
.bot-row{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px;}
.bot-avatar{width:56px;height:56px;flex:none;}
.bot-bubble{
  position:relative;
  background:var(--tiza);
  border:1px solid rgba(27,36,32,.1);
  border-radius:4px 16px 16px 16px;
  padding:14px 18px;
  font-size:15px;
  color:var(--ink);
  box-shadow:0 8px 20px -14px rgba(27,36,32,.4);
  max-width:52ch;
}
.bot-bubble strong{color:var(--celeste-dim);}

/* -------- code blocks -------- */
.code-block{
  background:var(--pizarron);
  color:var(--tiza-dim);
  font-family:var(--mono);
  font-size:13.6px;
  line-height:1.75;
  border-radius:11px;
  padding:16px 18px;
  overflow-x:auto;
  white-space:pre;
  margin:14px 0;
}
.code-block .kw{color:var(--amarillo);}
.code-block .str{color:#9FD1B0;}
.code-block .com{color:#7C8B83;font-style:italic;}
.code-block .fn{color:#7EC2E0;}
.code-block .num{color:#E39C9C;}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease, transform .55s ease;}
.reveal.show{opacity:1;transform:none;}