/* ══════════════════════════════════════════════════════════════
   NICHO — o que muda em cima do style.css do template.

   Três coisas moram aqui:
   1) o acento por nicho (o --lapis do template vira a cor do nicho);
   2) os gestos das heros, que substituem a fileira de produtos:
      o FEED VAZIO (psicólogo) e a CONVERSA NÃO RESPONDIDA (corretor);
   3) os blocos que substituem os prints — mockups desenhados em CSS
      e a faixa do "o que tem dentro".

   Nenhum deles usa imagem: estes dois produtos nasceram hoje e não
   têm foto de estúdio nem print de cliente. Desenhar é mais honesto
   que reciclar foto de banco de imagem.
   ══════════════════════════════════════════════════════════════ */

/* Cada nicho redefine o acento do template. Três papéis distintos:
     --lapis      preenchimento de botão sobre painel branco
     --navy       acento sobre fundo preto (números, tags, ✓)
     --acento-txt texto pequeno sobre fundo claro do acento
   Nos azuis os dois últimos podiam ser o mesmo valor. No âmbar não:
   laranja legível como chapa é ilegível como texto, e vice-versa. */

[data-nicho="psicologo"]{
  /* azul-real saturado. O anterior era verde; o azul do marketplace
     (#26619C) é mais acinzentado — este puxa mais peso e brilho. */
  --lapis:#1D4ED8; --lapis-deep:#1839A8;
  --acento-txt:#1839A8;
  --navy:#4F86F7; --navy-deep:#1D4ED8;
  --accent-soft:#E7EDFD;
}
[data-nicho="corretor"]{
  /* âmbar. Sai do azul de vez — era o que aproximava demais do
     marketplace. Sobre o preto do template ele acende. */
  --lapis:#F5A31A; --lapis-deep:#DB8E0A;
  --acento-txt:#8A5606;
  --navy:#F7B32B; --navy-deep:#DB8E0A;
  --accent-soft:#FDF0D9;
}

/* ── AJUSTES QUE O ÂMBAR EXIGE ─────────────────────────────────
   O template assume acento escuro e escreve branco em cima dele.
   Âmbar é claro: texto branco sobre ele fica ilegível. Estas quatro
   regras trocam para tinta escura só no nicho do corretor. */
