/* ============================================================================
   OPA, CRESCI! — SITE DE LINKS

   TODA COR DAQUI FOI AMOSTRADA DO ARQUIVO OFICIAL DA LOGO.
   Nenhum tom foi escolhido "parecido". A amostragem está documentada
   no LEIA-ME.md, com o número de pixels de cada tom no arquivo.
   ============================================================================ */

:root {
  /* --- amostrados de "logo, opa, cresci!.png" ------------------------- */
  --rosa:          #FCE0E9;   /* as bolinhas rosa do fundo */
  --rosa-claro:    #FDE7EE;   /* as bolinhas rosa mais claras */
  --ciano:         #CDEDF0;   /* as bolinhas azuis do fundo */
  --ciano-claro:   #DEF3F7;
  --turquesa:      #9ADCE1;   /* o anel que circunda o ursinho */
  --urso:          #ECB070;   /* o corpo do ursinho */
  --urso-claro:    #FDD4A3;   /* o focinho e a barriga */
  --azul-urso:     #C4E7EF;   /* o detalhe azul do ursinho */
  --tinta:         #0C0C0C;   /* o preto do lettering "Opa, cresci!" */

  /* --- derivados, só para o texto ter contraste ----------------------- *
   * Mesmo matiz e mesma saturação do turquesa do anel (H188 S56).
   * Só a luminosidade muda. O anel é claro demais para carregar texto
   * branco: branco sobre #9ADCE1 dá 1,5:1, e a régua é 4,5:1.          */
  --turquesa-forte:  #298290;  /* branco em cima: 4,50:1 */
  --turquesa-fundo:  #1E616C;  /* branco em cima: 7,00:1 */

  /* verde do WhatsApp, no tom escuro que aguenta texto branco */
  --zap:        #14803F;
  --zap-fundo:  #0F6631;

  --branco: #FFFFFF;
  --cinza:  #6B6B6B;

  --raio:       20px;
  --raio-card:  24px;
  --largura:    500px;
  --sombra:     0 2px 4px rgba(12, 12, 12, .04), 0 8px 24px rgba(12, 12, 12, .07);
  --sombra-alta: 0 4px 8px rgba(12, 12, 12, .06), 0 16px 40px rgba(12, 12, 12, .12);

  /* Sem webfont de propósito: o site é estático e não pode depender de
     CDN. E a fonte da logo não está documentada — a regra da marca é
     nunca redigitar o nome com outra tipografia, então o nome grande
     da página é texto de apoio, e o lettering de verdade é a imagem. */
  --fonte: "SF Pro Rounded", "Nunito", "Quicksand", "Varela Round",
           "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
           "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  color: var(--tinta);
  background: var(--branco);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------------------------------------------------------------------------
   O FUNDO DE BOLINHAS

   É o mesmo padrão do arquivo da logo, redesenhado em CSS com as duas
   cores amostradas dele. Feito em gradiente e não em imagem: são zero
   bytes de download, e não serrilha em nenhuma tela.
   --------------------------------------------------------------------------- */

.fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--branco);
  background-image:
    radial-gradient(circle at 20px 20px, var(--rosa)  13px, transparent 13.5px),
    radial-gradient(circle at 80px 80px, var(--ciano) 13px, transparent 13.5px),
    radial-gradient(circle at 80px 20px, var(--ciano) 13px, transparent 13.5px),
    radial-gradient(circle at 20px 80px, var(--rosa)  13px, transparent 13.5px);
  background-size: 120px 120px;
  opacity: .85;
}

/* Uma clareada no meio da tela para o texto nunca disputar com as bolinhas */
.fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 620px 900px at 50% 34%,
              rgba(255, 255, 255, .93) 0%,
              rgba(255, 255, 255, .72) 45%,
              rgba(255, 255, 255, .25) 100%);
}

.pagina {
  max-width: var(--largura);
  margin: 0 auto;
  padding: 30px 18px 44px;
}

/* ---------------------------------------------------------------------------
   TOPO
   --------------------------------------------------------------------------- */

.topo { text-align: center; }

.moldura-logo {
  width: 172px;
  height: 172px;
  margin: 0 auto 18px;
  border-radius: 34px;
  overflow: hidden;
  background: var(--branco);
  box-shadow: var(--sombra-alta);
  border: 3px solid var(--branco);
}

.moldura-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -.6px;
  font-weight: 800;
}

.submarca {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--turquesa-forte);
}

.chamada {
  margin: 14px auto 0;
  max-width: 22em;
  font-size: 16px;
  color: #3A3A3A;
}

