/* ============================================================
   Ardea — il vestito di Giuseppe Noschese
   ============================================================
   Tema FIGLIO di Bento, dalla bozza approvata da Marco il 28/10/26 (addiplatform/bozze/tema-ardea, direzione A): il
   browser carica prima il foglio di Bento e poi questo. Scuro, con la luce blu che si muove dietro il ritratto, i
   riquadri che si accendono col mouse, i loghi che scorrono, il muro delle testimonianze. Moderno e animato, ma senza
   i segni da «prodotto IA» (niente etichette a pillola sopra i titoli, scritte sfumate, griglie di puntini, badge che
   galleggiano, file di faccine, grafici finti; frecce dritte).

   ⚠️ COME È FATTO. Tutto quello che il core e gli addon stampano si veste coi NOMI di Bento (--bt-card, --bt-ink,
   --bt-accent…: REGOLE_DEI_TEMI, regola 4): qui sotto quei nomi prendono i valori di Ardea, e negozio, cassa, area
   riservata, finestre e pezzi appesi al corpo si vestono da soli. Il resto è il disegno della bozza. Niente colori
   scritti a mano: solo var(--…) e mescole (le eccezioni sono i loghi dei pagamenti, coi colori dei loro marchi, e il
   nero delle maschere, che non è un colore ma una trasparenza).

   Le classi del tema cominciano con «a-» (Ardea); le variabili della tavolozza con «--ar-». Le pagine disegnate dal
   tema stanno dentro <main class="a-main">: lì valgono gli azzeramenti della bozza (margini, elenchi, titoli), che
   fuori romperebbero le pagine del core.

   ⚠️ OGNI «:hover» STA DENTRO @media (hover: hover): col dito il passaggio resta acceso dopo il tocco, e sul telefono
   sembra un difetto (la regola dei tre browser, 15/10/26).
   ============================================================ */

/* ---------- il carattere, servito da noi ----------
   Geist variabile (300-800). ⚠️ NON DA fonts.gstatic.com: un carattere chiesto a Google è un indirizzo IP mandato a un
   terzo prima del consenso. */
@font-face {
  font-family: 'Geist Ardea';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/themes/ardea/fonts/Geist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Ardea';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/themes/ardea/fonts/Geist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- la tavolozza ----------
   Il pannello la legge da qui (solo variabili, fuori dai @media) e le dà i nomi del manifest. Valgono anche sul cancello
   del sito chiuso (body.addi-privato).
   ⚠️ OGNI FONDO GRANDE È UN COLORE DELLA TAVOLOZZA, scritto in esadecimale (28/10/26). Prima il fondo, i riquadri e la
   luce si ricavavano dal blu con color-mix: il banco delle pagine li dava «fuori tavolozza» (45 rossi) e, siccome
   Chrome scrive i colori mescolati come color(srgb 0…1), ne leggeva il contrasto come nero su nero (1,00). I valori sono
   quelli esatti delle mescole di prima: il disegno è lo stesso. Solo i fili e i vetri (trasparenze) restano mescole. */
body.bt-theme, .bt-page, body.addi-privato {
  --ar-blu:       #1565C0;   /* il blu del marchio: cerchio dei pulsanti, la luce che si muove, le scelte */
  --ar-luce:      #85AFDE;   /* la luce chiara: la parola accesa, i link, i riflessi */
  --ar-notte:     #0B0245;   /* il blu notte delle luci dell'apertura */
  --ar-fondo:     #04011C;   /* il fondo della pagina */
  --ar-fondo-2:   #07012B;   /* il fondo di finestre, menu e pannelli */
  --ar-cella:     #080835;   /* il fondo dei riquadri */
  --ar-carta-blu: #0C235E;   /* il fondo delle carte blu («Non trovi quello che cerchi?») */
  --ar-bianco:    #FFFFFF;   /* titoli, testo, pulsanti pieni */
  --ar-testo-2:   #D0E0F2;   /* il testo secondario */
  --ar-bianco-2:  #DAE6F5;   /* il bianco dei pulsanti col mouse sopra */
  --ar-scelta:    #0A194F;   /* il fondo leggero delle scelte fatte */
  --ar-nero:      #000000;   /* le scritte sui pulsanti bianchi */
  --ar-giallo:    #FBDC06;   /* la radio e gli errori dei moduli */
  --ar-font:    'Geist Ardea', 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ar-max:     1320px;
}

/* i colori ricavati (ingranaggi, non scelte del pannello) */
body.bt-theme, .bt-page, body.addi-privato {
  color-scheme: dark;
  --blu: var(--ar-blu);
  --notte: var(--ar-notte);
  --nero: var(--ar-nero);
  --bianco: var(--ar-bianco);
  --giallo: var(--ar-giallo);
  --fondo: var(--ar-fondo);
  --fondo-2: var(--ar-fondo-2);
  --luce: var(--ar-luce);
  --testo: var(--ar-bianco);
  --testo-2: var(--ar-testo-2);
  --filo: color-mix(in srgb, var(--ar-bianco) 11%, transparent);
  --vetro: color-mix(in srgb, var(--ar-bianco) 4%, transparent);
  --cella: var(--ar-cella);
  --molla: cubic-bezier(.32, .72, 0, 1);
  --uscita: cubic-bezier(.16, 1, .3, 1);
  --m: clamp(16px, 4vw, 56px);
  --ml: max(var(--m), env(safe-area-inset-left, 0px));
  --mr: max(var(--m), env(safe-area-inset-right, 0px));
  /* quanto spazio lascia in alto l'isola del menu, che sta ferma sopra la pagina */
  --a-sopra: calc(96px + env(safe-area-inset-top, 0px));
}

/* ---------- i nomi di Bento coi valori di Ardea (regola 4): i pezzi del core e degli addon si vestono da soli ---------- */
body.bt-theme, .bt-page, body.addi-privato {
  --bt-accent:       var(--ar-bianco);   /* i pulsanti pieni sono bianchi, con la scritta nera, come nella bozza */
  --bt-accent-2:     var(--ar-bianco-2);
  --bt-accent-ink:   var(--ar-nero);
  --bt-accent-wash:  var(--ar-scelta);
  --bt-ground:       var(--fondo);
  --bt-card:         var(--cella);
  --bt-ink:          var(--ar-bianco);
  --bt-body-ink:     var(--ar-bianco);
  --bt-muted:        var(--testo-2);
  --bt-line:         color-mix(in srgb, var(--ar-bianco) 16%, var(--fondo-2));
  --bt-line-btn:     color-mix(in srgb, var(--ar-bianco) 42%, var(--fondo-2));
  --bt-line-soft:    color-mix(in srgb, var(--ar-bianco) 9%, var(--fondo-2));
  --bt-ok:           color-mix(in srgb, var(--luce) 70%, var(--ar-bianco));
  --bt-danger:       var(--ar-giallo);
  --bt-ink-2:        var(--fondo-2);
  --bt-on-dark:      var(--testo-2);
  --bt-piede-sopra:  var(--luce);
  --bt-font-display: var(--ar-font);
  --bt-font-body:    var(--ar-font);
  --font-mono:       var(--ar-font);   /* il «carattere dei codici» di Bento qui è Geist, come tutto il resto */
  --bt-r-lg:         30px;
  --bt-r:            24px;
  --bt-r-sm:         14px;
  --bt-pill:         999px;
  --bt-max:          var(--ar-max);
  --bt-shadow:       0 24px 60px color-mix(in srgb, var(--ar-nero) 45%, transparent);
  --ma-sentito:      var(--luce);
  /* i segnaposto delle foto che mancano: il blu notte del tema, mai una tinta finta */
  --bt-ph-1: linear-gradient(140deg, var(--fondo-2), var(--cella));
  --bt-ph-2: linear-gradient(140deg, var(--cella), var(--fondo-2));
  --bt-ph-3: linear-gradient(140deg, var(--fondo-2), color-mix(in srgb, var(--ar-blu) 20%, var(--fondo-2)));
  --bt-ph-4: linear-gradient(140deg, color-mix(in srgb, var(--ar-blu) 14%, var(--fondo-2)), var(--fondo-2));
  --bt-ph-5: linear-gradient(140deg, var(--cella), var(--fondo));
}

/* niente fascia fissa in basso: al telefono la barra a schede del core è spenta (il menu sta nell'isola) */
body.bt-theme { --addi-fondo: 0px; }
body.bt-theme .mobile-tabbar { display: none; }

/* ============================================================
   IL TESTO E LA PAGINA
   ============================================================ */
body.bt-theme {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--ar-font);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* la grana sottile della bozza: sopra tutto, ma non si tocca e non copre le finestre (che stanno più in alto) */
body.bt-theme::after { content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); }
body.bt-theme ::selection { background: var(--blu); color: var(--bianco); }
body.bt-theme :focus-visible { outline: 2px solid var(--luce); outline-offset: 3px; }
body.bt-theme :is(h1, h2, h3, h4) { font-family: var(--ar-font); color: inherit; text-wrap: balance; }

/* le pagine del core (area riservata, cassa, documenti) cominciano sotto l'isola; quelle del tema hanno l'apertura
   che ci passa sotto */
body.bt-theme main#main:not(.a-main) { padding-top: var(--a-sopra); }

/* gli azzeramenti della bozza, solo nelle pagine disegnate dal tema.
   ⚠️ TUTTI DENTRO :where(), CHE NON PESA NIENTE. Scritti «.a-main h1» pesavano più di «.a-h1» e vincevano sulle classi
   della bozza: il titolo della prima pagina usciva sottile, con le righe larghe e senza il suo margine, e la scritta
   del pulsante bianco dell'isola diventava bianca (28/10/26, prima foto del laboratorio). */
:where(.a-main, body.bt-theme .a-isola, .a-piede) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.a-main, body.bt-theme .a-isola, .a-piede) :where(img, svg) { display: block; max-width: 100%; }
:where(.a-main) :where(img) { height: auto; }
:where(.a-main) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote), :where(.a-piede) :where(h2, p, ul) { margin: 0; }
:where(.a-main) :where(ul:not(.a-prosa ul)), :where(.a-piede) :where(ul) { list-style: none; padding: 0; }
:where(.a-main) :where(h1, h2, h3, h4) { font-weight: inherit; letter-spacing: normal; line-height: inherit; text-wrap: balance; }
/* niente parola rimasta sola in fondo a un testo (il controllo dell'impaginazione): i testi si bilanciano */
:where(.a-main, .a-piede) :where(p, li, figcaption, small, blockquote) { text-wrap: balance; }
:where(.a-main, body.bt-theme .a-isola, .a-piede) :where(a) { color: inherit; text-decoration: none; }
:where(.a-main, body.bt-theme .a-isola, .a-piede) :where(button) { font: inherit; color: inherit; }

.a-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a-largo { padding-left: var(--ml); padding-right: var(--mr); }
.a-parola { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .02em .1em; margin: -.06em -.02em -.1em; }
.a-parola > span, .a-parola > b { display: inline-block; }

/* ---------- pulsanti: pillole col cerchio dell'icona dentro ----------
   Le classi «a-bt…» e non «bt…»: quel prefisso è di Bento (bt-page, bt-inner, bt-crumbs) e domani potrebbe pestare. */
.a-bt { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 6px 6px 22px; border: 0; border-radius: 999px; font-family: var(--ar-font); font-weight: 600; font-size: 15.5px; line-height: 1.2; letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .35s var(--molla), color .35s var(--molla); }
.a-bt-ico { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; transition: transform .6s var(--molla); }
.a-bt-ico svg { width: 16px; height: 16px; }
.a-bt-solo { padding: 6px 24px; }
.a-bt-pieno { background: var(--bianco); color: var(--nero); }
/* al telefono un pulsante lungo va su due righe invece di allargare la colonna («Sì, voglio lasciarti il mio feedback positivo», 400 px a 390) */
@media (max-width: 600px) { .a-bt { white-space: normal; max-width: 100%; } .a-bt > span:first-child { min-width: 0; } }
/* DUE PULSANTI IN FILA, AL TELEFONO AFFIANCATI E LARGHI UGUALI (28/10/26, Marco sulla foto della prima pagina: «da mobile mi
   devi affiancare questi 2 pulsanti.. assolutamente»). Prima, sotto i 600 px, andavano a capo uno sotto l'altro, ognuno largo
   quanto il suo testo. Il carattere scende con lo schermo: a 360 px «Prenota una call» con la freccia sta ancora su una riga.
   ⚠️ Una scritta lunga («Partecipa alla prossima edizione») in mezzo schermo andrebbe su tre righe: lì ardea.js (coppie())
   mette .a-coppia-sotto e la coppia va uno sotto l'altro, larghi uguali anche lì, col pulsante grande di sempre. Il
   foglio li affianca da subito, senza aspettare il copione: la prima pagina non salta. */
@media (max-width: 600px) {
  .a-azioni:has(> .a-bt:first-child + .a-bt:last-child) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .a-azioni.a-coppia-sotto:has(> .a-bt:first-child + .a-bt:last-child) { grid-template-columns: minmax(0, 1fr); }
  .a-azioni:has(> .a-bt:first-child + .a-bt:last-child) > .a-bt { width: 100%; min-width: 0; }
  .a-azioni:not(.a-coppia-sotto):has(> .a-bt:first-child + .a-bt:last-child) > .a-bt { min-height: 48px; gap: 6px; padding: 4px 4px 4px 12px; font-size: clamp(13px, 3.6vw, 14.5px); letter-spacing: -.015em; }
  .a-azioni:not(.a-coppia-sotto):has(> .a-bt:first-child + .a-bt:last-child) > .a-bt > span:first-child { flex: 1; text-align: center; }
  .a-azioni:not(.a-coppia-sotto):has(> .a-bt:first-child + .a-bt:last-child) > .a-bt-solo { padding: 4px 12px; justify-content: center; }
  .a-azioni:not(.a-coppia-sotto):has(> .a-bt:first-child + .a-bt:last-child) .a-bt-ico { width: 32px; height: 32px; }
  .a-azioni.a-coppia-sotto:has(> .a-bt:first-child + .a-bt:last-child) > .a-bt-solo { justify-content: center; }
}
.a-bt-pieno .a-bt-ico { background: var(--blu); color: var(--bianco); }
.a-bt-vuoto { background: var(--vetro); color: var(--testo); box-shadow: inset 0 0 0 1px var(--filo); }
@media (hover: hover) {
  .a-bt:hover .a-bt-ico { transform: translateX(3px) scale(1.06); }
  .a-bt-vuoto:hover { background: color-mix(in srgb, var(--bianco) 9%, transparent); }
}

/* ============================================================
   LA TESTATA: l'isola del menu
   ============================================================
   ⚠️ IL VETRO STA SUL ::before, NON SULL'ISOLA. Un elemento con backdrop-filter (o transform, o filter) diventa il
   riferimento dei suoi figli «fixed»: il menu del telefono, che è #headerNav qui dentro e si apre a tutto schermo,
   resterebbe chiuso nella pillola. Così l'isola resta trasparente e il vetro le sta dietro. */
