:root {
   /* =========================
       Cores principais
    ========================= */

   /* 
    
   #0064FF
   #FFC900
   #FF8600
   #405980
   #807240
    
    */
   --primary: #5ac4b7;
   --primary-hover: #144ed5;

   --error: #FF8600;
   --focus-shadow: rgba(255, 26, 26, 0.08);

   /* =========================
       Fundos
    ========================= */
   --background-page: #000000;
   --background-container: #01071A; /* Cor de fundo da pagina */
   --background-container-tablet: #000000;
   --background-container-mobile: #ffffff;

   --background-card: #ffffff;
   --background-input: #ffffff;
   --background-image: #000000;
   --background-form-mobile: rgb(255, 255, 255);

   /* =========================
       Textos
    ========================= */
   --text-title: #222222;
   --text-body: #222222;
   --text-button: #ffffff;

   --font-family: Arial, sans-serif;

   /* =========================
       Bordas e sombras
    ========================= */
   --border: #e5e5e5;

   --radius: 14px;
   --radius-card: 24px;
   --radius-card-tablet: 22px;
   --radius-card-mobile: 22px;

   --shadow-card: 0 10px 35px rgba(0, 0, 0, 0.08);
   --shadow-card-mobile: 0 8px 28px rgba(0, 0, 0, 0.08);

   /* =========================
       Container
    ========================= */
   --container-padding-desktop: 50px 32px;
   --container-padding-tablet: 100px 24px 60px;
   --container-padding-mobile: 32px 18px;

   /* =========================
       Formulário
    ========================= */
   --form-max-width: 560px;
   --form-max-width-tablet: 720px;

   --form-padding-desktop: 40px;
   --form-padding-tablet: 36px;
   --form-padding-mobile: 28px 22px;

   --form-min-height-desktop: 520px;
   --form-min-height-mobile: 460px;

   /* =========================
       Logo
    ========================= */
   --logo-max-width: 180px;
   --logo-max-height: 80px;
   --logo-max-width-mobile: 150px;
   --logo-max-height-mobile: 70px;

   --logo-margin-bottom: 28px;
   --logo-margin-bottom-mobile: 24px;

   /* =========================
       Topo do formulário
    ========================= */
   --top-app-height: 42px;
   --top-app-gap: 12px;
   --top-app-gap-mobile: 14px;

   --top-app-margin-bottom: 35px;
   --top-app-margin-bottom-mobile: 28px;

   /* =========================
       Botão voltar
    ========================= */
   --back-button-background: #f1f1f1;
   --back-button-hover: #e2e2e2;
   --back-button-color: #333333;

   --back-button-size: 38px;
   --back-button-font-size: 22px;

   /* =========================
       Barra de progresso
    ========================= */
   --progress-background: #ededed;
   --progress-height: 8px;

   /* =========================
       Etapas do formulário
    ========================= */
   --step-title-height-desktop: 130px;
   --step-title-height-mobile: 140px;

   --step-gap-desktop: 22px;
   --step-gap-mobile: 18px;

   --step-offset: 30px;

   /* =========================
       Títulos
    ========================= */
   --title-size-desktop: 34px;
   --title-size-tablet: 30px;
   --title-size-mobile: 30px;

   --title-line-height: 1.25;
   --title-line-height-mobile: 1.25;

   --title-font-weight: 700;
   --title-letter-spacing: -0.5px;

   /* =========================
       Inputs
    ========================= */
   --input-height-desktop: 64px;
   --input-height-mobile: 60px;

   --input-padding-desktop: 0 20px;
   --input-padding-mobile: 0 18px;

   --input-font-size-desktop: 17px;
   --input-font-size-mobile: 16px;

   /* =========================
       Botões
    ========================= */
   --button-height-desktop: 60px;
   --button-height-mobile: 58px;

   --button-font-size-desktop: 16px;
   --button-font-size-mobile: 15px;

   --button-font-weight: 700;
   --button-active-scale: .98;

   /* =========================
       Mensagens
    ========================= */
   --error-font-size-desktop: 14px;
   --error-font-size-mobile: 13px;

   --success-font-size: 22px;

   /* =========================
       Imagem lateral / responsiva
    ========================= */
   --image-height-tablet: 340px;
   --image-position-tablet: center 25%;

   /* =========================
       reCAPTCHA
    ========================= */
   --recaptcha-margin-top: -5px;
   --recaptcha-scale-mobile: .92;

   /* =========================
       Transições
    ========================= */
   --transition-default: .2s ease;
   --transition-image: .4s ease;
   --transition-progress: .35s ease;
   --transition-step: .3s ease;
   --transition-focus: .2s ease;
   --transition-click: .15s ease;
}

:root {
    /* ================================
       CORES PRINCIPAIS
    ================================ */

    --color-background-dark: #2b0000;
    --color-background-gradient: #4a0000;
    --color-background-secondary: #3a0000;

    --color-card: rgba(0, 0, 0, 0.36);
    --color-card-strong: rgba(0, 0, 0, 0.48);
    --color-card-soft: rgba(255, 255, 255, 0.06);

    --color-primary: #0064FF;
    --color-primary-hover: #e51f1f;

    --color-secondary: #00c853;
    --color-secondary-hover: #00ad48;

    --color-text: #ffffff;
    --color-text-muted: #cccccc;
    --color-text-soft: #e6e6e6;

    --color-border: rgba(255, 255, 255, 0.12);

    /* ================================
       TIPOGRAFIA
    ================================ */

    --font-family: Arial, sans-serif;

    --font-size-logo: 15px;
    --font-size-title: 34px;
    --font-size-title-mobile: 28px;
    --font-size-subtitle: 17px;
    --font-size-card-title: 22px;
    --font-size-text: 16px;
    --font-size-small: 13px;
    --font-size-button: 14px;
    --font-size-price: 36px;

    --line-height-text: 1.6;
    --font-weight-bold: 700;

    /* ================================
       ESPAÇAMENTOS
    ================================ */

    --container-width: 920px;
    --container-padding: 56px 20px;
    --container-padding-mobile: 36px 18px;

    --section-space: 56px;
    --section-space-mobile: 38px;

    --card-padding: 36px;
    --card-padding-mobile: 26px;

    --gap-small: 10px;
    --gap-default: 16px;
    --gap-medium: 24px;
    --gap-large: 40px;

    /* ================================
       BORDAS / SOMBRAS
    ================================ */

    --radius-small: 10px;
    --radius-default: 14px;
    --radius-large: 22px;
    --radius-pill: 999px;

    --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.28);
    --shadow-button: 0 12px 28px rgba(0, 0, 0, 0.22);
    --shadow-button-base: 0 10px 24px rgba(0, 0, 0, 0.22);

    /* ================================
       ELEMENTOS
    ================================ */

    --video-height: 260px;
    --video-height-mobile: 210px;

    --button-padding: 14px 26px;
    --button-min-width: 190px;

    --transition-default: 0.25s ease;
}