/* ==========================================================================
   Solmais Engenharia — página Serviços
   Implementação do frame "v1" (265:7, 1920px) e do "Mobile" (297:81, 420px)
   da seção Serviços do Figma. Carregado depois de style.css: usa os mesmos
   tokens e componentes (cabeçalho, menu, pills, botões, título grande, a
   base da abertura, Dúvidas, Fechamento e Rodapé).
   ========================================================================== */

/* Legendas em caixa alta dos dados (mínimos e gráfico) */
.legenda-dados {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(2, 41, 78, 0.65);
}

/* ==========================================================================
   ABERTURA (base em style.css): texto à esquerda e "Nesta página" à direita
   ========================================================================== */
.abertura {
  min-height: 720px;
}

/* Recorte do Figma: foto com 122,5% da altura, 9,58% acima do topo */
.abertura__foto {
  object-position: 50% 42.6%;
}

/* Sombras do Figma, de cima para baixo: base, esquerda (texto) e tom da marca */
.abertura__sombra {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.75) 100%),
    linear-gradient(90deg, rgba(1, 18, 36, 0.45) 0%, rgba(1, 18, 36, 0.15) 32%, rgba(1, 18, 36, 0) 62%),
    linear-gradient(180deg, rgba(2, 41, 78, 0.25) 0%, rgba(1, 18, 36, 0.35) 100%);
}

