/* === 00-header-footer.css === */
/* ============================================================
   00-header-footer.css
   Carrega primeiro (ordem alfabética do build) — tokens globais
   + layout dos componentes compartilhados por todas as páginas.
============================================================ */

:root{
  /* --- Paleta oficial (handoff Fase 1) --- */
  --cor-primaria:#256AD2;
  --cor-secundaria:#144486;
  --cor-escura:#010917;
  --cor-footer:#092950;
  --cor-cta:#F06506;
  --cor-cta-hover:#D65B04;
  --cor-destaque:#F0D006;

  --branco:#FFFFFF;
  --texto-principal:#12213A;
  --texto-secundario:#4B5A72;
  --texto-claro:#E4EAF3;
  --texto-claro-esmaecido:rgba(228,234,243,.75);
  --linha:#DCE3EE;
  --bg-tint:#F3F6FB;

  /* --- Tipografia --- */
  --font-corpo:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-titulo:'Fraunces', Georgia, 'Times New Roman', serif;
  --peso-titulo-settings:'SOFT' 0, 'WONK' 0;

  /* --- Espaçamento --- */
  --gap-sm:1.25rem;
  --gap-md:2.5rem;
  --gap-lg:6rem;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;

  --maxw:1180px;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:var(--font-corpo);
  font-optical-sizing:auto;
  color:var(--texto-principal);
}

h1,h2,h3{
  font-family:var(--font-titulo);
  font-optical-sizing:auto;
  font-variation-settings:var(--peso-titulo-settings);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .6em;
}
h1{ font-size:clamp(2rem,4.8vw,3.1rem); }
h2{ font-size:clamp(1.55rem,3.2vw,2.2rem); }
h3{ font-size:clamp(1.15rem,2vw,1.4rem); font-weight:600; }

p{
  color:var(--texto-secundario);
  line-height:1.6;
  margin:0 0 1em;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 1.25rem;
}

/* --- @font-face --- */
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/montserrat-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-italic-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

