/* ============================================================
   MUNDO | Ferramentas — o móvel
   ------------------------------------------------------------
   A aparência das peças que TODA ferramenta tem, na ordem em
   que aparecem na página:

     1. abertura ......... manchete + o card "como usar"
     2. mostruário ....... a grade de quadros, tudo à vista
     3. gaveta ........... o quadro aberto, com as três faixas
     4. fecho ............ as duas listas + o botão de imprimir
     5. ressalva ......... o aviso que não pode faltar
     6. convite .......... a oferta, depois do resultado

   Nada aqui sabe do que a ferramenta trata. Trocar o conteúdo
   (o casos.js) faz nascer outra ferramenta com esta mesma cara.

   Depende de /ferramentas/_motor/sistema.css, que traz as cores,
   as fontes e a folha.
   ============================================================ */

/* ============================================================
   1 · ABERTURA
   ============================================================ */
.abertura{padding:clamp(6.5rem,11vw,8.5rem) 0 clamp(1rem,2vw,1.4rem)}
.abertura-cabeco{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-bottom:1.5px solid var(--fio-forte);padding-bottom:9px;
  margin-bottom:clamp(1.3rem,2.8vw,1.9rem);
}
.abertura-cabeco .fim{margin-left:auto;color:var(--tinta-45)}
@media(max-width:600px){.abertura-cabeco .fim{margin-left:0;width:100%}}

.abertura-topo{display:grid;gap:clamp(1.4rem,3vw,2.4rem);align-items:start}
@media(min-width:940px){
  /* A manchete cresceu e precisou de mais coluna: em 1,15fr a terceira
     linha caía por 7px e a frase virava quatro linhas. A folga saiu do
     corredor, que era de 64px enquanto o resto do site usa 48px. Assim
     a manchete ganha espaço e o card do "como usar" não perde nenhum. */
  .abertura-topo{grid-template-columns:minmax(0,1.18fr) minmax(0,.85fr);column-gap:clamp(32px,4vw,48px)}
}

/* A mesma medida das outras manchetes do site. Esta página tinha
   régua própria, mais fechada que a de todo mundo, e a manchete
   saía menor que a da Conta do Particular e a do Por Onde Começar
   sem motivo. Agora as três usam a mesma conta. */
.abertura h1{
  font-size:clamp(2.15rem,calc(1.72rem + 2.28vw),3.5rem);line-height:1.06;letter-spacing:-.03em;
  font-variation-settings:'wdth' 90,'opsz' 96;max-width:19ch;text-wrap:pretty;
}
.abertura h1 em{font-style:normal;color:var(--verde-vivo)}
/* No celular as quebras à mão atrapalham; o espaço antes de
   cada <br> no HTML é o que mantém as palavras separadas. */
@media(max-width:560px){.abertura h1 br{display:none}}

.abertura-sub{margin-top:clamp(.9rem,2vw,1.3rem);font-size:1.05rem;line-height:1.5;color:var(--tinta-70);max-width:44ch}
.abertura-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(1rem,2.2vw,1.4rem)}

/* ── O card "como usar": três passos, quase sem texto ── */
.passos{background:var(--folha);border:1px solid var(--fio-medio);border-radius:2px;box-shadow:var(--papel-2);overflow:hidden}
.passos-cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1.5px solid var(--fio-forte);background:var(--folha-2);
}
.passos-cab .mono-s{color:var(--tinta-45)}
.passo{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:15px 16px;border-bottom:1px dashed var(--fio-medio);
}
.passo:last-child{border-bottom:0}
.passo-no{font-family:var(--fd);font-weight:800;font-size:1.28rem;line-height:1;color:var(--terra);
  font-variation-settings:'wdth' 80;letter-spacing:-.045em}
.passo-tit{font-family:var(--fd);font-weight:700;font-size:1rem;letter-spacing:-.024em;line-height:1.2}
.passo-sub{display:block;margin-top:4px;font-size:.9rem;color:var(--tinta-45);line-height:1.4}
.passo-fig{width:58px;height:38px;flex:none;border:1px solid var(--fio-medio);border-radius:2px;
  background:var(--folha-2);display:grid;place-items:center;overflow:hidden}
.passo-fig svg{display:block}

/* ============================================================
   2 · O MOSTRUÁRIO — os nove quadros, todos à vista
   ============================================================ */
