/* ==========================================================================
   PR Gestão Empresarial — Composição das seções da Home
   A ordem das regras acompanha a ordem aprovada das seções.
   ========================================================================== */

/* ==========================================================================
   1. HERO
   Desktop: ~44% conteúdo / ~56% mídia, com a mídia sangrando até a borda.
   Mobile: mídia encaixada ENTRE o título e o bloco de CTAs (não empilhada).
   ========================================================================== */
.hero {
  position: relative;
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  overflow: hidden;
}
/* Halo discreto atrás da fotografia — evita que o preto fique chapado.
   Reage ao cursor: --mouse-x/--mouse-y são escritos por site.js (rAF + lerp,
   ver initHeroLighting). Os fallbacks reproduzem a posição estática original,
   então sem JS — ou com prefers-reduced-motion / ponteiro sem hover — a
   seção permanece idêntica a antes, só sem o movimento. Raio grande o
   bastante para nunca ler como lanterna seguindo o mouse. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--mouse-x, 72%) var(--mouse-y, 48%),
    rgba(255, 255, 255, .05),
    transparent 62%
  );
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--line-on-dark);
}
.hero__deck { position: relative; z-index: 1; }

.hero__deck {
  --edge: max(var(--gutter), calc((100% - var(--container-max)) / 2));
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + var(--space-6));
  padding-bottom: var(--space-8);
}

.hero__lead,
.hero__tail { padding-inline: var(--gutter); }

.hero__eyebrow { margin-bottom: var(--space-5); }

.hero__title {
  font-size: var(--fs-h1);
  max-width: 15ch;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  color: var(--pr-platinum);
}

.hero__text {
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-on-dark-muted);
  max-width: 42ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-micro);
  letter-spacing: .04em;
  color: var(--text-on-dark-muted);
}
.hero__meta-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pr-platinum);
}

/* Mídia do Hero ------------------------------------------------------------ */
.hero__visual {
  position: relative;
  margin-block: var(--space-5);
}

/* Uma única fotografia. A máscara recorta a borda superior em curva ampla e
   dissolve a lateral esquerda no preto, de modo que a imagem pertença ao
   fundo em vez de ficar apoiada sobre ele. */
.hero__figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
}
.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
  /* Tratamento cinematográfico discreto — sem lavar a cor da cena. */
  filter: saturate(.86) contrast(1.05);
  /* Micro-parallax: --px/--py chegam de site.js como valores normalizados
     (-1..1, já com inércia por lerp), e o CSS é quem decide a amplitude em
     px. scale(1.015) mantém a margem de sobra que impede as bordas de
     aparecerem quando a imagem desliza. Sem JS, var() cai em 0 e a imagem
     fica parada — só o leve zoom permanece, imperceptível. */
  transform: scale(1.015) translate(calc(var(--px, 0) * 5px), calc(var(--py, 0) * 3px));
  will-change: transform;
}
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Sheen especular: mancha larga e difusa, prata neutro, opacidade muito
       baixa. --sheen-x/--sheen-y viajam num raio contido (não cobrem o
       quadro inteiro), como se a incidência da luz mudasse de leve com o
       ponto de vista de quem olha — não uma luz seguindo o cursor. */
    radial-gradient(
      120% 95% at var(--sheen-x, 32%) var(--sheen-y, 24%),
      rgba(236, 239, 242, .07),
      rgba(236, 239, 242, .03) 38%,
      transparent 64%
    ),
    linear-gradient(to bottom, var(--pr-ink) 0%, rgba(12, 13, 15, .45) 14%, transparent 34%),
    linear-gradient(to top, var(--pr-ink) 0%, rgba(12, 13, 15, .35) 12%, transparent 32%);
}

@media (max-width: 767px) {
  /* Amplitude reduzida em telas estreitas: garante folga entre o deslocamento
     máximo e a sobra de scale(1.015), mesmo numa janela de desktop estreita
     com mouse (o único caso em que o parallax chega a rodar abaixo de 768px,
     já que toque não aciona o efeito). */
  .hero__figure img {
    transform: scale(1.015) translate(calc(var(--px, 0) * 3px), calc(var(--py, 0) * 2px));
  }
}

