/* =============================================================================================
   LOJA — a densidade "respirada" do sistema.
   Consome os tokens de design-system.css e não declara nenhum valor cru de cor, espaço ou tipo.
   ============================================================================================= */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--sup-pagina);
}

main {
    flex: 1 0 auto;
    padding-bottom: var(--e-7);
}

/* Quando a página termina numa seção da home, o respiro já vem do padding da própria seção:
   somar o do <main> empilhava mais de 200px de vazio antes do rodapé. */
main:has(> .secao:last-child) {
    padding-bottom: 0;
}

/* =============================================================================================
   CABEÇALHO — e-commerce industrial, não barra de aplicação
   ============================================================================================= */

.loja-topo {
    background: var(--marca-petroleo-950);
    color: var(--txt-claro-suave);
    font-size: var(--t-xs);
    letter-spacing: .04em;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.loja-topo .destaque {
    color: var(--txt-claro);
    font-weight: 500;
}

.loja-topo a {
    color: var(--txt-claro-suave);
    text-decoration: none;
    transition: color var(--transicao);
}

.loja-topo a:hover { color: var(--txt-claro); }

/* Sair é um POST, então é <button>. Aqui ele veste o mesmo traço dos links da barra — a diferença
   entre navegar e encerrar a sessão está no rótulo, não em um botão destoante no topo. */
.loja-sair {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    color: var(--txt-claro-suave);
    cursor: pointer;
    transition: color var(--transicao);
}

.loja-sair:hover { color: var(--txt-claro); }

.loja-cabecalho {
    background: var(--marca-petroleo-900);
    background-image: var(--escovado);
    color: var(--txt-claro);
    /* O fio âmbar fecha o cabeçalho. 2px: é indicador, não faixa — âmbar em área grande roubaria
       do petróleo o posto de cor dominante. */
    border-bottom: 2px solid var(--cobre);
}

/* Grade de três zonas: marca à esquerda, busca ocupando o meio — ela é a funcionalidade
   central desta loja —, cotação à direita. */
.loja-cabecalho-grade {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    /* Os tres grupos precisam ler como tres grupos. Com 32px eles se tocavam e o cabeçalho
       parecia barra de aplicação; 56px separa sem esticar a altura. */
    gap: 3.5rem;
    padding: var(--e-5) 0;
}

.loja-cabecalho .marca-tipografica {
    color: var(--txt-claro);
    /* Área útil do logotipo: a marca passa a ocupar a altura de um componente, não a de um
       rótulo perdido no canto. */
    padding: var(--e-1) 0;
    gap: 5px;
}

.loja-cabecalho .marca-tipografica .nome { font-size: 2rem; }

.loja-cabecalho .marca-tipografica .regua {
    opacity: .45;
    transition: opacity var(--transicao);
}

.loja-cabecalho .marca-tipografica:hover .regua { opacity: .8; }

/* ---------- Busca ---------- */
.loja-busca {
    display: flex;
    align-items: stretch;
    min-height: 3.25rem;
    background: var(--sup-cartao);
    border-radius: var(--raio);
    overflow: hidden;
    /* Duas camadas: o contorno do componente e uma sombra interna finíssima no topo, que faz o
       campo parecer rebaixado na chapa do cabeçalho em vez de colado sobre ela. */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .14),
        inset 0 1px 0 rgba(6, 28, 31, .10);
    transition: box-shadow var(--transicao);
}

.loja-busca:hover {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .32),
        inset 0 1px 0 rgba(6, 28, 31, .10);
}

.loja-busca:focus-within {
    box-shadow:
        0 0 0 2px var(--cobre-claro),
        inset 0 1px 0 rgba(6, 28, 31, .10);
}

/* A lupa, desenhada em CSS: não há biblioteca de ícone no projeto, e uma requisição a mais por
   um símbolo de 12px não se justifica. */
.loja-busca .lupa {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: var(--e-4);
    color: var(--txt-fraco);
    transition: color var(--transicao);
}

.loja-busca:focus-within .lupa { color: var(--acento); }

.loja-busca .lupa::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: .72rem;
    height: .72rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

/* O cabo sai do quadrante inferior direito do aro, a 45°: girar sobre a extremidade esquerda é
   o que faz a haste encostar no aro em vez de flutuar ao lado dele. */
.loja-busca .lupa::after {
    content: "";
    position: absolute;
    left: .59rem;
    top: .59rem;
    width: .4rem;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: left center;
}

.loja-busca .form-control {
    border: 0;
    border-radius: 0;
    padding: var(--e-3) var(--e-4);
    font-size: var(--t-md);
    letter-spacing: .005em;
}

.loja-busca .form-control::placeholder { color: var(--txt-fraco); }

.loja-busca .form-control:focus { box-shadow: none; }

.loja-busca .btn {
    display: inline-flex;
    align-items: center;
    background: var(--marca-petroleo);
    border: 0;
    border-radius: 0;
    color: var(--txt-claro);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    padding-inline: var(--e-6);
    letter-spacing: .12em;
    transition: background-color var(--transicao);
}

.loja-busca .btn:hover,
.loja-busca .btn:focus-visible { background: var(--marca-petroleo-600); }

.loja-busca .btn:active { background: var(--marca-petroleo-700); }

/* ---------- Cotação ---------- */
.loja-cotacao {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    text-decoration: none;
    color: var(--txt-claro);
    font-size: var(--t-sm);
    font-weight: 500;
    white-space: nowrap;
    /* Mesma altura da busca: dois componentes vizinhos com alturas diferentes é o detalhe que
       faz um cabeçalho parecer montado às pressas. */
    min-height: 3.25rem;
    padding: 0 var(--e-4);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--raio);
    transition: border-color var(--transicao), background-color var(--transicao);
}

.loja-cotacao:hover {
    border-color: var(--cobre-claro);
    background: rgba(255, 255, 255, .06);
    color: var(--txt-claro);
}

.loja-cotacao .contagem {
    font-variant-numeric: tabular-nums;
    background: var(--cobre);
    color: var(--txt-claro);
    border-radius: var(--raio-sm);
    padding: 0 .42em;
    font-size: var(--t-xs);
    font-weight: 700;
    min-width: 1.5em;
    text-align: center;
}

/* ---------- Menu de categorias ---------- */
.loja-menu {
    background: var(--marca-petroleo-800);
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

.loja-menu::-webkit-scrollbar { display: none; }

.loja-menu a {
    color: var(--txt-claro-suave);
    text-decoration: none;
    padding: var(--e-3) var(--e-4);
    display: inline-block;
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: .02em;
    border-bottom: 2px solid transparent;
    transition: color var(--transicao), border-color var(--transicao);
}

.loja-menu a:first-child { padding-left: 0; }

.loja-menu a:hover,
.loja-menu a:focus-visible {
    color: var(--txt-claro);
    border-bottom-color: var(--cobre-claro);
}

/* A calculadora não é categoria. Um filete antes dela e o cobre no lugar do cinza dizem isso
   sem precisar de rótulo — a barra rola na horizontal, então empurrá-la para a direita com
   margem automática não funcionaria aqui. */
.loja-menu a.ferramenta {
    border-left: 1px solid var(--aco-700);
    margin-left: var(--e-2);
    color: var(--cobre-claro);
}

.loja-menu a.ferramenta:hover,
.loja-menu a.ferramenta:focus-visible {
    color: var(--txt-claro);
}

/* =============================================================================================
   HOME
   ============================================================================================= */

/* ---------- Hero editorial: texto à esquerda, material à direita ---------- */
.hero {
    background: var(--marca-petroleo-900);
    color: var(--txt-claro);
    position: relative;
    overflow: hidden;
}

.hero-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    align-items: stretch;
    gap: var(--e-9);
    min-height: 31rem;
}

