/*
Theme Name: Filadelfia
Theme URI: https://contabilidadefiladelfia.com.br
Author: 2RP Agencia
Description: Tema sob medida da Filadelfia Servicos Contabeis.
Version: 1.0
Text Domain: filadelfia
*/

/* ============ TOKENS DA MARCA ============ */
:root{
  --azul-escuro:#0A3D62;
  --azul-medio:#1E6091;
  --azul-claro:#89C2D9;
  --cinza-1:#F2F2F2;
  --cinza-2:#D9D9D9;
  --preto:#000000;
  --texto:#1c2b36;
  --texto-suave:#5b6b78;
  --branco:#ffffff;
  --radius:14px;
  --radius-sm:8px;
  --sombra:0 10px 30px rgba(10,61,98,.10);
  --sombra-forte:0 18px 45px rgba(10,61,98,.18);
  --largura:1780px;
  --transicao:.25s ease;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:16px;
  font-weight:300;
  line-height:1.75;
  color:var(--texto);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  /* clip (e nao hidden) corta o transbordo horizontal SEM criar
     contexto de rolagem — hidden aqui quebrava o position:sticky */
  overflow-x:clip;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Open Sans',system-ui,Arial,sans-serif;
  font-weight:600;
  color:var(--azul-escuro);
  line-height:1.2;
  margin:0 0 .6em;
  letter-spacing:-.4px;
}
h1{font-size:clamp(2rem,4.4vw,3.25rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem)}
p{margin:0 0 1.1em}
a{color:var(--azul-medio);text-decoration:none;transition:color var(--transicao)}
a:hover{color:var(--azul-escuro)}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}

.container{width:100%;max-width:var(--largura);margin:0 auto;padding:0 clamp(20px,2.2vw,34px)}
.secao{padding:clamp(48px,7vw,90px) 0}
.secao--cinza{background:var(--cinza-1)}
.secao--azul{background:var(--azul-escuro);color:#dce9f2}
.secao--azul h2,.secao--azul h3{color:#fff}
.centro{text-align:center}
.olho{
  display:inline-block;font-family:'Open Sans',sans-serif;font-weight:500;
  font-size:.78rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--azul-medio);margin-bottom:10px;
}
.secao--azul .olho{color:var(--azul-claro)}
.sub{color:var(--texto-suave);max-width:720px;margin-inline:auto;font-size:1.05rem}
.secao--azul .sub{color:#b9d2e4}

/* ============ BOTOES ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Open Sans',sans-serif;font-weight:500;font-size:.95rem;
  padding:14px 28px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:all var(--transicao);text-align:center;
}
.btn svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn--primario{background:var(--azul-medio);color:#fff}
.btn--primario:hover{background:var(--azul-escuro);color:#fff;transform:translateY(-2px);box-shadow:var(--sombra-forte)}
.btn--zap{background:#25D366;color:#0b3d20}
.btn--zap:hover{background:#1ebe5a;color:#052e14;transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,211,102,.35)}
/* CTA grande do banner */
.btn--grande{
  padding:20px 34px;font-size:.98rem;letter-spacing:.6px;border-radius:12px;
  font-family:'Open Sans',sans-serif;font-weight:600;
}
.btn--grande svg{width:19px;height:19px}
.btn--zap-forte svg:last-child{width:15px;height:15px;transition:transform var(--transicao)}
.btn--zap-forte:hover svg:last-child{transform:translateX(4px)}
.btn--zap-forte{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(135deg,#3fd97a 0%,#22c55e 55%,#16a34a 100%);
  box-shadow:0 12px 30px rgba(34,197,94,.35);
}
.btn--zap-forte:hover{
  color:#fff;transform:translateY(-2px);
  box-shadow:0 18px 40px rgba(34,197,94,.5);
}
.btn--zap-forte::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);
  background-size:250% 100%;background-position:200% 0;
  animation:varreBtn 3.6s ease-in-out infinite;pointer-events:none;
}
@keyframes varreBtn{
  0%{background-position:200% 0}
  55%{background-position:-120% 0}
  100%{background-position:-120% 0}
}
/* botão vazado azul */
.btn--vazado{
  background:transparent;color:#fff;border-color:rgba(120,180,235,.55);
}
.btn--vazado svg{width:16px;height:16px;transition:transform var(--transicao)}
.btn--vazado:hover{
  background:rgba(80,160,225,.14);color:#fff;border-color:#4fa8e8;transform:translateY(-2px);
}
.btn--vazado:hover svg{transform:translateX(4px)}
/* botão secundário discreto sobre fundo escuro */
.btn--fantasma{
  background:rgba(255,255,255,.08);color:#dbe9f3;border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
}
.btn--fantasma:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.5);transform:translateY(-2px)}

