/* ============================================================
   PASTAS DE PLANO: as pastas de vidro (assets/js/glass-folder.js) com
   o plano embaixo. Usado na Home (cursos) e na Mentoria (planos). As
   pastas nascem de data-folder-cfg (ver assets/js/pastas.js) e crescem
   em escada (escala). Fundo das pastas: halo-c (fogo) e vidro; não
   trocar sem pedir.
   Alinhamento: cada filho do .pasta é uma LINHA da grade (subgrid), então
   nome, barra, texto, lista e botão ficam na mesma altura nas três
   colunas. --linhas = número de filhos de cada .pasta.
   ============================================================ */
.gf-root{ font-family:var(--familia-texto); }
.gf-title{ font-family:var(--familia-texto); font-size:var(--tam-20); font-weight:600; letter-spacing:-.01em; }
.gf-meta, .gf-sheet-meta{ font-family:var(--familia-texto); }
.gf-sheet-name{ font-family:var(--familia-texto); font-weight:600; }
.gf-sheet:focus-visible, .gf-key:focus-visible{ outline-color:var(--sunset-500); }

.pastas{
  --linhas:5;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  grid-template-rows:repeat(var(--linhas), auto);
  column-gap:var(--pastas-vao);   /* o mesmo vão em toda grade de pastas (04/11) */
  margin-top:clamp(48px, 7vh, 88px);
}
.pastas--cursos{ --linhas:6; }
.pasta{
  display:grid;
  grid-row:span var(--linhas);
  grid-template-rows:subgrid;
  row-gap:16px;
  min-width:0;
}
/* na mentoria o plano vem num bloco: os filhos dele viram linhas da grade */
.pasta__info{ display:contents; }
.pasta__folder{ position:relative; display:flex; align-items:flex-end; justify-content:flex-start; margin-bottom:12px; }
.pasta__topo{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.pasta__t{ margin:0; font-family:var(--familia-display); font-size:clamp(var(--tam-20), 1.9vw, var(--tam-28)); font-weight:800; line-height:1.05; letter-spacing:-.03em; color:var(--cor-texto-titulo); }
.pasta__preco{ margin:0; font-family:var(--familia-display); font-size:clamp(var(--tam-20), 1.9vw, var(--tam-28)); font-weight:800; letter-spacing:-.03em; color:var(--cor-texto-titulo); white-space:nowrap; }
.pasta__mods{ margin:0; font-size:var(--tam-14); line-height:1.5; color:var(--cor-texto-suave); }
.pasta__promessa{ margin:0; font-size:var(--tam-15); line-height:1.5; color:var(--cor-texto-titulo); text-wrap:pretty; }
.pasta__inc{ margin:0; font-size:var(--tam-14); line-height:1.55; color:var(--cor-texto-suave); text-wrap:pretty; }
.pasta__lista{ list-style:none; margin:0; padding:14px 0 0; border-top:1px solid var(--cor-borda-sutil); display:grid; gap:8px; align-content:start; font-size:var(--tam-15); line-height:1.45; color:var(--cor-texto-corpo); }
.pasta__total{ margin:0; font-size:var(--tam-14); color:var(--cor-texto-suave); align-self:end; }
.pasta__acoes{ display:flex; }
.pasta__acoes .btn{ flex:1; }

/* a barra: inteira, preenchida em Sunset até onde o curso vai */
.barra{ position:relative; height:4px; border-radius:var(--raio-pp); background:color-mix(in srgb, var(--agua) 14%, transparent); overflow:hidden; align-self:center; }
.barra i{ position:absolute; inset:0 auto 0 0; width:calc(var(--v, 0) * 100%); border-radius:inherit; background:var(--sunset-500); }

.pasta__estado{ position:absolute; top:0; right:0; z-index:5; margin:0; }

/* uma coluna: some a grade de linhas; o plano em destaque vem primeiro.
   Do tablet deitado (1024) para cima ficam as três colunas de 1/3 (04/11);
   o corte é --pastas-uma-coluna (900px). */
@media (max-width: 899.98px){
  .pastas{ grid-template-columns:1fr; grid-template-rows:none; max-width:440px; margin-inline:auto; row-gap:80px; }
  .pasta{ grid-row:auto; display:flex; flex-direction:column; }
  .pasta__folder{ justify-content:center; min-height:0; }
  .pasta--destaque{ order:-1; }
}

/* o que inclui: a MESMA lista nas três colunas, na mesma ordem; o que o
   curso tem fica aceso, o resto apagado. Lê-se na horizontal. */
.comp{ padding-top:16px; border-top:1px solid var(--cor-borda-sutil); }
.comp__t{ margin:0 0 10px; font-size:var(--tam-13); color:var(--cor-texto-suave); }
.comp__lista{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.comp__lista li{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--cor-borda-sutil);
  font-size:var(--tam-14); line-height:1.3; white-space:nowrap;
}
.comp__lista li.tem{ color:var(--comp-item-cor, var(--cor-texto-corpo, var(--agua))); }   /* itens do "Inclui" num tom abaixo do título (05/11) */
.comp__lista li.nao{ color:var(--ink-7); }
.comp__lista li::after{ content:"—"; font-size:var(--tam-12); color:var(--ink-6); }
.comp__lista li.tem::after{
  content:""; width:12px; height:7px; margin-right:2px;
  border-left:1.5px solid var(--comp-check-cor, var(--sunset-500, var(--sunset-500))); border-bottom:1.5px solid var(--comp-check-cor, var(--sunset-500, var(--sunset-500)));   /* check em laranja (05/11) */
  transform:translateY(-2px) rotate(-45deg);
}

/* nome da marca: "Hot" em extra bold, o resto em itálico light (a pasta
   de vidro já monta assim a etiqueta; nos títulos use .hotnome) */
.hotnome{ white-space:nowrap; }
.hotnome b{ font-weight:800; }
.hotnome i{ font-weight:300; font-style:italic; letter-spacing:-.01em; padding-right:.06em; }
.gf-title .hotnome{ font-family:var(--familia-display); }

/* títulos dos planos na Poppins (pedido do cliente, 02/11): "Hot" 800 e
   o nome em itálico light de verdade (a Poppins tem o itálico 300) */
.pasta__t, .pasta__t .hotnome, .gf-title .hotnome{ font-family:var(--familia-marca); }
.pasta__t{ letter-spacing:-.035em; }
.pasta__t .hotnome i, .gf-title .hotnome i{ letter-spacing:-.02em; padding-right:.04em; }
/* o complemento do nome ("(Turma)") fica light e reto */
.hotnome{ font-weight:300; }
.pasta__topo .hotnome{ white-space:nowrap; }

/* a barra do curso: mais alta, pontas 100% redondas e o preenchimento com
   o halo de fogo (o mesmo das pastas), na faixa do meio do redemoinho */
.barra{ height:8px; border-radius:var(--raio-capsula); }
.barra i{
  border-radius:var(--raio-capsula);
  background:var(--sunset-500) url("../img/halo/halo-c.webp") 38% 46% / 150% auto no-repeat;
}

/* a barra volta ao trilho grafite escuro com Sunset preenchendo (o fogo saiu) */
.barra{ background:color-mix(in srgb, var(--agua) 14%, transparent); }
.barra i{ background:var(--sunset-500); }

/* a chama da marca dividindo o nome: Hot (chama) Model */
.hotnome__chama{
  display:inline-block; width:.5em; height:.6em; margin:0 .2em 0 .22em;
  vertical-align:-.02em; background:var(--sunset-500);
  -webkit-mask:url("../logo/oficial/icone-chama.svg") center / contain no-repeat;
          mask:url("../logo/oficial/icone-chama.svg") center / contain no-repeat;
}
.hotnome .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* a chama vem antes do nome: (chama) Hot Flow */
.hotnome__chama{ margin:0 .26em 0 0; }
/* nomes de curso em minúsculas (pedido do cliente, 02/11): só no visual */
.hotnome{ text-transform:lowercase; }

/* nível do curso: três chamas da marca à esquerda da barra, acesas em
   Sunset até o nível (Hot Model 1, Hot Flow 2, Hot Money 3), o resto em
   grafite. A chama saiu do nome. */
.hotnome__chama{ display:none; }
.nivelbar{ display:flex; align-items:center; gap:14px; align-self:center; min-width:0; }
.nivelbar .barra{ flex:1; min-width:0; align-self:auto; }
.chamas{ display:inline-flex; align-items:flex-end; gap:4px; flex:none; }
.chamas i{
  display:block; width:13px; height:16px; background:var(--cor-borda-media);
  -webkit-mask:url("../logo/oficial/icone-chama.svg") center / contain no-repeat;
          mask:url("../logo/oficial/icone-chama.svg") center / contain no-repeat;
}
.chamas i.on{ background:var(--sunset-500); }
/* "hot" e "model" juntos: sem espaço visível, só um respiro mínimo para o itálico */
.hotnome i{ margin-left:.03em; }

/* ---------- nível em chamas, refinado ----------
   Acesa = chama cheia em Sunset; apagada = só o contorno, em grafite (lê
   "1 de 3" de cara). Um pouco maiores, alinhadas ao centro da barra.
   Ao entrar na tela, as chamas acendem em sequência e a barra enche da
   esquerda (só onde o navegador tem animação por rolagem; nos outros fica
   estático, já no estado final). */
.nivelbar{ gap:12px; }
.chamas{ gap:3px; align-items:center; }
.chamas i{
  width:15px; height:18px; background:color-mix(in srgb, var(--agua) 32%, transparent);
  -webkit-mask-image:url("../logo/oficial/icone-chama-contorno.svg");
          mask-image:url("../logo/oficial/icone-chama-contorno.svg");
}
.chamas i.on{
  background:var(--sunset-500);
  -webkit-mask-image:url("../logo/oficial/icone-chama.svg");
          mask-image:url("../logo/oficial/icone-chama.svg");
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .nivelbar{ view-timeline:--nivel block; }
    .nivelbar .barra i{
      transform-origin:left center;
      animation:nivel-enche linear both; animation-timeline:--nivel; animation-range:entry 40% cover 40%;
    }
    .chamas i.on{ animation:nivel-acende linear both; animation-timeline:--nivel; }
    .chamas i.on:nth-child(1){ animation-range:entry 40% cover 28%; }
    .chamas i.on:nth-child(2){ animation-range:entry 60% cover 33%; }
    .chamas i.on:nth-child(3){ animation-range:entry 80% cover 38%; }
  }
}
@keyframes nivel-enche{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes nivel-acende{ from{ background-color:color-mix(in srgb, var(--agua) 32%, transparent); transform:scale(.7); } 60%{ transform:scale(1.12); } to{ background-color:var(--sunset-500); transform:scale(1); } }
/* em uma coluna (.pasta vira flex em coluna) a linha precisa esticar na
   largura; centrada ela encolhia e a barra ficava com 0px */
@media (max-width: 899.98px){ .nivelbar, .pasta > .barra{ align-self:stretch; } }

/* folha da pasta em 2 linhas e 2 pesos: "Módulo 5 · 6 aulas" leve em cima,
   o título do módulo forte embaixo, em até 2 linhas sem cortar */
.gf-sheet-head{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:3px; white-space:normal; }
.gf-sheet-meta{ order:-1; font-family:var(--familia-texto); font-size:var(--tam-11); font-weight:400; letter-spacing:0; }
.gf-sheet-name{ font-family:var(--familia-display); font-size:var(--tam-14); font-weight:800; line-height:1.12; letter-spacing:-.02em; text-overflow:clip; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-wrap:balance; }
.gf-sheet--art::after{ content:""; position:absolute; inset:0 0 auto 0; height:70px; z-index:0; pointer-events:none; background:linear-gradient(180deg, var(--cor-sobre-foto), transparent); }
.gf-root .gf-sheet .gf-sheet-head{ flex-direction:column; align-items:flex-start; gap:3px; white-space:normal; }
.gf-root .gf-sheet .gf-sheet-meta{ order:-1; font-family:var(--familia-texto); font-size:var(--tam-11); font-weight:400; letter-spacing:0; }
.gf-root .gf-sheet .gf-sheet-name{ font-family:var(--familia-display); font-size:var(--tam-14); font-weight:800; line-height:1.12; letter-spacing:-.02em; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }

/* folha: título forte na 1ª linha, meta leve embaixo; as folhas de trás
   ficam mais escuras que a da frente (--gf-depth 0 = a da frente) */
.gf-root .gf-sheet .gf-sheet-meta{ order:0; }
.gf-root .gf-sheet{ filter:brightness(calc(1 - var(--gf-depth, 0) * .2)); }
.gf-root .gf-sheet:hover, .gf-root .gf-sheet:focus-visible{ filter:none; }

/* folha com foto: sem o filete claro do topo e sem a faixa escura; o texto
   se segura com sombra própria. As folhas abrem mais espaço entre si para
   as duas linhas aparecerem. */
.gf-root .gf-sheet--art::after{ content:none; }
.gf-root .gf-sheet.gf-sheet--art{ box-shadow:0 0 0 .5px color-mix(in srgb, var(--ink-0) 35%, transparent); }
.gf-root .gf-sheet--art .gf-sheet-name, .gf-root .gf-sheet--art .gf-sheet-meta{ }
.gf-root.gf-root{ --gf-stack:30px; }
.gf-root.gf-root{ --gf-stack:40px; }
.gf-root.gf-root{ --gf-stack:15px; }
.gf-root.gf-root:hover, .gf-root.gf-root:focus-within, .gf-root.gf-root[data-open="true"]{ --gf-stack:40px; }

/* folha com foto: sem sombra no texto; dois degradês na própria folha,
   um de cima para baixo (segura o texto) e outro de baixo para cima */
.gf-root .gf-sheet--art .gf-sheet-name, .gf-root .gf-sheet--art .gf-sheet-meta{ text-shadow:none; }
.gf-root .gf-sheet--art::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg, var(--veu) 0%, color-mix(in srgb, var(--ink-0) 28%, transparent) 32%, transparent 55%),
             linear-gradient(0deg, color-mix(in srgb, var(--ink-0) 55%, transparent) 0%, transparent 45%);
}
.gf-root .gf-sheet.gf-sheet--art{ box-shadow:0 0 0 .5px color-mix(in srgb, var(--ink-0) 30%, transparent); }
.gf-root .gf-sheet.gf-sheet--art::after{ inset:0; height:auto; box-shadow:none; border:0; }

