@charset "UTF-8";
/* ============================================================
   MAIN.CSS - Archivo Principal de Estilos
   ============================================================
   Este archivo importa todos los módulos CSS en el orden
   correcto para garantizar la cascada apropiada.

   ESTRUCTURA DEL PROYECTO CSS:
   ├── css/
   │   ├── base/
   │   │   ├── _variables.css    → Variables CSS (:root)
   │   │   └── _reset.css        → Reset y estilos base
   │   ├── layout/
   │   │   ├── _container.css    → Sistema de contenedores
   │   │   └── _grid.css         → Sistema de grid
   │   ├── components/
   │   │   ├── _buttons.css      → Botones
   │   │   └── _images.css       → Imágenes y media
   │   ├── utilities/
   │   │   └── _utilities.css    → Clases utilitarias
   │   └── main.css              → Este archivo (imports)

   ENFOQUE: Mobile-First con Diseño Fluido Automatizado
   ============================================================ */

/* --------------------------------------------------------
   1. BASE - Variables y Reset
   --------------------------------------------------------
   Primero cargamos las variables CSS que definen todo el
   sistema de diseño, seguido del reset que normaliza los
   estilos del navegador.
   -------------------------------------------------------- */
@import url('./base/_variables.css');
@import url('./base/_reset.css');

/* --------------------------------------------------------
   2. LAYOUT - Contenedores y Grid
   --------------------------------------------------------
   El sistema de layout que controla la estructura general
   de la página: contenedores, grids y breakpoints.
   -------------------------------------------------------- */
@import url('./layout/_container.css');
@import url('./layout/_grid.css');

/* --------------------------------------------------------
   3. COMPONENTES - UI Elements
   --------------------------------------------------------
   Componentes reutilizables de la interfaz: botones,
   imágenes, formularios, cards, etc.
   -------------------------------------------------------- */
@import url('./components/_buttons.css');
@import url('./components/_images.css');
@import url('./components/_navbar.css');
@import url('./components/_badge.css');
@import url('./components/_hero.css?v=44');
@import url('./components/_solutions.css?v=44');
@import url('./components/_platform.css');
@import url('./components/_stats.css');
@import url('./components/_simple.css');
@import url('./components/_testimonials.css');
@import url('./components/_pricing.css');
@import url('./components/_faq.css');
@import url('./components/_coverage.css');
@import url('./components/_footer.css');
@import url('./components/_blog.css');
@import url('./components/_trial-hero.css');
@import url('./components/_skeleton.css');

/* --------------------------------------------------------
   4. UTILIDADES - Helpers
   --------------------------------------------------------
   Clases de utilidad de bajo nivel para ajustes rápidos.
   Se cargan al final para mayor especificidad.
   -------------------------------------------------------- */
@import url('./utilities/_utilities.css');

/* ============================================================
   REFERENCIA RÁPIDA DE BREAKPOINTS
   ============================================================

   MOBILE (Estilos Base)
   └── 0px - 767px
   └── Grid: 4 columnas, gutter 16px
   └── Container: fluido, padding 16px

   TABLET
   └── @media (min-width: 768px)
   └── Grid: 8 columnas, gutter 20px
   └── Container: fluido, padding 24px

   DESKTOP
   └── @media (min-width: 1025px)
   └── Grid: 12 columnas, gutter 24px
   └── Container: max-width 1200px

   DESKTOP MEDIUM
   └── @media (min-width: 1366px)

   DESKTOP LARGE
   └── @media (min-width: 1920px)

   ============================================================ */

/* ============================================================
   TIPOGRAFÍA FLUIDA - Referencia
   ============================================================

   Los tamaños de fuente usan clamp() para escalar
   automáticamente entre móvil (375px) y desktop (1440px):

   H1: 32px → 56px
   H2: 24px → 40px
   H3: 20px → 28px
   H4: 18px → 22px
   Body: 16px → 18px

   ============================================================ */