/* ============================================================
   /vibe-coding · página pilar informacional
   Carrega DEPOIS do style.css (body.tg-dark-page dá a base escura),
   então aqui só entra o que é da página.

   Namespace: vbc-  (registrado em docs/css-namespaces.md)
   `vibe-` NÃO pode ser usado: já é da seção #vibe-coding da home,
   em css/home-dark-aesthetic.css (.vibe-section/.vibe-frame/.vibe-action).

   Raízes desta folha:
     vbc-page   vbc-wrap    vbc-hero   vbc-eyebrow  vbc-btn
     vbc-lead   vbc-toc     vbc-body   vbc-callout  vbc-steps
     vbc-table  vbc-faq     vbc-offer  vbc-note
   ============================================================ */

.vbc-page {
    --vbc-col: 1280px;
    /* coluna de leitura: ~72 caracteres, o alvo de conforto do corpo de texto */
    --vbc-read: 760px;
    --vbc-ink: #f3f5f7;
    --vbc-dim: rgba(255, 255, 255, .7);
    --vbc-faint: rgba(255, 255, 255, .48);
    --vbc-line: rgba(255, 255, 255, .13);
    --vbc-panel: #131619;
    --vbc-accent: #3ea7ec;
    background-color: #08090b;
}

.vbc-wrap {
    width: 100%;
    max-width: var(--vbc-col);
    margin: 0 auto;
    padding-inline: 24px;
}

/* ------------------------------------------------------------
   hero
   A capa é um master de 1920x1024 montado pela skill capa-hero,
   com o sujeito assado em x=1280 para a coluna de 1280px. Por isso
   object-position é center top e NUNCA uma porcentagem horizontal:
   qualquer deslocamento aqui desfaz o alinhamento da grade.
   ------------------------------------------------------------ */
.vbc-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 620px;
    padding: 140px 0 80px;
    overflow: hidden;
    background-color: #050607;
}

.vbc-hero-cover {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.vbc-hero-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.vbc-hero-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #050607 12%, rgba(5, 6, 7, .82) 42%, rgba(5, 6, 7, 0) 68%);
}

.vbc-hero-inner {
    position: relative;
    z-index: 1;
}

.vbc-hero-copy {
    /* a copy não cruza o eixo central, senão invade o sujeito da capa */
    max-width: min(56ch, 50%);
}

.vbc-hero h1 {
    color: #fff;
    font-size: clamp(38px, 5.6vw, 62px);
    line-height: 1.02;
}

.vbc-hero h1 strong {
    display: block;
    color: var(--vbc-accent);
    font-weight: 600;
}

.vbc-hero-sub {
    margin-top: 22px;
    color: var(--vbc-dim);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.6;
}

.vbc-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

.vbc-hero-mob {
    display: none;
}

.vbc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 15px;
    border: 1px solid rgba(62, 167, 236, .35);
    border-radius: 999px;
    background: rgba(62, 167, 236, .1);
    color: var(--vbc-accent);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   botão
   ------------------------------------------------------------ */
.vbc-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border: 1px solid var(--vbc-accent);
    border-radius: 999px;
    background: var(--vbc-accent);
    color: #04121c;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--t-md), color var(--t-md), transform var(--t-md);
}

.vbc-btn svg {
    width: 17px;
    height: 17px;
    flex: none;
}

.vbc-btn:hover {
    background: #6fc0f4;
    border-color: #6fc0f4;
    transform: translateY(-2px);
}

.vbc-btn.is-ghost {
    background: transparent;
    border-color: var(--vbc-line);
    color: var(--vbc-ink);
}

.vbc-btn.is-ghost:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .3);
}

/* ------------------------------------------------------------
   corpo do pilar
   ------------------------------------------------------------ */
.vbc-body {
    padding-top: 64px;
    padding-bottom: 96px;
}

.vbc-body > * {
    max-width: var(--vbc-read);
    margin-inline: auto;
}

.vbc-body p {
    margin-bottom: 20px;
    color: var(--vbc-dim);
    font-size: 17px;
    line-height: 1.72;
}

