/* ============================================================
   BOHER CAFÉS — Estilo geral do site
   ------------------------------------------------------------
   Este arquivo usa as variáveis de variaveis.css (cores, fontes,
   espaçamentos). Aqui não existe cor "solta": sempre var(--nome).

   Ordem do arquivo:
   1. Base (corpo, títulos, links)
   2. Peças reutilizáveis (botões, cards, selos, caixas)
   3. Cabeçalho e rodapé
   4. Seções da home
   5. Páginas específicas (produto, assinatura, carrinho…)
   6. Botão do WhatsApp e avisos

   "Mobile-first": o estilo normal é para o CELULAR.
   Os blocos @media (min-width: …) ajustam para telas maiores.
   ============================================================ */


/* ---------- 1. BASE ---------- */

/* box-sizing: border-box faz a largura incluir borda e espaçamento interno.
   Sem isso, um card de 100% + padding "estoura" a tela. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-base);
  line-height: var(--altura-linha);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  line-height: 1.15;
  margin: 0 0 var(--esp-3);
}
h1 { font-size: var(--texto-h1); }
h2 { font-size: var(--texto-h2); }
h3 { font-size: var(--texto-h3); }
p  { margin: 0 0 var(--esp-3); }

a { color: var(--cor-caramelo-texto); }
a:hover { color: var(--cor-marrom-escuro); }

img { max-width: 100%; height: auto; display: block; }

/* Contorno visível ao navegar pelo teclado (acessibilidade) */
:focus-visible { outline: 3px solid var(--cor-caramelo); outline-offset: 2px; }

/* "Recipiente" que centraliza o conteúdo e limita a largura em telas grandes */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 var(--esp-3);
}

/* Espaço vertical padrão entre as seções */
.secao { padding: var(--esp-6) 0; }
.secao-areia { background: var(--cor-fundo-areia); }
.secao-escura { background: var(--cor-marrom); color: var(--cor-texto-invertido); }
.secao-escura h2, .secao-escura h3 { color: var(--cor-texto-invertido); }

.centro { text-align: center; }
.estreito { max-width: 680px; margin-left: auto; margin-right: auto; }

/* Textinho em CAIXA ALTA espaçada, como "CAFÉS ESPECIAIS" do logo */
.rotulo {
  display: inline-block;
  font-size: var(--texto-pequeno);
  letter-spacing: var(--espaco-letras-caixa-alta);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
  margin-bottom: var(--esp-2);
}
.secao-escura .rotulo { color: var(--cor-fundo-areia); }

.subtitulo { font-size: var(--texto-medio); color: var(--cor-texto-suave); }
.cursiva { font-family: var(--fonte-assinatura); font-size: 2.5rem; color: var(--cor-caramelo); line-height: 1.2; }
.texto-pequeno { font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }

/* Esconde visualmente, mas leitores de tela continuam lendo */
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


/* ---------- 2. PEÇAS REUTILIZÁVEIS ---------- */

/* Botões em formato de pílula */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--altura-botao);
  padding: 0 var(--esp-4);
  border-radius: var(--raio-botao);
  border: 1.5px solid transparent;
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-forte);
  font-size: var(--texto-pequeno);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.btn-primario { background: var(--cor-marrom); color: var(--cor-texto-invertido); }
.btn-primario:hover { background: var(--cor-marrom-escuro); color: var(--cor-texto-invertido); }
.btn-secundario { background: transparent; color: var(--cor-texto); border-color: var(--cor-texto); }
.btn-secundario:hover { background: var(--cor-texto); color: var(--cor-texto-invertido); }
.btn-claro { background: var(--cor-fundo); color: var(--cor-texto); }
.btn-claro:hover { background: var(--cor-fundo-areia); color: var(--cor-texto); }
.btn-whats { background: var(--cor-verde); color: var(--cor-texto-invertido); }
.btn-whats:hover { background: var(--cor-texto); color: var(--cor-texto-invertido); }
.btn-largo { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.grupo-botoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.centro .grupo-botoes { justify-content: center; }

/* Grade de cards: 1 coluna no celular, mais colunas conforme a tela cresce.
   "auto-fill + minmax" faz isso sozinho, sem precisar de @media. */
.grade-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--esp-4);
}

/* Card de produto */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cor-superficie);
  border-radius: var(--raio);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}
