/* ============================================================
   Prévia do site Recupere Valores — tokens do design system
   ============================================================ */
:root{
  --bg:#F7F5F1; --bg-sunk:#EDEAE3; --surface:#FFFFFF;
  --line:#DBD6CC; --line-soft:#E8E4DC;
  --ink:#0F1714; --ink-2:#3E4B46; --ink-3:#6E7C76;
  --petroleo:#0A2A2E; --petroleo-2:#123A3E;
  --cofre:#0B5F55; --cofre-hi:#0E7A6B; --on-cofre:#FFFFFF;
  --esmeralda:#12A594; --esmeralda-ink:#0A6E62;
  --ambar:#B08430; --ambar-ink:#7E5C18; --ambar-wash:#F4EBD8;
  --ok:#0B7A5A; --alerta:#9A6410; --risco:#A3341F;
  --ok-wash:#E4F1EA; --alerta-wash:#F7EEDC; --risco-wash:#F6E5E0;
  --display:"Newsreader","Iowan Old Style",Georgia,serif;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4rem;--s9:6rem;
  --r-sm:3px;--r-md:6px;--r-lg:10px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --shadow:0 1px 2px rgba(10,42,46,.05), 0 8px 24px -12px rgba(10,42,46,.18);
  --hero-bg:#0A2A2E; --hero-ink:#F2F7F5; --hero-ink-2:#9FB8B3; --hero-line:#123A3E;
  --hero-amt:#FFB627; --hero-fill-a:#0B5F55; --hero-fill-b:#12A594; --hero-track:#122E31;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#050D0C; --bg-sunk:#010605; --surface:#0C1A18;
    --line:#1E332E; --line-soft:#152722;
    --ink:#F2F7F5; --ink-2:#B6C7C1; --ink-3:#7F918B;
    --petroleo:#020807; --petroleo-2:#0F2B2C;
    --cofre:#00D19A; --cofre-hi:#2AE8B4; --on-cofre:#01251C;
    --esmeralda:#00E0A4; --esmeralda-ink:#3FF0BE;
    --ambar:#FFB627; --ambar-ink:#FFC85C; --ambar-wash:#2B1E05;
    --ok:#00E08A; --alerta:#FFAE1A; --risco:#FF5C43;
    --ok-wash:#052A1E; --alerta-wash:#2B1D02; --risco-wash:#2E0F09;
    --shadow:0 1px 2px rgba(0,0,0,.6), 0 12px 34px -14px rgba(0,0,0,.85);
    --hero-bg:#020807; --hero-line:#0F2B2C; --hero-ink-2:#B6C7C1;
    --hero-fill-a:#00D19A; --hero-fill-b:#00E0A4; --hero-track:#152722;
  }
}
:root[data-theme="dark"]{
  --bg:#050D0C; --bg-sunk:#010605; --surface:#0C1A18;
  --line:#1E332E; --line-soft:#152722;
  --ink:#F2F7F5; --ink-2:#B6C7C1; --ink-3:#7F918B;
  --petroleo:#020807; --petroleo-2:#0F2B2C;
  --cofre:#00D19A; --cofre-hi:#2AE8B4; --on-cofre:#01251C;
  --esmeralda:#00E0A4; --esmeralda-ink:#3FF0BE;
  --ambar:#FFB627; --ambar-ink:#FFC85C; --ambar-wash:#2B1E05;
  --ok:#00E08A; --alerta:#FFAE1A; --risco:#FF5C43;
  --ok-wash:#052A1E; --alerta-wash:#2B1D02; --risco-wash:#2E0F09;
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 12px 34px -14px rgba(0,0,0,.85);
  --hero-bg:#020807; --hero-line:#0F2B2C; --hero-ink-2:#B6C7C1;
  --hero-fill-a:#00D19A; --hero-fill-b:#00E0A4; --hero-track:#152722;
}

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--ui); line-height:1.62; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ margin:0; line-height:1.14; text-wrap:balance; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--esmeralda); outline-offset:3px; border-radius:2px; }

.wrap{ max-width:75rem; margin:0 auto; padding:0 var(--s6); }

