/* =========================================================
   DG Consultoria e Soluções em TI — styles.css
   Sistema compartilhado: tokens, base, componentes, nav, hero, CTA e rodapé.
   Alterar aqui vale para todas as páginas. Nunca duplicar estas regras numa página.
   ========================================================= */
:root{
  --navy-950:#1B2230;
  --navy-900:#142A4F;
  --navy-700:#1E3A63;
  --slate-300:#93A6BB;
  --teal-600:#0E7C86;
  --teal-500:#12939E;
  --teal-400:#1CB2BC;
  --mist-100:#F4F8FB;
  --mist-200:#E7EFF5;
  --mist-300:#D5E2EF;
  --white:#FFFFFF;
  --coral-500:#C0483C;
  --font-display:'Source Serif 4', Georgia, serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  /* ---- Escala tipográfica fluida — Utopia, 360px → 1440px ----
     Substitui os 17 tamanhos fixos em px que existiam antes.
     Em rem para respeitar o tamanho de fonte do navegador. ---- */
  --texto-2xs:clamp(0.6875rem, 0.6771rem + 0.0463vw, 0.7188rem); /* 11 → 11.5px */
  --texto-xs:clamp(0.7812rem, 0.7708rem + 0.0463vw, 0.8125rem); /* 12.5 → 13px */
  --texto-s:clamp(0.875rem, 0.8646rem + 0.0463vw, 0.9062rem); /* 14 → 14.5px */
  --texto-ui:clamp(0.9375rem, 0.9167rem + 0.09259vw, 1rem); /* 15 → 16px */
  --texto-corpo:clamp(1rem, 0.9792rem + 0.09259vw, 1.062rem); /* 16 → 17px */
  --texto-l:clamp(1.062rem, 1.042rem + 0.09259vw, 1.125rem); /* 17 → 18px */
  --texto-xl:clamp(1.188rem, 1.125rem + 0.2778vw, 1.375rem); /* 19 → 22px */
  --texto-2xl:clamp(1.375rem, 1.292rem + 0.3704vw, 1.625rem); /* 22 → 26px */
  --texto-3xl:clamp(2.5rem, 2.167rem + 1.481vw, 3.5rem); /* 40 → 56px */

  /* ---- Escala de espaçamento — Utopia, 360px → 1440px ----
     Substitui 34 valores px avulsos. Micro fixo (alinhamento),
     ritmo de seção fluido. ---- */
  --esp-3xs:4px; /* absorve 2, 3, 4, 5 */
  --esp-2xs:8px; /* absorve 6, 8 */
  --esp-xs:12px; /* absorve 10, 11, 12 */
  --esp-s:16px; /* absorve 14, 16 */
  --esp-m:20px; /* absorve 18, 20 */
  --esp-l:24px; /* absorve 22, 24, 26 */
  --esp-xl:32px; /* absorve 28, 30, 32, 34 */
  --esp-2xl:40px; /* absorve 36, 38, 40 */
  --esp-3xl:clamp(40px, 34.67px + 1.481vw, 56px); /* absorve 56 */
  --esp-4xl:clamp(48px, 42.67px + 1.481vw, 64px); /* absorve 62, 64 */
  --esp-5xl:clamp(56px, 49.33px + 1.852vw, 76px); /* absorve 72, 76 */
  --esp-6xl:clamp(64px, 53.33px + 2.963vw, 96px); /* absorve 90, 96 */
  --esp-7xl:clamp(80px, 62.67px + 4.815vw, 132px); /* absorve 112, 132 */
  --esp-8xl:clamp(96px, 70.67px + 7.037vw, 172px); /* absorve 140, 172 */

  /* ---- Raio de borda — 6 valores viraram 4 ---- */
  --raio-xs:3px;   /* botões e etiquetas */
  --raio-s:10px;   /* elementos pequenos */
  --raio-m:16px;   /* cards e painéis — absorve 14 e 18 */
  --raio-pill:999px; /* etiquetas e pílulas */
  --raio-full:50%; /* círculos */

  /* ---- Cores com transparência — 26 literais viraram 21 ---- */
  --branco-05:rgba(255,255,255,.05);
  --branco-08:rgba(255,255,255,.08);
  --branco-14:rgba(255,255,255,.14);
  --branco-28:rgba(255,255,255,.28);
  --branco-50:rgba(255,255,255,.5);
  --branco-88:rgba(255,255,255,.88);
  --branco-97:rgba(250,251,252,.97);
  --navy950-05:rgba(17,26,43,.05);
  --navy950-22:rgba(17,26,43,.22);
  --navy950-66:rgba(17,26,43,.66);
  --navy950-75:rgba(17,26,43,.75);
  --navy950-90:rgba(17,26,43,.9);
  --navy900-22:rgba(20,42,79,.22);
  --navy900-50:rgba(20,42,79,.5);
  --teal600-05:rgba(14,124,134,.05);
  --teal600-16:rgba(14,124,134,.16);
  --teal600-28:rgba(14,124,134,.28);
  --teal600-60:rgba(14,124,134,.6);
  --teal400-22:rgba(28,178,188,.22);
  --teal500-35:rgba(20,151,158,.35);
  --preto-08:rgba(0,0,0,.08);

  /* ---- Tipografia de display — os 7 clamp() avulsos ---- */
  --display-1:clamp(2rem, 0.9167rem + 4.815vw, 5.25rem); /* h1  32 → 84px */
  --display-2:clamp(1.75rem, 1.417rem + 1.481vw, 2.75rem); /* h2  28 → 44px */
  --display-3:clamp(1.188rem, 1.104rem + 0.3704vw, 1.438rem); /* h3  19 → 23px */
  --texto-lede:clamp(1.062rem, 1rem + 0.2778vw, 1.25rem); /* parágrafo de abertura */
  --texto-stat:clamp(1.75rem, 1.542rem + 0.9259vw, 2.375rem); /* número de destaque */

  /* ---- Movimento — Passo 4 do método ----
     --mola: curva de mola do kinetics.colorion.co.
     Uma única interação de botão em todo o site. ---- */
  --mola:cubic-bezier(.34,1.56,.64,1); /* fallback universal, com repique */
  --cascata-passo:220ms; /* intervalo entre itens de uma entrada em cascata */
  --cascata-eco:140ms;   /* atraso extra do ícone/número dentro do item */
  --tempo-1:140ms;
  --tempo-2:280ms;
  --container:1240px;
  --ease:cubic-bezier(.22,.68,0,1);

  /* Texto de apoio — o par por contexto de fundo.
     #576A7F sobre branco 5,57:1 · sobre mist-100 5,21:1
     slate-300 sobre navy-950 6,38:1
     O antigo --slate-500 reprovava nos dois lados: 4,42:1 no claro,
     3,60:1 no escuro. Um tom só não atende os dois. */
  --text-muted:#576A7F;
  --text-muted-dark:var(--slate-300);
  --focus-ring:var(--teal-600);
  --focus-ring-dark:var(--teal-400);
  --focus-width:3px;
  --focus-offset:3px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%; /* iOS não infla o texto em paisagem */
  text-size-adjust:100%;
}
a,button{-webkit-tap-highlight-color:rgba(14,124,134,.18)}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
body{
  font-family:var(--font-body);
  color:var(--navy-900);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--esp-xl)}
