/* IsAcademy — styles
   1. Design tokens             2. Base   3. Components (buttons, cards, chips, forms)
   4. Intro and opening         5. Layout and sections   6. Python console and debugger
   7. Assistant                 8. Responsive and reduced motion
   Colours live only in tokens: the shared ones in /assets/ds/tokens.css, IsAcademy's own in § 1 below. */

/* ===================== 1. Design tokens ===================== */
/* Fonts, palette, shape, type, motion and both themes come from the design system shared by every site
   (/assets/ds/tokens.css, loaded before this file). Only IsAcademy's own colours live here: the Python console
   and the robot hand and vignette of the opening. */
:root {
  --code-keyword: #8fb8ff; --code-string: var(--success); --code-comment: var(--gold-400);
  --robot: var(--ink-700); --robot-accent: #3aa8d8; --vignette: rgba(28, 37, 71, .08);
}
/* dark theme: the system preference unless the visitor chose light, or an explicit choice (both blocks stay identical) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --robot: #c9d4ff; --robot-accent: #5fd0ff; --vignette: rgba(5, 8, 22, .55); }
}
:root[data-theme="dark"] { --robot: #c9d4ff; --robot-accent: #5fd0ff; --vignette: rgba(5, 8, 22, .55); }

/* ===================== 2. Base ===================== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* the scrollbar space is always kept (also while an intro holds the page): every page has the same width, so the
   cross-fade between sites is never aborted by a viewport that changes size */
html { scroll-behavior: smooth; scroll-padding-top: 84px; interpolate-size: allow-keywords; scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.js body:not(.entered) { overflow: hidden; }
h1, h2, h3 { line-height: 1.15; margin: 0; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0 0 14px; }
a { color: var(--gold-text); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.narrow { width: min(780px, calc(100% - 32px)); }
.muted { color: var(--text-2); font-size: 14px; }
.center { text-align: center; }
.eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; margin-bottom: 12px; }
.lead { font-size: clamp(17px, 1.6vw, 19px); color: var(--text-2); }
h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; }
@keyframes blink { 50% { opacity: 0; } }
/* moving between the portada, IsProfile and IsAcademy (same origin) is a soft cross-fade, as in /assets/ds/base.css */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; animation-timing-function: var(--ease-out); }
}

/* reveal on scroll: a short rise with a natural ease, staggered by --d */
.reveal { opacity: 1; transform: none; transition: opacity .6s var(--ease-out) var(--d, 0s), transform .6s var(--ease-out) var(--d, 0s); }
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.in { opacity: 1; transform: none; }

/* smooth opening of every <details> (FAQ, subjects) where the browser supports it */
details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--ease-out), content-visibility .35s allow-discrete; }
details[open]::details-content { block-size: auto; }

/* ===================== 3. Components ===================== */
/* buttons: a 1 px lift and a soft shadow on hover, a small press on click */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; line-height: 1.3;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: transparent; font-size: 15px; font-weight: 500; color: var(--text);
  text-decoration: none; transition: transform .2s var(--ease-out), box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.btn:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.btn-primary:hover { background: var(--gold-2); border-color: var(--gold-2); box-shadow: 0 8px 22px rgba(200, 149, 63, .32); }
.btn-lg { min-height: 52px; padding: 14px 24px; font-size: 16px; }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.btn-icon { min-width: 44px; padding: 10px 12px; }
/* the language (text) and theme (icon) buttons share one height, whatever they hold */
.tools .btn-icon { height: 44px; padding-top: 0; padding-bottom: 0; }
.btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.btn[disabled] { opacity: .5; cursor: progress; transform: none; box-shadow: none; }
/* theme button: moon in light, sun in dark (the same control as the portada and IsProfile) */
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
}
/* calls to action end in an arrow that nudges forward */
.btn-arrow::after { content: "→"; display: inline-block; transition: transform .25s var(--ease-out); }
.btn-arrow:hover::after { transform: translateX(4px); }

/* cards: one base for every card on the page */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
  transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease; }
/* a faint light follows the pointer (js/nav.js sets --mx/--my; mouse only) */
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 70%); }
@media (hover: hover) and (pointer: fine) {
  .card:not(.card--static):hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: rgba(200, 149, 63, .45); }
  .card:hover::after { opacity: 1; }
}
.card > * { position: relative; }

