/* ============================================================
   STAZON CONTABILIDADE — servicos.css
   Estilos exclusivos da página "Serviços" (servicos.html).
   Tudo o que já existe no site — container, seção, botão, título,
   header e rodapé — vem de style.css; aqui só entram as peças que
   esta página inventou: o topo navy, a trilha e os três formatos
   de serviço.
   ============================================================ */

/* ============================================================
   MENU — item da página atual
   ============================================================ */
/* O "Serviços" do cabeçalho é um <button>, não um link: sem o aria-current
   nada indicaria que a página aberta é esta. */
.nav__toggle[aria-current='page'] {
  color: var(--color-primary);
}
/* A pastilha é só do desktop: o fundo é o mesmo do hover do menu, então o
   item ligado e o item sob o mouse falam a mesma língua. No drawer o item
   ocupa a largura toda em 60px de altura — ali a mesma pastilha viraria uma
   barra chapada, e a cor sozinha já resolve. */
@media (min-width: 1024px) {
  .nav__toggle[aria-current='page'] {
    background: var(--color-primary-soft);
  }
}

/* ============================================================
   TOPO DA PÁGINA
   ============================================================ */
/* Faixa navy no lugar do banner da home. A altura é menor de propósito: o
   banner do index precisa segurar foto e cartões, aqui o topo só apresenta
   a página — quem tem de puxar o olho é a lista de serviços. */
.page-hero {
  padding-block: var(--space-8) var(--space-9);
}
/* O bloco encosta na esquerda: o container mantém a largura e as sobras de
   sempre, então a trilha, o título e os botões nascem na mesma vertical da
   logo do header e dos cartões abaixo. O teto de medida saiu daqui e foi
   para o título — em .page-hero__inner ele estreitava a caixa toda, e o
   margin-inline:auto do .container jogava esse bloco estreito para o meio. */
.page-hero__inner > * + * {
  margin-top: var(--space-3);
}

/* Mesmo par 400/800 do título de seção, invertido para o navy — a entrada
   fica no branco de apoio e só a ênfase sobe para o branco puro. */
.page-hero__title {
  max-width: 780px;
  font-size: var(--fs-h1);
  font-weight: 400;
  letter-spacing: -0.9px;
  line-height: 1.12;
  color: var(--color-on-dark-muted);
  text-wrap: balance;
}
.page-hero__title em {
  font-style: normal;
  font-weight: 800;
  color: var(--color-on-dark);
}

.page-hero__cta {
  margin-top: var(--space-6);
}

/* ---- Trilha de navegação ---- */
.crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--color-on-dark-muted);
}
/* A barra é decoração: entra pelo CSS para não virar texto lido em voz alta */
.crumb li + li::before {
  content: '/';
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.4);
}
.crumb a {
  color: var(--color-on-dark-soft);
  transition: color var(--transition);
}
.crumb a:hover {
  color: var(--color-on-dark);
  text-decoration: underline;
}
.crumb [aria-current='page'] {
  color: var(--color-on-dark);
  font-weight: 600;
}

/* ============================================================
   TRÊS FORMATOS, UM POR SEÇÃO
   ============================================================ */
/* Os onze serviços têm a mesma anatomia no HTML — ícone, título, descrição e
   a linha "Saiba mais" — mas cada seção os apresenta de um jeito, na mesma
   lógica do index (lá o bloco de entrada são cartões, as especialidades são
   uma lista de réguas e os segmentos são cartões grandes). Três grades
   iguais em sequência viram uma parede só, e nada na página diria que
   "por onde começar", "a rotina" e "segmentos" são coisas diferentes.

     1. Por onde começar → CARTÃO, com pílula de CTA na base
     2. A rotina         → LISTA em duas colunas, separada por réguas
     3. Segmentos        → PAINEL navy, do tamanho de meia seção

   Daí os nomes de classe compartilhados (.svc__ico, .svc__go, .svc__seta):
   cada formato dá a eles o tamanho e a cor que couberem. */

/* ---- Peça comum: a seta da linha "Saiba mais" ----
   Seta, e não a marca do WhatsApp: o cartão leva para a página do serviço,
   onde o texto completo está. A conversa fica para os CTAs de lá. */
.svc__seta {
  display: inline-grid;
  place-items: center;
  flex: none;
  transition: transform var(--transition);
}
.svc__seta svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
.svc-card:hover .svc__seta,
.svc-row:hover .svc__seta,
.svc-panel:hover .svc__seta {
  transform: translateX(4px);
}