.hero-texto {
    padding: var(--e-9) 0;
    align-self: center;
    max-width: 33rem;
}

.hero h1 {
    font-size: var(--t-4xl);
    /* 1,04 em vez de 1,08: a 64px as duas linhas viram um bloco, e é o bloco que carrega a
       promessa. O tracking abre de -.03 para -.024 porque a serifada não pede tanto aperto —
       em -.03 o "certa." começava a fechar. */
    line-height: 1.04;
    letter-spacing: -.024em;
    margin: var(--e-5) 0 var(--e-5);
}

/* A segunda linha da headline em petróleo claro: separa a promessa em duas ideias sem precisar
   de dois blocos de texto. */
.hero h1 .segunda {
    display: block;
    color: var(--marca-petroleo-300);
}

.hero-sub {
    font-size: var(--t-lg);
    line-height: 1.55;
    color: var(--txt-claro-suave);
    margin-bottom: var(--e-7);
    /* 52ch: a medida em que a linha ainda se lê de um golpe. Em rem a largura variava com o
       corpo do texto e às vezes caía em quatro linhas. */
    max-width: 52ch;
}

.hero-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-4);
}

.hero-acoes .btn {
    padding: .85rem var(--e-6);
    font-size: var(--t-md);
    font-weight: 600;
    letter-spacing: .01em;
}

/* O secundário é contorno, não preenchimento: duas ações preenchidas competiriam. */
.hero-acoes .btn-outline-light {
    --bs-btn-border-color: rgba(255, 255, 255, .38);
    --bs-btn-hover-bg: rgba(255, 255, 255, .10);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .70);
    --bs-btn-hover-color: var(--aco-000);
}

/* ---------- O material, desenhado ----------
   Não há fotografia no projeto (ver docs/identidade-visual.md). Até haver, a composição é uma
   pilha de chapas em corte, feita com gradientes: aresta iluminada em cima, corpo escovado,
   sombra embaixo. É honesto — sugere o material sem fingir ser uma foto dele. */
.hero-material {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e-6) 0;
    min-height: 100%;
}

.hero-material svg {
    width: 100%;
    height: auto;
    max-height: 30rem;
    /* Sombra projetada da pilha sobre o fundo — dá peso ao material. */
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .45));
}

.hero-material .marcacao {
    position: absolute;
    right: 0;
    bottom: var(--e-5);
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cobre-claro);
}

.hero-material .marcacao::before {
    content: "";
    width: 3rem;
    height: 1px;
    background: currentColor;
}

/* ---------- Faixa de benefícios: uma linha, não quatro módulos de SaaS ---------- */
.faixa-beneficios {
    background: var(--marca-petroleo-950);
    color: var(--txt-claro-suave);
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.faixa-beneficios .linha {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.faixa-beneficios .item {
    padding: var(--e-5) var(--e-5) var(--e-5) var(--e-5);
    font-size: var(--t-sm);
    line-height: 1.55;
    border-left: 1px solid rgba(255, 255, 255, .07);
}

.faixa-beneficios .item:first-child {
    border-left: 0;
    padding-left: 0;
}

.faixa-beneficios strong {
    display: block;
    color: var(--txt-claro);
    font-weight: 600;
    letter-spacing: .01em;
    margin-bottom: 3px;
}

/* ---------- Seções da home ---------- */
.secao {
    padding: var(--e-9) 0;
}

.secao.clara { background: var(--sup-cartao); }
.secao.tecnica { background: var(--sup-pagina); }

.secao-cabeca {
    max-width: 44rem;
    margin-bottom: var(--e-6);
}

.secao-cabeca .numero {
    font-family: var(--fonte-dado);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--cobre);
    display: block;
    margin-bottom: var(--e-3);
}

.secao-cabeca h2 {
    font-family: var(--fonte-marca);
    font-size: var(--t-2xl);
    line-height: var(--lh-apertada);
    letter-spacing: -.015em;
    margin-bottom: var(--e-3);
}

.secao-cabeca p {
    color: var(--txt-suave);
    line-height: 1.65;
    margin: 0;
    max-width: 62ch;
}

/* ---------- Modos de compra ----------
   O numero abre o cartao como abre uma prancha tecnica: 01 a 04, monoespacado, em ambar, com a
   regua fina ao lado. E o que separa esta grade de quatro modulos de SaaS. */
.modos {
    counter-reset: modo;
}

.modo {
    position: relative;
    height: 100%;
    background: var(--sup-cartao);
    border: 1px solid var(--borda);
    border-top: 2px solid var(--marca-petroleo);
    border-radius: var(--raio);
    padding: var(--e-5) var(--e-5) var(--e-6);
    transition: border-color var(--transicao),
                box-shadow var(--transicao),
                transform var(--transicao);
}

.modo:hover {
    border-color: var(--borda-forte);
    border-top-color: var(--cobre);
    box-shadow: var(--sombra);
    transform: translateY(-2px);
}

/* Numero e regua: contador CSS, sem marcacao a mais. */
.modo::before {
    counter-increment: modo;
    content: counter(modo, decimal-leading-zero);
    display: block;
    font-family: var(--fonte-dado);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--cobre);
}

.modo .rotulo {
    display: block;
    margin-top: var(--e-2);
    padding-top: var(--e-2);
    border-top: 1px solid var(--borda);
    color: var(--marca-petroleo);
    letter-spacing: .12em;
    transition: border-color var(--transicao);
}

.modo:hover .rotulo { border-top-color: var(--cobre-fraco); }

.modo h3 {
    font-size: var(--t-lg);
    line-height: var(--lh-titulo);
    letter-spacing: -.01em;
    margin: var(--e-3) 0 var(--e-3);
}

.modo p {
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--txt-suave);
    margin: 0;
}

/* ---------- Passos do processo ----------
   Uma régua de cinco marcações: a linha atravessa as cinco etapas sem interrupção, cada etapa
   traz seu traço de cota e o número, e o texto fica largo o bastante para ser varrido de uma
   passada. */
.passos {
    counter-reset: passo;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    /* A linha contínua vive no container, não em cada etapa: assim ela não quebra nas emendas. */
    border-top: 1px solid var(--borda-forte);
}

.passo {
    counter-increment: passo;
    position: relative;
    padding: var(--e-5) var(--e-5) 0 0;
}

/* O traço de cota que marca o início de cada etapa sobre a régua. */
.passo::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--borda-forte);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transicao-lenta);
}

.passo::before {
    content: counter(passo, decimal-leading-zero);
    position: absolute;
    top: var(--e-4);
    left: 0;
    font-family: var(--fonte-dado);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--cobre);
}

.passo h3 {
    font-size: var(--t-md);
    font-weight: 600;
    line-height: var(--lh-titulo);
    letter-spacing: -.005em;
    margin: var(--e-6) 0 var(--e-2);
}

.passo p {
    font-size: var(--t-sm);
    line-height: 1.6;
    color: var(--txt);
    margin: 0;
}

/* A primeira etapa é onde o visitante entra: a cota dela já está traçada. */
.passo.ativo::after {
    background: var(--cobre);
    transform: scaleX(1);
}

.passos:hover .passo::after { transform: scaleX(1); }

/* ---------- Chamada B2B ----------
   É institucional, não promocional: nenhuma cor de oferta, nenhum selo. A presença vem da altura,
   do respiro interno e do título em serifada — e de uma textura industrial no limiar do visível. */