.reveal{opacity:1}
.js-reveal .reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js-reveal .reveal.is-visible{opacity:1;transform:translateY(0)}
::selection{background:var(--teal-600);color:var(--white)}
/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--texto-xs);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal-600);
  display:inline-flex;
  align-items:center;
  gap:var(--esp-xs);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--teal-600)}
.eyebrow.on-dark{color:var(--teal-400)}
.eyebrow.on-dark::before{background:var(--teal-400)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--navy-900)}
h1{font-size:var(--display-1)}
h2{font-size:var(--display-2)}
h3{font-size:var(--display-3)}
.on-dark h1,.on-dark h2,.on-dark h3,h2.on-dark,h3.on-dark{color:var(--white)}
p{color:var(--text-muted);font-size:var(--texto-corpo);line-height:1.7}
.lede{font-size:var(--texto-lede);color:var(--text-muted);max-width:56ch}
.section-head{max-width:720px;margin-bottom:var(--esp-3xl)}
.section-head .eyebrow{margin-bottom:var(--esp-m)}
.section-head h2{margin-bottom:var(--esp-s)}
.stat-number{font-family:var(--font-mono);font-weight:600;letter-spacing:-.02em}
section{padding:var(--esp-7xl) 0}
@media (max-width:760px){section{padding:var(--esp-5xl) 0}}
.btn{
  display:inline-flex;align-items:center;gap:var(--esp-xs);
  font-family:var(--font-body);font-weight:600;font-size:var(--texto-ui);
  padding:var(--esp-s) var(--esp-xl);border-radius:var(--raio-xs);
  transition:transform var(--tempo-2) var(--mola), background var(--tempo-1) linear, box-shadow var(--tempo-2) var(--ease), color var(--tempo-1) linear;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-primary{background:var(--teal-600);color:var(--white);box-shadow:0 1px 0 var(--preto-08), 0 12px 24px -12px var(--teal600-60)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary:hover{background:var(--teal-500);box-shadow:0 18px 30px -14px var(--teal600-60)}
.btn-ghost-dark{border:1px solid var(--branco-28);color:var(--white)}
.btn-ghost-dark:hover{background:var(--branco-08);border-color:var(--branco-50)}
.btn-ghost-light{border:1px solid var(--navy-900);color:var(--navy-900)}
.btn-ghost-light:hover{background:var(--navy-900);color:var(--white)}
.btn-block{width:100%;justify-content:center}
/* linear() é Safari 17.2+, Chrome 113+. Onde existe, usa a mola real. */
@supports (transition-timing-function:linear(0,1)){
  :root{
    --mola:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001);
  }
}

/* ---------- Grade de recursos ----------
   Efeito portado do Feature Section with Hover Effects:
   células divididas por linha em vez de gap, barra de acento à esquerda
   que cresce no hover, título que desliza e lavagem de gradiente.
   Cores do sistema DG. A barra e a lavagem usam ::before e ::after
   da célula, então a célula não pode ter transform próprio — quem
   se move é o título, para não brigar com o .reveal. */
.grade-recursos{
  gap:0;
  background:var(--white);
  border:1px solid var(--mist-300);
  border-radius:var(--raio-m);
  overflow:hidden;
}
.cel-recurso{
  position:relative;
  background:transparent;border:none;border-radius:0;box-shadow:none;
  padding:var(--esp-2xl) var(--esp-xl);
  transition:none;transform:none;
}
.cel-recurso > *{position:relative;z-index:1}
/* divisórias: direita em todas menos a última da linha */
.cel-recurso{border-right:1px solid var(--mist-300)}
.cel-recurso:last-child{border-right:none}
/* lavagem no hover — sobe a partir da base, como no original */
.cel-recurso::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(to top, var(--mist-100), transparent);
  opacity:0;transition:opacity var(--tempo-2) var(--ease);
}
.cel-recurso:hover::after,.cel-recurso:focus-within::after{opacity:1}
/* barra de acento colada na borda esquerda da célula */
.cel-recurso__titulo,
.cel-recurso h3,
.cel-recurso .compare-title,
.cel-recurso .stat-number{
  position:relative;display:block;
  transition:transform var(--tempo-2) var(--ease);
}
.cel-recurso h3::before,
.cel-recurso .compare-title::before,
.cel-recurso .stat-number::before{
  content:"";position:absolute;
  left:calc(-1 * var(--esp-xl));top:50%;transform:translateY(-50%);
  width:4px;height:1.5rem;
  border-radius:0 var(--raio-pill) var(--raio-pill) 0;
  background:var(--mist-300);
  transition:height var(--tempo-2) var(--ease), background var(--tempo-1) linear;
}
.cel-recurso:hover h3,
.cel-recurso:hover .compare-title,
.cel-recurso:hover .stat-number{transform:translateX(var(--esp-2xs))}
.cel-recurso:hover h3::before,
.cel-recurso:hover .compare-title::before,
.cel-recurso:hover .stat-number::before{height:2rem;background:var(--teal-600)}

