/* ==========================================================================
   CONTABILIZA-E — pages/contabilizae.css · só o específico da home do subdomínio
   Fiel ao Figma "contabiliza-e" (frame 1920×5218). 1 px do Figma = var(--u).
   Carregar DEPOIS de /assets/css/base.css.
   ========================================================================== */

/* ---------- botões verdes 316×66 / 316×50 (Group 3 / 5 / 6): texto @ +35, seta @ -43 ---------- */
.brand-contabilizae .btn-green,
.brand-contabilizae .nav .btn-green{
  min-width:clamp(220px,calc(316*var(--u)),316px);
  padding:0 clamp(24px,calc(43*var(--u)),43px) 0 clamp(20px,calc(35*var(--u)),35px);
}

/* ---------- HERO (995 px petróleo + sunburst 1294×1294 @ x=998 y=12, opacidade 20% já no SVG) ---------- */
.hero-contab{background:var(--petrol);color:var(--white)}
.hero-contab .sunburst{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  left:calc(998*var(--u));top:calc(12*var(--u));
  width:calc(1294*var(--u));height:calc(1294*var(--u));max-width:none;
}
.hero-contab .hero-copy{padding-left:calc(65*var(--u))}          /* h1 @ x=161 / sub @ x=165 */
.hero-contab .h1{max-width:779px}
.hero-contab .lead{max-width:647px}
.hero-contab .btn-row{margin-top:clamp(28px,calc(59*var(--u)),59px);align-items:flex-end}   /* botão y=707 · link y=726–773 (sublinhado rente ao pé do botão) */

/* ---------- FRASE CENTRAL (y 1144–1306, centrada, 40/53.6) ---------- */
.frase{padding:clamp(72px,calc(149*var(--u)),149px) 0 clamp(80px,calc(173*var(--u)),173px);text-align:center}
.frase .h2-40{max-width:1102px;margin-inline:auto}

