@import url('https://fonts.googleapis.com/css2?family=Englebert&family=Grandstander:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');







/*========== General Reset ==========*/

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: "Grandstander", serif;

  overflow-x: hidden;

}







/*========== Efecto de aparición al hacer scroll ==========*/

.reveal {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.6s ease-out, transform 0.6s ease-out;

}



.reveal.active {

  opacity: 1;

  transform: translateY(0);

}







/*========== Barra de scroll =========*/

::-webkit-scrollbar {

  width: 12px;

  height: 12px;

}



::-webkit-scrollbar-track {

  background: #f1f1f1;

  border-radius: 10px;

}



::-webkit-scrollbar-thumb {

  background: #888;

  border-radius: 10px;

}



::-webkit-scrollbar-thumb:hover {

  background: #fff8f8;

}



html {

  scrollbar-width: thin;

  scrollbar-color: #043173 #b1d7df;

}







/*========== Navbar ==========*/

.navbar {

  position: fixed;

  width: 100%;

  top: 0;

  left: 0;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0rem 5rem;

  background: rgba(87, 187, 241, 0.51);

  transition: background 0.1s ease;

  z-index: 1000;

}



.navbar.scrolled {

  background: #5cd5f0;

  box-shadow: 0 2px 5px rgba(154, 154, 154, 0.1);

}



/* Logo */

.logo img {

  width: 150px;

  transition: transform 0.3s ease, opacity 0.3s ease;

}



.logo img:hover {

  transform: scale(1.1);

  opacity: 0.8;

}



/* Nav Links */

.nav-links {

  display: flex;

  gap: 1rem;

  align-items: center;

  margin: 0;

  padding: 0;

}



.nav-links li {

  list-style: none;

}



.nav-links a {

  text-decoration: none;

  color: #fff;

  font-weight: bold;

  font-size: 1.2rem;

  transition: transform 0.3s ease, color 0.3s ease;

  position: relative;

  display: inline-block;

  padding: 5px 10px;

}



/* Efecto arcoíris al pasar el mouse */

.nav-links li:nth-child(1) a:hover {

  color: #ff47e3;

}



.nav-links li:nth-child(2) a:hover {

  color: #ffd700;

}



.nav-links li:nth-child(3) a:hover {

  color: #7cfc00;

}



.nav-links li:nth-child(4) a:hover {

  color: #f0663f;

}



.nav-links li:nth-child(5) a:hover {

  color: #9370db;

}



.nav-links a:hover {

  transform: scale(1.1);

}



/* Resaltado del enlace activo */

.nav-links a.active {

  color: #2f3299;

}



/* Menú Toggle (Hamburguesa)*/

.menu-toggle {

  display: none;

  background: none;

  border: none;

  cursor: pointer;

  align-self: center;

  position: relative;

  z-index: 1100;

  font-size: 2rem;

  color: white;

  width: 30px;

  height: 30px;

}



.menu-toggle .hamburger-icon,

.menu-toggle .close-icon {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  transition: opacity 0.3s ease, transform 0.3s ease;

}



.menu-toggle .hamburger-icon {

  opacity: 1;

  transform: translate(-50%, -50%) rotate(0deg);

}



.menu-toggle .close-icon {

  opacity: 0;

  transform: translate(-50%, -50%) rotate(-90deg);

}



.menu-toggle.active .hamburger-icon {

  opacity: 0;

  transform: translate(-50%, -50%) rotate(90deg);

}



.menu-toggle.active .close-icon {

  opacity: 1;

  transform: translate(-50%, -50%) rotate(0deg);

}



.menu-toggle .hamburger-icon::before,

.menu-toggle .hamburger-icon::after {

  content: "";

  position: absolute;

  width: 100%;

  height: 3px;

  transition: transform 0.3s ease, opacity 0.3s ease;

}



.menu-toggle .hamburger-icon::before {

  top: -8px;

}



.menu-toggle .hamburger-icon::after {

  bottom: -8px;

}



.menu-toggle.active .hamburger-icon::before {

  transform: translateY(8px) rotate(45deg);

}



