@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

:root {
  --color-1: #f9b233;
  --color-2: #1b1b1a;
  --color-3: #ffffff;
  --fuente: "Quicksand", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Estilos generales */
body {
  font-family: "Roboto", sans-serif;
  background-image: url(../img/fondoTarot.png);
  background-size: cover; /* Fondo que cubra todo el ancho y alto */
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  margin: 0;
  padding: 0;
}

/* Fondo principal */
.fondoHoroscopo {
  background: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
  padding: 40px 0;
  min-height: 100vh; /* Asegura que el fondo cubra el 100% de la altura de la pantalla */
}

/* Descripción con fondo oscuro semi-transparente y bordes redondeados */
.col-12.col-md-4.text-start {
  background: rgba(0, 0, 0, 0.7); /* Fondo oscuro */
  padding: 20px; /* Espaciado dentro del div */
  border-radius: 15px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra suave para dar profundidad */
  width: 80%; /* Ancho del div en pantallas pequeñas */
  max-width: 400px; /* Ancho máximo en pantallas grandes */
  margin: 0 auto; /* Centra el div */
}

/* Logo principal */
.img-fluid {
  max-width: 15%;
  height: auto;
}

/* Título y subtítulo */
.titulo {
  font-family: "Chakra Petch", sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
}

.subtitulo {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Botones de descarga */
.boton-descarga {
  max-width: 180px;
  height: auto;
  transition: transform 0.3s ease;
}

.boton-descarga:hover {
  transform: scale(1.1);
}

/* Imágenes */
.tarot-img {
  max-width: 250px;
}

/* Descripción */
.descripcion {
  font-size: 1rem;
  margin-bottom: 10px;
  color: var(--color-1);
}

/* Lista */
.lista {
  list-style: none;
  padding-left: 0;
}

.lista li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 5px;
  color: var(--color-1);
}

.lista li::before {
  content: "•";
  color: var(--color-1);
  font-size: 1.2rem;
  position: absolute;
  left: 0;
}

/* Logo pequeño */
.mini-logo {
  max-width: 150px;
  margin-top: 20px;
  margin-right: 20px;
  float: right;
}

/**Responsive/
/* Para pantallas grandes (a partir de 1024px) */
@media (min-width: 1024px) {
  /* Ajustar márgenes del contenedor row en pantallas grandes */
  .row.align-items-center.my-4 {
    margin-top: 5.5rem !important; /* Márgen superior */
    margin-bottom: 3.5rem !important; /* Márgen inferior */
  }

  .col-12.col-md-4.text-start {
    width: 25%; /* Ajustamos el ancho para pantallas grandes */
    margin-top: 50px; /* Ajustamos el margen superior para que no esté tan abajo */
  }

  /* Ajustar tamaño de la imagen del tarot */
  .tarot-img {
    width: 90%; /* Hace que la imagen ocupe el 100% del ancho disponible */
    max-width: none; /* Elimina el límite de tamaño máximo de la imagen */
  }
}

/* Responsive */
@media (max-width: 768px) {
  .fondoHoroscopo {
    padding: 20px 0;
  }

  /* Ajustar márgenes del contenedor row en pantallas pequeñas */
  .row.align-items-center.my-4 {
    margin-top: 10rem !important; /* Márgen superior */
    margin-bottom: 5rem !important; /* Márgen inferior */
  }

  .col-12.col-md-4.text-start {
    width: 30%; /* Ajusta el tamaño del div en pantallas medianas */
  }

  .titulo {
    font-size: 1.3rem;
  }

  .subtitulo {
    font-size: 1.3rem;
  }

  .boton-descarga {
    max-width: 130px;
  }

  .tarot-img {
    max-width: 210px;
  }

  .descripcion {
    font-size: 0.7rem;
  }

  .lista li {
    font-size: 0.7rem;
  }

  /* Logo pequeño */
  .mini-logo {
    max-width: 100px;
    margin-top: 5px;
  }
}


/* Para dispositivos móviles muy pequeños (320px de ancho) */
/* Ajustar el logo en pantallas móviles de 320px */
@media (max-width: 320px) {
  .fondoHoroscopo {
      padding: 10px 0;
  }

  .img-logoMoon img {
      width: 50%; /* Ajustar el tamaño del logo */
      max-width: 200px; /* Ajuste del tamaño máximo */
      height: auto; /* Mantener la relación de aspecto */
      margin: 0 auto; /* Centrar el logo */
      display: block; /* Asegurarnos de que se centre */
  }

  .row.align-items-center.my-4 {
      margin-top: 2rem !important; /* Márgen superior */
      margin-bottom: 2rem !important; /* Márgen inferior */
      flex-direction: column;
  }

  .col-12.col-md-4.text-start {
      width: 80%; /* Ajusta el tamaño del div en pantallas pequeñas */
  }

  /* Estilos para #textoCentral */
  #textoCentral {
      display: flex; /* Usamos display: flex */
      flex-direction: column; /* Apilar elementos de arriba hacia abajo */
      flex-wrap: wrap; /* Permitir que los elementos se ajusten dentro del contenedor */
      justify-content: center; /* Centrar los elementos verticalmente */
      align-items: center; /* Centrar los elementos horizontalmente */
      font-size: 0.8rem;
      padding: 0 3em; /* Agregar espaciado */
  }

  /* Ajustes adicionales si es necesario */
  .titulo {
      font-size: 1.2rem; /* Puedes ajustar el tamaño del título */
      margin-bottom: 10px;
  }

  .subtitulo {
      font-size: 1rem; /* Ajuste de tamaño de subtítulo */
      margin-bottom: 15px;
  }

  .d-flex {
      display: flex;
      justify-content: center;
      gap: 10px;
  }
}

