/* secoes/depoimento.css: página do formulário de depoimento (depoimento.php).
   Cubotimize, layout novo (direção "Cubo"). Mobile first; pontos de quebra: 640, 960, 1200 px.
   Regras em kb/02-metodo-novo-layout.md: cores, fontes, espaços e tempos só via var(--…) de tokens.css. */

:root {
  /* largura do cubo de cada passo ("Você escreve", "A gente lê", "Vai para o site") */
  --depoimento-cubo: 48px;
  /* seta do select desenhada em SVG, na cor --tinta */
  --depoimento-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312131A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- página ---------- */
.depoimento {
  position: relative; overflow: clip;   /* clip, e não hidden: hidden quebraria o sticky do texto */
  padding-block: var(--e-7) var(--e-8);
  background: var(--creme);
}
/* grade isométrica do banner da home, mais apagada à esquerda */
.depoimento::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grade-iso);
  -webkit-mask-image: linear-gradient(to right, transparent, var(--tinta) 60%);
  mask-image: linear-gradient(to right, transparent, var(--tinta) 60%);
  pointer-events: none;
}
.depoimento__grade { position: relative; display: grid; gap: var(--e-7); }

/* ---------- topo: rótulo, título e passos ---------- */
.depoimento__titulo {
  font-size: var(--fs-h2); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em;
  max-width: 18ch; text-wrap: balance;
}
.depoimento__lead { margin-top: var(--e-4); font-size: var(--fs-grande); color: var(--tinta-2); max-width: 34rem; }

.depoimento__passos { display: grid; gap: var(--e-4); margin-top: var(--e-6); max-width: 34rem; }
.depoimento__passo {
  display: grid; grid-template-columns: var(--depoimento-cubo) minmax(0, 1fr); gap: var(--e-4); align-items: start;
  font-size: var(--fs-pequena); color: var(--tinta-2); line-height: 1.5;
}
.depoimento__passo .cubo--passo { width: var(--depoimento-cubo); height: auto; }
.depoimento__passo-titulo { display: block; font-size: var(--fs-base); font-weight: 900; color: var(--tinta); }

/* ---------- formulário em cartão (mesmo estilo do contato da home) ---------- */
.depoimento__form {
  display: grid; gap: var(--e-4);
  padding: var(--e-5); background: var(--branco); color: var(--tinta);
  border: var(--traco) solid var(--tinta); border-radius: var(--r-g);
  box-shadow: var(--sombra-g);
}
.depoimento__form-titulo { font-size: var(--fs-h3); font-weight: 900; line-height: 1.2; }
.depoimento__dupla { display: grid; gap: var(--e-4); }
.depoimento__ajuda { font-size: var(--fs-mini); color: var(--tinta-2); line-height: 1.5; }

.depoimento__lista {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--e-7);
  background-image: var(--depoimento-seta);
  background-repeat: no-repeat; background-position: right var(--e-4) center; background-size: 18px;
  cursor: pointer;
}

/* redes sociais: bloco opcional, separado por linha tracejada */
.depoimento__redes {
  display: grid; gap: var(--e-3);
  margin: 0; padding: var(--e-4) 0 0; min-width: 0;
  border: 0; border-top: var(--traco) dashed var(--tinta-linha);
}
.depoimento__redes-titulo {
  float: left; width: 100%;   /* flutuando, a legenda sai de cima da linha e vira item da grade */
  padding: 0; font-weight: 900; font-size: var(--fs-base);
}
.depoimento__redes-grade { display: grid; gap: var(--e-3); margin-top: var(--e-1); }
.depoimento__rede-rotulo { display: inline-flex; align-items: center; gap: var(--e-2); }
.depoimento__rede-rotulo .icone { width: 18px; height: 18px; color: var(--azul); }
.depoimento__redes .campo__entrada::placeholder { color: var(--tinta-2); opacity: 0.7; }

.depoimento__aviso {
  padding-top: var(--e-4); border-top: var(--traco) dashed var(--tinta-linha);
  font-size: var(--fs-mini); color: var(--tinta-2); line-height: 1.5;
}
.depoimento__enviar { width: 100%; }

@media (min-width: 640px) {
  .depoimento { padding-block: var(--e-8) var(--e-9); }
  .depoimento__form { padding: var(--e-6); }
  .depoimento__dupla,
  .depoimento__redes-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .depoimento__redes-grade { gap: var(--e-3) var(--e-4); }
  .depoimento__enviar { width: auto; justify-self: start; }
}
@media (min-width: 960px) {
  .depoimento__grade {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--e-8); align-items: start;
  }
  /* o texto acompanha a rolagem enquanto o formulário, mais alto, passa */
  .depoimento__info { position: sticky; top: calc(var(--altura-cabecalho) + var(--e-6)); }
  .depoimento__form { padding: var(--e-7) var(--e-6); }
}