/* =========================================================================
   DOWSER: sistema visual 2026
   Base: Brand Book Institucional. Evoluído para leitura executiva:
   menos texto, mais respiro, sinais de cor controlados, diagramas vetoriais.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* escuros */
  --ink:        #050507;
  --ink-2:      #0A0B0E;
  --graphite:   #14161B;
  --graphite-2: #1D2027;

  /* claros */
  --paper:      #FFFFFF;
  --paper-2:    #F4F6F8;
  --paper-3:    #E9ECF1;

  /* sinais */
  --blue:       #0070F3;
  --blue-soft:  #3D93FF;
  --mint:       #A4F6B9;
  --mint-deep:  #16A34A;

  /* texto */
  --on-dark:      #FFFFFF;
  --on-dark-dim:  #9BA3B0;
  --on-dark-mute: #666E7C;
  --on-light:     #0A0B0E;
  --on-light-dim: #565E6B;

  /* linhas */
  --line-dark:  rgba(255,255,255,.10);
  --line-dark-2:rgba(255,255,255,.16);
  --line-light: rgba(10,11,14,.10);
  --line-light-2:rgba(10,11,14,.16);

  /* medidas */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --wrap: 1200px;
  --gut:  clamp(20px, 5vw, 56px);
  --sec:  clamp(60px, 7.5vw, 116px);

  --fd: 'Sora', system-ui, sans-serif;                 /* display */
  --fb: 'Manrope', system-ui, sans-serif;              /* corpo   */
  --fm: 'IBM Plex Mono', ui-monospace, monospace;      /* dados   */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--fb);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--fd);font-weight:600;letter-spacing:-.025em;line-height:1.1;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ---------- 3. Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:860px;margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:var(--sec)}

.band-dark  {background:var(--ink);   color:var(--on-dark)}
.band-dark-2{background:var(--ink-2); color:var(--on-dark)}
.band-light {background:var(--paper); color:var(--on-light)}
.band-light-2{background:var(--paper-2);color:var(--on-light)}

.band-light  p, .band-light-2 p{color:var(--on-light-dim)}
.band-dark   p, .band-dark-2 p{color:var(--on-dark-dim)}

/* pontilhado sutil de fundo: "redes de pontos" do brand book */
.dotted{position:relative;isolation:isolate}
.dotted::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%, #000 40%, transparent 100%);
}
.band-light.dotted::before,.band-light-2.dotted::before{
  background-image:radial-gradient(rgba(10,11,14,.075) 1px, transparent 1px);
}

/* ---------- 4. Tipografia utilitária ---------- */
.eyebrow{
  font-family:var(--fm);font-size:11.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-soft);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
}
.band-light .eyebrow,.band-light-2 .eyebrow{color:var(--blue)}
.eyebrow::before{
  content:'';width:7px;height:7px;border-radius:50%;
  border:1.5px solid currentColor;flex:none;
}
.eyebrow.is-mint{color:var(--mint)}
.band-light .eyebrow.is-mint,.band-light-2 .eyebrow.is-mint{color:var(--mint-deep)}

h1,.h1{font-size:clamp(2.4rem,5.4vw,4rem);letter-spacing:-.035em}
h2,.h2{font-size:clamp(1.95rem,4vw,3rem)}
h3,.h3{font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.018em}
.h4{font-size:1.02rem;font-family:var(--fd);font-weight:600;letter-spacing:-.01em}

.lead{font-size:clamp(1.05rem,1.6vw,1.24rem);line-height:1.6;max-width:60ch}
.measure{max-width:62ch}
.dim{color:var(--on-dark-dim)}
.band-light .dim,.band-light-2 .dim{color:var(--on-light-dim)}
.mono{font-family:var(--fm);font-size:.82rem;letter-spacing:.03em}

.sec-head{max-width:66ch;margin-bottom:clamp(40px,5vw,64px)}
.sec-head h2 + p{margin-top:20px}