.chamada-b2b {
    position: relative;
    background:
        radial-gradient(120% 140% at 12% 0%,
            rgba(107, 184, 194, .13) 0%,
            transparent 58%),
        var(--marca-petroleo-800);
    background-image:
        var(--escovado),
        radial-gradient(120% 140% at 12% 0%,
            rgba(107, 184, 194, .13) 0%,
            transparent 58%);
    color: var(--txt-claro);
    border-radius: var(--raio-lg);
    padding: var(--e-8) var(--e-7);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-6);
    overflow: hidden;
}

/* Fio de luz na aresta de cima: a mesma aresta viva das chapas. */
.chamada-b2b::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(190, 236, 243, .45) 0%,
        rgba(190, 236, 243, .10) 42%,
        transparent 78%);
}

.chamada-b2b h2 {
    font-family: var(--fonte-marca);
    font-size: var(--t-2xl);
    line-height: var(--lh-apertada);
    letter-spacing: -.015em;
    margin: var(--e-3) 0 var(--e-3);
    max-width: 26ch;
}

.chamada-b2b p {
    color: var(--txt-claro-suave);
    margin: 0;
    max-width: 58ch;
    font-size: var(--t-sm);
    line-height: 1.65;
}

.chamada-b2b .acoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
}

.chamada-b2b .btn {
    padding: .7rem var(--e-5);
    font-weight: 600;
}

/* =============================================================================================
   VITRINE — filtros
   ============================================================================================= */

.filtros {
    font-size: var(--t-sm);
}

/* A chave fica fora da vista mas continua no fluxo de foco: é ela que abre o painel no celular. */
.filtros-chave {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.filtros-resumo { display: none; }

.filtros-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    margin-bottom: var(--e-3);
}

.filtros-cabeca h2 {
    margin: 0;
    font-size: var(--t-md);
    font-weight: 600;
}

.filtros-cabeca a {
    font-size: var(--t-sm);
}

/* No desktop não há chave nenhuma: o painel é parte da página. */
@media (min-width: 992px) {
    .filtros-chave { display: none; }
}

@media (max-width: 991.98px) {
    .filtros-resumo {
        display: flex;
        align-items: center;
        gap: var(--e-2);
        padding: var(--e-3) var(--e-4);
        margin-bottom: var(--e-4);
        cursor: pointer;
        background: var(--sup-cartao);
        border: 1px solid var(--borda-forte);
        border-radius: var(--raio);
    }

    .filtros-chave:focus-visible + .filtros-resumo {
        border-color: var(--acento);
        box-shadow: var(--foco);
    }

    .filtros-resumo .marcado {
        font-size: var(--t-xs);
        color: var(--acento);
    }

    /* O sinal de abrir e fechar, desenhado: não há biblioteca de ícone no projeto. */
    .filtros-resumo::after {
        content: "";
        width: .5rem;
        height: .5rem;
        margin-left: auto;
        border-right: 1.5px solid var(--txt-suave);
        border-bottom: 1.5px solid var(--txt-suave);
        transform: rotate(45deg) translate(-2px, -2px);
        transition: transform var(--transicao);
    }

    .filtros-chave:checked + .filtros-resumo::after {
        transform: rotate(-135deg) translate(-2px, -2px);
    }

    .filtros-chave:not(:checked) ~ .filtros-corpo {
        display: none;
    }

    /* O título já está no resumo — repeti-lo dentro seria eco. */
    .filtros-cabeca h2 { display: none; }

    .filtros-cabeca { justify-content: flex-end; }
}

.filtro-grupo {
    border-top: 1px solid var(--borda);
    padding: var(--e-4) 0;
}

.filtro-grupo:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.filtro-titulo {
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--txt-fraco);
    margin-bottom: var(--e-2);
}

.filtro-categoria {
    display: block;
    padding: var(--e-1) 0;
    color: var(--txt);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: var(--e-2);
    margin-left: calc(var(--e-2) * -1);
    transition: color var(--transicao), border-color var(--transicao);
}

.filtro-categoria:hover {
    color: var(--acento);
}

.filtro-categoria.filha {
    padding-left: var(--e-4);
    font-size: var(--t-sm);
    color: var(--txt-suave);
}

.filtro-categoria.ativa {
    font-weight: 600;
    color: var(--acento);
    border-left-color: var(--acento);
}

.filtro-opcao {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-1) 0;
    cursor: pointer;
}

.filtro-opcao:hover {
    color: var(--acento);
}

.filtro-opcao .contador {
    margin-left: auto;
    color: var(--txt-fraco);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
}

.filtro-faixa {
    margin-bottom: var(--e-2);
}

.filtro-faixa label {
    display: block;
    font-size: var(--t-xs);
    color: var(--txt-fraco);
    margin-bottom: var(--e-1);
}

/* =============================================================================================
   VITRINE — cabeçalho da listagem
   ============================================================================================= */

.catalogo-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-4);
    padding-bottom: var(--e-4);
    margin-bottom: var(--e-5);
    border-bottom: 1px solid var(--borda);
}

.catalogo-cabecalho h1 {
    font-family: var(--fonte-marca);
    font-size: var(--t-2xl);
    line-height: var(--lh-apertada);
    letter-spacing: -.015em;
    margin: var(--e-2) 0 0;
}

.catalogo-cabecalho .descricao {
    margin: var(--e-2) 0 0;
    max-width: 52ch;
    font-size: var(--t-sm);
    color: var(--txt-suave);
}

.catalogo-cabecalho .controle {
    display: flex;
    align-items: center;
    gap: var(--e-5);
    padding-bottom: .35rem;
}

.catalogo-cabecalho .contagem {
    display: flex;
    align-items: baseline;
    gap: var(--e-1);
}

.catalogo-cabecalho .contagem .num {
    font-size: var(--t-lg);
    font-weight: 600;
    line-height: 1;
}

.catalogo-cabecalho .contagem .termo {
    font-size: var(--t-sm);
    color: var(--txt-suave);
}

.catalogo-cabecalho .ordenacao {
    display: flex;
    align-items: center;
    gap: var(--e-2);
}

.catalogo-cabecalho .ordenacao select {
    width: auto;
}

/* =============================================================================================
   VITRINE — cartão do produto
   Uma ficha de material, não um cartão de loja: o desenho da chapa no topo, o nome, e a ficha
   curta com liga, acabamento e nº de combinações — a linguagem de quem compra inox. Sem preço:
   o catálogo não tem (§14).
   ============================================================================================= */

.cartao-produto {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--sup-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.cartao-produto:hover {
    border-color: var(--borda-forte);
    box-shadow: var(--sombra);
    transform: translateY(-2px);
}

/* ---------- O material no lugar da foto ---------- */
.cartao-material {
    position: relative;
    aspect-ratio: 16 / 9;
    background:
        linear-gradient(158deg,
            var(--marca-petroleo-800) 0%,
            var(--marca-petroleo-900) 46%,
            var(--marca-petroleo-950) 100%);
    overflow: hidden;
}

/* Direção de laminação: as linhas finíssimas do escovado. */
.cartao-material::before {
    content: "";
    position: absolute;
    inset: -20%;
    background-image: var(--escovado);
    transform: rotate(-13deg);
}

/* O brilho que corre na superfície. Desloca no hover — a chapa "vira" para a luz. */
.cartao-material::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(104deg,
        transparent 20%,
        rgba(255, 255, 255, .13) 42%,
        rgba(255, 255, 255, .02) 55%,
        transparent 78%);
    transform: translateX(-8%);
    transition: transform var(--transicao-lenta);
}

