/* ==========================================================================
   Ficha técnica — normas e construção em tabela
   Continua a folha clara do configurador e fecha com cantos arredondados
   sobre o fundo escuro da página.
   ========================================================================== */

.vspecs {
    /* "Ver ficha técnica" pula para cá; sem respiro próprio no topo, o título cairia sob o header fixo. */
    scroll-margin-top: calc(var(--header-h) + var(--header-top));
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Seção clara colada em outra clara: o respiro de cima já veio da anterior. */
.vconfig + .vspecs {
    padding-top: 0;
}

.vspecs__inner {
    display: grid;
    gap: var(--space-8);
    padding-top: clamp(var(--space-10), 5vw, var(--space-16));
    border-top: 1px solid var(--hairline);
}

.vspecs__head {
    display: grid;
    align-content: start;
    gap: var(--space-5);
}

.vspecs__head .display-title__line:nth-child(1) { --reveal-delay: 80ms; }
.vspecs__head .display-title__line:nth-child(2) { --reveal-delay: 160ms; }

.vspecs__note {
    max-width: 24rem;
    font-size: var(--fs-sm);
    color: var(--ink-3);
    --reveal-delay: 240ms;
}

.vspecs__card {
    overflow-x: auto;
    padding: var(--space-2) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    --reveal-delay: 200ms;
}

/* Layout fixo: o rótulo tem largura própria e as construções dividem o resto por igual. */
.vspecs__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    line-height: 1.45;
}

.vspecs__table th,
.vspecs__table td {
    padding: var(--space-4) var(--space-3) var(--space-4) 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--hairline);
}

.vspecs__table tbody tr:last-child th,
.vspecs__table tbody tr:last-child td {
    border-bottom: 0;
}

.vspecs__table thead th {
    padding-block: var(--space-4) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--co-accent-text);
}

.vspecs__table thead td,
.vspecs__table tbody th {
    width: 34%;
}

.vspecs__table tbody th {
    font-weight: 600;
    color: var(--ink-2);
}

.vspecs__table td {
    color: var(--ink);
}

@media (min-width: 768px) {
    .vspecs {
        border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    }

    .vspecs__card {
        padding: var(--space-3) var(--space-8);
        border-radius: var(--radius-xl);
    }

    .vspecs__table {
        font-size: var(--fs-md);
    }

    .vspecs__table tbody th,
    .vspecs__table thead td {
        width: 30%;
    }
}

@media (min-width: 1024px) {
    .vspecs__inner {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: clamp(var(--space-12), 6vw, 7rem);
    }

    /* O título acompanha a tabela enquanto ela rola. */
    .vspecs__head {
        position: sticky;
        top: calc(var(--header-h) + var(--header-top) + var(--space-6));
    }
}