/*
Theme Name: Rosa Salva
Theme URI: https://rosasalva.it
Author: Rosa Salva
Author URI: https://rosasalva.it
Description: Tema custom per il sito unificato Rosa Salva — pasticceria e catering veneziani dal 1879. Ricostruzione del prototipo approvato: logo-to-scroll, hero video-to-scroll, i 4 mondi, heritage 1879 con timeline, 6 locali. Multilingua IT/EN/FR/DE, WooCommerce per lo shop.
Version: 0.2.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rosa-salva
*/

/* ---- Design tokens (dal prototipo approvato) ---- */
:root{
  --paper:#f3ede3;      /* crema, sfondo */
  --paper2:#e9dfce;     /* bordi/superfici */
  --ink:#23191a;        /* testo scuro */
  --brand:#9f2118;      /* bordeaux Rosa Salva */
  --brand-d:#7d1a13;    /* bordeaux scuro */
  --gold:#b3924f;       /* oro/accento */
  --muted:#7a6f63;      /* testo secondario */
  --price:#3a3531;      /* prezzo: grigio scuro, non rosso (non spaventa) */
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* accento di sezione (default: bordeaux/pasticceria) */
  --accent:var(--brand);
  --accent-d:var(--brand-d);
}
/* palette per sezione — vedi rosa_salva_section_theme() in functions.php */
body.rs-theme-catering{ --accent:#8f959c; --accent-d:#6d737a; }   /* argento */
body.rs-theme-hotel{    --accent:#1e4148; --accent-d:#142e33; }   /* ottanio (dal sito hotel) */
body.rs-theme-storia{   --accent:#b3924f; --accent-d:#8f7439; }   /* oro */

*{ margin:0; padding:0; box-sizing:border-box; }
/* overflow-x:clip (NON hidden): clippa lo sbordo orizzontale senza creare
   scroll-container, così il position:sticky dell'hero continua a funzionare. */
html{ scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.locked{ overflow:hidden; height:100vh; }
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; height:auto; }
.wrap{ max-width:1280px; margin:0 auto; padding:0 32px; }

/* ---------- INTRO ---------- */
/* lo spazio della barra di scorrimento resta sempre riservato: quando il sipario
   sblocca la pagina, niente (logo compreso) si sposta di lato */
html{ scrollbar-gutter:stable; }
#intro{ position:fixed; inset:0; z-index:200; background:var(--paper);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:transform 1.1s cubic-bezier(.76,0,.24,1); will-change:transform; }
#intro.lift{ transform:translateY(-100%); }
/* Reveal in due atti: il monogramma si presenta, poi lascia il posto al logo esteso.
   Il monogramma NON si muove mentre cede il posto (richiesta di Gio, 24/09/2026):
   resta dov'e' e sfuma soltanto; il logo esteso affiora con lo stesso respiro
   con cui e' entrato il monogramma — stessa curva, piccola salita, quasi nessuna
   scala — ed e' fermo a 2,85 s, prima che il sipario si alzi (3,65 s, home.js).
   Le due corone coincidono: nel breve incrocio un segno diventa l'altro. */
.ilogos{ position:relative; width:min(560px,82vw); height:260px;
  display:flex; align-items:center; justify-content:center; }
.ilogos .im{ width:184px; opacity:0; transform:translateY(16px) scale(.94);
  animation:introMonoIn .9s cubic-bezier(.22,1,.36,1) .1s forwards,
            introMonoCede .6s cubic-bezier(.45,0,.55,1) 1.4s forwards; }
.ilogos .ie{ position:absolute; left:50%; top:50%; width:100%; max-width:none;
  opacity:0; transform:translate(-50%,-50%) translateY(8px) scale(.985);
  animation:introEstesoIn 1s cubic-bezier(.22,1,.36,1) 1.85s forwards; }
#intro .il{ font-family:var(--serif); font-size:13px; letter-spacing:.55em; color:var(--brand);
  text-transform:uppercase; margin-top:14px; opacity:0; transform:translateY(10px);
  animation:introIn 1.1s cubic-bezier(.22,1,.36,1) 2.25s forwards; }
@keyframes introIn{ to{ opacity:1; transform:none; } }
@keyframes introMonoIn{ to{ opacity:1; transform:none; } }
@keyframes introMonoCede{ from{ opacity:1; } to{ opacity:0; } }
@keyframes introEstesoIn{ to{ opacity:1; transform:translate(-50%,-50%); } }
@media (prefers-reduced-motion:reduce){
  #intro{ transition:none; } /* il sipario sparisce, non scorre */
  .ilogos .im{ display:none; }
  .ilogos .ie{ animation:none; opacity:1; transform:translate(-50%,-50%); }
  #intro .il{ animation:none; opacity:1; transform:none; }
}

/* ---------- HEADER ---------- */
header#hdr{ position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease, transform .45s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(to bottom, rgba(243,237,227,.92), rgba(243,237,227,0)); }
header#hdr.solid{ background:rgba(243,237,227,.96); backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(35,25,26,.08); padding:10px 32px; }
/* auto-hide: sparisce scrollando in basso, riappare scrollando in alto */
header#hdr.rs-hidden{ transform:translateY(-115%); }
/* Menu aperto: l'header sale SOPRA il pannello (che sta a z-index 300)
   cosi' il pulsante resta visibile e l'animazione hamburger→X si vede
   per intero. Restano fuori scena le altre voci: sul pannello bordeaux
   vive solo l'icona, in bianco. */
body.rs-nav-lock header#hdr{ z-index:400; background:none; box-shadow:none;
  transform:none; backdrop-filter:none; pointer-events:none; }
/* l'header resta sopra il pannello ma lascia passare i tocchi: senza questo la prima
   voce del menu (sotto i 90px della barra) non si apriva. Solo la X resta cliccabile. */
body.rs-nav-lock header#hdr .menu-btn{ pointer-events:auto; }
body.rs-nav-lock header#hdr .brand,
body.rs-nav-lock header#hdr .rs-cart,
body.rs-nav-lock header#hdr .rs-langsel{ opacity:0; pointer-events:none; transition:opacity .25s; }
body.rs-nav-lock .menu-btn{ color:#fff; }
body.rs-nav-lock .menu-btn:hover{ color:#fff; opacity:.75; }
body.admin-bar header#hdr{ top:32px; } /* barra admin di WordPress */
/* Logo: ritaglio calcolato sui pixel reali degli SVG (niente più corona tagliata).
   Contenuto wordmark = 38.16% dell'altezza file; monogramma = 38.52%. */
.brand{ position:relative; display:block; overflow:hidden; height:58px; width:192px;
  transition:width .55s cubic-bezier(.76,0,.24,1); } /* 192: contenuto 189px + margine (era tagliato a dx) */
header#hdr.collapsed .brand{ width:39px; }
@media (max-width:380px){
  header#hdr, header#hdr.solid{ padding-left:20px; padding-right:20px; }
  header#hdr .brand{ zoom:.86; }
}
header#hdr .lg-word, header#hdr .lg-mark{ position:absolute; transition:opacity .4s ease;
  max-width:none !important; width:auto; } /* !important: WooCommerce clampa img a 100% */
header#hdr .lg-word{ height:152px !important; left:-13px; top:-47px; opacity:1; }
header#hdr .lg-mark{ height:150px !important; left:-34px; top:-46px; opacity:0; }
header#hdr.collapsed .lg-word{ opacity:0; }
header#hdr.collapsed .lg-mark{ opacity:1; }

/* ---- il logo che si apre e si chiude (assets/js/logo-morph.js, 24/09/2026) ----
   Lo stato lo decide il CSS: 1 = logo esteso, 0 = monogramma. Lo script disegna
   il passaggio (R a sinistra, S a destra, «osa»/«alva» che affiorano), come il
   logo di anthropic.com. Senza JavaScript restano le due immagini qui sopra. */
header#hdr{ --rs-logo-stato:1; }
header#hdr.collapsed{ --rs-logo-stato:0; }
header#hdr .lg-morph{ position:absolute; left:-13px; top:-47px; height:152px; width:214.98px;
  transform-origin:0 0; color:#9e2215; pointer-events:none; }
header#hdr .lg-morph .rs-lm{ display:block; width:100%; height:100%; overflow:visible; }
header#hdr.accent .lg-morph{ color:#fff; }
header#hdr .brand.rs-lm-attivo .lg-word, header#hdr .brand.rs-lm-attivo .lg-mark{ opacity:0 !important; }
header#hdr .brand.rs-lm-attivo{ transition:opacity .5s ease, visibility .5s ease; }
.rs-lm [fill="#9e2215"], .rs-lm-lettera{ fill:currentColor; }
/* ingresso: al posto delle due immagini, lo stesso logo che si apre lentamente */
.ilogos .lm-ingresso{ position:absolute; inset:0; display:flex; align-items:center; color:#9e2215; }
.ilogos .lm-ingresso .rs-lm{ display:block; width:100%; height:auto; overflow:visible; }
.ilogos.rs-lm-attivo .im, .ilogos.rs-lm-attivo .ie{ opacity:0 !important; animation:none !important; }
/* col logo animato previsto (#intro.rs-lm-js, messo da uno script in pagina) le due
   immagini non fanno il loro passaggio: il monogramma entra con logo-morph.js. Se lo
   script non arriva, dopo 3 s compare il logo esteso fermo e il sipario si alza. */
/* L'immagine del monogramma entra subito, gia' nel posto e nella misura esatti del
   monogramma animato (viewBox 30 78 782 402 largo quanto .ilogos, monogramma in
   matrix(0.79983 … 164.472, -91.189)): quando logo-morph.js arriva le da' il cambio
   senza che si veda. Stesso punto d'origine della scala dell'animazione (il centro
   del riquadro). Se lo script non arriva: a 3 s cede il posto al logo esteso fermo. */
#intro.rs-lm-js .ilogos{ --lw:min(560px,82vw); }
#intro.rs-lm-js .ilogos .im{ position:absolute; max-width:none; height:auto;
  width:calc(var(--lw) * 476.3 / 782); left:calc(var(--lw) * 134.472 / 782);
  top:calc((260px - var(--lw) * 402 / 782) / 2 - var(--lw) * 169.189 / 782);
  transform-origin:calc(var(--lw) / 2 - var(--lw) * 134.472 / 782) calc(130px - ((260px - var(--lw) * 402 / 782) / 2 - var(--lw) * 169.189 / 782));
  animation:introMonoIn .9s cubic-bezier(.22,1,.36,1) .1s forwards,
            introMonoCede .6s cubic-bezier(.45,0,.55,1) 3s forwards; }
#intro.rs-lm-js .ilogos .ie{ animation:introEstesoIn 1s cubic-bezier(.22,1,.36,1) 3.2s forwards; }
/* nella barra il riquadro segue la sfumatura (logo-morph.js): nessun taglio netto, e
   in alto/in basso qualche pixel di respiro per le code delle lettere */
header#hdr .brand.rs-lm-attivo{ overflow:visible; clip-path:inset(-8px 0 -8px -8px); }
header#hdr .brand.rs-lm-attivo .lg-word, header#hdr .brand.rs-lm-attivo .lg-mark{ transition:none; }
/* in attesa del logo animato (header#hdr.rs-lm-attesa, messo da uno script in pagina) la
   barra parte gia' dal monogramma: logo-morph.js poi la apre, senza il salto
   esteso -> monogramma -> esteso. Se lo script non arriva, dopo 5 s si apre da sola. */
header#hdr.rs-lm-attesa:not(.collapsed) .brand{ width:39px; animation:rs-lm-riserva-b .6s ease 5s forwards; }
header#hdr.rs-lm-attesa:not(.collapsed) .lg-word{ opacity:0; animation:rs-lm-riserva-si .6s ease 5s forwards; }
header#hdr.rs-lm-attesa:not(.collapsed) .lg-mark{ opacity:1; animation:rs-lm-riserva-no .6s ease 5s forwards; }
header#hdr .brand.rs-lm-attivo, header#hdr .brand.rs-lm-attivo .lg-word, header#hdr .brand.rs-lm-attivo .lg-mark{ animation:none; }
@keyframes rs-lm-riserva-b{ to{ width:192px; } }
@keyframes rs-lm-riserva-si{ to{ opacity:1; } }
@keyframes rs-lm-riserva-no{ to{ opacity:0; } }

/* Pagine interne: barra superiore col colore della sezione, logo/menu bianchi */
header#hdr.accent{ background:var(--accent); box-shadow:0 1px 0 rgba(0,0,0,.08); }
header#hdr.accent.solid{ background:var(--accent); backdrop-filter:none; }
header#hdr.accent .lg-word, header#hdr.accent .lg-mark{ filter:brightness(0) invert(1); }
header#hdr.accent nav a.navlink{ color:#fff; opacity:.88; }
header#hdr.accent nav a.navlink:hover{ color:#fff; opacity:1; }
header#hdr.accent nav a.navlink::after{ background:#fff; }
header#hdr.accent .ext::after{ color:rgba(255,255,255,.75); }
header#hdr.accent .langs button{ color:rgba(255,255,255,.65); }
header#hdr.accent .langs button.on{ color:#fff; }
header#hdr.accent .langs button:hover{ color:#fff; }
header#hdr.accent .menu-btn{ color:#fff; }
body.rs-internal{ background:#fff; } /* pagine interne: fondo bianco */
header#hdr nav{ display:flex; align-items:center; gap:30px; }
nav a.navlink{ font-size:12.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
  font-weight:500; opacity:.85; transition:opacity .2s, color .2s; position:relative; padding:4px 0; }
nav a.navlink:hover{ opacity:1; color:var(--brand); }
nav a.navlink::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--brand); transition:width .3s ease; }
nav a.navlink:hover::after{ width:100%; }
.ext::after{ content:" ↗"; color:var(--gold); }
.langs{ display:flex; gap:8px; align-items:center; margin-left:6px; }
.langs button{ font-family:var(--sans); font-size:11px; letter-spacing:.1em; background:none; border:none;
  color:var(--muted); cursor:pointer; padding:4px 5px; border-radius:4px; transition:.2s; font-weight:600; }
.langs button.on{ color:var(--brand); }
.langs button:hover{ color:var(--ink); }
.menu-btn{ display:none; }
/* ---- icone animate (Lottie) ----
   Il player disegna un <svg> con i tratti neri: li riportiamo a
   currentColor, cosi' l'icona eredita il colore del contenitore e i
   passaggi del mouse restano quelli di sempre. I path dentro <defs>
   (maschere e clip) non vanno toccati: il selettore figlio li esclude. */
.rs-lottie{ display:block; line-height:0; pointer-events:none; }
.rs-lottie svg{ display:block; width:100%; height:100%; overflow:visible; }
.rs-lottie svg > g path{ stroke:currentColor; transition:stroke .2s; }
.rs-lottie svg path,
.rs-lottie svg g[clip-path] path{ stroke:currentColor !important; }
.rs-lottie--bag{ width:30px; height:30px; }
.rs-lottie--menu{ width:26px; height:26px; }
/* icona carrello */
.rs-cart{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-left:10px; color:var(--ink); transition:color .2s, opacity .2s; }
.rs-cart:hover{ color:var(--brand); }
.rs-cart-count{ position:absolute; top:-1px; right:-3px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--brand); color:#fff; font-family:var(--sans); font-size:10.5px;
  font-weight:600; line-height:1; display:none; align-items:center; justify-content:center; }
.rs-cart-count.has{ display:inline-flex; }
header#hdr.accent .rs-cart{ color:#fff; }
header#hdr.accent .rs-cart:hover{ color:#fff; opacity:.8; }
header#hdr.accent .rs-cart-count{ background:#fff; color:var(--accent); }

/* ---------- IL VELO FRA UNA PAGINA E L'ALTRA ----------
   Un telo avorio cala dall'alto col monogramma al centro, e sulla pagina che
   si apre risale scoprendola: lo stesso gesto del sipario d'ingresso, prima
   in discesa. Il monogramma non e' incollato al telo — entra un attimo dopo
   ed esce un attimo prima — cosi' mezzo secondo basta a leggerlo come gesto
   e non come lampo. Le regole indispensabili sono ripetute in testa a ogni
   pagina (<style> critico): devono valere prima ancora che questo foglio
   sia stato scaricato, altrimenti in arrivo si vedrebbe la pagina scoperta. */
#rsVelo{ position:fixed; inset:0; z-index:500; background:var(--paper);
  transform:translateY(-100%); pointer-events:none; will-change:transform;
  display:flex; align-items:center; justify-content:center; }
/* Il monogramma e' una MASCHERA, non un'immagine: cosi' prende il colore
   della sezione. In arrivo il colore viene dal tema della pagina (body
   .rs-theme-*); in partenza velo.js mette sul telo la classe della
   DESTINAZIONE, che vince perche' dichiarata dopo. Bordeaux per tutto il
   resto: home, pasticceria, locali, shop e pagine legali. */
#rsVelo .rs-velo-mono{ width:min(210px,38vw); aspect-ratio:595.5/842.25; opacity:0;
  background:var(--brand);
  -webkit-mask:url("/assets/monogramma.svg") no-repeat center / contain;
  mask:url("/assets/monogramma.svg") no-repeat center / contain;
  transform:translateY(14px) scale(.94); }
body.rs-theme-storia #rsVelo .rs-velo-mono{ background:#b3924f; }
body.rs-theme-catering #rsVelo .rs-velo-mono{ background:#8f959c; }
html #rsVelo.rs-velo--storia .rs-velo-mono{ background:#b3924f; }
html #rsVelo.rs-velo--catering .rs-velo-mono{ background:#8f959c; }
html #rsVelo.rs-velo--brand .rs-velo-mono{ background:var(--brand); }
/* discesa: accelera, come qualcosa che cade */
#rsVelo.cala{ transform:translateY(0); pointer-events:auto;
  transition:transform .44s cubic-bezier(.5,.05,.55,.95); }
#rsVelo.cala .rs-velo-mono{ opacity:1; transform:none;
  transition:opacity .3s ease .2s, transform .42s cubic-bezier(.22,1,.32,1) .2s; }
/* in arrivo il telo e' gia' calato e fermo: lo si vede all'apertura */
html.rs-in-arrivo #rsVelo{ transform:translateY(0); }
html.rs-in-arrivo #rsVelo .rs-velo-mono{ opacity:1; transform:none; }
/* risalita: parte decisa e frena; il monogramma se ne va per primo.
   I selettori ripetono html.rs-in-arrivo perche' altrimenti la regola che
   tiene il telo calato in arrivo (html.rs-in-arrivo #rsVelo) sarebbe piu'
   specifica di questa e vincerebbe: il telo scenderebbe e non risalirebbe
   mai, sparendo di colpo a fine animazione. */
#rsVelo.alza,
html.rs-in-arrivo #rsVelo.alza{ transform:translateY(-100%);
  transition:transform .56s cubic-bezier(.22,1,.32,1); }
#rsVelo.alza .rs-velo-mono,
html.rs-in-arrivo #rsVelo.alza .rs-velo-mono{ opacity:0; transform:translateY(-12px);
  transition:opacity .24s ease, transform .32s ease; }
@media (prefers-reduced-motion:reduce){
  #rsVelo, html.rs-in-arrivo #rsVelo{ display:none; }
}

/* ---------- HERO ---------- */
/* HOME: le scene scorrono DA SOLE (slideshow automatico), lo scroll della
   pagina resta libero. Nelle sottopagine .hero-scroll--sub resta l'effetto
   legato allo scroll. */
.hero-scroll{ position:relative; height:100svh; }
.hero-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; background:#1a1410; }
/* Ken Burns come nel riferimento (rosasalva.org/dev): la fotografia entra
   gia' in movimento e non si ferma mai — continua a crescere anche mentre
   sfuma via, cosi' fra una scena e l'altra il movimento non ha mai una
   giuntura. La corsa dura quanto la vita visibile della scena (4 s di
   permanenza + 1,2 s di dissolvenza = 5,2 s), quindi arriva in fondo
   esattamente quando la foto e' sparita. Lineare: una curva qui si
   sentirebbe come un'accelerazione. */
.hero-scroll:not(.hero-scroll--sub) .frame{ transition:opacity 1.2s ease, transform 5.2s linear; }
.frame{ position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; will-change:opacity,transform; }
/* Le sei scene sono fotografie vere, non sfondi: cosi' Google le vede e
   possono avere un testo alternativo. Riempiono la scena come faceva lo
   sfondo (object-fit:cover), e non intercettano il cursore. */
.frame__ph{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; pointer-events:none; }
.frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Il velo sulle scene. Ora la didascalia sta a meta' altezza, sotto il
   marchio, non piu' appoggiata al fondo: la curva scende meno in fretta e
   tiene coperta tutta la fascia centrale, dove prima era quasi trasparente
   e il bianco si perdeva sulle fotografie chiare. */
.frame::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(20,16,12,.78) 0%, rgba(20,16,12,.58) 28%,
    rgba(20,16,12,.46) 55%, rgba(20,16,12,.32) 78%, rgba(20,16,12,.44) 100%); }
/* la scena dello shop e' su fondo bianco da studio: le serve un velo
   piu' deciso, altrimenti la didascalia chiara ci sparisce sopra */
.frame--chiara::after{
  background:linear-gradient(to top,
    rgba(20,16,12,.86) 0%, rgba(20,16,12,.70) 28%,
    rgba(20,16,12,.60) 55%, rgba(20,16,12,.48) 78%, rgba(20,16,12,.58) 100%); }
/* La didascalia sta al centro dell'hero. Fino al 24/09/2026 sopra c'era il
   marchio che si componeva scena dopo scena e volava nella barra: Gio l'ha
   tolto, e lo spazio e' andato alle parole (TRAMANDARE, RICEVERE...), piu'
   grandi, e alla frase sotto. Il padding in cima lascia l'aria della barra. */
.hero-ui{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  justify-content:center; padding:14vh 0 9vh 0; color:var(--paper); }
.hero-ui .wrap{ width:100%; position:relative; }
/* titolo fisso: lo usano le pagine interne (es. Catering), dove l'hero non
   ruota e il titolo resta uno solo */
