/* ==========================================================================
   Bernardino Advogados — folha de estilo do site (bernardinoadv.com)
   Origem: redesign V10-2 "Retrato", integrado ao app Flask desta pasta.
   Editar aqui; `style.css` continua servindo apenas o painel /admin.
   --------------------------------------------------------------------------
   V10-2 "Retrato" (revisão sobre a V10)
   Base: V8 "Dossiê" — mesma linguagem das apresentações institucionais
   (sucinta / AT), com contraste corrigido (WCAG AA/AAA), leitura
   justificada com hifenização pt-BR e responsividade em todas as telas.

   Ajustes desta revisão, a partir do feedback de 19/08/2026:
     · glifo da marca trocado pelos dois cantos opostos (era o traço em Z);
     · hero mais abrangente: empresas, empresários e agronegócio, com
       "gestão de crise" no lugar do recorte só-empresa;
     · trajetória generalizada — sem o nome da banca de formação;
     · retrato: a foto e o enquadramento da V10 "Retrato" — retângulo alto;
     · acesso ao perfil no Migalhas no rodapé, no lugar de blog próprio.
   Propósito, escopo, método, carteira, alcance e depoimentos: sem mudança.
   ========================================================================== */

:root{
  /* --- paleta: família da marca, com níveis de contraste corrigidos ------
     contraste medido sobre o fundo --onix (#0B0D10):
       --titulo   17.7:1   AAA
       --texto    12.0:1   AAA
       --platina   9.7:1   AAA
       --aco       7.5:1   AAA (corpo pequeno)                            */
  --onix:#0B0D10;          /* fundo                                       */
  --grafite:#14181C;       /* apoio escuro / placeholder de imagem        */
  --titulo:#F5F4F2;        /* títulos                                     */
  --texto:#C6CCD3;         /* corpo de texto                              */
  --platina:#B0B8C1;       /* rótulos e acento metálico                   */
  --aco:#9AA2AB;           /* texto secundário                            */
  --palavra:rgba(176,184,193,.58);   /* palavra de abertura de seção      */

  --fio:rgba(176,184,193,.22);
  --fio-forte:rgba(176,184,193,.44);

  /* --- efeito metálico dos títulos: mesmos tons da paleta, em degradê ---
     aço → platina → alabastro → branco (reflexo) → alabastro → platina → aço
     a leitura geral continua clara (mesma "cor atual"), só ganha relevo. */
  --metal:linear-gradient(
    115deg,
    var(--aco) 0%,
    var(--platina) 24%,
    var(--titulo) 42%,
    #fff 50%,
    var(--titulo) 58%,
    var(--platina) 76%,
    var(--aco) 100%
  );
  /* mesma liga, em versão translúcida — para a palavra grande de abertura,
     que precisa continuar recessiva (a textura de fundo tem que "vazar"). */
  --metal-palavra:linear-gradient(
    115deg,
    rgba(154,162,171,.4) 0%,
    rgba(176,184,193,.54) 24%,
    rgba(245,244,242,.62) 42%,
    rgba(255,255,255,.8) 50%,
    rgba(245,244,242,.62) 58%,
    rgba(176,184,193,.54) 76%,
    rgba(154,162,171,.4) 100%
  );

  --serif:'Century Schoolbook','Noto Serif',Georgia,serif;       /* titulos */
  --sans:Calibri,'Carlito',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;  /* corpo */
  --mark:'Jost',sans-serif;                                     /* wordmark */

  /* --- grade fluida ---------------------------------------------------- */
  --max:1180px;
  --gut:clamp(20px,5.4vw,88px);
  --gut-seg:max(var(--gut),env(safe-area-inset-left,0px));
  --col:clamp(96px,12.5vw,164px);   /* coluna de rótulos                  */
  --vao:clamp(22px,4.4vw,80px);
  --medida:66ch;                    /* medida de leitura (texto justificado) */

  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:72px;
}
body{
  margin:0;background:var(--onix);color:var(--texto);
  font-family:var(--sans);font-weight:400;
  font-size:clamp(15.5px,.4vw + 14.6px,17.5px);line-height:1.75;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overflow-wrap:break-word;
}
::selection{background:rgba(176,184,193,.28);color:#fff}
img{max-width:100%;display:block}

.wrap{
  max-width:var(--max);margin:0 auto;
  padding-left:var(--gut-seg);padding-right:var(--gut-seg);
  position:relative;z-index:1;
}

/* textura de fundo — malha e arcos, quase imperceptíveis ------------------ */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(176,184,193,.026) 0 1px,transparent 1px 104px),
    repeating-linear-gradient(90deg,rgba(176,184,193,.020) 0 1px,transparent 1px 104px);
}
.fundo-arcos{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.fundo-arcos path{fill:none;stroke:var(--platina);stroke-width:.6;opacity:.075}

/* --- texto corrido: sempre justificado, com hifenização pt-BR ----------- */
p,li,blockquote,.men{
  text-align:justify;
  text-align-last:left;
  hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;
  hyphenate-limit-chars:6 3 3;
}

/* ---------------------------- tipografia -------------------------------- */
.lab{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(10px,.16vw + 9.6px,11px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--platina);
  margin:0;line-height:2;text-align:left;text-align-last:auto;hyphens:manual;
}
h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.9vw,47px);line-height:1.24;letter-spacing:-.014em;
  color:var(--titulo);margin:0 0 32px;max-width:17em;text-wrap:balance;
}
h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2.4vw,29px);line-height:1.36;letter-spacing:-.008em;
  color:var(--titulo);margin:0 0 26px;max-width:20em;text-wrap:pretty;
}
h3{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(13.5px,.2vw + 13px,14.5px);letter-spacing:.03em;
  color:var(--titulo);margin:0 0 8px;
}

