/* ==========================================================================
   Valor Prime Solucoes Corporativas, site institucional
   Sistema de design herdado da LP /preview-valor-prime/ (navy + dourado,
   Cormorant Garamond + Poppins + JetBrains Mono).
   ========================================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --navy:#0d1c3a;
  --navy2:#142a52;
  --navy3:#0a1730;
  --gold:#c9a14a;
  --gold-dark:#a8823a;
  --gold-text:#856527;   /* dourado legivel: 5,13:1 no off, 4,79:1 no cream */
  --gold-soft:rgba(201,161,74,.12);
  --gold-border:rgba(201,161,74,.3);
  --cream:#f5f1e8;
  --off:#fbf9f4;
  --text:#1c2333;
  --muted:#5b6579;
  --line:rgba(13,28,58,.1);
  --on-navy:#f5f1e8;
  --on-navy-muted:#9fabc4;
  --nav-h:78px;
}

html{scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100vw}
body{font-family:'Poppins',sans-serif;background:var(--off);color:var(--text);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{text-wrap:balance;font-family:'Cormorant Garamond',serif;
  font-weight:700;line-height:1.15;color:var(--navy)}
p,li,.hero-sub,.section-sub,.hero-int-sub{text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
iframe{max-width:100%}

.container{max-width:1160px;margin:0 auto;padding:0 24px}

.section-label{display:inline-flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-text)}
.section-label::before{content:"";width:26px;height:2px;background:var(--gold);flex:none}
.on-dark .section-label{color:var(--gold)}
.section-head{margin-bottom:44px;max-width:760px}
.section-head h2{font-size:clamp(28px,4vw,46px);margin:14px 0 12px;letter-spacing:-.5px}
.section-sub{color:var(--muted);font-size:17px}
.on-dark h2,.on-dark h3{color:var(--on-navy)}
.on-dark .section-sub,.on-dark p{color:var(--on-navy-muted)}

.sec{padding:96px 0}
.sec.on-dark{background:linear-gradient(160deg,var(--navy2),var(--navy) 60%,var(--navy3));
  color:var(--on-navy)}

/* ---------------------------------------------------------------- botoes */
.btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:linear-gradient(135deg,#d5ae57,var(--gold) 55%,var(--gold-dark));
  color:var(--navy);font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;
  padding:17px 34px;border-radius:12px;border:none;cursor:pointer;
  box-shadow:0 12px 34px rgba(201,161,74,.35);transition:transform .2s,box-shadow .2s}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(201,161,74,.5)}
.btn-cta svg{flex:none}

.link-mais{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-weight:600;font-size:15px;color:var(--gold-text);
  border-bottom:1px solid var(--gold-border);padding-bottom:3px;transition:.2s}
.link-mais:hover{color:var(--navy);border-bottom-color:var(--navy)}
.link-mais svg{transform:rotate(-90deg)}

/* ---------------------------------------------------------------- navbar */
.navbar{position:fixed;top:0;left:0;right:0;z-index:120;
  background:rgba(251,249,244,.94);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)}
.nav-inner{max-width:1280px;margin:0 auto;padding:14px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:18px}
.nav-logo img{height:44px;width:auto}
.nav-menu{display:flex;align-items:center;gap:26px}
.menu{display:flex;align-items:center;gap:4px}
.menu>li{position:relative}
.menu>li>a{display:block;padding:10px 12px;font-size:14.5px;font-weight:500;
  color:var(--navy);border-radius:8px;transition:.18s;white-space:nowrap}
.menu>li>a:hover{background:rgba(13,28,58,.05)}
.menu>li>a.atual{color:var(--gold-text);font-weight:600}
/* A seta do submenu e absolute e ocupa 26px a direita (right:4px + 22px de largura).
   O texto precisa parar ANTES dela, senao a seta cobre a ultima letra ("Contabeis",
   "Especialidades"). O seletor tem que ser .menu>li.tem-sub>a (0,2,2): so
   .tem-sub>a (0,1,1) PERDE para .menu>li>a (0,1,2), cujo atalho `padding` apaga
   o padding-right e a regra vira codigo morto. Medido em 09/09/2026: a seta
   entrava 14px por cima do texto. */
.menu>li.tem-sub>a{padding-right:34px}
.sub-toggle{position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--navy);cursor:pointer;border-radius:6px}
.submenu{position:absolute;top:calc(100% + 8px);left:0;min-width:268px;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;
  box-shadow:0 22px 48px rgba(13,28,58,.16);opacity:0;visibility:hidden;
  transform:translateY(-8px);transition:.2s}
.tem-sub:hover>.submenu,.tem-sub:focus-within>.submenu,
.tem-sub.sub-aberto>.submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:10px 14px;font-size:14.5px;border-radius:9px;
  color:var(--text);transition:.16s}
