/* ==========================================================================
   PICCOLA ITALIA · v4 — "LA CARTA STAMPATA"
   Rediseño completo (01/08/2026) tras investigar 12 webs de restaurantes de
   lujo con capturas (Gymkhana, Sexy Fish, Gucci Osteria, Francescana,
   Amazónico, COYA, LPM, EMP, Alinea, Cipriani, Bacchanalia). El contrato
   completo está en el BRIEF-V4 del scratchpad; las reglas que gobiernan este
   fichero:

     1. EL ORO NUNCA RELLENA: oro = tipografía, filetes de 1px y el sello.
        Cero fondos o botones macizos dorados (Bacchanalia/Cipriani/EMP).
     2. UN SOLO ELEMENTO DE ACCIÓN ROJO POR VISTA (EMP/Francescana): el verbo
        de pedir. El resto del rojo son micro-joyas ≤14px (rombo ◆).
     3. UNA SOLA FAMILIA: Bodoni Moda con eje óptico — la jerarquía la hacen
        el tamaño, las versalitas y el tracking, no una segunda fuente ni las
        negritas (Gymkhana usa Baskerville 400 hasta en los botones).
     4. LA ESTRUCTURA SE DIBUJA CON FILETES (Gucci Osteria): marco de página,
        cabecera en celdas, hairlines entre secciones.
     5. UN SOLO GLIFO ORNAMENTAL: ◆ (Gymkhana). Nada más.
     6. FOTOS NUNCA A SANGRE NI AMPLIADAS: láminas con doble filete o máscara
        de ARCO (la boca del horno, nuestra forma propia — principio Gucci).
     7. FONDO NEGRO CÁLIDO (COYA #32312F aterciopelado → aquí #0B0A08, más
        hondo porque Nacho pidió negro, pero cálido, no #000 duro).

   Reglas heredadas que siguen mandando:
     · regla de las abuelas: nada informativo < .74rem, contraste medido;
     · rendimiento: nada de background-attachment:fixed ni blend modes fijos,
       solo transform/opacity; canvas y ticker se pausan fuera de vista;
     · ganchos de main.js intactos (data-nav, data-bar, data-burger,
       data-sipario, data-braci, data-reveal, data-mask, data-scena,
       data-stamp, data-pizza, data-today-hours, data-open-sign, .ticker).
   La v3.7 completa vive en backups/piccola-italia-v3.7-oronero-20260801/.
   ========================================================================== */

:root{
  /* --- papel ------------------------------------------------------------
     Negro CÁLIDO: #0B0A08 lleva un punto de marrón que lo hace terciopelo
     (lección COYA). Los paneles apenas se separan: la separación real la
     hacen los filetes. */
  --nero:        #0b0a08;
  --nero-2:      #12100c;
  --nero-3:      #171410;
  --filo:        #8b7141;   /* SOLO líneas y bordes (3,0:1) — jamás texto  */
  --filo-suave:  rgba(139,113,65,.45);

  /* --- tinta de oro (contraste medido sobre --nero) ---------------------
       --oro         8,3:1 → titulares, cifras, versalitas
       --oro-chiaro 12,8:1 → hover, destellos, texto pequeño dorado
       --oro-tenue   5,2:1 → el oro más apagado que aún puede llevar texto */
  --oro:         #c9a45c;
  --oro-chiaro:  #efd791;
  --oro-tenue:   #9c8049;
  --oro-vetro:   rgba(201,164,92,.10);

  /* oro de LÁMINA para titulares grandes: el oro real tiene bandas de luz */
  --lamina: linear-gradient(100deg,
              #9a7c43 0%, #c9a45c 18%, #f4e2ad 34%, #fdf6dd 42%,
              #e8cf90 52%, #c9a45c 68%, #a8874a 84%, #d9b871 100%);

  /* --- tintas claras -----------------------------------------------------
       --panna 17:1 · --panna-2 9,2:1 · --panna-3 5,8:1 (todas > AA)       */
  --panna:       #f6f2ea;
  --panna-2:     #bab2a5;
  --panna-3:     #948c7f;

  /* --- el rojo, racionado (regla 2 del brief) ---------------------------
       --rosso-azione: RELLENO del único botón de acción (texto panna
                       encima = 6,8:1). Jamás texto sobre negro.
       --rosso-gioia:  4,9:1 → micro-joyas ◆, texto rojo pequeño.          */
  --rosso-azione: #8d1f29;
  --rosso-azione-filo: #b0424c;
  --rosso-gioia:  #d4515a;
  --verde:        #6dbd85;   /* APERTO */

  --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;
  /* EXCEPCIÓN a la regla 3 del brief (una sola familia), consciente y acotada:
     la maqueta de Nacho lleva una firma manuscrita bajo el cuadro de la
     selección. Carattere se usa SOLO en esa línea (.manoscritto) y en ningún
     otro sitio; es un peso único y pesa ~15 KB. */
  --mano:  "Carattere", "Brush Script MT", cursive;

  --wrap: 1240px;
  --wrap-stretto: 860px;

  /* filete que se apaga en los extremos, con el destello de brasa central */
  --filo-orizzontale: linear-gradient(90deg, transparent, var(--filo) 16%,
      var(--oro) 40%, #d8734f 50%, var(--oro) 60%, var(--filo) 84%, transparent);

  /* el bisel del botón-billete (Gymkhana: --clipped-edge-size) */
  --taglio: .55em;
  --clip-biglietto: polygon(var(--taglio) 0%, calc(100% - var(--taglio)) 0%,
      100% var(--taglio), 100% calc(100% - var(--taglio)),
      calc(100% - var(--taglio)) 100%, var(--taglio) 100%,
      0% calc(100% - var(--taglio)), 0% var(--taglio));
}

*,*::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(--serif);
  font-optical-sizing:auto;          /* Bodoni Moda: ojo de texto en cuerpos pequeños */
  font-weight:400;
  color:var(--panna-2);
  background-color:var(--nero);
  background-image:radial-gradient(ellipse 120% 55% at 50% 0%, rgba(201,164,92,.10), transparent 70%);
  background-repeat:no-repeat;
  background-size:100% 780px;
  font-size:17px;
  line-height:1.68;
  overflow-x:hidden;
}

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

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

h1,h2,h3,.hero-titolo,.citazione{
  font-feature-settings:"liga" 1,"dlig" 1,"kern" 1;
  font-variant-ligatures:common-ligatures;
}

.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:700;
  background:var(--nero); border:1px solid var(--oro); color:var(--oro-chiaro);
  padding:.7rem 1.2rem; letter-spacing:.12em; text-decoration:none;
}
.skip-link:focus{ left:.6rem; top:.6rem; }

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

/* ==========================================================================
   MATERIAL Y MOVIMIENTO (heredado de la v3, depurado)
   ========================================================================== */
.oro-lamina{
  color:var(--oro);
  background-image:var(--lamina);
  background-size:220% 100%;
  background-position:50% 0;   /* centrado: los extremos nunca caen en la banda oscura */
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.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; } }

.filetto{ height:1px; border:0; margin:0; background:var(--filo-orizzontale); }

.js [data-reveal]{
  opacity:0; transform:translateY(22px);
  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; }

