/* SDD-davinci-e-linguagem-de-temas F-DV4 (ADR-11) — a ESTRUTURA da celula Base 1, a camada do meio entre `base.css` e a folha do tema. O QUE ENTRA: grade, ritmo entre secoes, largura de leitura, comportamento responsivo. O que faz um Base 1 ser um Base 1 e nao um Base 3. O QUE NAO ENTRA: cor, familia, peso, sombra. Nenhum valor de APARENCIA, nem como padrao — o teto de composicao da hierarquia Direta e "uma secao, um jeito", e isso e ARRANJO, nao aparencia. EMENDA — SDD-administracao-da-loja F-AL4 (ADR-6). Esta lista dizia tambem "tamanho" e "raio", e deixou de dizer. O motivo apareceu medindo: o mesmo

renderizava a 3.6rem num tema desta celula e a 3.4rem no outro, e a diferenca nao era escolha de ninguem — era residuo de os dois terem sido escritos em momentos diferentes. Dez valores estavam assim. Se a escala tem de ser igual entre os temas de uma celula — e tem, porque o cabecalho acima ja chamava esta folha de RITMO —, entao ela e estrutura, e o lugar dela e aqui. Preservar a diferenca seria preservar um acidente e ainda cobrar dele o preco de dois tokens de vocabulario. A fronteira mudou de lugar, nao de natureza: TAMANHO e ESPACO sao ritmo e vivem aqui; COR, FAMILIA e PESO sao personalidade e continuam no tema. A prova destrutiva segue valendo, e continua sendo o que impede esta folha de virar a folha do tema. A PROVA DESTRUTIVA (ADR-11) mede exatamente isto: apagada a folha do tema, a pagina fica feia e continua de pe — grade certa, nada transbordando, navegavel. Se ela desmontar, foi porque estrutura vazou para o tema, e a manutencao voltou a ser trinta vezes. TODO VALOR VEM DE VARIAVEL, com recuo. O recuo nao e enfeite: e o que mantem esta folha correta sozinha, que e a condicao para a prova destrutiva significar alguma coisa. */ /* SDD-builder-refino-15 F-15-4 — a FAIXA em variaveis com o valor desta celula: a cena de tela cheia (secao em carrossel) le `--largura-max` e `--ritmo` para centrar e respirar como a faixa. Sao os mesmos numeros das reservas abaixo. */ :root { --largura-max: 1120px; --ritmo: clamp(56px, 8vw, 104px); } .wrap { width: 100%; max-width: var(--largura-max, 1120px); margin-inline: auto; padding-inline: var(--pad, clamp(20px, 4.5vw, 56px)); } /* O ritmo. Uma pagina unica se le pelo espaco entre as secoes, e nao por moldura — a hierarquia Direta nao tem faixa nem alternancia de superficie. */ .seccao { padding-block: var(--ritmo, clamp(56px, 8vw, 104px)); } .seccao--curta { padding-block: var(--ritmo-curto, clamp(32px, 5vw, 56px)); } /* Cabecalho fixo no topo da rolagem: a Base vive de uma pagina so, e perder a navegacao ao rolar seria perder a unica navegacao que existe. */ .topo { position: sticky; top: 0; z-index: 10; } .topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--altura-topo, 68px); } .menu { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 28px); } /* Hero de uma coluna. O texto ocupa a largura de leitura e nada disputa com ele. EMENDA — SDD-builder-refino F-REF5. Esta nota dizia que "a imagem de apoio e da hierarquia 2 em diante", e a abertura desta celula nao tinha onde por foto nenhuma. O painel, porem, oferecia o campo: o canonico declara `hero.image` como midia, e quem escolhia uma imagem nao via nada acontecer nem no editor nem no site. A regra mudou de forma, nao de natureza. O que ela protegia era a COLUNA UNICA na largura de leitura, e continua protegido: a foto entra como fundo, sob mascara, e o texto nao cede espaco a ela. Coluna lateral segue sendo o desenho da Base 2. */ .hero .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } /* A abertura com foto. Empilha imagem, mascara e texto na mesma celula de grade — sem posicionamento absoluto, que quebraria em texto longo. E' o mesmo mecanismo da Base 3: celula da familia nao inventa jeito proprio quando a irma ja tem um que serve. DEGRADACAO: sem foto, `hero--capa` nao e emitida e a abertura volta a ser uma `seccao` comum, identica ao que sempre foi. */ .hero--capa { display: grid; min-height: var(--altura-capa, 72svh); } .hero--capa > * { grid-area: 1 / 1; } .hero--capa .hero__fundo { width: 100%; height: 100%; object-fit: cover; } .hero--capa .hero__mascara { width: 100%; height: 100%; } .hero--capa .wrap { align-self: end; padding-block: clamp(40px, 7vw, 96px); } .hero h1 { max-width: 18ch; text-wrap: balance; } .hero .conduz { max-width: 54ch; } .cabeca { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(24px, 4vw, 44px); } .cabeca h2 { max-width: 22ch; text-wrap: balance; } .cabeca .conduz { max-width: 60ch; } /* A grade dos itens. Cartoes iguais, sem destaque para nenhum: e a definicao da hierarquia 1, e por isso ela mora aqui e nao no tema. */ .grade { display: grid; gap: var(--vao, clamp(16px, 2.5vw, 28px)); list-style: none; margin: 0; padding: 0; } /* A grade NAO SUPOE QUANTIDADE. Estrutura e por bloco; hierarquia e so design. Um `repeat(3, 1fr)` embutiria "sao tres servicos" na celula — e o cliente com quatro ganharia um orfao na segunda linha, e o com dois, um buraco. `auto-fit` deixa a contagem onde ela nasce: no conteudo. */ .grade--cartoes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .item { display: flex; flex-direction: column; gap: 8px; } .passo { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline; } .passo .marcador { grid-row: span 2; } /* Formulario: uma coluna, rotulo acima do campo. Rotulo ao lado exige largura que o celular nao tem, e a Base e lida no celular. */ .formulario { display: flex; flex-direction: column; gap: 16px; max-width: 46rem; } .campo { display: flex; flex-direction: column; gap: 6px; } .campo input, .campo textarea { width: 100%; } .campo textarea { min-height: 7rem; resize: vertical; } .rodape .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; } .rodape .elos { display: flex; flex-wrap: wrap; gap: 16px; } @media (max-width: 620px) { .menu { display: none; } .topo .wrap { justify-content: flex-start; } } /* --------------------------------------------------------------------------- O RITMO DOS TEMAS DESTA CELULA — SDD-administracao-da-loja F-AL4 (ADR-6). Estas vinte regras viviam DUPLICADAS nas folhas do Bussola e do Serra, e o que se lia como identidade era, na maior parte, o mesmo valor escrito duas vezes. Um defeito de ritmo pedia dois consertos; com trinta temas, pediria trinta. Nenhuma linha abaixo declara cor, fundo, familia ou peso: isso continua na folha de cada tema, e e o que faz dois temas desta celula parecerem diferentes. O que esta aqui e' o que eles nao tinham motivo para discordar. Vem por ultimo no arquivo de proposito: e' a ordem que a folha do tema ocupava antes, entao o que vencia antes continua vencendo. --------------------------------------------------------------------------- */ body { line-height: 1.65; } h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; } h1 { font-size: var(--p-texto-h1-tamanho, calc(clamp(2rem, 5.5vw, 3.4rem) * var(--escala-texto, 1))); } h2 { font-size: var(--p-texto-h2-tamanho, calc(clamp(1.5rem, 3.2vw, 2.1rem) * var(--escala-texto, 1))); } h3 { font-size: var(--p-texto-h3-tamanho, calc(1.02rem * var(--escala-texto, 1))); } .apoio { font-size: calc(.74rem * var(--escala-texto, 1)); letter-spacing: .16em; text-transform: uppercase; margin: 0; } .conduz { font-size: calc(1.06rem * var(--escala-texto, 1)); margin: 0; } .item p { margin: 0; font-size: calc(.94rem * var(--escala-texto, 1)); } .item h3 { margin: 0; } .marca { letter-spacing: -.01em; } .menu a { font-size: calc(.92rem * var(--escala-texto, 1)); } .acao { border-radius: 3px; padding: 13px 22px; font-size: calc(.94rem * var(--escala-texto, 1)); text-align: center; } /* SDD-builder-refino-7 F-R7-1 (ADR-1): a composicao nao emite ,