@media (min-width: 560px) {
  .hero__figure { aspect-ratio: 16 / 9; }
}

@media (min-width: 1024px) {
  .hero__deck {
    display: grid;
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    grid-template-areas:
      "lead   visual"
      "tail   visual";
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: clamp(2rem, 4vw, 4.5rem);
    padding-left: var(--edge);
    padding-right: 0;
    padding-top: calc(var(--header-h) + var(--space-10));
    padding-bottom: var(--space-11);
    min-height: min(92vh, 900px);
  }
  .hero__lead { grid-area: lead; padding-inline: 0; }
  .hero__tail { grid-area: tail; padding-inline: 0; }
  .hero__visual {
    grid-area: visual;
    margin-block: 0;
    align-self: stretch;
    min-height: min(62vh, 620px);
  }
  /* Recorte só por degradê: a imagem se dissolve no preto pelo topo e pela
     esquerda, sem borda desenhada. As duas camadas são combinadas por
     mask-composite; sem suporte, o fade do topo sozinho já resolve. */
  .hero__figure {
    aspect-ratio: auto;
    height: 100%;
    border-radius: 0;
    -webkit-mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .3) 7%, #000 26%, #000 100%),
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .28) 9%, #000 30%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .3) 7%, #000 26%, #000 100%),
      linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .28) 9%, #000 30%, #000 100%);
    mask-composite: intersect;
  }
  .hero__figure img { object-position: 62% 44%; }
  .hero__figure::after {
    background:
      radial-gradient(
        120% 95% at var(--sheen-x, 32%) var(--sheen-y, 24%),
        rgba(236, 239, 242, .07),
        rgba(236, 239, 242, .03) 38%,
        transparent 64%
      ),
      linear-gradient(to right, rgba(12, 13, 15, .55) 0%, rgba(12, 13, 15, .14) 20%, transparent 46%),
      linear-gradient(to bottom, rgba(12, 13, 15, .5) 0%, transparent 26%),
      linear-gradient(to top, var(--pr-ink) 0%, rgba(12, 13, 15, .62) 9%, transparent 36%);
  }
}

@media (min-width: 1280px) {
  .hero__title { max-width: 13ch; }
}

/* ==========================================================================
   2. FAIXA DE TRANSIÇÃO
   ========================================================================== */
