/* ==========================================================================
   rezin box — sistema visivo
   Tutto viene dall'oggetto: la scocca nera, la colata gialla sul tetto,
   il display a sette segmenti, la spia verde. Niente che il prodotto non abbia.
   Regole complete: /stile/
   ========================================================================== */

:root{
  /* colori — presi dal prodotto */
  --nero:#000000;          /* la scocca */
  --piano:#141414;         /* superfici sollevate sul nero */
  --resina:#FFC20E;        /* la colata e il marchio */
  --resina-cotta:#E8A100;  /* la resina in ombra: solo per stati attivi */
  --display:#F4F4F1;       /* il bianco del display */
  --fumo:#9C9C96;          /* testo secondario su nero */
  --fumo-su-resina:#5B4500;/* testo secondario su giallo */
  --riga:rgba(244,244,241,.14);
  --spia:#35D07F;          /* la spia verde: solo stato "pronto / disponibile" */

  /* temperatura — ogni fascia ha il suo colore, ovunque nel sito */
  --freddo:#7CC8FF;
  --caldo:var(--resina);
  --rapida:#FF6B2C;

  /* tipografia */
  --f-titolo:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-testo:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* forma — il raggio della scocca (30 mm su 230) in proporzione */
  --r-scocca:28px;
  --r-piccolo:14px;
  --r-pillola:999px;

  --gut:clamp(16px,4vw,56px);
  --max:1280px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--nero);-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{background:var(--nero);color:var(--display);font-family:var(--f-testo);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
p{text-wrap:pretty;max-width:62ch}
::selection{background:var(--resina);color:var(--nero)}
:focus-visible{outline:3px solid var(--resina);outline-offset:3px;border-radius:6px}
.su-resina :focus-visible{outline-color:var(--nero)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salta{position:absolute;left:var(--gut);top:-60px;z-index:200;background:var(--resina);color:var(--nero);
  padding:10px 16px;border-radius:var(--r-pillola);font-weight:600;text-decoration:none}
.salta:focus{top:12px}

/* --------------------------------------------------------------- tipografia */
.t-1,.t-2,.t-3{font-family:var(--f-titolo);font-weight:700;text-wrap:balance}
.t-1{font-size:clamp(2.9rem,7.4vw,6.6rem);line-height:.94;letter-spacing:-.048em}
.t-2{font-size:clamp(2.1rem,4.6vw,4rem);line-height:1;letter-spacing:-.04em}
.t-3{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.15;letter-spacing:-.025em}
.attacco{font-size:clamp(1.08rem,1.4vw,1.3rem);line-height:1.5;color:var(--fumo);max-width:46ch}
.su-resina .attacco{color:var(--fumo-su-resina)}
.nota{font-size:.88rem;color:var(--fumo)}
.su-resina .nota{color:var(--fumo-su-resina)}
.num{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ layout */
.contenitore{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sezione{padding:clamp(96px,13vw,168px) 0}
.sezione--stretta{padding:clamp(64px,8vw,104px) 0}
.su-resina{background:var(--resina);color:var(--nero);position:relative}
.su-piano{background:var(--piano)}
.griglia{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,32px)}
.pila>*+*{margin-top:clamp(16px,2vw,24px)}
.riga-sopra{border-top:1px solid var(--riga)}

/* -------------------------------------------------------------- navigazione */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(0,0,0,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--riga);
  transition:background .35s var(--ease),border-color .35s var(--ease)}
/* sopra il film di apertura la barra non ha fondo: il film è la prima cosa */
.nav.sul-film:not([data-aperta]){background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav .contenitore{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:68px}
.nav-marchio{display:block;flex:0 0 auto;margin-right:auto}
.nav-marchio img{height:44px;width:auto;margin:-6px 0 -10px}
.nav-voci{display:flex;gap:clamp(18px,2.6vw,36px);list-style:none;align-items:center}
.nav-voci a{text-decoration:none;font-weight:500;font-size:.96rem;color:var(--fumo);
  padding:8px 0;position:relative;transition:color .2s var(--ease)}
.nav-voci a:hover,.nav-voci a[aria-current="page"]{color:var(--display)}
/* la voce attiva ha una goccia sotto, non una sottolineatura */
.nav-voci a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-6px;width:7px;height:10px;
  margin-left:-3.5px;background:var(--resina);border-radius:50% 50% 50% 50%/40% 40% 60% 60%}
.nav-apri{display:none;width:44px;height:44px;margin-right:-10px;align-items:center;justify-content:center}
.nav-apri span:first-child,.nav-apri span:first-child::before{display:block;width:22px;height:2px;background:var(--display);position:relative;
  transition:transform .25s var(--ease)}
.nav-apri span:first-child::before{content:"";position:absolute;top:7px}
.nav[data-aperta] .nav-apri span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav[data-aperta] .nav-apri span:first-child::before{transform:translateY(-7px) rotate(-90deg)}
@media(max-width:820px){
  .nav-apri{display:flex}
  .nav-voci{position:fixed;inset:68px 0 auto 0;background:var(--nero);flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--gut) 24px;border-bottom:1px solid var(--riga);display:none}
  .nav[data-aperta] .nav-voci{display:flex}
  .nav-voci a{display:block;padding:16px 0;font-size:1.3rem;font-family:var(--f-titolo);font-weight:700;letter-spacing:-.02em;
    color:var(--display);border-bottom:1px solid var(--riga)}
  .nav-voci a[aria-current="page"]{color:var(--resina)}
  .nav-voci a[aria-current="page"]::after{display:none}
  .nav-voci li:last-child a{border:0}
  .nav .nav-compra{order:0}
}
main{padding-top:68px}

/* ----------------------------------------------------------------- pulsanti */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 26px;
  border-radius:var(--r-pillola);font-weight:600;font-size:1rem;text-decoration:none;letter-spacing:-.005em;
  background:var(--resina);color:var(--nero);border:2px solid var(--resina);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--resina-cotta);border-color:var(--resina-cotta)}
