:root{
  /* scala degli angoli: si regola la morbidezza di tutto il sito da qui */
  --r-min:10px;   /* campi, pastiglie, elementi minuti */
  --r-med:14px;   /* pulsanti */
  --r-max:20px;   /* foto, schede, mappa */
  --avorio:#F7F1E7; --avorio-2:#FCF9F3; --bianco:#fff;
  --inchiostro:#2A2622; --inchiostro-soft:#5A534B; --linea:#E4DACB;
  --ottanio:#15605C; --ottanio-scuro:#0E4744;
  --oro:#B8893F; --oro-scuro:#8A6127;
  --rosso:#7E2D26; --hotel:#3A4A57; --bordeaux:#9F2118;
  /* la curva usata da tutte le entrate e da tutti i passaggi del mouse */
  --curva:cubic-bezier(.2,.6,.2,1);
  /* le ombre non sono grigie ma tinte d'inchiostro: su fondo avorio
     un nero neutro sporca, questo resta caldo */
  --ombra:0 1px 2px rgba(42,38,34,.04), 0 10px 26px -18px rgba(42,38,34,.30);
  --ombra-alta:0 2px 6px rgba(42,38,34,.06), 0 28px 52px -24px rgba(42,38,34,.42);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --wrap:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--inchiostro);background:var(--avorio);line-height:1.75;font-size:17px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.display{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:.01em}
.overline{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--oro-scuro);font-weight:500}
.overline--light{color:#D8C7A4}
.overline--rosso{color:var(--rosso)}
.overline--ottanio{color:var(--ottanio)}
.overline--hotel{color:var(--hotel)}
.overline--muted{color:#DBA9A2}
/* Il collegamento di testo: il colore non cambia mai, cambia il filetto,
   che passa da tenue a pieno. Prima virava all'oro scuro, che non e'
   l'accento di nessuna sezione: era una terza famiglia di colore che
   compariva solo al passaggio del mouse.
   Il filetto si tinge di currentColor, cosi' funziona da solo su qualunque
   fondo — accento di sezione, bianco sulle fotografie — senza una regola
   per contesto. Niente filter e niente opacity qui: creerebbero un contesto
   di impilamento, e le schede della homepage usano un ::after steso sulla
   scheda che smetterebbe di misurarsi su di lei. */
.link{font-size:12px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--ottanio);padding-bottom:5px;
    border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent);
    transition:border-color .3s}
.link:hover{border-bottom-color:currentColor}

/* Il pulsante pieno. Sta qui e non in pagine.css perche' compare anche fuori
   dalle pagine di sezione: nel pannello del menu, che e' in header.php e
   quindi su tutto il sito. Finche' la forma stava nel foglio delle pagine,
   in homepage — l'unica dove quel foglio non si carica — il "Contattaci" del
   pannello perdeva padding, maiuscoletto e angoli, e restava un collegamento
   colorato. Il bordo trasparente serve a far venire alto uguale il pulsante
   a solo contorno qui sotto. */
.btn-shop{display:inline-block;font-size:11.5px;letter-spacing:.18em;
    text-transform:uppercase;background:var(--accento);color:#fff;
    padding:14px 26px;border:1px solid transparent;border-radius:var(--r-med);
    transition:background .3s,color .3s,border-color .3s,filter .3s}
/* Il pieno si scurisce, non cambia colore. Vale anche per le sue varianti
   bianche — nel pannello del menu, sulle fasce fotografiche — perche'
   scurire e' un'operazione sulla tinta che c'e', qualunque sia: una sola
   riga al posto di tre regole di contesto che dicevano tre cose diverse. */
.btn-shop:hover{filter:brightness(.88)}

/* La misura ridotta, per i richiami dentro le schede: stessa forma e stesso
   comportamento, peso minore. La gerarchia della pagina la fanno le tre
   misure — fascia, scheda, riga di testo — non tre disegni diversi. */
.btn-shop--piccolo{font-size:11px;letter-spacing:.14em;padding:11px 19px;
    border-radius:var(--r-min)}


/* ---------- masthead: nascosto sulla hero, appare fisso allo scroll ---------- */
#masthead{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(247,241,231,.94);backdrop-filter:blur(8px);
          border-bottom:1px solid var(--linea);transform:translateY(-100%);opacity:0;
          transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
#masthead.visible{transform:translateY(0);opacity:1}
.masthead__in{max-width:var(--wrap);margin:0 auto;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.masthead__logo{height:36px;width:auto}
.mainnav{list-style:none;display:flex;gap:26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.mainnav a{color:var(--inchiostro);transition:color .3s}
.mainnav a:hover{color:var(--accento)}
.masthead__right{display:flex;align-items:center;gap:18px}
.lang{font-size:11px;letter-spacing:.12em;color:var(--inchiostro-soft)}
.lang.is-active{color:var(--accento)}
.masthead__book{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro-scuro);display:flex;align-items:center;gap:7px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--oro)}

/* ---------- hero: 6 foto in dissolvenza + zoom (Ken Burns), didascalie sincronizzate ---------- */
/* il minimo non deve mai superare la finestra: su schermi bassi l'hero
   sfondava sotto il bordo e il ritaglio diventava una fessura */
.hero{position:relative;width:100%;height:100vh;min-height:min(600px,92vh);overflow:hidden;
      display:flex;align-items:center;justify-content:center;text-align:center;color:var(--avorio)}