/* --- Botões --- */
.btn{
  display:inline-block;
  border:none;
  cursor:pointer;
  font-family:var(--font-corpo);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.02em;
  padding:1rem 1.8rem;
  border-radius:var(--radius-sm);
  text-decoration:none;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primario{
  background:var(--cor-cta);
  color:var(--branco);
}
.btn-primario:hover,
.btn-primario:focus-visible{
  background:var(--cor-cta-hover);
}
.btn-secundario{
  background:transparent;
  color:var(--branco);
  border:1px solid var(--branco);
}
.btn-secundario:hover,
.btn-secundario:focus-visible{
  background:var(--branco);
  color:var(--cor-escura);
}

/* --- Fundos de seção --- */
.bg-clara{ background:var(--branco); }
.bg-tint{ background:var(--bg-tint); }
.bg-secundaria{ background:var(--cor-secundaria); color:var(--texto-claro); }
.bg-secundaria h2,
.bg-secundaria h3{ color:var(--branco); }
.bg-secundaria p{ color:var(--texto-claro-esmaecido); }
.bg-escura{ background:var(--cor-escura); color:var(--texto-claro); }
.bg-escura h1,
.bg-escura h2,
.bg-escura h3{ color:var(--branco); }
.bg-escura p{ color:var(--texto-claro-esmaecido); }

/* --- Scroll reveal --- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* --- Scroll reveal — variantes laterais (blocos de 2 colunas) --- */
.reveal-left{
  opacity:0;
  transform:translateX(-150px);
  transition:opacity 2.5s ease, transform 2.5s ease;
}
.reveal-right{
  opacity:0;
  transform:translateX(150px);
  transition:opacity 2.5s ease, transform 2.5s ease;
}
.reveal-left.is-visible,
.reveal-right.is-visible{
  opacity:1;
  transform:translateX(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal-left,
  .reveal-right{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* --- Scroll reveal — variantes com saída via animation-timeline (view()) ---
   reveal-view-left/reveal-view-right: mesma leitura do reveal-left/
   reveal-right acima (entra vindo daquele lado) — mas com suporte a
   ANIMAÇÃO DE SAÍDA quando o browser suporta animation-timeline:view()
   (Chrome/Safari); fallback fora do @supports é idêntico ao padrão
   .reveal, controlado pelo observer (Firefox e outros sem suporte).

   Usa a propriedade `translate` (não `transform`) de propósito: com
   animation-fill-mode:both, o transform de uma CSS Animation ativa
   vence qualquer outro valor declarado pra ele (inclusive :hover),
   não importa a especificidade. Usando `translate` em vez disso, a
   entrada/saída fica isolada e `transform` continua livre pra cada
   página aplicar seu próprio hover (scale, elevação etc) sem conflito.

   Uso global — qualquer página aplica direto nos elementos. Se uma
   página precisar inverter o sentido (ex: elementos convergindo ou
   divergindo de um centro, como nos Cards de Vantagem da Home), a
   sobrescrita fica no CSS daquela página, com seletor mais específico
   — nunca editar as regras daqui. */
.reveal-view-left,
.reveal-view-right{
  transition:opacity .7s ease, translate .7s ease;
}
.reveal-view-left{ opacity:0; translate:-150px 0; }
.reveal-view-right{ opacity:0; translate:150px 0; }
.reveal-view-left.is-visible,
.reveal-view-right.is-visible{
  opacity:1;
  translate:0 0;
}
@media (prefers-reduced-motion: reduce){
  .reveal-view-left,
  .reveal-view-right{
    opacity:1;
    translate:none;
    transition:none;
  }
}
@supports (animation-timeline: view()){
  .reveal-view-left,
  .reveal-view-right{
    opacity:1;
    translate:none;
    transition:none;
    animation-duration:1ms;
    animation-fill-mode:both;
    animation-timeline:view();
    /* janela mais larga (55% em vez de 30%) = mais distância de scroll
       pra completar a transição = continua perceptível mesmo em scroll
       rápido. Ajustar esse número pra cima/baixo conforme necessário. */
    animation-range:entry 0% cover 55%;
  }
  .reveal-view-left{ animation-name:reveal-view-left-anim; }
  .reveal-view-right{ animation-name:reveal-view-right-anim; }
  @keyframes reveal-view-left-anim{
    0%{ opacity:0; translate:-150px 0; }
    25%{ opacity:1; }
    100%{ translate:0 0; }
  }
  @keyframes reveal-view-right-anim{
    0%{ opacity:0; translate:150px 0; }
    25%{ opacity:1; }
    100%{ translate:0 0; }
  }
}

/* --- Scroll reveal — entrada vertical (view()) ---
   reveal-view-center: entra de baixo pra cima, mesma lógica de
   entrada/saída do reveal-view-left/right acima. Promovida a global
   em 25/09/2026 — usada primeiro nos Cards de Vantagem da Home
   (card-destaque central) e agora também nos Depoimentos de Quem
   Somos. Se uma página precisar de outro deslocamento vertical,
   sobrescrever com seletor mais específico, igual ao padrão já
   usado pros laterais — nunca editar a regra daqui. */
.reveal-view-center{
  opacity:0;
  translate:0 70px;
  transition:opacity .7s ease, translate .7s ease;
}
.reveal-view-center.is-visible{
  opacity:1;
  translate:0 0;
}
@media (prefers-reduced-motion: reduce){
  .reveal-view-center{
    opacity:1;
    translate:none;
    transition:none;
  }
}
@supports (animation-timeline: view()){
  .reveal-view-center{
    opacity:1;
    translate:none;
    transition:none;
    animation-duration:1ms;
    animation-fill-mode:both;
    animation-timeline:view();
    animation-range:entry 0% cover 55%;
    animation-name:reveal-view-center-anim;
  }
  @keyframes reveal-view-center-anim{
    0%{ opacity:0; translate:0 70px; }
    25%{ opacity:1; }
    100%{ translate:0 0; }
  }
}

/* --- Scale contínuo no scroll via animation-timeline (view()) ---
   scale-view: sem efeito em browsers sem suporte a animation-timeline:
   view() (Firefox) — degrada bem, elemento fica só no tamanho normal.
   Onde há suporte (Chrome/Safari), a escala aumenta continuamente
   enquanto o elemento está visível na tela — sem range restrito, usa
   a timeline inteira (0% = começa a aparecer, 100% = termina de sair),
   então o crescimento acompanha o scroll do início ao fim, não é uma
   entrada única. Usa `scale` (não `transform`), mesmo motivo do
   reveal-view acima: fica livre pra qualquer hover que o elemento já
   tenha, sem conflito.
   Valor final ajustável — começou em 1.1 a pedido do Edivan. */
@supports (animation-timeline: view()){
  .scale-view{
    animation-name:scale-view-anim;
    animation-duration:1ms;
    animation-fill-mode:both;
    animation-timeline:view();
    /* concentra o crescimento nos primeiros ~50% da visibilidade total
       (em vez da trajetória inteira) — espalhado demais, o olho não
       percebia a mudança de tamanho. Ajustável pra mais/menos. */
    animation-range:cover 0% cover 50%;
  }
  @keyframes scale-view-anim{
    from{ scale:1; }
    to{ scale:1.25; }
  }
  @media (prefers-reduced-motion: reduce){
    .scale-view{
      animation:none;
      scale:none;
    }
  }
}

/* ========================================================
   HEADER
======================================================== */
header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--linha);
  backdrop-filter:blur(6px);
}
header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 1.25rem;
  gap:1rem;
}
.logo-link img{
  display:block;
  height:60px;
  width:auto;
}
nav ul{
  list-style:none;
  display:none;
  gap:1.6rem;
  margin:0;
  padding:0;
  font-size:.9rem;
}
nav a{
  color:var(--texto-principal);
  text-decoration:none;
  font-weight:600;
  padding-bottom:.3rem;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
nav a:hover,
nav a.is-active{
  color:var(--cor-primaria);
  border-color:var(--cor-primaria);
}
@media(min-width:900px){
  nav ul{ display:flex; }
}
.btn-header{
  font-size:.82rem;
  padding:.65rem 1.15rem;
  white-space:nowrap;
}
/* End Header */

/* ========================================================
   FOOTER
======================================================== */
footer{
  background:var(--cor-footer);
  color:var(--texto-claro-esmaecido);
  padding:var(--gap-lg) 0 var(--gap-md);
  font-size:.88rem;
}
footer a{
  color:var(--texto-claro-esmaecido);
  text-decoration:none;
}
footer a:hover{
  color:var(--branco);
}
footer h2{
  color:var(--branco);
  font-size:.85rem;
  margin:0 0 .9rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}
footer ul{
  list-style:none;
  margin:0;
  padding:0;
}
footer li{
  margin-bottom:.6rem;
}
footer address{
  font-style:normal;
  color:var(--texto-claro-esmaecido);
  font-size:.85rem;
  margin:1rem 0;
  display:block;
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-md);
  margin-bottom:var(--gap-md);
}
@media(min-width:768px){
  .footer-grid{
    grid-template-columns:.8fr 1.3fr 1fr 1fr;
  }
}

/* Coluna 1 — logo isolada + sociais */
.footer-logo{
  width:80px;
  max-width:100%;
  height:auto;
  margin-bottom:1rem;
  display:block;
}
.footer-social{
  display:flex;
  gap:.8rem;
  margin-top:.5rem;
}
/* Ajuste 06/10/2026: sociais SEMPRE abaixo da logo, na mesma coluna (desktop e mobile).
   Ordem definida por CSS (order) e seletor com footer na frente, para não depender
   da ordem do HTML nem ser vencida por regra de outro arquivo .css. */
footer .footer-col-logo{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
footer .footer-col-logo .footer-logo{
  order:1;
  margin-bottom:1rem;
}
footer .footer-col-logo .footer-social{
  order:2;
  margin-top:0;
}
.footer-social a{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--branco);
  transition:background .15s ease;
}
.footer-social a:hover{
  background:rgba(255,255,255,.22);
}

/* Coluna 2 — texto institucional + NAP (descrição + título nome da empresa/categoria) */
.footer-col-texto p{
  color:var(--texto-claro-esmaecido);
  font-size:.85rem;
}
.footer-col-texto .footer-empresa-titulo{
  color:var(--branco);
  font-weight:700;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin:0 0 .9rem;
}
.footer-separador{
  color:var(--texto-claro-esmaecido);
  margin:0 .3rem;
  font-weight:400;
  text-transform:none;
}

/* Coluna 3 — navegação (usa os estilos genéricos footer h4/ul/li já definidos acima) */

/* Coluna 4 — Fale Conosco: telefones, e-mail e endereço com ícone svg */
.footer-contatos li{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
}
.footer-icone{
  width:18px;
  height:18px;
  flex-shrink:0;
  margin-top:.15rem;
  color:var(--texto-claro-esmaecido);
}
.footer-endereco{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  margin:1rem 0;
}
.footer-endereco .footer-icone{
  margin-top:.2rem;
}

.footer-cobertura{
  font-size:.8rem;
  color:var(--texto-claro-esmaecido);
  max-width:32ch;
  margin-top:1rem;
}
.footer-selos{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1.2rem;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:1.2rem;
  font-size:.78rem;
  color:var(--texto-claro-esmaecido);
  text-align:center;
}
.footer-credito{
  color:var(--texto-claro-esmaecido);
  text-decoration:underline;
  text-underline-offset:2px;
}
.footer-credito:hover{
  color:var(--branco);
}
/* End Footer */

/* ========================================================
   BOTÕES FLUTUANTES GLOBAIS (WhatsApp + Voltar ao Topo)
   — injetados 1x via footer.html, aparecem em todas as páginas
======================================================== */
.flutuantes{
  position:fixed;
  bottom:1.25rem;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  padding:0 1.25rem;
  pointer-events:none;
  z-index:40;
}
.flutuantes > *{
  pointer-events:auto;
}

/* Voltar ao topo — esquerda, discreto (outline/fantasma), some até o scroll passar do limiar */
.btn-topo{
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  border:1.5px solid rgba(1,9,23,.25);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--cor-escura);
  opacity:0;
  visibility:hidden;
  backdrop-filter:blur(4px);
  transition:opacity .2s ease,visibility .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.btn-topo.is-visivel{
  opacity:.55;
  visibility:visible;
}
.btn-topo:hover{
  opacity:1;
  background:var(--cor-escura);
  border-color:var(--cor-escura);
  color:var(--branco);
}

/* WhatsApp — direita, protagonista, sólido (verde da própria marca WhatsApp) */
.btn-whatsapp{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  color:#fff;
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn-whatsapp:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
/* End Botões Flutuantes */

/* --- Contenção de overflow horizontal ---
   Elementos com reveal-view-* começam deslocados (translate ±150px) e
   alargavam a página no mobile. `clip` (e não `hidden`) corta o excesso
   sem criar contexto de scroll, então header sticky e animações
   scroll-driven continuam funcionando. */
html, body{ overflow-x:clip; }
main{ overflow-x:clip; }


/* === 01-home.css === */
/* ============================================================
   01-home.css — Home institucional NMP
   Depende das variáveis de 00-header-footer.css (carrega antes,
   ordem alfabética do build). Mobile First em toda seção.
============================================================ */

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 1.25rem;
}

section{
  padding:var(--gap-lg) 0;
}

.tag{
  display:inline-block;
  font-family:var(--font-corpo);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:var(--cor-secundaria);
  color:var(--branco);
  padding:.3rem .7rem;
  border-radius:var(--radius-sm);
  margin-bottom:1rem;
}

/* ========================================================
   ENTRADA NO SCROLL — cascata (itens de grid)
   Complementa o .reveal padrão (00-header-footer.css). Usado nos
   grids de itens paralelos (Cards de Vantagem, Grid de Serviços,
   Logos, Depoimentos) — decisão registrada no projeto. Certificado
   e CTA Final voltaram a usar o .reveal padrão (fade-scale testado
   e descartado — efeito não ficava perceptível). Hero fica de fora
   de propósito (ver PASSO 1 — LCP Guardian da skill do projeto).
======================================================== */
.cascata > *:nth-child(1).is-visible{ transition-delay:0s; }
.cascata > *:nth-child(2).is-visible{ transition-delay:.09s; }
.cascata > *:nth-child(3).is-visible{ transition-delay:.18s; }
.cascata > *:nth-child(4).is-visible{ transition-delay:.27s; }
.cascata > *:nth-child(5).is-visible{ transition-delay:.36s; }
.cascata > *:nth-child(6).is-visible{ transition-delay:.45s; }
.cascata > *:nth-child(7).is-visible{ transition-delay:.54s; }
.cascata > *:nth-child(8).is-visible{ transition-delay:.63s; }
.cascata > *:nth-child(9).is-visible{ transition-delay:.72s; }

/* ========================================================
   01 — HERO
======================================================== */
.hero .wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-lg);
  align-items:center;
}
@media(min-width:900px){
  .hero .wrap{
    grid-template-columns:1.1fr .9fr;
  }
}

