/* ============================================================
   PH Site - Estilos globais complementares ao Tailwind CDN
   ============================================================ */

:root {
  --primary:   hsl(330, 85%, 55%);
  --secondary: hsl(270, 60%, 55%);
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;
}

/* ── Scroll & overflow ─────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }

/* ── Círculo giratório do hero ─────────────────────────────────────────────── */
@keyframes spin-border {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
@keyframes badge-pop {
  0%   { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

.hero-ring-wrap {
  position: relative;
  width: 380px;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hero-float 4s ease-in-out infinite;
}

/* anel externo giratório */
.hero-ring-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    hsl(330,85%,70%),
    hsl(300,70%,65%),
    hsl(270,60%,65%),
    hsl(200,80%,70%),
    hsl(270,60%,65%),
    hsl(330,85%,70%)
  );
  animation: spin-border 3.5s linear infinite;
  filter: blur(1px);
}
/* anel interno para mascarar o meio e deixar só a borda */
.hero-ring-wrap::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.18);
  z-index: 2;
  pointer-events: none;
}

.hero-ring-photo {
  width: 358px;
  height: 358px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

.hero-ring-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* badges flutuantes ao redor da foto */
.hero-badge {
  position: absolute;
  z-index: 10;
  background: rgba(255,255,255,0.95);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: badge-pop 0.6s ease forwards;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.hero-badge-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hero-badge-label { font-size: 11px; color: #888; font-weight: 500; }
.hero-badge-value { font-size: 15px; font-weight: 800; color: #111; font-family: 'Poppins', sans-serif; line-height: 1.1; }

/* ── partículas decorativas do hero ─────────────────────────────────────────── */
@keyframes particle-float {
  0%, 100% { transform: translateY(0) scale(1);   opacity: .5; }
  50%       { transform: translateY(-20px) scale(1.1); opacity: .8; }
}
.hero-particle {
  position: absolute;
  border-radius: 50%;
  animation: particle-float linear infinite;
  pointer-events: none;
}

/* ── responsividade do hero ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-ring-wrap   { width: 300px; height: 300px; }
  .hero-ring-photo  { width: 282px; height: 282px; }
  .hero-badge       { display: none; }           /* esconde badges em tablet */
}
@media (max-width: 640px) {
  .hero-ring-wrap   { width: 220px; height: 220px; }
  .hero-ring-photo  { width: 206px; height: 206px; }
  .hero-title       { font-size: 1.7rem !important; line-height: 1.25; }
  .hero-btn         { font-size: .95rem !important; padding: .8rem 1.4rem !important; }
}

/* ── Botão flutuante WhatsApp ─────────────────────────────────────────────── */
@keyframes float-bounce {
  0%, 100% { transform: translateY(0)    scale(1);    }
  25%       { transform: translateY(-12px) scale(1.05); }
  50%       { transform: translateY(-4px)  scale(1);    }
  75%       { transform: translateY(-8px)  scale(1.02); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0   rgba(37,211,102,0.7); }
  50%       { box-shadow: 0 0 0 18px rgba(37,211,102,0);   }
}
.whatsapp-float {
  animation: float-bounce 2s ease-in-out infinite,
             pulse-glow   1.5s ease-in-out infinite;
}

/* ── Animações de scroll ─────────────────────────────────────────────────── */
.fade-in-up {
  opacity: 0; transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

.fade-in-left {
  opacity: 0; transform: translateX(-30px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in-left.visible { opacity: 1; transform: translateX(0); }

.fade-in-right {
  opacity: 0; transform: translateX(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in-right.visible { opacity: 1; transform: translateX(0); }

/* ── Gradiente de texto ─────────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(to right, hsl(330,85%,55%), hsl(270,60%,55%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Cookie banner ──────────────────────────────────────────────────────── */
@keyframes slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
#cookie-banner { animation: slide-up .4s ease forwards; }

/* ── Spinners ───────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 20px; height: 20px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  display: inline-block;
}
.admin-spinner {
  width: 24px; height: 24px;
  border: 3px solid #cc0000;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ── Admin: gráficos em coluna no mobile ────────────────────────────────── */
@media (max-width: 640px) {
  .admin-charts-row { grid-template-columns: 1fr !important; }
}