/* Hyle — foglio di stile unico.
   Carta chiara con il motivo originale, inchiostro tipografico, piede scuro.
   Animazioni solo con transform e opacità. */

@font-face{font-family:"Lato";src:url("/assets/font/lato-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("/assets/font/jost-latin-200-normal.woff2") format("woff2");font-weight:200;font-style:normal;font-display:block}
@font-face{font-family:"Lato";src:url("/assets/font/lato-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --carta:#fbfaf8;
  --inchiostro:#231f20;
  --inchiostro-2:#7a7a7a;
  --inchiostro-3:#9c958f;
  --notte:#1c1a19;
  --notte-testo:#e7e3dd;
  --titoli:"mencken-std-narrow", "Mencken Std Narrow", Georgia, "Times New Roman", serif;
  --titoli-head:"mencken-std-head-narrow", "mencken-std-narrow", Georgia, serif;
  --testo:"mencken-std", "Mencken Std", Georgia, "Times New Roman", serif;
  --ui:"Lato", "Helvetica Neue", Arial, sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --durata:.75s;
  --margine:clamp(20px, 8.2vw, 150px);
  --fs-barra:clamp(13px, .95vw, 17px);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* scroll morbido (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:auto}
body{margin:0;background:var(--carta) url("/assets/img/sfondo-carta-hyle.webp") repeat;background-size:1728px auto;color:var(--inchiostro);font-family:var(--testo);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.vai-al-contenuto{position:fixed;left:12px;top:12px;z-index:100;background:var(--inchiostro);color:var(--carta);padding:10px 14px;transform:translateY(-200%)}
.vai-al-contenuto:focus{transform:none}
.ui{font-family:var(--ui);font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* link con sottolineatura che si disegna */
.sl{position:relative;display:inline-block}
.sl::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
@media (hover:hover){.sl:hover::after{transform:scaleX(1);transform-origin:left}}

/* ---------- barre fisse ---------- */
.barra{position:fixed;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-left:max(var(--margine), env(safe-area-inset-left,0px));padding-right:max(var(--margine), env(safe-area-inset-right,0px));pointer-events:none}
.barra>*{pointer-events:auto}
.barra.alto{top:0;padding-top:calc(env(safe-area-inset-top,0px) + clamp(22px, 4.5vh, 56px))}
.barra.basso{bottom:0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(20px, 4.5vh, 52px))}
.gruppo{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px)}
.barra .ui{font-size:var(--fs-barra);letter-spacing:.05em}
.lingue{display:flex;gap:8px}
.lingue a[aria-current="true"]{opacity:1}
.lingue a{opacity:.45;transition:opacity .2s}
@media (hover:hover){.lingue a:hover{opacity:1}}
.bottone-menu{display:flex;align-items:center;gap:10px}
.bottone-menu i{display:block;width:17px;height:5px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.marchio{display:block;width:calc(var(--fs-barra) * 12.6)}
.marchio svg{display:block;width:100%;height:auto;fill:currentColor}
.marchio svg path:first-child{opacity:.6;stroke-width:1px;vector-effect:non-scaling-stroke}
/* testo delle barre fisse: nero su chiaro, bianco su scuro (deciso voce per voce dallo script) */
.barra a,.barra button,.barra .lingue,.verso-piede{transition:color .3s ease}
.barra [data-su="scuro"],.verso-piede[data-su="scuro"],.sl-freccia[data-su="scuro"]{color:#fff}
.barra [data-su="chiaro"],.verso-piede[data-su="chiaro"],.sl-freccia[data-su="chiaro"]{color:var(--inchiostro)}
.sl-freccia{transition:color .3s ease}

/* ---------- home ---------- */
.home-stage{height:100vh;height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  padding-left:max(var(--margine), env(safe-area-inset-left,0px));padding-right:max(var(--margine), env(safe-area-inset-right,0px))}
.ruota{position:relative;height:min(78vh,760px);display:flex;align-items:center;--passo:190px}
.ruota ol{list-style:none;margin:0;padding:0;width:100%}
.ruota li{font-family:var(--titoli);line-height:1;text-align:center}
.ruota li a{display:inline-block;padding:6px 12px;line-height:.92}
/* senza script: elenco semplice */
html:not(.js) .ruota li{font-size:34px;margin:6px 0}
/* con script: ruota */
.js .ruota ol{position:relative;height:100%}
.js .ruota li{position:absolute;left:0;right:0;top:50%;font-size:clamp(60px,6.9vw,132px);transform:translateY(-50%);
  transition:transform var(--durata) var(--ease),opacity var(--durata) var(--ease),color var(--durata) var(--ease);will-change:transform,opacity}
.js .ruota li.laterale{color:#6b6663}
.freccia{position:absolute;z-index:3;left:max(0px, calc(50% - 16vw - 30px));width:60px;height:60px;display:grid;place-items:center;margin-top:-8px}
.freccia svg{width:34px;height:31px;fill:currentColor;transition:transform .35s var(--ease)}
.freccia.su{top:calc(50% - var(--passo) * .48 - 30px)}.freccia.su svg{transform:rotate(90deg)}
.freccia.giu{top:calc(50% + var(--passo) * 1.12 - 30px)}.freccia.giu svg{transform:rotate(-90deg)}
@media (hover:hover){.freccia.su:hover svg{transform:rotate(90deg) translateX(-4px)}.freccia.giu:hover svg{transform:rotate(-90deg) translateX(-4px)}}
html:not(.js) .freccia{display:none}
.cornice{position:relative;justify-self:center;width:min(36vw, 72vh, 700px);aspect-ratio:1/1;overflow:hidden;background:#d9d4cc}
.scatto{position:absolute;inset:0;opacity:0;transform:scale(1.05);transition:opacity var(--durata) var(--ease),transform 1.4s var(--ease)}
.scatto.attivo{opacity:1;transform:scale(1)}
.scatto img{width:100%;height:100%;object-fit:cover}
html:not(.js) .scatto:first-child{opacity:1;transform:none}
.linguette{display:none}
.verso-piede{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + clamp(20px, 4.5vh, 52px));z-index:21;transform:translateX(-50%);
  display:grid;place-items:center;width:44px;height:44px;transition:opacity .4s var(--ease)}
.verso-piede span{position:relative;display:block;width:18px;height:29px;border:1px solid currentColor;border-radius:10px}
.verso-piede span::after{content:"";position:absolute;left:50%;top:6px;width:1px;height:6px;background:currentColor;transform:translateX(-50%);animation:scorri 1.8s var(--ease) infinite}
body.oltre .verso-piede{opacity:0;pointer-events:none}


@media (min-width:861px){
.slider-piatti.foto-sinistra{grid-template-columns:minmax(0,58.5fr) minmax(0,41.5fr)}
.slider-piatti.foto-sinistra .foto{order:-1}
.slider-piatti.foto-sinistra .testo{justify-content:flex-start;padding:0 max(var(--margine), env(safe-area-inset-right,0px)) clamp(230px,27vh,300px) clamp(24px,2.2vw,44px)}
.slider-piatti.foto-sinistra .sl-freccia.prec{left:calc(58.5% - 160px)}
.slider-piatti.foto-sinistra .sl-freccia.succ{left:calc(58.5% + 120px)}
.slider-piatti.foto-sinistra .nome-piatto{left:auto;right:calc(41.5% + clamp(16px,1.8vw,32px))}
}
@media (max-width:860px){
  .home-stage{display:block;padding:0;height:100svh;touch-action:pan-x}
  .cornice{position:fixed;inset:0;width:auto;aspect-ratio:auto;z-index:0;justify-self:auto}
  .cornice::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.04) 38%,rgba(0,0,0,.4));pointer-events:none}
  .ruota{position:fixed;inset:0;height:auto;z-index:2;color:#fff}
  .js .ruota li.laterale{color:#fff}
  .js .ruota li{text-align:left;font-size:48px;padding-left:max(14px, env(safe-area-inset-left,0px))}
  .freccia{display:none}
  .home .barra{color:#fff}
  .linguette{display:flex;flex-direction:column;gap:10px;position:fixed;right:0;top:calc(env(safe-area-inset-top,0px) + 86px);z-index:21}
  .linguette a{writing-mode:vertical-rl;background:rgba(28,26,25,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;padding:16px 9px}
  .solo-computer{display:none!important}
  :root{--margine:20px}
  :root{--fs-barra:12px}
  .barra .ui{letter-spacing:.1em}
}

/* ---------- pagine interne ---------- */
.pagina main{position:relative;z-index:1}
/* misure riprese dal vecchio sito: titolo Head Narrow 180 px; testo Mencken Std 24/36, colonna da 720 px che parte al 42,5% */
.intro{position:relative;display:grid;grid-template-columns:32vw minmax(0, min(720px, 47vw));align-content:center;align-items:start;
  min-height:100vh;min-height:100svh;
  padding-top:calc(env(safe-area-inset-top,0px) + clamp(100px,12vh,140px));padding-bottom:clamp(100px,12vh,140px);
  padding-left:max(10.5vw, env(safe-area-inset-left,0px));padding-right:max(var(--margine), env(safe-area-inset-right,0px))}
.intro h1{font-family:var(--titoli-head);font-weight:700;font-size:clamp(96px,12.5vw,180px);line-height:1;letter-spacing:0;margin:0;text-wrap:balance}
.intro .corpo{margin-top:calc(clamp(96px,12.5vw,180px) * 1.05);max-width:720px}
.intro p{margin:0 0 .75em;color:var(--inchiostro-2);font-size:clamp(19px,1.67vw,24px);line-height:1.5}
.intro p strong{color:var(--inchiostro-2);font-weight:700}
.scorri{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);transform:translateX(-50%);width:16px;height:26px;border:1px solid currentColor;border-radius:9px;color:var(--inchiostro)}
.scorri::after{content:"";position:absolute;left:50%;top:6px;width:1px;height:5px;background:currentColor;transform:translateX(-50%);animation:scorri 1.8s var(--ease) infinite}
@keyframes scorri{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,8px)}}

.affiancata{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);min-height:100svh}
.affiancata.foto-sinistra{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.affiancata.foto-sinistra .foto{order:-1}
.affiancata .testo{display:flex;flex-direction:column;justify-content:center;gap:28px;padding-block:90px;
  padding-left:max(var(--margine), env(safe-area-inset-left,0px));padding-right:clamp(24px,6vw,100px)}
.affiancata.foto-sinistra .testo{padding-left:clamp(24px,6vw,100px);padding-right:max(var(--margine), env(safe-area-inset-right,0px))}
.affiancata blockquote{margin:0;font-size:clamp(21px,1.8vw,27px);line-height:1.45;max-width:24ch}
.affiancata h2,.elenco h2{font-family:var(--titoli);font-weight:400;font-size:clamp(38px,3.6vw,58px);line-height:1;margin:0}
.affiancata .testo p{margin:0;color:var(--inchiostro-2);max-width:46ch}
.affiancata .icona{width:30px;height:27px;fill:currentColor}
.affiancata .foto{position:relative;overflow:hidden;min-height:60vh;background:#cfc9c0}
.affiancata .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.coppia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(16px,3vw,48px);align-items:end;padding-block:clamp(80px,12vw,180px);
  padding-left:max(var(--margine), env(safe-area-inset-left,0px));padding-right:max(var(--margine), env(safe-area-inset-right,0px))}
.coppia figure{margin:0}
.coppia figcaption{font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-2);margin-top:14px}
.coppia img{width:100%;height:auto;background:#cfc9c0}

.foto-piena{margin:0}
.foto-piena .cornice-piena{position:relative;height:100svh;overflow:hidden;background:#cfc9c0}
.foto-piena img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-piena figcaption{font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-2);
  padding:14px max(var(--margine), env(safe-area-inset-right,0px)) 0 max(var(--margine), env(safe-area-inset-left,0px))}

.elenco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,5vw,80px);padding-block:clamp(90px,12vw,180px);
  padding-left:max(var(--margine), env(safe-area-inset-left,0px));padding-right:max(var(--margine), env(safe-area-inset-right,0px))}
.elenco p{margin:0 0 1.4em;color:var(--inchiostro-2);font-size:clamp(19px,1.45vw,22px)}
.elenco ol{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:c}
.elenco li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;color:var(--inchiostro-2);border-top:1px solid rgba(35,31,32,.18);padding-top:18px;counter-increment:c}
.elenco li::before{content:counter(c, upper-roman);font-family:var(--titoli);font-size:22px;color:var(--inchiostro);line-height:1.2}

.chiusura{text-align:center;padding-block:clamp(90px,12vw,180px);padding-left:max(var(--margine), env(safe-area-inset-left,0px));padding-right:max(var(--margine), env(safe-area-inset-right,0px))}
.chiusura p,.area-stampa h1{font-weight:400;font-family:var(--titoli);font-size:clamp(30px,3.2vw,52px);line-height:1.1;margin:0 auto 34px;max-width:20ch;text-wrap:balance}

@media (max-width:860px){
  .intro,.affiancata,.affiancata.foto-sinistra,.coppia,.elenco{grid-template-columns:minmax(0,1fr)}
  .intro{min-height:0;width:auto;padding-bottom:72px;padding-left:max(20px, env(safe-area-inset-left,0px))}
  .intro h1{font-size:clamp(68px,21vw,120px)}
  .intro .corpo{margin-top:18px}
  .affiancata{min-height:0}
  .affiancata .foto{min-height:75svh;order:-1}
  .affiancata .testo,.affiancata.foto-sinistra .testo{padding:56px max(20px, env(safe-area-inset-right,0px)) 64px max(20px, env(safe-area-inset-left,0px))}
  .foto-piena .cornice-piena{height:80svh}
  .scorri{display:none}
}

/* comparsa al passaggio: visibile anche senza script */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .rv.vis{opacity:1;transform:none}
.js .rv-foto img{transform:scale(1.08);transition:transform 1.6s var(--ease)}
.js .rv-foto.vis img{transform:none}


/* ---------- testata semplice ---------- */
.testata{padding-top:calc(env(safe-area-inset-top,0px) + clamp(140px,22vh,260px));padding-bottom:clamp(30px,5vw,70px);
  padding-left:max(10.5vw, env(safe-area-inset-left,0px));padding-right:max(var(--margine), env(safe-area-inset-right,0px))}
.testata h1{font-family:var(--titoli-head);font-weight:700;font-size:clamp(96px,12.5vw,180px);line-height:1;margin:0}

/* titoli di sezione comuni */
.galleria h2,.premi-anni h2,.articoli h2,.domande h2,.modulo-sezione h2{font-family:var(--titoli);font-weight:400;font-size:clamp(38px,3.6vw,58px);line-height:1;margin:0 0 clamp(28px,3.5vw,56px)}
.galleria,.premi-anni,.articoli,.domande,.modulo-sezione{padding-block:clamp(70px,9vw,140px);
  padding-left:max(var(--margine), env(safe-area-inset-left,0px));padding-right:max(var(--margine), env(safe-area-inset-right,0px))}

/* percorsi e prezzi */
.percorsi{margin:0;display:grid;gap:0;max-width:30rem;width:100%}
.percorsi div{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:16px;border-top:1px solid rgba(35,31,32,.2);padding:16px 0}
.percorsi div:last-child{border-bottom:1px solid rgba(35,31,32,.2)}
.percorsi dt{font-family:var(--titoli);font-size:clamp(30px,2.6vw,40px);line-height:1}
.percorsi dd{margin:0;font-family:var(--ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--inchiostro-2)}
.percorsi dd.prezzo{grid-row:1 / span 2;grid-column:2;font-family:var(--titoli);font-size:clamp(26px,2.2vw,34px);letter-spacing:0;text-transform:none;color:var(--inchiostro);font-variant-numeric:tabular-nums}

/* galleria dei piatti */
.galleria-testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 40px;margin-bottom:clamp(28px,3.5vw,56px)}
.galleria-testa h2{margin:0}
.galleria-testa p{margin:0;color:var(--inchiostro-2);max-width:40ch}
.galleria ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.2vw,36px) clamp(14px,2vw,30px)}
.galleria figure{margin:0}
.galleria img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#e7e2db}
.galleria figcaption{margin-top:12px;font-size:16px;line-height:1.35;color:var(--inchiostro-2)}
@media (max-width:1100px){.galleria ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.galleria ul{grid-template-columns:minmax(0,1fr)}}

