/* jv.restore.site-css/v1 brief-sha256=cff580b45381dea40848853364221196b6e552e058f8738af00848c436a0332b */
:root {
  --jv-ground: #31545f;
  --jv-text: #f7f6f0;
  --jv-accent-1: #8cdfea;
  --jv-font-display: "Trebuchet MS", "Arial", sans-serif;
  --jv-font-body: "Arial", "Helvetica", sans-serif;
}
* { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; display: flex; flex-direction: column; background: #31545f; color: #f7f6f0; font: 18px/1.48 Arial, Helvetica, sans-serif; }
    a { color: inherit; }
    main { order: 1; width: 100%; }
    article { width: 100%; min-height: 720px; padding: 24px clamp(24px, 4vw, 72px) 48px; }
    .topline { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid #a7bdc2; padding-bottom: 18px; }
    .mark { color: #8cdfea; font: 700 24px/1.1 'Trebuchet MS', Arial, sans-serif; letter-spacing: -.04em; text-decoration: none; }
    .topline span { font: 700 12px/1.3 Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
    .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: clamp(32px, 6vw, 100px); padding: 72px 0 50px; border-bottom: 1px solid #a7bdc2; }
    .eyebrow { margin: 0 0 20px; color: #8cdfea; font: 700 12px/1.3 Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
    h1 { max-width: 25ch; margin: 0 0 22px; font: 700 36px/1.09 'Trebuchet MS', Arial, sans-serif; letter-spacing: -.045em; }
    .lead { max-width: 53ch; margin: 0; }
    .hero-side { align-self: end; max-width: 45ch; border-left: 2px solid #8cdfea; padding-left: 22px; }
    .hero-side strong { display: block; margin-bottom: 8px; color: #8cdfea; font: 700 13px Consolas, monospace; text-transform: uppercase; }
    .hero-side p { margin: 0; }
    .exercise { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; }
    .exercise section { min-width: 0; }
    .pane-head { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #a7bdc2; padding: 0 0 14px; font: 700 13px Consolas, monospace; }
    .pane-head span { color: #8cdfea; }
    pre { min-height: 194px; margin: 0; padding: 22px 0; overflow-x: auto; color: #f7f6f0; font: 15px/1.6 Consolas, 'Courier New', monospace; }
    .tag { color: #8cdfea; }
    .rendered { min-height: 194px; padding: 22px 28px; background: #f4f3ed; color: #182d34; }
    .rendered h2 { margin: 0 0 16px; font: 700 28px/1.2 Georgia, serif; }
    .rendered p { margin: 0; }
    .footnote { margin: 18px 0 0; color: #e5e9e8; font-size: 14px; }
    body > header { order: 2; border-top: 1px solid #a7bdc2; padding: 24px clamp(24px, 4vw, 72px); }
    body > header nav { display: flex; flex-wrap: wrap; gap: 14px 28px; font: 700 15px/1.5 Arial, sans-serif; }
    body > header a { text-decoration: none; border-bottom: 1px solid #8cdfea; }
    @media (max-width: 700px) {
      article { min-height: 0; padding: 20px 20px 34px; }
      .topline { align-items: center; }
      .topline span { text-align: right; }
      .hero { display: block; padding: 42px 0 32px; }
      h1 { font-size: 32px; }
      .hero-side { margin-top: 30px; }
      .exercise { display: block; margin-top: 18px; }
      .exercise section + section { margin-top: 28px; }
      pre, .rendered { min-height: 0; }
      body > header { padding: 22px 20px; }
    }

/* Production page shell: full-width lessons with calm reading measures. */
.page-article, .page-system { display: block; }
.skip-link { position: absolute; z-index: 20; top: -5rem; left: 20px; padding: 10px 14px; background: #f4f3ed; color: #182d34; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid #8cdfea; outline-offset: 3px; }
::selection { background: #8cdfea; color: #182d34; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 20px clamp(24px, 4vw, 72px); border-bottom: 1px solid #a7bdc2; }
.site-header .brand { flex: none; display: inline-flex; align-items: center; }
.site-header .brand img { display: block; width: 145px; max-width: 42vw; height: auto; }
.site-header p { margin: 0; font-size: 13px; }
.site-header nav, .site-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.site-header nav a, .site-footer nav a { font-size: 14px; text-decoration-color: #8cdfea; text-underline-offset: 5px; }
.site-header nav a:hover, .site-footer nav a:hover { color: #8cdfea; }
.page-home main { order: 1; }
.page-home .site-header { order: 2; border-top: 1px solid #a7bdc2; }
.page-home .site-footer { order: 3; }
.page-home .site-header nav { width: 100%; }
body.page-home main, body.page-article main, body.page-system main { width: 100%; min-height: 70vh; padding: 36px clamp(24px, 4vw, 72px) 64px; }
body.page-home main::before, body.page-article main::before, body.page-system main::before { content: "HTML YA / APRENDE HACIENDO"; display: block; margin-bottom: 44px; color: #8cdfea; font: 700 12px/1.3 Consolas, monospace; letter-spacing: .1em; }
main h1 { max-width: 28ch; margin: 0 0 24px; font: 700 36px/1.1 "Trebuchet MS", Arial, sans-serif; letter-spacing: -.045em; overflow-wrap: anywhere; }
main h2 { margin: 48px 0 16px; font: 700 26px/1.17 "Trebuchet MS", Arial, sans-serif; letter-spacing: -.025em; }
main h3 { margin: 30px 0 12px; font: 700 20px/1.25 Arial, sans-serif; }
main p, main li { line-height: 1.55; }
main p { max-width: 72ch; }
main ul, main ol { max-width: 76ch; }
main a { color: #8cdfea; text-underline-offset: 4px; }
main a:hover { text-decoration-thickness: 2px; }
main .intro { max-width: 62ch; margin: 0 0 22px; font-size: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin: 24px 0 44px; }
.primary-action, main a.primary-action { display: inline-block; padding: 13px 19px; background: #8cdfea; color: #182d34; font-weight: 700; text-decoration: none; }
.primary-action:hover { background: #b8edf3; }
main > section { margin: 36px 0 46px; padding-top: 20px; border-top: 1px solid #a7bdc2; }
main > section:not(.syntax-spread):not(.related) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 36px; align-items: start; }
main > section:not(.syntax-spread):not(.related) > h2 { grid-column: 1 / -1; margin: 4px 0 12px; }
main > section:not(.syntax-spread):not(.related) > * { min-width: 0; }
.syntax-spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.syntax-spread > section { min-width: 0; }
.syntax-spread h2 { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid #a7bdc2; font: 700 13px/1.3 Consolas, monospace; }
pre { margin: 0; padding: 16px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: #f7f6f0; font: 15px/1.6 Consolas, "Courier New", monospace; }
code { font-family: Consolas, "Courier New", monospace; }
.browser-output { min-height: 170px; padding: 22px 28px; background: #f4f3ed; color: #182d34; }
.browser-output strong { display: block; margin-bottom: 14px; font: 700 28px/1.2 Georgia, serif; }
.browser-output p { margin: 0; }
.related { display: block; margin: 60px 0 0; padding-top: 20px; border-top: 1px solid #a7bdc2; }
.related h2 { margin: 0 0 20px; font-size: 21px; }
.related a { display: inline-block; margin: 0 22px 14px 0; }
.site-footer { padding: 26px clamp(24px, 4vw, 72px) 40px; border-top: 1px solid #a7bdc2; }
button, input, textarea, select { font: inherit; }
button { padding: 10px 16px; border: 1px solid #8cdfea; background: #8cdfea; color: #182d34; cursor: pointer; }
button:hover { background: #b8edf3; }
input, textarea, select { max-width: 100%; padding: 10px 12px; border: 1px solid #a7bdc2; background: #f4f3ed; color: #182d34; }
.tool-panel { width: 100%; margin: 28px 0; padding: 24px; border: 1px solid #a7bdc2; }
.tool-actions, .game-controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.html-lab textarea { display: block; width: 100%; min-height: 340px; margin-top: 10px; font: 15px/1.5 Consolas, monospace; resize: vertical; }
.html-lab iframe { display: block; width: 100%; min-height: 330px; border: 1px solid #a7bdc2; background: #f4f3ed; }
.game-layout { display: grid; grid-template-columns: minmax(0, 300px) minmax(220px, 1fr); gap: 28px; align-items: start; }
.game-layout canvas { display: block; width: 100%; max-width: 300px; height: auto; border: 1px solid #a7bdc2; }
.game-side output { display: inline-block; min-width: 3ch; margin-left: 8px; font-weight: 700; }
@media (max-width: 800px) {
  .site-header { align-items: flex-start; }
  .site-header nav { width: 100%; }
  main > section:not(.syntax-spread):not(.related) { display: block; }
  .syntax-spread { display: block; }
  .syntax-spread > section + section { margin-top: 28px; }
  .game-layout { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  body.page-home main, body.page-article main, body.page-system main { padding: 28px 20px 48px; }
  body.page-home main::before, body.page-article main::before, body.page-system main::before { margin-bottom: 34px; }
  main h1 { font-size: 32px; }
  main .intro { font-size: 17px; }
  .site-header, .site-footer { padding-left: 20px; padding-right: 20px; }
  .site-header nav, .site-footer nav { gap: 12px 20px; }
  .browser-output { min-height: 0; }
}