.hero-cta{
  margin-top:var(--gap-sm);
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap-sm);
  margin-top:var(--gap-md);
  border-top:1px solid var(--linha);
  padding-top:var(--gap-sm);
}
.hero-stats div{
  text-align:center;
}
.hero-stats strong{
  display:block;
  font-family:var(--font-titulo);
  font-variation-settings:var(--peso-titulo-settings);
  font-size:1.5rem;
  color:var(--cor-primaria);
}
.hero-stats span{
  font-size:.72rem;
  color:var(--texto-secundario);
}

.hero-img-wrap{
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.hero-img-wrap img{
  display:block;
  width:100%;
  height:auto;
}

/* --- Parallax do hero (06/10/2026, ajustado) ---
   3 camadas decorativas (SVG inline no index.html). Mesma linha dos reveal-view/
   scale-view do projeto: animation-timeline (compositor, sem JS), só `translate`/
   `scale`/`rotate` (nunca `transform`), @supports, sem efeito onde não há suporte
   (Firefox: fica estático) e desligado em prefers-reduced-motion.
   Timeline = rolagem da página (scroll(root)), de 0 até --px-range (≈ altura do hero:
   ~800px no desktop, ~1100px no mobile, onde o hero é bem mais alto). O movimento
   começa no primeiro pixel de rolagem e termina quando o hero sai da tela.
   (Testado e descartado: view-timeline no próprio hero — no mobile só começava a mover
   depois de ~500px de rolagem, porque a faixa "exit" de um elemento mais alto que a
   tela dura apenas 1 viewport e começa tarde.)
   A (fundo, lenta) desce e cresce um pouco; B (frente) sobe mais rápido que o
   conteúdo; C (®) desce girando. Ajuste a intensidade nas variáveis abaixo. */
.hero-parallax{
  --px-range:800px;
  --px-a:320px;  --px-a-scale:1.14;
  --px-b:-280px; --px-b-scale:1.28;
  --px-c:240px;  --px-c-rot:50deg;
}
@media(max-width:899px){
  .hero-parallax{
    /* Mobile e tablet em retrato (hero em 1 coluna). Cada camada se AFASTA do texto ao rolar: A (topo) sobe e sai pelo
       topo do hero; B e C (rodapé) descem e saem por baixo. Nenhuma cruza o H1/parágrafo. */
    --px-range:1100px;
    --px-a:-260px; --px-a-scale:1.12;
    --px-b:240px;  --px-b-scale:1.35;
    --px-c:220px;  --px-c-rot:40deg;
  }
}
@supports (animation-timeline: scroll()){
  .hero-px{
    animation-duration:1ms;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
    animation-range:0px var(--px-range);
  }
  .hero-px--a{ animation-name:hero-px-a; }
  .hero-px--b{ animation-name:hero-px-b; }
  .hero-px--c{ animation-name:hero-px-c; }
  @keyframes hero-px-a{ from{ translate:0 0; scale:1; } to{ translate:0 var(--px-a); scale:var(--px-a-scale); } }
  @keyframes hero-px-b{ from{ translate:0 0; scale:1; } to{ translate:0 var(--px-b); scale:var(--px-b-scale); } }
  @keyframes hero-px-c{ from{ translate:0 0; rotate:0deg; } to{ translate:0 var(--px-c); rotate:var(--px-c-rot); } }
}
@media (prefers-reduced-motion: reduce){
  .hero-px{ animation:none; }
}
/* End Hero */

/* ========================================================
   02 — CARDS DE VANTAGEM
======================================================== */

.cards-titulo{
  text-align:center;
  margin-bottom:var(--gap-md);
}

.cards-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-md);
}
@media(min-width:768px){
  .cards-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

.card{
  position:relative;
  z-index:1;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--radius-md);
  padding:var(--gap-md);
  transition:transform .45s cubic-bezier(.22,.85,.34,1), box-shadow .45s cubic-bezier(.22,.85,.34,1);
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(1,9,23,.09);
}
.card-num{
  display:block;
  font-family:var(--font-titulo);
  font-optical-sizing:auto;
  font-variation-settings:var(--peso-titulo-settings);
  font-size:2.75rem;
  line-height:1;
  color:var(--linha);
  margin-bottom:1rem;
}
.card h3{
  color:var(--cor-secundaria);
}

.card-destaque{
  z-index:2;
  background:var(--cor-escura);
  border-color:var(--cor-escura);
}
.card-destaque .card-num{
  color:var(--cor-destaque);
}
.card-destaque h3{
  color:var(--branco);
}
.card-destaque p{
  color:var(--texto-claro-esmaecido);
}
@media(min-width:768px){
  .card-destaque{
    transform:translateY(-1.25rem);
  }
  .card-destaque:hover{
    transform:translateY(-1.6rem);
  }
}

.section-cta{
  text-align:center;
  margin-top:var(--gap-md);
}
/* End Cards de Vantagem */

/* ========================================================
   CARDS DE VANTAGEM — variante "divergente" do reveal-view
   Usa as classes globais reveal-view-left/right (ver
   00-header-footer.css), mas aqui os laterais fazem o INVERSO do
   sentido canônico: em vez de entrar vindo daquele lado, eles
   entram se AFASTANDO do centro (começam mais perto do centro e
   terminam na posição final, mais longe). Por isso o `translate`
   inicial e o keyframe são sobrescritos aqui, com seletor escopado
   a .cards-grid — a regra global continua valendo do jeito padrão
   pra qualquer outra página que usar reveal-view-left/right.

   .reveal-view-center é específico do card-destaque em termos de USO
   (o centro do grid), mas a classe em si agora é global — ver
   00-header-footer.css. Usa `translate` (não `transform`) de
   propósito: o card-destaque já tem seu próprio `transform` estático
   (elevação -1.25rem em repouso, -1.6rem no hover — ver .card-destaque
   acima) — como são propriedades diferentes, elas se combinam
   sozinhas, sem precisar de hack nenhum pra preservar a elevação nem
   pra liberar o hover.
======================================================== */
.cards-grid .reveal-view-left{ translate:150px 0; }
.cards-grid .reveal-view-right{ translate:-150px 0; }

@supports (animation-timeline: view()){
  .cards-grid .reveal-view-left{ animation-name:cards-diverge-left-anim; }
  .cards-grid .reveal-view-right{ animation-name:cards-diverge-right-anim; }
  @keyframes cards-diverge-left-anim{
    0%{ opacity:0; translate:150px 0; }
    25%{ opacity:1; }
    100%{ translate:0 0; }
  }
  @keyframes cards-diverge-right-anim{
    0%{ opacity:0; translate:-150px 0; }
    25%{ opacity:1; }
    100%{ translate:0 0; }
  }
}

/* .reveal-view-center (fallback e @supports, acima) declara sua própria
   `transition` — mesma especificidade da transition de hover em .card
   (lá em cima). Como `transition` não faz merge entre regras diferentes,
   uma cancela a lista inteira da outra. Esta regra, com 2 classes (mais
   específica que as duas), junta as duas necessidades numa lista só —
   entrada (opacity/translate) e hover (transform/box-shadow) — pra
   nenhuma sobrescrever a outra, em qualquer navegador. */
.card.reveal-view-center{
  transition:opacity .7s ease, translate .7s ease,
             transform .45s cubic-bezier(.22,.85,.34,1),
             box-shadow .45s cubic-bezier(.22,.85,.34,1);
}
/* End Cards de Vantagem — variante divergente */