/* máscara de titulares; el padding compensa los descendentes de la cursiva */
.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; }
  .is-visible .oro-lamina,.oro-lamina.is-visible{ animation:none; }
}

.parallax{ will-change:transform; transform:translate3d(0, var(--par, 0px), 0); }

/* ==========================================================================
   IL BIGLIETTO — el CTA con forma de entrada de club (Gymkhana)
   Esquinas biseladas con clip-path. El borde de 1px se consigue con dos
   capas recortadas: el elemento pinta el borde y el interior (.b-in) pinta
   el fondo, ambos con el mismo polígono.
   ========================================================================== */
.biglietto{
  display:inline-block; padding:1px; text-decoration:none;
  background:var(--filo);
  clip-path:var(--clip-biglietto);
  transition:background .35s ease;
}
.biglietto .b-in{
  display:flex; flex-direction:column; align-items:center; gap:.12rem;
  background:var(--nero);
  clip-path:var(--clip-biglietto);
  padding:.95rem 2.1rem;
  transition:background .35s ease;
}
.biglietto b{
  font-weight:500; font-size:.86rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--oro);
  transition:color .35s ease;
}
.biglietto small{ font-weight:400; font-size:.78rem; letter-spacing:.04em; color:var(--panna-3); }
.biglietto:hover{ background:var(--oro); }
.biglietto:hover b{ color:var(--oro-chiaro); }

/* el ÚNICO botón macizo: el rojo de la acción (texto panna a 6,8:1) */
.biglietto-rosso{ background:var(--rosso-azione-filo); }
.biglietto-rosso .b-in{ background:var(--rosso-azione); }
.biglietto-rosso b{ color:var(--panna); }
.biglietto-rosso small{ color:rgba(246,242,234,.75); }
.biglietto-rosso:hover{ background:var(--panna); }
.biglietto-rosso:hover b{ color:var(--panna); }

/* ==========================================================================
   MICRO-ORNAMENTOS: la corona ◆ y el divisor —◆◆◆—
   ========================================================================== */
.corona{
  display:block; text-align:center; font-size:.8rem; line-height:1;
  color:var(--rosso-gioia); margin-bottom:1.1rem; font-style:normal;
}
.divisorio{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  color:var(--filo); margin:0 auto;
}
.divisorio::before,.divisorio::after{
  content:""; width:64px; height:1px; background:var(--filo-suave);
}
.divisorio i{ font-style:normal; font-size:.5rem; color:var(--oro-tenue); letter-spacing:.55em; }

/* palabra fantasma entre secciones (COYA): SIEMPRE pseudo-elemento, nunca
   texto real — el auditor de contraste de la puerta solo mide nodos de texto */
.fantasma{ position:relative; }
.fantasma::before{
  content:attr(data-fantasma);
  position:absolute; left:50%; top:-.18em; transform:translateX(-50%);
  font-family:var(--serif); font-style:italic; font-size:clamp(4rem,11vw,9rem);
  white-space:nowrap; color:rgba(201,164,92,.055); line-height:1;
  pointer-events:none; z-index:0;
}

/* ==========================================================================
   1. TESTATA — maqueta aprobada por Nacho (04/08/2026)
   Barra alta con ubicación y teléfono · idioma con bandera · navegación
   partida a los lados del logotipo centrado · ORDINA rojo · filete de oro.
   ========================================================================== */
.testata{
  position:relative; z-index:120;
  border-bottom:1px solid var(--filo-suave);
  background:transparent;
}

/* --- barra alta --- */
.testata-alta{
  display:flex; align-items:center; gap:1.4rem;
  padding:.5rem clamp(1rem,3vw,2rem) .1rem;
  max-width:1500px; margin:0 auto;
  font-size:.88rem; letter-spacing:.03em;
}
.dato-alto{
  display:inline-flex; align-items:center; gap:.55rem;
  color:var(--panna-2); text-decoration:none;
}
.dato-alto svg{ width:17px; height:17px; color:var(--oro); flex:none; }
a.dato-alto:hover{ color:var(--oro-chiaro); }
.dato-sep{ width:1px; height:20px; background:var(--filo-suave); }

/* --- rejilla principal --- */
.testata-celle{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  align-items:center; gap:1rem;
  max-width:1500px; margin:0 auto;
  /* relleno apretado a propósito: lo que da alto a esta fila es el logo
     grande, no el aire (ver el bloque "LOGO DE LA CASA" al final) */
  padding:.3rem clamp(1rem,3vw,2rem) .55rem;
}
.cella{ display:flex; align-items:center; justify-content:center; }

/* --- selector de idioma con bandera --- */
.lingua{ position:relative; }
.lingua-cara{
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid var(--filo-suave); padding:.55rem .8rem;
  color:var(--panna); font-size:.9rem; letter-spacing:.14em; cursor:pointer;
}
.lingua-freccia{ width:15px; height:15px; color:var(--oro-tenue); }
.lingua-cod{ font-weight:500; }
.cella-azione{ gap:.8rem; }
/* la bandera: tres barras. El color lo decide el idioma activo, que pone
   i18n.js en [data-attiva] — así nunca se enseña una bandera que no toca. */
