/* ============================================================
   Il Nuraghe — "LA CAJA"
   Brutalismo de pizzería: amarillo de marca, dos rojos, negro
   de tinta. Bordes gruesos, sombras duras sin desenfoque,
   radio cero, display enorme en mayúsculas. Ver DESIGN.md.
   ============================================================ */

:root{
  /* Amarillos: el campo */
  --amarillo:#FFD11A;
  --amarillo-2:#FFB800;      /* más caliente, para bloques secundarios */
  --amarillo-3:#FFE68A;      /* claro, para tramas y estados suaves */

  /* Rojos: el fuego */
  --rojo:#DD2B24;            /* blanco encima: 4,86:1 */
  --rojo-hondo:#A81812;      /* rojo que se lee sobre amarillo: 5,2:1 */
  --rojo-sombra:#8E120D;     /* sombras duras bajo el rojo */

  /* Tinta y papel */
  --tinta:#111111;
  --tinta-2:#3A3A3A;         /* secundario sobre amarillo/blanco */
  --papel:#FFFFFF;
  --hueso:#FFF8E3;           /* blanco roto para secciones de lectura */

  --verde:#1E7A46;           /* solo el punto de "abierto ahora" */

  --tile:88px;
  --junta:3px;               /* el borde brutalista */
  --sombra:7px 7px 0 var(--tinta);
  --sombra-corta:3px 3px 0 var(--tinta);

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

  --ease:cubic-bezier(.16,1,.3,1);
  --golpe:cubic-bezier(.2,.9,.25,1);   /* más seco, brutalista */
  --maxw:1320px;
  --testata:82px;
}

@media (max-width:760px){ :root{ --tile:64px; --junta:2px; --sombra:5px 5px 0 var(--tinta); } }

*,*::before,*::after{box-sizing:border-box}
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(--amarillo);
  color:var(--tinta);
  font-family:var(--font-text);
  font-size:17px;
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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:.9;
  letter-spacing:-.04em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
}
h1{font-variation-settings:"wdth" 110,"opsz" 96;letter-spacing:-.055em}
h2{font-variation-settings:"wdth" 105,"opsz" 48;letter-spacing:-.05em}
h3,h4{font-variation-settings:"wdth" 98,"opsz" 24;letter-spacing:-.035em}

:focus-visible{outline:4px solid var(--tinta);outline-offset:3px}
::selection{background:var(--rojo);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(--tinta);color:var(--amarillo);
  padding:.75rem 1.25rem;z-index:999;font-weight:700;
}
.salta:focus{left:0}

.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;
}

/* ---------- Trama: la cuadrícula de la caja ---------- */
.trama{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right,rgba(17,17,17,.09) 2px,transparent 2px),
    linear-gradient(to bottom,rgba(17,17,17,.09) 2px,transparent 2px);
  background-size:var(--tile) var(--tile);
}
.trama ~ *{position:relative;z-index:1}
.trama--smalto{
  background-image:
    linear-gradient(to right,rgba(17,17,17,.07) 2px,transparent 2px),
    linear-gradient(to bottom,rgba(17,17,17,.07) 2px,transparent 2px);
}

/* ---------- Cenefa: banda gruesa entre secciones ---------- */
.cenefa{
  height:22px;width:100%;border:0;margin:0;display:block;
  background-color:var(--tinta);
  -webkit-mask:url("../img/cenefa.svg") repeat-x center/auto 22px;
  mask:url("../img/cenefa.svg") repeat-x center/auto 22px;
}
.cenefa--arancio{background-color:var(--rojo)}
.cenefa--cobalto{background-color:var(--tinta)}
.cenefa--giallo{background-color:var(--rojo)}

/* ============================================================
   BOTONES — bloque plano, borde negro, sombra dura
   ============================================================ */
