/* ==========================================================================
   PICCOLA ITALIA · v3 — "ORO NERO"
   Rediseño completo (01/08/2026): el concepto "il giornale sulla tavola"
   (papel pajizo, tinta, recortes, scontrino, annunci) queda RETIRADO por
   encargo del dueño, que pidió una web de tono lujoso en negro y dorado,
   con vitalipizza.com como referencia. La v2 completa está en
   backups/piccola-italia-v2-giornale-20260801/.

   Reglas heredadas que NO se tocan:
     · "regla de las abuelas": ningún texto informativo por debajo de .74rem
       y contraste alto de verdad (los valores medidos van anotados abajo).
     · rendimiento: nada de background-attachment:fixed ni de capas fixed con
       mix-blend-mode — fueron la causa real de los tirones de scroll (31/07).
     · los ganchos de main.js se conservan: data-nav, data-bar, data-burger,
       data-reveal, data-stamp, data-pizza, data-today-hours, data-open-sign.
   ========================================================================== */

:root{
  /* --- negros (v3.2: más profundos, a petición de Nacho) ----------------
     El fondo baja a casi negro puro. Los paneles se separan del fondo por
     muy poco a propósito: lo que tiene que separarlos es el FILETE de oro,
     no un gris. Cuanto más hondo el negro, más brilla el oro encima. */
  --nero:        #040404;   /* fondo base */
  --nero-2:      #0a0a09;   /* paneles */
  --nero-3:      #0f0e0c;   /* paneles elevados / tarjetas */
  --nero-4:      #1c1a16;   /* bordes suaves, separadores */

  /* --- oro -------------------------------------------------------------
     Medidos sobre --nero (#0a0a0a):
       --oro         8,5:1   → titulares, cifras, iconografía, texto normal
       --oro-chiaro 13,1:1   → destellos, hover, texto pequeño sobre negro
       --oro-scuro   3,0:1   → SOLO filetes y bordes, nunca texto        */
  --oro:         #c9a45c;
  --oro-chiaro:  #efd791;
  --oro-scuro:   #8b7141;
  /* El oro más apagado que TODAVÍA puede llevar texto: 5,0:1 sobre los
     paneles. --oro-scuro (3,0:1) es solo para filetes y bordes — se coló como
     color de los numerales y la puerta mecánica lo cazó a 4,1:1. */
  --oro-tenue:   #9c8049;
  --oro-vetro:   rgba(201,164,92,.12);   /* velos y fondos de chip */

  /* EL ORO COMO MATERIAL (v3.1). Un oro plano se lee como mostaza: el oro de
     verdad tiene bandas de luz. --lamina es el degradado que se aplica con
     background-clip:text a los titulares grandes; los pequeños siguen en
     color plano, porque a cuerpo bajo el degradado solo ensucia y baja el
     contraste medido. Las bandas van de --oro-scuro a #fdf0c8 y vuelven. */
  --lamina: linear-gradient(100deg,
              #9a7c43 0%, #c9a45c 18%, #f4e2ad 34%, #fdf6dd 42%,
              #e8cf90 52%, #c9a45c 68%, #a8874a 84%, #d9b871 100%);

  /* --- tintas ----------------------------------------------------------
       --panna  17,6:1 sobre negro · --panna-2 9,9:1 · --panna-3 6,2:1
       (el tope inferior, 6,2:1, sigue por encima del 4,5:1 de AA)      */
  --panna:       #f6f2ea;
  --panna-2:     #b9b1a4;
  --panna-3:     #928b80;

  /* --- rojo brasa (v3.2) -----------------------------------------------
     Nacho pidió "detalles pequeños en rojo". Se usa SOLO como acento
     gráfico y en un sitio a la vez: el destello central de los filetes de
     oro, el rombo de los rótulos, la marca del plato firma y las chispas
     rojas del canvas. NUNCA como color de fondo ni de párrafo: el rojo en
     grande convierte "lujo" en "pizzería de barrio".
       --rosso        3,3:1 → solo grafismo, jamás texto
       --rosso-vivo   6,1:1 → el único que puede llevar texto (CHIUSO)   */
  --rosso:       #b4232c;
  --rosso-vivo:  #e0656d;
  /* el rojo que SÍ puede llevar texto pequeño: 4,8:1 sobre los paneles.
     Es el de los numerales de sección — el acento rojo que se repite siete
     veces y cose la página sin invadirla. */
  --rosso-num:   #d4515a;
  --verde:       #4a9c62;   /* abierto ahora */

  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans:    "Jost", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1240px;
  --wrap-stretto: 880px;

  /* Filete de oro reutilizable: se apaga en los extremos y lleva un destello
     de brasa en el centro. Ese punto rojo es el "detalle pequeño en rojo"
     que se repite por toda la web y la cose. */
  --filo: linear-gradient(90deg, transparent, var(--oro-scuro) 16%, var(--oro) 40%,
            #d8734f 50%, var(--oro) 60%, var(--oro-scuro) 84%, transparent);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family: var(--sans);
  font-weight:300;
  color: var(--panna-2);
  background-color: var(--nero);
  /* Un solo resplandor cálido arriba, en `scroll` y acotado en alto: da
     profundidad sin obligar a repintar el fondo en cada frame. */
  background-image: radial-gradient(ellipse 120% 60% at 50% 0%, rgba(201,164,92,.13), transparent 70%);
  background-repeat:no-repeat;
  background-size:100% 900px;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
iframe{ max-width:100%; border:0; }

h1,h2,h3,h4{ font-family:var(--display); color:var(--panna); font-weight:400; margin:0; line-height:1.12; }
p{ margin:0 0 1.1em; }
a{ color:var(--oro-chiaro); }

.sr-only{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--oro); color:var(--nero); padding:.7rem 1.2rem;
  font-family:var(--sans); font-weight:500; letter-spacing:.12em; text-decoration:none;
}
.skip-link:focus{ left:.5rem; top:.5rem; }

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

/* ==========================================================================
   MATERIAL Y MOVIMIENTO (v3.1)
   Todo el movimiento es CSS + IntersectionObserver. NO se usa GSAP ni
   ninguna librería: pesan, y en esta web el rendimiento de scroll ya dio
   guerra el 31/07 (los tirones venían de composición, no de JS). Regla
   heredada: nada de position:fixed con mix-blend-mode, nada de
   background-attachment:fixed, y todo lo que se anima es transform/opacity.
   ========================================================================== */

/* --- oro de lámina: solo en titulares grandes ---------------------------
   El `color` se deja en --oro a propósito: es el que mide el auditor de
   contraste y el que ve un navegador sin background-clip. El degradado solo
   lo pinta encima. La banda más oscura del degradado (#9a7c43) da 5,0:1
   sobre negro, así que ni en el peor punto baja de AA. */
.oro-lamina{
  color:var(--oro);
  background-image:var(--lamina);
  background-size:220% 100%;
  /* En REPOSO se centra a propósito (50%): así el texto enseña la mitad
     luminosa del degradado y los dos extremos quedan en oro medio. Con la
     posición a 0 la última palabra caía en la banda oscura y "Mamá Zory"
     terminaba apagado, como si no hubiera cargado. */
  background-position:50% 0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* el brillo recorre la lámina una sola vez al aparecer, no en bucle */
.is-visible .oro-lamina, .oro-lamina.is-visible{ animation:barrido 2.4s cubic-bezier(.3,.5,.2,1) .15s both; }
@keyframes barrido{ from{ background-position:190% 0; } to{ background-position:50% 0; } }

/* --- filete de oro que se dibuja al entrar --- */
.filetto{ height:1px; border:0; margin:0; background:var(--filo); }
.filetto-vivo{ transform:scaleX(0); transform-origin:50% 50%; transition:transform 1.1s cubic-bezier(.2,.7,.3,1); }
.is-visible .filetto-vivo, .filetto-vivo.is-visible{ transform:scaleX(1); }

/* --- reveals (solo si hay JS) ------------------------------------------
   Tres gestos, no uno: subida normal, entrada por MÁSCARA para los
   titulares (el gesto editorial: el texto asoma desde debajo de un borde
   invisible) y escalonado por índice en las rejillas (--i lo pone main.js). */
.js [data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-visible{ opacity:1; transform:none; }

/* El padding+margen negativo NO es decorativo: sin él, el overflow:hidden de
   la máscara siega los descendentes de la Bodoni cursiva ("ogni giorno" pierde
   las dos ges). Se agranda la caja por abajo y se recupera con margen. */
.js [data-mask]{ overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.js [data-mask] > *{
  display:block;
  transform:translateY(105%);
  transition:transform 1.05s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--i, 0) * 110ms);
}
.js [data-mask].is-visible > *{ transform:none; }

@media (prefers-reduced-motion: reduce){
  .js [data-reveal],
  .js [data-mask] > *{ opacity:1; transform:none; transition:none; }
  .filetto-vivo{ transform:scaleX(1); transition:none; }
  .is-visible .oro-lamina,.oro-lamina.is-visible{ animation:none; }
}

/* --- parallax muy leve: main.js escribe --par (px) en rAF, solo escritorio
   y solo mientras el elemento se ve. Es transform puro: no toca layout. --- */
.parallax{ will-change:transform; transform:translate3d(0, var(--par, 0px), 0); }

/* --- detalle tipográfico -----------------------------------------------
   Bodoni trae ligaduras y numerales antiguos; sin activarlos se desperdicia
   la mitad de la fuente. Los precios y horarios van en numerales tabulares
   para que las cifras alineen en columna. */
h1,h2,h3,.mancheta,.citazione,.hero-titolo{
  font-feature-settings:"liga" 1,"dlig" 1,"kern" 1;
  font-variant-ligatures:common-ligatures discretionary-ligatures;
}
.cifra b,.piatto-prezzo,.ora span:last-child,.hero-dato .v,.targa-num{
  font-variant-numeric:tabular-nums lining-nums;
}

/* kicker: rótulo pequeño en versalitas doradas. .78rem con .3em de
   interletrado — por encima del mínimo de legibilidad y a 8,5:1. */
.kicker{
  display:block; font-family:var(--sans); font-weight:500;
  font-size:.78rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--oro); margin:0 0 1rem;
}
/* el filete del rótulo lleva su punto de brasa en el centro, igual que --filo */
.kicker::after{
  content:""; display:block; width:52px; height:1px; margin:.85rem auto 0;
  background:linear-gradient(90deg, transparent, var(--oro) 38%, #d8734f 50%, var(--oro) 62%, transparent);
}
.kicker.a-sinistra{ text-align:left; }
.kicker.a-sinistra::after{ margin-left:0; margin-right:auto; }

.sez{ padding:clamp(3.6rem,8vw,6.5rem) clamp(1rem,4vw,2rem); }
.sez-testa{ max-width:var(--wrap-stretto); margin:0 auto clamp(2.2rem,5vw,3.4rem); text-align:center; }
.sez-titolo{
  font-size:clamp(2rem,5.2vw,3.4rem); letter-spacing:.02em;
  color:var(--panna);
}
.sez-titolo em{ font-style:italic; color:var(--oro); }
.sez-deck{
  margin:1.1rem auto 0; max-width:56ch; color:var(--panna-2);
  font-size:clamp(.98rem,2vw,1.08rem);
}
/* pista de uso (p. ej. "toca la foto"): más discreta que el deck */
.sez-hint{ font-size:.82rem; letter-spacing:.1em; color:var(--panna-3); margin-top:.7rem; }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem; text-decoration:none; text-align:center;
  padding:.95rem 1.9rem; border:1px solid var(--oro-scuro);
  font-family:var(--sans); letter-spacing:.16em; text-transform:uppercase;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
.btn b{ font-weight:500; font-size:.88rem; letter-spacing:.16em; }
.btn small{ font-weight:300; font-size:.76rem; letter-spacing:.06em; text-transform:none; opacity:.85; }

.btn-oro{ background:var(--oro); color:var(--nero); border-color:var(--oro); }
.btn-oro:hover,.btn-oro:focus-visible{ background:var(--oro-chiaro); border-color:var(--oro-chiaro); }

.btn-out{ background:transparent; color:var(--oro-chiaro); }
.btn-out:hover,.btn-out:focus-visible{ background:var(--oro-vetro); border-color:var(--oro); color:var(--oro-chiaro); }

.btn-lg{ padding:1.1rem 2.3rem; }

/* ==========================================================================
   1. TESTATA — cabecera en flujo + barra fija compacta
   La testata grande NO es sticky (misma decisión que la v2: si no cambia de
   altura con el scroll, no puede haber scroll-anchoring ni parpadeo). La
   barra .testata-fissa es position:fixed y aparece al bajar.
   ========================================================================== */
/* Compactada (v3.5): medía 269 px y, con el hero partido, dejaba los botones
   de acción FUERA de la primera pantalla en portátiles de 1366 y 1440. Medido
   con un script, no a ojo. */
/* CABECERA DENTRO DE LA COLUMNA IZQUIERDA (v3.6).
   Antes era una banda centrada de ancho completo por encima del hero: 243 px
   de alto, todo apilado y simétrico, y además obligaba al bloque de trama a
   empezar por debajo, dejando una franja negra muerta arriba. Ahora vive
   dentro de la columna y sin fondo propio: el split arranca en el borde
   superior de la página. Dos filas a bandera con un filete de oro en medio. */
.testata{
  position:relative; z-index:120;
  padding:clamp(1.1rem,2.4vw,1.7rem) clamp(1.4rem,5vw,4.5rem) 0;
  background:transparent; border-bottom:0;
}
.testata-riga{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.2rem; }
.testata-riga-nav{ align-items:center; }
.testata-filo{ margin:clamp(.8rem,1.6vw,1.1rem) 0; }
.mancheta{
  display:inline-block; text-decoration:none; color:var(--panna);
  font-family:var(--display); font-size:clamp(1.4rem,2.9vw,1.95rem);
  letter-spacing:.16em; text-transform:uppercase; line-height:1;
}
.mancheta i{ font-style:italic; text-transform:none; color:var(--oro); letter-spacing:.02em; }
.mancheta-sub{
  display:block; margin-top:.4rem;
  font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--oro); font-weight:400;
}

.sezioni{ display:flex; justify-content:flex-start; flex-wrap:wrap; gap:clamp(.9rem,2.2vw,2rem); }
.sezioni a{
  text-decoration:none; color:var(--panna); display:block; text-align:center;
  padding:.3rem 0; position:relative;
}
.sezioni a b{ display:block; font-family:var(--sans); font-weight:400; font-size:.84rem; letter-spacing:.22em; text-transform:uppercase; }
.sezioni a small{ display:block; font-size:.74rem; color:var(--panna-3); letter-spacing:.04em; margin-top:.1rem; }
.sezioni a::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:1px;
  background:var(--oro); transition:width .35s ease, left .35s ease;
}
.sezioni a:hover::after,.sezioni a:focus-visible::after{ width:100%; left:0; }
.sezioni a:hover b{ color:var(--oro-chiaro); }

.testata-tools{ grid-column:1 / -1; display:flex; justify-content:center; align-items:center; gap:1rem; margin-top:.7rem; flex-wrap:wrap; }

.lang{ display:flex; gap:.1rem; }
.lang button{
  background:transparent; border:1px solid transparent; color:var(--panna-3);
  font-family:var(--sans); font-size:.76rem; letter-spacing:.1em; font-weight:400;
  padding:.32rem .5rem; cursor:pointer; transition:color .3s ease, border-color .3s ease;
}
.lang button:hover{ color:var(--oro-chiaro); }
.lang button.is-on{ color:var(--oro); border-color:var(--oro-scuro); }

.testata-cta{ padding:.7rem 1.5rem; }
.testata-cta small{ display:none; }

.burger{ display:none; background:transparent; border:1px solid var(--oro-scuro); padding:.55rem .6rem; cursor:pointer; }
.burger span{ display:block; width:20px; height:1px; background:var(--oro); margin:4px 0; }

/* --- barra fija compacta --- */
.testata-fissa{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem clamp(1rem,4vw,2.4rem);
  background:rgba(10,10,10,.96);
  border-bottom:1px solid var(--nero-4);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.9);
  transform:translateY(-105%); transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.testata-fissa.is-visible{ transform:none; }
.testata-fissa .mancheta{ font-size:1.05rem; letter-spacing:.12em; }
.testata-fissa .mancheta-sub{ display:none; }
.testata-fissa .sezioni{ grid-column:auto; margin-top:0; gap:clamp(.9rem,2.2vw,1.9rem); }
.testata-fissa .sezioni a small{ display:none; }
.testata-fissa .testata-tools{ grid-column:auto; margin-top:0; }
.testata-fissa .lang{ display:none; }

@media (max-width:960px){
  .burger{ display:block; }
  /* la fila de navegación envuelve: al abrir el menú, la nav baja a una
     segunda línea a lo ancho en vez de pelearse con el botón y la
     hamburguesa dentro de la misma fila */
  .testata-riga-nav{ flex-wrap:wrap; justify-content:flex-end; }
  .testata .sezioni{
    display:none; flex-direction:column; align-items:flex-start; gap:.2rem;
    flex:1 1 100%; order:3;
    border-top:1px solid var(--nero-4); padding-top:.9rem; margin-top:.9rem;
  }
  .testata.is-open .sezioni{ display:flex; }
  /* sin navegación a la vista, el filete de oro de en medio sobra */
  .testata-filo{ display:none; }
  .testata-fissa .sezioni{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:.2rem; background:rgba(10,10,10,.98);
    border-bottom:1px solid var(--nero-4); padding:.9rem 1rem 1.2rem;
  }
  .testata-fissa.is-open .sezioni{ display:flex; }
  .sezioni a small{ display:block; }
  .testata-fissa .sezioni a small{ display:block; }
  /* en la barra fija los dos controles NUNCA se apilan: el ancho de un móvil
     no da para "ORDINA" + hamburguesa y se envolvían uno debajo del otro,
     duplicando la altura de la barra y pisando la marca */
  .testata-fissa .testata-tools{ flex-wrap:nowrap; }
}
@media (max-width:620px){
  /* por debajo de este ancho la barra fija se queda SOLO con marca y
     hamburguesa: pedir ya está resuelto por la faja inferior fija */
  .testata-fissa .testata-cta{ display:none; }
}

/* ==========================================================================
   2. HERO
   ========================================================================== */
/* SPLIT DURO, SIN MÁRGENES (v3.5). Antes era una caja centrada, que es la
   maqueta de hero más vista del mundo. Ahora la portada se parte en dos
   columnas que tocan los bordes: a la izquierda la tipografía a bandera
   sobre las brasas, a la derecha el bloque de trama con los datos.
   La idea de partir la portada y meter un bloque gráfico fuerte viene de
   pizzeriapiccolobuco.it, que le gustó a Nacho; la trama, los colores y el
   contenido son nuestros — no es un calco (regla de diversidad). */
.hero{
  position:relative;
  min-height:min(74vh, 720px);
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:stretch;
  padding:0;
  overflow:hidden;
}
/* --- FONDO DEL HERO: dibujado, no fotografiado -------------------------
   Aquí había una foto de pizza de 1100 px que se estiraba a 1905 (×1,7) y
   salía blanda — el fallo nº1 de la checklist: nunca mostrar una foto por
   encima de su resolución. Ahora hay negro, el resplandor de la boca del
   horno (CSS) y las brasas (canvas, initBraci en main.js). No se pixela en
   ninguna pantalla y no cuesta una sola petición de red. */
.hero-sfondo{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-braci{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* la boca del horno: el calor que sube desde abajo */
.hero-bocca{
  position:absolute; left:50%; bottom:-14%; transform:translateX(-50%);
  width:min(160%, 1700px); height:78%;
  background:
    radial-gradient(ellipse 46% 100% at 50% 100%, rgba(216,115,79,.30), transparent 62%),
    radial-gradient(ellipse 82% 100% at 50% 100%, rgba(201,164,92,.20), transparent 70%);
  pointer-events:none;
}
/* remate arriba y abajo para que el hero funda con la cabecera y con la
   franja de cifras sin un corte duro */
.hero-sfondo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,4,4,.9) 0%, transparent 22%, transparent 72%, rgba(4,4,4,.95) 100%);
}
/* la columna izquierda: cabecera arriba y el titular ocupando el resto */
.hero-sx{ position:relative; z-index:1; display:flex; flex-direction:column; min-width:0; }
.hero-corpo{
  position:relative; z-index:1; flex:1;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2rem,4vw,3.4rem) clamp(1.4rem,5vw,4.5rem) clamp(2.2rem,4.5vw,3.8rem);
  text-align:left;
}

