/* YAVENO v5: apertura 01-film + riquadri 10-bento + carte 03-carte, poi il resto di v4 (../site.css, intatto).
   Gli stili delle sezioni nuove stanno sotto .s-film / .s-bento (bento.css) / .s-carte. Nessuna regola globale cambia il resto della pagina. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Telefono piccolo: entrambe le azioni restano interamente nella barra. */
@media (max-width:360px){.top{gap:10px}.top .chip{padding-right:8px}.top .chip-face{display:none}}

/* ===== 1. Film d'apertura (da alternative/v2/01-film) ===== */
.s-film{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#0a0b0c;color:var(--white)}
.s-film .fl-poster,.s-film .fl-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.s-film .fl-video{opacity:0;transition:opacity .6s}
.s-film .fl-video.on{opacity:1}
.s-film::after{content:"";position:absolute;left:0;right:0;bottom:0;height:170px;background:linear-gradient(to top,rgba(10,11,12,.84),rgba(10,11,12,0));pointer-events:none}
.s-film .fl-foot{position:absolute;z-index:2;left:var(--g);right:var(--g);bottom:clamp(14px,2.6vh,26px);display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:var(--max);margin:0 auto}
.s-film .fl-say{max-width:36ch;font-size:15px;line-height:1.4;color:rgba(255,255,255,.94)}
.s-film .fl-say small{display:block;margin-top:6px;font-size:12px;opacity:.78}
.s-film .fl-act{display:flex;align-items:center;gap:16px}
.s-film .fl-price{display:flex;align-items:center;gap:10px;font-size:15px;white-space:nowrap;text-decoration:none;color:var(--white)}
.s-film .fl-price strong{font-weight:500}
.s-film .btn{white-space:nowrap}

/* ===== 2. Riquadri (da alternative/v2/10-bento; il resto è in bento.css) ===== */
.s-bento{--bn-g:clamp(16px,4vw,64px);--bn-ease:cubic-bezier(.16,1,.3,1);--bn-spring:linear(0, 0.078, 0.254, 0.464, 0.663, 0.827, 0.948, 1.026, 1.068, 1.083, 1.08, 1.067, 1.049, 1.032, 1.018, 1.007, 0.999, 0.995, 0.993, 0.993, 0.994, 0.995, 0.997, 0.998, 0.999, 1, 1, 1.001, 1.001);--tile:#fff;
  background:var(--white);padding:clamp(80px,9vw,130px) var(--g) clamp(72px,8vw,120px);overflow-x:clip}
.s-bento .section-head{display:block;margin-bottom:clamp(32px,4vw,56px)}
.s-bento .bn-grid,.s-bento .note{max-width:var(--max)}
.s-bento .note{margin:20px auto 0}
.s-bento ul{list-style:none;margin:0;padding:0}
.s-bento button{font:inherit;color:inherit}
.s-bento .serif{font-family:Mazius,Georgia,serif;font-style:normal}
.s-bento .head h3{font-weight:500}
.s-bento .tab,.s-bento .switch{min-height:32px}
.s-bento .tab:focus-visible,.s-bento .switch:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* i riquadri entrano solo quando la sezione si vede (prima restano nascosti, senza animazione che parte a vuoto) */
.s-bento .bn-tile{animation-play-state:paused}
.s-bento.is-in .bn-tile{animation-play-state:running}
html.motion-paused .s-bento *{animation-play-state:paused}
html.motion-paused .s-bento .bn-tile{animation-play-state:running}
/* Google: il confronto trova la differenza, l'orario del sito si corregge */
.s-bento .link .ne{stroke:#a06a00;opacity:1;transition:opacity .3s}
.s-bento .link .spin{opacity:0;stroke:var(--ink)}
.s-bento .sync.s-spin .spin{opacity:1}
.s-bento .sync.s-spin .ne,.s-bento .sync.s-done .ne{opacity:0}
.s-bento .sync.s-spin.s-done .spin{opacity:0}
@media (max-width:980px){.s-bento{padding-top:clamp(64px,12vw,90px)}.s-bento .link{rotate:none}}

/* ===== 3. Sei viste autentiche, una protagonista ===== */
.s-carte{--ct-bg:#f6f7f7;background:var(--ct-bg)}
.ct-hero{position:relative;padding:48px var(--g) 56px;scroll-margin-top:88px;border-top:1px solid var(--line)}
.ct-stage{max-width:1100px;margin-inline:auto}
.ct-copy{display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:40px;margin-bottom:24px}
.ct-copy h2{font-size:clamp(36px,3.8vw,54px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.ct-copy p{max-width:40ch;font-size:17px;line-height:1.45;color:#2a2f33}
.ct-selectors{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.ct-selectors a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 4px;color:#4c5359;font-size:15px;text-decoration:none;border-bottom:2px solid transparent}
.ct-selectors a[aria-current="true"]{color:var(--ink);border-color:var(--ink)}
.ct-selectors a:focus-visible,.ct-track:focus-visible,.ct-slide:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.ct-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#737b80 transparent;padding-block:8px 12px;scroll-behavior:auto}
.ct-slide{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start;scroll-margin-top:88px}
.ct-shot{height:clamp(280px,calc(100svh - 405px),560px);position:relative;display:flex;align-items:center;justify-content:center}
.ct-shot picture{display:contents}
.ct-shot img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 16px 40px rgba(30,38,43,.12)}
.ct-shot img[hidden]{display:none}
.ct-shot video{position:absolute;top:50%;left:50%;width:auto;height:auto;max-width:100%;max-height:100%;transform:translate(-50%,-50%);object-fit:contain;border-radius:12px;box-shadow:0 16px 40px rgba(30,38,43,.12);opacity:0;pointer-events:none}
.ct-shot.ct-video-ready video{opacity:1}
.ct-shot.ct-video-ready img{opacity:0}
.ct-slide figcaption{display:grid;grid-template-columns:190px 1fr;gap:20px;margin-top:18px;font-size:18px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.ct-slide figcaption span{font-size:15px;font-weight:400;color:#4c5359}
.ct-demo{font-size:12.5px;color:#4c5359;margin-top:16px;line-height:1.5}
.ct-end{margin-top:24px}
.ct-end-lead{display:none}
.ct-links{display:flex;gap:32px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.ct-link{display:grid;grid-template-columns:auto auto;gap:4px 16px;align-items:baseline;color:var(--ink);text-decoration:none}
.ct-name{font-size:18px;font-weight:500;line-height:1.3}
.ct-kind{display:none}
.ct-open{display:inline-flex;align-items:center;gap:8px;font-size:14px;text-decoration:underline;text-underline-offset:4px}
.ct-open svg{width:16px;height:16px}
@media(hover:hover) and (pointer:fine){.ct-selectors a:hover,.ct-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}}
@media(max-width:759px){
  .ct-hero{padding:28px var(--g) 36px}
  .ct-copy{display:block;margin-bottom:14px}
  .ct-copy h2{font-size:32px;max-width:18ch;line-height:1.04}
  .ct-copy p{font-size:15px;line-height:1.4;margin-top:12px;max-width:40ch}
  .ct-selectors{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px;margin-bottom:12px}
  .ct-selectors a{font-size:14px;padding-inline:0}
  .ct-shot{height:clamp(220px,calc(100svh - 455px),420px)}
  .ct-slide figcaption{display:block;font-size:16px;line-height:1.4;margin-top:14px;min-height:70px}
  .ct-slide figcaption span{display:block;font-size:13px;margin-bottom:4px}
  .ct-demo{font-size:12px;margin-top:12px}
  .ct-end{margin-top:18px}
  .ct-links{gap:16px}
  .ct-link{display:block}
  .ct-name{font-size:16px;margin-right:10px}
  .ct-open{font-size:13px}
}
@media(pointer:coarse) and (max-height:500px){.ct-shot{height:220px}.ct-copy{gap:20px}.ct-copy h2{font-size:34px}.ct-copy p{font-size:15px}}


/* ===== Film d'apertura: telefono ===== */
@media (max-width:900px){
  .s-film::after{height:250px}
  .s-film .fl-foot{flex-direction:column;align-items:stretch;gap:12px;bottom:18px}
  .s-film .fl-say{font-size:13.5px;max-width:none}
  .s-film .fl-say small{margin-top:4px}
  .s-film .fl-act{flex-direction:column;align-items:stretch;gap:10px}
  .s-film .fl-price{justify-content:center;font-size:14px}
  .s-film .btn{min-height:48px}
}

@media (prefers-reduced-motion:reduce){
  .s-film .fl-video{display:none}
  .ct-hint i{animation:none}
}

/* Riquadri a due colonne (tablet): il telefono occupa due righe, lingue e Concierge gli stanno accanto */
@media (max-width:980px) and (min-width:600px){
  .s-bento .t-phone{grid-row:span 2}
  .s-bento .t-lang,.s-bento .t-chat{min-height:236px}
}

.s-bento .chips{flex-wrap:wrap}

/* Schermi medi (981–1240): niente righe che si spezzano nel riquadro Google, il film del sito resta intero */
@media (max-width:1240px) and (min-width:981px){
  .s-bento .sync{grid-template-columns:1fr 40px 1fr}
  .s-bento .card{padding:11px 12px}
  .s-bento .card .row{font-size:12.5px;gap:6px;white-space:nowrap}
  /* il film del sito resta intero (proporzione 16:10, mai ritagliato): vedi bento.css */
}