/* ===== Tokens ===== */
:root{
  /* cores (identidade Site Zero Um) */
  --bg:#0F172A;--bg2:#0B1120;--surface:#1E293B;--linha:#334155;
  --texto:#F8FAFC;--texto2:#94A3B8;          /* sobre escuro: AA (>=6:1) */
  --verde:#10B981;--verde2:#34D399;
  --verde-txt:#047857;                        /* verde p/ texto pequeno sobre branco (AA 5.5:1) */
  --verde-tit:#059669;                        /* verde p/ títulos grandes sobre branco (>=3:1) */
  --ink:#0F172A;--ink2:#475569;--ink3:#64748B;--linha-c:#E2E8F0;--soft:#F1F5F9;
  --font:'Bai Jamjuree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* raios (centralizados) */
  --radius-xs:4px;   /* chips, itens pequenos */
  --radius-sm:8px;   /* botões, itens de lista */
  --radius-md:12px;  /* cards */
  --radius-lg:16px;  /* painéis grandes */

  /* espaçamento (múltiplos de 8) */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s8:96px;--s10:128px;
  --gutter:24px;              /* padding lateral do container */
  --sec:64px;                 /* respiro vertical de seção */
  --gap:24px;                 /* gap de cards */
  --margem:8px;               /* margem externa dos painéis */

  /* escala tipográfica (~1.25) */
  --t-sm:.875rem;                                            /* 14 */
  --t-base:clamp(1rem,.95rem + .25vw,1.125rem);              /* 16 → 18 */
  --t-lg:clamp(1.125rem,1.05rem + .4vw,1.25rem);             /* 18 → 20 */
  --t-h3:clamp(1.25rem,1.1rem + .6vw,1.5625rem);             /* 20 → 25 */
  --t-h2:clamp(2rem,1.4rem + 2.6vw,3.0625rem);               /* 32 → 49 */
  --t-h1:clamp(2.5rem,1.3rem + 5vw,4.75rem);                 /* 40 → 76 */
  --t-num:clamp(3.125rem,2.2rem + 4vw,4.75rem);              /* números de destaque */
}
@media (min-width:700px){:root{--gutter:32px;--sec:96px;--gap:32px;--margem:16px}}
@media (min-width:1100px){:root{--gutter:48px;--sec:128px}}

/* ===== Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:#fff;color:var(--ink);font:400 var(--t-base)/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul,ol{list-style:none}
h1,h2,h3{font-weight:400;text-wrap:balance}
h1,h2{text-transform:uppercase;letter-spacing:.01em;line-height:1.1}
h3{line-height:1.2;font-size:var(--t-h3);font-weight:600}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
b{font-weight:700}
.l{font-weight:300}                       /* light só em títulos grandes */
h1 b,h2 b{color:var(--verde)}
.claro h2 b{color:var(--verde-tit)}
p{max-width:65ch}
.corpo{font-size:var(--t-lg);line-height:1.6}

/* ===== Container 1280 ===== */
.in{position:relative;z-index:2;width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--sec)}
.panel{position:relative;overflow:hidden;background:var(--bg);color:var(--texto);margin:var(--margem);border-radius:var(--radius-lg)}
.claro{background:#fff;color:var(--ink)}
.claro p{color:var(--ink2)}

/* fundos decorativos */
.glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 0% 0%,rgba(46,78,151,.85) 0%,rgba(46,78,151,.28) 45%,transparent 75%)}
.colunas{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(90deg,transparent calc(100% - 1px),rgba(148,163,184,.09) 0);background-size:25% 100%;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.anel{position:absolute;z-index:1;border-radius:50%;border:var(--esp,26px) solid var(--verde);pointer-events:none;opacity:.95}
.a1{--esp:32px;width:260px;height:260px;left:-140px;top:-140px}
.a2{--esp:32px;width:300px;height:300px;right:-170px;bottom:-170px}
.a3{--esp:26px;width:220px;height:220px;right:-140px;top:-150px;opacity:.85}
.a4{--esp:28px;width:240px;height:240px;right:-120px;bottom:-120px}
.a5{--esp:26px;width:240px;height:240px;left:-150px;bottom:-150px;opacity:.85}

/* títulos de seção */
.eyebrow{display:block;font-size:var(--t-sm);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--verde);margin-bottom:var(--s2)}
.claro .eyebrow{color:var(--verde-txt)}
.sec-head{margin-bottom:var(--s5)}
.sec-head h2{margin-bottom:0}
.sec-head p{margin-top:var(--s3)}
.split .sec-head{margin-bottom:0}
.split{display:grid;gap:var(--s4)}
.split>.faq{align-self:start}

