@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bangers&display=swap");
/* Configuración básica */
footer {
  position: relative;
  background-color: #000;
  color: #fff;
  text-align: center;
  font-family: "Roboto", sans-serif;
  padding-top: 3.125rem; /* 50px en rem */
}

.footer-container {
  padding: 2.5rem 1.25rem; /* 40px 20px en rem */
  max-width: 75rem; /* 1200px en rem */
  margin: 0 auto;
  background-color: #000;
  border-radius: 0.9375rem; /* 15px en rem */
  box-sizing: border-box;
}

.footer-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.footer-logo img {
  width: 9.375rem; /* 150px en rem */
  margin-bottom: 0.625rem; /* 10px en rem */
}

.footer-links {
  margin-bottom: 1.25rem; /* 20px en rem */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-links a {
  color: #ff69b4;
  margin: 0 0.9375rem; /* 15px en rem */
  text-decoration: none;
  font-size: 1em;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-social-buttons {
  display: flex;
  gap: 0.625rem; /* 10px en rem */
  justify-content: center;
  margin-top: 1.25rem; /* 20px en rem */
}

.footer-social-button {
  display: inline-block;
  padding: 0.5rem 0.9375rem; /* 8px 15px en rem */
  font-size: 0.875rem; /* 14px en rem */
  color: #fff;
  background-color: #333;
  border-radius: 0.3125rem; /* 5px en rem */
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  margin: 0 0.5rem; /* 8px en rem */
}

.footer-social-button:hover {
  background-color: #555;
  transform: translateY(-0.125rem); /* -2px en rem */
}

/* Colores específicos para cada red social */
.footer-social-button.facebook {
  background-color: #3b5998;
}

.footer-social-button.instagram {
  background-color: #e4405f;
}

.footer-social-button.twitter {
  background-color: #55acee;
}

.footer-social-button.tiktok {
  background-color: #000000;
  border: 0.0625rem solid #fff; /* 1px en rem */
}

.footer-social-button.facebook:hover {
  background-color: #365492;
}

.footer-social-button.instagram:hover {
  background-color: #d6295c;
}

.footer-social-button.twitter:hover {
  background-color: #2795e9;
}

.footer-social-button.tiktok:hover {
  background-color: #111111;
  border-color: #fff;
}

.footer-newsletter {
  margin-top: 1.25rem; /* 20px en rem */
}

.footer-newsletter p {
  font-size: 1em;
  margin-bottom: 0.625rem; /* 10px en rem */
}

.contact-button {
  display: inline-block;
  padding: 0.625rem 1.25rem; /* 10px 20px en rem */
  font-size: 1rem;
  color: #fff;
  background-color: #000;
  border: 0.0625rem solid #fff; /* 1px en rem */
  border-radius: 0.3125rem; /* 5px en rem */
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  margin-top: 0.625rem; /* 10px en rem */
  box-shadow: 0 0 1.25rem rgba(255, 105, 180, 0.7); /* 20px en rem */
  animation: pulse-pink 2s infinite;
}

.contact-button:hover {
  background-color: #333;
  transform: translateY(-0.125rem); /* -2px en rem */
}

.footer-logo-text {
  margin-top: 1.875rem; /* 30px en rem */
  color: #ccc;
  font-size: 0.9em;
  text-align: center;
}

/* Animación de pulsación para el resplandor */
@keyframes pulse-pink {
  0% {
    box-shadow: 0 0 1.25rem rgba(255, 105, 180, 0.7); /* 20px en rem */
  }
  50% {
    box-shadow: 0 0 2.5rem rgba(255, 105, 180, 1); /* 40px en rem */
  }
  100% {
    box-shadow: 0 0 1.25rem rgba(255, 105, 180, 0.7); /* 20px en rem */
  }
}
#faq-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  z-index: 1; /* Asegúrate de que este índice sea menor que el del encabezado */
  position: relative; /* Asegúrate de que la posición sea relativa para aplicar el z-index */
  margin-top: -5rem;
}

#faq-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 30px;
  margin-top: 80px; /* Ajusta el margen superior según sea necesario */
  font-family: "Bangers", cursive;
  letter-spacing: 1.5px;
  color: #ffffffee;
  text-decoration: underline;
  text-decoration-color: #39ce94;
}

.faq {
  margin-bottom: 20px;
}

.faq-question {
  font-size: 1.5rem;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #39ce94, #00bfff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.faq-answer {
  font-size: 1rem;
  color: #ffffff;
  line-height: 1.5;
  margin-left: 15px;
}
#privacy-policy-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  z-index: 1; /* Asegúrate de que este índice sea menor que el del encabezado */
  position: relative; /* Asegúrate de que la posición sea relativa para aplicar el z-index */
  margin-top: -5rem;
}