.hero__media{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;
            opacity:0;animation:heroPhoto 30s linear infinite both}
.hero__slide:nth-child(1){animation-delay:0s}
.hero__slide:nth-child(2){animation-delay:5s}
.hero__slide:nth-child(3){animation-delay:10s}
.hero__slide:nth-child(4){animation-delay:15s}
.hero__slide:nth-child(5){animation-delay:20s}
.hero__slide:nth-child(6){animation-delay:25s}
@keyframes heroPhoto{
  0%{opacity:0;transform:scale(1.05)}
  4%{opacity:1}
  18%{opacity:1}
  22%{opacity:0;transform:scale(1.32)}
  100%{opacity:0;transform:scale(1.32)}
}

.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.38) 55%,rgba(0,0,0,.58) 100%)}

/* Il limite vero lo dava questo contenitore, non la singola didascalia:
   "ACCOGLIERE" a corpo pieno misura 906px e in 720 traboccava. */
.hero__captions{position:relative;z-index:2;padding:0 24px;width:100%;
               max-width:min(1120px,calc(100vw - 48px))}
/* Largo quanto serve alla parola: "ACCOGLIERE" a corpo pieno supera gli 800px,
   e in un riquadro da 680 traboccava a destra invece di restare centrata.
   La riga sotto ha un suo limite di lettura piu' stretto. */
.hero__caption{position:absolute;inset:0 24px auto;left:50%;top:58%;transform:translate(-50%,-50%);
              width:100%;max-width:min(1120px,calc(100vw - 48px));
              opacity:0;animation:heroCaption 30s linear infinite both}
.hero__caption:nth-child(1){animation-delay:0s}
.hero__caption:nth-child(2){animation-delay:5s}
.hero__caption:nth-child(3){animation-delay:10s}
.hero__caption:nth-child(4){animation-delay:15s}
.hero__caption:nth-child(5){animation-delay:20s}
.hero__caption:nth-child(6){animation-delay:25s}
/* Il testo entra dopo la foto, non insieme: resta fermo a zero finche'
   l'immagine non e' del tutto arrivata (4% = 1,2s), poi sale.
   Il ciclo e' di 30s per sei slide, quindi 1% vale 0,3 secondi. */
/* Prima il testo restava del tutto leggibile 1,8 secondi su un ciclo di 30:
   troppo poco per nove parole. Ora la parola entra prima e resta il doppio,
   perche' si legge in un attimo e il resto del tempo va alla riga sotto. */
/* I tempi non sono arbitrari. Il ciclo dura 30s e le slide sono sei, quindi
   ognuna parte 16,667% dopo la precedente. La didascalia che esce deve essere
   gia' a zero quando entra la successiva (16,667% + 3% = 19,667%) e anche
   prima che la foto seguente diventi del tutto opaca (16,667% + 4% = 20,667%):
   altrimenti due testi si sovrappongono nella stessa posizione, e il primo
   resta appeso sopra l'immagine nuova.
   Uscita a 19,5%: entrambe le soglie sono rispettate. */
@keyframes heroCaption{
  0%{opacity:0;transform:translate(-50%,-44%)}
  3%{opacity:0;transform:translate(-50%,-44%)}
  6.5%{opacity:1;transform:translate(-50%,-50%)}
  16.5%{opacity:1;transform:translate(-50%,-50%)}
  19.5%{opacity:0;transform:translate(-50%,-55%)}
  100%{opacity:0}
}

.hero__caption .overline{color:#D8C7A4;display:block;margin-bottom:14px}
/* La parola grande e' il colpo d'occhio: con una parola sola si puo' andare
   molto piu' in alto di corpo di quanto permettesse un titolo di nove parole,
   e la spaziatura larga fa il resto. La riga sotto porta il senso. */
.hero__parola{display:block;font-family:var(--serif);font-weight:400;
    font-size:clamp(3.2rem,9vw,7.5rem);line-height:.98;letter-spacing:.14em;
    text-transform:uppercase;color:#fff;margin:0 0 20px;
    text-indent:.07em;                       /* meta' spaziatura: compensa lo spazio dopo l'ultima lettera */
    text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero__riga{font-family:var(--sans);font-size:clamp(15px,1.5vw,19px);font-weight:400;
    line-height:1.5;color:rgba(255,255,255,.92);margin:0 auto 34px;max-width:46ch;
    letter-spacing:.01em}
.hero__cta{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
           text-decoration:none;border-bottom:1px solid var(--oro);padding-bottom:4px;transition:opacity .3s}
.hero__cta:hover{opacity:.7}

.hero__logo{position:absolute;z-index:5;top:32px;left:32px;width:200px}
.hero__logo img{display:block;width:100%;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}

.hero__dots{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);z-index:3;display:flex;gap:6px}
/* Il pulsante e' il bersaglio: 24px, che e' la misura minima perche' un dito
   lo centri. Il puntino visibile resta di 6px ed e' l'elemento interno, cosi'
   quando cresce non sposta l'area cliccabile. */
.hero__dot{width:24px;height:24px;padding:0;margin:0;border:0;background:none;
    cursor:pointer;-webkit-appearance:none;appearance:none;display:grid;place-items:center;
    -webkit-tap-highlight-color:transparent}
.hero__dot:focus-visible{outline:2px solid #fff;outline-offset:-3px;border-radius:50%}
.hero__dot span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);
    animation:heroDot 30s linear infinite both;pointer-events:none}
