/* ============================================================
   TEMA — unico punto in cui vivono i token visivi del sito.
   Prima erano duplicati nel :root di index/menu/prenota/info.

   Tre livelli, in ordine di precedenza crescente:
     1. :root                    l'aspetto predefinito del template
                                  (l'insegna smaltata: non e' un preset,
                                  e' quello che vede un sito appena nato)
     2. [data-preset="..."]      preset scelto dal ristorante
     3. style dell'elemento html  override dei singoli colori,
                                  scritti da brand.js dalle impostazioni

   I token non sono solo colori: portano anche la FORMA (raggi, spessore
   dei bordi, riempimenti) e i SEGNI tipografici. Serve perche' l'aspetto
   predefinito del template e quello di un ristorante che ha scelto una
   combinazione devono poter essere due disegni diversi, non lo stesso
   disegno ricolorato — e l'impaginato e' condiviso da tutti i siti.

   I caratteri stanno nel sito (assets/fonts, dichiarati in fonts.css), non
   su Google: aggiungere una famiglia vuol dire metterla in FAMIGLIE di
   console/scarica-font.mjs e rilanciarlo. Il browser scarica un font solo se
   qualcosa lo usa davvero, quindi un sito che non lo nomina non lo paga.

   Nei preset chiari --panel e --line devono passare al nero
   trasparente: in bianco sparirebbero sul fondo.
   ============================================================ */

/* PREDEFINITO — insegna smaltata.
   Il linguaggio delle targhe smaltate dei bar e delle trattorie: un campo
   di colore pieno, lettere spesse color latte, una cornice sottile un po'
   dentro il bordo. Niente fotografie: il colore e il nome bastano, ed e'
   proprio quello che serve a un sito consegnato prima che il cliente
   porti le sue immagini. */
:root{
  --bg:#125e46;                      /* verde smalto: un colore, non un quasi-nero */
  --panel:rgba(0,0,0,.20);           /* la placca e' incassata nel campo */
  --line:rgba(244,240,228,.42);      /* la cornice si deve vedere: e' struttura */
  --text:#f4f0e4;                    /* bianco latte, non bianco */
  --muted:#cfe0d5;
  --accent:#f6cd54;                  /* ocra */
  --accent2:#fae6a8;
  /* Le stesse tinte in rgb. Servono perche' nelle pagine l'accento compare
     centinaia di volte come velo trasparente — rgba(...,.12) — e una var()
     di colore non si puo' spezzare in canali. */
  --accent-rgb:246,205,84;
  --accent2-rgb:250,230,168;
  --su-accento:#123527;              /* il testo scritto sopra un fondo d'accento */
  --ombra-logo:none;                 /* su un campo piatto il marchio non galleggia */
  --gold:#f6cd54;
  /* Archivo e Archivo Black sono la stessa famiglia: il nome scritto grosso
     e il testo che lo accompagna hanno lo stesso disegno di lettera, come su
     una targa fatta da una mano sola. E non e' il carattere di stef. */
  --font-display:'Archivo Black',system-ui,sans-serif;
  --font-sans:'Archivo',system-ui,sans-serif;
  --font-mono:'Space Mono',monospace;   /* resta per le cifre: li' serve la larghezza fissa */

  /* forma */
  --raggio:16px;
  --bordo:2px;
  --riempimento:var(--panel);        /* placca piatta, non sfumata */
  --ombra:none;
  --alza:0;                          /* di quanto sale una placca al passaggio */

  /* segni: nel disegno predefinito il testo si regge da solo */
  --etichetta-font:var(--font-sans);
  --etichetta-transform:none;
  --etichetta-spaziatura:.01em;
  --etichetta-peso:700;
  --etichetta-larga:.06em;           /* la riga sotto il nome: qui e' una firma, non un occhiello */
  --bagliore:0 0 0;                  /* niente lampadine: su una targa smaltata il pallino e' stampato */
  --punti:none;                      /* i · attorno alla riga d'apertura */
  --numeri:none;                     /* i "01 —" davanti alle scelte */
  --frecce:none;                     /* le → in coda ai link */
  --cornice:14px;                    /* quanto dentro il bordo sta la cornice */
  --cornice-bordo:2px;               /* 0 = nessuna cornice */
  --velo:.35;                        /* poco: il campo dev'essere piatto, non sfumato */
  /* Il velo sopra il video del menu'. Su un campo pieno basta un'ombra
     leggera: e' li' per far leggere il nome, non per fare notte. */
  --velo-hero:radial-gradient(75% 60% at 50% 45%, rgba(0,0,0,.10), rgba(0,0,0,.30) 100%);
  --alone:none;                      /* l'alone al centro della scena */
  --braci:none;                      /* le braci volanti: solo dove c'e' la brace */
  --nastro-moto:none;                /* il nastro di parole: fermo */
  --nastro-a-capo:wrap;
  --nastro-larghezza:auto;
  --nastro-sfumatura:none;
  --velatura:rgba(0,0,0,.22);        /* barre e pillole: piu' scure del campo */
  --velatura-forte:rgba(0,0,0,.42);
  /* Superfici opache: i campi di un modulo e i pannelli che stanno sopra
     la pagina (tendine, finestre). Prima erano scritte a mano nelle
     pagine, sempre nere: su un fondo chiaro erano buchi. */
  --campo:#0f4c38;
  --sfondo-alto:#0e4433;
  --ombra-testo:none;                /* serve sopra una foto, non su un campo pieno */
}

