/* =========================
   Colores, tipografia y espaciado
   extraidos del diseño Figma.
   Importar antes de cualquier otro CSS.
========================= */

:root {
    /* ===== COLORES PRIMARIOS ===== */
    --color-primary: #2B7DE5;
    --color-primary-hover: #1a6ad4;
    --color-primary-light: rgba(43, 125, 229, 0.5);
    --color-primary-alt: #2A7DE1;
    --color-dark: #1a1a2e;
    --color-white: #ffffff;
    --color-black: #000000;

    /* ===== COLORES NEUTROS ===== */
    --color-gray-light: #f5f6f8;
    --color-gray-medium: #888888;
    --color-gray-dark: #D9D9D9;
    --color-gray-border: #E5E3E3;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-text-lighter: #726969;
    --color-text-muted: #4A5971;
    --color-text-strong: #172522;

    /* ===== COLORES DE ÉNFASIS ===== */
    --color-accent: #FF0000;
    --color-accent-hover: #dd0000;
    --color-danger: #D32F2F;
    --color-danger-soft: #FFE7E8;
    --color-benefits: #65B2E8;
    --color-hero-bg: rgba(101, 178, 232, 0.5);
    --color-success: #6BC655;
    --color-success-soft: #E3FFE3;

    /* ===== NAVBAR/HEADER ===== */
    --navbar-bg: rgba(136, 136, 136, 0.35);
    --navbar-padding-y: 30px;
    --navbar-padding-x: 72px;
    --navbar-height: 108px;
    --navbar-link-opacity: 0.9;
    --navbar-link-opacity-hover: 1;

    /* ===== BOTONES ===== */
    --btn-radius: 8px;
    --btn-radius-lg: 16px;
    --btn-radius-xl: 32px;
    --btn-cta-width: 200px;
    --btn-cta-height: 48px;
    --btn-cta-padding: 19px 26px;
    --btn-small-height: 36px;
    --btn-small-padding: 0 14px;
    --btn-large-height: 65px;
    --btn-large-padding: 0 30px;
    --btn-large-font-size: 20px;

    /* ===== HERO ===== */
    --hero-height: 900px;
    --hero-height-tablet: 700px;
    --hero-height-mobile: 550px;
    --hero-overlay: rgba(0, 0, 0, 0.65);
    --hero-padding-mobile: 100px 0 60px;

    /* ===== FORMULARIOS ===== */
    --form-input-height: 62px;
    --form-input-height-small: 48px;
    --form-input-border: 1px solid #000000;
    --form-input-border-light: 1px solid #E5E3E3;
    --form-textarea-height: 328px;
    --form-padding: 0 20px;
    --form-gap: 45px;

    /* ===== TIPOGRAFÍA GLOBAL ===== */
    --font-family-base: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
    --font-family-heading: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;

    --text-title-size: 60px;
    --text-title-line: 60px;
    --text-title-weight: 700;

    --text-subtitle-size: 32px;
    --text-subtitle-line: 45px;
    --text-subtitle-weight: 700;

    --text-body-md-size: 20px;
    --text-body-md-line: 24px;
    --text-body-md-weight: 400;

    --text-body-bold-size: 20px;
    --text-body-bold-line: 24px;
    --text-body-bold-weight: 700;

    --text-body-secondary-size: 18px;
    --text-body-secondary-line: 24px;
    --text-body-secondary-weight: 400;

    /* ===== ESCALA AUXILIAR RESPONSIVE ===== */
    --text-body-sm-size: 16px;
    --text-body-sm-line: 20px;
    --text-label-size: 14px;
    --text-label-line: 18px;

    /* ===== ESPACIADO ===== */
    --spacing-xs: 6px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-2xl: 80px;
    --spacing-3xl: 120px;
    --spacing-4xl: 160px;

    /* ===== SOMBRAS ===== */
    --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.12);
    --shadow-card-hover: 0 4px 4px rgba(0, 0, 0, 0.25);
    --shadow-card-large: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-floating: 0 10px 10px rgba(0, 0, 0, 0.25);

    /* ===== BORDES Y RADIOS ===== */
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-xl: 32px;

    /* ===== TRANSICIONES ===== */
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ===== DIMENSIONES COMUNES ===== */
    --icon-circle-size: 100px;
    --icon-circle-size-sm: 80px;
    --icon-circle-size-xs: 70px;
    --icon-svg-size: 44px;
    --icon-svg-size-sm: 36px;
    --icon-svg-size-xs: 32px;

    /* ===== PLAN CARDS ===== */
    --plan-card-width: 405px;
    --plan-card-height: 400px;
    --plan-card-padding: 16px;
    --plan-card-gap: 10px;
    --plan-row-gap: 34px;
}