/*
Theme Name:   Hello Elementor Child – LaBarés
Theme URI:    https://labarese.it
Description:  Child di Hello Elementor — sito LaBarés (Panbignè sas). La focaccia, quella vera!
Author:       Lumahub
Template:     hello-elementor
Version:      2.0.0
Text Domain:  hello-elementor-child
*/

/* =========================================================
   INDICE
   1. FONT DEL BRAND (@font-face, file in /fonts/)
   2. VARIABILI / BRAND
   3. BASE (sfondo carta, scrollbar, blocco scroll)
   4. NAVBAR (.lb-header — sticky, stato .is-stuck)
      4.1 In home è una sezione della pagina (sotto la hero)
      4.2 Nelle altre pagine è l'header del Theme Builder
   5. MENU FULL-SCREEN (burger, righe rosse + strappo kraft)
   6. HERO HOME (.lb-hero — strisce zip, logo, strappo,
      spicchio, bollo; le animazioni le guida la-bares.js)
   7. LA RUOTA (intro Elementor + slider [lb_ruota])
   8. LA RUOTINA (card Elementor)
   9. TIPOGRAFIA CONDIVISA DELLE SEZIONI
   10. SEMPLICITÀ ED ESPERIENZA
   11. DENTRO IL NOSTRO LABORATORIO
   12. PERCHÉ LABARÉS
   13. CONTATTI (scacchiera dati 2x2 + modulo Contact Form 7)
   14. FOOTER (Theme Builder — righe rosse, griglia + riga legale)
   15. IL PROGETTO + FOOD SERVICE (sezioni nuove + triangolino Menu)
   16. PAGINE LEGALI (privacy / cookie policy)
   ========================================================= */

/* ============ 1. FONT DEL BRAND ============ */
@font-face{
  font-family:'Eirene Sans';
  src:url('fonts/EireneSans-Regular.otf') format('opentype');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Eirene Sans';
  src:url('fonts/EireneSans-Bold.otf') format('opentype');
  font-weight:700; font-display:swap;
}
@font-face{
  font-family:'Asfalto';
  src:url('fonts/Asfalto.otf') format('opentype');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Randrake';
  src:url('fonts/Randrake-Regular.otf') format('opentype');
  font-weight:400; font-display:swap;
}
@font-face{
  font-family:'Taberna Serif';
  src:url('fonts/TabernaSerif-Regular.otf') format('opentype');
  font-weight:400; font-display:swap;
}

/* ============ 2. VARIABILI / BRAND ============ */
:root{
  --lb-rosso:#E52529;        /* dal logo */
  --lb-rosso-scuro:#C81E22;  /* riga alternata delle strisce */
  --lb-marrone:#603813;      /* dal logo */
  --lb-carta:#F4EBDD;
  --lb-kraft:#C9A97E;
  --lb-bianco:#FFFFFF;

  --lb-header-h:88px;

  /* ---- SISTEMA TIPOGRAFICO (misure condivise da TUTTE le sezioni:
     l'armonia nasce da qui, non da valori sparsi nei widget) ---- */
  --lb-t-occhiello:clamp(16px, 1.7vw, 22px);  /* Asfalto rosso ruotato */
  --lb-t-titolo:clamp(30px, 4.2vw, 66px);     /* Taberna, titolo sezione */
  --lb-t-intro:clamp(17px, 1.6vw, 23px);      /* Eirene, testo introduttivo */
  --lb-t-colonna:clamp(20px, 2.1vw, 30px);    /* Asfalto, titolo di colonna */
  --lb-t-testo:clamp(15px, 1.35vw, 18px);     /* Eirene, TUTTI i paragrafi */
  --lb-t-testo-lh:1.65;
  --lb-t-testo-max:420px;                     /* riga leggibile nelle colonne */
  --lb-max:1440px;                            /* larghezza di TUTTE le sezioni */

  /* laboratorio: altezza viewport stabile + mezzaluna di carta */
  --lb-vh:100svh;
  --lb-curva:clamp(40px, 5vw, 90px);

  /* strisce rosse verticali del folder */
  --lb-strisce:repeating-linear-gradient(90deg,
      var(--lb-rosso) 0 16px, var(--lb-rosso-scuro) 16px 32px);
}

@supports not (height:100svh){ :root{ --lb-vh:100vh; } }

/* smartphone: si ritoccano le VARIABILI, non le classi — così ogni
   sezione che le usa (titoli, intro, colonne dei gesti, testata del
   modulo, paragrafi) resta allineata da un punto solo */
@media (max-width:767px){
  :root{
    --lb-t-titolo:25px;
    --lb-t-intro:20px;
    --lb-t-colonna:26px;
    --lb-t-testo:18px;
  }
  /* i paragrafi Eirene che battono sul fondo carta prendono corpo:
     il tratto sottile sulla texture si perde sugli schermi piccoli.
     Restano fuori i font display (Randrake/Taberna/Asfalto: hanno un
     solo peso, il grassetto verrebbe sintetico) e i testi su fondi
     pieni (menu, slide del laboratorio). */
  .lb-intro, .lb-intro p,
  .lb-gesto p, .lb-gesto .elementor-widget-text-editor p,
  .lb-dato p, .lb-pw__info p,
  .lb-ruota__testo, .lb-form__sottotitolo, .lb-form__sottotitolo p{
    font-weight:600 !important;
  }
}

/* ============ 3. BASE ============ */
html{
  scroll-behavior:auto;      /* lo smooth è di Lenis (solo home) */
  scrollbar-gutter:stable;   /* spazio scrollbar SEMPRE riservato: senza,
    col blocco scroll iniziale ScrollTrigger misura la pagina più larga
    → barra orizzontale al rilascio */
  overflow-x:clip;           /* la barra orizzontale nasce qui, non sul body */
}
body{
  font-family:'Eirene Sans', sans-serif;
  color:var(--lb-marrone);
  background:var(--lb-carta);
  /* gli elementi che entrano dai lati (reveal sx/dx, info del Perché)
     escono di qualche decina di px e creerebbero scroll orizzontale.
     `clip` e non `hidden`: hidden creerebbe un contenitore di scroll e
     romperebbe le sezioni in position:sticky (navbar, laboratorio…). */
  overflow-x:clip;
}
/* sfondo carta fisso sotto tutto il sito (pseudo-elemento: su iOS
   background-attachment:fixed non funziona) */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:url('https://www.labarese.it/wp-content/uploads/2026/07/LaBares-sfondo.jpg') center / cover no-repeat var(--lb-carta);
}
/* scroll bloccato durante l'intro della home (classe da la-bares.js) */
body.lb-blocco{ overflow:hidden; }

/* ============ 4. NAVBAR ============ */
/* La navbar è UNICA (template Elementor id 23) e viene richiamata:
   - pagine interne: Theme Builder → header
   - home: sezione con classe lb-sticky che contiene il widget
     Shortcode [elementor-template id="23"]
   Lo sticky va sull'elemento più esterno nel flusso (il wrapper del
   Theme Builder o la sezione lb-sticky): lo shortcode annida la navbar
   in altri div e position:sticky non "esce" dal proprio genitore.
   NON usare lo "Sticky" nativo di Elementor: lo diamo noi da qui. */
.lb-header,
.lb-sticky,
[data-elementor-type="header"]{
  position:sticky; top:0; z-index:100;
}

/* gli !important servono: il CSS generato da Elementor sui singoli
   elementi (sfondo sezione, larghezza colonne) ha specificità più alta
   delle regole del child e va battuto — la fonte di verità è QUI */
/* Elementor scrive il min-height ANCHE su .elementor-container:
   per compattare la barra vanno domati entrambi i livelli */
.lb-header,
.lb-header > .elementor-container{
  min-height:var(--lb-header-h) !important;
  transition:background .35s ease, box-shadow .35s ease, min-height .35s ease;
}
.lb-header{
  background:var(--lb-carta) !important;  /* crema piena come il prototipo */
}
/* stato "agganciata allo scroll" (classe da la-bares.js):
   velo translucido + ombra + barra COMPATTA + logo ridotto */
.lb-header.is-stuck,
.lb-header.is-stuck > .elementor-container{
  min-height:calc(var(--lb-header-h) - 16px) !important;
}
.lb-header.is-stuck{
  background:rgba(244,235,221,.88) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(96,56,19,.12);
}

/* da loggati la barra admin di WP copre la navbar agganciata */
body.admin-bar .lb-header,
body.admin-bar [data-elementor-type="header"]{ top:32px; }
@media (max-width:782px){
  body.admin-bar .lb-header,
  body.admin-bar [data-elementor-type="header"]{ top:46px; }
}

/* le 3 colonne restano in riga: è la PRIMA colonna (logo) ad
   allargarsi, così pillole e Contatti finiscono a DESTRA come nel
   prototipo. Niente classi sulle colonne: l'import le perde. */
.lb-header .elementor-container{ flex-wrap:nowrap; align-items:center; }
.lb-header .elementor-column{ width:auto !important; flex-shrink:0; }
.lb-header .elementor-column:first-of-type{ flex:1 1 auto !important; }
.lb-nav{ margin-right:14px; } /* respiro tra pillole e Contatti */
.lb-nav .elementor-nav-menu--main,
.lb-nav .elementor-nav-menu{
  display:flex; justify-content:flex-end; align-items:center;
}

