/* ============================================================
   skills-loja.css: catálogo /skills e páginas de venda /skills/<slug>.
   Namespace `skl-` (docs/css-namespaces.md). Direção 01 do site adaptada
   à marca: docs/design-direction.md, seção "Loja de skills".
   Carrega POR CIMA de style.css (o header e o footer são do site).

   Raízes deste arquivo:
     skl-page      skl-wrap      skl-kicker    skl-h2       skl-btn
     skl-hero      skl-chips     skl-catalogo  skl-ficha    skl-gratis
     skl-como      skl-cena      skl-conta     skl-oferta   skl-autor
     skl-trilha    skl-faq       skl-fecho
     skl-shero     skl-dor       skl-passos    skl-antes    skl-limite   skl-recebe
     skl-caminhos  skl-outras    skl-saida     skl-migalha
     skl-skip      skl-sr        skl-topo      skl-rodape
   ============================================================ */

@font-face{font-family:'Bebas Neue';src:url('/fonts/bebasneue-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bebas Neue';src:url('/fonts/bebasneue-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';src:url('/fonts/manrope-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';src:url('/fonts/manrope-latin-ext.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibmplexmono-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/ibmplexmono-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ---------- tokens da página ---------- */
.skl-page {
    --skl-bg: #07090a;
    --skl-surface: #0a0d0f;
    --skl-surface-2: #0e1215;
    --skl-ink: #f2f4f5;
    --skl-ink-strong: #ffffff;
    --skl-muted: #a5adb5;
    --skl-line: rgba(255, 255, 255, .09);
    --skl-line-strong: rgba(255, 255, 255, .16);
    --skl-accent: #1283c4;
    --skl-accent-hover: #1695d4;
    --skl-accent-ink: #65c7ff;
    --skl-accent-soft: rgba(18, 131, 196, .15);
    --skl-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
    --skl-body: 'Manrope', 'DM Sans', system-ui, sans-serif;
    --skl-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --skl-col: min(1180px, calc(100% - 40px));
    --skl-read: min(760px, calc(100% - 40px));
    --skl-sec: clamp(4rem, 8vw, 7rem);
    --skl-r-control: 2px;
    --skl-r-card: 8px;
    --skl-dur: .22s;
    --skl-ease: cubic-bezier(.2, .7, .2, 1);
    background: var(--skl-bg);
    color: var(--skl-ink);
    font-family: var(--skl-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.skl-page main { display: block; }
.skl-wrap { width: var(--skl-col); margin: 0 auto; }
.skl-wrap.is-read { width: var(--skl-read); }

/* ---------- peças compartilhadas ---------- */
.skl-kicker {
    display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
    color: var(--skl-accent-ink); font-size: 12px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
}
.skl-kicker::before { content: ""; width: 22px; height: 1px; background: var(--skl-accent); }
.skl-h2 {
    margin: 0 0 18px; color: var(--skl-ink-strong);
    font: 400 clamp(2.3rem, 4.6vw, 3.9rem)/.92 var(--skl-display);
    letter-spacing: .015em; text-transform: uppercase; text-wrap: balance;
}
.skl-h2 em { font-style: normal; color: var(--skl-accent-ink); }
.skl-h2 + p { max-width: 620px; margin: 0; color: var(--skl-muted); font-size: 17px; line-height: 1.7; }
.skl-btn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
    min-height: 50px; padding: 0 22px; border: 1px solid var(--skl-accent);
    border-radius: var(--skl-r-control); background: var(--skl-accent); color: #04121c;
    font-family: var(--skl-body); font-size: 13px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; text-decoration: none; cursor: pointer;
    transition: background var(--skl-dur) var(--skl-ease), transform var(--skl-dur) var(--skl-ease), color var(--skl-dur) var(--skl-ease);
}
.skl-btn:hover { background: var(--skl-accent-hover); transform: translateY(-2px); }
.skl-btn svg { width: 18px; height: 18px; flex: none; }
.skl-btn.is-ghost { background: rgba(7, 9, 10, .55); color: var(--skl-ink); }
.skl-btn.is-ghost:hover { background: var(--skl-accent); color: #04121c; }
.skl-btn.is-wide { width: 100%; }
.skl-btn:focus-visible, .skl-ficha:focus-visible, .skl-chips a:focus-visible, .skl-faq summary:focus-visible {
    outline: 2px solid var(--skl-accent-ink); outline-offset: 3px;
}

/* ---------- hero do catálogo ---------- */
.skl-hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 132px 0 40px; min-height: 640px; display: flex; align-items: center;
    background: #050607;
}
.skl-hero-cover { position: absolute; inset: 0; z-index: 0; }
.skl-hero-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: saturate(1.05) contrast(1.03); }
/* Véu do texto, medido pela capa-hero: master 1920 com a coluna de 1180 centrada, copy até
   51% da largura e sujeito começando em 58%. O degradê horizontal morre DENTRO desse
   corredor; o vertical só fecha o rodapé da seção e não tem componente horizontal. */
.skl-hero-veu { position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 6, 7, .95) 0%, rgba(5, 6, 7, .93) 40%, rgba(5, 6, 7, .9) 51%, rgba(5, 6, 7, 0) 58%),
        linear-gradient(180deg, rgba(5, 6, 7, .5) 0%, rgba(5, 6, 7, 0) 26%, rgba(5, 6, 7, 0) 80%, var(--skl-bg) 100%); }
.skl-hero-grid {
    position: relative; z-index: 2; width: var(--skl-col); margin: 0 auto;
    display: grid; grid-template-columns: 1fr; gap: 40px;
}
.skl-hero-copy { max-width: 600px; }
.skl-hero-title {
    margin: 0; color: var(--skl-ink-strong);
    font: 400 clamp(3.2rem, 7vw, 6.1rem)/.86 var(--skl-display);
    letter-spacing: .012em; text-transform: uppercase; text-shadow: 0 6px 30px rgba(0, 0, 0, .6);
}
.skl-hero-title em { font-style: normal; color: var(--skl-accent-ink); }
.skl-hero-lead { max-width: 520px; margin: 22px 0 28px; color: var(--skl-ink); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.7; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.skl-hero-lead strong { color: var(--skl-ink-strong); }
.skl-hero-actions { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.skl-hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; align-self: end; }
.skl-hero-stat { padding-left: 14px; border-left: 1px solid var(--skl-line-strong); }
.skl-hero-stat strong { display: block; color: var(--skl-accent-ink); font: 400 clamp(2.2rem, 4vw, 3rem)/.9 var(--skl-display); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.skl-hero-stat span { display: block; margin-top: 8px; color: var(--skl-muted); font-size: 11px; line-height: 1.45; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- chips das áreas ---------- */
.skl-chips { position: relative; z-index: 3; margin-top: -1px; border-top: 1px solid var(--skl-line); border-bottom: 1px solid var(--skl-line); background: var(--skl-bg); }
.skl-chips ul { width: var(--skl-col); margin: 0 auto; padding: 0; list-style: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.skl-chips ul::-webkit-scrollbar { display: none; }
.skl-chips a { display: inline-flex; align-items: baseline; gap: 10px; padding: 16px 14px; color: var(--skl-muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--skl-dur) var(--skl-ease), border-color var(--skl-dur) var(--skl-ease); }
.skl-chips a b { font-family: var(--skl-mono); font-weight: 500; font-size: 12px; color: var(--skl-accent-ink); }
.skl-chips a:hover { color: var(--skl-ink-strong); border-color: var(--skl-accent); }

/* ---------- catálogo (uma seção, cinco áreas) ---------- */
.skl-catalogo { padding: var(--skl-sec) 0; }
.skl-catalogo-head { display: grid; gap: 14px; margin-bottom: 40px; }
.skl-catalogo-area { padding: 36px 0 14px; border-top: 1px solid var(--skl-line); scroll-margin-top: 96px; }
.skl-catalogo-area:first-of-type { border-top: 0; padding-top: 0; }
.skl-catalogo-area header { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-items: baseline; margin-bottom: 22px; }
.skl-catalogo-area header b { grid-row: span 2; align-self: start; font: 500 13px/1 var(--skl-mono); color: var(--skl-accent-ink); padding-top: 10px; }
.skl-catalogo-area header h3 { margin: 0; color: var(--skl-ink-strong); font: 400 clamp(1.7rem, 3vw, 2.5rem)/.95 var(--skl-display); letter-spacing: .015em; text-transform: uppercase; }
.skl-catalogo-area header p { margin: 0; max-width: 620px; color: var(--skl-muted); font-size: 15px; line-height: 1.65; }
.skl-catalogo-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* a ficha de skill: dispositivo assinatura da página. Cards soltos, com respiro e
   número de 01 a 25 na ordem do catálogo, para quem é leigo contar e se achar. */
.skl-ficha {
    position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px;
    min-height: 210px; padding: 20px 22px 18px; background: var(--skl-surface);
    border: 1px solid var(--skl-line-strong); border-radius: var(--skl-r-card);
    color: var(--skl-ink); text-decoration: none; overflow: hidden;
    transition: background var(--skl-dur) var(--skl-ease), border-color var(--skl-dur) var(--skl-ease), transform var(--skl-dur) var(--skl-ease);
}
.skl-ficha::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--skl-accent); opacity: .7; transition: opacity var(--skl-dur) var(--skl-ease); }
.skl-ficha:hover { background: var(--skl-surface-2); border-color: color-mix(in oklab, var(--skl-accent) 45%, transparent); transform: translateY(-2px); }
.skl-ficha:hover::before { opacity: 1; }
.skl-ficha-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.skl-ficha-num { flex: none; min-width: 44px; color: var(--skl-accent-ink); font: 400 2rem/1 var(--skl-display); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.skl-ficha-cmd { flex: 1; min-width: 0; font: 500 15px/1.25 var(--skl-mono); color: var(--skl-ink-strong); overflow-wrap: anywhere; }
.skl-ficha-cmd::before { content: "/"; color: var(--skl-accent-ink); margin-right: 1px; }
.skl-ficha-tier { flex: none; padding: 4px 8px; border: 1px solid var(--skl-line-strong); border-radius: 999px; font: 500 10px/1 var(--skl-mono); color: var(--skl-muted); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.skl-ficha.is-premium .skl-ficha-tier { border-color: color-mix(in oklab, var(--skl-accent) 55%, transparent); color: var(--skl-accent-ink); }
.skl-ficha-prompt { display: block; margin: 0; padding: 8px 10px; border-radius: 4px; background: rgba(255, 255, 255, .035); font: 400 12px/1.5 var(--skl-mono); color: var(--skl-muted); }
.skl-ficha-prompt::before { content: "> "; color: var(--skl-accent-ink); }
.skl-ficha-desc { display: block; margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--skl-ink); }
.skl-ficha-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--skl-line); font: 400 12px/1 var(--skl-mono); color: var(--skl-muted); }
.skl-ficha-foot strong { color: var(--skl-ink-strong); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.skl-ficha-foot span::after { content: " →"; color: var(--skl-accent-ink); }

/* a ficha do pack fecha o buraco da grade: o PHP calcula quantas células sobram em 3 e em
   2 colunas e põe a classe; em 1 coluna ela some porque não existe buraco */
.skl-ficha.is-pack { display: none; background: radial-gradient(circle at 90% 10%, color-mix(in oklab, var(--skl-accent) 20%, transparent), transparent 45%), var(--skl-surface-2); }
.skl-ficha.is-pack::before { opacity: 1; }
.skl-ficha.is-pack .skl-ficha-cmd::before { content: none; }
.skl-ficha.is-pack .skl-ficha-num { font-size: 1.5rem; }
.skl-ficha.is-pack .skl-ficha-desc strong { color: var(--skl-ink-strong); }
.skl-ficha.is-pack .skl-ficha-foot span::after { content: " →"; }

/* faixa das grátis (fecha a área de marketing) */
.skl-gratis { margin-top: 18px; padding: 18px 22px; border: 1px dashed var(--skl-line-strong); border-radius: var(--skl-r-card); display: grid; gap: 14px; }
.skl-gratis-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.skl-gratis-head h4 { margin: 0; color: var(--skl-ink-strong); font: 400 1.35rem/1 var(--skl-display); letter-spacing: .02em; text-transform: uppercase; }
.skl-gratis-head p { margin: 0; color: var(--skl-muted); font-size: 14px; }
.skl-gratis ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.skl-gratis li a { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--skl-line); color: var(--skl-ink); text-decoration: none; font-size: 14px; }
.skl-gratis li:first-child a { border-top: 0; }
.skl-gratis li a b { font: 500 13px/1.3 var(--skl-mono); color: var(--skl-ink-strong); }
.skl-gratis li a b::before { content: "/"; color: var(--skl-accent-ink); }
.skl-gratis li a span { color: var(--skl-muted); }
.skl-gratis li a em { font-style: normal; font: 400 11px/1 var(--skl-mono); color: var(--skl-accent-ink); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.skl-gratis li a:hover b { color: var(--skl-accent-ink); }

/* ---------- como funciona ---------- */
.skl-como { padding: var(--skl-sec) 0; background: var(--skl-surface); border-top: 1px solid var(--skl-line); border-bottom: 1px solid var(--skl-line); }
.skl-como-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.skl-como ol { margin: 0; padding: 0; list-style: none; counter-reset: skl-passo; display: grid; gap: 0; }
.skl-como li { counter-increment: skl-passo; position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--skl-line); }
.skl-como li:first-child { border-top: 0; padding-top: 0; }
.skl-como li::before { content: counter(skl-passo, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2; color: var(--skl-accent-ink); font: 400 2.4rem/.9 var(--skl-display); letter-spacing: .03em; }
.skl-como li h3, .skl-como li p { grid-column: 2; }
.skl-como li h3 { margin: 0 0 6px; color: var(--skl-ink-strong); font-size: 18px; font-weight: 800; }
.skl-como li p { margin: 0; color: var(--skl-muted); font-size: 15px; line-height: 1.65; }
.skl-como li code { font: 400 .92em var(--skl-mono); color: var(--skl-accent-ink); }

/* ---------- uma skill por dentro (cena com prints) ---------- */
.skl-cena { padding: var(--skl-sec) 0; }
.skl-cena-head { max-width: 680px; margin-bottom: 34px; }
.skl-cena-prints { display: grid; grid-template-columns: 1fr; gap: 14px; }
.skl-cena-print { position: relative; margin: 0; border-radius: var(--skl-r-card); overflow: hidden; outline: 1px solid rgba(255, 255, 255, .1); outline-offset: -1px; background: var(--skl-surface-2); }
.skl-cena-print img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.skl-cena-print figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; background: linear-gradient(180deg, transparent, rgba(5, 6, 7, .9)); font: 400 12px/1.4 var(--skl-mono); color: var(--skl-ink); }
.skl-cena-print figcaption b { color: var(--skl-accent-ink); font-weight: 500; }
.skl-cena-print:nth-child(2) { transform: translateY(0); }
.skl-cena-note { margin: 22px 0 0; color: var(--skl-muted); font-size: 14px; }

/* ---------- a conta ---------- */
.skl-conta { padding: var(--skl-sec) 0; background: var(--skl-surface); border-top: 1px solid var(--skl-line); border-bottom: 1px solid var(--skl-line); }
.skl-conta-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
.skl-conta ul { margin: 0; padding: 0; list-style: none; }
.skl-conta li { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--skl-line); }
.skl-conta li:first-child { border-top: 0; padding-top: 0; }
.skl-conta li p { margin: 0; color: var(--skl-ink); font-size: 15px; line-height: 1.5; }
.skl-conta li p span { display: block; color: var(--skl-muted); font-size: 13px; }
.skl-conta li strong { color: var(--skl-ink-strong); font: 400 1.7rem/1 var(--skl-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.skl-conta-total { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--skl-line-strong); display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline; }
.skl-conta-total p { margin: 0; color: var(--skl-muted); font-size: 14px; }
.skl-conta-total strong { color: var(--skl-accent-ink); font: 400 2.6rem/1 var(--skl-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.skl-conta-aside { align-self: center; }
.skl-conta-aside p { margin: 0 0 16px; color: var(--skl-muted); font-size: 15px; line-height: 1.7; }
.skl-conta-aside p strong { color: var(--skl-ink-strong); }

/* ---------- avulso contra pacotão ---------- */
.skl-oferta { position: relative; padding: var(--skl-sec) 0; overflow: hidden; }
.skl-oferta::before { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%; background: radial-gradient(ellipse at 60% 100%, var(--skl-accent-soft), transparent 60%); pointer-events: none; }
.skl-oferta-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 34px; align-items: stretch; }
.skl-oferta-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 18px; padding: 30px 26px; border: 1px solid var(--skl-line-strong); border-radius: var(--skl-r-card); background: var(--skl-surface); }
.skl-oferta-card.is-pacote { border-color: color-mix(in oklab, var(--skl-accent) 45%, transparent); background: radial-gradient(circle at 85% 8%, color-mix(in oklab, var(--skl-accent) 22%, transparent), transparent 44%), linear-gradient(160deg, color-mix(in oklab, var(--skl-surface) 90%, var(--skl-accent)), var(--skl-bg) 70%); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.skl-oferta-card.is-pacote::before { content: ""; display: block; height: 2px; margin: -30px -26px 0; background: linear-gradient(90deg, transparent, var(--skl-accent), transparent); }
.skl-oferta-label { margin: 0; color: var(--skl-accent-ink); font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.skl-oferta-preco { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.skl-oferta-preco strong { color: var(--skl-ink-strong); font: 400 clamp(3rem, 6vw, 4.6rem)/.86 var(--skl-display); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.skl-oferta-preco strong small { font-size: .4em; color: var(--skl-accent-ink); vertical-align: top; margin-right: 4px; }
.skl-oferta-preco s { color: var(--skl-muted); font-size: 14px; }
.skl-oferta-preco span { color: var(--skl-muted); font-size: 13px; }
.skl-oferta-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.skl-oferta-card li { position: relative; padding-left: 22px; color: var(--skl-ink); font-size: 14.5px; line-height: 1.55; }
.skl-oferta-card li::before { content: "↗"; position: absolute; left: 0; color: var(--skl-accent-ink); font-weight: 700; }
.skl-oferta-card li strong { color: var(--skl-ink-strong); }
.skl-oferta-foot { display: grid; gap: 12px; }
.skl-oferta-foot p { margin: 0; color: var(--skl-muted); font-size: 12.5px; line-height: 1.6; }
.skl-oferta-bonus { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--skl-line); }
.skl-oferta-bonus h3 { margin: 0 0 14px; color: var(--skl-ink-strong); font: 400 1.5rem/1 var(--skl-display); letter-spacing: .02em; text-transform: uppercase; }
.skl-oferta-bonus h3 em { font-style: normal; color: var(--skl-accent-ink); }
.skl-oferta-bonus ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 6px 22px; }
.skl-oferta-bonus li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--skl-line); font-size: 14px; color: var(--skl-muted); }
.skl-oferta-bonus li b { font: 500 13px/1.4 var(--skl-mono); color: var(--skl-ink-strong); }
.skl-oferta-bonus li b::before { content: "/"; color: var(--skl-accent-ink); }

/* ---------- quem escreveu ---------- */
.skl-autor { padding: var(--skl-sec) 0; background: var(--skl-surface); border-top: 1px solid var(--skl-line); border-bottom: 1px solid var(--skl-line); }
.skl-autor-grid { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
.skl-autor-foto { margin: 0; border-radius: var(--skl-r-card); overflow: hidden; outline: 1px solid rgba(255, 255, 255, .1); outline-offset: -1px; }
.skl-autor-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.skl-autor-copy p { margin: 0 0 14px; color: var(--skl-muted); font-size: 16px; line-height: 1.75; }
.skl-autor-copy p strong { color: var(--skl-ink-strong); }
.skl-autor-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.skl-autor-nums li { padding-left: 12px; border-left: 1px solid var(--skl-line-strong); }
.skl-autor-nums strong { display: block; color: var(--skl-accent-ink); font: 400 2rem/.9 var(--skl-display); letter-spacing: .03em; }
.skl-autor-nums span { display: block; margin-top: 6px; color: var(--skl-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- da ideia ao software rodando ---------- */
.skl-trilha { padding: var(--skl-sec) 0; }
.skl-trilha ol { margin: 34px 0 0; padding: 0; list-style: none; counter-reset: skl-etapa; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--skl-line); border: 1px solid var(--skl-line); border-radius: var(--skl-r-card); overflow: hidden; }
.skl-trilha li { counter-increment: skl-etapa; padding: 20px 18px; background: var(--skl-bg); }
.skl-trilha li::before { content: counter(skl-etapa, decimal-leading-zero); display: block; margin-bottom: 8px; color: var(--skl-accent-ink); font: 400 1.6rem/1 var(--skl-display); letter-spacing: .03em; }
.skl-trilha li h3 { margin: 0 0 10px; color: var(--skl-ink-strong); font-size: 15px; font-weight: 800; }
.skl-trilha li ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.skl-trilha li ul li { padding: 0; background: none; counter-increment: none; }
.skl-trilha li ul li::before { content: none; }
.skl-trilha li ul a { font: 400 12.5px/1.5 var(--skl-mono); color: var(--skl-muted); text-decoration: none; }
.skl-trilha li ul a::before { content: "/"; color: var(--skl-accent-ink); }
.skl-trilha li ul a:hover { color: var(--skl-ink-strong); }

/* ---------- FAQ ---------- */
.skl-faq { padding: var(--skl-sec) 0; background: var(--skl-surface); border-top: 1px solid var(--skl-line); }
.skl-faq-list { margin-top: 30px; border-top: 1px solid var(--skl-line); }
.skl-faq details { border-bottom: 1px solid var(--skl-line); }
.skl-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0; cursor: pointer; list-style: none; color: var(--skl-ink-strong); font-size: 17px; font-weight: 700; line-height: 1.4; }
.skl-faq summary::-webkit-details-marker { display: none; }
.skl-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--skl-line-strong); border-radius: 50%; color: var(--skl-accent-ink); font: 400 20px/1 var(--skl-mono); transition: transform var(--skl-dur) var(--skl-ease); }
.skl-faq details[open] summary::after { content: "−"; }
.skl-faq-body { padding: 0 0 20px; max-width: 720px; }
.skl-faq-body p { margin: 0 0 10px; color: var(--skl-muted); font-size: 15.5px; line-height: 1.7; }
.skl-faq-body p:last-child { margin-bottom: 0; }
.skl-faq-body a { color: var(--skl-accent-ink); }
.skl-faq-body code { font: 400 .92em var(--skl-mono); color: var(--skl-ink); }

/* ---------- fecho: faixa invertida ---------- */
.skl-fecho { padding: clamp(3.5rem, 7vw, 6rem) 0; background: var(--skl-accent); color: #04121c; }
.skl-fecho-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
.skl-fecho h2 em { font-style: normal; color: #ffffff; }
.skl-fecho h2 { margin: 0; color: #04121c; font: 400 clamp(2.4rem, 5vw, 4.2rem)/.9 var(--skl-display); letter-spacing: .015em; text-transform: uppercase; text-wrap: balance; }
.skl-fecho p { margin: 12px 0 0; max-width: 560px; color: #04121c; font-size: 16px; line-height: 1.65; }
.skl-fecho-actions { display: grid; gap: 10px; justify-items: start; }
.skl-fecho .skl-btn { background: #04121c; border-color: #04121c; color: #fff; }
.skl-fecho .skl-btn:hover { background: #0b2438; }
.skl-fecho-actions small { color: #04121c; font-size: 13px; font-weight: 600; }

/* ========== página individual da skill ========== */
.skl-shero { position: relative; padding: 128px 0 56px; overflow: hidden; background: radial-gradient(ellipse at 80% 0%, var(--skl-accent-soft), transparent 55%), var(--skl-bg); border-bottom: 1px solid var(--skl-line); }
.skl-shero-grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
.skl-shero-title { margin: 0; color: var(--skl-ink-strong); font: 400 clamp(2.8rem, 6.4vw, 5.6rem)/.88 var(--skl-display); letter-spacing: .012em; text-transform: uppercase; text-wrap: balance; }
.skl-shero-title em { font-style: normal; color: var(--skl-accent-ink); }
.skl-shero-lead { max-width: 560px; margin: 20px 0 26px; color: var(--skl-muted); font-size: 17px; line-height: 1.7; }
.skl-shero-lead strong { color: var(--skl-ink-strong); }
.skl-shero-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.skl-shero-preco { display: inline-flex; align-items: baseline; gap: 8px; color: var(--skl-ink-strong); font: 400 2.2rem/1 var(--skl-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.skl-shero-preco small { color: var(--skl-muted); font: 400 12px/1 var(--skl-body); letter-spacing: .06em; text-transform: uppercase; }
/* a ficha grande: mesmo dispositivo do catálogo, em tamanho de hero */
.skl-shero-ficha { position: relative; padding: 26px 24px; border: 1px solid var(--skl-line-strong); border-radius: var(--skl-r-card); background: var(--skl-surface); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.skl-shero-ficha::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: var(--skl-accent); }
.skl-shero-ficha-cmd { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 500 clamp(1.1rem, 2.4vw, 1.5rem)/1.2 var(--skl-mono); color: var(--skl-ink-strong); overflow-wrap: anywhere; }
.skl-shero-ficha-cmd .skl-ficha-num { font-size: 2.2rem; }
.skl-shero-ficha-cmd span:not(.skl-ficha-tier) { flex: 1; min-width: 0; }
.skl-shero-ficha-cmd span:not(.skl-ficha-tier)::before { content: "/"; color: var(--skl-accent-ink); }
.skl-shero-ficha-cmd .skl-ficha-tier { margin-left: auto; }
.skl-shero-ficha-cmd .skl-ficha-tier { font-size: 11px; }
.skl-shero-ficha-log { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.skl-shero-ficha-log li { font: 400 13px/1.55 var(--skl-mono); color: var(--skl-muted); padding-left: 18px; text-indent: -18px; }
.skl-shero-ficha-log li::before { content: "> "; color: var(--skl-accent-ink); }
.skl-shero-ficha-log li.is-out::before { content: "✓ "; color: var(--skl-accent-ink); }
.skl-shero-ficha-log li.is-out { color: var(--skl-ink); }
.skl-shero-ficha-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--skl-line); font: 400 11.5px/1.4 var(--skl-mono); color: var(--skl-muted); }
.skl-shero-ficha-meta b { color: var(--skl-ink); font-weight: 500; }

/* como funciona (individual) */
.skl-passos { padding: var(--skl-sec) 0; background: var(--skl-surface); border-top: 1px solid var(--skl-line); border-bottom: 1px solid var(--skl-line); }
.skl-passos ol { margin: 34px 0 0; padding: 0; list-style: none; counter-reset: skl-p; display: grid; gap: 0; }
.skl-passos li { counter-increment: skl-p; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--skl-line); }
.skl-passos li:first-child { border-top: 0; padding-top: 0; }
.skl-passos li::before { content: counter(skl-p, decimal-leading-zero); grid-column: 1; grid-row: 1 / span 2; color: var(--skl-accent-ink); font: 400 2.4rem/.9 var(--skl-display); letter-spacing: .03em; }
.skl-passos li h3, .skl-passos li p { grid-column: 2; }
.skl-passos li h3 { margin: 0 0 6px; color: var(--skl-ink-strong); font-size: 18px; font-weight: 800; }
.skl-passos li p { margin: 0; max-width: 640px; color: var(--skl-muted); font-size: 15.5px; line-height: 1.65; }
.skl-passos li code { font: 400 .92em var(--skl-mono); color: var(--skl-accent-ink); }

/* antes de comprar: grade com linhas */
.skl-antes { padding: var(--skl-sec) 0; }
.skl-antes-grid { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 34px; background: var(--skl-line); border: 1px solid var(--skl-line); border-radius: var(--skl-r-card); overflow: hidden; }
.skl-antes-col { padding: 24px 22px; background: var(--skl-surface); }
.skl-antes-col h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 14px; color: var(--skl-ink-strong); font-size: 17px; font-weight: 800; }
.skl-antes-col h3 small { color: var(--skl-accent-ink); font: 400 11px/1 var(--skl-mono); letter-spacing: .06em; text-transform: uppercase; }
.skl-antes-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.skl-antes-col li { position: relative; padding-left: 18px; color: var(--skl-muted); font-size: 14.5px; line-height: 1.55; }
.skl-antes-col li::before { content: "·"; position: absolute; left: 2px; color: var(--skl-accent-ink); font-weight: 800; }
.skl-antes-col.is-nunca li::before { content: "×"; left: 0; }
.skl-antes-col li strong { color: var(--skl-ink); }
.skl-antes-col p { margin: 14px 0 0; color: var(--skl-muted); font-size: 13.5px; line-height: 1.6; }

/* o limite dela */
.skl-limite { padding: var(--skl-sec) 0; background: var(--skl-surface); border-top: 1px solid var(--skl-line); border-bottom: 1px solid var(--skl-line); }
.skl-limite p { margin: 0 0 14px; color: var(--skl-muted); font-size: 17px; line-height: 1.75; }
.skl-limite p strong { color: var(--skl-ink-strong); }

/* a dor e a solução: pares sem ela / com ela */
.skl-dor { padding: var(--skl-sec) 0; background: var(--skl-surface); border-top: 1px solid var(--skl-line); border-bottom: 1px solid var(--skl-line); }

/* o que você recebe: lista de valor mais fatos, sem mapa */
.skl-recebe { padding: var(--skl-sec) 0; }
.skl-recebe-grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
.skl-recebe-lista { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.skl-recebe-lista li { position: relative; padding-left: 24px; color: var(--skl-muted); font-size: 15.5px; line-height: 1.6; }
.skl-recebe-lista li::before { content: "↗"; position: absolute; left: 0; color: var(--skl-accent-ink); font-weight: 800; }
.skl-recebe-lista li strong { color: var(--skl-ink-strong); }
.skl-recebe-fatos { margin: 0; padding: 22px 24px; list-style: none; display: grid; gap: 0; border: 1px solid var(--skl-line-strong); border-radius: var(--skl-r-card); background: var(--skl-surface); }
.skl-recebe-fatos li { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 12px 0; border-top: 1px solid var(--skl-line); font-size: 14.5px; color: var(--skl-muted); }
.skl-recebe-fatos li:first-child { border-top: 0; padding-top: 0; }
.skl-recebe-fatos li b { color: var(--skl-ink-strong); font-weight: 700; text-align: right; }

/* dois caminhos */
.skl-caminhos { padding: var(--skl-sec) 0; background: var(--skl-surface); border-top: 1px solid var(--skl-line); border-bottom: 1px solid var(--skl-line); }
.skl-caminhos-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 34px; }

/* as outras da mesma área */
.skl-outras { padding: var(--skl-sec) 0; }
.skl-outras ul { margin: 30px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 16px; }
.skl-outras li { display: contents; }

/* ---------- breakpoints ---------- */
@media (min-width: 641px) {
    .skl-catalogo-grid { grid-template-columns: repeat(2, 1fr); }
    .skl-ficha.is-pack.is-v2-1 { display: grid; grid-column: span 1; }
    .skl-cena-prints { grid-template-columns: repeat(3, 1fr); }
    .skl-cena-print:nth-child(2) { transform: translateY(18px); }
    .skl-trilha ol { grid-template-columns: repeat(2, 1fr); }
    .skl-oferta-bonus ul { grid-template-columns: repeat(2, 1fr); }
    .skl-antes-grid { grid-template-columns: repeat(3, 1fr); }
    .skl-outras ul { grid-template-columns: repeat(2, 1fr); }
    .skl-hero-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 981px) {
    .skl-ficha.is-pack.is-v2-1 { display: none; }
    .skl-ficha.is-pack.is-v3-1 { display: grid; grid-column: span 1; }
    .skl-ficha.is-pack.is-v3-2 { display: grid; grid-column: span 2; }
    .skl-hero { padding: 150px 0 60px; min-height: 720px; }
    .skl-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; }
    .skl-hero-stats { grid-template-columns: repeat(2, 1fr); justify-self: end; max-width: 340px; align-self: end; }
    .skl-catalogo-grid { grid-template-columns: repeat(3, 1fr); }
    .skl-como-grid { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
    .skl-conta-grid { grid-template-columns: 1.2fr .8fr; gap: 64px; }
    .skl-oferta-grid { grid-template-columns: 1fr 1.15fr; gap: 22px; }
    .skl-autor-grid { grid-template-columns: .8fr 1.2fr; gap: 56px; }
    .skl-trilha ol { grid-template-columns: repeat(4, 1fr); }
    .skl-fecho-grid { grid-template-columns: 1.2fr .8fr; }
    .skl-fecho-actions { justify-items: end; }
    .skl-shero-grid { grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
    .skl-caminhos-grid { grid-template-columns: 1fr 1.15fr; }
    .skl-recebe-grid { grid-template-columns: 1.2fr .8fr; gap: 56px; }
    .skl-outras ul { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .skl-hero { padding: 84px 0 32px; min-height: 0; }
    /* no celular a foto vira faixa de topo que se dissolve no fundo, e a copy fica embaixo */
    .skl-hero-cover { height: 52vh; min-height: 300px; max-height: 420px; bottom: auto; }
    .skl-hero-veu { background: linear-gradient(180deg, rgba(5, 6, 7, .35) 0%, rgba(5, 6, 7, 0) 30%, rgba(5, 6, 7, .2) 62%, var(--skl-bg) 100%); }
    .skl-hero-grid { padding-top: calc(52vh - 90px); }
    .skl-hero-stat span { font-size: 10px; }
    .skl-ficha { min-height: 0; }
    .skl-como li, .skl-passos li { grid-template-columns: 44px 1fr; }
    .skl-conta li strong { font-size: 1.4rem; }
    .skl-oferta-card { padding: 26px 20px; }
    .skl-oferta-card.is-pacote::before { margin: -26px -20px 0; }
    .skl-shero { padding: 104px 0 40px; }
    .skl-gratis li a { grid-template-columns: 1fr auto; }
    .skl-gratis li a span { grid-column: 1 / -1; }
}

/* ========== chrome enxuto da loja (partials/skills-topo.php e skills-rodape.php) ==========
   A loja não carrega o style.css do site. O reset usa :where() pra ficar com
   especificidade zero: ele só zera o padrão do navegador e nunca vence as regras
   de componente deste arquivo. */
html { background: #07090a; color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(.skl-page), :where(.skl-page) *, :where(.skl-page) *::before, :where(.skl-page) *::after { box-sizing: border-box; }
body.skl-page { margin: 0; min-height: 100vh; }
:where(.skl-page) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(.skl-page) :where(ul, ol) { padding: 0; }
:where(.skl-page) :where(img, svg, video) { max-width: 100%; }
:where(.skl-page) :where(img) { height: auto; }
:where(.skl-page) :where(a) { color: inherit; }
:where(.skl-page) :where(button, input, select, textarea) { font: inherit; }
:where(.skl-page) :where(code) { font-family: var(--skl-mono); }
:where(.skl-page) :where(table) { border-collapse: collapse; border-spacing: 0; }
:where(.skl-page) :where(strong, b) { font-weight: 700; }

.skl-skip { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 10px 14px; border-radius: var(--skl-r-control); background: var(--skl-accent); color: #04121c; font-weight: 800; text-decoration: none; transition: top var(--skl-dur) var(--skl-ease); }
.skl-skip:focus { top: 12px; }
.skl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skl-topo { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.skl-topo-in { width: var(--skl-col); min-height: 76px; margin: 0 auto; display: flex; align-items: center; gap: 18px; }
.skl-topo-marca { display: inline-flex; align-items: center; gap: 10px; color: var(--skl-ink-strong); font: 700 17px/1 var(--skl-body); letter-spacing: -.01em; text-decoration: none; }
.skl-topo-marca img { width: 36px; height: 36px; flex: none; }
.skl-topo-marca em { font-style: normal; color: var(--skl-accent-ink); }
.skl-topo-nav { display: none; margin-left: auto; gap: 26px; }
.skl-topo-nav a { color: var(--skl-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.skl-topo-nav a:hover { color: var(--skl-ink-strong); }
.skl-topo-cta { margin-left: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--skl-accent); border-radius: var(--skl-r-control); background: rgba(7, 9, 10, .55); color: var(--skl-ink-strong); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background var(--skl-dur) var(--skl-ease), color var(--skl-dur) var(--skl-ease); }
.skl-topo-cta:hover { background: var(--skl-accent); color: #04121c; }
.skl-topo-nav + .skl-topo-cta { margin-left: 8px; }
.skl-topo-cta:focus-visible, .skl-topo-nav a:focus-visible, .skl-topo-marca:focus-visible, .skl-rodape a:focus-visible, .skl-migalha a:focus-visible { outline: 2px solid var(--skl-accent-ink); outline-offset: 3px; }

.skl-rodape { padding: 56px 0 32px; border-top: 1px solid var(--skl-line); background: var(--skl-bg); }
.skl-rodape-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
.skl-rodape-marca p { margin-top: 14px; max-width: 420px; color: var(--skl-muted); font-size: 14px; line-height: 1.65; }
.skl-rodape-col { display: grid; gap: 10px; align-content: start; }
.skl-rodape-col a { color: var(--skl-ink); font-size: 14px; text-decoration: none; }
.skl-rodape-col a:hover { color: var(--skl-accent-ink); }
.skl-rodape-rotulo { color: var(--skl-accent-ink); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.skl-rodape-copy { margin: 36px auto 0; padding-top: 20px; border-top: 1px solid var(--skl-line); color: var(--skl-muted); font-size: 12.5px; }

/* migalha e linha do pack no hero da skill */
.skl-migalha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 28px; color: var(--skl-muted); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.skl-migalha a { display: inline-flex; align-items: center; gap: 8px; color: var(--skl-muted); text-decoration: none; }
.skl-migalha a:hover { color: var(--skl-accent-ink); }
.skl-migalha span[aria-hidden] { opacity: .5; }
.skl-shero-pack { margin-top: 16px; color: var(--skl-muted); font-size: 14px; line-height: 1.6; }
.skl-shero-pack a { color: var(--skl-accent-ink); font-weight: 700; }

/* a dor e a solução: tabela nativa no desktop (extraível por busca e IA), blocos no celular */
.skl-dor-tabela { width: 100%; margin-top: 34px; table-layout: fixed; border-top: 1px solid var(--skl-line-strong); }
.skl-dor-tabela th { padding: 14px 32px 10px 26px; text-align: left; color: var(--skl-muted); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.skl-dor-tabela th + th { color: var(--skl-accent-ink); }
.skl-dor-tabela td { position: relative; width: 50%; padding: 22px 32px 22px 26px; border-bottom: 1px solid var(--skl-line); vertical-align: top; font-size: 15.5px; line-height: 1.65; }
.skl-dor-sem { color: var(--skl-muted); }
.skl-dor-com { color: var(--skl-ink); }
.skl-dor-tabela td::after { position: absolute; left: 2px; top: 22px; font-weight: 800; line-height: 1.4; }
.skl-dor-sem::after { content: "×"; left: 4px; top: 19px; font-size: 20px; color: var(--skl-muted); }
.skl-dor-com::after { content: "✓"; color: var(--skl-accent-ink); }

/* o que sai dela, nas skills sem print */
.skl-saida { padding: var(--skl-sec) 0; }
.skl-saida-grid { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
.skl-saida-lista { list-style: none; display: grid; grid-template-columns: 1fr; gap: 16px; }
.skl-saida-lista li { position: relative; padding: 22px 22px 20px 64px; border: 1px solid var(--skl-line-strong); border-radius: var(--skl-r-card); background: var(--skl-surface); }
.skl-saida-lista b { position: absolute; left: 20px; top: 20px; color: var(--skl-accent-ink); font: 400 1.6rem/1 var(--skl-display); letter-spacing: .03em; }
.skl-saida-lista h3 { margin: 0 0 6px; color: var(--skl-ink-strong); font-size: 16px; font-weight: 800; }
.skl-saida-lista p { color: var(--skl-muted); font-size: 14.5px; line-height: 1.6; }

@media (min-width: 641px) {
    .skl-saida-lista { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 761px) {
    .skl-rodape-grid { grid-template-columns: 1.6fr 1fr 1fr; }
}
@media (min-width: 861px) {
    .skl-topo-nav { display: flex; }
}
@media (min-width: 981px) {
    .skl-saida-grid { grid-template-columns: .8fr 1.2fr; gap: 56px; }
}
@media (max-width: 640px) {
    .skl-dor-tabela, .skl-dor-tabela tbody, .skl-dor-tabela tr, .skl-dor-tabela td { display: block; width: 100%; }
    .skl-dor-tabela thead { display: none; }
    .skl-dor-tabela tr { padding: 22px 0; border-bottom: 1px solid var(--skl-line); }
    .skl-dor-tabela td { padding: 0 0 0 26px; border-bottom: 0; }
    .skl-dor-tabela td + td { margin-top: 14px; }
    .skl-dor-tabela td::before { content: attr(data-rotulo); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
    .skl-dor-sem::after { top: 17px; }
    .skl-dor-com::after { top: 20px; }
    .skl-topo-in { min-height: 64px; }
    .skl-topo-marca span { font-size: 15px; }
}