/* ==========================================================================
   CIATOS CONTABILIDADE — Design System
   Paleta derivada da marca: preto, carmim e ouro.
   Tipografia: Book Antiqua (display) / IBM Plex Sans (texto) / IBM Plex Mono (dados)
   ========================================================================== */

:root{
  /* Cor */
  --ink:        #0B0B0C;
  --ink-soft:   #17171A;
  --ink-line:   #2A2A2F;
  --paper:      #FFFFFF;
  --mist:       #F2F2F4;
  --line:       #E4E4E8;
  --muted:      #6A6A73;
  --crimson:    #C8102E;
  --crimson-dp: #8B0D1B;
  --crimson-tt: #FBEDEF;
  --gold:       #B98E2E;
  --gold-lite:  #E3C77E;
  --gold-tt:    #FAF3E4;

  /* Tipografia */
  --display: "Book Antiqua","Palatino Linotype",Palatino,"URW Palladio L","Newsreader",Georgia,serif;
  --sans: "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono: "IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  /* Ritmo */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --sect: clamp(72px,9vw,128px);
  --ease: cubic-bezier(.16,1,.3,1);
  --radius: 2px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--crimson); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0}
.t-display{font-size:clamp(2.5rem,6.2vw,4.6rem); line-height:1.04; letter-spacing:-.02em}
.t-h2{font-size:clamp(1.9rem,3.7vw,3rem)}
.t-h3{font-size:clamp(1.25rem,2vw,1.6rem)}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.05rem,1.6vw,1.28rem); line-height:1.6; color:#3A3A40}
.muted{color:var(--muted)}
.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--crimson); display:flex; align-items:center; gap:.7rem; margin:0 0 1.1rem; font-weight:500;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold); flex:none}
.eyebrow.is-light{color:var(--gold-lite)}
.balance{text-wrap:balance}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 40px,var(--wrap)); margin-inline:auto}
.wrap-narrow{width:min(100% - 40px,var(--wrap-narrow)); margin-inline:auto}
.sect{padding-block:var(--sect)}
.sect--mist{background:var(--mist)}
.sect--ink{background:var(--ink); color:#EDEDEF}
.sect--ink h1,.sect--ink h2,.sect--ink h3{color:#fff}
.sect--ink .lead{color:#B4B4BC}
.sect-head{max-width:760px; margin-bottom:clamp(38px,5vw,64px)}
.sect-head.is-center{margin-inline:auto; text-align:center}
.sect-head.is-center .eyebrow{justify-content:center}
.grid{display:grid; gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:940px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:15px 26px;
  font-family:var(--sans); font-size:.9rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; border:1px solid transparent; border-radius:var(--radius);
  transition:.35s var(--ease); cursor:pointer;
}
.btn svg{width:15px; height:15px; flex:none}
.btn--primary{background:var(--crimson); color:#fff}
.btn--primary:hover{background:var(--crimson-dp); transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(200,16,46,.7)}
.btn--ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn--ghost:hover{border-color:var(--ink); background:var(--ink); color:#fff}
.btn--gold{background:transparent; border-color:rgba(227,199,126,.5); color:var(--gold-lite)}
.btn--gold:hover{background:var(--gold-lite); color:var(--ink); border-color:var(--gold-lite)}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}

/* ---------- Navegação ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid transparent; transition:.4s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line); box-shadow:0 8px 30px -22px rgba(0,0,0,.5)}
.nav__in{display:flex; align-items:center; gap:28px; height:76px}
.nav__logo{flex:none}
.nav__logo img{height:38px; width:auto}
.nav__menu{display:flex; align-items:center; gap:26px; margin-left:auto; list-style:none; padding:0; margin-block:0}
.nav__menu a{
  font-size:.86rem; font-weight:500; text-decoration:none; color:#2E2E34; padding:6px 0;
  border-bottom:1px solid transparent; transition:.25s;
}
.nav__menu a:hover,.nav__menu a[aria-current="page"]{color:var(--crimson); border-bottom-color:var(--crimson)}
.nav__cta{margin-left:6px; padding:12px 20px; font-size:.84rem}
.nav__burger{display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:var(--radius); width:44px; height:42px; align-items:center; justify-content:center; cursor:pointer}
.nav__burger span{display:block; width:18px; height:1.5px; background:var(--ink); position:relative}
.nav__burger span::before,.nav__burger span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink)}
.nav__burger span::before{top:-6px} .nav__burger span::after{top:6px}
/* Dropdown de serviços */
.nav__has-sub{position:relative}
.nav__sub{
  position:absolute; top:calc(100% + 14px); left:-18px; min-width:320px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:10px; list-style:none; margin:0;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.35); opacity:0; visibility:hidden; transform:translateY(-6px); transition:.3s var(--ease);
}
.nav__has-sub:hover .nav__sub,.nav__has-sub:focus-within .nav__sub{opacity:1; visibility:visible; transform:none}
.nav__sub a{display:block; padding:9px 12px; border:0; font-size:.85rem; border-radius:var(--radius)}
.nav__sub a:hover{background:var(--mist); color:var(--crimson); border-bottom-color:transparent}
@media (max-width:1080px){
  .nav__menu,.nav__cta{display:none}
  .nav__burger{display:flex}
  .nav__menu.is-open{
    display:flex; position:absolute; top:76px; left:0; right:0; background:#fff; flex-direction:column;
    align-items:stretch; gap:0; padding:12px 20px 26px; border-bottom:1px solid var(--line);
    max-height:calc(100vh - 76px); overflow:auto;
  }
  .nav__menu.is-open a{padding:13px 0; border-bottom:1px solid var(--line)}
  .nav__menu.is-open .nav__sub{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 8px 14px; min-width:0}
}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--ink); color:#fff; overflow:hidden; padding:calc(76px + clamp(70px,9vw,110px)) 0 clamp(70px,9vw,110px)}
.hero::after{content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.55}
.hero__orbit{position:absolute; right:-14vw; top:50%; transform:translateY(-50%); width:min(80vw,860px); aspect-ratio:1; pointer-events:none; opacity:.5}
.hero__orbit svg{width:100%; height:100%}
.hero__orbit .spin{transform-origin:50% 50%; animation:spin 60s linear infinite}
.hero__orbit .spin-r{transform-origin:50% 50%; animation:spin 44s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__in{position:relative; z-index:2; max-width:960px}
.hero h1{color:#fff}
.hero h1 em{font-style:normal; color:var(--gold-lite); position:relative; white-space:nowrap}
.hero h1 em::after{content:""; position:absolute; left:0; right:0; bottom:.06em; height:2px;
  background:linear-gradient(90deg,var(--crimson),var(--gold)); opacity:.85}
.hero__lead{font-size:clamp(1.05rem,1.7vw,1.3rem); color:#B9B9C1; max-width:600px; margin:26px 0 34px}

/* Hero interno (páginas) */
.phero{background:var(--ink); color:#fff; padding:calc(76px + clamp(56px,7vw,86px)) 0 clamp(56px,7vw,86px); position:relative; overflow:hidden}
.phero::after{content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.5}
.phero__in{position:relative; z-index:2; max-width:820px}
.phero h1{color:#fff; font-size:clamp(2.1rem,4.6vw,3.5rem)}
.phero p{color:#B4B4BC; font-size:clamp(1rem,1.5vw,1.2rem); margin:22px 0 0; max-width:640px}
.phero__orbit{position:absolute; right:-10vw; top:-20%; width:min(60vw,560px); aspect-ratio:1; opacity:.35; pointer-events:none}
.phero__orbit .spin{transform-origin:50% 50%; animation:spin 70s linear infinite}

/* ---------- Breadcrumb ---------- */
.crumb{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#8A8A94; margin-bottom:20px}
.crumb a{text-decoration:none; color:#8A8A94} .crumb a:hover{color:var(--gold-lite)}
.crumb span{margin:0 .5rem; color:var(--gold)}

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 28px;
  transition:.4s var(--ease); position:relative; overflow:hidden; height:100%;
}
.card::before{content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:var(--crimson); transform:scaleX(0); transform-origin:left; transition:.45s var(--ease)}
.card:hover{transform:translateY(-4px); box-shadow:0 26px 50px -34px rgba(0,0,0,.45); border-color:#D6D6DC}
.card:hover::before{transform:scaleX(1)}
.card h3{margin-bottom:12px; font-size:1.22rem}
.card p{color:var(--muted); font-size:.95rem; margin:0}
.card__ico{width:38px; height:38px; margin-bottom:20px; color:var(--crimson)}
.card__ico svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.2}
.card--link{display:flex; flex-direction:column; text-decoration:none}
.card__more{margin-top:auto; padding-top:20px; font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--crimson); display:flex; align-items:center; gap:.5rem}
.card__more::after{content:"→"; transition:.3s var(--ease)}
.card--link:hover .card__more::after{transform:translateX(5px)}

/* Card de dor */
.pain{background:#fff; border-left:2px solid var(--crimson); padding:26px 26px 26px 24px; height:100%}
.pain h3{font-size:1.08rem; margin-bottom:10px; font-family:var(--sans); font-weight:600; letter-spacing:0}
.pain p{margin:0; color:var(--muted); font-size:.94rem}

/* ---------- Assinatura: anéis do ecossistema ---------- */
.eco{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center}
@media (max-width:900px){.eco{grid-template-columns:1fr}}
.eco__rings{position:relative; aspect-ratio:1; width:100%; max-width:480px; margin-inline:auto}
.eco__rings svg{width:100%; height:100%; overflow:visible}
.eco__ring{cursor:pointer; transition:.45s var(--ease)}
.eco__ring circle{fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.4; transition:.45s var(--ease)}
.eco__ring text{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; fill:rgba(255,255,255,.45); text-transform:uppercase; transition:.4s}
.eco__ring.is-on circle{stroke:var(--gold-lite); stroke-width:2.2; filter:drop-shadow(0 0 14px rgba(227,199,126,.55))}
.eco__ring.is-on text{fill:var(--gold-lite)}
.eco__core{fill:var(--crimson)}
.eco__panel{min-height:250px}
.eco__panel h3{color:#fff; font-size:clamp(1.5rem,2.6vw,2.05rem); margin-bottom:14px}
.eco__panel p{color:#B4B4BC; margin-bottom:20px}
.eco__tags{display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:0 0 26px}
.eco__tags li{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#DCDCE2; border:1px solid var(--ink-line); border-radius:100px; padding:7px 14px}
.eco__step{font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--crimson); margin-bottom:14px}
.eco__nav{display:flex; gap:8px; margin-top:6px}
.eco__nav button{
  flex:1; background:transparent; border:1px solid var(--ink-line); color:#8A8A94; font-family:var(--mono);
  font-size:.68rem; letter-spacing:.12em; padding:11px 4px; cursor:pointer; border-radius:var(--radius); transition:.3s;
}
.eco__nav button:hover{color:#fff; border-color:#4A4A52}
.eco__nav button.is-on{background:var(--gold-lite); border-color:var(--gold-lite); color:var(--ink); font-weight:600}

/* ---------- Manifesto ---------- */
.manifesto{background:var(--ink); color:#fff; text-align:center; padding-block:clamp(70px,9vw,120px); position:relative; overflow:hidden}
.manifesto blockquote{
  margin:0 auto; max-width:900px; font-family:var(--display); font-weight:500;
  font-size:clamp(1.6rem,3.6vw,2.85rem); line-height:1.28; letter-spacing:-.015em;
}
.manifesto blockquote span{color:var(--gold-lite)}
.manifesto cite{display:block; margin-top:26px; font-family:var(--mono); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:#7C7C86; font-style:normal}

/* ---------- Processo ---------- */
.steps{counter-reset:s; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line)}
.steps > div{padding:32px 26px 32px 0; border-right:1px solid var(--line); position:relative}
.steps > div:last-child{border-right:0}
.steps > div::before{
  counter-increment:s; content:"0" counter(s); display:block; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.18em; color:var(--crimson); margin-bottom:16px;
}
.steps h3{font-size:1.12rem; font-family:var(--sans); font-weight:600; letter-spacing:0; margin-bottom:10px}
.steps p{font-size:.93rem; color:var(--muted); margin:0}
@media (max-width:900px){.steps{grid-template-columns:1fr}.steps > div{border-right:0; border-bottom:1px solid var(--line); padding-right:0}.steps > div:last-child{border-bottom:0}}

/* ---------- Split (texto + visual) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.split--narrow{grid-template-columns:1.1fr .9fr}
@media (max-width:900px){.split,.split--narrow{grid-template-columns:1fr}}
.photo{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(140deg,#141418 0%,#232329 55%,#0F0F12 100%); display:grid; place-items:center;
}
.photo::after{
  content:attr(data-label); position:absolute; bottom:16px; left:18px; font-family:var(--mono);
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.42);
}
.photo svg{width:52%; opacity:.34}
.photo img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}

/* ---------- Lista com marcador ---------- */
.ticks{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.ticks li{position:relative; padding-left:30px; font-size:.98rem}
.ticks li::before{
  content:""; position:absolute; left:0; top:.55em; width:12px; height:6px;
  border-left:1.6px solid var(--crimson); border-bottom:1.6px solid var(--crimson); transform:rotate(-45deg);
}
.sect--ink .ticks li{color:#C6C6CE}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-family:var(--display); font-size:clamp(1.05rem,1.7vw,1.28rem); font-weight:600; line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:32px; width:11px; height:11px;
  border-right:1.6px solid var(--crimson); border-bottom:1.6px solid var(--crimson);
  transform:rotate(45deg); transition:.35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg); top:36px}
.faq .faq__a{padding:0 60px 26px 0; color:var(--muted); font-size:.98rem}
.faq .faq__a p:last-child{margin-bottom:0}

/* ---------- Depoimentos ---------- */
.quote{background:#fff; border:1px solid var(--line); padding:32px 30px; height:100%; display:flex; flex-direction:column}
.quote__mark{font-family:var(--display); font-size:3rem; line-height:.6; color:var(--gold); margin-bottom:18px}
.quote p{font-size:.99rem; color:#38383E; margin-bottom:22px}

.quote b{display:block; font-size:.92rem}
.quote small{color:var(--muted); font-size:.8rem; font-family:var(--mono); letter-spacing:.06em}

/* ---------- CTA final ---------- */
.cta{background:var(--ink); color:#fff; text-align:center; padding-block:clamp(66px,8vw,104px); position:relative; overflow:hidden}
.cta h2{color:#fff; margin-bottom:18px}
.cta p{color:#B4B4BC; max-width:600px; margin:0 auto 34px}
.cta .btn-row{justify-content:center}
.cta__note{margin-top:26px; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#71717B}

/* ---------- Formulário ---------- */
.form{background:#fff; border:1px solid var(--line); padding:clamp(26px,4vw,42px)}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
.field{display:block; margin-bottom:16px}
.field span{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--sans); font-size:.95rem; background:#fff; color:var(--ink); transition:.25s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--crimson); outline:none; box-shadow:0 0 0 3px rgba(200,16,46,.09)}
.field textarea{min-height:120px; resize:vertical}
.form__note{font-size:.78rem; color:var(--muted); margin:14px 0 0}

/* ---------- Blog ---------- */
.post-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); text-decoration:none; height:100%; transition:.4s var(--ease)}
.post-card:hover{transform:translateY(-4px); box-shadow:0 26px 50px -34px rgba(0,0,0,.4)}
.post-card__thumb{aspect-ratio:16/9; background:linear-gradient(140deg,#15151A,#2A2A31); display:grid; place-items:center}
.post-card__thumb svg{width:34%; opacity:.4}
.post-card__body{padding:26px}
.post-card__meta{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--crimson); margin-bottom:12px}
.post-card h3{font-size:1.2rem; margin-bottom:10px; line-height:1.28}
.post-card p{font-size:.93rem; color:var(--muted); margin:0}
.article{font-size:1.06rem; line-height:1.75}
.article h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:2.2em 0 .7em}
.article h3{font-size:1.28rem; margin:1.8em 0 .6em}
.article ul,.article ol{padding-left:1.2em; margin:0 0 1.3em}
.article li{margin-bottom:.5em}
.article strong{font-weight:600}
.article table{width:100%; border-collapse:collapse; margin:1.6em 0; font-size:.95rem}
.article th,.article td{border:1px solid var(--line); padding:12px 14px; text-align:left}
.article th{background:var(--mist); font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}
.article blockquote{margin:1.8em 0; padding:20px 26px; border-left:2px solid var(--gold); background:var(--gold-tt); font-family:var(--display); font-size:1.2rem; line-height:1.45}
.article blockquote p:last-child{margin:0}
.article a{color:var(--crimson); text-decoration:underline; text-underline-offset:3px}

/* ---------- Rodapé ---------- */
.foot{background:var(--ink); color:#9A9AA4; padding-block:clamp(56px,7vw,80px) 0; font-size:.9rem}
.foot__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr}}
.foot img{height:44px; width:auto; margin-bottom:20px}
.foot h4{color:#fff; font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; margin-bottom:18px}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.foot a{text-decoration:none; transition:.25s}
.foot a:hover{color:var(--gold-lite)}
.foot__bar{
  margin-top:clamp(44px,6vw,64px); border-top:1px solid var(--ink-line); padding:24px 0 28px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-family:var(--mono);
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#6C6C76;
}

/* ---------- WhatsApp flutuante ---------- */
.wa{
  position:fixed; right:22px; bottom:22px; z-index:70; width:56px; height:56px; border-radius:50%;
  background:#1FAF54; display:grid; place-items:center; box-shadow:0 12px 30px -10px rgba(31,175,84,.6);
  transition:.35s var(--ease);
}
.wa:hover{transform:scale(1.08)}
.wa svg{width:28px; height:28px; fill:#fff}

/* ---------- Ajustes responsivos finais ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .hero__orbit{opacity:.3; right:-38vw; width:130vw}
  .phero__orbit{opacity:.22; right:-30vw}
  .sect{padding-block:clamp(56px,12vw,76px)}
  .card{padding:26px 22px}
  .steps > div,.steps > li{padding:26px 0; border-right:0}
  .faq summary{padding-right:36px}
  .faq .faq__a{padding-right:0}
  .wa{right:16px; bottom:16px; width:52px; height:52px}
  .eco__rings{max-width:330px}
  .eco__ring text{font-size:11px}
}
/* Lista de escopo em coluna única no mobile */
@media (max-width:820px){
  .ticks[style*="columns"]{columns:1 !important}
}

/* ---------- Reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.is-in{opacity:1; transform:none}

/* ==========================================================================
   Componentes v2 — prova social, comparativo, tecnologia, grupo, cases,
   diferenciais, artigo (autor/compartilhar/newsletter) e utilitários a11y.
   ========================================================================== */

/* ---------- Acessibilidade ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--crimson); color:#fff; padding:12px 20px;
  font-family:var(--sans); font-size:.85rem; font-weight:600;
}
.skip:focus{left:0}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Hero: microcopy e ganhos ---------- */
.hero__micro{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:#8A8A94; margin:20px 0 0;
}
.hero__ganhos{
  list-style:none; margin:44px 0 0; padding:0; display:grid; gap:1px;
  grid-template-columns:repeat(4,1fr); background:var(--ink-line);
  border:1px solid var(--ink-line);
}
.hero__ganhos li{background:var(--ink); padding:22px 20px}
.hero__ganhos b{
  display:block; font-family:var(--sans); font-size:.9rem; font-weight:600;
  color:var(--gold-lite); margin-bottom:6px;
}
.hero__ganhos span{display:block; font-size:.85rem; line-height:1.5; color:#9A9AA4}

/* ---------- Prova social ---------- */
.stats{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12);
}
.sect--mist .stats{background:var(--line); border-color:var(--line)}
.stat{background:var(--ink); padding:34px 24px; text-align:center}
.sect--mist .stat{background:var(--mist)}
.stat b{
  display:block; font-family:var(--display); font-weight:600; line-height:1;
  font-size:clamp(2.1rem,4vw,3.1rem); color:var(--gold-lite);
}
.sect--mist .stat b{color:var(--crimson)}
.stat b i{font-style:normal; font-size:.42em; margin-left:.18em; letter-spacing:.02em}
.stat span{
  display:block; margin-top:12px; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:#8A8A94; line-height:1.5;
}
.stat.is-draft b{color:#6E6E78}
.stat.is-draft span::after{
  content:"a preencher"; display:block; margin-top:8px; color:var(--crimson);
  font-size:.58rem; letter-spacing:.18em;
}

/* ---------- Comparativo ---------- */
.cmp{overflow-x:auto; -webkit-overflow-scrolling:touch}
.cmp table{width:100%; border-collapse:collapse; min-width:640px; background:#fff}
.cmp thead th{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:500; padding:18px 22px; text-align:left; border-bottom:1px solid var(--line);
}
.cmp thead th:last-child{color:var(--crimson); background:var(--crimson-tt)}
.cmp tbody th{
  text-align:left; font-family:var(--sans); font-size:.92rem; font-weight:600;
  padding:20px 22px; width:22%; border-bottom:1px solid var(--line); vertical-align:top;
}
.cmp td{
  padding:20px 22px; font-size:.94rem; color:var(--muted); vertical-align:top;
  border-bottom:1px solid var(--line); width:39%;
}
.cmp__new{color:var(--ink); background:linear-gradient(180deg,rgba(200,16,46,.03),transparent)}
.cmp__new{border-left:1px solid var(--line)}
.cmp tbody tr:hover td{background:var(--mist)}
.cmp tbody tr:hover .cmp__new{background:var(--crimson-tt)}
.cmp__tag{display:none}

/* ---------- Tecnologia ---------- */
.tech{
  background:var(--ink-soft); border:1px solid var(--ink-line); padding:30px 28px;
  height:100%; transition:.4s var(--ease);
}
.tech:hover{border-color:var(--gold); transform:translateY(-4px)}
.tech .card__ico{color:var(--gold-lite)}
.tech h3{font-size:1.14rem; color:#fff; margin-bottom:12px}
.tech p{margin:0; color:#A6A6B0; font-size:.94rem}
.tech__note{
  margin:44px 0 0; padding-left:22px; border-left:2px solid var(--gold);
  font-family:var(--display); font-size:clamp(1.05rem,1.8vw,1.35rem);
  line-height:1.5; color:#DEDEE4; max-width:760px;
}

/* ---------- Grupo Ciatos ---------- */
.grupo{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.grupo__card{background:#fff; padding:30px 26px; position:relative; transition:.4s var(--ease)}
.grupo__card:hover{background:var(--mist)}
.grupo__card h3{font-size:1.05rem; margin-bottom:10px; line-height:1.25}
.grupo__card p{margin:0; font-size:.89rem; color:var(--muted)}
.grupo__card .card__ico{width:30px; height:30px; margin-bottom:16px; color:var(--gold)}
.grupo__card.is-atual{background:var(--ink)}
.grupo__card.is-atual h3{color:#fff}
.grupo__card.is-atual p{color:#A6A6B0}
.grupo__card.is-atual .card__ico{color:var(--crimson)}
.grupo__flag{
  display:inline-block; margin-top:16px; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-lite);
  border:1px solid rgba(227,199,126,.4); padding:4px 10px;
}

/* ---------- Cases ---------- */
.case{background:#fff; border:1px solid var(--line); padding:30px 28px; height:100%; display:flex; flex-direction:column}
.case header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px}
.case__setor{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--crimson); margin:0;
}
.case__flag{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border:1px dashed var(--line); padding:4px 8px; white-space:nowrap;
}
.case__flow{list-style:none; margin:0; padding:0; counter-reset:c; flex:1}
.case__flow li{position:relative; padding:0 0 22px 26px; border-left:1px solid var(--line); margin-left:6px}
.case__flow li:last-child{border-left-color:transparent; padding-bottom:6px}
.case__flow li::before{
  counter-increment:c; content:""; position:absolute; left:-4.5px; top:5px;
  width:8px; height:8px; border-radius:50%; background:var(--gold);
}
.case__flow li:last-child::before{background:var(--crimson)}
.case__flow b{
  display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); margin-bottom:6px;
}
.case__flow p{margin:0; font-size:.92rem; color:var(--muted)}
.case__eco{margin-top:auto; padding-top:20px; border-top:1px solid var(--line)}
.case__eco span{
  display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.case__eco b{display:block; font-family:var(--display); font-size:2rem; color:var(--crimson); line-height:1.1; margin-top:6px}
.case__eco small{color:var(--muted); font-size:.78rem}
.case.is-draft{border-style:dashed; background:#FCFCFD}
.case.is-draft .case__flow p,.case.is-draft .case__eco b{color:#9A9AA4}

/* ---------- Diferenciais / ganhos por serviço ---------- */
.dif{background:#fff; border:1px solid var(--line); padding:28px 26px; height:100%; position:relative}
.dif h3{font-size:1.08rem; margin-bottom:10px}
.dif p{margin:0; font-size:.93rem; color:var(--muted)}
.dif .card__ico{color:var(--gold)}
.dif__n{
  display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.18em;
  color:var(--crimson); margin-bottom:16px;
}
.sect--ink .dif{background:var(--ink-soft); border-color:var(--ink-line)}
.sect--ink .dif h3{color:#fff}
.sect--ink .dif p{color:#A6A6B0}

/* ---------- Depoimentos (figure) ---------- */
.quote blockquote{margin:0; padding:0}
.quote figcaption{margin-top:auto; border-top:1px solid var(--line); padding-top:16px}
.quote.is-draft{border-style:dashed; background:#FCFCFD}
.quote.is-draft p{color:#9A9AA4; font-style:italic}

/* ---------- Artigo: autor, leitura, compartilhar ---------- */
.meta{display:flex; align-items:center; gap:14px; margin:30px 0 0}
.meta__av{
  width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--crimson),var(--crimson-dp)); color:#fff;
  font-family:var(--display); font-size:1.1rem;
}
.meta b{display:block; font-size:.92rem; color:#fff}
.meta small{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:#9A9AA4}
.leitura{
  margin:28px 0 0; padding-top:20px; border-top:1px solid var(--line);
  font-size:.94rem; color:var(--muted);
}
.leitura a{color:var(--crimson); text-decoration:underline; text-underline-offset:3px}
.share{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:44px; padding-top:26px; border-top:1px solid var(--line);
}
.share > span{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-right:6px;
}
.share__b{
  font-family:var(--sans); font-size:.82rem; font-weight:500; color:var(--ink);
  border:1px solid var(--line); background:#fff; padding:0 18px; cursor:pointer;
  min-height:44px; display:inline-flex; align-items:center;
  text-decoration:none; transition:.3s var(--ease);
}
.share__b:hover{border-color:var(--ink); background:var(--ink); color:#fff}
.share__b.is-ok{border-color:var(--gold); color:var(--gold)}

/* ---------- Newsletter ---------- */
.news{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center}
.news h2{margin-bottom:10px}
.news p{margin:0; font-size:.94rem}
.news__form{display:grid; grid-template-columns:1fr auto; gap:10px}
.news__form input{
  font-family:var(--sans); font-size:.95rem; padding:14px 16px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
}
.news__form input:focus{outline:2px solid var(--crimson); outline-offset:1px}
.news__form .form__note{grid-column:1/-1; margin:0; font-size:.76rem; color:var(--muted)}

/* ---------- Blog card: rodapé ---------- */
.post-card__foot{
  display:flex; justify-content:space-between; align-items:center; margin-top:18px;
  padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.post-card__foot em{font-style:normal; color:var(--crimson)}

/* ---------- Etapas em <ol> ---------- */
.steps{list-style:none; padding:0; margin:0}
@media (max-width:1024px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.steps{grid-template-columns:1fr}}
.steps > li{padding:32px 26px 32px 0; border-right:1px solid var(--line); position:relative}
.steps > li:last-child{border-right:0}
.steps > li::before{
  counter-increment:s; content:"0" counter(s);
  display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
  color:var(--crimson); margin-bottom:18px;
}

/* ---------- Responsivo dos componentes novos ---------- */
@media (max-width:1024px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .grupo{grid-template-columns:repeat(2,1fr)}
  .hero__ganhos{grid-template-columns:repeat(2,1fr)}
  .news{grid-template-columns:1fr; gap:26px}
}
@media (max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{padding:26px 16px}
  .grupo{grid-template-columns:1fr}
  .hero__ganhos{grid-template-columns:1fr}
  .news__form{grid-template-columns:1fr}
  .cmp{margin-inline:-20px; padding-inline:20px}
  .case__eco b{font-size:1.7rem}
  .share{gap:8px}
  .share__b{padding:0 14px; font-size:.78rem}
}

/* ---------- Quatro pilares da operação ---------- */
.pilares{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.pilar{
  background:#fff; padding:34px 30px 30px; text-decoration:none; display:flex; flex-direction:column;
  position:relative; transition:.4s var(--ease);
}
.pilar::before{
  content:""; position:absolute; inset:0 auto 0 0; width:2px; background:var(--crimson);
  transform:scaleY(0); transform-origin:top; transition:.45s var(--ease);
}
.pilar:hover{background:var(--mist)}
.pilar:hover::before{transform:scaleY(1)}
.pilar h3{font-size:1.32rem; margin-bottom:12px}
.pilar p{color:var(--muted); font-size:.94rem; margin:0}
.pilar .card__ico{color:var(--gold)}
.pilar .card__more{margin-top:auto; padding-top:22px}

/* ---------- Índice de serviços por área ---------- */
.area + .area{margin-top:clamp(56px,7vw,92px)}
.area .sect-head{margin-bottom:clamp(26px,3.5vw,40px); max-width:720px}
.area .sect-head .lead{margin:0}

@media (max-width:1024px){.pilares{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.pilares{grid-template-columns:1fr}}

/* ---------- Selos de confiança ---------- */
.selos{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:28px 0 0; padding:0;
}
.selos li{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:#B4B4BC; border:1px solid rgba(255,255,255,.16); padding:9px 16px;
}
.sect--mist .selos li{color:var(--muted); border-color:var(--line)}

/* ---------- Rodapé institucional ---------- */
.foot__social{display:flex; gap:18px; margin-top:16px !important}
.foot__legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  padding:22px 0; margin-top:36px; border-top:1px solid var(--ink-line);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:#7A7A84;
}
.foot__pol{display:flex; flex-wrap:wrap; gap:20px}
.foot__pol a{text-decoration:none; border-bottom:1px solid transparent}
.foot__pol a:hover{border-bottom-color:var(--gold)}
@media (max-width:760px){
  .foot__legal{flex-direction:column; gap:6px}
  .selos{justify-content:flex-start}
}

/* ---------- Formulário: validação e consentimento ---------- */
.field span i{color:var(--crimson); font-style:normal; margin-left:2px}
.field__erro{
  display:none; font-style:normal; font-size:.78rem; color:var(--crimson); margin-top:6px;
}
.is-erro .field__erro{display:block}
.is-erro input,.is-erro select,.is-erro textarea{border-color:var(--crimson)}
.check{display:grid; grid-template-columns:auto 1fr; gap:10px 12px; align-items:start; margin:6px 0 4px}
.check input{width:18px; height:18px; margin-top:3px; accent-color:var(--crimson)}
.check span{font-size:.88rem; color:var(--muted); line-height:1.5}
.check span i{color:var(--crimson); font-style:normal}
.check a{color:var(--crimson); text-decoration:underline; text-underline-offset:3px}
.check .field__erro{grid-column:2}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form__ok{
  margin:14px 0 0; padding:14px 16px; background:var(--gold-tt);
  border-left:2px solid var(--gold); font-size:.88rem;
}
.form__note i{color:var(--crimson); font-style:normal}

/* ---------- Contato: localização e regiões ---------- */
.local{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(32px,5vw,64px)}
.local h3{margin-bottom:18px}
.local .ticks li a{color:var(--crimson); text-decoration:underline; text-underline-offset:3px}
.regioes{list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:20px 0 24px}
.regioes li{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); background:#fff; padding:8px 14px; color:var(--muted);
}
@media (max-width:860px){.local{grid-template-columns:1fr}}

/* ---------- Blocos técnicos das landings ---------- */
.bloco{background:#fff; border:1px solid var(--line); padding:30px 28px; height:100%}
.bloco h3{font-size:1.12rem; margin-bottom:16px}
.bloco .ticks li{font-size:.93rem}

/* ---------- Entregáveis ---------- */
.entrega{border-left:2px solid var(--gold); padding:4px 0 4px 22px; height:100%}
.entrega h3{font-size:1.05rem; margin-bottom:8px; font-family:var(--sans); font-weight:600; letter-spacing:0}
.entrega p{margin:0; color:var(--muted); font-size:.93rem}

/* ---------- Metodologia em seis etapas ---------- */
.steps--6{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){.steps--6{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.steps--6{grid-template-columns:1fr}}

/* ---------- Perfis da equipe ---------- */
.perfis{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.perfil{display:grid; grid-template-columns:auto 1fr; gap:22px; background:#fff; padding:28px 26px}
.perfil__foto{
  width:78px; height:78px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,#17171A,#2A2A31); color:var(--gold-lite);
  font-family:var(--display); font-size:1.9rem;
}
.perfil h3{font-size:1.08rem; margin-bottom:6px}
.perfil__cargo{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--crimson); margin:0 0 10px}
.perfil p{margin:0; color:var(--muted); font-size:.92rem}
.perfil.is-draft{background:#FCFCFD; border-left:2px dashed var(--line)}
@media (max-width:560px){.perfil{grid-template-columns:1fr}}

/* ---------- Fotos reais: perfis e retrato ---------- */
.perfil__foto{
  width:118px; height:118px; border-radius:50%; overflow:hidden; flex:none;
  display:block; background:var(--ink-soft);
}
.perfil__foto img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.perfil{gap:26px; align-items:center}
.photo--retrato{aspect-ratio:4/5}
.photo--retrato img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.photo--retrato::after{z-index:2}
@media (max-width:560px){
  .perfil__foto{width:88px; height:88px}
}

/* ---------- Tags de especialidade no perfil ---------- */
.perfil__tags{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:16px 0 0;
}
.perfil__tags li{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); padding:6px 12px;
}
.perfil p + p{margin-top:.8em}
.perfil{align-items:start}
.perfil__foto{margin-top:4px}

/* ---------- Foto real dentro da moldura ---------- */
.photo picture{position:absolute; inset:0; display:block}
.photo picture img{width:100%; height:100%; object-fit:cover; display:block}