/* efeito metálico nos títulos — degradê da própria paleta "esculpido"
   no texto, com o brilho se deslocando devagar sobre a letra (a mesma
   chapa, sob luz que se move). A cor de base (var(--titulo)) fica como
   piso e como alternativa para navegadores/impressão sem background-clip. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h1,h2,h3{
    background-image:var(--metal);
    background-size:260% 100%;
    background-position:0% 0%;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    text-shadow:0 1px 1px rgba(11,13,16,.35);
    animation:brilho-metal 8s ease-in-out infinite alternate;
  }
  /* garante que o itálico de destaque dentro do título herde o mesmo brilho */
  h1 em,h1 strong,h2 em,h2 strong,h3 em,h3 strong{
    color:inherit;-webkit-text-fill-color:inherit;
  }
}
@keyframes brilho-metal{
  from{background-position:0% 0%}
  to{background-position:100% 0%}
}
p{margin:0 0 22px;max-width:var(--medida)}
p:last-child{margin-bottom:0}
.men{font-size:.9em;color:var(--aco);max-width:62ch}
em{font-style:italic;color:var(--titulo)}
strong{font-weight:400;color:var(--titulo)}

section{padding:clamp(72px,12vh,168px) 0;border-top:1px solid var(--fio)}

.bloco{display:grid;grid-template-columns:var(--col) 1fr;gap:0 var(--vao)}
.bloco + .bloco{margin-top:clamp(52px,8vh,100px)}
.col-lab{padding-top:10px}

/* glifo da marca */
.glifo{display:block;color:var(--platina);opacity:.9}
.glifo.g-lado{width:14px;height:14px;opacity:.7;margin-bottom:15px}
.glifo.g-marca{width:14px;height:14px;opacity:.85;margin-bottom:17px}

/* ------------------------- utilitários de acesso ------------------------ */
.pular{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--titulo);color:var(--onix);
  font-family:var(--sans);font-size:13px;letter-spacing:.08em;
  padding:12px 18px;text-decoration:none;
}
.pular:focus{left:12px;top:12px}
a:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--platina);outline-offset:4px;border-radius:1px;
}

/* barra de leitura */
.progresso{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:40;
  background:var(--platina);opacity:.85;
  transform:scaleX(0);transform-origin:left;
  will-change:transform;
}

/* índice lateral (só em telas largas) */
.indice{
  position:fixed;right:clamp(12px,1.6vw,26px);top:50%;transform:translateY(-50%);
  z-index:30;display:grid;gap:6px;
}
.indice a{
  display:flex;align-items:center;justify-content:flex-end;
  height:26px;width:132px;text-decoration:none;position:relative;
}
.indice a::after{
  content:"";width:14px;height:1px;background:var(--platina);opacity:.45;
  transition:width .45s var(--ease),opacity .45s ease;
}
.indice a:hover::after,.indice a:focus-visible::after,.indice a[aria-current="true"]::after{
  width:28px;opacity:1;
}
.indice a span{
  font-family:var(--sans);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--platina);margin-right:12px;white-space:nowrap;
  opacity:0;transform:translateX(6px);
  transition:opacity .4s ease,transform .4s var(--ease);
}
.indice a:hover span,.indice a:focus-visible span,.indice a[aria-current="true"] span{
  opacity:1;transform:none;
}