.abertura__conteudo {
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.abertura__copy {
  flex: 0 1 760px;
  align-items: flex-start;
}

.abertura__texto {
  max-width: 640px;
}

/* Nesta página: lista de âncoras para os sete serviços */
.nesta-pagina {
  display: flex;
  flex: 0 0 500px;
  flex-direction: column;
  gap: 16px;
  padding: 28px 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: rgba(1, 18, 36, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.nesta-pagina__rotulo {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* "Arraste →" só aparece com as pílulas */
.nesta-pagina__dica {
  display: none;
}

.nesta-pagina__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ancora {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  transition: color 0.2s ease;
}

.ancora__numero {
  flex: none;
  width: 24px;
  font-size: 13px;
  line-height: 20px;
  color: var(--cor-amarelo-vivo);
}

.ancora__rotulo {
  flex: 1;
  min-width: 0;
}

/* Rótulo curto das pílulas */
.ancora__curto {
  display: none;
}

/* A seta tem 8 × 11 no Figma; o SVG inclui a espessura do traço */
.ancora__seta {
  flex: none;
  width: 9.4px;
  height: 12.4px;
  margin: -0.7px;
  transition: transform 0.2s ease;
}

.ancora:hover {
  color: var(--cor-branco);
}

.ancora:hover .ancora__seta {
  transform: translateY(2px);
}

/* ==========================================================================
   A CONVERSA SOBRE A CONTA
   ========================================================================== */
.conversa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: clamp(56px, 6.25vw, 120px);
  padding: 80px var(--margem-card);
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cor-preto);
  color: var(--cor-branco);
}

.conversa__quadros {
  position: absolute;
  top: -140px;
  right: 0;
  z-index: -1;
  width: 600px;
  height: 600px;
  pointer-events: none;
}

.conversa__quadros img {
  width: 100%;
  height: 100%;
  max-width: none;
  transform: rotate(-90deg);
}

.conversa__cabecalho {
  display: flex;
  align-items: flex-end;
  gap: 100px;
}

.conversa__titulo-bloco {
  display: flex;
  flex: 0 0 700px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.conversa__texto {
  flex: 1;
  font-family: var(--fonte-poppins);
  font-size: var(--fs-corpo);
  line-height: 1.6667; /* 30/18 */
  color: rgba(255, 255, 255, 0.85);
}

/* Os dois motivos (cards brancos) */
.motivos {
  display: flex;
  gap: 24px;
}

.motivo {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  min-width: 0;
  padding: 40px;
  border-radius: 20px;
  background: var(--cor-branco);
  color: var(--cor-preto);
}

.motivo__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.motivo__numero {
  padding: 4px 10px;
  border-radius: 60px;
  background: var(--cor-amarelo);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--cor-azul);
}

.motivo__titulo {
  margin: 0;
  font-size: 32px;
  line-height: 40px;
  font-weight: 500;
  color: var(--cor-azul);
}

.motivo__descricao {
  max-width: 560px;
  font-family: var(--fonte-poppins);
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
}

/* Mínimo mensal por tipo de ligação */
.minimos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.minimos__lista {
  display: flex;
  gap: 12px;
}

/* dt (nome) antes do dd (valor) no HTML; o valor aparece em cima */
.minimo {
  display: flex;
  flex: 1 1 0;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 20px;
  border-radius: 14px;
  background: rgba(2, 41, 78, 0.05);
}

.minimo__valor {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 40px;
  line-height: 44px;
  font-weight: 500;
  color: var(--cor-azul);
  white-space: nowrap;
}

.minimo__unidade {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: rgba(2, 41, 78, 0.6);
}

.minimo__nome {
  font-family: var(--fonte-poppins);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}

/* Gráfico do Fio B: a altura de cada barra é --pct × --escala */
.grafico {
  --escala: 1.3px;
  --gap-coluna: 10px;
  --altura-ano: 20px;

  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.grafico__barras {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Linha de base logo abaixo das barras */
.grafico__barras::after {
  position: absolute;
  right: 0;
  bottom: calc(var(--altura-ano) + var(--gap-coluna) - 1px);
  left: 0;
  height: 1px;
  background: rgba(2, 41, 78, 0.25);
  content: "";
}

.grafico__coluna {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-coluna);
  min-width: 0;
}

.grafico__valor {
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  color: rgba(2, 41, 78, 0.8);
}

.grafico__barra {
  align-self: stretch;
  height: calc(var(--pct) * var(--escala));
  border-radius: 8px 8px 0 0;
  background: rgba(2, 41, 78, 0.14);
  transform-origin: 50% 100%;
}

.grafico__ano {
  font-size: 15px;
  line-height: var(--altura-ano);
  font-weight: 400;
  color: rgba(2, 41, 78, 0.7);
}

/* 2026 (hoje): destaque amarelo. No Figma a coluna usa 8px entre os itens;
   o ano ganha 2px para a barra assentar na mesma linha de base das outras */
.grafico__coluna--atual {
  gap: 8px;
}

.grafico__coluna--atual .grafico__valor {
  font-weight: 600;
  color: var(--cor-azul);
}

.grafico__coluna--atual .grafico__barra {
  background: var(--cor-amarelo);
}

.grafico__coluna--atual .grafico__ano {
  margin-top: calc(var(--gap-coluna) - 8px);
  font-weight: 500;
  color: var(--cor-azul);
}

.grafico__hoje {
  padding: 3px 10px;
  border-radius: 60px;
  background: var(--cor-azul);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--cor-branco);
}

/* As barras sobem da linha de base, uma depois da outra, quando o gráfico
   chega na tela (o JS adiciona .is-visivel) */
.grafico__coluna:nth-child(2) { --atraso: 0.1s; }
.grafico__coluna:nth-child(3) { --atraso: 0.2s; }
.grafico__coluna:nth-child(4) { --atraso: 0.3s; }

@media (prefers-reduced-motion: no-preference) {
  .grafico__barra {
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--atraso, 0s);
  }

  .js .grafico:not(.is-visivel) .grafico__barra {
    transform: scaleY(0);
  }
}

/* Na prática */
.pratica {
  display: flex;
  align-items: flex-start;
  gap: 100px;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.pratica__destaque {
  flex: 0 1 760px;
  font-size: 30px;
  line-height: 40px;
  font-weight: 500;
}

.pratica__conclusao {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  min-width: 0;
}

.pratica__texto {
  font-family: var(--fonte-poppins);
  font-size: 17px;
  line-height: 28px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
}

.pratica__texto strong {
  font-weight: 700;
}

/* ==========================================================================
   OS SETE SERVIÇOS
   ========================================================================== */
.frentes {
  display: flex;
  flex-direction: column;
  gap: 120px;
  margin-top: var(--espaco-secao);
}

.frentes__cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 120px;
}

.frentes__titulo-bloco {
  display: flex;
  flex: 0 1 760px;
  flex-direction: column;
  gap: 20px;
}

.frentes__titulo {
  max-width: 651px;
}

.frentes__texto {
  flex: 0 1 800px;
  font-family: var(--fonte-poppins);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: rgba(0, 0, 0, 0.9);
}

/* Foto (800 × 540) e texto (780) lado a lado; foto primeiro no HTML */
.frente {
  display: grid;
  grid-template-columns: minmax(0, 800fr) minmax(0, 780fr);
  align-items: center;
  column-gap: clamp(40px, 5.2084vw, 100px);
  scroll-margin-top: 40px;
}

/* Foto à direita */
.frente--invertida {
  grid-template-columns: minmax(0, 780fr) minmax(0, 800fr);
}

.frente--invertida .frente__imagem {
  grid-column: 2;
  grid-row: 1;
}

.frente__imagem {
  position: relative;
  aspect-ratio: 800 / 540;
  border-radius: 20px;
  overflow: hidden;
  background: #dbdbdb;
}

.frente__imagem img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--px, 50%) 50%;
}