.faixa {
  background: var(--pr-ink-2);
  color: var(--text-on-dark);
  padding-block: var(--space-8);
}
.faixa__grid { display: grid; gap: var(--space-5); }
@media (min-width: 760px) {
  .faixa__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .faixa__item + .faixa__item { border-left: 1px solid var(--line-on-dark); }
}
.faixa__item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-inline: clamp(1rem, 2vw, 2rem);
}
.faixa__label {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

/* ==========================================================================
   3. APRESENTAÇÃO DA PR — tratamento editorial
   ========================================================================== */
.apresentacao__grid {
  display: grid;
  gap: clamp(2.5rem, 1.6rem + 4vw, 4rem);
  align-items: center;
}
@media (min-width: 720px) {
  .apresentacao__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}

.apresentacao__media { position: relative; }
.apresentacao__media > * { position: relative; z-index: 1; }
/* Moldura editorial deslocada atrás do retrato */
.apresentacao__media::before {
  content: "";
  position: absolute;
  top: -18px;
  left: -18px;
  z-index: 0;
  width: 46%;
  aspect-ratio: 1;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

/* O retrato foi feito sobre fundo preto: o painel usa o mesmo preto, de modo
   que o fundo do estúdio vira superfície da página em vez de uma moldura. */
.apresentacao__portrait {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: #050505;
}
.apresentacao__portrait img { width: 100%; height: 100%; object-fit: cover; }

.apresentacao__media-sub {
  margin-top: var(--space-4);
  width: 70%;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.apresentacao__media-sub img { width: 100%; height: auto; display: block; }
@media (min-width: 720px) {
  .apresentacao__media-sub {
    position: absolute;
    right: clamp(-76px, -4.5vw, -36px);
    bottom: clamp(-44px, -3vw, -26px);
    width: 58%;
    margin-top: 0;
    border: 6px solid var(--surface);
    box-shadow: var(--shadow-lg);
  }
}

.apresentacao__content > * + * { margin-top: var(--space-5); }
.apresentacao__text { color: var(--text-muted); max-width: 52ch; }

.attrs {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
}
@media (min-width: 620px) { .attrs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.attrs__item {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.attrs__title {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--weight-bold);
  letter-spacing: .02em;
}
.attrs__meta { font-size: var(--fs-micro); color: var(--text-subtle); }

/* ==========================================================================
   4. PRINCIPAIS SERVIÇOS — bento assimétrico (nunca 6 cards iguais)
   ========================================================================== */
.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.svc:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.svc__media { flex: 1 1 auto; min-height: 190px; overflow: hidden; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}
.svc__title { font-size: var(--fs-h4); }

/* CORTE 7 — título-link do card cujo serviço já tem página interna.
   No repouso é visualmente idêntico ao título dos demais cards (a base já
   define `a { color: inherit; text-decoration: none }`); o ::after apenas
   estende a área clicável ao card inteiro. O CTA do rodapé do card fica acima
   dessa camada e continua levando ao contato. */
.svc__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.svc__link:hover { text-decoration: underline; text-underline-offset: .18em; }
.svc__foot { position: relative; z-index: 2; }
.svc__desc {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
  max-width: 44ch;
}
.svc__foot { margin-top: auto; padding-top: var(--space-4); }

.svc--type .svc__body { flex: 1 1 auto; padding-block: var(--space-7); }
.svc--wide .svc__body { gap: var(--space-4); }

@media (min-width: 768px) {
  .servicos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
  .servicos__grid > :nth-child(1) { grid-column: 1 / 3; }
  .servicos__grid > :nth-child(6) { grid-column: 1 / 3; }
}
@media (min-width: 1024px) {
  .servicos__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(220px, auto);
  }
  .servicos__grid > :nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .servicos__grid > :nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
  .servicos__grid > :nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; }
  .servicos__grid > :nth-child(4) { grid-column: 3 / 5; grid-row: 2 / 3; }
  .servicos__grid > :nth-child(5) { grid-column: 1 / 2; grid-row: 3 / 4; }
  .servicos__grid > :nth-child(6) { grid-column: 2 / 5; grid-row: 3 / 4; }
  /* O card 04 ocupa uma única linha: a mídia recebe proporção própria para não
     virar uma tarja estreita. */
  .servicos__grid > :nth-child(4) .svc__media { flex: none; aspect-ratio: 21 / 9; }
  .svc--wide .svc__body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
  }
  /* No card largo o texto divide a linha com o CTA: sem teto de largura a
     descrição se esticaria numa única linha muito longa. */
  .svc--wide .svc__head { max-width: 62ch; }
  .svc--wide .svc__foot { margin-top: 0; padding-top: 0; flex: none; }
}

/* ==========================================================================
   5. SOLUÇÕES ESTRATÉGICAS — ruptura visual forte
   ========================================================================== */
.solucoes { position: relative; overflow: hidden; }
.solucoes__watermark {
  position: absolute;
  right: -6%;
  top: 50%;
  transform: translateY(-50%);
  width: min(46vw, 620px);
  opacity: .05;
  pointer-events: none;
  filter: grayscale(1);
}
.solucoes__inner { position: relative; z-index: var(--z-base); }
.solucoes__title {
  font-size: var(--fs-mega);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-mega);
  max-width: 16ch;
  text-wrap: balance;
}
.solucoes__lead {
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  color: var(--text-on-dark-muted);
  max-width: 52ch;
}
.solucoes__list {
  margin-top: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  border-top: 1px solid var(--line-on-dark);
}

.solucao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  padding-block: clamp(1.375rem, 1rem + 1.6vw, 2rem);
  border-bottom: 1px solid var(--line-on-dark);
  transition: background-color var(--dur) var(--ease-out),
              padding-inline var(--dur) var(--ease-out);
}
.solucao:hover { background: rgba(255, 255, 255, .04); padding-inline: var(--space-5); }
.solucao__name {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.9vw, 2.5rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.12;
}
.solucao__desc {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-on-dark-muted);
  max-width: 68ch;
}
.solucao__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid var(--line-on-dark-strong);
  border-radius: 50%;
  transition: background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.solucao:hover .solucao__cta {
  background: var(--pr-white);
  color: var(--pr-ink);
  transform: translateX(4px);
}
@media (max-width: 639px) {
  .solucao { grid-template-columns: minmax(0, 1fr); }
  .solucao__cta { justify-self: start; }
}