/* ---------- barra fina ---------- */
.topbar{ background:var(--petroleo); color:#9FB8B3; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; }
.topbar .wrap{ display:flex; flex-wrap:wrap; gap:var(--s5); justify-content:space-between; padding-top:7px; padding-bottom:7px; }
.topbar b{ color:#3FF0BE; font-weight:400; }

/* ---------- header ---------- */
header{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-soft); }
header .wrap{ display:flex; align-items:center; gap:var(--s5); height:4.4rem; }
.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.brand .wm{ font-family:var(--display); font-size:1.32rem; letter-spacing:-.022em; color:var(--ink); line-height:1; white-space:nowrap; }
.brand .wm-a{ font-weight:400; }
.brand .wm-b{ font-weight:600; }
footer .brand .wm{ display:flex; flex-direction:column; font-size:1.5rem; line-height:1.02; white-space:normal; }
footer .brand .wm-a::after{ content:""; }
nav.main{ display:flex; align-items:center; gap:var(--s2); }
.navitem{ position:relative; }
.navitem > button, .navitem > a{ display:flex; align-items:center; gap:6px; padding:.5rem .7rem; border:0; background:none; color:var(--ink-2); font-size:.9rem; font-weight:500; border-radius:var(--r-md); cursor:pointer; transition:background .16s var(--ease), color .16s var(--ease); }
.navitem > button:hover, .navitem > a:hover, .navitem.on > a, .navitem.on > button{ background:var(--bg-sunk); color:var(--ink); }
.navitem .caret{ width:9px; height:9px; opacity:.55; }
.drop{ position:absolute; top:calc(100% + 6px); left:0; min-width:19rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:var(--s2); display:none; flex-direction:column; gap:2px; }
.navitem.open .drop{ display:flex; }
.drop a{ display:flex; flex-direction:column; gap:1px; padding:.6rem .7rem; border-radius:var(--r-md); }
.drop a:hover{ background:var(--bg-sunk); }
.drop a b{ font-size:.88rem; font-weight:600; color:var(--ink); }
.drop a span{ font-size:.76rem; color:var(--ink-3); }
.themebtn{ display:flex; align-items:center; justify-content:center; width:2.3rem; height:2.3rem; border:1px solid var(--line); background:transparent; color:var(--ink-2); border-radius:var(--r-md); cursor:pointer; }
.themebtn:hover{ border-color:var(--ink-3); color:var(--ink); }
.burger{ display:none; }

/* ---------- botões ---------- */
.btn{ display:inline-flex; align-items:center; gap:var(--s2); font-size:.9rem; font-weight:600; padding:.78rem 1.2rem; border-radius:var(--r-md); border:1px solid transparent; cursor:pointer; transition:background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease); }
.btn-1{ background:var(--cofre); color:var(--on-cofre); }
.btn-1:hover{ background:var(--cofre-hi); }
.btn-2{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-2:hover{ border-color:var(--ink-3); background:var(--surface); }
.btn-3{ background:transparent; color:var(--esmeralda-ink); padding:.4rem 0; }
.btn-3:hover{ text-decoration:underline; text-underline-offset:4px; }
.btn:active{ transform:translateY(1px); }
.btn-hero-1{ background:#00D19A; color:#01251C; }
.btn-hero-1:hover{ background:#2AE8B4; }
.btn-hero-2{ background:transparent; color:#F2F7F5; border-color:#2A4A4C; }
.btn-hero-2:hover{ border-color:#5FC9AE; }

/* ---------- hero com fotografia ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--hero-bg); color:var(--hero-ink); border-bottom:1px solid var(--hero-line);
}
/* CAMADA 1 — a fotografia.
   Para plugar a foto real: --hero-photo: url("data:image/jpeg;base64,...")
   Enquanto não houver foto, os gradientes abaixo sustentam a composição. */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:
    var(--hero-photo, none),
    radial-gradient(58% 92% at 26% 105%, rgba(4,20,20,.96), transparent 68%),
    radial-gradient(40% 60% at 22% 62%, rgba(10,38,40,.85), transparent 72%),
    linear-gradient(104deg, rgba(3,12,12,.2) 0%, rgba(26,74,74,.5) 44%, rgba(96,150,142,.42) 62%, rgba(4,16,16,.35) 100%),
    linear-gradient(180deg, #06171A 0%, #0A2A2E 55%, #04100F 100%);
  background-size:cover; background-position:center 32%;
  filter:grayscale(.72) contrast(1.06) brightness(.82);
}
/* CAMADA 2 — duotone petróleo: é o que faz qualquer foto pertencer à marca */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, var(--hero-bg) 4%, rgba(10,42,46,.93) 42%, rgba(10,42,46,.55) 78%, rgba(10,42,46,.7) 100%),
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(3,10,10,.6) 100%);
}
.grain{ position:absolute; inset:0; z-index:0; opacity:.14; pointer-events:none; mix-blend-mode:overlay; }
.photo-flag{
  position:absolute; left:0; bottom:0; z-index:2;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  background:rgba(3,12,12,.7); color:#7F918B; padding:6px 12px; border-radius:0 var(--r-md) 0 0;
}
.hero .wrap{ position:relative; z-index:1; padding-top:var(--s9); padding-bottom:var(--s9); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--s8); align-items:center; }
.hero .eyebrow{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:#5FC9AE; }
.hero h1{ font-family:var(--display); font-size:clamp(2.4rem,4.6vw,3.9rem); font-weight:500; letter-spacing:-.028em; margin-top:var(--s4); }
.hero h1 i{ font-style:italic; color:#3FF0BE; }
.hero p.sub{ margin-top:var(--s5); font-size:1.08rem; color:var(--hero-ink-2); max-width:56ch; }
.hero .acts{ margin-top:var(--s6); display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }
.hero .assur{ font-family:var(--mono); font-size:.72rem; color:#7F918B; margin-top:var(--s4); }

.panel{ background:rgba(255,255,255,.035); border:1px solid var(--hero-line); border-radius:var(--r-lg); padding:var(--s6); display:flex; flex-direction:column; gap:var(--s5); }
.panel .lbl{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:#7F918B; }
.panel .amt{ font-size:clamp(2rem,3.6vw,2.7rem); font-weight:600; color:var(--hero-amt); font-variant-numeric:tabular-nums; letter-spacing:-.03em; line-height:1; }
.panel .amt small{ font-size:.44em; font-weight:500; color:#7F918B; letter-spacing:0; }
.panel .cap{ font-size:.88rem; color:var(--hero-ink-2); }
.bar{ display:flex; flex-direction:column; gap:var(--s2); }
.bar .track{ height:10px; background:var(--hero-track); border-radius:99px; overflow:hidden; }
.bar .fill{ height:100%; background:linear-gradient(90deg,var(--hero-fill-a),var(--hero-fill-b)); border-radius:99px; width:0; transition:width 1.5s var(--ease); }
.bar .legend{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.68rem; color:#7F918B; }

/* ---------- contador ---------- */
.count{ display:flex; align-items:baseline; gap:var(--s3); }
.count .d{ font-size:3.1rem; font-weight:600; color:var(--hero-amt); font-variant-numeric:tabular-nums; letter-spacing:-.035em; line-height:1; }
.count .u{ font-size:1rem; color:var(--hero-ink-2); }

/* ---------- cronograma ---------- */
.tl{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-top:var(--s7); }
.tl-i{ position:relative; padding:var(--s6) var(--s5) var(--s5) 0; border-top:2px solid var(--line); display:flex; flex-direction:column; gap:var(--s2); }
.tl-i.now{ border-top-color:var(--alerta); }
.tl-i.hard{ border-top-color:var(--risco); }
.tl-i::before{ content:""; position:absolute; top:-7px; left:0; width:12px; height:12px; border-radius:50%; background:var(--line); }
.tl-i.now::before{ background:var(--alerta); }
.tl-i.hard::before{ background:var(--risco); }
.tl-i .y{ font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; color:var(--ink-3); }
.tl-i.now .y{ color:var(--alerta); }
.tl-i.hard .y{ color:var(--risco); }
.tl-i h4{ font-size:1rem; font-weight:600; }
.tl-i p{ font-size:.86rem; color:var(--ink-2); }

/* ---------- rostos ---------- */
.face{ width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.95rem; font-weight:600; letter-spacing:.02em; background:var(--bg-sunk); color:var(--ink-2); border:1px solid var(--line); }
.quote-head{ display:flex; align-items:center; gap:var(--s4); }
.quote-head .who{ display:flex; flex-direction:column; gap:1px; }
.quote-head .who b{ font-size:.92rem; }
.quote-head .who span{ font-size:.8rem; color:var(--ink-3); }

/* ---------- faixa de ancoragem ---------- */
.anchors{ background:var(--bg-sunk); border-bottom:1px solid var(--line-soft); }
.anchors .wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:var(--s6); padding-top:var(--s6); padding-bottom:var(--s6); }
.anchor .n{ font-size:1.85rem; font-weight:600; color:var(--ambar); font-variant-numeric:tabular-nums; letter-spacing:-.025em; line-height:1.1; }
.anchor .t{ font-size:.9rem; color:var(--ink-2); margin-top:var(--s2); }
.anchor .s{ font-family:var(--mono); font-size:.66rem; color:var(--ink-3); margin-top:var(--s2); }

/* ---------- seções ---------- */
section.blk{ padding:var(--s9) 0; }
section.blk.sunk{ background:var(--bg-sunk); }
.shead{ display:flex; flex-direction:column; gap:var(--s3); max-width:64ch; }
.shead .eyebrow{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; color:var(--esmeralda-ink); text-transform:uppercase; }
.shead h2{ font-family:var(--display); font-size:clamp(1.7rem,3vw,2.35rem); font-weight:600; letter-spacing:-.02em; }
.shead p{ color:var(--ink-2); font-size:1.02rem; }

.fams{ display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:var(--s4); margin-top:var(--s7); align-items:start; }
.fam{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); }
.fam .ico{ color:var(--cofre); }
.fam h3{ font-size:1.25rem; font-weight:600; letter-spacing:-.01em; }
.fam > p{ font-size:.92rem; color:var(--ink-2); }
.fam ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s3); border-top:1px solid var(--line-soft); padding-top:var(--s4); }
.fam li a{ display:flex; flex-direction:column; gap:2px; }
.fam li b{ font-size:.9rem; font-weight:600; }
.fam li span{ font-size:.8rem; color:var(--ink-3); }
.fam li a:hover b{ color:var(--esmeralda-ink); }

/* método */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:var(--s5); margin-top:var(--s7); }
.step{ display:flex; flex-direction:column; gap:var(--s3); padding-top:var(--s4); border-top:2px solid var(--line); }
.step.key{ border-top-color:var(--esmeralda); }
.step .n{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--ink-3); }
.step.key .n{ color:var(--esmeralda-ink); }
.step h4{ font-size:1rem; font-weight:600; }
.step p{ font-size:.88rem; color:var(--ink-2); }
.step .who{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--ink-3); margin-top:auto; padding-top:var(--s2); }

