:root {
  --Color1: rgb(255, 1, 1);
  --Color2: #fecc03;
  --Color3: rgba(255, 0, 0, 0.288);
  --Color4: #007F36;
  --Color5: #38a1c2;
  --Color6: #f2a044;
  --Color7: #ffffff;
  --font: 'Dela Gothic One', sans-serif;
  --fuente2: 'Dancing Script', cursive; 
  --fuente3: 'Fira Sans', sans-serif;
  --fuente4: 'Lato', sans-serif;
  --fuente5: 'Merriweather', serif;
  --fuente6: 'Montserrat', sans-serif;
  --fuente7: 'Mulish', sans-serif;
  --fuente8: 'Nunito', sans-serif;
  --fuente9: 'Open Sans', sans-serif;
  --fuente10: 'Oswald', sans-serif;
  --fuente11: 'Pacifico', cursive;
  --fuente12: 'Poppins', sans-serif;
  --fuente13: 'Quicksand', sans-serif;
  --fuente14: 'Raleway', sans-serif;
  --fuente15: 'Roboto', sans-serif;    /* Estilo para las tarjetas del panel de administración */
  
  /* Botones dentro de las tarjetas */
  --fuente16: 'Source Code Pro', monospace;
  --fuente17: 'Ubuntu', sans-serif;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

h1 {
  font-size: 5rem;
}
h1 span {
  font-size: 60%;
}

h2 {
  font-size: 3.8rem;
}

h3 {
  font-size: 2.8rem;
}

h1,
h2,
h3 {
  text-align: center;
}

a {
  text-decoration: none;
}

body {
  background-image: url(../img/fondo-optimizado.svg);
  background-color: var(--Color7);
  margin: 0 auto;
  color: var(--Color1);
}


/* EDICION DEL CONTENIDO DE LA PAGINA */
.contenido {
  height: auto;
}

.productos {
  margin-top: 2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 5rem;
  padding: 0 0.5rem 5rem 0.5rem;
}

.producto {
  background-color: #fecc03;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-around;
  color: #007F36;
  width: 100%; 
  max-width: 50rem;
  min-width: 10rem;
  height: auto;
  font-family: var(--font);
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.producto.show {
  opacity: 1;
  transform: translateY(0);
}

@media only screen and (min-width: 768px) {
  .producto:hover {
    transform: scale(1.1);
    filter: grayscale(30%);
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.9);
  }
}

.producto h2 {
  text-align: center;
  margin: 0;
  padding: 1rem;
  font-size: 4rem;
  color: var(--Color4);
}
@media only screen and (max-width: 768px) {
  .producto h2 {
    font-size: 3.5rem;
  }
}

@media only screen and (max-width: 480px) {
  .producto h2 {
    font-size: 3rem;
  }
}

.producto img {
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: 1rem;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: invert(0);
}

@media only screen and (min-width: 768px) {
  .producto img:hover {
    transform: scale(1.05);
    filter: brightness(100%);
  }
}

.producto .img {
  align-items: center;
}

.producto p {
  font-size: 2rem;
  margin: 2rem;
  color: var(--Color4);
  font-family: var(--fuente10);
  text-align: justify;
  font-weight: 500;
}

.producto button {
  background-color: #007F36;
  color: white;
  border: none;
  width: 10rem;
  font-weight: bold;
  font-family: var(--fuente12);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.producto button:hover {
  background-color: #005924;
}

@media only screen and (min-width: 768px) {
  .producto button {
    display: none;
  }
}


/* EDICION DE LA PAGINA LUGARES  */
.main-lugares {
  background-color: rgba(255, 255, 255, 0.289);
  margin: auto;
  margin-top: 6rem;
  margin-bottom: 1rem;
  width: 96%;
  height: auto;
  padding-bottom: 3rem;
  border-radius: 0 0 20px 20px;
}
nav.departamentos {
  display: flex;
  justify-content: space-around;
  background-color: var(--Color2);
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative; /* Para el manejo de la posición del menú desplegable */
}

nav.departamentos a {
  font-family: var(--font);
  font-size: 1.5rem;
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
  text-shadow: 0 0 2px #000, 0 0 3px #000; /* Reduce el contorno negro */
}

nav.departamentos a:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

nav.departamentos a.active {
  background-color: #F20A0A;
  color: white;
}

nav.departamentos a:active {
  transform: scale(0.95);
}

.contact-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 1rem 2rem;
  font-size: 1.5rem;
  color: white;
  background-color: #F20A0A;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background-color 0.3s;
}

.contact-btn:hover {
  background-color: #d10909;
}

/* Estilos responsive */
@media (max-width: 768px) {
  nav.departamentos {
    flex-direction: column;
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 5rem; /* Ajustar según la posición del botón */
    left: 0;
    width: 100%;
    background-color: var(--Color2);
    border-radius: 0;
    padding: 1rem;
    box-shadow: none;
    z-index: 1000;
    margin-top: 1rem;
  }

  body.index-page nav.departamentos {
    margin-top: 29rem; /* Aplica solo en index.html */
}
nav.departamentos a {
  font-size: 2rem; /* Aumentar tamaño de fuente en móvil */
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  color: white; /* Color del texto */
  text-shadow: 0 0 2px #000, 0 0 3px #000; /* Reduce el contorno negro */
  font-size: 1.2rem; /* Ajusta el tamaño del texto si es necesario */
  font-weight: bold; /* Hace el texto más visible */
  text-align: center;
  margin: 0.5rem 0;
}
  nav.departamentos.active {
    display: flex; /* Mostrar menú cuando esté activo */
  }

  .menu-btn {
    display: block; /* Mostrar botón de menú en móvil */
    background-color: var(--Color2);
    color: white;
    font-size: 2rem;
    border: none;
    padding: 1rem;
    cursor: pointer;
    text-align: center;
    width: 100%; /* Ocupa todo el ancho */
    text-shadow: 0 0 2px #000, 0 0 3px #000;
  }

  .menu-btn:focus {
    outline: none; /* Quitar borde de enfoque */
  }
}

@media (min-width: 768px) {
  .menu-btn {
    display: none; /* Ocultar botón de menú en pantallas grandes */
  }
}

.index-page nav.departamentos.active {
  margin-top: 30rem !important; /* Ensure this rule is applied */
}

/* Contenedor general centrado */
.no-restaurants-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 3rem auto;
  padding: 2rem;
  border-radius: 1rem;
  max-width: 700px;
}
/* Estilos para la sección sin restaurantes */
.no-restaurants-container {
  text-align: center;
  margin: 2rem 0;
}

