:root{
  --verde:#26EB1C; --giallo:#FFE100; --shocking:#FF2D8E; --cosmico:#1B44D8;
  --nero:#050705; --bianco:#FFFFFF; --inchiostro:#0A0A06;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{margin:0;background:var(--nero);color:var(--bianco);
  font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
body.locked{overflow:hidden}

/* ---------- la barra ---------- */
.barra{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(16px + env(safe-area-inset-top,0px)) clamp(14px,4vw,48px) 16px;
  pointer-events:none;mix-blend-mode:normal}
.barra > *{pointer-events:auto}
.barra .destra{display:flex;align-items:center;gap:clamp(14px,3vw,26px)}
/* the header logo is the only logo (Ludwig, 21 Sept): the wordmark in caps, header-sized,
   always present. The full-width hero mark is struck; its h1 stays for readers only. */
.segno{font-family:Marcellus,"Times New Roman",serif;color:var(--giallo);text-transform:uppercase;
  letter-spacing:.26em;font-size:clamp(15px,1.25vw,19px);line-height:1;text-decoration:none;
  transition:color .3s}
.mark.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;animation:none!important}

/* three thin smooth lines */
.menu-btn{width:34px;height:22px;border:0;background:transparent;padding:0;margin:0;
  cursor:pointer;position:relative;display:block}
.menu-btn i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;
  background:var(--giallo);display:block;
  transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .2s,background-color .3s}
.menu-btn i:nth-child(1){top:2px}
.menu-btn i:nth-child(2){top:10px}
.menu-btn i:nth-child(3){top:18px}
.menu-btn:focus-visible{outline:2px solid var(--giallo);outline-offset:6px}
body.open .menu-btn i{background:var(--inchiostro)}
body.open .menu-btn i:nth-child(1){transform:translateY(8px) rotate(45deg)}
/* over La Rana the giallo would sit on verde at 1.1:1 — the bar goes ink instead */
body.verde:not(.open) .menu-btn i{background:#06230A}
body.verde:not(.open) .segno{color:#06230A}
body.open .menu-btn i:nth-child(2){opacity:0}
body.open .menu-btn i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- la lingua — Italian is the text, English is the translation ----------
   The tricolore as structure, not as a sticker: three thin bars in the house's
   own verde and rosso, the same grammar as the three menu lines, turned 90°. */
.lingua{display:flex;align-items:center;gap:9px;border:0;background:transparent;
  padding:6px 2px;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.lingua .tri{display:flex;gap:2.5px;height:17px}
.lingua .tri i{display:block;width:3.5px;height:100%;border-radius:1px;
  transition:background-color .3s}
.lingua .tri i:nth-child(1){background:var(--verde)}
.lingua .tri i:nth-child(2){background:var(--bianco)}
.lingua .tri i:nth-child(3){background:#EF1D23}
.lingua .cod{font-size:10px;font-weight:700;letter-spacing:.2em;color:var(--giallo);
  font-variant-numeric:tabular-nums;transition:color .3s}
.lingua:focus-visible{outline:2px solid var(--giallo);outline-offset:5px}
.lingua:hover .cod{color:var(--bianco)}
/* on the verde panel the verde bar would vanish, and giallo cannot sit on verde */
body.verde:not(.open) .lingua .cod{color:#06230A}
body.verde:not(.open) .lingua .tri i:nth-child(1){background:#06230A}
body.open .lingua .cod{color:var(--inchiostro)}
body.open .lingua .tri i:nth-child(2){background:var(--inchiostro)}

/* a bilingual pair: the elected language leads, the other is its subtitle.
   Nothing is ever removed — the brand never appears in English alone. */
.bil{display:inline-flex;flex-direction:column;gap:.28em;line-height:1.05;text-align:inherit}
.bil > *{font-style:normal;display:block}
html[lang="it"] .bil > [lang="it"], html[lang="en"] .bil > [lang="en"]{order:1}
html[lang="it"] .bil > [lang="en"], html[lang="en"] .bil > [lang="it"]{
  order:2;font-size:max(9px,.76em);opacity:.58;font-weight:400}

/* ---------- il menu ---------- */
.menu{position:fixed;inset:0;z-index:50;background:var(--giallo);color:var(--inchiostro);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(70px,14vh,140px) clamp(14px,4vw,48px) clamp(30px,6vh,60px);
  transform:translateY(-101%);transition:transform .52s cubic-bezier(.76,0,.24,1);
  visibility:hidden}
body.open .menu{transform:none;visibility:visible}
.menu a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  text-decoration:none;color:inherit;border-top:1px solid rgba(10,10,6,.26);
  padding:clamp(14px,2.6vh,24px) 0;
  font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  font-size:clamp(26px,6vw,68px);
  opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s,color .15s}
.menu a:last-child{border-bottom:1px solid rgba(10,10,6,.26)}
body.open .menu a{opacity:1;transform:none}
body.open .menu a:nth-child(1){transition-delay:.16s}
body.open .menu a:nth-child(2){transition-delay:.22s}
body.open .menu a:nth-child(3){transition-delay:.28s}
body.open .menu a:nth-child(4){transition-delay:.34s}
.menu a:hover{color:var(--shocking)}
.menu a:focus-visible{outline:2px solid var(--inchiostro);outline-offset:4px}
.menu a span{font-size:10px;font-weight:600;letter-spacing:.22em;opacity:.55;flex:none}

/* ---------- il giradischi — the waveform monitor from the VOEO page, now in the house's giallo
   so it reads on verde, on the sea and on the dark greens: ink housing, giallo frame, the waveform
   visible at rest, the video and a giallo glow while it plays. Fixed (1 Oct, Ludwig): mid-height at the
   right edge, half size, and it travels with the scroll — the music is for the whole page. ---------- */
/* on landing the giradischi sits in the centre of the hero; the first scroll sends it to the right
   edge, and there it stays (1 Oct, Ludwig). Both states use left + translate so the move animates. */
.suona{position:fixed;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.3);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  transition:left 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.suona.via{left:calc(100% - clamp(6px,1vw,12px));transform:translate(-100%,-50%) scale(1)}
@media(prefers-reduced-motion:reduce){.suona{transition:none}}
.suona .eti{font-family:Marcellus,"Times New Roman",serif;color:var(--giallo);font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1.2;text-align:center}
.suona .eti .bil{display:flex;flex-direction:column;align-items:center}
.suona .eti .bil{gap:.2em}
.suona .eti .ferma{display:none}
.suona.on .eti .bil{display:none}.suona.on .eti .ferma{display:flex}
.giradischi{position:relative;
  width:48px;height:31px;padding:0;cursor:pointer;overflow:hidden;border-radius:6px;
  background:rgba(8,10,8,.78);border:1px solid var(--giallo);
  box-shadow:0 0 0 rgba(255,225,0,0);transition:box-shadow .5s cubic-bezier(.4,0,.2,1)}
.giradischi:hover{box-shadow:0 0 8px rgba(255,225,0,.35)}
.giradischi .fermo,.giradischi .onda{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:4px}
.giradischi .fermo{opacity:.9;mix-blend-mode:screen;filter:sepia(1) saturate(6) hue-rotate(10deg) brightness(1.1)}
.giradischi .onda{display:none;mix-blend-mode:screen;filter:sepia(1) saturate(6) hue-rotate(10deg) brightness(1.1);opacity:var(--gv,.9)}
.giradischi[aria-pressed=true]{box-shadow:0 0 var(--gs,8px) rgba(255,225,0,var(--go,.4)),inset 0 0 calc(var(--gs,8px)*.4) rgba(255,225,0,calc(var(--go,.4)*.4));transition:box-shadow .15s ease}
.giradischi[aria-pressed=true] .onda{display:block}
.giradischi[aria-pressed=true] .fermo{display:none}
.giradischi:focus-visible{outline:2px solid var(--giallo);outline-offset:4px}
body.open .suona{opacity:0;pointer-events:none}

/* ---------- 00 · LA RIVA ---------- */
.riva{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--cosmico)}
.riva .plate{position:absolute;inset:0;background:var(--cosmico)}
/* 2 Oct (Ludwig): no poster — before the first frame the hero is cosmico, flat, the house's own blue;
   the film fades up over it rather than a still of the boat sitting there. */
.riva .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;
  opacity:0;transition:opacity .8s ease}
.riva .film.su{opacity:1}
.riva .plate::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,7,5,.18) 0%,rgba(5,7,5,0) 26%,rgba(5,7,5,0) 72%,rgba(5,7,5,.34) 100%)}
/* 1 Oct: the film ends on the Riva and the wordmark lands on it — giallo, full width, the cover law —
   and holds 30 s before the film runs again. Hidden while the film plays. */