/* riconoscimenti per anno */
.anni{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:clamp(24px,3vw,48px) clamp(20px,3vw,48px)}
.anno{border-top:1px solid rgba(35,31,32,.25);padding-top:16px}
.anno .numero{display:block;font-family:var(--titoli);font-size:clamp(40px,3.6vw,56px);line-height:1;margin-bottom:14px;font-variant-numeric:tabular-nums}
.anno ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:var(--inchiostro-2);font-size:17px;line-height:1.35}

/* articoli */
.articoli ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,64px) clamp(20px,2.4vw,40px)}
.articolo{display:flex;flex-direction:column;gap:12px;height:100%}
.articolo-foto{display:block;overflow:hidden;background:#e7e2db;aspect-ratio:3/2}
.articolo-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
@media (hover:hover){.articolo:hover .articolo-foto img{transform:scale(1.04)}.articolo:hover .leggi::after{transform:scaleX(1);transform-origin:left}}
.testata-articolo{color:var(--inchiostro-2);margin-top:6px}
.titolo-articolo{font-family:var(--titoli);font-size:clamp(24px,1.9vw,30px);line-height:1.08}
.estratto{color:var(--inchiostro-2);font-size:16px;line-height:1.5}
.leggi{margin-top:auto;align-self:flex-start;padding-top:6px}
@media (max-width:1100px){.articoli ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.articoli ul{grid-template-columns:minmax(0,1fr)}}
.chiusura .sotto{font-family:var(--testo);font-size:18px;color:var(--inchiostro-2);max-width:44ch;margin:-14px auto 30px}

/* prenota e gift card */
.intro.prenota{min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,min(560px,40vw));column-gap:clamp(32px,5vw,90px);align-content:start;align-items:start;padding-top:calc(env(safe-area-inset-top,0px) + clamp(140px,22vh,260px))}
.intro.prenota h1{font-size:clamp(80px,9.5vw,150px)}
.intro.prenota .corpo{margin-top:clamp(24px,3vw,44px)}
.nota-gruppi{font-family:var(--ui);font-size:12px!important;letter-spacing:.08em;text-transform:uppercase}
.riquadro-esterno{align-self:start;margin-top:clamp(0px,6vw,90px);background:rgba(255,255,255,.75);border:1px solid rgba(35,31,32,.14);padding:clamp(22px,2.6vw,40px);display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:280px}
.riquadro-esterno h2{margin:0}
.riquadro-esterno p{margin:0;color:var(--inchiostro-2);font-size:16px;max-width:42ch}
.riquadro-esterno.caricato{padding:0;min-height:0;background:#fff}
.riquadro-esterno iframe{display:block;width:100%;border:0;overflow:auto}
.bottone{font-family:var(--ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase;background:var(--inchiostro);color:var(--carta);padding:16px 26px;transition:background .25s,transform .2s var(--ease)}
@media (hover:hover){.bottone:hover{background:#000}}
.bottone:active{transform:scale(.98)}

/* domande */
.domande{max-width:1100px}
.elenco-domande{border-top:1px solid rgba(35,31,32,.2)}
.domande details{border-bottom:1px solid rgba(35,31,32,.2)}
.domande summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-family:var(--titoli);font-size:clamp(22px,1.8vw,28px);line-height:1.15}
.domande summary::-webkit-details-marker{display:none}
.domande summary span{flex:none;position:relative;width:14px;height:14px}
.domande summary span::before,.domande summary span::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .35s var(--ease)}
.domande summary span::after{transform:rotate(90deg)}
.domande details{overflow:hidden}
.domande details[open]:not(.in-chiusura) summary span::after{transform:rotate(0)}
.domande summary span::before,.domande summary span::after{transition:transform .45s cubic-bezier(.22,.8,.24,1)}
.domande details[open]:not(.in-chiusura) summary span::before{transform:rotate(180deg)}
.domande summary{transition:color .25s ease}
@media (hover:hover){.domande summary:hover{color:var(--inchiostro-2)}}
.risposta{padding:0 0 24px;color:var(--inchiostro-2);max-width:68ch}
.risposta p{margin:0}

/* modulo */
.modulo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;max-width:900px}
.modulo .largo{grid-column:1 / -1}
.campo{display:flex;flex-direction:column;gap:8px;min-width:0}
.campo label{font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro-2)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:17px;color:var(--inchiostro);background:rgba(255,255,255,.7);border:1px solid rgba(35,31,32,.25);border-radius:0;padding:12px 14px;width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--inchiostro)}
.consenso{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--inchiostro-2)}
.consenso input{margin-top:5px;accent-color:var(--inchiostro)}
.trappola{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.esito{display:inline-block;margin:0 0 0 16px;font-size:15px;color:var(--inchiostro-2)}
@media (max-width:640px){.modulo{grid-template-columns:minmax(0,1fr)}.esito{display:block;margin:14px 0 0}}


/* pagine legali */
.legale{max-width:780px;margin:0 auto;padding-top:calc(env(safe-area-inset-top,0px) + clamp(110px,15vh,160px));padding-bottom:clamp(80px,10vw,140px);
  padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px))}
