:root {
    /* --- Paleta Estable (Clean Tech) --- */
    --color-bg-body: #FFFFFF;
    --color-bg-surface: #F8FAFC;    /* Gris muy claro para fondos */
    --color-bg-dark: #0F172A;       /* Azul oscuro técnico */
    
    /* Textos */
    --color-text-main: #0F172A;     /* Negro azulado */
    --color-text-body: #334155;     /* Gris legible */
    --color-text-muted: #64748B;    /* Gris suave */
    --color-text-invert: #FFFFFF;

    /* Acentos (TU NARANJA DE MARCA) */
    --color-accent: #FF6B35;        /* El color exacto de tu logo */
    --color-accent-hover: #E85A2D;
    
    /* Bordes */
    --color-border: #E2E8F0;
    
    /* Tipografía (Estable) */
  /* 1. Definimos las variables */
  --font-display: "Manrope", sans-serif;
  --font-body: "Inter", sans-serif;



    --text-hero: clamp(3.5rem, 6vw, 5rem);
    --text-h2: clamp(2rem, 4vw, 3rem);

    /* Estructura (Botones más cuadrados) */
    --container-width: 1280px;
    --radius-sm: 6px;   /* Borde suave botón */
    --radius-md: 12px;  /* Borde tarjetas */
    --radius-lg: 20px; 
    
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
}