.pill { font-size: 12px; letter-spacing: .04em; text-transform: none; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold-text); }
.tag { align-self: flex-start; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--gold-400); color: var(--gold-400); }

/* ===================== 4. Intro and opening ===================== */
/* the measures of the intro shared by every site (/assets/ds/intro.css): same start, same width and, with the logo at
   1000 / 1401 of the signature, the same "Is" as in Inicio and IsProfile */
#intro { display: none; }
.js #intro { position: fixed; inset: 0; z-index: 50; display: grid; justify-items: center; align-content: start;
  padding: max(12vh, 72px) 24px 24px; background: var(--bg); overflow: hidden auto; }
#intro[hidden] { display: none; }
#intro .stage { width: min(92vw, 1160px, 100%); text-align: center; position: relative; z-index: 1; }
.intro-top { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; gap: 8px; }
#intro svg.logo { display: block; width: min(828px, 65.7vw); height: auto; margin: 0 auto; overflow: visible; }
.logo .is { font-family: var(--font-script); font-size: 300px; fill: var(--gold); }
.logo .is-stroke { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 1800; stroke-dashoffset: 1800; }
.logo .academy { font-family: var(--font-sans); font-weight: 500; font-size: 150px; fill: var(--text); letter-spacing: -2px; }
.logo .by { font-family: var(--font-sans); font-size: 20px; letter-spacing: 6px; fill: var(--text-2); opacity: 0; }
.logo .cursor { fill: var(--gold); }
.logo .big-a { font-size: 188px; }
.hook { font-size: clamp(16px, 2.2vw, 22px); color: var(--text-2); margin: 22px auto 0; max-width: 52ch; opacity: 0; transform: translateY(8px); transition: all .8s ease; }
.hook b { color: var(--text); font-weight: 600; display: block; }
.intro-actions { margin-top: 30px; opacity: 0; visibility: hidden; transition: opacity .8s ease; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#intro.ready .intro-actions { visibility: visible; }
/* the brochure (css/print.css) is printed from the page itself; on screen its blocks stay hidden */
.print-head, .print-cta { display: none; }
/* the shared intro's states: .after shows the hook, .ready the actions */
#intro.after .hook, #intro.ready .intro-actions { opacity: 1; transform: none; }
#circuit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; }
#circuit path { fill: none; stroke: var(--gold); stroke-width: 1.2; }
#circuit circle { fill: var(--gold); }
.hand { position: fixed; width: 300px; height: auto; z-index: 3; opacity: 0; pointer-events: none; overflow: visible; }
#intro::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(ellipse at center, transparent 35%, var(--vignette) 100%); }
#intro.cinema::after { opacity: 1; }
#handHuman { color: var(--gold); }
#handRobot { color: var(--robot); }
#handRobot .joints { fill: var(--robot-accent); }

/* ===================== 5. Layout and sections ===================== */
/* top bar: glass, a soft shadow once the page scrolls and a thin reading-progress line */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--glass); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: box-shadow .3s ease; }
.topbar.scrolled { background: var(--surface); box-shadow: var(--bar-shadow); }
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--gold-2)); pointer-events: none; }
.topbar-row { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.brand { display: inline-flex; align-items: baseline; text-decoration: none; color: var(--text); flex: none; }
.brand-is { font-family: var(--font-script); color: var(--gold); font-size: 40px; line-height: .8; margin-right: 2px; transition: transform .3s var(--ease-out);
  -webkit-text-stroke: .5px currentColor; } /* the thin script gets the same visual weight as the solid gold buttons */
.brand:hover .brand-is { transform: rotate(-4deg); }
.brand-ac { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.brand-ac .big-a { font-size: 1.24em; line-height: 0; }
.sections { display: flex; gap: 4px; flex: 1; justify-content: center; align-items: center; }
.sections a { color: var(--text-2); text-decoration: none; font-size: 14.5px; padding: 8px 10px; border-radius: 10px; white-space: nowrap; transition: color .2s, background .2s; }
.sections a:hover { color: var(--text); background: rgba(200, 149, 63, .08); }
.sections a.active { color: var(--text); background: rgba(200, 149, 63, .14); }
.sections .nav-cta { margin-left: 8px; padding: 8px 14px; color: var(--on-gold); }
.sections .nav-cta:hover { background: var(--gold-2); }
.cta-top { display: none; }
.tools { display: flex; gap: 8px; align-items: center; flex: none; margin-left: auto; }

.section { padding: 96px 0; }
.section.alt { background: var(--bg-alt); }
.section-head { max-width: 720px; margin-bottom: 40px; }
.sub-title { font-size: 22px; margin: 56px 0 20px; }
.mid-cta { text-align: center; margin: 36px 0 0; }

/* hero */
.hero { padding: 72px 0 96px; position: relative; overflow: hidden; background: radial-gradient(60% 70% at 90% 0%, rgba(200, 149, 63, .16), transparent 70%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; position: relative; }
.hero-grid > * { min-width: 0; }
.hero h1 { font-size: clamp(34px, 4.6vw, 58px); margin-bottom: 20px; }
.hero h1:focus { outline: none; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 26px; }
.trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trust li { font-size: 13.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.trust li:first-child { border-color: var(--gold); }
.hero-visual { position: relative; }
/* H07: these widgets have no static content. Keep the reading/contact path useful without the application. */
html:not(.js) .hero-visual, html:not(.js) #consola { display: none; }
html:not(.js) .hero-grid { grid-template-columns: minmax(0, 1fr); }
.code-card { background: var(--ink-850); color: var(--mist-100); border-radius: 16px; box-shadow: 0 30px 70px rgba(10, 14, 40, .35); overflow: hidden; border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .5s var(--ease-out), box-shadow .5s ease; }
@media (hover: hover) and (pointer: fine) { .code-card:hover { transform: translateY(-3px); box-shadow: 0 36px 80px rgba(10, 14, 40, .42); } }
.code-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; background: var(--ink-900); font-size: 12px; color: var(--mist-500); }
.code-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-500); }
.code-bar i:first-child { background: var(--danger); } .code-bar i:nth-child(2) { background: var(--gold-400); } .code-bar i:nth-child(3) { background: var(--success-strong); }
.code-tabs { display: flex; gap: 2px; margin-left: 10px; overflow-x: auto; scrollbar-width: none; }
.code-tabs::-webkit-scrollbar { display: none; }
.code-tabs button { background: transparent; border: 0; color: var(--mist-500); font: 12px var(--font-mono); padding: 6px 10px; border-radius: 8px; white-space: nowrap; transition: color .2s, background .2s; }
.code-tabs button[aria-selected="true"] { background: var(--ink-800); color: var(--mist-100); }
.code-tabs button:hover { color: var(--mist-100); }
#heroCode { margin: 0; padding: 20px 22px 26px; font: 14px/1.7 var(--font-mono); height: 236px; overflow: hidden; white-space: pre-wrap; }
:is(#heroCode, .dbg-code) .k { color: var(--code-keyword); } :is(#heroCode, .dbg-code) .s { color: var(--code-string); } :is(#heroCode, .dbg-code) .c { color: var(--code-comment); }
#heroCode .caret { display: inline-block; width: 8px; height: 1.1em; background: var(--gold-400); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.lesson-controls { display: flex; justify-content: flex-end; padding: 0 14px 12px; }
.lesson-controls .lesson-toggle { min-height: 44px; max-width: 100%; padding: 8px 12px; font-size: 12px;
  color: var(--mist-100); border-color: var(--ink-500); }
.lesson-controls .lesson-toggle:hover { border-color: var(--gold-400); background: var(--ink-800); }
.lesson-controls .lesson-toggle:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; }
.lesson-controls .lesson-toggle[hidden] { display: none; }
.handnote { position: absolute; right: -6px; bottom: -58px; display: flex; align-items: flex-start; gap: 4px; color: var(--gold); transform: rotate(-4deg); }
.handnote span { font-family: var(--font-script); font-size: 38px; line-height: 1; transition: opacity .3s; white-space: nowrap; }
.handnote svg { width: 80px; transform: scaleX(-1) rotate(-30deg); margin-top: -26px; }

/* open classes band */
.open-band { padding: 0 0 24px; }
.open-row { display: flex; gap: 28px; align-items: center; justify-content: space-between; padding: 32px 36px; border-radius: 24px;
  background: linear-gradient(120deg, rgba(200, 149, 63, .16), rgba(200, 149, 63, .04)); border: 1px solid rgba(200, 149, 63, .45); }
.open-row h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 8px; }
.open-row p { margin: 0; color: var(--text-2); max-width: 60ch; }
.open-row .eyebrow { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.open-row .btn { flex: none; }

/* about */
.about-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 56px; align-items: center; }
.founder { text-align: center; padding: 32px 24px; }
/* the portrait is the shared component (/assets/ds/portrait.css): gold ring drawn on reveal, glow on hover */
.founder-photo { --portrait-size: 144px; display: grid; margin: 0 auto 16px; padding: 5px; }
.founder-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.founder-name { font-size: 20px; font-weight: 600; margin: 0 0 2px; }
.badges { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.badges li { font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--bg-alt); }

