* { 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: #3dbedb; /* cyan vibrante — acentos */ --color-secundario: #003959; /* negro — títulos secundarios */ --color-texto: #111111; /* texto principal en negro */ --color-descripcion: #1a5d72; /* azul oscuro — descripciones */ --color-fondo-carta: linear-gradient( -45deg, rgba(61, 190, 219, 0.2) 0%, transparent 20% ); --color-degradado: linear-gradient( -55deg, var(--color-primario) 0%, transparent 50% ); --color-degradado2: linear-gradient( 135deg, var(--blanco) 0%, var(--blanco) 80%, var(--color-primario) 100% ); /* Sombras */ --sombra: 4px 4px 12px rgba(0, 0, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.7); /* 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; } html { color: var(--negro); } body { width: 100%; } /* Fondo global fijo de la web. Se hace con pseudo-elemento ::before en lugar de background-attachment: fixed porque iOS Safari y algunos navegadores móviles ignoran "fixed" en backgrounds. z-index: -3 → queda detrás del logo de fondo (.logo__fondo está en -2). */ body::before { content: ""; position: fixed; inset: 0; z-index: -3; background: url("/images/fondo.webp") center center / cover no-repeat; } /* HERO compartido entre index, carta y drinks */ .index__hero { width: 100%; max-width: 50rem; margin: 0.8rem 0; border-radius: var(--border-radius); background: var(--color-degradado); box-shadow: var(--sombra); } .index__hero-img { width: 90%; margin: 0 auto; padding: 2rem 0rem; } /* fadeIn - En el de cada página */ .fade-in { animation: fadeIn ease 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Descripciones de productos — azul oscuro sobre fondo claro */ 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(--color-descripcion); } h2 { font-size: 1.5rem; font-weight: 600; } h3 { font-size: 1rem; } h4 { color: var(--color-texto); font-size: 1.2rem; } /* ICONOS BOOTSTRAP */ i { font-size: 1.5rem; padding: 0 0.8rem; } /* 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; padding: 0; color: var(--color-secundario); } /* */ /* ******************** FOOTER ****************************** */ /* FOOTER. Da estilos a todos los footers */ .footer { display: flex; flex-direction: column; text-align: center; padding: 0.5rem; padding-bottom: 8rem; } /* 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(--sombra); color: var(--negro); } .footer__imagen-alergenos { width: 90%; } .footer__boton-alergenos { width: auto; color: var(--negro); background: var(--color-degradado); border-radius: var(--border-radius); margin: 0 auto; padding: 0.3rem 1rem; text-align: center; box-shadow: var(--sombra); } .footer__div { font-weight: bold; margin: 1rem; text-align: center; color: var(--negro); } .footer__creditos { font-size: 0.8rem; text-align: center; } .footer__creditos span { font-size: 0.8rem; color: var(--color-primario); } .email { text-align: center; padding: 1rem; } .restaurant123 { color: var(--negro); font-size: 0.8rem; } /* ************************************************ */ /* Logo de fondo */ .logo__fondo { width: 100%; height: 100%; position: fixed; top: 0; left: 5%; z-index: -2; background-image: url(/images/logo_fondo1.webp); background-size: 50dvw; background-repeat: no-repeat; background-position: center; } .logo__fondo-bebidas { width: 50%; max-width: 20rem; position: fixed; top: 50%; left: 55%; transform: translate(-50%, -50%); z-index: -2; } .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: 20; width: 90vw; height: 100vh; padding: 2rem; background: var(--blanco); 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 rgba(0, 0, 0, 0.2), -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: var(--negro); display: inline-block; margin: 0.2rem; } .input-small { width: 60%; } .form input, .form select { color: var(--negro); padding: 0.4rem; background: var(--blanco); border-radius: var(--border-radius); border: 1px solid var(--color-primario); border-radius: 10px; font-size: 1rem; } .form textarea { width: 100%; padding: 0.4rem; background: var(--blanco); border-radius: var(--border-radius); border: 1px solid var(--color-primario); 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 hereda el mismo look que .boton-whatsapp (ver más abajo). Solo añade lo necesario para centrarlo dentro del formulario. */ .reservar { display: block; width: fit-content; margin: 1.5rem auto; text-decoration: none; } /* Cerrar formulario de reservas */ .cerrar-formulario { position: absolute; top: 0.5rem; right: 1rem; font-size: 2rem; cursor: pointer; color: var(--negro); } .cerrar-formulario-desde-fuera { position: fixed; top: 0; right: -20%; width: 20%; height: 100vh; } /* Look compartido del botón RESERVAR: el flotante de cada página (.boton-whatsapp) y el de envío del formulario (.reservar). */ .boton-whatsapp, .reservar { --reservar-azul: var(--color-secundario); --reservar-azul-claro: var(--color-primario); padding: 0.3em 1.2rem; text-align: center; font-size: 1.3rem; font-weight: 600; letter-spacing: 0.05em; color: var(--reservar-azul); border: 2px solid var(--blanco); border-radius: 20px; background: linear-gradient( -45deg, var(--reservar-azul) 10%, transparent 45%, transparent 5%, var(--blanco) 80% ) padding-box, linear-gradient( 90deg, #fff, #fff, var(--reservar-azul-claro), #fff, #fff ) border-box; background-size: 100% 100%, 300% 100%; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15), -4px -4px 12px rgba(255, 255, 255, 0.7); cursor: pointer; animation: border-shine 6s linear infinite; } /* Posicionamiento solo del flotante */ .boton-whatsapp { position: fixed; top: 1rem; left: 1rem; z-index: 10; } /* Brillo deslizante del borde */ @keyframes border-shine { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 300% 50%; } } /* La clase .easy-index se mantiene en el HTML como hook del click handler, pero no necesita estilos propios — hereda todo de .boton-whatsapp */ /* MediaQuerys */ @media (min-width: 768px) { .logo__fondo2 { background-size: cover; } }