/* Chegou pelo menu: o item apontado se destaca para o olho achar de imediato
   qual dos onze é o serviço pedido. Sem animação — a página já entra
   rolando até aqui, e piscar em cima disso enjoa. */
.svc-card,
.svc-row,
.svc-panel {
  /* O header fica por cima do topo do item quando o link vem do menu:
     o scroll-margin devolve a altura dele mais um respiro */
  scroll-margin-top: 110px;
}

/* ============================================================
   1. POR ONDE COMEÇAR — cartão com pílula
   ============================================================ */
/* São os três caminhos de entrada: o bloco mais "clicável" da página, e o
   único que ganha botão. Ícone de traço aberto, sem a pastilha tingida que
   a lista usa — em três peças grandes a pastilha fica pequena demais para
   o tamanho do cartão. */
.svc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-4);
}

.svc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 32px 28px 28px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition),
    border-color var(--transition);
}
.svc-card:hover {
  transform: translateY(-4px);
  border-color: #c7cfea;
  box-shadow: var(--shadow-lg);
}

.svc-card .svc__ico {
  color: var(--color-primary);
}
.svc-card .svc__ico svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.3;
}

.svc-card h3 {
  font-size: var(--fs-h4);
  letter-spacing: -0.2px;
  color: var(--color-primary);
}
/* flex:1 empurra a pílula para o pé: com descrições de duas a quatro linhas,
   os botões de uma mesma fileira alinham. */
.svc-card p {
  flex: 1;
  color: var(--color-text-body);
}

/* A mesma pílula contornada dos cartões do banner (.card-cta): largura
   cheia, 48px de altura e o preenchimento navy no hover. */
.svc-card .svc__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  padding: 12px 18px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
  transition: background var(--transition), color var(--transition);
}
.svc-card:hover .svc__go {
  background: var(--color-primary);
  color: #fff;
}

.svc-card:target {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(16, 27, 94, 0.16), var(--shadow-lg);
}

/* ============================================================
   2. A ROTINA DA EMPRESA — lista de réguas, duas colunas
   ============================================================ */
/* Lista, e não cartões: são seis frentes de trabalho contínuo, não seis
   ofertas — o mesmo tratamento que o index dá a estas mesmas seis. Sem
   caixa, sem sombra e sem levantar no hover: o que separa um item do outro
   é a régua fina, e a leitura desce em coluna. */
.svc__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-7);
}

.svc-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: start;
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
  transition: border-color var(--transition);
}
/* Em duas colunas são os dois primeiros itens que encostam no cabeçalho da
   seção — a régua ali viraria um traço solto abaixo do lead. */
.svc__list > li:nth-child(-n + 2) .svc-row {
  border-top: 0;
  padding-top: 0;
}

/* Pastilha tingida, igual à das especialidades do index: numa fila de seis,
   seis ícones de traço soltos não dariam ponto de ancoragem à varredura. */
.svc-row .svc__ico {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  transition: background var(--transition), color var(--transition);
}
.svc-row .svc__ico svg {
  width: 24px;
  height: 24px;
}
.svc-row:hover .svc__ico {
  background: var(--color-primary);
  color: #fff;
}

.svc-row h3 {
  grid-column: 2;
  font-size: var(--fs-h4);
  letter-spacing: -0.2px;
  color: var(--color-primary);
}
.svc-row p {
  grid-column: 2;
  margin-top: 6px;
  font-size: var(--fs-base);
  color: var(--color-text-body);
}

/* Sem pílula: seis botões numa lista pesariam mais que os próprios serviços.
   É o link de texto do site (.link-arrow), com a marca verde no lugar da
   seta e o sublinhado guardado para o hover. */
.svc-row .svc__go {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-primary);
}
.svc-row:hover .svc__go {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A linha não tem caixa para receber contorno: o destaque é a faixa branca
   com o filete navy. O padding entra com margem negativa igual, então o
   texto não se mexe quando o item vira alvo. */
.svc-row:target {
  margin-inline: -18px;
  padding-inline: 18px;
  border-top-color: transparent;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-md);
}

/* ============================================================
   3. SEGMENTOS — painel navy
   ============================================================ */
/* Dois painéis escuros, do tamanho de meia seção: segmentos atendidos não
   são serviços contratáveis, e a inversão de cor diz isso antes do texto.
   Também é o contraponto que faltava entre a lista clara acima e a faixa
   azul do CTA logo abaixo. */
.svc__grid--panels {
  grid-template-columns: 1fr 1fr;
  max-width: 980px;
  margin-inline: auto;
}

