/*
Theme Name: Bellezza i Aroma - Moda Plus Size
Theme URI: https://bellezzaiaroma.com.br
Description: Tema WordPress profissional para captação de leads do grupo VIP Bellezza i Aroma. Design maximalist colorido com integração Meta Pixel.
Version: 1.0.0
Author: Bellezza i Aroma
Author URI: https://bellezzaiaroma.com.br
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bellezza-iaroma
Domain Path: /languages
Requires at least: 5.9
Requires PHP: 7.4
*/

/* ============================================
   DESIGN PHILOSOPHY: Maximalist Colorido & Inclusivo
   ============================================
   
   This theme celebrates diversity through vibrant colors (magenta, coral, turquoise, golden yellow, deep purple),
   asymmetric layouts, and expressive typography. Every element reinforces the brand's message of confidence and inclusion.
   
   Color Palette:
   - Magenta (#E91E63): Primary brand color, energy, confidence
   - Coral (#FF6B6B): Secondary accent, warmth, celebration
   - Turquoise (#00BCD4): Tertiary accent, freshness, inclusivity
   - Golden Yellow (#FFD700): Highlights, luxury, joy
   - Deep Purple (#9C27B0): Depth, sophistication, femininity
   
   Typography:
   - Display: Poppins Bold (titles, large text)
   - Body: Inter Regular (readable, clean)
   - Accent: Playfair Display (special sections)
*/

:root {
  --primary-magenta: #E91E63;
  --secondary-coral: #FF6B6B;
  --tertiary-turquoise: #00BCD4;
  --accent-yellow: #FFD700;
  --accent-purple: #9C27B0;
  --text-dark: #1a1a1a;
  --text-light: #666666;
  --bg-light: #f5f5f5;
  --bg-white: #ffffff;
  --border-color: #e0e0e0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-dark);
  background-color: var(--bg-white);
  line-height: 1.6;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

p {
  margin-bottom: 1rem;
  color: var(--text-light);
}

a {
  color: var(--primary-magenta);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  opacity: 0.8;
}

/* Containers */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2rem;
  }
}

/* Gradients */
.text-gradient {
  background: linear-gradient(135deg, var(--primary-magenta), var(--secondary-coral), var(--accent-yellow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-rainbow {
  background: linear-gradient(135deg, 
    rgba(233, 30, 99, 0.1), 
    rgba(255, 107, 107, 0.1), 
    rgba(0, 188, 212, 0.1), 
    rgba(255, 215, 0, 0.1), 
    rgba(156, 39, 176, 0.1));
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-magenta), var(--secondary-coral));
  color: white;
}

.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(233, 30, 99, 0.3);
}

.btn-white {
  background: white;
  color: var(--text-gradient);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.btn-white:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* Sections */
section {
  padding: 5rem 0;
}

@media (max-width: 768px) {
  section {
    padding: 3rem 0;
  }
}

/* Grid */
.grid {
  display: grid;
  gap: 2rem;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Cards */
.card {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Icons */
.icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.icon-magenta {
  background: rgba(233, 30, 99, 0.1);
  color: var(--primary-magenta);
}

.icon-turquoise {
  background: rgba(0, 188, 212, 0.1);
  color: var(--tertiary-turquoise);
}

.icon-yellow {
  background: rgba(255, 215, 0, 0.1);
  color: var(--accent-yellow);
}

/* Responsive */
@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.text-white {
  color: white;
}

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }

.py-1 { padding: 1rem 0; }
.py-2 { padding: 2rem 0; }
.py-3 { padding: 3rem 0; }
.py-4 { padding: 4rem 0; }

.flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 2rem;
}

.gap-3 {
  gap: 3rem;
}

.hidden {
  display: none;
}

@media (min-width: 768px) {
  .md\:block {
    display: block;
  }
  
  .md\:hidden {
    display: none;
  }
}