/* ==========================================================================
   Pagina de servico — /servicos/{slug}

   Uma folha para as seis areas. Nada aqui conhece o nome do servico: o que
   muda vem de config/services.php.

   Composicao, de cima para baixo:
     .svp-hero    cartao branco no palco, texto a esquerda e ficha a direita
     .spec        a ficha da area, o unico bloco escuro do topo
     .svp-nav     sumario que cola abaixo do header
     .svp-section casca comum das cinco secoes (01 a 05)
     .flow        as quatro etapas do trabalho
     .signals     sintoma e resposta, em duas colunas
     .qa          as perguntas frequentes, em acordeao
     .related     as outras areas, em linha de indice

   Regra de ouro herdada do hero da home: o topo cabe na janela sem rolagem.
   Por isso as medidas verticais aqui sao limitadas por vw E por vh.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Topo
   -------------------------------------------------------------------------- */
.svp-hero {
  /* Um degrau abaixo do display da home: aqui existe trilha, sobretitulo e
     ficha dividindo a mesma janela. */
  --fs-display: clamp(1.875rem, min(0.75rem + 6vw, 9.2vh), 6.25rem);
  --svp-pad: clamp(1.125rem, min(0.4rem + 4.2vw, 4.6vh), 4rem);
  --svp-gap: clamp(0.5rem, min(2.2vw, 1.9vh), 1.375rem);

  padding: calc(var(--header-h) + 2 * var(--shell-pad)) var(--shell-pad) var(--shell-pad);
}

.svp-hero__card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  min-height: calc(100svh - var(--header-h) - 3 * var(--shell-pad));
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* Halo quente quase imperceptivel, recortado pelo raio do cartao. */
.svp-hero__glow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.svp-hero__glow::after {
  content: "";
  position: absolute;
  top: -34%;
  right: -10%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-tint) 0%, transparent 68%);
}

.svp-hero__main {
  position: relative;
  display: grid;
  align-content: center;
  gap: calc(var(--svp-gap) * 1.6);
  padding: var(--svp-pad);
  min-height: 0;
}

.svp-hero__content {
  display: grid;
  align-content: end;
  gap: var(--svp-gap);
  min-width: 0;
  container-type: inline-size;
}

.svp-hero__crumbs {
  min-width: 0;
}

.svp-hero__eyebrow {
  display: grid;
  gap: 0.0625rem;
}

/* --------------------------------------------------------------------------
   Manchete. O sobretitulo carrega a palavra-chave regional dentro do H1,
   e as linhas grandes ficam livres para dizer o que interessa ao leitor.
   -------------------------------------------------------------------------- */
.svp-hero__headline {
  display: grid;
  /* Justo como o hero da home: as linhas formam um bloco, nao uma lista. */
  gap: 0.06em;
  margin-left: -0.04em; /* alinhamento optico da haste */
}

.svp-hero__kicker {
  display: block;
  padding-bottom: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-strong);
}

.svp-hero__lead {
  max-width: 44ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-70);
}

.svp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Coluna estreita: os dois botoes dividem a linha em vez de empilhar. Uma
   linha extra custa ~50px, exatamente o que tiraria o topo da janela. */
@container (max-width: 26rem) {
  .svp-hero__actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 0.75rem;
    font-size: 0.8125rem;
  }

  .svp-hero__actions .btn__icon {
    display: none;
  }
}

.svp-hero__visual {
  position: relative;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Ficha da area — dado seco sobre fundo escuro, na mesma linguagem da
   ficha do escritorio na secao Empresa.
   -------------------------------------------------------------------------- */
.spec {
  position: relative;
  display: grid;
  gap: clamp(0.75rem, min(1.6vw, 1.6vh), 1.125rem);
  padding: clamp(0.875rem, min(1.8vw, 1.8vh), 1.5rem);
  border-radius: var(--radius-panel);
  background: var(--surface-ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  opacity: 0;
  animation: panel-in var(--dur-reveal) var(--ease-out) 420ms forwards;
}

/* Faixa de marca de 2px no topo: a unica assinatura vermelha do bloco. */
.spec::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, rgba(229, 50, 45, 0) 62%);
}

.spec__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.spec__code {
  padding: 0.1875rem 0.4375rem;
  border: 1px solid var(--line-on-ink);
  border-radius: 0.375rem;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--on-ink);
}

.spec__label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

