@charset "UTF-8";
/* Globals */
/* Colors */
/* Z Indexes */
/* Font Styles */
/* Icons */
#home {
  background-color: rgba(51, 51, 51, 0.8); /* Color de fondo del header con opacidad */
  background-image: url("../images/bg_default.png") !important; /* Reemplaza 'ruta/a/tu/imagen.jpg' con la ruta de tu imagen */
  background-size: cover !important; /* Para que la imagen de fondo cubra todo el área */
  background-position: center !important; /* Centra la imagen de fondo */
  background-repeat: no-repeat !important; /* Evita la repetición de la imagen de fondo */
  /* Añade cualquier otro estilo que desees para el div */
  width: 100% !important; /* Por ejemplo, haz que el div ocupe todo el ancho */
  height: 100vh !important; /* También puedes ajustar la altura según sea necesario */
}

.home .home-container {
  padding: 10px;
}

.home .home-container .card {
  margin-top: 4rem;
  height: 25rem;
  width: 30rem;
  border-radius: 1.2rem;
  padding: 1rem;
}

.home header {
  background-color: #333; /* Color de fondo del header */
  color: #fff; /* Color del texto en el header */
  display: -ms-flexbox;
  display: flex; /* Utilizamos flexbox para alinear el contenido */
  -ms-flex-align: center;
      align-items: center; /* Alineamos los elementos verticalmente */
}

.logo {
  padding: 1rem;
  margin-right: auto; /* Empuja el logo hacia la izquierda */
}

.logo img {
  height: 50px; /* Ajusta la altura del logo según sea necesario */
  width: auto; /* Ajusta el ancho automáticamente para mantener la proporción */
}

.actions {
  margin-top: 0;
}

.button-primary {
  /* CTA */
  cursor: pointer;
  /* Auto layout */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  padding: 16px 73px;
  gap: 10px;
  width: 400px;
  height: 15px;
  font-size: 13px;
  /* Primary/500 */
  background: #E42D44;
  border-radius: 8px;
  color: white !important;
  transition: background-color 0.3s ease; /* Transición suave */
  border: 2px solid transparent; /* Borde transparente de 2px */
}

.button-secondary {
  /* CTA */
  /* Auto layout */
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  padding: 16px 73px;
  gap: 10px;
  width: 400px;
  height: 15px;
  font-size: 13px;
  /* Surface/500 */
  background: #2B2B2B;
  /* Secondary/500 */
  border-radius: 8px;
  color: white !important;
  transition: background-color 0.3s ease; /* Transición suave */
  border: 2px solid transparent; /* Borde transparente de 2px */
}

.button-primary:hover {
  border-color: #808080; /* Cambia el color del borde a gris (#808080) al pasar el ratón */
}

.button-secondary:hover {
  border-color: #808080; /* Cambia el color del borde a gris (#808080) al pasar el ratón */
}