/* ============================================================
   Il Nuraghe — "Il Pannello"
   Sistema de azulejo pintado. Ver DESIGN.md.
   ============================================================ */

:root{
  /* Campo */
  --blu-notte:#0C1E48;
  --blu-notte-2:#0A1838;
  --cobalto:#1E4FA8;
  --cobalto-chiaro:#4A7FD4;
  --blu-testo:#A8B6D6;

  /* Esmalte */
  --smalto:#E8EAE0;
  --smalto-2:#D6D9CB;
  --smalto-3:#C3C7B7;

  /* Fuego */
  --rosso:#D93A21;
  --rosso-scuro:#B22E19;
  --rosso-testo:#A82A15;   /* rojo que sí se lee sobre esmalte: 5,6:1 */
  --testo-2:#5A4A40;       /* secundario sobre esmalte: 6,7:1 */
  --arancio:#F08A24;
  --giallo:#E0A63A;
  --verde:#2E6B4F;
  --verde-testo:#24563E;   /* verde legible sobre esmalte */
  --manganese:#2A1B14;

  --tile:88px;
  --junta:2px;

  --font-display:"Bricolage Grotesque","Arial Black",sans-serif;
  --font-text:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1320px;
  --testata:82px;
}

@media (max-width:760px){ :root{ --tile:64px; } }

*,*::before,*::after{box-sizing:border-box}
/* overflow-x en html además de body: el panel del menú vive aparcado fuera de
   pantalla y, sin esto, ensancha el viewport y estira todo lo fijo. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--blu-notte);
  color:var(--smalto);
  font-family:var(--font-text);
  font-size:17px;
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* height:auto neutraliza los atributos width/height del HTML, que si no
   ganan a aspect-ratio y deforman la foto. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:.96;
  letter-spacing:-.04em;
  font-variation-settings:"wdth" 100,"opsz" 48;
  margin:0;
  text-wrap:balance;
}
h1{font-variation-settings:"wdth" 108,"opsz" 96;letter-spacing:-.05em}
h3,h4{font-variation-settings:"wdth" 96,"opsz" 24;letter-spacing:-.03em}

:focus-visible{
  outline:3px solid var(--arancio);
  outline-offset:2px;
}

::selection{background:var(--rosso);color:#fff}

.wrap{width:min(100% - 2.5rem,var(--maxw));margin-inline:auto}
@media (max-width:640px){.wrap{width:calc(100% - 1.75rem)}}

.salta{
  position:absolute;left:-9999px;top:0;background:var(--rosso);color:#fff;
  padding:.75rem 1.25rem;z-index:999;font-weight:700;
}
.salta:focus{left:0}

/* ---------- Trama de azulejo (el material del fondo) ---------- */
.trama{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(232,234,224,.07) var(--junta),transparent var(--junta)),
    linear-gradient(to bottom,rgba(232,234,224,.07) var(--junta),transparent var(--junta));
  background-size:var(--tile) var(--tile);
  pointer-events:none;
  z-index:0;
}
/* Todo lo que va detrás de la trama en el DOM debe pintarse por encima de ella. */
.trama ~ *{position:relative;z-index:1}
.trama--smalto{
  background-image:
    linear-gradient(to right,rgba(42,27,20,.11) var(--junta),transparent var(--junta)),
    linear-gradient(to bottom,rgba(42,27,20,.11) var(--junta),transparent var(--junta));
}

/* ---------- Cenefa: la única regla del sistema ---------- */
.cenefa{
  height:24px;width:100%;border:0;margin:0;display:block;
  background-color:var(--rosso);
  -webkit-mask:url("../img/cenefa.svg") repeat-x center/auto 24px;
  mask:url("../img/cenefa.svg") repeat-x center/auto 24px;
}
.cenefa--arancio{background-color:var(--arancio)}
.cenefa--cobalto{background-color:var(--cobalto)}
.cenefa--giallo{background-color:var(--giallo)}

/* Sin pretítulos ni antetítulos: el titular carga solo. Ver DESIGN.md. */

/* ---------- Botones ---------- */
.bottone{
  --bg:var(--rosso);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.7ch;
  background:var(--bg);color:var(--fg);
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  letter-spacing:-.01em;
  padding:1rem 1.6rem;border:0;border-radius:0;
  text-decoration:none;cursor:pointer;
  box-shadow:5px 5px 0 var(--rosso-scuro);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.bottone:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--rosso-scuro)}
