/* file: flowtitude.css */

/* =============================================================================
   CONFIGURACIÓN BASE DEL SISTEMA FLOWTITUDE
   =============================================================================
   
   Variables fundamentales que definen el comportamiento base del sistema.
   Estas variables se configuran en @layer base para tener la máxima prioridad
   y pueden ser sobrescritas por temas específicos o configuraciones de proyecto.
   
   ============================================================================= */

@layer base {

     html, body {
		font-size: 100%;
		overflow-x: hidden;
	}
   .footer.div {
            @apply max-w-full;
         };

    :root {
        
         /* =====================================================================
           SISTEMA TIPOGRÁFICO BASE
           ===================================================================== */
        
          /* Viewport breakpoints */
         --viewport-min: 410px;
         --viewport-max: 1280px;

         /* Base text size */
         --ft-text-min: 1rem;
         --ft-text-max: 1.125rem;
         --ft-text-value: clamp(
            var(--ft-text-min),
            calc(var(--ft-text-min) + (var(--ft-text-max) - var(--ft-text-min)) * (100cqi - 41cqi) / 87cqi),
            var(--ft-text-max)
         );

         /* Scale factor */
         --ft-scale-min: 1.125;
         --ft-scale-max: 1.2;
         --ft-scale-diff: calc(var(--ft-scale-max) - var(--ft-scale-min));
         --ft-text-scale: clamp(
            var(--ft-scale-min),
            calc(var(--ft-scale-min) + var(--ft-scale-diff) * (100vw - var(--viewport-min)) / (var(--viewport-max) - var(--viewport-min))),
            var(--ft-scale-max)
         );

         /* Text factor */
         --ft-text-factor: 1;

        /* =====================================================================
           SISTEMA DE ESPACIADO BASE
           ===================================================================== */
        
        /**
         * Valor base de espaciado responsive
         * Escala de 18px a 24px basada en el viewport
         * Este valor es la base para todo el sistema de espaciado
         */
        --ft-space-value: clamp(1.125rem, 0.9483rem + 0.6897cqi, 1.5rem);
        
        /**
         * Factor de escalado para espaciado
         * 1.5 = Progresión geométrica que crea jerarquía visual clara
         * Cada nivel es 50% mayor que el anterior
         */
        --ft-space-scale: 1.5;
        
        /**
         * Multiplicador global de espaciado
         * Permite ajustar todo el espaciado proporcionalmente
         * 1 = espaciado normal, 1.2 = 20% más espacioso, 0.8 = 20% más compacto
         */
        --ft-space-factor: 1;

        /**
         * Variables base para cada contexto de espaciado
         * Estos son los valores semilla que se escalan para crear las familias completas
         */
        
        /** Espaciado para contenido relacionado (elementos muy cercanos) */
        --spacing-content-base: calc(var(--ft-space-value) * 0.5);  /*  ~9px / ~12px */
        
        /** Espaciado entre componentes separados */
        --spacing-block-base: calc(var(--ft-space-value) * 0.75);    /* ~14px / ~18px */
        
        /** Espaciado para layout horizontal (gaps de grid/flex) */
        --spacing-columns-base: calc(var(--ft-space-value) * 1);     /* ~18px / ~24px */
        
        /** Espaciado para separaciones principales (entre secciones) */
        --spacing-section-base: calc(var(--ft-space-value) * 2.5);   /* ~45px / ~60px */

        /* =====================================================================
           CONFIGURACIÓN DE CONTENEDOR
           ===================================================================== */
        
        /**
         * Ancho máximo del contenedor principal
         * Utiliza las variables de contenedor de Tailwind CSS
         * container-7xl = 80rem (1280px) por defecto
         */

         --ft-container: var(--container-7xl);
         /*--ft-container: 100%; */
        
        /**
         * Padding horizontal del contenido
         * Espacio mínimo en los laterales para evitar que el contenido toque los bordes
         */
        --ft-padding-content-x: 1.5rem;
        
        /**
         * Padding vertical del contenido
         * Espacio por defecto arriba y abajo del contenido principal
         */
        --ft-padding-content-y: var(--spacing-section);

         /**
         * Gap predeterminado para el contenido
         * Espacio por defecto para separar los elementos del contenido
         */
         --ft-container-gap: var(--spacing-block);

        /* =====================================================================
           COLORES BASE DEL SISTEMA
           ===================================================================== */
        
        /**
         * Color de texto por defecto
         * Gris medio que proporciona buen contraste sin ser negro puro
         */
        --ft-color-text: #5d5e5f;
        
        /**
         * Color de fondo por defecto
         * Blanco roto que es más suave que el blanco puro
         */
        --ft-color-background: #fff;

        /* =====================================================================
           TAMAÑOS DE TARJETAS/COMPONENTES
           ===================================================================== */
        
        /**
         * Anchos predefinidos para componentes tipo tarjeta
         * Útiles para galerías, grids de productos, etc.
         * Progresión lógica de tamaños comunes
         */
        --ft-card-xs: 9rem;   /* 192px - Muy pequeña */
        --ft-card-sm: 14rem;   /* 224px - Pequeña */
        --ft-card-md: 18rem;   /* 288px - Mediana (punto de partida) */
        --ft-card-lg: 24rem;   /* 384px - Grande */
        --ft-card-xl: 36rem;   /* 576px - Muy grande */
    }
}