/* ========================================================
   03 — GRID DE SERVIÇOS
   .servicos-grid preservado sem uso nesta seção (mantido intacto
   caso outra página do site dependa dele) — a Home agora usa
   .servicos-bento, layout bento assimétrico (ícone, expand/collapse
   via <details> e link próprio ↗ para a página do serviço).
======================================================== */
.servicos-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.9rem;
  margin-top:var(--gap-md);
}
@media(min-width:600px){
  .servicos-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(min-width:1024px){
  .servicos-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

.servicos-bento{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:3.5rem;
  margin-top:var(--gap-md);
}

.servico-card{
  position:relative;
  grid-column:span 1;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-md);
  padding:1.6rem 1.7rem;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, opacity .25s ease;
}

/* modo spotlight: com algum card aberto, os fechados recuam */
.servico-card[open]{
  border-color:var(--cor-destaque);
  background:rgba(255,255,255,.09);
  box-shadow:0 12px 24px rgba(1,9,23,.35);
}
.servicos-bento:has(.servico-card[open]) .servico-card:not([open]){
  opacity:.45;
}
.servicos-bento:has(.servico-card[open]) .servico-card:not([open]):hover,
.servicos-bento:has(.servico-card[open]) .servico-card:not([open]):focus-within{
  opacity:.85;
}

/* ação 1: ir para a página do serviço (sempre visível, canto fixo) */
.servico-link{
  position:absolute;
  top:1.05rem; right:1.05rem;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:4px;
  color:var(--texto-claro-esmaecido);
  text-decoration:none;
  z-index:3;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.servico-link svg{width:15px;height:15px;display:block;}
.servico-link:hover,
.servico-link:focus-visible{
  color:var(--cor-escura);
  background:var(--cor-destaque);
  border-color:var(--cor-destaque);
}

/* ação 2: expandir/colapsar descrição (área do summary) */
.servico-card > summary{
  cursor:pointer;
  list-style:none;
  padding-right:2.6rem;
}
.servico-card > summary::-webkit-details-marker{
  display:none;
}

.servico-cabecalho{
  display:flex;
  align-items:flex-start;
  gap:.8rem;
}

.servico-icone{
  width:34px;height:34px;flex-shrink:0;
  color:var(--texto-claro-esmaecido);
  transition:color .18s ease;
}
.servico-icone svg{width:100%;height:100%;display:block;}

.servico-titulo{
  font-family:var(--font-titulo);
  font-variation-settings:var(--peso-titulo-settings);
  font-weight:500;
  font-size:1.02rem;
  color:var(--branco);
  margin-top:.15rem;
  flex:1;
}

.servico-toggle{
  display:flex;align-items:center;gap:.35rem;
  margin-top:.7rem;padding-left:calc(34px + .8rem);
  font-size:.76rem;color:var(--texto-claro-esmaecido);
}
.servico-toggle svg{width:12px;height:12px;transition:transform .2s ease;}
.servico-card[open] .servico-toggle svg{transform:rotate(180deg);}
.txt-aberto{display:none;}
.servico-card[open] .txt-fechado{display:none;}
.servico-card[open] .txt-aberto{display:inline;}

.servico-card:hover,
.servico-card:focus-within{
  transform:translateY(-4px);
}
.servico-card:hover .servico-icone,
.servico-card:focus-within .servico-icone,
.servico-card[open] .servico-icone{
  color:var(--cor-destaque);
}
.servico-card:hover .servico-toggle,
.servico-card:focus-within .servico-toggle{
  color:var(--cor-destaque);
}

.servico-desc{
  margin:.9rem 0 0;padding-top:.9rem;
  padding-left:calc(34px + .8rem);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.88rem;color:var(--texto-claro-esmaecido);
  max-width:34ch;
}
.servico-desc-link{
  display:inline-block;margin-top:.6rem;
  font-size:.86rem;font-weight:700;color:var(--branco);
  text-decoration:none;border-bottom:1px solid var(--cor-destaque);
}
.servico-desc-link:hover{color:var(--cor-destaque);}

/* cards em destaque: Marcas e Patentes (maior receita) */
.servico-grande{
  grid-column:span 2;
  padding:2.2rem 2.4rem;
}
.servico-grande .servico-icone{width:46px;height:46px;}
.servico-grande .servico-titulo{font-size:1.28rem;}
.servico-grande .servico-desc{max-width:44ch;font-size:.94rem;padding-left:calc(46px + .8rem);}
.servico-grande .servico-toggle{padding-left:calc(46px + .8rem);}
.servico-grande .servico-link{top:1.5rem;right:1.6rem;width:34px;height:34px;}
.servico-grande .servico-link svg{width:17px;height:17px;}
.servico-grande > summary{padding-right:3.2rem;}

.servico-ultimo{grid-column:span 2;}

@media(max-width:900px){
  .servicos-bento{grid-template-columns:repeat(2,1fr);}
  .servico-grande{grid-column:span 2;}
  .servico-ultimo{grid-column:span 2;}
}
@media(max-width:600px){
  .servicos-bento{grid-template-columns:1fr;}
  .servico-card,.servico-grande,.servico-ultimo{grid-column:span 1;}
  .servico-grande{padding:1.4rem 1.5rem;}
  .servico-grande .servico-titulo{font-size:1.1rem;}
  .servico-grande .servico-link{top:1.1rem;right:1.1rem;width:30px;height:30px;}
  .servico-grande .servico-link svg{width:15px;height:15px;}
}
/* End Grid de Serviços */

/* ========================================================
   04 — VANTAGENS TABULADAS (CSS puro, radio+label, sem JS)
   Layout vertical (abas à esquerda / painel à direita) — nav
   dentro de .abas-grid pra permitir o grid de 2 colunas no desktop
   mantendo o seletor geral de irmão (~) a partir dos radios.
======================================================== */
.abas-wrap{
  margin-top:var(--gap-md);
  position:relative;
}
.abas-vantagens-input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.abas-grid{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:1.5rem;
  align-items:start;
}

.abas-nav{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-md);
  padding:.5rem;
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.abas-nav label{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.85rem 1rem;
  border-radius:var(--radius-sm);
  cursor:pointer;
  color:var(--texto-claro-esmaecido);
  transition:background .18s ease, color .18s ease;
}
.abas-nav label:hover{
  background:rgba(255,255,255,.05);
  color:var(--branco);
}
.aba-icone{width:20px;height:20px;flex-shrink:0;color:inherit;}
.aba-icone svg{width:100%;height:100%;display:block;}
.aba-rotulo{font-size:.92rem;font-weight:700;}

#t1:checked ~ .abas-grid .abas-nav label[for="t1"],
#t2:checked ~ .abas-grid .abas-nav label[for="t2"],
#t3:checked ~ .abas-grid .abas-nav label[for="t3"],
#t4:checked ~ .abas-grid .abas-nav label[for="t4"],
#t5:checked ~ .abas-grid .abas-nav label[for="t5"],
#t6:checked ~ .abas-grid .abas-nav label[for="t6"]{
  background:var(--cor-secundaria);
  color:var(--branco);
}
#t1:checked ~ .abas-grid .abas-nav label[for="t1"] .aba-icone,
#t2:checked ~ .abas-grid .abas-nav label[for="t2"] .aba-icone,
#t3:checked ~ .abas-grid .abas-nav label[for="t3"] .aba-icone,
#t4:checked ~ .abas-grid .abas-nav label[for="t4"] .aba-icone,
#t5:checked ~ .abas-grid .abas-nav label[for="t5"] .aba-icone,
#t6:checked ~ .abas-grid .abas-nav label[for="t6"] .aba-icone{
  color:var(--cor-destaque);
}

.abas-paineis{position:relative;min-height:290px;}
.aba-painel{display:none;}
#t1:checked ~ .abas-grid .abas-paineis #p1,
#t2:checked ~ .abas-grid .abas-paineis #p2,
#t3:checked ~ .abas-grid .abas-paineis #p3,
#t4:checked ~ .abas-grid .abas-paineis #p4,
#t5:checked ~ .abas-grid .abas-paineis #p5,
#t6:checked ~ .abas-grid .abas-paineis #p6{
  display:block;
}

