/* Unique Wear — site público
 *
 * Tokens em TOKENS.md, extraídos do guia de estilo. São a marca, e são
 * diferentes dos do sistema de propósito: aqui é vitrine, lá é ferramenta.
 *
 * Escrito à mão, sem build: o deploy é git pull, e um passo de npm na
 * hospedagem compartilhada custa mais do que este arquivo economiza.
 */

:root {
    --uw-tinta: #14110F;
    --uw-marca: #FF8200;
    --uw-marca-escura: #B35600;
    --uw-areia: #E3DACD;
    --uw-areia-clara: #F1EBE2;
    --uw-papel: #FAF7F2;
    --uw-grafite: #4A403A;
    --uw-pedra: #8A7D74;
    --uw-mata: #1B4D3E;
    --uw-realce: #FFF1E0;

    --uw-titulo: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
    --uw-texto: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;

    --uw-largura: 1160px;
    --uw-raio: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* O cabeçalho é fixo, então a âncora precisa parar antes dele — sem isto o
   título da seção some por baixo ao clicar num link do menu. */
[id] { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--uw-papel);
    color: var(--uw-tinta);
    font-family: var(--uw-texto);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--uw-marca-escura); }
a:hover { color: var(--uw-tinta); }
::selection { background: var(--uw-realce); }

img { max-width: 100%; display: block; }

h1, h2, h3 {
    font-family: var(--uw-titulo);
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.01em;
}

.uw-limite {
    max-width: var(--uw-largura);
    margin-inline: auto;
    padding-inline: 24px;
}

/* Foco visível: a navegação por teclado precisa saber onde está. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid var(--uw-marca);
    outline-offset: 2px;
}

/* Atalho para quem usa teclado ou leitor de tela pular o cabeçalho. */
.uw-pular {
    position: absolute;
    left: -9999px;
    background: var(--uw-tinta);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--uw-raio) 0;
    z-index: 100;
}
.uw-pular:focus { left: 0; top: 0; color: #fff; }

/* ------------------------------------------------------------- Cabeçalho */

.uw-topo {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 247, 242, .88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--uw-areia);
}

.uw-topo-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 14px;
}

.uw-marca-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--uw-tinta);
}
.uw-marca-link img { height: 34px; width: auto; }

.uw-wordmark {
    font-family: var(--uw-titulo);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .14em;
}

.uw-nav { display: flex; gap: 28px; align-items: center; }

.uw-nav a {
    color: var(--uw-grafite);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.uw-nav a:hover { color: var(--uw-tinta); }

/* No celular a navegação vira uma linha rolável: menu sanfonado para quatro
   links é mais clique do que ajuda. */
@media (max-width: 720px) {
    .uw-topo-inner { flex-direction: column; align-items: stretch; gap: 10px; }
    .uw-nav {
        overflow-x: auto;
        gap: 20px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .uw-nav::-webkit-scrollbar { display: none; }
    .uw-nav a { white-space: nowrap; }
}

/* ------------------------------------------------------------------ Hero */

.uw-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: flex-end;
    background: var(--uw-tinta);
    overflow: hidden;
}

.uw-hero-foto {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2a2320, #14110F 70%);
    background-size: cover;
    background-position: center;
}

/* Véu para o texto ter contraste sobre qualquer foto que entre depois. */
.uw-hero-veu {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 17, 15, .92) 12%, rgba(20, 17, 15, .45) 55%, rgba(20, 17, 15, .25));
}

.uw-hero-copy { position: relative; padding-block: 88px 72px; color: #fff; }

.uw-sobrancelha {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--uw-marca);
    margin-bottom: 14px;
}

.uw-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    max-width: 15ch;
    color: #fff;
}

.uw-hero-sub {
    margin-top: 18px;
    max-width: 52ch;
    font-size: 1.05rem;
    color: #E8E1D8;
}

.uw-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.uw-botao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
}
.uw-botao:active { transform: translateY(1px); }

.uw-botao-marca { background: var(--uw-marca); color: var(--uw-tinta); }
.uw-botao-marca:hover { background: #ff9526; color: var(--uw-tinta); }

.uw-botao-fantasma { border-color: rgba(255, 255, 255, .55); color: #fff; }
.uw-botao-fantasma:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.uw-botao-contorno { border-color: var(--uw-tinta); color: var(--uw-tinta); }
.uw-botao-contorno:hover { background: var(--uw-tinta); color: var(--uw-papel); }

/* ----------------------------------------------------------------- Portas */

.uw-secao { padding-block: 72px; }

.uw-portas { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

@media (max-width: 820px) {
    .uw-portas { grid-template-columns: 1fr; }
}

.uw-porta {
    display: block;
    padding: 34px;
    border: 1px solid var(--uw-areia);
    border-radius: var(--uw-raio);
    background: #fff;
    text-decoration: none;
    color: var(--uw-tinta);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.uw-porta:hover {
    transform: translateY(-3px);
    border-color: var(--uw-marca);
    box-shadow: 0 12px 32px rgba(20, 17, 15, .09);
    color: var(--uw-tinta);
}

.uw-porta-tag {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--uw-pedra);
}

.uw-porta h2 { font-size: 1.6rem; margin-top: 10px; }

.uw-porta p { color: var(--uw-grafite); margin: 12px 0 22px; }

.uw-porta-cta { font-weight: 600; color: var(--uw-marca-escura); }
.uw-porta-cta.contorno { color: var(--uw-tinta); }

/* --------------------------------------------------------------- Costura */

/* A "costura" do guia de estilo: uma linha tracejada que separa blocos sem
   o peso de uma borda cheia. */
.uw-costura {
    height: 1px;
    background-image: linear-gradient(to right, var(--uw-areia) 55%, transparent 55%);
    background-size: 14px 1px;
    margin-inline: auto;
    max-width: var(--uw-largura);
}

/* ------------------------------------------------------------- Argumentos */

.uw-provas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 44px;
    justify-content: center;
    padding-block: 40px;
}

.uw-prova {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--uw-grafite);
}
.uw-prova svg { flex-shrink: 0; }

/* ------------------------------------------------------------------ Linhas */

.uw-secao-titulo {
    font-family: var(--uw-titulo);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--uw-pedra);
    margin-bottom: 26px;
}

.uw-linhas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

@media (max-width: 900px) { .uw-linhas { grid-template-columns: repeat(2, 1fr); } }

.uw-linha {
    text-decoration: none;
    color: var(--uw-tinta);
    display: block;
    transition: transform .18s ease;
}
.uw-linha:hover { transform: translateY(-3px); color: var(--uw-tinta); }

.uw-linha-foto {
    aspect-ratio: 1 / 1;
    border-radius: var(--uw-raio);
    background: var(--uw-areia-clara);
    border: 1px solid var(--uw-areia);
    display: grid;
    place-items: center;
    color: var(--uw-pedra);
    font-size: 13px;
    text-align: center;
    padding: 12px;
}

.uw-linha-nome { margin-top: 12px; font-weight: 600; font-size: 15px; }

/* ---------------------------------------------------------------- História */

.uw-historia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
}

@media (max-width: 900px) { .uw-historia { grid-template-columns: 1fr; gap: 28px; } }

.uw-historia-foto {
    min-height: 340px;
    border-radius: 20px;
    background: var(--uw-areia-clara);
    border: 1px solid var(--uw-areia);
    display: grid;
    place-items: center;
    color: var(--uw-pedra);
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

.uw-historia h2 { font-size: 2rem; margin-top: 10px; }
.uw-historia p { color: var(--uw-grafite); margin: 16px 0 22px; }

/* ------------------------------------------------------------------ Etapas */

.uw-etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

@media (max-width: 900px) { .uw-etapas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .uw-etapas { grid-template-columns: 1fr; } }

.uw-etapa {
    padding: 26px;
    border-radius: var(--uw-raio);
    background: var(--uw-areia-clara);
    border: 1px solid var(--uw-areia);
}

.uw-etapa-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--uw-marca);
    color: var(--uw-tinta);
    display: grid;
    place-items: center;
    font-family: var(--uw-titulo);
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 14px;
}

.uw-etapa h3 { font-size: 1.05rem; }
.uw-etapa p { color: var(--uw-grafite); font-size: 14px; margin: 8px 0 0; }

/* --------------------------------------------------------------------- B2B */

.uw-b2b { background: var(--uw-tinta); color: #fff; }

.uw-b2b-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
    padding-block: 72px;
}

@media (max-width: 900px) { .uw-b2b-inner { grid-template-columns: 1fr; gap: 32px; } }

.uw-b2b h2 { font-size: 2rem; color: #fff; max-width: 20ch; }
.uw-b2b-sub { color: #C9C0B6; margin-top: 16px; max-width: 46ch; }

.uw-form {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(227, 218, 205, .22);
    border-radius: 20px;
    padding: 28px;
    display: grid;
    gap: 18px;
}

.uw-campo { display: grid; gap: 7px; }

.uw-rotulo {
    font-size: 13px;
    font-weight: 600;
    color: #E3DACD;
}

.uw-entrada {
    width: 100%;
    padding: 13px 15px;
    border-radius: 10px;
    border: 1px solid rgba(227, 218, 205, .3);
    background: rgba(20, 17, 15, .5);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
}
.uw-entrada::placeholder { color: #8A7D74; }

/* O select nativo herda a cor do sistema; sem isto as opções saem brancas
   sobre branco em alguns navegadores. */
.uw-entrada option { background: #14110F; color: #fff; }

.uw-erro { color: #FFB4A2; font-size: 13px; }

/* -------------------------------------------------------------- Rodapé */

.uw-rodape {
    background: var(--uw-tinta);
    color: #C9C0B6;
    border-top: 1px solid rgba(227, 218, 205, .16);
    padding-block: 52px 28px;
    font-size: 14px;
}

.uw-rodape-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
}

@media (max-width: 820px) { .uw-rodape-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .uw-rodape-grid { grid-template-columns: 1fr; } }

.uw-rodape h3 {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8A7D74;
    font-weight: 600;
    margin-bottom: 12px;
}

.uw-rodape a { color: #C9C0B6; text-decoration: none; display: block; padding-block: 4px; }
.uw-rodape a:hover { color: var(--uw-marca); }

.uw-rodape-fim {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(227, 218, 205, .16);
    color: #8A7D74;
    font-size: 13px;
}

/* --------------------------------------------------------------- Revelação */

/* Seções sobem ao entrar na tela. Começam visíveis e só recebem o estado
   inicial se o JS assumir — assim a página funciona sem JS em vez de ficar
   em branco, que é como esse padrão costuma falhar. */
.uw-revela {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}
.uw-revela.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .uw-revela, .uw-revela.visivel {
        opacity: 1;
        transform: none;
        transition: none;
    }
    * { animation: none !important; }
}

/* Ao imprimir, a revelação por rolagem esconderia metade da página: nada foi
   rolado, então nada recebeu a classe. */
@media print {
    .uw-revela, .uw-revela.visivel { opacity: 1 !important; transform: none !important; }
    .uw-topo { position: static; }
}

/* ------------------------------------------------ Formulário sobre claro */

/* O .uw-form nasceu na seção B2B, que é escura. Sobre o papel ele precisa
   inverter, senão o texto digitado sai branco sobre branco. */
.uw-form-claro {
    background: #fff;
    border-color: var(--uw-areia);
}
.uw-form-claro .uw-rotulo { color: var(--uw-tinta); }
.uw-form-claro .uw-entrada {
    background: var(--uw-papel);
    color: var(--uw-tinta);
    border-color: var(--uw-areia);
}
.uw-form-claro .uw-entrada::placeholder { color: var(--uw-pedra); }
.uw-form-claro .uw-entrada option { background: #fff; color: var(--uw-tinta); }
.uw-form-claro .uw-erro { color: #B3261E; }

textarea.uw-entrada { resize: vertical; min-height: 96px; font-family: inherit; }

/* Onde a pessoa está agora. Sem isso o menu de páginas reais não dá pista
   nenhuma de posição — problema que a página única não tinha. */
.uw-nav a.atual {
    color: var(--uw-tinta);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--uw-marca);
}

/* ---------------------------------------------------- Páginas internas */

.uw-chamada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    padding-block: 56px;
}
.uw-chamada h2 { font-size: 1.7rem; color: #fff; max-width: 22ch; }

.uw-dados { display: grid; grid-template-columns: auto 1fr; gap: 10px 28px; margin: 0; }
.uw-dados dt { color: var(--uw-pedra); font-size: 14px; }
.uw-dados dd { margin: 0; }

/* Passos numerados, um por linha: aqui há texto para ler, ao contrário do
   cartão curto da home. */
.uw-passos { display: grid; gap: 28px; max-width: 68ch; }
.uw-passo { display: flex; gap: 20px; align-items: flex-start; }
.uw-passo h2 { font-size: 1.25rem; }
.uw-passo p { color: var(--uw-grafite); margin: 8px 0 0; }

.uw-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
@media (max-width: 820px) { .uw-faq { grid-template-columns: 1fr; } }

.uw-faq-item h3 { font-size: 1.05rem; }
.uw-faq-item p { color: var(--uw-grafite); margin: 8px 0 0; }

/* ------------------------------------------------------------------ Blog */

.uw-artigos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .uw-artigos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .uw-artigos { grid-template-columns: 1fr; } }

.uw-artigo a { text-decoration: none; color: var(--uw-tinta); display: block; }
.uw-artigo a:hover h2 { color: var(--uw-marca-escura); }

.uw-artigo-capa {
    aspect-ratio: 16 / 10;
    border-radius: var(--uw-raio);
    background: var(--uw-areia-clara);
    border: 1px solid var(--uw-areia);
    display: grid;
    place-items: center;
    color: var(--uw-pedra);
    font-size: 13px;
    margin-bottom: 14px;
}

.uw-artigo-meta {
    font-size: 13px;
    color: var(--uw-pedra);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.uw-artigo h2 { font-size: 1.15rem; margin: 8px 0 0; transition: color .15s ease; }
.uw-artigo-resumo { color: var(--uw-grafite); font-size: 14px; margin: 10px 0 14px; }

.uw-artigo-lead {
    font-size: 1.15rem;
    color: var(--uw-grafite);
    margin: 20px 0 0;
    line-height: 1.6;
    /* O resumo é a primeira coisa que aparece antes do .uw-corpo — sem
       isto, ele ficava alinhado à esquerda enquanto o resto do artigo saía
       justificado, e o começo do texto parecia torto. */
    text-align: justify;
}

/* Largura de leitura: linha longa demais cansa e faz pular linha. */
.uw-corpo { margin-top: 28px; }
.uw-corpo p { margin: 0 0 1.2em; max-width: 68ch; }

/* Paginação do Laravel sai em Tailwind; o site não tem Tailwind. */
.uw-limite nav[role="navigation"] svg { display: none; }
.uw-limite nav[role="navigation"] a,
.uw-limite nav[role="navigation"] span[aria-current] > span {
    display: inline-block;
    padding: 8px 14px;
    margin-right: 6px;
    border: 1px solid var(--uw-areia);
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
}
.uw-limite nav[role="navigation"] span[aria-current] > span {
    background: var(--uw-tinta);
    color: #fff;
    border-color: var(--uw-tinta);
}

/* ---------------------------------------------------------------- Cadeado */

/* Discreto de propósito: quem precisa dele sabe o que é, e quem não precisa
   não é convidado a clicar. Quem protege o painel é a URL fora do padrão e o
   limite de tentativas — não o link ser difícil de achar. */
.uw-cadeado {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--uw-pedra);
    background: transparent;
    transition: color .15s ease, background-color .15s ease;
    flex-shrink: 0;
}
.uw-cadeado:hover {
    color: var(--uw-tinta);
    background: var(--uw-areia-clara);
}

@media (max-width: 720px) {
    /* No celular o cabeçalho vira coluna; o cadeado acompanha a linha do
       menu em vez de ganhar uma linha só para ele. */
    .uw-topo-inner { position: relative; }
    .uw-cadeado { position: absolute; top: 8px; right: 24px; }
}

/* ------------------------------------------------------ Filtro do blog */

.uw-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.uw-categorias a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--uw-areia);
    border-radius: 999px;
    background: #fff;
    color: var(--uw-grafite);
    text-decoration: none;
    font-size: 14px;
}
.uw-categorias a:hover { border-color: var(--uw-marca); color: var(--uw-tinta); }

.uw-categorias a.atual {
    background: var(--uw-tinta);
    border-color: var(--uw-tinta);
    color: #fff;
}

.uw-categorias span {
    font-size: 12px;
    color: var(--uw-pedra);
    background: var(--uw-areia-clara);
    border-radius: 999px;
    padding: 1px 7px;
}
.uw-categorias a.atual span { background: rgba(255,255,255,.15); color: #E3DACD; }

/* O que o editor rico produz. */
.uw-corpo h2 { font-size: 1.45rem; margin: 1.8em 0 .6em; }
.uw-corpo h3 { font-size: 1.15rem; margin: 1.5em 0 .5em; }
.uw-corpo ul, .uw-corpo ol { max-width: 68ch; padding-left: 1.4em; margin: 0 0 1.2em; }
.uw-corpo li { margin-bottom: .4em; }
.uw-corpo blockquote {
    margin: 1.4em 0;
    padding: .2em 0 .2em 1.2em;
    border-inline-start: 3px solid var(--uw-marca);
    color: var(--uw-grafite);
    max-width: 68ch;
}
.uw-corpo img { border-radius: var(--uw-raio); margin: 1.4em 0; }
.uw-corpo a { text-decoration: underline; }

/* --------------------------------------------------------- Configurador */

/* Peça à esquerda, formulário à direita. A peça fica grudada na tela
   enquanto se rola o formulário — é o que faz parecer um configurador e
   não um formulário comprido. */
.uw-config {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    margin-top: 28px;
}

.uw-config-preview {
    position: sticky;
    top: 96px;
}

.uw-config-form { margin: 0; }

/* No celular vira uma coluna, peça em cima: tipo e cor são justamente os
   dois primeiros campos, então ela aparece quando importa. Sem `sticky`,
   que no celular comeria metade da tela. */
@media (max-width: 900px) {
    .uw-config { grid-template-columns: 1fr; gap: 20px; }
    .uw-config-preview { position: static; }
    /* Encolhe a peça, não o palco: limitar a altura do palco cortava a barra
       da camiseta, já que o desenho é mais alto que largo. */
    .uw-peca { max-width: 190px; }
}

.uw-palco {
    display: grid;
    place-items: center;
    padding: 24px;
    border: 1px solid var(--uw-areia);
    border-radius: var(--uw-raio);
    background: var(--uw-areia-clara);
}

/* Explícito de propósito: o `[hidden] { display: none }` que o navegador
   traz de fábrica é escrito para HTML e não alcança SVG, que está em outro
   namespace. Sem esta regra, as silhuetas escondidas continuam aparecendo,
   empilhadas umas sobre as outras. */
.uw-peca[hidden] { display: none; }

.uw-peca {
    width: 100%;
    max-width: 300px;
    height: auto;
    /* Cor de partida: sem JS, ou antes de escolher, a peça aparece na areia
       da marca em vez de preta (que é o padrão do SVG sem `fill`). */
    fill: var(--uw-areia);
    filter: drop-shadow(0 8px 16px rgba(20, 17, 15, .12));
    transition: fill .25s ease;
}

.uw-palco-legenda {
    text-align: center;
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--uw-pedra);
}

/* Radio nativo, escondido atrás do rótulo em forma de pílula — sem isso o
   Configurador seria só outro <select>, e o que ele tem de diferente é
   justamente poder escolher tocando/clicando num cartão. */
.uw-escolhas { display: flex; flex-wrap: wrap; gap: 10px; }
.uw-escolha { position: relative; cursor: pointer; }
.uw-escolha input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.uw-escolha span {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border: 1px solid var(--uw-areia);
    border-radius: 999px;
    font-size: 14px;
    color: var(--uw-grafite);
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}
.uw-escolha input:checked + span {
    border-color: var(--uw-marca);
    background: var(--uw-realce);
    color: var(--uw-tinta);
    font-weight: 600;
}
.uw-escolha input:focus-visible + span { outline: 3px solid var(--uw-marca); outline-offset: 2px; }

/* Tecido e manga levam uma segunda linha (composição, acréscimo) dentro da
   mesma pílula. Sem isto, o `<small>` vira item de um flex-row e cola do
   lado do nome em vez de embaixo — pílula de uma linha só (gola, técnica…)
   não tem `<small>` e continua centrada como sempre. */
.uw-escolha span:has(small) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* A cor é o campo que o formulário de orçamento não tinha — swatch de
   verdade, não nome digitado, porque "azul" significa coisas diferentes
   para cada pessoa. */
.uw-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.uw-swatch { position: relative; cursor: pointer; }
.uw-swatch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.uw-swatch > span:first-of-type {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--uw-areia);
    transition: border-color .15s ease, transform .15s ease;
}
.uw-swatch input:checked + span { border-color: var(--uw-tinta); transform: scale(1.12); }
.uw-swatch input:focus-visible + span { outline: 3px solid var(--uw-marca); outline-offset: 2px; }

/* Justificado é o padrão da casa. Alinhamento explícito do editor chega como
   classe, não `style` — o sanitizador troca um pelo outro antes de salvar
   (`Texto::alinhamentoComoClasse`), porque `style` livre não passa. */
.uw-corpo p { text-align: justify; }
.uw-corpo .uw-align-start { text-align: left; }
.uw-corpo .uw-align-center { text-align: center; }
.uw-corpo .uw-align-end { text-align: right; }
.uw-corpo .uw-align-justify { text-align: justify; }

/* O aviso de combinação impossível do Configurador. Âmbar, não vermelho: a
   combinação não é um erro de preenchimento, é so uma que o tecido/técnica
   escolhidos não permitem — cores do guia de estilo (`site/TOKENS.md`). */
.uw-aviso {
    margin: 14px 0 0;
    padding: 12px 16px;
    border: 1px solid #B7791F;
    border-radius: 12px;
    background: #FEF3C7;
    color: #B7791F;
    font-size: 14px;
}
.uw-aviso-saida { display: block; margin-top: 4px; font-weight: 600; }

/* Resumo, preço e prazo, ao pé do preview — mesmo cartão, para não abrir
   um segundo bloco flutuando fora da coluna da peça. */
.uw-resumo {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--uw-areia);
    text-align: left;
}

