/*
 * Vitrine da loja — CELULAR (até 767px). Carregado com media="(max-width: 767px)".
 * O desenho é o da tela do Stitch no celular, com a régua do Mercado Livre do Cérebro
 * por cima (D4): toque de 48px, busca com 48px e fonte de 16px (o iPhone não dá zoom),
 * respiro de 16px. Duas mudanças de propósito em relação à tela:
 *  - o cabeçalho vira duas linhas (marca + "Meus horários", e a busca), e não três;
 *  - só as abas ficam presas no alto. Na tela, o cabeçalho fixo tem 170px no celular e
 *    esconde as abas (R9.4).
 */
.contem { padding-left: 16px; padding-right: 16px; }

/* faixa: o selo da IA e o contato numa linha só */
.faixa-linha { gap: 12px; min-height: 48px; }
.faixa-texto, .faixa-rotulo { display: none; }
.faixa-suporte { margin-left: auto; }
.faixa-contato { min-height: 48px; }

/* cabeçalho em duas linhas */
.topo-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding-top: 12px; padding-bottom: 12px; }
.marca { min-height: 48px; }
.marca-logo { max-height: 44px; max-width: 200px; }
.marca-texto strong { font-size: 18px; line-height: 22px; }
.busca { grid-column: 1 / -1; grid-row: 2; }
.busca input { height: 48px; font-size: 16px; }
.busca button { right: 0; width: 48px; height: 48px; }
.btn-horarios { grid-column: 2; grid-row: 1; width: 48px; height: 48px; padding: 0; }
.btn-horarios span { display: none; }

/* abas presas no alto enquanto a página rola */
.abas { position: sticky; top: 0; z-index: 30; }
.aba { min-height: 48px; }

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

/* banner e cartões ao lado, um embaixo do outro */
.destaque { display: flex; flex-direction: column; gap: 20px; }
.hero { min-height: 300px; padding: 24px; }
.hero h1 { font-size: 24px; line-height: 32px; }
.hero p { font-size: 14px; }
.hero .btn-zap { min-height: 48px; }
.cartao-lado .btn { min-height: 48px; }

/* benefícios em lista, com a linha entre eles */
.beneficios { padding: 16px; }
.beneficio + .beneficio { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fundo); }

/* serviços: um cartão por linha (dois a partir de 640px), foto 16:9 */
.secao-titulo { flex-direction: column; }
.secao-titulo h2 { font-size: 20px; line-height: 28px; }
.secao-titulo p { font-size: 12px; line-height: 16px; }
.grade { grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 20px) / 2)), 1fr)); }
.card-foto { aspect-ratio: 16 / 9; }
.card-acoes .btn { min-height: 48px; }

/* nosso espaço */
.loja { padding: 24px; }
.loja-cabeca h2 { font-size: 20px; line-height: 28px; }
.loja-cabeca p { font-size: 12px; line-height: 16px; }
.loja-info, .loja-zap { flex-basis: 100%; }
.loja-acoes .btn { flex: 1 1 136px; min-height: 48px; }
.loja-zap { flex-direction: column; align-items: stretch; }
.loja-zap .btn { width: 100%; min-height: 48px; }

/* rodapé em duas colunas; links com toque de 48px */
.rodape { padding-bottom: 72px; }
.rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rodape-marca, .rodape-pag { grid-column: 1 / -1; }
.rodape nav a, .rodape-logo { min-height: 48px; }
.rodape-base { flex-direction: column; justify-content: center; text-align: center; }
.rodape-links a { min-height: 48px; }
.whats-flutuante { right: 16px; bottom: 16px; }

/* "Agendar aqui": no celular a janela é a tela inteira; os dias rolam de lado. */
.agendar { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
.opcoes-dias { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.opcoes-dias .opcao { flex: none; }
.opcoes-horas .opcao { flex: 1 1 calc(33.333% - 8px); text-align: center; }