.hero-kicker{ font-size:12.5px; letter-spacing:.5em; text-transform:uppercase;
  color:#f0e4cf; opacity:.92; margin-bottom:14px; }
.hero-title{ font-family:var(--serif); font-weight:600; line-height:.98;
  font-size:clamp(48px,8.5vw,120px); letter-spacing:-.01em; max-width:14ch; }
.hero-sub{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,2.4vw,30px);
  margin-top:14px; color:#efe6d6; font-weight:500; max-width:32ch; }
/* Le sei didascalie stanno impilate: entra quella della scena corrente.
   Sono in flusso normale (non assolute) solo per la prima, cosi' la
   sezione conserva la sua altezza naturale anche senza JS. */
/* Le frasi si scambiano in dissolvenza incrociata, come nel riferimento di
   Gio (registrazione 14.05.19): la nuova arriva da poco sotto, la vecchia se
   ne va poco sopra, e per quasi un secondo convivono sfumando una nell'altra.
   Il movimento e' una deriva, non uno scatto; la direzione resta una sola. */
.hero-cap{ position:absolute; left:0; right:0; top:0; opacity:0; visibility:hidden;
  transition:opacity 1.1s ease, transform 1.1s ease, visibility 1.1s;
  transform:translateY(20px); pointer-events:none; text-align:center; }
.hero-cap[data-c="0"]{ position:relative; }
.hero-cap.on{ opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity 1.5s ease, transform 1.5s cubic-bezier(.22,.61,.36,1), visibility 1.5s; }
/* in uscita continua a salire, invece di ridiscendere da dove era venuta */
.hero-cap.esce{ opacity:0; visibility:hidden; transform:translateY(-17px); }
.hero-over{ display:block; font-size:14.5px; letter-spacing:.42em; text-transform:uppercase;
  color:#e6d2ac; margin-bottom:26px; font-weight:500; }
/* le sei frasi sono descrittive, non titoli brevi: riga contenuta e testo
   centrato sotto la parola, in colonna con lei */
.hero-t{ font-family:var(--serif); font-weight:500; line-height:1.22;
  font-size:clamp(24px,2.9vw,42px); letter-spacing:0; max-width:26ch;
  margin:0 auto; }
.hero-cta{ display:inline-block; margin-top:40px; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; text-decoration:none; padding-bottom:5px;
  border-bottom:1px solid var(--gold); transition:color .3s ease, border-color .3s ease, gap .3s ease; }
.hero-cta::after{ content:" →"; }
.hero-cta:hover{ color:var(--gold); border-color:#fff; }
/* Telefono: la didascalia va al centro e cresce. In verticale il testo
   allineato a sinistra lascia un vuoto sulla destra e sembra piccolo;
   centrato e piu' grande riempie la colonna. */
@media (max-width:760px){
  /* in verticale la didascalia sale piu' in alto, dove il velo era tenue:
     qui scende piu' gradualmente e copre tutta la fascia del testo */
  .frame::after{ background:linear-gradient(to top,
    rgba(20,16,12,.80) 0%, rgba(20,16,12,.62) 30%,
    rgba(20,16,12,.26) 62%, rgba(20,16,12,.44) 100%); }
  .frame--chiara::after{ background:linear-gradient(to top,
    rgba(20,16,12,.88) 0%, rgba(20,16,12,.72) 30%,
    rgba(20,16,12,.42) 62%, rgba(20,16,12,.58) 100%); }
  .hero-ui{ padding:12vh 0 10vh 0; }
  .hero-cap{ text-align:center; }
  .hero-over{ font-size:13px; letter-spacing:.34em; margin-bottom:18px; }
  .hero-t{ font-size:clamp(21px,5.7vw,28px); line-height:1.26; max-width:21ch;
    margin-left:auto; margin-right:auto; }
  .hero-cta{ margin-top:30px; }
}
/* telefoni bassi (SE, mini): il corpo scende quel tanto che basta a tenere
   la didascalia intera fra la barra e il fondo */
@media (max-width:760px) and (max-height:700px){
  .hero-t{ font-size:clamp(19px,5.1vw,24px); max-width:22ch; }
  .hero-parola{ font-size:clamp(28px,9.2vw,40px); }
  .hero-ui{ padding:11vh 0 8vh 0; }
}
.hero-rule{ display:flex; gap:8px; margin-top:34px; }
.hero-rule i{ width:34px; height:3px; border-radius:2px; background:rgba(255,255,255,.32); transition:.4s; }
.hero-rule i.on{ background:var(--gold); width:50px; }

header#hdr .brand{ transition:opacity .5s ease, visibility .5s ease,
  width .55s cubic-bezier(.76,0,.24,1); }
@media (prefers-reduced-motion:reduce){
  /* niente Ken Burns per chi ha chiesto meno movimento: la scena resta
     ferma. Lo slideshow non parte comunque (home.js non fa partire il
     timer), ma la prima scena riceve lo stesso il suo transform. */
  .hero-scroll .frame{ transition:none; }
}
/* (scroll-hint "SCORRI" rimosso su richiesta di Gio) */

/* ---------- LE VOCI DI CASA ----------
   Sei frasi in corsivo, una per mondo, che si danno il cambio sotto le card
   con la stessa dissolvenza incrociata dell'hero. Il contenitore e' alto
   quanto serve alla piu' lunga, cosi' la pagina non balla al cambio. */
.rs-voci{ padding:10px 32px 96px; }
.rs-voci-in{ position:relative; max-width:820px; margin:0 auto; min-height:132px; }
.rs-voce{ position:absolute; inset:0; margin:0; display:flex;
  align-items:center; justify-content:center; text-align:center;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(19px,2.1vw,25px); line-height:1.5; color:var(--muted);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .7s ease, transform .7s ease, visibility .7s; }
.rs-voce.on{ opacity:1; visibility:visible; transform:none;
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1), visibility .9s; }
.rs-voce.esce{ opacity:0; visibility:hidden; transform:translateY(-10px); }
@media (max-width:760px){
  .rs-voci{ padding:0 22px 72px; }
  .rs-voci-in{ min-height:168px; }
}
@media (prefers-reduced-motion:reduce){
  .rs-voce{ transition:none; }
}

/* ---------- SEZIONI ---------- */
section.block{ padding:120px 0; }
/* .block e .wrap sulla stessa sezione: section.block vince per specificita' e
   azzerava i margini laterali. Li ripristino esplicitamente. */
section.block.wrap{ padding-left:32px; padding-right:32px; }
.eyebrow{ font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:var(--brand); font-weight:600; }
.h2{ font-family:var(--serif); font-weight:600; font-size:clamp(34px,5vw,64px); line-height:1.02;
  letter-spacing:-.01em; margin-top:14px; }
.lead{ font-family:var(--serif); font-size:clamp(18px,2vw,23px); color:#4a3f38; max-width:60ch;
  margin-top:20px; line-height:1.5; }

/* mondi — schede con illustrazione a tratto in filigrana */
/* Due card per riga: cosi' sono larghe abbastanza perche' il disegno
   viva accanto al testo invece che sotto, e si veda per intero. */
.mondi{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:54px; }
/* Le due animazioni convivono grazie alle variabili: --rx/--ry le da'
   l'inclinazione al mouse, --ty il sollevamento, --par la parallasse
   del disegno. Nessuna delle due sovrascrive l'altra. */
.mondo{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--paper2);
  border-radius:14px; padding:30px 28px 26px; min-height:296px; display:flex;
  flex-direction:column; justify-content:flex-end; color:var(--ink); cursor:pointer;
  --rx:0deg; --ry:0deg; --ty:0px; transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty));
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease; }
.mondo:hover{ --ty:-3px; box-shadow:0 16px 40px rgba(35,25,26,.09); border-color:#e0d4c2; }
/* mentre il mouse la muove, la card segue senza inerzia */
.mondo.rs-tilt{ transition:box-shadow .35s ease, border-color .35s ease; }
/* Il disegno occupa la meta' destra della card, intero e ben leggibile:
   non e' piu' una filigrana sotto il testo ma l'illustrazione accanto. */
/* La misura che conta e' la LARGHEZZA: i disegni sono quasi quadrati
   (585x640), quindi fissare l'altezza li faceva dilagare sul testo. */
/* I sei disegni hanno proporzioni diverse (da 0,74 a 0,92): si vincola
   l'ALTEZZA, uguale per tutti, e la larghezza segue. Cosi' nessuno viene
   tagliato e restano allineati fra loro. Il max-width e' la rete di
   sicurezza perche' i piu' larghi non arrivino sul testo. */
/* I disegni originali a colori (seppia su carta damascata, dal vecchio
   sito): ogni card ne ha DUE sovrapposti, la posa di base e la sua
   variante. Al passaggio del mouse la seconda emerge sulla prima: il
   personaggio "si muove". Le variabili del parallasse (--par/--sc) ora
   vivono sulla card, cosi' i due livelli si muovono insieme. */
.mondo{ --par:0px; --sc:1; }
/* Il disegno sta DENTRO la card: piu' alto del 100% verrebbe tagliato dal
   bordo (la card nasconde cio' che esce). Cresce verso l'angolo in basso a
   destra, cioe' verso l'interno, cosi' nemmeno l'ingrandimento lo fa
   sbordare. */
.mondo__dis{ position:absolute; right:12px; bottom:12px; height:88%; width:auto; max-width:54%; z-index:0;
  object-fit:contain; object-position:bottom right; pointer-events:none;
  opacity:.92; transform-origin:bottom right;
  transform:translate3d(0,var(--par),0) scale(var(--sc));
  will-change:transform; }
.mondo:hover{ --sc:1.02; }
/* Le due pose si sciolgono l'una nell'altra: stessa durata, nessun ritardo.
   A meta' strada sono a mezza tinta tutte e due, e due mezze tinte
   sovrapposte restano piu' chiare di una piena — quindi nessuna doppia
   stampa e nessun lampo di bianco nel mezzo. */
.mondo__dis{ transition:opacity .5s ease; }
.mondo__dis--h{ opacity:0; }
.mondo:hover .mondo__dis:not(.mondo__dis--h){ opacity:0; }
.mondo:hover .mondo__dis--h{ opacity:.92; }
/* Velo cortissimo: serve solo a tenere pulito il bordo dove il testo
   sfiora il disegno. Sopra il disegno (z-index 1), sotto le parole (2). */
.mondo::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg,
    #fff 0%, #fff 40%, rgba(255,255,255,.85) 52%, rgba(255,255,255,0) 66%); }
.mondo .lab{ position:relative; z-index:2; max-width:52%; }
/* Ogni card porta il colore del suo mondo. Sono gli stessi accenti che le
   pagine usano al loro interno (body.rs-theme-*), presi nella tonalita' piu'
   profonda: sul bianco della card l'oro e l'argento chiari scendevano sotto
   il rapporto di contrasto minimo (2,94:1 e 3,02:1 contro il 3:1 richiesto
   per un titolo di questo corpo). Ora il piu' debole sta a 4,44:1. */
.mondo{ --card:var(--brand); }
.mondo--storia{ --card:#8f7439; }   /* oro */
.mondo--catering{ --card:#6d737a; } /* argento */
.mondo--past{ --card:#9f2118; }     /* bordeaux */
.mondo--hotel{ --card:#1e4148; }    /* ottanio, come il sito dell'hotel */
.mondo--locali{ --card:#5c5349; }   /* pietra d'Istria */
.mondo--shop{ --card:#6a4b32; }     /* cioccolato */
/* Sopratitolo e titolo portano tutti e due il colore del loro mondo. Il piu'
   debole dei sei (l'oro, 4,44:1 sul bianco) resta sopra il 3:1 richiesto per
   un titolo di questo corpo. */
.mondo .lab .ov{ display:block; font-family:var(--sans); font-size:11.5px;
  letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  color:var(--card); margin-bottom:11px; }
.mondo .lab .t{ font-family:var(--serif); font-size:29px; font-weight:700;
  line-height:1.08; color:var(--card); }
.mondo .lab .s{ font-family:var(--serif); font-size:16px; line-height:1.45; color:#4a3f38; margin-top:9px; }
/* il richiamo e' l'invito al clic: bordeaux, non piu' grigio in filigrana */
.mondo .lab .c{ font-family:var(--serif); font-style:italic; font-size:14.5px; margin-top:12px;
  color:var(--card); font-weight:600; transition:color .25s ease, transform .25s ease; }
.mondo:hover .lab .c{ color:var(--ink); transform:translateX(3px); }
/* Sul telefono una card per riga, sei righe: la card resta larga e il
   disegno continua a vedersi accanto al testo. */
@media (max-width:760px){
  .mondi{ grid-template-columns:1fr; gap:14px; }
  /* una card per riga: larga ~335px, disegno 42% = 141x155 -> serve
     un'altezza che lo contenga tutto, parallasse compresa */
  .mondo{ min-height:214px; padding:26px 24px 24px; }
  .mondo .lab{ max-width:54%; }
  /* niente opacita' qui: i disegni ora sono a colori, e la regola avrebbe
     acceso anche il livello hover (stessa specificita', arriva dopo) */
  .mondo__dis{ height:84%; max-width:50%; right:8px; bottom:10px; }
}
@media (max-width:420px){
  .mondo{ min-height:206px; }
  .mondo .lab{ max-width:56%; }
  .mondo .lab .t{ font-size:26px; }
  .mondo__dis{ height:82%; max-width:48%; }
}
/* niente inclinazione dove non c'e' un mouse, e niente movimento per chi
   ha chiesto meno animazioni */
@media (hover:none),(pointer:coarse){
  .mondo{ transform:translateY(var(--ty)); }
}
@media (prefers-reduced-motion:reduce){
  .mondo{ transform:none; }
  .mondo__dis{ transform:none; }
}

/* heritage */
.heritage{ background:var(--brand); color:var(--paper); text-align:center; }
.heritage .h2{ color:var(--paper); }
.heritage .eyebrow{ color:#f0d9bf; }
.heritage .lead{ color:#f3e7d8; margin:20px auto 0; }
.timeline{ display:flex; justify-content:center; gap:0; flex-wrap:wrap; margin-top:60px;
  border-top:1px solid rgba(255,255,255,.22); padding-top:8px; }
.tl{ flex:1; min-width:120px; padding:26px 10px; border-right:1px solid rgba(255,255,255,.14);
  transition:background .3s; }
.tl:last-child{ border-right:none; }
.tl:hover{ background:rgba(0,0,0,.10); }
.tl .y{ font-family:var(--serif); font-size:30px; font-weight:600; color:#f0d9bf; }
.tl .d{ font-size:12px; line-height:1.5; color:#f1e4d4; margin-top:8px; opacity:.9; }

/* locali */
.locali-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; margin-top:50px;
  background:var(--paper2); border:1px solid var(--paper2); }
.loc{ background:var(--paper); padding:30px 28px; transition:background .3s; }
.loc:hover{ background:#fbf7ef; }
.loc .n{ font-family:var(--serif); font-size:25px; font-weight:600; }
.loc .a{ font-size:13.5px; color:var(--muted); margin-top:7px; line-height:1.5; }
.loc .o{ font-size:12px; letter-spacing:.06em; color:var(--brand); margin-top:12px; font-weight:500; }

/* ---------- FOOTER ---------- */
footer.site-footer{ background:#221a18; color:#d8cdbf; padding:80px 0 36px; }

/* fascia newsletter sopra le colonne */
.fnews{ display:grid; grid-template-columns:1.2fr 1fr; gap:14px 40px; align-items:center;
  padding-bottom:38px; margin-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12); }
.fnews h4{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#b3924f; margin-bottom:8px; }
.fnews p{ font-size:14px; color:#ccc0b1; line-height:1.6; }
.rs-nl{ display:flex; gap:10px; justify-self:end; width:100%; max-width:440px; }
.rs-nl input[type="email"]{ flex:1; min-width:0; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:999px; padding:12px 20px;
  font-family:var(--sans); font-size:13.5px; }
.rs-nl input[type="email"]::placeholder{ color:#8e8377; }
.rs-nl input[type="email"]:focus{ outline:none; border-color:#b3924f; }
.rs-nl button{ background:transparent; color:#b3924f; border:1.5px solid #b3924f; border-radius:999px;
  padding:12px 26px; font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; cursor:pointer; transition:background .25s ease, color .25s ease; white-space:nowrap; }
.rs-nl button:hover{ background:#b3924f; color:#221a18; }
.rs-nl-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.rs-nl-note{ grid-column:1 / -1; font-size:11.5px !important; color:#8e8377 !important; }
.rs-nl-ok, .rs-nl-err{ grid-column:1 / -1; font-size:14px !important; font-weight:600; }
.rs-nl-ok{ color:#b3924f !important; }
.rs-nl-err{ color:#e2a69b !important; }
.fsocial a{ display:inline !important; }

.fgrid{ display:grid; grid-template-columns:auto 1fr 1.15fr 1fr; gap:40px 52px; align-items:start; }
.fcol h4{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#b3924f; margin-bottom:16px; }
.fcol p,.fcol a{ font-size:14px; line-height:1.9; color:#ccc0b1; display:block; }
.fcol a:hover{ color:#fff; }
.flogo{ height:54px; margin-bottom:18px; filter:brightness(0) invert(1); opacity:.92; max-width:none; }
/* Nel footer il marchio esteso sta SOPRA il disegno a matita, e prende il
   colore della sezione (ottanio sull'hotel, argento sul catering, oro sulla
   storia, bordeaux sulla pasticceria). Il logo e' una maschera: il colore
   arriva da --accent, quindi cambia da solo pagina per pagina. */
/* La colonna e' stretta sul disegno (inline-flex): il logo si centra
   esattamente sul suo asse, come chiesto da Gio. */
.rs-foot-brand{ display:inline-flex; flex-direction:column; align-items:center; }
.fcol--brand{ display:flex; flex-direction:column; align-items:center; }
/* larghezza FISSA: e' il logo a dare la misura della colonna, il disegno
   si centra sotto di lui. Con una larghezza in percento collasserebbe
   sulla larghezza del disegno, che e' piu' stretto. */
.rs-foot-logo{ display:block; width:240px; aspect-ratio:765/253;
  background-color:var(--foot-accent);
  /* 100% 100% e non "contain": il file dichiara 1123x794, con contain il disegno (765x253)
     restava una striscia piccola al centro del riquadro. Cosi' il logo occupa tutti i 240px,
     come nel piede dell'hotel (Gio, 20/10/2026) */
  -webkit-mask:url("/assets/img/hero-storico/logo-completo-bordeaux.svg") no-repeat center / 100% 100%;
  mask:url("/assets/img/hero-storico/logo-completo-bordeaux.svg") no-repeat center / 100% 100%;
  margin-bottom:16px; }
/* sul fondo scuro del footer gli accenti scuri sparirebbero: si schiariscono */
footer.site-footer{ --foot-accent:#d16b60; }
body.rs-theme-hotel footer.site-footer{ --foot-accent:#5f8f92; }
body.rs-theme-catering footer.site-footer{ --foot-accent:#b9bec4; }
body.rs-theme-storia footer.site-footer{ --foot-accent:#d3b269; }
body.rs-theme-pasticceria footer.site-footer{ --foot-accent:#d16b60; }
/* illustrazione a matita del footer: linee chiare su fondo scuro.
   Due pose che si sciolgono l'una nell'altra al passaggio del mouse,
   come nelle card della home. */
.rs-foot-disegno{ position:relative; display:block; }
.rs-foot-draw{ display:block; height:250px; width:auto; max-width:100%;
  filter:invert(1); mix-blend-mode:screen; opacity:.9;
  transition:opacity .5s ease; }
.rs-foot-draw--h{ position:absolute; inset:0; opacity:0; }
.rs-foot-disegno:hover .rs-foot-draw:not(.rs-foot-draw--h){ opacity:0; }
.rs-foot-disegno:hover .rs-foot-draw--h{ opacity:.9; }
.fbar{ margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 26px; font-size:11.5px; color:#8e8377; letter-spacing:.04em; }
.fbar-links a, .fbar-lang a{ color:#a89c8e; }
.fbar-links a:hover, .fbar-lang a:hover{ color:#fff; }
.fbar-lang{ flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px 18px; }

/* colonna contatti: recapiti e cerchi social, come nel sito di riferimento */
.fcol--contatti .rs-foot-social{ display:flex; gap:12px; margin-top:16px; }
.fcol .rs-foot-social a{ display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid rgba(255,255,255,.28); border-radius:50%; color:#ccc0b1; line-height:0;
  transition:color .25s ease, border-color .25s ease, background-color .25s ease; }
.fcol .rs-foot-social a:hover{ color:#221a18; background:#ccc0b1; border-color:#ccc0b1; }
.rs-foot-social svg{ width:17px; height:17px; display:block; }

/* fascia del gruppo: gli scudetti delle tre anime e i due marchi (ANBC, Marchio Storico) */
.fgruppo{ margin-top:44px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px 32px; }
.rs-foot-gruppo{ display:flex; flex-wrap:wrap; gap:10px 30px; }
.rs-scudetto{ display:inline-flex; align-items:center; gap:10px; color:#ccc0b1; font-size:14px; transition:color .25s ease; }
footer.site-footer img.rs-scudo{ width:20px !important; height:22px !important; flex:none; opacity:.9; transition:opacity .25s ease; margin:0; }
.rs-scudetto:hover{ color:#fff; }
.rs-scudetto:hover .rs-scudo{ opacity:1; }
.rs-foot-marks{ display:flex; align-items:center; gap:26px; }
.rs-foot-marks a{ display:block; line-height:0; }
footer.site-footer img.rs-foot-anbc{ height:42px !important; width:auto !important; opacity:.9; transition:opacity .25s ease; }
.rs-foot-marks a:hover img.rs-foot-anbc{ opacity:1; }
.rs-foot-marks img.rs-foot-marchio{ margin-top:0 !important; }
.badge{ position:fixed; left:14px; bottom:14px; z-index:130; background:var(--brand); color:#fff;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; padding:7px 12px; border-radius:20px;
  box-shadow:0 6px 20px rgba(0,0,0,.2); font-weight:600; }

/* ---------- Contenuti interni (fallback, articoli, pagine) ---------- */
.rs-wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }
/* pagina legale (Condizioni di Vendita) */
.rs-legal{ max-width:820px; }
.rs-legal p{ line-height:1.75; margin:12px 0; font-size:15px; }
.rs-legal p strong{ display:block; margin-top:26px; letter-spacing:.04em; }
.rs-legal hr{ margin:44px 0; border:none; border-top:1px solid var(--paper2); }
.rs-content{ padding:160px 24px 120px; min-height:60vh; }
.rs-content h1{ font-family:var(--serif); font-weight:600; font-size:clamp(34px,5vw,56px); }
.rs-content p{ line-height:1.7; margin:14px 0; }

/* ---------- SHOP (WooCommerce) — editoriale, zona prodotti BIANCA ---------- */
.rs-shop-main{ padding:150px 0 110px; min-height:70vh; }
.rs-shop-main .woocommerce-products-header{ text-align:center; margin-bottom:8px; }
.rs-shop-main .woocommerce-products-header__title,
.rs-shop-main h1.product_title{
  font-family:var(--serif); font-weight:600; font-size:clamp(38px,5vw,62px);
  line-height:1.05; letter-spacing:-.01em; }
.rs-shop-main .woocommerce-breadcrumb{ font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:22px; text-align:center; }
.rs-shop-main .woocommerce-breadcrumb a{ color:var(--accent); }

/* barra strumenti: sobria, senza righe */
.rs-shop-main .woocommerce-result-count{ color:var(--muted); font-size:11.5px;
  letter-spacing:.14em; text-transform:uppercase; margin:6px 0 0; }
.rs-shop-main .woocommerce-ordering{ margin:0; }
.rs-shop-main .woocommerce-ordering select{ font-family:var(--sans); font-size:12.5px;
  padding:8px 4px; border:none; border-bottom:1px solid var(--paper2); border-radius:0;
  background:transparent; color:var(--muted); cursor:pointer; }
.rs-shop-main .rs-shop-toolbar{ display:flex; justify-content:space-between; align-items:center; }

/* griglia prodotti — 3 colonne, foto più grandi. Nessun "pannello": lo sfondo
   delle pagine shop è già tutto bianco (body.rs-internal), senza stacchi. */
.rs-shop-main ul.products{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:52px 40px; margin:30px 0 0 !important; list-style:none;
  background:transparent; border-radius:0; padding:26px 0 !important;
  box-shadow:none; }
/* WooCommerce mette un clearfix ::before/::after: in una griglia occupa una
   cella e crea il "buco" a sinistra. Lo disattivo. */
.rs-shop-main ul.products::before,
.rs-shop-main ul.products::after{ content:none !important; display:none !important; }
.rs-shop-main ul.products li.product{ width:auto !important; margin:0 !important;
  float:none !important; text-align:center; position:relative; }
.rs-shop-main li.product a.woocommerce-LoopProduct-link{ display:block; position:relative; }
/* SOLO la thumbnail è il riquadro quadrato: nome e prezzo restano sotto */
.rs-shop-main li.product .rs-thumb{ display:block; position:relative; aspect-ratio:1/1;
  border-radius:16px; overflow:hidden; background:#fff; }
.rs-shop-main li.product .rs-thumb > img{
  position:absolute; inset:0; width:100% !important; height:100% !important;
  object-fit:contain; display:block;
  transition:transform 1s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
.rs-shop-main li.product:hover .rs-thumb > img:first-of-type{ transform:scale(1.05); }

/* crossfade sulla SECONDA foto in hover (anch'essa intera) */
.rs-card-img2{ position:absolute; inset:0; width:100% !important; height:100% !important;
  object-fit:contain; background:#fff; opacity:0; transition:opacity .55s ease; pointer-events:none; }
.rs-shop-main li.product:hover .rs-card-img2{ opacity:1; }

/* video hover (quando arriverà la clip: vince sulla foto) */
.rs-card-video{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .45s ease; pointer-events:none; }
li.product.rs-video-on .rs-card-video{ opacity:1; }

.rs-shop-main li.product .woocommerce-loop-product__title{
  font-family:var(--serif); font-size:21px; font-weight:600; color:var(--ink);
  padding:18px 6px 0 !important; line-height:1.15; }
.rs-shop-main li.product .price{ display:block; padding:6px 6px 2px; color:var(--price) !important;
  font-weight:500; font-size:14px; font-family:var(--sans); letter-spacing:.04em; }
.rs-shop-main li.product .price del{ color:var(--muted) !important; font-weight:400; margin-right:8px; }
.rs-shop-main li.product .price ins{ text-decoration:none; color:var(--price); font-weight:700; }

/* bottone: ghost, si riempie in hover */
.rs-shop-main li.product .button{
  display:inline-block; margin:12px 0 4px; padding:10px 22px; background:transparent;
  color:var(--accent) !important; border:1px solid var(--accent); border-radius:999px;
  font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; transition:background .25s ease, color .25s ease; cursor:pointer; }
.rs-shop-main li.product .button:hover{ background:var(--accent); color:#fff !important; }
.rs-shop-main li.product .added_to_cart{ display:block; margin-top:8px; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }

/* badge sconto: piccola targhetta "-X%" sopra l'immagine (in alto a sinistra) */
span.onsale{ position:absolute !important; top:10px !important; left:10px !important;
  right:auto !important; bottom:auto !important; margin:0 !important; z-index:3;
  min-height:0 !important; min-width:0 !important;
  background:var(--gold) !important; color:#fff !important; font-family:var(--sans) !important;
  font-size:12px !important; font-weight:600 !important; letter-spacing:.02em !important;
  text-transform:none !important; line-height:1 !important; padding:5px 9px !important;
  border-radius:7px !important; box-shadow:0 4px 12px rgba(35,25,26,.18); }

/* ---- scheda prodotto singolo ---- */
.rs-shop-main div.product{ background:#fff; border-radius:26px; padding:48px;
  box-shadow:0 30px 80px rgba(35,25,26,.07); margin-top:30px; }
.rs-shop-main div.product .woocommerce-product-gallery{ border-radius:16px; overflow:hidden; }
.rs-shop-main div.product .price{ color:var(--price) !important; font-size:24px;
  font-weight:600; font-family:var(--sans); }
.rs-shop-main div.product .woocommerce-product-details__short-description{
  font-family:var(--serif); font-size:19px; color:#4a3f38; line-height:1.6; margin:14px 0 22px; }
.rs-shop-main form.cart{ display:flex; align-items:center; gap:14px; margin:18px 0 26px; }
.rs-shop-main form.cart .quantity .qty{ padding:12px; border:1px solid var(--paper2);
  border-radius:999px; width:74px; text-align:center; font-family:var(--sans); }
.rs-shop-main .wc-block-components-button,
.rs-shop-main .checkout-button,
.rs-shop-main .wp-element-button{
  background:var(--accent) !important; color:#fff !important; border:none !important;
  border-radius:999px !important; padding:14px 30px !important; font-family:var(--sans) !important;
  font-size:12px !important; letter-spacing:.14em !important; text-transform:uppercase !important;
  font-weight:600 !important; transition:background .25s ease !important; cursor:pointer; }
.rs-shop-main .wp-element-button:hover{ background:var(--accent-d) !important; }
/* "Aggiungi al carrello": a contorno come lo shop online (pill, bordo bordeaux) */
.rs-shop-main .single_add_to_cart_button,
.rs-shop-main button.single_add_to_cart_button.alt{
  background:transparent !important; color:var(--accent) !important;
  border:1.5px solid var(--accent) !important;
  border-radius:999px !important; padding:14px 34px !important; font-family:var(--sans) !important;
  font-size:12px !important; letter-spacing:.14em !important; text-transform:uppercase !important;
  font-weight:600 !important; transition:background .25s ease, color .25s ease !important; cursor:pointer; }
.rs-shop-main .single_add_to_cart_button:hover,
.rs-shop-main button.single_add_to_cart_button.alt:hover{
  background:var(--accent) !important; color:#fff !important; }
.rs-shop-main .product_meta .sku_wrapper{ display:none; } /* niente COD in vetrina */
.rs-shop-main .product_meta{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); }
.rs-shop-main .product_meta a{ color:var(--accent); }
.rs-shop-main .woocommerce-tabs{ margin-top:30px; }

/* notice/messaggi */
.rs-shop-main .woocommerce-message,.rs-shop-main .woocommerce-info{
  border-top-color:var(--accent); background:#fbf7ef; }

/* ---- strisce: I più venduti / In offerta ---- */
.rs-strip{ padding:26px 0 8px; }
.rs-strip + .rs-strip{ padding-top:56px; }
.rs-strip-head{ text-align:center; margin-bottom:36px; }
.rs-strip-head .h2{ font-size:clamp(30px,4vw,50px); }
.rs-strip-sub{ color:var(--muted); margin-top:10px; font-size:16px; }
.rs-strip-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; }
.rs-strip-center{ display:flex; flex-wrap:wrap; justify-content:center; }
.rs-strip-center .rs-scard{ flex:0 0 calc((100% - 90px)/4); }

/* carosello "I più venduti": una riga che scorre (frecce + puntini) */
/* overflow:clip + margine/padding speculari: contiene lo sbordo del marquee
   senza tagliare le frecce (che sporgono di 20px). Evita che su mobile la
   pagina si allarghi e faccia sparire il menu. */
/* overflow VISIBILE: le frecce sporgono di 20px e non devono essere tagliate.
   Lo sbordo orizzontale è già contenuto da html/body{overflow-x:clip} e dalla
   pista stessa (.rs-car-track ha overflow-x:auto e scorre al suo interno). */
.rs-carousel{ position:relative; overflow:visible; margin-inline:-26px; padding-inline:26px; }
/* NIENTE scroll-snap: il marquee avanza di 0.5px a frame e lo snap "mandatory"
   lo riporterebbe indietro a ogni frame, bloccando lo scorrimento automatico. */
.rs-car-track{ display:flex; gap:30px; overflow-x:auto;
  scrollbar-width:none; padding:6px 2px; min-width:0; max-width:100%; }
.rs-car-track::-webkit-scrollbar{ display:none; }
.rs-car-track .rs-scard{ flex:0 0 calc((100% - 90px)/4); }
.rs-car-nav{ position:absolute; top:36%; transform:translateY(-50%); z-index:4;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--paper2); background:#fff;
  color:var(--accent); font-size:24px; line-height:1; cursor:pointer; display:flex;
  align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(35,25,26,.12);
  transition:background .2s, color .2s, opacity .2s; }
.rs-car-nav:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.rs-car-nav[disabled]{ opacity:.3; cursor:default; }
.rs-car-prev{ left:-20px; }
.rs-car-next{ right:-20px; }
.rs-car-dots{ display:flex; gap:9px; justify-content:center; margin-top:28px; }
.rs-car-dots button{ width:9px; height:9px; padding:0; border:none; border-radius:50%;
  background:#dcd2c0; cursor:pointer; transition:.2s; }
.rs-car-dots button.on{ background:var(--accent); transform:scale(1.3); }

.rs-scard{ text-align:center; }
.rs-scard-link{ display:block; }
.rs-scard-imgwrap{ position:relative; display:block; aspect-ratio:1/1; border-radius:18px;
  overflow:hidden; background:#fff; }
.rs-scard-imgwrap img{ position:absolute; inset:0; width:100% !important; height:100% !important;
  object-fit:contain; background:#fff; border:none;
  transition:transform .7s cubic-bezier(.2,.7,.2,1), opacity .55s ease; }
.rs-scard-link:hover .rs-scard-imgwrap img:first-of-type{ transform:scale(1.04); }
/* (badge .onsale unificato più sopra) */
.rs-scard-name{ display:block; font-family:var(--serif); font-size:22px; font-weight:600;
  color:var(--ink); margin-top:16px; }
.rs-scard-price{ display:block; color:var(--price); font-weight:500; font-size:14.5px;
  letter-spacing:.04em; margin-top:4px; font-family:var(--sans); }
.rs-scard-price del{ color:var(--muted); font-weight:400; margin-right:8px; }
.rs-scard-price ins{ text-decoration:none; color:var(--price); font-weight:700; }
.rs-scard .rs-add{ margin-top:12px; }
/* crossfade seconda foto anche sulle strisce */
.rs-scard-link:hover .rs-card-img2{ opacity:1; }

/* ---------- TIMELINE animata (pagina Storia) ---------- */
.rs-tl-band{ background:#241a12; color:#f3e9d6; padding:90px 0 96px; text-align:center; }
.rs-tl-band .h2{ color:#fff; }
/* barra timeline: 20 anni su una riga, linea che passa DENTRO i punti */
.rs-tl-track{ position:relative; display:flex; align-items:flex-end; width:100%; }
.rs-tl-rail{ position:absolute; left:0; right:0; bottom:5px; height:1px;
  background:rgba(255,255,255,.22); z-index:0; }
.rs-tl-fill{ position:absolute; left:0; bottom:5px; height:1px; width:0;
  background:var(--accent); z-index:0; transition:width .6s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 0 14px rgba(179,146,79,.55); }
.rs-tl-dot{ position:relative; z-index:1; flex:1 1 0; min-width:0; background:none; border:none;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:16px; padding:0;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.03em; color:rgba(255,255,255,.55);
  transition:color .25s; }
.rs-tl-yr{ white-space:nowrap; }
.rs-tl-dot:hover{ color:#fff; }
.rs-tl-dot::before{ content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:34px; height:38px; } /* area di click generosa senza spostare la grafica */
.rs-tl-dot:hover .rs-tl-node{ background:rgba(255,255,255,.75); transform:scale(1.25); }
.rs-tl-dot:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:4px; }
.rs-tl-dot.on{ color:var(--accent); }
.rs-tl-node{ position:relative; width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.35);
  transition:.25s; }
.rs-tl-dot.on .rs-tl-node{ background:var(--accent); transform:scale(1.45);
  box-shadow:0 0 0 4px rgba(179,146,79,.22); }
.rs-tl-dot.on .rs-tl-node::after{ content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid var(--accent); animation:rs-dot-pulse 2.2s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes rs-dot-pulse{ 0%{ transform:scale(.6); opacity:.9; } 70%,100%{ transform:scale(1.5); opacity:0; } }
.rs-tl-bigyear{ font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(48px,8vw,96px); line-height:1;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1), filter .55s ease; }
.rs-tl-desc{ font-family:var(--serif); font-size:clamp(19px,2.2vw,26px); color:#f0e6d5;
  max-width:60ch; margin:22px auto 0; line-height:1.5;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1) .06s, transform .55s cubic-bezier(.22,.61,.36,1) .06s, filter .55s ease .06s; }
.rs-tl-out{ opacity:0; transform:translateY(16px) scale(.985); filter:blur(6px);
  transition-duration:.26s,.26s,.26s; transition-delay:0s,0s,0s; }
/* video-to-scroll della storia: foto d'archivio che sfumano sotto lo scroll */
.rs-story-scroll{ position:relative; height:340vh; background:#241a12; }
.rs-story-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
.rs-story-frames{ position:absolute; inset:0; }
.rs-sframe{ position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; will-change:opacity, transform;
  animation:rs-kenburns 36s ease-in-out infinite alternate; }
@keyframes rs-kenburns{ from{ transform:scale(1.02); } to{ transform:scale(1.1) translateY(-1.2%); } }
@media (prefers-reduced-motion:reduce){ .rs-sframe{ animation:none; } .rs-tl-dot.on .rs-tl-node::after{ animation:none; } }
.rs-sframe::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(20,14,8,.5) 0%, rgba(20,14,8,.72) 60%, rgba(20,14,8,.86) 100%); }
.rs-story-ui{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; color:#fff; padding:0 24px; }
.rs-story-ui .eyebrow{ color:rgba(255,255,255,.72); margin-bottom:26px; }
.rs-story-ui .rs-tl-bigyear{ color:transparent; }
.rs-story-ui .rs-tl-desc{ color:#f2e9d9; max-width:46ch; text-shadow:0 1px 30px rgba(0,0,0,.4); }
.rs-story-bar{ position:absolute; left:0; right:0; bottom:6vh; z-index:4; padding:0 5vw; }
.rs-story-bar .rs-tl-track{ padding:6px 0 0; }
@media (max-width:900px){
  .rs-story-scroll{ height:400vh; }
  .rs-story-bar{ bottom:4vh; padding:0 16px; }
}
@media (max-width:760px){
  .rs-story-bar .rs-tl-yr{ display:none; }   /* su mobile solo i punti; l'anno grande è al centro */
  .rs-tl-dot{ gap:0; }
}

.rs-narrow{ max-width:820px; text-align:center; }
.rs-narrow .lead{ margin-left:auto; margin-right:auto; }
.rs-narrow .rs-cta-row{ justify-content:center; }

/* hero di pagina più alto e immersivo (storia) */
/* Storia: hero con immagine d'epoca INTERA (non tagliata).
   Doppia classe per battere .rs-page-hero (stessa specificità ma più avanti nel file). */
/* parte esattamente sotto l'header fisso (il JS imposta il margine preciso, 0px di stacco) */
.rs-page-hero.rs-page-hero--tall{ height:auto; min-height:0; display:block; margin-top:90px; }
.rs-page-hero.rs-page-hero--tall .ph{ position:relative; inset:auto; width:100%; height:auto;
  object-fit:contain; display:block; }
.rs-page-hero.rs-page-hero--tall .wrap{ position:absolute; left:0; right:0; bottom:0; z-index:2; }

/* reveal allo scroll: dinamismo sobrio su tutte le pagine (il JS aggiunge .rs-reveal) */
.rs-reveal{ opacity:0; transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rs-reveal.rs-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rs-reveal{ opacity:1 !important; transform:none !important; transition:none; }
}

/* descrizione breve multilingua (scheda prodotto) */
.rs-desc{ display:inline; }

@media (max-width:1000px){
  .rs-shop-main ul.products{ grid-template-columns:repeat(2,1fr); padding:28px !important; gap:40px 22px; }
  .rs-shop-main div.product{ padding:28px; }
  .rs-strip-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rs-strip-center .rs-scard{ flex-basis:calc((100% - 30px)/2); }
  .rs-car-track .rs-scard{ flex-basis:calc((100% - 30px)/2); }
  .rs-car-nav{ display:none; }
}
@media (max-width:560px){
  .rs-car-track .rs-scard{ flex-basis:82%; }
  .rs-strip-center .rs-scard{ flex-basis:100%; }
}
@media (max-width:560px){ .rs-shop-main ul.products{ grid-template-columns:1fr; } }

/* ---------- PAGINE DI SEZIONE (pasticceria/catering/locali) ---------- */
.rs-page{ background:#fff; }
/* pagine interne: l'hero parte sotto la barra fissa (il JS raffina al pixel) */
body.rs-internal .rs-page-hero, body.rs-internal .hero-scroll{ margin-top:90px; }
.rs-page-hero{ position:relative; height:62vh; min-height:420px; overflow:hidden;
  display:flex; align-items:flex-end; background:#1a1410; }
.rs-page-hero .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rs-page-hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,16,12,.72) 0%, rgba(20,16,12,.12) 55%); }
.rs-page-hero .wrap{ position:relative; z-index:2; width:100%; padding-bottom:54px; color:#fff; }
.rs-page-hero .eyebrow{ color:#f0e4cf; }
.rs-page-hero .h1{ overflow-wrap:break-word; }
html[lang="de"] .rs-page-hero .h1{ -webkit-hyphens:auto; hyphens:auto; } /* «Firmenveranstaltungen» sui telefoni */
@media (max-width:480px){
  /* titoli lunghi su telefoni stretti (320px): il riquadro si allunga invece di tagliare la prima riga */
  .rs-page-hero:not(.rs-page-hero--tall){ height:auto; min-height:max(62vh,420px); align-content:flex-end; flex-wrap:wrap; }
}
.rs-page-hero .h1{ font-family:var(--serif); font-weight:600; line-height:1;
  font-size:clamp(44px,7vw,96px); letter-spacing:-.01em; color:#fff; margin-top:12px; }
.rs-sec{ padding:96px 0; }
.rs-sec .lead{ margin-top:16px; }
.rs-photogrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:48px; }
.rs-photogrid img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
  transition:transform .8s cubic-bezier(.2,.7,.2,1); display:block; }
.rs-photogrid a:hover img, .rs-photogrid img:hover{ transform:scale(1.03); }
.rs-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:44px; }
.rs-two-col h3{ font-family:var(--serif); font-size:30px; font-weight:600; margin-bottom:14px; }
.rs-two-col ul{ list-style:none; }
.rs-two-col li{ font-family:var(--serif); font-size:18.5px; color:#4a3f38; padding:9px 0;
  border-bottom:1px solid #f0eae0; }
.rs-band{ background:var(--accent); color:#fff; text-align:center; padding:84px 0; }
.rs-band .eyebrow{ color:rgba(255,255,255,.75); }
.rs-band .h2{ color:#fff; }
.rs-band .lead{ color:rgba(255,255,255,.92); margin-left:auto; margin-right:auto; }
.rs-cta-row{ display:flex; gap:14px; justify-content:center; margin-top:34px; flex-wrap:wrap; }
.rs-btn{ display:inline-block; padding:14px 30px; border-radius:999px; font-family:var(--sans);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  transition:background .25s ease, color .25s ease; cursor:pointer; }
.rs-btn-solid{ background:var(--accent); color:#fff; border:1px solid var(--accent); }
.rs-btn-solid:hover{ background:var(--accent-d); }
.rs-btn-ghost{ background:transparent; color:var(--accent); border:1px solid var(--accent); }
.rs-btn-ghost:hover{ background:var(--accent); color:#fff; }
.rs-band .rs-btn-solid{ background:#fff; color:var(--accent); border-color:#fff; }
.rs-band .rs-btn-ghost{ color:#fff; border-color:rgba(255,255,255,.6); }
.rs-band .rs-btn-ghost:hover{ background:#fff; color:var(--accent); }
.rs-btn-wa{ background:#2e7d5b; color:#fff; border:1px solid #2e7d5b; }
.rs-btn-wa:hover{ background:#256a4d; border-color:#256a4d; color:#fff; }

/* /hotel: elenco camere */
.rs-rooms{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; margin-top:38px;
  background:var(--paper2); border:1px solid var(--paper2); border-radius:16px; overflow:hidden; }
.rs-room{ background:#fff; padding:22px 26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  transition:background .3s; }
.rs-room:hover{ background:#fbf7ef; }
.rs-room-name{ font-family:var(--serif); font-size:22px; font-weight:600; flex:1 1 auto; }
.rs-room-spec{ font-size:13px; color:var(--muted); letter-spacing:.02em; }
.rs-room-book{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:8px 16px; transition:.2s; }
.rs-room-book:hover{ background:var(--accent); color:#fff; }
@media (max-width:700px){ .rs-rooms{ grid-template-columns:1fr; } }
/* ---- catering: le occasioni (5 card cliccabili) ----
   Ogni card e' UN link intero: foto 3:2, titolo, testo e invito.
   Il colore non cambia al passaggio: si muovono la foto (zoom leggero)
   e la freccia, come nelle card della home. */
.rs-servizi{ display:grid; grid-template-columns:1fr 1fr; gap:56px 48px; margin-top:56px; }
.rs-servizio{ display:block; color:inherit; text-decoration:none; }
.rs-servizio .ph{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover;
  border-radius:14px; margin-bottom:22px; transition:transform .6s ease;
  will-change:transform; }
.rs-servizio:hover .ph{ transform:scale(1.025); }
.rs-servizio h3{ font-family:var(--serif); font-size:27px; font-weight:600; margin:0 0 10px; }
.rs-servizio p{ color:#4a3f38; line-height:1.65; font-size:15.5px; }
.rs-servizio .go{ display:inline-block; margin-top:14px; font-size:11.5px; letter-spacing:.15em;
  text-transform:uppercase; font-weight:600; color:var(--accent); }
.rs-servizio .go::after{ content:" →"; display:inline-block; transition:transform .3s ease; }
.rs-servizio:hover .go::after{ transform:translateX(5px); }
.rs-servizi-head{ max-width:640px; margin:0 auto; text-align:center; }
.rs-servizi-head + .rs-pannelli{ margin-top:56px; }

/* ============ PANNELLI CHE SI ALLARGANO (stesso blocco nello style.css del sito e in quello dello shop) ============
   Una fila di foto affiancate: quella sotto il mouse si allarga (da 1 a 2,3
   parti), la foto si avvicina appena e salgono descrizione e invito. Col dito,
   o su schermi stretti, diventano una fila da far scorrere con il testo già
   visibile. Titoli Cormorant, testi Inter: solo i due caratteri del sito. */
.rs-pannelli{ display:flex; height:clamp(440px,64vh,620px); overflow:hidden; background:#1c1210; }
.rs-pannello{ position:relative; flex:1 1 0; min-width:0; overflow:hidden; color:#fff; text-decoration:none;
  border-right:1px solid rgba(255,255,255,.16); transition:flex-grow .7s cubic-bezier(.23,1,.32,1); }
.rs-pannello:last-child{ border-right:0; }
.rs-pannello .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); transition:transform 1.1s cubic-bezier(.23,1,.32,1); }
.rs-pannello::after{ content:""; position:absolute; inset:auto 0 0; height:75%; pointer-events:none;
  background:linear-gradient(to top, rgba(28,16,13,.92) 0%, rgba(28,16,13,.7) 35%, rgba(28,16,13,.3) 65%, rgba(28,16,13,0) 100%); }
.rs-pannello .txt{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(20px,2.2vw,34px); }
.rs-pannello .t{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,1.9vw,27px); line-height:1.12;
  color:#fff; margin:0; hyphens:auto; }
.rs-pannelli--maiuscolo .t{ font-size:clamp(19px,1.7vw,24px); letter-spacing:.05em; text-transform:uppercase; }
.rs-pannello .s{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:17px; line-height:1.35;
  color:rgba(255,255,255,.8); margin:8px 0 0; }
.rs-pannello .p{ font-family:var(--sans); font-size:14px; line-height:1.65; color:rgba(255,255,255,.84);
  max-width:34em; max-height:0; margin:0; opacity:0; overflow:hidden;
  transition:max-height .7s cubic-bezier(.23,1,.32,1), margin .7s cubic-bezier(.23,1,.32,1), opacity .4s ease; }
.rs-pannello .go{ font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:#f3ddc7; margin-top:14px; opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .5s ease; }
.rs-pannelli--freccia .go::after{ content:" →"; }
@media (hover:hover) and (min-width:761px){
  .rs-pannello:hover, .rs-pannello:focus-visible{ flex-grow:2.3; }
  .rs-pannello:hover .ph, .rs-pannello:focus-visible .ph{ transform:scale(1); }
  .rs-pannello:hover .p, .rs-pannello:focus-visible .p{ max-height:12em; margin-top:14px; opacity:1; }
  .rs-pannello:hover .go, .rs-pannello:focus-visible .go{ opacity:1; transform:none; }
}
@media (hover:none), (max-width:760px){
  .rs-pannelli{ height:auto; gap:12px; background:none; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .rs-pannelli::-webkit-scrollbar{ display:none; }
  .rs-pannello{ flex:0 0 min(80%,380px); aspect-ratio:3/4; border-right:0; scroll-snap-align:start; }
  .rs-pannello::after{ height:100%; }
  .rs-pannello .ph{ transform:none; }
  .rs-pannello .p{ max-height:none; margin-top:12px; opacity:1; }
  .rs-pannello .go{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .rs-pannello, .rs-pannello .ph, .rs-pannello .p, .rs-pannello .go{ transition:none; } }

@media (max-width:900px){ .rs-servizi{ grid-template-columns:1fr; gap:48px; } }

/* ---- scene fotografiche col parallasse (riferimento rosasalva.org/dev) ----
   Il fondale e' piu' alto della sezione (sporge sopra e sotto del 75%) e
   parallasse.js lo fa scorrere piano mentre la pagina scorre: la foto
   sembra quasi ferma dietro il testo. Senza JS o con animazioni ridotte
   il fondale resta semplicemente centrato: nulla si rompe. */
.rs-scena{ position:relative; height:88vh; min-height:520px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center; }
.rs-scena__bg{ position:absolute; inset:-75% 0; will-change:transform; }
/* Il parallasse sullo scroll: dove il browser sa legare un'animazione allo
   scorrimento (Chrome 115+, Safari 26, Firefox 144+) la muove il compositor,
   in sincrono col gesto: niente tremolio. Altrove resta parallasse.js, e il
   JavaScript si fa da parte se questa regola e' capita (CSS.supports). La
   corsa e' la stessa del JS: 30% dell'altezza del fondale = 75% della scena. */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .rs-scena{ view-timeline:--rs-scena block; }
    .rs-scena__bg{ animation:rs-scena-par linear both; animation-timeline:--rs-scena; }
    .mondo{ animation:rs-mondo-par linear both; animation-timeline:view(); }
  }
}
@keyframes rs-scena-par{ from{ transform:translate3d(0,-30%,0); } to{ transform:translate3d(0,30%,0); } }
@keyframes rs-mondo-par{ from{ --par:16px; } to{ --par:-16px; } }
@property --par{ syntax:"<length>"; inherits:true; initial-value:0px; }
.rs-scena__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rs-scena__veil{ position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.42); }
.rs-scena__in{ position:relative; z-index:2; max-width:720px; padding:0 24px; }
.rs-scena__in .eyebrow{ color:#e6d2ac; }
.rs-scena__in h2{ font-family:var(--serif); font-weight:600; color:#fff;
  font-size:clamp(30px,4vw,54px); line-height:1.08; margin:12px 0 18px; }
.rs-scena__in p{ color:#e9e1d4; font-size:17px; line-height:1.6; max-width:46ch; margin:0 auto; }
@media (max-width:700px){ .rs-scena{ height:66vh; min-height:420px; } }

/* ---- catering: il mestiere, il metodo, le location (testi del riferimento) ---- */
.rs-mestiere{ text-align:center; }
.rs-mestiere .lead{ margin-left:auto; margin-right:auto; }
.rs-mestiere p{ max-width:62ch; margin:18px auto 0; color:#4a3f38; line-height:1.7; }
.rs-firma{ font-family:var(--serif); font-style:italic; font-size:22px; color:var(--accent); margin-top:26px !important; }
.rs-metodo{ background:#faf8f4; }
.rs-fasi{ list-style:none; margin:56px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px 44px; counter-reset:fase; }
.rs-fase{ position:relative; padding-top:18px; border-top:1px solid #e4dccd; }
.rs-fase .n{ font-family:var(--serif); font-size:15px; letter-spacing:.14em; color:var(--accent); font-weight:600; }
.rs-fase h3{ font-family:var(--serif); font-size:26px; font-weight:600; margin:8px 0 10px; }
.rs-fase p{ color:#4a3f38; font-size:15.5px; line-height:1.65; }
.rs-location{ text-align:center; border-top:1px solid #efe9de; border-bottom:1px solid #efe9de; }
.rs-location .lead{ margin-left:auto; margin-right:auto; }
@media (max-width:900px){ .rs-fasi{ grid-template-columns:repeat(2,1fr); gap:32px; } }
@media (max-width:600px){ .rs-fasi{ grid-template-columns:1fr; } }

/* ---- occasioni: le dinamiche, la coda, la navigazione fra occasioni ---- */
.rs-dinamica-lista{ list-style:none; margin:0; padding:0; }
.rs-dinamica{ display:grid; grid-template-columns:64px 1fr; gap:0 22px; padding:34px 0; border-top:1px solid #e4dccd; }
.rs-dinamica:last-child{ border-bottom:1px solid #e4dccd; }
.rs-dinamica .n{ font-family:var(--serif); font-size:34px; font-weight:500; color:var(--accent); line-height:1; padding-top:4px; }
.rs-dinamica h2{ font-family:var(--serif); font-size:28px; font-weight:600; margin:0 0 10px; line-height:1.15; }
.rs-dinamica p{ color:#4a3f38; line-height:1.7; }
.rs-sv-cta .h2{ margin-bottom:10px; }
.rs-sv-cta .lead{ margin-left:auto; margin-right:auto; }
.rs-occasioni-nav{ padding:26px 0 40px; }
.rs-occasioni-nav .wrap{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; }
.rs-sv-next{ font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink); }
.rs-sv-next .l{ display:block; font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:4px; }
.rs-sv-next:hover .t{ color:var(--accent); }
@media (max-width:600px){ .rs-dinamica{ grid-template-columns:44px 1fr; } .rs-dinamica .n{ font-size:26px; } }

/* nota di mestiere nelle pagine servizio */
.rs-nota{ margin-top:34px; padding:20px 24px; border-radius:14px; background:#faf8f4;
  border:1px solid #efe9de; font-size:15px; line-height:1.6; color:#4a3f38; }
.rs-nota strong{ color:var(--ink); }

/* coda delle pagine servizio: invito al preventivo */
.rs-sv-cta{ text-align:center; }
.rs-sv-cta .rs-btn{ margin-top:26px; }
.rs-sv-back{ display:inline-block; margin-top:22px; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; color:var(--muted); }
.rs-sv-back:hover{ color:var(--accent); }

/* locali: 6 sedi */
.rs-venues{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.rs-venue{ border:1px solid #efe9de; border-radius:18px; padding:30px 28px;
  transition:box-shadow .3s ease, transform .3s ease; background:#fff; }
.rs-venue:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(35,25,26,.08); }
.rs-venue h3{ font-family:var(--serif); font-size:26px; font-weight:600; }
.rs-venue .d{ font-family:var(--serif); font-style:italic; color:#5d5347; margin:6px 0 14px;
  font-size:16.5px; line-height:1.45; min-height:48px; }
.rs-venue .a{ font-size:14px; color:var(--muted); }
.rs-venue .t{ font-size:14px; margin-top:2px; }
.rs-venue .t a{ color:var(--accent); font-weight:600; }
.rs-venue .o{ font-size:12px; letter-spacing:.06em; color:var(--accent); margin:10px 0 18px; font-weight:600; }
.rs-venue .rs-btn{ font-size:10.5px; padding:10px 18px; }
@media (max-width:1000px){ .rs-venues{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .rs-venues{ grid-template-columns:1fr; } }

/* form preventivo */
.rs-form-sec{ background:#faf8f4; }
.rs-form-card{ max-width:860px; margin:0 auto; }
.rs-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; margin:30px 0 24px; }
.rs-form-grid label{ display:flex; flex-direction:column; gap:7px; font-size:11.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.rs-form-grid label.full{ grid-column:1 / -1; }
.rs-form-grid input, .rs-form-grid select, .rs-form-grid textarea{
  font-family:var(--sans); font-size:15px; color:var(--ink); padding:13px 15px;
  border:1px solid #e4ddd0; border-radius:12px; background:#fff; transition:border-color .2s; }
.rs-form-grid input:focus, .rs-form-grid select:focus, .rs-form-grid textarea:focus{
  outline:none; border-color:var(--accent); }
.rs-notice{ margin:22px 0 4px; padding:14px 18px; border-radius:12px; font-size:14.5px; }
.rs-notice.ok{ background:#eef6ee; color:#265c31; border:1px solid #cfe6d2; }
.rs-notice.err{ background:#fbeeec; color:#8c2b1f; border:1px solid #eed2cc; }
.rs-form-alt{ margin-top:26px; color:var(--muted); font-size:14px; }
.rs-form-alt a{ color:var(--accent); font-weight:600; }

@media (max-width:900px){
  .rs-photogrid{ grid-template-columns:repeat(2,1fr); }
  .rs-two-col{ grid-template-columns:1fr; gap:28px; }
  .rs-sec{ padding:64px 0; }
  .rs-form-grid{ grid-template-columns:1fr; }
}

/* effetto oro (per titoli/1879 — usato con parsimonia) */
.rs-shiny{
  background:linear-gradient(100deg, var(--gold) 20%, #f4e4bd 40%, var(--gold) 60%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:rs-shine 6s linear infinite;
}
@keyframes rs-shine{ to{ background-position:200% center; } }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  nav .navlink, header#hdr nav .langs, header#hdr nav .rs-langsel{ display:none; }
  .menu-btn{ display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; padding:0; background:none; border:none;
    color:var(--ink); cursor:pointer; transition:color .2s, opacity .2s; }
  .menu-btn:hover{ color:var(--brand); }
  header#hdr.accent .menu-btn:hover{ color:#fff; opacity:.8; }
  .mondi{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .locali-grid{ grid-template-columns:1fr; }
  /* footer mobile: le colonne di testo AFFIANCATE al disegno (non sotto) */
  .fgrid{ grid-template-columns:1fr 1fr; gap:14px 26px; align-items:start; }
  .fnews{ grid-template-columns:1fr; }
  .rs-nl{ justify-self:start; max-width:none; }
  .fgrid .fcol:first-child{ grid-row:1 / span 2; }
  section.block{ padding:80px 0; }
  section.block.wrap{ padding-left:24px; padding-right:24px; }
  body.admin-bar header#hdr{ top:46px; }
}

/* ---------- Menu mobile (drawer) ---------- */
body.rs-nav-lock{ overflow:hidden; }
/* html ha overflow-x:clip: l'overflow del solo body non ferma la pagina. Si blocca la radice
   (classe messa da home.js; :has come rinforzo) e il pannello non passa lo scorrimento sotto. */
html.rs-nav-lock{ overflow:hidden; }
html:has(> body.rs-nav-lock){ overflow:hidden; } /* regola a parte: un :has non supportato non deve annullare quella sopra */
.rs-drawer{ touch-action:none; overscroll-behavior:contain; }
.rs-drawer{ position:fixed; inset:0; z-index:300; background:rgba(24,10,8,.5);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
.rs-drawer.open{ opacity:1; visibility:visible; }
.rs-drawer__panel{ position:absolute; top:0; right:0; height:100%; width:min(86vw,370px);
  background:var(--brand); color:#fff; display:flex; flex-direction:column; padding:26px 30px 30px;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.22,.61,.36,1); overflow-y:auto;
  box-shadow:-20px 0 60px rgba(24,10,8,.35); touch-action:pan-y; overscroll-behavior:contain; }
.rs-drawer.open .rs-drawer__panel{ transform:none; }
/* La X del pannello non serve piu': a chiudere e' lo stesso pulsante
   dell'header, che resta sopra il drawer e completa la sua animazione. */
.rs-drawer__close{ display:none; }
.rs-drawer__nav{ display:flex; flex-direction:column; margin-top:18px; }
.rs-drawer__nav a{ font-family:var(--serif); font-size:30px; font-weight:500; color:#fff;
  padding:13px 0; border-bottom:1px solid rgba(255,255,255,.16); text-decoration:none; transition:color .2s ease; }
.rs-drawer__nav a:hover{ color:var(--gold); }
.rs-drawer__cart{ letter-spacing:.02em; }  /* stessa dimensione delle altre voci */
.rs-drawer .langs{ display:flex; gap:8px; margin-top:26px; }
.rs-drawer .langs button{ background:none; border:1px solid rgba(255,255,255,.35); color:#fff;
  padding:8px 15px; border-radius:999px; cursor:pointer; font-size:12px; letter-spacing:.1em; font-family:var(--sans); transition:.2s; }
.rs-drawer .langs button.on{ background:#fff; color:var(--brand); border-color:#fff; }
.rs-drawer__draw{ margin-top:auto; padding-top:24px; width:100%; max-width:230px; align-self:center;
  filter:invert(1); mix-blend-mode:screen; opacity:.92; }

/* ---------- Carrello / Checkout / Account (stile shop) ---------- */
.rs-shop-page__title{ font-family:var(--serif); font-weight:600; font-size:clamp(34px,5vw,52px);
  text-align:center; margin:0 0 34px; }
.rs-shop-main table.shop_table{ width:100%; border:1px solid var(--paper2); border-radius:16px;
  border-collapse:separate; border-spacing:0; overflow:hidden; background:#fff; }
.rs-shop-main table.shop_table th{ font-family:var(--sans); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); padding:16px 18px; background:#faf7f0; text-align:left; }
.rs-shop-main table.cart td{ padding:18px; border-top:1px solid var(--paper2); vertical-align:middle; }
.rs-shop-main table.cart .product-thumbnail img{ width:76px; height:76px; object-fit:cover; border-radius:10px; }
.rs-shop-main table.cart .product-name a{ color:var(--ink); font-family:var(--serif); font-size:19px; }
.rs-shop-main table.cart .product-name a:hover{ color:var(--accent); }
.rs-shop-main td.product-price, .rs-shop-main td.product-subtotal{ color:var(--price); font-weight:600; }
.rs-shop-main .product-remove a{ color:var(--muted); font-size:22px; line-height:1; text-decoration:none;
  display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:50%; transition:.2s; }
.rs-shop-main .product-remove a:hover{ color:#fff; background:var(--accent); }
.rs-shop-main .quantity .qty{ width:66px; padding:11px; border:1px solid var(--paper2); border-radius:10px;
  text-align:center; font-family:var(--sans); }
.rs-shop-main .actions{ padding:18px; }
.rs-shop-main .coupon{ display:flex; gap:10px; }
.rs-shop-main .coupon .input-text{ padding:12px 14px; border:1px solid var(--paper2); border-radius:10px; min-width:180px; }
.rs-shop-main .cart-collaterals{ display:flex; justify-content:flex-end; margin-top:36px; }
.rs-shop-main .cart_totals{ width:min(440px,100%); }
.rs-shop-main .cart_totals h2{ font-family:var(--serif); font-size:26px; font-weight:600; margin-bottom:14px; }
.rs-shop-main .cart_totals table.shop_table td, .rs-shop-main .cart_totals table.shop_table th{ padding:14px 16px; }
.rs-shop-main .wc-proceed-to-checkout{ margin-top:18px; }
.rs-shop-main .wc-proceed-to-checkout .checkout-button{ display:block; text-align:center; width:100%; }
.rs-shop-main .cart-empty{ text-align:center; font-family:var(--serif); font-size:26px; color:var(--ink); margin:12px 0 22px; }
.rs-shop-main .return-to-shop{ text-align:center; margin:0 0 8px; }
.rs-cart-suggest{ margin-top:72px; }
.rs-cart-suggest .rs-strip{ padding:60px 0 0; }
/* "Ritorna al negozio": stile bordeaux del sito, staccato dai puntini del carosello */
.rs-shop-main .return-to-shop{ text-align:center; margin:0 0 12px; padding-top:60px; }
.rs-shop-main .button.wc-backward,
.rs-shop-main .return-to-shop .button,
.rs-shop-main .cart-empty ~ p .button{
  display:inline-block; background:transparent; color:var(--accent) !important; border:1px solid var(--accent);
  border-radius:999px; padding:14px 36px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; text-decoration:none; transition:background .25s ease,color .25s ease; }
.rs-shop-main .button.wc-backward:hover,
.rs-shop-main .return-to-shop .button:hover{ background:var(--accent); color:#fff !important; }
/* "Annullare" (undo rimozione articolo) come pulsante, così è chiaro che si clicca */
.woocommerce a.restore-item, .woocommerce-message a.restore-item, .rs-shop-main a.restore-item{
  display:inline-block; margin-left:12px; background:var(--accent); color:#fff !important;
  border-radius:999px; padding:6px 16px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; text-decoration:none; transition:background .2s ease; }
.woocommerce a.restore-item:hover, .rs-shop-main a.restore-item:hover{ background:var(--accent-d); }
/* checkout */
.rs-shop-main .woocommerce-checkout h3{ font-family:var(--serif); font-size:24px; font-weight:600; margin-bottom:16px; }
.rs-shop-main .woocommerce-checkout .form-row input.input-text,
.rs-shop-main .woocommerce-checkout .form-row textarea,
.rs-shop-main .woocommerce-checkout .select2-selection,
.rs-shop-main .woocommerce-checkout select{ border:1px solid var(--paper2) !important; border-radius:10px;
  padding:12px 14px; font-family:var(--sans); }
.rs-shop-main #order_review, .rs-shop-main .woocommerce-checkout #payment{ background:#faf7f0; border-radius:16px; padding:26px; }
.rs-shop-main #payment ul.payment_methods{ border-bottom:1px solid var(--paper2); }
@media (max-width:600px){
  .rs-shop-main table.cart thead{ display:none; }
  .rs-shop-main table.cart, .rs-shop-main table.cart tbody, .rs-shop-main table.cart tr, .rs-shop-main table.cart td{ display:block; width:100%; }
  .rs-shop-main table.cart tr{ border-top:1px solid var(--paper2); padding:8px 0; }
  .rs-shop-main table.cart td{ border:0; padding:8px 16px; text-align:right; }
  .rs-shop-main table.cart td::before{ content:attr(data-title); float:left; color:var(--muted);
    font-size:11px; letter-spacing:.1em; text-transform:uppercase; }
  .rs-shop-main table.cart td.product-remove::before, .rs-shop-main table.cart td.product-thumbnail::before{ content:""; }
}

/* hero video-to-scroll nelle pagine interne: pista più corta della home */
.hero-scroll--sub{ height:320vh; }

/* ---------- /hotel: chips di fiducia, nastro foto, camere con immagini ---------- */
.rs-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.rs-chip{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.45); color:#fff; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600; backdrop-filter:blur(4px); background:rgba(0,0,0,.18); }
.rs-chip sup{ font-size:.55em; }

/* nastro di foto in loop continuo (pausa al passaggio del mouse) */
.rs-hmarquee{ overflow:clip; padding:8px 0 40px; }
.rs-hmarquee-track{ display:flex; gap:14px; width:max-content;
  animation:rs-hmarquee 55s linear infinite; will-change:transform; }
.rs-hmarquee:hover .rs-hmarquee-track{ animation-play-state:paused; }
.rs-hmarquee img{ height:240px; width:auto; max-width:none; border-radius:14px; object-fit:cover; }
@keyframes rs-hmarquee{ to{ transform:translateX(-50%); } }
@media (max-width:700px){ .rs-hmarquee img{ height:150px; } }
@media (prefers-reduced-motion:reduce){ .rs-hmarquee-track{ animation:none; } }

/* camere con foto */
.rs-hrooms{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:38px; }
.rs-hroom{ background:#fff; border:1px solid var(--paper2); border-radius:16px; overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease; }
.rs-hroom:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(30,65,72,.16); }
.rs-hroom-img{ aspect-ratio:16/10; overflow:hidden; }
.rs-hroom-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.rs-hroom:hover .rs-hroom-img img{ transform:scale(1.05); }
.rs-hroom-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; }
.rs-hroom-name{ font-family:var(--serif); font-size:20px; font-weight:600; margin:0; }
.rs-hroom-spec{ font-size:12.5px; color:var(--muted); letter-spacing:.02em; }
.rs-hroom-book{ align-self:flex-start; margin-top:8px; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; color:var(--accent); border:1px solid var(--accent);
  border-radius:999px; padding:8px 16px; transition:.2s; }
.rs-hroom-book:hover{ background:var(--accent); color:#fff; }
.rs-scarcity{ margin-top:26px; font-family:var(--serif); font-style:italic; font-size:17px; color:var(--muted); }

/* riprova sociale */
.rs-hquote-sec{ padding-top:0; }
.rs-hquote{ margin:0 auto; max-width:720px; text-align:center; background:var(--accent); color:#fff;
  border-radius:22px; padding:44px 38px; }
.rs-hquote-stars{ color:#e7c877; letter-spacing:.3em; margin-bottom:16px; }
.rs-hquote p{ font-family:var(--serif); font-style:italic; font-size:20px; line-height:1.55; margin:0 0 14px; }
.rs-hquote cite{ display:block; font-style:normal; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:20px; }
.rs-hquote .rs-hroom-book{ color:#fff; border-color:rgba(255,255,255,.6); align-self:center; }
.rs-hquote .rs-hroom-book:hover{ background:#fff; color:var(--accent); }

/* appartamenti con foto */
.rs-hapts{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:34px; }
.rs-hapt{ margin:0; position:relative; border-radius:16px; overflow:hidden; }
.rs-hapt img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.rs-hapt:hover img{ transform:scale(1.04); }
.rs-hapt figcaption{ position:absolute; left:0; right:0; bottom:0; padding:18px 20px; color:#fff;
  font-family:var(--serif); font-size:19px;
  background:linear-gradient(to top, rgba(15,33,36,.85), transparent); }
@media (max-width:900px){ .rs-hrooms{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .rs-hrooms, .rs-hapts{ grid-template-columns:1fr; } }

/* ============ SHOP — scheda prodotto ============ */
/* La galleria resta quella standard di WooCommerce; l'hover-swap è solo JS.
   Cursore "mano" sulle miniature per far capire che sono interattive. */
.rs-shop-main .woocommerce-product-gallery__image:nth-child(n+2){ cursor:pointer; }
/* sicurezza: la galleria è sempre visibile anche se lo script di reveal non parte */
.rs-shop-main .woocommerce-product-gallery{ opacity:1 !important; }

/* Ingredienti / allergeni in scheda */
.rs-ingredients{ margin:18px 0 6px; padding-top:16px; border-top:1px solid var(--paper2); }
.rs-ing-h{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink); margin:0 0 6px; }
.rs-ing-t{ color:var(--muted); font-size:15px; line-height:1.6; margin:0; }
.rs-allergeni{ margin:10px 0 0; font-size:14px; color:var(--ink); }

/* ============ SHOP header dedicato ============ */
/* Link discreto di ritorno al sito principale (lo shop è un sito a sé). */
.rs-shop-hdr .rs-backsite{ font-size:12.5px; letter-spacing:.06em; opacity:.72; }
.rs-shop-hdr .rs-backsite:hover{ opacity:1; }

/* pagina Contatti (senza hero): sotto i 900px lo spazio in alto scende a 64px, meno della barra fissa */
@media (max-width:900px){ .rs-sec.rs-contatti-testa{ padding-top:calc(90px + 40px); } }

/* esito dei moduli contatti e preventivo */
.rs-form-esito{ margin:22px 0 0; padding:16px 20px; border-radius:12px; font-size:15px; line-height:1.55; }
.rs-form-esito--ok{ background:#f1ece2; color:var(--ink); border-left:3px solid var(--accent-d, var(--brand)); }
.rs-form-esito--err{ background:#fbeceb; color:#7a1b13; border-left:3px solid var(--brand); }

/* ============ LOCALI — cartina (Leaflet) ============ */
.rs-lmap-wrap{ margin:34px 0 44px; }
#localiMap{ height:clamp(340px,52vh,520px); border-radius:18px; border:1px solid var(--paper2);
  box-shadow:0 18px 44px rgba(35,25,26,.12); z-index:0; }
.rs-lpin{ background:none; border:none; }
.rs-lpin svg{ filter:drop-shadow(0 3px 6px rgba(35,25,26,.35)); }
/* tessere OpenStreetMap smorzate: carta chiara, non la mappa a colori pieni.
   Sul contenitore delle tessere: leaflet.css (caricato dopo) mette filter:inherit
   sulla singola .leaflet-tile. Segnaposto e fumetti stanno in altri pannelli: restano a colori. */
.leaflet-tile-pane{ filter:grayscale(.92) brightness(1.07) contrast(.88); }
/* .leaflet-container davanti: leaflet.css e' caricato DOPO style.css e a pari peso vincerebbe lui */
html .leaflet-container{ font-family:var(--sans); } /* crediti mappa e zoom: Inter, non Helvetica */
.leaflet-container .leaflet-popup-content-wrapper{ border-radius:12px; font-family:var(--sans); }
.leaflet-container .leaflet-popup-content{ margin:12px 16px; font-size:13.5px; line-height:1.5; max-width:100%; }
.leaflet-container .leaflet-popup-content b{ font-family:var(--serif); font-size:17px; font-weight:600; color:var(--brand); }
.leaflet-container .leaflet-popup-content a{ color:var(--brand); font-weight:600; }
.rs-venue{ cursor:pointer; }

/* marchio storico nel footer (come sul sito hotel: 88px).
   Specificità alta + !important: sulle pagine shop WooCommerce inietta
   ".woocommerce-page img{height:auto}" che altrimenti vincerebbe e farebbe
   esplodere l'immagine alla dimensione naturale (1024px). */
footer.site-footer img.rs-foot-marchio{ height:88px !important; width:auto !important; margin-top:20px; opacity:.92; }
/* stessa protezione per il disegno del footer */
footer.site-footer img.rs-foot-draw{ height:250px !important; width:auto !important; }

/* ============ selettore lingua a discesa con bandiere ============ */
.rs-langsel{ position:relative; display:inline-block; }
.rs-langsel-btn{ display:inline-flex; align-items:center; gap:7px; background:none;
  border:1px solid rgba(35,25,26,.16); border-radius:999px; padding:5px 11px; cursor:pointer;
  font:inherit; font-size:12.5px; color:inherit; letter-spacing:.03em; transition:border-color .2s, color .2s; }
.rs-langsel-btn .fl{ font-size:15px; line-height:1; }
.rs-langsel-btn .nm{ font-weight:500; }
.rs-langsel-btn .cr{ font-size:10px; opacity:.7; transition:transform .2s; }
.rs-langsel.open .rs-langsel-btn .cr{ transform:rotate(180deg); }
.rs-langsel-btn:hover{ border-color:var(--brand); }
header#hdr.accent .rs-langsel-btn{ color:#fff; border-color:rgba(255,255,255,.35); }
header#hdr.accent .rs-langsel-btn:hover{ border-color:#fff; }
.rs-langsel-menu{ position:absolute; top:calc(100% + 8px); right:0; min-width:172px; margin:0; padding:6px;
  list-style:none; background:#fff; border:1px solid var(--paper2); border-radius:12px;
  box-shadow:0 16px 40px rgba(35,25,26,.18); opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:300; }
.rs-langsel.open .rs-langsel-menu{ opacity:1; visibility:visible; transform:none; }
.rs-langsel-menu li{ margin:0; padding:0; }
.rs-langsel-opt{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:none;
  cursor:pointer; padding:9px 12px; border-radius:8px; font:inherit; font-size:14px; color:var(--ink);
  text-align:left; transition:background .15s; }
.rs-langsel-opt .fl{ font-size:18px; line-height:1; }
.rs-langsel-opt:hover{ background:var(--paper); }
.rs-langsel-opt.on{ color:var(--brand); font-weight:600; }
/* footer (fondo scuro) */
.site-footer .rs-langsel-btn{ color:#ccc0b1; border-color:rgba(255,255,255,.2); }
.site-footer .rs-langsel-btn:hover{ color:#fff; border-color:rgba(255,255,255,.45); }
.site-footer .rs-langsel-menu{ left:0; right:auto; }
/* drawer mobile: a tutta larghezza */
.rs-drawer .rs-langsel{ display:block; margin-top:8px; }
.rs-drawer .rs-langsel-btn{ width:100%; justify-content:center; color:#fff; border-color:rgba(255,255,255,.3); }
.rs-drawer .rs-langsel-menu{ left:0; right:0; }

/* footer mobile: disegno più compatto accanto alle colonne di testo */
@media (max-width:900px){
  footer.site-footer img.rs-foot-draw{ height:190px !important; max-width:100%; object-fit:contain; }
  .rs-foot-logo{ width:200px; }
  .fgrid{ grid-template-columns:1fr 1fr; gap:34px 28px; }
  .fcol--brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .fgrid{ grid-template-columns:1fr; }
  .fgruppo{ flex-direction:column; align-items:flex-start; gap:22px; }
  .fbar{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Contenuti AEO: capsula, FAQ, glossario, timeline statica ---------- */
.rs-capsula{ padding:72px 32px 0; }
.rs-capsula .lead{ margin:0 auto; text-align:center; max-width:64ch; }
.rs-h2-sub{ font-size:clamp(26px,3.4vw,42px) !important; margin-top:64px; }
.rs-faq .rs-h2-sub{ margin-top:0; text-align:center; }
.rs-faq-item{ border-bottom:1px solid var(--paper2); padding:26px 0; }
.rs-faq-item h3{ font-family:var(--serif); font-size:23px; font-weight:600; margin:0 0 10px; }
.rs-faq-item p{ line-height:1.65; color:#4a3f38; font-size:15.5px; }
.rs-faq-item a{ color:var(--accent); font-weight:600; }
.rs-glo{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 44px; margin-top:40px; }
.rs-glo-item dt{ font-family:var(--serif); font-size:24px; font-weight:600; margin-bottom:6px; }
.rs-glo-item dd{ margin:0; line-height:1.6; color:#4a3f38; font-size:15px; }
@media (max-width:760px){ .rs-glo{ grid-template-columns:1fr; } }
.rs-tl-static{ background:#fff; }
.rs-tl-list{ list-style:none; margin-top:38px; text-align:left; }
.rs-tl-list li{ display:flex; gap:18px; padding:13px 0; border-bottom:1px solid #f0eae0; }
.rs-tl-list .y{ font-family:var(--serif); font-weight:600; color:var(--accent); flex:0 0 96px; }
.rs-tl-list .d{ line-height:1.55; color:#4a3f38; font-size:15px; }
.rs-eeat{ margin-top:26px; font-size:14.5px; line-height:1.7; color:var(--muted);
  border-top:1px solid var(--paper2); padding-top:22px; }

/* pagine legali */
.rs-legal-main{ margin-top:90px; }
.rs-legal h1{ margin-bottom:10px; }
.rs-legal h2{ font-family:var(--serif); font-size:26px; font-weight:600; margin:34px 0 10px; }
.rs-legal h3{ font-family:var(--serif); font-size:21px; font-weight:600; margin:24px 0 8px; }
.rs-legal ul{ margin:10px 0 10px 22px; }
.rs-legal li{ line-height:1.7; font-size:15px; margin:4px 0; }
.rs-legal a{ color:var(--accent); font-weight:600; }
.rs-legal-lang{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:26px; }

/* ---------- Timeline storia: aiuti alla navigazione ---------- */
.rs-story-hint{ position:absolute; left:50%; transform:translateX(-50%); bottom:calc(6vh + 78px);
  z-index:4; display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.62);
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; pointer-events:none;
  transition:opacity .5s ease; }
.rs-story-hint svg{ animation:rs-hint-bob 2.2s ease-in-out infinite; }
@keyframes rs-hint-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }
.rs-story-scroll.rs-started .rs-story-hint{ opacity:0; }
.rs-story-skip{ position:absolute; right:5vw; bottom:calc(6vh + 78px); z-index:5;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); color:#fff;
  font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:9px 18px; border-radius:999px; cursor:pointer; backdrop-filter:blur(6px);
  transition:background .25s ease, border-color .25s ease, opacity .4s ease; }
.rs-story-skip:hover{ background:rgba(255,255,255,.2); border-color:#fff; }
@media (max-width:760px){
  .rs-story-hint{ bottom:calc(4vh + 62px); font-size:10.5px; letter-spacing:.12em; }
  .rs-story-skip{ right:16px; bottom:calc(4vh + 62px); padding:8px 14px; font-size:10px; }
}
@media (prefers-reduced-motion:reduce){ .rs-story-hint svg{ animation:none; } }

/* consenso privacy nei form */
.rs-consent{ display:flex; align-items:flex-start; gap:11px; margin:4px 0 22px;
  font-size:13.5px; line-height:1.55; color:#4a3f38; cursor:pointer; max-width:64ch; }
.rs-consent input[type="checkbox"]{ flex:0 0 auto; width:18px; height:18px; margin-top:1px;
  accent-color:var(--accent); cursor:pointer; }
.rs-consent a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.rs-consent input:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width:560px){ .mondi{ grid-template-columns:1fr; } }

@media (max-width:560px){
  section.block.wrap{ padding-left:20px; padding-right:20px; }
  .rs-capsula{ padding-left:20px; padding-right:20px; }
}

/* Ampersand: il TONDO del Cormorant Garamond. Il corsivo dello stesso font ha
   l'ampersand calligrafico (legatura "et" arricciata) che pochi riconoscono come
   una e commerciale: qui serve che si legga a colpo d'occhio. */
.amp{ font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:1.06em; padding:0 .07em; letter-spacing:0; }

/* piede del menu mobile: marchio storico e dati aziendali */
.rs-drawer__foot{ margin-top:auto; padding-top:26px; text-align:center; }
.rs-drawer__marchio{ display:block; margin:0 auto 14px; width:72px; height:auto;
  filter:brightness(0) invert(1); opacity:.85; }
.rs-drawer__legal{ font-size:11.5px; line-height:1.7; color:rgba(255,255,255,.72);
  letter-spacing:.02em; margin:0; }
.rs-drawer__legal a{ color:rgba(255,255,255,.9); text-decoration:none; }
.rs-drawer__legal a:hover{ color:#fff; text-decoration:underline; }
.rs-drawer__links{ margin:12px 0 0; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.rs-drawer__links a{ color:rgba(255,255,255,.8); }
.rs-drawer__links a:hover{ color:#fff; }
.rs-drawer__draw{ margin-top:22px; }

/* ---- pagina contatti: testa, modulo, recapiti in tre colonne ---- */
.rs-contatti-testa{ text-align:center; padding-bottom:34px; }
.rs-contatti-testa .lead{ margin-left:auto; margin-right:auto; }
.rs-contatti-diretti{ border-top:1px solid #efe9de; }
.rs-contatti-griglia{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 44px; margin-top:26px; }
.rs-contatti-griglia .h3{ font-family:var(--serif); font-size:22px; font-weight:600; margin-bottom:10px; }
.rs-contatti-griglia p{ color:#4a3f38; line-height:1.7; margin-bottom:8px; }
.rs-contatti-griglia a{ color:var(--accent); font-weight:600; }
.rs-contatti-griglia .rs-btn{ margin-top:12px; }
.rs-orari{ font-size:14px; color:var(--muted); }
@media (max-width:820px){ .rs-contatti-griglia{ grid-template-columns:1fr; gap:26px; } }

/* ---- pagina di un singolo locale: racconto a sinistra, scheda a destra ---- */
.rs-sede-griglia{ display:grid; grid-template-columns:1fr 320px; gap:56px; align-items:start; }
.rs-sede-testo p{ color:#4a3f38; line-height:1.75; margin-bottom:18px; }
.rs-sede-testo .lead{ color:var(--ink); }
.rs-sede-scheda{ border:1px solid #efe9de; border-radius:18px; padding:28px 26px; background:#faf8f4;
  position:sticky; top:110px; }
.rs-sede-ind{ font-family:var(--serif); font-size:20px; line-height:1.4; margin:12px 0 10px; }
.rs-sede-orari{ font-size:14.5px; color:var(--muted); margin-bottom:6px; }
.rs-sede-tel a{ color:var(--accent); font-weight:600; }
.rs-sede-scheda .rs-btn{ margin-top:18px; }
@media (max-width:900px){
  .rs-sede-griglia{ grid-template-columns:1fr; gap:34px; }
  .rs-sede-scheda{ position:static; }
}

/* titolo della tappa nella linea del tempo: sopra la descrizione */
.rs-tl-titolo{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.4vw,30px);
  line-height:1.2; margin:0 0 10px; color:var(--paper);
  transition:opacity .28s ease, transform .28s ease; }
.rs-tl-titolo.rs-tl-out{ opacity:0; transform:translateY(8px); }

/* ============ ALLINEAMENTO AL SITO DI RIFERIMENTO (settembre 2026) ============
   Regole di appoggio per i blocchi ripresi da rosasalva.org/dev: parola-verbo
   dell'hero, elenchi prodotti, scene con elenco, griglie a tre categorie,
   blocchi "Da provare" / "Come arrivare" delle sedi. Senza queste regole le
   pagine restano leggibili: servono a rifinire. */
/* hero home: la parola-verbo di B (TRAMANDARE, RICEVERE...) sopra il titolo */
.hero-parola{ display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(46px,6.6vw,104px); line-height:1.02; letter-spacing:.09em;
  text-indent:.09em; text-transform:uppercase; color:#fff;
  margin:0 0 24px; text-shadow:0 2px 40px rgba(0,0,0,.35); }
@media (max-width:760px){
  /* 10vw con 20 px di margine: la parola piu' lunga (HANDING DOWN, 8,7 em)
     sta su una riga anche a 360 px; le altre crescono con lo schermo */
  .hero-parola{ font-size:clamp(32px,10vw,48px); letter-spacing:.06em; text-indent:.06em; margin-bottom:16px; }
  .hero-ui .wrap{ padding-left:20px; padding-right:20px; }
}
/* freccia sui richiami delle sei card, come "Scopri di piu' →" in B */
.mondo .lab .c::after{ content:" →"; }
/* elenco prodotti in fila, separato da punti (scene, card, sedi) */
.rs-prodotti{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 0; margin:22px 0 0; padding:0;
  font-family:var(--serif); font-size:17.5px; color:#4a3f38; }
.rs-prodotti li{ display:inline; }
.rs-prodotti li + li::before{ content:"·"; margin:0 10px; color:var(--accent); }
.rs-scena__in .rs-prodotti{ justify-content:center; color:#efe6d6; }
.rs-scena__in .rs-prodotti li + li::before{ color:#e6d2ac; }
/* scena con elenco e bottoni: altezza libera, niente tagli sui telefoni */
.rs-scena.rs-scena--lista{ height:auto; min-height:88vh; padding:110px 0; }
@media (max-width:700px){ .rs-scena.rs-scena--lista{ min-height:66vh; padding:84px 0; } }
.rs-scena__in .rs-cta-row{ margin-top:30px; }
.rs-scena__in .rs-btn-solid{ background:#fff; color:var(--accent); border-color:#fff; }
.rs-scena__in .rs-btn-ghost{ color:#fff; border-color:rgba(255,255,255,.6); }
.rs-scena__in .rs-btn-ghost:hover{ background:#fff; color:var(--accent); }
/* griglia a tre categorie (pasticceria) */
.rs-servizi.rs-servizi--3{ grid-template-columns:repeat(3,1fr); gap:48px 40px; margin-top:0; }
@media (max-width:1000px){ .rs-servizi.rs-servizi--3{ grid-template-columns:1fr 1fr; } }
@media (max-width:700px){ .rs-servizi.rs-servizi--3{ grid-template-columns:1fr; } }
.rs-servizio .eyebrow{ margin-bottom:10px; }
.rs-servizio .rs-prodotti{ font-size:16px; margin-top:16px; }
.rs-servizio .rs-cta-row{ justify-content:flex-start; margin-top:22px; }
.rs-servizio .rs-btn{ padding:11px 22px; }
/* sedi: sotto-blocchi "Da provare" e "Come arrivare" (due nomi in uso, stesso disegno) */
.rs-sede-blocco, .rs-sede-testo .rs-sede-spec, .rs-sede-testo .rs-sede-accesso{ margin-top:36px; }
.rs-sede-blocco .eyebrow, .rs-sede-testo .rs-sede-spec .eyebrow, .rs-sede-testo .rs-sede-accesso .eyebrow{ margin-bottom:11px; }
.rs-sede-blocco p, .rs-sede-testo .rs-sede-accesso p{ margin-bottom:0; }
.rs-sede-lista{ list-style:none; margin:0; padding:0; }
.rs-sede-lista li{ font-family:var(--serif); font-size:18.5px; color:#4a3f38; padding:8px 0; border-bottom:1px solid #f0eae0; }
.rs-sede-lista li:last-child{ border-bottom:0; }
.rs-sede-testo .rs-prodotti{ margin-top:0; }
/* mappa della singola sede: riusa la mappa di /locali/ */
.rs-sede-mappa{ padding:0 0 72px; }
.rs-sede-mappa .rs-lmap-wrap{ margin:0; }
/* navigazione in coda: link al precedente, "Tutti" sotto sui telefoni */
@media (max-width:600px){
  .rs-occasioni-nav .wrap{ flex-direction:column; align-items:flex-start; gap:14px; }
  .rs-occasioni-nav .rs-sv-back{ order:3; margin-top:6px; }
}

/* ============ SEO/GEO/AEO — pagina Storia (settembre 2026) ============ */
/* ============================================================
   STORIA — sezione con la foto di gruppo (.rs-famiglia).
   Riusa .rs-two-col (griglia 1fr 1fr già in style.css): a sinistra
   la foto di gruppo di pasticceri e pasticcere nel laboratorio, a
   destra il testo. Senza queste regole la sezione resta leggibile —
   la foto è già responsiva grazie a `img,svg{max-width:100%}` —
   servono solo a rifinire. Da integrare in style.css.
   ============================================================ */

/* 1) La griglia parte già dentro una sezione con il suo padding:
      niente margine in cima, e testo centrato in verticale
      rispetto alla foto. */
.rs-famiglia .rs-two-col{ margin-top:0; align-items:center; gap:56px; }

/* 2) La foto: <figure> senza margini, immagine a piena colonna. */
.rs-famiglia-foto{ margin:0; }
.rs-famiglia-foto img{ display:block; width:100%; height:auto; border-radius:2px; }

/* 3) Distanza fra i paragrafi del testo. */
.rs-famiglia-testo p + p{ margin-top:16px; }

/* 4) Sotto i 900px .rs-two-col diventa a una colonna: prima il
      testo, poi la foto. */
@media (max-width:900px){
  .rs-famiglia .rs-two-col{ gap:28px; }
  .rs-famiglia-foto{ order:2; }
}

/* ============================================================
   STORIA — riconoscimenti (.rs-riconoscimenti).
   Il paragrafo .rs-eeat (marchio storico UIBM, luogo storico del
   commercio del Veneto, ANBC, stemma) non sta più in coda alla
   sezione «Oggi»: chiude la pagina in una sezione sua, dopo la foto
   di gruppo e subito prima della fascia bordeaux. La sezione di
   sopra ha già il suo padding in fondo, quindi qui si toglie quello
   in cima e il margine del paragrafo: a separare resta il filetto
   (border-top di .rs-eeat). Senza queste regole c'è solo più spazio
   bianco sopra il paragrafo.
   ============================================================ */
.rs-sec.rs-riconoscimenti{ padding-top:0; }
.rs-riconoscimenti .rs-eeat{ margin-top:0; }

/* ============================================================
   STORIA — titolo H1 dell'hero su mobile (fino a 700px).
   Il master impagina l'H1 in tre righe con due <br>:
   «La storia di Rosa Salva:» / «una dolce tradizione» /
   «veneziana dal 1879». Sotto i 700px (font a 44px) la prima riga
   non ci sta e andava a capo lasciando «Salva:» da sola.
   text-wrap:balance pareggia le righe dentro ogni tratto fra un
   <br> e l'altro: diventa «La storia di» / «Rosa Salva:».
   Misurato a 360, 390, 414 e 700px: nessuna parola orfana e mai
   più righe di prima.
   I <br> NON vanno nascosti (br{display:none}): nel testo non c'è
   spazio fra «Salva:» e «una», quindi le parole si incollerebbero
   («Salva:una», «tradizioneveneziana»), e lo stesso succederebbe
   alle traduzioni.
   La regola vale SOLO per la storia (body.rs-theme-storia, che le
   traduzioni ereditano dal master): gli H1 di pasticceria, locali,
   catering e delle altre pagine non cambiano.
   Nei browser che non conoscono balance resta l'a capo normale.
   ============================================================ */
@media (max-width:700px){
  .rs-theme-storia .rs-page-hero .h1{ text-wrap:balance; }
}

/* ============ SEO/GEO/AEO — pagina Pasticceria (settembre 2026) ============ */
/* ============================================================
   PASTICCERIA — riga «Rosa Salva» dentro l'H1 dell'hero (.rs-h1-kw).
   L'H1 del cliente («La parte più dolce di Venezia», chiave
   pb_hero_h1) non diceva chi: ora dentro lo stesso <h1> c'è prima
   una riga piccola col nome (chiave sp_h1_kw), poi la riga del
   cliente, invariata:
   <h1 class="h1"><span class="rs-h1-kw">Rosa Salva</span>
   <span>La parte più dolce<br>di Venezia</span></h1>
   Questa regola dà alla riga del nome l'aspetto di un occhiello: su
   una riga sua, maiuscole piccole con la spaziatura larga degli
   occhielli (.42em, come .eyebrow), nel serif dell'H1 e nel crema
   dell'occhiello dell'hero (#f0e4cf), così non compete con il
   titolo grande. Lo spazio fra i due <span> nel markup non si vede
   (la riga del nome è un blocco) ma tiene separate le parole per i
   motori di ricerca: «Rosa Salva La parte più dolce di Venezia».
   Senza questa regola «Rosa Salva» uscirebbe grande come il titolo,
   sulla stessa riga di «La parte più dolce».
   Da integrare in style.css, dopo .rs-page-hero .h1.
   ============================================================ */
/* stessa voce dell'occhiello che sta sopra (Inter 12px, maiuscoletto largo):
   le due righe si leggono come un solo blocco, «PASTICCERIA ARTIGIANALE / ROSA SALVA» */
.rs-page-hero .h1 .rs-h1-kw{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:#f0e4cf;
  margin:-4px 0 14px;
}

/* ============================================================
   PASTICCERIA — titoli delle card nelle due griglie (.rs-servizi--3).
   I sei titoli (I dolci veneziani, Pasticceria moderna, Cioccolato e
   pralineria, Gelato artigianale, Biscotteria e dolci da forno,
   Pasticceria salata e cucina) passano da <h3> a <h2>: da h3 finivano
   sotto l'h2 della scena a parallasse precedente («Pasticceria della
   tradizione», «I grandi lievitati»), come se ne fossero
   sottosezioni. Stesse chiavi, stesse classi.
   In style.css l'aspetto è definito solo per .rs-servizio h3
   (font-family:var(--serif); font-size:27px; font-weight:600;
   margin:0 0 10px): questa regola dà a .rs-servizio h2 lo stesso
   identico aspetto, così a schermo non cambia nulla.
   Senza questa regola i titoli prenderebbero la dimensione di
   default del browser per gli h2 (1.5em, grassetto, font del corpo).
   Da integrare in style.css accanto a .rs-servizio h3.
   ============================================================ */
.rs-servizio h2{ font-family:var(--serif); font-size:27px; font-weight:600; margin:0 0 10px; }

/* ============ FOOTER NEI COLORI DELLA SEZIONE (settembre 2026) ============
   Il piede prende il colore della sezione: bordeaux per pasticceria, locali,
   contatti, shop e home; argento per il catering; oro per la storia; ottanio
   per l'hotel. Testi, logo, disegno, marchi e campi si adattano per restare
   leggibili (contrasti verificati WCAG AA: testo normale almeno 4,5:1).
   Tutti i colori passano da variabili: una sezione nuova = un blocco nuovo. */
footer.site-footer{
  --pf-bg:#8c1d16; --pf-testo:#F3DCD8; --pf-forte:#FFFFFF; --pf-muted:#E2B3AC; --pf-titoli:#F2D39A;
  --pf-linea:rgba(255,255,255,.22); --pf-campo:rgba(255,255,255,.08); --pf-campo-bordo:rgba(255,255,255,.34);
  --pf-logo:#FFFFFF; --pf-disegno:invert(1); --pf-fusione:screen; --pf-marchi:none; --pf-bottone-testo:#8c1d16;
  --foot-accent:var(--pf-logo);
}
body.rs-theme-catering footer.site-footer{
  --pf-bg:#E0E3E1; --pf-testo:#474B48; --pf-forte:#1F2220; --pf-muted:#5C605D; --pf-titoli:#3A3E3B;
  --pf-linea:rgba(31,34,32,.18); --pf-campo:rgba(255,255,255,.7); --pf-campo-bordo:rgba(31,34,32,.28);
  --pf-logo:#2E312F; --pf-disegno:none; --pf-fusione:multiply; --pf-marchi:brightness(0); --pf-bottone-testo:#E0E3E1;
}
body.rs-theme-storia footer.site-footer{
  --pf-bg:#B89656; --pf-testo:#2A1F0E; --pf-forte:#140E05; --pf-muted:#3E3019; --pf-titoli:#2A1F0E;
  --pf-linea:rgba(20,14,5,.22); --pf-campo:rgba(255,255,255,.22); --pf-campo-bordo:rgba(20,14,5,.35);
  --pf-logo:#2A1F0E; --pf-disegno:none; --pf-fusione:multiply; --pf-marchi:brightness(0); --pf-bottone-testo:#B89656;
}
body.rs-theme-hotel footer.site-footer{
  --pf-bg:#1E4148; --pf-testo:#D3E4DE; --pf-forte:#FFFFFF; --pf-muted:#A9C7BF; --pf-titoli:#E2C98F;
  --pf-linea:rgba(255,255,255,.2); --pf-campo:rgba(255,255,255,.08); --pf-campo-bordo:rgba(255,255,255,.32);
  --pf-logo:#FFFFFF; --pf-disegno:invert(1); --pf-fusione:screen; --pf-marchi:none; --pf-bottone-testo:#1E4148;
}
body.rs-theme-pasticceria footer.site-footer{ --foot-accent:var(--pf-logo); }
body.rs-theme-hotel footer.site-footer, body.rs-theme-catering footer.site-footer,
body.rs-theme-storia footer.site-footer{ --foot-accent:var(--pf-logo); }

footer.site-footer{ background:var(--pf-bg); color:var(--pf-testo); }
footer.site-footer .fnews h4, footer.site-footer .fcol h4{ color:var(--pf-titoli); }
footer.site-footer .fnews p, footer.site-footer .fcol p, footer.site-footer .fcol a{ color:var(--pf-testo); }
footer.site-footer .fcol a:hover{ color:var(--pf-forte); }
footer.site-footer .fnews, footer.site-footer .flavora{ border-bottom-color:var(--pf-linea); }
footer.site-footer .fgruppo, footer.site-footer .fbar{ border-top-color:var(--pf-linea); }
footer.site-footer .fbar{ color:var(--pf-muted); }
footer.site-footer .fbar-links a, footer.site-footer .fbar-lang a{ color:var(--pf-muted); }
footer.site-footer .fbar-links a:hover, footer.site-footer .fbar-lang a:hover{ color:var(--pf-forte); }
/* crediti: a destra sulla riga delle lingue (il menu lingue lascia lo spazio), sotto le lingue su schermi stretti */
.fbar-lang{ flex-basis:calc(100% - 24em); }
.fbar-crediti{ margin-left:auto; white-space:nowrap; }
.fbar-crediti a{ color:#a89c8e; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; }
.fbar-crediti a:hover{ color:#fff; }
footer.site-footer .fbar-crediti a{ color:var(--pf-muted); }
footer.site-footer .fbar-crediti a:hover{ color:var(--pf-forte); }
/* sotto i 760px le sei lingue vogliono la riga intera: i crediti scendono sotto, a sinistra */
@media (max-width:760px){
  .fbar-lang{ flex-basis:100%; }
  .fbar-crediti{ margin-left:0; }
}
@media (max-width:560px){
  .fbar-lang{ flex-basis:auto; }
}
footer.site-footer .rs-nl input[type="email"]{ background:var(--pf-campo); border-color:var(--pf-campo-bordo); color:var(--pf-forte); }
footer.site-footer .rs-nl input[type="email"]::placeholder{ color:var(--pf-muted); }
footer.site-footer .rs-nl input[type="email"]:focus{ border-color:var(--pf-forte); }
footer.site-footer .rs-nl button{ color:var(--pf-forte); border-color:var(--pf-forte); }
footer.site-footer .rs-nl button:hover{ background:var(--pf-forte); color:var(--pf-bottone-testo); }
footer.site-footer .rs-nl-note{ color:var(--pf-muted) !important; }
footer.site-footer .rs-nl-ok{ color:var(--pf-forte) !important; }
footer.site-footer .rs-nl-err{ color:var(--pf-forte) !important; text-decoration:underline; }
footer.site-footer .fcol .rs-foot-social a{ color:var(--pf-testo); border-color:var(--pf-campo-bordo); }
footer.site-footer .fcol .rs-foot-social a:hover{ color:var(--pf-bottone-testo); background:var(--pf-forte); border-color:var(--pf-forte); }
footer.site-footer .rs-scudetto{ color:var(--pf-testo); }
footer.site-footer .rs-scudetto:hover{ color:var(--pf-forte); }
footer.site-footer .rs-foot-logo{ background-color:var(--pf-logo); }
footer.site-footer img.rs-foot-draw{ filter:var(--pf-disegno); mix-blend-mode:var(--pf-fusione); }
footer.site-footer img.rs-foot-anbc, footer.site-footer .rs-foot-marks img.rs-foot-marchio{ filter:var(--pf-marchi); }
body.rs-theme-catering footer.site-footer .rs-foot-marks img, body.rs-theme-storia footer.site-footer .rs-foot-marks img{ opacity:.78; }
footer.site-footer .rs-langsel-btn{ color:var(--pf-testo); border-color:var(--pf-campo-bordo); }
footer.site-footer .rs-langsel-btn:hover{ color:var(--pf-forte); border-color:var(--pf-forte); }
/* il disegno non si taglia: niente riduzione forzata in larghezza oltre la colonna */
footer.site-footer .rs-foot-disegno{ max-width:100%; }
footer.site-footer img.rs-foot-draw{ max-width:100%; height:auto !important; max-height:250px; object-fit:contain; }
@media (max-width:900px){ footer.site-footer img.rs-foot-draw{ max-height:190px; } }

/* ---------- Lavora con noi (in ogni footer) ---------- */
footer.site-footer .flavora{ padding-bottom:34px; margin-bottom:44px; border-bottom:1px solid var(--pf-linea); }
.rs-lavora > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:18px 40px; flex-wrap:wrap; }
.rs-lavora > summary::-webkit-details-marker{ display:none; }
.rs-lavora-testi{ display:flex; flex-direction:column; gap:8px; max-width:640px; }
footer.site-footer .rs-lavora-h{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--pf-titoli); font-weight:600; }
footer.site-footer .rs-lavora-p{ font-size:14px; line-height:1.6; color:var(--pf-testo); }
footer.site-footer .rs-lavora-btn{ display:inline-flex; align-items:center; gap:10px; border:1.5px solid var(--pf-forte); color:var(--pf-forte);
  border-radius:999px; padding:12px 26px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  transition:background .25s ease, color .25s ease; white-space:nowrap; }
footer.site-footer .rs-lavora-btn::after{ content:"+"; font-size:15px; line-height:1; transition:transform .25s ease; }
.rs-lavora[open] .rs-lavora-btn::after{ transform:rotate(45deg); }
footer.site-footer .rs-lavora > summary:hover .rs-lavora-btn{ background:var(--pf-forte); color:var(--pf-bottone-testo); }
.rs-lavora-form{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin-top:28px; }
.rs-lavora-form label{ display:flex; flex-direction:column; gap:7px; font-size:11.5px; letter-spacing:.06em; }
footer.site-footer .rs-lavora-form label{ color:var(--pf-testo); }
.rs-lavora-form label.full{ grid-column:1 / -1; }
footer.site-footer .rs-lavora-form input:not([type="checkbox"]), footer.site-footer .rs-lavora-form select,
footer.site-footer .rs-lavora-form textarea{ font:inherit; font-size:14px; letter-spacing:0; color:var(--pf-forte);
  background:var(--pf-campo); border:1px solid var(--pf-campo-bordo); border-radius:10px; padding:11px 14px; width:100%; }
footer.site-footer .rs-lavora-form select option{ color:#1f2220; }
footer.site-footer .rs-lavora-form input:focus, footer.site-footer .rs-lavora-form select:focus,
footer.site-footer .rs-lavora-form textarea:focus{ outline:2px solid var(--pf-forte); outline-offset:1px; }
footer.site-footer .rs-lavora-form input[type="file"]{ padding:9px 12px; }
.rs-lavora-privacy{ flex-direction:row !important; align-items:flex-start; gap:10px !important; font-size:12.5px !important; letter-spacing:0 !important; line-height:1.5; }
.rs-lavora-privacy input{ margin-top:3px; accent-color:currentColor; }
footer.site-footer .rs-lavora-privacy a{ color:var(--pf-forte); text-decoration:underline; }
footer.site-footer .rs-lavora-form button{ justify-self:start; background:var(--pf-forte); color:var(--pf-bottone-testo); border:0;
  border-radius:999px; padding:13px 30px; font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; cursor:pointer; }
footer.site-footer .rs-lavora-form button:hover{ opacity:.88; }
.rs-lavora-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
footer.site-footer .rs-lavora-esito{ margin-top:18px; font-size:14px; font-weight:600; color:var(--pf-forte); }
@media (max-width:700px){ .rs-lavora-form{ grid-template-columns:1fr; } }

/* rifiniture dalla revisione: bordi dei campi ≥ 3:1, segnaposto ≥ 4,5:1, focus visibile, spazio del disegno riservato */
footer.site-footer{ --pf-campo-bordo:rgba(255,255,255,.52); --pf-cerchi:rgba(255,255,255,.34); }
body.rs-theme-hotel footer.site-footer{ --pf-campo-bordo:rgba(255,255,255,.46); --pf-cerchi:rgba(255,255,255,.32); }
body.rs-theme-catering footer.site-footer{ --pf-campo-bordo:rgba(31,34,32,.58); --pf-cerchi:rgba(31,34,32,.28); }
body.rs-theme-storia footer.site-footer{ --pf-campo-bordo:rgba(20,14,5,.64); --pf-cerchi:rgba(20,14,5,.35); }
footer.site-footer .fcol .rs-foot-social a{ border-color:var(--pf-cerchi); }
footer.site-footer .rs-nl input[type="email"]::placeholder{ color:var(--pf-testo); opacity:.85; }
footer.site-footer .rs-nl input[type="email"]:focus-visible{ outline:2px solid var(--pf-forte); outline-offset:2px; }
footer.site-footer .rs-foot-disegno{ min-height:250px; display:flex; align-items:flex-end; justify-content:center; }
@media (max-width:900px){ footer.site-footer .rs-foot-disegno{ min-height:190px; } }

/* ============ STORIA VERTICALE (settembre 2026) ============
   Markup: _BUILD/storia-verticale.py · movimento: assets/js/storia.js
   1. «Le origini» con la spirale di foto d'archivio
   2. linea del tempo verticale con foto e menù accanto alle tappe
   3. fascia «Dall'archivio»: muro inclinato dei menù che scorre */

/* ---------- 1. Le origini + spirale ---------- */
.rs-origini-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:48px 64px; align-items:center; }
.rs-origini-testo .lead{ max-width:52ch; }
.rs-spirale{ position:relative; height:clamp(460px,52vw,600px); perspective:1000px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%); }
.rs-spirale-filo{ position:absolute; left:50%; top:4%; bottom:4%; width:1px; margin-left:-.5px;
  background:linear-gradient(to bottom, transparent, rgba(179,146,79,.6) 30%, rgba(179,146,79,.6) 70%, transparent); }
.rs-spirale-card{ --c:clamp(84px,9vw,112px); position:absolute; left:50%; top:50%; width:var(--c); height:var(--c);
  margin:calc(var(--c) / -2) 0 0 calc(var(--c) / -2); object-fit:cover; border-radius:4px; background:var(--paper2);
  box-shadow:0 14px 28px -14px rgba(35,25,26,.5); filter:grayscale(1); opacity:0; will-change:transform, opacity; }
.rs-spirale.is-pronta .rs-spirale-card{ opacity:1; }
/* senza JavaScript le carte starebbero tutte al centro: meglio togliere la spirale */
@media (scripting:none){ .rs-spirale{ display:none; } .rs-origini-grid{ grid-template-columns:1fr; } }

/* ---------- 2. Linea del tempo verticale ---------- */
.rs-tlv{ background:#fbf8f2; padding:110px 0 120px; overflow:hidden; overflow:clip; } /* clip: taglia come hidden ma NON diventa contenitore di scorrimento, altrimenti le view-timeline si agganciano a lui e restano ferme */
.rs-tlv-testa{ text-align:center; max-width:820px; margin:0 auto 76px; }
.rs-tlv-testa .h2, .rs-archivio .h2, .rs-origini .h2{ text-wrap:balance; }
.rs-tlv-corpo{ position:relative; }
.rs-tlv-binario{ position:absolute; left:50%; top:0; bottom:0; width:1px; margin-left:-.5px; background:rgba(179,146,79,.28); }
.rs-tlv-riempi{ position:absolute; inset:0; background:linear-gradient(to bottom, #d9bf83, var(--accent) 40%, #8f7439);
  transform:scaleY(0); transform-origin:top; }
.rs-tlv-lista{ list-style:none; margin:0; padding:0; }
.rs-tlv-tappa{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr); align-items:start; padding:0 0 104px; }
.rs-tlv-tappa:last-child{ padding-bottom:10px; }
.rs-tlv-testo{ grid-column:1; grid-row:1; text-align:right; padding-top:2px; }
.rs-tlv-nodo{ grid-column:2; grid-row:1; justify-self:center; position:relative; margin-top:22px; width:13px; height:13px; border-radius:50%;
  background:#fbf8f2; border:1px solid rgba(179,146,79,.7); transition:background .5s ease, border-color .5s ease, transform .5s ease; }
.rs-tlv-nodo::after{ content:""; position:absolute; inset:-8px; border-radius:50%; border:1px solid rgba(179,146,79,.35); opacity:0; transform:scale(.6);
  transition:opacity .6s ease, transform .6s ease; }
.rs-tlv-tappa.is-passata .rs-tlv-nodo{ background:var(--accent); border-color:var(--accent); transform:scale(1.15); }
.rs-tlv-tappa.is-passata .rs-tlv-nodo::after{ opacity:1; transform:scale(1); }
.rs-tlv-media{ grid-column:3; grid-row:1; }
.rs-tlv-tappa:nth-child(even) .rs-tlv-testo{ grid-column:3; text-align:left; }
.rs-tlv-tappa:nth-child(even) .rs-tlv-media{ grid-column:1; }
.rs-tlv-titolo{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,2.3vw,31px); line-height:1.15; color:var(--ink); }
/* l'anno sta dentro il titolo (chi naviga per titoli sente anche la data); oro scuro per il contrasto */
.rs-tlv-anno{ display:block; font-style:italic; font-size:clamp(40px,4.6vw,62px); line-height:1; color:var(--accent-d); letter-spacing:-.01em; }
.rs-tlv-nome{ display:block; margin-top:12px; }
.rs-tlv-desc{ font-size:15.5px; line-height:1.7; color:#4a3f38; margin-top:12px; max-width:44ch; }
.rs-tlv-testo .rs-tlv-desc{ margin-left:auto; }
.rs-tlv-tappa:nth-child(even) .rs-tlv-desc{ margin-left:0; }

/* foto come stampe posate sul tavolo */
.rs-tlv-media{ display:flex; flex-direction:column; align-items:flex-start; }
.rs-tlv-tappa:nth-child(even) .rs-tlv-media{ align-items:flex-end; }
.rs-tlv-par{ position:relative; max-width:100%; }
.rs-tlv-par--1{ z-index:1; }
/* la seconda stampa va sul lato opposto alla didascalia della prima; si sovrappone solo
   dove la colonna è abbastanza larga da non coprire la didascalia (≥1200px) */
.rs-tlv-par--2{ z-index:2; margin-top:22px; align-self:flex-end; margin-right:4%; }
.rs-tlv-tappa:nth-child(even) .rs-tlv-par--2{ align-self:flex-start; margin-right:0; margin-left:4%; }
@media (min-width:1200px){ .rs-tlv-par--2{ margin-top:-64px; } }
.rs-tlv-fig{ --r:-1.4deg; margin:0; background:#fff; padding:10px 10px 12px; border-radius:2px; transform:rotate(var(--r));
  box-shadow:0 1px 2px rgba(35,25,26,.08), 0 22px 44px -22px rgba(35,25,26,.42); max-width:100%; }
.rs-tlv-par--2 .rs-tlv-fig{ --r:2.2deg; }
.rs-tlv-tappa:nth-child(even) .rs-tlv-fig{ --r:1.4deg; }
.rs-tlv-tappa:nth-child(even) .rs-tlv-par--2 .rs-tlv-fig{ --r:-2.2deg; }
/* larghezza scritta dal generatore (--dw schermo largo, --mw telefono): il riquadro c'è
   già prima che la foto arrivi, così la pagina non salta mentre si scorre */
.rs-tlv-img{ display:block; width:var(--dw,auto); max-width:100%; height:auto; border-radius:1px; }
.rs-tlv-fig figcaption{ font-family:var(--serif); font-style:italic; font-size:14.5px; line-height:1.3; color:var(--muted);
  margin-top:9px; max-width:24ch; }
.rs-tlv-tappa:nth-child(even) .rs-tlv-par--1 figcaption{ margin-left:auto; text-align:right; }
.rs-tlv-media--anno{ align-items:flex-start; padding-top:4px; }
.rs-tlv-media--anno span{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(76px,9vw,132px); line-height:.8;
  color:transparent; -webkit-text-stroke:1px rgba(179,146,79,.4); letter-spacing:-.02em; user-select:none; }
.rs-tlv-tappa:nth-child(even) .rs-tlv-media--anno{ align-items:flex-end; }

/* ingresso: solo se il JS c'è e il movimento non è ridotto */
.rs-tlv--anima .rs-tlv-testo{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rs-tlv--anima .rs-tlv-fig{ opacity:0; transform:perspective(900px) translateY(70px) rotateX(16deg) rotate(calc(var(--r) * -3));
  transition:opacity 1s cubic-bezier(.2,.7,.2,1) .12s, transform 1.25s cubic-bezier(.2,.7,.2,1) .12s; }
.rs-tlv--anima .rs-tlv-par--2 .rs-tlv-fig{ transition-delay:.3s; }
.rs-tlv--anima .rs-tlv-media--anno span{ opacity:0; transition:opacity 1.4s ease .2s; }
.rs-tlv--anima .rs-tlv-tappa.is-vista .rs-tlv-testo{ opacity:1; transform:none; }
.rs-tlv--anima .rs-tlv-tappa.is-vista .rs-tlv-fig{ opacity:1; transform:perspective(900px) rotate(var(--r)); }
.rs-tlv--anima .rs-tlv-tappa.is-vista .rs-tlv-media--anno span{ opacity:1; }

/* piccolo parallasse sulla seconda stampa: solo col timeline di scorrimento del CSS,
   che segue il dito senza ritardo (niente tremolio); altrove resta ferma */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .rs-tlv-par--2{ animation:rs-tlv-par linear both; animation-timeline:view(); }
    .rs-archivio{ view-timeline:--rs-archivio block; }
    .rs-muro-piano{ animation:rs-muro-par linear both; animation-timeline:--rs-archivio; }
  }
}
/* il filo d'oro si riempie col timeline di scorrimento del CSS: la punta sta sempre al 62% dell'altezza
   della finestra (stesso punto di lettura del vecchio calcolo in JS), senza il fotogramma di ritardo.
   storia.js scrive il transform solo dove questo non e' supportato. */
@supports (animation-timeline: view()){
  .rs-tlv-corpo{ view-timeline:--rs-tlv block; }
  .rs-tlv-riempi{ animation:rs-tlv-riempi linear both; animation-timeline:--rs-tlv;
    animation-range:cover 38vh cover calc(100% - 62vh); }
}
@keyframes rs-tlv-riempi{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes rs-tlv-par{ from{ translate:0 18px; } to{ translate:0 -18px; } }
@keyframes rs-muro-par{ from{ translate:0 70px; } to{ translate:0 -70px; } }

@media (max-width:860px){
  .rs-origini-grid{ grid-template-columns:1fr; }
  .rs-spirale{ height:420px; }
  .rs-tlv{ padding:80px 0 90px; }
  .rs-tlv-testa{ margin-bottom:52px; text-align:left; }
  .rs-tlv-binario{ left:6px; }
  .rs-tlv-tappa, .rs-tlv-tappa:nth-child(even){ grid-template-columns:13px minmax(0,1fr); column-gap:24px; padding-bottom:70px; }
  .rs-tlv-nodo{ grid-column:1 !important; margin-top:14px; }
  .rs-tlv-testo, .rs-tlv-tappa:nth-child(even) .rs-tlv-testo{ grid-column:2; grid-row:1; text-align:left; }
  .rs-tlv-desc, .rs-tlv-testo .rs-tlv-desc{ margin-left:0; }
  .rs-tlv-media, .rs-tlv-tappa:nth-child(even) .rs-tlv-media{ grid-column:2; grid-row:2; align-items:flex-start; margin-top:30px; }
  .rs-tlv-par--2, .rs-tlv-tappa:nth-child(even) .rs-tlv-par--2{ align-self:flex-end; margin:14px 0 0 0; }
  .rs-tlv-tappa:nth-child(even) .rs-tlv-par--1 figcaption{ margin-left:0; text-align:left; }
  .rs-tlv-img{ width:min(78vw,var(--mw,100%)); }
  .rs-tlv-par--2 .rs-tlv-img{ width:min(46vw,var(--mw,100%)); }
  .rs-tlv-media--anno{ display:none; }
}

/* ---------- 3. Dall'archivio: il muro dei menù ---------- */
.rs-archivio{ position:relative; overflow:hidden; background:#15100b; color:#f3eadb; min-height:clamp(560px,92vh,880px);
  display:grid; place-items:center; isolation:isolate; }
.rs-muro{ position:absolute; inset:0; perspective:1200px; z-index:-2;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); }
.rs-muro-piano{ position:absolute; left:50%; top:50%; width:max(1380px,124vw); height:240%;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; align-items:start;
  transform:translate(-50%,-50%) rotateX(16deg) rotateZ(-14deg); }
.rs-muro-col{ overflow:visible; }
.rs-muro-col:nth-child(even){ margin-top:-140px; }
.rs-muro-nastro{ display:flex; flex-direction:column; }
.rs-muro-t{ display:block; width:100%; height:auto; margin-bottom:18px; border-radius:10px; background:#2a2018;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.7); opacity:.92; }
.rs-muro--vivo .rs-muro-nastro{ animation:rs-muro-sale var(--dur,90s) linear infinite; will-change:transform; }
.rs-muro--vivo .rs-muro-col:nth-child(1) .rs-muro-nastro{ --dur:96s; animation-delay:-20s; }
.rs-muro--vivo .rs-muro-col:nth-child(2) .rs-muro-nastro{ --dur:72s; animation-delay:-50s; }
.rs-muro--vivo .rs-muro-col:nth-child(3) .rs-muro-nastro{ --dur:110s; animation-delay:-8s; }
.rs-muro--vivo .rs-muro-col:nth-child(4) .rs-muro-nastro{ --dur:80s; animation-delay:-36s; }
.rs-muro--vivo .rs-muro-col:nth-child(5) .rs-muro-nastro{ --dur:100s; animation-delay:-64s; }
.rs-muro--vivo .rs-muro-col:nth-child(6) .rs-muro-nastro{ --dur:86s; animation-delay:-28s; }
.rs-muro--fermo .rs-muro-nastro{ animation-play-state:paused; }
@keyframes rs-muro-sale{ to{ transform:translateY(-50%); } }
.rs-archivio-velo{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 50%, rgba(21,16,11,.9) 0%, rgba(21,16,11,.72) 48%, rgba(21,16,11,.42) 100%); }
.rs-archivio-testo{ position:relative; text-align:center; max-width:860px; padding-block:80px; }
.rs-archivio .eyebrow{ color:#d9bf83; }
.rs-archivio .h2{ color:#fbf5ea; }
.rs-archivio .lead{ color:#e3d7c4; margin-left:auto; margin-right:auto; max-width:54ch; }
@media (max-width:860px){
  .rs-muro-piano{ width:190vw; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .rs-muro-col:nth-child(n+4){ display:none; }
  .rs-muro-t{ margin-bottom:12px; border-radius:7px; }
}
@media (prefers-reduced-motion:reduce){
  .rs-muro-nastro{ animation:none !important; }
  .rs-spirale-card{ transition:none; }
}

/* ============ TENDINA (settembre 2026) ============
   Menu a pannello unico sotto la barra: Catering (le cinque occasioni con una
   foto), Pasticceria (i nove reparti), Locali (i sei indirizzi). Solo schermi
   larghi (>900px); sul telefono resta il drawer.
   Markup: _BUILD/effetti-2026-09/tendina-applica.py · movimento: assets/js/tendina.js
   Senza JavaScript pulsanti e pannelli restano [hidden] e valgono i link.
   Più in fondo: il contorno di fuoco da tastiera dei comandi della barra. */

/* [hidden] deve battere i display di questo blocco */
.rs-mnav-btn[hidden], .rs-mnav-viewport[hidden], .rs-mnav-pannello[hidden]{ display:none; }

/* ---------- 1. la freccina accanto alla voce ---------- */
header#hdr nav.rs-mnav-vivo{ --rs-mnav-gap:30px; position:relative; gap:var(--rs-mnav-gap); }
/* 6 voci + 3 freccine + lingua + carrello: sotto i 1200px la barra si stringe, cosi' il
   marchio non viene schiacciato piu' di prima (misurato: a 1024px la barra resta
   larga quanto quella senza freccine, a 960px un po' meno) */
@media (min-width:901px) and (max-width:1200px){ header#hdr nav.rs-mnav-vivo{ --rs-mnav-gap:22px; } }
@media (min-width:901px) and (max-width:1100px){ header#hdr nav.rs-mnav-vivo{ --rs-mnav-gap:18px; } }
@media (min-width:901px) and (max-width:1000px){ header#hdr nav.rs-mnav-vivo{ --rs-mnav-gap:14px; } }
@media (min-width:901px) and (max-width:1180px){
  header#hdr, header#hdr.solid{ padding-left:24px; padding-right:24px; }
  header#hdr .brand{ flex-shrink:0; }
  header#hdr nav a.navlink{ font-size:11.5px; letter-spacing:.08em; }
  header#hdr nav .rs-langsel-btn{ padding:5px 9px; gap:5px; }
  header#hdr nav .rs-langsel-btn .nm{ display:none; } /* il nome resta nel menu e nell'etichetta */
}
@media (min-width:901px) and (max-width:1000px){ header#hdr nav.rs-mnav-vivo{ --rs-mnav-gap:12px; } }
.rs-mnav-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:24px; padding:0; margin-left:calc(4px - var(--rs-mnav-gap,30px));
  background:none; border:0; border-radius:4px; color:var(--ink); opacity:.7; cursor:pointer;
  transition:opacity .2s ease, color .2s ease; }
.rs-mnav-btn::before{ content:""; position:absolute; inset:-4px -6px; }   /* bersaglio di 32px */
.rs-mnav-btn .chev{ display:block; transition:transform .24s cubic-bezier(.22,.61,.36,1); }
.rs-mnav-btn:hover, .rs-mnav-btn[aria-expanded="true"]{ opacity:1; color:var(--brand); }
.rs-mnav-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
header#hdr.accent .rs-mnav-btn{ width:22px; height:22px; color:#fff; opacity:1; background:rgba(20,14,10,.2); border-radius:50%; }
header#hdr.accent .rs-mnav-btn:hover,
header#hdr.accent .rs-mnav-btn[aria-expanded="true"]{ color:#fff; opacity:1; }

/* ---------- 2. il filo che segue le voci (sostituisce navlink::after) ---------- */
header#hdr nav.rs-mnav-vivo a.navlink::after{ display:none; }
.rs-mnav-indicatore{ position:absolute; left:0; top:0; width:100px; height:1px; background:var(--brand);
  transform-origin:0 0; transform:translate3d(0,0,0) scaleX(0); opacity:0; pointer-events:none;
  transition:transform .32s cubic-bezier(.22,.61,.36,1), opacity .2s ease; }
.rs-mnav-indicatore.is-visibile{ opacity:1; }
.rs-mnav-indicatore.is-salto{ transition:opacity .2s ease; }
header#hdr.accent .rs-mnav-indicatore{ background:#fff; }

/* ---------- 3. il riquadro unico ----------
   Il viewport sta DENTRO l'header (fisso), sotto la barra: si sposta in orizzontale
   sotto la voce aperta (--mnav-x, calcolato da tendina.js) e la superficie prende
   la misura del pannello (--mnav-w / --mnav-h). I 10px trasparenti in alto fanno
   da ponte: passando dalla voce al pannello il puntatore non esce mai. */
.rs-mnav-viewport{ position:absolute; top:100%; left:0; z-index:5; padding-top:10px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate3d(var(--mnav-x,32px),-6px,0);
  transition:opacity .2s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear .2s; }
.rs-mnav-viewport.is-aperta{ opacity:1; visibility:visible; pointer-events:auto;
  transform:translate3d(var(--mnav-x,32px),0,0);
  transition:opacity .2s ease, transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s; }
.rs-mnav-viewport.is-salto,
.rs-mnav-viewport.is-salto .rs-mnav-superficie{ transition:none; }
/* sempre opaca, anche sulla barra trasparente della home; stessa famiglia del selettore lingua */
.rs-mnav-superficie{ position:relative; width:var(--mnav-w,640px); height:var(--mnav-h,320px);
  max-width:calc(100vw - 64px); overflow:hidden; background:#fff; border:1px solid var(--paper2);
  border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.12);
  transition:width .32s cubic-bezier(.22,.61,.36,1), height .32s cubic-bezier(.22,.61,.36,1); }
/* filo in alto nel colore della sezione (bordeaux, argento sul catering, oro sulla storia).
   E' un bordo, non un riquadro interno: cosi' resta fermo anche quando il pannello scorre. */
.rs-mnav-superficie{ border-top:2px solid var(--accent); }
.rs-mnav-superficie.is-scorre{ overflow-y:auto; overscroll-behavior:contain; }

/* ---------- 4. i pannelli ---------- */
.rs-mnav-pannello{ position:absolute; top:0; left:0; max-width:calc(100vw - 66px); padding:30px 32px 28px;
  color:var(--ink); font-family:var(--sans); text-align:left; }
.rs-mnav-pannello.is-uscente{ pointer-events:none; }
.rs-mnav-lista{ list-style:none; margin:0; padding:0; }
.rs-mnav-lista li{ margin:0; padding:0; }
.rs-mnav-voce{ position:relative; display:block; padding:7px 22px 7px 0; font-family:var(--serif);
  font-size:22px; line-height:1.25; font-weight:500; color:var(--ink); transition:color .2s ease; }
/* freccia sottile sulla riga scelta (quella che comanda foto e frase) */
.rs-mnav-voce::after{ content:"→"; position:absolute; right:0; top:50%; margin-top:-.62em;
  font-family:var(--sans); font-size:14px; line-height:1.25em; color:var(--accent-d);
  opacity:0; transform:translateX(-6px); transition:opacity .2s ease, transform .2s ease; }
.rs-mnav-voce:hover, .rs-mnav-voce.is-attiva{ color:var(--ink); }
.rs-mnav-voce:hover::after, .rs-mnav-voce.is-attiva::after{ opacity:1; transform:none; }
/* la pagina in cui ci si trova: sottolineata nel colore della sezione (il testo resta scuro, contrasto pieno) */
.rs-mnav-voce[aria-current="page"] .rs-mnav-nome,
.rs-mnav-lista--righe .rs-mnav-voce[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:var(--accent); text-underline-offset:5px; }
.rs-mnav-occhiello, .rs-mnav-link, .rs-mnav-indirizzo{ font-family:var(--sans); font-size:12px;
  letter-spacing:.13em; text-transform:uppercase; font-weight:500; color:rgba(35,25,26,.7); }
.rs-mnav-occhiello{ margin:0; }
.rs-mnav-frase{ margin:10px 0 0; font-family:var(--serif); font-size:21px; line-height:1.3; color:var(--ink); }
/* sottolineatura come testo (non bordo): se l'etichetta va a capo, resta sotto ogni riga */
.rs-mnav-link{ text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--paper2);
  text-underline-offset:6px; line-height:1.9; transition:color .2s ease, text-decoration-color .2s ease; }
.rs-mnav-link:hover, .rs-mnav-link[aria-current="page"]{ color:var(--ink); text-decoration-color:var(--accent); }
.rs-mnav-piede{ display:flex; flex-wrap:wrap; gap:8px 26px; margin:18px 0 0; padding-top:16px;
  border-top:1px solid var(--paper2); }
.rs-mnav-disegno{ display:block; width:100%; height:auto; object-fit:contain; }
.rs-mnav-pannello img.is-mancante{ visibility:hidden; }
.rs-mnav-pannello a:focus-visible{ outline:2px solid var(--accent-d); outline-offset:4px; border-radius:2px; }

/* Catering: frase | occasioni | una cornice 4:5 */
.rs-mnav-pannello--catering{ width:740px; display:grid; grid-template-columns:196px minmax(0,1fr) 158px;
  gap:0 30px; align-items:start; }
.rs-mnav-pannello--catering .rs-mnav-link{ display:inline-block; margin-top:18px; }
.rs-mnav-lista--righe li + li{ border-top:1px solid var(--paper2); }
.rs-mnav-foto{ position:relative; aspect-ratio:4 / 5; border-radius:4px; overflow:hidden; background:var(--paper); }
.rs-mnav-foto img{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover;
  opacity:0; transition:opacity .32s ease; }
.rs-mnav-foto img.is-attiva{ opacity:1; }

/* Pasticceria: nove reparti in due colonne (letti dall'alto in basso) | disegno */
.rs-mnav-pannello--pasticceria{ width:680px; display:grid; grid-template-columns:minmax(0,1fr) 132px; gap:0 30px; }
.rs-mnav-lista--due{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(5,auto);
  grid-auto-flow:column; gap:0 26px; }
.rs-mnav-lista--due .rs-mnav-voce{ font-size:20px; padding:6px 0; }
.rs-mnav-lista--due .rs-mnav-voce::after{ display:none; }
.rs-mnav-lista--due .rs-mnav-voce:hover{ text-decoration:underline; text-decoration-thickness:1px;
  text-decoration-color:var(--accent); text-underline-offset:5px; }
.rs-mnav-pannello--pasticceria .rs-mnav-piede{ grid-column:1; }
.rs-mnav-pannello--pasticceria .rs-mnav-disegno{ grid-column:2; grid-row:1 / span 2; align-self:center;
  aspect-ratio:360 / 423; opacity:.92; }

/* Locali: sei indirizzi | la frase del locale scelto sopra il disegno */
.rs-mnav-pannello--locali{ width:740px; display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:0 30px; }
.rs-mnav-lista--sedi li + li{ border-top:1px solid var(--paper2); }
.rs-mnav-voce--sede{ padding:7px 22px 7px 0; }
.rs-mnav-nome{ display:block; font-size:20px; line-height:1.2; }
.rs-mnav-indirizzo{ display:block; margin-top:3px; font-size:11px; line-height:1.4; }
.rs-mnav-lato{ display:flex; flex-direction:column; gap:18px; padding:4px 0 0 26px; border-left:1px solid var(--paper2); }
/* tutte le frasi nella stessa cella: l'altezza è quella della più lunga, il riquadro non balla */
.rs-mnav-descs{ display:grid; }
.rs-mnav-desc{ grid-area:1 / 1; margin:0; font-family:var(--serif); font-style:italic; font-size:18px; line-height:1.35;
  color:#4a3f38; opacity:0; visibility:hidden; transition:opacity .24s ease, visibility 0s linear .24s; }
.rs-mnav-desc.is-attiva{ opacity:1; visibility:visible; transition:opacity .24s ease, visibility 0s; }
.rs-mnav-pannello--locali .rs-mnav-disegno{ margin-top:auto; aspect-ratio:360 / 340; opacity:.92; }
.rs-mnav-pannello--locali .rs-mnav-piede{ grid-column:1 / -1; }

/* ---------- 5. telefono e tablet stretto: la tendina non esiste ---------- */
@media (max-width:900px){
  header#hdr .rs-mnav-btn, header#hdr .rs-mnav-viewport, header#hdr .rs-mnav-indicatore{ display:none; }
}
body.rs-nav-lock header#hdr .rs-mnav-viewport{ display:none; }

/* ---------- 6. riduci movimento: niente scivolamenti, solo una breve dissolvenza ---------- */
@media (prefers-reduced-motion:reduce){
  .rs-mnav-viewport{ transform:translate3d(var(--mnav-x,32px),0,0); transition:opacity .12s linear, visibility 0s linear .12s; }
  .rs-mnav-viewport.is-aperta{ transition:opacity .12s linear, visibility 0s; }
  .rs-mnav-superficie, .rs-mnav-btn .chev, .rs-mnav-voce::after{ transition:none; }
  .rs-mnav-indicatore{ transition:opacity .12s linear; }
  .rs-mnav-foto img, .rs-mnav-desc, .rs-mnav-desc.is-attiva{ transition:none; }
}

/* ---------- 7. fuoco da tastiera sui comandi della barra ----------
   Finora nessuno: il contorno segue il colore della sezione, bianco sulle barre colorate
   e sul pannello bordeaux del drawer. */
header#hdr .brand:focus-visible,
header#hdr nav a.navlink:focus-visible,
header#hdr .rs-mnav-btn:focus-visible,
header#hdr .rs-cart:focus-visible,
header#hdr .menu-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }
/* la freccina della tendina e' tonda sulle barre colorate: il fuoco non la squadri */
header#hdr.accent .rs-mnav-btn:focus-visible{ border-radius:50%; }
header#hdr.accent .brand:focus-visible,
header#hdr.accent nav a.navlink:focus-visible,
header#hdr.accent .rs-mnav-btn:focus-visible,
header#hdr.accent .rs-cart:focus-visible,
header#hdr.accent .menu-btn:focus-visible,
body.rs-nav-lock header#hdr .menu-btn:focus-visible{ outline-color:#fff; box-shadow:0 0 0 4px #23191a; }

/* ============ RUOTA DEL GLOSSARIO (settembre 2026) ============
   Pasticceria, «Piccolo glossario dei dolci veneziani» (section#glossario.rs-ruota).
   Markup: _BUILD/effetti-2026-09/ruota-applica.py · movimento: assets/js/ruota.js
   Tre modi; la classe la mette il JS, con le stesse condizioni scritte qui:
   - .rs-ruota--perno  schermo ≥761px, alto ≥700px, mouse, animation-timeline e
                       movimento non ridotto: la sezione si ferma e l'anello gira col
                       solo CSS (view-timeline); il JS accende la carta a fuoco.
   - .rs-ruota--fila   telefoni, tablet, browser senza animation-timeline: fila di
                       carte da scorrere col dito, niente perno.
   - .rs-ruota--ferma  «riduci movimento»: il glossario di sempre con una miniatura.
   Prima che arrivi il JS (e senza JS) vale il glossario di sempre: nessun salto
   di contenuto, nessuna foto scaricata per niente. */

/* ---------- base: il glossario di sempre ---------- */
.rs-ruota .wrap{ text-align:center; }
.rs-ruota .rs-h2-sub{ margin-top:0; text-wrap:balance; }
/* il palco fuori dal perno fa da .wrap (il dl non sta più dentro .wrap, così il
   reveal globale di home.js non lo sposta) */
.rs-ruota-palco{ max-width:1280px; margin:0 auto; padding:0 32px; }
.rs-ruota-anello, .rs-ruota-pillole, .rs-ruota-passo{ display:none; }

/* «Salta il glossario»: un link sobrio sotto il titolo quando c'è la ruota;
   nel glossario fermo serve solo a chi usa la tastiera e compare col fuoco */
.rs-ruota-salta{ display:inline-block; margin-top:14px; padding-bottom:2px; font-family:var(--sans); font-size:12px;
  letter-spacing:.13em; text-transform:uppercase; font-weight:500; color:var(--muted);
  border-bottom:1px solid rgba(122,111,99,.45);
  /* opacity e transform restano nella lista: il link è figlio di .wrap e riceve il reveal
     globale (.rs-reveal); senza, questa regola (che viene dopo) lo farebbe comparire di scatto */
  transition:color .25s ease, border-color .25s ease,
    opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.rs-ruota-salta:hover{ color:var(--brand); border-color:var(--brand); }
.rs-ruota:not(.rs-ruota--perno):not(.rs-ruota--fila) .rs-ruota-salta:not(:focus){ position:absolute; width:1px; height:1px;
  margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.rs-ruota-salta:focus-visible, .rs-ruota-binario a:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.rs-ruota-binario a:focus-visible{ border-radius:999px; }

/* ---------- carte (comuni a perno e fila) ---------- */
.rs-ruota-carta:nth-child(1){ --i:0; }
.rs-ruota-carta:nth-child(2){ --i:1; }
.rs-ruota-carta:nth-child(3){ --i:2; }
.rs-ruota-carta:nth-child(4){ --i:3; }
.rs-ruota-carta:nth-child(5){ --i:4; }
.rs-ruota--perno .rs-ruota-carta, .rs-ruota--fila .rs-ruota-carta{ margin:0; }
/* il linguaggio della spirale di Storia: grigio e sfocato lontano, a colori a fuoco.
   Sono stati a classi con transizioni CSS: cambiano solo quando cambia il dolce. */
.rs-ruota--perno .rs-ruota-carta > *, .rs-ruota--fila .rs-ruota-carta > *{ display:block; width:100%; height:100%;
  object-fit:cover; border-radius:14px; background:var(--paper2);
  filter:grayscale(1) brightness(1) blur(0px); opacity:.38; scale:.9; box-shadow:0 24px 60px rgba(0,0,0,0);
  transition:filter .7s cubic-bezier(.2,.7,.2,1), opacity .7s cubic-bezier(.2,.7,.2,1),
    scale .7s cubic-bezier(.2,.7,.2,1), box-shadow .7s cubic-bezier(.2,.7,.2,1); }
.rs-ruota--perno .rs-ruota-carta.is-attiva > *, .rs-ruota--fila .rs-ruota-carta.is-attiva > *{
  filter:grayscale(0) brightness(1) blur(0px); opacity:1; scale:1; box-shadow:0 24px 60px rgba(0,0,0,.28); }
/* Baicoli: non c'è una foto del prodotto, quindi un cartoncino tipografico
   (nome in corsivo e monogramma) invece di una foto che non c'entra */
.rs-ruota--perno .rs-ruota-carta > .rs-ruota-foglio, .rs-ruota--fila .rs-ruota-carta > .rs-ruota-foglio{ position:relative; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:18px; background:var(--paper); }
.rs-ruota-foglio::before{ content:""; position:absolute; inset:10px; border:1px solid rgba(159,33,24,.32); border-radius:8px; }
/* il disegno del monogramma occupa solo il centro del suo foglio SVG: da qui la misura generosa */
.rs-ruota-stemma{ display:block; width:120px; max-width:70%; height:auto; margin:-34px 0 -30px; }
.rs-ruota-nome{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:40px; line-height:1; color:var(--ink); }

/* ---------- pillole (comuni a perno e fila) ---------- */
.rs-ruota--perno .rs-ruota-pillole, .rs-ruota--fila .rs-ruota-pillole{ display:block; position:relative; width:100%; max-width:760px;
  margin:30px auto 0; padding:6px 0; overflow:hidden; overflow:clip;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
/* il binario si sposta (translateX dal JS) per tenere al centro la pillola accesa */
.rs-ruota-binario{ position:relative; display:flex; gap:8px; width:max-content;
  transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.rs-ruota-binario.is-subito{ transition:none; }
.rs-ruota-binario a{ flex:none; display:inline-flex; align-items:center; height:38px; padding:0 18px;
  border:1px solid var(--paper2); border-radius:999px; background:#fff; color:var(--ink); white-space:nowrap;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:500;
  transition:background .4s ease, color .4s ease, border-color .4s ease; }
.rs-ruota-binario a:hover{ border-color:var(--brand); color:var(--brand); }
.rs-ruota-binario a[aria-current="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ---------- didascalia: il dl di sempre, una voce alla volta ---------- */
/* tutte le voci nella stessa cella: l'altezza è quella della più lunga, quindi
   cambiando dolce nulla sotto si sposta */
.rs-ruota--perno .rs-glo, .rs-ruota--fila .rs-glo{ display:grid; grid-template-columns:minmax(0,1fr); gap:0;
  width:100%; max-width:620px; margin:26px auto 0; text-align:center; }
.rs-ruota--perno .rs-glo-item, .rs-ruota--fila .rs-glo-item{ grid-area:1 / 1; position:relative; opacity:0; pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.7,.2,1); }
.rs-ruota--perno .rs-glo-item.is-attiva, .rs-ruota--fila .rs-glo-item.is-attiva{ opacity:1; pointer-events:auto; z-index:1; }
/* il nome lo dice già la pillola accesa: il dt resta per Google e per i lettori di schermo */
.rs-ruota--perno .rs-glo-item dt, .rs-ruota--fila .rs-glo-item dt{ position:absolute; width:1px; height:1px; margin:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.rs-ruota--perno .rs-glo-item dd, .rs-ruota--fila .rs-glo-item dd{ font-family:var(--serif); font-size:20px; line-height:1.5;
  color:var(--ink); text-wrap:pretty; }

/* ---------- 1. perno: la ruota ---------- */
@media (prefers-reduced-motion:no-preference) and (min-width:761px) and (pointer:fine) and (min-height:700px){
  @supports (animation-timeline: view()){
    /* R: raggio dell'anello; il centro sta sotto il palco, così si vede solo l'arco alto */
    /* carte grandi (Gio, 21/10/2026): l'altezza segue lo schermo (414px su 900 di altezza, fino a 480 sugli schermi alti),
       larghezza e raggio la seguono, cosi' fra una carta e l'altra resta lo stesso respiro */
    .rs-ruota--perno{ --rs-h:clamp(300px,46svh,480px); --rs-w:calc(var(--rs-h) * .733);
      --rs-r:calc(var(--rs-h) * 3 + 320px); --rs-alto:96px; }
    /* meno vuoto sopra e sotto: il titolo resta vicino all'anello, «Meglio di persona» arriva prima */
    .rs-ruota--perno.rs-sec{ padding-top:56px; padding-bottom:0; }
    .rs-ruota--perno + .rs-sec{ padding-top:56px; }
    .rs-ruota--perno .rs-ruota-stemma{ width:calc(var(--rs-w) * .55); margin:-14% 0 -12%; }
    .rs-ruota--perno .rs-ruota-nome{ font-size:calc(var(--rs-w) * .18); }
    /* corsa corta: uno schermo + 4 passi da 30svh (≈220svh, ben sotto i 330vh del riferimento) */
    .rs-ruota--perno .rs-ruota-corsa{ position:relative; height:calc(100svh + 4 * 30svh); view-timeline:--rs-ruota block; }
    /* nessun antenato con overflow: il clip sta sul palco stesso, che resta sticky */
    .rs-ruota--perno .rs-ruota-palco{ position:sticky; top:0; height:100svh; max-width:none; margin:0;
      padding:var(--rs-alto) 32px 24px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
      overflow:hidden; overflow:clip; }
    /* Un solo elemento gira, con una sola trasformazione legata allo scorrimento dal CSS:
       la muove il compositor in sincrono col gesto. 5 carte × 14° = 56° di giro. */
    .rs-ruota--perno .rs-ruota-anello{ display:block; position:relative; flex:none; width:100%;
      height:calc(40px + var(--rs-h)); pointer-events:none;
      transform-origin:50% calc(40px + var(--rs-h) / 2 + var(--rs-r));
      animation:rs-ruota-gira linear both; animation-timeline:--rs-ruota; animation-range:contain 0% contain 100%; }
    /* ogni carta sta tangente all'arco: ruotata di i×14° attorno al centro dell'anello */
    .rs-ruota--perno .rs-ruota-carta{ position:absolute; left:50%; top:calc(40px + var(--rs-h) / 2 + var(--rs-r));
      width:var(--rs-w); height:var(--rs-h); margin:calc(var(--rs-h) / -2) 0 0 calc(var(--rs-w) / -2);
      transform:rotate(calc(var(--i) * 14deg)) translateY(calc(var(--rs-r) * -1)); }
    .rs-ruota--perno .rs-ruota-carta.is-vicina > *{ filter:grayscale(1) brightness(.85) blur(2px); opacity:.72; scale:.94; }
    .rs-ruota--perno .rs-ruota-pillole, .rs-ruota--perno .rs-glo{ flex:none; }
    /* le carte vicine, inclinate, scendono sotto il bordo dell'anello: le pillole stanno più giù */
    .rs-ruota--perno .rs-ruota-pillole{ margin-top:52px; }
    /* Le cinque spie lungo la corsa: quella che tocca il centro dello schermo è il dolce
       a fuoco. I confini cadono a metà fra due carte, dove l'anello è a metà passo;
       la prima e l'ultima si allungano oltre la corsa, così anche col palco che entra
       o esce dallo schermo la carta accesa è quella in cima. */
    .rs-ruota--perno .rs-ruota-passo{ display:block; position:absolute; left:0; width:1px; pointer-events:none; }
    .rs-ruota--perno .rs-ruota-passo:nth-of-type(1){ top:-60svh; height:125svh; }
    .rs-ruota--perno .rs-ruota-passo:nth-of-type(2){ top:65svh; height:30svh; }
    .rs-ruota--perno .rs-ruota-passo:nth-of-type(3){ top:95svh; height:30svh; }
    .rs-ruota--perno .rs-ruota-passo:nth-of-type(4){ top:125svh; height:30svh; }
    .rs-ruota--perno .rs-ruota-passo:nth-of-type(5){ top:155svh; height:125svh; }
    /* schermi bassi: carte e didascalia un po' più piccole, perché tutto stia nel palco */
    @media (max-height:820px){
      .rs-ruota--perno{ --rs-alto:88px; }
      .rs-ruota--perno .rs-ruota-pillole{ margin-top:44px; }
      .rs-ruota--perno .rs-glo{ margin-top:18px; }
      .rs-ruota--perno .rs-glo-item dd{ font-size:18px; }
    }
  }
}
@keyframes rs-ruota-gira{ from{ transform:rotate(0deg); } to{ transform:rotate(-56deg); } }

/* ---------- 2. fila: carte da scorrere col dito ---------- */
@media (prefers-reduced-motion:no-preference){
  .rs-ruota--fila{ --rs-fw:min(62vw,300px); }
  .rs-ruota--fila .rs-ruota-palco{ max-width:none; padding:0; display:flex; flex-direction:column; }
  .rs-ruota--fila .rs-ruota-pillole{ order:-1; margin-top:26px; }
  /* scorrimento nativo del browser, a scatti sulla carta: nessun JS sul movimento */
  .rs-ruota--fila .rs-ruota-anello{ display:flex; gap:14px; position:relative; margin-top:16px;
    padding:12px calc(50% - var(--rs-fw) / 2) 30px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none; }
  .rs-ruota--fila .rs-ruota-anello::-webkit-scrollbar{ display:none; }
  .rs-ruota--fila .rs-ruota-carta{ flex:0 0 var(--rs-fw); aspect-ratio:4 / 5; scroll-snap-align:center; }
  /* niente sfocatura sui telefoni: solo grigio e trasparenza */
  .rs-ruota--fila .rs-ruota-carta > *{ opacity:.55; scale:.94; }
  .rs-ruota--fila .rs-ruota-carta.is-vicina > *{ opacity:.72; }
  .rs-ruota--fila .rs-ruota-carta.is-attiva > *{ box-shadow:0 16px 32px -12px rgba(0,0,0,.32); }
  .rs-ruota--fila .rs-glo{ padding:0 24px; margin-top:6px; }
  .rs-ruota--fila .rs-glo-item dd{ font-size:18px; }
  .rs-ruota--fila .rs-ruota-nome{ font-size:34px; }
  /* col mouse (browser senza animation-timeline) una barra sottile aiuta a capire che la fila scorre */
  @media (pointer:fine){ .rs-ruota--fila .rs-ruota-anello{ scrollbar-width:thin; } }
}

/* ---------- 3. glossario fermo: miniatura accanto al nome ---------- */
.rs-ruota--ferma .rs-glo-item dt{ display:flex; align-items:center; gap:16px; }
.rs-ruota--ferma .rs-glo-item dt::before{ content:""; flex:none; width:72px; height:72px; border-radius:10px;
  background:var(--paper) center / cover no-repeat; }
.rs-ruota--ferma #glo-1 dt::before{ background-image:url(/assets/img/pasticceria/ruota/zaleti.webp); }
.rs-ruota--ferma #glo-2 dt::before{ background:var(--paper) url(/assets/monogramma.svg) center / 64px auto no-repeat;
  box-shadow:inset 0 0 0 1px rgba(159,33,24,.22); }
.rs-ruota--ferma #glo-3 dt::before{ background-image:url(/assets/img/pasticceria/ruota/frittelle.webp); }
.rs-ruota--ferma #glo-4 dt::before{ background-image:url(/assets/img/pasticceria/ruota/galani.webp); }
.rs-ruota--ferma #glo-5 dt::before{ background-image:url(/assets/img/pasticceria/ruota/buranelli.webp); }
@media (scripting:none){
  .rs-ruota-anello, .rs-ruota-pillole, .rs-ruota-passo{ display:none !important; }
  .rs-ruota .rs-glo-item dt{ display:flex; align-items:center; gap:16px; }
  .rs-ruota .rs-glo-item dt::before{ content:""; flex:none; width:72px; height:72px; border-radius:10px;
    background:var(--paper) center / cover no-repeat; }
  .rs-ruota #glo-1 dt::before{ background-image:url(/assets/img/pasticceria/ruota/zaleti.webp); }
  .rs-ruota #glo-2 dt::before{ background:var(--paper) url(/assets/monogramma.svg) center / 64px auto no-repeat;
    box-shadow:inset 0 0 0 1px rgba(159,33,24,.22); }
  .rs-ruota #glo-3 dt::before{ background-image:url(/assets/img/pasticceria/ruota/frittelle.webp); }
  .rs-ruota #glo-4 dt::before{ background-image:url(/assets/img/pasticceria/ruota/galani.webp); }
  .rs-ruota #glo-5 dt::before{ background-image:url(/assets/img/pasticceria/ruota/buranelli.webp); }
}

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion:reduce){
  .rs-ruota-binario, .rs-ruota-carta > *, .rs-glo-item, .rs-ruota-salta{ transition:none !important; }
  /* mancava: la scritta oro «1879» (style.css, .rs-shiny) girava anche con «riduci movimento» */
  .rs-shiny{ animation:none; }
}

/* ============ NASTRI DI SERATE (catering, settembre 2026) ============
   Galleria «Dai nostri eventi» di catering/index.html: testo a sinistra,
   due colonne di foto che scorrono piano in versi opposti a destra.
   Markup: _BUILD/effetti-2026-09/nastri-applica.py · movimento: assets/js/nastro.js
   Stati:
   - base (senza JS, «riduci movimento», o prima che il JS parta): griglia ferma
     2 colonne × 3 file con le sei foto di sempre, come la vecchia .rs-photogrid;
     le tre foto in più (.rs-nastro-extra) servono solo al nastro e restano nascoste
     (sono lazy: finché non si vedono non si scaricano);
   - .rs-nastri--vivo (JS, schermo >700px): colonne a nastro, copie aggiunte dal JS;
   - ≤700px: una fila di foto da scorrere col dito, niente movimento automatico.
   Il nastro sta un livello sotto i figli di .wrap: il reveal di home.js sposta
   .rs-nastri, non le piste, così i due movimenti non si sommano. */

/* ---------- impaginazione ---------- */
.rs-galleria-split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,80px); align-items:center; }
.rs-galleria-testo{ position:sticky; top:140px; align-self:center; }
.rs-galleria-testo .h2{ text-wrap:balance; }
.rs-galleria-testo .lead{ max-width:46ch; }

/* ---------- base: griglia ferma (niente JS / riduci movimento) ---------- */
.rs-nastri{ position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.rs-nastro-col, .rs-nastro-scorri{ display:contents; }
.rs-nastro-scorri > img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:14px; background:#ebe6de; }
.rs-nastro-scorri > .rs-nastro-extra{ display:none; }
.rs-nastri-pausa{ display:none; }

/* ---------- nastro vivo (JS, schermo >700px, movimento consentito) ---------- */
/* prima vh, poi svh: un browser che non conosce svh tiene vh invece di lasciare la colonna alta come tutta la pista */
.rs-nastri.rs-nastri--vivo{ height:min(78vh,760px); height:min(78svh,760px); align-items:start; }
.rs-nastri--vivo .rs-nastro-col{ display:block; height:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); }
/* margine sotto ogni foto invece del gap: le due metà della pista sono identiche e il giro torna esatto */
.rs-nastri--vivo .rs-nastro-scorri{ display:flex; flex-direction:column;
  animation:rs-nastro-sale 85s linear infinite; will-change:transform; }
.rs-nastri--vivo .rs-nastro-col:nth-child(2) .rs-nastro-scorri{ animation-duration:100s; animation-direction:reverse; }
.rs-nastri--vivo .rs-nastro-scorri > img{ flex:none; aspect-ratio:4/5; margin:0 0 16px; }
.rs-nastri--vivo .rs-nastro-scorri > .rs-nastro-extra{ display:block; }
.rs-nastri--fuori .rs-nastro-scorri, .rs-nastri--fermo .rs-nastro-scorri{ animation-play-state:paused; }
@keyframes rs-nastro-sale{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }

/* pausa / riprendi: piccolo cerchio argento in basso a destra (la sfumatura è sulle colonne, non qui) */
.rs-nastri--vivo .rs-nastri-pausa{ position:absolute; right:10px; bottom:10px; z-index:2; display:grid; place-items:center;
  width:32px; height:32px; padding:0; border-radius:50%; border:1px solid var(--accent); background:rgba(255,255,255,.9);
  color:var(--accent-d); cursor:pointer; transition:background .25s ease, color .25s ease; }
/* argento scuro (--accent-d) per hover e anello di focus: l'argento chiaro sul crema della pagina resta sotto 3:1 */
.rs-nastri--vivo .rs-nastri-pausa:hover{ background:var(--accent-d); border-color:var(--accent-d); color:#fff; }
.rs-nastri-pausa:focus-visible{ outline:2px solid var(--accent-d); outline-offset:3px; }
.rs-nastri-glifo{ display:block; width:10px; height:11px; border-left:3px solid currentColor; border-right:3px solid currentColor; }
.rs-nastri-pausa.is-fermo .rs-nastri-glifo{ width:0; height:0; margin-left:3px; border-style:solid; border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent currentColor; }

/* ---------- tablet: testo sopra, nastro sotto ---------- */
@media (max-width:900px){
  .rs-galleria-split{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .rs-galleria-testo{ position:static; }
  .rs-nastri.rs-nastri--vivo{ height:68vh; height:68svh; }
}

/* ---------- telefono: una fila da scorrere col dito, niente movimento ---------- */
@media (max-width:700px){
  .rs-galleria-split{ gap:32px; }
  /* la fila arriva ai bordi dello schermo: esce dal margine di .wrap (32px) e lo recupera dentro */
  .rs-nastri, .rs-nastri.rs-nastri--vivo{ display:flex; gap:12px; height:auto; margin-inline:-32px; padding:0 32px 8px;
    overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:32px;
    scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
  .rs-nastri--vivo .rs-nastro-col, .rs-nastri--vivo .rs-nastro-scorri{ display:contents; animation:none; }
  .rs-nastro-scorri > img, .rs-nastri--vivo .rs-nastro-scorri > img{ flex:0 0 72vw; width:72vw; max-width:none; aspect-ratio:4/5; margin:0; scroll-snap-align:center; }
  .rs-nastro-scorri > .rs-nastro-extra{ display:block; }
  .rs-nastri--vivo .rs-nastro-scorri > .rs-nastro-copia, .rs-nastri--vivo .rs-nastri-pausa{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .rs-nastro-scorri{ animation:none !important; }
}
/* «riduci movimento» attivato a pagina aperta: si torna alla griglia ferma delle sei foto */
@media (prefers-reduced-motion:reduce) and (min-width:701px){
  .rs-nastri.rs-nastri--vivo{ height:auto; align-items:stretch; }
  .rs-nastri--vivo .rs-nastro-col, .rs-nastri--vivo .rs-nastro-scorri{ display:contents; -webkit-mask-image:none; mask-image:none; }
  .rs-nastri--vivo .rs-nastro-scorri > img{ aspect-ratio:4/3; margin:0; }
  .rs-nastri--vivo .rs-nastro-scorri > .rs-nastro-extra, .rs-nastri--vivo .rs-nastro-scorri > .rs-nastro-copia,
  .rs-nastri--vivo .rs-nastri-pausa{ display:none; }
}

/* ============ PILLOLE (settembre 2026) ============
   Markup: _BUILD/effetti-2026-09/pillole-applica.py · comportamento: assets/js/pillole.js
   1. Pagine servizio del catering (5): in coda «Tutte le occasioni» e la fila
      delle cinque occasioni, la pagina aperta piena d'argento.
   2. Pagine dei sei locali: la stessa fila con i sei indirizzi, in Cormorant,
      la pagina aperta piena di bordeaux.
   3. /locali/: i sei nomi sopra la cartina (pulsanti di testo, filo bordeaux
      che scivola sotto il nome acceso) e la didascalia sotto la cartina.
   Schermi larghi: la fila va a capo, centrata. Telefono (≤760px): una riga sola
   che scorre di lato DENTRO il componente, bordi sfumati, nessuna barra;
   la pagina non sborda mai. Nessun movimento legato allo scorrimento. */

/* ---------- 1-2. Coda delle pagine servizio e dei locali ---------- */
.rs-occasioni-nav--pillole{ padding:34px 0 60px; }
/* nowrap: la .wrap di base ha flex-wrap:wrap, e in una colonna «a capo» ogni riga è
   larga quanto il contenuto: la fila di pillole allargherebbe la pagina invece di scorrere */
.rs-occasioni-nav.rs-occasioni-nav--pillole .wrap{ flex-direction:column; flex-wrap:nowrap; align-items:center; justify-content:flex-start; gap:18px; }
/* «Tutte le occasioni» / «Tutti i locali» su una riga propria, sopra la fila */
.rs-occasioni-nav.rs-occasioni-nav--pillole .rs-sv-back{ order:0; margin-top:0; }

.rs-pillole{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; max-width:100%; }
.rs-pillole > li{ display:flex; }
.rs-pillole a{ display:inline-flex; align-items:center; height:40px; padding:0 18px; border-radius:999px;
  border:1px solid var(--paper2); background:#fbf8f2; color:var(--ink);
  font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  line-height:1; white-space:nowrap; transition:border-color .2s ease; }
/* pagina aperta: argento scuro (--accent-d) e non l'argento chiaro, perché il testo
   bianco sull'argento chiaro non si leggerebbe abbastanza (contrasto sotto 4,5:1) */
.rs-pillole a[aria-current="page"]{ background:var(--accent-d); border-color:var(--accent-d); color:#fff; }
@media (hover:hover) and (pointer:fine){
  .rs-pillole a:not([aria-current]):hover{ border-color:var(--accent-d); }
}
.rs-pillole a:focus-visible, .rs-pillole button:focus-visible{ outline:2px solid var(--accent-d); outline-offset:3px; }

/* i sei indirizzi: un indice editoriale, nomi propri in minuscolo e serif */
.rs-pillole--locali a{ font-family:var(--serif); font-size:17px; font-weight:600; letter-spacing:0; text-transform:none; }
.rs-pillole--locali a[aria-current="page"]{ background:var(--brand); border-color:var(--brand); color:#fff; }
.rs-pillole--locali a:focus-visible{ outline-color:var(--brand); }

/* ---------- 3. /locali/: nomi sopra la cartina ---------- */
.rs-pillole--mappa{ position:relative; gap:2px 4px; margin:0 0 14px; }
.rs-pillole--mappa button{ -webkit-appearance:none; appearance:none; background:none; border:0; border-radius:6px; margin:0;
  height:44px; padding:0 13px; cursor:pointer; white-space:nowrap;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; line-height:1;
  color:rgba(35,25,26,.7); transition:color .2s ease; }
.rs-pillole--mappa button[aria-pressed="true"]{ color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .rs-pillole--mappa button:hover{ color:var(--ink); }
}
.rs-pillole--mappa button:focus-visible{ outline-color:var(--brand); outline-offset:-2px; }
/* il filo: 100px di base, allargato con scaleX alla larghezza del nome (pillole.js) */
.rs-pillole-linea{ position:absolute; left:0; top:0; width:100px; height:2px; background:var(--brand);
  transform-origin:0 50%; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.rs-pillole--mappa.is-segnata .rs-pillole-linea{ opacity:1; }
.rs-pillole--mappa.is-pronta .rs-pillole-linea{ transition:opacity .2s ease, transform .32s cubic-bezier(.22,.61,.36,1); }

/* didascalia sotto la cartina: la frase della scheda e il link alla pagina del locale */
.rs-mappa-didascalia{ margin:16px auto 0; max-width:64ch; min-height:1.35em; text-align:center;
  font-family:var(--serif); font-size:19px; line-height:1.35; color:#4a3f38; transition:opacity .2s ease; }
.rs-mappa-didascalia.is-cambio{ opacity:0; }
.rs-mappa-didascalia .d{ font-style:italic; }
.rs-mappa-link{ font-weight:600; color:var(--brand); white-space:nowrap; text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px; }
.rs-mappa-link::after{ content:" →"; content:" →" / ""; }
.rs-mappa-link:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }

/* senza JavaScript la cartina non c'è: via i nomi e la didascalia, restano le schede */
@media (scripting:none){ .rs-pillole--mappa, .rs-mappa-didascalia{ display:none; } }

/* ---------- telefono: una riga che scorre dentro il componente ---------- */
@media (max-width:760px){
  .rs-occasioni-nav--pillole{ padding:26px 0 48px; }
  .rs-occasioni-nav.rs-occasioni-nav--pillole .wrap{ align-items:stretch; gap:14px; }
  .rs-occasioni-nav.rs-occasioni-nav--pillole .rs-sv-back{ align-self:center; }
  /* la fila esce dal margine di .wrap (32px) fino ai bordi dello schermo, e rientra
     con lo stesso padding: così la sfumatura non copre la prima pillola */
  .rs-pillole{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overflow-y:hidden;
    overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
    margin-inline:-32px; padding:5px 32px; scroll-padding-inline:32px; max-width:none;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
  .rs-pillole::-webkit-scrollbar{ display:none; }
  .rs-pillole > li, .rs-pillole > button{ flex:0 0 auto; scroll-snap-align:center; }
  /* margini automatici: centrata se ci sta, scorrevole dal primo all'ultimo se non ci sta
     (justify-content:center taglierebbe l'inizio della fila, irraggiungibile) */
  .rs-pillole > li:first-of-type, .rs-pillole > button:first-of-type{ margin-inline-start:auto; }
  .rs-pillole > li:last-of-type, .rs-pillole > button:last-of-type{ margin-inline-end:auto; }
  .rs-pillole--mappa{ gap:0 2px; margin-bottom:10px; }
  .rs-mappa-didascalia{ font-size:17.5px; min-height:2.7em; }
}
@media (pointer:coarse){
  .rs-pillole a{ height:44px; }
}
@media (prefers-reduced-motion:reduce){
  .rs-pillole a, .rs-pillole--mappa button, .rs-pillole-linea, .rs-mappa-didascalia{ transition:none !important; }
  .rs-mappa-didascalia.is-cambio{ opacity:1; }
}

/* candidatura inviata: hidden deve vincere su .rs-lavora-form{display:grid} */
.rs-lavora-form[hidden]{ display:none; }