/* folha: respiro maior e título mais fino (Onest 600 no lugar da Bricolage 800) */
.gf-root .gf-sheet .gf-sheet-head{ left:18px; right:18px; top:16px; gap:4px; }
.gf-root .gf-sheet .gf-sheet-name{ font-family:var(--familia-texto); font-size:var(--tam-14); font-weight:600; line-height:1.25; letter-spacing:-.01em; }
.gf-root .gf-sheet .gf-sheet-meta{ font-size:var(--tam-11); font-weight:400; opacity:.85; }

/* folha: tom mais leve e parecido entre a da frente e as de trás; teste:
   só a folha da frente em cor, as de trás em P&B */
.gf-root .gf-sheet.gf-sheet--art::after{
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink-0) 46%, transparent) 0%, color-mix(in srgb, var(--ink-0) 16%, transparent) 34%, transparent 55%),
             linear-gradient(0deg, color-mix(in srgb, var(--ink-0) 32%, transparent) 0%, transparent 40%);
}
.gf-root .gf-sheet{ filter:brightness(calc(1 - var(--gf-depth, 0) * .07)); }
.gf-root .gf-sheet-slot:not(:last-child) .gf-sheet-art{ filter:grayscale(1) contrast(1.04); }
.gf-root .gf-sheet-slot:not(:last-child) .gf-sheet:hover .gf-sheet-art{ filter:none; }