.bandiera{ display:inline-flex; width:22px; height:15px; border:1px solid rgba(139,113,65,.5); overflow:hidden; }
.bandiera i{ flex:1; display:block; }
.lingua[data-attiva="it"] .bandiera i:nth-child(1){ background:#008C45; }
.lingua[data-attiva="it"] .bandiera i:nth-child(2){ background:#F4F5F0; }
.lingua[data-attiva="it"] .bandiera i:nth-child(3){ background:#CD212A; }
.lingua[data-attiva="es"] .bandiera i:nth-child(1),
.lingua[data-attiva="es"] .bandiera i:nth-child(3){ background:#AA151B; }
.lingua[data-attiva="es"] .bandiera i:nth-child(2){ background:#F1BF00; flex:1.6; }
.lingua[data-attiva="fr"] .bandiera i:nth-child(1){ background:#0055A4; }
.lingua[data-attiva="fr"] .bandiera i:nth-child(2){ background:#F4F5F0; }
.lingua[data-attiva="fr"] .bandiera i:nth-child(3){ background:#EF4135; }
.lingua[data-attiva="de"] .bandiera{ flex-direction:column; }
.lingua[data-attiva="de"] .bandiera i:nth-child(1){ background:#111; }
.lingua[data-attiva="de"] .bandiera i:nth-child(2){ background:#DD0000; }
.lingua[data-attiva="de"] .bandiera i:nth-child(3){ background:#FFCE00; }
.lingua[data-attiva="en"] .bandiera{ background:#012169; position:relative; }
.lingua[data-attiva="en"] .bandiera i{ background:none; }
.lingua[data-attiva="en"] .bandiera i:nth-child(2){
  background:linear-gradient(#fff 0 100%) center/100% 4px no-repeat,
             linear-gradient(#C8102E 0 100%) center/100% 2px no-repeat;
}

.lingua-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:30;
  display:none; flex-direction:column;
  background:var(--nero-2); border:1px solid var(--filo-suave); padding:.3rem;
  min-width:100%;
}
.lingua:hover .lingua-panel,.lingua:focus-within .lingua-panel{ display:flex; }
.lingua-panel button{
  background:transparent; border:0; color:var(--panna-2); cursor:pointer;
  font-family:var(--serif); font-size:.86rem; letter-spacing:.16em;
  padding:.4rem .9rem; text-align:left;
}
.lingua-panel button:hover{ color:var(--oro-chiaro); }
.lingua-panel button.is-on{ color:var(--oro); }

/* --- navegación --- */
.sezioni{ display:flex; justify-content:center; gap:clamp(1.2rem,2.6vw,2.6rem); }
.sezioni a{ text-decoration:none; text-align:center; position:relative; padding:.2rem 0; }
.sezioni a b{
  display:block; font-weight:500; font-size:.86rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--panna);
}
.sezioni a small{
  display:block; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--oro-tenue); margin-top:.3rem;
}
.sezioni a::after{
  content:""; position:absolute; left:0; bottom:-.25rem; width:100%; height:1px;
  background:var(--oro); transform:scaleX(0); transform-origin:center;
  transition:transform .35s ease;
}
.sezioni a:hover::after,.sezioni a:focus-visible::after{ transform:scaleX(1); }
.sezioni a:hover b{ color:var(--oro-chiaro); }

/* --- logotipo centrado --- */
.cella-marca{ flex-direction:column; gap:.1rem; }
.mancheta{
  text-decoration:none; color:var(--panna); text-align:center; display:block;
  font-size:clamp(1.5rem,2.6vw,2.15rem); letter-spacing:.3em;
  text-transform:uppercase; line-height:1.1;
}
.mancheta i{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  font-style:italic; text-transform:none; letter-spacing:.05em;
  color:var(--oro); font-size:.62em; margin-top:.1em;
}
.mancheta .rombo{ font-size:.42em; color:var(--oro-tenue); font-style:normal; }
.mancheta-sub{
  font-style:italic; font-size:.76rem; letter-spacing:.06em; line-height:1.25;
  color:var(--oro-tenue); text-align:center;
}

/* --- el botón ORDINA: el rojo de la acción de la cabecera --- */
.btn-ordina{
  display:inline-flex; align-items:center; gap:.7rem;
  background:var(--rosso-azione); color:var(--panna); text-decoration:none;
  font-size:.92rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.95rem 2rem; border:1px solid var(--rosso-azione-filo);
  transition:background .3s ease;
}
.btn-ordina:hover{ background:#a1232f; }

.burger{ display:none; background:transparent; border:1px solid var(--filo); 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:.55rem clamp(1rem,4vw,2.4rem);
  background:rgba(11,10,8,.96);
  border-bottom:1px solid var(--filo-suave);
  transform:translateY(-105%); transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.testata-fissa.is-visible{ transform:none; }
.testata-fissa .mancheta{ font-size:.95rem; letter-spacing:.22em; display:flex; gap:.5rem; align-items:baseline; }
.testata-fissa .mancheta i{ display:inline; font-size:.95rem; }
.testata-fissa .mancheta-sub{ display:none; }
.testata-fissa .sezioni a small{ display:none; }
.testata-fissa .testata-tools{ display:flex; align-items:center; gap:.8rem; flex-wrap:nowrap; }
.testata-fissa .btn-ordina{ padding:.55rem 1.2rem; font-size:.82rem; }

@media (max-width:1180px){
  /* la rejilla de 5 columnas necesita ancho: por debajo se pliega a
     [logo] [ordina] [burger] y la navegación baja al desplegable */
  .testata-alta{ font-size:.8rem; gap:1rem; flex-wrap:wrap; }
  .testata-celle{ grid-template-columns:1fr auto auto; gap:.5rem; }
  .cella{ justify-content:flex-start; }
  .cella-marca{ order:-1; align-items:flex-start; }
  .mancheta{ font-size:1.3rem; letter-spacing:.22em; text-align:left; }
  .mancheta i{ justify-content:flex-start; }
  .mancheta-sub{ display:none; }
  .cella-lang{ display:none; }
  .testata.is-open .cella-lang{
    display:flex; grid-column:1 / -1; order:20; padding:.6rem 0 .2rem;
    border-top:1px solid rgba(139,113,65,.28);
  }
  .testata.is-open .lingua-panel{ display:flex; flex-direction:row; position:static; border:0; background:none; padding:0; }
  .testata.is-open .lingua-cara{ display:none; }
  .burger{ display:block; }
  .cella-nav{ display:contents; }
  .testata .sezioni{
    display:none; flex-direction:column; align-items:flex-start; gap:.4rem;
    grid-column:1 / -1; border-top:1px solid rgba(139,113,65,.28);
    padding:.9rem 0 .3rem;
  }
  .testata.is-open .sezioni{ display:flex; }
  .testata-fissa .sezioni{ display:none; }
}
@media (min-width:1181px){ .cella-nav{ display:flex; align-items:center; justify-content:center; } }
@media (max-width:560px){
  .testata-alta{ padding-left:1rem; padding-right:1rem; }
  .btn-ordina{ padding:.7rem 1.1rem; font-size:.8rem; letter-spacing:.16em; }
}

/* ==========================================================================
   2. HERO — tipográfico, con el arco del horno (Gucci: 55% tipo, 45% foto)
   ========================================================================== */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  /* El relleno de ARRIBA es menor que el de abajo a propósito: es lo que se
     le devolvió al hero cuando el logo de la cabecera se hizo grande
     (11/08/2026), para que el titular, los botones y la valoración sigan
     entrando en la primera pantalla a 1366x768. Medido, no a ojo. */
  padding:clamp(.7rem,1.3vw,1.05rem) clamp(1rem,4vw,2rem) clamp(1.8rem,3.6vw,2.8rem);
  text-align:center;
}
.hero-corpo{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; }

/* --- TIPOGRAFÍA CINÉTICA (v4.2) ----------------------------------------
   Nacho descartó la foto, el arco y el sello con partículas: la portada pasa
   a ser SOLO tipografía, y el movimiento es el protagonista. Dos gestos:
     · entrada LETRA A LETRA (transform+opacity, retardo por índice --l);
     · DERIVA opuesta de las dos líneas al hacer scroll (--deriva, que pone
       main.js en un rAF). Ambos son transform puro: cero coste de layout.
   Si el JS no llega, el titular se lee igual —el texto está en el HTML— y
   con prefers-reduced-motion ni siquiera se parte en letras. */
.hero-titolo{
  font-size:clamp(2.5rem,8.6vw,6.6rem);
  line-height:.96; letter-spacing:-.005em; color:var(--panna);
  text-wrap:balance;
}
.hero-titolo .riga{ display:block; will-change:transform; }
/* la deriva: la primera línea se va a la izquierda y la segunda a la derecha */
.hero-titolo .riga-1{ transform:translateX(calc(var(--deriva, 0px) * -1)); }
.hero-titolo .riga-2{ transform:translateX(var(--deriva, 0px)); font-style:italic; }

/* letra a letra: sin JS no existen los .ltr y la línea se ve tal cual */
.hero-titolo .ltr{
  display:inline-block;
  transform:translateY(.85em) rotate(2deg);
  opacity:0;
  transition:transform .95s cubic-bezier(.19,1,.22,1), opacity .7s ease;
  transition-delay:calc(var(--l, 0) * 34ms);
}
.hero-titolo .ltr.sp{ transition:none; opacity:1; transform:none; }
.hero-titolo.is-in .ltr{ transform:none; opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero-titolo .riga-1,.hero-titolo .riga-2{ transform:none; }
  .hero-titolo .ltr{ transform:none; opacity:1; transition:none; }
}

.hero-deck{
  margin:1.1rem auto 0; max-width:52ch; color:var(--panna-2);
  font-size:clamp(1rem,2.1vw,1.12rem);
}

/* el chip de datos reales (Bacchanalia: el número concreto da confianza) */
.hero-chip{
  display:inline-flex; align-items:baseline; gap:.6rem;
  margin-top:1.1rem; padding:.5rem 1.3rem;
  border:1px solid var(--filo-suave); border-radius:999px;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--panna-2);
}
.hero-chip b{ font-weight:500; color:var(--oro); letter-spacing:.1em; }

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

/* --- LA ESCENA DEL HERO (fotos de Nacho, 04/08) ------------------------
   Horno encendido con la pizza a la izquierda y albahaca con aceite a la
   derecha, como en su maqueta. Las dos fotos traen una viñeta clara en los
   bordes (son PNG generados): se recorta con un `scale` dentro de un
   contenedor con overflow y se funde en negro con máscara, para que no
   aparezca ni un borde gris sobre el fondo. Ninguna se amplía por encima de
   su tamaño nativo (1400 y 1100 px de origen). */
.hero-scena{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.scena-foto{ position:absolute; top:0; bottom:0; display:block; overflow:hidden; }
.scena-foto img{
  width:100%; height:100%; object-fit:cover;
  /* sin transform:scale — el recorte de la viñeta se hace ya en el WebP,
     porque escalar por CSS AMPLÍA la foto y la puerta lo caza (con razón) */
  filter:saturate(.96) contrast(1.04) brightness(.9);
}
.scena-sx{
  left:0; width:min(52vw, 860px);
  -webkit-mask-image:linear-gradient(90deg, #000 0 42%, rgba(0,0,0,.55) 68%, transparent 96%);
  mask-image:linear-gradient(90deg, #000 0 42%, rgba(0,0,0,.55) 68%, transparent 96%);
}
.scena-sx img{ object-position:60% 60%; }
.scena-dx{
  right:0; width:min(34vw, 560px);
  -webkit-mask-image:linear-gradient(270deg, #000 0 34%, rgba(0,0,0,.5) 62%, transparent 94%);
  mask-image:linear-gradient(270deg, #000 0 34%, rgba(0,0,0,.5) 62%, transparent 94%);
}
.scena-dx img{ object-position:52% 55%; }
/* el velo: el centro se oscurece para que el titular mande siempre */
.scena-velo{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 44% 64% at 50% 46%, rgba(11,10,8,.93), rgba(11,10,8,.62) 60%, transparent 86%),
    linear-gradient(180deg, rgba(11,10,8,.82) 0%, transparent 22%, transparent 62%, rgba(11,10,8,.92) 100%);
}
@media (max-width:760px){
  /* en móvil la albahaca estorba al texto; el horno se queda de fondo suave */
  .scena-dx{ display:none; }
  .scena-sx{ width:100%; }
  .scena-sx img{ object-position:56% 62%; }
  .scena-sx{
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.5) 0 40%, #000 100%);
    mask-image:linear-gradient(180deg, rgba(0,0,0,.5) 0 40%, #000 100%);
  }
  .scena-velo{
    background:
      radial-gradient(ellipse 92% 50% at 50% 38%, rgba(11,10,8,.92), rgba(11,10,8,.7) 64%, rgba(11,10,8,.5) 100%),
      linear-gradient(180deg, rgba(11,10,8,.9) 0%, rgba(11,10,8,.55) 40%, rgba(11,10,8,.86) 100%);
  }
}

/* --- la voluta ornamental sobre el titular --- */
.voluta{
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  color:var(--filo); margin-bottom:1.2rem;
}
.voluta-rombo{ font-style:normal; font-size:.62rem; color:var(--rosso-gioia); line-height:1; }
.voluta svg{ width:min(280px,62vw); height:auto; }

/* --- la valoración con estrellas de relleno PARCIAL ---------------------
   4,4 de 5 = 88% de la fila. Cinco estrellas llenas dirían 5/5 y sería
   mentira (lección nº15 de la checklist). El degradado se recorta sobre el
   texto: la parte llena va en oro y el resto queda apagado. */
.hero-voto{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  flex-wrap:wrap;
  margin-top:1rem; font-size:.95rem; letter-spacing:.04em; color:var(--panna-2);
  opacity:0; transform:translateY(8px);
  transition:opacity .8s ease .3s, transform .8s ease .3s;
}
.hero-voto.is-stamped{ opacity:1; transform:none; }
.hero-voto b{ font-weight:500; font-size:1.15rem; color:var(--panna); }
.hero-voto .voto-sep{ color:var(--oro-tenue); }
.stelle-parziali{
  font-size:1.05rem; letter-spacing:.18em; line-height:1;
  background-image:linear-gradient(90deg, var(--oro) 0 88%, rgba(201,164,92,.26) 88% 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--oro);
}

/* ==========================================================================
   3. LA CINTA — desfile de las 25 pizzas (nuestra pieza; se queda)
   ========================================================================== */
.nastro{
  position:relative; z-index:1;
  background:var(--nero-2);
  border-top:1px solid var(--filo-suave); border-bottom:1px solid var(--filo-suave);
  padding:.6rem 0; overflow:hidden;
  margin-top:clamp(2.2rem,5vw,3.4rem);
}
.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-size:.98rem; letter-spacing:.12em; color:var(--panna);
  white-space:nowrap; padding-right:.6rem;
}
.ticker-run i{ font-style:normal; color:var(--rosso-gioia); font-size:.5em; vertical-align:.32em; margin:0 .6rem; }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } }

/* ==========================================================================
   4. ANDAMIAJE DE SECCIÓN — capítulo editorial (Gucci: "/ 01")
   ========================================================================== */
.sez{ position:relative; padding:clamp(3.6rem,8vw,6.2rem) clamp(1rem,4vw,2rem); }
.sez-testa{ position:relative; z-index:1; max-width:var(--wrap-stretto); margin:0 auto clamp(2.2rem,5vw,3.2rem); text-align:center; }

.capitolo{
  display:block; font-style:italic; font-size:.9rem; letter-spacing:.3em;
  color:var(--oro-tenue); margin-bottom:1rem;
}
/* título flanqueado por filetes que corren hacia los márgenes */
.sez-titolo{ display:flex; align-items:center; gap:clamp(1rem,3vw,2rem); font-size:clamp(1.9rem,4.8vw,3.2rem); letter-spacing:.02em; }
.sez-titolo::before,.sez-titolo::after{ content:""; flex:1; height:1px; background:var(--filo-suave); min-width:1.5rem; }
.sez-titolo em{ font-style:italic; }
.sez-titolo .oro-lamina{ padding-right:.06em; } /* que la cursiva no roce el clip */

.sez-deck{ margin:1.2rem auto 0; max-width:56ch; color:var(--panna-2); font-size:clamp(.98rem,2vw,1.06rem); }
.sez-hint{ font-size:.82rem; font-style:italic; letter-spacing:.06em; color:var(--panna-3); margin-top:.6rem; }

/* ==========================================================================
   5. LA CASA — partida por UNA hairline vertical central (Gucci)
   ========================================================================== */
.casa-griglia{
  position:relative; max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem);
}
.casa-griglia::before{
  content:""; position:absolute; left:50%; top:.6rem; bottom:.6rem; width:1px;
  background:rgba(139,113,65,.28);
}
/* la foto como LÁMINA: doble filete, nunca a sangre */
.lamina-quadro{ position:relative; margin:0; padding:10px; border:1px solid var(--filo-suave); align-self:center; }
.lamina-quadro::after{
  content:"◆"; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  font-size:.6rem; color:var(--oro-tenue); background:var(--nero); padding:0 .5rem; line-height:1;
}
.lamina-quadro img{ width:100%; filter:saturate(.92) contrast(1.06) brightness(.96); border:1px solid rgba(139,113,65,.22); }
.lamina-quadro figcaption{
  padding:.7rem .2rem 0; font-style:italic; font-size:.82rem; color:var(--panna-3); text-align:center;
}
.casa-testo{ align-self:center; }
.casa-testo p{ color:var(--panna-2); }
.capitale::first-letter{
  float:left; font-size:3.4em; line-height:.82;
  padding:.06em .12em 0 0; color:var(--oro);
}
.citazione{
  margin:1.8rem 0; padding:0;
  font-style:italic; font-size:clamp(1.2rem,2.5vw,1.5rem);
  color:var(--oro-chiaro); line-height:1.45; border:0; text-align:left;
}
.firma{ font-size:.8rem; letter-spacing:.24em; text-transform:uppercase; color:var(--panna-3); }

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

/* ==========================================================================
   6. LA SELEZIONE — maqueta de Nacho (04/08): cuadro a la izquierda con la
   firma y el sello, y a la derecha la lista con ingredientes y el botón.
   Los ingredientes son los REALES de la carta (mnu.i.NN): los de la maqueta
   estaban inventados (la Mamá Zory no lleva stracciatella ni pesto).
   ========================================================================== */
.selezione{ position:relative; }
.selezione-dx{ min-width:0; }
.selezione-griglia{
  position:relative; z-index:1;
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.35fr);
  gap:clamp(2rem,4.5vw,4rem); align-items:start;
}

/* --- el cuadro: filete de oro con esquinas cortadas y rombos --- */
.quadro{
  position:relative; margin:0; padding:14px;
  border:1px solid var(--filo);
  clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),
                    calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px),0 22px);
}
.quadro img{
  width:100%; height:auto; display:block;
  border:1px solid rgba(139,113,65,.3);   /* doble filete, como la maqueta */
  filter:saturate(.96) contrast(1.05) brightness(.94);
}
/* los rombos que cabalgan el marco arriba y abajo */
.quadro::before,.quadro::after{
  content:"\25C6"; position:absolute; left:50%; transform:translateX(-50%);
  font-size:.72rem; line-height:1; color:var(--oro);
  background:var(--nero); padding:0 .5rem;
}
.quadro::before{ top:-7px; }
.quadro::after{ bottom:-7px; }

/* --- la firma manuscrita y el sello --- */
.selezione-firma{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.4rem; margin-top:clamp(1.4rem,2.6vw,2.2rem);
}
.manoscritto{
  margin:0; font-family:var(--mano); font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.25; color:var(--oro-chiaro); letter-spacing:.01em;
}
.firma-sigillo{ color:var(--oro-tenue); flex:none; line-height:0; }

/* --- la lista --- */
.carta-lista{ list-style:none; margin:0; padding:0; }
.carta-lista li{
  display:grid;
  grid-template-columns:auto minmax(0,10.5rem) minmax(0,1fr) auto;
  align-items:baseline; gap:.6rem 1.2rem;
  padding:.9rem .2rem;
  border-bottom:1px solid rgba(139,113,65,.22);
}
.carta-lista li:first-child{ border-top:1px solid rgba(139,113,65,.22); }
.cl-num{ font-style:italic; font-size:.8rem; color:var(--oro-tenue); }
.cl-nome{ font-size:clamp(1.02rem,1.5vw,1.2rem); letter-spacing:.03em; color:var(--panna); }
.cl-ingr{ font-size:.86rem; line-height:1.5; color:var(--panna-2); }
.cl-prezzo{
  font-size:1.02rem; color:var(--oro); white-space:nowrap; text-align:right;
  font-variant-numeric:tabular-nums lining-nums;
}

/* --- el botón grande --- */
.sfoglia{
  display:flex; align-items:center; justify-content:center; gap:clamp(1rem,2.4vw,2rem);
  margin-top:clamp(1.6rem,3vw,2.4rem); padding:1.15rem 1.6rem;
  border:1px solid var(--filo); text-decoration:none;
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),
                    calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px);
  transition:background .35s ease, border-color .35s ease;
}
.sfoglia:hover{ background:var(--oro-vetro); border-color:var(--oro); }
.sfoglia-testo{ text-align:center; }
.sfoglia-testo b{
  display:block; font-weight:500; font-size:1rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--oro);
}
.sfoglia-testo small{ display:block; margin-top:.2rem; font-size:.82rem; color:var(--panna-2); }
.sfoglia-ramo,.sfoglia-freccia{ color:var(--oro-tenue); flex:none; line-height:0; }
.sfoglia-ramo svg{ width:40px; height:24px; }
.sfoglia-freccia svg{ width:40px; height:12px; transition:transform .35s ease; }
.sfoglia:hover .sfoglia-freccia svg{ transform:translateX(5px); }

.selezione-nota{
  margin:1rem 0 0; text-align:center;
  font-style:italic; font-size:.9rem; color:var(--panna-3);
}

@media (max-width:900px){
  .selezione-griglia{ grid-template-columns:1fr; gap:2.2rem; }
  .selezione-sx{ max-width:520px; margin:0 auto; width:100%; }
  /* en pantalla estrecha los ingredientes bajan a su propia línea, debajo
     del nombre, y el precio se queda arriba a la derecha */
  .carta-lista li{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:.25rem .9rem;
  }
  .cl-ingr{ grid-column:2 / -1; font-size:.82rem; }
}
@media (max-width:520px){
  .selezione-firma{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .sfoglia{ flex-direction:column; gap:.7rem; }
  .sfoglia-ramo{ display:none; }
}

/* ==========================================================================
   7. LA FIRMA — la línea de carta a escala monumental (pieza propia)
   ========================================================================== */
.piatto-firma{
  position:relative;
  background:var(--nero-2);
  border-top:1px solid var(--filo-suave); border-bottom:1px solid var(--filo-suave);
  padding:clamp(3.2rem,7vw,5.4rem) clamp(1rem,4vw,2rem);
  text-align:center; overflow:hidden;
}
.firma-dentro{ position:relative; z-index:1; max-width:var(--wrap-stretto); margin:0 auto; }
.firma-occhiello{
  margin:0 0 1.8rem; font-size:.8rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--oro);
}
.firma-riga{ display:flex; align-items:baseline; gap:1rem; text-align:left; margin-bottom:1.4rem; }
.firma-nome{ font-size:clamp(2.1rem,6vw,4rem); line-height:1.05; letter-spacing:.01em; white-space:nowrap; }
.firma-punti{ flex:1 1 auto; min-width:2rem; height:0; border-bottom:1px dotted rgba(139,113,65,.55); transform:translateY(-.35em); }
.firma-prezzo{ font-size:clamp(1.4rem,3.2vw,2.2rem); color:var(--oro); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums; }
.firma-ingr{
  margin:0 0 1.2rem; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--panna-2); line-height:2; text-align:left;
}
.firma-desc{ margin:0 auto 1.8rem; max-width:58ch; color:var(--panna-2); }

@media (max-width:620px){
  .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; }
}

/* ==========================================================================
   8. LE SPECIALITÀ — tres cuadros con placa (láminas + data-pizza)
   ========================================================================== */
.specialita-griglia{
  position:relative; z-index:1;
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.4rem,3vw,2.4rem);
}
.piatto{
  position:relative; cursor:pointer;
  border:1px solid rgba(139,113,65,.28); padding:10px;
  background:transparent;
  transition:border-color .4s ease, transform .4s ease;
}
.piatto:hover,.piatto:focus-visible{ border-color:var(--filo); transform:translateY(-4px); }
.piatto-foto{ position:relative; overflow:hidden; aspect-ratio:4/3; border:1px solid rgba(139,113,65,.22); }
.piatto-foto img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.94) contrast(1.05) brightness(.97);
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
.piatto:hover .piatto-foto img{ transform:scale(1.04); }

