/* Trattoria Ugo dal 1969 — anteprima non ufficiale. L'idea: la trattoria che
   non si e' mai spostata, e la pagina va dal 1969 a oggi. Il sugo in cima,
   l'insegna smaltata nel vicolo, la linea del tempo, il foglio sulla tovaglia
   a quadri, la saracinesca, il cartello sulla porta, i passi da De Ferrari,
   il telefono gigante, il timbro. Oswald e Inter Tight; vino, oro, inchiostro. */
@font-face{font-family:Oswald;src:url(../../font/oswald-200-700.woff2) format("woff2");font-weight:200 700;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(../../font/inter-tight-100-900.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --vino:#5A1427;           /* lo smalto: bianco sopra 12,9:1 */
  --vino-scuro:#3A0C18;
  --oro:#C9A15A;            /* le lettere: 5,6:1 sul vino, 8,2:1 sull'inchiostro */
  --inchiostro:#1B1416;
  --bianco:#FAFAF7;
  --f:var(--bianco);--t:var(--inchiostro);--m:#62555A;--l:#E4DCD6;--carta:#F1ECE7;
  --a:var(--vino);--a-btn:var(--vino);--a-su:var(--bianco);
  --font-t:Oswald,"Arial Narrow",sans-serif;--font-b:"Inter Tight",system-ui,sans-serif;
  --bordo:clamp(1rem,4.5vw,4rem);--r:4px;--r-btn:3px;--alto-testata:4.3rem;
}
h1,h2,h3{font-family:var(--font-t);font-weight:600;line-height:1;letter-spacing:.005em}
h2{font-size:clamp(2.3rem,1.5rem + 3vw,4.2rem);margin-bottom:1.2rem}
section{padding:clamp(3.5rem,8vw,7rem) var(--bordo)}

.testata{background:var(--inchiostro);color:var(--bianco)}
.t-marchio{font:600 1.45rem/1 var(--font-t);color:var(--oro);letter-spacing:.02em}
#nav a{font-size:.95rem}

/* ── 1. il sugo, e le parole in basso a sinistra ──────────────────────────── */
.ugo .clip{--clip-h:calc(100svh - 5.6rem);align-items:end}
/* il titolo era dorato, e l'oro ha la luminanza della salsa di noci e del
   piatto bianco: scendeva a 1:1 (voce Cowork 26/10 (1)). Ora e' chiaro, con
   un'ombra leggera, e dietro le parole c'e' un velo morbido che le segue a
   ogni misura dello schermo (in percentuale dell'altezza non bastava: sugli
   schermi bassi il titolo sale dove il velo si apre). Almeno 3:1 sul poster e
   su tutto il giro del video, misurato con analisi/contrasto-clip.js; il
   piatto in alto a destra resta scoperto. */
.ugo .clip::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(27,20,22,.94) 0%,rgba(27,20,22,.6) 36%,rgba(27,20,22,0) 72%)}
.ugo .clip-parole::before{content:"";position:absolute;z-index:-1;inset:-7rem -12rem -1rem calc(-1 * var(--bordo));pointer-events:none;
  background:linear-gradient(180deg,rgba(27,20,22,0),rgba(27,20,22,.5) 7rem);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 15rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 15rem),transparent)}
.ugo .clip-parole{padding:0 var(--bordo) 5.2rem;color:var(--bianco);max-width:62rem}
.clip-nome{font:600 clamp(3.2rem,1.4rem + 6.4vw,8rem)/.9 var(--font-t);text-transform:uppercase;color:var(--bianco);letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(27,20,22,.5),0 0 1.4rem rgba(27,20,22,.45)}
/* «dal 1969» resta su una riga: TRATTORIA UGO / DAL 1969, e sul telefono stretto TRATTORIA / UGO / DAL 1969 */
.cn-anno{display:inline-block}
.clip-frase{font:400 clamp(1.15rem,1rem + .6vw,1.5rem)/1.35 var(--font-b);margin-top:1.1rem;max-width:34ch;text-shadow:0 1px 2px rgba(27,20,22,.6)}
.clip-btn{display:inline-block;margin-top:1.7rem;background:var(--oro);color:var(--inchiostro);font:600 1.05rem var(--font-b);
  padding:1rem 1.7rem;border-radius:var(--r-btn);text-decoration:none}