.hero-titolo{
  font-size:clamp(2.4rem,6.6vw,5rem); line-height:1.02; letter-spacing:.01em;
  text-transform:uppercase; color:var(--panna);
}
.hero-titolo em{
  display:block; font-style:italic; text-transform:none; color:var(--oro);
  font-size:.86em; letter-spacing:.01em; margin-top:.12em;
}
.hero-deck{
  margin:1.6rem 0 0; max-width:44ch; color:var(--panna-2);
  font-size:clamp(1rem,2.2vw,1.15rem);
}

.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:flex-start; margin-top:2.2rem; }

/* --- EL BLOQUE DE TRAMA -------------------------------------------------
   El monograma de la casa —un rombo de oro con la brasa dentro— repetido en
   una retícula diagonal. Va en un SVG embebido: cero peticiones de red y
   nítido en cualquier pantalla, que es justo lo contrario de la foto que
   había aquí antes. */
.hero-trama{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
  gap:clamp(.95rem,1.9vw,1.5rem);
  padding:clamp(2.2rem,4vw,3.4rem) clamp(1.4rem,3.5vw,3rem);
  border-left:1px solid var(--nero-4);
  background-color:rgba(4,4,4,.8);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104' viewBox='0 0 104 104'%3E%3Cg fill='none' stroke='%23c9a45c' stroke-width='1' opacity='.30'%3E%3Cpath d='M52 6 L98 52 L52 98 L6 52 Z'/%3E%3Cpath d='M0 -46 L46 0 L0 46 L-46 0 Z'/%3E%3Cpath d='M104 -46 L150 0 L104 46 L58 0 Z'/%3E%3Cpath d='M0 58 L46 104 L0 150 L-46 104 Z'/%3E%3Cpath d='M104 58 L150 104 L104 150 L58 104 Z'/%3E%3C/g%3E%3Ccircle cx='52' cy='52' r='2.6' fill='%23b4232c' opacity='.75'/%3E%3Ccircle cx='0' cy='0' r='2.6' fill='%23b4232c' opacity='.75'/%3E%3Ccircle cx='104' cy='0' r='2.6' fill='%23b4232c' opacity='.75'/%3E%3Ccircle cx='0' cy='104' r='2.6' fill='%23b4232c' opacity='.75'/%3E%3Ccircle cx='104' cy='104' r='2.6' fill='%23b4232c' opacity='.75'/%3E%3C/svg%3E");
  background-size:104px 104px;
}
/* velo para que la trama no compita con los datos que van encima */
.hero-trama::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse 78% 62% at 50% 50%, rgba(4,4,4,.86), rgba(4,4,4,.5));
}
.hero-trama .sello-voto{ margin-top:0; align-self:flex-start; }
.hero-trama .hero-dato{ text-align:left; }
/* --- LA SELECCIÓN DE LA CARTA -------------------------------------------
   Ocho líneas de carta con guía de puntos. Es lo que llena la columna: antes
   había tres bloques de datos sueltos y quedaba medio vacía. */