/* niente margini di widget dentro la navbar: il margine standard di
   Elementor (20px sotto ogni widget non-ultimo) disallinea il bottone
   Contatti rispetto al centro della barra */
.lb-header .elementor-widget{ margin-bottom:0 !important; }

/* --- logo (widget Logo del sito; meglio se col la classe lb-logo) ---
   !important: Elementor scrive la larghezza sull'elemento specifico */
.lb-header .elementor-widget-theme-site-logo img,
.lb-header .lb-logo img{
  width:clamp(120px, 12vw, 168px) !important; height:auto;
  transition:width .35s ease, filter .3s ease;
}
.lb-header.is-stuck .elementor-widget-theme-site-logo img,
.lb-header.is-stuck .lb-logo img{
  width:clamp(104px, 10vw, 140px) !important;
}

/* --- menu a pillole (widget Nav Menu dentro .lb-nav) */
.lb-nav .elementor-nav-menu{ gap:6px; }
/* !important: il CSS del template/kit di Elementor (post-23.css,
   tipografia e colori globali tipo Roboto/verde) batte il child in
   specificità — qui comanda il brand */
.lb-nav .elementor-nav-menu .elementor-item{
  font-family:'Asfalto', 'Eirene Sans', sans-serif !important; /* come il burger */
  font-weight:400 !important; font-size:22px !important;
  text-transform:uppercase !important; letter-spacing:.04em !important;
  color:var(--lb-marrone) !important;
  padding:10px 18px !important; border-radius:999px;
  transform:rotate(-3deg); /* inclinate come "La focaccia, quella vera!" */
  transition:color .25s ease, background .25s ease, transform .25s ease;
}
.lb-nav .elementor-nav-menu .elementor-item:hover,
.lb-nav .elementor-nav-menu .elementor-item:focus{
  color:var(--lb-bianco) !important; background:var(--lb-rosso) !important;
  transform:rotate(-3deg) translateY(-2px);
}