body.bt-theme .a-isola { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left: 0; right: 0; margin: 0 auto; width: min(var(--ar-max), calc(100% - var(--ml) - var(--mr))); z-index: 70; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-radius: 999px; color: var(--testo); font-family: var(--ar-font); line-height: 1.3; }
body.bt-theme .a-isola::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in srgb, var(--fondo-2) 64%, transparent); box-shadow: inset 0 0 0 1px var(--filo), 0 20px 50px color-mix(in srgb, var(--nero) 30%, transparent); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
body.bt-theme .a-isola > * { position: relative; z-index: 2; }
body.bt-theme .a-marchio { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; color: var(--testo); text-decoration: none; }
body.bt-theme .a-marchio img { height: 28px; width: auto; }
body.bt-theme .a-isola .header-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 0; background: none; box-shadow: none; position: static; }
body.bt-theme .a-isola .header-nav-link { padding: 9px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--testo-2); text-decoration: none; white-space: nowrap; transition: color .3s var(--molla), background-color .3s var(--molla); }
body.bt-theme .a-isola .header-nav-link[aria-current="page"] { color: var(--testo); background: var(--vetro); }
@media (hover: hover) {
  body.bt-theme .a-isola .header-nav-link:hover { color: var(--testo); background: var(--vetro); }
  body.bt-theme .a-isola .a-bt-pieno:hover { color: var(--nero); }
  body.bt-theme .a-isola .a-bt-vuoto:hover { color: var(--testo); }
}
body.bt-theme .a-menu-telefono { display: none; }
@media (min-width: 861px) { body.bt-theme .a-menu-telefono .a-bt-pieno { display: none; } }
body.bt-theme .a-comandi { display: flex; align-items: center; gap: 6px; flex: none; }
body.bt-theme .a-isola .a-bt { min-height: 44px; padding: 4px 4px 4px 18px; font-size: 14.5px; }
body.bt-theme .a-isola .a-bt-ico { width: 36px; height: 36px; }

/* i comandi a icona (cerca, accedi, carrello): cerchi di vetro, coi ganci del core */
body.bt-theme .a-icona-bt { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--vetro); color: var(--testo); box-shadow: inset 0 0 0 1px var(--filo); cursor: pointer; transition: background-color .3s var(--molla); }
body.bt-theme .a-icona-bt svg { width: 18px; height: 18px; }
body.bt-theme .a-icona-bt > span:not(.cart-badge) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (hover: hover) { body.bt-theme .a-icona-bt:hover { background: color-mix(in srgb, var(--bianco) 10%, transparent); } }
body.bt-theme .a-isola .header-account { display: flex; align-items: center; gap: 6px; }
body.bt-theme .a-isola .account-register-btn { display: none; }
body.bt-theme .a-isola .account-trigger { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--vetro); color: var(--testo); box-shadow: inset 0 0 0 1px var(--filo); font: 500 14px/1 var(--ar-font); cursor: pointer; }
body.bt-theme .a-isola .account-trigger svg { width: 14px; height: 14px; }
body.bt-theme .a-isola .account-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--luce); }
body.bt-theme .a-isola .account-menu { position: relative; }
body.bt-theme .a-isola .account-dropdown { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; display: flex; flex-direction: column; padding: 8px; border-radius: 22px; background: var(--fondo-2); box-shadow: inset 0 0 0 1px var(--filo), var(--bt-shadow); }
body.bt-theme .a-isola .account-dropdown.hidden { display: none; }
body.bt-theme .a-isola .account-dropdown button { text-align: left; padding: 11px 14px; border: 0; border-radius: 14px; background: none; color: var(--testo-2); font: 500 15px/1.3 var(--ar-font); cursor: pointer; }
@media (hover: hover) { body.bt-theme .a-isola .account-dropdown button:hover { background: var(--vetro); color: var(--testo); } }
body.bt-theme .a-isola .header-cart { display: flex; }
body.bt-theme .a-isola .cart-badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: var(--blu); color: var(--bianco); font: 600 11.5px/1 var(--ar-font); }
body.bt-theme .a-isola .cart-badge.hidden { display: none; }
body.bt-theme .a-isola .access-balloon { position: absolute; right: 0; top: calc(100% + 10px); white-space: nowrap; }
body.bt-theme .a-isola .bt-lingue { display: flex; gap: 2px; }
body.bt-theme .a-isola .bt-lingue a { padding: 8px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--testo-2); text-decoration: none; }
body.bt-theme .a-isola .bt-lingue a[aria-current="true"] { color: var(--testo); background: var(--vetro); }

/* il ☰: due righe che diventano una × */
/* margin 0: Bento dà al ☰ «margin-right: -9px» (per allinearlo al bordo della sua testata); dentro l'isola lo spingeva 3px oltre
   la fine arrotondata (28/10, Marco dal telefono: «su mobile, il menu») */
body.bt-theme .a-hamburger { display: none; position: relative; width: 44px; height: 44px; flex: none; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--vetro); cursor: pointer; }
body.bt-theme .a-hamburger i { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--testo); border-radius: 2px; transition: transform .5s var(--molla), top .5s var(--molla); }
body.bt-theme .a-hamburger i:nth-child(1) { top: 17px; } body.bt-theme .a-hamburger i:nth-child(2) { top: 25px; }
body.bt-theme .a-hamburger[aria-expanded="true"] i:nth-child(1) { top: 21px; transform: rotate(45deg); }
body.bt-theme .a-hamburger[aria-expanded="true"] i:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* ============================================================
   LA PRIMA PAGINA
   ============================================================ */
/* l'apertura: la luce che si muove dietro il ritratto */
.a-apertura { position: relative; isolation: isolate; overflow: hidden; min-height: 100dvh; background: var(--fondo); padding-top: clamp(124px, 15vh, 168px); }
.a-aurora { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.a-aurora i { position: absolute; width: 64vmax; height: 64vmax; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 64%); mix-blend-mode: screen; will-change: transform; }
.a-aurora i:nth-child(1) { --c: color-mix(in srgb, var(--blu) 80%, transparent); left: -18vmax; top: -30vmax; }
.a-aurora i:nth-child(2) { --c: color-mix(in srgb, var(--luce) 34%, transparent); right: -22vmax; top: -18vmax; }
.a-aurora i:nth-child(3) { --c: color-mix(in srgb, var(--notte) 95%, var(--blu)); left: 20vmax; top: 20vmax; }
.a-aurora i:nth-child(4) { --c: color-mix(in srgb, var(--blu) 45%, transparent); right: 0; bottom: -40vmax; }
.a-faro { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px circle at var(--fx, 72%) var(--fy, 34%), color-mix(in srgb, var(--luce) 16%, transparent), transparent 62%); }
.a-apertura-in { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.a-h1 { margin-top: 22px; font-size: clamp(44px, 6vw, 96px); font-weight: 600; letter-spacing: -.052em; line-height: .98; }
.a-lucido { color: var(--luce); }
.a-sotto { margin-top: 26px; max-width: 44ch; font-size: clamp(17px, 1.35vw, 20px); color: var(--testo-2); }
.a-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.a-ritratto { position: relative; width: 100%; max-width: 520px; justify-self: center; aspect-ratio: 3 / 4; }
.a-alone { position: absolute; left: 50%; top: 46%; width: 92%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--blu) 75%, transparent) 0%, color-mix(in srgb, var(--blu) 22%, transparent) 42%, transparent 68%); }
/* ⚠️ lighten: il nero della foto si fonde col fondo. Vuole la sezione con isolation e il suo fondo pieno (sennò resta il rettangolo nero). */
.a-foto { position: absolute; inset: 0; mix-blend-mode: lighten; -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 97%); mask-image: linear-gradient(to bottom, #000 68%, transparent 97%); }
.a-foto img { width: 100%; height: 100%; object-fit: cover; }

/* i loghi che scorrono */
.a-loghi { max-width: var(--ar-max); margin: clamp(48px, 8vh, 96px) auto 0; padding-bottom: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 36px; align-items: center; }
.a-loghi > p { font-size: 13.5px; line-height: 1.35; color: var(--testo-2); max-width: 13ch; }
/* il nastro scorre anche col dito (overflow-x: auto, senza barra): è una striscia che sborda apposta, e il banco delle
   pagine salta chi sta dentro una striscia che scorre; tagliata (hidden) contava ogni logo fuori dallo schermo */
.a-nastro { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.a-nastro-traccia { display: flex; align-items: center; gap: 64px; width: max-content; padding-right: 64px; animation: a-nastro 46s linear infinite; }
.a-nastro-traccia > * { flex: none; }
.a-nastro-doppio { display: flex; align-items: center; gap: 64px; }
.a-nastro img { width: auto; opacity: .8; transition: opacity .3s var(--molla); }
.a-nastro::-webkit-scrollbar { display: none; }
@keyframes a-nastro { to { transform: translateX(-50%); } }
@media (hover: hover) { .a-nastro:hover .a-nastro-traccia { animation-play-state: paused; } .a-nastro img:hover { opacity: 1; } }

/* le sezioni */
.a-sezione { position: relative; padding-top: clamp(88px, 10vw, 140px); padding-bottom: clamp(88px, 10vw, 140px); }
.a-intesta { max-width: var(--ar-max); margin: 0 auto clamp(40px, 6vw, 72px); display: grid; gap: 20px; justify-items: start; }
.a-intesta h2 { font-size: clamp(40px, 5.4vw, 84px); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.a-intesta p { max-width: 54ch; font-size: clamp(17px, 1.3vw, 19px); color: var(--testo-2); }
/* l'intestazione che porta da sé i margini (sopra le gallerie a tutta larghezza): largo il massimo più i margini, così
   il titolo parte dove partono le altre sezioni e non 60px più in qua */
.a-intesta.a-largo { max-width: calc(var(--ar-max) + var(--ml) + var(--mr)); }

/* il bento che si accende col mouse */
.a-bento { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(270px, auto); gap: 14px; }
.a-cella { position: relative; padding: 6px; border-radius: 30px; background: var(--vetro); box-shadow: inset 0 0 0 1px var(--filo); --mx: -999px; --my: -999px; }
.a-cella::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: radial-gradient(380px circle at var(--mx) var(--my), var(--luce), transparent 42%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; z-index: 3; }
.a-cella-in { position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: var(--cella); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bianco) 9%, transparent); display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 26px; }
.a-cella-in::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px circle at var(--mx) var(--my), color-mix(in srgb, var(--blu) 22%, transparent), transparent 46%); z-index: 1; }
.a-cella-in > * { position: relative; z-index: 2; }
.a-cella h3 { font-size: clamp(22px, 1.9vw, 30px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.a-cella p { font-size: 15.5px; line-height: 1.55; color: var(--testo-2); max-width: 46ch; }
.a-cella-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 0; font-weight: 600; font-size: 14.5px; width: fit-content; min-height: 40px; text-wrap: balance; }
.a-cella-link span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--bianco) 10%, transparent); transition: transform .6s var(--molla), background-color .3s var(--molla); }
.a-cella-link svg { width: 14px; height: 14px; }
@media (hover: hover) { .a-cella-link:hover span { transform: translateX(3px) scale(1.06); background: var(--blu); } }
.a-cella-in > .a-cella-foto { position: absolute; inset: 0; z-index: 0; }
.a-cella-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--molla); }
.a-cella-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--cella) 18%, color-mix(in srgb, var(--cella) 55%, transparent) 52%, transparent 85%); }
@media (hover: hover) { .a-cella:hover .a-cella-foto img { transform: scale(1.05); } }
.c-consulenza { grid-column: 1 / 3; grid-row: 1 / 3; }
.c-consulenza .a-cella-in { padding: 34px; }
.c-consulenza h3 { font-size: clamp(30px, 2.8vw, 44px); }
.c-consulenza .a-cella-foto img { object-position: 60% 25%; }
.c-formazione { grid-column: 3; grid-row: 1 / 3; }
.c-formazione .a-cella-in > .a-cella-foto { inset: 10px 10px 48% 10px; border-radius: 18px; overflow: hidden; }
.c-formazione .a-cella-foto::after { display: none; }
.c-anni { grid-column: 4; grid-row: 1; }
/* la cifra si disegna più alta della sua riga: lo spazio sotto (in em, cresce con lei) la tiene lontana dalla scritta */
.a-numero { font-size: clamp(64px, 6.4vw, 104px); font-weight: 600; letter-spacing: -.06em; line-height: 1; margin-bottom: .18em; }
.a-numero sup { font-size: .45em; vertical-align: top; position: relative; top: .1em; color: var(--luce); }
.c-libro { grid-column: 4; grid-row: 2; }
.c-libro .a-cella-in { justify-content: flex-start; perspective: 900px; }
.c-libro .a-cella-in > div { max-width: 64%; }
.a-libro { position: absolute; right: 16px; bottom: -12px; width: 42%; transform: rotateY(-24deg) rotateX(8deg) rotateZ(4deg); transform-origin: 60% 50%; transition: transform .9s var(--molla); filter: drop-shadow(0 24px 30px color-mix(in srgb, var(--nero) 55%, transparent)); -webkit-mask-image: linear-gradient(#000 74%, transparent 98%); mask-image: linear-gradient(#000 74%, transparent 98%); }
@media (hover: hover) { .c-libro:hover .a-libro { transform: rotateY(-6deg) rotateX(2deg) rotateZ(0deg) translateY(-6px) scale(1.04); } }
.c-storie { grid-column: 1 / 3; grid-row: 3; }
.c-storie .a-cella-in { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
.c-storie .a-cella-in > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.a-loghi-clienti { display: flex; gap: 14px; flex: none; align-self: center; }
.a-loghi-clienti img { width: 104px; height: 104px; border-radius: 50%; background: var(--bianco); padding: 6px; object-fit: contain; transition: transform .7s var(--molla); }
@media (hover: hover) { .c-storie:hover .a-loghi-clienti img:first-child { transform: rotate(-8deg) translateY(-4px); } .c-storie:hover .a-loghi-clienti img:last-child { transform: rotate(8deg) translateY(-4px); } }
.c-radio { grid-column: 3; grid-row: 3; }
.c-radio .a-cella-in { justify-content: space-between; }
/* il blocco del testo, non l'onda: scritto «> div» prendeva anche .a-onda (pesa di più) e la faceva colonna, con le barre
   larghe zero (28/10, Marco: «qui manca l'effetto della bozza») */
.c-radio .a-cella-in > div:not(.a-onda) { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.a-onda { display: flex; align-items: flex-end; gap: 5px; height: 64px; }
.a-onda i { flex: 1; height: 100%; border-radius: 4px; background: linear-gradient(to top, var(--blu), var(--luce)); transform-origin: bottom; animation: a-onda var(--d, 1s) var(--molla) infinite alternate; }
@keyframes a-onda { from { transform: scaleY(.18); } to { transform: scaleY(var(--h, 1)); } }
/* con «riduci il movimento» le barre stanno ferme, ognuna alla sua altezza */
@media (prefers-reduced-motion: reduce) { .a-onda i { animation: none; transform: scaleY(var(--h, 1)); } }
.a-in-onda { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.a-in-onda::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--giallo); }
.c-hub { grid-column: 4; grid-row: 3; }

/* il muro delle testimonianze */
.a-muro { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; height: min(780px, 92vh); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 13%, #000 87%, transparent); mask-image: linear-gradient(transparent, #000 13%, #000 87%, transparent); }
.a-colonna { min-width: 0; }
.a-colonna-tel { display: none; }
.a-scorre { display: flex; flex-direction: column; gap: 14px; animation: a-muro var(--d, 60s) linear infinite; }
.a-colonna:nth-child(2) .a-scorre { animation-direction: reverse; }
@keyframes a-muro { to { transform: translateY(calc(-50% - 7px)); } }
@media (hover: hover) { .a-muro:hover .a-scorre { animation-play-state: paused; } }
.a-voce { padding: 6px; border-radius: 26px; background: var(--vetro); box-shadow: inset 0 0 0 1px var(--filo); }
.a-voce-in { display: flex; flex-direction: column; gap: 16px; border-radius: 20px; padding: 24px; background: var(--cella); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bianco) 8%, transparent); }
.a-voce blockquote p { font-size: 15.5px; line-height: 1.62; }
.a-voce-chi { display: flex; align-items: center; gap: 12px; margin-top: 0; }
.a-voce-chi img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.a-voce-chi b { display: block; font-weight: 600; font-size: 15px; }
.a-voce-chi span span { display: block; font-size: 13.5px; color: var(--testo-2); line-height: 1.35; }

/* l'invito in fondo */
.a-contatto { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-top: clamp(120px, 16vw, 220px); padding-bottom: clamp(120px, 14vw, 200px); }
.a-contatto::before { content: ""; position: absolute; left: 50%; bottom: -55%; width: 120vmax; aspect-ratio: 1; translate: -50% 0; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--blu) 70%, transparent) 0%, color-mix(in srgb, var(--blu) 18%, transparent) 36%, transparent 62%); }
.a-contatto h2 { font-size: clamp(48px, 8.4vw, 136px); font-weight: 600; letter-spacing: -.06em; line-height: .95; }
.a-contatto > p { margin: 26px auto 0; max-width: 42ch; font-size: clamp(17px, 1.4vw, 20px); color: var(--testo-2); }
.a-contatto .a-azioni { justify-content: center; }

