/* Reset básico */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif; /* Fuente para texto general */
line-height: 1.6;
color: #eee; /* Color de texto claro */
background-color: #111; /* Fondo oscuro, cercano al negro del logo */
}
h1, h2, h3 {
font-family: 'Cinzel Decorative', cursive; /* Fuente para títulos, más decorativa */
color: #FFC107; /* Un color dorado/amarillo que combina con el logo */
margin-bottom: 1rem;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header y Navegación */
header {
background-color: #000; /* Negro sólido para la cabecera */
color: #fff;
padding: 10px 0;
position: fixed; /* Mantener la cabecera fija en la parte superior */
width: 100%;
top: 0;
left: 0;
z-index: 1000; /* Asegura que esté por encima de otros elementos */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo img {
height: 60px; /* Ajusta la altura del logo */
display: block; /* Elimina espacio extra bajo la imagen */
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
color: #eee; /* Color de los enlaces de navegación */
text-decoration: none;
font-weight: bold;
padding: 5px 0;
transition: color 0.3s ease;
}
nav ul li a:hover {
color: #FFC107; /* Color al pasar el ratón */
}
/* Secciones principales */
main {
padding-top: 80px; /* Añade espacio en la parte superior para que el contenido no quede bajo la cabecera fija */
}
.section {
padding: 60px 0; /* Espacio vertical entre secciones */
text-align: center;
}
.section:nth-child(odd) { /* Estilo para secciones alternas si quieres */
background-color: #1a1a1a;
}
.bg-dark {
background-color: #0a0a0a; /* Un tono aún más oscuro para algunas secciones */
}
/* Sección Hero (Inicio) */
.hero-section {
background: url('tu-imagen-fondo.jpg') no-repeat center center/cover; /* Reemplaza 'tu-imagen-fondo.jpg' */
color: #fff;
padding: 100px 20px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
min-height: 500px; /* Altura mínima */
}
.hero-section h1 {
color: #FFC107; /* Color del título en el hero */
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
.hero-section p {
font-size: 1.2rem;
margin-bottom: 30px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
/* Botón */
.btn {
display: inline-block;
background-color: #FFC107;
color: #111;
padding: 10px 25px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s ease, color 0.3s ease;
}
.btn:hover {
background-color: #e0a800; /* Un tono más oscuro al pasar el ratón */
color: #000;
}
/* Sección Menú */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Columnas responsivas */
gap: 30px;
margin-top: 30px;
text-align: left;
}
.menu-item {
background-color: #1c1c1c;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.menu-item h3 {
color: #FFD54F; /* Un color ligeramente diferente para los títulos del menú */
margin-bottom: 10px;
text-align: center;
}
.menu-item ul {
list-style: disc;
margin-left: 20px;
color: #bbb;
}
.menu-item li {
margin-bottom: 5px;
}
/* Sección Eventos */
.event-list {
display: flex;
flex-wrap: wrap; /* Permite que los eventos se envuelvan en pantallas pequeñas */
justify-content: center;
gap: 30px;
margin-top: 30px;
}
.event-item {
background-color: #1c1c1c;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
text-align: left;
max-width: 400px; /* Ancho máximo para cada evento */
}
.event-item h3 {
color: #FFD54F;
margin-bottom: 10px;
}
.event-item p {
margin-bottom: 5px;
color: #bbb;
}
.event-item span {
font-weight: bold;
color: #eee;
}
/* Sección Contacto y Ubicación */
.contact-info, .map-container {
margin-top: 30px;
text-align: center;
}
.contact-info p {
margin-bottom: 10px;
}
.contact-info a {
color: #FFC107;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-info a:hover {
color: #e0a800;
}
.social-links a {
color: #FFC107;
text-decoration: none;
margin: 0 10px;
transition: color 0.3s ease;
}
.social-links a:hover {
color: #e0a800;
}
.map-container {
overflow: hidden; /* Asegura que el mapa se mantenga dentro de sus límites */
border-radius: 8px;
margin-top: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* Footer */
footer {
background-color: #000;
color: #bbb;
text-align: center;
padding: 20px 0;
margin-top: 40px; /* Espacio entre la última sección y el footer */
}
footer .container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
footer .social-links a {
color: #bbb;
transition: color 0.3s ease;
}
footer .social-links a:hover {
color: #eee;
}
/* Estilos responsivos básicos */
@media (max-width: 768px) {
header .container {
flex-direction: column;
}
nav ul {
margin-top: 10px;
flex-wrap: wrap;
justify-content: center;
}
nav ul li {
margin: 5px 10px;
}
.hero-section h1 {
font-size: 2rem;
}
.section {
padding: 40px 0;
}
.menu-grid {
gap: 20px;
}
}
@media (max-width: 480px) {
.logo img {
height: 50px;
}
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 5px 0;
}
.hero-section h1 {
font-size: 1.8rem;
}
h2 { font-size: 1.8rem; }
h3 { font-size: 1.3rem; }
.menu-item {
padding: 15px;
}
.event-item {
padding: 15px;
}
}