/* =============================================================================
   CONFIGURACIÓN DE TEMA FLOWTITUDE
   =============================================================================
   
   Definición de variables del sistema de diseño que pueden ser sobrescritas
   por diferentes temas. Estas variables se declaran en @theme para permitir
   personalización por proyecto manteniendo la estructura base.
   
   ============================================================================= */

@theme {
   
     /* =========================================================================
       TIPOGRAFÍA DEL SISTEMA
       ========================================================================= */
    
    /**
     * Fuentes del sistema
     * font-body: Fuente para texto corrido y contenido general
     * font-display: Fuente para títulos y elementos destacados
     */
    --font-body: 'Space Grotesk';
    --font-display: 'Inter';

    /* =========================================================================
       PALETA DE COLORES
       ========================================================================= */
    
    /**
     * Paleta primaria - Rojos/Terracota
     * Escala completa de 50 (más claro) a 950 (más oscuro)
     * Basada en el color principal #d34d4d
     */
    
    --color-primary: var(--primary);
    --color-primary-500: var(--primary);
    --color-secondary: #d29955;
    --color-secondary-500: #d29955;
    --color-accent: #d29955;

    --color-brand-50:  #fffdf2;
    --color-brand-100: #faf8ed;
    --color-brand-200: #f4f0dd;
    --color-brand-300: #eae3c6;
    --color-brand-400: #dad4b7;
    --color-brand-500: #c5b984;
    --color-brand-600: #b2a671;
    --color-brand-700: #948958;
    --color-brand-800: #796f45;
    --color-brand-900: #5a522e;
    --color-brand-950: #403815;
   
    --color-secondary-100: var(--secondary);
    --color-secondary-500: var(--secondary);
    --color-secondary-700: var(--secondary);
    
    /**
     * Paleta secundaria - Naranjas/Dorados
     * Complementa la paleta primaria para crear contraste
     * Basada en el color principal #d29955
     */

     /* 
    --color-secondary-50: #c89151;
    --color-secondary-100: #bd8a4d;
    --color-secondary-200: #b38248;
    --color-secondary-300: #a87a44;
    --color-secondary-400: #9e7340;
    --color-secondary-500: #d29955;  
    --color-secondary-600: #936b3c;
    --color-secondary-700: #896337;
    --color-secondary-800: #7e5c33;
    --color-secondary-900: #74542f;
    --color-secondary-950: #694d2b;
     */
     
    /* =========================================================================
       INTERLINEADO (LINE HEIGHT)
       ========================================================================= */
    
    /**
     * Escala de interlineado para diferentes tipos de contenido
     * Valores en em para mantener proporcionalidad con el tamaño de fuente
     */
    --leading-none: 1em;      /* Sin espacio extra - para elementos gráficos */
    --leading-tight: 1.2em;   /* Apretado - para títulos grandes */
    --leading-snug: 1.375em;  /* Ajustado - para títulos medianos */
    --leading-normal: 1.5em;  /* Normal - para texto corrido (por defecto) */
    --leading-relaxed: 1.625em; /* Relajado - para texto largo */
    --leading-loose: 2em;     /* Espacioso - para texto muy legible */

    /* =========================================================================
       ESPACIADO BASE DE TAILWIND
       ========================================================================= */
    
    /**
     * Unidad básica de espaciado de Tailwind (equivale a space-1)
     * Todos los espaciados de Tailwind son múltiplos de este valor
     */
    --spacing: 0.25rem;



     --sidebar: clamp(18.750rem, calc(15.025rem + 12.469vw), 25.000rem);
     --spacing-sidebar: var(--sidebar);


    /* =========================================================================
       SISTEMA DE ESPACIADO SEMÁNTICO - CORREGIDO
       ========================================================================= */
    
    /**
     * ESPACIADO PARA CONTENIDO RELACIONADO
     * Para elementos que están estrechamente relacionados entre sí
     * Uso: texto relacionado, elementos de lista, campos de formulario
     */
    --spacing-content-2xs: calc(var(--spacing-content-base) / var(--ft-space-scale) / var(--ft-space-scale)); /* ~4px / ~5px */
    --spacing-content-xs:  calc(var(--spacing-content-base) / var(--ft-space-scale)); /* ~6px / ~8px */
    --spacing-content-sm:  calc(var(--spacing-content-base) / 1.2); /* ~7px / ~10px */
    --spacing-content-md:  var(--spacing-content-base); /* ~9px / ~12px - PUNTO DE PARTIDA */
    --spacing-content-lg:  calc(var(--spacing-content-base) * var(--ft-space-scale)); /* ~14px / ~18px */
    --spacing-content-xl:  calc(var(--spacing-content-lg) * var(--ft-space-scale)); /* ~20px / ~27px */
    --spacing-content-2xl: calc(var(--spacing-content-xl) * var(--ft-space-scale)); /* ~30px / ~41px */
    --spacing-content: var(--spacing-content-md); /* ALIAS para el valor por defecto */

    /**
     * ESPACIADO ENTRE COMPONENTES SEPARADOS
     * Para elementos que están relacionados pero son distintos componentes
     * Uso: entre tarjetas, entre secciones de formulario, entre párrafos
     */
    --spacing-block-2xs: calc(var(--spacing-block-base) / var(--ft-space-scale) / var(--ft-space-scale)); /* ~6px / ~8px */
    --spacing-block-xs:  calc(var(--spacing-block-base) / var(--ft-space-scale)); /* ~9px / ~12px */
    --spacing-block-sm:  calc(var(--spacing-block-base) / 1.2); /* ~12px / ~15px */
    --spacing-block-md:  var(--spacing-block-base); /* ~14px / ~18px - PUNTO DE PARTIDA */
    --spacing-block-lg:  calc(var(--spacing-block-base) * var(--ft-space-scale)); /* ~21px / ~27px */
    --spacing-block-xl:  calc(var(--spacing-block-lg) * var(--ft-space-scale)); /* ~32px / ~41px */
    --spacing-block-2xl: calc(var(--spacing-block-xl) * var(--ft-space-scale)); /* ~48px / ~61px */
    --spacing-block: var(--spacing-block-md); /* ALIAS para el valor por defecto */

    /**
     * ESPACIADO PARA LAYOUT HORIZONTAL
     * Para gaps de grids, flexbox y elementos dispuestos horizontalmente
     * Uso: columnas de grid, elementos de navegación, galerías
     */
    --spacing-columns-2xs: calc(var(--spacing-columns-base) / var(--ft-space-scale) / var(--ft-space-scale)); /* ~8px / ~11px */
    --spacing-columns-xs:  calc(var(--spacing-columns-base) / var(--ft-space-scale)); /* ~12px / ~16px */
    --spacing-columns-sm:  calc(var(--spacing-columns-base) / 1.2); /* ~15px / ~20px */
    --spacing-columns-md:  var(--spacing-columns-base); /* ~18px / ~24px - PUNTO DE PARTIDA */
    --spacing-columns-lg:  calc(var(--spacing-columns-base) * var(--ft-space-scale)); /* ~27px / ~36px */
    --spacing-columns-xl:  calc(var(--spacing-columns-lg) * var(--ft-space-scale)); /* ~41px / ~54px */
    --spacing-columns-2xl: calc(var(--spacing-columns-xl) * var(--ft-space-scale)); /* ~61px / ~81px */
    --spacing-columns: var(--spacing-columns-md); /* ALIAS para el valor por defecto */

    /**
     * ESPACIADO PARA SEPARACIONES PRINCIPALES
     * Para separar secciones importantes del layout
     * Uso: entre header y main, entre secciones de página, margins grandes
     */
    --spacing-section-2xs: calc(var(--spacing-section-base) / var(--ft-space-scale) / var(--ft-space-scale)); /* ~20px / ~27px */
    --spacing-section-xs:  calc(var(--spacing-section-base) / var(--ft-space-scale)); /* ~30px / ~40px */
    --spacing-section-sm:  calc(var(--spacing-section-base) / 1.2); /* ~38px / ~50px */
    --spacing-section-md:  var(--spacing-section-base); /* ~45px / ~60px - PUNTO DE PARTIDA */
    --spacing-section-lg:  calc(var(--spacing-section-base) * var(--ft-space-scale)); /* ~68px / ~90px */
    --spacing-section-xl:  calc(var(--spacing-section-lg) * var(--ft-space-scale)); /* ~101px / ~135px */
    --spacing-section-2xl: calc(var(--spacing-section-xl) * var(--ft-space-scale)); /* ~152px / ~203px */
    --spacing-section: var(--spacing-section-md); /* ALIAS para el valor por defecto */


    --spacing-sidebar-curso: clamp(280px, 25vw, 400px);

    /* =========================================================================
       ESCALA TIPOGRÁFICA
       ========================================================================= */
    
    /**
     * Sistema tipográfico escalado basado en el valor base responsive
     * Cada tamaño se calcula proporcionalmente usando el factor de escalado
     * Progresión: xs → sm → base → lg → xl → 2xl → 3xl → 4xl → 5xl → 6xl → 7xl → 8xl → 9xl
     */
   --text-xs: calc(var(--text-sm) / var(--ft-text-scale));
   --text-sm: calc(var(--text-base) / var(--ft-text-scale));
   --text-base: calc(var(--ft-text-value) * var(--ft-text-factor));
   --text-lg: calc(var(--text-base) * var(--ft-text-scale));
   --text-xl: calc(var(--text-lg) * var(--ft-text-scale));
   --text-2xl: calc(var(--text-xl) * var(--ft-text-scale));
   --text-3xl: calc(var(--text-2xl) * var(--ft-text-scale));
   --text-4xl: calc(var(--text-3xl) * var(--ft-text-scale));
   --text-5xl: calc(var(--text-4xl) * var(--ft-text-scale));
   --text-6xl: calc(var(--text-5xl) * var(--ft-text-scale));
   --text-7xl: calc(var(--text-6xl) * var(--ft-text-scale));
   --text-8xl: calc(var(--text-7xl) * var(--ft-text-scale));
   --text-9xl: calc(var(--text-8xl) * var(--ft-text-scale));
    
    /* =========================================================================
       BORDES REDONDEADOS
       ========================================================================= */
    
    /**
     * Sistema de border-radius para diferentes tipos de elementos
     * Progresión lógica para mantener consistencia visual
     */
    --radius-button: 0.85rem;   /* 4px - Para botones y elementos pequeños */
    --radius-card: var(--radius-lg);      /* 8px - Para tarjetas y componentes medianos */
    --radius-section: 1rem;     /* 16px - Para secciones y elementos grandes */

    /* =========================================================================
       PROPORCIONES DE ASPECTO
       ========================================================================= */
    
    /**
     * Ratios de aspecto comunes para diferentes tipos de contenido
     * Útiles para imágenes, videos y contenedores con proporciones fijas
     */
    
    /* Redes sociales y multimedia */
    --aspect-rrss: 1.91 / 1;        /* ~19:10 - Formato común de redes sociales */
    --aspect-wide: 18 / 8;           /* 2.25:1 - Formato panorámico */
    --aspect-ultrawide: 18 / 5;      /* 3.6:1 - Formato ultra panorámico */
    --aspect-golden: 1.6180 / 1;     /* Proporción áurea - estéticamente agradable */
    
    /* Proporciones clásicas */
    --aspect-portrait: 3 / 4;        /* 0.75:1 - Retrato vertical */
    --aspect-landscape: 4 / 3;       /* 1.33:1 - Paisaje horizontal */

    
}