.menu-toggle.active .hamburger-icon::after {

  transform: translateY(-8px) rotate(-45deg);

}



.menu-toggle .close-icon::before,

.menu-toggle .close-icon::after {

  content: "";

  position: absolute;

  width: 100%;

  height: 3px;

  transition: transform 0.3s ease, opacity 0.3s ease;

}



.menu-toggle .close-icon::before {

  transform: rotate(45deg);

}



.menu-toggle .close-icon::after {

  transform: rotate(-45deg);

}



.menu-toggle.active .close-icon::before {

  transform: rotate(0deg);

}



.menu-toggle.active .close-icon::after {

  transform: rotate(0deg);

}



/*Contenedor*/

.container {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

}



/*Modo Móvil*/

@media (max-width: 768px) {

  .navbar {

    padding: 0rem 1rem;

  }



  .logo {

    flex: 1;

    text-align: center;

  }



  .menu-toggle {

    display: block;

  }



  .nav-links {

    position: fixed;

    top: 0;

    right: -100%;

    width: 250px;

    height: 100vh;

    background: rgba(0, 0, 0, 0.9);

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    transition: right 0.3s ease-in-out;

    gap: 1rem;

    padding-top: 80px;

    padding-left: 20px;

  }



  .nav-links.active {

    right: 0;

  }



  .nav-links a {

    color: white;

    font-size: 1.2rem;

    text-transform: uppercase;

    font-weight: bold;

    text-align: left;

  }



  /* Efecto arcoíris en móvil */

  .nav-links li:nth-child(1) a:hover {

    color: #ff47e3;

  }



  .nav-links li:nth-child(2) a:hover {

    color: #ffd700;

  }



  .nav-links li:nth-child(3) a:hover {

    color: #7cfc00;

  }



  .nav-links li:nth-child(4) a:hover {

    color: #f0663f;

  }



  .nav-links li:nth-child(5) a:hover {

    color: #9370db;

  }



  .nav-links a.active {

    color: #2f3299;

  }



  .nav-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background: rgba(0, 0, 0, 0.5);

    opacity: 0;

    visibility: hidden;

    transition: opacity 0.3s ease, visibility 0.3s ease;

  }



  .nav-overlay.active {

    opacity: 1;

    visibility: visible;

  }

}







/*========== Hero Section ==========*/

.hero {

  position: relative;

  height: 115vh;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  padding: 0 1rem;

}



.carousel {

  position: absolute;

  width: 100%;

  height: 100%;

  display: flex;

  transition: transform 0.5s ease;

  filter: brightness(0.5);

}



.carousel-slide {

  min-width: 100%;

  height: 100%;

}



.carousel-slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.hero-content {

  position: relative;

  z-index: 1;

  text-align: center;

  color: white;

  padding: 0 1rem;

}



.hero-logo {

  width: 100%;

  max-width: 400px;

  margin-bottom: 1rem;

}



.hero h1 {

  font-size: 1.9rem;

  margin-bottom: 1rem;

}



/* Social Icon */

.social-icons {

  display: flex;

  gap: 1rem;

  padding: 1rem;

  justify-content: center;

}



.social-icons .icon img {

  width: 50px;

  height: 50x;

  transition: transform 0.3s ease, opacity 0.3s ease;

}



.social-icons .icon img:hover {

  transform: scale(1.1);

  opacity: 0.8;

}



/* Responsive Styles */

@media (max-width: 768px) {

  .menu-toggle {

    display: block;

  }



  .nav-links {

    display: none;

    flex-direction: column;

    position: absolute;

    top: 100%;

    right: 0;

    background: #5cd5f0;

    box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);

  }



  .nav-links.active {

    display: flex;

  }



  .hero h1 {

    font-size: 1.5rem;

  }



  .hero-logo {

    max-width: 80%;

  }

}



.cta-button {

  background-color: #4fb7ce;

  color: white;

  border: none;

  padding:15px 20px;

  font-size: 20px;

  cursor: pointer;

  margin: 20px 0;

  border-radius: 3px;

  transition: background-color 0.3s;

  font-family: "Grandstander", serif;

}