/* ===== Botões / badges (alvo >= 44px) ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;background:var(--verde);color:var(--ink);font:600 var(--t-base)/1.2 var(--font);letter-spacing:.02em;text-decoration:none;padding:16px 40px;border-radius:var(--radius-sm);transition:background .15s,transform .15s;border:0}
.btn:hover{background:var(--verde2);transform:translateY(-1px)}
.btn.sm{min-height:48px;padding:12px 24px;font-size:1rem}
.btn.block{display:flex;width:100%}
a:focus-visible,summary:focus-visible{outline:2px solid var(--verde2);outline-offset:3px;border-radius:var(--radius-xs)}
.nota{font-size:var(--t-sm);color:var(--texto2)}
.chip{display:inline-block;background:var(--verde);color:var(--ink);font-weight:600;font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;line-height:1;padding:8px 12px;border-radius:var(--radius-xs)}
.pilula{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;padding:0 var(--s2) 0 var(--s1);background:rgba(30,41,59,.62);border:1px solid rgba(148,163,184,.25);border-radius:999px;font-size:var(--t-sm);font-weight:400;color:var(--texto2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pilula b{color:var(--texto);font-weight:600}
.pilula .av{width:32px;height:32px;border-radius:50%;background:var(--bg2) url(/comunidade/logo-marca.png) center/48% no-repeat;border:1px solid rgba(148,163,184,.3)}

/* ===== Hero ===== */
.hero{display:flex;flex-direction:column;padding-block:var(--s3) var(--s8);min-height:min(calc(100svh - 2*var(--margem)),880px)}
.hero>.in{display:flex;flex-direction:column;flex:1}
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:48px}
.logo{display:inline-flex;align-items:center;min-height:44px}
.logo img{height:40px;width:auto}
.hero-txt{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;max-width:1000px;margin-inline:auto;padding-top:var(--s6)}
.hero h1{margin:var(--s3) 0}
.hero .sub{font-size:var(--t-lg);color:var(--texto2);max-width:60ch;margin:0 auto var(--s4)}
.cta-row{display:flex;flex-direction:column;align-items:center;gap:var(--s2)}


/* ===== Cards ===== */
.cards{display:grid;gap:var(--gap)}
.card{background:rgba(30,41,59,.55);border:1px solid rgba(148,163,184,.2);border-radius:var(--radius-md);padding:var(--s4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ico{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-sm);background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.4);margin-bottom:var(--s6)}
.ico svg{width:24px;height:24px;fill:none;stroke:var(--verde);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:var(--s1)}
.card p{color:var(--texto2)}

