/* =========================================================================
   Landing da assistência técnica — aparência.
   Escrito primeiro para o celular; o que muda em tela maior fica nos blocos
   @media (min-width) logo depois de cada componente.

   Cores e fontes herdadas do site institucional (mesmo amarelo do
   logotipo, mesmo preto, Manrope + Archivo). Trocar aqui, no :root.
   ========================================================================= */

@font-face {
  font-family: "Manrope";
  src: url("fontes/manrope-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fontes/archivo-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Marca */
  --tinta: #111111;           /* preto do logotipo */
  --marca: #ffcc2a;           /* amarelo do logotipo */
  --marca-forte: #f2bb0c;     /* amarelo do botão pressionado */
  --papel: #ffffff;

  /* Neutros (sem tingir: o branco é branco) */
  --grafite: #2b2b2b;
  --tinta-suave: #4f4f4f;     /* texto de apoio sobre branco — 8,3:1 */
  --tinta-clara: #c8c8c8;     /* texto de apoio sobre preto — 11:1 */
  --linha: #e6e6e6;
  --superficie: #f5f5f4;

  --titulo: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --raio: 14px;
  --raio-grande: 22px;
  --sombra: 0 1px 2px rgb(17 17 17 / 0.04), 0 4px 16px rgb(17 17 17 / 0.04);

  --respiro: clamp(4rem, 10vw, 7.5rem);
  --margem: 1rem;
  --largura: 72rem;

  /* Camadas */
  --z-topo: 100;
  --z-fixo: 200;

  --saida: cubic-bezier(0.22, 1, 0.36, 1);     /* ease-out-quint */
  --altura-fixo: 0px;                          /* reservado pelo CTA fixo */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--titulo);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
address { font-style: normal; }
button, input { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: var(--z-fixo);
  background: var(--tinta); color: var(--papel);
  padding: .75rem 1rem; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.pular:focus { top: 1rem; }

.faixa {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: max(var(--margem), env(safe-area-inset-left));
}

.quebra { display: block; }

.icone {
  width: 1.5rem; height: 1.5rem;
  flex: none;
}

/* ---------- Versões A / B -------------------------------------------------
   Sem a versão definida (JavaScript desligado), mostra a A. */
html:not([data-variante="b"]) .so-b { display: none !important; }
html[data-variante="b"] .so-a { display: none !important; }

/* ---------- Botões -------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 3rem;
  padding: .75rem 1.375rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s var(--saida), transform .2s var(--saida), box-shadow .2s var(--saida);
  -webkit-tap-highlight-color: transparent;
}
.botao .icone { width: 1.375rem; height: 1.375rem; }
.botao:active { transform: scale(.98); }

.botao--marca { background: var(--marca); color: var(--tinta); }
.botao--marca:hover { background: var(--marca-forte); }

.botao--escuro { background: var(--tinta); color: var(--papel); }
.botao--escuro .icone { color: var(--marca); }
.botao--escuro:hover { background: var(--grafite); }

.botao--contorno { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.botao--contorno:hover { background: var(--tinta); color: var(--papel); }

.botao--grande { min-height: 3.5rem; padding-inline: 1.75rem; font-size: 1.0625rem; }
.botao--cheio { width: 100%; }

.link-forte {
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--marca);
}
.link-forte:hover { text-decoration-color: var(--tinta); }

/* ---------- Molduras de foto (proporção fixa: trocar a foto não mexe no layout) */
.moldura {
  position: relative;
  overflow: hidden;
  border-radius: var(--raio-grande);
  background: var(--superficie);
}
.moldura img { width: 100%; height: 100%; object-fit: cover; }
.moldura--3x2 { aspect-ratio: 3 / 2; }
.moldura--4x5 { aspect-ratio: 4 / 5; }
.moldura--4x3 { aspect-ratio: 4 / 3; }

/* ---------- Cabeçalho ----------------------------------------------------- */
.topo {
  background: var(--papel);
  border-bottom: 1px solid var(--linha);
}
.topo__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4rem;
}
.topo__logo { width: auto; height: 34px; }
.topo__zap { min-height: 2.75rem; min-width: 2.75rem; padding: .5rem; }
.topo__zap-texto { display: none; }

@media (min-width: 720px) {
  .topo__zap { padding: .5rem 1.125rem; }
  .topo__zap-texto { display: inline; }
  .topo__zap-curto { display: none; }
}
@media (min-width: 960px) {
  .topo { position: sticky; top: 0; z-index: var(--z-topo); }
  .topo__interno { min-height: 4.5rem; }
  .topo__logo { height: 38px; }
}

/* ---------- Topo da página (hero) ---------------------------------------- */
.heroi { padding-block: 1.75rem 2rem; }
.heroi__grade { display: grid; gap: 1.75rem; }

.selo {
  font-family: var(--titulo);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: .875rem;
}

.heroi__titulo {
  font-size: clamp(2.75rem, 12.5vw, 5.5rem);
  line-height: .98;
  letter-spacing: -0.04em;
}
.heroi__titulo--pergunta { font-size: clamp(2.375rem, 10.5vw, 4.75rem); }
.heroi__linha { display: block; }

/* Destaque amarelo: preto sobre faixa amarela (o amarelo nunca é letra). */
.marca-texto {
  background: none;
  color: inherit;
  padding: 0 .08em;
  margin-left: -.08em;
  background-image: linear-gradient(var(--marca), var(--marca));
  background-repeat: no-repeat;
  background-size: 100% .62em;
  background-position: 0 88%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.heroi__apoio {
  margin-block: 1.375rem 1.625rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: 34rem;
}
.heroi .botao--grande { width: 100%; }

/* Foto do celular sem fundo: proporção fixa 4:5 e sombra suave por baixo,
   para o aparelho "assentar" no branco da página. */
.recorte {
  aspect-ratio: 4 / 5;
  width: min(68%, 17rem);
  margin-inline: auto;
}
.recorte img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgb(17 17 17 / .16)) drop-shadow(0 4px 6px rgb(17 17 17 / .10));
}
.heroi__foto--b { display: none; }