/* barra fina acima do título de card: assinatura do brand book */
.rule{display:block;width:34px;height:3px;border-radius:2px;background:var(--blue);margin-bottom:18px}
.rule.is-mint{background:var(--mint)}
.band-light .rule.is-mint,.band-light-2 .rule.is-mint{background:var(--mint-deep)}

/* ---------- 5. Botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:100px;border:1px solid transparent;
  font-family:var(--fb);font-weight:700;font-size:.94rem;letter-spacing:-.01em;
  cursor:pointer;transition:all .25s var(--ease);white-space:nowrap;
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:#0059c4;transform:translateY(-1px)}
.btn-ghost{background:transparent;border-color:var(--line-dark-2);color:var(--on-dark)}
.btn-ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05)}
.band-light .btn-ghost,.band-light-2 .btn-ghost{border-color:var(--line-light-2);color:var(--on-light)}
.band-light .btn-ghost:hover,.band-light-2 .btn-ghost:hover{background:rgba(10,11,14,.04);border-color:var(--line-light-2)}
.btn-solid-dark{background:var(--ink);color:#fff}
.btn-solid-dark:hover{background:var(--graphite-2);transform:translateY(-1px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-weight:700;font-size:.92rem;color:var(--blue);
  transition:gap .25s var(--ease);
}
.link-arrow svg{width:14px;height:14px;flex:none}
.band-dark .link-arrow,.band-dark-2 .link-arrow{color:var(--blue-soft)}
.link-arrow:hover{gap:13px}

/* ---------- 6. Header ---------- */
.site-head{
  position:sticky;top:0;z-index:80;
  background:rgba(5,5,7,.78);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-dark);
}
.site-head .wrap{display:flex;align-items:center;gap:32px;height:70px;padding-block:0}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-mark{
  width:30px;height:27px;flex:none;
  background:url("images/logo_branca.png") no-repeat top center;
  background-size:100% auto;
}
.brand-word{
  font-family:var(--fd);font-weight:700;font-size:1.04rem;
  letter-spacing:.115em;text-transform:uppercase;color:#fff;line-height:1;
}
.site-nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.site-nav a{
  padding:8px 14px;border-radius:100px;font-size:.9rem;font-weight:500;
  color:var(--on-dark-dim);transition:all .2s var(--ease);
}
.site-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.site-nav a[aria-current="page"]{color:#fff}
.site-nav .nav-cta{
  background:var(--blue);color:#fff;font-weight:700;margin-left:10px;padding:9px 20px;
}
.site-nav .nav-cta:hover{background:#0059c4;color:#fff}

.nav-toggle{
  display:none;margin-left:auto;width:42px;height:42px;border:1px solid var(--line-dark-2);
  background:transparent;border-radius:10px;cursor:pointer;padding:0;
  align-items:center;justify-content:center;
}
.nav-toggle span{display:block;width:17px;height:1.5px;background:#fff;position:relative;transition:.25s var(--ease)}
.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;left:0;width:17px;height:1.5px;background:#fff;transition:.25s var(--ease);
}
.nav-toggle span::before{top:-5.5px}
.nav-toggle span::after{top:5.5px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:940px){
  .site-nav{
    position:fixed;inset:70px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--ink);border-bottom:1px solid var(--line-dark);
    padding:16px var(--gut) 28px;margin:0;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.22s var(--ease);
  }
  .site-nav.open{transform:none;opacity:1;pointer-events:auto}
  .site-nav a{padding:13px 4px;font-size:1rem;border-radius:0}
  .site-nav a:hover{background:transparent}
  .site-nav .nav-cta{margin:12px 0 0;justify-content:center;display:flex;padding:14px}
  .nav-toggle{display:flex}
}

/* ---------- 7. Hero ---------- */
.hero{
  position:relative;min-height:min(88vh,820px);display:flex;align-items:center;
  padding-block:clamp(90px,13vw,150px);overflow:hidden;background:var(--ink);
}
#sonar{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(56% 58% at 18% 46%, rgba(5,5,7,.94) 0%, rgba(5,5,7,.62) 42%, rgba(5,5,7,0) 76%),
    linear-gradient(to bottom, rgba(5,5,7,.5) 0%, transparent 22%, transparent 62%, var(--ink) 100%);
}
.hero .wrap{position:relative;z-index:2}
.hero-inner{max-width:800px}
.hero h1{margin-bottom:26px}
.hero h1 .accent{color:var(--mint)}
.hero .lead{color:var(--on-dark-dim);max-width:55ch}
.hero-sign{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:44px;
  padding-top:26px;border-top:1px solid var(--line-dark);
  font-family:var(--fm);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--on-dark-mute);
}
.hero-sign span{display:inline-flex;align-items:center;gap:8px}
.hero-sign span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue)}
.hero-sign span:nth-child(2)::before{background:var(--mint)}
.hero-sign span:nth-child(3)::before{background:#fff;opacity:.5}

/* hero interno de páginas secundárias */
.hero-sub{
  position:relative;padding-block:clamp(76px,10vw,124px) clamp(52px,7vw,80px);
  background:var(--ink);border-bottom:1px solid var(--line-dark);overflow:hidden;
}
.hero-sub .wrap{position:relative;z-index:2}
.hero-sub h1{font-size:clamp(2.1rem,4.6vw,3.5rem);margin-bottom:22px}
.hero-sub .lead{color:var(--on-dark-dim)}
#sonar-sub{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-sub::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, var(--ink) 18%, rgba(5,5,7,.72) 52%, rgba(5,5,7,.34) 100%);
}

