/* ============================================================
   VARIABLES.CSS — Sistema de diseño de Web Fácil
   
   ¿Quieres cambiar colores, fuentes o espaciados?
   Edita SOLO este archivo y los cambios aplican en todo el sitio.
   ============================================================ */

:root {

    /* ----------------------------------------------------------
       COLORES
       ---------------------------------------------------------- */

    /* Fondos */
    --color-navy:       #0A0F1E;   /* Fondo principal */
    --color-navy2:      #111827;   /* Fondo secundario (cards, nav mobile) */
    --color-navy3:      #1A2235;   /* Fondo terciario (hover, inputs) */

    /* Marca */
    --color-gold:       #C9A84C;   /* Dorado principal */
    --color-gold2:      #E8C96A;   /* Dorado claro (hover) */
    --color-gold-rgb:   201, 168, 76; /* Para usar con rgba() */

    /* Texto */
    --color-white:      #F9F7F2;   /* Blanco cálido — textos principales */
    --color-gray:       #8B92A5;   /* Gris — textos secundarios */
    --color-gray2:      #555F73;   /* Gris oscuro — placeholders */

    /* Bordes y separadores */
    --color-border:     rgba(201, 168, 76, 0.15);
    --color-border2:    rgba(255, 255, 255, 0.06);

    /* Estados */
    --color-success:    #25D366;   /* Verde WhatsApp / éxito */
    --color-error:      #FF6B6B;   /* Rojo error */

    /* Fondos de cards */
    --color-card:       rgba(255, 255, 255, 0.03);


    /* ----------------------------------------------------------
       TIPOGRAFÍA
       ---------------------------------------------------------- */

    --font-display:     'Playfair Display', Georgia, serif;   /* Títulos */
    --font-body:        'DM Sans', system-ui, sans-serif;     /* Cuerpo */

    /* Tamaños — escala tipográfica */
    --text-xs:    0.75rem;    /*  12px */
    --text-sm:    0.875rem;   /*  14px */
    --text-base:  1rem;       /*  16px */
    --text-lg:    1.125rem;   /*  18px */
    --text-xl:    1.25rem;    /*  20px */
    --text-2xl:   1.5rem;     /*  24px */
    --text-3xl:   1.875rem;   /*  30px */
    --text-4xl:   2.25rem;    /*  36px */
    --text-5xl:   3rem;       /*  48px */
    --text-6xl:   3.75rem;    /*  60px */

    /* Line heights */
    --leading-tight:   1.2;
    --leading-snug:    1.4;
    --leading-normal:  1.6;
    --leading-relaxed: 1.8;


    /* ----------------------------------------------------------
       ESPACIADO — múltiplos de 4px
       ---------------------------------------------------------- */

    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-14:  56px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;
    --space-32: 128px;


    /* ----------------------------------------------------------
       LAYOUT
       ---------------------------------------------------------- */

    --max-width:    1160px;  /* Ancho máximo del contenedor */
    --nav-height:   72px;    /* Altura de la navegación fija */
    --section-pad:  96px;    /* Padding vertical de secciones */
    --radius-sm:    6px;
    --radius-md:    12px;
    --radius-lg:    20px;
    --radius-full:  9999px;


    /* ----------------------------------------------------------
       ANIMACIONES
       ---------------------------------------------------------- */

    --transition:       0.3s ease;
    --transition-slow:  0.5s ease;
    --transition-fast:  0.15s ease;


    /* ----------------------------------------------------------
       Z-INDEX — capas del sitio
       ---------------------------------------------------------- */

    --z-base:    1;
    --z-card:    10;
    --z-nav:     100;
    --z-modal:   200;
    --z-float:   300;   /* WhatsApp flotante */


    /* ----------------------------------------------------------
       SOMBRAS
       ---------------------------------------------------------- */

    --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg:  0 24px 48px rgba(0, 0, 0, 0.4);
    --shadow-gold: 0 8px 32px rgba(201, 168, 76, 0.2);

}