/* ==========================================================================
   6. SEGMENTOS ATENDIDOS — MEI e Microempresas com prioridade visual
   ========================================================================== */
/* Grid real de duas colunas: os dois blocos nascem na mesma linha, com a
   mesma proporção de imagem e o mesmo ritmo vertical. Nenhum offset manual. */
.segmentos__featured { display: grid; gap: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); }
@media (min-width: 720px) {
  .segmentos__featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.75rem, 1rem + 2.4vw, 2.5rem);
    align-items: start;
  }
}
.seg-feature { display: grid; align-content: start; }
.seg-feature__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.seg-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Enquadramento por bloco, para ninguém ficar cortado no recorte 3:2 */
.seg-feature--mei .seg-feature__media img { object-position: 46% 46%; }
.seg-feature--micro .seg-feature__media img { object-position: 50% 26%; }

.seg-feature__badge {
  display: inline-flex;
  align-items: center;
  align-self: start;
  margin-top: var(--space-5);
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: .6875rem;
  font-weight: var(--weight-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.seg-feature__title {
  margin-top: var(--space-4);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
  letter-spacing: var(--tracking-tight);
}
.seg-feature__desc {
  margin-top: var(--space-3);
  max-width: 46ch;
  color: var(--text-muted);
  line-height: var(--lh-body);
}

/* Segmentos secundários: lista editorial com fio superior, sem caixa.
   Todos os nomes partem da mesma linha, em colunas iguais. */
.segmentos__tiles {
  margin-top: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, .6rem + 1.4vw, 2rem);
  row-gap: 0;
}
@media (min-width: 620px) { .segmentos__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .segmentos__tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.seg-tile {
  display: flex;
  align-items: flex-start;
  padding: var(--space-4) 0 var(--space-5);
  border-top: 1px solid var(--line-strong);
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.seg-tile:hover { border-top-color: var(--pr-ink); }
.seg-tile__name {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
}

.segmentos__note {
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ==========================================================================
   7. DIFERENCIAIS — imagem grande + lista editorial (não são 4 cards iguais)
   ========================================================================== */
.diferenciais__grid {
  display: grid;
  gap: clamp(2.5rem, 1.6rem + 4vw, 4rem);
  align-items: start;
}
@media (min-width: 720px) {
  .diferenciais__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 6vw, 5.5rem);
  }
}
.diferenciais__media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5;
}
.diferenciais__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 42%;
  display: block;
}

.dif-list { border-top: 1px solid var(--line-on-dark); }
/* CORTE 12 — a coluna do número saiu. Os quatro diferenciais não têm ordem
   entre si, e numerá-los criava uma hierarquia que o conteúdo não tem. */
.dif-item {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--line-on-dark);
}
.dif-item__body { display: block; min-width: 0; }
.dif-item__title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + .7vw, 1.5rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}
.dif-item__desc {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-on-dark-muted);
  max-width: 52ch;
}

/* ==========================================================================
   8. COMO FUNCIONA O ATENDIMENTO — fluxo real informado pelo cliente
   Arquitetura preservada do Corte 1: linha horizontal de 4 etapas no desktop,
   fluxo vertical no mobile. O Corte 4 apenas acomodou o texto real (título +
   descrição por etapa) no lugar do placeholder de uma linha.
   ========================================================================== */
