/* PÁGINAS — o que é específico de uma página só.
   Se algo aqui começar a se repetir em duas páginas, sobe para
   componentes.css. É a regra que impede este arquivo de virar depósito. */

.secao__titulo {
  font-size: var(--t-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--verde);
  border-bottom: 2px solid var(--verde);
  padding-bottom: var(--e-2);
  margin-bottom: var(--e-6);
}
.secao__sub {
  margin-top: calc(var(--e-4) * -1);
  margin-bottom: var(--e-8);
  color: var(--cinza);
  max-width: var(--largura-texto);
}

/* ------------------------------------------------------------- home: capa */

/* Duas colunas, texto e arte na MESMA linha e centrados no eixo vertical.
   A primeira versão ancorava a arte no topo à direita e sobravam 295 px de
   creme morto no canto inferior — a capa lia como se faltasse algo ali.
   Grid resolve porque as duas colunas crescem juntas: não existe quadrante
   sem dono, independente do tamanho do texto ou da tela. */
.capa { padding: var(--e-16) 0 var(--e-12); }
.capa__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: var(--e-12);
  align-items: center;
}

/* A ARTE DA CAPA
   A ilustração já vem composta para isto: o desenho começa só na coluna 594 de
   1280, e a metade esquerda é lisa. Ancorada à direita, ela deixa o vão do
   texto pronto — não é o texto que se desvia do desenho, é o desenho que foi
   feito com o vão.
   O creme dela (#F7F4ED) e o nosso (#F9F5EF) diferem em dois pontos, abaixo do
   limiar de percepção, então a emenda com o fundo da página não aparece e a
   imagem dispensa recorte com alfa. */
.capa__arte {
  width: 100%;
  height: auto;
  justify-self: end;
  user-select: none;
}

/* No estreito vira uma coluna só, e a arte desce para baixo do texto pela
   ordem natural do HTML — nenhuma regra de ordenação necessária. Ela não
   some: esconder a ilustração tiraria a identidade da marca justamente da
   tela em que o catálogo mais circula. */
@media (max-width: 900px) {
  .capa__interno { grid-template-columns: 1fr; gap: var(--e-8); }
  .capa__arte { justify-self: center; width: 84%; }
}
.capa__sup {
  font-size: var(--t-xs);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--verde);
}
.capa__titulo {
  margin-top: var(--e-4);
  font-size: var(--t-3xl);
  max-width: 18ch;
  color: var(--verde);
}
.capa__linha {
  margin-top: var(--e-6);
  font-size: var(--t-lg);
  max-width: 46ch;
  color: var(--cinza);
}
.capa__acoes {
  margin-top: var(--e-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
}

/* ------------------------------------------------------------- home: tese */
.tese {
  background: var(--branco);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: var(--e-16) 0;
}
.tese__titulo { font-size: var(--t-2xl); color: var(--verde); max-width: 20ch; }
.tese__grade {
  margin-top: var(--e-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-8);
}
.tese__item h3 {
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: var(--e-2);
}
.tese__item p { color: var(--cinza); }

.destaques { padding: var(--e-16) 0 0; }
.destaques__mais { margin-top: var(--e-8); text-align: center; }

.como { padding: var(--e-16) 0 0; }
.como__passos { counter-reset: passo; max-width: var(--largura-texto); }
.como__passos li {
  counter-increment: passo;
  position: relative;
  padding-left: var(--e-8);
  margin-bottom: var(--e-4);
  color: var(--cinza);
}
.como__passos li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  color: var(--verde);
  font-weight: 700;
}
.como__passos b { color: var(--escuro); }

/* --------------------------------------------------------------- catálogo */
.cat { padding: var(--e-12) 0 0; }
.cat__titulo { font-size: var(--t-2xl); color: var(--verde); }
.cat__sub { margin-top: var(--e-2); color: var(--cinza); max-width: var(--largura-texto); }
.cat__vazio {
  padding: var(--e-16) 0;
  text-align: center;
  color: var(--cinza);
}

/* --------------------------------------------------------------- produto */
.produto__grade {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--e-12);
  align-items: start;
}
.produto__fotos { background: var(--branco); border: 1px solid var(--linha); padding: var(--e-4); }

/* A foto é a heroína desta página e precisa ocupar a coluna inteira. Sem o
   width:100% ela renderizava no tamanho intrínseco da variante — 380 px, quase
   o tamanho de um card de catálogo. */
.produto__img { width: 100%; height: auto; }

/* A segunda vista centrada, e não encostada à esquerda: encostada ela lia como
   sobra de diagramação em vez de segunda foto do produto. */
.produto__segfig {
  margin: var(--e-4) auto 0;
  padding-top: var(--e-4);
  border-top: 1px solid var(--linha);
  width: 52%;
}
.produto__segfig figcaption {
  font-size: var(--t-xs);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--cinza-claro);
  text-align: center;
  padding-top: var(--e-1);
}
.produto__tipo {
  font-size: var(--t-xs);
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--verde);
}
.produto__nome {
  font-size: var(--t-2xl);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: var(--e-2);
}
.produto__chamada {
  margin-top: var(--e-3);
  font-size: var(--t-lg);
  color: var(--cinza);
}
.produto__tam { color: var(--verde); line-height: 1.8; }
.produto__mod { margin-top: var(--e-2); font-size: var(--t-sm); color: var(--cinza-claro); }
.produto__acao { margin-top: var(--e-8); }
.produto__aviso { margin-top: var(--e-3); font-size: var(--t-sm); color: var(--cinza-claro); }
.produto__texto {
  max-width: var(--largura-texto);
  margin: var(--e-16) 0 0;
}
.produto__texto p,
.produto__blocos p { margin-bottom: var(--e-4); color: var(--cinza); }

/* Duas colunas que se dobram sozinhas em uma quando não couberem. Cada bloco
   fica com medida de leitura confortável e a página deixa de ter metade da
   largura vazia embaixo. */
.produto__blocos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--e-8) var(--e-12);
  margin-top: var(--e-12);
  padding-top: var(--e-8);
  border-top: 1px solid var(--linha);
}
.produto__blocos > section { max-width: 52ch; }
.produto__texto h2,
.produto__blocos h2 {
  font-size: var(--t-xs);
  letter-spacing: .20em;
  text-transform: uppercase;
  color: var(--verde);
  margin: 0 0 var(--e-4);
}

/* ----------------------------------------------------------------- mobile */
@media (max-width: 860px) {
  .produto__grade { grid-template-columns: 1fr; gap: var(--e-8); }
  .capa__titulo { font-size: var(--t-2xl); }
  .capa { padding: var(--e-16) 0 var(--e-12); }
  .filtro__acoes { margin-left: 0; width: 100%; }
}

@media (max-width: 600px) {
  .topo__marca img { width: 132px; }
  .topo__nav { gap: var(--e-3); }
  .grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e-4); }
  .card__nome { font-size: var(--t-md); }
  .produto__segfig { width: 60%; }
}

/* Relacionados por profundidade. Fecham a página de produto — sem eles, as 89
   ainda sem redação terminam no botão e deixam meia tela vazia. E dão saída
   para quem não gostou DESTE modelo mas gostou da MEDIDA, que é como o cliente
   da SofaPlan navega. */
.relac {
  margin-top: var(--e-24);
  padding-top: var(--e-12);
  border-top: 1px solid var(--linha);
}