.legale header h1{font-family:var(--titoli-head);font-weight:700;font-size:clamp(56px,7vw,110px);line-height:.9;margin:0 0 14px}
.legale header p{color:var(--inchiostro-2);margin:0 0 40px}
.indice{border-top:1px solid rgba(35,31,32,.2);border-bottom:1px solid rgba(35,31,32,.2);padding:18px 0;margin-bottom:24px}
.indice ol{margin:0;padding-left:1.4em;columns:2;column-gap:32px;font-size:16px;line-height:1.7}
.legale section{padding-top:28px;scroll-margin-top:90px}
.legale h2{font-family:var(--titoli);font-weight:400;font-size:clamp(26px,2.2vw,34px);line-height:1.1;margin:0 0 12px}
.legale p,.legale li{color:var(--inchiostro-2);font-size:17px}
.legale p{margin:0 0 12px}
.legale ul{margin:0 0 14px;padding-left:1.2em}
.legale li{margin-bottom:6px}
@media (max-width:640px){.indice ol{columns:1}}


/* ---------- banner dei cookie ---------- */
.consenso-banner{position:fixed;z-index:60;left:max(16px, env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  width:min(420px, calc(100vw - 32px));background:var(--carta);color:var(--inchiostro);border:1px solid rgba(35,31,32,.16);
  box-shadow:0 18px 50px -20px rgba(28,26,25,.45);padding:22px 22px 18px;display:flex;flex-direction:column;gap:12px;
  animation:consenso-entra .6s var(--ease) both}
.consenso-banner[hidden]{display:none}
.consenso-banner p{margin:0;font-size:15px;line-height:1.5;color:var(--inchiostro-2)}
.consenso-banner p.ui{color:var(--inchiostro)}
.consenso-azioni{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.consenso-azioni .bottone{padding:13px 10px;text-align:center}
.bottone.chiaro{background:transparent;color:var(--inchiostro);border:1px solid var(--inchiostro)}
@media (hover:hover){.bottone.chiaro:hover{background:rgba(35,31,32,.06)}}
.consenso-chiudi{position:absolute;top:6px;right:8px;width:36px;height:36px;font-size:22px;line-height:1;color:var(--inchiostro-2)}
.consenso-banner a{align-self:flex-start;font-size:11px!important}
@keyframes consenso-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.preferenze-cookie{font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;text-align:left}


/* ---------- slider dei piatti (menù) ---------- */
.slider-piatti{position:relative;display:grid;grid-template-columns:minmax(0,41.5fr) minmax(0,58.5fr);height:100vh;height:100svh;min-height:560px}
.slider-piatti .testo{display:flex;align-items:flex-end;justify-content:flex-end;padding:0 clamp(24px,2.2vw,44px) clamp(230px,27vh,300px) max(var(--margine), env(safe-area-inset-left,0px))}
.slider-piatti .basso{max-width:450px;display:flex;flex-direction:column;align-items:flex-start}
.slider-piatti .basso .frase+.frase{margin-top:-6px}
.link-slider{margin-top:6px}
.slider-piatti .firma{margin:-8px 0 20px;color:var(--inchiostro)}
/* collezione: i testi si sovrappongono, resta visibile solo quello attivo (l'altezza è quella del più lungo) */
.voci-testo{display:grid;width:min(100%,450px)}
.voce-coll{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;opacity:0;transform:translateY(10px);
  transition:opacity .45s ease, transform .6s var(--ease);pointer-events:none}
.voce-coll.attivo{opacity:1;transform:none;pointer-events:auto;transition-delay:.15s}
.contatore{color:var(--inchiostro-3);margin-bottom:18px;font-variant-numeric:tabular-nums}
.slider-piatti .lama{display:block;width:clamp(220px,19vw,320px);margin-bottom:26px;color:var(--inchiostro)}
.slider-piatti .lama svg{display:block;width:100%;height:auto;fill:currentColor}
.scheda{margin:14px 0 0;display:grid;width:100%;max-width:340px;border-top:1px solid rgba(35,31,32,.2)}
.scheda div{display:grid;grid-template-columns:100px 1fr;gap:12px;align-items:baseline;padding:10px 0 11px;border-bottom:1px solid rgba(35,31,32,.2)}
.scheda dt{color:var(--inchiostro)}
.scheda dd{margin:0;font-size:15px;line-height:1.4;color:var(--inchiostro-2)}
.scheda dt{line-height:1.4}
.slider-piatti .frase{margin:0 0 22px;font-size:clamp(18px,1.12vw,22px);line-height:1.45;color:var(--inchiostro-2)}
.slider-piatti h2{font-family:var(--titoli);font-weight:400;font-size:clamp(30px,2.6vw,44px);line-height:1.02;margin:0 0 18px}
.percorsi.piccoli{max-width:340px;margin-bottom:12px}
.percorsi.piccoli div{padding:10px 0}
.percorsi.piccoli dt{font-size:clamp(22px,1.6vw,28px)}
.percorsi.piccoli dd{font-size:11px}
.percorsi.piccoli dd.prezzo{font-size:clamp(20px,1.4vw,24px)}
.slider-piatti .nota-prezzi{margin:0;font-family:var(--ui);font-size:13px;line-height:1.5;color:var(--inchiostro-2);max-width:340px}
.slider-piatti .nome-piatto{position:absolute;z-index:2;left:clamp(16px,1.8vw,32px);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(16px, 4.5vh, 48px));margin:0;
  padding:9px 14px;background:rgba(251,250,248,.86);color:var(--inchiostro);font-size:11px!important;letter-spacing:.12em;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .4s var(--ease)}
.slider-piatti .foto{position:relative;overflow:hidden;background:#eeebe6}
.slider-piatti .foto ul{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.slider-piatti .foto li{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.slider-piatti .foto li.attivo{opacity:1;transform:none}
.slider-piatti .foto img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50%) 50%}
html:not(.js) .slider-piatti .foto li:first-child{opacity:1;transform:none}
.sl-freccia{position:absolute;z-index:3;bottom:clamp(160px,18vh,210px);width:60px;height:60px;display:grid;place-items:center;color:var(--inchiostro)}
.sl-freccia svg{width:34px;height:31px;fill:currentColor;transition:transform .35s var(--ease)}
.sl-freccia.prec{left:calc(41.5% - 180px)}
.sl-freccia.succ{left:calc(41.5% + 100px)}
.sl-freccia.succ svg{transform:rotate(180deg)}
@media (hover:hover){.sl-freccia.prec:hover svg{transform:translateX(-5px)}.sl-freccia.succ:hover svg{transform:rotate(180deg) translateX(-5px)}}
@media (max-width:860px){
  .slider-piatti{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}
  .slider-piatti .foto{height:78svh;order:-1}
  .slider-piatti .testo{justify-content:flex-start;padding:28px max(20px, env(safe-area-inset-right,0px)) 72px max(20px, env(safe-area-inset-left,0px))}
  .sl-freccia{bottom:auto;top:calc(78svh - 76px)}
  .sl-freccia.prec{left:auto;right:84px}.sl-freccia.succ{left:auto;right:16px}
}

/* ---------- menu a schermo intero ---------- */
/* Menu a schermo intero, ripreso dal vecchio sito: pannello scuro con texture a sinistra,
   foto a destra che cambia al passaggio sulle voci. Il grigio del pannello cambia con la voce attiva. */
.tendina{position:fixed;inset:0;z-index:40;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);color:#fff;
  visibility:hidden;pointer-events:none;transition:visibility 0s linear .7s}
.tendina.aperta{visibility:visible;pointer-events:auto;transition:none}
.tendina-pannello{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 120px) clamp(24px,4vw,80px) calc(env(safe-area-inset-bottom,0px) + 110px) max(10.4vw, env(safe-area-inset-left,0px));
  background-color:rgb(var(--colore));
  background-image:linear-gradient(135deg, rgba(255,255,255,.45), rgba(0,0,0,.45)), url("/assets/img/grana-hyle.webp");
  background-size:cover, 300px auto;background-blend-mode:overlay;
  transform:translateX(-100%);transition:transform .75s var(--ease), background-color .6s var(--ease)}