/* braceria — brace su fondo carbone.
   Combinazione 'braceria': il disegno scuro e cinematografico, con i segni
   tipografici che porta con se'. E' l'aspetto di chi lo ha gia' scelto: qui
   ogni token torna al valore che aveva prima che il predefinito cambiasse. */
[data-preset="braceria"]{
  --bg:#0b0806;
  --panel:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.10);
  --text:#f4ece2;
  --muted:#a99a8b;
  --accent:#e7401b;
  --accent2:#ff7a3c;
  --accent-rgb:231,64,27;
  --accent2-rgb:255,122,60;
  --su-accento:#fff;
  --ombra-logo:drop-shadow(0 10px 40px rgba(0,0,0,.85));
  --gold:#d9a441;
  --font-display:'Fraunces',serif;
  --font-sans:'Space Grotesk',sans-serif;
  --font-mono:'Space Mono',monospace;

  /* forma e segni: il disegno di prima */
  --raggio:18px;
  --bordo:1px;
  --riempimento:linear-gradient(165deg,var(--panel),rgba(255,255,255,.012));
  --ombra:0 30px 70px -30px rgba(var(--accent-rgb),.4);
  --alza:-6px;
  --etichetta-font:var(--font-mono);
  --etichetta-transform:uppercase;
  --etichetta-spaziatura:.5em;
  --etichetta-peso:400;
  --etichetta-larga:.42em;
  --bagliore:0 0 12px;
  --punti:inline;
  --numeri:inline;
  --frecce:inline;
  --cornice:0;
  --cornice-bordo:0;
  --velo:.8;
  --velo-hero:radial-gradient(75% 60% at 50% 45%, rgba(11,8,6,.30), rgba(11,8,6,.78) 100%);
  --braci:block;
  --nastro-moto:scroll 28s linear infinite;
  --nastro-a-capo:nowrap;
  --nastro-larghezza:max-content;
  --nastro-sfumatura:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  --velatura:rgba(11,8,6,.55);
  --velatura-forte:rgba(11,8,6,.92);
  --campo:#16110c;
  --sfondo-alto:#14100b;
  --ombra-testo:0 2px 14px rgba(0,0,0,.9);
  --alone:radial-gradient(80% 60% at 50% 28%, var(--panel), transparent 72%);
}

/* pizzeria — forno a legna: fondo crema, rosso pomodoro */
[data-preset="pizzeria"]{
  --bg:#fbf6ee;
  --schema-colori:light;             /* campi e controlli nativi chiari: l'unico preset su fondo chiaro */
  --panel:rgba(0,0,0,.035);
  --line:rgba(0,0,0,.14);
  --text:#23180f;
  --muted:#5d4c3b;
  --accent:#b3081f;
  --accent2:#8a4213;
  --accent-rgb:179,8,31;
  --accent2-rgb:138,66,19;
  --su-accento:#fff;
  --ombra-logo:drop-shadow(0 10px 40px rgba(0,0,0,.85));
  --gold:#7a5a12;
  --font-display:'Fraunces',serif;
  --font-sans:'Space Grotesk',sans-serif;
  --font-mono:'Space Mono',monospace;

  /* forma e segni: il disegno di prima */
  --raggio:18px;
  --bordo:1px;
  --riempimento:linear-gradient(165deg,var(--panel),rgba(255,255,255,.012));
  --ombra:0 30px 70px -30px rgba(var(--accent-rgb),.4);
  --alza:-6px;
  --etichetta-font:var(--font-mono);
  --etichetta-transform:uppercase;
  --etichetta-spaziatura:.5em;
  --etichetta-peso:400;
  --etichetta-larga:.42em;
  --bagliore:0 0 12px;
  --punti:inline;
  --numeri:inline;
  --frecce:inline;
  --cornice:0;
  --cornice-bordo:0;
  --velo:.8;
  --velo-hero:radial-gradient(75% 60% at 50% 45%, rgba(11,8,6,.30), rgba(11,8,6,.78) 100%);
  --braci:block;
  --nastro-moto:scroll 28s linear infinite;
  --nastro-a-capo:nowrap;
  --nastro-larghezza:max-content;
  --nastro-sfumatura:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  --velatura:rgba(11,8,6,.55);
  --velatura-forte:rgba(11,8,6,.92);
  --campo:#ffffff;
  --sfondo-alto:#fffdf9;
  --ombra-testo:0 2px 14px rgba(0,0,0,.9);
  --alone:radial-gradient(80% 60% at 50% 28%, var(--panel), transparent 72%);
}