.processo__steps { display: grid; gap: var(--space-7); position: relative; }
@media (min-width: 900px) {
  .processo__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: start;
  }
  /* A linha corre atrás dos marcadores; o fundo opaco do marcador é o que a
     interrompe em cada etapa. 22px = centro do círculo de 44px. */
  .processo__steps::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line-strong);
  }
}
.processo__step { position: relative; display: grid; gap: var(--space-4); align-content: start; }
.processo__marker {
  position: relative;
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-muted);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: var(--weight-bold);
  letter-spacing: .06em;
}
.processo__body { display: grid; gap: var(--space-2); min-width: 0; }
.processo__title {
  font-size: var(--fs-h4);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.processo__text {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
@media (max-width: 899px) {
  /* 3.5rem de recuo deixa 12px entre o marcador (44px) e o texto; com
     var(--space-8) o círculo encostava na primeira letra do título. */
  .processo__steps { padding-left: 3.5rem; }
  /* Um segmento por etapa, em vez de uma única linha do topo à base do <ol>:
     com etapas de altura desigual, a linha corrida sobrava abaixo da etapa 04.
     Assim cada segmento nasce sob um marcador e morre no marcador seguinte. */
  .processo__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(21px - 3.5rem);
    top: 50px;
    bottom: calc((var(--space-7) - 6px) * -1);
    width: 1px;
    background: var(--line-strong);
  }
  .processo__marker { position: absolute; left: -3.5rem; top: 0; }
  /* Empurra o título para o eixo vertical do marcador, sem depender de
     alturas fixas. */
  .processo__body { padding-top: var(--space-3); }
  .processo__step > :not(.processo__marker) { margin-left: 0; }
  .processo__text { max-width: 46ch; }
}

/* ==========================================================================
   9. PLANOS — arquitetura para 3 planos (suporta 2 a 4). Sem conteúdo inventado.
   ========================================================================== */
.planos__grid { display: grid; gap: var(--space-6); }
/* Alinhado exatamente ao corte do .rail (max-width: 767px) — um breakpoint
   diferente aqui criaria uma faixa em que grid de 2 colunas e carrossel
   ficam ativos ao mesmo tempo. */
@media (min-width: 768px) { .planos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .planos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }

/* Card — superfície clara é a base; .plano--dark inverte para o card Premium.
   O preto entra como acento (barra do topo, ícone, checks, CTA), não como
   parede plana, para não pesar a composição. */
/* CORTE 12 — os tres cards ganharam degrade suave e o Start passou a ser o
   card CINZA, a pedido do cliente. A progressao claro -> cinza -> escuro da
   ritmo a faixa e e recurso puramente compositivo: nenhum card recebe selo,
   destaque de "mais vendido" ou qualquer marca de recomendacao, porque o
   cliente nao confirmou nada disso para nenhum plano. */
.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(168deg, var(--pr-white) 0%, #fbfbfc 52%, #f2f3f5 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.plano:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.plano::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--pr-ink);
}
/* Card Premium invertido — grafite, não preto puro, para não pesar a
   composição ao lado dos outros dois cards claros. Recurso só compositivo:
   ver nota em PricingPlan.Dark, sem selo de popularidade. */
/* Tom intermediario: cinza claro, ainda com texto escuro. E o degrau que
   faltava entre o card branco e o grafite. */
.plano--grey {
  background: linear-gradient(168deg, #eef0f3 0%, #e7eaee 52%, #dce0e5 100%);
  border-color: var(--line-strong);
}
.plano--grey::before { background: var(--pr-steel); }
.plano--grey .plano__icon { background: rgba(12, 13, 15, .07); }
.plano--grey .plano__invest { border-color: rgba(12, 13, 15, .12); }

.plano--dark {
  background: linear-gradient(168deg, #262a30 0%, var(--pr-graphite) 48%, #131519 100%);
  color: var(--text-on-dark);
  border-color: var(--pr-steel);
}
.plano--dark::before { background: var(--metal-face); }
.plano--dark:hover { border-color: var(--line-on-dark-strong); }
.plano--dark .plano__name { color: var(--text-on-dark); }

.plano__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(1.25rem, 1rem + 1vw, 1.5rem) clamp(1.375rem, 1rem + 1.6vw, 2rem) 0;
}
.plano__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--pr-ink);
}
.plano--dark .plano__icon { background: rgba(255, 255, 255, .08); color: var(--pr-platinum); }
.plano__name {
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-tight);
}

.plano__invest {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-4) clamp(1.375rem, 1rem + 1.6vw, 2rem) 0;
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.plano--dark .plano__invest { border-color: var(--line-on-dark); }
.plano__invest-label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.plano--dark .plano__invest-label { color: var(--text-on-dark-muted); }
.plano__invest-value {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--weight-semibold);
}