/* Entrada suave do texto do topo (só no primeiro carregamento). */
@media (prefers-reduced-motion: no-preference) {
  .heroi__texto > * { animation: subir .7s var(--saida) both; }
  .heroi__texto > :nth-child(2) { animation-delay: .06s; }
  .heroi__texto > :nth-child(3) { animation-delay: .12s; }
  .heroi__texto > :nth-child(4) { animation-delay: .18s; }
  .heroi__foto { animation: aparecer .9s var(--saida) .1s both; }
}
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }
@keyframes aparecer { from { opacity: 0; transform: scale(1.015); } }

@media (min-width: 640px) {
  .heroi .botao--grande { width: auto; }
}
@media (min-width: 960px) {
  .heroi { padding-block: 3.5rem 3rem; }
  .heroi__grade {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .heroi__titulo { font-size: clamp(3.5rem, 5.6vw, 5.25rem); }
  .heroi__titulo--pergunta { font-size: clamp(3rem, 4.6vw, 4.25rem); }
  .heroi__linha { white-space: nowrap; }
  .heroi__foto { width: min(100%, 26rem); }
  .heroi--b .heroi__grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; }
  .heroi__foto--b { display: block; width: min(100%, 23rem); position: sticky; top: 6rem; }
}

/* ---------- Diagnóstico guiado (versão B) -------------------------------- */
.diag {
  margin-top: 1.5rem;
  padding: 1.125rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-grande);
  background: var(--papel);
  box-shadow: var(--sombra);
}
.diag__topo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: 1rem;
}
.diag__voltar {
  display: inline-flex; align-items: center; gap: .25rem;
  min-height: 2.75rem;
  padding: 0 .5rem 0 0;
  border: 0; background: none;
  font-weight: 600; font-size: .9375rem;
  cursor: pointer;
}
.diag__voltar .icone { width: 1.25rem; height: 1.25rem; }
.diag__voltar[hidden] { display: none; }
.diag__progresso {
  grid-column: 2;
  justify-self: end;
  font-size: .875rem;
  color: var(--tinta-suave);
}
.diag__barra {
  grid-column: 1 / -1;
  height: 4px;
  border-radius: 4px;
  background: var(--linha);
  overflow: hidden;
}
.diag__barra span {
  display: block; height: 100%; width: 100%;
  background: var(--tinta);
  transform-origin: left center;
  transform: scaleX(var(--progresso, .3334));
  transition: transform .4s var(--saida);
}

.diag__etapa { border: 0; margin: 0; padding: 0; min-width: 0; }
.diag__etapa[hidden] { display: none; }
.diag__pergunta {
  padding: 0;
  margin-bottom: .875rem;
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}
@media (prefers-reduced-motion: no-preference) {
  .diag__etapa.entrando { animation: subir .38s var(--saida) both; }
}