/* pesce — blu notte e sabbia */
[data-preset="pesce"]{
  --bg:#071a26;
  --panel:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.13);
  --text:#eaf3f7;
  --muted:#9db6c2;
  --accent:#3fb6d8;
  --accent2:#6fd3ea;
  --accent-rgb:63,182,216;
  --accent2-rgb:111,211,234;
  --su-accento:#fff;
  --ombra-logo:drop-shadow(0 10px 40px rgba(0,0,0,.85));
  --gold:#d8c48b;
  --font-display:'Fraunces',serif;
  --font-sans:'Space Grotesk',sans-serif;
  --font-mono:'Space Mono',monospace;

  /* forma e segni: il disegno di prima */
  --raggio:18px;
  --bordo:1px;
  --riempimento:linear-gradient(165deg,var(--panel),rgba(255,255,255,.012));
  --ombra:0 30px 70px -30px rgba(var(--accent-rgb),.4);
  --alza:-6px;
  --etichetta-font:var(--font-mono);
  --etichetta-transform:uppercase;
  --etichetta-spaziatura:.5em;
  --etichetta-peso:400;
  --etichetta-larga:.42em;
  --bagliore:0 0 12px;
  --punti:inline;
  --numeri:inline;
  --frecce:inline;
  --cornice:0;
  --cornice-bordo:0;
  --velo:.8;
  --velo-hero:radial-gradient(75% 60% at 50% 45%, rgba(11,8,6,.30), rgba(11,8,6,.78) 100%);
  --braci:block;
  --nastro-moto:scroll 28s linear infinite;
  --nastro-a-capo:nowrap;
  --nastro-larghezza:max-content;
  --nastro-sfumatura:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  --velatura:rgba(11,8,6,.55);
  --velatura-forte:rgba(11,8,6,.92);
  --campo:#0c2433;
  --sfondo-alto:#0a2130;
  --ombra-testo:0 2px 14px rgba(0,0,0,.9);
  --alone:radial-gradient(80% 60% at 50% 28%, var(--panel), transparent 72%);
}

/* bistrot — scuro minimal, senza serif nei titoli */
[data-preset="bistrot"]{
  --bg:#12100e;
  --panel:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.11);
  --text:#f0ece6;
  --muted:#a8a199;
  --accent:#5cb87f;
  --accent2:#86d5a3;
  --accent-rgb:92,184,127;
  --accent2-rgb:134,213,163;
  --su-accento:#fff;
  --ombra-logo:drop-shadow(0 10px 40px rgba(0,0,0,.85));
  --gold:#c9a961;
  --font-display:'Space Grotesk',sans-serif;
  --font-sans:'Space Grotesk',sans-serif;
  --font-mono:'Space Mono',monospace;

  /* forma e segni: il disegno di prima */
  --raggio:18px;
  --bordo:1px;
  --riempimento:linear-gradient(165deg,var(--panel),rgba(255,255,255,.012));
  --ombra:0 30px 70px -30px rgba(var(--accent-rgb),.4);
  --alza:-6px;
  --etichetta-font:var(--font-mono);
  --etichetta-transform:uppercase;
  --etichetta-spaziatura:.5em;
  --etichetta-peso:400;
  --etichetta-larga:.42em;
  --bagliore:0 0 12px;
  --punti:inline;
  --numeri:inline;
  --frecce:inline;
  --cornice:0;
  --cornice-bordo:0;
  --velo:.8;
  --velo-hero:radial-gradient(75% 60% at 50% 45%, rgba(11,8,6,.30), rgba(11,8,6,.78) 100%);
  --braci:block;
  --nastro-moto:scroll 28s linear infinite;
  --nastro-a-capo:nowrap;
  --nastro-larghezza:max-content;
  --nastro-sfumatura:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  --velatura:rgba(11,8,6,.55);
  --velatura-forte:rgba(11,8,6,.92);
  --campo:#191614;
  --sfondo-alto:#17140f;
  --ombra-testo:0 2px 14px rgba(0,0,0,.9);
  --alone:radial-gradient(80% 60% at 50% 28%, var(--panel), transparent 72%);
}

/* ---- piatto esaurito oggi (menu' pubblico e cameriere) ----
   Resta al suo posto e leggibile — il cliente deve sapere che c'e' ma oggi
   no — senza il "+" e un po' spento. Colori dai token: vale per ogni preset. */
.soldout{
  display:inline-block;align-self:flex-start;margin-top:6px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);color:var(--text);background:var(--panel);
  font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.card.esaurito .photo,.card.esaurito .price,.card.esaurito .desc,.card.esaurito .meta,.card.esaurito .stats{opacity:.45}
.card.esaurito .price{text-decoration:line-through}
.list-row.esaurito .li-name,.list-row.esaurito .li-price,.list-row.esaurito .li-desc{opacity:.5}
.list-row.esaurito .li-price{text-decoration:line-through}
.list-row.esaurito .soldout{margin-top:0;margin-right:8px;align-self:center}