.no-restaurants {
  font-size: 2rem;
  color: var(--Color4);
}

/* Mensaje */
.no-restaurants {
  font-size: 3rem;
  font-family: var(--font);
  color: #FFFFFF;
  background-color: #F20A0A;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  margin-bottom: 2rem;
  width: 100%;
  text-align: center;
}

/* Botón */
.contact-btn {
  display: inline-block;
  background-color: #007F36; /* Verde oscuro */
  color: #FFFFFF; /* Texto blanco */
  padding: 1rem 2rem;
  font-size: 2rem;
  border: none;
  border-radius: 0.5rem;
  text-decoration: none;
  font-family: var(--font);
  transition: background-color 0.3s ease;
}

/* Hover del botón */
.contact-btn:hover {
  background-color: #005924; /* Verde más oscuro */
}

/* Responsividad */
@media (max-width: 768px) {
  .no-restaurants {
    font-size: 2.5rem;
    padding: 1.5rem;
  }
  
  .contact-btn {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  .no-restaurants {
    font-size: 2rem;
    padding: 1rem;
  }
  
  .contact-btn {
    font-size: 1.5rem;
  }
}



.restaurantes {
  margin-top: 5rem;
  display: flex;
  justify-content: space-around;
  justify-items: center;
  align-items: center;
  flex-wrap:wrap;
  gap: 5rem;
  padding: 0 2rem 3rem 2rem;
}

.restaurante {
  background-color: #fecc03;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-around;
  color: #007F36;
  width: 100%; 
  max-width: 30rem;
  min-width: 10rem;
  height: auto;
  font-family: var(--font);
  align-items: center;
  text-align: center;
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.restaurante.show {
  opacity: 1;
  transform: translateY(0);
}

@media only screen and (min-width: 768px) {
  .restaurante:hover {
    transform: scale(1.1);
    filter: grayscale(30%);
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.9);
  }
}

.restaurante h2 {
  text-align: center;
  margin: 0;
  padding: 1rem;
  font-size: 3rem;
  color: var(--Color4);
}
@media only screen and (max-width: 768px) {
  .restaurante h2 {
    font-size: 3.5rem;
  }
}

@media only screen and (max-width: 480px) {
  .restaurante h2 {
    font-size: 3rem;
  }
}

.restaurante img {
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: 1rem;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: invert(0);
}

@media only screen and (min-width: 768px) {
  .restaurante img:hover {
    transform: scale(1.05);
    filter: brightness(100%);
  }
}

.restaurante .img {
  align-items: center;
}

.restaurante p {
  font-size: 2rem;
  margin: 2rem;
  color: var(--Color4);
  font-family: var(--fuente10);
  text-align:justify;
  font-weight:500;
}

.restaurante button {
  background-color: #007F36;
  color: white;
  border: none;
  width: 10rem;
  font-weight: bold;
  font-family: var(--fuente12);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.restaurante button:hover {
  background-color: #005924;
}

@media only screen and (min-width: 768px) {
  .restaurante button {
    display: none;
  }
}


/* Estilos base del formulario de login */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url(./img/fondo.svg);
  background-size: cover;
  background-position: center;
}

.login-form {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 4rem;
  border-radius: 1rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  max-width: 40rem;
  width: 100%;
  text-align: center;
  font-family: var(--font);
}

.login-form h2 {
  font-size: 3.5rem;
  color: var(--Color4);
  margin-bottom: 2rem;
}

.login-form label {
  display: block;
  font-size: 1.8rem;
  color: var(--Color1);
  margin-bottom: 1rem;
  text-align: left;
}

.login-form input {
  width: 100%;
  padding: 1rem;
  font-size: 1.6rem;
  margin-bottom: 2rem;
  border: 1px solid var(--Color4);
  border-radius: 0.5rem;
  box-sizing: border-box;
  font-family: var(--fuente10);
}

.login-form input[type="submit"] {
  background-color: var(--Color4);
  color: var(--Color7);
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.login-form input[type="submit"]:hover {
  background-color: var(--Color6);
}

.login-form p {
  margin-top: 2rem;
  font-size: 1.4rem;
  color: black;
}

.login-form p a {
  color: var(--Color5);
  text-decoration: none;
  font-weight: bold;
}

.login-form p a:hover {
  text-decoration: underline;
}

/* Estilos responsive */
@media (max-width: 480px) {
  .login-form {
    padding: 2rem;
  }

  .login-form h2 {
    font-size: 3rem;
  }

  .login-form input {
    font-size: 1.4rem;
  }

  .login-form input[type="submit"] {
    font-size: 1.6rem;
  }
}
/* Estilos generales del botón */
button.btn-inicio {
  background-color: var(--Color4); /* Puedes ajustar este color con tu variable */
  color: white;
  font-family: var(--font); /* Usando tu fuente principal */
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}

/* Hover y animaciones */
button.btn-inicio:hover {
  background-color: var(--Color6); /* Cambia a un tono más oscuro en hover */
  transform: translateY(-3px); /* Leve elevación al pasar el ratón */
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

/* Efecto activo (al hacer clic) */
button.btn-inicio:active {
  background-color: var(--Color5); /* Cambia a otro tono en clic */
  transform: translateY(0); /* Elimina la elevación para un efecto de "presionado" */
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}

/* Estilos únicos para la sección de administración */
.admin-form {
  width: 100%;
  max-width: 600px;
  margin: 80px auto 0 auto; /* Ajusta el margin-top aquí */
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}
.admin-form h2 {
  font-family: 'Dela Gothic One', sans-serif;
  text-align: center;
  color: #333;
  font-size: 2rem;
}

.admin-form label {
  display: block;
  margin-top: 15px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2em;
}

.admin-form input[type="text"],
.admin-form textarea,
.admin-form input[type="file"],
.admin-form select {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.admin-form button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Dela Gothic One', sans-serif;
}

.admin-form button:hover {
  background-color: #555;
}

.admin-form textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 10rem;
}

/* Estilo del botón de cerrar sesión */

/* Modal de confirmación */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  width: 90%;
  max-width: 400px;
}

.modal-content h3 {
  margin-bottom: 20px;
  font-family: var(--fuente3);
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.modal-buttons button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Dela Gothic One', sans-serif;
}

.cancel-btn {
  background-color: #f44336;
  color: #fff;
}

.confirm-btn {
  background-color: #4CAF50;
  color: #fff;
}

/* Responsividad */
@media (max-width: 768px) {
  .admin-form {
      padding: 15px;
  }

  .modal-content {
      width: 95%;
  }
}

/* Aumentar el tamaño de los campos de entrada y etiquetas */
.admin-form label {
  font-size: 1.5em; /* Aumentar el tamaño de las etiquetas */
  margin-top: 20px; /* Más espacio entre las etiquetas */
}

.admin-form input[type="text"],
.admin-form textarea,
.admin-form input[type="file"],
.admin-form select {
  font-size: 1.2em; /* Aumentar el tamaño del texto en los campos */
  padding: 15px; /* Más espacio interno */
  margin-top: 10px; /* Más espacio entre los campos */
}

/* Aumentar el tamaño de los botones */
.admin-form button {
  font-size: 1.5em; /* Aumentar el tamaño del texto en los botones */
  padding: 15px; /* Más espacio interno */
  margin-top: 25px; /* Más espacio entre el botón y los campos */
}

/* Ajustar el tamaño del modal */
.modal-content {
  padding: 30px; /* Más espacio interno */
  font-size: 1.2em; /* Aumentar el tamaño del texto */
}

/* Aumentar el tamaño de los campos de redes sociales */
#redes-sociales-enlaces input {
  font-size: 1.2em; /* Aumentar el tamaño del texto */
  padding: 10px; /* Más espacio interno */
  margin-bottom: 10px; /* Más espacio entre los campos */
}