/* Quem responde pela area. Contabilidade se contrata por confianca: nome e
   rosto valem mais que qualquer adjetivo. */
.spec__owner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: clamp(0.625rem, 1.4vh, 0.875rem);
  border-block: 1px solid var(--line-on-ink);
}

.spec__owner-avatar {
  width: 3rem;
  height: 3rem;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface-ink-soft);
}

.spec__owner-avatar picture {
  display: block;
  height: 100%;
}

.spec__owner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(0.85) contrast(1.02);
}

.spec__owner-text {
  display: grid;
  gap: 0.0625rem;
  min-width: 0;
}

.spec__owner-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
}

.spec__owner-name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.024em;
}

.spec__owner-role {
  font-size: var(--fs-micro);
  line-height: 1.35;
  color: var(--brand);
}

.spec__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(0.375rem, 1vh, 0.5625rem);
  border-bottom: 1px solid var(--line-on-ink);
}

.spec__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.spec__k {
  flex: none;
  font-size: var(--fs-micro);
  color: var(--on-ink-muted);
}

.spec__v {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.012em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.spec__seal {
  padding: clamp(0.625rem, 1.4vh, 0.875rem);
  border-radius: var(--radius-sm);
  background: var(--surface-ink-soft);
  border: 1px solid var(--line-on-ink);
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--on-ink-muted);
}

/* --------------------------------------------------------------------------
   Faixa de prova no rodape do cartao — o mesmo dado da home
   -------------------------------------------------------------------------- */
.svp-hero__proof {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(1.25rem, 5vw, 4rem);
  padding: clamp(0.6875rem, min(2.2vw, 1.9vh), 1.5rem) var(--svp-pad);
  border-top: 1px solid var(--line);
}

.svp-hero__proof::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: var(--line-strong);
  transform-origin: left;
  transform: scaleX(0);
  animation: rule-grow var(--dur-reveal) var(--ease-out) 860ms forwards;
}

.svp-hero__proof-item {
  display: grid;
  gap: 0.0625rem;
  min-width: 0;
  opacity: 0;
  animation: rise-in var(--dur-slow) var(--ease-out) forwards;
  animation-delay: calc(920ms + var(--i) * 80ms);
}

.svp-hero__proof-value {
  font-family: var(--font-display);
  font-size: clamp(1rem, min(0.95rem + 0.8vw, 2.1vh), 1.375rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.svp-hero__proof-label {
  font-size: var(--fs-micro);
  line-height: 1.3;
  color: var(--ink-50);
}

/* --------------------------------------------------------------------------
   Sumario fixo. Cola abaixo do header, na mesma pilula da navegacao.
   No celular vira uma faixa que rola no eixo horizontal.
   -------------------------------------------------------------------------- */
.svp-nav {
  position: sticky;
  top: calc(var(--header-h) + 2 * var(--shell-pad));
  /* Abaixo do header (100) e acima do conteudo. */
  z-index: 90;
  padding-inline: var(--shell-pad);
  margin-bottom: var(--shell-pad);
  /* A faixa inteira nao intercepta o ponteiro; so a pilula. */
  pointer-events: none;
}

.svp-nav__pill {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.3125rem;
  border-radius: var(--radius-pill);
  background: var(--surface-glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}

.svp-nav__label {
  flex: none;
  padding-inline: 0.5rem;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-30);
}

.svp-nav__list {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
}

.svp-nav__list::-webkit-scrollbar {
  display: none;
}

.svp-nav__item {
  flex: none;
  scroll-snap-align: center;
}

.svp-nav__link {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-50);
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.svp-nav__link:hover {
  color: var(--ink);
  background: var(--surface-sunken);
}

/* Secao em cena. O marcador vermelho e o unico ruido de cor da pilula. */
.svp-nav__link[aria-current="true"] {
  color: var(--ink);
  font-weight: 700;
  background: var(--surface-sunken);
}

.svp-nav__cta {
  flex: none;
}

/* --------------------------------------------------------------------------
   Casca comum das secoes 01 a 05
   -------------------------------------------------------------------------- */
.svp-section {
  /* A ancora precisa parar abaixo do header E do sumario fixo, com uma folga
     para a secao nao nascer colada na pilula. */
  scroll-margin-top: calc(var(--header-h) + 6rem);
}

.svp-block {
  display: grid;
  gap: var(--section-gap);
}

.svp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.svp-meta {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-30);
  font-variant-numeric: tabular-nums;
}

.svp-manifesto {
  display: grid;
  gap: clamp(1.125rem, 0.8rem + 1.6vw, 2rem);
}

.svp-headline {
  margin-left: -0.035em;
  font-size: clamp(1.625rem, 1rem + 2.8vw, 3.25rem);
}

.svp-prose {
  display: grid;
  justify-items: start;
  gap: clamp(0.875rem, 0.7rem + 0.8vw, 1.25rem);
  max-width: 52ch;
}

.svp-lead {
  font-size: var(--fs-lead-lg);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: pretty;
}

.svp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.1875rem;
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.svp-link__icon {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}

.svp-link__icon path {
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svp-link:hover {
  color: var(--brand-strong);
  border-color: var(--brand-strong);
}

.svp-link:hover .svp-link__icon {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   02 · Como funciona — quatro etapas em uma linha continua
   -------------------------------------------------------------------------- */
.flow {
  display: grid;
}

.flow__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.875rem;
  row-gap: 0.25rem;
  padding-block: clamp(1rem, 0.8rem + 0.9vw, 1.5rem);
  border-top: 1px solid var(--line);
}

/* O ponto vermelho nasce sobre o fio: e ele que costura as quatro etapas. */
.flow__dot {
  position: absolute;
  top: -0.1875rem;
  left: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--brand);
  transform: scale(0);
  transition: transform var(--dur-slow) var(--ease-out);
}

[data-reveal].is-revealed .flow__dot {
  transform: scale(1);
  transition-delay: calc(120ms + var(--i, 0) * var(--reveal-stagger));
}

.flow__n {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-15);
}

