/*
 * Vitrine da loja — COMPUTADOR (768px ou mais). Carregado com media="(min-width: 768px)".
 * As medidas da tela do Stitch (R9.3): container de 1280px com respiro de 16px,
 * cabeçalho e abas presos no alto, banner de 2/3 com os cartões no 1/3, grade de 4
 * colunas a partir de ~1024px e de 3 abaixo disso.
 *
 * Sem @media de largura aqui (celular e computador em arquivos separados, D4): as
 * trocas de coluna vêm do próprio grid e do flex-wrap, pela largura disponível.
 */
.contem { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }

.faixa-linha { gap: 16px; padding-top: 8px; padding-bottom: 8px; }

/* cabeçalho de altura fixa: é ela que diz onde as abas param (top: 80px) */
.topo { position: sticky; top: 0; z-index: 40; }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 80px; }
.marca { flex: none; max-width: 320px; }
.marca-logo { max-height: 56px; max-width: 240px; }
.marca-texto strong { font-size: 24px; }
.busca { flex: 1 1 auto; max-width: 672px; margin: 0 auto; }
.busca input { height: 40px; font-size: 14px; }
.busca button { width: 40px; height: 32px; }
.btn-horarios { flex: none; height: 42px; padding: 0 16px; }
.abas { position: sticky; top: 80px; z-index: 30; }
.abas-linha { padding-top: 12px; padding-bottom: 12px; }
.aba { padding-bottom: 12px; line-height: 20px; }

.principal { display: flex; flex-direction: column; gap: 32px; padding-top: 32px; padding-bottom: 32px; }

/* banner com 2/3 e cartões com 1/3; abaixo de ~990px o flex-wrap empilha, como na tela */
.destaque { display: flex; flex-wrap: wrap; gap: 20px; }
.hero { flex: 2 1 640px; min-height: 360px; padding: 32px; }
.hero h1 { font-size: 36px; line-height: 40px; }
.hero p { font-size: 16px; }
.lado { flex: 1 1 300px; }
.destaque.so-hero .hero { flex-basis: 100%; }

/* benefícios numa linha, com a divisória entre eles */
.beneficios { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; padding: 24px; }
.beneficio + .beneficio { padding-left: 24px; border-left: 1px solid var(--fundo); }

/* serviços: 4 colunas enquanto couberem 220px cada, nunca mais de 4 (3 em 768, como na tela) */
.secao-titulo { align-items: center; }
.secao-titulo h2 { font-size: 24px; line-height: 32px; }
.secao-titulo p { font-size: 14px; line-height: 20px; }
.grade { grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 60px) / 4)), 1fr)); }
.card-foto { aspect-ratio: 1 / 1; }
.card-acoes .btn { padding: 10px 12px; }

/* nosso espaço */
.loja { padding: 32px; }
.loja-cabeca h2 { font-size: 24px; line-height: 32px; }
.loja-cabeca p { font-size: 14px; line-height: 20px; }
.loja-zap .btn { padding: 8px 16px; }

/* rodapé em colunas */
.rodape-grade { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.rodape nav { gap: 6px; }

/* "Agendar aqui": no computador, uma janela no meio da tela. */
.agendar { width: min(560px, calc(100vw - 40px)); max-height: calc(100vh - 80px); border-radius: 12px; }
.opcoes-horas .opcao { min-width: 88px; text-align: center; }