.campo {
  width: 100%;
  min-height: 3.25rem;
  padding: .75rem 1rem;
  border: 1.5px solid #8a8a8a;
  border-radius: var(--raio);
  background: var(--papel);
  font-size: 1.0625rem;           /* ≥16px: o iPhone não dá zoom ao tocar */
}
.campo::placeholder { color: #6b6b6b; opacity: 1; }
.campo:focus-visible { outline: 3px solid var(--marca); outline-offset: 0; border-color: var(--tinta); }

.diag__ajuda {
  margin-block: .5rem 1.125rem;
  font-size: .9375rem;
  color: var(--tinta-suave);
}

.diag__resumo {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linha);
}
.diag__resumo[hidden] { display: none; }
.diag__resumo li {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .375rem .75rem;
  border-radius: 999px;
  background: var(--superficie);
  font-size: .875rem;
}
.diag__resumo .icone { width: 1rem; height: 1rem; }

@media (min-width: 640px) {
  .diag { padding: 1.5rem; }
}

/* ---------- Opções (problemas e marcas; A e B) --------------------------- */
.opcoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
}
.opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: .875rem;
  width: 100%;
  height: 100%;
  min-height: 6rem;
  padding: 1rem;
  border: 1.5px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel);
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s var(--saida), background-color .2s var(--saida), transform .2s var(--saida);
  -webkit-tap-highlight-color: transparent;
}
.opcao .icone { width: 1.75rem; height: 1.75rem; }
.opcao:hover { border-color: var(--tinta); }
.opcao:active { transform: scale(.98); }

/* Selecionado: muda fundo, borda E aparece o "✓" — não depende só de cor. */
.opcao[aria-pressed="true"] {
  border-color: var(--tinta);
  background: var(--marca);
}
.opcao[aria-pressed="true"]::after {
  content: "";
  position: absolute; top: .75rem; right: .75rem;
  width: 1.375rem; height: 1.375rem;
  border-radius: 50%;
  background: var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcc2a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.opcao__zap {
  position: absolute; top: 1rem; right: 1rem;
  width: 1.125rem; height: 1.125rem;
  color: #8a8a8a;
  transition: color .2s var(--saida);
}
.opcao:hover .opcao__zap { color: var(--tinta); }

.opcoes--marcas .opcao {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 4rem;
}
.opcao--marca .logo-marca { width: 1.625rem; height: 1.625rem; }
.opcao--marca .logo-marca--largo { width: 4.25rem; height: .75rem; }
.opcao--marca .logo-marca--largo + span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (min-width: 720px) {
  .opcoes--links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .opcoes--links .opcao { min-height: 8rem; padding: 1.25rem; }
}
@media (min-width: 960px) {
  .heroi--b .opcoes--problemas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Benefícios ---------------------------------------------------- */
.beneficios { padding-bottom: 1rem; }
.beneficios__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.beneficio {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem .5rem 1rem 0;
  border-top: 2px solid var(--tinta);
}
.beneficio + .beneficio { padding-left: .75rem; border-left: 1px solid var(--linha); }
.beneficio .icone { width: 1.5rem; height: 1.5rem; }
.beneficio p { font-size: .875rem; line-height: 1.35; color: var(--tinta-suave); }
.beneficio strong {
  display: block;
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--tinta);
}
@media (max-width: 359.98px) {
  .beneficio strong { font-size: .9375rem; }
  .beneficio p { font-size: .8125rem; }
  .beneficio + .beneficio { padding-left: .5rem; }
}
@media (min-width: 720px) {
  .beneficio { flex-direction: row; align-items: center; gap: .875rem; padding-block: 1.25rem; }
  .beneficio + .beneficio { padding-left: 1.5rem; }
  .beneficio .icone { width: 2rem; height: 2rem; }
  .beneficio p { font-size: 1rem; }
  .beneficio strong { font-size: 1.25rem; }
}

/* ---------- Marcas -------------------------------------------------------- */
.marcas { padding-block: 2.5rem; }
.marcas__interno {
  display: grid;
  gap: 1.25rem;
}
.marcas__titulo {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tinta-suave);
}
.marcas__lista {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #6e6e6e;
}
.marcas__lista .logo-marca { width: 2.25rem; height: 2.25rem; display: block; }
.marcas__lista .logo-marca--largo { width: 6.25rem; height: 1rem; }
@media (min-width: 960px) {
  .marcas__interno { grid-template-columns: auto 1fr; align-items: center; gap: 4rem; }
  .marcas__lista { justify-content: space-around; }
  .marcas__lista .logo-marca { width: 2.75rem; height: 2.75rem; }
  .marcas__lista .logo-marca--largo { width: 8rem; height: 1.25rem; }
}

/* ---------- Seções comuns -------------------------------------------------- */
.secao { padding-block: var(--respiro); }
.secao__cabeca { margin-bottom: 2rem; max-width: 40rem; }
.secao__titulo { font-size: clamp(2rem, 7.5vw, 3.5rem); }
.secao__apoio {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--tinta-suave);
  max-width: 36rem;
}

