/* =========================================================================
   PORTA ROMANA BISTRO by Al Girarrosto - foglio di stile

   La palette e i caratteri non sono inventati: sono ripresi dal menu
   stampato e dal biglietto da visita del locale.
     nero      #141414   fondo del menu
     oro       #C7993A   fascia MENU e titoli di portata
     crema     #F4EFE3   nome del locale
   Bebas Neue  = il condensato maiuscolo delle diciture
   Playfair    = il corsivo di "Porta Romana Bistro / by Al Girarrosto"
   ========================================================================= */

@font-face{font-family:'Bebas Neue';src:url('../font/bebas.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../font/playfair.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../font/playfair-bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('../font/playfair-italic.woff2') format('woff2');
  font-weight:500;font-style:italic;font-display:swap}

:root{
  --nero:#141414; --nero-2:#1A1A1A; --nero-3:#212121;
  --oro:#C7993A; --oro-chiaro:#E3BE66; --oro-tenue:rgba(199,153,58,.28);
  --crema:#F4EFE3; --crema-scuro:#D9D2C4; --grigio:#9C958A;
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --etichetta:'Bebas Neue','Oswald','Arial Narrow',Impact,sans-serif;
  --testo:'Inter','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --max:1220px;
  --ombra:0 18px 50px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:74px}
body{
  margin:0;background:var(--nero);color:var(--crema);
  font-family:var(--testo);font-size:16.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
p,h1,h2,h3,h4,li{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
.contenitore{width:min(100% - 2.6rem,var(--max));margin-inline:auto}

/* ---- diciture in Bebas ------------------------------------------------ */
.etichetta{
  font-family:var(--etichetta);font-size:.86rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--oro);margin:0 0 .9rem;
}
h1,h2,h3,h4{margin:0;font-weight:500}
.titolo-sezione{
  font-family:var(--etichetta);font-size:clamp(2.6rem,6.5vw,4.4rem);
  letter-spacing:.09em;text-transform:uppercase;line-height:.94;color:var(--crema);
  font-weight:400;
}
.sottotitolo{color:var(--grigio);max-width:56ch;margin:1.1rem 0 0}

/* rombi separatori, come sul menu stampato */
.rombi{display:flex;gap:.85rem;justify-content:center;align-items:center;margin:1.5rem 0}
.rombi::before,.rombi::after{content:'';height:1px;width:min(90px,12vw);background:var(--oro-tenue)}
.rombi i{width:7px;height:7px;background:var(--oro);transform:rotate(45deg);display:block}

/* ---- bottoni ---------------------------------------------------------- */
.bottone{
  display:inline-block;font-family:var(--etichetta);font-size:1.02rem;
  letter-spacing:.2em;text-transform:uppercase;padding:.95rem 2.3rem;
  border:1px solid var(--oro);color:var(--oro);background:transparent;
  cursor:pointer;transition:background .28s,color .28s,transform .28s;
}
.bottone:hover{background:var(--oro);color:var(--nero);transform:translateY(-2px)}
.bottone.pieno{background:var(--oro);color:var(--nero)}
.bottone.pieno:hover{background:var(--oro-chiaro);border-color:var(--oro-chiaro)}
.bottone.chiaro{border-color:var(--crema);color:var(--crema)}
.bottone.chiaro:hover{background:var(--crema);color:var(--nero)}

/* ---- testata ---------------------------------------------------------- */
.testata{
  position:fixed;inset:0 0 auto;z-index:100;padding:.9rem 0;
  transition:background .35s,padding .35s,box-shadow .35s;
}
.testata.compatta{background:rgba(16,16,16,.96);backdrop-filter:blur(12px);
  padding:.45rem 0;box-shadow:0 1px 0 rgba(199,153,58,.22)}
.testata .contenitore{display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.marchio{display:flex;align-items:center;gap:.75rem}
.marchio img{width:48px;transition:width .35s}
.testata.compatta .marchio img{width:38px}
.marchio b{font-family:var(--etichetta);font-size:1.22rem;letter-spacing:.17em;
  font-weight:400;line-height:1;display:block}
.marchio span{font-family:var(--display);font-style:italic;font-size:.76rem;
  color:var(--grigio);letter-spacing:.02em;display:block;margin-top:.15rem}

.menu-nav{display:flex;align-items:center;gap:2rem}
.menu-nav a{font-family:var(--etichetta);font-size:1.02rem;letter-spacing:.16em;
  text-transform:uppercase;position:relative;padding:.25rem 0;color:var(--crema);opacity:.88}
.menu-nav a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--oro);transition:width .3s}
.menu-nav a:hover{opacity:1;color:var(--oro)}
.menu-nav a:hover::after{width:100%}
.menu-nav .bottone{padding:.6rem 1.5rem;font-size:.95rem}
.menu-nav .bottone::after{display:none}

.hamburger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;width:44px;height:44px;
  position:relative;z-index:101}