.secao{padding:clamp(1.4rem,3vw,2.2rem) 0}
.secao-cab{
  display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
  border-bottom:1.5px solid var(--fio-forte);padding-bottom:11px;margin-bottom:clamp(1rem,2.2vw,1.5rem);
}
.secao-cab h2{font-size:clamp(1.42rem,calc(1.34rem + .66vw),1.92rem);letter-spacing:-.034em;
  font-variation-settings:'wdth' 88;margin-top:9px;max-width:32ch}
.secao-cab h2 em{font-style:normal;color:var(--verde-vivo)}
.secao-cab .fim{margin-left:auto;color:var(--tinta-45);text-align:right;line-height:1.9}
.secao-cab .fim span{display:block}
@media(max-width:620px){
  .secao-cab .fim{margin-left:0;text-align:left;width:100%;padding-top:2px;
    border-top:1px dashed var(--fio);line-height:1.7}
  .secao-cab .fim span{display:inline}
  .secao-cab .fim span + span::before{content:' · ';color:var(--tinta-25)}
}

.grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,14px)}
@media(max-width:900px){.grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.grade{grid-template-columns:1fr}}

.peca{
  position:relative;display:flex;flex-direction:column;gap:9px;
  background:var(--folha);border:1px solid var(--fio-medio);border-radius:2px;
  box-shadow:var(--papel-3);padding:14px 15px 13px;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),border-color .16s var(--ease);
}
.peca:hover{transform:translateY(-2px);box-shadow:var(--papel-1);border-color:var(--fio-forte)}
.peca[aria-expanded="true"]{border-color:var(--fio-forte);box-shadow:var(--papel-1);background:var(--folha-2)}
/* a pontinha que liga o quadro escolhido à gaveta que abriu */
.peca[aria-expanded="true"]::after{
  content:'';position:absolute;left:50%;bottom:-8px;width:14px;height:14px;
  background:var(--folha);border-left:1px solid var(--fio-forte);border-top:1px solid var(--fio-forte);
  transform:translateX(-50%) rotate(45deg);z-index:3;
}
.peca-topo{display:flex;align-items:center;gap:10px}
.peca-ic{width:30px;height:30px;flex:none;border:1.2px solid var(--fio-medio);border-radius:2px;
  display:grid;place-items:center;color:var(--verde-vivo);background:var(--folha)}
.peca-ic svg{width:17px;height:17px}
.peca-no{margin-left:auto;font-family:var(--fm);font-size:.535rem;font-weight:700;letter-spacing:.14em;color:var(--tinta-25)}
.peca-tit{font-family:var(--fd);font-weight:700;font-size:1.04rem;letter-spacing:-.026em;line-height:1.15}
.peca-diz{font-size:.925rem;line-height:1.4;color:var(--tinta-70)}
.peca-diz b{color:var(--tinta);font-weight:600}
.peca-pe{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:9px;border-top:1px dashed var(--fio)}
.peca-art{font-family:var(--fm);font-size:.495rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-45)}
/* a bolinha só nasce depois que a pessoa diz onde está */
.peca-marca{margin-left:auto;width:9px;height:9px;border-radius:50%;flex:none;display:none}
.peca[data-onde="ja"] .peca-marca{display:block;background:var(--verde-vivo)}
.peca[data-onde="ainda"] .peca-marca{display:block;background:var(--terra)}

/* ============================================================
   3 · A GAVETA — abre embaixo da linha do quadro escolhido
   ============================================================ */
.painel{
  grid-column:1/-1;background:var(--folha);border:1px solid var(--fio-forte);border-radius:2px;
  box-shadow:var(--papel-2);overflow:hidden;scroll-margin-top:96px;
}
.painel-cab{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:clamp(15px,2.2vw,20px) clamp(15px,2.2vw,22px);
  border-bottom:1.5px solid var(--fio-forte);background:var(--folha-2);
}
.painel-ic{width:38px;height:38px;flex:none;border:1.4px solid var(--verde-vivo);border-radius:2px;
  display:grid;place-items:center;color:var(--verde-vivo);background:var(--folha)}
