/*
Theme Name: VANTTÉ SKIN
Theme URI: https://vantte-glow-revival.lovable.app
Author: VANTTÉ SKIN
Author URI: https://vantte-glow-revival.lovable.app
Description: Tema WordPress da landing page VANTTÉ SKIN — sérum 1% GHK-Cu Copper Peptide. Visual luxuoso, mobile-first, com sistema de design baseado em Tailwind CSS (carregado via CDN).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vantte-skin
Tags: landing-page, one-page, custom-colors, custom-logo, translation-ready
*/

/* ==========================================================================
   VANTTÉ SKIN — Design tokens (HSL) e utilitários
   Tailwind é carregado via CDN em functions.php; este arquivo define
   variáveis CSS, fontes, classes utilitárias e animações personalizadas.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --background: 220 25% 5%;
  --foreground: 210 40% 98%;
  --card: 220 25% 8%;
  --card-foreground: 210 40% 98%;
  --popover: 220 25% 8%;
  --popover-foreground: 210 40% 98%;
  --primary: 210 100% 50%;
  --primary-foreground: 210 40% 98%;
  --secondary: 220 20% 14%;
  --secondary-foreground: 210 40% 98%;
  --muted: 220 20% 14%;
  --muted-foreground: 215 20% 65%;
  --accent: 200 100% 60%;
  --accent-foreground: 220 25% 5%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 215 25% 18%;
  --input: 215 25% 18%;
  --ring: 210 100% 50%;
  --radius: 0.75rem;
  --glow: 200 100% 60%;
  --silver: 220 10% 75%;
  --silver-light: 220 10% 90%;
  --deep-blue: 220 60% 15%;
  --neon-blue: 200 100% 55%;
  --gradient-hero: linear-gradient(135deg, hsl(220 25% 5%) 0%, hsl(220 40% 10%) 50%, hsl(210 50% 12%) 100%);
  --gradient-cta: linear-gradient(135deg, hsl(210 100% 50%) 0%, hsl(200 100% 60%) 100%);
  --gradient-glow: radial-gradient(ellipse at center, hsl(200 100% 60% / 0.15) 0%, transparent 70%);
  --shadow-glow: 0 0 40px hsl(200 100% 60% / 0.3);
  --shadow-glow-strong: 0 0 80px hsl(200 100% 60% / 0.4);
}

html, body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }

/* Componentes */
.glow-text   { text-shadow: 0 0 20px hsl(var(--glow) / 0.5), 0 0 40px hsl(var(--glow) / 0.3); }
.glow-border { box-shadow: 0 0 15px hsl(var(--glow) / 0.3), inset 0 0 15px hsl(var(--glow) / 0.1); border: 1px solid hsl(var(--glow) / 0.3); }
.glass-card  { background: hsl(var(--card) / 0.6); backdrop-filter: blur(20px); border: 1px solid hsl(var(--border) / 0.5); }
.gradient-text {
  background: linear-gradient(135deg, hsl(var(--silver-light)), hsl(var(--accent)));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.particle-bg { position: relative; overflow: hidden; }
.particle-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, hsl(var(--glow) / 0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 60%, hsl(var(--glow) / 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 10%, hsl(var(--glow) / 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 40%, hsl(var(--glow) / 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 80%, hsl(var(--glow) / 0.4) 0%, transparent 100%),
    radial-gradient(2px 2px at 20% 70%, hsl(var(--glow) / 0.2) 0%, transparent 100%),
    radial-gradient(2px 2px at 60% 30%, hsl(var(--glow) / 0.2) 0%, transparent 100%),
    radial-gradient(2px 2px at 80% 60%, hsl(var(--glow) / 0.3) 0%, transparent 100%);
  animation: float-particles 8s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
.section-glow { position: relative; }
.section-glow::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 60%; height: 60%; background: var(--gradient-glow); pointer-events: none; z-index: 0;
}

/* Utilitários */
.text-silver       { color: hsl(var(--silver)); }
.text-silver-light { color: hsl(var(--silver-light)); }
.text-glow         { color: hsl(var(--glow)); }
.bg-deep-blue      { background-color: hsl(var(--deep-blue)); }

/* Animações */
@keyframes float-particles { 0%,100% { transform: translateY(0); opacity:.6 } 50% { transform: translateY(-20px); opacity:1 } }
@keyframes pulse-glow      { 0%,100% { box-shadow: 0 0 20px hsl(var(--glow)/.3) } 50% { box-shadow: 0 0 40px hsl(var(--glow)/.6) } }
@keyframes fade-up         { from { opacity:0; transform: translateY(30px) } to { opacity:1; transform: translateY(0) } }

.animate-fade-up         { animation: fade-up .8s ease-out forwards; }
.animate-fade-up-delay-1 { animation: fade-up .8s ease-out .2s forwards; opacity:0; }
.animate-fade-up-delay-2 { animation: fade-up .8s ease-out .4s forwards; opacity:0; }
.animate-fade-up-delay-3 { animation: fade-up .8s ease-out .6s forwards; opacity:0; }
.animate-pulse-glow      { animation: pulse-glow 3s ease-in-out infinite; }

/* FAQ accordion (sem JS de framework) */
.vantte-faq details { border: 1px solid hsl(var(--border) / 0.5); background: hsl(var(--card) / 0.6); backdrop-filter: blur(20px); border-radius: 0.75rem; padding: 1rem 1.5rem; margin-bottom: .75rem; }
.vantte-faq summary { cursor: pointer; list-style: none; font-weight: 600; padding: .75rem 0; color: hsl(var(--foreground)); }
.vantte-faq summary::-webkit-details-marker { display: none; }
.vantte-faq summary::after { content: '+'; float: right; color: hsl(var(--glow)); font-size: 1.5rem; line-height: 1; }
.vantte-faq details[open] summary::after { content: '−'; }
.vantte-faq details p { color: hsl(var(--muted-foreground)); padding-bottom: 1rem; line-height: 1.6; }