@media (max-width: 425px) {
  .fondoHoroscopo {
      padding: 10px 0;
  }

  .img-logoMoon img {
      width: 50%; /* Ajustar el tamaño del logo */
      max-width: 200px; /* Ajuste del tamaño máximo */
      height: auto; /* Mantener la relación de aspecto */
      margin: 0 auto; /* Centrar el logo */
      display: block; /* Asegurarnos de que se centre */
  }

  .row.align-items-center.my-4 {
      margin-top: 2rem !important; /* Márgen superior */
      margin-bottom: 2rem !important; /* Márgen inferior */
      flex-direction: column;
  }

  .col-12.col-md-4.text-start {
      width: 50%; /* Ajusta el tamaño del div en pantallas pequeñas */
  }

  /* Estilos para #textoCentral */
  #textoCentral {
      display: flex; /* Usamos display: flex */
      flex-direction: column; /* Apilar elementos de arriba hacia abajo */
      flex-wrap: wrap; /* Permitir que los elementos se ajusten dentro del contenedor */
      justify-content: center; /* Centrar los elementos verticalmente */
      align-items: center; /* Centrar los elementos horizontalmente */
      font-size: 0.8rem;
      padding: 0 3em; /* Agregar espaciado */
  }

  /* Ajustes adicionales si es necesario */
  .titulo {
      font-size: 1.2rem; /* Puedes ajustar el tamaño del título */
      margin-bottom: 10px;
  }

  .subtitulo {
      font-size: 1rem; /* Ajuste de tamaño de subtítulo */
      margin-bottom: 15px;
  }

  .d-flex {
      display: flex;
      justify-content: center;
      gap: 10px;
  }
}

@media (max-width: 320px) {
  .fondoHoroscopo {
      padding: 10px 0;
  }

  .img-logoMoon img {
      width: 50%; /* Ajustar el tamaño del logo */
      max-width: 200px; /* Ajuste del tamaño máximo */
      height: auto; /* Mantener la relación de aspecto */
      margin: 0 auto; /* Centrar el logo */
      display: block; /* Asegurarnos de que se centre */
  }

  .row.align-items-center.my-4 {
      margin-top: 2rem !important; /* Márgen superior */
      margin-bottom: 2rem !important; /* Márgen inferior */
      flex-direction: column;
  }

  .col-12.col-md-4.text-start {
      width: 50%; /* Ajusta el tamaño del div en pantallas pequeñas */
  }

  /* Estilos para #textoCentral */
  #textoCentral {
      display: flex; /* Usamos display: flex */
      flex-direction: column; /* Apilar elementos de arriba hacia abajo */
      flex-wrap: wrap; /* Permitir que los elementos se ajusten dentro del contenedor */
      justify-content: center; /* Centrar los elementos verticalmente */
      align-items: center; /* Centrar los elementos horizontalmente */
      font-size: 0.8rem;
      padding: 0 3em; /* Agregar espaciado */
  }

  /* Ajustes adicionales si es necesario */
  .titulo {
      font-size: 1.2rem; /* Puedes ajustar el tamaño del título */
      margin-bottom: 10px;
  }

  .subtitulo {
      font-size: 1rem; /* Ajuste de tamaño de subtítulo */
      margin-bottom: 15px;
  }

  .d-flex {
      display: flex;
      justify-content: center;
      gap: 10px;
  }
}