/* --- CTA Contatti (widget Pulsante con classe lb-cta) */
.lb-cta .elementor-button{
  font-family:'Asfalto', 'Eirene Sans', sans-serif !important; /* come il menu */
  font-weight:400 !important; font-size:22px !important;
  text-transform:uppercase !important; letter-spacing:.04em !important;
  color:var(--lb-bianco) !important;
  background:var(--lb-rosso) !important; /* shorthand: azzera anche
    eventuali gradienti del kit (il verde globale di Elementor) */
  padding:12px 26px !important; border-radius:999px !important;
  transform:rotate(-3deg); /* inclinato come le voci del menu */
  box-shadow:0 6px 16px rgba(229,37,41,.35);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.lb-cta .elementor-button:hover{
  color:var(--lb-bianco) !important; background:var(--lb-rosso-scuro) !important;
  transform:rotate(-3deg) translateY(-2px);
  box-shadow:0 10px 22px rgba(229,37,41,.45);
}

/* --- burger (widget HTML con markup .lb-burger; nascosto su desktop) */
.lb-burger{
  display:none;
  width:46px; height:46px; border:0; cursor:pointer;
  background:var(--lb-rosso); border-radius:50%;
  position:relative;
  box-shadow:0 6px 16px rgba(229,37,41,.35);
  transition:transform .25s ease, background .25s ease;
}
.lb-burger:hover{ transform:scale(1.06); }
.lb-burger span{
  position:absolute; left:13px; right:13px; height:2px;
  background:var(--lb-bianco); border-radius:2px;
  transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
.lb-burger span:nth-child(1){ top:17px; }
.lb-burger span:nth-child(2){ top:22px; }
.lb-burger span:nth-child(3){ top:27px; }
.lb-burger.is-open span:nth-child(1){ top:22px; transform:rotate(45deg); }
.lb-burger.is-open span:nth-child(2){ opacity:0; }
.lb-burger.is-open span:nth-child(3){ top:22px; transform:rotate(-45deg); }

/* responsive: sotto i 1025px si passa al burger.
   !important: Elementor tiene il widget nav-menu in display:flex
   con una regola caricata dopo il child */
@media (max-width:1024px){
  .lb-nav, .lb-cta{ display:none !important; }
  .lb-burger{ display:block; }
  :root{ --lb-header-h:76px; }
}
@media (max-width:600px){
  :root{ --lb-header-h:66px; }
  .lb-header .elementor-widget-theme-site-logo img,
  .lb-header .lb-logo img{ width:112px !important; }
  .lb-header.is-stuck .elementor-widget-theme-site-logo img,
  .lb-header.is-stuck .lb-logo img{ width:100px !important; }
}

/* ============ 5. MENU FULL-SCREEN ============ */
/* markup stampato dallo snippet "Lb · Menu full-screen (burger)";
   aperto/chiuso da la-bares.js con la classe .is-open */
.lb-menu{
  position:fixed; inset:0; z-index:120;
  background:var(--lb-strisce);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .6s cubic-bezier(.77,0,.18,1), visibility 0s linear .6s;
}
.lb-menu.is-open{
  clip-path:inset(0 0 0% 0);
  visibility:visible;
  transition:clip-path .6s cubic-bezier(.77,0,.18,1);
}
.lb-menu__strappo{
  position:absolute; left:0; right:0; bottom:-2px; height:22vh;
  background:url('https://www.labarese.it/wp-content/uploads/2026/07/strappo-verticale-scaled.png') top center / cover no-repeat;
  pointer-events:none;
}
.lb-menu__nav{
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.lb-menu__link{
  font-family:'Asfalto', 'Eirene Sans', sans-serif;
  font-size:clamp(34px, 7vh, 58px);
  text-transform:uppercase; letter-spacing:.03em;
  color:var(--lb-bianco); text-decoration:none;
  padding:6px 14px; line-height:1.15;
  display:flex; align-items:baseline; gap:14px;
  opacity:0; transform:translateY(28px);
  transition:opacity .45s ease, transform .45s ease, color .25s ease;
}
.lb-menu__link em{
  font-family:'Eirene Sans', sans-serif; font-style:normal;
  font-size:14px; font-weight:700; opacity:.75;
}
.lb-menu__link:hover{ color:var(--lb-marrone); }
.lb-menu.is-open .lb-menu__link{ opacity:1; transform:translateY(0); }
/* cascata: un gradino di ritardo per voce — la scala copre fino a
   9 voci, così aggiungerne una al menu non rompe l'effetto */
.lb-menu.is-open .lb-menu__link:nth-child(1){ transition-delay:.25s; }
.lb-menu.is-open .lb-menu__link:nth-child(2){ transition-delay:.32s; }
.lb-menu.is-open .lb-menu__link:nth-child(3){ transition-delay:.39s; }
.lb-menu.is-open .lb-menu__link:nth-child(4){ transition-delay:.46s; }
.lb-menu.is-open .lb-menu__link:nth-child(5){ transition-delay:.53s; }
.lb-menu.is-open .lb-menu__link:nth-child(6){ transition-delay:.60s; }
.lb-menu.is-open .lb-menu__link:nth-child(7){ transition-delay:.67s; }
.lb-menu.is-open .lb-menu__link:nth-child(8){ transition-delay:.74s; }
.lb-menu.is-open .lb-menu__link:nth-child(9){ transition-delay:.81s; }
.lb-menu__tag{
  font-family:'Randrake', cursive;
  font-size:clamp(26px, 5vh, 40px);
  color:var(--lb-bianco);
  transform:rotate(-4deg);
  margin:10px 0 0;
  opacity:0; transition:opacity .45s ease .6s;
}
.lb-menu.is-open .lb-menu__tag{ opacity:1; }
.lb-menu__info{
  position:absolute; bottom:5vh; margin:0;
  font-size:14px; font-weight:700; color:var(--lb-marrone);
  opacity:0; transition:opacity .45s ease .7s;
}
.lb-menu.is-open .lb-menu__info{ opacity:1; }

/* scroll bloccato a menu aperto */
body.lb-menu-aperto{ overflow:hidden; }

/* a menu aperto la navbar sale SOPRA il menu (lo z-index dell'header fa
   da stacking context: il burger da solo non potrebbe superarlo) e il
   logo diventa bianco come sulla copertina del folder */
body.lb-menu-aperto .lb-header,
body.lb-menu-aperto .lb-sticky,
body.lb-menu-aperto [data-elementor-type="header"]{ z-index:130; }
/* ⚠️ con overflow:hidden sul body lo STICKY della navbar smette di
   funzionare: la barra torna alla sua posizione nel documento e, se
   il menu viene aperto dopo aver scrollato, logo e X di chiusura
   finiscono fuori schermo. A menu aperto la navbar diventa FIXED in
   alto (sopra l'overlay, z 130 > 120); alla chiusura torna sticky. */
body.lb-menu-aperto .lb-sticky,
body.lb-menu-aperto [data-elementor-type="header"]{
  position:fixed !important;
  top:0; left:0; right:0; width:100%;
}
body.lb-menu-aperto .lb-header{
  background:transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
body.lb-menu-aperto .lb-header .elementor-widget-theme-site-logo img{
  filter:brightness(0) invert(1);
}
body.lb-menu-aperto .lb-burger{ background:var(--lb-bianco); }
body.lb-menu-aperto .lb-burger span{ background:var(--lb-rosso); }

@media (max-width:600px){
  .lb-menu__link{ font-size:clamp(24px, 5vh, 36px); gap:10px; }
}

/* ============ 6. HERO HOME ============ */
/* Struttura in Elementor (pagina Home, template Canvas):
   - contenitore/sezione con classe  lb-hero  (full width, no padding)
     · widget HTML:      <div class="lb-hero__strisce"></div>
     · widget Immagine:  logo bianco   → classe  lb-hero__logo
     · widget HTML:      <div class="lb-hero__strappo"></div>
     · widget Immagine:  spicchio      → classe  lb-hero__spicchio
     · widget Immagine:  bollo         → classe  lb-hero__bollo
   - subito dopo: il template "Navbar LaBarés" (classe lb-header)
   Le classi si assegnano in Avanzate → Classi CSS del widget.
   ⚠️ NIENTE transform/posizioni da Elementor su questi elementi:
   posizioni qui, animazioni in la-bares.js. */
.lb-hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  overflow:hidden;
}

/* Elementor mette su ogni .elementor-element una transition che include
   transform .4s (per i suoi hover effects): qui va SPENTA, altrimenti
   1) allo sgancio del pin lo spostamento di ScrollTrigger viene animato
      → la hero "cade dall'alto" (effetto refresh), e
   2) logo/spicchio seguono lo scrub con 0.4s di ritardo gommoso. */
.lb-hero,
.lb-hero .elementor-element,
.lb-hero__strisce,
.lb-hero__striscia,
.lb-hero__logo,
.lb-hero__strappo,
.lb-hero__spicchio,
.lb-hero__bollo{ transition:none !important; }

/* Elementor mette position:relative su TUTTI i wrapper interni
   (widget, widget-container, widget-wrap, colonna, container) e
   larghezza 100% sui widget: dentro la hero va tutto NEUTRALIZZATO,
   altrimenti gli elementi assoluti (strisce, strappo…) si misurano
   sul wrapper sbagliato (alto 0 o 104px) invece che sulla hero.
   Verificato dal vivo sullo staging il 2026-07-20. */
.lb-hero .elementor-widget,
.lb-hero .elementor-widget-container,
.lb-hero .elementor-widget-wrap,
.lb-hero .elementor-column,
.lb-hero .elementor-container{ position:static !important; }
.lb-hero .elementor-widget{ margin:0 !important; }
/* i 5 attori si ancorano SEMPRE alla hero, con le LORO larghezze
   (i widget Elementor nascono larghi 100%).
   ⚠️ SPECIFICITÀ: serve il prefisso .lb-hero — logo/spicchio/bollo sono
   ANCHE .elementor-widget, e la regola static qui sopra (2 classi)
   batterebbe un selettore a classe singola: erano tutti statici,
   logo in alto nel flusso e bollo a spasso. */
.lb-hero .lb-hero__strisce,
.lb-hero .lb-hero__strappo,
.lb-hero .lb-hero__logo,
.lb-hero .lb-hero__spicchio,
.lb-hero .lb-hero__bollo{ position:absolute !important; }
/* logica invertita: PAVIMENTO in pixel, crescita in vw — sugli schermi
   grandi scala sempre (tetto solo sullo spicchio = qualità PNG 1065px) */
.lb-hero__logo{ width:max(700px, 36vw) !important; }
.lb-hero__spicchio{ width:min(max(480px, 34vw), 1050px) !important; }
.lb-hero__bollo{ width:max(130px, 8vw) !important; }
/* logo e spicchio si centrano con margin:auto — va RIAFFERMATO dopo
   l'azzeramento dei margini dei widget qui sopra (stessa specificità:
   vince l'ordine, quindi questa regola deve stare DOPO) */
.lb-hero .lb-hero__logo,
.lb-hero .lb-hero__spicchio{ margin:0 auto !important; }

/* niente lampo al caricamento (hard-refresh compreso): sul front-end
   logo, spicchio, bollo e strappo NASCONO nascosti via CSS e li accende
   solo l'animazione (GSAP scrive stili inline che vincono su queste
   regole). Nell'editor di Elementor restano visibili per lavorare;
   senza GSAP li riaccende il fallback in la-bares.js. */
body:not(.elementor-editor-active) .lb-hero__logo,
body:not(.elementor-editor-active) .lb-hero__spicchio,
body:not(.elementor-editor-active) .lb-hero__bollo{ opacity:0; }
body:not(.elementor-editor-active) .lb-hero__strappo{ --lb-riva:0%; }

/* strisce: le genera la-bares.js dentro questo div */
.lb-hero__strisce{
  position:absolute; inset:0;
  display:flex;
}
.lb-hero__striscia{
  flex:1 0 auto;
  height:100%;
  background:var(--lb-rosso);
  transform-origin:top center;
}
.lb-hero__striscia:nth-child(even){ background:var(--lb-rosso-scuro); }

/* logo bianco: parte al centro; fade e salita da la-bares.js.
   Centrato con margin:auto — MAI transform nel CSS. */
.lb-hero__logo{
  position:absolute; left:0; right:0; top:44%; z-index:5;
  margin:0 auto;
  width:max(700px, 36vw);
}
.lb-hero__logo img{
  width:100%; height:auto;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,.18));
}

/* kraft con bordo strappato in diagonale: chiude il fondo della hero;
   comparsa da sinistra a destra col fronte SFUMATO — la-bares.js anima
   --lb-riva da 0% a 108% (default 108% = tutto visibile senza JS) */
.lb-hero__strappo{
  position:absolute; left:0; right:0; bottom:-2px; z-index:2;
  --lb-strappo-h:clamp(190px, 30vw, 420px); /* usato da tablet/mobile */
  /* desktop, logica invertita: pavimento 300px, crescita col 32%
     dell'altezza dello schermo */
  height:max(300px, 32vh);
  background:url('https://www.labarese.it/wp-content/uploads/2026/07/strappo-verticale-scaled.png') top center / cover no-repeat;
  pointer-events:none;
  --lb-riva:108%;
  -webkit-mask-image:linear-gradient(90deg, #000 calc(var(--lb-riva) - 6%), transparent var(--lb-riva));
          mask-image:linear-gradient(90deg, #000 calc(var(--lb-riva) - 6%), transparent var(--lb-riva));
}

/* spicchio: centrato (margin auto); inclinazione finale e spostamento
   a sinistra su desktop li dà la-bares.js */
.lb-hero__spicchio{
  position:absolute; left:0; right:0; bottom:9%; z-index:3;
  margin:0 auto;
  width:min(max(480px, 34vw), 1050px);
}
.lb-hero__spicchio img{
  width:100%; height:auto;
  filter:drop-shadow(0 26px 38px rgba(0,0,0,.45));
}

/* bollo "100% lavorata a mano": a destra dello spicchio */
.lb-hero__bollo{
  position:absolute; left:60%; bottom:42%; z-index:4;
  width:max(130px, 8vw);
}
.lb-hero__bollo img{
  width:100%; height:auto;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.22));
}

/* desktop grandi (oltre il full-HD): strappo alzato di 100px */
@media (min-width:1920px){
  .lb-hero__strappo{ height:max(400px, calc(32vh + 100px)); }
}

/* tablet e smartphone: strappo, spicchio e bollo alzati di 150px;
   logo all'80% dello schermo (poi sale e si ferma al 65%: la scala
   finale 0.8125 la dà la-bares.js) */
@media (max-width:1024px){
  .lb-hero__logo{ width:80vw !important; }
  .lb-hero__strappo{ height:calc(var(--lb-strappo-h) + 150px); }
  .lb-hero__spicchio{ bottom:calc(5% + 150px); }
  .lb-hero__bollo{ left:64%; bottom:calc(46% + 150px); }
}
@media (max-width:600px){
  /* smartphone: 90% dello schermo, 20px più in basso del tablet;
     l'inclinazione a sinistra (−14°) la dà la-bares.js */
  .lb-hero__spicchio{ width:90vw !important; bottom:calc(5% + 130px); }
  .lb-hero__bollo{ left:auto; right:9%; bottom:calc(38% + 150px); }
}

/* ============ 7. LA RUOTA (intro Elementor + slider [lb_ruota]) ============ */
/* 7a · intro: sezione Elementor con classe lb-ruota-intro — il fondo
   bianco in dissolvenza sulla carta lo dà QUESTA regola (per la
   variante beige: sostituire 255,255,255 con 251,247,238) */
.lb-ruota-intro{
  /* sfumature a misura FISSA (100px) e padding sempre più grande:
     il contenuto cade garantito nel bianco pieno */
  background:linear-gradient(180deg,
    rgba(255,255,255,0)   0,
    rgba(255,255,255,.92) 80px,
    rgba(255,255,255,.92) calc(100% - 80px),
    rgba(255,255,255,0)   100%) !important;
  text-align:center;
  /* !important: il template Elementor imposta padding 0 sulla sezione
     con una regola per-elemento che altrimenti vincerebbe (sezione
     alta 199px e bianco quasi azzerato — visto live il 2026-07-21) */
  padding:clamp(170px, 20vh, 250px) clamp(24px, 5vw, 60px) !important;
}
/* i widget a larghezza custom (es. il paragrafo a 680px) vanno
   ricentrati: Elementor li allinea a sinistra */
.lb-ruota-intro .elementor-widget{
  margin-left:auto !important; margin-right:auto !important;
}

/* 7b · slider (markup dallo shortcode [lb_ruota], snippet 03) */
/* FULL-BLEED — lo shortcode vive in una sezione Elementor BOXED
   (contenitore 1140px): un max-width qui non può allargarlo oltre il
   genitore e la foto scendeva a 428px. Il margine negativo lo fa
   evadere dal contenitore e lo centra sul viewport. Nessuna
   impostazione da fare in Elementor.
   Fino a 1440px la sezione è al 100% dello schermo; da 1441px in su
   sta al 98% con tetto a 1900px.
   (overflow-x:clip su html/body assorbe l'eventuale sbordo del vw) */
.lb-ruota{
  width:100vw; max-width:none;
  margin-left:calc(50% - 50vw); margin-right:0;
  padding:clamp(36px, 5vh, 60px) clamp(24px, 5vw, 60px);
  text-align:center;
}
@media (min-width:1441px){
  .lb-ruota{
    width:min(98vw, 1900px);
    margin-left:calc(50% - min(49vw, 950px));
  }
}
.lb-ruota__nome{
  font-family:'Asfalto', 'Eirene Sans', sans-serif; font-weight:400;
  font-size:clamp(30px, 3.6vw, 54px); letter-spacing:.03em;
  text-transform:uppercase; color:var(--lb-marrone);
  margin:0 0 8px;
}
/* Il palcoscenico si adatta SEMPRE al contenitore: con misure fisse in
   vw, dentro una sezione più stretta (il contenuto Elementor è 1140px)
   la somma sforava → slide fuori dal contenitore e scroll orizzontale.
   Ora le foto sono quote flessibili dello spazio disponibile. */
.lb-ruota__stage{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px, 2vw, 32px);
  width:100%; max-width:100%;
}
.lb-ruota__img{
  flex:0 1 42%; width:auto; max-width:620px; min-width:0; height:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.35));
  cursor:zoom-in;
}
/* prev/next ai lati: rotazioni SOLO da la-bares.js (mai transform CSS) */
.lb-ruota__lato{
  flex:0 1 16%; width:auto; max-width:250px; min-width:0; height:auto;
  opacity:.35; cursor:pointer;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.25));
  transition:opacity .25s ease;
}
.lb-ruota__lato:hover{ opacity:.6; }
.lb-freccia{ flex:0 0 auto; }
.lb-freccia{
  flex:0 0 auto;
  width:54px; height:54px; border:0; border-radius:50%;
  background:var(--lb-rosso); color:var(--lb-bianco);
  font-size:22px; line-height:1; cursor:pointer;
  box-shadow:0 6px 16px rgba(229,37,41,.35);
  transition:background .25s ease, transform .25s ease;
}
.lb-freccia:hover{ background:var(--lb-rosso-scuro); transform:scale(1.08); }
.lb-ruota__scheda{ margin-top:10px; }
/* ⚠️ Randrake NON ha le lettere accentate: nelle taglines usare solo
   parole senza accenti (à è ì ò ù cadrebbero nel font di ripiego) */