.problemas { background: var(--superficie); }
.problemas .opcao { border-color: transparent; box-shadow: var(--sombra); }
.problemas .opcao:hover { border-color: var(--tinta); }

/* ---------- Confiança ----------------------------------------------------- */
.confianca__grade { display: grid; gap: 2rem; }
.diferenciais {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
  margin-block: 2rem;
}
.diferenciais li {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  font-family: var(--titulo);
  font-weight: 700;
  line-height: 1.25;
}
.diferenciais .icone {
  width: 2.75rem; height: 2.75rem;
  padding: .6rem;
  border-radius: 50%;
  background: var(--marca);
}
@media (min-width: 960px) {
  .confianca__grade {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 6rem);
  }
}

/* ---------- Rapidez (faixa amarela) -------------------------------------- */
.rapidez {
  background: var(--marca);
  padding-block: var(--respiro);
}
.rapidez__grade { display: grid; gap: 2.5rem; }
.rapidez .secao__titulo { max-width: 14ch; }
.rapidez__apoio {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 32rem;
}
.rapidez__destaque {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* texto centralizado na vertical */
  min-height: 15rem;
  padding: 1.75rem 1.5rem;
  border-radius: var(--raio-grande);
  background: var(--tinta);
  color: var(--papel);
}
.rapidez__grande {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: clamp(2.25rem, 10vw, 3.75rem);
  line-height: .98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--marca);
}
.rapidez__complemento {
  margin-top: .5rem;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 1.25rem;
}
@media (min-width: 960px) {
  .rapidez__grade { grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem; }
  .rapidez__destaque { padding: 2.5rem; min-height: 18rem; }
}

/* ---------- Busca e entrega ----------------------------------------------- */
.entrega__grade { display: grid; gap: 2rem; }
.entrega__texto .botao { margin-top: 2rem; }
@media (min-width: 960px) {
  .entrega__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 6rem);
  }
  .entrega__foto { order: 2; }
}

/* ---------- Avaliações ---------------------------------------------------- */
.avaliacoes { background: var(--superficie); }
.notas { display: grid; gap: .75rem; }
.nota {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  border-radius: var(--raio);
  background: var(--papel);
  box-shadow: var(--sombra);
}
.nota__numero {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 2.75rem;
  line-height: 1;
  letter-spacing: -0.04em;
}
.nota__dados { display: grid; gap: .125rem; }
.nota__loja { font-weight: 600; font-size: .9375rem; }
.nota__link {
  font-size: .875rem;
  color: var(--tinta-suave);
  text-underline-offset: 3px;
  padding-block: .25rem;
}
.nota__link:hover { color: var(--tinta); }

