:root {
  --papel: #fff;
  --principal: #2f8f7a;
  --principal-escuro: #1d6a58;
  --destaque: #ffb703;
  --destaque-claro: #fff3d6;
  --escuro: #12302b;
  --creme: #fbfaf5;
  --texto: #16281f;
  --sombra: 0 12px 30px -10px rgba(18, 48, 43, .3);
  /* quais variáveis carregam a cor escolhida na montagem (lidas por assets/modulos/identidadeSite.js): o layout só declara, quem aplica é o módulo */
  --id-principal: --principal; --id-destaque: --destaque; --id-escuro: --escuro;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--texto);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Oswald', 'Inter', sans-serif; margin: 0; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.faixa-demo { background: var(--escuro); color: var(--destaque-claro); font-size: 13px; text-align: center; padding: 8px 16px; }
.faixa-demo a { color: var(--destaque); font-weight: 700; text-decoration: underline; }

.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--escuro);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  flex-wrap: wrap; gap: 8px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-emoji { font-size: 26px; }
.marca-txt { color: #fff; line-height: 1.05; }
.marca-txt b { display: block; font-family: 'Oswald', sans-serif; font-size: 20px; letter-spacing: .5px; color: var(--destaque); }
.marca-txt small { display: block; font-size: 11px; letter-spacing: 2.5px; color: #bfe4da; }
/* 13/10, pedido do Michel: já existe o botão hambúrguer, não precisa repetir os links inline no
   desktop também -- nav-desk só aparece via hambúrguer agora, em qualquer tamanho de tela. */
.nav-desk { display: none; gap: 18px; }
.nav-desk a { color: #bfe4da; font-weight: 600; font-size: 13.5px; text-decoration: none; }
.nav-desk a:hover, .nav-desk a[aria-current="page"] { color: var(--destaque); }

.cart-abrir { position: relative; color: #fff; opacity: .92; margin-left: 8px; padding: 4px; }
.cart-contagem {
  position: absolute; top: -4px; right: -6px; background: var(--destaque); color: var(--escuro);
  font-size: 10.5px; font-weight: 800; min-width: 17px; height: 17px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}

.tela { display: none; }
.tela.ativa { display: block; }
main#palco { min-height: 40vh; }

/* 13/10, 7ª rodada -- achado do Michel: a imagem única do fundo (hero-bichos.jpg) tinha os bichos
   soltos num quadro FIXO -- em telas largas/estreitas o cover/aspect-ratio sempre cortava algum
   bicho ou deixava um bicho "atrás" do texto, sem controle de onde cada um cai. Virou composição
   em camadas: fundo é só cor sólida/gradiente (sem imagem), e cada bicho (+ a escada do macaco +
   as árvores) é um PNG com transparência real (Gemini não gera alfa nativo -- gerado com fundo
   branco sólido e removido via chroma-key, script em scratchpad/chroma_key.py) posicionado nas
   bordas via CSS, longe do centro onde fica o texto -- nunca mais corta nem fica atrás da letra. */
.hero {
  position: relative; width: 100%; min-height: 360px;
  padding: 48px 20px; color: #fff; overflow: hidden; isolation: isolate;
  text-align: center; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(165deg, var(--principal-escuro) 0%, var(--escuro) 100%);
}
.hero-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-decor img { position: absolute; display: block; }
.hero-arvore { opacity: .9; }
/* 13/10, 8ª rodada -- achado do Michel: ele quer os 5 bichos SEMPRE presentes, até no celular
   (tinha escondido rato/arara/2ª árvore em tela estreita pra não espremer -- ele prefere menor
   mas visível). Mínimo do clamp() reduzido pros 3 "extras" pra caberem junto dos outros 2 mesmo
   nas larguras mais estreitas, sem precisar sumir com ninguém. */
.hero-arvore-1 { left: 0; bottom: -8%; height: clamp(110px, 20vw, 230px); }
.hero-arvore-2 { right: 3%; top: -8%; height: clamp(70px, 17vw, 200px); }
.hero-bicho-macaco { left: 0; bottom: -6%; height: clamp(130px, 24vw, 280px); }
.hero-bicho-rato { left: 3%; bottom: -1%; height: clamp(34px, 7vw, 80px); }
.hero-bicho-gato { right: 0; top: 4%; height: clamp(80px, 14vw, 170px); }
.hero-bicho-arara { right: 9%; top: -2%; height: clamp(48px, 10vw, 125px); }
.hero-bicho-cachorro { right: 1%; bottom: -5%; height: clamp(100px, 16vw, 180px); }
.hero-conteudo { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.hero-tag {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .5px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px; padding: 6px 16px; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(28px, 6vw, 42px); margin-bottom: 16px; }
.hero h1 em { color: var(--destaque); font-style: normal; }
.hero-sub { font-size: 15.5px; opacity: .92; max-width: 480px; margin: 0 auto 28px; line-height: 1.5; }

.bt-ia {
  display: flex; align-items: center; gap: 14px;
  background: var(--destaque); color: var(--escuro);
  border-radius: 20px; padding: 16px 26px;
  box-shadow: 0 14px 30px -8px rgba(0,0,0,.45);
  position: relative;
  max-width: 380px; width: 100%; margin: 0 auto;
}
.bt-ia:active { transform: scale(.97); }

.bt-ia::after { content: ''; position: absolute; inset: -6px; border-radius: inherit; animation: pulso-bt 2.2s ease-out infinite; pointer-events: none; }
@keyframes pulso-bt { 0% { box-shadow: 0 0 0 0 rgba(0,0,0,.18); } 70% { box-shadow: 0 0 0 14px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }
@media (prefers-reduced-motion: reduce) { .bt-ia::after { animation: none; } }
.bt-ia-emoji { font-size: 28px; background: var(--papel, #fff); border-radius: 14px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bt-ia-txt { text-align: left; line-height: 1.3; }
.bt-ia-txt b { display: block; font-size: 16.5px; font-family: 'Oswald', sans-serif; }
.bt-ia-txt small { display: block; font-size: 12px; opacity: .75; }
.bt-ia-bloco { max-width: 380px; margin: 20px auto 0; }

/* ---------- bichos correndo com dicas (13/10, pedido do Michel) ---------- */
/* Substitui os cards de categoria/horário na home (já estão no menu/hambúrguer, ficavam
   duplicados aqui) -- faixa com os bichos (sprites gerados via Gemini, mesmo estilo emoji do
   fundo do hero) atravessando a tela um de cada vez, cada um com um balão de dica de cuidado. */
/* FAIXA DE BICHOS (19/10, pedido do Michel): o TEXTO da dica fica PARADO no começo da faixa e o bichinho atravessa correndo POR TRÁS dele (da direita pra esquerda). O texto aparece e some no
   ritmo da travessia do bicho. Só CSS (sem JS). A velocidade vem de --passo (tempo de UMA travessia): no celular, tela estreita, o bicho passa mais devagar. O ciclo tem 4 passos (1 bicho por vez). */
.dicas-corrida { --passo: 7s; position: relative; overflow-x: hidden; overflow-x: clip; overflow-y: visible; min-height: 120px; background: var(--papel, #fff); margin: 0 0 48px; box-shadow: inset 0 1px 0 rgba(18,48,43,.06); }
@media (max-width: 640px) { .dicas-corrida { --passo: 11s; } }
.dica-correndo { position: absolute; inset: 0; pointer-events: none; }
.dica-correndo img {
  position: absolute; top: 50%; left: 100%; transform: translateY(-50%); height: 49px; width: auto; z-index: 1;
  animation: bicho-atravessa calc(var(--passo) * 4) linear infinite; animation-delay: calc(var(--passo) * var(--vez, 0));
}
.dica-balao {
  position: absolute; top: 50%; left: 20px; transform: translateY(-50%); z-index: 2; opacity: 0;
  background: var(--creme); border: 1.5px solid rgba(18,48,43,.12); border-radius: 14px;
  padding: 10px 16px; font-size: 16px; font-weight: 700; color: var(--principal-escuro);
  max-width: min(260px, 64vw); line-height: 1.3; box-shadow: var(--sombra);
  animation: dica-texto calc(var(--passo) * 4) linear infinite; animation-delay: calc(var(--passo) * var(--vez, 0));
}
.dica-cachorro { --vez: 0; } .dica-gato { --vez: 1; } .dica-rato { --vez: 2; } .dica-passaro { --vez: 3; }
/* a arara, o rato e o cachorro foram gerados virados pro lado contrário do gato (que já nasce de cara pra esquerda): como todos correm da direita pra esquerda, espelha os 3 */
.dica-passaro img, .dica-rato img, .dica-cachorro img { transform: translateY(-50%) scaleX(-1); }
@keyframes bicho-atravessa { 0% { left: 100%; } 25% { left: -140px; } 25.01%, 100% { left: -140px; } }
@keyframes dica-texto { 0% { opacity: 0; } 2% { opacity: 1; } 23% { opacity: 1; } 25%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dica-correndo img, .dica-balao { animation: none; }
  .dica-correndo img { left: -9999px; }
  .dica-cachorro .dica-balao { opacity: 1; }
}

/* ---------- tiles de espécie na home ---------- */
/* 13/10, achado do Michel: auto-fit virava 1 card por linha em larguras intermediárias (janela
   com DevTools aberto, por ex.) -- sempre 2 colunas agora, nunca 1 só, em qualquer largura. */
.especies-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 780px; margin: 0 auto; padding: 0 20px; }
.especie-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--papel, #fff); border-radius: 20px; padding: 26px 14px;
  box-shadow: var(--sombra); text-decoration: none; color: var(--texto);
  border: 1px solid rgba(18,48,43,.06);
}
.especie-tile span { font-size: 40px; }
.especie-tile b { font-size: 15px; color: var(--principal-escuro); }

.secao { max-width: 960px; margin: 0 auto; padding: 48px 20px; }
.pagina { max-width: 780px; margin: 0 auto; padding: 36px 20px 64px; }
.tit-linha h2 { font-size: 26px; color: var(--principal-escuro); margin-bottom: 14px; }
.lead { color: #4c6058; font-size: 15px; line-height: 1.6; margin-bottom: 24px; }

.secao-info { background: var(--destaque-claro); border-radius: 24px; margin: 0 20px 56px; max-width: 920px; }
.info-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.info-card { background: var(--papel, #fff); border-radius: 16px; padding: 20px; text-align: center; box-shadow: var(--sombra); }
.info-emoji { font-size: 30px; display: block; margin-bottom: 8px; }
.info-card h3 { font-size: 15px; color: var(--principal-escuro); margin-bottom: 6px; }
.info-card p { font-size: 13.5px; color: #4c6058; line-height: 1.4; }

.cardapio-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 20px; } /* min(): em celular de 375 px a coluna de 360 estourava a página */
.categoria { background: var(--papel, #fff); border-radius: 18px; padding: 20px; box-shadow: var(--sombra); border: 1px solid rgba(18,48,43,.06); }
.categoria-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 2px dashed rgba(47,143,122,.18); }
.categoria-emoji { font-size: 28px; }
.categoria-topo h3 { font-size: 17px; color: var(--principal-escuro); }
.categoria-topo small { color: #6b8079; font-size: 12.5px; }
.itens li { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 14px; }
.itens li + li { border-top: 1px solid rgba(18,48,43,.07); }
.item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-nome { color: var(--texto); font-weight: 600; }
.item-descricao { color: #6b8079; font-size: 12px; line-height: 1.35; }
.item-preco { font-weight: 700; color: var(--principal); white-space: nowrap; flex-shrink: 0; }
.item-add { background: var(--principal); color: #fff; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- agendamento (banho & tosa) ---------- */
.agenda-card { background: var(--papel, #fff); border-radius: 20px; padding: 22px; box-shadow: var(--sombra); border: 1px solid rgba(18,48,43,.06); display: flex; flex-direction: column; gap: 18px; }
.agenda-bloco label { display: block; font-size: 11.5px; font-weight: 700; color: #6b8079; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.agenda-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.agenda-pill { border: 1.5px solid rgba(18,48,43,.15); border-radius: 999px; padding: 9px 16px; font-size: 13.5px; font-weight: 600; color: var(--texto); background: var(--papel, #fff); }
.agenda-pill.ativo { background: var(--principal); border-color: var(--principal); color: #fff; }
.agenda-select { width: 100%; border: 1.5px solid rgba(18,48,43,.15); border-radius: 10px; padding: 10px 12px; font-size: 14px; background: var(--papel, #fff); color: var(--texto); }
.agenda-resumo { background: var(--destaque-claro); border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.6; }
.agenda-resumo b { color: var(--principal-escuro); }
.agenda-confirmar { background: var(--principal); color: #fff; border-radius: 999px; padding: 14px; font-size: 15px; font-weight: 700; text-align: center; }
.agenda-confirmar:disabled { opacity: .5; }
.agenda-ok { background: var(--papel, #fff); border-radius: 20px; padding: 28px 22px; box-shadow: var(--sombra); text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.agenda-ok-emoji { font-size: 44px; }
.agenda-ok b { font-size: 18px; color: var(--principal-escuro); }
.agenda-ok-codigo { font-family: monospace; background: var(--destaque-claro); border-radius: 8px; padding: 6px 12px; font-size: 14px; font-weight: 700; }

.rodape { text-align: center; padding: 28px 20px 40px; font-size: 12.5px; color: #6b8079; }
.rodape a { color: var(--principal); font-weight: 600; text-decoration: none; }

.chat-fab {
  /* 13/10, achado do Michel: "botão da IA está pequeno e discreto" + pediu rótulo "Atendimento"
     em vez do selo "IA" -- "Atendimento" não cabe num badge circular pequeno, então o botão virou
     pílula (círculo do emoji + texto do lado), mesmo padrão já usado no sorrisocerto hoje. */
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  background: var(--principal); color: #fff;
  padding: 10px 20px 10px 10px; border-radius: 999px;
  box-shadow: 0 14px 34px -6px rgba(0,0,0,.5);
}
.chat-fab::after { content: ''; position: absolute; inset: -6px; border-radius: 999px; animation: pulsar 2.2s ease-out infinite; pointer-events: none; }
.chat-fab-rotulo { font-size: 14px; font-weight: 800; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .chat-fab::after { animation: none; } }
.chat-fab-emoji { font-size: 26px; background: rgba(255,255,255,.22); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.chat-dica { position: fixed; right: 18px; bottom: 82px; z-index: 41; max-width: 190px; background: var(--papel, #fff); color: var(--principal-escuro); padding: 10px 14px; border-radius: 14px 14px 4px 14px; font-size: 13.5px; font-weight: 700; line-height: 1.3; box-shadow: 0 8px 24px rgba(0,0,0,.35); cursor: pointer; border: 1px solid var(--principal); animation: dica-surge .35s ease; }
.chat-dica[hidden] { display: none; }
@keyframes dica-surge { from { opacity: 0; transform: translateY(6px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes pulsar { 0% { box-shadow: 0 0 0 0 rgba(47,143,122,.55); } 70% { box-shadow: 0 0 0 16px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } }

.chat[hidden] { display: none; }
.chat {
  position: fixed; z-index: 50; right: 16px; bottom: 16px; left: 16px;
  max-width: 380px; margin-left: auto;
  background: var(--papel, #fff); border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  height: min(560px, 78vh);
}
.chat-topo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--escuro); color: #fff; }
.chat-topo-emoji { font-size: 22px; }
.chat-topo div { flex: 1; line-height: 1.25; }
.chat-topo b { font-size: 14px; }
.chat-topo small { display: block; font-size: 11.5px; color: #bfe4da; }
.chat-topo button { color: #fff; opacity: .8; }

.cart[hidden] { display: none; }
.cart {
  position: fixed; z-index: 50; right: 16px; bottom: 16px; left: 16px;
  max-width: 380px; margin-left: auto;
  background: var(--papel, #fff); border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  max-height: min(600px, 82vh);
}
.cart-corpo { overflow-y: auto; display: flex; flex-direction: column; }
.cart-vazio { padding: 34px 20px; text-align: center; color: #6b8079; font-size: 14px; }
.cart-itens { display: flex; flex-direction: column; }
.cart-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(18,48,43,.07); }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-nome { font-size: 13.5px; line-height: 1.3; }
.cart-item-preco { font-size: 12px; color: #6b8079; }
.cart-qtd { display: flex; align-items: center; gap: 8px; }
.cart-qtd button { width: 26px; height: 26px; border-radius: 50%; background: rgba(18,48,43,.08); color: var(--escuro); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cart-qtd span { min-width: 14px; text-align: center; font-weight: 700; font-size: 13.5px; }
.cart-remover { color: var(--principal); opacity: .75; padding: 4px; flex-shrink: 0; }
.cart-rodape { padding: 14px 16px 18px; border-top: 1px solid rgba(18,48,43,.08); display: flex; flex-direction: column; gap: 10px; }
.cart-subtotal { display: flex; justify-content: space-between; font-size: 14.5px; font-weight: 700; }
.cart-campo { display: flex; flex-direction: column; gap: 4px; }
.cart-campo label { font-size: 11.5px; font-weight: 700; color: #6b8079; text-transform: uppercase; letter-spacing: .3px; }
.cart-campo input, .cart-campo select { border: 1.5px solid rgba(18,48,43,.15); border-radius: 10px; padding: 9px 12px; font-size: 14px; background: var(--papel, #fff); color: var(--texto); }
.cart-campo input:focus, .cart-campo select:focus { outline: none; border-color: var(--principal); }
.cart-campo input.erro, .cart-campo select.erro { border-color: #c0392b; animation: erro-shake .3s; }
@keyframes erro-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.cart-resumo { padding: 14px 16px 0; font-size: 14px; }
.cart-opcoes { display: flex; gap: 8px; }
.cart-opcoes button { flex: 1; border: 1.5px solid rgba(18,48,43,.15); border-radius: 10px; padding: 9px; font-size: 13px; font-weight: 700; color: var(--escuro); }
.cart-opcoes button.ativo { background: var(--principal); border-color: var(--principal); color: #fff; }
.cart-taxa, .cart-total, .cart-tempo { display: flex; justify-content: space-between; font-size: 13.5px; color: #4c6058; }
.cart-total { font-size: 15.5px; font-weight: 800; color: var(--texto); }
.cart-finalizar { background: var(--principal); color: #fff; border-radius: 999px; padding: 12px; font-size: 15px; font-weight: 700; text-align: center; }
.cart-finalizar:disabled { opacity: .55; }
.cart-aviso { font-size: 11.5px; color: #6b8079; text-align: center; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f2f8f5; }
.m { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; }
.m.eu { align-self: flex-end; background: var(--principal); color: #fff; border-bottom-right-radius: 3px; }
.m.bot { color: #1f2937; align-self: flex-start; background: var(--papel, #fff); border: 1px solid rgba(18,48,43,.08); border-bottom-left-radius: 3px; }
.m.pensando { display: flex; gap: 4px; padding: 13px; }
.m.pensando i { width: 6px; height: 6px; border-radius: 50%; background: #9fc2b7; display: inline-block; animation: pisca 1.2s infinite; }
.m.pensando i:nth-child(2) { animation-delay: .2s; }
.m.pensando i:nth-child(3) { animation-delay: .4s; }
@keyframes pisca { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
.checkout-card { max-width: 92%; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 14px; }
.checkout-tag { font-size: 11px; font-weight: 700; color: var(--principal-escuro); background: var(--destaque-claro); border-radius: 999px; padding: 5px 10px; }
.checkout-pedido { font-size: 13.5px; color: #4c6058; }
.checkout-qr { border-radius: 10px; border: 1px solid rgba(18,48,43,.1); }
.checkout-total { font-size: 16px; }
.checkout-cola { display: flex; gap: 6px; width: 100%; }
.checkout-cola input { flex: 1; min-width: 0; border: 1.5px solid rgba(18,48,43,.15); border-radius: 10px; padding: 8px 10px; font-size: 11.5px; color: #4c6058; }
.checkout-cola button { background: rgba(18,48,43,.08); color: var(--escuro); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.checkout-pago { background: var(--principal); color: #fff; border-radius: 999px; padding: 10px 22px; font-size: 14px; font-weight: 700; margin-top: 4px; }
.checkout-pago:disabled { opacity: .7; }
.checkout-ok { color: #1a7d3a; font-weight: 700; font-size: 14px; }

.chat-atalhos { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.atalho { background: var(--destaque-claro); color: var(--principal-escuro); font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(18,48,43,.08); }
.chat-form input { flex: 1; border: 1.5px solid rgba(18,48,43,.15); border-radius: 999px; padding: 10px 16px; font-size: 14px; }
.chat-form input:focus { outline: none; border-color: var(--principal); }
.chat-form button { background: var(--principal); color: #fff; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#chat-mic { background: rgba(18,48,43,.08); color: var(--escuro); }
#chat-mic[aria-pressed="true"] { background: var(--principal); color: #fff; animation: pulsar-mic 1.1s ease-in-out infinite; }
@keyframes pulsar-mic { 0%, 100% { box-shadow: 0 0 0 0 rgba(47,143,122,.55); } 50% { box-shadow: 0 0 0 8px rgba(47,143,122,0); } }
a.info-card { display: block; text-decoration: none; }

/* ---------- menu mobile (hambúrguer) ---------- */
.burger { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; background: transparent; color: #fff; cursor: pointer; flex: none; }
.burger span { display: block; width: 18px; height: 2px; background: currentColor; margin: 2px 0; transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* 13/10, achado do Michel: menu abria encostado na esquerda, botão fica na direita -- flex-end ancora do mesmo lado. */
/* 13/10, 2ª rodada -- achado do Michel: testei cobrir a tela inteira, mas ele quer compacto mesmo,
   só a caixinha das palavras (não um painel de tela cheia) -- revertido pro tamanho do conteúdo. */
/* 13/10, 3ª rodada -- achado do Michel: left:0+right:0 fazia a caixa esticar de ponta a ponta da
   tela (uma faixa inteira), mesmo só tendo as palavras à direita -- virava uma extensão do
   cabeçalho em vez de um dropdown de verdade. Ancorado só no canto direito (embaixo do botão),
   largura do próprio conteúdo, com cantos arredondados pra ficar claramente um cartão flutuante. */
.nav-desk.aberto { display: flex !important; position: absolute; top: calc(100% + 8px); right: 20px; left: auto; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; background: var(--escuro); padding: 8px; border-radius: 12px; min-width: 200px; box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.nav-desk.aberto a { width: 100%; padding: 12px 14px; border-radius: 8px; text-align: right; }

.marca-seta { font-size: 22px; color: var(--destaque); line-height: 1; margin-right: -2px; }
.marca--voltar:hover .marca-seta { transform: translateX(-2px); }

/* MODO ESCURO (27/10/2026): variáveis trocam; cartões usam --papel; topo, hero e rodapé já eram escuros ou na cor da conta */
:root[data-fundo="escuro"] { color-scheme: dark; --creme: #0f1a17; --papel: #17262a; --texto: #e7f0ec; --destaque-claro: rgba(255,255,255,.08); --sombra: 0 12px 30px -10px rgba(0,0,0,.7); }
:root[data-fundo="escuro"] body { background: var(--creme); color: var(--texto); }
:root[data-fundo="escuro"] :is(h1, h2, h3, h4) { color: inherit; }
:root[data-fundo="escuro"] :is(input, select, textarea) { background: #0f1a17; color: var(--texto); border-color: rgba(255,255,255,.18); }
/* contraste no escuro (auditado: razão >= 4,5): textos que usavam o verde escuro / cinza-esverdeado de fundo claro */
:root[data-fundo="escuro"] :is(.especie-tile b, .tit-linha h2, .info-card h3, .categoria-topo h3, .agenda-resumo b, .agenda-ok b, .chat-dica, .dica-balao, .checkout-tag, .atalho) { color: var(--principal-vivo, #8fd9c4); }
:root[data-fundo="escuro"] :is(.lead, .info-card p, .cart-taxa, .cart-total, .cart-tempo, .checkout-pedido, .checkout-cola input) { color: #b9cbc3; }
/* a foto do cachorro é JPG de fundo branco: a faixa fica clara e o branco da imagem se funde com ela */
:root[data-fundo="escuro"] .dicas-corrida { background: #eef3f0; }
:root[data-fundo="escuro"] .dicas-corrida img { mix-blend-mode: multiply; }
:root[data-fundo="escuro"] :is(.rodape, .rodape-legal) :is(p, a) { color: #aebfb7; }
:root[data-fundo="escuro"] .faixa-demo { color: #fff3d6; } /* --destaque-claro vira fundo translúcido no escuro; a faixa do topo usa a variável como COR de texto */