.bottone{
  --bg:var(--rojo);--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:800;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:-.02em;
  padding:1.05rem 1.7rem;border:var(--junta) solid var(--tinta);border-radius:0;
  text-decoration:none;cursor:pointer;
  box-shadow:var(--sombra);
  transition:transform .14s var(--golpe),box-shadow .14s var(--golpe),background .14s var(--golpe);
}
.bottone:hover{transform:translate(4px,4px);box-shadow:var(--sombra-corta)}
.bottone:active{transform:translate(7px,7px);box-shadow:0 0 0 var(--tinta)}
.bottone--verde{--bg:var(--tinta);--fg:var(--amarillo)}
.bottone--verde:hover{--bg:#000}
.bottone--fantasma{--bg:var(--papel);--fg:var(--tinta)}
.bottone--fantasma:hover{--bg:var(--amarillo-2)}

/* ============================================================
   CABECERA
   ============================================================ */
.barra-servizio{
  background:var(--tinta);color:var(--papel);
  font-size:.86rem;font-weight:500;
}
.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(--papel);text-decoration:none}
.barra-servizio a:hover{color:var(--amarillo)}
.stato{display:inline-flex;align-items:center;gap:.55ch;font-weight:700}
.stato::before{
  content:"";width:9px;height:9px;background:#3BD07A;
  box-shadow:0 0 0 3px rgba(59,208,122,.28);
}
.stato[data-chiuso]::before{background:var(--rojo);box-shadow:0 0 0 3px rgba(229,50,43,.3)}
.barra-servizio .social{display:flex;gap:1rem}

.testata{
  position:sticky;top:0;z-index:60;
  background:var(--amarillo);
  border-bottom:var(--junta) solid var(--tinta);
}
.testata .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.6rem 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.3rem;
  letter-spacing:-.05em;text-transform:uppercase;display:block;line-height:1;
}
.marchio span{
  display:block;font-size:.8rem;font-weight:700;color:var(--rojo-hondo);
  margin-top:.15rem;letter-spacing:-.01em;
}