.hero-carta{ width:100%; }
.hero-carta .kicker{ margin-bottom:1.2rem; }
.carta-lista{ list-style:none; margin:0; padding:0; }
.carta-lista li{ display:flex; align-items:baseline; gap:.7rem; padding:.42rem 0; }
.cl-nome{ font-family:var(--display); font-size:1.06rem; color:var(--panna); white-space:nowrap; }
/* la guía crece hasta el precio; min-width evita que desaparezca cuando el
   nombre es largo y la columna estrecha */
.cl-punti{
  flex:1 1 auto; min-width:1.2rem; height:0;
  border-bottom:1px dotted var(--oro-scuro); transform:translateY(-.3em);
}
.cl-prezzo{
  font-family:var(--display); font-size:1rem; color:var(--oro);
  white-space:nowrap; font-variant-numeric:tabular-nums lining-nums;
}
.carta-piu{
  display:block; margin-top:1.3rem; text-decoration:none;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--panna-3);
}
.carta-piu b{
  display:block; margin-top:.35rem; font-weight:400;
  color:var(--oro-chiaro); letter-spacing:.16em;
}
.carta-piu:hover b{ color:var(--panna); }

/* --- pie de la columna: lo práctico, en una sola línea --- */
.hero-piede{ width:100%; margin-top:auto; padding-top:1.4rem; }
.hero-piede .filetto{ margin-bottom:1.1rem; }
.hero-piede-riga{
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem 1.4rem;
  font-size:.82rem; letter-spacing:.1em;
}
.hp-voto{ display:inline-flex; align-items:baseline; gap:.4rem; }
.hp-voto b{ font-family:var(--display); font-size:1.2rem; color:var(--oro); }
.hp-voto .stelle{ color:var(--oro-chiaro); font-size:.72rem; letter-spacing:.1em; }
.hp-tel{
  font-family:var(--display); font-size:1.15rem; color:var(--panna);
  text-decoration:none; letter-spacing:.02em;
}
.hp-tel:hover{ color:var(--oro-chiaro); }
.hp-ore{ color:var(--panna-2); }
.hp-k{ color:var(--oro); letter-spacing:.2em; text-transform:uppercase; font-size:.76rem; }