/* ---------- 8. Grades e cards ---------- */
.grid{display:grid;gap:20px}
.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:900px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.card{
  padding:30px;border-radius:var(--r);
  border:1px solid var(--line-dark);background:var(--graphite);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.card:hover{border-color:var(--line-dark-2);transform:translateY(-2px)}
.card h3{margin-bottom:10px}
.card p{font-size:.95rem;line-height:1.6}
.band-light .card,.band-light-2 .card{background:var(--paper);border-color:var(--line-light)}
.band-light-2 .card{background:var(--paper)}
.band-light .card{background:var(--paper-2);border-color:transparent}
.band-light .card:hover,.band-light-2 .card:hover{border-color:var(--line-light-2)}

.card-num{
  font-family:var(--fm);font-size:12px;letter-spacing:.1em;
  color:var(--blue-soft);margin-bottom:14px;display:block;
}
.band-light .card-num,.band-light-2 .card-num{color:var(--blue)}

/* card clicável de setor */
.sector{
  display:flex;flex-direction:column;gap:12px;padding:28px;
  border-radius:var(--r);border:1px solid var(--line-light);background:var(--paper);
  transition:all .3s var(--ease);
}
.sector:hover{transform:translateY(-3px);box-shadow:0 14px 40px -18px rgba(10,11,14,.28);border-color:transparent}
.sector .tag{
  font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);
}
.sector h3{font-size:1.12rem}
.sector p{font-size:.93rem;line-height:1.58}

/* números / provas */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r);overflow:hidden}
.facts>div{background:var(--ink-2);padding:30px 26px}
.facts .v{font-family:var(--fd);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:10px}
.facts .v em{font-style:normal;color:var(--mint);font-size:.62em;margin-left:4px;font-weight:600}
.facts .l{font-size:.88rem;color:var(--on-dark-dim);line-height:1.45}
@media (max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.facts{grid-template-columns:1fr}}