.hamburger span{display:block;height:2px;background:var(--crema);margin:5px 0;
  transition:transform .3s,opacity .3s}
.hamburger.aperto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.aperto span:nth-child(2){opacity:0}
.hamburger.aperto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- copertina -------------------------------------------------------- */
.copertina{position:relative;min-height:100svh;display:grid;place-items:center;
  text-align:center;overflow:hidden;padding:7rem 0 4rem}
.copertina .sfondo{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.06);animation:respiro 22s ease-in-out infinite alternate}
@keyframes respiro{to{transform:scale(1.14)}}
.copertina::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.55) 42%,rgba(10,10,10,.93) 100%)}
.copertina .contenuto{position:relative;z-index:2;width:100%;max-width:940px;
  padding-inline:1.4rem}
.copertina .logo-grande{width:min(150px,26vw);margin:0 auto 1.6rem;opacity:.95}
.copertina h1{font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(2.35rem,9.5vw,6.6rem);line-height:1.02;letter-spacing:-.015em}
.copertina .firma{font-family:var(--display);font-style:italic;
  font-size:clamp(1.1rem,2.6vw,1.6rem);color:var(--crema-scuro);margin-top:.35rem}
.copertina .insegna{font-family:var(--etichetta);font-size:clamp(.82rem,2vw,1.05rem);
  letter-spacing:.44em;color:var(--oro);margin-top:1.5rem;text-transform:uppercase}
.copertina .azioni{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.4rem}
.freccia{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--etichetta);letter-spacing:.28em;font-size:.72rem;color:var(--grigio);
  animation:sali 2.4s ease-in-out infinite}
@keyframes sali{0%,100%{transform:translate(-50%,0);opacity:.55}50%{transform:translate(-50%,-9px);opacity:1}}

/* ---- fascia informazioni ---------------------------------------------- */
.fascia{background:var(--nero-2);border-block:1px solid rgba(199,153,58,.2)}
.fascia .contenitore{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(199,153,58,.16)}
.fascia .voce{background:var(--nero-2);padding:2.1rem 1.5rem;text-align:center}
.fascia .voce .etichetta{margin-bottom:.55rem;font-size:.76rem;letter-spacing:.32em}
.fascia .voce p{margin:0;font-size:1.02rem;line-height:1.55}
.fascia .voce a:hover{color:var(--oro)}

/* ---- sezioni ---------------------------------------------------------- */
section{padding:clamp(4.5rem,10vw,8rem) 0}
.intestazione{text-align:center;margin-bottom:3.4rem}
.intestazione .sottotitolo{margin-inline:auto}

/* ---- storia ----------------------------------------------------------- */
.storia .griglia{display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(2.5rem,6vw,5rem);align-items:center}
.storia .foto{position:relative;z-index:1}
.storia .foto img{aspect-ratio:4/5;object-fit:cover;width:100%}
.storia .foto::after{content:'';position:absolute;inset:18px -18px -18px 18px;
  border:1px solid var(--oro-tenue);z-index:-1}
.storia p{color:var(--crema-scuro)}
.storia .numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem;
  padding-top:2.2rem;border-top:1px solid rgba(199,153,58,.22)}
.storia .numeri b{font-family:var(--etichetta);font-size:2.5rem;color:var(--oro);
  display:block;line-height:1;font-weight:400}
.storia .numeri span{font-family:var(--etichetta);font-size:.8rem;letter-spacing:.2em;
  color:var(--grigio);text-transform:uppercase}

/* ---- menu ------------------------------------------------------------- */
.menu{background:var(--nero-2)}
.schede{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem}
.schede button{font-family:var(--etichetta);font-size:1rem;letter-spacing:.16em;
  text-transform:uppercase;background:transparent;border:1px solid rgba(199,153,58,.3);
  color:var(--crema-scuro);padding:.6rem 1.35rem;cursor:pointer;transition:all .25s}
