/* =============================================================================
   LOBATO MACHADO — avaliação e perícia
   Complementa style.css. Mesmo padrão de anuncie-seu-imovel.css (topo escuro
   + coluna de conteúdo + cartão de formulário sticky), com prefixo próprio.

   01. Topo
   02. Layout
   03. Motivos
   04. Passos
   05. Cartão do formulário
   06. FAQ
   07. Canais por setor
   08. Responsivo
   ========================================================================== */

/* ─────────────────────────────────────────────────────────── 01. TOPO */
.pagina-avaliacao { background: var(--surface); }
.avaliacao { padding-top: var(--header-h); }

.avaliacao__topo {
  background: var(--bordo);
  color: var(--ink);
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem);
}
.avaliacao__topo .migalhas { color: var(--ink-50); margin-bottom: 1.25rem; }
.avaliacao__topo .migalhas a { color: var(--vinho-detalhe); }

.avaliacao__titulo {
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.4rem);
  max-width: 26ch; text-wrap: balance;
}
.avaliacao__lede {
  margin-top: .85rem; max-width: 58ch;
  color: var(--ink-70); line-height: 1.65;
}

/* ────────────────────────────────────────────────────────── 02. LAYOUT */
.avaliacao__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: start;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
.avaliacao__conteudo { min-width: 0; }

/* O formulário sobe um pouco sobre a faixa bordô: é a ação principal da página */
.avaliacao__lateral { position: sticky; top: calc(var(--header-h) + 1rem); margin-top: -5.5rem; }

/* ───────────────────────────────────────────────────────── 03. MOTIVOS */
.bloco-motivos { margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.bloco-motivos .section__title { margin-bottom: 1.75rem; }

.motivos { display: grid; gap: 1.5rem; }
.motivo { display: flex; gap: 1.1rem; align-items: flex-start; }
.motivo__icone {
  flex: none; width: 46px; height: 46px; border-radius: var(--r);
  display: grid; place-items: center; font-size: 1.35rem;
  background: var(--bordo-100); color: var(--ink);
}
.motivo__titulo { font-size: 1.08rem; margin-bottom: .35rem; }
.motivo p { color: var(--ink-70); line-height: 1.7; max-width: 62ch; }

/* ───────────────────────────────────────────────────────── 04. PASSOS */
.passos {
  border: 1px solid var(--line); border-left: 4px solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--surface-alt);
  padding: clamp(1.35rem, 1rem + 1vw, 2rem);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.passos__titulo { font-size: var(--fs-h3); margin-bottom: 1.15rem; }
.passos__lista { display: grid; gap: .9rem; counter-reset: passo; list-style: none; }
.passos__lista li {
  position: relative; padding-left: 2.6rem;
  color: var(--ink-70); line-height: 1.65;
  counter-increment: passo;
}
.passos__lista li::before {
  content: counter(passo);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bordo); color: var(--ink);
  font-size: .82rem; font-weight: 800;
}
.passos__lista strong { color: var(--ink); font-weight: 800; }

/* ────────────────────────────────────── 05. CARTÃO DO FORMULÁRIO */
.cartao-form {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.cartao-form__topo { padding: 1.35rem 1.5rem 1rem; border-bottom: 1px solid var(--line-soft); }
.cartao-form__titulo { font-size: 1.25rem; }
.cartao-form__sub { margin-top: .35rem; font-size: .88rem; color: var(--ink-50); }

.form-avaliacao { display: grid; gap: .5rem; padding: 1.25rem 1.5rem 1.5rem; }
.form-avaliacao .field { gap: 0; }
.form-avaliacao .field__input { padding: .75rem .95rem; font-size: .95rem; }
.form-avaliacao textarea.field__input { resize: vertical; min-height: 90px; line-height: 1.5; }
.form-avaliacao .field__error { min-height: 0; margin-top: .2rem; font-size: .78rem; }
.form-avaliacao .field__error:empty { display: none; }
.form-avaliacao .btn { margin-top: .3rem; }
.form-avaliacao .form-status:empty { display: none; }

.form-avaliacao__linha { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

.cartao-form__ou {
  text-align: center; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-30);
  margin-block: .35rem;
}

/* ──────────────────────────────────────────────────────────── 06. FAQ */
.faq { display: grid; gap: .75rem; }
.faq__item {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--bordo-100); box-shadow: var(--sh-1); }
.faq__pergunta {
  list-style: none; cursor: pointer;
  padding: 1.05rem 1.25rem; padding-right: 3rem;
  font-weight: 700; color: var(--ink); position: relative;
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta::after {
  content: '+';
  position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bordo-100); color: var(--ink);
  font-size: 1.1rem; font-weight: 800; line-height: 1;
  transition: transform .2s var(--ease);
}
.faq__item[open] .faq__pergunta::after { content: '−'; }
.faq__resposta { padding: 0 1.25rem 1.15rem; color: var(--ink-70); line-height: 1.7; }

/* ──────────────────────────────────────── 07. CANAIS POR SETOR */
.grade-canais {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--gap);
}
.canal {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.canal:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: transparent; }
.canal__icone {
  width: 44px; height: 44px; border-radius: var(--r);
  display: grid; place-items: center; font-size: 1.3rem;
  background: var(--bordo-100); color: var(--ink);
  margin-bottom: .35rem;
}
.canal__icone--wpp { background: rgba(31, 175, 84, .12); color: var(--wpp); }
.canal__titulo { font-size: 1.02rem; }
.canal__desc { font-size: .9rem; color: var(--ink-50); flex: 1; }
.canal__link {
  font-weight: 800; color: var(--ink); font-size: 1.02rem;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  word-break: break-word;
}
.canal__link:hover { color: var(--bordo-700); }
/* Endereço de e-mail é longo: fonte menor + nowrap evita quebrar em duas linhas */
.canal__link--email { font-size: .78rem; letter-spacing: -.01em; white-space: nowrap; }

/* ─────────────────────────────────────────────── 08. RESPONSIVO */
@media (max-width: 1024px) {
  .avaliacao__layout { grid-template-columns: 1fr; }
  /* Sem duas colunas, sobrepor não faz sentido: o formulário volta ao fluxo */
  .avaliacao__lateral { position: static; margin-top: 0; max-width: 560px; order: -1; }
}

@media (max-width: 700px) {
  .motivo { gap: .85rem; }
  .motivo__icone { width: 40px; height: 40px; font-size: 1.2rem; }
  .canal { padding: 1.25rem; }
  .cartao-form__topo, .form-avaliacao { padding-inline: 1.15rem; }
  .form-avaliacao__linha { grid-template-columns: 1fr; }
}