.ingredienti{
  position:absolute; inset:0; background:rgba(11,10,8,.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-weight:500; font-size:.76rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--oro); margin-bottom:.5rem;
}
.ingredienti-linea{ margin:0; max-width:26ch; text-align:center; font-size:.92rem; line-height:1.8; color:var(--panna); }

.piatto-testo{ padding:1.1rem .6rem .5rem; text-align:center; }
.piatto-testo h3{ font-size:1.35rem; letter-spacing:.04em; }
.piatto-prezzo{ display:block; margin:.4rem 0 .55rem; font-size:1.05rem; color:var(--oro); font-variant-numeric:tabular-nums; }
.piatto-testo p{ margin:0; font-size:.92rem; color:var(--panna-2); }
.piatto-tocca{
  display:block; margin-top:.8rem; font-style:italic; font-size:.78rem;
  letter-spacing:.1em; color:var(--panna-3);
}

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

/* ==========================================================================
   9. GALLERIA — láminas flotando en el negro (LPM), lightbox intacto
   ========================================================================== */
.galleria{
  position:relative; z-index:1;
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1rem,2.4vw,1.8rem);
}
.galleria figure{
  margin:0; position:relative; cursor:zoom-in;
  border:1px solid rgba(139,113,65,.28); padding:8px; background:transparent;
  transition:border-color .4s ease;
}
.galleria figure:hover{ border-color:var(--filo); }
.galleria .dominante{ grid-column:span 2; grid-row:span 2; }
.galleria .g-foto{ display:block; overflow:hidden; aspect-ratio:4/3; border:1px solid rgba(139,113,65,.22); }
.galleria .dominante .g-foto{ height:100%; aspect-ratio:auto; }
.galleria img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.92) contrast(1.06) brightness(.96);
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.galleria figure:hover img{ transform:scale(1.05); }
.galleria figcaption{
  padding:.6rem .2rem 0; font-style:italic; font-size:.8rem; line-height:1.5;
  color:var(--panna-3); text-align:center;
}
@media (max-width:900px){
  .galleria{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .galleria .dominante{ grid-column:span 2; grid-row:span 1; }
  .galleria .dominante .g-foto{ aspect-ratio:4/3; height:auto; }
}

/* lightbox */
.lente{
  position:fixed; inset:0; z-index:500;
  background:rgba(6,5,4,.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(--filo);
  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:.9rem; font-style:italic; color:var(--panna-2); margin:0; }
.lente-chiudi{
  position:absolute; top:clamp(.9rem,3vw,1.9rem); right:clamp(.9rem,3vw,1.9rem);
  background:transparent; border:1px solid var(--filo); color:var(--oro);
  width:46px; height:46px; font-size:1.25rem; line-height:1; cursor:pointer;
  font-family:var(--serif);
}
.lente-chiudi:hover{ background:var(--oro-vetro); }

/* ==========================================================================
   10. DICONO DI NOI — maqueta de Nacho (04/08)
   Título "Grazie", la nota con estrellas parciales, cuatro celdas de cifras
   con icono en círculo, las reseñas como fichas enmarcadas y el botón a
   Google. Las cuatro cifras son verificables y las reseñas son las DOS
   reales: la tercera de la maqueta estaba inventada.
   ========================================================================== */
/* la placa: fondo de panel entre filetes (heredado de la v4) */
.placa{ background:var(--nero-2); border-top:1px solid var(--filo-suave); border-bottom:1px solid var(--filo-suave); }
/* Nacho: "muy larga". Medida en 1339px (1,5 pantallas) y recortada a base
   de datos, no a ojo: menos aire de sección, fotos en tira cinematográfica,
   iconos y separaciones más apretados. */
.grazie{ padding-top:clamp(2.4rem,5vw,3.8rem); padding-bottom:clamp(2.4rem,5vw,3.8rem); }
.grazie .sez-titolo{ font-size:clamp(2.3rem,5.4vw,3.8rem); }
.grazie .sez-testa{ margin-bottom:0; }

.grazie-voto{
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  flex-wrap:wrap; margin:.8rem 0 0;
}
.grazie-voto b{ font-weight:400; font-size:clamp(1.9rem,4vw,2.9rem); color:var(--panna); }
.grazie-voto .stelle-parziali{ font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:.1em; }
.grazie-su{ font-size:clamp(1rem,2vw,1.3rem); color:var(--panna-2); }
.grazie .sez-deck{ margin-top:.5rem; }
.grazie .voluta{ margin-top:1.1rem; margin-bottom:0; }

/* --- las cuatro celdas, separadas por reglas verticales --- */
.cifre-fila{
  position:relative; z-index:1;
  max-width:var(--wrap); margin:clamp(1.4rem,2.6vw,2rem) auto 0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
}
.cifra-cella{ text-align:center; padding:0 clamp(.6rem,2vw,1.6rem); }
.cifra-cella + .cifra-cella{ border-left:1px solid rgba(139,113,65,.28); }
.cifra-icona{ display:block; margin:0 auto .6rem; width:34px; height:34px; color:var(--oro); }
.cifra-icona svg{ width:100%; height:100%; display:block; }
.cifra-cella b{
  display:block; font-weight:400; font-size:clamp(1.5rem,3vw,2.1rem);
  color:var(--oro); line-height:1.1;
}
.cifra-cella .cifra-parola{ font-size:clamp(.95rem,1.8vw,1.15rem); letter-spacing:.18em; text-transform:uppercase; }
.cifra-cella span{
  display:block; margin-top:.35rem; font-size:.76rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--panna-2);
}
@media (max-width:820px){
  .cifre-fila{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.3rem 0; }
  .cifra-cella:nth-child(3){ border-left:0; }
}
@media (max-width:560px){
  /* en el móvil las cuatro celdas eran 459px de los 1712 de la sección: se
     compactan (icono más pequeño y cifras más juntas) sin perder ninguna */
  .cifra-icona{ width:26px; height:26px; margin-bottom:.4rem; }
  .cifra-cella b{ font-size:1.35rem; }
  .cifra-cella .cifra-parola{ font-size:.9rem; }
  .cifra-cella span{ font-size:.72rem; letter-spacing:.14em; margin-top:.25rem; }
  .cifre-fila{ gap:1rem 0; }
}
@media (max-width:420px){
  /* a 1 columna se harían 4 filas altísimas: se mantienen DOS columnas */
  .cifre-fila{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cifra-cella:nth-child(3){ border-left:0; }
}

/* --- las fichas de reseña --- */
.grazie .recensioni{
  position:relative; z-index:1;
  max-width:900px; margin:clamp(1.6rem,3vw,2.2rem) auto 0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,2.6vw,2rem);
}
.grazie .recensione{
  margin:0; padding:10px 10px 1.2rem; text-align:center;
  border:1px solid var(--filo-suave);
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),
                    calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  background:rgba(18,16,12,.55);
}
.rec-foto{ display:block; overflow:hidden; aspect-ratio:2.6/1; border:1px solid rgba(139,113,65,.28); }
.rec-foto img{ width:100%; height:100%; object-fit:cover; filter:saturate(.94) contrast(1.05) brightness(.9); }
.rec-stelle{ display:block; margin:.8rem 0 .6rem; color:var(--oro); font-size:.95rem; letter-spacing:.24em; }
.grazie .recensione blockquote{
  margin:0 auto; max-width:40ch; font-style:italic;
  font-size:clamp(.95rem,1.8vw,1.05rem); line-height:1.7; color:var(--panna);
}
.grazie .recensione figcaption{
  margin-top:.9rem; font-style:normal; font-size:.78rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--panna-3);
}
@media (max-width:700px){
  .grazie .recensioni{ grid-template-columns:1fr; max-width:460px; }
}

