/* ============================================================================
   STILE 5 — ESSENZIALE · colori e caratteri
   Quasi nero, un solo accento (vermiglio), un solo carattere in tre pesi.
   Tutto il resto è vuoto: è il vuoto che fa lo stile, non le decorazioni.
   ========================================================================== */

:root{
  --bg:        #0b0b0c;
  --bg-2:      #131315;
  --bg-3:      #171719;
  --bg-4:      #1e1e21;
  --ember:     #d94f3d;   /* l'unico accento */
  --ember-2:   #e8735f;
  --flame:     #d94f3d;
  --brick:     #7a2a20;
  --gold:      #d94f3d;   /* qui il ruolo "oro" è lo stesso vermiglio */
  --gold-soft: #eae7e4;   /* i prezzi restano bianchi: l'accento si usa col contagocce */
  --basil:     #d94f3d;
  --cream:     #f2f1ef;
  --muted:     #8b8b8f;
  --line:      rgba(255,255,255,.10);
  --shadow:    0 30px 70px rgba(0,0,0,.72);

  --gold-rgb:  217,79,61;
  --ember-rgb: 217,79,61;
  --ink-rgb:   8,8,9;

  --overlay-bg: rgba(9,9,10,.985);
  --btn-bg:     rgba(255,255,255,.07);
  --dot-bg:     rgba(255,255,255,.22);
  --photo-veil: rgba(11,11,12,.96);

  /* il riquadro Specialità qui non luccica: è una riga con un filo di accento */
  --spec-bg:   linear-gradient(180deg, rgba(217,79,61,.10), rgba(217,79,61,.04));
  --spec-ink:  #f2f1ef;
  --spec-sub:  #8b8b8f;

  --font-display: "Inter", system-ui, sans-serif;
  --font-head:    "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
}

/* niente aloni, niente trama: fondo pieno */
body{ background:var(--bg); }
body::before{ display:none; }

/* molta aria in testa */
.hero{ padding-top:64px; padding-bottom:10px; }
.hero-name{ font-weight:300; font-size:clamp(2.6rem,12vw,3.6rem); letter-spacing:.12em; text-shadow:none; }
/* in base.css il selettore è ".hero .kicker": per superarlo serve lo stesso peso */
.hero .kicker{ color:var(--ember); letter-spacing:.3em; font-size:.66rem; font-weight:500; padding-left:.3em; }
.foot{ border-top:0; }        /* c'è già il filo dell'ultima categoria: due sarebbero un errore */
.hero .sub{ color:var(--muted); letter-spacing:.3em; font-size:.72rem; font-weight:500; }
.hero .flame-rule{ width:28px; height:1px; background:var(--ember); box-shadow:none; margin:26px auto 18px; }

/* le righe della home */
.cat-btn .label{ font-weight:400; letter-spacing:.14em; text-transform:uppercase; font-size:1rem; }
.cat-btn .count{ letter-spacing:.06em; font-size:.68rem; color:var(--muted); }
.cat-btn .arrow{ color:var(--ember); opacity:.75; }

/* Specialità: nessun luccichio, nessuna pulsazione */
.feature.specialita{
  border:1px solid rgba(217,79,61,.35);
  animation:riseIn .5s backwards;        /* via il bagliore pulsante */
  min-height:0; padding:18px;
}
.feature.specialita .shine, .feature.specialita .spark, .feature.specialita::before{ display:none; }
.feature.specialita .feat-title{ font-weight:400; font-size:1.1rem; letter-spacing:.16em; text-transform:uppercase; text-shadow:none; }
.feature.specialita .feat-sub{ letter-spacing:.06em; text-transform:none; }
.feature.specialita .feat-ico{ font-size:1.3rem; filter:none; }

/* IL MEDAGLIONE — qui è tutto quello che si vede al posto della foto:
   un cerchio sottile, il simbolo dentro, niente alone. */
html[data-foto="no"] .card .photo{ background:var(--bg-2); }
.card .photo .fallback::before{
  background:none;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}
.card .photo .fallback::after{ display:none; }
.card.no-photo .photo .fallback{ filter:grayscale(.15); }

/* i testi della carta */
.card{ border-color:rgba(255,255,255,.08); }
.card .body h3{ font-weight:400; letter-spacing:.02em; }
.card .body .kick{ color:var(--ember); letter-spacing:.24em; }
.card .body .spec-kick{ text-shadow:none; }
.card .seal{ display:none; }
.ov-title{ font-weight:400; letter-spacing:.1em; }
.overlay.pages .card .body h3{ font-weight:300; letter-spacing:.01em; }
.overlay.pages .card .price-inline{ background:none; color:var(--cream); box-shadow:none; padding:0; font-weight:400; font-size:1.3rem; }