/* Carta pública. * * El diseño es el del prototipo publicado «Menu ordering website» (La Ceniza), medido en su versión * en vivo —no estimado—: sus tokens (papel #f4ede0, papel hondo #eadfcb, tinta #241d16, tinta suave * #5c5142, línea #d8cbb2), sus tipografías (Fraunces para display, Work Sans para lectura, DM Mono * para precios y datos), sus medidas (contenedor 1152, tarjetas de radio 8 con borde de 1 px y foto en * 4:3, rejilla de 24 px de aire en 1/2/3 columnas, títulos de tarjeta en 18/500, descripción en 14, * precio en mono 14, pastillas mono de 12 con mayúsculas y filete de 0.3em en la ceja) y su fondo de * tres capas: dos resplandores tenues y un grano SVG incrustado. * * Dos cosas son nuestras y se dicen aquí para que nadie las confunda con el prototipo: * - El acento del prototipo es su terracota de marca. Aquí ese lugar lo ocupa el color del cliente, * oscurecido lo justo para leerse como texto sobre el papel (cp_color_legible). * - El prototipo lleva una foto en el hero y otra en cada tarjeta. Nuestras cartas todavía no tienen * ninguna: el hero queda tipográfico y el bloque de la foto sólo se dibuja cuando hay imagen. * * Todo se sirve desde el propio host: la CSP del subdominio sólo admite el origen propio, así que las * fuentes y el grano van dentro y no hay ni un CDN. */ @font-face{font-family:Fraunces;font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/fraunces-roman-latin.woff2) format('woff2')} @font-face{font-family:Fraunces;font-style:italic;font-weight:400 700;font-display:swap;src:url(assets/fonts/fraunces-italic-latin.woff2) format('woff2')} @font-face{font-family:'Work Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/work-sans-latin.woff2) format('woff2')} @font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/dm-mono-latin.woff2) format('woff2')} :root{ --papel:#f4ede0; --papel-hondo:#eadfcb; --tinta:#241d16; --tinta-suave:#5c5142; --tinta-tenue:#8a8072; --linea:#d8cbb2; --oliva:#5a5f3c; /* Los pisa el color del cliente desde la plantilla: --primario y --acento (su tono ya oscurecido para leerse como texto), --marca-tinta (la tinta que va encima) y --marca-rgb (el tinte del fondo). */ --primario:#241d16; --acento:#b23a20; --marca-tinta:#fff; --marca-rgb:178,58,32; --serif:Fraunces,'Iowan Old Style',Georgia,'Times New Roman',serif; --sans:'Work Sans',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --radio:8px; --alto-barra:52px; --ancho:1152px; --gutter:20px; --sombra-tarjeta:0 18px 50px -30px rgba(36,29,22,.7); --sombra-flotante:0 20px 60px -30px rgba(36,29,22,.6); } *{box-sizing:border-box} /* Sin esto, cualquier regla de autor con display pisa el [hidden] del navegador y los elementos ocultos (el buscador, el botón de instalar) aparecen igual. */ [hidden]{display:none!important} html{-webkit-text-size-adjust:100%} body{ margin:0;color:var(--tinta);font:400 16px/1.5 var(--sans); /* El fondo del prototipo: dos resplandores casi invisibles —el del cliente y el oliva— y el grano. */ background-color:var(--papel); background-image: radial-gradient(circle at 20% 30%,rgba(var(--marca-rgb),.03),rgba(0,0,0,0) 40%), radial-gradient(circle at 80% 70%,rgba(90,95,60,.035),rgba(0,0,0,0) 45%), url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'%2F%3E%3CfeColorMatrix type='saturate' values='0'%2F%3E%3C%2Ffilter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'%2F%3E%3C%2Fsvg%3E"); } a{color:inherit} button{font-family:inherit} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------------------------------------------------------------- Barra superior La del prototipo: pegada arriba, con filete inferior, marca a la izquierda y la acción a la derecha. El alto queda fijo en una variable porque la barra del buscador se pega justo debajo. */ .barra-superior{position:sticky;top:0;z-index:30;height:var(--alto-barra);border-bottom:1px solid var(--linea);background:rgba(244,237,224,.9);backdrop-filter:blur(12px)} .barra-superior-interior{max-width:var(--ancho);height:100%;margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px} .marca{display:flex;align-items:center;gap:12px;min-width:0} .logo{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radio);background:var(--primario);color:var(--marca-tinta);font:600 16px/1 var(--serif);flex:none} .marca-nombre{font:600 clamp(20px,5vw,24px)/1.2 var(--serif);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .barra-acciones{display:flex;align-items:center;gap:8px;flex:none} /* ---------------------------------------------------------------- Portada Cebra monoespaciada de acento, titular serif enorme y, si el negocio se presenta, su lema en la itálica del mismo serif: es la frase en itálica de acento del prototipo. */ .portada-interior{max-width:var(--ancho);margin:0 auto;padding:56px var(--gutter) 48px} .cebra{margin:0 0 16px;font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.3em;color:var(--acento)} .portada h1{margin:0;font:600 clamp(40px,9vw,72px)/.95 var(--serif);letter-spacing:-.02em;text-wrap:balance} .lema{margin:12px 0 0;font:400 italic clamp(20px,5vw,30px)/1.25 var(--serif);color:var(--acento);text-wrap:balance} .datos{display:flex;flex-wrap:wrap;gap:12px 40px;margin:28px 0 0;padding:0} .datos div{min-width:0} .datos dt{font:400 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--tinta-suave)} .datos dd{margin:7px 0 0;font-size:14px;line-height:1.4} .datos a{text-decoration:none;border-bottom:1px solid var(--linea)} .datos a:hover{border-bottom-color:var(--tinta)} .acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} /* Los botones de acción: la pastilla oscura del prototipo (la de «Tu pedido») y su hermana de filete. */ .boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:999px;border:1px solid var(--tinta);background:transparent;color:var(--tinta);font:500 14px/1.4 var(--sans);text-decoration:none;cursor:pointer} .boton:hover{background:var(--tinta);color:var(--papel)} .boton.principal{background:var(--tinta);color:var(--papel)} .boton.principal:hover{background:var(--acento);border-color:var(--acento)} .aviso-vista{margin:0;padding:14px var(--gutter);background:var(--papel-hondo);border-bottom:1px solid var(--linea);font:400 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--tinta-suave)} main,.pie{max-width:var(--ancho);margin:0 auto} main{padding:48px var(--gutter)} .pie{margin-top:64px;padding:32px var(--gutter);border-top:1px solid var(--linea);text-align:center;font:400 12px/1.8 var(--mono);color:var(--tinta-suave)} .pie p{margin:6px 0} .credito a{color:var(--tinta-suave);border-bottom:1px solid var(--linea)} /* ---------------------------------------------------------------- Buscador y secciones */ .barra{position:sticky;top:var(--alto-barra);z-index:20;margin:0 calc(var(--gutter) * -1) 0;padding:12px var(--gutter) 10px;background:var(--papel);border-bottom:1px solid var(--linea)} .buscador{display:block} .buscador input{width:100%;padding:11px 16px;border:1px solid var(--linea);border-radius:var(--radio);background:var(--papel-hondo);color:inherit;font:400 15px/1.2 var(--sans)} .buscador input::placeholder{color:var(--tinta-suave)} .buscador input:focus{outline:2px solid var(--acento);outline-offset:1px} .indice{display:flex;gap:8px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:none} .indice::-webkit-scrollbar{display:none} .indice a{flex:none;padding:6px 16px;border-radius:999px;font:400 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--tinta-suave);text-decoration:none;white-space:nowrap} .indice a:hover{background:var(--papel-hondo)} /* La sección a la vista la marca el guion con aria-current: la clase .activo no la pone nadie. */ .indice a[aria-current="true"]{background:var(--tinta);color:var(--papel)} .resultado{margin:24px 0 0;font:400 12px/1.4 var(--mono);color:var(--tinta-suave)} .seccion{margin:0 0 64px;scroll-margin-top:calc(var(--alto-barra) + 120px)} .seccion-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:12px;border-bottom:1px solid var(--linea)} .seccion h2{margin:0;font:600 clamp(24px,5vw,30px)/1.2 var(--serif);color:var(--tinta)} .cuenta{font:400 12px/1.4 var(--mono);color:var(--tinta-suave);white-space:nowrap} .seccion h3{margin:32px 0 0;font:400 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--tinta-suave)} /* ---------------------------------------------------------------- Las tarjetas del menú La tarjeta del prototipo: filete de 1 px, radio 8, fondo del mismo papel que la página —lo que la separa es el borde— y, cuando hay foto, el bloque de 4:3 arriba con las insignias encima. El nombre y el precio comparten línea (el precio a la derecha, en el acento mono del prototipo) y la acción es una pastilla de filete que ocupa el ancho. */ .platillos{list-style:none;margin:0;padding:0;display:grid;gap:24px} .platillo{margin:0;display:flex} /* align-items explícito: el navegador centra los hijos de un