.hero__dot:hover span{background:rgba(255,255,255,.75)}
.hero__dot:nth-child(1) span{animation-delay:0s}
.hero__dot:nth-child(2) span{animation-delay:5s}
.hero__dot:nth-child(3) span{animation-delay:10s}
.hero__dot:nth-child(4) span{animation-delay:15s}
.hero__dot:nth-child(5) span{animation-delay:20s}
.hero__dot:nth-child(6) span{animation-delay:25s}
@keyframes heroDot{
  0%{background:rgba(255,255,255,.35);transform:scale(1)}
  4%{background:#fff;transform:scale(1.4)}
  18%{background:#fff;transform:scale(1.4)}
  22%{background:rgba(255,255,255,.35);transform:scale(1)}
  100%{background:rgba(255,255,255,.35);transform:scale(1)}
}

.hero__cue{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2}
.hero__cue span{display:block;width:1px;height:40px;background:#D8C7A4;position:relative;overflow:hidden}
.hero__cue span::after{content:"";position:absolute;left:0;top:-40px;width:1px;height:40px;background:#fff;animation:drop 2.2s infinite}
@keyframes drop{0%{transform:translateY(0)}60%,100%{transform:translateY(80px)}}

/* ---------- sezioni ---------- */
section{position:relative}

/* ---------- card grid ---------- */
.cards{padding:120px 32px}
.cards__grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;text-align:left;
     background:var(--avorio-2);border:1px solid var(--linea);padding:36px 30px 32px;min-height:340px}
.card__art{position:absolute;right:-4%;bottom:-3%;top:-3%;opacity:.2;pointer-events:none;z-index:0}
/* max-width:100% della regola generale sulle immagini litigava con
   height:100%: l'illustrazione veniva schiacciata in larghezza.
   Qui la lascio crescere quanto le serve, e' la card che la ritaglia. */
.card__art img{height:100%;width:auto;max-width:none;display:block}
.card>*:not(.card__art){position:relative;z-index:1}
.card .overline{display:block;margin-bottom:16px}
.card h3{font-size:clamp(1.3rem,1.7vw,1.55rem);margin-bottom:14px;line-height:1.25}
.card p{color:var(--inchiostro-soft);font-size:15px;line-height:1.6;margin-bottom:24px;max-width:32ch}
.card .link{margin-top:auto}
/* Tutta la scheda e' cliccabile, come quelle dei locali: il collegamento in
   fondo si allarga con un ::after invece di avvolgere la scheda in un <a>.
   Cosi' non si annidano link, la destinazione resta una sola per chi naviga
   da tastiera o con un lettore di schermo, e il nome del collegamento resta
   la sua etichetta, che dice dove si va.

   Perche' funzioni davvero il collegamento NON dev'essere posizionato: un
   ::after in assoluto si misura sul primo antenato posizionato, e la regola
   generale qui sopra (.card>*) rendeva relative anche il link. La pastiglia
   copriva quindi solo se stessa, ed era cliccabile la sola riga di testo:
   la scheda sembrava attiva ma non lo era.

   Tolto il position al link, resterebbe sotto l'illustrazione, che e'
   posizionata: percio' l'illustrazione scende a -1 e la scheda diventa un
   contesto di impilamento, cosi' quel -1 non finisce dietro il suo stesso
   fondo. Il resto del testo mantiene z-index 1 e non cambia nulla. */
.card{isolation:isolate}
.card__art{z-index:-1}
.card .link{position:static}
.card .link::after{content:"";position:absolute;inset:0;z-index:2}

/* ---------- le sei card: ingresso, rilievo, passaggio del mouse ----------
   L'ingresso e' un'animazione e non una transizione, cosi' il ritardo a
   cascata non se lo porta dietro anche l'hover: con "backwards" la card sta
   ferma nello stato iniziale finche' non tocca il suo turno, e a fine corsa
   restituisce la trasformazione, che torna libera per il sollevamento. */
.card{border-radius:var(--r-max);box-shadow:var(--ombra);
     transition:transform .45s var(--curva),box-shadow .45s var(--curva),border-color .45s var(--curva)}
/* .reveal arriva dopo nel foglio e con la stessa specificita' si prendeva la
   transizione: l'ombra sarebbe scattata di colpo. Qui la riprendiamo. */
.card.reveal{transform:none;
     transition:transform .45s var(--curva),box-shadow .45s var(--curva),border-color .45s var(--curva)}
.card.reveal.is-visible{opacity:1;animation:cardEntra .75s var(--curva) backwards;
                       animation-delay:calc(var(--ordine,0) * 85ms)}
@keyframes cardEntra{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

.card__art{transition:opacity .55s var(--curva),transform .7s var(--curva);transform-origin:right center}

/* Il selettore porta davanti anche .cards perche' piu' in basso nel foglio
   c'e' .reveal.is-visible{transform:none}: stessa specificita' e posizione
   successiva, quindi annullava il sollevamento lasciando passare solo ombra
   e bordo. Con .cards in testa il conto sale e l'hover torna a vincere. */
@media(hover:hover){
  .cards .card:hover,.cards .card:focus-within{transform:translateY(-6px);
       box-shadow:var(--ombra-alta);border-color:var(--oro)}
  /* l'illustrazione dell'avo respira: e' il solo movimento dentro la card */
  .cards .card:hover .card__art,.cards .card:focus-within .card__art{opacity:.3;transform:scale(1.05)}
}

.quote{background:var(--avorio-2);text-align:center;padding:130px 32px}
.quote__text{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);font-style:italic;color:var(--inchiostro);max-width:34ch;margin:0 auto;line-height:1.35}

/* ---------- footer ---------- */
.site-footer{background:var(--bordeaux);color:#F3DCD8;padding:70px 32px 28px}
.site-footer__in{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;align-items:start}
.site-footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:30px}
/* logo-white.png ha 184px trasparenti sopra e 182 sotto su 595 di altezza:
   a 200px di larghezza sono 44 e 43 px di vuoto. Li recupero, altrimenti il
   marchio sembra sprofondato rispetto alle colonne accanto. */
.site-footer__logo{width:200px;height:auto;flex:none}
/* Il collegamento avvolge l'immagine senza aggiungere spazio: line-height:0
   toglie la riga di testo sotto l'immagine, cosi' il margine negativo qui
   sotto continua a fare lo stesso lavoro di prima. */
.site-footer__logo-link{display:block;line-height:0}
/* il recupero vale solo dove si usa logo-white.png. Il catering monta logo.png,
   che e' ritagliato al vivo: li' un margine negativo lo sfonderebbe. */
body:not(.sez-catering) .site-footer__logo{margin:-44px 0 -38px}
.site-footer__marks{display:flex;align-items:center;gap:24px}
.site-footer__marks .mark{width:auto;flex:none;opacity:.9;transition:opacity .3s}
.site-footer__marks a{display:block;line-height:0}
.site-footer__marks a:hover .mark{opacity:1}
.site-footer__marks .mark--anbc{height:42px}
.site-footer__marks .mark--storico{height:62px}
.site-footer__col{display:flex;flex-direction:column;gap:9px;font-size:14px}
.site-footer__col a:hover{color:#fff}
.site-footer__legal{max-width:var(--wrap);margin:44px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 26px;font-size:13px;color:#D79E96}
.site-footer__legal-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.site-footer__legal-links a:hover{color:#fff}

/* ---------- reveal allo scroll ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .cards__grid{grid-template-columns:repeat(2,1fr);gap:56px 36px}
}
@media(max-width:900px){
  .site-footer__in{grid-template-columns:1fr 1fr;gap:36px}
  .site-footer__brand{grid-column:1/-1}
}
@media(max-width:860px){
  .masthead__in{flex-wrap:wrap;padding:12px 20px;row-gap:10px}
  .mainnav{order:3;width:100%;justify-content:center;flex-wrap:wrap;gap:14px;font-size:11px}
  .masthead__right{gap:14px}
}
/* Su schermo verticale una foto orizzontale dentro un riquadro alto tutta
   la finestra viene ritagliata di due terzi: resta una fetta in cui il
   soggetto non si riconosce. Abbassando l'hero il ritaglio si allenta.
   La cura vera sarebbe avere le sei foto anche in versione verticale. */
@media (orientation: portrait) and (max-width: 900px){
  .hero{height:70vh;min-height:420px}
  .hero__slide{object-position:center 40%}
  .hero__caption .overline{margin-bottom:10px}
  .hero__parola{font-size:clamp(2.2rem,11vw,3.4rem);letter-spacing:.1em;text-indent:.05em;margin-bottom:14px}
  .hero__riga{font-size:15px;margin-bottom:24px}
}

@media(max-width:640px){
  .cards{padding:80px 22px}
  .cards__grid{grid-template-columns:1fr;gap:52px}
  .hero__logo{width:150px;top:22px;left:22px}
  .site-footer__in{grid-template-columns:1fr;gap:30px}
  .site-footer__logo{width:170px}
  .site-footer__marks{gap:20px}
  .site-footer__marks .mark--anbc{height:36px}
  .site-footer__marks .mark--storico{height:54px}
}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card.reveal.is-visible{animation:none}
  .card,.card__art{transition:none}
  .cards .card:hover,.cards .card:focus-within{transform:none}
  .hero__cue span::after{animation:none}
  html{scroll-behavior:auto}
  .hero__slide,.hero__caption,.hero__dot span{animation:none;opacity:0;transform:none}
  .hero__dot span{opacity:1}
  .hero__slide:first-child,.hero__caption:first-child{opacity:1}
  .hero__dot[aria-current] span{background:#fff;transform:scale(1.4)}
}

/* =========================================================
   SISTEMA CROMATICO PER SEZIONE
   Un marchio, tre identità. Cambia la palette, non la forma:
   stesso impianto, stesso logo, stessa griglia, stessa tipografia.
   ========================================================= */

/* --- valori di partenza: la famiglia "casa" (istituzionale,
       storia, pasticceria, locali, shop) --- */
body{
  --accento:var(--bordeaux);
  --barra-bg:rgba(247,241,231,.94);
  /* fasce di sezione (.metodo, .plus): fondo scuro, testo chiaro */
  --fascia-bg:var(--bordeaux);
  --fascia-testo:#F0D9D6;
  --fascia-forte:#FFFFFF;
  --fascia-muted:#E8C6C1;
  --fascia-linea:rgba(255,255,255,.2);
  --fascia-numero:#D9B87E;
  --piede-bg:var(--bordeaux);
  --piede-testo:#F3DCD8;
  --piede-forte:#FFFFFF;
  --piede-muted:#E8C6C1;
  --piede-linea:rgba(255,255,255,.14);
  --piede-deco:1;          /* filigrana chiara su fondo scuro */
}

/* --- catering: tutto in argento, testo scuro, nessun fondo nero --- */
body.sez-catering{
  --avorio:#FAFAFA;
  --avorio-2:#EDEFEE;
  --linea:#C9CBCA;
  --inchiostro:#2E312F;
  --inchiostro-soft:#565A57;
  --accento:#2E312F;
  --barra-bg:rgba(250,250,250,.94);
  --fascia-bg:#EDEFEE;
  --fascia-testo:#565A57;
  --fascia-forte:#2E312F;
  --fascia-muted:#646866;
  --fascia-linea:#C9CBCA;
  --fascia-numero:#6F7470;
  --piede-bg:#E0E3E1;
  --piede-testo:#565A57;
  --piede-forte:#2E312F;
  --piede-muted:#5E6260;
  --piede-linea:#C9CBCA;
  --piede-deco:0;          /* filigrana scura su fondo chiaro */
  background:var(--avorio);
}

/* --- hotel: ottanio --- */
body.sez-hotel{
  --avorio:#F4F8F6;
  --avorio-2:#E8F0ED;
  --linea:#CBDCD6;
  --accento:var(--ottanio);
  --barra-bg:rgba(244,248,246,.94);
  --fascia-bg:var(--ottanio-scuro);
  --fascia-testo:#B9D2CC;
  --fascia-forte:#FFFFFF;
  --fascia-muted:#8FBDB4;
  --fascia-linea:rgba(255,255,255,.2);
  --fascia-numero:var(--oro);
  --piede-bg:var(--ottanio-scuro);
  --piede-testo:#CFE0DA;
  --piede-forte:#FFFFFF;
  --piede-muted:#9DBAB2;
  --piede-linea:rgba(255,255,255,.14);
  --piede-deco:1;
  background:var(--avorio);
}

/* --- gli elementi che seguono l'accento --- */
/* solo il colore: il filetto se lo calcola da solo da currentColor, ed e'
   quello che gli permette di stare tenue a riposo e pieno al passaggio */
.link{color:var(--accento)}
.btn-shop{background:var(--accento)}
/* La variante a solo contorno viene dopo, e non insieme alla forma qui sopra:
   la riga che riafferma l'accento ha la stessa specificita' e, stando piu' in
   basso nel foglio, le riempiva il fondo. Il risultato era un pulsante
   bordeaux pieno con la scritta bordeaux: un rettangolo cieco. */
.btn-shop--vuoto{background:transparent;color:var(--accento);border-color:currentColor}
.btn-shop--vuoto:hover{background:var(--accento);color:#fff;border-color:var(--accento)}
.mainnav a:hover{color:var(--accento)}

/* --- footer: stessi elementi ovunque, colori dalle variabili --- */
.site-footer{position:relative;overflow:hidden;background:var(--piede-bg);color:var(--piede-testo)}
.site-footer__in,.site-footer__legal{position:relative;z-index:1}
.site-footer__col a{color:var(--piede-testo)}
.site-footer__col a:hover{color:var(--piede-forte)}
.site-footer__col span:not(.overline){color:var(--piede-forte)}
.site-footer__legal{border-top-color:var(--piede-linea);color:var(--piede-muted)}
.site-footer__legal-links a:hover{color:var(--piede-forte)}
.overline--muted{color:var(--piede-muted)}

/* --- illustrazione a china come richiamo di sezione --- */
.site-footer__deco{position:absolute;left:-24px;bottom:64px;width:390px;
                   opacity:.24;pointer-events:none;z-index:0}
.site-footer__deco img{width:100%;display:block;
                       filter:brightness(var(--piede-deco)) invert(var(--piede-deco))}

@media(max-width:900px){
  .site-footer__deco{width:270px;left:-22px;bottom:40px;opacity:.18}
}

/* I due marchi sono file bianchi, pensati per i fondi scuri.
   Sul footer argento del catering vanno ribaltati in scuro. */
body.sez-catering .site-footer__marks .mark{filter:brightness(0);opacity:.6}
body.sez-catering .site-footer__marks a:hover .mark{opacity:.85}

/* --- la barra del menu prende il fondo della sezione --- */
#masthead{background:var(--barra-bg)}
.mainnav a:hover,.lang.is-active,.masthead__book{color:var(--accento)}
.dot{background:var(--accento)}

/* --- in homepage le etichette delle card sono tutte bordeaux:
       il colore lo porta la sezione, non la singola card --- */
.card .overline{color:var(--bordeaux)}

/* =========================================================
   MENU A SCOMPARSA — sempre raggiungibile
   Il pulsante c'è dal primo istante, anche sopra la hero;
   la barra orizzontale resta un di più che compare allo scroll,
   e su mobile non compare affatto.
   ========================================================= */
.screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.menu-toggle{position:fixed;top:26px;right:28px;z-index:70;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;padding:0;
  -webkit-tap-highlight-color:transparent}
.menu-toggle__righe{display:block;width:26px;height:14px;position:relative}
/* Scuro di base: e' il colore giusto sulle pagine con l'apertura chiara, che
   sono la maggioranza. Il bianco si accende solo dove c'e' la foto col velo. */
.menu-toggle__righe span{position:absolute;left:0;width:100%;height:1.5px;background:var(--inchiostro);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s,background-color .3s}
body.apertura-scura:not(.is-scrolled) .menu-toggle__righe span{background:#fff}
.menu-toggle__righe span:nth-child(1){top:0}
.menu-toggle__righe span:nth-child(2){top:6px}
.menu-toggle__righe span:nth-child(3){top:12px}
/* sopra la hero è bianco; quando la pagina scorre su fondo chiaro diventa inchiostro */
body.is-scrolled .menu-toggle__righe span{background:var(--inchiostro)}  /* la barra e' chiara */
/* aperto: diventa una croce, sempre chiara perché il pannello è scuro */
body.menu-aperto .menu-toggle__righe span{background:#fff}
body.menu-aperto .menu-toggle__righe span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-aperto .menu-toggle__righe span:nth-child(2){opacity:0}
body.menu-aperto .menu-toggle__righe span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* pannello */
/* Il menu e' una fascia che entra da destra, non una schermata intera:
   dietro resta visibile la pagina, appena velata. */
.menu-pannello{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:65;
  width:min(420px,86vw);background:var(--piede-bg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:-18px 0 50px -22px rgba(0,0,0,.45);
  transform:translateX(100%);visibility:hidden;
  transition:transform .42s cubic-bezier(.22,.7,.24,1),visibility .42s}
.menu-pannello[hidden]{display:flex}          /* lo gestiamo noi, non il browser */

/* il velo che copre la pagina dietro, e che si puo' cliccare per chiudere */
.menu-velo{position:fixed;inset:0;z-index:64;background:rgba(20,17,14,.42);
  opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s}

body.menu-aperto{overflow:hidden}
body.menu-aperto .menu-pannello{transform:none;visibility:visible}
body.menu-aperto .menu-velo{opacity:1;visibility:visible}
/* il pannello è sempre scuro: sul catering il footer è chiaro, qui no */
body.sez-catering .menu-pannello{background:#2E312F}

.menu-pannello__in{text-align:center;padding:40px 30px;width:100%}
.menu-pannello__voci{list-style:none;margin:0 0 44px;padding:0}
.menu-pannello__voci li{margin:0 0 6px}
.menu-pannello__voci a{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.1rem);
  font-weight:500;line-height:1.25;color:#fff;opacity:.92;transition:opacity .25s}
.menu-pannello__voci a:hover{opacity:.6}
.menu-pannello__coda{display:flex;flex-direction:column;align-items:center;gap:22px}
.menu-pannello__lingue{display:flex;gap:16px}
.menu-pannello__lingue .lang{color:rgba(255,255,255,.65);font-size:12px;letter-spacing:.14em}
.menu-pannello__lingue .lang.is-active{color:#fff}
/* il fondo bianco resta, il comportamento no: lo detta la regola unica */
.menu-pannello .btn-shop{background:#fff;color:var(--inchiostro)}

/* icone social, nel pannello e nel footer */
.menu-pannello__social,.site-footer__social{display:flex;gap:16px}
.site-footer__social{margin-top:16px}
.menu-pannello__social a,.site-footer__social a{display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid currentColor;border-radius:50%;
  transition:opacity .25s,background-color .25s,color .25s}
.menu-pannello__social a{color:rgba(255,255,255,.75)}
.menu-pannello__social a:hover{color:#fff}
.site-footer__social a{color:var(--piede-testo)}
.site-footer__social a:hover{color:var(--piede-forte)}
.menu-pannello__social svg,.site-footer__social svg{width:17px;height:17px;display:block}

@media(max-width:860px){
  /* su mobile niente barra: resta solo il pulsante */
  #masthead{display:none}
  .menu-toggle{top:16px;right:16px}
}

/* Barra e icona non convivono: quando compare la barra, l'icona sparisce.
   Su mobile la barra non c'è, quindi l'icona resta sempre. */
body.is-scrolled .menu-toggle{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:860px){
  body.is-scrolled .menu-toggle{opacity:1;visibility:visible;pointer-events:auto}
}
.menu-toggle{transition:opacity .3s ease,visibility .3s}

/* =========================================================
   FOOTER — scudetti del gruppo sotto il logo
   Uno scudo solo, in currentColor: prende il colore del footer
   di sezione invece di essere tre PNG fissi oro/grigio/nero.
   ========================================================= */
.site-footer__gruppo{display:flex;flex-direction:column;gap:10px}
.scudetto{display:inline-flex;align-items:center;gap:10px;color:var(--piede-testo);
    font-size:14px;transition:color .25s}
.scudetto svg{width:15px;height:17px;flex:none;opacity:.8;transition:opacity .25s}
.scudetto:hover{color:var(--piede-forte)}
.scudetto:hover svg{opacity:1}

/* ---------------------------------------------------------------
   Selettore delle lingue
   Pensato per crescere: con due voci sembra un interruttore, con
   sei resta lo stesso oggetto senza allargare la barra.
   --------------------------------------------------------------- */
.lingue{position:relative}
.lingue__bottone{display:flex;align-items:center;gap:5px;background:none;border:0;
    cursor:pointer;font-family:var(--sans);font-size:11px;letter-spacing:.12em;
    color:var(--inchiostro-soft);padding:4px 2px;transition:color .25s}
.lingue__bottone:hover,.lingue[data-aperto] .lingue__bottone{color:var(--accento)}
.lingue__bottone svg{width:9px;height:6px;transition:transform .25s}
.lingue[data-aperto] .lingue__bottone svg{transform:rotate(180deg)}

.lingue__elenco{position:absolute;top:calc(100% + 8px);right:0;z-index:70;
    list-style:none;margin:0;padding:6px;min-width:150px;
    background:var(--bianco);border:1px solid var(--linea);border-radius:var(--r-min);
    box-shadow:0 12px 30px -14px rgba(42,38,34,.35);
    opacity:0;visibility:hidden;transform:translateY(-4px);
    transition:opacity .22s ease,visibility .22s,transform .22s ease}
.lingue[data-aperto] .lingue__elenco{opacity:1;visibility:visible;transform:none}
.lingue__voce{display:flex;align-items:center;gap:10px;padding:8px 10px;
    border-radius:calc(var(--r-min) - 4px);font-size:13px;color:var(--inchiostro-soft)}
.lingue__voce:hover{background:var(--avorio-2);color:var(--inchiostro)}
.lingue__voce.is-active{color:var(--accento);font-weight:600}
.lingue__codice{font-size:10.5px;letter-spacing:.1em;opacity:.65;min-width:20px}

/* dentro il pannello del menu il fondo e' scuro */
.lingue--pannello .lingue__bottone{color:rgba(255,255,255,.7)}
.lingue--pannello .lingue__bottone:hover{color:#fff}
.lingue--pannello .lingue__elenco{right:auto;left:50%;transform:translate(-50%,-4px)}
.lingue--pannello[data-aperto] .lingue__elenco{transform:translate(-50%,0)}


/* =========================================================
   LEGGIBILITA' E TOCCHI — revisione di ottobre 2026
   Regole raccolte qui per non sparpagliarle nel foglio: misure
   minime per il dito (44px, la soglia di Apple; mai sotto i 24px
   di WCAG 2.2) e contrasti almeno 4,5:1 per il testo normale.
   ========================================================= */

/* il sopratitolo "smorzato" nasce per il piede scuro: fuori dal piede,
   su fondo chiaro, diventa il sopratitolo normale in oro scuro */
main .overline--muted{color:var(--oro-scuro)}

/* testi piccoli sopra le fotografie: l'ombra morbida li stacca anche
   nei punti piu' chiari dell'immagine, senza scurire la foto intera */
.hero__caption .overline,.hero__riga,.hero__cta{
    text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.45)}

/* collegamenti in riga ("Scopri di piu' →"): l'area sensibile si allarga
   con un riquadro invisibile, l'aspetto resta quello di una riga di testo.
   Nelle schede della home tutta la scheda e' gia' cliccabile. */
.link,.hero__cta{position:relative}
.link::before,.hero__cta::before{content:"";position:absolute;inset:-10px -8px -8px}
.card .link::before{content:none}

/* i pallini delle slide: il punto resta piccolo, il bersaglio e' 44px */
.hero__dots{gap:0}
.hero__dot{width:44px;height:44px}

/* pulsanti: un solo corpo e una sola spaziatura per tutto il sito */
.btn-shop,.btn-shop--piccolo{font-size:12px;letter-spacing:.16em}
.btn-shop--piccolo{padding:12px 20px}

/* piede: voci, scudetti e social alti abbastanza per il dito. Solo sugli
   schermi touch: col mouse le aree grandi non servono e il piede restava
   piu' alto di un quinto senza motivo. */
@media (pointer:coarse){
  .site-footer__col{gap:0}
  .site-footer__col > .overline{margin-bottom:6px}
  .site-footer__col > a,.site-footer__col li > a{display:inline-block;padding:10px 0}
  .site-footer__col > span:not(.overline){padding:6px 0}
  .scudetto{min-height:44px}
  .site-footer__social a,.menu-pannello__social a{width:44px;height:44px}
  .site-footer__legal-links{gap:0 22px}
  .site-footer__legal-links a{display:inline-block;padding:12px 0}
}

@media (pointer:coarse){
  .site-footer__logo-link{display:inline-block;padding:3px 0}
  .site-footer__marks a{min-height:44px;display:flex;align-items:center}
}


/* =========================================================
   INTRO della home e dello shop — il monogramma lascia il posto al logo esteso
   ========================================================= */
html.intro-attiva,html.intro-attiva body{overflow:hidden}
.intro-logo{position:fixed;inset:0;z-index:200;background:#F7F1E7; /* l'avorio del sito, anche nello shop che ha fondo bianco */
    display:flex;align-items:center;justify-content:center;
    transition:transform 1s cubic-bezier(.76,0,.24,1);will-change:transform}
.intro-logo.via{transform:translateY(-100%)}
.intro-logo__in{position:relative;width:min(460px,74vw);height:190px;
    display:flex;align-items:center;justify-content:center}
.intro-logo__mono{width:96px;opacity:0;transform:translateY(14px) scale(.94);
    animation:introMonoIn .8s cubic-bezier(.22,1,.36,1) .1s forwards,
              introMonoOut .55s cubic-bezier(.65,0,.35,1) 1.3s forwards}
.intro-logo__esteso{position:absolute;left:50%;top:50%;width:100%;max-width:none;
    opacity:0;transform:translate(-50%,-50%) scale(1.06);
    animation:introEstesoIn .9s cubic-bezier(.16,1,.3,1) 1.5s forwards}
@keyframes introMonoIn{to{opacity:1;transform:none}}
@keyframes introMonoOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.86)}}
@keyframes introEstesoIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){
  .intro-logo__mono{display:none}
  .intro-logo__esteso{animation:none;opacity:1;transform:translate(-50%,-50%)}
  .intro-logo{transition:none}
}

/* col logo animato (logo-morph.js) il monogramma si apre nel logo, senza dissolvenze */
.intro-logo__in .lm-ingresso{position:absolute;inset:0;display:flex;align-items:center;color:var(--bordeaux);pointer-events:none}
.intro-logo__in .lm-ingresso .rs-lm{display:block;width:100%;height:auto;overflow:visible}
.intro-logo__in.rs-lm-attivo img{opacity:0!important;animation:none!important}
/* con il logo animato le due immagini di riserva non devono fare la loro
   entrata prima che lo script le sostituisca (si vedrebbe un doppio ingresso):
   restano nascoste, e il logo esteso compare da solo se lo script non arriva */
@media(prefers-reduced-motion:no-preference){
  .intro-logo[data-animato] .intro-logo__mono{animation:none;opacity:0}
  .intro-logo[data-animato] .intro-logo__esteso{animation:introEstesoIn .6s ease 2.5s forwards}
}

.rs-lm [fill="#9e2215"],.rs-lm-lettera{fill:currentColor}

/* mentre il sipario e' giu' lo slider della home aspetta: deve cominciare dalla
   prima immagine quando il sipario si alza, non essere gia' a meta' */
html.intro-attiva .hero__slide,html.intro-attiva .hero__caption,html.intro-attiva .hero__dot span{animation-play-state:paused}

/* =========================================================
   TENDINE DEL MENU — sottovoci di Catering, I locali, Shop
   (le scrive inc/menu.php). Si aprono col mouse sopra, col tabulatore
   (focus-within) e, sugli schermi a tocco, al primo tocco: main.js
   mette la classe .aperta, il secondo tocco porta alla pagina.
   ========================================================= */
.mainnav > li{position:relative}
.mainnav > .menu-item-has-children > a::after{content:'';display:inline-block;width:5px;height:5px;
    margin-left:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    transform:translateY(-3px) rotate(45deg);opacity:.55;transition:transform .25s}
.mainnav > .menu-item-has-children:hover > a::after,
.mainnav > .menu-item-has-children.aperta > a::after{transform:translateY(0) rotate(225deg)}
.mainnav .current-menu-item > a,.mainnav .current-menu-ancestor > a{color:var(--accento)}

.mainnav .sub-menu{position:absolute;top:calc(100% + 14px);left:50%;z-index:5;
    min-width:250px;margin:0;padding:10px 0;list-style:none;
    background:var(--avorio);border:1px solid var(--linea);border-radius:var(--r-min);
    box-shadow:0 18px 40px rgba(42,38,34,.13);
    font-family:var(--sans);font-size:14px;letter-spacing:.01em;text-transform:none;
    opacity:0;visibility:hidden;transform:translate(-50%,8px);
    transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
/* ponte invisibile fra la voce e la tendina: senza, il mouse che scende
   attraversa il vuoto e la tendina si chiude prima di arrivarci */
.mainnav .sub-menu::before{content:'';position:absolute;left:0;right:0;top:-16px;height:16px}
.mainnav > li:hover > .sub-menu,
.mainnav > li:focus-within > .sub-menu,
.mainnav > li.aperta > .sub-menu{opacity:1;visibility:visible;transform:translate(-50%,0);
    transition:opacity .2s ease,transform .2s ease}
.mainnav > li.zitta > .sub-menu{opacity:0;visibility:hidden}
.mainnav .sub-menu a{display:block;padding:10px 24px;white-space:nowrap;color:var(--inchiostro)}
.mainnav .sub-menu a:hover,.mainnav .sub-menu a:focus-visible{background:var(--avorio-2);color:var(--accento);outline:none}
/* l'ultima voce del catering e' il preventivo: separata, come un'azione */
.mainnav .sub-menu li:last-child > a[href$="#preventivo"]{margin-top:6px;padding-top:14px;
    border-top:1px solid var(--linea);color:var(--accento)}
@media (prefers-reduced-motion:reduce){
  .mainnav .sub-menu{transition:none}
}

/* --- "Lavora con noi": etichetta a contorno sotto i social del piede --- */
.site-footer__col > a.site-footer__lavora{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
    margin-top:22px;padding:10px 18px;min-height:44px;border-radius:999px;
    border:1px solid color-mix(in srgb,var(--piede-testo) 45%,transparent);
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--piede-forte);
    transition:border-color .3s,background .3s}
.site-footer__col > a.site-footer__lavora:hover{border-color:var(--piede-forte);
    background:color-mix(in srgb,var(--piede-forte) 8%,transparent);color:var(--piede-forte)}
.site-footer__col > a.site-footer__lavora:focus-visible{outline:2px solid var(--piede-forte);outline-offset:3px}