.mark{position:absolute;left:0;right:0;top:17%;z-index:2;text-align:center;margin:0;opacity:0;pointer-events:none;
  font-family:Marcellus,"Times New Roman",serif;color:var(--giallo);font-weight:400;
  font-size:clamp(44px,9.6vw,176px);line-height:1;white-space:nowrap;
  letter-spacing:.22em;text-indent:.22em;
  will-change:transform,opacity}
.mark.settle{animation:settle 1.5s cubic-bezier(.16,1,.3,1) both;opacity:1}
.mark.fermo{opacity:1}
@media(max-width:600px){.mark{top:13%;font-size:14.5vw}}
@keyframes settle{from{letter-spacing:.52em;text-indent:.52em;opacity:0}
                  to{letter-spacing:.22em;text-indent:.22em;opacity:1}}
.cue{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:3;
  display:flex;justify-content:center;color:var(--giallo);text-decoration:none}
.cue .bar{width:1px;height:34px;background:currentColor;transform-origin:50% 0;
  animation:drop 2.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes drop{0%,100%{transform:scaleY(.25);opacity:.35}45%{transform:scaleY(1);opacity:1}}
.cue:focus-visible{outline:2px solid var(--giallo);outline-offset:6px}

/* ---------- 01 · LA RANA ---------- */
.rana{position:relative;isolation:isolate;background:var(--verde);color:#06230A;padding-block:clamp(34px,7vh,74px) clamp(40px,8vh,90px);
  padding-inline:clamp(14px,4vw,48px);transition:background-color .9s cubic-bezier(.4,0,.2,1),color .9s cubic-bezier(.4,0,.2,1)}
/* notte (1 Oct, Ludwig): press play and the room goes black and the club rig comes up behind the frog —
   the same b/w loop as under Heqet, screened onto black: white beams, haze, the floor. Stop → verde again. */
.rana > :not(.rana-pista){position:relative;z-index:1}
.rana-pista{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  opacity:0;pointer-events:none;mix-blend-mode:screen;transition:opacity 1.2s ease}
.rana.notte{background:#050705;color:#D6F7D2}
.rana.notte .tag{color:#D6F7D2;border-bottom-color:rgba(214,247,210,.3)}
.rana.notte .rana-pista{opacity:.78}
/* the bar follows the room: on the black it goes pale instead of ink */
body.notte.verde:not(.open) .menu-btn i,body.notte.verde:not(.open) .lingua .tri i:nth-child(1){background:#D6F7D2}
body.notte.verde:not(.open) .segno,body.notte.verde:not(.open) .lingua .cod{color:#D6F7D2}
@media(prefers-reduced-motion:reduce){.rana-pista{display:none}.rana{transition:none}}
.tag{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#06230A;
  border-bottom:1px solid rgba(6,35,10,.3);padding-bottom:12px}
.tag b{font-weight:700}

.pit{position:relative;width:100%;max-width:1020px;margin:clamp(18px,4vh,42px) auto 0;
  height:0;padding-top:74.625%;overflow:hidden;
  transition:padding-top .5s cubic-bezier(.4,0,.2,1)}
.pit.shade{padding-top:41%}
.stage{position:absolute;inset:0;overflow:hidden;will-change:transform}
.stage img.head{position:absolute;inset:0;width:100%;height:100%;display:block}
.lay{position:absolute;background-repeat:no-repeat;transform-origin:50% 50%;
  will-change:transform;backface-visibility:hidden;pointer-events:none}
.rd{border-radius:50%}
.soft{-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 38%,rgba(0,0,0,0) 74%);
      mask-image:radial-gradient(ellipse at 50% 50%,#000 38%,rgba(0,0,0,0) 74%)}
.dsoft{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 70%,rgba(0,0,0,0) 97%);
       mask-image:radial-gradient(circle at 50% 50%,#000 70%,rgba(0,0,0,0) 97%)}
.scr{position:absolute;overflow:hidden;background:#010301}
.scr video,.scr canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scr video{object-fit:cover;transition:opacity .45s linear}
.scr .pezzo-tela{transition:opacity .45s linear}
.ctl{position:absolute;padding:0;margin:0;border:0;background-repeat:no-repeat;
  background-color:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:transform .09s ease,filter .12s ease,box-shadow .2s ease;transform-origin:50% 50%}
.ctl.rd{border-radius:50%}
.ctl:hover{filter:brightness(1.14) saturate(1.06)}
.ctl:active{transform:scale(.93);filter:brightness(.84)}
.ctl:focus-visible{outline:3px solid #06230A;outline-offset:3px;z-index:5}
.ctl.lit{filter:brightness(1.24) saturate(1.25);box-shadow:0 0 26px 3px rgba(168,85,247,.55)}
/* ---- the rest of the rig: pads, sliders, windowshade, power ---- */
.ctl.pad:active{transform:scale(.975)}
.ctl.pad.bump{transform:scale(1.035);filter:brightness(1.2)}
.slot{position:absolute}
.slot input{position:absolute;inset:-14px -6px;width:calc(100% + 12px);height:calc(100% + 28px);
  margin:0;opacity:0;cursor:ew-resize}
.slot input:focus-visible + .knob{outline:2px solid #06230A;outline-offset:3px}
.knob{position:absolute;top:0;will-change:transform;background-repeat:no-repeat;pointer-events:none}
/* the photograph has no bar under the knob, so when the knob leaves we rebuild it:
   the same bar sampled 128 px along (four of its 32 px segments, so sheen and ticks
   land in phase), capped left like the real trough and faded out on the right */
.patch{position:absolute;background-repeat:no-repeat;pointer-events:none;
  border-radius:20% 0 0 20% / 50% 0 0 50%;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 70%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 70%,rgba(0,0,0,0) 100%)}
/* the eye knobs (2 Oct): vertical slots, the knob is a window onto the photo like the others */
.slot.vslot{cursor:ns-resize;touch-action:none}
.slot.vslot:focus-visible{outline:2px solid #06230A;outline-offset:3px}
.slot.vslot .knob{width:100%}
.patch.vpatch{border-radius:0;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 25%,#000 75%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 25%,#000 75%,rgba(0,0,0,0) 100%)}
/* zoom: the forehead screen comes forward over the face */
.scr{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s;transform-origin:50% 50%}
.pit.zoom .scr{transform:scale(1.85);z-index:7;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 2px rgba(38,235,28,.6)}
/* lo spruzzo: four white flashes over the room, one bar long at 124 */
.rana.lampo{animation:lampo-rana .97s steps(1,end) 1}
@keyframes lampo-rana{0%,25%,50%,75%{background-color:#FFFFFF}12%,37%,62%,87%,100%{background-color:var(--verde)}}
.rana.notte.lampo{animation:lampo-notte .97s steps(1,end) 1}
@keyframes lampo-notte{0%,25%,50%,75%{background-color:#F2FFEF}12%,37%,62%,87%,100%{background-color:#050705}}
@media(prefers-reduced-motion:reduce){.rana.lampo,.rana.notte.lampo{animation:none}.scr{transition:none}}
.wake{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;display:none}
.pit.off .wake{display:block}
.pit.off .ctl:not(.wake){pointer-events:none}
.pit.off .stage{filter:saturate(.16) brightness(.28)}

/* ---------- la finestra — the full product film in a window over the page ---------- */
.finestra{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:clamp(12px,3vw,40px);opacity:0;transition:opacity .34s ease}
.finestra[hidden]{display:none}
.finestra.aperta{opacity:1}
.finestra-velo{position:absolute;inset:0;background:rgba(5,7,5,.92);cursor:pointer}
.finestra-corpo{position:relative;margin:0;width:min(1120px,100%);max-height:100%;display:flex;flex-direction:column;
  transform:translateY(12px) scale(.985);transition:transform .42s cubic-bezier(.16,1,.3,1)}
.finestra.aperta .finestra-corpo{transform:none}
.finestra-corpo video{display:block;width:100%;height:auto;max-height:calc(100svh - clamp(80px,14vh,140px));object-fit:contain;
  background:#000;border:1px solid rgba(255,225,0,.45)}
.finestra-dida{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:12px 2px 0;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--giallo)}
.finestra-dida b{font-weight:700}
.finestra-dida a{color:var(--giallo);text-decoration:none}
.finestra-dida a .bil{flex-direction:row;align-items:baseline;gap:.9em}
.finestra-dida a .bil > [lang]{font-size:10px}
.finestra-dida a:hover{color:var(--bianco)}
.finestra-chiudi{position:absolute;right:0;top:-40px;width:30px;height:30px;border:0;background:transparent;padding:0;cursor:pointer;z-index:2}
.finestra-chiudi i{position:absolute;left:3px;right:3px;top:14px;height:1.5px;background:var(--giallo);border-radius:2px}
.finestra-chiudi i:nth-child(1){transform:rotate(45deg)}
.finestra-chiudi i:nth-child(2){transform:rotate(-45deg)}
.finestra-chiudi:hover i{background:var(--bianco)}
.finestra-chiudi:focus-visible{outline:2px solid var(--giallo);outline-offset:4px}
@media(max-width:640px){.finestra-chiudi{top:-38px;right:-4px}}
@media(prefers-reduced-motion:reduce){.finestra,.finestra-corpo{transition:none}}

/* ---------- 02 · LA CASA ---------- */
.casa{position:relative;min-height:100svh;overflow:hidden;background:#1E93C8;
  display:flex;align-items:center;padding:clamp(80px,12vh,140px) clamp(14px,4vw,48px)}
.casa .plate{position:absolute;inset:-5% 0;background:#1E93C8;will-change:transform}
.casa .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
/* on a phone the statue sits behind the type, so give the type a ground
   rather than fading the statue — the colour is the argument */
.casa .scrim{position:absolute;inset:0;z-index:1;display:none;
  background:linear-gradient(180deg,rgba(4,26,40,.24) 0%,rgba(4,26,40,.52) 42%,rgba(4,26,40,.80) 100%)}
@media(max-width:820px){
  .casa{align-items:flex-end;padding-bottom:clamp(40px,9vh,80px)}
  .casa .film{object-position:58% 16%}
  .casa .scrim{display:block}
}
.casa .cta{position:relative;z-index:2;width:100%;max-width:560px}
.casa .cta form{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin:0}
.casa .cta .sito-web{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.casa .cta input{flex:1 1 220px;min-width:0;border:1.5px solid var(--giallo);
  background:rgba(4,26,40,.28);color:var(--giallo);font:inherit;font-size:14px;
  padding:14px;border-radius:0;-webkit-appearance:none;appearance:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.casa .cta input::placeholder{color:rgba(255,225,0,.62)}
.casa .cta input:focus{outline:2px solid var(--giallo);outline-offset:2px}
.casa .cta button{border:1.5px solid var(--giallo);background:var(--giallo);color:var(--inchiostro);
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:14px 26px;cursor:pointer;border-radius:0;transition:background-color .15s,color .15s}
.casa .cta button:hover{background:transparent;color:var(--giallo)}
.casa .cta form[hidden]{display:none}
.casa .cta button:disabled{opacity:.5;cursor:default}
.casa .cta button:focus-visible{outline:2px solid var(--giallo);outline-offset:3px}
.casa .say{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--giallo);min-height:1.2em;
  text-shadow:0 1px 8px rgba(4,26,40,.6)}
.casa .say.bad{color:#FFFFFF}
.casa .cta button .bil{align-items:center;gap:.2em}

/* ---------- il piede — the house proves it is a company: the mark, three quiet columns,
   the legal line. Nero, giallo hairlines, 10 px caps. Nothing decorative, nothing we cannot stand behind. */
.piede{background:var(--nero);color:#C9D3C7;padding:clamp(48px,8vh,88px) clamp(14px,4vw,48px) calc(28px + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(255,225,0,.28)}
.piede-casa{margin-bottom:clamp(30px,5vh,52px)}
.piede-segno{font-family:Marcellus,"Times New Roman",serif;color:var(--giallo);text-transform:uppercase;
  letter-spacing:.26em;font-size:clamp(17px,1.5vw,22px);line-height:1;text-decoration:none}
.piede-colonne{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,56px);max-width:1280px}
.piede-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  border-top:1px solid rgba(255,225,0,.22);padding-top:16px}
.piede-col h3{margin:0 0 6px;font-size:9px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,225,0,.72)}
.piede-col h3 .bil{flex-direction:row;align-items:baseline;gap:.9em}
.piede-col h3 .bil > [lang]{font-size:9px}
.piede-col a{color:#E6EDE4;text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.02em;line-height:1.2;transition:color .15s}
.piede-col a .bil{gap:.14em}
.piede-col a .bil > [lang]{font-size:13px}
html[lang="it"] .piede-col a .bil > [lang="en"],html[lang="en"] .piede-col a .bil > [lang="it"]{font-size:10px;opacity:.5;font-weight:400;letter-spacing:.04em}
.piede-col a:hover{color:var(--giallo)}
.piede-col a:focus-visible{outline:1px solid var(--giallo);outline-offset:4px}
.piede-colofone{margin:clamp(36px,6vh,64px) 0 0;padding-top:14px;border-top:1px solid rgba(255,225,0,.22);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#6E7A6C;font-variant-numeric:tabular-nums}
.piede-colofone .sep{margin:0 .9em}
.piede-colofone .bil{flex-direction:row;align-items:baseline;gap:.9em;flex-wrap:wrap}
.piede-colofone .bil > [lang]{font-size:9.5px}
html[lang="it"] .piede-colofone .bil > [lang="en"],html[lang="en"] .piede-colofone .bil > [lang="it"]{opacity:.55}
@media(max-width:640px){
  .piede-colonne{grid-template-columns:1fr;gap:22px}
  .piede-colofone{display:block;line-height:1.9}
  .piede-colofone .sep{display:none}
  .piede-colofone .bil{display:flex;flex-direction:column;gap:.2em}
}

/* ---------- le pagine — small print and contact, on nero ---------- */
.pagina-barra{position:relative;padding-bottom:0}
.pagina{max-width:720px;margin:0 auto;padding:clamp(28px,6vh,64px) clamp(14px,4vw,48px) clamp(64px,10vh,110px);color:#E6EDE4}
.pagina-titolo{margin:0 0 10px;font-family:Marcellus,"Times New Roman",serif;font-weight:400;color:var(--giallo);
  font-size:clamp(30px,4.6vw,52px);line-height:1.05;letter-spacing:.02em}
.pagina-titolo .bil{gap:.25em}
.pagina-titolo .bil > [lang]{font-family:Marcellus,"Times New Roman",serif}
html[lang="it"] .pagina-titolo .bil > [lang="en"],html[lang="en"] .pagina-titolo .bil > [lang="it"]{font-size:.42em;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.pagina-sotto{margin:0 0 clamp(30px,5vh,48px);font-size:15px;color:#C9D3C7}
.pagina-sotto .bil{gap:.3em}
.pagina-sez{border-top:1px solid rgba(255,225,0,.22);padding:clamp(18px,3vh,28px) 0}
.pagina-sez h2{margin:0 0 14px;font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,225,0,.78)}
.pagina-sez h2 .bil{flex-direction:row;align-items:baseline;gap:.9em;flex-wrap:wrap}
.pagina-sez h2 .bil > [lang]{font-size:10px}
.pagina-sez p{margin:0 0 18px;font-size:15px;line-height:1.55;max-width:62ch}
.pagina-sez p:last-child{margin-bottom:0}
.pagina-sez p .bil{display:flex;gap:.55em;line-height:1.55}
html[lang="it"] .pagina-sez p .bil > [lang="en"],html[lang="en"] .pagina-sez p .bil > [lang="it"]{font-size:12.5px;line-height:1.55;opacity:.55}
.pagina-agg{margin:clamp(24px,4vh,40px) 0 0;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#6E7A6C}
.pagina-agg .bil{flex-direction:row;gap:.9em}
.pagina-agg .bil > [lang]{font-size:9.5px}
.contatto{display:flex;flex-direction:column;gap:10px;max-width:560px;border-top:1px solid rgba(255,225,0,.22);padding-top:clamp(18px,3vh,28px)}
.contatto input,.contatto textarea{border:1.5px solid var(--giallo);background:rgba(255,225,0,.04);color:var(--giallo);
  font:inherit;font-size:14px;padding:14px;border-radius:0;-webkit-appearance:none;appearance:none;resize:vertical;min-width:0}
.contatto ::placeholder{color:rgba(255,225,0,.55)}
.contatto input:focus,.contatto textarea:focus{outline:2px solid var(--giallo);outline-offset:2px}
.contatto button{align-self:flex-start;border:1.5px solid var(--giallo);background:var(--giallo);color:var(--inchiostro);
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:14px 26px;cursor:pointer;border-radius:0;
  transition:background-color .15s,color .15s}
.contatto button .bil{align-items:center;gap:.2em}
.contatto button:hover{background:transparent;color:var(--giallo)}
.contatto button:disabled{opacity:.5;cursor:default}
.contatto button:focus-visible{outline:2px solid var(--giallo);outline-offset:3px}
.pagina-say{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--giallo);min-height:1.2em}
.pagina-say.bad{color:#FFFFFF}

/* elements are visible at rest; JS opts them into the reveal */
.rise.armed{opacity:0;transform:translateY(18px)}
.rise.armed.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
@media(prefers-reduced-motion:reduce){
  .riva .plate,.cue .bar,.mark.settle{animation:none!important}
  .rise.armed{opacity:1!important;transform:none!important}
  *{transition-duration:.01ms!important}
}

/* ---------- 02 · IL ROSPO — the 3D view. Nero, so gold and pave carry it ---------- */
.rospo{position:relative;height:100svh;min-height:560px;background:var(--nero);overflow:hidden}
.rospo .campo{position:absolute;inset:0}

html body{background:var(--nero);cursor:auto}
/* ---------- this page lives inside an app whose global sheet still carries
   VOEO's pink cursors (some with !important). Neutralise them here. ---------- */
body{cursor:auto;background:var(--nero)}
body .scr canvas, body .scr{cursor:pointer !important}
body .rospo canvas{cursor:grab !important}
body .rospo canvas:active{cursor:grabbing !important}
body .slot input{cursor:ew-resize !important}
body .ctl{cursor:pointer !important}

/* ---------- 02 · HEQET — the stone you choose colours the page ----------
   The scheme lives in four variables set from the selection (HeqetSection.tsx):
   --h-ground, --h-ink, --h-glow (rgb triplet). Defaults are Gioielleria · smeraldo,
   the variant the page opens on, so the first paint is already right. */
:root{--h-ground:#274B25;--h-ink:#D6F7D2;--h-glow:110,255,140}
/* la pista — the club rig under the piece. One black-and-white loop; the ground gives it its colour.
   The blend sits on the wrapper (no z-index: a z-index would make it its own stacking context and
   the light would blend with nothing). Screen = the room stays the tinta, the beams add light;
   then .heqet-tinta re-hues that light toward the stone so the beams are coloured, not white. */
.heqet-pista{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  mix-blend-mode:var(--pista-blend,screen);opacity:var(--pista-alpha,1)}
.heqet-pista video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.heqet-tinta{position:absolute;inset:0;pointer-events:none;background:var(--h-ground);
  mix-blend-mode:color;opacity:var(--tinta-alpha,.85)}
.heqet > :not(.heqet-pista):not(.heqet-tinta){position:relative;z-index:1}
.heqet{position:relative;background:var(--h-ground);color:var(--h-ink);isolation:isolate;
  padding-block:clamp(72px,12vh,130px) clamp(56px,10vh,110px);
  padding-inline:clamp(14px,4vw,48px);overflow:hidden;
  transition:background-color .6s cubic-bezier(.4,0,.2,1),color .6s cubic-bezier(.4,0,.2,1)}
.heqet-titolo{margin:0 auto;display:flex;justify-content:center}
.heqet-titolo .alone video{display:block;width:min(640px,86vw);height:auto;aspect-ratio:3/1}

/* ---- the edge light: tight and bright on the border, bleeding out; now and then a
   strike — two quick flares, like lightning, then back to the hum ---- */
.alone{display:block;
  filter:drop-shadow(0 0 1px rgba(var(--h-glow),.95)) drop-shadow(0 0 7px rgba(var(--h-glow),.55)) drop-shadow(0 0 22px rgba(var(--h-glow),.32));
  animation:lampo 8s linear infinite}
.alone video{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@keyframes lampo{
  0%,86%,100%{filter:drop-shadow(0 0 1px rgba(var(--h-glow),.95)) drop-shadow(0 0 7px rgba(var(--h-glow),.55)) drop-shadow(0 0 22px rgba(var(--h-glow),.32))}
  87.5%{filter:drop-shadow(0 0 2px rgba(var(--h-glow),1)) drop-shadow(0 0 13px rgba(var(--h-glow),.95)) drop-shadow(0 0 42px rgba(var(--h-glow),.7))}
  89%{filter:drop-shadow(0 0 1px rgba(var(--h-glow),.9)) drop-shadow(0 0 6px rgba(var(--h-glow),.45)) drop-shadow(0 0 18px rgba(var(--h-glow),.25))}
  90.5%{filter:drop-shadow(0 0 2.5px rgba(var(--h-glow),1)) drop-shadow(0 0 16px rgba(var(--h-glow),1)) drop-shadow(0 0 54px rgba(var(--h-glow),.8))}
}
.heqet-pietra .alone{width:100%;height:100%;
  filter:drop-shadow(0 0 1px rgba(var(--h-glow),.9)) drop-shadow(0 0 5px rgba(var(--h-glow),.5));animation:none}
.heqet-pietra.on .alone{animation:lampo 8s linear infinite}
.heqet-pietra .alone video{width:100%;height:100%;display:block;object-fit:contain}
/* the frog gets the same light, held steady (animating a filter over WebGL is costly) */
.heqet-scena{position:relative;height:clamp(360px,62vh,640px);touch-action:pan-y;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.heqet-scena > div:first-child{filter:drop-shadow(0 0 2px rgba(var(--h-glow),.6)) drop-shadow(0 0 26px rgba(var(--h-glow),.35))}
/* Prossimamente (v2, Ludwig: "cleaner, ravey, technoish — fashionable, not cartoonish").
   A slim status line across the piece, set like a display readout: hairline frame, frosted
   ground in the page's own colour, spaced caps in the scheme ink, and one LED in the
   complementary tinta blinking at 124 bpm — the tempo Il Lettore plays at. A press strobes it. */
.heqet-timbro{position:absolute;left:50%;top:50%;z-index:3;margin:0;pointer-events:none;
  display:flex;align-items:center;gap:12px;white-space:nowrap;
  padding:9px 16px 9px 14px;color:var(--h-ink);
  background:color-mix(in srgb,var(--h-ground) 62%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--h-ink) 38%,transparent);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:500;font-size:11px;
  letter-spacing:.42em;text-transform:uppercase;font-variant-numeric:tabular-nums;line-height:1;
  opacity:0;transform:translate(-50%,-50%);transition:opacity .22s ease-out,letter-spacing .5s cubic-bezier(.16,1,.3,1)}
.heqet-timbro::before{content:"";width:6px;height:6px;flex:none;background:var(--t-bg,#FF2D8E);
  box-shadow:0 0 8px var(--t-bg,#FF2D8E);animation:led .968s steps(1,end) infinite}
.heqet-timbro .bil{flex-direction:row;align-items:baseline;gap:1.1em}
.heqet-timbro .bil > *{font-size:inherit!important}
html[lang="it"] .heqet-timbro [lang="en"],html[lang="en"] .heqet-timbro [lang="it"]{opacity:.5}
.heqet-scena:not(.vista):not(.premuta) .heqet-timbro{letter-spacing:.7em}
.heqet-scena.vista .heqet-timbro,.heqet-scena.premuta .heqet-timbro{opacity:1}
.heqet-scena.premuta .heqet-timbro{animation:strobo .36s steps(2,end) 1}
@keyframes led{0%{opacity:1}50%{opacity:.15}}
@keyframes strobo{0%,50%{opacity:.2}100%{opacity:1}}
@media(max-width:560px){.heqet-timbro{font-size:10px;letter-spacing:.3em;padding:8px 12px}.heqet-timbro .bil > [lang="en"]{display:none}html[lang="en"] .heqet-timbro .bil > [lang="en"]{display:block}html[lang="en"] .heqet-timbro .bil > [lang="it"]{display:none}}
@media(prefers-reduced-motion:reduce){.heqet-timbro,.heqet-timbro::before{animation:none!important;transition:opacity .2s}}

.heqet-griglia{display:grid;gap:clamp(24px,4vw,56px);align-items:center;
  max-width:1280px;margin:clamp(8px,2vh,24px) auto 0;
  grid-template-columns:minmax(170px,1fr) minmax(0,2.2fr) minmax(170px,1fr)}
.heqet-pietre{display:flex;flex-direction:column;gap:clamp(22px,4vh,40px)}
.heqet-etich,.heqet-fatti dt{margin:0 0 10px;font-size:10px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--h-ink) 76%,transparent)}
.heqet-fila{display:flex;gap:14px}
/* never opacity on a coloured ground: it mixes the stone into it (emerald turns mauve) */
.heqet-pietra{position:relative;width:62px;aspect-ratio:3/4;padding:0;border:0;
  background:transparent;cursor:pointer;transform:scale(.86);
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.heqet-pietra:hover{transform:scale(.94)}
.heqet-pietra.on{transform:translateY(-3px) scale(1)}
.heqet-pietra.on::after{content:"";position:absolute;left:18%;right:18%;bottom:-10px;
  height:1.5px;border-radius:2px;background:var(--h-ink);transition:background-color .6s}
.heqet-pietra:focus-visible{outline:2px solid var(--h-ink);outline-offset:4px}
/* i fatti (1 Oct): a ledger. One left edge for everything; a hairline between rows; the heading
   small, spaced, muted; the answer large and in the ink with its English a lesser line under it;
   where the answer has a colour — body stone, eyes, metal — a swatch sits before the words. */
.heqet-fatti{margin:0;display:flex;flex-direction:column;text-align:left;
  padding:4px clamp(14px,1.4vw,20px) 6px;
  background:color-mix(in srgb,var(--h-ground) 88%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--h-ink) 32%,transparent);
  transition:background-color .6s cubic-bezier(.4,0,.2,1)}
.heqet-fatti .fatto{position:relative;padding:clamp(11px,1.7vh,16px) 0;
  border-bottom:1px solid color-mix(in srgb,var(--h-ink) 24%,transparent)}
.heqet-fatti .fatto:last-child{border-bottom:0}
.heqet-fatti dt{margin:0 0 5px;font-size:9.5px;letter-spacing:.22em;font-weight:700;
  color:color-mix(in srgb,var(--h-ink) 72%,transparent)}
.heqet-fatti dt .bil{flex-direction:row;align-items:baseline;gap:.9em}
.heqet-fatti dt .bil > [lang]{font-size:9px}
html[lang="it"] .heqet-fatti dt .bil > [lang="en"],html[lang="en"] .heqet-fatti dt .bil > [lang="it"]{opacity:.6}
.heqet-fatti dd{margin:0;display:flex;align-items:baseline;gap:10px;
  font-size:20px;font-weight:700;letter-spacing:.005em;color:var(--h-ink);line-height:1.15}
.heqet-fatti dd .bil{gap:.18em;align-items:flex-start}
html[lang="it"] .heqet-fatti dd .bil > [lang="en"],html[lang="en"] .heqet-fatti dd .bil > [lang="it"]{
  font-size:11.5px;font-weight:500;letter-spacing:.04em;opacity:.7}
.heqet-fatti .fatto[style] dd::before{content:"";flex:0 0 auto;width:10px;height:10px;border-radius:50%;
  transform:translateY(-1px);background:var(--col);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--h-ink) 35%,transparent),0 0 10px color-mix(in srgb,var(--col) 60%,transparent)}
.heqet-fatti .prezzo dd{font-size:26px;letter-spacing:-.01em}
.heqet-cta{display:flex;justify-content:flex-start;margin-top:clamp(6px,1.4vh,14px)}
.heqet-acquista{border:1.5px solid var(--h-ink);background:var(--h-ink);color:var(--h-ground);
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:14px 26px;cursor:pointer;border-radius:0;
  transition:background-color .6s,color .6s,border-color .6s}
.heqet-acquista .bil{align-items:center}
.heqet-acquista:hover{background:transparent;color:var(--h-ink)}
.heqet-acquista:disabled{opacity:.5;cursor:default}
.heqet-acquista:focus-visible{outline:2px solid var(--h-ink);outline-offset:3px}
body .heqet canvas{cursor:grab !important}
body .heqet canvas:active{cursor:grabbing !important}
/* the giradischi is fixed at the right edge: the grid stops short of it on wide screens */
@media(min-width:861px){.heqet-griglia{padding-right:68px}}
@media(max-width:860px){
  .heqet-griglia{grid-template-columns:1fr}
  .heqet-scena{order:-1;height:clamp(300px,52vh,460px)}
  .heqet-pietre{flex-direction:row;justify-content:center;gap:34px}
  .heqet-etich{text-align:center}
  .heqet-fatti{max-width:380px;width:100%;margin:0 auto}
  .heqet-cta{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.alone,.heqet-pietra.on .alone{animation:none}}

/* ---- the bar takes the scheme's ink while it sits over Heqet ---- */
body.heqet-on:not(.open) .menu-btn i{background:var(--h-ink)}
body.heqet-on:not(.open) .segno{color:var(--h-ink)}
body.heqet-on:not(.open) .lingua .cod{color:var(--h-ink)}
/* the tricolore bar that matches the ground goes ink, so the flag never loses a stripe */
html[data-schema="verde"] body.heqet-on:not(.open) .lingua .tri i:nth-child(1),
html[data-schema="smeraldo"] body.heqet-on:not(.open) .lingua .tri i:nth-child(1){background:var(--h-ink)}
html[data-schema="rosa"] body.heqet-on:not(.open) .lingua .tri i:nth-child(3){background:var(--h-ink)}
html[data-schema="diamante"] body.heqet-on:not(.open) .lingua .tri i:nth-child(2){background:var(--h-ink)}

/* ---------- il cristallo — the pink crystal, hovering bottom-right ----------
   Always pink (its own colour, not the page's scheme): its light is set locally, so the
   shared edge-light keyframes glow pink here whatever stone is selected. */
.cristallo{position:fixed;right:clamp(10px,2vw,26px);bottom:calc(clamp(10px,2vw,24px) + env(safe-area-inset-bottom,0px));
  z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  --h-glow:255,120,190;--c-rosa:#FF2D8E;--c-vino:#3D0020;--c-campo:#FFD3E8;--c-blu:#1B44D8;pointer-events:none}
.cristallo > *{pointer-events:auto}
body.open .cristallo{opacity:0;pointer-events:none}
.cristallo-pietra{height:clamp(40px,3.4vw,50px);aspect-ratio:46/104;padding:0;border:0;background:transparent;
  cursor:pointer;animation:librarsi 4.2s ease-in-out infinite}
.cristallo-pietra.uno{height:auto;width:clamp(66px,6vw,88px);aspect-ratio:1}
.cristallo-pietra .alone{width:100%;height:100%}
.cristallo-pietra video,.cristallo-pietra img{width:100%;height:100%;display:block;object-fit:contain}
.cristallo-pietra:focus-visible{outline:2px solid var(--c-rosa);outline-offset:4px;border-radius:4px}
.cristallo.aperto .cristallo-pietra{animation-play-state:paused}
@keyframes librarsi{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.cristallo-pannello{width:min(340px,calc(100vw - 24px));max-height:min(440px,62vh);
  display:flex;flex-direction:column;overflow:hidden;
  /* 8 Oct (Ludwig: black on hot pink tires the eye). Measured: cosmico on hot pink is only 2.1:1 —
     worse. Cosmico on a pale rosa field is 5.5:1 (AA); the hot pink stays as the frame and the glow. */
  background:var(--c-campo);color:var(--c-blu);border:2px solid var(--c-rosa);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 0 0 1px rgba(255,210,232,.55),0 0 34px rgba(255,120,190,.55),0 18px 50px rgba(61,0,32,.35);
  opacity:0;transform:translateY(10px) scale(.97);transform-origin:100% 100%;visibility:hidden;
  transition:opacity .28s,transform .34s cubic-bezier(.16,1,.3,1),visibility 0s .34s}
.cristallo.aperto .cristallo-pannello{opacity:1;transform:none;visibility:visible;
  transition:opacity .28s,transform .34s cubic-bezier(.16,1,.3,1)}
.cristallo-lista{flex:0 1 auto;min-height:96px;overflow-y:auto;overscroll-behavior:contain;padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px}
.cristallo-msg{margin:0;font-size:14px;line-height:1.4;max-width:88%;flex:none;display:block;white-space:normal;overflow-wrap:anywhere}
.cristallo-msg .bil{display:flex;flex-direction:column;align-items:flex-start;line-height:1.4;width:100%}
.cristallo-msg .bil > *{white-space:normal}
.cristallo-msg.oracolo{align-self:flex-start}
.cristallo-msg.oracolo .bil{gap:.3em}
.cristallo-msg.tu{align-self:flex-end;text-align:right;font-weight:500;
  border-bottom:1px solid rgba(27,68,216,.35);padding-bottom:4px}
.cristallo-msg.pensa{display:flex;gap:5px;padding:6px 0}
.cristallo-msg.pensa span{width:5px;height:5px;border-radius:50%;background:var(--c-blu);
  animation:pensa 1.1s ease-in-out infinite}
.cristallo-msg.pensa span:nth-child(2){animation-delay:.15s}
.cristallo-msg.pensa span:nth-child(3){animation-delay:.3s}
@keyframes pensa{0%,100%{opacity:.25}50%{opacity:1}}
.cristallo-form{flex:none;border-top:2px solid var(--c-rosa);padding:10px 14px}
.cristallo-form input{width:100%;border:0;background:transparent;color:var(--c-blu);
  font:inherit;font-size:14px;padding:6px 2px;outline:none}
.cristallo-form input::placeholder{color:rgba(27,68,216,.55)}
.cristallo-form:focus-within{box-shadow:inset 0 -2px 0 var(--c-blu)}
@media(prefers-reduced-motion:reduce){.cristallo-pietra,.cristallo-msg.pensa span{animation:none}}

/* ---------- il consenso — the one cookie, asked once, in the house's voice (30 Oct) ---------- */
.consenso{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:58;
  width:min(560px,calc(100vw - 24px));display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 14px 12px 16px;background:var(--nero);color:#E6EDE4;border:1px solid rgba(255,225,0,.5);
  box-shadow:0 18px 50px rgba(0,0,0,.45)}
.consenso-testo{margin:0;font-size:12px;line-height:1.35;flex:1 1 240px}
.consenso-testo .bil{gap:.2em}
html[lang="it"] .consenso-testo .bil > [lang="en"],html[lang="en"] .consenso-testo .bil > [lang="it"]{font-size:10.5px;opacity:.6}
.consenso-tasti{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.consenso-si,.consenso-no{font:inherit;font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:9px 14px;border-radius:0;cursor:pointer;border:1.5px solid var(--giallo)}
.consenso-si{background:var(--giallo);color:var(--inchiostro)}
.consenso-si:hover{background:transparent;color:var(--giallo)}
.consenso-no{background:transparent;color:var(--giallo)}
.consenso-no:hover{color:var(--bianco);border-color:var(--bianco)}
.consenso-info{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#6E7A6C;text-decoration:none;margin-left:4px}
.consenso-info:hover{color:var(--giallo)}
.consenso-si:focus-visible,.consenso-no:focus-visible{outline:2px solid var(--giallo);outline-offset:3px}
.pagina .consenso-si .bil{flex-direction:row;align-items:baseline;gap:.9em}
.pagina .consenso-si .bil > [lang]{font-size:10px}