/* -------------------------------- hero ---------------------------------- */
.hero{
  min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:clamp(112px,17vh,180px) 0 clamp(72px,10vh,124px);
  position:relative;border-top:0;overflow:hidden;
}
.arcs{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.arcs path,.arcs line{fill:none;stroke:var(--platina);stroke-width:.6;opacity:.18}
.topbar{
  position:absolute;top:clamp(26px,5.5vh,56px);
  left:var(--gut-seg);right:var(--gut-seg);
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;z-index:2;
}
.wordmark{line-height:1}
.wordmark .nome{
  font-family:var(--mark);font-weight:300;
  font-size:clamp(12px,.24vw + 11.4px,13.5px);letter-spacing:.44em;
  text-transform:uppercase;color:var(--titulo);display:block;
}
.wordmark .sub{
  font-family:var(--mark);font-weight:300;
  font-size:clamp(7.5px,.12vw + 7.2px,8.5px);letter-spacing:.5em;
  text-transform:uppercase;color:var(--aco);display:block;
  margin-top:8px;padding-left:.26em;
}
.wordmark .nome .a-mark{color:var(--platina)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero p{max-width:min(var(--medida),62ch)}
.tagline{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(14.5px,1.4vw,17px);color:var(--aco);
  margin-top:38px;text-align:left;text-align-last:auto;
}
.fio-hero{
  margin-top:38px;width:min(100%,360px);height:1px;
  background:linear-gradient(90deg,var(--fio-forte),transparent);
  transform-origin:left;transform:scaleX(0);
}
.desce{
  position:absolute;left:var(--gut-seg);bottom:clamp(22px,4vh,40px);z-index:2;
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--aco);padding:12px 0;
  transition:color .4s ease;
}
.desce:hover{color:var(--titulo)}
.desce i{
  display:block;width:34px;height:1px;background:currentColor;
  animation:convida 2.6s ease-in-out infinite;
}
/* leve convite ao scroll — o traço respira, sem chamar mais atenção que o texto */
@keyframes convida{
  0%,100%{transform:scaleX(1);opacity:.85}
  50%{transform:scaleX(.62);opacity:1}
}

.seq{opacity:0;transform:translateY(12px)}
.go .seq{opacity:1;transform:none;transition:opacity 1.2s ease,transform 1.2s var(--ease)}
.go .s1{transition-delay:.15s} .go .s2{transition-delay:.4s}
.go .s3{transition-delay:.65s} .go .s4{transition-delay:.9s} .go .s5{transition-delay:1.3s}
.go .fio-hero{transform:scaleX(1);transition:transform 2s var(--ease) 1.1s}

/* ------------------------------ travessia -------------------------------- */
.travessia{position:relative;margin-top:clamp(42px,7vh,80px)}
.tfio{position:absolute;inset:0;pointer-events:none}
.tfio span{position:absolute;background:var(--platina);opacity:.5}
.tfio .v1{
  left:0;top:0;width:1px;height:var(--corte,50%);
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.2s cubic-bezier(.3,0,.2,1);
}
.tfio .h{
  left:0;right:0;top:var(--corte,50%);height:1px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.3s cubic-bezier(.3,0,.2,1) 1s;
}
.tfio .v2{
  right:0;top:var(--corte,50%);bottom:0;width:1px;
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.3s cubic-bezier(.3,0,.2,1) 2.1s;
}
.travessia.on .tfio span{transform:none}
.etapa{
  position:relative;padding-bottom:clamp(36px,6vh,66px);
  padding-left:clamp(26px,3.4vw,38px);
}
.etapa:last-child{padding-bottom:0}
.etapa .caixa{
  width:min(100%,430px);opacity:0;transform:translateY(12px);
  transition:opacity 1.1s ease,transform 1.1s var(--ease);
}
.etapa.on .caixa{opacity:1;transform:none}
.etapa.dir{
  display:flex;justify-content:flex-end;
  padding-left:0;padding-right:clamp(26px,3.4vw,38px);
}
.etapa .ano{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(10px,.16vw + 9.6px,11px);letter-spacing:.2em;
  text-transform:uppercase;color:var(--platina);display:block;margin-bottom:11px;
}
.etapa p{margin:0;font-size:.87em;color:var(--aco);max-width:46ch;line-height:1.78}

/* ------------------------------- imagens --------------------------------- */
.banda{
  position:relative;margin:0;background:var(--grafite);overflow:hidden;
  height:clamp(300px,58vh,620px);
}
.banda img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  filter:grayscale(1) contrast(1.06) brightness(1.02);
  transform:scale(1.06);
  transition:transform 2.6s var(--ease);
}
/* leve zoom de assentamento — a imagem chega mais próxima e recua ao entrar na tela */
.banda.on img{transform:scale(1)}
.banda::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,13,16,.5),rgba(11,13,16,.04) 48%,rgba(11,13,16,.76));
}
.banda-fim{height:clamp(280px,54vh,560px)}
.banda-fim img{filter:grayscale(1) contrast(1.06) brightness(.98)}
.banda-fim::after{
  background:linear-gradient(180deg,rgba(11,13,16,.68),rgba(11,13,16,.08) 46%,rgba(11,13,16,.84));
}
.banda figcaption{
  position:absolute;left:var(--gut-seg);bottom:clamp(16px,3vh,28px);z-index:2;
  font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--platina);margin:0;
  text-shadow:0 1px 12px rgba(11,13,16,.9);
}

