/* AGRICOLA BONTEMPI (4/11/2026) · base delle pagine legali (privacy, cookie), presa dal metodo BOOTEI di Frasca; il sito usa bontempi.css.
   Origine: la base di Hostaria Frasca (26/10/2026) · impalcatura del metodo BOOTEI: reset, variabili, velo, testata, piede, le classi che chiede
   il motore (motore.js: .cap, .quinta, .giunta, .in-giunta, .battuta, [data-foglio]) e le pagine legali.
   I QUATTRO COLORI E I DUE CARATTERI SONO PROVVISORI: la chat Sito li cambia dopo la scelta della palette, cambiando SOLO queste variabili.
   Tutto il resto (sfumature, ombre, bordi) si ricava da loro con color-mix, quindi segue. Niente nero e oro. */

/* ---- CARATTERI (self-hosted, latin; provvisori: serif da insegna di trattoria + bastone grassetta per le battute larghe) ---- */
@font-face { font-family: 'Fraunces'; src: url(font/fraunces.woff2) format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url(font/fraunces-italic.woff2) format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url(font/archivo.woff2) format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  /* LA PALETTA (provvisoria) */
  --carta: #EFE7DA;        /* la carta del menu', la luce del testo sul fondo scuro */
  --inchiostro: #1A1714;   /* il testo sulla carta */
  --brace: #D9773F;        /* l'accento: la brace, l'unico colore che chiama (Prenota, link, numeri) */
  --fondo: #1A1714;
  --lino: #EFE7DA;   /* il runner della tavola: testo e battute sul fondo */
  --oro: #D9773F;    /* solo la luce della firma e delle braci, mai interfaccia */
  /* I CARATTERI (provvisori) */
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bastone: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* ricavati dai quattro: non si toccano */
  --testo-70: color-mix(in srgb, var(--carta) 74%, transparent);
  --testo-40: color-mix(in srgb, var(--carta) 42%, transparent);
  --testo-15: color-mix(in srgb, var(--carta) 15%, transparent);
  --ombra: color-mix(in srgb, var(--fondo) 62%, transparent);
  --barra: 66px;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--carta); font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.55; overflow-x: hidden; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
h1, h2, h3, p, ul, ol { margin-top: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* l'occhiello: maiuscolo spaziato, la voce "da insegna" */
.occhiello { font-family: var(--bastone); font-weight: 700; font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; margin: 0; line-height: 1.3; }

/* ---- LE BATTUTE (il modo approvato da Marco, "belle bianche larghe"): bastone 700, tracking -0.045em.
   Una alla volta: lo span entra dal basso dentro una fessura dai bordi sfumati, resta, esce in alto. Mai a opacita'. ---- */
.battuta { --fv: 36px; --fo: 48px; position: absolute; z-index: 5; left: 0; right: 0; top: 50%; margin: calc(-1 * var(--fv)) 0;
  transform: translateY(-50%);
  padding: calc(.1em + var(--fv)) calc(6vw + var(--fo)) calc(.16em + var(--fv)); overflow: hidden; text-align: center; visibility: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fv), #000 calc(100% - var(--fv)), transparent 100%), linear-gradient(90deg, transparent 0, #000 var(--fo), #000 calc(100% - var(--fo)), transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 var(--fv), #000 calc(100% - var(--fv)), transparent 100%), linear-gradient(90deg, transparent 0, #000 var(--fo), #000 calc(100% - var(--fo)), transparent 100%);
  mask-composite: intersect;
  font-family: var(--bastone); font-weight: 700; letter-spacing: -.045em; line-height: 1.0; color: #fff;
  font-size: clamp(38px, 5.8vw, 104px);
  text-shadow: 0 1px 3px color-mix(in srgb, var(--fondo) 60%, transparent), 0 0 22px color-mix(in srgb, var(--fondo) 50%, transparent), 0 0 46px color-mix(in srgb, var(--fondo) 30%, transparent); pointer-events: none; }
.battuta > span { display: block; transform: translateY(115%); will-change: transform; }
.battuta.bassa { top: auto; bottom: 9vh; transform: none; }
.battuta.alta { top: 18vh; transform: none; }