/* CTA principal da marca — azul, como no briefing (o verde brigava com a paleta) */
.btn--marca{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(105deg,#1E6091 0%,#2b7ab5 50%,#1E6091 100%);
  box-shadow:0 12px 30px rgba(30,96,145,.42);
}
.btn--marca::after{
  content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);animation:varre 4.2s ease-in-out infinite;
}
@keyframes varre{0%{left:-140%}55%{left:150%}100%{left:150%}}
.btn--marca:hover{color:#fff;transform:translateY(-3px);box-shadow:0 18px 40px rgba(30,96,145,.55)}
.btn--claro{background:#fff;color:var(--azul-escuro)}
.btn--claro:hover{background:var(--azul-claro);color:var(--azul-escuro);transform:translateY(-2px)}
.btn--contorno{background:transparent;color:var(--azul-escuro);border-color:var(--azul-escuro)}
.btn--contorno:hover{background:var(--azul-escuro);color:#fff}
.secao--azul .btn--contorno{color:#fff;border-color:rgba(255,255,255,.6)}
.secao--azul .btn--contorno:hover{background:#fff;color:var(--azul-escuro)}

/* ============ TOPO (barra unica escura) ============ */
.site-header{
  position:sticky;top:0;z-index:900;
  background:#000e26;
  border-bottom:1px solid rgba(120,175,225,.10);
}
/* na home o topo fica transparente por cima do banner */
.home .site-header{
  position:absolute;top:0;left:0;right:0;
  background:transparent;border-bottom:0;
}
.header__in{
  display:flex;align-items:center;gap:26px;padding:22px clamp(20px,2.2vw,34px);position:relative;
}
.marca{flex:none}
.marca img{height:56px;width:auto}

/* menu no centro */
.nav-principal{flex:1;display:flex;justify-content:center;background:transparent}
.nav-principal ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;
  justify-content:center;align-items:center;
}
/* flex:0 0 auto impede o item de encolher abaixo do proprio texto.
   Sem isso, com white-space:nowrap, o texto vazava da caixa e caia por
   cima do item vizinho (visivel a partir de ~1500px para baixo). */
.nav-principal > ul > li{position:relative;flex:0 0 auto}
.nav-principal li{position:relative}
.nav-principal a{
  display:block;color:#c9d9e8;font-family:'Open Sans',sans-serif;font-weight:400;
  font-size:.84rem;letter-spacing:.4px;text-transform:uppercase;padding:11px 11px;
  white-space:nowrap;transition:color var(--transicao);
}
.nav-principal a:hover{color:#fff}

/* sublinhado azul do item ativo */
.nav-principal > ul > li > a{position:relative}
.nav-principal > ul > li > a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:0;height:2px;border-radius:2px;
  background:#2f8fe0;transform:scaleX(0);transform-origin:center;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.nav-principal > ul > li > a:hover::after,
.nav-principal > ul > li.current-menu-item > a::after,
.nav-principal > ul > li.current-menu-parent > a::after,
.nav-principal > ul > li.current_page_item > a::after{transform:scaleX(1)}
.nav-principal > ul > li.current-menu-item > a,
.nav-principal > ul > li.current_page_item > a{color:#4fa8e8}

/* submenu */
.nav-principal .sub-menu{
  position:absolute;top:100%;left:0;min-width:280px;background:#0b2a47;
  box-shadow:0 18px 40px rgba(0,0,0,.4);border-radius:0 0 10px 10px;
  display:block;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:all var(--transicao);flex-direction:column;padding:8px 0;z-index:20;
  border:1px solid rgba(120,175,225,.14);border-top:0;
}
.nav-principal li:hover>.sub-menu,.nav-principal li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-principal .sub-menu a{
  color:#c9d9e8;text-transform:none;letter-spacing:0;font-size:.9rem;
  padding:10px 20px;border-left:3px solid transparent;
}
.nav-principal .sub-menu a:hover{background:rgba(47,143,224,.14);color:#fff;border-left-color:#2f8fe0}
.nav-principal .sub-menu a::after{display:none}

/* botao vazado do topo */
.header__cta{
  flex:none;margin-left:auto;white-space:nowrap;
  background:transparent;color:#fff;border:1px solid rgba(120,180,235,.55);
  border-radius:999px;padding:14px 26px;
  font-family:'Open Sans',sans-serif;font-weight:500;font-size:.84rem;letter-spacing:.8px;
}
.header__cta svg{width:19px;height:19px;fill:currentColor}
.header__cta:hover{
  color:#fff;background:rgba(47,143,224,.16);border-color:#2f8fe0;transform:translateY(-1px);
}

/* menu mobile */
.abre-menu{display:none;background:var(--azul-escuro);border:0;border-radius:var(--radius-sm);width:44px;height:44px;cursor:pointer;padding:0}
.abre-menu span{display:block;width:20px;height:2px;background:#fff;margin:4px auto;transition:var(--transicao)}
.abre-menu.ativo span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.abre-menu.ativo span:nth-child(2){opacity:0}
.abre-menu.ativo span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* =========================================================
   BANNER PRINCIPAL - arte do cliente (assets/img/banner.jpg)
   ========================================================= */
.palco{
  position:relative;overflow:hidden;color:#fff;isolation:isolate;
  background-color:#000e26;
  background-image:url('assets/img/banner.webp');
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
  padding:clamp(110px,10vw,150px) 0 clamp(30px,3.4vw,46px);
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
}

/* veu para o texto ler bem sobre a arte */
.palco__veu{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  /* o banner agora e FOTO (clara), nao arte escura: o veu precisa ser
     bem mais forte a esquerda para o texto branco continuar legivel.
     Medido: brilho da area do texto 37/255, contraste 6,2:1. */
  background:
    linear-gradient(180deg, #000e26 0%, rgba(0,14,38,.90) 70px, rgba(0,14,38,.55) 130px, transparent 210px),
    linear-gradient(96deg,
      rgba(2,16,40,.97) 0%,
      rgba(2,16,40,.93) 18%,
      rgba(2,16,40,.80) 34%,
      rgba(2,16,40,.45) 48%,
      rgba(2,16,40,.15) 58%,
      transparent 66%);
}

.palco__in{
  position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,620px);
  align-items:center;
}
.palco__texto{min-width:0}

/* selo */
.hero__selo{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  padding:10px 22px;border-radius:999px;font-size:.92rem;font-weight:400;
  margin-bottom:26px;backdrop-filter:blur(6px);color:#e6f0fa;
}
.hero__selo svg{width:16px;height:16px;fill:#fff;flex:none}
.hero__selo .ico-google{width:21px;height:21px;fill:none;margin-right:2px}
.hero__selo b{font-weight:700;color:#fff;font-size:1rem}
.selo__estrelas{color:#FBBC05;letter-spacing:1px;font-size:1.05rem;margin:0 3px}
.selo__sep{color:#6f93b3;margin:0 4px}

/* titulo */
.palco__olho{
  display:block;font-family:'Open Sans',sans-serif;font-weight:500;
  font-size:.88rem;letter-spacing:6px;text-transform:uppercase;
  color:#3d9be0;margin-bottom:18px;
}
.palco__texto h1{
  color:#fff;margin-bottom:16px;letter-spacing:0;line-height:1.04;text-transform:uppercase;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.palco__resto{
  display:block;font-size:clamp(2.1rem,4.35vw,4.6rem);
  font-weight:800;line-height:1.05;color:#fff;max-width:16ch;letter-spacing:-2px;
}
.palco__big{
  display:block;margin-top:0;font-size:clamp(2.2rem,4.55vw,4.8rem);line-height:1.05;
  color:#2f8fe0;font-weight:800;letter-spacing:-2px;
}

.palco__linha{
  color:#dbe9f5;font-size:clamp(1.05rem,1.42vw,1.32rem);max-width:none;line-height:1.6;
  margin:22px 0 34px;text-transform:none;font-weight:300;
}
.palco__linha strong{color:#2f8fe0;font-weight:500}

.hero__acoes{display:flex;gap:16px;flex-wrap:wrap}
.palco__nota{
  display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-top:18px;color:#a9c6dd;font-size:.9rem;
}
.palco__nota svg{width:17px;height:17px;fill:#4fa8e8;flex:none}

/* tres garantias abaixo dos botoes */
.palco__garantias{
  list-style:none;margin:26px 0 0;padding:0;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
}
.palco__garantias li{
  display:flex;align-items:center;gap:11px;position:relative;
  color:#c3d8e9;font-size:.92rem;font-weight:300;line-height:1.35;
}
.palco__garantias li + li::before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:4px;height:4px;border-radius:50%;background:#3a6b91;
}
.gar__ico{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(47,143,224,.14);border:1px solid rgba(47,143,224,.35);
}
.gar__ico svg{width:18px;height:18px;fill:#4fa8e8}

/* cards de numeros */
.placar{
  position:relative;z-index:4;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin:clamp(26px,3vw,42px) 0 0;
}
.placar__item{
  position:relative;display:flex;align-items:center;gap:20px;
  background:linear-gradient(155deg, rgba(10,38,74,.66), rgba(5,22,44,.58));
  border:1px solid rgba(70,150,220,.30);border-radius:16px;
  padding:22px 26px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 24px rgba(47,143,224,.10) inset, 0 10px 30px rgba(2,12,26,.4);
}
.placar__item::after{
  content:"";position:absolute;left:14%;right:14%;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#3d9be0,transparent);opacity:.85;
}
.placar__ico{
  width:80px;height:80px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,#3b8ede 0%,#1f6fc0 55%,#175da6 100%);
  box-shadow:0 8px 20px rgba(31,111,192,.42);
}
.placar__ico svg{width:42px;height:42px;fill:#fff}
.placar__item .ind__num{
  font-family:'Open Sans',sans-serif;font-weight:600;
  font-size:clamp(1.7rem,2.4vw,2.05rem);color:#fff;line-height:1;
}
.placar__item .ind__num span:first-child{color:#fff}
.placar__item .ind__txt{font-size:.98rem;color:#dbe9f5;margin-top:5px;font-weight:400}
.placar__item .ind__desc{font-size:.82rem;color:#7ba7c8;margin-top:3px}

/* indicador de rolagem */
.palco__rolar{
  position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:11px;
  margin-top:clamp(30px,3.6vw,52px);color:#8db2cd;font-size:1rem;transition:color var(--transicao);
}
.palco__rolar:hover{color:#fff}
.palco__rolar svg{width:20px;height:20px;fill:currentColor;animation:pulaMouse 2.2s ease-in-out infinite}
@keyframes pulaMouse{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* entrada em cascata */
/* cascata do banner: antes terminava em 1,72s — agora em 0,73s */
@keyframes sobeEntra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.palco__texto > *{animation:sobeEntra .45s cubic-bezier(.2,.75,.3,1) both}
.palco__texto > .hero__selo{animation-delay:0s}
.palco__texto > h1{animation-delay:.07s}
.palco__texto > .palco__linha{animation-delay:.14s}
.palco__texto > .hero__acoes{animation-delay:.2s}
.palco__texto > .palco__garantias{animation-delay:.24s}
.palco__texto > .palco__nota{animation-delay:.24s}
.placar__item{animation:sobeEntra .45s cubic-bezier(.2,.75,.3,1) both}
.placar__item:nth-child(1){animation-delay:.2s}
.placar__item:nth-child(2){animation-delay:.24s}
.placar__item:nth-child(3){animation-delay:.28s}
@media (prefers-reduced-motion:reduce){
  .palco__texto > *,.placar__item{animation:none}
}

/* tilt 3D nos cards de servico */
.tilt{transform-style:preserve-3d;will-change:transform;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;}
.tilt.tilt--ativo{transition:transform .08s linear}
.brilho{position:relative;overflow:hidden}
.brilho::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(180px circle at var(--gx,50%) var(--gy,50%), rgba(30,96,145,.16), transparent 62%);
}
.brilho:hover::after{opacity:1}

/* marca d agua do icone */
.secao{position:relative}
.marca-dagua{position:absolute;right:-60px;top:50%;transform:translateY(-50%);
  width:min(420px,42vw);opacity:.045;pointer-events:none;z-index:0;}
.secao--azul .marca-dagua{opacity:.07}
.secao > .container{position:relative;z-index:1}

/* ===== BANNER responsivo ===== */
@media (min-width:1025px) and (max-height:1000px){
  .palco{min-height:100vh;padding-top:clamp(100px,9vw,130px)}
  .palco__big{font-size:clamp(2.4rem,4.1vw,4rem)}
  .palco__resto{font-size:clamp(2.3rem,3.9vw,3.8rem)}
  .palco__linha{margin:18px 0 26px;font-size:1.05rem}
  .btn--grande{padding:16px 28px;font-size:.96rem}
  .placar__item{padding:16px 20px}
  .placar__ico{width:50px;height:50px}
}
@media (max-width:1099px){
  .palco{
    background-position:72% top;
    /* o cabecalho da home fica sobreposto (position:absolute) e tem ~100px
       de altura no celular: o topo precisa liberar esse espaco */
    min-height:0;padding:120px 0 30px;
  }
  .palco__veu{
    background:linear-gradient(180deg, rgba(0,14,38,.86) 0%, rgba(0,18,46,.82) 45%, rgba(0,14,38,.94) 100%);
  }
  .palco__in{grid-template-columns:1fr}
  .palco__resto{max-width:none}
  .placar{grid-template-columns:1fr;gap:12px}
}
@media (max-width:560px){
  /* no celular o selo nao cabe em 1 linha: a cidade sai (ja aparece no
     rodape e no contato) para nao quebrar em 2 linhas */
  .selo__cidade,.selo__sep{display:none}
  .hero__selo{padding:9px 16px;font-size:.84rem;white-space:nowrap}
  .hero__selo b{font-size:.92rem}
  .selo__estrelas{font-size:.95rem;letter-spacing:0}
  .palco__garantias{flex-direction:column;align-items:flex-start;gap:14px}
  .palco__garantias li + li::before{display:none}
  .palco__olho{letter-spacing:3px;font-size:.74rem}
  .placar__item{padding:14px 16px;gap:14px}
  .placar__ico{width:46px;height:46px}
  .placar__ico svg{width:22px;height:22px}
  .hero__acoes .btn{width:100%;justify-content:center}
}

/* ============ HERO ============ */
.hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(circle at 82% 20%,rgba(137,194,217,.28) 0%,transparent 45%),
    linear-gradient(135deg,#0A3D62 0%,#134f7d 55%,#1E6091 100%);
  padding:clamp(56px,8vw,100px) 0;
}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 70% 45%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 70% 45%,#000 0%,transparent 70%);
}
.hero .container{position:relative;z-index:2}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{color:#fff;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--azul-claro)}
.hero__texto{font-size:1.1rem;color:#cfe2ef;max-width:560px}
.hero__acoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero__selo{
  display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);padding:9px 20px;border-radius:999px;
  font-size:.88rem;font-weight:500;margin-bottom:22px;backdrop-filter:blur(6px);
  color:#dbeaf5;
}
.hero__selo b{color:var(--azul-claro)}

/* indicadores */
.indicadores{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.ind{
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);padding:26px 22px;backdrop-filter:blur(6px);
  transition:transform var(--transicao),background var(--transicao);
}
.ind:hover{transform:translateY(-6px);background:rgba(255,255,255,.16)}
.ind__num{font-family:'Open Sans',sans-serif;font-weight:600;font-size:clamp(1.9rem,3.4vw,2.6rem);color:#fff;line-height:1}
.ind__num span{color:var(--azul-claro)}
.ind__txt{font-size:.9rem;color:#c9dfee;margin-top:8px;line-height:1.45}

.secao--compacta{padding:clamp(30px,4vw,48px) 0}

/* ============ FAIXA INSTITUCIONAL ============ */
.faixa{
  position:relative;overflow:hidden;border-radius:var(--radius);color:#fff;
  background:linear-gradient(110deg,#F2F2F2 0%,#F2F2F2 38%,#134f7d 38%,#0A3D62 72%,#1E6091 100%);
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:20px;
  padding:clamp(26px,4vw,44px);box-shadow:var(--sombra);
}
.faixa::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:radial-gradient(rgba(255,255,255,.6) 1.4px,transparent 1.4px);
  background-size:16px 16px;
  -webkit-mask-image:linear-gradient(90deg,transparent 55%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 55%,#000 100%);
}
.faixa__texto h2{color:var(--azul-escuro);margin:0;font-size:clamp(1.25rem,2.3vw,1.8rem);line-height:1.3;max-width:22ch}
.faixa__icones{display:flex;gap:14px;justify-content:flex-end;position:relative;z-index:2;flex-wrap:wrap}
.faixa__icones span{
  width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,255,255,.55);
  display:grid;place-items:center;background:rgba(255,255,255,.08);
}
.faixa__icones svg{width:26px;height:26px;fill:#fff}

/* faixa de fechamento */
.faixa-fim{
  background:linear-gradient(110deg,#F2F2F2 0%,#e8eef3 30%,#134f7d 62%,#0A3D62 100%);
  padding:clamp(40px,6vw,68px) 0;text-align:center;
}
.faixa-fim h2{color:var(--azul-escuro);max-width:24ch;margin:0 auto 26px}

/* ============ CARDS DE SERVICO ============ */
.grid-servicos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:40px}
.card-servico{
  background:#fff;border:1px solid var(--cinza-2);border-radius:var(--radius);
  padding:30px 26px;transition:all var(--transicao);position:relative;overflow:hidden;
  display:flex;flex-direction:column;
}
.card-servico::before{
  content:"";position:absolute;left:0;top:0;height:4px;width:0;background:var(--azul-medio);
  transition:width .35s ease;
}
.card-servico:hover{transform:translateY(-8px);box-shadow:var(--sombra-forte);border-color:transparent}
.card-servico:hover::before{width:100%}
.card-servico__icone{
  width:54px;height:54px;border-radius:14px;background:var(--cinza-1);
  display:grid;place-items:center;margin-bottom:18px;transition:background var(--transicao);
}
.card-servico__icone svg{width:26px;height:26px;fill:var(--azul-medio);transition:fill var(--transicao)}
.card-servico:hover .card-servico__icone{background:var(--azul-escuro)}
.card-servico:hover .card-servico__icone svg{fill:#fff}
.card-servico h3{margin-bottom:10px;font-size:1.12rem}
.card-servico p{color:var(--texto-suave);font-size:.93rem;margin-bottom:16px}
.card-servico .mais{margin-top:auto;font-weight:600;font-size:.88rem;font-family:'Open Sans',sans-serif}
.card-servico .mais::after{content:" →";transition:margin var(--transicao)}
.card-servico:hover .mais::after{margin-left:5px}

/* ============ BANNER INSTITUCIONAL ============ */
.institucional{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.institucional__midia{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--sombra-forte);min-height:340px;background:linear-gradient(135deg,#0A3D62,#1E6091)}
.institucional__midia img{width:100%;height:100%;object-fit:cover}
.institucional__anos{
  position:absolute;right:-8px;bottom:22px;background:var(--azul-claro);color:var(--azul-escuro);
  font-family:'Open Sans',sans-serif;font-weight:600;padding:16px 26px;border-radius:var(--radius-sm);
  box-shadow:var(--sombra-forte);line-height:1.1;text-align:center;
}
.institucional__anos b{display:block;font-size:2rem}
.lista-check{list-style:none;padding:0;margin:22px 0 28px}
.lista-check li{position:relative;padding-left:34px;margin-bottom:12px;color:var(--texto-suave)}
.lista-check li::before{
  content:"";position:absolute;left:0;top:5px;width:20px;height:20px;border-radius:50%;
  background:var(--azul-medio) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ============ GOOGLE 5,0 ============ */
.google-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--sombra);padding:34px;
  display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
}
.google-card__nota{text-align:center;padding-right:28px;border-right:1px solid var(--cinza-2)}
.google-card__nota b{display:block;font-family:'Open Sans',sans-serif;font-weight:600;font-size:3rem;color:var(--azul-escuro);line-height:1}
.estrelas{color:#FBBC05;font-size:1.15rem;letter-spacing:2px}
.google-card small{color:var(--texto-suave);font-size:.85rem}

/* ============ DEPOIMENTOS ============ */
.grid-depoimentos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:40px}
.depoimento{
  background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--sombra);
  display:flex;flex-direction:column;transition:transform var(--transicao);
}
.depoimento:hover{transform:translateY(-6px)}
.depoimento__aspas{font-family:Georgia,serif;font-size:3.4rem;color:var(--azul-claro);line-height:.6;height:26px}
.depoimento p{color:var(--texto-suave);font-size:.95rem;flex:1}
.depoimento__autor{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--cinza-2)}
.depoimento__foto{
  width:48px;height:48px;border-radius:50%;background:var(--azul-escuro);color:#fff;
  display:grid;place-items:center;font-family:'Open Sans',sans-serif;font-weight:600;flex:none;
}
.depoimento__autor b{display:block;color:var(--azul-escuro);font-size:.95rem}
.depoimento__autor small{color:var(--texto-suave);font-size:.82rem}

/* depoimento em destaque */
.destaque{
  max-width:880px;margin:44px auto 0;background:#fff;border-radius:var(--radius);
  box-shadow:var(--sombra-forte);padding:clamp(26px,4vw,44px);position:relative;
  border-top:5px solid var(--azul-medio);
}
.destaque__cabeca{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--cinza-2);margin-bottom:24px;
}
.destaque__perfil{display:flex;align-items:center;gap:14px}
.destaque__perfil b{display:block;color:var(--azul-escuro);font-size:1.05rem}
.destaque__perfil small{color:var(--texto-suave);font-size:.83rem}
.destaque__nota{text-align:right}
.destaque__nota .estrelas{display:block;font-size:1.2rem}
.destaque__nota small{color:var(--texto-suave);font-size:.78rem}
.destaque__texto{position:relative}
.destaque__aspas{
  position:absolute;left:-6px;top:-26px;font-family:Georgia,serif;font-size:5rem;
  color:var(--azul-claro);opacity:.5;line-height:1;pointer-events:none;
}
.destaque__texto p{color:var(--texto-suave);font-size:1rem;position:relative}
.destaque__texto p strong{color:var(--azul-escuro)}
.destaque__mais{margin-top:6px}
.destaque__mais summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-family:'Open Sans',sans-serif;font-weight:500;font-size:.9rem;color:var(--azul-medio);
  padding:10px 0;transition:color var(--transicao);
}
.destaque__mais summary::-webkit-details-marker{display:none}
.destaque__mais summary::after{content:"▾";transition:transform var(--transicao)}
.destaque__mais summary:hover{color:var(--azul-escuro)}
.destaque__mais[open] summary::after{transform:rotate(180deg)}
.destaque__resto{
  border-left:3px solid var(--azul-claro);padding-left:20px;margin-top:8px;
  animation:abre .4s ease;
}
@keyframes abre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .destaque__cabeca{flex-direction:column;align-items:flex-start}
  .destaque__nota{text-align:left}
}

/* ============ CALENDARIO FISCAL ============ */
.calendario{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.calendario__lista{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius);overflow:hidden}
.calendario__lista .linha{display:flex;gap:18px;align-items:center;padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.10)}
.calendario__lista .linha:last-child{border-bottom:0}
.calendario__dia{
  background:var(--azul-claro);color:var(--azul-escuro);font-family:'Open Sans',sans-serif;font-weight:600;
  min-width:56px;text-align:center;border-radius:var(--radius-sm);padding:8px 6px;line-height:1.05;flex:none;
}
.calendario__dia small{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:1px;font-weight:500}
.calendario__obg b{display:block;color:#fff;font-size:.98rem}
.calendario__obg small{color:#b9d2e4;font-size:.83rem}

/* card do calendario na home */
.calendario-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  background:var(--cinza-1);border-radius:var(--radius);padding:28px 32px;margin-top:26px;
}
.calendario-card__data{
  border:3px solid var(--azul-escuro);border-radius:var(--radius-sm);
  padding:12px 18px;text-align:center;line-height:1.1;flex:none;background:#fff;
}
.calendario-card__data span{display:block;font-family:'Open Sans',sans-serif;font-weight:600;font-size:1.5rem;color:var(--azul-escuro)}
.calendario-card__data b{display:block;font-size:.9rem;color:var(--azul-medio)}
.calendario-card__txt h3{margin-bottom:4px}
.calendario-card__txt p{margin:0;color:var(--texto-suave);font-size:.95rem}
.calendario-card__selo{
  display:inline-block;margin-top:10px;font-size:.78rem;font-weight:500;letter-spacing:.5px;
  color:var(--azul-medio);background:#fff;border-radius:999px;padding:5px 14px;
}

/* pagina do calendario fiscal */
.cal-topo{max-width:820px;margin-bottom:34px}
.cal-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.cal-arte{border-radius:var(--radius);overflow:hidden;box-shadow:var(--sombra-forte);background:var(--cinza-1)}
.cal-arte img{width:100%}
.cal-vazio{
  aspect-ratio:3/4;display:grid;place-content:center;justify-items:center;gap:12px;
  border:2px dashed var(--cinza-2);border-radius:var(--radius);color:var(--texto-suave);text-align:center;padding:20px;
}
.cal-vazio svg{width:44px;height:44px;fill:var(--cinza-2)}
.cal-aviso{
  background:var(--cinza-1);border-left:4px solid var(--azul-medio);border-radius:var(--radius-sm);
  padding:14px 18px;margin-top:22px;font-size:.9rem;color:var(--texto-suave);
}
@media (max-width:860px){.cal-grid{grid-template-columns:1fr}}

/* ============ LINHA DO TEMPO (Sobre nós) ============ */
.linha-tempo{position:relative;margin:30px 0 40px;padding-left:8px}
.linha-tempo::before{
  content:"";position:absolute;left:36px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--azul-medio),var(--azul-claro));
}
.marco{position:relative;display:grid;grid-template-columns:78px 1fr;gap:22px;margin-bottom:26px;align-items:start}
.marco:last-child{margin-bottom:0}
.marco__ano{
  position:relative;z-index:2;background:var(--azul-escuro);color:#fff;
  font-family:'Open Sans',sans-serif;font-weight:600;font-size:.88rem;
  border-radius:999px;padding:8px 0;text-align:center;
  box-shadow:0 0 0 5px #fff;
}
.marco__txt{background:var(--cinza-1);border-radius:var(--radius-sm);padding:16px 20px;transition:all var(--transicao)}
.marco:hover .marco__txt{background:#fff;box-shadow:var(--sombra)}
.marco__txt b{display:block;color:var(--azul-escuro);font-family:'Open Sans',sans-serif;margin-bottom:4px}
.marco__txt p{margin:0;color:var(--texto-suave);font-size:.93rem}
@media (max-width:560px){
  .linha-tempo::before{left:26px}
  .marco{grid-template-columns:58px 1fr;gap:14px}
  .marco__ano{font-size:.78rem;padding:7px 0}
}

/* ============ TABELA SIMPLES NACIONAL ============ */
.formula{
  background:var(--azul-escuro);color:#cfe2ef;border-radius:var(--radius);
  padding:26px 30px;margin-bottom:34px;
}
.formula h3{color:#fff;margin-bottom:12px}
/* mesmo tamanho da linha "÷ Receita dos últimos 12 meses" (.formula__conta span) */
.formula p{margin:0 0 8px;font-size:.9rem;line-height:1.6}
.formula__conta{
  font-family:'Open Sans',sans-serif;font-weight:500;color:#fff;font-size:1.02rem;
  border-left:4px solid var(--azul-claro);padding:10px 0 10px 16px;margin-bottom:14px !important;
}
.formula__conta span{color:var(--azul-claro);font-size:.9rem}

.atalhos{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.atalhos a{
  background:var(--cinza-1);border:1px solid var(--cinza-2);border-radius:999px;
  padding:9px 18px;font-size:.85rem;font-weight:400;color:var(--azul-escuro);
  transition:all var(--transicao);
}
.atalhos a:hover{background:var(--azul-escuro);border-color:var(--azul-escuro);color:#fff}

.anexo{margin-bottom:40px;scroll-margin-top:120px}
.anexo__cabeca h3{margin-bottom:4px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.anexo__cabeca h3 span{
  background:var(--azul-claro);color:var(--azul-escuro);border-radius:999px;
  padding:3px 13px;font-size:.72rem;letter-spacing:1px;text-transform:uppercase;
}
.anexo__cabeca p{color:var(--texto-suave);font-size:.92rem;margin-bottom:16px}

.tabela-rolagem{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--sombra)}
.tabela{width:100%;border-collapse:collapse;background:#fff;min-width:620px;font-size:.93rem}
.tabela th{
  background:var(--azul-escuro);color:#fff;text-align:left;padding:14px 18px;
  font-weight:500;font-family:'Open Sans',sans-serif;font-size:.82rem;letter-spacing:.4px;text-transform:uppercase;
  white-space:nowrap;
}
.tabela td{padding:13px 18px;border-bottom:1px solid var(--cinza-2);color:var(--texto-suave)}
.tabela tbody tr:last-child td{border-bottom:0}
.tabela tbody tr:nth-child(even){background:#fafbfc}
.tabela tbody tr:hover{background:#eef4f9}
.tabela .destaque-cel{color:var(--azul-escuro);font-weight:600}

@media (max-width:640px){
  .tabela{min-width:0;font-size:.9rem}
  .tabela thead{position:absolute;left:-9999px}
  .tabela tr{display:block;border-bottom:2px solid var(--cinza-2);padding:12px 0}
  .tabela tbody tr:nth-child(even){background:transparent}
  .tabela td{display:flex;justify-content:space-between;gap:16px;border:0;padding:6px 18px;text-align:right}
  .tabela td::before{content:attr(data-rotulo);font-weight:700;color:var(--azul-escuro);text-align:left;flex:none}
}

/* logo do Google no card de avaliacoes */
.google-g svg{width:44px;height:44px;margin:0 auto 6px}

/* checkboxes de servicos no formulario */
.opcoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;margin-top:4px}
/* altura minima que ja cabe rotulo de 2 linhas: assim todas as caixas
   (e todas as linhas do grid) ficam exatamente do mesmo tamanho */
.opcao{
  display:flex;align-items:center;gap:9px;background:var(--cinza-1);border:1px solid transparent;
  border-radius:var(--radius-sm);padding:8px 12px;font-size:.88rem;cursor:pointer;
  min-height:50px;line-height:1.15;
  transition:all var(--transicao);
}
.opcao:hover{border-color:var(--azul-claro);background:#fff}
.opcao input{accent-color:var(--azul-medio);flex:none}
.opcao:has(input:checked){background:#fff;border-color:var(--azul-medio);box-shadow:0 0 0 2px rgba(30,96,145,.12)}

/* avisos de formulario */
.aviso{border-radius:var(--radius);padding:16px 22px;margin-bottom:8px}
.aviso--ok{background:#e6f7ed;border:1px solid #9fdcb8}
.aviso--erro{background:#fdecea;border:1px solid #f5b5ae}

/* ============ CTA FINAL ============ */
.cta-final{
  background:linear-gradient(135deg,var(--azul-medio),var(--azul-escuro));
  color:#fff;border-radius:var(--radius);padding:clamp(34px,5vw,58px);text-align:center;
  box-shadow:var(--sombra-forte);
}
.cta-final h2{color:#fff}
.cta-final p{color:#cfe2ef;max-width:620px;margin-inline:auto}

/* ============ RODAPE ============ */
.site-footer{background:var(--azul-escuro);color:#b9d2e4;padding-top:64px;font-size:.92rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:38px;padding-bottom:44px}
.site-footer h4{color:#fff;font-family:'Open Sans',sans-serif;font-size:1rem;margin-bottom:18px;letter-spacing:.4px}
.site-footer a{color:#b9d2e4}
.site-footer a:hover{color:var(--azul-claro)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:10px}
.footer__marca img{height:54px;margin-bottom:16px}
/* o e-mail (38 caracteres) vazava do rodape a partir de 1536px */
.footer__contato li{display:flex;gap:10px;align-items:flex-start;min-width:0}
.footer__contato li > :not(svg){min-width:0;overflow-wrap:anywhere;word-break:break-word}
.footer__contato svg{width:16px;height:16px;fill:var(--azul-claro);flex:none;margin-top:5px}
.redes{display:flex;gap:10px;margin-top:6px}
.redes a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.10);
  display:grid;place-items:center;transition:all var(--transicao);
}
.redes a:hover{background:var(--azul-claro);transform:translateY(-3px)}
.redes svg{width:17px;height:17px;fill:#fff}
.redes a:hover svg{fill:var(--azul-escuro)}
.selos{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.selo{
  display:inline-flex;align-items:center;gap:13px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.15);border-radius:13px;
  padding:12px 17px 12px 14px;color:#cfe2ef;
}
.selo__ico{
  width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(79,168,232,.15);border:1px solid rgba(79,168,232,.36);
  box-shadow:0 0 14px rgba(79,168,232,.14) inset;
}
.selo__ico svg{width:20px;height:20px;fill:#4fa8e8}
.selo__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.selo__txt b{
  font-size:.76rem;font-weight:600;letter-spacing:.7px;color:#fff;line-height:1.15;
  white-space:nowrap;
}
.selo__txt small{font-size:.7rem;font-weight:300;color:#8fb2cc;line-height:1.25;white-space:nowrap}
a.selo{text-decoration:none;transition:var(--transicao)}
a.selo:hover{border-color:rgba(79,168,232,.55);background:rgba(79,168,232,.09)}
a.selo:hover .selo__ico{background:rgba(79,168,232,.26);border-color:rgba(79,168,232,.62)}
a.selo:hover .selo__txt small{color:#b6d4ea}
/* celular: selos empilhados com a mesma largura */
@media (max-width:560px){
  .selos{flex-direction:column;align-items:stretch}
  .selo{justify-content:flex-start}
}

/* pagina de politica de privacidade */
.politica h2{font-size:1.28rem;margin:36px 0 12px;color:var(--azul-escuro)}
.politica p{margin-bottom:14px;line-height:1.75}
.politica__olho{padding-bottom:14px;border-bottom:1px solid var(--d-borda)}
.footer__base{
  border-top:1px solid rgba(255,255,255,.12);padding:20px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.82rem;
}

/* botao flutuante whatsapp */
.zap-flut{
  position:fixed;right:20px;bottom:20px;z-index:950;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.45);
  transition:transform var(--transicao);
}
.zap-flut:hover{transform:scale(1.08)}
.zap-flut svg{width:30px;height:30px;fill:#fff}

/* ============ PAGINAS INTERNAS ============ */
.hero-pagina{
  background:linear-gradient(135deg,#0A3D62 0%,#1E6091 100%);
  color:#fff;padding:clamp(44px,6vw,72px) 0;text-align:center;
}
.hero-pagina h1{color:#fff;margin-bottom:8px}
.migalhas{font-size:.85rem;color:#b9d2e4}
.migalhas a{color:var(--azul-claro)}
/* =========================================================
   CONTEUDO DAS PAGINAS INTERNAS
   Vale para toda pagina que usa page.php (segmentos, grupo,
   servicos, politica...). Antes tinha so max-width e cor, o
   que deixava tudo com o estilo cru do navegador.
   ========================================================= */
.conteudo{max-width:1080px;margin:0 auto}
.conteudo img{border-radius:var(--radius);margin:22px 0}

/* prosa mais estreita que o bloco: leitura confortavel */
.conteudo > p{max-width:820px;line-height:1.8;margin-bottom:18px}
.conteudo > p:first-child{font-size:1.12rem}

/* titulo de secao com barra de destaque */
.conteudo h2{
  position:relative;font-size:clamp(1.35rem,2vw,1.75rem);
  margin:52px 0 22px;padding-left:18px;line-height:1.25;
}
.conteudo h2::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:4px;
  background:linear-gradient(180deg,#4fa8e8,#1f6fc0);
}
.conteudo h2:first-child{margin-top:0}
.conteudo h3{font-size:1.1rem;margin:34px 0 14px;color:#cfe2ef}

/* listas com bolinha (o cartao em grade comia o espaco depois do negrito) */
.conteudo ul{list-style:disc;padding-left:24px;margin:0 0 26px;max-width:820px}
.conteudo ul li{margin-bottom:10px;line-height:1.75;padding-left:4px}
.conteudo ul li::marker{color:#4fa8e8}
.conteudo ul ul{margin:10px 0 0;list-style:circle}
/* listas numeradas */
.conteudo ol{padding-left:22px;margin:0 0 26px;max-width:820px}
.conteudo ol li{margin-bottom:10px;line-height:1.7}

.conteudo blockquote{
  margin:26px 0;padding:18px 22px;border-left:3px solid #4fa8e8;
  background:rgba(79,168,232,.07);border-radius:0 12px 12px 0;
}
.conteudo blockquote p{margin:0}
.conteudo a:not(.btn){color:#4fa8e8;text-decoration:underline;text-underline-offset:3px}
.conteudo a:not(.btn):hover{color:#7fc0f5}
.conteudo hr{border:0;height:1px;background:rgba(255,255,255,.12);margin:40px 0}

@media (max-width:640px){
  .conteudo ul{padding-left:20px}
  .conteudo h2{margin-top:38px}
}

/* formulario */
.form-contato{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo--full{grid-column:1/-1}
.campo label{font-weight:500;font-size:.88rem;color:var(--azul-escuro)}
.campo input,.campo textarea,.campo select{
  padding:13px 15px;border:1px solid var(--cinza-2);border-radius:var(--radius-sm);
  font-family:inherit;font-size:.95rem;background:#fff;transition:all var(--transicao);
}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--azul-medio);box-shadow:0 0 0 3px rgba(30,96,145,.12)}
.campo textarea{min-height:130px;resize:vertical}

/* blog */
.grid-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
@media (max-width:1080px){.grid-posts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-posts{grid-template-columns:1fr}}
.card-post{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--sombra);transition:transform var(--transicao);display:flex;flex-direction:column}
.card-post:hover{transform:translateY(-6px)}
.card-post__img{aspect-ratio:16/9;background:linear-gradient(135deg,#0A3D62,#1E6091);overflow:hidden}
.card-post__img img{width:100%;height:100%;object-fit:cover}
.card-post__corpo{padding:24px;display:flex;flex-direction:column;flex:1}
.card-post__data{font-size:.78rem;color:var(--azul-medio);font-weight:500;text-transform:uppercase;letter-spacing:1px}
.card-post h3{font-size:1.1rem;margin:8px 0 10px}
.card-post p{color:var(--texto-suave);font-size:.92rem;flex:1}
.card-post__mais{margin-top:14px;color:#3d9be0;font-weight:600;font-size:.9rem}
.card-post{text-decoration:none}
.card-post__img{display:block}

/* animacao de entrada */
/* entrada dos blocos: rapida, para nao dar sensacao de atraso */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .38s ease-out, transform .42s cubic-bezier(.2,.75,.3,1);
  will-change:opacity,transform;
}
.reveal.visivel{opacity:1;transform:none;will-change:auto}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ============ RESPONSIVO ============ */
.indicadores--3{grid-template-columns:repeat(3,1fr)}

@media (max-width:1099px){
  .palco__in{grid-template-columns:1fr;text-align:center;gap:22px;padding-top:6px}
  .palco__texto{order:2}
  .logo3d{width:min(86%,420px)}
  .palco__resto{max-width:none;margin-inline:auto}
  .palco__texto .hero__acoes{justify-content:center}
  .placar{grid-template-columns:repeat(3,1fr);gap:12px}
  .placar__item{padding:20px 16px}
  .marca-dagua{display:none}
  .hero__grid,.institucional,.calendario,.faixa{grid-template-columns:1fr}
  .faixa{background:linear-gradient(135deg,#F2F2F2 0%,#dce6ee 45%,#134f7d 100%)}
  .faixa__icones{justify-content:flex-start}
  .calendario-card{grid-template-columns:auto 1fr;text-align:left}
  .calendario-card .btn{grid-column:1/-1;justify-content:center}
  .footer__grid{grid-template-columns:1fr 1fr}
}
/* ===== cabecalho: colapsa para hamburguer =====
   Medido: o menu horizontal completo so cabe a partir de 1536px.
   Em 1440px ele invade a logo e o botao em 25px; em 1366px, 60px.
   Por isso o corte fica em 1535px e nao mais em 1080px. */
@media (max-width:1535px){
  .abre-menu{display:block;margin-left:auto;order:3}
  .header__cta{order:2;margin-left:auto;padding:11px 18px;font-size:.72rem}
  .marca{order:1}
  .nav-principal{
    order:4;flex:0 0 100%;
    position:absolute;left:0;right:0;top:100%;background:#04182c;
    border-bottom:1px solid rgba(120,175,225,.14);display:none;
  }
  .home .nav-principal{background:#04182c}
  .nav-principal.aberto{display:block}
  .nav-principal ul{display:flex;flex-direction:column;flex-wrap:wrap;padding:6px 0;align-items:stretch}
  .nav-principal a{text-align:left;padding:13px 24px}
  .nav-principal > ul > li > a::after{display:none}
  .nav-principal .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:rgba(255,255,255,.06);border-radius:0;padding:0;border:0;
  }
  .nav-principal .sub-menu a{color:#cfe2ef;padding-left:38px;border-left:0}
  .nav-principal .sub-menu a:hover{background:rgba(255,255,255,.10);color:#fff}
  .header__in{flex-wrap:wrap}
}
@media (max-width:560px){
  .header__cta{display:none}
}
@media (max-width:860px){
  .google-card{grid-template-columns:1fr;text-align:center}
  .google-card__nota{border-right:0;border-bottom:1px solid var(--d-borda);padding:0 0 20px}
  .form-contato{grid-template-columns:1fr}
}
@media (max-width:560px){
  .placar{grid-template-columns:1fr;margin-bottom:0}
  .placar__item{display:flex;align-items:baseline;gap:14px;padding:16px 20px}
  .placar__item .ind__txt{margin-top:0}
  .palco{padding-top:120px}
  .indicadores,.indicadores--3{grid-template-columns:1fr}
  .calendario-card{grid-template-columns:1fr;justify-items:start}
  .footer__grid{grid-template-columns:1fr;gap:30px}
  .hero__acoes .btn{width:100%;justify-content:center}
}

/* ===== BANNER — tablet e celular ===== */
@media (max-width:1099px){
  .palco__in{grid-template-columns:1fr;text-align:center;gap:20px}
  .palco__texto{order:2}
  .palco__resto{max-width:none;margin-inline:auto}
  .palco__linha{margin-inline:auto}
  .palco__texto .hero__acoes{justify-content:center}
  .palco__nota{justify-content:center}
  .placar{grid-template-columns:1fr;gap:12px}
}
@media (max-width:560px){
  .palco{padding-top:116px}
  .placar__item{padding:14px 16px;gap:14px}
  .placar__ico{width:46px;height:46px}
  .placar__ico svg{width:22px;height:22px}
  .hero__acoes .btn{width:100%;justify-content:center}
}

/* ---- tipografia mais leve em todo o site ---- */
strong,b{font-weight:600}
.sub{font-weight:300}
p,li{font-weight:300}
.site-footer{font-weight:300}
.site-footer h4{font-weight:500}
.card-servico p,.depoimento p,.destaque__texto p{font-weight:300}



/* Desktop: altura baseada na tela (nao em proporcao rigida), para
   nao quebrar quando o usuario da zoom no navegador. O fundo fica
   ancorado embaixo, entao os aneis de luz continuam visiveis. */
@media (min-width:1100px){
  .palco{
    min-height:min(100vh, 1000px);
    /* banner novo (foto real recortada sobre a arte): nao precisa mais
       do deslocamento de 110px — o degrade escuro do veu ja garante a
       leitura do cabecalho, e sem o deslocamento os dois nao ficam
       cortados no antebraco. Medido: brilho atras do botao 16,6/255. */
    background-size:cover;
    background-position:center bottom;
  }
}

/* banner em alta resolucao para telas maiores/retina */
@media (min-width:1100px){
  .palco{background-image:url('assets/img/banner-lg.webp')}
}
@media (min-width:1800px){
  .palco{background-image:url('assets/img/banner-xl.webp')}
}

/* Banner: conteudo quase encostado na borda esquerda, igual a referencia */
@media (min-width:1100px){
  .palco > .container{max-width:none;padding-left:clamp(40px,3.4vw,66px);padding-right:clamp(40px,3.4vw,66px)}
  .palco__in{grid-template-columns:minmax(0,54%)}
  .placar{gap:24px}
}

/* ===== TEMA ESCURO GLOBAL (combina com o banner) ===== */
:root{
  --d-fundo:#05203a;      /* base do site */
  --d-fundo2:#071b32;     /* secao alternada, mais escura */
  --d-card:#0b2740;       /* cartoes */
  --d-card2:#0e2c49;      /* cartoes destaque / hover */
  --d-borda:rgba(120,175,225,.14);
  --d-txt:#c7dbec;        /* texto corrido */
  --d-txt2:#8fb0cb;       /* texto suave */
  --d-titulo:#ffffff;
  --d-azul:#3d9be0;
}

body{background:var(--d-fundo);color:var(--d-txt)}
h1,h2,h3,h4,h5,h6{color:var(--d-titulo)}
p,li{color:var(--d-txt)}
.sub{color:var(--d-txt2)}
.olho{color:var(--d-azul)}

/* seccoes */
.secao--cinza{background:var(--d-fundo2)}
.secao--azul{background:#04182c}
.secao{position:relative}

/* faixa institucional */
.faixa{
  background:linear-gradient(110deg, var(--d-card) 0%, #123a60 60%, #1e6091 100%);
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.faixa__texto h2{color:#fff}

/* cards de servico */
.card-servico{
  background:var(--d-card);border:1px solid var(--d-borda);
}
.card-servico h3{color:#fff}
.card-servico p{color:var(--d-txt2)}
.card-servico__icone{background:rgba(61,155,224,.12)}
.card-servico__icone svg{fill:var(--d-azul)}
.card-servico:hover{box-shadow:0 20px 45px rgba(0,0,0,.5);border-color:rgba(61,155,224,.4)}
.card-servico:hover .card-servico__icone{background:linear-gradient(150deg,#2a7fc4,#155a94)}
.card-servico:hover .card-servico__icone svg{fill:#fff}
.card-servico .mais{color:var(--d-azul)}

/* card do google */
.google-card{
  background:var(--d-card);border:1px solid var(--d-borda);box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.google-card__nota{border-right-color:var(--d-borda)}
.google-card__nota b{color:#fff}
.google-card h3{color:#fff}
.google-card p{color:var(--d-txt2)!important}
.google-card small{color:var(--d-txt2)}

/* depoimento em destaque */
.destaque{
  background:var(--d-card);border-top-color:var(--d-azul);box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.destaque__cabeca{border-bottom-color:var(--d-borda)}
.destaque__perfil b{color:#fff}
.destaque__perfil small,.destaque__nota small{color:var(--d-txt2)}
.destaque__texto p{color:var(--d-txt)}
.destaque__texto p strong{color:#fff}
.destaque__mais summary{color:var(--d-azul)}
.destaque__resto{border-left-color:var(--d-azul)}
.depoimento__foto{background:linear-gradient(150deg,#2a7fc4,#155a94)}

/* calendario na home (secao azul) ja escura, so ajustar card */
.calendario-card{background:var(--d-card);}
.calendario-card__data{background:#04182c;border-color:var(--d-azul)}
.calendario-card__data span{color:#fff}
.calendario-card__txt p{color:var(--d-txt2)}
.calendario-card__selo{background:#04182c;color:var(--d-azul)}

/* blog */
.card-post{background:var(--d-card);border:1px solid var(--d-borda);box-shadow:0 14px 40px rgba(0,0,0,.3)}
.card-post h3{color:#fff}
.card-post p{color:var(--d-txt2)}
.card-post__data{color:var(--d-azul)}

/* faixa de fechamento */
.faixa-fim{background:linear-gradient(110deg,#071b32 0%,#0c3f66 55%,#1e6091 100%)}
.faixa-fim h2{color:#fff}

/* paginas internas: hero e conteudo */
.hero-pagina{background:linear-gradient(135deg,#06223c 0%,#0c3f66 100%)}
.conteudo{color:var(--d-txt)}
.conteudo h2,.conteudo h3{color:#fff}
.conteudo strong{color:#fff}
.migalhas{color:var(--d-txt2)}
.migalhas a{color:var(--d-azul)}

/* botoes que eram escuros sobre claro agora invertem leitura */
.btn--primario{background:var(--d-azul);color:#fff}
.btn--primario:hover{background:#2a7fc4}
.btn--contorno{color:#fff;border-color:rgba(120,180,235,.5)}
.btn--contorno:hover{background:var(--d-azul);border-color:var(--d-azul);color:#fff}
.btn--claro{background:#fff;color:#06223c}

/* listas com check */
.lista-check li{color:var(--d-txt2)}

/* linha do tempo (sobre nos) */
.marco__txt{background:var(--d-card)}
.marco__txt b{color:#fff}
.marco__txt p{color:var(--d-txt2)}
.marco:hover .marco__txt{background:var(--d-card2)}

/* tabela simples nacional */
.formula{background:#04182c}
.atalhos a{background:var(--d-card);border-color:var(--d-borda);color:#dbe9f5}
.atalhos a:hover{background:var(--d-azul);border-color:var(--d-azul);color:#fff}
.anexo__cabeca p{color:var(--d-txt2)}
.tabela{background:var(--d-card)}
.tabela td{color:var(--d-txt);border-bottom-color:var(--d-borda)}
.tabela tbody tr:nth-child(even){background:rgba(255,255,255,.02)}
.tabela tbody tr:hover{background:rgba(61,155,224,.10)}
.tabela .destaque-cel{color:#fff}
.cal-aviso{background:var(--d-card);color:var(--d-txt2)}
@media (max-width:640px){
  .tabela td::before{color:#fff}
  .tabela tr{border-bottom-color:var(--d-borda)}
}

/* formularios */
.campo label{color:#dbe9f5}
.campo input,.campo textarea,.campo select{
  background:#081f38;border-color:var(--d-borda);color:#eaf3fb;
}
.campo input::placeholder,.campo textarea::placeholder{color:#6f93b3}
.campo input:focus,.campo textarea:focus{border-color:var(--d-azul);box-shadow:0 0 0 3px rgba(61,155,224,.18)}
.opcao{background:#081f38;color:var(--d-txt)}
.opcao:hover{background:#0c2949;border-color:var(--d-azul)}
.opcao:has(input:checked){background:#0c2949;border-color:var(--d-azul)}

/* calendario fiscal (pagina) */
.cal-vazio{border-color:var(--d-borda);color:var(--d-txt2)}
.cal-arte{background:var(--d-card)}

/* portal / segmentos cards herdam de card-servico */

/* busca 404 */
.grid-posts + .centro .btn{color:#fff}

/* marca d'agua fica mais sutil no escuro */
.marca-dagua{opacity:.05}

/* ===== rotulo em pilula com linhas laterais (secoes centralizadas) ===== */
.centro .olho{
  display:inline-flex;align-items:center;position:relative;
  padding:8px 20px;border-radius:999px;margin-bottom:20px;
  border:1px solid rgba(90,160,220,.35);
  background:rgba(61,155,224,.10);
  color:#4fa8e8;font-weight:600;letter-spacing:2.5px;
  box-shadow:0 0 22px rgba(47,143,224,.14) inset;
}
.centro .olho::before,.centro .olho::after{
  content:"";position:absolute;top:50%;width:46px;height:1px;
}
.centro .olho::before{right:100%;margin-right:14px;
  background:linear-gradient(90deg,transparent,rgba(120,180,235,.6));}
.centro .olho::after{left:100%;margin-left:14px;
  background:linear-gradient(90deg,rgba(120,180,235,.6),transparent);}

/* segunda linha do titulo em azul */
h2 .azul{color:#3d9be0}

/* titulo das secoes um pouco mais grosso e subtitulo mais proximo */
.centro h2{font-weight:700;margin-bottom:.35em}
.centro h2 + .sub{margin-top:0}

/* ===== SECAO NOSSOS SERVICOS (igual ao print) ===== */
/* titulo bem bold, azul na 2a linha, bem junto */
.centro h2{font-weight:800;letter-spacing:-1px;line-height:1.06;margin-bottom:.5em}
.centro h2 .azul{color:#3d9be0}

/* grade em 4 colunas */
.grid-servicos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px;
}


/* card escuro com borda azul e brilho suave */
.card-servico{
  background:linear-gradient(160deg, rgba(15,44,78,.55) 0%, rgba(8,26,48,.6) 100%);
  border:1px solid rgba(70,150,220,.28);
  border-radius:18px;padding:30px 28px;
  box-shadow:0 0 0 1px rgba(70,150,220,.05), 0 18px 40px rgba(0,0,0,.35);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.card-servico::before{display:none}
.card-servico:hover{
  transform:translateY(-6px);
  border-color:rgba(90,175,240,.6);
  box-shadow:0 0 26px rgba(47,143,224,.28), 0 26px 55px rgba(0,0,0,.5);
}
/* icone em quadrado arredondado com gradiente azul */
.card-servico__icone{
  width:58px;height:58px;border-radius:15px;margin-bottom:22px;
  background:linear-gradient(150deg,#3a8fe0 0%,#1f6fc0 60%,#175da6 100%);
  box-shadow:0 8px 20px rgba(31,111,192,.4);
  display:grid;place-items:center;
}
.card-servico__icone svg{width:26px;height:26px;fill:#fff}
.card-servico:hover .card-servico__icone{background:linear-gradient(150deg,#4aa0ef,#2079cc)}
.card-servico:hover .card-servico__icone svg{fill:#fff}
.card-servico h3{color:#fff;font-weight:700;font-size:1.16rem;margin-bottom:12px;line-height:1.25}
.card-servico p{color:#8fb0cb;font-size:.95rem;line-height:1.6;margin-bottom:18px}
.card-servico .mais{color:#3d9be0;font-weight:600;font-size:.92rem}
.card-servico .mais::after{content:" →"}

/* botao grande em pilula com gradiente azul */
.btn--pilula{
  position:relative;overflow:hidden;
  background:linear-gradient(100deg,#2f8fe0 0%,#3fa3ee 50%,#2277ca 100%);
  color:#fff;border-radius:999px;padding:20px 40px;
  font-family:'Open Sans',sans-serif;font-weight:600;font-size:1rem;letter-spacing:.3px;
  box-shadow:0 14px 34px rgba(47,143,224,.4);
}
.btn--pilula svg{width:20px;height:20px;fill:currentColor}
.btn--pilula svg:last-child{width:17px;height:17px;transition:transform var(--transicao)}
.btn--pilula:hover{color:#fff;transform:translateY(-2px);box-shadow:0 20px 46px rgba(47,143,224,.55)}
.btn--pilula:hover svg:last-child{transform:translateX(5px)}
.btn--pilula::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  background-size:250% 100%;background-position:200% 0;
  animation:varreBtn 3.8s ease-in-out infinite;pointer-events:none;
}

/* ===== NEON CYAN (servicos) ===== */

/* 1. Titulo "em um so lugar": gradiente ciano + glow */
.centro h2 .azul{
  background:linear-gradient(180deg,#00D2FF 0%,#0072FF 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 12px rgba(0,186,255,.6));
}

/* 5. Fundo da secao de servicos: escuro + dois flares de luz */
.secao:has(.grid-servicos){
  background:#030b18;position:relative;overflow:hidden;
  background-image:
    radial-gradient(circle at 10% 18%, rgba(0,150,255,.15) 0%, transparent 42%),
    radial-gradient(circle at 50% 96%, rgba(0,180,255,.18) 0%, transparent 45%);
}

/* 2. Cards: borda ciano + glow neon interno e externo */
.card-servico{
  background:rgba(8,22,45,.6);
  border:1px solid rgba(0,153,255,.55);
  border-radius:14px;padding:30px 28px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 15px rgba(0,153,255,.2), inset 0 0 15px rgba(0,153,255,.08);
  transition:all .3s ease;
}
.card-servico::before{display:none}
.card-servico:hover{
  transform:translateY(-4px);
  border-color:#00d2ff;
  box-shadow:0 0 25px rgba(0,210,255,.4), inset 0 0 20px rgba(0,210,255,.18);
}

/* 3. Icone: quadrado com gradiente ciano vivo + borda e glow */
.card-servico__icone{
  width:52px;height:52px;border-radius:12px;margin-bottom:22px;
  background:linear-gradient(135deg,#00C6FF 0%,#0072FF 100%);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 0 15px rgba(0,198,255,.5);
  display:grid;place-items:center;
}
.card-servico__icone svg{width:25px;height:25px;fill:#fff}
.card-servico:hover .card-servico__icone{
  background:linear-gradient(135deg,#22d3ff 0%,#0085ff 100%);
  box-shadow:0 0 22px rgba(0,210,255,.7);
}
.card-servico h3{color:#fff;font-weight:700;font-size:1.16rem;margin-bottom:12px;line-height:1.25}
.card-servico p{color:#9fbdd6;font-size:.95rem;line-height:1.6;margin-bottom:18px}

/* link "Saiba mais" ciano com glow */
.card-servico .mais{
  color:#22d3ff;font-weight:600;font-size:.93rem;
  text-shadow:0 0 10px rgba(0,200,255,.4);
}
.card-servico .mais::after{content:" →"}

/* 4. Botao "Ver todos": gradiente ciano + glow forte */
.btn--pilula{
  position:relative;overflow:hidden;
  background:linear-gradient(90deg,#0099FF 0%,#00D2FF 100%);
  color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  padding:19px 40px;font-family:'Open Sans',sans-serif;font-weight:600;font-size:1rem;letter-spacing:.3px;
  box-shadow:0 0 25px rgba(0,186,255,.6);
}
.btn--pilula svg{width:20px;height:20px;fill:currentColor}
.btn--pilula svg:last-child{width:17px;height:17px;transition:transform var(--transicao)}
.btn--pilula:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 0 35px rgba(0,210,255,.9)}
.btn--pilula:hover svg:last-child{transform:translateX(5px)}
.btn--pilula::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);
  background-size:250% 100%;background-position:200% 0;
  animation:varreBtn 3.8s ease-in-out infinite;pointer-events:none;
}

/* a pilula do rotulo tambem em ciano para combinar */
.secao:has(.grid-servicos) .centro .olho{
  border-color:rgba(0,190,255,.5);
  background:rgba(0,170,255,.10);
  color:#22d3ff;
  box-shadow:0 0 18px rgba(0,190,255,.18) inset;
}
.secao:has(.grid-servicos) .centro .olho::before{background:linear-gradient(90deg,transparent,rgba(0,200,255,.7))}
.secao:has(.grid-servicos) .centro .olho::after{background:linear-gradient(90deg,rgba(0,200,255,.7),transparent)}

/* ===== CARDS COM COR INDIVIDUAL + ARTE DE FUNDO ===== */

/* grade em 3 colunas (como o print) */
.grid-servicos{grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:1080px){.grid-servicos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-servicos{grid-template-columns:1fr}}


/* card usa a cor propria (--cor definida no HTML de cada card) */
.card-servico{
  position:relative;overflow:hidden;
  background:#071325;
  border:1px solid color-mix(in srgb, var(--cor,#3d9be0) 40%, transparent);
  border-radius:16px;padding:28px;
  box-shadow:0 0 15px color-mix(in srgb, var(--cor,#3d9be0) 14%, transparent),
             inset 0 0 18px color-mix(in srgb, var(--cor,#3d9be0) 7%, transparent);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-servico:hover{
  transform:translateY(-4px);
  border-color:var(--cor,#3d9be0);
  box-shadow:0 0 26px color-mix(in srgb, var(--cor,#3d9be0) 40%, transparent),
             inset 0 0 22px color-mix(in srgb, var(--cor,#3d9be0) 16%, transparent);
}

/* FUNDO: imagem real no lado direito, sumindo para a esquerda (mask gradient) */
.card-servico__fundo{
  position:absolute;top:0;right:0;width:65%;height:100%;z-index:1;pointer-events:none;
  background-size:cover;background-position:center right;
  opacity:.5;transition:opacity .3s ease;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 58%);
  mask-image:linear-gradient(to right, transparent 0%, #000 58%);
}
.card-servico:hover .card-servico__fundo{opacity:.72}

/* conteudo por cima, com largura limitada para nao invadir a arte */
.card-servico > *:not(.card-servico__fundo){position:relative;z-index:2}
.card-servico h3,.card-servico p,.card-servico .mais{max-width:78%}

/* icone: quadrado com gradiente da cor do card */
.card-servico__icone{
  width:54px;height:54px;border-radius:13px;margin-bottom:20px;
  background:linear-gradient(135deg, var(--cor,#3d9be0) 0%, color-mix(in srgb, var(--cor,#3d9be0) 55%, #04162c) 100%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 0 15px color-mix(in srgb, var(--cor,#3d9be0) 50%, transparent);
  display:grid;place-items:center;
}
.card-servico__icone svg{width:25px;height:25px;fill:#fff}
.card-servico:hover .card-servico__icone{box-shadow:0 0 22px color-mix(in srgb, var(--cor,#3d9be0) 70%, transparent)}

.card-servico h3{color:#fff;font-weight:700;font-size:1.14rem;margin-bottom:11px;line-height:1.25}
.card-servico p{color:#9fbdd6;font-size:.94rem;line-height:1.58;margin-bottom:18px}

/* link "Saiba mais" na cor do card com brilho */
.card-servico .mais{
  color:var(--cor,#3d9be0);font-weight:600;font-size:.92rem;
  text-shadow:0 0 10px color-mix(in srgb, var(--cor,#3d9be0) 45%, transparent);
}
.card-servico .mais::after{content:" →"}

/* ===== ROBUSTEZ NO ZOOM DO NAVEGADOR ===== */
/* zoom do Chrome = mudar a largura efetiva da tela. Estas regras
   garantem que nada estoure ou sobreponha em qualquer nivel de zoom. */

*{min-width:0}                         /* itens de grid/flex podem encolher */
html,body{max-width:100%;overflow-x:clip}
img,svg,video{max-width:100%}

/* o texto do banner acompanha larguras intermediarias sem cortar */
@media (min-width:1100px) and (max-width:1450px){
  .palco__in{grid-template-columns:minmax(0,62%)}
}

/* botoes e acoes quebram em vez de vazar */
.hero__acoes{flex-wrap:wrap}
.hero__acoes .btn{max-width:100%}

/* selo, garantias e migalhas nunca estouram a linha */
.hero__selo,.palco__garantias,.migalhas,.topbar__info{flex-wrap:wrap}

/* tabelas sempre com rolagem propria (ja tem, reforco) */
.tabela-rolagem{max-width:100%;overflow-x:auto}

/* ===== SERVICOS COMPACTO (cabe na tela sem rolar) ===== */
@media (min-width:1100px){
  .secao:has(.grid-servicos){padding-top:clamp(30px,3.4vw,50px);padding-bottom:clamp(30px,3.4vw,50px)}
  .secao:has(.grid-servicos) .centro{margin-bottom:0}
  .secao:has(.grid-servicos) .centro h2{margin-bottom:.32em;font-size:clamp(1.9rem,2.9vw,2.4rem)}
  .secao:has(.grid-servicos) .centro .sub{font-size:1.04rem}
  .secao:has(.grid-servicos) .grid-servicos{margin-top:32px;gap:24px}
  .secao:has(.grid-servicos) .card-servico{padding:26px 26px}
  .secao:has(.grid-servicos) .card-servico__icone{width:52px;height:52px;border-radius:13px;margin-bottom:16px}
  .secao:has(.grid-servicos) .card-servico__icone svg{width:25px;height:25px}
  .secao:has(.grid-servicos) .card-servico h3{font-size:1.16rem;margin-bottom:9px;line-height:1.22}
  .secao:has(.grid-servicos) .card-servico p{font-size:.95rem;line-height:1.55;margin-bottom:14px}
  .secao:has(.grid-servicos) .card-servico .mais{font-size:.92rem}
  .secao:has(.grid-servicos) .centro[style]{margin-top:34px !important}
  .btn--pilula{padding:17px 36px;font-size:1rem}
}

/* ===== GESTAO FISCAL (4 pilares) ===== */
.gestao{
  position:relative;overflow:hidden;
  background:
    radial-gradient(70% 90% at 50% -10%, rgba(30,110,190,.22) 0%, transparent 55%),
    radial-gradient(50% 70% at 8% 100%, rgba(20,80,140,.16) 0%, transparent 60%),
    linear-gradient(180deg,#06213b 0%,#04182c 60%,#031425 100%);
  border-top:1px solid rgba(120,175,225,.10);
  border-bottom:1px solid rgba(120,175,225,.10);
}
/* malha de pontos sutil no fundo */
.gestao::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(120,180,235,.14) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 40%, #000 0%, transparent 80%);
  mask-image:radial-gradient(75% 70% at 50% 40%, #000 0%, transparent 80%);
}
/* facho de luz suave atravessando */
.gestao__glow{
  position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:120%;height:80%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side, rgba(47,143,224,.20), transparent 70%);
  filter:blur(30px);
}
.gestao .container{position:relative;z-index:1}
.gestao .centro{margin-bottom:14px}

.gestao__grid{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px;
}
/* linha que conecta os circulos, com nos luminosos */
.gestao__grid::before{
  content:"";position:absolute;top:66px;left:12.5%;right:12.5%;height:2px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(90,170,235,.55) 12%,rgba(90,170,235,.55) 88%,transparent);
  box-shadow:0 0 12px rgba(47,143,224,.35);
}

/* cada pilar num painel de vidro */
.gestao__item{
  position:relative;z-index:1;text-align:center;padding:34px 22px 30px;
  border-radius:18px;
  background:linear-gradient(160deg, rgba(14,44,78,.5) 0%, rgba(7,26,48,.42) 100%);
  border:1px solid rgba(90,165,230,.16);
  box-shadow:inset 0 0 24px rgba(47,143,224,.06);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.gestao__item:hover{
  transform:translateY(-6px);
  border-color:rgba(90,175,240,.45);
  box-shadow:0 22px 50px rgba(2,14,28,.5), inset 0 0 26px rgba(47,143,224,.12);
}

/* circulo do icone: gradiente azul + anel + brilho + no na linha */
.gestao__ico{
  position:relative;width:78px;height:78px;margin:0 auto 22px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#2f8fe0 0%,#1c6bb8 55%,#134f8e 100%);
  border:3px solid rgba(6,20,38,1);
  box-shadow:0 0 0 4px rgba(47,143,224,.22), 0 0 26px rgba(47,143,224,.5);
}
.gestao__ico::after{ /* no brilhante sobre a linha */
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid rgba(140,200,245,.5);
}
.gestao__ico svg{width:34px;height:34px;fill:#fff}
.gestao__item:hover .gestao__ico{box-shadow:0 0 0 4px rgba(47,143,224,.35), 0 0 36px rgba(47,143,224,.8)}

.gestao__item h3{color:#fff;font-weight:700;font-size:1.22rem;line-height:1.22;margin-bottom:13px}
.gestao__item p{color:#9fbdd6;font-size:.95rem;line-height:1.55;max-width:26ch;margin:0 auto}

@media (max-width:900px){
  .gestao__grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .gestao__grid::before{display:none}
}
@media (max-width:520px){
  .gestao__grid{grid-template-columns:1fr}
}

/* =========================================================
   FILADÉLFIA GROWTH — planos (template-growth.php)
   ========================================================= */
.gw-sobre{max-width:900px;margin:0 auto 54px;text-align:center}
.gw-sobre p{margin-bottom:16px;line-height:1.75}

.gw-processo{margin:0 auto;text-align:center}
.gw-processo h3{font-size:clamp(1.2rem,1.7vw,1.5rem);margin-bottom:28px;color:#fff}
.gw-passos{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;align-items:stretch;
}
.gw-passos li{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0;
  background:linear-gradient(160deg,rgba(10,38,74,.42),rgba(5,22,44,.34));
  border:1px solid rgba(70,150,220,.24);
  border-radius:14px;padding:20px 18px;text-align:left;
  transition:border-color var(--transicao), transform var(--transicao);
}
.gw-passos li:hover{border-color:rgba(79,168,232,.55);transform:translateY(-3px)}
.gw-passo__n{
  width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(150deg,#3b8ede,#1f6fc0);color:#fff;font-weight:700;font-size:.9rem;
  box-shadow:0 6px 16px rgba(31,111,192,.35);
}
.gw-passo__tit{color:#fff;font-weight:600;font-size:.98rem;line-height:1.25}
.gw-passo__txt{color:#a9c6dd;font-size:.86rem;line-height:1.5;font-weight:300}

@media (max-width:1200px){.gw-passos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.gw-passos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gw-passos{grid-template-columns:1fr}}

/* cards de plano */
.gw-cards{display:grid;gap:20px;margin:44px 0 10px}
.gw-cards--4{grid-template-columns:repeat(4,1fr)}
.gw-cards--2{grid-template-columns:repeat(2,1fr);max-width:820px;margin-inline:auto}
.gw-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  background:linear-gradient(160deg,rgba(10,38,74,.5),rgba(5,22,44,.42));
  border:1px solid rgba(70,150,220,.26);border-radius:16px;padding:26px 22px;
}
.gw-card--destaque{
  border-color:rgba(79,168,232,.66);
  box-shadow:0 0 28px rgba(47,143,224,.18), inset 0 0 22px rgba(47,143,224,.07);
}
.gw-card__selo{
  position:absolute;top:-12px;left:22px;
  background:linear-gradient(90deg,#3b8ede,#1f6fc0);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.5px;padding:5px 12px;border-radius:999px;
  white-space:nowrap;
}
.gw-card__emoji{font-size:1.7rem;line-height:1;margin-bottom:12px}
.gw-card h3{font-size:1.08rem;color:#fff;margin-bottom:10px;letter-spacing:.5px}
.gw-card p{color:#a9c6dd;font-size:.9rem;line-height:1.55;flex:1;margin-bottom:18px}
.gw-card__preco{
  display:block;font-family:'Open Sans',sans-serif;font-weight:600;
  font-size:1.5rem;color:#fff;margin-bottom:16px;
}
.gw-card .btn{width:100%;justify-content:center;font-size:.86rem;padding:12px 14px}

/* destaques dentro do card */
.gw-card__top{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:9px}
.gw-card__top li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:.85rem;line-height:1.4;color:#cfe2ef;font-weight:300;
}
.gw-card__top .gw-sim{font-size:.9rem;flex:none;line-height:1.35}

/* comparativo completo: fechado por padrao */
.gw-mais{margin-top:40px}
.gw-mais > summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(79,168,232,.3);border-radius:999px;
  padding:15px 26px;color:#9fd0f5;font-size:.92rem;font-weight:500;
  transition:var(--transicao);max-width:460px;margin:0 auto;text-align:center;
}
.gw-mais > summary::-webkit-details-marker{display:none}
.gw-mais > summary::after{content:"▾";font-size:.9rem;transition:transform .25s ease}
.gw-mais[open] > summary::after{transform:rotate(180deg)}
.gw-mais > summary:hover{background:rgba(79,168,232,.13);border-color:rgba(79,168,232,.6);color:#fff}
.gw-mais[open] > summary{margin-bottom:22px}

/* tabela comparativa */
.gw-dica{display:none;font-size:.82rem;color:#7ba7c8;margin-bottom:10px;text-align:center}
.gw-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;border:1px solid rgba(255,255,255,.12)}
.gw-tabela{width:100%;border-collapse:collapse;min-width:820px;font-size:.88rem;background:rgba(4,18,38,.5)}
.gw-tabela--2{min-width:560px}
.gw-tabela thead th{
  background:#0a274a;color:#fff;font-weight:600;font-size:.82rem;
  padding:15px 14px;text-align:center;letter-spacing:.4px;position:sticky;top:0;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.gw-tabela thead th:first-child{text-align:left;min-width:280px}
.gw-tabela tbody th[scope="row"]{
  text-align:left;font-weight:400;color:#cfe2ef;padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.gw-tabela tbody td{
  text-align:center;padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
  border-left:1px solid rgba(255,255,255,.05);
}
.gw-tabela tbody tr:hover th[scope="row"],
.gw-tabela tbody tr:hover td{background:rgba(47,143,224,.07)}
.gw-grupo th{
  background:rgba(47,143,224,.13)!important;color:#7fc0f5!important;
  font-weight:700!important;font-size:.76rem!important;letter-spacing:1.1px;text-transform:uppercase;
  padding:12px 14px!important;
}
.gw-sim{color:#34d399;font-size:1.05rem;font-weight:700}
.gw-nao{color:#4a6b85}
.gw-fee{
  display:inline-block;font-size:.68rem;line-height:1.25;color:#f0b429;
  border:1px solid rgba(240,180,41,.4);background:rgba(240,180,41,.10);
  border-radius:999px;padding:4px 9px;
}
.gw-txt{color:#cfe2ef;font-size:.84rem;font-weight:500}
.gw-invest th[scope="row"],.gw-invest td{
  background:rgba(47,143,224,.10);font-size:.95rem;padding:16px 14px!important;
}
.gw-invest strong{color:#fff}

@media (max-width:1080px){
  .gw-cards--4{grid-template-columns:repeat(2,1fr)}
  .gw-dica{display:block}
}
@media (max-width:640px){
  .gw-cards--4,.gw-cards--2{grid-template-columns:1fr}
  .gw-tabela thead th:first-child{min-width:200px}
}

/* =========================================================
   DEPOIMENTOS — 3 blocos lado a lado, entram ao rolar
   ========================================================= */
.deps3{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  align-items:stretch;margin-bottom:38px;
}
.dep3{
  display:flex;flex-direction:column;margin:0;
  background:linear-gradient(160deg,rgba(10,38,74,.5),rgba(5,22,44,.38));
  border:1px solid rgba(70,150,220,.24);border-radius:18px;
  padding:28px 26px;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.dep3:hover{
  transform:translateY(-6px);
  border-color:rgba(79,168,232,.55);
  box-shadow:0 18px 40px rgba(2,12,26,.45);
}
.dep3__aspas{
  font-family:Georgia,serif;font-size:3.2rem;line-height:.55;
  color:#3d9be0;opacity:.5;margin-bottom:16px;
}
.dep3__txt{
  margin:0 0 18px;padding:0;border:0;flex:1;
  color:#dbe9f5;font-size:.98rem;line-height:1.65;font-weight:300;
}
.dep3__estrelas{color:#FBBC05;letter-spacing:2px;font-size:.95rem;margin-bottom:18px}
.dep3__autor{
  display:flex;align-items:center;gap:14px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.1);
}
.dep3__foto{
  width:52px;height:52px;flex:none;border-radius:50%;object-fit:cover;
  border:2px solid rgba(79,168,232,.45);
  box-shadow:0 6px 16px rgba(2,12,26,.4);
}
/* usado so quando nao ha foto: inicial do nome */
.dep3__foto--letra{
  display:grid;place-items:center;border:0;
  background:linear-gradient(150deg,#4fa8e8 0%,#1f6fc0 55%,#123f73 100%);
  color:#fff;font-family:'Open Sans',sans-serif;font-weight:600;font-size:1.35rem;
}
.dep3__quem b{display:block;color:#fff;font-size:.98rem;font-weight:600;line-height:1.3}
.dep3__quem small{color:#8fb2cc;font-size:.84rem}

@media (max-width:900px){
  .deps3{grid-template-columns:1fr;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  .deps3 .dep3.reveal{transform:none}
}

/* ---- pista de rolagem: a seção prende e os blocos entram um a um ---- */
.dep-pista{position:relative;padding:0}
.dep-pista__fixo{
  position:sticky;top:0;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:60px 0;
}
@media (min-width:901px){
  /* 260vh = 1,6 tela de curso: cada bloco ocupa ~0,6 tela de rolagem
     e sobra so uma cauda curta depois do terceiro */
  .dep-pista{min-height:240vh}
}

/* cada bloco começa fora e entra quando a rolagem chega nele */
.deps3 .dep3{
  opacity:0;transform:translateY(46px) scale(.96);
  transition:opacity .5s ease-out, transform .6s cubic-bezier(.2,.75,.3,1),
             border-color .35s ease, box-shadow .35s ease;
}
.deps3 .dep3.dep3--on{opacity:1;transform:none}
.deps3 .dep3.dep3--on:hover{transform:translateY(-6px)}

/* numero do passo */
.dep3{position:relative}
.dep3__num{
  position:absolute;top:20px;right:22px;
  font-family:'Open Sans',sans-serif;font-weight:700;font-size:1.5rem;
  color:#4fa8e8;opacity:.22;letter-spacing:-1px;
}

@media (max-width:900px){
  .dep-pista__fixo{position:static;min-height:0;padding:0}
  .deps3 .dep3{transform:translateY(26px) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .dep-pista{min-height:0}
  .dep-pista__fixo{position:static}
  .deps3 .dep3{opacity:1;transform:none;transition:none}
}

/* faixa final dos depoimentos: so o link para o Google */
.dep-final{padding:clamp(30px,4vw,52px) 0}

/* ---- depoimentos: acabamento mais limpo e tipografia de luxo ---- */
.dep-pista .centro{margin-bottom:clamp(30px,3.2vw,46px)}
.dep-pista .centro h2{
  font-family:'Playfair Display',Georgia,serif;
  font-weight:400;letter-spacing:3.5px;
  font-size:clamp(1.7rem,3vw,2.9rem);line-height:1.25;
}
/* o texto da avaliacao volta para a fonte padrao do site */
.dep3__txt{
  font-family:'Poppins',system-ui,sans-serif;
  font-style:normal;font-weight:300;
  font-size:.98rem;line-height:1.65;
  color:#dbe9f5;
}
.dep3__aspas{
  font-family:'Playfair Display',Georgia,serif;
  font-size:3.6rem;opacity:.35;
}
.dep3__num{font-family:'Playfair Display',Georgia,serif;font-weight:500;opacity:.18}
.dep3__quem b{font-family:'Open Sans',sans-serif}

/* cartao mais limpo: menos borda, mais respiro */
.dep3{background:rgba(255,255,255,.028);border-color:rgba(255,255,255,.09);padding:32px 30px}
.dep3:hover{border-color:rgba(79,168,232,.4)}
.dep3__estrelas{font-size:.85rem;letter-spacing:3px;margin-bottom:16px}
.dep3__autor{border-top-color:rgba(255,255,255,.07)}

/* botao do Google encostado nos blocos */
.dep-final{padding:0 0 clamp(46px,5vw,72px)}

/* =========================================================
   BANNER em telas BAIXAS (notebook 1366x768, 1280x720...)
   Sem isso os cards de numeros caem 100px abaixo da dobra.
   Comprime tudo para o placar caber sem rolagem.

   ZOOM DO NAVEGADOR: dar zoom encurta a altura em px de CSS,
   entao a partir de 110% esta faixa passa a valer. O bloco
   comprimia o conteudo E escondia o "Role para descobrir"
   (~80px), mas o banner continuava com 100vh e o conteudo
   ancorado embaixo (justify-content:flex-end) — tudo que ele
   economizava virava um vao morto entre o cabecalho e o selo
   (medido: 116px em 1536x756 contra 49px em 1920x945).
   Correcao: sobra dividida em cima e embaixo (center) e
   espacamentos proporcionais a ALTURA da tela (vh), para o
   conteudo continuar preenchendo o banner em qualquer zoom.
   Medido depois: vao de 49px em 756 e 66px em 859.
   ========================================================= */
@media (min-width:1100px) and (max-height:940px){
  .palco{
    justify-content:center;
    padding:clamp(96px,12vh,120px) 0 clamp(18px,2.6vh,30px);
    min-height:100vh;
  }
  .hero__selo{margin-bottom:clamp(13px,2.4vh,20px);padding:7px 16px;font-size:.8rem}
  .hero__selo b{font-size:.9rem}
  .hero__selo .ico-google{width:17px;height:17px}
  .selo__estrelas{font-size:.92rem}

  .palco__olho{margin-bottom:9px;font-size:.74rem;letter-spacing:4px}
  .palco__resto{font-size:2.45rem;letter-spacing:-1px}
  .palco__big{font-size:2.55rem;letter-spacing:-1px}
  .palco__texto h1{margin-bottom:clamp(10px,1.8vh,15px)}
  .palco__linha{margin:clamp(11px,2.1vh,17px) 0 clamp(18px,3.4vh,28px);font-size:.98rem;line-height:1.5}

  .btn--grande{padding:13px 22px;font-size:.85rem}
  .palco__garantias{margin-top:clamp(16px,2.8vh,23px);gap:20px;font-size:.85rem}
  .gar__ico{width:32px;height:32px}
  .gar__ico svg{width:15px;height:15px}

  .placar{margin-top:clamp(18px,3.2vh,26px);gap:14px}
  .placar__item{padding:12px 16px;gap:14px}
  .placar__ico{width:46px;height:46px}
  .placar__ico svg{width:24px;height:24px}
  .placar__item .ind__num{font-size:1.5rem}
  .placar__item .ind__txt{font-size:.88rem;margin-top:3px}
  .placar__item .ind__desc{display:none}

  /* em tela baixa o "Role para descobrir" e o que menos importa */
  .palco__rolar{display:none}
}

/* ---- CELULAR: numeros visiveis sem rolar ----
   Os cards empilhados ocupavam 240px. Viram uma faixa de 3 colunas
   compacta, e as garantias saem do banner (voltam logo abaixo). */
@media (max-width:900px){
  .palco{padding:112px 0 18px}
  .hero__selo{margin-bottom:14px;padding:8px 14px;font-size:.78rem}
  .palco__olho{margin-bottom:8px;font-size:.68rem;letter-spacing:3px}
  .palco__resto{font-size:clamp(1.6rem,7.4vw,2.1rem)}
  .palco__big{font-size:clamp(1.65rem,7.6vw,2.15rem)}
  .palco__linha{margin:12px 0 16px;font-size:.92rem;line-height:1.5}
  .btn--grande{padding:13px 16px;font-size:.8rem}
  .hero__acoes{gap:9px}

  /* garantias saem do banner no celular (viram faixa propria depois) */
  .palco__garantias{display:none}

  /* numeros em 3 colunas compactas */
  .placar{grid-template-columns:repeat(3,1fr)!important;gap:8px;margin-top:16px}
  .placar__item{
    flex-direction:column;align-items:flex-start;gap:6px;
    padding:12px 10px!important;
  }
  .placar__ico{width:32px!important;height:32px!important}
  .placar__ico svg{width:17px!important;height:17px!important}
  .placar__item .ind__num{font-size:1.15rem}
  .placar__item .ind__txt{font-size:.72rem;line-height:1.25;margin-top:2px}
  .placar__item .ind__desc{display:none}
  .placar__item::after{display:none}
  .palco__rolar{display:none}
}

/* =========================================================
   FALE CONOSCO — formulario centralizado (era 2 colunas e
   sobrava um buraco de 739px a esquerda quando a coluna de
   contato acabava antes do formulario)
   ========================================================= */
.contato-linha{
  list-style:none;padding:0;margin:0 auto 26px;max-width:1080px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.contato-linha li{
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:14px 16px;
  font-size:.88rem;line-height:1.4;color:#cfe2ef;min-height:64px;
}
/* o e-mail tem 38 caracteres e vazava por cima do cartao vizinho:
   min-width:0 deixa o item encolher e overflow-wrap quebra a palavra */
.contato-linha li > :not(.contato-linha__ico){min-width:0;overflow-wrap:anywhere;word-break:break-word}
.contato-linha a{color:#cfe2ef;text-decoration:none;min-width:0}
.contato-linha a:hover{color:#fff}
.contato-linha__ico{
  width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(79,168,232,.15);border:1px solid rgba(79,168,232,.34);
}
.contato-linha__ico svg{width:16px;height:16px;fill:#4fa8e8}

/* a caixa do formulario, na mesma largura do Trabalhe Conosco */
.contato-caixa{max-width:1080px;margin:0 auto}

@media (max-width:1080px){
  .contato-linha{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .contato-linha{grid-template-columns:1fr}
}

/* =========================================================
   FAIXA DE EVENTO — imagem de ponta a ponta, abaixo do banner
   Liga/desliga em $evento['ativo'] no front-page.php
   ========================================================= */
.faixa-evento{
  display:block;width:100%;line-height:0;
  background:#04121f;
}
.faixa-evento__link{display:block;position:relative;overflow:hidden}
.faixa-evento img{
  display:block;width:100%;height:auto;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.faixa-evento__link:hover img{transform:scale(1.02)}

/* enquanto nao ha arte: marca visivel do espaco reservado */
.faixa-evento__vazio{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:clamp(160px,20vw,300px);padding:28px 22px;text-align:center;line-height:1.5;
  background:
    repeating-linear-gradient(135deg, rgba(79,168,232,.05) 0 12px, transparent 12px 24px),
    linear-gradient(160deg,#0a2340,#061a30);
  border-top:1px solid rgba(79,168,232,.2);
  border-bottom:1px solid rgba(79,168,232,.2);
}
.faixa-evento__vazio b{color:#9fd0f5;font-size:1.02rem;font-weight:600}
.faixa-evento__vazio small{color:#6f93b3;font-size:.82rem;max-width:640px}
.faixa-evento__vazio code{
  background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;
  font-size:.9em;color:#cfe2ef;
}
@media (prefers-reduced-motion:reduce){
  .faixa-evento img{transition:none}
  .faixa-evento__link:hover img{transform:none}
}

/* =========================================================
   DIREÇÃO DE ARTE — "o balancete"
   -------------------------------------------------------
   Contabilidade tem tipografia própria: o algarismo tabular,
   a linha de régua, a coluna que alinha. Um balancete é bonito
   porque tudo bate. A identidade sai daí, não de tendência.

   Poppins e Open Sans (as duas fontes mais usadas da web) saíram.
   Entraram Archivo (títulos — grotesca com origem em formulários
   e documentos impressos) e Source Sans 3 (texto).
   ========================================================= */

:root{
  /* raio deliberado: precisão, não fofura. Era 12/13/14/16/18/20/22 sem critério */
  --radius:8px;
  --radius-sm:5px;
  --regua:rgba(255,255,255,.11);      /* a linha do balancete */
  --regua-forte:rgba(127,183,222,.34);
}

/* ---- tipografia ---- */
body{font-family:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
h1,h2,h3,h4,h5,h6,
.btn,.olho,.palco__resto,.palco__big,
.nav-principal a,.ind__num,.placar__item .ind__num{
  font-family:'Archivo','Source Sans 3',system-ui,Arial,sans-serif;
}
h1,h2,h3{letter-spacing:-.02em}

/* TODO algarismo do site alinha em coluna, como em planilha */
.ind__num,.placar__item .ind__num,.gw-tabela,.tabela-simples,
.reel__conta,.dep3__estrelas,.formula__conta,.evento__quando,
.gw-txt,td,th,time,.card-post__data{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}

/* ---- o "olho" das seções vira etiqueta de coluna ---- */
.olho{
  font-family:'Archivo',sans-serif;font-weight:600;
  letter-spacing:.18em;font-size:.7rem;
}

/* =========================================================
   ASSINATURA — a linha do balancete nos números do banner
   Antes: círculo com ícone em degradê + número (a resposta
   template). Agora: cifra grande sobre régua, rótulo em
   versalete espaçado embaixo — a linha de um balanço.
   ========================================================= */
.placar{gap:0;border-top:1px solid var(--regua)}
.placar__item{
  display:block;background:none;border:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-right:1px solid var(--regua);
  border-radius:0;padding:22px 26px 20px;
}
.placar__item:last-child{border-right:0}
.placar__item::after{display:none}          /* some o brilho decorativo */
.placar__ico{display:none}                  /* a peça que sai: o ícone em degradê */

.placar__item .ind__num{
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:clamp(2.1rem,3vw,2.9rem);line-height:1;
  color:#fff;letter-spacing:-.03em;
  display:block;padding-bottom:12px;
  border-bottom:1px solid var(--regua-forte);   /* a régua */
}
.placar__item .ind__num span:first-child{color:#7fb7de;font-weight:500}
.placar__item .ind__txt{
  font-family:'Archivo',sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#9fc4de;margin-top:12px;
}
.placar__item .ind__desc{
  font-size:.82rem;color:#6f93b3;margin-top:5px;font-weight:300;
}

@media (max-width:560px){
  .placar{border-top:0}
  .placar__item{
    border-right:0;border-bottom:1px solid var(--regua);
    padding:14px 4px 12px;
  }
  .placar__item:last-child{border-bottom:0}
  .placar__item .ind__num{font-size:1.5rem;padding-bottom:8px}
  .placar__item .ind__txt{font-size:.62rem;letter-spacing:.12em;margin-top:8px}
}

/* A faixa de totais: num balancete é a única linha com fundo.
   Resolve o contraste dos números sobre a foto clara do banner. */
.palco__veu::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
  background:linear-gradient(180deg, transparent, rgba(2,12,26,.55) 45%, rgba(2,12,26,.86) 100%);
  pointer-events:none;
}
.placar{
  position:relative;z-index:4;
  background:linear-gradient(180deg, rgba(4,18,36,.62), rgba(3,14,30,.80));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-top:1px solid var(--regua-forte);
  border-bottom:1px solid var(--regua);
  border-radius:var(--radius-sm);
}
.placar__item .ind__num{text-shadow:0 2px 18px rgba(2,12,26,.6)}
.placar__item .ind__txt{color:#b6d4ea}
.placar__item .ind__desc{color:#8fb2cc}

/* =========================================================
   BANNER — reformulação minimalista
   O véu era uma parede vertical que apagava o Dimi (15–35%
   da largura). Agora é uma sombra ancorada no canto inferior
   esquerdo: o alto da foto fica limpo e os dois aparecem.
   O texto desce e encosta na faixa de totais.
   ========================================================= */
@media (min-width:1100px){
  .palco{justify-content:flex-end}
  .palco__in{align-items:end}

  .palco__veu{
    background:
      /* topo: só o necessário para o cabeçalho */
      linear-gradient(180deg, rgba(0,14,38,.92) 0%, rgba(0,14,38,.55) 90px, transparent 200px),
      /* sombra do canto inferior esquerdo, onde mora o texto */
      radial-gradient(120% 96% at 4% 100%,
        rgba(2,12,26,.96) 0%,
        rgba(2,12,26,.90) 26%,
        rgba(2,12,26,.66) 44%,
        rgba(2,12,26,.28) 60%,
        transparent 76%);
  }

  /* o eixo do texto encolhe: menos peso, mais foto */
  .palco__olho{display:none}                    /* a peça que sai */
  .palco__texto h1{margin-bottom:14px}
  .palco__resto{font-size:clamp(2.2rem,3.5vw,3.5rem);max-width:14ch}
  .palco__big{font-size:clamp(2.3rem,3.7vw,3.7rem)}
  /* medida do subtitulo proxima a do titulo: bloco coeso em 2 linhas.
     Sem limite ele esticava para 958px contra 466px do titulo. */
  .palco__linha{margin:14px 0 26px;max-width:50ch;text-wrap:balance}
  .palco__garantias{margin-top:20px}
}

/* Em tela baixa (ou com zoom no navegador) o texto NAO fica ancorado
   embaixo: o "Role para descobrir" some e a sobra toda viraria um vao
   morto embaixo do cabecalho. Precisa vir depois da regra acima para
   valer. Ver o bloco "BANNER em telas BAIXAS" mais acima. */
@media (min-width:1100px) and (max-height:940px){
  .palco{justify-content:center}
}

/* Zoom de 150% (ou tela de 720p): abaixo de 700px de altura o bloco
   acima ja nao da conta — o selo encostava no menu (3px). Este degrau
   reduz titulo, garantias e cards so o suficiente. Medido: vao de
   20px no topo e 42px embaixo em 1280x630. */
@media (min-width:1100px) and (max-height:700px){
  .palco__resto{font-size:min(3.5vw,2.35rem)}
  .palco__big{font-size:min(3.7vw,2.45rem)}
  .palco__linha{font-size:.92rem}
  .palco__garantias{font-size:.8rem}
  .gar__ico{width:28px;height:28px}
  .gar__ico svg{width:14px;height:14px}
  .placar__item{padding:10px 14px}
  .placar__ico{width:40px;height:40px}
  .placar__item .ind__num{font-size:1.35rem}
}

/* =========================================================
   O véu que segue o texto
   Escurecer a foto inteira é sempre um dos dois erros: forte
   demais apaga as pessoas, fraco demais apaga o texto. A sombra
   agora acompanha o bloco de texto — legibilidade garantida
   onde precisa, foto intacta no resto.
   ========================================================= */
@media (min-width:1100px){
  .palco__texto{position:relative}
  .palco__texto::before{
    content:"";position:absolute;z-index:-1;
    /* caixa bem maior que o texto e degrade que termina transparente
       DENTRO dela: sem isso aparecia a borda reta do retangulo */
    inset:-120px -340px -110px -160px;
    background:radial-gradient(58% 62% at 34% 50%,
      rgba(2,12,26,.95) 0%,
      rgba(2,12,26,.90) 32%,
      rgba(2,12,26,.66) 55%,
      rgba(2,12,26,.28) 74%,
      transparent 92%);
    filter:blur(26px);      /* garante que nenhuma borda apareca */
    pointer-events:none;
  }
  /* o véu geral volta a ser leve: só o topo e um respiro na base */
  .palco__veu{
    background:
      linear-gradient(180deg, rgba(0,14,38,.92) 0%, rgba(0,14,38,.5) 90px, transparent 190px),
      radial-gradient(130% 80% at 2% 104%, rgba(2,12,26,.62) 0%, rgba(2,12,26,.24) 46%, transparent 72%);
  }
  /* o selo do Google também ganha o próprio fundo */
  .hero__selo{background:rgba(2,12,26,.72);border-color:rgba(255,255,255,.2)}
}

/* =========================================================
   A LINHA DE RAZÃO
   ---------------------------------------------------------
   As páginas do Grupo eram listas de palavras soltas
   ("Comércio", "Indústria"...) que não diziam nada a ninguém.
   O livro razão resolve isso há 500 anos: à esquerda o
   lançamento, à direita o que ele significa, separados por
   régua. Aqui a esquerda é o negócio do visitante e a
   direita é o que muda na contabilidade dele.

   A régua de fundo claro não existia — só havia a de fundo
   escuro (--regua). Esta é a versão para papel.
   ========================================================= */
:root{
  --regua-papel:rgba(120,175,225,.16);
  --regua-papel-forte:rgba(120,180,235,.40);
}

.razao{max-width:1180px;margin:0 auto}
.razao + .razao{margin-top:clamp(44px,5vw,72px)}

/* o cabeçalho do bloco: nome da classificação + as duas colunas */
.razao__topo{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding-bottom:10px;
  border-bottom:2px solid var(--regua-papel-forte);
}
.razao__nome{
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  color:var(--d-titulo);letter-spacing:-.01em;margin:0;
}
.razao__col{
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--d-txt2);white-space:nowrap;
}

/* as linhas */
.razao__lista{list-style:none;margin:0;padding:0}
.razao__linha{
  display:grid;
  grid-template-columns:minmax(150px,clamp(150px,20vw,260px)) 1fr;
  gap:clamp(18px,3vw,44px);align-items:baseline;
  padding:15px 12px 15px 0;
  border-bottom:1px solid var(--regua-papel);
  transition:background var(--transicao),border-color var(--transicao);
}
/* a marca de leitura: correr o dedo pela página */
.razao__linha{position:relative}
.razao__linha::before{
  content:"";position:absolute;left:0;top:0;bottom:-1px;width:2px;
  background:var(--d-azul);
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--transicao);
}
.razao__linha:hover{background:rgba(61,155,224,.07)}
.razao__linha:hover::before{transform:scaleY(1)}

.razao__item{
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:1rem;color:var(--d-titulo);
  padding-left:12px;
}
.razao__peso{
  color:var(--d-txt);font-size:.97rem;line-height:1.65;
}
.razao__peso b{color:var(--d-titulo);font-weight:600}

@media (max-width:720px){
  .razao__topo{flex-wrap:wrap;gap:4px}
  .razao__col{display:none}
  .razao__linha{
    grid-template-columns:1fr;gap:5px;
    padding:14px 0 14px 12px;
  }
  .razao__item{padding-left:0}
  .razao__peso{font-size:.92rem}
}

/* =========================================================
   CONSOLIDAÇÃO — as três empresas do Grupo
   ---------------------------------------------------------
   Uma holding se apresenta em colunas: cada empresa é uma
   coluna, separada por régua vertical. O cabeçalho de cada
   coluna é a pergunta que aquela empresa responde, escrita
   na voz do empresário — não o nome do departamento.
   ========================================================= */
.consol{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:1180px;margin:0 auto;
  border-top:2px solid var(--regua-papel-forte);
}
.consol__col{
  display:flex;flex-direction:column;
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.2vw,30px) 0;
  border-right:1px solid var(--regua-papel);
}
.consol__col:first-child{padding-left:0}
.consol__col:last-child{border-right:0;padding-right:0}

.consol__pergunta{
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.25;
  letter-spacing:-.02em;color:var(--d-titulo);
  margin:0 0 18px;
}
.consol__quem{
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--d-azul);margin-bottom:9px;
}
.consol__faz{color:var(--d-txt);font-size:.97rem;line-height:1.7;margin:0 0 20px}
.consol__faz b{color:var(--d-titulo);font-weight:600}

/* a linha de fechamento da coluna, como o saldo ao pé da conta */
.consol__saldo{
  margin-top:auto;padding:12px 0 clamp(20px,2.2vw,26px);
  border-top:1px solid var(--regua-papel-forte);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.consol__estado{
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--d-txt2);
}
.consol__estado--aberta{color:var(--d-azul)}
.consol__ir{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.85rem;
  color:var(--d-azul);white-space:nowrap;
}
.consol__ir:hover{color:#7cc2f2}
.consol__ir[aria-disabled="true"]{color:var(--d-txt2);opacity:.5;pointer-events:none}

@media (max-width:900px){
  .consol{grid-template-columns:1fr;border-top:0}
  .consol__col{
    border-right:0;border-top:2px solid var(--regua-papel-forte);
    padding:24px 0 0;
  }
  .consol__saldo{padding-bottom:22px}
}

/* =========================================================
   CONTA EM ABERTO — a página da Filapay
   ---------------------------------------------------------
   Não há informação de produto ainda, e inventar seria pior
   que esperar. A página assume isso: é um lançamento com a
   coluna de valor ainda vazia. Honesto e da língua da casa.
   ========================================================= */
.aberto{max-width:760px;margin:0 auto;text-align:center}
.aberto__conta{
  display:flex;align-items:baseline;gap:16px;
  padding-bottom:12px;margin-bottom:26px;
  border-bottom:2px solid var(--regua-papel-forte);
  text-align:left;
}
.aberto__nome{
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;
  color:var(--d-titulo);
}
/* os pontilhados que levam ao valor, como em índice de livro */
.aberto__pontos{
  flex:1;height:1px;
  background:repeating-linear-gradient(90deg,var(--regua-papel-forte) 0 2px,transparent 2px 7px);
  transform:translateY(-4px);
}
.aberto__valor{
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--d-txt2);white-space:nowrap;
}
.aberto p strong{color:var(--d-titulo)}
.aberto p{color:var(--d-txt);font-size:1.05rem;line-height:1.8;text-align:left}
.aberto .btn{margin-top:14px}

/* botao de contorno para usar sobre o azul do .cta-final */
.btn--contorno{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.45);
}
.btn--contorno:hover{
  background:#fff;color:var(--azul-escuro);
  border-color:#fff;transform:translateY(-2px);
}

@media (max-width:560px){
  .aberto__conta{flex-wrap:wrap;gap:8px}
  .aberto__pontos{display:none}
  .aberto__valor{width:100%}
}

/* =========================================================
   O BOTAO DO WHATSAPP — tirar o brilho
   ---------------------------------------------------------
   Tinha tres camadas de brilho somadas: degrade claro->escuro,
   halo verde de 30px espalhado atras e uma faixa branca
   animada varrendo o botao a cada 3,6s. Junto com o fundo
   azul-escuro do site, virava neon.

   Fica: verde solido, sombra neutra (preta, como qualquer
   objeto sobre a pagina) e o movimento so no hover, quando
   o usuario pediu. O verde escureceu o suficiente para o
   texto branco passar no contraste — o anterior nao passava.
   ========================================================= */
.btn--zap,
.btn--zap-forte{
  background:#138544;
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.btn--zap:hover,
.btn--zap-forte:hover{
  background:#17A455;
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.34);
}
/* a peca que sai: a varredura de brilho */
.btn--zap-forte::before{display:none;animation:none}

/* o botao flutuante segue o mesmo verde, sem halo verde */
.zap-flut{
  background:#138544;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}

/* =========================================================
   A FAIXA DE EVENTO — dar chao para a arte
   ---------------------------------------------------------
   A arte da cliente e quase branca e o site e azul-escuro.
   Solta, ela virava um bloco claro de 400px batendo entre
   dois campos escuros: o olho parava ali e nao voltava.

   Nao mexo na arte. O que faltava era ENQUADRAMENTO:
   uma regua em cima que declara "isto e outra coisa" e,
   embaixo, a linha de fechamento do lancamento — etiqueta,
   assunto e acao. O mesmo dispositivo do .consol__saldo das
   paginas do Grupo: em contabilidade, todo lancamento fecha
   numa linha.

   Efeito colateral que era o objetivo: no celular, onde a
   faixa vira uma tira de 78px e a arte fica ilegivel, a
   informacao passa a viver no texto da linha, nao na imagem.
   ========================================================= */
.faixa-evento{
  background:#04121f;
  border-top:1px solid var(--regua-forte);
}

/* a linha de fechamento */
.faixa-evento__linha{
  line-height:1.5;                     /* .faixa-evento zera para colar a imagem */
  background:#04121f;
  border-top:1px solid var(--regua-forte);
  border-bottom:1px solid var(--regua);
}
.faixa-evento__grade{
  display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  padding-top:14px;padding-bottom:14px;
}
.faixa-evento__etiqueta{
  flex:0 0 auto;
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--d-azul);
  padding-right:clamp(14px,2vw,28px);
  border-right:1px solid var(--regua);
}
.faixa-evento__assunto{
  flex:1 1 auto;min-width:0;
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:clamp(.95rem,1.4vw,1.15rem);letter-spacing:-.01em;
  color:#fff;
}
.faixa-evento__quando{
  display:block;
  font-family:'Source Sans 3',sans-serif;font-weight:400;
  font-size:.88rem;letter-spacing:0;color:var(--d-txt2);
  margin-top:2px;
}
.faixa-evento__btn{flex:0 0 auto}

@media (max-width:760px){
  .faixa-evento__grade{
    flex-wrap:wrap;gap:9px;
    padding-top:16px;padding-bottom:18px;
  }
  .faixa-evento__etiqueta{
    border-right:0;padding-right:0;
    flex:1 0 100%;
  }
  .faixa-evento__assunto{flex:1 0 100%;font-size:1.05rem}
  .faixa-evento__btn{width:100%;justify-content:center;margin-top:4px}
}

/* =========================================================
   CABECALHO NA FAIXA 1536–1760px
   ---------------------------------------------------------
   1536px = monitor 1920 com Windows em 125%. E o tamanho de
   tela mais comum do publico do site, e caia exatamente no
   pior ponto: um pixel acima do corte do hamburguer (1535),
   com o menu invadindo a logo em 8px.

   Em vez de mandar mais gente para o hamburguer — o menu
   aberto e um ativo, nao um estorvo — a barra se aperta:
   logo um pouco menor, entrelinha das palavras mais curta e
   respiro entre os itens reduzido. Acima de 1760px nada muda.
   ========================================================= */
@media (min-width:1536px) and (max-width:1760px){
  /* Tudo interpola entre 1536px (apertado) e 1760px (folgado).
     Com valor fixo havia um degrau: em 1761px o menu ficava
     maior que em 1760px e a barra "pulava" ao redimensionar.
     Nos extremos os valores batem com os originais, entao a
     passagem para fora da faixa e imperceptivel. */
  :root{--f: calc(100vw - 1536px);}   /* quanto ja andamos na faixa */

  .marca img{height:clamp(48px, calc(48px + var(--f) * 0.0357), 56px)}

  .nav-principal a{
    font-size:clamp(12.5px, calc(12.5px + var(--f) * 0.0043), 13.44px);
    letter-spacing:clamp(.2px, calc(.2px + var(--f) * 0.00089), .4px);
    padding:11px clamp(7px, calc(7px + var(--f) * 0.0179), 11px);
  }
  /* o sublinhado do item ativo acompanha o respiro do item */
  .nav-principal > ul > li > a::after{
    left:clamp(7px, calc(7px + var(--f) * 0.0179), 13px);
    right:clamp(7px, calc(7px + var(--f) * 0.0179), 13px);
  }

  .header__cta{
    padding:14px clamp(18px, calc(18px + var(--f) * 0.0357), 26px);
    font-size:clamp(.76rem, calc(.76rem + var(--f) * 0.0036), .84rem);
  }
  .header__cta svg{width:clamp(16px, calc(16px + var(--f) * 0.0134), 19px);height:auto}
}

/* =========================================================
   A FAIXA DE NUMEROS EM TELA BAIXA
   ---------------------------------------------------------
   A faixa tinha altura fixa (132px) porque so escalava com a
   LARGURA. Mas o que aperta a dobra e a ALTURA: um monitor
   1920x1080 a 125% sobra ~700px uteis depois das barras do
   Chrome e do Windows. Ali os mesmos 132px passavam de 14,7%
   para 18,8% da tela — um quinto da primeira impressao gasto
   em tres numeros.

   Abaixo de 830px de altura a faixa encolhe: numero menor,
   respiro menor. A regua e os rotulos ficam, porque sao eles
   que fazem a leitura de balancete funcionar.
   ========================================================= */
@media (min-width:1100px) and (max-height:830px){
  .placar__item{padding:11px 24px 10px}
  .placar__item .ind__num{
    font-size:clamp(1.5rem,2.2vw,1.85rem);
    padding-bottom:7px;
  }
  .placar__item .ind__txt{font-size:.66rem;letter-spacing:.14em;margin-top:7px}
  .placar__item .ind__desc{font-size:.75rem;margin-top:3px}
}

/* Teto da faixa de evento em telas muito largas.
   Sendo 1920x400 com largura de 100%, a arte cresce sem limite:
   em 3440px ela ja tem 714px de altura e em 5120px passa o
   proprio banner. Acima de ~2690px o teto entra e a arte para
   de crescer, centrada, sobre o fundo escuro da secao.
   Uso 'contain' e nao 'cover' de proposito: cortar o topo e o
   pe da arte da cliente seria pior que deixar respiro nas laterais.
   Ate 2560px (monitor 4K comum) nada muda. */
.faixa-evento img{
  max-height:560px;
  object-fit:contain;
  object-position:center;
  background:#04121f;
}

/* O menu estava centralizado na barra, o que abria 121px de vazio
   entre a logo e o primeiro item — a logo ficava sozinha num canto.
   Encostando o menu na logo, os dois viram um grupo so e a sobra
   vai para o lado do botao, onde ela nao incomoda. */
@media (min-width:1536px){
  .nav-principal{
    justify-content:stretch;
    margin-left:clamp(10px,1vw,20px);
    margin-right:clamp(10px,1vw,20px);
  }
  /* space-between reparte a sobra ENTRE os itens em vez de juntar
     tudo num buraco so. Centralizado abria 121px ao lado da logo;
     encostado a esquerda, abria 190px antes do botao. Distribuido,
     nao existe vazio nenhum — e o espaco se ajusta sozinho a cada
     largura de tela. */
  /* SO a lista de primeiro nivel. Com '.nav-principal ul' o
     width:100% caia tambem nos submenus, que sao absolutos:
     o painel encolhia para a largura do item pai e o texto
     longo ('Registro de Marcas e Propriedade Intelectual')
     vazava para fora da caixa escura. */
  .nav-principal > ul{justify-content:space-between;width:100%}
}

/* A sombra do topo enfraquecia aos 90px, mas o cabecalho tem 100px.
   Resultado: o menu caia onde a sombra ja tinha aberto e a TV branca
   da foto aparecia atras de "TABELA SIMPLES NACIONAL 2026" e
   "GRUPO FILADELFIA". Agora ela segura forte ate passar o cabecalho
   e so entao abre. */
@media (min-width:1100px){
  .palco__veu{
    background:
      linear-gradient(180deg,
        rgba(0,14,38,.95) 0px,
        rgba(0,14,38,.90) 100px,
        rgba(0,14,38,.55) 170px,
        transparent 280px),
      radial-gradient(130% 80% at 2% 104%,
        rgba(2,12,26,.62) 0%, rgba(2,12,26,.24) 46%, transparent 72%);
  }
}

/* =========================================================
   POST DO BLOG — uma coluna so, centrada
   ---------------------------------------------------------
   O bloco tinha 1080px, mas os paragrafos e as listas paravam
   em 820px sem margem automatica: grudavam a esquerda e
   deixavam 260px de vazio so do lado direito, enquanto os
   titulos e a imagem iam ate o fim. A borda direita ficava
   serrilhada e a pagina parecia torta.

   Agora tudo tem a mesma medida (820px) e a coluna inteira
   fica centrada. Nao centralizo as LINHAS de texto: texto
   corrido centralizado destroi a leitura, porque o olho
   perde onde comeca a linha seguinte.

   Vale so no post (article.conteudo). As paginas comuns
   usam div.conteudo e seguem como estao.
   ========================================================= */
article.conteudo{max-width:820px}
article.conteudo > p,
article.conteudo ul,
article.conteudo ol{max-width:none}

/* =========================================================
   LINHA DO TEMPO — 20 marcos reais (fonte: Demétrio, 31/07/2026)
   ---------------------------------------------------------
   Antes eram 6 marcos, tres deles inventados por falta de
   material. Agora sao os anos de verdade, e isso trouxe dois
   problemas de layout:

   1) Existem intervalos ("2012–2014") que nao cabiam na
      pastilha de 78px. A coluna abriu para 104px e a linha
      vertical foi recentralizada junto.
   2) A pastilha do ano tinha um anel BRANCO de 5px, sobra do
      tema claro. No fundo escuro virava um halo em volta de
      cada ano. O anel agora e da cor do fundo, que era a
      funcao dele desde o inicio: abrir o vao entre a linha e
      a pastilha.
   ========================================================= */
.marco{grid-template-columns:104px 1fr}
.linha-tempo::before{left:59px}
.marco__ano{
  box-shadow:0 0 0 5px var(--d-fundo);
  font-variant-numeric:tabular-nums;
  font-family:'Archivo',sans-serif;
  font-size:.82rem;
}
@media (max-width:560px){
  .marco{grid-template-columns:82px 1fr;gap:12px}
  .linha-tempo::before{left:48px}
  .marco__ano{font-size:.72rem;padding:7px 0}
}

/* =========================================================
   LINHA DO TEMPO — versao com linha que preenche
   ---------------------------------------------------------
   Inspirado no Timeline do Aceternity (21st.dev). O original
   e React + Framer Motion + Tailwind; aqui e CSS + um trecho
   em site.js, porque o tema nao tem build.

   O que saiu: a pastilha arredondada em cada ano. Com 20
   marcos viravam 20 balas azuis empilhadas, e ela nao cabia
   intervalos como "2012–2014". Fica so o algarismo grande em
   coluna, alinhado — que e como uma data se escreve num livro
   contabil.
   ========================================================= */
.linha-tempo{padding-left:0;margin:34px 0 44px}

/* a trilha apagada, do inicio ao fim */
.linha-tempo::before{
  left:5px;top:6px;bottom:6px;width:2px;
  background:var(--regua);
  border-radius:2px;
}
/* a parte ja percorrida, controlada pela rolagem */
.linha-tempo__progresso{
  position:absolute;left:5px;top:6px;width:2px;height:0;
  background:linear-gradient(180deg,var(--azul-medio),var(--d-azul) 60%,var(--azul-claro));
  border-radius:2px;z-index:1;
  box-shadow:0 0 12px rgba(61,155,224,.45);
}

.marco{
  grid-template-columns:clamp(86px,9vw,124px) 1fr;
  gap:clamp(18px,2.4vw,34px);
  margin-bottom:clamp(22px,2.6vw,34px);
  padding-left:30px;
}

/* o ponto do marco, sobre a trilha */
.marco::before{
  content:"";position:absolute;left:0;top:9px;z-index:2;
  width:12px;height:12px;border-radius:50%;
  background:var(--d-fundo);
  border:2px solid var(--regua);
  transition:border-color .45s ease, box-shadow .45s ease, background .45s ease;
}
.marco--on::before{
  background:var(--d-azul);
  border-color:var(--azul-claro);
  box-shadow:0 0 0 4px rgba(61,155,224,.18);
}

/* o ano: algarismo grande em coluna, sem pastilha */
.marco__ano{
  position:sticky;top:118px;               /* 100px do cabecalho + respiro */
  background:none;color:var(--d-txt2);
  border-radius:0;padding:0;text-align:left;box-shadow:none;
  font-family:'Archivo',sans-serif;font-weight:600;
  font-size:clamp(1.05rem,1.7vw,1.45rem);
  letter-spacing:-.02em;line-height:1.15;
  font-variant-numeric:tabular-nums;
  transition:color .45s ease;
}
.marco--on .marco__ano{color:#fff}

.marco__txt{
  background:none;border:0;box-shadow:none;padding:0;
  border-left:1px solid var(--regua);
  padding-left:clamp(16px,1.8vw,26px);
}
.marco:hover .marco__txt{background:none;box-shadow:none}
.marco__txt b{
  font-family:'Archivo',sans-serif;font-weight:600;
  color:#fff;font-size:1.02rem;margin-bottom:6px;
}
.marco__txt p{color:var(--d-txt);font-size:.95rem;line-height:1.7}

@media (max-width:640px){
  .linha-tempo::before,.linha-tempo__progresso{left:4px}
  .marco{grid-template-columns:1fr;gap:6px;padding-left:24px;margin-bottom:26px}
  .marco::before{width:10px;height:10px;top:7px}
  .marco__ano{position:static;font-size:.95rem;color:var(--d-azul)}
  .marco--on .marco__ano{color:var(--azul-claro)}
  .marco__txt{border-left:0;padding-left:0}
}

/* A descricao do marco virou <span> (era <p>): o wpautop do
   WordPress inseria </p> soltos dentro de cada marco, o
   navegador criava um paragrafo vazio, o marco passava a ter
   3 filhos no grid e o texto caia na COLUNA DO ANO — 124px,
   uma palavra por linha. Com <span> nao ha paragrafo para ele
   estragar. */
.marco__desc{
  display:block;
  color:var(--d-txt);font-size:.95rem;line-height:1.7;
}

/* =========================================================
   LINHA DO TEMPO — medidas do Aceternity
   ---------------------------------------------------------
   Lidas do registry do componente, nao estimadas:
     ano        text-5xl (48px), neutral-500, sticky top-40 (160px)
     coluna     max-w-xs (320px) / lg:max-w-sm (384px)
     respiro    pt-40 (160px) entre marcos
     linha      2px, com mascara que apaga nas duas pontas
     progresso  degrade "cometa": forte na ponta, some atras

   Duas adaptacoes conscientes: o demo tem 5 marcos, a
   Filadelfia tem 20. Mantive 48px no ano mas o respiro caiu de
   160 para ~96px — com 160 a secao passaria de 4000px de
   rolagem. E o degrade usa o azul da marca, nao o roxo dele.
   ========================================================= */
.marco{
  grid-template-columns:clamp(120px,22vw,300px) 1fr;
  gap:clamp(20px,3vw,40px);
  margin-bottom:0;
  padding-left:48px;
  padding-top:clamp(38px,6vw,96px);
}
.marco:first-child{padding-top:clamp(20px,3vw,44px)}

/* a trilha: some nas duas pontas, como no original */
.linha-tempo::before{
  left:15px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent 0%,var(--regua) 12%,var(--regua) 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
}
/* o cometa: brilha na ponta de baixo e apaga para cima */
.linha-tempo__progresso{
  left:15px;top:0;width:2px;opacity:0;
  background:linear-gradient(to top,
    #8fd6ff 0%, var(--d-azul) 12%, rgba(61,155,224,.35) 45%, transparent 100%);
  box-shadow:0 0 14px rgba(61,155,224,.5);
}

/* o ponto, na altura do ano grudado */
.marco::before{
  left:8px;top:calc(clamp(38px,6vw,96px) + 14px);
  width:16px;height:16px;
  background:var(--d-fundo);
  border:2px solid var(--regua);
}
.marco:first-child::before{top:calc(clamp(20px,3vw,44px) + 14px)}
.marco--on::before{
  background:var(--d-azul);border-color:var(--azul-claro);
  box-shadow:0 0 0 6px rgba(61,155,224,.16);
}

/* o ano grande, cinza, grudado — o gesto do componente */
.marco__ano{
  top:160px;
  font-size:clamp(1.7rem,3.4vw,3rem);
  font-weight:700;letter-spacing:-.03em;
  color:var(--d-txt2);opacity:.55;
}
.marco--on .marco__ano{color:#fff;opacity:1}

.marco__txt{border-left:0;padding-left:0}
.marco__txt b{font-size:1.08rem}

@media (max-width:900px){
  .marco{
    grid-template-columns:1fr;gap:8px;
    padding-left:40px;padding-top:clamp(30px,5vw,52px);
  }
  .linha-tempo::before,.linha-tempo__progresso{left:11px}
  .marco::before{left:4px;width:14px;height:14px;top:calc(clamp(30px,5vw,52px) + 10px)}
  .marco__ano{position:static;font-size:1.5rem;opacity:1;color:var(--d-azul)}
  .marco--on .marco__ano{color:var(--azul-claro)}
}

/* =========================================================
   TRAJETORIA EM TELA TRAVADA (pagina de teste)
   ---------------------------------------------------------
   O ano ocupa meia tela em algarismo tabular — nao "pula" ao
   trocar de digito, que e o defeito classico de contador
   animado. O marco entra por baixo e o anterior sai por cima:
   a direcao do movimento conta a passagem do tempo.

   So vale em .tempo (pagina de teste). O resto do site nao e
   afetado.
   ========================================================= */
.tempo{position:relative;background:var(--d-fundo2)}
.tempo__palco{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:80px 0 0;overflow:hidden;
}
.tempo__grade{
  display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);
  align-items:center;gap:clamp(24px,4vw,64px);flex:1;
}

/* ---- o ano ---- */
.tempo__ano{position:relative;height:1em;font-size:clamp(3.4rem,11vw,9.5rem)}
.tempo__num{
  position:absolute;left:0;top:0;
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:1em;line-height:1;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  color:#fff;white-space:nowrap;
  opacity:0;transform:translateY(38%);
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.tempo__num.is-on{opacity:1;transform:translateY(0)}
.tempo__num.is-passou{opacity:0;transform:translateY(-38%)}

/* ---- o texto do marco ---- */
.tempo__lado{position:relative;min-height:clamp(190px,26vh,280px)}
.tempo__lado .olho{position:absolute;top:-46px;left:0}
.tempo__marco{
  position:absolute;inset:0;
  opacity:0;transform:translateY(26px);
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
.tempo__marco.is-on{opacity:1;transform:translateY(0);pointer-events:auto}
.tempo__marco.is-passou{opacity:0;transform:translateY(-26px)}
.tempo__marco h2{
  font-size:clamp(1.3rem,2.2vw,1.9rem);color:#fff;margin:0 0 12px;
  letter-spacing:-.02em;
}
.tempo__marco p{
  color:var(--d-txt);font-size:clamp(.98rem,1.15vw,1.1rem);
  line-height:1.75;margin:0;max-width:54ch;
}

/* ---- a régua dos 23 anos ---- */
.tempo__regua{padding:0 0 clamp(28px,4vh,56px)}
.tempo__regua-in{display:flex;align-items:center;gap:18px}
.tempo__de,.tempo__ate{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.76rem;
  letter-spacing:.14em;color:var(--d-txt2);font-variant-numeric:tabular-nums;
}
.tempo__trilho{
  flex:1;height:2px;background:var(--regua);position:relative;border-radius:2px;
}
.tempo__enche{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--azul-medio),var(--d-azul) 55%,var(--azul-claro));
  border-radius:2px;box-shadow:0 0 12px rgba(61,155,224,.45);
}

/* ---- sem GSAP, sem JS ou no celular: vira lista ---- */
.tempo--simples .tempo__palco{min-height:0;display:block;padding:clamp(40px,7vw,80px) 0}
.tempo--simples .tempo__grade{display:block}
.tempo--simples .tempo__ano{display:none}
.tempo--simples .tempo__regua{display:none}
.tempo--simples .tempo__lado{min-height:0}
.tempo--simples .tempo__lado .olho{position:static;margin-bottom:18px}
.tempo--simples .tempo__marco{
  position:static;opacity:0;transform:translateY(18px);
  padding:20px 0 20px 22px;border-left:1px solid var(--regua);
  margin-bottom:6px;pointer-events:auto;
}
.tempo--simples .tempo__marco.is-on{opacity:1;transform:none}
.tempo--simples .tempo__marco h2{font-size:1.1rem}
.tempo--simples .tempo__marco h2::before{
  content:attr(data-ano);display:block;
  font-size:.78rem;letter-spacing:.14em;color:var(--d-azul);margin-bottom:5px;
}

@media (max-width:900px){
  .tempo__grade{grid-template-columns:1fr}
}

/* Bloco da equipe na pagina Sobre Nos. Prosa curta, medida de
   leitura estreita — e o unico texto corrido que sobrou na
   pagina, entao pode respirar. */
.equipe{max-width:760px;margin:clamp(48px,6vw,84px) auto 0;text-align:center}
.equipe__titulo{font-size:clamp(1.3rem,2.2vw,1.8rem);margin-bottom:14px}
.equipe p{color:var(--d-txt);line-height:1.8;margin:0 0 10px}
.equipe__nota{font-size:.9rem;color:var(--d-txt2);font-style:italic}

/* A linha dos pilares deixa de nascer pronta: quando o GSAP
   assume, ela e revelada por uma mascara que anda da esquerda
   para a direita, controlada pela variavel --corrente (0 a 1).
   Sem GSAP a classe nao entra e a linha aparece inteira, como
   sempre foi. */
.gestao__grid--anima{--corrente:0}
.gestao__grid--anima::before{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--corrente) * 100%),transparent calc(var(--corrente) * 100%));
          mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--corrente) * 100%),transparent calc(var(--corrente) * 100%));
}

/* =========================================================
   CALENDARIO FISCAL — a arte cabendo na tela
   ---------------------------------------------------------
   A arte tem proporcao de cartaz (1861x2176). Na coluna de
   750px ela ficava com 877px de altura — mais alto que a area
   util da janela, entao ninguem via o mes inteiro sem rolar.

   Duas medidas somadas:
   1. o topo da pagina encolheu (o paragrafo de introducao
      empurrava a arte 200px para baixo);
   2. a arte passa a ter teto de altura amarrado a JANELA, nao
      a coluna — o que sobrar de largura vira respiro.

   Encolher texto denso tem limite, entao clicar abre o arquivo
   original em tamanho real, para quem precisa conferir data.
   ========================================================= */
.cal-topo{margin-bottom:22px}
.cal-topo h2{margin-bottom:8px}
.cal-topo .sub{font-size:1rem}

.cal-grid{gap:clamp(28px,3vw,44px);align-items:start}

.cal-arte{background:none;box-shadow:none;border-radius:0;overflow:visible}
.cal-arte__zoom{
  position:relative;display:block;
  border-radius:var(--radius);overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.42);
  cursor:zoom-in;
}
.cal-arte img{
  display:block;width:auto;max-width:100%;
  /* 100vh menos cabecalho, titulo e respiro do rodape da secao */
  max-height:calc(100vh - 300px);
  min-height:420px;
  margin:0 auto;
}
/* o selo "Ampliar" so aparece com o mouse em cima */
.cal-arte__lupa{
  position:absolute;right:12px;bottom:12px;
  background:rgba(4,18,36,.86);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:7px 15px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
  opacity:0;transform:translateY(6px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.cal-arte__zoom:hover .cal-arte__lupa{opacity:1;transform:translateY(0)}
.cal-arte__zoom:focus-visible .cal-arte__lupa{opacity:1;transform:translateY(0)}

/* janela baixa (notebook, 125% de zoom): a arte manda na altura */
@media (min-width:861px) and (max-height:820px){
  .cal-topo{margin-bottom:16px}
  .cal-topo .sub{display:none}
  .cal-arte img{max-height:calc(100vh - 210px)}
}
@media (max-width:860px){
  .cal-arte img{max-height:none;width:100%}
  .cal-arte__lupa{opacity:1;transform:none}
}

/* =========================================================
   O E-MAIL DO RODAPE
   ---------------------------------------------------------
   Com word-break:break-word o navegador podia quebrar em
   QUALQUER letra, e no zoom saia "...delfia.co / m.br", que
   parece defeito. Agora a quebra so acontece nos <wbr> que o
   PHP insere (depois do @ e dos pontos), e o overflow-wrap
   fica como ultima linha de defesa para nao vazar da caixa
   em tela muito estreita.
   ========================================================= */
.footer__contato li > :not(svg){
  word-break:normal;
  overflow-wrap:break-word;
}
.footer__email{
  /* dois passos menor que o resto: cabe em uma linha em mais
     larguras, e continua legivel */
  font-size:.92em;
  letter-spacing:-.01em;
}

/* =========================================================
   DEPOIMENTOS — padronizacao tipografica
   ---------------------------------------------------------
   Este bloco tinha ficado para tras na troca de fontes do
   site. Ele pedia TRES familias que nao existem mais aqui:

     Playfair Display  -> titulo, aspas e numero
     Poppins           -> texto da avaliacao
     Open Sans         -> nome do cliente

   Poppins e Open Sans nem sao mais carregadas, entao caiam
   na fonte do sistema sem ninguem perceber. E a Playfair era
   a unica serifada do site inteiro — o titulo dos depoimentos
   nao parecia da mesma casa.

   Agora tudo segue o padrao: Archivo nos titulos, Source Sans 3
   no texto. Uma familia a menos para o navegador baixar.
   ========================================================= */
.dep-pista .centro h2{
  font-family:'Archivo','Source Sans 3',system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-.02em;                    /* era 3.5px, de serifada */
  font-size:clamp(1.6rem,3.2vw,2.4rem);     /* mesma escala dos outros h2 */
  line-height:1.2;
}
.dep3__txt{
  font-family:'Source Sans 3',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
.dep3__quem b{font-family:'Archivo',sans-serif;font-weight:600}
.dep3__aspas{
  font-family:'Archivo',sans-serif;font-weight:700;
  font-size:3rem;opacity:.28;line-height:1;
}
.dep3__num{
  font-family:'Archivo',sans-serif;font-weight:600;
  font-variant-numeric:tabular-nums;opacity:.16;
}

/* =========================================================
   AVISO DO FORMULARIO DE CONTATO
   ---------------------------------------------------------
   Estava com estilo embutido de tema CLARO (fundo #e6f7ed)
   mas sem definir a cor do texto — entao o texto herdava o
   cinza-claro do tema escuro e ficava claro sobre claro.
   A pessoa acabava de enviar a mensagem e nao conseguia ler
   a confirmacao, que e justamente o momento em que ela mais
   precisa de resposta.

   Agora o aviso e escuro como o resto do site, com a cor so
   na regua lateral e no icone.
   ========================================================= */
.form-aviso{
  display:flex;align-items:flex-start;gap:13px;
  padding:16px 20px;margin-bottom:22px;
  border-radius:var(--radius-sm);
  border:1px solid var(--d-borda);
  border-left-width:3px;
  background:var(--d-card);
  color:var(--d-txt);
  font-size:.97rem;line-height:1.6;
}
.form-aviso strong{color:#fff;font-family:'Archivo',sans-serif;font-weight:600}
.form-aviso__ico{
  flex:none;display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.85rem;
  margin-top:1px;
}
.form-aviso__ico svg{width:14px;height:14px}

.form-aviso--ok{
  border-left-color:#25D366;
  background:linear-gradient(90deg, rgba(37,211,102,.12), var(--d-card) 60%);
}
.form-aviso--ok .form-aviso__ico{background:rgba(37,211,102,.18)}
.form-aviso--ok .form-aviso__ico svg{fill:#4ade80}

.form-aviso--erro{
  border-left-color:#f0736a;
  background:linear-gradient(90deg, rgba(240,115,106,.12), var(--d-card) 60%);
}
.form-aviso--erro .form-aviso__ico{background:rgba(240,115,106,.20);color:#ffb4ad}

/* O ano com intervalo ("2012–2014", "2016–2018") tem 9 caracteres
   contra 4 dos anos simples. No mesmo corpo ele passava por cima
   da coluna de texto, e mais ainda com zoom em 125% ou 150%,
   quando a janela em px de CSS encolhe e a coluna junto.
   Reduzido para caber sempre na propria coluna. */
.tempo__num--longo{
  font-size:.55em;
  letter-spacing:-.035em;
}
/* trava de seguranca: o ano nunca ultrapassa a coluna dele */
.tempo__ano{max-width:100%}
.tempo__num{max-width:100%;overflow:hidden;text-overflow:clip}

@media (max-width:900px){
  .tempo__num--longo{font-size:.72em}
}

/* =========================================================
   MENU HAMBURGUER — preso a janela, rolando por dentro
   ---------------------------------------------------------
   Era absoluto dentro do cabecalho. Em zoom de 125% ou 150% a
   janela encolhe em px de CSS, a lista (7 itens + os 14
   servicos do submenu) fica mais alta que a tela, e para
   alcancar o fim a pessoa rolava a PAGINA — levando o menu
   junto e nunca chegando ao ultimo item.

   Agora o painel e fixo abaixo do cabecalho, com teto de
   altura igual ao que sobra de tela, e a rolagem acontece
   dentro dele. A pagina atras fica travada.
   ========================================================= */
@media (max-width:1535px){
  .nav-principal.aberto{
    position:fixed;
    top:var(--h-cab,100px);
    left:0;right:0;
    max-height:calc(100dvh - var(--h-cab,100px));
    max-height:calc(100vh - var(--h-cab,100px));   /* navegador sem dvh */
    overflow-y:auto;
    overscroll-behavior:contain;                    /* nao empurra a pagina */
    -webkit-overflow-scrolling:touch;
    box-shadow:0 24px 60px rgba(0,0,0,.5);
  }
  /* a pagina para de rolar enquanto o menu esta aberto */
  body.menu-aberto{overflow:hidden}

  /* barra de rolagem discreta dentro do painel */
  .nav-principal.aberto::-webkit-scrollbar{width:10px}
  .nav-principal.aberto::-webkit-scrollbar-thumb{
    background:rgba(120,175,225,.28);border-radius:8px;
    border:3px solid #04182c;
  }
  .nav-principal.aberto::-webkit-scrollbar-track{background:#04182c}
}

/* =========================================================
   SUBMENUS EM SANFONA (modo hamburguer)
   ---------------------------------------------------------
   Todos os subitens abriam de uma vez: 14 servicos + os
   demais faziam uma lista de 1.190px, um paredao onde ninguem
   achava nada. Agora cada pai tem uma seta propria.

   O TEXTO continua sendo link para a pagina do pai; so a
   SETA abre e fecha. Sao alvos separados de proposito — quem
   quer ir para /servicos/ toca no nome, quem quer ver a lista
   toca na seta.
   ========================================================= */
@media (max-width:1535px){
  .nav-principal li.tem-sub{position:relative}
  .nav-principal li.tem-sub > a{padding-right:60px}

  .abre-sub{
    position:absolute;top:0;right:6px;
    width:48px;height:48px;
    display:grid;place-items:center;
    background:transparent;border:0;cursor:pointer;
    color:var(--d-azul);
    border-radius:8px;
    transition:background .2s ease;
  }
  .abre-sub svg{
    width:20px;height:20px;fill:currentColor;
    transition:transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .abre-sub:hover{background:rgba(120,175,225,.12)}
  .abre-sub:focus-visible{outline:2px solid var(--azul-claro);outline-offset:-3px}
  .tem-sub.sub-aberto > .abre-sub{color:#fff}
  .tem-sub.sub-aberto > .abre-sub svg{transform:rotate(180deg)}

  /* fechado por padrao; a altura exata e medida pelo JS */
  .nav-principal .sub-menu{
    max-height:0;overflow:hidden;
    transition:max-height .32s cubic-bezier(.2,.7,.3,1);
  }
}

/* A seta da sanfona so existe no modo hamburguer. No menu
   horizontal o submenu abre no hover, entao ela nao tem
   funcao — e sem estilo aparecia como caixinha branca do
   navegador embaixo de cada item. Fica escondida por padrao
   e o bloco @media acima a liga quando o menu vira lista. */
.abre-sub{display:none}
@media (max-width:1535px){
  .abre-sub{display:grid}
}

/* =========================================================
   DEPOIMENTOS — apertar o palco
   ---------------------------------------------------------
   O palco tinha min-height:100vh com o conteudo centralizado.
   Como os tres cartoes comecam invisiveis, sobrava a tela
   inteira menos o titulo — ~420px de vazio, metade acima e
   metade abaixo. Em tela alta piorava, porque 100vh cresce e
   o conteudo nao.

   Agora o palco tem teto em px: passou de 640px, para de
   crescer. E a pista encolheu de 240vh para 190vh — o curso
   de rolagem continua suficiente para os tres blocos
   entrarem, sem a cauda vazia no fim.
   ========================================================= */
.dep-pista__fixo{
  min-height:min(100vh, 640px);
  padding:34px 0;
}
.dep-pista .centro{margin-bottom:clamp(22px,2.4vw,34px)}

@media (min-width:901px){
  .dep-pista{min-height:190vh}
}
/* tela baixa: o palco acompanha a janela, sem sobra */
@media (min-width:901px) and (max-height:760px){
  .dep-pista__fixo{min-height:min(100vh, 560px);padding:24px 0}
  .dep-pista{min-height:170vh}
}

/* Arte em formato de story (9:16). Na coluna larga ela passava
   de 1.300px de altura e engolia a pagina. Aqui a coluna da
   arte encolhe e a do texto cresce — a arte fica do tamanho de
   um cartaz vertical ao lado do conteudo, nao por cima dele.
   A classe vem do PHP, que le a proporcao do arquivo enviado. */
@media (min-width:861px){
  .cal-grid--alta{grid-template-columns:minmax(0,.52fr) minmax(0,1.48fr)}
  .cal-grid--alta .cal-arte img{max-height:calc(100vh - 240px)}
}
@media (min-width:861px) and (max-height:820px){
  .cal-grid--alta .cal-arte img{max-height:calc(100vh - 180px)}
}

/* =========================================================
   PAGINA DA FILAPAY
   ---------------------------------------------------------
   Deixou de ser pagina de "em breve": a Filapay ja opera, com
   site e CNPJ proprios. Agora apresenta os cinco servicos dela
   como icone + titulo, no mesmo vocabulario do resto do site.
   ========================================================= */
.fpay{max-width:760px;margin:0 auto clamp(34px,4vw,56px);text-align:center}
.fpay__titulo{
  font-size:clamp(1.6rem,3.4vw,2.6rem);color:#fff;
  margin:0 0 14px;letter-spacing:-.02em;text-wrap:balance;
}
.fpay__linha{color:var(--d-txt);font-size:1.05rem;line-height:1.75;margin:0;max-width:56ch;margin-inline:auto}

.fpay__grade{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(14px,1.8vw,22px);max-width:1180px;margin-inline:auto;
}
.fpay__item{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:28px 18px 26px;text-align:center;
  background:var(--d-card);
  border:1px solid var(--d-borda);
  border-top:2px solid var(--regua-forte);
  border-radius:var(--radius);
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.fpay__item:hover{
  transform:translateY(-5px);
  background:var(--d-card2);
  border-top-color:var(--azul-claro);
}
.fpay__ico{
  width:52px;height:52px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(61,155,224,.14);
  border:1px solid rgba(120,180,235,.28);
}
.fpay__ico svg{width:24px;height:24px;fill:var(--d-azul)}
.fpay__item:hover .fpay__ico svg{fill:var(--azul-claro)}
.fpay__item h3{
  margin:0;font-size:1rem;color:#fff;line-height:1.3;letter-spacing:-.01em;
}

/* =========================================================
   FILAPAY — cartoes com mais presenca
   ---------------------------------------------------------
   Antes: caixa pequena, icone de 52px e titulo, com muito
   vazio dentro. Cinco caixas soltas na tela.

   Agora cada cartao tem uma COR propria, do azul ao verde —
   a leitura de dinheiro circulando. O risco colorido no
   rodape e o que amarra os cinco numa faixa so, em vez de
   cinco elementos independentes.
   ========================================================= */
.fpay__grade{
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  perspective:900px;
}
.fpay__item{
  position:relative;overflow:hidden;
  gap:18px;padding:34px 20px 32px;
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--cor,#4FA8E8) 9%, var(--d-card)) 0%,
    var(--d-card) 68%);
  border:1px solid var(--d-borda);
  border-top:0;
  border-radius:var(--radius);
  transform-style:preserve-3d;
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.fpay__item:hover{
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--cor,#4FA8E8) 16%, var(--d-card2)) 0%,
    var(--d-card2) 72%);
  border-color:color-mix(in srgb, var(--cor,#4FA8E8) 45%, transparent);
  box-shadow:0 20px 44px rgba(0,0,0,.36);
}

/* o risco: fecha o cartao por baixo e liga os cinco */
.fpay__risco{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--cor,#4FA8E8) 40%, transparent),
    var(--cor,#4FA8E8));
  transform-origin:left;
}
.fpay-anima .fpay__risco{transform:scaleX(0)}

.fpay__ico{
  width:60px;height:60px;border-radius:16px;
  background:color-mix(in srgb, var(--cor,#4FA8E8) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--cor,#4FA8E8) 38%, transparent);
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.fpay__ico svg{width:26px;height:26px;fill:var(--cor,#4FA8E8);transition:fill .3s ease}
.fpay__item:hover .fpay__ico{
  background:color-mix(in srgb, var(--cor,#4FA8E8) 26%, transparent);
  border-color:var(--cor,#4FA8E8);
  transform:translateY(-3px);
}
.fpay__item h3{font-size:1.02rem;line-height:1.35;max-width:15ch}

/* o fecho ficou so com o botao */
.cta-final--so-botao{padding-top:clamp(26px,3vw,38px);padding-bottom:clamp(26px,3vw,38px)}

@media (max-width:640px){
  .fpay__grade{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));perspective:none}
  .fpay__item{padding:24px 14px 22px;gap:12px}
  .fpay__ico{width:48px;height:48px;border-radius:13px}
  .fpay__ico svg{width:21px;height:21px}
  .fpay__item h3{font-size:.92rem}
}

/* Filapay: a frase principal ganha corpo (era clamp 1.6–2.6rem,
   pequena demais para ser a unica chamada da pagina), e o botao
   sobe para logo abaixo dos cartoes — sem a faixa azul de fundo,
   que a cliente pediu para tirar. */
.fpay__titulo{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.1}
.fpay__linha{font-size:clamp(1rem,1.3vw,1.15rem)}
.fpay__acao{
  display:flex;justify-content:center;
  margin-top:clamp(34px,4.5vw,58px);
}

/* Os titulos das colunas do rodape passaram de H4 para H2.
   Motivo: eram H4 sem H3 antes, criando salto de nivel (H2->H4)
   em 9 das 10 paginas — o navegador e o leitor de tela leem isso
   como estrutura quebrada. O tamanho continua o mesmo; mudou so
   a etiqueta. O H3 dos cards do blog virou H2 pela mesma razao. */
.site-footer .footer__titulo{
  color:#fff;
  font-family:'Archivo','Source Sans 3',sans-serif;
  font-weight:600;
  font-size:1rem;
  line-height:1.3;
  margin:0 0 18px;
  letter-spacing:.02em;
}

/* =========================================================
   BANNER NOVO (04/08/2026) — a sombra pode sair
   ---------------------------------------------------------
   A arte anterior era foto de escritorio: fundo claro, TV
   acesa, madeira. O texto branco so era legivel com uma
   sombra pesada por cima, e essa sombra apagava as pessoas.

   A arte nova ja nasce com o lado esquerdo limpo e escuro,
   que e onde o texto mora. Medido na propria imagem, com
   texto branco:

     faixa do menu ....... 12,0:1
     area do titulo ...... 12,6:1
     area dos botoes ..... 13,6:1
     faixa dos numeros ... 15,3:1

   Minimo exigido: 4,5:1. Ou seja, a sombra nao esta mais
   ajudando a ler — esta so escurecendo o Dimi e o Moises.
   Fica so um veu levissimo no topo, para o cabecalho nao
   encostar direto na arte.
   ========================================================= */
@media (min-width:1100px){
  .palco__veu{
    background:linear-gradient(180deg,
      rgba(0,14,38,.42) 0px,
      rgba(0,14,38,.18) 120px,
      transparent 260px);
  }
  /* a faixa escura do rodape da arte: a placa de numeros ja tem
     fundo proprio, entao nao precisa de reforco */
  .palco__veu::after{display:none}

  /* a sombra que seguia o bloco de texto (a "barra cinza" de
     31/07) existia para o texto sobreviver a foto clara. Sem a
     foto clara, ela nao tem mais funcao. */
  .palco__texto::before{display:none}
}

/* =========================================================
   TEXTOS DO BANNER — mais azuis, sem perder leitura
   ---------------------------------------------------------
   Os tons anteriores eram quase brancos com um leve toque de
   azul (#DBE9F5, #C3D8E9). Sobre o banner novo pareciam
   acinzentados. Aqui eles ganham saturacao — puxam para o azul
   da marca — mantendo brilho suficiente.

   Medido sobre o fundo do banner, rgb(13,42,88):
     subtitulo ......... 11,4:1 -> 7,8:1
     garantias .......... 9,6:1 -> 6,9:1
     rotulos ............ 9,1:1 -> 6,6:1
     descricoes ......... 6,3:1 -> 5,1:1
   Minimo exigido: 4,5:1. Todos continuam acima.
   ========================================================= */
@media (min-width:1100px){
  .palco__linha{color:#A9CFF0}
  .palco__garantias li{color:#9AC4EC}
  .placar__item .ind__txt{color:#93C0EA}
  .placar__item .ind__desc{color:#7FB0DC}
}
/* no celular o fundo do banner e mais claro (o recorte pega
   outra area da arte), entao la os tons ficam um passo acima */
@media (max-width:1099px){
  .palco__linha{color:#BBD9F4}
  .palco__garantias li{color:#AECFF0}
}

/* =========================================================
   O AZUL DO BANNER — mais forte
   ---------------------------------------------------------
   "INTELIGENCIA FISCAL" estava em #2f8fe0, com 4,11:1 sobre o
   fundo — o texto de menor contraste do banner inteiro, apesar
   de ser a palavra mais importante dele.

   O tom novo e mais claro E mais saturado ao mesmo tempo: sobe
   o brilho (contraste) sem lavar a cor. Sobre azul-marinho,
   azul so "aparece" quando se distancia do fundo nas duas
   coisas — tom e luminosidade.
   ========================================================= */
.palco__big,
.palco__texto .azul,
.palco__linha strong{
  color:#4FB0FF;
}
/* o trecho dentro do subtitulo e texto pequeno: precisa de um
   passo a mais de brilho para nao sumir ao lado do corpo claro */
/* no HTML esse trecho e um <strong>, nao .azul */
.palco__linha strong{color:#6FC2FF;font-weight:600}

/* As garantias do banner voltam ao branco, a pedido do cliente.
   Elas tinham sido puxadas para o azul junto com o resto do
   texto; em branco ganham peso e separam-se do subtitulo, que
   fica azul logo acima. */
.palco__garantias li{color:#FFFFFF}
@media (min-width:1100px){
  .palco__garantias li{color:#FFFFFF}
}
@media (max-width:1099px){
  .palco__garantias li{color:#FFFFFF}
}

/* Os icones das garantias acompanham o texto e ficam brancos.
   O circulo em volta ganha um pouco mais de presenca para o
   icone branco nao flutuar solto sobre a arte. */
.gar__ico svg{fill:#FFFFFF}
.gar__ico{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.34);
}

/* A tentativa de faixa clara atras do titulo (04/08) foi
   revertida: a caixa em volta de "INTELIGENCIA FISCAL" ficou
   pesada, o titulo de cima perdeu a quebra em duas linhas e o
   subtitulo passou a quebrar em tres linhas tortas.
   O azul claro volta — sobre fundo escuro, e o que funciona. */

/* O azul-marinho puro no titulo foi testado em 04/08 e desfeito:
   sobre o fundo do banner (#013373) da 1,08:1 de contraste — o
   texto praticamente desaparece. Fica o azul claro. */