/* virgo — carbone, crema e oro.
   Nato per Virgò, pizzeria e cucina ad Andria. Il disegno viene dal menù del
   locale ("Granata scuro e oro"): fondo carbone #1a1a1a, voci in maiuscolo
   color crema, prezzi e filetti in oro spento, titoli di sezione in corsivo,
   le etichette su una pillola granata. Il logo è la firma bianca con forchetta
   e cucchiaio: sta sul carbone senza cornici né ombre colorate.

   Titoli in Cormorant Garamond (corsivo per le sezioni, come il menù di carta),
   testo e voci in Jost, geometrico come il Garet del menù. Come Ultra per
   poldo, i due file stanno nella cartella del locale (assets/img/caratteri/):
   il <link> dei font è di tutti i siti e gli altri non li scaricano.
   Sottoinsieme "latin" di Google Fonts (U+0000-00FF, accenti italiani).
   Cormorant Garamond © Christian Thalmann, Jost © Owen Earl:
   SIL Open Font License 1.1. */
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/assets/img/caratteri/cormorant-garamond-latin.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('/assets/img/caratteri/cormorant-garamond-italic-latin.woff2') format('woff2');
  font-weight:300 700;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Jost';
  src:url('/assets/img/caratteri/jost-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
[data-preset="virgo"]{
  --bg:#1a1a1a;                      /* il carbone del menù, campionato */
  --panel:rgba(232,220,194,.035);
  --line:rgba(232,220,194,.16);      /* i filetti grigi fra le voci */
  --text:#e8dcc2;                    /* crema delle voci */
  --muted:#b5a68a;                   /* le descrizioni, color sabbia */
  --accent:#c9a66b;                  /* oro spento: prezzi, filetti, bottoni */
  --accent2:#e3c99a;                 /* oro chiaro: titoli e focus */
  --accent-rgb:201,166,107;
  --accent2-rgb:227,201,154;
  --su-accento:#1a1a1a;
  --ombra-logo:drop-shadow(0 12px 30px rgba(0,0,0,.7));
  --gold:#c9a66b;
  --font-display:'Cormorant Garamond',Garamond,Georgia,serif;
  --font-sans:'Jost',system-ui,sans-serif;
  --font-mono:'Jost',system-ui,sans-serif;   /* le cifre con tabular-nums, vedi sotto */

  --raggio:3px;                      /* il menù di carta ha spigoli vivi */
  --bordo:1px;
  --riempimento:linear-gradient(180deg,rgba(232,220,194,.04),rgba(232,220,194,.012));
  --ombra:0 26px 50px -30px rgba(0,0,0,.9);
  --alza:-3px;
  --etichetta-font:var(--font-sans);
  --etichetta-transform:uppercase;
  --etichetta-spaziatura:.32em;
  --etichetta-peso:500;
  --etichetta-larga:.34em;
  --bagliore:0 0 10px;
  --punti:inline;
  --numeri:none;                     /* il menù non numera le portate */
  --frecce:inline;
  --cornice:14px;                    /* i filetti d'oro agli angoli del menù */
  --cornice-bordo:1px;
  --velo:.72;
  --velo-hero:radial-gradient(75% 62% at 50% 42%, rgba(26,26,26,.45), rgba(26,26,26,.88) 100%);
  --alone:none;
  --braci:none;
  --nastro-moto:scroll 36s linear infinite;
  --nastro-a-capo:nowrap;
  --nastro-larghezza:max-content;
  --nastro-sfumatura:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  --velatura:rgba(26,26,26,.6);
  --velatura-forte:rgba(20,20,20,.95);
  --campo:#232220;
  --sfondo-alto:#1f1e1d;
  --ombra-testo:0 2px 14px rgba(0,0,0,.85);

  /* Tinte private del disegno virgo: esistono solo in questo preset. */
  --granata:#4a2c2a;                 /* la pillola delle sezioni nel menù di carta */
  --granata-rgb:74,44,42;
}

/* ============================================================
   I SEGNI DI VIRGÒ — corsivi, filetti d'oro, pillole granata.
   Tutto sotto [data-preset="virgo"]: è disegno del locale, non del template.
   Lo verifica console/test/preset-virgo.test.mjs.
   ============================================================ */

/* home e testata del menù: la sala del locale, scurita, con la cornice
   sottile d'oro un po' dentro il bordo */
[data-preset="virgo"] .scene::after{
  content:"";position:absolute;inset:var(--cornice);pointer-events:none;
  border:var(--cornice-bordo) solid rgba(var(--accent-rgb),.45);
  border-radius:var(--raggio);
}
[data-preset="virgo"] .kicker,
[data-preset="virgo"] .brand-hero .kicker{color:var(--accent2)}

/* titoli: corsivo, come "Antipasti" e "Piatti caldi" sul menù di carta */
[data-preset="virgo"] .ccard h2,
[data-preset="virgo"] .menu-intro h2,
[data-preset="virgo"] .sec-head h2,
[data-preset="virgo"] .menu-cta h2,
[data-preset="virgo"] .ord-title,
[data-preset="virgo"] .ord-modal-box h3,
[data-preset="virgo"] .err-popup-box h3{font-style:italic;font-weight:500;letter-spacing:.01em;color:var(--accent2)}

/* la sala è una foto chiara e piena di dettagli (sedie, luci viola): il velo
   del template la lascia accesa al centro, proprio dietro le porte. Qui la
   foto scende tutta verso il carbone, un po' di più al centro e in basso */
[data-preset="virgo"] .veil{
  opacity:1;
  background:
    linear-gradient(to bottom, rgba(26,26,26,.35), rgba(26,26,26,.1) 30%, rgba(26,26,26,.55) 62%, var(--bg)),
    radial-gradient(70% 55% at 50% 58%, rgba(20,20,20,.55), transparent 100%),
    rgba(26,26,26,.5);
}
/* le due porte della home: tavolette carbone quasi piene, con la foto che
   dietro si sfoca invece di mescolarsi al testo */
[data-preset="virgo"] .ccard{
  border-color:rgba(var(--accent-rgb),.35);
  background:linear-gradient(180deg,rgba(30,29,28,.9),rgba(22,22,22,.92));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 24px 48px -28px rgba(0,0,0,.95);
}
[data-preset="virgo"] .ccard:hover{border-color:var(--accent)}
[data-preset="virgo"] .ccard .ic{color:var(--accent)}

/* il nastro: la pillola granata del menù, allungata */
[data-preset="virgo"] .marquee{
  background:var(--granata);
  border-top:1px solid rgba(var(--accent-rgb),.55);border-bottom:1px solid rgba(var(--accent-rgb),.55);
}
[data-preset="virgo"] .marquee span{color:var(--text)}
[data-preset="virgo"] footer{border-top:1px solid rgba(var(--accent-rgb),.4)}

/* menu: le sezioni senza numero, sopra un filetto d'oro */
[data-preset="virgo"] .sec-num{display:none}
/* "Birre alla spina", non "Birre Alla Spina": il nome si scrive come nel menù */
[data-preset="virgo"] .sec-head h2{text-transform:none}
[data-preset="virgo"] .sec-head .rule{background:linear-gradient(90deg,rgba(var(--accent-rgb),.7),rgba(var(--accent-rgb),.08))}
[data-preset="virgo"] .catnav a.active{background:var(--granata);border-color:rgba(var(--accent-rgb),.6);color:var(--text)}

/* le voci: maiuscolo crema, prezzo in oro, come sul menù di carta */
[data-preset="virgo"] .card .name h3,
[data-preset="virgo"] .list-row .li-name{
  font-family:var(--font-sans);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text);
}
[data-preset="virgo"] .card .name h3{font-size:15px;line-height:1.35}
[data-preset="virgo"] .card .price,
[data-preset="virgo"] .list-row .li-price{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}
[data-preset="virgo"] .card .desc{color:var(--muted)}
[data-preset="virgo"] .card{border-color:rgba(232,220,194,.12)}
[data-preset="virgo"] .card:hover{border-color:rgba(var(--accent-rgb),.5)}
/* un piatto senza foto è una voce del menù, non una cornice vuota con la
   macchina fotografica: la foto c'è solo dove il locale l'ha data */
