/* Páginas de dado /d/<slug> (13/10): casca e componentes da home (nova.css). Aqui só o que é desta página:
   chip do rótulo, título menor (há perguntas longas como título), cartão do indicador e da ficha, conversa em largura de leitura. */
.dd-chip{margin:0;padding:.32em .75em .26em;border:2px solid var(--tinta);border-radius:999px;background:var(--amarelo);color:var(--tinta);font:900 14px/1 var(--tit);letter-spacing:.02em;text-transform:uppercase}
.pg-cabeca h1{font-size:clamp(24px,3.6vw,44px);line-height:1.08;max-width:min(880px,100%)}
.pg-cabeca .bloco-sub{max-width:52ch}

.bloco.dd-bloco:not(.seu-elo){gap:clamp(8px,min(1.6vw,2svh),20px);padding-top:clamp(4px,min(1vw,1svh),12px);padding-bottom:clamp(14px,min(3vw,3.2svh),40px)} /* svh: cabe em notebook de 600 px úteis */
.dd-bloco>*{min-width:0;width:min(720px,100%)}
.dd-cartao{width:min(720px,100%)}
.dd-cartao .comp-lado{gap:6px;padding:clamp(12px,3.4cqw,18px)}
.dd-cartao .comp-lado strong{font-size:clamp(22px,8.4cqw,40px)}
.dd-valor{font:600 15px/1.35 var(--texto)}
.dd-cartao .comp-fonte{align-items:center;overflow-wrap:anywhere}
@media (max-width:559.98px){.dd-cartao .comp-lados{grid-template-columns:minmax(0,1fr)}.dd-cartao .comp-lado+.comp-lado{border-left:0;border-top:2px solid var(--tinta)}.dd-cartao .comp-lado strong{font-size:clamp(26px,9vw,34px)}}
.dd-confira{margin:0;padding:6px 8px;border-radius:var(--raio-p);background:#fff3c4;font:700 13px/1.3 var(--texto)}
.dd-nota{margin:0;text-align:center;font:500 14px/1.4 var(--texto);color:var(--tinta-2)}

/* Ficha do Flávio: cartão no mesmo estilo (borda de tinta, sombra dura) */
.dd-ficha{gap:12px;padding:clamp(16px,3vw,24px)}
.dd-ficha p{margin:0}
.dd-fato{font:700 clamp(17px,2vw,20px)/1.4 var(--texto)}
.dd-detalhe{font:500 16px/1.5 var(--texto);color:var(--tinta-2)}
.dd-situacao{padding:10px 12px;border-left:5px solid var(--vermelho);background:var(--cinza);font:500 15px/1.45 var(--texto)}
.dd-ficha .comp-fonte{align-items:center;margin-top:0}

/* Objeção: a conversa ocupa a largura de leitura, com as fontes e o link de volta ao comparativo */
.dd-conversa{gap:12px;padding:clamp(16px,3vw,24px)}
.dd-conversa .balao-ele{font-size:clamp(17px,2vw,20px)}
.dd-conversa .balao-voce{max-width:100%;font-size:clamp(16px,1.8vw,18px);line-height:1.5}
.dd-conversa .conversa-fonte{overflow-wrap:anywhere}
.dd-conversa .dd-nota{align-self:flex-start;padding:6px 10px;border-radius:var(--raio-p);background:rgba(255,255,255,.85);text-align:left}
.dd-conversa .link{padding:0 10px;border-radius:var(--raio-p);background:rgba(255,255,255,.85)}
.dd-conversa .link{align-self:flex-start}

.dd-acoes{justify-content:center;width:min(720px,100%)}
.dd-acoes .fx-status{text-align:center}
@media (max-width:479.98px){.dd-acoes>.btn-zap,.dd-acoes>.btn-linha{flex:1 1 100%}}

/* Janela larga e baixa (iPad e notebook deitados, 13/10): ações e links vão para uma coluna ao lado do cartão, em vez de
   empilhar embaixo, e o bloco cabe na altura útil sem cortar texto. Abaixo disso (ou em pé), uma coluna só (dd-lado some do layout). */
.dd-lado{display:contents}
@media (min-width:900px) and (min-aspect-ratio:5/4){
  .bloco.dd-bloco:not(.seu-elo){grid-template-columns:minmax(0,1fr) minmax(250px,320px);align-items:center;justify-items:stretch;column-gap:clamp(20px,3vw,44px)}
  .dd-bloco>*{width:auto}
  .dd-bloco>:is(.dd-cartao,.dd-conversa){grid-column:1;grid-row:1}
  .dd-bloco>.dd-nota{grid-column:1;grid-row:2}
  .dd-bloco>.dd-lado{display:flex;flex-direction:column;align-items:stretch;gap:clamp(8px,2svh,16px);grid-column:2;grid-row:1 / span 2}
  .dd-lado>*{width:auto}
  .dd-lado .dd-acoes{flex-direction:column;align-items:stretch}
  .dd-lado .dd-acoes>*{flex:none;width:100%;text-align:center}
  .dd-lado .pg-acoes{width:100%;margin-top:0}
  .dd-lado .pg-acoes .btn-vermelho{min-height:clamp(44px,7.6svh,58px);font-size:clamp(17px,1.6vw,21px)} /* a coluna é estreita: o texto sem quebra não pode passar dela */
}

/* Janela de meia tela (700 a 899px de largura, deitada ou quase quadrada): uma coluna só, mas ações e links em fileira, não empilhados. */
@media (min-width:700px) and (min-aspect-ratio:1/1) and (max-width:899.98px){
  .dd-bloco>.dd-lado{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(2px,calc(var(--u) * .008),10px) 18px;width:min(720px,100%)}
  .dd-lado>*{width:auto}
  .dd-lado .pg-acoes{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 14px;margin-top:0}
  .dd-lado .pg-acoes .btn-vermelho{width:auto;min-width:210px;min-height:clamp(44px,calc(var(--u) * .075),58px);font-size:clamp(17px,2.4vw,21px)}
}

/* Densidade pela altura útil (--u: janela menos o topo fixo), contínua e sem passar do tamanho original: ficha, conversa e cartão
   encolhem respiro e corpo de texto quando a janela é baixa. Só de 700px em diante; o celular fica como está. */
@media (min-width:700px){
  .dd-bloco{--u:calc(100svh - var(--topo))}
  .dd-ficha{gap:clamp(6px,calc(var(--u) * .018),12px);padding:min(clamp(16px,3vw,24px),clamp(10px,calc(var(--u) * .03),24px)) min(clamp(16px,3vw,24px),clamp(14px,calc(var(--u) * .035),24px))}
  .dd-fato{font-size:min(clamp(17px,2vw,20px),clamp(15px,calc(var(--u) * .034),20px))}
  .dd-detalhe{font-size:min(16px,clamp(14px,calc(var(--u) * .028),16px));line-height:1.4}
  .dd-situacao{padding:clamp(6px,calc(var(--u) * .014),10px) 12px;font-size:min(15px,clamp(13.5px,calc(var(--u) * .026),15px));line-height:1.4}
  .dd-conversa{gap:clamp(6px,calc(var(--u) * .018),12px);padding:min(clamp(16px,3vw,24px),clamp(10px,calc(var(--u) * .03),24px)) min(clamp(16px,3vw,24px),clamp(14px,calc(var(--u) * .035),24px))}
  .dd-conversa .balao-ele{font-size:min(clamp(17px,2vw,20px),clamp(15px,calc(var(--u) * .034),20px))}
  .dd-conversa .balao-voce{font-size:min(clamp(16px,1.8vw,18px),clamp(14px,calc(var(--u) * .03),18px));line-height:1.4}
  .dd-cartao .comp-lado{gap:clamp(2px,calc(var(--u) * .008),6px);padding:min(clamp(12px,3.4cqw,18px),clamp(8px,calc(var(--u) * .024),18px))}
  .dd-cartao .comp-lado strong{font-size:min(clamp(22px,8.4cqw,40px),clamp(20px,calc(var(--u) * .062),40px))}
  .dd-cartao .comp-quem img{width:clamp(28px,calc(var(--u) * .06),40px);height:auto}
  .dd-valor{font-size:min(15px,clamp(13.5px,calc(var(--u) * .027),15px))}
}