.svc-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-items: start;
  column-gap: var(--space-3);
  row-gap: 14px;
  height: 100%;
  padding: 34px 32px 30px;
  border-radius: var(--radius-2xl);
  background: var(--gradient-brand);
  box-shadow: 0 14px 34px rgba(0, 0, 38, 0.18);
  transition: box-shadow var(--transition), transform var(--transition);
}
.svc-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(0, 0, 38, 0.26);
}

/* Quadrado translúcido em vez de tingido: sobre o navy, o
   --color-primary-soft viraria uma mancha clara chapada. */
.svc-panel .svc__ico {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background var(--transition);
}
.svc-panel:hover .svc__ico {
  background: rgba(255, 255, 255, 0.2);
}
.svc-panel .svc__ico svg {
  width: 26px;
  height: 26px;
}

.svc-panel h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: var(--fs-h3);
  letter-spacing: -0.3px;
  color: var(--color-on-dark);
}
/* A descrição volta para a margem do painel: presa à coluna do título ela
   perderia 68px de medida e ganharia uma linha. */
.svc-panel p {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--fs-base);
  color: var(--color-on-dark-soft);
}

/* Pílula sólida branca — a mesma do .btn--invert das faixas escuras */
.svc-panel .svc__go {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  background: #fff;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transition: background var(--transition), color var(--transition);
}
.svc-panel:hover .svc__go {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}

.svc-panel:target {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7),
    0 20px 44px rgba(0, 0, 38, 0.26);
}

/* ============================================================
   RODAPÉ SEM O CARTÃO DE REDES
   ============================================================ */
/* No index o .footer tem padding-top:0 de propósito: o cartão branco cavalga
   a emenda e é ele quem abre o rodapé. Esta página não tem o cartão — sem
   padding, a coluna da marca encostaria na faixa azul do CTA acima. O valor
   repõe mais ou menos o que a metade do cartão ocupava ali. */
.footer--no-card {
  padding-top: var(--space-8);
}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1200px) {
  .page-hero {
    padding-block: var(--space-7) var(--space-8);
  }
  /* A coluna de texto da lista fica com ~330px aqui: a folga entre as duas
     colunas é a primeira coisa a devolver. */
  .svc__list {
    column-gap: var(--space-5);
  }
}

/* Tablet: a grade de cartões já caiu sozinha para duas colunas pelo auto-fit
   — os painéis é que precisam de ajuda, porque dois de 490px não cabem. */
@media (max-width: 900px) {
  .svc__grid--panels {
    grid-template-columns: minmax(0, 1fr);
    max-width: 620px;
  }
}

@media (max-width: 767px) {
  .page-hero {
    padding-block: var(--space-6) var(--space-7);
  }
  .page-hero__title {
    font-size: 2rem;
    letter-spacing: -0.6px;
  }
  /* Um cartão por linha e um pouco mais justo: no celular a grade é uma
     pilha e o respiro de 24px entre cartões alongava demais a página */
  .svc__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
  .svc-card {
    padding: 26px 22px 22px;
    scroll-margin-top: 86px;
  }

  /* A lista vira uma coluna só — e aí quem encosta no cabeçalho é apenas o
     primeiro item: o segundo recupera a régua que a regra de duas colunas
     tinha tirado. */
  .svc__list {
    grid-template-columns: minmax(0, 1fr);
  }
  .svc__list > li:nth-child(2) .svc-row {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
  }
  .svc-row {
    padding-block: var(--space-3);
    scroll-margin-top: 86px;
  }
  .svc-row:target {
    margin-inline: -14px;
    padding-inline: 14px;
  }

  .svc-panel {
    padding: 28px 24px 26px;
    scroll-margin-top: 86px;
  }

  /* Os dois CTAs do topo ocupam a linha inteira: lado a lado, em 360px,
     cada um ficaria com duas palavras por linha */
  .page-hero__cta .btn {
    flex: 1 1 100%;
  }
}

/* Celular estreito: cada pixel devolvido à coluna de texto vale uma palavra
   por linha — o ícone do painel volta à medida da lista e a pílula passa a
   ocupar a largura toda, que é o alvo de toque mais confortável ali. */
@media (max-width: 430px) {
  .svc-panel .svc__ico {
    width: 46px;
    height: 46px;
  }
  .svc-panel .svc__ico svg {
    width: 23px;
    height: 23px;
  }
  .svc-panel h3 {
    font-size: var(--fs-h4);
  }
  .svc-panel .svc__go {
    justify-self: stretch;
    justify-content: center;
  }
}