/* --- el botón a Google --- */
.grazie-cta{
  max-width:660px; margin-top:clamp(1.2rem,2.4vw,1.8rem); margin-left:auto; margin-right:auto;
  position:relative; z-index:1;
}
.grazie-cta .sfoglia-ramo svg{ width:26px; height:26px; }
.grazie-cta .sfoglia-testo b{ font-size:.92rem; letter-spacing:.2em; }

/* ==========================================================================
   11. PER ORDINARE — dos celdas partidas por la hairline; el rojo manda aquí
   ========================================================================== */
.ordinare-due{
  position:relative; z-index:1;
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem);
}
.ordinare-due::before{
  content:""; position:absolute; left:50%; top:.4rem; bottom:.4rem; width:1px;
  background:rgba(139,113,65,.28);
}
.modo{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 clamp(.2rem,2vw,1.4rem); }
.modo h3{ font-size:1.5rem; letter-spacing:.14em; text-transform:uppercase; }
.modo h3 + p{ margin-top:.8rem; color:var(--panna-2); max-width:44ch; }
.passi{ list-style:none; margin:.4rem 0 1.6rem; padding:0; width:100%; max-width:400px; }
.passi li{
  display:flex; gap:1rem; align-items:baseline; justify-content:flex-start;
  text-align:left; padding:.7rem 0;
  border-bottom:1px solid rgba(139,113,65,.22);
}
.passi li:last-child{ border-bottom:0; }
.passi b{ font-style:italic; font-weight:400; font-size:.95rem; color:var(--oro); min-width:2.2ch; }
.passi span{ font-size:.95rem; color:var(--panna-2); }
.passi a{ color:var(--oro-chiaro); text-decoration:none; border-bottom:1px solid var(--filo); }
.modo .biglietto{ margin-top:auto; }