.lb-ruota__tag{
  font-family:'Randrake', cursive;
  font-size:clamp(28px, 3vw, 44px); color:var(--lb-rosso);
  transform:rotate(-2deg);
  margin:0 0 10px;
}
.lb-ruota__dati{
  display:none; /* riga dati tecnici nascosta (richiesta 2026-07-21);
    i dati restano nello shortcode: per rimostrarli basta togliere
    questa riga */
  font-family:'Asfalto', 'Eirene Sans', sans-serif;
  font-size:clamp(16px, 1.6vw, 21px); letter-spacing:.08em;
  text-transform:uppercase; color:var(--lb-marrone);
  margin:0 0 8px;
}
.lb-ruota__ingredienti{
  max-width:680px; margin:0 auto;
  font-size:clamp(13px, 1.2vw, 16px); line-height:1.55;
  color:var(--lb-marrone); opacity:.78;
}
@media (max-width:767px){
  /* niente padding laterale: le foto respirano su tutto lo schermo */
  .lb-ruota{ padding-left:0; padding-right:0; }
  /* niente laterali; la focaccia si prende tutto lo spazio
     tra le due frecce, che finiscono a filo dello schermo */
  .lb-ruota__lato{ display:none; }
  .lb-ruota__stage{ gap:8px; padding:0 8px; }
  .lb-ruota__img{ flex:1 1 auto; max-width:none; }
  .lb-freccia{ width:44px; height:44px; font-size:18px; }
  .lb-ruota__tag{ font-size:34px; }
  /* più piccolo dei paragrafi (18px): è un'etichetta, non una lettura */
  .lb-ruota__ingredienti{ font-size:16px; font-weight:600; padding:0 16px; }
}

/* 7c · lightbox della focaccia attiva — sfondo carta (come la pagina)
   + titolo sotto */
.lb-lightbox{
  position:fixed; inset:0; z-index:140;
  background:url('https://www.labarese.it/wp-content/uploads/2026/07/LaBares-sfondo.jpg') center / cover no-repeat var(--lb-carta);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px, 3vh, 28px);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.lb-lightbox.is-open{
  opacity:1; visibility:visible;
  transition:opacity .3s ease;
}
.lb-lightbox__img{
  max-width:88vw; max-height:72vh;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.28));
  cursor:zoom-out;
}
.lb-lightbox__titolo{
  font-family:'Asfalto', 'Eirene Sans', sans-serif; font-weight:400;
  font-size:clamp(24px, 2.6vw, 38px); letter-spacing:.04em;
  text-transform:uppercase; color:var(--lb-marrone);
  margin:0; text-align:center; padding:0 24px;
}
/* frecce del lightbox: come quelle dello slider, ancorate ai lati */
.lb-lightbox__freccia{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border:0; border-radius:50%;
  background:var(--lb-rosso); color:var(--lb-bianco);
  font-size:22px; line-height:1; cursor:pointer;
  box-shadow:0 6px 16px rgba(229,37,41,.35);
  transition:background .25s ease;
}
.lb-lightbox__freccia:hover{ background:var(--lb-rosso-scuro); }
.lb-lightbox__freccia--sx{ left:clamp(14px, 3vw, 40px); }
.lb-lightbox__freccia--dx{ right:clamp(14px, 3vw, 40px); }
@media (max-width:600px){
  .lb-lightbox__freccia{ width:44px; height:44px; font-size:18px; }
}
.lb-lightbox__chiudi{
  position:absolute; top:22px; right:22px;
  width:52px; height:52px; border:0; border-radius:50%;
  background:var(--lb-rosso); color:var(--lb-bianco);
  font-size:28px; line-height:1; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
  transition:background .25s ease, transform .25s ease;
}
.lb-lightbox__chiudi:hover{ background:var(--lb-rosso-scuro); transform:scale(1.08); }
body.lb-lightbox-aperta{ overflow:hidden; }

/* ============ 8. LA RUOTINA (card Elementor) ============ */
/* ombra morbida che segue il RITAGLIO del PNG (il box-shadow di
   Elementor disegnerebbe un rettangolo): classe lb-ruotina-foto
   già impostata sui 2 widget Immagine nel JSON */
.lb-ruotina-foto img{
  filter:drop-shadow(0 22px 32px rgba(0,0,0,.3));
}
/* min-width:0 — senza, la colonna non scende sotto la larghezza del
   contenuto e la sezione sfora, creando scroll orizzontale */
.lb-ruotina-foto, .lb-ruotina-foto img{ max-width:100%; min-width:0; }

/* ============ 9. TIPOGRAFIA CONDIVISA DELLE SEZIONI ============
   Le sezioni costruite in Elementor (Metodo, Semplicità) usano le
   classi qui sotto sui widget: la tipografia NON va impostata nei
   widget, così l'armonia si governa da un punto solo.
   Il doppio selettore (classe + .elementor-heading-title) fa sì che
   le stesse regole valgano anche sul markup nudo del prototipo. */
.lb-sezione{
  max-width:var(--lb-max) !important;
  margin-left:auto !important; margin-right:auto !important;
  text-align:center;
}
/* occhiello rosso inclinato */
.lb-occhiello .elementor-heading-title,
.lb-occhiello{
  font-family:'Asfalto', 'Eirene Sans', sans-serif !important;
  font-size:var(--lb-t-occhiello) !important; letter-spacing:.08em;
  text-transform:uppercase; color:var(--lb-rosso) !important;
}
.lb-occhiello{ transform:rotate(-2deg); }
/* titolo di sezione in Taberna */
.lb-titolo .elementor-heading-title,
.lb-titolo{
  font-family:'Taberna Serif', serif !important; font-weight:400 !important;
  font-size:var(--lb-t-titolo) !important; line-height:1.12 !important;
  text-transform:uppercase; color:var(--lb-marrone) !important;
}
/* testo introduttivo */
.lb-intro, .lb-intro p{
  font-family:'Eirene Sans', sans-serif !important;
  font-size:var(--lb-t-intro) !important; line-height:1.65 !important;
  color:var(--lb-marrone) !important;
}
.lb-intro{ max-width:780px; margin-left:auto !important; margin-right:auto !important; }
/* colonna: titolo + paragrafo (Metodo e Semplicità) */
.lb-gesto .elementor-heading-title,
.lb-gesto h3{
  font-family:'Asfalto', 'Eirene Sans', sans-serif !important; font-weight:400 !important;
  font-size:var(--lb-t-colonna) !important; letter-spacing:.03em;
  text-transform:uppercase; color:var(--lb-marrone) !important;
}
.lb-gesto .elementor-widget-text-editor,
.lb-gesto p{
  font-family:'Eirene Sans', sans-serif !important;
  font-size:var(--lb-t-testo) !important; line-height:var(--lb-t-testo-lh) !important;
  color:var(--lb-marrone) !important;
}
.lb-gesto .elementor-widget-text-editor{
  max-width:var(--lb-t-testo-max);
  margin-left:auto !important; margin-right:auto !important;
}
.lb-gesto{ text-align:center !important; }
/* numero in Randrake (Metodo) */
.lb-numero .elementor-heading-title,
.lb-gesto__n{
  font-family:'Randrake', cursive !important; font-weight:400 !important;
  font-size:clamp(34px, 3.4vw, 52px) !important; color:var(--lb-rosso) !important;
}
.lb-numero{ transform:rotate(-4deg); }
/* chiusa del Metodo: Taberna con la parte rossa sottolineata */
.lb-chiusa .elementor-heading-title,
.lb-metodo__chiusa{
  font-family:'Taberna Serif', serif !important; font-weight:400 !important;
  font-size:clamp(22px, 2.6vw, 38px) !important; line-height:1.25 !important;
  text-transform:uppercase; color:var(--lb-marrone) !important;
}
.lb-chiusa em, .lb-metodo__chiusa em{
  font-style:normal; color:var(--lb-rosso);
  border-bottom:3px solid var(--lb-rosso);
}