.submenu a:hover{background:var(--gold-soft);color:var(--navy)}
.nav-extra{display:flex;align-items:center}
.nav-phone{display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',monospace;font-size:13.5px;font-weight:700;color:var(--navy)}
.nav-phone svg{color:var(--gold-text);flex:none}
.btn-nav{display:inline-flex;align-items:center;gap:9px;background:var(--navy);
  color:#fff;font-weight:600;font-size:14px;padding:12px 22px;border-radius:10px;
  white-space:nowrap;transition:background .2s,transform .2s}
.btn-nav:hover{background:var(--navy2);transform:translateY(-2px)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;background:none;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;padding:0 11px}
.nav-toggle span{display:block;height:2px;background:var(--navy);border-radius:2px;
  transition:.2s}

/* ------------------------------------------------------------ hero home */
.hero{background:radial-gradient(1100px 600px at 82% 10%,rgba(201,161,74,.16),transparent 60%),
  linear-gradient(160deg,var(--navy2),var(--navy) 55%,var(--navy3));
  padding:150px 24px 78px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(700px 500px at 75% 40%,#000,transparent);
  -webkit-mask-image:radial-gradient(700px 500px at 75% 40%,#000,transparent);
  pointer-events:none}
.hero-inner{max-width:1160px;margin:0 auto;display:grid;
  grid-template-columns:1.12fr .88fr;gap:40px;align-items:center;position:relative}
.hero-badge{display:inline-flex;align-items:center;gap:9px;background:var(--gold-soft);
  border:1px solid var(--gold-border);color:var(--gold);
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:1.8px;text-transform:uppercase;padding:8px 16px;border-radius:99px;
  margin-bottom:22px}
.hero h1{color:var(--on-navy);font-size:clamp(34px,5.2vw,60px);letter-spacing:-1px}
.hero-sub{color:var(--on-navy-muted);font-size:17.5px;margin:20px 0 30px;max-width:560px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero-tags{display:flex;flex-wrap:wrap;gap:28px;margin-top:36px}
.hero-tag span{display:block;font-size:13.5px;color:var(--on-navy-muted)}
.hero-tag strong{display:block;font-family:'Cormorant Garamond',serif;font-size:20px;
  color:var(--gold)}
.hero-foto{position:relative}
.hero-foto img{width:100%;max-width:420px;margin:0 auto;border-radius:50%;
  border:3px solid var(--gold-border);box-shadow:0 30px 70px rgba(0,0,0,.4)}
.hero-foto figcaption{text-align:center;margin-top:20px;color:var(--on-navy-muted);
  font-size:14px}
.hero-foto figcaption strong{display:block;font-family:'Cormorant Garamond',serif;
  font-size:22px;color:var(--on-navy)}

/* --------------------------------------------------------- hero interno */
.hero-int{background:radial-gradient(900px 500px at 85% 0%,rgba(201,161,74,.15),transparent 62%),
  linear-gradient(160deg,var(--navy2),var(--navy) 58%,var(--navy3));
  padding:142px 0 74px;color:var(--on-navy)}
.hero-int h1{color:var(--on-navy);font-size:clamp(30px,4.6vw,52px);letter-spacing:-.8px;
  max-width:900px}
.hero-int-sub{color:var(--on-navy-muted);font-size:17.5px;margin:18px 0 30px;max-width:660px}
.trilha{margin-bottom:22px}
.trilha ul{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:13px;color:var(--on-navy-muted)}
.trilha li+li::before{content:"/";margin-right:8px;color:var(--gold);opacity:.7}
.trilha a{color:var(--on-navy-muted);border-bottom:1px solid transparent;transition:.18s}
.trilha a:hover{color:var(--gold);border-bottom-color:var(--gold-border)}
.trilha li[aria-current]{color:var(--on-navy)}

/* ----------------------------------------------------------------- stats */
.stats{background:var(--cream);border-bottom:1px solid var(--line);padding:34px 0}
.stats-lista{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat strong{display:block;font-family:'Cormorant Garamond',serif;font-size:24px;
  line-height:1.2;color:var(--navy);margin-bottom:2px}
.stat span{font-size:14px;color:var(--muted)}

/* ----------------------------------------------------------- bloco texto */
.intro-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.intro-grid.intro-solo{grid-template-columns:1fr;max-width:820px}
.intro-txt h2{font-size:clamp(26px,3.6vw,42px);margin:14px 0 18px;letter-spacing:-.5px}
.intro-txt p{color:var(--muted);margin-bottom:16px}
.card-destaque{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:16px;padding:28px;box-shadow:0 16px 40px rgba(13,28,58,.06)}
.card-destaque h3{font-size:22px;margin-bottom:16px}
.card-destaque li{display:flex;align-items:flex-start;gap:11px;padding:9px 0;
  font-size:15px;color:var(--muted);border-bottom:1px solid var(--line)}
.card-destaque li:last-child{border-bottom:none}
.card-destaque li svg{color:var(--gold-text);flex:none;margin-top:5px}

/* ---------------------------------------------------------------- etapas */
.etapas{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.etapa{display:flex;gap:18px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:26px}
.etapa h3{font-size:21px;margin-bottom:8px}
.etapa p{font-size:15px;color:var(--on-navy-muted);line-height:1.65}
.s-num{flex:none;width:47px;height:47px;border-radius:50%;
  border:1px solid var(--gold-border);background:var(--gold-soft);color:var(--gold);
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:16px;
  display:flex;align-items:center;justify-content:center}

/* ----------------------------------------------------------------- cards */
.grade{display:grid;gap:22px}
.grade.col-3{grid-template-columns:repeat(3,1fr)}
.grade.col-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;
  transition:transform .22s,box-shadow .22s,border-color .22s;display:block}
.card h3{font-size:22px;margin-bottom:10px}
.card p{font-size:15px;color:var(--muted);line-height:1.65}
.card-link:hover{transform:translateY(-4px);border-color:var(--gold-border);
  box-shadow:0 22px 50px rgba(13,28,58,.1)}
.card-mais{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:13.5px;font-weight:600;color:var(--gold-text)}
.card-mais svg{transform:rotate(-90deg)}
.on-dark .card,.card-mvv{background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1)}
.on-dark .card p,.card-mvv p{color:var(--on-navy-muted)}
.card-vazio{background:var(--cream);border-style:dashed}

/* ------------------------------------------------------------ depoimentos */
.depo-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.depo-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;
  display:flex;flex-direction:column;gap:16px}
.estrelas{display:flex;gap:3px;color:var(--gold)}
.depo-card blockquote{font-size:15px;color:var(--muted);line-height:1.7;flex:1}
.depo-card figcaption{font-weight:600;font-size:15px;color:var(--navy)}
.depo-card figcaption span{display:block;font-weight:400;font-size:12.5px;
  color:var(--muted);letter-spacing:.4px}

/* ------------------------------------------------------------------ sobre */
.sobre-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
.sobre-foto img{border-radius:20px;box-shadow:0 26px 60px rgba(13,28,58,.18);width:100%}
.sobre-foto figcaption{margin-top:18px;font-family:'Cormorant Garamond',serif;
  font-size:20px;font-style:italic;color:var(--navy);line-height:1.4}
.sobre-foto figcaption span{display:block;font-family:'Poppins',sans-serif;
  font-style:normal;font-size:13px;color:var(--muted);margin-top:8px;letter-spacing:.4px}
.sobre-txt h2{font-size:clamp(28px,3.8vw,44px);margin:14px 0 18px;letter-spacing:-.5px}
.sobre-txt p{color:var(--muted);margin-bottom:16px}
.sobre-txt .btn-cta{margin-top:8px}
.sobre-txt .link-mais{display:block;margin-top:20px}

/* ---------------------------------------------------------------- contato */
.contato-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contato-txt h2{font-size:clamp(26px,3.6vw,42px);margin:14px 0 16px;letter-spacing:-.5px}
.contato-txt p{color:var(--muted);margin-bottom:26px}
.contato-lista{margin-bottom:28px}
.contato-lista li{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.contato-lista li span{display:block;font-family:'JetBrains Mono',monospace;
  font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:5px}
.contato-lista a{border-bottom:1px solid var(--gold-border);transition:.18s}
.contato-lista a:hover{color:var(--gold-text)}
.contato-mapa{border-radius:18px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 22px 54px rgba(13,28,58,.1)}
.contato-mapa iframe{display:block;width:100%;height:470px;border:0}

/* -------------------------------------------------------------------- faq */
.faq{max-width:860px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;
  margin-bottom:14px;overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:22px 26px;background:none;border:none;cursor:pointer;
  font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;
  color:var(--navy);text-align:left;line-height:1.25}
.faq-q i{flex:none;width:20px;height:20px;position:relative}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--gold-text);transition:transform .2s}
.faq-q i::before{width:16px;height:2px;transform:translate(-50%,-50%)}
.faq-q i::after{width:2px;height:16px;transform:translate(-50%,-50%)}
.faq-item.aberto .faq-q i::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.aberto .faq-a{max-height:520px}
.faq-a p{padding:0 26px 24px;color:var(--muted);font-size:15.5px}

/* -------------------------------------------------------------------- cta */
.cta-inner{text-align:center;max-width:760px;margin:0 auto}
.cta-inner h2{font-size:clamp(30px,4.4vw,50px);margin:16px 0 14px;letter-spacing:-.6px}
.cta-inner .section-sub{margin:0 auto 30px}
.cta-nota{display:block;margin-top:18px;font-size:13.5px;color:var(--on-navy-muted)}

/* ----------------------------------------------------------------- rodape */
.rodape{background:var(--navy3);color:var(--on-navy);padding:80px 0 0}
.rodape-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;
  padding-bottom:52px}
.rodape-marca img{height:47px;width:auto;margin-bottom:20px}
.rodape-marca p{color:var(--on-navy-muted);font-size:14.5px;max-width:330px}
.rodape-insta{display:inline-block;margin-top:16px;color:var(--gold);font-size:14px;
  border-bottom:1px solid var(--gold-border);padding-bottom:2px}
.rodape-col h3{color:var(--on-navy);font-size:19px;margin-bottom:16px}
.rodape-col li{margin-bottom:9px;font-size:14.5px;color:var(--on-navy-muted)}
.rodape-col a{transition:color .18s}
.rodape-col a:hover{color:var(--gold)}
.rodape-contato li{line-height:1.55}
.rodape-nav{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.rodape-nav li{margin-bottom:0;font-size:14px}
.rodape-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;padding-top:24px;padding-bottom:110px;
  border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;color:var(--on-navy-muted)}
.cred-stb{color:var(--on-navy-muted);border-bottom:1px solid rgba(255,255,255,.18);
  white-space:nowrap;transition:.18s}
.cred-stb:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ------------------------------------------------------------- barra fixa */
.barra-fixa{position:fixed;left:0;right:0;bottom:0;z-index:110;display:flex;
  align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;
  padding:14px 24px;background:rgba(10,23,48,.96);backdrop-filter:blur(14px);
  border-top:1px solid rgba(201,161,74,.28);color:var(--on-navy);font-size:15px;
  transition:transform .3s}
.barra-fixa.recolhida{transform:translateY(110%)}
.barra-fixa .btn-cta{padding:12px 24px;font-size:15px}
.bf-curto{display:none}

/* ------------------------- ganchos de secao (alternancia de fundo) -------
   Regra de design: nunca 3 secoes seguidas com a mesma cor de fundo.        */
.sec-alt{background:var(--cream)}
.sec-intro{padding-top:88px}
.sec-etapas{overflow:hidden}
.sec-faq{background:var(--cream)}
.sec-depo{background:var(--cream)}
.sec-sobre{background:var(--off)}
.sec-mvv{padding:88px 0}
.sec-cta{text-align:center}
.sec-contato{padding-top:84px}

/* ------------------------------------------------------------------ blog */
.sec-artigo{padding-top:72px}
.artigo{max-width:760px;margin:0 auto}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-text);padding-bottom:20px;margin-bottom:28px;
  border-bottom:1px solid var(--line)}
