/* Sezione «Cosa c’è dentro» (quattro riquadri: menu dal QR, lingue, chat, confronto con Google) = alternativa 10-bento, tutto sotto .s-bento (generato dai sorgenti di alternative/v2/10-bento/style.css, poi rifinito a mano) */
/* ===== bento ===== */
.s-bento .bn-grid{max-width:1344px;margin:clamp(30px,3.4vw,46px) auto 0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,264px);gap:16px;perspective:1600px}
.s-bento .t-phone{grid-area:1/1/2/7}
.s-bento .t-google{grid-area:1/7/2/13}
.s-bento .t-lang{grid-area:2/1/3/7}
.s-bento .t-chat{grid-area:2/7/3/13}
.s-bento .bn-tile{--mx:50%;--my:50%;--tx:0;--ty:0;position:relative;display:flex;flex-direction:column;background:var(--tile);border:1px solid var(--line);border-radius:28px;overflow:hidden;isolation:isolate;
  transform:perspective(1000px) rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg));transform-style:flat;will-change:transform;
  animation:bn-pop 1.15s var(--bn-spring) both;animation-delay:calc(.35s + var(--i)*90ms)}
@keyframes bn-pop{from{opacity:0;translate:0 56px;scale:.94}30%{opacity:1}to{opacity:1;translate:0 0;scale:1}}
/* bordo che si accende dove passa il puntatore */
.s-bento .bn-tile::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:5;opacity:0;transition:opacity .4s;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(22,24,26,.5),rgba(22,24,26,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* riflesso morbido di luce */
.s-bento .bn-tile::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;transition:opacity .4s;
  background:radial-gradient(300px circle at var(--mx) var(--my),rgba(255,255,255,.6),rgba(255,255,255,0) 70%),radial-gradient(640px circle at var(--mx) var(--my),rgba(255,247,232,.0) 30%,rgba(22,24,26,.035) 100%)}