.vbc-body h2 {
    /* `auto` no eixo inline, e não 0: este shorthand vem DEPOIS de
       `.vbc-body > *` e zeraria a centralização da coluna de leitura */
    margin: 62px auto 20px;
    color: #fff;
    font-size: clamp(27px, 3.4vw, 37px);
    line-height: 1.12;
    scroll-margin-top: 96px;
}

.vbc-body h3 {
    margin: 34px auto 12px;
    color: var(--vbc-ink);
    font-size: 21px;
}

/* `:not(.vbc-btn)` não é enfeite: `.vbc-body a` tem especificidade maior que
   `.vbc-btn`, então sem a exclusão o botão do fim da página herda cor de link
   azul sobre fundo azul e o texto do CTA some. */
.vbc-body a:not(.vbc-btn) {
    color: var(--vbc-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.vbc-body a:not(.vbc-btn):hover {
    color: #8cd0f8;
}

.vbc-body strong {
    color: var(--vbc-ink);
    font-weight: 600;
}

.vbc-body ul {
    margin: 0 auto 24px;
    padding-left: 4px;
}

.vbc-body ul li {
    position: relative;
    margin-bottom: 11px;
    padding-left: 22px;
    color: var(--vbc-dim);
    font-size: 17px;
    line-height: 1.65;
}

.vbc-body ul li::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vbc-accent);
}

/* bloco answer-first: a resposta citável, logo abaixo do H1 */
.vbc-lead {
    padding: 28px 30px;
    border-left: 3px solid var(--vbc-accent);
    border-radius: 0 12px 12px 0;
    background: var(--vbc-panel);
}

.vbc-lead p {
    margin-bottom: 0;
    color: var(--vbc-ink);
    font-size: 19px;
    line-height: 1.68;
}

.vbc-lead p + p {
    margin-top: 16px;
}

/* ------------------------------------------------------------
   sumário
   ------------------------------------------------------------ */
.vbc-toc {
    margin-top: 40px;
    padding: 24px 28px;
    border: 1px solid var(--vbc-line);
    border-radius: 14px;
}

.vbc-toc-label {
    margin-bottom: 14px;
    color: var(--vbc-faint);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.vbc-toc ol {
    display: grid;
    gap: 9px;
    margin: 0;
    padding-left: 18px;
}

.vbc-toc li {
    color: var(--vbc-faint);
    font-size: 15px;
}

.vbc-toc a {
    color: var(--vbc-dim);
    text-decoration: none;
}

.vbc-toc a:hover {
    color: var(--vbc-accent);
}

/* ------------------------------------------------------------
   destaque da tese
   ------------------------------------------------------------ */
.vbc-callout {
    margin-top: 34px;
    margin-bottom: 34px;
    padding: 30px 32px;
    border: 1px solid rgba(62, 167, 236, .28);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(62, 167, 236, .1), rgba(62, 167, 236, .02));
}

.vbc-callout p {
    margin-bottom: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 500;
    line-height: 1.38;
}

.vbc-callout cite {
    display: block;
    margin-top: 16px;
    color: var(--vbc-faint);
    font-family: var(--font-body);
    font-size: 14px;
    font-style: normal;
}

/* ------------------------------------------------------------
   passos do método
   ------------------------------------------------------------ */
.vbc-steps {
    display: grid;
    gap: 16px;
    margin: 30px auto 34px;
    padding: 0;
    /* o style.css zera a marca só de <ul>; sem isto o <ol> soma a numeração
       nativa ao contador do ::before e o passo aparece numerado duas vezes */
    list-style: none;
    counter-reset: vbc-step;
}

.vbc-steps li {
    position: relative;
    padding: 20px 24px 20px 66px;
    border: 1px solid var(--vbc-line);
    border-radius: 14px;
    background: var(--vbc-panel);
    color: var(--vbc-dim);
    font-size: 16px;
    line-height: 1.65;
    counter-increment: vbc-step;
}

.vbc-steps li::before {
    content: counter(vbc-step, decimal-leading-zero);
    position: absolute;
    top: 20px;
    left: 24px;
    color: var(--vbc-accent);
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
}

.vbc-steps b {
    display: block;
    margin-bottom: 5px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
}

/* ------------------------------------------------------------
   tabela
   ------------------------------------------------------------ */
