/* ============================================================
SIORE — Design System v2
ESCOPO: `.siore-v2`
------------------------------------------------------------
Renomeado de `.home` para `.siore-v2` em 03/08/2026, na etapa 3
da Revisão Final (PT-01). O nome antigo mentia: `.home` nasceu
quando só a página inicial usava estas regras, mas passou a ser
aplicado em 7 páginas.
PÁGINAS QUE CARREGAM ESTE ARQUIVO (7):
index.html
servicos.html
diferenciais.html (Método Siore)
engenharia-custos.html
portfolio.html
sobre.html
contato.html
equipe.html NÃO carrega este arquivo — usa apenas styles.css.
⚠️ ATENÇÃO AO ESCOPO REAL — não é o que parece
------------------------------------------------------------
Apenas 20 seletores deste arquivo estão realmente sob
`.siore-v2` (os que sobrescrevem componentes de styles.css:
.section, .container, .section-title, .section-label,
.section-subtitle e as variantes .bg-dark).
Os demais — `.home-hero`, `.home-card`, `.home-grid`,
`.home-prose`, `.home-split`, `.home-step__num`, `.home-cta`,
`.home-benefit`, `.home-head` — são GLOBAIS. O prefixo `home-`
faz parte do NOME da classe, não é escopo.
Consequência prática: usar `.home-card` numa página que não
tenha `.siore-v2` no AINDA aplica o estilo. Hoje isso
não acontece porque essas classes só existem nas 7 páginas
acima — mas a garantia é de fato, não de mecanismo.
O comentário anterior afirmava que "TODAS as regras estão sob
.home". Era incorreto e foi corrigido nesta etapa.
NOME DO ARQUIVO: mantido como home.css. Renomear para
siore-v2.css exigiria alterar os das 7 páginas, o que
não foi autorizado nesta etapa. Registrado no RELATORIO.md.
Reaproveita os tokens do design system (styles.css).
============================================================ */
.siore-v2 {
/* Sombras enxutas — substituem o glass pesado nesta página */
--h-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.07);
--h-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 18px 44px rgba(15, 23, 42, 0.11);
--h-border: 1px solid rgba(15, 23, 42, 0.07);
--h-border-dark: 1px solid rgba(255, 255, 255, 0.10);
--h-measure: 70ch; /* largura de leitura confortável */
}
/* ========================================
RITMO — mais espaço em branco
======================================== */
.siore-v2 .section {
padding: 7rem 0;
}
.siore-v2 .container {
max-width: 1160px;
}
/* ========================================
TIPOGRAFIA / HIERARQUIA
======================================== */
/* 10/08/2026: o rótulo ficava apagado sobre as imagens de fundo — 0,72rem
(≈11,5px) em verde médio some no meio da foto. Ampliado e reforçado.
Cor: adotado #064e3b, o mesmo tom já validado em sobre.css para rótulo
sobre imagem. A medição registrada lá (css/sobre.css:137-144) amostrou
as imagens reais compostas com o overlay de 70%:
emerald-600 #059669 ... 100,0% da área abaixo de 4,5:1
emerald-700 #047857 .... 73,9% (o que estava aqui)
#065f46 ................ 31,9%
#064e3b ................. 0,3% (adotado)
Em fundo escuro segue emerald-400, que já tem folga de contraste. */
.siore-v2 .section-label {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.12em;
color: #064e3b;
margin-bottom: 1rem;
}
.siore-v2.bg-dark .section-label,
.siore-v2 .bg-dark .section-label {
color: var(--emerald-400);
}
.siore-v2 .section-title {
font-size: clamp(1.9rem, 3.4vw, 2.7rem);
line-height: 1.16;
letter-spacing: -0.02em;
font-weight: 600;
color: var(--slate-900);
max-width: 20ch;
padding-bottom: 0.75rem;
margin-bottom: 1.25rem;
}
.siore-v2 .bg-dark .section-title {
color: #fff;
}
.siore-v2 .section-subtitle {
font-size: 1.075rem;
line-height: 1.75;
color: var(--text-body);
max-width: 62ch;
margin-bottom: 3.5rem;
}
.siore-v2 .bg-dark .section-subtitle {
color: var(--slate-300);
}
/* Cabeçalho de seção centralizado */
.home-head {
text-align: center;
margin-bottom: 3.5rem;
}
.home-head .section-title {
max-width: 24ch;
margin-left: auto;
margin-right: auto;
}
.home-head .section-subtitle {
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
text-align: center;
}
/* Blocos de texto corrido */
.home-prose p {
font-size: 1.075rem;
line-height: 1.8;
color: var(--text-body);
max-width: var(--h-measure);
margin-bottom: 1.15rem;
}
.home-prose p:last-child {
margin-bottom: 0;
}
.siore-v2 .bg-dark .home-prose p {
color: var(--slate-300);
}
.home-prose--center p {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* ========================================
HERO
======================================== */
.home-hero {
text-align: center;
padding: 6rem 2rem 7rem;
position: relative;
z-index: 2;
}
.home-hero__logo img {
height: 132px;
width: auto;
object-fit: contain;
margin-bottom: 2.25rem;
}
.home-hero__title {
font-family: var(--font-heading);
font-size: clamp(2.1rem, 4.6vw, 3.5rem);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.03em;
color: var(--slate-900);
max-width: 17ch;
margin: 0 auto 1.75rem;
}
.home-hero__sub {
font-size: clamp(1rem, 1.35vw, 1.15rem);
line-height: 1.8;
color: var(--text-hero);
max-width: 66ch;
margin: 0 auto 2.75rem;
}
/* Heros sem botão (Método Siore, Sobre, Contato — 04/08/2026): sem o
bloco de ações, a margem inferior do subtítulo viraria espaço morto
antes do padding do hero. `:last-child` age só quando não há botão,
então quem tem CTA não é afetado. Uma regra compartilhada — nenhuma
exceção por página. */
.home-hero__sub:last-child {
margin-bottom: 0;
}
.home-hero__actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.home-hero__actions .btn {
padding: 0.95rem 1.9rem;
/* 11/08/2026: era 0.92rem. O botão do hero da Início é o CTA mais
importante do site e estava MENOR que os 7 finais `.home-cta .btn`,
que são 0.95rem. Igualado ao deles. O padding continua maior aqui,
então ele segue sendo o botão de maior área. */
font-size: 0.95rem;
}
/* ========================================
SPLIT — texto + imagem
======================================== */
.home-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4.5rem;
align-items: center;
}
/* 11/08/2026 — coluna de texto mais larga na PRIMEIRA split da Home.
PROBLEMA: a seção "Nossa Forma de Pensar" media 829,7px de altura e não
cabia numa tela sem rolar. Numa janela de 1600x900 sobram 786px úteis
(900 − 78 de nav − 36 de mini-footer), então faltavam 43,7px; a 1366x768
faltavam 175,7px.
POR QUE A COLUNA, E NÃO O TÍTULO: medido, soltar o `max-width: 16ch` do
título não muda nada — ele continua em 3 linhas porque quem o limita é a
largura da coluna (1fr de um container de 1200px), não o max-width. Com
1.25fr o texto passa a caber em menos linhas: a seção cai para 736,9px
e os parágrafos param de quebrar em pedaços curtos.
⚠️ POR QUE ESTÁ DENTRO DE min-width: 1025px — não mover daqui.
Em `@media (max-width: 1024px)` existe `.home-split { grid-template-
columns: 1fr }`, especificidade 0,1,0. O seletor abaixo é 0,2,0 e, solto,
venceria essa regra e recriaria DUAS COLUNAS no celular. É o mesmo tipo de
conflito que quebrou a Contato e foi corrigido nesta data.
⚠️ POR QUE `:not(.home-split--reverse)` — a Home tem 2 splits. Na segunda,
"Especialistas em Engenharia de Custos", a imagem vem primeiro; alargar a
primeira coluna lá aumentaria a IMAGEM e a seção subiria de 569,7 para
712,7px. Com o :not, ela fica intacta — medido. */
@media (min-width: 1025px) {
.home-split:not(.home-split--reverse) {
grid-template-columns: 1.25fr 0.75fr;
}
}
.home-split--reverse .home-split__media {
order: -1;
}
.home-split__media img {
width: 100%;
height: auto;
display: block;
border-radius: var(--radius);
box-shadow: var(--h-shadow);
}
.home-split__body .section-title {
max-width: 16ch;
}
/* ========================================
CARDS — base achatada, sem glass pesado
======================================== */
.home-grid {
display: grid;
gap: 1.5rem;
}
.home-grid--3 { grid-template-columns: repeat(3, 1fr); }
.home-grid--2 { grid-template-columns: repeat(2, 1fr); }
.home-grid--4 { grid-template-columns: repeat(4, 1fr); }
.home-card {
background: rgba(255, 255, 255, 0.82);
border: var(--h-border);
border-radius: var(--radius);
padding: 2.25rem 2rem;
box-shadow: var(--h-shadow);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.home-card:hover {
transform: translateY(-4px);
box-shadow: var(--h-shadow-hover);
}
.home-card__title {
font-family: var(--font-heading);
font-size: 1.12rem;
font-weight: 600;
color: var(--slate-900);
margin-bottom: 0.7rem;
line-height: 1.35;
}
.home-card__text {
font-size: 0.97rem;
line-height: 1.7;
color: var(--text-body);
}
/* Variante escura */
.siore-v2 .bg-dark .home-card {
background: rgba(15, 23, 42, 0.55);
border: var(--h-border-dark);
box-shadow: none;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.siore-v2 .bg-dark .home-card:hover {
background: rgba(15, 23, 42, 0.68);
border-color: rgba(16, 185, 129, 0.30);
}
.siore-v2 .bg-dark .home-card__title { color: #fff; }
.siore-v2 .bg-dark .home-card__text { color: var(--slate-300); }
/* ========================================
MÉTODO — cards numerados
======================================== */
.home-step__num {
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--emerald-400);
display: block;
margin-bottom: 1.1rem;
}
.home-step__num::after {
content: '';
display: block;
width: 28px;
height: 2px;
margin-top: 0.85rem;
background: linear-gradient(90deg, var(--emerald-400), var(--blue-400));
border-radius: 2px;
}
/* ========================================
BENEFÍCIOS — cartões compactos
======================================== */
.home-benefit {
padding: 2rem 1.75rem;
}
.home-benefit .home-card__title {
font-size: 1.05rem;
}
/* ========================================
CTA FINAL
======================================== */
.home-cta {
text-align: center;
}
.home-cta .section-title {
max-width: 22ch;
margin-left: auto;
margin-right: auto;
}
.home-cta__text {
font-size: 1.075rem;
line-height: 1.8;
color: var(--text-body);
max-width: 60ch;
margin: 0 auto 2.5rem;
}
.home-cta .btn {
padding: 1rem 2.2rem;
font-size: 0.95rem;
}
/* ========================================
RESPONSIVO
======================================== */
/* --- Desktop: primeira dobra do hero -----------------------------
Regra ÚNICA para as 7 páginas (revisão de 03/08/2026). Substitui
os dois blocos individuais `.page-custos` / `.page-portfolio` que
existiam em css/styles.css e que deixavam os títulos das páginas
fora de escala entre si.
Compacta a primeira dobra para caber em 1366×768 acima do
`.mini-footer` fixo (36px): logotipo central menor, respiro do
topo reduzido, título em escala menor e espaçamentos verticais
mais curtos. O `max-width` do título passa de 17ch para 22ch —
títulos longos deixam de empilhar em 5 linhas curtas e ganham
uma quebra mais equilibrada.
Só acima de 1024px: tablet e celular ficam exatamente como estão.
O logotipo do menu (52px) e o do rodapé (50px) não são tocados.
------------------------------------------------------------------ */
@media (min-width: 1025px) {
.home-hero { padding-top: 3rem; }
.home-hero__logo img {
height: 96px;
margin-bottom: 1.5rem;
}
.home-hero__title {
font-size: clamp(2.35rem, 3.2vw, 2.75rem);
line-height: 1.1;
max-width: 22ch;
margin-bottom: 1.25rem;
}
.home-hero__sub {
margin-bottom: 2rem;
}
}
/* --- Modificador: hero compacto ----------------------------------
Complementa (não substitui) a regra acima. Aplicado a
`servicos.html` e `engenharia-custos.html` — as duas únicas
páginas cujo hero tem título de 4 linhas E parágrafo de 4 linhas
ao mesmo tempo, o que estourava em ~59px a primeira dobra de
1366×768.
Uma classe só, compartilhada pelas duas — não há regra por página.
Só acima de 1024px; abaixo disso o modificador não faz nada.
O corpo do texto continua em 18,4px (acima do mínimo de 17px).
------------------------------------------------------------------ */
@media (min-width: 1025px) {
.home-hero--compact { padding-top: 2rem; }
.home-hero--compact .home-hero__logo img {
height: 80px;
margin-bottom: 1rem;
}
.home-hero--compact .home-hero__title {
font-size: 2.5rem;
line-height: 1.06;
max-width: 26ch;
margin-bottom: 1rem;
}
.home-hero--compact .home-hero__sub {
line-height: 1.7;
margin-bottom: 1.5rem;
}
}
/* --- Modificador: hero ocupando a primeira tela ------------------
Aplicado na `` do hero (não no `.container`), porque é a
seção que precisa crescer até a dobra.
PARA QUE SERVE. Páginas de título curto produzem um hero baixo
demais para alcançar a dobra. O vão restante da primeira tela é
preenchido pelo `padding-top` da seção seguinte — fundo sob
overlay de 70%, bem mais lavado que os 30% do hero e sem nenhum
conteúdo. É isso que se lê como "faixa cinza vazia".
NÃO é falha de imagem. O projeto não usa `background-image` em
lugar nenhum: o fundo é um `` real injetado por
js/bg-slideshow.js dentro de `.bg-slideshow`, que é
`position: absolute; inset: 0`, com a imagem em
`width: 100%; height: 100%; object-fit: cover`. Ela já preenche a
seção inteira, qualquer que seja a altura. Declarar
`background-size`, `background-position` ou `background-repeat`
aqui seria CSS morto — não há background para configurar.
SOLUÇÃO. Em vez de mover a seção seguinte, o hero passa a ocupar
toda a altura disponível entre o menu e o mini-rodapé. A primeira
tela mostra só o hero, com a imagem dele cobrindo tudo, e a seção
seguinte começa exatamente na dobra.
As duas medidas descontadas são reais e verificáveis no CSS:
menu .nav 0.75rem×2 + logo 52px + borda 2px = 78px
rodapé .mini-footer height: 36px (fixo, cobre a base da tela)
Sem margem negativa, sem transform, sem position absolute na
seção seguinte e sem sobreposição: só `min-height` e centragem do
conteúdo dentro do próprio hero. `min-height` (não `height`)
garante que o hero cresça se algum dia o conteúdo passar da tela.
HISTÓRICO. Nasceu em css/sobre.css (03/08/2026) como
`.page-sobre > section:first-of-type`. Presa a uma classe de
escopo de página, não alcançava `diferenciais.html`, a única das
7 sem classe `page-*` — que exibia o mesmo defeito. Em 04/08/2026
virou este modificador compartilhado e o bloco de sobre.css foi
removido. Sobre e Método Siore recebem exatamente as mesmas
declarações; as outras 5 páginas não recebem a classe.
Só acima de 1024px; abaixo disso o modificador não faz nada.
------------------------------------------------------------------ */
@media (min-width: 1025px) {
.hero-fill {
--nav-h: 78px;
--mini-footer-h: 36px;
min-height: calc(100vh - var(--nav-h) - var(--mini-footer-h));
display: flex;
flex-direction: column;
justify-content: center;
}
}
@media (max-width: 1024px) {
.siore-v2 .section { padding: 5.5rem 0; }
.home-grid--3 { grid-template-columns: repeat(2, 1fr); }
.home-grid--4 { grid-template-columns: repeat(2, 1fr); }
.home-split {
grid-template-columns: 1fr;
gap: 3rem;
}
/* No empilhamento a imagem sempre vem depois do texto */
.home-split--reverse .home-split__media { order: 0; }
.home-split__body .section-title,
.siore-v2 .section-title { max-width: 100%; }
}
@media (max-width: 768px) {
.siore-v2 .section { padding: 4rem 0; }
/* 10/08/2026: acompanha a ampliação do rótulo (ver .section-label acima),
um pouco menor para não competir com o título na tela estreita */
.siore-v2 .section-label { font-size: 0.86rem; letter-spacing: 0.1em; }
.home-hero { padding: 3.5rem 1.5rem 4.5rem; }
.home-hero__logo img { height: 104px; margin-bottom: 1.75rem; }
.home-hero__title { max-width: 100%; }
.home-hero__actions { flex-direction: column; align-items: stretch; }
.home-hero__actions .btn { justify-content: center; }
.home-grid--2,
.home-grid--3,
.home-grid--4 { grid-template-columns: 1fr; }
.home-card { padding: 1.75rem 1.5rem; }
.home-head { margin-bottom: 2.5rem; }
.siore-v2 .section-subtitle { margin-bottom: 2.5rem; }
/* styles.css já centraliza títulos no mobile — o corpo acompanha */
.home-prose p { text-align: center; margin-left: auto; margin-right: auto; }
.home-split__body { text-align: center; }
}
@media (max-width: 480px) {
.siore-v2 .section { padding: 3.25rem 0; }
.home-hero__logo img { height: 88px; }
.home-card { padding: 1.5rem 1.25rem; }
}
/* ========================================
ACESSIBILIDADE
======================================== */
@media (prefers-reduced-motion: reduce) {
.home-card,
.home-card:hover {
transition: none;
transform: none;
}
}