/* Ajustar el tamaño de los selectores de fechas */
#opcion_automatica select,
#opcion_manual input[type="date"] {
  font-size: 1.2em; /* Aumentar el tamaño del texto */
  padding: 10px; /* Más espacio interno */
  margin-top: 10px; /* Más espacio entre los campos */
}

/* Aumentar el tamaño de los botones del modal */
.modal-buttons button {
  font-size: 1.2em; /* Aumentar el tamaño del texto */
  padding: 10px 20px; /* Más espacio interno */
}

/* Ajustar el tamaño de los mensajes de éxito y error */
.alert {
  font-size: 1.2em; /* Aumentar el tamaño del texto */
  padding: 15px; /* Más espacio interno */
  border-radius: 8px; /* Bordes más redondeados */
}

/* Aumentar el tamaño de los campos de redes sociales */
#redes-sociales-enlaces input {
  font-size: 1.2em; /* Aumentar el tamaño del texto */
  padding: 10px; /* Más espacio interno */
  margin-bottom: 10px; /* Más espacio entre los campos */
}

#map {
  width: 100%;
  height: 50vh; /* Ajusta la altura al 50% del viewport */
  max-height: 500px; /* Altura máxima para pantallas grandes */
  margin-bottom: 20px;
  border-radius: 10px; /* Opcional: bordes redondeados */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Opcional: sombra para diseño */
}