.painel-ic svg{width:21px;height:21px}
.painel-tit{font-family:var(--fd);font-weight:800;font-size:clamp(1.14rem,calc(1.06rem + .42vw),1.44rem);letter-spacing:-.03em;line-height:1.14}
.painel-caso{margin-top:6px;font-size:.96rem;line-height:1.45;color:var(--tinta-70);max-width:62ch}
.painel-fechar{width:32px;height:32px;flex:none;border:1px solid var(--fio-medio);border-radius:2px;
  display:grid;place-items:center;color:var(--tinta-70);background:var(--folha)}
.painel-fechar:hover{border-color:var(--terra);color:var(--terra)}
.painel-fechar svg{width:13px;height:13px}

/* Três faixas lado a lado quando cabe: a norma, o que não passa
   e o que passa. É a comparação que a pessoa veio ver, sem rolar. */
.painel-grade{display:grid;grid-template-columns:1fr}
.norma{padding:clamp(15px,2.2vw,20px) clamp(15px,2.2vw,22px);border-bottom:1px dashed var(--fio-medio)}
.lados{display:grid;grid-template-columns:1fr}
.lado--nao{border-bottom:1px dashed var(--fio-medio)}

@media(min-width:680px){
  .lados{grid-template-columns:1fr 1fr}
  .lado--nao{border-bottom:0;border-right:1px dashed var(--fio-medio)}
}
@media(min-width:1040px){
  .painel-grade{grid-template-columns:minmax(0,1.06fr) minmax(0,.97fr) minmax(0,.97fr)}
  .lados{display:contents}
  .norma{border-bottom:0;border-right:1px dashed var(--fio-medio)}
}

/* ── A norma, copiada palavra por palavra ── */
.norma-rot{display:flex;align-items:center;gap:9px;margin-bottom:13px;color:var(--tinta-45)}
.cit{padding-left:14px;border-left:2.5px solid var(--fio-terra)}
.cit + .cit{margin-top:14px}
.cit-art{display:block;font-family:var(--fm);font-size:.535rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--terra);margin-bottom:6px}
.cit-txt{font-size:.925rem;line-height:1.52;color:var(--tinta);font-style:italic}
/* Parede de texto cansa. Os dois artigos que mais importam ficam
   à vista; o resto abre em um clique, para quem quiser tudo. */
.cits[data-tudo="nao"] .cit:nth-child(n+3){display:none}
.mais{
  display:inline-flex;align-items:center;gap:8px;margin-top:13px;
  font-family:var(--fm);font-size:.5rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-70);border:1px dashed var(--fio-medio);border-radius:50px;padding:9px 13px;background:var(--folha-2);
}
.mais:hover{border-color:var(--terra);color:var(--terra)}
.mais svg{width:9px;height:9px;flex:none;transition:transform .2s var(--ease)}
.cits[data-tudo="sim"] + .mais svg{transform:rotate(180deg)}

.norma-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;padding-top:13px;border-top:1px dashed var(--fio-medio)}
.lk{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fm);font-size:.5rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--verde-vivo);border:1px solid var(--verde-fio);border-radius:50px;padding:7px 11px;background:var(--verde-fraco);
}
.lk:hover{color:var(--terra);border-color:var(--terra-fio);background:var(--terra-fraca)}
.lk svg{width:9px;height:9px;flex:none}