.btn:active{transform:scale(.98)}
.btn--vuoto{background:transparent;color:var(--display);border-color:rgba(244,244,241,.4)}
.btn--vuoto:hover{background:transparent;border-color:var(--display)}
.su-resina .btn{background:var(--nero);color:var(--resina);border-color:var(--nero)}
.su-resina .btn:hover{background:#262626;border-color:#262626}
.su-resina .btn--vuoto{background:transparent;color:var(--nero);border-color:rgba(0,0,0,.45)}
.su-resina .btn--vuoto:hover{border-color:var(--nero);background:transparent}
.btn--piccolo{min-height:40px;padding:0 18px;font-size:.92rem}
.azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,36px)}
.link{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;
  text-decoration-color:var(--resina)}
.link:hover{color:var(--resina)}
.su-resina .link{text-decoration-color:var(--nero)}
.su-resina .link:hover{color:var(--nero);text-decoration-thickness:3px}

/* -------------------------------------------------------- il readout (7 seg) */
rz-readout{display:inline-block;line-height:0;vertical-align:baseline}
rz-readout svg{height:1em;width:auto;overflow:visible}
rz-readout .spento{opacity:.09}
.su-resina rz-readout .spento{opacity:.12}
rz-readout:not(:defined){line-height:1;font-family:var(--f-titolo);font-weight:700}
.rd-freddo{color:var(--freddo)} .rd-caldo{color:var(--caldo)} .rd-rapida{color:var(--rapida)}

/* ---------------------------------------------------------------- la spia */
.spia{display:inline-flex;align-items:center;gap:10px;font-size:.9rem;color:var(--fumo)}
.spia::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--spia);
  box-shadow:0 0 0 4px rgba(53,208,127,.16)}

/* ---------------------------------------------------------------- la colata */
.colata{position:absolute;left:0;top:100%;width:100%;pointer-events:none;z-index:3;color:var(--resina)}
.colata path{fill:currentColor}
.su-resina+*{position:relative;z-index:1}

/* ------------------------------------------------------------- media / foto */
.cornice{border-radius:var(--r-scocca);overflow:hidden;background:var(--piano)}
.cornice img,.cornice video{width:100%;height:100%;object-fit:cover}
figcaption{font-size:.86rem;color:var(--fumo);margin-top:12px}

/* ------------------------------------------- il nastro dei collaboratori */
/* il nastro: i marchi scorrono lenti, si fermano sotto il cursore */
.nastro{position:relative;overflow:hidden;padding:clamp(24px,4vw,48px) 0 clamp(56px,7vw,88px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.nastro-fila{display:flex;align-items:flex-end;width:max-content;animation:nastro 60s linear infinite}
.nastro:hover .nastro-fila,.nastro:focus-within .nastro-fila{animation-play-state:paused}
@keyframes nastro{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marchio{flex:0 0 auto;margin-right:clamp(56px,7vw,120px);text-align:center}
.marchio img{height:clamp(92px,10vw,150px);width:auto;max-width:clamp(180px,20vw,300px);object-fit:contain;margin:0 auto;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.6))}
/* i marchi scuri sul nero: un alone di luce li stacca senza toccarne i colori */
.marchio.scuro img{filter:drop-shadow(0 0 10px rgba(244,244,241,.32)) drop-shadow(0 0 30px rgba(255,194,14,.14))}
a.marchio{text-decoration:none;display:block}
a.marchio:hover img{transform:scale(1.06)}
.marchio img{transition:transform .3s var(--ease)}
.marchio span{display:block;margin-top:14px;font-size:.88rem;color:var(--fumo)}
@media(prefers-reduced-motion:reduce){
  .nastro{-webkit-mask-image:none;mask-image:none}
  .nastro-fila{animation:none;width:100%;flex-wrap:wrap;justify-content:center;padding:0 var(--gut)}
  .marchio{margin:0 24px 28px}.marchio.copia{display:none}
}

/* ------------------------------------------------------------------ footer */
.piede{border-top:1px solid var(--riga);padding:clamp(56px,7vw,88px) 0 40px;margin-top:0}
.piede-griglia{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:32px}
.piede h2{font-size:.95rem;font-weight:600;margin-bottom:14px}
.piede ul{list-style:none}
.piede li+li{margin-top:8px}
.piede a{color:var(--fumo);text-decoration:none}
.piede a:hover{color:var(--display)}
.piede-motto{font-family:var(--f-titolo);font-weight:700;letter-spacing:-.02em;font-size:1.05rem;margin-top:18px}
.piede-fondo{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;margin-top:56px;
  padding-top:22px;border-top:1px solid var(--riga);font-size:.84rem;color:var(--fumo)}
.piede-marchio img{height:56px;width:auto;margin-left:-6px}
@media(max-width:760px){.piede-griglia{grid-template-columns:1fr 1fr}.piede-griglia>:first-child{grid-column:1/-1}}

/* --------------------------------------------------------------- FAQ comuni */
.domande{border-top:1px solid var(--riga)}
.domande details{border-bottom:1px solid var(--riga)}
.domande summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;min-height:44px;font-family:var(--f-titolo);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.08rem,1.6vw,1.3rem)}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:"";flex:0 0 auto;width:14px;height:14px;
  background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,
             linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;
  transition:transform .25s var(--ease)}
.domande details[open] summary::after{transform:rotate(45deg)}
.domande details[open] summary{color:var(--resina)}
.domande details p{padding:0 0 24px;color:var(--fumo)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}