@media (max-width: 768px) {
  #map {
    width: 100%; /* Deja un espacio de 10px en cada lado */

      height: 40vh; /* Reduce la altura en pantallas pequeñas */
  }
}

/* Ajustar el mapa con márgenes laterales */
body #map-index {
width: 100%; /* Deja un espacio de 10px en cada lado */
height: 70vh; /* Ajusta la altura al 50% del viewport */
max-height: 500px; /* Altura máxima para pantallas grandes */
margin: 0 auto; /* Centra el mapa horizontalmente */
border-radius: 10px; /* Bordes redondeados */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra alrededor del mapa */
}

/* Eliminar espacio entre el nav y el mapa */
nav.departamentos {
margin-bottom: 0; /* Elimina el margen inferior del nav */
}

/* Ajustes responsivos para el mapa */
@media (max-width: 768px) {
#map-index {
  width: calc(100% - 0px); /* Reduce aún más el espacio en pantallas pequeñas */
  height: 40vh; /* Reduce la altura en pantallas pequeñas */
}
}

/* Estilo general para el botón "Ver tu ubicación" */
#get-location-btn {
display: block;
margin: 20px auto; /* Aumenta el margen para mayor separación */
padding: 30px 60px; /* Duplica el tamaño del botón */
background-color: var(--Color4); /* Verde oscuro consistente con el diseño */
color: var(--Color7); /* Texto blanco */
font-family: var(--fuente12); /* Usa la fuente 'Poppins' definida en las variables */
font-size: 2.4rem; /* Duplica el tamaño del texto */
font-weight: bold; /* Hace el texto más visible */
border: none;
border-radius: 16px; /* Bordes redondeados más grandes */
cursor: pointer;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
}