.schede button:hover{border-color:var(--oro);color:var(--oro)}
.schede button.attiva{background:var(--oro);border-color:var(--oro);color:var(--nero)}

.portata{margin-bottom:3.4rem}
.portata > h3{font-family:var(--etichetta);font-size:1.75rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--oro);margin-bottom:1.6rem;font-weight:400;
  padding-bottom:.7rem;border-bottom:1px solid rgba(199,153,58,.22)}
.piatti{display:grid;grid-template-columns:repeat(2,1fr);gap:.35rem 3.2rem}
.piatto{display:flex;align-items:baseline;gap:.7rem;padding:.72rem 0;
  border-bottom:1px dashed rgba(255,255,255,.07)}
.piatto .nome{font-family:var(--etichetta);font-size:1.13rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--crema);white-space:nowrap}
.piatto .desc{font-size:.83rem;color:var(--grigio);font-style:italic;
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.piatto .fila{flex:1 1 auto;border-bottom:1px dotted rgba(199,153,58,.35);
  transform:translateY(-4px);min-width:14px}
.piatto .prezzo{font-family:var(--etichetta);font-size:1.16rem;color:var(--oro);
  letter-spacing:.05em;white-space:nowrap;flex:0 0 auto}
.piatto .diete{display:flex;gap:.3rem;flex:0 0 auto}
.dieta{width:18px;height:18px;border:1px solid rgba(199,153,58,.55);border-radius:50%;
  display:grid;place-items:center;font-family:var(--etichetta);font-size:.64rem;
  color:var(--oro);cursor:help;line-height:1}
.legenda{display:flex;gap:1.8rem;justify-content:center;flex-wrap:wrap;margin-top:3rem;
  padding-top:2rem;border-top:1px solid rgba(199,153,58,.22)}
.legenda div{display:flex;align-items:center;gap:.55rem;font-family:var(--etichetta);
  font-size:.86rem;letter-spacing:.16em;color:var(--grigio);text-transform:uppercase}
.servizio{text-align:center;font-family:var(--etichetta);letter-spacing:.2em;
  color:var(--grigio);font-size:.95rem;margin-top:1.4rem;text-transform:uppercase}

/* ---- specialita' con foto --------------------------------------------- */
.vetrina{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.scheda{position:relative;overflow:hidden;background:var(--nero-3)}
.scheda img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .7s ease}
.scheda:hover img{transform:scale(1.07)}
.scheda .velo{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(10,10,10,.92) 100%)}
.scheda .testo{position:absolute;inset:auto 0 0;padding:1.5rem}
.scheda h4{font-family:var(--etichetta);font-size:1.3rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 .25rem;font-weight:400}
.scheda p{margin:0;font-size:.84rem;color:var(--crema-scuro);font-style:italic}
.scheda .costo{position:absolute;top:1rem;right:1rem;background:var(--oro);color:var(--nero);
  font-family:var(--etichetta);font-size:1.02rem;padding:.2rem .7rem;letter-spacing:.06em}

/* ---- galleria --------------------------------------------------------- */
.galleria{background:var(--nero-2)}
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;
  gap:.9rem;grid-auto-flow:row dense}
.mosaico figure{margin:0;overflow:hidden;position:relative;cursor:zoom-in;background:var(--nero-3)}
.mosaico img{width:100%;height:100%;object-fit:cover;transition:transform .7s,filter .5s;
  filter:brightness(.88)}
.mosaico figure:hover img{transform:scale(1.08);filter:brightness(1.05)}
.mosaico .alta{grid-row:span 2}
.mosaico .larga{grid-column:span 2}

.lente{position:fixed;inset:0;background:rgba(8,8,8,.96);z-index:200;display:none;
  place-items:center;padding:2.5rem;cursor:zoom-out}
.lente.aperta{display:grid}
.lente img{max-width:92vw;max-height:86vh;object-fit:contain;box-shadow:var(--ombra)}
.lente .chiudi{position:absolute;top:1.4rem;right:2rem;font-family:var(--etichetta);
  font-size:2.4rem;color:var(--crema);cursor:pointer}

/* ---- prenotazione ----------------------------------------------------- */
.prenota{position:relative}
.prenota::before{content:'';position:absolute;inset:0;opacity:.16;
  background:url('../img/sala.jpg') center/cover;filter:grayscale(.4)}