/* method */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar .n { font-family: var(--font-script); color: var(--gold); font-size: 54px; line-height: .9; display: block; transition: transform .35s var(--ease-out); }
.pillar:hover .n { transform: rotate(-6deg) scale(1.06); }
.pillar h3 { font-size: 19px; margin: 6px 0 8px; }
.pillar p { color: var(--text-2); margin: 0; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.steps li { position: relative; padding: 22px 20px 20px; border-top: 3px solid var(--gold); background: var(--surface); border-radius: 0 0 14px 14px; }
.steps li::before { counter-increment: step; content: "0" counter(step); font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--gold-text); }
.steps h4 { margin: 6px 0 6px; font-size: 17px; font-weight: 600; }
.steps p { margin: 0; color: var(--text-2); font-size: 15px; }

/* subjects */
.subject-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.subject.card { padding: 0; }
.subject[open] { border-color: var(--gold); box-shadow: var(--shadow-hover); }
.subject summary { list-style: none; cursor: pointer; padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; min-height: 168px; align-content: start; }
.subject summary::-webkit-details-marker { display: none; }
.subject summary .sgroup { grid-column: 1 / -1; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; }
.subject summary .sname { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; }
.subject summary span { grid-column: 1; color: var(--text-2); font-size: 15px; }
.subject summary::after { content: "+"; grid-column: 2; grid-row: 2 / 4; align-self: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--gold-text); font-size: 20px; transition: transform .3s var(--ease-out), border-color .3s, background .3s; }
.subject:hover summary::after { border-color: var(--gold); }
.subject[open] summary::after { transform: rotate(45deg); background: rgba(200, 149, 63, .12); }
.subject[open] summary { min-height: 0; }
.subject .body { padding: 0 22px 22px; }
.subject h4 { margin: 14px 0 6px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); }
.subject ul { margin: 0; padding-left: 20px; color: var(--text-2); }
.subject p { color: var(--text-2); margin: 0 0 16px; }