.tendina-foto{position:relative;overflow:hidden;background:#2a2827;transform:translateX(100%);transition:transform .75s var(--ease)}
.tendina.aperta .tendina-pannello,.tendina.aperta .tendina-foto{transform:none}
.tendina-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .45s ease-in-out, transform 1.2s var(--ease)}
.tendina-foto img.attiva{opacity:1;transform:none}
.tendina-logo{position:absolute;top:calc(env(safe-area-inset-top,0px) + clamp(40px,6.5vh,72px));left:max(10.4vw, env(safe-area-inset-left,0px));width:clamp(84px,6vw,108px);color:#fff}
.tendina-logo svg{display:block;width:100%;height:auto;fill:currentColor}
.tendina ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tendina li a{display:inline-block;font-family:var(--titoli);font-size:clamp(38px,2.8vw,52px);line-height:1.5;color:rgba(255,255,255,.62);
  opacity:0;transform:translateY(28px);transition:opacity .45s ease-out, transform .6s cubic-bezier(.2,.75,.2,1), color .3s ease-in-out}
.tendina.aperta li a{opacity:1;transform:none;transition-delay:calc(.25s + var(--i) * .06s), calc(.25s + var(--i) * .06s), 0s}
.tendina li a.attiva,.tendina li a[aria-current="page"]{color:#fff}
.tendina li a[aria-current="page"]::after{content:"";display:inline-block;width:.18em;height:.18em;margin-left:.3em;border-radius:50%;background:currentColor;vertical-align:middle}
.tendina-piede{position:absolute;left:max(10.4vw, env(safe-area-inset-left,0px));right:clamp(24px,4vw,80px);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(40px,8vh,90px));
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;font-size:var(--fs-barra)!important;letter-spacing:.04em!important;
  opacity:0;transition:opacity .5s ease .5s}
.tendina.aperta .tendina-piede{opacity:1}
.icona-social{display:grid;place-items:center;width:28px;height:28px}
.icona-social svg{width:24px;height:24px;fill:currentColor}
.tendina-lingue{margin-left:auto}
.tendina-lingue .lingue{font-size:inherit;letter-spacing:inherit}
.tendina .chiudi{position:absolute;z-index:2;top:calc(env(safe-area-inset-top,0px) + 14px);right:max(14px, env(safe-area-inset-right,0px));width:52px;height:52px;opacity:0;transition:opacity .4s ease .4s}
.tendina.aperta .chiudi{opacity:1}
.tendina .chiudi span,.tendina .chiudi span::after{position:absolute;left:13px;right:13px;top:50%;height:2px;background:#fff;transform:rotate(45deg)}
.tendina .chiudi span::after{content:"";left:0;right:0;transform:rotate(90deg)}
@media (max-width:860px){
  .tendina{grid-template-columns:minmax(0,1fr)}
  .tendina-foto{display:none}
  .tendina-pannello{padding-left:max(24px, env(safe-area-inset-left,0px));padding-right:24px}
  .tendina-logo,.tendina-piede{left:max(24px, env(safe-area-inset-left,0px))}
  .tendina li a{font-size:40px;color:#fff}
  .tendina-lingue{margin-left:0;width:100%}
}

/* ---------- piede ---------- */
.piede{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  background:var(--notte) center/cover no-repeat;background-image:url("/assets/img/sfondo-piede-hyle.webp");
  background-image:image-set(url("/assets/img/sfondo-piede-hyle.webp") 1x, url("/assets/img/sfondo-piede-hyle-2x.webp") 2x);color:var(--notte-testo);
  padding-top:clamp(110px,14vh,160px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(30px,5vh,60px));
  padding-left:max(var(--margine), env(safe-area-inset-left,0px));padding-right:max(var(--margine), env(safe-area-inset-right,0px))}
.piede{justify-content:space-between;gap:clamp(34px,5vh,60px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(84px,11vh,116px))}
.piede h2{margin:0 0 14px;font-family:var(--ui);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.5}
.piede-invito{display:flex;align-items:flex-end;justify-content:space-between;gap:30px 60px;flex-wrap:wrap}
.piede .logo{display:block;width:clamp(100px,7.4vw,136px);margin-bottom:clamp(22px,3vh,34px);opacity:.92}
.piede .logo svg{display:block;width:100%;height:auto;fill:currentColor}
.piede .invito{margin:0;font-family:var(--titoli);font-size:clamp(34px,3.7vw,62px);line-height:1.02;max-width:16ch;text-wrap:balance}
.piede .azioni{display:flex;align-items:center;gap:30px;font-family:var(--ui);font-size:var(--fs-barra);letter-spacing:.06em;text-transform:uppercase}
.bottone-chiaro{display:inline-block;padding:15px 28px;border:1px solid currentColor;transition:background-color .35s,color .35s}
@media (hover:hover){.bottone-chiaro:hover{background:var(--notte-testo);color:var(--notte)}}
.piede-colonne{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px clamp(24px,3vw,48px);border-top:1px solid rgba(255,255,255,.2);padding-top:clamp(22px,3.2vh,34px);
  font-family:var(--ui);font-size:var(--fs-barra);letter-spacing:.03em;text-transform:uppercase;line-height:1.75}
.piede-colonne>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.piede-colonne address{font-style:normal;display:flex;flex-direction:column;margin-bottom:8px}
.piede-colonne .mail{overflow-wrap:anywhere}
.piede .nota{margin-top:8px;font-size:.84em;letter-spacing:.02em;text-transform:none;line-height:1.5;opacity:.68;max-width:30ch}
.piede .premi{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:26px 36px;border-top:1px solid rgba(255,255,255,.2);padding-top:clamp(22px,3.2vh,34px)}
.piede .premi>*{display:flex;align-items:center;justify-content:center;width:clamp(78px,6.4vw,112px);height:clamp(52px,4.4vw,74px)}
.piede .premi img,.piede .premi svg{max-width:100%;max-height:100%;width:auto;height:auto;opacity:.88}
.piede .premi svg{fill:#fff;width:100%}
.piede .premi .alto svg{height:100%;width:auto}
.piede-legale{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 30px;border-top:1px solid rgba(255,255,255,.2);padding-top:18px;
  font-family:var(--ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.piede-legale p{margin:0}
.piede-legale nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.piede-legale button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
@media (max-width:1000px){.piede-colonne{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .piede{gap:38px}
  .piede .premi{justify-content:center;gap:22px 30px}
  .piede-legale{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){.piede-colonne{grid-template-columns:minmax(0,1fr)}.piede .azioni{gap:22px}}

/* ---------- 404 ---------- */
.errore{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:28px;
  padding:120px max(var(--margine), env(safe-area-inset-right,0px)) 120px max(var(--margine), env(safe-area-inset-left,0px))}
.errore .numero{font-family:var(--ui);font-size:11px;letter-spacing:.2em;color:var(--inchiostro-2)}
.errore h1{font-family:var(--titoli);font-weight:400;font-size:clamp(64px,10vw,170px);line-height:.88;margin:0;max-width:10ch;text-wrap:balance}
.errore p{margin:0;color:var(--inchiostro-2);max-width:44ch}
.errore .en{font-style:italic}
.errore nav{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:12px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .js .rv,.js .rv-foto img{opacity:1;transform:none}
  .tendina-pannello,.tendina-foto{transform:none!important}
}

/* telefono: le aperture alternative tornano in colonna */
@media (max-width:860px){
  .testata{padding-left:max(20px, env(safe-area-inset-left,0px));padding-top:calc(env(safe-area-inset-top,0px) + 110px)}
  .intro.prenota{grid-template-columns:minmax(0,1fr);padding-top:calc(env(safe-area-inset-top,0px) + 110px)}
  .intro.prenota .riquadro-esterno{margin-top:24px}
}

/* aggancio del piede su touch: nativo */
html.aggancio-nativo{scroll-snap-type:y proximity}
html.aggancio-nativo [data-pannello]{scroll-snap-align:start}

/* logo HYLE bianco (menu e piede): tratto di 1 px in più, uguale a ogni dimensione */
.tendina-logo svg path,.piede .logo svg path{stroke:currentColor;stroke-width:1px;vector-effect:non-scaling-stroke;stroke-miterlimit:10}

/* coltelli: foto a sinistra e testo a destra, per staccare dalle altre pagine */
@media (min-width:861px){
  .collezione{grid-template-columns:minmax(0,58.5fr) minmax(0,41.5fr)}
  .collezione .foto{order:-1}
  .collezione .testo{justify-content:flex-start;padding:0 max(var(--margine), env(safe-area-inset-right,0px)) clamp(230px,27vh,300px) clamp(24px,2.6vw,52px)}
  .collezione .sl-freccia.prec{left:calc(58.5% - 180px)}
  .collezione .sl-freccia.succ{left:calc(58.5% + 100px)}
}

/* ===================== LA FORGIA (prototipo coltelli) =====================
   Una sezione alta n schermi con un palco fisso. Lo scroll (0 → n-1) muove tutto:
   la lama entra incandescente e si raffredda, la foto successiva viene tagliata in
   diagonale, scintille lungo il taglio, nome in grande in parallasse. */
.forgia{position:relative;height:calc(var(--n) * 100vh);height:calc(var(--n) * 100svh);--ferro:35,31,32;--brace:255,96,32}
.forgia-palco{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.forgia-foto{position:absolute;inset:0 50% 0 0;overflow:hidden;background:#1e1c1b}
.forgia-scatto{position:absolute;inset:0;will-change:opacity}
.forgia-scatto img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s var(--ease)}
.forgia-scatto.su img{transform:none}
.forgia-taglio{position:absolute;z-index:20;top:-10%;bottom:-10%;width:2px;left:0;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,236,200,.95) 20%,#fff 50%,rgba(255,236,200,.95) 80%,transparent);
  box-shadow:0 0 14px 3px rgba(var(--brace),.65),0 0 40px 8px rgba(var(--brace),.25);transform-origin:center}
.forgia-nomi{position:absolute;inset:0;pointer-events:none}
.forgia-nomi span{position:absolute;left:52vw;bottom:-0.12em;white-space:nowrap;font-family:var(--titoli-head);font-weight:700;
  font-size:clamp(120px,15vw,260px);line-height:1;color:rgba(var(--ferro),.055);will-change:transform,opacity}
.forgia-lame{position:absolute;left:24vw;top:26vh;width:min(54vw,980px);pointer-events:none;z-index:25}
.forgia-lama{position:absolute;left:0;top:0;width:100%;will-change:transform,opacity,filter;
  color:rgb(var(--ferro));--calore:0;
  color:color-mix(in oklab, rgb(var(--brace)) calc(var(--calore) * 100%), rgb(var(--ferro)));
  filter:drop-shadow(0 0 calc(var(--calore) * 22px) rgba(var(--brace), calc(var(--calore) * .9)))}
.forgia-lama svg{display:block;width:100%;height:auto;fill:currentColor}
.forgia-scintille{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:26}
.forgia-testi{position:absolute;left:56vw;right:max(var(--margine), env(safe-area-inset-right,0px));top:44vh;bottom:150px}
.forgia-voce{position:absolute;inset:0 0 auto 0;max-width:470px;will-change:transform,opacity}
.forgia-voce h2{font-family:var(--titoli-head);font-weight:700;font-size:clamp(44px,4.2vw,76px);line-height:.95;margin:10px 0 18px}
.forgia-voce p{margin:0 0 14px;color:var(--inchiostro-2);font-size:clamp(16px,1.12vw,19px);line-height:1.5}
.forgia-num{color:var(--inchiostro-3)}
.foto-tel,.lama-tel{display:none}
.forgia-indice{position:absolute;z-index:30;right:max(var(--margine), env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + clamp(70px,10vh,110px));
  left:56vw;display:flex;gap:clamp(10px,1.4vw,24px)}
.forgia-indice button{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 0 0;border-top:1px solid rgba(var(--ferro),.18);
  color:var(--inchiostro-3);transition:color .35s ease,border-color .35s ease}
.forgia-indice .mini{display:block;width:100%;max-width:90px}
.forgia-indice .mini svg{display:block;width:100%;height:auto;fill:currentColor}
.forgia-indice button.attivo{color:var(--inchiostro);border-top-color:var(--inchiostro)}
@media (hover:hover){.forgia-indice button:hover{color:var(--inchiostro)}}
.forgia-suggerimento{position:absolute;left:56vw;top:calc(env(safe-area-inset-top,0px) + 110px);color:var(--inchiostro-3);transition:opacity .6s ease}
.forgia.mossa .forgia-suggerimento{opacity:0}

/* telefono e movimento ridotto: sequenza verticale semplice */
@media (max-width:860px){
  .forgia{height:auto}
  .forgia-palco{position:static;height:auto;overflow:visible}
  .forgia-nomi,.forgia-scintille,.forgia-indice,.forgia-taglio,.forgia-suggerimento,.forgia-lame{display:none}
  .forgia-foto{display:none}
  .forgia-testi{position:static;padding:0 20px 40px}
  .forgia-voce{position:static;max-width:none;padding-top:0;margin-top:56px}
  .forgia-voce:first-child{margin-top:0}
  .foto-tel{display:block;width:calc(100% + 40px);max-width:none;margin:0 -20px 24px;aspect-ratio:4/5;object-fit:cover}
  .lama-tel{display:block;width:62%;margin-bottom:18px;color:rgb(var(--brace));filter:drop-shadow(0 0 14px rgba(var(--brace),.7));
    transform:translateX(30px);opacity:.4;transition:color 1.8s ease .2s, filter 1.8s ease .2s, transform 1s var(--ease), opacity 1s ease}
  .lama-tel.fredda{color:rgb(var(--ferro));filter:none;transform:none;opacity:1}
  .lama-tel svg{display:block;width:100%;height:auto;fill:currentColor}
}

@media (prefers-reduced-motion:reduce){.lama-tel{color:rgb(var(--ferro))!important;filter:none!important;transform:none!important;opacity:1!important}}

/* telefono, pagine interne: logo al centro della barra in alto, sfondo carta quando si scorre */
.logo-tel{display:none}
@media (max-width:860px){
  .pagina .logo-tel{display:block;position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 18px);transform:translateX(-50%);width:62px;color:var(--inchiostro);pointer-events:auto}
  .pagina .logo-tel svg{display:block;width:100%;height:auto;fill:currentColor}
  .pagina .logo-tel svg path{stroke:currentColor;stroke-width:1px;vector-effect:non-scaling-stroke}
  .pagina .barra.alto{padding-top:calc(env(safe-area-inset-top,0px) + 18px);padding-bottom:16px;
    transition:background-color .35s ease, box-shadow .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease}
  .pagina.barra-piena .barra.alto{background-color:rgba(251,250,248,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(35,31,32,.1);pointer-events:auto}
  .pagina .barra.alto [data-su],.pagina .barra.alto .bottone-menu,.pagina .barra.alto .lingue{color:var(--inchiostro)!important}
  .pagina .barra.basso{display:none}
  .pagina .tendina.aperta ~ * .logo-tel{opacity:0}
}

/* ---------- Prenota: voci a sinistra, TheFork a destra (come il vecchio sito) ---------- */
.prenota-doppia{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(24px,2.6vw,56px);align-items:start;max-width:none;margin:0;
  padding:clamp(40px,8vh,90px) max(var(--margine), env(safe-area-inset-right,0px)) clamp(80px,12vh,140px) max(var(--margine), env(safe-area-inset-left,0px))}
.tab-grigi{max-width:none;padding:0;border-top:0}
.tab-grigi details{background:rgba(35,31,32,.07);border-bottom:1px solid rgba(35,31,32,.28)}
.tab-grigi summary{justify-content:flex-start;gap:22px;padding:16px 22px;font-family:var(--titoli);font-size:clamp(18px,1.25vw,22px);line-height:1.3;text-transform:uppercase;letter-spacing:.02em}
.tab-grigi summary span{order:-1;flex:none;width:11px;height:11px}
.tab-grigi .risposta{padding:26px 30px 32px 55px;background:var(--carta) url("/assets/img/sfondo-carta-hyle.webp");background-size:1728px auto;max-width:none}
.tab-grigi .risposta p{font-family:var(--testo);font-size:clamp(17px,1.15vw,20px);line-height:1.6;color:var(--inchiostro-2)}
.riquadro-tf{background:#fff}
/* TheFork è più alto di 800 px: altezza sufficiente per vedere tutto senza barra interna;
   se il widget comunica la propria altezza, lo script la applica */
.riquadro-tf iframe{display:block;width:100%;height:1200px;border:0}
@media (max-width:860px){
  .prenota-doppia{grid-template-columns:minmax(0,1fr);gap:28px;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px))}
  .riquadro-tf{order:-1;margin:0 -20px;position:static}
  .riquadro-tf iframe{height:2100px}
  .tab-grigi .risposta{padding:20px 20px 26px 20px}
}

/* ---------- carte di caffè, cioccolato e tisane ---------- */
.carta-hyle{max-width:860px;margin:0 auto;padding-top:calc(env(safe-area-inset-top,0px) + clamp(130px,20vh,220px));padding-bottom:clamp(80px,12vh,140px);
  padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px))}
.carta-hyle h1,.indice-carte h1{font-family:var(--titoli-head);font-weight:700;font-size:clamp(60px,8vw,140px);line-height:.95;margin:0 0 clamp(40px,6vh,70px);text-wrap:balance}
.carta-gruppo+.carta-gruppo{margin-top:clamp(50px,7vh,80px)}
.carta-gruppo h2{color:var(--inchiostro-3);margin:0 0 6px}
.carta-gruppo>ul{list-style:none;margin:0;padding:0}
.carta-gruppo>ul>li{padding:24px 0 26px;border-top:1px solid rgba(35,31,32,.18)}
.carta-gruppo>ul>li:last-child{border-bottom:1px solid rgba(35,31,32,.18)}
.carta-riga{display:flex;align-items:baseline;justify-content:space-between;gap:24px}
.carta-riga h3{font-family:var(--titoli);font-weight:400;font-size:clamp(24px,2vw,32px);line-height:1.12;margin:0}
.carta-prezzo{flex:none;font-family:var(--titoli);font-size:clamp(22px,1.7vw,28px);font-variant-numeric:tabular-nums}
.carta-desc{margin:12px 0 0;color:var(--inchiostro-2);font-size:clamp(16px,1.1vw,18px);line-height:1.55;max-width:60ch}
.carta-dettagli{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-family:var(--ui);font-size:12px;letter-spacing:.06em;color:var(--inchiostro-2)}
.carta-torna{display:inline-block;margin-top:44px}
.indice-carte{min-height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:1100px;margin:0 auto;padding:140px max(20px, env(safe-area-inset-right,0px)) 120px max(20px, env(safe-area-inset-left,0px))}
.indice-carte ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(35,31,32,.2)}
.indice-carte li{border-bottom:1px solid rgba(35,31,32,.2)}
.indice-carte a{display:grid;grid-template-columns:1fr 44px;align-items:center;gap:20px;padding:26px 0}
.indice-carte .nome{font-family:var(--titoli);font-size:clamp(30px,3.4vw,56px);line-height:1.05}
.indice-carte .ui{color:var(--inchiostro-3)}
.freccia-carta svg{width:30px;height:27px;fill:currentColor;transform:rotate(180deg);transition:transform .4s var(--ease)}
@media (hover:hover){.indice-carte a:hover .freccia-carta svg{transform:rotate(180deg) translateX(-8px)}.indice-carte a:hover .nome{color:var(--inchiostro-2)}}
@media (max-width:640px){.indice-carte a{grid-template-columns:1fr 34px}}

/* ---------- carta del cioccolato: mappa delle origini ---------- */
.carta-hyle.con-mappa{max-width:1440px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:clamp(40px,6vw,110px);
  padding-left:max(var(--margine), env(safe-area-inset-left,0px));padding-right:max(var(--margine), env(safe-area-inset-right,0px))}
.con-mappa>header{grid-column:1/-1}
.con-mappa .carta-elenco{grid-column:1;grid-row:2;min-width:0}
.mappa-origini{grid-column:2;grid-row:2;min-width:0}
.mappa-palco{position:sticky;top:calc(50vh - 14vw);padding-top:4px}
.mappa-titolo{margin:0 0 18px;color:var(--inchiostro-3)}
.mappa-cornice{position:relative;margin:0}
.mappa-cornice img{display:block;width:100%;height:auto}
.pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:clamp(24px,1.9vw,30px);aspect-ratio:1;border-radius:50%;
  background:var(--inchiostro);color:#fff;font-family:var(--titoli);font-size:clamp(13px,.95vw,15px);line-height:1;text-decoration:none;
  box-shadow:0 0 0 0 rgba(35,31,32,.25);transition:transform .45s var(--ease),box-shadow .45s var(--ease),background-color .3s}
.pin span{transform:translateY(.04em)}
.pin em{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,4px);white-space:nowrap;font-style:normal;color:var(--inchiostro);
  background:var(--carta);padding:5px 9px;opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.pin.acceso{transform:translate(-50%,-50%) scale(1.22);box-shadow:0 0 0 9px rgba(35,31,32,.12);z-index:2}
.pin.acceso em{opacity:1;transform:translate(-50%,0)}
.num-pin{display:inline-grid;place-items:center;width:1.25em;height:1.25em;margin-right:.5em;border-radius:50%;background:var(--inchiostro);color:#fff;
  font-size:.62em;vertical-align:.22em;transition:transform .45s var(--ease)}
.con-mappa .carta-gruppo>ul>li{transition:opacity .4s}
.con-mappa .carta-elenco.attenua li[data-voce-pin]:not(.acceso){opacity:.42}
.con-mappa li.acceso .num-pin{transform:scale(1.15)}
@media (max-width:900px){
  .carta-hyle.con-mappa{display:block;padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px))}
  .mappa-origini{margin:0 -8px clamp(30px,6vh,50px)}
  .mappa-palco{position:static}
  .pin{width:22px;font-size:12px}
  .pin em{display:none}
}
.tropico{position:absolute;right:0;transform:translateY(-130%);font-size:10px;letter-spacing:.14em;color:var(--inchiostro-3);pointer-events:none}
.fili{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fili line{stroke:var(--inchiostro);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.55;transition:opacity .3s}
.punto{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--inchiostro);pointer-events:none}
.mappa-cornice:has(.pin.acceso) .fili line:not(.acceso){opacity:.2}
@media (max-width:900px){.tropico{font-size:8px;letter-spacing:.1em}.punto{width:4px;height:4px;margin:-2px 0 0 -2px}}
.mappa-cornice img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.carta-hyle.con-mappa{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
@media (max-width:900px){.tropico{display:none}.mappa-origini{margin-bottom:10px}}

/* ---------- allineamento: i contenuti partono dal filo del titolo della pagina ---------- */
:root{--allinea:10.5vw}
@media (max-width:860px){:root{--allinea:20px}}
.elenco,.coppia,.galleria,.premi-anni,.articoli,.domande,.modulo-sezione,.prenota-doppia{padding-left:max(var(--allinea), env(safe-area-inset-left,0px))}

/* ---------- binari scorrevoli (riconoscimenti, articoli) ---------- */
.binari{padding-right:0;overflow:hidden}
.scorri-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3.5vw,56px);padding-right:max(var(--margine), env(safe-area-inset-right,0px))}
.scorri-testa h2{margin:0!important}
.scorri-frecce{display:flex;gap:6px;flex:none}
.scorri-frecce button{width:52px;height:52px;display:grid;place-items:center;color:var(--inchiostro);transition:opacity .3s,transform .4s var(--ease)}
.scorri-frecce svg{width:30px;height:27px;fill:currentColor}
.scorri-succ svg{transform:rotate(180deg)}
.scorri-frecce button:disabled{opacity:.22;cursor:default}
@media (hover:hover){.scorri-prec:not(:disabled):hover{transform:translateX(-5px)}.scorri-succ:not(:disabled):hover{transform:translateX(5px)}}
.scorri-binario{display:grid!important;grid-auto-flow:column;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  scroll-padding-left:0;padding-right:max(var(--margine), env(safe-area-inset-right,0px))!important;outline:none}
.scorri-binario::-webkit-scrollbar{display:none}
/* binari: solo scorrimento orizzontale, niente trascinamento o selezione col tocco lungo */
.scorri-binario{overflow-y:hidden;overscroll-behavior-y:auto;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.scorri-binario *{-webkit-user-drag:none;-webkit-touch-callout:none}
.scorri-binario>*{scroll-snap-align:start}
/* riconoscimenti: colonne strette, le voci vanno a capo */
.anni.scorri-binario{grid-template-columns:none;grid-auto-columns:clamp(210px,15.5vw,270px);gap:clamp(28px,3vw,56px)}
.anno ul{text-wrap:pretty}
/* articoli: tre per volta, gli altri con le frecce */
.articoli .scorri-binario{grid-template-columns:none!important;grid-auto-columns:calc((100vw - var(--allinea) - var(--margine) - 2 * clamp(20px,2.4vw,40px)) / 3);gap:0 clamp(20px,2.4vw,40px)}
@media (max-width:1100px){.articoli .scorri-binario{grid-auto-columns:calc((100vw - var(--allinea) - var(--margine) - clamp(20px,2.4vw,40px)) / 2)}}
@media (max-width:640px){.articoli .scorri-binario{grid-auto-columns:82vw}.anni.scorri-binario{grid-auto-columns:68vw}.scorri-frecce button{width:44px;height:44px}}
.binari.senza-frecce .scorri-frecce{visibility:hidden}
.slider-piatti:not(.collezione) .testo{padding-left:max(var(--allinea), env(safe-area-inset-left,0px))}
.prenota-doppia .tab-grigi{padding-left:0}
/* piede: l'invito si appoggia alla stessa griglia delle colonne */
@media (min-width:1001px){
  .piede-invito{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);align-items:end}
  .piede .logo{grid-column:1;margin-bottom:.55em;align-self:end}
  .piede .invito{grid-column:2/4}
  .piede .azioni{grid-column:4;justify-self:end;white-space:nowrap}
}
/* nel piede la barra in basso (kit stampa, MICHELIN) si ritira: le stesse cose sono già nel piede */
.barra.basso{transition:opacity .45s var(--ease),transform .6s var(--ease)}
.nel-piede .barra.basso{opacity:0;transform:translateY(14px);pointer-events:none}
.piede{padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(30px,5vh,56px))}
.piede .logo{margin-bottom:0}
/* home: nel piede «Gift card» lascia il posto a «Menù» */
.gruppo.scambio{display:grid}
.gruppo.scambio>*{grid-area:1/1;justify-self:start;transition:opacity .45s var(--ease),transform .6s var(--ease)}
.gruppo.scambio .dentro-piede{opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden}
.piede-in-alto .gruppo.scambio .fuori-piede{opacity:0;transform:translateY(8px);pointer-events:none}
.piede-in-alto .gruppo.scambio .dentro-piede{opacity:1;transform:none;pointer-events:auto;visibility:visible}
/* coltelli: niente più lama incandescente, solo dissolvenza */
.forgia-lama{color:rgb(var(--ferro));filter:none;will-change:transform,opacity}
@media (max-width:860px){
  .lama-tel{color:rgb(var(--ferro));filter:none;transition:transform 1s var(--ease),opacity 1.2s ease}
  .lama-tel.fredda{opacity:1}
}
.piede a.logo{transition:opacity .3s}@media (hover:hover){.piede a.logo:hover{opacity:.6}}
/* titoli delle testate alla stessa altezza delle intro; FAQ nella colonna dei contenuti */
:root{--colonna:calc(10.5vw + 32vw)}
@media (max-width:860px){:root{--colonna:20px}}
.testata{padding-top:calc(env(safe-area-inset-top,0px) + clamp(110px,17.5vh,200px))}
.testata + .domande{max-width:none;padding-top:clamp(10px,2vh,30px);padding-left:max(var(--colonna), env(safe-area-inset-left,0px))}
.testata + .domande>*{max-width:min(860px,100%)}
/* controllo responsive del 02-11 */
@media (max-width:860px){.intro h1,.testata h1{font-size:clamp(54px,18vw,120px);overflow-wrap:break-word}}
.scorri-testa{flex-wrap:wrap}
.piede .nota{font-size:max(12px,.84em)}

