:root {
    --primary: #E96A0F;
    --secondary: #F59F8D;
    --quaternary: #421B0B;
    
    /* Titulo: - Outfit */
    --font-primary: 'Outfit';
    /* Subtitulo -Space Grotesk */
    --font-secondary: 'Space_Grotesk';
    --font-text: 'montserrat';

  }

*{
  font-family : var(--font-text), sans-serif;
}

.bg-brand-primary {
  background-color: var(--primary);
}

.hover\:bg-\[var\(--bg-primary-light\)\]:hover {
  background-color: var(--bg-primary-light);
}

.hover\:bg-caqui-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}

.hover\:bg-caqui-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}

.hover\:bg-caqui-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:text-\[var\(--primary\)\]:hover {
  color: var(--primary);
}

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-500:hover {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.focus\:border-\[var\(--primary\)\]:focus {
  border-color: var(--primary);
}

.focus\:ring:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-\[var\(--primary\)\]:focus {
  --tw-ring-color: var(--primary);
}

.focus\:ring-opacity-20:focus {
  --tw-ring-opacity: 0.2;
}

.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

  @media (min-width: 640px) {
    .sm\:px-3 {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }
  
    .sm\:px-6 {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
  }
  
  @media (min-width: 768px) {
    .md\:ml-6 {
      margin-left: 1.5rem;
    }
  
    .md\:flex {
      display: flex;
    }
  
    .md\:hidden {
      display: none;
    }
  
    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  
  @media (min-width: 1024px) {
    .lg\:px-8 {
      padding-left: 2rem;
      padding-right: 2rem;
    }
  }