/* ==========================================================
   Studio Baze: camada de sistema
   Carregada depois dos estilos de página. Faz três coisas:
   1. Fixa uma escala tipográfica legível no lugar dos 9,13px
   2. Corrige contrastes que reprovavam em WCAG AA
   3. Adiciona os componentes de resposta (AEO) e navegação
   ========================================================== */

:root{
  /* Texto */
  --fs-body:16px;
  --fs-lead:clamp(17px,1.7vw,21px);
  --fs-small:15px;
  --fs-meta:13px;
  --fs-ui:14px;
  --lh-body:1.55;

  /* Cinzas verificados em contraste */
  --muted-light:#55555c;   /* 7.4:1 sobre branco  */
  --muted-dark:#aeaeb6;    /* 8.6:1 sobre #050505 */
  --faint-dark:#8e8e97;    /* 5.6:1 sobre #050505 */
  --hair-dark:#2a2a2e;

  --focus:#050505;
  --focus-invert:#ffffff;
}

/* ---------- Foco visível ---------- */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:1px;
}
.focus-band :focus-visible,
.services :focus-visible,
.analysis-form :focus-visible,
.final-cta :focus-visible,
.site-footer :focus-visible,
.mobile-menu :focus-visible,
.site-header.is-dark :focus-visible{
  outline-color:var(--focus-invert);
}

/* ---------- Pular para o conteúdo ---------- */
.skip-link{
  position:fixed;
  z-index:200;
  top:8px;
  left:8px;
  padding:12px 18px;
  color:#fff;
  background:var(--black,#050505);
  font-size:var(--fs-ui);
  transform:translateY(-160%);
  transition:transform .2s var(--ease,ease);
}
.skip-link:focus-visible{transform:none}

/* ==========================================================
   Escala de leitura
   ========================================================== */
.hero-lead{font-size:var(--fs-lead);line-height:1.4}

.metric strong{color:var(--ink,#090909)}
.metric p{font-size:var(--fs-small);font-weight:500;line-height:1.5;color:var(--muted-light)}

.focus-copy p{font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);color:var(--muted-dark);max-width:440px}

.market-card p{font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);color:var(--muted-light)}

.services-intro p{font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);color:var(--muted-dark)}
.service-row p{font-size:var(--fs-small);font-weight:400;line-height:1.5;color:var(--faint-dark)}

.diagnostic-copy>p{font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);color:var(--muted-light);max-width:430px}
.diagnostic-point strong{font-size:var(--fs-meta);letter-spacing:.02em}
.diagnostic-point p{font-size:14px;font-weight:400;line-height:1.5;color:var(--muted-light)}

.project-row p{font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);color:var(--muted-light)}