.prenota .contenitore{position:relative;z-index:2}
.modulo{background:rgba(20,20,20,.93);border:1px solid rgba(199,153,58,.28);
  padding:clamp(2rem,5vw,3.4rem);box-shadow:var(--ombra);max-width:900px;margin-inline:auto}
.campi{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.campo{display:flex;flex-direction:column;gap:.45rem}
.campo.intero{grid-column:1/-1}
.campo label{font-family:var(--etichetta);font-size:.86rem;letter-spacing:.2em;
  color:var(--oro);text-transform:uppercase}
.campo input,.campo select,.campo textarea{
  background:var(--nero-3);border:1px solid rgba(255,255,255,.12);color:var(--crema);
  padding:.85rem 1rem;font-family:var(--testo);font-size:.98rem;transition:border-color .25s;
  border-radius:0;width:100%}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--oro)}
.campo textarea{resize:vertical;min-height:96px}
.campo select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--oro) 50%),
                   linear-gradient(135deg,var(--oro) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.modulo .invio{margin-top:2rem;display:flex;gap:1rem;align-items:center;
  flex-wrap:wrap;justify-content:center}
.nota{font-size:.82rem;color:var(--grigio);text-align:center;margin-top:1.2rem}
.esito{margin-top:1.4rem;padding:1rem;border:1px solid var(--oro);color:var(--oro);
  text-align:center;font-size:.92rem;display:none}
.esito.visibile{display:block}

/* ---- contatti --------------------------------------------------------- */
.contatti{background:var(--nero-2)}
.contatti .griglia{display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(2rem,5vw,4rem);align-items:stretch}
.recapiti{display:flex;flex-direction:column;gap:2rem}
.recapito{display:flex;gap:1.1rem;align-items:flex-start}
.recapito .segno{width:42px;height:42px;flex:0 0 42px;border:1px solid var(--oro-tenue);
  display:grid;place-items:center;color:var(--oro);font-family:var(--etichetta);font-size:1.05rem}
.recapito h4{font-family:var(--etichetta);font-size:1.05rem;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 .2rem;color:var(--crema);font-weight:400}
.recapito p{margin:0;color:var(--grigio);font-size:.96rem;line-height:1.6}
.recapito a:hover{color:var(--oro)}
.mappa-cornice{position:relative;min-height:420px;
  border:1px solid rgba(199,153,58,.24)}
.mappa{filter:grayscale(1) invert(1) brightness(.88) contrast(1.05);
  width:100%;height:100%;min-height:420px;border:0;display:block}
/* rombo dorato sul centro del riquadro, che coincide con l'indirizzo */
.mappa-cornice::after{content:'';position:absolute;left:50%;top:50%;
  width:15px;height:15px;transform:translate(-50%,-50%) rotate(45deg);
  background:var(--oro);box-shadow:0 0 0 5px rgba(199,153,58,.3),0 0 14px 3px rgba(0,0,0,.6);
  pointer-events:none}
.apri-mappa{position:absolute;right:12px;top:12px;font-family:var(--etichetta);
  font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(20,20,20,.92);border:1px solid var(--oro);color:var(--oro);
  padding:.42rem .9rem;transition:background .25s,color .25s}
.apri-mappa:hover{background:var(--oro);color:var(--nero)}

/* ---- piede ------------------------------------------------------------ */
.piede{border-top:1px solid rgba(199,153,58,.2);padding:3.5rem 0 2rem;text-align:center}
.piede img{width:92px;margin:0 auto 1.2rem;opacity:.85}
.piede .nome{font-family:var(--display);font-style:italic;font-size:1.5rem}
.piede .insegna{font-family:var(--etichetta);letter-spacing:.34em;font-size:.78rem;
  color:var(--oro);margin-top:.5rem;text-transform:uppercase}
.piede .social{display:flex;gap:1.6rem;justify-content:center;margin:1.8rem 0 1.4rem;
  font-family:var(--etichetta);letter-spacing:.16em;font-size:.92rem;text-transform:uppercase}
.piede .social a:hover{color:var(--oro)}
.piede small{color:#6E6A63;font-size:.78rem;display:block;margin-top:1.4rem;
  padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.06)}

