/*slider turismo*/
.container{
    display: flex;
		flex-direction:row;
		gap:10px;
		justify-content: center;
		align-items: center;
	  
		padding: 20px;
		
	}

	.card{
		transition:transform 0.5s ease, box-shadow 0.3s ease;


		cursor: pointer;
	}

	.container img{
		width: 100%;
		height: 300px;
    object-fit: cover;
		border-radius: 10px;
		display: block;
		transition: box-shadow 0.3s ease;
    

	}

	.container:hover > :not(:hover){
		opacity: 0.2;
    transform-origin: center;

        
	}

	.card:hover{
		transform: scale(1.06);
    border-radius: 10px;
    
    
    box-shadow: 0 4px 12px rgba(139,18,38,0.6);
	}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        align-items: center;
    }
    .card {
        transform: none; /* evitar que se rompa el diseño en móviles */
    }
}

 

/*Botones mapa*/
.contenedor {
  display: flex;
  flex-direction: column; /* mapa arriba, botones abajo */
  align-items: center;
}

.mapa {
  flex: 1; /* ocupa el espacio principal */
}

.button{
  display:flex;
  justify-content: center;
  flex-direction: row; /* fila */
  gap: 10px;
  flex: 0 0 auto;
  margin-top: 5px;
  
}

/* Botón básico */
button {
  background: #b8860b;   /* Color de fondo */
  color: white;                /* Texto en blanco */
  padding: 10px 20px;          /* Espaciado interno */
  border: none;                /* Sin borde */
  border-radius: 20px;          /* Bordes redondeados */
  cursor: pointer;             /* Cursor tipo mano */
  font-size: 16px;             /* Tamaño de fuente */
  transition: background-color 0.3s ease;

}

/* Efecto al pasar el mouse */
button:hover {
  background-color: #8b1226;   /* Color más oscuro */
  box-shadow: 0 4px 12px rgba(139,18,38,0.6);
  transform: translateY(-5px);
}


/* 📱 Ajustes para móviles medianos */
@media (max-width: 768px) {
  .contenedor {
    flex-direction: column;   /* mapa arriba, botones abajo */
    align-items: stretch;
  }

  .button {
    flex-direction: row;
    flex-wrap: wrap;          /* si no caben, se acomodan en varias líneas */
    justify-content: center;
  }

  button {
    flex: 1;
    min-width: 100px;
    font-size: 14px;          /* texto más pequeño */
    padding: 8px 16px;        /* menos espacio interno */
  }
}

/* 📱 Ajustes para móviles muy pequeños */
@media (max-width: 480px) {
  .button {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;                 /* menos separación */
  }

  button {
    flex: 0 0 auto;
    min-width: 80px;          /* botones más compactos */
    font-size: 12px;          /* texto más pequeño */
    padding: 6px 10px;        /* menos espacio interno */
    border-radius: 12px;      /* bordes menos grandes */
  }
}








/*estilo eslogan*/
 /* Contenedor del encabezado */
    .header-text {
      display: flex;
      flex-wrap: wrap;          /* Permite que el texto baje de línea */
      justify-content: center;
      align-items: center;
      font-size: 3rem;          /* Tamaño base */
      text-align: center;
      margin: 20px;
      padding: 10px;
	    font-weight: bold;
	    font-family: 'Pacifico';
      background-color:transparent;
	    text-shadow: 0 4px 12px rgba(139,18,38,0.5);
    }

    /* Ajustes para pantallas medianas */
    @media (max-width: 768px) {
      .header-text {
        font-size: 1.5rem;      /* Reduce el tamaño de fuente */
        flex-direction: column; /* Coloca el texto en columna */
      }
    }

    /* Ajustes para pantallas pequeñas (móviles) */
    @media (max-width: 480px) {
      .header-text {
        font-size: 1.2rem;      /* Más pequeño aún */
        padding: 5px;
      }
    }