.clip-btn:hover{background:#DDB872}

/* ── 2. l'insegna a bandiera nel vicolo: tre strati ───────────────────────── */
.apertura{position:relative;min-height:min(92svh,58rem);padding:0;overflow:hidden;background:var(--inchiostro);color:var(--bianco);
  display:grid;align-items:end}
.ap-strato{position:absolute;inset:0;will-change:transform}
.ap-vicolo{inset:-20% 0}
.ap-luce{inset:-12% 0}
.ap-vicolo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.85)}
.ap-luce{background:radial-gradient(ellipse 38% 30% at 74% 20%,rgba(255,196,120,.32),transparent 70%),
  linear-gradient(90deg,rgba(27,20,22,.92) 0%,rgba(27,20,22,.72) 42%,rgba(27,20,22,.15) 78%),
  linear-gradient(0deg,rgba(27,20,22,.85) 0%,transparent 45%)}
.ap-insegna{inset:auto 0 auto auto;top:clamp(1.5rem,6vw,4.5rem);right:0;width:min(46vw,30rem);display:flex;flex-direction:column;align-items:flex-start}
.staffa{width:100%;height:auto;overflow:visible}
.staffa path{fill:none;stroke:#141012;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.staffa .catena{stroke-width:3;stroke-dasharray:4 4}
.insegna{margin:0 0 0 calc(5.6% - 2.4rem);width:calc(28.75% + 4.8rem);min-width:11rem;aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.35rem;padding:1.2rem .8rem;border-radius:6px;color:var(--oro);text-align:center;transform-origin:50% -1.6rem;
  background:linear-gradient(155deg,#6d1a30 0%,var(--vino) 45%,#4a1020 100%);
  box-shadow:inset 0 0 0 4px var(--vino),inset 0 0 0 6px var(--oro),inset 0 0 0 10px var(--vino),inset 0 0 0 11px rgba(201,161,90,.6),
    0 24px 40px -18px rgba(0,0,0,.8);
  animation:oscilla 5s cubic-bezier(.37,0,.63,1) .4s both}
.i-t{font:500 .8rem/1 var(--font-t);letter-spacing:.32em;text-transform:uppercase}
.i-n{font:700 clamp(3.2rem,2rem + 4vw,5.4rem)/.9 var(--font-t);letter-spacing:.02em;text-transform:uppercase}
.i-d{font:400 .95rem/1 var(--font-t);letter-spacing:.2em;text-transform:uppercase;padding-top:.5rem;border-top:1px solid rgba(201,161,90,.6)}
@keyframes oscilla{0%{transform:rotate(0)}18%{transform:rotate(3deg)}40%{transform:rotate(-2.2deg)}60%{transform:rotate(1.2deg)}
  80%{transform:rotate(-.5deg)}100%{transform:rotate(0)}}
.ap-testo{position:relative;z-index:2;padding:clamp(2rem,6vw,5rem) var(--bordo) clamp(2.5rem,6vw,4.5rem);max-width:44rem}
.apertura h2{font-size:clamp(2.8rem,1.4rem + 4.6vw,5.6rem);line-height:.94;margin-bottom:1.3rem}
.riga{display:block}
.ap-sotto{font-size:1.12rem;max-width:40ch;color:#EAE2DC}
.apertura .nota{color:#CFC3BC}

/* ── 3. dal 1969 a oggi: la linea del tempo che scorre di lato ────────────── */
.tempo{padding:0;background:var(--inchiostro);color:var(--bianco);--n:7;--w:min(24rem,80vw);--g:1.25rem}
.tm-fermo{padding:clamp(3.5rem,7vw,5.5rem) 0;overflow:hidden}
.tm-testa{padding:0 var(--bordo);max-width:48rem;margin-bottom:2.4rem}
.tm-testa h2{color:var(--oro)}
.tm-testa p{color:#D9CEC6;font-size:1.1rem;max-width:44ch}
.tm-binario{list-style:none;margin:0;padding:0 var(--bordo) 1rem;display:flex;gap:var(--g);overflow-x:auto;scroll-snap-type:x mandatory;position:relative}
.tm-binario::before{content:"";position:absolute;left:0;right:0;top:4.1rem;border-top:2px solid rgba(201,161,90,.45)}
.tm-binario li{position:relative;flex:0 0 var(--w);scroll-snap-align:center;min-height:17rem;padding:1.6rem;border-radius:var(--r);
  display:flex;flex-direction:column;gap:.55rem}
.tm-pieno{background:var(--vino);box-shadow:inset 0 0 0 1px rgba(201,161,90,.65)}
.tm-vuoto{border:1.5px dashed rgba(201,161,90,.55);background:var(--inchiostro)}
.tm-anno{font:600 clamp(2.6rem,2rem + 2vw,3.8rem)/1 var(--font-t);color:var(--oro)}
.tm-vuoto .tm-anno{font-size:clamp(1.9rem,1.5rem + 1.4vw,2.6rem);color:#EADFD3;padding-top:.5rem}
.tm-titolo{font:500 1.6rem/1.15 var(--font-t)}
.tm-da{font-weight:600;color:var(--oro)}
.tm-cosa{color:#D9CEC6;margin-top:auto}
.tm-cornice{flex:1;min-height:5rem;margin:.4rem 0;display:grid;place-items:center;border-radius:2px;font-size:.85rem;color:#A99A92;
  background:repeating-linear-gradient(135deg,rgba(201,161,90,.07) 0 10px,transparent 10px 20px);outline:1px solid rgba(201,161,90,.25)}
.tm-anni{padding:2.2rem var(--bordo) 0;font:700 clamp(4rem,2rem + 8vw,9rem)/1 var(--font-t);color:transparent;-webkit-text-stroke:1.5px var(--oro)}
@media(min-width:761px){
  .mosso .tempo{--corsa:calc((var(--w) + var(--g)) * var(--n) - var(--g) + 2 * var(--bordo) - 100vw);height:calc(100svh + var(--corsa))}
  .mosso .tm-fermo{position:sticky;top:var(--alto-testata);height:calc(100svh - var(--alto-testata));display:flex;flex-direction:column;justify-content:center}
  .mosso .tm-binario{overflow:visible;width:max-content;transform:translateX(calc(var(--p,0) * -1 * var(--corsa)))}
}

/* ── 4. il foglio del menu' sulla tovaglia a quadri ───────────────────────── */
.menu{padding:0 0 clamp(2rem,5vw,3rem);background:#F4ECE6}
.menu>.nota{padding:0 var(--bordo)}
.mn-tovaglia{position:relative;padding:clamp(3rem,8vw,7rem) var(--bordo);overflow:hidden;
  background:repeating-linear-gradient(90deg,rgba(90,20,39,.38) 0 2.4rem,transparent 2.4rem 4.8rem),
    repeating-linear-gradient(0deg,rgba(90,20,39,.38) 0 2.4rem,transparent 2.4rem 4.8rem),#F4ECE6}
.mn-foglio{position:relative;z-index:1;max-width:46rem;margin:0 auto;background:#FFFDF7;padding:clamp(1.8rem,5vw,3.6rem);
  transform:rotate(-1.4deg);box-shadow:0 1px 0 #E6DCD0,0 30px 50px -22px rgba(27,20,22,.6)}
.mosso .mn-foglio{opacity:0;transform:translateY(4rem) rotate(-5deg);transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .5s}
.mosso .mn-foglio.dentro{opacity:1;transform:rotate(-1.4deg)}
.mn-sopra{text-align:center;font:500 .95rem var(--font-t);letter-spacing:.2em;text-transform:uppercase;color:var(--vino)}
.menu h2{text-align:center;margin:.5rem 0 .7rem}
.mn-intro{text-align:center;color:var(--m);margin-bottom:1.6rem}
.mn-piatti{list-style:none;padding:0;border-top:3px double var(--vino)}
.mn-piatti li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:.5rem;padding:.75rem 0 .55rem}
.mn-piatti i{border-bottom:2px dotted #B9A99E;transform:translateY(-.3em)}
.p-n{font:500 1.3rem/1.2 var(--font-t)}
.p-p{font:600 1.2rem var(--font-t);color:var(--vino);white-space:nowrap}
.p-d{grid-column:1/-1;color:var(--m);font-size:.93rem}
.mn-coperto{text-align:center;color:var(--m);font-style:italic;margin-top:1.4rem;padding-top:1rem;border-top:3px double var(--vino)}
.mn-bicchiere{position:absolute;right:9%;top:12%;width:7.5rem;aspect-ratio:1;border-radius:50%;
  box-shadow:inset 0 0 0 6px rgba(90,20,39,.28),0 0 0 2px rgba(90,20,39,.12)}

/* ── 5. il piatto della casa: la cucina a tutta larghezza, il testo sopra ─── */
.trippa{position:relative;min-height:86svh;display:grid;align-items:end;padding:0;overflow:hidden;color:var(--bianco);background:var(--inchiostro)}
/* ferma: niente animazioni che muovono il cibo con lo scorrimento (voce Cowork 24/10 (3)) */
.tr-foto{position:absolute;inset:0}
.tr-foto picture,.tr-foto img{width:100%;height:100%}
.tr-foto img{object-fit:cover;filter:saturate(.75) brightness(.72)}
.trippa::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,20,22,.92),rgba(27,20,22,.4) 62%,rgba(27,20,22,.1))}
.tr-testo{position:relative;z-index:1;max-width:40rem;padding:clamp(3rem,8vw,7rem) var(--bordo)}
.mosso .tr-testo{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.6,0,.2,1)}
.mosso .tr-testo.dentro{clip-path:inset(0 0 0 0)}
.tr-sopra{color:var(--oro);font-weight:600;margin-bottom:.7rem}
.trippa h2{font-size:clamp(2.8rem,1.4rem + 4.4vw,5.6rem)}
.trippa p{font-size:1.1rem;max-width:44ch}
.trippa .tr-nota{font-size:.82rem;color:#D8CCC4;margin-top:1.2rem}

/* ── 6. la sala: due grandi e tre piccole, la saracinesca che si alza ─────── */
.sala h2{max-width:20ch}
.sl-mosaico{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.sl-0,.sl-1{grid-column:span 3}
.sl-2,.sl-3,.sl-4{grid-column:span 2}
.sl-mosaico figure{position:relative;overflow:hidden;border-radius:var(--r)}
.sl-mosaico img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sl-0 img,.sl-1 img{aspect-ratio:3/2}
.sl-mosaico figcaption{position:absolute;left:0;bottom:0;background:var(--inchiostro);color:var(--bianco);font-size:.85rem;padding:.35rem .75rem}
.mosso .sl-mosaico figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,#4d4744 0 1.1rem,transparent 1.1rem),repeating-linear-gradient(180deg,#9b948e 0 9px,#7a736e 9px 11px,#b2aba5 11px 13px);
  transition:transform 1.2s cubic-bezier(.6,0,.25,1)}
.mosso .sl-mosaico figure.dentro::after{transform:translateY(-101%)}
.mosso .sl-1::after{transition-delay:.12s}.mosso .sl-3::after{transition-delay:.12s}.mosso .sl-4::after{transition-delay:.24s}

/* ── 7. gli orari: il cartello appeso alla porta ──────────────────────────── */
.porta{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:center;background:var(--bianco)}
.or-porta{display:flex;justify-content:center;overflow:hidden;min-height:32rem;padding:3.5rem 1.5rem;border-radius:6px 6px 0 0;
  background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 12%,transparent 88%,rgba(0,0,0,.2)),
    repeating-linear-gradient(90deg,#5b3424 0 3px,#64392a 3px 9px,#57311f 9px 11px),#5b3424;
  box-shadow:inset 0 0 0 16px #42241a,inset 0 0 0 18px #7a4b36,inset 0 0 0 34px #4c2a1e}
.or-cartello{position:relative;align-self:flex-start;margin-top:3.4rem;width:min(100%,18rem);background:#F7F0E3;color:var(--inchiostro);
  padding:1.8rem 1.4rem 1.3rem;border-radius:3px;transform-origin:50% -3.2rem;box-shadow:0 20px 30px -12px rgba(0,0,0,.65)}
.or-cartello::before{content:"";position:absolute;left:50%;top:-3.1rem;width:6rem;height:3.1rem;transform:translateX(-50%);
  background:linear-gradient(to top right,transparent calc(50% - 1px),#2a2220 50%,transparent calc(50% + 1px)) left/50% 100% no-repeat,
    linear-gradient(to top left,transparent calc(50% - 1px),#2a2220 50%,transparent calc(50% + 1px)) right/50% 100% no-repeat}
.or-chiodo{position:absolute;left:50%;top:-3.55rem;width:.8rem;height:.8rem;margin-left:-.4rem;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#d8d2cc,#6d6661)}
.mosso .or-cartello.dentro{animation:dondola 3.4s cubic-bezier(.3,.6,.4,1)}
@keyframes dondola{0%{transform:rotate(9deg)}25%{transform:rotate(-6deg)}48%{transform:rotate(3.5deg)}70%{transform:rotate(-1.5deg)}100%{transform:rotate(0)}}
.porta h2{font-size:2rem;text-align:center;color:var(--vino);margin-bottom:.8rem;text-transform:uppercase;letter-spacing:.06em}
.or-giorni{list-style:none;padding:0}
.or-giorni li{display:flex;justify-content:space-between;gap:1rem;padding:.38rem 0;border-bottom:1px solid #E2D6C4;font-size:.95rem}
.or-giorni li span+span{color:var(--m);font-style:italic}
.or-grande{font:500 clamp(1.7rem,1.2rem + 1.8vw,2.7rem)/1.15 var(--font-t);max-width:22ch;margin-bottom:1.2rem}

/* ── 8. dove: i passi veri da Piazza De Ferrari, e la freccia che li segue ── */
.dove{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,6vw,6rem);align-items:start;background:var(--carta);
  --pp:clamp(0,calc((var(--p,1) - .28) * 2.6),1)}
.dv-testo>p:first-of-type{font-size:1.1rem;max-width:44ch}
.ps-lista{list-style:none;margin:2rem 0 1.6rem;padding:0 0 0 3.2rem;position:relative;counter-reset:passo}
.ps-lista::before{content:"";position:absolute;left:.95rem;top:1rem;bottom:1.4rem;border-left:3px dotted var(--vino)}
.ps-lista::after{content:"";position:absolute;left:.42rem;top:calc(.4rem + (100% - 2.6rem) * var(--pp));border:.6rem solid transparent;
  border-top:1.05rem solid var(--vino);border-bottom:0;z-index:1}
.ps-lista li{position:relative;display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.9rem 0;border-bottom:1px solid var(--l);
  counter-increment:passo}
.ps-lista li::before{content:counter(passo);position:absolute;z-index:2;left:-3.2rem;top:.7rem;width:2rem;height:2rem;border-radius:50%;
  background:var(--carta);border:2px solid var(--vino);display:grid;place-items:center;font:600 .9rem/1 var(--font-t);color:var(--vino)}
.ps-lista .ps-a::before{background:var(--vino);color:var(--oro)}
.ps-via{font:500 1.35rem/1.2 var(--font-t)}
.ps-a .ps-via{color:var(--vino);font-weight:600}
.ps-m{color:var(--m);font-size:.92rem;white-space:nowrap}
.mosso .ps-lista li{opacity:0;transform:translateX(-1rem);transition:opacity .5s,transform .5s}
.mosso .ps-lista li.dentro{opacity:1;transform:none}
.dv-maps{margin-bottom:.4rem}
.dv-maps .maps{display:inline-block;color:var(--vino);padding:.4rem 0}
.gdpr{font-size:.85rem;color:var(--m);max-width:52ch}
.dv-foto{position:sticky;top:calc(var(--alto-testata) + 1.5rem)}
.dv-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r)}
.dv-foto figcaption{font-size:.82rem;color:var(--m);margin-top:.4rem}

/* ── 9. prenota: al telefono, come nel 1969 ───────────────────────────────── */
.prenota{background:var(--vino);color:var(--bianco);text-align:center;padding-block:clamp(4rem,10vw,8rem);
  --m:#E9D9DD;--l:rgba(255,255,255,.25);--a:var(--oro);--a-btn:var(--oro);--a-su:var(--inchiostro);--l-campo:transparent}
.prenota a{color:var(--bianco)}
.prenota h2{font-size:clamp(1.9rem,1.3rem + 2vw,3.1rem);color:#F0E4D0;margin-bottom:.4rem}
.pr-numero a{display:inline-block;font:700 clamp(2.6rem,.6rem + 10.5vw,11.5rem)/1 var(--font-t);color:var(--oro);text-decoration:none;
  letter-spacing:.01em;padding:.4rem 0;white-space:nowrap}
.pr-numero a:hover{color:#E4C584}
.pr-scrivi{max-width:44rem;margin:2.6rem auto 0;text-align:left;border-top:1px solid rgba(201,161,90,.5)}
.pr-scrivi summary{cursor:pointer;font-weight:600;color:var(--oro);padding:1.1rem 0;text-align:center;list-style:none}
.pr-scrivi summary::-webkit-details-marker{display:none}
.pr-scrivi summary::after{content:"+";display:inline-block;margin-left:.6rem;transition:transform .3s}
.pr-scrivi[open] summary::after{transform:rotate(45deg)}
.pr-scrivi .bk{padding:.6rem 0 1rem}
.pr-sotto{margin:1.6rem auto 0;max-width:46ch;color:#E9D9DD}

/* ── il piede: il timbro tondo della trattoria ────────────────────────────── */
.piede-ugo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem 3rem;align-items:center;background:var(--inchiostro);color:#D9CEC6;
  padding:clamp(3rem,7vw,5rem) var(--bordo) 2.2rem;--m:#BDB0A8}
.timbro{width:clamp(9rem,15vw,12rem);height:auto;grid-row:span 2;overflow:visible}
.timbro circle{fill:none;stroke:var(--oro);stroke-width:2}
.timbro text{fill:var(--oro);font:600 13px var(--font-t);letter-spacing:.4px}
.timbro .tb-ugo{font:700 46px var(--font-t);letter-spacing:2px}
.tb-ruota{transform-origin:100px 100px;transform:rotate(calc(var(--p,0) * 160deg))}
.pu-voci{display:flex;flex-wrap:wrap;gap:.3rem 1.8rem}
.pu-voci a{text-decoration:none;font:500 1.15rem var(--font-t);color:var(--bianco);padding:.35rem 0}
.piede-ugo .legale a{color:#EADFD3}

@media(max-width:900px){
  .porta,.dove{grid-template-columns:1fr}
  .or-porta{min-height:26rem}
  .dv-foto{position:static}
  .dv-foto img{aspect-ratio:4/3}
  .sl-mosaico{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-0,.sl-1,.sl-4{grid-column:span 2}
  .sl-2,.sl-3{grid-column:span 1}
  .ap-insegna{width:62vw;top:1rem}
  .insegna{min-width:8.5rem}
  .apertura{min-height:auto;padding-top:clamp(19rem,84vw,25rem)}
  .mn-bicchiere{display:none}
  .piede-ugo{grid-template-columns:1fr}
  .timbro{grid-row:auto}
}
@media(max-width:520px){
  .ap-insegna{width:78vw}
  .ugo .clip-parole{padding-bottom:5.6rem}
  .clip-fonte{bottom:1rem;font-size:.7rem}
  .ps-via{font-size:1.15rem}
}