/* Layout: one centred column; a dark-green hero card, then a 2-column grid of section cards. */
:root{
 --bg:#09201a; --panel:#0c2b22; --card:#1d4536; --card-hi:#1f5244;
 --line:#2a5446; --copper:#c07a3e;
 /* Цвета текста (палитра Анны) */
 --text-primary:#E7D7A2; --text-body:#D6C184; --text-secondary:#B79D5E;
 --text-muted:#8E7A49; --text-accent:#F0C96A; --text-on-gold:#17352E;
 --fg:var(--text-primary); --muted:var(--text-secondary); --lime:var(--text-accent); --lime-ink:var(--text-on-gold);
 --f-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
 --f-body:"Manrope","Segoe UI",system-ui,sans-serif;
 color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.55;
 padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px}
a{color:inherit}
.wrap{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px clamp(20px,4vw,36px) clamp(20px,4vw,36px);display:flex;flex-direction:column;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--f-display);font-weight:600;font-size:1.3rem;letter-spacing:-.01em;width:fit-content}
.brand .badge{width:40px;height:40px;border-radius:10px;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center}
.brand .badge svg{width:22px;height:22px}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(1.7rem,4.6vw,2.5rem);line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance}
.lead{color:var(--muted);font-size:1.08rem;margin:0;max-width:62ch}
hr{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:620px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:14px;padding:18px 20px;text-decoration:none;display:flex;flex-direction:column;gap:6px;border:1px solid transparent;transition:background .18s,border-color .18s,transform .18s}
.card:hover{background:var(--card-hi);border-color:color-mix(in srgb,var(--lime) 35%,transparent);transform:translateY(-2px)}
.card:focus-visible,.brand:focus-visible,.back:focus-visible,.nav a:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.card .ico{width:22px;height:22px;color:var(--lime);margin-bottom:6px}
.card h2{font-family:var(--f-display);font-weight:600;font-size:1.2rem;margin:0}
.card p{margin:0;color:var(--muted);font-size:.92rem}
.card .go{margin-top:8px;font-size:.85rem;color:var(--lime);font-weight:600}
.nav{display:flex;flex-wrap:wrap;gap:8px}
.nav a{text-decoration:none;font-size:.88rem;padding:6px 12px;border-radius:999px;background:var(--card);color:var(--muted)}
.nav a[aria-current]{background:var(--lime);color:var(--lime-ink);font-weight:600}
.back{display:inline-flex;align-items:center;gap:4px;color:var(--muted);text-decoration:none;font-size:.9rem;width:fit-content}
.back svg{width:16px;height:16px}
.head-ico{width:44px;height:44px;border-radius:12px;background:var(--card);color:var(--lime);display:grid;place-items:center}
.head-ico svg{width:24px;height:24px}
.soon{display:inline-block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--lime);border:1px solid color-mix(in srgb,var(--lime) 45%,transparent);border-radius:999px;padding:3px 10px;width:fit-content}
.topics{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.topics li{background:var(--card);border-radius:12px;padding:14px 18px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.topics li span:last-child{color:var(--muted);font-size:.82rem;white-space:nowrap}
footer{color:var(--muted);font-size:.85rem;text-align:center}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}

/* ===== Статьи (artigos) ===== */
/* Ссылка на статью в списке тем раздела */
.topics li a{color:inherit;text-decoration:none;font-weight:600}
.topics li a:hover{color:var(--lime)}
.topics li span.new{color:var(--lime);font-weight:600}
/* Текст статьи */
.meta{color:var(--muted);font-size:.85rem;margin:0}
.article{display:flex;flex-direction:column;gap:14px;max-width:68ch}
.article h2{font-family:var(--f-display);font-weight:600;font-size:1.35rem;margin:18px 0 0}
.article h3{font-family:var(--f-display);font-weight:600;font-size:1.1rem;margin:10px 0 0}
.article p,.article ul,.article ol{margin:0}
.article ul,.article ol{padding-left:22px;display:flex;flex-direction:column;gap:6px}
.article a{color:var(--lime)}
.article strong{color:var(--fg)}
.article figure{margin:6px 0}
.article img{max-width:100%;height:auto;border-radius:12px;display:block;border:1px solid var(--line)}
.article figcaption{color:var(--muted);font-size:.85rem;margin-top:6px}
/* Блок «Dica» — лайфхак */
.tip{background:var(--card);border-left:4px solid var(--copper);border-radius:10px;padding:14px 18px}
.tip b{color:var(--lime);display:block;margin-bottom:4px}
/* Кнопка (например, на модель в Kiwify) */
.btn{display:inline-block;background:var(--lime);color:var(--lime-ink)!important;font-weight:700;text-decoration:none;padding:10px 18px;border-radius:999px;width:fit-content}

/* Шапка страницы: «назад», иконка и заголовок в одну строку */
.page-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px}
.page-head .back{padding-right:14px;border-right:1px solid var(--line)}
.page-head .head-ico{width:40px;height:40px;border-radius:10px}
.page-head h1{font-size:clamp(1.5rem,3.6vw,2.1rem)}
@media (max-width:520px){
 .page-head{flex-wrap:nowrap;gap:10px}
 .page-head .back{padding-right:10px;flex:none}
 .page-head .back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .page-head .head-ico{flex:none;width:34px;height:34px}
 .page-head h1{min-width:0;font-size:1.45rem}
}

/* Распределение цветов текста */
body{color:var(--text-body)}
h1,h2,h3,.brand,.article strong,.rows dd,.topics li a{color:var(--text-primary)}
.meta,footer,.hint,.card p,figcaption,.topics li span:last-child{color:var(--text-muted)}
.card p{color:var(--text-secondary)}

/* Вся плашка статьи кликабельна, а не только текст */
.topics li{position:relative;transition:background .18s}
.topics li a::after{content:"";position:absolute;inset:0;border-radius:12px}
.topics li:has(a):hover{background:var(--card-hi)}
.topics li:has(a:focus-visible){outline:2px solid var(--lime);outline-offset:2px}
.topics li a:focus-visible{outline:none}

/* Шапка внутренних страниц: только значок логотипа и вкладки разделов в одну строку */
.site-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}
.site-head .brand{flex:none}
@media (max-width:620px){
 .site-head{flex-wrap:nowrap;gap:10px}
 .site-head .nav{flex-wrap:nowrap;overflow-x:auto;min-width:0;scrollbar-width:none;padding-block:2px}
 .site-head .nav::-webkit-scrollbar{display:none}
 .site-head .nav a{white-space:nowrap;flex:none}
}

/* Плашка «Em construção» — того же цвета, что «Em breve» */
.soon{color:var(--text-muted);border-color:color-mix(in srgb,var(--text-muted) 70%,transparent)}

/* Логотип UP */
.brand .badge{background:none;width:40px;height:40px;border-radius:0}
.brand .badge .logo-up{width:40px;height:40px;display:block}

/* Скрытые элементы всегда скрыты */
[hidden]{display:none!important}

/* Кнопки увеличения/уменьшения в полях калькуляторов */
.spin{display:flex;flex-direction:column;gap:2px;margin-left:8px;flex:none}
.spin button{width:28px;height:20px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--text-secondary);cursor:pointer}
.spin button:hover{color:var(--lime);border-color:var(--lime)}
.spin button:focus-visible{outline:2px solid var(--lime);outline-offset:1px}
.spin svg{width:14px;height:14px}
.spin button{touch-action:none;user-select:none;-webkit-user-select:none}