.post-meta span::before{content:"\00b7";margin-right:10px;color:var(--muted)}
.artigo h2{font-size:clamp(25px,3.2vw,34px);margin:44px 0 14px;letter-spacing:-.4px}
.artigo p{color:var(--muted);margin-bottom:16px}
.artigo>ul{margin:6px 0 22px}
.artigo>ul>li{position:relative;padding-left:26px;margin-bottom:11px;
  color:var(--muted);font-size:15.5px}
.artigo>ul>li::before{content:"";position:absolute;left:2px;top:11px;width:7px;
  height:7px;border-radius:2px;transform:rotate(45deg);background:var(--gold)}
.artigo .card-destaque{margin:26px 0 30px}
.post-card-meta{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-text);margin-bottom:12px}
.post-card h3{font-size:20px;line-height:1.25}

/* --------------------------------------------------------------- animacao */
.aparece{opacity:0;transform:translateY(26px);
  transition:opacity .6s ease,transform .6s ease}
.aparece.visivel{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .aparece{opacity:1;transform:none;transition:none}
  .btn-cta,.card,.card-link:hover,.btn-nav{transition:none}
  .barra-fixa{transition:none}
}

/* ============================== responsivo ============================== */
@media (max-width:1100px){
  .grade.col-4{grid-template-columns:repeat(2,1fr)}
  .grade.col-4>*:last-child:nth-child(odd){grid-column:1 / -1}
  .nav-phone{display:none}
  .menu>li>a{padding:10px 9px;font-size:14px}
}

@media (max-width:980px){
  .nav-toggle{display:flex}
  .nav-menu{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
    display:block;overflow-y:auto;background:var(--off);padding:18px 24px 120px;
    border-top:1px solid var(--line);transform:translateX(-100%);
    transition:transform .26s ease}
  body.menu-aberto .nav-menu{transform:translateX(0)}
  body.menu-aberto{overflow:hidden}
  .menu{flex-direction:column;align-items:stretch;gap:2px}
  .menu>li>a{padding:15px 6px;font-size:17px;font-weight:600;
    border-bottom:1px solid var(--line);border-radius:0}
  .tem-sub>a{padding-right:52px}
  .sub-toggle{right:6px;width:40px;height:40px;top:26px;transform:none}
  .sub-toggle svg{transition:transform .2s}
  .tem-sub.sub-aberto .sub-toggle svg{transform:rotate(180deg)}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;
    display:none;box-shadow:none;border:none;border-radius:0;padding:6px 0 12px;
    background:transparent;min-width:0}
  .tem-sub.sub-aberto>.submenu{display:block}
  .tem-sub:hover>.submenu:not(.forcado){}
  .submenu a{padding:11px 16px;font-size:15px;color:var(--muted)}
  .nav-extra{display:none}
  .btn-nav span{display:none}
  .btn-nav{padding:12px 15px}
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-text{order:2}
  .hero-foto{order:1}
  .hero-foto img{max-width:196px}
  .hero-foto figcaption{margin-top:12px}
  .hero-badge{margin-bottom:16px}
  .hero-sub{margin:14px auto 22px}
  .hero-tags{margin-top:24px}
  .hero-badge,.hero-ctas,.hero-tags{justify-content:center}
  .hero-sub{margin-left:auto;margin-right:auto}
  .sobre-grid{grid-template-columns:1fr;gap:34px}
  .contato-grid{grid-template-columns:1fr;gap:34px}
  .intro-grid{grid-template-columns:1fr;gap:32px}
  .stats-lista{grid-template-columns:repeat(2,1fr);gap:18px}
}

@media (max-width:900px){
  .sec{padding:70px 0}
  /* nunca deixar 1 caixa sozinha na ultima linha (regra grid-sem-caixa-orfa) */
  .grade.col-3>*:last-child:nth-child(odd),
  .grade.col-4>*:last-child:nth-child(odd),
  .depo-grade>*:last-child:nth-child(odd){grid-column:1 / -1}
  .grade.col-3{grid-template-columns:repeat(2,1fr)}
  .depo-grade{grid-template-columns:repeat(2,1fr)}
  .etapas{grid-template-columns:1fr}
  .rodape-grid{grid-template-columns:repeat(2,1fr);gap:34px}
  .contato-mapa iframe{height:360px}
}