.cartao-produto:hover .cartao-material::after {
    transform: translateX(8%);
}

/* A pilha vista de canto: o plano da chapa em perspectiva, com o fio de luz na aresta superior e
   as lâminas de baixo desenhadas por sombras empilhadas. É o mesmo gesto do herói, reduzido ao
   tamanho do cartão — o que faz o cartão parecer material, e não um bloco de cor. */
.cartao-material .corte {
    position: absolute;
    left: 6%;
    right: -14%;
    bottom: 30%;
    height: 30%;
    transform: skewY(-9deg);
    background: linear-gradient(108deg,
        rgba(255, 255, 255, .17) 0%,
        rgba(255, 255, 255, .04) 44%,
        rgba(0, 0, 0, .26) 100%);
    border-top: 1px solid rgba(160, 220, 230, .55);
    box-shadow:
        0 9px 0 -1px rgba(0, 0, 0, .34),
        0 11px 0 -1px rgba(180, 230, 240, .16),
        0 20px 0 -2px rgba(0, 0, 0, .34),
        0 22px 0 -2px rgba(180, 230, 240, .12);
}

/* Marca de cota junto à aresta: a referência dimensional da casa, sem número — número aqui
   seria especificação inventada. */
.cartao-material .corte::after {
    content: "";
    position: absolute;
    left: -3%;
    top: -34%;
    width: 1px;
    height: 30%;
    background: var(--cobre-claro);
    opacity: .55;
    box-shadow: -3px 0 0 -2.5px var(--cobre-claro), 3px 0 0 -2.5px var(--cobre-claro);
}

.cartao-material .marca {
    position: absolute;
    left: var(--e-3);
    top: var(--e-3);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--acento-sobre-escuro);
}

.cartao-corpo {
    flex: 1 1 auto;
    padding: var(--e-4);
}

.cartao-nome {
    font-weight: 600;
    font-size: var(--t-md);
    line-height: var(--lh-apertada);
    margin: 0 0 var(--e-3);
}

/* ---------- Ficha curta: rótulo à esquerda, dado à direita ---------- */
.cartao-ficha {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3rem var(--e-3);
    margin: 0;
    font-size: var(--t-sm);
}

.cartao-ficha dt {
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--txt-fraco);
    align-self: center;
}

.cartao-ficha dd {
    margin: 0;
    color: var(--txt);
    overflow-wrap: anywhere;
}

.cartao-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-4);
    border-top: 1px solid var(--g-100);
}

/* Disponibilidade real, vinda do estoque — nunca um selo decorativo. */
.cartao-rodape .estoque {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--acento);
}

.cartao-rodape .estoque::before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: currentColor;
}

.cartao-rodape .estoque.sob-encomenda {
    color: var(--txt-fraco);
}

/* =============================================================================================
   PÁGINA DE PRODUTO — o projeto dentro do projeto
   ============================================================================================= */

/* ---------- O material abrindo a página ---------- */
.produto-material {
    position: relative;
    aspect-ratio: 21 / 8;
    margin-bottom: var(--e-5);
    border-radius: var(--raio);
    overflow: hidden;
    background:
        radial-gradient(110% 90% at 36% 48%,
            rgba(107, 184, 194, .20) 0%,
            rgba(23, 96, 106, .10) 44%,
            transparent 76%),
        linear-gradient(158deg,
            var(--marca-petroleo-800) 0%,
            var(--marca-petroleo-900) 48%,
            var(--marca-petroleo-950) 100%);
}

/* Direção de laminação. */
.produto-material::before {
    content: "";
    position: absolute;
    inset: -20%;
    background-image: var(--escovado);
    transform: rotate(-13deg);
}

/* A pilha de chapas em perspectiva — mesmo desenho do herói e dos cartões. */
.produto-material .plano {
    position: absolute;
    left: 16%;
    right: 14%;
    top: 44%;
    height: 13%;
    transform: skewY(-6deg);
    background: linear-gradient(102deg,
        rgba(150, 214, 223, .44) 0%,
        rgba(76, 155, 167, .32) 36%,
        rgba(26, 84, 92, .38) 74%,
        rgba(10, 42, 46, .54) 100%);
    border-top: 1px solid rgba(190, 236, 243, .72);
    box-shadow:
        0 14px 0 -1px rgba(6, 28, 31, .55),
        0 17px 0 -1px rgba(150, 214, 223, .28),
        0 31px 0 -2px rgba(6, 28, 31, .55),
        0 34px 0 -2px rgba(150, 214, 223, .20);
}

/* Cota apoiada na aresta: referência dimensional sem número. */
.produto-material .plano::after {
    content: "";
    position: absolute;
    left: -6%;
    top: 42%;
    width: 1px;
    height: 130%;
    background: var(--cobre-claro);
    opacity: .55;
    box-shadow: -4px 0 0 -3px var(--cobre-claro), 4px 0 0 -3px var(--cobre-claro);
}

.produto-material .etiquetas {
    position: absolute;
    left: var(--e-5);
    top: var(--e-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}

/* Etiqueta de material: liga, acabamento e geometria do SKU selecionado — dado de cadastro. */
.produto-material .etiqueta {
    padding: .2rem .55rem;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--acento-sobre-escuro);
    border: 1px solid rgba(127, 201, 212, .38);
    border-radius: var(--r-1);
}

.produto-material .cota {
    position: absolute;
    right: var(--e-5);
    bottom: var(--e-4);
    color: var(--cobre-claro);
}


.produto-ficha th {
    width: 42%;
    font-weight: 500;
    color: var(--txt-suave);
    font-size: var(--t-sm);
}

.produto-ficha td {
    font-size: var(--t-sm);
}

/* Tabela de variações: é aqui que o comprador decide. Linha selecionada marcada por barra
   lateral, não só por fundo — o fundo sozinho some para quem enxerga pouco contraste. */
.variacao-tabela td,
.variacao-tabela th {
    font-size: var(--t-sm);
}

.variacao-tabela tbody tr {
    cursor: pointer;
    transition: background-color var(--transicao);
}

.variacao-tabela tbody tr:hover {
    background: var(--g-050);
}

.variacao-tabela tr.selecionada {
    background: var(--acento-fraco);
}

.variacao-tabela tr.selecionada td:first-child {
    box-shadow: inset 3px 0 0 var(--acento);
}

/* ---------- Caixa de cotação ---------- */
.caixa-compra {
    background: var(--sup-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--e-4);
    position: sticky;
    top: var(--e-4);
}

.caixa-compra .titulo {
    font-size: var(--t-lg);
    font-weight: 600;
    margin-bottom: var(--e-1);
}

/* O peso calculado é o número que o comprador veio buscar: tratado como leitura de
   instrumento — grande, tabular, com a unidade em corpo menor. */
.preco-calculado {
    font-size: var(--t-2xl);
    font-weight: 600;
    color: var(--g-900);
    line-height: var(--lh-apertada);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.preco-base {
    font-size: var(--t-xs);
    color: var(--txt-fraco);
}

/* =============================================================================================
   COTAÇÃO — lista, envio e acompanhamento
   ============================================================================================= */

/* Linha do tempo da entrega. O fio vertical liga os eventos; o marcador do primeiro (o mais
   recente) é cheio, os demais vazados — a leitura começa pelo que acabou de acontecer. */
.andamento {
    list-style: none;
    margin: 0;
    padding: 0;
}

.andamento li {
    position: relative;
    padding: 0 0 var(--e-4) var(--e-5);
    border-left: 1px solid var(--borda);
}

.andamento li:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.andamento li::before {
    content: "";
    position: absolute;
    left: -4.5px;
    top: .45em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sup-cartao);
    border: 2px solid var(--borda-forte);
}