[data-nicho="corretor"] .btn-buy,
[data-nicho="corretor"] .btn-buy:hover{ color:#141414 }
[data-nicho="corretor"] ::selection{ background:var(--navy); color:#141414 }
[data-nicho="corretor"] :focus-visible{ outline-color:var(--acento-txt) }
[data-nicho="corretor"] .btn-buy:hover{
  box-shadow:0 14px 40px -14px rgba(245,163,26,.85);
}

/* texto pequeno sobre a chapa clara do acento usa o tom escuro,
   nunca o tom de preenchimento */
.of-tag, .presente, .mk.bom .mk-tag{ color:var(--acento-txt) }
.of-lista li::before, .selo-i{ color:var(--acento-txt) }

/* ══════════════════════════════════════════════════════════════
   HERO · PSICÓLOGO — A BUSCA DA PACIENTE

   Primeira versão foi a grade do perfil com seis quadrados vazios.
   Errada de enquadramento: mostrava a vergonha do psicólogo (o feed
   parado) num campo de cinza morto, e o gesto ficava tímido.

   Esta mostra a MESMA dor pelo outro lado — a tela de quem procura.
   É o par conceitual da hero do corretor: as duas mostram o aparelho
   do cliente no instante exato em que ele foi perdido. Lá é a
   conversa sem resposta; aqui é a busca em que você não aparece.

   Os perfis concorrentes são barras cinzas, não @ inventados: não se
   nomeia ninguém, e a abstração deixa claro que o problema não é um
   concorrente específico — é você não estar na lista.
   ══════════════════════════════════════════════════════════════ */
.busca{
  position:relative; z-index:2; text-align:left;
  width:min(100%,clamp(16rem,38vh,22rem)); margin-inline:auto;
  margin-top:clamp(.5rem,2vw,1.2rem);
}
.busca-campo{
  display:flex; align-items:center; gap:.55rem;
  background:#F1F1F1; border-radius:999px;
  padding:.72rem 1.05rem;
  animation:rise .8s var(--ease) .10s both;
}
.busca-campo svg{ width:15px; height:15px; flex:none; stroke:#8A8A8A; fill:none; stroke-width:2.2 }
.busca-txt{
  font-size:clamp(.82rem,2vw,.98rem); font-weight:600; color:#111;
  letter-spacing:-.01em; white-space:nowrap;
}
.cursor{
  display:inline-block; width:2px; height:1em; margin-left:1px;
  background:#111; vertical-align:-.14em;
}
@media (prefers-reduced-motion:no-preference){
  .cursor{ animation:pisca 1.1s step-end infinite }
}
@keyframes pisca{0%,49%{opacity:1} 50%,100%{opacity:0}}

.res{ margin-top:.7rem; display:flex; flex-direction:column; gap:.15rem }
.res-item{
  display:flex; align-items:center; gap:.7rem; padding:.5rem .35rem;
  animation:rise .8s var(--ease) both;
}
.res-item:nth-child(1){animation-delay:.22s}
.res-item:nth-child(2){animation-delay:.30s}
.res-item:nth-child(3){animation-delay:.38s}
.res-av{ width:32px; height:32px; border-radius:50%; background:#E2E2E2; flex:none }
.res-l{ display:flex; flex-direction:column; gap:.32rem; flex:1 }
.res-bar{ height:7px; border-radius:4px; background:#E6E6E6 }
.res-bar.b2{ background:#EFEFEF }

/* a linha que não existe: é o lugar vazio na lista */
.res-vazio{
  margin-top:.5rem; padding:.85rem .8rem; text-align:center;
  border:1.5px dashed #D2D2D2; border-radius:10px;
  font-size:.76rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:#A8A8A8;
  animation:rise .8s var(--ease) .48s both;
}

/* ══════════════════════════════════════════════════════════════
   HERO · CORRETOR — A CONVERSA NÃO RESPONDIDA
   A mensagem chegou às 22h e continua com o balão sozinho. O balão
   de resposta é o vazio tracejado, com os três pontos parados: é a
   resposta que não veio. O "não lida" pulsa devagar.
   ══════════════════════════════════════════════════════════════ */
.chat{
  position:relative; z-index:2;
  width:min(100%,26rem); margin-inline:auto;
  margin-top:clamp(.6rem,2vw,1.4rem);
  display:flex; flex-direction:column; gap:.55rem;
  text-align:left;
}
.bal{
  max-width:86%; padding:.7rem .9rem; border-radius:12px;
  font-size:clamp(.78rem,1.9vw,.95rem); line-height:1.42; font-weight:500;
  animation:rise .8s var(--ease) both;
}
.bal.deles{
  align-self:flex-start; background:#F0F0F0; color:#111;
  border-bottom-left-radius:3px;
}
.bal .hora{
  display:block; margin-top:.3rem;
  font-size:.66em; font-weight:700; letter-spacing:.06em; color:#8A8A8A;
}
.bal:nth-of-type(1){animation-delay:.12s}
.bal:nth-of-type(2){animation-delay:.24s}
/* o balão que não existe */
.bal.vazio{
  align-self:flex-end; background:transparent; color:#B4B4B4;
  border:1.5px dashed #D2D2D2; border-bottom-right-radius:3px;
  display:flex; align-items:center; gap:.32rem; padding:.85rem 1rem;
  animation-delay:.40s;
}
.pt{ width:6px; height:6px; border-radius:50%; background:#C8C8C8; }
@media (prefers-reduced-motion:no-preference){
  .pt{ animation:pulsa 1.6s ease-in-out infinite; }
  .pt:nth-child(2){animation-delay:.22s}
  .pt:nth-child(3){animation-delay:.44s}
}
@keyframes pulsa{0%,60%,100%{opacity:.35} 30%{opacity:1}}

.naolida{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:.15rem; font-size:.7rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:#C2261C;
  animation:rise .8s var(--ease) .52s both;
}
.bolinha{ width:8px; height:8px; border-radius:50%; background:#C2261C; }
@media (prefers-reduced-motion:no-preference){
  .bolinha{ animation:respira 2.4s ease-in-out infinite; }
}
@keyframes respira{0%,100%{opacity:1} 50%{opacity:.3}}

/* ══════════════════════════════════════════════════════════════
   NOTE · OS DOIS MOCKUPS
   Substituem os dois prints de anúncio do template. Mesma ideia —
   o que perde à esquerda, o que ganha à direita — mas desenhados.
   ══════════════════════════════════════════════════════════════ */
.mock-pair{
  display:grid; gap:clamp(1rem,2.6vw,1.8rem);
  grid-template-columns:1fr; margin:0;
}
@media (min-width:760px){ .mock-pair{grid-template-columns:1fr 1fr} }

.mk{ position:relative; display:flex; flex-direction:column; }
.mk-tag{
  align-self:flex-start; margin-bottom:.6rem;
  font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:.32rem .6rem; border-radius:2px;
}
.mk.ruim .mk-tag{ background:#F3DCDA; color:#93211A; }
.mk.bom  .mk-tag{ background:var(--accent-soft); color:var(--lapis-deep); }

.mk-corpo{
  border:1px solid #E4E4E4; border-radius:12px; background:#fff;
  padding:clamp(.9rem,2.2vw,1.2rem);
  font-size:clamp(.82rem,1.9vw,.95rem); line-height:1.5; color:#1A1A1A;
  flex:1;
}
.mk.bom .mk-corpo{ border-color:var(--lapis); box-shadow:0 0 0 1px var(--lapis); }
.mk-corpo p{ margin:0 0 .6rem }
.mk-corpo p:last-child{ margin-bottom:0 }
.mk-meta{
  display:flex; align-items:center; gap:.5rem;
  padding-bottom:.7rem; margin-bottom:.7rem; border-bottom:1px solid #EDEDED;
  font-size:.78rem; font-weight:700; color:#6B6B6B;
}
.mk-av{ width:24px; height:24px; border-radius:50%; background:#E0E0E0; flex:none }
.mk.bom .mk-av{ background:var(--lapis) }
.mk-why{
  margin-top:.7rem; font-size:.82rem; line-height:1.45; color:#6B6B6B;
}
.mk-why b{ color:#111 }

/* ══════════════════════════════════════════════════════════════
   FAIXA · O QUE TEM DENTRO
   Ocupa o lugar dos prints de depoimento. Produto lançado hoje não
   tem cliente ainda — então a faixa mostra o conteúdo, não elogio
   inventado. Reaproveita a mecânica de rolagem de .fb-strip.
   ══════════════════════════════════════════════════════════════ */
.fb-shot.dentro{
  display:flex; flex-direction:column; justify-content:flex-start; gap:.15rem;
  padding:clamp(1.1rem,2.6vw,1.4rem);
  background:var(--g-90); box-shadow:0 0 0 1px rgba(255,255,255,.1);
  text-align:left;
  /* estes cartões são texto, não print: a proporção 5/4 do template
     existia para emoldurar imagem e aqui só cortaria a última linha */
  aspect-ratio:auto;
}

/* No desktop a faixa vira grade de 3 colunas. O template dividia a
   linha entre 4 cartões para o convite estar sempre visível sem
   arrastar; são 6 aqui, e dividir 6 numa linha só os esmagaria a
   ~180px. Em duas fileiras de 3 a intenção original é preservada —
   nada exige arrastar — e cada cartão volta a ter largura de leitura.
   No celular continua sendo a faixa que rola, como no template. */
@media (min-width:821px){
  .fb-strip.grade{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:clamp(.7rem,1.6vw,1.1rem);
    overflow:visible; scroll-snap-type:none;
  }
  .fb-strip.grade .fb-shot{ flex:initial; max-width:none; min-height:11rem; }
}
@media (max-width:820px){
  .fb-shot.dentro{ min-height:13rem; }
}
.dentro-n{
  font-size:clamp(2.2rem,5.5vw,3.2rem); font-weight:900;
  letter-spacing:-.04em; line-height:.9; color:var(--navy);
}
.dentro-t{
  font-size:clamp(1rem,2.2vw,1.2rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.2; margin-top:.5rem;
}
.dentro-d{
  font-size:clamp(.8rem,1.8vw,.9rem); line-height:1.45;
  color:var(--g-30); margin-top:.5rem;
}

/* ══════════════════════════════════════════════════════════════
   GARANTIA — uma linha abaixo do preço. O template não tinha; estes
   dois produtos são compra por impulso e a linha remove o último
   atrito sem acrescentar uma seção inteira.
   ══════════════════════════════════════════════════════════════ */
.cta-garantia{
  margin-top:.9rem; font-size:.85rem; font-weight:600; color:#5A5A5A;
}

/* ══════════════════════════════════════════════════════════════
   AJUSTE DA DOBRA
   O padding original do .panel-inner existia porque a capa do livro
   subia por cima do painel e precisava de espaço para romper a borda.
   Aqui nada rompe nada — o gesto é uma grade/conversa que fica no
   fluxo. Sem esse corte, manchete e gesto não cabem na mesma dobra.

   A altura do gesto é presa em vh, não em rem: é a altura da tela que
   decide se ele cabe, não o tamanho da fonte do usuário.
   ══════════════════════════════════════════════════════════════ */
.panel-inner{
  padding-block:clamp(1rem,2.6vw,1.8rem) clamp(.8rem,2vw,1.4rem);
  gap:clamp(1rem,2.6vw,1.7rem);
}
.busca{ width:min(100%,clamp(15rem,34vh,20rem)); }
.chat{ width:min(100%,clamp(16rem,52vh,24rem)); }

/* telas baixas e largas (notebook em 1366x768): o gesto encolhe antes
   da manchete, porque a manchete é a mensagem e ele é o apoio */
@media (max-height:820px){
  .busca{ width:min(100%,32vh); }
  .chat{ width:min(100%,46vh); }
  .panel-sub{ font-size:clamp(1.25rem,2.9vw,1.9rem) }
}

/* ══════════════════════════════════════════════════════════════
   O PRESENTE
   A data é a oferta. O kit não é barato por ser raso — é barato
   porque hoje é o dia da categoria. O preço simbólico precisa de
   uma razão dita em voz alta, senão preço baixo lê como pouco
   valor. A razão verdadeira (filtrar quem usa de quem só clica)
   é a que está escrita.
   ══════════════════════════════════════════════════════════════ */
.presente{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--accent-soft); color:var(--lapis-deep);
  border-radius:999px; padding:.5rem .95rem;
  font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.presente-l{
  max-width:46ch; margin:1rem auto 0;
  font-size:clamp(.95rem,1.9vw,1.05rem); line-height:1.55; color:#4A4A4A;
}
.presente-l b{ color:#000; font-weight:700 }

/* ══════════════════════════════════════════════════════════════
   AVAL PROFISSIONAL
   Faixa creme entre dois brancos: precisa se separar do painel do
   caderno sem virar mais um bloco preto (já são dois).

   ATENÇÃO — esta seção nasce com hidden no HTML. Ela só deve ir ao
   ar preenchida com nome e registro REAIS de quem leu o material e
   autorizou. Depoimento inventado aqui é verificável em 30 segundos
   no site do Conselho, e derruba a credibilidade do produto inteiro.
   ══════════════════════════════════════════════════════════════ */
.aval{ background:var(--creme,#F6F4F0); color:#000; padding-block:clamp(3rem,7vw,4.5rem) }
.aval[hidden]{ display:none }
.aval-h{
  text-align:center; font-size:clamp(1.6rem,4.4vw,2.6rem);
  font-weight:900; letter-spacing:-.035em; line-height:1.05;
}
.aval-sub{ text-align:center; margin:.8rem auto 0; max-width:48ch; color:#5A5A5A; font-size:.98rem; line-height:1.5 }
.aval-grid{ display:grid; gap:1rem; margin-top:clamp(1.8rem,4vw,2.4rem); grid-template-columns:1fr }
@media (min-width:760px){ .aval-grid{ grid-template-columns:repeat(3,1fr) } }
.aval-card{ background:#fff; border:1px solid #E6E4E0; border-radius:12px; padding:1.2rem 1.3rem }
.aval-q{ font-size:.95rem; line-height:1.55; color:#1A1A1A }
.aval-p{ margin-top:1rem; padding-top:.9rem; border-top:1px solid #EFEDE9; display:flex; align-items:center; gap:.7rem }
.aval-av{ width:36px; height:36px; border-radius:50%; background:var(--lapis); flex:none }
.aval-n{ font-weight:700; font-size:.9rem; line-height:1.25 }
.aval-r{ font-size:.78rem; color:#7A7A7A; line-height:1.25 }

/* ══════════════════════════════════════════════════════════════
   SELO DE PROCEDÊNCIA
   Fica no pé do painel do caderno. Não é aval de terceiro: é uma
   afirmação sobre COMO o material foi feito — verificável abrindo
   o próprio PDF. É o que dá pra dizer com honestidade hoje, antes
   de existir o aval de colegas da seção acima.
   ══════════════════════════════════════════════════════════════ */
.selo{
  display:flex; align-items:flex-start; gap:.8rem;
  max-width:52ch; margin:clamp(2rem,5vw,3rem) auto 0;
  padding:1rem 1.2rem;
  border:1px solid #E4E4E4; border-left:3px solid var(--lapis);
  border-radius:0 10px 10px 0; background:#fff;
  text-align:left;
}
.selo-i{
  flex:none; width:22px; height:22px; margin-top:.1rem;
  color:var(--lapis);
}
.selo-i svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.selo-t{ font-size:.92rem; line-height:1.5; color:#4A4A4A }
.selo-t b{ color:#000; font-weight:700; display:block; margin-bottom:.2rem }