/* =========================================================
   COMPONENTES COMPARTILHADOS: barra de rolagem com estrela,
   botões flutuantes e rodapé completo
   ========================================================= */

/* ---------- Barra fininha de rolagem (embaixo do menu) ---------- */
.rolagem { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; z-index: 2; }
.rolagem-trilho { position: absolute; inset: 0; background: var(--linha); opacity: .6; }
.rolagem-fio { position: absolute; inset: 0; background: var(--tinta); transform: scaleX(0); transform-origin: left center; }
.rolagem-estrela {
  position: absolute; top: 1px; left: 0; font-size: 17px; line-height: 1; color: var(--tinta);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 3px var(--fundo)) drop-shadow(0 0 1px var(--fundo));
  will-change: left;
}
.rolagem-estrela.treme { animation: treme .16s linear infinite; }
@keyframes treme {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  20%  { transform: translate(calc(-50% - 1.5px), calc(-50% + 1px)) rotate(-16deg); }
  40%  { transform: translate(calc(-50% + 1.5px), calc(-50% - 1px)) rotate(14deg); }
  60%  { transform: translate(calc(-50% - 1px), calc(-50% - 1.5px)) rotate(-10deg); }
  80%  { transform: translate(calc(-50% + 1px), calc(-50% + 1px)) rotate(12deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

/* ---------- Botões flutuantes ---------- */
.flutuantes {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.fl {
  --w: 140px;
  position: relative; display: flex; flex-direction: row-reverse; align-items: center; gap: 0;
  height: 52px; width: 52px; padding: 0; overflow: hidden; cursor: pointer;
  font: inherit; font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  color: var(--fundo); background: var(--tinta);
  border: 1.5px solid var(--tinta); border-radius: 26px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
  opacity: 0; transform: translateY(14px) scale(.9);
  transition: width .5s var(--curva), background-color .3s, color .3s, opacity .6s ease, transform .6s var(--curva);
}
.fl .ico { flex: none; width: 49px; height: 49px; display: grid; place-items: center; }
.fl .ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--curva); }
.fl .rot { padding-left: 18px; padding-right: 6px; opacity: 0; transform: translateX(10px); transition: opacity .3s, transform .5s var(--curva); }
.fl.entrou { opacity: 1; transform: none; }
.fl.invisivel { opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; }
.fl:hover, .fl:focus-visible { width: var(--w); }
.fl:hover .rot, .fl:focus-visible .rot { opacity: 1; transform: none; }
.fl-whats:hover .ico svg { transform: rotate(-12deg) scale(1.1); }
.fl-insta:hover .ico svg { transform: scale(1.12); }
.fl-topo:hover .ico svg { transform: translateY(-3px); }
.fl-whats { --w: 170px; }
.fl-insta { --w: 170px; }
.fl-topo { --w: 200px; background: var(--fundo); color: var(--tinta); }
.fl-topo:hover { background: var(--tinta); color: var(--fundo); }
.fl-whats::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; border: 1.5px solid var(--tinta);
  animation: pulso 2.8s ease-out infinite; pointer-events: none;
}
.fl-whats:hover::after { animation: none; opacity: 0; }
@keyframes pulso { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@media (hover: none) { .fl:hover { width: 52px; } .fl:hover .rot { opacity: 0; } }
@media (max-width: 560px) {
  .fl { height: 46px; width: 46px; } .fl .ico { width: 43px; height: 43px; } .fl .ico svg { width: 20px; height: 20px; }
}

/* ---------- Rodapé completo ---------- */
.rodape-grande { margin-top: clamp(70px, 10vw, 140px); border-top: 1px solid var(--linha); overflow: hidden; position: relative; }
.rg-chamada { padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(40px, 6vw, 72px); }
.rg-chamada .selo { font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.rg-chamada h2 {
  margin-top: 16px; max-width: 14em;
  font-size: clamp(2.2rem, 1.1rem + 5vw, 4.75rem); line-height: 1; letter-spacing: -.042em; font-weight: 700; text-wrap: balance;
}
.rg-botoes { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: clamp(24px, 3vw, 36px); }
.btn-g {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 12px 0 28px;
  font: inherit; font-size: 1.0625rem; font-weight: 700; text-decoration: none;
  color: var(--fundo); background: var(--tinta); border: 1.5px solid var(--tinta); border-radius: 999px;
  transition: color .45s var(--curva);
}
.btn-g::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fundo); transform: translateY(101%); transition: transform .5s var(--curva); }
.btn-g:hover { color: var(--tinta); }
.btn-g:hover::before { transform: none; }
.btn-g .seta { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--fundo); color: var(--tinta); transition: background-color .45s, color .45s, transform .45s var(--curva); }
.btn-g:hover .seta { background: var(--tinta); color: var(--fundo); transform: rotate(45deg); }
.btn-g .seta svg { width: 15px; height: 15px; }
.btn-g.contorno { color: var(--tinta); background: transparent; padding: 0 28px; }
.btn-g.contorno::before { background: var(--tinta); }
.btn-g.contorno:hover { color: var(--fundo); }

.rg-colunas, .rg-base { background-image: linear-gradient(var(--linha), var(--linha)); background-repeat: no-repeat; background-position: center top; background-size: calc(100% - 2 * clamp(20px, 4vw, 40px)) 1px; }
.rg-colunas { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 32px clamp(24px, 4vw, 56px); padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(32px, 5vw, 56px); }
.rg-col h3 { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8125rem; font-weight: 500; color: var(--cinza); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; }
.rg-col ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.rg-col a { text-decoration: none; font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .45s var(--curva); }
.rg-col a:hover { background-size: 100% 1.5px; }
.rg-col p { color: var(--cinza); max-width: 24em; margin-top: 10px; }
.rg-marca { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
.rg-col .ultimos a { display: block; font-weight: 500; line-height: 1.3; }
.rg-col .ultimos small { display: block; color: var(--cinza); font-size: .8125rem; margin-top: 2px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

.rg-gigante {
  font-size: clamp(5rem, 2rem + 21vw, 22rem); font-weight: 800; letter-spacing: -.06em; line-height: .8;
  text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1.5px var(--linha-forte);
  padding: 0 0 .04em; margin-top: 8px;
}
.rg-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding-top: 22px; padding-bottom: 28px; color: var(--cinza); font-size: .9375rem; }
.rg-base a { color: var(--tinta); font-weight: 600; text-decoration: none; }

@media (max-width: 900px) { .rg-colunas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rg-colunas { grid-template-columns: 1fr; } .btn-g { width: 100%; justify-content: space-between; } .btn-g.contorno { justify-content: center; } }
body.carregando .flutuantes { visibility: hidden; }

/* o rodapé não fica sob os botões flutuantes */
.rg-base { padding-right: clamp(70px, 8vw, 90px); }