/* ── Os dois lados ── */
.lado{padding:clamp(15px,2.2vw,20px) clamp(15px,2.2vw,22px)}
.lado--nao{background:var(--terra-fraca)}
.lado--sim{background:var(--verde-fraco)}
.lado-rot{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.lado-ic{width:19px;height:19px;border-radius:2px;display:grid;place-items:center;flex:none;border:1.4px solid currentColor}
.lado-ic svg{width:10px;height:10px}
.lado--nao .lado-rot{color:var(--terra)}
.lado--sim .lado-rot{color:var(--verde-vivo)}
.lado-por{margin-top:10px;font-size:.885rem;line-height:1.45;color:var(--tinta-70)}
.lado-por b{color:var(--tinta);font-weight:600}

/* ── O retângulo que imita a peça de verdade ── */
.mock{background:var(--folha);border:1px solid var(--fio-medio);border-radius:2px;box-shadow:var(--papel-3);padding:12px 13px}
/* O rótulo de cada exemplo, para quando um lado tem mais de um.
   Herda a cor do lado: terracota no que não passa, verde no que passa. */
.mock-rot{display:block;font-family:var(--fm);font-size:.5rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:7px}
.lado--nao .mock-rot{color:var(--terra)}
.lado--sim .mock-rot{color:var(--verde-vivo)}
.mock + .mock-rot{margin-top:14px}
.mock-perfil{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.mock-av{width:34px;height:34px;border-radius:50%;flex:none;border:1.2px dashed var(--fio-medio);
  display:grid;place-items:center;color:var(--tinta-25)}
.mock-av svg{width:16px;height:16px}
.mock-arroba{font-family:var(--fd);font-weight:700;font-size:.86rem;letter-spacing:-.015em}
.mock-onde{display:block;font-family:var(--fm);font-size:.475rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-25);margin-top:3px}
.mock-l{font-size:.885rem;line-height:1.48;color:var(--tinta)}
.mock-l + .mock-l{margin-top:3px}
.mock-l .ruim{color:var(--terra);text-decoration:line-through;text-decoration-color:var(--fio-terra);text-decoration-thickness:1.5px}
.mock-l .bom{color:var(--verde-vivo);font-weight:600}
.mock-foto{display:flex;gap:7px;margin-bottom:9px}
.mock-q{flex:1;min-width:0;aspect-ratio:1;max-height:104px;border:1px solid var(--fio-medio);border-radius:2px;
  background:var(--folha-2);display:grid;place-items:center;color:var(--tinta-25);position:relative;overflow:hidden}
.mock-q .mono-s{font-size:.45rem;letter-spacing:.12em}
.mock-q--x{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--terra-fraca) 6px 12px);border-color:var(--terra-fio);color:var(--terra)}
.mock-q--v{border-color:var(--verde-fio);color:var(--verde-vivo);background:var(--verde-fraco)}

/* ── O pé da gaveta ── */
.aberto{display:flex;gap:11px;align-items:flex-start;padding:13px clamp(15px,2.2vw,22px);
  border-top:1px dashed var(--fio-medio);background:var(--folha)}
.aberto .mono-s{color:var(--terra);flex:none;margin-top:2px}
.aberto p{font-size:.885rem;line-height:1.45;color:var(--tinta-70)}