/* lista com marcador de anel */
.ring-list li{
  position:relative;padding-left:26px;margin-bottom:14px;font-size:.97rem;line-height:1.58;
  color:var(--on-dark-dim);
}
.band-light .ring-list li,.band-light-2 .ring-list li{color:var(--on-light-dim)}
.ring-list li::before{
  content:'';position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;
  border:1.5px solid var(--blue);
}
.ring-list.is-mint li::before{border-color:var(--mint-deep)}
.ring-list li strong{color:var(--on-dark);font-weight:700}
.band-light .ring-list li strong,.band-light-2 .ring-list li strong{color:var(--on-light)}

/* duas colunas texto + visual */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(36px,6vw,80px);align-items:center}
.split.is-reverse>*:first-child{order:2}
@media (max-width:940px){.split{grid-template-columns:1fr;gap:40px}.split.is-reverse>*:first-child{order:0}}

/* citação institucional */
.quote{
  border-left:2px solid var(--mint);padding:6px 0 6px 28px;
  font-family:var(--fd);font-weight:400;
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.4;letter-spacing:-.02em;
}
.quote cite{
  display:block;margin-top:20px;font-family:var(--fm);font-size:12px;font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-mute);
}
.band-light .quote cite,.band-light-2 .quote cite{color:var(--on-light-dim)}

/* timeline de fases */
.phases{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:8px}
.phase{position:relative;padding:34px 22px 8px;border-top:1px solid var(--line-light)}
.band-dark .phase,.band-dark-2 .phase{border-top-color:var(--line-dark)}
.phase::before{
  content:'';position:absolute;top:-5.5px;left:22px;width:10px;height:10px;border-radius:50%;
  background:var(--paper-2);border:2px solid var(--blue);
}
.band-dark .phase::before,.band-dark-2 .phase::before{background:var(--ink)}
.phase:last-child::before{border-color:var(--mint-deep);background:var(--mint)}
.phase .n{font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:var(--blue);display:block;margin-bottom:10px}
.phase h3{font-size:1.02rem;margin-bottom:9px}
.phase p{font-size:.89rem;line-height:1.55}
@media (max-width:1000px){.phases{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.phases{grid-template-columns:1fr}}

/* tabela comparativa */
.tbl{width:100%;border-collapse:collapse;font-size:.94rem}
.tbl th,.tbl td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line-light);vertical-align:top}
.band-dark .tbl th,.band-dark .tbl td,.band-dark-2 .tbl th,.band-dark-2 .tbl td{border-bottom-color:var(--line-dark)}
.tbl th{
  font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-light-dim);border-bottom-width:1px;
}
.band-dark .tbl th,.band-dark-2 .tbl th{color:var(--on-dark-mute)}
.tbl td:first-child{font-weight:700;width:26%}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* diagramas */
.figure{margin:0}
.figure svg{width:100%;height:auto;display:block}
.figure figcaption{
  margin-top:16px;font-family:var(--fm);font-size:11.5px;letter-spacing:.06em;
  color:var(--on-dark-mute);line-height:1.55;
}
.band-light .figure figcaption,.band-light-2 .figure figcaption{color:var(--on-light-dim)}