.selos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 18px 0 0;
  padding: 0;
}

.selos li {
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--branco);
  border: 1.5px solid var(--turquesa);
  color: #2E2E2E;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   BOTÕES
   --------------------------------------------------------------------------- */

.botoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 30px 0 0;
}

/* ---------------------------------------------------------------------------
   OS BOTÕES QUE SÃO ARTE

   As quatro primeiras artes vieram prontas do cliente: ursinho, texto e
   "clique aqui" já desenhados, com o cartão branco e os cantos
   arredondados pintados dentro da própria imagem.

   Por isso aqui não entra moldura, nem fundo, nem raio, nem sombra:
   qualquer coisa que eu somasse apareceria como uma segunda borda em
   volta da que já está desenhada. O que o CSS faz é só dar o tamanho e
   o movimento ao passar o mouse.

   O fundo das artes é recortado (transparente) porque a página tem o
   padrão de bolinhas atrás. Se um dia entrar uma arte com fundo branco
   chapado, ela vai aparecer como um retângulo por cima das bolinhas —
   o recorte é feito pelo arte-botao.js.
   --------------------------------------------------------------------------- */

.banner {
  display: block;
  width: 100%;
  border-radius: var(--raio);
  transition: transform .16s ease;

  /* Reseta a aparência nativa — o banner do WhatsApp virou <button>
     (para poder abrir o menu de duas linhas), e um <button> chega do
     navegador com borda, fundo cinza e fonte diferentes de um <a>. Sem
     este reset ele ficava com uma moldura feia por cima da arte. */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

.banner .arte {
  display: block;
  width: 100%;
  height: auto;
}

.banner:hover { transform: translateY(-2px); }
.banner:active { transform: translateY(0); }

.banner:focus-visible {
  outline: 3px solid var(--turquesa-forte);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   O MENU DE DUAS LINHAS DE WHATSAPP

   A loja tem duas linhas ativas, sem vendedora fixa por número — item 4
   do planejamento estratégico (09/09/2026). Em vez de escolher uma
   sozinho, o banner "Chame no WhatsApp" abre este menu com as duas.

   Fica em fluxo normal (não flutuando por cima do conteúdo): ao abrir,
   empurra o que vem depois pra baixo, em vez de sobrepor. Mais simples
   e sem risco de cortar numa borda arredondada de algum ancestral.
   --------------------------------------------------------------------------- */

.banner-grupo { display: block; }

.zap-menu {
  margin: 10px 2px 0;
  padding: 14px;
  background: var(--branco);
  border-radius: 16px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* O atributo "hidden" do HTML some por padrão, mas uma regra própria
   do site com "display" sempre vence a regra escondida do navegador —
   é por isso que o menu aparecia aberto desde o carregamento da
   página, antes do clique. Esta linha devolve a prioridade pro
   "hidden": só quando ele SAI (o clique no botão remove o atributo)
   é que o "display: flex" de cima passa a valer. */
.zap-menu[hidden] {
  display: none;
}

.zap-menu-titulo {
  margin: 0 2px 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cinza);
}

.zap-opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--zap), var(--zap-fundo));
  color: var(--branco);
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
}

.zap-opcao:hover { filter: brightness(1.06); }
.zap-opcao:focus-visible {
  outline: 3px solid var(--turquesa-forte);
  outline-offset: 2px;
}

.zap-opcao-icone { width: 19px; height: 19px; fill: var(--branco); flex: none; }
.zap-opcao-numero { font-variant-numeric: tabular-nums; }

/* Arte cujo link ainda não existe.

   Ela fica INTEIRA e COLORIDA: sem cinza, sem transparência. Para o
   visitante é igual às outras — foi o que o cliente pediu. A única
   diferença é que ela não sobe ao passar o mouse e não vira mãozinha:
   nada promete um clique que não vai acontecer.

   O selo "LINK PENDENTE" só existe no computador de quem edita. */
.banner--sem-link {
  position: relative;
  cursor: default;
}

.banner--sem-link:hover { transform: none; }

.banner--sem-link .selo-pendente {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .74);
  color: #FFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

.botao {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--tinta);
  text-decoration: none;
  box-shadow: var(--sombra);
  border: 2px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease;
}

.botao:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.botao:active { transform: translateY(0); }

.botao:focus-visible {
  outline: 3px solid var(--turquesa-forte);
  outline-offset: 3px;
}

.botao .icone {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--ciano-claro);
}