.bottone:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--rosso-scuro)}
.bottone--verde{--bg:var(--verde);box-shadow:5px 5px 0 #1D4A35}
.bottone--verde:hover{box-shadow:3px 3px 0 #1D4A35}
.bottone--fantasma{
  --bg:transparent;--fg:var(--smalto);
  border:var(--junta) solid rgba(232,234,224,.4);
  box-shadow:5px 5px 0 rgba(10,24,56,.6);
}
.bottone--fantasma:hover{--fg:var(--blu-notte);background:var(--smalto);border-color:var(--smalto)}
/* Sobre esmalte (secciones claras y artículos) el botón fantasma se invierte. */
.su-smalto .bottone--fantasma,
.articolo .bottone--fantasma,
.parere .bottone--fantasma{
  --fg:var(--manganese);border-color:rgba(42,27,20,.35);box-shadow:5px 5px 0 rgba(42,27,20,.16);
}
.su-smalto .bottone--fantasma:hover,
.articolo .bottone--fantasma:hover,
.parere .bottone--fantasma:hover{--fg:var(--smalto);background:var(--manganese);border-color:var(--manganese)}

/* ============================================================
   CABECERA
   ============================================================ */
.barra-servizio{
  background:var(--blu-notte-2);
  border-bottom:var(--junta) solid rgba(232,234,224,.12);
  font-size:.82rem;
}
.barra-servizio .wrap{
  display:flex;gap:1.5rem;align-items:center;justify-content:space-between;
  padding:.5rem 0;flex-wrap:wrap;
}
.barra-servizio a{color:var(--blu-testo);text-decoration:none}
.barra-servizio a:hover{color:var(--smalto)}
.stato{display:inline-flex;align-items:center;gap:.55ch;font-weight:500}
.stato::before{
  content:"";width:8px;height:8px;background:var(--verde);
  box-shadow:0 0 0 3px rgba(46,107,79,.3);
}
.stato[data-chiuso]::before{background:var(--rosso);box-shadow:0 0 0 3px rgba(217,58,33,.28)}
.barra-servizio .social{display:flex;gap:1rem}

.testata{
  position:sticky;top:0;z-index:60;
  background:rgba(12,30,72,.94);
  backdrop-filter:blur(14px);
  border-bottom:var(--junta) solid rgba(232,234,224,.14);
}
.testata .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.7rem 0;
}
.marchio{display:flex;align-items:center;gap:.9rem;text-decoration:none}
.marchio img{width:58px;height:58px;object-fit:contain}
.marchio b{
  font-family:var(--font-display);font-weight:800;font-size:1.22rem;
  letter-spacing:-.04em;display:block;line-height:1;
}
.marchio span{
  display:block;font-size:.82rem;color:var(--giallo);margin-top:.2rem;letter-spacing:-.01em;
}

.navigazione{display:flex;align-items:center;gap:.35rem}
.navigazione a{
  text-decoration:none;font-weight:500;font-size:.97rem;
  padding:.6rem .85rem;color:var(--smalto);position:relative;
}
.navigazione a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.35rem;height:3px;
  background:var(--arancio);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.navigazione a:hover::after,.navigazione a[aria-current="page"]::after{transform:scaleX(1)}
.navigazione a[aria-current="page"]{color:var(--giallo)}

.menu-btn{
  display:none;background:transparent;border:var(--junta) solid rgba(232,234,224,.4);
  color:var(--smalto);padding:.6rem .9rem;font-family:var(--font-display);font-weight:700;
  cursor:pointer;letter-spacing:.04em;
}

/* El descriptor parte en dos líneas y engorda la cabecera: en estrecho se corta. */
@media (max-width:460px){
  .marchio span span{display:none}
  .marchio img{width:48px;height:48px}
  .marchio b{font-size:1.15rem}
}

@media (max-width:940px){
  .menu-btn{display:block}
  .navigazione{
    position:fixed;inset:0 0 0 auto;width:min(84vw,360px);
    background:var(--blu-notte-2);
    flex-direction:column;align-items:stretch;justify-content:center;gap:0;
    padding:2rem;
    transform:translateX(100%);visibility:hidden;
    transition:transform .45s var(--ease),visibility .45s var(--ease);
    border-left:var(--junta) solid rgba(232,234,224,.18);
  }
  /* visibility:hidden lo saca también del orden de tabulación estando cerrado. */
  .navigazione[data-aperto]{transform:none;visibility:visible}
  .navigazione a{
    font-family:var(--font-display);font-size:1.7rem;font-weight:800;
    padding:.7rem 0;border-bottom:var(--junta) solid rgba(232,234,224,.14);
  }
  .navigazione a::after{left:0;right:auto;width:32px;bottom:.4rem}
  .barra-servizio .social{display:none}
}

/* ============================================================
   HERO — el panel
   ============================================================ */
.pannello-hero{
  position:relative;overflow:hidden;
  background:var(--blu-notte);
  padding:clamp(1.6rem,3.6vw,3rem) 0 0;
}
.muro{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,var(--tile));
  grid-auto-rows:var(--tile);
  gap:var(--junta);
  justify-content:center;
  opacity:.5;
  pointer-events:none;
}
.muro i{
  display:block;background:rgba(30,79,168,.16);
  outline:var(--junta) solid rgba(232,234,224,.05);
}
.muro i svg{width:100%;height:100%;fill:none;stroke:var(--cobalto-chiaro);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55}

