/* * Tema de marca Ramona para la página pública de reserva (`/r/ramona`). * Fuente: ../../brands/ramona/design-system/PATTERNS.md — el logo (§3) es * oficial; paleta (§4) y tipografías (§5) son una PROPUESTA de sistema de * apoyo. Fondo CREMA por decisión del dueño (2026-09-27), en lugar de los * "fondos oscuros cálidos" que sugiere §6 — ver DESIGN.md §13.9. * * Se activa con , que reserva.js pone según el slug * cargado. Se carga DESPUÉS de reserva-cliente.css (estilo nocturno de La * Princesa) y redefine lo necesario para una versión clara. Sin cambios de * lógica. * * Contraste sobre crema (`bone` #F6EADB): `chile` 7.8:1 → sirve para texto, * íconos, enlaces y foco, y como fondo de acciones con texto `bone`. * `ember` 2.2:1 → solo decorativo (gradiente del encabezado), nunca texto. */ :root[data-brand="ramona"] { --ramona-ink: #17100e; --ramona-cacao: #2a1a17; --ramona-bone: #f6eadb; --ramona-chile: #8c1725; --ramona-ember: #ea8a18; --ramona-sand: #cdb8a1; --bg: var(--ramona-bone); --bg-alt: #efdfcb; --surface: #fff8ef; --surface-sunken: #eedfcc; --border: rgba(23, 16, 14, 0.14); --border-strong: #9a7e6a; --text-primary: var(--ramona-ink); --text-secondary: #5a463c; --text-muted: #76625a; --accent: var(--ramona-chile); --accent-hover: #74121e; --accent-tint: rgba(140, 23, 37, 0.1); --accent-ink: var(--ramona-bone); --success: #3f6b3e; --success-tint: #e4ebdf; --warning: #b8791e; --warning-tint: #f6e8d3; --error: #b3261e; --error-tint: #f5dedc; --overlay: rgba(23, 16, 14, 0.45); --font-display: "Fraunces", Georgia, serif; --font-ui: "DM Sans", system-ui, sans-serif; --shadow-1: 0 1px 2px rgba(23, 16, 14, 0.06); --shadow-2: 0 4px 12px rgba(23, 16, 14, 0.1); --shadow-3: 0 12px 32px rgba(23, 16, 14, 0.18); --shadow-sticky: 0 -2px 12px rgba(23, 16, 14, 0.1); color-scheme: light; } /* Campos: borde visible sobre crema (≥3:1 contra la superficie). */ :root[data-brand="ramona"] .field__input, :root[data-brand="ramona"] .field__textarea { border-color: var(--border-strong); } /* Texto sobre chile: reserva-cliente.css lo oscurece pensando en el dorado. */ :root[data-brand="ramona"] .date-chip[aria-pressed="true"] .date-chip__day { color: rgba(246, 234, 219, 0.85); } :root[data-brand="ramona"] .btn-primary .btn__spinner { border-color: rgba(246, 234, 219, 0.35); border-top-color: var(--ramona-bone); } /* Texto del banner de aviso: legible sobre el fondo claro del aviso. */ :root[data-brand="ramona"] .banner--warning { color: #6b4c14; } /* ---------- Encabezado y barra fija ---------- */ /* Sin fotografía oficial del local (PATTERNS.md §7: no generar imágenes): calidez con gradientes muy tenues de ember y chile sobre crema. */ :root[data-brand="ramona"] .restaurant-header { background: radial-gradient(120% 70% at 12% 0%, rgba(234, 138, 24, 0.16) 0%, transparent 55%), radial-gradient(90% 60% at 90% 10%, rgba(140, 23, 37, 0.1) 0%, transparent 60%), linear-gradient(180deg, #f3e2cc 0%, var(--bg) 75%, var(--bg) 100%); } :root[data-brand="ramona"] .cta-bar { background: rgba(246, 234, 219, 0.94); } /* Logo oficial para fondos claros (Ramona_Logo_Principal_Transparente.svg, 2048×1569). Solo se fija el ancho; object-fit: contain y sin filtros (PATTERNS.md §3). El margen inferior respeta el aire mínimo del logo. */ :root[data-brand="ramona"] .restaurant-header__logo { width: 200px; aspect-ratio: 2048 / 1569; object-fit: contain; margin-bottom: var(--space-6); } @media (min-width: 768px) { :root[data-brand="ramona"] .restaurant-header__logo { width: 260px; } }