:root{
--ink:#030303;
--paper:#FDFFFC;
--accent:#2374AB;
--male:#D7263D;
--spunta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.6 6.2 L6 10.4 L14.4 1.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E");
--mailbox:#141414;
--linea-forza:1;
--linea-op:calc(10% * var(--linea-forza));
--linea-op-chiaro:calc(18% + 12% * var(--linea-forza));
--linea:color-mix(in srgb,var(--paper) var(--linea-op),transparent);
--stella:var(--paper);
--velo:color-mix(in srgb,var(--ink) 30%,transparent);
--scudo:50%;
--velo-testo:linear-gradient(to top,
color-mix(in srgb,var(--ink) var(--scudo),transparent) 0%,
color-mix(in srgb,var(--ink) var(--scudo),transparent) 25%,
color-mix(in srgb,var(--ink) calc(var(--scudo) * 0.7),transparent) 32%,
color-mix(in srgb,var(--ink) calc(var(--scudo) * 0.4),transparent) 38%,
color-mix(in srgb,var(--ink) calc(var(--scudo) * 0.15),transparent) 42%,
transparent 45%);
--blur:30px;
--sfoca:blur(var(--blur)) saturate(1.35);
}
[data-tone="light"],.is-light,.on-paper{
--linea:color-mix(in srgb,var(--ink) var(--linea-op-chiaro),transparent);
--stella:var(--ink);
--grigio:var(--ink);
--ink-soft:color-mix(in srgb,var(--ink) 62%,transparent);
}
:root{
--deep:var(--ink);
--neutral:var(--ink);
--figure:var(--paper);
--ink-soft:color-mix(in srgb,var(--paper) 62%,transparent);
--quiet:var(--ink-soft);
--ink-mute:var(--ink-soft);
--grigio:var(--paper);
--line-faint:var(--linea);
--line-mid:var(--linea);
--line-dim:var(--linea);
--f-sans:var(--font-archivo,"Archivo"),"Segoe UI",system-ui,sans-serif;
--f-display:var(--font-instrument-serif,"Instrument Serif"),Georgia,"Times New Roman",serif;
--f-serif:var(--f-display);
--ui-wdth:125;
--v1:24px;
--v2:calc(100% - 24px);
--clear:24px;
--asse-centrale:50%;
--stella-l:11px;
--stella-h:12px;
--marchio-l:78px;
--marchio-mo-l:30px;
--sp-h:var(--menu-h);
--sp-in:22px;
--sp-gap:4px;
--sp-orlo:color-mix(in srgb,currentColor 30%,transparent);
--sp-aria:calc(var(--ui-pad-x) * .6);
--sp-ico-griglia:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='1' width='6' height='6'/%3E%3Crect x='9' y='1' width='6' height='6'/%3E%3Crect x='1' y='9' width='6' height='6'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3C/svg%3E");
--sp-ico-lista:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='3' height='3'/%3E%3Crect x='6' y='3' width='9' height='1.6'/%3E%3Crect x='1' y='6.5' width='3' height='3'/%3E%3Crect x='6' y='7.5' width='9' height='1.6'/%3E%3Crect x='1' y='11' width='3' height='3'/%3E%3Crect x='6' y='12' width='9' height='1.6'/%3E%3C/svg%3E");
--sp-quad:var(--menu-h);
--sp-pad:var(--ui-pad-x);
--sp-t:var(--t-menu);
--sp-wdth:125%;
--sp-peso:700;
--g4-a:29.53%;
--g4-b:50%;
--g4-c:70.45%;
--gab-est:30%;
--gab-int:20%;
--apri-lead:var(--gab-est);
--sp-cursore:url('data:image/svg+xml;utf8,');
--sp-freccia:url('data:image/svg+xml;utf8,');
--sp-freccia-giu:url('data:image/svg+xml;utf8,');
--fondo-chrome:transparent;
--u:4px;
--s-0:4px; --s-1:4px; --s-2:12px; --s-3:12px;
--s-4:24px; --s-5:24px; --s-6:24px; --s-7:24px;
--s-8:72px; --s-9:72px; --s-10:72px; --s-11:72px;
--s-12:224px; --s-13:224px;
--filo:12px;
--dito:44px;
--riga-premi:48px;
--schermo-80:80svh;
--schermo-100:100svh;
--schermo-110:110svh;
--r:0px;
--r-box:0px;
--ui-h:32px;
--ui-pad-y:8px;
--ui-pad-x:18px;
--menu-h:calc(var(--t-menu) * var(--lh-menu) + var(--ui-pad-y) * 2 + 2px);
--burger-stroke:1.9px;
--pad:48px;
--head-h:66px;
--head-h-c:56px;
--hh:var(--head-h);
--t-display:38px; --lh-display:.92; --tr-display:-.03em;
--t-h1:27px; --lh-h1:1; --tr-h1:-.03em;
--t-h2:26px; --lh-h2:1.1; --tr-h2:-.02em;
--t-h3:15px; --lh-h3:1.2; --tr-h3:-.01em;
--t-menu:12px; --lh-menu:1; --tr-menu:.06em;
--t-para:15px; --lh-para:1.5; --tr-para:-.01em;
--t-para-md:var(--t-para); --lh-para-md:1.45;
--t-ui:13px;
--t-apri:clamp(38px,5.3vw,71px);
--ser-size:1.2em;
--ser-track:.005em;
--e-band:var(--e-out);
--e-out:cubic-bezier(.16,1,.3,1);
--e-osmo:linear(0,.0065,.0185,.0388,.0715,.1263,.2301,.4656,.6734,.7767,.8406,.8852,.9176,.9419,.9604,.9742,.9844,.9916,.9964,.9991,1);
--ez:var(--e-osmo);
--t-linea:700ms;
--t-muore:300ms;
--t-sposta:560ms;
--t-nasce:440ms;
--passo:34ms;
--e-fuori:var(--e-out);
--e-morbida:var(--e-out);
--d-sposta:140ms;
--d-nasce:420ms;
--t-band:340ms;
--t-mega:420ms;
--t-entra:520ms;
--t-mask:900ms;
--t-su:720ms;
--t-title:var(--t-mask);
--t-stg:var(--t-su);
--stg-step:55ms;
--mk-step:60ms;
--t-quick:220ms;
--amark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 755.46 771.56'%3E%3Cpath fill='%23000' d='M675.76,771.36c-20.29,0-40.57,0-60.86,0-15.56,0-20.47-2.92-26.2-17.58-11.48-29.37-22.58-58.88-33.78-88.35-53.53-140.9-107.05-281.8-160.55-422.71-3.08-8.11-6.01-16.28-8.87-24.47-1.45-4.16-2.55-8.9-8-8.87-5.08.03-6.1,4.8-7.49,8.49-18.06,47.92-35.91,95.91-54.07,143.8-48.93,129.03-97.98,258.01-146.99,387-1.03,2.7-2.03,5.43-3.3,8.02-4.68,9.56-11.34,15.02-23.07,14.86-42.01-.54-84.04-.26-126.06-.35-15.78-.03-19.27-4.75-14.6-19.79,21.78-70.15,44.59-139.97,69.16-209.2,56.21-158.41,116.21-315.42,175.88-472.54,6.16-16.23,12.23-32.49,18.43-48.71C271.62,4.66,278.6-.35,296.24.02c52.45,1.11,104.89,1.3,157.34.04,24.7-.59,29.21,2.45,38,25.52,66.3,174.1,133.02,348.05,195.24,523.67,23.48,66.27,45.1,133.15,66.16,200.21.61,1.93,1.22,3.86,1.7,5.82,2.57,10.47-1.1,15.69-11.98,15.81-22.31.25-44.63.08-66.94.08v.18Z'/%3E%3C/svg%3E");
--spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='122 178 97 116'%3E%3Cpath fill='%23000' d='M170.6,178.91c1.92,10.38,3.81,20.59,8.45,30.13,7.27,14.98,19.24,23.42,35.44,26.25,1.29.23,2.57.47,3.89.94-4.25.96-8.52,1.65-12.62,3.09-16.71,5.87-25.94,18.37-30.82,34.7-1.93,6.45-3.19,13.06-4.28,19.74-1.18-6.45-2.35-12.87-4.16-19.15-6.25-21.66-19.84-35.03-42.75-37.91-.34-.04-.66-.2-1.43-.46,3.77-.8,7.16-1.32,10.42-2.25,18.15-5.19,28.32-18.02,33.57-35.42,1.94-6.44,3.17-13.06,4.31-19.66Z'/%3E%3C/svg%3E");
}@media (min-width:768px){
:root{
--t-display:76px; --t-h1:44px; --t-h2:26px;
--t-h3:16px; --t-menu:12px; --t-ui:13px;
--t-para:16px; --t-para-md:var(--t-para);
}
}@media (min-width:1440px){
:root{
--t-display:140px; --t-h1:62px; --t-h2:35px;
--t-h3:17px; --t-menu:12px; --t-ui:13px;
--t-para:17px; --t-para-md:var(--t-para);
}
}
*,*::before,*::after{box-sizing:border-box}
i:empty{font-style:normal}
html{
-webkit-text-size-adjust:100%;
scroll-padding-top:calc(var(--head-h) + 16px);
}
body{
margin:0;
background:var(--ink);
color:var(--paper);
font-family:var(--f-sans);
font-variation-settings:"wdth" 100;
font-weight:400;
font-size:var(--t-para);
line-height:var(--lh-para);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;border:0}
picture,figure,iframe,.mega__shot,.mega__cthumb,.mega__media,.peek__in{border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,li,figure{margin:0;padding:0}
ul{list-style:none}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
position:fixed;left:var(--clear);top:0;z-index:70;
transform:translateY(-140%);
display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
background:var(--paper);color:var(--ink);
font-family:var(--f-sans);font-variation-settings:"wdth" var(--ui-wdth);font-stretch:125%;
font-size:var(--t-ui);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
transition:transform 220ms var(--e-out);
}
.skip:focus-visible{transform:translateY(12px)}
.san{font-family:var(--f-sans);font-weight:800;font-variation-settings:"wdth" 100;font-stretch:100%;letter-spacing:-.012em}
.ser{
font-family:var(--f-display);font-weight:400;font-style:normal;font-synthesis:none;
font-variation-settings:normal;font-stretch:100%;
font-size:var(--ser-size);letter-spacing:var(--ser-track);
}
.ser-i{
font-family:var(--f-display);font-weight:400;font-style:italic;
font-variation-settings:normal;
font-size:var(--ser-size);letter-spacing:var(--ser-track);
}
.exp,.esp{
font-family:var(--f-display);font-weight:400;font-variation-settings:normal;
font-stretch:100%;font-size:var(--ser-size);letter-spacing:var(--ser-track);
}
h1,.h1{
font-size:var(--t-h1);line-height:var(--lh-h1);letter-spacing:var(--tr-h1);
font-weight:800;
}
h2,.h2{
font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);
font-weight:800;
}
body h2:not([data-maiuscolo]),
body .h2:not([data-maiuscolo]),
body .t-h2:not([data-maiuscolo]){text-transform:none}
h3,.h3{
font-family:var(--f-sans);
font-variation-settings:"wdth" var(--ui-wdth);font-stretch:125%;
font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);
font-weight:600;
}
.srv__h .ser,.srv__h .ser-i{
font-family:var(--f-sans);font-style:normal;
font-variation-settings:inherit;font-stretch:inherit;
font-size:inherit;letter-spacing:inherit;font-weight:inherit;
}
.p-lg{font-family:var(--f-sans);font-weight:400;font-variation-settings:"wdth" 100;
font-size:var(--t-para);line-height:var(--lh-para)}
.p-md{font-family:var(--f-sans);font-weight:400;font-variation-settings:"wdth" 100;
font-size:var(--t-para);line-height:var(--lh-para)}
.ui-type{
font-family:var(--f-sans);
font-variation-settings:"wdth" var(--ui-wdth);
font-stretch:125%;
font-size:var(--t-ui);font-weight:700;line-height:1;
letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
body .eyebrow{display:none}
.wrap,.wrap-i,.wrap-w{width:100%;padding-inline:var(--clear)}
.dal-filo{padding-left:12px}
.dal-filo-dx{padding-right:12px}
.al-filo{padding-left:0;padding-right:0}
.schermo-80,.schermo-100,.schermo-110{display:grid;align-content:center}
.schermo-80{min-height:var(--schermo-80)}
.schermo-100{min-height:var(--schermo-100)}
.schermo-110{min-height:var(--schermo-110)}
.t-h2{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2)}
.foot__h{text-transform:none}
.rule{position:relative;height:1px;width:100%;background:var(--linea)}
.rule--hero,.rule--faint,.rule--strong,.rule--dim{height:1px;background:var(--linea)}
.rule{--star-x:var(--clear)}
.wrap>.rule,.wrap-i>.rule,.wrap-w>.rule{--star-x:0%}
.rule{isolation:isolate}
.rule::before{
content:"";position:absolute;top:50%;left:var(--star-x);z-index:-1;
width:var(--stella-l);height:var(--stella-h);
background-color:var(--stella);
-webkit-mask:var(--spark) center/contain no-repeat;
mask:var(--spark) center/contain no-repeat;
transform:translate(-50%,-50%) scale(.2);
opacity:0;
transition:opacity 320ms var(--e-osmo),transform 520ms var(--e-osmo);
}
.rule.has-stella::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.gridl{position:fixed;inset:0;z-index:0;pointer-events:none;display:block}
/* 8 settembre 2026: tolto il secondo impianto di righe verticali
(.gridl__in, .gridl__v, .gridl--over, .gridl__e). Nessun markup lo
costruiva: le righe vive sono .gridl--auto qui sotto, con .gridl__edge,
.gridl__g e .gridl__rail. Il fotogramma grid-safe resta perche' lo usa
.gridl__edge. */
@keyframes grid-safe{to{transform:scaleY(1)}}
.gridl--auto{z-index:0;
--tr-linea:var(--linea);
--tr-bordo:var(--linea);
--tr-rail:var(--linea);
}
.gridl__edge,.gridl__g,.gridl__rail{
position:fixed;top:0;bottom:0;width:1px;
transform:scaleY(0);transform-origin:50% 0;
}
.gridl__edge{background:var(--tr-bordo);transition:background var(--t-linea) var(--e-osmo),opacity var(--t-linea) var(--e-osmo)}
.gridl--auto.gridl--no-edges .gridl__edge{opacity:0}
.gridl__g{background:var(--tr-linea);opacity:0;translate:0px;
will-change:transform,translate,opacity;
transition:transform var(--t-linea) var(--e-osmo) var(--dr,0ms),
opacity var(--t-nasce) var(--e-fuori) var(--dr,0ms),
filter var(--t-nasce) var(--e-fuori) var(--dr,0ms),
background var(--t-linea) var(--e-osmo)}
.gridl__g{transform-origin:50% 0}
.gridl__g.is-muove{
opacity:1;filter:none;
transition:translate var(--tm,var(--t-sposta)) var(--e-morbida) calc(var(--d-sposta) + var(--dr,0ms)),
transform var(--tm,var(--t-sposta)) var(--e-morbida) calc(var(--d-sposta) + var(--dr,0ms)),
opacity var(--tm,var(--t-sposta)) var(--e-morbida) calc(var(--d-sposta) + var(--dr,0ms)),
filter 200ms linear,
background var(--t-linea) var(--e-osmo);
}
.gridl__g.is-entra{
filter:none;
transition:translate var(--t-nasce) var(--e-fuori) calc(var(--d-nasce) + var(--dr,0ms)),
transform var(--t-nasce) var(--e-fuori) calc(var(--d-nasce) + var(--dr,0ms)),
opacity var(--t-nasce) var(--e-fuori) calc(var(--d-nasce) + var(--dr,0ms)),
filter var(--t-nasce) var(--e-fuori) calc(var(--d-nasce) + var(--dr,0ms));
}
.gridl__g.is-esce{
transform:scaleY(0);opacity:0;filter:blur(1px);
transition:transform var(--t-muore) var(--e-fuori) var(--dr,0ms),
opacity var(--t-muore) var(--e-fuori) var(--dr,0ms),
filter var(--t-muore) var(--e-fuori) var(--dr,0ms);
}
.gridl__g.is-esce-vicina{
transform:none;
transition:translate 380ms var(--e-morbida) var(--dr,0ms),
opacity 380ms var(--e-morbida) var(--dr,0ms),
filter 380ms var(--e-morbida) var(--dr,0ms);
}
.gridl__g.is-dal-basso{transform-origin:50% 100%}
.gridl__g.is-salta,.gridl__rail.is-salta{transition:none !important}
.gridl__rail{width:1px;background:var(--tr-rail);opacity:0;translate:0px;
will-change:transform,translate,opacity;
transition:transform var(--t-linea) var(--e-osmo) var(--dr,0ms),
opacity var(--t-nasce) var(--e-fuori) var(--dr,0ms),
translate var(--t-sposta) var(--e-morbida) var(--d-sposta),
background var(--t-linea) var(--e-osmo)}
html.is-drawn .gridl__edge{transform:scaleY(1);transition:transform var(--t-linea) var(--e-osmo) var(--d,0ms)}
html.is-drawn .gridl__g.is-on,
html.is-drawn .gridl__rail.is-on{transform:scaleY(1);opacity:1}
html:not(.is-drawn) .gridl__edge{animation:grid-safe 1ms linear 3s forwards}
.gridl__edge:nth-child(2){--d:0ms}@media (max-width:1080px){
.gridl__g,.gridl__rail{display:none}
}
.tp{
display:inline;
padding:.10em .14em;
background-image:linear-gradient(var(--paper),var(--paper));
background-repeat:no-repeat;
background-position:left center;
background-size:0% 100%;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
transition:background-size var(--t-band) var(--e-band),color var(--t-band) var(--e-band);
}
a:focus-visible>.tp{color:var(--ink);background-size:100% 100%}@media(hover:hover){
a:hover>.tp{color:var(--ink);background-size:100% 100%}
}
.band{
position:relative;z-index:0;
transition:color var(--t-band) var(--e-band);
}
.band::after{
content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);
transform:scaleX(0);transform-origin:left center;
transition:transform var(--t-band) var(--e-band);
}
.band:focus-visible{color:var(--ink)}
.band:focus-visible::after{transform:scaleX(1)}@media(hover:hover){
.band:hover{color:var(--ink)}
.band:hover::after{transform:scaleX(1)}
}
.band-host:focus-visible .band{color:var(--ink)}
.band-host:focus-visible .band::after{transform:scaleX(1)}@media(hover:hover){
.band-host:hover .band{color:var(--ink)}
.band-host:hover .band::after{transform:scaleX(1)}
}
.aw+.aw{border-top:1px solid var(--line-dim)}
.aw__row{
position:relative;z-index:0;
display:flex;align-items:center;justify-content:space-between;gap:24px;
min-height:var(--riga-premi);padding:0 8px;margin:0 -8px;
font-size:var(--t-para);
transition:color var(--t-band) var(--e-band);
}
.aw__row::after{
content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);
transform:scaleX(0);transform-origin:left center;
transition:transform var(--t-band) var(--e-band);
}
.aw__row:focus-visible{color:var(--ink)}
.aw__row:focus-visible::after{transform:scaleX(1)}@media(hover:hover){
.aw__row:hover{color:var(--ink)}
.aw__row:hover::after{transform:scaleX(1)}
}
.mega__cl,.mega__case,.foot__list li a{
position:relative;z-index:0;
transition:color var(--t-band) var(--e-band);
}
.foot__list li{display:flex}
.foot__list li a{padding:0 8px;margin:0 -8px}
.mega__cl::after,.mega__case::after,.foot__list li a::after{
content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);
transform:scaleX(0);transform-origin:left center;
transition:transform var(--t-band) var(--e-band);
}
/* Il rettangolo bianco della voce sporge a sinistra, come faceva prima che i
puntini rientrassero nella colonna: e' lui che "viene fuori" al passaggio, ed
e' l'effetto che deve restare. Tirando dentro il puntino avevo tirato dentro
anche lui, perche' erano la stessa misura. Adesso sono due cose separate: il
puntino e il testo stanno dentro la colonna, la banda no. */
.mega__cl::after{left:-14px}
.mega__cl .tp,.mega__case .tp,.foot__list li a .tp{
background-image:linear-gradient(var(--line-dim),var(--line-dim));
background-repeat:no-repeat;background-position:left bottom;background-size:100% 1px;
padding:0;margin:0;
}
/* Il rettangolo bianco e il testo che si rovescia in nero DEVONO stare sotto
la stessa condizione, sempre. Qui il rettangolo era chiuso dentro
@media(hover:hover) mentre il colore no: su uno schermo che si tocca, dove
quella media query non vale ma il puntatore del mouse c'e' lo stesso, il
testo diventava nero e il rettangolo NON usciva. Cioe' la voce spariva sul
fondo scuro. E' lo schermo di Miki, ed e' cosi' che l'ha visto. */
.mega__cl:focus-visible::after,.mega__case:focus-visible::after,.foot__list li a:focus-visible::after,
.mega__cl:hover::after,.mega__case:hover::after,.foot__list li a:hover::after{transform:scaleX(1)}
.mega__cl:hover,.mega__case:hover,.foot__list li a:hover,
.mega__cl:focus-visible,.mega__case:focus-visible,.foot__list li a:focus-visible{color:var(--ink)}
.mega__cl::before{
content:"";position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;
border-radius:50%;background:var(--accent);opacity:.8;
transition:opacity var(--t-band) var(--e-band);
}
.mega__cl:hover::before,.mega__cl:focus-visible::before{opacity:1}
@property --ring{syntax:"";inherits:false;initial-value:0%}
.mono-a{
display:block;flex:none;background-color:currentColor;
-webkit-mask:var(--amark) center/contain no-repeat;
mask:var(--amark) center/contain no-repeat;
transition:transform 220ms var(--e-out);
}
.mono-w:hover .mono-a,.mono-w:focus-visible .mono-a{transform:rotate(90deg) scale(1.06)}
.slz__arr.slz__arr.slz__arr{
--frx:32px;
--frx-anello:3px;
--frx-glifo:44%;
position:relative;z-index:0;overflow:visible;
display:inline-grid;place-items:center;
width:var(--frx);height:var(--frx);
border:0;border-radius:0;
background:var(--paper);
color:var(--ink);
cursor:pointer;
transition:background var(--t-band) var(--e-band);
}
.slz__arr.slz__arr.slz__arr::before{
content:"";position:absolute;inset:var(--frx-anello);z-index:0;
border-radius:0;background:var(--ink);
transition:background var(--t-band) var(--e-band);
}
.slz__arr.slz__arr.slz__arr::after{
content:"";position:relative;inset:auto;z-index:1;
width:var(--frx-glifo);height:var(--frx-glifo);
background-color:var(--paper);
-webkit-mask:var(--amark) center/contain no-repeat;
mask:var(--amark) center/contain no-repeat;
transform:rotate(90deg);
transition:background-color var(--t-band) var(--e-band);
}
.slz__arr--prev.slz__arr--prev.slz__arr--prev::after{transform:rotate(-90deg)}
.slz__arr--next.slz__arr--next.slz__arr--next::after{transform:rotate(90deg)}
.slz__arr.slz__arr:hover::before,.slz__arr.slz__arr:focus-visible::before{background:var(--paper)}
.slz__arr.slz__arr:hover::after,.slz__arr.slz__arr:focus-visible::after{background-color:var(--ink)}
.slz__arr[disabled]{opacity:.3;cursor:default}@media (pointer:coarse){
.slz__arr.slz__arr.slz__arr{--frx:var(--dito)}
}@media (max-width:767px){
.slz__arr.slz__arr.slz__arr{--frx:var(--dito)}
}
.slz__arr.slz__arr.slz__arr svg{display:none}
.head{
position:fixed;inset:0 0 auto 0;z-index:60;
height:var(--hh);
display:flex;align-items:center;
color:var(--paper);
transition:height var(--t-mega) var(--e-out),color var(--t-band) var(--e-out);
}
.head.is-stuck{--hh:var(--head-h-c)}
html:has(.head.is-stuck){--hh:var(--head-h-c)}
.head::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
opacity:1;
transition:opacity var(--t-mega) var(--e-out);
}
.velo{
position:fixed;top:0;left:0;right:0;z-index:59;
height:var(--velo-h,var(--hh));
background:var(--fondo-chrome);
-webkit-backdrop-filter:var(--sfoca);backdrop-filter:var(--sfoca);
pointer-events:none;
transition:height var(--t-mega) var(--e-out),background var(--t-band) var(--e-out),opacity var(--t-entra) var(--e-osmo);
}
.head:hover::before,.head:focus-within::before,.head.is-open::before,.head.is-stuck::before{opacity:1}
.head.is-light{color:var(--ink)}
.head.is-light .brand,.head.is-light .burger{color:var(--ink)}
.head.is-light .menu a:focus-visible{border-color:var(--ink)}
.head.is-light .menu__lamp{background:color-mix(in srgb,var(--ink) 8%,transparent);border-color:var(--ink)}
.head__in{
position:relative;
display:grid;
grid-template-columns:1fr auto 1fr;
grid-template-areas:"marchio menu azioni";
align-items:center;
gap:var(--s-3);
}
.head__in > .brand{grid-area:marchio;justify-self:start}
.head__in > .head__nav--r{grid-area:menu;justify-self:center;transition:opacity 220ms var(--e-out)}
.head__in > .cta{grid-area:azioni;justify-self:end}
.head__in > .burger{grid-area:panino;justify-self:end;margin-inline-start:var(--s-3)}
.head.is-compact .head__in{
grid-template-columns:1fr auto auto auto;
grid-template-areas:"marchio menu azioni panino";
}
.brand{position:relative;display:flex;align-items:center;min-height:44px;color:inherit}
.brand svg{display:block}
.brand .brand__lock{width:var(--marchio-l);height:auto}
.brand .brand__mono{width:var(--marchio-mo-l);height:auto}
.brand__lock{opacity:1;transform:scale(1);transition:opacity var(--t-mega) var(--e-out),transform var(--t-mega) var(--e-out)}
.brand__mono{
position:absolute;left:0;top:50%;width:30px;height:auto;
transform:translateY(-50%) scale(.82);opacity:.01;visibility:hidden;pointer-events:none;
transition:opacity var(--t-mega) var(--e-out),transform var(--t-mega) var(--e-out),visibility 0s linear var(--t-mega);
}
.head.is-stuck .brand__lock{opacity:.01;transform:scale(.9);pointer-events:none}
.head.is-stuck .brand__mono{
opacity:1;visibility:visible;transform:translateY(-50%) scale(1);pointer-events:auto;
transition:opacity var(--t-mega) var(--e-out),transform var(--t-mega) var(--e-out),visibility 0s;
}
.brand__star{transform-box:fill-box;transform-origin:center}
.brand:hover .brand__star,.brand:focus-visible .brand__star{animation:brand-twinkle 720ms linear}
@keyframes brand-twinkle{
0%{transform:rotate(0deg) scale(1)}
25%{transform:rotate(90deg) scale(1.22)}
50%{transform:rotate(180deg) scale(0.96)}
75%{transform:rotate(270deg) scale(1.1)}
100%{transform:rotate(360deg) scale(1)}
}
.head.is-stuck .brand__mono .brand__star{animation:brand-twinkle 720ms linear}
.menu{position:relative;display:flex;align-items:center;gap:clamp(15px,calc((100vw - 48px) / 60),28px)}
.menu__it{position:relative;z-index:1}
.navpanel a,.menu a{
position:relative;display:inline-flex;align-items:center;justify-content:center;
min-height:0;padding:var(--ui-pad-y) var(--ui-pad-x);
border-radius:0;border:1.5px solid transparent;
font-family:var(--f-sans);
font-variation-settings:"wdth" var(--ui-wdth);font-stretch:125%;
font-size:var(--t-menu);font-weight:400;line-height:var(--lh-menu);letter-spacing:var(--tr-menu);
text-transform:uppercase;white-space:nowrap;
transition:border-color 180ms var(--e-out);
}
.menu a>span{position:relative;display:inline-block}
.menu a::before{
content:"";position:absolute;
left:calc(var(--ui-h) / 2);right:calc(var(--ui-h) / 2);top:-1.5px;height:1.6px;
border-radius:0;background:var(--accent);
opacity:0;transition:opacity 180ms var(--e-out);
}
.menu a:focus-visible{border-color:currentColor}
.menu a:focus-visible::before{opacity:1}
.menu a[aria-current="page"],.navpanel a[aria-current="page"]{border-color:currentColor}
.menu a[aria-current="page"]::before{opacity:1}
.menu.is-lamp a[aria-current="page"]{border-color:transparent}
.menu.is-lamp a[aria-current="page"]::before{opacity:0}
.menu.is-lamp a:focus-visible{border-color:currentColor}
.menu.is-lamp a:focus-visible::before{opacity:1}
.menu__lamp{
position:absolute;top:50%;left:0;z-index:2;box-sizing:border-box;
mix-blend-mode:difference;
width:100px;height:var(--menu-h);
--lx:0px;--lk:1;
transform:translate3d(var(--lx),-50%,0) scaleX(var(--lk));
transform-origin:0 50%;
border-radius:0;
background:var(--paper);
opacity:0;pointer-events:none;will-change:transform,opacity;
transition:
transform var(--t-mega) var(--e-out),
opacity 180ms var(--e-out);
}@media (prefers-reduced-motion:reduce){
.menu__lamp{transition:opacity 180ms var(--e-out)}
}
.menu__lamp.is-on{opacity:1}
.menu.is-lamp .menu__it.is-lit a,
.menu.is-lamp .menu__it:hover a{color:var(--paper)}
.menu a{transition:color var(--t-band) var(--e-band),border-color 180ms var(--e-out)}
.cta{display:grid;place-items:center;min-height:var(--ui-h)}
.head.is-compact .cta{margin-left:auto}
.burger{
display:none;width:var(--ui-h);height:var(--ui-h);place-items:center;
border:0;border-radius:0;background:none;color:inherit;
}
.burger i{
display:block;position:relative;width:18px;height:var(--burger-stroke);
background:currentColor;border-radius:2px;
transition:background 260ms var(--e-out);
}
.burger i::before,.burger i::after{
content:"";position:absolute;height:var(--burger-stroke);background:currentColor;border-radius:2px;
transition:transform 260ms var(--e-out),width 260ms var(--e-out);
}
.burger i::before{top:-6px;left:0;width:18px}
.burger i::after{top:6px;right:0;width:11px}
.burger:hover i::after,.burger:focus-visible i::after{width:18px}
.head.is-nav .burger i{background:transparent}
.head.is-nav .burger i::before{transform:translateY(6px) rotate(45deg)}
.head.is-nav .burger i::after{width:18px;transform:translateY(-6px) rotate(-45deg)}
.navpanel{
position:absolute;top:100%;left:0;right:0;z-index:2;
display:none;flex-direction:column;gap:var(--s-2);
padding:var(--s-4) var(--clear) var(--s-5);
background:color-mix(in srgb,var(--ink) 94%,transparent);
-webkit-backdrop-filter:var(--sfoca);backdrop-filter:var(--sfoca);
border-bottom:1px solid var(--linea);
color:var(--paper);
}
.head.is-nav .navpanel{display:flex}
.head.is-compact .head__nav--r{display:none}
.head.is-compact .burger{display:grid}
.head.is-compact ~ .mega{display:none}
.head.is-compact .head__scrim{display:none}
.head.is-stuck .menu a::before{left:16px;right:16px}
.head__scrim{
position:fixed;inset:var(--hh) 0 0 0;z-index:-2;
background:color-mix(in srgb,var(--deep) 34%,transparent);
opacity:.01;visibility:hidden;pointer-events:none;
transition:opacity var(--t-mega) var(--e-out),visibility 0s linear var(--t-mega);
}
.head.is-open .head__scrim{
opacity:1;visibility:visible;
transition:opacity var(--t-mega) var(--e-out),visibility 0s;
}@media (max-width:1240px){
.menu{gap:12px}
.menu a{padding-inline:12px;letter-spacing:.02em}
}@media (max-width:560px){
.head .cta{display:none}
}@media (max-width:1080px){
:root{--pad:32px;--head-h:66px;--head-h-c:52px}
.menu{display:none}
.cta{margin-left:auto}
.mega,.head__scrim{display:none}
.burger{display:grid}
.head__in{
grid-template-columns:1fr auto auto auto;
grid-template-areas:"marchio menu azioni panino";
}
}
.mega{
position:fixed;top:var(--hh);left:0;right:0;z-index:61;
border-top:1px solid var(--line-dim);border-bottom:1px solid var(--line-dim);
box-shadow:0 30px 60px -28px rgba(0,0,0,.7);
opacity:.01;visibility:hidden;transform:translateY(-10px);pointer-events:none;
transition:opacity var(--t-mega) var(--e-out),transform var(--t-mega) var(--e-out),visibility 0s linear var(--t-mega);
}
.mega[hidden]{display:none}
.mega.is-open{
opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
transition:opacity var(--t-mega) var(--e-out),transform var(--t-mega) var(--e-out),visibility 0s;
}
.mega__in{padding:28px var(--clear) 34px}
.mega__head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.mega__head--sub{margin-top:24px;padding-top:16px;border-top:1px solid var(--line-faint);margin-bottom:12px}
.mega__eye{font-size:var(--t-ui);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
.mega__all{
margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;
font-size:var(--t-ui);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
font-variation-settings:"wdth" var(--ui-wdth);font-stretch:125%;
color:var(--accent);
}
.mega__all svg{width:13px;height:12px;flex:none}
.mega__nav{display:flex;gap:8px}
.mega__slider{
overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
scrollbar-width:thin;scrollbar-color:var(--line-dim) transparent;padding-bottom:8px;
}
.mega__slider::-webkit-scrollbar{height:4px}
.mega__slider::-webkit-scrollbar-track{background:transparent}
.mega__slider::-webkit-scrollbar-thumb{background:var(--line-dim);border-radius:0}
.mega__track{display:flex;gap:24px;width:max-content}
.mega__slide{flex:0 0 auto;width:clamp(220px,24vw,300px);scroll-snap-align:start;display:flex;flex-direction:column;gap:3px}
.mega__st{font-size:var(--t-h3);font-weight:600;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega__slide:focus-within .mega__st .tp{color:var(--ink)}
.mega__slide:focus-within .mega__st .tp{background-size:100% 100%}@media(hover:hover){
.mega__slide:hover .mega__st .tp{color:var(--ink)}
.mega__slide:hover .mega__st .tp{background-size:100% 100%}
}
.mega__shot{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:0;background:var(--ink)}
.mega__shot img{width:100%;height:100%;object-fit:cover}
.mega__cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mega__case{display:flex;align-items:center;gap:12px;padding:8px 8px;min-height:44px}
.mega__cthumb{flex:0 0 96px;aspect-ratio:16/9;overflow:hidden;border-radius:0;background:var(--ink)}
.mega__cthumb img{width:100%;height:100%;object-fit:cover}
.mega__clines{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega__clines .tp{align-self:flex-start;max-width:100%;font-size:var(--t-para);font-weight:400;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega__cases--pochi{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mega__cases--pochi .mega__case{flex-direction:column;align-items:stretch;gap:6px;padding:0}
.mega__cases--pochi .mega__cthumb{flex:none;width:100%}
.mega__cases--pochi .mega__clines .tp{max-width:none;white-space:normal;font-size:var(--t-para-md);line-height:1.2}
.mega__cases--pochi .mega__piu{display:grid;align-items:center}
.mega__cases--pochi .mega__piu .mega__case{height:100%;align-items:center;justify-content:center}
.mega__cta{margin-left:auto}
.mega__cols{display:grid;grid-template-columns:1fr 1fr 1fr minmax(240px,20%);gap:24px;align-items:start}
.mega__cols--two{grid-template-columns:1fr 1fr minmax(240px,20%)}
.mega__col{display:flex;flex-direction:column;gap:var(--s-0)}
.mega__cl{display:flex;flex-direction:row;align-items:center;gap:10px;padding:8px 8px 8px 14px;min-height:44px;justify-content:flex-start}
.mega__cl .tp{align-self:center;font-size:var(--t-para);font-weight:400;line-height:1.15}
.mega__media{align-self:center;display:block;aspect-ratio:16/10;border-radius:0;overflow:hidden;background:var(--ink)}
.mega__media img{width:100%;height:100%;object-fit:cover}
.mega .m-in{opacity:.01;transform:translateY(12px);transition:opacity var(--t-mega) var(--e-out),transform var(--t-mega) var(--e-out)}
.mega.is-open .m-in{opacity:1;transform:none;transition-delay:var(--md,0ms)}
.slz{position:relative}
.slz__view{overflow:hidden}
.slz--peek .slz__view{overflow:visible}
.slz--fermo .slz__track>*{pointer-events:none}
.slz--fermo [data-slz-prev],.slz--fermo [data-slz-next]{pointer-events:auto}
.slz--alto .slz__track{align-items:flex-start}
.slz--centrato .slz__track{align-items:center}
.slz__track{
display:flex;gap:var(--slz-gap,16px);
transform:translate3d(var(--slz-x,0px),0,0);
transition:transform 620ms var(--e-band);
will-change:transform;
touch-action:pan-y;
}
.slz.is-drag .slz__track{transition:none;cursor:grabbing}
.slz__track>*{flex:0 0 auto;user-select:none}
.slz__track img{pointer-events:none}@media (prefers-reduced-motion: reduce){
.slz__track{transition:none}
}
.moviola{--asse:44.3%}
.moviola[data-asse="centro"]{--asse:50%}
.moviola__track{position:relative}
.moviola.is-viva .moviola__track{height:calc(var(--passi) * var(--corsa-scheda,56svh))}
.moviola__stage{position:relative;overflow:hidden;isolation:isolate}
.moviola.is-viva .moviola__stage{position:sticky;top:0;height:100svh}
.moviola__bgs{position:absolute;inset:0;z-index:0}
.moviola__bg{position:absolute;inset:0;opacity:0;transition:opacity 900ms linear}
.moviola__bg.is-on{opacity:1}
.moviola__bg video{width:100%;height:100%;object-fit:cover}
.moviola__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--velo)}
.moviola__in{
position:relative;z-index:2;height:100%;
display:flex;flex-direction:column;
padding-top:var(--head-h);padding-bottom:var(--s-6);
}
.moviola__h{margin-bottom:var(--filo)}
.moviola__in>.rule{flex:none}
.moviola__cols{
position:relative;flex:1;min-height:0;margin-top:var(--s-5);
display:grid;grid-template-columns:var(--asse) minmax(0,1fr);
}
.moviola__rail{position:absolute;left:var(--asse);top:0;bottom:0;width:1px;background:var(--linea)}
.moviola__plate{position:relative;overflow:hidden}
.moviola.is-viva .moviola__strip{
position:absolute;left:0;right:0;top:0;
padding-block:var(--pad,0px);
will-change:transform;
}
.moviola__strip{display:flex;flex-direction:column;gap:var(--s-6)}
.moviola__slot{position:relative}
.moviola__card{position:relative;width:76.5%;aspect-ratio:457/526;overflow:hidden;background:var(--ink)}
.moviola__card :is(video,img){width:100%;height:100%;object-fit:cover;display:block}
.moviola__ticks{
position:absolute;right:0;top:0;bottom:0;width:var(--s-4);
background-image:
repeating-linear-gradient(to bottom,var(--linea) 0 1px,transparent 1px var(--s-5)),
repeating-linear-gradient(to bottom,var(--linea) 0 1px,transparent 1px var(--s-11));
background-size:var(--s-2) 100%,var(--s-4) 100%;
background-position:right top;
background-repeat:repeat-y;
}
.moviola__testina{position:absolute;right:0;top:50%;width:var(--s-4);height:1px;background:var(--paper)}
.moviola__read{display:grid;align-content:center;padding-inline-start:var(--filo)}
.moviola__i{
grid-area:1 / 1;
opacity:.01;visibility:hidden;
transition:opacity 450ms linear,visibility 0s linear 450ms;
}
.moviola__i.is-on{opacity:1;visibility:visible;transition:opacity 450ms linear,visibility 0s}
.moviola__no{margin-bottom:var(--s-3)}
.moviola__st{font-size:var(--t-h3);line-height:var(--lh-h3);text-transform:uppercase}
.moviola__p{margin-top:var(--s-3);font-size:var(--t-para);line-height:var(--lh-para);max-width:44ch}
.moviola[data-clic="si"] .moviola__go{margin-top:var(--s-5)}
.moviola:not(.is-viva) :is(.moviola__plate,.moviola__strip,.moviola__read){display:contents}
.moviola:not(.is-viva) .moviola__in{padding-top:var(--s-9)}
.moviola:not(.is-viva) .moviola__cols{row-gap:var(--s-9);align-items:center}
.moviola:not(.is-viva) :is(.moviola__bgs,.moviola__veil,.moviola__rail,.moviola__ticks,.moviola__testina){display:none}
.moviola:not(.is-viva) .moviola__slot{grid-column:1}
.moviola:not(.is-viva) .moviola__i{grid-column:2;opacity:1;visibility:visible;padding-inline-start:var(--filo)}
.moviola:not(.is-viva) :is(.moviola__slot,.moviola__i):nth-child(1){grid-row:1}
.moviola:not(.is-viva) :is(.moviola__slot,.moviola__i):nth-child(2){grid-row:2}
.moviola:not(.is-viva) :is(.moviola__slot,.moviola__i):nth-child(3){grid-row:3}
.moviola:not(.is-viva) :is(.moviola__slot,.moviola__i):nth-child(4){grid-row:4}
.moviola:not(.is-viva) :is(.moviola__slot,.moviola__i):nth-child(5){grid-row:5}
.moviola:not(.is-viva) :is(.moviola__slot,.moviola__i):nth-child(6){grid-row:6}@media (max-width:1080px){
.moviola:not(.is-viva) .moviola__cols{grid-template-columns:minmax(0,1fr);row-gap:var(--s-6)}
.moviola:not(.is-viva) .moviola__i{grid-column:1;padding-inline-start:var(--filo)}
.moviola:not(.is-viva) .moviola__card{width:100%}
.moviola:not(.is-viva) .moviola__slot:nth-child(1){grid-row:1}
.moviola:not(.is-viva) .moviola__i:nth-child(1){grid-row:2}
.moviola:not(.is-viva) .moviola__slot:nth-child(2){grid-row:3}
.moviola:not(.is-viva) .moviola__i:nth-child(2){grid-row:4}
.moviola:not(.is-viva) .moviola__slot:nth-child(3){grid-row:5}
.moviola:not(.is-viva) .moviola__i:nth-child(3){grid-row:6}
.moviola:not(.is-viva) .moviola__slot:nth-child(4){grid-row:7}
.moviola:not(.is-viva) .moviola__i:nth-child(4){grid-row:8}
.moviola:not(.is-viva) .moviola__slot:nth-child(5){grid-row:9}
.moviola:not(.is-viva) .moviola__i:nth-child(5){grid-row:10}
.moviola:not(.is-viva) .moviola__slot:nth-child(6){grid-row:11}
.moviola:not(.is-viva) .moviola__i:nth-child(6){grid-row:12}
}
.foot{background:var(--neutral);padding-bottom:16px}
.foot__top{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
column-gap:24px;row-gap:48px;align-items:center;margin-top:72px;
}
.foot__lead{grid-column:1 / span 2;min-width:0}
.foot__right{grid-column:3 / span 2;min-width:0}
.foot__claim{
font-family:var(--f-display);font-variation-settings:normal;font-stretch:100%;
font-weight:400;font-size:var(--t-h1);line-height:.98;letter-spacing:.005em;
}
/* Niente piu' taglio a tre righe: lo apriva il bottone "Read more", e senza
quel bottone il paragrafo sarebbe rimasto mozzo per sempre. */
.foot__p{
margin-top:16px;font-size:var(--t-para);line-height:var(--lh-para);
max-width:36ch;
}
.ribbon{
position:relative;overflow:hidden;margin-bottom:12px;
line-height:1;
-webkit-mask-image:linear-gradient(90deg,transparent 0,var(--ink) 5%,var(--ink) 95%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,var(--ink) 5%,var(--ink) 95%,transparent 100%);
}
.ribbon__run{display:flex;width:max-content;animation:ribbon-run 34s linear infinite}
.ribbon.is-idle .ribbon__run{animation-play-state:paused}
/* 8 settembre 2026: tolta la variante .ribbon.is-scroll. La classe non
veniva mai aggiunta e --rb-x non veniva mai scritta, quindi il nastro
correva comunque a tempo. Resta il modo a tempo, qui sopra. */
@keyframes ribbon-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ribbon__set{display:flex;align-items:center;flex:none}
.ribbon{--t-nastro:14px;--stella-nastro:#E03A2F}
.ribbon__set span,.ribbon__f{
display:block;padding-right:24px;
font-size:var(--t-nastro);font-weight:500;letter-spacing:.08em;white-space:nowrap;
}
.ribbon__set i{
display:block;width:var(--stella-l);height:var(--stella-h);flex:none;
background-color:var(--stella-nastro);
-webkit-mask:var(--spark) center/contain no-repeat;
mask:var(--spark) center/contain no-repeat;
margin-right:24px;
animation:ribbon-pip 4.2s steps(1,end) infinite;
}
.ribbon__set i:nth-child(4n){animation-delay:1.1s}
.ribbon__set i:nth-child(4n+2){animation-delay:2.6s}
@keyframes ribbon-pip{
0%,86%{opacity:1}
87%{opacity:.15}
89%{opacity:1}
91%{opacity:.15}
93%,100%{opacity:1}
}
.mailbox{
position:relative;display:flex;align-items:center;justify-content:center;
height:clamp(96px,8.9vw,128px);padding:0;
background:var(--mailbox);border-radius:var(--r-box);
overflow:hidden;isolation:isolate;
}
.mailbox__media{position:absolute;inset:0;z-index:0}
.mailbox__media video{width:100%;height:100%;object-fit:cover}
.mailbox__veil{position:absolute;inset:0;z-index:1;background:rgba(2,2,10,.82);opacity:.9}
.mailbox b{position:relative;z-index:2;font-size:var(--t-h2);font-weight:700;letter-spacing:-.014em}
.mailbox b span{
position:relative;z-index:0;display:inline-block;padding:.12em .3em;
transition:color var(--t-band) var(--e-band);
}
.mailbox b span::before{
content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);
transform:scaleX(0);transform-origin:left center;
transition:transform var(--t-band) var(--e-band);
}
.mailbox:hover b span,.mailbox:focus-visible b span{color:var(--ink)}
.mailbox:hover b span::before,.mailbox:focus-visible b span::before{transform:scaleX(1)}
.mailbox__a{position:absolute;right:32px;top:50%;z-index:2;width:30px;height:32px;margin-top:-16px;color:var(--paper)}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);margin-top:var(--s-5);padding-left:calc(var(--clear) + 12px)}
.foot__h{font-size:var(--t-h3);font-weight:600;letter-spacing:-.01em;line-height:1}
.foot__list{margin-top:var(--s-1)}
.foot__list li a,.foot__addr{display:block;font-size:var(--t-para-md);line-height:29px}
.foot__addr{line-height:18.6px}
.foot__vat{margin-top:var(--s-1);font-size:var(--t-para-md)}
.foot__vat b{font-weight:700}
.foot__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);padding-top:var(--s-3);font-size:var(--t-para-md)}
.foot__bar span:nth-child(2){flex:1;text-align:center;padding-right:2%}@media (max-width:1080px){
.foot__cols{grid-template-columns:repeat(2,1fr);gap:32px}
.foot__top{grid-template-columns:1fr;row-gap:40px}
.foot__lead,.foot__right{grid-column:1}
.foot__list li a{display:flex;align-items:center;min-height:44px;line-height:1.3}
}@media (max-width:640px){
.foot__cols{grid-template-columns:1fr}
.foot__bar{flex-direction:column;align-items:flex-start;gap:8px}
.foot__bar span:nth-child(2){text-align:left;padding-right:0}
}@media (max-width:640px){
.mailbox{height:224px;padding-right:0}
.mailbox__a{right:16px;height:24px}
.ribbon__set span:nth-child(n+5),.ribbon__set i:nth-child(n+5){display:none}
}@media (pointer:coarse){
.foot__list li a,.menu a,.aw__row{min-height:44px;display:flex;align-items:center}
.foot__list li a{line-height:1.3}
}@media (max-width:1080px){
.menu a,.navpanel a,.foot__list li a,.aw__row{min-height:44px}
.burger{width:44px;height:44px;flex:none}
.band-host{min-height:44px}
}
.rv{clip-path:inset(100% 0 0 0)}
.rv.is-in{animation:rv-open var(--t-mask) var(--e-osmo) both}
.rv.is-done{animation:none;clip-path:none}
@keyframes rv-open{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(-1px)}}
.mk{
display:block;
clip-path:inset(-.8em -.8em -.4em -.8em);
padding-right:.08em;margin-right:-.08em;
padding-left:.08em;margin-left:-.08em;
}
.mk__i{
display:block;--d:0ms;
transform:translateY(calc(100% + 1.15em));
transition:transform var(--t-mask) var(--e-osmo) var(--d);
}
.mk.is-in .mk__i{transform:translateY(0)}
.mk.is-done{clip-path:none}
.mk+.mk .mk__i{--d:var(--mk-step)}
.dk{display:none}
@media (min-width:1024px){.dk{display:inline}}
.stg>*{opacity:.01;transform:translateY(11px)}
.stg.is-in>*{animation:stg-in var(--t-su) var(--e-osmo) var(--d,0ms) both}
.stg.is-done>*{animation:none;opacity:1;transform:none}
@keyframes stg-in{from{opacity:.01;transform:translateY(11px)}to{opacity:1;transform:none}}
.stg>:nth-child(1){--d:0ms}
.stg>:nth-child(2){--d:calc(var(--stg-step) * 1)}
.stg>:nth-child(3){--d:calc(var(--stg-step) * 2)}
.stg>:nth-child(4){--d:calc(var(--stg-step) * 3)}
.stg>:nth-child(5){--d:calc(var(--stg-step) * 4)}
.stg>:nth-child(6){--d:calc(var(--stg-step) * 5)}
.stg>:nth-child(7){--d:calc(var(--stg-step) * 6)}
.stg>:nth-child(8){--d:calc(var(--stg-step) * 7)}
.stg>:nth-child(9){--d:calc(var(--stg-step) * 8)}
.up{opacity:.001;transform:translateY(14px)}
.up.is-in{animation:up-in var(--t-su) var(--e-osmo) var(--d,0ms) both}
@keyframes up-in{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.up.is-done{animation:none;opacity:1;transform:none}
[data-drift]{--dx:10px;--dy:13px;will-change:transform}@media (max-width:860px){[data-drift]{--dx:5px;--dy:9px}}@media (max-width:640px){[data-drift]{--dx:0px;--dy:5px}}
.apri__row [data-drift]{--dy:0px}
/* 8 settembre 2026: tolta la coreografia di entrata appesa a html.is-intro,
.mkh e .hup. Nessuno aggiungeva is-intro o intro-head al nodo radice e
nessun markup portava .mkh o .hup: era la seconda entrata scritta, mai
collegata. Quella viva sta piu' sotto, su html.is-apertura e is-aperto. */
/* 8 settembre 2026: tolto il secondo impianto di apertura pagina (.apre,
.apre__h, .apre__p, .apre__rl, .apre--scenica, .apre--diretta e la loro
media query). Nessuna pagina lo usava: le aperture vere sono costruite
con .apri, che sta piu' sotto in questo stesso foglio. */
@media (prefers-reduced-motion: reduce){
.head,.brand__lock,.brand__mono{transition:none !important}
[data-drift]{transform:none !important}
.gridl__edge,.gridl__g,.gridl__rail{transition:none !important;animation:none !important;
translate:0px !important;filter:none !important}
.gridl__g.is-esce-vicina{transform:scaleY(0) !important}
.gridl__edge{transform:scaleY(1) !important}
.gridl__g.is-on,.gridl__rail.is-on{transform:scaleY(1) !important;opacity:1 !important}
.gridl__g.is-esce{transform:scaleY(0) !important;opacity:0 !important}
.rv,.rv.is-in,.rv.is-done{clip-path:none !important;animation:none !important}
.mk,.mk.is-in,.mk.is-done{clip-path:none !important}
.mk__i{transform:none !important;transition:none !important}
.stg>*,.stg.is-in>*,.stg.is-done>*{opacity:1 !important;transform:none !important;animation:none !important}
.up,.up.is-in,.up.is-done{opacity:1 !important;transform:none !important;animation:none !important}
.tp,.aw__row,.aw__row::after,
.band,.band::after,.mega{transition:none !important}
.mega .m-in{opacity:1 !important;transform:none !important;transition:none !important}
.mailbox b span,.mailbox b span::before{transition:none !important}
.ribbon__run{animation:none !important}
.ribbon__set i{animation:none !important}
.moviola__bg,.moviola__i{transition:none}
.menu__lamp{transition:none !important}
.brand:hover .brand__star,.brand:focus-visible .brand__star,
.head.is-stuck .brand__mono .brand__star{animation:none !important}
.head::before,.head__scrim{transition:none !important}
.mailbox__media video{display:none !important}
}
.open{position:fixed;inset:0;z-index:900;pointer-events:none;
transition:opacity 350ms linear,visibility 0s linear 350ms;
animation:open-safe 1ms linear 3000ms forwards}
.open svg{display:block;width:100%;height:100%}
/* 8 settembre 2026: da questi elenchi sono usciti .hero .up, .hero .occhiello,
.hero__filo, .hero__frase e .hero__lead, che nessun markup porta piu'.
Restava viva solo la testata, quindi l'entrata e' in un tempo solo e non
in cinque, e i ritardi a scalare che li accompagnavano sono usciti con
loro. Quello che si vede non cambia. */
html:not(.is-aperto) .head{opacity:.001;transform:translateY(-22px)}
html.is-aperto .head{
opacity:1;transform:none;--d-entra:0ms;
transition:opacity var(--t-entra) var(--e-osmo) var(--d-entra,0ms),
transform var(--t-entra) var(--e-osmo) var(--d-entra,0ms);
}
html.is-apertura #hero :is(.occhiello,.apri__filo,.apri__t,.apri__lead,.apri__reel){animation:none !important}
html:not(.is-aperto) body[data-apertura] #hero :is(.occhiello,.apri__filo,.apri__t,.apri__lead){opacity:.001;transform:translateY(14px)}
html.is-apertura.is-aperto #hero :is(.occhiello,.apri__filo,.apri__t,.apri__lead){
opacity:1;transform:none;
transition:opacity var(--t-entra) var(--e-osmo) var(--d-entra,0ms),
transform var(--t-entra) var(--e-osmo) var(--d-entra,0ms);
}
html:not(.is-aperto) body[data-apertura] #hero .apri__reel{opacity:.001}
html.is-apertura.is-aperto #hero .apri__reel{
opacity:1;
transition:opacity var(--t-entra) var(--e-osmo) var(--d-entra,0ms);
}
html.is-apertura.is-aperto #hero .occhiello{--d-entra:0ms}
html.is-apertura.is-aperto #hero .apri__filo{--d-entra:100ms}
html.is-apertura.is-aperto #hero .apri__t{--d-entra:200ms}
html.is-apertura.is-aperto #hero .apri__lead{--d-entra:300ms}
html.is-apertura.is-aperto #hero .apri__reel{--d-entra:400ms}
html.is-apertura .gridl__edge{--d:var(--t-entra)}
html.is-apertura .gridl__edge:nth-child(2){--d:var(--t-entra)}
html.is-apertura .gridl__edge:nth-child(2n){transform-origin:50% 100%}
.hero .hero__media video{filter:brightness(var(--apre-luce,1))}@media (prefers-reduced-motion:reduce){
html:not(.is-aperto) .hero__media,
html:not(.is-aperto) .head{opacity:1;transform:none}
.hero .hero__media video{filter:none}
}
.open__veil{fill:var(--ink)}
.open__filo{stroke:var(--linea);stroke-width:1px}
@media (max-width:767px){
.open__veil,.open__filo{shape-rendering:optimizeSpeed}
#openFili{display:none}
}
.open.is-off{opacity:0;visibility:hidden}
@keyframes open-safe{to{visibility:hidden}}@media (prefers-reduced-motion:reduce){.open{display:none}}
.sp-txt{
letter-spacing:var(--tr-menu);
font-family:var(--f-sans);
font-size:var(--sp-t);
font-weight:var(--sp-peso);
font-stretch:var(--sp-wdth);
font-variation-settings:"wdth" 125;
text-transform:uppercase;
white-space:nowrap;
line-height:1;
}
.sp-quad{
flex:none;
width:calc(var(--sp-quad) - var(--sp-gap) * 2);
height:var(--sp-in);
display:grid;place-items:center;
}
.sp-quad::before{
content:"";
width:11px;height:11px;
background:currentColor;
-webkit-mask:var(--sp-freccia) center / contain no-repeat;
mask:var(--sp-freccia) center / contain no-repeat;
}@media (pointer:coarse),(max-width:1080px){
:where(.sp-cta,
a.sp-ctrl,
button:has(> .sp-cta),
button[data-view],button[data-cat],button[data-year],
button.sp-quad){position:relative}
.sp-cta::after,
a.sp-ctrl::after,
button:has(> .sp-cta)::after{
content:"";position:absolute;
left:50%;top:50%;transform:translate(-50%,-50%);
width:100%;min-width:var(--dito);
height:var(--dito);
}
button[data-view]::after,
button[data-cat]::after,
button[data-year]::after{
content:"";position:absolute;
left:50%;top:50%;transform:translate(-50%,-50%);
width:100%;min-width:var(--dito);
height:100%;
}
button.sp-quad::after{
content:"";position:absolute;
top:50%;transform:translateY(-50%);
right:0;width:var(--dito);height:var(--dito);
}
button.sp-quad--prev::after{right:auto;left:0}
button.sp-quad--prev:has(+ button.sp-quad)::after{left:auto;right:0}
button.sp-quad--prev + button.sp-quad::after{right:auto;left:0}
}
.sp-cta{
position:relative;
display:inline-flex;align-items:center;
height:var(--sp-h);min-height:0;
padding:0 calc(var(--sp-quad) + var(--sp-pad) * .5) 0 var(--sp-pad);
border:0;border-radius:0;
background:var(--paper);
color:var(--ink);
cursor:pointer;
text-decoration:none;
isolation:isolate;
}
.sp-cta > span:not(.sp-quad){text-box:trim-both cap alphabetic}
.sp-ctrl__t,
.sp-filtro__eti,
.sp-filtro__viste button,
.sp-filtro__t{text-box:trim-both cap alphabetic}
.sp-cta .sp-quad{
position:absolute;z-index:0;
top:var(--sp-gap);right:var(--sp-gap);
height:calc(100% - var(--sp-gap) * 2);
width:calc(var(--sp-h) - var(--sp-gap) * 2);aspect-ratio:1;
display:grid;place-items:center;
background:var(--ink);color:var(--paper);
transition:width var(--t-band) var(--e-band);
}
.sp-cta .sp-quad::before{
position:absolute;right:calc((var(--sp-quad) - var(--sp-gap) * 2 - 11px) / 2);
}
.sp-cta > :not(.sp-quad){
position:relative;z-index:1;
transition:color var(--t-band) var(--e-band);
}
.sp-cta:hover .sp-quad,.sp-cta:focus-visible .sp-quad{
width:calc(100% - var(--sp-gap) * 2);
}
.sp-cta:hover > :not(.sp-quad),.sp-cta:focus-visible > :not(.sp-quad){
color:var(--paper);
}
.sp-cta--sec{background:var(--ink);color:var(--paper)}
.sp-cta--sec .sp-quad{background:var(--paper);color:var(--ink)}
.sp-cta--sec:hover > :not(.sp-quad),.sp-cta--sec:focus-visible > :not(.sp-quad){
color:var(--ink);
}
.sp-watch{
--w-freccia-l:calc(var(--sp-h) * 1.14629);
--w-freccia-a:calc(var(--sp-h) * 1.00480);
--w-sporge-x:calc(var(--sp-h) * 0.45733);
--w-sporge-y:calc(var(--sp-h) * 0.31806);
position:relative;
isolation:isolate;
box-sizing:border-box;
display:inline-flex;align-items:center;justify-content:center;
height:calc(var(--sp-h) + var(--w-sporge-y));
padding:var(--w-sporge-y) var(--sp-pad) 0 calc(var(--w-sporge-x) + var(--sp-pad));
margin-top:calc(var(--w-sporge-y) * -1);
margin-left:calc(var(--w-sporge-x) * -1);
border:0;border-radius:0;
background:none;
color:var(--paper);
pointer-events:none;
text-box:trim-both cap alphabetic;
}
.sp-watch::after{
content:"";position:absolute;z-index:-1;
left:var(--w-sporge-x);right:0;top:var(--w-sporge-y);bottom:0;
border:var(--sp-gap) solid var(--paper);
background:var(--ink);
}
.sp-watch::before{
content:"";position:absolute;
z-index:-2;
left:0;top:0;
width:var(--w-freccia-l);height:var(--w-freccia-a);
background:var(--paper);
-webkit-mask:var(--sp-cursore) 0 0 / 100% 100% no-repeat;
mask:var(--sp-cursore) 0 0 / 100% 100% no-repeat;
}
.sp-ctrl{
display:inline-flex;align-items:center;
height:var(--sp-h);
padding:0 var(--sp-gap);
gap:var(--sp-pad);
border-radius:0;
background:var(--ink);
color:var(--paper);
}
.sp-ctrl .sp-quad{background:var(--paper);color:var(--ink);cursor:pointer}
.sp-ctrl .sp-quad--prev::before{transform:scaleX(-1)}
.sp-ctrl{min-width:236px}
.sp-ctrl__t{flex:1;text-align:center;padding:0 var(--sp-pad)}
.sp-ctrl .sp-quad[disabled],.sp-ctrl .sp-quad[aria-disabled="true"]{opacity:.35;cursor:default}
.sp-filtro{
display:flex;align-items:center;
width:100%;min-height:var(--sp-h);
padding:var(--sp-aria) var(--sp-aria) var(--sp-aria) var(--sp-pad);
gap:calc(var(--sp-pad) * 1.5);
border-radius:0;
background:var(--paper);
color:var(--ink);
}
.sp-filtro__eti{font-weight:500;opacity:.7}
.sp-filtro__viste{
display:flex;align-items:stretch;gap:0;
border:1px solid var(--sp-orlo);border-radius:0;
}
.sp-filtro__viste button{
display:inline-flex;align-items:center;justify-content:center;
gap:calc(var(--sp-pad) * .6);
padding:calc(var(--sp-pad) * .5) var(--sp-pad);line-height:1;
background:none;color:inherit;cursor:pointer;
border:0;border-radius:0;
font:inherit;text-transform:inherit;
}
.sp-filtro__viste button + button{border-left:1px solid var(--sp-orlo)}
.sp-filtro__viste button[aria-pressed="true"]{
background:var(--ink);color:var(--paper);text-decoration:none;
}
.sp-filtro__viste button[data-view]::before{
content:"";flex:none;width:13px;height:13px;
background:currentColor;
-webkit-mask:var(--sp-ico-griglia) center / contain no-repeat;
mask:var(--sp-ico-griglia) center / contain no-repeat;
}
.sp-filtro__viste button[data-view="list"]::before{
-webkit-mask-image:var(--sp-ico-lista);
mask-image:var(--sp-ico-lista);
}@media (pointer:coarse){
.sp-filtro{height:auto;align-items:flex-start;padding-block:var(--sp-aria)}
.sp-filtro__eti{padding-top:calc((var(--dito) - 1em) / 2)}
.sp-filtro__viste{flex-wrap:nowrap;row-gap:0}
.sp-filtro__viste button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--dito)}
}
.sp-filtro__tendine{margin-left:auto;display:flex;gap:var(--sp-gap)}
.sp-filtro__t{
display:inline-flex;align-items:center;justify-content:space-between;
min-width:171px;
padding:calc(var(--sp-pad) * .5 + 1px) var(--sp-pad);line-height:1;
border:1px solid var(--sp-orlo);border-radius:0;
background:var(--ink);color:var(--paper);
cursor:pointer;font:inherit;text-transform:inherit;
}
.sp-filtro__t::after{
content:"";width:11px;height:11px;margin-left:var(--sp-pad);
background:currentColor;
-webkit-mask:var(--sp-freccia-giu) center / contain no-repeat;
mask:var(--sp-freccia-giu) center / contain no-repeat;
}@media (max-width:767px){
.sp-filtro{flex-wrap:wrap;height:auto;padding-block:var(--sp-aria);gap:var(--sp-aria)}
.sp-filtro__tendine{margin-left:0;width:100%}
.sp-filtro__t{flex:1;min-width:0}
}
h1.occhiello,.occhiello{
font-family:var(--f-sans);
font-size:var(--t-menu);
font-weight:500;
font-stretch:125%;
font-variation-settings:"wdth" var(--ui-wdth);
line-height:var(--lh-menu);
letter-spacing:var(--tr-menu);
text-transform:uppercase;
color:inherit;
margin:0;
}
.filetto-stelle{
position:relative;
height:1px;
background:var(--linea);
margin:var(--s-3) 0;
}
.filetto-stelle::before,.filetto-stelle::after{
content:"";position:absolute;top:50%;
width:14px;height:14px;margin-top:-7px;
background-color:var(--stella);
-webkit-mask:var(--spark) center / contain no-repeat;
mask:var(--spark) center / contain no-repeat;
}
.filetto-stelle::before{left:-7px}
.filetto-stelle::after{right:-7px}
.apri-cap{margin-bottom:var(--s-3)}
.apri-cap .filetto-stelle{width:100%;margin:var(--s-3) 0 0}
.apri-cap--mid{text-align:center}
.apri-cap--mid .filetto-stelle{margin-inline:auto}
.apri{position:relative;overflow:hidden;--apri-sotto:40px}
.apri[data-apri="video"]{height:100svh;min-height:fit-content;background:var(--ink);isolation:isolate}
.apri[data-apri="testo"]{padding-top:calc(var(--head-h) + var(--s-9))}
.apri__media{position:absolute;inset:0;z-index:0;background:var(--ink)}
.apri__media video{width:100%;height:100%;object-fit:cover}
.apri__veil{position:absolute;inset:0;z-index:1;
background-color:var(--velo);background-image:var(--velo-testo)}
.apri__in{position:relative;z-index:2;
display:flex;flex-direction:column;justify-content:flex-end;
padding-bottom:var(--apri-sotto)}
.apri[data-apri="video"] .apri__in{height:100%}
.apri__row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-6)}
.apri__t{flex:1 1 auto}
.apri__t,
.apri .apri__in h1:not(.occhiello),
.lgo h1:not(.occhiello),
.top__h{font-size:var(--t-apri)}@media (min-width:1024px){
/* da qui il titolo sta in mezza riga: il corpo segue la larghezza della colonna,
cosi' va a capo sempre come su un desktop da 1600px (niente 4-5 righe sui tablet) */
:root{--t-apri:clamp(38px,calc((100vw - 48px) * .0462),71px)}
}
@media (min-width:1440px){
:root{--t-apri:clamp(38px,calc((100vw - 48px) * .0462 - 10px),61px)}
.apri__t{max-width:50%}
}
@media (max-width:767px){
:root{--t-apri:clamp(31px,5.3vw,64px)}
}
@media (max-width:1023px){
.apri .apri-cap .filetto-stelle{width:calc(100% + 10px);margin-inline:-5px}
}
:is(h1,h2,h3,h4,.apri__t,.t-h2):has(.ser) .san{font-weight:500}
.apri__t .ser{letter-spacing:var(--ser-track)}
:is(h1,h2,h3,h4,.apri__t,.t-h2):has(.san) .ser{font-size:calc(var(--ser-size) - 3px)}
.apri__lead{flex:none;width:var(--apri-lead);padding:var(--filo);
font-size:var(--t-para);line-height:var(--lh-para-md);
text-transform:none;font-weight:400;color:var(--figure)}
.apri--cursore,.apri--cursore *{cursor:none}@media (max-width:1023px){
.apri__row{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.apri__lead{width:100%;text-align:left;padding:var(--filo)}
}
.top__row .top__lead{
flex:none;
width:var(--apri-lead);
margin-inline-start:auto;
text-align:right;
padding:var(--filo);
}
:root{
--suono-orlo:var(--s-2);
}
.suono{
position:fixed;
right:var(--suono-orlo);
bottom:var(--suono-orlo);
z-index:800;
display:grid;place-items:center;
width:var(--sp-quad);height:var(--sp-quad);
padding:0;margin:0;
border:var(--sp-gap) solid var(--paper);
border-radius:0;
background:var(--ink);
color:var(--paper);
cursor:pointer;
transition:background var(--t-band) var(--e-band),
color var(--t-band) var(--e-band);
}
.suono::after{
content:"";position:absolute;
left:50%;top:50%;
width:var(--dito);height:var(--dito);
transform:translate(-50%,-50%);
}
.suono__onde{display:inline-flex;align-items:center;gap:3px;height:15px}
.suono__onda{
width:2.5px;height:6px;
background:currentColor;
transition:height var(--t-band) var(--e-band);
}
.suono__onda:nth-child(2){height:15px}
.suono__onda:nth-child(3){height:10px}
.suono__muto{
position:absolute;
width:21px;height:2px;
background:currentColor;
rotate:45deg;
box-shadow:0 -2px 0 0 var(--ink),0 2px 0 0 var(--ink);
}
.suono[aria-pressed="true"] .suono__muto{display:none}
.suono .suono__onda{
animation:suono-onda 1s var(--e-band) infinite;
}
.suono .suono__onda:nth-child(2){animation-delay:.16s}
.suono .suono__onda:nth-child(3){animation-delay:.32s}
@keyframes suono-onda{0%,100%{height:6px}50%{height:15px}}
:root{--suono-stacco:20px}
.head__in > .suono{
position:relative;right:auto;bottom:auto;
grid-area:marchio;justify-self:start;align-self:center;
margin-inline-start:calc(var(--marchio-l) + var(--s-3) + var(--suono-stacco));
--suono-vuoto:calc(var(--s-3) + var(--suono-stacco));
}
.head.is-stuck .head__in > .suono{
--suono-vuoto:calc(var(--s-3) + var(--suono-stacco) + var(--marchio-l) - var(--marchio-mo-l));
}
.head__in > .suono::before{
content:"";position:absolute;pointer-events:none;
left:calc(var(--suono-vuoto) / -2);
top:50%;transform:translateY(-50%);
width:1px;height:var(--hh);
background:var(--linea);
}@media (prefers-reduced-motion:reduce){
.suono,
.suono *,
.suono .suono__onda,
.suono .suono__onda:nth-child(2),
.suono .suono__onda:nth-child(3){animation:none;transition:none}
}
.foot__bar span:last-child{margin-right:var(--s-5)}@media (max-width:1080px){
.navpanel{
position:fixed;
top:var(--head-h);left:0;right:0;bottom:0;
padding-block:var(--s-5);
overflow-y:auto;overscroll-behavior:contain;
border-bottom:0;
}
.navpanel a{justify-content:flex-start;text-align:left}
}
.apri .tx{margin-inline-start:-12px}
.mega__cols--due{grid-template-columns:1fr 1fr}
.mega__cases--pochi .mega__piu .mega__case::after{display:none}
.mega__cases--pochi .mega__piu .mega__case{padding:0}@media (max-width:1023px){
.apri__lead,.top__row .top__lead{
width:100%;padding:var(--filo) 0;text-align:left;
}
}
/* sul tablet il paragrafo d'apertura corre a tutta larghezza: un po' piu' grande */
@media (min-width:768px) and (max-width:1279px){
.apri__lead,.top__row .top__lead{font-size:18px}
}
.hero__hud{
position:absolute;left:0;right:0;bottom:var(--s-7);z-index:3;
display:flex;flex-direction:column;align-items:stretch;gap:var(--s-3);
padding-inline:var(--clear);
}
.sel,.reelbox__sel{flex:0 0 auto;align-self:center;min-width:320px;max-width:100%}
.ctl{
display:flex;align-items:center;
width:100%;height:var(--sp-h);
padding:0 var(--sp-gap);gap:var(--sp-pad);
background:var(--ink);color:var(--paper);
}
.vol{display:flex;align-items:center;gap:var(--sp-gap);flex:none}
.ctl__b{
position:relative;flex:none;
width:calc(var(--sp-quad) - var(--sp-gap) * 2);height:var(--sp-in);
display:grid;place-items:center;
background:var(--paper);color:var(--ink);
transition:background var(--t-band) var(--e-band),color var(--t-band) var(--e-band);
}
@media (pointer:coarse),(max-width:1080px){
.ctl__b::after{
content:"";position:absolute;top:50%;transform:translateY(-50%);
left:0;width:var(--dito);height:var(--dito);
}
.vol .ctl__b:first-child::after{left:auto;right:0}
}
.ctl__b:hover,.ctl__b:focus-visible{background:var(--accent);color:var(--paper)}
.ctl__b svg{width:var(--ico);height:var(--ico);display:block}
.sel__t,.reelbox__sel__t{
flex:1 1 auto;min-width:0;margin:0;
color:var(--paper);text-align:center;
font-size:var(--sp-t);letter-spacing:0;
overflow:hidden;text-overflow:ellipsis;
}
.ctl__t{
flex:none;
font-family:var(--f-sans);font-variation-settings:"wdth" 100;font-stretch:100%;
font-size:var(--t-ui);font-weight:700;line-height:1;letter-spacing:.06em;
font-variant-numeric:tabular-nums;text-align:center;
}
.ctl__b .ic-b{display:none}
.ctl__b.is-on .ic-a{display:none}
.ctl__b.is-on .ic-b{display:block}
.scrub{
position:relative;flex:1 1 auto;min-width:0;align-self:stretch;
display:flex;align-items:center;
--scrub-quad:calc(var(--sp-gap) * 4);
--scrub-h:var(--sp-in);
}
.scrub::before{
content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;
background:var(--paper);
}
.scrub__in{
position:absolute;left:0;right:0;top:50%;width:100%;
height:var(--scrub-h);transform:translateY(-50%);
margin:0;padding:0;
-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;
}
@media (pointer:coarse),(max-width:1080px){
.scrub{--scrub-h:var(--dito)}
}
.scrub__in::-webkit-slider-runnable-track{height:100%;background:transparent}
.scrub__in::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;box-sizing:border-box;
width:var(--scrub-quad);height:var(--scrub-quad);border-radius:0;
margin-top:calc((var(--scrub-h) - var(--scrub-quad)) / 2);
background:var(--accent);border:1px solid var(--paper);
}
.scrub__in::-moz-range-track{height:100%;background:transparent}
.scrub__in::-moz-range-thumb{
box-sizing:border-box;
width:var(--scrub-quad);height:var(--scrub-quad);border-radius:0;
background:var(--accent);border:1px solid var(--paper);
}
.vol__n{min-width:4ch}
.ctl.is-spenta{opacity:.45}
.ctl.is-spenta .ctl__b,.ctl.is-spenta .scrub__in{cursor:default}
.hero__back{
position:absolute;top:calc(var(--hh) + var(--s-7));left:var(--clear);z-index:3;
min-width:0;padding-right:var(--sp-pad);
text-decoration:none;
}
.hero__back .sp-quad{transition:background var(--t-band) var(--e-band),color var(--t-band) var(--e-band)}
.hero__back:hover .sp-quad,.hero__back:focus-visible .sp-quad{background:var(--accent);color:var(--paper)}
.sel .sp-quad,.reelbox__sel .sp-quad{transition:background var(--t-band) var(--e-band),color var(--t-band) var(--e-band)}
.sel .sp-quad:enabled:hover,.sel .sp-quad:focus-visible,.org .sp-quad:enabled:hover,.org .sp-quad:focus-visible,.reelbox__sel .sp-quad:enabled:hover,.reelbox__sel .sp-quad:focus-visible{background:var(--accent);color:var(--paper)}
@media (max-width:900px){
.sel,.reelbox__sel{align-self:stretch;width:100%}
}
@media (max-width:640px){
.ctl{gap:calc(var(--sp-gap) * 2)}
.vol{position:relative;gap:calc(var(--sp-gap) * 2)}
.vol__n{
position:absolute;top:calc(100% + var(--sp-gap) * 2);right:0;
min-width:0;padding:0 var(--sp-gap);
background:var(--ink);color:var(--paper);
pointer-events:none;
}
.sel,.reelbox__sel{min-width:min(320px,100%)}
.vol__n.is-liv{animation:vol-n var(--t-muore) var(--e-band) var(--vol-attesa,2000ms) forwards}
}
@keyframes vol-n{to{opacity:.001}}
@media (prefers-reduced-motion:reduce){.vol__n.is-liv{animation:none}}
.sp-voce{
position:absolute;right:var(--s-3);bottom:var(--s-3);z-index:3;
display:none;place-items:center;
color:var(--figure);pointer-events:none;
filter:drop-shadow(0 1px 3px color-mix(in srgb,var(--ink) 80%,transparent));
opacity:0;transition:opacity var(--t-band) var(--e-out);
}
.sp-voce.is-viva{display:grid;opacity:1}
.sp-voce.is-tasto{pointer-events:auto;cursor:pointer;padding:16px;right:calc(var(--s-3) - 16px);bottom:max(calc(var(--s-3) - 16px),calc(100% - 100svh + var(--s-3) - 16px))}
/* MK-830, 8 settembre 2026: il bollo dell'audio cresce di 10 px, perche' ora
e' l'unico modo di accendere il sonoro delle aperture e va visto. La barra
piu' alta passa da 8 a 18 px e tutto il resto sale con lei, arrotondato:
spessore e distanza da 1,5 a 3, le altre due barre da 3 e 5 a 7 e 11, e la
sbarra del muto da 12 a 26, che e' la larghezza del glifo nuovo. */
.sp-voce .suono__onde{gap:3px;height:18px}
.sp-voce .suono__onda{
width:3px;height:7px;
animation:sp-voce-onda 1s var(--e-band) infinite;
}
.sp-voce .suono__onda:nth-child(2){height:18px;animation-delay:.16s}
.sp-voce .suono__onda:nth-child(3){height:11px;animation-delay:.32s}
.sp-voce.is-muta .suono__onda{animation:none;height:7px}
.sp-voce.is-muta .suono__onda:nth-child(2){height:18px}
.sp-voce.is-muta .suono__onda:nth-child(3){height:11px}
.sp-voce .suono__muto{
position:absolute;display:none;
width:26px;height:2px;
background:currentColor;rotate:45deg;
}
.sp-voce.is-muta .suono__muto{display:block}
@keyframes sp-voce-onda{0%,100%{height:7px}50%{height:18px}}
@media (prefers-reduced-motion:reduce){
.sp-voce .suono__onda{animation:none}
}