/* ============================================================
   IL PIÈ DI PAGINA
   ============================================================ */
/* ⚠️ «body.bt-theme .a-piede», non «.a-piede»: Bento veste .footer con «body.bt-theme .footer» (fondo --bt-ink, che qui
   è il bianco, scritte al centro, margini di lato a zero) e pesava di più: il piè usciva bianco (28/10/26). */
body.bt-theme .a-piede { position: relative; overflow: hidden; margin-top: 0; display: flex; flex-direction: column; gap: 40px; padding: 64px var(--mr) calc(64px + env(safe-area-inset-bottom, 0px)) var(--ml); background: var(--fondo); color: var(--testo); font-family: var(--ar-font); font-size: 15px; line-height: 1.6; text-align: left; box-shadow: inset 0 1px 0 var(--filo); }
.a-piede-in { width: 100%; max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.a-piede-marchio p { margin-top: 14px; max-width: 30ch; color: var(--testo-2); font-size: 15px; }
.a-piede h2 { font-size: 13.5px; font-weight: 600; margin-bottom: 14px; letter-spacing: normal; }
body.bt-theme .a-piede-col a { display: block; width: fit-content; padding: 4px 0; font-size: 15px; color: var(--testo-2); text-decoration: none; transition: color .3s var(--molla); }
@media (hover: hover) { body.bt-theme .a-piede a:hover { color: var(--testo); } }
.a-nome-grande-box { width: 100%; max-width: var(--ar-max); margin: 0 auto; }
.a-nome-grande::before { content: attr(data-nome); }
/* ⚠️ il nome grande è un decoro (al 10%): lo scrive il foglio da data-nome, così non è un testo da leggere col suo
   contrasto (il controllo dell'impaginazione lo misurava 1,2) e non copre la riga legale */
.a-nome-grande { display: block; width: max-content; font-weight: 600; letter-spacing: -.06em; line-height: .8; white-space: nowrap; color: color-mix(in srgb, var(--bianco) 10%, transparent); font-size: 11vw; }
.a-legale { position: relative; z-index: 1; width: 100%; max-width: var(--ar-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; font-size: 13.5px; color: var(--testo-2); }
.a-legale > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
body.bt-theme .a-legale a, .a-legale-bt { min-height: 40px; display: inline-flex; align-items: center; color: var(--testo-2); text-decoration: none; }
.a-legale-bt { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--filo); }
@media (hover: hover) { body.bt-theme .a-legale a:hover, .a-legale-bt:hover { color: var(--testo); } }
.a-piede-pagamenti { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============================================================
   I MODULI (contatto, ebook, newsletter): campi di vetro
   ============================================================ */
.a-modulo-cella .a-cella-in { justify-content: flex-start; padding: clamp(22px, 3vw, 36px); }
.a-modulo { display: flex; flex-direction: column; gap: 16px; }
.a-modulo-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.a-campo { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 500; color: var(--testo-2); }
.a-campo-largo { grid-column: 1 / -1; }
.a-campo :is(input, select, textarea) { width: 100%; font: inherit; font-size: 16px; font-weight: 400; color: var(--testo); background: color-mix(in srgb, var(--bianco) 5%, transparent); border: 0; border-radius: 14px; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--filo); transition: box-shadow .3s var(--molla), background-color .3s var(--molla); }
.a-campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--testo-2) 50%), linear-gradient(135deg, var(--testo-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.a-campo select option { color: var(--nero); background: var(--bianco); }
.a-campo textarea { resize: vertical; min-height: 110px; }
.a-campo :is(input, select, textarea)::placeholder { color: color-mix(in srgb, var(--testo-2) 78%, transparent); }
.a-campo :is(input, select, textarea):focus { outline: none; background-color: color-mix(in srgb, var(--bianco) 8%, transparent); box-shadow: inset 0 0 0 1.5px var(--luce), 0 0 0 4px color-mix(in srgb, var(--blu) 30%, transparent); }
body.bt-theme input:-webkit-autofill, body.bt-theme input:-webkit-autofill:focus { -webkit-text-fill-color: var(--testo); -webkit-box-shadow: 0 0 0 1000px var(--cella) inset; transition: background-color 600000s; }
.a-campo.sbagliato :is(input, textarea) { box-shadow: inset 0 0 0 1.5px var(--giallo); }
.a-errore { font-style: normal; font-size: 13px; color: var(--giallo); }
.a-errore:empty { display: none; }
.a-spunta { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--testo-2); cursor: pointer; }
.a-spunta input { appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--filo); background: color-mix(in srgb, var(--bianco) 5%, transparent); display: grid; place-items: center; cursor: pointer; transition: background-color .25s var(--molla), box-shadow .25s var(--molla); }
.a-spunta input:checked { background: var(--blu); box-shadow: none; }
.a-spunta input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--bianco); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.a-spunta.sbagliato input { box-shadow: inset 0 0 0 1.5px var(--giallo); }
.a-spunta a { color: var(--testo); text-decoration: underline; text-underline-offset: 3px; }
.a-modulo-fondo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; }
.a-modulo-esito { font-size: 14px; color: var(--giallo); }
.a-modulo-esito:empty { display: none; }
.a-grazie { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 12px 4px; }
.a-grazie h3 { font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; letter-spacing: -.04em; }
.a-grazie p { color: var(--testo-2); }
.a-grazie-segno { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--blu); color: var(--bianco); }
.a-grazie-segno svg { width: 28px; height: 28px; }

/* ============================================================
   LE PAGINE INTERNE (pezzo 2 della bozza): Chi sono, Consulenza, Formazione, Prenota una call, e la pagina di base
   ============================================================ */
.a-apertura-pagina { min-height: auto; padding-bottom: clamp(56px, 7vw, 96px); }
.a-apertura-corta { min-height: 64vh; display: flex; align-items: center; }
.a-apertura-corta .a-apertura-in { width: 100%; }
.a-apertura-sola { grid-template-columns: minmax(0, 1fr); }
.a-h1-pagina { font-size: clamp(44px, 5.6vw, 88px); }
.a-cornice-foto { width: 100%; max-width: 460px; justify-self: center; padding: 8px; border-radius: 34px; background: var(--vetro); box-shadow: inset 0 0 0 1px var(--filo), 0 40px 90px color-mix(in srgb, var(--nero) 45%, transparent); }
.a-cornice-foto-in { aspect-ratio: 4 / 5; border-radius: 27px; overflow: hidden; }
.a-cornice-foto-in img { width: 100%; height: 100%; object-fit: cover; }
.a-loghi-sezione .a-loghi { margin-top: 0; padding: 24px 0; }

/* la storia: la linea si riempie mentre scorri, le tappe si accendono */
.a-storia-box { position: relative; max-width: 1080px; margin: 0 auto; padding-left: clamp(28px, 6vw, 72px); }
.a-storia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }
.a-storia-linea { position: absolute; left: clamp(6px, 1.6vw, 18px); top: 8px; bottom: 8px; width: 2px; background: color-mix(in srgb, var(--bianco) 12%, transparent); border-radius: 2px; }
.a-storia-linea i { position: absolute; inset: 0; background: linear-gradient(var(--luce), var(--blu)); transform-origin: top; border-radius: 2px; }
.a-tappa { position: relative; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); align-items: baseline; }
.a-tappa::before { content: ""; position: absolute; left: calc(-1 * clamp(28px, 6vw, 72px) + clamp(6px, 1.6vw, 18px) - 6px); top: .55em; width: 14px; height: 14px; border-radius: 50%; background: var(--fondo); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bianco) 30%, transparent); transition: background-color .5s var(--molla), box-shadow .5s var(--molla), transform .5s var(--molla); }
.a-tappa.accesa::before { background: var(--luce); box-shadow: 0 0 0 6px color-mix(in srgb, var(--blu) 30%, transparent); transform: scale(1.1); }
.a-tappa-anno { font-size: clamp(40px, 5vw, 76px); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: color-mix(in srgb, var(--bianco) 40%, transparent); transition: color .6s var(--molla); }
.a-tappa.accesa .a-tappa-anno { color: var(--bianco); }
.a-tappa h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.a-tappa p { margin-top: 6px; color: var(--testo-2); max-width: 60ch; }