/* sello de valoración */
.sello-voto{
  display:inline-flex; flex-direction:column; align-items:center; gap:.15rem;
  margin-top:2.4rem; padding:1rem 1.8rem;
  border:1px solid var(--oro-scuro); background:rgba(10,10,10,.55);
  opacity:0; transform:scale(.92); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.js .sello-voto.is-stamped, .sello-voto.is-stamped{ opacity:1; transform:none; }
.sello-voto b{ font-family:var(--display); font-size:2.1rem; color:var(--oro); line-height:1; }
.sello-voto .stelle{ color:var(--oro-chiaro); font-size:.9rem; letter-spacing:.18em; }
.sello-voto i{ font-style:normal; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--panna-2); }

.hero-dato{ text-align:center; }
.hero-dato .k{
  display:block; font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--oro); margin-bottom:.35rem;
}
.hero-dato .v{ display:block; font-family:var(--display); font-size:1.35rem; color:var(--panna); }
.hero-dato .v a{ color:var(--panna); text-decoration:none; }
.hero-dato .v a:hover{ color:var(--oro-chiaro); }
.hero-dato .n{ display:block; font-size:.8rem; color:var(--panna-3); margin-top:.2rem; }

/* ==========================================================================
   3. IL NASTRO — la banda viva
   Sustituye a la franja de cifras (25 · 4,4 · 560 · 100%), que Nacho rechazó
   por genérica. Dos piezas: el estado real del horno ahora mismo y un
   desfile con los nombres de las 25 pizzas.
   ========================================================================== */