.aba-painel{
  background:var(--cor-secundaria);
  border-radius:var(--radius-md);
  padding:2.4rem;
  height:100%;
}
.aba-painel-icone{
  width:54px;height:54px;border-radius:var(--radius-sm);
  background:var(--cor-destaque);color:var(--cor-escura);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.4rem;
}
.aba-painel-icone svg{width:28px;height:28px;}
.aba-painel h3{
  color:var(--branco);
  font-size:1.4rem;
  margin:0 0 .8rem;
}
.aba-painel p{
  color:var(--texto-claro-esmaecido);
  font-size:.96rem;
  max-width:52ch;
  margin:0 0 1.6rem;
}

.aba-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1.5px solid var(--cor-destaque);
  color:var(--branco);
  padding:.75rem 1.3rem;border-radius:var(--radius-sm);
  font-size:.86rem;font-weight:700;
  text-decoration:none;
  transition:background .18s ease, color .18s ease;
}
.aba-cta:hover{background:var(--cor-destaque);color:var(--cor-escura);}

@media(max-width:820px){
  .abas-grid{grid-template-columns:1fr;}
  .abas-nav{
    flex-direction:row;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:thin;
    scrollbar-color:var(--cor-destaque) rgba(255,255,255,.1);
  }
  .abas-nav::-webkit-scrollbar{
    height:6px;
  }
  .abas-nav::-webkit-scrollbar-track{
    background:rgba(255,255,255,.1);
    border-radius:3px;
  }
  .abas-nav::-webkit-scrollbar-thumb{
    background:var(--cor-destaque);
    border-radius:3px;
  }
  .abas-nav label{flex-direction:column;text-align:center;gap:.4rem;flex-shrink:0;min-width:92px;}
  .aba-rotulo{font-size:.78rem;}
  .aba-painel{padding:1.8rem;}
}
/* End Vantagens Tabuladas */

/* ========================================================
   05 — CERTIFICADO
======================================================== */
.certificado .wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-md);
  align-items:start;
}
@media(min-width:900px){
  .certificado .wrap{
    /* esta seção não usa a largura cheia do site (--maxw padrão do .wrap):
       no site original o bloco texto+imagem já vinha com uma largura
       própria, bem mais compacta — sem isso, a imagem de 300px sempre
       sobra "perdida" num container largo demais pro conteúdo que tem */
    max-width:860px;
    grid-template-columns:1fr 300px;
    gap:var(--gap-lg);
  }
}
.certificado-img-wrap{
  border-radius:30px;
  overflow:hidden;
  border:1px solid var(--linha);
  max-width:300px;
  margin:0 auto;
}
.certificado-img-wrap img{
  display:block;
  width:100%;
  height:auto;
  margin-top:-2px;
}
/* End Certificado */

/* ========================================================
   06 — LOGOS DE CLIENTES
======================================================== */
.logos-titulo{
  text-align:center;
  margin-bottom:var(--gap-md);
}
.logos-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  align-items:center;
}
@media(min-width:700px){
  .logos-grid{
    grid-template-columns:repeat(6,1fr);
  }
}
.logo-box img{
  display:block;
  width:100%;
  height:auto;
  max-height:60px;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:.7;
  transition:filter .2s ease, opacity .2s ease;
}
.logo-box:hover img{
  filter:grayscale(0%);
  opacity:1;
}
.bg-escura .logo-box{
  background:var(--branco);
  border-radius:var(--radius-sm);
  padding:.75rem 1rem;
}
/* End Logos de Clientes */

/* ========================================================
   07 — DEPOIMENTOS
======================================================== */
.depo-titulo{
  text-align:center;
  margin-bottom:var(--gap-md);
}
.depo-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-md);
}
@media(min-width:768px){
  .depo-grid{
    grid-template-columns:repeat(3,1fr);
  }
}
.depo-card{
  border:1px solid var(--linha);
  border-radius:var(--radius-md);
  padding:var(--gap-md);
  background:var(--branco);
}
.depo-head{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-bottom:.9rem;
}
.depo-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  flex-shrink:0;
  object-fit:cover;
}
.depo-nome{
  font-size:.88rem;
  font-weight:700;
  color:var(--texto-principal);
}
.depo-google{
  width:18px;
  height:18px;
  flex-shrink:0;
  margin-left:auto;
}
.depo-estrelas{
  display:flex;
  gap:.2rem;
  margin-bottom:.7rem;
}
.depo-estrelas svg{
  fill:var(--cor-destaque);
  flex-shrink:0;
}
.depo-card p{
  font-style:italic;
  color:var(--texto-secundario);
}
.ver-mais-depo{
  display:block;
  text-align:center;
  margin-top:var(--gap-md);
  font-size:.92rem;
  font-weight:700;
  color:var(--cor-primaria);
  text-decoration:none;
}
.ver-mais-depo:hover{
  text-decoration:underline;
}
.bg-escura .depo-card{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.15);
}
.bg-escura .depo-nome{
  color:var(--branco);
}
.bg-escura .depo-card p{
  color:var(--texto-claro-esmaecido);
}
.bg-escura .ver-mais-depo{
  color:var(--cor-destaque);
}
/* End Depoimentos */

/* ========================================================
   08 — NÚMEROS
======================================================== */
.numeros-intro{
  text-align:center;
  max-width:640px;
  margin:0 auto var(--gap-md);
}
.numeros-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-md);
  text-align:center;
}
@media(min-width:768px){
  .numeros-grid{
    grid-template-columns:repeat(3,1fr);
  }
}
.numeros-grid strong{
  display:block;
  font-family:var(--font-titulo);
  font-variation-settings:var(--peso-titulo-settings);
  font-size:2.6rem;
  color:var(--cor-destaque);
}
.numeros-grid span{
  font-size:.88rem;
  color:var(--texto-claro-esmaecido);
}
/* End Números */

/* ========================================================
   09 — VÍDEO INSTITUCIONAL
======================================================== */
.video-titulo{
  text-align:center;
  margin-bottom:var(--gap-md);
}
.video-box{
  position:relative;
  aspect-ratio:16/9;
  max-width:800px;
  margin:0 auto;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--texto-principal);
}
.video-box iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
}
/* End Vídeo */

/* ========================================================
   10 — FORM DE CAPTURA
======================================================== */
.form-titulo{
  text-align:center;
  margin-bottom:var(--gap-md);
}
.form-wrap{
  max-width:560px;
  margin:0 auto;
}
.campo{
  margin-bottom:1.1rem;
}
.campo label{
  display:block;
  font-size:.85rem;
  font-weight:700;
  margin-bottom:.4rem;
  color:var(--texto-principal);
}
.campo input,
.campo select{
  width:100%;
  padding:.85rem .95rem;
  border:1px solid var(--linha);
  border-radius:var(--radius-sm);
  font-family:var(--font-corpo);
  font-size:16px;
  color:var(--texto-principal);
  background:var(--branco);
}
.campo input:focus,
.campo select:focus{
  outline:2px solid var(--cor-primaria);
  outline-offset:1px;
}
.form-nota{
  font-size:.75rem;
  color:var(--texto-secundario);
  text-align:center;
  margin-top:.5rem;
}
/* End Form */