.andamento li:first-child::before {
    background: var(--acento);
    border-color: var(--acento);
}

.andamento .quando {
    font-size: var(--t-xs);
    color: var(--txt-fraco);
    font-variant-numeric: tabular-nums;
}

/* =============================================================================================
   RODAPÉ
   ============================================================================================= */

.loja-rodape {
    background: var(--sup-escura);
    color: var(--txt-claro-suave);
    font-size: var(--t-sm);
    padding: var(--e-8) 0 var(--e-5);
}

/* A marca fecha o rodapé com o mesmo peso com que abre o cabeçalho. */
.loja-rodape .marca-tipografica .nome {
    font-size: 1.65rem;
    color: var(--aco-000);
}

.loja-rodape h6 {
    color: var(--aco-000);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    /* A régua fina sob o título separa as colunas sem precisar de divisória vertical, que a
       largura variável das colunas deixaria desalinhada. */
    padding-bottom: var(--e-2);
    margin-bottom: var(--e-3);
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.loja-rodape a {
    color: var(--txt-claro-suave);
    text-decoration: none;
    display: block;
    padding: .3rem 0;
    line-height: 1.5;
    transition: color var(--transicao), transform var(--transicao);
}

.loja-rodape a:hover {
    color: var(--aco-000);
    transform: translateX(2px);
}

.loja-rodape-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    border-top: 1px solid var(--borda-escura);
    margin-top: var(--e-7);
    padding-top: var(--e-5);
    font-size: var(--t-xs);
    letter-spacing: .03em;
    color: var(--txt-claro-fraco);
}

/* =============================================================================================
   CABEÇALHO DE PÁGINA
   O mesmo gesto em toda página interna: a cota, o título em serifa e a linha de contexto.
   É o que faz catálogo, cotação e conta parecerem o mesmo produto.
   ============================================================================================= */

.pagina-cabecalho {
    margin-bottom: var(--e-5);
}

.pagina-cabecalho.sem-margem {
    margin-bottom: 0;
}

.pagina-cabecalho h1 {
    font-family: var(--fonte-marca);
    font-size: var(--t-2xl);
    line-height: var(--lh-apertada);
    letter-spacing: -.015em;
    margin: var(--e-2) 0 0;
}

.pagina-cabecalho .chamada {
    margin: var(--e-2) 0 0;
    max-width: 58ch;
    font-size: var(--t-sm);
    color: var(--txt-suave);
}

/* =============================================================================================
   CONTA — entrar e criar
   Duas colunas: o material e a marca de um lado, o formulário do outro. A coluna institucional
   some no celular, onde a única tarefa é preencher.
   ============================================================================================= */

.autenticacao {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 30rem);
    justify-content: center;
    gap: 0;
    max-width: 62rem;
    margin: var(--e-7) auto;
    padding: 0 var(--e-4);
}

.autenticacao.larga {
    grid-template-columns: minmax(0, 22rem) minmax(0, 40rem);
    max-width: 72rem;
}

.autenticacao-painel {
    display: flex;
    flex-direction: column;
    gap: var(--e-5);
    padding: var(--e-6) var(--e-5);
    color: var(--txt-claro);
    border-radius: var(--raio) 0 0 var(--raio);
}

.autenticacao-painel .marca-tipografica .nome {
    color: var(--aco-000);
}

.autenticacao-painel .promessa {
    margin: 0;
    font-family: var(--fonte-marca);
    font-size: var(--t-lg);
    line-height: var(--lh-apertada);
    color: var(--aco-000);
}

/* A chapa em perspectiva, no miolo do painel — o mesmo desenho do cartão de linha. */
.autenticacao-painel .material {
    position: relative;
    flex: 1 1 auto;
    min-height: 6rem;
    margin: var(--e-2) calc(var(--e-5) * -1);
}

.autenticacao-painel .material::before {
    content: "";
    position: absolute;
    left: 16%;
    right: 12%;
    top: 44%;
    height: 15%;
    transform: skewY(-6deg);
    background: linear-gradient(102deg,
        rgba(150, 214, 223, .42) 0%,
        rgba(76, 155, 167, .30) 36%,
        rgba(26, 84, 92, .38) 74%,
        rgba(10, 42, 46, .52) 100%);
    border-top: 1px solid rgba(190, 236, 243, .7);
    box-shadow:
        0 11px 0 -1px rgba(6, 28, 31, .55),
        0 14px 0 -1px rgba(150, 214, 223, .28),
        0 25px 0 -2px rgba(6, 28, 31, .55),
        0 28px 0 -2px rgba(150, 214, 223, .20);
}

.autenticacao-painel .material::after {
    content: "";
    position: absolute;
    left: 11%;
    top: 51%;
    width: 1px;
    height: 16%;
    background: var(--cobre-claro);
    opacity: .55;
    box-shadow: -4px 0 0 -3px var(--cobre-claro), 4px 0 0 -3px var(--cobre-claro);
}

.autenticacao-painel .lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    font-size: var(--t-sm);
    color: var(--txt-claro-fraco);
}

.autenticacao-painel .lista li {
    padding-top: var(--e-3);
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.autenticacao-forma {
    padding: var(--e-6) var(--e-6) var(--e-5);
    background: var(--sup-cartao);
    border: 1px solid var(--borda);
    border-left: 0;
    border-radius: 0 var(--raio) var(--raio) 0;
}

.autenticacao-forma h1 {
    font-family: var(--fonte-marca);
    font-size: var(--t-xl);
    line-height: var(--lh-apertada);
    margin: var(--e-2) 0 var(--e-4);
}

.autenticacao-forma .chamada {
    font-size: var(--t-sm);
    color: var(--txt-suave);
    margin: calc(var(--e-4) * -1 + var(--e-1)) 0 var(--e-5);
    max-width: 46ch;
}

.autenticacao-forma .form-label {
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--txt-fraco);
}

/* Separador "ou" entre os dois caminhos de entrada: fio de cada lado, palavra no meio. */
.separador-ou {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    margin: var(--e-4) 0;
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--txt-fraco);
}

.separador-ou::before,
.separador-ou::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--borda);
}

/* As exigências da senha, uma por pastilha. Lista curta lida de relance vale mais do que uma
   frase, porque a pessoa confere item a item antes de enviar em vez de descobrir por reprovação. */
.regras-senha {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-1) var(--e-2);
    margin-bottom: var(--e-2);
}

.regras-senha span {
    padding: .1rem .45rem;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--acento);
    background: var(--acento-fraco);
    border-radius: var(--r-1);
    white-space: nowrap;
}

/* O campo do código: seis dígitos lidos de longe, com a entreletra de um mostrador. */
.campo-codigo {
    font-family: var(--fonte-dado);
    font-size: var(--t-2xl);
    font-weight: 600;
    letter-spacing: .38em;
    text-align: center;
    padding-block: var(--e-3);
    /* Compensa a entreletra do último dígito, que empurraria o conjunto para a esquerda. */
    text-indent: .38em;
}

.autenticacao-rodape {
    display: flex;
    flex-direction: column;
    gap: var(--e-1);
    margin-top: var(--e-5);
    padding-top: var(--e-4);
    border-top: 1px solid var(--borda);
    font-size: var(--t-sm);
}

/* ---------- Pessoa física × jurídica: dois lados de uma chave, mesmo peso ---------- */
.seletor-pessoa {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: var(--e-5);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-1);
    overflow: hidden;
}