/* ---- variante escura (mesma lógica do dark: do componente) ---- */
.grade-recursos--escura{
  background:linear-gradient(135deg, var(--navy-900), var(--navy-700));
  border-color:var(--branco-08);
}
.grade-recursos--escura .cel-recurso{border-right-color:var(--branco-08)}
.grade-recursos--escura .cel-recurso::after{
  background:linear-gradient(to top, var(--branco-05), transparent);
}
.grade-recursos--escura .cel-recurso h3::before,
.grade-recursos--escura .cel-recurso .stat-number::before{background:var(--branco-14)}
.grade-recursos--escura .cel-recurso:hover h3::before,
.grade-recursos--escura .cel-recurso:hover .stat-number::before{background:var(--teal-400)}
/* grade 2x2: divisória de baixo na primeira linha, sem direita na 2ª coluna */
.grade-recursos--escura .cel-recurso{border-bottom:1px solid var(--branco-08)}
.grade-recursos--escura .cel-recurso:nth-child(2n){border-right:none}
.grade-recursos--escura .cel-recurso:nth-child(n+3){border-bottom:none}
/* segunda linha: lavagem desce, para encontrar a de cima na divisória */
.grade-recursos--escura .cel-recurso:nth-child(n+3)::after{
  background:linear-gradient(to bottom, var(--branco-05), transparent);
}

