/* RadiusPet — movimento e profundidade.
   Tudo aqui é aprimoramento: sem JS ou com "prefers-reduced-motion" a página
   continua legível e completa (os elementos nascem visíveis; o JS é que os
   esconde antes de revelar). */

/* ---------- Marca maior ---------- */
.topo-inner { min-height: 84px; }
.marca img { height: 56px; transition: transform .25s ease; }
.marca:hover img { transform: scale(1.04); }
.topo.encolhido .marca img { height: 46px; }
.topo { transition: box-shadow .25s, background .25s; }
.topo.encolhido { box-shadow: 0 6px 24px rgba(19, 42, 68, .1); }
.rodape-marca img { height: 60px; }
@media (max-width: 999px) { .marca img { height: 46px; } .topo-inner { min-height: 74px; } }

/* ---------- Hero com varredura ---------- */
.hero { isolation: isolate; }
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: .85;
}
.hero::after { z-index: 0; }
.hero .container { z-index: 2; }

/* marca grande que pulsa junto com a varredura */
.hero-marca {
  position: absolute; right: clamp(-40px, -2vw, 0px); bottom: clamp(-30px, -3vw, 0px);
  width: clamp(220px, 34vw, 520px); z-index: 1; opacity: .12;
  filter: brightness(0) invert(1); pointer-events: none;
  transform-origin: 50% 50%;
}
.hero-marca.bate { animation: bate-marca .6s cubic-bezier(.2,.8,.3,1) both; }
@keyframes bate-marca {
  0% { transform: scale(1); opacity: .12; }
  30% { transform: scale(1.05); opacity: .2; }
  100% { transform: scale(1); opacity: .12; }
}

/* ---------- Revelação no scroll ---------- */
[data-revela] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--atraso, 0ms);
  will-change: opacity, transform;
}
[data-revela="esquerda"] { transform: translateX(-28px); }
[data-revela="direita"] { transform: translateX(28px); }
[data-revela="zoom"] { transform: scale(.94); }
[data-revela].visivel { opacity: 1; transform: none; }

/* ---------- Cards com profundidade ---------- */
a.card, .card { transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s; }
a.card:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 22px 48px rgba(19,42,68,.14); }
a.card .ico { transition: transform .25s cubic-bezier(.2,.8,.3,1), background .25s, color .25s; }
a.card:hover .ico { transform: translateY(-2px) rotate(-6deg) scale(1.08); background: var(--ciano); color: #fff; }
a.card .mais { transition: gap .2s, letter-spacing .2s; }
a.card:hover .mais { letter-spacing: .02em; }

/* linha que corre no topo do card no hover */
a.card { position: relative; overflow: hidden; }
a.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--ciano), var(--ciano-claro));
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
a.card:hover::before { transform: scaleX(1); }

/* ---------- Números que contam ---------- */
.numeros div { position: relative; }
.numeros b { font-variant-numeric: tabular-nums; }
.numeros div::after {
  content: ""; position: absolute; left: 50%; bottom: -12px; width: 0; height: 2px;
  background: var(--ciano); transform: translateX(-50%); transition: width .8s ease .3s;
}
.numeros div.visivel::after { width: 46px; }

/* ---------- Passos com linha que avança ---------- */
.passos .passo::after {
  content: ""; position: absolute; left: 21px; top: 46px; width: 2px; height: 0;
  background: linear-gradient(180deg, var(--ciano), transparent);
  transition: height .6s ease .2s;
}
.passos .passo.visivel::after { height: calc(100% - 40px); }
@media (min-width: 980px) { .passos .passo::after { display: none; } }

/* ---------- Botões com brilho ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
}
.btn:hover::after { animation: brilho .7s ease; }
@keyframes brilho { to { left: 130%; } }
.btn-ciano:hover, .btn-primario:hover { transform: translateY(-2px); }

/* ---------- Faixa CTA com fundo vivo ---------- */
.faixa-cta { position: relative; overflow: hidden; }
.faixa-cta::after {
  content: ""; position: absolute; inset: -50% -10% auto auto; width: 60%; aspect-ratio: 1;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(111,211,220,.22) 0 2px, transparent 2px 18px);
  animation: gira 40s linear infinite; pointer-events: none;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Seção escura com ondas ---------- */
.sec-marinho { position: relative; overflow: hidden; }
.sec-marinho::before {
  content: ""; position: absolute; left: -10%; top: -60%; width: 50%; aspect-ratio: 1;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(205,239,244,.14) 0 1.5px, transparent 1.5px 16px);
  animation: gira 60s linear infinite reverse; pointer-events: none;
}
.sec-marinho .container { position: relative; z-index: 1; }

/* ---------- Equipe: foto que respira ---------- */
.pessoa { overflow: hidden; }
.pessoa img { transition: transform .5s cubic-bezier(.2,.7,.3,1), filter .4s; }
.pessoa:hover img { transform: scale(1.06); }

/* ---------- Barra de progresso da leitura ---------- */
.progresso {
  position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 60;
  background: linear-gradient(90deg, var(--ciano), var(--ciano-claro));
  transition: width .1s linear;
}

/* ---------- WhatsApp com pulso ---------- */
.zap-flutuante::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; animation: pulso-zap 2.4s ease-out infinite;
}
@keyframes pulso-zap {
  0% { transform: scale(1); opacity: .7; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-revela] { opacity: 1 !important; transform: none !important; }
  .hero-canvas { display: none; }
  .faixa-cta::after, .sec-marinho::before, .zap-flutuante::before { animation: none; }
  .btn:hover::after { animation: none; }
}