[data-preset="virgo"] .card .photo:has(> .ph-icon){display:none}
/* senza foto il "+" sta nell'angolo in alto, dove c'è il prezzo: il testo si
   ferma prima */
[data-preset="virgo"] .card:has(.photo > .ph-icon) .card-body{padding-right:58px}
/* le carte con la foto sono alte quanto tre voci: occupano tre righe e le
   voci corte riempiono i buchi, invece di stirarsi accanto a una foto */
[data-preset="virgo"] .grid{grid-auto-flow:row dense;align-items:start}
[data-preset="virgo"] .grid .card:has(.photo img[src]){grid-row:span 3;align-self:stretch}
/* la terza pillola dell'introduzione ("+€6 tartufo nero estivo") è scritta
   fissa nel template e parla della carta di un altro locale */
[data-preset="virgo"] .stats-line .stat:nth-child(3){display:none}

[data-preset="virgo"] .hero-cta{border-color:var(--accent)}
[data-preset="virgo"] .menu-cta{border-color:rgba(var(--accent-rgb),.45)}

/* poldo — insegna roadhouse.
   Nato per El Tapas De Poldo, pub con l'accento texano ad Andria. Il disegno
   viene dal badge del locale: un campo rosso pieno con le lettere bianche.
   Home e testata del menù SONO quel campo, con la raggiera di un'insegna da
   strada che parte da dietro il logo; il resto del sito scende in una notte di
   rosso scurissimo, per leggere il menù al tavolo la sera. Senape per bottoni,
   prezzi e stelle, turchese solo per "aperto adesso". Sul campo rosso il testo
   è sempre bianco latte: la senape lì non regge il contrasto a testo piccolo.
   Titoli in Ultra, lo slab grasso dei cartelli dipinti; etichette in Barlow
   Condensed maiuscolo, come le targhe; cifre in DM Mono.

   Ultra non passa dal <link> dei font, che è di tutti i siti: il file sta nella
   cartella del locale (assets/img/caratteri/ultra-latin.woff2) e il browser lo
   scarica solo dove un titolo lo usa, cioè soltanto con questo preset. Un sito
   senza quel file ricade su Rockwell/Georgia.
   Il file è il sottoinsieme "latin" di Google Fonts (U+0000-00FF, accenti
   italiani compresi). Il primo pubblicato era "latin-ext", senza le lettere
   normali: i titoli ricadevano su Georgia. Il nome è cambiato apposta, perché
   /assets/img/* resta in cache un anno (immutable) e allo stesso indirizzo il
   file giusto non sarebbe mai arrivato a chi aveva già visitato il sito.
   Ultra © Astigmatic, SIL Open Font License 1.1. */
