/* =============================================================
   EVERTONTEC — ESTILOS
   Fundo cinza, blocos brancos, texto preto,
   botões azul-claro com texto azul.
   Para mudar as cores, altere apenas o bloco 1.
   ============================================================= */

/* -------------------------------------------------------------
   1) VARIÁVEIS
   ------------------------------------------------------------- */
:root {
  /* Fundo e blocos */
  --cinza-fundo: #ebebeb;
  --branco: #ffffff;
  --borda: #e8e8e8;

  /* Textos (pretos) */
  --preto: #1a1a1a;
  --preto-suave: #333333;
  --cinza-texto: #737373;
  --cinza-fraco: #9e9e9e;

  /* Azuis dos botões */
  --azul: #3483fa;
  --azul-forte: #1f66d6;
  --azul-claro: #e3edfb;
  --azul-claro-hover: #d2e2fa;

  /* Apoio */
  --verde: #00a650;
  --zap: #25d366;
  --zap-escuro: #1da851;
  --amarelo: #f5a524;

  --raio: 10px;
  --raio-g: 16px;
  --raio-pill: 999px;

  --sombra-s: 0 1px 2px rgba(0, 0, 0, .07);
  --sombra-m: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .07);
  --sombra-g: 0 2px 6px rgba(0, 0, 0, .07), 0 18px 44px rgba(0, 0, 0, .12);

  --largura: 1280px;
  --transicao: .22s cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------------------
   2) RESET E BASES
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--preto-suave);
  background: var(--cinza-fundo);
  -webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; color: var(--preto); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 2.6vw, 1.75rem); }
h3 { font-size: clamp(1rem, 2vw, 1.15rem); }

p { margin: 0 0 .9rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--azul); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--azul-forte); }

ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 6px; }

.pular-conteudo {
  position: absolute; left: -9999px; top: 0;
  background: var(--preto); color: #fff;
  padding: .7rem 1.2rem; z-index: 300;
  border-radius: 0 0 var(--raio) 0;
}
.pular-conteudo:focus { left: 0; color: #fff; }

.apenas-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------
   3) ESTRUTURA E O "QUADRADO BRANCO"
   ------------------------------------------------------------- */
.envoltorio { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 1rem; }

/* Cada trecho do site é um bloco branco sobre o fundo cinza */
.bloco {
  background: var(--branco);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-s);
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
  margin-bottom: 1rem;
}
.bloco--justo { padding: 0; overflow: hidden; }

.bloco__cabecalho { margin-bottom: 1.5rem; }
.bloco__cabecalho p { color: var(--cinza-texto); font-size: .96rem; margin-top: .4rem; }

.espaco-topo { padding-top: 1rem; }
.espaco-base { padding-bottom: 1rem; }

.rotulo {
  display: inline-block;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--azul);
}

/* -------------------------------------------------------------
   4) BOTÕES
   ------------------------------------------------------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .7rem 1.3rem;
  border-radius: var(--raio);
  font-weight: 600; font-size: .93rem;
  transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.botao:active { transform: translateY(1px); }

/* Botão principal: fundo azul claro, texto azul (como na referência) */
.botao--azul { background: var(--azul-claro); color: var(--azul); }
.botao--azul:hover { background: var(--azul-claro-hover); color: var(--azul-forte); }