.cta-button:hover {

  background-color: #7e41f0c5;

}







/*========= Nosotros Section Styles ==========*/

.about {

  padding: 60px 20px;

  /* Reducir el padding en pantallas pequeñas */

  text-align: center;

  background-color: #f9f9f9;

}



.about-header h2 {

  font-size: 2.2rem;

  /* Tamaño de fuente más pequeño para pantallas pequeñas */

  font-weight: bold;

  margin-bottom: 2rem;

  color: #33728b;

}



.about-header p {

  font-size: 1.2rem;

  /* Tamaño de fuente más pequeño para pantallas pequeñas */

  color: #666;

  margin-bottom: 5rem;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  line-height: 1.5;

  /* Mejorar la legibilidad con un line-height adecuado */

}



.about-content {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: 5rem;

}



/* Estilos para el video */

.about-image video {

  width: 100%;

  max-width: 550px; /* Mismo ancho máximo que la imagen */

  border-radius: 10px; /* Bordes redondeados */

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */

  display: block; /* Asegura que el video se comporte como un bloque */

}



.about-details {

  display: flex;

  flex-direction: column;

  gap: 1rem;

  max-width: 600px;

}



.detail-item {

  display: flex;

  align-items: center;

  gap: 1rem;

  text-align: left;

}



.detail-item .icon img {

  width: 30px;

  height: 30px;

}



.detail-item p {

  font-size: 1rem;

  color: #666;

  margin-bottom: 0.5rem;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



.detail-item h3 {

  font-size: 1.4rem;

  margin-top: 0;

}



.detail-item:nth-child(1) h3 {

  color: #D959AC;

}



.detail-item:nth-child(2) h3 {

  color: #2044AB;

}



.detail-item:nth-child(3) h3 {

  color: #3CB878;

}



/* Responsive Design */

@media (max-width: 767px) {

  .about {

    padding: 40px 15px;

    /* Reducir el padding aún más en pantallas pequeñas */

  }



  .about-header h2 {

    font-size: 2rem;

    /* Tamaño de fuente más pequeño para pantallas pequeñas */

  }



  .about-header p {

    font-size: 1.2rem;

    /* Tamaño de fuente más pequeño para pantallas pequeñas */

    margin-bottom: 1.5rem;

    /* Reducir el margen inferior */

    text-align: left;

  }



  .about-image {

    display: none;

    /* Oculta el video en pantallas pequeñas */

  }



  .about-details {

    max-width: 100%;

    /* Ajusta el ancho del texto al 100% */

    text-align: left;

    /* Centra el texto */

  }



  .detail-item {

    flex-direction: column;

    /* Apila los elementos verticalmente */

    text-align: left;

    /* Centra el texto */

  }



  .detail-item .icon img {

    margin-bottom: 1rem;

    /* Añade espacio debajo del ícono */

  }

}



.text ul {

  list-style-type: disc;

  padding-left: 20px;

}



.text li {

  font-size: 1rem;

  margin-bottom: 5px;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  color: #666;

}





/*========== Restaurantes ==========*/

.restaurant-section {

  padding: 60px 20px;

  text-align: center;

  overflow: hidden;

  position: relative;

  background-image: url('../img/juego.jpg');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  color: #fff;

}



.restaurant-section::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: rgba(110, 109, 109, 0.763);

  z-index: 1;

}



.restaurant-section .image-container {

  position: relative;

  z-index: 2;

}



.restaurant-section h2 {

  font-size: 2.2rem;

  color: #34aad8;

  margin-bottom: 20px;

}



.restaurant-section h3 {

  font-size: 1.8rem;

  color: #83c0d8;

  margin-bottom: 15px;

}



