/* ════════════════════════════════════════════════════════════
   Página /empresas — só o que o kit do site.css não cobre.
   Cores, raios e sombras vêm dos tokens (/assets/tokens.css).
   ════════════════════════════════════════════════════════════ */

/* Faixa de fundo suave, alternando com o fundo da página */
.emp-fundo { background: var(--bg-suave); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Cabeçalho de seção centrado (o .lead se limita a 60ch sozinho) */
.emp-cab { max-width: 820px; margin: 0 auto; text-align: center; }
.emp-cab .lead { margin-inline: auto; }
/* títulos equilibrados e parágrafos sem palavra órfã */
main h2 { text-wrap: balance; }
main .lead { text-wrap: pretty; }

/* ── E1 · Hero ─────────────────────────────────────────── */
.emp-selos { list-style: none; margin-bottom: 0; padding: 0; gap: 8px 18px; }
.emp-selos li { display: inline-flex; align-items: center; gap: 7px; }
.emp-hero-foto img { box-shadow: var(--sh-card); }
/* em duas colunas a foto ganha altura: recorte 4:3 centrado na porta */
@media (min-width: 920px) {
  .emp-hero-foto img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; }
}

/* ── E2 · O que aperta: título e frase, como no levantamento ── */
@media (min-width: 900px) { .emp-aperta { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.emp-dores {
  margin: 0; padding: 6px clamp(18px, 3vw, 28px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r5); box-shadow: var(--sh-card);
}
.emp-dores > div { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--border); }
.emp-dores > div:first-child { border-top: 0; }
.emp-dores dt { font-family: var(--f-display); font-size: var(--fs-md); font-weight: 700; line-height: 1.35; color: var(--tx-1); }
.emp-dores dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--tx-2); }
@media (min-width: 600px) {
  .emp-dores > div { grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: baseline; }
}

/* ── E3 · Como começa: as etapas da conversa ───────────── */
.emp-etapas {
  list-style: none; margin: 32px auto 0; padding: 0; max-width: 640px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; counter-reset: etapa;
}
.emp-etapas > li {
  counter-increment: etapa; display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  padding: 7px 16px 7px 7px; border-radius: var(--rpill);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-card);
  font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--tx-1);
}
.emp-etapas > li::before {
  content: counter(etapa); flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--mint-lt); color: var(--verde-dk); font: 800 13px/1 var(--f-display);
}
/* a última etapa é o que a pessoa leva: o retrato */
.emp-etapas > li:last-child { background: var(--verde-dk); border-color: var(--verde-dk); color: var(--tx-sobre-cor); }
.emp-etapas > li:last-child::before { background: var(--surface); }

/* ── E4 · O que a empresa recebe ───────────────────────── */
/* 7 itens: 1 coluna no celular; 2 por linha desde 600 px; 4 + 3 desde 960 px, com a última linha centrada */
.emp-entregas { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.emp-entregas > li {
  display: flex; align-items: flex-start; gap: 16px; padding: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r4); box-shadow: var(--sh-card);
}
.emp-entregas p { font-size: 15px; line-height: 1.6; color: var(--tx-2); }
.emp-entregas b { font-weight: 700; color: var(--tx-1); }
@media (min-width: 600px) {
  .emp-entregas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .emp-entregas > li { grid-column: span 2; }
  .emp-entregas > li:last-child { grid-column: 2 / span 2; }
}
@media (min-width: 960px) {
  .emp-entregas { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .emp-entregas > li { flex-direction: column; gap: 14px; padding: 22px; }
  .emp-entregas > li:nth-child(5) { grid-column: 2 / span 2; }
  .emp-entregas > li:last-child { grid-column: span 2; }
}
.emp-entregas + .nota-legal { margin-top: 24px; }
/* o retrato é largo (2,3:1): sempre na largura inteira do conteúdo.
   O recorte começa logo acima dos quatro números e traz, nos lados e embaixo, a margem cinza da tela do app:
   o clip tira essa margem (o fundo branco da .tela aparece no lugar) e o padding-top, em % da largura,
   devolve em cima o mesmo respiro dos lados, em qualquer largura. */
.emp-retrato { margin-top: 44px; padding-top: 2.6%; }
.emp-retrato img { clip-path: inset(0 1.3% 4.5% 1.3%); }
/* no celular o retrato fica no quadro rolável (.tela-rolavel do site.css) com 720 px de largura:
   o % do padding passaria a valer sobre o quadro, mais estreito; aqui vale 2,6% de 720 px */
@media (max-width: 599.98px) { .tela-rolavel > .emp-retrato { padding-top: 19px; } }
/* o selo desce 14 px da moldura: a nota de baixo ganha distância para não encostar nele
   (no celular, a dica do quadro já fica entre os dois e a nota volta ao espaço normal) */
@media (min-width: 600px) { .tela-rolavel-dica + .nota-legal { margin-top: 30px; } }

/* ── E5 · Contrato próprio ─────────────────────────────── */
.emp-contrato {
  display: grid; gap: 18px; justify-items: start; padding: clamp(28px, 5vw, 52px);
  border-radius: var(--r5); background: var(--verde-profundo); color: var(--tx-inv); box-shadow: var(--sh-pop);
}
.emp-contrato h2 { color: var(--tx-inv); }
/* "A empresa também contrata a Verta." em duas linhas, sem "também" sozinho: na grade de
   três colunas (860 a 1179 px) e no celular estreito a fonte acompanha a largura do cartão */
@media (min-width: 860px) and (max-width: 1179.98px) { .emp-contrato h2 { font-size: clamp(28px, 3.5vw, 42px); } }
@media (max-width: 389.98px) { .emp-contrato h2 { font-size: clamp(22px, 7vw, 28px); } }
@media (max-width: 359.98px) { .emp-contrato { padding-inline: 24px; } }
.emp-contrato p { max-width: 60ch; font-size: clamp(16px, 1.9vw, 18px); line-height: 1.6; color: var(--tx-inv); text-wrap: pretty; }
@media (min-width: 860px) {
  .emp-contrato { grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; column-gap: 32px; }
}

/* ── E6 · PF e PJ lado a lado ──────────────────────────── */
.emp-pfpj { max-width: 980px; margin: 36px auto 0; }
.emp-lado { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: clamp(24px, 4vw, 34px); }
.emp-lado h3 { margin-top: 4px; }
.emp-lado .muted { font-size: 15px; line-height: 1.6; }
.emp-lado .checklist { margin: 4px 0 10px; gap: 10px; }
.emp-lado .checklist div { font-size: 15px; line-height: 1.5; }
.emp-lado > :last-child { margin-top: auto; }
/* com os cartões lado a lado, o link do PF fica na mesma linha de centro do botão do PJ */
@media (min-width: 720px) { .emp-lado > .btn-link { min-height: 56px; } }

/* ── E7 · Independência: o texto acompanha o simulador, que é alto ── */
@media (min-width: 900px) {
  .emp-indep { align-items: start; }
  .emp-indep > :first-child { position: sticky; top: 100px; }
}

/* ── E8 · Como funciona ────────────────────────────────── */
.emp-jornada { margin-top: 40px; }

/* ── E9 · CTA final ────────────────────────────────────── */
.emp-final .lead { margin-inline: auto; text-wrap: balance; }
.emp-final .hero-cta { justify-content: center; }
.emp-entrar { margin-top: 18px; }

/* link dentro da nota (o aviso de sem JavaScript do teste e do simulador): sublinhado, como no /agendar */
.nota-legal a { color: var(--verde-dk); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }