/* ============================================================================ BORDADOS SMANIOTTO — DESIGN SYSTEM v1 · PADRÕES DE NEGÓCIO Ibitinga/SP · Grupo Smaniotto · Smaniotto · Sofisticata · Palácio dos Tapetes Os arranjos que só existem neste projeto: medidor de tapete sob medida, página de produto, faixa de vídeo, catálogos em PDF, hero e faixa das três linhas. No fim, o responsivo (375 / 768 / 1440) e o movimento reduzido — nessa ordem de propósito: regra de mesma especificidade só vence se vier por último. Depende das três folhas anteriores. ========================================================================== */ /* ── 07 PADRÕES DE NEGÓCIO ───────────────────────────────────────────────── */ /* MEDIDOR SOB MEDIDA — o componente-chave dos tapetes cortados por metro. O cliente digita largura × altura; o desenho responde na hora e o pedido sai para o WhatsApp da loja com a medida já escrita. */ .medidor { display: grid; } /* O FORMULÁRIO É QUE É A GRADE, e não o `.medidor` em volta. Parece detalhe e é a coisa toda: a mesa de medição precisa morar DENTRO do formulário, entre os campos de medida e o seletor de cor. Por quê. Até 5/8/2026 a mesa era irmã do formulário, e em tela estreita as duas viravam uma coluna na ordem do documento: formulário inteiro primeiro, mesa depois. Medido num iPhone de 812px de altura: o campo de largura ficava em y=673 e o desenho em y=1325 — 652px abaixo, e depois dos DOIS botões de ação. Numa página que se chama "Digite a medida. O desenho responde.", o desenho respondia fora de vista, e a pega que se arrasta — a razão de a página funcionar no celular — ficava embaixo dos botões de fechar, onde ninguém ia descobri-la. Com a mesa dentro do formulário, a ordem do documento já é a ordem certa no celular: linha → medidas → DESENHO → cor → resumo → ações. Nenhuma regra de `order` para manter em dia. No desktop as duas colunas voltam por posicionamento explícito: os dois blocos de controle empilham na coluna 1, a mesa ocupa a coluna 2 inteira. */ .medidor__controles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--esp-5); } /* Os dois blocos que sanduicham a mesa. Cada um mantém o ritmo de antes. */ .medidor__bloco { display: flex; flex-direction: column; gap: var(--esp-5); } @media (min-width: 1081px) { .medidor__controles { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: var(--esp-7); align-items: start; } .medidor__bloco:first-of-type { grid-column: 1; grid-row: 1; } .medidor__controles > .mesa { grid-column: 2; grid-row: 1 / span 2; /* A mesa acompanha a rolagem: mexer na cor ou conferir o resumo lá embaixo não pode tirar da tela a única coisa que a página promete mostrar. `top` é a altura do cabeçalho grudento mais uma folga. */ position: sticky; top: calc(4.5rem + var(--esp-5)); } .medidor__bloco:last-of-type { grid-column: 1; grid-row: 2; } } .medidor__par { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--esp-3); align-items: end; } .medidor__vezes { padding-bottom: var(--esp-3); font-family: var(--fonte-dado); color: var(--rose); } .mesa { position: relative; padding: var(--esp-7) var(--esp-5) var(--esp-5) var(--esp-7); background: rgb(var(--bruma-rgb) / .05); border: 1px solid var(--borda-inversa); border-radius: var(--rad-2); } .mesa__palco { position: relative; height: 20rem; display: grid; place-items: start; } /* Réguas: traço a cada 10 cm, traço alto e rosa a cada metro. Ancoradas no canto de origem do palco, que é de onde a peça é medida. */ .mesa__regua { position: absolute; background-repeat: repeat; } .mesa__regua--topo { top: calc(var(--esp-5) * -1); left: 0; right: 0; height: var(--esp-4); background-image: repeating-linear-gradient(90deg, var(--rose) 0 2px, transparent 2px var(--px-metro, 60px)), repeating-linear-gradient(90deg, rgb(var(--bruma-rgb) / .38) 0 1px, transparent 1px calc(var(--px-metro, 60px) / 10)); background-size: 100% 100%, 100% 42%; background-position: bottom, bottom; } .mesa__regua--lado { left: calc(var(--esp-5) * -1); top: 0; bottom: 0; width: var(--esp-4); background-image: repeating-linear-gradient(0deg, var(--rose) 0 2px, transparent 2px var(--px-metro, 60px)), repeating-linear-gradient(0deg, rgb(var(--bruma-rgb) / .38) 0 1px, transparent 1px calc(var(--px-metro, 60px) / 10)); background-size: 100% 100%, 42% 100%; background-position: right, right; } .tapete-previa { position: relative; display: grid; place-items: center; text-align: center; background: rgb(var(--rose-rgb) / .12); outline: var(--fio-espessura) dashed var(--rose); outline-offset: -6px; transition: width var(--dur-2) var(--saida), height var(--dur-2) var(--saida); } .tapete-previa::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, rgb(var(--bruma-rgb) / .07) 0 2px, transparent 2px 7px); } .tapete-previa__medida { position: relative; z-index: 1; font-family: var(--fonte-dado); font-size: var(--t-auxiliar); color: var(--algodao); background: rgb(var(--tinta-rgb) / .6); padding: var(--esp-1) var(--esp-2); } .resumo-medida { display: flex; flex-wrap: wrap; gap: var(--esp-5); padding-top: var(--esp-4); border-top: 1px dashed var(--borda-inversa); } .resumo-medida__valor { font-family: var(--fonte-titulo); font-size: var(--t-h3); font-variation-settings: 'opsz' 72, 'SOFT' 40; color: var(--algodao); } /* Mesa clara — a mesma mesa de medição sobre fundo claro, para usar dentro do modal de medida que abre a partir do card do tapete. */ .mesa--clara { background: rgb(var(--tinta-rgb) / .03); border-color: var(--borda); } .mesa--clara .mesa__palco { height: 12rem; } .mesa--clara .mesa__regua--topo { background-image: repeating-linear-gradient(90deg, var(--carmim) 0 2px, transparent 2px var(--px-metro, 60px)), repeating-linear-gradient(90deg, rgb(var(--tinta-rgb) / .3) 0 1px, transparent 1px calc(var(--px-metro, 60px) / 10)); } .mesa--clara .mesa__regua--lado { background-image: repeating-linear-gradient(0deg, var(--carmim) 0 2px, transparent 2px var(--px-metro, 60px)), repeating-linear-gradient(0deg, rgb(var(--tinta-rgb) / .3) 0 1px, transparent 1px calc(var(--px-metro, 60px) / 10)); } .mesa--clara .tapete-previa { background: rgb(var(--carmim-rgb) / .09); outline-color: var(--carmim); } .mesa--clara .tapete-previa::after { background-image: repeating-linear-gradient(45deg, rgb(var(--tinta-rgb) / .06) 0 2px, transparent 2px 7px); } .mesa--clara .tapete-previa__medida { background: rgb(var(--tinta-rgb) / .78); } .mesa--clara .resumo-medida { border-top-color: var(--borda); } .mesa--clara .resumo-medida__valor { color: var(--texto); } /* Modal de medida — cabeçalho com a foto do tapete que originou o clique. */ .modal { --sob: var(--superficie); } .medida-peca { display: flex; align-items: center; gap: var(--esp-3); } .medida-peca img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--rad-1); flex: none; } .medida-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--esp-5); align-items: start; } @media (max-width: 640px) { .medida-corpo { grid-template-columns: minmax(0, 1fr); } } /* PÁGINA DE PRODUTO --------------------------------------------------------- Composição de tudo o que já existe no sistema: galeria com lupa, ficha, chips de cor, medidor e as duas ações (juntar no orçamento / falar agora). */ /* Duas colunas com papéis distintos: à esquerda o cliente vê e ganha confiança; à direita ele decide e pede. A coluna de decisão fica curta de propósito. */ .produto { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--esp-5) var(--esp-7); align-items: start; } .produto .galeria { grid-column: 1; grid-row: 1; } .produto .videos { grid-column: 1; grid-row: 2; } .produto .produto__extras { grid-column: 1; grid-row: 3; } .produto .produto__painel { grid-column: 2; grid-row: 1 / 4; } .migalha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); font-size: var(--t-auxiliar); color: var(--texto-brando); margin-bottom: var(--esp-5); } .migalha a:hover { color: var(--carmim); text-decoration: underline; text-underline-offset: var(--desloca-sublinhado); } .migalha svg { width: .7rem; height: .7rem; opacity: .5; } .migalha [aria-current] { color: var(--texto); font-weight: var(--peso-medio); } /* Galeria: miniaturas na lateral, palco com lupa dentro da própria caixa. */ .galeria { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: var(--esp-3); } /* Cor com UMA foto não tem fita, e sem fita a coluna dela não pode existir: o palco cairia nos 4,75rem reservados para as miniaturas e a foto do produto apareceria do tamanho de uma miniatura, com o resto da caixa em branco. Quem marca é o PHP, que já sabe quantas fotos a cor tem. */ .galeria--sem-fita { grid-template-columns: minmax(0, 1fr); } .galeria__fitas { display: flex; flex-direction: column; gap: var(--esp-3); } .galeria__fita { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--rad-2); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: inset 0 0 0 1px var(--borda); transition: box-shadow var(--dur-1) var(--suave), transform var(--dur-2) var(--saida); } .galeria__fita img { width: 100%; height: 100%; object-fit: cover; } .galeria__fita:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--borda-forte); } .galeria__fita[aria-current='true'] { box-shadow: inset 0 0 0 2px var(--carmim); } .galeria__palco { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rad-2); background: var(--bruma); cursor: zoom-in; } .galeria__palco img { width: 100%; height: 100%; object-fit: cover; } /* A lupa é uma segunda camada com a mesma foto ampliada, posicionada pelo ponteiro. Fica dentro da caixa — não abre painel flutuante. */ .galeria__lupa { position: absolute; inset: 0; opacity: 0; pointer-events: none; background-image: var(--foto); background-repeat: no-repeat; background-size: calc(var(--zoom, 2) * 100%); background-position: var(--zx, 50%) var(--zy, 50%); transition: opacity var(--dur-2) var(--suave); } .galeria__palco:hover .galeria__lupa, .galeria__palco:focus-within .galeria__lupa { opacity: 1; } /* ⚠️ FECHAR A JANELA NÃO PODE DEIXAR A LUPA ACESA (fase 17C). A regra acima acende a lupa com o foco DENTRO do palco, e o botão que abre a foto em tela cheia mora ali dentro. Ao fechar a janela o foco volta para ele — como deve, e é conquista da fase 17 —, `:focus-within` é satisfeito, e a foto fica ampliada sozinha, sem ninguém pedir. Clicar fora "conserta", e é justamente isso que parece defeito. A distinção que faltava é entre foco de TECLADO e foco herdado de clique: `:focus-visible` a faz, `:focus-within` não. Com ela, a lupa acende exatamente quando o contorno de foco aparece — as duas coisas passam a dizer a mesma frase, "este botão está com o foco do teclado", e nunca se contradizem na tela. O `:not(:hover)` está aqui porque o ponteiro sobre a foto manda mais do que qualquer foco: sem ele, o foco herdado de um clique apagaria a lupa debaixo do próprio ponteiro que a pediu. ONDE `:has()` NÃO EXISTIR, NADA DISTO ACONTECE: o navegador descarta o `@supports` inteiro, a regra de cima continua valendo sozinha e o pior caso volta a ser o comportamento de hoje — lupa acesa demais. Nunca "sem lupa no teclado", que seria trocar um incômodo visual por uma perda de acessibilidade. */ @supports selector(:has(*)) { .galeria__palco:focus-within:not(:hover):not(:has(:focus-visible)) .galeria__lupa { opacity: 0; } } .galeria__aviso { position: absolute; left: var(--esp-3); bottom: var(--esp-3); z-index: 2; display: inline-flex; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3); border-radius: var(--rad-total); background: rgb(var(--algodao-rgb) / .92); color: var(--texto-brando); transition: opacity var(--dur-1) var(--suave); } .galeria__aviso svg { width: .85rem; height: .85rem; } .galeria__palco:hover .galeria__aviso { opacity: 0; } /* O CLIQUE QUE ABRE A FOTO EM TELA CHEIA (fase 17) — um botão transparente do tamanho do palco. Ele nasce `hidden` no HTML e quem o revela é o produto.js, porque sem JavaScript não existe janela para abrir. Fica ACIMA da lupa (z-index 3 contra os 2 da etiqueta) para receber o clique em qualquer ponto da foto, e não pinta nada: a única coisa que ele acrescenta à tela é o contorno de foco, que vem da regra de documento do base.css. */ .galeria__ampliar { position: absolute; inset: 0; z-index: 3; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: inherit; } /* Duas frases para o mesmo canto: "passe o mouse" onde há ponteiro, "toque" onde não há. O padrão é a do ponteiro; a do toque só aparece na consulta abaixo. */ .galeria__aviso-toque { display: none; } @media (hover: none) { .galeria__palco { cursor: default; } .galeria__lupa { display: none; } /* A ETIQUETA CONTINUA ESCONDIDA EM TELA DE TOQUE — a menos que exista o que ela promete. `galeria--ampliavel` é escrita pelo produto.js, e só ele: sem JavaScript, tocar na foto não faz nada, e uma etiqueta convidando ao toque seria promessa que a tela não cumpre. */ .galeria__aviso { display: none; } /* ⚠️ NO CELULAR ELA SOBE PARA O CANTO DE CIMA, E ENCOLHE (fase 17B). No lugar de onde ela saiu — a base da foto — é exatamente onde fica a barra bordada de uma colcha, que é o que a cliente abriu a página para ver. Uma pastilha branca ali é tarja sobre o produto, e vale para ela a mesma régua que proíbe mostrar uma aproximação do produto no lugar do produto. Ela CONTINUA ensinando o gesto: mesma frase, mesma pastilha, mesmo ícone — quem dá a descoberta é ela, e sem ela ninguém adivinha que a foto abre. O que muda é tamanho e canto. Medido em 375 px na página do Kit Prime: 228,8 × 30,8 px (8,39% da área da foto) passou a 158,8 × 21,6 px (4,07%) — metade da tarja —, e a base da foto ficou limpa. A tipografia menor é do sistema (`--t-micro`), e a tracking volta ao `--tr-normal`: a caixa alta com os 0,18em do `.rotulo` é o que mais alargava a pastilha, e aqui a largura é justamente o que a cobria. */ .galeria--ampliavel .galeria__aviso { display: inline-flex; left: auto; bottom: auto; right: var(--esp-2); top: var(--esp-2); gap: var(--esp-1); padding: var(--esp-1) var(--esp-2); font-size: var(--t-micro); letter-spacing: var(--tr-normal); } .galeria--ampliavel .galeria__aviso-ponteiro { display: none; } .galeria--ampliavel .galeria__aviso-toque { display: inline; } } .produto__painel { display: flex; flex-direction: column; gap: var(--esp-5); } .produto__grupo { display: flex; flex-direction: column; gap: var(--esp-3); padding-top: var(--esp-5); border-top: 1px dashed var(--borda); } .produto__medida { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--esp-3); align-items: end; } .produto__vezes { padding-bottom: var(--esp-3); font-family: var(--fonte-dado); color: var(--carmim); } .produto__acoes { display: flex; flex-direction: column; gap: var(--esp-3); } .produto__extras { display: flex; flex-direction: column; } .produto__garantias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); padding-block: var(--esp-4); border-top: 1px dashed var(--borda); } .produto__garantia { display: flex; flex-direction: column; gap: var(--esp-1); } .produto__garantia svg { width: 1.15rem; height: 1.15rem; color: var(--carmim); } /* VÍDEO DA PEÇA ───────────────────────────────────────────────────────────── Decisão: o vídeo NÃO entra no carrossel de fotos. Motivo concreto — 106 dos 108 vídeos do acervo são verticais 9:16 a 478×850, e o palco da galeria é 4:3 horizontal. Encaixar um no outro exige cortar o vertical (decepa o produto) ou deitar a foto (desperdiça a foto). Some-se que só 39% dos produtos têm vídeo: se o vídeo morasse na galeria, a galeria teria dois comportamentos diferentes dependendo do produto. Então o vídeo ganha faixa própria, logo abaixo da galeria, e abre num reprodutor vertical em modal — o formato em que ele foi filmado. */ .videos { display: flex; flex-direction: column; gap: var(--esp-3); padding-block: var(--esp-4); border-top: 1px dashed var(--borda); } /* align-items:flex-start é obrigatório: o padrão `stretch` iguala a altura de todos os cartões e anula o aspect-ratio do cartão horizontal. */ .videos__fila { display: flex; align-items: flex-start; gap: var(--esp-3); overflow-x: auto; padding-bottom: var(--esp-2); } /* O cartão herda a forma do vídeo: em pé para vertical, deitado para horizontal. Assim a pessoa já sabe o formato antes de clicar, e o poster nunca é cortado para caber numa moldura que não é a dele. */ .video-cartao { position: relative; flex: none; width: 5rem; aspect-ratio: 9 / 16; padding: 0; border: 0; background: var(--bruma); border-radius: var(--rad-2); overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px var(--borda); transition: transform var(--dur-2) var(--saida), box-shadow var(--dur-1) var(--suave); } .video-cartao--horizontal { width: 8.9rem; aspect-ratio: 16 / 9; } /* Selo de origem: quem vê já sabe que abre no YouTube. */ .video-cartao__fonte { position: absolute; top: var(--esp-1); right: var(--esp-1); z-index: 1; padding: .1rem var(--esp-1); border-radius: var(--rad-1); background: rgb(var(--tinta-rgb) / .72); color: var(--algodao); font-size: var(--t-nano); font-weight: var(--peso-forte); letter-spacing: var(--tr-chip); text-transform: uppercase; } .video-cartao img { width: 100%; height: 100%; object-fit: cover; } .video-cartao::after { content: ''; position: absolute; inset: 0; background: var(--grad-veu); opacity: .55; } .video-cartao__play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; } .video-cartao__play span { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: var(--rad-total); background: rgb(var(--algodao-rgb) / .94); color: var(--carmim); transition: transform var(--dur-2) var(--saida); } .video-cartao__play svg { width: .9rem; height: .9rem; margin-left: .1rem; } .video-cartao__dur { position: absolute; left: var(--esp-1); bottom: var(--esp-1); z-index: 1; padding: .1rem var(--esp-1); border-radius: var(--rad-1); background: rgb(var(--tinta-rgb) / .72); color: var(--algodao); font-family: var(--fonte-dado); font-size: var(--t-micro); } .video-cartao:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--carmim), var(--elev-2); } .video-cartao:hover .video-cartao__play span { transform: scale(1.12); } /* Reprodutor vertical — moldura 9:16 com controles nativos. Controles nativos de propósito: teclado, leitor de tela, velocidade e tela cheia vêm prontos e são os que qualquer pessoa já conhece. O sistema só desenha a moldura em volta. */ .modal--video { width: min(30rem, calc(100% - var(--esp-5) * 2)); } /* Limitado pela ALTURA, não pela largura: um 9:16 preso à largura estoura a tela e empurra a navegação para fora do modal. Como o vídeo é 478 px nativo, qualquer largura resultante abaixo disso ainda fica nítida. */ .player { position: relative; margin-inline: auto; height: min(56dvh, 30rem); width: auto; max-width: 100%; aspect-ratio: var(--proporcao, 9 / 16); background: var(--tinta); border-radius: var(--rad-2); overflow: hidden; } /* Deitado: manda a largura, não a altura — senão sobra moldura preta em cima e embaixo e o vídeo fica minúsculo no meio. */ .player--horizontal { height: auto; width: 100%; max-width: 28rem; } .player video, .player iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: var(--tinta); } .player__capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .player__capa[hidden], .player video[hidden] { display: none; } /* Alvo grande e explícito sobre o poster. Os controles nativos do navegador nem sempre se pintam antes do primeiro toque com preload="none", e este site atende tanto representante quanto cliente final — o "assistir" tem que estar na cara. Some depois do primeiro play e devolve o comando aos controles nativos. */ .player__play { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-3); background: rgb(var(--tinta-rgb) / .28); border: 0; cursor: pointer; color: var(--algodao); font-size: var(--t-rotulo); font-weight: var(--peso-forte); letter-spacing: var(--tr-rotulo); text-transform: uppercase; transition: opacity var(--dur-2) var(--suave); } .player__play span { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--rad-total); background: var(--algodao); color: var(--carmim); box-shadow: var(--elev-2); transition: transform var(--dur-2) var(--saida); } .player__play svg { width: 1.4rem; height: 1.4rem; margin-left: .15rem; } .player__play:hover span { transform: scale(1.08); } .player__play[hidden] { display: none; } .player__passo { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); } .player__passo[hidden] { display: none; } .player__contagem { font-family: var(--fonte-dado); font-size: var(--t-auxiliar); color: var(--texto-brando); } /* A FOTO EM TELA CHEIA ────────────────────────────────────────────────────── A janela que abre ao clicar na foto grande da peça. É o `.modal` do sistema com um modificador só, como o `.modal--video` logo acima: véu, abertura, Esc, clique fora, foco preso e foco devolvido são do site.js, e não se repetem. O modificador é MEDIDA, e nada mais: 66rem contra as 46rem do modal de texto, porque aqui o conteúdo é a foto e cada rem a menos é produto que a cliente não vê. É o mesmo raciocínio das 58rem do escolhedor de foto do painel — e o mesmo do caminho contrário, as 30rem do modal de vídeo, que é estreito porque o vídeo é vertical. */ /* ⚠️ AS DUAS MEDIDAS DA JANELA MORAM AQUI, E SÓ AQUI (fase 17B). A altura da foto é a da janela menos o recuo do corpo — se os três números fossem escritos em três lugares, mudar um deixaria os outros mentindo, que foi exatamente o que aconteceu enquanto a foto tinha um teto próprio de 72dvh: ele havia sido escolhido para caber DEBAIXO do cabeçalho, e o cabeçalho não existe mais desde 25/8/2026. A conta abaixo é a mesma nos dois tamanhos de tela, e no celular ela chega sozinha em 100dvh porque lá o recuo é zero. */ .modal--foto { --altura-janela: min(92dvh, 56rem); --recuo-janela: var(--esp-4); width: min(66rem, calc(100% - var(--esp-5) * 2)); max-height: var(--altura-janela); } .modal--foto .modal__corpo { padding: var(--recuo-janela); } /* ⚠️ A MOLDURA TEM O TAMANHO DA FOTO, E NÃO O DA JANELA. `align-self: center` é o que faz isso: sem ele o `.modal__corpo`, que é uma coluna flex, estica a moldura de ponta a ponta e sobra uma faixa de bruma de cada lado da foto — 116 px por lado em 1440, medido antes da linha existir. A foto aqui não é cortada por nada: `max-width` e `max-height` a seguram, e a proporção é a dela, seja 4:3 ou não (52 fotos do acervo vieram de original pequeno e não são). Cortar seria esconder da cliente justamente a parte que ela clicou para ver. */ .foto-cheia { position: relative; margin: 0; align-self: center; max-width: 100%; background: var(--bruma); border-radius: var(--rad-2); overflow: hidden; /* ⚠️ ESTA LINHA É O QUE IMPEDE O DESLIZE DE BRIGAR COM A ROLAGEM. `pan-y` entrega o eixo vertical ao navegador — a página rola normalmente com o dedo em cima da foto — e reserva o horizontal para o script. Sem ela os dois disputam o mesmo gesto, e o resultado é a tela travando de lado no meio de uma rolagem. */ touch-action: pan-y; } .foto-cheia__trilho { position: relative; display: block; } /* Enquanto o dedo está na tela não há transição nenhuma: a foto acompanha o movimento quadro a quadro. A classe abaixo entra só na hora de assentar — quando o dedo solta —, e some assim que a troca termina. */ .foto-cheia__trilho--assentando { transition: transform var(--dur-2) var(--saida); } .foto-cheia__quadro { display: block; max-width: 100%; max-height: calc(var(--altura-janela) - var(--recuo-janela) * 2); width: auto; height: auto; } /* As vizinhas ocupam exatamente a caixa da foto do meio e ficam encostadas nela, uma de cada lado, fora do que a moldura mostra. */ .foto-cheia__vizinha { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--bruma); } .foto-cheia__vizinha--antes { translate: -100% 0; } .foto-cheia__vizinha--depois { translate: 100% 0; } /* AS SETAS E O × ficam SOBRE a foto, que é onde a mão já está — no vídeo as setas estão acima da moldura porque disputariam espaço com a barra de controle nativa, e aqui não há barra nenhuma. `--alt-controle` é 44px, o alvo de toque mínimo, e é o mesmo token que dá altura a todo campo e botão do sistema. ⚠️ O × ENTROU NESTA REGRA EM 25/8/2026 (fase 17B), quando o cabeçalho da janela saiu. Ele é a MESMA pastilha das setas de propósito: os três botões flutuam sobre a mesma foto, e um deles com outra roupa — o `.btn--icone` quadrado do cabeçalho, desenhado para pousar sobre superfície opaca — seria um segundo idioma para a mesma situação. O alvo não encolheu: era 44 × 44 no cabeçalho e continua 44 × 44 aqui. */ .foto-cheia__seta, .foto-cheia__fechar { position: absolute; z-index: 2; display: grid; place-items: center; width: var(--alt-controle); height: var(--alt-controle); padding: 0; border: 0; border-radius: var(--rad-total); cursor: pointer; background: rgb(var(--algodao-rgb) / .92); color: var(--texto); box-shadow: var(--elev-2); transition: background var(--dur-1) var(--suave), transform var(--dur-2) var(--saida); } .foto-cheia__seta { top: 50%; translate: 0 -50%; } .foto-cheia__seta:hover, .foto-cheia__fechar:hover { background: var(--algodao); transform: scale(1.06); } .foto-cheia__seta svg, .foto-cheia__fechar svg { width: 1.1rem; height: 1.1rem; } .foto-cheia__seta--volta { left: var(--esp-3); } .foto-cheia__seta--segue { right: var(--esp-3); } .foto-cheia__fechar { top: var(--esp-3); right: var(--esp-3); } /* O contador é a mesma pastilha da etiqueta da lupa, no canto de baixo: mesmo raio, mesmo fundo, mesma tinta. Uma pastilha nova aqui seria um segundo idioma para a mesma ideia. */ .foto-cheia__conta { position: absolute; left: 50%; bottom: var(--esp-3); z-index: 2; translate: -50% 0; padding: var(--esp-2) var(--esp-3); border-radius: var(--rad-total); background: rgb(var(--algodao-rgb) / .92); color: var(--texto-brando); } /* Combinação de variação indisponível — some do caminho sem sumir da tela. */ .opcao--fora { opacity: .55; cursor: not-allowed; } .opcao--fora .opcao__texto s { text-decoration-color: var(--erro); } /* Sanfona — especificação longa que não precisa ficar aberta o tempo todo. */ .sanfona { border-top: 1px dashed var(--borda); } .sanfona__gatilho { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); width: 100%; padding: var(--esp-4) 0; background: none; border: 0; cursor: pointer; font-size: var(--t-corpo-sm); font-weight: var(--peso-medio); text-align: left; transition: color var(--dur-1) var(--suave); } .sanfona__gatilho::-webkit-details-marker { display: none; } .sanfona__gatilho:hover { color: var(--carmim); } .sanfona__sinal { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: none; border: 1px solid var(--borda); border-radius: var(--rad-1); transition: transform var(--dur-2) var(--saida), background var(--dur-1) var(--suave); } .sanfona__sinal svg { width: .75rem; height: .75rem; } .sanfona[open] .sanfona__sinal { transform: rotate(45deg); background: var(--carmim); color: var(--algodao); border-color: var(--carmim); } .sanfona__corpo { padding-bottom: var(--esp-4); animation: sanfona-abrir var(--dur-3) var(--saida); } @keyframes sanfona-abrir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* CATÁLOGOS PDF */ .card-catalogo { display: grid; grid-template-columns: 7rem 1fr; gap: var(--esp-4); padding: var(--esp-4); background: var(--superficie-alta); border: 1px solid var(--borda); border-radius: var(--rad-2); transition: transform var(--dur-2) var(--saida), box-shadow var(--dur-2) var(--saida); } .card-catalogo:hover { transform: translateY(-3px); box-shadow: var(--elev-2); } .card-catalogo img { width: 100%; aspect-ratio: 5 / 7; object-fit: cover; border-radius: var(--rad-1); } .card-catalogo__corpo { display: flex; flex-direction: column; gap: var(--esp-3); align-items: flex-start; } /* PÁGINAS INSTITUCIONAIS (fase 11) — revenda, fábrica, contato, privacidade. Quatro páginas de texto que dividem o mesmo esqueleto: cabeça de seção, títulos de nível dois espaçados, e blocos. Não têm componente próprio quase nenhum — o que elas fazem é montar os que já existem numa ordem que responde perguntas. Foi a decisão de projeto: `.bloco`, `.grade`, `.card-categoria`, `.card-catalogo`, `.badge` e `.aviso` já estavam prontos, e três telas novas não justificam três componentes novos. */ .institucional__titulo { margin-top: var(--esp-8); margin-bottom: var(--esp-4); } .institucional__legenda { margin-top: calc(var(--esp-4) * -1); margin-bottom: var(--esp-5); max-width: var(--largura-texto); } .institucional__blocos, .institucional__condicoes, .institucional__canais, .institucional__linhas { margin-top: var(--esp-5); } .institucional__blocos .bloco { display: flex; flex-direction: column; gap: var(--esp-3); } /* A coluna de saída da página da fábrica: dois botões empilhados, alinhados ao topo do bloco vizinho em vez de esticados na altura dele. */ .institucional__saida { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: var(--esp-3); } /* A HERO DAS INSTITUCIONAIS. Metade da altura da home: estas páginas abrem com presença, mas o conteúdo delas é o que importa, e uma dobra de tela inteira faria a pessoa rolar às cegas antes de chegar nele. */ .hero--institucional { min-height: 62vh; } /* O FECHO ESCURO. Toda institucional termina oferecendo o passo seguinte — página que informa e não aponta para lugar nenhum é um beco com decoração. */ .institucional__fecho { position: relative; overflow: hidden; } .institucional__brilho { top: calc(var(--esp-9) * -1); right: calc(var(--esp-9) * -1); width: var(--largura-coluna); height: var(--largura-coluna); } .institucional__fecho .institucional__blocos { margin-top: 0; align-items: center; } .institucional__fecho-texto { color: rgb(var(--bruma-rgb) / .78); max-width: var(--largura-texto); margin: var(--esp-3) 0 var(--esp-5); } .institucional__fecho .endereco { color: var(--algodao); } .institucional__fecho-fixo { color: var(--rose); margin-top: var(--esp-3); } /* O fecho centrado da fábrica: três linhas e dois botões, o arremate da página. */ .institucional__fecho-grade { display: grid; justify-items: center; text-align: center; gap: var(--esp-3); } .institucional__fecho-grade .institucional__fecho-texto { margin: 0 0 var(--esp-3); } .institucional__arabesco { width: 100%; max-width: 16rem; margin-bottom: var(--esp-2); } /* A página de privacidade é texto corrido, e texto corrido tem largura de leitura. Sem isto a linha atravessa 1240px e o olho perde a volta. */ .institucional--texto .institucional__secao { margin-top: var(--esp-7); max-width: var(--largura-texto); /* Coluna com respiro entre os filhos: o bloco final da política empilha endereço, telefone e botão, e sem isto os três se encostavam. */ display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-4); } .institucional--texto .institucional__secao h2 { margin-bottom: calc(var(--esp-4) * -1 + var(--esp-1)); } .institucional--texto .aviso { max-width: var(--largura-texto); margin-top: var(--esp-5); } .privacidade__data { margin-top: var(--esp-3); } /* A SEÇÃO QUE TEM ENDEREÇO PRÓPRIO — hoje só `#medicao`, para onde o link "Como funciona" do aviso de cookies leva (fase 19A). Sem o recuo, o cabeçalho, que gruda no alto da tela, cobre o título da seção na chegada. O botão "Mudar minha escolha" não precisa de regra: o `gap` da coluna já o afasta do texto. */ .institucional--texto .institucional__secao[id] { scroll-margin-top: calc(var(--alt-cabecalho) + var(--esp-5)); } /* A costura logo abaixo do título: separa a pergunta ("o que este site guarda") da resposta, e é o mesmo divisor que o resto do site usa entre seções. */ .institucional--texto .costura { max-width: var(--largura-texto); margin-top: var(--esp-5); } /* A CONDIÇÃO — rótulo pequeno em cima, número grande embaixo. É a mesma leitura da faixa de números da hero ("35+ anos / de fábrica") e do resumo do medidor ("Área / 3,45 m²"), e é de propósito: quem revende compara fábrica com fábrica, e o que decide é o número, não o adjetivo em volta dele. Por isso o pedido mínimo aparece ANTES dos argumentos de venda, nesta forma. */ .condicao { display: grid; gap: var(--esp-1); padding: var(--esp-4) 0; border-top: var(--fio-espessura) solid var(--borda); } .condicao__valor { font-family: var(--fonte-titulo); font-size: var(--t-h4); font-variation-settings: 'opsz' 48, 'SOFT' 40; color: var(--texto); } /* LISTA MARCADA — item com visto no lugar do ponto. Serve para o que a fábrica oferece e para o que o site não faz; nos dois casos a leitura é "isto está garantido", que é o que o visto diz e o ponto não diz. */ .lista-marcada { display: grid; gap: var(--esp-3); list-style: none; padding: 0; } .lista-marcada li { display: flex; align-items: flex-start; gap: var(--esp-3); font-size: var(--t-corpo); } .lista-marcada svg { flex: none; width: 1rem; height: 1rem; margin-top: .25rem; color: var(--carmim); } .secao--tinta .lista-marcada svg { color: var(--rose); } /* O CANAL DE CONTATO — ícone, para que serve, e o botão. O texto vem ANTES do número porque a pergunta de quem chega é "qual desses é o meu?", e não "qual é o número". Três canais sem essa frase fazem o lojista cair na fila do consumidor. */ .canal { display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-5); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--rad-2); } .canal__icone { width: var(--esp-6); height: var(--esp-6); color: var(--carmim); } .canal .btn { margin-top: auto; } /* O endereço não é citação: o itálico que o navegador põe em
por padrão o faz parecer um aparte, e ele é dado. */ .endereco { font-style: normal; line-height: var(--lh-corpo); } /* O convite do fim da revenda: texto à esquerda, botão à direita, e empilhado quando não há largura para os dois. */ .institucional__convite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-5); } .institucional__convite > div { max-width: var(--largura-texto); } /* ══ LANDING DE REVENDA ═══════════════════════════════════════════════════ Três componentes nascidos para a página de captação de representantes, todos feitos com os tokens e o vocabulário de movimento que já existiam. O que a página tem de novo não é paleta nem tipografia: é intensidade. */ /* O CARD DE BENEFÍCIO. Uma grade de cards com ícone é o desenho mais previsível que existe, então duas coisas o tiram do lugar-comum, e as duas vêm da própria fábrica: o ícone sai do conjunto dela — régua, tesoura, agulha, bastidor, caminhão, e não a estrelinha de sempre — e o hover NÃO é a sombra que todo card faz. É o fio de costura correndo na borda de cima, o mesmo tracejado da assinatura do sistema, como se o card estivesse sendo pregado ali. */ .beneficio { position: relative; display: flex; flex-direction: column; gap: var(--esp-3); padding: var(--esp-5); background: var(--superficie-alta); border: 1px solid var(--borda); border-radius: var(--rad-2); transition: border-color var(--dur-2) var(--saida), transform var(--dur-2) var(--saida); } .beneficio::before { content: ''; position: absolute; top: -1px; left: var(--esp-5); right: var(--esp-5); border-top: var(--fio-espessura) dashed var(--carmim); /* Fechado por padrão; o hover abre o fio da esquerda para a direita. */ transform: scaleX(0); transform-origin: left; transition: transform var(--dur-3) var(--saida); } .beneficio:hover, .beneficio:focus-within { border-color: var(--borda-forte); transform: translateY(-2px); } .beneficio:hover::before, .beneficio:focus-within::before { transform: scaleX(1); } .beneficio__icone { width: var(--esp-6); height: var(--esp-6); color: var(--carmim); } .beneficio__titulo { font-family: var(--fonte-titulo); font-size: var(--t-h5); font-variation-settings: 'opsz' 24, 'SOFT' 40; } /* O NÚMERO, quando o card tem um. É o que transforma "parcelamos em até 6× no cartão de crédito, e a gente envia o link pelo WhatsApp" — um parágrafo que ninguém lê — em algo que se entende de relance: 6× em corpo de título, e o resto virando a legenda que ele é. Mesmo gesto da faixa de números da hero e do resumo do medidor, e é por isso que não é um componente novo. Vem DEPOIS do título na tela e ANTES dele em importância, então o título encolhe para rótulo quando o valor existe. */ .beneficio:has(.beneficio__valor) .beneficio__titulo { font-family: var(--fonte-corpo); font-size: var(--t-rotulo); font-weight: var(--peso-forte); letter-spacing: var(--tr-rotulo); text-transform: uppercase; font-variation-settings: 'wdth' 88; color: var(--texto-brando); } .beneficio__valor { font-family: var(--fonte-titulo); font-size: var(--t-h3); font-variation-settings: 'opsz' 72, 'SOFT' 40; line-height: var(--lh-apertada); color: var(--texto); } /* O card de valor tem menos ar entre título e número: eles são um par, e o detalhe embaixo é que se separa. */ .beneficio:has(.beneficio__valor) { gap: var(--esp-2); } .beneficio:has(.beneficio__valor) .corpo-sm { margin-top: var(--esp-2); } /* A CONDIÇÃO ganha ícone, e continua sendo faixa de fio fino em vez de caixa. É de propósito: a seção alterna texturas — faixa, cards, faixa, cards — e quatro caixas aqui em cima fariam onze caixas seguidas numa tela só, que é como uma landing vira painel de controle. */ .condicao__icone { width: var(--esp-5); height: var(--esp-5); color: var(--carmim); transition: transform var(--dur-2) var(--saida); } .condicao:hover .condicao__icone { transform: translateY(-2px); } /* A REGRA — informação condicional, escrita como condição. O frete tem DOIS resultados e o parágrafo escondia isso: era preciso ler até o fim para descobrir que existe o caso em que o cliente paga. Em duas linhas, com a seta no meio, a pessoa vê os dois de uma vez e sabe em qual ela cai. */ .regra { display: grid; gap: var(--esp-4); padding: var(--esp-5); background: var(--superficie-alta); border: 1px solid var(--borda); border-radius: var(--rad-2); } .regra__linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-2) var(--esp-3); } .regra__caso { flex: none; display: inline-flex; align-items: center; gap: var(--esp-2); font-size: var(--t-corpo-sm); color: var(--texto-brando); } .regra__caso svg { width: 1rem; height: 1rem; } /* A seta é o operador da condição: "isto ENTÃO aquilo". */ .regra__seta { flex: none; width: 1rem; height: 1rem; color: var(--borda-forte); } .regra__valor { font-family: var(--fonte-titulo); font-size: var(--t-h4); font-variation-settings: 'opsz' 48, 'SOFT' 40; color: var(--texto); } /* O caso favorável em carmim; o outro em tinta. A cor faz a leitura antes da palavra — mas o segundo não é erro, é a outra metade da regra, então ele não leva vermelho de alerta. */ .regra__linha--sim .regra__caso svg { color: var(--sucesso); } .regra__linha--sim .regra__valor { color: var(--carmim); } .regra__nota { padding-top: var(--esp-4); border-top: 1px dashed var(--borda); font-size: var(--t-corpo-sm); color: var(--texto-brando); } @media (max-width: 640px) { /* Em tela estreita a linha quebra e o resultado desce para baixo da condição — mas a seta continuava apontando para a direita, para o vazio. Girada, ela volta a apontar para onde a leitura vai. */ .regra__seta { transform: rotate(90deg); } } /* O PASSO, pendurado na costura vertical. O número não é um círculo colorido: é o nó da linha, na fonte de dado, com o mesmo halo do `.costura__no`. Ele fica EM CIMA da linha, e é por isso que o passo tem recuo à esquerda. */ .passos { display: grid; gap: var(--esp-7); padding-left: var(--esp-6); } .passo { position: relative; display: grid; gap: var(--esp-2); } .passo__numero { position: absolute; left: calc(var(--esp-6) * -1); top: 0; width: var(--esp-6); height: var(--esp-6); display: grid; place-items: center; margin-left: calc(var(--esp-6) / -2); font-family: var(--fonte-dado); font-size: var(--t-corpo-sm); letter-spacing: var(--tr-dado); color: var(--tinta); background: var(--rose); border-radius: var(--rad-total); box-shadow: 0 0 0 4px rgb(var(--rose-rgb) / .18); } .passo__titulo { font-family: var(--fonte-titulo); font-size: var(--t-h4); font-variation-settings: 'opsz' 48, 'SOFT' 40; color: var(--algodao); } .passo__texto { color: rgb(var(--bruma-rgb) / .78); max-width: var(--largura-texto); } /* A PROVA — os números que ocupam o lugar dos depoimentos que não existem. Mesma leitura da faixa da hero e do resumo do medidor: valor grande em Fraunces, rótulo pequeno embaixo. */ .prova { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-5); } .prova__item { display: grid; gap: var(--esp-1); padding-top: var(--esp-4); border-top: var(--fio-espessura) solid var(--borda-inversa); } .prova__valor { font-family: var(--fonte-titulo); font-size: var(--t-h2); font-variation-settings: 'opsz' 72, 'SOFT' 40, 'WONK' 1; line-height: var(--lh-apertada); color: var(--algodao); } .prova__rotulo { color: var(--rose); } /* A hero da revenda reusa `.hero--foto` inteira. Mudam duas coisas. A ALTURA: a da home ocupa a tela toda porque é a porta do site; esta abre uma página que precisa continuar, então deixa a próxima seção espiar por baixo e convidar a rolagem. O VÉU: a foto são pilhas de toalhas brancas e palha num ambiente claro, e o título atravessa uma toalha branca no meio da frase. O véu calibrado na foto da home não segura ali — a razão inteira está no token. */ .hero--revenda { min-height: 82vh; } /* ⚠️ AS DUAS CLASSES NO SELETOR NÃO SÃO ENFEITE. Escrito `.hero--revenda::after`, este véu NUNCA CHEGOU À TELA: ele empata em especificidade com o `.hero--foto::after` do bloco geral, que mora ~120 linhas ABAIXO nesta mesma folha — e no empate ganha quem vem depois. O token existia, estava documentado no ds1.html com o motivo inteiro, e a hero da revenda continuou com o véu da home desde o dia em que foi escrito. Achado na fase 15, ao medir por que o contraste do selo não melhorava depois de o token ser reforçado. O elemento tem as duas classes (`hero hero--foto hero--revenda`), então `.hero--foto.hero--revenda` vence por especificidade e não depende mais da ordem das linhas. */ .hero--foto.hero--revenda::after { background: var(--grad-veu-hero-forte); } /* Foto de apoio com a marca do sistema: canto vivo, e o fio tracejado deslocado por trás, como um bastidor. Um `outline` deslocado não é sombra — é o mesmo gesto do contorno da prévia do medidor. */ .foto-bastidor { position: relative; border-radius: var(--rad-2); overflow: hidden; outline: var(--fio-espessura) dashed var(--borda-forte); outline-offset: var(--esp-3); } .foto-bastidor img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Os arranjos da página de revenda. Ficam com o prefixo `revenda__` porque são posicionamento desta página, e não componentes que outra tela vá reusar. */ .revenda__abertura { align-items: center; gap: var(--esp-8); } .revenda__abertura > div > .corpo { margin-bottom: var(--esp-4); max-width: var(--largura-texto); } /* A frase que explica de onde sai a margem da revendedora. É a única do corpo da página que ganha peso: sem isso ela vira mais um parágrafo. */ .revenda__destaque { color: var(--texto); font-weight: var(--peso-medio); padding-left: var(--esp-4); border-left: var(--fio-espessura) solid var(--carmim); } .revenda__condicoes-secao { position: relative; overflow: hidden; } /* Os cards do "o que você leva" são menores que os do pagamento de propósito: duas grades de card seguidas com o mesmo peso viram uma parede: é a diferença de ritmo que diz que são duas listas, e não uma de sete. */ .beneficio--compacto { padding: var(--esp-4); gap: var(--esp-2); } .beneficio--compacto .beneficio__icone { width: var(--esp-5); height: var(--esp-5); } .beneficio--compacto .beneficio__titulo { font-size: var(--t-h6); } .beneficio--compacto::before { left: var(--esp-4); right: var(--esp-4); } .revenda__passos-secao { position: relative; overflow: hidden; } .revenda__brilho { top: calc(var(--esp-10) * -1); right: calc(var(--esp-9) * -1); width: var(--largura-coluna); height: var(--largura-coluna); } .revenda__brilho--fim { top: auto; bottom: calc(var(--esp-10) * -1); right: auto; left: calc(var(--esp-9) * -1); } .revenda__acao-passos { margin-top: var(--esp-8); padding-left: var(--esp-6); } .revenda__fechamento { position: relative; overflow: hidden; text-align: center; } .revenda__fechamento-grade { display: grid; justify-items: center; gap: var(--esp-4); } .revenda__fechamento-texto { max-width: var(--largura-texto); } .revenda__arabesco { width: 100%; max-width: 20rem; margin-bottom: var(--esp-2); } @media (max-width: 900px) { .prova { grid-template-columns: repeat(2, minmax(0, 1fr)); } .revenda__abertura { gap: var(--esp-6); } } @media (max-width: 640px) { .passos { gap: var(--esp-6); padding-left: var(--esp-5); } .passo__numero { left: calc(var(--esp-5) * -1); margin-left: calc(var(--esp-5) / -2); width: var(--esp-5); height: var(--esp-5); font-size: var(--t-auxiliar); } .revenda__acao-passos { padding-left: var(--esp-5); } .hero--revenda { min-height: 0; } /* O VÉU ALIVIA NO CELULAR, E A SOMBRA ASSUME O QUE ELE LARGOU. Medido a 375px em 12/8/2026: o véu de tela larga cobria a foto em 84% na média da altura do título e 94% no pior ponto — a toalha bordada sumia. A causa é a segunda camada do véu, a horizontal, que escurece a esquerda porque lá é onde o texto mora em tela larga; no telefone o texto ocupa a largura toda e ela só cobra o preço sem entregar o benefício. São duas linhas e elas andam juntas: o véu do celular é de uma camada só e abre o meio da hero, e a sombra funda devolve no TEXTO o recorte que o véu deixou de dar na IMAGEM. Trocar uma sem a outra derruba o contraste. ⚠️ MESMA ARMADILHA DE ESPECIFICIDADE DA LINHA 510: as duas classes no seletor não são enfeite. `@media` não soma especificidade nenhuma, então `.hero--revenda::after` aqui dentro empataria com `.hero--foto::after` do bloco geral, que mora ADIANTE nesta folha, e perderia no desempate por ordem — sem erro, sem aviso, e com o véu de tela larga na tela do celular. A sombra é redeclaração do token no escopo da hero, não regra nova: quem consome `--sombra-texto-sobre-foto` é o bloco `.hero--foto` mais adiante, e todo consumidor dele dentro desta hero passa a receber a versão funda. É o mesmo idioma de `--largura-titulo-hero`. */ .hero--foto.hero--revenda { --sombra-texto-sobre-foto: var(--sombra-texto-sobre-foto-movel); } .hero--foto.hero--revenda::after { background: var(--grad-veu-hero-forte-movel); } } /* ── 09 RESPONSIVO ───────────────────────────────────────────────────────── */ @media (max-width: 1080px) { .grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Uma coluna só. A regra de duas colunas mora em `min-width: 1081px`, então aqui não há o que desfazer — o que sobra é o respiro entre os blocos. */ .medidor__controles { gap: var(--esp-6); } } @media (max-width: 900px) { .menu, .barra-topo { display: none; } .abre-menu { display: inline-flex; } .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .secao { padding-block: var(--esp-8); } } @media (max-width: 640px) { .grade--2, .grade--3, .grade--4 { grid-template-columns: minmax(0, 1fr); } .secao { padding-block: var(--esp-7); } .card-catalogo { grid-template-columns: 5rem 1fr; } .modal { max-height: 92vh; } .medidor__par { grid-template-columns: 1fr; } .medidor__vezes { display: none; } .mesa { padding: var(--esp-6) var(--esp-4) var(--esp-4) var(--esp-6); } .mesa__palco { height: 15rem; } } /* ── 10 MOVIMENTO REDUZIDO ───────────────────────────────────────────────── ⚠️ A REGRA GERAL — o `*` que encurta toda animação e toda transição — MUDOU PARA O base.css em 14/8/2026. Ela é regra de documento, não padrão de negócio, e o painel administrativo não carrega esta folha: enquanto ela morava aqui, quem pedisse menos movimento no sistema continuava recebendo movimento inteiro dentro do painel. O que ficou aqui é o que é daqui — o comportamento dos componentes que esta folha desenha. */ @media (prefers-reduced-motion: reduce) { .js .surge, .js .surge-lento { opacity: 1 !important; transform: none !important; } .js .revela-palavra { transform: none !important; } /* Tudo o que se desenha por `--avanco` nasce INTEIRO aqui. A costura vertical da landing de revenda entrou nesta lista junto com o componente: sem ela, a linha que segura os quatro passos ficaria em 0 e sumiria da tela para quem pediu menos movimento — o conteúdo continuaria legível, mas a espinha que o organiza desapareceria, que é pior do que não animar. */ .js .costura:not(.visivel), .js .costura-vertical:not(.visivel), .js .arabesco-porta:not(.visivel) { --avanco: 1; } /* O fio do card de benefício NÃO entra aqui de propósito. Ele é sinal de hover, não decoração: a regra geral acima já encurta a transição para 0,01ms, então ele continua aparecendo ao apontar — instantâneo, em vez de correndo. Forçá-lo aberto tiraria o único sinal de que o card responde. */ #fundo-fios { display: none; } .marquise { animation: none; } /* O menu móvel perde a transição INTEIRA, não só a duração. A regra geral acima encurta a duração, mas basta existir transição em `visibility` para o valor calculado ficar `hidden` no primeiro quadro — e aí o teclado não entra no menu, porque .focus() é ignorado em elemento invisível. Sem movimento o menu já aparece de uma vez, então não há o que animar. */ .menu-movel, .menu-movel[data-aberto='true'] { transition: none; } } /* ── 11 SEÇÕES ESPECÍFICAS ───────────────────────────────────────────────── */ .hero { padding-block: var(--esp-8) var(--esp-9); overflow: hidden; } .hero__grade { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--esp-8); align-items: center; } /* ── A hero de foto ────────────────────────────────────────────────────────── A peça ocupa a tela e o texto entra por cima, ancorado na base. A altura usa `svh` — a unidade que desconta a barra do navegador do celular; com `vh`, a primeira dobra ficaria escondida atrás da barra justamente no aparelho em que a maior parte das visitas acontece. O teto de 46rem existe porque em monitor grande e deitado uma hero de 88% da altura empurra o catálogo inteiro para fora da tela — e o catálogo é o que esta página existe para abrir. */ .hero--foto { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(88svh, 46rem); padding-block: var(--esp-9) var(--esp-8); } .hero--foto .hero__grade { grid-template-columns: minmax(0, 1fr); } .hero__fundo { position: absolute; inset: 0; z-index: -2; display: block; } .hero__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; } .hero--foto::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grad-veu-hero); } .hero__conteudo { position: relative; width: 100%; } /* O título não atravessa a página inteira. Além de ser linha longa demais para ler, ele passaria por cima da cama toda — e a cama é o argumento de venda. */ .hero--foto .hero__titulo { max-width: var(--largura-titulo-hero); } /* A sombra faz o trabalho que o véu faria escurecendo a foto inteira. */ .hero--foto .hero__eixo, .hero--foto .hero__titulo, .hero--foto .hero__texto, .hero--foto .hero__numero b, .hero--foto .hero__numero .rotulo { text-shadow: var(--sombra-texto-sobre-foto); } /* O bloco de texto é mais compacto aqui do que na versão sobre fundo liso, e o motivo é de legibilidade, não de gosto: quanto mais alto o texto sobe na foto, mais claro é o fundo atrás dele. Compactar desce tudo para a faixa onde o véu já é forte — o que dá contraste sem precisar escurecer a peça a ponto de ela sumir. Medido: o título saiu de 2,28 para acima de 4. */ .hero--foto .hero__eixo { margin-bottom: var(--esp-4); } .hero--foto .hero__arabesco { margin-bottom: var(--esp-4); max-width: 20rem; } .hero--foto .hero__texto { margin-bottom: var(--esp-5); } .hero--foto .hero__acoes { margin-bottom: var(--esp-5); } .hero--foto .hero__titulo, .hero--foto .hero__texto { color: var(--texto-inverso); } .hero--foto .hero__texto { max-width: 38rem; } .hero--foto .hero__eixo { color: var(--rose); } .hero--foto .hero__eixo::after { background: var(--borda-inversa); } .hero--foto .hero__numeros { border-block-color: var(--borda-inversa); } .hero--foto .hero__numero + .hero__numero { border-left-color: var(--borda-inversa); } .hero--foto .hero__numero b { color: var(--texto-inverso); } .hero--foto .hero__numero .rotulo { color: var(--rose); } /* O fio de bordado sobre foto escura mora com o componente, e não aqui: a mesma regra vale para a seção tinta, e ter a decisão em dois arquivos foi o que deixou o motivo virar barro no escuro por um dia inteiro. Ver `.arabesco__traco` em componentes.css. */ .hero__eixo { display: flex; align-items: center; gap: var(--esp-3); color: var(--carmim); margin-bottom: var(--esp-5); } .hero__eixo::after { content: ''; flex: 1; height: 1px; background: var(--borda); max-width: var(--esp-9); } .hero__titulo { margin-bottom: var(--esp-2); } .hero__titulo em { font-style: normal; color: var(--carmim); } .hero__arabesco { max-width: 26rem; margin-bottom: var(--esp-5); } .hero__texto { max-width: 34rem; margin-bottom: var(--esp-6); } .hero__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-bottom: var(--esp-6); } .hero__numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 36rem; border-block: 1px solid var(--borda); } .hero__numero { padding: var(--esp-4) var(--esp-4) var(--esp-4) 0; } .hero__numero + .hero__numero { border-left: 1px solid var(--borda); padding-left: var(--esp-4); } .hero__numero b { display: block; font-family: var(--fonte-titulo); font-size: var(--t-h4); font-weight: var(--peso-normal); font-variation-settings: 'opsz' 48, 'SOFT' 50, 'WONK' 1; line-height: 1.15; white-space: nowrap; } .hero__numero .rotulo { display: block; margin-top: var(--esp-1); } .hero__fotos { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); } .hero__principal { grid-column: 1 / -1; aspect-ratio: 5 / 4; } /* 4:3, e não mais 1:1. Todas as derivadas de foto do site são 4:3 — é o recorte que o gerador da fase 6 faz uma vez, no arquivo. Um palco quadrado recortaria pela segunda vez o que já foi recortado, e o que se perde na segunda vez são justamente as laterais da cena: o tapete no chão, a cortina na janela. Com 4:3, a miniatura mostra o mesmo enquadramento que o card do catálogo. */ .hero__miniatura { aspect-ratio: 4 / 3; } .hero__ficha { position: absolute; top: var(--esp-4); left: var(--esp-4); z-index: 2; background: rgb(var(--algodao-rgb) / .94); box-shadow: var(--elev-2); } .hero__giro { display: flex; align-items: flex-start; gap: var(--esp-3); margin-top: var(--esp-4); } .hero__pontos { display: flex; gap: var(--esp-1); padding-top: .45rem; flex: none; } .hero__pontos span { width: .35rem; height: .35rem; border-radius: var(--rad-total); background: var(--borda-forte); transition: background var(--dur-2) var(--suave); } .hero__pontos span[data-ativo='true'] { background: var(--carmim); } .hero__giro p { transition: opacity var(--dur-2) var(--suave); } .faixa-linhas { background: var(--tinta); color: var(--bruma); overflow: hidden; } .faixa-linhas__item { display: flex; align-items: center; gap: var(--esp-5); padding-inline: var(--esp-5); white-space: nowrap; font-size: var(--t-rotulo); letter-spacing: var(--tr-marca); text-transform: uppercase; font-variation-settings: 'wdth' 88; padding-block: var(--esp-4); } .faixa-linhas__losango { color: var(--rose); } /* PÁGINAS DE SISTEMA — o 404 e o esqueleto de fase. Nasceram com style="" no HTML dos modelos. Nenhum valor mudou de lugar: só saiu do HTML, onde nada é auditável, para cá, onde tudo é token. */ .erro404 { max-width: var(--largura-texto); margin-inline: auto; } .erro404__acoes { margin-top: var(--esp-4); } .esqueleto__titulo { margin-block: var(--esp-3) var(--esp-5); } .esqueleto__ficha { margin-bottom: var(--esp-5); } .esqueleto__aviso { margin-top: var(--esp-5); max-width: var(--largura-texto); } /* ── 12 RESPONSIVO DAS SEÇÕES ──────────────────────────────────────────── Vem depois do bloco 11 de propósito: regra de mesma especificidade só vence se vier por último. */ @media (max-width: 1080px) { .hero__grade { gap: var(--esp-6); } } @media (max-width: 900px) { .hero { padding-block: var(--esp-7) var(--esp-8); } .hero__grade { grid-template-columns: minmax(0, 1fr); } .hero__fotos { order: -1; max-width: 34rem; } .hero__principal { aspect-ratio: 16 / 10; } } @media (max-width: 640px) { .hero__numero b { font-size: var(--t-h5); } .hero__numero { padding-inline: var(--esp-2) 0; } .hero__numero + .hero__numero { padding-left: var(--esp-2); } .hero__acoes .btn { flex: 1 1 100%; justify-content: space-between; } /* A regra que existia aqui — miniatura em 4:3 no celular — subiu para o bloco 11 e passou a valer em toda largura, quando o palco quadrado saiu do sistema. Não há mais nada a corrigir neste ponto de quebra. */ .faixa-linhas__item { padding-block: var(--esp-3); } .cabecalho__interno { gap: var(--esp-3); min-height: var(--alt-cabecalho); } :root { --alt-cabecalho: 4rem; } /* No celular a marca cede altura para o cabeçalho caber em 4rem sem apertar o botão de orçamento, que é o que a pessoa vai tocar. */ .marca__logo { height: 2.3rem; } .cabecalho .btn-orcamento { padding-left: var(--esp-1); gap: 0; } /* Esconde só aos olhos: com display:none o botão perde o nome para o leitor de tela e vira um botão sem rótulo. */ .cabecalho .btn-orcamento .btn__rotulo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .modal__cabeca, .modal__corpo, .gaveta__cabeca, .gaveta__lista, .gaveta__pe { padding: var(--esp-4); } } /* ── 13 CATÁLOGO NAVEGÁVEL ─────────────────────────────────────────────────── Home, índice do catálogo, listagem por categoria, página de marca e busca. Tudo aqui é composição do que já existe nas folhas anteriores; o que ganhou classe própria foi só o que o design system ainda não tinha nome para. ────────────────────────────────────────────────────────────────────────── */ /* ESCADA DE ATRASO — a cascata do surgimento, em quatro degraus fixos. Existe como classe, e não como style="--atraso:160ms" no HTML, porque valor escrito dentro do HTML não obedece a token nenhum e não é auditável. */ .atraso-1 { --atraso: var(--atraso-1); } .atraso-2 { --atraso: var(--atraso-2); } .atraso-3 { --atraso: var(--atraso-3); } .atraso-4 { --atraso: var(--atraso-4); } /* FOTO QUE AINDA NÃO EXISTE ───────────────────────────────────────────────── O terceiro estado da mídia, ao lado de "carregando" e "pronta". A derivada de uma peça pode não ter sido gerada ainda; a resposta certa NÃO é uma imagem quebrada nem um retângulo cinza mudo, é dizer o que está acontecendo. Preenche a caixa inteira do pai (card, painel ou card de categoria), que já tem proporção fixa — então nada pula quando a foto de verdade entrar no lugar. A textura diagonal é a mesma linguagem da .trama: fio cru, sem imagem. */ .midia-ausente { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-2); padding: var(--esp-4); text-align: center; color: var(--texto-brando); background-color: var(--bruma); background-image: repeating-linear-gradient(45deg, rgb(var(--tinta-rgb) / .05) 0 1px, transparent 1px 8px); } .midia-ausente svg { width: 1.6rem; height: 1.6rem; color: var(--borda-forte); } /* CARD DE CATEGORIA SEM FOTO ──────────────────────────────────────────────── O card de categoria escreve em --algodao porque o texto dele mora sobre o véu escuro de uma foto. Sem foto, o fundo é claro e esse mesmo texto ficaria claro sobre claro — contraste na casa de 1,05:1, que é o defeito que passou pela verificação automática na fase 2 e só foi achado olhando a tela. Este modificador tira o véu e devolve o texto à tinta. Mesma leitura do card, contraste certo para o fundo que ele de fato tem. */ .card-categoria--sem-foto { background: var(--bruma); box-shadow: inset 0 0 0 1px var(--borda); } /* O escurecimento local sai junto com o véu: ele existe para dar fundo escuro a um texto claro, e aqui o texto passou a ser escuro. Mantê-lo pintaria tinta sobre tinta — o erro que este modificador existe para evitar, ao contrário. */ .card-categoria--sem-foto .card-categoria__texto { color: var(--texto); background: none; } .card-categoria--sem-foto .card-categoria__seta { border-color: var(--borda-forte); } .card-categoria--sem-foto:hover .card-categoria__seta { background: var(--tinta); color: var(--algodao); } /* A etiqueta de foto ausente sobe para o topo: no rodapé do card já está o nome da categoria, e as duas centralizadas se atropelariam. */ .card-categoria--sem-foto .midia-ausente { justify-content: flex-start; padding-top: var(--esp-6); } /* CARD INTEIRO CLICÁVEL, COM UM LINK SÓ ───────────────────────────────────── O botão do rodapé do card estica a área de clique por cima do card inteiro. Com isso o dedo acerta o card todo, e ainda assim existe UM destino: o teclado tabula uma vez e o leitor de tela anuncia um link, não dois iguais. O .card já é `position: relative` — é dele que o inset:0 se pendura. */ .card__acao::after { content: ''; position: absolute; inset: 0; z-index: 1; } /* Rodapé de card com um filho só: o `space-between` do componente jogaria o botão para a esquerda, e a leitura do card mudaria de uma lista para outra. */ .card__pe--so-acao { justify-content: flex-end; } /* AQUI MORAVA a primeira versão dos filtros — fileiras de links com a gramática do menu do topo. Ela saiu na fase 17 (viraram caixas marcáveis) e o CSS ficou para trás, inerte, com `.filtros__fila` sem nenhum elemento correspondente na marcação. Removido em 6/8/2026, junto da barra deitada. A `.filtros` de verdade está mais abaixo, no bloco da barra de filtros. */ .listagem__resumo { margin-bottom: var(--esp-5); } /* PAGINAÇÃO — três colunas para os botões ficarem nas pontas e a contagem no meio, com os espaços vazios ocupados por vãos, e não por botões desativados. */ .paginacao { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--esp-4); margin-top: var(--esp-7); padding-top: var(--esp-5); border-top: 1px solid var(--borda); } .paginacao > :first-child { justify-self: start; } .paginacao > :last-child { justify-self: end; } /* LISTA VAZIA — o .vazio do sistema, com a moldura tracejada que diz "aqui caberia conteúdo" em vez de parecer o fim da página. */ .vazio--listagem { border: 1px dashed var(--borda-forte); border-radius: var(--rad-2); background: rgb(var(--algodao-rgb) / .6); } .vazio--listagem .h4 { color: var(--texto); } .secao__remate { margin-top: var(--esp-7); } /* CONVITE — o bloco escuro de fim de página, com o argumento à esquerda e a ação à direita. Um bloco, não três cards: os três argumentos de revenda são informação que o cliente ainda não confirmou, e card vazio é pior que ausente. */ .convite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-6); align-items: center; } .convite__texto { max-width: var(--largura-texto); } .convite__titulo { margin-block: var(--esp-3); } /* A BUSCA desceu para o bloco da barra de filtros em 6/8/2026, quando o campo virou componente e passou a aparecer em três lugares — cabeçalho, testeira de listagem e a página de busca. Estava aqui em duplicidade. */ /* PÁGINA DE MARCA */ .marca__cabeca { margin-top: var(--esp-8); } /* Fileira de cards de largura FIXA, alinhada à esquerda. A .grade--4 divide a largura entre quatro colunas sempre — e uma linha que trabalha numa categoria só (Palácio dos Tapetes) ficaria com um card esticado sozinho no meio de três colunas vazias. Aqui o card tem sempre o mesmo tamanho e a fileira simplesmente acaba onde os cards acabam, seja com um ou com oito. É a diferença entre "a grade quebrou" e "é isto que existe". */ .grade--cabe { grid-template-columns: repeat(auto-fill, minmax(0, 17rem)); justify-content: start; } .marca__pendencia { margin-bottom: var(--esp-6); max-width: var(--largura-texto); } @media (max-width: 900px) { .convite { grid-template-columns: minmax(0, 1fr); gap: var(--esp-5); } } @media (max-width: 640px) { .paginacao { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--esp-3); } .paginacao > :first-child, .paginacao > :last-child { justify-self: center; } /* Só na busca da PÁGINA de busca, que é empilhada. No compacto — cabeçalho e testeira — o botão é o selo do lado direito do campo, e `width: 100%` aqui esmagava o campo até zero: era o campo que sumia, não o botão que crescia. */ .busca:not(.busca--compacta) .busca__acao { width: 100%; justify-content: space-between; } } /* Página de produto — em coluna única a ordem muda: foto, decisão, e só depois as garantias e a letra miúda. Ninguém deve rolar três dobras para achar o botão de pedir. */ @media (max-width: 1080px) { .produto { grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); } .produto .galeria, .produto .videos, .produto .produto__extras, .produto .produto__painel { grid-column: auto; grid-row: auto; } /* Em coluna única: prova visual primeiro (foto, vídeo), decisão depois. */ .produto .galeria { order: 1; } .produto .videos { order: 2; } .produto .produto__painel { order: 3; } .produto .produto__extras { order: 4; } .produto__painel, .produto__extras, .produto .videos { max-width: 40rem; } } @media (max-width: 640px) { .galeria { grid-template-columns: minmax(0, 1fr); } .galeria__fitas { flex-direction: row; order: 2; overflow-x: auto; padding-bottom: var(--esp-1); } .galeria__fita { flex: 0 0 4.5rem; } .produto__medida { grid-template-columns: 1fr; } .produto__vezes { display: none; } .produto__garantias { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); } .produto__garantia { flex-direction: row; align-items: center; gap: var(--esp-3); } .produto__garantia svg { flex: none; } /* NO CELULAR A JANELA DA FOTO VAI DE BORDA A BORDA. Ela é a única forma de ver a peça de perto em tela de toque — a lupa não existe ali, porque não há ponteiro para seguir —, e cada pixel de margem é peça que a cliente não vê. A foto passa de ~320 px dentro da página para a largura inteira da tela, sozinha, com o resto do site atrás do véu. */ /* SEM MARGEM NENHUMA EM VOLTA DA FOTO. Aqui a largura da tela é o teto do tamanho — uma foto 4:3 em pé não tem como crescer para os lados — e cada píxel de padding é peça que a cliente não vê. Medido em 375 px: a foto sai de 335 px na página para 375 px na janela. O close-up de verdade quem dá é o gesto de pinça do próprio navegador, que a `` deste site nunca bloqueou, sobre um arquivo de 1200 px. Recuo zero é também o que faz a conta lá de cima entregar a tela inteira de altura à foto: `100dvh - 0 * 2`. Em 375 × 812 isso não muda um pixel do tamanho da foto, porque nenhuma das 582 fotos do acervo é mais alta do que larga e todas param na largura da tela muito antes de esbarrar no teto de altura; quem colhe o ganho é o telefone DEITADO, onde a altura é o que falta, e o computador. */ /* `max-height` repetido aqui de propósito: a regra `.modal { max-height: 92vh }` desta mesma faixa de tela tem a MESMA especificidade da declaração lá de cima e vem depois dela. Sem esta linha, a janela da foto voltaria a ser limitada por aquele teto genérico. */ .modal--foto { width: 100%; --altura-janela: 100dvh; --recuo-janela: 0px; max-height: var(--altura-janela); border-radius: 0; } .modal--foto .foto-cheia { border-radius: 0; } .foto-cheia__seta--volta { left: var(--esp-2); } .foto-cheia__seta--segue { right: var(--esp-2); } .foto-cheia__fechar { top: var(--esp-2); right: var(--esp-2); } } /* ── Tapete sob medida: o destaque da home ─────────────────────────────────── Fundo em tinta de propósito. Esta seção fica entre duas de fundo claro, e o corte é o que a faz existir na página — antes ela era uma linha de texto entre blocos maiores e passava despercebida. O serviço merece isso: escolher peça pronta de catálogo é o que toda fábrica de Ibitinga oferece; cortar o tapete na medida do cômodo, com acabamento, é o único aqui que a concorrência não copia com uma foto. */ .sob-medida__grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--esp-8); align-items: center; } .sob-medida__texto > * + * { margin-top: var(--esp-4); } .sob-medida__pontos { display: grid; gap: var(--esp-3); list-style: none; padding: 0; margin-top: var(--esp-5); } .sob-medida__pontos li { display: flex; align-items: flex-start; gap: var(--esp-3); color: var(--texto-inverso); font-size: var(--t-corpo); } .sob-medida__marca { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; color: var(--rose); } .sob-medida__foto { aspect-ratio: 4 / 3; overflow: hidden; } .sob-medida__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 60rem) { .sob-medida__grade { grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); } /* A foto vem primeiro no celular: é ela que explica o que é um tapete cortado na medida, antes de qualquer frase. */ .sob-medida__foto { order: -1; } } /* ── Isca do tapete na hero ────────────────────────────────────────────────── Link, não botão, e isso é o ponto. O tapete precisa de porta na primeira dobra — é o diferencial da fábrica —, mas dois botões de mesmo peso lado a lado não hierarquizam: o olho hesita entre eles e nenhum vence. A isca fica para quem já sabe que quer tapete; quem veio ver enxoval nem repara nela, que é exatamente o desejado. */ .isca { display: inline-flex; align-items: center; gap: var(--esp-2); color: var(--texto-inverso); font-size: var(--t-corpo-sm); font-weight: var(--peso-medio); padding-block: var(--esp-2); border-bottom: 1px solid var(--borda-inversa); transition: color var(--dur-1) var(--suave), border-color var(--dur-1) var(--suave); } .isca:hover { color: var(--rose); border-bottom-color: var(--rose); } .isca__seta { width: .85rem; height: .85rem; transition: transform var(--dur-2) var(--saida); } .isca:hover .isca__seta { transform: translateX(.2rem); } .hero--foto .isca { text-shadow: var(--sombra-texto-sobre-foto); } /* O botão e a isca ficam alinhados pela base, não centralizados: alturas diferentes centralizadas fazem o menor parecer desalinhado. */ .hero__acoes { align-items: center; } /* O terceiro número vira porta. Os outros dois continuam sendo dado — fazer de "35+ anos" um link prometeria uma página que não existe. */ .hero__numero--porta { text-decoration: none; transition: background var(--dur-1) var(--suave); } .hero__numero--porta:hover { background: rgb(var(--bruma-rgb) / .08); } .hero__numero--porta:hover .rotulo { color: var(--rose); } .hero__numero-regua { width: .8rem; height: .8rem; margin-left: var(--esp-1); vertical-align: -.1em; color: var(--rose); } @media (max-width: 40rem) { /* No celular a isca desce para baixo do botão, que ocupa a largura toda. */ .hero__acoes { flex-direction: column; align-items: flex-start; gap: var(--esp-4); } .hero__acoes .btn { width: 100%; justify-content: space-between; } } /* ── PAINEL DE FILTROS (fase 17) ─────────────────────────────────────────── Substitui a fileira de `.menu__link` que servia de filtro até a fase 16. O problema não era funcional: era que aquilo se lia como navegação, e não como "aqui você escolhe o que ver". Agora é um formulário de verdade, com caixas marcáveis, contagem por opção e o resumo do que está aplicado. A caixa é desenhada do zero (o `input` fica invisível mas continua sendo ele quem recebe foco e clique) porque a caixa nativa não aceita a cor nem o raio do sistema. Nada de `appearance: none` no rótulo inteiro: o alvo continua sendo o `