.flow__label {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.45vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.028em;
  color: var(--ink);
}

.flow__note {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-50);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   03 · Quando acionar — sintoma de um lado, resposta do outro
   -------------------------------------------------------------------------- */
.signals {
  display: grid;
}

/* Cabecalho de coluna: existe apenas onde ha duas colunas de verdade. */
.signals__legend {
  display: none;
}

.signals__list {
  display: grid;
}

.signals__row {
  display: grid;
  gap: 0.375rem;
  padding-block: clamp(0.875rem, 0.75rem + 0.7vw, 1.25rem);
  border-top: 1px solid var(--line);
}

.signals__row:last-child {
  border-bottom: 1px solid var(--line);
}

.signals__label {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: pretty;
}

.signals__bullet {
  width: 0.3125rem;
  height: 0.3125rem;
  flex: none;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.55;
}

.signals__answer {
  padding-left: 1.125rem;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-70);
  text-wrap: pretty;
}

.signals__answer-k {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-30);
}

/* --------------------------------------------------------------------------
   04 · Duvidas — acordeao. Sem JavaScript nasce tudo aberto: o recolhimento
   e regra `.js`, aplicada no <head>, entao nao existe piscada de conteudo.
   -------------------------------------------------------------------------- */
.qa {
  display: grid;
}

.qa__item {
  position: relative;
  border-top: 1px solid var(--line);
}

.qa__item:last-child {
  border-bottom: 1px solid var(--line);
}

/* O fio superior vira vermelho crescendo da esquerda. */
.qa__item::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.qa__item.is-open::after {
  transform: scaleX(1);
}

.qa__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding-block: clamp(0.875rem, 0.75rem + 0.7vw, 1.25rem);
  text-align: left;
}

.qa__trigger:focus-visible {
  border-radius: var(--radius-sm);
  outline-offset: 4px;
}

.qa__q {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.5vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: pretty;
}

.qa__mark {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.qa__mark svg {
  width: 0.75rem;
  height: 0.75rem;
}

.qa__mark path {
  stroke: var(--ink-50);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--dur-base) var(--ease-out);
}

.qa__item.is-open .qa__mark {
  background: var(--ink);
  border-color: var(--ink);
  transform: rotate(180deg);
}

.qa__item.is-open .qa__mark path {
  stroke: #fff;
}

@media (hover: hover) {
  .qa__item:not(.is-open):hover::after {
    transform: scaleX(1);
  }

  .qa__item:not(.is-open):hover .qa__mark {
    border-color: var(--ink-30);
    transform: scale(1.08);
  }

  .qa__item:not(.is-open):hover .qa__mark path {
    stroke: var(--ink);
  }
}

.qa__body {
  display: grid;
}

