@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Varela+Round&display=swap');

:root { --green:#45ac34; --green-dark:#23742b; --green-pale:#eaf6e7; --ink:#252525; --gray:#646363; --paper:#f7f8f4; --white:#fff; --yellow:#f6cf3d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--gray); font-family:"Varela Round",Helvetica,Arial,sans-serif; }
.brandbar { position:relative; z-index:5; height:94px; padding:0 clamp(1.25rem,6vw,6rem); display:flex; align-items:center; justify-content:space-between; background:white; border-bottom:1px solid #e7e7e7; }
.brand img { display:block; width:clamp(150px,18vw,225px); height:auto; }
.back-home { color:var(--green-dark); text-decoration:none; font-size:.9rem; }
.back-home span { margin-left:.4rem; }
.hero { min-height:calc(88vh - 94px); position:relative; overflow:hidden; padding:7vw 40vw 7vw 7vw; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(120deg,var(--green-dark),var(--green) 65%,#6ac45b); color:white; }
.hero::before { content:""; position:absolute; width:56vw; height:56vw; right:-14vw; top:-18vw; border:2px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.07),0 0 0 140px rgba(255,255,255,.05); }
.eyebrow,.kicker { position:relative; text-transform:uppercase; letter-spacing:.17em; font:800 .72rem "Nunito",sans-serif; color:white; }
h1 { position:relative; z-index:1; margin:.5rem 0 1.4rem; max-width:950px; font:900 clamp(4rem,10vw,8.4rem)/.82 "Nunito",sans-serif; letter-spacing:-.065em; }
h1 em { display:inline-block; font-style:normal; color:var(--yellow); }
.hero>p { position:relative; z-index:1; max-width:520px; font-size:clamp(1rem,2vw,1.3rem); line-height:1.55; color:white; }
.start { position:relative; z-index:1; width:max-content; margin-top:2rem; padding:1rem 1.3rem; border:2px solid white; color:white; text-decoration:none; border-radius:4px; font-family:"Nunito",sans-serif; font-weight:800; transition:.2s; }
.start:hover { background:white; color:var(--green-dark); }
.start span { margin-left:1rem; }
.hero-visual { position:absolute; z-index:1; right:6vw; top:7%; bottom:7%; width:min(29vw,390px); }
.hero-visual img { width:100%; height:100%; display:block; object-fit:cover; object-position:center top; border:5px solid white; border-radius:48% 48% 18px 18px; box-shadow:0 24px 55px rgba(20,70,25,.35); }
.world-badge { position:absolute; z-index:2; left:-54px; top:8%; width:clamp(90px,9vw,128px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:var(--yellow); color:var(--green-dark); box-shadow:0 10px 25px rgba(30,80,25,.25); transform:rotate(-7deg); }
.world-badge svg { width:72%; height:72%; }
main { padding:clamp(4rem,8vw,8rem) clamp(1rem,7vw,7rem); }
.intro { display:flex; justify-content:space-between; align-items:end; margin-bottom:4rem; }
.intro .kicker { color:var(--green); }
h2 { margin:0; color:var(--ink); font:900 clamp(2.5rem,6vw,5.2rem)/.95 "Nunito",sans-serif; letter-spacing:-.045em; text-align:right; }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1.15rem; }
.card { grid-column:span 4; min-height:320px; border:1px solid #dfe5dc; padding:1.6rem; cursor:pointer; text-align:left; color:var(--ink); background:white; border-radius:5px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s,box-shadow .25s,border-color .25s; }
.card:nth-child(3n+2) { background:var(--green-pale); }
.card:nth-child(3n) { background:var(--green); color:white; border-color:var(--green); }
.card:hover { transform:translateY(-7px); border-color:var(--green); box-shadow:0 18px 40px rgba(35,116,43,.15); }
.number { font:900 3rem/1 "Nunito",sans-serif; color:var(--green); opacity:.65; }
.card:nth-child(3n) .number { color:white; }
.card h3 { margin:0; max-width:95%; font:900 clamp(1.4rem,2.3vw,2.1rem)/1.05 "Nunito",sans-serif; letter-spacing:-.03em; }
.meta { display:flex; gap:.45rem; flex-wrap:wrap; margin-top:1rem; }
.meta span { padding:.3rem .6rem; border:1px solid currentColor; border-radius:99px; font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; }
dialog { width:min(920px,94vw); max-height:90vh; border:0; border-radius:7px; padding:0; background:white; color:var(--gray); box-shadow:0 30px 100px #0008; }
dialog::backdrop { background:rgba(16,45,19,.82); backdrop-filter:blur(5px); }
.close { position:sticky; z-index:2; float:right; top:1rem; margin:1rem; width:44px; height:44px; border-radius:50%; border:0; background:var(--green); color:white; font-size:1.7rem; cursor:pointer; }
.chapter { padding:clamp(2rem,6vw,5rem); }
.chapter .big { font:900 5rem/1 "Nunito",sans-serif; color:var(--green); }
.chapter h2 { text-align:left; margin:.3rem 0 2rem; }
.resources { display:grid; gap:.8rem; margin:2rem 0; }
.resource { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; background:var(--green-pale); color:var(--ink); text-decoration:none; border-radius:4px; }
.resource b { color:var(--green-dark); font-family:"Nunito",sans-serif; }
.audio-link { background:#fff5c9; }
.audio-player { margin:1.2rem 0 2rem; padding:1.1rem 1.2rem; background:#fff5c9; border-radius:5px; }
.audio-player strong { display:block; margin-bottom:.65rem; color:var(--ink); font:800 1rem "Nunito",sans-serif; }
.audio-player audio { display:block; width:100%; }
.pdf-viewer { overflow:hidden; background:var(--green-pale); border:1px solid #d7e8d3; border-radius:5px; }
.pdf-viewer summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; color:var(--ink); cursor:pointer; list-style:none; }
.pdf-viewer summary::-webkit-details-marker { display:none; }
.pdf-viewer summary b { color:var(--green-dark); font:800 .86rem "Nunito",sans-serif; white-space:nowrap; }
.pdf-viewer[open] summary { border-bottom:1px solid #d7e8d3; }
.pdf-frame { padding:.8rem; background:white; }
.pdf-frame iframe { display:block; width:100%; height:min(68vh,680px); border:0; background:#eee; }
.pdf-frame a { display:block; padding:.8rem .2rem .2rem; color:var(--green-dark); text-align:right; font-size:.82rem; }
.video { position:relative; aspect-ratio:16/9; margin:1rem 0 2rem; overflow:hidden; border-radius:5px; background:#182719; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.75rem; margin-top:2rem; }
.gallery img { width:100%; height:180px; object-fit:cover; border-radius:3px; background:#ddd; }
footer { display:flex; align-items:center; gap:2rem; padding:2.3rem clamp(1.25rem,7vw,7rem); background:#202820; color:white; font-size:.82rem; }
footer img { width:150px; filter:brightness(0) invert(1); }
footer div { display:flex; flex-direction:column; gap:.25rem; }
footer strong { font:800 1rem "Nunito",sans-serif; }
footer span { color:#bdd0bd; }
footer a { margin-left:auto; color:white; }
@media(max-width:760px){ .brandbar{height:76px}.back-home{font-size:0}.back-home span{font-size:1.3rem}.hero{padding:3.5rem 2rem;min-height:auto}.hero>p{max-width:100%}.hero-visual{position:relative;right:auto;top:auto;bottom:auto;width:min(78%,290px);height:350px;margin:2rem auto 1rem}.world-badge{left:-34px;width:88px}.start{align-self:center}main{padding:4rem 1rem}.intro{display:block}.intro h2{text-align:left;margin-top:1rem}.card{grid-column:span 12;min-height:240px}footer{align-items:flex-start;gap:1rem;flex-direction:column}footer a{margin-left:0} }