/* le competenze e le due colonne */
.a-competenze { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.a-competenze .a-cella-in, .a-due .a-cella-in { justify-content: flex-start; padding: 28px; }
.a-competenze .a-cella-in { min-height: 250px; }
.a-due { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.a-due .a-cella-in { gap: 14px; }
.a-due h3 { font-size: clamp(28px, 2.6vw, 40px); }

/* la frase che si accende e il testo accanto */
.a-dichiarazione { max-width: var(--ar-max); margin: 0 auto; }
.a-dichiarazione > p { font-size: clamp(30px, 3.6vw, 56px); font-weight: 600; letter-spacing: -.04em; line-height: 1.12; max-width: 22ch; }
.a-dichiarazione > p .a-parola { overflow: visible; }
.a-dichiarazione-due { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); color: var(--testo-2); font-size: clamp(17px, 1.3vw, 19px); max-width: 1100px; }

/* i modi: l'indice fermo segue lo scorrimento */
.a-modi { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.a-modi-indice { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 4px; }
.a-modi-indice a { font-size: clamp(22px, 2.2vw, 34px); font-weight: 600; letter-spacing: -.035em; line-height: 1.2; padding: 6px 0; color: color-mix(in srgb, var(--bianco) 54%, transparent); transition: color .45s var(--molla), transform .6s var(--molla); }
.a-modi-indice a.attivo { color: var(--bianco); transform: translateX(10px); }
@media (hover: hover) { .a-modi-indice a:hover { color: var(--testo-2); } }
.a-modi-pannelli { display: flex; flex-direction: column; gap: 14px; }
.a-modo { scroll-margin-top: 110px; }
.a-modo .a-cella-in { justify-content: flex-start; padding: clamp(26px, 3vw, 40px); gap: 14px; min-height: 340px; }
.a-modo h3 { font-size: clamp(26px, 2.4vw, 38px); }
.a-modo p { max-width: 58ch; }

/* le storie dei clienti */
.a-casi { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.a-caso .a-cella-in { justify-content: flex-start; padding: clamp(26px, 3vw, 40px); gap: 18px; }
.a-caso-testa { display: flex; align-items: center; gap: 18px; }
.a-caso-testa img { width: 88px; height: 88px; border-radius: 50%; background: var(--bianco); padding: 5px; object-fit: contain; flex: none; }
.a-caso-testa h3 { font-size: clamp(24px, 2.2vw, 34px); }
.a-caso-voce { margin: 0; padding: 22px; border-radius: 18px; background: color-mix(in srgb, var(--bianco) 5%, transparent); box-shadow: inset 0 0 0 1px var(--filo); }
.a-caso-voce p { font-size: 15px; line-height: 1.6; color: var(--testo); max-width: none; }
.a-caso-voce footer { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 13.5px; color: var(--testo-2); }
.a-caso-voce footer img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.a-caso-voce footer b { display: block; color: var(--testo); font-weight: 600; font-size: 15px; }

/* i motivi: frasi grandi, niente icone */
.a-motivi { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(20px, 3vw, 48px); }
.a-motivi li { position: relative; font-size: clamp(20px, 1.6vw, 25px); font-weight: 500; letter-spacing: -.02em; line-height: 1.35; padding-top: 22px; }
/* il filetto sopra ogni riga è un ::before, non un bordo: una riga col bordo e il testo a 0 px dal lato era, per il
   controllo dell'impaginazione, una scatola col testo attaccato */
.a-motivi li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: color-mix(in srgb, var(--blu) 70%, transparent); }

/* la galleria degli interventi: scorre di lato mentre scendi */
.a-interventi { padding-top: clamp(88px, 10vw, 140px); overflow: hidden; }
/* la striscia si sfoglia di lato (dito, trackpad, rotella): così la vede tutta anche chi ha «riduci il movimento». Col
   movimento acceso, al computer, la guida lo scorrere della pagina (ardea.js, «a-galleria-guidata») */
.a-galleria { padding: 0 var(--mr) clamp(40px, 6vw, 80px) var(--ml); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--filo) transparent; }
.a-galleria.a-galleria-guidata { overflow: visible; }
.a-galleria-traccia { display: flex; gap: 18px; width: max-content; align-items: center; }
.a-galleria-foto { flex: none; width: clamp(280px, 34vw, 520px); aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: var(--cella); box-shadow: inset 0 0 0 1px var(--filo); }
.a-galleria-foto.alta { aspect-ratio: 3 / 4; width: clamp(220px, 24vw, 380px); }
.a-galleria-foto img { width: 100%; height: 100%; object-fit: cover; }
.a-voci-tre { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }

/* la scheda della call (Prenota una call): al posto della foto, accanto al titolo */
.a-pren-scheda { width: 100%; max-width: 460px; justify-self: center; padding: clamp(24px, 3vw, 36px); border-radius: 32px; background: var(--vetro); box-shadow: inset 0 0 0 1px var(--filo), 0 40px 90px color-mix(in srgb, var(--nero) 40%, transparent); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.a-pren-volto { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.a-pren-nome { font-size: 15px; color: var(--testo-2); }
.a-pren-scheda h2 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.a-pren-scheda ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.a-pren-scheda li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.a-pren-scheda li svg { width: 22px; height: 22px; color: var(--luce); flex: none; }
.a-pren-scheda > p:not(.a-pren-nome) { color: var(--testo-2); font-size: 15px; }
.a-pren-scheda .a-bt { margin-top: 0; }

/* la sezione «Scrivimi»: il testo a sinistra, il modulo nella cella a destra */
.a-contatta { scroll-margin-top: 90px; }
.a-contatta-in { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.a-contatta-solo { grid-template-columns: minmax(0, 1fr); }
/* il titolo lungo prende la riga intera sopra il testo e il modulo (pezzi.php, scrivimi) */
.a-contatta-lungo { row-gap: clamp(18px, 2.4vw, 36px); }
.a-contatta-lungo > .a-contatta-titolo { grid-column: 1 / -1; }
.a-contatta-lungo .a-contatta-testo > p:first-child { margin-top: 0; }
.a-contatta-testo h2 { font-size: clamp(38px, 4.4vw, 68px); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.a-contatta-testo > p { margin-top: 22px; color: var(--testo-2); font-size: clamp(17px, 1.3vw, 19px); max-width: 40ch; }
.a-contatta-altro { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.a-contatta-altro p { color: var(--testo-2); font-size: 15px; }

/* il modulo VERO dei Moduli contatto dentro la cella (markup del core: assets/js/moduli.js disegna i campi) */
.a-modulo-cella .pb-modulo { margin: 0; }
body.bt-theme .a-modulo-cella .mod-req-in-pagina .modal { position: static; max-width: none; width: 100%; max-height: none; overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.a-modulo-cella .mod-req-testa { display: none; }
.a-modulo-cella #modReqCampi { gap: 16px 14px; }
body.bt-theme .a-modulo-cella .auth-form .form-group { gap: 7px; margin: 0; }
body.bt-theme .a-modulo-cella .auth-form .form-group > label, .a-modulo-cella .mod-req-eti { font-size: 14px; font-weight: 500; color: var(--testo-2); }
body.bt-theme .a-modulo-cella .auth-form .form-group :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; font: 400 16px/1.4 var(--ar-font); color: var(--testo); background: color-mix(in srgb, var(--bianco) 5%, transparent); border: 0; border-radius: 14px; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--filo); transition: box-shadow .3s var(--molla), background-color .3s var(--molla); }
body.bt-theme .a-modulo-cella .auth-form .form-group select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--testo-2) 50%), linear-gradient(135deg, var(--testo-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
body.bt-theme .a-modulo-cella .auth-form .form-group select option { color: var(--nero); background: var(--bianco); }
body.bt-theme .a-modulo-cella .auth-form .form-group textarea { resize: vertical; min-height: 110px; }
body.bt-theme .a-modulo-cella .auth-form .form-group :is(input, select, textarea)::placeholder { color: color-mix(in srgb, var(--testo-2) 78%, transparent); }
body.bt-theme .a-modulo-cella .auth-form .form-group :is(input, select, textarea):focus { outline: none; background-color: color-mix(in srgb, var(--bianco) 8%, transparent); box-shadow: inset 0 0 0 1.5px var(--luce), 0 0 0 4px color-mix(in srgb, var(--blu) 30%, transparent); }
body.bt-theme .a-modulo-cella .auth-form .mod-req-spunta-riga { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--testo-2); cursor: pointer; }
body.bt-theme .a-modulo-cella .auth-form .mod-req-spunta-riga input { appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--filo); background: color-mix(in srgb, var(--bianco) 5%, transparent); display: grid; place-items: center; cursor: pointer; transition: background-color .25s var(--molla), box-shadow .25s var(--molla); }
body.bt-theme .a-modulo-cella .auth-form .mod-req-spunta-riga input:checked { background: var(--blu); box-shadow: none; }
body.bt-theme .a-modulo-cella .auth-form .mod-req-spunta-riga input:checked::after { content: ""; width: 6px; height: 11px; border: solid var(--bianco); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
body.bt-theme .a-modulo-cella .auth-form .mod-req-spunta-riga input:focus-visible { outline: 2px solid var(--luce); outline-offset: 3px; }
body.bt-theme .a-modulo-cella .auth-form .mod-req-spunta-riga a { color: var(--testo); text-decoration: underline; text-underline-offset: 3px; }
body.bt-theme .a-modulo-cella .auth-form .mod-req-aiuto { font-size: 13px; color: var(--testo-2); }
body.bt-theme .a-modulo-cella .auth-form .auth-err { color: var(--giallo); font-size: 14px; }
.a-modulo-cella .mod-req-grazie { font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--testo); }
/* il pulsante: la pillola bianca della bozza col cerchio blu della freccia (la freccia è una maschera, il colore è del tema) */
body.bt-theme .a-modulo-cella #modReqInvia { position: relative; display: inline-flex; align-self: flex-start; align-items: center; width: auto; min-height: 52px; margin-top: 20px; padding: 6px 60px 6px 22px; border: 0; border-radius: 999px; background: var(--bianco); color: var(--nero); font: 600 15.5px/1.2 var(--ar-font); letter-spacing: -.01em; cursor: pointer; }
body.bt-theme .a-modulo-cella #modReqInvia::before { content: ""; position: absolute; right: 6px; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: var(--blu); transition: transform .6s var(--molla); }
body.bt-theme .a-modulo-cella #modReqInvia::after { content: ""; position: absolute; right: 18px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--bianco); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .6s var(--molla); }
@media (hover: hover) {
  body.bt-theme .a-modulo-cella #modReqInvia:hover { background: var(--bt-accent-2); }
  body.bt-theme .a-modulo-cella #modReqInvia:hover::before { transform: translateX(3px) scale(1.06); }
  body.bt-theme .a-modulo-cella #modReqInvia:hover::after { transform: translateX(3px); }
}
body.bt-theme .a-modulo-cella #modReqInvia:disabled { opacity: .6; cursor: default; }

/* il testo di una pagina libera (e quello dei documenti): la prosa della bozza */
.a-sezione-testo { padding-top: clamp(24px, 4vw, 56px); }
.a-prosa { max-width: 760px; margin: 0 auto; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.7; color: var(--testo-2); }
.a-prosa > * + * { margin-top: 1.1em; }
.a-prosa :is(h2, h3, h4) { color: var(--testo); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; margin-top: 1.8em; }
.a-prosa h2 { font-size: clamp(28px, 2.6vw, 40px); }
.a-prosa h3 { font-size: clamp(22px, 1.9vw, 28px); }
.a-prosa a { color: var(--testo); text-decoration: underline; text-decoration-color: var(--luce); text-underline-offset: 4px; }
.a-prosa :is(strong, b) { color: var(--testo); font-weight: 600; }
.a-prosa :is(ul, ol) { padding-left: 1.3em; }
.a-prosa li + li { margin-top: .4em; }
.a-prosa img { border-radius: 20px; }
.a-prosa blockquote { padding-left: 20px; box-shadow: inset 2px 0 0 var(--luce); color: var(--testo); }
.a-blocchi { max-width: var(--ar-max); margin: 0 auto; padding-bottom: clamp(56px, 7vw, 96px); }

/* =====================================================================
   IL LIBRO, GLI EBOOK, LE RECENSIONI, LE PAGINE DI GRAZIE (pezzo 3 della bozza)
   ===================================================================== */
.a-nota { margin-top: 16px; font-size: 14.5px; color: var(--testo-2); }
.a-sezione-stretta { padding-top: 0; }
.a-centro { max-width: 760px; margin: clamp(32px, 4vw, 52px) auto 0; text-align: center; display: grid; justify-items: center; gap: 18px; color: var(--testo-2); font-size: clamp(17px, 1.3vw, 19px); }
.a-centro .a-nota { margin-top: 0; }
.a-sottolineato, .a-centro a.a-sottolineato { color: var(--testo); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--luce); }

/* il libro (e gli ebook) che si inclinano seguendo il mouse */
.a-libro3d, .a-ebook-coppia { position: relative; width: 100%; max-width: 470px; justify-self: center; perspective: 1300px; }
.a-libro3d.ebook { max-width: 360px; }
.a-libro3d-alone { position: absolute; left: 50%; top: 52%; width: 118%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--blu) 70%, transparent) 0%, color-mix(in srgb, var(--blu) 18%, transparent) 42%, transparent 68%); }
.a-libro3d-giro { position: relative; transform-style: preserve-3d; will-change: transform; }
.a-libro3d img, .a-ebook-coppia img { width: 100%; height: auto; filter: drop-shadow(0 36px 46px color-mix(in srgb, var(--nero) 62%, transparent)); }
.a-ebook-coppia { max-width: 520px; }
.a-ebook-coppia .a-libro3d-giro { display: grid; grid-template-areas: "x"; align-items: center; justify-items: center; padding: 8% 0; }
.a-ebook-dietro, .a-ebook-davanti { grid-area: x; width: 60%; }
.a-ebook-dietro { transform: translate(26%, -5%) rotate(6deg); opacity: .9; }
.a-ebook-davanti { transform: translate(-20%, 7%) rotate(-4deg); }

/* le fasce: testo a sinistra, il pulsante a destra */
.a-fascia, .a-ebook-fascia { max-width: var(--ar-max); margin: 0 auto; }
.a-fascia .a-cella-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 48px; padding: clamp(24px, 3.2vw, 44px); }
.a-fascia h2, .a-ebook-fascia h2, .a-grazie-griglia h2 { font-size: clamp(26px, 2.6vw, 40px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; max-width: 24ch; }
.a-fascia p { margin-top: 10px; max-width: 62ch; }
.a-fascia .a-bt { justify-self: start; }
.a-ebook-fascia .a-cella-in { display: grid; grid-template-columns: minmax(150px, 250px) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 56px); padding: clamp(24px, 3.2vw, 44px); }
.a-ebook-fascia-testo > p { margin-top: 12px; max-width: 56ch; }
.a-ebook-fascia .a-azioni { margin-top: 24px; }
.a-ebook-fascia .a-nota { margin-top: 14px; }

/* la copertina dentro le celle: gira appena quando ci passi sopra */
.a-ebook-copertina { display: grid; place-items: center; perspective: 1000px; }
.a-ebook-copertina::before { content: ""; position: absolute; left: 50%; top: 50%; width: 86%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--blu) 58%, transparent), transparent 66%); }
.a-ebook-copertina img { position: relative; width: 100%; max-width: 240px; height: auto; transform: rotateY(-12deg) rotateX(4deg); transition: transform .9s var(--molla); filter: drop-shadow(0 26px 34px color-mix(in srgb, var(--nero) 55%, transparent)); }
@media (hover: hover) { .a-cella:hover .a-ebook-copertina img { transform: rotateY(6deg) rotateX(0deg) translateY(-8px) scale(1.03); } }
.a-ebook-carte { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.a-ebook-carta .a-cella-in { justify-content: flex-start; gap: 14px; padding: clamp(24px, 3vw, 40px); }
.a-ebook-carta .a-ebook-copertina { padding: 18px 0 26px; }
.a-ebook-carta h3 { font-size: clamp(28px, 2.6vw, 40px); }
.a-ebook-carta p { max-width: 56ch; }

/* la frase che si accende, le colonne di testo, le tre celle */
.a-dichiarazione > p.a-frase { font-size: clamp(26px, 2.7vw, 42px); max-width: 32ch; line-height: 1.16; }
.a-dichiarazione-prima { margin-top: 0; }
.a-dichiarazione-prima + .a-frase { margin-top: clamp(44px, 5vw, 72px); }
.a-dichiarazione-due.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--ar-max); }
.a-tre { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.a-tre .a-cella-in { justify-content: flex-start; gap: 14px; padding: clamp(24px, 2.6vw, 34px); }
.a-tre-motivi { margin-top: clamp(48px, 6vw, 88px); }

/* come è organizzato il libro: la linea si riempie e accende le tre parti */
.a-percorso { position: relative; max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); padding-top: 52px; }
.a-percorso-linea { position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--bianco) 12%, transparent); }
.a-percorso-linea i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(90deg, var(--blu), var(--luce)); transform-origin: left; transform: scaleX(var(--p, 0)); }
.a-tappa3 { position: relative; min-width: 0; }
.a-tappa3::before { content: ""; position: absolute; left: 0; top: -52px; width: 16px; height: 16px; border-radius: 50%; background: var(--fondo); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bianco) 30%, transparent); transition: background-color .5s var(--molla), box-shadow .5s var(--molla), transform .5s var(--molla); }
.a-tappa3.accesa::before { background: var(--luce); box-shadow: 0 0 0 6px color-mix(in srgb, var(--blu) 30%, transparent); transform: scale(1.1); }
.a-tappa3 h3 { font-size: clamp(38px, 4.2vw, 68px); font-weight: 600; letter-spacing: -.05em; line-height: 1; color: color-mix(in srgb, var(--bianco) 46%, transparent); transition: color .6s var(--molla); }
.a-tappa3.accesa h3 { color: var(--bianco); }
.a-tappa3 p { margin-top: 18px; color: var(--testo-2); max-width: 46ch; }

/* la fascia per comprarlo */
.a-contatto-medio h2 { font-size: clamp(40px, 6.4vw, 104px); max-width: 15ch; margin: 0 auto; }

/* le recensioni: stelle, titolo, chi l'ha scritta e dove */
.a-voce-titolo { font-weight: 600; font-size: 16.5px; line-height: 1.35; letter-spacing: -.01em; margin-bottom: 0; }
.a-stelle { display: flex; gap: 3px; margin-bottom: 0; }
.a-stelle i { display: block; width: 17px; height: 17px; color: color-mix(in srgb, var(--bianco) 22%, transparent); }
.a-stelle i.piena { color: var(--bianco); }
.a-stelle svg { width: 100%; height: 100%; fill: currentColor; }
.a-voce-chi .a-iniziale { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--blu) 46%, transparent); color: var(--bianco); font-size: 16px; font-weight: 600; line-height: 1; }
.a-voce-chi a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--luce) 70%, transparent); }
.a-griglia-voci { max-width: var(--ar-max); margin: 0 auto; columns: 3 300px; column-gap: 14px; }
.a-griglia-voce { break-inside: avoid; margin-bottom: 14px; }

