/* ===== Tema claro Lothem: branco, azul-marinho, verde e prata ===== */
:root{
  --verde:#2E9058; --verde-d:#1F6E43; --verde-l:#EAF5EE; --verde-b:#CFE5D8;
  --prata:#C3C7CE; --prata-l:#F4F6F8; --prata-d:#8A929E;
  /* os acentos dourados viram verde */
  --gold:#2E9058; --gold-d:#1F6E43; --gold2:#2E9058;
  --paper:#FFFFFF; --cream:#F4F6F8; --line:#E3E6EB; --line2:#CDD3DA;
  --green:#23824B; --green-bg:#EAF5EE;
}
body{ background:#fff; }

/* Topo branco com o logo num selo azul-marinho */
.top{ background:#fff; border-bottom:1px solid var(--line); box-shadow:0 2px 14px rgba(7,38,67,.05); }
.brand{ display:inline-flex; background:var(--navy); border-radius:12px; padding:5px 10px; }
.brand img{ height:36px; }
.top-tag{ color:var(--verde-d); background:var(--verde-l); border:1px solid var(--verde-b); border-radius:99px; padding:6px 12px; font-size:10.5px; letter-spacing:.14em; }

/* Botões */
.btn.gold{ background:linear-gradient(135deg,#38A468,#2E9058 55%,#247A4B); color:#fff; box-shadow:0 10px 24px rgba(46,144,88,.28); }
.btn.gold:hover{ box-shadow:0 14px 30px rgba(46,144,88,.36); }
.btn:focus-visible, .opt:focus-visible, .back:focus-visible, a:focus-visible{ outline-color:var(--verde); }

/* Landing */
.hero{ background:#fff; color:var(--ink); padding-block:22px 34px; }
.hero::before{ content:''; display:none; position:absolute; right:16px; top:18px; width:120px; height:72px; background-image:radial-gradient(var(--prata) 1.8px,transparent 2px); background-size:16px 16px; opacity:.8; }
.arc{ display:none; }
.hero-grid{ position:relative; display:grid; gap:28px; }
.hero-in{ max-width:600px; margin-inline:auto; width:100%; }
.eyebrow{ color:var(--verde-d); }
.hero h1{ color:var(--navy); }
.hero h1 em{ color:var(--verde); }
.hero .lead{ color:var(--text); }
.checks li{ color:var(--text); }
.checks .ic{ background:var(--verde); color:#fff; }
.micro{ color:var(--muted); }
.stats{ margin-top:6px; box-shadow:0 10px 26px rgba(7,38,67,.06); }
.stats b{ color:var(--navy); }
.author img{ box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--verde); }
.how li::before{ background:var(--verde); color:#fff; }

/* Modelo do relatório no topo (como no banner) */
.hero-art{ position:relative; padding:18px 6px 6px; }
.hm-shape{ position:absolute; inset:30px -30px 0 40px; border-radius:36px; background:linear-gradient(150deg,var(--navy2),var(--navy) 60%,var(--deep)); transform:rotate(-5deg); }
.hm-sq{ position:absolute; left:6%; top:0; width:110px; height:110px; border-radius:24px; background:var(--verde); transform:rotate(-5deg); }
.hm{ position:relative; background:#fff; border:1px solid var(--line); border-radius:20px; padding:16px; box-shadow:0 24px 50px rgba(4,22,40,.28); max-width:440px; margin:0 auto; }
.hm-h{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.hm-h b{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); font-weight:800; }
.hm-lg{ background:var(--navy); border-radius:8px; padding:3px 7px; flex:none; }
.hm-lg img{ height:22px; width:auto; display:block; }
.hm-row{ display:grid; grid-template-columns:1.25fr 1fr; gap:10px; }
.hm-row + .hm-row{ margin-top:10px; }
.hm-row.dois{ grid-template-columns:1fr 1fr; }
.hm-c{ border:1px solid var(--line); border-radius:14px; padding:10px 12px; }
.hm-c small{ display:block; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--prata-d); font-weight:800; }
.hm-c strong{ display:block; font-family:var(--serif); font-weight:800; font-size:34px; line-height:1.05; color:var(--navy); margin-top:2px; }
.hm-c strong.v{ color:var(--verde-d); }
.hm-c em{ display:block; font-style:normal; font-family:var(--serif); font-weight:800; font-size:18px; color:var(--verde-d); margin-top:4px; }
.hm-c > span{ font-size:11.5px; color:var(--text); }
.hm-scale{ display:flex; gap:2px; margin-top:7px; }
.hm-scale i{ flex:1; height:6px; border-radius:2px; }
.hm-scale i.on{ outline:2px solid var(--navy); outline-offset:1px; }
.hm-oc{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px; }
.hm-oc span{ border:1px solid var(--line); border-radius:10px; padding:7px 2px; text-align:center; font-size:10px; font-weight:700; color:var(--text); line-height:1.25; }
.hm-oc span b{ display:block; font-size:8.5px; color:var(--verde-d); letter-spacing:.02em; }
.hm-oc .ic{ display:block; width:16px; height:16px; margin:0 auto 3px; color:var(--verde); stroke-width:3; }
.hm-tag{ margin:10px 0 0; text-align:right; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--prata-d); font-weight:700; }
@media (min-width:960px){
  .hero::before{ display:block; }
  .hero{ padding-block:56px 70px; }
  .hero-grid{ grid-template-columns:1.2fr .8fr; }
  .hero-grid{ grid-template-columns:1.1fr .9fr; align-items:center; gap:56px; }
  .hero-in{ margin-inline:0; }
  .hero .btn.big{ margin-inline:0; }
  .micro{ text-align:left; }
  .hm{ padding:20px; }
  .hm-c strong{ font-size:40px; }
}

/* Questionário */
.bar{ background:#E8EBEF; }
.bar i{ background:linear-gradient(90deg,var(--verde),#4FB57B); }
.opt[aria-checked='true']{ border-color:var(--verde); background:var(--verde-l); box-shadow:0 0 0 1px var(--verde) inset; }
.opt[aria-checked='true'] .dot{ background:var(--verde); border-color:var(--verde); }
.field input:focus{ border-color:var(--verde); box-shadow:0 0 0 4px rgba(46,144,88,.15); }

/* Análise */
.spinner{ border-color:#E3E6EB; border-top-color:var(--verde); }
.alist li .ic{ background:#E3E6EB; }
.alist li.on .ic{ background:var(--verde); }

/* Resultado */
.rhead{ background:#fff; }
.rhead h1 .g{ color:var(--verde-d); }
.consultor{ background:var(--verde-l); border-color:var(--verde-b); }
.consultor b{ color:var(--verde-d); }
.line{ border-left-color:var(--verde); }
.line em{ color:var(--verde-d); background:var(--verde-l); }
.card, .fact, .line, .preco, .dep, .rel-list li{ border-color:var(--line); }
.rel-top .a, .rel-i .n, .rel-more{ color:var(--verde-d); }
.dep .q{ color:var(--verde); }
.dep em{ color:var(--verde-d); background:var(--verde-l); border-color:var(--verde-b); }
.dots i.on{ background:var(--verde); }

/* Adicionais */
.bump{ border-color:var(--prata); background:#fff; }
.bump.on{ border-style:solid; border-color:var(--verde); box-shadow:0 0 0 3px rgba(46,144,88,.18); }
.bump-h{ background:var(--prata-l); color:var(--navy); border-bottom-color:var(--prata); }
.bump-c{ background:var(--prata-l); }
.bump-c input{ accent-color:var(--verde); }
.bump.rec{ border-color:#7CC197; }
.bump.rec .bump-h{ background:var(--verde-l); color:var(--verde-d); border-bottom-color:#7CC197; }

/* Barra fixa clara */
.sticky{ background:rgba(255,255,255,.97); border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(7,38,67,.08); backdrop-filter:blur(6px); }
.sticky small{ color:var(--muted); }
.sticky b{ color:var(--navy); }

/* Rodapé claro */
.foot{ background:var(--prata-l); color:var(--muted); border-top:1px solid var(--line); }
.foot img{ background:var(--navy); border-radius:10px; padding:6px 10px; height:52px; opacity:1; box-sizing:content-box; }
.foot a{ color:var(--navy); font-weight:700; }
.foot .disc{ color:var(--prata-d); }
.sticky .btn{ white-space:nowrap; padding:13px 18px; }

/* Opções do diagnóstico */
.pl-t{ margin:20px 0 10px; text-align:left; font-size:14.5px; font-weight:700; color:var(--ink); }
.planos{ display:grid; gap:12px; margin:0 0 16px; text-align:left; }
.plano{ position:relative; display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:center; width:100%; padding:16px 14px 14px; border:1.5px solid var(--line2); border-radius:14px; background:#fff; font:inherit; color:var(--ink); cursor:pointer; text-align:left; transition:border-color .15s, background .15s, box-shadow .15s; -webkit-tap-highlight-color:transparent; }
.plano.on{ border-color:var(--verde); background:var(--verde-l); box-shadow:0 0 0 1px var(--verde) inset; }
.plano:focus-visible{ outline:3px solid var(--verde); outline-offset:3px; }
.pl-r{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line2); background:#fff; }
.plano.on .pl-r{ border-color:var(--verde); background:var(--verde); box-shadow:inset 0 0 0 4px #fff; }
.pl-b b{ display:block; font-size:15.5px; line-height:1.3; color:var(--navy); }
.pl-b span{ display:block; margin-top:3px; font-size:13px; line-height:1.4; color:var(--muted); }
.pl-p{ text-align:right; white-space:nowrap; }
.pl-p s{ display:block; font-size:12.5px; color:var(--muted); }
.pl-p strong{ display:block; font-family:var(--serif); font-weight:800; font-size:19px; color:var(--verde-d); }
.pl-selo{ position:absolute; top:-10px; right:12px; padding:3px 10px; border-radius:99px; background:var(--navy); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

/* Barras de prontidão (hoje x depois dos ajustes), animadas de 0 até o valor */
.prog{ display:grid; gap:18px; }
.pg-h{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:9px; }
.pg-l{ font-size:13.5px; line-height:1.35; font-weight:600; color:var(--muted); }
.pg-l.on{ color:var(--verde-d); font-weight:700; }
.pg-n{ flex:none; font-family:var(--serif); font-weight:800; font-size:24px; line-height:1; color:var(--prata-d); font-variant-numeric:tabular-nums; }
.pg-n.on{ font-size:30px; color:var(--verde-d); }
.pg-bar{ height:12px; border-radius:99px; background:#E8EBEF; overflow:hidden; }
.pg-bar i{ display:block; width:0; height:100%; border-radius:inherit; background:var(--prata); transition:width 1.6s cubic-bezier(.33,1,.68,1); }
.pg-bar i.on{ background:linear-gradient(90deg,var(--verde),#4FB57B); box-shadow:0 2px 10px rgba(46,144,88,.3); }
.pg-txt{ margin:0; font-size:14.5px; line-height:1.6; color:var(--text); }
.pg-txt b{ color:var(--navy); }
.prog .gauge-note{ margin:0; }
@media (prefers-reduced-motion: reduce){ .pg-bar i{ transition:none; } }