.botao .icone svg { width: 22px; height: 22px; display: block; }

.botao .texto { flex: 1; min-width: 0; }

.botao .titulo {
  display: block;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
}

.botao .sub {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  margin-top: 2px;
  color: var(--cinza);
}

.botao .seta { flex: 0 0 auto; opacity: .4; }

/* --- o botão principal: os grupos VIP --- */

.botao--principal {
  background: linear-gradient(160deg, var(--turquesa-forte), var(--turquesa-fundo));
  color: var(--branco);
  padding: 19px 18px;
  box-shadow: 0 4px 10px rgba(30, 97, 108, .22), 0 14px 34px rgba(30, 97, 108, .26);
}

.botao--principal .icone { background: rgba(255, 255, 255, .18); }
.botao--principal .icone svg { fill: var(--branco); }
.botao--principal .titulo { font-size: 18px; }
.botao--principal .sub { color: rgba(255, 255, 255, .88); }
.botao--principal .seta { opacity: .75; }

/* selo "onde a peça sai primeiro" */
.marcador {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--urso);
  color: var(--tinta);
  margin-bottom: 7px;
}

/* --- variações --- */

.botao--zap {
  background: linear-gradient(160deg, var(--zap), var(--zap-fundo));
  color: var(--branco);
}
.botao--zap .icone { background: rgba(255, 255, 255, .18); }
.botao--zap .icone svg { fill: var(--branco); }
.botao--zap .sub { color: rgba(255, 255, 255, .88); }
.botao--zap .seta { opacity: .75; }