/* `<details>` nativo: abre/fecha sem JS, como o resto do site exige. */
.uw-medidas { margin-top: 14px; }
.uw-medidas summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--uw-marca-escura);
}
.uw-tabela-medidas {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 13px;
}
.uw-tabela-medidas th,
.uw-tabela-medidas td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--uw-areia);
    text-align: left;
}
.uw-tabela-medidas-rodape { margin: 10px 0 0; font-size: 12px; color: var(--uw-pedra); }

/* Tabela de preco por tamanho, no resumo — uma linha por tamanho escolhido,
   mesmo padrao visual da tabela de medidas logo acima. */
.uw-tabela-grade {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: 13px;
}
.uw-tabela-grade th,
.uw-tabela-grade td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--uw-areia);
    text-align: left;
}

/* O passo "Tamanhos e quantidades": uma linha por tamanho, nome a esquerda
   e o campo numerico a direita — ao contrario das pilulas (.uw-escolhas),
   aqui cada tamanho tem seu proprio valor, nao e uma escolha unica. */
.uw-grade-tamanhos { display: grid; gap: 8px; }
.uw-grade-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.uw-grade-linha > span { font-size: 14px; color: var(--uw-tinta); }
.uw-grade-linha .uw-entrada { width: 90px; flex: none; }

/* O numero do passo no Configurador (1 a 8), como no handoff do design: a
   sequencia e o que diz ao visitante que ele esta montando uma peca, e nao
   preenchendo um formulario solto.
   Nome distinto de `.uw-passo` de proposito: aquela classe ja existe desde
   a pagina "Como funciona" (layout flex de um passo com titulo e texto,
   nao um numero pequeno) — usar o mesmo nome aqui colidia e quebrava o
   layout da outra pagina inteira, silenciosamente, porque nenhuma revisao
   desta entrega tocou aquele arquivo. */
.uw-passo-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--uw-marca-escura);
    color: #FFF;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: middle;
}