/* ---- uma coluna: divisória vira horizontal ----
   Cada grade colapsa no seu próprio breakpoint. Um único valor para
   todas deixaria a compare-grid (820px) e a why-stats (520px) sem
   divisória vertical enquanto ainda estão em duas colunas. */
@media (max-width:900px){
  .card-grid-3 .cel-recurso,.pillars .cel-recurso,.exec-grid .cel-recurso{
    border-right:none;border-bottom:1px solid var(--mist-300);
  }
  .card-grid-3 .cel-recurso:last-child,.pillars .cel-recurso:last-child,
  .exec-grid .cel-recurso:last-child{border-bottom:none}
}
@media (max-width:820px){
  .compare-grid .cel-recurso{border-right:none;border-bottom:1px solid var(--mist-300)}
  .compare-grid .cel-recurso:last-child{border-bottom:none}
}
@media (max-width:520px){
  .why-stats .cel-recurso{border-right:none;border-bottom:1px solid var(--branco-08)}
  .why-stats .cel-recurso:last-child{border-bottom:none}
}

/* ---------- Utilitários de layout (antes eram estilos inline) ---------- */
.titulo-bloco{margin:var(--esp-s) 0 var(--esp-m)}
.eyebrow-bloco{margin-bottom:var(--esp-m);display:inline-block}
.secao-colada{padding-top:var(--esp-4xl)}
.nota-abaixo{margin-top:var(--esp-xs)}
.fundo-claro{background:var(--mist-100)}

/* Safari < 15.4 não conhece :focus-visible — sem isto, foco invisível. */
@supports not selector(:focus-visible){
  a:focus,button:focus,summary:focus,input:focus,select:focus,textarea:focus,[tabindex]:focus{
    outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset);
  }
  .hero a:focus,.nav a:focus,.nav button:focus,.band-dark a:focus,
  .cta-final a:focus,footer a:focus{outline-color:var(--focus-ring-dark)}
}

/* ---------- Skip link — primeiro item do Tab ---------- */
.pular-para-conteudo{
  position:absolute;left:var(--esp-s);top:calc(var(--esp-s) * -4);
  z-index:var(--z-skip,1000);
  background:var(--teal-600);color:var(--white);
  padding:var(--esp-2xs) var(--esp-s);border-radius:var(--raio-xs);
  font-size:var(--texto-s);font-weight:600;text-decoration:none;
  transition:top var(--tempo-1) var(--ease);
}
.pular-para-conteudo:focus{top:var(--esp-s)}
main:focus{outline:none}

/* ---------- Foco visível — WCAG 2.4.7 / 1.4.11 ----------
   O anel muda de cor conforme o fundo. Contraste do indicador:
     teal-600 sobre branco 4,95:1 · sobre mist-100 4,63:1
     teal-400 sobre navy-900 5,53:1 · sobre navy-950 6,18:1
   Trocar um pelo outro reprova (teal-600 sobre navy = 2,88:1). ---------- */

/* Remove o outline do navegador só para quem clica com o mouse.
   Quem chega pelo teclado continua vendo o anel. */
:focus:not(:focus-visible){outline:none}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:var(--focus-width) solid var(--focus-ring);
  outline-offset:var(--focus-offset);
}
/* Contextos de fundo escuro */
.hero :focus-visible,
.nav :focus-visible,
.band-dark :focus-visible,
.cta-final :focus-visible,
footer :focus-visible,
.compare-card.good :focus-visible,
.stat-cell :focus-visible,
.opportunity-card :focus-visible{
  outline-color:var(--focus-ring-dark);
}
/* A partir de 901px a nav rolada fica clara; abaixo disso o painel
   mobile continua escuro, então o anel escuro permanece.
   901px é o mesmo breakpoint que o site já usa para a nav. */
@media (min-width:901px){
  .nav.scrolled :focus-visible{outline-color:var(--focus-ring)}
}
/* O teclado ganha a mesma marcação de sublinhado que o mouse */
.nav-links a:focus-visible::after{width:100%}
/* A nav é fixa: sem isso o alvo da âncora recebe foco atrás dela
   e o anel fica invisível. */