.navigazione{display:flex;align-items:center;gap:.2rem}
.navigazione a{
  text-decoration:none;font-family:var(--font-display);font-weight:700;
  font-size:1rem;text-transform:uppercase;letter-spacing:-.02em;
  padding:.55rem .8rem;color:var(--tinta);position:relative;
  border:var(--junta) solid transparent;
  transition:background .15s var(--golpe),border-color .15s var(--golpe);
}
.navigazione a:hover{background:var(--papel);border-color:var(--tinta)}
.navigazione a[aria-current="page"]{background:var(--rojo);color:#fff;border-color:var(--tinta)}

.menu-btn{
  display:none;background:var(--papel);border:var(--junta) solid var(--tinta);
  color:var(--tinta);padding:.6rem 1rem;font-family:var(--font-display);font-weight:800;
  text-transform:uppercase;cursor:pointer;box-shadow:var(--sombra-corta);
}

@media (max-width:940px){
  .menu-btn{display:block}
  .navigazione{
    position:fixed;inset:0 0 0 auto;width:min(86vw,380px);
    background:var(--rojo);
    flex-direction:column;align-items:stretch;justify-content:center;gap:0;
    padding:2rem;
    transform:translateX(100%);visibility:hidden;
    transition:transform .4s var(--golpe),visibility .4s var(--golpe);
    border-left:var(--junta) solid var(--tinta);
  }
  .navigazione[data-aperto]{transform:none;visibility:visible}
  .navigazione a{
    font-size:2rem;font-weight:800;color:#fff;
    padding:.6rem .4rem;border:0;border-bottom:var(--junta) solid rgba(0,0,0,.35);
  }
  .navigazione a:hover{background:var(--tinta);border-color:var(--tinta);color:var(--amarillo)}
  .navigazione a[aria-current="page"]{background:var(--tinta);color:var(--amarillo)}
  .barra-servizio .social{display:none}
}

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

/* ============================================================
   HERO
   ============================================================ */
.pannello-hero{
  position:relative;overflow:hidden;
  background:var(--amarillo);
  border-bottom:var(--junta) solid var(--tinta);
  padding:clamp(1.4rem,3vw,2.6rem) 0 0;
}

/* Palabra gigante repetida, al fondo, como en el packaging */
.eco{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:0;
}
.eco span{
  display:block;white-space:nowrap;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(5rem,15vw,13rem);line-height:.82;
  letter-spacing:-.05em;text-transform:uppercase;
  color:var(--rojo);opacity:.5;
}
.eco span:nth-child(even){
  color:transparent;-webkit-text-stroke:3px var(--rojo);opacity:.42;
}

.muro{
  position:absolute;inset:0;z-index:1;
  display:grid;
  grid-template-columns:repeat(auto-fill,var(--tile));
  grid-auto-rows:var(--tile);
  gap:0;
  justify-content:center;
  opacity:.5;
  pointer-events:none;
}
.muro i{display:block;outline:1px solid rgba(17,17,17,.08)}
.muro i svg{width:100%;height:100%;fill:none;stroke:var(--tinta);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.16}

.hero-corpo{position:relative;z-index:3;text-align:center;padding-bottom:clamp(1.6rem,3vw,2.6rem)}
.hero-corpo .stemma{
  width:min(148px,26vw);margin:0 auto clamp(.7rem,1.8vw,1.1rem);
  filter:drop-shadow(0 6px 0 rgba(17,17,17,.18));
}
.hero-corpo h1{
  font-size:clamp(2.6rem,8vw,6.4rem);
  margin:0 0 1rem;color:var(--tinta);
}
.hero-corpo h1 .fuoco{color:var(--rojo);display:block;-webkit-text-stroke:0}
.hero-sotto{
  max-width:52ch;margin:0 auto 1.8rem;color:var(--tinta);
  font-size:clamp(1.02rem,1.9vw,1.18rem);font-weight:500;
}
.hero-azioni{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* La pizza que gira: foto real recortada, girando sobre su eje.
   Un plano cenital girando en 2D se lee igual que en 3D y pesa 90 KB. */
.pizza-gira{
  position:relative;z-index:2;
  width:min(560px,80vw);margin:clamp(.4rem,1.6vw,1.2rem) auto clamp(.8rem,2vw,1.6rem);
  aspect-ratio:1;display:grid;place-items:center;
}
.pizza-gira img{
  width:100%;height:auto;
  filter:drop-shadow(10px 14px 0 rgba(17,17,17,.22));
  animation:girar 26s linear infinite;
  will-change:transform;
}
@keyframes girar{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pizza-gira img{animation:none}}

.hero-dati{
  position:relative;z-index:3;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:var(--junta) solid var(--tinta);
  background:var(--tinta);gap:var(--junta);
}
.hero-dati div{
  padding:1.3rem 1.2rem;text-align:center;background:var(--amarillo);
}
.hero-dati b{
  display:block;font-family:var(--font-display);font-size:1.55rem;font-weight:800;
  text-transform:uppercase;letter-spacing:-.04em;color:var(--rojo-hondo);
}
.hero-dati span{font-size:.9rem;color:var(--tinta);font-weight:500}
@media (max-width:640px){
  .hero-dati{grid-template-columns:1fr}
  .hero-dati div{display:flex;align-items:baseline;justify-content:space-between;
    text-align:left;padding:.9rem 1rem;gap:1rem}
  .hero-dati b{font-size:1.15rem}
}

.avviso{
  background:var(--tinta);color:var(--amarillo);
  font-weight:700;text-align:center;padding:.85rem 1rem;font-size:.95rem;
}
.avviso b{font-family:var(--font-display);text-transform:uppercase}

/* ============================================================
   SECCIONES
   ============================================================ */
.sezione{padding:clamp(3.2rem,7vw,6rem) 0;position:relative}
.su-smalto{background:var(--hueso);color:var(--tinta);
  border-block:var(--junta) solid var(--tinta)}
.su-cobalto{background:var(--rojo-hondo);color:var(--papel);
  border-block:var(--junta) solid var(--tinta)}
.su-cobalto h1,.su-cobalto h2,.su-cobalto h3{color:var(--papel)}

.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.2rem,4.5vw,3.4rem);
  padding-bottom:clamp(1.1rem,2.2vw,1.8rem);
  border-bottom:var(--junta) solid var(--tinta);
}
.su-cobalto .testa-sezione{border-bottom-color:var(--papel)}
.testa-sezione h2{font-size:clamp(2.2rem,6.4vw,4.6rem);margin:0}
.testa-sezione p{
  margin:0;font-size:clamp(1rem,1.6vw,1.08rem);color:var(--tinta-2);
  max-width:46ch;padding-bottom:.3rem;font-weight:500;
}
.su-cobalto .testa-sezione p{color:#FFD9D6}
@media (max-width:820px){
  .testa-sezione{grid-template-columns:1fr;align-items:start;gap:1rem}
}

/* --- Dos columnas --- */
.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(2rem,4.4vw,3.4rem);margin-bottom:1.2rem}
.duo-testo p{max-width:58ch}
.duo-testo em{font-style:italic}

/* El paralaje sube la imagen un 8%: la caja recorta y la foto va más alta
   que el hueco, o se ve el fondo por debajo. */
.foto-piastrellata{position:relative;overflow:hidden;aspect-ratio:4/3;
  border:var(--junta) solid var(--tinta);
  box-shadow:var(--sombra);background:var(--tinta)}
.foto-piastrellata img{width:100%;height:116%;object-fit:cover}
.foto-piastrellata figcaption{
  position:absolute;left:0;bottom:0;
  background:var(--rojo);color:#fff;border-top:var(--junta) solid var(--tinta);
  border-right:var(--junta) solid var(--tinta);
  font-family:var(--font-display);font-weight:800;font-size:.86rem;
  text-transform:uppercase;padding:.45rem .9rem;
}