@font-face{
  font-family:'Ultra';
  src:url('/assets/img/caratteri/ultra-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
[data-preset="poldo"]{
  --bg:#2a0a0c;                      /* notte di rosso scurissimo */
  --panel:rgba(255,244,236,.05);
  --line:rgba(255,244,236,.2);       /* filetti bianchi dipinti, non ottone */
  --text:#fff4ec;                    /* il bianco delle lettere del badge */
  --muted:#e9c6bd;                   /* tinto dal rosso, non grigio */
  --accent:#f2b632;                  /* senape: bottoni, prezzi, stelle */
  --accent2:#ffd36b;                 /* senape chiara: evidenze e focus */
  --accent-rgb:242,182,50;
  --accent2-rgb:255,211,107;
  --su-accento:#5a0a0e;              /* sulla senape l'inchiostro rosso scuro dell'insegna */
  --ombra-logo:drop-shadow(0 18px 28px rgba(40,4,6,.55));
  --gold:#f2b632;
  --font-display:'Ultra',Rockwell,Georgia,serif;
  --font-sans:'Barlow',system-ui,sans-serif;
  --font-mono:'DM Mono',monospace;   /* le cifre restano a larghezza fissa */

  --raggio:4px;                      /* spigoli da cartello dipinto */
  --bordo:2px;
  --riempimento:linear-gradient(180deg,rgba(255,244,236,.06),rgba(0,0,0,.14));
  --ombra:0 22px 40px -24px rgba(0,0,0,.85);
  --alza:-4px;
  --etichetta-font:'Barlow Condensed',var(--font-sans);
  --etichetta-transform:uppercase;
  --etichetta-spaziatura:.24em;
  --etichetta-peso:600;
  --etichetta-larga:.26em;
  --bagliore:0 0 10px;
  --punti:inline-block;              /* le stelle attorno alla riga d'apertura (vedi sotto) */
  --numeri:none;                     /* niente "01 —": un cartello non numera le sue porte */
  --frecce:inline;
  --cornice:16px;                    /* la cornice dell'insegna, un po' dentro il bordo */
  --cornice-bordo:3px;               /* doppio filetto bianco (vedi regole più sotto) */
  --velo:.5;                         /* scurisce il campo ai bordi e lo fa scendere nella notte */
  --velo-hero:radial-gradient(78% 64% at 50% 44%, rgba(42,10,12,0), rgba(42,10,12,.6) 100%);
  --alone:none;
  --braci:none;                      /* niente scintille: qui la brace non c'è */
  --nastro-moto:scroll 34s linear infinite;
  --nastro-a-capo:nowrap;
  --nastro-larghezza:max-content;
  --nastro-sfumatura:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  --velatura:rgba(42,10,12,.62);
  --velatura-forte:rgba(26,5,7,.95);
  --campo:#3a1013;
  --sfondo-alto:#330d10;
  --ombra-testo:0 2px 12px rgba(40,4,6,.55);

  /* Tinte private del disegno poldo: esistono solo in questo preset. */
  --insegna:#b01016;                 /* il rosso del badge, campionato dal logo */
  --insegna-rgb:176,16,22;
  --raggi-rgb:124,10,16;             /* i raggi più scuri della raggiera */
  --turchese:#3fb8ac;
  --turchese-rgb:63,184,172;
  --stella:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.6 7.3L12 17.6l-6.2 3.9 1.6-7.3L2 9.5l7.1-.6z'/%3E%3C/svg%3E");
}

/* ============================================================
   I SEGNI DI POLDO — campo rosso, raggiera, filetti bianchi, stelle.
   Tutto sotto [data-preset="poldo"]: è disegno del locale, non del template.
   Le pagine scrivono i loro <style> dopo questo file, quindi ogni regola qui
   ha in più la specificità dell'attributo e vince senza !important. Dove la
   pagina usa già due classi (.brand-hero .kicker) la regola ne nomina una in più.
   Lo verifica console/test/preset-poldo.test.mjs.
   ============================================================ */

/* sotto la scena e nelle pagine lunghe: la notte rossa, con la luce
   dell'insegna che cola dall'alto */
[data-preset="poldo"] body{
  background-image:radial-gradient(110% 70% at 50% 0%, rgba(var(--insegna-rgb),.22), transparent 65%);
}
/* prenota/info portano già il loro velo fisso: qui prende la stessa luce */
[data-preset="poldo"] body::before{
  background:
    radial-gradient(90vw 55vh at 50% -12%, rgba(var(--insegna-rgb),.42), transparent 62%),
    var(--bg);
}

/* home e testata del menù: il campo del badge, con la raggiera dell'insegna
   centrata dietro il logo. Sostituisce anche il poster: il campo rosso è già
   l'immagine. */
[data-preset="poldo"] .scene{
  background-color:var(--insegna);
  background-image:
    radial-gradient(34% 30% at 50% 42%, rgba(255,150,110,.22), transparent 72%),
    radial-gradient(120% 100% at 50% 42%, transparent 52%, rgba(60,4,8,.42) 100%),
    repeating-conic-gradient(from -3.5deg at 50% 42%, rgba(var(--raggi-rgb),.5) 0deg 7deg, transparent 7deg 15deg);
  background-size:auto;
  background-position:0 0;
  background-repeat:no-repeat;
}
[data-preset="poldo"] .scene::before{content:none}
/* la cornice dell'insegna: doppio filetto bianco dipinto. Vale per la home e
   per la testata del menù: qui ci sono anche content e posizione, perché il
   menù non ha una regola sua per questo pseudo. */
[data-preset="poldo"] .scene::after{
  content:"";position:absolute;inset:var(--cornice);pointer-events:none;
  border:var(--cornice-bordo) double rgba(255,244,236,.78);
  border-radius:var(--raggio);
}
/* il badge diventa una targa: bordo bianco, un filo di rosso, un filetto e
   un'ombra vera. Rosso su rosso, senza, sparirebbe nel campo. */
[data-preset="poldo"] .logo img,
[data-preset="poldo"] .brand-hero img{
  border-radius:50%;
  box-shadow:0 0 0 5px #fff4ec, 0 0 0 9px var(--insegna), 0 0 0 11px rgba(255,244,236,.55);
}
[data-preset="poldo"] .hud{
  background:linear-gradient(to bottom, rgba(90,8,12,.9), rgba(120,10,16,.4) 70%, transparent);
}
[data-preset="poldo"] .hud span{color:var(--text)}
/* la riga d'apertura: bianca sul rosso, fra due stelle senape */
[data-preset="poldo"] .kicker,
[data-preset="poldo"] .brand-hero .kicker{color:var(--text)}
[data-preset="poldo"] .kicker::before,
[data-preset="poldo"] .kicker::after{
  content:"";display:inline-block;width:.95em;height:.95em;margin:0 12px;vertical-align:-.12em;
  background:var(--accent);
  -webkit-mask:var(--stella) center/contain no-repeat;mask:var(--stella) center/contain no-repeat;
}
[data-preset="poldo"] .scrollhint,
[data-preset="poldo"] .video-loading{color:var(--text)}
[data-preset="poldo"] .status{
  color:var(--text);border-color:rgba(255,244,236,.5);background:rgba(60,4,8,.5);
}
[data-preset="poldo"] .status .now-txt{color:var(--text)}
/* "aperto adesso" è l'unico posto del turchese: si nota perché è solo lì */
[data-preset="poldo"] .status.open .dot{background:var(--turchese);box-shadow:var(--bagliore) rgba(var(--turchese-rgb),.9)}
[data-preset="poldo"] .langbtn{background:rgba(60,4,8,.55);border-color:rgba(255,244,236,.45)}

/* le due porte della home: cartelli rosso scuro con bordo bianco e un
   filetto dipinto dentro */
[data-preset="poldo"] .ccard{
  background:linear-gradient(180deg,#3c0e12,#2a0a0c);
  border:2px solid rgba(255,244,236,.85);border-radius:var(--raggio);
  box-shadow:0 24px 44px -26px rgba(40,4,6,.9);
}
[data-preset="poldo"] .ccard::before{background:radial-gradient(120% 120% at 20% 0%, rgba(var(--accent-rgb),.14), transparent 55%)}
[data-preset="poldo"] .ccard::after{
  content:"";position:absolute;inset:6px;border:1px solid rgba(255,244,236,.28);
  border-radius:2px;pointer-events:none;transition:border-color .3s;
}
[data-preset="poldo"] .ccard:hover{border-color:var(--accent);box-shadow:0 30px 50px -26px rgba(40,4,6,.95)}
[data-preset="poldo"] .ccard:hover::after{border-color:rgba(var(--accent-rgb),.6)}
[data-preset="poldo"] .ccard .ic{color:var(--accent)}
[data-preset="poldo"] .ccard .go{border-top:1px solid rgba(255,244,236,.18)}
/* Ultra ha un peso solo ed è larga: niente grassetto finto, un filo d'aria */
[data-preset="poldo"] .ccard h2,
[data-preset="poldo"] .menu-intro h2,
[data-preset="poldo"] .sec-head h2,
[data-preset="poldo"] .menu-cta h2,
[data-preset="poldo"] .ord-title,
[data-preset="poldo"] .ord-modal-box h3,
[data-preset="poldo"] .err-popup-box h3{font-weight:400;letter-spacing:.01em;line-height:1.1}

/* il nastro: lo striscione bianco di un roadhouse, con le parole in rosso */
[data-preset="poldo"] .marquee{
  background:#fff4ec;
  border-top:3px double var(--insegna);border-bottom:3px double var(--insegna);
}
[data-preset="poldo"] .marquee span{color:var(--insegna);font-weight:700}
[data-preset="poldo"] .marquee span b{color:rgb(var(--raggi-rgb))}
[data-preset="poldo"] footer{
  border-top:3px double rgba(255,244,236,.3);
  background:linear-gradient(to bottom, rgba(var(--insegna-rgb),.1), transparent);
}
/* l'emblema del footer: la stessa targa della home, con un'ombra vera invece
   dell'alone d'accento */
[data-preset="poldo"] footer .emblem{
  border-radius:50%;
  box-shadow:0 0 0 3px #fff4ec;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.55));
}

/* menu: la barra delle categorie è la mensola sotto l'insegna */
[data-preset="poldo"] .catnav{
  background:linear-gradient(180deg,#34090d,#260709);
  border-bottom:3px double rgba(255,244,236,.3);
}
[data-preset="poldo"] .catnav a{border-radius:var(--raggio)}
[data-preset="poldo"] .catnav a.active{background:var(--accent);border-color:var(--accent);color:var(--su-accento)}
[data-preset="poldo"] .catnav .catnav-book{background:transparent;border-color:rgba(255,244,236,.55);color:var(--text)}
[data-preset="poldo"] .catnav .catnav-book:hover{background:var(--accent);border-color:var(--accent);color:var(--su-accento)}
[data-preset="poldo"] .catnav-hint{background:rgba(38,7,9,.92)}
[data-preset="poldo"] .menu-intro .stat{border-radius:var(--raggio)}
/* le intestazioni di sezione: il numero se ne va (un menù da pub non numera
   le portate), resta il nome sopra un doppio filetto senape */
[data-preset="poldo"] .sec-num{display:none}
[data-preset="poldo"] .sec-head .rule{
  height:5px;background:none;
  border-top:1px solid rgba(var(--accent-rgb),.65);border-bottom:1px solid rgba(var(--accent-rgb),.28);
}
/* le carte dei piatti: tavolette scure con lo spigolo del cartello */
[data-preset="poldo"] .card{border-radius:var(--raggio);border-color:rgba(255,244,236,.14)}
[data-preset="poldo"] .card:hover{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 22px 44px -26px rgba(0,0,0,.9)}
/* a metà menù, il cartello della prenotazione: lo stesso campo del badge */
[data-preset="poldo"] .menu-cta{
  border:2px solid rgba(255,244,236,.85);border-radius:var(--raggio);
  background:
    repeating-conic-gradient(from -3.5deg at 50% 0%, rgba(var(--raggi-rgb),.45) 0deg 7deg, transparent 7deg 15deg),
    var(--insegna);
  box-shadow:inset 0 0 0 6px var(--insegna), inset 0 0 0 7px rgba(255,244,236,.35), 0 26px 50px -30px rgba(0,0,0,.9);
}
[data-preset="poldo"] .menu-cta p{color:var(--text)}
[data-preset="poldo"] .hero-cta{
  border-radius:var(--raggio);border:2px solid var(--accent);
  background:var(--accent);color:var(--su-accento);font-weight:700;
  box-shadow:0 14px 26px -16px rgba(40,4,6,.9);
}
[data-preset="poldo"] .hero-cta:hover{background:var(--accent2);border-color:#fff4ec;color:var(--su-accento)}

/* menu: la lista ordinazione e la ricerca parlano la stessa lingua */
[data-preset="poldo"] .ord-add{
  background:var(--accent);color:var(--su-accento);
  border:1px solid rgba(255,244,236,.6);box-shadow:0 8px 18px -8px rgba(0,0,0,.85);
}
[data-preset="poldo"] .ord-add:hover{box-shadow:0 10px 22px -8px rgba(0,0,0,.9)}
[data-preset="poldo"] .ord-fab{background:var(--accent);color:var(--su-accento);border:2px solid #fff4ec}
[data-preset="poldo"] .ord-fab:hover{background:var(--accent2);color:var(--su-accento)}
[data-preset="poldo"] .ord-panel{background:var(--sfondo-alto);border-left:1px solid rgba(255,244,236,.2)}
[data-preset="poldo"] .psearch{border-color:rgba(255,244,236,.24)}
[data-preset="poldo"] .psearch input{color:var(--text)}

/* prenota e info: la testata è una striscia d'insegna rossa */
[data-preset="poldo"] .sticky-head{
  background:linear-gradient(180deg,var(--insegna),#8e0c12);
  border-bottom:3px double rgba(255,244,236,.55);
}
/* il badge piccolo nella testata rossa: stesso bordo bianco della home */
[data-preset="poldo"] header img{border-radius:50%;box-shadow:0 0 0 2px #fff4ec}
[data-preset="poldo"] .steps{
  background:linear-gradient(180deg,rgba(38,8,10,.97),rgba(42,10,12,.9));
  border-bottom:1px solid rgba(255,244,236,.18);
}
[data-preset="poldo"] section.card{border:2px solid rgba(255,244,236,.14);border-radius:var(--raggio)}
[data-preset="poldo"] .pstep,
[data-preset="poldo"] .cal-nav,
[data-preset="poldo"] .cal-day,
[data-preset="poldo"] .slot,
[data-preset="poldo"] .chip2,
[data-preset="poldo"] .field input,
[data-preset="poldo"] .prefix-btn,
[data-preset="poldo"] .prefix-menu,
[data-preset="poldo"] .consent,
[data-preset="poldo"] .alle,
[data-preset="poldo"] .toc a,
[data-preset="poldo"] nav.mainnav a,
[data-preset="poldo"] .langbtn{border-radius:var(--raggio)}
[data-preset="poldo"] nav.mainnav a{color:var(--text);border-color:rgba(255,244,236,.3)}
[data-preset="poldo"] nav.mainnav a.on{background:var(--accent);border-color:var(--accent);color:var(--su-accento)}
[data-preset="poldo"] .btn.next{
  background:var(--accent);border:2px solid var(--accent);color:var(--su-accento);border-radius:var(--raggio);
  box-shadow:0 12px 26px -16px rgba(0,0,0,.9);
}
[data-preset="poldo"] .btn.next:hover{background:var(--accent2);border-color:#fff4ec;color:var(--su-accento)}
[data-preset="poldo"] .cal-day.sel .dv{color:rgba(90,10,14,.8)}