.seletor-pessoa a {
    padding: var(--e-3) var(--e-2);
    text-align: center;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--txt-suave);
    text-decoration: none;
    background: var(--sup);
    transition: background var(--transicao), color var(--transicao);
}

.seletor-pessoa a + a {
    border-left: 1px solid var(--borda-forte);
}

.seletor-pessoa a:hover {
    color: var(--acento);
}

.seletor-pessoa a.ativo {
    color: var(--aco-000);
    background: var(--marca-petroleo);
}

/* =============================================================================================
   LGPD — banner de consentimento
   Fixo no rodapé e acima de tudo: se o visitante puder rolar e esquecê-lo, ele não cumpre a
   função de pedir uma decisão.
   ============================================================================================= */

.consentimento {
    position: fixed;
    left: var(--e-5);
    bottom: var(--e-5);
    z-index: 1080;
    width: min(26rem, calc(100vw - var(--e-5) * 2));
}

.consentimento-ficha {
    padding: var(--e-5);
    color: var(--txt-claro);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 18px 44px rgba(6, 28, 31, .45);
}

/* A aresta atravessa o topo da ficha: é a lâmina da chapa vista de canto. */
.consentimento-ficha .aresta {
    position: absolute;
    inset: 0 0 auto 0;
    display: block;
    border-radius: 0;
}

.consentimento-ficha .rotulo {
    margin: 0 0 var(--e-2);
    color: var(--cobre-claro);
}

.consentimento-ficha .texto {
    margin: 0 0 var(--e-4);
    font-size: var(--t-sm);
    line-height: var(--lh-folgada);
    color: var(--txt-claro-fraco);
}

.consentimento-ficha .texto a {
    color: var(--txt-claro);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.consentimento-acoes {
    display: flex;
    gap: var(--e-3);
}

/* Recusar e aceitar: mesma forma, mesmo tamanho, mesmo peso. */
.btn-consentimento {
    flex: 1 1 0;
    padding: .55rem var(--e-3);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--txt-claro);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--r-1);
}

.btn-consentimento:hover,
.btn-consentimento:focus-visible {
    color: var(--aco-950);
    background: var(--aco-000);
    border-color: var(--aco-000);
}

.politica {
    white-space: pre-line;
    max-width: 62ch;
    color: var(--txt-suave);
}

/* =============================================================================================
   RESPONSIVO
   ============================================================================================= */

@media (max-width: 991.98px) {
    /* Uma coluna: o painel institucional vira faixa acima do formulário. */
    .autenticacao,
    .autenticacao.larga {
        grid-template-columns: minmax(0, 34rem);
        margin-block: var(--e-5);
    }

    .autenticacao-painel {
        border-radius: var(--raio) var(--raio) 0 0;
        padding: var(--e-5);
        gap: var(--e-4);
    }

    .autenticacao-painel .lista {
        margin-top: 0;
    }

    .autenticacao-forma {
        border-left: 1px solid var(--borda);
        border-top: 0;
        border-radius: 0 0 var(--raio) var(--raio);
        padding: var(--e-5);
    }

    .caixa-compra {
        position: static;
    }

    .abertura {
        padding: var(--e-6) 0 var(--e-5);
    }

    .abertura h1 {
        font-size: var(--t-2xl);
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .autenticacao-painel .lista,
    .autenticacao-painel .material {
        display: none;
    }

    .catalogo-cabecalho .controle {
        width: 100%;
        justify-content: space-between;
    }

    .loja-menu a {
        padding: var(--e-2) var(--e-3);
    }

    .consentimento {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
    }

    .consentimento-ficha {
        border-inline: 0;
        border-bottom: 0;
        padding: var(--e-4);
    }

    .consentimento .btn {
        flex: 1;
    }
}

/* ---------- Trilha ---------- */
.trilha {
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--txt-fraco);
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}

.trilha a {
    color: var(--txt-fraco);
    text-decoration: none;
}

.trilha a:hover {
    color: var(--acento);
}

.trilha [aria-current="page"] {
    color: var(--txt);
}

/* ---------- Paginação ---------- */
.pagination {
    --bs-pagination-color: var(--txt-suave);
    --bs-pagination-border-color: var(--borda);
    --bs-pagination-hover-color: var(--acento);
    --bs-pagination-hover-bg: var(--g-050);
    --bs-pagination-active-bg: var(--acento);
    --bs-pagination-active-border-color: var(--acento);
    --bs-pagination-border-radius: var(--raio-sm);
    font-variant-numeric: tabular-nums;
}

/* Leitura de instrumento: o bloco onde o peso calculado aparece. */
.leitura {
    background: var(--g-050);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--e-3) var(--e-4);
    margin-bottom: var(--e-3);
}

.leitura .rotulo {
    display: block;
    margin-bottom: var(--e-1);
}


/* =============================================================================================
   CARTÃO DE CATEGORIA
   Enquanto não houver fotografia de material no projeto, o fundo é a superfície desenhada — e o
   componente já aceita <img> por cima quando a foto entrar.
   ============================================================================================= */

.cartao-categoria-rico {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    min-height: 13rem;
    position: relative;
    overflow: hidden;
    border-radius: var(--raio);
    text-decoration: none;
    color: var(--txt-claro);
    background: var(--marca-petroleo-800);
    isolation: isolate;
}

.cartao-categoria-rico::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--escovado), var(--reflexo);
    background-color: var(--marca-petroleo-800);
    transition: transform var(--transicao);
}

/* Aresta de material na base — a “borda de chapa” que dá materialidade sem foto. */
.cartao-categoria-rico::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    z-index: -1;
    background: linear-gradient(90deg, var(--cobre), var(--cobre-claro) 40%, transparent);
    transform: scaleX(.28);
    transform-origin: left;
    transition: transform var(--transicao-lenta);
}

.cartao-categoria-rico:hover::after { transform: scaleX(1); }
.cartao-categoria-rico:hover { color: var(--txt-claro); }

.cartao-categoria-rico .conteudo {
    padding: var(--e-5);
}

.cartao-categoria-rico .nome {
    font-size: var(--t-xl);
    font-weight: 600;
    letter-spacing: -.015em;
    line-height: var(--lh-titulo);
}

.cartao-categoria-rico .filhas {
    font-size: var(--t-sm);
    color: var(--txt-claro-suave);
    margin-top: var(--e-1);
}

.cartao-categoria-rico .abrir {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    margin-top: var(--e-3);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--cobre-claro);
}

.cartao-categoria-rico .contagem {
    margin-top: var(--e-3);
    padding-top: var(--e-3);
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: var(--t-sm);
    color: var(--txt-claro-suave);
}

.cartao-categoria-rico .contagem .num {
    font-weight: 600;
    color: var(--txt-claro);
}

.cartao-categoria-rico .resumo {
    margin: var(--e-2) 0 0;
    max-width: 48ch;
    font-size: var(--t-sm);
    color: var(--txt-claro-suave);
}

/* A chapa desenhada dentro do cartão. Só aparece no formato deitado, onde há área para ela
   respirar; no cartão vertical o fundo escovado já basta. */
.cartao-categoria-rico .material { display: none; }

/* ---------- Uma categoria só: o cartão deita e ocupa a linha inteira ---------- */
.cartao-categoria-rico.deitado {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: 14rem;
}

.cartao-categoria-rico.deitado .material {
    display: block;
    position: relative;
    overflow: hidden;
    /* A luz em que a chapa está deitada: sem ela o plano vira um bloco cinza no escuro. */
    background: radial-gradient(120% 90% at 34% 46%,
        rgba(107, 184, 194, .22) 0%,
        rgba(23, 96, 106, .10) 42%,
        transparent 74%);
}