/* -------------------------------- listas --------------------------------- */
.setores{list-style:none;margin:0;padding:0;border-top:1px solid var(--fio)}
.setores li{
  --atraso:0s;
  padding:15px 0 15px 18px;border-bottom:1px solid var(--fio);border-left:2px solid transparent;
  font-family:var(--sans);font-size:clamp(13.5px,.2vw + 13px,14.5px);
  letter-spacing:.02em;color:var(--texto);
  text-align:left;text-align-last:auto;hyphens:manual;
  opacity:0;transform:translateX(-8px);
  transition:
    opacity .7s ease var(--atraso),transform .7s var(--ease) var(--atraso),
    border-color .35s ease,color .35s ease,padding-left .35s var(--ease);
}
.setores.on li{opacity:1;transform:none}
.setores li:hover,.setores li:focus-visible{
  border-left-color:var(--platina);color:var(--titulo);padding-left:26px;
}
.setores li:nth-child(1){--atraso:.04s}
.setores li:nth-child(2){--atraso:.1s}
.setores li:nth-child(3){--atraso:.16s}
.setores li:nth-child(4){--atraso:.22s}
.setores li:nth-child(5){--atraso:.28s}
.setores li:nth-child(6){--atraso:.34s}
.setores li:nth-child(7){--atraso:.4s}
.setores li:nth-child(8){--atraso:.46s}

/* --------------------- abertura de seção (palavra grande) ---------------- */
.abre{overflow:hidden;margin-bottom:clamp(32px,5.5vh,70px)}
.abre-in{
  max-width:var(--max);margin:0 auto;padding-left:var(--gut-seg);
  display:flex;align-items:center;gap:clamp(14px,2.2vw,36px);
}
.abre .regua{
  flex:0 0 clamp(28px,5.4vw,110px);height:1px;background:rgba(176,184,193,.6);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s var(--ease) .1s;
}
.abre.on .regua{transform:scaleX(1)}
.abre .palavra{
  font-family:var(--sans);font-weight:300;text-transform:uppercase;
  font-size:clamp(32px,min(7.6vw,calc((52vw + 320px) / (var(--n,10) * .68))),96px);
  line-height:1;letter-spacing:.012em;color:var(--palavra);white-space:nowrap;
  opacity:0;transform:translateX(-14px);
  transition:opacity 1.5s ease .25s,transform 1.6s var(--ease) .25s;
}
.abre.on .palavra{opacity:1;transform:none}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .abre .palavra{
    background-image:var(--metal-palavra);
    background-size:260% 100%;
    background-position:0% 0%;
    background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    animation:brilho-metal 9s ease-in-out infinite alternate;
  }
}

/* --------------------------- escopo em quadrantes ------------------------ */
.quadros{
  display:grid;grid-template-columns:1fr 1fr;position:relative;
  margin-top:clamp(38px,6.5vh,76px);
}
.quadros::before,.quadros::after{content:"";position:absolute;background:var(--fio-forte)}
.quadros::before{
  top:0;bottom:0;left:50%;width:1px;
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.6s cubic-bezier(.3,0,.2,1) .15s;
}
.quadros::after{
  left:0;right:0;top:50%;height:1px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.9s cubic-bezier(.3,0,.2,1) .3s;
}
.quadros.on::before{transform:scaleY(1)}
.quadros.on::after{transform:scaleX(1)}
.quadro{
  padding:clamp(26px,4vh,46px) clamp(22px,3vw,48px);
  opacity:0;transform:translateY(12px);
  transition:opacity .85s ease,transform .85s var(--ease);
}
.quadro:nth-child(2n+1){padding-left:0}
.quadro:nth-child(2n){padding-right:0}
.quadro:nth-child(-n+2){padding-top:0}
.quadro:nth-last-child(-n+2){padding-bottom:0}
.quadro .lab{margin-bottom:14px}
.quadro p{font-size:.88em;line-height:1.76;color:var(--aco);max-width:40ch;margin:0}
/* leve cascata: cada quadrante entra logo após o anterior */
.quadros.on .quadro{opacity:1;transform:none}
.quadros.on .quadro:nth-child(1){transition-delay:.05s}
.quadros.on .quadro:nth-child(2){transition-delay:.18s}
.quadros.on .quadro:nth-child(3){transition-delay:.31s}
.quadros.on .quadro:nth-child(4){transition-delay:.44s}

/* ------------------------------- método ---------------------------------- */
.passos{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 clamp(22px,3.2vw,48px);position:relative;margin-top:clamp(40px,6.5vh,78px);
}
.trilho{position:absolute;top:6px;left:0;right:0;height:1px;background:var(--fio)}
.trilho i{
  display:block;height:1px;background:var(--platina);opacity:.7;
  transform:scaleX(0);transform-origin:left;
  transition:transform 2.4s cubic-bezier(.35,0,.2,1) .2s;
}
.passos.on .trilho i{transform:scaleX(1)}
.passo{position:relative;padding-top:34px}
.passo::before{
  content:"";position:absolute;top:2.5px;left:0;width:8px;height:8px;border-radius:50%;
  background:var(--platina);opacity:0;transform:scale(.4);
  transition:opacity .7s ease,transform .7s var(--ease);
}
.passos.on .passo::before{opacity:1;transform:scale(1)}
.passos.on .p2::before{transition-delay:.8s}
.passos.on .p3::before{transition-delay:1.5s}
.passo .lab{margin-bottom:14px}
.passo h3{
  font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.5vw,21px);
  margin-bottom:12px;letter-spacing:0;
}
.passo p{font-size:.88em;line-height:1.78;color:var(--aco);max-width:44ch;margin:0}