.botao--cheio { background: var(--azul); color: #fff; }
.botao--cheio:hover { background: var(--azul-forte); color: #fff; }

.botao--zap { background: var(--zap); color: #fff; }
.botao--zap:hover { background: var(--zap-escuro); color: #fff; }

.botao--neutro { background: #f5f5f5; color: var(--preto-suave); }
.botao--neutro:hover { background: #ececec; color: var(--preto); }

.botao--bloco { width: 100%; }
.botao--grande { padding: .95rem 1.7rem; font-size: 1rem; }
.botao--pequeno { padding: .5rem 1rem; font-size: .85rem; }

/* -------------------------------------------------------------
   5) CABEÇALHO (sem menu: marca + redes sociais)
   ------------------------------------------------------------- */
.cabecalho {
  position: sticky; top: 0; z-index: 100;
  background: var(--branco);
  box-shadow: var(--sombra-s);
}

.cabecalho__interno {
  display: flex; align-items: center; gap: .5rem;
  min-height: 66px;
  padding: .6rem 1rem;
  max-width: var(--largura); margin: 0 auto;
}

.marca {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 800; font-size: 1.2rem;
  letter-spacing: -.03em;
  color: var(--preto);
  margin-right: auto;
}
.marca:hover { color: var(--preto); }
.marca__sinal {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 9px;
  background: var(--azul);
  display: grid; place-items: center;
  color: #fff; font-size: .9rem; font-weight: 800;
}
.marca__azul { color: var(--azul); }

/* Grupo WhatsApp + YouTube + Instagram */
.sociais { display: flex; align-items: center; gap: .45rem; }

.social {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .45rem;
  width: 42px; height: 42px;
  border-radius: var(--raio);
  background: var(--azul-claro);
  color: var(--azul);
  font-weight: 600; font-size: .9rem;
  transition: background var(--transicao), color var(--transicao);
}
.social:hover { background: var(--azul-claro-hover); color: var(--azul-forte); }
.social__texto { display: none; }

/* O WhatsApp é o botão principal, então ganha largura e texto */
.social--zap { width: auto; padding: 0 1rem; }
@media (min-width: 560px) { .social--zap .social__texto { display: inline; } }

/* -------------------------------------------------------------
   6) DESTAQUE DE TELA CHEIA (imagem principal)
   ------------------------------------------------------------- */
.destaque {
  position: relative;
  background: var(--branco);
  border-radius: var(--raio-g);
  overflow: hidden;
  box-shadow: var(--sombra-s);
  margin-bottom: 1rem;
}

.destaque__trilha {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.destaque__trilha::-webkit-scrollbar { display: none; }

.destaque__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  /* Ocupa praticamente a tela toda ao abrir o site */
  min-height: min(78vh, 760px);
  display: grid;
  align-items: end;
}

.destaque__imagem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* A sombra só aparece quando existe texto sobre a imagem */
.destaque__sombra {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .42) 42%, rgba(0, 0, 0, .05) 100%);
}

.destaque__conteudo { position: relative; padding: clamp(1.5rem, 5vw, 3.5rem); color: #fff; }
.destaque__texto-bloco { max-width: 34rem; }
.destaque__rotulo { color: rgba(255, 255, 255, .9); }
.destaque__titulo { color: #fff; font-size: clamp(1.6rem, 4.6vw, 3rem); margin: .6rem 0 .7rem; }
.destaque__texto { color: rgba(255, 255, 255, .9); font-size: 1.03rem; margin-bottom: 1.5rem; }

.destaque__seta {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px;
  display: none; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--preto);
  box-shadow: var(--sombra-m);
}
.destaque__seta:hover { background: #fff; }
.destaque__seta--anterior { left: 1rem; }
.destaque__seta--proxima { right: 1rem; }

.destaque__pontos {
  position: absolute; bottom: 1.1rem; left: 0; right: 0; z-index: 3;
  display: none; justify-content: center; gap: .4rem;
}
.destaque__ponto {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  transition: width var(--transicao), background var(--transicao);
}
.destaque__ponto[aria-current="true"] { width: 28px; border-radius: var(--raio-pill); background: #fff; }

/* Setas e pontinhos aparecem só quando existe mais de uma imagem */
.destaque--multiplo .destaque__pontos { display: flex; }
@media (min-width: 768px) { .destaque--multiplo .destaque__seta { display: grid; } }

/* Seta que convida a rolar a página */
.destaque__rolar {
  position: absolute; z-index: 3;
  bottom: 1.1rem; right: 1.1rem;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1rem;
  border-radius: var(--raio-pill);
  background: rgba(255, 255, 255, .95);
  color: var(--preto);
  font-size: .85rem; font-weight: 600;
  box-shadow: var(--sombra-m);
}
.destaque__rolar:hover { background: #fff; color: var(--azul); }
.destaque__rolar svg { animation: pulaBaixo 1.8s ease-in-out infinite; }

@keyframes pulaBaixo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* -------------------------------------------------------------
   7) BUSCA E FILTROS
   ------------------------------------------------------------- */
.ferramentas__linha { display: grid; gap: .75rem; }
@media (min-width: 760px) { .ferramentas__linha { grid-template-columns: 1fr auto; align-items: center; } }

.busca { position: relative; }
.busca__icone {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--cinza-fraco); pointer-events: none;
}
.busca__campo {
  width: 100%;
  padding: .9rem 1rem .9rem 2.9rem;
  font: inherit; font-size: .97rem;
  color: var(--preto);
  background: #f7f7f7;
  border: 1px solid transparent;
  border-radius: var(--raio);
  transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.busca__campo::placeholder { color: var(--cinza-fraco); }
.busca__campo:focus {
  outline: none; background: #fff;
  border-color: var(--azul);
  box-shadow: 0 0 0 4px var(--azul-claro);
}

.ordenar { display: flex; align-items: center; gap: .5rem; }
.ordenar__rotulo { font-size: .85rem; color: var(--cinza-texto); white-space: nowrap; }
.ordenar__campo {
  padding: .7rem 2.3rem .7rem 1rem;
  font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--preto);
  background-color: #f7f7f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center;
  border: 1px solid transparent; border-radius: var(--raio);
  appearance: none; cursor: pointer;
}
.ordenar__campo:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 4px var(--azul-claro); }

/* Etiquetas de filtro em linha, roláveis no celular */
.etiquetas {
  display: flex; gap: .5rem;
  margin-top: 1rem;
  padding-bottom: .35rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.etiquetas::-webkit-scrollbar { height: 4px; }
.etiquetas::-webkit-scrollbar-thumb { background: #dcdcdc; border-radius: 4px; }

.etiqueta {
  flex: 0 0 auto;
  padding: .5rem 1.05rem;
  border-radius: var(--raio-pill);
  background: #f5f5f5;
  color: var(--preto-suave);
  font-size: .88rem; font-weight: 600;
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
.etiqueta:hover { background: #ececec; }
.etiqueta[aria-pressed="true"] { background: var(--azul-claro); color: var(--azul); }

.resultado {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem;
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--borda);
}
.resultado__contagem { font-size: .9rem; color: var(--cinza-texto); }
.resultado__limpar { font-size: .88rem; font-weight: 600; color: var(--azul); }

/* -------------------------------------------------------------
   8) GRADE DE PRODUTOS (os "quadradinhos")
   ------------------------------------------------------------- */
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

@media (max-width: 460px) {
  .grade { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
}

.cartao {
  display: flex; flex-direction: column;
  background: var(--branco);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-s);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra-m); }

.cartao__midia { position: relative; aspect-ratio: 1 / 1; background: #fafafa; overflow: hidden; }
.cartao__imagem { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--transicao); }
.cartao:hover .cartao__imagem { transform: scale(1.05); }

.cartao__selo {
  position: absolute; top: .7rem; left: .7rem;
  padding: .28rem .6rem;
  border-radius: 6px;
  background: var(--verde);
  color: #fff;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

.cartao__corpo { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }

.cartao__nome {
  font-size: .96rem; font-weight: 600; color: var(--preto);
  line-height: 1.35; margin-bottom: .3rem;
}
.cartao__resumo {
  font-size: .82rem; color: var(--cinza-texto);
  margin-bottom: .8rem;
  /* Limita em 2 linhas para os cartões ficarem alinhados */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.cartao__preco { font-size: 1.22rem; font-weight: 600; color: var(--preto); letter-spacing: -.02em; }
.cartao__preco--consultar { font-size: 1rem; font-weight: 600; color: var(--cinza-texto); }
.cartao__observacao { font-size: .78rem; color: var(--verde); font-weight: 600; margin-top: .1rem; }

.cartao__rodape { margin-top: auto; padding-top: .9rem; }

@media (max-width: 460px) {
  .cartao__corpo { padding: .75rem .8rem .9rem; }
  .cartao__nome { font-size: .88rem; }
  .cartao__resumo { display: none; }
  .cartao__preco { font-size: 1.05rem; }
}

/* Aviso de "nada encontrado" */
.vazio { padding: 3rem 1.25rem; text-align: center; }
.vazio__icone { color: var(--cinza-fraco); margin: 0 auto .9rem; }
.vazio h3 { margin-bottom: .4rem; }
.vazio p { color: var(--cinza-texto); margin-bottom: 1.5rem; }

/* -------------------------------------------------------------
   9) PÁGINA DO PRODUTO
   ------------------------------------------------------------- */
.migalhas { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .84rem; color: var(--cinza-fraco); margin-bottom: 1rem; }
.migalhas a { color: var(--cinza-texto); font-weight: 500; }
.migalhas a:hover { color: var(--azul); }

.produto { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 940px) {
  .produto { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 2.75rem; }
  .produto__galeria { position: sticky; top: 84px; }
}

.galeria__principal {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fafafa;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  overflow: hidden;
  margin-bottom: .7rem;
}
.galeria__principal img { width: 100%; height: 100%; object-fit: cover; }

.galeria__miniaturas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }

.galeria__miniatura {
  position: relative; aspect-ratio: 1 / 1; padding: 0;
  background: #fafafa;
  border: 2px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  transition: border-color var(--transicao), transform var(--transicao);
}
.galeria__miniatura img { width: 100%; height: 100%; object-fit: cover; }
.galeria__miniatura:hover { transform: translateY(-2px); border-color: var(--cinza-fraco); }
.galeria__miniatura[aria-current="true"] { border-color: var(--azul); }

.produto__selo {
  display: inline-block;
  padding: .28rem .65rem; margin-bottom: .8rem;
  border-radius: 6px;
  background: var(--verde); color: #fff;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}

.produto__nome { font-size: clamp(1.4rem, 3.6vw, 2.05rem); margin-bottom: .6rem; }
.produto__resumo { font-size: 1.02rem; color: var(--cinza-texto); margin-bottom: 1.5rem; }

.produto__preco { font-size: clamp(1.9rem, 4.5vw, 2.5rem); font-weight: 600; color: var(--preto); letter-spacing: -.03em; line-height: 1.1; }
.produto__preco--consultar { font-size: 1.4rem; }
.produto__observacao { font-size: .95rem; color: var(--verde); font-weight: 600; margin-top: .2rem; }
.produto__bloco-preco { margin-bottom: 1.5rem; }

.produto__acoes { display: grid; gap: .6rem; margin-bottom: 1.75rem; }
@media (min-width: 520px) { .produto__acoes { grid-template-columns: 1fr auto; } }

.produto__etiquetas { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.produto__etiqueta {
  padding: .35rem .8rem;
  border-radius: var(--raio-pill);
  background: #f5f5f5;
  color: var(--preto-suave);
  font-size: .82rem; font-weight: 600;
}
.produto__etiqueta:hover { background: var(--azul-claro); color: var(--azul); }

.produto__descricao h2 { font-size: 1.1rem; margin-bottom: .7rem; }
.produto__descricao { margin-bottom: 1.75rem; }

.ficha { border-top: 1px solid var(--borda); }
.ficha__item { display: grid; gap: .1rem; padding: .8rem 0; border-bottom: 1px solid var(--borda); }
@media (min-width: 540px) { .ficha__item { grid-template-columns: 42% 1fr; gap: 1rem; align-items: baseline; } }
.ficha__rotulo { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--cinza-texto); }
.ficha__valor { color: var(--preto); font-size: .95rem; }

/* -------------------------------------------------------------
   10) AVALIAÇÕES COM VÍDEO
   ------------------------------------------------------------- */
.avaliacoes__resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.avaliacoes__nota { font-size: 2.4rem; font-weight: 700; color: var(--preto); line-height: 1; letter-spacing: -.03em; }
.estrelas { display: inline-flex; gap: .1rem; color: var(--azul); }
.avaliacoes__total { font-size: .87rem; color: var(--cinza-texto); }

.grade-avaliacoes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.avaliacao {
  display: flex; flex-direction: column;
  background: #fafafa;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  overflow: hidden;
}
.avaliacao__video { position: relative; aspect-ratio: 9 / 12; background: #111; }
.avaliacao__video video, .avaliacao__video iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }

.avaliacao__corpo { padding: 1rem 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.avaliacao__texto { font-size: .92rem; color: var(--preto-suave); margin: .6rem 0 1rem; }

.avaliacao__autor { margin-top: auto; display: flex; align-items: center; gap: .7rem; padding-top: .85rem; border-top: 1px solid var(--borda); }
.avaliacao__inicial {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 50%;
  background: var(--azul-claro); color: var(--azul);
  font-weight: 700; font-size: .88rem;
}
.avaliacao__nome { font-size: .9rem; font-weight: 600; color: var(--preto); line-height: 1.3; }
.avaliacao__local { font-size: .78rem; color: var(--cinza-texto); }

/* -------------------------------------------------------------
   11) BLOCO DE CONTATO
   ------------------------------------------------------------- */
.contato { text-align: center; }
.contato p { color: var(--cinza-texto); max-width: 34rem; margin: .6rem auto 1.5rem; }
.contato__acoes { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* -------------------------------------------------------------
   12) RODAPÉ
   ------------------------------------------------------------- */
.rodape { padding-bottom: 1rem; }
.rodape__grade { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .rodape__grade { grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: start; } }

.rodape__sobre { font-size: .92rem; color: var(--cinza-texto); max-width: 26rem; margin-top: .8rem; }
.rodape__titulo { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cinza-fraco); margin-bottom: .8rem; }
.rodape__lista { display: grid; gap: .5rem; font-size: .92rem; color: var(--cinza-texto); }

.rodape__base {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--borda);
  display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; justify-content: space-between;
  font-size: .84rem; color: var(--cinza-fraco);
}

/* -------------------------------------------------------------
   13) BOTÃO FLUTUANTE DO WHATSAPP
   ------------------------------------------------------------- */
.zap-flutuante {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.1rem;
  border-radius: var(--raio-pill);
  background: var(--zap); color: #fff;
  font-weight: 600; font-size: .92rem;
  box-shadow: 0 6px 22px rgba(37, 211, 102, .4);
  transition: transform var(--transicao), background var(--transicao);
}
.zap-flutuante:hover { background: var(--zap-escuro); color: #fff; transform: translateY(-3px); }
.zap-flutuante__texto { display: none; }
@media (min-width: 600px) {
  .zap-flutuante { right: 1.5rem; bottom: 1.5rem; }
  .zap-flutuante__texto { display: inline; }
}

/* -------------------------------------------------------------
   14) ANIMAÇÃO DE ENTRADA
   ------------------------------------------------------------- */
.surgir { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.surgir.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .surgir { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------
   15) IMPRESSÃO
   ------------------------------------------------------------- */
@media print {
  .cabecalho, .zap-flutuante, .destaque, .ferramentas, .rodape { display: none !important; }
  body { background: #fff; color: #000; }
  .bloco { box-shadow: none; }
}