/* Animar grid-template-rows funciona em Chrome 107+, Firefox 66+ e Safari
   16+. Em navegador mais antigo a troca 0fr/1fr continua valendo, so que
   instantanea: abre e fecha do mesmo jeito, sem transicao. */
.js .qa__body {
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-svc-panel) var(--ease-out);
}

.js .qa__item.is-open .qa__body {
  grid-template-rows: 1fr;
}

/* O recorte nao pode ter padding proprio: numa faixa 0fr o padding nao e
   absorvido por min-height 0 e a linha fechada vazaria a altura dele. */
.qa__panel {
  min-height: 0;
  overflow: hidden;
}

.qa__a {
  padding-bottom: clamp(0.875rem, 0.75rem + 0.7vw, 1.25rem);
  max-width: 68ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--ink-70);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   05 · Outras areas — a mesma linha de indice da home, agora como link
   -------------------------------------------------------------------------- */
.related {
  display: grid;
}

.related__item {
  position: relative;
  border-top: 1px solid var(--line);
}

.related__item:last-child {
  border-bottom: 1px solid var(--line);
}

.related__item::after {
  content: "";
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.related__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "n    code arrow"
    "name name arrow"
    "summ summ arrow";
  column-gap: 0.75rem;
  row-gap: 0.1875rem;
  align-items: center;
  padding-block: clamp(0.875rem, 0.75rem + 0.7vw, 1.25rem);
}

.related__n {
  grid-area: n;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-30);
  transition: color var(--dur-fast) var(--ease-out);
}

.related__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.related__summary {
  grid-area: summ;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--ink-50);
}

.related__code {
  grid-area: code;
  justify-self: start;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--line);
  border-radius: 0.3125rem;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.14em;
  color: var(--ink-30);
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.related__arrow {
  grid-area: arrow;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.related__arrow svg {
  width: 0.75rem;
  height: 0.75rem;
}

.related__arrow path {
  stroke: var(--ink-50);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--dur-base) var(--ease-out);
}

@media (hover: hover) {
  .related__item:hover::after {
    transform: scaleX(1);
  }

  .related__item:hover .related__n {
    color: var(--brand);
  }

  .related__item:hover .related__arrow {
    background: var(--ink);
    border-color: var(--ink);
    transform: translateX(2px);
  }

  .related__item:hover .related__arrow path {
    stroke: #fff;
  }
}

/* --------------------------------------------------------------------------
   Fechamento — o cartao existe so para dar a mesma calha das outras secoes
   -------------------------------------------------------------------------- */
.svp-closing__card {
  padding: clamp(0.625rem, 0.4rem + 1vw, 1rem);
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .spec {
    max-width: 26rem;
  }

  /* Sintoma e resposta em duas colunas: a leitura vira tabela, que e como a
     cliente organiza o trabalho dela. */
  .signals__legend {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    padding-bottom: 0.5rem;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-30);
  }

  .signals__row {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
  }

  .signals__answer {
    padding-left: 0;
  }

  /* Com o cabecalho de coluna no lugar, o rotulo por linha viraria eco. */
  .signals__answer-k {
    display: none;
  }

  .related__link {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto auto;
    grid-template-areas:
      "n    name code arrow"
      ".    summ code arrow";
    column-gap: 1rem;
  }

  .related__code {
    align-self: center;
  }
}

/* --------------------------------------------------------------------------
   Desktop — a composicao da referencia: texto a esquerda, ficha a direita
   -------------------------------------------------------------------------- */
@media (min-width: 64rem) {
  .svp-hero__main {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-content: end;
    align-items: end;
    gap: clamp(1.75rem, 3.5vw, 4rem);
  }

  .svp-hero__visual {
    display: flex;
    justify-content: flex-end;
    padding-bottom: clamp(0.5rem, 1.2vw, 1.25rem);
  }

  .spec {
    width: 100%;
    max-width: 25rem;
  }

  .svp-manifesto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 5rem);
  }

  /* As etapas viram uma linha continua de quatro colunas: o fio superior de
     cada uma encosta na seguinte e o desenho fecha de ponta a ponta. */
  .flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: clamp(1.25rem, 2.4vw, 2.5rem);
  }

  .flow__step {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    row-gap: 0.375rem;
  }

  .flow__n {
    grid-row: auto;
    padding-bottom: 0.25rem;
  }

  .related__link {
    grid-template-columns: 3rem minmax(0, 16rem) minmax(0, 1fr) 4rem 1.75rem;
    grid-template-areas: "n name summ code arrow";
    column-gap: clamp(1.25rem, 2.4vw, 2.5rem);
  }

  .related__summary {
    font-size: var(--fs-sm);
  }

  .related__code {
    justify-self: end;
  }
}