.avviso{
  position:relative; z-index:1;
  max-width:var(--wrap-stretto); margin:clamp(2.2rem,5vw,3.2rem) auto 0;
  text-align:center; padding-top:1.6rem;
  border-top:1px solid rgba(139,113,65,.22);
}
.avviso b{
  display:block; font-weight:500; font-size:.8rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--oro); margin-bottom:.7rem;
}
.avviso p{ max-width:56ch; margin:0 auto 1rem; color:var(--panna-2); font-size:.95rem; }
.avviso a{ color:var(--oro-chiaro); text-decoration:none; border-bottom:1px solid var(--filo); font-size:.9rem; letter-spacing:.08em; }

@media (max-width:860px){
  .ordinare-due{ grid-template-columns:1fr; }
  .ordinare-due::before{ display:none; }
  .modo + .modo{ margin-top:2.6rem; padding-top:2.6rem; border-top:1px solid rgba(139,113,65,.22); }
}

/* ==========================================================================
   12. DOVE SIAMO
   ========================================================================== */
.dove-griglia{
  position:relative; z-index:1;
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.8rem,4vw,3.2rem); align-items:start;
}
.targa{ border:1px solid var(--filo-suave); padding:1.7rem 1.4rem 1.5rem; text-align:center; position:relative; }
.targa::after{
  content:"◆"; position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  font-size:.6rem; color:var(--oro-tenue); background:var(--nero); padding:0 .5rem; line-height:1;
}
.targa-city{ display:block; font-size:.76rem; letter-spacing:.32em; text-transform:uppercase; color:var(--oro); }
.targa-via{ display:block; margin:.7rem 0 .2rem; font-weight:400; font-size:1.45rem; color:var(--panna); line-height:1.25; }
.targa-num{ display:block; font-size:2.4rem; color:var(--oro); line-height:1.1; }
.targa-sub{ display:block; margin-top:.6rem; font-style:italic; font-size:.8rem; color:var(--panna-3); }

