/* Base condivisa del sito: la mantiene il coordinatore. I costruttori NON la modificano: stili di pagina nei loro file. */
.site-header{position:sticky;top:0;z-index:50;background:var(--canvas);border-bottom:1px solid transparent;transition:border-color var(--t-hover) var(--ease-out)}
.site-header.is-scrolled{border-bottom-color:var(--hairline)}
.site-header__bar{display:flex;align-items:center;gap:var(--s-5);height:72px}
.site-header__logo{display:flex;align-items:center;flex:none;min-height:44px}
.site-header__logo img{height:26px;width:auto}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:var(--s-6);list-style:none;margin:0;padding:0}
.site-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 8px;margin-inline:-8px;text-decoration:none;font-weight:500;font-size:var(--t-small);border-bottom:1px solid transparent}
.menu-btn{display:none;align-items:center;gap:var(--s-2);height:44px;padding:0 var(--s-4);margin-left:auto;border:1px solid var(--ink);border-radius:var(--r-pill);background:transparent;color:var(--ink);font:500 var(--t-small)/1 var(--font);cursor:pointer}
.menu-btn__icon{position:relative;width:14px;height:8px;border-block:1.5px solid currentColor}
.site-menu{position:absolute;inset-inline:0;top:100%;padding-block:var(--s-7) var(--s-8)}
.site-menu[hidden]{display:none}
.site-menu ul{list-style:none;margin:0 0 var(--s-6);padding:0}
.site-menu li a{display:block;padding:var(--s-3) 0;font-size:var(--t-h2);font-weight:700;letter-spacing:var(--tr-h2);text-decoration:none}
@media (max-width:860px){.site-nav{display:none}.menu-btn{display:inline-flex}.site-header__cta{display:none}}
@media (min-width:861px){.site-menu{display:none!important}}

.section{padding-block:var(--section) 0}
.section__head{display:grid;gap:var(--s-4);margin-bottom:var(--s-7)}
.stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--gutter);align-items:center}
.stage__text{display:grid;gap:var(--s-4);align-content:center}
.stage__object{border-radius:var(--r-l);overflow:hidden}
.stage__object img,.stage__object video{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.stage{grid-template-columns:1fr}.stage__object{order:-1}}


.skip{position:absolute;left:-9999px}.skip:focus{left:var(--s-4);top:var(--s-4);z-index:100;display:inline-flex;align-items:center;min-height:44px;background:var(--accent);color:var(--accent-ink);padding:0 var(--s-4);border-radius:var(--r-s)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Finitura (dal livello della landing): comparse curate, supergrafica tono su tono, stati dei pulsanti */
:root{--ease-reveal:cubic-bezier(.2,.7,.2,1)}
.rv-on .rv{opacity:0;transform:translate3d(0,18px,0)}
.rv-on .rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease-out) calc(var(--rv-i,0) * 70ms),transform .9s var(--ease-reveal) calc(var(--rv-i,0) * 70ms)}
@media (prefers-reduced-motion:reduce){.rv-on .rv{opacity:1;transform:none}}
/* supergrafica: il simbolo ingrandito e tagliato dal bordo, Pine su Forest (Assets/Elementi grafici) */
main .on-forest{position:relative;overflow:hidden;isolation:isolate}
main .on-forest::before{content:"";position:absolute;z-index:-1;right:-6%;top:50%;height:150%;aspect-ratio:73/89.834;translate:0 -46%;background:var(--pine);-webkit-mask:url(../brand/symbol-lime.svg) center/contain no-repeat;mask:url(../brand/symbol-lime.svg) center/contain no-repeat;pointer-events:none}
@media (max-width:640px){main .on-forest::before{right:-30%;height:120%}}
.btn--ghost:hover{background:var(--ink);color:var(--canvas)}
.on-forest .btn--ghost:hover{background:var(--mist);color:var(--forest)}
.btn--primary:active,.btn--ghost:active{transform:scale(.97)}
.site-nav a{transition:border-color var(--t-hover) var(--ease-out)}
.site-nav a:hover{border-bottom-color:var(--hairline)}

/* bersagli di tocco: i link corti del piè di pagina hanno almeno 44 px anche in larghezza, senza spostare il testo */

/* piè di pagina: una sola griglia a 12 colonne. A sinistra la firma (logo, claim, invito); a destra le due linee come schede,
   e sotto ogni scheda un gruppo di collegamenti allineato alla sua colonna. Tutto sta sulle stesse linee: cima delle schede = cima
   del logo, base dei collegamenti = base dell'invito. */
.site-footer{padding-block:var(--s-9) var(--s-5);border-top:1px solid var(--hairline)}
.ft{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--gutter);padding-bottom:var(--s-8)}
.ft__brand{grid-column:1 / 6;display:flex;flex-direction:column;align-items:flex-start}
.ft__brand > img{display:block;width:150px;height:auto}
.ft__claim{margin-top:var(--s-6);font-size:clamp(1.5rem,1rem + 1.2vw,2.125rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;max-width:none}
.site-footer .ft__claim span{display:block;line-height:1.05}
.ft__claim span + span{color:var(--sage)}
.ft__cta{margin-top:auto;display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 6px 0 20px;border-radius:var(--r-pill);background:var(--lime);color:var(--forest);font-size:.9375rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease-out),box-shadow .25s var(--ease-out)}
.ft__cta span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--forest);color:var(--lime);transition:transform .25s var(--ease-out)}
@media (hover:hover){.ft__cta:hover{box-shadow:0 0 0 5px rgba(200,242,90,.16)}.ft__cta:hover span{transform:translateX(3px)}}
.ft__cta:active{transform:scale(.96)}

