:root {
  /* -----------------------------------
     🎨 PALETA PRINCIPAL (Marca)
     ----------------------------------- */
  --color-rojo: #FF6B6B;            
  --color-rojo-claro: #FF9A9A;      
  --color-rojo-pastel: #FFE5E5;     
  --color-rojo-oscuro: #D94B4B;     

  /* -----------------------------------
     ⚫ PALETA NEUTRA (UI Moderna)
     ----------------------------------- */
  --color-negro: #121212;
  --color-negro-suave: #1A1A1A;
  --color-gris-oscuro: #1E1E1E;
  --color-gris-medio: #2A2A2A;
  --color-gris: #3A3A3A;
  --color-gris-claro: #E5E5E5;
  --color-blanco: #FFFFFF;

  /* -----------------------------------
     🔵 ACENTO Opcional
     ----------------------------------- */
  --color-acento: #C7F2FF;

  /* -----------------------------------
     Botones (definitivo)
     ----------------------------------- */
  --btn-primary-bg: var(--color-rojo);
  --btn-primary-hover: var(--color-rojo-claro);
  --btn-primary-active: var(--color-rojo-pastel);

  --btn-secondary-bg: var(--color-gris-medio);
  --btn-secondary-hover: var(--color-gris);
  --btn-secondary-active: var(--color-gris);

  --btn-danger-bg: var(--color-rojo-oscuro);
  --btn-danger-hover: var(--color-rojo);
  --btn-danger-active: var(--color-rojo-claro);

  --btn-outline-border: var(--color-rojo);
  --btn-outline-text: var(--color-rojo);
  --btn-outline-hover-bg: var(--color-rojo);
  --btn-outline-active-bg: var(--color-rojo-claro);

  --btn-success-bg: #4CAF50;
  --btn-success-hover: #66BB6A;
  --btn-success-active: #A5D6A7;

  /* -----------------------------------
     ⚡ TIPOGRAFÍA
     ----------------------------------- */
  --font-primary: "Poppins", sans-serif;
  --font-secondary: "Inter", sans-serif;

  --texto-primario: var(--color-blanco);
  --texto-secundario: var(--color-gris-claro);

  /* Tamaños */
  --fs-xxl: 32px;
  --fs-xl: 26px;
  --fs-lg: 22px;
  --fs-md: 18px;
  --fs-sm: 16px;
  --fs-xs: 14px;

  /* -----------------------------------
     📏 ESPACIADOS
     ----------------------------------- */
  --space-xxl: 48px;
  --space-xl: 32px;
  --space-lg: 24px;
  --space-md: 16px;
  --space-sm: 12px;
  --space-xs: 8px;
  --space-xxs: 4px;

  /* -----------------------------------
     🟦 BORDES
     ----------------------------------- */
  --borde: 1px solid var(--color-gris);
  --borde-suave: 1px solid var(--color-rojo-pastel);
  --borde-rojo: 1px solid var(--color-rojo);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* -----------------------------------
     SOMBRAS
     ----------------------------------- */
  --sombra-sm: 0 2px 6px rgba(0,0,0,0.15);
  --sombra-md: 0 4px 12px rgba(0,0,0,0.2);
  --sombra-lg: 0 6px 20px rgba(0,0,0,0.25);

  /* -----------------------------------
     ⚡ TRANSICIONES
     ----------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* -----------------------------------
     Responsiveness
     ----------------------------------- */
  --mobile: 480px;
  --tablet: 768px;
  --laptop: 1024px;
  --desktop: 1280px;

  /* Z-index */
  --z-back: -1;
  --z-base: 1;
  --z-dropdown: 10;
  --z-modal: 100;
  --z-toast: 200;

  /* COMPONENTES */
  --nav-bg: var(--color-negro);
  --nav-text: var(--color-blanco);
  --nav-hover-bg: var(--color-rojo);
  --nav-hover-text: var(--color-blanco);

  --card-bg: var(--color-gris-oscuro);
  --card-resaltada-bg: var(--color-rojo-pastel);
  --card-radius: 12px;

  --input-bg: var(--color-gris-medio);
  --input-text: var(--color-blanco);
  --input-border: var(--color-rojo);
  --input-focus: var(--color-rojo);


    /* -----------------------------------
     🦶 FOOTER (Colores & Estilos)
     ----------------------------------- */

  --footer-bg: var(--color-negro);                /* Fondo principal */
  --footer-text: var(--color-blanco);             /* Texto principal */
  --footer-text-muted: var(--color-gris-claro);   /* Texto suave */
  --footer-border: rgba(255, 255, 255, 0.08);     /* Líneas sutiles */
  --footer-link: var(--color-gris-claro);         /* Links */
  --footer-link-hover: var(--color-rojo);         /* Hover de links */
  --footer-redes-color: var(--color-blanco);      /* Iconos redes */
  --footer-redes-hover: var(--color-rojo-oscuro); /* Hover redes */

  --footer-logo-size: 42px;                       /* Tamaño del logo */
  --footer-gap: 20px;                             /* Espaciado general */

  /* Sombras para elevación del footer */
  --footer-shadow: 0 -4px 12px rgba(0,0,0,0.25);

}