.restaurant-section p {

  font-size: 1.2rem;

  color: #fff;

  line-height: 1.5;

  max-width: 1000px;

  text-align: justify;

  margin: 0 auto 30px;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



/* Estilos para el carrusel de logos */

.logo-carousel {

  width: 100%;

  overflow: hidden;

  position: relative;

  margin: 30px 0;

}

.textos-alineados
{
  font-size: 1.2rem;
  color: white;
  text-align: center !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
}



.carousel-track {

  display: flex;

  width: max-content;

  /* Asegura que el carrusel sea infinito */

  animation: scroll 20s linear infinite;

}



.carousel-item {

  flex: 0 0 auto;

  width: 150px;

  margin: 0 20px;

  text-align: center;

}



.carousel-item img {

  max-width: 100%;

  height: auto;

  border-radius: 90px;

  transition: transform 0.3s ease;

}



.carousel-item img:hover {

  transform: scale(1.1);

}



/* Animación del carrusel */

@keyframes scroll {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(-50%);

    /* Ajusta según el número de imágenes */

  }

}



/* Pausar animación al hacer hover */

.logo-carousel:hover .carousel-track {

  animation-play-state: paused;

}



/* Estilos para el botón "Más Información" */

.btn {

  display: inline-block;

  margin-top: 30px;

  padding: 20px 20px;

  font-size: 1rem;

  color: #fff;

  background-color: #ff6f61;

  border-radius: 3px;

  text-decoration: none;

  transition: background-color 0.3s ease;

}



.btn:hover {

  background-color: #e65a50;

}



/* Estilos para la animación de revelación */

.reveal {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.5s ease-out, transform 0.5s ease-out;

}



.reveal.active {

  opacity: 1;

  transform: translateY(0);

}





/*========== Servicios section ==========*/

#servicios {

  background-color: #fff;

  padding: 60px 20px;

  text-align: center;

}



#servicios .servicios-intro {

  font-size: 1.2rem;

  color: #555;

  max-width: 1200px;

  margin: 0 auto 40px;

  text-align: justify;

  line-height: 1.6;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



#servicios .servicios-container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Ajustamos el ancho mínimo */

  gap: 20px;

  max-width: 1200px;

  margin: 0 auto;

}



/* Estilos para cada servicio */

#servicios .servicio {

  position: relative;

  background-color: #f0f0f0; /* Color de fondo por defecto */

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  transition: background 0.3s ease;

  height: 350px; /* Altura fija para todos los cuadros */

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



/* Colores pasteles para cada servicio */

#servicios .servicio:nth-child(1) { background-color: #fff3e0; } 

#servicios .servicio:nth-child(2) { background-color: #e0f7fa; } 

#servicios .servicio:nth-child(3) { background-color: #fce4ec; } 

#servicios .servicio:nth-child(4) { background-color: #e8f5e9; } 

#servicios .servicio:nth-child(5) { background-color: #fff8e1; } 

#servicios .servicio:nth-child(6) { background-color: #f3e5f5; } 

#servicios .servicio:nth-child(7) { background-color: #f5e5e5; } 

#servicios .servicio:nth-child(8) { background-color: #e7e5f5; } 



#servicios .servicio-header {

  padding: 20px;

  text-align: center;

  transition: opacity 0.3s ease;

}



#servicios .servicio-header img {

  width: 80px;

  height: 80px;

  margin-bottom: 10px;

  transition: opacity 0.3s ease;

}



#servicios .servicio-header h3 {

  font-size: 1.5rem;

  color: #333;

  transition: opacity 0.3s ease;

}



#servicios .info {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  padding: 20px;

  background-color: rgba(255, 255, 255, 0.95); /* Fondo más opaco */

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease, visibility 0.3s ease;

  text-align: left;

  overflow-y: auto; /* Permite scroll si el contenido es muy largo */

}



#servicios .servicio:hover .servicio-header img,

#servicios .servicio:hover .servicio-header h3 {

  opacity: 0; /* Oculta el ícono y el título al hacer hover */

}



#servicios .servicio:hover .info {

  opacity: 1; /* Muestra la información al hacer hover */

  visibility: visible;

}



#servicios .info p {

  font-size: 1rem;

  color: #555;

  margin-bottom: 10px;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



#servicios .info ul {

  list-style-type: disc;

  padding-left: 20px;

  font-size: 0.9rem;

  color: #555;

  line-height: 1.8;

}