/* CINTA FINA. Nacho: "quita eso y haz que sea más fina esa franja, que ahora
   es muy gruesa". Cayó el cartel del estado del horno (el horario de hoy vive
   en la barra del hero y el APERTO/CHIUSO en DOVE SIAMO, así que no se pierde
   ningún dato) y la banda se queda en poco más que la altura de una línea. */
.nastro{
  background:var(--nero-2);
  border-top:1px solid var(--nero-4); border-bottom:1px solid var(--nero-4);
  padding:.55rem 0;
  overflow:hidden;
}

/* --- el desfile de las 25 pizzas ---
   Marquee de verdad: el carril duplica su contenido y se anima a -50%, que es
   lo único que da un bucle sin costura (lección nº5). main.js le pone
   .is-paused cuando la banda no se ve o la pestaña está en segundo plano. */
/* Los extremos se funden con dos degradados sólidos, NO con mask-image: la
   máscara obliga a una capa aparte sobre un elemento muy ancho y encarecía el
   scroll (p90 de 20 a 33 ms con la CPU frenada ×4). Como la banda va sobre un
   fondo plano, dos degradados del mismo color dan el mismo resultado, cuestan
   solo pintura y funcionan en cualquier navegador. */
.ticker{ position:relative; }
.ticker::before,.ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none;
}
.ticker::before{ left:0;  background:linear-gradient(90deg, var(--nero-2), transparent); }
.ticker::after{  right:0; background:linear-gradient(270deg, var(--nero-2), transparent); }
.ticker-track{
  display:flex; width:max-content;
  animation:sfila 95s linear infinite;
}
.ticker-track.is-paused{ animation-play-state:paused; }
@keyframes sfila{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker-run{
  font-family:var(--display); font-size:clamp(.95rem,1.5vw,1.15rem);
  letter-spacing:.1em; color:var(--panna); white-space:nowrap;
  padding-right:.6rem;
}
/* el rombo separador, en brasa: el acento rojo otra vez */
.ticker-run i{ font-style:normal; color:var(--rosso-num); font-size:.5em; vertical-align:.32em; margin:0 .55rem; }
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
}

/* ==========================================================================
   4. LA CASA — historia
   ========================================================================== */
.casa-griglia{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.casa-foto{ position:relative; margin:0; }
.casa-foto img{ width:100%; }
/* marco de oro desplazado */
.casa-foto::after{
  content:""; position:absolute; inset:16px -16px -16px 16px;
  border:1px solid var(--oro-scuro); z-index:-1;
}
.casa-testo h2{ font-size:clamp(1.9rem,4.4vw,3rem); }
.casa-testo p{ color:var(--panna-2); }
.citazione{
  margin:2rem 0; padding:1.4rem 0 1.4rem 1.6rem;
  border-left:2px solid var(--oro);
  font-family:var(--display); font-style:italic; font-size:clamp(1.2rem,2.6vw,1.55rem);
  color:var(--oro-chiaro); line-height:1.4;
}
.firma{ font-size:.8rem; letter-spacing:.2em; text-transform:uppercase; color:var(--panna-3); }

@media (max-width:860px){
  .casa-griglia{ grid-template-columns:1fr; }
  .casa-foto::after{ inset:12px -12px -12px 12px; }
}

/* ==========================================================================
   5. LE SPECIALITÀ — tarjetas de pizza (data-pizza: se abren al tocar)
   ========================================================================== */
.specialita-griglia{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.2rem,3vw,2rem);
}
.piatto{
  position:relative; background:var(--nero-3); border:1px solid var(--nero-4);
  cursor:pointer; transition:border-color .4s ease, transform .4s ease;
}
.piatto:hover,.piatto:focus-visible{ border-color:var(--oro-scuro); transform:translateY(-4px); }
.piatto-foto{ position:relative; overflow:hidden; aspect-ratio:4/3; }
.piatto-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.piatto:hover .piatto-foto img{ transform:scale(1.05); }

/* panel de ingredientes: cubre la foto al abrir */
.ingredienti{
  position:absolute; inset:0; background:rgba(10,10,10,.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.2rem; padding:1rem;
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s;
}
.piatto.is-open .ingredienti{ opacity:1; visibility:visible; }
.ingredienti h4{
  font-family:var(--sans); font-weight:500; font-size:.76rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--oro); margin-bottom:.5rem;
}
.ingredienti ul{ list-style:none; margin:0; padding:0; text-align:center; }
.ingredienti li{ font-size:.86rem; color:var(--panna); line-height:1.7; }
/* una sola línea con la cadena de ingredientes verificada (mnu.i.NN), en vez
   de una lista suelta: es la MISMA fuente que usa la carta, así no hay dos
   redacciones distintas del mismo plato */
.ingredienti-linea{
  margin:0; max-width:26ch; text-align:center;
  font-size:.88rem; line-height:1.8; color:var(--panna);
}

.piatto-testo{ padding:1.3rem 1.4rem 1.5rem; text-align:center; }
.piatto-testo h3{ font-size:1.35rem; color:var(--panna); }
.piatto-prezzo{
  display:block; margin:.5rem 0 .7rem; font-family:var(--display);
  font-size:1.15rem; color:var(--oro);
}
.piatto-testo p{ margin:0; font-size:.9rem; color:var(--panna-2); }
.piatto-tocca{
  display:block; margin-top:.9rem; font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--panna-3);
}

@media (max-width:860px){ .specialita-griglia{ grid-template-columns:1fr; } }

/* ==========================================================================
   6. BANDA LISTINO — invitación a la carta
   ========================================================================== */
.banda{
  position:relative; overflow:hidden;
  padding:clamp(4rem,9vw,7rem) clamp(1rem,4vw,2rem);
  text-align:center;
  border-top:1px solid var(--nero-4); border-bottom:1px solid var(--nero-4);
}
.banda-sfondo{ position:absolute; inset:0; z-index:0; }
.banda-sfondo img{ width:100%; height:100%; object-fit:cover; opacity:.3; }
.banda-sfondo::after{ content:""; position:absolute; inset:0; background:rgba(10,10,10,.72); }
.banda-corpo{ position:relative; z-index:1; max-width:var(--wrap-stretto); margin:0 auto; }
.banda-corpo h2{ font-size:clamp(2rem,5.4vw,3.5rem); }
.banda-corpo p{ margin:1.2rem auto 2rem; max-width:52ch; color:var(--panna-2); }

