/* Mandrions Restaurant — scenari e percorso dimostrativo */
:root {
  --cfg-ink:#1c1c1c; --cfg-plum:#000000; --cfg-berry:#006aff; --cfg-clay:#5a5a5a;
  --cfg-olive:#ebebeb; --cfg-paper:#ffffff; --cfg-bg:#f7f7f7; --cfg-muted:#5a5a5a;
  --cfg-line:#d8d8d8; --cfg-shadow:0 16px 40px rgba(20,43,42,.08);
  color-scheme:light;
}
html { scroll-behavior:smooth; background:var(--cfg-bg); }
body { background:radial-gradient(ellipse at 12% 0%,rgba(220,230,212,.56),transparent 34rem),var(--cfg-bg); color:var(--cfg-ink); }
.cfg-app { min-height:100vh; padding-bottom:48px; }
.cfg-top { position:relative; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px clamp(16px,4vw,58px); background:rgba(255,254,250,.96); border-bottom:1px solid #d4ddd5; }
.cfg-top::after { content:""; position:absolute; left:clamp(16px,4vw,58px); right:clamp(16px,4vw,58px); bottom:-1px; height:2px; background:linear-gradient(90deg,var(--cfg-clay) 0 54px,transparent 54px); }
.cfg-brand { display:flex; align-items:center; gap:11px; color:var(--cfg-ink); text-decoration:none; }
.cfg-mark { display:grid; place-items:center; width:43px; height:43px; flex:none; border:1px solid #cfdbd0; border-radius:50%; background:#f7f7f7; color:var(--cfg-plum); font-size:22px; }
.cfg-brand__name { display:block; font:700 19px/1.2 var(--font-display); letter-spacing:-.025em; }
.cfg-brand__hint { display:block; margin-top:4px; color:#88532f; font-size:12px; font-weight:700; }
.cfg-title { color:var(--cfg-muted); font-size:12px; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.cfg-top>a:last-child { display:inline-flex; align-items:center; min-height:44px; padding:0 12px; border-radius:999px; color:var(--cfg-plum); font-size:13px; font-weight:700; }
.cfg-top>a:last-child:hover { background:#f7f7f7; }
.cfg-nav { position:sticky; top:0; z-index:5; display:flex; gap:7px; padding:9px clamp(16px,4vw,58px); overflow-x:auto; border-bottom:1px solid #d8dfd5; background:rgba(239,241,233,.96); backdrop-filter:blur(12px); }
.cfg-nav a { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:11px; color:#526762; font-size:13px; font-weight:750; white-space:nowrap; }
.cfg-nav a:hover { color:var(--cfg-ink); background:#e2e9df; }
.cfg-nav a[aria-current=page] { background:var(--cfg-plum); color:#fff; box-shadow:0 4px 12px rgba(21,94,99,.18); }
.cfg-nav__n { display:grid; place-items:center; width:25px; height:25px; flex:none; border:1px solid currentColor; border-radius:50%; font-size:11px; }
.cfg-nav a[aria-current=page] .cfg-nav__n { border-color:rgba(255,255,255,.72); background:rgba(255,255,255,.14); }
.cfg-nav__short { display:none; }
.cfg-main { width:min(1200px,100%); margin:auto; padding:28px clamp(16px,4vw,52px) 50px; }
.cfg-crumb { display:flex; align-items:center; gap:9px; margin-bottom:20px; color:#697a74; font-size:12px; }
.cfg-crumb a { color:inherit; text-decoration:underline; text-decoration-color:#bdc9bf; text-underline-offset:3px; }
.cfg-hero { position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(190px,.75fr); align-items:center; gap:32px; min-height:260px; padding:clamp(30px,5vw,58px); overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:8px 30px 8px 30px; background:linear-gradient(115deg,#123f40,#000000 64%,#276c64); color:#fff; box-shadow:0 22px 46px rgba(20,43,42,.14); }
.cfg-hero::before { content:""; position:absolute; inset:12px; border:1px solid rgba(244,231,203,.18); border-radius:5px 23px 5px 23px; pointer-events:none; }
.cfg-hero:after { content:"✳"; position:absolute; right:-10px; bottom:-148px; color:rgba(245,233,204,.08); font:310px/1 var(--font-display); pointer-events:none; }
.cfg-eyebrow { margin:0 0 9px; color:#006aff; font-size:12px; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.cfg-hero .cfg-eyebrow { color:#efc99b; }
.cfg-hero h1 { max-width:17ch; margin:0 0 12px; color:#fff; font:700 clamp(34px,4.3vw,54px)/1.02 var(--font-display); letter-spacing:-.045em; }
.cfg-hero p { max-width:58ch; margin:0; color:#e2ece6; font-size:16px; line-height:1.65; }
.cfg-hero__art { display:grid; place-items:center; min-height:200px; }
.cfg-orbit { display:grid; place-items:center; width:min(205px,100%); aspect-ratio:1; margin:auto; border:1px solid rgba(255,255,255,.34); border-radius:50%; background:radial-gradient(circle at 34% 27%,#f1dcae 0 11%,#d2a37d 37%,#9d775e 38% 53%,#234e4d 54% 100%); box-shadow:0 20px 36px rgba(5,23,24,.32),inset 0 0 0 8px rgba(255,255,255,.08); transform:rotate(-7deg); }
.cfg-orbit span { font-size:72px; filter:drop-shadow(0 8px 12px rgba(20,43,42,.24)); transform:rotate(7deg); }
.cfg-head { display:flex; align-items:end; justify-content:space-between; gap:15px; margin:34px 0 16px; }
.cfg-head h2 { margin:0; color:var(--cfg-ink); font:700 clamp(25px,3vw,32px)/1.2 var(--font-display); letter-spacing:-.025em; }
.cfg-head p { margin:5px 0 0; color:var(--cfg-muted); font-size:14px; }
.cfg-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:18px; }
.cfg-scenario { position:relative; display:flex; flex-direction:column; min-height:370px; padding:17px; overflow:hidden; border:1px solid #dbe1d8; border-radius:8px 22px 8px 22px; background:var(--cfg-paper); box-shadow:0 8px 22px rgba(20,43,42,.045); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.cfg-scenario::before { content:""; position:absolute; top:0; left:17px; right:17px; height:3px; background:var(--cfg-clay); }
.cfg-scenario:hover,.cfg-scenario:focus-within { transform:translateY(-3px); border-color:#9fb8a9; box-shadow:var(--cfg-shadow); }
.cfg-scenario__art { position:relative; display:block; aspect-ratio:2.15/1; min-height:0; padding:0; overflow:hidden; border-radius:5px 15px 5px 15px; background:#e5e8e2; }

.cfg-scenario__image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.cfg-scenario__art::after { position:absolute; inset:0; content:""; background:linear-gradient(115deg,rgba(0,0,0,.08),transparent 58%,rgba(0,0,0,.22)); pointer-events:none; }
.cfg-scenario__no { position:absolute; top:9px; right:12px; z-index:1; color:rgba(255,255,255,.95); font:700 34px var(--font-display); text-shadow:0 2px 10px rgba(0,0,0,.45); }
.cfg-tag { display:inline-flex; align-items:center; gap:6px; min-height:30px; width:max-content; margin-top:15px; padding:4px 10px; border-radius:999px; background:#f7f7f7; color:#285b4b; font-size:11px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
.cfg-scenario h3 { margin:11px 0 7px; color:var(--cfg-ink); font:700 24px/1.2 var(--font-display); letter-spacing:-.025em; }
.cfg-scenario p { margin:0; color:#536761; font-size:14px; line-height:1.55; }
.cfg-mod-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.cfg-mod-chips span { padding:6px 9px; border:1px solid #dbe3d9; border-radius:8px; background:#fbfcf8; color:#405750; font-size:12px; }
.cfg-scenario__foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:18px; color:var(--cfg-muted); font-size:12px; }
.cfg-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 15px; border:1px solid #c9d5cd; border-radius:8px 14px 8px 14px; background:var(--cfg-paper); color:#193b38; font:700 14px var(--font-sans); text-align:center; text-decoration:none; cursor:pointer; transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease; }
.cfg-btn:hover { transform:translateY(-1px); border-color:#72978c; background:#f0f5ee; color:#123f40; }
.cfg-btn--primary { border-color:var(--cfg-plum); background:var(--cfg-plum); color:#fff; box-shadow:0 4px 12px rgba(21,94,99,.15); }
.cfg-btn--primary:hover { border-color:#104b4f; background:#104b4f; color:#fff; }
.cfg-btn--quiet { background:transparent; color:#526762; }
.cfg-note { margin-top:18px; padding:14px 16px; border-left:3px solid var(--cfg-clay); border-radius:0 11px 11px 0; background:#f8efe3; color:#534d3f; font-size:14px; line-height:1.65; }
.cfg-scenario-head { display:flex; align-items:center; gap:15px; margin:0 0 20px; }
.cfg-scenario-head__icon { display:grid; place-items:center; width:62px; height:62px; flex:none; border:1px solid #d8e2d8; border-radius:50%; background:#f7f7f7; font-size:33px; }
.cfg-scenario-head h2 { margin:0; color:var(--cfg-ink); font:700 clamp(27px,3.3vw,38px)/1.1 var(--font-display); letter-spacing:-.025em; }
.cfg-scenario-head p { margin:6px 0 0; color:var(--cfg-muted); font-size:14px; }
.cfg-module-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.cfg-module { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:88px; padding:14px; border:1px solid #dbe1d8; border-radius:8px 17px 8px 17px; background:var(--cfg-paper); box-shadow:0 5px 16px rgba(20,43,42,.035); }
.cfg-module:hover { border-color:#9fb8a9; box-shadow:0 10px 24px rgba(20,43,42,.08); }
.cfg-module__icon { display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:#f7f7f7; font-size:21px; }
.cfg-module h3 { margin:0; color:var(--cfg-ink); font:700 18px/1.25 var(--font-display); letter-spacing:-.025em; }
.cfg-module p { margin:4px 0 0; color:var(--cfg-muted); font-size:13px; }
.cfg-module__actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.cfg-module__actions .cfg-btn { min-height:44px; padding:0 11px; font-size:12px; }
.cfg-sequence { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:13px 15px; border:1px solid #dce3d9; border-radius:8px 14px 8px 14px; background:#f7f7f7; color:#38564c; font-size:13px; font-weight:700; }
.cfg-sequence span { color:#0050c8; }
.cfg-journey { display:grid; grid-template-columns:300px minmax(0,1fr); gap:20px; margin-top:20px; }
.cfg-steps { display:grid; align-content:start; gap:9px; }
.cfg-step { display:flex; align-items:center; gap:11px; min-height:68px; padding:9px 12px; border:1px solid var(--cfg-line); border-radius:8px 15px 8px 15px; background:var(--cfg-paper); color:var(--cfg-ink); text-align:left; cursor:pointer; transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease; }
.cfg-step:hover { border-color:#9fb8a9; background:#f3f6f0; }
.cfg-step[aria-current=step] { border-color:var(--cfg-plum); background:#f0f5ee; box-shadow:0 0 0 3px rgba(21,94,99,.12); }
.cfg-step:last-child[aria-current=step] { border-color:#0050c8; background:#f8efe3; box-shadow:0 0 0 3px rgba(187,116,71,.14); }
.cfg-step__num { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%; background:#e7eee5; color:var(--cfg-plum); font-size:13px; font-weight:850; }
.cfg-step[aria-current=step] .cfg-step__num { background:var(--cfg-plum); color:#fff; }
.cfg-step:last-child[aria-current=step] .cfg-step__num { background:#0050c8; color:#fff; }
.cfg-step__meta strong,.cfg-step__meta small { display:block; }
.cfg-step__meta strong { font-size:14px; }
.cfg-step__meta small { margin-top:3px; color:var(--cfg-muted); font-size:12px; }
.cfg-presentation { padding:clamp(20px,4vw,34px); border:1px solid var(--cfg-line); border-radius:8px 22px 8px 22px; background:var(--cfg-paper); box-shadow:0 12px 30px rgba(20,43,42,.06); }
.cfg-presentation h2 { margin:0 0 9px; color:var(--cfg-ink); font:700 clamp(25px,3vw,34px)/1.2 var(--font-display); letter-spacing:-.025em; }
.cfg-presentation>p { color:#4e625d; font-size:15px; line-height:1.65; }
.cfg-talk-track { margin:18px 0; padding:15px; border-left:3px solid var(--cfg-clay); border-radius:0 12px 12px 0; background:#f5f2e9; color:#42574f; font:italic 16px/1.6 var(--font-display); }
.cfg-presentation__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:20px; }
.cfg-progress { display:flex; align-items:center; gap:5px; }
.cfg-progress i { width:25px; height:5px; border-radius:4px; background:#d9e1d7; }
.cfg-progress i.is-done { background:var(--cfg-clay); }
.cfg-progress[role=progressbar] { padding:5px 8px; border-radius:999px; background:#eef1e9; }
.cfg-progress[role=progressbar]::after { content:attr(aria-valuenow) " / " attr(aria-valuemax); margin-left:6px; color:#42574f; font-size:11px; font-weight:750; font-variant-numeric:tabular-nums; }
.cfg-mod-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.cfg-mod-pills span { padding:6px 9px; border-radius:9px; background:#f7f7f7; color:#38584a; font-size:12px; font-weight:700; }
.cfg-footer { margin-top:21px; color:#61736d; font-size:12px; line-height:1.6; }
.cfg-btn:focus-visible,.cfg-nav a:focus-visible,.cfg-step:focus-visible,.cfg-top a:focus-visible,.cfg-crumb a:focus-visible { outline:3px solid #c17b45; outline-offset:3px; box-shadow:0 0 0 5px rgba(255,254,250,.9); }
.cfg-nav a,.cfg-step,.cfg-btn,.cfg-top a { -webkit-tap-highlight-color:rgba(21,94,99,.12); }
@media (min-width:761px) and (max-width:1024px) {
  .cfg-main { padding:24px 27px 42px; }
  .cfg-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cfg-scenario { min-height:350px; }
  .cfg-scenario:last-child { grid-column:1/-1; }
  .cfg-journey { grid-template-columns:minmax(210px,.36fr) minmax(0,1fr); }
}
@media (max-width:760px) {
  .cfg-top { gap:8px; padding:9px 12px; }
  .cfg-brand { min-width:0; gap:8px; }
  .cfg-mark { width:38px; height:38px; font-size:19px; }
  .cfg-brand__name { font-size:16px; }
  .cfg-brand__hint { margin-top:2px; font-size:11px; }
  .cfg-top>a:last-child { max-width:116px; min-height:44px; padding:0 8px; font-size:12px; text-align:right; white-space:normal; line-height:1.2; }
  .cfg-nav { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; padding:7px 10px; overflow:visible; }
  .cfg-nav a { min-width:0; min-height:44px; justify-content:center; gap:6px; padding:0 6px; font-size:12px; }
  .cfg-nav__full { display:none; }
  .cfg-nav__short { display:inline; }
  .cfg-main { padding:16px 13px 32px; }
  .cfg-crumb { flex-wrap:wrap; gap:6px; margin-bottom:14px; }
  .cfg-hero { grid-template-columns:minmax(0,1fr) 64px; gap:6px; min-height:0; padding:20px 17px; border-radius:7px 22px 7px 22px; }
  .cfg-hero::before { inset:7px; border-radius:5px 17px 5px 17px; }
  .cfg-hero h1 { font-size:clamp(29px,8vw,38px); }
  .cfg-hero p { font-size:15px; line-height:1.55; }
  .cfg-eyebrow { font-size:11px; }
  .cfg-hero__art { min-height:72px; }
  .cfg-orbit { width:60px; }
  .cfg-orbit span { font-size:29px; }
  .cfg-hero:after { bottom:-106px; font-size:210px; }
  .cfg-head { align-items:flex-start; flex-direction:column; gap:10px; margin:26px 0 13px; }
  .cfg-head h2 { font-size:25px; }
  .cfg-grid,.cfg-module-list { grid-template-columns:minmax(0,1fr); gap:13px; }
  .cfg-scenario { min-height:0; padding:14px; }
  .cfg-scenario__art { min-height:88px; }
  .cfg-scenario__art { aspect-ratio:2.15/1; min-height:0; }
  .cfg-scenario__no { font-size:34px; }
  .cfg-scenario h3 { font-size:22px; }
  .cfg-scenario__foot { align-items:flex-start; flex-direction:column; }
  .cfg-scenario__foot .cfg-btn { width:100%; }
  .cfg-scenario-head { align-items:flex-start; }
  .cfg-scenario-head__icon { width:52px; height:52px; font-size:27px; }
  .cfg-module { grid-template-columns:42px minmax(0,1fr); gap:10px; padding:12px; }
  .cfg-module__actions { grid-column:1/-1; justify-content:flex-start; }
  .cfg-module__actions .cfg-btn { flex:1 1 130px; }
  .cfg-journey { grid-template-columns:minmax(0,1fr); gap:13px; }
  .cfg-steps { display:flex; overflow-x:auto; overscroll-behavior-inline:contain; padding:2px 2px 8px; scroll-snap-type:x proximity; }
  .cfg-step { flex:0 0 min(78vw,230px); min-width:0; scroll-snap-align:start; }
  .cfg-presentation { padding:18px 16px; }
  .cfg-presentation h2 { font-size:25px; }
  .cfg-presentation__foot { align-items:stretch; flex-direction:column; }
  .cfg-presentation__foot>.cfg-btn { width:100%; }
  .cfg-presentation__foot>div { display:grid !important; grid-template-columns:1fr 1fr; }
  .cfg-note { margin-top:15px; padding:12px 13px; }
}
@media (max-width:380px) {
  .cfg-top>a:last-child { max-width:104px; font-size:11px; }
  .cfg-brand__name { font-size:15px; }
  .cfg-nav { gap:3px; padding-inline:7px; }
  .cfg-nav a { gap:4px; padding-inline:4px; font-size:11px; }
  .cfg-nav__n { width:20px; height:20px; }
  .cfg-hero { grid-template-columns:minmax(0,1fr) 56px; padding:18px 14px; }
  .cfg-orbit { width:52px; }
  .cfg-orbit span { font-size:26px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}