/* -------------------------------- mapa ----------------------------------- */
.mapa{width:100%;height:auto;display:block;margin-top:10px;overflow:visible}
.mapa .terra path,.mapa .terra-neutra path,.mapa .terra-ar path{
  opacity:0;transition:opacity 1.8s ease;
}
.mapa.on .terra path,.mapa.on .terra-neutra path,.mapa.on .terra-ar path{opacity:1}
.mapa .rota{
  stroke-dasharray:1600;stroke-dashoffset:1600;
  transition:stroke-dashoffset 3s cubic-bezier(.4,0,.2,1) .5s;
}
.mapa.on .rota{stroke-dashoffset:0}
.mapa .ponto{opacity:0;transition:opacity .9s ease .9s}
.mapa.on .ponto{opacity:1}
.mapa .halo{
  opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.5);
  transition:opacity 1.2s ease 1.3s,transform 1.4s var(--ease) 1.3s;
}
.mapa.on .halo{opacity:1;transform:scale(1)}
.mapa text{opacity:0;transition:opacity 1.1s ease 1.1s;font-size:20px}
.mapa.on text{opacity:1}
.mapa .pais{letter-spacing:.34em}

/* ----------------------------- depoimentos ------------------------------- */
blockquote{
  margin:0;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(17px,1.7vw,20px);line-height:1.74;
  color:var(--titulo);max-width:58ch;text-indent:-.42em;
}
blockquote cite{
  display:block;margin-top:22px;font-style:normal;text-indent:0;
  text-align:left;text-align-last:auto;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(10px,.16vw + 9.6px,11px);letter-spacing:.18em;
  text-transform:uppercase;color:var(--aco);
}
.dep + .dep{margin-top:clamp(42px,7vh,80px)}