.hero-corpo{position:relative;z-index:2;text-align:center;padding-bottom:clamp(2rem,4vw,3.2rem)}
.hero-corpo .stemma{
  width:min(172px,28vw);margin:0 auto clamp(1rem,2.2vw,1.6rem);
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.45));
}
.hero-corpo h1{
  font-size:clamp(2.4rem,6.6vw,5.2rem);
  margin:0 0 1rem;
}
.hero-corpo h1 .fuoco{color:var(--arancio);display:block}
.hero-sotto{
  max-width:56ch;margin:0 auto 2.2rem;color:var(--blu-testo);
  font-size:clamp(1.02rem,1.9vw,1.2rem);
}
.hero-azioni{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

.hero-dati{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:var(--junta) solid rgba(232,234,224,.16);
}
.hero-dati div{
  padding:1.4rem 1.2rem;text-align:center;
  border-right:var(--junta) solid rgba(232,234,224,.16);
}
.hero-dati div:last-child{border-right:0}
.hero-dati b{
  display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:800;
  letter-spacing:-.03em;color:var(--giallo);
}
.hero-dati span{font-size:.86rem;color:var(--blu-testo)}
@media (max-width:640px){
  .hero-dati{grid-template-columns:1fr}
  .hero-dati div{border-right:0;border-bottom:var(--junta) solid rgba(232,234,224,.16);
    display:flex;align-items:baseline;justify-content:space-between;text-align:left;padding:1rem .2rem}
  .hero-dati b{font-size:1.15rem}
}

/* Aviso */
.avviso{
  background:var(--giallo);color:var(--manganese);
  font-weight:700;text-align:center;padding:.85rem 1rem;font-size:.94rem;
}
.avviso b{font-family:var(--font-display)}

/* ============================================================
   SECCIONES
   ============================================================ */
.sezione{padding:clamp(3.5rem,8vw,7rem) 0;position:relative}
.su-smalto{background:var(--smalto);color:var(--manganese)}
.su-smalto h1,.su-smalto h2,.su-smalto h3{color:var(--manganese)}
.su-cobalto{background:var(--cobalto)}

/* Cabecera de sección: el titular ocupa el ancho, la entradilla cuelga a la
   derecha y alineada al pie. Sin antetítulo. */
.testa-sezione{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.2rem,4vw,4rem);align-items:end;
  margin-bottom:clamp(2.4rem,5vw,4rem);
  padding-bottom:clamp(1.2rem,2.5vw,2rem);
  border-bottom:var(--junta) solid rgba(232,234,224,.18);
}
.su-smalto .testa-sezione{border-bottom-color:rgba(42,27,20,.2)}
.testa-sezione h2{
  font-size:clamp(2.2rem,6vw,4.4rem);
  font-stretch:105%;letter-spacing:-.045em;margin:0;
}
.testa-sezione p{
  margin:0;font-size:clamp(1rem,1.6vw,1.1rem);color:var(--blu-testo);
  max-width:46ch;padding-bottom:.4rem;
}
.su-smalto .testa-sezione p{color:#5A4A40}
@media (max-width:820px){
  .testa-sezione{grid-template-columns:1fr;align-items:start;gap:1rem}
}

/* --- Bienvenida en dos columnas con azulejo grande --- */
.duo{
  display:grid;gap:clamp(1.6rem,4vw,3.5rem);
  grid-template-columns:1.05fr .95fr;align-items:center;
}
@media (max-width:900px){.duo{grid-template-columns:1fr}}
.duo--inverso .duo-testo{order:2}
@media (max-width:900px){.duo--inverso .duo-testo{order:0}}

.duo-testo h2{
  font-size:clamp(1.9rem,3.9vw,3.1rem);
  margin-bottom:1.3rem;font-stretch:104%;
}
.duo-testo p{max-width:58ch}
.duo-testo em{font-style:italic}
.foto-piastrellata{
  position:relative;
  border:var(--junta) solid rgba(42,27,20,.18);
}
.foto-piastrellata img{width:100%;aspect-ratio:4/3;object-fit:cover}
.foto-piastrellata figcaption{
  position:absolute;left:0;bottom:0;
  background:var(--rosso);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase;padding:.5rem .9rem;
}

/* --- Especialidades: mosaico --- */
.mosaico{
  display:grid;gap:var(--junta);
  grid-template-columns:repeat(3,1fr);
  border:var(--junta) solid rgba(232,234,224,.2);
  background:rgba(232,234,224,.2);
}
@media (max-width:880px){.mosaico{grid-template-columns:1fr}}
.tessera{
  position:relative;background:var(--blu-notte);
  padding:clamp(1.6rem,3vw,2.4rem);
  overflow:hidden;isolation:isolate;
  min-height:var(--tile);
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
}
.tessera .motivo{
  position:absolute;right:-14px;bottom:-14px;width:132px;height:132px;
  fill:none;stroke:var(--cobalto-chiaro);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.3;z-index:-1;
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.tessera:hover .motivo{transform:rotate(-8deg) scale(1.12);opacity:.5}
.tessera h3{font-size:clamp(1.35rem,2.3vw,1.75rem);margin-bottom:.8rem}
.tessera p{margin:0;color:var(--blu-testo);font-size:.98rem}
.tessera .prezzo{
  align-self:flex-start;margin-top:auto;padding-top:1.2rem;
  font-family:var(--font-display);font-weight:800;color:var(--arancio);
  font-size:1.15rem;font-variant-numeric:tabular-nums;
}
/* barrido de esmalte */
.tessera::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(232,234,224,.16) 48%,transparent 58%);
  transform:translateX(-110%);transition:transform .75s var(--ease);
}
.tessera:hover::after{transform:translateX(110%)}

/* --- Marquesina --- */
.striscia{
  background:var(--rosso);color:#fff;
  padding:.9rem 0;overflow:hidden;white-space:nowrap;
  border-block:var(--junta) solid rgba(255,255,255,.28);
}
.striscia ul{
  display:inline-flex;gap:2.6rem;margin:0;padding:0;list-style:none;
  font-family:var(--font-display);font-weight:700;font-size:1.02rem;
  letter-spacing:.02em;text-transform:uppercase;
  animation:scorri 34s linear infinite;
}
.striscia li{display:inline-flex;align-items:center;gap:2.6rem}
.striscia li::after{content:"";width:10px;height:10px;background:currentColor;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
@keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.striscia ul{animation:none}}

/* --- Testimonios --- */
.pareri{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--junta);
  background:rgba(42,27,20,.16);border:var(--junta) solid rgba(42,27,20,.16)}
