/*
 * Estilos da aplicação.
 *
 * Este é o único arquivo de estilos próprio do site. O Nginx envia `default-src 'self'` sem 'unsafe-inline', então as
 * views não têm bloco <style> nem atributo style=. Todo o visual vem de uma classe do Bootstrap ou de uma regra daqui.
 *
 * Carregado depois de bootstrap.min.css: é isso que faz estas regras valerem sem nenhum !important.
 *
 * Bootstrap em css/, e não em css/vendor/: o .gitignore tem uma regra `vendor/` sem âncora, que vale em qualquer nível.
 * Um arquivo em css/vendor/ ficaria fora do git sem aviso e sumiria em um clone novo.
 *
 * Arquivo pequeno de propósito: repetir aqui os padrões do Bootstrap criaria um segundo lugar que poderia divergir dele.
 *
 * Sem @import e sem url() para outra origem: a CSP recusaria o pedido, e a regra deixaria de valer sem nenhum aviso.
 */

:root {
    /* Paleta das páginas de venda, tirada da capa do e-book: quase preto com uma grade suave, texto
       em branco quente e o laranja de terminal do título. */
    --lp-bg: #141414;
    --lp-surface: #1c1c1c;
    --lp-surface-2: #222222;
    --lp-line: #2f2f2f;
    --lp-text: #d4d0c8;
    --lp-muted: #9b968d;
    --lp-heading: #f5f1e8;
    --lp-accent: #e8704f;
    --lp-accent-strong: #f2876a;
    --lp-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/*
 * Contorno de foco visível nos links, exigência de acessibilidade. O Bootstrap já traz um para os
 * próprios componentes, e este cobre os links simples das views.
 */
a:focus-visible {
    outline: 2px solid var(--lp-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/*
 * Páginas de erro. São documentos completos que carregam só este arquivo, sem o Bootstrap, porque
 * precisam funcionar quando outras coisas falham. Por isso, estas regras não dependem dele, e o botão
 * é escrito por inteiro, sem usar .btn. As classes nf__ são a janela do terminal e as ações abaixo dela.
 */
.error-page {
    margin: 0;
    min-height: 100vh;
    background-color: var(--lp-bg);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    color: var(--lp-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
}

.error-page #main {
    margin: 0 auto;
    max-width: 36rem;
    padding: 5rem 1rem 4rem;
}

.error-page h1 {
    margin: 0 0 0.75rem;
    color: var(--lp-heading);
    font-size: clamp(1.75rem, 5vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.error-page p {
    margin: 0 0 0.75rem;
    color: var(--lp-text);
}

.nf__terminal {
    margin-bottom: 2.5rem;
    overflow: hidden;
    border: 1px solid var(--lp-line);
    border-radius: 0.75rem;
    background: var(--lp-surface);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.45);
}

.nf__bar {
    display: flex;
    gap: 0.4rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--lp-line);
    background: var(--lp-surface-2);
}

.nf__bar span {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--lp-line);
}

.nf__bar span:first-child {
    background: var(--lp-accent);
}

.nf__screen {
    margin: 0;
    padding: 1.1rem 1.2rem 1.3rem;
    color: var(--lp-muted);
    font-family: var(--lp-mono);
    font-size: 0.85rem;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.nf__prompt {
    color: var(--lp-accent);
}

.nf__cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.05em;
    vertical-align: text-bottom;
    background: var(--lp-heading);
    animation: nf-blink 1.1s steps(1) infinite;
}

@keyframes nf-blink {
    50% {
        opacity: 0;
    }
}

.error-page .nf__code {
    margin-bottom: 0.4rem;
    color: var(--lp-accent);
    font-family: var(--lp-mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.error-page .nf__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 2rem;
}

.nf__btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: 0.5rem;
    background: var(--lp-accent);
    color: var(--lp-bg);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.error-page .nf__btn {
    color: var(--lp-bg);
}

.nf__btn:hover {
    background: var(--lp-accent-strong);
}

.error-page .nf__link {
    color: var(--lp-heading);
    text-decoration: underline;
    text-decoration-color: var(--lp-accent);
    text-underline-offset: 0.25em;
}

.error-page .nf__link:hover {
    color: var(--lp-accent-strong);
}

@media (prefers-reduced-motion: reduce) {
    .nf__cursor {
        animation: none;
    }
    .nf__btn {
        transition: none;
    }
}

/*
 * Páginas de venda e de agradecimento.
 *
 * A grade atrás do topo é feita com dois gradientes CSS, que não são imagens, então img-src 'self' não
 * se aplica a eles. O prefixo lp- evita colisão com os nomes do Bootstrap.
 */
body {
    background-color: var(--lp-bg);
    color: var(--lp-text);
}

.lp-hero {
    padding: 4rem 0 3.5rem;
    border-bottom: 1px solid var(--lp-line);
    background-color: var(--lp-bg);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 32px 32px;
}

.lp-badge {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--lp-accent);
    border-radius: 999px;
    background: rgba(232, 112, 79, 0.12);
    color: var(--lp-accent);
    font-family: var(--lp-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lp-title {
    margin-bottom: 1.25rem;
    color: var(--lp-heading);
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.lp-lead {
    max-width: 38rem;
    margin-bottom: 2rem;
    font-size: 1.15rem;
}

.lp-lead strong {
    color: var(--lp-heading);
}

.lp-btn {
    --bs-btn-padding-x: 1.6rem;
    --bs-btn-padding-y: 0.85rem;
    --bs-btn-font-weight: 700;
    --bs-btn-color: var(--lp-bg);
    --bs-btn-bg: var(--lp-accent);
    --bs-btn-border-color: var(--lp-accent);
    --bs-btn-hover-color: var(--lp-bg);
    --bs-btn-hover-bg: var(--lp-accent-strong);
    --bs-btn-hover-border-color: var(--lp-accent-strong);
    --bs-btn-active-color: var(--lp-bg);
    --bs-btn-active-bg: var(--lp-accent-strong);
    --bs-btn-active-border-color: var(--lp-accent-strong);
    --bs-btn-disabled-color: var(--lp-muted);
    --bs-btn-disabled-bg: var(--lp-surface-2);
    --bs-btn-disabled-border-color: var(--lp-line);
    box-shadow: 0 6px 18px rgba(232, 112, 79, 0.25);
}

.lp-btn.disabled {
    box-shadow: none;
}

.lp-btn--lg {
    --bs-btn-padding-x: 2.4rem;
    --bs-btn-font-size: 1.1rem;
}

.lp-link {
    color: var(--lp-text);
    text-underline-offset: 4px;
}

.lp-link:hover {
    color: var(--lp-heading);
}

.lp-note {
    color: var(--lp-muted);
    font-size: 0.9rem;
}

/*
 * Capa do e-book, desenhada com texto em vez do PNG, para as legendas pequenas continuarem legíveis em
 * qualquer largura. As linhas de dados usam --lp-text, e não --lp-muted, e nunca ficam abaixo de 0.85rem.
 */
.lp-cover {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 30rem;
    margin: 0 auto;
    padding: 1.75rem;
    border: 1px solid var(--lp-line);
    border-radius: 0.75rem;
    background-color: var(--lp-bg);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.55);
    color: var(--lp-text);
    font-family: var(--lp-mono);
}

.lp-cover__top,
.lp-cover__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1rem;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
}

.lp-cover__top {
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--lp-accent);
    text-transform: uppercase;
}

.lp-cover__bottom {
    padding-top: 0.9rem;
    border-top: 1px solid var(--lp-line);
}

.lp-cover__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0;
    margin: 0;
    padding: 0;
    list-style: none;
    letter-spacing: 0.04em;
}

.lp-cover__facts li + li::before {
    content: "•";
    margin: 0 0.55rem;
    color: var(--lp-accent);
}

.lp-cover__author {
    color: var(--lp-heading);
    text-transform: uppercase;
}

.lp-cover__prompt {
    margin: 0 0 1.25rem;
    color: var(--lp-accent);
    font-size: 1rem;
}

.lp-cover__prompt span {
    color: var(--lp-text);
}

.lp-cover__cursor {
    display: inline-block;
    width: 0.6em;
    height: 1.1em;
    vertical-align: text-bottom;
    background: var(--lp-accent);
}

.lp-cover__title {
    margin: 0;
    color: var(--lp-heading);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(2rem, 8vw, 2.6rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.lp-cover__subtitle {
    margin: 0.75rem 0 0;
    color: var(--lp-accent);
    font-size: clamp(1.2rem, 4.5vw, 1.5rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Faixa de números logo abaixo do topo da página. */
.lp-stats {
    border-bottom: 1px solid var(--lp-line);
    background: var(--lp-surface);
}

.lp-stats-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 1.5rem 0;
    list-style: none;
    color: var(--lp-muted);
    font-family: var(--lp-mono);
    font-size: 0.85rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lp-stat-value {
    display: block;
    color: var(--lp-heading);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* Seções. */
.lp-section {
    padding: 4.5rem 0;
}

.lp-section--alt {
    border-top: 1px solid var(--lp-line);
    border-bottom: 1px solid var(--lp-line);
    background: var(--lp-surface);
}

.lp-kicker {
    margin-bottom: 0.5rem;
    color: var(--lp-accent);
    font-family: var(--lp-mono);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.lp-h2 {
    margin-bottom: 1rem;
    color: var(--lp-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.lp-intro {
    max-width: 44rem;
    margin-bottom: 2rem;
    font-size: 1.08rem;
}

.lp-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-checklist li {
    position: relative;
    padding: 0.9rem 0 0.9rem 1.75rem;
    border-bottom: 1px solid var(--lp-line);
}

.lp-checklist li::before {
    content: "›";
    position: absolute;
    left: 0.25rem;
    color: var(--lp-accent);
    font-weight: 700;
}

.lp-checklist strong {
    color: var(--lp-heading);
}

.lp-card {
    padding: 1.5rem;
    border: 1px solid var(--lp-line);
    border-radius: 0.6rem;
    background: var(--lp-surface);
}

.lp-card-title {
    margin-bottom: 0.75rem;
    color: var(--lp-accent);
    font-family: var(--lp-mono);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lp-dash {
    padding: 0;
    list-style: none;
}

.lp-dash li::before {
    content: "– ";
    color: var(--lp-muted);
}

/* Blocos de terminal, com as cores do livro: comando em verde, opção em azul e número em amarelo. */
.lp-term {
    margin: 0;
    padding: 1.1rem 1.25rem;
    border-radius: 0.6rem 0.6rem 0 0;
    background: #0c0c0d;
    color: #e6e6e6;
    font-family: var(--lp-mono);
    font-size: 0.95rem;
    white-space: pre-wrap;
}

.lp-term .t-cmd { color: #7ee2a8; }
.lp-term .t-opt { color: #79c0ff; }
.lp-term .t-num { color: #f2cc60; }

.lp-sample {
    height: 100%;
    border: 1px solid var(--lp-line);
    border-radius: 0.6rem;
    background: var(--lp-bg);
}

.lp-sample-text {
    padding: 1.1rem 1.25rem;
}

.lp-sample-text b {
    color: var(--lp-accent);
    font-weight: 600;
}

.lp-error {
    height: 100%;
    border: 1px solid #5a2f28;
    border-radius: 0.6rem;
    background: var(--lp-bg);
}

.lp-error-msg {
    margin: 0;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid #5a2f28;
    border-radius: 0.6rem 0.6rem 0 0;
    background: rgba(232, 112, 79, 0.08);
    color: #f19a82;
    font-family: var(--lp-mono);
    font-size: 0.95rem;
    /* As mensagens do daemon passam da largura do celular, então quebram linha como em .lp-term. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.lp-error-body {
    padding: 1.1rem 1.25rem;
}

.lp-label {
    margin-bottom: 0.4rem;
    color: var(--lp-muted);
    font-family: var(--lp-mono);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Sumário. */
.lp-modules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-module {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--lp-line);
    border-radius: 0.6rem;
    background: var(--lp-surface);
}

.lp-module-number {
    flex: none;
    color: var(--lp-accent);
    font-family: var(--lp-mono);
    font-size: 1.4rem;
    line-height: 1.2;
}

.lp-module-title {
    margin-bottom: 0.6rem;
    color: var(--lp-heading);
    font-size: 1.02rem;
    font-weight: 600;
}

.lp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-chips li {
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--lp-line);
    border-radius: 0.35rem;
    background: var(--lp-bg);
    color: var(--lp-text);
    font-family: var(--lp-mono);
    font-size: 0.8rem;
}

/* Desafios: dois cartões lado a lado a partir de lg, para a seção ocupar o container como o resto da
   página, em vez de ficar encostada à esquerda. */
.lp-challenge {
    padding: 1.5rem;
    border: 1px solid var(--lp-line);
    border-top: 3px solid var(--lp-accent);
    border-radius: 0.6rem;
    background: var(--lp-bg);
}

.lp-challenge-tag {
    margin-bottom: 0.5rem;
    color: var(--lp-accent);
    font-family: var(--lp-mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lp-challenge-q {
    color: var(--lp-heading);
    font-size: 1.1rem;
}

.lp-challenge .lp-term {
    margin-bottom: 1rem;
    border-radius: 0.5rem;
}

.lp-author {
    max-width: 48rem;
}

/* Foto do autor: um JPEG quadrado de 768px exibido em até 20rem (320px), o que ainda dá 2,4x para telas
   de alta densidade. */
.lp-author-photo {
    display: block;
    width: 100%;
    max-width: 20rem;
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
    border: 1px solid var(--lp-line);
    border-radius: 0.8rem;
    object-fit: cover;
}

/* Botão de compra no meio da página, abaixo da grade de módulos. */
.lp-cta {
    margin-top: 2.5rem;
    text-align: center;
}

/* Oferta: dois cartões lado a lado, a compra à esquerda e o bônus à direita, empilhados em telas
   estreitas. Só o cartão da compra tem botão, para os dois não parecerem ofertas separadas. */
.lp-offer,
.lp-bonus {
    padding: 2rem 1.5rem;
    border-radius: 0.8rem;
}

.lp-offer {
    border: 1px solid var(--lp-accent);
    background: var(--lp-bg);
    text-align: center;
}

/* Borda tracejada: indica um extra da compra, e não um segundo produto. */
.lp-bonus {
    border: 1px dashed var(--lp-accent);
    background: var(--lp-surface);
}

.lp-offer-title {
    margin-bottom: 1rem;
    color: var(--lp-heading);
    font-size: 1.4rem;
    font-weight: 700;
}

/* Lista dentro de um cartão: mais compacta e alinhada à esquerda, mesmo no cartão centralizado da
   compra, porque uma lista centralizada é difícil de percorrer. */
.lp-offer-list {
    margin-bottom: 1rem;
    text-align: left;
}

.lp-offer-list li {
    padding: 0.55rem 0 0.55rem 1.5rem;
}

.lp-bonus-tag {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--lp-accent);
    color: var(--lp-bg);
    font-family: var(--lp-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lp-bonus-term {
    margin-bottom: 1rem;
    border-radius: 0.5rem;
}

.lp-bonus-price {
    margin-top: 1.25rem;
    color: var(--lp-heading);
    font-size: 1.2rem;
}

.lp-bonus-price strong {
    color: var(--lp-accent);
}

.lp-bonus-price span {
    display: block;
    color: var(--lp-muted);
    font-size: 0.9rem;
}

.lp-price {
    margin: 1rem 0 0.25rem;
    color: var(--lp-heading);
    font-size: 2.6rem;
    font-weight: 700;
}

.lp-price del {
    margin-right: 0.6rem;
    color: var(--lp-muted);
    font-size: 1.3rem;
    font-weight: 400;
}

.lp-guarantee {
    margin-top: 1.5rem;
    color: var(--lp-text);
    font-size: 0.95rem;
}

.lp-guarantee strong {
    color: var(--lp-heading);
}

/* Perguntas frequentes. */
/* Centralizado abaixo do título. As respostas ficam à esquerda, porque um texto centralizado com várias
   linhas é mais difícil de ler. */
.lp-faq {
    max-width: 48rem;
    margin: 0 auto;
}

.lp-faq dt {
    padding-top: 1rem;
    color: var(--lp-heading);
    font-weight: 600;
}

.lp-faq dd {
    margin: 0.25rem 0 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lp-line);
}

.lp-footer {
    padding: 2rem 0;
    border-top: 1px solid var(--lp-line);
    color: var(--lp-muted);
    font-size: 0.85rem;
    text-align: center;
}

/*
 * Aviso de cookies: um cartão flutuando 1.25rem acima da borda inferior, com a borda de destaque e uma
 * sombra forte para ser notado, e uma animação curta de subida, retirada quando o visitante pede menos
 * movimento. Começa com o atributo `hidden`, e `[hidden] { display: none !important }` do Bootstrap vence
 * a regra de display abaixo. Por isso, cookies.js o mostra apenas removendo esse atributo.
 */
.lp-cookies {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 1050;
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.25rem 0;
    border: 1px solid var(--lp-accent);
    border-radius: 0.75rem;
    background-color: var(--lp-surface-2);
    color: var(--lp-text);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(232, 112, 79, 0.12);
    animation: lp-cookies-in 0.35s ease-out;
}

@keyframes lp-cookies-in {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-cookies {
        animation: none;
    }
}

.lp-cookies__inner {
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
}

.lp-cookies__text {
    flex: 1 1 auto;
    font-size: 0.9rem;
}

.lp-cookies__actions {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

.lp-btn--sm {
    --bs-btn-padding-x: 1.2rem;
    --bs-btn-padding-y: 0.45rem;
    box-shadow: none;
}

.lp-cookies__settings {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: 0.85rem;
    --bs-btn-color: var(--lp-muted);
    --bs-btn-hover-color: var(--lp-heading);
}

/*
 * Página de links. Usa a paleta acima sobre um fundo liso, sem a grade, e uma coluna estreita, para ser
 * lida do mesmo jeito no celular e no computador.
 */
.lp-links {
    min-height: 100vh;
    padding: 4rem 0 3.5rem;
}

.lp-links .container {
    max-width: 34rem;
}

.lp-links__header {
    margin-bottom: 2.5rem;
    text-align: center;
}

/* A mesma caixa guarda a foto ou, enquanto não houver foto, as iniciais. */
.lp-links__photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10rem;
    height: 10rem;
    margin: 0 auto 1.25rem;
    border: 2px solid var(--lp-accent);
    border-radius: 50%;
    background: var(--lp-surface-2);
    color: var(--lp-muted);
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    object-fit: cover;
}

.lp-links__name {
    margin-bottom: 0.5rem;
    color: var(--lp-heading);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.lp-links__tagline {
    margin: 0;
    color: var(--lp-text);
}

.lp-links__section {
    margin-bottom: 0.85rem;
    color: var(--lp-muted);
    font-family: var(--lp-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.lp-links__list {
    display: grid;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-links__item {
    display: block;
    padding: 1rem 1.25rem;
    border: 1px solid var(--lp-line);
    border-radius: 0.75rem;
    background: var(--lp-surface);
    color: var(--lp-heading);
    text-align: center;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lp-links__item:hover {
    border-color: var(--lp-accent);
    background: var(--lp-surface-2);
    color: var(--lp-heading);
}

.lp-links__item--featured {
    border-color: var(--lp-accent);
    background: rgba(232, 112, 79, 0.12);
}

.lp-links__label {
    display: block;
    font-weight: 700;
}

.lp-links__detail {
    display: block;
    margin-top: 0.2rem;
    color: var(--lp-muted);
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

/* E-book que ainda não está à venda ('soon' em LinksController). */
.lp-links__badge {
    display: inline-block;
    margin-bottom: 0.45rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--lp-accent);
    border-radius: 999px;
    color: var(--lp-accent-strong);
    font-family: var(--lp-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lp-links__soon {
    display: block;
    margin-top: 0.35rem;
    color: var(--lp-accent-strong);
    font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
    .lp-links__item {
        transition: none;
    }
}

@media (max-width: 767.98px) {
    .lp-cookies {
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        padding: 1rem 0;
    }
    .lp-cookies__inner {
        flex-direction: column;
        align-items: stretch;
    }
    .lp-cookies__actions .btn {
        flex: 1 1 0;
    }
    .lp-hero {
        padding: 2.5rem 0 3rem;
    }
    .lp-section {
        padding: 3rem 0;
    }
    .lp-stats-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 1.25rem;
    }
    .lp-modules {
        grid-template-columns: minmax(0, 1fr);
    }
}