.ft__side{grid-column:7 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-7) var(--gutter)}
.ft__products{display:contents;list-style:none;margin:0;padding:0}
.ft__products > li{min-width:0}
.ft-prod{display:flex;flex-direction:column;height:100%;padding:8px;border-radius:24px;background:rgba(241,243,234,.04);box-shadow:inset 0 0 0 1px rgba(241,243,234,.10);color:var(--mist);text-decoration:none;transition:background-color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.ft-prod__media{display:block;aspect-ratio:16 / 10;overflow:hidden;border-radius:16px;background:radial-gradient(120% 90% at 50% 45%,#ECEAE1 0%,#E3E0D6 100%)}
.ft-prod__media img{display:block;width:100%;height:100%;object-fit:contain;padding:8%;transition:transform .6s var(--ease-out)}
.ft-prod__media--full img{object-fit:cover;padding:0}
.ft-prod__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 8px 8px 12px}
.ft-prod__text{display:grid;gap:3px;min-width:0}
.ft-prod b{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.ft-prod b i{font-style:normal;color:var(--lime)}
.ft-prod small{font-size:.875rem;line-height:1.3;color:var(--sage)}
.ft-prod__go{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(241,243,234,.18);color:var(--mist);transition:background-color .3s var(--ease-out),color .3s var(--ease-out),box-shadow .3s var(--ease-out)}
@media (hover:hover){
  .ft-prod:hover{background:rgba(241,243,234,.07);box-shadow:inset 0 0 0 1px rgba(241,243,234,.16)}
  .ft-prod:hover .ft-prod__media img{transform:scale(1.04)}
  .ft-prod:hover .ft-prod__go{background:var(--lime);color:var(--forest);box-shadow:none}
}
.ft-prod:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

.ft__group{display:flex;flex-direction:column;justify-content:flex-end;padding-inline:20px}
.ft__label{font-size:.8125rem;font-weight:500;letter-spacing:0;color:var(--sage);margin:0 0 4px}
.ft__links{display:flex;flex-wrap:wrap;gap:0 var(--s-5);list-style:none;margin:0;padding:0}
.ft__links a{display:inline-flex;align-items:center;height:44px;font-size:.9375rem;color:var(--mist);text-decoration:none;transition:color .25s var(--ease-out)}
@media (hover:hover){.ft__links a:hover{color:var(--lime)}}

.site-footer__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--s-6);padding-top:var(--s-3);border-top:1px solid var(--hairline);font-size:var(--t-small);color:var(--sage)}
.site-footer__bottom p{max-width:none}
.site-footer__bottom a{display:inline-flex;align-items:center;min-height:44px;color:var(--sage);text-decoration:none}
.site-footer__bottom a:hover{color:var(--mist)}
.site-footer__legal{display:flex;gap:var(--s-5)}

@media (max-width:1100px){
  .ft{row-gap:var(--s-7)}
  .ft__brand{grid-column:1 / -1}
  .ft__cta{margin-top:var(--s-6)}
  .ft__side{grid-column:1 / -1}
}
@media (max-width:600px){
  .ft__side{gap:var(--s-6) 12px}
  .ft-prod{padding:6px;border-radius:20px}
  .ft-prod__media{border-radius:14px}
  .ft-prod__row{padding:12px 6px 6px 8px}
  .ft-prod b{font-size:1.0625rem}
  .ft-prod small{font-size:.8125rem}
  .ft-prod__go{display:none}
  .ft__group{grid-column:1 / -1;padding-inline:0}
  .ft__group + .ft__group{margin-top:calc(-1 * var(--s-5))}
  .ft{padding-bottom:var(--s-6)}
}


/* stampa: intestazione non fissa, niente video, fondi chiari, indirizzo dei link esterni dopo il testo */
@media print{
  .site-header,.skip,.site-menu,video,.m-film,.p-band,.lb-fan{display:none!important}
  body{background:#fff!important;color:#000!important}
  .on-forest{background:#fff!important;color:#000!important}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#444}
  .mk,.s{break-inside:avoid}
}

/* selettore di lingua */

/* logo: passando sul logo le tre barre del simbolo fanno un piccolo salto in sequenza, come nella landing */
.site-header__logo{color:var(--forest);transition:color .3s}
.site-header.logo-light .site-header__logo{color:var(--mist)}
.site-header__logo .logo-svg{display:block;height:26px;width:auto;overflow:visible}
.site-header__logo .bar{transform-box:fill-box}
@keyframes bar-hop{40%{transform:translateY(-14%)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .site-header__logo:hover .bar,.site-header__logo:focus-visible .bar{animation:bar-hop .5s cubic-bezier(.3,.7,.3,1) both}
  .site-header__logo:hover .bar-2,.site-header__logo:focus-visible .bar-2{animation-delay:.12s}
  .site-header__logo:hover .bar-3,.site-header__logo:focus-visible .bar-3{animation-delay:.24s}
}
