/* ============================= */ /* 0. RESET BÁSICO */ /* ============================= */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ============================= */ /* 1. CONTENEDOR PRINCIPAL */ /* ============================= */ body { font-family: 'Roboto', sans-serif; color: #f5f5f5; background-color: #000; /* En caso de que la imagen de fondo tarde en cargar */ width: 100%; } .logo-area { width: 100%; /* Asegura que ocupe todo el ancho del contenedor padre */ display: flex; justify-content: center; /* Centra horizontalmente logo + texto */ align-items: center; /* Centra verticalmente logo + texto */ padding: 20px 10px; flex-wrap: wrap; gap: 15px; text-align: center; /* Por si el texto en .hotel-name necesitase heredar centrado */ } .title-section { text-align: center; } .menu-container { position: relative; height: 100%; /* Imagen de fondo personalizada */ background-image: url('images/fondo.png'); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Overlay semitransparente para oscurecer y mejorar la legibilidad */ .menu-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.1); z-index: 0; } /* Todo el contenido debe estar por encima del overlay */ .menu-container > * { position: relative; z-index: 1; } /* ============================= */ /* 2. HEADER (LOGO + NOMBRE) */ /* ============================= */ .header-top { display: flex; align-items: center; justify-content: center; padding: 20px 10px; flex-wrap: wrap; gap: 15px; } .logo-img { max-width: 80px; height: auto; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)); } .hotel-name h1 { font-family: 'Great Vibes', cursive; font-size: 2.5rem; color: #ffd369; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7); margin-bottom: 4px; } .horario { text-align: center; } .detalle-horario { text-align: center; } .contact-info { font-size: 0.9rem; color: #e0e0e0; letter-spacing: 0.5px; margin: auto; text-align: center; } /* ============================= */ /* 3. MENÚ EN TRES COLUMNAS */ /* ============================= */ .menu-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1200px; margin: 30px auto 50px; padding: 0 20px; } /* Cada columna individual */ .column { background-color: rgba(0, 0, 0, 0.5); border-radius: 8px; padding: 15px; } /* Título de columna (p. ej. “ENTRANTES” / “PLATOS” / “BEBIDAS & POSTRES”) */ .column-title { font-family: 'Great Vibes', cursive; font-size: 1.8rem; color: #ffd369; text-align: center; margin-bottom: 12px; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); } /* Lista dentro de cada columna */ .column-list { list-style: none; padding: 0; margin: 0; } /* Nombre de sección dentro de la columna (por ejemplo “Tostadas”, “Tapas Varias”, etc.) */ .menu-section-title { font-family: 'Roboto', sans-serif; font-size: 1.2rem; font-weight: 500; border-bottom: 2px solid #ffd369; display: inline-block; padding-bottom: 4px; margin: 15px 0 10px 0; } /* Espacio extra para separar secciones */ .spacer { height: 15px; } /* Cada plato */ .menu-item { margin-bottom: 14px; } .item-header { display: flex; justify-content: space-between; align-items: baseline; } .item-name { font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 400; color: #ffffff; } .item-price { font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 500; color: #ffffff; } /* A) Por defecto (sin clase en ), oculto todo lo que tenga .lang-en */ .lang-en { display: none; } /* B) Cuando tenga la clase “en-mode”, oculto los .lang-es y muestro .lang-en */ body.en-mode .lang-es { display: none; } body.en-mode .lang-en { display: inline; /* O ‘block’ / ‘inline-block’, según el contexto */ } /* ========================================= */ /* 4. ICONOS DE ALÉRGENOS EN CADA PRODUCTO */ /* ========================================= */ /* 4.1 Regla base: iconos grandes (para la leyenda) */ .allergen-icon { width: 20px; /* Tamaño “normal” para leyenda */ height: auto; vertical-align: middle; margin-right: 4px; } /* 4.2 Iconos pequeños “junto a cada plato” */ .item-allergens-icons .allergen-icon { width: 12px; /* Tamaño reducido para cada producto */ height: auto; margin-right: 2px; } /* Contenedor de iconos dentro de cada plato */ .item-allergens-icons { margin-top: 4px; display: inline-block; vertical-align: middle; } /* ============================= */ /* 5. TABLA DE ALÉRGENOS */ /* ============================= */ /* 1) Regla general para que la imagen nunca sobrepase el ancho del contenedor */ /* ---------------------------- */ /* Imagen de la tabla de alérgenos (responsive) */ /* ---------------------------- */ /* Regla base: nunca exceda el 100% del ancho de su contenedor */ .tabla { width: 80%; margin: auto; text-align: center; } .tabla-icon { width: 80%; margin: auto; text-align: center; } .section-title { text-align: center; } .image-container .tostada-img { display: none; /* Corta/escala proporcional si es necesario */ } .image-container { display: none; } /* ---------------------------------------- */ /* Estilos para la sección de ubicación */ /* ---------------------------------------- */ .ubicacion { max-width: 1200px; margin: 0 auto; /* Centra la sección en la pantalla */ padding: 40px 20px; } /* ------------------------------------------- */ /* 1) Wrapper para centrar el mapa en escritorio */ .mapa-wrapper { width: 100%; /* Ocupa todo el ancho de .ubicacion */ max-width: 800px; /* Ajusta este valor a tu gusto (por ej. 800px, 900px, etc.) */ margin: 0 auto 20px; /* 0 arriba, auto a los lados (centra), 20px abajo */ } /* ------------------------------------------- */ /* 2) Contenedor responsivo que mantiene ratio 16:9 */ .mapa-responsive { position: relative; width: 100%; padding-bottom: 56.25%; /* Ratio 16:9 */ height: 0; overflow: hidden; border: 2px solid #000; border-radius: 6px; } /* ------------------------------------------- */ /* 3) El iframe ocupa todo el contenedor */ .mapa-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ------------------------------------------- */ /* 4) Ajuste para móvil: si quieres otro ratio */ @media (max-width: 480px) { .mapa-responsive { padding-bottom: 75%; /* Ratio 4:3 en móviles muy estrechos */ } } /* ============================= */ /* 6. PIE DE PÁGINA */ /* ============================= */ /* ======================================= */ /* Estilos para el footer y el icono IG */ /* ======================================= */ /* 1) Asegura el contenedor principal del footer centrado */ /* ========================================== FOOTER: CONTENEDOR PRINCIPAL Y ALINEADO ========================================== */ .footer { background-color: #000; /* Fondo oscuro para el footer */ padding: 20px 15px; /* Espacio interior */ box-sizing: border-box; } .footer-content { max-width: 1200px; /* Ancho máximo del contenido */ margin: 0 auto; /* Centra el footer en la pantalla */ display: flex; flex-wrap: wrap; /* Permite que, en móvil, los elementos se apilen */ justify-content: space-between; align-items: flex-start; /* Enlaza la parte superior de cada bloque horizontalmente */ row-gap: 12px; /* Espacio vertical entre filas en móvil */ column-gap: 20px; /* Espacio horizontal entre bloques en escritorio */ } /* ======================================================= 1) “Bisso” centrado, línea única, sin afectar lo demás ======================================================= */ .footer-title { display: block; /* Hace que ocupe toda la línea */ text-align: center; /* Centra el texto dentro de sí mismo */ font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 700; color: #ffffff; margin: 0 0 8px 0; /* Espacio debajo de “Bisso” */ } /* ======================================================= 2) Dirección y teléfono (texto left-aligned) ======================================================= */ .footer-text { font-family: 'Roboto', sans-serif; font-size: 0.9rem; color: #cccccc; line-height: 1.4; text-align: left; /* Asegura que las líneas queden alineadas a la izquierda */ margin: 0; /* Elimina márgenes innecesarios entre líneas */ } /* Si estás usando “.lang-es” y “.lang-en” para idiomas, no hace falta más: el JS ya está mostrando/ocultando la clase correspondiente. */ /* ======================================================= 3) BLOQUE “Síguenos en Instagram” ======================================================= */ .footer-social { display: flex; align-items: center; margin-top: 4px; /* Pequeño espacio sobre el icono */ } /* Texto “Síguenos en” */ .follow-us-text { font-family: 'Roboto', sans-serif; font-size: 1rem; color: #ffffff; /* Texto en blanco para contrastar */ margin-right: 8px; /* Separación entre texto e icono */ } /* El enlace que rodea al icono */ .instagram-link { display: inline-block; text-decoration: none; /* Quitar subrayado */ } /* Icono de Instagram */ .instagram-icon { width: 60px; /* Ajusta tamaño según necesites (ej. 20px, 28px…) */ height: 60px; transition: filter 0.2s ease, transform 0.2s ease; } /* Efecto al pasar el ratón sobre el icono */ .instagram-link:hover .instagram-icon { transform: scale(1.1); /* Escala ligera al hacer hover */ } /* ======================================================= 4) RESPONSIVE: MÓVIL / TABLET ======================================================= */ @media (max-width: 768px) { .footer-content { flex-direction: column; /* Apila verticalmente en pantallas estrechas */ align-items: center; /* Centra horizontalmente cada bloque */ text-align: center; /* Centra texto dentro de cada bloque si fuera necesario */ } /* Para que la dirección y teléfono sigan alineados a la izquierda pero sin salirse de centro, puedes encerrar ese texto en un contenedor del 100%. Si prefieres que se centren en móvil, elimina esta regla o cambia a text-align:center. */ .footer-text { width: 100%; text-align: center; margin-bottom: 12px; /* Espacio debajo antes de “Síguenos” */ } /* Centrar el bloque social en móvil */ .footer-social { justify-content: center; margin-top: 0; } .instagram-icon { width: 60px; /* Ajusta tamaño según necesites (ej. 20px, 28px…) */ height: 60px; transition: filter 0.2s ease, transform 0.2s ease; } } /* ============================= */ /* 7. RESPONSIVE (MÓVILES) */ /* ============================= */ @media (max-width: 768px) { .menu-columns { display: block; /* Pasa a una sola columna en móviles */ } .column { margin-bottom: 20px; } .header-top { flex-direction: column; gap: 8px; } /* 1) Header posición relativa */ .header-top { position: relative; overflow: hidden; /* Para recortar el pseudo‐elemento si aplicas border‐radius */ padding-top: 20px; padding-bottom: 20px; } /* 2) Pseudo‐elemento ::before contiene la imagen */ .header-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('images/fondo.png'); background-size: cover; background-position: center center; background-repeat: no-repeat; /* Si quieres difuminarla o bajarle opacidad, añade: */ opacity: 0.9; /* Ajusta al grado de transparencia deseado */ /* Opcional: desenfoque ligero para “difuminar” */ z-index: 0; } /* 3) Contenido del header por encima */ .header-top > * { position: relative; z-index: 1; /* Si quieres añadir un fondo sólido semitransparente tras el contenido: */ /* background-color: rgba(0,0,0,0.4); */ /* border-radius: 4px; */ } /* 4) Ajustes en dispositivos móviles (si quieres que el header sea más alto) */ @media (max-width: 768px) { .header-top { padding-top: 30px; padding-bottom: 30px; } } .hotel-name h1 { font-size: 3.5rem; font-weight: 700; -webkit-text-stroke: 0.0001px #000; } .hotel-name .contact-info { font-size: 0.85rem; } .menu-container { /* Centrar la parte superior de la imagen para que no se recorte donde no quieres */ background-size: contain; background-color: #000; background-image: none; } .menu-section-title { font-family: 'Montserrat', sans-serif; font-weight: 800; /* Negrita extra */ font-size: 1.4rem; /* Un pelín más grande */ color: #ffffff; /* Blanco puro */ text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.85); /* Sombra oscura fuerte para destacar */ margin-bottom: 14px; text-align: center; line-height: 1.2; } /* Contenedor rectangular para la imagen de Tostada */ .image-container { display: block; width: 100%; height: 180px; /* Altura fija para el rectángulo */ margin: 2px auto; /* Centra el bloque y separa del contenido */ border: 2px solid #000; /* Borde negro alrededor */ border-radius: 8px; /* Esquinas redondeadas */ background-color: rgba(0, 0, 0, 0.05); /* Opción: fondo muy tenue */ display: flex; justify-content: center; /* Centra la imagen dentro del rectángulo */ align-items: center; overflow: hidden; /* Corta cualquier parte que sobresalga */ aspect-ratio: 4 / 3; } /* Ajustes para que la imagen escale dentro del rectángulo */ .image-container .tostada-img { display: block; width: 380px; height: 120px; object-fit: cover; /* Corta/escala proporcional si es necesario */ } /* -------------------------------------------------- */ /* 2. NOMBRES Y PRECIOS DE CADA PLATO */ /* -------------------------------------------------- */ .menu-item .item-name, .menu-item .item-price { font-family: 'Roboto', sans-serif; font-weight: 500; /* Negrita */ font-size: 1.05rem; /* Ligeramente aumentado */ color: #ffffff; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.85); } .tabla { width: 300px; margin: auto; text-align: center; } .tabla-icon { width: 300px; margin: auto; text-align: center; } .section-title { text-align: center; } } @media (max-width: 480px) { .tabla { width: 300px; margin: auto; text-align: center; } .tabla-icon { width: 300px; margin: auto; text-align: center; } .section-title { text-align: center; } } /* --------------------------------------------------- */ /* Fondo distinto en MÓVIL para cada título de sección */ /* --------------------------------------------------- */ @media (max-width: 768px) { /* Tostadas */ /*.section-tostadas.column-list { background-image: url('images/section/tostada.png'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 12px 16px; margin: 12px 0; color: #fff; border-radius: 6px; background-color: rgba(0, 0, 0, 0.4); } .section-tostadas.column-list::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.00; z-index: 0; filter: blur(10px); } .section-tapas-variadas.column-list { background-image: url('images/section/tapas.png'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 12px 16px; margin: 12px 0; color: #ffffff; border-radius: 6px; background-color: rgba(0, 0, 0, 0.4); } .section-tapas-variadas.column-list::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.00; z-index: 0; filter: blur(10px); } .section-ensaladas.column-list { background-image: url('images/section/ensalada.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 12px 16px; margin: 12px 0; color: #fff; border-radius: 6px; } .section-ensaladas.column-list::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.00; z-index: 0; filter: blur(10px); } .section-platos-combinados.column-list { background-image: url('images/section/platocombinado.png'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 12px 16px; margin: 12px 0; color: #fff; border-radius: 6px; } .section-platos-combinados.column-list::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.00; z-index: 0; filter: blur(10px); } .section-carnes-brasas.column-list { background-image: url('images/section/carne.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 12px 16px; margin: 12px 0; color: #fff; border-radius: 6px; } .section-carnes-brasas.column-list::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.02; z-index: 0; filter: blur(10px); } .section-parrillada.column-list { background-image: url('images/section/parrillada.png'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 12px 16px; margin: 12px 0; color: #fff; border-radius: 6px; } .section-parrillada.column-list::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.02; z-index: 0; filter: blur(10px); } .section-postres.column-list { background-image: url('images/section/brownie.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 12px 16px; margin: 12px 0; color: #fff; border-radius: 6px; } .section-postres.column-list::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.02; z-index: 0; filter: blur(10px); } .section-embutidos.column-list { background-image: url('images/section/embutidos.png'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 12px 16px; margin: 12px 0; color: #fff; border-radius: 6px; } .section-embutidos.column-list::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.02; z-index: 0; filter: blur(10px); } .section-bebidas.column-list { background-image: url('images/fondo.png'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 12px 16px; margin: 12px 0; color: #fff; border-radius: 6px; } .section-bebidas.column-list::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.02; z-index: 0; filter: blur(10px); } .section-nombre.menu-section-title { background-image: url('ruta/a/tu-imagen.jpg'); … } */ /* Asegúrate de que el texto dentro de .menu-section-title resalte: */ .menu-section-title span { /* Por defecto el texto ya es blanco o dorado; si necesitas sombra: */ text-shadow: 1px 1px 3px rgba(0,0,0,0.8); } }