/* prova */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(21rem,1fr)); gap:var(--s4); margin-top:var(--s7); }
.quote{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--esmeralda); border-radius:0 var(--r-lg) var(--r-lg) 0; padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); }
.quote blockquote{ margin:0; font-size:1.02rem; color:var(--ink); }
.quote .who{ font-size:.84rem; color:var(--ink-2); }
.quote .who b{ color:var(--ink); }

/* governança */
.govs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:var(--s4); margin-top:var(--s7); }
.gov{ border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); display:flex; flex-direction:column; gap:var(--s3); background:var(--surface); }
.gov .ico{ color:var(--ink-3); }
.gov h4{ font-size:.98rem; font-weight:600; }
.gov p{ font-size:.86rem; color:var(--ink-2); }

/* form */
.cta{ background:var(--petroleo); color:#F2F7F5; }
.cta .wrap{ padding-top:var(--s9); padding-bottom:var(--s9); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8); align-items:center; }
.cta h2{ font-family:var(--display); font-size:clamp(1.8rem,3.2vw,2.5rem); font-weight:500; letter-spacing:-.025em; }
.cta p{ color:#9FB8B3; margin-top:var(--s4); font-size:1rem; max-width:44ch; }
.form{ background:rgba(255,255,255,.04); border:1px solid #143A3C; border-radius:var(--r-lg); padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:#7F918B; }
.field input, .field select{ font:inherit; font-size:.92rem; padding:.68rem .8rem; border-radius:var(--r-md); border:1px solid #1E4548; background:#04100F; color:#F2F7F5; }
.field input::placeholder{ color:#5A6E6A; }
.form .fine{ font-family:var(--mono); font-size:.64rem; color:#7F918B; line-height:1.6; }

/* footer */
footer{ background:var(--petroleo); border-top:1px solid #143A3C; color:#9FB8B3; }
footer .wrap{ padding-top:var(--s8); padding-bottom:var(--s7); display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:var(--s6); }
footer h5{ margin:0 0 var(--s3); font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:#5FC9AE; font-weight:400; }
footer ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s2); font-size:.86rem; }
footer ul a:hover{ color:#F2F7F5; }
footer .legal{ border-top:1px solid #143A3C; margin-top:var(--s6); padding-top:var(--s5); font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; display:flex; flex-wrap:wrap; gap:var(--s5); justify-content:space-between; }

/* ---------- página de produto ---------- */
.phero{ position:relative; isolation:isolate; overflow:hidden; background:var(--hero-bg); color:var(--hero-ink); }
.phero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:
    var(--phero-photo, none),
    radial-gradient(50% 80% at 78% 100%, rgba(12,44,46,.8), transparent 70%),
    linear-gradient(100deg, #071B1E 0%, #0A2A2E 58%, #12403F 100%);
  background-size:cover; background-position:center 38%;
  filter:grayscale(.75) contrast(1.04) brightness(.8);
}
.phero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, var(--hero-bg) 10%, rgba(10,42,46,.9) 55%, rgba(10,42,46,.62) 100%);
}
.phero .wrap{ position:relative; z-index:1; padding-top:var(--s8); padding-bottom:var(--s8); display:flex; flex-direction:column; gap:var(--s4); }
.crumb{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:#5FC9AE; }
.phero h1{ font-family:var(--display); font-size:clamp(2rem,4vw,3rem); font-weight:500; letter-spacing:-.025em; max-width:20ch; }
.phero p{ color:var(--hero-ink-2); font-size:1.02rem; max-width:58ch; }

.two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:var(--s4); margin-top:var(--s6); }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s6); display:flex; flex-direction:column; gap:var(--s4); }
.card h3{ font-size:1.08rem; font-weight:600; }
.card p{ font-size:.92rem; color:var(--ink-2); }
.checks{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s3); }
.checks li{ display:flex; gap:var(--s3); align-items:flex-start; font-size:.92rem; color:var(--ink-2); }
.checks li svg{ flex-shrink:0; margin-top:3px; color:var(--ok); }
.range{ display:flex; flex-direction:column; gap:var(--s2); }
.range .v{ font-size:1.7rem; font-weight:600; color:var(--ambar); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.range .m{ font-family:var(--mono); font-size:.68rem; color:var(--ink-3); line-height:1.6; }

.legal-note{ background:var(--bg-sunk); border-left:3px solid var(--esmeralda); border-radius:0 var(--r-lg) var(--r-lg) 0; padding:var(--s6); margin-top:var(--s6); display:flex; flex-direction:column; gap:var(--s4); max-width:70ch; }
.legal-note h3{ font-size:1.08rem; font-weight:600; }
.legal-note p{ font-size:.95rem; color:var(--ink-2); }
.legal-note .src{ font-family:var(--mono); font-size:.68rem; color:var(--ink-3); }

.faq{ margin-top:var(--s6); border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; padding:var(--s4) 0; font-weight:600; font-size:.98rem; list-style:none; display:flex; justify-content:space-between; gap:var(--s4); align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--mono); color:var(--ink-3); font-size:1.1rem; }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ padding:0 0 var(--s5); font-size:.94rem; color:var(--ink-2); max-width:68ch; }

/* manager */
.mgr{ background:#020807; color:#F2F7F5; }
.mgr .wrap{ padding-top:var(--s9); padding-bottom:var(--s8); }
.mgr h1{ font-family:var(--display); font-size:clamp(2.1rem,4.2vw,3.1rem); font-weight:500; letter-spacing:-.025em; max-width:19ch; }
.mgr p.sub{ color:#B6C7C1; margin-top:var(--s5); font-size:1.05rem; max-width:52ch; }
.screen{ margin-top:var(--s7); background:#0C1A18; border:1px solid #1E332E; border-radius:var(--r-lg); overflow:hidden; }
.screen .chrome{ display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s5); border-bottom:1px solid #1E332E; font-family:var(--mono); font-size:.68rem; color:#7F918B; letter-spacing:.06em; }
.screen .dots{ display:flex; gap:5px; }
.screen .dots i{ width:8px; height:8px; border-radius:50%; background:#1E332E; display:block; }
.screen .body{ padding:var(--s6); display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:var(--s5); }
.tile{ display:flex; flex-direction:column; gap:var(--s2); }
.tile .k{ font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; color:#7F918B; }
.tile .v{ font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.tile .v.money{ color:#FFB627; }
.tile .track{ height:6px; background:#152722; border-radius:99px; overflow:hidden; }
.tile .track i{ display:block; height:100%; background:linear-gradient(90deg,#00D19A,#00E0A4); border-radius:99px; }
.placeholder-note{ font-family:var(--mono); font-size:.66rem; color:#7F918B; margin-top:var(--s4); letter-spacing:.05em; }
.mgr-feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:var(--s5); margin-top:var(--s8); }
.mgr-feat{ border-top:2px solid #1E332E; padding-top:var(--s4); display:flex; flex-direction:column; gap:var(--s2); }
.mgr-feat h4{ font-size:1rem; font-weight:600; }
.mgr-feat p{ font-size:.88rem; color:#B6C7C1; }

.tag{ display:inline-flex; align-self:flex-start; font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-sm); background:var(--bg-sunk); color:var(--ink-2); }
.tag.ok{ background:var(--ok-wash); color:var(--ok); }
.tag.alerta{ background:var(--alerta-wash); color:var(--alerta); }
/* .preview-flag REMOVIDA — o flag de prévia não vai para producao. */

@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

@media (max-width: 62rem){
  .hero .wrap, .cta .wrap{ grid-template-columns:1fr; gap:var(--s6); }
  .tl{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  footer .wrap{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 48rem){
  .wrap{ padding:0 var(--s5); }
  .tl{ grid-template-columns:1fr; }
  .tl-i{ padding-right:0; }
  nav.main{ display:none; }
  nav.main.open{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--surface); border-bottom:1px solid var(--line); padding:var(--s4); gap:var(--s1); }
  nav.main.open .drop{ position:static; display:flex; border:0; box-shadow:none; padding-left:var(--s4); min-width:0; }
  nav.main.open .navitem > button .caret{ display:none; }
  .burger{ display:flex; align-items:center; justify-content:center; width:2.3rem; height:2.3rem; border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:var(--r-md); cursor:pointer; }
  header .wrap{ position:relative; }
  section.blk{ padding:var(--s8) 0; }
  footer .wrap{ grid-template-columns:1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACRÉSCIMO — não faz parte da prévia aprovada.
   Tudo acima desta linha é o CSS de preview-site.html, copiado sem alteração
   (única exceção: a regra .preview-flag, removida por instrução).

   Isto aqui existe por três razões, e só por elas:
   1. A prévia é uma SPA com JavaScript. O site é estático e a CSP do nginx é
      `default-src 'none'` SEM script-src — nenhum script roda. Então o seletor
      de tema e o menu foram refeitos em CSS puro, com o mesmo desenho.
   2. As sete páginas em Markdown precisam de tipografia de fluxo de documento,
      que a prévia não tinha (lá o conteúdo era todo componente).
   3. Cifra monetária vinda do Markdown recebe o âmbar.

   REGRA DURA respeitada aqui: âmbar SÓ em cifra monetária.
   Só as variáveis que já existem acima são usadas.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- pular para o conteúdo ---------- */
.pular{ position:absolute; left:-9999px; }
.pular:focus{ left:var(--s4); top:var(--s4); z-index:99; background:var(--cofre); color:var(--on-cofre); padding:var(--s3) var(--s5); border-radius:var(--r-md); font-size:.9rem; font-weight:600; }

/* ---------- controles sem JS ----------
   Checkbox escondido + <label> com a mesma classe do botão da prévia.
   O estado é lido por :has() na raiz — sem script, portanto sem CSP afrouxada. */
.chk{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.chk:focus-visible + .themebtn, .chk:focus-visible + .burger{ outline:2px solid var(--esmeralda); outline-offset:3px; }

/* tema: o toggle inverte o que o sistema pede, exatamente como o botão da prévia fazia */
:root:has(#tema:checked){
  --bg:#050D0C; --bg-sunk:#010605; --surface:#0C1A18;
  --line:#1E332E; --line-soft:#152722;
  --ink:#F2F7F5; --ink-2:#B6C7C1; --ink-3:#7F918B;
  --petroleo:#020807; --petroleo-2:#0F2B2C;
  --cofre:#00D19A; --cofre-hi:#2AE8B4; --on-cofre:#01251C;
  --esmeralda:#00E0A4; --esmeralda-ink:#3FF0BE;
  --ambar:#FFB627; --ambar-ink:#FFC85C; --ambar-wash:#2B1E05;
  --ok:#00E08A; --alerta:#FFAE1A; --risco:#FF5C43;
  --ok-wash:#052A1E; --alerta-wash:#2B1D02; --risco-wash:#2E0F09;
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 12px 34px -14px rgba(0,0,0,.85);
  --hero-bg:#020807; --hero-line:#0F2B2C; --hero-ink-2:#B6C7C1;
  --hero-fill-a:#00D19A; --hero-fill-b:#00E0A4; --hero-track:#152722;
}
@media (prefers-color-scheme: dark){
  :root:has(#tema:checked){
    --bg:#F7F5F1; --bg-sunk:#EDEAE3; --surface:#FFFFFF;
    --line:#DBD6CC; --line-soft:#E8E4DC;
    --ink:#0F1714; --ink-2:#3E4B46; --ink-3:#6E7C76;
    --petroleo:#0A2A2E; --petroleo-2:#123A3E;
    --cofre:#0B5F55; --cofre-hi:#0E7A6B; --on-cofre:#FFFFFF;
    --esmeralda:#12A594; --esmeralda-ink:#0A6E62;
    --ambar:#B08430; --ambar-ink:#7E5C18; --ambar-wash:#F4EBD8;
    --ok:#0B7A5A; --alerta:#9A6410; --risco:#A3341F;
    --ok-wash:#E4F1EA; --alerta-wash:#F7EEDC; --risco-wash:#F6E5E0;
    --shadow:0 1px 2px rgba(10,42,46,.05), 0 8px 24px -12px rgba(10,42,46,.18);
    --hero-bg:#0A2A2E; --hero-ink:#F2F7F5; --hero-ink-2:#9FB8B3; --hero-line:#123A3E;
    --hero-fill-a:#0B5F55; --hero-fill-b:#12A594; --hero-track:#122E31;
  }
}

/* menu: a prévia abria por clique em JS; aqui abre por hover e por foco de teclado */
.navitem:hover > .drop, .navitem:focus-within > .drop{ display:flex; }

/* produto sem página própria não vira link quebrado — fica no menu, apagado */
.drop .off{ display:flex; flex-direction:column; gap:1px; padding:.6rem .7rem; border-radius:var(--r-md); opacity:.45; cursor:default; }
.fam li .off{ display:flex; flex-direction:column; gap:2px; opacity:.5; }
footer li .off{ opacity:.45; }

/* ---------- tipografia de fluxo de documento (páginas em Markdown) ---------- */
.doc{ padding-top:var(--s8); padding-bottom:var(--s9); }
.doc > *{ max-width:74ch; }
.doc > hr{ max-width:none; }
.doc > .tabela{ max-width:94ch; }  /* tabela respira mais que o texto, sem soltar da coluna */
.doc > :first-child{ margin-top:0; }
.doc h2{ font-family:var(--display); font-size:clamp(1.5rem,2.6vw,2rem); font-weight:600; letter-spacing:-.018em; margin-top:var(--s8); }
.doc h3{ font-family:var(--display); font-size:1.26rem; font-weight:600; letter-spacing:-.012em; margin-top:var(--s7); }
.doc h4{ font-size:1.02rem; font-weight:600; margin-top:var(--s6); }
.doc p{ margin-top:var(--s4); color:var(--ink-2); font-size:1rem; }
.doc h2 + p, .doc h3 + p, .doc h4 + p{ margin-top:var(--s3); }
.doc strong{ color:var(--ink); font-weight:600; }
.doc a{ color:var(--esmeralda-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.doc a:hover{ color:var(--cofre); }
.doc ul, .doc ol{ margin-top:var(--s4); padding-left:1.2rem; color:var(--ink-2); display:flex; flex-direction:column; gap:var(--s2); }
.doc li{ padding-left:.15rem; }
.doc li::marker{ color:var(--ink-3); }
.doc hr{ border:0; border-top:1px solid var(--line); margin:var(--s8) 0; }
.doc blockquote{ margin:var(--s6) 0; padding:var(--s5) var(--s6); background:var(--bg-sunk); border-left:3px solid var(--esmeralda); border-radius:0 var(--r-lg) var(--r-lg) 0; color:var(--ink-2); }
.doc blockquote > :first-child{ margin-top:0; }
.doc code{ font-family:var(--mono); font-size:.85em; background:var(--bg-sunk); color:var(--ink-2); padding:1px 5px; border-radius:var(--r-sm); }
.doc .shead{ margin-top:var(--s8); }
.doc .shead h2{ margin-top:0; }
.doc .btn{ margin-top:var(--s5); }

/* tabela rola sozinha — o corpo da página nunca rola de lado */
.tabela{ overflow-x:auto; margin-top:var(--s5); }
.doc table{ border-collapse:collapse; width:100%; min-width:34rem; font-size:.92rem; }
.doc th{ text-align:left; font-family:var(--mono); font-size:.64rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding:0 var(--s5) var(--s3) 0; border-bottom:1px solid var(--line); }
.doc td{ padding:var(--s4) var(--s5) var(--s4) 0; border-bottom:1px solid var(--line-soft); vertical-align:top; color:var(--ink-2); line-height:1.6; }
.doc tr:last-child td{ border-bottom:0; }
.doc td strong{ color:var(--ink); }

/* ---------- cifra monetária — o âmbar vive AQUI e em nenhum outro lugar ---------- */
.cifra{ color:var(--ambar); font-weight:600; font-variant-numeric:tabular-nums; }
.hero .cifra, .phero .cifra, .cta .cifra, .mgr .cifra, footer .cifra{ color:var(--hero-amt); }

/* ---------- burger em CSS puro ---------- */
@media (max-width: 48rem){
  :root:has(#menu:checked) nav.main{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; background:var(--surface); border-bottom:1px solid var(--line); padding:var(--s4); gap:var(--s1); }
  :root:has(#menu:checked) nav.main .drop{ position:static; display:flex; border:0; box-shadow:none; padding-left:var(--s4); min-width:0; }
  :root:has(#menu:checked) nav.main .navitem > button .caret{ display:none; }
  /* O CTA do cabecalho sai no celular: marca + tema + botao + burger estouram a linha
     e a pagina passa a rolar de lado. O mesmo botao esta no hero, logo abaixo. */
  header .wrap > .btn{ display:none; }
  .doc{ padding-top:var(--s7); }
}

/* código e ênfase dentro do cabeçalho de página (vêm do Markdown) */
.phero code{ font-family:var(--mono); font-size:.85em; background:rgba(255,255,255,.07); color:var(--hero-ink-2); padding:1px 6px; border-radius:var(--r-sm); }
.phero strong{ color:var(--hero-ink); font-weight:600; }

/* rodapé com QUATRO colunas de link (Recuperar · Corrigir · Monitorar · A empresa).
   A prévia tinha três; a taxonomia real tem as três famílias mais a institucional,
   e sem esta linha a quarta coluna cai sozinha numa segunda fileira. */
footer .wrap{ grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr)); }
@media (max-width: 62rem){ footer .wrap{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 48rem){ footer .wrap{ grid-template-columns:1fr; } }

/* ---------- alvo de toque ----------
   MEDIDO, não estimado: com Puppeteer em 375, 768 e 1280, os links das listas do
   rodapé saíam com 15 a 17px de altura e os da faixa legal com 13. O mínimo de
   WCAG 2.5.8 (Target Size Minimum, AA) é 24×24 CSS px, e no celular a lista do
   rodapé é a navegação inteira do site — errar o toque ali manda o visitante para
   a página errada.

   O corpo do texto NÃO muda. O que cresce é a área clicável, via padding no <a>,
   que precisa de display:inline-block para o padding vertical valer. O `gap` da
   lista encolhe na mesma medida, então o ritmo vertical do rodapé fica quase igual
   ao aprovado — o bloco cresce ~6px por coluna, não muda de desenho. */
footer ul{ gap:var(--s1); }
footer ul a, footer ul .off{ display:inline-block; padding-block:5px; }
footer .legal a{ display:inline-block; padding-block:6px; }