/* ==========================================================================
   7. GALLERIA
   ========================================================================== */
.galleria{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.9rem;
}
.galleria figure{ margin:0; position:relative; overflow:hidden; background:var(--nero-3); }
.galleria .dominante{ grid-column:span 2; grid-row:span 2; }
.galleria img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1), opacity .5s ease; opacity:.88; }
.galleria figure:hover img{ transform:scale(1.06); opacity:1; }
.galleria figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.6rem .95rem .8rem;
  background:linear-gradient(180deg, transparent, rgba(10,10,10,.94));
  font-size:.78rem; line-height:1.5; color:var(--panna);
}
.galleria .dominante figcaption{ font-size:.86rem; padding:2.4rem 1.2rem 1.1rem; }

@media (max-width:900px){
  .galleria{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .galleria .dominante{ grid-column:span 2; grid-row:span 1; }
}

/* ==========================================================================
   8. RECENSIONI
   ========================================================================== */
.recensioni{
  max-width:var(--wrap-stretto); margin:0 auto;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.2rem,3vw,2rem);
}
.recensione{
  position:relative; margin:0; padding:2.6rem 1.8rem 1.6rem;
  background:var(--nero-2); border:1px solid var(--nero-4);
}
.recensione::before{
  content:"“"; position:absolute; top:.2rem; left:1.2rem;
  font-family:var(--display); font-size:4.5rem; line-height:1; color:var(--oro); opacity:.55;
}
.recensione blockquote{ margin:0; font-size:.98rem; line-height:1.7; color:var(--panna); }
.recensione figcaption{
  margin-top:1.2rem; font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--panna-3);
}
.recensione .stelle{ color:var(--oro); letter-spacing:.12em; }

@media (max-width:760px){ .recensioni{ grid-template-columns:1fr; } }

/* ==========================================================================
   9. PER ORDINARE
   ========================================================================== */
.ordinare-due{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.4rem,3.5vw,2.6rem);
}
.modo{
  background:var(--nero-2); border:1px solid var(--nero-4);
  padding:clamp(1.6rem,3.5vw,2.4rem); display:flex; flex-direction:column;
}
.modo h3{ font-size:1.6rem; letter-spacing:.06em; }
.modo h3 + p{ margin-top:.9rem; color:var(--panna-2); }
.modo .btn{ align-self:flex-start; margin-top:auto; }
.modo figure{ margin:1.4rem 0 0; }

.passi{ list-style:none; margin:.6rem 0 1.6rem; padding:0; }
.passi li{ display:flex; gap:1rem; align-items:baseline; padding:.75rem 0; border-bottom:1px solid var(--nero-4); }
.passi li:last-child{ border-bottom:0; }
.passi b{ font-family:var(--display); font-size:1.1rem; color:var(--oro); min-width:2ch; }
.passi span{ font-size:.94rem; color:var(--panna-2); }
.passi a{ color:var(--oro-chiaro); text-decoration:none; border-bottom:1px solid var(--oro-scuro); }

.avviso{
  max-width:var(--wrap); margin:clamp(1.4rem,3.5vw,2.6rem) auto 0;
  border:1px solid var(--oro-scuro); background:var(--oro-vetro);
  padding:clamp(1.4rem,3vw,2rem); text-align:center;
}
.avviso b{
  display:block; font-family:var(--sans); font-weight:500; font-size:.84rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--oro); margin-bottom:.7rem;
}
.avviso p{ max-width:56ch; margin:0 auto 1.3rem; color:var(--panna); font-size:.95rem; }

@media (max-width:860px){ .ordinare-due{ grid-template-columns:1fr; } }

/* ==========================================================================
   10. DOVE SIAMO
   ========================================================================== */
.dove-griglia{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.6rem,4vw,3rem); align-items:start;
}

.targa{
  border:1px solid var(--oro-scuro); padding:1.8rem 1.4rem; text-align:center;
  background:var(--nero-2);
}
.targa-city{ display:block; font-size:.74rem; letter-spacing:.3em; text-transform:uppercase; color:var(--oro); }
.targa-via{ display:block; margin:.7rem 0 .3rem; font-family:var(--display); font-size:1.5rem; color:var(--panna); line-height:1.2; }
.targa-num{ display:block; font-family:var(--display); font-size:2.6rem; color:var(--oro); line-height:1; }
.targa-sub{ display:block; margin-top:.7rem; font-style:normal; font-size:.8rem; color:var(--panna-3); }

.orario{ margin-top:1.6rem; border:1px solid var(--nero-4); background:var(--nero-2); padding:1.6rem 1.4rem; }
.orario h3{ font-size:1.15rem; letter-spacing:.16em; text-transform:uppercase; text-align:center; margin-bottom:1.2rem; }

/* cartel APERTO / CHIUSO (lo pone main.js según la hora real) */
.appeso{
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  border:1px solid var(--verde); padding:.7rem 1.2rem; margin:0 auto 1.4rem; width:max-content;
}
.appeso .ap-stato{ font-family:var(--sans); font-weight:500; font-size:.9rem; letter-spacing:.24em; color:var(--verde); }
.appeso .ap-sub{ font-style:normal; font-size:.74rem; letter-spacing:.14em; color:var(--panna-2); }
.appeso.is-chiuso{ border-color:var(--rosso); }
.appeso.is-chiuso .ap-stato{ color:#e0656d; }   /* 6,0:1 sobre el panel */

.ora{ display:flex; align-items:baseline; gap:.6rem; padding:.5rem 0; font-size:.92rem; }
.ora span:first-child{ color:var(--panna); }
.ora span:last-child{ color:var(--oro-chiaro); white-space:nowrap; }
.ora .leader{ flex:1; height:1px; background:var(--nero-4); }
.ora.chiuso span:last-child{ color:var(--panna-3); font-style:italic; }
.ora-nota{ margin:1.1rem 0 0; font-size:.8rem; color:var(--panna-3); text-align:center; }

.dove-dati{ list-style:none; margin:1.6rem 0; padding:0; }
.dove-dati li{ padding:.7rem 0; border-bottom:1px solid var(--nero-4); font-size:.92rem; color:var(--panna-2); }
.dove-dati .k{ display:block; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--oro); margin-bottom:.2rem; }
.dove-dati a{ color:var(--panna); text-decoration:none; }

