* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; text-decoration: none; } /* Custom properties */ :root { --blanco: #ffffff; --negro: #111111; --color-primario: #ffd375; --color-secundario: #690d0d; --color-fondo-carta: linear-gradient( -45deg, var(--blanco) 0%, transparent 30% ); --color-degradado: linear-gradient( -45deg, var(--color-primario) 0%, transparent 45% ); --color-degradado2: linear-gradient( -45deg, var(--color-primario) 0%, transparent 45% ); --color-fondo-index: var(--negro); --color-formulario: linear-gradient( -45deg, var(--color-primario) 0, var(--blanco) 40% ); /* Sombras */ --sombra: 6px 6px 8px #fff, -6px -6px 8px var(--negro); --sombra2: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); /* Botones */ --border: 2px double var(--color-primario); --border-radius: 20px; /* Tipografía */ --tipo-principal: 'Roboto', sans-serif; --tipo-secundaria: Verdana; /* Transition */ --transition: all 0.5s ease-in-out; /* Liquid Glass — efecto cristal estilo Apple Vision Pro */ --lg-bg-color: rgba(255, 255, 255, 0.25); --lg-highlight: rgba(255, 255, 255, 0.75); --lg-text: #ffffff; } html { color: var(--blanco); } body { background: var(--blanco); width: 100%; } /* fadeIn - En el de cada página */ .fade-in { animation: fadeIn ease 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Títulos de las familias de comidas y bebidas */ p { font-size: 1rem; /* white-space: pre-line; Valida los saltos de linea \n que inserto en los textos largos que tengo en la data*/ white-space: pre-line; color: var(--negro); } h2 { font-size: 1.1rem; font-weight: 600; color: var(--negro); } h3 { font-size: 1.1rem; color: var(--color-secundario); } h4 { font-size: 1.2rem; color: var(--negro); } /* ICONOS BOOTSTRAP */ i { font-size: 1.7rem; padding: 0 0.8rem; color: var(--color-secundario); } /* Iconos Cartas */ .bi-house-fill, .bi-heart-pulse, .star2 { font-size: 2rem; padding: 0; text-align: center; color: var(--color-secundario); } .star3 { font-size: 2rem; color: var(--color-secundario); padding: 0; } /* */ /* ******************** FOOTER ****************************** */ /* FOOTER. Da estilos a todos los footers */ .footer { display: flex; flex-direction: column; text-align: center; padding: 0.5rem; padding-bottom: 3rem; } /* Baner de alérgenos */ .baner__alergenos { max-width: 50rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0 auto; padding: 1rem; border-radius: var(--border-radius); background: var(--color-degradado); box-shadow: var(--sombra2); color: var(--color-primario); } .footer__imagen-alergenos { width: 90%; } .footer__boton-alergenos { width: auto; background: var(--color-degradado); border-radius: var(--border-radius); margin: 0 auto; padding: 0.3rem 1rem; text-align: center; box-shadow: var(--sombra); color: var(--color-secundario); } .footer__div { font-weight: bold; margin: 1rem; text-align: center; } .footer__div h3 { color: var(--color-secundario); } .footer__creditos { font-size: 0.8rem; text-align: center; color: var(--color-secundario); } .footer__creditos span { font-size: 0.8rem; } .email { text-align: center; padding: 1rem; color: var(--color-secundario); } .restaurant123 { color: var(--color-secundario); font-size: 0.8rem; } /* ************************************************ */ /* Logo de fondo */ .logo__fondo { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -2; background-image: url(/images/fondo.webp); background-size: cover; background-repeat: repeat; } .imagen__fondo { width: 100%; position: fixed; bottom: 0; right: 0; z-index: -2; } /* ***************** ANIMACIONES *************************** */ @keyframes rotation { from { transform: rotateX(180deg); } to { transform: rotateX(360deg); } } /* ********* FORMULARIO RESERVAS *************************** */ .form { position: fixed; top: 0; left: 0; z-index: 3; width: 90vw; height: 100vh; padding: 2rem; background: var(--color-formulario); /* backdrop-filter: blur(10px); */ /* Efecto cristal */ transition: all 0.5s ease-in-out; /* Ocultar menú lateral */ opacity: 0; visibility: hidden; transform: translateX(-100%); box-shadow: 38px 38px 48px #515151, -38px -38px 44px #ffffff; } .active { opacity: 1; visibility: visible; transform: translateX(0); } .form div { display: flex; flex-direction: column; gap: 0.1rem; } .form label { font-size: 1.2rem; color: #777777; display: inline-block; margin: 0.2rem; } .input-small { width: 60%; } .form input, .form select { padding: 0.4rem; background: var(--color-degradado); border-radius: var(--border-radius); border: 1px solid #55cb60; border-radius: 10px; font-size: 1rem; } .form textarea { width: 100%; padding: 0.4rem; background: var(--color-degradado); border-radius: var(--border-radius); border: 1px solid #55cb60; border-radius: 10px; font-size: 1rem; } .form span { color: #777777; } .label-aviso { white-space: pre; } .warning { color: rgb(225, 78, 78); opacity: 0; padding: 0.5rem 0; transition: all 0.7s ease-in-out; transform: translateX(-100%); } .active-warning { opacity: 1; transform: translateX(0); } .reservar { width: fit-content; margin: 0 auto; display: flex; justify-content: center; align-items: center; padding: 0.4rem 1.2rem; border: 1px solid var(--blanco); border-radius: 20px; background: linear-gradient( 270deg, var(--color-primario), var(--negro), var(--color-primario) ); background-size: 300% 100%; font-family: var(--tipo-principal); font-size: 1.3rem; font-weight: bold; letter-spacing: 0.05rem; text-transform: uppercase; color: var(--blanco); box-shadow: var(--sombra2); cursor: pointer; animation: degradadoMovil 5s ease infinite; transition: transform 0.3s ease, box-shadow 0.3s ease; } .reservar:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } /* Cerrar formulario de reservas */ .cerrar-formulario { position: absolute; top: 0.5rem; right: 1rem; font-size: 2rem; cursor: pointer; color: var(--color-primario); } .cerrar-formulario-desde-fuera { position: fixed; top: 0; right: -20%; width: 20%; height: 100vh; } /* ************************************************* */ /* BOTÓN "RESERVAR" EN EL HEADER */ /* ************************************************* */ /* Pill con degradado en movimiento (dorado → rojo → negro → dorado). margin-right: auto lo empuja a la izquierda del header (que es flex) y deja el resto (banderas) a la derecha. */ .btn-reservar-header { display: flex; justify-content: center; align-items: center; margin-right: auto; padding: 0.4rem 1.2rem; border: 1px solid var(--blanco); border-radius: 20px; background: linear-gradient( 270deg, var(--color-primario), var(--negro), var(--color-primario) ); background-size: 300% 100%; font-family: var(--tipo-principal); font-size: 1.3rem; font-weight: bold; letter-spacing: 0.05rem; text-transform: uppercase; color: var(--blanco); cursor: pointer; box-shadow: var(--sombra2); animation: degradadoMovil 5s ease infinite; transition: transform 0.3s ease, box-shadow 0.3s ease; } .btn-reservar-header:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } /* Animación del degradado en movimiento — compartida por .btn-reservar-header (header) y .reservar (submit del formulario) */ @keyframes degradadoMovil { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* =============================================================== LIQUID GLASS — efecto cristal estilo Apple Vision Pro Se aplica como clase adicional .glass-container al elemento que ya tiene su propio layout. Las 3 capas internas son absolutas, así que NO interfieren con flex/grid del contenedor. =============================================================== */ .glass-container { position: relative; overflow: hidden; color: var(--lg-text); box-shadow: 0 6px 6px rgba(0, 0, 0, 0.15), 0 0 20px rgba(0, 0, 0, 0.08); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2); } .glass-filter, .glass-overlay, .glass-specular { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } /* Capa 1 — desenfoque + distorsión de lente SVG */ .glass-filter { z-index: 0; backdrop-filter: blur(4px) saturate(120%) brightness(1.15); -webkit-backdrop-filter: blur(4px) saturate(120%) brightness(1.15); filter: url(#lensFilter); } /* Capa 2 — color semitransparente */ .glass-overlay { z-index: 1; background: var(--lg-bg-color); } /* Capa 3 — brillo especular interno */ .glass-specular { z-index: 2; box-shadow: inset 1px 1px 0 var(--lg-highlight), inset 0 0 5px var(--lg-highlight); } /* El resto del contenido del contenedor queda por encima */ .glass-container > *:not(.glass-filter):not(.glass-overlay):not(.glass-specular) { position: relative; z-index: 3; } /* MediaQuerys */ @media (min-width: 768px) { .logo__fondo2 { background-size: cover; } }