#privacy-policy-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 30px;
  margin-top: 80px; /* Ajusta el margen superior según sea necesario */
  font-family: "Bangers", cursive;
  letter-spacing: 1.5px;
  color: #ffffffee;
  text-decoration: underline;
  text-decoration-color: #39ce94;
}

.privacy-policy {
  margin-bottom: 20px;
}

.privacy-policy-point {
  font-size: 1.5rem;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #39ce94, #00bfff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.privacy-policy-text {
  font-size: 1rem;
  color: #ffffff;
  line-height: 1.5;
  margin-left: 15px;
}
#terms-conditions-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  z-index: 1; /* Asegúrate de que este índice sea menor que el del encabezado */
  position: relative; /* Asegúrate de que la posición sea relativa para aplicar el z-index */
  margin-top: -5rem;
}

#terms-conditions-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 30px;
  margin-top: 80px; /* Ajusta el margen superior según sea necesario */
  font-family: "Bangers", cursive;
  letter-spacing: 1.5px;
  color: #ffffffee;
  text-decoration: underline;
  text-decoration-color: #39ce94;
}

.terms-conditions {
  margin-bottom: 20px;
}

.terms-conditions-point {
  font-size: 1.5rem;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #39ce94, #00bfff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.terms-conditions-text {
  font-size: 1rem;
  color: #ffffff;
  line-height: 1.5;
  margin-left: 15px;
}
/* Estilos para la sección del Sitemap */
#sitemap-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  z-index: 1;
  position: relative;
}

#sitemap-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 30px;
  margin-top: 80px; /* Ajusta el margen superior según sea necesario */
  font-family: "Bangers", cursive;
  letter-spacing: 1.5px;
  color: #ffffffee;
  text-decoration: underline;
  text-decoration-color: #39ce94;
}

/* Estilos para los títulos de cada sección */
.sitemap > li {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #39ce94; /* Naranja para los títulos */
  font-weight: bold;
  text-transform: uppercase;
}

/* Estilos para los enlaces */
.sitemap > li > ul > li {
  font-size: 1rem;
  color: #ffffff; /* Enlaces en blanco */
  margin-left: 15px;
  margin-bottom: 15px; /* Aumenta la separación inferior entre los enlaces */
}

.sitemap-links {
  color: #ffffff; /* Color blanco para los enlaces */
  text-decoration: none; /* Sin subrayado */
  transition: color 0.3s ease;
  text-decoration: underline;
}

.sitemap-links:hover {
  color: #00bfff; /* Cambia a azul claro en hover */
}

/* Media Queries para hacer el footer responsive */

/* Pantallas super grandes (a partir de 1920px) */
@media (min-width: 1920px) {
  .footer-container {
    max-width: 85rem; /* 1360px en rem */
    padding: 3rem 2rem; /* 48px 32px en rem */
  }
}

/* Pantallas grandes (1440px a 1919px) */
@media (max-width: 1919px) and (min-width: 1440px) {
  .footer-container {
    max-width: 80rem; /* 1280px en rem */
  }
}

/* Pantallas medianas (1024px a 1439px) */
@media (max-width: 1439px) and (min-width: 1024px) {
  .footer-container {
    max-width: 70rem; /* 1120px en rem */
  }

  .footer-logo img {
    width: 8.125rem; /* 130px en rem */
  }
}

/* Pantallas pequeñas (768px a 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  .footer-container {
    max-width: 60rem; /* 960px en rem */
    padding: 2.5rem 1.25rem; /* 40px 20px en rem */
  }

  .footer-logo img {
    width: 7.5rem; /* 120px en rem */
  }
}

/* Pantallas muy pequeñas (hasta 767px) */
@media (max-width: 767px) {
  footer {
    padding-top: 1.25rem; /* 20px en rem */
  }

  .footer-container {
    padding: 1.25rem 0.625rem; /* 20px 10px en rem */
    max-width: 100%;
  }

  .footer-logo img {
    width: 6.25rem; /* 100px en rem */
  }

  .footer-links {
    flex-direction: column;
    margin-top: 1rem; /* 16px en rem */
  }

  .footer-social-buttons {
    flex-direction: column;
  }

  .contact-button {
    font-size: 0.875rem; /* 14px en rem */
    padding: 0.5rem 1rem; /* 8px 16px en rem */
    width: 80%;
    margin: 0 auto;
  }
}