.plano__body {
  flex: 1 1 auto;
  padding: var(--space-4) clamp(1.375rem, 1rem + 1.6vw, 2rem) 0;
}
.plano__includes-label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: var(--space-3);
}
.plano--dark .plano__includes-label { color: var(--text-on-dark-muted); }
.plano__items { display: grid; gap: var(--space-3); }
.plano__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.plano--dark .plano__item { color: var(--text-on-dark-muted); }
.plano__check {
  flex: none;
  margin-top: .2em;
  color: var(--pr-ink);
}
.plano--dark .plano__check { color: var(--pr-platinum); }

.plano__cta {
  /* Sem padding-top: o respiro acima do botão vem só do margin-top, senão
     as duas medidas se somam e alongam o card à toa. */
  padding: 0 clamp(1.375rem, 1rem + 1.6vw, 2rem) clamp(1.375rem, 1rem + 1.2vw, 1.75rem);
  margin-top: var(--space-5);
}

/* Card do rail em telas muito estreitas (~360px) tem pouco espaço interno:
   o valor do investimento e o texto do CTA precisam de ajuste específico
   para não quebrar linha de forma feia. */
@media (max-width: 400px) {
  .plano__invest { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .plano__cta .btn { padding-inline: var(--space-4); font-size: var(--fs-micro); }
}

.planos__helper {
  margin-top: var(--space-8);
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--surface-inverse);
  color: var(--text-on-dark);
}
@media (min-width: 860px) {
  .planos__helper { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); }
}
.planos__helper-title { font-size: var(--fs-h3); }
.planos__helper-text { margin-top: var(--space-2); color: var(--text-on-dark-muted); font-size: var(--fs-small); }

/* ==========================================================================
   10. FOTOS — composição editorial
   ========================================================================== */
/* As três fotos da galeria são material real do cliente, em resolução limitada.
   O grid dimensiona cada bloco para o que o arquivo comporta, em vez de ampliar. */
.galeria__grid { display: grid; gap: var(--space-5); }
.galeria__grid > * { overflow: hidden; border-radius: var(--radius-md); }
.galeria__grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

.galeria__player { display: block; width: 100%; height: 100%; border: 0; aspect-ratio: 16 / 9; }
.galeria__a { aspect-ratio: 4 / 5; }
.galeria__b { aspect-ratio: 1030 / 800; }
.galeria__c { aspect-ratio: 4 / 3; }
.galeria__a img { object-position: 50% 32%; }
.galeria__c img { object-position: 46% 44%; }

@media (min-width: 820px) {
  .galeria__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: stretch;
  }
  /* Composição com vídeo (volta sozinha quando houver ativo real). */
  .galeria__video { grid-column: 1 / 9;  grid-row: 1; }
  .galeria__a     { grid-column: 9 / 13; grid-row: 1 / 3; aspect-ratio: auto; }
  .galeria__b     { grid-column: 1 / 6;  grid-row: 2; }
  .galeria__c     { grid-column: 6 / 9;  grid-row: 2; aspect-ratio: auto; }

  /* Composição só com as três fotos: a vertical ocupa a coluna alta à direita
     e as duas horizontais se empilham à esquerda. As horizontais recebem 3/2
     no lugar da proporção nativa — recorte leve, que impede a seção de crescer
     ~30% em altura só por ter perdido o bloco de vídeo. */
  .galeria__grid--fotos .galeria__b { grid-column: 1 / 8;  grid-row: 1; aspect-ratio: 3 / 2; }
  .galeria__grid--fotos .galeria__c { grid-column: 1 / 8;  grid-row: 2; aspect-ratio: 3 / 2; }
  .galeria__grid--fotos .galeria__a { grid-column: 8 / 13; grid-row: 1 / 3; aspect-ratio: auto; }
}

/* ==========================================================================
   11. FALE CONOSCO
   ========================================================================== */