/* --- Mosaico --- */
.mosaico{
  display:grid;gap:var(--junta);
  grid-template-columns:repeat(3,1fr);
  border:var(--junta) solid var(--tinta);
  background:var(--tinta);
  box-shadow:var(--sombra);
}
@media (max-width:880px){.mosaico{grid-template-columns:1fr}}
.tessera{
  position:relative;background:var(--papel);color:var(--tinta);
  padding:clamp(1.5rem,3vw,2.2rem);
  overflow:hidden;isolation:isolate;min-height:var(--tile);
  text-decoration:none;display:flex;flex-direction:column;
  transition:background .18s var(--golpe);
}
.tessera:hover{background:var(--amarillo-2)}
.tessera .motivo{
  position:absolute;right:-14px;bottom:-14px;width:132px;height:132px;
  fill:none;stroke:var(--tinta);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.14;z-index:-1;
  transition:transform .5s var(--golpe),opacity .5s var(--golpe);
}
.tessera:hover .motivo{transform:rotate(-8deg) scale(1.12);opacity:.24}
.tessera h3{font-size:clamp(1.35rem,2.3vw,1.8rem);margin-bottom:.7rem;color:var(--tinta)}
.tessera p{margin:0;color:var(--tinta-2);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(--rojo-hondo);
  font-size:1.3rem;font-variant-numeric:tabular-nums;
}

/* Azulejo con foto */
.tessera--foto{padding:0}
.tessera--foto .motivo{display:none}
.tessera--foto img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  border-bottom:var(--junta) solid var(--tinta);
  transition:transform .7s var(--golpe);
}
.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}

/* --- Marquesina --- */
.striscia{
  background:var(--rojo);color:#fff;
  padding:.85rem 0;overflow:hidden;white-space:nowrap;
  border-block:var(--junta) solid var(--tinta);
}
.striscia ul{
  display:inline-flex;gap:2.4rem;margin:0;padding:0;list-style:none;
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
  letter-spacing:-.02em;text-transform:uppercase;
  animation:scorri 32s linear infinite;
}
.striscia li{display:inline-flex;align-items:center;gap:2.4rem}
.striscia li::after{content:"";width:12px;height:12px;background:var(--amarillo);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.striscia--nera{background:var(--tinta)}
.striscia--nera li::after{background:var(--rojo)}
@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:var(--tinta);border:var(--junta) solid var(--tinta);box-shadow:var(--sombra)}
@media (max-width:760px){.pareri{grid-template-columns:1fr}}
.parere{background:var(--papel);color:var(--tinta);padding:clamp(1.7rem,3.2vw,2.6rem)}
.parere blockquote{
  margin:0 0 1.2rem;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.3rem,2.6vw,1.85rem);line-height:1.05;letter-spacing:-.04em;
  color:var(--tinta);text-transform:none;
}
.parere cite{font-style:normal;font-weight:800;font-size:.95rem;color:var(--rojo-hondo);
  font-family:var(--font-display);text-transform:uppercase}
.stelle{display:flex;gap:3px;margin-bottom:1.1rem}
.stelle svg{width:19px;height:19px;fill:var(--rojo)}

/* ============================================================
   CARTA
   ============================================================ */
.carta-nav{
  position:sticky;top:var(--testata);z-index:40;
  background:var(--tinta);
  border-bottom:var(--junta) solid var(--tinta);
}
.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:800;font-size:.98rem;
  text-transform:uppercase;letter-spacing:-.02em;
  padding:.85rem 1.15rem;color:var(--papel);
  border-right:2px solid rgba(255,255,255,.2);
  transition:background .2s var(--golpe),color .2s var(--golpe);
}
.carta-nav a:hover{background:var(--rojo);color:#fff}
.carta-nav a.attivo{background:var(--amarillo);color:var(--tinta)}

.filtri{
  position:sticky;top:calc(var(--testata) + var(--alto-carta-nav,48px));z-index:35;
  background:var(--amarillo);
  border-bottom:var(--junta) solid var(--tinta);
}
.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:.85rem;width:19px;height:19px;
  fill:none;stroke:var(--tinta);stroke-width:2.4;stroke-linecap:round;pointer-events:none}
