/* ===================================================================
   ATHANOR — STILE CONDIVISO DEL SITO
   Percorso: /assets/css/athanor-stile.css
   Si basa su /assets/css/athanor-variabili.css (va incluso PRIMA di questo).
=================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:19px;scroll-behavior:smooth}
body{font-family:var(--font-ui);font-weight:300;color:var(--testo);background:var(--avorio);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}
.icona-athanor{display:inline-flex;width:1em;height:1em}
.icona-athanor svg{width:100%;height:100%}
:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
*{scrollbar-width:thin;scrollbar-color:var(--oro-3) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:var(--oro-3);border-radius:8px}

/* ---------- Bottoni condivisi (Home, Hero, Shop) ---------- */
.ath-btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--font-titoli);font-weight:500;
  font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:var(--oro);border:1px solid var(--oro);border-radius:2px;
  padding:16px 28px;transition:background .25s,border-color .25s,color .25s}
.ath-btn:hover{background:var(--ossidiana);border-color:var(--ossidiana);color:var(--oro-3)}
.ath-btn .icona-athanor{width:1.3rem;height:1.3rem;background:rgba(255,255,255,.22);border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:6px}
.ath-btn-outline{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-titoli);font-weight:500;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--testo);
  background:transparent;border:1px solid var(--oro-2);border-radius:2px;padding:14px 24px;
  /* doppio filetto: il passe-partout delle stampe di fine Ottocento */
  box-shadow:inset 0 0 0 3px var(--avorio),inset 0 0 0 4px rgba(201,165,92,.35);
  transition:border-color .25s,color .25s,box-shadow .25s}
.ath-btn-outline:hover{border-color:var(--oro);color:var(--oro);
  box-shadow:inset 0 0 0 3px var(--avorio),inset 0 0 0 4px var(--oro-2)}

/* ================= HEADER ================= */
.ath-header{position:sticky;top:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:20px 4vw;background:rgba(251,248,242,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea)}
.ath-logo{display:flex;flex-direction:column;line-height:1.15}
.ath-logo-nome{font-family:var(--font-titoli);font-weight:600;font-size:1.5rem;letter-spacing:.14em;color:var(--testo)}
.ath-logo-sotto{font-family:var(--font-titoli);font-size:.55rem;letter-spacing:.22em;color:var(--oro);margin-top:2px}
.ath-nav{display:flex;gap:30px;justify-content:center}
.ath-nav a{font-family:var(--font-titoli);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--testo-dim);white-space:nowrap;padding-bottom:4px;border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s}
.ath-nav a:hover,.ath-nav a.attivo{color:var(--oro);border-color:var(--oro)}
.ath-header-azioni{display:flex;align-items:center;gap:20px;justify-self:end}
.ath-icona-btn{background:none;border:none;width:1.15rem;height:1.15rem;color:var(--testo);padding:0}
.ath-icona-btn:hover{color:var(--oro)}
.ath-carrello{position:relative;display:inline-flex;color:var(--testo);width:1.15rem;height:1.15rem}
.ath-carrello:hover{color:var(--oro)}
.ath-carrello[hidden]{display:none}
.ath-carrello-badge{position:absolute;top:-8px;right:-10px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:linear-gradient(135deg,var(--oro-2),var(--oro));color:#fff;
  font-family:var(--font-ui);font-size:.62rem;font-weight:600;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(180,140,60,.4)}
.ath-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:6px;
  grid-column:3;justify-self:end}
.ath-hamburger span{width:22px;height:1.5px;background:var(--testo);transition:transform .25s,opacity .25s}
.ath-nav-mobile{display:none;flex-direction:column;background:var(--avorio);border-bottom:1px solid var(--linea);
  position:sticky;top:0;z-index:99}
.ath-nav-mobile a{padding:16px 6vw;font-family:var(--font-titoli);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--testo);border-bottom:1px solid var(--linea)}
@media(max-width:980px){
  .ath-nav,.ath-header-azioni .ath-carrello{display:none}
  .ath-hamburger{display:flex}
  .ath-nav-mobile.aperto{display:flex}
}

/* ================= RAIL FLUTTUANTE (le 5 Hero) ================= */
.ath-rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;gap:14px;background:var(--vetro);border:1px solid var(--linea);
  border-radius:3px;padding:16px 11px;box-shadow:var(--ombra);backdrop-filter:blur(10px)}
.ath-rail-voce{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--testo-dim);border:1px solid transparent;transition:all .25s}
.ath-rail-voce .icona-athanor{width:1.05rem;height:1.05rem}
.ath-rail-voce:hover{color:var(--oro);border-color:var(--linea)}
.ath-rail-voce.attiva{color:#fff;background:linear-gradient(135deg,var(--oro-2),var(--oro));
  box-shadow:0 8px 22px rgba(180,140,60,.35)}
@media(max-width:760px){.ath-rail{right:12px;padding:12px 8px;gap:10px}
  .ath-rail-voce{width:28px;height:28px}}

/* ================= HERO (Home + le 5 pagine Hero) ================= */
.ath-hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden}
.ath-hero-sfondo{position:absolute;inset:0;z-index:0}
.ath-hero-sfondo img{width:100%;height:100%;object-fit:cover}
.ath-hero-velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, var(--avorio) 0%, var(--avorio) 18%, rgba(251,248,242,.75) 38%, rgba(251,248,242,0) 60%)}
.ath-hero-corpo{position:relative;z-index:2;max-width:640px;padding:0 6vw}
.ath-hero-etichetta{font-family:var(--font-titoli);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--testo-dim);margin-bottom:22px}
.ath-hero-titolo{font-family:var(--font-corpo);font-weight:400;font-size:clamp(2rem,4.2vw,3.4rem);
  line-height:1.15;color:var(--testo);margin-bottom:26px}
.ath-hero-titolo span{display:block;color:var(--oro)}
.ath-hero-testo{font-family:var(--font-corpo);font-size:1.15rem;line-height:1.7;color:var(--testo-dim);
  max-width:52ch;margin-bottom:34px}
.ath-hero-nota{position:absolute;left:6vw;bottom:26px;z-index:2;font-family:var(--font-corpo);font-style:italic;
  font-size:.82rem;color:var(--testo-dim);max-width:60ch}

/* ---- la scheda fluttuante a destra dell'Hero ---- */
/* La scheda vive ORA soltanto dentro il pannello del rail, che ne detta
   posizione e misure. Qui restano solo le proprietà visive: quando
   posizionava da sé, il suo transform sopravviveva dentro il pannello
   e spingeva la finestra in alto di metà della propria altezza. */
.ath-scheda-hero{z-index:3;background:var(--vetro);border:1px solid var(--linea);border-radius:3px;
  padding:28px 24px;box-shadow:var(--ombra);backdrop-filter:blur(10px)}
.ath-scheda-hero h3{font-family:var(--font-titoli);font-weight:500;font-size:.9rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--testo);margin-bottom:4px}
.ath-scheda-hero .ath-scheda-sotto{font-family:var(--font-corpo);font-style:italic;font-size:.92rem;
  color:var(--testo-dim);margin-bottom:18px}
.ath-scheda-voce{display:flex;align-items:center;gap:12px;padding:13px 10px;border-radius:10px;
  transition:background .2s;cursor:pointer}
.ath-scheda-voce:hover,.ath-scheda-voce.attiva{background:rgba(233,199,118,.14)}
.ath-scheda-voce .icona-athanor{width:2.1rem;height:2.1rem;color:var(--oro);flex-shrink:0}
.ath-scheda-voce-corpo{flex:1;min-width:0}
.ath-scheda-voce-titolo{font-family:var(--font-titoli);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--testo)}
.ath-scheda-voce-sotto{font-family:var(--font-corpo);font-size:.82rem;color:var(--testo-dim);margin-top:2px}
.ath-scheda-voce .ath-freccia-mini{width:.85rem;height:.85rem;color:var(--testo-dim);flex-shrink:0}
.ath-scheda-separatore{height:1px;background:var(--linea);margin:14px 0}
.ath-scheda-hero .ath-btn,.ath-scheda-hero .ath-btn-outline{width:100%;justify-content:center;margin-top:16px}


@media(max-width:1100px){
  .ath-hero{flex-direction:column;padding:120px 0 60px;min-height:auto}
  .ath-hero-corpo{max-width:100%}
}

/* ================= CAROUSEL CATEGORIE (Home) ================= */
.ath-carousel-sezione{padding:60px 4vw 80px;background:var(--avorio-2)}
.ath-carousel-testata{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.ath-carousel-titolo{font-family:var(--font-corpo);font-size:1.5rem;color:var(--testo)}
.ath-carousel-frecce{display:flex;gap:10px}
.ath-carousel-frecce button{width:42px;height:42px;border-radius:50%;border:1px solid var(--linea);
  background:var(--bianco);color:var(--testo);display:flex;align-items:center;justify-content:center;
  transition:border-color .25s,color .25s}
.ath-carousel-frecce button .icona-athanor{width:1rem;height:1rem}
.ath-carousel-frecce button:hover{border-color:var(--oro);color:var(--oro)}
.ath-carousel-pista{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.ath-carousel-pista::-webkit-scrollbar{display:none}
/* La card vera è definita nella Parte VIII: qui resta solo l'aggancio
   allo scorrimento, che è proprietà della pista e non della card. */
.ath-carousel-scheda{scroll-snap-align:start;flex:0 0 auto}

/* ================= FOOTER ================= */
.ath-footer{background:var(--ossidiana);color:var(--avorio-3)}
.ath-footer-cima{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px;
  padding:70px 4vw 50px;max-width:1500px;margin:0 auto}
.ath-footer-marchio p{font-family:var(--font-corpo);font-size:.94rem;line-height:1.7;color:var(--avorio-2);
  margin-top:14px;max-width:34ch}
.ath-footer-blocco h4{font-family:var(--font-titoli);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro-3);margin-bottom:16px}
.ath-footer-blocco a{display:block;font-family:var(--font-corpo);font-size:.98rem;color:var(--avorio-2);
  margin-bottom:10px;transition:color .2s}
.ath-footer-blocco a:hover{color:var(--oro-3)}
.ath-footer-newsletter p{font-family:var(--font-corpo);font-size:.9rem;color:var(--avorio-2);margin-bottom:16px}
.ath-form-newsletter{display:flex;gap:8px}
.ath-form-newsletter input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(233,199,118,.25);
  border-radius:24px;padding:12px 16px;color:#fff;font-family:var(--font-corpo);font-size:.94rem}
.ath-form-newsletter input::placeholder{color:var(--avorio-3)}
.ath-form-newsletter button{width:44px;height:44px;border-radius:50%;border:none;flex-shrink:0;
  background:linear-gradient(135deg,var(--oro-2),var(--oro));color:#fff;display:flex;align-items:center;justify-content:center}
.ath-form-newsletter button .icona-athanor{width:1rem;height:1rem}
.ath-footer-fondo{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding:22px 4vw;border-top:1px solid rgba(233,199,118,.14);max-width:1500px;margin:0 auto;
  font-family:var(--font-ui);font-size:.8rem;color:var(--avorio-3)}
.ath-footer-legali{display:flex;gap:22px}
.ath-footer-legali a:hover{color:var(--oro-3)}
@media(max-width:900px){.ath-footer-cima{grid-template-columns:1fr 1fr;padding:50px 6vw}}
@media(max-width:560px){.ath-footer-cima{grid-template-columns:1fr}}

/* ===================================================================
   PARTE II — COMPONENTI DELLE PAGINE INTERNE
   Aggiunta del 2026. Da qui in basso vive tutto ciò che serve alle
   pagine nuove (Collezioni, Officina, Scriptorium, Registro, legali).
   Prima ogni pagina aveva il proprio blocco <style>: ora le classi
   stanno qui una volta sola e valgono per tutte.
=================================================================== */

/* ---------- Fondamenta di accessibilità ---------- */
.ath-salta{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ossidiana);color:var(--oro-3);
  font-family:var(--font-titoli);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:14px 22px}
.ath-salta:focus{left:0}
[id]{scroll-margin-top:110px} /* l'header è sticky: le ancore non finiscono più sotto di esso */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.05ms!important}
}

/* ---------- Testata delle pagine interne (più bassa dell'Hero) ---------- */
.ath-testata{position:relative;padding:90px 6vw 70px;border-bottom:1px solid var(--linea);overflow:hidden}
.ath-testata-sfondo{position:absolute;inset:0;z-index:0}
.ath-testata-sfondo img{width:100%;height:100%;object-fit:cover}
.ath-testata-velo{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--avorio) 0%,var(--avorio) 30%,rgba(251,248,242,.7) 60%,rgba(251,248,242,.25) 100%)}
.ath-testata-corpo{position:relative;z-index:2;max-width:760px}
.ath-testata-etichetta{font-family:var(--font-titoli);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--testo-dim);margin-bottom:20px}
.ath-testata-titolo{font-family:var(--font-corpo);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1.18;color:var(--testo);margin-bottom:20px}
.ath-testata-titolo span{color:var(--oro)}
.ath-testata-testo{font-family:var(--font-corpo);font-size:1.1rem;line-height:1.75;color:var(--testo-dim);max-width:62ch}

/* ---------- Sezioni ---------- */
.ath-sezione{padding:80px 6vw;max-width:1400px;margin:0 auto}
.ath-sezione-tenue{background:var(--avorio-2);max-width:none}
.ath-sezione-tenue > *{max-width:1400px;margin-left:auto;margin-right:auto}
.ath-sezione-intestazione{max-width:70ch;margin-bottom:44px}
.ath-occhiello{font-family:var(--font-titoli);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro);margin-bottom:14px}
.ath-sezione-titolo{font-family:var(--font-corpo);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);
  line-height:1.25;color:var(--testo);margin-bottom:16px}
.ath-sezione-testo{font-family:var(--font-corpo);font-size:1.05rem;line-height:1.8;color:var(--testo-dim)}
.ath-sezione-testo + .ath-sezione-testo{margin-top:16px}

/* ---------- Griglie ---------- */
.ath-griglia{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.ath-griglia-2{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.ath-griglia-larga{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}

/* ---------- Card generica ---------- */
.ath-card{position:relative;display:flex;flex-direction:column;background:var(--bianco);
  border:1px solid var(--linea);border-radius:3px;overflow:hidden;
  transition:border-color .25s,transform .25s,box-shadow .25s}
a.ath-card:hover{border-color:var(--oro-2);transform:translateY(-4px);box-shadow:var(--ombra)}
.ath-card-media{aspect-ratio:4/3;background:var(--avorio-2);position:relative;overflow:hidden}
.ath-card-media img{width:100%;height:100%;object-fit:cover}
.ath-card-corpo{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1}
.ath-card-numero{font-family:var(--font-titoli);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro);margin-bottom:12px}
.ath-card h3{font-family:var(--font-corpo);font-weight:400;font-size:1.32rem;line-height:1.3;
  color:var(--testo);margin-bottom:10px}
.ath-card p{font-family:var(--font-corpo);font-size:.98rem;line-height:1.7;color:var(--testo-dim);margin-bottom:18px}
.ath-card-piede{margin-top:auto;display:flex;align-items:center;gap:10px;
  font-family:var(--font-titoli);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--testo)}
.ath-card-piede .icona-athanor{width:.9rem;height:.9rem;color:var(--oro)}
a.ath-card:hover .ath-card-piede{color:var(--oro)}
.ath-card-dato{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.06em;color:var(--testo-dim);
  margin-top:-6px;margin-bottom:16px}

/* ---------- Stanza sigillata: il sito apre per stagioni, non tutto insieme ---------- */
.ath-card-sigillata{background:var(--avorio-2);border-style:dashed}
.ath-card-sigillata .ath-card-media{background:var(--avorio-3);opacity:.5}
.ath-card-sigillata h3,.ath-card-sigillata .ath-card-numero{color:var(--testo-dim)}
.ath-sigillo{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding:11px 18px;
  border:1px solid var(--oro-2);border-radius:30px;background:rgba(233,199,118,.13);
  font-family:var(--font-titoli);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--oro)}
.ath-sigillo .icona-athanor{width:.95rem;height:.95rem}

/* ---------- Prodotto ---------- */
.ath-prodotto{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--bianco);
  border:1px solid var(--linea);border-radius:3px;overflow:hidden;margin-bottom:26px}
.ath-prodotto-media{background:var(--avorio-2);min-height:340px;position:relative}
.ath-prodotto-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ath-prodotto-corpo{padding:44px 40px}
.ath-prodotto-nome{font-family:var(--font-corpo);font-weight:400;font-size:1.9rem;line-height:1.2;
  color:var(--testo);margin-bottom:6px}
.ath-prodotto-sottotitolo{font-family:var(--font-corpo);font-style:italic;font-size:1.02rem;
  color:var(--oro);margin-bottom:22px}
.ath-prodotto-testo{font-family:var(--font-corpo);font-size:1.02rem;line-height:1.75;color:var(--testo-dim);
  margin-bottom:22px}
.ath-prodotto-prezzo{font-family:var(--font-titoli);font-weight:500;font-size:1.5rem;color:var(--testo);
  margin-bottom:26px}
.ath-prodotto-motto{font-family:var(--font-corpo);font-style:italic;font-size:.96rem;color:var(--testo-dim);
  padding-top:20px;margin-top:26px;border-top:1px solid var(--linea)}
@media(max-width:900px){.ath-prodotto{grid-template-columns:1fr}
  .ath-prodotto-media{min-height:260px}.ath-prodotto-corpo{padding:34px 26px}}

/* ---------- Elenco di specifiche ---------- */
.ath-specifiche{border-top:1px solid var(--linea);margin-bottom:24px}
.ath-specifiche div{display:grid;grid-template-columns:minmax(120px,32%) 1fr;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--linea)}
.ath-specifiche dt{font-family:var(--font-titoli);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--testo-dim);padding-top:3px}
.ath-specifiche dd{font-family:var(--font-corpo);font-size:1rem;line-height:1.6;color:var(--testo)}

/* ---------- Tabella ---------- */
.ath-tabella{width:100%;border-collapse:collapse;font-family:var(--font-corpo);font-size:1rem}
.ath-tabella th{text-align:left;font-family:var(--font-titoli);font-weight:500;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--testo-dim);
  padding:14px 16px;border-bottom:1px solid var(--oro-2)}
.ath-tabella td{padding:15px 16px;border-bottom:1px solid var(--linea);color:var(--testo);vertical-align:top}
.ath-tabella tr:hover td{background:rgba(233,199,118,.07)}
.ath-tabella-avvolgi{overflow-x:auto}

/* ---------- Piani di affiliazione ---------- */
.ath-piani{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ath-piano{display:flex;flex-direction:column;background:var(--bianco);border:1px solid var(--linea);
  border-radius:3px;padding:34px 28px}
.ath-piano-eletto{border-color:var(--oro);box-shadow:var(--ombra);position:relative}
.ath-piano-eletto::before{content:'Il grado consigliato';position:absolute;top:-11px;left:28px;
  background:linear-gradient(135deg,var(--oro-2),var(--oro));color:#fff;border-radius:20px;padding:4px 14px;
  font-family:var(--font-titoli);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase}
.ath-piano-nome{font-family:var(--font-titoli);font-weight:500;font-size:.86rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oro);margin-bottom:14px}
.ath-piano-quota{font-family:var(--font-corpo);font-size:2.1rem;color:var(--testo);line-height:1}
.ath-piano-quota span{font-family:var(--font-ui);font-size:.8rem;color:var(--testo-dim);letter-spacing:.04em}
.ath-piano-elenco{list-style:none;margin:24px 0 26px;padding:0}
.ath-piano-elenco li{position:relative;padding-left:22px;margin-bottom:11px;
  font-family:var(--font-corpo);font-size:.98rem;line-height:1.6;color:var(--testo-dim)}
.ath-piano-elenco li::before{content:'✦';position:absolute;left:0;top:0;color:var(--oro);font-size:.8rem}
.ath-piano .ath-btn,.ath-piano .ath-btn-outline{margin-top:auto;justify-content:center}

/* ---------- Nota, avviso, citazione ---------- */
.ath-nota{border-left:2px solid var(--oro-2);background:rgba(233,199,118,.09);border-radius:0 10px 10px 0;
  padding:22px 26px;font-family:var(--font-corpo);font-size:1rem;line-height:1.75;color:var(--testo-dim);
  margin:30px 0}
.ath-nota strong{color:var(--testo)}
.ath-citazione{max-width:800px;margin:0 auto;padding:70px 6vw;text-align:center}
.ath-citazione p{font-family:var(--font-corpo);font-style:italic;font-size:1.45rem;line-height:1.65;color:var(--testo)}
.ath-citazione cite{display:block;margin-top:18px;font-family:var(--font-titoli);font-style:normal;
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--testo-dim)}

/* ---------- Banda scura di richiamo ---------- */
.ath-banda{background:var(--ossidiana);color:var(--avorio-2);padding:76px 6vw;text-align:center}
.ath-banda h2{font-family:var(--font-corpo);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.3rem);
  color:var(--avorio);margin-bottom:18px;line-height:1.25}
.ath-banda h2 span{color:var(--oro-3)}
.ath-banda p{font-family:var(--font-corpo);font-size:1.08rem;line-height:1.75;color:var(--avorio-3);
  max-width:60ch;margin:0 auto 32px}
.ath-banda .ath-btn-outline{border-color:rgba(233,199,118,.5);color:var(--oro-3)}
.ath-banda .ath-btn-outline:hover{border-color:var(--oro-3);color:var(--bianco)}

/* ---------- Stato vuoto ---------- */
.ath-vuoto{text-align:center;padding:70px 30px;border:1px dashed var(--linea);border-radius:3px;
  background:var(--bianco)}
.ath-vuoto .icona-athanor{width:2.4rem;height:2.4rem;color:var(--oro-2);margin:0 auto 20px}
.ath-vuoto h3{font-family:var(--font-corpo);font-weight:400;font-size:1.4rem;color:var(--testo);margin-bottom:12px}
.ath-vuoto p{font-family:var(--font-corpo);font-size:1.02rem;line-height:1.7;color:var(--testo-dim);
  max-width:52ch;margin:0 auto}

/* ---------- Campo di ricerca in pagina ---------- */
.ath-ricerca{display:flex;gap:10px;max-width:520px;margin-bottom:36px}
.ath-ricerca input{flex:1;background:var(--bianco);border:1px solid var(--linea);border-radius:30px;
  padding:14px 20px;font-family:var(--font-corpo);font-size:1rem;color:var(--testo)}
.ath-ricerca input::placeholder{color:var(--testo-dim)}
.ath-ricerca input:focus{border-color:var(--oro)}
.ath-ricerca button{width:48px;height:48px;flex-shrink:0;border-radius:50%;border:none;
  background:linear-gradient(135deg,var(--oro-2),var(--oro));color:#fff;
  display:flex;align-items:center;justify-content:center}
.ath-ricerca button .icona-athanor{width:1.05rem;height:1.05rem}

/* ---------- Documento (pagine legali) ---------- */
.ath-doc{max-width:80ch;margin:0 auto;padding:70px 6vw 90px}
.ath-doc h2{font-family:var(--font-corpo);font-weight:400;font-size:1.5rem;color:var(--testo);
  margin:46px 0 14px;padding-top:20px;border-top:1px solid var(--linea)}
.ath-doc h2:first-of-type{margin-top:0;padding-top:0;border-top:none}
.ath-doc h3{font-family:var(--font-titoli);font-weight:500;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--oro);margin:28px 0 10px}
.ath-doc p,.ath-doc li{font-family:var(--font-corpo);font-size:1.05rem;line-height:1.8;color:var(--testo-dim)}
.ath-doc p{margin-bottom:14px}
.ath-doc ul,.ath-doc ol{margin:0 0 18px 24px}
.ath-doc li{margin-bottom:8px}
.ath-doc strong{color:var(--testo);font-weight:500}
.ath-doc a{color:var(--oro);text-decoration:underline;text-underline-offset:3px}
.ath-doc-data{font-family:var(--font-ui);font-size:.78rem;letter-spacing:.06em;color:var(--testo-dim);
  padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid var(--linea)}
/* i punti da compilare con i dati reali dell'azienda restano visibili a occhio nudo */
.ath-vuoto-dato{background:rgba(201,165,92,.22);border-bottom:1px dashed var(--oro);
  padding:1px 6px;border-radius:3px;font-family:var(--font-ui);font-size:.86em;
  letter-spacing:.04em;color:var(--testo);white-space:nowrap}

/* ---------- Banda cookie ---------- */
.ath-cookie{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;
  background:var(--vetro-scuro);backdrop-filter:blur(12px);border-top:1px solid rgba(233,199,118,.25);
  padding:22px 6vw}
.ath-cookie.visibile{display:block}
.ath-cookie-corpo{max-width:1300px;margin:0 auto;display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.ath-cookie-testo{flex:1;min-width:280px;font-family:var(--font-corpo);font-size:.98rem;line-height:1.65;
  color:var(--avorio-2)}
.ath-cookie-testo a{color:var(--oro-3);text-decoration:underline;text-underline-offset:3px}
.ath-cookie-azioni{display:flex;gap:12px;flex-wrap:wrap}
.ath-cookie-azioni button{font-family:var(--font-titoli);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;border-radius:30px;padding:13px 24px;border:1px solid rgba(233,199,118,.45);
  background:transparent;color:var(--oro-3);transition:all .25s}
.ath-cookie-azioni button:hover{border-color:var(--oro-3);color:#fff}
.ath-cookie-azioni button.principale{background:linear-gradient(135deg,var(--oro-2),var(--oro));
  border-color:transparent;color:#fff}

/* ---------- Pagina 404 ---------- */
.ath-errore{min-height:72vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:80px 6vw}
.ath-errore-numero{font-family:var(--font-titoli);font-weight:400;font-size:clamp(4rem,12vw,8rem);
  line-height:1;color:var(--oro-3);letter-spacing:.06em;margin-bottom:24px}
.ath-errore h1{font-family:var(--font-corpo);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);
  color:var(--testo);margin-bottom:18px}
.ath-errore p{font-family:var(--font-corpo);font-size:1.08rem;line-height:1.75;color:var(--testo-dim);
  max-width:52ch;margin-bottom:34px}

/* ---------- Ancore di sezione interne (Virgula, Magnum Opus) ---------- */
.ath-ancore{display:flex;gap:10px;flex-wrap:wrap;padding:22px 6vw;background:var(--avorio-2);
  border-bottom:1px solid var(--linea);position:sticky;top:71px;z-index:70;backdrop-filter:blur(10px)}
.ath-ancore a{font-family:var(--font-titoli);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--testo-dim);border:1px solid var(--linea);border-radius:30px;padding:10px 18px;transition:all .25s}
.ath-ancore a:hover,.ath-ancore a.attiva{border-color:var(--oro);color:var(--oro)}
@media(max-width:980px){.ath-ancore{top:0;overflow-x:auto;flex-wrap:nowrap}}

/* ---------- Il rail non deve coprire i contenuti sui monitor stretti ---------- */
@media(min-width:1101px){.ath-sezione,.ath-doc{padding-right:max(6vw,90px)}}

/* ---------- Correzione di gerarchia dei titoli ----------
   Nella Home la scheda dell'Hero portava un <h3> subito dopo l'<h1>,
   saltando il livello <h2>: un lettore di schermo annunciava una
   sottosezione che non esisteva. Ora la scheda usa <h2> e lo stile
   segue il titolo invece di dettarlo. */
.ath-scheda-hero h2{font-family:var(--font-titoli);font-weight:500;font-size:.9rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--testo);margin-bottom:4px}
/* nel carosello della Home le schede sono <h3> dentro una sezione <h2> */
.ath-carousel-scheda h3{font-family:var(--font-titoli);font-weight:500;font-size:.85rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--testo);margin-bottom:10px}


/* ===================================================================
   PARTE III — ORNAMENTO ART NOUVEAU
   Il Canone chiede «anima Art Nouveau» ma vieta che pesi sui caratteri.
   Quindi il Liberty vive qui: nel filetto, nei cantonali, nel
   capolettera, nella cornice che appare al passaggio del mouse.
   Tipografia e palette restano quelle di prima — pulite e serie.
=================================================================== */

/* ---------- Il filetto: la firma visiva, ripetuta fra le sezioni ---------- */
.ath-filetto{display:flex;justify-content:center;padding:0 6vw;color:var(--oro-2)}
.ath-filetto svg{width:min(340px,62vw);height:auto;opacity:.85}
/* fra due sezioni chiare il filetto sostituisce lo spazio vuoto:
   toglie 40px al padding sopra e sotto, così non raddoppia lo stacco */
.ath-filetto + .ath-sezione,.ath-filetto + .ath-sezione-tenue{padding-top:40px}
.ath-sezione:has(+ .ath-filetto){padding-bottom:40px}

/* ---------- I cantonali: due angoli opposti, non quattro ---------- */
.ath-testata{position:relative}
.ath-cantonale{position:absolute;z-index:2;color:var(--oro-2);opacity:.5;pointer-events:none}
.ath-cantonale svg{width:100%;height:100%;display:block}
.ath-cantonale-alto-sinistra{top:18px;left:18px;width:clamp(56px,7vw,104px);height:clamp(56px,7vw,104px);
  transform:scaleX(-1)}
.ath-cantonale-basso-destra{bottom:18px;right:18px;width:clamp(56px,7vw,104px);height:clamp(56px,7vw,104px);
  transform:scaleY(-1)}
@media(max-width:760px){.ath-cantonale-basso-destra{display:none}}

/* ---------- Capolettera: apre il racconto di ogni stanza ---------- */
.ath-capolettera::first-letter{float:left;font-family:var(--font-titoli);font-weight:600;
  font-size:3.5em;line-height:.82;color:var(--oro);
  margin:.08em .12em 0 0;padding-right:.04em}

/* ---------- La cornice che appare: passe-partout sulle card ---------- */
.ath-card::after{content:'';position:absolute;inset:7px;border:1px solid var(--oro-2);
  opacity:0;pointer-events:none;transition:opacity .3s}
a.ath-card:hover::after{opacity:.45}
.ath-card-sigillata::after{display:none}

/* ---------- Il ciclo di combustione: le sette parti in fila ---------- */
.ath-ciclo{list-style:none;display:flex;flex-wrap:wrap;gap:0;margin:0 0 40px;padding:0;
  counter-reset:none}
.ath-ciclo li{position:relative;flex:1 1 0;min-width:96px;text-align:center;padding-top:26px}
/* la linea che collega le sette parti: è il tiraggio del forno */
.ath-ciclo li::before{content:'';position:absolute;top:8px;left:0;right:0;height:1px;
  background:var(--linea)}
.ath-ciclo li:first-child::before{left:50%}
.ath-ciclo li:last-child::before{right:50%}
.ath-ciclo li::after{content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;border:1px solid var(--oro-2);background:var(--avorio)}
.ath-ciclo li.attuale::after{background:var(--oro);border-color:var(--oro);width:11px;height:11px;top:3px}
.ath-ciclo a{display:block;font-family:var(--font-titoli);font-size:.7rem;letter-spacing:.12em;
  color:var(--testo-dim);transition:color .2s}
.ath-ciclo a span{display:block;font-family:var(--font-corpo);font-size:.86rem;letter-spacing:0;
  margin-top:3px}
.ath-ciclo a:hover{color:var(--oro)}
.ath-ciclo li.attuale a{color:var(--oro)}
.ath-ciclo li.attuale a span{color:var(--testo)}
@media(max-width:700px){.ath-ciclo li{flex:1 1 33%;min-width:0}
  .ath-ciclo li::before{display:none}}

/* ---------- Titoli di sezione: un filetto verticale invece del vuoto ---------- */
.ath-sezione-intestazione{position:relative;padding-left:26px}
.ath-sezione-intestazione::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,var(--oro-2),rgba(201,165,92,0))}
@media(max-width:600px){.ath-sezione-intestazione{padding-left:18px}}

/* ---------- La citazione, incorniciata dal filetto ---------- */
.ath-citazione p{position:relative}
.ath-citazione p::before{content:'✦';display:block;color:var(--oro-2);font-size:.8rem;
  margin-bottom:20px;font-style:normal}

/* ---------- Banda scura: il filetto in versione chiara ---------- */
.ath-banda{position:relative}
.ath-banda::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(340px,60vw);height:1px;
  background:linear-gradient(90deg,rgba(233,199,118,0),var(--oro-3),rgba(233,199,118,0))}

/* ===================================================================
   PARTE IV — CATALOGO, SCHEDE FLUTTUANTI, CARRELLO
=================================================================== */

/* ---------- Prezzo e stato sulle card prodotto ---------- */
.ath-prezzo-riga{margin-top:auto;padding-top:16px;border-top:1px solid var(--linea);
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ath-prezzo{font-family:var(--font-titoli);font-weight:500;font-size:1.05rem;color:var(--testo)}
.ath-stato{font-family:var(--font-titoli);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 11px;border-radius:2px;border:1px solid}
.ath-stato-disponibile{color:#4a6b3f;border-color:rgba(74,107,63,.4);background:rgba(74,107,63,.07)}
.ath-stato-gratuito{color:var(--oro);border-color:var(--oro-2);background:rgba(233,199,118,.1)}
.ath-stato-in-apertura{color:var(--testo-dim);border-color:var(--linea);background:var(--avorio-2)}
.ath-stato-esaurito{color:#8a4a3c;border-color:rgba(138,74,60,.35);background:rgba(138,74,60,.06)}
.ath-card-prodotto p{margin-bottom:0}

/* ---------- Briciole di pane sulle pagine prodotto ---------- */
.ath-briciole{max-width:1400px;margin:0 auto;padding:26px 6vw 0;
  font-family:var(--font-titoli);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--testo-dim);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ath-briciole a{color:var(--testo-dim)}
.ath-briciole a:hover{color:var(--oro)}
.ath-briciole span[aria-current]{color:var(--testo)}

/* ---------- Scheda fluttuante: gerarchia e immagine ---------- */
.ath-scheda-voce.capo{border-top:1px solid var(--linea);margin-top:10px;padding-top:16px}
.ath-scheda-voce.capo:first-of-type{border-top:none;margin-top:0}
.ath-scheda-voce.capo .ath-scheda-voce-titolo{color:var(--oro);letter-spacing:.1em}
.ath-scheda-vuoto{width:2.1rem;flex-shrink:0}
.ath-scheda-immagine{border-radius:3px;overflow:hidden;margin:6px 0 14px;background:var(--avorio-2);
  aspect-ratio:16/10}
.ath-scheda-immagine img{width:100%;height:100%;object-fit:cover;display:block}
.ath-scheda-azione{width:100%;justify-content:center;margin-top:16px}
/* la scheda vive solo dentro il pannello del rail: le sue misure le
   detta quella regola, più specifica */

/* ---------- Carrello ---------- */
.ath-quantita{display:inline-flex;align-items:center;gap:12px}
.ath-quantita button{width:28px;height:28px;border:1px solid var(--linea);border-radius:2px;
  background:var(--bianco);color:var(--testo);font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.ath-quantita button:hover{border-color:var(--oro);color:var(--oro)}
.ath-quantita b{font-family:var(--font-titoli);font-weight:500;min-width:1.2em;text-align:center}
.ath-togli{background:none;border:none;font-family:var(--font-titoli);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--testo-dim);
  border-bottom:1px solid var(--linea);padding-bottom:2px;transition:color .2s,border-color .2s}
.ath-togli:hover{color:#8a4a3c;border-color:#8a4a3c}
.ath-totale{display:flex;align-items:baseline;justify-content:flex-end;gap:20px;
  padding:24px 16px;border-bottom:1px solid var(--oro-2);margin-bottom:6px}
.ath-totale span{font-family:var(--font-titoli);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--testo-dim)}
.ath-totale strong{font-family:var(--font-corpo);font-weight:400;font-size:1.8rem;color:var(--testo)}

/* ===================================================================
   PARTE V — LO SCAFFALE DELLA BIBLIOTECA
   Le coste sono elementi HTML veri: hanno testo selezionabile, ricevono
   il fuoco da tastiera e un lettore di schermo le annuncia. Lo strato
   3D si sovrappone a questo, non lo sostituisce.
=================================================================== */

.ath-sezione-scaffale{padding-bottom:40px}

/* ---------- Marcatori d'area ---------- */
.ath-marcatori{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.ath-marcatore{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-titoli);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--testo-dim);background:transparent;border:1px solid var(--linea);border-radius:2px;
  padding:9px 14px;transition:border-color .25s,color .25s}
.ath-marcatore .icona-athanor{width:.9rem;height:.9rem;color:var(--oro-2)}
.ath-marcatore b{font-weight:400;font-size:.9em;color:var(--oro);
  border-left:1px solid var(--linea);padding-left:9px;margin-left:2px}
.ath-marcatore:hover,.ath-marcatore.attiva{border-color:var(--oro);color:var(--oro)}

/* ---------- Il ripiano ---------- */
.ath-scaffale{position:relative;background:linear-gradient(180deg,var(--avorio-2),var(--avorio));
  border:1px solid var(--linea);border-radius:3px;padding:0 54px}
.ath-scaffale-pista{display:flex;align-items:flex-end;gap:34px;overflow-x:auto;overflow-y:hidden;
  height:300px;padding:30px 6px 0;scroll-behavior:smooth;scrollbar-width:none}
.ath-scaffale-pista::-webkit-scrollbar{display:none}
.ath-scaffale-pista.in-trascinamento{cursor:grabbing;scroll-behavior:auto}
.ath-scaffale-pista:focus-visible{outline:2px solid var(--oro);outline-offset:-2px}

/* il bordo di noce su cui poggiano i volumi */
.ath-ripiano-bordo{position:absolute;left:0;right:0;bottom:0;height:16px;
  background:linear-gradient(180deg,var(--ossidiana),#0A0906);
  border-top:1px solid var(--oro-2)}

.ath-settore{display:flex;flex-direction:column;flex-shrink:0}
.ath-settore-coste{display:flex;align-items:flex-end;gap:2px;height:250px}
.ath-settore-etichetta{font-family:var(--font-titoli);font-size:.56rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--oro);text-align:center;padding:6px 4px 0;
  border-top:1px solid var(--oro-2);margin-top:4px}

/* ---------- Le coste ---------- */
.ath-costa{position:relative;flex-shrink:0;width:var(--spess);height:var(--alt);
  background:var(--tinta);border:none;border-radius:1px 1px 0 0;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  box-shadow:inset -3px 0 6px rgba(0,0,0,.34),inset 3px 0 5px rgba(255,255,255,.06),
    0 3px 8px rgba(20,16,9,.22);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,filter .3s}
/* le due bande in foglia oro */
.ath-costa::before,.ath-costa::after{content:'';position:absolute;left:14%;right:14%;height:1px;
  background:var(--oro-2);opacity:.75}
.ath-costa::before{top:13%}
.ath-costa::after{bottom:13%}

.ath-costa-titolo,.ath-costa-autore{writing-mode:vertical-rl;transform:rotate(180deg);
  white-space:nowrap;overflow:hidden;max-height:66%;pointer-events:none}
.ath-costa-titolo{font-family:var(--font-titoli);font-weight:500;font-size:.6rem;
  letter-spacing:.08em;color:rgba(239,227,200,.94)}
.ath-costa-autore{font-family:var(--font-corpo);font-size:.56rem;color:rgba(239,227,200,.5);
  max-height:34%;margin-top:6px}

.ath-costa:hover{transform:translateY(-12px);filter:brightness(1.14)}
.ath-costa:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.ath-costa.estratta{transform:translateY(-26px) rotate(-1.4deg);filter:brightness(1.2);
  box-shadow:inset -3px 0 6px rgba(0,0,0,.34),0 16px 30px rgba(20,16,9,.4)}

/* ---------- Frecce ---------- */
.ath-scaffale-freccia{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--linea);
  background:var(--avorio);color:var(--testo);display:flex;align-items:center;justify-content:center;
  transition:border-color .25s,color .25s}
.ath-scaffale-freccia .icona-athanor{width:.95rem;height:.95rem}
.ath-scaffale-freccia:hover{border-color:var(--oro);color:var(--oro)}
.ath-scaffale-freccia.sinistra{left:8px}
.ath-scaffale-freccia.destra{right:8px}

/* ---------- Piede e invito al 3D ---------- */
.ath-scaffale-piede{display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-top:20px}
.ath-scaffale-aiuto{font-family:var(--font-ui);font-size:.74rem;letter-spacing:.03em;
  color:var(--testo-dim);margin:0}

/* ---------- La sala 3D, quando viene chiamata ---------- */
.ath-scaffale-3d{display:none}
.ath-scaffale-3d.attivo{display:block;height:min(64vh,540px);margin-top:24px;
  border:1px solid var(--linea);border-radius:3px;overflow:hidden;background:var(--avorio);
  cursor:grab;touch-action:none}
.ath-scaffale-3d.attivo:active{cursor:grabbing}
.ath-scaffale-3d canvas{display:block}
/* con la sala aperta lo scaffale in HTML resta, ma si fa da parte */
.scaffale-3d-attivo .ath-scaffale{opacity:.45;transition:opacity .4s}
.scaffale-3d-attivo .ath-scaffale:hover{opacity:1}

/* ---------- La scheda del volume ---------- */
.ath-volume-scheda{margin-top:30px;background:var(--bianco);border:1px solid var(--linea);
  border-radius:3px;padding:34px 32px;min-height:200px}
.ath-volume-vuoto{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:26px 10px;color:var(--testo-dim)}
.ath-volume-vuoto .icona-athanor{width:2rem;height:2rem;color:var(--oro-2);margin-bottom:14px}
.ath-volume-vuoto p{font-family:var(--font-corpo);font-size:1.02rem;margin:0}
.ath-volume-testata{margin-bottom:22px}
.ath-volume-testata h3{font-family:var(--font-corpo);font-weight:400;font-size:1.6rem;
  line-height:1.25;color:var(--testo);margin-bottom:6px}
.ath-volume-autore{font-family:var(--font-corpo);font-style:italic;font-size:1rem;color:var(--oro)}
.ath-volume-nota{font-family:var(--font-corpo);font-size:1.04rem;line-height:1.75;
  color:var(--testo-dim);margin:20px 0 24px}
.ath-volume-chiuso,.ath-volume-aperto{display:flex;flex-direction:column;align-items:flex-start;
  gap:14px;padding-top:22px;border-top:1px solid var(--linea)}
.ath-volume-chiuso p,.ath-volume-aperto p{font-family:var(--font-corpo);font-size:.98rem;
  line-height:1.7;color:var(--testo-dim);margin:0;max-width:60ch}
#ath-riponi{margin-top:24px}

@media(max-width:760px){
  .ath-scaffale{padding:0 12px}
  .ath-scaffale-freccia{display:none}
  .ath-scaffale-pista{height:250px;gap:22px}
  .ath-settore-coste{height:205px}
  .ath-volume-scheda{padding:26px 20px}
}

/* ===================================================================
   PARTE VI — MENU FLUTTUANTE A TENDINA, CAROSELLO A RIQUADRI
=================================================================== */

/* ---------- Il rail: ora sono bottoni, non link ---------- */
.ath-rail-voce{position:relative;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:none;background:transparent;border-radius:3px;
  color:var(--testo-dim);cursor:pointer;transition:color .25s,background .25s}
.ath-rail-voce .icona-athanor{width:1.25rem;height:1.25rem}
.ath-rail-voce:hover{color:var(--oro);background:rgba(233,199,118,.12)}
.ath-rail-voce.attiva{color:var(--oro);background:rgba(233,199,118,.2)}
.ath-rail-voce.qui::after{content:'';position:absolute;right:-9px;top:50%;transform:translateY(-50%);
  width:3px;height:14px;border-radius:2px;background:var(--oro)}
.ath-rail-voce:focus-visible{outline:2px solid var(--oro);outline-offset:2px}


/* ---------- La scheda dentro l'Hero si riduce scorrendo ---------- */

/* ===================================================================
   PARTE VII — LA LUNA E LO STATO DEL CIELO
=================================================================== */

.ath-chip-luna{display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 8px;
  border:1px solid var(--linea);border-radius:30px;background:transparent;color:var(--testo);
  cursor:pointer;transition:border-color .25s,color .25s}
.ath-chip-luna:hover{border-color:var(--oro);color:var(--oro)}
.ath-chip-luna svg{display:block;flex-shrink:0}
.ath-chip-luna-testo{font-family:var(--font-titoli);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;white-space:nowrap}
@media(max-width:900px){.ath-chip-luna-testo{display:none}
  .ath-chip-luna{padding:6px;border-radius:50%}}

/* ---------- Il popup del primo utilizzo ---------- */
.ath-cielo-spiega{position:fixed;inset:0;z-index:210;display:flex;align-items:center;
  justify-content:center;padding:24px;background:rgba(14,12,8,.6);backdrop-filter:blur(8px);
  opacity:0;transition:opacity .26s}
.ath-cielo-spiega.visibile{opacity:1}
.ath-cielo-spiega-scheda{max-width:480px;background:var(--avorio);border:1px solid var(--linea);
  border-radius:3px;padding:38px 34px 30px;box-shadow:0 30px 70px rgba(20,16,9,.3)}
.ath-cielo-spiega-scheda h2{font-family:var(--font-corpo);font-weight:400;font-size:1.6rem;
  color:var(--testo);margin-bottom:18px}
.ath-cielo-spiega-scheda p{font-family:var(--font-corpo);font-size:1.02rem;line-height:1.7;
  color:var(--testo-dim);margin-bottom:14px}
.ath-cielo-spiega-nota{font-size:.92rem!important;padding-left:14px;border-left:2px solid var(--oro-2)}
.ath-cielo-spiega-azioni{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------- La volta a schermo pieno ---------- */
.ath-cielo{position:fixed;inset:0;z-index:220;display:flex;flex-direction:column;
  align-items:center;background:#07060A;opacity:0;transition:opacity .3s}
.ath-cielo.visibile{opacity:1}
.ath-cielo-testata{width:100%;max-width:900px;display:flex;align-items:flex-start;
  justify-content:space-between;gap:20px;padding:26px 24px 18px}
.ath-cielo-etichetta{font-family:var(--font-titoli);font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--oro);margin-bottom:7px}
.ath-cielo-titolo{font-family:var(--font-corpo);font-size:1.1rem;color:var(--avorio-2);
  text-transform:capitalize}
.ath-cielo-chiudi{background:none;border:1px solid rgba(233,199,118,.4);border-radius:3px;
  padding:8px 14px;font-family:var(--font-titoli);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--oro-3);cursor:pointer}
.ath-cielo-chiudi:hover{border-color:var(--oro-3);color:#fff}
.ath-cielo canvas{border-radius:50%;box-shadow:0 0 80px rgba(201,165,92,.14)}
.ath-cielo-piede{width:100%;max-width:900px;padding:22px 24px 30px;display:grid;gap:20px;
  grid-template-columns:minmax(240px,1fr) 2fr;align-items:start}
.ath-cielo-luna{display:flex;gap:16px;align-items:flex-start;color:var(--avorio-2);
  font-family:var(--font-corpo);font-size:.94rem;line-height:1.6}
.ath-cielo-luna b{font-family:var(--font-titoli);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--oro-3)}
.ath-cielo-disco{color:#EEF1F5;flex-shrink:0}
.ath-cielo-segni{color:var(--oro-3);font-style:italic}
.ath-cielo-astri{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.ath-cielo-astro{font-family:var(--font-corpo);font-size:.88rem;color:var(--avorio-2);line-height:1.4}
.ath-cielo-astro b{color:var(--oro-3);font-size:1.05rem;margin-right:4px}
.ath-cielo-astro small{color:rgba(232,223,201,.5);font-size:.78rem}
.ath-cielo-astro.sotto{opacity:.38}
@media(max-width:760px){.ath-cielo-piede{grid-template-columns:1fr}
  .ath-cielo-astri{grid-template-columns:repeat(2,1fr)}}

/* ---------- Scaffale continuo: i divisori d'area stanno DENTRO la fila ---------- */
.ath-scaffale-pista{gap:2px}
.ath-divisorio{flex-shrink:0;width:26px;height:100%;display:flex;align-items:flex-end;
  justify-content:center;padding-bottom:16px;margin:0 12px;
  background:linear-gradient(180deg,rgba(26,22,16,0),var(--ossidiana) 22%);
  border-radius:1px}
.ath-divisorio span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font-family:var(--font-titoli);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro-3)}
.ath-scaffale-pista .ath-costa{align-self:flex-end}

/* ===================================================================
   PARTE VIII — GLI ELEMENTI DI DESIGN
   Ricostruiti dal file athanor_ui_elements.html: vetro, tasto oro con
   sezione Ixora, pillola del menu con la sfera bianca bordata d'oro.
   Le misure e i colori vengono da lì, tradotti nelle variabili di
   Athanor perché restino governati da un solo posto.
=================================================================== */

/* ---------- Vetro ---------- */
.vetro-chiaro{background:rgba(255,255,255,.42);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 10px 40px rgba(20,16,9,.15),0 0 20px rgba(255,255,255,.3),
    inset 0 0 15px rgba(255,255,255,.5)}
.vetro-scuro{background:rgba(249,247,241,.15);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.4);
  box-shadow:0 8px 32px rgba(0,0,0,.28),inset 0 0 10px rgba(255,255,255,.2)}

/* ---------- IL TASTO ORO ----------
   Corpo in oro pieno, sezione destra con il sigillo Ixora su gradiente
   diagonale chiaro-scuro. Al passaggio i colori si invertono: fondo
   avorio e testo oro, con il sigillo che resta acceso. */
.ath-btn-ixora{display:inline-flex;align-items:stretch;gap:0;padding:0;overflow:hidden;
  border:1px solid var(--oro);border-radius:4px;background:var(--oro);
  transition:background .3s,color .3s,border-color .3s}
.ath-btn-ixora .ath-btn-testo{display:flex;align-items:center;padding:17px 30px;
  font-family:var(--font-titoli);font-weight:500;font-size:.76rem;letter-spacing:.19em;
  text-transform:uppercase;color:#fff;transition:color .3s;white-space:nowrap}
.ath-btn-ixora .ath-btn-sigillo{display:flex;align-items:center;justify-content:center;
  width:56px;flex-shrink:0;background:linear-gradient(135deg,#FCF3C5 0%,#C49C5A 100%);
  transition:background .3s}
.ath-btn-ixora .ath-btn-sigillo .icona-athanor{width:1.15rem;height:1.15rem;color:#fff;
  filter:drop-shadow(0 1px 2px rgba(120,90,30,.35));transition:color .3s}
/* In hover il tasto si inverte per intero: fondo avorio, testo e sigillo
   in oro. Il gradiente della colonna destra sparisce — restava acceso e
   rendeva il sigillo illeggibile sul chiaro. */
.ath-btn-ixora:hover,.ath-btn-ixora:focus-visible{background:var(--avorio);border-color:var(--oro)}
.ath-btn-ixora:hover .ath-btn-testo,.ath-btn-ixora:focus-visible .ath-btn-testo{color:var(--oro)}
.ath-btn-ixora:hover .ath-btn-sigillo,.ath-btn-ixora:focus-visible .ath-btn-sigillo{
  background:transparent;border-left:1px solid rgba(201,165,92,.35)}
.ath-btn-ixora:hover .ath-btn-sigillo .icona-athanor,
.ath-btn-ixora:focus-visible .ath-btn-sigillo .icona-athanor{color:var(--oro);filter:none}
.ath-btn-ixora:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

/* ---------- IL MENU FLUTTUANTE: pillola di vetro ---------- */
.ath-rail{background:rgba(249,247,241,.55);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.62);
  border-radius:38px;box-shadow:0 8px 32px rgba(20,16,9,.16),inset 0 0 10px rgba(255,255,255,.4);
  padding:12px 9px;gap:6px}
/* il filo luminoso fra un'icona e l'altra */
.ath-rail-voce + .ath-rail-voce::before{content:'';position:absolute;top:-4px;left:18%;right:18%;
  height:1px;background:linear-gradient(90deg,transparent,rgba(201,165,92,.5),transparent)}

/* la sfera bianca col bordo in oro: hover e selezionato */
.ath-rail-voce{position:relative;width:44px;height:44px;border-radius:50%;
  background:transparent;border:1px solid transparent;color:var(--testo-dim);
  transition:background .28s,border-color .28s,color .28s,box-shadow .28s}
/* La sfera bianca bordata d'oro segna UNA sola voce per volta: quella
   aperta. Il segno "sei in questa sezione" è più discreto — un filo
   d'oro sul fianco — altrimenti due tasti sembrano selezionati insieme. */
.ath-rail-voce:hover,.ath-rail-voce.attiva{
  background:var(--avorio);border-color:var(--oro);color:var(--oro);
  box-shadow:0 2px 12px rgba(201,165,92,.3),inset 0 0 8px rgba(255,255,255,.7)}
.ath-rail-voce.qui:not(.attiva){color:var(--oro)}
.ath-rail-voce.qui:not(.attiva)::after{content:'';position:absolute;right:-8px;top:50%;
  transform:translateY(-50%);width:2px;height:16px;border-radius:2px;background:var(--oro-2)}

/* ---------- La finestra del menu ----------

   ALTEZZA FISSA E CENTRATURA IDENTICA AL RAIL.

   Il difetto precedente: il rail è ancorato al centro del viewport
   (top:50% + translateY(-50%)), mentre il pannello era centrato con
   flexbox dentro un contenitore che partiva sotto l'intestazione.
   Due riferimenti diversi, quindi due centri diversi — e con una
   scheda alta il divario diventava evidente, con la finestra tagliata
   in cima.

   Ora il pannello usa ESATTAMENTE lo stesso ancoraggio del rail. E ha
   un'altezza fissa, uguale per tutte e cinque le voci: la finestra non
   cambia più misura passando da una sezione all'altra, e translateY(-50%)
   su un'altezza nota dà un centro esatto invece che dipendente dal
   contenuto.

   Dentro: intestazione e bottone restano fermi, l'elenco delle voci
   scorre solo se la sezione ne ha più di quante ne stiano. */

:root{
  --rail-margine: 26px;   /* distanza del rail dal bordo destro */
  --rail-largo: 64px;     /* icona 44 + padding 9+9 + bordi 2 */
  --pannello-largo: 475px;
  --pannello-alto: 600px;
}

.ath-rail-pannelli{position:static}   /* il contenitore non posiziona nulla */

.ath-rail-pannello{
  position:fixed;
  top:50%;
  transform:translateY(-50%) translateX(16px);
  right:calc(var(--rail-margine) + var(--rail-largo) + 16px);
  width:min(var(--pannello-largo), calc(100vw - 130px));
  height:min(var(--pannello-alto), calc(100vh - 90px));
  z-index:95;
  opacity:0;pointer-events:none;
  transition:opacity .24s ease,transform .24s ease}
.ath-rail-pannello[hidden]{display:none}
.ath-rail-pannello.aperto{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto}

.ath-rail-pannello .ath-scheda-hero{
  /* Azzera il posizionamento che la scheda porta da quando viveva dentro
     l'Hero: senza questo, il suo transform residuo la spingeva in su di
     metà della propria altezza. */
  position:static;top:auto;right:auto;bottom:auto;left:auto;transform:none;
  width:100%;height:100%;
  display:flex;flex-direction:column;
  max-height:none;overflow:hidden;
  background:rgba(255,255,255,.52);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.72);border-radius:14px;padding:24px 22px;
  box-shadow:0 12px 44px rgba(20,16,9,.18),0 0 20px rgba(255,255,255,.3),
    inset 0 0 15px rgba(255,255,255,.5)}

/* l'intestazione della scheda non scorre */
.ath-rail-pannello .ath-scheda-hero > h2,
.ath-rail-pannello .ath-scheda-hero > .ath-scheda-sotto,
.ath-rail-pannello .ath-scheda-hero > .ath-scheda-immagine{flex-shrink:0}

/* le voci: occupano lo spazio che resta e scorrono solo se serve */
.ath-rail-pannello .ath-scheda-voce{flex-shrink:0}
.ath-rail-pannello .ath-scheda-voci{flex:1;min-height:0;overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:rgba(201,165,92,.5) transparent;margin:0 -6px;padding:0 6px}
.ath-rail-pannello .ath-scheda-voci::-webkit-scrollbar{width:4px}
.ath-rail-pannello .ath-scheda-voci::-webkit-scrollbar-thumb{
  background:rgba(201,165,92,.45);border-radius:2px}
.ath-rail-pannello .ath-scheda-voci::-webkit-scrollbar-track{background:transparent}

/* il bottone resta appoggiato in fondo, sempre alla stessa altezza */
.ath-rail-pannello .ath-scheda-azione{flex-shrink:0;margin-top:16px}

@media(max-width:900px){
  .ath-rail-pannello{
    position:fixed;top:auto;right:10px;left:10px;
    bottom:calc(62px + env(safe-area-inset-bottom,0px));
    width:auto;height:auto;max-height:64vh;
    transform:translateY(20px)}
  .ath-rail-pannello.aperto{transform:translateY(0)}
  .ath-rail-pannello .ath-scheda-hero{height:auto;max-height:64vh;
    border-radius:16px 16px 8px 8px}
}

/* ---------- Le voci: titolo e sottotitolo su due righe ---------- */
.ath-scheda-voce{display:flex;align-items:flex-start;gap:13px;padding:11px 13px;
  border-radius:6px;position:relative;z-index:1;transition:all .3s ease}
.ath-scheda-voce::before{content:'';position:absolute;inset:0;border-radius:6px;z-index:-1;
  background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(201,165,92,.22) 100%);
  opacity:0;transition:opacity .3s ease}
.ath-scheda-voce:hover::before{opacity:1}
.ath-scheda-voce-corpo{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.ath-scheda-voce-titolo{display:block;font-family:var(--font-titoli);font-weight:500;
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--testo);
  line-height:1.3}
.ath-scheda-voce-sotto{display:block;font-family:var(--font-corpo);font-size:.92rem;
  line-height:1.4;color:var(--testo-dim);
  /* due righe al massimo, poi i puntini: mai una barra di scorrimento */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ath-scheda-voce .ath-freccia-mini{opacity:0;transform:translateX(-8px);align-self:center;
  transition:all .3s ease;color:var(--oro);width:.85rem;height:.85rem;flex-shrink:0}
.ath-scheda-voce:hover .ath-freccia-mini{opacity:1;transform:translateX(0)}
.ath-scheda-hero h2{font-family:var(--font-titoli);font-weight:500;font-size:.86rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--testo);margin-bottom:5px}
.ath-scheda-sotto{font-family:var(--font-corpo);font-size:.94rem;line-height:1.5;
  color:var(--testo-dim);margin-bottom:14px}

/* ---------- Le diapositive dell'Hero ---------- */
.ath-hero-corpo{transition:opacity .26s ease,transform .26s ease}
.ath-hero-corpo.in-cambio{opacity:0;transform:translateY(10px)}
.ath-hero-sfondo img{animation:respiro-hero 18s ease-in-out infinite alternate}
@keyframes respiro-hero{from{transform:scale(1)}to{transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.ath-hero-sfondo img{animation:none}}

/* ---------- CAROSELLO ----------
   La fotografia riempie la propria metà fino ai bordi della card: non
   ha margini bianchi attorno. Il bianco che si vede è lo sfondo della
   card, e compare solo dietro al testo. Il taglio fra i due non è netto:
   la foto sfuma dentro l'avorio con una maschera. */
.ath-carousel-scheda{position:relative;display:grid;grid-template-columns:52% 48%;
  align-items:stretch;flex:0 0 auto;width:400px;min-height:220px;
  background:var(--bianco);border:1px solid var(--linea);border-radius:16px;
  overflow:hidden;box-shadow:0 8px 26px rgba(20,16,9,.09);
  transition:border-color .3s,transform .3s,box-shadow .3s}
.ath-carousel-scheda:hover{border-color:var(--oro-2);transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(20,16,9,.14)}

.ath-carousel-media{position:relative;display:block;overflow:hidden;
  background:linear-gradient(150deg,var(--avorio-2),var(--avorio-3))}
.ath-carousel-media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(to right,#000 62%,transparent 100%);
  mask-image:linear-gradient(to right,#000 62%,transparent 100%)}

.ath-carousel-corpo{display:flex;flex-direction:column;justify-content:center;
  padding:28px 26px 28px 10px;gap:10px;background:transparent;position:relative;z-index:2}
/* Il nome sulla card. Si chiama "nome" e non "titolo" perché
   .ath-carousel-titolo è già l'intestazione della sezione — due elementi
   diversi con la stessa classe si sovrascrivevano a vicenda. */
.ath-carousel-nome{font-family:var(--font-titoli);font-weight:500;font-size:.84rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--testo)}
.ath-carousel-sotto{font-family:var(--font-corpo);font-size:1.04rem;line-height:1.45;
  color:var(--testo-dim)}
.ath-carousel-freccia{margin-top:10px;color:var(--oro);transition:transform .3s}
.ath-carousel-freccia .icona-athanor{width:1.4rem;height:1.4rem}
.ath-carousel-scheda:hover .ath-carousel-freccia{transform:translateX(6px)}

@media(max-width:620px){
  .ath-carousel-scheda{width:300px;grid-template-columns:1fr;min-height:0}
  .ath-carousel-media{min-height:150px}
  .ath-carousel-media img{-webkit-mask-image:none;mask-image:none}
  .ath-carousel-corpo{padding:22px}
}

/* ---------- Il tasto oro vale anche fuori dall'Hero ---------- */
.ath-scheda-azione{width:100%}
.ath-scheda-azione .ath-btn-testo{flex:1;justify-content:center;padding:15px 20px}


/* ---------- I pallini dell'Hero ---------- */
.ath-hero-punti{position:absolute;left:6vw;bottom:38px;z-index:6;display:flex;gap:10px}
.ath-hero-punto{width:30px;height:3px;border:none;padding:0;border-radius:2px;
  background:rgba(20,16,9,.18);cursor:pointer;transition:background .3s,width .3s}
.ath-hero-punto:hover{background:rgba(201,165,92,.6)}
.ath-hero-punto.attivo{background:var(--oro);width:48px}
.ath-hero-punto:focus-visible{outline:2px solid var(--oro);outline-offset:4px}
/* la barra scorre da sola finché la rotazione è attiva */
.ath-hero-punto.attivo::after{content:'';display:block;height:100%;border-radius:2px;
  background:var(--oro-3);width:0;animation:avanza-diapositiva 10s linear forwards}
.ath-hero-punti.in-pausa .ath-hero-punto.attivo::after{animation:none}
@keyframes avanza-diapositiva{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.ath-hero-punto.attivo::after{animation:none}}
@media(max-width:760px){.ath-hero-punti{bottom:24px}}

/* ---------- L'Hero regge anche senza fotografia ----------
   Finché le immagini non sono caricate, lo sfondo non deve restare
   bianco: un velo di avorio caldo con una vena d'oro tiene la scena. */
.ath-hero-sfondo{background:
  radial-gradient(120% 90% at 78% 30%, rgba(233,199,118,.20) 0%, rgba(233,199,118,0) 60%),
  linear-gradient(160deg, var(--avorio) 0%, var(--avorio-2) 55%, var(--avorio-3) 100%)}
.ath-testata-sfondo{background:linear-gradient(160deg,var(--avorio) 0%,var(--avorio-2) 100%)}

/* ===================================================================
   PARTE IX — DASHBOARD A SCHEDE
=================================================================== */
.ath-schede-barra{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:28px;
  padding-bottom:0;border-bottom:1px solid var(--linea)}
.ath-scheda-tasto{position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:13px 20px;background:transparent;border:none;border-bottom:2px solid transparent;
  font-family:var(--font-titoli);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--testo-dim);cursor:pointer;transition:color .25s,border-color .25s;
  margin-bottom:-1px}
.ath-scheda-tasto .icona-athanor{width:1rem;height:1rem}
.ath-scheda-tasto:hover{color:var(--oro)}
.ath-scheda-tasto.attivo{color:var(--oro);border-bottom-color:var(--oro)}
.ath-scheda-tasto:focus-visible{outline:2px solid var(--oro);outline-offset:-2px}
.ath-scheda-conta{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--oro);color:#fff;font-family:var(--font-ui);font-size:.68rem;
  font-weight:500;letter-spacing:0}
.ath-scheda-conta[hidden]{display:none}

.ath-scheda-pannello{display:none;animation:entra-scheda .28s ease}
.ath-scheda-pannello.aperto{display:block}
@keyframes entra-scheda{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ath-scheda-pannello{animation:none}}
@media(max-width:700px){
  .ath-schede-barra{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .ath-schede-barra::-webkit-scrollbar{display:none}
  .ath-scheda-tasto{white-space:nowrap;padding:12px 15px}
}

/* ---------- Gestione della Biblioteca dal pannello del Custode ---------- */
.db-azioni{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
.db-azioni input[type=search],.db-azioni select{padding:12px 16px;border:1px solid var(--linea);
  border-radius:3px;background:var(--bianco);font-family:var(--font-corpo);font-size:.98rem;
  color:var(--testo)}
.db-azioni input[type=search]{flex:1;min-width:200px}
.db-azioni input:focus,.db-azioni select:focus{outline:none;border-color:var(--oro)}
#db-esporta{padding:12px 18px;border:1px solid var(--oro-2);border-radius:3px;background:transparent;
  font-family:var(--font-titoli);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oro);cursor:pointer;transition:background .25s,color .25s}
#db-esporta:hover{background:var(--oro);color:#fff}

.db-scaffale{margin-bottom:34px;background:var(--bianco);border:1px solid var(--linea);
  border-radius:14px;padding:24px 22px}
.db-scaffale-nome{display:flex;align-items:center;gap:11px;font-family:var(--font-titoli);
  font-weight:500;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--testo);
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--linea)}
.db-scaffale-nome .icona-athanor{width:1.1rem;height:1.1rem;color:var(--oro)}
.db-scaffale-nome b{margin-left:auto;font-family:var(--font-ui);font-weight:400;font-size:.82rem;
  letter-spacing:0;color:var(--testo-dim)}

.db-categoria{margin-bottom:18px}
.db-categoria-nome{font-family:var(--font-titoli);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro);margin-bottom:9px}
.db-categoria-nome b{font-family:var(--font-ui);font-weight:400;color:var(--testo-dim);
  letter-spacing:0;margin-left:5px}

.db-volume{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:6px;
  transition:background .2s}
.db-volume:hover{background:var(--avorio-2)}
.db-costa{width:5px;height:30px;border-radius:2px;flex-shrink:0}
.db-volume-corpo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.db-volume-corpo b{font-family:var(--font-corpo);font-weight:400;font-size:1.02rem;color:var(--testo)}
.db-volume-corpo small{font-family:var(--font-ui);font-size:.76rem;color:var(--testo-dim)}
.db-volume-stato{font-family:var(--font-titoli);font-size:.54rem;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 9px;border-radius:2px;border:1px solid var(--linea);
  color:var(--testo-dim);flex-shrink:0}
.db-volume-stato.libero{color:var(--oro);border-color:var(--oro-2);background:rgba(233,199,118,.1)}
.db-mod,.db-el{background:none;border:1px solid var(--linea);border-radius:3px;padding:6px 11px;
  font-family:var(--font-titoli);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--testo-dim);cursor:pointer;flex-shrink:0;transition:border-color .2s,color .2s}
.db-mod:hover{border-color:var(--oro);color:var(--oro)}
.db-el:hover{border-color:#8a4a3c;color:#8a4a3c}
.db-vuoto{font-family:var(--font-corpo);color:var(--testo-dim);font-style:italic;padding:8px 0}

#db-modale{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(14,12,8,.55);backdrop-filter:blur(8px)}
#db-modale[hidden]{display:none}
.db-cornice{width:min(560px,94vw);max-height:88vh;overflow-y:auto;background:var(--avorio);
  border:1px solid var(--linea);border-radius:14px;padding:32px 30px}
.db-cornice h3{font-family:var(--font-corpo);font-weight:400;font-size:1.5rem;color:var(--testo);
  margin-bottom:22px}
.db-campo{margin-bottom:16px;flex:1}
.db-campo label{display:block;font-family:var(--font-titoli);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--testo-dim);margin-bottom:6px}
.db-campo input,.db-campo select,.db-campo textarea{width:100%;padding:11px 14px;
  border:1px solid var(--linea);border-radius:3px;background:var(--bianco);
  font-family:var(--font-corpo);font-size:1rem;color:var(--testo)}
.db-campo input[type=color]{padding:4px;height:44px;cursor:pointer}
.db-campo input:focus,.db-campo select:focus,.db-campo textarea:focus{outline:none;border-color:var(--oro)}
.db-riga{display:flex;gap:14px}
.db-modale-azioni{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;
  padding-top:20px;border-top:1px solid var(--linea)}
.db-modale-azioni button{padding:13px 22px;border-radius:3px;border:1px solid var(--linea);
  background:transparent;font-family:var(--font-titoli);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--testo-dim);cursor:pointer;transition:all .25s}
.db-modale-azioni button:hover{border-color:var(--oro);color:var(--oro)}
.db-modale-azioni .db-principale{background:var(--oro);border-color:var(--oro);color:#fff}
.db-modale-azioni .db-principale:hover{background:var(--ossidiana);border-color:var(--ossidiana);
  color:var(--oro-3)}
@media(max-width:600px){.db-riga{flex-direction:column;gap:0}}

/* ---------- Biblioteca: atrio e scaffali tematici ---------- */
.ath-card-scaffale .ath-card-categorie{font-family:var(--font-ui);font-size:.74rem;
  line-height:1.5;color:var(--testo-dim);padding:10px 0 14px;margin-bottom:4px;
  border-top:1px solid var(--linea)}
.ath-indice-categorie{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px;
  padding-bottom:22px;border-bottom:1px solid var(--linea)}
.ath-indice-categorie a{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-titoli);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--testo-dim);border:1px solid var(--linea);border-radius:2px;padding:9px 14px;
  transition:border-color .25s,color .25s}
