/* Página /nao-deixe (14/10): o que Flávio diz e o que ele fez, lado a lado. Mesmo padrão da /ia-falsa e da /comparar:
   cartões de borda tinta e sombra dura, trilho lateral também no celular, cada seção na altura útil da tela (--u). */

.btn-claro{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:48px;padding:0 1.15em;border:2.5px solid var(--tinta);border-radius:999px;background:#fff;color:var(--tinta);font:800 1rem/1 var(--texto);font-stretch:86%;text-decoration:none;cursor:pointer}
.btn-claro.mini{min-height:44px;padding:0 .9em;font-size:.92rem}
.bloco[id]{scroll-margin-top:calc(var(--topo) + 8px)}

/* ---------- Trilho: um cartão por vez no celular, cartões largos no desktop ---------- */
.nd-lista{--mi:0px;--mf:0px;display:grid;grid-auto-flow:column;grid-auto-columns:min(88%,400px);gap:16px;width:calc(100% + 2 * var(--margem));margin:6px calc(-1 * var(--margem)) 0;padding:4px var(--margem) 14px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margem);overscroll-behavior-x:contain;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--mi),#000 calc(100% - var(--mf)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--mi),#000 calc(100% - var(--mf)),transparent)}
.nd-lista::-webkit-scrollbar{display:none}
.nd-lista:not([data-montado]){min-height:520px}

/* ---------- Cartão: tema, título com as datas, os dois lados e o compartilhar ---------- */
.nd-cartao{scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px;border:2.5px solid var(--tinta);border-radius:var(--raio);background:#fff;box-shadow:4px 5px 0 var(--tinta)}
.nd-cartao.nd-alvo{box-shadow:4px 5px 0 var(--vermelho);border-color:var(--vermelho)}
.nd-tema{align-self:flex-start;margin:0;padding:.3em .6em .25em;background:var(--azul);color:#fff;font:900 12px/1 var(--tit);text-transform:uppercase;letter-spacing:.02em;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.nd-cartao h3{margin:0;font:900 clamp(17px,1.6vw,21px)/1.15 var(--tit);letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:break-word;text-wrap:balance}

.nd-lados{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:10px}
.nd-lado{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:14px 14px 4px;border:2px solid var(--tinta);border-radius:var(--raio-p)}
.nd-disse{background:#fff7c2}
.nd-fez,.nd-antes{background:var(--cinza)}
.nd-rotulo{position:absolute;top:-12px;left:10px;padding:.3em .6em .25em;border:2px solid var(--tinta);font:900 13px/1 var(--tit);text-transform:uppercase;letter-spacing:.03em}
.nd-disse .nd-rotulo{background:var(--amarelo);color:var(--tinta)}
.nd-fez .nd-rotulo,.nd-antes .nd-rotulo{background:var(--vermelho);color:#fff}
.nd-links{display:flex;flex-wrap:wrap;gap:0 14px;margin:0}
.nd-extra{color:var(--tinta-2)}
.nd-ver{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:0;font:600 14px/1.3 var(--texto)}
.nd-lado blockquote{margin:4px 0 0}
.nd-lado blockquote p,.nd-ato{margin:4px 0 0;font:600 15.5px/1.42 var(--texto);overflow-wrap:break-word}
.nd-lado blockquote p{font-style:italic}
.nd-meta{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;font:700 13px/1.3 var(--texto);color:var(--tinta-2)}
.nd-meta time{padding:0 .35em;background:var(--tinta);color:#fff}
.nd-fonte{display:inline-flex;align-items:center;min-height:44px;color:var(--vermelho-t);font:800 14px/1.2 var(--texto);overflow-wrap:anywhere}
/* O "x" entre os dois lados: no celular fica entre um e outro, no desktop no meio da linha */
.nd-x{position:relative;z-index:1;justify-self:center;margin:-6px 0 4px;display:grid;place-items:center;width:34px;height:34px;border:2.5px solid var(--tinta);border-radius:999px;background:#fff;color:var(--tinta);font:900 17px/1 var(--tit);text-transform:uppercase;box-shadow:2px 3px 0 var(--tinta)}
.nd-contexto p{color:var(--tinta-2)}
.nd-acoes{margin-top:auto}
.nd-acoes .mini{flex:1 1 auto;padding:0 .8em}

/* ---------- Passos ---------- */
.nd-passos{grid-area:auto;align-self:auto;align-content:start;justify-self:center;grid-template-columns:minmax(0,1fr);width:min(720px,100%);gap:clamp(16px,2.4vw,26px)}
.nd-passos li{grid-template-columns:auto minmax(0,1fr);gap:14px;align-content:start}
.nd-passos b{width:48px;height:48px;font-size:26px}
.nd-passos h3{margin:2px 0 4px;font-size:clamp(17px,4.6vw,20px)}
.nd-passos p{font-size:16px;line-height:1.4}

/* ---------- Desktop e tablet: cartão largo, lados em duas colunas ---------- */
@media (min-width:700px){
  .nd-lista{grid-auto-columns:min(clamp(560px,64vw,900px),calc(100vw - 2 * var(--margem) - 48px));gap:20px}
  .carrossel:has(.anterior:not([hidden],:disabled)) .nd-lista{--mi:72px}
  .carrossel:has(.proxima:not([hidden],:disabled)) .nd-lista{--mf:96px}
  .nd-cartao{padding:18px 20px}
  .nd-lados{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
  .nd-x{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0}
  .nd-passos{width:min(1100px,100%);grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .nd-passos li{grid-template-columns:minmax(0,1fr);justify-items:start;gap:8px}
  .nd-lista:not([data-montado]){min-height:420px}
}

/* ---------- Densidade pela altura útil (cada seção cabe numa tela) ---------- */
@media (min-width:700px){
  main>.bloco[id]{--u:calc(100svh - var(--topo));gap:clamp(6px,calc(var(--u) * .011),14px);padding-block:min(clamp(44px,5vw,72px),clamp(14px,calc(var(--u) * .034),72px))}
  main>.bloco[id] .titulo-caixa{font-size:min(clamp(30px,5.4vw,72px),clamp(26px,calc(var(--u) * .06),72px))}
  main>.bloco[id] .bloco-sub{max-width:min(100ch,100%);font-size:min(clamp(16px,1.5vw,19px),clamp(15px,calc(var(--u) * .03),19px))}
  .nd-lista{margin-top:0;padding-bottom:10px}
  .nd-cartao{gap:clamp(6px,calc(var(--u) * .012),10px);padding:clamp(10px,calc(var(--u) * .02),18px) clamp(14px,calc(var(--u) * .026),20px)}
  .nd-cartao h3{font-size:min(clamp(17px,1.6vw,21px),clamp(15px,calc(var(--u) * .028),21px))}
  .nd-lado blockquote p,.nd-ato{font-size:min(15.5px,clamp(13.5px,calc(var(--u) * .021),15.5px))}
  .nd-acoes .mini{min-height:clamp(38px,calc(var(--u) * .06),44px)}
}