/* chi sono, in breve */
.a-chisono-breve { max-width: var(--ar-max); margin: 0 auto; }
.a-chisono-breve .a-cella-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; padding: clamp(24px, 3.2vw, 44px); }
.a-chisono-breve img { width: clamp(110px, 12vw, 168px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.a-chisono-breve h2 { font-size: clamp(30px, 3vw, 46px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; margin-bottom: 14px; }
.a-chisono-breve p { max-width: 72ch; }
.a-chisono-breve p + p { margin-top: 10px; }
.a-chisono-breve .a-cella-link { margin-top: 16px; }

/* condividilo con i tuoi amici */
.a-condividi-in { max-width: 860px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: 16px; }
.a-condividi h2 { font-size: clamp(30px, 3.6vw, 56px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.a-condividi p { color: var(--testo-2); font-size: clamp(17px, 1.3vw, 19px); }
.a-reti { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }
.a-reti .a-bt { min-height: 48px; }

/* cosa troverai nell'ebook: un elenco grande */
/* «a-libro-elenco», non «a-elenco»: quel nome è dell'elenco del blog (pezzo 4), che gli aggiungeva una riga in cima */
.a-libro-elenco { max-width: var(--ar-max); margin: 0 auto; display: grid; }
.a-libro-elenco li { position: relative; padding: clamp(18px, 2vw, 28px) 0; font-size: clamp(22px, 2.3vw, 36px); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.a-libro-elenco li::before, .a-libro-elenco li:last-child::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--filo); }
.a-libro-elenco li:last-child::after { top: auto; bottom: 0; }

/* per te sì, per te no */
.a-pertese { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.a-pertese .a-cella-in { justify-content: flex-start; gap: 18px; padding: clamp(24px, 3vw, 40px); }
.a-pertese h3 { font-size: clamp(26px, 2.4vw, 36px); }
.a-pertese ul { display: grid; gap: 16px; }
.a-pertese li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font-size: 16px; line-height: 1.55; color: var(--testo-2); }
.a-pertese li b { color: var(--testo); font-weight: 600; }
.a-pertese li svg { width: 22px; height: 22px; margin-top: 2px; color: var(--luce); }
.a-pertese .no li svg { color: color-mix(in srgb, var(--bianco) 45%, transparent); }
.a-pertese .no .a-cella-in { background: color-mix(in srgb, var(--fondo-2), var(--blu) 2%); }

/* i focus dell'ebook di Amazon */
.a-focus { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.a-focus .a-cella-in { min-height: 190px; padding: clamp(22px, 2.4vw, 30px); }
.a-focus h3 { font-size: clamp(21px, 1.7vw, 27px); }

/* le pagine di grazie */
.a-grazie-testa { max-width: var(--ar-max); margin: 0 auto; }
.a-spunta-grande { width: clamp(84px, 8vw, 116px); height: auto; margin-bottom: 18px; overflow: visible; }
.a-spunta-grande circle { fill: color-mix(in srgb, var(--blu) 32%, transparent); stroke: var(--luce); stroke-width: 2.5; }
.a-spunta-grande path { fill: none; stroke: var(--bianco); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.a-apertura-grazie .a-h1 { margin-top: 0; }
.a-grazie-griglia { max-width: var(--ar-max); margin: clamp(36px, 4vw, 60px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.a-grazie-griglia .a-cella-in { justify-content: flex-start; gap: 16px; padding: clamp(24px, 3vw, 38px); }
.a-controlla { display: grid; gap: 12px; }
.a-controlla li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font-size: 15.5px; line-height: 1.55; color: var(--testo-2); }
.a-controlla li svg { width: 22px; height: 22px; margin-top: 1px; color: var(--luce); }
/* la busta: le voci («Mittente», «Oggetto») in una colonna larga quanto la più lunga, uguale per tutte le righe (subgrid):
   con 86px fissi al telefono l'oggetto restava in una colonna stretta, su tre righe */
.a-busta { display: grid; grid-template-columns: max-content minmax(0, 1fr); border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--bianco) 4%, transparent); box-shadow: inset 0 0 0 1px var(--filo); }
.a-busta-riga { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 12px; padding: 14px 18px; font-size: 15px; line-height: 1.45; }
.a-busta-riga + .a-busta-riga { box-shadow: inset 0 1px 0 var(--filo); }
.a-busta-riga span { color: var(--testo-2); }
.a-busta-riga b { font-weight: 600; overflow-wrap: anywhere; text-wrap: balance; }
.a-passi-mail { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 15.5px; color: var(--testo-2); }
.a-copiabile { color: var(--testo); font-weight: 600; user-select: all; overflow-wrap: anywhere; }

/* lascia una recensione */
.a-recensisci { max-width: var(--ar-max); margin: clamp(32px, 4vw, 56px) auto 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 14px; align-items: start; }
.a-media-voti { position: sticky; top: 110px; display: grid; justify-items: start; gap: 12px; padding: clamp(24px, 3vw, 38px); border-radius: 30px; background: var(--vetro); box-shadow: inset 0 0 0 1px var(--filo); }
.a-media-numero { font-size: clamp(76px, 7vw, 116px); font-weight: 600; letter-spacing: -.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.a-media-voti .a-stelle { margin: 0; }
.a-media-voti .a-stelle i { width: 24px; height: 24px; }
.a-media-voti > p:not(.a-media-numero) { color: var(--testo-2); font-size: 15.5px; }
.a-voto { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 4px; }
.a-voto legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--testo-2); }
.a-voto-stelle { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.a-voto-stelle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.a-voto-stelle label { width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer; color: color-mix(in srgb, var(--bianco) 24%, transparent); transition: color .25s var(--molla), transform .45s var(--molla); }
.a-voto-stelle label svg { width: 34px; height: 34px; fill: currentColor; }
.a-voto-stelle input:checked ~ label { color: var(--bianco); }
@media (hover: hover) { .a-voto-stelle label:hover, .a-voto-stelle label:hover ~ label { color: var(--luce); } .a-voto-stelle label:hover { transform: scale(1.12); } }
.a-voto-stelle input:focus-visible + label { outline: 2px solid var(--luce); outline-offset: 2px; border-radius: 12px; }
.a-voto.sbagliato legend { color: var(--giallo); }
.a-campo.sbagliato textarea { box-shadow: inset 0 0 0 1.5px var(--giallo); }

@media (max-width: 860px) {
  .a-fascia .a-cella-in, .a-ebook-fascia .a-cella-in, .a-chisono-breve .a-cella-in { grid-template-columns: 1fr; }
  .a-tre, .a-ebook-carte, .a-pertese, .a-grazie-griglia, .a-recensisci, .a-focus, .a-dichiarazione-due.tre { grid-template-columns: 1fr; }
  .a-libro3d { max-width: 290px; margin-top: 22px; }
  .a-libro3d.ebook { max-width: 240px; }
  .a-ebook-coppia { max-width: 330px; margin-top: 18px; }
  .a-ebook-fascia .a-ebook-copertina img { max-width: 170px; }
  .a-percorso { grid-template-columns: 1fr; padding: 0 0 0 40px; gap: 40px; }
  .a-percorso-linea { left: 7px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .a-percorso-linea i { transform-origin: top; transform: scaleY(var(--p, 0)); background: linear-gradient(var(--luce), var(--blu)); }
  .a-tappa3::before { left: -40px; top: .7em; }
  .a-media-voti { position: static; }
  .a-focus .a-cella-in { min-height: 0; }
}
@media (max-width: 1080px) and (min-width: 861px) { .a-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a-dichiarazione-due.tre { grid-template-columns: 1fr 1fr; } }
/* la recensione senza modulo (il modulo è del compito 4): resta il voto medio */
.a-recensisci-solo { grid-template-columns: minmax(0, 460px); }
.a-recensisci-solo .a-media-voti { position: static; }


/* =====================================================================
   LE STORIE, ECOMMERCE HUB, LINK BIO, LA NEWSLETTER (pezzo 3b della bozza)
   ===================================================================== */
.a-centrato, .a-tre-testi { max-width: var(--ar-max); margin-left: auto; margin-right: auto; }
.a-tre-testi { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* il marchio del cliente, grande, che gira nella luce */
.a-logo-grande { max-width: 380px; aspect-ratio: 1; }
.a-logo-grande .a-libro3d-giro { height: 100%; }
.a-logo-grande img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: var(--bianco); padding: 15%; filter: none; box-shadow: 0 0 0 10px var(--vetro), 0 0 0 11px var(--filo), 0 40px 90px color-mix(in srgb, var(--nero) 50%, transparent); }

/* la voce del cliente: si accende parola per parola */
.a-citazione { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.a-citazione > img { width: clamp(84px, 9vw, 128px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px var(--vetro), 0 0 0 7px var(--filo); }
.a-citazione blockquote p { font-size: clamp(22px, 2.3vw, 36px); font-weight: 500; letter-spacing: -.025em; line-height: 1.3; max-width: 46ch; }
.a-citazione figcaption { margin-top: 22px; color: var(--testo-2); font-size: 15px; }
.a-citazione figcaption b { display: block; color: var(--testo); font-size: 17px; font-weight: 600; }

/* i video: la copertina, il tasto play, si aprono su YouTube */
.a-video { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; border-radius: 24px; background: var(--cella); box-shadow: inset 0 0 0 1px var(--filo); }
.a-video-foto, .a-video-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.a-video-foto img { object-fit: cover; transition: transform 1.2s var(--molla); }
.a-video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, color-mix(in srgb, var(--fondo) 90%, transparent) 6%, transparent 58%); }
.a-video-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--bianco); color: var(--blu); box-shadow: 0 0 0 10px color-mix(in srgb, var(--bianco) 18%, transparent); transition: transform .6s var(--molla), box-shadow .6s var(--molla); }
.a-video-play svg { width: 26px; height: 26px; margin-left: 3px; }
.a-video-titolo { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 2; font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; }
.a-video-titolo small { display: block; margin-top: 4px; font-weight: 500; font-size: 13.5px; color: var(--testo-2); }
@media (hover: hover) { .a-video:hover .a-video-foto img { transform: scale(1.06); } .a-video:hover .a-video-play { transform: scale(1.1); box-shadow: 0 0 0 16px color-mix(in srgb, var(--bianco) 14%, transparent); } }
.a-video-griglia { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.a-video-griglia.due { grid-template-columns: 1fr 1fr; }
.a-galleria-traccia > .a-video { flex: none; width: clamp(300px, 40vw, 600px); }

/* i passi della storia: la linea si riempie, il passo in lettura si accende */
/* la linea sta nel contenitore accanto all'elenco (nella bozza stava dentro l'<ol>, che non è HTML valido) */
.a-passi-box { position: relative; max-width: var(--ar-max); margin: 0 auto; padding-left: clamp(28px, 5vw, 64px); }
.a-passi-storia { position: relative; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2vw, 24px); list-style: none; }
.a-passi-box .a-storia-linea { left: clamp(6px, 1.4vw, 16px); }
.a-passo-storia { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 64px); padding: clamp(22px, 3vw, 40px); border-radius: 28px; background: var(--vetro); box-shadow: inset 0 0 0 1px var(--filo); transition: background-color .6s var(--molla), box-shadow .6s var(--molla); }
.a-passo-storia::before { content: ""; position: absolute; left: calc(-1 * clamp(28px, 5vw, 64px) + clamp(6px, 1.4vw, 16px) - 6px); top: clamp(30px, 3.4vw, 48px); width: 14px; height: 14px; border-radius: 50%; background: var(--fondo); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bianco) 30%, transparent); transition: background-color .5s var(--molla), box-shadow .5s var(--molla); }
.a-passo-storia.accesa { background: var(--cella); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--luce) 32%, transparent); }
.a-passo-storia.accesa::before { background: var(--luce); box-shadow: 0 0 0 6px color-mix(in srgb, var(--blu) 30%, transparent); }
.a-passo-storia .a-passo-titolo { font-size: clamp(24px, 2.4vw, 36px); font-weight: 600; letter-spacing: -.035em; line-height: 1.12; }
/* l'obiettivo di un passo è una frase (fino a 90 lettere): un titolo così andava su 3-4 righe, oltre le due del controllo */
.a-situazione { margin-top: 14px; font-size: 16px; color: var(--testo-2); }
.a-situazione b, .a-strategia-testa { color: var(--testo); font-weight: 600; }
.a-strategia-testa { font-size: 16px; }
.a-passo-storia ul { display: grid; gap: 12px; margin-top: 10px; }
.a-passo-storia li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: var(--testo-2); }
.a-passo-storia li::before { content: ""; position: absolute; left: 0; top: .78em; width: 12px; height: 2px; border-radius: 2px; background: var(--luce); }

/* i numeri che salgono */
.a-numeri { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.a-numeri.quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a-numeri .a-cella-in { min-height: 210px; justify-content: space-between; padding: clamp(18px, 2.6vw, 34px); container-type: inline-size; }
.a-numero-grande { font-size: clamp(30px, 21cqw, 90px) !important; font-weight: 600; letter-spacing: -.055em; line-height: .9 !important; color: var(--testo) !important; font-variant-numeric: tabular-nums; white-space: nowrap; max-width: none !important; }
.a-numero-grande .segno { color: var(--luce); font-size: .62em; letter-spacing: -.02em; }
.a-numeri p:not(.a-numero-grande) { font-size: 16px; }

/* stampa: le pubblicazioni e le foto che scorrono dentro la cornice */
.a-pubblicazioni { max-width: var(--ar-max); margin: 14px auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.a-pubblicazioni .a-cella-in { justify-content: space-between; gap: 18px; padding: clamp(20px, 2.4vw, 30px); }
.a-pubblicazione-foto { height: clamp(170px, 16vw, 230px); }
.a-pubblicazione-foto img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 30px color-mix(in srgb, var(--nero) 50%, transparent)); }
.a-pubblicazioni figcaption { font-weight: 600; font-size: 16px; }
.a-mosaico { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 13vw, 210px); gap: 14px; }
.a-mosaico figure { position: relative; overflow: hidden; border-radius: 24px; background: var(--cella); box-shadow: inset 0 0 0 1px var(--filo); }
.a-mosaico img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }

/* le persone: il team, i founder */
.a-persone { max-width: var(--ar-max); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 4vw, 56px); }
.a-persona { width: 180px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.a-persona img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; filter: grayscale(1); box-shadow: 0 0 0 6px var(--vetro), 0 0 0 7px var(--filo); transition: filter .6s var(--molla), transform .8s var(--molla); }
@media (hover: hover) { .a-persona:hover img { filter: none; transform: translateY(-6px) scale(1.04); } }
.a-persona b { display: block; font-size: 17px; font-weight: 600; }
.a-persona span { display: block; font-size: 14px; color: var(--testo-2); }