/* folhas: todas em cor; overlay mais forte e as de trás mais escuras */
.gf-root .gf-sheet-slot:not(:last-child) .gf-sheet-art{ filter:none; }
.gf-root .gf-sheet.gf-sheet--art::after{
  background:linear-gradient(180deg, var(--veu) 0%, color-mix(in srgb, var(--ink-0) 30%, transparent) 36%, transparent 60%),
             linear-gradient(0deg, color-mix(in srgb, var(--ink-0) 50%, transparent) 0%, transparent 45%);
}
.gf-root .gf-sheet{ filter:brightness(calc(1 - var(--gf-depth, 0) * .18)); }

/* marca do produto na pasta: maior, em 2 linhas ("hot" / "model") com
   entrelinha bem curta */
.gf-root .gf-title{ overflow:visible; white-space:normal; font-size:clamp(var(--tam-32), 2.6vw, var(--tam-36)); line-height:.82; }
.gf-root .gf-title .hotnome{ display:flex; flex-direction:column; align-items:flex-start; }
.gf-root .gf-title .hotnome .sr-only{ position:absolute; }
.gf-root .gf-title .hotnome i{ margin-top:-.04em; }
.gf-root .gf-label{ max-width:none; }
.gf-root .gf-label{ gap:10px; }
.gf-root .gf-shadow{ display:none; }   /* sem sombra projetada sob a pasta */
.gf-root .gf-title{ font-size:clamp(var(--tam-24), 2vw, var(--tam-28)); }