.faq-question{color:#2c2c33;font-weight:500}
.faq-item.open .faq-question{color:var(--black,#050505)}
.faq-answer p{font-size:var(--fs-body);font-weight:400;line-height:var(--lh-body);color:var(--muted-light);max-width:66ch}

.final-cta p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted-dark)}

.article-card h3{font-size:20px;font-weight:500;line-height:1.25;letter-spacing:-.015em;max-width:330px}
.article-card p{font-size:var(--fs-small);font-weight:400;line-height:1.5;color:var(--muted-light);max-width:330px}

.footer-brand p{color:var(--muted-dark)}
.footer-col h2{font-size:11px;color:#9a9aa2}
.footer-col a,.footer-col span{font-size:var(--fs-small);font-weight:400}
.footer-bottom{font-size:var(--fs-meta);font-weight:400;color:var(--faint-dark)}

/* ==========================================================
   Formulário: legibilidade e comportamento em iOS
   O rótulo vira etiqueta; o campo recebe 16px para o Safari
   não dar zoom ao receber foco.
   ========================================================== */
.form-head h3{color:#fff}
.form-head span{font-size:var(--fs-meta);color:var(--faint-dark)}

.field label{
  margin-bottom:12px;
  color:var(--muted-dark);
  font-size:var(--fs-meta);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.field input,.field select,.field textarea{
  padding-bottom:14px;
  border-bottom-color:#5c5c63;
  font-size:16px;
  color:#fff;
}
.field input::placeholder,.field textarea::placeholder{color:#86868e;opacity:1}
.field select{color:#fff}
.field select option{color:#050505}
.field select:invalid{color:#86868e}
.field textarea{min-height:76px}
.field input:disabled{color:#6a6a72;border-bottom-style:dashed}

.site-check{font-size:var(--fs-meta)!important;color:var(--muted-dark)!important;text-transform:none;letter-spacing:0}
.form-legal{font-size:var(--fs-meta);color:var(--faint-dark);line-height:1.5;max-width:62ch}
.form-status{font-size:var(--fs-small);line-height:1.5;color:#fff}
.form-status[data-state="error"]{color:#ff9a8f}
.form-status[data-state="ok"]{color:#8fe0a8}

.field-error{display:block;margin-top:8px;font-size:var(--fs-meta);color:#ff9a8f}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-bottom-color:#ff9a8f}

/* Campo-armadilha para robôs de spam */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ==========================================================
   Hero no mobile: a manchete vem primeiro
   Antes o visual decorativo empurrava o H1 de 220 a 360px
   para baixo. Agora o texto abre a página.
   ========================================================== */
@media(max-width:860px){
  /* Duas colunas: a manchete abre a página e o visual fica ao lado,
     como no desktop. min-width:0 nas duas para o texto poder encolher. */
  .hero-inner{
    display:grid;
    align-items:start;
    grid-template-columns:minmax(0,1fr) minmax(0,38%);
    column-gap:12px;
    padding-top:104px;
  }

  /* display:contents dissolve o wrapper para que manchete, texto de
     apoio e botões virem itens da grade e possam ser posicionados um
     a um. Só a manchete divide a linha com o visual; o resto volta a
     ocupar a largura inteira.
     Isso também neutraliza o width:630px fixo que o wrapper carrega
     para o desktop, que dentro de 375px era engolido pelo
     overflow:clip do .hero e sumia com a manchete. */
  .hero-copy-wrap{display:contents}
  .hero-copy-wrap > *{width:auto;max-width:100%;min-width:0}

  /* A manchete passa a dividir a linha com o visual, então a escala
     precisa acompanhar a coluna, não a viewport inteira. Sem isso os
     40px do desktop transbordam a coluna e correm por baixo da arte. */
  .hero h1{
    grid-column:1;grid-row:1;
    align-self:center;
    margin-top:28px;
    font-size:clamp(25px,8.2vw,42px);
    line-height:1.02;
    letter-spacing:-.03em;
    hyphens:auto;
  }
  .hero-lead{grid-column:1 / -1;grid-row:2;margin-top:22px}
  .hero-actions{grid-column:1 / -1;grid-row:3;margin-top:26px}
  .hero .client-strip{grid-column:1 / -1;grid-row:4;margin-top:32px}

  /* baze-hero-visual.png é cortado na borda direita: a arte encosta no
     limite do arquivo em 617 das 660 linhas. No desktop o elemento fica
     em right:-24px, então o corte cai fora da tela e lê como sangria.
     Aqui ele também precisa sangrar, senão a borda cortada aparece.
     A especificidade de .hero .hero-visual é necessária para vencer as
     larguras fixas que o CSS original declara em 1080, 860 e 600px. */
  .hero .hero-visual{
    position:static;
    grid-column:2;
    grid-row:1;
    align-self:center;
    width:auto;
    height:auto;
    margin-right:-20px;
    justify-content:flex-end;
  }
  /* width:100% prende a arte à própria coluna: ela nunca avança sobre
     o texto, e a sangria fica por conta do margin-right negativo. */
  .hero .hero-visual img{width:100%;height:auto;max-width:none;max-height:none}

  .hero-actions{display:flex;flex-direction:column;gap:10px}
  .hero-actions .btn{width:100%;justify-content:space-between}
}
@media(max-width:600px){
  .hero-inner{padding-top:88px;column-gap:10px}
}

/* ==========================================================
   CTA fixo no mobile
   Acima de 860px o botão principal vive no header. Abaixo
   disso ele sumia junto com a navegação.
   ========================================================== */
.mobile-cta{display:none}
@media(max-width:860px){
  .mobile-cta{
    position:fixed;
    z-index:80;
    right:0;bottom:0;left:0;
    display:flex;
    gap:1px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:blur(16px) saturate(140%);
            backdrop-filter:blur(16px) saturate(140%);
    box-shadow:0 -1px 0 var(--line,#d9d9de);
  }
  .mobile-cta .btn{flex:1;min-height:50px;justify-content:space-between}
  body.menu-open .mobile-cta{display:none}
  .site-footer{padding-bottom:76px}
}

/* ==========================================================
   Trilha de navegação
   ========================================================== */
.breadcrumb{padding-block:18px}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  align-items:center;
  margin:0;padding:0;
  list-style:none;
  font-size:var(--fs-meta);
  color:var(--muted-light);
}
.breadcrumb li{display:flex;gap:12px;align-items:center}
.breadcrumb li+li::before{
  content:"";
  width:1em;height:1em;
  background-color:currentColor;
  opacity:.45;
  -webkit-mask:var(--caret) center/contain no-repeat;
          mask:var(--caret) center/contain no-repeat;
}
.breadcrumb{--caret:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='m9.5 5.5 7 6.5-7 6.5'/%3E%3C/svg%3E")}
.breadcrumb a{border-bottom:1px solid transparent;padding-bottom:2px}
.breadcrumb a:hover{border-bottom-color:currentColor}
.breadcrumb [aria-current="page"]{color:var(--ink,#090909)}

/* ==========================================================
   Blocos de resposta (AEO)
   Uma pergunta e uma resposta autossuficiente, no topo da
   página, extraível sem depender do resto do texto.
   ========================================================== */
.answer-block{
  padding:34px clamp(22px,4vw,44px) 36px;
  border:1px solid var(--line,#d9d9de);
  border-left:3px solid var(--black,#050505);
  background:var(--paper,#f8f8fb);
}
.answer-block .answer-label{
  display:block;
  margin:0 0 18px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-light);
}
.answer-block > p{
  margin:0 0 16px;
  font-size:clamp(19px,2.1vw,25px);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.32;
  color:var(--ink,#090909);
  max-width:60ch;
}
.answer-block > p ~ p{
  margin:0 0 14px;
  font-size:var(--fs-body);
  letter-spacing:0;
  line-height:var(--lh-body);
  color:var(--muted-light);
  max-width:66ch;
}
.answer-block > p:last-child{margin-bottom:0}

/* Definições: par termo/valor extraível */
.definitions{margin:0;display:grid;border-top:1px solid var(--line,#d9d9de)}
.definitions > div{
  display:grid;
  grid-template-columns:minmax(160px,240px) 1fr;
  gap:24px 40px;
  padding:26px 0;
  border-bottom:1px solid var(--line,#d9d9de);
}
.definitions dt{
  margin:0;
  font-size:19px;
  font-weight:500;
  letter-spacing:-.015em;
  color:var(--ink,#090909);
}
.definitions dd{
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--muted-light);
  max-width:70ch;
}
@media(max-width:700px){
  .definitions > div{grid-template-columns:1fr;gap:10px;padding:22px 0}
}

/* Ficha de entidade: os dados que sustentam a identificação */
.entity-card{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;
  border-top:1px solid var(--line,#d9d9de);
  border-left:1px solid var(--line,#d9d9de);
}
.entity-card > div{
  padding:24px 26px;
  border-right:1px solid var(--line,#d9d9de);
  border-bottom:1px solid var(--line,#d9d9de);
}
.entity-card dt{
  margin:0 0 10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-light);
}
.entity-card dd{margin:0;font-size:var(--fs-small);line-height:1.45;color:var(--ink,#090909)}
.entity-card a{border-bottom:1px solid rgba(0,0,0,.25)}
.entity-card a:hover{border-bottom-color:currentColor}
@media(max-width:900px){.entity-card{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.entity-card{grid-template-columns:1fr}}

/* Links relacionados: irriga a arquitetura interna */
.related{padding-block:clamp(56px,7vw,88px);border-top:1px solid var(--line,#d9d9de);background:#fff}
.related h2{
  margin:0 0 36px;
  font-size:clamp(26px,2.8vw,36px);
  font-weight:400;
  letter-spacing:-.035em;
  line-height:1.05;
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;
  background:var(--line,#d9d9de);
  border:1px solid var(--line,#d9d9de);
}
.related-grid a{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:160px;
  padding:26px;
  background:#fff;
  transition:background .25s var(--ease,ease);
}
.related-grid a:hover{background:var(--paper,#f8f8fb)}
.related-grid strong{font-size:18px;font-weight:500;letter-spacing:-.015em;line-height:1.2}
.related-grid span{font-size:var(--fs-small);line-height:1.45;color:var(--muted-light)}

/* ==========================================================
   Página de serviços e página institucional
   ========================================================== */
.stack{display:grid;gap:clamp(28px,4vw,48px)}

.service-detail{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(32px,5vw,72px);
  padding-block:clamp(44px,5vw,64px);
  border-top:1px solid var(--line,#d9d9de);
  scroll-margin-top:110px;
}
.service-detail h2{
  margin:0;
  font-size:clamp(30px,3.4vw,44px);
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1.02;
}
.service-index{
  display:block;
  margin-bottom:14px;
  font-size:var(--fs-meta);
  font-weight:500;
  letter-spacing:.1em;
  color:var(--muted-light);
}
.service-detail p{margin:0 0 18px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted-light);max-width:66ch}
.service-detail p:last-child{margin-bottom:0}
.service-detail ul{margin:0 0 20px;padding-left:0;list-style:none;display:grid;gap:10px}
.service-detail li{
  position:relative;
  padding-left:22px;
  font-size:var(--fs-small);
  line-height:1.5;
  color:var(--ink,#090909);
}
.service-detail li::before{content:"";position:absolute;top:.62em;left:0;width:9px;height:1px;background:currentColor}
@media(max-width:860px){
  .service-detail{grid-template-columns:1fr;gap:24px}
}

.jump-nav{display:flex;flex-wrap:wrap;gap:10px;padding-block:8px 4px}
.jump-nav a{
  padding:9px 14px;
  border:1px solid var(--line,#d9d9de);
  font-size:var(--fs-meta);
  transition:color .2s,background .2s,border-color .2s;
}
.jump-nav a:hover{color:#fff;border-color:var(--black,#050505);background:var(--black,#050505)}

/* ==========================================================
   Impressão
   ========================================================== */
@media print{
  .site-header,.mobile-menu,.mobile-cta,.skip-link,.cookie-consent{display:none!important}
  .reveal{opacity:1!important;transform:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}

/* ==========================================================
   Páginas internas: mesma escala de leitura
   internal-pages.css desce até 9px em rodapé e legendas.
   ========================================================== */
.eyebrow{font-size:12px}
.desktop-nav a,.text-link{font-size:var(--fs-ui)}
.mobile-menu-foot{font-size:12px;color:#8e8e97}

.page-hero p{color:var(--muted-light)}
.page-hero-meta{font-size:var(--fs-meta);color:var(--muted-light)}
.page-hero.dark p{color:var(--muted-dark)}

.section-head p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted-light);max-width:60ch}

.featured-copy p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted-dark)}
.article-card time{font-size:var(--fs-meta);color:var(--muted-light)}

.content-nav h2{font-size:11px}
.content-nav a{font-size:var(--fs-meta);line-height:1.45}
.legal-note{font-size:var(--fs-small);line-height:1.6;color:var(--ink,#090909)}
.faq-categories a{font-size:var(--fs-small)}

.prose p,.prose li{font-size:17px;line-height:1.7;color:#2f2f34}
.prose h3{font-size:22px;font-weight:500;letter-spacing:-.02em}
.prose section:last-child{border-bottom:0}

.sitemap-links a{padding-block:4px}
.sitemap-links strong{display:block;margin-bottom:4px;font-size:var(--fs-body);font-weight:500}
.sitemap-links span{font-size:var(--fs-small);line-height:1.45;color:var(--muted-light)}

.process-card strong{color:#050505;font-size:32px}
.process-card p{font-size:var(--fs-small);line-height:1.55;color:var(--muted-light)}
.payment-card p{font-size:var(--fs-small);line-height:1.6;color:var(--muted-dark)}

/* A legenda de placeholder some quando a imagem real entrar */
.featured-media::after,.media-placeholder::after{font-size:11px}

@media(max-width:860px){
  .prose p,.prose li{font-size:16px}
}

/* ==========================================================
   Ajustes finais de composição
   ========================================================== */

/* O menu mobile ganhou dois itens; a escala precisava caber */
.mobile-nav{overflow-y:auto;gap:6px}
.mobile-nav a{padding:12px 0;font-size:clamp(24px,7vw,40px)}

/* A trilha vive dentro do hero, acima do H1 */
.page-hero .breadcrumb{padding:0 0 22px}

/* Os blocos de resposta são cartões brancos sobre fundo papel */
.answer-block{background:#fff}
.entity-card > div{background:#fff}
.definitions{background:transparent}

/* Item de navegação da página atual */
.desktop-nav a[aria-current="page"],
.desktop-nav a.active{border-bottom-color:currentColor}

/* Sem sublinhado duplo nos links de dentro do texto corrido */
.answer-block a,.service-detail a{text-decoration:underline;text-underline-offset:4px}

/* ==========================================================
   Marca
   ==========================================================
   Os PNGs de logotipo agora vêm das fontes oficiais, com alpha e em 2x.
   Como as proporções mudaram, as regras que fixavam só a largura
   precisam declarar height:auto: sem isso o atributo height do HTML
   achata a arte. */
.brand img,
.mobile-menu-logo,
.footer-brand img{height:auto}

/* ==========================================================
   Menu mobile: gaveta lateral
   ==========================================================
   Antes o menu cobria a tela inteira e trazia um segundo botão
   para fechar. Agora ele desliza pela direita e o próprio
   hamburguer vira X, então há um único controle. */

/* O botão perde o quadrado: sobram as três barras */
.menu-button{
  width:44px;height:44px;
  border:0!important;
  background:transparent!important;
  padding:0;
  position:relative;
  z-index:120;
}
.site-header.is-dark .menu-button{color:inherit}

/* Três barras: o próprio span é a do meio, ::before e ::after
   são a de cima e a de baixo. */
.menu-icon,
.menu-icon::before,
.menu-icon::after{
  position:absolute;
  left:50%;
  width:22px;
  height:1.5px;
  background:currentColor;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .2s linear;
}
.menu-icon{top:50%;transform:translate(-50%,-50%)}
.menu-icon::before,
.menu-icon::after{content:"";top:0;transform-origin:50% 50%}
.menu-icon::before{transform:translate(-50%,-7px)}
.menu-icon::after{transform:translate(-50%,7px)}

/* Aberto: a barra do meio some e as outras duas cruzam */
.menu-button.is-open{color:#fff}
.menu-button.is-open .menu-icon{background:transparent}
.menu-button.is-open .menu-icon::before{transform:translate(-50%,0) rotate(45deg)}
.menu-button.is-open .menu-icon::after{transform:translate(-50%,0) rotate(-45deg)}

/* Vidro que escurece a página atrás da gaveta */
.menu-scrim{
  position:fixed;
  z-index:95;
  inset:0;
  background:rgba(5,5,5,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .34s ease,visibility .34s;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.menu-scrim.visible{opacity:1;visibility:visible}

/* A gaveta em si */
.mobile-menu{
  position:fixed;
  z-index:100;
  inset:0 0 0 auto;
  width:min(80vw,340px);
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:26px 26px 30px;
  color:#fff;
  background:var(--black,#050505);
  border-left:1px solid #1e1e22;
  visibility:hidden;
  opacity:1;
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(.2,.8,.2,1),visibility .38s;
}
.mobile-menu.open{visibility:visible;transform:translateX(0)}

/* O logotipo divide a linha com o botão, que vive no header */
.mobile-menu-top{padding-right:52px}
.mobile-menu-logo{width:150px;height:auto}

.mobile-nav{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:0;
  overflow-y:auto;
}
.mobile-nav a{
  padding:15px 0;
  border-bottom:1px solid #1e1e22;
  font-size:20px;
  line-height:1.2;
  letter-spacing:-.01em;
}
.mobile-nav a:last-child{border-bottom:0}
.mobile-menu-foot{
  display:flex;
  justify-content:space-between;
  color:#8e8e97;
  font-size:12px;
}

@media(prefers-reduced-motion:reduce){
  .mobile-menu,.menu-scrim,.menu-icon,
  .menu-icon::before,.menu-icon::after{transition-duration:.01ms}
}

/* O botão vive dentro do .site-header, que cria contexto de empilhamento
   em z-index:90. Sem subir o header, o X ficaria atrás da gaveta.
   O fundo do header sai de cena para a gaveta aparecer inteira, e a
   marca do topo dá lugar à que já existe dentro da gaveta. */
body.menu-open .site-header{
  z-index:110;
  background:transparent!important;
  box-shadow:none!important;
  border-color:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
body.menu-open .site-header::before{opacity:0}
body.menu-open .brand{opacity:0;pointer-events:none}

/* ==========================================================
   Marcação declarativa
   ==========================================================
   <abbr> e <address> ganharam uso semântico no conteúdo. O
   navegador aplica sublinhado pontilhado e itálico por padrão;
   aqui eles voltam a acompanhar o texto ao redor. */
abbr[title]{
  text-decoration:underline dotted currentColor;
  text-underline-offset:3px;
  cursor:help;
}
.site-footer abbr[title],
.page-hero abbr[title]{text-decoration:none;cursor:auto}

/* O <address> agrupa o contato por semantica. display:contents era
   fragil: quando o motor o ignora, o elemento vira bloco, os cinco
   links caem na mesma linha e forcam a coluna a 388px, estourando o
   rodape inteiro no mobile. Aqui ele repete o empilhamento da propria
   coluna, sem depender de contents. */
address{font-style:normal}
.footer-col address{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:17px;
}

/* Nenhuma coluna pode crescer alem da faixa disponivel: itens de grade
   nao encolhem abaixo do conteudo sem min-width:0. */
.footer-main,
.footer-links{min-width:0}
.footer-main > *,
.footer-links > *,
.footer-col{min-width:0}

/* O e-mail e um token unico e longo: so ele pode quebrar no meio. */
.footer-col a[href^="mailto:"]{overflow-wrap:anywhere}

/* ==========================================================
   Botão flutuante do WhatsApp
   ==========================================================
   O verde é o da marca do WhatsApp, que é o que dá o
   reconhecimento imediato. O quadrado sem raio é o que
   mantém o botão dentro do sistema visual do site. */
.wa-float{
  position:fixed;
  box-sizing:border-box;
  flex:none;
  overflow:hidden;
  z-index:85;
  right:24px;
  bottom:24px;
  display:flex;
  width:54px;
  height:54px;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:#25d366;
  box-shadow:0 8px 24px rgba(5,5,5,.22);
  transition:transform .25s var(--ease,ease),background .25s var(--ease,ease);
}
.wa-float svg{display:block;flex:none;width:28px;height:28px;fill:currentColor}
.wa-float:hover{transform:translateY(-3px);background:#1fb855}
.wa-float:focus-visible{outline:2px solid #050505;outline-offset:3px}

/* No mobile ele sobe para não brigar com a barra fixa de CTA */
@media(max-width:860px){
  .wa-float{right:16px;bottom:78px;width:48px;height:48px}
  .wa-float svg{width:25px;height:25px}
}
body.menu-open .wa-float{display:none}

@media(prefers-reduced-motion:reduce){
  .wa-float{transition:none}
  .wa-float:hover{transform:none}
}

/* ==========================================================
   Estados do botão de envio
   ========================================================== */
.form-submit[data-estado="enviando"],
.form-submit[data-estado="enviado"]{cursor:default}
.form-submit:disabled{opacity:1}
.form-submit[data-estado="enviado"]{background:#8fe0a8;color:#05340f}

.btn-spinner{
  display:inline-block;
  width:14px;
  height:14px;
  margin-right:10px;
  border:1.5px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  vertical-align:-2px;
  animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .btn-spinner{animation-duration:2s}
}

/* ==========================================================
   Tópicos dos serviços
   ==========================================================
   A linha de 9px que marcava cada item virou um sinal de
   confirmação: a lista descreve o que está incluído. */
.service-detail li::before{
  content:"";
  position:absolute;
  top:.34em;
  left:0;
  width:13px;
  height:13px;
  background:currentColor;
  opacity:.55;
  -webkit-mask:var(--ph-glyph) center/contain no-repeat;
          mask:var(--ph-glyph) center/contain no-repeat;
  --ph-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='square'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E");
}
.service-detail li{padding-left:24px}

/* ==========================================================
   Chamadas de cada serviço
   ==========================================================
   Três intenções distintas para o mesmo destino: conversar,
   ver prova, e tratar de prazo e investimento. */
.service-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line,#dcdce1);
}
.service-cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding-bottom:6px;
  border-bottom:1px solid currentColor;
  color:var(--black,#050505);
  font-size:var(--fs-ui,14px);
  font-weight:500;
  letter-spacing:-.005em;
  text-decoration:none!important;
  transition:gap .22s var(--ease,ease),opacity .22s var(--ease,ease);
}
.service-cta:hover{gap:14px;opacity:.68}
.service-cta .icon{font-size:15px}
@media(prefers-reduced-motion:reduce){
  .service-cta,.service-cta:hover{transition:none;gap:9px}
}

/* ==========================================================
   Guia da seção em que o leitor está
   ==========================================================
   Vale para a navegação do topo (página atual) e para os
   índices laterais e de salto (seção visível na rolagem). */
.desktop-nav a[aria-current="page"],
.footer-col a[aria-current="page"],
.mobile-nav a[aria-current="page"]{
  font-weight:600;
  font-variation-settings:"wght" 600;
  border-bottom-color:currentColor;
}

.jump-nav a[aria-current="true"],
.content-nav a[aria-current="true"]{
  color:var(--black,#050505);
  font-weight:600;
  font-variation-settings:"wght" 600;
  border-bottom-color:currentColor;
}
.jump-nav a,
.content-nav a{transition:color .2s var(--ease,ease),font-weight .2s}

/* Quarto estado do botão de envio: inativo até os campos obrigatórios
   estarem preenchidos. Continua clicável de propósito, para que o clique
   aponte o que falta em vez de não fazer nada. */
.form-submit[data-estado="desativado"]{
  color:#8e8e97;
  background:#2e2e34;
  cursor:not-allowed;
}
.form-submit[data-estado="desativado"] .icon{opacity:.5}
.form-submit[data-estado="desativado"]:hover{background:#35353c}

/* ==========================================================
   Blocos de chamada no mobile
   ========================================================== */
@media(max-width:860px){
  /* O botão e o link secundário ficavam colados: 18px entre um bloco
     de 52px de altura e um link de 25px lia como um item só. */
  .cta-actions{gap:26px}
  .final-cta .cta-actions .btn{width:100%;justify-content:space-between}
  .final-cta h2{margin-bottom:32px}
  .final-cta p{margin-top:40px}

  /* O "Ler todos" acompanha o título em vez de cair embaixo dele.
     flex-end alinha o link à base da manchete, como no desktop. */
  .journal-head{
    flex-direction:row;
    align-items:flex-end;
    gap:16px;
  }
  .journal-head h2{flex:1;min-width:0}
  .journal-head .text-link{flex:none;padding-bottom:5px;white-space:nowrap}
}

/* ==========================================================
   Para quem fazemos
   ==========================================================
   A manchete passou a nomear os três segmentos, então as
   pastilhas que repetiam as mesmas palavras saíram. O rótulo
   acima segue a mesma etiqueta usada nos campos do formulário. */
.focus-label{
  display:block;
  margin-bottom:20px;
  color:var(--faint-dark,#8e8e97);
  font-size:var(--fs-meta,13px);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.focus-band h2{margin-bottom:0;max-width:9ch}
.focus-copy-text{display:flex;flex-direction:column;gap:18px}
.focus-copy-text p{margin:0}

@media(max-width:860px){
  .focus-label{margin-bottom:14px}
  .focus-band h2{max-width:none}
  .focus-copy{align-items:flex-start;text-align:left;gap:30px}
}

/* ==========================================================
   Elementos grudados na rolagem
   ==========================================================
   O header é fixo, então todo sticky precisa parar abaixo dele.
   O título do FAQ parava em 36px e sumia por baixo dos 82px do
   header. A variável mantém os offsets em sincronia se a altura
   do header mudar. */
:root{--h-header:82px}
@media(max-width:860px){
  :root{--h-header:74px}
}

.faq-title{top:calc(var(--h-header) + 24px)}

/* Rede de proteção: nenhum item de grade pode crescer além da faixa.
   Sem min-width:0 o mínimo é o conteúdo, e uma palavra longa arrasta
   a coluna inteira para fora da tela. */
.focus-grid,
.focus-grid > *,
.market-grid > *,
.diagnostic-grid > *,
.journal-head > *{min-width:0}

/* Segunda rede: uma palavra longa sozinha (infraestrutura, empreendimento)
   ainda pode não caber numa manchete grande em tela estreita. O <html>
   declara lang="pt-BR", então a hifenização segue as regras do idioma. */
@media(max-width:860px){
  .page-hero h1,
  .final-cta h2,
  .section-head h2,
  .journal-head h2,
  .faq-title h2,
  .focus-band h2{hyphens:auto;overflow-wrap:break-word}
}

/* .diagnostic-points ficava em duas colunas fixas em qualquer largura.
   Abaixo de 380px a segunda coluna caía fora da tela. minmax(0,1fr)
   também impede que o conteúdo estique a coluna. */
.diagnostic-points{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:379px){
  .diagnostic-points{grid-template-columns:1fr}
}

/* ==========================================================
   Captcha do formulário
   ==========================================================
   O widget vem com largura própria do hCaptcha. Aqui ele
   respeita a coluna e não estoura no mobile. */
.captcha-campo{margin-bottom:26px}
.captcha-campo .h-captcha{
  max-width:100%;
  overflow:hidden;
}
.captcha-campo iframe{max-width:100%}
.captcha-campo .field-error[hidden]{display:none}

@media(max-width:400px){
  /* Abaixo de 400px o widget de 302px ainda cabe, mas encosta nas
     bordas: a escala tira o aperto sem cortar a área clicável. */
  .captcha-campo .h-captcha{
    transform:scale(.92);
    transform-origin:left top;
    height:70px;
  }
}

/* ==========================================================
   Marca compacta na rolagem
   ==========================================================
   Passados os primeiros 60px, o logotipo recua para 70%. É
   transform e não width: a coluna do header continua com a
   mesma largura, então nada se desloca e o CLS segue em zero.
   Só no desktop, onde há espaço para a diferença ser percebida. */
@media(min-width:861px){
  .site-header .brand{
    transform-origin:left center;
    transition:transform .38s cubic-bezier(.2,.8,.2,1);
    will-change:transform;
  }
  .site-header.is-compact .brand{transform:scale(.7)}
}
@media(prefers-reduced-motion:reduce){
  .site-header .brand{transition:none}
}