[id]{scroll-margin-top:96px}
/* ---------- Estados que faltavam: desabilitado e carregando ---------- */
.btn[disabled],.btn[aria-disabled="true"],
button[disabled]{
  opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none;
}
.btn[data-carregando="true"]{cursor:progress;pointer-events:none}
.btn[data-carregando="true"]::after{
  content:"";width:14px;height:14px;border-radius:var(--raio-full);
  border:2px solid currentColor;border-top-color:transparent;
  animation:girar 700ms linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}


/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:var(--esp-m) 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:var(--branco-97);padding:var(--esp-xs) 0;border-color:var(--mist-300)}
.nav .container{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-l)}
.nav-logo{display:flex;align-items:center;gap:var(--esp-xs);font-family:var(--font-display);font-weight:600;font-size:var(--texto-l);color:var(--white);transition:color .35s ease}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;align-items:center;gap:var(--esp-xl)}
.nav-links a{font-size:var(--texto-s);font-weight:500;color:var(--branco-88);position:relative;padding:var(--esp-3xs) 0;transition:color .35s ease}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--teal-400);transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--teal-400)}
.nav-links a.active::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:var(--esp-m)}
.nav .btn-primary{padding:var(--esp-xs) var(--esp-m);font-size:var(--texto-s)}
.nav-toggle{display:none;flex-direction:column;gap:var(--esp-3xs);padding:var(--esp-2xs);z-index:120}
.nav-toggle span{width:22px;height:2px;background:var(--white);transition:transform .3s ease, opacity .3s ease, background .35s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav.scrolled .nav-logo{color:var(--navy-900)}
.nav.scrolled .nav-toggle span{background:var(--navy-900)}
@media (min-width:901px){
  .nav.scrolled .nav-links a{color:var(--navy-700)}
  .nav.scrolled .nav-links a::after{background:var(--teal-600)}
  .nav.scrolled .nav-links a.active{color:var(--teal-600)}
}
@media (max-width:900px){
  .nav-links{
    position:fixed;inset:0;background:var(--navy-950);
    flex-direction:column;justify-content:center;align-items:center;gap:var(--esp-xl);
    transform:translateX(100%);transition:transform .45s var(--ease);
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{color:var(--white);font-family:var(--font-display);font-size:var(--texto-2xl)}
  .nav-links a.active{color:var(--teal-400)}
  .nav-cta .btn-primary{display:none}
  .nav-links .nav-mobile-cta{display:inline-flex}
  .nav-toggle{display:flex}
}
.nav-links .nav-mobile-cta{display:none}
/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-700) 100%);
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-bg svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 88% 12%, var(--teal400-22), transparent 62%),
    radial-gradient(ellipse 50% 55% at 8% 92%, var(--teal600-16), transparent 65%),
    linear-gradient(100deg, var(--navy950-90) 0%, var(--navy950-66) 40%, var(--navy950-22) 66%, var(--navy950-05) 85%);
}
.hero .container{position:relative;z-index:2}
.hero-copy{max-width:660px}
.hero-copy h1{color:var(--white)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--esp-s)}
/* Breadcrumb — componente de páginas internas */
.breadcrumb{display:flex;align-items:center;gap:var(--esp-2xs);font-family:var(--font-mono);font-size:var(--texto-xs);color:var(--slate-300);margin-bottom:var(--esp-xl)}
.breadcrumb a{color:var(--teal-400)}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb svg{width:11px;height:11px}
/* ---------- Fundo do hero: traços em fluxo ----------
   Efeito portado do componente Background Paths. A malha de pontos
   fica na camada de baixo; os 72 traços correm por cima.
   pathLength="1" normaliza o traço, então dasharray e dashoffset
   funcionam em fração do caminho, independente do comprimento real. */
