/* Página de venda de uma skill (skill.php). Namespace `skb-skill-*`, registrado em
   docs/css-namespaces.md. Reaproveita tokens e utilitários de site.css
   (--bg, --accent, .skb-container, .skb-section, .skb-heading, .skb-kicker, .skb-button). */

.skb-skill-hero { background: radial-gradient(ellipse at top right,#ff7a3612,transparent 55%),var(--bg); }
.skb-skill-crumb { display: flex; align-items: center; gap: 10px; padding-top: 28px; color: var(--muted); font-size: 12px; }
.skb-skill-crumb a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); text-decoration: none; }
.skb-skill-crumb a:hover { color: var(--ink); }
.skb-skill-crumb svg { flex-shrink: 0; }

.skb-skill-hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start; padding-block: 28px 64px; }
.skb-skill-hero-titulo { margin-top: 18px; font-size: clamp(32px,3.4vw,48px); font-weight: 800; letter-spacing: -.04em; line-height: 1.12; text-wrap: balance; }
.skb-skill-hero-lead { margin-top: 20px; max-width: 620px; color: #bec0c3; font-size: 16px; line-height: 1.65; }
.skb-skill-hero-lead strong { color: var(--ink); }
.skb-skill-hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; }
.skb-skill-hero-preco { font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.skb-skill-hero-preco small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-family: var(--font-body); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.skb-skill-hero-aviso { margin-top: 16px; max-width: 520px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.skb-skill-hero-aviso a { color: var(--accent); }
.skb-skill-hero-pack { margin-top: 10px; color: var(--muted); font-size: 12px; }
.skb-skill-hero-pack a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.skb-skill-ficha { border: 1px solid #ffffff20; border-radius: 12px; padding: 22px 24px; background: radial-gradient(ellipse at right top,#ff7a3610,transparent 70%),var(--surface); box-shadow: 0 24px 70px #0004; }
.skb-skill-ficha-cmd { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.skb-skill-ficha-cmd b { color: var(--accent); font-size: 11px; letter-spacing: .1em; }
.skb-skill-ficha-cmd span:not(.skb-skill-ficha-tier) { font-family: var(--font-display); font-weight: 800; overflow-wrap: anywhere; }
.skb-skill-ficha-tier { margin-left: auto; color: var(--muted); font-size: 10px; font-weight: 500; }
.skb-skill-ficha-log { list-style: none; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.skb-skill-ficha-log li { padding: 8px 0; color: var(--ink); font-size: 13px; }
.skb-skill-ficha-log li.is-out { color: var(--muted); }
.skb-skill-ficha-log li::before { content: '›'; margin-right: 8px; color: var(--accent); }
.skb-skill-ficha-meta { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.skb-skill-ficha-meta b { display: block; font-size: 13px; font-weight: 800; }
.skb-skill-ficha-meta b span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; }

.skb-skill-pain { padding-block: clamp(56px,7vw,88px); border-top: 1px solid var(--line); }
.skb-skill-pain h2 { margin: 16px 0 20px; }
.skb-skill-pain > .skb-container > p { max-width: 780px; color: var(--muted); }
.skb-skill-pain-tabela { width: 100%; margin-top: 32px; border-collapse: collapse; }
.skb-skill-pain-tabela th { text-align: left; padding: 0 20px 14px; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.skb-skill-pain-tabela td { vertical-align: top; padding: 18px 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; }
.skb-skill-pain-tabela td.is-sem { color: var(--muted); width: 50%; }
.skb-skill-pain-tabela td.is-com { color: var(--ink); width: 50%; }

.skb-skill-shots,.skb-skill-output { padding-block: clamp(56px,7vw,88px); border-top: 1px solid var(--line); background: var(--surface); }
.skb-skill-shots-head p:last-child,.skb-skill-output header p:last-child { max-width: 680px; margin-top: 16px; color: var(--muted); }
.skb-skill-shots-head h2,.skb-skill-output header h2 { margin-top: 16px; }
.skb-skill-shots-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; }
.skb-skill-shots-item img { width: 100%; aspect-ratio: 1.6; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.skb-skill-shots-item figcaption { margin-top: 12px; color: var(--muted); font-size: 12px; }
.skb-skill-shots-item figcaption b { color: var(--ink); }
.skb-skill-output-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.skb-skill-output-lista { list-style: none; margin: 0; padding: 0; }
.skb-skill-output-lista li { display: grid; grid-template-columns: 34px 1fr; gap: 4px 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.skb-skill-output-lista li:first-child { border-top: 0; }
.skb-skill-output-lista b { grid-row: 1/3; color: var(--accent); font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.skb-skill-output-lista h3 { font-size: 16px; }
.skb-skill-output-lista p { grid-column: 2; margin-top: 4px; color: var(--muted); font-size: 13px; }

.skb-skill-steps { padding-block: clamp(56px,7vw,88px); }
.skb-skill-steps h2 { margin-top: 16px; }
.skb-skill-steps ol { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin: 40px 0 0; padding: 0; }
.skb-skill-steps li { border-top: 1px solid #ff7a3650; padding-top: 20px; }
.skb-skill-steps h3 { font-size: 17px; margin-bottom: 8px; }
.skb-skill-steps p { color: var(--muted); font-size: 13px; }

.skb-skill-before { padding-block: clamp(56px,7vw,88px); border-top: 1px solid var(--line); background: var(--surface); }
.skb-skill-before h2 { margin-top: 16px; }
.skb-skill-before-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 40px; }
.skb-skill-before-col h3 { font-size: 15px; }
.skb-skill-before-col h3 small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.skb-skill-before-col ul { list-style: none; margin: 18px 0 0; padding: 0; }
.skb-skill-before-col li { position: relative; padding-left: 20px; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.skb-skill-before-col li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); }
.skb-skill-before-col.is-nunca li::before { content: '×'; color: #ff6b6b; }
.skb-skill-before-col p { margin-top: 14px; color: #8b8c90; font-size: 11px; }

.skb-skill-limits { padding-block: clamp(56px,7vw,88px); }
.skb-skill-limits-read { max-width: 760px; }
.skb-skill-limits h2 { margin-top: 16px; }
.skb-skill-limits p { margin-top: 18px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.skb-skill-limits p strong { color: var(--ink); }

.skb-skill-includes { padding-block: clamp(56px,7vw,88px); border-top: 1px solid var(--line); background: radial-gradient(ellipse at left,#ff7a360a,transparent 65%),var(--surface); }
.skb-skill-includes-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }
.skb-skill-includes h2 { margin-top: 16px; }
.skb-skill-includes-lista { list-style: none; margin: 24px 0 0; padding: 0; }
.skb-skill-includes-lista li { position: relative; padding-left: 24px; margin-top: 16px; color: var(--muted); font-size: 14px; }
.skb-skill-includes-lista li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); }
.skb-skill-includes-lista li strong { color: var(--ink); }
.skb-skill-includes-fatos { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.skb-skill-includes-fatos li { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--line); font-size: 13px; }
.skb-skill-includes-fatos li:first-child { border-top: 0; }
.skb-skill-includes-fatos span { color: var(--muted); }
.skb-skill-includes-fatos b { font-weight: 700; }

.skb-skill-price { padding-block: clamp(56px,7vw,88px); border-top: 1px solid var(--line); }
.skb-skill-price h2 { margin-top: 16px; }
.skb-skill-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.skb-skill-price-card { border: 1px solid var(--line); border-radius: 14px; padding: 30px; background: var(--surface); }
.skb-skill-price-card.is-pacote { border-color: #ff7a3660; background: linear-gradient(160deg,#2c211c,#191513 70%); }
.skb-skill-price-label { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.skb-skill-price-card.is-pacote .skb-skill-price-label { color: var(--accent); }
.skb-skill-price-amount { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; font-family: var(--font-display); font-size: 46px; font-weight: 800; letter-spacing: -.04em; }
.skb-skill-price-amount small { font-size: 18px; letter-spacing: normal; }
.skb-skill-price-amount s { order: -1; color: #a09a94; font-size: 16px; font-family: var(--font-body); font-weight: 500; letter-spacing: normal; }
.skb-skill-price-amount span { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: normal; }
.skb-skill-price-card ul { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.skb-skill-price-card li { position: relative; padding-left: 22px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.skb-skill-price-card li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); }
.skb-skill-price-card li a { color: var(--accent); }
.skb-skill-price-foot { margin-top: 24px; }
.skb-skill-price-foot .skb-button { width: 100%; }
.skb-skill-price-foot p { margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.skb-skill-price-foot p a { color: var(--ink); }
.skb-button.is-ghost { background: transparent; border: 1px solid #ff7a3680; color: var(--accent); }
.skb-button.is-ghost:hover { background: #ff7a3610; }

.skb-skill-more { padding-block: clamp(56px,7vw,88px); border-top: 1px solid var(--line); background: var(--surface); }
.skb-skill-more h2 { margin-top: 16px; }
.skb-skill-more-grid { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 40px 0 0; padding: 0; }
.skb-skill-more-card { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 22px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; }
.skb-skill-more-card:hover { border-color: var(--accent); }
.skb-skill-more-card.is-premium { border-color: #ff7a3650; }
.skb-skill-more-card.is-pack { background: radial-gradient(ellipse at top,#ff7a3618,transparent 70%),var(--surface-2); border-color: #ff7a3660; }
.skb-skill-more-top { display: flex; align-items: center; gap: 10px; }
.skb-skill-more-top b { font-family: var(--font-display); font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.skb-skill-more-tier { margin-left: auto; color: var(--muted); font-size: 10px; }
.skb-skill-more-prompt { color: var(--accent); font-size: 12px; }
.skb-skill-more-desc { flex: 1; color: var(--muted); font-size: 13px; }
.skb-skill-more-desc strong { color: var(--ink); }
.skb-skill-more-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; }
.skb-skill-more-foot span:last-child { color: var(--muted); font-size: 11px; }

.skb-skill-faq { padding-block: clamp(56px,7vw,88px); }
.skb-skill-faq-read { max-width: 900px; }
.skb-skill-faq h2 { margin-top: 16px; }
.skb-skill-faq details { border-bottom: 1px solid var(--line); margin-top: 24px; }
.skb-skill-faq details:first-of-type { margin-top: 32px; border-top: 1px solid var(--line); }
.skb-skill-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; padding: 20px 0; font-size: 14px; font-weight: 600; }
.skb-skill-faq summary::-webkit-details-marker { display: none; }
.skb-skill-faq summary::after { content: '+'; flex-shrink: 0; font-size: 22px; color: var(--accent); font-weight: 400; }
.skb-skill-faq details[open] summary::after { content: '−'; }
.skb-skill-faq-body { color: var(--muted); font-size: 14px; padding-bottom: 22px; }
.skb-skill-faq-body p { margin: 0; }

.skb-skill-close { padding-block: 60px; border-top: 1px solid var(--line); background: var(--accent); color: #21130b; }
.skb-skill-close-grid { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.skb-skill-close h2 { font-size: clamp(26px,3vw,38px); font-weight: 800; }
.skb-skill-close p { margin-top: 10px; font-size: 14px; }
.skb-skill-close-actions { text-align: right; flex-shrink: 0; }
.skb-skill-close-actions .skb-button { background: #17100c; color: var(--ink); }
.skb-skill-close-actions .skb-button:hover { background: #342014; }
.skb-skill-close-actions small { display: block; margin-top: 10px; font-size: 11px; }

@media (max-width: 1150px) {
  .skb-skill-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .skb-skill-output-grid,.skb-skill-includes-grid { grid-template-columns: 1fr; gap: 32px; }
  .skb-skill-steps ol,.skb-skill-before-grid { grid-template-columns: repeat(2,1fr); }
  .skb-skill-shots-grid,.skb-skill-more-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .skb-skill-price-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .skb-skill-crumb { padding-top: 20px; font-size: 11px; }
  .skb-skill-hero-grid { padding-block: 20px 44px; gap: 32px; }
  .skb-skill-hero-titulo { font-size: 30px; }
  .skb-skill-hero-lead { font-size: 14px; }
  .skb-skill-hero-actions { gap: 16px; }
  .skb-skill-hero-actions .skb-button { width: 100%; }
  .skb-skill-pain-tabela,.skb-skill-pain-tabela tbody,.skb-skill-pain-tabela tr,.skb-skill-pain-tabela td { display: block; width: 100%; }
  .skb-skill-pain-tabela thead { display: none; }
  .skb-skill-pain-tabela td { padding: 10px 0; border-top: 0; }
  .skb-skill-pain-tabela td::before { content: attr(data-rotulo); display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
  .skb-skill-pain-tabela tr { padding: 16px 0; border-top: 1px solid var(--line); }
  .skb-skill-shots-grid,.skb-skill-steps ol,.skb-skill-before-grid,.skb-skill-more-grid { grid-template-columns: 1fr; }
  .skb-skill-close-grid { flex-direction: column; align-items: flex-start; text-align: left; }
  .skb-skill-close-actions { text-align: left; }
}