/* ============ 10. SEMPLICITÀ ED ESPERIENZA ============ */
/* icone SVG dei 3 gesti (widget HTML) */
.lb-gesto svg{
  width:clamp(64px, 6.2vw, 96px); height:auto;
  margin:0 auto 18px; display:block;
  fill:none; stroke:var(--lb-rosso); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
/* la citazione vive in una sezione .lb-ruota-intro (fascia bianca) */
.lb-citazione .elementor-heading-title,
.lb-semplicita__citazione{
  position:relative; display:block;
  max-width:960px; margin:0 auto;
  padding:clamp(22px, 3vw, 34px) clamp(30px, 5vw, 70px);
  font-family:'Taberna Serif', serif !important; font-weight:400 !important;
  font-size:clamp(22px, 2.5vw, 38px) !important; line-height:1.35 !important;
  text-transform:uppercase; color:var(--lb-rosso) !important;
}
.lb-citazione .elementor-heading-title::before,
.lb-citazione .elementor-heading-title::after{
  content:"“"; position:absolute; top:-6px;
  font-size:clamp(50px, 7vw, 96px); line-height:1; opacity:.28;
}
.lb-citazione .elementor-heading-title::before{ left:0; }
.lb-citazione .elementor-heading-title::after{ content:"”"; right:0; }

/* ============ 11. DENTRO IL NOSTRO LABORATORIO ============ */
/* markup dallo shortcode [lb_laboratorio] (snippet 04); regia e
   carosello in la-bares.js (initLab) */
.lb-ru-wrapper{
  display:flex; justify-content:center; align-items:start;
  width:100%; height:300vh;      /* la "corsa" di scroll della regia */
  /* la scena copre TUTTO lo schermo, navbar compresa (z-index 100):
     uscita di scena, la navbar ricompare da sé */
  position:relative; z-index:110;
  /* stesso fondo dello sticky: su mobile lo sticky è alto 100svh, ma
     quando la barra URL si ritrae il viewport si allunga e sotto la
     scena si vedrebbe la texture della pagina */
  background:var(--lb-carta);
}
.lb-ru-sticky{
  display:flex; justify-content:center; align-items:center;
  width:100%; height:var(--lb-vh);
  position:sticky; top:0;
  overflow:hidden;               /* qui dentro volano via i titoli */
  /* tinta unita, LO STESSO colore delle mezzelune: la carta che
     "morde" le foto si fonde col fondo senza stacchi */
  background:var(--lb-carta);
}
.lb-ru-titoli{
  display:flex; justify-content:center; align-items:center;
  width:100%; height:var(--lb-vh); overflow:hidden;
}
.lb-ru-titoli-wrap{
  display:flex; flex-direction:column;
  justify-content:center; align-items:center; gap:.5rem;
}
.lb-ru-riga{ display:flex; justify-content:center; align-items:center; gap:1.5rem; }
.lb-ru-riga--rev{ flex-direction:row-reverse; }
.lb-ru-riga h2{
  font-family:'Taberna Serif', Georgia, serif; font-weight:400;
  font-size:clamp(2rem, 5.4vw, 4.4rem); line-height:1;
  text-transform:uppercase; color:var(--lb-marrone);
  white-space:nowrap; margin:0;
}
.lb-ru-bollino{
  display:flex; height:3.6rem; padding:.22rem;
  background-color:var(--lb-rosso);
}
.lb-ru-bollino img{ height:100%; width:5rem; object-fit:cover; }

.lb-ru-carosello{
  display:flex; justify-content:center; align-items:center;
  width:100%; height:var(--lb-vh);
  overflow:hidden; position:absolute;
}
/* anti-FOUC: prima che GSAP prenda il controllo il carosello non c'è */
html:not(.lb-lab-pronto) .lb-ru-carosello{ display:none; }
.lb-ru-carosello-inner{
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  width:100%; overflow:hidden;
}
.lb-ru-testo{
  font-size:var(--lb-t-testo); line-height:var(--lb-t-testo-lh); text-align:center;
  width:min(34rem, 100%); padding:0 1rem; margin:0;
  color:var(--lb-marrone);
  position:relative; z-index:2; /* sopra la mezzaluna di carta */
}
.lb-ru-slide-wrap{
  display:flex; justify-content:flex-start; align-items:center;
  width:100%; position:relative;
  /* il testo si annida DENTRO la carta, +20px di stacco */
  margin-top:calc(var(--lb-curva) * -0.7 + 20px);
}
.lb-ru-slide{
  display:flex; justify-content:flex-start; align-items:center;
  width:100%; height:auto;
}
.lb-ru-img{
  display:flex; flex:none; height:auto;
  aspect-ratio:1 / 2.15;   /* foto verticali molto alte */
  max-height:90vh; overflow:hidden;
  cursor:grab;             /* si trascinano, niente lightbox */
}
.lb-ru-slide-wrap:active .lb-ru-img{ cursor:grabbing; }
.lb-ru-img img{ width:100%; height:100%; object-fit:cover; }
/* le mezzelune di carta: 2px di sconfinamento per non lasciare la
   riga di antialiasing sul bordo delle foto */
.lb-ru-curva{
  position:absolute; left:-1px; right:-1px;
  width:calc(100% + 2px); height:calc(var(--lb-curva) + 2px);
  fill:var(--lb-carta);
  z-index:1; pointer-events:none;
}
.lb-ru-curva--top{ top:-2px; }
.lb-ru-curva--bottom{ bottom:-2px; }

.lb-ru-btn{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(14px, 2.4vw, 40px);
  margin-top:calc(var(--lb-curva) * -0.7 + 20px);
  position:relative; z-index:2;
}
.lb-ru-btn button{
  display:flex; justify-content:center; align-items:center;
  width:3rem; height:3rem;
  border:1px solid var(--lb-marrone); border-radius:50%;
  background:transparent; color:var(--lb-marrone); cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.lb-ru-btn button:hover{
  background:var(--lb-rosso); color:var(--lb-bianco); border-color:var(--lb-rosso);
}
.lb-ru-btn button svg{
  width:1.5rem; height:1.5rem;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.lb-ru-hint{
  display:flex; align-items:center; gap:8px; margin:0;
  font-family:'Asfalto', 'Eirene Sans', sans-serif;
  font-size:clamp(11px, 1.1vw, 14px); letter-spacing:.06em;
  text-transform:uppercase; color:var(--lb-marrone); opacity:.7;
}
.lb-ru-hint svg{
  width:18px; height:18px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

@media (max-width:991px){
  .lb-ru-riga{ gap:1rem; }
  .lb-ru-bollino{ height:3rem; }
  .lb-ru-bollino img{ width:4.4rem; }
  .lb-ru-slide-wrap{ margin-top:calc(var(--lb-curva) * -0.25); }
  .lb-ru-btn{ margin-top:calc(var(--lb-curva) * -0.5); gap:12px; }
  .lb-ru-hint{ display:none; }

  /* dvh = altezza REALE del viewport: quando la barra URL si ritrae la
     scena cresce con lo schermo (con svh restava una fascia vuota in
     fondo) e la foto verticale guadagna quello spazio */
  :root{ --lb-vh:100dvh; }
  .lb-ru-img{ max-height:82dvh; }
}
/* browser senza dvh (Safari vecchi): si torna alla misura stabile */
@supports not (height:100dvh){
  @media (max-width:991px){
    :root{ --lb-vh:100svh; }
    .lb-ru-img{ max-height:74vh; }
  }
}
@media (max-width:860px){
  .lb-gesto{ margin-bottom:34px; }
}
@media (prefers-reduced-motion:reduce){
  .lb-ru-wrapper{ height:auto; }
  .lb-ru-sticky{ position:static; height:auto; flex-direction:column; padding:4rem 0; }
  .lb-ru-titoli{ height:auto; }
  .lb-ru-carosello{ position:static; height:auto; margin-top:3rem; }
}

/* ============ 12. PERCHÉ LABARÉS ============
   Due blocchi: 12a la testata (sezione Elementor normale, scorre e fa
   il suo fade) · 12b la scena a scrub (markup dallo shortcode
   [lb_perche], regia in la-bares.js → initPerche). */

/* 12a · testata: usa le classi condivise (lb-sezione/lb-occhiello/
   lb-titolo/lb-intro), qui solo il ritmo verticale */
.lb-perche-intro{
  padding:clamp(70px, 10vh, 130px) clamp(24px, 5vw, 60px) clamp(30px, 5vh, 60px) !important;
  text-align:center;
}

/* 12b · la scena
   NESSUNO sfondo proprio: si vede la carta della pagina, che così
   continua senza stacchi. Di conseguenza niente z-index alto (con un
   fondo trasparente la navbar si vedrebbe attraverso): la scena resta
   nel flusso e la navbar le passa sopra. */
.lb-pw{
  position:relative;
  width:100%; height:560vh;         /* la corsa dell'intera regia */
}
.lb-pw__sticky{
  position:sticky; top:0;
  width:100%; height:var(--lb-vh);
  overflow:hidden;
}

/* la foto: sempre a tutto schermo, la scopre il clip-path.
   La forma è composta da 5 VARIABILI numeriche: GSAP anima quelle,
   non la stringa. Animare direttamente `clip-path` non funziona: il
   browser comprime i valori uguali (inset(50% 50% 50% 50%) diventa
   inset(50%)) e GSAP, non riconoscendo più la stessa struttura,
   salta di netto alla forma finale invece di interpolare. */
.lb-pw__foto{
  position:absolute; inset:0; z-index:1;
  --pw-t:50; --pw-r:50; --pw-b:50; --pw-l:50; --pw-rad:9999;
  clip-path:inset(
    calc(var(--pw-t) * 1%) calc(var(--pw-r) * 1%)
    calc(var(--pw-b) * 1%) calc(var(--pw-l) * 1%)
    round calc(var(--pw-rad) * 1px)
  );
}
/* più alta della finestra: il margine in eccesso è quello che scorre
   nel parallax finale (senza, si vedrebbero bordi vuoti) */
.lb-pw__foto img{
  position:absolute; left:0; top:-8%;
  width:100%; height:116%; object-fit:cover;
}

/* la griglia a 3 colonne (le laterali ospitano le 6 info) */
.lb-pw__griglia{
  position:absolute; inset:0; z-index:2;
  display:grid; grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  gap:clamp(20px, 3vw, 50px);
  /* in alto lo spazio della navbar agganciata, che passa sopra */
  padding:clamp(96px, 12vh, 130px) clamp(24px, 4vw, 60px) clamp(40px, 6vh, 70px);
  pointer-events:none;              /* la scena non intercetta i click */
}
.lb-pw__col{
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  gap:clamp(10px, 1.8vh, 22px);
}
/* la colonna centrale è vuota: senza stretch avrebbe altezza 0 e il
   clip "colonna" verrebbe una fessura (è la misura che usa il JS) */
.lb-pw__col--centro{ align-self:stretch; }

/* le info riusano .lb-gesto (icona + titolo + testo): stesso stile
   delle colonne di Metodo e Semplicità. Qui solo le differenze. */
.lb-pw__info{ padding-top:0; text-align:center; width:100%; }
.lb-pw__info svg{
  width:clamp(40px, 3.2vw, 54px);   /* più piccole: lo spazio è un terzo */
  margin:0 auto 8px;
}
.lb-pw__info h3{ margin-bottom:8px; }
/* 400px con il freno del 100%: la riga resta leggibile ma non può mai
   superare la colonna (era il testo a creare lo scroll orizzontale) */
.lb-pw__info p{ margin-left:auto; margin-right:auto; max-width:min(400px, 100%); }

/* tablet e smartphone: niente scena, tutto statico e leggibile */
@media (max-width:900px){
  .lb-pw{ height:auto; }
  .lb-pw__sticky{ position:static; height:auto; padding:clamp(60px,9vh,110px) 0; }
  .lb-pw__foto{
    position:relative; clip-path:none !important;
    height:44vw; min-height:220px; margin:26px 0 34px;
  }
  .lb-pw__foto img{ position:absolute; inset:0; height:100%; top:0; }
  .lb-pw__griglia{
    position:static; grid-template-columns:1fr;
    padding:0 clamp(24px,5vw,60px); gap:34px;
  }
  .lb-pw__col--centro{ display:none; }
  .lb-pw__info p{ max-width:var(--lb-t-testo-max); }
}

/* ============ 13. CONTATTI ============
   Sezione costruita tutta in Elementor (JSON contatti-labares.json):
   testata + due colonne. A sinistra la scacchiera 2x2 dei dati, fatta
   con due sezioni interne da 2 colonne ciascuna: ogni casella riusa la
   classe .lb-gesto (icona + titolo + testo) come Metodo, Semplicità e
   Perché — qui stanno solo le differenze.
   A destra il modulo Contact Form 7: lo shortcode porta
   html_class="lb-form", così le regole qui sotto lo vestono da sole. */

/* 13a · scacchiera dei dati */
.lb-contatti__dati .elementor-inner-section{
  margin-bottom:clamp(20px, 3.5vh, 40px);
}
.lb-contatti__dati .elementor-inner-section:last-child{ margin-bottom:0; }
/* icone più piccole delle colonne grandi: qui lo spazio è metà */
.lb-dato svg{
  width:clamp(38px, 3.2vw, 48px) !important;
  margin:0 auto 10px !important;
}
/* e titolo di conseguenza più contenuto */
.lb-dato .elementor-heading-title{
  font-size:clamp(17px, 1.6vw, 22px) !important;
}
.lb-dato .elementor-widget-heading{ margin-bottom:6px; }
.lb-dato a{ color:var(--lb-rosso) !important; border-bottom:1px solid currentColor; }
.lb-dato a:hover{ color:var(--lb-rosso-scuro) !important; }
/* l'indirizzo va a capo: la riga sotto ogni capoverso pesa troppo,
   qui la mostriamo solo al passaggio del mouse */
.lb-dato__mappa{ border-bottom:0 !important; }
.lb-dato__mappa:hover{ border-bottom:1px solid currentColor !important; }

/* 13b · colonna del modulo: la sezione è centrata, il form no */
.lb-contatti__form{ text-align:left !important; }
.lb-form__titolo .elementor-heading-title{
  font-family:'Taberna Serif', serif !important; font-weight:400 !important;
  font-size:var(--lb-t-colonna) !important; line-height:1.15 !important;
  text-transform:uppercase; color:var(--lb-marrone) !important;
}
.lb-form__titolo{ margin-bottom:8px; }
.lb-form__sottotitolo, .lb-form__sottotitolo p{
  font-family:'Eirene Sans', sans-serif !important;
  font-size:var(--lb-t-testo) !important; line-height:var(--lb-t-testo-lh) !important;
  color:var(--lb-marrone) !important;
}
.lb-form__sottotitolo{ margin-bottom:clamp(24px, 3.5vh, 38px); }

/* 13c · il modulo Contact Form 7 */
/* L'AGGANCIO — leggere prima di toccare i selettori qui sotto.
   Il modulo NON si aggancia a una classe messa sullo shortcode
   (html_class="lb-form" non arriva sempre in fondo: CF7 lo ignora se
   lo shortcode viene ricopiato dal pannello del plugin, e il form esce
   con le sole classi "wpcf7-form init"). Ci agganciamo invece alla
   COLONNA di Elementor .lb-contatti__form, che è nel JSON della
   sezione: unica fonte, niente passaggi manuali da ricordare.
   Il selettore base è quindi .lb-contatti__form .wpcf7-form. */
.lb-form__riga--doppia{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(16px, 2vw, 30px);
}
.lb-contatti__form .wpcf7-form p{ margin:0 0 clamp(16px, 2.4vh, 26px); }
.lb-contatti__form .wpcf7-form label{
  display:block;
  font-family:'Asfalto', 'Eirene Sans', sans-serif !important;
  font-size:20px !important; letter-spacing:.06em;
  text-transform:uppercase; color:var(--lb-marrone) !important;
}
/* CF7 mette un <br> fra etichetta e campo: lo spazio lo diamo noi */
.lb-contatti__form .wpcf7-form label br{ display:none; }
.lb-contatti__form .wpcf7-form-control-wrap{ display:block; }
.lb-contatti__form .wpcf7-form input[type=text],
.lb-contatti__form .wpcf7-form input[type=email],
.lb-contatti__form .wpcf7-form input[type=tel],
.lb-contatti__form .wpcf7-form select,
.lb-contatti__form .wpcf7-form textarea{
  width:100% !important; margin-top:8px; padding:11px 14px !important;
  font-family:'Eirene Sans', sans-serif !important;
  font-size:var(--lb-t-testo) !important; color:var(--lb-marrone) !important;
  /* velo appena percettibile sulla carta: il campo si legge come area
     cliccabile senza diventare un box */
  background:rgba(255,255,255,.28) !important; border:0 !important;
  border-bottom:1.5px solid rgba(96,56,19,.35) !important;
  border-radius:8px 8px 0 0 !important; box-shadow:none !important;
  transition:border-color .25s ease, background-color .25s ease;
}
.lb-contatti__form .wpcf7-form textarea{ resize:vertical; min-height:110px; }
.lb-contatti__form .wpcf7-form input:focus,
.lb-contatti__form .wpcf7-form select:focus,
.lb-contatti__form .wpcf7-form textarea:focus{
  outline:none;
  border-bottom-color:var(--lb-rosso) !important;
  background:rgba(255,255,255,.5) !important;
}
.lb-contatti__form .wpcf7-form ::placeholder{ color:rgba(96,56,19,.4); }

/* consenso privacy */
.lb-contatti__form .lb-form__privacy label{
  display:flex; align-items:flex-start; gap:10px;
  font-family:'Eirene Sans', sans-serif !important;
  font-size:14px !important; letter-spacing:0; text-transform:none;
  color:var(--lb-marrone) !important; opacity:.85;
}
/* CF7 annida la checkbox in wrap > .wpcf7-acceptance > .wpcf7-list-item
   > label: azzeriamo i margini suoi e lasciamo comandare il flex */
.lb-form__privacy .wpcf7-acceptance,
.lb-form__privacy .wpcf7-list-item{ display:block; margin:0; }
.lb-form__privacy input[type=checkbox]{
  margin-top:3px; accent-color:var(--lb-rosso);
  width:auto !important; flex:0 0 auto;
}
.lb-form__privacy a{ color:var(--lb-rosso) !important; border-bottom:1px solid currentColor; }

/* pulsante d'invio: la stessa pillola della CTA in navbar.
   Il tema Hello disegna i submit con bordo rosso e fondo bianco:
   qui va sovrascritto tutto, bordo compreso. */
.lb-form__invio{ margin-top:clamp(20px, 3vh, 34px) !important; }
.lb-contatti__form .wpcf7-form input[type=submit],
.lb-contatti__form .wpcf7-submit{
  font-family:'Asfalto', 'Eirene Sans', sans-serif !important;
  font-weight:400 !important; font-size:22px !important;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--lb-bianco) !important; background:var(--lb-rosso) !important;
  border:0 !important; padding:12px 30px !important;
  border-radius:999px !important; cursor:pointer;
  width:auto !important; margin-top:0 !important;
  transform:rotate(-3deg);
  box-shadow:0 6px 16px rgba(229,37,41,.35);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.lb-contatti__form .wpcf7-form input[type=submit]:hover,
.lb-contatti__form .wpcf7-submit:hover{
  background:var(--lb-rosso-scuro) !important;
  transform:rotate(-3deg) translateY(-2px);
  box-shadow:0 10px 22px rgba(229,37,41,.45);
}
/* rotellina di CF7 durante l'invio */
.lb-contatti__form .wpcf7-spinner{ vertical-align:middle; }
/* messaggi di esito */
.lb-contatti__form .wpcf7-response-output{
  margin:18px 0 0 !important; padding:12px 16px !important;
  border:1.5px solid var(--lb-rosso) !important; border-radius:12px;
  font-size:var(--lb-t-testo); color:var(--lb-marrone);
}
.lb-contatti__form .wpcf7-not-valid-tip{
  font-size:13px; color:var(--lb-rosso); margin-top:6px;
}
.lb-contatti__form .wpcf7-not-valid{ border-bottom-color:var(--lb-rosso) !important; }

/* tablet: le colonne di Elementor si impilano, la scacchiera resta 2x2 */
@media (max-width:1024px){
  .lb-contatti__form{ margin-top:clamp(40px, 6vh, 70px); }
}
/* smartphone: tutto in colonna, campi a piena larghezza, pulsante al centro */
@media (max-width:767px){
  .lb-form__riga--doppia{ grid-template-columns:1fr; }
  .lb-contatti__form{ text-align:center !important; }
  .lb-contatti__form .wpcf7-form label{ text-align:left; }
  .lb-form__invio{ text-align:center; }
  /* la scacchiera diventa 1x4: senza correzioni si sommano il margine
     delle sezioni interne, i margini dei widget e i padding delle
     colonne — righe più strette e icone più raccolte */
  .lb-contatti__dati .elementor-inner-section{ margin-bottom:0; }
  .lb-contatti__dati .lb-dato{ margin-bottom:16px; }
  .lb-contatti__dati .elementor-inner-section:last-child .lb-dato:last-child{ margin-bottom:0; }
  .lb-contatti__dati .lb-dato .elementor-widget-wrap{ padding:0; }
  .lb-contatti__dati .lb-dato .elementor-widget{ margin-bottom:0; }
  .lb-dato svg{ margin-bottom:6px !important; }
}

/* ============ 14. FOOTER ============
   Theme Builder (footer di tutto il sito), da footer-labares.json:
   due sezioni con classe lb-footer — la griglia (brand · naviga ·
   contatti) e la riga legale. Le righe rosse sono le stesse dell'hero
   e del menu: la chiusura circolare del folder. */
.lb-footer{
  background:var(--lb-strisce);
  color:var(--lb-bianco);
}
/* le due sezioni si toccano: le strisce verticali proseguono senza
   cuciture, il padding disegna il respiro */
.lb-footer--griglia{ padding-top:clamp(50px, 8vh, 90px) !important; }

.lb-footer__logo img{
  width:clamp(180px, 16vw, 240px); height:auto;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.lb-footer__tag .elementor-heading-title{
  font-family:'Randrake', cursive !important; font-weight:400 !important;
  font-size:clamp(24px, 2.2vw, 32px) !important;
  color:var(--lb-bianco) !important;
}
.lb-footer__tag{ transform:rotate(-3deg); margin:14px 0 0 8px; }
.lb-footer h4.elementor-heading-title{
  font-family:'Asfalto', 'Eirene Sans', sans-serif !important; font-weight:400 !important;
  font-size:clamp(18px, 1.6vw, 22px) !important; letter-spacing:.06em;
  text-transform:uppercase; color:var(--lb-bianco) !important;
  margin:6px 0 16px;
}
.lb-footer__nav p{ margin:0 0 9px; }
.lb-footer__contatti p{ margin:0 0 12px; }
.lb-footer__nav a,
.lb-footer__contatti a,
#menufooter a{
  color:var(--lb-bianco) !important; opacity:.85; text-decoration:none;
  font-size:var(--lb-t-testo); line-height:1.5;
  transition:opacity .2s ease;
}
.lb-footer__nav a:hover,
.lb-footer__contatti a:hover,
#menufooter a:hover{ opacity:1; text-decoration:underline; }

/* menu del footer come lista (ul#menufooter): due colonne,
   su desktop come su smartphone */
#menufooter{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, auto);
  justify-content:start;
  gap:9px clamp(24px, 3vw, 44px);
  text-align:left;
}
#menufooter li{ margin:0; padding:0; }

/* riga legale: filo bianco sottile sopra, testo piccolo.
   Il bordo sta sul CONTENITORE (largo 1440), non sulla sezione:
   così il filo è largo quanto il contenuto, come nel prototipo */
.lb-footer--legale > .elementor-container{
  border-top:1px solid rgba(255,255,255,.25);
  padding:18px 0 22px;
}
.lb-footer--legale p{ margin:0; font-size:13px; opacity:.75; }
.lb-footer--legale a{ color:var(--lb-bianco) !important; }
.lb-footer--legale a:hover{ text-decoration:underline; }

/* smartphone: colonne impilate (le impila Elementor) e tutto centrato */
@media (max-width:767px){
  .lb-footer{ text-align:center; }
  .lb-footer h4.elementor-heading-title,
  .lb-footer--legale p,
  .lb-footer--legale p[style]{ text-align:center !important; }
  .lb-footer__logo img{ margin:0 auto; }
  .lb-footer__logo .elementor-widget-container{ text-align:center !important; }
  .lb-footer__tag{ margin-left:0; }
  .lb-footer__tag .elementor-heading-title{ text-align:center !important; }
  .lb-footer__nav .elementor-widget-heading + .elementor-widget-text-editor p{ text-align:center; }
  /* le due colonne del menu restano, ma la griglia si centra */
  #menufooter{ justify-content:center; }
}

/* ============ 15. IL PROGETTO + FOOD SERVICE ============
   Sezioni nuove (home-nuova-labares.json), tutte in Elementor.
   La testata riusa lb-occhiello/lb-titolo/lb-intro (sezione 9) e le
   colonne riusano lb-gesto: qui ci sono solo le classi nuove. */

/* triangolino bianco nell'angolo della hero: porta alla navbar
   (la-bares.js scorre a #lbHeader con offset 0) */
.lb-hero__menu{
  position:absolute; top:0; right:0; z-index:40;
  width:clamp(66px, 5.6vw, 84px); height:clamp(66px, 5.6vw, 84px);
  background:var(--lb-bianco);
  clip-path:polygon(0 0, 100% 0, 100% 100%);
  text-decoration:none;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.28));
  transition:width .25s ease, height .25s ease;
}
.lb-hero__menu span{
  position:absolute; top:22%; right:14%;
  transform:rotate(45deg);
  font-family:'Asfalto', 'Eirene Sans', sans-serif;
  font-size:clamp(13px, 1.1vw, 16px); letter-spacing:.08em;
  text-transform:uppercase; color:var(--lb-rosso);
}
.lb-hero__menu:hover{
  width:clamp(74px, 6.2vw, 94px); height:clamp(74px, 6.2vw, 94px);
}
/* mezzo cerchio "Scorri al menu" agganciato in basso al centro:
   stessa destinazione del triangolino (widget HTML nella hero).
   Le onde sono cerchi interi centrati sul bordo dello schermo: la
   metà sotto la taglia l'overflow:hidden della hero, resta
   l'increspatura che sale. Lo fa svanire la-bares.js (initScorri)
   appena parte lo scroll. */
.lb-hero__scorri{
  position:absolute; bottom:0; left:50%; z-index:40;
  width:clamp(120px, 9.4vw, 144px); height:clamp(48px, 3.8vw, 58px);
  transform:translateX(-50%);
  background:var(--lb-bianco);
  /* calotta: l'arco si chiude esattamente sulla linea di base
     (raggio orizzontale 50% della larghezza / verticale 100%
     dell'altezza — senza la barra i fianchi restavano dritti) */
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  text-decoration:none;
  display:flex; align-items:flex-end; justify-content:center;
  filter:drop-shadow(0 -4px 14px rgba(0,0,0,.22));
}
.lb-hero__scorri-testo{
  font-family:'Asfalto', 'Eirene Sans', sans-serif;
  font-size:clamp(14px, 1.15vw, 16px); letter-spacing:.05em;
  text-transform:uppercase; color:var(--lb-rosso);
  padding-bottom:clamp(9px, .9vw, 13px);
  transition:transform .25s ease;
}
.lb-hero__scorri:hover .lb-hero__scorri-testo{ transform:translateY(-3px); }
/* onde ELLITTICHE: stessa proporzione della calotta (l'ellisse
   intera è larga come la calotta e alta il doppio: la metà visibile
   ha esattamente la sua forma) */
.lb-hero__scorri-onda{
  position:absolute; left:50%; bottom:0;
  width:clamp(120px, 9.4vw, 144px); height:clamp(96px, 7.6vw, 116px);
  transform:translate(-50%, 50%);
  border:2px solid rgba(255,255,255,.9);
  border-radius:50%;
  opacity:0;
  animation:lb-onda 3s ease-out infinite;
  pointer-events:none;
}
.lb-hero__scorri-onda:nth-child(2){ animation-delay:1s; }
.lb-hero__scorri-onda:nth-child(3){ animation-delay:2s; }
@keyframes lb-onda{
  0%  { transform:translate(-50%, 50%) scale(1);   opacity:.75; }
  100%{ transform:translate(-50%, 50%) scale(2.2); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .lb-hero__scorri-onda{ animation:none; }
}

/* script Randrake rosso (⚠️ Randrake NON ha le lettere accentate) */
.lb-script-rosso .elementor-heading-title{
  font-family:'Randrake', cursive !important; font-weight:400 !important;
  font-size:clamp(34px, 4vw, 64px) !important; line-height:1.1 !important;
  color:var(--lb-rosso) !important;
}
.lb-script-rosso{ transform:rotate(-3deg); }

/* storia del progetto: due colonne di testo a bandiera */
.lb-storia, .lb-storia p{
  font-family:'Eirene Sans', sans-serif !important;
  font-size:var(--lb-t-testo) !important; line-height:var(--lb-t-testo-lh) !important;
  color:var(--lb-marrone) !important; text-align:left;
}
.lb-storia p{ margin:0; }

/* paragrafo centrato delle sezioni nuove */
.lb-para, .lb-para p{
  font-family:'Eirene Sans', sans-serif !important;
  font-size:var(--lb-t-testo) !important; line-height:var(--lb-t-testo-lh) !important;
  color:var(--lb-marrone) !important;
}
.lb-para{ max-width:820px; margin-left:auto !important; margin-right:auto !important; }
.lb-para--stretta{ max-width:640px; }
.lb-para a{
  color:var(--lb-rosso) !important; border-bottom:1px solid currentColor;
  font-family:'Asfalto', 'Eirene Sans', sans-serif !important;
  text-transform:uppercase; letter-spacing:.04em; text-decoration:none;
}
.lb-para a:hover{ color:var(--lb-rosso-scuro) !important; }
/* nota piccola sotto la chiusa del progetto */
.lb-nota, .lb-nota p{
  font-family:'Eirene Sans', sans-serif !important;
  font-size:var(--lb-t-testo) !important; line-height:var(--lb-t-testo-lh) !important;
  color:var(--lb-marrone) !important; opacity:.8;
}
.lb-nota{ max-width:820px; margin-left:auto !important; margin-right:auto !important; }

/* sotto-titolo di capitolo: Taberna, un gradino sotto il titolo */
.lb-sottotitolo .elementor-heading-title{
  font-family:'Taberna Serif', serif !important; font-weight:400 !important;
  font-size:clamp(24px, 2.8vw, 40px) !important; line-height:1.2 !important;
  text-transform:uppercase; color:var(--lb-marrone) !important;
}

/* griglie a 4 (e file di card): icone più raccolte dei gesti grandi */
.lb-gesti-4 .lb-gesto svg{
  width:clamp(48px, 4.6vw, 70px);
  margin-bottom:14px;
}
/* tablet: le 4 colonne diventano 2x2 (Elementor da solo le tiene in
   fila strette); smartphone: torna a comandare l'impilamento suo */
@media (max-width:1024px) and (min-width:768px){
  .lb-gesti-4 > .elementor-container{ flex-wrap:wrap; }
  .lb-gesti-4 > .elementor-container > .elementor-column{ width:50%; }
}

/* CTA pillola: widget Pulsante con classe lb-pillola — stessa pillola
   della navbar e del modulo, governata da qui e non dai controlli */
.lb-pillola .elementor-button{
  font-family:'Asfalto', 'Eirene Sans', sans-serif !important;
  font-weight:400 !important; font-size:22px !important;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--lb-bianco) !important; background:var(--lb-rosso) !important;
  border:0 !important; padding:12px 30px !important;
  border-radius:999px !important;
  transform:rotate(-3deg);
  box-shadow:0 6px 16px rgba(229,37,41,.35);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.lb-pillola .elementor-button:hover{
  background:var(--lb-rosso-scuro) !important;
  transform:rotate(-3deg) translateY(-2px);
  box-shadow:0 10px 22px rgba(229,37,41,.45);
}

/* smartphone: i paragrafi nuovi seguono la regola del corpo 600 */
@media (max-width:767px){
  .lb-storia p, .lb-para, .lb-para p, .lb-nota, .lb-nota p{
    font-weight:600 !important;
  }
}

/* ============ 16. PAGINE LEGALI (privacy / cookie policy) ============
   Pagine da privacy-labares.json e cookie-labares.json: testata con le
   classi condivise, corpo in widget Text Editor con classe lb-legale.
   Qui il testo si LEGGE: a bandiera, colonna stretta, gerarchia chiara. */
.lb-legale{
  max-width:860px;
  margin-left:auto !important; margin-right:auto !important;
  text-align:left;
}
.lb-legale p, .lb-legale li{
  font-family:'Eirene Sans', sans-serif !important;
  font-size:var(--lb-t-testo) !important; line-height:1.75 !important;
  color:var(--lb-marrone) !important;
}
.lb-legale p{ margin:0 0 16px; }
.lb-legale ul{ margin:0 0 18px; padding-left:22px; }
.lb-legale li{ margin-bottom:8px; }
.lb-legale h2{
  font-family:'Taberna Serif', serif !important; font-weight:400 !important;
  font-size:clamp(22px, 2.2vw, 32px) !important; line-height:1.2 !important;
  text-transform:uppercase; color:var(--lb-marrone) !important;
  margin:38px 0 14px;
}
.lb-legale h3{
  font-family:'Asfalto', 'Eirene Sans', sans-serif !important; font-weight:400 !important;
  font-size:clamp(17px, 1.6vw, 22px) !important; letter-spacing:.03em;
  text-transform:uppercase; color:var(--lb-rosso) !important;
  margin:26px 0 10px;
}
.lb-legale a{ color:var(--lb-rosso) !important; border-bottom:1px solid currentColor; text-decoration:none; }
.lb-legale a:hover{ color:var(--lb-rosso-scuro) !important; }
.lb-legale em{ opacity:.7; }
.lb-legale strong{ font-weight:700; }
/* pulsante "Modifica preferenze cookie": la classe cky-banner-element
   fa riaprire il banner a CookieYes, lb-cky-btn lo veste da pillola */
a.lb-cky-btn{
  display:inline-block; cursor:pointer;
  font-family:'Asfalto', 'Eirene Sans', sans-serif !important;
  font-weight:400 !important; font-size:20px !important;
  text-transform:uppercase; letter-spacing:.04em;
  color:var(--lb-bianco) !important; background:var(--lb-rosso) !important;
  border:0 !important; padding:12px 30px !important;
  border-radius:999px !important;
  margin:14px 0 6px;
  transform:rotate(-3deg);
  box-shadow:0 6px 16px rgba(229,37,41,.35);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
a.lb-cky-btn:hover{
  background:var(--lb-rosso-scuro) !important;
  transform:rotate(-3deg) translateY(-2px);
  box-shadow:0 10px 22px rgba(229,37,41,.45);
}
/* la tabella di [cky_audit_table] non deve sfondare la colonna */
.lb-legale .cky-audit-table-element, .lb-legale table{ max-width:100%; }
@media (max-width:767px){
  .lb-legale p, .lb-legale li{ font-weight:600 !important; }
}

/* reveal generico: gli elementi [data-lb-reveal] partono nascosti sul
   front-end e li accende la-bares.js allo scroll (fromTo → inline) */
body:not(.elementor-editor-active) [data-lb-reveal]{ opacity:0; }

/* accessibilità: chi chiede meno movimento non ha transizioni */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ transition-duration:.01ms !important; }
}