/* Khall theme -- reemplaza a liquid-glass.css como sistema de diseño
compartido por TODO el sitio (staff/admin y los 3 menus de cliente).
Inspirado en menuly.com.ar: fondo oscuro de seda, serif elegante para
titulos, acento terracota, botones/inputs tipo pildora.
Estructura de este archivo:
1. Fuentes
2. Tokens (familia "Original" oscura/clara + "Blanco y Negro", igual
que antes -- tema_visual no se toco, solo se re-pinta)
3. Fondo de seda animada (mismas clases/selectores que animated-bg.js
ya mueve -- .khall-bg-stripes/-lines/-glow -- asi que ese script no
necesita cambiar, solo lo que esas clases pintan)
4. Sistema de animacion por scroll (.reveal, ver scroll-reveal.js)
5. Componentes compartidos: botones/inputs pildora, tabs con icono,
tarjeta de platillo, hero de platillo con carrusel, calificacion
con estrellas, tarjeta de reseña, tarjeta de mapa, caja informativa
Personalizacion por restaurante (solo QR/KhallBlets/pedidos en linea):
esas paginas sobreescriben --accent en runtime con restaurants.color_
acento_cliente (mismo patron que ya usa tema_visual con clases en ,
ver dashboard/mesero/etc.) -- Dashboard/staff/admin ignoran ese campo y
siempre usan el --accent default de aqui. La misma funcion tambien deriva
--bg/--bg-seda-claro/--bg-seda-oscuro del mismo hex (mismo tono, mucho
mas oscuro y algo menos saturado) para que la seda de fondo se sienta
coherente con el acento -- PRUEBA, ver aplicarColorAcento en
qr-menu.js/pedir.js; si no convence se puede volver a fijar estos tres
tokens al terracota original sin tocar el resto del sistema. */
/* ---- 1. Fuentes --------------------------------------------------------
Playfair Display (serif, titulos) + Inter (sans, texto) via Google
Fonts. Se cargan aqui con @import por simplicidad de este archivo, pero
cada HTML real debe preferir + en el (mas rapido que @import, que bloquea en
cascada) -- ver el head de khall-theme-demo.html para el snippet. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&display=swap');
/* ---- 2. Tokens ---------------------------------------------------------- */
:root{
/* Acento de marca. --amber queda como alias porque las 11 paginas que
migran en fases posteriores ya usan var(--amber) por todos lados --
definirlo aqui evita tener que reescribir cada referencia con el
mismo cambio, con retocar este solo alias ya heredan el terracota. */
--accent:#C1622E;
--accent-2:#D97542;
--accent-soft:rgba(var(--accent-rgb),0.16);
--amber:var(--accent);
--font-serif:'Playfair Display', Georgia, 'Iowan Old Style', serif;
--font-sans:'Inter', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono:'JetBrains Mono', monospace;
/* Familia "Original", sub-modo oscuro (default). Nombres de variable
iguales a los de liquid-glass.css para no romper el resto del CSS
inline de cada pagina mientras migran fase por fase. */
--bg:#14100D; --panel:#1c1712; --panel-2:#120e0b; --line:#2e2620;
--text:#f5efe6; --text-muted:#a39889;
/* Funcionales -- no son "el acento", son señales (kanban, conexion),
se mantienen estables entre temas igual que en liquid-glass.css. */
--green:#7c9473; --orange:#c8793f; --red:#b5533f;
--paper:#F5F1E8; --paper-ink:#2A2622;
--radius-pill:999px;
--radius-lg:28px;
--radius-md:18px;
--radius-sm:12px;
--shadow-card:0 10px 30px rgba(0,0,0,.45);
--shadow-card-sm:0 4px 16px rgba(0,0,0,.35);
--shadow-accent-glow:0 0 0 1px rgba(var(--accent-rgb),.35), 0 10px 28px rgba(var(--accent-rgb),.2);
--ease-standard:cubic-bezier(0.22, 1, 0.36, 1);
--glass-ease:cubic-bezier(0.16, 1, 0.3, 1); /* alias, ver nota en .glass-enter mas abajo */
/* rgb "crudo" del acento (para componer rgba() en botones/glow) y el
color de texto/icono que va ENCIMA de una superficie solida rellena
con --accent -- necesario aparte de --text porque en Blanco y Negro
el acento se invierte (blanco en oscuro, negro en claro) y el texto
de la pagina NO: sin este token, el boton solido de Blanco y Negro
quedaba con texto claro fijo sobre un relleno tambien claro. */
--accent-rgb:193,98,46;
--accent-ink:#fff8f1;
/* Fondo de seda tenido a partir del acento (ver aplicarColorAcento en
qr-menu.js/pedir.js) -- estos son los valores por defecto que ya
coinciden con el terracota original, para paginas de staff que nunca
llaman a esa funcion y para el instante antes de que el JS corra. */
--bg-seda-claro:#1a1512;
--bg-seda-oscuro:#100c09;
}
html.light-theme{
--bg:#f6f1e9; --panel:#ffffff; --panel-2:#efe8db; --line:#e0d6c2;
--text:#241f19; --text-muted:#71685a;
/* El acento se oscurece un poco en claro (mismo tono, menos luminancia)
para que siga pasando contraste sobre --bg claro. */
--accent:#A6501F;
--accent-2:#C1622E;
--accent-rgb:166,80,31;
}
/* ---- Familia "Blanco y Negro" (tema_visual, sin cambios de mecanismo,
solo re-pintada al lenguaje nuevo). El acento sigue siendo "el extremo
opuesto al fondo" -- ver la nota original en liquid-glass.css, se
conserva ese razonamiento. */
html.theme-bw{
--accent:#e9e9e9; --accent-2:#ffffff; --accent-rgb:233,233,233; --accent-ink:#141414;
--bg:#050505; --panel:#141414; --panel-2:#0a0a0a; --line:#2b2b2b;
--text:#f2f2f2; --text-muted:#948f88;
--paper:#f4f4f4; --paper-ink:#1a1a1a;
}
html.theme-bw.light-theme{
--accent:#161616; --accent-2:#000000; --accent-rgb:22,22,22; --accent-ink:#f5f5f5;
--bg:#f7f7f7; --panel:#ffffff; --panel-2:#efefef; --line:#dcdcdc;
--text:#161616; --text-muted:#726c63;
}
*{box-sizing:border-box;}
/* ---- 3. Fondo de seda ----------------------------------------------------
Mismo contenedor/clases que ya mueve public/js/animated-bg.js
(.khall-bg > .khall-bg-stripes/.khall-bg-lines/.khall-bg-glow), asi que
ese script no cambia -- solo lo que estas clases pintan cambia, de rayas
diagonales a pliegues de tela. Tres capas:
-stripes: pliegues grandes y suaves (gradientes radiales alargados)
-lines: brillo fino de la seda (bandas diagonales de bajisima
opacidad) + grano de tela (SVG turbulence de un pixel,
repetido) para que no se vea plano
-glow: brillo calido que sigue al cursor (igual que antes) */
.khall-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--bg);}
.khall-bg-stripes,.khall-bg-lines{position:absolute;inset:-15%;width:130%;height:130%;will-change:transform;transition:transform 1.1s var(--ease-standard);}
.khall-bg-stripes{
background:
radial-gradient(ellipse 55% 140% at 18% 22%, rgba(255,255,255,0.05), transparent 60%),
radial-gradient(ellipse 45% 160% at 78% 15%, rgba(255,255,255,0.035), transparent 65%),
radial-gradient(ellipse 65% 130% at 60% 78%, rgba(255,255,255,0.045), transparent 62%),
radial-gradient(ellipse 50% 150% at 12% 85%, rgba(0,0,0,0.35), transparent 60%),
linear-gradient(150deg, var(--bg-seda-claro) 0%, var(--bg-seda-oscuro) 45%, var(--bg) 100%);
}
.khall-bg-lines{
background:
repeating-linear-gradient(122deg,
transparent 0px, transparent 130px,
rgba(255,255,255,0.028) 130px, rgba(255,255,255,0.028) 133px,
transparent 133px, transparent 280px,
rgba(var(--accent-rgb),0.05) 280px, rgba(var(--accent-rgb),0.07) 283px,
transparent 283px, transparent 460px),
/* Grano de tela -- feTurbulence de baja frecuencia, se repite en
mosaico; opacidad muy baja para que solo se note como textura, no
como ruido. */
url("data:image/svg+xml;utf8,");
mix-blend-mode:overlay;
}
.khall-bg-glow{
position:absolute;top:0;left:0;width:640px;height:640px;margin:-320px 0 0 -320px;
background:radial-gradient(circle, rgba(var(--accent-rgb),0.2) 0%, rgba(var(--accent-rgb),0.07) 40%, transparent 70%);
mix-blend-mode:screen;opacity:0;will-change:transform;
transition:transform .35s var(--ease-standard), opacity .6s ease;
}
.khall-bg-glow.active{opacity:1;}
html.light-theme .khall-bg-stripes{
background:
radial-gradient(ellipse 55% 140% at 18% 22%, rgba(0,0,0,0.035), transparent 60%),
radial-gradient(ellipse 45% 160% at 78% 15%, rgba(0,0,0,0.025), transparent 65%),
radial-gradient(ellipse 65% 130% at 60% 78%, rgba(0,0,0,0.03), transparent 62%),
linear-gradient(150deg, #fbf7ef 0%, #f3ecdd 50%, #f6f1e9 100%);
}
html.light-theme .khall-bg-lines{
background:
repeating-linear-gradient(122deg,
transparent 0px, transparent 130px,
rgba(0,0,0,0.03) 130px, rgba(0,0,0,0.03) 133px,
transparent 133px, transparent 280px,
rgba(166,80,31,0.06) 280px, rgba(166,80,31,0.09) 283px,
transparent 283px, transparent 460px),
url("data:image/svg+xml;utf8,");
mix-blend-mode:multiply;
}
html.light-theme .khall-bg-glow{
background:radial-gradient(circle, rgba(166,80,31,0.22) 0%, rgba(166,80,31,0.08) 40%, transparent 70%);
mix-blend-mode:multiply;
}
/* Fondo personalizado (marca blanca, plan Premium AI) -- reemplaza el
fondo de seda por la foto que subio el restaurante (ver fondo_url en
db.js), pero SIEMPRE con un overlay solido fijo encima, no configurable
por el restaurante -- ya hubo un bug real de contraste en este proyecto
por dejar fotos de fondo sin apagar su brillo (ver el commit del fix),
asi que aqui no se repite: nunca se expone opacidad/brillo como opcion.
El overlay cambia de oscuro a claro segun el tema (igual que el resto de
--bg-seda-.../--text arriba) para que el texto siga leyendose en los dos.
Las capas de seda (stripes/lines/glow) se ocultan -- pelearian visualmente
contra la foto en vez de sumar textura. Solo lo usan qr-menu.html/pedir.html
(ver aplicarFondoPersonalizado en sus JS); Dashboard/staff nunca la leen,
mismo criterio que color_acento_cliente. */
.khall-bg.con-fondo{
background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), var(--fondo-personalizado);
background-size: cover;
background-position: center;
}
html.light-theme .khall-bg.con-fondo{
background-image: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6)), var(--fondo-personalizado);
}
.khall-bg.con-fondo .khall-bg-stripes,
.khall-bg.con-fondo .khall-bg-lines,
.khall-bg.con-fondo .khall-bg-glow{ display:none; }
html.theme-bw .khall-bg-stripes{
background:
radial-gradient(ellipse 55% 140% at 18% 22%, rgba(255,255,255,0.045), transparent 60%),
radial-gradient(ellipse 65% 130% at 70% 80%, rgba(255,255,255,0.035), transparent 62%),
linear-gradient(150deg, #171717 0%, #0a0a0a 50%, #050505 100%);
}
html.theme-bw .khall-bg-lines{
background:
repeating-linear-gradient(122deg, transparent 0 130px, rgba(255,255,255,0.03) 130px 133px, transparent 133px 280px),
url("data:image/svg+xml;utf8,");
mix-blend-mode:overlay;
}
html.theme-bw .khall-bg-glow{background:radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 40%, transparent 70%);mix-blend-mode:screen;}
html.theme-bw.light-theme .khall-bg-stripes{
background:
radial-gradient(ellipse 55% 140% at 18% 22%, rgba(0,0,0,0.04), transparent 60%),
linear-gradient(150deg, #fdfdfd 0%, #f2f2f2 50%, #f7f7f7 100%);
}
html.theme-bw.light-theme .khall-bg-lines{
background:url("data:image/svg+xml;utf8,");
mix-blend-mode:multiply;
}
html.theme-bw.light-theme .khall-bg-glow{background:radial-gradient(circle, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.05) 40%, transparent 70%);mix-blend-mode:multiply;}
@keyframes khall-bg-drift{
0%{ transform: translate3d(0,0,0); }
50%{ transform: translate3d(-2%, 1.2%, 0); }
100%{ transform: translate3d(0,0,0); }
}
.khall-bg.ambient .khall-bg-stripes{ animation: khall-bg-drift 52s ease-in-out infinite; }
.khall-bg.ambient .khall-bg-lines{ animation: khall-bg-drift 52s ease-in-out infinite reverse; }
/* Panel/modal entrance -- alias de la animacion que ya usaba liquid-glass,
varias paginas siguen disparando la clase .glass-enter tal cual. */
@keyframes glass-in{ from{ opacity:0; transform:scale(0.96); } to{ opacity:1; transform:scale(1); } }
.glass-enter,.glass-tab-content{ animation: glass-in 0.25s var(--glass-ease) both; }
/* ---- 4. Animacion por scroll (ver public/js/scroll-reveal.js) ----------
El script solo agrega/quita "is-visible"; toda la animacion real (que
propiedades, cuanto dura, con que curva) vive aqui para poder ajustarla
sin tocar JS. data-reveal opcionalmente trae "up" (default, translateY
positivo -> 0), "fade" (solo opacity, sin desplazamiento) o "scale". */
[data-reveal]{
opacity:0;
transform:translateY(40px);
transition:opacity .65s var(--ease-standard), transform .65s var(--ease-standard);
transition-delay:var(--reveal-delay, 0s);
}
[data-reveal="fade"]{ transform:none; }
[data-reveal="scale"]{ transform:translateY(20px) scale(0.96); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce){
[data-reveal]{ opacity:1; transform:none; transition:none; }
.khall-bg.ambient .khall-bg-stripes,.khall-bg.ambient .khall-bg-lines{ animation:none; }
.khall-bg-stripes,.khall-bg-lines,.khall-bg-glow{ transition:none; }
.glass-enter,.glass-tab-content{ animation-duration:.01ms !important; }
*{ scroll-behavior:auto !important; }
}
/* ---- 5. Componentes compartidos ----------------------------------------- */
body{ font-family:var(--font-sans); color:var(--text); background:var(--bg); }
h1,h2,h3,.font-serif{ font-family:var(--font-serif); font-weight:600; letter-spacing:.005em; }
.eyebrow{ font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); }
/* Botones pildora -- .btn-pill (solido, CTA principal) y .btn-pill-outline
(secundario). El hover cumple la especificacion de Parte 2: -4/-6px en Y,
escala leve, glow del acento, 200-250ms. */
.btn-pill{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font-family:var(--font-sans); font-weight:600; font-size:14.5px;
padding:13px 26px; border-radius:var(--radius-pill); border:1px solid transparent;
background:linear-gradient(180deg, var(--accent-2), var(--accent));
color:var(--accent-ink); cursor:pointer; text-decoration:none;
transition:transform .22s var(--ease-standard), box-shadow .22s var(--ease-standard), filter .2s ease;
}
.btn-pill:hover{ transform:translateY(-5px) scale(1.02); box-shadow:var(--shadow-accent-glow); filter:brightness(1.04); }
.btn-pill:active{ transform:translateY(-1px) scale(.99); }
.btn-pill:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-pill-outline{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font-family:var(--font-sans); font-weight:600; font-size:14.5px;
padding:12px 25px; border-radius:var(--radius-pill); border:1px solid var(--line);
background:rgba(255,255,255,.02); color:var(--text); cursor:pointer; text-decoration:none;
transition:transform .22s var(--ease-standard), border-color .22s var(--ease-standard), background .22s ease;
}
.btn-pill-outline:hover{ transform:translateY(-4px) scale(1.02); border-color:var(--accent); background:var(--accent-soft); }
/* Input pildora -- buscador de platillos, campos de nombre/telefono, etc. */
.input-pill{
width:100%; font-family:var(--font-sans); font-size:14.5px; color:var(--text);
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-pill);
padding:13px 20px; transition:border-color .2s ease, box-shadow .2s ease;
}
.input-pill::placeholder{ color:var(--text-muted); }
.input-pill:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.search-pill{ position:relative; }
.search-pill .input-pill{ padding-left:44px; }
.search-pill svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--text-muted); pointer-events:none; }
/* Tarjeta generica -- reemplaza el "vidrio" (blur+transparencia) por un
panel solido con borde sutil; el fondo de seda ya aporta profundidad, no
hacia falta el blur para separar capas. */
.card{
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
box-shadow:var(--shadow-card-sm);
transition:transform .25s var(--ease-standard), box-shadow .25s var(--ease-standard), border-color .25s var(--ease-standard);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:var(--accent); }
/* Caja informativa -- ej. "Pedi a domicilio o para retirar" en la
referencia: borde tenue del acento, fondo oscuro semitransparente. */
.info-box{
background:var(--accent-soft); border:1px solid rgba(193,98,46,.35); border-radius:var(--radius-md);
padding:16px 18px; color:var(--text);
}
.info-box strong{ font-family:var(--font-sans); font-weight:700; }
/* Tabs con icono arriba + texto, subrayado en la activa, con flechas para
desplazar en pantallas chicas (la referencia trae chevrons semitranspa-
rentes a los lados de la fila). */
.tabs-icon-wrap{ position:relative; }
.tabs-icon{
display:flex; gap:22px; overflow-x:auto; scroll-behavior:smooth; padding:4px 6px 12px;
-ms-overflow-style:none; scrollbar-width:none;
}
.tabs-icon::-webkit-scrollbar{ display:none; }
.tabs-icon .tab{
flex:none; display:flex; flex-direction:column; align-items:center; gap:6px;
background:none; border:none; cursor:pointer; padding:4px 2px 10px;
font-family:var(--font-sans); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
color:var(--text-muted); border-bottom:2px solid transparent;
transition:color .2s ease, border-color .2s ease;
}
.tabs-icon .tab svg{ width:22px; height:22px; }
.tabs-icon .tab.active{ color:var(--text); border-bottom-color:var(--accent); }
.tabs-icon .tab.active svg{ color:var(--accent); }
.tabs-scroll-btn{
position:absolute; top:0; bottom:12px; width:38px; display:flex; align-items:center; justify-content:center;
background:linear-gradient(90deg, var(--bg), transparent); border:none; color:var(--text-muted); cursor:pointer;
}
.tabs-scroll-btn.right{ right:0; transform:scaleX(-1); }
.tabs-scroll-btn.left{ left:0; }
/* Tarjeta de platillo -- foto redonda (radius-lg), nombre debajo, anillo de
acento si esta seleccionada, badge opcional (ej. "Nuevo"). */
.card-dish{
flex:none; width:104px; display:flex; flex-direction:column; align-items:center; gap:8px;
background:none; border:none; cursor:pointer; padding:0; text-align:center;
}
.card-dish-photo{
position:relative; width:96px; height:96px; border-radius:var(--radius-lg); overflow:hidden;
border:2px solid transparent; background:var(--panel-2);
transition:border-color .22s var(--ease-standard), transform .22s var(--ease-standard);
}
.card-dish-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-dish.active .card-dish-photo{ border-color:var(--accent); }
.card-dish:hover .card-dish-photo{ transform:translateY(-4px) scale(1.02); }
.card-dish-badge{
position:absolute; top:6px; right:6px; background:var(--accent); color:var(--accent-ink);
font-size:9.5px; font-weight:700; letter-spacing:.04em; padding:2px 7px; border-radius:var(--radius-pill);
}
.card-dish-name{ font-family:var(--font-sans); font-size:12.5px; font-weight:600; color:var(--text); line-height:1.3; }
/* Vista de detalle del platillo -- eyebrow, titulo serif, foto grande con
carrusel (flechas + puntos), precio serif, CTA pildora, ingredientes. */
.dish-hero-photo{
position:relative; width:100%; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3;
background:var(--panel-2);
}
.dish-hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.dish-hero-nav{
position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%;
background:rgba(20,16,13,.55); border:1px solid rgba(255,255,255,.15); color:#fff;
display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(6px);
transition:background .2s ease, transform .2s ease;
}
.dish-hero-nav:hover{ background:rgba(var(--accent-rgb),.55); transform:translateY(-50%) scale(1.06); }
.dish-hero-nav.prev{ left:12px; } .dish-hero-nav.next{ right:12px; }
.dish-hero-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; }
.dish-hero-dots span{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:background .2s ease, width .2s ease; }
.dish-hero-dots span.active{ background:var(--accent); width:16px; border-radius:3px; }
.dish-hero-price{ font-family:var(--font-serif); font-size:30px; font-weight:600; color:var(--text); }
.dish-hero-ingredientes{ font-family:var(--font-sans); font-size:13px; line-height:1.6; color:var(--text-muted); }
/* Calificacion con estrellas -- inline (junto a un nombre) y resumen
grande (numero serif + estrellas + conteo). */
.stars{ display:inline-flex; gap:1px; color:var(--accent); font-size:14px; letter-spacing:1px; }
.stars .empty{ color:var(--line); }
.rating-inline{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-sans); font-size:13px; color:var(--text-muted); }
.rating-summary{
display:flex; align-items:center; gap:14px; background:var(--panel); border:1px solid var(--line);
border-radius:var(--radius-lg); padding:18px 22px;
}
.rating-summary .num{ font-family:var(--font-serif); font-size:34px; font-weight:700; color:var(--text); }
.rating-summary .meta{ font-family:var(--font-sans); font-size:12.5px; color:var(--text-muted); margin-top:2px; }
/* Tarjeta de reseña individual. */
.review-card{
background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-md);
padding:16px 18px; display:flex; flex-direction:column; gap:8px;
}
.review-card .review-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.review-card .review-name{ font-family:var(--font-sans); font-weight:700; font-size:14.5px; color:var(--text); }
.review-card .review-text{ font-family:var(--font-sans); font-size:13.5px; color:var(--text-muted); line-height:1.5; }
/* Tarjeta de mapa -- iframe + boton flotante "Abrir en Maps". */
.map-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); }
.map-card iframe{ display:block; width:100%; height:260px; border:0; filter:grayscale(.15) contrast(1.03); }
.map-card-open{
position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:6px;
background:#fff; color:#1a4fd6; font-family:var(--font-sans); font-weight:600; font-size:13px;
padding:9px 14px; border-radius:var(--radius-pill); text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.map-card-address{ font-family:var(--font-sans); font-size:13px; color:var(--text-muted); margin-top:10px; line-height:1.5; }
.map-card-address a{ color:var(--accent); text-decoration:none; font-weight:600; }
/* Avatar circular con anillo de acento (logo del restaurante en el header
de los menus de cliente). */
.avatar-ring{
width:72px; height:72px; border-radius:50%; border:2px solid var(--accent); padding:2px;
overflow:hidden; flex:none;
}
.avatar-ring img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
/* Utilidad de stagger -- se usa junto con [data-reveal]; el JS de
scroll-reveal.js le asigna --reveal-delay a cada hijo de un grupo. */
[data-reveal-group] > *{ --reveal-delay:calc(var(--reveal-index, 0) * 0.09s); }