/* ========================================================
   11 — FAQ
======================================================== */
.faq-titulo{
  text-align:center;
  margin-bottom:var(--gap-md);
}
.faq-lista{
  max-width:760px;
  margin:0 auto;
}
.faq-item{
  border-bottom:1px solid var(--linha);
  padding:1.1rem 0;
}
.faq-item summary{
  cursor:pointer;
  font-weight:700;
  font-size:1rem;
  color:var(--texto-principal);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.faq-item summary::-webkit-details-marker{
  display:none;
}
.faq-item summary::after{
  content:"+";
  font-size:1.3rem;
  color:var(--cor-primaria);
  flex-shrink:0;
}
.faq-item[open] summary::after{
  content:"–";
}
.faq-item p{
  margin-top:.9rem;
}
.bg-escura .faq-item{
  border-bottom-color:rgba(255,255,255,.15);
}
.bg-escura .faq-item summary{
  color:var(--branco);
}
.bg-escura .faq-item summary::after{
  color:var(--cor-destaque);
}
.bg-escura .faq-item p{
  color:var(--texto-claro-esmaecido);
}
/* End FAQ */

/* ========================================================
   12 — CTA FINAL
======================================================== */
.cta-final{
  text-align:center;
}
.cta-final .btn{
  margin-top:1.2rem;
}
.pagamento-nota{
  font-size:.82rem;
  color:var(--texto-claro-esmaecido);
  margin-top:1rem;
}
/* End CTA Final */

/* ========================================================
   13 — MAPA
======================================================== */
.mapa-titulo{
  text-align:center;
  margin-bottom:var(--gap-md);
}
.mapa-box{
  /* Full-bleed: fica fora do .wrap (sem max-width/padding) de propósito,
     pra ocupar a largura inteira da viewport — por isso sem border-radius
     nem border lateral, senão a borda ficaria "flutuando" sem encostar
     nas bordas da tela */
  overflow:hidden;
  border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
  height:380px;
}
@media(min-width:900px){
  .mapa-box{
    height:480px;
  }
}
.mapa-box iframe{
  width:100%;
  height:100%;
  border:none;
}
/* End Mapa */


/* === 02-servicos.css === */
/* ============================================================
   02-servicos.css — Página de listagem de Serviços (hub) NMP
   Depende das variáveis de 00-header-footer.css (carrega antes,
   ordem alfabética do build). Mobile First.
============================================================ */

/* ========================================================
   01 — HERO INTERNA
   Sem imagem — LCP é o H1/botão, não uma imagem como na Home.
======================================================== */
.hero-interna .wrap{
  max-width:820px;
}
.hero-interna-cta{
  margin-top:var(--gap-sm);
}
/* End Hero Interna */

/* ========================================================
   02 — INTRODUÇÃO
======================================================== */
.intro-servicos{
  max-width:820px;
}
/* End Introdução */

/* ========================================================
   03 — LISTA DE SERVIÇOS (zig-zag)
======================================================== */
.servico-linha{
  display:flex;
  flex-direction:column;
  gap:1.75rem;
  padding:1.5rem;
  border:1px solid var(--linha);
  border-radius:var(--radius-lg);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.servico-linha:not(:last-child){
  margin-bottom:3.25rem;
}
@media(min-width:900px){
  .servico-linha{
    flex-direction:row;
    align-items:center;
    gap:var(--gap-lg);
    padding:var(--gap-md);
  }
  .servico-linha.inverte{
    flex-direction:row-reverse;
  }
}
.servico-linha:hover{
  background:var(--bg-tint);
  border-color:var(--cor-primaria);
  transform:scale(1.1);
}

.servico-icone-box{
  width:100%;
  height:150px;
  flex-shrink:0;
  border-radius:var(--radius-lg);
  background:var(--bg-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cor-primaria);
  transition:background .2s ease, color .2s ease;
}
.servico-icone-box svg{
  width:56px;
  height:56px;
  display:block;
}
@media(min-width:900px){
  .servico-icone-box{
    width:220px;
    height:220px;
  }
  .servico-icone-box svg{
    width:80px;
    height:80px;
  }
}
.servico-linha:hover .servico-icone-box{
  background:var(--cor-secundaria);
  color:var(--cor-destaque);
}

.servico-texto{
  flex:1;
}
.servico-eyebrow{
  display:block;
  font-family:var(--font-corpo);
  color:var(--texto-secundario);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:.6rem;
}
.servico-texto h2{
  font-size:1.3rem;
  margin-bottom:.5rem;
  color:var(--texto-principal);
}
.servico-texto p{
  max-width:52ch;
}
.servico-cta{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--font-corpo);
  font-size:.86rem;
  font-weight:700;
  color:var(--cor-primaria);
  border-bottom:1px solid var(--cor-primaria);
  padding-bottom:2px;
  text-decoration:none;
  transition:color .18s ease, border-color .18s ease;
}
.servico-cta:hover{
  color:var(--cor-cta);
  border-color:var(--cor-cta);
}
/* End Lista de Serviços */

/* ========================================================
   05 — CTA CARD FLUTUANTE
======================================================== */
.cta-card{
  max-width:920px;
  margin:0 auto;
  background:var(--cor-escura);
  color:var(--branco);
  border-radius:var(--radius-lg);
  padding:3.5rem 2rem;
  text-align:center;
}
.cta-card h2{
  color:var(--branco);
  font-size:1.5rem;
  letter-spacing:.02em;
  margin-bottom:1.6rem;
}
.btn-pill{
  border-radius:999px;
  text-transform:uppercase;
  font-size:.85rem;
  letter-spacing:.03em;
  padding:1rem 2.2rem;
}
/* End CTA Card */


/* === 03-quem-somos.css === */
/* ============================================================
   03-quem-somos.css — Página Quem Somos NMP
   Depende das variáveis de 00-header-footer.css e reaproveita
   classes já existentes de 01-home.css (.form-wrap, .campo,
   .depo-*, .cta-final) e 02-servicos.css (.hero-interna). Mobile First.
============================================================ */

/* ========================================================
   01 — HISTÓRIA · BLOCO 1 (texto + imagem única)
======================================================== */
.historia-bloco .wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-lg);
  align-items:start;
}
@media(min-width:900px){
  .historia-bloco .wrap{
    grid-template-columns:1.1fr .9fr;
    align-items:center;
  }
}
.historia-img-wrap{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--linha);
}
.historia-img-wrap img{
  display:block;
  width:100%;
  height:auto;
}

/* bloco de resposta direta (AEO) — citável isoladamente por IA generativa */
.resposta-direta{
  background:var(--bg-tint);
  border-left:3px solid var(--cor-primaria);
  padding:1.1rem 1.4rem;
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-size:.95rem;
  color:var(--texto-principal);
  margin:0 0 1.6rem;
}
/* End História Bloco 1 */