#servicios .info ul li {

  margin-bottom: 5px;

}



/* Media Queries para diseño responsivo */

@media (max-width: 768px) {

  #servicios .servicios-container {

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  }



  #servicios .servicio {

    height: 300px; /* Altura reducida para móviles */

  }



  #servicios .servicio-header img {

    width: 60px;

    height: 60px;

  }



  #servicios .servicio-header h3 {

    font-size: 1.2rem;

  }



  #servicios .info p {

    font-size: 0.9rem;

  }



  #servicios .info ul {

    font-size: 0.8rem;

  }

}





/*========== POR QUÉ ELEGIRNOS ==========*/

#por-que-elegirnos {

  background-color: #fff;

  padding: 60px 20px;

}



.contenedor {

  display: flex;

  align-items: center;

  justify-content: space-between;

  max-width: 1200px;

  margin: 0 auto;

  gap: 40px;

}



.equipo {

  color: #5b9bb4;

  font-weight: bold;

}



.informacion.izquierda h2 {

  font-family: "Grandstander", serif;

  font-size: 2.2rem;

  color: #33728b;

}



/* Información izquierda */

.informacion.izquierda {

  flex: 1;

  max-width: 600px;

  line-height: 1.8;

  font-size: 1.2rem;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}



/* Información derecha (visible en móviles) */

.informacion.derecha {

  flex: 1;

  max-width: 400px;

  /* Ancho máximo para la sección derecha */

  display: none;

  /* Ocultar en desktop */

}



/* Efecto 3D de la tarjeta */

.card {

  overflow: visible;

  width: 500px;

  /* Ajusta el ancho según sea necesario */

  height: 400px;

  /* Ajusta la altura según sea necesario */

  perspective: 1000px;

  /* Añade perspectiva para el efecto 3D */

}



.content {

  width: 100%;

  height: 100%;

  transform-style: preserve-3d;

  transition: transform 300ms;

  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.2);

  border-radius: 10px;

  position: relative;

}



.front,

.back {

  background-color: #ffffff;

  position: absolute;

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  border-radius: 10px;

  overflow: hidden;

}





.front .img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  /* Asegura que la imagen cubra todo el espacio */

  object-position: center;

  /* Centra la imagen */

  border-radius: 10px;

}



.back {

  transform: rotateY(180deg);

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: #699dc7;

  padding: 20px;

  box-sizing: border-box;

}



.back-content {

  text-align: center;

}



.back-content h3 {

  font-size: 2rem;

  color: #b5d9e7;

  margin-bottom: 15px;

}



.back-content ul {

  list-style-type: disc;

  /* Agrega puntos a la lista */

  padding-left: 20px;

  /* Espacio para los puntos */

}



.back-content ul li {

  font-size: 1.2rem;

  color: #fffdfd;

  line-height: 1.8;

  margin-bottom: 10px;

  text-align: left;

  position: relative;

}



.card:hover .content {

  transform: rotateY(180deg);

}



/* Imagen en la parte frontal */

.front .img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  border-radius: 10px;

}



/* Media Queries para diseño responsivo */

@media (max-width: 768px) {

  .contenedor {

    flex-direction: column;

    text-align: center;

    gap: 20px;

  }



  .informacion.izquierda,

  .informacion.derecha {

    max-width: 100%;

    /* Ocupa el ancho completo en móviles */

    text-align: left;

  }



  .informacion.derecha {

    display: none;

    /* Mostrar en móviles */

  }



  .card {

    order: -1;

    /* La tarjeta se coloca arriba en móviles */

    margin-bottom: 20px;

  }

}







/* Footer General */

#footer {

  background-color: #1d7798;

  padding: 40px 20px;

}



/* Contenedor principal - Se asegura de distribuir bien los elementos */

#footer .contenedor {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  max-width: 1200px;

  /* Se amplió el espacio disponible */

  margin: auto;

  align-items: flex-start;

  /* Asegura que los elementos se alineen bien */

  gap: 30px;

}



/* Sección Izquierda - Formulario de contacto */

#footer .contacto {

  flex: 1;

  max-width: 450px;

  /* Un poco más de ancho */

  text-align: left;

}