/* ---- IL BOTTONE che chiama: l'unico colore pieno del sito ---- */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: .6em; padding: .95em 1.6em; border: 1px solid currentColor; background: transparent;
  text-decoration: none; font-family: var(--bastone); font-weight: 700; font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease; white-space: nowrap; }
.bottone.brace { background: var(--brace); border-color: var(--brace); color: var(--carta); }
.bottone.brace:hover { background: var(--carta); border-color: var(--carta); color: var(--brace); }
.bottone:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---- LA TESTATA: il marchio (provvisorio, in carattere), la nav (vuota: la scrive la regia) e Prenota. Dorme col .dorme ---- */
#barra { position: fixed; top: 0; left: 0; right: 0; height: var(--barra); z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 clamp(16px, 3vw, 44px); color: var(--carta); pointer-events: none; transition: opacity .5s ease; }
#barra::before { content: ''; position: absolute; inset: 0 0 -30px; z-index: -1; pointer-events: none; transition: opacity .45s ease;
  background: linear-gradient(180deg, color-mix(in srgb, var(--fondo) 70%, transparent), color-mix(in srgb, var(--fondo) 24%, transparent) 60%, transparent); }
#barra .marchio { pointer-events: auto; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 21px; letter-spacing: .005em; line-height: 1; white-space: nowrap; }
#barra .marchio em { font-style: italic; font-weight: 400; }
#barra .nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); pointer-events: auto; margin-left: auto; }
#barra .nav:empty { display: none; }
#barra .nav a { text-decoration: none; font-family: var(--bastone); font-weight: 700; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; }
#barra .destra { display: flex; align-items: center; gap: 24px; pointer-events: auto; }
#barra .bottone { height: 44px; padding: 0 1.3em; font-size: 13px; }
/* 2/11/2026 (Marco: "il pulsante c'e' ma non e' visibile, deve come lampeggiare ed essere veramente elegante, magari lampeggia solo
   pochi secondi ogni tot"): PRENOTA ORA si accende come una brace ogni 9 secondi, per due secondi e mezzo: due respiri di luce calda
   attorno e un riflesso che gli passa sopra, poi torna fermo. Il primo dopo 4 s. Fermo col mouse sopra e per chi chiede meno movimento. */
#barra .bottone.brace { position: relative; overflow: hidden; isolation: isolate; letter-spacing: .16em;
  animation: pr-respiro 9s ease-in-out 4s infinite; }
#barra .bottone.brace::after { content: ''; position: absolute; inset: -2px; z-index: -1; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 32%, rgba(255, 226, 186, .5) 47%, rgba(255, 246, 228, .78) 50%, rgba(255, 226, 186, .5) 53%, transparent 68%);
  animation: pr-riflesso 9s cubic-bezier(.45, 0, .25, 1) 4s infinite; }
@keyframes pr-respiro {
  0%, 30%, 100% { box-shadow: 0 0 0 0 rgba(232, 92, 42, 0), 0 0 0 0 rgba(255, 160, 80, 0); filter: none; }
  7% { box-shadow: 0 0 0 4px rgba(232, 92, 42, .26), 0 0 26px 4px rgba(255, 150, 70, .55); filter: brightness(1.12); }
  14% { box-shadow: 0 0 0 1px rgba(232, 92, 42, .1), 0 0 10px 0 rgba(255, 150, 70, .2); filter: none; }
  21% { box-shadow: 0 0 0 5px rgba(232, 92, 42, .22), 0 0 32px 6px rgba(255, 150, 70, .5); filter: brightness(1.12); }
}
@keyframes pr-riflesso { 0% { transform: translateX(-130%); } 24%, 100% { transform: translateX(130%); } }
#barra .bottone.brace:hover, #barra .bottone.brace:focus-visible { animation: none; }
#barra .bottone.brace:hover::after, #barra .bottone.brace:focus-visible::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { #barra .bottone.brace, #barra .bottone.brace::after { animation: none; } }
#barra.dorme { opacity: 0; }
#barra.dorme .marchio, #barra.dorme .nav, #barra.dorme .destra { visibility: hidden; }