@media (max-width:760px){.pareri{grid-template-columns:1fr}}
/* Placa de esmalte dentro de una sección oscura: declara su propio texto. */
.parere{background:var(--smalto);color:var(--manganese);padding:clamp(1.8rem,3.4vw,2.8rem)}
.parere blockquote{color:var(--manganese)}
.parere blockquote{
  margin:0 0 1.2rem;font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.25rem,2.5vw,1.7rem);line-height:1.18;letter-spacing:-.03em;
}
.parere cite{font-style:normal;font-weight:700;font-size:.92rem;color:var(--rosso-testo)}
.stelle{display:flex;gap:3px;margin-bottom:1.1rem}
.stelle svg{width:17px;height:17px;fill:var(--giallo)}

/* ============================================================
   CARTA
   ============================================================ */
.carta-nav{
  position:sticky;top:var(--testata);z-index:40;
  background:var(--blu-notte-2);
  border-block:var(--junta) solid rgba(232,234,224,.16);
}
.carta-nav ul{
  display:flex;gap:0;margin:0;padding:0;list-style:none;
  overflow-x:auto;scrollbar-width:none;
}
.carta-nav ul::-webkit-scrollbar{display:none}
.carta-nav a{
  display:block;white-space:nowrap;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:.94rem;
  padding:.9rem 1.15rem;color:var(--blu-testo);
  border-right:var(--junta) solid rgba(232,234,224,.12);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.carta-nav a:hover{color:var(--smalto);background:rgba(30,79,168,.4)}
.carta-nav a.attivo{background:var(--rosso);color:#fff}

.gruppo{padding:clamp(2.6rem,6vw,4.5rem) 0;scroll-margin-top:calc(var(--testata) + 56px);border-bottom:var(--junta) solid rgba(42,27,20,.16)}
.gruppo:last-of-type{border-bottom:0}
.gruppo-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  margin-bottom:2rem;flex-wrap:wrap}
.gruppo-testa h2{font-size:clamp(1.9rem,4.4vw,3rem)}
.gruppo-testa .conto{font-size:.88rem;color:#6B5A50;font-variant-numeric:tabular-nums}

.righe{list-style:none;margin:0;padding:0;
  columns:2;column-gap:clamp(2rem,5vw,4.5rem)}
@media (max-width:820px){.righe{columns:1}}
.riga{
  break-inside:avoid;padding:1.05rem 0;
  border-bottom:var(--junta) dotted rgba(42,27,20,.28);
}
.riga-testa{display:flex;align-items:baseline;gap:.6rem}
.riga-testa h3{
  font-size:1.1rem;font-weight:700;letter-spacing:-.02em;
  font-family:var(--font-display);
}
.riga-punti{flex:1;border-bottom:2px dotted rgba(42,27,20,.3);transform:translateY(-4px)}
.riga-prezzo{
  font-family:var(--font-display);font-weight:800;font-size:1.1rem;
  font-variant-numeric:tabular-nums;color:var(--rosso-testo);white-space:nowrap;
}
.riga p{margin:.35rem 0 0;font-size:.94rem;color:#5A4A40;max-width:52ch}
.tag{
  display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;padding:.16rem .45rem;margin-left:.45rem;
  vertical-align:.12em;
}
.tag--veg{background:rgba(46,107,79,.12);color:var(--verde-testo);border:1px solid rgba(36,86,62,.45)}
.tag--casa{background:rgba(168,42,21,.1);color:var(--rosso-testo);border:1px solid rgba(168,42,21,.45)}

/* Panel de azulejo, no tarjeta con pestaña de color. */
.nota-carta{
  position:relative;
  background:var(--blu-notte);color:var(--smalto);
  padding:clamp(1.8rem,3.4vw,2.4rem);margin-top:3rem;
  background-image:
    linear-gradient(to right,rgba(232,234,224,.06) 2px,transparent 2px),
    linear-gradient(to bottom,rgba(232,234,224,.06) 2px,transparent 2px);
  background-size:var(--tile) var(--tile);
}
.nota-carta::before{
  content:\;position:absolute;left:0;right:0;top:0;height:14px;
  background-color:var(--arancio);
  -webkit-mask:url(../img/cenefa.svg) repeat-x center/auto 14px;
  mask:url(../img/cenefa.svg) repeat-x center/auto 14px;
}
.nota-carta p{margin:0;max-width:70ch;color:var(--blu-testo)}
.nota-carta p+p{margin-top:.7rem}

/* ============================================================
   GALERÍA
   ============================================================ */
.griglia-foto{
  display:grid;gap:var(--junta);
  grid-template-columns:repeat(4,1fr);
  background:rgba(232,234,224,.18);
  border:var(--junta) solid rgba(232,234,224,.18);
}
@media (max-width:1000px){.griglia-foto{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.griglia-foto{grid-template-columns:1fr}}
.foto{position:relative;overflow:hidden;background:var(--blu-notte-2);margin:0}
.foto img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;
  transition:transform .7s var(--ease),filter .7s var(--ease)}
.foto:hover img{transform:scale(1.05)}
.foto figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top,rgba(10,24,56,.94),transparent);
  color:var(--smalto);padding:2.4rem .9rem .8rem;
  font-size:.86rem;font-weight:500;
}
.foto--alta{grid-row:span 2}
.foto--alta img{aspect-ratio:1/2}
.foto--larga{grid-column:span 2}
.foto--larga img{aspect-ratio:2/1}
@media (max-width:520px){
  .foto--alta{grid-row:auto}.foto--alta img{aspect-ratio:1}
  .foto--larga{grid-column:auto}.foto--larga img{aspect-ratio:1}
}

/* ============================================================
   BLOG
   ============================================================ */
.elenco-articoli{display:grid;gap:var(--junta);
  grid-template-columns:repeat(3,1fr);
  background:rgba(232,234,224,.18);border:var(--junta) solid rgba(232,234,224,.18)}
@media (max-width:960px){.elenco-articoli{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.elenco-articoli{grid-template-columns:1fr}}

.articolo-tessera{
  background:var(--blu-notte);display:flex;flex-direction:column;
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:background .3s var(--ease);
}
.articolo-tessera:hover{background:var(--cobalto)}
.articolo-tessera img{width:100%;aspect-ratio:16/10;object-fit:cover}
.articolo-corpo{padding:clamp(1.3rem,2.4vw,1.9rem);display:flex;flex-direction:column;flex:1}
.articolo-meta{font-size:.86rem;color:var(--giallo);margin-bottom:.8rem;font-weight:500}
.articolo-tessera h3{font-size:1.32rem;margin-bottom:.7rem;line-height:1.08}
.articolo-tessera p{margin:0;color:var(--blu-testo);font-size:.95rem;flex:1}
.articolo-tessera .leggi{
  margin-top:1.2rem;font-family:var(--font-display);font-weight:700;
  color:var(--arancio);font-size:.95rem;display:inline-flex;gap:.5ch;align-items:center;
}
.articolo-tessera:hover .leggi{color:#fff}

/* Artículo */
.articolo{background:var(--smalto);color:var(--manganese);position:relative}
.articolo-testata{padding:clamp(2.5rem,6vw,5rem) 0 clamp(1.5rem,3vw,2.5rem)}
.articolo-testata h1{font-size:clamp(2.1rem,5.6vw,4rem);max-width:20ch;margin-bottom:1.2rem}
.articolo-testata .articolo-meta{color:var(--rosso-testo)}
.articolo-foto{width:100%;aspect-ratio:21/9;object-fit:cover;
  border:var(--junta) solid rgba(42,27,20,.18)}
.prosa{max-width:70ch;margin:clamp(2rem,4vw,3rem) auto 0;font-size:1.08rem}
.prosa h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin:2.6rem 0 .9rem}
.prosa h3{font-size:1.22rem;margin:2rem 0 .6rem}
.prosa p{margin:0 0 1.2rem}
.prosa ul,.prosa ol{margin:0 0 1.4rem;padding-left:1.3rem}
.prosa li{margin-bottom:.55rem}
.prosa strong{font-weight:700}
.prosa a{color:var(--rosso-testo);text-underline-offset:3px}
.prosa a.bottone{color:var(--fg);text-decoration:none}
/* Cita destacada: tipografía, no barra de color. */
.prosa blockquote{
  margin:2.8rem 0;padding:0 0 0 clamp(1.2rem,4vw,2.4rem);
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.35rem,2.8vw,1.9rem);line-height:1.12;
  letter-spacing:-.04em;color:var(--cobalto);
  position:relative;
}
.prosa blockquote::before{
  content:\;position:absolute;left:0;top:.55em;
  width:13px;height:13px;background:var(--rosso);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.barra-lettura{
  position:fixed;top:0;left:0;height:4px;width:100%;background:var(--rosso);
  z-index:80;transform:scaleX(0);transform-origin:0 50%;
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contatto-griglia{display:grid;grid-template-columns:1fr 1fr;gap:var(--junta);
  border:var(--junta) solid rgba(232,234,224,.2);background:rgba(232,234,224,.2)}
@media (max-width:900px){.contatto-griglia{grid-template-columns:1fr}}
@property --lucido{syntax:'<percentage>';inherits:false;initial-value:-110%}

.scheda{
  background:var(--blu-notte);padding:clamp(1.7rem,3.4vw,2.6rem);
  position:relative;overflow:hidden;isolation:isolate;
}
/* Barrido de esmalte: se dispara una sola vez, al colocarse la placa. */
.scheda::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 38%,rgba(232,234,224,.15) 48%,transparent 58%);
  transform:translateX(var(--lucido,-110%));
}
.scheda h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:1.2rem}
.dati{list-style:none;margin:0;padding:0}
.dati li{padding:.7rem 0;border-bottom:var(--junta) solid rgba(232,234,224,.12);
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.dati li:last-child{border-bottom:0}
.dati dt,.dati .k{color:var(--blu-testo);font-size:.9rem}
.dati a{font-weight:700;text-decoration:none;color:var(--smalto)}
.dati a:hover{color:var(--arancio)}
.orari{list-style:none;margin:0;padding:0;font-variant-numeric:tabular-nums}
.orari li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:var(--junta) solid rgba(232,234,224,.12)}
.orari li:last-child{border-bottom:0}
.orari .oggi{color:var(--giallo);font-weight:700}
.orari .chiuso{color:var(--blu-testo)}