.dove-mappa iframe{ width:100%; height:clamp(300px,46vw,430px); filter:grayscale(.55) contrast(1.05) brightness(.82); border:1px solid var(--nero-4); }
.mappa-btn{ display:flex; margin-top:1rem; }
.dove-mappa figure{ margin:1.4rem 0 0; }
.dove-mappa figcaption,.modo figcaption{ margin-top:.6rem; font-size:.8rem; color:var(--panna-3); }

@media (max-width:900px){ .dove-griglia{ grid-template-columns:1fr; } }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.pie{
  background:var(--nero-2); border-top:1px solid var(--nero-4);
  padding:clamp(3rem,6vw,4.5rem) clamp(1rem,4vw,2rem) 2rem;
  text-align:center;
}
.pie .mancheta{ font-size:clamp(1.4rem,3.4vw,2rem); }
.pie-info{ max-width:56ch; margin:1.6rem auto 0; font-size:.9rem; color:var(--panna-2); }
.pie-dati{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.6rem; margin:2rem 0; font-size:.88rem; }
.pie-dati a{ color:var(--panna); text-decoration:none; }
.pie-dati a:hover{ color:var(--oro-chiaro); }
.colofone{
  margin:0; padding-top:1.6rem; border-top:1px solid var(--nero-4);
  font-size:.78rem; letter-spacing:.08em; color:var(--panna-3);
}
.colofone a{ color:var(--oro); text-decoration:none; margin-left:1rem; }

/* ==========================================================================
   12. FAJA INFERIOR (móvil)
   ========================================================================== */
.faja{ display:none; }
@media (max-width:760px){
  .faja{
    position:fixed; left:0; right:0; bottom:0; z-index:250;
    display:grid; grid-template-columns:repeat(3,1fr);
    background:rgba(10,10,10,.97); border-top:1px solid var(--oro-scuro);
  }
  .faja a{
    padding:.85rem .3rem; text-align:center; text-decoration:none;
    color:var(--oro-chiaro); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
    border-right:1px solid var(--nero-4);
  }
  .faja a:last-child{ border-right:0; }
  body{ padding-bottom:3.2rem; }
}

/* ==========================================================================
   13. SIPARIO — el preludio de marca
   Las webs de alta gama SÍ hacen esperar un instante, y eso se lee como
   cuidado (Sartoria Panatieri, la mejor pizzería de Europa, lo hace). Reglas
   para que sume en vez de estorbar: una sola vez por sesión, tope duro de
   1,4 s pase lo que pase, no bloquea la carga (el contenido ya está detrás)
   y desaparece del todo con prefers-reduced-motion.
   ========================================================================== */
.sipario{
  position:fixed; inset:0; z-index:600;
  background:var(--nero);
  display:grid; place-items:center;
  transition:opacity .7s ease .1s, visibility .7s .1s;
}
.sipario.is-out{ opacity:0; visibility:hidden; pointer-events:none; }
.sipario-corpo{ text-align:center; padding:2rem 1.2rem; }
.sipario-nome{
  font-family:var(--display); font-size:clamp(1.8rem,6vw,3.4rem);
  letter-spacing:.2em; text-transform:uppercase; line-height:1.1;
  color:var(--panna);
  opacity:0; animation:sale .95s cubic-bezier(.19,1,.22,1) .1s both;
}
.sipario-nome i{ font-style:italic; text-transform:none; color:var(--oro); letter-spacing:.03em; }
@keyframes sale{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
/* el filete se abre desde el centro: es todo el "gesto" del preludio */
.sipario-filo{
  height:1px; width:min(58vw,320px); margin:1.3rem auto 0;
  background:var(--filo); transform:scaleX(0);
  animation:apre 1s cubic-bezier(.19,1,.22,1) .35s both;
}
@keyframes apre{ to{ transform:scaleX(1); } }
.sipario-sub{
  margin:1.1rem 0 0; font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--panna-3); opacity:0; animation:sale .8s ease .6s both;
}
@media (prefers-reduced-motion: reduce){
  .sipario{ display:none; }
}

/* ==========================================================================
   14. PIEZAS EDITORIALES
   ========================================================================== */

/* Numeral romano de sección: ordena la lectura y es oficio editorial.
   En CURSIVA no vale: la Bodoni italic convierte "III" en "///" y se lee como
   tres barras. Va en redonda, con filetes a los lados que lo marcan como
   numeral y no como texto. */
.sez-num{
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  font-family:var(--display); font-size:.9rem; letter-spacing:.22em;
  /* EL acento rojo de la web. Se probó primero con dos puntitos rojos a los
     lados y no se veían: quedaban en nada. El numeral entero en rojo brasa,
     flanqueado por filetes de oro, sí se lee como decisión y no como
     accidente — y sigue siendo un detalle pequeño, que es lo pedido. */
  color:var(--rosso-num); margin-bottom:1rem;
}
.sez-num::before,.sez-num::after{
  content:""; width:26px; height:1px; background:var(--oro-scuro);
}
/* en la pieza de la firma el rótulo va centrado, como el resto del bloque */
.piatto-firma .sez-num{ font-style:italic; letter-spacing:.24em; font-size:.85rem; }

/* capitular en el primer párrafo de la historia */
.capitale::first-letter{
  float:left; font-family:var(--display); font-size:3.5em; line-height:.82;
  padding:.06em .12em 0 0; color:var(--oro);
}

/* --- LA FILOSOFIA: tres pilares -----------------------------------------
   Los tres son afirmaciones que la casa YA hacía en la web anterior
   (lunga lievitazione, producto italiano, horno encendido cada tarde). No se
   añade ninguna que no esté verificada: nada de horno de leña ni de "dal
   19XX" hasta que el dueño lo confirme. */
.filosofia-griglia{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3.2rem);
}
.pilastro{ text-align:center; padding:0 .5rem; }
.pilastro-icona{ display:block; margin:0 auto 1.4rem; width:44px; height:44px; color:var(--oro); }
.pilastro-icona svg{ width:100%; height:100%; display:block; }
.pilastro h3{ font-size:1.4rem; margin-bottom:.8rem; }
.pilastro p{ margin:0; font-size:.94rem; color:var(--panna-2); }
.pilastro-num{
  display:block; font-family:var(--display); font-style:italic; font-size:.85rem;
  letter-spacing:.2em; color:var(--oro-tenue); margin-bottom:1rem;
}
@media (max-width:860px){ .filosofia-griglia{ grid-template-columns:1fr; gap:2.8rem; } }

/* --- LA FIRMA: pieza tipográfica con forma de línea de carta ------------
   Aquí había una pantalla partida con la foto de la Mamá Zory a la
   izquierda. Fuera (Nacho, 01/08): a ese tamaño la foto no aguanta y el
   texto dejaba un hueco negro enorme a la derecha. Este formato no usa
   ninguna imagen y no se parece a nada más de la página: es una línea de
   carta de restaurante —nombre, guía de puntos, precio— llevada a escala
   grande. Sin foto no hay nada que se pueda ver borroso. */
