/**
 * ============================================================
 * MAIN.CSS — Archivo Principal de Estilos
 * Arquitectura modular 4-capas: config → base → layout → components
 * Verde Encanto — Sistema de Diseño Moderno
 * ============================================================
 * 
 * ORDEN DE IMPORTACIÓN (CRÍTICO):
 * 1. config/ — Tokens y variables del sistema de diseño
 * 2. base/ — Reset, tipografía y elementos base
 * 3. layout/ — Grid, header, footer, sidebar
 * 4. components/ — Botones, tarjetas, formularios, etc.
 * 
 * NO ALTERAR EL ORDEN DE IMPORTACIÓN SIN Mapear DEPENDENCIAS
 * ============================================================
 */

/* --------------------------------------------------
   CAPA 1: CONFIG — Sistema de Tokens
   -------------------------------------------------- */
@import url('./config/tokens.css');

/* --------------------------------------------------
   CAPA 2: BASE — Reset & Tipografía
   -------------------------------------------------- */
@import url('./base/reset.css');
@import url('./base/typography.css');
@import url('./base/elements.css');

/* --------------------------------------------------
   CAPA 3: LAYOUT — Estructura del sitio
   -------------------------------------------------- */
@import url('./layout/grid.css');
@import url('./layout/header.css');
@import url('./layout/footer.css');
@import url('./layout/sidebar.css');

/* --------------------------------------------------
   CAPA 4: COMPONENTS — Componentes UI
   -------------------------------------------------- */
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/forms.css');
@import url('./components/navigation.css');
@import url('./components/modals.css');
@import url('./components/tables.css');
@import url('./components/emerald-particles.css');
@import url('./components/home-global.css?v=2');
@import url('./components/home-hero.css');
@import url('./components/home-categories.css?v=3');
@import url('./components/home-products.css');
@import url('./components/home-benefits.css');
@import url('./components/home-testimonials.css');
@import url('./components/home-trust.css');
@import url('./components/shop-filters.css');
@import url('./components/blog.css');

/* --------------------------------------------------
   ESPECIFICIDAD WORDPRESS — WRAPPERS
   -------------------------------------------------- */
/* 
   NOTA: Estilos para clases de WordPress deben usar 
   wrapper de especificidad para evitar romper 
   Gutenberg y clases nativas de WordPress
   
   INCORRECTO: .wp-block-image { ... }
   CORRECTO: .verde-encanto .wp-block-image { ... }
*/

.verde-encanto {
  /* Contenedor principal para estilos específicos del tema */
}

/* --------------------------------------------------
   COMENTARIOS DE AUDITORÍA
   -------------------------------------------------- */
/*
  SELECTORES EN CUARENTENA (verificar antes de eliminar):
  
  - .woocommerce-* clases (WooCommerce)
  - .wp-block-* clases (Gutenberg)
  - .entry-* clases (WordPress core)
  - .site-* clases (WordPress core)
  - .ast-* clases (Tema padre Astra)
  
  Estos selectores pueden ser inyectados dinámicamente
  por WordPress, plugins o el tema padre. No eliminar
  sin verificar uso activo en el sitio.
*/

/* --------------------------------------------------
   VARIABLES DE AUDITORÍA
   -------------------------------------------------- */
/*
  MODO DEPURACIÓN: Descomentar para visualizar problemas
  
  .debug-grid { background-image: linear-gradient(to right, rgba(0,0,0,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.1) 1px, transparent 1px); background-size: 20px 20px; }
  
  .debug-spec { outline: 2px solid red !important; }
  
  .debug-outline * { outline: 1px solid rgba(255,0,0,0.5); }
*/