@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Fira+Code:wght@400;500&display=swap');

:root{
  --bg: #f4f3ef;
  --paper: #fafaf7;
  --paper-2: #ecebe5;
  --ink: #263238;
  --ink-soft: #68747a;
  --muted: #939da2;
  --border: #dedfd8;
  --border-strong: #c4c8c1;
  --accent: #5f8175;
  --accent-2: #4d6a60;
  --sel: #dce8e2;
  --gold: #b08a5c;
  --good: #4d8a67;
  --bad: #b0574c;
  --shadow: 0 1px 2px rgba(38,50,56,.04), 0 6px 20px rgba(38,50,56,.06);
  --radius: 10px;
  --serif: 'STIX Two Text', 'Cambria', Georgia, 'Times New Roman', serif;
  --mono: 'Fira Code', 'Consolas', monospace;
}

:root[data-theme="dark"]{
  --bg: #1a1e1d;
  --paper: #232827;
  --paper-2: #2c3230;
  --ink: #e7ebe9;
  --ink-soft: #b2bcb8;
  --muted: #7f8a86;
  --border: #363d3b;
  --border-strong: #4a524f;
  --accent: #8fb3a4;
  --accent-2: #a8c8ba;
  --sel: #2f423a;
  --gold: #c8a67c;
  --good: #74be93;
  --bad: #dd8b81;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #1a1e1d;
    --paper: #232827;
    --paper-2: #2c3230;
    --ink: #e7ebe9;
    --ink-soft: #b2bcb8;
    --muted: #7f8a86;
    --border: #363d3b;
    --border-strong: #4a524f;
    --accent: #8fb3a4;
    --accent-2: #a8c8ba;
    --sel: #2f423a;
    --gold: #c8a67c;
    --good: #74be93;
    --bad: #dd8b81;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{ box-sizing: border-box; }
html{ background: var(--bg); }
body{
  margin: 0;
  font-family: var(--serif);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}

.container{ max-width: 880px; margin: 0 auto; padding: 28px 20px 90px; }

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  background: var(--paper);
  position: sticky; top:0; z-index: 20;
}
.brand{ display:flex; align-items:baseline; gap:8px; text-decoration:none; color:var(--ink); }
.brand .mark{ font-weight:700; font-size:19px; letter-spacing:.2px; }
.brand .sub{ font-size:12px; color:var(--muted); font-style: italic; }
.top-actions{ display:flex; align-items:center; gap:14px; }
.chip{
  font-size:13px; color: var(--ink-soft); background: var(--paper-2);
  border:1px solid var(--border); border-radius: 999px; padding:5px 12px;
  display:flex; align-items:center; gap:7px;
}
.chip b{ color: var(--accent); font-weight:600; }

/* Interruptores. Cada uno refleja SU propio estado con la clase .prendido, que la
   pone el JS. Antes la perilla se movía con una regla atada al tema oscuro, asi que
   el de sonido mostraba el estado del tema en vez del suyo. */