.piatto-firma{
  background:var(--nero-2);
  border-top:1px solid var(--nero-4); border-bottom:1px solid var(--nero-4);
  padding:clamp(3.4rem,8vw,6rem) clamp(1rem,4vw,2rem);
}
.firma-dentro{ max-width:var(--wrap-stretto); margin:0 auto; text-align:center; }
.firma-occhiello{
  margin:0 0 2rem; font-size:.78rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--oro);
}

/* la línea de carta: nombre — puntos — precio, alineados por su base */
.firma-riga{
  display:flex; align-items:baseline; gap:1rem; text-align:left;
  margin-bottom:1.6rem;
}
.firma-nome{
  font-size:clamp(2.2rem,6.4vw,4.2rem); line-height:1.05; letter-spacing:.01em;
  white-space:nowrap;
}
/* la guía de puntos, en oro. `flex:1` la hace crecer hasta el precio */
.firma-punti{
  flex:1 1 auto; min-width:2rem; height:0;
  border-bottom:1px dotted var(--oro-scuro); transform:translateY(-.35em);
}
.firma-prezzo{
  font-family:var(--display); font-size:clamp(1.5rem,3.4vw,2.4rem);
  color:var(--oro); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums;
}
.firma-ingr{
  margin:0 0 1.4rem; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--panna-2); line-height:2; text-align:left;
}
.firma-desc{ margin:0 auto 2rem; max-width:58ch; color:var(--panna-2); }

@media (max-width:620px){
  /* a 390 px el nombre y el precio no caben en la misma línea sin encoger el
     nombre hasta ridiculizarlo: se apilan y la guía de puntos desaparece */
  .firma-riga{ flex-direction:column; align-items:center; gap:.4rem; text-align:center; }
  .firma-nome{ white-space:normal; }
  .firma-punti{ display:none; }
  .firma-ingr{ text-align:center; }
}

/* ==========================================================================
   15. LIGHTBOX de la galería — se espera de una web cara
   ========================================================================== */
.galleria figure{ cursor:zoom-in; }
.galleria figcaption{
  transform:translateY(12px); opacity:0;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .5s ease;
}
.galleria figure:hover figcaption,
.galleria figure:focus-within figcaption{ transform:none; opacity:1; }
@media (hover:none){ .galleria figcaption{ transform:none; opacity:1; } }

.lente{
  position:fixed; inset:0; z-index:500;
  background:rgba(6,6,6,.96);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:1.2rem; padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s;
}
.lente.is-open{ opacity:1; visibility:visible; }
.lente img{
  max-width:min(94vw,1200px); max-height:78vh; object-fit:contain;
  border:1px solid var(--oro-scuro);
  transform:scale(.97); transition:transform .5s cubic-bezier(.19,1,.22,1);
}
.lente.is-open img{ transform:none; }
.lente-pie{
  max-width:64ch; text-align:center; font-size:.88rem; color:var(--panna-2); margin:0;
}
.lente-chiudi{
  position:absolute; top:clamp(.8rem,3vw,1.8rem); right:clamp(.8rem,3vw,1.8rem);
  background:transparent; border:1px solid var(--oro-scuro); color:var(--oro);
  width:46px; height:46px; font-size:1.3rem; line-height:1; cursor:pointer;
  font-family:var(--sans);
}
.lente-chiudi:hover{ background:var(--oro-vetro); }

/* ==========================================================================
   16. ACABADOS
   ========================================================================== */

/* grado fotográfico común: unifica fotos hechas en momentos distintos y baja
   el estridente del mantel de cuadros rojo sin apagar la comida */
.galleria img,.casa-foto img,.firma-foto img,.piatto-foto img,.dove-mappa figure img,.modo figure img{
  filter:saturate(.92) contrast(1.06) brightness(.97);
}
.lente img{ filter:none; }   /* a tamaño completo, la foto tal cual */

/* barrido de luz al pasar por los botones de oro */
.btn-oro{ position:relative; overflow:hidden; }
.btn-oro::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); transition:left .75s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover){ .btn-oro:hover::after{ left:120%; } }
.btn-oro > *{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){ .btn-oro::after{ display:none; } }

/* la marca de la cabecera respira al pasar por encima */
.mancheta i{ transition:color .5s ease; }
.mancheta:hover i{ color:var(--oro-chiaro); }

/* ==========================================================================
   17. AJUSTES FINOS DE PANTALLA PEQUEÑA
   Ningún texto informativo baja de .74rem (regla de las abuelas).
   ========================================================================== */
/* El split solo tiene sentido con ancho: por debajo de 900 px las dos
   columnas se apilan —tipografía arriba, bloque de trama debajo— y el bloque
   pasa a rejilla de dos datos por fila para no hacerse kilométrico. */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; min-height:0; }
  /* apilado: el bloque de trama pasa a ser una banda debajo del titular.
     Ya no hay rejilla de datos que repartir — lleva la lista de la carta, que
     es de una sola columna por naturaleza. */
  .hero-trama{ border-left:0; border-top:1px solid var(--nero-4); }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .hero{ min-height:auto; }
  /* CABECERA EN MÓVIL. Sin esto: la marca partía en dos líneas, el subtítulo
     en otras dos y el botón ORDINA se comía el ancho entero (lo hereda de la
     regla general .btn{width:100%}), dejando la hamburguesa sola en una
     cuarta línea. La marca se ajusta para caber al lado de los idiomas y el
     subtítulo se retira: ya está en el pie y en el título de la página. */
  .mancheta{ font-size:1.15rem; letter-spacing:.1em; }
  .mancheta-sub{ display:none; }
  .testata{ padding-left:1.1rem; padding-right:1.1rem; }
  .testata-riga{ align-items:center; }
  .testata-riga-nav{ gap:.6rem; }
  /* .testata .testata-cta y no .testata-cta: empataba en especificidad con
     la regla .btn{width:100%} de más abajo y perdía por orden de aparición */
  .testata .testata-cta{ width:auto; padding:.6rem 1.1rem; }
  .lang button{ padding:.32rem .38rem; }
  /* en pantallas muy estrechas el nombre de la pizza puede partir: se le
     quita el nowrap y la guía de puntos se acorta */
  .cl-nome{ white-space:normal; }
  .hero-piede-riga{ gap:.5rem 1rem; }
  .btn{ width:100%; }
  .hero-cta .btn{ width:100%; }
  .sez{ padding-left:1rem; padding-right:1rem; }
  .galleria{ gap:.6rem; }
  .galleria figcaption{ font-size:.76rem; padding:1.2rem .7rem .6rem; }
}