/* ---------- 9. Formulário ---------- */
.form-card{
  background:var(--graphite);border:1px solid var(--line-dark);
  border-radius:var(--r-lg);padding:clamp(28px,4vw,46px);
}
.band-light .form-card,.band-light-2 .form-card{background:var(--paper);border-color:var(--line-light)}
.field{margin-bottom:20px}
.field label{
  display:block;margin-bottom:8px;font-size:.82rem;font-weight:700;letter-spacing:.01em;
}
.field .hint{font-weight:400;color:var(--on-dark-mute);margin-left:6px;font-size:.78rem}
.band-light .field .hint,.band-light-2 .field .hint{color:var(--on-light-dim)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid var(--line-dark-2);
  color:var(--on-dark);font-size:.96rem;transition:border-color .2s,background .2s;
}
.band-light .field input,.band-light .field select,.band-light .field textarea,
.band-light-2 .field input,.band-light-2 .field select,.band-light-2 .field textarea{
  background:var(--paper-2);border-color:var(--line-light-2);color:var(--on-light);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);background:rgba(0,112,243,.05);
}
.field textarea{resize:vertical;min-height:120px}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239BA3B0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:620px){.field-row{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-note{font-size:.82rem;line-height:1.55;color:var(--on-dark-mute);margin-top:18px}
.band-light .form-note,.band-light-2 .form-note{color:var(--on-light-dim)}

/* ---------- 10. CTA ---------- */
.cta-band{
  background:var(--ink-2);border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);text-align:center;
}
.cta-band h2{margin-bottom:20px}
.cta-band .btn-row{justify-content:center}
.cta-band .lead{margin-inline:auto}

/* ---------- 11. Footer ---------- */
.site-foot{background:var(--ink);border-top:1px solid var(--line-dark);padding-block:64px 34px}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.site-foot .brand{margin-bottom:20px}
.site-foot .brand-mark{width:34px;height:31px}
.site-foot .brand-word{font-size:1.15rem}
.site-foot h4{
  font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:16px;
}
.site-foot a,.site-foot p{font-size:.9rem;color:var(--on-dark-dim);line-height:2}
.site-foot a:hover{color:#fff}
.foot-bar{
  margin-top:52px;padding-top:24px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  font-size:.82rem;color:var(--on-dark-mute);
}

/* ---------- 13. Cadeia de camadas (componente-diagrama) ---------- */
.chain{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.chain::before{
  content:'';position:absolute;top:26px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-dark-2) 12%,var(--line-dark-2) 88%,transparent);
}
.band-light .chain::before,.band-light-2 .chain::before{
  background:linear-gradient(90deg,transparent,var(--line-light-2) 12%,var(--line-light-2) 88%,transparent);
}
.chain-step{position:relative;padding-top:52px}
.chain-step::before{
  content:'';position:absolute;top:20px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;background:var(--ink);
  border:2px solid var(--blue);
}
.band-light .chain-step::before,.band-light-2 .chain-step::before{background:var(--paper)}
.chain-step:first-child::before{border-color:var(--mint)}
.chain-step h3{font-size:.98rem;margin-bottom:8px;text-align:center}
.chain-step p{font-size:.85rem;line-height:1.5;text-align:center}
@media (max-width:820px){
  .chain{grid-template-columns:1fr;gap:0}
  .chain::before{top:8px;bottom:8px;left:6px;right:auto;width:1px;height:auto;
    background:linear-gradient(180deg,transparent,var(--line-dark-2) 8%,var(--line-dark-2) 92%,transparent)}
  .band-light .chain::before,.band-light-2 .chain::before{
    background:linear-gradient(180deg,transparent,var(--line-light-2) 8%,var(--line-light-2) 92%,transparent)}
  .chain-step{padding:0 0 26px 34px}
  .chain-step::before{top:5px;left:0;transform:none}
  .chain-step h3,.chain-step p{text-align:left}
}

/* ---------- 14. Faixa de compromisso ---------- */
.pledge{
  display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border-radius:var(--r);
  background:rgba(164,246,185,.07);border:1px solid rgba(164,246,185,.24);
}
.band-light .pledge,.band-light-2 .pledge{
  background:rgba(22,163,74,.06);border-color:rgba(22,163,74,.22);
}
.pledge svg{width:20px;height:20px;min-width:20px;flex:none;margin-top:2px;color:var(--mint)}
.band-light .pledge svg,.band-light-2 .pledge svg{color:var(--mint-deep)}
.pledge p{font-size:.94rem;line-height:1.6;margin:0}

/* ---------- 15. Diagramas e larguras ----------
   min-width:0 nos filhos de grid e flex e obrigatorio: sem isso, um SVG largo
   empurra a coluna e a pagina inteira ganha rolagem horizontal no celular. */
.split>*,.grid>*,.chain>*,.phases>*,.facts>*,.foot-grid>*,.form-card,.qa>*{min-width:0}
.fig-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.fig-scroll>svg{width:100%;height:auto}
@media (max-width:720px){
  .fig-scroll{margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut)}
  .fig-scroll>svg{min-width:520px}
}