#get-location-btn:hover {
background-color: var(--Color6); /* Cambia a un tono más claro al pasar el mouse */
transform: scale(1.1); /* Efecto de zoom al pasar el mouse */
}

#get-location-btn:active {
transform: scale(0.9); /* Efecto de clic */
}

/* Estilo responsivo para pantallas pequeñas */
@media (max-width: 768px) {
#get-location-btn {
  padding: 24px 48px; /* Ajusta el tamaño del botón */
  font-size: 2rem; /* Ajusta el tamaño del texto */
}
}

/* Estilo responsivo para pantallas muy pequeñas */
@media (max-width: 480px) {
#get-location-btn {
  padding: 20px 40px; /* Ajusta el tamaño del botón */
  font-size: 1.8rem; /* Ajusta el tamaño del texto */
}
}

/* Estilo para la sección de introducción */
.intro-section {
text-align: center;
margin: auto;
margin-top: 6rem;
margin-bottom: 1rem;
width: 98%;
height: auto;
padding: 30px 30px 0 30px;
max-width: 100%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 15px;
box-shadow: none; /* Eliminada la sombra */
}

.intro-section::before {
content: '';
position: absolute;
top: 10px; /* Ajusta este valor para bajar el efecto */
left: 0;
width: 100%;
height: calc(100% - 20px); /* Ajusta este valor para reducir la altura del efecto */
mask-image: none; /* Elimina el efecto de desvanecimiento */
-webkit-mask-image: none; /* Compatibilidad con WebKit */
background: linear-gradient(135deg, var(--Color1), var(--Color2)); /* Degradado llamativo */
border-radius: 15px;
z-index: -1;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Efecto de desvanecimiento */
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Compatibilidad con WebKit */
}


/* Estilo para el título principal */
.intro-title {
font-family: var(--font);
font-size: 4rem;
color: var(--Color7);
margin-bottom: 20px;
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
letter-spacing: 2px;
}

/* Estilo para el texto descriptivo */
.intro-text {
font-family: var(--fuente12);
font-size: 1.8rem;
color: var(--Color7);
line-height: 1.9;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
max-width: 80%;
margin: 0 auto;
}

/* Responsividad para pantallas medianas */
@media (max-width: 768px) {
.intro-title {
  font-size: 3.5rem;
}

.intro-text {
  font-size: 1.6rem;
  max-width: 90%;
}
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 480px) {
.intro-section {
  padding-left: 0;
  padding-right: 0;
}

.intro-title {
  font-size: 3rem;
}

.intro-text {
  font-size: 1.4rem;
  max-width: 95%;
}
}

.main-lugares-index {
margin: auto;
margin-top: 3rem;
margin-bottom: 1rem;
width: 96%;
height: auto;
padding-bottom: 1.5rem;
border-radius: 0 0 20px 20px;
}