/* Link Bio: una colonna sola, come sul telefono */
.a-bio { position: relative; isolation: isolate; overflow: hidden; min-height: 100dvh; background: var(--fondo); padding-top: calc(56px + env(safe-area-inset-top, 0px)); padding-bottom: 120px; padding-left: var(--ml); padding-right: var(--mr); }
.a-bio-in { max-width: 520px; margin: 0 auto; display: grid; justify-items: center; gap: 10px; text-align: center; }
.a-bio-volto { position: relative; width: 132px; aspect-ratio: 1; margin-bottom: 12px; }
.a-bio-volto::before { content: ""; position: absolute; inset: -45%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--blu) 72%, transparent), transparent 64%); animation: a-respiro 5s ease-in-out infinite alternate; }
@keyframes a-respiro { from { transform: scale(.86); opacity: .72; } to { transform: scale(1.08); opacity: 1; } }
.a-bio-volto img { position: relative; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 22%; box-shadow: 0 0 0 6px var(--vetro), 0 0 0 7px var(--filo); }
.a-bio h1 { font-size: clamp(34px, 8vw, 46px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.a-bio-mestiere { color: var(--testo-2); }
.a-bio-link { width: 100%; display: grid; gap: 10px; margin-top: 20px; }
.a-bio-link a { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--vetro); box-shadow: inset 0 0 0 1px var(--filo); font-weight: 600; font-size: 16px; line-height: 1.25; text-align: left; transition: background-color .35s var(--molla), transform .5s var(--molla); }
.a-bio-link a > span:not(.a-bt-ico) { flex: 1; min-width: 0; }
.a-bio-link .a-bt-ico { background: color-mix(in srgb, var(--bianco) 10%, transparent); }
.a-bio-link a.primo { background: var(--bianco); color: var(--nero); }
.a-bio-link a.primo .a-bt-ico { background: var(--blu); color: var(--bianco); }
.a-bio-link a.libro { padding-left: 14px; }
.a-bio-libro { width: 40px; height: auto; margin: -14px 0 -10px; transform: rotate(-6deg); filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--nero) 50%, transparent)); }
@media (hover: hover) { .a-bio-link a:hover { background: color-mix(in srgb, var(--bianco) 9%, transparent); transform: translateY(-2px); } .a-bio-link a.primo:hover { background: var(--bianco); } .a-bio-link a:hover .a-bt-ico { transform: translateX(3px); } }
.a-bio-media { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.a-bio-media a { display: grid; gap: 6px; padding: 8px 8px 16px; border-radius: 26px; background: var(--vetro); box-shadow: inset 0 0 0 1px var(--filo); text-align: left; }
.a-bio-foto { position: relative; display: block; overflow: hidden; border-radius: 19px; aspect-ratio: 1; margin-bottom: 6px; }
.a-bio-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--molla); }
.a-bio-foto .a-video-play { width: 52px; height: 52px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--bianco) 18%, transparent); }
.a-bio-foto .a-video-play svg { width: 20px; height: 20px; }
@media (hover: hover) { .a-bio-media a:hover .a-bio-foto img { transform: scale(1.06); } }
.a-bio-media b { padding: 0 8px; font-size: 15px; line-height: 1.25; }
.a-bio-media small { padding: 0 8px; font-size: 13px; color: var(--testo-2); }
.a-bio-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.a-bio-sito { margin-top: 18px; font-size: 14.5px; }