/* ========================================================
   02 — HISTÓRIA · BLOCO 2 (fotos de fachada + continuação do texto)
======================================================== */
.historia-fotos-wrap{
  margin-bottom:var(--gap-md);
}
.historia-fotos{
  position:relative;
}
.historia-foto-principal{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
}
.historia-foto-principal img{
  display:block;
  width:100%;
  height:auto;
}
.historia-foto-secundaria{
  position:absolute;
  right:-4%;
  bottom:-12%;
  width:60%;
  max-width:340px;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:4px solid var(--cor-escura);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.historia-foto-secundaria img{
  display:block;
  width:100%;
  height:auto;
}
@media(max-width:767px){
  .historia-foto-secundaria{
    position:static;
    width:100%;
    max-width:none;
    margin-top:1rem;
  }
}
.historia-texto-2{
  max-width:760px;
}
/* End História Bloco 2 */

/* ========================================================
   03 — CARDS DE LOCALIZAÇÃO
======================================================== */
.locais-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-md);
}
@media(min-width:640px){
  .locais-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
.local-card{
  border-radius:var(--radius-lg);
  padding:var(--gap-md);
  text-align:center;
  background:var(--cor-primaria);
  color:var(--branco);
}
.local-card.local-secundario{
  background:var(--cor-secundaria);
}
.local-card h3{
  color:var(--branco);
  margin-bottom:.4rem;
}
.local-pin{
  width:48px;
  height:48px;
  border-radius:50%;
  margin:0 auto .9rem;
  background:rgba(255,255,255,.15);
  display:flex;
  align-items:center;
  justify-content:center;
}
.local-pin svg{
  width:22px;
  height:22px;
}
.local-endereco{
  font-size:.88rem;
  color:rgba(255,255,255,.85);
  margin-bottom:.7rem;
}
.local-geo{
  font-size:.8rem;
  font-weight:700;
  color:var(--branco);
  margin-top:.7rem;
}
/* End Cards de Localização */

/* ========================================================
   04 — DEPOIMENTOS · variante "divergente" do reveal-view
   Mesmo padrão dos Cards de Vantagem da Home (ver 01-home.css):
   laterais entram se AFASTANDO do centro (inverso do sentido
   canônico global). .reveal-view-center é reaproveitado direto do
   00-header-footer.css (mesmo valor, sem sobrescrita necessária).

   Escopado por .depo-grid--divergente (aplicado só no HTML desta
   página) porque .depo-card/.depo-grid são classes compartilhadas
   com Home e o hub de Serviços, que usam o sentido canônico
   (convergente, sem sobrescrita) — não mexer na regra global.

   z-index: mesmo motivo dos Cards de Vantagem — os laterais entram
   por baixo do centro, então o centro precisa pintar por cima
   durante a transição (senão os laterais aparecem sobrepondo o
   card central em vez de saírem de trás dele).
======================================================== */
.depo-grid--divergente .depo-card{
  position:relative;
  z-index:1;
}
.depo-grid--divergente .reveal-view-center{
  z-index:2;
}
.depo-grid--divergente .reveal-view-left{ translate:150px 0; }
.depo-grid--divergente .reveal-view-right{ translate:-150px 0; }

@supports (animation-timeline: view()){
  .depo-grid--divergente .reveal-view-left{ animation-name:depo-diverge-left-anim; }
  .depo-grid--divergente .reveal-view-right{ animation-name:depo-diverge-right-anim; }
  @keyframes depo-diverge-left-anim{
    0%{ opacity:0; translate:150px 0; }
    25%{ opacity:1; }
    100%{ translate:0 0; }
  }
  @keyframes depo-diverge-right-anim{
    0%{ opacity:0; translate:-150px 0; }
    25%{ opacity:1; }
    100%{ translate:0 0; }
  }
}
/* End Depoimentos — variante divergente */


/* === 04-legislacao.css === */
/* ============================================================
   04-legislacao.css — Página Legislação NMP
   Depende das variáveis de 00-header-footer.css e reaproveita
   classes já existentes: .hero-interna (02-servicos.css),
   .resposta-direta (03-quem-somos.css), .form-wrap/.campo/.depo-*/
   .cta-final (01-home.css). Mobile First.
============================================================ */

/* ========================================================
   01 — INTRODUÇÃO
======================================================== */
.intro-legislacao{
  max-width:820px;
}
/* End Introdução */

/* ========================================================
   02 — GRID DE LEIS
======================================================== */
.leis-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-md);
}
@media(min-width:700px){
  .leis-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
.lei-card{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--radius-md);
  padding:var(--gap-md);
  transition:transform .2s ease, box-shadow .2s ease;
}
.lei-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(1,9,23,.08);
}
.lei-icone{
  width:40px;
  height:48px;
  color:var(--cor-primaria);
}
.lei-icone svg{
  width:100%;
  height:100%;
  display:block;
}
.lei-nome{
  font-size:1.15rem;
  color:var(--texto-principal);
  margin-bottom:0;
}
.lei-meta{
  font-size:.78rem;
  font-weight:700;
  color:var(--texto-secundario);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.lei-desc{
  font-size:.92rem;
  margin-bottom:.3rem;
}
.lei-card .btn{
  align-self:flex-start;
}
/* End Grid de Leis */


/* === 05-contato.css === */
/* ============================================================
   05-contato.css
   Classes NOVAS específicas da página de Contato. Todo o resto
   é 100% reaproveitado (concatenado pelo build.js em ordem
   alfabética, mesmo style.css final):
     .hero-interna                → 02-servicos.css
     .locais-grid/.local-card/
     .local-pin/.local-endereco/
     .local-geo/.local-secundario → 03-quem-somos.css (idêntico
                                     ao de Quem Somos, sem alteração)
     .form-wrap/.campo/.form-titulo/.form-nota/.faq-titulo/
     .faq-lista/.faq-item/.mapa-titulo/.mapa-box → 01-home.css
     tokens e .bg-tint/.bg-clara/.bg-escura → 00-header-footer.css
   Mobile First.
============================================================ */

/* ========================================================
   01 — PROTEJA SUA INVENÇÃO + FORM (grid de 2 colunas)
======================================================== */
.contato-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap-lg);
  align-items:center;
}
@media(min-width:900px){
  .contato-grid{
    grid-template-columns:.9fr 1.1fr;
  }
}
.contato-intro h2{
  font-size:clamp(1.6rem,3.4vw,2.2rem);
}

.contato-form-card{
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--radius-lg);
  padding:var(--gap-md);
  box-shadow:0 8px 28px rgba(1,9,23,.07);
}
.contato-form-card .form-wrap{
  max-width:none;
  margin:0;
}

.selos-linha{
  display:flex;
  flex-wrap:wrap;
  gap:1.1rem;
  justify-content:center;
  margin-top:1.3rem;
  padding-top:1.3rem;
  border-top:1px solid var(--linha);
}
.selo-item{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.75rem;
  color:var(--texto-secundario);
}
.selo-item svg{
  width:20px;
  height:20px;
  flex-shrink:0;
  color:var(--cor-primaria);
}
/* End Proteja sua Invenção + Form */


/* === 06-servico-detalhe.css === */
/* ============================================================
   06-servico-detalhe.css
   Template das 9 páginas individuais de serviço (registro-de-
   marcas.html, registro-de-patentes.html etc.) — layout único,
   só a copy muda por página.

   A maior parte do layout reaproveita classes já existentes:
   .hero-interna (02-servicos.css) · .historia-bloco/.historia-img-wrap/
   .resposta-direta (03-quem-somos.css) · .depo-* (01-home.css) ·
   .cta-card/.btn-pill (02-servicos.css) · .form-wrap/.campo (01-home.css) ·
   .faq-* (01-home.css). O único componente novo é Outros Serviços.
============================================================ */

/* ========================================================
   01 — RISCOS DE NÃO REGISTRAR (substitui Depoimentos)
   Fica em seção .bg-escura, mesma posição que Depoimentos
   ocupava no template. Cards leves sobre fundo escuro, no
   mesmo padrão de .depo-card em .bg-escura (rgba branco 5%/
   borda 15%) — sem componente novo do zero.
======================================================== */
.riscos-titulo{
  max-width:680px;
  margin:0 auto var(--gap-md);
  text-align:center;
}

.riscos-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
@media(min-width:600px){
  .riscos-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:900px){
  .riscos-grid{ grid-template-columns:repeat(3,1fr); }
}

.risco-card{
  border:1px solid var(--linha);
  border-radius:var(--radius-md);
  padding:var(--gap-md);
  background:var(--branco);
}
.bg-escura .risco-card{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.15);
}

.risco-icone{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--bg-tint);
  color:var(--cor-cta);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:1rem;
}
.risco-icone svg{ width:22px; height:22px; }
.bg-escura .risco-icone{
  background:rgba(255,255,255,.08);
  color:var(--cor-destaque);
}

.risco-pergunta{
  font-family:var(--font-titulo);
  font-weight:600;
  font-size:1.05rem;
  line-height:1.35;
  margin:0 0 .6rem;
  color:var(--texto-principal);
}
.bg-escura .risco-pergunta{ color:var(--branco); }

.risco-resposta{
  font-size:.9rem;
  line-height:1.55;
  color:var(--texto-secundario);
  margin:0;
}
.bg-escura .risco-resposta{ color:var(--texto-claro-esmaecido); }
/* End Riscos de Não Registrar */

/* ========================================================
   01b — RISCOS DE NÃO REGISTRAR · variante "divergente" do
   reveal-view. Mesmo padrão dos Cards de Vantagem da Home e dos
   Depoimentos de Quem Somos: laterais entram se AFASTANDO do
   centro (inverso do sentido canônico global). .reveal-view-center
   é reaproveitado direto do 00-header-footer.css, sem sobrescrita.

   Escopado por .riscos-grid--divergente (aplicado só no HTML das
   páginas que usam essa variante — Registro de Marcas, Desenho
   Industrial, Direitos Autorais, Código de Barras) porque
   .riscos-grid também é usado com o sentido canônico (convergente,
   sem sobrescrita) em outras páginas de serviço — ex: Registro de
   Patentes, Indicações Geográficas.
======================================================== */
.riscos-grid--divergente .risco-card{
  position:relative;
  z-index:1;
}
.riscos-grid--divergente .reveal-view-center{
  z-index:2;
}
.riscos-grid--divergente .reveal-view-left{ translate:150px 0; }
.riscos-grid--divergente .reveal-view-right{ translate:-150px 0; }

