/* ---
Código html:
--- */
/* ---
Estilos para el encabezado fijo de la página
El encabezado incluye:
- Logo del restaurante
- Botón de cambio de tema (claro/oscuro)
- Menú de navegación responsive
- Efectos de transición suaves para el cambio de tema
Clases relacionadas:
- .header: Contenedor principal del encabezado
- .hd-p-logo: Estilo para el texto del logo
- .hd-bn-modos: Botón de cambio de tema
- .hd-bn-hamburguesa: Botón del menú hamburguesa
- .hd-nav: Navegación principal
--- */
/* Estilo base para el encabezado fijo */
.header {
/* Posicionamiento fijo en la parte superior */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height); /* Usa la variable definida en :root */
/* Fondo con efecto vidrio esmerilado */
background: rgba(217, 195, 195, 0.75);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
/* Flexbox para alinear elementos */
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
/* Asegura que el encabezado esté por encima de otros elementos */
z-index: 1000;
/* Sombra y borde inferior */
box-shadow:
0 2px 8px var(--color-shadow),
0 1px 2px rgba(0, 0, 0, 0.06);
border-bottom: 1px solid var(--color-section-border);
/* Transiciones suaves para cambios de tema */
transition:
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease;
}
/* Estilos para el encabezado en modo oscuro */
body.dark .header {
/* Fondo más oscuro para el modo oscuro */
background: rgba(30, 30, 30, 0.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-bottom-color: var(--color-section-border-dark);
/* Sombras más pronunciadas para el modo oscuro */
box-shadow:
0 2px 8px var(--color-shadow-dark),
0 1px 2px rgba(0, 0, 0, 0.3);
}
/* ---
Estilos para el logo del restaurante
El logo utiliza un efecto de gradiente animado y es un elemento
clave en la identidad visual del sitio.
Estados:
- Estado normal: Muestra el gradiente animado
- Hover: Efecto de escala sutil
- Modo oscuro: Ajusta los colores para mejor contraste
Efectos visuales:
- Gradiente animado con movimiento suave
- Sombra sutil para dar profundidad
- Transición suave en interacción
--- */
/* Estilo base para el texto del logo */
.hd-p-logo {
/* Espaciado interno */
padding: 0.5rem 0.5rem;
/* Tipografía */
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 0.3px;
margin: 0;
/* Efecto de gradiente animado */
background: linear-gradient(
135deg,
var(--color-primary) 0%,
var(--color-primary-light) 50%,
var(--color-primary) 100%
);
background-size: 200% 200%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientShift 3s ease infinite;
/* Efectos visuales */
filter: drop-shadow(0 2px 8px rgba(230, 57, 70, 0.3));
text-shadow: 0 1px 2px rgba(230, 57, 70, 0.1);
/* Transiciones */
transition:
color 0.3s ease,
transform 0.2s ease;
/* Comportamiento del texto */
user-select: none;
-webkit-user-select: none;
cursor: default;
}
/* Efecto al pasar el cursor sobre el logo */
.hd-p-logo:hover {
transform: scale(1.03);
}
/* Ajustes para el modo oscuro */
body.dark .hd-p-logo {
color: var(--color-primary-dark);
text-shadow: 0 1px 2px rgba(239, 68, 68, 0.15);
}
/* ---
Estilos para los botones del encabezado
Incluye estilos para:
- Botón de cambio de tema (modo claro/oscuro)
- Botón de menú hamburguesa
- Estados: normal, hover, active
- Modo oscuro
Características:
- Efecto de onda al hacer clic
- Transiciones suaves
- Diseño neumórfico
- Adaptación al modo oscuro
--- */
/* Estilos base para los botones del encabezado */
.hd-bn-modos,
.hd-bn-hamburguesa {
/* Reset de estilos por defecto */
background: none;
border: none;
/* Tipografía y cursor */
font-size: 1.5rem;
cursor: pointer;
color: var(--color-text);
/* Diseño flexible */
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
/* Espaciado y tamaño */
padding: 0.5rem;
margin: 0 0.25rem;
min-width: 2.5rem;
min-height: 2.5rem;
border-radius: 0.5rem;
/* Efecto neumórfico */
background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.05));
box-shadow:
4px 4px 8px rgba(0, 0, 0, 0.1),
-4px -4px 8px rgba(255, 255, 255, 0.5),
inset 2px 2px 4px rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
/* Posicionamiento y desbordamiento */
position: relative;
overflow: hidden;
/* Transiciones */
transition: all 0.3s ease;
/* Mejora de accesibilidad */
-webkit-tap-highlight-color: transparent;
}
/* Efecto de onda al hacer clic */
.hd-bn-modos::before,
.hd-bn-hamburguesa::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(230, 57, 70, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
/* Animación de onda al hacer clic */
.hd-bn-modos:active::before,
.hd-bn-hamburguesa:active::before {
width: 200%;
height: 200%;
}
/* Efecto hover */
.hd-bn-modos:hover,
.hd-bn-hamburguesa:hover {
background-color: var(--color-section-bg-alt);
color: var(--color-primary);
transform: scale(1.05);
}
/* Efecto al hacer clic */
.hd-bn-modos:active,
.hd-bn-hamburguesa:active {
transform: scale(0.95);
}
/* Ajustes para modo oscuro - estado normal */
body.dark .hd-bn-modos,
body.dark .hd-bn-hamburguesa {
color: var(--color-text-dark);
}
/* Ajustes para modo oscuro - estado hover */
body.dark .hd-bn-modos:hover,
body.dark .hd-bn-hamburguesa:hover {
background-color: var(--color-section-bg-alt-dark);
color: var(--color-primary-dark);
}
/* Control de visibilidad de iconos de tema */
.hd-bn-modos-sun,
.hd-bn-modos-moon {
display: none;
}
/* Mostrar sol en modo claro */
body:not(.dark) .hd-bn-modos-sun {
display: inline;
}
/* Mostrar luna en modo oscuro */
body.dark .hd-bn-modos-moon {
display: inline;
}
/* Estilos para el botón de hamburguesa */
.hd-bn-hamburguesa .bi-list {
display: inline;
}
.hd-bn-hamburguesa .bi-x-lg {
display: none;
}
/* Estados del botón de hamburguesa cuando está activo */
.hd-bn-hamburguesa.activo .bi-list {
display: none;
}
.hd-bn-hamburguesa.activo .bi-x-lg {
display: inline;
}
/* ---
Estilos para el menú de navegación
Componentes principales:
- Contenedor del menú (.hd-nav)
- Lista de navegación (.hd-nav-ul)
- Elementos del menú (.hd-nav-ul-li-a)
- Efectos hover y activos
- Adaptación al modo oscuro
Características:
- Menú desplegable responsive
- Efecto de subrayado animado
- Transiciones suaves
- Scroll suave a las secciones
--- */
/* Contenedor principal del menú de navegación */
.hd-nav {
/* Posicionamiento debajo del encabezado */
position: absolute;
top: var(--header-height);
left: 0;
right: 0;
/* Estilo visual */
background-color: var(--color-section-bg);
border-top: 1px solid var(--color-section-border);
box-shadow: 0 4px 12px var(--color-shadow);
/* Comportamiento por defecto (oculto) */
display: none;
flex-direction: column;
/* Espaciado y scroll */
padding: 1rem;
max-height: calc(100vh - var(--header-height));
overflow-y: auto;
/* Transiciones suaves */
transition:
background-color 0.3s ease,
border-color 0.3s ease;
}
/* Ajustes para el modo oscuro */
body.dark .hd-nav {
background-color: var(--color-section-bg-dark);
border-top-color: var(--color-section-border-dark);
box-shadow: 0 4px 12px var(--color-shadow-dark);
}
/* Clase para mostrar el menú */
.hd-nav.nav-abierto {
display: flex;
}
/* Estilos para la lista de navegación */
.hd-nav-ul {
/* Reset de estilos por defecto */
list-style: none;
padding: 0;
margin: 0;
/* Diseño de columna */
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Estilos para los enlaces del menú */
.hd-nav-ul-li-a {
/* Reset de estilos */
text-decoration: none;
color: var(--color-text);
/* Tipografía */
font-size: 1.125rem;
font-weight: 500;
/* Espaciado y forma */
padding: 0.75rem 1rem;
border-radius: 0.5rem;
display: block;
/* Transiciones */
transition: all 0.3s ease;
position: relative;
}
/* Efecto de subrayado animado */
.hd-nav-ul-li-a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: linear-gradient(
90deg,
transparent,
var(--color-primary),
transparent
);
transform: translateX(-50%);
transition: width 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
border-radius: 2px;
}
/* Animación del subrayado al hacer hover */
.hd-nav-ul-li-a:hover::after {
width: 100%;
}
/* Ajustes del subrayado para modo oscuro */
body.dark .hd-nav-ul-li-a::after {
background: linear-gradient(
90deg,
transparent,
var(--color-primary-dark),
transparent
);
}
/* Efecto hover en los enlaces */
.hd-nav-ul-li-a:hover {
background-color: var(--color-section-bg-alt);
color: var(--color-primary);
transform: translateX(0.25rem);
}
/* Ajustes para modo oscuro - estado normal */
body.dark .hd-nav-ul-li-a {
color: var(--color-text-dark);
}
/* Ajustes para modo oscuro - estado hover */
body.dark .hd-nav-ul-li-a:hover {
background-color: var(--color-section-bg-alt-dark);
color: var(--color-primary-dark);
}
/* Ajuste de scroll para enlaces de anclaje */
[id] {
scroll-margin-top: var(--header-height);
}
/* ---
Estilos para el submenú desplegable
Componentes:
- Contenedor del submenú (.submenu)
- Elementos del submenú (li a)
- Estados (.submenu-abierto)
- Adaptación al modo oscuro
Características:
- Efecto de vidrio esmerilado
- Animaciones suaves
- Diseño 3D sutil
- Transiciones fluidas
- Adaptación al modo oscuro
--- */
/* Estilos base del submenú */
.submenu {
/* Comportamiento por defecto (oculto) */
display: none;
list-style: none;
margin: 1rem 0 0 0;
padding: 0;
/* Bordes y efectos visuales */
border-left: 4px solid var(--color-primary);
border-top: 1px solid var(--color-section-border);
border-radius: 0 0.75rem 0.75rem 0;
/* Efecto de vidrio esmerilado */
background: linear-gradient(
135deg,
rgba(217, 195, 195, 0.95) 0%,
rgba(222, 196, 196, 0.98) 100%
);
backdrop-filter: blur(15px);
/* Sombras y profundidad */
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.15),
0 2px 8px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
/* Efectos 3D */
transform-style: preserve-3d;
perspective: 1000px;
}
/* Estado abierto del submenú */
.submenu-abierto {
display: block;
opacity: 1;
transform: translateY(0) scale(1);
}
/* Estilos para los enlaces del submenú */
.submenu li a {
display: block;
padding: 1rem 1.25rem;
color: var(--color-primary);
text-decoration: none;
/* Tipografía */
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
/* Forma y espaciado */
border-radius: 0.5rem;
/* Transiciones */
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* Posicionamiento */
position: relative;
overflow: hidden;
z-index: 2;
}
/* Efecto hover en los enlaces del submenú */
.submenu li a:hover {
transform: translateY(-2px);
background-color: var(--color-section-bg-alt);
}
/* Ajustes para modo oscuro - contenedor */
body.dark .submenu {
background: linear-gradient(
135deg,
rgba(42, 42, 42, 0.95) 0%,
rgba(30, 30, 30, 0.98) 100%
);
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.5),
0 2px 8px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* Ajustes para modo oscuro - enlaces hover */
body.dark .submenu li a:hover {
transform: translateY(-2px);
background-color: var(--color-section-bg-alt-dark);
}
/* Efecto hover en enlaces (complementario) */
.submenu li a:hover::after {
opacity: 1;
}
/* ---
Animaciones personalizadas
--- */
/* Animación para el efecto de gradiente en el logo */
@keyframes gradientShift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Media query para pantallas medianas (≥768px) */
@media (min-width: 48rem) {
/* Ajuste del logo para pantallas más grandes */
.hd-p-logo {
font-size: 1.5rem;
padding: 0.5rem 1rem;
}
/* Estilos de navegación para escritorio */
.hd-nav {
position: static;
display: flex !important;
flex-direction: row;
align-items: center;
background: none;
padding: 0 1rem;
border: none;
box-shadow: none;
max-height: none;
overflow: visible;
}
/* Estilo de la lista de navegación en fila */
.hd-nav-ul {
flex-direction: row;
gap: 0.5rem;
}
/* Ocultar menú hamburguesa en escritorio */
.hd-bn-hamburguesa {
display: none;
}
/* Estilo de enlaces de navegación */
.hd-nav-ul-li-a {
font-size: 1rem;
padding: 0.625rem 1rem;
}
/* Efecto hover para enlaces */
.hd-nav-ul-li-a:hover {
transform: translateY(-2px);
background-color: var(--color-section-bg-alt);
}
/* Modo oscuro para hover */
body.dark .hd-nav-ul-li-a:hover {
background-color: var(--color-section-bg-alt-dark);
}
/* Posicionamiento relativo para submenús */
.hd-nav-ul-li {
position: relative;
}
/* Estilos del submenú desplegable */
.hd-nav-ul-li:hover > .submenu {
display: block;
position: absolute;
top: 80%;
left: -20%;
min-width: 12rem;
z-index: 1001;
margin: 0.5rem 0 0 0;
background-color: var(--color-section-bg);
border: 1px solid var(--color-section-border);
border-left-width: 0.25rem;
box-shadow: 0 0.5rem 1.5rem var(--color-shadow);
}
/* Modo oscuro para submenús */
body.dark .hd-nav-ul-li:hover > .submenu {
background-color: var(--color-section-bg-dark);
border-color: var(--color-section-border-dark);
border-left-color: var(--color-primary-dark);
box-shadow: 0 0.5rem 1.5rem var(--color-shadow-dark);
}
/* Efecto hover para ítems del submenú */
.submenu li a:hover {
padding-left: 1.25rem;
}
/* Márgenes para el botón de modo */
.hd-bn-modos {
margin: 0 0.5rem;
}
}
/* ============================================================================
MEDIA QUERY - PANTALLAS GRANDES (≥1024px)
============================================================================
Ajustes específicos para pantallas de escritorio grandes.
Optimización de espaciados, tamaños de fuente y comportamientos interactivos.
============================================================================ */
@media (min-width: 64rem) {
/* Aumento del tamaño del logo para mejor legibilidad en pantallas grandes */
.hd-p-logo {
font-size: 1.75rem; /* Tamaño de fuente más grande para el logo */
}
/* Mayor separación entre elementos de navegación */
.hd-nav-ul {
gap: 1rem; /* Incremento del espacio entre elementos del menú */
}
/* Ajuste del padding para enlaces de navegación */
.hd-nav-ul-li-a {
padding: 0.75rem 1.25rem; /* Mayor espacio interno para mejor clic */
}
/* Optimización del botón de cambio de modo (claro/oscuro) */
.hd-bn-modos {
font-size: 1.625rem; /* Tamaño de icono aumentado */
min-width: 3rem; /* Ancho mínimo aumentado */
min-height: 3rem; /* Altura mínima aumentada */
}
/* Ajuste del ancho del submenú desplegable */
.hd-nav-ul-li:hover > .submenu {
min-width: 14rem; /* Mayor ancho para acomodar texto más largo */
}
/* Estilos base para los elementos del submenú */
.submenu li a {
padding: 0.875rem 1.25rem; /* Espaciado interno consistente */
}
/* Efecto hover más pronunciado en submenú */
.submenu li a:hover {
padding-left: 1.5rem; /* Desplazamiento mayor al hacer hover */
}
}
/* ============================================================================
MEDIA QUERY - PANTALLAS MUY GRANDES (≥1440px)
============================================================================
Optimizaciones específicas para pantallas de alta resolución y monitores grandes.
Ajustes de tipografía, espaciado y contenedores para aprovechar el espacio adicional.
============================================================================ */
@media (min-width: 90rem) {
/* Aumento del tamaño del logo para mantener proporción en pantallas extra grandes */
.hd-p-logo {
font-size: 2rem; /* Tamaño de fuente aumentado para mejor legibilidad */
}
/* Mayor separación entre elementos de navegación para pantallas más anchas */
.hd-nav-ul {
gap: 1.5rem; /* Espaciado incrementado para distribuir mejor el espacio */
}
/* Ajuste fino de tipografía y espaciado para mejor legibilidad */
.hd-nav-ul-li-a {
font-size: 1.0625rem; /* Tamaño de fuente ligeramente mayor */
padding: 0.875rem 1.5rem; /* Mayor espacio interno para mejor clic */
}
}
/* ============================================================================
ESTADOS DE FOCO PARA ACCESIBILIDAD
============================================================================
Estilos para mejorar la accesibilidad en navegación por teclado.
Asegura que los elementos interactivos sean claramente visibles al recibir foco.
============================================================================ */
.hd-bn-modos:focus-visible,
.hd-bn-hamburguesa:focus-visible,
.hd-nav-ul-li-a:focus-visible {
outline: 2px solid var(--color-primary); /* Contorno visible para elementos con foco */
outline-offset: 2px; /* Espacio entre el borde y el contorno para mejor visibilidad */
}
/* Modo oscuro para estados de foco */
body.dark .hd-bn-modos:focus-visible,
body.dark .hd-bn-hamburguesa:focus-visible,
body.dark .hd-nav-ul-li-a:focus-visible {
outline-color: var(--color-primary-dark); /* Color de contorno adaptado al modo oscuro */
}
/* ============================================================================
PREFERENCIAS DE REDUCCIÓN DE MOVIMIENTO
============================================================================
Mejora la accesibilidad para usuarios con preferencia de movimiento reducido.
Desactiva animaciones y transiciones cuando el usuario lo solicite.
============================================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important; /* Prácticamente elimina las animaciones */
transition-duration: 0.01ms !important; /* Prácticamente elimina las transiciones */
}
}