.orario{ margin-top:1.4rem; border:1px solid rgba(139,113,65,.28); padding:1.5rem 1.4rem; }
.orario h3{ font-size:1rem; letter-spacing:.26em; text-transform:uppercase; text-align:center; margin-bottom:1.1rem; }
.appeso{
  display:flex; flex-direction:column; align-items:center; gap:.1rem;
  border:1px solid var(--verde); padding:.6rem 1.2rem; margin:0 auto 1.3rem; width:max-content;
}
.appeso .ap-stato{ font-weight:500; font-size:.88rem; letter-spacing:.26em; color:var(--verde); }
.appeso .ap-sub{ font-style:italic; font-size:.76rem; letter-spacing:.1em; color:var(--panna-2); }
.appeso.is-chiuso{ border-color:var(--rosso-gioia); }
.appeso.is-chiuso .ap-stato{ color:var(--rosso-gioia); }

.ora{ display:flex; align-items:baseline; gap:.6rem; padding:.5rem 0; font-size:.94rem; }
.ora span:first-child{ color:var(--panna); }
.ora span:last-child{ color:var(--oro-chiaro); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ora .leader{ flex:1; height:0; border-bottom:1px dotted rgba(139,113,65,.45); transform:translateY(-.3em); }
.ora.chiuso span:last-child{ color:var(--panna-3); font-style:italic; }
.ora-nota{ margin:1rem 0 0; font-style:italic; font-size:.82rem; color:var(--panna-3); text-align:center; }

.dove-dati{ list-style:none; margin:1.5rem 0; padding:0; }
.dove-dati li{ padding:.7rem 0; border-bottom:1px solid rgba(139,113,65,.22); font-size:.94rem; color:var(--panna-2); }
.dove-dati .k{ display:block; font-size:.74rem; letter-spacing:.26em; 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,44vw,420px);
  filter:grayscale(.55) contrast(1.05) brightness(.82);
  border:1px solid rgba(139,113,65,.28);
}
.mappa-btn{ margin-top:1rem; }
.dove-mappa .lamina-quadro{ margin-top:1.5rem; }

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