.card-foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--cor-fundo-areia); }
.card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card-foto img { transform: scale(1.03); }
.card-corpo { display: flex; flex-direction: column; flex: 1; padding: var(--esp-4); }
.card-corpo h3 { margin-bottom: var(--esp-1); }
.card-corpo h3 a { color: inherit; text-decoration: none; }
.card-notas { color: var(--cor-texto-suave); margin-bottom: var(--esp-3); }
.card-rodape { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }
.preco { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--texto-h3); margin: 0; }

/* Selo redondo dourado da pontuação SCA */
.selo-sca {
  position: absolute; top: var(--esp-3); right: var(--esp-3); z-index: 1;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--cor-texto); color: var(--cor-dourado);
  border: 2px solid var(--cor-dourado);
  display: grid; place-content: center; text-align: center;
  font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); font-size: 1.25rem; line-height: 1;
}
.selo-sca small { font-family: var(--fonte-corpo); font-size: 9px; letter-spacing: 0.1em; font-weight: var(--peso-normal); }

/* Pílulas ("Esgotado", "Mais pedido") */
.pilula {
  display: inline-block; padding: 2px var(--esp-2); border-radius: var(--raio-botao);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cor-texto-invertido); background: var(--cor-verde);
}
.pilula-alerta { background: var(--cor-alerta); }

/* Caixa de destaque areia (como "O que é café especial?" do cartão) */
.caixa-areia { background: var(--cor-fundo-areia); border-radius: var(--raio); padding: var(--esp-4); }
.caixa-branca { background: var(--cor-superficie); border-radius: var(--raio); padding: var(--esp-4); box-shadow: var(--sombra-card); }

/* Linha pontilhada, como a do logo */
.divisor { border: none; border-top: 2px dotted var(--cor-borda); margin: var(--esp-5) 0; }

/* Tabelas simples */
.tabela { width: 100%; border-collapse: collapse; background: var(--cor-superficie); border-radius: var(--raio); overflow: hidden; }
.tabela th, .tabela td { text-align: left; padding: var(--esp-3); border-bottom: 1px solid var(--cor-borda); vertical-align: top; }
.tabela th { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); background: var(--cor-fundo-areia); }
.tabela tr:last-child td { border-bottom: none; }

/* Formulários */
.campo { display: flex; flex-direction: column; gap: var(--esp-1); margin-bottom: var(--esp-3); }
.campo label { font-weight: var(--peso-medio); font-size: var(--texto-pequeno); }
.campo input, .campo select, .campo textarea {
  min-height: var(--altura-botao); padding: var(--esp-2) var(--esp-3);
  font: inherit; color: var(--cor-texto);
  background: var(--cor-superficie); border: 1.5px solid var(--cor-borda); border-radius: var(--raio-pequeno);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--cor-caramelo); outline: none; }
/* Quem navega pelo teclado vê um contorno forte (o :focus-visible só aparece no teclado) */
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--cor-caramelo-texto); outline-offset: 1px; }
.campo .erro { color: var(--cor-alerta); font-size: var(--texto-pequeno); }
.linha-campos { display: grid; gap: var(--esp-3); }
@media (min-width: 600px) { .linha-campos { grid-template-columns: 1fr 1fr; } }

/* Botões de escolha (grão / moído, tipo de entrega) feitos com input radio */
.opcoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); border: none; padding: 0; margin: 0 0 var(--esp-4); }
.opcoes legend { font-weight: var(--peso-medio); margin-bottom: var(--esp-2); padding: 0; }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; } /* esconde a bolinha, mas continua clicável pelo label */
.opcao span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--esp-4);
  border: 1.5px solid var(--cor-borda); border-radius: var(--raio-botao);
  background: var(--cor-superficie); cursor: pointer; transition: all var(--transicao);
}
.opcao input:checked + span { background: var(--cor-texto); color: var(--cor-texto-invertido); border-color: var(--cor-texto); }
.opcao input:focus-visible + span { outline: 3px solid var(--cor-caramelo); outline-offset: 2px; }

/* Opções em bloco (entrega no carrinho) */
.opcoes-bloco { display: grid; gap: var(--esp-2); }
.opcoes-bloco .opcao span { display: block; border-radius: var(--raio); padding: var(--esp-3); min-height: 0; }
.opcoes-bloco .opcao small { display: block; opacity: 0.8; }