.botao--venda {
  background: var(--urso-claro);
  border-color: var(--urso);
}
.botao--venda .icone { background: rgba(255, 255, 255, .6); }
.botao--venda .sub { color: #5A4529; }

/* .botao--insta e .botao--face saíram da página em 01/09/2026 —
   Instagram e Facebook ficaram só no rodapé, em ícone. As regras
   foram removidas junto para não sobrar CSS que não pinta nada. */
.botao--maps .icone  { background: var(--ciano); }
.botao--google .icone{ background: var(--urso-claro); }

/* --- botão pendente (só aparece no computador de quem edita) --- */

.botao--pendente {
  background: #F2F2F2;
  color: #8A8A8A;
  box-shadow: none;
  border: 2px dashed #CFCFCF;
  cursor: not-allowed;
}
.botao--pendente .icone { background: #E4E4E4; }
.botao--pendente .icone svg { fill: #A6A6A6; }
.botao--pendente .sub { color: #9A9A9A; }

.selo-pendente {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .7px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #DDD;
  color: #666;
}

/* ---------------------------------------------------------------------------
   OS TRÊS FATOS
   --------------------------------------------------------------------------- */

.fatos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 26px 0 0;
}

.fato {
  background: var(--branco);
  border-radius: var(--raio);
  padding: 15px 17px;
  box-shadow: var(--sombra);
  border-left: 5px solid var(--turquesa);
}

.fato b {
  display: block;
  font-size: 15px;
  font-weight: 800;
}

.fato span {
  display: block;
  font-size: 13.5px;
  color: var(--cinza);
  margin-top: 1px;
}

/* ---------------------------------------------------------------------------
   A LOJA
   --------------------------------------------------------------------------- */

.secao-titulo {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  margin: 34px 0 14px;
}

.card-loja {
  background: var(--branco);
  border-radius: var(--raio-card);
  padding: 20px 18px;
  box-shadow: var(--sombra);
  text-align: center;
}

.endereco {
  font-size: 15.5px;
  font-weight: 700;
  margin: 0;
}

.endereco span {
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: var(--cinza);
  margin-top: 2px;
}

/* selo de aberto / fechado */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 14px 0 0;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  background: #EAF7EF;
  color: #10633A;
}

.estado--fechado { background: #F4F4F4; color: #5C5C5C; }

.bolinha {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #1DA85B;
  flex: 0 0 auto;
}

.estado--aberto .bolinha { animation: pulsa 2.4s ease-in-out infinite; }
.estado--fechado .bolinha { background: #A8A8A8; }

@keyframes pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 168, 91, .5); }
  50%      { box-shadow: 0 0 0 6px rgba(29, 168, 91, 0); }
}

/* São três linhas, não sete: o app.js junta os dias com o mesmo
   horário. Sem borda entre elas — com três linhas o alinhamento já
   separa, e as réguas só somavam traço. */
.tabela-horario {
  width: 100%;
  border-collapse: collapse;
  margin: 18px auto 0;
  max-width: 300px;
  font-size: 14px;
}

.tabela-horario td {
  padding: 7px 0;
  text-align: left;
  color: var(--cinza);
}

.tabela-horario td:last-child {
  text-align: right;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   RODAPÉ
   --------------------------------------------------------------------------- */

.rodape {
  margin: 34px 0 0;
  text-align: center;
}

.redes {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0 0 18px;
}

.rede {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--branco);
  box-shadow: var(--sombra);
  transition: transform .16s ease;
}

.rede:hover { transform: translateY(-2px); }
.rede:focus-visible { outline: 3px solid var(--turquesa-forte); outline-offset: 3px; }
.rede svg { width: 21px; height: 21px; fill: var(--tinta); }

/* Ícone que ainda não tem link. Fica igual aos outros — é o símbolo da
   marca no rodapé, e ele vale por si. Só não reage: sem subir ao passar
   o mouse e sem mãozinha, para não prometer um clique que não existe. */
.rede--sem-link { cursor: default; }
.rede--sem-link:hover { transform: none; }

/* ---------------------------------------------------------------------------
   O CARTÃO DO MAPA

   Uma imagem clicável, não o mapa embutido do Google. O motivo está
   escrito no config, no campo 'loja.mapa'.
   --------------------------------------------------------------------------- */

.mapa-cartao {
  display: block;
  position: relative;
  margin: 0 0 22px;
  border-radius: 18px;
  overflow: hidden;   /* clipa qualquer resto de branco que ainda sobre no canto arredondado da arte */
  text-align: left;
  text-decoration: none;
  color: var(--tinta);
  transition: transform .16s ease;

  /* MAIOR QUE A COLUNA — pedido do Nicolas em 09/09/2026.
     Os outros botões (arte-botao) vivem dentro dos 500px de
     '.pagina'. Este quebra esse limite de propósito, com a técnica
     clássica de "sangria centralizada": 100vw preenche a largura do
     dispositivo (não da coluna), centralizado por margin-left:50% +
     translateX(-50%). No celular ele encosta nas bordas da tela; em
     tela larga cresce até 640px, mais largo que os outros botões.
     'overflow-x:hidden' no body (lá em cima do arquivo) é o que
     impede isso de abrir barra de rolagem horizontal. */
  width: 100vw;
  max-width: 640px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.mapa-cartao:hover { transform: translateX(-50%) translateY(-2px); }
.mapa-cartao:focus-visible {
  outline: 3px solid var(--turquesa-forte);
  outline-offset: 3px;
}

.mapa-cartao img {
  display: block;
  width: 100%;
  height: auto;
  /* Proporção exata da arte já cortada (2639×922) — a moldura rosa e
     o botão "Abra no Maps" encostam nas quatro bordas da imagem, sem
     sobra de fundo branco em volta. */
  aspect-ratio: 2639 / 922;
}

@media (prefers-reduced-motion: reduce) {
  .mapa-cartao { transition: none; }
  .mapa-cartao:hover { transform: translateX(-50%); }
}

.rodape p {
  margin: 4px 0;
  font-size: 13px;
  color: var(--cinza);
}

.rodape .nome-rodape {
  font-weight: 800;
  color: var(--tinta);
  font-size: 14.5px;
}

/* ---------------------------------------------------------------------------
   PAINEL DE PENDÊNCIAS — só no computador de quem edita
   --------------------------------------------------------------------------- */

.painel {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 50;
  max-width: 320px;
  background: #17191A;
  color: #EDEDED;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

.painel h4 {
  margin: 0 0 7px;
  font-size: 12px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #FFC98A;
}

.painel ul { margin: 0; padding-left: 17px; }
.painel li { margin-bottom: 3px; }

.painel button {
  margin-top: 9px;
  background: #303334;
  border: 0;
  color: #DEDEDE;
  border-radius: 8px;
  padding: 5px 11px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   TELAS MAIORES
   --------------------------------------------------------------------------- */

@media (min-width: 560px) {
  .pagina { padding-top: 46px; }
  h1 { font-size: 40px; }
  .fatos { grid-template-columns: repeat(3, 1fr); }
  .fato { border-left: 0; border-top: 5px solid var(--turquesa); }
}

/* ---------------------------------------------------------------------------
   QUEM PEDIU MENOS MOVIMENTO
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------------------
   IMPRESSÃO
   --------------------------------------------------------------------------- */

@media print {
  .fundo, .painel, .seta { display: none; }
  .botao { box-shadow: none; border: 1px solid #CCC; }
}