/* ============================================================================
   ESTILOS CUSTOMIZADOS — Landing Page Dr. Arlindo Ricon Jr.
   (complementa o Tailwind; o tema/paleta fica no tailwind.config em index.html)
   ============================================================================ */

:root { --ease: cubic-bezier(.22,.61,.36,1); }

html, body { font-family: 'Hanken Grotesk', system-ui, sans-serif; }
body { background-color: #F2F7FB; color: #142a3d; -webkit-font-smoothing: antialiased; }

/* Pequeno respiro ao navegar por âncoras (header não é mais fixo) */
section[id] { scroll-margin-top: 24px; }

/* Títulos: serifada com tracking levemente fechado */
.font-display { font-family: 'Fraunces', Georgia, serif; letter-spacing: -0.01em; }

/* ---- TEXTURA DE GRÃO (sutil) sobre toda a página, sem bloquear cliques -- */
.grain::before {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- MALHAS DE GRADIENTE (atmosfera suave azul em fundos claros) ------ */
.mesh-warm {
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(79,149,198,0.18), transparent 60%),
    radial-gradient(55% 45% at 5% 15%, rgba(216,232,243,0.55), transparent 55%);
}

/* ---- FAIXA / MARQUEE rolante ---------------------------------------- */
.marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-pause:hover .marquee { animation-play-state: paused; }

/* ---- REVELAÇÃO SUAVE AO ROLAR (fade-up) ------------------------------ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- BOTÃO WHATSAPP: anel de pulso ---------------------------------- */
.wpp-pulse::before {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: #25D366; z-index: -1; animation: pulse-ring 2.2s var(--ease) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(1.9); opacity: 0;   }
  100% { transform: scale(1.9); opacity: 0;   }
}

/* ---- ACORDEÃO FAQ: animação de altura suave ------------------------- */
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq-item.open .faq-panel { grid-template-rows: 1fr; }
.faq-panel > div { overflow: hidden; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ---- Detalhes finos ------------------------------------------------- */
.tracking-mega { letter-spacing: .28em; }
.card-hover { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.card-hover:hover { transform: translateY(-6px); }

/* Respeita usuários que preferem menos movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .marquee, .wpp-pulse::before { animation: none !important; }
  html { scroll-behavior: auto; }
}