/* why */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why .card h3 { font-size: 18px; margin-bottom: 8px; }
.why .card p { margin: 0; color: var(--text-2); }
.why .card::before { content: ""; display: block; width: 36px; height: 3px; border-radius: 2px; background: var(--gold); margin-bottom: 16px; transition: width .4s var(--ease-out); }
.why .card:hover::before { width: 56px; }

/* reviews */
.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 24px; }
.review { margin: 0; }
.review blockquote { margin: 10px 0 12px; font-size: 17px; line-height: 1.6; }
.review figcaption { font-size: 14px; color: var(--text-2); }
.stars { color: var(--gold); letter-spacing: 3px; }

/* resources */
.resources { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; }
.world-card { position: relative; overflow: hidden; border-radius: var(--radius); padding: 36px; min-height: 280px; color: var(--cream-200);
  background: radial-gradient(120% 90% at 85% 10%, var(--ink-600) 0%, var(--ink-850) 55%, var(--ink-950) 100%); display: flex; flex-direction: column; justify-content: flex-end; }
.world-card::before { content: ""; position: absolute; inset: 0; opacity: .35;
  background-image: linear-gradient(rgba(226, 178, 92, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(226, 178, 92, .35) 1px, transparent 1px);
  background-size: 36px 36px; transform: perspective(500px) rotateX(60deg) translateY(30%); transform-origin: bottom; transition: background-position 1.2s var(--ease-out); }
.world-card:hover::before { background-position: 0 36px; }
.world-card > * { position: relative; }
.world-card h3 { font-size: 28px; margin: 12px 0 10px; }
.world-card p { color: var(--mist-200); max-width: 46ch; margin: 0; }
.world-card .btn { align-self: flex-start; margin-top: 22px; }
.facts-card { padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.facts-card h3 { font-size: 20px; }
.fact { font-size: 18px; line-height: 1.55; flex: 1; margin: 0; transition: opacity .25s; }
.facts-card .btn { align-self: flex-start; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-size: 18px; font-weight: 500; display: flex; justify-content: space-between; gap: 16px; transition: color .2s; }
.faq summary:hover { color: var(--gold-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold-text); font-size: 22px; transition: transform .3s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-2); padding-bottom: 18px; margin: 0; }

.world-card :focus-visible, .code-card :focus-visible, .assistant-fab:focus-visible, .as-head :focus-visible { outline-color: var(--gold-400); }

/* footer */
.footer { padding: 28px 0 96px; border-top: 1px solid var(--line); font-size: 14px; }
.footer-row { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer a { color: var(--text-2); text-decoration: none; transition: color .2s; }
.footer a:hover { color: var(--gold-text); text-decoration: underline; }

/* ===================== 6. Python console and debugger ===================== */
.console-card { grid-column: 1 / -1; padding: 28px; }
.console-head { display: flex; gap: 20px; justify-content: space-between; align-items: center; }
.console-head h3 { font-size: 20px; margin-bottom: 6px; }
.console-head p { margin: 0; }
.console-head .btn { flex: none; white-space: nowrap; }
.console-body { margin-top: 20px; }
.console-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.console-bar .spacer { flex: 1; }
.console-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .console-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .console-actions .btn { width: 100%; }
  .console-bar .spacer { display: none; }
}
.samples { display: flex; gap: 6px; flex-wrap: wrap; }
.samples button { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; transition: border-color .2s, background .2s; }
.samples button:hover { border-color: var(--gold); background: rgba(200, 149, 63, .08); }
.console-label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin: 14px 0 6px; }
.code-surface { background: var(--ink-850); color: var(--mist-100); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius-sm); scrollbar-width: thin; scrollbar-color: var(--ink-500) transparent; }
#pyEditor, #pyOut { width: 100%; font: 14px/1.6 var(--font-mono); border-radius: var(--radius-sm); padding: 16px; margin: 0; }
#pyEditor { min-height: 200px; resize: vertical; tab-size: 4; }
#pyEditor:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 2px; }
#pyOut { min-height: 80px; max-height: 260px; overflow: auto; background: var(--bg-alt); color: var(--text); white-space: pre-wrap; }
#pyOut .err { color: var(--danger-text); }
.dbg-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.dbg-bar .btn-icon { min-width: 40px; font-size: 13px; }
.dbg-range { flex: 1; min-width: 120px; accent-color: var(--gold); }
.dbg-count { font-size: 13px; color: var(--text-2); min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.dbg-msg { margin: 0 0 10px; font-size: 14px; padding: 8px 12px; border-radius: 10px; background: var(--bg-alt); border-left: 3px solid var(--gold); }
.dbg-msg.return { border-left-color: var(--success-strong); }
.dbg-msg.error { border-left-color: var(--danger-strong); color: var(--text); }
.dbg-msg.limit { border-left-color: var(--gold-400); }
.dbg-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.dbg-code { list-style: none; margin: 0; padding: 10px 0; font: 14px/1.7 var(--font-mono); max-height: 380px; overflow: auto; }
.dbg-code li { display: flex; align-items: baseline; padding-right: 14px; border-left: 3px solid transparent; transition: background .15s; }
.dbg-code code { white-space: pre; font: inherit; }
.dbg-code .ln { flex: none; width: 44px; margin-right: 10px; padding: 0 8px 0 0; border: 0; background: none; color: var(--mist-600); font: inherit; font-size: 12px; text-align: right; position: relative; }
.dbg-code .ln:hover { color: var(--mist-100); }
.dbg-code li.bp .ln::before { content: ""; position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--danger); }
.dbg-code li.prev { background: rgba(255, 255, 255, .04); }
.dbg-code li.cur { background: rgba(226, 178, 92, .16); border-left-color: var(--gold-400); }
.dbg-code li.cur .ln { color: var(--gold-400); font-weight: 600; }
.dbg-code li.err { background: rgba(224, 108, 90, .18); border-left-color: var(--danger); }
.dbg-side h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.dbg-side h4:not(:first-child) { margin-top: 14px; }
.dbg-side .fn { text-transform: none; letter-spacing: 0; font: 600 13px var(--font-mono); color: var(--gold-text); }
.dbg-vars { width: 100%; border-collapse: collapse; font: 13px/1.5 var(--font-mono); }
.dbg-vars th, .dbg-vars td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.dbg-vars th { color: var(--gold-text); font-weight: 600; width: 38%; }
.dbg-vars tr.chg td, .dbg-vars tr.chg th { animation: varflash 1.2s ease-out; }
@keyframes varflash { from { background: rgba(226, 178, 92, .35); } to { background: transparent; } }
.dbg-stack { margin: 0; font: 13px var(--font-mono); color: var(--text); }
.dbg-out { margin: 0; padding: 10px 12px; min-height: 40px; max-height: 160px; overflow: auto; border-radius: 10px; background: var(--bg-alt); font: 13px/1.5 var(--font-mono); white-space: pre-wrap; }
.dbg-hint { margin: 10px 0 0; }