/* O plano da chapa em perspectiva: face superior iluminada, aresta com fio de luz e as lâminas
   de baixo desenhadas por sombras empilhadas. Mesmo gesto do herói, na escala do cartão. */
.cartao-categoria-rico.deitado .material::before {
    content: "";
    position: absolute;
    left: 17%;
    right: 15%;
    top: 40%;
    height: 17%;
    transform: skewY(-6deg);
    background: linear-gradient(102deg,
        rgba(150, 214, 223, .46) 0%,
        rgba(76, 155, 167, .34) 34%,
        rgba(26, 84, 92, .40) 72%,
        rgba(10, 42, 46, .55) 100%);
    border-top: 1px solid rgba(190, 236, 243, .75);
    box-shadow:
        0 13px 0 -1px rgba(6, 28, 31, .55),
        0 16px 0 -1px rgba(150, 214, 223, .30),
        0 29px 0 -2px rgba(6, 28, 31, .55),
        0 32px 0 -2px rgba(150, 214, 223, .22);
}

/* Cota apoiada na aresta da pilha: referência dimensional, sem número. */
.cartao-categoria-rico.deitado .material::after {
    content: "";
    position: absolute;
    left: 12%;
    top: 48%;
    width: 1px;
    height: 18%;
    background: var(--cobre-claro);
    opacity: .6;
    box-shadow: -4px 0 0 -3px var(--cobre-claro), 4px 0 0 -3px var(--cobre-claro);
}

.cartao-categoria-rico.deitado .conteudo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--e-6);
}

.cartao-categoria-rico.deitado .nome {
    font-family: var(--fonte-marca);
    font-size: var(--t-2xl);
}

/* ---------- Rodapé institucional ---------- */
.rodape-institucional {
    font-style: normal;
    font-size: var(--t-sm);
    line-height: 1.7;
    color: var(--txt-claro-suave);
    margin: 0;
    max-width: 30ch;
}

.rodape-institucional .razao {
    color: var(--aco-000);
    font-weight: 600;
    margin-bottom: var(--e-2);
}

/* CNPJ e I.E. ficam um degrau abaixo do endereço — são documento, não contato — mas continuam
   legíveis: rodapé ilegível é rodapé que não cumpre a exigência de identificar o fornecedor. */
.rodape-institucional .dado {
    color: var(--txt-claro-suave);
    font-size: var(--t-xs);
    letter-spacing: .02em;
    margin-top: var(--e-1);
}

/* =============================================================================================
   RESPONSIVO — segunda rodada
   ============================================================================================= */

/* 1366 e 1024: a headline desce um degrau da escala e o cabeçalho aperta o vão entre os grupos,
   porque 56px de respiro só cabem quando sobra largura. */
@media (max-width: 1399.98px) {
    .loja-cabecalho-grade { gap: var(--e-6); }
}

@media (max-width: 1199.98px) {
    .hero h1 { font-size: var(--t-3xl); }
    .hero-grade { gap: var(--e-7); }
    .hero-texto { padding: var(--e-8) 0; }
    .loja-cabecalho .marca-tipografica .nome { font-size: 1.8rem; }

    /* Cinco etapas em três colunas deixam duas órfãs na segunda linha; a régua fica no topo de
       cada linha e o processo continua legível. */
    .passos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .passo:nth-child(n+4) { border-top: 1px solid var(--borda-forte); margin-top: var(--e-5); }

    .chamada-b2b { padding: var(--e-7) var(--e-6); }
}

@media (max-width: 991.98px) {
    .produto-material {
        aspect-ratio: 16 / 9;
    }

    .cartao-categoria-rico.deitado {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .cartao-categoria-rico.deitado .material {
        min-height: 9rem;
    }

    .cartao-categoria-rico.deitado .conteudo {
        padding: var(--e-5);
    }

    .loja-cabecalho-grade {
        /* A marca pode encolher (minmax(0, auto)) e a cotação fica do tamanho dela. Com a marca
           em "auto" puro, um nome longo empurrava o chip para fora da coluna e os dois se
           sobrepunham — o nome da loja não pode depender de caber em seis letras. */
        grid-template-columns: minmax(0, auto) auto;
        grid-template-areas: "marca cotacao" "busca busca";
        gap: var(--e-4);
        padding: var(--e-4) 0;
    }

    .loja-cabecalho-grade .marca-tipografica { grid-area: marca; }
    .loja-cabecalho-grade .loja-busca { grid-area: busca; }
    .loja-cabecalho-grade .loja-cotacao { grid-area: cotacao; justify-self: end; }

    /* O wordmark não parte no meio de uma palavra nem sai da coluna: ele acompanha a largura que
       sobra. O nome continua numa linha só — duas linhas somadas à régua e à assinatura fariam um
       bloco de quatro linhas no topo do celular. */
    /* "start" porque item de grade estica por padrão: sem isto a coluna sobrando alargava o
       wordmark e a régua passava a ser mais larga que o nome que ela mede. */
    .loja-cabecalho-grade .marca-tipografica { min-width: 0; justify-self: start; }
    .loja-cabecalho-grade .marca-tipografica .nome { white-space: nowrap; }

    .hero-grade {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e-5);
        min-height: 0;
    }

    .hero-texto { padding: var(--e-7) 0 0; max-width: none; }
    .hero-material { padding-bottom: var(--e-7); }
    .hero-material .marcacao { display: none; }

    .faixa-beneficios .linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .faixa-beneficios .item:nth-child(3) { border-left: 0; padding-left: 0; }

    .secao { padding: var(--e-7) 0; }

    .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .passo:nth-child(n+3) { border-top: 1px solid var(--borda-forte); margin-top: var(--e-5); }

    .loja-rodape { padding-top: var(--e-7); }
}

@media (max-width: 575.98px) {
    /* 36px: entre o display de 44 e o título de página de 30. A headline continua sendo a maior
       coisa da tela sem estourar em três linhas no aparelho de 375. */
    .hero h1 { font-size: 2.25rem; letter-spacing: -.02em; }
    .hero-sub { font-size: var(--t-md); margin-bottom: var(--e-6); }
    .hero-texto { padding-top: var(--e-6); }
    .hero-acoes { gap: var(--e-3); }
    .hero-acoes .btn { width: 100%; }

    .faixa-beneficios .linha { grid-template-columns: minmax(0, 1fr); }
    .faixa-beneficios .item {
        border-left: 0;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .07);
    }
    .faixa-beneficios .item:first-child { border-top: 0; }

    /* Uma etapa por linha: cada uma com a sua cota, lida como lista de conferência. */
    .passos { grid-template-columns: minmax(0, 1fr); }
    .passo { padding-right: 0; }
    .passo:nth-child(n+2) { border-top: 1px solid var(--borda-forte); margin-top: var(--e-4); }
    .passo h3 { margin-top: var(--e-5); }

    .chamada-b2b { padding: var(--e-6) var(--e-5); }
    .chamada-b2b .acoes { width: 100%; }
    .chamada-b2b .acoes .btn { flex: 1 1 12rem; }

    .modo { padding: var(--e-4) var(--e-4) var(--e-5); }

    .loja-rodape { padding-top: var(--e-6); }
    .loja-rodape-base { flex-direction: column; align-items: flex-start; }

    /* A marca encolhe, mas não vira rótulo. O degrau fixo de 1,5rem servia a um nome de seis
       letras; com um nome de duas palavras ele passava por cima do chip de cotação. O clamp
       acompanha a tela e para em 1,5rem, que continua sendo a primeira coisa lida. */
    .loja-cabecalho .marca-tipografica .nome { font-size: clamp(1.1rem, 5.2vw, 1.5rem); }
    .loja-rodape .marca-tipografica .nome { font-size: 1.4rem; }
    /* No celular a palavra encolhe, mas não some: um número solto numa caixa não diz que ali
       está a lista de cotação. */
    .loja-cotacao .texto {
        font-size: var(--t-xs);
        letter-spacing: .04em;
    }

    .loja-cotacao .texto::first-letter { text-transform: uppercase; }
}