.cerca input{
  width:100%;background:var(--papel);border:var(--junta) solid var(--tinta);
  color:var(--tinta);border-radius:0;
  padding:.75rem 2.4rem .75rem 2.7rem;font:inherit;font-size:1rem;font-weight:500;
}
.cerca input::placeholder{color:#6E6E6E}
.cerca input:focus{outline:none;box-shadow:var(--sombra-corta)}
.cerca input::-webkit-search-cancel-button{display:none}
.cerca-borra{
  position:absolute;right:.5rem;background:none;border:0;cursor:pointer;
  color:var(--tinta);font-size:1.6rem;line-height:1;padding:.2rem .5rem;
}
.cerca-borra:hover{color:var(--rojo-hondo)}

.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{
  background:var(--papel);border:var(--junta) solid var(--tinta);
  color:var(--tinta);font-family:var(--font-display);font-weight:800;
  font-size:.92rem;text-transform:uppercase;letter-spacing:-.02em;
  padding:.6rem 1rem;cursor:pointer;border-radius:0;
  transition:transform .14s var(--golpe),box-shadow .14s var(--golpe),background .14s var(--golpe);
}
.chip:hover{background:var(--amarillo-2)}
.chip.attivo{background:var(--rojo);color:#fff;box-shadow:var(--sombra-corta)}
.filtri-conto{margin:0;padding:0 0 .8rem;font-size:.9rem;color:var(--tinta-2);font-weight:500}

.gruppo{padding:clamp(2.4rem,5.5vw,4.2rem) 0;
  scroll-margin-top:calc(var(--testata) + 56px);
  border-bottom:var(--junta) solid var(--tinta)}
.gruppo:last-of-type{border-bottom:0}
.gruppo-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  margin-bottom:1.8rem;flex-wrap:wrap}
.gruppo-testa h2{font-size:clamp(2rem,5vw,3.4rem)}
.gruppo-testa .conto{font-size:.9rem;color:var(--tinta-2);font-variant-numeric:tabular-nums;
  font-weight:600}

.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:1rem 0;border-bottom:2px dashed rgba(17,17,17,.28)}
.riga-testa{display:flex;align-items:baseline;gap:.6rem}
.riga-testa h3{font-size:1.15rem;font-weight:800;letter-spacing:-.03em;
  font-family:var(--font-display)}
.riga-punti{flex:1;border-bottom:2px dotted rgba(17,17,17,.3);transform:translateY(-4px)}
.riga-prezzo{
  font-family:var(--font-display);font-weight:800;font-size:1.18rem;
  font-variant-numeric:tabular-nums;color:var(--rojo-hondo);white-space:nowrap;
}
.riga p{margin:.3rem 0 0;font-size:.95rem;color:var(--tinta-2);max-width:52ch}
.tag{
  display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:-.01em;
  text-transform:uppercase;padding:.1rem .45rem;margin-left:.45rem;
  vertical-align:.1em;border:2px solid var(--tinta);font-family:var(--font-display);
}
.tag--veg{background:#BFEBCB;color:var(--tinta)}
.tag--casa{background:var(--amarillo);color:var(--tinta)}

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

.nota-carta{
  position:relative;background:var(--tinta);color:var(--papel);
  padding:clamp(1.8rem,3.4vw,2.4rem);margin-top:2.6rem;
  border:var(--junta) solid var(--tinta);box-shadow:var(--sombra);
}
.nota-carta::before{
  content:"";position:absolute;left:0;right:0;top:0;height:12px;
  background-color:var(--rojo);
  -webkit-mask:url("../img/cenefa.svg") repeat-x center/auto 12px;
  mask:url("../img/cenefa.svg") repeat-x center/auto 12px;
}
.nota-carta p{margin:0;max-width:70ch;color:#E4E4E4}
.nota-carta p+p{margin-top:.7rem}
.nota-carta strong{color:var(--amarillo)}

/* Vista previa del plato */
.anteprima{
  position:fixed;top:0;left:0;z-index:55;pointer-events:none;
  width:270px;opacity:0;
  border:var(--junta) solid var(--tinta);box-shadow:var(--sombra);
}
.anteprima img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.anteprima b{
  display:block;background:var(--rojo);color:#fff;
  border-top:var(--junta) solid var(--tinta);
  font-family:var(--font-display);font-size:.9rem;text-transform:uppercase;
  padding:.4rem .7rem;
}
@media (pointer:coarse){.anteprima{display:none}}
.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 var(--tinta)}

.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(--tinta-2)}