/* ---- IL VELO: il fondo scuro con un fiato di brace, il marchio, la riga che si riempie.
   Senza data-conta sale da solo dopo 1,2 s (motore.js) e la riga si riempie con la sua animazione; con data-conta (quando c'e' il file
   dei capitoli) lo toglie il caricamento vero e la riga la riempie il file dei capitoli. ---- */
#velo { position: fixed; inset: 0; z-index: 90; overflow: hidden; color: var(--carta); background: var(--fondo);
  display: flex; align-items: center; justify-content: center; transition: opacity .9s ease .1s, visibility 0s linear 1.1s; }
#velo::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--brace) 24%, transparent), transparent 62%), radial-gradient(ellipse at 50% 55%, transparent 40%, color-mix(in srgb, var(--fondo) 70%, transparent) 100%); }
#velo .ve-centro { position: relative; width: min(520px, 80vw); text-align: center; }
#velo .ve-marchio { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 6vw, 58px); line-height: 1; letter-spacing: -.005em; }
#velo .ve-marchio em { font-style: italic; font-weight: 400; }
#velo .ve-riga { position: relative; height: 1px; margin: 26px auto 16px; width: 62%; background: var(--testo-15); overflow: hidden; }
#velo .ve-riga b { position: absolute; inset: 0; background: var(--carta); transform-origin: 0 50%; transform: scaleX(0); }
#velo:not([data-conta]) .ve-riga b { animation: ve-riga 1.1s cubic-bezier(.3, .6, .3, 1) forwards; }
@keyframes ve-riga { to { transform: scaleX(1); } }
#velo .ve-dida { margin: 0; color: var(--testo-70); }
#velo.via { opacity: 0; visibility: hidden; }