/* --------------------------------------------------------------------------
   Compactacao do topo. O cartao precisa caber na janela em qualquer altura,
   entao o que e apoio sai de cena antes de o essencial ser apertado.
   -------------------------------------------------------------------------- */
@media (max-width: 63.99rem) {
  /* Fora do layout de duas colunas a ficha vira cartao horizontal curto:
     fica o rosto de quem responde e o codigo da area. */
  .spec {
    gap: 0.75rem;
  }

  .spec__list,
  .spec__seal {
    display: none;
  }

  .spec__owner {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 47.99rem) {
  /* A trilha e o sobretitulo do H1 ja dizem area, cidade e codigo. Repetir
     isso no eyebrow custaria duas linhas da janela, que e o recurso mais
     escasso aqui. */
  .svp-hero__eyebrow {
    display: none;
  }

  /* A ficha vira faixa: o rosto e o nome de quem responde pela area. */
  .spec {
    gap: 0;
    padding: 0.75rem;
  }

  .spec__head {
    display: none;
  }

  .spec__owner {
    border-block: 0;
    padding-block: 0;
  }

  .spec__owner-avatar {
    width: 2.5rem;
    height: 2.5rem;
  }

  .svp-hero__proof-label {
    display: none; /* no celular, so o dado, sem ruido */
  }

  .svp-hero__proof {
    gap: 1.25rem;
  }

  .svp-nav__label {
    display: none;
  }

  .svp-nav__cta {
    display: none;
  }
}

/* Celular estreito: o texto de apoio desce um degrau na escala para o topo
   caber inteiro mesmo nas areas de introducao mais longa. */
@media (max-width: 30rem) {
  .svp-hero {
    --svp-pad: clamp(0.875rem, 3.6vw, 1.125rem);
  }

  .svp-hero__lead {
    font-size: var(--fs-sm);
    line-height: 1.5;
  }
}

/* Notebook de tela baixa (1024x768, 13 polegadas). Quem cede altura primeiro
   e o display: e ele que cresce mais rapido, e cortar conteudo seria pior. */
@media (min-width: 64rem) and (max-height: 50rem) {
  .svp-hero {
    --fs-display: clamp(1.75rem, min(0.75rem + 4.6vw, 7.6vh), 4.5rem);
    --svp-gap: clamp(0.5rem, 1.6vh, 0.875rem);
  }

  .spec__seal {
    display: none;
  }
}

/* Janela baixa (celular deitado, notebook curto): duas colunas cedo e
   descarte progressivo do que e acessorio. Sobra o caminho (trilha), a
   promessa (manchete), quem cuida (ficha) e a acao. */
@media (min-width: 40rem) and (max-height: 34rem) {
  .svp-hero {
    --fs-display: clamp(1.5rem, min(0.9rem + 5vw, 7.4vh), 3.25rem);
    --svp-pad: clamp(0.75rem, 3.1vh, 1.5rem);
  }

  /* Deitado, a linha de apoio desce um degrau: o que precisa de espaco e a
     manchete e o botao. */
  .svp-hero__lead {
    font-size: var(--fs-sm);
    line-height: 1.45;
  }

  .svp-hero__main {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 1.5rem;
  }

  .svp-hero__visual {
    display: flex;
    justify-content: flex-end;
  }

  .spec {
    width: min(100%, 21rem);
  }

  .svp-hero__eyebrow,
  .svp-hero__proof,
  .spec__head {
    display: none;
  }

  .svp-hero__actions {
    flex-wrap: nowrap;
  }
}

@media (max-height: 30rem) {
  .svp-hero__eyebrow span:nth-child(2),
  .svp-hero__proof {
    display: none;
  }
}

@media (max-height: 26rem) {
  .svp-hero {
    --svp-pad: clamp(0.875rem, 4vh, 1.5rem);
    --fs-display: clamp(1.625rem, min(0.9rem + 6vw, 9vh), 3.5rem);
  }

  .svp-hero__lead {
    display: none;
  }
}

@media (max-width: 39.99rem) and (max-height: 34rem) {
  .svp-hero__visual {
    display: none; /* paisagem em celular pequeno: so a mensagem */
  }
}