@supports (animation-timeline: view()){
  .riscos-grid--divergente .reveal-view-left{ animation-name:riscos-diverge-left-anim; }
  .riscos-grid--divergente .reveal-view-right{ animation-name:riscos-diverge-right-anim; }
  @keyframes riscos-diverge-left-anim{
    0%{ opacity:0; translate:150px 0; }
    25%{ opacity:1; }
    100%{ translate:0 0; }
  }
  @keyframes riscos-diverge-right-anim{
    0%{ opacity:0; translate:-150px 0; }
    25%{ opacity:1; }
    100%{ translate:0 0; }
  }
}
/* End Riscos de Não Registrar — variante divergente */

/* ========================================================
   02 — OUTROS SERVIÇOS (cross-link, Variante A aprovada)
======================================================== */
.outros-titulo{
  text-align:center;
  max-width:640px;
  margin:0 auto var(--gap-md);
}

.outros-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
}
@media(min-width:700px){
  .outros-grid{
    grid-template-columns:repeat(4,1fr);
  }
}

.outro-card{
  display:block;
  text-align:center;
  padding:1.6rem 1rem;
  border:1px solid var(--linha);
  border-radius:var(--radius-lg);
  background:var(--branco);
  text-decoration:none;
  color:inherit;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.outro-card:hover{
  border-color:var(--cor-primaria);
  background:var(--bg-tint);
  transform:translateY(-3px);
}

.outro-icone{
  width:44px;
  height:44px;
  margin:0 auto .9rem;
  border-radius:50%;
  background:var(--bg-tint);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--cor-primaria);
  transition:background .18s ease, color .18s ease;
}
.outro-icone svg{
  width:22px;
  height:22px;
}
.outro-card:hover .outro-icone{
  background:var(--cor-primaria);
  color:var(--branco);
}

.outro-label{
  display:block;
  font-family:var(--font-corpo);
  font-size:.85rem;
  font-weight:700;
  color:var(--texto-principal);
  line-height:1.3;
}
/* End Outros Serviços */


/* === 07-politica-de-privacidade.css === */
/* ============================================================
   07-politica-de-privacidade.css — NMP
   Depende de 00-header-footer.css e 01-home.css (wrap/section/tag
   já globais, carregam antes na ordem alfabética do build).
   Página só usa fundo claro (bg-clara/bg-tint) — sem bg-escura,
   sem Hero/CTA/Depoimentos/FAQ/Form (página de referência
   jurídica, não de conversão — ver MD de auditoria aprovado).
============================================================ */

/* ========================================================
   01 — CONTEÚDO EM PROSA (bloco de texto jurídico)
======================================================== */
.conteudo-legal{
  max-width:760px;
  margin:0 auto;
}

.conteudo-legal h2{
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  margin-top:2.4em;
}
.conteudo-legal section:first-child h2,
.conteudo-legal > h2:first-child{
  margin-top:0;
}

.conteudo-legal p{
  color:var(--texto-secundario);
}

.conteudo-legal ul{
  margin:0 0 1em;
  padding-left:1.3rem;
  color:var(--texto-secundario);
}
.conteudo-legal ul li{
  line-height:1.6;
  margin-bottom:.6em;
}

/* --- Data de atualização, abaixo do H1 --- */
.legal-atualizacao{
  display:inline-block;
  font-size:.85rem;
  color:var(--texto-secundario);
  margin-top:-.4rem;
}

/* --- Callout de destaque (Opt-out) --- */
.callout-legal{
  background:var(--bg-tint);
  border:1px solid var(--linha);
  border-radius:var(--radius-lg);
  padding:1.6rem 1.8rem;
  max-width:760px;
  margin:0 auto;
}
.callout-legal h2{
  margin-top:0;
  font-size:clamp(1.15rem,2vw,1.4rem);
}
.callout-legal p{
  margin-bottom:0;
}
/* End Conteúdo em prosa */


/* === 07-popup-form.css === */
/* ============================================================
   07-popup-form.css
   Popup de captura (formulário padrão em modal) — injetado 1x
   via footer.html em todas as páginas. Abre pelos CTAs
   (a[href="#form-especialista"]) e pelo botão flutuante do
   WhatsApp, via 02-popup-form.js.

   Reaproveita .campo / .btn .btn-primario / .form-nota (01-home.css
   e 00-header-footer.css) — aqui só o que é exclusivo do modal.
   Cor sólida, sem gradiente (regra do site).
============================================================ */

html.popup-travado{
  overflow:hidden;
}

.popup-overlay{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.25rem;
  background:rgba(1,9,23,.82);
}
.popup-overlay.is-aberto{
  display:flex;
  animation:popup-fade .25s ease;
}

.popup-content{
  position:relative;
  width:100%;
  max-width:460px;
  max-height:100%;
  overflow-y:auto;
  background:var(--branco);
  border-radius:var(--radius-lg);
  padding:2.2rem 1.5rem 1.5rem;
  animation:popup-sobe .3s ease;
}

.popup-titulo{
  font-size:clamp(1.3rem,4.5vw,1.55rem);
  text-align:center;
  margin:0 0 1.4rem;
  padding:0 1.5rem;
  color:var(--texto-principal);
}

.popup-close{
  position:absolute;
  top:.7rem;
  right:.7rem;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
  border-radius:50%;
  color:var(--texto-secundario);
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.popup-close:hover,
.popup-close:focus-visible{
  background:var(--bg-tint);
  color:var(--cor-escura);
}

.popup-submit{
  width:100%;
}

@media(min-width:600px){
  .popup-content{
    padding:2.4rem 2.2rem 1.8rem;
  }
}

@keyframes popup-fade{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes popup-sobe{
  from{ opacity:0; translate:0 24px; }
  to{ opacity:1; translate:0 0; }
}
@media (prefers-reduced-motion: reduce){
  .popup-overlay.is-aberto,
  .popup-content{
    animation:none;
  }
}
/* End Popup de Captura */


/* === 08-erro-404.css === */
/* ============================================================
   08-erro-404.css — NMP
   Depende de 00-header-footer.css e 01-home.css (wrap/section/tag
   já globais). Página utilitária, fundo claro, sem Hero escuro,
   sem CTA de conversão, sem Depoimentos/FAQ/Form — só orientação
   de volta pro site (ver MD de auditoria/wireframe aprovado).
============================================================ */

/* ========================================================
   01 — SEÇÃO 404
======================================================== */
.erro-404{
  min-height:60vh;
  display:flex;
  align-items:center;
}
.erro-404 .wrap{
  max-width:560px;
  text-align:center;
}

.erro-404-ilustracao{
  width:120px;
  height:120px;
  margin:0 auto 1.6rem;
}

.erro-404-codigo{
  display:block;
  font-family:var(--font-titulo);
  font-weight:600;
  font-size:clamp(2.6rem,7vw,3.6rem);
  color:var(--cor-primaria);
  line-height:1;
  margin-bottom:.3rem;
}

.erro-404 h1{
  font-size:clamp(1.4rem,3vw,1.9rem);
}

.erro-404 p{
  max-width:440px;
  margin-left:auto;
  margin-right:auto;
}

.erro-404-acoes{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-top:1.8rem;
}
/* .btn-secundario nasceu pra fundo escuro (branco sobre transparente)
   — nesta página o fundo é claro, então sobrescreve pra usar a
   cor primária no lugar do branco. */
.erro-404 .btn-secundario{
  color:var(--cor-primaria);
  border-color:var(--cor-primaria);
}
.erro-404 .btn-secundario:hover,
.erro-404 .btn-secundario:focus-visible{
  background:var(--cor-primaria);
  color:var(--branco);
}

.erro-404-links{
  margin-top:2.4rem;
  padding-top:1.8rem;
  border-top:1px solid var(--linha);
}
.erro-404-links p{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-weight:700;
  color:var(--texto-secundario);
  margin-bottom:.9rem;
}
.erro-404-links ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem 1.4rem;
}
.erro-404-links a{
  color:var(--cor-primaria);
  text-decoration:none;
  font-weight:600;
  font-size:.92rem;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease;
}
.erro-404-links a:hover{
  border-color:var(--cor-primaria);
}
/* End Seção 404 */