/* Páginas-guia (alternativa ao Discord, compartilhar tela): texto para quem
   chegou pela busca, com o produto na frente e a resposta logo no topo. */
.guia .site-header { position: sticky; }
.guia main { padding-bottom: clamp(72px, 10vw, 120px); }
.guia-wrap { width: min(980px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }

.guia-topo { position: relative; padding-block: clamp(48px, 8vw, 104px) clamp(32px, 5vw, 56px); overflow: hidden; }
.guia-topo::before { content: ''; position: absolute; inset: -30% -10% auto; height: 120%; background: radial-gradient(60% 55% at 50% 0%, rgb(139 92 246 / .22), transparent 70%); pointer-events: none; }
.guia-topo > * { position: relative; }
.guia-selo { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgb(180 140 255 / .35); background: rgb(180 140 255 / .08); color: var(--vitral); font-size: .8125rem; font-weight: 650; letter-spacing: .04em; }
.guia-topo h1 { margin-top: 20px; max-width: 17ch; }
.guia-lede { margin-top: 22px; max-width: 62ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: #d4cde3; line-height: 1.65; }
.guia-lede b { color: var(--osso); }
.guia-acoes { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.guia-acoes .secundario { color: var(--osso); text-decoration: underline; text-decoration-color: rgb(180 140 255 / .45); text-underline-offset: 4px; font-weight: 550; }
.guia-acoes .secundario:hover { text-decoration-color: var(--vitral); }
.guia-nota { margin-top: 14px; font-size: .875rem; color: var(--sombra); }

.guia-tela { margin-top: clamp(8px, 2vw, 16px); border-radius: 16px; overflow: hidden; border: 1px solid var(--linha); box-shadow: 0 40px 120px -40px rgb(139 92 246 / .55), 0 0 0 1px rgb(255 255 255 / .03) inset; background: var(--pedra); }
.guia-tela img { width: 100%; }
.guia-legenda { margin-top: 12px; font-size: .875rem; color: var(--sombra); }

.guia section { margin-top: clamp(64px, 9vw, 112px); scroll-margin-top: 96px; }
.guia h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
.guia section > p, .guia .guia-texto { margin-top: 16px; max-width: 66ch; color: #cfc8de; line-height: 1.7; }
.guia section > p b, .guia .guia-texto b { color: var(--osso); font-weight: 650; }
.guia a.link { color: var(--vitral); text-decoration: underline; text-underline-offset: 3px; }

/* lado a lado */
.comparar { margin-top: 28px; width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; font-size: .9688rem; }
.comparar th, .comparar td { padding: 16px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--linha); line-height: 1.5; }
.comparar thead th { border-top: 0; background: rgb(21 17 31 / .9); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sombra); }
.comparar thead th.fence { color: var(--vitral); }
.comparar tbody th { width: 30%; color: var(--osso); font-weight: 650; }
.comparar td { color: #cfc8de; width: 35%; }
.comparar td.fence { background: rgb(139 92 246 / .07); color: var(--osso); }
.comparar .bom { color: var(--vantagem); font-weight: 650; }
.comparar .ruim { color: #ff8a95; font-weight: 650; }
.comparar small { display: block; margin-top: 4px; color: var(--sombra); font-size: .8125rem; }
.guia-fonte { margin-top: 12px !important; font-size: .8125rem !important; color: var(--sombra) !important; }

/* cartões e passos */
.cartoes { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cartao { padding: 22px; border: 1px solid var(--linha); border-radius: 14px; background: linear-gradient(180deg, rgb(28 23 41 / .75), rgb(21 17 31 / .5)); }
.cartao h3 { color: var(--osso); }
.cartao p { margin-top: 8px; color: var(--nevoa); font-size: .9688rem; line-height: 1.6; }
.passos-guia { margin-top: 28px; display: grid; gap: 14px; counter-reset: passo; list-style: none; }
.passos-guia li { position: relative; padding: 20px 22px 20px 72px; border: 1px solid var(--linha); border-radius: 14px; background: rgb(21 17 31 / .55); counter-increment: passo; }
.passos-guia li::before { content: counter(passo); position: absolute; left: 20px; top: 18px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgb(139 92 246 / .18); border: 1px solid rgb(180 140 255 / .4); color: var(--vitral); font-family: var(--titulo); font-weight: 700; }
.passos-guia h3 { color: var(--osso); }
.passos-guia p { margin-top: 6px; color: var(--nevoa); font-size: .9688rem; line-height: 1.6; }
.passos-guia kbd, .guia kbd { padding: 1px 7px; border-radius: 5px; border: 1px solid var(--linha); background: var(--pedra-2); color: var(--osso); font: 600 .8125rem Inter, system-ui, sans-serif; }

/* perguntas */
.perguntas { margin-top: 24px; border-top: 1px solid var(--linha); }
.perguntas details { border-bottom: 1px solid var(--linha); }
.perguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 20px 4px; font-weight: 650; color: var(--osso); }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: '+'; flex: none; color: var(--vitral); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details p { padding: 0 4px 20px; max-width: 70ch; color: #cfc8de; line-height: 1.7; }

.guia-fim { margin-top: clamp(72px, 10vw, 120px); padding: clamp(32px, 5vw, 56px); border-radius: 20px; border: 1px solid rgb(180 140 255 / .3); background: radial-gradient(80% 120% at 50% 0%, rgb(139 92 246 / .2), transparent 70%), var(--pedra); text-align: center; }
.guia-fim h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.guia-fim p { margin: 14px auto 0; max-width: 52ch; color: var(--nevoa); }
.guia-fim .guia-acoes { justify-content: center; }
.guia-veja { margin-top: 28px; font-size: .9375rem; color: var(--nevoa); }

@media (max-width: 680px) {
  .comparar, .comparar thead, .comparar tbody, .comparar tr, .comparar th, .comparar td { display: block; width: 100%; }
  .comparar thead { display: none; }
  .comparar tbody tr { border-top: 1px solid var(--linha); }
  .comparar tbody tr:first-child { border-top: 0; }
  .comparar tbody th { padding-bottom: 6px; border: 0; }
  .comparar td { border: 0; padding-top: 6px; }
  .comparar td::before { content: attr(data-rotulo); display: block; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sombra); margin-bottom: 2px; }
  .passos-guia li { padding-left: 62px; }
}
.leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }