/* ============================================================
   ZENITH — IL VESTITO DELLE PAGINE
   11 settembre 2026

   PERCHE' ESISTE
   Ogni pagina del sito (una per prodotto) ha la stessa barra, lo
   stesso menu, le stesse sezioni e lo stesso footer. Riscriverli
   ogni volta vuol dire ritrovarsi dieci pagine leggermente diverse.
   Questo file sta in /z/ e lo chiamano tutte:

       <link rel="stylesheet" href="/z/zenith-sito.css?v=...">
       <link rel="stylesheet" href="/z/zenith-dispositivi.css?v=...">
       <script src="/z/zenith-menu.js" defer></script>

   IL ?v= NON E' UN VEZZO: senza, il browser tiene in memoria il
   foglio vecchio e le modifiche non si vedono. Si alza la data a
   ogni modifica.

   LE REGOLE DI CASA CHE QUESTO FILE FA RISPETTARE
   - bianco + oro, tema unico: niente scuro, mai
   - logo in alto a SINISTRA, nome della pagina al CENTRO, menu a DESTRA
   - dentro lo schermo di un mockup i colori veri del prodotto,
     fuori siamo noi
   ============================================================ */

:root{
  --carta:#FBF9F5; --bianco:#FFFFFF;
  --ink:#1D1A16; --grigio:#6B655C; --grigio-ch:#B9B2A6;
  --oro:#C9A227; --oro-ch:#E9DCB4; --oro-sc:#8D6F14; --oro-sf:#FBF5E4;
  --linea:rgba(201,162,39,.28); --linea-g:#EDE8DC;
  --ombra:0 18px 50px rgba(29,26,22,.10);
  --titoli:"Cormorant Garamond",Georgia,serif;
  --script:"Great Vibes","Segoe Script",cursive;
  --testo:Montserrat,-apple-system,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
html{overflow-x:clip;max-width:100%}
body{overflow-x:clip;max-width:100%;position:relative;padding-top:64px}

body{margin:0;background:var(--carta);color:var(--ink);
  font-family:var(--testo);font-size:16px;line-height:1.62}
.dentro{max-width:1080px;margin:0 auto;padding:0 22px;position:relative}
img{max-width:100%}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

/* ---------- BARRA ---------- */
/* FISSA, non sticky: logo, titolo e menu restano su mentre si scorre.
   Lo spazio che occupa viene compensato col padding sul body, e le ancore
   si fermano sotto la barra invece che dietro (scroll-padding-top). */
.barra{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(251,249,245,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linea-g)}
/* flex, non griglia: con tre colonne uguali le voci di destra avevano solo
   meta' dello spazio e finivano sopra al titolo (o schiacciavano il logo a
   zero). Cosi' ognuno prende quello che gli serve e il titolo sta in mezzo. */
.barra .dentro{display:flex;align-items:center;gap:16px;
  gap:12px;min-height:64px}
.logo-barra{display:block;flex:0 0 auto}
.logo-barra img{width:106px;height:auto;display:block}
.barra .sezione{display:flex;align-items:center;gap:9px;text-decoration:none;
  flex:0 0 auto;margin-left:auto;margin-right:auto;color:var(--ink);
  font-family:var(--titoli);font-size:1.26rem;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;justify-self:center}
.barra .sezione b{color:var(--oro-sc);font-weight:600}
/* RETE DI SICUREZZA: un <svg> con la sola larghezza si stira a 150px.
   Vale per tutte le icone del sito, presenti e future. */
svg[class*="ic"],.divisore svg,.eti svg{height:auto;aspect-ratio:1}
.barra .ic{width:26px;height:26px;flex:0 0 auto;color:var(--oro)}
.lato-destro{flex:0 0 auto;display:flex;align-items:center;gap:18px;justify-self:end}
.barra nav{display:flex;gap:19px;align-items:center;flex-wrap:nowrap}
.barra nav a{color:var(--grigio);text-decoration:none;font-size:.75rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:500;padding:4px 0;border-bottom:2px solid transparent;
  white-space:nowrap}
.barra nav a:hover,.barra nav a:focus-visible{color:var(--ink);border-bottom-color:var(--oro)}
/* le voci della barra spariscono gia a 1100px: sulla home sono sette e
   a 1024 uscivano dallo schermo. Il pulsante del menu c e sempre. */
@media (max-width:1100px){ .barra nav{display:none} }
@media (max-width:620px){
  body{padding-top:58px}
  .barra .sezione{font-size:1.02rem;gap:7px} .barra .ic{width:21px;height:21px}
  .logo-barra img{width:74px} .barra .dentro{gap:8px}
}
@media (max-width:400px){
  .barra .sezione{font-size:.94rem;gap:6px} .barra .ic{width:19px;height:19px}
  .logo-barra img{width:66px}
}

/* ---------- MENU LATERALE ---------- */
/* il pulsante del menu si vede SEMPRE, anche sul computer: e' l unica
   porta verso le altre pagine che sta in alto, e senza di lui il sito
   sembra una pagina sola. Le voci nella barra restano per le sezioni. */
.apri-menu{display:block;position:relative;width:42px;height:42px;border:1px solid var(--oro);
  border-radius:13px;background:#fff;cursor:pointer;flex:0 0 auto;
  box-shadow:0 2px 10px rgba(201,162,39,.14)}
.apri-menu i{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);
  border-radius:2px;transition:.25s}
.apri-menu i:nth-child(1){top:13px}
.apri-menu i:nth-child(2){top:19px}
.apri-menu i:nth-child(3){top:25px}
body.menu-aperto .apri-menu i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-aperto .apri-menu i:nth-child(2){opacity:0}
body.menu-aperto .apri-menu i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.velo-menu{position:fixed;inset:0;background:rgba(29,26,22,.45);z-index:58;
  opacity:0;visibility:hidden;transition:.3s}
body.menu-aperto .velo-menu{opacity:1;visibility:visible}
/* galleggia, arrotondato e col filo d oro: non una lastra incollata */
.menu-lato{position:fixed;top:12px;right:12px;bottom:12px;height:auto;width:min(86%,330px);
  z-index:59;background:var(--bianco);border:1px solid var(--oro);border-radius:22px;
  box-shadow:0 26px 64px rgba(29,26,22,.30),0 0 0 1px rgba(201,162,39,.14);
  transform:translateX(calc(100% + 24px));opacity:0;
  transition:transform .34s cubic-bezier(.22,.8,.28,1),opacity .24s ease;
  padding:24px 22px;display:flex;flex-direction:column;overflow-y:auto;text-align:center}
body.menu-aperto .menu-lato{transform:translateX(0);opacity:1}
.menu-lato .logo-menu{display:block;margin:6px auto 16px}
.menu-lato .logo-menu img{width:132px;height:auto;display:block;margin:0 auto}
.menu-lato .tit{font-family:var(--titoli);font-size:1.42rem;font-weight:600;margin:0 0 2px}
.menu-lato .tit span{color:var(--oro-sc)}
.menu-lato .sotto{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grigio-ch);margin:0 0 18px}
.menu-lato .filo{height:1px;background:var(--linea);margin:0 auto 6px;width:60%}
.menu-lato a.voce{display:block;text-decoration:none;color:var(--ink);font-family:var(--titoli);
  font-size:1.24rem;padding:12px 0;border-bottom:1px solid var(--linea-g)}
.menu-lato a.voce em{display:block;font-family:var(--testo);font-style:normal;font-size:.68rem;
  color:var(--grigio-ch);margin-top:2px}
.menu-lato a.voce:hover,.menu-lato a.voce:focus-visible{color:var(--oro-sc)}
.menu-lato .piede{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:9px}
.menu-lato .piede a{display:block;text-decoration:none;border-radius:999px;padding:11px 14px;
  font-size:.8rem;font-weight:600}
.menu-lato .piede .su{border:1px solid var(--linea);color:var(--ink)}
.menu-lato .piede .sito{background:linear-gradient(135deg,#E6C86B,var(--oro) 40%,#B8912A 70%,#E0BD5E);
  color:#4A3A08}
/* (il pulsante e gia acceso sopra: qui restava la vecchia regola) */
/* il menu laterale vive anche sul computer: e la porta verso le altre
   pagine, e prima era spenta sopra i 980px (il pannello restava display:none
   e il pulsante non apriva niente). */

/* ---------- APERTURA ---------- */
.hero{padding:56px 0 32px;position:relative;overflow:hidden}
/* alone dorato dietro al titolo: fermo, non lampeggia. Serve a staccare
   l apertura dal resto senza mettere un fondo pieno. */
.hero::before{content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:min(900px,120%);height:120%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center,rgba(201,162,39,.13),rgba(201,162,39,0) 62%)}
.hero .dentro{position:relative;z-index:1}
.hero .dentro{display:grid;gap:40px;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){ .hero .dentro{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px} }
.occhiello{font-size:.71rem;letter-spacing:.22em;text-transform:uppercase;color:var(--oro-sc);
  font-weight:600;margin:0 0 16px;display:flex;align-items:center;gap:12px}
.occhiello::after{content:"";flex:1;height:1px;background:var(--linea);max-width:110px}
h1{font-family:var(--titoli);font-weight:500;font-size:clamp(2.3rem,5.8vw,3.8rem);
  line-height:1.06;margin:0 0 20px;letter-spacing:-.018em;text-wrap:balance}
h1 em{font-style:normal;color:var(--oro-sc)}
.occhio{font-size:1.03rem;color:var(--grigio);margin:0 0 24px;max-width:46ch}
.occhio b{color:var(--ink);font-weight:600}
.azioni{display:flex;gap:11px;flex-wrap:wrap}
.bottone{display:inline-block;text-decoration:none;border-radius:999px;padding:13px 25px;
  font-size:.88rem;font-weight:600}
.bottone{position:relative;overflow:hidden;
  transition:transform .22s ease,box-shadow .28s ease,border-color .22s ease}
.bottone--oro{background:linear-gradient(135deg,#E6C86B,var(--oro) 40%,#B8912A 70%,#E0BD5E);
  color:#4A3A08;box-shadow:0 8px 22px rgba(150,118,30,.28)}
/* il riflesso che attraversa l oro: lo stesso del pulsante dell invito */
.bottone--oro::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .65s ease}
.bottone--oro:hover::after,.bottone--oro:focus-visible::after{left:130%}
.bottone--vuoto{border:1px solid var(--linea);color:var(--ink);background:rgba(255,255,255,.6)}
.bottone--vuoto:hover{border-color:var(--oro);background:#fff}
.bottone:hover{transform:translateY(-2px)}
.bottone--oro:hover{box-shadow:0 12px 28px rgba(150,118,30,.34)}

/* ---------- SEZIONI ---------- */
section{padding:52px 0;position:relative}
.tit-sez{text-align:center;margin-bottom:36px;position:relative;z-index:1}
.tit-sez h2{font-family:var(--titoli);font-weight:500;font-size:clamp(1.9rem,4.4vw,2.8rem);
  margin:10px 0 12px;letter-spacing:-.015em;text-wrap:balance}
.tit-sez p{color:var(--grigio);margin:0 auto;max-width:54ch;font-size:1rem}
.tit-sez p b{color:var(--ink);font-weight:600}
.sfondo-oro{background:linear-gradient(#FFFDF8,var(--oro-sf))}
.divisore{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 0 2px;
  color:var(--oro)}
.divisore i{display:block;height:1px;width:min(120px,22vw);background:var(--linea)}
.divisore svg{width:28px;height:28px;flex:0 0 auto}

/* passi: testo e schermata affiancati, a specchio uno sì uno no */
.passi{display:grid;gap:36px}
.passo{display:grid;gap:28px;align-items:center;grid-template-columns:1fr}
@media (min-width:900px){
  .passo{grid-template-columns:1fr 1fr;gap:46px}
  .passo:nth-child(even) .testo{order:2}
}
.passo .num{font-family:var(--titoli);font-size:.77rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro-sc);font-weight:600;margin:0 0 10px}
.passo h3{font-family:var(--titoli);font-size:1.78rem;font-weight:600;margin:0 0 12px;
  line-height:1.15;letter-spacing:-.01em}
.passo p{color:var(--grigio);margin:0 0 12px;max-width:44ch}
.passo p b{color:var(--ink);font-weight:600}
.passo .nota{border-left:2px solid var(--oro);padding-left:14px;font-size:.86rem}

/* elenco numerato accanto a una schermata */
.ricetta{display:grid;gap:26px;grid-template-columns:1fr;align-items:center}
@media (min-width:900px){ .ricetta{grid-template-columns:1fr 1fr;gap:44px} }
ol.mosse{counter-reset:m;list-style:none;margin:0;padding:0}
ol.mosse li{counter-increment:m;position:relative;padding:0 0 20px 48px;
  border-left:1px solid var(--linea-g);margin-left:15px}
ol.mosse li:last-child{border-left-color:transparent;padding-bottom:0}
ol.mosse li::before{content:counter(m);position:absolute;left:-15px;top:-3px;width:30px;height:30px;
  border-radius:50%;background:var(--bianco);border:1px solid var(--oro);color:var(--oro-sc);
  font-family:var(--titoli);font-weight:600;font-size:.91rem;display:grid;place-items:center}
ol.mosse h4{font-family:var(--titoli);font-size:1.18rem;font-weight:600;margin:0 0 5px}
ol.mosse p{margin:0;font-size:.9rem;color:var(--grigio);max-width:42ch}
ol.mosse p b{color:var(--ink);font-weight:600}

/* ---------- SCHEDE ----------
   Angoli morbidi, un filo d oro che cresce in cima quando ci passi
   sopra, e l ombra che le stacca dal foglio. Il movimento e' piccolo
   di proposito: deve sembrare carta buona, non una slot machine. */
.griglia{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.scheda{background:#fff;border:1px solid var(--linea-g);border-radius:14px;
  padding:22px 21px;position:relative;z-index:1;overflow:hidden;
  box-shadow:0 1px 2px rgba(29,26,22,.03);
  transition:transform .28s cubic-bezier(.22,.8,.28,1),
             box-shadow .28s ease, border-color .28s ease}
.scheda::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--oro-ch),var(--oro),var(--oro-sc));
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.8,.28,1)}
.scheda:hover{transform:translateY(-4px);border-color:var(--linea);
  box-shadow:0 14px 34px rgba(29,26,22,.09)}
.scheda:hover::before{transform:scaleX(1)}
.scheda h3,.scheda h4{font-family:var(--titoli);font-size:1.22rem;font-weight:600;margin:0 0 7px}
.scheda p{margin:0;font-size:.88rem;color:var(--grigio)}

/* riquadro in evidenza */
.riquadro{background:#fff;border:1px solid var(--linea);border-left:4px solid var(--oro);
  padding:22px 24px;margin-top:32px;display:grid;gap:12px;grid-template-columns:1fr;
  position:relative;z-index:1}
@media (min-width:760px){ .riquadro{grid-template-columns:auto 1fr;gap:24px;align-items:start} }
.riquadro .eti{font-family:var(--titoli);font-size:1rem;font-weight:600;color:var(--oro-sc);
  white-space:nowrap;margin:0;display:flex;align-items:center;gap:8px}
.riquadro .eti svg{width:20px;height:20px}
.riquadro h3{font-family:var(--titoli);font-size:1.32rem;font-weight:600;margin:0 0 8px}
.riquadro p{margin:0 0 8px;color:var(--grigio);font-size:.92rem;max-width:60ch}
.riquadro p:last-child{margin-bottom:0}
.riquadro b{color:var(--ink);font-weight:600}

/* domande frequenti */
.faq{max-width:760px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--linea-g);margin-bottom:9px;padding:0}
.faq summary{cursor:pointer;padding:15px 18px;font-family:var(--titoli);font-size:1.14rem;
  font-weight:600;list-style:none;display:flex;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--oro-sc);font-size:1.3rem;line-height:1;flex:0 0 auto;
  width:16px;text-align:center}
.faq details[open] summary::before{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--linea-g)}
.faq .risposta{padding:14px 18px 17px 46px;font-size:.91rem;color:var(--grigio)}
.faq .risposta p{margin:0 0 9px} .faq .risposta p:last-child{margin:0}
.faq .risposta b{color:var(--ink);font-weight:600}

/* chiusura */
.chiusura{text-align:center;padding:56px 0}
.chiusura .frase{font-family:var(--script);font-size:clamp(2rem,5.3vw,2.8rem);color:var(--oro-sc);
  margin:0 0 14px;line-height:1.2}
.chiusura p{color:var(--grigio);max-width:48ch;margin:0 auto 24px}

/* gli altri prodotti, in fondo: sono i link interni che Google segue */
.fratelli{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fratello{background:#fff;border:1px solid var(--linea-g);border-radius:14px;padding:19px 19px;
  text-decoration:none;color:inherit;display:block;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(29,26,22,.03);
  transition:transform .28s cubic-bezier(.22,.8,.28,1),box-shadow .28s ease,border-color .28s ease}
.fratello::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--oro-ch),var(--oro),var(--oro-sc));
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.8,.28,1)}
.fratello:hover{transform:translateY(-4px);border-color:var(--linea);
  box-shadow:0 14px 34px rgba(29,26,22,.09)}
.fratello:hover::before{transform:scaleX(1)}
.fratello:hover .freccia{transform:translateX(4px)}
.fratello .freccia{transition:transform .28s ease}
.fratello h4{font-family:var(--titoli);font-size:1.14rem;font-weight:600;margin:0 0 5px}
.fratello p{margin:0;font-size:.83rem;color:var(--grigio)}
.fratello .freccia{color:var(--oro-sc);font-size:.76rem;font-weight:600;margin-top:8px;display:block}

/* ---------- FOOTER AZIENDALE ----------
   Compatto di proposito: su un telefono un footer alto mezzo schermo
   e' spazio rubato al contenuto. */
.footer-az{font-family:var(--testo);font-size:11px;line-height:1.55}
.footer-az__corpo{background:var(--bianco);border-top:1px solid var(--oro-ch);
  color:var(--oro-sc);padding:20px 0 16px;text-align:center}
.footer-az .contenitore{max-width:1080px;margin:0 auto;padding:0 22px}
.footer-az__logo{max-width:104px;height:auto;display:block;margin:0 auto .3rem;opacity:.95}
.footer-az__riga{margin:0 0 2px}
.footer-az__riga.forte{color:var(--ink);font-weight:500}
.footer-az__sep{margin:0 .35rem;opacity:.5}
.footer-az a{color:inherit;text-decoration:none}
.footer-az a:hover,.footer-az a:focus{text-decoration:underline}
.footer-az__icone{display:flex;justify-content:center;gap:.6rem;margin:.45rem 0 0}
.footer-az__icone a{color:var(--oro-sc);opacity:.65;transition:opacity .2s ease;display:block}
.footer-az__icone a:hover,.footer-az__icone a:focus{opacity:1}
.footer-az__icone svg{width:15px;height:15px;display:block}
.footer-az__legale{background:var(--carta);border-top:1px solid var(--oro-ch);color:var(--oro-sc);
  font-size:10.5px;padding:.5rem 0;text-align:center}
.footer-az__legale span{opacity:.7}
/* sotto i 400px la riga dei contatti non stava in una riga sola:
   i separatori spariscono e i tre recapiti vanno uno per riga. */
@media (max-width:400px){
  .footer-az__riga .footer-az__sep{display:none}
  .footer-az__riga a{display:block}
  .footer-az__riga{overflow-wrap:anywhere}
}
@media (max-width:560px){
  .footer-az__sep{margin:0 .28rem}
  .footer-az__corpo{padding:16px 0 13px}
  .footer-az__logo{max-width:92px}
}



/* ============================================================
   DOVE SONO — il filo di lettura e la voce accesa
   Li governa /z/zenith-dovesono.js. Servono a non perdere chi
   legge: quanto manca, e in che pezzo si trova.
   ============================================================ */
.filo-lettura{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;
  background:rgba(201,162,39,.12)}
.filo-lettura i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--oro-ch),var(--oro),var(--oro-sc));
  box-shadow:0 0 8px rgba(201,162,39,.55);transition:width .12s linear}
/* la voce della sezione in cui sei */
.barra nav a.qui{color:var(--ink);border-bottom-color:var(--oro)}
.menu-lato a.voce.qui{background:var(--oro-sf);border-color:var(--linea);color:var(--oro-sc)}

/* le etichette piccole hanno una misura minima anche sul computer:
   misurate a 8,8px, troppo poco per una scritta in maiuscolo */
.eti{font-size:.62rem}
.prodotto .eti{font-size:.58rem;letter-spacing:.09em}

/* ---- PAVIMENTO DI LEGGIBILITA' ----
   Nessuna scritta del sito sotto i 10,5px sul telefono: misurato, alcune
   etichette arrivavano a 9,1px. Dentro ai mockup non vale: li' e' una
   miniatura di schermo, e si guarda, non si legge. */
@media (max-width:900px){
  .occhiello,.q,.gruppo,.sotto,.eti,.gratis,.sistema,.bandiera,
  .menu-lato a.voce em,.scherma .sotto em,.briciole,.data-doc,
  .footer-az,.footer-az__legale,.puntini + .didascalia,.didascalia{
    font-size:10.5px !important;
    letter-spacing:.08em;
  }
  .footer-az__riga.forte{font-size:11px !important}
}

@media (prefers-reduced-motion:reduce){ .filo-lettura i{transition:none} }


/* ============================================================
   LA COMPARSA — i pezzi entrano mentre si scorre
   Il nascondere e' legato a .con-comparsa, che mette
   /z/zenith-comparsa.js: senza quel file, o con le animazioni
   ferme, NIENTE si nasconde. Non esiste il caso della pagina
   bianca perche' un'animazione non e' partita.
   ============================================================ */
.con-comparsa .comparsa{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.22,.8,.28,1),
             transform .5s cubic-bezier(.22,.8,.28,1);
  /* NIENTE will-change: con sessanta pezzi voleva dire sessanta livelli
     grafici aperti insieme, e il browser si piantava. */
}
.con-comparsa .comparsa.vista{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .con-comparsa .comparsa{opacity:1;transform:none;transition:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scheda,.fratello,.bottone{transition:none}
  .scheda:hover,.fratello:hover,.bottone:hover{transform:none}
  .bottone--oro::after{display:none}
}