@media (max-width:580px){
  body{font-size:16px}
  .container{padding:0 18px}
  .sec{padding:58px 0}
  .section-head{margin-bottom:32px}
  .hero{padding:92px 18px 44px}
  .hero-inner{gap:16px}
  .hero-foto img{max-width:140px}
  /* legenda compacta em 1 linha: o CTA do hero precisa ficar ACIMA da barra fixa */
  .hero-foto figcaption{margin-top:8px;font-size:12.5px}
  .hero-foto figcaption strong{display:inline;font-size:14px}
  .hero-foto figcaption span{display:block;font-size:11.5px}
  .hero-badge{margin-bottom:12px;font-size:10.5px;letter-spacing:1.2px;padding:7px 13px}
  .hero-sub{margin:12px auto 18px;font-size:15.5px}
  .barra-fixa{padding:10px 14px;font-size:13px}
  .hero-tags{margin-top:20px;gap:14px 22px}
  .hero-int{padding:120px 0 56px}
  .grade.col-3,.grade.col-4,.depo-grade{grid-template-columns:1fr}
  .stats-lista{grid-template-columns:1fr;gap:14px}
  .stat{display:flex;align-items:baseline;gap:10px}
  .stat strong{margin-bottom:0}
  .rodape-grid{grid-template-columns:1fr;gap:30px}
  .rodape{padding-top:56px}
  .hero-tags{gap:18px 26px}
  .card,.card-destaque,.depo-card{padding:22px}
  .faq-q{padding:18px 20px;font-size:19px}
  .faq-a p{padding:0 20px 20px}
  .barra-fixa{gap:10px;padding:9px 12px;font-size:12px;text-align:left;
    flex-wrap:nowrap;justify-content:space-between}
  .barra-fixa>span{flex:1;min-width:0;line-height:1.3}
  .hero-foto img{max-width:132px}
  .hero h1{font-size:clamp(26px,7.4vw,34px)}
  .barra-fixa .btn-cta{width:auto;flex:none;padding:11px 16px;font-size:13.5px}
  .btn-cta{width:100%;padding:16px 20px;font-size:15px}
  .hero-ctas{width:100%}
  .contato-mapa iframe{height:300px}
  .rodape-base{padding-bottom:132px;flex-direction:column;align-items:flex-start}
}

/* telas de 380px ou menos: o hero da home ficava 11px abaixo da barra fixa */
@media (max-width:380px){
  .hero-foto img{max-width:124px}
  .hero-sub{margin:10px auto 14px}
  .hero-inner{gap:12px}
}

@media (max-width:360px){
  .nav-logo img{height:38px}
  .bf-longo{display:none}
  .bf-curto{display:block}
  .barra-fixa{font-size:11.5px;padding:8px 10px}
  .btn-cta{font-size:14px;gap:9px}
}

/* ==========================================================================
   Hero da home com fundo rotativo, no padrao da referencia Alpha Contabil:
   foto full-bleed + sobreposicao navy + texto a esquerda.
   Sai a foto medalhao da Khenya (pedido da Bianca, 09/09/2026).

   O overlay e MAIS OPACO na esquerda, que e onde o texto fica: assim o
   contraste nao depende do brilho da foto que estiver passando.
   ========================================================================== */

.hero{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(560px,86svh,780px);display:flex;align-items:center;
  padding:calc(var(--nav-h) + 56px) 0 72px}

/* pilha das fotos */
.hero-bg{position:absolute;inset:0;z-index:-2;background:var(--navy)}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;animation:heroGira 18s linear infinite}
.hero-slide:nth-child(1){background-image:url(../img/hero-1.webp)}
.hero-slide:nth-child(2){background-image:url(../img/hero-2.webp);animation-delay:9s}
@keyframes heroGira{
  0%{opacity:0}      4%{opacity:1}
  46%{opacity:1}     50%{opacity:0}
  100%{opacity:0}
}

/* sobreposicao: navy forte na esquerda, aberta na direita para a foto aparecer */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(97deg,
      rgba(8,18,38,.965) 0%,
      rgba(10,23,48,.94) 34%,
      rgba(13,28,58,.80) 58%,
      rgba(13,28,58,.55) 100%),
    linear-gradient(180deg, rgba(8,18,38,.55) 0%, rgba(8,18,38,0) 26%);}

/* o texto ocupa a coluna da esquerda, como na referencia */
.hero-inner{display:block;max-width:1160px;margin:0 auto;padding:0 24px;width:100%}
.hero-text{max-width:660px}
.hero h1{color:var(--on-navy)}
.hero-sub{color:var(--on-navy-muted);max-width:600px}
.hero-badge{position:relative}

/* a faixa de numeros ganha fundo proprio para nao brigar com a foto */
.hero-tags{margin-top:34px}
.hero-tag{background:rgba(245,241,232,.07);border:1px solid rgba(245,241,232,.16);
  border-radius:12px;padding:12px 18px;backdrop-filter:blur(3px)}
.hero-tag strong{color:var(--on-navy)}
.hero-tag span{color:var(--on-navy-muted)}

/* quem pediu menos movimento fica no primeiro slide, parado */
@media (prefers-reduced-motion: reduce){
  .hero-slide{animation:none}
  .hero-slide:nth-child(1){opacity:1}
  .hero-slide:nth-child(2){opacity:0}
}

@media (max-width:900px){
  .hero{min-height:clamp(520px,80svh,680px);padding:calc(var(--nav-h) + 34px) 0 54px}
  .hero-text{max-width:100%}
  /* 3 selos em UMA linha: com 2+1 o terceiro fica sozinho, que e a caixa orfa
     que a regra grid-sem-caixa-orfa proibe. Agora que o selo tem fundo, isso
     ficaria visivel. */
  .hero-tags{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:26px}
  .hero-tag{padding:10px 8px;text-align:center;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px}
  .hero-tag strong{font-size:15px;line-height:1.15}
  .hero-tag span{font-size:11.5px;line-height:1.2}
  /* no celular a foto some atras do texto: overlay quase solido */
  .hero-bg::after{background:
      linear-gradient(180deg,
        rgba(8,18,38,.93) 0%,
        rgba(10,23,48,.90) 46%,
        rgba(13,28,58,.86) 100%);}
}

/* ==========================================================================
   VERSAO CLEAN (Bianca, 26/09/2026), com o Alpha Contabil de referencia:
   fundo branco, titulos em sans (Poppins, a sans da marca) em peso medio,
   titulo de secao centralizado com traco curto, cards e botoes mais leves.
   Fica no FIM do arquivo de proposito: vence a cascata sem mexer no resto.
   ========================================================================== */