.hero-paths{color:var(--teal-400)}
.hero-paths path{
  fill:none;stroke:currentColor;
  stroke-dasharray:.35 .65;stroke-dashoffset:1;
  animation:fluirTraco var(--dur,24s) linear infinite,
            respirarTraco calc(var(--dur,24s) / 2) ease-in-out infinite;
  animation-delay:var(--atraso,0s),var(--atraso,0s);
}
@keyframes fluirTraco{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes respirarTraco{0%,100%{opacity:.55}50%{opacity:1}}
/* metade dos traços em tela pequena — 72 caminhos animados pesam no celular */
@media (max-width:760px){
  .hero-paths .paths-b{display:none}
}
@media (prefers-reduced-motion: reduce){
  .hero-paths path{animation:none;stroke-dashoffset:0;opacity:.7}
}
/* ---------- Final CTA ---------- */
.cta-final{background:var(--navy-900);position:relative;overflow:hidden}
.cta-final::before{content:"";position:absolute;width:600px;height:600px;border-radius:var(--raio-full);background:radial-gradient(circle,var(--teal600-28),transparent 70%);top:-200px;right:-140px}
.cta-final .container{position:relative}
.cta-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--esp-3xl);align-items:center}
.cta-final h2{margin-bottom:var(--esp-m)}
.cta-final p.lede{color:var(--slate-300);margin-bottom:var(--esp-xl)}
.cta-panel{background:var(--branco-05);border:1px solid var(--branco-14);border-radius:var(--raio-m);padding:var(--esp-2xl) var(--esp-xl);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cta-panel .btn-primary{width:100%;justify-content:center;margin-bottom:var(--esp-l);padding:var(--esp-m)}
.contact-rows{display:flex;flex-direction:column;gap:var(--esp-m)}
.contact-row{display:flex;gap:var(--esp-s);align-items:flex-start;padding-bottom:var(--esp-m);border-bottom:1px solid var(--branco-08)}
.contact-row:last-child{border-bottom:none;padding-bottom:0}
.contact-row svg{width:18px;height:18px;color:var(--teal-400);flex-shrink:0;margin-top:var(--esp-3xs)}
.contact-row .label{font-family:var(--font-mono);font-size:var(--texto-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-300);display:block;margin-bottom:var(--esp-3xs)}
.contact-row a,.contact-row span.value{font-size:var(--texto-s);color:var(--white)}
.contact-row a:hover{color:var(--teal-400)}
@media (max-width:900px){.cta-grid{grid-template-columns:1fr}}
/* ---------- Footer ---------- */
footer{background:var(--navy-950);padding:var(--esp-3xl) 0 var(--esp-xl)}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--esp-2xl);padding-bottom:var(--esp-2xl);border-bottom:1px solid var(--branco-08);flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:var(--esp-xs)}
.footer-brand img{height:36px}
.footer-brand div{font-family:var(--font-display);color:var(--white);font-size:var(--texto-corpo);font-weight:600}
.footer-brand small{display:block;color:var(--slate-300);font-size:var(--texto-xs);font-weight:400;margin-top:var(--esp-3xs)}
.footer-links{display:flex;gap:var(--esp-2xl);flex-wrap:wrap}
.footer-col h4{font-family:var(--font-mono);font-size:var(--texto-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--slate-300);margin-bottom:var(--esp-s)}
.footer-col a{display:block;font-size:var(--texto-s);color:var(--mist-300);padding:var(--esp-3xs) 0}
.footer-col a:hover{color:var(--teal-400)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--esp-l);flex-wrap:wrap;gap:var(--esp-xs)}
.footer-bottom p{font-size:var(--texto-xs);color:var(--text-muted-dark)}
/* ---------- Ajustes de mobile ----------
   1. Botão longo pode quebrar linha em telas estreitas.
      "Agendar diagnóstico no WhatsApp" não cabe em 360px com nowrap.
   2. Alvo de toque mínimo de 44px onde o dedo precisa acertar.
   ---------- */
@media (max-width:520px){
  .btn{white-space:normal;text-align:center;padding-left:var(--esp-l);padding-right:var(--esp-l)}
}
@media (pointer:coarse){
  .btn,.nav-toggle,.wa-float{min-height:44px}
  .nav-links a,.footer-col a,.contact-row a{min-height:44px;display:flex;align-items:center}
  .footer-col a{padding-top:var(--esp-3xs);padding-bottom:var(--esp-3xs)}
}

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:90;
  width:58px;height:58px;border-radius:var(--raio-full);background:var(--teal-600);
  display:flex;align-items:center;justify-content:center;color:var(--white);
  box-shadow:0 14px 30px -10px var(--teal600-60);
  transition:transform .3s var(--ease), background .25s ease;
}
.wa-float:hover{transform:scale(1.08);background:var(--teal-500)}
.wa-float:active{transform:scale(.96)}
.wa-float svg{width:27px;height:27px}
@media (max-width:600px){.wa-float{width:52px;height:52px;bottom:18px;right:18px}}
@media (max-width:640px){
  .container{padding:0 var(--esp-m)}
  section{padding:var(--esp-4xl) 0}
}