/* =============================================================================================
   CONFIGURADOR DO PRODUTO
   A revenda não tem estoque: o comprador monta a peça. Cada etapa — liga, acabamento, medidas,
   corte, quantidade — é um bloco separado por um fio, e não um passo escondido: quem compra aço
   quer ver tudo o que escolheu ao mesmo tempo antes de mandar para a cotação.
   ============================================================================================= */

.etapa {
    padding: var(--e-4) 0;
    border-top: 1px solid var(--borda);
}

.etapa:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.etapa > .rotulo {
    display: block;
    margin-bottom: var(--e-3);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--txt-fraco);
}

/* ---------- Escolha entre opções: pastilhas, não uma lista suspensa ----------
   Liga e acabamento são poucos e o comprador compara antes de escolher. Numa lista fechada ele
   teria de abrir para ver o que existe. */
.escolhas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
}

.escolha {
    position: relative;
    cursor: pointer;
}

.escolha input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.escolha span {
    display: block;
    padding: .4rem .7rem;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--txt);
    background: var(--sup);
    border: 1px solid var(--borda-forte);
    border-radius: var(--r-1);
    transition: border-color var(--transicao), background var(--transicao), color var(--transicao);
}

.escolha:hover span { border-color: var(--acento); }

.escolha input:checked + span {
    color: var(--aco-000);
    background: var(--marca-petroleo);
    border-color: var(--marca-petroleo);
    font-weight: 600;
}

.escolha input:focus-visible + span { box-shadow: var(--foco); }

/* ---------- Campo de medida ---------- */
.campo-medida + .campo-medida { margin-top: var(--e-3); }

.campo-medida .form-label {
    font-size: var(--t-sm);
    font-weight: 600;
    margin-bottom: .2rem;
}

/* Bitola de linha à esquerda, medida livre à direita: o comprador de barra pede 1", o de projeto
   pede 27,3 mm, e os dois usam o mesmo campo. */
.medida-dupla {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--e-2);
}

.medida-dupla .form-select,
.medida-dupla .form-control {
    font-variant-numeric: tabular-nums;
}

.campo-medida .form-text {
    font-size: var(--t-xs);
    margin-top: .2rem;
}

/* ---------- Medida que a norma define ----------
   Ø e parede de um tubo Schedule não sao digitados: a bitola escolhida ja os definiu. Entao eles
   nao se parecem com campo — mesma altura, para a coluna nao pular ao trocar de produto, mas sem
   borda de entrada e sobre fundo de aco, que e a leitura e nao a escolha. */
.valor-derivado {
    display: flex;
    align-items: center;
    /* Em rem, e nao em em: a leitura tem fonte menor que o campo, e "1.5em" a deixaria 1,5 px
       mais baixa — o suficiente para a linha pular ao trocar de produto. */
    min-height: calc(1.5rem + .75rem + 2px);
    padding: .375rem .75rem;
    background: var(--aco-100);
    border-left: 3px solid var(--cobre);
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--aco-800);
}

@media (max-width: 400px) {
    .medida-dupla { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Variação em configuração ----------
   O bloco que confirma QUAL linha da tabela está sendo configurada. A borda em cobre é a mesma
   marca de medição do resto do sistema. */
.variacao-atual {
    border-left: 2px solid var(--cobre);
    padding: var(--e-1) 0 var(--e-1) var(--e-3);
    margin: var(--e-3) 0 var(--e-4);
}

.variacao-atual .resumo {
    font-weight: 600;
    font-size: var(--t-sm);
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.variacao-atual .dado {
    font-size: var(--t-xs);
    color: var(--txt-fraco);
    margin-top: 2px;
}


/* =============================================================================================
   CALCULADORA PÚBLICA
   =============================================================================================
   Uma ferramenta, e não uma página de venda: por isso ela não tem capa sangrada nem cartão de
   produto. Duas colunas — a conta à esquerda, a referência à direita — porque quem converte
   polegada costuma estar no meio de um cálculo, e ir e voltar entre duas telas perderia o número
   que ele acabou de digitar. */
.calculadora-capa {
    max-width: 62ch;
    margin-bottom: var(--e-6);
}

.calculadora-capa h1 {
    font-size: var(--t-2xl);
    margin: var(--e-2) 0 var(--e-3);
}

.calculadora-capa .rotulo {
    display: block;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--acento);
}

.calculadora-capa .chamada {
    color: var(--txt-fraco);
    margin: 0;
}

.calculadora-corpo {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--e-6);
    align-items: start;
}

.calculadora-form {
    background: var(--sup-cartao);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--e-5);
}

/* A unidade lida, logo abaixo do campo. É onde a polegada convertida aparece — a única prova que
   o usuário tem de que 1.1/4" virou 31,75 mm e não 1,1. */
.calculadora-form .lido:empty {
    display: none;
}

.calculadora-form .lido {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--acento);
}

.calculadora-form .volume {
    color: var(--txt-fraco);
}

/* ---------- Conversor ---------- */
.conversor {
    background: var(--g-050);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: var(--e-5);
    position: sticky;
    top: var(--e-4);
}

.conversor .rotulo {
    display: block;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--txt-fraco);
    margin-bottom: var(--e-2);
}

.conversor-saida {
    margin-top: var(--e-3);
    padding-top: var(--e-3);
    border-top: 1px solid var(--borda);
}

.conversor-linha {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--e-2);
    font-variant-numeric: tabular-nums;
}

.conversor-linha .de {
    color: var(--txt-fraco);
}

.conversor-linha .seta {
    color: var(--cobre);
}

.conversor-linha .para {
    font-size: var(--t-lg);
    font-weight: 600;
}

/* ---------- Tabela de bitolas ----------
   Referência de consulta, não dado a comparar: densa de propósito, para caber inteira sem rolar. */
.tabela-bitolas {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
}

.tabela-bitolas th {
    text-align: left;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--txt-fraco);
    padding-bottom: var(--e-1);
    border-bottom: 1px solid var(--borda);
}

.tabela-bitolas td {
    padding: .3rem 0;
    border-bottom: 1px solid var(--borda);
}

.tabela-bitolas tr:last-child td {
    border-bottom: 0;
}

/* ---------- Nota de método ----------
   Como a conta é feita, dito por extenso. Fica no fim porque é o que se lê depois de já ter o
   número — mas fica, porque uma calculadora que não diz de onde tira a densidade é a que erra. */
.calculadora-nota {
    max-width: 68ch;
    margin-top: var(--e-7);
    padding-top: var(--e-5);
    border-top: 1px solid var(--borda);
    color: var(--txt-fraco);
    font-size: var(--t-sm);
}

.calculadora-nota .rotulo {
    display: block;
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: var(--e-2);
}

@media (max-width: 991.98px) {
    .calculadora-corpo {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Sem duas colunas, grudar o conversor no topo o deixaria cobrindo a conta. */
    .conversor {
        position: static;
    }
}

@media (max-width: 575.98px) {
    .calculadora-form,
    .conversor {
        padding: var(--e-4);
    }
}