/* coltelli su telefono: animazione leggera legata allo scroll */
@media (max-width:860px){
  .tel-viva .foto-tel{--p:0;transform:scale(calc(1.14 - var(--p) * .14));
    clip-path:inset(calc((1 - var(--p)) * 10%) calc((1 - var(--p)) * 9%) calc((1 - var(--p)) * 10%) calc((1 - var(--p)) * 9%));will-change:transform,clip-path}
  .tel-viva .lama-tel{--p:0;position:relative;transition:none;opacity:calc(var(--p) * 2.2);
    transform:translateX(calc((1 - min(1, var(--p) * 1.6)) * -38%))}
  .tel-viva .lama-tel::after{content:"";position:absolute;inset:0;pointer-events:none;
    -webkit-mask:var(--forma) center/100% 100% no-repeat;mask:var(--forma) center/100% 100% no-repeat;
    background:linear-gradient(105deg,transparent 0 38%,rgba(255,255,255,.85) 48%,transparent 58% 100%) no-repeat;
    background-size:260% 100%;background-position:calc(120% - var(--p) * 140%) 0;opacity:calc(1 - var(--p) * .6)}
  .tel-viva .forgia-voce :is(.forgia-num,h2,p,.scheda){opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1s var(--ease)}
  .tel-viva .forgia-voce :is(.forgia-num,h2,p,.scheda).su{opacity:1;transform:none}
}
/* carte del fine pasto: produttore e paese sotto il nome */
.carta-sotto{margin:6px 0 0;color:var(--inchiostro-3);letter-spacing:.1em}
.carta-riga h3 + .carta-sotto{margin-top:6px}