.modulo{display:grid;gap:1rem}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo label{font-size:.95rem;font-weight:700;color:var(--manganese)}
.campo input,.campo textarea,.campo select{
  background:#F5F4EC;border:var(--junta) solid rgba(42,27,20,.32);
  color:var(--manganese);padding:.85rem .95rem;font:inherit;font-size:1rem;border-radius:0;
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  border-color:var(--rosso-testo);outline:none;background:#fff;
  box-shadow:0 0 0 3px rgba(168,42,21,.16);
}
.campo input::placeholder,.campo textarea::placeholder{color:#7A6A60}
.campo textarea{min-height:130px;resize:vertical}
.modulo .fine-stampa{font-size:.86rem;color:var(--testo-2);margin:0}
.modulo-stato{padding:.85rem 1rem;font-weight:700;display:none}
.modulo-stato[data-visibile]{display:block}
.modulo-stato--errore{background:rgba(168,42,21,.1);color:#8C2210;
  border:var(--junta) solid rgba(168,42,21,.55)}
.modulo-stato--ok{background:rgba(46,107,79,.12);color:#1D4A35;
  border:var(--junta) solid rgba(46,107,79,.55)}

.mappa{width:100%;height:clamp(320px,46vw,520px);border:0;display:block;filter:saturate(.8)}

/* ============================================================
   PIE
   ============================================================ */
.piede{background:var(--blu-notte-2);padding:clamp(3rem,6vw,4.5rem) 0 0;position:relative}
.piede-griglia{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(1.6rem,4vw,3rem);padding-bottom:3rem}
@media (max-width:880px){.piede-griglia{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.piede-griglia{grid-template-columns:1fr}}
.piede h4{font-family:var(--font-display);font-size:1.05rem;color:var(--giallo);
  margin-bottom:1.1rem;font-weight:700;letter-spacing:-.02em}
.piede ul{list-style:none;margin:0;padding:0}
.piede li{margin-bottom:.55rem}
.piede a{color:var(--blu-testo);text-decoration:none;font-size:.94rem}
.piede a:hover{color:var(--smalto)}
.piede .marchio-piede img{width:110px;margin-bottom:1rem}
.piede .marchio-piede p{color:var(--blu-testo);font-size:.94rem;margin:0;max-width:34ch}
.piede-basso{border-top:var(--junta) solid rgba(232,234,224,.14);padding:1.3rem 0;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.85rem;color:var(--blu-testo)}
.piede-basso a{font-size:.85rem}

/* ---------- Barra de fuego (móvil) ---------- */
.barra-fuoco{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:repeat(3,minmax(0,1fr));
  background:var(--blu-notte-2);
  border-top:var(--junta) solid rgba(232,234,224,.2);
}
.barra-fuoco a{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  padding:.65rem .3rem calc(.65rem + env(safe-area-inset-bottom));
  text-decoration:none;color:var(--smalto);font-size:.8rem;font-weight:700;
  letter-spacing:.04em;border-right:var(--junta) solid rgba(232,234,224,.14);
}
.barra-fuoco a:last-child{border-right:0}
.barra-fuoco a:first-child{background:var(--rosso);color:#fff}
.barra-fuoco svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
@media (max-width:760px){
  .barra-fuoco{display:grid}
  body{padding-bottom:68px}
}

/* ---------- Utilidades de animación ---------- */
.assesta{will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================
   PANELES OSCUROS — va al final a propósito
   ============================================================ */
/* ---------- Paneles oscuros ----------
   Un panel de azulejo oscuro puede vivir dentro de una sección de esmalte
   (el bloque de horario del inicio, el mosaico del 404, "Sigue leyendo" de
   un artículo). Declara su propio color de texto para no heredar el
   manganeso del padre y quedarse oscuro sobre oscuro. */
.scheda,
.tessera,
.articolo-tessera,
.nota-carta,
.prenota-calendario,
.prenota-dettagli{color:var(--smalto)}
/* El botón fantasma dentro de un panel oscuro vuelve a su versión clara. */
.prenota-dettagli .bottone--fantasma,
.scheda .bottone--fantasma{
  --fg:var(--smalto);border-color:rgba(232,234,224,.4);box-shadow:5px 5px 0 rgba(10,24,56,.6);
}
.prenota-dettagli .bottone--fantasma:hover,
.scheda .bottone--fantasma:hover{--fg:var(--blu-notte);background:var(--smalto);border-color:var(--smalto)}

.scheda h3,.scheda h4,
.tessera h3,.tessera h4,
.articolo-tessera h3,.articolo-tessera h4,
.nota-carta h3{color:var(--smalto)}

.scheda .orari,.scheda .dati{color:var(--smalto)}
.scheda .orari .chiuso{color:var(--blu-testo)}
.scheda .orari .oggi{color:var(--giallo)}

/* ============================================================
   CARTA DINÁMICA — buscador, filtros y foto del plato
   ============================================================ */
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.filtri{
  position:sticky;top:calc(var(--testata) + 46px);z-index:35;
  background:var(--smalto);
  border-bottom:var(--junta) solid rgba(42,27,20,.2);
}
.filtri-fila{
  display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  padding:.9rem 0 .5rem;
}
.cerca{position:relative;flex:1 1 300px;display:flex;align-items:center}
.cerca svg{
  position:absolute;left:.8rem;width:19px;height:19px;
  fill:none;stroke:#6B5A50;stroke-width:2;stroke-linecap:round;pointer-events:none;
}
.cerca input{
  width:100%;background:#F5F4EC;border:var(--junta) solid rgba(42,27,20,.3);
  color:var(--manganese);border-radius:0;
  padding:.7rem 2.4rem .7rem 2.6rem;font:inherit;font-size:.98rem;
}
.cerca input::placeholder{color:#7A6A60}
.cerca input:focus{outline:none;border-color:var(--rosso-testo);background:#fff;
  box-shadow:0 0 0 3px rgba(168,42,21,.16)}
.cerca input::-webkit-search-cancel-button{display:none}
.cerca-borra{
  position:absolute;right:.4rem;background:none;border:0;cursor:pointer;
  color:#6B5A50;font-size:1.5rem;line-height:1;padding:.2rem .5rem;
}
.cerca-borra:hover{color:var(--rosso-testo)}

.chips{display:flex;gap:var(--junta);flex-wrap:wrap}
.chip{
  background:transparent;border:var(--junta) solid rgba(42,27,20,.3);
  color:var(--manganese);font-family:var(--font-display);font-weight:700;
  font-size:.9rem;padding:.6rem 1rem;cursor:pointer;border-radius:0;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.chip:hover{background:rgba(42,27,20,.07)}
.chip.attivo{background:var(--rosso-testo);color:#fff;border-color:var(--rosso-testo)}
.filtri-conto{margin:0;padding:0 0 .8rem;font-size:.88rem;color:var(--testo-2)}

.riga[hidden]{display:none}
.gruppo[hidden]{display:none}
.riga[data-foto] h3::after{
  content:"";display:inline-block;width:7px;height:7px;margin-left:.5ch;
  vertical-align:.28em;background:var(--rosso-testo);opacity:.55;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.riga[data-foto]{cursor:pointer}

/* Vista previa que sigue al cursor (solo con ratón) */
.anteprima{
  position:fixed;top:0;left:0;z-index:55;pointer-events:none;
  width:260px;opacity:0;
  border:var(--junta) solid var(--smalto);
  box-shadow:10px 10px 0 rgba(12,30,72,.28);
}
.anteprima img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.anteprima b{
  display:block;background:var(--rosso-testo);color:#fff;
  font-family:var(--font-display);font-size:.85rem;padding:.4rem .7rem;
}
@media (pointer:coarse){.anteprima{display:none}}

/* En táctil la foto se despliega dentro de la fila */
.riga-foto{overflow:hidden;height:0}
.riga-foto img{
  width:100%;max-width:340px;aspect-ratio:4/3;object-fit:cover;
  margin-top:.9rem;border:var(--junta) solid rgba(42,27,20,.25);
}

.senza-risultati{padding:clamp(2rem,5vw,3.5rem) 0;text-align:center}
.senza-risultati p{margin:0 0 1.2rem;font-size:1.05rem;color:var(--testo-2)}

@media (max-width:760px){
  /* Pegajoso solo lo imprescindible: con la cabecera y las categorías fijas,
     un buscador de 236px se comería media pantalla. Aquí se queda quieto. */
  .filtri{position:static}
  .filtri-fila{padding:.7rem 0 .5rem;gap:.7rem}
  /* Los filtros en una sola fila que se desliza, no apilados. */
  .chips{
    width:100%;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;padding-bottom:.2rem;
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;font-size:.86rem;padding:.6rem .9rem;white-space:nowrap}
  .filtri-conto{padding-bottom:.6rem}
}

/* ============================================================
   RESERVA — marco para el widget de Calendly
   El calendario es de ellos; aquí solo se le pone el azulejo alrededor.
   ============================================================ */
.prenota-marco{
  /* A ancho completo Calendly usa su diseño de dos columnas y cabe en 760px;
     por debajo de ~1000px pasa a una sola columna y necesita más alto. */
  border:var(--junta) solid rgba(42,27,20,.2);
  background:var(--blu-notte);
  padding:var(--junta);
  box-shadow:8px 8px 0 rgba(42,27,20,.12);
}
.calendly-inline-widget{width:100%;background:var(--blu-notte)}
.prenota-alternativa{
  max-width:74ch;margin:1.8rem 0 0;font-size:1rem;color:var(--testo-2);
}
.prenota-alternativa a{color:var(--rosso-testo);font-weight:700}
.prenota-alternativa strong{color:var(--manganese)}
/* En pantallas estrechas Calendly apila su tarjeta: necesita bastante más alto. */
@media (max-width:1000px){
  .calendly-inline-widget{height:1080px !important}
}
@media (max-width:640px){
  .prenota-marco{box-shadow:5px 5px 0 rgba(42,27,20,.12)}
  .calendly-inline-widget{height:1150px !important}
}

/* ============================================================
   ACCIONES FIJAS — dos azulejos anclados abajo a la derecha
   Miden exactamente --tile, así que son una columna más del muro.
   ============================================================ */
.azioni-fisse{
  position:fixed;z-index:65;
  right:clamp(1rem,2.4vw,2rem);bottom:clamp(1rem,2.4vw,2rem);
  display:grid;gap:var(--junta);
}
.azione-fissa{
  width:var(--tile);height:var(--tile);
  display:grid;place-content:center;justify-items:center;gap:.35rem;
  text-decoration:none;color:#fff;text-align:center;
  font-family:var(--font-display);font-weight:700;font-size:.74rem;
  letter-spacing:-.01em;line-height:1.05;padding:.4rem;
  box-shadow:6px 6px 0 rgba(10,24,56,.45);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.azione-fissa svg{
  width:28px;height:28px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
.azione-fissa--carta{background:var(--rosso)}
.azione-fissa--carta svg{stroke-width:3.4}
.azione-fissa--wa{background:var(--verde)}
.azione-fissa--wa svg{stroke-width:1.9}
.azione-fissa:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 rgba(10,24,56,.45)}
.azione-fissa:active{transform:translate(6px,6px);box-shadow:0 0 0 rgba(10,24,56,.45)}
.azione-fissa--carta:hover{background:var(--rosso-scuro)}
.azione-fissa--wa:hover{background:#25623F}

/* Estando ya en la carta, ese azulejo sobra. */
body[data-pagina="carta.html"] .azione-fissa--carta,
body[data-pagina="carta.html"] .voce-carta{display:none}

/* En móvil manda la barra inferior: los azulejos fijos estorbarían. */
@media (max-width:760px){
  .azioni-fisse{display:none}
  .barra-fuoco{grid-template-columns:repeat(4,minmax(0,1fr))}
  body[data-pagina="carta.html"] .barra-fuoco{grid-template-columns:repeat(3,minmax(0,1fr))}
  .barra-fuoco a{font-size:.8rem;letter-spacing:-.01em;min-width:0}
  .barra-fuoco a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ============================================================
   VÍDEO DEL HERO
   La cocina se ve por detrás de la pared de azulejos. El velo es
   opaco de verdad (.86–.93) porque encima va texto que tiene que
   cumplir contraste AA sobre imágenes claras (masa, queso).
   ============================================================ */
.pannello-hero--video{isolation:isolate}
.hero-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  pointer-events:none;
}
.hero-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(12,30,72,.68) 0%,
      rgba(12,30,72,.60) 38%,
      rgba(12,30,72,.76) 76%,
      rgba(12,30,72,.90) 100%);
}
/* Con vídeo detrás, el texto secundario sube a blanco: sobre un fotograma
   claro (masa, queso) el azul claro se queda por debajo de 4,5:1. */
.pannello-hero--video .hero-sotto,
.pannello-hero--video .hero-dati span{
  color:var(--smalto);
  text-shadow:0 1px 12px rgba(10,24,56,.75);
}
.pannello-hero--video .hero-corpo h1,
.pannello-hero--video .hero-dati b{text-shadow:0 2px 18px rgba(10,24,56,.6)}
.pannello-hero--video .muro{z-index:2;opacity:.38}
.pannello-hero--video .hero-corpo,
.pannello-hero--video .hero-dati{z-index:3}
/* Sin JavaScript o con movimiento reducido queda el póster, que es un
   fotograma del mismo vídeo: nunca se ve un hueco. */
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .pannello-hero--video{
    background-image:url("../img/pizza-poster.jpg");
    background-size:cover;background-position:center;
  }
}

/* ============================================================
   MÓVIL — zonas de toque y barras pegajosas
   ============================================================ */

/* Enlaces de pie y navegación: 19px de alto no se pueden tocar con el dedo.
   Se les da caja propia hasta las 44px que pide la WCAG. */
@media (max-width:940px){
  .piede li{margin-bottom:0}
  .piede li a{
    display:flex;align-items:center;min-height:44px;
    padding:.25rem 0;
  }
  .piede-basso a{display:inline-flex;align-items:center;min-height:44px}
  .barra-servizio .wrap{padding:.35rem 0}
  .barra-servizio a{display:inline-flex;align-items:center;min-height:34px}
}

/* En la carta hay dos barras pegajosas seguidas: las categorías y el buscador.
   Si las dos se anclan a la misma altura se tapan. El buscador va debajo. */
@media (max-width:760px){
  .filtri{top:calc(var(--testata) + var(--alto-carta-nav, 46px))}
}

/* El pie, apilado en una sola columna, necesita separación entre bloques. */
@media (max-width:560px){
  .piede-griglia{gap:2.2rem}
  .piede h4{margin-bottom:.6rem}
}

/* ============================================================
   MÁS FOTO: es una pizzería, se tiene que ver la comida
   ============================================================ */

/* Azulejo del mosaico con fotografía del plato */
.tessera--foto{padding:0}
.tessera--foto .motivo{display:none}
.tessera--foto img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
.tessera--foto:hover img{transform:scale(1.045)}
.tessera-testo{
  padding:clamp(1.3rem,2.6vw,1.9rem);
  display:flex;flex-direction:column;flex:1;
}

/* Banda de fotos a la cabeza de cada grupo de la carta */
.banda-foto{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--junta);
  margin:0 0 clamp(1.8rem,3.5vw,2.6rem);
  background:rgba(42,27,20,.18);
  border:var(--junta) solid rgba(42,27,20,.18);
}
.banda-foto figure{margin:0;position:relative;overflow:hidden;background:var(--blu-notte)}
.banda-foto img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
.banda-foto figure:hover img{transform:scale(1.05)}
.banda-foto figcaption{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top,rgba(12,30,72,.94),rgba(12,30,72,0));
  color:var(--smalto);font-size:.84rem;font-weight:500;
  padding:1.7rem .7rem .55rem;
}
@media (max-width:760px){
  .banda-foto{grid-template-columns:repeat(2,minmax(0,1fr))}
  .banda-foto figcaption{font-size:.8rem}
}

/* Banda ancha de fotos entre secciones del inicio */
.striscia-foto{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--junta);
  background:rgba(232,234,224,.18);
}
.striscia-foto figure{margin:0;position:relative;overflow:hidden}
.striscia-foto img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
@media (max-width:760px){
  .striscia-foto{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ============================================================
   MENÚ MÓVIL WordPress
   Mantiene el diseño nuevo, pero con apertura/cierre estable.
   ============================================================ */
@media (max-width:940px){
  html.menu-mobile-aperto,
  body.menu-mobile-aperto{
    overflow:hidden !important;
    overscroll-behavior:none;
  }

  .testata{z-index:1000;}
  .menu-btn{
    position:relative;
    z-index:1002;
    touch-action:manipulation;
  }
  .navigazione{z-index:1001;}
}

@media (max-width:640px){
  .navigazione{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    max-height:none !important;
    padding:88px 1.35rem max(1.5rem, env(safe-area-inset-bottom)) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    gap:0 !important;
    overflow-y:auto !important;
    background:rgba(10,24,56,.995) !important;
    border:0 !important;
    box-shadow:none !important;
    transform:translateX(100%) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:transform .28s var(--ease), opacity .2s ease, visibility .28s var(--ease) !important;
  }

  .navigazione[data-aperto]{
    transform:translateX(0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .navigazione a{
    display:block;
    width:100%;
    font-size:1.32rem !important;
    line-height:1.15 !important;
    padding:1rem .2rem !important;
  }

  .menu-btn[aria-expanded="true"]{
    background:var(--smalto);
    color:var(--blu-notte-2);
    border-color:var(--smalto);
  }
}