/* nome do produto na pasta: de volta a 1 linha, menor */
.gf-root .gf-title{ font-size:clamp(var(--tam-20), 1.6vw, var(--tam-24)); line-height:1.05; white-space:nowrap; }
.gf-root .gf-title .hotnome{ display:inline; }
.gf-root .gf-title .hotnome i{ margin-top:0; }
.gf-root .gf-label{ gap:6px; }

/* preço: o "R$" menor, mais leve e apagado; o número segue forte */
.pasta__moeda{ margin-right:.18em; font-size:.55em; font-weight:500; letter-spacing:0; color:var(--cor-texto-suave); vertical-align:.32em; }

/* ============================================================
   PAINEL DE PASTA PAGA (.pastas--painel) — o mesmo da plataforma, para a
   Home e a Mentoria. O contorno do painel começa na metade da pasta
   (--meio) e o texto alinha com o rótulo de dentro da pasta (--recuo-*);
   as duas medidas vêm do pastas.js. Botão vidro (.btn--vidro).
   ============================================================ */
.pastas--painel{ column-gap:var(--pastas-vao); }
.pastas--painel .pasta{
  position:relative; isolation:isolate; min-width:0;
  padding:0 var(--recuo-d, 28px) clamp(24px, 2.2vw, 34px) var(--recuo-e, 28px);
}
.pastas--painel .pasta > *{ min-width:0; }
.pastas--painel .pasta::before{
  content:""; position:absolute; left:0; right:0; bottom:0; top:var(--meio, 120px); z-index:-1;
  border:1px solid var(--cor-borda-sutil, var(--cor-borda-sutil)); border-radius:var(--raio-painel);
  background:linear-gradient(180deg, color-mix(in srgb, var(--branco) 2.5%, transparent), transparent 40%), var(--ink-1, var(--ink-1));
}
.pastas--painel .pasta--destaque::before{
  border-color:color-mix(in srgb, var(--sunset-500) 32%, transparent);
  background:radial-gradient(120% 50% at 50% 0%, var(--cor-acao-suave), transparent 60%), var(--ink-1, var(--ink-1));
}
.pastas--painel .pasta__folder{
  position:static; justify-content:center; min-width:0; contain:inline-size;
  margin:0 calc(20px - var(--recuo-d, 28px)) clamp(22px, 2.4vw, 40px) calc(20px - var(--recuo-e, 28px));
}
.pastas--painel .pasta__folder > *:not(.pasta__estado){ position:relative; }
.pastas--painel .pasta__estado{ top:0; right:16px; }
.pastas--painel .comp__lista li{ white-space:normal; gap:12px; }
.pastas--painel.pastas--um{ --linhas:5; grid-template-columns:minmax(0, 480px); }
@media (max-width: 899.98px){ .pastas--painel{ row-gap:clamp(40px, 8vw, 64px); } }