/* la newsletter */
.a-news-cella h2 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; margin-bottom: 6px; }
.a-news-cella { width: 100%; max-width: 560px; justify-self: end; }
/* due per riga anche al computer: i titoli sono frasi (fino a settanta lettere), in quattro colonne andavano su quattro righe */
.a-trovi { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.a-trovi .a-cella-in { min-height: 150px; padding: clamp(22px, 2.4vw, 30px); }
.a-trovi h3 { font-size: clamp(20px, 1.6vw, 25px); }

@media (max-width: 1080px) and (min-width: 861px) { .a-trovi, .a-numeri.quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .a-citazione { grid-template-columns: 1fr; }
  .a-video-griglia, .a-video-griglia.due, .a-pubblicazioni, .a-passo-storia, .a-tre-testi, .a-trovi { grid-template-columns: 1fr; }
  .a-numeri, .a-numeri.quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-numeri .a-cella-in { min-height: 150px; }
  .a-logo-grande { max-width: 260px; margin-top: 22px; }
  .a-galleria-traccia > .a-video { width: 82vw; scroll-snap-align: center; }
  .a-mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .a-mosaico figure { grid-column: span 1 !important; grid-row: span 1 !important; }
  .a-mosaico figure:first-child { grid-column: span 2 !important; grid-row: span 2 !important; }
  .a-mosaico.sei figure:last-child { grid-column: span 2 !important; }
  .a-persona { width: 140px; }
  .a-persona img { width: 112px; height: 112px; }
  .a-news-cella { justify-self: stretch; max-width: none; margin-top: 24px; }
  .a-trovi .a-cella-in { min-height: 0; }
}
.a-apertura:has(.a-news-cella) .a-h1 { font-size: clamp(76px, 11vw, 176px); letter-spacing: -.065em; line-height: .88; }
/* la scritta gigante si disegna più in basso della sua riga (.88): il sottotitolo si scosta un po' di più */
.a-apertura:has(.a-news-cella) .a-sotto { margin-top: clamp(26px, 2.6vw, 44px); }
/* Link Bio: la pagina del link di Instagram, senza isola del menu e senza piè */
body.bt-theme.a-nuda .a-isola, body.bt-theme.a-nuda .a-piede { display: none; }
.a-bio-link .a-bt-ico { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.a-bio-link .a-bt-ico svg { width: 15px; height: 15px; }


/* ============================================================
   IL LIBRO GRATIS, I LETTORI, IL MESSAGGIO, LA PAGINA NON TROVATA (pezzo 5.3 e 5.2 della bozza)
   e i pezzi che queste pagine prendono da altre parti della bozza (schede, ricerca, dato da copiare, icone)
   ============================================================ */
.a-apertura:has(.a-cerca) { overflow: visible; z-index: 3; }
.a-apertura:has(.a-cerca) .a-aurora { overflow: hidden; }
.a-azioni .a-cerca { flex: 1 1 100%; }
.a-cerca { position: relative; width: 100%; max-width: 560px; display: flex; align-items: center; min-height: 60px; border-radius: 999px; background: color-mix(in srgb, var(--bianco) 6%, transparent); box-shadow: inset 0 0 0 1px var(--filo); transition: box-shadow .3s var(--molla), background-color .3s var(--molla); }
.a-cerca:focus-within { background: color-mix(in srgb, var(--bianco) 9%, transparent); box-shadow: inset 0 0 0 1.5px var(--luce), 0 0 0 5px color-mix(in srgb, var(--blu) 28%, transparent); }
.a-cerca-ico { position: absolute; left: 22px; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: var(--testo-2); pointer-events: none; }
.a-cerca-ico svg { width: 100%; height: 100%; }
.a-cerca input { flex: 1; min-width: 0; height: 60px; border: 0; background: transparent; color: var(--testo); font: inherit; font-size: 17px; padding: 0 10px 0 54px; outline: none; }
.a-cerca input::placeholder { color: color-mix(in srgb, var(--testo-2) 72%, transparent); }
.a-cerca input::-webkit-search-cancel-button { -webkit-appearance: none; }
.a-cerca-vai { flex: none; width: 48px; height: 48px; margin-right: 6px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--bianco); color: var(--notte); cursor: pointer; transition: transform .6s var(--molla); }
.a-cerca-vai svg { width: 16px; height: 16px; }
@media (hover: hover) { .a-cerca-vai:hover { transform: translateX(2px) scale(1.05); } }
.a-cerca.grande { max-width: 860px; min-height: 76px; }
.a-cerca.grande input { height: 76px; font-size: clamp(19px, 1.7vw, 23px); padding-left: 64px; }
.a-cerca.grande .a-cerca-ico { left: 26px; width: 24px; height: 24px; }
.a-cerca.grande .a-cerca-vai { width: 60px; height: 60px; margin-right: 8px; }
.a-cerca-lista { position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 30; padding: 8px; border-radius: 24px; background: color-mix(in srgb, var(--fondo-2) 94%, var(--nero)); box-shadow: inset 0 0 0 1px var(--filo), 0 34px 70px -24px var(--nero)E6; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.a-cerca-lista a { display: grid; gap: 3px; padding: 12px 14px; border-radius: 16px; outline: none; }
.a-cerca-lista a span { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.a-cerca-lista a small { font-size: 13px; color: var(--testo-2); }
.a-cerca-lista a:focus-visible, .a-cerca-tutti:focus-visible { background: color-mix(in srgb, var(--bianco) 9%, transparent); outline: none; }
@media (hover: hover) { .a-cerca-lista a:hover { background: color-mix(in srgb, var(--bianco) 7%, transparent); } }
.a-cerca-tutti { width: 100%; margin-top: 4px; padding: 13px 14px; border: 0; border-top: 1px solid var(--filo); border-radius: 0 0 16px 16px; background: transparent; text-align: left; font-weight: 600; font-size: 14.5px; color: var(--luce); cursor: pointer; }
.a-cerca-niente { padding: 12px 14px; font-size: 14.5px; color: var(--testo-2); }
.a-cerca-testa { max-width: var(--ar-max); margin: 0 auto; }
.a-cerca-testa .a-h1 { margin-top: 0; }
.a-cerca-testa [data-pezzo="azioni"] { margin-top: 32px; }
.a-cerca-conta { margin-top: 18px; min-height: 1.5em; font-size: 16px; color: var(--testo-2); }
@media (max-width: 600px) {
  .a-cerca.grande { min-height: 64px; }
  .a-cerca.grande input { height: 64px; font-size: 17px; padding-left: 54px; }
  .a-cerca.grande .a-cerca-ico { left: 22px; width: 20px; height: 20px; }
  .a-cerca.grande .a-cerca-vai { width: 50px; height: 50px; margin-right: 7px; }
}
body.bt-theme .a-cerca input:focus-visible { outline: none; }
.a-schede { position: relative; display: flex; gap: 4px; }
.a-schede button { height: 48px; padding: 0 14px; border: 0; background: transparent; color: var(--testo-2); font-size: 15px; font-weight: 500; cursor: pointer; transition: color .3s var(--molla); }
.a-schede button[aria-pressed="true"] { color: var(--testo); }
@media (hover: hover) { .a-schede button:hover { color: var(--testo); } }
.a-schede-riga { position: absolute; left: 0; bottom: 4px; height: 2px; width: 0; border-radius: 2px; background: var(--luce); pointer-events: none; }
.a-cerca-negozio { width: 300px; max-width: 100%; min-height: 48px; }
.a-cerca-negozio input { height: 48px; font-size: 16px; padding-left: 46px; padding-right: 16px; }
.a-cerca-negozio .a-cerca-ico { left: 18px; width: 18px; height: 18px; }
.a-nessuno { max-width: var(--ar-max); margin: clamp(32px, 4vw, 56px) auto 0; padding: clamp(40px, 6vw, 80px) 24px; display: grid; justify-items: center; gap: 14px; text-align: center; border-radius: 30px; box-shadow: inset 0 0 0 1px var(--filo); }
.a-nessuno h2 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 600; letter-spacing: -.04em; line-height: 1.15; overflow-wrap: anywhere; }
.a-nessuno p { color: var(--testo-2); }
.a-nessuno .a-bt { margin-top: 8px; }
.a-opzione-ico { grid-column: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--vetro); color: var(--luce); }
.a-opzione-ico svg { width: 20px; height: 20px; }
.a-dato { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; box-shadow: inset 0 -1px 0 var(--filo); font-size: 15.5px; }
.a-dato span { color: var(--testo-2); }
.a-dato b { font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.a-copia { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--vetro); box-shadow: inset 0 0 0 1px var(--filo); color: var(--testo); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .3s var(--molla); }
.a-copia.fatto { background: color-mix(in srgb, var(--blu) 38%, transparent); box-shadow: none; }
@media (max-width: 860px) {
  .a-cerca-negozio { width: 100%; max-width: none; order: 3; }
}
@media (max-width: 600px) {
  .a-opzione .a-opzione-ico { grid-row: 1 / span 2; }
  .a-dato { grid-template-columns: minmax(0, 1fr) auto; }
  .a-dato span { grid-column: 1 / -1; margin-bottom: -10px; font-size: 14px; }
}
.a-404 { max-width: var(--ar-max); margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 56px); }
.a-404-cifre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 880px; }
.a-404-cifre .a-cella-in { aspect-ratio: 1 / 1.08; justify-content: center; align-items: center; padding: 0; }
.a-404-cifre span { font-size: clamp(110px, 17vw, 260px); font-weight: 600; letter-spacing: -.06em; line-height: 1; color: var(--testo); }
.a-404-cifre .a-cella:nth-child(2) span { color: var(--luce); }
.a-404-testo { max-width: 760px; }
.a-404-testo .a-h1 { margin-top: 0; }
.a-404-cerca { margin-top: 34px; display: grid; gap: 12px; }
.a-404-cerca p { font-size: 15px; color: var(--testo-2); }
@media (max-width: 600px) {
  .a-404-cifre { gap: 8px; }
}
.a-regalo-in, .a-lettera { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4.5vw, 80px); align-items: start; }
.a-regalo-testo h2 { font-size: clamp(36px, 4.4vw, 66px); font-weight: 600; letter-spacing: -.05em; line-height: 1.02; }
.a-regalo-testo p { margin-top: 18px; max-width: 58ch; color: var(--testo-2); }
.a-regalo-testo b { color: var(--testo); font-weight: 600; }
.a-regalo-testo .a-regalo-fretta { color: var(--testo); font-weight: 600; font-style: italic; }
.a-prenota { scroll-margin-top: 110px; }
.a-prenota .a-cella-in { justify-content: flex-start; gap: 16px; padding: clamp(22px, 3vw, 36px); }
.a-prenota h3 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.a-prenota .a-nota { margin-top: 0; }
.a-serve .a-cella-in { justify-content: flex-start; gap: 12px; padding: 28px; }
.a-serve-fondo { max-width: var(--ar-max); margin: 18px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 22px 26px; border-radius: 26px; box-shadow: inset 0 0 0 1px var(--filo); }
.a-serve-fondo p { max-width: 52ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; }
.a-lettera-testo { display: grid; gap: 18px; }
.a-lettera-testo p { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; color: var(--testo-2); }
.a-lettera-testo p[data-accende] { font-size: clamp(22px, 2.1vw, 31px); line-height: 1.34; letter-spacing: -.02em; color: var(--testo); }
.a-lettera-firma { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.a-lettera-firma img { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; }
.a-lettera-firma span { display: grid; gap: 2px; font-size: 15px; line-height: 1.45; }
.a-lettera-firma b { color: var(--testo); font-weight: 600; }
.a-video-testa { width: 100%; max-width: 580px; justify-self: center; }
.a-risorse-barra { max-width: var(--ar-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.a-risorse-barra .a-schede { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.a-risorse-barra .a-schede::-webkit-scrollbar { display: none; }
.a-risorse-barra .a-schede button { flex: none; white-space: nowrap; }
.a-schede-n { margin-left: 2px; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--testo-2); }
.a-risorse-conta { max-width: var(--ar-max); margin: 14px auto 18px; min-height: 1.5em; font-size: 15px; color: var(--testo-2); }
.a-risorse { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.a-risorse .a-risorsa-libro { grid-column: 1 / -1; }
.a-risorse.a-risorse-libri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a-risorse.a-risorse-libri .a-risorsa-libro { grid-column: auto; }
.a-risorsa { position: relative; display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--vetro); box-shadow: inset 0 0 0 1px var(--filo); transition: background-color .3s var(--molla), box-shadow .3s var(--molla); }
@media (hover: hover) { a.a-risorsa:hover { background: color-mix(in srgb, var(--blu) 16%, transparent); box-shadow: inset 0 0 0 1px var(--luce); } a.a-risorsa:hover .a-risorsa-freccia { transform: translateX(3px); } }
.a-risorsa-strumento { grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 72px; }
.a-risorsa-strumento b { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.a-risorsa-strumento small { grid-column: 1; font-size: 13px; color: var(--testo-2); }
.a-risorsa-freccia { grid-column: 2; grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--bianco) 8%, transparent); transition: transform .5s var(--molla); }
.a-risorsa-freccia svg { width: 14px; height: 14px; }
.a-risorsa-libro { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 16px; padding: 20px 22px; }
.a-risorsa-libro h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.a-risorsa-libro p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--testo-2); }
.a-risorsa-vai { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14.5px; font-weight: 600; }
.a-risorsa-vai span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--bianco) 10%, transparent); transition: transform .5s var(--molla); }
.a-risorsa-vai svg { width: 13px; height: 13px; }
@media (hover: hover) { .a-risorsa-vai:hover span { transform: translateX(3px); } }
.a-pdf { max-width: var(--ar-max); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.a-pdf .a-cella-in, .a-promo .a-cella-in { justify-content: flex-start; gap: 14px; padding: clamp(24px, 3vw, 38px); }
.a-pdf .a-bt, .a-promo .a-bt { align-self: flex-start; margin-top: 0; }
.a-promo-logo { height: 52px; display: flex; align-items: center; }
/* il logo alto al massimo 38px e mai più largo del suo posto, sempre nelle sue proporzioni (con height fissa, quando
   max-width lo stringeva, si schiacciava: 226×38 invece di 713×96) */
.a-promo-logo img { width: auto; height: auto; max-height: 38px; max-width: 100%; }
.a-promo-codice { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 52px; padding: 6px 6px 6px 16px; border-radius: 14px; background: color-mix(in srgb, var(--bianco) 5%, transparent); box-shadow: none; }
/* il codice non si spezza mai («ecomm / erce15» non si leggeva): nella scheda stretta la parola «Codice» lascia il posto
   (lo dice già il testo sopra, «Inserisci il codice») */
.a-promo .a-cella-in { container-type: inline-size; }
.a-promo-codice b { overflow-wrap: normal; white-space: nowrap; }
@container (max-width: 300px) { .a-promo-codice { grid-template-columns: minmax(0, 1fr) auto; } .a-promo-codice > span { display: none; } }
.a-regala-copertina img { filter: drop-shadow(0 26px 34px color-mix(in srgb, var(--nero) 50%, transparent)); }
.a-news-lettori .a-cella-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 24px 48px; padding: clamp(24px, 3.2vw, 44px); }
.a-news-lettori h2 { font-size: clamp(28px, 2.6vw, 40px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; }
.a-news-lettori .a-cella-in > div > p { margin-top: 10px; }
.a-messaggio { max-width: 960px; margin: 0 auto; display: grid; justify-items: center; gap: 28px; text-align: center; }
.a-messaggio .a-h1 { margin-top: 0; }
.a-messaggio .a-sotto { margin: 14px auto 0; }
.a-messaggio-video { width: 100%; }
.a-messaggio .a-azioni { justify-content: center; margin-top: 0; }
@media (max-width: 980px) {
  .a-regalo-in, .a-lettera, .a-news-lettori .a-cella-in { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .a-risorse.a-risorse-libri, .a-pdf { grid-template-columns: 1fr; }
  .a-risorse-barra .a-cerca-negozio { order: 0; }
}
.a-risorse-altri { max-width: var(--ar-max); margin: 22px auto 0; display: flex; justify-content: center; }

/* il regalo senza modulo (il modulo è del compito 4): il testo a tutta larghezza */
.a-regalo-solo { grid-template-columns: minmax(0, 1fr) !important; }
.a-lettera-sola { grid-template-columns: minmax(0, 1fr); max-width: 860px; }

/* ============================================================
   LE PAGINE DEL CORE E DEGLI ADDON (pezzo 5 della bozza)
   ============================================================
   Negozio, scheda, carrello, cassa, area riservata, documenti, pagina non trovata: le veste il core coi nomi di Bento,
   che qui hanno i valori di Ardea. Qui solo quello che i nomi non bastano a dire. */

/* le carte «rovesciate» di Bento (fondo = il colore del testo): su Ardea il testo è bianco e la carta diventava un
   riquadro bianco con le scritte bianche («Non trovi quello che cerchi?» nel negozio). Qui sono il blu del tema. */
body.bt-theme .bt-card-lg--dark, body.bt-theme .bt-box--dark, .bt-cta { background: var(--ar-carta-blu); color: var(--testo); box-shadow: inset 0 0 0 1px var(--filo); }
body.bt-theme .bt-card-lg--dark .bt-help-text { color: var(--testo-2); }

/* ⚠️ LE COPPIE DI BENTO COL BIANCO SCRITTO A MANO. Bento accende alcuni pezzi col fondo --bt-ink e la scritta #FFF: su
   un tema scuro --bt-ink è il testo chiaro, e veniva bianco su bianco (la voce accesa dell'area riservata, contrasto 1,00
   al banco; anche il tema scuro di prova del banco della cassa ha --bt-ink chiaro). Qui quei pezzi diventano le pillole
   bianche della bozza con la scritta nera. Il rimedio per tutti è nel core: «color: var(--bt-card)» al posto di #FFF. */
body.bt-theme :is(.account-nav-item.active, .bt-arrow--dark, .featured-card-badge, .featured-card-add, .view-toggle-btn.active, .bt-page-btn.is-on, .global-notice) { background: var(--ar-bianco); color: var(--ar-nero); }
body.bt-theme .account-nav-item.active svg { color: var(--ar-blu); }
/* la Rivista fa lo stesso col fondo --bt-accent e la scritta #fff (il pulsante «Guarda il tutorial»): qui la scritta dell'accento */
body.bt-theme :is(.riv-tut-bt, .riv-benv-si) { color: var(--bt-accent-ink); }
/* la cornice delle foto del negozio: Bento le dà --bt-line-soft, una mescola che non è un colore della tavolozza */
body.bt-theme .bt-card-media { background-color: var(--ar-fondo-2); }

/* l'area riservata: «Entra» e «Crea il tuo accesso» affiancati (il manifest chiede "area_affiancata", il core stampa
   .area-porta, la disposizione è del tema, come Zefira e Cultura). Le teste sulla stessa riga (subgrid); sotto i 900px
   una colonna sola, prima chi entra. */
body.bt-theme .area-porta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 20px; align-items: start; max-width: var(--ar-max); margin-inline: auto; padding-inline: var(--ml) var(--mr); box-sizing: border-box; }
body.bt-theme .area-porta > .account-view { max-width: none; margin: 0; padding-inline: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
body.bt-theme .area-porta > .account-view.hidden { display: none; }
body.bt-theme .area-porta:not(:has(> .account-view:not(.hidden))) { display: none; }
@media (max-width: 900px) {
  body.bt-theme .area-porta { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  body.bt-theme .area-porta > .account-view { grid-row: auto; grid-template-rows: auto auto; }
}

/* ============================================================
   I PEZZI CHE IL CORE E GLI ADDON APPENDONO AL CORPO
   ============================================================
   Banner dei cookie, linguette (Accessibilità, Privacy), le loro finestre e tutte le finestre del core (accesso,
   conferme, «Richiedi informazioni»): li stampano il core e gli addon, anche dentro <body> fuori dalla pagina. Su
   Ardea i nomi vecchi di Bento si rovesciano (--dark è il bianco, perché --bt-ink qui è il testo chiaro): il banner
   usciva bianco con le scritte bianche. Qui quei nomi tornano ai colori di Ardea su questi pezzi, e i pezzi prendono
   il disegno della bozza (pezzo 5.2): il banner è una carta di vetro in basso a sinistra con i tre pulsanti uguali e
   pieni, le linguette sono cerchi che si aprono col mouse, le finestre sono le carte scure della bozza. */
body.bt-theme .tc-consent-banner, body.bt-theme .tc-linguette, body.bt-theme .modal-overlay,
body.bt-theme .back-to-top, body.bt-theme .whatsapp-float, body.bt-theme .addi-installa-fl, body.bt-theme .addi-installa-fatto {
  --dark: var(--fondo-2); --bg: var(--fondo); --white: var(--fondo-2); --text: var(--testo); --muted: var(--testo-2);
  --border: var(--filo); --red: var(--bianco); --radius: 18px; --shadow: 0 40px 100px color-mix(in srgb, var(--nero) 55%, transparent);
  --font-display: var(--ar-font);
  font-family: var(--ar-font);
}

/* il banner dei cookie: una carta in basso a sinistra, «Personalizza», «Rifiuta» e «Accetta» uguali e pieni */
body.bt-theme .tc-consent-banner { left: var(--ml); right: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: min(560px, calc(100% - var(--ml) - var(--mr))); flex-direction: column; align-items: stretch; gap: 18px; padding: 22px 22px 20px; border-radius: 26px; background: color-mix(in srgb, var(--fondo-2) 92%, transparent); color: var(--testo-2); box-shadow: inset 0 0 0 1px var(--filo), 0 30px 80px color-mix(in srgb, var(--nero) 55%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transform: translateY(calc(100% + 48px)); transition: transform .6s var(--molla); }
body.bt-theme .tc-consent-banner.open { transform: translateY(0); }
body.bt-theme .tc-consent-text { min-width: 0; padding-right: 44px; font-size: 15px; line-height: 1.55; color: var(--testo-2); }
body.bt-theme .tc-consent-text a { color: var(--testo); text-decoration: underline; text-underline-offset: 3px; }
body.bt-theme .tc-consent-close { top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: var(--vetro); color: var(--testo); box-shadow: inset 0 0 0 1px var(--filo); }
@media (hover: hover) { body.bt-theme .tc-consent-close:hover { background: color-mix(in srgb, var(--bianco) 12%, transparent); color: var(--testo); } }
body.bt-theme .tc-consent-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
body.bt-theme .tc-consent-btn { min-width: 0; min-height: 48px; padding: 0 14px; border: 0; border-radius: 999px; font: 600 15px/1.2 var(--ar-font); letter-spacing: -.01em; text-decoration: none; box-shadow: none; transition: background-color .3s var(--molla), color .3s var(--molla); }
body.bt-theme .tc-consent-btn-accept, body.bt-theme .tc-consent-btn-reject { background: var(--bianco); color: var(--nero); }
body.bt-theme .tc-consent-btn-customize { background: var(--vetro); color: var(--testo); box-shadow: inset 0 0 0 1px var(--filo); }
@media (hover: hover) {
  body.bt-theme .tc-consent-btn-accept:hover, body.bt-theme .tc-consent-btn-reject:hover { background: var(--bt-accent-2); }
  body.bt-theme .tc-consent-btn-customize:hover { background: color-mix(in srgb, var(--bianco) 10%, transparent); }
}

/* le linguette: cerchi in basso a sinistra; col mouse sopra si apre solo quella, con la sua scritta.
   ⚠️ align-items: flex-start, sennò in colonna si allargano insieme alla più larga (Marco, 28/10/26: «quando clicco su
   accessibilità si apre anche privacy»); e da chiuse niente spazio fra icona e scritta: 44 × 44, un cerchio. */
body.bt-theme .tc-linguette { left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px) + var(--addi-banner-h, 0px)); z-index: 270; align-items: flex-start; gap: 8px; }
/* mentre il banner è aperto le linguette si fanno da parte (come nella bozza): al telefono gli stavano sopra e coprivano
   la pagina, e la Privacy che aprono è già lì, nel banner */
body.bt-theme .tc-linguette { transition: opacity .4s var(--molla); }
body.bt-theme:has(.tc-consent-banner.open) .tc-linguette { opacity: 0; pointer-events: none; }
body.bt-theme .tc-linguetta { flex-direction: row; align-items: center; gap: 0; width: auto; height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--fondo-2) 86%, transparent); color: var(--testo); box-shadow: inset 0 0 0 1px var(--filo), 0 10px 30px color-mix(in srgb, var(--nero) 40%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 500 14px/1 var(--ar-font); }
body.bt-theme .tc-linguetta svg { width: 20px; height: 20px; }
body.bt-theme .tc-linguetta-scritta { display: inline-block; max-width: 0; margin-left: 0; overflow: hidden; writing-mode: horizontal-tb; transform: none; font: inherit; letter-spacing: normal; text-transform: none; white-space: nowrap; transition: max-width .5s var(--molla), margin-left .5s var(--molla); }
@media (hover: hover) {
  body.bt-theme .tc-linguetta:hover { background: color-mix(in srgb, var(--fondo-2) 86%, transparent); color: var(--testo); }
  body.bt-theme .tc-linguetta:hover .tc-linguetta-scritta, body.bt-theme .tc-linguetta:focus-visible .tc-linguetta-scritta { max-width: 140px; margin-left: 10px; }
}
body.bt-theme .tc-linguetta:focus-visible { outline: 2px solid var(--luce); outline-offset: 3px; }
body.bt-theme .tc-linguetta.active::after { top: 6px; right: 6px; width: 9px; height: 9px; background: var(--luce); box-shadow: 0 0 0 2px var(--fondo-2); }

/* le finestre (accesso, conferme, preferenze dei cookie, accessibilità, «Richiedi informazioni»): le carte della bozza */
body.bt-theme .modal-overlay { background: color-mix(in srgb, var(--nero) 62%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.bt-theme .modal { padding: clamp(24px, 4vw, 40px); border: 0; border-radius: 30px; background: var(--fondo-2); color: var(--testo); box-shadow: inset 0 0 0 1px var(--filo), 0 40px 100px color-mix(in srgb, var(--nero) 55%, transparent); font-family: var(--ar-font); }
body.bt-theme .modal-title { padding-right: 52px; font-family: var(--ar-font); font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; text-transform: none; color: var(--testo); }
body.bt-theme .modal-close { top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--vetro); color: var(--testo); opacity: 1; box-shadow: inset 0 0 0 1px var(--filo); }
@media (hover: hover) { body.bt-theme .modal-close:hover { background: color-mix(in srgb, var(--bianco) 12%, transparent); color: var(--testo); } }
body.bt-theme .tc-consent-modal-desc, body.bt-theme .tc-a11y-feature-text span, body.bt-theme .tc-consent-service-purpose, body.bt-theme .tc-consent-service-meta { color: var(--testo-2); }
body.bt-theme .tc-consent-cat-list, body.bt-theme .tc-a11y-feature-list { border: 0; border-radius: 0; display: grid; gap: 10px; overflow: visible; }
body.bt-theme .tc-consent-cat-row { background: none; }
body.bt-theme .tc-consent-cat-list > .tc-consent-cat-row:not(:first-child) { border-top: 0; }
body.bt-theme .tc-consent-cat-list > * { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--filo); }
body.bt-theme .tc-a11y-feature-row { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--filo); }
body.bt-theme .tc-a11y-feature-row:not(:last-child) { border-bottom: 0; }
body.bt-theme .tc-a11y-feature-icon { border-radius: 50%; background: var(--vetro); color: var(--luce); }
body.bt-theme .tc-a11y-statement-link a { color: var(--testo); text-decoration: underline; text-underline-offset: 3px; }
body.bt-theme .tc-consent-cat-locked { color: var(--luce); }
body.bt-theme .tc-consent-cat-chevron { color: var(--testo-2); background: none; }
body.bt-theme .tc-consent-modal-actions .tc-consent-btn { min-height: 48px; }
body.bt-theme .tc-consent-btn-save { background: var(--bianco); color: var(--nero); }
/* gli interruttori, come quelli della bozza: spento vetro, acceso blu */
body.bt-theme .tc-consent-switch { width: 50px; height: 30px; }
body.bt-theme .tc-consent-switch input { opacity: 0; }
body.bt-theme .tc-consent-switch-slider { border-radius: 999px; background: color-mix(in srgb, var(--bianco) 14%, transparent); box-shadow: inset 0 0 0 1px var(--filo); transition: background-color .35s var(--molla); }
body.bt-theme .tc-consent-switch-slider::before { top: 4px; left: 4px; width: 22px; height: 22px; background: var(--bianco); border-radius: 50%; box-shadow: 0 2px 6px color-mix(in srgb, var(--nero) 35%, transparent); transition: transform .45s var(--molla); }
body.bt-theme .tc-consent-switch input:checked + .tc-consent-switch-slider { background: var(--blu); box-shadow: none; }
body.bt-theme .tc-consent-switch input:checked + .tc-consent-switch-slider::before { transform: translateX(20px); }
body.bt-theme .tc-consent-switch input:focus-visible + .tc-consent-switch-slider { outline: 2px solid var(--luce); outline-offset: 3px; }