/* ---------- SOBRE · card 1764×731 r20 @ x=78 (22 px além do gutter) ---------- */
.sobre-card{
  position:relative;display:grid;grid-template-columns:calc(739*var(--u)) minmax(0,1fr);
  min-height:clamp(420px,calc(731*var(--u)),731px);
  margin-inline:calc(-22*var(--u));
  border-radius:20px;overflow:hidden;
  background:var(--petrol);color:var(--white);
}
.sobre-foto{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.sobre-quote{
  display:flex;align-items:center;
  padding:0 clamp(24px,calc(100*var(--u)),100px) calc(21*var(--u)) clamp(24px,calc(115*var(--u)),115px);   /* texto @ x=932 · centro 10 px acima */
}
.sobre-quote p{font-size:var(--fs-48);font-style:italic;font-weight:400;line-height:var(--lh);max-width:732px}

/* ---------- O QUE FAZEMOS · título y=2395 · ícones y≈2585–2643 · títulos y=2669 · textos y=2725 ---------- */
.fazemos{padding-top:clamp(80px,calc(185*var(--u)),185px)}
.fazemos .h2{text-align:center}
.fazemos-grid{
  display:grid;grid-template-columns:calc(620*var(--u)) calc(608*var(--u)) minmax(0,1fr);gap:0;
  padding-left:calc(39*var(--u));                                  /* colunas @ x=139 / 759 / 1367 */
  margin-top:clamp(56px,calc(126*var(--u)),126px);
}
.fazemos-item{min-width:0;padding-right:clamp(12px,calc(40*var(--u)),40px)}
/* ícones: caixa 58 px (y 2585–2643) alinhada ao topo; cada SVG exportado tem ~3 px de traço ao redor → topos visuais 2585 / 2596 / 2604 */
.fz-ico{display:flex;align-items:flex-start;height:clamp(40px,calc(58*var(--u)),58px);margin-bottom:clamp(16px,calc(26*var(--u)),26px)}
.fz-ico img{width:auto}
.fz-ico-1 img{height:clamp(36px,calc(52*var(--u)),52px);margin:calc(-3*var(--u)) 0 0 calc(3*var(--u))}
.fz-ico-2 img{height:clamp(35px,calc(51*var(--u)),51px);margin:calc(8*var(--u)) 0 0 calc(-2*var(--u))}
.fz-ico-3 img{height:clamp(31px,calc(44*var(--u)),44px);margin:calc(16*var(--u)) 0 0 calc(-3*var(--u))}
.fazemos-item .h4{margin-bottom:clamp(14px,calc(24*var(--u)),24px)}
.fazemos-item .lead{max-width:471px}
.fazemos-item:nth-child(2) .lead{max-width:435px}
.fazemos-item:nth-child(3) .lead{max-width:426px;margin-top:calc(-7*var(--u))}   /* 273:1100 está em y=2718 (7 px acima dos outros) */

/* ---------- CASES · depoimento (faixa 549 px #F9F9F9 @ y=2996) ---------- */
.cases{padding-top:clamp(80px,calc(204*var(--u)),204px)}
.depo{
  position:relative;display:grid;grid-template-columns:calc(1111*var(--u)) minmax(0,1fr);
  min-height:clamp(360px,calc(549*var(--u)),549px);
  background:#F9F9F9;color:var(--petrol);
}
.depo-body{position:relative;min-width:0}
.depo-quote{
  position:relative;margin:0;
  padding:calc(202*var(--u)) clamp(16px,calc(60*var(--u)),60px) calc(60*var(--u)) calc(216*var(--u));   /* texto @ x=216 y=+202 */
}
.depo-quote p{font-size:var(--fs-48);font-style:italic;font-weight:400;line-height:var(--lh);max-width:732px}
.depo-quote cite{
  display:block;margin-top:clamp(28px,calc(81*var(--u)),81px);                  /* autor y=+411 */
  font-style:normal;font-size:var(--fs-16);font-weight:400;line-height:var(--lh);letter-spacing:.13em;text-transform:uppercase;
}
.depo-quote .q{position:absolute;font-size:var(--fs-128);font-weight:400;line-height:var(--lh);font-style:normal;color:var(--petrol)}
.depo-quote .q-open{left:calc(173*var(--u));top:calc(40*var(--u))}             /* 273:1115 · 29×172 @ 173,+40 */
.depo-quote .q-close{left:calc(891*var(--u));top:calc(336*var(--u))}           /* 273:1120 · 82×172 @ 891,+336 */
.depo-foto{width:100%;height:100%;object-fit:cover;object-position:60% 50%}

/* números +500 / +20 / 100% (96/128.64 500) · x=214/798/1328 · labels 24 @ +13 ---------- */
.numeros{
  display:grid;grid-template-columns:calc(584*var(--u)) calc(530*var(--u)) minmax(0,1fr);gap:0;
  padding-left:calc(114*var(--u));
  margin-top:clamp(72px,calc(167*var(--u)),167px);
}
.numero{min-width:0}
.numero b{display:block;font-size:var(--fs-96);font-weight:500;line-height:var(--lh);letter-spacing:.01em;text-transform:uppercase;color:var(--petrol)}
.numero span{display:block;margin-top:calc(13*var(--u));font-size:var(--fs-24);line-height:var(--lh);color:var(--petrol)}
.numero:nth-child(1) span{padding-left:calc(19*var(--u))}
.numero:nth-child(2) b,.numero:nth-child(3) b{margin-top:calc(5*var(--u))}                 /* +20 / 100% em y=3717 (5 px abaixo do +500) */
.numero:nth-child(2) b{padding-left:calc(26*var(--u))}                                     /* glifo do +20 começa em x=826 no frame */
.numero:nth-child(3) b{padding-left:calc(6*var(--u))}
.numero:nth-child(2) span{padding-left:calc(38*var(--u));margin-top:calc(15*var(--u))}
.numero:nth-child(3) span{padding-left:calc(20*var(--u));margin-top:calc(15*var(--u))}

/* ---------- CTA final · faixa #F6F7F9 541 px (título y=+163 · botão +42 · pé 162) ---------- */
.cta-final{
  margin-top:clamp(64px,calc(143*var(--u)),143px);
  padding:clamp(72px,calc(163*var(--u)),163px) 0 clamp(72px,calc(162*var(--u)),162px);
  background:var(--snow);text-align:center;
}
.cta-final .h2-40{max-width:890px;margin-inline:auto;color:var(--petrol-2)}
.cta-final .cta-btn{margin-top:clamp(24px,calc(42*var(--u)),42px)}
.cta-final .btn{justify-content:space-between}

/* ---------- rodapé: ajustes finos ao frame contabiliza-e (logo y+65 · tagline y+173 · social y+311) ---------- */
.brand-contabilizae .ftr-logo{margin-top:13px}
.brand-contabilizae .ftr-tagline{margin-top:46px}
.brand-contabilizae .ftr-line{margin:0}                                        /* Line 22: x=100 → 1820 */
@media (min-width:1025px){
  .brand-contabilizae .ftr-grid{gap:0}                                         /* colunas exatamente em x=696 / 1173 / 1575 (o gap 24 do base.css deslocava +3/+10 px) */
}
@media (min-width:1025px) and (max-width:1440px){
  .brand-contabilizae .ftr-grid{grid-template-columns:596fr 477fr 402fr auto}  /* coluna Contato no tamanho do texto: "Fale com um especialista" numa linha só */
}

/* ---------- reveal escalonado ---------- */
.fazemos-item:nth-child(2){--d:.12s}
.fazemos-item:nth-child(3){--d:.24s}
.numero:nth-child(2){--d:.12s}
.numero:nth-child(3){--d:.24s}

/* ==========================================================================
   RESPONSIVO — abaixo de 1920 tudo escala por --u; ≤1024 empilha; ≤640 mobile
   ========================================================================== */
@media (max-width:1280px){
  .hero-contab .sunburst{left:48%;top:-2%;width:78vw;height:78vw}
}
@media (max-width:1024px){
  .hero-contab{padding-bottom:clamp(48px,8vw,80px)}
  .hero-contab .sunburst{left:42%;top:-6%;width:92vw;height:92vw}
  .hero-contab .hero-copy{padding-left:0}
  .hero-contab .btn-row{margin-top:36px;align-items:center}

  .frase{padding:64px 0 64px}
  .frase .h2-40 br{display:none}

  .sobre-card{grid-template-columns:1fr;margin-inline:0;min-height:0}
  .sobre-foto{height:clamp(260px,56vw,520px)}
  .sobre-quote{padding:40px 32px 44px}
  .sobre-quote p{max-width:none}

  .fazemos{padding-top:72px}
  .fazemos-grid{grid-template-columns:1fr 1fr;gap:40px 32px;padding-left:0;margin-top:48px}
  .fz-ico{height:auto;margin-bottom:16px}
  .fz-ico img{margin:0}
  .fazemos-item{padding-right:0}
  .fazemos-item:nth-child(3) .lead{margin-top:0}

  .cases{padding-top:72px}
  .depo{grid-template-columns:1fr;min-height:0}
  .depo-quote{padding:40px 32px 44px}
  .depo-quote .q{position:static;display:block;font-size:clamp(56px,10vw,96px);line-height:1}
  .depo-quote .q-open{margin-bottom:8px}
  .depo-quote .q-close{text-align:right;margin-top:8px}
  .depo-quote p{max-width:none}
  .depo-quote cite{margin-top:12px}
  .depo-foto{height:clamp(240px,52vw,480px)}

  .numeros{grid-template-columns:repeat(3,minmax(0,1fr));padding-left:0;margin-top:56px}
  .numero b{margin-top:0!important;padding-left:0!important}
  .numero span{padding-left:0!important;margin-top:6px!important}

  .cta-final{margin-top:64px;padding:64px 0}
  .cta-final .h2-40 br{display:none}
}
@media (max-width:640px){
  .hero-contab .sunburst{left:30%;top:-4%;width:120vw;height:120vw}
  .hero-contab .h1 br{display:none}
  .hero-contab .btn-row{align-items:flex-start;flex-direction:column}
  .frase{padding:48px 0}
  .sobre-quote{padding:32px 20px 36px}
  .fazemos-grid{grid-template-columns:1fr;gap:36px}
  .depo-quote{padding:28px 20px 32px}
  .numeros{grid-template-columns:1fr;gap:28px}
  .cta-final{margin-top:48px;padding:56px 0}
  .brand-contabilizae .ftr-line{margin-top:36px}                              /* rodapé em 2 colunas: respiro entre a última lista e a linha */
}