/* ---- I CAPITOLI: la quinta sticky (il motore: M.reg, M.prog, le .giunta con .in-giunta fissa durante l'ingresso) ---- */
main > section { position: relative; }
.cap { position: relative; }
.quinta { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--fondo); }
.quinta.in-giunta { position: fixed; top: 0; left: 0; width: 100%; }
.tela-piena { position: absolute; inset: 0; width: 100%; height: 100%; }
.foto-piena { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.livello { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.solo-tel { display: none !important; }
/* l'impalcatura: finche' <main> e' vuoto resta una sala buia con una riga; sparisce da sola appena c'e' il primo capitolo */
main:empty { min-height: 64svh; display: flex; align-items: center; justify-content: center; }
main:empty::before { content: 'Il sito è in costruzione'; font-family: var(--bastone); font-weight: 700; font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--testo-40); }

/* ---- IL PIEDE: i dati veri del locale, i link legali, il bottone che riapre le preferenze ---- */
.piede { position: relative; z-index: 3; background: var(--fondo); color: var(--carta); padding: clamp(40px, 7vw, 84px) clamp(20px, 4vw, 56px) clamp(26px, 4vw, 40px);
  border-top: 1px solid var(--testo-15); }
.piede .pi-colonne { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(26px, 4vw, 64px); max-width: 1180px; margin: 0 auto; }
.piede .pi-nome { color: var(--carta); margin: 0 0 12px; font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 4vw, 44px); line-height: 1; letter-spacing: -.005em; }
.piede .pi-nome em { font-style: italic; font-weight: 400; }
.piede .occhiello { color: var(--testo-70); margin-bottom: 12px; }
.piede p { margin: 0 0 10px; color: var(--testo-70); font-size: 16.5px; line-height: 1.6; }
.piede a { color: var(--carta); text-decoration: underline; text-decoration-color: var(--testo-40); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.piede a:hover { text-decoration-color: var(--brace); }
.piede .pi-fondo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; max-width: 1180px; margin: clamp(34px, 5vw, 60px) auto 0; padding-top: 22px; border-top: 1px solid var(--testo-15); }
.piede .pi-fondo p { margin: 0; font-size: 14px; }
.piede .pi-legale { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.piede .pi-pref { background: none; border: 0; padding: 0; cursor: pointer; font-size: 14px; color: var(--testo-70); text-decoration: underline; text-decoration-color: var(--testo-40); text-underline-offset: 4px; }
.piede .pi-pref:hover { color: var(--carta); text-decoration-color: var(--brace); }
.piede .pi-pref:focus-visible, .piede a:focus-visible { outline: 2px solid var(--brace); outline-offset: 3px; }

@media (max-width: 900px) and (orientation: portrait) {
  .solo-pc { display: none !important; }
  .solo-tel { display: block !important; }
}
@media (max-width: 900px) {
  :root { --barra: 56px; }
  #barra .marchio { font-size: 18px; }
  #barra .nav { display: none; }
  #barra .bottone { height: 40px; padding: 0 1.15em; font-size: 12.5px; }
  .battuta { font-size: clamp(32px, 9.6vw, 48px); padding: calc(.1em + var(--fv)) calc(7vw + var(--fo)) calc(.16em + var(--fv)); }
  .piede .pi-colonne { grid-template-columns: 1fr; gap: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
  #velo:not([data-conta]) .ve-riga b { animation-duration: .01ms; }
}

/* =====================================================================================================================================
   LE PAGINE LEGALI (privacy.html, cookie.html) · la stessa impaginazione elegante dei siti BOOTEI (colonna stretta, occhiello,
   titolo grande, sommario, sezioni numerate, schede, tabelle), vestita coi colori e i caratteri di Frasca: carta calda, inchiostro, brace.
   La classe .carta-legale vale anche per il testo che legale.js apre sopra il sito (privacy e cookie in sovrimpressione).
   ===================================================================================================================================== */
body.pagina-legale { background: var(--carta); color: var(--inchiostro); -webkit-font-smoothing: antialiased; }
.pagina-legale .foglio { max-width: 760px; margin: 0 auto; padding: 56px 24px 96px; }
.pagina-legale .torna { display: inline-flex; align-items: center; gap: 10px; font-family: var(--bastone); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brace); text-decoration: none; padding: 10px 0; margin-bottom: 34px; }
.pagina-legale .torna svg { width: 16px; height: 16px; flex: none; }
.pagina-legale .torna:hover { color: var(--inchiostro); }
.pagina-legale .torna:focus-visible { outline: 2px solid var(--brace); outline-offset: 4px; }
.pagina-legale .occhiello { color: var(--brace); font-size: 12px; letter-spacing: .26em; margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.pagina-legale .occhiello::before { content: ''; width: 34px; height: 2px; background: var(--brace); flex: none; }
.pagina-legale h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 7.4vw, 66px); line-height: 1.02; letter-spacing: -.018em; margin: 0 0 20px; }
.pagina-legale h1 em { font-style: italic; color: var(--brace); }
.pagina-legale .piede-legale { margin-top: 64px; padding-top: 26px; border-top: 1px solid color-mix(in srgb, var(--inchiostro) 16%, transparent);
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between; align-items: center; font-size: 14px; color: color-mix(in srgb, var(--inchiostro) 60%, transparent); }
.pagina-legale .piede-legale a { text-decoration: none; }
.pagina-legale .piede-legale .voci { display: flex; gap: 22px; flex-wrap: wrap; }