/* ---- comparsa allo scorrimento ---------------------------------------- */
.appare{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.appare.visto{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .appare{opacity:1;transform:none;transition:none}
  .copertina .sfondo,.freccia{animation:none}
}

/* ---- schermi piccoli --------------------------------------------------- */
@media(max-width:1000px){
  .storia .griglia,.contatti .griglia{grid-template-columns:1fr}
  .piatti{grid-template-columns:1fr;gap:0}
  .vetrina{grid-template-columns:repeat(2,1fr)}
  .mosaico{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .mosaico .larga{grid-column:span 1}
}
@media(max-width:760px){
  .hamburger{display:block}
  .menu-nav{position:fixed;inset:0 0 0 auto;width:min(300px,82vw);background:var(--nero-2);
    flex-direction:column;justify-content:center;gap:1.9rem;transform:translateX(100%);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
    border-left:1px solid var(--oro-tenue);z-index:99}
  .menu-nav.aperto{transform:none}
  .menu-nav a{font-size:1.28rem}
  .fascia .contenitore{grid-template-columns:1fr}
  .vetrina{grid-template-columns:1fr}
  .campi{grid-template-columns:1fr}
  .storia .numeri{grid-template-columns:1fr;gap:1.5rem;text-align:center}
  .storia .foto::after{display:none}
  .legenda{gap:1rem}
  .piatto{flex-wrap:wrap}
  .piatto .desc{white-space:normal;flex-basis:100%;order:5}
}

/* ---- simboli delle diete ---------------------------------------------- */
.dieta svg{width:11px;height:11px;stroke:currentColor;fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.legenda .dieta{width:22px;height:22px;cursor:default}
.legenda .dieta svg{width:13px;height:13px}
.marchio .parole{display:block}

/* ---- recensioni -------------------------------------------------------- */
.recensioni{background:var(--nero)}
.voto-google{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  margin-bottom:2.6rem}
.voto-google .stelle{display:flex;gap:.35rem;color:var(--oro);font-size:1.5rem;line-height:1}
.voto-google .quanti{font-family:var(--etichetta);letter-spacing:.2em;font-size:.9rem;
  color:var(--grigio);text-transform:uppercase}
.pareri{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.parere{border:1px solid rgba(199,153,58,.24);background:var(--nero-2);
  padding:2rem 1.8rem;display:flex;flex-direction:column;gap:1.1rem}
.parere .stelle{color:var(--oro);letter-spacing:.18em;font-size:1.02rem}
.parere blockquote{margin:0;font-family:var(--display);font-style:italic;
  font-size:1.06rem;line-height:1.65;color:var(--crema-scuro);flex:1}
.parere footer{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)}
.parere .chi{font-family:var(--etichetta);font-size:1.05rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--crema)}
.parere .quando{font-size:.8rem;color:var(--grigio)}
.verso-google{text-align:center;margin-top:2.8rem}
@media(max-width:1000px){.pareri{grid-template-columns:1fr}}

/* ---- selettore di lingua ----------------------------------------------- */
.lingua{font-family:var(--etichetta);font-size:.92rem;letter-spacing:.18em;
  border:1px solid rgba(199,153,58,.45);padding:.3rem .62rem;color:var(--oro);
  opacity:1!important;transition:background .25s,color .25s}
.lingua:hover{background:var(--oro);color:var(--nero)}
.lingua::after{display:none!important}

/* ---- asporto ----------------------------------------------------------- */
.asporto{background:var(--nero);border-block:1px solid rgba(199,153,58,.22);
  padding:clamp(3rem,7vw,5rem) 0}
.asporto .contenitore{display:grid;grid-template-columns:1fr auto;gap:2.5rem;
  align-items:center}
.asporto h2{font-family:var(--etichetta);font-size:clamp(2rem,4.6vw,3.2rem);
  letter-spacing:.08em;text-transform:uppercase;line-height:1;font-weight:400}
.asporto p{color:var(--crema-scuro);margin:1rem 0 0;max-width:62ch}
/* il max-width in ch della regola sopra colpirebbe anche questo, e in un
   condensato il ch e' strettissimo: l'avviso andrebbe a capo a meta' frase. */
.asporto .avviso{display:inline-block;max-width:none;margin-top:1rem;font-family:var(--etichetta);
  font-size:.92rem;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);
  border-left:2px solid var(--oro);padding-left:.85rem}
.asporto .azioni{display:flex;flex-direction:column;gap:.9rem;flex:0 0 auto}
.asporto .azioni .bottone{text-align:center;white-space:nowrap}
@media(max-width:900px){
  .asporto .contenitore{grid-template-columns:1fr}
  .asporto .azioni{flex-direction:row;flex-wrap:wrap}
}