/* CORPO C · seções emolduradas
   Cada seção vira um painel com superfície própria, sangrando pouco além da
   medida do texto. É o mais "loja": mais denso, mais concreto, e é o que
   melhor vai absorver foto quando o material do dono chegar. */

main { padding: var(--space-8) var(--gutter) 0; max-width: 1180px; margin: 0 auto; display: grid; gap: var(--space-6); }

.s {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-0);
  padding: var(--space-8);
  border-top: 1px solid var(--line);
}

/* alternância de superfície por seção, não por seletor descendente:
   o painel troca o fundo, os componentes dentro não sabem de nada */
.s:nth-of-type(even) { background: var(--surface-1); }

.s > .dentro { max-width: 900px; }

#servicos ol.servicos li { grid-template-columns: 3.5ch minmax(0, 1fr); }

.dep blockquote { font-size: var(--step-1); }

/* a loja é a única seção que já nasce pensando na foto: texto e moldura lado a
   lado, com o texto em medida curta, que é o que fecha o vazio quando os dois
   blocos têm altura diferente */
#loja > .dentro { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; }
#loja h2 { max-width: 14ch; }
#loja .p { max-width: 38ch; }
#loja .moldura { grid-column: 2; }

#horario table.horario { max-width: none; }

#onde .contato { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }

@media (max-width: 900px) {
  .s { padding: var(--space-6) var(--space-4); }
  #loja > .dentro,
  #dizem .depoimentos,
  #onde .contato { grid-template-columns: 1fr; }
  #loja .moldura { grid-column: 1; }
  #loja h2, #loja .p { max-width: none; }
}

@media (max-width: 900px) {
  /* no celular o ponto separador sobra pendurado no fim da linha; vira lista
     de duas colunas e a ordem de leitura continua a mesma */
  ul.marcas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-3); font-size: var(--step-1); }
  ul.marcas li:not(:last-child)::after { content: none; }
  #loja > .dentro, #marcas > .dentro { gap: var(--space-4); }
}

#loja .moldura { aspect-ratio: 3 / 2; }

/* ---- ritmo: nem toda seção é painel ----
   faixa de fotos sangrando a tela, marcas e depoimentos abertos (sem
   moldura), painel só onde há lista, foto ou contato. */
.faixa-fotos { margin-inline: calc(50% - 50vw); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
.faixa-fotos .moldura { aspect-ratio: 4 / 5; border: 0; border-radius: 0; }

.s.aberta { border: 0; background: transparent; padding: var(--space-8) 0; }

#marcas ul.marcas { font-size: var(--step-4); line-height: 1.05; letter-spacing: -0.03em; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-6); }
#marcas ul.marcas li:not(:last-child)::after { margin-left: var(--space-4); }
#marcas .dentro { max-width: 1180px; }

#dizem .destaque { margin-bottom: var(--space-8); }
#dizem .destaque blockquote { font-size: var(--step-3); line-height: 1.2; letter-spacing: -0.02em; max-width: 26ch; }
#dizem .depoimentos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
#dizem .depoimentos blockquote { font-size: var(--step-0); line-height: 1.5; }
#dizem .dentro { max-width: 1180px; }

.contato .lado { display: grid; gap: var(--space-6); }
.bloco-horario .rotulo { margin-bottom: var(--space-1); }
#onde table.horario { max-width: none; }

@media (max-width: 900px) {
  .faixa-fotos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .faixa-fotos .moldura { flex: 0 0 68%; scroll-snap-align: start; border-radius: 4px; }
  .s.aberta { padding: var(--space-4) 0; }
  #marcas ul.marcas { font-size: var(--step-2); }
  #dizem .depoimentos { grid-template-columns: 1fr; }
}

/* a faixa de fotos sangra com 100vw, que inclui a barra de rolagem no desktop */
html, body { overflow-x: clip; }

/* marcas em display: o ponto separador sobrava pendurado no fim da linha.
   Sem ponto; a alternância de tom separa um nome do outro. */
#marcas ul.marcas li::after, #marcas ul.marcas li:not(:last-child)::after { content: none; }
#marcas ul.marcas { gap: var(--space-1) var(--space-6); }
#marcas ul.marcas li:nth-child(even) { color: var(--brand); }

/* galeria do banho: 3 colunas, a primeira foto ocupa 2x2. 1 grande + 11
   pequenas = 15 células, sem buraco. Somar foto só de 3 em 3. */
#banho .dentro { max-width: 1180px; }
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.galeria .moldura { aspect-ratio: 4 / 5; }
.galeria .moldura:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

/* produtos na seção de marcas: régua de 4 miniaturas, abaixo do texto */
.produtos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.produtos .moldura { aspect-ratio: 4 / 5; }

@media (max-width: 900px) {
  .galeria { grid-template-columns: 1fr 1fr; }
  .galeria .moldura:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
  .produtos { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  /* em duas colunas a alternância pinta a coluna direita inteira de azul */
  #marcas ul.marcas li:nth-child(even) { color: inherit; }
}

/* a faixa corrida vence a grade de duas colunas e a margem da lista em display */
#marcas .marquee ul.marcas { display: flex; margin: 0; }
#marcas .marquee ul.marcas li:nth-child(even) { color: var(--brand); }
#marcas .marquee { margin-bottom: var(--space-6); }
@media (max-width: 900px) { #marcas .marquee { margin-bottom: var(--space-4); } }
@media (prefers-reduced-motion: reduce) { #marcas .marquee ul.marcas { flex-wrap: wrap; } }

/* a faixa corrida tem largura mínima enorme (lista inteira sem quebra); sem
   minmax(0, 1fr) ela alarga a coluna da grade e empurra a página para o lado */
main { grid-template-columns: minmax(0, 1fr); }
.marquee { min-width: 0; }