/* Conta Sem Stress — blog.css (identidade do site: Space Grotesk + Manrope, azul #2B5BFF, laranja #FF6B1F) */
:root{--bg:#FAFAF7;--brand:#2B5BFF;--brand-700:#1B37B8;--brand-soft:#EDF1FF;--accent:#FF6B1F;--accent-soft:#FFF0E6;--head:#0B1020;--ink:#252B3A;--muted:#5C6679;--line:#E8E8E0;--surface:#FFFFFF;--shadow:0 18px 50px rgba(11,16,32,.10);--wa:#25D366;--radius:18px}
@media (prefers-color-scheme:dark){:root{--bg:#080A12;--brand:#6E8CFF;--brand-700:#AFC0FF;--brand-soft:#141B33;--accent:#FF8A45;--accent-soft:#2A1A10;--head:#FFFFFF;--ink:#DFE4EE;--muted:#96A0B6;--line:#242B3F;--surface:#111624;--shadow:0 18px 50px rgba(0,0,0,.45)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.7 Manrope,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
h1,h2,h3,.brand-name{font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--head);line-height:1.2;letter-spacing:-.01em}
a{color:var(--brand)}a:hover{color:var(--brand-700)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
img{max-width:100%;height:auto}
.wrap{width:min(100% - 40px,1200px);margin-inline:auto}
.narrow{width:min(100% - 40px,780px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 14px;border-radius:10px;z-index:100}.skip:focus{left:12px}
/* header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:38px;height:38px;border-radius:13px;background:var(--brand);display:grid;place-items:center;flex:none}
.brand-mark svg{width:22px;height:22px}
.brand-name{font-weight:700;font-size:1.15rem;color:var(--head)}
.nav{display:flex;align-items:center;gap:22px}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem}.nav a:hover,.nav a[aria-current]{color:var(--brand)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:700;text-decoration:none;line-height:1.2;border:0}
.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{color:#fff;filter:brightness(.95)}
.btn-wa{background:var(--wa);color:#0B1020}.btn-wa:hover{color:#0B1020;filter:brightness(.96)}
.btn svg{width:20px;height:20px;flex:none}
@media (max-width:860px){.nav .nl{display:none}.site-header .btn{padding:10px 16px;font-size:.9rem}}
@media (max-width:420px){.brand-name{font-size:1rem}.site-header .btn span{display:none}}
/* breadcrumb */
.crumbs{font-size:.88rem;color:var(--muted);margin:22px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--muted)}
.crumbs a{color:var(--muted)}
/* article */
.post-head{padding:18px 0 8px}
.tag{display:inline-block;background:var(--brand-soft);color:var(--brand-700);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;padding:5px 12px;border-radius:999px;text-decoration:none}
.post-head h1{font-size:clamp(1.9rem,4.4vw,2.8rem);margin:14px 0 14px}
.byline{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--muted);font-size:.92rem}
.byline strong{color:var(--ink)}
.summary{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:var(--radius);padding:18px 22px;margin:26px 0;box-shadow:var(--shadow)}
.summary h2{font-size:1.05rem;margin:0 0 6px}
.summary ul{margin:0;padding-left:20px}.summary li{margin:4px 0}
.toc{border:1px solid var(--line);border-radius:var(--radius);padding:14px 22px;margin:0 0 26px;background:var(--surface)}
.toc summary{cursor:pointer;font-weight:700;color:var(--head)}
.toc ol{margin:10px 0 4px;padding-left:20px}.toc a{text-decoration:none}
.prose h2{font-size:clamp(1.4rem,3vw,1.75rem);margin:44px 0 12px;scroll-margin-top:96px}
.prose h3{font-size:1.2rem;margin:28px 0 8px;scroll-margin-top:96px}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose li{margin:6px 0}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:.95rem;background:var(--surface);border-radius:12px;overflow:hidden}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--brand-soft);color:var(--head)}
.table-scroll{overflow-x:auto}
.note{background:var(--accent-soft);border-radius:14px;padding:14px 18px;margin:0 0 18px;font-size:.96rem}
.todo-box{border:2px dashed var(--accent);border-radius:14px;padding:16px 20px;margin:28px 0;background:var(--accent-soft)}
.todo-box h2{font-size:1.25rem;margin:0 0 8px}
.cta{display:grid;grid-template-columns:1fr auto;gap:16px 24px;align-items:center;background:linear-gradient(135deg,var(--brand),var(--brand-700));color:#fff;border-radius:22px;padding:24px 26px;margin:34px 0;box-shadow:var(--shadow)}
.cta p{margin:0;color:#EAF0FF}.cta .cta-title{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;font-size:1.25rem;color:#fff;margin:0 0 4px}
@media (prefers-color-scheme:dark){.cta{background:linear-gradient(135deg,#1B37B8,#111a4d)}}
@media (max-width:640px){.cta{grid-template-columns:1fr}.cta .btn{width:100%}}
.faq details{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px 18px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700;color:var(--head)}
.faq details p{margin:10px 0 0}
.reviewer{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);padding:18px 20px;margin:34px 0}
.reviewer img{width:64px;height:64px;border-radius:16px;flex:none;background:var(--brand-soft)}
.reviewer p{margin:4px 0 0;font-size:.94rem;color:var(--muted)}
.reviewer strong{color:var(--head)}
.related{margin:40px 0 10px}
.related h2{font-size:1.35rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;padding:0;margin:0;list-style:none}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;transition:transform .15s,box-shadow .15s;position:relative}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card h3{font-size:1.06rem;margin:6px 0 6px}.card h3 a{color:var(--head);text-decoration:none}
.card h3 a::after{content:"";position:absolute;inset:0}
.card p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.55}
.disclaimer-text{font-size:.9rem;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;margin-top:30px}
/* index */
.hero{padding:44px 0 14px}
.hero h1{font-size:clamp(2rem,5vw,3.1rem);margin:12px 0}
.hero p{max-width:720px;color:var(--muted);font-size:1.08rem}
.cat{padding:26px 0}
.cat h2{font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 6px}
.cat>p{color:var(--muted);margin:0 0 18px}
.catnav{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
/* footer */
.site-footer{margin-top:60px;border-top:1px solid var(--line);background:var(--surface);padding:36px 0 110px;font-size:.92rem;color:var(--muted)}
.site-footer .cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:14px}
.site-footer a{color:var(--ink);text-decoration:none}.site-footer a:hover{color:var(--brand)}
.site-footer p{margin:6px 0}
.legal{font-weight:700;color:var(--ink)}
/* floating whatsapp */
.wa-float{position:fixed;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:60}
.wa-float svg{width:32px;height:32px}
@media print{.site-header,.wa-float,.cta,.site-footer nav{display:none}}
/* ===== Capi, a capivara (mesmas ilustrações e animação zenFloat da home) ===== */
@keyframes zenFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes capiPop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.capi{display:block;flex:none;position:relative;isolation:isolate;line-height:0}
.capi img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.capi-flip img{transform:scaleX(-1)}
/* cabeçalho */
.brand-capi{width:40px;margin:-6px 0 -6px -2px}
/* hero do índice */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px 40px;align-items:center}
.hero-art{position:relative;display:grid;justify-items:center;padding:28px 0 8px}
.hero-float{position:relative;z-index:0;width:min(86%,340px);animation:zenFloat 6s ease-in-out infinite}
.hero-blob{position:absolute;z-index:-1;inset:-10% -16%;border-radius:46% 54% 52% 48%/50% 46% 54% 50%;background:linear-gradient(160deg,var(--brand-soft),var(--accent-soft))}
.hero-capi img{padding:5%}
.hero-capi::after{content:"";position:absolute;z-index:-1;width:56%;height:5%;left:22%;bottom:5%;border-radius:50%;background:rgba(24,18,12,.18);filter:blur(8px)}
.hero-badge{position:absolute;display:flex;align-items:center;gap:11px;margin:0;padding:10px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font-size:.86rem;font-weight:700;line-height:1.3;color:var(--head);max-width:250px;animation:capiPop .5s ease-out both}
.hero-badge small{display:block;font-weight:500;color:var(--muted);font-size:.78rem}
.hero-badge-1{left:0;top:6%}.hero-badge-2{right:0;bottom:4%;animation-delay:.15s}
.hb-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none}
.hb-blue{background:var(--brand)}.hb-orange{background:var(--accent)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-art{padding:18px 0 34px}.hero-float{width:min(62%,250px)}.hero-badge{font-size:.8rem;padding:8px 12px;max-width:205px}.hero-badge-1{top:0}.hero-badge-2{bottom:0}}
/* cabeçalhos de categoria */
.cat-head{display:flex;align-items:center;gap:16px;margin:0 0 18px}
.cat-head>div>p{color:var(--muted);margin:0}
.cat-capi{width:84px;background:var(--brand-soft);border-radius:50%;padding:4px}
@media (max-width:640px){.cat-capi{width:62px}}
/* blocos de CTA */
.cta{grid-template-columns:auto 1fr auto}
.cta-capi{width:96px;margin:-18px 0 -10px -6px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
@media (max-width:640px){.cta{grid-template-columns:64px 1fr}.cta .btn{grid-column:1/-1}.cta-capi{width:64px;margin:0}}
/* FAQ */
.faq-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:38px}
.faq-head h2{margin:0 0 8px}
.faq-capi{width:78px;margin-bottom:-6px}
@media (max-width:640px){.faq-capi{width:58px}}
/* revisor */
.reviewer-capi{width:68px;border-radius:16px;background:var(--brand-soft)}
/* rodapé */
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-capi{width:64px}
/* capivara flutuante (acima do botão do WhatsApp, fora da coluna de texto) */
.capi-float{position:fixed;right:12px;bottom:84px;z-index:55;display:flex;align-items:flex-end;gap:4px;text-decoration:none}
.capi-floating{width:84px;animation:zenFloat 6s ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(11,16,32,.18))}
.capi-bubble{display:none;margin-bottom:46px;padding:8px 12px;border-radius:16px 16px 4px 16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font-size:.82rem;line-height:1.3;color:var(--muted);white-space:nowrap}
.capi-bubble strong{display:block;color:var(--head)}
.capi-float:hover .capi-bubble,.capi-float:focus-visible .capi-bubble{display:block}
@media (min-width:1280px){.capi-bubble{display:block;animation:capiPop .5s ease-out 1.2s both}}
@media (max-width:1060px){.capi-float{right:20px;bottom:86px}.capi-floating{width:60px}}
@media (max-width:640px){.capi-float{right:28px;bottom:66px;z-index:59}.capi-floating{width:46px;animation-duration:7s}.foot-capi{width:52px}}
/* no índice a grade de cards ocupa a largura toda: a Capi flutuante só aparece quando sobra margem (o hero já tem a Capi zen flutuando) */
@media (min-width:641px) and (max-width:1439px){.page-index .capi-float{display:none}}
@media (prefers-reduced-motion:reduce){.hero-float,.capi-floating,.hero-badge,.capi-bubble{animation:none!important}}
@media print{.capi-float,.cta-capi,.faq-capi{display:none}}