.frente__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  min-width: 0;
}

.frente__titulo-bloco {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.frente__numero {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

.frente__numero::after {
  width: 40px;
  height: 2px;
  background: var(--cor-amarelo);
  content: "";
}

.frente__titulo {
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.25; /* 50/40 */
  font-weight: 500;
}

.frente__olho {
  font-family: var(--fonte-poppins);
  font-size: 20px;
  line-height: 30px;
  color: var(--cor-texto-suave);
}

.frente__descricao {
  font-family: var(--fonte-poppins);
  font-size: var(--fs-corpo);
  line-height: 1.6667; /* 30/18 */
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
}

/* Você recebe */
.entrega {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 12px;
  padding: 24px;
  border-radius: 16px;
  background: var(--cor-branco);
}

.entrega__rotulo {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}

.entrega__lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.entrega__lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 500;
}

.entrega__lista li::before {
  flex: none;
  width: 24px;
  height: 24px;
  background: url("../assets/icons/check-entrega.svg") center / 100% 100% no-repeat;
  content: "";
}

/* ==========================================================================
   PRAZO
   ========================================================================== */
.prazo {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: var(--espaco-secao);
}

.prazo__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.etapas {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.etapa {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
  padding: 28px;
  border-radius: 20px;
  background: var(--cor-branco);
}

.etapa__numero {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cor-fundo);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

.etapa__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

.etapa__titulo {
  margin: 0;
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
}

.etapa__descricao {
  font-family: var(--fonte-poppins);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
}

.etapa__descricao strong {
  font-weight: 500;
  color: var(--cor-preto);
}

/* No Figma o aviso passa 14px do respiro do card: a margem negativa
   mantém a frase em uma linha em 1920px e deixa quebrar em telas menores */
.etapa__aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: -20px;
  padding: 6px 12px;
  border-radius: 60px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.etapa__aviso img {
  flex: none;
  width: 8px;
  height: 8px;
}

/* Homologação: a etapa que não depende da Solmais */
.etapa--externa {
  background: var(--cor-preto);
  color: var(--cor-branco);
}

.etapa--externa .etapa__descricao {
  color: rgba(255, 255, 255, 0.75);
}

.etapa--externa .etapa__numero,
.etapa--final .etapa__numero {
  background: var(--cor-amarelo);
}

/* ==========================================================================
   O QUE DEFINE O RESULTADO
   ========================================================================== */
.resultado {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: var(--espaco-secao);
  padding: 80px;
  border-radius: 20px;
  background: var(--cor-preto);
  color: var(--cor-branco);
}

.resultado__cabecalho {
  display: flex;
  align-items: flex-end;
  gap: 100px;
}

.resultado__titulo-bloco {
  display: flex;
  flex: 0 0 820px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.resultado .pill--escura {
  padding-inline: 20px;
}

.resultado__texto {
  flex: 1;
  font-family: var(--fonte-poppins);
  font-size: 20px;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.85);
}

/* Tabela: "O ponto" (720) e "Na Solmais" (800), com a coluna da Solmais
   num fundo contínuo de cantos arredondados */
.tabela__cabecalho,
.criterio {
  display: grid;
  grid-template-columns: minmax(0, 720fr) minmax(0, 800fr);
}

.tabela__ponto,
.tabela__solmais {
  padding: 20px 40px;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tabela__ponto {
  padding-left: 0;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

.tabela__solmais {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 20px 20px 0 0;
  background: rgba(255, 255, 255, 0.06);
  font-weight: 500;
  color: var(--cor-amarelo-vivo);
}

.tabela__solmais img {
  flex: none;
  width: 17.75px;
  height: 18px;
}

.criterio__ponto {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 48px 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.criterio__titulo {
  margin: 0;
  font-size: 26px;
  line-height: 34px;
  font-weight: 500;
}

.criterio__descricao {
  font-family: var(--fonte-poppins);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.criterio__resposta {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 32px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--fonte-poppins);
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}

.criterio__resposta::before {
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  background: url("../assets/icons/check-resposta.svg") center / 100% 100% no-repeat;
  content: "";
}

.criterio__resposta p {
  flex: 1;
  min-width: 0;
}

/* line-height 1: a Inter tem ascendente maior que a Poppins e, com a
   entrelinha cheia, esticaria em 1px cada linha que tem negrito */
.criterio__resposta strong {
  font-family: var(--fonte-inter);
  font-size: 20px;
  line-height: 1;
  font-weight: 500;
  color: var(--cor-branco);
}

.criterio:last-child .criterio__resposta {
  border-radius: 0 0 20px 20px;
}

.resultado__fecho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.resultado__fecho-texto {
  max-width: 720px;
  font-family: var(--fonte-poppins);
  font-size: 20px;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.9);
}

/* Rodapé: 20px abaixo do Fechamento no Figma desta página (10px na Home).
   No celular vale o espaço entre seções de style.css */
@media (min-width: 768px) {
  .rodape {
    margin-top: 20px;
  }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
/* Notebooks pequenos e tablet: cabeçalhos empilhados, cards um embaixo do
   outro e etapas em linhas */
@media (max-width: 1280px) {
  .nesta-pagina {
    flex-basis: 420px;
  }

  .conversa {
    padding-block: 60px;
  }

  .conversa__cabecalho,
  .resultado__cabecalho,
  .frentes__cabecalho {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .conversa__titulo-bloco,
  .resultado__titulo-bloco,
  .frentes__titulo-bloco {
    flex: none;
  }

  .conversa__texto,
  .resultado__texto,
  .frentes__texto {
    flex: none;
    max-width: 800px;
  }

  .motivos {
    flex-direction: column;
  }

  .pratica {
    flex-direction: column;
    gap: 28px;
  }

  .pratica__destaque {
    flex: none;
    max-width: 760px;
  }

  .frentes {
    gap: 80px;
  }

  .etapas {
    flex-direction: column;
    gap: 12px;
  }

  .etapa {
    flex-direction: row;
    gap: 20px;
    padding: 24px 28px;
  }

  .etapa__texto {
    flex: 1;
    gap: 10px;
  }

  .etapa__aviso {
    margin-right: 0;
  }

  .resultado {
    padding: 60px 40px;
  }
}

/* Com a lista ao lado e pouco espaço, o título corre sem a quebra forçada
   (senão "projeta," fica sozinho numa linha) */
@media (min-width: 961px) and (max-width: 1280px) {
  .abertura__titulo br {
    display: none;
  }
}

@media (max-width: 960px) {
  /* Abertura: texto em cima e âncoras em pílulas que rolam para o lado,
     vazando até a borda do card (Figma mobile) */
  .abertura__sombra {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(2, 41, 78, 0.15) 22%, rgba(1, 18, 36, 0.55) 50%, rgba(0, 0, 0, 0.92) 78%);
  }

  .abertura__conteudo {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding-block: 64px 32px;
  }

  .abertura__copy {
    flex: none;
  }

  .nesta-pagina {
    flex: none;
    gap: 10px;
    margin-right: calc(-1 * var(--margem-card));
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nesta-pagina__rotulo {
    font-size: 11px;
    line-height: 14px;
  }

  .nesta-pagina__dica {
    display: inline;
  }

  /* 4px de folga em cima e embaixo para o contorno de foco não ser cortado */
  .nesta-pagina__lista {
    display: flex;
    gap: 8px;
    margin-block: -4px;
    padding-block: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .nesta-pagina__lista::-webkit-scrollbar {
    display: none;
  }

  /* Respiro no fim da rolagem, até a borda do card */
  .nesta-pagina__lista::after {
    flex: 0 0 calc(var(--margem-card) - 8px);
    content: "";
  }

  .nesta-pagina__lista li {
    flex: none;
  }

  .ancora {
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 60px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 14px;
    line-height: 18px;
    color: var(--cor-branco);
    white-space: nowrap;
    transition: background-color 0.2s ease;
  }

  .ancora:hover {
    background: rgba(255, 255, 255, 0.16);
  }

  .ancora__numero {
    width: auto;
    font-size: 12px;
    line-height: 16px;
  }

  .ancora__longo,
  .ancora__seta {
    display: none;
  }

  .ancora__curto {
    display: inline;
  }

  /* Conversa */
  .conversa {
    padding: 40px var(--margem-card);
  }

  .motivo {
    padding: 32px 24px;
  }

  /* Serviços: foto em cima e texto embaixo */
  .frente,
  .frente--invertida {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }

  .frente--invertida .frente__imagem {
    grid-column: auto;
    grid-row: auto;
  }

  /* O que define o resultado */
  .resultado {
    padding: 40px var(--margem-card);
  }

  .resultado__fecho {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* ==========================================================================
   LAYOUT MOBILE (Figma: Serviços › Mobile, 420px) — até 767px
   Cards escuros a 8px da borda, conteúdo a 20px e 72px entre as seções
   ========================================================================== */
@media (max-width: 767px) {
  .legenda-dados {
    font-size: 11px;
    line-height: 14px;
  }

  /* Rótulos longos (até 363px no Figma) quebram em celulares estreitos em
     vez de vazar; em 420px continuam em uma linha */
  .botao {
    max-width: 100%;
    white-space: normal;
  }

  /* Abertura (o restante do celular está em style.css) -------------------- */
  .abertura {
    min-height: 760px;
  }

  .abertura__conteudo {
    padding-block: 40px 24px;
  }

  /* O título corre contínuo, sem a quebra depois de "projeta," */
  .abertura__titulo br {
    display: none;
  }

  .abertura__texto {
    max-width: none;
  }

  /* A conversa sobre a conta --------------------------------------------- */
  .conversa {
    gap: 32px;
    width: auto;
    margin-inline: 8px;
    margin-top: var(--espaco-secao);
    padding: 40px 20px;
  }

  .conversa__quadros {
    display: none;
  }

  .conversa__cabecalho,
  .conversa__titulo-bloco {
    gap: 16px;
  }

  .conversa .pill--escura {
    background: rgba(255, 255, 255, 0.1);
  }

  .conversa__texto {
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
  }

  .motivos {
    gap: 32px;
  }

  .motivo {
    justify-content: flex-start;
    gap: 24px;
    padding: 24px 20px;
    border-radius: 16px;
  }

  .motivo__texto {
    gap: 10px;
  }

  .motivo__numero {
    font-size: 13px;
    line-height: 18px;
  }

  .motivo__titulo {
    font-size: 24px;
    line-height: 30px;
  }

  .motivo__descricao {
    font-size: 15px;
    line-height: 24px;
  }

  .minimos {
    gap: 12px;
  }

  .minimos__lista {
    gap: 8px;
  }

  .minimo {
    gap: 2px;
    padding: 14px 12px;
    border-radius: 12px;
  }

  .minimo__valor {
    gap: 4px;
    font-size: 26px;
    line-height: 30px;
  }

  .minimo__unidade {
    font-size: 12px;
    line-height: 16px;
  }

  .minimo__nome {
    font-size: 12px;
    line-height: 18px;
  }

  .grafico {
    --escala: 1.1px;
    --gap-coluna: 6px;
    --altura-ano: 16px;

    gap: 12px;
  }

  .grafico .legenda-dados {
    line-height: 15px;
  }

  .grafico__barras {
    gap: 8px;
  }

  .grafico__coluna--atual {
    gap: var(--gap-coluna);
  }

  .grafico__valor {
    font-size: 16px;
    line-height: 20px;
  }

  .grafico__hoje {
    padding: 2px 8px;
    font-size: 11px;
    line-height: 14px;
  }

  .grafico__barra {
    border-radius: 6px 6px 0 0;
  }

  .grafico__ano {
    font-size: 12px;
  }

  .grafico__coluna--atual .grafico__ano {
    margin-top: 0;
  }

  .pratica {
    gap: 20px;
    padding-top: 28px;
  }

  .pratica__destaque {
    font-size: 22px;
    line-height: 30px;
  }

  .pratica__conclusao {
    gap: 20px;
  }

  .pratica__texto {
    font-size: 15px;
    line-height: 24px;
  }

  /* No Figma mobile o parágrafo não tem trecho em negrito */
  .pratica__texto strong {
    font-weight: inherit;
  }

  /* Os sete serviços ----------------------------------------------------- */
  .frentes {
    gap: 64px;
  }

  .frentes__cabecalho,
  .frentes__titulo-bloco {
    gap: 14px;
  }

  .frentes__texto {
    font-size: 15px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
  }

  .frente,
  .frente--invertida {
    row-gap: 20px;
    scroll-margin-top: 24px;
  }

  .frente__imagem {
    height: 240px;
    aspect-ratio: auto;
    border-radius: 16px;
  }

  .frente__texto {
    gap: 20px;
  }

  .frente__titulo-bloco {
    gap: 10px;
  }

  .frente__numero {
    gap: 10px;
    font-size: 15px;
    line-height: 20px;
  }

  .frente__numero::after {
    width: 32px;
  }

  .frente__titulo {
    font-size: 26px;
    line-height: 32px;
  }

  .frente__olho {
    font-size: 16px;
    line-height: 24px;
  }

  .frente__descricao {
    font-size: 15px;
    line-height: 25px;
  }

  .entrega {
    gap: 10px;
    padding: 18px;
    border-radius: 14px;
  }

  .entrega__rotulo {
    font-size: 12px;
    line-height: 16px;
  }

  .entrega__lista {
    gap: 10px;
  }

  .entrega__lista li {
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 22px;
  }

  .entrega__lista li::before {
    width: 22px;
    height: 22px;
    background-image: url("../assets/icons/check-entrega-22.svg");
  }

  /* Prazo ---------------------------------------------------------------- */
  .prazo {
    gap: 28px;
  }

  .prazo__cabecalho {
    gap: 14px;
  }

  .etapas {
    gap: 10px;
  }

  .etapa {
    gap: 16px;
    padding: 20px 18px;
    border-radius: 16px;
  }

  .etapa__numero {
    width: 36px;
    height: 36px;
    font-size: 15px;
    line-height: 20px;
  }

  .etapa__texto {
    gap: 8px;
  }

  .etapa__titulo {
    font-size: 18px;
    line-height: 24px;
  }

  .etapa__descricao {
    font-size: 14px;
    line-height: 22px;
  }

  .etapa__aviso {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 16px;
  }

  .etapa__aviso img {
    width: 7px;
    height: 7px;
  }

  /* O que define o resultado: cada ponto vira um card -------------------- */
  .resultado {
    gap: 28px;
    width: auto;
    margin-inline: 8px;
    padding: 40px 20px;
  }

  .resultado__cabecalho,
  .resultado__titulo-bloco {
    gap: 16px;
  }

  .resultado .pill--escura {
    padding-inline: 14px;
  }

  /* O título corre contínuo, sem a quebra antes de "da sua obra" */
  .resultado .titulo-grande br {
    display: none;
  }

  .resultado__texto {
    font-size: 16px;
    line-height: 25px;
  }

  .tabela__cabecalho {
    display: none;
  }

  .tabela__linhas {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .criterio {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    overflow: hidden;
  }

  .criterio__ponto {
    gap: 6px;
    padding: 20px 18px 18px;
    border-top: 0;
  }

  .criterio__titulo {
    font-size: 20px;
    line-height: 26px;
  }

  .criterio__descricao {
    font-size: 14px;
    line-height: 22px;
  }

  .criterio__resposta {
    gap: 12px;
    padding: 18px 18px 20px;
    border-top: 0;
    background: rgba(255, 255, 255, 0.07);
    font-size: 15px;
    line-height: 24px;
  }

  .criterio__resposta::before {
    width: 24px;
    height: 24px;
    margin-top: 0;
    background-image: url("../assets/icons/check-resposta-24.svg");
  }

  .criterio__resposta strong {
    font-size: 16px;
  }

  .criterio:last-child .criterio__resposta {
    border-radius: 0;
  }

  .resultado__fecho-texto {
    font-size: 16px;
    line-height: 25px;
  }
}