.s-bento .bn-tile.hov::before,.s-bento .bn-tile.hov::after{opacity:1}
.s-bento .bn-tile.hov{box-shadow:0 1px 2px rgba(22,24,26,.05),0 22px 44px -22px rgba(22,24,26,.28);transition:box-shadow .4s}
.s-bento .head{position:relative;z-index:3;padding:24px 26px 0}
.s-bento .head h3{font-size:clamp(19px,1.55vw,23px);line-height:1.15;letter-spacing:-.03em;font-weight:500}
.s-bento .head p{margin-top:6px;font-size:14.5px;line-height:1.4;color:var(--muted);max-width:30em}
.s-bento .media{position:relative;flex:1;min-height:0;transform:translate3d(calc(var(--tx)*1px),calc(var(--ty)*1px),0)}
/* 1 menu dal QR: testo a sinistra; a destra la carta col QR, la freccia e la schermata vera del menu sul telefono, che esce dal bordo in basso; nessun testo dentro il disegno */
.s-bento .t-phone{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center}
.s-bento .t-phone .head{padding:0 6px 0 28px}
.s-bento .bn-link{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-size:15px;font-weight:500;color:var(--ink);text-underline-offset:4px}
.s-bento .bn-link:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.s-bento .t-phone .media{height:100%;display:flex;align-items:stretch;padding:26px 22px 0 0}
.s-bento .qr-flow{flex:1;display:flex;align-items:center;gap:clamp(6px,.9vw,12px);min-width:0}
.s-bento .qr-card{flex:0 1 84px;min-width:0;width:84px;height:auto;display:block}
.s-bento .qr-arrow{flex:0 0 auto;width:clamp(14px,1.6vw,22px);height:auto;color:var(--ink)}
.s-bento .qr-phone{position:relative;flex:1 1 0;min-width:0;max-width:176px;margin-left:auto;align-self:stretch;overflow:hidden;background:#fff;border:6px solid #16181a;border-bottom:0;border-radius:28px 28px 0 0;box-shadow:0 18px 30px -18px rgba(22,24,26,.5)}
.s-bento .qr-phone img{position:absolute;left:0;top:0;display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top}
/* 3 lingue: le lettere cambiano una a una, morbide */
.s-bento .t-lang .media{display:flex;flex-direction:column;justify-content:flex-end;padding:0 26px 22px}
.s-bento .morph{display:grid;height:74px;margin-bottom:12px;overflow:hidden;padding:0 4px}
.s-bento .word{grid-area:1/1;display:flex;align-items:center;font:500 clamp(30px,2.65vw,40px)/1 Ronzino,sans-serif;letter-spacing:-.05em;white-space:nowrap}
.s-bento .word .c{display:inline-block;transition:transform .9s var(--bn-ease),opacity .55s ease;transition-delay:calc(var(--k)*38ms)}
.s-bento .word.out .c{opacity:0;transform:translateY(-.5em)}
.s-bento .word.pre .c{opacity:0;transform:translateY(.5em)}
.s-bento .word.snap .c{transition:none}
.s-bento .chips{display:flex;flex-wrap:nowrap;gap:4px}
.s-bento .chips li{font-size:11.5px;padding:4px 8px;white-space:nowrap;border-radius:999px;border:1px solid var(--line);color:var(--muted);transition:background .4s,color .4s,border-color .4s}
.s-bento .chips li.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* 4 concierge: chat che si scrive */
.s-bento .t-chat .media{padding:14px 22px 20px;display:flex;align-items:flex-end}
.s-bento .bn-chat{width:100%;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.35}
.s-bento .bubble{position:relative;max-width:92%;padding:9px 13px;border-radius:16px;min-height:36px}
.s-bento .bubble.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px}
.s-bento .bubble.bot{align-self:flex-start;background:#f1f3f3;border-bottom-left-radius:5px;min-width:56px}
.s-bento .bubble .typed{white-space:pre-wrap}
.s-bento .caret{display:none;width:1.5px;height:1em;background:currentColor;margin-left:1px;vertical-align:-2px;animation:bn-blink .9s steps(2) infinite}
.s-bento .bubble.typing .caret{display:inline-block}
@keyframes bn-blink{50%{opacity:0}}
.s-bento .dots{display:none;gap:4px;align-items:center;height:18px}
.s-bento .bubble.wait .dots{display:inline-flex}
.s-bento .dots i{width:6px;height:6px;border-radius:50%;background:#9aa0a5;animation:bn-dot 1s ease-in-out infinite}
.s-bento .dots i:nth-child(2){animation-delay:.15s}
.s-bento .dots i:nth-child(3){animation-delay:.3s}
@keyframes bn-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.s-bento .bubble.bot,.s-bento .bubble.me{transition:opacity .5s,transform .6s var(--bn-ease)}
.s-bento .bubble.hide{opacity:0;transform:translateY(8px)}
/* 5 Google: gli orari si allineano */
.s-bento .t-google .media{padding:18px 26px 24px;display:flex;align-items:center}
.s-bento .sync{width:100%;display:grid;grid-template-columns:1fr 56px 1fr;align-items:center}
.s-bento .card{border:1px solid var(--line);border-radius:16px;padding:14px 16px;background:#fff;box-shadow:0 8px 20px -14px rgba(22,24,26,.3)}
.s-bento .card small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.s-bento .card small svg{width:12px;height:12px;fill:#d93025}
.s-bento .card b{display:block;font-weight:500;font-size:16px;margin-top:2px;letter-spacing:-.02em}
.s-bento .card .row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13px}
.s-bento .hrs{position:relative;display:inline-grid;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.s-bento .hrs>span{grid-area:1/1;transition:opacity .5s,transform .6s var(--bn-ease)}
.s-bento .hrs .new{opacity:0;transform:translateY(8px);color:var(--wa)}
.s-bento .sync.s-site .c-site .hrs .old,.s-bento .sync.s-done .hrs .old{opacity:0;transform:translateY(-8px)}
.s-bento .sync.s-site .c-site .hrs .new,.s-bento .sync.s-done .hrs .new{opacity:1;transform:none}
.s-bento .sync.s-site .c-site{box-shadow:0 0 0 3px rgba(23,121,63,.15),0 8px 20px -14px rgba(22,24,26,.3);border-color:rgba(23,121,63,.5)}
.s-bento .c-site{transition:box-shadow .5s,border-color .5s}
.s-bento .bn-aperto{color:var(--wa);font-weight:500}
.s-bento .link{position:relative;height:36px;display:grid;place-items:center}
.s-bento .link svg{grid-area:1/1;width:30px;height:30px;fill:none;stroke:var(--muted);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.s-bento .link .spin{opacity:.5;transition:opacity .3s}
.s-bento .sync.s-spin .spin{opacity:1;stroke:var(--ink);animation:bn-rot 1s linear infinite}
@keyframes bn-rot{to{rotate:360deg}}
.s-bento .link .tick{opacity:0;scale:.5;stroke:var(--wa);transition:opacity .3s,scale .6s var(--bn-spring)}
.s-bento .link .tick path{stroke-dasharray:20;stroke-dashoffset:20}
.s-bento .sync.s-done .tick{opacity:1;scale:1}
.s-bento .sync.s-done .tick path{stroke-dashoffset:0;transition:stroke-dashoffset .5s .15s ease-out}
.s-bento .sync.s-done .spin{opacity:0}
.s-bento .note{max-width:1344px;margin:18px auto 0;padding:0;font-size:13.5px;color:var(--muted)}
/* telefono */
@media (max-width:980px){
.s-bento .bn-grid{grid-template-columns:1fr;grid-template-rows:none;gap:12px;padding:0}
.s-bento .t-phone,.s-bento .t-lang,.s-bento .t-chat,.s-bento .t-google{grid-area:auto}
.s-bento .bn-tile{border-radius:22px}
.s-bento .head{padding:20px 20px 0}
.s-bento .t-phone{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:230px}
.s-bento .t-lang,.s-bento .t-chat{min-height:270px}
.s-bento .t-google .media{padding:16px 16px 22px}
.s-bento .sync{grid-template-columns:1fr;gap:8px}
.s-bento .link{height:30px;rotate:90deg}
.s-bento .t-phone .media{padding:20px 16px 0 0}
.s-bento .t-phone .head{padding-left:20px}
.s-bento .bn-tile{transform:none!important}
}
@media (max-width:980px) and (min-width:600px){
.s-bento .bn-grid{grid-template-columns:1fr 1fr}
.s-bento .t-phone,.s-bento .t-google{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
.s-bento *,.s-bento *::before,.s-bento *::after{animation:none!important;transition:none!important}
.s-bento .bn-tile{transform:none!important}
.s-bento .bn-tile::before,.s-bento .bn-tile::after{display:none}
.s-bento .caret,.s-bento .dots{display:none!important}
}