.switch{
  width:40px; height:24px; border-radius:999px; border:1px solid var(--border-strong);
  background: var(--paper-2); position:relative; cursor:pointer; padding:0; flex-shrink:0;
  transition: background .18s ease, border-color .18s ease;
}
.switch .knob{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background: var(--muted); transition: transform .2s cubic-bezier(.2,.8,.3,1.3), background .18s ease;
}
.switch.prendido{ background: var(--sel); border-color: var(--accent); }
.switch.prendido .knob{ background: var(--accent); transform: translateX(16px); }
.switch:hover{ border-color: var(--accent); }
.switch:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------- Cards / paper blocks ---------- */
.paper{
  background: var(--paper); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero{
  padding: 26px 26px 22px; margin: 22px 0 26px;
}
.hero h1{ margin:0 0 8px; font-size: 26px; font-weight:700; }
.hero p{ margin:0; color:var(--ink-soft); font-size:15px; max-width: 60ch; }

.hub-card{
  background: var(--paper); border:1px solid var(--border); border-radius: var(--radius);
  padding:20px 22px; margin-bottom: 16px; cursor:pointer; transition:.15s border-color, .15s transform;
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
}
.hub-card:hover{ border-color: var(--accent); }
.hub-card.disabled{ opacity:.55; cursor:not-allowed; }
.hub-card .hc-left{ display:flex; align-items:center; gap:16px; }
.hub-card .hc-icon{
  width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: var(--paper-2); font-size:20px; flex-shrink:0; border:1px solid var(--border);
}
.hub-card h3{ margin:0 0 3px; font-size:17px; }
.hub-card .hc-meta{ font-size:13px; color:var(--muted); }

/* ---------- Unit section ---------- */
.unit-block{ margin-bottom: 30px; }
.unit-head{ display:flex; align-items:baseline; justify-content:space-between; margin: 0 2px 12px; }
.unit-head h2{ font-size:19px; margin:0; font-weight:600; }
.unit-head .unit-progress{ font-size:13px; color:var(--muted); }

.topic-row{
  display:flex; align-items:center; gap: 14px; padding: 14px 18px;
  border:1px solid var(--border); border-radius: 9px; margin-bottom:8px;
  background: var(--paper); cursor:pointer; transition:.15s;
}
.topic-row:hover{ border-color: var(--accent); }
.topic-row.locked{ opacity:.5; cursor:not-allowed; }
.topic-row.done{ border-color: var(--good); }
.topic-num{
  font-family: var(--mono); font-size:13px; color: var(--muted); width:34px; flex-shrink:0;
  text-align:center;
}
.topic-row.done .topic-num{ color: var(--good); }
.topic-check{
  width:22px; height:22px; border-radius:50%; border:1.5px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px;
}
.topic-row.done .topic-check{ background: var(--good); border-color: var(--good); color:#fff; }
.topic-title{ flex:1; }
.topic-title .tt-name{ font-size:15px; }
.topic-title .tt-bar{
  height:4px; border-radius:2px; background: var(--paper-2); margin-top:6px; overflow:hidden;
  border:1px solid var(--border);
}
.topic-title .tt-fill{ height:100%; background: linear-gradient(90deg, var(--accent), var(--gold)); }
.topic-badge{ font-size:11px; padding:3px 9px; border-radius:999px; border:1px solid var(--border); color:var(--muted); }
.topic-badge.recommended{ color:#fff; background: var(--accent); border-color:var(--accent); }

/* ---------- Practice page ---------- */
.crumbs{ font-size:13px; color:var(--muted); margin-bottom:10px; }
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--accent); }

.theory-block{ padding:24px 26px; margin-bottom:22px; }
.theory-block h2{ margin-top:0; font-size:21px; }
.theory-block h4{ font-size:15px; color:var(--accent); margin:18px 0 6px; }
.theory-block p{ margin:0 0 12px; color: var(--ink); }
.theory-block .math-box{
  background: var(--paper-2); border:1px solid var(--border); border-radius:8px;
  padding:12px 16px; margin:14px 0; font-family: var(--mono); font-size:14.5px;
  overflow-x:auto;
}
.theory-block .example{
  border-left:3px solid var(--gold); padding: 4px 0 4px 16px; margin: 16px 0; color:var(--ink-soft);
}
.theory-block .example .ex-label{ font-weight:600; color:var(--ink); font-style:italic; }

.tier-nav{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.tier-pill{
  padding:8px 16px; border-radius:999px; border:1px solid var(--border); background:var(--paper);
  font-size:13px; cursor:pointer; color:var(--ink-soft);
}
.tier-pill.active{ background: var(--accent); color:#fff; border-color: var(--accent); }
.tier-pill .done-mark{ color: var(--good); margin-left:4px; }

.ex-card{ padding:22px 24px; margin-bottom:14px; }
.ex-card .ex-title{ font-size:15px; font-weight:600; margin-bottom:4px; }
.ex-card .ex-statement{
  background: var(--paper-2); border:1px solid var(--border); border-radius:8px;
  padding:12px 16px; margin:10px 0 18px; font-size:15px;
}
.step-label{ font-size:12.5px; color:var(--muted); margin-bottom:6px; letter-spacing:.3px; text-transform:uppercase; }
.step-prompt{ font-size:15px; margin-bottom:12px; }
input[type=text].answer-input{
  width:100%; padding:11px 14px; border-radius:8px; border:1px solid var(--border-strong);
  background: var(--bg); color:var(--ink); font-size:15px; font-family: var(--serif);
}
input[type=text].answer-input:focus{ outline:none; border-color: var(--accent); }
.choices{ display:flex; flex-direction:column; gap:8px; }
.choice-btn{
  text-align:left; padding:11px 14px; border-radius:8px; border:1px solid var(--border-strong);
  background: var(--bg); color:var(--ink); cursor:pointer; font-size:14.5px; font-family:var(--serif);
}
.choice-btn:hover{ border-color: var(--accent); }
.choice-btn.selected{ border-color: var(--accent); background: var(--sel); }

.row-btns{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
button{ font-family: var(--serif); font-size:14px; font-weight:600; padding:10px 18px; border-radius:8px; border:none; cursor:pointer; }
.btn-primary{ background: var(--accent); color:#fff; }
.btn-primary:hover{ background: var(--accent-2); }
.btn-ghost{ background:transparent; border:1px solid var(--border-strong); color:var(--ink); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }

.feedback{ margin-top:14px; padding:12px 15px; border-radius:8px; font-size:14px; display:none; line-height:1.5; }
.feedback.ok{ display:block; background: color-mix(in srgb, var(--good) 14%, var(--paper)); border:1px solid var(--good); color: var(--good); }
.feedback.err{ display:block; background: color-mix(in srgb, var(--bad) 12%, var(--paper)); border:1px solid var(--bad); color: var(--bad); }
.feedback.hint{ display:block; background: color-mix(in srgb, var(--gold) 16%, var(--paper)); border:1px solid var(--gold); color: var(--ink); }

/* ---------- Celebration / completion ---------- */
.complete-box{ text-align:center; padding: 50px 20px; }
.complete-box .big-check{
  width:76px; height:76px; border-radius:50%; background: var(--good); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:34px; margin:0 auto 18px;
}
.complete-box h2{ margin:0 0 8px; font-size:22px; }
.complete-box p{ color:var(--muted); margin: 0 0 6px; }
.complete-box .avance-linea{ color: var(--accent); font-weight:600; margin: 10px 0 22px; }
.next-rec{
  display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius:10px;
  border:1px solid var(--border); background: var(--paper-2); margin-top:8px; cursor:pointer;
}
.next-rec:hover{ border-color:var(--accent); }

@keyframes pop{ 0%{ transform: scale(.6); opacity:0; } 60%{ transform: scale(1.08); } 100%{ transform: scale(1); opacity:1; } }
.pop-in{ animation: pop .35s ease; }

.footer-note{ text-align:center; font-size:12px; color: var(--muted); margin-top:30px; }
.hidden{ display:none !important; }

/* ---------- Teoría en profundidad ---------- */
.idea-clave{
  font-size:16.5px; line-height:1.5; border-left:3px solid var(--accent);
  padding:2px 0 2px 16px; margin:0 0 18px; color:var(--ink);
}
.theory-block ul{ margin:8px 0 14px; padding-left:22px; }
.theory-block li{ margin-bottom:7px; }
.theory-block ul.errores{ list-style:none; padding-left:0; }
.theory-block ul.errores li{
  position:relative; padding-left:26px; color:var(--ink-soft); font-size:14.5px;
}
.theory-block ul.errores li::before{
  content:'✗'; position:absolute; left:6px; top:0; color:var(--bad); font-weight:700;
}
.theory-block h4{ display:flex; align-items:center; gap:8px; }
.paso-detalle{
  background: var(--paper-2); border:1px solid var(--border); border-left:3px solid var(--gold);
  border-radius:6px; padding:10px 14px; margin:10px 0; font-size:14.5px;
}
.paso-detalle b{ color: var(--accent); }

/* Puntitos de progreso dentro de un ejercicio */
.pasos-guia{ display:flex; gap:6px; margin:4px 0 14px; }
.paso-punto{
  width:26px; height:4px; border-radius:2px; background: var(--border);
  transition: background .3s ease, transform .3s ease;
}
.paso-punto.ok{ background: var(--good); }
.paso-punto.actual{ background: var(--accent); transform: scaleY(1.6); }

/* ---------- Tiza, el gatito ---------- */
/* Trazo fino y parejo, como el dibujo hecho a mano del que sale. */
.mascota-wrap{ display:inline-flex; align-items:center; justify-content:center; }
.gatito{ overflow:visible; }
.g-linea{
  fill:none; stroke: var(--ink); stroke-width:4.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.g-fina{ stroke-width:3.4; }
.g-bigote{ stroke-width:3; }
.g-relleno{ fill: var(--ink); }
.g-nariz{ fill: var(--ink); stroke: var(--ink); stroke-width:2.4; stroke-linejoin:round; }
.g-brillo{ fill: var(--paper); }
.g-brillo-boca{ fill:none; stroke: var(--paper); stroke-width:2.4; stroke-linecap:round; }
.g-chispa{ fill:none; stroke: var(--accent); stroke-width:4; stroke-linecap:round; }
.g-zzz-txt{ fill: var(--muted); font-family: var(--serif); font-size:20px; font-style:italic; }

@keyframes g-parpadear{ 0%,93%,100%{ transform: scaleY(1); } 96.5%{ transform: scaleY(.08); } }
.g-parpadeo{ transform-origin: center 88px; animation: g-parpadear 5.2s infinite; }

/* Movimientos de la cabeza entera: sin cuerpo, la expresión la lleva el balanceo. */
.gatito{ transform-origin: 50% 85%; }
@keyframes g-ladear{ 0%,100%{ transform: rotate(-2.5deg); } 50%{ transform: rotate(2.5deg); } }
.g-ladea{ animation: g-ladear 3s ease-in-out infinite; }

@keyframes g-flotar{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-5px); } }
.g-flota{ animation: g-flotar 2.3s ease-in-out infinite; }

@keyframes g-saltar{
  0%,55%,100%{ transform: translateY(0) scale(1,1); }
  20%{ transform: translateY(-9px) scale(.97,1.04); }
  40%{ transform: translateY(-2px) scale(1.04,.96); }
}
.g-salta{ animation: g-saltar 1.1s cubic-bezier(.3,.8,.4,1) infinite; }

@keyframes g-pensar{ 0%,70%,100%{ transform: rotate(0deg); } 25%,55%{ transform: rotate(-7deg); } }
.g-piensa{ animation: g-pensar 4s ease-in-out infinite; }

@keyframes g-respirar{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.035); } }
.g-respira{ animation: g-respirar 3.6s ease-in-out infinite; }

@keyframes g-zzz-flota{ 0%{ opacity:0; transform: translate(0,5px); } 40%{ opacity:1; } 100%{ opacity:0; transform: translate(8px,-14px); } }
.g-zzz-txt{ animation: g-zzz-flota 2.6s ease-out infinite; }
.g-zzz-2{ animation-delay: 1.1s; }

@keyframes g-chispear{ 0%,100%{ opacity:.25; transform: scale(.8); } 50%{ opacity:1; transform: scale(1.15); } }
.g-chispa{ transform-origin: center; animation: g-chispear 1.1s ease-in-out infinite; }
.g-chispa-2{ animation-delay: .45s; }

@keyframes g-entrar{ from{ opacity:0; transform: scale(.85) translateY(6px); } to{ opacity:1; transform:none; } }
.g-entrada{ animation: g-entrar .34s cubic-bezier(.2,.9,.3,1.35); }

/* A tamaño chico (el logo de la barra) el trazo fino se deshace. */
.g-mini .g-linea{ stroke-width:8; }
.g-mini .g-fina{ stroke-width:6.5; }
.g-mini .g-bigote{ stroke-width:6; }
.g-mini .g-nariz{ stroke-width:5; }

/* Tiza contesta cuando lo tocás */
.mascota-tocable{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mascota-tocable:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:12px; }
.mascota-tocable:active .gatito{ transform: scale(.94); }
@keyframes g-maullar{
  0%   { transform: scale(1,1)      translateY(0); }
  18%  { transform: scale(1.06,.92) translateY(3px); }
  42%  { transform: scale(.95,1.09) translateY(-8px); }
  68%  { transform: scale(1.03,.97) translateY(1px); }
  100% { transform: scale(1,1)      translateY(0); }
}
.g-miau{ animation: g-maullar .56s cubic-bezier(.25,.8,.35,1.2) !important; }

/* El gatito como logo, al lado del nombre */
.brand{ gap:10px; }
.brand-gato{ display:flex; align-items:center; flex-shrink:0; }
.brand-gato .mascota-wrap{ line-height:0; }

/* Aviso de que esto no es oficial. Va arriba y se lee, no escondido en el pie. */
.aviso-no-oficial{
  background: var(--paper-2); border:1px solid var(--border); border-left:3px solid var(--gold);
  border-radius: 8px; padding:12px 16px; margin: 0 0 30px;
  font-size:13px; color: var(--ink-soft); line-height:1.6;
}
.aviso-no-oficial b{ color: var(--ink); }

/* Globo de diálogo de Tiza */
.tiza-fila{ display:flex; align-items:flex-end; gap:14px; }
.tiza-globo{
  position:relative; background: var(--paper); border:1px solid var(--border);
  border-radius: 14px; padding:12px 16px; font-size:14.5px; color:var(--ink);
  box-shadow: var(--shadow); flex:1; min-width:0;
  animation: m-entrar .3s ease;
}
.tiza-globo::before{
  content:''; position:absolute; left:-7px; bottom:16px; width:12px; height:12px;
  background: var(--paper); border-left:1px solid var(--border); border-bottom:1px solid var(--border);
  transform: rotate(45deg);
}
.tiza-globo b{ color: var(--accent); }

/* ---------- Efectos de recompensa ---------- */
#confettiCanvas{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:9999; }
@keyframes latir{ 0%,100%{ transform:scale(1); } 40%{ transform:scale(1.12); } }
.late{ animation: latir .45s ease; }
@keyframes brillo-barra{
  from{ background-position: -140% 0; } to{ background-position: 240% 0; }
}
.tt-fill.creciendo::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.55) 50%, transparent 75%);
  background-size: 60% 100%; background-repeat:no-repeat;
  animation: brillo-barra 1.1s ease-out;
}
.tt-fill{ position:relative; overflow:hidden; transition: width .7s cubic-bezier(.2,.8,.3,1); }