/* ==========================================================================
   13. PIE — 4 columnas con reglas verticales + el sello como lacre (Gucci/EMP)
   ========================================================================== */
.pie{
  border-top:1px solid var(--filo-suave);
  padding:clamp(2.8rem,6vw,4.2rem) clamp(1rem,4vw,2rem) 2rem;
  text-align:center; position:relative; z-index:1;
}
.pie-sigillo{ display:flex; justify-content:center; margin-bottom:2rem; color:var(--oro); }
.pie-colonne{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  text-align:center;
}
.pie-col{ padding:0 1.4rem; }
.pie-col + .pie-col{ border-left:1px solid rgba(139,113,65,.28); }
.pie-col .k{
  display:block; font-size:.74rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--oro); margin-bottom:.8rem;
}
.pie-col a,.pie-col span{
  display:block; font-size:.92rem; color:var(--panna-2);
  text-decoration:none; padding:.22rem 0;
}
/* lo anidado vuelve a línea: sin esto "Hoy" y el horario partían en dos */
.pie-col span span,.pie-col span b,.pie-col a span{ display:inline; padding:0; }
.pie-col span b{ font-weight:500; color:var(--panna); }
.pie-col a:hover{ color:var(--oro-chiaro); }
.colofone{
  margin:2.4rem auto 0; max-width:var(--wrap);
  padding-top:1.4rem; border-top:1px solid rgba(139,113,65,.22);
  font-style:italic; font-size:.8rem; letter-spacing:.1em; color:var(--panna-3);
}
.colofone a{ color:var(--oro); text-decoration:none; margin-left:1rem; font-style:normal; }
@media (max-width:860px){
  .pie-colonne{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.8rem 0; }
  .pie-col:nth-child(3){ border-left:0; }
}
@media (max-width:480px){
  .pie-colonne{ grid-template-columns:1fr; }
  .pie-col{ border-left:0!important; }
}

/* ==========================================================================
   14. FAJA MÓVIL — el rojo de la acción vive aquí abajo
   ========================================================================== */
.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(11,10,8,.97); border-top:1px solid var(--filo-suave);
  }
  .faja a{
    padding:.9rem .3rem; text-align:center; text-decoration:none;
    color:var(--oro-chiaro); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  }
  .faja a + a{ border-left:1px solid rgba(139,113,65,.28); }
  .faja .faja-rossa{ background:var(--rosso-azione); color:var(--panna); }
  body{ padding-bottom:3.3rem; }

  /* REGLA DEL ROJO ÚNICO EN MÓVIL: la faja fija ya pone EL rojo de la acción
     en todas las vistas; los billetes rojos del contenido ceden y vuelven al
     contorno de oro — si no, habría dos rojos en pantalla a la vez. */
  .biglietto-rosso{ background:var(--filo); }
  .biglietto-rosso .b-in{ background:var(--nero); }
  .biglietto-rosso b{ color:var(--oro); }
  .biglietto-rosso small{ color:var(--panna-3); }
  .biglietto-rosso:hover{ background:var(--oro); }
}

/* ==========================================================================
   15. SIPARIO — el preludio (1 vez por sesión, tope 1,4 s)
   ========================================================================== */
.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-size:clamp(1.8rem,6vw,3.2rem); letter-spacing:.3em; text-transform:uppercase;
  line-height:1.2; 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; letter-spacing:.06em; color:var(--oro); display:block; font-size:.72em; }
@keyframes sale{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.sipario-filo{
  height:1px; width:min(58vw,320px); margin:1.3rem auto 0;
  background:var(--filo-orizzontale); transform:scaleX(0);
  animation:apre 1s cubic-bezier(.19,1,.22,1) .35s both;
}
@keyframes apre{ to{ transform:scaleX(1); } }
.sipario-sub{
  margin:1rem 0 0; font-style:italic; font-size:.82rem; letter-spacing:.3em;
  color:var(--panna-3); opacity:0; animation:sale .8s ease .6s both;
}
@media (prefers-reduced-motion: reduce){ .sipario{ display:none; } }

/* ==========================================================================
   16. AJUSTES FINOS
   ========================================================================== */
@media (max-width:560px){
  body{ font-size:16px; }
  .hero-cta .biglietto{ width:100%; }
  .hero-cta .biglietto .b-in{ width:100%; }
  .sez{ padding-left:1rem; padding-right:1rem; }
  .sez-titolo{ flex-direction:column; gap:.8rem; }
  .sez-titolo::before,.sez-titolo::after{ width:64px; flex:none; }
}


/* ==========================================================================
   LOGO DE LA CASA EN LA CABECERA (11/08/2026 · agrandado esa misma tarde)
   Nacho: "aquí quiero el logo grande, que queda feo el pequeño". Iba de la
   mano de dos cosas medidas, no elegidas a ojo:

   1) EL FONDO. El PNG original no tiene alfa: es arte sobre NEGRO MACIZO, y
      el fondo del propio archivo llega a L=31 en las bandas de arriba y abajo.
      Detrás de la testata el body pinta un degradado dorado, así que a 58 px
      la caja no se veía pero a 112 px se vería un rectángulo oscuro. Se usa
      una versión recortada al contenido y con alfa (logo-piccola-alfa.webp,
      314x260). De paso: 1,4 MB -> 45 KB. El PNG original se conserva.
   2) EL ALTO DE LA CABECERA, que estaba medido a propósito para que el hero
      entre entero en la primera pantalla a 1366x768. Al subir el logo la
      cabecera pasa de 143 a ~176 px, y esos ~30 px se le devuelven quitando
      relleno al hero por arriba (ver --hero-sopra en la sección 2).
      Si se vuelve a tocar el alto del logo, hay que volver a medir las dos.
   ========================================================================== */
.mancheta-logo{ display:block; line-height:0; }
.mancheta-logo img{
  height:clamp(84px,7.6vw,112px); width:auto; display:block; margin:0 auto;
}
@media (max-width:1180px){ .mancheta-logo img{ height:62px; } }
@media (max-width:560px){  .mancheta-logo img{ height:52px; } }

/* ==========================================================================
   LOGO DE LA CASA EN LA CABECERA (11/08/2026)
   La cabecera vuelve a ser NEGRA por decisión de Nacho: el crema chocaba con
   el ambiente oscuro del resto. Contrapartida asumida: el "ITALIA" y la cinta
   del logo son texto oscuro y sobre negro no se leen.
   Alto fijo para no crecer: la cabecera estaba medida para que el hero entre
   en la primera pantalla a 1366 y 1440.
   ========================================================================== */
.mancheta-logo{ display:block; line-height:0; }
.mancheta-logo img{ height:clamp(92px,8vw,118px); width:auto; display:block; margin:0 auto; }
@media (max-width:1180px){ .mancheta-logo img{ height:70px; } }
@media (max-width:560px){  .mancheta-logo img{ height:58px; } }