/* ===================== 7. Assistant ===================== */
/* Alan comes from the shared design system: /assets/ds/assistant.css (portada repository) */

/* ===================== 8. Responsive and reduced motion ===================== */
@media (max-width: 1180px) {
  .topbar-row { flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; }
  .sections { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 8px; }
  .sections::-webkit-scrollbar { display: none; }
  html { scroll-padding-top: 120px; }
  .sections .nav-cta { display: none; }
  .cta-top { display: inline-flex; }
}
@media (max-width: 1020px) {
  .hero-grid, .about-grid, .resources { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { max-width: 560px; }
  .why { grid-template-columns: 1fr 1fr; }
  .about-grid > .founder { order: 2; width: 100%; max-width: 440px; justify-self: center; }
  .fact { min-height: calc(1.55em * 4); }
  .steps { grid-template-columns: 1fr 1fr; }
  .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subject:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .dbg-grid { grid-template-columns: minmax(0, 1fr); }
  .dbg-code { max-height: 300px; font-size: 13px; }
  .dbg-count { min-width: 0; }
}
/* «by Ismael Sarmiento» stays readable (11 px or more) at every width: the logo is 65.7vw wide, so its SVG units
   shrink with the screen; below 836 px the byline grows in steps and moves left, clear of the descender of the «y». */
@media (max-width: 836px) { .logo .by { font-size: 27px; letter-spacing: 3px; } }
@media (max-width: 640px) {
  #intro { padding-top: max(14vh, 84px); }
  .intro-actions { flex-direction: column; align-items: center; }
  .intro-actions .btn { width: min(280px, 100%); }
  .section { padding: 64px 0; }
  .hero { padding: 40px 0 48px; }
  .pillars, .why, .steps, .reviews { grid-template-columns: 1fr; }
  .subject-grid { grid-template-columns: 1fr; }
  .subject summary { min-height: 0; }
  .cta-top { min-height: 40px; padding: 8px 10px; font-size: 13.5px; }
  .open-row { flex-direction: column; align-items: stretch; padding: 24px 20px; }
  .open-row .btn { text-align: center; }
  .console-head { flex-direction: column; align-items: flex-start; }
  .console-card { padding: 20px; }
  .topbar-row { gap: 6px 8px; }
  .tools { gap: 6px; } .tools .btn-icon { min-width: 40px; padding: 8px; }
  .brand-is { font-size: 31px; } .brand-ac { font-size: 18px; }
  .logo .by { font-size: 33px; letter-spacing: 2px; transform: translateX(-30px); }
  .handnote { position: static; justify-content: flex-end; margin-top: 14px; transform: rotate(-3deg); }
  .handnote span { font-size: 30px; white-space: normal; text-align: right; }
  .handnote svg { display: none; }
  #heroCode { height: auto; min-height: 215px; font-size: 12px; }
}
@media (max-width: 520px) { .logo .by { font-size: 42px; letter-spacing: 1.5px; transform: translateX(-60px); } }
@media (max-width: 400px) { .logo .by { font-size: 47px; letter-spacing: 1px; transform: translateX(-90px); } }
@media (max-width: 380px) {
  .tools { gap: 4px; } .tools .btn-icon { min-width: 38px; padding: 8px 6px; }
}
/* Match the shared intro's short-window signature scale (Academy viewBox / signature viewBox).
   Keep native overflow as the fallback when text and actions need more than the available height. */
@media (max-height: 740px) {
  #intro { padding-top: 64px; }
  #intro svg.logo { width: min(828px, 65.7vw, max(200px, calc((100svh - 410px) * 3.5 * 1000 / 1401))); }
  #intro .hook { margin-top: 16px; }
  #intro .intro-actions { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}