/* ═══════════════════════════════════════════════════════════════════════════ Carta digital · Lapriex Digital Todo el color/redondeo sale de variables que rellena el JSON del restaurante. Los valores de aquí son solo el arranque (evitan el parpadeo antes del JS). ═══════════════════════════════════════════════════════════════════════════ */ @font-face{ font-family:'Fraunces'; src:url('../fonts/fraunces-latin-var.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; } @font-face{ font-family:'Jakarta'; src:url('../fonts/jakarta-latin-var.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; } /* Caras de titular. Solo se descarga la que use la carta: el lo genera el servidor por restaurante y precarga únicamente la suya. Todas son OFL, autoalojadas — la carta no pide nada a un tercero mientras alguien la lee sentado en una mesa. */ /* ── Cirílico ───────────────────────────────────────────────────────────── Fraunces y Jakarta no tienen cirílico, así que en ucraniano la carta caía a la letra por defecto del móvil: se leía, pero perdía el diseño. Se declaran con el MISMO nombre de familia y acotadas al rango cirílico. Dos cosas salen de ahí solas: · no hay que cambiar una sola línea de CSS en el resto de la hoja; · el navegador SOLO se las descarga si de verdad hay cirílico en pantalla, así que el que lee la carta en castellano no paga ni un byte. No son las mismas familias —Fraunces no existe en cirílico—, sino las más parecidas que sí lo tienen: Playfair Display para los títulos y Manrope para el texto. Solo se notaría comparando dos idiomas lado a lado, y quien lee en ucraniano ve su carta entera coherente. */ @font-face{ font-family:'Fraunces'; src:url('../fonts/cirilico-serif.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face{ font-family:'Jakarta'; src:url('../fonts/cirilico-sans.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face{ font-family:'Playfair'; src:url('../fonts/playfair.woff2') format('woff2'); font-weight:400 800; font-style:normal; font-display:swap; } @font-face{ font-family:'Cormorant'; src:url('../fonts/cormorant.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; } @font-face{ font-family:'Instrument'; src:url('../fonts/instrument.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Italianno'; src:url('../fonts/italianno.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } :root{ /* Tema del restaurante — los sobreescribe carta.js */ --base:#F7F1E7; --papel:#FFFBF4; --tinta:#1F1913; --acento:#0E5B4F; --realce:#B8823C; --base-rgb:247 241 231; --papel-rgb:255 251 244; --tinta-rgb:31 25 19; --acento-rgb:14 91 79; --realce-rgb:184 130 60; --r:1.75rem; --seco:'Fraunces','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif; --texto:'Jakarta',ui-sans-serif,system-ui,'Segoe UI',sans-serif; /* Cuánto se aprieta el titular y con qué peso. Los cambia --tipo. */ --seco-peso:400; --seco-track:-.02em; --nome-peso:400; --lina:rgb(var(--tinta-rgb)/.11); --lina-forte:rgb(var(--tinta-rgb)/.2); /* .58 dejaba la descripción del plato en 4,13:1 — por debajo del mínimo de 4,5:1 que pide la norma para texto de 14 px. Y no es texto decorativo: es lo que lee todo el que abre la carta, muchas veces con mala luz de restaurante y el móvil al 20 % de brillo. A .66 sube a 4,7:1 y sigue leyéndose como texto secundario, que era la intención. */ --suave:rgb(var(--tinta-rgb)/.66); --tenue:rgb(var(--tinta-rgb)/.38); --curva:cubic-bezier(.22,1,.36,1); --curva-suave:cubic-bezier(.32,.72,0,1); --sombra-baixa:0 1px 2px rgb(var(--tinta-rgb)/.04), 0 8px 24px -12px rgb(var(--tinta-rgb)/.14); --sombra-alta:0 2px 4px rgb(var(--tinta-rgb)/.05), 0 24px 60px -24px rgb(var(--tinta-rgb)/.28); --marxe:1.25rem; --barra-h:3.5rem; } /* ═══ TIPOGRAFÍAS ═══════════════════════════════════════════════════════════ Cuatro caracteres, no cuatro fuentes sueltas. El restaurante elige uno y ya está: nada de "elige tipo de letra" con una lista de cien, que es como acabas con una carta de marisco en Comic Sans. Salen de las dos variables que ya lleva la carta (Fraunces y Jakarta) y de los tipos del propio móvil, así que cambiar de tipografía no descarga ni un byte de más. Y como el HTML se genera por restaurante, cada carta precarga solo lo que usa: la 'Sobria' no descarga nada en absoluto. ═════════════════════════════════════════════════════════════════════════ */ /* 1 · CLÁSICA (por defecto) — serif con carácter en los títulos, sans limpia en el texto. Marisquería, casa de comidas, sitio de toda la vida. */ /* 2 · MODERNA — todo en la sans, titulares apretados y en peso fuerte. Hamburguesería, café de especialidad, cocina de mercado. */ [data-tipo="moderna"]{ --seco:'Jakarta',ui-sans-serif,system-ui,'Segoe UI',sans-serif; --seco-peso:700; --seco-track:-.045em; --nome-peso:700; } [data-tipo="moderna"] .portada__nome, [data-tipo="moderna"] .categoria__titulo, [data-tipo="moderna"] .md__titulo{font-variation-settings:normal} /* 3 · EDITORIAL — la serif se lleva también los nombres de los platos. Se lee como una carta impresa de restaurante de mantel. */ [data-tipo="editorial"]{ --seco-peso:400; --seco-track:-.025em; } [data-tipo="editorial"] .prato__nome{ font-family:var(--seco); font-variation-settings:'opsz' 28; font-weight:400; letter-spacing:-.015em; font-size:1.0625rem; } [data-tipo="editorial"] .categoria__titulo{letter-spacing:-.03em} /* 4 · SOBRIA — los tipos del propio teléfono. Cero descargas: es la más rápida de todas, y en un móvil con mala cobertura dentro de un local eso se nota. */ [data-tipo="sobria"]{ --seco:ui-serif,Georgia,'Times New Roman',serif; --texto:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --seco-peso:600; --seco-track:-.02em; --nome-peso:600; } [data-tipo="sobria"] .portada__nome, [data-tipo="sobria"] .categoria__titulo, [data-tipo="sobria"] .md__titulo, [data-tipo="sobria"] .prato__prezo{font-variation-settings:normal} /* 5 · EDITORIAL — Playfair Display. Serif de alto contraste, la que uno espera en la carta de un restaurante de mantel. Los nombres de plato también. */ [data-tipo="alto"]{ --seco:'Playfair','Playfair Display',Georgia,serif; --seco-peso:500; --seco-track:-.02em; } [data-tipo="alto"] .prato__nome{ font-family:var(--seco); font-weight:500; letter-spacing:-.01em; font-size:1.0625rem; font-variation-settings:normal; } [data-tipo="alto"] .portada__nome, [data-tipo="alto"] .categoria__titulo, [data-tipo="alto"] .md__titulo, [data-tipo="alto"] .prato__prezo{font-variation-settings:normal} /* 6 · DELICADA — Cormorant Garamond. Fina y aireada, con mucho aire entre letras. Va bien en cartas cortas y de producto: no aguanta párrafos largos. */ [data-tipo="fina"]{ --seco:'Cormorant','Cormorant Garamond',Georgia,serif; --seco-peso:500; --seco-track:.005em; } [data-tipo="fina"] .portada__nome{font-size:clamp(3rem,14vw,5.25rem); line-height:1.02} [data-tipo="fina"] .portada__nome, [data-tipo="fina"] .categoria__titulo, [data-tipo="fina"] .md__titulo, [data-tipo="fina"] .prato__prezo{font-variation-settings:normal} /* 7 · CALIGRAFÍA — Italianno SOLO en el nombre del restaurante. Una manuscrita en los nombres de plato o en los precios no se lee, y menos a media luz en un comedor. Se usa donde luce y no estorba: el rótulo. El resto de la carta sigue con la serif y la sans de siempre. */ [data-tipo="caligrafia"] .portada__nome{ font-family:'Italianno',cursive; font-weight:400; letter-spacing:0; font-size:clamp(3.75rem,18vw,7rem); line-height:.92; font-variation-settings:normal; } [data-tipo="caligrafia"] .barra__marca{font-family:'Italianno',cursive; font-size:1.35rem} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--barra-h) + 3.75rem)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--base); color:var(--tinta); font-family:var(--texto); font-size:1rem; line-height:1.55; font-weight:450; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%; height:auto; display:block} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer} a{color:inherit; text-decoration:none} h1,h2,h3,p,ul,figure{margin:0} ul{list-style:none; padding:0} :focus-visible{outline:2px solid var(--acento); outline-offset:3px; border-radius:.5rem} .sprite{position:absolute; width:0; height:0; overflow:hidden} .vh{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap} .saltar{ position:fixed; top:.75rem; left:50%; z-index:99; transform:translate(-50%,-160%); background:var(--tinta); color:var(--papel); padding:.7rem 1.2rem; border-radius:999px; font-size:.875rem; font-weight:600; transition:transform .35s var(--curva); } .saltar:focus{transform:translate(-50%,0)} /* Grano de papel — capa fija, no repinta al hacer scroll */ .grao{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; } .envoltorio{width:min(100% - calc(var(--marxe)*2), 46rem); margin-inline:auto} /* ── Micro-tipografía ────────────────────────────────────────────────────── */ .ollo{ font-size:.6875rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--tenue); } /* Un `display` en una clase pisa al atributo `hidden` del HTML (misma especificidad, y el estilo del autor gana al del navegador). Sin esto, el sello de mesa se veía vacío en todas las cartas. */ [hidden]{display:none!important} /* Sello de mesa: aparece solo si se escaneó el QR de una mesa concreta */ .selo-mesa{ display:inline-block; margin-left:.6rem; padding:.15rem .55rem; border-radius:999px; background:rgb(var(--acento-rgb)/.12); border:1px solid rgb(var(--acento-rgb)/.25); color:var(--acento); letter-spacing:.14em; } /* ═══ PORTADA ═══════════════════════════════════════════════════════════════ */ .portada{ position:relative; isolation:isolate; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:calc(env(safe-area-inset-top) + 1rem) var(--marxe) 4.5rem; overflow:hidden; } .portada__media{position:absolute; inset:0; z-index:-2; background:var(--base)} .portada__media img{ /* El encuadre lo elige el restaurante (--portada-pos). La foto se guarda entera: la misma sirve para el móvil, que recorta a los lados, y para el ordenador, que recorta arriba y abajo. */ width:100%; height:100%; object-fit:cover; object-position:var(--portada-pos, 50% 38%); animation:respirar 28s var(--curva-suave) infinite alternate; } @keyframes respirar{from{transform:scale(1.01)} to{transform:scale(1.07)}} .portada::after{ content:''; position:absolute; inset:0; z-index:-1; background: linear-gradient(to bottom, rgb(var(--tinta-rgb)/.3) 0%, rgb(var(--tinta-rgb)/0) 22%), linear-gradient(to bottom, rgb(var(--base-rgb)/0) 30%, rgb(var(--base-rgb)/.18) 44%, rgb(var(--base-rgb)/.7) 56%, rgb(var(--base-rgb)/.95) 66%, var(--base) 76%); } /* ── Los tres estilos de portada ───────────────────────────────────────────── Preajustes cerrados: los tres se leen siempre, con cualquier foto y con cualquier paleta. Nada de sliders — con controles libres acabas con letra roja sobre foto amarilla. Los tres llenan la pantalla. Una portada que ocupa media pantalla y deja un hueco debajo no parece una decisión, parece que algo se rompió: el cliente escanea el QR en la mesa y lo primero que ve es el restaurante, entero. Lo que cambia entre ellos es el TRATO de la foto, no el tamaño: · velo foto dominante, oscura, tipografía clara encima · difuminada foto que se disuelve en el papel, tipografía oscura debajo · sin_foto sin foto: tipografía y color El recorte no se elige a ojo: --portada-pos lo calcula el servidor buscando dónde está la carga visual de la foto (centro de masas de energía de bordes), así que una fachada horizontal metida en un móvil vertical conserva la puerta y no un trozo de acera. ────────────────────────────────────────────────────────────────────────── */ /* 1 · VELO — la foto manda. Velo oscuro y texto claro. La fuerza del velo (--velo) la calcula el servidor del color medio de la foto: cuanto más clara, más velo. Así el nombre se lee siempre, con una fachada encalada al sol o con un comedor en penumbra. */ .portada[data-portada="velo"]::after{ background: linear-gradient(to bottom, rgb(0 0 0/.5) 0%, rgb(0 0 0/.08) 26%, rgb(0 0 0/0) 42%), linear-gradient(to top, rgb(0 0 0/calc(var(--velo, .45) + .3)) 0%, rgb(0 0 0/var(--velo, .45)) 42%, rgb(0 0 0/calc(var(--velo, .45) * .5)) 100%); } .portada[data-portada="velo"]{color:#fff} .portada[data-portada="velo"] .portada__nome{ font-weight:var(--seco-peso); letter-spacing:var(--seco-track);color:#fff; text-shadow:0 2px 30px rgb(0 0 0/.4)} .portada[data-portada="velo"] .portada__eslogan{color:rgb(255 255 255/.88); text-shadow:0 1px 16px rgb(0 0 0/.35)} .portada[data-portada="velo"] .ollo{color:rgb(255 255 255/.66)} .portada[data-portada="velo"] .estado{color:rgb(255 255 255/.82)} .portada[data-portada="velo"] .estado[data-aberto="1"]{color:#8FE3C4} .portada[data-portada="velo"] .estado[data-aberto="1"] .estado__punto{background:#8FE3C4} .portada[data-portada="velo"] .selo{background:rgb(255 255 255/.14); border-color:rgb(255 255 255/.32)} .portada[data-portada="velo"] .selo-mesa{ background:rgb(255 255 255/.16); border-color:rgb(255 255 255/.3); color:#fff} .portada[data-portada="velo"] .btn--fantasma{ --btn-fondo:rgb(255 255 255/.16); --btn-tinta:#fff; border-color:rgb(255 255 255/.28)} .portada[data-portada="velo"] .btn--fantasma .btn__icona{background:rgb(255 255 255/.2)} .portada[data-portada="velo"] .portada__baixar{color:rgb(255 255 255/.62)} .portada[data-portada="velo"] .idiomas{background:rgb(0 0 0/.32); border-color:rgb(255 255 255/.24)} .portada[data-portada="velo"] .idioma{color:rgb(255 255 255/.72)} .portada[data-portada="velo"] .idioma[aria-pressed="true"]{background:#fff; color:var(--tinta)} .portada[data-portada="velo"] .idioma:not([aria-pressed="true"]):hover{color:#fff} /* 2 · DIFUMINADA — la foto llena arriba y se disuelve en el papel de la carta. El nombre va abajo, en tinta, ya sobre papel limpio: se lee siempre, venga la foto que venga, sin depender de que la parte de abajo sea oscura. Antes esto era una banda con la forma de la foto y un hueco debajo. Que la foto se viera entera está bien sobre el papel; en la portada quedaba pobre. */ .portada[data-portada="desvanecida"] .portada__media{inset:0 0 auto; height:78svh} .portada[data-portada="desvanecida"] .portada__media img{height:100%} .portada[data-portada="desvanecida"]::after{ background: linear-gradient(to bottom, rgb(var(--tinta-rgb)/.2) 0%, rgb(var(--tinta-rgb)/0) 16%), linear-gradient(to bottom, rgb(var(--base-rgb)/0) 26%, rgb(var(--base-rgb)/.28) 42%, rgb(var(--base-rgb)/.8) 56%, rgb(var(--base-rgb)/.97) 66%, var(--base) 74%); } /* El texto respira sobre el papel en vez de pegarse al degradado */ .portada[data-portada="desvanecida"]{padding-bottom:5.5rem} /* 3 · SIN FOTO — solo tipografía sobre los colores del restaurante. Mejor esto que una foto mala, y muchos no tienen una foto decente. Llena la pantalla igual que las otras dos: un bar sin foto no tiene por qué parecer una carta a medio hacer. */ .portada[data-portada="sin_foto"] .portada__media{display:none} .portada[data-portada="sin_foto"]::after{ background: radial-gradient(120% 82% at 18% 4%, rgb(var(--acento-rgb)/.16) 0%, transparent 58%), radial-gradient(96% 74% at 92% 12%, rgb(var(--realce-rgb)/.18) 0%, transparent 54%), radial-gradient(80% 50% at 50% 100%, rgb(var(--realce-rgb)/.1) 0%, transparent 60%), linear-gradient(to bottom, var(--papel) 0%, var(--base) 100%); } .portada[data-portada="sin_foto"] .selo{background:var(--papel)} /* El de la barra solo aparece cuando la portada ya no se ve (lo conmuta activarIdiomasUnicos). Se oculta con opacidad y no con display para que no dé un salto de altura a la barra al aparecer. */ .barra #idiomas-barra{transition:opacity .35s var(--curva), transform .35s var(--curva)} .barra:not([data-idiomas="1"]) #idiomas-barra{ opacity:0; transform:translateY(-4px); pointer-events:none} .portada__idiomas{z-index:3} /* 2 · VELO — la foto llena la pantalla, velo oscuro, texto claro. La fuerza del velo (--velo) la calcula el servidor del color medio de la foto: cuanto más clara, más velo. Así el nombre se lee siempre. */ .portada[data-portada="velo"]::after{ background: linear-gradient(to bottom, rgb(0 0 0/.45) 0%, rgb(0 0 0/.05) 30%, rgb(0 0 0/0) 45%), linear-gradient(to top, rgb(0 0 0/calc(var(--velo, .45) + .25)) 0%, rgb(0 0 0/var(--velo, .45)) 45%, rgb(0 0 0/calc(var(--velo, .45) * .55)) 100%); } .portada[data-portada="velo"]{color:#fff} .portada[data-portada="velo"] .portada__nome{color:#fff; text-shadow:0 2px 24px rgb(0 0 0/.35)} .portada[data-portada="velo"] .portada__eslogan{color:rgb(255 255 255/.86)} .portada[data-portada="velo"] .ollo{color:rgb(255 255 255/.62)} .portada[data-portada="velo"] .estado{color:rgb(255 255 255/.8)} .portada[data-portada="velo"] .estado[data-aberto="1"]{color:#8FE3C4} .portada[data-portada="velo"] .estado[data-aberto="1"] .estado__punto{background:#8FE3C4} .portada[data-portada="velo"] .selo{background:rgb(255 255 255/.14); border-color:rgb(255 255 255/.3)} .portada[data-portada="velo"] .selo-mesa{ background:rgb(255 255 255/.16); border-color:rgb(255 255 255/.3); color:#fff} .portada[data-portada="velo"] .btn--fantasma .btn__icona{background:rgb(255 255 255/.2)} .portada[data-portada="velo"] .portada__baixar{color:rgb(255 255 255/.6)} .portada[data-portada="velo"] .idiomas{background:rgb(0 0 0/.3); border-color:rgb(255 255 255/.22)} .portada[data-portada="velo"] .idioma{color:rgb(255 255 255/.7)} .portada[data-portada="velo"] .idioma[aria-pressed="true"]{background:#fff; color:var(--tinta)} .portada[data-portada="velo"] .idioma:not([aria-pressed="true"]):hover{color:#fff} /* 3 · SIN FOTO — solo tipografía sobre los colores del restaurante. Mejor esto que una foto mala, y muchos no tienen una foto decente. */ .portada[data-portada="sin_foto"]{min-height:auto; padding-top:calc(env(safe-area-inset-top) + 5rem); padding-bottom:3.5rem} .portada[data-portada="sin_foto"] .portada__media{display:none} .portada[data-portada="sin_foto"]::after{ background: radial-gradient(120% 80% at 20% 0%, rgb(var(--acento-rgb)/.14) 0%, transparent 60%), radial-gradient(90% 70% at 90% 10%, rgb(var(--realce-rgb)/.16) 0%, transparent 55%), linear-gradient(to bottom, var(--papel) 0%, var(--base) 100%); } .portada[data-portada="sin_foto"] .portada__baixar{display:none} .portada[data-portada="sin_foto"] .selo{background:var(--papel)} /* El de la barra solo aparece cuando la portada ya no se ve (lo conmuta activarIdiomasUnicos). Se oculta con opacidad y no con display para que no dé un salto de altura a la barra al aparecer. */ .barra #idiomas-barra{transition:opacity .35s var(--curva), transform .35s var(--curva)} .barra:not([data-idiomas="1"]) #idiomas-barra{ opacity:0; transform:translateY(-4px); pointer-events:none} .portada__idiomas{ position:absolute; top:calc(env(safe-area-inset-top) + 1rem); left:0; right:0; z-index:2; display:flex; justify-content:flex-end; width:min(100% - calc(var(--marxe)*2), 46rem); margin-inline:auto; } /* El bloque de la portada se alinea con la columna de la carta, no con el borde de la pantalla: en escritorio la marca y los platos comparten el mismo eje. */ .portada__corpo{ position:relative; width:min(100%, 46rem); margin-inline:auto; display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; } /* Sello del restaurante — doble bisel */ .selo{ display:grid; place-items:center; width:5.25rem; height:5.25rem; margin-bottom:.4rem; border-radius:50%; background:rgb(var(--papel-rgb)/.5); border:1px solid rgb(var(--papel-rgb)/.6); box-shadow:var(--sombra-baixa), inset 0 1px 1px rgb(255 255 255/.5); animation:selo-entra 1s var(--curva) both; } .selo__nucleo{ display:grid; place-items:center; width:4.15rem; height:4.15rem; border-radius:50%; background:var(--acento); color:var(--papel); font-family:var(--seco); font-variation-settings:'opsz' 40; font-weight:400; font-size:1.5rem; letter-spacing:.04em; line-height:1; box-shadow:inset 0 1px 1px rgb(255 255 255/.22); } /* no debe existir para el layout: envuelve al solo para dar a elegir AVIF, y sin esto se comportaría como un inline y rompería las rejillas donde la imagen era hija directa. */ picture{display:contents} .selo img{width:100%; height:100%; object-fit:cover; border-radius:50%} @keyframes selo-entra{from{opacity:0; transform:scale(.82)} to{opacity:1; transform:none}} .portada__nome{ font-family:var(--seco); font-variation-settings:'opsz' 144; font-weight:400; font-size:clamp(3rem, 15vw, 5.75rem); line-height:.9; letter-spacing:-.035em; text-wrap:balance; } .portada__eslogan{ font-size:1.0625rem; line-height:1.45; color:var(--suave); max-width:24rem; text-wrap:pretty; } .estado{display:inline-flex; align-items:center; gap:.5rem; font-size:.8125rem; font-weight:600; color:var(--suave)} .estado__punto{ width:.5rem; height:.5rem; border-radius:50%; background:var(--tenue); flex:none; box-shadow:0 0 0 0 rgb(var(--acento-rgb)/.5); } .estado[data-aberto="1"] .estado__punto{background:var(--acento); animation:latexo 2.4s ease-out infinite} .estado[data-aberto="1"]{color:var(--acento)} @keyframes latexo{0%{box-shadow:0 0 0 0 rgb(var(--acento-rgb)/.45)} 70%{box-shadow:0 0 0 .5rem rgb(var(--acento-rgb)/0)} 100%{box-shadow:0 0 0 0 rgb(var(--acento-rgb)/0)}} .portada__accions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.75rem} /* Botón isla con icono anidado */ .btn{ --btn-fondo:var(--tinta); --btn-tinta:var(--papel); display:inline-flex; align-items:center; gap:.6rem; padding:.5rem .55rem .5rem 1.15rem; border-radius:999px; background:var(--btn-fondo); color:var(--btn-tinta); font-size:.9375rem; font-weight:600; letter-spacing:-.01em; box-shadow:var(--sombra-baixa); transition:transform .5s var(--curva), box-shadow .5s var(--curva), background-color .4s var(--curva); } .btn__icona{ display:grid; place-items:center; flex:none; width:2rem; height:2rem; border-radius:50%; background:rgb(var(--papel-rgb)/.16); transition:transform .5s var(--curva), background-color .4s var(--curva); } .btn__icona svg{width:1.05rem; height:1.05rem} .btn:hover{box-shadow:var(--sombra-alta)} .btn:hover .btn__icona{transform:translate(2px,-1px) scale(1.06); background:rgb(var(--papel-rgb)/.26)} .btn:active{transform:scale(.975)} .btn--acento{--btn-fondo:var(--acento)} /* Botón tras avisar a la barra: confirmación en el propio botón, si no el cliente lo pulsa cinco veces creyendo que no ha ido. */ .btn--avisado{--btn-fondo:#1D7A50!important;--btn-tinta:#fff!important} .btn--fantasma{ --btn-fondo:rgb(var(--papel-rgb)/.62); --btn-tinta:var(--tinta); border:1px solid rgb(var(--tinta-rgb)/.09); } .btn--fantasma .btn__icona{background:rgb(var(--tinta-rgb)/.07)} .btn--fantasma:hover .btn__icona{background:rgb(var(--tinta-rgb)/.12)} .portada__baixar{ position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; color:var(--tenue); animation:flotar 2.8s ease-in-out infinite; } @keyframes flotar{0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,.35rem)}} /* ═══ BARRA PEGAJOSA ════════════════════════════════════════════════════════ */ .sentinela{height:1px; margin-top:-1px} .barra{ position:sticky; top:0; z-index:40; padding-top:env(safe-area-inset-top); background:rgb(var(--base-rgb)/.82); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5); border-bottom:1px solid transparent; transition:border-color .5s var(--curva), box-shadow .5s var(--curva); } .barra[data-fixa="1"]{border-bottom-color:var(--lina); box-shadow:0 12px 32px -24px rgb(var(--tinta-rgb)/.5)} .barra__fila{ width:min(100% - calc(var(--marxe)*2), 46rem); margin-inline:auto; height:var(--barra-h); display:flex; align-items:center; justify-content:space-between; gap:1rem; } .barra__marca{ display:flex; align-items:center; gap:.6rem; min-width:0; padding:.55rem .5rem .55rem 0; margin-left:-.1rem; border-radius:999px; opacity:0; transform:translateY(.4rem); pointer-events:none; transition:opacity .5s var(--curva), transform .5s var(--curva); } .barra[data-fixa="1"] .barra__marca{opacity:1; transform:none; pointer-events:auto} .barra__selo{ display:grid; place-items:center; flex:none; width:1.85rem; height:1.85rem; border-radius:50%; background:var(--acento); color:var(--papel); font-family:var(--seco); font-size:.72rem; letter-spacing:.03em; } .barra__nome{ font-family:var(--seco); font-variation-settings:'opsz' 30; font-size:1.0625rem; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .barra__ferramentas{display:flex; align-items:center; gap:.5rem; margin-left:auto} .icona-btn{ display:grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:50%; color:var(--tinta); border:1px solid var(--lina); background:rgb(var(--papel-rgb)/.55); transition:background-color .35s var(--curva), transform .35s var(--curva), color .35s var(--curva); } .icona-btn:hover{background:var(--papel)} .icona-btn:active{transform:scale(.94)} .icona-btn[aria-expanded="true"]{background:var(--tinta); color:var(--papel); border-color:var(--tinta)} /* Idiomas. Con muchos activos (hasta nueve) la fila se desliza en vez de desbordarse: en un móvil estrecho no caben todos de golpe. */ .idiomas{ /* align-items:stretch —y no center— para que la pastilla del idioma activo mida el hueco interior y no lo mismo que la barra. Dos capsulas del mismo alto, una metida unos pixeles, NO son concentricas: el activo quedaba a ras del borde por arriba y por abajo, y por los lados asomaba una media luna de fondo. Con el hijo mas bajo que el padre las dos curvas son concentricas y encajan solas. */ display:inline-flex; align-items:stretch; gap:.125rem; padding:.1875rem; min-height:2.875rem; border-radius:999px; background:rgb(var(--papel-rgb)/.55); border:1px solid var(--lina); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); max-width:min(100%, 17rem); overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .idiomas::-webkit-scrollbar{display:none} .idioma{ flex:none; /* La pastilla se ve pequena a proposito —no debe competir con la carta— pero la ZONA PULSABLE llega a 46 px de alto, que es lo que necesita un pulgar. Medido: antes eran 35x27 y un turista fallaba el toque con el movil en la mano. Antes esto se hacia con min-height:44px y un margen negativo, y ahi estaba el fallo de dibujo: la pastilla acababa midiendo lo mismo que la barra. Ya no hace falta —la barra mide 46 px y el hijo se estira al hueco interior—, asi que el dedo sigue teniendo su zona y el activo encaja dentro. */ position:relative; padding:0 .6rem; display:inline-flex; align-items:center; border-radius:999px; font-size:.6875rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--suave); transition:color .35s var(--curva), background-color .35s var(--curva); } .idioma[aria-pressed="true"]{background:var(--tinta); color:var(--papel)} .idioma:not([aria-pressed="true"]):hover{color:var(--tinta)} /* Búsqueda */ .barra__busca{ width:min(100% - calc(var(--marxe)*2), 46rem); margin-inline:auto; padding-bottom:.75rem; animation:baixar .4s var(--curva) both; } @keyframes baixar{from{opacity:0; transform:translateY(-.5rem)} to{opacity:1; transform:none}} .busca{ display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; border-radius:999px; background:var(--papel); border:1px solid var(--lina); box-shadow:var(--sombra-baixa); color:var(--tenue); } .busca input{ flex:1; min-width:0; border:0; background:none; outline:none; font-family:var(--texto); font-size:1rem; color:var(--tinta); } .busca input::placeholder{color:var(--tenue)} .busca input::-webkit-search-cancel-button{display:none} .busca__limpar{display:grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:50%; background:rgb(var(--tinta-rgb)/.08); color:var(--tinta)} /* Chips de categoría */ .chips{ display:flex; gap:.4rem; overflow-x:auto; scrollbar-width:none; padding:0 var(--marxe) .7rem; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; mask-image:linear-gradient(90deg,transparent 0,#000 var(--marxe),#000 calc(100% - var(--marxe)),transparent 100%); } .chips::-webkit-scrollbar{display:none} /* En PC, cuando la barra desborda se puede arrastrar con el ratón (lo activa el JS). */ @media (hover:hover){ .chips--scrollable{cursor:grab} } .chips--agarrando{cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto} .chips--agarrando .chip{pointer-events:none} @media (min-width:46rem){ .chips{width:min(100% - calc(var(--marxe)*2), 46rem); margin-inline:auto; padding-inline:0; mask-image:none; flex-wrap:wrap} } .chip{ flex:none; scroll-snap-align:center; white-space:nowrap; padding:.45rem .9rem; border-radius:999px; font-size:.8125rem; font-weight:600; letter-spacing:-.005em; color:var(--suave); background:rgb(var(--papel-rgb)/.6); border:1px solid var(--lina); transition:color .3s var(--curva), background-color .3s var(--curva), border-color .3s var(--curva), transform .3s var(--curva), box-shadow .3s var(--curva); } /* Animación al pasar el ratón — solo en PC (en móvil no hay hover pegajoso). */ @media (hover:hover){ .chip:hover{ color:var(--tinta); background:rgb(var(--papel-rgb)/.95); border-color:rgb(var(--tinta-rgb)/.28); transform:translateY(-2px); box-shadow:0 7px 18px -9px rgb(var(--tinta-rgb)/.42); } } @media (prefers-reduced-motion:reduce){ .chip{transition:color .2s} .chip:hover{transform:none; box-shadow:none} } .chip[aria-current="true"]{background:var(--tinta); border-color:var(--tinta); color:var(--papel)} .chip--mdia[aria-current="true"]{background:var(--acento); border-color:var(--acento)} /* ═══ MENÚ DEL DÍA — la pizarra ═════════════════════════════════════════════ */ .mdia{width:min(100% - calc(var(--marxe)*2), 46rem); margin:2.5rem auto 0} .mdia__marco{ padding:.5rem; border-radius:calc(var(--r) + .5rem); background:rgb(var(--tinta-rgb)/.06); border:1px solid var(--lina); } .mdia__caixa{ position:relative; overflow:hidden; border-radius:var(--r); padding:2rem 1.5rem 1.75rem; background: radial-gradient(120% 90% at 15% 0%, rgb(var(--acento-rgb)/.55) 0%, transparent 60%), var(--tinta); color:var(--papel); box-shadow:inset 0 1px 1px rgb(255 255 255/.14); } .mdia__caixa::before{ content:''; position:absolute; inset:.55rem; border:1px solid rgb(var(--papel-rgb)/.16); border-radius:calc(var(--r) - .55rem); pointer-events:none; } .mdia__cab{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:.35rem} .mdia__ollo{ font-size:.625rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:rgb(var(--papel-rgb)/.55); } .mdia__titulo{ font-family:var(--seco); font-variation-settings:'opsz' 72; font-weight:400; font-size:clamp(1.85rem,7vw,2.6rem); line-height:1; letter-spacing:-.03em; margin-top:.35rem; } .mdia__prezo{ flex:none; text-align:right; font-family:var(--seco); font-variation-settings:'opsz' 60; font-size:clamp(1.6rem,6vw,2.1rem); line-height:1; letter-spacing:-.03em; color:var(--realce); font-variant-numeric:tabular-nums; } .mdia__cando{font-size:.8125rem; color:rgb(var(--papel-rgb)/.62); margin-top:.65rem} .mdia__regra{height:1px; background:rgb(var(--papel-rgb)/.16); margin:1.35rem 0 1.1rem} .mdia__grupo + .mdia__grupo{margin-top:1.25rem} .mdia__grupo-nome{ font-size:.6875rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--realce); margin-bottom:.55rem; } .mdia__opcions{display:flex; flex-direction:column; gap:.5rem} .mdia__op{font-size:.9688rem; line-height:1.4} .mdia__op[data-agotado="1"]{color:rgb(var(--papel-rgb)/.35); text-decoration:line-through; text-decoration-thickness:1px} .mdia__op .selos{vertical-align:-.2em; margin-left:.45rem} .mdia__inclue{ margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid rgb(var(--papel-rgb)/.16); font-size:.8125rem; color:rgb(var(--papel-rgb)/.62); display:flex; align-items:center; gap:.55rem; } .mdia__inclue svg{width:1.15rem; height:1.15rem; flex:none; color:var(--realce)} .mdia .selos svg{color:rgb(var(--papel-rgb)/.75)} /* Arrastre con ratón en carriles horizontales (PC). En móvil no estorba: el táctil sigue igual; estas clases solo las pone el JS al arrastrar de verdad. */ @media (hover:hover){ .arr-scrollable{cursor:grab} } .arr-agarrando{cursor:grabbing!important; scroll-snap-type:none!important; scroll-behavior:auto!important} .arr-agarrando > *{pointer-events:none} /* ═══ DESTACADOS ════════════════════════════════════════════════════════════ */ .destacados{margin-top:3.25rem} .destacados__titulo{ width:min(100% - calc(var(--marxe)*2), 46rem); margin:0 auto .95rem; font-family:var(--seco); font-variation-settings:'opsz' 48; font-weight:400; font-size:1.375rem; letter-spacing:-.02em; color:var(--suave); } .destacados__pista{ display:flex; gap:.85rem; overflow-x:auto; scrollbar-width:none; padding:.35rem var(--marxe) 1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; } .destacados__pista::-webkit-scrollbar{display:none} @media (min-width:46rem){ .destacados__pista{width:min(100% - calc(var(--marxe)*2) + 2rem, 48rem); margin-inline:auto; padding-inline:1rem} } .tarxeta{ flex:none; width:min(72vw,15.5rem); scroll-snap-align:center; padding:.4rem; border-radius:calc(var(--r) + .4rem); background:rgb(var(--papel-rgb)/.72); border:1px solid var(--lina); box-shadow:var(--sombra-baixa); text-align:left; transition:transform .55s var(--curva), box-shadow .55s var(--curva); } .tarxeta:hover{transform:translateY(-3px); box-shadow:var(--sombra-alta)} .tarxeta:active{transform:scale(.985)} .tarxeta__nucleo{ display:block; border-radius:var(--r); overflow:hidden; background:var(--papel); box-shadow:inset 0 1px 1px rgb(255 255 255/.6); } .tarxeta__info{display:block} .tarxeta__foto{display:block; aspect-ratio:4/3; background:rgb(var(--tinta-rgb)/.05); overflow:hidden} .tarxeta__foto img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--curva)} .tarxeta:hover .tarxeta__foto img{transform:scale(1.05)} .tarxeta__info{padding:.85rem .95rem 1rem} .tarxeta__nome{ font-family:var(--seco); font-variation-settings:'opsz' 36; font-weight:400; font-size:1.0625rem; line-height:1.2; letter-spacing:-.015em; display:block; margin-bottom:.3rem; } .tarxeta__prezo{font-size:.875rem; font-weight:600; color:var(--acento); font-variant-numeric:tabular-nums} .tarxeta__cat{display:block; font-size:.625rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--tenue); margin-bottom:.4rem} /* ═══ CATEGORÍAS Y PLATOS ═══════════════════════════════════════════════════ */ .categorias{padding-bottom:1rem} .categoria{width:min(100% - calc(var(--marxe)*2), 46rem); margin:0 auto; padding-top:3.75rem} .categoria__cab{margin-bottom:1.6rem} .categoria__num{ display:block; font-family:var(--seco); font-variation-settings:'opsz' 24; font-size:.8125rem; color:var(--realce); letter-spacing:.1em; margin-bottom:.35rem; } .categoria__titulo{ font-family:var(--seco); font-variation-settings:'opsz' 120; font-weight:400; font-size:clamp(2.1rem,9vw,3.15rem); line-height:1; letter-spacing:-.035em; text-wrap:balance; } .categoria__sub{margin-top:.55rem; font-size:.9375rem; color:var(--suave); max-width:30rem; text-wrap:pretty} .pratos{display:grid; gap:.4rem} @media (min-width:56rem){ .pratos{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:2rem} } .prato__btn{ display:flex; align-items:flex-start; gap:1rem; width:100%; text-align:left; padding:.95rem .85rem; border-radius:1.15rem; transition:background-color .4s var(--curva), transform .4s var(--curva); } .prato__btn:hover{background:rgb(var(--papel-rgb)/.85)} .prato__btn:active{transform:scale(.99)} .prato__texto{flex:1; min-width:0} /* Nombre a la izquierda (puede partir en dos líneas), precio anclado a la derecha. El punteado de carta impresa solo aparece cuando hay sitio de verdad. */ .prato__lina{display:flex; align-items:baseline; justify-content:space-between; gap:.75rem} .prato__nome{ flex:0 1 auto; min-width:0; font-size:1.0313rem; font-weight:600; letter-spacing:-.012em; line-height:1.3; text-wrap:pretty; } .prato__guion{display:none} @media (min-width:30rem){ .prato__lina{gap:.5rem} .prato__guion{ display:block; /* base 0: el punteado solo ocupa lo que sobra, nunca le roba ancho al nombre del plato (si no, "Empanada de zamburiñas" cae a tres líneas). */ flex:1 1 0; min-width:1.25rem; border-bottom:1px dotted var(--lina-forte); transform:translateY(-.22em); } /* Con foto ya no queda sitio: la fila pasa a leerse como ficha, no como carta impresa. */ .prato:has(.prato__foto) .prato__guion{display:none} } .prato__prezo{ flex:none; font-family:var(--seco); font-variation-settings:'opsz' 28; font-size:1.0313rem; letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap; } .prato__prezo small{font-family:var(--texto); font-size:.6875rem; font-weight:500; color:var(--tenue); margin-left:.15rem} .prato__prezo--texto{font-size:.8125rem; font-family:var(--texto); font-weight:600; color:var(--acento); letter-spacing:0} .prato__desc{ display:block; margin-top:.28rem; font-size:.875rem; line-height:1.5; color:var(--suave); text-wrap:pretty; } .prato__meta{display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; margin-top:.5rem} .prato__foto{ flex:none; width:4.5rem; height:4.5rem; border-radius:1rem; overflow:hidden; background:rgb(var(--tinta-rgb)/.05); border:1px solid var(--lina); box-shadow:var(--sombra-baixa); } .prato__foto img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--curva), opacity .5s var(--curva)} .prato__btn:hover .prato__foto img{transform:scale(1.06)} /* Las fotos entran desde su color medio, no desde un cuadro gris */ .prato__foto img,.tarxeta__foto img,.folla__foto img{opacity:0} .prato__foto img.cargada,.tarxeta__foto img.cargada,.folla__foto img.cargada{opacity:1} .tarxeta__foto img,.folla__foto img{transition:transform .8s var(--curva), opacity .5s var(--curva)} /* ── Modo «foto grande»: la foto manda (bares de tapas, poke, hamburguesas) ── */ .pratos[data-fotos="grande"]{gap:1.15rem} @media (min-width:36rem){ .pratos[data-fotos="grande"]{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:1.15rem} } @media (min-width:56rem){ .pratos[data-fotos="grande"]{grid-template-columns:repeat(3,minmax(0,1fr))} } .pratos[data-fotos="grande"] .prato__btn{ flex-direction:column-reverse; align-items:stretch; gap:.9rem; padding:.45rem .45rem 1.05rem; border-radius:calc(var(--r) - .25rem); } .pratos[data-fotos="grande"] .prato__texto{padding:0 .55rem} .pratos[data-fotos="grande"] .prato__foto{ width:100%; height:auto; aspect-ratio:4/3; border-radius:calc(var(--r) - .7rem); } /* Sin foto la tarjeta no se queda coja: se compensa con aire arriba */ .pratos[data-fotos="grande"] .prato:not(:has(.prato__foto)) .prato__btn{padding-top:1.15rem} .pratos[data-fotos="grande"] .prato__guion{display:none} /* Destacado */ .prato[data-destacado="1"] .prato__btn{ background:rgb(var(--realce-rgb)/.07); box-shadow:inset 0 0 0 1px rgb(var(--realce-rgb)/.22); } .prato[data-destacado="1"] .prato__btn:hover{background:rgb(var(--realce-rgb)/.12)} /* Agotado */ .prato[data-agotado="1"] .prato__btn{opacity:.5} .prato[data-agotado="1"] .prato__nome{text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:var(--tenue)} .prato[data-agotado="1"] .prato__foto img{filter:grayscale(1)} /* Etiquetas e iconos */ .etiqueta{ display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .5rem .2rem .38rem; border-radius:999px; font-size:.625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border:1px solid transparent; } .etiqueta svg{width:.85rem; height:.85rem; flex:none} .etiqueta--destacado{color:var(--realce); background:rgb(var(--realce-rgb)/.12); border-color:rgb(var(--realce-rgb)/.24)} .etiqueta--agotado{color:var(--suave); background:rgb(var(--tinta-rgb)/.07); border-color:var(--lina)} .etiqueta--verde{color:var(--acento); background:rgb(var(--acento-rgb)/.1); border-color:rgb(var(--acento-rgb)/.2)} .etiqueta--neutra{color:var(--suave); background:rgb(var(--tinta-rgb)/.05); border-color:var(--lina)} .prato__mais{font-size:.6875rem; font-weight:700; color:var(--tenue); margin-left:.1rem} .selos{display:inline-flex; align-items:center; gap:.22rem} /* Picante por grados: una guindilla, dos o tres. Se entiende sin leer, que es justo lo que hace falta cuando el cliente viene de fuera. */ .picante{display:inline-flex; align-items:center; gap:.05rem; margin-left:.15rem} .picante svg{width:1.0625rem; height:1.0625rem; flex:none} .picante[data-nivel="1"]{color:#C98A3F} .picante[data-nivel="2"]{color:#C2603A} .picante[data-nivel="3"]{color:#A6301C} .selos--grande .picante svg{width:1.25rem; height:1.25rem} .etiqueta--picante{color:#A6301C; background:rgb(166 48 28/.09); border-color:rgb(166 48 28/.2)} .etiqueta--picante svg{margin-right:-.2rem} /* "Nuevo": el restaurante mete un plato y quiere que se vea que es nuevo */ .etiqueta--nuevo{color:var(--acento); background:rgb(var(--acento-rgb)/.1); border-color:rgb(var(--acento-rgb)/.22)} /* Trazas: se distinguen de "contiene" a propósito — la ley las separa */ .alerxeno--traza{background:transparent; border-style:dashed; color:var(--suave)} .alerxeno--traza svg{color:var(--tenue)} /* Aviso temporal: "hoy no hay marisco", "cerrado por vacaciones" */ #aviso-temporal{width:min(100% - calc(var(--marxe)*2), 46rem); margin:2rem auto 0} .aviso-temporal{ display:flex; align-items:flex-start; gap:.7rem; padding:.95rem 1.15rem; border-radius:1.15rem; background:rgb(var(--realce-rgb)/.12); border:1px solid rgb(var(--realce-rgb)/.3); color:var(--tinta); font-size:.9375rem; line-height:1.5; text-wrap:pretty; } .aviso-temporal svg{width:1.2rem; height:1.2rem; flex:none; margin-top:.15rem; color:var(--realce)} .selos svg{width:1.0625rem; height:1.0625rem; color:var(--tenue); flex:none} .selos--grande svg{width:1.25rem; height:1.25rem} /* Estados de la lista */ .esqueleto{width:min(100% - calc(var(--marxe)*2), 46rem); margin:3.5rem auto 0; display:grid; gap:.9rem} .esqueleto span{ display:block; height:3.25rem; border-radius:1.15rem; background:linear-gradient(90deg, rgb(var(--tinta-rgb)/.05) 25%, rgb(var(--tinta-rgb)/.09) 37%, rgb(var(--tinta-rgb)/.05) 63%); background-size:400% 100%; animation:brillo 1.6s ease-in-out infinite; } .esqueleto span:nth-child(1){width:55%; height:2.25rem} @keyframes brillo{from{background-position:100% 0} to{background-position:0 0}} .baleiro,.fallo{ width:min(100% - calc(var(--marxe)*2), 46rem); margin:3.5rem auto; text-align:center; color:var(--suave); font-size:.9375rem; } .fallo{color:var(--tinta)} /* ═══ PIE ═══════════════════════════════════════════════════════════════════ */ .pe{ margin-top:5rem; padding:3.5rem var(--marxe) calc(2.5rem + env(safe-area-inset-bottom)); background:var(--tinta); color:var(--papel); } .pe__grella{width:min(100%, 46rem); margin-inline:auto; display:grid; gap:2.5rem} @media (min-width:40rem){.pe__grella{grid-template-columns:1.1fr 1fr}} .pe h2{ font-family:var(--seco); font-variation-settings:'opsz' 72; font-weight:400; font-size:2rem; line-height:1; letter-spacing:-.03em; margin-bottom:.75rem; } .pe__bloque h3{ font-size:.625rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:rgb(var(--papel-rgb)/.45); margin-bottom:.75rem; } .pe__dato{display:flex; gap:.65rem; align-items:flex-start; font-size:.9375rem; color:rgb(var(--papel-rgb)/.8); line-height:1.5} .pe__dato + .pe__dato{margin-top:.25rem} .pe__dato svg{width:1.15rem; height:1.15rem; flex:none; margin-top:.5rem; color:rgb(var(--papel-rgb)/.5)} .pe__dato a{display:inline-block; padding:.45rem 0; transition:color .35s var(--curva)} .pe__dato a:hover{color:var(--realce)} .pe__dato:has(svg) > span{padding:.45rem 0} .horario{display:grid; gap:.3rem; font-size:.875rem} .horario__dia{display:flex; justify-content:space-between; gap:1rem; color:rgb(var(--papel-rgb)/.7)} .horario__dia[data-hoxe="1"]{color:var(--papel); font-weight:600} .horario__dia[data-hoxe="1"]::after{content:'hoy'; font-size:.5625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--realce); align-self:center; margin-left:-.5rem} .horario__horas{font-variant-numeric:tabular-nums; text-align:right} .pe__accions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem} /* Botón tras avisar a la barra: confirmación en el propio botón, si no el cliente lo pulsa cinco veces creyendo que no ha ido. OJO: este comentario estaba ENTRE el ancestro y el descendiente, y partía el selector en dos. Lo que quedaba suelto era un .btn--fantasma GLOBAL con la tinta del pie (color papel) — o sea, texto crema sobre papel crema en toda la carta. Por eso «Pedir la cuenta» no se veía. Los comentarios van ANTES. */ .pe .btn--avisado{--btn-fondo:#1D7A50!important;--btn-tinta:#fff!important} .pe .btn--fantasma{--btn-fondo:rgb(var(--papel-rgb)/.1); --btn-tinta:var(--papel); border-color:rgb(var(--papel-rgb)/.18)} .pe .btn--fantasma .btn__icona{background:rgb(var(--papel-rgb)/.14)} .leyenda{ width:min(100%, 46rem); margin:3rem auto 0; padding-top:2rem; border-top:1px solid rgb(var(--papel-rgb)/.14); } .leyenda__lista{display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:.85rem} .leyenda__item{display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; color:rgb(var(--papel-rgb)/.62)} .leyenda__item svg{width:1.05rem; height:1.05rem; color:rgb(var(--papel-rgb)/.5)} .aviso{ margin-top:1.5rem; padding:.85rem 1rem; border-radius:1rem; background:rgb(var(--papel-rgb)/.07); font-size:.8125rem; color:rgb(var(--papel-rgb)/.72); line-height:1.5; display:flex; gap:.6rem; align-items:flex-start; } .aviso svg{width:1.1rem; height:1.1rem; flex:none; margin-top:.1rem; color:var(--realce)} .firma{ width:min(100%, 46rem); margin:2.5rem auto 0; padding-top:1.75rem; border-top:1px solid rgb(var(--papel-rgb)/.14); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; font-size:.75rem; color:rgb(var(--papel-rgb)/.4); } .firma a{color:rgb(var(--papel-rgb)/.62); transition:color .35s var(--curva)} .firma a:hover{color:var(--realce)} /* ═══ FICHA DEL PLATO ═══════════════════════════════════════════════════════ */ .folla{ width:min(100%,34rem); max-width:100%; max-height:92svh; margin:auto auto 0; padding:0; border:0; background:transparent; color:var(--tinta); overflow:visible; } .folla::backdrop{background:rgb(var(--tinta-rgb)/.45); opacity:0; transition:opacity .45s var(--curva)} .folla[data-aberta="1"]::backdrop{opacity:1} .folla__corpo{ position:relative; border-radius:1.75rem 1.75rem 0 0; background:var(--papel); box-shadow:var(--sombra-alta); padding-bottom:calc(2.25rem + env(safe-area-inset-bottom)); max-height:92svh; overflow-y:auto; overscroll-behavior:contain; transform:translateY(100%); transition:transform .5s var(--curva-suave); } .folla[data-aberta="1"] .folla__corpo{transform:none} @media (min-width:40rem){ .folla{margin:auto} .folla__corpo{border-radius:var(--r); transform:translateY(1.5rem) scale(.98); transition:transform .45s var(--curva), opacity .45s var(--curva); opacity:0} .folla[data-aberta="1"] .folla__corpo{transform:none; opacity:1} } .folla__corpo::before{ content:''; position:sticky; top:0; display:block; z-index:2; width:2.5rem; height:.25rem; margin:.75rem auto -1rem; border-radius:999px; background:rgb(var(--tinta-rgb)/.15); } @media (min-width:40rem){.folla__corpo::before{display:none}} .folla__pechar{ position:absolute; top:.9rem; right:.9rem; z-index:3; display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:50%; background:rgb(var(--papel-rgb)/.85); color:var(--tinta); border:1px solid var(--lina); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:transform .35s var(--curva) } .folla__pechar:active{transform:scale(.92)} /* La ficha respeta la forma REAL de la foto, acotada entre 3:4 y 16:9: una vertical se ve entera sin comerse la pantalla, y una panorámica no queda como una rendija. --foto-prop lo pone carta.js con lo que se midió al subirla. */ .folla__foto{ aspect-ratio:clamp(.75, var(--foto-prop, 1.3333), 1.7778); background:rgb(var(--tinta-rgb)/.05); overflow:hidden; border-radius:1.75rem 1.75rem 0 0} @media (min-width:40rem){.folla__foto{border-radius:var(--r) var(--r) 0 0}} .folla__foto img{width:100%; height:100%; object-fit:cover} .folla__info{padding:1.75rem 1.5rem 0} .folla__cat{font-size:.625rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--tenue)} .folla__nome{ font-family:var(--seco); font-variation-settings:'opsz' 96; font-weight:400; font-size:clamp(1.85rem,7vw,2.35rem); line-height:1.05; letter-spacing:-.03em; margin:.5rem 0 .3rem; text-wrap:balance; } .folla__prezo{ font-family:var(--seco); font-variation-settings:'opsz' 40; font-size:1.35rem; color:var(--acento); font-variant-numeric:tabular-nums; } .folla__prezo small{font-family:var(--texto); font-size:.75rem; font-weight:500; color:var(--tenue); margin-left:.25rem} .folla__desc{margin-top:.9rem; font-size:.9688rem; line-height:1.6; color:var(--suave); text-wrap:pretty} .folla__variantes{margin-top:1.25rem; display:grid; gap:.3rem} .folla__variante{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.6rem .85rem; border-radius:.85rem; background:rgb(var(--tinta-rgb)/.04); font-size:.9375rem; } .folla__variante b{font-weight:600} .folla__variante span{font-family:var(--seco); font-variation-settings:'opsz' 24; font-variant-numeric:tabular-nums} .folla__seccion{margin-top:1.6rem} .folla__seccion h3{ font-size:.625rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--tenue); margin-bottom:.7rem; } .folla__alerxenos{display:flex; flex-wrap:wrap; gap:.4rem} /* ── Ficha del producto y notas de cata ─────────────────────────────────── Las etiquetas las pone el tipo de negocio (Origen/Finca en un café de especialidad, D.O./Bodega en un bar de vinos), asi que este CSS no sabe ni quiere saber cuales son: solo sabe pintar pares. En dos columnas cuando cabe, porque son datos cortos y en una sola columna la ficha se hace larguisima y deja de leerse de un vistazo. */ .folla__datos{margin:1.25rem 0 0; display:grid; gap:.55rem .9rem} @media (min-width:24rem){ .folla__datos{grid-template-columns:1fr 1fr} } .folla__dato{min-width:0} .folla__dato dt{ font-family:var(--seco); font-size:.6875rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--suave); margin:0 0 .1rem} .folla__dato dd{margin:0; font-size:.9375rem; line-height:1.35; overflow-wrap:anywhere} /* Las notas de cata van en pastillas y no en una frase: se leen de un vistazo y son lo que engancha al que entiende. Van justo debajo de la descripcion, antes que cualquier otra cosa, porque son el gancho. */ .folla__notas{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.25rem} .nota{ display:inline-flex; align-items:center; padding:.4rem .75rem; border-radius:999px; font-family:var(--seco); font-size:.8125rem; font-weight:600; color:var(--realce); background:rgb(var(--realce-rgb)/.10); border:1px solid rgb(var(--realce-rgb)/.28); } .alerxeno{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .75rem .4rem .55rem; border-radius:999px; background:rgb(var(--tinta-rgb)/.05); border:1px solid var(--lina); font-size:.8125rem; font-weight:500; } .alerxeno svg{width:1.15rem; height:1.15rem; color:var(--acento); flex:none} .folla__nota{ margin:1.6rem 1.5rem 0; padding:.85rem 1rem; border-radius:1rem; background:rgb(var(--acento-rgb)/.07); border:1px solid rgb(var(--acento-rgb)/.16); font-size:.8125rem; line-height:1.5; color:var(--suave); display:flex; gap:.6rem; align-items:flex-start; } .folla__nota svg{width:1.1rem; height:1.1rem; flex:none; margin-top:.1rem; color:var(--acento)} /* Los botones del final de la ficha. Antes iban pegados al borde de abajo y se partían 2+1 dejando uno suelto. Ahora van en rejilla —caben dos por fila y a partir de ahí se reparten— separados del texto por una línea, y con aire por debajo: en un móvil con gesto de inicio, un botón a ras del borde se pulsa mal. */ .folla__pe{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr)); gap:.6rem; margin:1.5rem 1.5rem 0; padding-top:1.4rem; border-top:1px solid var(--lina); } .folla__pe .btn{justify-content:space-between; width:100%} /* Carta todavía sin platos. Mejor esto que un menú en blanco: el restaurante no queda mal delante de su cliente. */ .preparando{ width:min(100% - calc(var(--marxe)*2), 30rem); margin:4.5rem auto 5rem; text-align:center; } .preparando p{ font-family:var(--seco); font-variation-settings:'opsz' 60; font-weight:400; font-size:clamp(1.5rem,6vw,2rem); line-height:1.2; letter-spacing:-.02em; text-wrap:balance; } .preparando__sub{ font-family:var(--texto)!important; font-size:.9375rem!important; font-weight:400; color:var(--suave); margin-top:.85rem!important; letter-spacing:0!important; line-height:1.5; } .noscript{padding:2rem var(--marxe); text-align:center; color:var(--suave)} /* ═══ REVELADOS ═════════════════════════════════════════════════════════════ Solo se usan en la portada, que siempre está en pantalla al cargar. La carta (menú del día, categorías y platos) NUNCA arranca invisible: se fotografía, se imprime y se abre con conexiones malas — el contenido no puede depender de que un observador de scroll dispare. ═════════════════════════════════════════════════════════════════════════ */ .js [data-reveal]{ opacity:0; transform:translate3d(0,1.15rem,0); transition:opacity .75s var(--curva), transform .75s var(--curva); transition-delay:calc(var(--i,0) * 55ms); will-change:transform,opacity; } .js [data-reveal].visible{opacity:1; transform:none; will-change:auto} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important} .js [data-reveal]{opacity:1; transform:none} .portada__media img{animation:none; transform:scale(1.04)} } /* ═══ IMPRESIÓN ═════════════════════════════════════════════════════════════ */ @media print{ .grao,.barra,.portada__baixar,.portada__idiomas,.destacados,.folla,.saltar{display:none!important} .portada{min-height:auto; padding:0 0 1.5rem} .portada__media,.portada::after{display:none} body{background:#fff; color:#000} .pe{background:#fff; color:#000; border-top:1px solid #000} .prato__foto,.tarxeta__foto{display:none} .categoria{page-break-inside:avoid; padding-top:1.5rem} .js [data-reveal]{opacity:1!important; transform:none!important} }