/* ===== Tabela ===== */
.tabela{border:1px solid var(--linha-c);border-radius:var(--radius-md);overflow:hidden;background:#fff}
.tr{display:grid;grid-template-columns:1fr;border-top:1px solid var(--linha-c)}
.tr:first-child{border-top:0}
.tr>span{padding:var(--s1) var(--s3);color:var(--ink2);font-weight:500}
.tr .k{font-weight:600;color:var(--ink);padding-top:var(--s2);padding-bottom:var(--s1);background:var(--soft)}
.tr .mais{color:var(--ink);font-weight:600}
.tr>span[data-l]{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
.tr>span[data-l]::before{content:attr(data-l);font-size:var(--t-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-weight:500;flex:none}
.tr>span[data-l]:last-child{text-align:right;padding-bottom:var(--s2)}
.tr>span[data-l].mais::before{color:var(--verde-txt)}
.th{display:none}

/* ===== Passos ===== */
.passos{display:grid;gap:var(--gap)}
.passos li{background:rgba(30,41,59,.55);border:1px solid rgba(148,163,184,.2);border-radius:var(--radius-md);padding:var(--s4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.passos .n{display:block;font-size:var(--t-num);font-weight:700;line-height:1;color:var(--verde);margin-bottom:var(--s5)}
.passos h3{margin-bottom:var(--s1)}
.passos p{color:var(--texto2)}
.passos a{color:var(--verde2);text-underline-offset:3px;word-break:break-word}

/* ===== Preço ===== */
.preco-card{position:relative;overflow:hidden;background:var(--bg);color:var(--texto);border-radius:var(--radius-lg);padding:var(--s5) var(--s3);width:100%;max-width:560px;justify-self:center}
.pc-in{position:relative;z-index:2}
.preco-card .valor{font-size:var(--t-num);font-weight:700;line-height:1;margin:var(--s2) 0 var(--s1)}
.preco-card .depois{color:var(--texto2);font-size:var(--t-lg);margin-bottom:var(--s4)}
.preco-card .nota{text-align:center;margin-top:var(--s2);max-width:none}
.lista{margin-bottom:var(--s4)}
.lista li{display:flex;align-items:center;gap:var(--s2);min-height:48px;border-top:1px solid rgba(148,163,184,.18);color:#E2E8F0}
.lista li::before{content:"";flex:none;width:20px;height:20px;border-radius:var(--radius-xs);background:var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat}

/* ===== FAQ ===== */
.faq{display:grid;gap:var(--s2)}
details{background:rgba(30,41,59,.55);border:1px solid rgba(148,163,184,.2);border-radius:var(--radius-md);padding:0 var(--s3)}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:64px;padding:var(--s2) 0;font-size:var(--t-lg);font-weight:600;line-height:1.3}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.75rem;font-weight:300;color:var(--verde);line-height:1;transition:transform .2s;flex:none}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--texto2);padding-bottom:var(--s3)}
details a{color:var(--verde2)}
.final{text-align:center;margin-top:var(--s10);display:flex;flex-direction:column;align-items:center}
.final h2{margin-bottom:var(--s2)}
.final p{color:var(--texto2);margin-bottom:var(--s4)}

/* ===== Rodapé ===== */
.rodape{background:var(--bg);color:var(--texto2);margin:var(--margem);border-radius:var(--radius-lg);padding-block:var(--s5);font-size:var(--t-sm)}
.rodape .in{display:flex;flex-direction:column;gap:var(--s3);align-items:flex-start}
.rodape nav{display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.rodape nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--texto);font-size:1rem}
.rodape nav a:hover{color:var(--verde)}

/* ===== >= 700px ===== */
@media (min-width:700px){
  .hero{padding-top:var(--s4)}
  .logo img{height:48px}
  .cta-row{flex-direction:row;gap:var(--s3)}
  .cards{grid-template-columns:repeat(6,1fr)}
  .card{grid-column:span 2}
  .card.wide{grid-column:span 3}
  .passos{grid-template-columns:repeat(3,1fr)}
  .tr{grid-template-columns:1.1fr 1fr 1.3fr;align-items:center}
  .th{display:grid;background:var(--soft)}
  .th span{font-size:var(--t-sm);letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:var(--s3);color:var(--ink2)}
  .th .mais{color:var(--verde-txt);background:rgba(16,185,129,.1)}
  .tr>span{padding:var(--s3)}
  .tr .k{background:none}
  .tr>span[data-l]{display:block}
  .tr>span[data-l]::before{display:none}
  .tr>span[data-l]:last-child{text-align:left;padding-bottom:var(--s3)}
  .tr .mais{background:rgba(16,185,129,.07)}
  .preco-card{padding:var(--s6) var(--s5)}
  .rodape .in{flex-direction:row;align-items:center;justify-content:space-between}
  .a1{width:380px;height:380px;left:-190px;top:-190px;--esp:44px}
  .a2{width:460px;height:460px;right:-230px;bottom:-230px;--esp:44px}
  .a3{width:360px;height:360px;right:-170px;top:-130px;--esp:36px}
}
/* ===== >= 1000px ===== */
@media (min-width:1000px){
  .split{grid-template-columns:1fr 1fr;gap:var(--s8)}
  .split.centro{align-items:center}
  .split>.sec-head h2{max-width:12ch}
  .hero{padding-bottom:var(--s10)}
  .a1{width:520px;height:520px;left:-250px;top:-250px;--esp:60px}
  .a2{width:600px;height:600px;right:-290px;bottom:-290px;--esp:60px}
}
/* ===== Animações de entrada (só com JS ativo) =====
   O script no <head> põe a classe "js" no <html>; sem JS nada é escondido.
   A lista de seletores abaixo deve ser igual à do script no fim do HTML. */
.js .top,.js .hero-txt>*,.js .sec-head>*,.js .split>p,.js .card,.js .tr,.js .passos li,.js .preco-card,.js .pc-in>*:not(.lista),.js .lista li,.js details,.js .final>*,.js .rodape .in>*{opacity:0}
html.js .vis.vis{opacity:1;animation:rv .5s ease-out var(--d,0ms) backwards}
@keyframes rv{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.btn{transition:none}
  .js .top,.js .hero-txt>*,.js .sec-head>*,.js .split>p,.js .card,.js .tr,.js .passos li,.js .preco-card,.js .pc-in>*:not(.lista),.js .lista li,.js details,.js .final>*,.js .rodape .in>*{opacity:1}
  .js .vis{animation:none}
}