/* Seletor de quantidade [-] 1 [+] */
.quantidade { display: inline-flex; align-items: center; border: 1.5px solid var(--cor-borda); border-radius: var(--raio-botao); background: var(--cor-superficie); }
.quantidade button { width: 44px; height: 44px; border: none; background: none; font-size: 1.25rem; cursor: pointer; color: var(--cor-texto); }
.quantidade span { min-width: 28px; text-align: center; font-weight: var(--peso-forte); }


/* ---------- 3. CABEÇALHO E RODAPÉ ---------- */

/* Faixa fininha de aviso no topo */
.faixa-topo {
  background: var(--cor-texto); color: var(--cor-texto-invertido);
  text-align: center; font-size: var(--texto-pequeno); padding: var(--esp-2) var(--esp-3);
  letter-spacing: 0.04em;
}

/* "sticky" = o cabeçalho gruda no topo ao rolar a página */
.cabecalho {
  position: sticky; top: 0; z-index: 50;
  background: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
}
.cabecalho .container { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: 72px; }
.logo { display: flex; align-items: center; }
.logo img { width: 56px; height: 56px; }

.menu-botao, .carrinho-botao {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: none; background: none; color: var(--cor-texto); cursor: pointer;
  text-decoration: none;
}
.menu-botao svg, .carrinho-botao svg { width: 26px; height: 26px; }
.contador-carrinho {
  position: absolute; top: 2px; right: 0;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--cor-caramelo); color: var(--cor-texto-invertido);
  font-size: 12px; font-weight: var(--peso-forte); line-height: 20px; text-align: center;
}
.contador-carrinho:empty { display: none; }

/* Menu: no celular fica escondido e abre como uma "gaveta" */
.menu { display: none; }
.menu.aberto {
  display: block; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda);
  box-shadow: var(--sombra-card);
}
.menu ul { list-style: none; margin: 0; padding: var(--esp-2) var(--esp-3) var(--esp-4); }
.menu a {
  display: block; padding: var(--esp-3) 0; border-bottom: 1px dotted var(--cor-borda);
  color: var(--cor-texto); text-decoration: none;
  font-size: var(--texto-pequeno); letter-spacing: 0.12em; text-transform: uppercase;
}
.menu a[aria-current="page"] { color: var(--cor-caramelo-texto); font-weight: var(--peso-forte); }

/* A partir de 900px, o menu aparece em linha e o botão de menu some */
@media (min-width: 900px) {
  .menu-botao { display: none; }
  .menu, .menu.aberto { display: block; position: static; box-shadow: none; border: none; background: none; }
  .menu ul { display: flex; gap: var(--esp-4); padding: 0; }
  .menu a { border: none; padding: var(--esp-2) 0; }
  .menu a:hover { color: var(--cor-caramelo-texto); }
  .logo img { width: 64px; height: 64px; }
}

/* Rodapé */
.rodape { background: var(--cor-texto); color: var(--cor-fundo-areia); padding: var(--esp-6) 0 var(--esp-4); font-size: var(--texto-pequeno); }
.rodape a { color: var(--cor-fundo); }
.rodape-grade { display: grid; gap: var(--esp-5); }
.rodape h3 { color: var(--cor-fundo); font-size: var(--texto-base); letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--fonte-corpo); }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: var(--esp-2); }
.rodape .logo img { width: 88px; height: 88px; margin-bottom: var(--esp-3); }
.rodape-legal { border-top: 1px dotted rgba(246, 240, 232, 0.3); margin-top: var(--esp-5); padding-top: var(--esp-4); text-align: center; }
.rodape-legal p { margin-bottom: var(--esp-1); }
@media (min-width: 768px) { .rodape-grade { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }


/* ---------- 4. HOME ---------- */

.hero { padding: var(--esp-6) 0; overflow: hidden; }
.hero-grade { display: grid; gap: var(--esp-5); align-items: center; }
.hero h1 { font-size: var(--texto-destaque); font-weight: var(--peso-titulo); margin-bottom: var(--esp-3); }
.hero h1 em { font-style: italic; color: var(--cor-caramelo); font-weight: var(--peso-normal); }
.hero .subtitulo { margin-bottom: var(--esp-4); max-width: 520px; }
.hero-fotos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--esp-2); }
.hero-fotos img { border-radius: var(--raio); box-shadow: var(--sombra-card); aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.hero-fotos img:nth-child(2) { transform: translateY(-16px); }
@media (min-width: 900px) {
  .hero { padding: var(--esp-7) 0; }
  .hero-grade { grid-template-columns: 1.1fr 1fr; }
}

/* Comparação "café comum x café especial" */
.comparacao { display: grid; gap: var(--esp-3); margin: var(--esp-4) 0; }
.comparacao-linha { display: grid; grid-template-columns: 1fr; gap: var(--esp-2); }
.comparacao-item { padding: var(--esp-3); border-radius: var(--raio); }
.comparacao-item.comum { background: transparent; border: 1.5px dashed var(--cor-borda); color: var(--cor-texto-suave); }
.comparacao-item.especial { background: var(--cor-superficie); box-shadow: var(--sombra-card); }
.comparacao-item strong { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--esp-1); }
@media (min-width: 700px) { .comparacao-linha { grid-template-columns: 1fr 1fr; } }