.vbc-tablewrap {
    margin: 26px auto 34px;
    overflow-x: auto;
}

.vbc-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 15.5px;
}

.vbc-table caption {
    margin-bottom: 12px;
    color: var(--vbc-faint);
    font-size: 13px;
    text-align: left;
}

.vbc-table th,
.vbc-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--vbc-line);
    color: var(--vbc-dim);
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
}

.vbc-table thead th {
    color: #fff;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.vbc-table tbody th {
    color: var(--vbc-ink);
    font-family: var(--font-body);
    font-size: 15.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   FAQ (o faq-schema.php lê estes <summary> + .vbc-faq-body)
   ------------------------------------------------------------ */
.vbc-faq {
    display: grid;
    gap: 12px;
    margin: 28px auto 0;
}

.vbc-faq details {
    border: 1px solid var(--vbc-line);
    border-radius: 14px;
    background: var(--vbc-panel);
}

.vbc-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 24px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.vbc-faq summary::-webkit-details-marker {
    display: none;
}

.vbc-faq summary::after {
    content: '+';
    flex: none;
    color: var(--vbc-accent);
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
}

.vbc-faq details[open] summary::after {
    /* sinal de menos (U+2212), não travessão: aqui é ícone de recolher */
    content: '\2212';
}

.vbc-faq-body {
    padding: 0 24px 20px;
}

.vbc-faq-body p {
    margin-bottom: 0;
    font-size: 16px;
}

.vbc-faq-body p + p {
    margin-top: 14px;
}

/* ------------------------------------------------------------
   oferta (fim da página, depois do conteúdo)
   ------------------------------------------------------------ */
.vbc-offer {
    margin-top: 56px;
    padding: 38px 36px;
    border: 1px solid rgba(62, 167, 236, .3);
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(62, 167, 236, .14), rgba(19, 22, 25, .9));
    scroll-margin-top: 96px;
}

.vbc-offer h2 {
    margin-top: 0;
    margin-bottom: 14px;
}

.vbc-offer-grade {
    display: grid;
    gap: 10px;
    margin: 24px 0 26px;
    padding: 0;
}

.vbc-offer-grade li {
    margin-bottom: 0;
    padding-left: 22px;
}

.vbc-offer-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 22px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 600;
}

.vbc-offer-price span {
    color: var(--vbc-faint);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 400;
}

.vbc-note {
    margin-top: 18px;
    color: var(--vbc-faint);
    font-size: 14px;
    line-height: 1.6;
}

/* tablet: a capa continua de fundo, mas o cover já escala pela altura
   e o sujeito anda, então a copy ganha folga e o véu escurece mais */
@media (max-width: 1023px) {
    .vbc-hero-copy {
        max-width: min(56ch, 64%);
    }

    .vbc-hero-cover::after {
        background: linear-gradient(90deg, #050607 20%, rgba(5, 6, 7, .9) 58%, rgba(5, 6, 7, .25) 100%);
    }
}

/* ------------------------------------------------------------
   mobile: a capa vira faixa de topo e a copy desce, em vez de
   texto por cima da foto (foto atrás do texto vira sombra ilegível).
   O corte é em 767px de propósito: é a mesma media query que o
   partials/header.php usa para escolher qual capa pré-carregar.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    .vbc-hero {
        display: block;
        min-height: 0;
        padding: var(--frame, 72px) 0 56px;
    }

    .vbc-hero-cover {
        display: none;
    }

    .vbc-hero-mob {
        display: block;
        width: 100%;
        height: auto;
        margin-bottom: 26px;
        -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    }

    .vbc-hero-copy {
        max-width: none;
    }

    .vbc-hero-cta .vbc-btn {
        width: 100%;
        justify-content: center;
    }

    .vbc-body {
        padding-top: 40px;
        padding-bottom: 64px;
    }

    .vbc-lead,
    .vbc-toc,
    .vbc-callout,
    .vbc-offer {
        padding-inline: 22px;
    }

    .vbc-offer {
        padding-block: 30px;
    }

    .vbc-steps li {
        padding: 18px 20px 20px;
    }

    .vbc-steps li::before {
        position: static;
        display: block;
        margin-bottom: 6px;
    }
}