/* Bandas de foto */
.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:var(--tinta);border:var(--junta) solid var(--tinta);
  box-shadow:var(--sombra);
}
.banda-foto figure{margin:0;position:relative;overflow:hidden;background:var(--papel)}
.banda-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .7s var(--golpe)}
.banda-foto figure:hover img{transform:scale(1.06)}
.banda-foto figcaption{
  position:absolute;left:0;bottom:0;
  background:var(--tinta);color:var(--amarillo);
  font-family:var(--font-display);font-weight:800;font-size:.8rem;
  text-transform:uppercase;padding:.35rem .65rem;
}
@media (max-width:760px){.banda-foto{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   GALERÍA
   ============================================================ */
.griglia-foto{
  display:grid;gap:var(--junta);grid-template-columns:repeat(4,1fr);
  background:var(--tinta);border-block:var(--junta) solid var(--tinta);
}
@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(--papel);margin:0}
.foto img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;
  transition:transform .7s var(--golpe)}
.foto:hover img{transform:scale(1.05)}
.foto figcaption{
  position:absolute;left:0;bottom:0;
  background:var(--tinta);color:var(--amarillo);
  font-family:var(--font-display);font-weight:800;font-size:.82rem;
  text-transform:uppercase;padding:.4rem .7rem;
}
.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:var(--tinta);border:var(--junta) solid var(--tinta);box-shadow:var(--sombra)}
@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(--papel);color:var(--tinta);display:flex;flex-direction:column;
  text-decoration:none;position:relative;overflow:hidden;
  transition:background .18s var(--golpe);
}
.articolo-tessera:hover{background:var(--amarillo-2)}
.articolo-tessera img{width:100%;aspect-ratio:16/10;object-fit:cover;
  border-bottom:var(--junta) solid var(--tinta)}
.articolo-corpo{padding:clamp(1.3rem,2.4vw,1.9rem);display:flex;flex-direction:column;flex:1}
.articolo-meta{font-size:.86rem;color:var(--rojo-hondo);margin-bottom:.7rem;font-weight:700}
.articolo-tessera h3{font-size:1.35rem;margin-bottom:.7rem;line-height:1}
.articolo-tessera p{margin:0;color:var(--tinta-2);font-size:.95rem;flex:1}
.articolo-tessera .leggi{
  margin-top:1.2rem;font-family:var(--font-display);font-weight:800;
  color:var(--rojo-hondo);font-size:1rem;text-transform:uppercase;
  display:inline-flex;gap:.5ch;align-items:center;
}

.articolo{background:var(--hueso);color:var(--tinta);position:relative}
.articolo-testata{padding:clamp(2.4rem,5.5vw,4.5rem) 0 clamp(1.4rem,2.8vw,2.2rem)}
.articolo-testata h1{font-size:clamp(2.1rem,5.4vw,4rem);max-width:20ch;margin-bottom:1.2rem}
.articolo-testata .articolo-meta{color:var(--rojo-hondo)}
.articolo-foto{width:100%;aspect-ratio:21/9;object-fit:cover;
  border:var(--junta) solid var(--tinta);box-shadow:var(--sombra)}
.prosa{max-width:70ch;margin:clamp(2rem,4vw,3rem) auto 0;font-size:1.08rem}
.prosa h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin:2.6rem 0 .9rem}
.prosa h3{font-size:1.3rem;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 a{color:var(--rojo-hondo);text-underline-offset:3px;font-weight:700}
.prosa a.bottone{color:var(--fg);text-decoration:none}
.prosa blockquote{
  margin:2.6rem 0;padding:1.4rem 1.6rem;
  background:var(--amarillo);border:var(--junta) solid var(--tinta);
  box-shadow:var(--sombra);
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.05;letter-spacing:-.04em;
  color:var(--tinta);
}
.barra-lettura{
  position:fixed;top:0;left:0;height:6px;width:100%;background:var(--rojo);
  z-index:80;transform:scaleX(0);transform-origin:0 50%;
  border-bottom:2px solid var(--tinta);
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contatto-griglia{display:grid;grid-template-columns:1fr 1fr;gap:var(--junta);
  border:var(--junta) solid var(--tinta);background:var(--tinta);box-shadow:var(--sombra)}
@media (max-width:900px){.contatto-griglia{grid-template-columns:1fr}}
.scheda{background:var(--papel);color:var(--tinta);
  padding:clamp(1.6rem,3.2vw,2.4rem);position:relative;overflow:hidden;isolation:isolate}
.scheda::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,transparent 38%,rgba(255,209,26,.55) 48%,transparent 58%);
  transform:translateX(var(--lucido,-110%));
}
.scheda h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:1.1rem;color:var(--tinta)}
.dati{list-style:none;margin:0;padding:0}
.dati li{padding:.7rem 0;border-bottom:2px solid rgba(17,17,17,.14);
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.dati li:last-child{border-bottom:0}
.dati .k{color:var(--tinta-2);font-size:.92rem;font-weight:500}
.dati a{font-weight:800;text-decoration:none;color:var(--tinta)}
.dati a:hover{color:var(--rojo-hondo)}
.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:2px solid rgba(17,17,17,.14);font-weight:500}
.orari li:last-child{border-bottom:0}
.orari .oggi{color:var(--rojo-hondo);font-weight:800}
.orari .chiuso{color:var(--tinta-2)}

