/* JOSHTML v2 — estilos base. Todo cuelga de variables --jos-*, que applyBrand() sobrescribe con la marca del documento. Móvil primero: los sitios de restaurante se ven en el teléfono. Sin @import, sin fuentes remotas: la CSP del hosting manda. */ :root { --jos-bg: #0a0a0b; /* Segunda superficie. Ocho pantallas del mismo plano se leen como una sola cosa barata; alternar el fondo le da al ojo dónde apoyarse y marca dónde acaba una sección. Se deriva de la marca (no es un gris fijo) para que applyBrand() la arrastre sola: quien cambie --jos-bg no tiene que acordarse de esta. */ --jos-bg-2: color-mix(in srgb, var(--jos-bg) 96%, var(--jos-ink)); --jos-ink: #f4f1ea; --jos-accent: #c8102e; --jos-accent2: #d4a437; /* La tinta que va ENCIMA del acento (botones). No se puede fijar en #fff: un acento claro —un dorado, un ámbar, un lima— deja el rótulo del botón en 2:1 y el botón principal del sitio se vuelve el elemento menos legible de la página. Se declara en la marca (`brand.onAccent`) porque sólo quien eligió el acento sabe qué tinta lo contrasta; el valor por omisión conserva el blanco de los acentos oscuros. */ --jos-btn-ink: #fff; --jos-panel: rgba(255, 255, 255, .05); --jos-line: rgba(255, 255, 255, .12); --jos-radius: 14px; /* Tres papeles, no dos. Separarlos es lo que permite que --jos-display sea una blackletter sin volver ilegible la interfaz. */ --jos-display: ui-sans-serif, system-ui, "Helvetica Neue", sans-serif; /* titulares grandes */ --jos-ui: ui-sans-serif, system-ui, "Helvetica Neue", sans-serif; /* nav, botones, etiquetas */ --jos-body: ui-sans-serif, system-ui, "Helvetica Neue", sans-serif; /* texto corrido */ --jos-tenue: color-mix(in srgb, var(--jos-ink) 58%, transparent); --jos-ancho: 1080px; --jos-aire: 22px; /* aire lateral */ /* MEDIA ración de aire vertical: el bloque pone la mitad arriba y la mitad abajo, así el hueco entre dos secciones contiguas es UNA ración, no la suma de dos. Antes eran 82px + 82px = 164px de negro muerto entre la carta y lo siguiente. Y va en clamp() porque 82px fijos son un lujo para un bloque de tres líneas: el aire debe crecer con el viewport, no con la terquedad del CSS. */ --jos-aire-b: clamp(34px, 4.6vw, 52px); } .jos-root *, .jos-root *::before, .jos-root *::after { box-sizing: border-box; } .jos-root { color: var(--jos-ink); font: 400 16.5px/1.65 var(--jos-body); -webkit-font-smoothing: antialiased; } .jos-root img { max-width: 100%; display: block; } /* El :where() es lo que hace que estos reset SEAN reset. Escritos como `.jos-root p` pesaban (0,1,1) y le ganaban a cualquier `.jos-clase` (0,1,0): el `margin: 12px auto 22px` de .jos-band__desc computaba 0px y la caja se iba contra el borde izquierdo. Con :where() pesan (0,1,0) y las clases de abajo, por ir después, mandan. Lo mismo destapa .jos-b__title, .jos-hero__sub, .jos-menu__catname y .jos-plan__feats, que llevaban tiempo con el margen muerto. El ancla es el caso que más caro salió, y por eso va aquí y no suelta. Los 14 bloques no emiten un solo