#footer .contacto h3 {

  font-size: 2rem;

  color: #7eb9d1;

  margin-bottom: 15px;

}



/* Campos del formulario */

#footer .contacto .campo {

  margin-bottom: 10px;

}



#footer .contacto input,

#footer .contacto select,

#footer .contacto textarea {

  width: 100%;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 5px;

  font-size: 1rem;

}



/* Botón de Envío */

#footer .contacto button {

  width: 40%;

  /* Se amplía para que quede mejor alineado */

  background-color: #5ea9c6;

  color: white;

  border: none;

  padding: 12px;

  font-size: 1rem;

  border-radius: 5px;

  cursor: pointer;

  transition: 0.3s;

}



#footer .contacto button:hover {

  background-color: #044c70;

}



/* Sección Derecha - Redes, Logo y Aviso */

#footer .info {

  flex: 1;

  max-width: 450px;

  text-align: right;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  /* Asegura que todo se mantenga alineado a la derecha */

}



/* Redes Sociales */

#footer .redes-sociales {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  /* Alinea todo a la izquierda */

  gap: 10px;

  /* Espaciado entre cada red social */

}



#footer .redes-sociales p {

  color: white;

  /* Texto en blanco */

  font-size: 1rem;

  font-weight: bold;

  margin-bottom: 10px;

}



#footer .redes-sociales a {

  display: flex;

  align-items: center;

  /* Alinea icono y texto en la misma línea */

  text-decoration: none;

  color: white;

  /* Texto en blanco */

  font-size: 1rem;

  font-weight: bold;

  gap: 8px;

  /* Espacio entre el icono y el texto */

  transition: 0.3s;

}



#footer .redes-sociales a img {

  width: 30px;

  /* Tamaño de los iconos */

  height: auto;

  display: block;

}



#footer .redes-sociales a:hover {

  color: #71b0c9;

  /* Cambio de color al pasar el mouse */

}



#footer .redes-sociales a img:hover {

  opacity: 0.7;

}



/* Logo de la ludoteca */

#footer .logo-ludoteca img {

  width: 200px;

  margin: 20px 0;

}



/* Aviso de privacidad */

#footer .aviso-privacidad {

  text-align: right;

}



#footer .aviso-privacidad a {

  color: #ffffff;

  text-decoration: none;

}



#footer .aviso-privacidad a:hover {

  text-decoration: underline;

}



/* Línea Divisora */

.footer-bottom {

  margin-top: 50px;

  text-align: center;

}



.footer-bottom hr {

  border: none;

  height: 1px;

  background: #ccc;

  margin-bottom: 10px;

}



.footer-bottom p {

  font-size: 0.9rem;

  color: #eeeeee;
}

:root {
  --line-color: #f07b26; /* color de la línea */
  --height: 2px;         /* grosor */
}

.soft-hr {
  border: 0; /* quita el borde default del hr */
  height: var(--height);
  margin: 5px 0;
  background: linear-gradient(90deg, transparent, var(--line-color), transparent);
  width: 100%; /* opcional: ancho menor y centrado */
  margin-left: auto;
  margin-right: auto;
}



/* Estilos Responsivos */

@media (max-width: 768px) {

  #footer .contenedor {

    flex-direction: column;

    text-align: center;

    align-items: center;

  }



  #footer .contacto,

  #footer .info {

    max-width: 100%;

    text-align: center;

    align-items: center;

  }



  #footer .redes-sociales {

    align-items: center;

  }



  #footer .redes-sociales a {

    margin: 5px;

  }



  #footer .aviso-privacidad {

    text-align: center;

  }



  #footer .contacto button {

    width: 100%;

  }

}



#mensaje {

  margin-top: 20px;

  padding: 10px;

  border-radius: 5px;

  font-size: 1rem;

}



#mensaje.success {

  background-color: #d4edda;

  color: #155724;

  border: 1px solid #c3e6cb;

}



#mensaje.error {

  background-color: #ffffff;

  color: #fafafa;

  border: 1px solid #ffffff;

}