.estrelas {
  display: flex;
  gap: 2px;
  color: #e3a400;   /* estrela: o amarelo da marca escurecido para aparecer no branco */
}
.estrelas svg { width: 1rem; height: 1rem; }
.estrelas .vazia { color: #d4d4d4; }

.depoimentos { margin-top: 2.5rem; }
.depoimentos__lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(84%, 22rem);
  gap: .75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: 1rem;
  margin-inline: calc(var(--margem) * -1);
  padding-inline: var(--margem);
  scroll-padding-inline: var(--margem);
  scrollbar-width: thin;
}
.depoimento {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem;
  border-radius: var(--raio);
  background: var(--papel);
  box-shadow: var(--sombra);
}
.depoimento__autor { display: flex; align-items: center; gap: .75rem; }
.depoimento__foto {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--linha);
  object-fit: cover;
}
.depoimento__nome { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.depoimento__quando { font-size: .8125rem; color: var(--tinta-suave); }
.depoimento__texto {
  font-size: .9375rem;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.depoimento__loja {
  margin-top: auto;
  font-size: .8125rem;
  color: var(--tinta-suave);
}
.depoimento__loja a { text-underline-offset: 3px; }
.depoimentos__fonte {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; color: var(--tinta-suave);
}
.depoimentos__fonte .icone { width: 1rem; height: 1rem; }

.aviso-dev {
  margin-top: 2rem;
  padding: 1rem;
  border: 1.5px dashed #8a8a8a;
  border-radius: var(--raio);
  font-family: ui-monospace, monospace;
  font-size: .8125rem;
  color: var(--tinta-suave);
}

@media (min-width: 720px) {
  .notas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nota { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
  .nota__numero { font-size: 3.5rem; }
}
@media (min-width: 960px) {
  .depoimentos__lista { margin-inline: 0; padding-inline: 0; grid-auto-columns: calc((100% - 1.5rem) / 3); }
}

/* ---------- Como funciona ------------------------------------------------- */
.passos {
  display: grid;
  gap: 0;
  counter-reset: passo;
}
.passo {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 1rem;
  padding-bottom: 1.75rem;
}
.passo:last-child { padding-bottom: 0; }
.passo::before {           /* linha que liga os passos */
  content: "";
  position: absolute;
  left: 1.5rem; top: 3rem; bottom: 0;
  width: 2px;
  background: var(--linha);
  transform: translateX(-1px);
}
.passo:last-child::before { display: none; }
.passo__numero {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--marca);
  font-family: var(--titulo);
  font-weight: 800;
  font-size: 1rem;
}
.passo__titulo { font-size: 1.25rem; letter-spacing: -0.02em; padding-top: .7rem; }
.passo p { margin-top: .375rem; color: var(--tinta-suave); }

@media (min-width: 960px) {
  .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .passo { grid-template-columns: 1fr; padding-bottom: 0; }
  .passo::before { left: 3.75rem; right: -1.25rem; top: 1.5rem; bottom: auto; width: auto; height: 2px; transform: none; }
  .passo__numero { grid-row: auto; margin-bottom: 1.25rem; }
  .passo__titulo { padding-top: 0; }
}

/* ---------- Lojas ---------------------------------------------------------- */
.lojas { padding-top: 0; }
.lojas__lista { display: grid; gap: 2.5rem; }
.loja { display: flex; flex-direction: column; gap: .75rem; }
.loja__foto { margin-bottom: .5rem; border-radius: var(--raio); }
.loja__nome { font-size: 1.375rem; letter-spacing: -0.02em; }
.loja__nome span {
  display: block;
  margin-top: .25rem;
  font-family: var(--texto);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: 0;
  color: var(--tinta-suave);
}
.loja__endereco { color: var(--tinta-suave); line-height: 1.55; }
.loja .botao { align-self: flex-start; margin-top: auto; }
@media (min-width: 720px) {
  .lojas__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .loja .botao { margin-top: .5rem; }
}

/* ---------- Perguntas frequentes ----------------------------------------- */
.faq { background: var(--superficie); }
.faq__lista { display: grid; gap: .5rem; }
.pergunta {
  border-radius: var(--raio);
  background: var(--papel);
  box-shadow: var(--sombra);
}
.pergunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
  padding: 1rem 1.25rem;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary .icone { transition: transform .25s var(--saida); }
.pergunta[open] summary .icone { transform: rotate(180deg); }
.pergunta p { padding: 0 1.25rem 1.25rem; color: var(--tinta-suave); max-width: 60ch; }
@media (min-width: 960px) {
  .faq__grade { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; }
}

/* ---------- CTA final ------------------------------------------------------ */
.final {
  background: var(--tinta);
  color: var(--papel);
  padding-block: var(--respiro);
}
.final__interno { display: grid; justify-items: start; gap: 1.25rem; }
.final__titulo { font-size: clamp(2.375rem, 10vw, 4.5rem); letter-spacing: -0.04em; }
.final__titulo .quebra { color: var(--marca); }
.final__apoio { font-size: 1.125rem; line-height: 1.6; color: var(--tinta-clara); }
.final .botao { width: 100%; margin-top: .75rem; }
@media (min-width: 640px) { .final .botao { width: auto; } }
@media (min-width: 960px) {
  .final__interno { justify-items: center; text-align: center; }
}

/* ---------- Rodapé --------------------------------------------------------- */
.rodape {
  background: var(--tinta);
  color: var(--tinta-clara);
  border-top: 1px solid rgb(255 255 255 / .12);
  padding-block: 2rem calc(2.5rem + var(--altura-fixo));
  font-size: .875rem;
}
.rodape__interno { display: grid; gap: .75rem; }
.rodape__logo { width: auto; height: 28px; margin-bottom: .25rem; }
.rodape a { text-underline-offset: 3px; }
.rodape a:hover { color: var(--papel); }

/* ---------- CTA fixo do celular ------------------------------------------ */
.fixo {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-fixo);
  padding: .625rem max(var(--margem), env(safe-area-inset-left)) calc(.625rem + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / .96);
  border-top: 1px solid var(--linha);
  transform: translateY(110%);
  transition: transform .35s var(--saida);
}
.fixo.visivel { transform: none; }
.fixo .botao { min-height: 3.25rem; }
@media (min-width: 960px) { .fixo { display: none; } }
/* Reserva o espaço do CTA fixo no fim da página: ele nunca cobre o rodapé. */
@media (max-width: 959.98px) {
  :root { --altura-fixo: calc(4.5rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}