:root{--off:#ffffff;--cream:#f6f7f9;--nav-h:92px}

body{background:#fff}
h1,h2,h3,h4,h5,h6,
.stat strong,.faq-q,.sobre-foto figcaption,.hero-tag strong,
.nav-phone,.section-label,.s-num,.contato-lista li span{
  font-family:'Poppins',sans-serif}
h1,h2,h3,h4,h5,h6{font-weight:600;letter-spacing:-.3px;line-height:1.25}

/* logo do menu maior */
.nav-inner{padding:14px 24px}
.nav-logo img{height:58px}

/* titulo de secao: centralizado, sem a etiqueta mono, com traco dourado curto */
.section-head{margin:0 auto 48px;text-align:center;max-width:720px}
.section-head h2{font-size:clamp(26px,3.1vw,36px);margin:8px 0 14px;letter-spacing:-.4px}
.section-head h2::after{content:"";display:block;width:56px;height:3px;
  background:var(--gold);border-radius:2px;margin:16px auto 0}
.section-label{font-size:16px;font-weight:600;letter-spacing:.6px;text-transform:none}
.section-label::before{display:none}
.section-sub{font-size:16px}
.intro-txt h2,.sobre-txt h2,.contato-txt h2{font-size:clamp(24px,2.9vw,34px)}

/* 1a dobra: a etiqueta vira texto simples, como na referencia */
.hero-badge,.hero-int .hero-badge{font-family:'Poppins',sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.2px;text-transform:none;background:none;border:none;padding:0;
  border-radius:0;color:var(--gold)}
.hero h1{font-size:clamp(30px,3.7vw,46px);letter-spacing:-.6px}
.hero-sub{font-size:17px}
.hero-int h1{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.5px}

/* secoes: branco e cinza bem claro, sem o creme */
.sec{padding:84px 0}
.stats{background:#fff}
.stat strong{font-size:19px;font-weight:600}

/* botoes: cor chapada, sem brilho */
.btn-cta{background:var(--gold);border-radius:10px;font-weight:600;
  box-shadow:0 6px 18px rgba(13,28,58,.12)}
.btn-cta:hover{background:#d4ad58;box-shadow:0 10px 24px rgba(13,28,58,.16)}

/* cards leves */
.card,.depo-card,.faq-item,.card-destaque{border-radius:12px;border-color:rgba(13,28,58,.08)}
.card h3{font-size:18px}
.card-link:hover{box-shadow:0 14px 34px rgba(13,28,58,.08)}
.card-destaque{box-shadow:none}
.faq-q{font-size:17px;font-weight:600}
.sobre-foto figcaption{font-size:16px;font-style:normal}
.sobre-foto img{box-shadow:0 16px 38px rgba(13,28,58,.12)}

@media (max-width:580px){
  .nav-logo img{height:48px}
  .sec{padding:64px 0}
  .section-head{margin-bottom:36px}
}

/* ==========================================================================
   Barra do topo acima do menu (Bianca, 26/09/2026): Instagram, e-mail e
   telefone, fundo navy e texto branco, como a linha de cima do Alpha.
   --nav-h passa a somar a barra (38px) + a linha do menu (86px).
   ========================================================================== */
:root{--nav-h:124px}
.topbar{background:var(--navy);color:#fff;font-size:13px;line-height:1}
.topbar-inner{max-width:1280px;margin:0 auto;padding:0 24px;height:38px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.tb-dir{display:flex;align-items:center;gap:26px}
.tb-item{display:inline-flex;align-items:center;gap:8px;color:#fff;white-space:nowrap;
  transition:color .18s}
.tb-item:hover{color:var(--gold)}
.tb-item svg{flex:none;opacity:.9}
@media (min-width:981px){ .nav-extra{display:none} }
@media (max-width:580px){
  :root{--nav-h:110px}
  .topbar-inner{height:34px;padding:0 14px}
  .tb-dir{gap:18px}
  .tb-insta span,.tb-mail span{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
}
.hero-int{padding:calc(var(--nav-h) + 56px) 0 70px}
html{scroll-padding-top:calc(var(--nav-h) + 12px)}
@media (max-width:580px){ .hero-int{padding:calc(var(--nav-h) + 34px) 0 54px} }
/* clean: menu branco; etapas cabem em 320px (com Poppins o titulo da etapa
   passou a medir mais que a coluna e empurrava o card 34px para fora) */
.navbar{background:rgba(255,255,255,.97)}
.etapas{grid-template-columns:repeat(2,minmax(0,1fr))}
.etapa>div{min-width:0}
.etapa h3{font-size:18px}
@media (max-width:900px){ .etapas{grid-template-columns:minmax(0,1fr)} }
@media (max-width:580px){ .etapa{padding:20px;gap:14px} .etapa h3{font-size:17px} }

/* ==========================================================================
   Divisao entre dobras (Bianca, 26/09/2026): ela escolheu B + D.
   B (arco suave) na dobra de ENTRADA: 1a dobra da home e topo das internas.
   D (reta com fio dourado e o losango da identidade) nas faixas ESCURAS do
   meio. O CTA do fim nao leva: o rodape embaixo tambem e escuro.
   ========================================================================== */

/* B: arco branco subindo no centro, desenhado com elipse maior que a secao
   (as pontas saem pela lateral e ficam cortadas pelo overflow da dobra) */
.hero,.hero-int{position:relative;overflow:hidden}
.hero::after,.hero-int::after{content:"";position:absolute;z-index:1;
  left:-12%;right:-12%;bottom:-1px;height:64px;background:#fff;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;pointer-events:none}
.hero-inner,.hero-int .container{position:relative;z-index:2}
@media (max-width:580px){ .hero::after,.hero-int::after{height:30px} }

/* D: fio dourado + losango. z-index:2 porque a secao seguinte (.aparece, com
   transform) cria contexto de empilhamento e cobriria a metade de baixo do losango */
.sec.on-dark:not(.sec-cta){position:relative;z-index:2;border-bottom:4px solid var(--gold)}
.sec-etapas{overflow:visible}
.sec.on-dark:not(.sec-cta)::after{content:"";position:absolute;left:50%;bottom:-13px;
  width:22px;height:22px;background:var(--gold);transform:translateX(-50%) rotate(45deg);
  box-shadow:0 0 0 6px #fff;pointer-events:none}
@media (max-width:580px){
  .sec.on-dark:not(.sec-cta)::after{width:18px;height:18px;bottom:-11px;box-shadow:0 0 0 5px #fff}
}
/* CTA do fim (Bianca, 26/09/2026): titulo em ate 2 linhas e descricao em 2 linhas
   de tamanho parecido, em todas as paginas. A largura maxima forca a quebra em 2 e o
   balance divide o texto ao meio. Medido por Range em cada pagina. */
.sec-cta h2{max-width:760px;margin-left:auto;margin-right:auto;text-wrap:balance}
.sec-cta .section-sub{max-width:640px;margin-left:auto;margin-right:auto;text-wrap:balance}
.cta-inner h2{font-size:clamp(26px,3.1vw,36px);letter-spacing:-.4px}
@media (max-width:580px){ .cta-inner h2{font-size:22px} }

/* ---------------------------------------------------- feed do Instagram (26/09/2026)
   5 posts: uma linha de 5 no computador; carrossel que desliza no tablet e no celular
   (5 em grade de 2 ou 3 colunas deixaria uma caixa sozinha na ultima linha).
   Moldura 3:4 com contain: as artes tem texto ate a borda e nao podem ser cortadas. */
.sec-insta{background:#fff}
.insta-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1000px;margin:0 auto}
.insta-post{position:relative;display:block;aspect-ratio:3/4;border-radius:12px;overflow:hidden;
  background:#fff;border:1px solid rgba(13,28,58,.08);transition:transform .2s,box-shadow .2s}
.insta-post img{width:100%;height:100%;object-fit:contain}
.insta-post:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(13,28,58,.12)}
.insta-selo{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(13,28,58,.78);color:#fff}
.insta-acao{text-align:center;margin-top:34px}
.btn-insta{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:10px;
  border:1.5px solid var(--navy);color:var(--navy);font-weight:600;font-size:15px;transition:.2s}
.btn-insta:hover{background:var(--navy);color:#fff}
@media (max-width:980px){
  .insta-grade{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
    padding-bottom:10px;scrollbar-width:none;margin:0 -24px;padding-left:24px;padding-right:24px;
    scroll-padding-left:24px}
  .insta-grade::-webkit-scrollbar{display:none}
  .insta-grade li{flex:0 0 42%;scroll-snap-align:start}
}
@media (max-width:580px){
  .insta-grade{margin:0 -18px;padding-left:18px;padding-right:18px;scroll-padding-left:18px}
  .insta-grade li{flex:0 0 72%}
}
/* FAQ centralizado nas paginas de servico e especialidade (26/09/2026) */
.faq{margin-left:auto;margin-right:auto}
/* logo do rodape 3x maior (26/09/2026): 47px -> 141px de altura */
.rodape-marca img{height:141px;width:auto;margin-bottom:22px}
@media (max-width:580px){ .rodape-marca img{height:120px} }
/* selo da 1a dobra com a palavra-chave inteira: em 1 linha tambem em 320px (26/09/2026) */
@media (max-width:360px){ .hero .hero-badge{font-size:13px;letter-spacing:0} }
/* Onde atendemos (26/09/2026): cidades como selos, no estilo das etiquetas do site */
.sec-regiao{background:#fff}
.regiao-lista{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1040px;margin:0 auto}
.regiao-lista li{padding:11px 20px;border-radius:999px;border:1px solid rgba(13,28,58,.12);
  background:#f6f7f9;color:var(--navy);font-weight:500;font-size:15px;white-space:nowrap}
.sec-faq{background:#f6f7f9}
/* 1a dobra em 320px: o botao ficava 14px atras da barra fixa */
@media (max-width:360px){ .hero{padding-top:calc(var(--nav-h) + 18px)} }
/* Depoimentos em carrossel rotativo (26/09/2026): 3 / 2 / 1 por vez, gira a cada 5s,
   pausa no mouse/toque, parado para quem pediu menos movimento (JS no layout) */
.depo-carrossel{position:relative}
.depo-grade.depo-trilha{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding:6px 2px 10px}
.depo-trilha::-webkit-scrollbar{display:none}
.depo-trilha>.depo-card{flex:0 0 calc((100% - 44px) / 3);scroll-snap-align:start}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;
  border-radius:50%;background:#fff;border:1px solid rgba(13,28,58,.12);color:var(--navy);
  box-shadow:0 6px 18px rgba(13,28,58,.12);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,color .2s}
.car-nav:hover{background:var(--navy);color:#fff}
.car-prev{left:-22px}.car-next{right:-22px}
.car-prev svg{transform:rotate(90deg)}.car-next svg{transform:rotate(-90deg)}
.sem-setas .car-nav{display:none}
@media (max-width:900px){
  .depo-trilha>.depo-card{flex-basis:calc((100% - 22px) / 2)}
  .car-prev{left:-10px}.car-next{right:-10px}
}
@media (max-width:580px){
  .depo-trilha>.depo-card{flex-basis:100%}
  .car-nav{width:38px;height:38px}
  .car-prev{left:-8px}.car-next{right:-8px}
}
@media (prefers-reduced-motion: reduce){ .depo-grade.depo-trilha{scroll-behavior:auto} }
/* foto do escritorio embaixo da foto da Khenia, na secao Quem cuida da sua empresa */
.sobre-foto-escritorio{margin-top:16px}
/* botao da 1a dobra com o texto da oferta, em 1 linha tambem em 320px */
@media (max-width:360px){ .hero .hero-ctas .btn-cta{font-size:14px;padding:14px 12px;gap:8px;white-space:nowrap} }
/* 1a dobra centralizada em Blog e Contato (26/09/2026) */
.hero-int--centro .container{text-align:center}
.hero-int--centro .trilha ul{justify-content:center}
.hero-int--centro .hero-int-sub{margin-left:auto;margin-right:auto}
/* link das avaliacoes centralizado, como o resto da secao */
.sec-depo .link-mais{display:table;margin:22px auto 0}
/* Descricoes do site inteiro (Bianca, 26/09/2026): quando quebram, as linhas saem do mesmo
   tamanho, alinhadas ao titulo. balance (e nao pretty) divide o texto ao meio. */
.section-sub,.hero-sub,.hero-int-sub,.cta-inner .section-sub{text-wrap:balance}
/* Blog: foto de capa no post e no card, sem data e sem tempo de leitura (26/09/2026) */
.post-capa{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin-bottom:34px;
  box-shadow:0 14px 34px rgba(13,28,58,.1)}
.post-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.post-card-capa{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.post-card h3,.post-card p,.post-card .card-mais{margin-left:24px;margin-right:24px}
.post-card h3{margin-top:22px}
.post-card .card-mais{margin-bottom:24px;margin-top:auto;padding-top:14px}
/* Contato: o mapa acompanha a rolagem das informacoes da esquerda (26/09/2026).
   Funciona porque o body usa overflow-x:clip (hidden anularia o sticky). */
@media (min-width:981px){
  .contato-mapa{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
}
/* 1a dobra com mais respiro em cima e embaixo, em todas as paginas (Bianca, 26/09/2026).
   O "embaixo" conta a partir do arco (64px no computador, 30px no celular). */
.hero{padding:calc(var(--nav-h) + 100px) 0 150px}
.hero-int{padding:calc(var(--nav-h) + 96px) 0 150px}
@media (max-width:900px){
  .hero{padding:calc(var(--nav-h) + 60px) 0 100px}
  .hero-int{padding:calc(var(--nav-h) + 64px) 0 100px}
}
@media (max-width:580px){
  .hero-int{padding:calc(var(--nav-h) + 60px) 0 96px}
}
@media (max-width:360px){ .hero{padding-top:calc(var(--nav-h) + 36px)} }
@media (max-width:340px){ .hero{padding-top:calc(var(--nav-h) + 18px)} }
/* Duas fotos, opcao A "sobrepostas" (Bianca escolheu em 26/09/2026): foto principal grande,
   a segunda por cima no canto com borda branca, e um fio dourado atras.
   Modelo salvo na skill: .claude/skills/site-cliente/references/fotos-duplas.md */
.fotos-duplas{position:relative;isolation:isolate;padding:0 0 70px 0}
.fotos-duplas::before{content:"";position:absolute;left:-14px;top:-14px;width:40%;height:44%;
  border:3px solid var(--gold);border-radius:18px;z-index:-1}
.sobre-foto .fotos-duplas .f1{width:82%;border-radius:18px;box-shadow:0 20px 44px rgba(13,28,58,.16)}
.sobre-foto .fotos-duplas .f2{position:absolute;right:0;bottom:0;width:56%;border-radius:14px;
  border:6px solid #fff;box-shadow:0 18px 40px rgba(13,28,58,.2);margin:0}
@media (max-width:580px){
  .fotos-duplas{padding-bottom:54px}
  .fotos-duplas::before{left:-8px;top:-8px}
  .sobre-foto .fotos-duplas .f2{border-width:4px}
}
/* Paginas de servico e de especialidade: 1a dobra com 2 fotos de fundo rotativas e a mesma
   sobreposicao navy da home (Bianca, 26/09/2026). Reusa .hero-bg/.hero-slide da home. */
.hero-int--fundo{isolation:isolate;background:var(--navy)}
.hero-int--fundo .hero-bg{position:absolute;inset:0;z-index:-2}
/* Quem cuida da sua empresa: fotos maiores no computador (Bianca, 26/09/2026) */
@media (min-width:981px){
  .sec-sobre .sobre-grid{grid-template-columns:1.04fr .96fr;gap:60px}
  .sobre-foto .fotos-duplas .f1{width:84%}
  .sobre-foto .fotos-duplas .f2{width:58%}
}
/* Submenu (Servicos e Especialidades): hover em azul-marinho meio transparente com texto
   branco, no lugar do amarelo-claro (Bianca, 26/09/2026). Contraste ~10:1. */
.submenu a:hover,.submenu a:focus-visible{background:rgba(13,28,58,.85);color:#fff}
/* selo do atendimento online para todo o Brasil, no azul da marca (26/09/2026) */
.regiao-lista li.regiao-brasil{background:var(--navy);border-color:var(--navy);color:#fff}
/* Faixa de numeros com 5 itens (Todo o Brasil + 4): 5 colunas no computador e 3 no tablet,
   para nao sobrar item sozinho na ultima linha (26/09/2026) */
@media (min-width:1201px){ .stats-lista{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px} .stat strong{font-size:17px} }
@media (min-width:581px) and (max-width:1200px){ .stats-lista{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* Topicos com icone na 1a dobra de todas as paginas (26/09/2026) */
.hero-destaques{display:flex;flex-wrap:wrap;gap:10px 26px;margin:-6px 0 28px;list-style:none}
.hero-destaques li{display:flex;align-items:center;gap:9px;color:var(--on-navy);font-weight:500;font-size:15.5px}
.hero-destaques svg{color:var(--gold);flex:none}
@media (max-width:980px){ .hero .hero-destaques{justify-content:center} }
@media (max-width:580px){
  .hero-destaques{flex-direction:column;gap:8px;margin:-4px 0 22px}
  .hero .hero-destaques{align-items:center}
  .hero-destaques li{font-size:14.5px}
}
/* Com os topicos, o botao da home passou da barra fixa: compensado no espaco de cima
   (ainda maior que o original de 56px) e nos topicos compactos nas telas pequenas */
@media (min-width:901px){ .hero{padding-top:calc(var(--nav-h) + 78px)} }
@media (max-width:360px){
  .hero{padding-top:calc(var(--nav-h) + 14px)}
  .hero .hero-destaques{margin:-8px 0 14px;gap:5px}
  .hero .hero-destaques li{font-size:13.5px}
}
/* Topicos sempre um por linha na home e nas paginas de servico/especialidade (26/09/2026) */
.hero .hero-destaques,.hero-int--fundo .hero-destaques{flex-direction:column;gap:10px}
.hero-int--fundo .hero-destaques{align-items:flex-start}
/* Barra fixa do rodape removida do site (Bianca, 26/09/2026): o rodape nao precisa mais
   reservar espaco para ela no celular */
@media (max-width:580px){ .rodape-base{padding-bottom:28px} }
/* Icone sempre a DIREITA nos botoes de CTA (Bianca, 26/09/2026). row-reverse inverte a
   ordem visual sem mexer no HTML; o texto continua sendo lido primeiro pelo leitor de tela. */
.btn-cta,.btn-nav,.btn-insta,.hb-cta,.hb2-cta{flex-direction:row-reverse}

/* ===== 1a dobra da HOME aprovada pela Bianca (26/09/2026): versao 2, opcao C, linha dourada ===== */
/* ==========================================================================
   1a dobra da home, VERSAO 2 (Bianca, 26/09/2026):
   - escrita no estilo da arte do Instagram "Onde sua empresa perde dinheiro":
     Poppins, azul-marinho com palavras-chave em dourado, fio dourado vertical
   - detalhes de fundo da arte: grade de pontos e grafico de linha subindo
   - imagem como no banner de referencia: foto ocupando o lado direito, borda
     esquerda em curva grande, sem circulo. Foto: escritorio da Valor Prime.
   ========================================================================== */
.hero-banner2{position:relative;overflow:hidden;isolation:isolate;background:#f5f6f8;
  padding:calc(var(--nav-h) + 76px) 0 96px;min-height:620px}
/* grade de pontos, canto superior esquerdo (como na arte) */
.hb2-pontos{position:absolute;left:3%;top:calc(var(--nav-h) + 24px);width:170px;height:110px;z-index:-1;
  background-image:radial-gradient(circle,rgba(13,28,58,.22) 2px,transparent 2.5px);background-size:22px 22px}
/* grafico de linha subindo, bem suave, atras do texto */
.hb2-grafico{position:absolute;left:30%;bottom:36px;width:34%;height:auto;z-index:-1;opacity:.5}
/* foto do lado direito, borda esquerda em curva grande */
.hb2-foto{position:absolute;top:0;right:0;bottom:0;width:46%;z-index:-1;
  clip-path:ellipse(88% 118% at 100% 50%)}
.hb2-foto img{width:100%;height:100%;object-fit:cover;object-position:88% 50%}
.hb2-foto::after{content:"";position:absolute;inset:0;
  background:rgba(13,28,58,.32)}  /* camada leve de azul-marinho sobre a foto (Bianca, 26/09) */
/* fio dourado acompanhando a curva: mesma elipse, 6px mais larga, atras da foto */
.hb2-aro{position:absolute;top:0;right:0;bottom:0;width:calc(46% + 6px);z-index:-2;pointer-events:none;
  background:var(--gold);clip-path:ellipse(88% 118% at 100% 50%)}
.hb2-inner{max-width:1160px;margin:0 auto;padding:0 24px}
.hb2-texto{max-width:520px}
.hb2-texto h1{font-size:clamp(32px,3.6vw,52px);line-height:1.1;font-weight:600;color:var(--navy);
  letter-spacing:-1px;padding-left:22px;border-left:5px solid var(--gold);text-wrap:balance}
.hb2-texto h1 em{font-style:normal;color:#b58b34}
.hb2-texto .hb2-desc{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:#1c2a44;margin-top:20px}
.hb2-texto .hb2-desc strong{font-weight:600;color:var(--navy)}
.hb2-texto .hb2-desc b{font-weight:600;color:#b58b34}
.hb2-cta{margin-top:30px;display:inline-flex;align-items:center;gap:12px;padding:17px 30px;border-radius:12px;
  background:var(--navy);color:#fff;font-weight:600;font-size:16px;
  box-shadow:0 12px 26px rgba(13,28,58,.22);transition:transform .2s,background .2s}
.hb2-cta:hover{transform:translateY(-2px);background:#142a52}
.hb2-cta svg{flex:none;color:var(--gold)}
/* caixa com icone, como a da arte */
.hb2-caixa{margin-top:26px;display:flex;align-items:center;gap:16px;max-width:520px;padding:14px 18px;
  border:1.5px solid var(--gold);border-radius:14px;background:rgba(255,255,255,.75)}
.hb2-caixa .hb2-ico{flex:none;width:52px;height:52px;border-radius:50%;background:var(--navy);
  display:flex;align-items:center;justify-content:center;color:var(--gold)}
.hb2-caixa p{font-size:15px;line-height:1.45;color:#1c2a44}
.hb2-caixa p b{color:#b58b34;font-weight:600}
@media (min-width:901px) and (max-width:1200px){
  .hb2-foto{width:40%}
  .hb2-aro{width:calc(40% + 6px)}
  .hb2-texto{max-width:500px}
}
@media (max-width:900px){
  .hero-banner2{padding:calc(var(--nav-h) + 30px) 0 0;min-height:0}
  .hb2-pontos{display:none}
  .hb2-grafico{left:auto;right:-10%;top:calc(var(--nav-h) + 10px);bottom:auto;width:70%}
  .hb2-foto{position:relative;width:100%;height:300px;margin-top:36px;clip-path:ellipse(120% 100% at 50% 100%)}
  .hb2-foto::after{background:rgba(13,28,58,.32)}
  .hb2-aro{display:none}
  .hb2-texto{max-width:none}
}
@media (max-width:580px){
  .hb2-cta{width:100%;justify-content:center;font-size:15px;padding:16px 14px}
  .hb2-caixa{display:none}
  .hb2-foto{height:220px}
}

/* texto da esquerda um pouco mais para a esquerda (Bianca, 26/09/2026): ~60px */
.hb2-inner{max-width:1280px}


.hb2-foto::after{background:linear-gradient(90deg,rgba(13,28,58,.62) 0,rgba(13,28,58,.30) 45%,rgba(13,28,58,.12) 100%)}
.hb2x-fio2{position:absolute;top:0;right:0;bottom:0;width:calc(46% + 22px);z-index:-3;pointer-events:none;
  background:rgba(201,161,74,.55);clip-path:ellipse(88% 118% at 100% 50%)}
.hb2x-fio2::after{content:"";position:absolute;inset:0;background:#f5f6f8;clip-path:ellipse(87.6% 118% at 100% 50%)}
.hb2x-pontos{position:absolute;right:3%;top:calc(var(--nav-h) + 30px);width:150px;height:96px;z-index:1;
  background-image:radial-gradient(circle,rgba(201,161,74,.8) 2px,transparent 2.5px);background-size:22px 22px}
@media (min-width:901px) and (max-width:1200px){.hb2x-fio2{width:calc(40% + 22px)}}
@media (max-width:900px){.hb2x-fio2,.hb2x-pontos{display:none}
  .hb2-foto::after{background:linear-gradient(180deg,rgba(13,28,58,.5) 0,rgba(13,28,58,.15) 100%)}}
/* pontos cinzas do canto: so em tela larga; com o texto mais a esquerda eles cobriam o titulo */
@media (max-width:1599px){ .hb2-pontos{display:none} }
/* 1a dobra da home: 2 fotos alternando no lugar da foto (Bianca, 26/09/2026): escritorio inteiro e recorte nas pessoas (so fotos do escritorio, pedido dela).
   Troca suave a cada 7s; quem pediu menos movimento fica so na primeira. */
.hb2-foto img{position:absolute;inset:0}
.hb2-foto .hb2-f2{object-position:50% 50%;opacity:0;animation:hb2Troca 14s ease-in-out infinite}
@keyframes hb2Troca{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){ .hb2-foto .hb2-f2{animation:none;opacity:0} }
/* grafico decorativo nao passa da borda no celular */
@media (max-width:900px){ .hb2-grafico{right:0;width:60%} }
/* Depoimentos da home com o fundo azul-marinho da secao "Mais que rotina fiscal" (26/09/2026) */
.sec-depo.on-dark{background:linear-gradient(160deg,var(--navy2),var(--navy) 60%,var(--navy3))}
.sec-depo.on-dark .link-mais{color:var(--gold);border-bottom-color:rgba(201,161,74,.45)}
.sec-depo.on-dark .link-mais:hover{color:#fff;border-bottom-color:#fff}
/* pontos dourados da 1a dobra: sobre as cortinas, longe dos rostos das duas fotos */
.hb2x-pontos{left:auto;right:3%;top:auto;bottom:40px}  /* canto de baixo: so moveis nas duas fotos */
/* 1a dobra da home: camada azul-marinho no mesmo tom da 1a dobra antiga (Bianca, 26/09/2026) */
.hero-banner2 .hb2-foto::after{background:
  linear-gradient(90deg,rgba(10,23,48,.82) 0,rgba(13,28,58,.70) 45%,rgba(13,28,58,.55) 100%),
  linear-gradient(180deg,rgba(8,18,38,.35) 0,rgba(8,18,38,0) 30%)}
@media (max-width:900px){
  .hero-banner2 .hb2-foto::after{background:linear-gradient(180deg,rgba(10,23,48,.80) 0,rgba(13,28,58,.60) 100%)}
}
/* Feed do Instagram na home com cards maiores (Bianca, 26/09/2026): a secao fica mais larga
   que o container padrao so no computador (de ~235px para ~300px por card) */
@media (min-width:981px){
  .sec-insta .container{max-width:1340px}
  .sec-insta .insta-grade{max-width:none;gap:24px}
}
/* 1a dobra da home: um pouco mais de espaco acima do titulo (Bianca, 26/09/2026) */
.hero-banner2{padding-top:calc(var(--nav-h) + 100px)}
@media (max-width:900px){ .hero-banner2{padding-top:calc(var(--nav-h) + 44px)} }

/* fotos da 1a dobra: predios comerciais gerados por IA gratuita (FLUX), 26/09/2026 */
.hero-banner2 .hb2-f1{object-position:40% 50%}  /* 1a: avenida ao por do sol */
.hero-banner2 .hb2-f2{object-position:88% 50%}  /* 2a: escritorio, rapaz do meio e moca */
/* Faixa de numeros no celular (Bianca, 26/09/2026): "Todo o Brasil" em destaque na 1a linha
   e os outros 4 em 2 colunas, titulo em cima e descricao embaixo (antes ficavam lado a lado
   e os titulos longos quebravam desalinhando a linha) */
@media (max-width:580px){
  .stats{padding:26px 0}
  .stats-lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px}
  .stat{display:block}
  .stat:first-child{grid-column:1/-1;text-align:center;padding-bottom:14px;border-bottom:1px solid var(--line)}
  .stat strong{font-size:17px;line-height:1.25}
  .stat span{display:block;font-size:13.5px;margin-top:3px}
}
/* Icones dos cards (Bianca, 26/09/2026): um por card, escolhido pelo assunto (site-build/icones.py) */
.card-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;
  background:rgba(201,161,74,.14);color:var(--gold-text);margin-bottom:16px;flex:none;transition:background .2s,color .2s}
.on-dark .card-ico,.card-mvv .card-ico{background:rgba(201,161,74,.16);color:var(--gold)}
.card-link:hover .card-ico{background:var(--navy);color:var(--gold)}
.post-card .card-ico{display:none}