/* ============================================================
   AL TELEFONO
   ============================================================ */
/* il tablet in orizzontale (861-1180): a quattro colonne i riquadri stretti spezzavano i titoli («E- / Commerce /
   Startup», 28/10/26); qui due colonne: la consulenza larga, formazione alta accanto a numero e libro, storie larghe */
@media (min-width: 861px) and (max-width: 1180px) {
  .a-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); }
  .c-consulenza { grid-column: 1 / -1; grid-row: auto; }
  .c-consulenza .a-cella-in { min-height: 440px; }
  .c-formazione { grid-column: 1; grid-row: span 2; }
  .c-anni, .c-libro { grid-column: 2; grid-row: auto; }
  .c-storie { grid-column: 1 / -1; grid-row: auto; }
  .c-radio { grid-column: 1; grid-row: auto; }
  .c-hub { grid-column: 2; grid-row: auto; }
}
/* ⚠️ IL ☰ C'È APPENA LE VOCI NON STANNO PIÙ NELL'ISOLA (1080). Nella bozza arrivava a 860: fra 861 e 1080 (il tablet in
   orizzontale) le voci erano nascoste e il menu non si apriva da nessuna parte (trovato il 28/10/26). */
@media (max-width: 1080px) {
  body.bt-theme .a-isola .a-comandi { margin-left: auto; }
  body.bt-theme .a-hamburger { display: block; }
  /* il menu a tutto schermo: #headerNav, sotto l'isola (che resta sopra col suo ×) */
  body.bt-theme .a-isola .header-nav { position: fixed; inset: 0; z-index: 1; margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 96px var(--mr) 120px var(--ml); background: color-mix(in srgb, var(--fondo) 92%, transparent); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); opacity: 0; visibility: hidden; transition: opacity .45s var(--molla), visibility 0s .45s; overflow-y: auto; }
  body.bt-theme .a-isola .header-nav.header-nav-open { opacity: 1; visibility: visible; transition: opacity .45s var(--molla), visibility 0s; }
  body.bt-theme .a-isola .header-nav .header-nav-link { display: block; padding: 2px 0; border-radius: 0; background: none; color: var(--testo); font-size: clamp(36px, 10vw, 56px); font-weight: 600; letter-spacing: -.04em; line-height: 1.15; }
  body.bt-theme .a-isola .header-nav .header-nav-link[aria-current="page"] { color: var(--luce); background: none; }
  /* Bento dà a ogni link del menu del telefono un filo sotto e a ogni «a» del menu fondo e margini a zero: qui niente filo,
     e i due pulsanti in fondo al menu tornano pulsanti */
  body.bt-theme .a-isola .header-nav .header-nav-link { border: 0; }
  body.bt-theme .a-isola .a-menu-telefono .a-bt { padding: 6px 6px 6px 22px; font-size: 15.5px; font-weight: 600; }
  body.bt-theme .a-isola .a-menu-telefono .a-bt-solo { padding: 6px 24px; }
  body.bt-theme .a-isola .a-menu-telefono .a-bt-pieno { background: var(--bianco); color: var(--nero); }
  body.bt-theme .a-isola .a-menu-telefono .a-bt-vuoto { background: var(--vetro); color: var(--testo); box-shadow: inset 0 0 0 1px var(--filo); }
  body.bt-theme .a-menu-telefono { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 28px; }
}
@media (max-width: 1080px) { .a-competenze { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .a-modo h3 { font-size: 22px; } }
@media (max-width: 860px) {
  .a-tappa { grid-template-columns: 1fr; gap: 6px; }
  .a-tappa-anno { font-size: 40px; }
  .a-competenze, .a-due, .a-casi, .a-voci-tre, .a-modi, .a-dichiarazione-due, .a-contatta-in, .a-motivi { grid-template-columns: 1fr; }
  .a-competenze .a-cella-in { min-height: 0; }
  .a-modi-indice { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .a-modi-indice a { font-size: 15px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--bianco) 6%, transparent); color: var(--testo-2); min-height: 40px; display: inline-flex; align-items: center; }
  .a-modi-indice a.attivo { transform: none; background: var(--bianco); color: var(--nero); }
  .a-modo .a-cella-in { min-height: 0; }
  .a-galleria { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .a-galleria-foto { scroll-snap-align: center; width: 78vw; }
  .a-galleria-foto.alta { width: 60vw; }
  .a-cornice-foto { max-width: 340px; margin-top: 18px; }
  .a-pren-scheda { margin-top: 18px; }
  .a-modulo-cella #modReqCampi > * { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  body.bt-theme .a-isola { padding-left: 14px; }
  body.bt-theme .a-isola .a-testata-pulsante { display: none; }
  .a-apertura { padding-top: 104px; }
  .a-apertura-in { grid-template-columns: 1fr; gap: 8px; }
  .a-ritratto { max-width: 400px; margin-top: 12px; }
  .a-loghi { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
  .a-loghi > p { max-width: none; }
  .a-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .c-consulenza, .c-formazione, .c-anni, .c-libro, .c-storie, .c-radio, .c-hub { grid-column: auto; grid-row: auto; }
  .c-consulenza .a-cella-in { min-height: 460px; padding: 26px; }
  .c-formazione .a-cella-in { min-height: 480px; }
  .c-anni .a-cella-in, .c-radio .a-cella-in, .c-libro .a-cella-in { min-height: 260px; }
  .c-hub .a-cella-in { min-height: 340px; }
  .c-storie .a-cella-in { flex-direction: column; align-items: flex-start; }
  .a-loghi-clienti img { width: 84px; height: 84px; }
  .a-muro { grid-template-columns: 1fr; height: 640px; }
  .a-muro .a-colonna { display: none; }
  .a-muro .a-colonna-tel { display: block; }
  .a-piede-in { grid-template-columns: 1fr 1fr; }
  .a-piede-marchio { grid-column: 1 / -1; }
  .a-modulo-griglia { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* al telefono «Personalizza» non ci sta in un terzo (93 px): va su una riga intera, «Rifiuta» e «Accetta» uguali sotto */
  body.bt-theme .tc-consent-actions { grid-template-columns: 1fr 1fr; }
  body.bt-theme .tc-consent-btn-customize { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  body.bt-theme *, body.bt-theme *::before, body.bt-theme *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* i bollini dei metodi di pagamento: il fondo bianco dei marchi (Bento li fa --white, che qui è il fondo scuro dei riquadri:
   il nero di Apple Pay ci spariva) */
body.bt-theme .pay-badge { background: var(--ar-bianco); }
.a-video-titolo small { display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-parola-luce { display: inline; }

/* le copertine e il libro non si deformano mai (le misure scritte nella pagina sono di partenza: il file può essere un altro) */
.a-libro3d img, .a-ebook-coppia img, .a-ebook-copertina img, img.a-libro { height: auto; object-fit: contain; }
/* al telefono stretto i titoli grandi un filo più piccoli: «Ebook eCommerce Startup» andava su tre righe da otto lettere */
@media (max-width: 420px) {
  .a-h1 { font-size: 40px; }
  .a-h1-pagina { font-size: 38px; }
  .a-contatto-medio h2 { font-size: 30px; }
  .a-modo .a-cella-in { padding: 20px; }
  .a-modo h3 { font-size: 19px; }
  /* un pulsante con la scritta lunga («Sì, voglio lasciarti il mio feedback positivo»): più compatto, su una riga */
  .a-bt.a-bt-lungo { font-size: 13px; padding: 6px 18px; white-space: nowrap; }
  .a-bt.a-bt-lungo .a-bt-ico { display: none; }
}
/* con «riduci il movimento» il muro delle testimonianze e delle recensioni non scorre: allora è un elenco intero, senza
   altezza fissa né maschera, e senza le copie che servivano solo a far girare lo scorrimento */
@media (prefers-reduced-motion: reduce) {
  .a-muro { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .a-scorre > [aria-hidden="true"] { display: none; }
}

/* I titoli lunghi in due righe (le regole di Marco: un titolo al massimo su due righe). Ogni titolo porta quante lettere
   ha (--car, lo scrive partials/corpo.php) e la grandezza scende quanto serve per il posto che ha (cqi: la larghezza del
   suo riquadro, non dello schermo). Due righe tengono circa 3,7 volte quella larghezza divisa per le lettere (nel Geist
   stretto una lettera è larga 0,43 della grandezza, e un po' di posto si perde a fine riga). I titoli corti restano della
   grandezza di sempre (l'ultimo valore), i lunghissimi non scendono sotto il primo. Anche il titolo della prima pagina
   sta in due righe: in tre, da quattordici lettere l'una, era una colonna stretta. */
.a-intesta, .a-contatta-testo, .a-condividi-in, .a-ebook-fascia-testo, .a-grazie-griglia .a-cella-in, .a-trovi .a-cella-in,
.a-home .a-apertura-in > div:first-child { container-type: inline-size; }
.a-intesta h2 { font-size: clamp(24px, calc(370cqi / var(--car, 1)), clamp(40px, 5.4vw, 84px)); }
.a-contatta-testo h2 { font-size: clamp(22px, calc(370cqi / var(--car, 1)), clamp(38px, 4.4vw, 68px)); }
.a-condividi h2 { font-size: clamp(22px, calc(360cqi / var(--car, 1)), clamp(30px, 3.6vw, 56px)); }
.a-ebook-fascia h2, .a-grazie-griglia h2 { max-width: none; font-size: clamp(20px, calc(360cqi / var(--car, 1)), clamp(26px, 2.6vw, 40px)); }
.a-trovi h3 { font-size: clamp(18px, calc(360cqi / var(--car, 1)), clamp(20px, 1.6vw, 25px)); }
.a-home .a-apertura .a-h1 { font-size: clamp(30px, calc(390cqi / var(--car, 1)), clamp(44px, 6vw, 96px)); }
@media (max-width: 420px) {
  .a-home .a-apertura .a-h1 { font-size: clamp(30px, calc(390cqi / var(--car, 1)), 40px); }
}

/* =====================================================================
   LE SEZIONI DI BASE (voce 484, le sezioni): i blocchi del core (pb-*) dentro una pagina di Ardea
   Apertura, Testo, Testo e foto, Galleria, Colonne, Invito e Modulo stanno in una fascia .a-base (partials/pagina-fila.php),
   larga e alta come le sezioni del tema, coi caratteri e i colori di Ardea (dalla bozza delle sezioni, sito/ponte.css).
   ===================================================================== */
.a-base { color: var(--testo-2); }
.a-base .pb-block-title, .a-base .pb-hero-title, .a-base .pb-cta-title { font-family: var(--ar-font); font-weight: 600; letter-spacing: -.05em; line-height: 1;
  text-transform: none; color: var(--testo); font-size: clamp(40px, 5.4vw, 84px); margin: 0 0 clamp(28px, 4vw, 48px); max-width: var(--ar-max); text-wrap: balance; }
.a-base .pb-text-block, .a-base .pb-text-image-body, .a-base .pb-widget-text { color: var(--testo-2); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; max-width: none; padding: 0; }
.a-base .pb-text-block p, .a-base .pb-text-image-body p, .a-base .pb-widget-text p { margin: 0 0 14px; }
.a-base :is(.pb-text-block, .pb-text-image-body, .pb-widget-text) a { color: var(--testo); text-decoration: underline; text-decoration-color: var(--luce); text-underline-offset: 4px; }
.a-base .pb-hero { border-radius: 28px; padding: clamp(60px, 9vw, 140px) clamp(24px, 5vw, 80px); text-align: left; background-size: cover; background-position: center; background-color: var(--cella); }
.a-base .pb-hero-inner { max-width: 760px; margin: 0; }
.a-base .pb-hero-subtitle { color: var(--testo-2); font-size: clamp(17px, 1.3vw, 19px); margin: 0 0 28px; max-width: 54ch; }
.a-base .btn-primary { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--bianco); color: var(--nero);
  font-family: var(--ar-font); font-weight: 600; font-size: 16px; text-decoration: none; border: 0; }
.a-base .pb-text-image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: 0; max-width: none; }
.a-base .pb-text-image--right .pb-text-image-media { order: 2; }
.a-base .pb-text-image-media img { width: 100%; border-radius: 24px; display: block; aspect-ratio: 4 / 5; object-fit: cover; max-height: 560px; }
.a-base .pb-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; max-width: none; }
.a-base .pb-gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; display: block; }
/* le colonne restano quelle del core (12 parti, ognuna prende le sue): qui solo il passo e il riquadro */
.a-base .pb-custom-section { gap: 16px; margin: 0; padding: 0; max-width: none; }
.a-base .pb-col { background: var(--cella); border: 1px solid var(--filo); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.a-base .pb-widget-title { font-family: var(--ar-font); color: var(--testo); font-size: 24px; font-weight: 600; letter-spacing: -.03em; margin: 0; text-transform: none; }
.a-base .pb-widget-icon { color: var(--luce); }
.a-base .pb-widget-icon svg { width: 36px; height: 36px; display: block; }
.a-base .pb-cta { text-align: center; padding: clamp(40px, 6vw, 90px) 0; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; }
.a-base .pb-cta .pb-cta-title { margin-bottom: 28px; }
@media (max-width: 760px) { .a-base .pb-text-image, .a-base .pb-gallery { grid-template-columns: minmax(0, 1fr); } .a-base .pb-text-image--right .pb-text-image-media { order: 0; } }
/* nell'editor le caselle vuote delle sezioni di base («qui va la foto») col fondo dei riquadri, non il chiaro del core */
.a-base :is(.pb-text-image-media, .pb-ti-col-media, .pb-widget-image, .pb-widget-video).pb-empty-placeholder,
.a-base .pb-gallery--empty .pb-empty-placeholder { background: var(--cella); border-color: var(--filo); color: var(--testo-2); border-radius: 24px; }
.a-base :is(.pb-text-image-media, .pb-ti-col-media, .pb-widget-image, .pb-widget-video).pb-empty-placeholder:hover,
.a-base .pb-gallery--empty .pb-empty-placeholder:hover { background: var(--fondo-2); border-color: var(--luce); }