/* ---------- 16. Lista de perguntas ---------- */
.qa{border-top:1px solid var(--line-light)}
.band-dark .qa,.band-dark-2 .qa{border-top-color:var(--line-dark)}
.qa>div{padding:26px 0;border-bottom:1px solid var(--line-light)}
.band-dark .qa>div,.band-dark-2 .qa>div{border-bottom-color:var(--line-dark)}
.qa h3{font-size:1.05rem;margin-bottom:10px}
.qa p{font-size:.95rem}

/* =========================================================================
   12. MOVIMENTO
   Regra da casa: nada se move sem motivo. O movimento existe para conduzir
   o olho na ordem certa de leitura, nunca para chamar atenção para si.
   ========================================================================= */

/* ---- 12.1 Transição entre páginas (nativa, sem biblioteca) ---- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .26s var(--ease) both}
::view-transition-new(root){animation:vtIn .42s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}
.site-head{view-transition-name:head}

/* ---- 12.2 Entrada da página ---- */
body{animation:pageIn .5s var(--ease) both}
@keyframes pageIn{from{opacity:0}}

/* ---- 12.3 Barra de progresso de leitura ---- */
.progress{
  position:fixed;top:0;left:0;height:2px;z-index:120;
  width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--blue),var(--mint));
  transition:transform .1s linear,opacity .25s var(--ease);
  pointer-events:none;opacity:0;
}

/* ---- 12.4 Cabeçalho que reage ao scroll ---- */
.site-head{transition:height .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.site-head .wrap{transition:height .3s var(--ease)}
.site-head.is-scrolled{background:rgba(5,5,7,.92);border-bottom-color:var(--line-dark-2)}
.site-head.is-scrolled .wrap{height:58px}
.brand-mark,.brand-word{transition:transform .3s var(--ease)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}

/* ---- 12.5 Revelação de blocos ---- */
.rv{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}
.rv.in{opacity:1;transform:none}

/* Títulos: sobem por trás de uma máscara. Dá peso sem pesar. */
.rv-h{
  clip-path:inset(0 0 108% 0);transform:translateY(14px);
  transition:clip-path 1s var(--ease),transform 1s var(--ease);
  transition-delay:var(--d,0ms);
}
.rv-h.in{clip-path:inset(-30% -10% -30% -10%);transform:none}

/* Fio que atravessa o topo da seção quando ela entra */
.band-edge{position:relative}
.band-edge::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),var(--mint),transparent);
  transform:scaleX(0);transform-origin:50% 50%;opacity:.75;
  transition:transform 1.3s var(--ease);
}
.band-edge.in::after{transform:scaleX(1)}

/* ---- 12.6 Cartões: foco que segue o cursor ---- */
.card,.sector{position:relative;overflow:hidden}
.card::after,.sector::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(61,147,255,.14),transparent 60%);
}
.band-light .card::after,.band-light-2 .card::after,.sector::after{
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(0,112,243,.09),transparent 60%);
}
.card:hover::after,.sector:hover::after{opacity:1}
.card>*,.sector>*{position:relative;z-index:1}

/* ---- 12.7 Diagramas: traço que se desenha ---- */
.draw{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);
  transition:stroke-dashoffset 1.6s var(--ease);transition-delay:var(--d,200ms)}
.in .draw,.draw.in{stroke-dashoffset:0}
.pop{opacity:0;transform:scale(.4);transform-origin:center;
  transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:var(--d,0ms)}
.in .pop{opacity:1;transform:none}

