/* =============================================
   Uai Tuga — Estilos customizados
   Complementa o Tailwind CSS (via CDN)
   ============================================= */

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Hero gradient overlay */
.hero-gradient {
  background: linear-gradient(
    to right,
    rgba(255, 248, 245, 1) 25%,
    rgba(255, 248, 245, 0.7) 60%,
    transparent 100%
  );
}
@media (max-width: 768px) {
  .hero-gradient {
    background: linear-gradient(
      to bottom,
      rgba(255, 248, 245, 0.95) 30%,
      rgba(255, 248, 245, 0.6) 100%
    );
  }
}

/* FAQ Accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.open .faq-answer {
  max-height: 300px;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
}
.faq-icon {
  transition: transform 0.3s ease;
}

/* Linha decorativa dourada */
.gold-line {
  background: linear-gradient(to right, transparent, #C5A059, transparent);
  height: 1px;
}

/* Esconder scrollbar horizontal (reels mobile) */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* =============================================
   ANIMAÇÕES
   ============================================= */

/* ---------- Hero — carregamento ---------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes headerDrop {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
header {
  animation: headerDrop 0.65s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-badge   { animation: heroFadeUp 0.75s 0.25s cubic-bezier(0.16,1,0.3,1) both; }
.hero-title   { animation: heroFadeUp 0.85s 0.45s cubic-bezier(0.16,1,0.3,1) both; }
.hero-desc    { animation: heroFadeUp 0.85s 0.65s cubic-bezier(0.16,1,0.3,1) both; }
.hero-actions { animation: heroFadeUp 0.85s 0.85s cubic-bezier(0.16,1,0.3,1) both; }

/* Parallax da imagem hero */
.hero-img-parallax {
  transform: scale(1.1) translateY(0);
  will-change: transform;
  transition: none;
}

/* ---------- Scroll reveal ---------- */
.anim-up {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.anim-left {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.anim-right {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.anim-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1),
              transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.anim-revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger delays */
.anim-d1 { transition-delay: 0.06s; }
.anim-d2 { transition-delay: 0.13s; }
.anim-d3 { transition-delay: 0.20s; }
.anim-d4 { transition-delay: 0.27s; }
.anim-d5 { transition-delay: 0.34s; }
.anim-d6 { transition-delay: 0.42s; }

/* ---------- Gold shimmer nos badges ---------- */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.badge-shimmer {
  display: inline-block;
  background: linear-gradient(90deg, #C5A059 25%, #f5dfa0 50%, #C5A059 75%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 4s linear infinite;
}

/* ---------- FAB pulse ---------- */
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55); }
  60%       { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
}
.fab-pulse { animation: fabPulse 2.8s ease-in-out infinite; }

/* ---------- Premium card — floating ---------- */
@keyframes cardFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
.card-float {
  animation: cardFloat 4.5s ease-in-out infinite;
}
.card-float:hover { animation-play-state: paused; }

/* ---------- Stories carousel mobile ---------- */
@media (max-width: 767px) {
  #stories-grid {
    gap: 0 !important;
    padding-bottom: 0 !important;
    scroll-behavior: smooth;
  }
  #stories-grid > div {
    min-width: 100% !important;
    width: 100% !important;
    padding: 0 4px;
    box-sizing: border-box;
  }
  .stories-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #c1c8c2;
    transition: background 0.3s, width 0.3s;
    flex-shrink: 0;
  }
  .stories-dot.active {
    background: #C5A059;
    width: 24px;
    border-radius: 4px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Mobile — toque amigável */
@media (max-width: 768px) {
  /* Botões com área mínima de toque de 48px */
  a, button { min-height: 44px; }

  /* Texto hero menor em telas muito pequenas */
  h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }

  /* Cards de preço — padding reduzido */
  .rounded-3xl { border-radius: 1rem; }

  /* Vídeo card T3 — centralizado e proporcional */
  #t3-card { max-width: 220px !important; }

  /* FAQ trigger — padding adequado para toque */
  .faq-trigger { padding: 1.25rem 1.5rem; }
}