/* Três colunas de diferenciais / passos */
.tres-colunas { display: grid; gap: var(--esp-4); }
@media (min-width: 768px) { .tres-colunas { grid-template-columns: repeat(3, 1fr); } }
.item-icone svg { width: 40px; height: 40px; color: var(--cor-caramelo); margin-bottom: var(--esp-2); }
.numero-passo {
  display: inline-grid; place-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid currentColor; font-family: var(--fonte-titulo); font-size: var(--texto-h3); margin-bottom: var(--esp-3);
}

/* Bloco com foto + texto lado a lado */
.lado-a-lado { display: grid; gap: var(--esp-5); align-items: center; }
@media (min-width: 900px) { .lado-a-lado { grid-template-columns: 1fr 1fr; } }
.lado-a-lado img { border-radius: var(--raio); box-shadow: var(--sombra-card); }
.selo-grande { width: 260px; max-width: 70%; margin: 0 auto; }


/* ---------- 5. PÁGINAS ESPECÍFICAS ---------- */

/* Cabeçalho simples das páginas internas */
.topo-pagina { padding: var(--esp-6) 0 var(--esp-5); text-align: center; }
.topo-pagina .subtitulo { max-width: 620px; margin: 0 auto; }

/* Texto corrido (sobre, políticas, guia) */
.texto-corrido { max-width: 720px; margin: 0 auto; }
.texto-corrido h2 { margin-top: var(--esp-5); font-size: var(--texto-h3); }
.texto-corrido ul, .texto-corrido ol { padding-left: var(--esp-4); margin: 0 0 var(--esp-3); }
.texto-corrido li { margin-bottom: var(--esp-2); }

/* Página de produto */
.produto { display: grid; gap: var(--esp-5); padding: var(--esp-5) 0 var(--esp-6); }
@media (min-width: 900px) { .produto { grid-template-columns: 1fr 1fr; align-items: start; } }
.produto-foto { position: relative; border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-card); aspect-ratio: 4 / 5; background: var(--cor-fundo-areia); }
.produto-foto img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .produto-foto { position: sticky; top: 96px; } }
.produto h1 { margin-bottom: var(--esp-2); }
.produto .preco { font-size: var(--texto-h2); margin-bottom: var(--esp-4); }
.notas-lista { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-bottom: var(--esp-4); padding: 0; list-style: none; }
.notas-lista li { padding: var(--esp-1) var(--esp-3); border-radius: var(--raio-botao); background: var(--cor-fundo-areia); font-size: var(--texto-pequeno); }
.comprar { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; margin-bottom: var(--esp-5); }
.comprar .btn { flex: 1; min-width: 200px; }
.ficha { list-style: none; padding: 0; margin: 0; }
.ficha li { padding: var(--esp-3) 0; border-bottom: 1px dotted var(--cor-borda); }
.ficha strong { display: block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cor-texto-suave); font-weight: var(--peso-medio); }
.ficha small { display: block; color: var(--cor-texto-suave); }
.migalhas { font-size: var(--texto-pequeno); padding-top: var(--esp-4); }
.migalhas a { color: var(--cor-texto-suave); display: inline-block; padding: 12px 0; }