/* ---- 12.8 Cadeia: os nós acendem em sequência ---- */
.chain-step::before{transition:border-color .4s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.chain-step.lit::before{box-shadow:0 0 0 5px rgba(0,112,243,.16);transform:translateX(-50%) scale(1.15)}
.chain-step:first-child.lit::before{box-shadow:0 0 0 5px rgba(22,163,74,.18)}
@media (max-width:820px){.chain-step.lit::before{transform:scale(1.15)}}

/* ---- 12.9 Fases: a linha do tempo se preenche ---- */
.phases{position:relative}
.phases::before{
  content:'';position:absolute;top:0;left:0;height:1px;width:100%;
  background:linear-gradient(90deg,var(--blue),var(--mint));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.8s var(--ease) .2s;
}
.phases.in::before{transform:scaleX(1)}
@media (max-width:1000px){.phases::before{display:none}}

/* ---- 12.10 Contadores ---- */
.facts .v{font-variant-numeric:tabular-nums}
.facts>div{transition:background .35s var(--ease)}
.facts>div:hover{background:var(--graphite)}

/* ---- 12.11 Botões e links ---- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{
  content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transform:translateX(-100%);transition:transform .6s var(--ease);
}
.btn-primary:hover::before{transform:translateX(100%)}
.btn-primary>*{position:relative}
.site-nav a{position:relative}
.site-nav a::after{
  content:'';position:absolute;left:14px;right:14px;bottom:2px;height:1px;
  background:var(--blue-soft);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav .nav-cta::after{display:none}

/* ---- 12.12 Aprofundamento por scroll, onde o navegador suporta ---- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:940px){
    .figure{animation:floatUp linear both;animation-timeline:view();animation-range:entry 10% cover 60%}
    @keyframes floatUp{from{transform:translateY(26px)}to{transform:translateY(-14px)}}
    .dotted::before{animation:dotDrift linear both;animation-timeline:view();animation-range:entry cover}
    @keyframes dotDrift{from{background-position:0 0}to{background-position:0 60px}}
  }
}

/* ---- 12.13 Respeito a quem pediu menos movimento ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rv,.rv-h{opacity:1;transform:none;clip-path:none}
  .band-edge::after,.phases::before{transform:scaleX(1)}
  .draw{stroke-dashoffset:0}
  .pop{opacity:1;transform:none}
  html{scroll-behavior:auto}
  @view-transition{navigation:none}
}

/* =========================================================================
   17. Componentes que substituem texto por forma
   ========================================================================= */

/* ---- 17.1 Grade de setores: ícone e nome. Sem parágrafo. ---- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light);
  border:1px solid var(--line-light);border-radius:var(--r);overflow:hidden}
.band-dark .tiles,.band-dark-2 .tiles{background:var(--line-dark);border-color:var(--line-dark)}
.tile{display:flex;flex-direction:column;gap:16px;padding:30px 26px;background:var(--paper);
  transition:background .3s var(--ease);min-height:132px}
.band-dark .tile,.band-dark-2 .tile{background:var(--ink-2)}
.tile:hover{background:var(--paper-2)}
.band-dark .tile:hover,.band-dark-2 .tile:hover{background:var(--graphite)}
.tile svg{width:30px;height:30px;color:var(--blue);flex:none}
.band-dark .tile svg,.band-dark-2 .tile svg{color:var(--blue-soft)}
.tile span{font-family:var(--fd);font-weight:600;font-size:1rem;letter-spacing:-.015em;line-height:1.25}
@media (max-width:820px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tiles{grid-template-columns:1fr}}

/* ---- 17.2 Caso que abre. O detalhe só aparece se for pedido. ---- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
@media (max-width:960px){.cases{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.cases{grid-template-columns:1fr}}
.case{border:1px solid var(--line-light);border-radius:var(--r);background:var(--paper);
  overflow:hidden;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.case[open]{border-color:var(--line-light-2);box-shadow:0 16px 44px -24px rgba(10,11,14,.3)}
.case summary{list-style:none;cursor:pointer;padding:28px;display:block;position:relative}
.case summary::-webkit-details-marker{display:none}
.case summary .tag{font-family:var(--fm);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);display:block;margin-bottom:12px}
.case summary h3{font-size:1.08rem;margin-bottom:12px;padding-right:30px}
.case summary p{font-family:var(--fm);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);margin-top:16px}
.case summary::after{
  content:'';position:absolute;top:31px;right:26px;width:10px;height:10px;
  border-right:1.6px solid var(--on-light-dim);border-bottom:1.6px solid var(--on-light-dim);
  transform:rotate(45deg);transition:transform .35s var(--ease);
}
.case[open] summary::after{transform:rotate(-135deg)}
.case-body{padding:22px 28px 28px;border-top:1px solid var(--line-light)}
.case-body dt{font-family:var(--fm);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-light-dim);margin-bottom:6px}
.case-body dd{margin:0 0 18px;font-size:.93rem;line-height:1.6;color:var(--on-light-dim)}
.case-body dd:last-child{margin-bottom:0}
.case-body .out{color:var(--mint-deep)}

/* ---- 17.3 Linha do tempo compacta: número, nome, prazo ---- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative}
.steps::before{content:'';position:absolute;top:5px;left:0;right:0;height:1px;background:var(--line-light)}
.band-dark .steps::before,.band-dark-2 .steps::before{background:var(--line-dark)}
.steps::after{content:'';position:absolute;top:5px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--blue),var(--mint));
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.9s var(--ease) .25s}
.steps.in::after{transform:scaleX(1)}
.step{position:relative;padding:34px 24px 0 0}
.step::before{content:'';position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--paper-2);border:2px solid var(--blue);z-index:1}
.band-dark .step::before,.band-dark-2 .step::before{background:var(--ink)}
.step:last-child::before{border-color:var(--mint-deep)}
.band-dark .step:last-child::before,.band-dark-2 .step:last-child::before{border-color:var(--mint)}
.step b{display:block;font-family:var(--fd);font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:700;
  letter-spacing:-.045em;line-height:1;color:var(--line-light-2);margin-bottom:16px}
.band-dark .step b,.band-dark-2 .step b{color:rgba(255,255,255,.17)}
.step h3{font-size:1rem;margin-bottom:6px}
.step span{font-family:var(--fm);font-size:11.5px;letter-spacing:.05em;color:var(--on-light-dim)}
.band-dark .step span,.band-dark-2 .step span{color:var(--on-dark-mute)}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr;gap:26px 0}
  .steps::before,.steps::after{display:none}
  .step{padding-top:0}
  .step::before{position:relative;display:block;margin-bottom:14px}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---- 17.4 Lista numerada em duas colunas ---- */
.numlist{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;counter-reset:n;list-style:none}
@media (max-width:760px){.numlist{grid-template-columns:1fr}}
.numlist li{counter-increment:n;display:flex;gap:16px;padding:18px 0;
  border-bottom:1px solid var(--line-light)}
.band-dark .numlist li,.band-dark-2 .numlist li{border-bottom-color:var(--line-dark)}
.numlist li::before{content:counter(n,decimal-leading-zero);font-family:var(--fm);font-size:11px;
  color:var(--blue);letter-spacing:.08em;padding-top:5px;flex:none}
.numlist strong{display:block;font-family:var(--fd);font-weight:600;font-size:.99rem;margin-bottom:4px}
.numlist p{font-size:.9rem;line-height:1.5;margin:0}

/* ---- 17.5 Chips de entregável ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{font-size:.82rem;padding:7px 13px;border-radius:100px;
  background:var(--paper-2);border:1px solid var(--line-light);color:var(--on-light-dim)}
.band-dark .chips span,.band-dark-2 .chips span{background:rgba(255,255,255,.04);
  border-color:var(--line-dark);color:var(--on-dark-dim)}