:root {
  color-scheme: light;
  --paper: #f7f6ee;
  --white: #fffef8;
  --ink: #112c26;
  --muted: #475e55;
  --line: #d3dbcf;
  --forest: #102a25;
  --light-text: #d3e5da;
  --lime: #d6f591;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible, summary:focus-visible { outline: 3px solid #b56a28; outline-offset: 4px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.04; text-wrap: balance; }
h1 { font-size: clamp(3.1rem, 7vw, 6.1rem); letter-spacing: -.07em; }
h2 { font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.055em; }
h3 { font-size: 1.3rem; letter-spacing: -.025em; }
.wrap { width: min(1140px, calc(100% - 3rem)); margin-inline: auto; }
.narrow { max-width: 760px; }
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.skip { position: absolute; top: .5rem; left: .5rem; padding: .75rem; z-index: 3; background: var(--white); transform: translateY(-140%); }
.skip:focus { transform: translateY(0); }

.mast { background: var(--forest); color: var(--light-text); border-bottom: 1px solid #ffffff20; }
.nav, .nav nav { display: flex; align-items: center; gap: 1.2rem; }
.nav { justify-content: space-between; min-height: 72px; }
.nav a { text-decoration: none; }
.nav nav a { font-size: .94rem; }
.nav nav a:hover, .footer a:hover { text-decoration: underline; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 760; white-space: nowrap; }
.brand span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; color: var(--forest); background: var(--lime); }

.hero, .guide-hero { background: var(--forest); color: var(--white); }
.hero-grid { display: grid; grid-template-columns: .87fr 1.13fr; align-items: center; gap: clamp(2rem, 6vw, 5.4rem); padding-block: clamp(3.5rem, 8vw, 7rem); }
.eyebrow { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; color: var(--muted); font-size: .75rem; font-weight: 780; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow > span { width: .6rem; height: .6rem; border-radius: 50%; background: #3b8b61; flex: none; }
.hero .eyebrow, .guide-hero .eyebrow, .offer .eyebrow { color: var(--light-text); }
.hero .eyebrow span, .guide-hero .eyebrow span, .offer .eyebrow span { background: var(--lime); }
h1 em { color: var(--lime); font-style: normal; }
.intro { max-width: 43ch; margin: 1.4rem 0 1.8rem; color: var(--light-text); font-size: clamp(1.06rem, 2vw, 1.25rem); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: 3.2rem; padding: .75rem 1.15rem; border-radius: .55rem; background: var(--lime); color: var(--ink); font-weight: 760; text-decoration: none; }
.button:hover { background: #e4ffae; }
.price-note { margin-top: .65rem; color: var(--light-text); font-size: .9rem; }
.preview { background: #1b3c33; overflow: hidden; border: 1px solid #57736a; border-radius: 1rem; box-shadow: 0 18px 50px #06141170; }
.preview img { width: 100%; height: auto; border-block: 1px solid #57736a; }
.preview-bar, figcaption { display: flex; justify-content: space-between; gap: .6rem; align-items: center; padding: .72rem 1rem; color: var(--light-text); font-size: .82rem; }
.preview-bar i { display: inline-block; width: .47rem; height: .47rem; margin-right: .25rem; border-radius: 50%; background: var(--lime); }
figcaption span:first-child { color: var(--white); font-weight: 650; }
.facts { background: var(--white); border-bottom: 1px solid var(--line); }
.fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.fact-grid > div { display: grid; align-content: center; padding: 1.25rem 1.5rem; border-right: 1px solid var(--line); }
.fact-grid > div:first-child { padding-left: 0; }
.fact-grid > div:last-child { border-right: 0; }
.fact-grid strong { font-size: clamp(1rem, 2vw, 1.35rem); }
.fact-grid span { color: var(--muted); font-size: .88rem; }

.story, .faq { display: grid; grid-template-columns: .9fr 1.1fr; align-items: start; gap: clamp(1.5rem, 6vw, 5rem); }
.story > div:first-child > p:last-child, .offer h2 + p { margin-top: 1rem; }
.story > div:first-child > p:last-child, .article { color: var(--muted); }
.example { padding: 1.35rem; border-radius: 1rem; border: 1px solid var(--line); background: var(--white); }
.example p:not(.eyebrow, .example-note) { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.example strong { flex: none; color: #236548; }
.example-note { color: var(--muted); font-size: .92rem; margin-top: .45rem; }
.curriculum { background: #e9efe4; border-block: 1px solid var(--line); }
.lesson-grid { margin-top: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.lesson-grid > div { padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); background: var(--white); border-radius: .8rem; }
.lesson-grid ol { margin: 1rem 0 0; padding-left: 1.9rem; }
.lesson-grid li { padding: .53rem 0 .53rem .25rem; border-bottom: 1px solid var(--line); }
.lesson-grid li:last-child { border-bottom: 0; }
.lesson-grid li::marker { color: #3e6d56; font-weight: 760; }
.faq { padding-bottom: 0; }
details { border-bottom: 1px solid var(--line); }
summary { padding: 1rem 0; font-weight: 720; cursor: pointer; }
details p { margin: -.2rem 0 1rem 1.1rem; color: var(--muted); }
.offer { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; padding: clamp(1.5rem, 5vw, 3.5rem); background: var(--forest); color: var(--white); border-radius: 1rem; }
.offer p:not(.offer-price) { color: var(--light-text); }
.offer-price { color: var(--lime); font-size: clamp(2.65rem, 5vw, 3.75rem); font-weight: 780; line-height: 1; letter-spacing: -.055em; }
.offer-action p + p { margin: .65rem 0 1rem; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .7rem 1rem; padding-block: 1.25rem 2rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }

.guide-hero { padding-block: clamp(2.8rem, 7vw, 5.2rem); }
.guide-hero h1 { font-size: clamp(2.8rem, 6.6vw, 5.2rem); }
.guide-hero .intro { margin-bottom: 0; }
.article { padding-block: 1.5rem 4rem; }
.article section { padding-block: 1.85rem; border-bottom: 1px solid var(--line); }
.article h2 { color: var(--ink); font-size: clamp(1.65rem, 4vw, 2.4rem); margin-bottom: .8rem; }
.article section > p + p { margin-top: .75rem; }
.article a:not(.button) { color: #246141; }
.article .example { margin-top: 1.05rem; }
.guide-cta { margin-top: 2rem; padding: clamp(1.3rem, 4vw, 2.4rem); background: #e9efe4; border-radius: .8rem; }
.guide-cta .button { margin-top: 1rem; }
.guide-cta h2 + p { margin-top: .85rem; }
#biblioteca { margin-top: -1rem; }
.editorial-credit { color: var(--muted); font-size: .86rem; margin-bottom: 1rem; }
.answer { padding: 1.15rem 1.35rem; border-left: 4px solid #3b8b61; background: var(--white); color: var(--ink); font-weight: 650; }
.contents { margin-top: 1.2rem; }
.contents ol, .related { margin: .65rem 0 0; padding-left: 1.35rem; }
.contents li + li, .related li + li { margin-top: .25rem; }
.article section { scroll-margin-top: 1rem; }
.library { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.library-card { padding: 1.5rem; border: 1px solid var(--line); background: var(--white); border-radius: .8rem; }
.library-card h2 { font-size: 1.45rem; letter-spacing: -.035em; line-height: 1.14; }
.library-card p:last-child { margin-top: .7rem; color: var(--muted); }

@media (max-width: 760px) {
  .hero-grid, .story, .faq, .lesson-grid, .offer { grid-template-columns: 1fr; }
  .library { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { gap: 2rem; }
  .nav { padding-block: .8rem; }
  .nav, .nav nav { flex-wrap: wrap; gap: .6rem 1rem; }
  .fact-grid > div { padding-inline: .75rem; }
}

@media (max-width: 520px) {
  .library { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .wrap { width: calc(100% - 2rem); }
  .fact-grid > div { padding-inline: .5rem; }
  figcaption { flex-wrap: wrap; }
}