/* ---------- carte lunghe: vini, amari, distillati ---------- */
.carta-lunga{padding-top:calc(env(safe-area-inset-top,0px) + clamp(110px,17.5vh,200px));padding-bottom:clamp(80px,12vh,140px);
  padding-left:max(var(--allinea), env(safe-area-inset-left,0px));padding-right:max(var(--margine), env(safe-area-inset-right,0px))}
.carta-lunga h1{font-family:var(--titoli-head);font-weight:700;font-size:clamp(60px,8vw,140px);line-height:.95;margin:0 0 clamp(34px,5vh,60px);text-wrap:balance}
.carta-indice{position:sticky;top:calc(env(safe-area-inset-top,0px) + clamp(64px,8vh,84px));z-index:5;margin:0 0 clamp(40px,6vh,70px);
  background:var(--carta) url("/assets/img/sfondo-carta-hyle.webp");background-size:1728px auto;border-bottom:1px solid rgba(35,31,32,.18)}
.carta-indice ul{list-style:none;margin:0;padding:14px 0 12px;display:flex;gap:6px 26px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carta-indice ul::-webkit-scrollbar{display:none}
.carta-indice a{display:block;white-space:nowrap;font-family:var(--ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--inchiostro-3);
  padding:4px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.carta-indice a.attiva{color:var(--inchiostro);border-bottom-color:var(--inchiostro)}
@media (hover:hover){.carta-indice a:hover{color:var(--inchiostro)}}
.cl-sezione,.cl-percorsi{scroll-margin-top:160px}
.cl-sezione+.cl-sezione,.cl-percorsi+.cl-sezione{margin-top:clamp(70px,10vh,120px)}
.cl-sezione>h2{font-family:var(--titoli-head);font-weight:700;font-size:clamp(40px,4.2vw,72px);line-height:1;margin:0 0 clamp(26px,4vh,44px)}
.cl-percorsi>h2,.cl-gruppo-titolo{color:var(--inchiostro-3);margin:0 0 18px}
.cl-gruppo+.cl-gruppo{margin-top:clamp(40px,6vh,64px)}
.cl-zona+.cl-zona{margin-top:clamp(36px,5vh,56px)}
.cl-zona-nome{display:flex;align-items:center;gap:16px;color:var(--inchiostro);margin:0 0 20px}
.cl-zona-nome::after{content:"";flex:1;height:1px;background:rgba(35,31,32,.18)}
.cl-produttori{columns:2 360px;column-gap:clamp(40px,6vw,110px)}
.cl-produttore{break-inside:avoid;padding:0 0 26px}
.cl-cantina{font-family:var(--titoli);font-size:clamp(22px,1.6vw,27px);line-height:1.15;margin:0 0 8px}
.cl-cantina span{display:block;margin-top:4px;font-family:var(--ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--inchiostro-3)}
.cl-produttore ul,.cl-percorsi ul{list-style:none;margin:0;padding:0}
.cl-produttore li{padding:8px 0 9px;border-top:1px solid rgba(35,31,32,.1)}
.cl-riga{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.cl-vino{font-size:17px;line-height:1.35}
.cl-prezzo{flex:none;font-family:var(--titoli);font-size:19px;font-variant-numeric:tabular-nums}
.cl-vitigni{margin:2px 0 0;font-size:14px;line-height:1.4;color:var(--inchiostro-2);font-style:italic}
.cl-percorsi li{padding:20px 0 22px;border-top:1px solid rgba(35,31,32,.18)}
.cl-percorsi li:last-child{border-bottom:1px solid rgba(35,31,32,.18)}
.cl-percorsi h3{font-family:var(--titoli-head);font-weight:700;font-size:clamp(28px,2.4vw,40px);line-height:1;margin:0}
.cl-percorsi .cl-prezzo{font-size:clamp(22px,1.7vw,28px)}
.cl-percorsi p{margin:8px 0 0;color:var(--inchiostro-2);max-width:60ch}
.cl-percorsi ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));column-gap:clamp(30px,4vw,70px)}
.cl-percorsi li:last-child{border-bottom:0}
.carta-nota{margin-top:56px;color:var(--inchiostro-3)}
.carta-lunga .carta-torna{margin-top:20px}
@media (max-width:860px){
  .carta-lunga{padding-right:max(20px, env(safe-area-inset-right,0px))}
  .carta-indice{margin-left:-20px;margin-right:-20px}
  .carta-indice ul{padding-left:20px;padding-right:20px}
  .cl-produttori{columns:1}
  .cl-percorsi ul{grid-template-columns:1fr}
}
/* l'indice copre anche la fascia della barra in alto, così il testo non passa dietro ai link */
.carta-indice{top:0;padding-top:calc(env(safe-area-inset-top,0px) + clamp(22px,4.5vh,56px) + 30px);
  margin-left:calc(-1 * max(var(--allinea), env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(var(--margine), env(safe-area-inset-right,0px)));
  padding-left:max(var(--allinea), env(safe-area-inset-left,0px));padding-right:max(var(--margine), env(safe-area-inset-right,0px));border-bottom:0}
.carta-indice ul{border-bottom:1px solid rgba(35,31,32,.18)}
.cl-sezione,.cl-percorsi{scroll-margin-top:190px}
@media (max-width:860px){
  .carta-indice{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:0;padding-top:calc(env(safe-area-inset-top,0px) + 62px)}
  .carta-indice ul{padding-left:0}
}
.carta-lunga[data-formato="finepasto"] .cl-sezione+.cl-sezione{margin-top:clamp(44px,6vh,70px)}
.carta-lunga[data-formato="finepasto"] .cl-sezione>h2{font-size:clamp(30px,2.6vw,44px);margin-bottom:18px}
.cl-formato,.cl-bio{font-style:normal;font-size:10px;letter-spacing:.1em;color:var(--inchiostro-3);border:1px solid rgba(35,31,32,.2);padding:2px 6px 1px;margin-left:6px;vertical-align:2px;white-space:nowrap}
.cl-bio{vertical-align:4px}
.cl-sottozona{color:var(--inchiostro-3);margin:-8px 0 18px}
.cl-zona.cl-zona-segue{margin-top:clamp(20px,3vh,34px)}
.carta-attesa{color:var(--inchiostro-3);font-family:var(--ui);font-size:13px;letter-spacing:.06em;min-height:40vh}
/* carta fine pasto: gruppi compatti (una voce per produttore) e cioccolato con mappa dentro la carta */
.cl-compatta>ul{list-style:none;margin:0;padding:0;max-width:860px}
.cl-compatta>ul>li{padding:18px 0 20px;border-top:1px solid rgba(35,31,32,.18)}
.cl-compatta>ul>li:last-child{border-bottom:1px solid rgba(35,31,32,.18)}
.cl-compatta h4{font-family:var(--titoli);font-weight:400;font-size:clamp(21px,1.6vw,26px);line-height:1.15;margin:0}
.cl-compatta .cl-prezzo{font-size:clamp(20px,1.5vw,24px)}
.cl-sezione-cacao .carta-hyle{padding:0;max-width:none;margin:0}
.cl-sezione-cacao .carta-hyle>header,.cl-sezione-cacao .carta-torna{display:none}
.cl-sezione-cacao .carta-hyle.con-mappa{grid-template-rows:auto}
.cl-sezione-cacao .con-mappa .carta-elenco{grid-row:1}
.cl-sezione-cacao .mappa-origini{grid-row:1}
/* coltelli: lo sfondo di carta resta fermo mentre si scorre */
body:has(.forgia){background-attachment:fixed}
@media (max-width:860px){body:has(.forgia){background-attachment:scroll}}
/* coltelli: frecce come negli altri slider, in alto a destra della colonna dei testi */
.forgia-frecce{position:absolute;z-index:30;right:max(var(--margine), env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 96px)}
@media (max-width:860px){.forgia-frecce{display:none}}
/* coltelli: la lama sta solo nella parte chiara, sopra il nome, più piccola */
@media (min-width:861px){
  .forgia-lame{left:50vw;right:0;width:auto;top:calc(44vh - clamp(120px,17vh,170px));height:clamp(100px,14vh,150px);overflow:hidden}
  .forgia-lama{left:6vw;top:50%;width:min(30vw,520px);margin-top:calc(min(30vw,520px) * -.07)}
}
/* coltelli: frecce nello spazio libero sopra l'indice dei coltelli */
@media (min-width:861px){
  .forgia-frecce{top:auto;right:auto;left:56vw;margin-left:-11px;bottom:calc(env(safe-area-inset-bottom,0px) + clamp(70px,10vh,110px) + 72px)}
}
/* frecce sulla stessa riga dell'indice dei coltelli, così non toccano mai la scheda anche sugli schermi bassi */
@media (min-width:861px){
  .forgia-frecce{bottom:calc(env(safe-area-inset-bottom,0px) + clamp(70px,10vh,110px) - 2px)}
  .forgia-indice{left:calc(56vw + 132px)}
}
@media (min-width:861px) and (max-height:760px){
  .forgia-testi{top:37vh}
  .forgia-lame{top:calc(37vh - clamp(110px,16vh,150px));height:clamp(90px,13vh,130px)}
}
/* coltelli: frecce a cavallo tra foto e carta, uguali a quelle dello slider «Dalla forgia al tavolo» */
@media (min-width:861px){
  .forgia-frecce{left:calc(50vw - 160px);margin-left:0;gap:160px;bottom:calc(env(safe-area-inset-bottom,0px) + clamp(70px,10vh,110px) - 6px)}
  .forgia-frecce button{width:60px;height:60px}
  .forgia-frecce svg{width:34px;height:31px}
  .forgia-frecce .scorri-prec{color:#fff}
  .forgia-frecce .scorri-succ{color:var(--inchiostro)}
  .forgia-indice{left:calc(50vw + 196px)}
  .forgia.frecce-su .forgia-frecce{bottom:var(--frecce-giu)}
  .forgia.frecce-su .forgia-indice{left:56vw}
}
/* coltelli su telefono: ritmo regolare fra foto, lama, titolo, testo e scheda */
@media (max-width:860px){
  .forgia-testi{padding:8px max(20px, env(safe-area-inset-right,0px)) 56px max(20px, env(safe-area-inset-left,0px))}
  .forgia-voce{margin-top:64px}
  .forgia-voce:first-child{margin-top:0}
  .foto-tel{width:calc(100% + 40px);margin:0 -20px 30px}
  .lama-tel{width:min(54%,240px);margin-bottom:18px}
  .forgia-voce h2{font-size:clamp(38px,10.5vw,48px);line-height:1;margin:0 0 14px}
  .forgia-voce p{font-size:17px;line-height:1.55;margin:0 0 20px;max-width:34em}
  .forgia-voce .scheda{max-width:none;margin-top:4px}
  .forgia-voce .scheda div{grid-template-columns:112px 1fr;padding:12px 0 13px}
  .forgia-voce .scheda dd{font-size:16px}
  .slider-piatti + .forgia{margin-top:-24px}
  /* frecce dello slider leggibili anche sulle foto chiare */
  .sl-freccia svg{filter:drop-shadow(0 1px 6px rgba(0,0,0,.35))}
  .sl-freccia[data-su="chiaro"] svg{filter:none}
}
/* home su telefono: scritta MICHELIN, indicatore di scorrimento e chat sulla stessa linea */
@media (max-width:860px){
  .home .barra.basso{padding-bottom:calc(env(safe-area-inset-bottom,0px) + clamp(20px, 4.5vh, 52px) + 15px)}
}
/* home su telefono: niente mouse, una linea sottile con un tratto che scende; sempre bianca sulla foto */
@media (max-width:860px){
  .home .verso-piede{color:#fff}
  .verso-piede span{width:1px;height:34px;border:0;border-radius:0;background:rgba(255,255,255,.35);overflow:hidden}
  .verso-piede span::after{left:0;top:0;width:1px;height:12px;transform:none;animation:scorri-linea 1.8s var(--ease) infinite}
}
@keyframes scorri-linea{0%{opacity:0;transform:translateY(-12px)}25%{opacity:1}100%{opacity:0;transform:translateY(34px)}}
@media (prefers-reduced-motion:reduce){.verso-piede span::after{animation:none}}
/* menu aperto: la pagina dietro non scorre */
html:has(body.menu-aperto){overflow:hidden}
body.menu-aperto.menu-fisso{position:fixed;left:0;right:0;overflow:hidden;width:100%}
.tendina{overscroll-behavior:contain}

/* ---------- intro della home (una volta per sessione) ---------- */
.intro-hyle{display:none}
.con-intro .intro-hyle{display:block;position:fixed;inset:0;z-index:80;background:var(--carta,#fbfaf8);color:var(--inchiostro);transition:opacity .7s ease}
.con-intro body{overflow:hidden}
.intro-hyle.esce{opacity:0;pointer-events:none}
.intro-palco{position:absolute;inset:0;overflow:hidden;--t:calc(50% - 19px)}
.intro-finestra{position:absolute;inset:0;z-index:2;clip-path:inset(var(--t) 0 var(--t) 0);will-change:clip-path}
.intro-finestra img{position:absolute;display:block;max-width:none;filter:grayscale(1)}
.intro-velo{position:absolute;inset:0;background:#000;opacity:var(--velo,0)}
.intro-simbolo{position:absolute;overflow:visible;fill:none;stroke:#fff;stroke-width:1.3}
.intro-simbolo path{stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.intro-parola{position:absolute;left:0;right:0;display:flex;justify-content:center;height:calc(50% - 19px)}
.intro-alto{top:0;align-items:flex-end;padding-bottom:min(9vh,90px)}
.intro-basso{bottom:0;align-items:flex-start;padding-top:min(9vh,90px)}
.intro-logo{display:block;width:clamp(150px,30vw,330px);height:auto}
.intro-materia{font-family:"Jost",var(--ui),sans-serif;font-weight:200;font-size:clamp(36px,7.1vw,79px);letter-spacing:.02em;line-height:1}
.intro-entra{position:absolute;z-index:3;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);transform:translateX(-50%);color:#fff;opacity:var(--fine,0);
  letter-spacing:.28em;text-decoration:none}

/* area stampa: tre file da scaricare */
.area-stampa .scarica{list-style:none;margin:34px auto 0;padding:0;width:min(100%,720px);border-top:1px solid rgba(35,31,32,.2);text-align:left}
.area-stampa .scarica li{border-bottom:1px solid rgba(35,31,32,.2)}
.area-stampa .scarica a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:24px;align-items:baseline;padding:18px 0;color:inherit;text-decoration:none}
.area-stampa .scarica .nome{font-family:var(--titoli);font-size:clamp(20px,1.6vw,26px);line-height:1.2}
.area-stampa .scarica .info{color:var(--inchiostro-2);font-size:11px}
@media (max-width:600px){.area-stampa .scarica a{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}.area-stampa .scarica .info{grid-column:1;grid-row:2}}
.area-stampa{padding-top:0;text-align:left;padding-left:max(10.5vw, env(safe-area-inset-left,0px))}
.area-stampa .scarica{margin:0;width:min(100%,820px)}
@media (max-width:860px){.area-stampa{padding-left:max(var(--margine), env(safe-area-inset-left,0px))}}

/* home su telefono: logo HYLE · MICHELIN 2026 in alto al centro; in basso resta libera la linea di scorrimento */
@media (max-width:860px){
  .home .logo-tel-home{display:block;position:absolute;left:max(20px, env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 27px);transform:none;width:min(46vw,190px);color:#fff;pointer-events:auto;transition:opacity .4s var(--ease)}
  .home .logo-tel-home svg{display:block;width:100%;height:auto;fill:currentColor}
  .home .logo-tel-home svg path{stroke:currentColor;stroke-width:1px;vector-effect:non-scaling-stroke}
  .home .barra.basso .marchio{width:118px}
  .home.menu-aperto .logo-tel-home,.home .tendina.aperta ~ * .logo-tel-home{opacity:0}
}

/* menu a schermo intero su telefono: fondo scuro, testi bianchi leggibili */
@media (max-width:860px){
  .tendina-pannello{background-color:#262223!important;background-image:linear-gradient(rgba(38,34,35,.9),rgba(38,34,35,.9)),url("/assets/img/grana-hyle.webp")!important;background-size:auto,300px auto!important;background-blend-mode:normal!important}
}
/* home su telefono: il bottone del menu resta sempre in alto a sinistra */
@media (max-width:860px){
  .home .logo-tel-home{width:62px}
}

/* ---------- menu a schermo intero su telefono (rivisto) ----------
   voci più compatte e separate da una linea, tutto scorre se lo schermo è basso,
   comparsa rapida, in fondo «Riserva un tavolo» ben visibile */
@media (max-width:860px){
  .tendina-pannello{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding:calc(env(safe-area-inset-top,0px) + 92px) max(24px, env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 28px) max(24px, env(safe-area-inset-left,0px))}
  .tendina-logo{top:calc(env(safe-area-inset-top,0px) + 30px);width:76px}
  .tendina ul{border-top:1px solid rgba(255,255,255,.16)}
  .tendina li{border-bottom:1px solid rgba(255,255,255,.16)}
  .tendina li a{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:clamp(26px,7.4vw,32px);line-height:1.15;padding:13px 0;
    transform:translateY(10px);transition:opacity .3s ease-out, transform .4s cubic-bezier(.2,.75,.2,1), color .2s ease}
  .tendina.aperta li a{transition-delay:calc(.04s + var(--i) * .025s), calc(.04s + var(--i) * .025s), 0s}
  .tendina li a[aria-current="page"]::after{width:6px;height:6px;margin-left:12px}
  .tendina li a:focus:not(:focus-visible){outline:none}
  .tendina-piede{position:static;margin-top:28px;display:grid;grid-template-columns:1fr auto;gap:16px 18px;opacity:0;transition:opacity .3s ease .2s}
  .tendina-piede .sl[href*="prenota"],.tendina-piede .sl[href*="book"]{grid-column:1 / -1;order:-2;display:block;text-align:center;padding:16px 12px;background:#fbfaf8;color:#231f20;letter-spacing:.12em}
  .tendina-piede > span[aria-hidden]{display:none}
  .tendina-piede .sl[href*="regalo"],.tendina-piede .sl[href*="gift"]{order:-1;grid-column:1 / -1;display:block;text-align:center;padding:14px 12px;border:1px solid rgba(255,255,255,.45)}
  .tendina-piede .icona-social{order:1}
  .tendina-lingue{order:0;grid-column:1 / -1;width:auto;margin:6px 0 0}
  .tendina-piede{grid-template-columns:repeat(2,auto) 1fr}
}

/* intro da telefono: niente «Entra», si passa alla home appena il simbolo è disegnato, con dissolvenza più rapida */
@media (max-width:860px),(pointer:coarse){
  .intro-entra{display:none!important}
  .con-intro .intro-hyle{transition:opacity .3s ease}
}

/* telefono: nessuno spostamento orizzontale della pagina (foto ingrandite, barra fissa) */
@media (max-width:860px){html,body{overflow-x:clip}}