.contato__grid {
  display: grid;
  gap: clamp(2.5rem, 1.6rem + 4vw, 4rem);
  align-items: start;
}
@media (min-width: 860px) {
  .contato__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(3rem, 5vw, 5rem);
  }
}
.contato__info > * + * { margin-top: var(--space-6); }
.contato__block { display: grid; gap: var(--space-2); }
.contato__block-label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.contato__block-value { font-size: var(--fs-small); line-height: var(--lh-body); }
.contato__hours { display: grid; gap: var(--space-1); font-size: var(--fs-small); }
.contato__hours div { display: flex; justify-content: space-between; gap: var(--space-5); max-width: 320px; }
.contato__hours dt { color: var(--text-muted); }
.contato__hours dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Casca do cartão da segunda coluna. Serve tanto ao painel de canais (estado
   atual) quanto ao formulário, quando ele voltar com backend. */
.contato__card {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.contato__form-grid { display: grid; gap: var(--space-5); }
@media (min-width: 620px) {
  .contato__form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contato__form-grid .field--full { grid-column: 1 / -1; }
}
.contato__form-foot {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}

/* Painel de canais reais ---------------------------------------------------- */
.contato__painel-title { font-size: var(--fs-h3); letter-spacing: var(--tracking-tight); }
.contato__painel-text {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.contato__painel-cta { margin-top: var(--space-6); }

.canais { margin-top: var(--space-6); display: grid; }
.canal {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-top: 1px solid var(--line);
}
.canal:first-child { border-top: 0; padding-top: 0; }
.canal:last-child { padding-bottom: 0; }
@media (min-width: 480px) {
  .canal {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: baseline;
  }
}
.canal__label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.canal__value {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
a.canal__value { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
a.canal__value:hover { border-color: var(--pr-ink); }

/* ==========================================================================
   12. MAPA / LOCALIZAÇÃO
   ========================================================================== */
.mapa { position: relative; }
/* O iframe herda a mesma proporção que o placeholder ocupava, então a
   composição da seção não mudou ao trocar por um mapa real. */
.mapa__media { aspect-ratio: 4 / 3; }
.mapa__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* O mapa do Google é claro; a seção fecha uma página escura. A dessaturação
     leve o encaixa na paleta acromática sem torná-lo ilegível. */
  filter: saturate(.35) contrast(1.02);
}
@media (min-width: 900px) {
  .mapa__media { aspect-ratio: 21 / 8; }
  .mapa__card {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: min(400px, 34vw);
  }
  .mapa__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .mapa__overlay .container { height: 100%; position: relative; }
  .mapa__card { pointer-events: auto; }
}
.mapa__card {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface-inverse);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.mapa__card-address { font-size: var(--fs-small); color: var(--text-on-dark-muted); line-height: var(--lh-body); }
.mapa__card-cta { justify-self: start; }
@media (max-width: 899px) {
  .mapa__card { margin-top: calc(var(--space-8) * -1); position: relative; z-index: var(--z-raised); }
}
/* --- Ajustes finos --------------------------------------------------------- */
.solucao__body { display: block; min-width: 0; }
.contato__block-value address,
address.contato__block-value { font-style: normal; }
.contato__block-value,
.contato__block-value a { overflow-wrap: anywhere; text-decoration: none; }

/* ==========================================================================
   Densidade vertical — coluna única
   Sem limite de largura, as mídias verticais esticam até a borda e a faixa
   de 700–900 px fica mais alta que o próprio mobile. O teto abaixo resolve
   isso sem mexer na arquitetura das seções.
   ========================================================================== */
@media (max-width: 719px) {
  .apresentacao__media,
  .diferenciais__media { max-width: 440px; }
}
@media (max-width: 719px) {
  .galeria__a { max-width: 440px; }
  .galeria__c { max-width: 580px; }
}

/* Cartões de plano: as caixas de slot eram o bloco mais alto da Home. */
.plano { gap: var(--space-4); }
.plano__slot { padding: var(--space-3) var(--space-4); }
.plano__items { gap: var(--space-2); }

/* Compactações adicionais de coluna única ---------------------------------- */
@media (max-width: 639px) {
  .galeria__a { aspect-ratio: 1 / 1; }
  .contato__info > * + * { margin-top: var(--space-5); }
  .contato__form-grid { gap: var(--space-4); }
}

/* Antes de o grid editorial da galeria entrar (820 px), as peças verticais
   também precisam de teto para não dominarem a altura da seção. */
@media (max-width: 819px) {
  .galeria__a { max-width: 440px; }
  .galeria__c { max-width: 580px; }
}