/* ========================================================================== VARIABLES — Tema del cliente (EMMAX) Toda la personalización visual del producto vive aquí: para activar otro restaurante solo se cambian estas variables y las imágenes. Paleta sacada del collage de fondo (postales pintadas a mano). ========================================================================== */ :root { /* ----- Colores de marca (collage EMMAX) ----- */ --color-crema: #f2ece1; /* fondo papel */ --color-negro: #1b1b1b; /* tinta del logo */ --color-azul: #2b4ea2; /* corazón / mariposa */ --color-rojo: #d2352b; /* fresa / flores */ --color-amarillo: #e9b32a; /* girasol / limones */ --color-rosa: #e8c9c4; /* manchas rosadas */ /* ----- Roles (lo que usa el CSS de verdad) ----- */ --color-primario: var(--color-negro); --color-acento: var(--color-azul); --color-error: var(--color-rojo); --color-texto: var(--color-negro); --color-texto-invertido: #ffffff; /* Tarjeta "liquid glass" del formulario: crema translúcido sobre el collage, el blur lo pone styles.css */ --vidrio-fondo: rgba(242, 236, 225, 0.55); --vidrio-borde: rgba(255, 255, 255, 0.65); /* ----- Superficies de los controles ----- Las caras claras que se apoyan sobre el vidrio: campos, píldoras y la cita del mensaje. Son tokens (y no colores sueltos en styles.css) para que un cliente pueda tener su app en oscuro cambiando SOLO estas líneas, sin tocar ni un módulo. */ --campo-fondo: rgba(255, 255, 255, 0.75); --campo-borde: rgba(27, 27, 27, 0.25); --pildora-fondo: rgba(255, 255, 255, 0.6); --pildora-borde: rgba(27, 27, 27, 0.3); --cita-fondo: rgba(255, 255, 255, 0.6); --aviso-grave-fondo: rgba(210, 53, 43, 0.08); --boton-secundario-borde: rgba(27, 27, 27, 0.35); --boton-secundario-hover: rgba(255, 255, 255, 0.4); /* ----- Controles flotantes (píldoras de idioma y de la demo) ----- Colores SÓLIDOS, no vidrio: sobre el collage un translúcido se leía grisáceo. La opción ACTIVA usa el par contrario, así siempre destaca. En tema oscuro se intercambian (ver demo-fondos.css). */ --control-fondo: #ffffff; --control-texto: var(--color-negro); --control-fondo-activo: var(--color-negro); --control-texto-activo: #ffffff; /* ----- Fondo del cliente ----- Dos encuadres de la misma escena: el VERTICAL para pantallas altas (móvil) y el HORIZONTAL para apaisadas (laptop). Estos de aquí son el fondo POR DEFECTO (la variante 1): lo que se ve si el sorteo no llega a correr —JS desactivado, o el script inline del falla—. Nunca se queda sin fondo. El sorteo de verdad está más abajo, en el bloque de VARIANTES. */ --fondo-vertical: url(../images/fondo1.webp); --fondo-horizontal: url(../images/fondo_h1.webp); /* ----- Tipografía ----- */ --fuente-principal: "Jost", "Segoe UI", sans-serif; /* ----- Espaciados y formas ----- */ /* Alto real de .barra-superior: su padding (1rem arriba y abajo) más los 44px de las píldoras. El escenario reserva justo esto, así el contenido queda pegado bajo la barra sin que la barra lo pise. */ --altura-barra: calc(44px + 2rem + 1px); --border-radius: 14px; --sombra: 0 6px 24px rgba(27, 27, 27, 0.18); --sombra-suave: 0 2px 8px rgba(27, 27, 27, 0.12); /* ----- Tiempos de animación (los usa también transiciones.css) ----- Cortos y con propósito: 200-400 ms para cambios de vista */ --t-rapido: 0.25s; --t-medio: 0.4s; --t-splash: 1.1s; /* entrada inicial del logo, la única "lenta" */ } /* ========================================================================== VARIANTES DE FONDO — se sortea UNA por sesión -------------------------------------------------------------------------- Manu hizo tres versiones del collage para que el cliente eligiera una y al final se queda con las TRES: cada visita abre con una distinta. El sorteo lo hace un