.ath-indice-categorie a:hover{border-color:var(--oro);color:var(--oro)}
.ath-indice-categorie b{font-family:var(--font-ui);font-weight:400;font-size:.9em;
  letter-spacing:0;color:var(--oro);padding-left:8px;border-left:1px solid var(--linea)}
.ath-categoria-blocco{margin-bottom:46px;scroll-margin-top:120px}
.ath-categoria-titolo{display:flex;align-items:center;gap:12px;font-family:var(--font-titoli);
  font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--oro);
  margin-bottom:18px}
.ath-categoria-titolo::after{content:'';flex:1;height:1px;background:var(--linea)}
.ath-categoria-titolo b{order:3;font-family:var(--font-ui);font-weight:400;font-size:.92rem;
  letter-spacing:0;color:var(--testo-dim)}
a.ath-marcatore{text-decoration:none}

/* ===================================================================
   PARTE X — USABILITÀ SU TELEFONO
   Tre principi: bersagli da 44px, comandi nella zona del pollice,
   niente che si muova da solo mentre si legge.
=================================================================== */

@media(max-width:900px){
  /* ---------- IL RAIL DIVENTA UNA BARRA IN BASSO ----------
     Sul bordo destro a metà altezza il pollice non arriva. In basso sì:
     è la zona raggiungibile su qualunque telefono, anche a una mano. */
  .ath-rail{position:fixed;top:auto;bottom:0;left:0;right:0;transform:none;
    flex-direction:row;justify-content:space-around;align-items:center;
    gap:0;padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
    border-radius:0;border-left:none;border-right:none;border-bottom:none;
    box-shadow:0 -8px 30px rgba(20,16,9,.14)}

  /* 44px pieni: sotto quella misura si sbaglia bersaglio. Prima erano 28. */
  .ath-rail-voce{width:52px;height:44px;border-radius:12px}
  .ath-rail-voce .icona-athanor{width:1.35rem;height:1.35rem}
  .ath-rail-voce + .ath-rail-voce::before{display:none}

  /* la pagina lascia spazio alla barra, così l'ultimo contenuto si vede */
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}
  .ath-footer{margin-bottom:0}
}

@media(max-width:900px){
  /* ---------- L'Hero non si muove da solo ----------
     Su schermo stretto i testi vanno a capo, la lettura è più lenta e un
     contenuto che cambia da sé mentre leggi è solo fastidioso. Qui si
     passa da una diapositiva all'altra scorrendo di lato. */
  .ath-hero-punti{position:static;justify-content:center;padding:22px 0 4px}
  .ath-hero-punto{width:36px;height:4px}
  .ath-hero-punto.attivo{width:56px}
  .ath-hero-punto.attivo::after{animation:none}
}

/* ---------- Bersagli tattili: nessuno sotto i 44px ---------- */
@media(pointer:coarse){
  .ath-icona-btn,.ath-scaffale-freccia,.ath-carousel-frecce button,
  .ath-quantita button,.ath-ricerca button{min-width:44px;min-height:44px}
  .ath-scheda-voce{padding:14px 13px}
  .ath-marcatore,.ath-indice-categorie a{padding:12px 16px}
  .ath-btn-ixora .ath-btn-testo{padding:16px 26px}
  .ath-nav-mobile a{padding:16px 6vw}
  .db-mod,.db-el{min-height:38px;padding:8px 13px}
}

/* ---------- Tabelle: su telefono diventano schede impilate ----------
   Tredici colonne in scorrimento orizzontale sono illeggibili. Ogni riga
   diventa una scheda e ogni cella porta la propria etichetta, presa
   dall'intestazione con data-etichetta. */
@media(max-width:700px){
  .ath-tabella-schede thead{position:absolute;left:-9999px}
  .ath-tabella-schede,.ath-tabella-schede tbody,.ath-tabella-schede tr,
  .ath-tabella-schede td{display:block;width:100%}
  .ath-tabella-schede tr{background:var(--bianco);border:1px solid var(--linea);
    border-radius:12px;padding:16px 18px;margin-bottom:14px}
  .ath-tabella-schede td{display:grid;grid-template-columns:minmax(90px,38%) 1fr;
    gap:12px;padding:8px 0;border:none;border-bottom:1px solid var(--linea)}
  .ath-tabella-schede td:last-child{border-bottom:none;padding-bottom:0}
  .ath-tabella-schede td::before{content:attr(data-etichetta);
    font-family:var(--font-titoli);font-size:.56rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--testo-dim);padding-top:3px}
  .ath-tabella-schede td[data-etichetta=""]::before{display:none}
  /* la prima cella fa da titolo della scheda */
  .ath-tabella-schede td:first-child{grid-template-columns:1fr;gap:2px;
    padding-top:0;font-size:1.08rem;color:var(--testo)}
  .ath-tabella-schede td:first-child::before{font-size:.52rem;margin-bottom:2px}
}

/* ---------- La Biblioteca su telefono: elenco, non scaffale ----------
   Coste verticali alte 250px in scorrimento orizzontale non si leggono
   su uno schermo stretto. Qui diventano righe: costa piccola a sinistra,
   titolo e autore a destra. */
@media(max-width:760px){
  .ath-scaffale{padding:0;background:transparent;border:none}
  .ath-scaffale-pista{display:block;height:auto;overflow:visible;padding:0}
  .ath-settore{display:block;margin-bottom:22px}
  .ath-settore-coste{display:block;height:auto}
  .ath-settore-etichetta{text-align:left;border-top:none;border-bottom:1px solid var(--oro-2);
    padding:0 0 8px;margin:0 0 10px}
  .ath-divisorio{display:none}
  .ath-costa{display:flex;align-items:center;gap:14px;width:100%!important;
    height:auto!important;min-height:56px;padding:12px 14px;margin-bottom:6px;
    background:var(--bianco);border:1px solid var(--linea);border-left:5px solid var(--tinta);
    border-radius:8px;box-shadow:none;transform:none!important}
  .ath-costa::before,.ath-costa::after{display:none}
  .ath-costa-titolo,.ath-costa-autore{writing-mode:horizontal-tb;transform:none;
    max-height:none;text-align:left;white-space:normal}
  .ath-costa-titolo{font-size:.72rem;color:var(--testo);letter-spacing:.1em}
  .ath-costa-autore{font-size:.86rem;color:var(--testo-dim);margin:2px 0 0}
  .ath-costa.estratta{border-color:var(--oro);background:rgba(233,199,118,.1)}
  .ath-ripiano-bordo{display:none}
}

/* ---------- Rispetto delle tacche e dei bordi curvi ---------- */
@supports(padding:env(safe-area-inset-left)){
  .ath-header{padding-left:max(4vw,env(safe-area-inset-left));
    padding-right:max(4vw,env(safe-area-inset-right))}
}

/* ---------- Il menu mobile sale dal basso ----------
   L'hamburger resta in alto perché è dove lo si cerca, ma il pannello
   si apre verso l'alto partendo dal fondo: le voci finiscono nella zona
   che il pollice raggiunge senza spostare la mano. */
@media(max-width:980px){
  .ath-nav-mobile{position:fixed;left:0;right:0;bottom:0;top:auto;
    max-height:0;overflow:hidden;z-index:110;
    background:var(--avorio);border-top:1px solid var(--linea);
    box-shadow:0 -14px 40px rgba(20,16,9,.18);
    transition:max-height .32s cubic-bezier(.3,.8,.3,1)}
  .ath-nav-mobile.aperto{max-height:80vh;overflow-y:auto}
  .ath-nav-mobile-corpo{padding:14px 0 calc(74px + env(safe-area-inset-bottom,0px))}
  .ath-nav-mobile a{display:flex;align-items:center;gap:14px;
    font-family:var(--font-titoli);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--testo);padding:17px 6vw;border-bottom:1px solid var(--linea)}
  .ath-nav-mobile a:last-child{border-bottom:none}
  .ath-nav-mobile a.attivo{color:var(--oro)}
  .ath-nav-mobile-extra{color:var(--testo-dim)!important;font-size:.7rem!important}
  .ath-nav-mobile-extra .icona-athanor{width:1.05rem;height:1.05rem;color:var(--oro)}
}

/* ---------- Moduli di contatto ---------- */
.ath-avvisami{margin-top:20px;padding-top:20px;border-top:1px solid var(--linea)}
.ath-avvisami label{display:block;font-family:var(--font-corpo);font-size:.94rem;
  line-height:1.5;color:var(--testo-dim);margin-bottom:11px}
.ath-avvisami-riga{display:flex;gap:10px;flex-wrap:wrap}
.ath-avvisami input[type=email]{flex:1;min-width:180px;padding:15px 18px;
  border:1px solid var(--linea);border-radius:3px;background:var(--bianco);
  font-family:var(--font-corpo);font-size:1rem;color:var(--testo)}
.ath-avvisami input[type=email]:focus{outline:none;border-color:var(--oro)}
.ath-esito-modulo{margin-top:12px;font-family:var(--font-corpo);font-size:.94rem;
  line-height:1.5;padding-left:13px;border-left:2px solid var(--oro-2);color:var(--testo-dim)}
.ath-esito-modulo.errore{border-left-color:#8a4a3c;color:#8a4a3c}
.ath-esito-modulo[hidden]{display:none}
.ath-avvisami-banda{max-width:560px;margin:0 auto;border-top:none;padding-top:0}
.ath-avvisami-banda input[type=email]{background:rgba(251,248,242,.12);
  border-color:rgba(233,199,118,.4);color:var(--avorio)}
.ath-avvisami-banda input::placeholder{color:rgba(232,223,201,.5)}
.ath-avvisami-banda .ath-esito-modulo{color:var(--avorio-3);border-left-color:var(--oro-3)}
.ath-card-quiz{border-style:solid;border-color:var(--oro-2)}
.ath-footer-legali button{background:none;border:none;font:inherit;color:inherit;cursor:pointer;
  padding:0;text-decoration:none}
.ath-footer-legali button:hover{color:var(--oro-3)}