/* Assinatura */
.planos { display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.plano { background: var(--cor-superficie); border-radius: var(--raio); box-shadow: var(--sombra-card); padding: var(--esp-4); display: flex; flex-direction: column; }
.plano h3 { margin-bottom: var(--esp-1); }
.plano .preco { font-size: var(--texto-h2); margin: var(--esp-3) 0 0; }
.plano .por-mes { color: var(--cor-texto-suave); font-size: var(--texto-pequeno); margin-bottom: var(--esp-3); }
.plano .btn { margin-top: auto; }
.plano-economia { color: var(--cor-verde); font-size: var(--texto-pequeno); font-weight: var(--peso-medio); }

/* Perguntas frequentes com <details> (abre/fecha sem JavaScript) */
.perguntas details { border-bottom: 1px dotted var(--cor-borda); padding: var(--esp-3) 0; }
.perguntas summary { cursor: pointer; font-weight: var(--peso-forte); list-style-position: outside; }
.perguntas details p { margin: var(--esp-2) 0 0; color: var(--cor-texto-suave); }

/* Carrinho */
.carrinho-grade { display: grid; gap: var(--esp-5); padding-bottom: var(--esp-6); }
@media (min-width: 900px) { .carrinho-grade { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.item-carrinho { display: grid; grid-template-columns: 80px 1fr; gap: var(--esp-3); padding: var(--esp-3) 0; border-bottom: 1px dotted var(--cor-borda); }
.item-carrinho img { width: 80px; height: 100px; object-fit: cover; border-radius: var(--raio-pequeno); }
.item-carrinho h3 { font-size: var(--texto-base); margin-bottom: 0; }
.item-acoes { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); margin-top: var(--esp-2); flex-wrap: wrap; }
.link-remover { background: none; border: none; color: var(--cor-texto-suave); text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--texto-pequeno); padding: var(--esp-2) 0; }
.resumo-linha { display: flex; justify-content: space-between; padding: var(--esp-2) 0; }
.resumo-total { border-top: 1px solid var(--cor-borda); margin-top: var(--esp-2); padding-top: var(--esp-3); font-family: var(--fonte-titulo); font-size: var(--texto-h3); font-weight: var(--peso-forte); }
.carrinho-vazio { text-align: center; padding: var(--esp-6) 0; }

/* Mensagens (sucesso / aviso / erro) */
.mensagem { padding: var(--esp-3); border-radius: var(--raio-pequeno); margin-bottom: var(--esp-3); border-left: 4px solid var(--cor-caramelo); background: var(--cor-superficie); }
.mensagem-sucesso { border-color: var(--cor-verde); }
.mensagem-erro { border-color: var(--cor-alerta); }


/* ---------- 6. WHATSAPP FLUTUANTE E AVISO "ADICIONADO" ---------- */

.whats-flutuante {
  position: fixed; right: var(--esp-3); bottom: var(--esp-3); z-index: 60;
  display: inline-flex; align-items: center; gap: var(--esp-2);
  height: 56px; padding: 0 var(--esp-4) 0 var(--esp-3);
  border-radius: var(--raio-botao); background: var(--cor-verde); color: var(--cor-texto-invertido);
  text-decoration: none; font-weight: var(--peso-forte); box-shadow: 0 4px 16px rgba(58, 38, 32, 0.25);
}
.whats-flutuante:hover { background: var(--cor-texto); color: var(--cor-texto-invertido); }
.whats-flutuante svg { width: 28px; height: 28px; }
/* No celular, só o ícone (o texto fica para leitores de tela) */
@media (max-width: 599px) {
  .whats-flutuante { width: 56px; padding: 0; justify-content: center; }
  .whats-flutuante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

.aviso-flutuante {
  position: fixed; left: 50%; bottom: 88px; z-index: 70;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--cor-texto); color: var(--cor-texto-invertido);
  padding: var(--esp-3) var(--esp-4); border-radius: var(--raio); box-shadow: var(--sombra-card);
  transition: all 0.3s ease; width: max-content; max-width: calc(100% - 32px);
}
.aviso-flutuante.visivel { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.aviso-flutuante a { color: var(--cor-fundo-areia); font-weight: var(--peso-forte); margin-left: var(--esp-2); }

/* Respeita quem prefere menos animação (configuração do celular/PC) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}