/* ==========================================================================
   /assets/portas.css - T151 (27/07/2026)
   PORTAS DE CONVERSAO DOS ARTIGOS. Dois componentes, um arquivo:

   .pv  "Prova Antes do Clique" - um trecho de conversa com a Mandra que se
        revela sozinho quando entra na tela. Vai no MEIO do artigo.
   .pd  "A Porta Dupla" - falar agora sem conta OU guardar 60 minutos.
        Vai no FIM do artigo.

   SEM JS: nenhum dos dois aparece e o .cta-artigo estatico continua no lugar,
   igual antes. O JS so esconde o CTA estatico DEPOIS de montar o substituto.

   ZERO CLS POR DESENHO: as linhas da conversa entram no DOM ja ocupando o
   espaco final; a animacao mexe so em opacity/transform, que nao reflui
   layout. Por isso nao existe min-height chutado aqui - o proprio conteudo
   reserva o espaco, o que e mais preciso que qualquer altura fixa.

   PALETA: reusa os tokens do blog.css. Os tokens que o blog.css nao define
   (--coral-tint, --teal-tint, --borda-ativa) vem com fallback literal - se
   um dia entrarem no blog.css, este arquivo passa a obedecer sozinho.
   ========================================================================== */

/* ---------- 1. Prova Antes do Clique ---------- */
.pv{background:var(--creme-card);border:1.5px solid var(--borda);border-radius:22px;padding:20px 18px 22px;margin:38px 0;box-shadow:var(--sombra)}
.pv-topo{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid var(--borda);margin-bottom:16px}
.pv-topo img{width:38px;height:38px;object-fit:cover;border-radius:50%;flex-shrink:0}
.pv-id{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pv-quem{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:15px;color:var(--teal)}
.pv-sub{font-size:11.5px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;color:var(--coral-escuro)}
.pv-replay{margin-left:auto;flex-shrink:0;background:none;border:1.5px solid var(--borda);border-radius:99px;padding:6px 13px;font-family:'Nunito',sans-serif;font-size:12px;font-weight:800;color:var(--coral-escuro);cursor:pointer;transition:border-color .2s,background .2s}
.pv-replay:hover{border-color:var(--coral);background:var(--coral-leve)}
.pv-replay:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

.pv-fio{display:flex;flex-direction:column;gap:13px}
.pv-linha{max-width:90%}
.pv-linha p{margin:0;font-size:15.5px;line-height:1.55;padding:11px 14px;border-radius:16px}
.pv-m{align-self:flex-start}
.pv-m p{background:var(--teal-tint,#F1ECDF);border-bottom-left-radius:5px;color:var(--teal);font-weight:700}
.pv-a{align-self:flex-end}
.pv-a p{background:var(--coral-tint,#FDECDD);border-bottom-right-radius:5px;color:rgba(14,79,79,.86)}
.pv-linha em{font-style:normal;font-weight:800;color:var(--coral-escuro);box-shadow:inset 0 -7px 0 var(--coral-leve)}
.pv-nota{display:block;margin:8px 2px 0;font-size:12.5px;line-height:1.5;font-weight:700;color:rgba(14,79,79,.72);border-left:2px solid var(--coral-leve);padding-left:9px}

/* estados de animacao: so existem quando o JS assume o bloco */
.pv-js .pv-linha,.pv-js .pv-nota{opacity:0}
.pv-js .pv-linha{transform:translateY(9px)}
.pv-js .pv-linha.on{opacity:1;transform:none;transition:opacity .42s ease,transform .42s ease}
.pv-js .pv-nota.on{opacity:1;transition:opacity .5s ease}

.pv .pv-fecho{font-size:15.5px;line-height:1.5;font-weight:800;color:var(--teal);text-align:center;margin:20px 0 14px}
.pv-cta{text-align:center}
.pv-cta .btn{font-size:15px;padding:12px 24px}

@media(max-width:480px){
  .pv-sub{font-size:10.5px;letter-spacing:.2px}
  .pv-replay{padding:6px 11px;font-size:11.5px}
}

/* ---------- 2. A Porta Dupla ---------- */
.pd{background:var(--creme-card);border:1.5px solid var(--borda);border-radius:24px;padding:26px 20px 22px;margin:40px 0 30px;box-shadow:var(--sombra)}
.pd .pd-tit{font-family:'Baloo 2','Nunito',sans-serif;font-size:clamp(20px,3.6vw,26px);line-height:1.2;text-align:center;color:var(--teal);margin:0 0 18px}
.pd-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:620px){.pd-grid{grid-template-columns:1fr 1fr}}
.pd-op{display:flex;flex-direction:column;background:var(--creme,#FFF6E8);border:1.5px solid var(--borda);border-radius:18px;padding:18px 16px}
.pd-op-promo{border-color:var(--borda-ativa,rgba(232,106,74,.55));background:var(--coral-leve)}
.pd-kicker{display:block;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:rgba(14,79,79,.68);margin-bottom:6px}
.pd-op-promo .pd-kicker{color:var(--coral-escuro)}
.pd .pd-nome{font-family:'Baloo 2','Nunito',sans-serif;font-size:18.5px;line-height:1.2;margin:0 0 6px;color:var(--teal)}
.pd .pd-desc{font-size:14.5px;line-height:1.5;color:rgba(14,79,79,.78);margin:0 0 16px}
.pd-btn{margin-top:auto;display:block;text-align:center;font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;font-size:15px;padding:12px 16px;border-radius:14px;text-decoration:none;transition:transform .2s,background .2s,border-color .2s,color .2s}
.pd-btn:hover{transform:translateY(-2px)}
.pd-btn:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.pd-pri{background:var(--coral);color:#FFF6E8;box-shadow:0 6px 20px rgba(232,106,74,.3)}
.pd-pri:hover{background:var(--coral-escuro)}
.pd-sec{background:transparent;color:var(--teal);border:1.5px solid var(--borda)}
.pd-sec:hover{border-color:var(--coral);color:var(--coral-escuro)}
.pd .pd-livre{font-size:14px;line-height:1.55;color:rgba(14,79,79,.78);text-align:center;margin:18px 0 0}
.pd .pd-min{font-size:12.5px;font-weight:800;color:rgba(14,79,79,.72);text-align:center;margin:7px 0 0}

/* ---------- 3. Acessibilidade ---------- */
@media(prefers-reduced-motion:reduce){
  .pv-js .pv-linha,.pv-js .pv-nota{opacity:1;transform:none;transition:none}
  .pv-replay{display:none}
  .pd-btn:hover,.pv-cta .btn:hover{transform:none}
}