/* Faísca: área de membros, no Padrão Xandim de Design, em tema laranja.
   Vidro sobre foto quente com grão, Poppins, tudo que se clica em cápsula,
   cartões de 22/18/14 px, alvo de 44 px, letra mínima de 13 px (exceto o nome do trilho, 11 px).
   Celular primeiro; tablet e computador são min-width. */

/* ── Tokens: claro (padrão) ────────────────────────────────────────────── */
:root {
  --xd-raio: 22px; --xd-raio-md: 18px; --xd-raio-sm: 14px;
  /* marca: laranja. Branco sobre a ação dá 5,2:1 no claro e 4,6:1 no escuro */
  --xd-acao: #b84a1e; --xd-acao-hover: #9c3d17; --xd-acao-texto: #fff;
  --xd-marca: #a8421a; --xd-marca-t: #8c3613; /* marca para TEXTO pequeno sobre vidro (>= 5,5:1) */
  --xd-texto: #2a1d16; --xd-texto-2: rgba(42, 29, 22, .82); --xd-texto-3: rgba(42, 29, 22, .7);
  --xd-vidro: rgba(255, 251, 246, .7); --xd-vidro-forte: rgba(255, 251, 246, .95); --xd-vidro-claro: rgba(255, 251, 246, .9);
  --xd-vidro-sutil: rgba(120, 55, 20, .06); --xd-vidro-hover: rgba(120, 55, 20, .1);
  --xd-borda: rgba(120, 55, 20, .16); --xd-borda-forte: rgba(120, 55, 20, .28);
  --xd-capsula: rgba(255, 250, 244, .74);
  --xd-veu: linear-gradient(180deg, rgba(247, 240, 232, .76) 0%, rgba(243, 232, 220, .9) 100%);
  --xd-cortina: rgba(42, 22, 10, .5);
  --xd-sombra: 0 24px 48px -30px rgba(120, 55, 20, .42);
  --xd-brilho-topo: inset 0 1px 0 rgba(255, 255, 255, .7);
  --xd-desfoque: blur(22px) saturate(140%);
  --xd-ok: #176b3a;
  --xd-erro: #a82a14;
  --xd-fundo: #f1e6da;
  --xd-dur: 380ms; --xd-curva: cubic-bezier(.22, 1, .36, 1);
  --xd-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.07'/%3E%3C/svg%3E");
  --w-painel: 26rem;
  --f: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
html { background-color: var(--xd-fundo); }
body { background: transparent; color: var(--xd-texto); font-family: var(--f); font-size: 1rem; font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }

/* fundo: foto quente já suave + véu + grão (cartões não usam backdrop-filter) */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before { z-index: -3; background: url("assets/fundo-quente.webp") center / cover no-repeat, linear-gradient(135deg, #f1e6da, #e9cdb4); }
body::after { z-index: -1; background-image: var(--xd-grao), var(--xd-veu); }

h1, h2, h3, p, ul, ol, dl { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-user-select: none; user-select: none; }
[hidden] { display: none !important; }
::selection { background: rgba(224, 107, 65, .32); }
* { scrollbar-width: thin; scrollbar-color: var(--xd-borda-forte) transparent; }
:focus-visible { outline: 2px solid var(--xd-marca); outline-offset: 2px; border-radius: 8px; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; background: var(--xd-vidro-sutil); border: 1px solid var(--xd-borda); padding: .08em .45em; border-radius: var(--xd-raio-sm); overflow-wrap: anywhere; }
.ic { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pula { min-height: 44px; display: inline-flex; align-items: center; position: absolute; left: -999px; top: 0; z-index: 100; background: var(--xd-acao); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--xd-raio-sm) 0; }
.pula:focus { left: 0; }
.sem-js { padding: 1rem; }

/* ── casca ─────────────────────────────────────────────────────────────── */
.app { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); position: relative; }
.conteudo { grid-row: 2; min-width: 0; overflow-y: auto; overscroll-behavior: none; scroll-behavior: smooth; outline: none; }
.miolo { width: min(100% - 2rem, 78rem); margin-inline: auto; padding: 1rem 0 0; min-height: 100%; display: flex; flex-direction: column; }

.icone { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid transparent; background: transparent; border-radius: 999px; color: var(--xd-texto); text-decoration: none; transition: background-color 160ms ease, transform 140ms ease; }
.icone:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) { .icone:hover { background: var(--xd-vidro-hover); } }

/* ── header: marca, seções e ações (no lugar da barra lateral) ───────────── */
.marca { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; min-height: 44px; min-width: 44px; }
.marca img { width: 32px; height: 32px; border-radius: 9px; }
.assina img { filter: invert(1); }
.topo { grid-row: 1; position: relative; z-index: 30; background: var(--xd-vidro-forte); -webkit-backdrop-filter: var(--xd-desfoque); backdrop-filter: var(--xd-desfoque); border-bottom: 1px solid var(--xd-borda-forte); padding-top: env(safe-area-inset-top); }
.topo-in { width: min(100% - 1.5rem, 78rem); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marca acoes" "nav nav"; align-items: center; column-gap: .5rem; padding-top: .35rem; }
.topo .marca { grid-area: marca; }
.topo-acoes { grid-area: acoes; display: flex; align-items: center; gap: .25rem; }
.topo-nav { grid-area: nav; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3rem; padding: .15rem 0 .6rem; }
.topo-nav a { display: grid; place-items: center; min-height: 44px; padding: 0 .4rem; border-radius: 999px; border: 1px solid transparent; text-decoration: none; font-weight: 500; font-size: .875rem; color: var(--xd-texto-2); white-space: nowrap; transition: background-color 160ms ease, color 160ms ease, transform 140ms ease; }
.topo-nav a:active { transform: scale(.98); }
.topo-nav a[aria-current="page"] { background: var(--xd-vidro-claro); color: var(--xd-texto); box-shadow: var(--xd-brilho-topo), inset 0 0 0 1px var(--xd-borda-forte); }
@media (hover: hover) and (pointer: fine) { .topo-nav a:hover { background: var(--xd-vidro-hover); color: var(--xd-texto); } }
.voltar { display: inline-flex; align-items: center; gap: .2rem; min-height: 44px; margin-left: -.25rem; padding-right: .75rem; color: var(--xd-marca-t); font-weight: 500; text-decoration: none; }
.voltar .ic { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) and (pointer: fine) { .voltar:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* ── botões: sempre cápsula, 44 px ─────────────────────────────────────── */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; font-weight: 500; font-size: .875rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color 160ms ease, transform 140ms ease; }
.botao small { font-weight: 400; font-size: .8125rem; }
.botao:active { transform: scale(.98); }
.botao-acao { background: var(--xd-acao); color: var(--xd-acao-texto); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 24px -12px var(--xd-acao); }
.botao-vidro { background: var(--xd-vidro-sutil); color: var(--xd-texto); border-color: var(--xd-borda-forte); }
@media (hover: hover) and (pointer: fine) { .botao-acao:hover { background: var(--xd-acao-hover); } .botao-vidro:hover { background: var(--xd-vidro-hover); } }

/* ── topo da tela: título em 2 linhas + 3 indicadores em pílula + ações ── */
.cab { display: grid; gap: .9rem; padding-bottom: 1rem; }
.cab-sobre { font-size: .875rem; font-weight: 500; color: var(--xd-texto-2); }
h1 { font-weight: 500; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.04; letter-spacing: -.025em; margin-top: .1rem; text-wrap: balance; }
.teto { color: var(--xd-texto-2); font-size: .875rem; line-height: 1.5; max-width: 66ch; margin-top: .6rem; }
.cab-acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.cab-acoes .botao { flex: 1 1 11rem; }

.resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.resumo li { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: .75rem; min-width: 0; background: var(--xd-vidro); border: 1px solid var(--xd-borda); border-radius: var(--xd-raio-md); box-shadow: var(--xd-brilho-topo); }
.kpi-ic { box-sizing: content-box; width: 1.1rem; height: 1.1rem; padding: .45rem; border-radius: 999px; background: var(--xd-vidro-sutil); border: 1px solid var(--xd-borda-forte); color: var(--xd-marca); }
.resumo div { min-width: 0; }
.resumo b { display: block; font-size: clamp(1.25rem, .85rem + 1.1vw, 1.875rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.resumo span { display: block; font-size: .8125rem; line-height: 1.3; color: var(--xd-texto-2); }

/* ── filtros ───────────────────────────────────────────────────────────── */
.filtros { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-items: end; padding: .85rem; background: var(--xd-vidro); border: 1px solid var(--xd-borda); border-radius: var(--xd-raio); box-shadow: var(--xd-brilho-topo), var(--xd-sombra); margin-bottom: .85rem; }
.campo { display: grid; gap: .3rem; min-width: 0; }
.campo-busca { grid-column: 1 / -1; }
.campo label { font-size: .8125rem; font-weight: 500; color: var(--xd-texto-2); padding-left: .85rem; }
input[type="search"], select { width: 100%; min-width: 0; min-height: 44px; padding: .5rem 1.1rem; font-size: 1rem; background-color: var(--xd-vidro-sutil); border: 1px solid var(--xd-borda-forte); border-radius: 999px; color: var(--xd-texto); appearance: none; -webkit-appearance: none; transition: border-color 160ms ease, background-color 160ms ease; }
input[type="search"] { padding-left: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a58' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: .9rem 50%; background-size: 1.15rem; }
select { padding-right: 2.4rem; background-image: linear-gradient(45deg, transparent 50%, var(--xd-texto-2) 50%), linear-gradient(135deg, var(--xd-texto-2) 50%, transparent 50%); background-position: calc(100% - 1.3rem) 50%, calc(100% - .95rem) 50%; background-size: .35rem .35rem, .35rem .35rem; background-repeat: no-repeat; text-overflow: ellipsis; }
select option { background: var(--xd-fundo); color: var(--xd-texto); }
input[type="search"]::-webkit-search-cancel-button { appearance: none; }
input::placeholder { color: var(--xd-texto-3); }
input:focus-visible, select:focus-visible { outline: 2px solid var(--xd-marca); outline-offset: 1px; border-radius: 999px; }
.contagem { grid-column: 1 / -1; font-size: .8125rem; color: var(--xd-texto-2); padding-left: .85rem; }

/* ── lista: linhas dentro de um quadro, não cartões ────────────────────── */
.lista { container-type: inline-size; flex: 1; padding-bottom: 2rem; }
.grupo { margin-bottom: 1.5rem; content-visibility: auto; contain-intrinsic-size: auto 40rem; }
.quadro { background: var(--xd-vidro); border: 1px solid var(--xd-borda); border-radius: var(--xd-raio); box-shadow: var(--xd-brilho-topo), var(--xd-sombra); overflow: clip; margin-top: .75rem; }
.linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome baixar" "desc desc" "meta meta"; gap: .15rem .75rem; align-items: center; padding: .75rem 1rem; border-top: 1px solid var(--xd-borda); transition: background-color 160ms ease; cursor: pointer; }
.linha:first-child { border-top: 0; }
.linha[aria-current="true"] { background: var(--xd-vidro-claro); box-shadow: inset 3px 0 0 var(--xd-marca); }
@media (hover: hover) and (pointer: fine) { .linha:hover { background: var(--xd-vidro-hover); } }
.l-nome { grid-area: nome; text-align: left; min-height: 44px; padding: 0; background: transparent; border: 0; font-weight: 500; font-size: .9375rem; letter-spacing: -.01em; overflow-wrap: anywhere; display: flex; align-items: center; }
.l-nome:focus-visible { outline-offset: 0; }
.l-desc { grid-area: desc; color: var(--xd-texto-2); font-size: .875rem; line-height: 1.5; }
.l-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-top: .25rem; }
.l-orig { font-size: .8125rem; color: var(--xd-texto-2); overflow-wrap: anywhere; }
.chip { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 .75rem; border: 1px solid var(--xd-borda-forte); border-radius: 999px; font-size: .8125rem; font-weight: 500; color: var(--xd-texto-2); white-space: nowrap; background: var(--xd-vidro-sutil); }
.chip-autoral { color: var(--xd-marca-t); border-color: var(--xd-marca); }
.l-baixar { grid-area: baixar; padding: 0 .95rem; }

@container (min-width: 36rem) {
  .linha { grid-template-columns: minmax(9rem, .9fr) minmax(0, 2.4fr) auto; grid-template-areas: "nome desc baixar" "nome meta baixar"; gap: .1rem 1rem; }
}
@container (min-width: 62rem) {
  .linha { grid-template-columns: minmax(10rem, 1fr) minmax(0, 2.6fr) minmax(8rem, 1.4fr) 6.5rem 7.5rem; grid-template-areas: "nome desc orig lic baixar"; align-items: center; }
  .l-meta { display: contents; }
  .l-orig { grid-area: orig; }
  .l-meta .chip { grid-area: lic; justify-self: start; }
}

/* ── capa de cada categoria: degradê da marca (sem foto ainda), nunca caixa vazia ── */
.capa { --c1: #c8581f; --c2: #6a2c12; position: relative; isolation: isolate; overflow: clip; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .9rem 1.1rem; min-height: 6.5rem; color: #fff; border-radius: var(--xd-raio); border: 1px solid var(--xd-borda-forte); box-shadow: var(--xd-brilho-topo), var(--xd-sombra); background: radial-gradient(120% 160% at 100% 0%, rgba(255, 255, 255, .16) 0%, transparent 55%), var(--foto-p, none) right center / cover no-repeat, linear-gradient(120deg, var(--c1) 0%, var(--c2) 100%); }
.capa::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--xd-grao), linear-gradient(90deg, rgba(42, 20, 10, .95) 0, rgba(42, 20, 10, .92) 22rem, rgba(42, 20, 10, .1) 46rem, transparent 100%); }
@media (max-width: 40rem) { .capa::before { background-image: var(--xd-grao), linear-gradient(90deg, rgba(42, 20, 10, .9) 0%, rgba(42, 20, 10, .8) 100%); } }
.capa-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32); }
.capa-txt { flex: 0 1 auto; min-width: 0; max-width: 22rem; }
.capa-abrir { margin-inline-start: auto; }
.capa h2 { font-size: 1.0625rem; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.capa p { font-size: .8125rem; color: rgba(255, 255, 255, .92); font-variant-numeric: tabular-nums; }
.capa-abrir { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; background: rgba(42, 20, 10, .78); border: 1px solid rgba(255, 255, 255, .42); color: #fff; font-size: .875rem; font-weight: 500; text-decoration: none; transition: background-color 160ms ease, transform 140ms ease; }
.capa-abrir:active { transform: scale(.98); }
.capa-abrir:focus-visible { outline-color: #fff; }
@media (hover: hover) and (pointer: fine) { .capa-abrir:hover { background: rgba(42, 20, 10, .92); } }
.capa[data-cat="pesquisa-ux-e-produto"] { --c1: #c8581f; --c2: #6a2c12; --foto-p: url("assets/laranja/p/pesquisa-ux-e-produto.webp"); --foto-g: url("assets/laranja/pesquisa-ux-e-produto.webp") }
.capa[data-cat="seo-e-geo"] { --c1: #b84a1e; --c2: #5a2310; --foto-p: url("assets/laranja/p/seo-e-geo.webp"); --foto-g: url("assets/laranja/seo-e-geo.webp") }
.capa[data-cat="design-de-interface-marca-e-slides"] { --c1: #d27a2c; --c2: #7a3c14; --foto-p: url("assets/laranja/p/design-de-interface-marca-e-slides.webp"); --foto-g: url("assets/laranja/design-de-interface-marca-e-slides.webp") }
.capa[data-cat="codigo-e-processo-de-trabalho"] { --c1: #a8421a; --c2: #4f2010; --foto-p: url("assets/laranja/p/codigo-e-processo-de-trabalho.webp"); --foto-g: url("assets/laranja/codigo-e-processo-de-trabalho.webp") }
.capa[data-cat="animacao-e-3d"] { --c1: #d9822b; --c2: #8a4515; --foto-p: url("assets/laranja/p/animacao-e-3d.webp"); --foto-g: url("assets/laranja/animacao-e-3d.webp") }
.capa[data-cat="editar-produzir-video"] { --c1: #c4511c; --c2: #6b2410; --foto-p: url("assets/laranja/p/editar-produzir-video.webp"); --foto-g: url("assets/laranja/editar-produzir-video.webp") }
.capa[data-cat="nuvem-e-backend"] { --c1: #b8651f; --c2: #613510; --foto-p: url("assets/laranja/p/nuvem-e-backend.webp"); --foto-g: url("assets/laranja/nuvem-e-backend.webp") }
.capa[data-cat="documentos-e-texto"] { --c1: #a85a2a; --c2: #55301a; --foto-p: url("assets/laranja/p/documentos-e-texto.webp"); --foto-g: url("assets/laranja/documentos-e-texto.webp") }
.capa[data-cat="automacao-e-navegador"] { --c1: #cf6a24; --c2: #74361a; --foto-p: url("assets/laranja/p/automacao-e-navegador.webp"); --foto-g: url("assets/laranja/automacao-e-navegador.webp") }
.capa[data-cat="app-de-celular-e-app-store"] { --c1: #bf4a26; --c2: #62240f; --foto-p: url("assets/laranja/p/app-de-celular-e-app-store.webp"); --foto-g: url("assets/laranja/app-de-celular-e-app-store.webp") }
@media (min-width: 40.0625rem) { .capa[data-cat] { background-position: 0 0, right 34%, 0 0; background-image: radial-gradient(120% 160% at 100% 0%, rgba(255, 255, 255, .16) 0%, transparent 55%), var(--foto-g, none), linear-gradient(120deg, var(--c1) 0%, var(--c2) 100%); } }

/* ── estado vazio: cena + o que fazer ──────────────────────────────────── */
.vazio { text-align: center; padding: 2.5rem 1.25rem; display: grid; justify-items: center; gap: .7rem; color: var(--xd-texto-2); background: var(--xd-vidro); border: 1px solid var(--xd-borda); border-radius: var(--xd-raio); box-shadow: var(--xd-brilho-topo), var(--xd-sombra); }
.vazio-cena { position: relative; display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 999px; color: #fff; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .28), transparent 55%), linear-gradient(135deg, #c8581f, #6a2c12); box-shadow: 0 0 0 10px var(--xd-vidro-sutil), 0 0 0 22px var(--xd-vidro-sutil); margin-bottom: 1rem; }
.vazio-cena .ic { width: 2.5rem; height: 2.5rem; }
.vazio h2 { color: var(--xd-texto); font-size: clamp(1.25rem, 1.02rem + .9vw, 1.75rem); font-weight: 500; letter-spacing: -.02em; }
.vazio p { font-size: .9375rem; max-width: 40ch; }
.vazio .botao { margin-top: .4rem; }

.rodape { margin-top: auto; border-top: 1px solid var(--xd-borda); padding: 1rem 0 calc(1.25rem + env(safe-area-inset-bottom)); color: var(--xd-texto-2); font-size: .8125rem; display: grid; gap: .1rem; }
.rodape a { color: var(--xd-texto); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.assina { display: flex; align-items: center; gap: .5rem; }
.assina img { width: 20px; height: 20px; }

/* ── painel de detalhes ────────────────────────────────────────────────── */
.painel { position: fixed; z-index: 45; inset: 0 0 0 auto; width: min(var(--w-painel), 100%); background: var(--xd-vidro-forte); -webkit-backdrop-filter: var(--xd-desfoque); backdrop-filter: var(--xd-desfoque); border-left: 1px solid var(--xd-borda-forte); overflow-y: auto; overscroll-behavior: none; transform: translateX(102%); visibility: hidden; transition: transform .3s var(--xd-curva), visibility 0s .3s; padding-top: env(safe-area-inset-top); }
.painel.aberto { transform: none; visibility: visible; transition: transform .3s var(--xd-curva); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.painel-miolo { padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); display: grid; gap: 1.1rem; align-content: start; }
.p-topo { display: flex; align-items: start; justify-content: space-between; gap: .5rem; }
.p-nome { font-weight: 500; font-size: 1.5rem; line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; }
.p-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
#p-fechar { background: var(--xd-vidro-sutil); border-color: var(--xd-borda-forte); }
.p-sec h3 { font-size: .8125rem; font-weight: 500; letter-spacing: .02em; color: var(--xd-texto-2); margin-bottom: .45rem; }
.p-desc { font-size: .9375rem; }
.p-dl { display: grid; gap: .55rem; }
.p-dl div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; align-items: baseline; border-top: 1px solid var(--xd-borda); padding-top: .55rem; }
.p-dl dt { font-size: .8125rem; color: var(--xd-texto-2); }
.p-dl dd { margin: 0; overflow-wrap: anywhere; font-size: .875rem; }
.p-dl a { color: var(--xd-marca); text-underline-offset: 3px; display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; }
.p-pasta { display: flex; flex-wrap: wrap; gap: .35rem; }
.p-pasta code { font-size: .8125rem; }
.p-cmd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; background: var(--xd-vidro-sutil); border: 1px solid var(--xd-borda-forte); border-radius: var(--xd-raio-md); padding: .35rem .35rem .35rem .9rem; }
.p-cmd code { background: transparent; border: 0; padding: 0; font-size: .8125rem; }
.p-cmd .icone { background: var(--xd-vidro-sutil); border-color: var(--xd-borda-forte); }
.p-nota { font-size: .8125rem; color: var(--xd-texto-2); margin-top: .45rem; }
.p-baixar { width: 100%; min-height: 52px; font-size: 1rem; }
.p-estado { color: var(--xd-ok); font-size: .8125rem; font-weight: 500; min-height: 1.2em; }

.veu { position: fixed; inset: 0; z-index: 38; background: var(--xd-cortina); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ── janela ────────────────────────────────────────────────────────────── */
dialog { width: min(100% - 1.5rem, 34rem); max-height: calc(100dvh - 1.5rem); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--xd-borda-forte); border-radius: var(--xd-raio); background: var(--xd-vidro-forte); -webkit-backdrop-filter: var(--xd-desfoque); backdrop-filter: var(--xd-desfoque); color: var(--xd-texto); padding: 1.35rem; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
dialog::backdrop { background: var(--xd-cortina); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog[open] { animation: xd-janela .35s var(--xd-curva); }
@keyframes xd-janela { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
.dlg-fechar { position: absolute; top: .6rem; right: .6rem; background: var(--xd-vidro-sutil); border-color: var(--xd-borda-forte); }
dialog h2 { font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; padding-right: 3rem; margin-bottom: 1rem; }
.passos { display: grid; gap: .8rem; counter-reset: p; font-size: .9375rem; }
.passos li { counter-increment: p; position: relative; min-height: 2rem; padding-inline-start: 2.75rem; line-height: 1.6; overflow-wrap: anywhere; }
.passos li::before { content: counter(p); position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; background: var(--xd-vidro-claro); border: 1px solid var(--xd-borda-forte); color: var(--xd-marca); font-weight: 600; }
.aviso { margin-top: 1.1rem; font-size: .8125rem; line-height: 1.5; color: var(--xd-texto-2); border: 1px dashed var(--xd-borda-forte); border-radius: var(--xd-raio-sm); background: var(--xd-vidro-sutil); padding: .75rem .9rem; }

/* ── tablet e computador ──────────────────────────────────────────────── */
@media (min-width: 48rem) {
  .topo-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "marca nav acoes"; min-height: 4rem; column-gap: 1.25rem; padding-top: 0; }
  .topo-nav { display: flex; gap: .25rem; padding: 0; }
  .topo-nav a { padding: 0 1rem; }
      .miolo { width: min(100% - 3rem, 78rem); padding-top: 1.5rem; }
  .cab-acoes .botao { flex: 0 0 auto; }
  .filtros { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .campo-busca { grid-column: auto; }
  .contagem { grid-column: 1 / -1; }
  .resumo { grid-template-columns: repeat(3, auto); justify-content: start; gap: .75rem; }
  .resumo li { flex-direction: row; align-items: center; gap: .75rem; padding: .5rem 1.4rem .5rem .5rem; border-radius: 999px; }
  .kpi-ic { width: 1.4rem; height: 1.4rem; padding: .6rem; }
  .resumo span { font-size: .875rem; }
}
@media (min-width: 64rem) { .cab { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem; } }

/* ── tela larga: o painel de detalhes entra ao lado da lista, que continua à vista ── */
@media (min-width: 80rem) {
  .app.painel-aberto { grid-template-columns: minmax(0, 1fr) var(--w-painel); }
  .app.painel-aberto .topo { grid-column: 1 / -1; }
  .app.painel-aberto .topo-in { width: calc(100% - 3rem); max-width: none; }
  .app.painel-aberto .conteudo { grid-column: 1; }
  .app.painel-aberto .painel { position: static; grid-column: 2; grid-row: 2; transform: none; visibility: visible; box-shadow: none; width: auto; transition: none; }
  .app .painel { display: none; }
  .app.painel-aberto .painel { display: block; }
  .veu.so-painel { display: none !important; }
}

/* ── início: banner da comunidade e módulos de skills ──────────────────── */
.inicio { display: grid; gap: 1.25rem; padding-bottom: 1.5rem; }
.comunidade { --papel: #f9dbba; position: relative; isolation: isolate; overflow: clip; display: grid; background: var(--papel); border: 1px solid var(--xd-borda-forte); border-radius: var(--xd-raio); box-shadow: var(--xd-sombra); color: #2a1d16; }
.com-arte { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 100% 50%; }
.com-txt { display: grid; gap: .55rem; justify-items: start; padding: 1rem 1.1rem 1.2rem; }
.com-selo { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0 .75rem; border-radius: 999px; background: rgba(120, 55, 20, .1); border: 1px solid rgba(120, 55, 20, .24); color: #7a2f10; font-size: .8125rem; font-weight: 500; }
.comunidade h2 { font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem); font-weight: 500; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.comunidade p { font-size: .9375rem; line-height: 1.5; color: rgba(42, 29, 22, .86); max-width: 38ch; }
.comunidade .botao { margin-top: .25rem; }
@media (min-width: 48rem) {
  .comunidade { min-height: clamp(15rem, 31vw, 26rem); align-items: center; }
  .com-arte { position: absolute; z-index: -1; top: 0; right: 0; width: 64%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 100% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%); }
  .com-txt { max-width: 46%; padding: 1.5rem 1.5rem 1.5rem 2rem; }
}
.modulos-cab { display: grid; gap: .15rem; }
.modulos-cab h2 { font-size: 1.1875rem; font-weight: 500; letter-spacing: -.015em; }
.modulos-cab p { font-size: .875rem; color: var(--xd-texto-2); }
.modulos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.modulo { display: grid; grid-template-rows: auto 1fr auto; height: 100%; overflow: clip; text-decoration: none; background: var(--xd-vidro-forte); border: 1px solid var(--xd-borda-forte); border-radius: var(--xd-raio-md); box-shadow: var(--xd-brilho-topo); transition: transform 200ms var(--xd-curva), background-color 160ms ease; }
.modulo:active { transform: scale(.98); }
.mod-capa { position: relative; display: block; aspect-ratio: 16 / 9; background: #c8581f; }
.mod-capa img { width: 100%; height: 100%; object-fit: cover; }
.mod-ic { position: absolute; left: .5rem; bottom: .5rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; background: rgba(42, 20, 10, .66); border: 1px solid rgba(255, 255, 255, .38); color: #fff; }
.mod-nome { padding: .65rem .75rem 0; font-size: .875rem; font-weight: 500; line-height: 1.25; letter-spacing: -.005em; text-wrap: balance; overflow-wrap: anywhere; }
.mod-n { padding: .15rem .75rem .75rem; font-size: .8125rem; color: var(--xd-texto-2); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .modulo:hover { transform: translateY(-3px); background: var(--xd-vidro-claro); } }
@media (min-width: 64rem) { .modulos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; } }

.linha-mais { border-top: 1px solid var(--xd-borda); }
.linha-mais a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1rem; font-weight: 500; font-size: .875rem; color: var(--xd-marca); text-underline-offset: 3px; transition: background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .linha-mais a:hover { background: var(--xd-vidro-hover); } }
.mais-caixa { display: grid; justify-items: center; padding: 1rem 0 .5rem; }
.mais-caixa .botao { min-width: min(100%, 18rem); }

/* ── admin: leads e compradores ─────────────────────────────────────────── */
.admin { display: grid; gap: 1rem; padding-bottom: 1.5rem; }
.adm-funil { font-size: .875rem; line-height: 1.5; color: var(--xd-texto-2); max-width: 70ch; }
.adm-bloco h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; font-size: 1.1875rem; font-weight: 500; letter-spacing: -.015em; }
.adm-bloco h2 small { font-size: .8125rem; font-weight: 400; color: var(--xd-texto-2); letter-spacing: 0; }
.adm-nome { font-weight: 500; }
.adm-linha .l-baixar { padding: 0 1rem; white-space: nowrap; }
.adm-vazio { grid-template-columns: minmax(0, 1fr); grid-template-areas: "desc"; }
@media (min-width: 48rem) {
  .adm-linha { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "nome desc meta baixar"; gap: .75rem 1rem; }
  .adm-linha .l-meta { margin-top: 0; }
}

/* ── movimento: só transform e opacity (e um desfoque curto na troca de tela) ── */
@keyframes xd-entrar { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes xd-entrar-leve { from { opacity: 0; } to { opacity: 1; } }
@keyframes xd-subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .miolo.troca { animation: xd-entrar var(--xd-dur) var(--xd-curva) both; }
  .troca .cab, .troca .resumo li, .troca .filtros, .troca .capa, .troca .vazio, .troca .quadro > li, .troca .comunidade, .troca .modulos-cab, .troca .modulos > li, .troca .adm-bloco { animation: xd-subir 420ms var(--xd-curva) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .troca .resumo li:nth-child(1) { --i: 1; } .troca .resumo li:nth-child(2) { --i: 2; } .troca .resumo li:nth-child(3) { --i: 3; }
  .troca .filtros { --i: 2; } .troca .capa { --i: 3; } .troca .vazio { --i: 3; }
  .troca .comunidade { --i: 2; } .troca .modulos-cab { --i: 3; } .troca .modulos > li:nth-child(odd) { --i: 4; } .troca .modulos > li:nth-child(even) { --i: 5; }
  .troca .quadro > li:nth-child(1) { --i: 4; } .troca .quadro > li:nth-child(2) { --i: 5; } .troca .quadro > li:nth-child(3) { --i: 6; }
  .troca .quadro > li:nth-child(4) { --i: 7; } .troca .quadro > li:nth-child(5) { --i: 8; } .troca .quadro > li:nth-child(n+6) { --i: 9; }
}
@media (prefers-reduced-motion: reduce) {
  .conteudo { scroll-behavior: auto; }
  .painel, .app { transition: none !important; }
  dialog[open] { animation: none; }
  .miolo.troca { animation: xd-entrar-leve 160ms ease-out both; }
}

/* ═══ Porta de entrada (login por e-mail) ═══════════════════════════════════
   Cena da marca em 100% da tela, formulário em cartão por cima. É sempre clara e não oferece troca de tema:
   os tokens abaixo valem só aqui dentro. Movimento contínuo só com transform e opacity. */
.pula { z-index: 100; }
.acesso:not([hidden]) ~ .pula { display: none; }
.acesso {
  --xd-acao: #b84a1e; --xd-acao-hover: #9c3d17; --xd-marca: #a8421a; --xd-marca-t: #8c3613;
  --xd-texto: #2a1d16; --xd-texto-2: rgba(42, 29, 22, .82); --xd-texto-3: rgba(42, 29, 22, .7);
  --xd-vidro-forte: rgba(255, 251, 246, .94); --xd-vidro-sutil: rgba(120, 55, 20, .06); --xd-vidro-hover: rgba(120, 55, 20, .1);
  --xd-borda: rgba(120, 55, 20, .16); --xd-borda-forte: rgba(120, 55, 20, .28);
  --xd-erro: #a82a14; --xd-fundo: #f1e6da; --papel: #efe4d2;
  color-scheme: light; color: var(--xd-texto);
  position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: none; isolation: isolate;
  background: var(--papel);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; align-items: start;
  padding: env(safe-area-inset-top) max(1rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(1rem, env(safe-area-inset-left));
}
.ac-cena { position: absolute; inset: 0 0 auto 0; height: 58%; min-height: 15rem; z-index: -1; overflow: clip; background: var(--papel); pointer-events: none; }
.ac-cena img { width: 100%; height: 100%; object-fit: cover; object-position: 82% 50%; transform-origin: 80% 55%;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%); }
.ac-fa { position: absolute; width: 1rem; height: 1rem; background: #fff; opacity: .85; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.ac-fa.a { left: 62%; top: 18%; } .ac-fa.b { left: 84%; top: 34%; width: .7rem; height: .7rem; } .ac-fa.c { left: 72%; top: 8%; width: .6rem; height: .6rem; }
.ac-topo { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 4rem; padding-top: .5rem; }
.ac-topo .marca { font-size: 1.125rem; background: rgba(255, 251, 246, .95); border: 1px solid var(--xd-borda); padding: 0 1rem 0 .5rem; border-radius: 999px; }
.ac-ver { background: rgba(255, 251, 246, .95); font-size: .8125rem; padding: 0 .9rem; text-align: center; line-height: 1.2; }
.ac-ver b { font-weight: 600; color: var(--xd-marca); }
.ac-cartao { align-self: end; justify-self: center; width: min(100%, 26rem); display: grid; gap: .8rem; margin-top: 1rem; padding: 1.1rem 1.1rem 1.2rem; background: var(--xd-vidro-forte); border: 1px solid var(--xd-borda-forte); border-radius: var(--xd-raio); box-shadow: var(--xd-brilho-topo), 0 30px 60px -34px rgba(120, 55, 20, .6); }
.ac-passo { display: grid; gap: .8rem; }
.ac-passo[hidden], .ac-carregando[hidden] { display: none; }
.ac-cartao h1 { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.ac-apoio { color: var(--xd-texto-2); font-size: .875rem; line-height: 1.45; max-width: 44ch; }
.ac-cartao .campo label { font-size: .8125rem; }
.ac-cartao input { width: 100%; min-width: 0; min-height: 48px; padding: .5rem 1.1rem; font-size: 1rem; background-color: rgba(255, 255, 255, .7); border: 1px solid var(--xd-borda-forte); border-radius: 999px; color: var(--xd-texto); appearance: none; -webkit-appearance: none; }
.ac-cartao input:focus-visible { outline: 2px solid var(--xd-marca); outline-offset: 1px; border-radius: 999px; }
.ac-cartao input[aria-invalid="true"] { border-color: var(--xd-erro); box-shadow: 0 0 0 1px var(--xd-erro); }
.ac-cartao input::placeholder { color: var(--xd-texto-3); }
.ac-codigo { text-align: center; font-size: 1.5rem; font-weight: 500; letter-spacing: .5em; text-indent: .5em; font-variant-numeric: tabular-nums; }
.ac-codigo::placeholder { letter-spacing: .5em; }
.ac-erro { display: flex; align-items: flex-start; gap: .55rem; padding: .6rem .8rem; border: 1px solid var(--xd-erro); border-radius: var(--xd-raio-sm); background: rgba(168, 42, 20, .09); color: var(--xd-texto); font-size: .875rem; line-height: 1.4; }
.ac-erro[hidden] { display: none; }
.ac-erro .ic { color: var(--xd-erro); margin-top: .1rem; }
.ac-dev { font-size: .8125rem; color: var(--xd-texto-2); border: 1px dashed var(--xd-borda-forte); border-radius: var(--xd-raio-sm); background: var(--xd-vidro-sutil); padding: .5rem .8rem; }
.ac-enviar { min-height: 52px; font-size: 1rem; width: 100%; }
.ac-par { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .5rem; }
.ac-par .botao { padding: 0 .6rem; }
.ac-par .botao:disabled, .ac-enviar:disabled { opacity: 1; cursor: default; }
.ac-par .botao:disabled { color: var(--xd-texto-2); background: transparent; border-style: dashed; }
.ac-enviar[aria-busy="true"] { cursor: progress; }
.ac-carregando { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 6rem; color: var(--xd-texto-2); font-size: .9375rem; }
.gira { display: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; flex: none; }
.ac-carregando .gira, [aria-busy="true"] > .gira { display: inline-block; }
.ac-rodape { display: grid; justify-items: center; gap: .1rem; padding: .6rem 0 1rem; color: var(--xd-texto-2); font-size: .8125rem; text-align: center; }
.ac-rodape p { margin: 0; }
.ac-rodape a { color: var(--xd-texto); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.ac-rodape .assina { justify-content: center; }
.acesso .assina img { filter: invert(1); }

/* tablet e computador: a cena cobre a tela toda e o cartão senta na faixa calma da esquerda */
@media (min-width: 64rem) {
  .acesso { grid-template-columns: minmax(0, 1fr); padding-inline: max(4rem, env(safe-area-inset-left)); }
  .ac-cena { inset: 0; height: auto; min-height: 0; }
  .ac-cena img { object-position: 78% 50%; -webkit-mask-image: none; mask-image: none; }
  .ac-cena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(244, 237, 227, .94) 0, rgba(244, 237, 227, .94) 30%, rgba(244, 237, 227, 0) 62%); }
  .ac-fa.a { left: 66%; top: 12%; } .ac-fa.b { left: 90%; top: 30%; } .ac-fa.c { left: 80%; top: 6%; }
  .ac-topo { padding-top: 1rem; }
  .ac-cartao { justify-self: start; align-self: center; width: min(100%, 26rem); margin: 0; padding: 1.5rem; gap: 1rem; }
  .ac-rodape { justify-items: start; text-align: left; padding-bottom: 1.25rem; }
}
@media (min-width: 40rem) and (max-width: 63.99rem) { .ac-cartao { width: min(100%, 28rem); } .ac-cena { height: 56%; } }

@media (prefers-reduced-motion: no-preference) {
  .ac-cena img { animation: ac-zoom 26s ease-in-out infinite alternate; will-change: transform; }
  .ac-fa { animation: ac-fagulha 6s ease-in-out infinite alternate; will-change: transform, opacity; }
  .ac-fa.b { animation-duration: 8s; animation-delay: -2s; } .ac-fa.c { animation-duration: 7s; animation-delay: -4s; }
  .ac-passo { animation: xd-subir 420ms var(--xd-curva) both; }
  .gira { animation: ac-gira .8s linear infinite; }
  @keyframes ac-zoom { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); } }
  @keyframes ac-fagulha { from { transform: translate3d(0, 0, 0) rotate(0deg) scale(.8); opacity: .35; } to { transform: translate3d(-10px, 14px, 0) rotate(40deg) scale(1.15); opacity: .95; } }
  @keyframes ac-gira { to { transform: rotate(360deg); } }
}