.painel-pe{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  padding:14px clamp(15px,2.2vw,22px);border-top:1.5px solid var(--fio-forte);background:var(--folha-2)}
.painel-pe .mono-s{color:var(--tinta-45);margin-right:auto}
.onde-btn{
  font-family:var(--fm);font-size:.53rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;
  border:1px solid var(--fio-medio);border-radius:50px;padding:10px 15px;background:var(--folha);color:var(--tinta-70);
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.onde-btn:hover{border-color:var(--tinta)}
.onde-btn[aria-pressed="true"][data-onde="ja"]{background:var(--verde-vivo);border-color:var(--verde-vivo);color:#F7F2E6}
.onde-btn[aria-pressed="true"][data-onde="ainda"]{background:var(--terra);border-color:var(--terra);color:#FFF6EE}
@media(max-width:560px){.painel-pe .mono-s{width:100%;margin-right:0}.onde-btn{flex:1}}

/* ============================================================
   4 · O FECHO — duas listas, sem nota e sem placar
   ============================================================ */
.fecho-cab{padding:clamp(22px,3.2vw,32px) var(--pad-dir) clamp(16px,2.4vw,22px) var(--margem)}
.fecho-cab h2{font-size:clamp(1.4rem,calc(1.32rem + .64vw),1.88rem);letter-spacing:-.034em;margin-top:10px;max-width:22ch}
.fecho-cab h2 em{font-style:normal;color:var(--verde-vivo)}
.fecho-cab p{margin-top:11px;font-size:.98rem;line-height:1.5;color:var(--tinta-70);max-width:56ch}

.fecho-grade{display:grid;grid-template-columns:1fr 1fr;border-top:1.5px solid var(--fio-forte)}
.coluna{padding:clamp(18px,2.6vw,26px) clamp(16px,2.4vw,24px)}
.coluna--ja{border-right:1px dashed var(--fio-medio);padding-left:var(--margem)}
.coluna--ainda{padding-right:var(--pad-dir)}
@media(max-width:760px){
  .fecho-grade{grid-template-columns:1fr}
  .coluna{padding-left:var(--margem);padding-right:var(--pad-dir)}
  .coluna--ja{border-right:0;border-bottom:1px dashed var(--fio-medio)}
}
.coluna-rot{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.coluna--ja .coluna-rot{color:var(--verde-vivo)}
.coluna--ainda .coluna-rot{color:var(--terra)}
.coluna-rot h3{font-family:var(--fd);font-weight:700;font-size:1rem;letter-spacing:-.024em;color:inherit}
.coluna ul{display:grid;gap:9px}
.coluna li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;line-height:1.42;color:var(--tinta-70);
  padding-bottom:9px;border-bottom:1px dotted var(--fio-medio)}
.coluna li:last-child{border-bottom:0;padding-bottom:0}
.coluna li .pt{width:7px;height:7px;border-radius:50%;flex:none;margin-top:6px}
.coluna--ja .pt{background:var(--verde-vivo)}
.coluna--ainda .pt{background:var(--terra)}
.coluna-vazio{font-size:.92rem;line-height:1.45;color:var(--tinta-45);font-style:italic}

.fecho-pe{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:clamp(16px,2.4vw,22px) var(--pad-dir) clamp(16px,2.4vw,22px) var(--margem);
  border-top:1.5px solid var(--fio-forte);background:var(--folha-2)}
.fecho-pe .mono-s{color:var(--tinta-45);margin-right:auto;flex:1 1 280px;line-height:1.8}
@media(max-width:640px){.fecho-pe .mono-s{width:100%;margin-right:0}.fecho-pe .btn{width:100%}}

/* ============================================================
   5 · A RESSALVA
   ============================================================ */
.ressalva{margin-top:clamp(1.1rem,2.4vw,1.6rem)}
.ressalva .folha-corpo{display:grid;gap:12px}
.ressalva h3{font-size:clamp(1.12rem,calc(1.06rem + .38vw),1.36rem);letter-spacing:-.03em;max-width:24ch}
.ressalva h3 em{font-style:normal;color:var(--verde-vivo)}
.ressalva p{font-size:.96rem;line-height:1.55;color:var(--tinta-70);max-width:62ch}
.ressalva strong{color:var(--tinta);font-weight:600}
.fontes{display:grid;gap:9px;margin-top:3px;padding-top:14px;border-top:1px dashed var(--fio-medio)}
.fonte{display:flex;gap:11px;align-items:baseline;flex-wrap:wrap}
.fonte .mono-s{color:var(--tinta-45);flex:none;min-width:9ch}
.fonte a{color:var(--verde-vivo);border-bottom:1.5px solid var(--verde-claro);font-size:.92rem;overflow-wrap:anywhere}
.fonte a:hover{color:var(--terra);border-color:var(--fio-terra)}

/* ============================================================
   6 · O CONVITE — oferta, e só depois do resultado
   ============================================================ */
.convite{margin-top:clamp(1.1rem,2.4vw,1.6rem);background:var(--verde);border-color:var(--verde);color:#F7F2E6}
.convite::before{background:rgba(255,246,238,.28)}
.convite .furos span{background:var(--verde);border-color:rgba(255,246,238,.32);box-shadow:none}
.convite .folha-corpo{display:grid;gap:13px}
.convite .mono{color:var(--terra-viva)}
.convite h3{font-size:clamp(1.2rem,calc(1.1rem + .54vw),1.54rem);letter-spacing:-.032em;max-width:22ch}
.convite h3 em{font-style:normal;color:var(--terra-viva)}
.convite p{font-size:.99rem;line-height:1.55;color:rgba(247,242,230,.82);max-width:56ch}
.convite-ctas{display:flex;gap:11px;flex-wrap:wrap;margin-top:3px}
.convite .btn{background:transparent;color:#F7F2E6;border-color:rgba(255,246,238,.42);box-shadow:none}
.convite .btn:hover{border-color:#F7F2E6}
.convite .btn--terra{background:var(--terra);border-color:var(--terra);color:#FFF6EE}
.convite-nota{font-family:var(--fm);font-size:.495rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,230,.5);line-height:1.8}
@media(max-width:520px){.convite-ctas{flex-direction:column;align-items:stretch}.convite .btn{width:100%}}

/* ============================================================
   7 · A DOBRA
   ------------------------------------------------------------
   Uma folha que começa fechada. Serve para o que precisa estar
   escrito e disponível, mas não precisa ocupar meia tela de quem
   só quer o resultado: a ressalva da Régua, as fontes do Por Onde
   Começar. Abre no clique, e no papel sai aberta.

   Mora aqui, e não no questionario.css, porque as duas
   ferramentas usam.
   ============================================================ */
@keyframes dobraEntra{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.dobra{margin-top:clamp(1.1rem,2.4vw,1.6rem)}
.dobra > summary{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;cursor:pointer;list-style:none;
  padding:clamp(15px,2.2vw,19px) var(--pad-dir) clamp(15px,2.2vw,19px) var(--margem);
  transition:background .16s var(--ease);
}
.dobra > summary::-webkit-details-marker{display:none}
.dobra > summary:hover{background:var(--folha-2)}
.dobra > summary:focus-visible{outline:2.5px solid var(--terra);outline-offset:-3px}
.dobra-ic{width:30px;height:30px;flex:none;align-self:start;margin-top:2px;
  border:1.3px solid var(--fio-medio);border-radius:2px;
  display:grid;place-items:center;color:var(--verde-vivo);background:var(--folha-2)}
.dobra-ic svg{width:15px;height:15px}
.dobra-tit{font-family:var(--fd);font-weight:800;font-size:clamp(1.02rem,calc(.96rem + .34vw),1.24rem);
  letter-spacing:-.028em;line-height:1.2;display:block}
.dobra-tit em{font-style:normal;color:var(--verde-vivo)}
.dobra-sub{display:block;margin-top:4px;font-size:.88rem;line-height:1.4;color:var(--tinta-45);max-width:56ch}
.dobra-abre{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  font-family:var(--fm);font-size:.46rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--fio-medio);border-radius:50px;padding:8px 12px;color:var(--tinta-45);
  background:var(--folha);line-height:1;
}
.dobra > summary:hover .dobra-abre{border-color:var(--verde-fio);color:var(--verde-vivo)}
.dobra-abre svg{width:9px;height:9px;transition:transform .2s var(--ease)}
.dobra[open] .dobra-abre svg{transform:rotate(180deg)}
.dobra[open] .dobra-abre .dobra-r--fechado,
.dobra:not([open]) .dobra-abre .dobra-r--aberto{display:none}
.dobra-corpo{padding:0 var(--pad-dir) clamp(20px,3vw,28px) var(--margem);
  border-top:1px dashed var(--fio-medio);padding-top:clamp(16px,2.4vw,22px);display:grid;gap:12px;
  animation:dobraEntra .24s var(--ease) both}
/* Linha comprida cansa. O texto da dobra respeita a mesma medida
   das outras folhas mesmo sem a casca delas. */
.dobra-corpo p{font-size:.955rem;line-height:1.56;color:var(--tinta-70);max-width:64ch}
.dobra-corpo strong{color:var(--tinta);font-weight:600}
.dobra-corpo a{color:var(--verde-vivo);border-bottom:1.5px solid var(--verde-claro)}
.dobra-corpo a:hover{color:var(--terra);border-color:var(--fio-terra)}
.dobra-corpo .fontes a{border-bottom-width:1px}
@media(max-width:620px){
  .dobra > summary{grid-template-columns:auto minmax(0,1fr)}
  .dobra-abre{grid-column:1/-1;justify-content:center}
}

/* ============================================================
   IMPRESSÃO — "levar isto comigo" vira uma folha só
   ============================================================ */
@media print{
  body{background:#fff}
  body::before,.nav-wrapper,.pular,.abertura,.mostruario,.convite,.footer,.fecho-pe{display:none!important}
  .folha{box-shadow:none;border:1px solid #999;break-inside:avoid}
  .folha::before,.furos{display:none}
  .folha-corpo,.fecho-cab{padding-left:24px;padding-right:24px}
  .coluna--ja{padding-left:24px}
  .coluna--ainda{padding-right:24px}
  .fonte a{color:#000;border:0}
  .fonte a::after{content:' (' attr(href) ')';font-family:monospace;font-size:.72em;word-break:break-all}
  .dobra-corpo{animation:none;padding-left:24px;padding-right:24px}
  .dobra > summary{padding-left:24px;padding-right:24px}
  .dobra-abre,.dobra-ic{display:none}
}