/* nome longo + preço: o preço desce para a linha de baixo em vez de estourar */
.pastas--painel .pasta__topo{ flex-wrap:wrap; row-gap:4px; }
.pastas--painel .pasta__t{ min-width:0; }
.pastas--painel .pasta__folder{ justify-content:flex-start; }   /* a pasta encosta nos 20px da esquerda, sem centralizar por conteúdo */


/* ============================================================
   COMPARATIVO (03/11): os cards de plano terminam no botão e o "Inclui"
   vira uma tabela única abaixo dos três (assets/js/comparativo.js).
   ============================================================ */
.pastas--cursos.pastas--sem-comp{ --linhas:5; }
.pastas--sem-comp .pasta > .comp{ display:none; }
.pastas--sem-comp .pasta > .pasta__acoes{ margin-top:clamp(18px, 1.8vw, 24px); align-self:end; }

/* comparativo (04/11): nas mesmas colunas dos planos. O script copia as
   colunas, o vão e a largura da grade dos planos para --compara-cols e
   --compara-vao; sem eles (planos empilhados), três colunas iguais. */
.compara{ margin-top:clamp(28px, 3vw, 44px); font-family:var(--familia-texto); max-width:100%; }
.compara__t{ margin:0 0 var(--esp-3); font:var(--tipo-meta, 500 var(--tam-13)/1.3 "Onest", sans-serif); color:var(--cor-texto-suave, var(--ink-7)); }
.compara__grade{ display:grid; }
.compara__cab, .compara__linha{ display:grid; grid-template-columns:var(--compara-cols, repeat(3, minmax(0, 1fr))); column-gap:var(--compara-vao, 12px); }
.compara__cab{ position:sticky; top:var(--topo, 76px); z-index:2; background:var(--ink-0); padding-top:var(--esp-2); }
.compara__cab .compara__col{ display:grid; place-items:center; padding:var(--esp-4) var(--esp-2); border-radius:var(--raio-m) var(--raio-m) 0 0; background:color-mix(in srgb, var(--branco) 3%, transparent); }
.compara__cab .compara__col.is-destaque{ background:var(--cor-acao-suave); box-shadow:inset 0 2px 0 var(--sunset-500, var(--sunset-500)); }
.compara__linha{ border-top:1px solid var(--cor-vidro); }
.compara__item{ grid-column:1 / -1; padding:var(--esp-3) 0 var(--esp-1); font-size:var(--tam-15); line-height:1.4; color:var(--cor-texto-corpo, var(--agua)); }
.compara__linha .compara__col{ display:grid; place-items:center; padding:var(--esp-1) 0 var(--esp-3); }
.compara__linha .compara__col.is-destaque{ background:color-mix(in srgb, var(--sunset-500) 6%, transparent); }
.compara__linha:last-child .compara__col{ border-radius:0 0 var(--raio-m) var(--raio-m); }
.compara__nome{ font-family:var(--familia-marca); font-size:clamp(var(--tam-17), 1.5vw, var(--tam-20)); letter-spacing:-.03em; color:var(--branco); white-space:nowrap; }
.compara__nome .hotnome i{ letter-spacing:-.02em; padding-right:.04em; }
.compara__sim{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--cor-vidro); }
.compara__sim svg{ width:14px; height:14px; fill:none; stroke:var(--branco); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.is-destaque .compara__sim{ background:var(--sunset-500, var(--sunset-500)); }
.is-destaque .compara__sim svg{ stroke:var(--ink-0); }
.compara__nao{ display:inline-block; width:12px; height:1.5px; border-radius:var(--raio-fio); background:color-mix(in srgb, var(--branco) 18%, transparent); vertical-align:middle; }
@media (max-width: 640px){
  .compara__item{ font-size:var(--tam-14); }
  .compara__nome{ font-size:var(--tam-15); }
  .compara__nome .hotnome{ display:inline-flex; flex-direction:column; line-height:.95; align-items:center; }
}

/* painel único (Hot Pack): no mesmo padrão dos cursos, o botão fica no card
   de cima e o "Inclui" vira um bloco à parte embaixo, em outro tom */
.pastas--um .pasta{ --pb:clamp(24px, 2.2vw, 34px); padding-bottom:var(--pb); }
.pastas--um .pasta > .pasta__acoes{ margin-top:clamp(18px, 1.8vw, 24px); }
.pastas--um .pasta > .comp{
  order:1;
  margin:clamp(22px, 2.2vw, 30px) calc(1px - var(--recuo-d, 28px)) calc(-1 * var(--pb)) calc(1px - var(--recuo-e, 28px));
  padding:clamp(20px, 2vw, 26px) calc(var(--recuo-d, 28px) - 1px) var(--pb) calc(var(--recuo-e, 28px) - 1px);
  border-top:1px solid var(--cor-vidro); border-radius:0 0 var(--raio-painel) var(--raio-painel);
  background:color-mix(in srgb, var(--branco) 3.5%, transparent);
}