.carta-legale { font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1.74; color: var(--inchiostro); --linea: color-mix(in srgb, var(--inchiostro) 16%, transparent); --testo-leg: color-mix(in srgb, var(--inchiostro) 88%, transparent); }
.carta-legale .sommario { color: color-mix(in srgb, var(--inchiostro) 78%, transparent); font-size: 19px; line-height: 1.65; font-style: italic; padding-bottom: 30px; margin: 0 0 8px; border-bottom: 1px solid var(--linea); }
.carta-legale .aggiornata { font-family: var(--bastone); font-weight: 700; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--inchiostro) 55%, transparent); margin: 16px 0 0; }
.carta-legale h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 3.4vw, 28px); line-height: 1.18; letter-spacing: -.005em; margin: 50px 0 14px; color: var(--inchiostro); }
.carta-legale h2 .num { display: inline-block; color: var(--brace); font-family: var(--bastone); font-weight: 700; font-size: 12px; letter-spacing: .14em; margin-right: 14px; vertical-align: .22em; }
.carta-legale h3 { font-family: var(--bastone); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin: 30px 0 10px; color: var(--inchiostro); }
.carta-legale p { margin: 0 0 15px; color: var(--testo-leg); }
.carta-legale p strong, .carta-legale li strong { color: var(--inchiostro); font-weight: 700; }
.carta-legale ul, .carta-legale ol { margin: 0 0 16px; padding: 0; list-style: none; }
.carta-legale li { position: relative; padding-left: 24px; margin-bottom: 10px; color: var(--testo-leg); }
.carta-legale ul > li::before { content: ''; position: absolute; left: 3px; top: .78em; width: 6px; height: 6px; background: var(--brace); border-radius: 1px; }
.carta-legale ol { counter-reset: passo; }
.carta-legale ol > li { counter-increment: passo; padding-left: 32px; }
.carta-legale ol > li::before { content: counter(passo); position: absolute; left: 0; top: .08em; font-family: var(--bastone); font-weight: 700; font-size: 13px; color: var(--brace); }
.carta-legale a { color: var(--brace); text-underline-offset: 3px; }
.carta-legale a:hover { color: var(--inchiostro); }
.carta-legale a:focus-visible { outline: 2px solid var(--brace); outline-offset: 3px; }
.carta-legale .scheda { border: 1px solid var(--linea); border-left: 3px solid var(--brace); padding: 22px 26px; margin: 20px 0 10px; background: color-mix(in srgb, var(--inchiostro) 3.5%, transparent); }
.carta-legale .scheda p { margin-bottom: 7px; }
.carta-legale .scheda p:last-child { margin-bottom: 0; }
.carta-legale .tabella-scorre { overflow-x: auto; margin: 18px 0 22px; -webkit-overflow-scrolling: touch; }
.carta-legale table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; line-height: 1.55; }
.carta-legale th, .carta-legale td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--linea); }
.carta-legale th { font-family: var(--bastone); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brace); border-bottom-color: color-mix(in srgb, var(--brace) 55%, transparent); }
.carta-legale td { color: var(--testo-leg); }
.carta-legale td:first-child { color: var(--inchiostro); font-weight: 700; white-space: nowrap; }
.carta-legale .durata { white-space: nowrap; }
.carta-legale .azione { border: 1px solid color-mix(in srgb, var(--brace) 45%, transparent); background: color-mix(in srgb, var(--brace) 7%, transparent); padding: 24px 26px; margin: 22px 0 10px; }
.carta-legale .azione p { margin-bottom: 14px; }
.carta-legale .azione .bottoni { display: flex; flex-wrap: wrap; gap: 10px; }
.carta-legale .azione button, .carta-legale .azione .come-bottone { font-family: var(--bastone); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; padding: 14px 24px; cursor: pointer;
  border: 1px solid var(--inchiostro); background: none; color: var(--inchiostro); text-decoration: none; display: inline-block; transition: background .2s, color .2s; }
.carta-legale .azione button#revoca { background: var(--inchiostro); color: var(--carta); }
.carta-legale .azione button:hover, .carta-legale .azione .come-bottone:hover { background: var(--brace); border-color: var(--brace); color: var(--carta); }
.carta-legale .azione button[disabled] { opacity: .55; cursor: default; }
.carta-legale .azione button:focus-visible, .carta-legale .azione .come-bottone:focus-visible { outline: 2px solid var(--brace); outline-offset: 3px; }
.carta-legale #esito { display: block; margin-top: 12px; font-size: 15px; font-style: italic; color: color-mix(in srgb, var(--inchiostro) 72%, transparent); min-height: 1.3em; }

@media (max-width: 640px) {
  .pagina-legale .foglio { padding: 38px 20px 72px; }
  .carta-legale { font-size: 16.5px; }
  .carta-legale .sommario { font-size: 18px; }
}