/* Colores principales */
:root {
  --color-primario: #2d5016; /* Verde oscuro - naturaleza/suelo */
  --color-secundario: #7dad3c; /* Verde claro */
  --color-acento: #d97706; /* Naranja tierra */
  --color-texto: #1f2937;
  --color-fondo: #ffffff;
}

/* Botones */
.ast-button,
.button,
button[type="submit"] {
  background-color: var(--color-primario) !important;
  color: white !important;
  border-radius: 6px;
  padding: 12px 24px;
  transition: all 0.3s ease;
}

.ast-button:hover,
.button:hover {
  background-color: var(--color-secundario) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Enlaces */
a {
  color: var(--color-primario);
}

a:hover {
  color: var(--color-secundario);
}

/* Encabezados */
h1, h2, h3 {
  color: var(--color-primario);
}
```

---

## 🔧 **PASO 2: PLUGINS GRATUITOS NECESARIOS**

Como usas Astra Free, necesitarás estos plugins para compensar:

### **Esenciales:**
1. **Spectra** (antes Ultimate Addons for Gutenberg)
   - Es GRATIS y muy potente
   - Alternativa a Elementor Pro
   - Perfecto para diseñar páginas bonitas

2. **Stripe Payments** (by WP Simple Pay)
   - Para integrar los botones de pago de Stripe
   - Versión gratuita es suficiente

3. **Contact Form 7**
   - Para formularios de contacto/inscripción

### **Opcionales pero recomendados:**
4. **TranslatePress** (versión free)
   - Para el sitio multiidioma (NL/EN/ES)
   
5. **Kadence Blocks**
   - Alternativa/complemento a Spectra
   - Muy visual, fácil de usar

---

## 📄 **PASO 3: ESTRUCTURA DE MENÚ SIMPLIFICADA (para Astra Free)**

Recomiendo esta estructura más simple:
```
Home
Cursussen (Dropdown)
  ├── Bodemvoedselweb (NL)
  ├── Biopesticides (EN)
  └── Control Biológico (ES)
Coaching
Over Ons
Contact
```

### **Cómo crear el menú:**

1. Ve a: **Apariencia → Menús**
2. Crea un menú llamado "Main Menu"
3. Añade las páginas (primero créalas como borradores)
4. Para crear el dropdown:
   - Arrastra "Bodemvoedselweb" ligeramente a la DERECHA debajo de "Cursussen"
   - Verás que se indenta → eso crea el submenu
5. Asigna el menú a: **Primary Menu**

---

## 🏗️ **PASO 4: DISEÑAR LA HOMEPAGE CON SPECTRA (paso a paso)**

### **Instala Spectra primero:**
1. **Plugins → Añadir nuevo**
2. Busca "Spectra"
3. Instala y activa

### **Crear la Homepage:**

1. **Páginas → Añadir nueva**
2. Título: "Home"
3. Haz clic en el **+** (Añadir bloque)
4. Busca **"Spectra"** en el buscador de bloques

### **Hero Section (Sección principal):**

1. Añade bloque: **Spectra → Container**
2. En el panel derecho:
   - **Background:** Sube una imagen de microscopio o suelo
   - **Overlay:** Activa y pon opacidad 50-70%
   - **Padding:** Top 100px, Bottom 100px
3. Dentro del Container, añade:
   - **Spectra → Heading:** "Descubre el mundo invisible del suelo"
   - **Spectra → Paragraph:** Tu subtítulo
   - **Spectra → Buttons:** "Bekijk cursussen" (enlaza a /cursussen)

### **Sección de Cursos (3 columnas):**

1. Añade: **Spectra → Container**
2. Dentro, añade: **Columnas** (selecciona 3 columnas)
3. En cada columna añade:
   - **Spectra → Info Box:**
     - Icono (🔬, 📋, 🐞)
     - Título del curso
     - Descripción breve
     - Botón "Meer info"

**Truco:** Copia y pega la primera columna 2 veces para ahorrar tiempo.

### **Sección de Testimonios:**

1. Añade: **Spectra → Testimonial**
2. Rellena con testimonios de tus estudiantes

---

## 💳 **PASO 5: INTEGRAR STRIPE (sin WooCommerce)**

### **Opción A: WP Simple Pay (Recomendada - GRATIS)**

1. **Instala:** WP Simple Pay Lite
2. **Configura:**
   - Ve a: **Simple Pay Lite → Settings**
   - Conecta tu cuenta de Stripe
   - Modo: **Live** (cuando estés listo)
3. **Crear botón de pago:**
   - Ve a: **Simple Pay → Add New**
   - Nombre: "Bodemvoedselweb Cursus - Volledig"
   - Precio: €900
   - Copia el shortcode: `[simpay id="123"]`
4. **Pegar en tu página:**
   - Edita la página del curso
   - Añade bloque **Shortcode**
   - Pega el código

### **Opción B: Links directos de Stripe (más simple)**

Si ya tienes links de pago de Stripe (como en tus cursos españoles):

1. Crea un botón en Spectra
2. Enlaza directamente a tu link de Stripe Payment
3. Ejemplo: `https://buy.stripe.com/tu-codigo-aqui`

---

## 📱 **PASO 6: PÁGINA "BODEMVOEDSELWEB" (La más importante)**

### **Plantilla sugerida:**
```
[HERO IMAGE]
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🔬 BODEMVOEDSELWEB MICROSCOPIE CURSUS
"Leer de wereld onder je voeten begrijpen"
Start: Februari 2026 | Online via Zoom
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

[SECCIÓN: WAT GA JE LEREN?]
10 modules met praktische kennis:
├ Module 1: Microscopie & Apparatuur
├ Module 2: Introductie Bodemvoedselweb
├ Module 3: Bacteriën
[... lista completa]

[SECCIÓN: TARIEVEN] (Con tabla visual)
┌─────────────────────────────────┐
│ Individuele module    │ €100    │
│ Volledige cursus      │ €900    │
│ Optionele labdag      │ €150-200│
└─────────────────────────────────┘

[BOTONES DE PAGO]
[Betaal voor volledige cursus - €900] [Betaal per module - €100]

[FAQ SECTION]
▼ Wat heb ik nodig voor de cursus?
▼ Kan ik later starten?
▼ Krijg ik een certificaat?

[CTA FINAL]
Vragen? → info@vandersteensolutions.com