/* ---------- Transiciones generales ---------- */
@keyframes aparecer{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.aparece{ animation: aparecer .38s cubic-bezier(.2,.8,.3,1) both; }
.aparece-1{ animation-delay:.04s; } .aparece-2{ animation-delay:.09s; }
.aparece-3{ animation-delay:.14s; } .aparece-4{ animation-delay:.19s; }
.aparece-5{ animation-delay:.24s; } .aparece-6{ animation-delay:.29s; }

.topic-row, .hub-card, .ex-card, .tier-pill, .choice-btn, button{
  transition: transform .16s cubic-bezier(.2,.8,.3,1), border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
/* En touch, tocar el texto de una tarjeta seleccionaba texto en vez de abrirla */
.topic-row, .hub-card, .tier-pill, .choice-btn, .next-rec, .anim-btn{
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ex-card{ -webkit-tap-highlight-color: transparent; }
#exerciseList .ex-card{ -webkit-user-select: none; user-select: none; }
.topic-row:hover, .hub-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
.topic-row:active, .hub-card:active, .ex-card:active{ transform: translateY(0) scale(.995); }
button:active{ transform: scale(.97); }
.choice-btn:hover{ transform: translateX(3px); }

@keyframes sacudir{ 0%,100%{ transform:translateX(0);} 20%{transform:translateX(-6px);} 40%{transform:translateX(5px);} 60%{transform:translateX(-3px);} 80%{transform:translateX(2px);} }
.sacude{ animation: sacudir .38s ease; }

@keyframes marcar{ from{ stroke-dashoffset: 40; } to{ stroke-dashoffset: 0; } }
.check-anim path{ stroke-dasharray:40; animation: marcar .45s ease-out .1s both; }

/* ---------- Animación conceptual por tema ---------- */
.anim-caja{
  background: var(--paper-2); border:1px solid var(--border); border-radius:10px;
  padding:14px; margin:18px 0; text-align:center;
}
.anim-caja canvas{ max-width:100%; height:auto; display:block; margin:0 auto; }
.anim-pie{ font-size:12.5px; color:var(--muted); margin-top:9px; font-style:italic; }
.anim-btn{
  margin-top:10px; font-size:12.5px; padding:6px 14px; border-radius:999px;
  border:1px solid var(--border-strong); background:var(--paper); color:var(--ink-soft); cursor:pointer;
}
.anim-btn:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- Portada ---------- */
.lp-hero{
  display:flex; align-items:center; gap:34px; margin: 18px 0 30px;
}
.lp-hero-txt{ flex:1; min-width:0; }
.lp-tag{
  display:inline-block; font-size:11.5px; letter-spacing:.8px; text-transform:uppercase;
  color: var(--accent); background: var(--sel); border-radius:999px; padding:5px 12px; margin-bottom:16px;
}
.lp-hero h1{
  margin:0 0 14px; font-size:38px; line-height:1.15; font-weight:700; letter-spacing:-.3px;
}
.lp-hero p{ margin:0; font-size:16px; color: var(--ink-soft); max-width: 54ch; line-height:1.65; }
.lp-hero p b{ color: var(--ink); }
.lp-cta-row{ display:flex; align-items:center; gap:16px; margin-top:26px; flex-wrap:wrap; }
.lp-cta{ font-size:16px; padding:13px 26px; border-radius:10px; }
.lp-nota{ font-size:12.5px; color: var(--muted); font-style:italic; }

/* Tiza es la marca: en la portada va primero y grande. En el HTML ya viene antes
   que el texto, asi que no hace falta invertir nada acá. */
.lp-hero-gato{ flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:12px; }
.lp-globo{
  background: var(--paper); border:1px solid var(--border); border-radius:14px;
  padding:9px 14px; font-size:13px; color: var(--ink-soft); box-shadow: var(--shadow);
  text-align:center; max-width: 210px;
}
.lp-globo b{ color: var(--accent); }

.lp-nums{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1px;
  background: var(--border); border:1px solid var(--border); border-radius: var(--radius);
  overflow:hidden; margin-bottom: 40px;
}
.lp-nums > div{ background: var(--paper); padding:20px 12px; text-align:center; }
.lp-nums b{ display:block; font-size:30px; font-weight:700; color: var(--accent); line-height:1.1; }
.lp-nums span{ display:block; font-size:12.5px; color: var(--muted); margin-top:5px; }

.lp-titulo{ font-size:20px; font-weight:600; margin: 0 0 18px; }

.lp-features{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-bottom: 44px;
}
.lp-feat{
  background: var(--paper); border:1px solid var(--border); border-radius: var(--radius);
  padding:20px 20px 22px; position:relative; overflow:hidden;
  transition: transform .18s cubic-bezier(.2,.8,.3,1), border-color .18s;
}
.lp-feat::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--accent); opacity:0; transition: opacity .18s;
}
.lp-feat:hover{ transform: translateY(-3px); border-color: var(--border-strong); }
.lp-feat:hover::before{ opacity:1; }
.lp-feat h3{ margin:0 0 8px; font-size:15.5px; font-weight:600; color: var(--accent); }
.lp-feat p{ margin:0; font-size:14px; color: var(--ink-soft); line-height:1.6; }

.lp-elegir{ margin-bottom: 10px; }
.hc-icon-txt{ font-size:14px !important; font-weight:700; letter-spacing:.5px; color: var(--accent); }

/* ---------- Navegación entre temas ---------- */
.crumbs-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.crumbs-row .crumbs{ margin-bottom:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tema-nav-mini{ display:flex; gap:6px; flex-shrink:0; }
.tnm{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--border);
  background: var(--paper); color: var(--ink-soft); cursor:pointer; font:inherit; font-size:14px;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.tnm:hover{ border-color: var(--accent); color: var(--accent); transform: scale(1.12); }
.tnm:active{ transform: scale(.88); }
.tnm[disabled]{ opacity:.28; cursor:default; transform:none; }

.tema-nav{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin: 36px 0 6px; }
.tn-btn{
  display:flex; align-items:center; gap:13px; text-align:left; width:100%;
  background: var(--paper); border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; cursor:pointer; font:inherit; color: var(--ink);
  position:relative; overflow:hidden;
}
.tn-btn::after{           /* destello que barre la tarjeta al pasar por arriba */
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(105deg, transparent 42%,
              color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 58%);
  transform: translateX(-130%); transition: transform .55s ease;
}
.tn-btn:hover{ border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.tn-btn:hover::after{ transform: translateX(130%); }
.tn-btn:active{ transform: translateY(0) scale(.97); }
.tn-next{ flex-direction: row-reverse; text-align:right; }
.tn-flecha{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--sel); color: var(--accent); font-size:16px;
  transition: transform .2s cubic-bezier(.2,.8,.3,1.4), background .2s, color .2s;
}
.tn-btn:hover .tn-flecha{ background: var(--accent); color:#fff; }
.tn-prev:hover .tn-flecha{ transform: translateX(-5px); }
.tn-next:hover .tn-flecha{ transform: translateX(5px); }
.tn-txt{ min-width:0; flex:1; }
.tn-txt small{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color: var(--muted); }
.tn-txt b{ display:block; font-size:14.5px; font-weight:600; margin-top:3px;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-ok{ flex-shrink:0; color: var(--good); font-size:13px; }
.tn-vacio{ visibility:hidden; }

@keyframes tn-latir{ 0%{ transform:scale(1); } 35%{ transform:scale(.93); } 70%{ transform:scale(1.03); } 100%{ transform:scale(1); } }
.tn-apretado{ animation: tn-latir .3s cubic-bezier(.2,.8,.3,1.4); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- Responsive / mobile ---------- */
@media (max-width: 560px){
  .topbar{ padding:10px 14px; flex-wrap:wrap; row-gap:8px; }
  .brand .sub{ display:none; }
  .brand .mark{ font-size:17px; }
  .top-actions{ gap:8px; flex-wrap:wrap; }
  .chip{ font-size:11.5px; padding:4px 9px; }
  .container{ padding:18px 14px 70px; }
  .hero{ padding:18px 16px; }
  .hero h1{ font-size:21px; }
  .theory-block{ padding:18px 16px; }
  .theory-block h2{ font-size:18px; }
  .ex-card{ padding:16px 16px; }
  .hub-card{ padding:15px 16px; flex-wrap:wrap; row-gap:8px; }
  .hub-card .hc-icon{ width:38px; height:38px; font-size:17px; }
  .tier-nav{ position:sticky; top:0; background:var(--bg); padding:8px 0; z-index:10; }
  .row-btns{ flex-direction:column; }
  .row-btns button{ width:100%; }
  .math-box{ font-size:13px; }
  /* El gato ya viene primero en el HTML, asi que 'column' lo deja arriba. */
  .lp-hero{ flex-direction: column; gap:18px; text-align:center; margin-top:8px; }
  .lp-hero h1{ font-size:27px; }
  .lp-hero h1 br{ display:none; }
  .lp-hero p{ font-size:15px; }
  .lp-cta-row{ justify-content:center; }
  .lp-cta{ width:100%; }
  .lp-nums b{ font-size:23px; }
  .lp-nums span{ font-size:11px; }
  .lp-features{ grid-template-columns: 1fr; gap:12px; }
  .tema-nav{ grid-template-columns: 1fr; }
  .tn-next{ flex-direction: row; text-align:left; }
}

/* En pantallas medianas las tarjetas de la portada bajan a dos columnas */
@media (max-width: 780px) and (min-width: 561px){
  .lp-features{ grid-template-columns: repeat(2, 1fr); }
  .lp-hero h1{ font-size:31px; }
}