.modulo{display:grid;gap:1rem}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo label{font-size:.98rem;font-weight:800;color:var(--tinta);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.02em}
.campo .opcional{font-weight:500;text-transform:none;color:var(--tinta-2)}
.campo input,.campo textarea,.campo select{
  background:var(--papel);border:var(--junta) solid var(--tinta);
  color:var(--tinta);padding:.85rem .95rem;font:inherit;font-size:1rem;border-radius:0;
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none;box-shadow:var(--sombra-corta);
}
.campo input::placeholder,.campo textarea::placeholder{color:#6E6E6E}
.campo textarea{min-height:130px;resize:vertical}
.modulo .fine-stampa{font-size:.88rem;color:var(--tinta-2);margin:0}
.modulo-stato{padding:.9rem 1rem;font-weight:700;display:none;
  border:var(--junta) solid var(--tinta)}
.modulo-stato[data-visibile]{display:block}
.modulo-stato--errore{background:var(--rojo);color:#fff}
.modulo-stato--ok{background:#BFEBCB;color:var(--tinta)}

.mappa{width:100%;height:clamp(320px,46vw,520px);border:0;display:block;
  border-block:var(--junta) solid var(--tinta)}

/* Marco del calendario de Calendly */
.prenota-marco{
  border:var(--junta) solid var(--tinta);
  background:var(--papel);padding:var(--junta);
  box-shadow:var(--sombra);
}
.calendly-inline-widget{width:100%;background:var(--papel)}
.prenota-alternativa{max-width:74ch;margin:1.8rem 0 0;font-size:1rem;color:var(--tinta-2)}
.prenota-alternativa a{color:var(--rojo-hondo);font-weight:800}
.prenota-alternativa strong{color:var(--tinta)}
@media (max-width:1000px){.calendly-inline-widget{height:1080px !important}}
@media (max-width:640px){.calendly-inline-widget{height:1150px !important}}

/* ============================================================
   PIE
   ============================================================ */
.piede{background:var(--tinta);color:var(--papel);padding:0 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;gap:2.2rem}}
.piede h4{font-family:var(--font-display);font-size:1.15rem;color:var(--amarillo);
  margin-bottom:1rem;font-weight:800;text-transform:uppercase;letter-spacing:-.03em}
.piede ul{list-style:none;margin:0;padding:0}
.piede li{margin-bottom:.4rem}
.piede a{color:#E4E4E4;text-decoration:none;font-size:.96rem;font-weight:500}
.piede a:hover{color:var(--amarillo)}
.piede .marchio-piede img{width:110px;margin-bottom:1rem}
.piede .marchio-piede p{color:#C9C9C9;font-size:.96rem;margin:0;max-width:34ch}
.piede-basso{border-top:2px solid rgba(255,255,255,.2);padding:1.3rem 0;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.88rem;color:#C9C9C9}
.piede-basso a{font-size:.88rem}

@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}
}

/* ============================================================
   ACCIONES FIJAS
   ============================================================ */
.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:.3rem;
  text-decoration:none;text-align:center;
  font-family:var(--font-display);font-weight:800;font-size:.78rem;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;padding:.4rem;
  border:var(--junta) solid var(--tinta);
  box-shadow:var(--sombra);
  transition:transform .14s var(--golpe),box-shadow .14s var(--golpe),background .14s var(--golpe);
}
.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(--rojo);color:#fff}
.azione-fissa--carta svg{stroke-width:3.4}
.azione-fissa--wa{background:var(--amarillo);color:var(--tinta)}
.azione-fissa--wa svg{stroke-width:1.9}
.azione-fissa:hover{transform:translate(4px,4px);box-shadow:var(--sombra-corta)}
.azione-fissa--carta:hover{background:var(--rojo-hondo)}
.azione-fissa--wa:hover{background:var(--amarillo-2)}

body[data-pagina="carta.html"] .azione-fissa--carta,
body[data-pagina="carta.html"] .voce-carta{display:none}

.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(--tinta);
  border-top:var(--junta) solid var(--tinta);
}
.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(--papel);font-size:.8rem;font-weight:700;
  border-right:2px solid rgba(255,255,255,.2);
}
.barra-fuoco a:last-child{border-right:0}
.barra-fuoco a:first-child{background:var(--rojo);color:#fff}
.barra-fuoco svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
@media (max-width:760px){
  .azioni-fisse{display:none}
  .barra-fuoco{display:grid;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{min-width:0}
  .barra-fuoco a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body{padding-bottom:74px}
}

/* ============================================================
   MÓVIL — la carta
   ============================================================ */
@media (max-width:760px){
  /* Pegajoso solo lo imprescindible: cabecera + categorías ya ocupan bastante. */
  .filtri{position:static}
  .filtri-fila{padding:.7rem 0 .5rem;gap:.7rem}
  .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:.88rem;padding:.6rem .9rem;white-space:nowrap}
  .filtri-conto{padding-bottom:.6rem}
}

/* ============================================================
   VÍDEO
   ============================================================ */
.franja-video{position:relative;overflow:hidden;background:var(--tinta);
  border-block:var(--junta) solid var(--tinta)}
.franja-video video{width:100%;height:clamp(320px,52vw,640px);object-fit:cover;display:block}
.franja-video .pie-video{
  position:absolute;left:0;bottom:0;background:var(--amarillo);color:var(--tinta);
  border-top:var(--junta) solid var(--tinta);border-right:var(--junta) solid var(--tinta);
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(.9rem,1.8vw,1.1rem);padding:.6rem 1.1rem;margin:0;
}
@media (prefers-reduced-motion:reduce){.franja-video video{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================
   PANELES OSCUROS — al final a propósito (ver DESIGN.md)
   ============================================================ */
.nota-carta,.piede,.barra-fuoco,.su-cobalto{color:var(--papel)}
.nota-carta h3,.su-cobalto h3{color:var(--papel)}
.su-cobalto .bottone--fantasma{--bg:var(--amarillo);--fg:var(--tinta)}

/* Azulejo destacado del blog: rojo con texto blanco */
.articolo-tessera--fuego{background:var(--rojo-hondo);color:var(--papel)}
.articolo-tessera--fuego:hover{background:var(--rojo-sombra)}
.articolo-tessera--fuego h3{color:var(--papel)}
.articolo-tessera--fuego p{color:#FFE0DD}
.articolo-tessera--fuego .articolo-meta,
.articolo-tessera--fuego .leggi{color:var(--amarillo)}

/* ============================================================
   AJUSTES DEL HERO BRUTALISTA
   ============================================================ */
/* El logo lleva dentro una pizza naranja que sobre el amarillo se pierde:
   el propio cliente avisó de que "el amarillo tapa el logotipo". Va sobre bloque
   negro, que además es como es su escudo nuevo. En el pie, que ya es negro, va suelto. */
.marchio img{
  background:var(--tinta);border:var(--junta) solid var(--tinta);
  padding:5px;width:62px;height:62px;
}
.hero-corpo .stemma{
  background:var(--tinta);border:var(--junta) solid var(--tinta);
  padding:14px;box-shadow:var(--sombra);
  width:min(190px,32vw);
}

/* La palabra de fondo se desliza y no compite con el titular */
.eco{gap:.1em}
.eco span{opacity:.28;animation:eco-izq 26s linear infinite}
.eco span:nth-child(even){opacity:.22;animation:eco-der 30s linear infinite}
@keyframes eco-izq{from{transform:translateX(0)}to{transform:translateX(-33%)}}
@keyframes eco-der{from{transform:translateX(-33%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.eco span{animation:none}}

/* La pizza necesita sitio */
.pizza3d{width:min(620px,88vw);margin:clamp(.5rem,2vw,1.4rem) auto clamp(.8rem,2vw,1.6rem)}


/* ============================================================
   CARTA — FOTOS VISIBLES EN MÓVIL v1.3.1
   En móvil las fotos de los platos se muestran directamente.
   ============================================================ */
@media (max-width:760px){
  .riga[data-foto]{
    cursor:default;
  }
  .riga[data-foto] .riga-foto{
    display:block !important;
    width:100% !important;
    height:auto !important;
    overflow:visible !important;
    margin-top:.85rem;
  }
  .riga[data-foto] .riga-foto img{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    height:auto !important;
    aspect-ratio:16/10;
    object-fit:cover;
    margin:0 !important;
    border:var(--junta) solid var(--tinta);
  }
}