body { font-feature-settings: "ss01", "cv11"; text-rendering: optimizeLegibility; }
::selection { background: #7baaf7; color: #fff; }
:focus-visible { outline: 2px solid #4285F4; outline-offset: 3px; border-radius: 6px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.glass { background: rgba(246,244,239,.82); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); transform: translate3d(0,0,0); }
.glass-dark { background: rgba(20,20,23,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translate3d(0,0,0); }
.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; 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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); opacity: .07; mix-blend-mode: overlay; }
.eyebrow { display: inline-flex; align-items: center; gap: .75rem; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow .num { font-variant-numeric: tabular-nums; opacity: .55; }
.eyebrow .bar { width: 28px; height: 1px; background: currentColor; opacity: .4; }
.link-u { background: linear-gradient(currentColor, currentColor) no-repeat left 100% / 0% 1.5px; transition: background-size .35s ease, color .2s; padding-bottom: 2px; }
.link-u:hover { background-size: 100% 1.5px; }
.field { width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: #fff; padding: .9rem 1rem; border-radius: 14px; font-size: .9rem; transition: border-color .2s, background .2s, box-shadow .2s; }
.field::placeholder { color: #8b8b94; }
.field:focus { outline: none; border-color: #7baaf7; background: rgba(255,255,255,.07); box-shadow: 0 0 0 4px rgba(123,170,247,.15); }
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; background: #4285F4; color: #fff; font-weight: 700; border-radius: 14px; transition: background .2s, transform .2s; }
.btn-primary:hover { background: #2f6fe0; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary .arr { transition: transform .25s; }
.btn-primary:hover .arr { transform: translateX(3px); }
.svc { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.svc:hover { transform: translate3d(0,-3px,0); box-shadow: 0 18px 40px -22px rgba(0,0,0,.5); }
.marker-highlight { display: inline; background-image: linear-gradient(to right, rgba(123,170,247,.45), rgba(123,170,247,.45)); background-size: 0% 35%; background-repeat: no-repeat; background-position: left 85%; transition: background-size 1.5s cubic-bezier(.22,1,.36,1); border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.marker-highlight.is-visible { background-size: 100% 35%; }
.outline-text { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.85); }
.sep { width: 6px; height: 6px; border-radius: 2px; background: #fff; transform: rotate(45deg); opacity: .7; flex: none; }
.cv { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* ---------- QR ---------- */
.qr { display: grid; grid-template-columns: repeat(21, 1fr); aspect-ratio: 1; }
.qr i { display: block; }
.qr i.on { background: currentColor; }

/* ---------- Demo carta ---------- */
.scanline { position: absolute; left: 6%; right: 6%; height: 3px; border-radius: 3px; background: #4285F4; box-shadow: 0 0 16px 4px rgba(66,133,244,.6); animation: scan 1.6s ease-in-out infinite alternate; }
@keyframes scan { from { top: 8%; } to { top: 90%; } }
.layer { transition: opacity .45s ease, transform .45s ease; }
.layer.off { opacity: 0; pointer-events: none; transform: scale(1.03); }
.tab { transition: background .2s, color .2s; }
.tab.active { background: #111113; color: #fff; }
.dish { transition: background .2s, transform .2s; }
.dish:active { transform: scale(.98); }
.dish-in { animation: dishIn .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes dishIn { from { opacity: 0; transform: translate3d(0,10px,0); } to { opacity: 1; transform: none; } }
.toast { transform: translate3d(0,140%,0); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.toast.show { transform: none; }
.bar-fill { width: 0; transition: width 1.4s cubic-bezier(.22,1,.36,1); }

details summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .marker-highlight { background-size: 100% 35%; }
}