/* -------------------------------- rodapé --------------------------------- */
footer.rodape{border-top:1px solid var(--fio);padding:clamp(56px,9vh,110px) 0 clamp(58px,10vh,116px)}
.contatos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,212px),1fr));
  gap:32px;margin:38px 0 44px;
}
.contatos div{
  font-family:var(--sans);font-size:clamp(13.5px,.2vw + 13px,14.5px);
  color:var(--texto);line-height:2;text-align:left;overflow-wrap:anywhere;
}
.contatos a{
  color:var(--texto);text-decoration:none;
  border-bottom:1px solid var(--fio-forte);
  transition:color .4s ease,border-color .4s ease;
}
.contatos a:hover{color:var(--titulo);border-color:var(--titulo)}
.assinatura{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  border-top:1px solid var(--fio);padding-top:26px;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--aco);
}
.lnk{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--fio-forte);
  color:var(--titulo);text-decoration:none;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(10.5px,.16vw + 10px,11.5px);letter-spacing:.2em;text-transform:uppercase;
  transition:border-color .5s ease,color .5s ease;
}
.lnk i{display:block;width:26px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.lnk:hover,.lnk:focus-visible{border-color:var(--titulo);color:#fff}
.lnk:hover i{width:42px}

/* ------------------------------ revelações -------------------------------- */
.rise{opacity:0;transform:translateY(14px);
  transition:opacity 1.2s ease,transform 1.2s var(--ease)}
.rise.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.seq,.etapa .caixa{opacity:1;transform:none;transition:none}
  .fio-hero{transform:scaleX(1);transition:none}
  .tfio span{transform:none;transition:none}
  .mapa .rota{stroke-dashoffset:0;transition:none}
  .mapa .halo{opacity:1;transform:none;transition:none}
  .quadros::before,.quadros::after{transform:none;transition:none}
  .abre .regua{transform:scaleX(1);transition:none}
  .abre .palavra{opacity:1;transform:none;transition:none}
  .trilho i{transform:none;transition:none}
  .passo::before{opacity:1;transform:none;transition:none}
  .mapa .ponto,.mapa text,.mapa .terra path,.mapa .terra-neutra path,.mapa .terra-ar path{
    opacity:1;transition:none;
  }
  .indice a::after,.indice a span,.lnk i{transition:none}
  .banda img{transform:none;transition:none}
  .quadro,.setores li{opacity:1;transform:none;transition:none}
  .desce i{animation:none}
  h1,h2,h3,.abre .palavra{animation:none;background-position:0% 0%}
}

/* ============================== responsivo =============================== */

/* monitores grandes: mais respiro, sem esticar a coluna de leitura */
@media (min-width:1600px){
  :root{--max:1280px;--medida:68ch}
}

/* o índice lateral só aparece quando há margem livre ao lado do texto */
@media (max-width:1399px){
  .indice{display:none}
}
@media (max-width:1080px){
  :root{--medida:62ch}
  .passos{gap:0 clamp(18px,2.6vw,34px)}
  .passo p{max-width:36ch}
}

/* tablets em retrato */
@media (max-width:900px){
  :root{--medida:60ch}
  .abre-in{align-items:flex-start;gap:clamp(12px,2.4vw,28px);padding-right:var(--gut-seg)}
  .abre .regua{margin-top:.55em}
  .abre .palavra{white-space:normal;overflow-wrap:break-word;font-size:clamp(32px,8.4vw,64px)}
  .quadros{grid-template-columns:1fr;margin-top:26px}
  .quadros::before,.quadros::after{display:none}
  .quadro{padding:24px 0;border-bottom:1px solid var(--fio)}
  .quadro:last-child{border-bottom:0}
  .quadro p{max-width:58ch}
  .passos{grid-template-columns:1fr;gap:0;margin-top:30px}
  .trilho{top:0;bottom:0;left:3px;right:auto;width:1px;height:auto}
  .trilho i{width:1px;height:100%;transform:scaleY(0);transform-origin:top;
    transition:transform 2.2s cubic-bezier(.35,0,.2,1) .2s}
  .passos.on .trilho i{transform:scaleY(1)}
  .passo{padding:22px 0 22px 26px}
  .passo::before{top:30px;left:0}
  .passo p{max-width:58ch}
  .mapa text{font-size:32px}
  .mapa .pais{letter-spacing:.26em}
  .bloco{grid-template-columns:1fr;gap:14px}
  .col-lab{padding-top:0}
  .tfio{display:none}
  .etapa.dir{justify-content:flex-start;padding-right:0;padding-left:22px}
  .etapa{border-left:1px solid var(--fio);padding-left:22px}
  .etapa .caixa{width:100%}
  .etapa p{max-width:58ch}
  .topbar{gap:14px}
}

/* celulares */
@media (max-width:600px){
  :root{--medida:100%}
  section{padding:clamp(56px,9vh,92px) 0}
  .hero{padding:clamp(100px,14vh,140px) 0 clamp(64px,9vh,86px)}
  h1{font-size:clamp(25px,6.6vw,30px);line-height:1.3;margin-bottom:26px}
  h2{font-size:clamp(20px,5.4vw,23px);margin-bottom:22px}
  body{line-height:1.76}
  p,.men,.quadro p,.passo p,.etapa p,blockquote{max-width:none}
  blockquote{font-size:clamp(16.5px,4.4vw,18.5px);text-indent:0}
  .lab{letter-spacing:.16em}
  .banda{height:clamp(230px,40vh,320px)}
  .banda-fim{height:clamp(220px,38vh,300px)}
  .mapa text{font-size:40px}
  .contatos{grid-template-columns:1fr;gap:22px;margin:30px 0 36px}
  .contatos div{line-height:2.1}
  .fio-hero{margin-top:30px}
  .desce{bottom:clamp(18px,3vh,28px)}
}

/* celulares pequenos: justificado sem rios */
@media (max-width:380px){
  :root{--gut:18px}
  p,li,blockquote,.men{hyphenate-limit-chars:5 2 2}
  .abre .palavra{font-size:clamp(28px,9vw,40px)}
  .wordmark .nome{letter-spacing:.32em}
  .wordmark .sub{letter-spacing:.38em}
  .setores li{padding:13px 0}
}

/* celular deitado / telas baixas: o hero não pode exigir a tela inteira */
@media (orientation:landscape) and (max-height:560px){
  .hero{min-height:auto;padding:clamp(92px,20vh,132px) 0 clamp(46px,10vh,72px)}
  .banda{height:clamp(220px,70vh,340px)}
  .banda-fim{height:clamp(200px,66vh,320px)}
  .desce{display:none}
  .indice{display:none}
}

/* ponteiro grosso (toque): alvos maiores */
@media (pointer:coarse){
  .contatos a{display:inline-block;padding:6px 0}
}

/* ============================ impressão / PDF ============================ */
@media print{
  @page{margin:16mm}
  html{scroll-behavior:auto}
  body{background:#fff;color:#15181C;font-size:10.5pt;line-height:1.6}
  body::before,.fundo-arcos,.arcs,.progresso,.indice,.desce,.pular{display:none!important}
  .rise,.seq,.etapa .caixa,.abre .palavra,.mapa text,.mapa .ponto,.mapa .halo,
  .mapa .terra path,.mapa .terra-neutra path,.mapa .terra-ar path{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .abre .regua,.trilho i,.quadros::before,.quadros::after,.fio-hero{transform:none!important}
  .mapa .rota{stroke-dashoffset:0!important}
  h1,h2,h3,.abre .palavra{
    background:none!important;-webkit-text-fill-color:currentColor!important;
    text-shadow:none!important;animation:none!important;
  }
  h1,h2,h3,blockquote,em,strong,.wordmark .nome,.setores li,.contatos div,.contatos a{color:#0B0D10}
  .lab,.etapa .ano,.tagline,.men,.quadro p,.passo p,.etapa p,blockquote cite,.assinatura,.banda figcaption{color:#4A525B}
  .abre .palavra{color:#8A929B}
  :root{--fio:rgba(11,13,16,.18);--fio-forte:rgba(11,13,16,.32)}
  .hero{min-height:auto;padding:0 0 24pt}
  section{padding:20pt 0;break-inside:avoid;page-break-inside:avoid}
  .banda{height:120pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .banda::after{display:none}
  .contatos a{border:0}
}


/* ============ V10 retrato: retrato, citacao grande, depoimentos ========== */
.conteudo-trajetoria{display:flex;flex-direction:column;gap:clamp(28px,5vh,48px);margin-bottom:clamp(28px,5vh,48px)}
.texto-trajetoria{min-width:0}
.retrato{margin:0;width:min(100%,320px)}
/* Retrato como na V10 "Retrato": coluna estreita e alta — largura responsível
   (min(100%,320px) / min(26vw,300px)) e altura fixa de 860px, o que recorta a
   foto quadrada num retângulo vertical fechado no rosto e descendo pelo tronco.
   É o mesmo resultado da V10; lá os 860px vinham do atributo `height` do <img>,
   aqui estão declarados no CSS, sem depender desse efeito colateral. */
.retrato img{
  width:100%;height:860px;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.06) brightness(1.02);
}
.retrato figcaption{
  margin-top:14px;font-family:var(--sans);font-weight:400;
  font-size:11px;letter-spacing:.08em;color:var(--aco);line-height:1.7;
}
@media (min-width:960px){
  .conteudo-trajetoria{flex-direction:row;align-items:flex-start;gap:clamp(28px,4vw,56px)}
  .texto-trajetoria{flex:1 1 auto;min-width:0;order:1}
  .retrato{flex:none;width:min(26vw,300px);order:2}
}

.citacao-grande{
  border-top:1px solid var(--fio);border-bottom:1px solid var(--fio);
  padding:clamp(56px,10vh,120px) 0;
}
.citacao-grande p{
  margin:0;text-align:left;text-align-last:auto;hyphens:manual;
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(26px,4.4vw,50px);line-height:1.26;letter-spacing:-.006em;
  color:var(--titulo);max-width:15em;text-indent:-.34em;
}

/* V10-2: dois acessos no rodapé — contato e perfil no Migalhas.
   O segundo é secundário: mesma forma, peso menor. */
.acessos{display:flex;flex-wrap:wrap;gap:6px clamp(26px,4vw,52px)}
.acessos .lnk{flex:0 0 auto}
.lnk-2{color:var(--aco);border-color:var(--fio)}
.lnk-2:hover,.lnk-2:focus-visible{color:var(--titulo);border-color:var(--titulo)}

.depoimentos-grade{display:grid;grid-template-columns:1fr;gap:clamp(40px,7vh,72px)}
#depoimentos blockquote{font-size:clamp(19px,2vw,24px);max-width:none}
@media (min-width:900px){
  .depoimentos-grade{grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px)}
}

/* ==========================================================================
   Páginas internas do app Flask — contato, blog, artigo e páginas legais.
   Não existiam no dossiê estático: reaproveitam paleta, tipografia e grade,
   para que o resto do site continue lendo como a mesma peça.
   ========================================================================== */

/* --------------------------- avisos (flash) ------------------------------ */
.avisos{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;
  width:min(92vw,560px);display:grid;gap:8px;
}
.aviso{
  margin:0;background:var(--grafite);
  border:1px solid var(--fio-forte);border-left-width:2px;
  padding:14px 18px;font-family:var(--sans);
  font-size:clamp(13.5px,.2vw + 13px,14.5px);color:var(--texto);
  text-align:left;text-align-last:auto;hyphens:manual;
}
.aviso-success{border-left-color:var(--platina)}
.aviso-error{border-left-color:#C58F86}

/* ---------------------- cabeçalho das páginas internas ------------------- */
.cabeca-interna{border-bottom:1px solid var(--fio);padding:clamp(20px,4vh,32px) 0}
.cabeca-interna .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.cabeca-interna .marca{display:flex;align-items:center;gap:14px;text-decoration:none}
.cabeca-interna .glifo.g-marca{margin-bottom:0}
.volta{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  color:var(--platina);font-family:var(--sans);
  font-size:clamp(10.5px,.16vw + 10px,11.5px);
  letter-spacing:.2em;text-transform:uppercase;
  transition:color .4s ease;
}
.volta i{display:block;width:22px;height:1px;background:currentColor;transition:width .4s var(--ease)}
.volta:hover,.volta:focus-visible{color:var(--titulo)}
.volta:hover i{width:36px}

/* ------------------------ corpo das páginas internas --------------------- */
.pagina{padding:clamp(52px,9vh,112px) 0 clamp(64px,11vh,132px)}
.pagina > .wrap > .lab{margin-bottom:16px}
.pagina h1{max-width:19em}
.pagina h2{margin-top:clamp(38px,6vh,64px)}
.pagina h3{margin-top:clamp(26px,4vh,40px)}
.pagina p{max-width:var(--medida)}
.pagina ul{
  margin:18px 0;padding-left:1.15em;max-width:var(--medida);
  text-align:left;text-align-last:auto;hyphens:manual;
}
.pagina li{margin-bottom:9px}
.pagina li::marker{color:var(--platina)}
.pagina a{color:var(--titulo);text-decoration:none;border-bottom:1px solid var(--fio-forte)}
.pagina a:hover{border-color:var(--titulo)}
.data-versao{
  font-family:var(--sans);font-size:clamp(10px,.16vw + 9.6px,11px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--aco);
  margin:0 0 clamp(34px,5vh,56px);
}
.legal-content .section + .section{margin-top:clamp(30px,5vh,52px)}
.legal-content .contact-info p{margin:4px 0}
.legal-footer{
  display:flex;flex-wrap:wrap;gap:6px clamp(26px,4vw,52px);
  border-top:1px solid var(--fio);margin-top:clamp(48px,8vh,88px);padding-top:26px;
}
.legal-footer a{border-bottom:0}

/* -------------------------------- contato -------------------------------- */
.grade-contato{display:grid;grid-template-columns:1fr;gap:clamp(44px,7vh,80px);margin-top:clamp(34px,5vh,58px)}
@media (min-width:900px){
  .grade-contato{grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(40px,5vw,88px)}
}
.formulario{display:grid;gap:26px;max-width:var(--medida)}
.campo{display:grid;gap:9px}
.campo label{
  font-family:var(--sans);font-size:clamp(10px,.16vw + 9.6px,11px);
  letter-spacing:.2em;text-transform:uppercase;color:var(--platina);
}
.campo input,.campo textarea{
  width:100%;background:transparent;color:var(--titulo);
  border:0;border-bottom:1px solid var(--fio-forte);
  padding:11px 2px;font-family:var(--sans);
  font-size:clamp(15px,.3vw + 14.3px,16.5px);line-height:1.7;
  transition:border-color .4s ease;
}
.campo textarea{resize:vertical;min-height:132px}
.campo input::placeholder,.campo textarea::placeholder{color:var(--aco);opacity:.7}
.campo input:focus,.campo textarea:focus{outline:0;border-bottom-color:var(--platina)}
.formulario .lnk{background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;justify-self:start}
.nota-form{
  font-family:var(--sans);font-size:clamp(12.5px,.16vw + 12px,13.5px);
  color:var(--aco);max-width:52ch;
}
.dados-contato div + div{margin-top:26px}
.dados-contato .lab{margin-bottom:6px}
.dados-contato p{
  margin:0;font-family:var(--sans);
  font-size:clamp(13.5px,.2vw + 13px,14.5px);line-height:2;
  color:var(--texto);text-align:left;text-align-last:auto;hyphens:manual;
}

/* ---------------------------- blog e artigos ----------------------------- */
.artigos{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(30px,5vh,52px)}
.cartao-artigo{border-top:1px solid var(--fio);padding:clamp(26px,4vh,40px) 0}
.cartao-artigo:last-child{border-bottom:1px solid var(--fio)}
.cartao-artigo h2{margin:0 0 12px;font-size:clamp(19px,2vw,25px)}
.cartao-artigo h2 a{color:var(--titulo);border-bottom:0}
.cartao-artigo h2 a:hover{border-bottom:1px solid var(--fio-forte)}
.cartao-artigo .resumo{margin:0 0 16px;color:var(--texto)}
.meta-artigo{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;margin:0;
  font-family:var(--sans);font-size:clamp(10px,.16vw + 9.6px,11px);
  letter-spacing:.18em;text-transform:uppercase;color:var(--aco);
}
.meta-artigo a{color:var(--platina);border-bottom:0}
.meta-artigo a:hover{color:var(--titulo)}
.vazio{
  border-top:1px solid var(--fio);border-bottom:1px solid var(--fio);
  padding:clamp(40px,7vh,80px) 0;margin-top:clamp(30px,5vh,52px);
}
.trilha{
  display:flex;flex-wrap:wrap;gap:8px 12px;margin:0 0 26px;
  font-family:var(--sans);font-size:clamp(10px,.16vw + 9.6px,11px);
  letter-spacing:.18em;text-transform:uppercase;color:var(--aco);
}
.trilha a{color:var(--platina);border-bottom:0}
.trilha a:hover{color:var(--titulo)}
.corpo-artigo{margin-top:clamp(30px,5vh,52px)}
.corpo-artigo p{margin:0 0 20px}

/* ---------------------- links legais no rodapé --------------------------- */
.assinatura .legais{display:flex;flex-wrap:wrap;gap:8px 22px}
.assinatura .legais a{
  color:var(--aco);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .4s ease,border-color .4s ease;
}
.assinatura .legais a:hover,.assinatura .legais a:focus-visible{
  color:var(--titulo);border-color:var(--fio-forte);
}