/*
 Theme Name: AS Child
 Theme URI: https://andreasaffirio.it
 Description: Child theme Divi per Andrea Saffirio. Base FRG Child, ribrandizzata.
 Author: Francesco Rotondo
 Author URI: https://francescorotondographics.it
 Template: Divi
 Version: 1.0.0
*/


/* ==========================================================================
   AS BRAND · Stili Globali
   Andrea Saffirio · pianista jazz e compositore

   INDICE
   ------

   VARIABILI
   --as-sand            #F3EEE6  fondo principale
   --as-sand-2          #E8E1D6  fondo alternato
   --as-ink             #17130F  testo e fondi scuri
   --as-muted           #6A625A  testo secondario
   --as-line            #CFC6B8  bordi e separatori
   --as-terra           #D9542B  accento caldo (display, fondi, icone)
   --as-terra-ink       #A63C18  accento leggibile (link e testo piccolo)
   --as-teal            #6FA39A  unico accento freddo, solo Sogni Acidi
   --as-sun             #F2C9A8  unico accento caldo leggibile sull'ink
   --as-ink-soft        #3E3831  fili dentro le sezioni scure
   --as-sand-soft       #BDB4A8  testo secondario sulle sezioni scure
   --as-sans            Inter Tight
   --as-serif           Instrument Serif (usato sempre in corsivo)
   --as-delay           ritardo reveal (default 500ms)
   --as-duration        durata reveal (default 900ms)
   --as-gut             gutter fluido di sezione (lo usa anche il plugin AS Menu)
   --as-nav-h           altezza del menu fisso (AS Menu), la usa .as-sec-first

   TESTO
   .as-it               Corsivo Instrument Serif (accento editoriale)
   .as-label            Etichetta maiuscoletto spaziato (come h6)
   .as-lead             Paragrafo introduttivo grande
   .as-muted            Testo secondario

   HIGHLIGHT (effetto tendina al reveal)
   .as-hl-terra         Evidenziatore terracotta, testo sabbia
   .as-hl-sun           Evidenziatore sun, testo ink
   .as-hl-teal          Evidenziatore teal chiaro, testo ink
   .as-hl-terra-link    Come sopra su <a>, hover inverte
   .as-hl-sun-link
   .as-hl-teal-link

   UNDERLINE
   .as-underline        Sottolineatura che cresce al reveal
   .as-link             Link con underline statico, hover terracotta

   PULSANTI (modulo pulsante Divi)
   .as-btn-solid        Pieno ink, hover terracotta
   .as-btn-outline      Bordo ink, hover pieno ink
   .as-btn-terra        Pieno terracotta, hover ink
   .as-btn-text         Testo con freccia diagonale, underline hover
   .as-btn-text-fwd     Testo con chevron avanti
   .as-btn-text-back    Testo con chevron indietro
   .as-btn-social       Pieno con icona a sinistra
   .as-btn-group        Contenitore per pulsanti affiancati

   MODIFICATORI PULSANTI
   .on-dark             Da aggiungere su sezioni a fondo scuro (ink, terra, teal)
   .as-btn-arrow        Freccia diagonale dentro le pillole (solid, outline, terra)

   SEZIONI
   .as-sec-sand         Fondo sabbia (default)
   .as-sec-sand-2       Fondo sabbia alternato
   .as-sec-dark         Fondo ink, testo sabbia
   .as-sec-terra        Fondo terracotta, testo ink
   .as-sec-teal         Fondo teal, testo ink
   .as-band             Fascia bassa a tutta larghezza (tipo prossimo concerto)

   SPAZIATURA (vedi 22.1) · la classe dà la base, il builder vince
   .as-sec-first        Prima sezione di OGNI pagina: stacco dal menu fisso
                        (questa il builder non la batte)
   .as-sec-pad          Sezione: 72 / 144 sopra e sotto (390 / 1440px)
   .as-sec-pad-sm       Sezione: 40 / 86 sopra e sotto
   .as-sec-pad-top      Sezione: 24 / 56 sopra, 0 sotto
   .as-sec-pad-none     Sezione: 0
   .as-sec-t0 / -b0     Toglie il padding sopra / sotto alla sezione
   .as-row-flush        Riga: 0 sopra e sotto (Divi ne mette circa 30)
   .as-row-t0 / -b0     Riga: 0 sopra / 0 sotto
   .as-row-gap          Riga: 32 / 64 sopra (stacco tra blocchi)
   .as-row-gap-lg       Riga: 48 / 96 sopra
   .as-row-tight        Colonne senza margine sotto (griglie)

   LAYOUT
   .sezione-fp          Sezione full-page centrata (plugin FRG Scroll Page)
   .as-wrap             Riga alla larghezza del sito (gutter + max 1600px)
   .as-row-full         Riga 100vh centrata
   .as-hero             Hero con overflow visibile per pin GSAP
   .as-rule             Testata con riga sotto (titolo + link a destra)

   EFFETTI
   .as-glass            Frosted glass chiaro
   .as-glass-col        Come sopra, su colonna Divi, con raggio
   .as-img-hover        Immagine che sale e ruota leggermente in hover
   .as-grayscale        Immagine in bianco e nero, a colori in hover

   ANIMAZIONI IN LOOP (CSS, nessun JS)
   .as-pulse            Pulsazione opacità, 2.4s
   .as-float            Galleggia su e giù, 9s
   .as-float-slow       Come sopra, 12s
   .as-float-fast       Come sopra, 7s
   .as-breathe          Respiro in scala, 14s
   .as-spin-slow        Rotazione lenta, 40s

   ANIMAZIONI AL CARICAMENTO (CSS, sezione 29)
   .as-in               Entra salendo appena si apre la pagina (prima
                        sezione: niente lampeggio, non serve JS)
   .as-in-d1 ... -d4    Ritardo 100 / 200 / 350 / 500ms
   .as-in-fade          Variante solo dissolvenza (foto grandi)

   ANIMAZIONI AL SCROLL (GSAP, vedi assets/as-scroll-animations.js)
   frg-*                Prefisso mantenuto: lo usa il plugin FRG Scroll Page
                        Legenda completa nel blocco qui sotto.

   MENU
   Lo gestisce il plugin AS Menu (wp-menu-as): larghezza, hamburger,
   overlay e z-index stanno lì. Qui resta solo .as-menu-pill.

   PAGINE
   .as-bio-*            Pagina Bio (sezione 24)
   .as-did-*            Pagina Didattica (sezione 26)
   .as-vp-*             Pagina Video (sezione 27)
   .as-ct-*             Pagina Contatti (sezione 28)

   FORM (sezione 14, Contact Form 7)
   .as-cf7-grid         Griglia campi a 2 colonne (nel template del form)
   .as-cf7-full         Campo a tutta riga
   .as-cf7-lab          Etichetta del campo
   .as-cf7-send         Riga finale captcha + invia
   .as-cf7-pill         Sul modulo: campi a pillola invece che a righe

   FOOTER (sezione 25)
   .as-foot             Sezione nera Restiamo in contatto
   .as-foot-social      Elenco social con icona e freccia
   .as-foot-small       Testo piccolo sabbia (copyright e credits)
   .as-foot-credits     Credits a destra con logo
   ========================================================================== */


/* ==========================================================================
   AS SCROLL PAGE · CLASSI DIVI (plugin FRG Scroll Page)
   ==========================================================================

   SECTION (classi CSS della section Divi)
   -------------------------------------------------------
   sezione-fp              obbligatoria su ogni section,
                           attiva il full-page scroll

   hs-section              slide orizzontali (default 30vw),
                           con dots e skip button.
                           su mobile sempre 90vw.
                           usare da sola per le card

   hs-section--half        slide 50/50 su desktop
                           (2 slide = layout statico,
                           3+ = scroll orizzontale).
                           sempre 100vw su mobile.
                           no dots, no skip

   hs-section--full        slide 100vw su tutti i device,
                           scroll orizzontale sempre attivo.
                           no dots, no skip

   ROW (classi CSS della row Divi dentro una hs-section)
   -------------------------------------------------------
   hs-slide                obbligatoria su ogni row che
                           deve essere una slide.
                           l'ordine nel DOM è l'ordine
                           di scorrimento

   ESEMPI
   -------------------------------------------------------
   Card 33%  → sezione-fp  hs-section
   50/50     → sezione-fp  hs-section  hs-section--half
   100% full → sezione-fp  hs-section  hs-section--full
     Row     → hs-slide
   ========================================================================== */


/* ==========================================================================
   AS SCROLL ANIMATIONS · LEGENDA CLASSI (v2.0.0)
   Gestite da GSAP via assets/as-scroll-animations.js.
   Nessun CSS necessario, questa è solo una legenda.
   ==========================================================================

   ENTRATA BASE (una sola per elemento)

   .frg-fade-in         Dissolvenza (1.2s)
   .frg-slide-up        Sale dal basso (0.6s)
   .frg-slide-down      Scende dall'alto (0.6s)
   .frg-slide-left      Entra da destra (0.6s)
   .frg-slide-right     Entra da sinistra (0.6s)
   .frg-zoom-in         Zoom da piccolo a normale (0.6s)
   .frg-zoom-out        Zoom da grande a normale (0.6s)
   .frg-blur-in         Entra a fuoco da sfocato (0.9s)      NUOVA
   .frg-tilt-in         Entra ruotando di 3 gradi (0.7s)     NUOVA
   .frg-rise            Sale di 24px, spostamento minimo     NUOVA

   REVEAL A TENDINA (una sola per elemento)

   .frg-reveal-left     Si svela da sinistra a destra (0.8s)
   .frg-reveal-right    Si svela da destra a sinistra (0.8s)
   .frg-reveal-up       Si svela dal basso verso l'alto      NUOVA
   .frg-reveal-down     Si svela dall'alto verso il basso    NUOVA

   CONTENITORE

   .frg-stagger         Anima i figli diretti a cascata      NUOVA
                        (150ms l'uno dall'altro, slide-up).
                        Da mettere sulla row o sulla colonna,
                        non serve altra classe sui figli.

   RITARDO (combinabile, uno per elemento)

   .frg-delay-100 / -200 / -300 / -400 / -500

   DURATA (opzionale)

   .frg-fast            0.3s
   .frg-slow            1s

   ESEMPI

   Titolo:      frg-slide-up
   Sottotitolo: frg-slide-up frg-delay-200
   Paragrafo:   frg-fade-in frg-delay-400
   Immagine:    frg-reveal-left frg-delay-300
   Copertine:   frg-stagger (sulla row)
   Ritratto:    frg-blur-in frg-slow

   DOVE SI APPLICA

   Divi Builder → Modulo → Avanzate → CSS ID e Classi → CSS Class

   NOTE

   • Togliere le animazioni native Divi (tab Animazione) dai moduli
     dentro le sezioni gestite dal plugin scroll.
   • Fuori dalle sezioni "sezione-fp" ci pensa as-scroll-animations.js.
   • I reveal usano clip-path, non opacity: l'elemento è visibile
     e viene solo scoperto progressivamente.
   ========================================================================== */


/* ==========================================================================
   FONT
   ========================================================================== */

@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/InterTight-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/InstrumentSerif-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('fonts/InstrumentSerif-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* ==========================================================================
   VARIABILI GLOBALI
   ========================================================================== */

:root {
  /* 11 voci in tutto: nove colori che scegli, due di servizio che
     servono solo sui fondi scuri. Prima di aggiungerne una nuova,
     chiediti quale di queste non stava facendo il suo mestiere. */
  --as-sand:       #F3EEE6;   /* fondo principale */
  --as-sand-2:     #E8E1D6;   /* fondo alternato, card, segnaposto */
  --as-ink:        #17130F;   /* testo e fondi scuri */
  --as-muted:      #6A625A;   /* testo secondario */
  --as-line:       #CFC6B8;   /* fili e bordi */
  --as-terra:      #D9542B;   /* accento: display grandi, fondi, icone */
  --as-terra-ink:  #A63C18;   /* stesso accento, leggibile nei testi */
  --as-teal:       #6FA39A;   /* unico accento freddo, solo Sogni Acidi */
  --as-sun:        #F2C9A8;   /* unico accento caldo che regge sull'ink */

  --as-ink-soft:   #3E3831;   /* fili dentro le sezioni scure */
  --as-sand-soft:  #BDB4A8;   /* testo secondario sulle sezioni scure */

  --as-sans:  'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --as-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;

  --as-delay:    500ms;
  --as-duration: 900ms;

  /* Margine laterale di sezioni e menu. Lo leggono .as-wrap e il
     plugin AS Menu: se lo cambi, si spostano insieme. */
  --as-gut:      clamp(16px, 4.4vw, 64px);

  /* Altezza del menu fisso (plugin AS Menu). La pagina parte sotto
     il menu: .as-sec-first e l'indice della bio la aggiungono al
     loro spazio. Se il menu cambia altezza, cambia solo questa. */
  --as-nav-h:    69px;

  /* Colore del testo prima del reveal, su sezioni scure:
     style="--as-text-fallback: #F3EEE6" */
  --as-text-fallback: #17130F;
}

/* Anti-flash allo scroll page */
html { background: #F3EEE6; }

/* Scrollbar nascosta */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar { display: none; }


/* ==========================================================================
   TIPOGRAFIA GLOBALE
   ========================================================================== */

body {
  font-family: var(--as-sans);
  background-color: var(--as-sand);
  color: var(--as-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body h1, body h2, body h3, body h4, body h5,
body .et_pb_module h1,
body .et_pb_module h2,
body .et_pb_module h3,
body .et_pb_module h4,
body .et_pb_module h5,
body .et_pb_section h1,
body .et_pb_section h2,
body .et_pb_section h3,
body .et_pb_section h4,
body .et_pb_section h5 {
  font-family: var(--as-sans) !important;
  font-weight: 300 !important;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--as-ink);
  text-wrap: balance;
}

h1, .et_pb_module h1 {
  font-size: clamp(48px, 6.2vw + 8px, 140px);
  line-height: 0.88;
  letter-spacing: -0.055em;
}

h2, .et_pb_module h2 {
  font-size: clamp(38px, 4.4vw + 10px, 96px);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

h3, .et_pb_module h3 {
  font-size: clamp(26px, 1.8vw + 18px, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

h4, .et_pb_module h4 {
  font-size: clamp(20px, 0.8vw + 17px, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400 !important;
}

h5, .et_pb_module h5 {
  font-size: clamp(17px, 0.5vw + 15px, 22px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 500 !important;
}

h6,
.et_pb_module h6,
.as-label,
.as-label p {
  font-family: var(--as-sans) !important;
  font-size: clamp(11px, 0.19vw + 10.3px, 13px) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--as-muted) !important;
}

/* La regola di tutto il sito: i titoli sono ink, il testo corrente
   è muted. Su sabbia il rapporto di contrasto è 5.2, quindi passa
   anche per il testo piccolo. Quello che deve restare ink lo dichiara
   la sua classe, non il contrario. */
p,
.et_pb_module p,
.et_pb_text p,
.et_pb_blurb p,
.et_pb_cta p,
body:not(.et-fb) ul,
body:not(.et-fb) ul li {
  font-family: var(--as-sans);
  font-size: clamp(16px, 0.35vw + 14.7px, 19px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--as-muted);
}

/* Sui fondi colorati il muted sparisce: lì il testo torna ink. */
.as-sec-terra p,
.as-sec-terra li,
.as-sec-teal p,
.as-sec-teal li { color: var(--as-ink) !important; }

/* Corsivo editoriale · l'accento del brand */
.as-it,
.as-it p,
.as-it h1, .as-it h2, .as-it h3, .as-it h4, .as-it h5,
span.as-it,
em.as-it {
  font-family: var(--as-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
}

/* Il serif ha un'altezza ottica diversa: riallinea nei titoli grandi */
h1 .as-it, h2 .as-it,
.et_pb_module h1 .as-it,
.et_pb_module h2 .as-it {
  letter-spacing: -0.02em !important;
  color: var(--as-terra);
}

/* Occhiello grande: è tipografia display, quindi resta ink. */
.as-lead,
.as-lead p {
  font-size: clamp(22px, 1.6vw + 16px, 40px) !important;
  font-weight: 300 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.02em !important;
  color: var(--as-ink) !important;
  text-wrap: balance;
}

.as-muted,
.as-muted p,
.as-muted li {
  color: var(--as-muted) !important;
}

.as-small p,
.as-small li {
  font-size: clamp(13px, 0.3vw + 12px, 15px);
  line-height: 1.5;
}

p.disclaimer {
  font-size: clamp(10px, 0.3vw + 9px, 12px) !important;
  font-weight: 400;
  line-height: 1.5;
  color: var(--as-muted);
}

/* Numeri tabellari per date, orari, durate */
.as-num,
.as-num p,
.as-date,
.as-date p {
  font-variant-numeric: tabular-nums;
}

.as-date,
.as-date p {
  font-size: clamp(40px, 3.4vw + 20px, 80px) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
  color: var(--as-terra) !important;
}


/* ==========================================================================
   SEZIONI A FONDO COLORATO
   Da mettere sulla section Divi. Ribaltano testo, bordi e pulsanti.
   ========================================================================== */

.as-sec-sand   { background-color: var(--as-sand)   !important; }
.as-sec-sand-2 { background-color: var(--as-sand-2) !important; }
.as-sec-terra  { background-color: var(--as-terra)  !important; }
.as-sec-teal   { background-color: var(--as-teal)   !important; }
.as-sec-dark   { background-color: var(--as-ink)    !important; }

/* Sezione scura: testo sabbia */
.as-sec-dark p,
.as-sec-dark li { color: var(--as-sand-soft) !important; }

.as-sec-dark,
.as-sec-dark h1, .as-sec-dark h2, .as-sec-dark h3,
.as-sec-dark h4, .as-sec-dark h5,
.as-sec-dark .et_pb_module h1,
.as-sec-dark .et_pb_module h2,
.as-sec-dark .et_pb_module h3,
.as-sec-dark .et_pb_module h4,
.as-sec-dark .et_pb_module h5 {
  color: var(--as-sand) !important;
}

.as-sec-dark .as-muted,
.as-sec-dark .as-muted p,
.as-sec-dark h6,
.as-sec-dark .as-label,
.as-sec-dark .as-label p {
  color: var(--as-sand-soft) !important;
}

.as-sec-dark h1 .as-it,
.as-sec-dark h2 .as-it {
  color: var(--as-sun) !important;
}

.as-sec-dark { --as-text-fallback: #F3EEE6; }

/* Sezioni terra e teal: testo ink, etichette ink smorzato */
.as-sec-terra h6, .as-sec-terra .as-label, .as-sec-terra .as-label p,
.as-sec-teal  h6, .as-sec-teal  .as-label, .as-sec-teal  .as-label p {
  color: var(--as-ink) !important;
  opacity: 0.75;
}

.as-sec-terra h1 .as-it, .as-sec-terra h2 .as-it,
.as-sec-teal  h1 .as-it, .as-sec-teal  h2 .as-it {
  color: var(--as-ink) !important;
}

/* Fascia "prossimo concerto".
   Invece di rincorrere i margini che Divi mette qua e là, la sezione
   diventa un contenitore flex con un'altezza minima e centra il suo
   contenuto. Così la centratura è garantita dalla struttura: qualsiasi
   margine residuo dentro non può più sbilanciarla. */
.as-band.et_pb_section {
  display: flex !important;
  align-items: center !important;
  min-height: clamp(88px, 8vw, 116px) !important;
  padding: 0 !important;
}

.as-band .et_pb_row,
.as-band .et_pb_column,
.as-band .et_pb_module,
.as-band .et_pb_text,
.as-band .et_pb_text_inner,
.as-band .et_pb_text_inner > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.as-band .et_pb_row {
  margin-inline: auto !important;
  padding-block: 18px !important;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

/* Sezione full-page centrata verticalmente (plugin scroll) */
.sezione-fp {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Riga · altezza naturale, non forzata */
.et_pb_row { min-height: auto !important; }

/* Riga 100vh centrata */
.as-row-full {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 767px) {
  /* Colonne in colonna */
  .et_pb_row {
    flex-direction: column !important;
    justify-content: center !important;
  }
  .et_pb_row .et_pb_column {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Inverti l'ordine delle colonne su mobile */
  .reverse-mobile.et_pb_row {
    display: flex;
    flex-wrap: wrap;
  }
  .reverse-mobile .et_pb_column:first-child { order: 2; }
  .reverse-mobile .et_pb_column:last-child  { order: 1; }
}

/* Hero · overflow visibile per il pin GSAP */
.as-hero,
.as-hero.pin-spacer {
  overflow: visible !important;
}

/* Testata di sezione: titolo a sinistra, link a destra, filo sotto.
   Sta tutto dentro un solo modulo Testo: il flex va sul contenitore
   interno di Divi, così non dipende da come si comportano le colonne.
   Funziona con h1 (testata di pagina) e h2 (testata di sezione). */
.as-rule .et_pb_text_inner {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 16px 24px !important;
  flex-wrap: wrap !important;
  border-bottom: 1px solid var(--as-ink) !important;
  padding-bottom: 18px !important;
}

.as-rule .et_pb_text_inner > * { margin: 0 !important; }

.as-rule h1,
.as-rule h2 { flex: 1 1 auto; }

.as-rule h1 { padding: 0 !important; }

.as-rule .as-btn-text,
.as-rule .as-btn-text-fwd { flex: none; }

.as-sec-dark .as-rule .et_pb_text_inner {
  border-bottom-color: var(--as-sand-soft) !important;
}

/* Il link resta sempre in basso, allineato alla riga di base del
   titolo, a tutte le larghezze. "last baseline" usa l'ultima riga del
   titolo quando va a capo; i browser che non la capiscono si fermano
   a flex-end (in basso). Prima, sotto 640px, il link saliva in alto. */
.as-rule .et_pb_text_inner {
  align-items: flex-end !important;
  align-items: last baseline !important;
}

/* Separatore orizzontale leggero */
.as-hr {
  border-top: 1px solid var(--as-line) !important;
  padding-top: 20px !important;
}

.as-hr-strong {
  border-top: 1px solid var(--as-ink) !important;
  padding-top: 20px !important;
}


/* ==========================================================================
   EFFETTI
   ========================================================================== */

.as-glass {
  background: rgba(243, 238, 230, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.as-glass-col {
  background: rgba(243, 238, 230, 0.72) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-radius: 20px !important;
}

.as-glass-dark,
.as-glass-dark.as-glass-col {
  background: rgba(23, 19, 15, 0.28) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
}

/* Immagine che sale e ruota leggermente in hover (copertine, libri) */
.as-img-hover img {
  transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1) !important;
  will-change: transform;
}
.as-img-hover:hover img,
.as-img-hover a:hover img {
  transform: translateY(-6px) rotate(-1.2deg) !important;
}

/* Immagine in bianco e nero, a colori in hover (video, gallerie) */
.as-grayscale img {
  filter: grayscale(1) contrast(1.05) !important;
  opacity: 0.88 !important;
  transition: filter 500ms ease, opacity 500ms ease !important;
}
.as-grayscale:hover img,
.as-grayscale a:hover img {
  filter: grayscale(0) !important;
  opacity: 1 !important;
}

/* Ombra morbida per le copertine dei libri */
.as-shadow img {
  box-shadow: 0 16px 26px -16px rgba(23, 19, 15, 0.5) !important;
}


/* ==========================================================================
   1. HIGHLIGHT · effetto tendina al reveal
   Lo stato .as-revealed lo aggiunge il plugin scroll.
   .fr-revealed è tenuto come alias per retrocompatibilità.
   ========================================================================== */

.as-hl-terra,
.as-hl-sun,
.as-hl-teal,
.as-hl-terra-link,
.as-hl-sun-link,
.as-hl-teal-link {
  padding: 0 4px;
  margin: 0 -4px;
  background-repeat: no-repeat;
  background-size: 0% 68%;
  background-position: left 70%;
  transition: background-size var(--as-duration) ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.as-hl-terra,
.as-hl-terra-link {
  background-image: linear-gradient(var(--as-terra), var(--as-terra));
  color: var(--as-sand);
}

.as-hl-sun,
.as-hl-sun-link {
  background-image: linear-gradient(var(--as-sun), var(--as-sun));
  color: var(--as-ink);
}

.as-hl-teal,
.as-hl-teal-link {
  background-image: linear-gradient(var(--as-teal), var(--as-teal));
  color: var(--as-ink);
}

.as-hl-terra.as-revealed,      .as-hl-terra.fr-revealed,
.as-hl-sun.as-revealed,        .as-hl-sun.fr-revealed,
.as-hl-teal.as-revealed,       .as-hl-teal.fr-revealed,
.as-hl-terra-link.as-revealed, .as-hl-terra-link.fr-revealed,
.as-hl-sun-link.as-revealed,   .as-hl-sun-link.fr-revealed,
.as-hl-teal-link.as-revealed,  .as-hl-teal-link.fr-revealed {
  background-size: 100% 68%;
}

/* Versione link: hover scurisce l'evidenziatore */
.as-hl-terra-link,
.as-hl-sun-link,
.as-hl-teal-link {
  text-decoration: none;
  transition: background-size var(--as-duration) ease, filter 300ms ease;
}

.as-hl-terra-link:hover,
.as-hl-sun-link:hover,
.as-hl-teal-link:hover {
  filter: brightness(0.9);
}


/* ==========================================================================
   2. UNDERLINE E LINK DI TESTO
   ========================================================================== */

/* Sottolineatura che cresce al reveal (solo estetica) */
.as-underline {
  background-image: linear-gradient(var(--as-terra), var(--as-terra));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: left bottom;
  padding-bottom: 2px;
  transition: background-size var(--as-duration) ease;
}

.as-underline.as-revealed,
.as-underline.fr-revealed {
  background-size: 100% 2px;
}

/* Link inline con underline statico.
   I link solo testo sono neri anche dentro un paragrafo grigio:
   sono elementi attivi, non testo corrente. La ruggine arriva
   solo al passaggio del mouse. */
.as-link,
.as-link a,
a.as-link {
  color: var(--as-ink) !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor !important;
  padding-bottom: 1px !important;
  transition: color 300ms ease, border-color 300ms ease !important;
}

.as-link:hover,
.as-link a:hover,
a.as-link:hover {
  color: var(--as-terra-ink) !important;
  border-color: var(--as-terra-ink) !important;
}

.as-sec-dark .as-link:hover,
.as-sec-dark a.as-link:hover,
.as-link.on-dark:hover,
a.as-link.on-dark:hover {
  color: var(--as-sun) !important;
  border-color: var(--as-sun) !important;
}

/* Sui fondi terracotta e teal il link parte ink e schiarisce in hover.
   L'accento terracotta su terracotta non si vedrebbe. */
.as-sec-terra .as-link,
.as-sec-terra a.as-link,
.as-sec-teal .as-link,
.as-sec-teal a.as-link {
  color: var(--as-ink) !important;
  border-color: var(--as-ink) !important;
}

.as-sec-terra .as-link:hover,
.as-sec-terra a.as-link:hover,
.as-sec-teal .as-link:hover,
.as-sec-teal a.as-link:hover {
  color: var(--as-sand) !important;
  border-color: var(--as-sand) !important;
  opacity: 1 !important;
}

.as-sec-terra .as-btn-solid.et_pb_button:hover,
.as-sec-terra a.as-btn-solid:hover,
.as-sec-terra button.as-btn-solid:hover,
.as-sec-teal .as-btn-solid.et_pb_button:hover,
.as-sec-teal a.as-btn-solid:hover,
.as-sec-teal button.as-btn-solid:hover {
  background-color: var(--as-sand) !important;
  border-color: var(--as-sand) !important;
  color: var(--as-ink) !important;
}

.as-sec-terra .as-btn-text.et_pb_button,
.as-sec-terra a.as-btn-text,
.as-sec-teal .as-btn-text.et_pb_button,
.as-sec-teal a.as-btn-text {
  color: var(--as-ink) !important;
  opacity: 0.7 !important;
}
.as-sec-terra .as-btn-text:hover,
.as-sec-teal .as-btn-text:hover {
  opacity: 1 !important;
}


/* ==========================================================================
   3. BUTTON SOLID · pieno ink, hover terracotta
   ========================================================================== */

.as-btn-solid.et_pb_button,
a.as-btn-solid,
button.as-btn-solid {
  font-family: var(--as-sans) !important;
  font-size: clamp(14px, 0.2vw + 13.3px, 16px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
  color: var(--as-sand) !important;
  background-color: var(--as-ink) !important;
  background-image: none !important;
  border: 1px solid var(--as-ink) !important;
  border-radius: 999px !important;
  gap: 10px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease !important;
}

.as-btn-solid.et_pb_button:hover,
a.as-btn-solid:hover,
button.as-btn-solid:hover {
  background-color: var(--as-terra) !important;
  border-color: var(--as-terra) !important;
  color: var(--as-ink) !important;
}

/* Su fondo scuro si inverte: pieno sabbia, hover terracotta */
.as-btn-solid.on-dark.et_pb_button,
.as-sec-dark .as-btn-solid.et_pb_button,
a.as-btn-solid.on-dark {
  background-color: var(--as-sand) !important;
  border-color: var(--as-sand) !important;
  color: var(--as-ink) !important;
}

.as-btn-solid.on-dark.et_pb_button:hover,
.as-sec-dark .as-btn-solid.et_pb_button:hover,
a.as-btn-solid.on-dark:hover {
  background-color: var(--as-terra) !important;
  border-color: var(--as-terra) !important;
  color: var(--as-ink) !important;
}


/* ==========================================================================
   4. BUTTON OUTLINE · bordo ink, hover pieno
   ========================================================================== */

.as-btn-outline.et_pb_button,
a.as-btn-outline,
button.as-btn-outline {
  font-family: var(--as-sans) !important;
  font-size: clamp(14px, 0.2vw + 13.3px, 16px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
  color: var(--as-ink) !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--as-ink) !important;
  border-radius: 999px !important;
  gap: 10px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease !important;
}

.as-btn-outline.et_pb_button:hover,
a.as-btn-outline:hover,
button.as-btn-outline:hover {
  background-color: var(--as-ink) !important;
  color: var(--as-sand) !important;
}

.as-btn-outline.on-dark.et_pb_button,
.as-sec-dark .as-btn-outline.et_pb_button,
a.as-btn-outline.on-dark {
  color: var(--as-sand) !important;
  border-color: var(--as-sand) !important;
}

.as-btn-outline.on-dark.et_pb_button:hover,
.as-sec-dark .as-btn-outline.et_pb_button:hover,
a.as-btn-outline.on-dark:hover {
  background-color: var(--as-sand) !important;
  color: var(--as-ink) !important;
}


/* ==========================================================================
   5. BUTTON TERRA · pieno terracotta, per la call to action principale
   ========================================================================== */

.as-btn-terra.et_pb_button,
a.as-btn-terra,
button.as-btn-terra {
  font-family: var(--as-sans) !important;
  font-size: clamp(14px, 0.2vw + 13.3px, 16px) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
  color: var(--as-ink) !important;
  background-color: var(--as-terra) !important;
  background-image: none !important;
  border: 1px solid var(--as-terra) !important;
  border-radius: 999px !important;
  gap: 10px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease !important;
}

.as-btn-terra.et_pb_button:hover,
a.as-btn-terra:hover,
button.as-btn-terra:hover {
  background-color: var(--as-ink) !important;
  border-color: var(--as-ink) !important;
  color: var(--as-sand) !important;
}


/* Misure comuni alle tre pillole (solid, outline, terra).
   L'altezza la decide min-height, non il padding verticale: così
   aggiungere un'icona dentro non cambia la dimensione del pulsante. */
.as-btn-solid.et_pb_button,
.as-btn-outline.et_pb_button,
.as-btn-terra.et_pb_button,
a.as-btn-solid, a.as-btn-outline, a.as-btn-terra,
button.as-btn-solid, button.as-btn-outline, button.as-btn-terra {
  min-height: 50px !important;
  padding: 0 26px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 480px) {
  .as-btn-solid.et_pb_button,
  .as-btn-outline.et_pb_button,
  .as-btn-terra.et_pb_button,
  a.as-btn-solid, a.as-btn-outline, a.as-btn-terra,
  button.as-btn-solid, button.as-btn-outline, button.as-btn-terra {
    min-height: 46px !important;
    padding: 0 20px !important;
  }
}

/* Via le frecce native di Divi dalle tre pillole */
.as-btn-solid.et_pb_button::before,
.as-btn-solid.et_pb_button::after,
.as-btn-outline.et_pb_button::before,
.as-btn-outline.et_pb_button::after,
.as-btn-terra.et_pb_button::before,
.as-btn-terra.et_pb_button::after {
  display: none !important;
  content: none !important;
}


/* Freccia diagonale dentro le pillole: aggiungere .as-btn-arrow
   a .as-btn-solid, .as-btn-outline o .as-btn-terra.
   La freccia è una maschera colorata con currentColor, quindi segue
   il colore del testo anche in hover e su fondo scuro. */
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  .as-btn-solid.as-btn-arrow.et_pb_button::after,
  .as-btn-outline.as-btn-arrow.et_pb_button::after,
  .as-btn-terra.as-btn-arrow.et_pb_button::after,
  a.as-btn-arrow.as-btn-solid::after,
  a.as-btn-arrow.as-btn-outline::after,
  a.as-btn-arrow.as-btn-terra::after {
    content: '' !important;
    display: inline-block !important;
    position: static !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") center / contain no-repeat !important;
    transform: none !important;
    transition: transform 300ms ease !important;
  }

  .as-btn-arrow.et_pb_button:hover::after,
  a.as-btn-arrow:hover::after {
    transform: translate(2px, -2px) !important;
  }
}


/* ==========================================================================
   6. BUTTON TEXT · base condivisa
   ========================================================================== */

.as-btn-text.et_pb_button,
.as-btn-text-fwd.et_pb_button,
.as-btn-text-back.et_pb_button,
a.as-btn-text,
a.as-btn-text-fwd,
a.as-btn-text-back {
  font-family: var(--as-sans) !important;
  font-size: clamp(13px, 0.19vw + 12.3px, 15px) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--as-muted) !important;
  text-decoration: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  padding-right: 1.8em !important;
  position: relative !important;
  display: inline-block !important;
  background-image: linear-gradient(var(--as-ink), var(--as-ink)) !important;
  background-size: 0% 1px !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;
  transition: color 350ms ease, background-size 350ms ease !important;
}

.as-btn-text.et_pb_button:hover,
.as-btn-text-fwd.et_pb_button:hover,
.as-btn-text-back.et_pb_button:hover,
a.as-btn-text:hover,
a.as-btn-text-fwd:hover,
a.as-btn-text-back:hover {
  color: var(--as-ink) !important;
  background-size: 100% 1px !important;
}

.as-btn-text.et_pb_button::before,
.as-btn-text-fwd.et_pb_button::before,
.as-btn-text-back.et_pb_button::before {
  display: none !important;
  content: none !important;
}


/* 6a. Freccia diagonale */

.as-btn-text.et_pb_button::after,
a.as-btn-text::after {
  content: '' !important;
  font-family: initial !important;
  font-size: inherit !important;
  display: block !important;
  width: 1.1em !important;
  height: 1.1em !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A625A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transition: background-image 350ms ease, transform 350ms ease !important;
  -webkit-font-smoothing: auto !important;
}

.as-btn-text.et_pb_button:hover::after,
a.as-btn-text:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
  transform: translateY(-50%) translate(2px, -2px) !important;
}


/* 6b. Chevron avanti */

.as-btn-text-fwd.et_pb_button::after,
a.as-btn-text-fwd::after {
  content: '' !important;
  font-family: initial !important;
  display: block !important;
  width: 1em !important;
  height: 1em !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A625A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transition: background-image 350ms ease, transform 350ms ease !important;
  -webkit-font-smoothing: auto !important;
}

.as-btn-text-fwd.et_pb_button:hover::after,
a.as-btn-text-fwd:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
  transform: translateY(-50%) translateX(4px) !important;
}


/* 6c. Chevron indietro */

.as-btn-text-back.et_pb_button,
a.as-btn-text-back {
  padding-right: 0 !important;
  padding-left: 1.8em !important;
  background-position: right bottom !important;
}

.as-btn-text-back.et_pb_button::after,
a.as-btn-text-back::after {
  content: '' !important;
  font-family: initial !important;
  display: block !important;
  width: 1em !important;
  height: 1em !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A625A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transition: background-image 350ms ease, transform 350ms ease !important;
  -webkit-font-smoothing: auto !important;
}

.as-btn-text-back.et_pb_button:hover::after,
a.as-btn-text-back:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130F' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
  transform: translateY(-50%) translateX(-4px) !important;
}


/* 6d. Variante fondo scuro · hover sabbia */

.as-btn-text.on-dark.et_pb_button,
.as-btn-text-fwd.on-dark.et_pb_button,
.as-btn-text-back.on-dark.et_pb_button,
.as-sec-dark .as-btn-text.et_pb_button,
.as-sec-dark .as-btn-text-fwd.et_pb_button,
.as-sec-dark .as-btn-text-back.et_pb_button {
  color: var(--as-sand-soft) !important;
  background-image: linear-gradient(var(--as-sand), var(--as-sand)) !important;
  background-size: 0% 1px !important;
  background-repeat: no-repeat !important;
}

.as-btn-text-back.on-dark.et_pb_button,
.as-sec-dark .as-btn-text-back.et_pb_button {
  background-position: right bottom !important;
}

.as-btn-text.on-dark.et_pb_button:hover,
.as-btn-text-fwd.on-dark.et_pb_button:hover,
.as-btn-text-back.on-dark.et_pb_button:hover,
.as-sec-dark .as-btn-text.et_pb_button:hover,
.as-sec-dark .as-btn-text-fwd.et_pb_button:hover,
.as-sec-dark .as-btn-text-back.et_pb_button:hover {
  color: var(--as-sand) !important;
  background-size: 100% 1px !important;
}

.as-btn-text.on-dark.et_pb_button:hover::after,
.as-sec-dark .as-btn-text.et_pb_button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
}

.as-btn-text-fwd.on-dark.et_pb_button:hover::after,
.as-sec-dark .as-btn-text-fwd.et_pb_button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}

.as-btn-text-back.on-dark.et_pb_button:hover::after,
.as-sec-dark .as-btn-text-back.et_pb_button:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}


/* ==========================================================================
   7. BUTTON SOCIAL · pieno con icona a sinistra
   L'icona va messa come <svg> dentro il link.
   ========================================================================== */

.as-btn-social {
  font-family: var(--as-sans) !important;
  font-size: clamp(13px, 0.19vw + 12.3px, 15px) !important;
  font-weight: 500 !important;
  color: var(--as-ink) !important;
  background-color: var(--as-sun) !important;
  border-radius: 999px !important;
  padding: 13px 24px 13px 46px !important;
  border: 1px solid var(--as-sun) !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: background-color 300ms ease, border-color 300ms ease !important;
}

.as-btn-social svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  position: absolute !important;
  left: 20px !important;
}

.as-btn-social:hover {
  background-color: var(--as-terra) !important;
  border-color: var(--as-terra) !important;
  color: var(--as-ink) !important;
}


/* ==========================================================================
   8. BUTTON GROUP · pulsanti affiancati, wrap su mobile
   ========================================================================== */

.as-btn-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.as-btn-group .et_pb_button_module_wrapper { margin: 0 !important; }


/* ==========================================================================
   9. CAMPI FORM · stile pill
   ========================================================================== */

.as-field,
.as-form input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.as-form select {
  min-height: 50px !important;
  padding: 0 20px !important;
  border: 1px solid var(--as-ink) !important;
  border-radius: 999px !important;
  background-color: rgba(243, 238, 230, 0.6) !important;
  font-family: var(--as-sans) !important;
  font-size: 15px !important;
  color: var(--as-ink) !important;
}

.as-form textarea {
  padding: 16px 20px !important;
  border: 1px solid var(--as-ink) !important;
  border-radius: 24px !important;
  background-color: rgba(243, 238, 230, 0.6) !important;
  font-family: var(--as-sans) !important;
  font-size: 15px !important;
  color: var(--as-ink) !important;
  min-height: 130px !important;
}

.as-field::placeholder,
.as-form input::placeholder,
.as-form textarea::placeholder {
  color: var(--as-muted) !important;
  opacity: 1 !important;
}

.as-sec-dark .as-field,
.as-sec-dark .as-form input:not([type=submit]),
.as-sec-dark .as-form textarea {
  border-color: var(--as-muted) !important;
  background-color: transparent !important;
  color: var(--as-sand) !important;
}

.as-sec-dark .as-form input::placeholder,
.as-sec-dark .as-form textarea::placeholder {
  color: var(--as-sand-soft) !important;
}


/* ==========================================================================
   10. FOCUS VISIBILE · accessibilità
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.et_pb_button:focus-visible {
  outline: 2px solid var(--as-terra) !important;
  outline-offset: 3px !important;
}

.as-sec-dark a:focus-visible,
.as-sec-dark button:focus-visible,
.as-sec-dark input:focus-visible {
  outline-color: var(--as-sun) !important;
}

/* Testo per soli screen reader */
.as-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}


/* ==========================================================================
   11. ANIMAZIONI IN LOOP (CSS)
   Decorative, indipendenti dallo scroll.
   ========================================================================== */

/* Pulsazione · pallini di stato, badge "in uscita" */
.as-pulse {
  animation: as-pulse 2.4s ease-in-out infinite;
}
@keyframes as-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* Galleggiamento · orb, elementi decorativi, immagini staccate */
.as-float,
.as-float-slow,
.as-float-fast {
  animation-name: as-float;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
.as-float      { animation-duration: 9s;  }
.as-float-slow { animation-duration: 12s; animation-delay: -4s; }
.as-float-fast { animation-duration: 7s;  animation-delay: -2s; }

@keyframes as-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}

/* Respiro · sole, cerchi grandi, sfondi */
.as-breathe {
  animation: as-breathe 14s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
@keyframes as-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

/* Rotazione lenta · dischi, elementi circolari */
.as-spin-slow {
  animation: as-spin 40s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes as-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Cursore lampeggiante · per testi tipo "in uscita" */
.as-blink {
  animation: as-blink 1.6s steps(2, start) infinite;
}
@keyframes as-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}


/* ==========================================================================
   12. MARQUEE · collaborazioni, loghi scorrevoli
   Queste classi servono al modulo marquee di un plugin Divi.
   Il marquee della bio è solo CSS e sta nella sezione 24.4.
   ========================================================================== */

.as-marquee .et_pb_column {
  min-width: 0;
  overflow: hidden;
}

.as-marquee .as-marquee-wrapper,
.as-marquee .as-marquee-clip {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 767px) {
  .as-marquee-clip {
    padding: 16px 0 !important;
    box-sizing: content-box !important;
  }
}


/* ==========================================================================
   13. COLONNE FLUIDE PER I FORM (Contact Form 7)
   ========================================================================== */

.formRow { margin: 0 -15px; }

.formRow .full_width,
.formRow .one_half,
.formRow .one_third,
.formRow .two_third,
.formRow .one_fourth,
.formRow .three_fourth,
.formRow .one_fifth,
.formRow .two_fifth,
.formRow .three_fifth,
.formRow .four_fifth,
.formRow .one_sixth,
.formRow .five_sixth {
  padding: 0 15px !important;
  margin: 0 0 15px !important;
  float: left;
}

.formRow .full_width    { width: 100%       !important; }
.formRow .one_half      { width: 50%        !important; }
.formRow .one_third     { width: 33.333333% !important; }
.formRow .two_third     { width: 66.666666% !important; }
.formRow .one_fourth    { width: 25%        !important; }
.formRow .three_fourth  { width: 75%        !important; }
.formRow .one_fifth     { width: 20%        !important; }
.formRow .two_fifth     { width: 40%        !important; }
.formRow .three_fifth   { width: 60%        !important; }
.formRow .four_fifth    { width: 80%        !important; }
.formRow .one_sixth     { width: 16.666666% !important; }
.formRow .five_sixth    { width: 83.333333% !important; }

.formRow label {
  width: 100%;
  display: block;
}

.formRow input:not([type=checkbox]),
.formRow textarea,
.formRow select {
  width: 100%;
  display: block;
}

.formRow .wpcf7-list-item:first-of-type { margin-left: 0 !important; }

.formRow:after {
  content: '';
  display: block;
  clear: both;
}

@media (max-width: 767px) {
  .formRow .full_width,
  .formRow .one_half,
  .formRow .one_third,
  .formRow .two_third,
  .formRow .one_fourth,
  .formRow .three_fourth,
  .formRow .one_fifth,
  .formRow .two_fifth,
  .formRow .three_fifth,
  .formRow .four_fifth,
  .formRow .one_sixth,
  .formRow .five_sixth {
    width: 100% !important;
  }
}


/* ==========================================================================
   14. CONTACT FORM 7
   Riscritta per il rebrand (27/09/2026). Vale per tutti i form CF7.
   Campi a "righe" (solo filo sotto, testo grande e leggero).
   Variante a pillola: classe as-cf7-pill sul modulo che contiene il form.
   Invia = pillola as-btn-solid con freccia (è un input: freccia di sfondo).
   Classi del template del form: as-cf7-grid (griglia a 2 colonne),
   as-cf7-full (campo a tutta riga), as-cf7-lab (etichetta),
   as-cf7-send (riga finale captcha + invia).
   Captcha a icone: plugin Contact Form 7 Image Captcha, tag [cf7ic].
   ========================================================================== */

/* ── 14.1 STRUTTURA ─────────────────────────────────────── */

.wpcf7 form { margin: 0 !important; }
.wpcf7 form p { margin: 0 !important; padding: 0 !important; font-size: inherit !important; }
.wpcf7 form br { display: none; }
.wpcf7 label { display: block; }
.wpcf7-form-control-wrap { display: block; position: relative; }

.as-cf7-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 28px);
}
.as-cf7-grid > .as-cf7-full { grid-column: 1 / -1; }

@media (max-width: 767px) {
  .as-cf7-grid { grid-template-columns: 1fr; }
}

.as-cf7-lab {
  display: block !important;
  margin-bottom: 10px !important;
  font-family: var(--as-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--as-muted) !important;
}
.as-cf7-lab i { font-style: normal !important; color: var(--as-terra-ink) !important; }

/* ── 14.2 CAMPI · righe ─────────────────────────────────── */

.wpcf7 input.wpcf7-text,
.wpcf7 input.wpcf7-email,
.wpcf7 input.wpcf7-tel,
.wpcf7 input.wpcf7-number,
.wpcf7 input.wpcf7-date,
.wpcf7 select.wpcf7-select,
.wpcf7 textarea.wpcf7-textarea {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px 0 14px !important;
  font-family: var(--as-sans) !important;
  font-size: clamp(19px, 0.6vw + 15px, 24px) !important;
  font-weight: 300 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: var(--as-ink) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--as-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 300ms ease, box-shadow 300ms ease !important;
}

.wpcf7 textarea.wpcf7-textarea {
  height: 150px !important;
  min-height: 110px !important;
  resize: vertical;
}

.wpcf7 select.wpcf7-select {
  padding-right: 32px !important;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 2px center !important;
  background-size: 20px !important;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
  color: var(--as-muted) !important;
  opacity: 1 !important;
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance):not(.wpcf7-radio):hover {
  border-bottom-color: var(--as-terra) !important;
}

.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus {
  outline: none !important;
  border-bottom-color: var(--as-terra) !important;
  box-shadow: 0 1px 0 0 var(--as-terra) !important;
}

/* ── 14.3 CAMPI · pillola (as-cf7-pill sul modulo) ──────── */

.as-cf7-pill .wpcf7 input.wpcf7-text,
.as-cf7-pill .wpcf7 input.wpcf7-email,
.as-cf7-pill .wpcf7 input.wpcf7-tel,
.as-cf7-pill .wpcf7 select.wpcf7-select {
  min-height: 56px !important;
  padding: 0 22px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  border: 1px solid var(--as-ink) !important;
  border-radius: 999px !important;
  background-color: rgba(255, 255, 255, 0.35) !important;
}
.as-cf7-pill .wpcf7 select.wpcf7-select {
  padding-right: 48px !important;
  background-position: right 18px center !important;
}
.as-cf7-pill .wpcf7 textarea.wpcf7-textarea {
  padding: 18px 22px !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  border: 1px solid var(--as-ink) !important;
  border-radius: 28px !important;
  background-color: rgba(255, 255, 255, 0.35) !important;
}
.as-cf7-pill .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus {
  border-color: var(--as-terra) !important;
  box-shadow: 0 0 0 1px var(--as-terra) !important;
}
.as-cf7-pill .as-cf7-lab,
.as-cf7-pill .wpcf7-not-valid-tip { margin-left: 22px !important; }

/* ── 14.4 PRIVACY (acceptance) e checkbox ───────────────── */

.wpcf7-acceptance .wpcf7-list-item,
.wpcf7-checkbox .wpcf7-list-item { display: block !important; margin: 0 !important; }

.wpcf7-acceptance label,
.wpcf7-checkbox label {
  display: flex !important;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--as-muted) !important;
}

.wpcf7-acceptance input[type=checkbox],
.wpcf7-checkbox input[type=checkbox] {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 22px;
  width: 22px !important;
  height: 22px !important;
  margin: 1px 0 0 !important;
  border: 1px solid var(--as-ink) !important;
  border-radius: 6px !important;
  background: transparent;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.wpcf7-acceptance input[type=checkbox]:checked,
.wpcf7-checkbox input[type=checkbox]:checked {
  background: var(--as-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.wpcf7-acceptance a { color: var(--as-ink) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.wpcf7-acceptance a:hover { color: var(--as-terra-ink) !important; }

/* ── 14.5 CAPTCHA A ICONE (plugin CF7 Image Captcha) ─────── */

.wpcf7 .kc_captcha,
.wpcf7 .kc_captcha .wpcf7-radio,
.wpcf7 .captcha-image { text-align: left !important; }

.wpcf7 .captcha-image {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start !important;
  align-items: center;
  gap: 10px 12px;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.wpcf7 .cf7ic_instructions {
  display: block !important;
  width: 100%;
  margin: 0 0 4px !important;
  text-align: left !important;
  font-size: 15px !important;
  color: var(--as-muted) !important;
}
.wpcf7 .cf7ic_instructions span { color: var(--as-ink) !important; font-weight: 500 !important; }

.wpcf7 .captcha-image label {
  position: relative;
  display: inline-grid !important;
  place-items: center;
  width: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--as-ink) !important;
  border: 1px solid var(--as-line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  cursor: pointer;
  transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}
.wpcf7 .captcha-image label:hover { border-color: var(--as-ink) !important; }

.wpcf7 .captcha-image label > input {
  position: absolute !important;
  inset: 0;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
}

.wpcf7 .captcha-image label svg,
.wpcf7 .captcha-image label > input + svg {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  fill: currentColor !important;
  color: inherit !important;
}

.wpcf7 .captcha-image label:has(input:checked) {
  background: var(--as-ink) !important;
  border-color: var(--as-ink) !important;
  color: var(--as-sand) !important;
}
.wpcf7 .captcha-image label:has(input:checked) svg { color: var(--as-sand) !important; fill: var(--as-sand) !important; }
.wpcf7 .captcha-image label:has(input:focus-visible) { outline: 2px solid var(--as-terra); outline-offset: 3px; }

/* ── 14.6 RIGA FINALE e INVIA ───────────────────────────── */

.as-cf7-send {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px 32px;
  padding-top: clamp(22px, 2.4vw, 34px);
}
.as-cf7-send p { display: flex; align-items: center; gap: 14px; }

.wpcf7 input.wpcf7-submit {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 18px 58px 18px 32px !important;
  font-family: var(--as-sans) !important;
  font-size: clamp(14px, 0.2vw + 13.3px, 16px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--as-sand) !important;
  background-color: var(--as-ink) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  background-position: right 28px center !important;
  border: 1px solid var(--as-ink) !important;
  border-radius: 999px !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease, background-position 300ms ease !important;
}

.wpcf7 input.wpcf7-submit:hover {
  color: var(--as-ink) !important;
  background-color: var(--as-terra) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") !important;
  background-position: right 25px center !important;
  border-color: var(--as-terra) !important;
}

.wpcf7 input.wpcf7-submit:disabled { opacity: 0.35; cursor: not-allowed; }
.wpcf7 input.wpcf7-submit:disabled:hover {
  color: var(--as-sand) !important;
  background-color: var(--as-ink) !important;
  border-color: var(--as-ink) !important;
}

.wpcf7 .wpcf7-spinner { margin: 0 !important; background-color: var(--as-muted) !important; }

/* ── 14.7 ERRORI e MESSAGGIO FINALE ─────────────────────── */

.wpcf7 .wpcf7-not-valid { border-bottom-color: var(--as-terra-ink) !important; }
.as-cf7-pill .wpcf7 .wpcf7-not-valid { border-color: var(--as-terra-ink) !important; }

.wpcf7 .wpcf7-not-valid-tip {
  display: block !important;
  width: 100%;
  margin-top: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--as-terra-ink) !important;
}

.wpcf7 form .wpcf7-response-output {
  position: relative;
  margin: clamp(20px, 2vw, 28px) 0 0 !important;
  padding: 16px 20px 16px 48px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--as-ink) !important;
  border: 1px solid var(--as-line) !important;
  border-radius: 18px !important;
  background: transparent !important;
}
.wpcf7 form .wpcf7-response-output::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 19px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--as-terra);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
  color: var(--as-terra-ink) !important;
  border-color: var(--as-terra-ink) !important;
}

.wpcf7 form.sent .wpcf7-response-output {
  color: var(--as-sand) !important;
  background: var(--as-ink) !important;
  border-color: var(--as-ink) !important;
}
.wpcf7 form.sent .wpcf7-response-output::before { background: var(--as-sun); }

/* ── 14.8 FORM SU FONDO SCURO ───────────────────────────── */

.as-sec-dark .wpcf7 .wpcf7-form-control:not(.wpcf7-submit) {
  color: var(--as-sand) !important;
  border-color: var(--as-sand-soft) !important;
}
.as-sec-dark .wpcf7 input::placeholder,
.as-sec-dark .wpcf7 textarea::placeholder { color: var(--as-sand-soft) !important; }
.as-sec-dark .as-cf7-lab,
.as-sec-dark .wpcf7-acceptance label,
.as-sec-dark .wpcf7 .cf7ic_instructions { color: var(--as-sand-soft) !important; }
.as-sec-dark .wpcf7 input.wpcf7-submit {
  color: var(--as-ink) !important;
  background-color: var(--as-sand) !important;
  border-color: var(--as-sand) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317130F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") !important;
}
.as-sec-dark .wpcf7 input.wpcf7-submit:hover {
  background-color: var(--as-terra) !important;
  border-color: var(--as-terra) !important;
}


/* ==========================================================================
   15. MENU
   Navbar, hamburger e overlay li gestisce il plugin AS Menu.
   Qui resta solo la voce a pillola, da assegnare a mano a una voce
   in Aspetto → Menu (classe CSS as-menu-pill).
   ========================================================================== */

/* Voce di menu evidenziata, tipo "Sogni Acidi" */
.as-menu-pill > a,
a.as-menu-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  background-color: var(--as-teal) !important;
  color: var(--as-ink) !important;
  transition: background-color 300ms ease !important;
}

.as-menu-pill > a::before,
a.as-menu-pill::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: var(--as-terra) !important;
  flex-shrink: 0 !important;
}

.as-menu-pill > a:hover,
a.as-menu-pill:hover {
  background-color: var(--as-sun) !important;
  color: var(--as-ink) !important;
}


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.et-l--footer { background-color: var(--as-ink); }

.et-l--footer,
.et-l--footer p,
.et-l--footer li,
.et-l--footer h1, .et-l--footer h2, .et-l--footer h3,
.et-l--footer h4, .et-l--footer h5 {
  color: var(--as-sand) !important;
}

.et-l--footer h6,
.et-l--footer .as-label,
.et-l--footer .as-label p {
  color: var(--as-sand-soft) !important;
}

.et-l--footer a { color: var(--as-sand) !important; }
.et-l--footer a:hover { color: var(--as-sun) !important; }

.et-l--footer .as-it { color: var(--as-sun) !important; }

#info .et_pb_text h4 { font-size: 18px !important; }
#info .et_pb_text p  { font-size: 16px !important; }
#copyright .et_pb_text p { font-size: 14px !important; }

@media (max-width: 980px) {
  #info .et_pb_text h4 { font-size: 16px !important; }
  #info .et_pb_text p  { font-size: 14px !important; }
  #copyright .et_pb_text p { font-size: 12px !important; }
}

/* Divisori del footer */
.et-l--footer .as-hr,
.et-l--footer .as-hr-strong {
  border-top-color: var(--as-ink-soft) !important;
}


/* ==========================================================================
   17. MODULO BLOG NEL FOOTER
   ========================================================================== */

#blog-footer .et_pb_post { margin-bottom: 20px !important; }

#blog-footer .et_pb_post h2 {
  padding: 0 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
}

@media (max-width: 980px) {
  #blog-footer .et_pb_post h2 { font-size: 14px !important; }
}

#blog-footer .more-link {
  font-family: var(--as-sans) !important;
  font-size: clamp(13px, 0.19vw + 12.3px, 15px) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--as-sand-soft) !important;
  text-decoration: none !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  padding-right: 1.8em !important;
  position: relative !important;
  background-image: linear-gradient(var(--as-sand), var(--as-sand)) !important;
  background-size: 0% 1px !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;
  transition: color 350ms ease, background-size 350ms ease !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#blog-footer .more-link:hover {
  color: var(--as-sand) !important;
  background-size: 100% 1px !important;
}

#blog-footer .more-link::before { display: none !important; }

#blog-footer .more-link::after {
  content: '' !important;
  font-family: initial !important;
  font-size: inherit !important;
  display: block !important;
  width: 1.1em !important;
  height: 1.1em !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BDB4A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transition: background-image 350ms ease, transform 350ms ease !important;
  -webkit-font-smoothing: auto !important;
}

#blog-footer .more-link:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
  transform: translateY(-50%) translate(2px, -2px) !important;
}


/* ==========================================================================
   18. VARIE
   ========================================================================== */

/* Pagina alta almeno quanto lo schermo su mobile */
@media (max-width: 768px) {
  body, #page-container { min-height: 100dvh; }
}

/* Azzero lo spazio sopra i commenti */
#comment-wrap { padding-top: 0 !important; }

/* Nascondo la voce commenti nella sidebar indice */
.as-toc li.as-toc__sub { display: none !important; }

/* Testo cookie banner su fondo chiaro */
.cookie-text p,
.cookie-text h1, .cookie-text h2, .cookie-text h3,
.cookie-text h4, .cookie-text h5, .cookie-text h6,
.cookie-text li {
  color: var(--as-ink) !important;
}


/* ==========================================================================
   19. REDUCED MOTION
   Dal 03/10/2026 il sito ignora "Riduci movimento" (scelta di Fra, come
   su francescorotondo.it): animazioni, marquee e transizioni si vedono
   per tutti. Le regole @media (prefers-reduced-motion) sono state tolte
   da style.css, dagli script del tema e dal plugin concerti.
   ========================================================================== */


/* ==========================================================================
   20. FILTRI SVG · liquid e wobble
   I filtri li inietta assets/as-effects.js, che aggiunge .as-fx-ready
   su <html>. Senza quella classe le regole qui sotto non si attivano:
   un riferimento a un filtro inesistente farebbe sparire l'elemento.
   ========================================================================== */

/* Distorsione ad acqua al passaggio del mouse.
   Da mettere sul modulo Immagine, o su una colonna che contiene immagini. */
.as-liquid,
.as-liquid img {
  transition: filter .2s ease !important;
}

.as-liquid img,
.as-liquid .et_pb_image_wrap {
  will-change: filter;
}

/* Ondeggiamento continuo, per i titoli display grandi */
.as-fx-ready .as-wobble,
.as-fx-ready .as-wobble h1,
.as-fx-ready .as-wobble h2 {
  filter: url(#as-wobble-filter);
}

/* Il filtro va sul testo, non sul contenitore del modulo Divi */
.as-fx-ready .as-wobble.et_pb_text {
  filter: none;
}


/* ==========================================================================
   21. COMPONENTI HOME
   Classi pensate per i moduli Divi della home. Il layout grosso lo fanno
   le colonne di Divi, qui c'è solo quello che Divi non sa fare da solo.
   ========================================================================== */

/* ── 21.1 HERO ─────────────────────────────────────────── */

/* Titolo hero: più grande e più stretto del solito h1 */
.as-hero-title h1,
.as-hero-title h2 {
  font-size: clamp(72px, 16.5vw, 240px) !important;
  line-height: 0.84 !important;
  letter-spacing: -0.058em !important;
  margin: 0 !important;
}

.as-hero-title .as-it {
  letter-spacing: -0.02em !important;
  color: var(--as-terra) !important;
}

/* La riga hero allinea le due colonne sul fondo.
   Divi impila le colonne con i float: il flex qui le rimette in riga
   e permette l'allineamento in basso. Sotto i 980px torna a blocchi. */
.as-hero-grid.et_pb_row {
  display: flex !important;
  align-items: flex-end !important;
  flex-wrap: wrap !important;
}

@media (max-width: 980px) {
  .as-hero-grid.et_pb_row { display: block !important; }
  .as-hero-grid .et_pb_column { margin-bottom: 32px !important; }
  .as-hero-grid .et_pb_column:last-child { margin-bottom: 0 !important; }
}

/* La colonna di testo resta un blocco normale, altrimenti i pulsanti
   dentro diventano elementi flex e si impilano per forza. */
.as-hero-copy {
  padding-bottom: 8px !important;
}

.as-hero-copy .et_pb_text { margin-bottom: 26px !important; }

.as-hero-copy p {
  font-size: clamp(19px, 1.7vw, 23px) !important;
  line-height: 1.4 !important;
  max-width: 30ch;
}

/* Immagine hero: proporzione fissa, niente deformazioni */
.as-hero-img .et_pb_image_wrap,
.as-hero-img img {
  width: 100% !important;
  display: block !important;
}

.as-hero-img .et_pb_image_wrap {
  aspect-ratio: 1800 / 809;
  overflow: hidden;
  background-color: var(--as-sand-2);
}

.as-hero-img img {
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 980px) {
  .as-hero-img .et_pb_image_wrap { aspect-ratio: 4 / 5; }
  .as-hero-img img { object-position: 50% 30% !important; }
}


/* ── 21.2 FASCIA PROSSIMO CONCERTO ─────────────────────── */

/* Divi incapsula il testo in .et_pb_text_inner: il flex va lì, non sul modulo */
.as-nextgig .et_pb_text_inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px 40px !important;
  flex-wrap: wrap !important;
}

.as-nextgig p { margin: 0 !important; }

.as-nextgig .as-nextgig-when {
  font-size: clamp(18px, 1.8vw, 24px) !important;
  flex: 1 1 320px;
  color: var(--as-ink) !important;
}

.as-nextgig .as-it { font-size: 1.15em !important; }


/* ── 21.3 SOGNI ACIDI ──────────────────────────────────── */

.as-dream {
  position: relative !important;
  overflow: hidden !important;
  min-height: clamp(760px, 78vw, 1120px) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Riga del badge in cima: resta attaccata al bordo alto */
.as-dream-top.et_pb_row {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.as-dream-top .et_pb_module { margin-bottom: 0 !important; }

/* Il blocco titolo resta in fondo e sta sopra la scena */
.as-dream .as-dream-content.et_pb_row {
  margin-top: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* La scena SVG di sfondo, dentro un modulo Codice */
.as-dream-scene {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.as-dream-scene svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Divi avvolge l'SVG in .et_pb_code_inner, che ha altezza automatica:
   senza questo l'SVG prende l'altezza dal suo viewBox (1440x900) e,
   quando la sezione è più alta, sotto le dune resta una fascia teal. */
.as-dream-scene .et_pb_code_inner,
.as-dream-scene svg {
  position: absolute !important;
  inset: 0 !important;
  height: 100% !important;
}

/* La riga E la colonna che contengono la scena devono restare statiche:
   Divi mette position:relative sulle colonne, e se resta lei il
   riferimento dell'assoluto la scena copre solo la larghezza della riga. */
.as-dream-scene-row.et_pb_row,
.as-dream-scene-row .et_pb_column {
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
}

.as-dream-scene-row .et_pb_module { margin-bottom: 0 !important; }

.as-dream-title h1,
.as-dream-title h2 {
  font-family: var(--as-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(96px, 19vw, 280px) !important;
  line-height: 0.82 !important;
  letter-spacing: -0.02em !important;
  color: var(--as-ink) !important;
  margin: 0 !important;
}

/* Seconda riga rientrata, come nella bozza */
.as-dream-title h1 span,
.as-dream-title h2 span {
  display: block !important;
  padding-left: 0.55em !important;
}

.as-dream-lede p {
  font-weight: 300 !important;
  font-size: clamp(26px, 3.4vw, 48px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  max-width: 18ch;
}

.as-dream-lede strong { font-weight: 500 !important; }

/* Badge con pallino pulsante */
.as-badge,
.as-badge p {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  background-color: var(--as-ink) !important;
  color: var(--as-sand) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.as-badge p::before,
.as-badge > span::before {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: var(--as-terra) !important;
  flex-shrink: 0 !important;
  animation: as-pulse 2.4s ease-in-out infinite;
}


/* ── 21.4 MUSICA ───────────────────────────────────────── */

/* Copertina quadrata */
.as-cover .et_pb_image_wrap,
.as-cover img {
  width: 100% !important;
  display: block !important;
}
.as-cover .et_pb_image_wrap {
  aspect-ratio: 1;
  overflow: hidden;
  background-color: var(--as-sand-2);
}
.as-cover img {
  height: 100% !important;
  object-fit: cover !important;
}

/* Nome della formazione */
.as-band-name,
.as-band-name p {
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--as-terra-ink) !important;
  margin: 0 !important;
}

/* Formazione: strumento in grigio dopo il nome */
.as-lineup ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.as-lineup li {
  font-size: 18px !important;
  line-height: 1.7 !important;
  padding: 0 !important;
  color: var(--as-ink) !important;
}
.as-lineup li::before { content: none !important; }
.as-lineup span { color: var(--as-muted) !important; }

/* Riga degli store */
.as-stores p {
  display: flex !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  font-size: 15px !important;
  margin: 0 !important;
}
.as-stores a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}
.as-stores a:hover { color: var(--as-terra-ink) !important; }

/* Griglia in evidenza: le due colonne si allungano uguali,
   così il player e gli store possono stare in fondo. */
.as-feat.et_pb_row {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: wrap !important;
}

.as-feat .et_pb_column { margin-bottom: 0 !important; }

.as-feat .as-stack {
  display: flex !important;
  flex-direction: column !important;
}

@media (max-width: 980px) {
  .as-feat.et_pb_row { display: block !important; }
  .as-feat .et_pb_column { margin-bottom: 40px !important; }
  .as-feat .et_pb_column:last-child { margin-bottom: 0 !important; }
}

/* Griglia discografia: quattro copertine, due su tablet */
.as-disc .et_pb_column { margin-bottom: 24px !important; }

@media (max-width: 980px) and (min-width: 480px) {
  .as-disc.et_pb_row { display: flex !important; flex-wrap: wrap !important; }
  .as-disc .et_pb_column {
    width: 48% !important;
    margin-right: 4% !important;
  }
  .as-disc .et_pb_column:nth-child(2n) { margin-right: 0 !important; }
}

/* Didascalia sotto le copertine della discografia */
.as-disc .et_pb_image,
.as-disc .et_pb_image .et_pb_image_wrap { margin-bottom: 0 !important; }

.as-disc-cap { margin-top: 0 !important; }

.as-disc-cap p {
  font-size: 15px !important;
  line-height: 1.45 !important;
  margin: 16px 0 0 !important;
  color: var(--as-ink) !important;
}
.as-disc-cap em {
  font-style: normal !important;
  display: block !important;
  color: var(--as-terra-ink) !important;
}
.as-disc-cap span { color: var(--as-muted) !important; }


/* ── 21.5 LIVE ─────────────────────────────────────────── */

/* Riga concerto: data grande a sinistra, resto a seguire.
   Il flex serve a centrare verticalmente anche il pulsante Prenota. */
.as-gig.et_pb_row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  border-bottom: 1px solid var(--as-line) !important;
}

.as-gig .et_pb_column,
.as-gig .et_pb_module { margin-bottom: 0 !important; }

@media (max-width: 980px) {
  .as-gig.et_pb_row { display: block !important; }
  .as-gig .et_pb_column { margin-bottom: 20px !important; }
  .as-gig .et_pb_column:last-child { margin-bottom: 0 !important; }
}

/* Data: usa anche .as-date per il colore e i numeri tabellari */
.as-gig-date p {
  margin: 0 !important;
  font-weight: 300 !important;
  font-size: clamp(52px, 6vw, 80px) !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--as-terra) !important;
}
.as-gig-date small {
  display: block !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--as-muted) !important;
  margin-top: 8px !important;
}

.as-venue p { margin: 0 !important; font-size: 22px !important; color: var(--as-ink) !important; }
.as-venue .as-sub {
  font-size: 15px !important;
  color: var(--as-muted) !important;
  margin-top: 6px !important;
}

/* Elenco concerti passati, due colonne su desktop */
.as-past ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 32px !important;
}
.as-past li {
  display: flex !important;
  gap: 18px !important;
  padding: 12px 0 !important;
  border-top: 1px solid var(--as-line) !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  color: var(--as-ink) !important;
}
.as-past li::before { content: none !important; }
.as-past li b {
  font-weight: 400 !important;
  color: var(--as-muted) !important;
  font-variant-numeric: tabular-nums !important;
  min-width: 74px !important;
}

@media (max-width: 767px) {
  .as-past ul { grid-template-columns: 1fr !important; }
}


/* ── 21.6 DIDATTICA ────────────────────────────────────── */

/* Colonna con riga sopra */
.as-tcol {
  border-top: 1px solid var(--as-ink) !important;
  padding-top: 20px !important;
}

/* Un solo livello di titolo dentro la colonna: stessa misura del
   titolo piccolo del sistema (h5), non un valore a sé. */
.as-tcol h3 {
  font-size: clamp(17px, 0.5vw + 15px, 22px) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin: 22px 0 6px !important;
}
.as-tcol h3:first-child,
.as-tcol .et_pb_text_inner > h3:first-child { margin-top: 0 !important; }

.as-tcol h3 + p { margin-top: 0 !important; }

.as-tcol p { max-width: 38ch; }

.as-tcol .as-label { margin-bottom: 18px !important; }

/* Libro: copertina piccola più titolo accanto */
.as-book {
  display: flex !important;
  gap: 18px !important;
  align-items: flex-end !important;
  text-decoration: none !important;
  color: inherit !important;
  padding-block: 6px !important;
}
.as-book img {
  width: 96px !important;
  flex: none !important;
  box-shadow: 0 16px 26px -16px rgba(23, 19, 15, 0.5) !important;
  transition: transform .4s ease !important;
}
.as-book:hover img { transform: translateY(-5px) rotate(-1.5deg) !important; }
.as-book span {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  font-size: 15px !important;
  color: var(--as-muted) !important;
}
.as-book strong {
  font-weight: 500 !important;
  font-size: 18px !important;
  color: var(--as-ink) !important;
  line-height: 1.25 !important;
}
.as-book:hover strong { color: var(--as-terra-ink) !important; }

/* Segnaposto per le copertine dei libri dentro i moduli Codice */
.as-book img[src=""] {
  background-color: var(--as-sand-2);
  height: 140px;
  opacity: 1;
}


/* ── 21.7 VIDEO ────────────────────────────────────────── */

/* Video principale con didascalia in sovrimpressione */
.as-vid-main {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  background-color: var(--as-ink) !important;
  aspect-ratio: 16 / 7;
}
.as-vid-main img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: grayscale(1) contrast(1.05) !important;
  opacity: 0.85 !important;
  transition: filter .5s ease, opacity .5s ease !important;
}
.as-vid-main:hover img {
  filter: grayscale(0) !important;
  opacity: 1 !important;
}
.as-vid-cap {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 16px !important;
  padding: clamp(16px, 3vw, 32px) !important;
  color: var(--as-sand) !important;
}
.as-vid-cap p {
  margin: 0 !important;
  font-size: clamp(17px, 1.8vw, 22px) !important;
  color: var(--as-sand) !important;
}
.as-vid-cap .as-it { font-size: 1.2em !important; }
.as-vbtn {
  flex: none !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background-color: var(--as-terra) !important;
  color: var(--as-ink) !important;
  display: grid !important;
  place-items: center !important;
}

@media (max-width: 767px) {
  .as-vid-main { aspect-ratio: 4 / 3; }
  .as-vbtn { width: 56px !important; height: 56px !important; }
}

/* Miniature video: blocco colorato con etichetta */
.as-thumb {
  aspect-ratio: 16 / 9;
  display: flex !important;
  align-items: flex-end !important;
  padding: 14px !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background-color: var(--as-sand-2);
  transition: filter .3s ease !important;
}
a:hover > .as-thumb { filter: brightness(1.05) !important; }


/* ── 21.8 BIO (home) ───────────────────────────────────── */

.as-portrait .et_pb_image_wrap,
.as-portrait img { width: 100% !important; display: block !important; }
.as-portrait .et_pb_image_wrap {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background-color: var(--as-sand-2);
}
.as-portrait img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important; /* ritaglio dalla parte alta: la faccia resta */
}

@media (max-width: 980px) {
  .as-portrait .et_pb_image_wrap { aspect-ratio: 4 / 5; }
}

/* Barra press kit: sta dentro la colonna del testo bio, non in una
   riga a parte, così si allinea sotto il testo e non sotto la foto. */
.as-press {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px 20px !important;
  flex-wrap: wrap !important;
  padding-block: 26px !important;
  border-top: 1px solid var(--as-ink) !important;
  border-bottom: 1px solid var(--as-ink) !important;
}

.as-press p { margin: 0 !important; }
.as-press .as-press-title { font-size: 20px !important; }
.as-press .as-press-sub {
  font-size: 15px !important;
  color: var(--as-muted) !important;
  margin-top: 4px !important;
}
.as-press .as-btn-solid { flex: none !important; }

/* Stessa barra fatta con il modulo Call To Action di Divi
   (titolo, testo, pulsante): il cliente cambia tutto dai campi.
   Pulsante pieno ink; con .as-press-outline diventa a bordo. */
.et_pb_promo.as-press {
  background: transparent !important;
  text-align: left !important;
  padding-inline: 0 !important;
  max-width: none !important;
}
.et_pb_promo.as-press .et_pb_promo_description {
  padding: 0 !important;
  flex: 1 1 280px;
}
.et_pb_promo.as-press .et_pb_module_header {
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: var(--as-ink) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.et_pb_promo.as-press .et_pb_promo_description p {
  font-size: 15px !important;
  color: var(--as-muted) !important;
  margin-top: 4px !important;
  padding: 0 !important;
}
.et_pb_promo.as-press .et_pb_button_wrapper { flex: none; margin: 0 !important; }
.et_pb_promo.as-press .et_pb_button {
  font-family: var(--as-sans) !important;
  font-size: clamp(14px, 0.2vw + 13.3px, 16px) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1 !important;
  min-height: 50px !important;
  padding: 0 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  border: 1px solid var(--as-ink) !important;
  background: var(--as-ink) !important;
  color: var(--as-sand) !important;
  margin: 0 !important;
  text-decoration: none !important;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease !important;
}
.et_pb_promo.as-press .et_pb_button:hover {
  background: var(--as-terra) !important;
  border-color: var(--as-terra) !important;
  color: var(--as-ink) !important;
}
.et_pb_promo.as-press-outline .et_pb_button {
  background: transparent !important;
  color: var(--as-ink) !important;
}
.et_pb_promo.as-press-outline .et_pb_button:hover {
  background: var(--as-ink) !important;
  border-color: var(--as-ink) !important;
  color: var(--as-sand) !important;
}
.et_pb_promo.as-press .et_pb_button::before,
.et_pb_promo.as-press .et_pb_button::after { display: none !important; content: none !important; }
.as-press + .as-press { border-top: 0 !important; }


/* ── 21.9 CONTATTI ─────────────────────────────────────── */

/* Elenco indirizzi email, uno per riga con etichetta sopra */
.as-mails .as-mail-row {
  padding-block: 20px !important;
  border-top: 1px solid var(--as-ink-soft) !important;
}
.as-mails .as-mail-row:last-child {
  border-bottom: 1px solid var(--as-ink-soft) !important;
}
.as-mails a {
  display: inline-block !important;
  margin-top: 8px !important;
  font-size: clamp(17px, 1.6vw, 20px) !important;
  overflow-wrap: anywhere !important;
  color: var(--as-sand) !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}
.as-mails a:hover { color: var(--as-sun) !important; }


/* ── 21.10 NEWSLETTER ──────────────────────────────────── */

/* Form della newsletter dentro un modulo Codice */
.as-form,
.as-dream-form {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}

.as-dream-form label {
  font-size: 17px !important;
  margin-right: 8px !important;
}

.as-dream-formwrap { margin-top: clamp(28px, 4vw, 48px) !important; }

.as-form button {
  cursor: pointer !important;
  border: 1px solid transparent;
}

/* Nota sotto i segnaposto: la togli quando metti il form vero */
.as-form-note {
  margin: 12px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--as-muted) !important;
  opacity: .8;
}

.as-sec-dark .as-form-note { color: var(--as-sand-soft) !important; }


/* ==========================================================================
   22. UTILITY PER IL BUILDER
   Poche classi di servizio che servono a far combaciare la griglia di Divi
   con la bozza. Vanno sulla riga, sulla colonna o sul modulo.
   ========================================================================== */

/* Riga standard: larghezza calcolata, non padding.
   Il gutter diventa margine esterno, così i bordi disegnati sulla riga
   (le linee sottili delle testate e dei concerti) si fermano dentro
   la colonna di testo invece di arrivare ai bordi dello schermo.
   Il plugin AS Menu usa lo stesso --as-gut e lo stesso 1600. */
.as-wrap.et_pb_row,
.as-wrap.et_pb_row_inner {
  width: calc(100% - (var(--as-gut) * 2)) !important;
  max-width: 1600px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/* --------------------------------------------------------------------------
   22.1 SPAZIATURA · SEZIONI E RIGHE (v2, 03/10/2026)
   Regola unica: la classe dà il valore di base, il Divi Builder vince.
   - Sezioni: le classi NON hanno !important. Divi scrive il padding
     della sezione senza !important e nel file della pagina, caricato
     dopo style.css: se lo imposti nel builder, vince lui.
   - Righe: Divi scrive il padding della riga con !important, sempre
     dopo style.css: anche qui, se lo imposti nel builder, vince lui.
   - Eccezioni che il builder NON può battere: as-sec-first (stacco dal
     menu) e as-band (fascia prossimo concerto).
   Valori a 390px / 1440px tra parentesi.
   -------------------------------------------------------------------------- */

/* Sezioni · padding sopra e sotto */
.as-sec-pad.et_pb_section {                    /* 72 / 144, max 160 */
  padding-top: clamp(72px, 10vw, 160px);
  padding-bottom: clamp(72px, 10vw, 160px);
}
.as-sec-pad-sm.et_pb_section {                 /* 40 / 86, max 88 */
  padding-top: clamp(40px, 6vw, 88px);
  padding-bottom: clamp(40px, 6vw, 88px);
}
.as-sec-pad-top.et_pb_section {                /* sopra 24 / 56, sotto 0 */
  padding-top: clamp(24px, 5vw, 56px);
  padding-bottom: 0;
}
.as-sec-pad-none.et_pb_section {               /* 0 / 0 */
  padding-top: 0;
  padding-bottom: 0;
}

/* Modificatori: tolgono un lato a una delle classi sopra.
   Es. "as-sec-pad as-sec-b0" = padding grande sopra, niente sotto
   (quando la sezione dopo ha lo stesso fondo e serve continuità). */
.as-sec-t0.et_pb_section { padding-top: 0; }
.as-sec-b0.et_pb_section { padding-bottom: 0; }

/* Prima sezione di ogni pagina: stacco dal menu.
   Il menu è fisso e la pagina parte sotto di lui, quindi il padding
   è altezza del menu + respiro: circa 109px su mobile, 155px a 1440px.
   Va su TUTTE le prime sezioni, insieme alle altre classi della
   sezione. Ha !important: il builder non la sovrascrive, il padding
   sotto invece lo decide la classe as-sec-pad-* che le metti accanto. */
.as-sec-first.et_pb_section {
  padding-top: calc(var(--as-nav-h) + clamp(40px, 6vw, 96px)) !important;
}

/* Righe · padding sopra e sotto.
   Senza classe una riga Divi ha 2% sopra e sotto da desktop (circa
   29px a 1440) e 30px fissi sotto i 980px. Queste classi lo fissano. */
.as-row-flush.et_pb_row,
.as-row-flush.et_pb_row_inner {                /* 0 / 0 */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.as-row-t0.et_pb_row,
.as-row-t0.et_pb_row_inner { padding-top: 0 !important; }
.as-row-b0.et_pb_row,
.as-row-b0.et_pb_row_inner { padding-bottom: 0 !important; }

/* Stacco tra due blocchi nella stessa sezione (es. testata e
   contenuto, o due griglie): spazio sopra la riga. 32 / 64 */
.as-row-gap.et_pb_row,
.as-row-gap.et_pb_row_inner { padding-top: clamp(32px, 4.4vw, 64px) !important; }

/* Stacco grande, come metà sezione. 48 / 96 */
.as-row-gap-lg.et_pb_row,
.as-row-gap-lg.et_pb_row_inner { padding-top: clamp(48px, 6.6vw, 96px) !important; }

/* Colonna allineata a destra (link a fine riga nelle testate) */
.as-align-right,
.as-align-right .et_pb_text_inner,
.as-align-right .et_pb_button_module_wrapper {
  text-align: right !important;
}

@media (max-width: 767px) {
  .as-align-right,
  .as-align-right .et_pb_text_inner,
  .as-align-right .et_pb_button_module_wrapper {
    text-align: left !important;
  }
}

/* Pulsanti affiancati dentro una colonna: da mettere sulla colonna.
   Copre sia il wrapper del modulo pulsante sia il caso in cui Divi
   applichi la classe a un contenitore diverso. */
.as-btn-row .et_pb_button_module_wrapper,
.as-btn-row > .et_pb_button_module_wrapper,
.as-btn-row .et_pb_module.et_pb_button_module_wrapper {
  display: inline-block !important;
  vertical-align: top !important;
  width: auto !important;
  float: none !important;
  margin: 0 12px 12px 0 !important;
  text-align: left !important;
}

.as-btn-row .et_pb_button_module_wrapper:last-child { margin-right: 0 !important; }

/* Triangolo play dentro il pulsante.
   Disegnato con i bordi invece che con una maschera SVG: misura
   prevedibile in pixel, segue il colore del testo, e se il browser
   non supporta le maschere non resta un quadrato pieno. */
.as-btn-play.et_pb_button::before,
a.as-btn-play::before,
button.as-btn-play::before {
  content: '' !important;
  display: inline-block !important;
  width: 0 !important;
  height: 0 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  border-style: solid !important;
  border-width: 0.24em 0 0.24em 0.38em !important;
  border-color: transparent transparent transparent currentColor !important;
  background: none !important;
  position: static !important;
  opacity: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Colonna senza margine sotto quando la riga è una griglia */
.as-row-tight .et_pb_column { margin-bottom: 0 !important; }

/* Spazio tra moduli dentro una colonna, quando serve respiro */
.as-stack .et_pb_module { margin-bottom: 18px !important; }
.as-stack .et_pb_module:last-child { margin-bottom: 0 !important; }

/* Da mettere sul modulo che deve restare in fondo alla colonna */
.as-push { margin-top: auto !important; }

@media (max-width: 980px) {
  .as-push { margin-top: 24px !important; }
}

/* Segnaposto immagine: blocco colorato finché non carichi la foto.
   Quando metti l'immagine vera, togli la classe as-ph. */
.as-ph .et_pb_image_wrap {
  position: relative;
  background-color: var(--as-sand-2) !important;
  min-height: 120px;
}
.as-ph img,
.as-ph img[src=""] {
  opacity: 0 !important;
}
.as-ph .et_pb_image_wrap::after {
  content: 'immagine';
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(23, 19, 15, 0.55);
}


/* ==========================================================================
   23. PLAYER AUDIO
   Da mettere sul modulo Audio di Divi. Ripulisce il player nativo e lo
   riporta alla riga sottile della bozza: pallino terracotta e filo sopra
   e sotto. Punto di partenza: il player di Divi ha un markup suo, se
   vuoi spingerti oltre serve mettere mano a mediaelement.
   ========================================================================== */

.as-player.et_pb_audio_module {
  background-color: transparent !important;
  padding: 20px 0 !important;
  border-top: 1px solid var(--as-ink) !important;
  border-bottom: 1px solid var(--as-ink) !important;
  margin-bottom: 0 !important;
}

.as-player .et_pb_module_header,
.as-player .et_audio_module_meta {
  font-family: var(--as-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--as-ink) !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.as-player .et_audio_module_meta { color: var(--as-muted) !important; }

.as-player .mejs-container,
.as-player .mejs-container .mejs-controls,
.as-player .mejs-embed,
.as-player .mejs-embed body {
  background: transparent !important;
  height: auto !important;
}

.as-player .mejs-controls .mejs-time-rail .mejs-time-total,
.as-player .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
  background: var(--as-line) !important;
  border-radius: 0 !important;
  height: 2px !important;
}

.as-player .mejs-controls .mejs-time-rail .mejs-time-current,
.as-player .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
  background: var(--as-ink) !important;
  border-radius: 0 !important;
  height: 2px !important;
}

.as-player .mejs-controls .mejs-time-rail .mejs-time-loaded {
  background: rgba(23, 19, 15, 0.12) !important;
  height: 2px !important;
}

.as-player .mejs-controls .mejs-playpause-button button {
  background-color: var(--as-terra) !important;
  border-radius: 50% !important;
  color: var(--as-ink) !important;
  transition: transform .2s ease !important;
}

.as-player .mejs-controls .mejs-playpause-button button:hover {
  transform: scale(1.06) !important;
}

.as-player .mejs-controls .mejs-time span,
.as-player .mejs-controls .mejs-currenttime,
.as-player .mejs-controls .mejs-duration {
  color: var(--as-muted) !important;
  font-family: var(--as-sans) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 13px !important;
}

/* Sezione scura: stessi fili, colori ribaltati */
.as-sec-dark .as-player.et_pb_audio_module {
  border-color: var(--as-ink-soft) !important;
}
.as-sec-dark .as-player .et_pb_module_header { color: var(--as-sand) !important; }
.as-sec-dark .as-player .mejs-controls .mejs-time-rail .mejs-time-current {
  background: var(--as-sand) !important;
}


/* ==========================================================================
   24. PAGINA BIO
   Layout bio-saffirio-divi.json. Solo moduli Testo, Immagine, Blurb e
   Call To Action: il cliente modifica tutto dall'editor visuale.
   Sezioni: HERO, CONTENUTO (indice fisso + Percorso, Premi, Titoli),
   COLLABORAZIONI (fascia terracotta con nomi che scorrono), CHIUSURA.
   Lo script assets/as-bio.js accende l'indice e muove i nomi.
   --as-bio-top: distanza dall'alto per indice fisso e ancore,
   parte dall'altezza del menu quindi segue --as-nav-h da sola.
   ========================================================================== */

:root { --as-bio-top: calc(var(--as-nav-h) + 48px); }

/* ── 24.1 HERO ── */

.as-bio-title.et_pb_row { padding-bottom: clamp(28px, 4vw, 56px) !important; }

/* Foto e date poggiano sulla stessa linea di fondo.
   Le due colonne si allungano uguali e il contenuto va in basso,
   senza margini sotto l'ultimo modulo. Solo da desktop:
   sotto i 980px le colonne tornano una sotto l'altra. */
@media (min-width: 981px) {
  .as-bio-hero.et_pb_row {
    display: flex !important;
    align-items: stretch !important;
  }
  .as-bio-hero .et_pb_column {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
}
.as-bio-hero .et_pb_column { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.as-bio-hero .et_pb_column > .et_pb_module:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* In una colonna flex Divi lascia all'immagine margini automatici e
   la stringe a 80px (effetto figurina): ogni modulo prende tutta la colonna. */
.as-bio-hero .et_pb_column > .et_pb_module {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.as-bio-hero .et_pb_image,
.as-bio-hero .et_pb_image_wrap { display: block !important; line-height: 0 !important; }

@media (max-width: 980px) {
  .as-bio-hero .et_pb_column:first-child { margin-bottom: 32px !important; }
  .as-bio-hero .as-portrait { max-width: 420px; }
}

/* Date chiave: modulo Testo con tre paragrafi.
   In ogni paragrafo la prima parte in corsivo è la data ("dal 2017"),
   dopo l'a capo c'è la descrizione. Il CSS li mette in tre colonne. */
.as-bio-facts .et_pb_text_inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: clamp(14px, 2vw, 38px);
}
.as-bio-facts p {
  border-top: 1px solid var(--as-line);
  padding: 16px 0 0 !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: var(--as-ink) !important;
}
.as-bio-facts em {
  display: block;
  margin-bottom: 10px;
  font-family: var(--as-serif) !important;
  font-style: italic !important;
  font-size: 30px !important;
  line-height: 1 !important;
  color: var(--as-terra-ink) !important;
}
.as-bio-facts br { display: none; }
@media (max-width: 640px) {
  .as-bio-facts .et_pb_text_inner { grid-template-columns: 1fr; gap: 16px; }
}

/* ── 24.2 CORPO: indice fisso a sinistra ── */

@media (min-width: 981px) {
  .as-bio-body.et_pb_row {
    display: flex !important;
    align-items: flex-start !important;
  }
  .as-bio-toc-col {
    position: sticky !important;
    top: var(--as-bio-top) !important;
  }
}
@media (max-width: 980px) {
  .as-bio-toc-col,
  .as-bio-num { display: none !important; }
}

/* Indice: modulo Testo con un elenco numerato di link.
   I numeri 01, 02... li mette il CSS. */
.as-bio-toc ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  counter-reset: bio;
}
.as-bio-toc li {
  counter-increment: bio;
  border-top: 1px solid var(--as-line);
  padding: 0 !important;
  margin: 0 !important;
}
.as-bio-toc li::before { content: none !important; }
.as-bio-toc li:last-child { border-bottom: 1px solid var(--as-line); }
.as-bio-toc a {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  font-size: 16px;
  color: var(--as-ink) !important;
  text-decoration: none !important;
  transition: color .2s, padding .2s;
}
.as-bio-toc a::before {
  content: counter(bio, decimal-leading-zero);
  font-size: 12px;
  color: var(--as-muted);
  font-variant-numeric: tabular-nums;
}
.as-bio-toc a:hover,
.as-bio-toc a.on {
  color: var(--as-terra-ink) !important;
  padding-left: 6px;
}

/* Numero del capitolo nella colonna di sinistra, al posto dell'indice
   (fascia collaborazioni e chiusura) */
.as-bio-num { padding-top: 14px; }

/* ── 24.3 CORPO: capitoli ── */

.as-bio-main .et_pb_module { margin-bottom: 0 !important; }

.as-bio-main .as-bio-head {
  scroll-margin-top: var(--as-bio-top);
  margin-top: clamp(72px, 9vw, 128px) !important;
  margin-bottom: clamp(20px, 3vw, 36px) !important;
}
.as-bio-main .as-bio-head:first-child { margin-top: 0 !important; }

/* Paragrafo con etichetta a sinistra (h6) e testo a destra */
.as-bio-para {
  padding-block: 22px !important;
  border-bottom: 1px solid var(--as-line);
}
.as-bio-para .et_pb_text_inner {
  position: relative;
  padding-left: calc(25% + 24px);
}
.as-bio-para h6 {
  position: absolute;
  left: 0;
  top: 4px;
  width: 25%;
  margin: 0 !important;
  padding: 0 !important;
}
.as-bio-para p + p { margin-top: 12px; }
@media (max-width: 640px) {
  .as-bio-para .et_pb_text_inner { padding-left: 0; }
  .as-bio-para h6 { position: static; width: auto; margin-bottom: 10px !important; }
}

/* Righe anno / titolo / dettaglio (insegnamento, premi, titoli).
   Modulo Testo con un elenco puntato. Ogni voce si scrive così:
   anno in grassetto, poi il titolo, poi il dettaglio in corsivo.
     **2025** Vivaldi International Music Competition *First Prize · Orchestra*
   Il grassetto va nella prima colonna, il corsivo nell'ultima. */
.as-bio-rows ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.as-bio-rows li {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, .8fr);
  gap: 8px 24px;
  align-items: baseline;
  padding: 18px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--as-line);
  font-size: clamp(17px, 0.4vw + 15.5px, 20px) !important;
  line-height: 1.35 !important;
  color: var(--as-ink) !important;
}
.as-bio-rows li::before { content: none !important; }
.as-bio-rows li > strong {
  font-size: 15px;
  font-weight: 400 !important;
  color: var(--as-muted);
  font-variant-numeric: tabular-nums;
}
.as-bio-rows li > em {
  grid-column: 3;
  font-style: normal !important;
  font-size: 15px;
  line-height: 1.45;
  color: var(--as-muted);
}
.as-bio-para.as-bio-rows li:first-child { padding-top: 0 !important; }
.as-bio-para.as-bio-rows li:last-child { border-bottom: 0; padding-bottom: 0 !important; }
@media (max-width: 640px) {
  .as-bio-rows li { grid-template-columns: 56px minmax(0, 1fr); }
  .as-bio-rows li > em { grid-column: 2; }
}

/* ── 24.4 FASCIA TERRACOTTA "HA SUONATO CON" ──
   Sezione a sé, a tutta larghezza: l'indice fisso finisce con la
   sezione dei titoli e sale via prima della fascia.
   Nomi: modulo Testo con classe as-bio-marquee, nomi separati da  ·
   Lo script as-bio.js li trasforma in:
   - desktop: una riga che scorre da bordo a bordo
   - telefono: un nome alla volta che cambia a scatto, come i
     tabelloni degli aeroporti
   Senza script resta il paragrafo fermo. */

.as-bio-band.et_pb_section { overflow: hidden !important; }
.as-bio-band .as-rule .et_pb_text_inner { border-bottom-color: var(--as-ink) !important; }

/* La riga dei nomi esce dalla griglia: tutta la larghezza */
.as-bio-marquee-row.et_pb_row {
  width: 100% !important;
  max-width: none !important;
  padding: clamp(28px, 4vw, 56px) 0 0 !important;
}

/* Paragrafo di partenza (senza script): nomi grandi, a capo */
.as-bio-marquee .et_pb_text_inner > p {
  padding-inline: var(--as-gut) !important;
  font-size: clamp(28px, 3.4vw, 48px) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.03em !important;
  color: var(--as-ink) !important;
}

.as-bio-marquee.is-ready { overflow: hidden; }

/* Desktop: riga che scorre. Il testo è ripetuto due volte,
   scorre di metà e riparte senza stacchi. */
.as-bio-track {
  display: flex;
  width: max-content;
  animation: as-bio-marquee 80s linear infinite;
}
.as-bio-marquee:hover .as-bio-track { animation-play-state: paused; }

.as-bio-track p {
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
  font-size: clamp(34px, 4.4vw, 64px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  color: var(--as-ink) !important;
}

.as-bio-dot {
  font-family: var(--as-serif);
  color: var(--as-sand);
  padding: 0 .35em;
}

@keyframes as-bio-marquee {
  to { transform: translateX(-50%); }
}

/* Telefono: un nome alla volta. Il nome esce ruotando verso l'alto
   e il successivo entra da sotto, come una paletta del tabellone. */
.as-bio-flip { display: none; }

@media (max-width: 767px) {
  /* La riga lunga resta solo per chi usa un lettore di schermo */
  .as-bio-track {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    animation: none;
  }

  .as-bio-flip {
    display: block;
    position: relative;
    height: 1.2em;
    margin-inline: var(--as-gut);
    font-size: clamp(34px, 10vw, 48px);
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--as-ink);
    perspective: 400px;
    overflow: hidden;
  }

  .as-bio-flip-name {
    position: absolute;
    inset: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: rotateX(-90deg);
    transform-origin: 50% 50% -0.6em;
    opacity: 0;
    transition: transform .42s cubic-bezier(.7, 0, .2, 1), opacity .42s steps(2, end);
  }
  .as-bio-flip-name.is-in {
    transform: rotateX(0);
    opacity: 1;
  }
  .as-bio-flip-name.is-out {
    transform: rotateX(90deg);
    opacity: 0;
  }
}

/* ── 24.5 CHIUSURA: pubblicazioni, discografia e press kit ── */

/* Pubblicazioni: moduli Blurb con immagine a sinistra.
   Copertina, titolo, link e testo si cambiano dai campi del Blurb.
   Due affiancati da desktop, uno sotto l'altro da telefono. */
.as-bio-main .as-bio-pub {
  display: inline-block !important;
  vertical-align: top;
  width: calc(50% - 24px) !important;
  margin: 0 24px 24px 0 !important;
}
.as-bio-pub .et_pb_blurb_content {
  display: flex !important;
  align-items: flex-end !important;
  gap: 18px !important;
  max-width: none !important;
  text-align: left !important;
}
.as-bio-pub .et_pb_main_blurb_image {
  display: block !important;
  flex: none !important;
  width: 96px !important;
  margin: 0 !important;
}
.as-bio-pub .et_pb_main_blurb_image img {
  width: 96px !important;
  box-shadow: 0 16px 26px -16px rgba(23, 19, 15, 0.5) !important;
  transition: transform .4s ease !important;
}
.as-bio-pub:hover .et_pb_main_blurb_image img { transform: translateY(-5px) rotate(-1.5deg) !important; }
.as-bio-pub .et_pb_blurb_container { display: block !important; padding: 0 !important; }
.as-bio-pub .et_pb_module_header {
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  padding: 0 0 4px !important;
  color: var(--as-ink) !important;
}
.as-bio-pub .et_pb_module_header a { color: inherit !important; text-decoration: none !important; }
.as-bio-pub:hover .et_pb_module_header a { color: var(--as-terra-ink) !important; }
.as-bio-pub .et_pb_blurb_description p {
  font-size: 15px !important;
  color: var(--as-muted) !important;
  padding: 0 !important;
}
@media (max-width: 640px) {
  .as-bio-main .as-bio-pub { display: block !important; width: 100% !important; margin-right: 0 !important; }
}

/* Discografia e press kit: moduli Call To Action con classe as-press
   (vedi 21.8). Il primo ha as-press-outline e as-bio-end. */
.as-bio-main .as-bio-end { margin-top: clamp(48px, 7vw, 104px) !important; }


/* ==========================================================================
   25. FOOTER · Restiamo in contatto
   Sezione nera del footer (Theme Builder). A sinistra titolo, testo e due
   pulsanti affiancati: newsletter (terracotta, link esterno) e Contattami
   (pillola outline con freccia diagonale, as-btn-arrow). A destra i social
   in righe, stesso ritmo della vecchia lista email. La sottoriga dei credits è a parte.
   ========================================================================== */

/* Pulsante terracotta su fondo scuro: l'hover di default (pieno ink)
   sparirebbe nel nero, qui diventa sabbia */
.as-sec-dark .as-btn-terra.et_pb_button:hover,
.as-sec-dark a.as-btn-terra:hover,
.as-btn-terra.on-dark.et_pb_button:hover {
  background-color: var(--as-sand) !important;
  border-color: var(--as-sand) !important;
  color: var(--as-ink) !important;
}

/* Pulsanti del footer: la colonna diventa una riga flessibile.
   I moduli testo prendono tutta la larghezza, i due pulsanti stanno
   affiancati e centrati in verticale, con lo stesso spazio di
   as-btn-row. Su schermi stretti vanno a capo. */
.as-foot .as-btn-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 16px !important;
}
.as-foot .as-btn-row > .et_pb_module:not(.et_pb_button_module_wrapper) {
  flex: 0 0 100% !important;
}
.as-foot .as-btn-row > .et_pb_text:has(+ .et_pb_button_module_wrapper) {
  margin-bottom: clamp(12px, 1.6vw, 20px) !important;
}
.as-foot .as-btn-row .et_pb_button_module_wrapper,
.as-foot .as-btn-row .et_pb_module.et_pb_button_module_wrapper {
  display: block !important;
  flex: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Social: una riga per piattaforma, icona + nome + freccia */
.as-foot-social-wrap .as-label { margin-bottom: 12px !important; }

.as-sec-dark .as-foot-social a {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding-block: 20px !important;
  border-top: 1px solid var(--as-ink-soft) !important;
  font-size: clamp(17px, 1.6vw, 20px) !important;
  line-height: 1.2 !important;
  color: var(--as-sand) !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}
.as-sec-dark .as-foot-social a:last-child {
  border-bottom: 1px solid var(--as-ink-soft) !important;
}
.as-sec-dark .as-foot-social a:hover { color: var(--as-sun) !important; }

.as-foot-social svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.as-foot-social .as-foot-arrow {
  width: 18px;
  height: 18px;
  margin-left: auto;
  opacity: .55;
  transition: transform .3s ease, opacity .3s ease;
}
.as-foot-social a:hover .as-foot-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* Su tablet e mobile le colonne vanno una sotto l'altra:
   as-row-tight toglie il margine, lo rimettiamo sopra i social */
@media (max-width: 980px) {
  .as-foot-social-wrap { margin-top: clamp(48px, 8vw, 64px) !important; }
}

/* ── 25.1 SOTTORIGA: copyright e credits ─────────────────── */

/* Testo piccolo del footer: stessa misura per copyright (sinistra)
   e credits (destra). Va nella Classe CSS del modulo Testo. */
.as-foot-small,
.as-foot-small p,
.as-foot-small a {
  font-family: var(--as-sans) !important;
  font-size: clamp(12px, 0.2vw + 11.3px, 14px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--as-sand) !important;
  text-decoration: none !important;
}
.as-foot-small p { padding-bottom: 0 !important; margin: 0 !important; }
.as-foot-small a { transition: color .2s ease !important; }
.as-foot-small a:hover { color: var(--as-sun) !important; }

/* Credits: allineati a destra, logo accanto al testo */
.as-foot-credits,
.as-foot-credits .et_pb_text_inner { text-align: right !important; }

.as-foot-credits a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.as-foot-credits img {
  height: 16px !important;
  width: auto !important;
  opacity: .8;
  transition: opacity .2s ease;
}
.as-foot-credits a:hover img { opacity: 1; }

/* Quando le colonne vanno una sotto l'altra: tutto a sinistra */
@media (max-width: 980px) {
  .as-foot-credits,
  .as-foot-credits .et_pb_text_inner { text-align: left !important; }
  .as-foot-credits { margin-top: 8px !important; }
}


/* ==========================================================================
   26. PAGINA DIDATTICA
   Classi usate dal layout didattica-saffirio-divi.json. Direzione "tre porte".
   Sezioni: HERO (nero, titolo + tre porte a righe grandi),
   01 CONSERVATORIO (sabbia-2), 02 LEZIONI PRIVATE (terracotta),
   03 DA SOLO (sabbia: libro in vetrina, YouTube, altre pubblicazioni),
   MASTERCLASS (sabbia-2: l'ultima sezione non è nera, se no si
   confonde con il footer).
   Le porte puntano agli ID delle sezioni (conservatorio, lezioni-private,
   studio-da-solo): as-did-anchor li fa fermare sotto il menu fisso.
   ========================================================================== */

.as-did-anchor.et_pb_section { scroll-margin-top: var(--as-nav-h); }

/* Righe con due colonne allineate in basso (hero e testate di sezione).
   Solo da desktop: sotto i 980px le colonne vanno una sotto l'altra. */
@media (min-width: 981px) {
  .as-did-bottom.et_pb_row {
    display: flex !important;
    align-items: flex-end !important;
  }
}
.as-did-bottom .et_pb_column { margin-bottom: 0 !important; }
.as-did-bottom .et_pb_column > .et_pb_module:last-child { margin-bottom: 0 !important; }
@media (max-width: 980px) {
  .as-did-bottom .et_pb_column:first-child { margin-bottom: 24px !important; }
}

/* In una colonna flex Divi stringe i moduli: tutti a piena larghezza */
.as-did-page .et_pb_column > .et_pb_module {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Etichetta sopra il titolo di sezione */
.as-did-kicker .as-label { margin-bottom: 14px !important; }

/* ── 26.1 HERO: le tre porte ───────────────────────────── */

.as-did-hero .as-lead,
.as-did-hero .as-lead p { color: var(--as-sand) !important; }

.as-did-doors-row.et_pb_row { padding-top: clamp(40px, 5vw, 72px) !important; }

.as-did-doors {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.as-did-doors li {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.as-did-doors li::before { content: none !important; }

/* Ogni porta è un link a tutta larghezza.
   Al passaggio si riempie del colore della fascia dove porta:
   il colore arriva dalla variabile --c scritta sul link. */
.as-did-doors a {
  position: relative;
  display: grid;
  grid-template-columns: 90px minmax(0, 1.2fr) minmax(0, 1fr) 56px;
  gap: 8px 32px;
  align-items: center;
  padding: clamp(22px, 2.6vw, 36px) 0;
  border-top: 1px solid var(--as-ink-soft);
  color: var(--as-sand) !important;
  text-decoration: none !important;
  transition: color .3s ease, padding .3s ease;
}
.as-did-doors li:last-child a { border-bottom: 1px solid var(--as-ink-soft); }

.as-did-doors a::before {
  content: '';
  position: absolute;
  inset: 0 -20px;
  background: var(--c, var(--as-terra));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  z-index: 0;
}
.as-did-doors a > span { position: relative; z-index: 1; }

.as-did-doors .n {
  font-family: var(--as-serif);
  font-style: italic;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1;
  color: var(--as-sun);
  transition: color .3s ease;
}
.as-did-doors .t {
  font-size: clamp(28px, 3.6vw, 54px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}
.as-did-doors .s {
  font-size: clamp(14px, 0.3vw + 13px, 16px);
  line-height: 1.45;
  color: var(--as-sand-soft);
  transition: color .3s ease;
}
.as-did-doors .ar {
  display: grid;
  place-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.as-did-doors .ar svg { width: 20px; height: 20px; }

.as-did-doors a:hover,
.as-did-doors a:focus-visible { color: var(--as-ink) !important; padding-left: 12px; }
.as-did-doors a:hover::before,
.as-did-doors a:focus-visible::before { transform: scaleY(1); }
.as-did-doors a:hover .n,
.as-did-doors a:hover .s,
.as-did-doors a:focus-visible .n,
.as-did-doors a:focus-visible .s { color: var(--as-ink); }

@media (max-width: 980px) {
  .as-did-doors a { grid-template-columns: 48px minmax(0, 1fr) 44px; gap: 6px 16px; }
  .as-did-doors .s { grid-column: 2; grid-row: 2; }
  .as-did-doors .ar { grid-column: 3; grid-row: 1 / 3; width: 44px; height: 44px; }
  .as-did-doors .ar svg { width: 16px; height: 16px; }
  .as-did-doors a:hover { padding-left: 0; }
}

/* ── 26.2 01 CONSERVATORIO ─────────────────────────────── */

/* Incarico attuale: filo scuro sopra, nome a sinistra, corsi a destra */
.as-did-now.et_pb_row {
  border-top: 1px solid var(--as-ink) !important;
  padding-top: 28px !important;
  margin-top: clamp(36px, 4.5vw, 64px) !important;
}
.as-did-now .as-label { margin-bottom: 14px !important; }
.as-did-now .as-btn-text { margin-top: 18px !important; }

/* Corsi e argomenti come chip */
.as-did-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.as-did-chips span {
  border: 1px solid var(--as-line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--as-ink);
  background: var(--as-sand);
}
.as-sec-sand .as-did-chips span { background: transparent; }

/* Linea del tempo: quattro tappe, l'ultima (oggi) in terracotta */
.as-did-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  list-style: none !important;
  margin: clamp(48px, 6vw, 88px) 0 0 !important;
  padding: 0 !important;
}
.as-did-line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 1px;
  background: var(--as-ink);
}
.as-did-line li {
  position: relative;
  padding: 34px 0 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.as-did-line li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--as-sand-2);
  border: 1px solid var(--as-ink);
}
.as-did-line li:last-child::before {
  background: var(--as-terra);
  border-color: var(--as-terra);
}
.as-did-line .y {
  display: block;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--as-ink);
  font-variant-numeric: tabular-nums;
}
.as-did-line .t {
  display: block;
  font-size: 16px;
  line-height: 1.35;
  color: var(--as-ink);
  margin-top: 12px;
}
.as-did-line .d {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--as-muted);
  margin-top: 8px;
}
@media (max-width: 980px) {
  .as-did-line { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 640px) {
  .as-did-line { grid-template-columns: 1fr; }
  .as-did-line::before { left: 7px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .as-did-line li { padding: 0 0 0 36px !important; }
}

/* ── 26.3 02 LEZIONI PRIVATE (fascia terracotta) ───────── */

.as-did-private .as-small { margin-top: clamp(24px, 3vw, 40px) !important; max-width: 40ch; }

/* Le tre cose da scrivere nella mail */
.as-did-steps {
  list-style: none !important;
  margin: 24px 0 28px !important;
  padding: 0 !important;
  counter-reset: step;
}
.as-did-steps li {
  counter-increment: step;
  display: flex;
  gap: 16px;
  padding: 14px 0 !important;
  margin: 0 !important;
  border-top: 1px solid rgba(23, 19, 15, 0.3);
  list-style: none !important;
  font-size: clamp(16px, 0.35vw + 14.7px, 19px);
  line-height: 1.4;
  color: var(--as-ink) !important;
}
.as-did-steps li:last-child { border-bottom: 1px solid rgba(23, 19, 15, 0.3); }
.as-did-steps li::before {
  content: counter(step);
  font-family: var(--as-serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.05;
  min-width: 20px;
}

/* ── 26.4 03 DA SOLO: libro in vetrina ─────────────────── */

@media (min-width: 981px) {
  .as-did-feature.et_pb_row {
    display: flex !important;
    align-items: center !important;
  }
}
.as-did-feature .et_pb_column { margin-bottom: 0 !important; }

.as-did-cover .et_pb_image_wrap,
.as-did-cover img { display: block !important; width: 100% !important; }
.as-did-cover .et_pb_image_wrap { aspect-ratio: 3 / 4; overflow: visible; }
.as-did-cover img { height: 100% !important; object-fit: cover !important; }
@media (max-width: 980px) {
  .as-did-cover { max-width: 320px !important; margin-bottom: 32px !important; }
}

.as-did-feature h3 { margin-bottom: 14px !important; }
.as-did-feature h4 { margin-bottom: 18px !important; }
.as-did-feature p { max-width: 62ch; }
.as-did-feature .as-did-chips { margin-top: 22px; }
.as-did-feature .as-btn-group { margin-top: 28px !important; }

/* Riga sotto: video YouTube e le altre due pubblicazioni */
.as-did-more.et_pb_row {
  border-top: 1px solid var(--as-ink) !important;
  margin-top: clamp(56px, 7vw, 104px) !important;
  padding-top: clamp(28px, 3vw, 40px) !important;
}
.as-did-more .et_pb_video { margin-bottom: 18px !important; }
.as-did-more .as-did-thumb { margin-bottom: 18px !important; }
.as-did-thumb .et_pb_image_wrap,
.as-did-thumb img { display: block !important; width: 100% !important; }
.as-did-thumb .et_pb_image_wrap { aspect-ratio: 1 / 1; overflow: hidden; }
.as-did-thumb img { height: 100% !important; object-fit: cover !important; }

.as-did-card .as-label { margin-bottom: 6px !important; }
.as-did-card h5 { margin: 0 0 6px !important; padding: 0 !important; }
.as-did-card p { font-size: 15px !important; }
.as-did-card .as-btn-text { margin-top: 10px !important; }

@media (max-width: 980px) {
  .as-did-more .et_pb_column { margin-bottom: 40px !important; }
  .as-did-more .et_pb_column:last-child { margin-bottom: 0 !important; }
}

/* ── 26.5 MASTERCLASS (fondo sabbia-2, prima del footer nero) ── */

.as-did-mc-head.et_pb_row { padding-bottom: clamp(36px, 4.5vw, 64px) !important; }

.as-did-poster { margin-bottom: 20px !important; }
.as-did-poster .et_pb_image_wrap,
.as-did-poster img { display: block !important; width: 100% !important; }
.as-did-poster .et_pb_image_wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--as-sand) !important;
}
.as-did-poster img { height: 100% !important; object-fit: cover !important; }

.as-did-mc .as-did-year,
.as-did-mc .as-did-year p {
  font-family: var(--as-serif) !important;
  font-style: italic !important;
  font-size: 30px !important;
  line-height: 1 !important;
  color: var(--as-terra-ink) !important;
  padding: 0 !important;
  margin-bottom: 10px !important;
}
.as-did-mc h5 { margin: 0 0 8px !important; padding: 0 !important; }
.as-did-mc p { font-size: 15px !important; }

@media (max-width: 980px) {
  .as-did-mc .et_pb_column { margin-bottom: 48px !important; }
  .as-did-mc .et_pb_column:last-child { margin-bottom: 0 !important; }
}


/* Colonne una sotto l'altra: as-row-tight toglie il margine,
   qui lo rimettiamo dove serve respiro */
@media (max-width: 980px) {
  .as-did-private .et_pb_column:first-child,
  .as-did-now .et_pb_column:first-child { margin-bottom: 28px !important; }
  .as-did-thumb { max-width: 220px !important; }
}


/* ── 26.6 03 DA SOLO a gradini (ottobre 2026) ──────────────
   Tre righe as-did-step, dal più facile al più impegnativo:
   per iniziare (video YouTube), un percorso (libro + videocorso),
   per approfondire (altre pubblicazioni). Ogni gradino ha un filo
   sopra. Tutte le righe sono divise a metà (1_2,1_2 o 1_2,1_4,1_4):
   la colonna di destra parte sempre allo stesso punto.
   Sostituisce as-did-feature e as-did-more (righe vecchie). */

.as-did-step.et_pb_row {
  border-top: 1px solid var(--as-ink) !important;
  margin-top: clamp(48px, 6vw, 96px) !important;
  padding-top: clamp(28px, 3vw, 44px) !important;
}
/* Il primo gradino è più vicino alla testata */
.as-did-bottom + .as-did-step.et_pb_row { margin-top: clamp(36px, 4.5vw, 64px) !important; }

.as-did-step .et_pb_column { margin-bottom: 0 !important; }

/* Da desktop: visivo e testo centrati in verticale.
   as-did-step-top: allineati in alto (gradino con le card). */
@media (min-width: 981px) {
  .as-did-step.et_pb_row {
    display: flex !important;
    align-items: center !important;
  }
  .as-did-step.as-did-step-top.et_pb_row { align-items: flex-start !important; }
  .as-did-step.et_pb_row::before,
  .as-did-step.et_pb_row::after { display: none !important; }
}

.as-did-step .as-label { margin-bottom: 12px !important; }
.as-did-step h3 { margin-bottom: 14px !important; }
.as-did-step h4 { margin-bottom: 18px !important; }
.as-did-step p { max-width: 58ch; }

/* Pulsanti dei gradini: un po' d'aria sopra (tutti, non uno solo) */
.as-did-step .et_pb_button_module_wrapper { margin-top: 22px !important; }
/* Pulsanti affiancati (as-btn-row sulla colonna): la regola
   ".as-did-page .et_pb_column > .et_pb_module" li allarga al 100%,
   qui tornano larghi quanto il testo */
.as-did-page .as-did-step .as-btn-row > .et_pb_module.et_pb_button_module_wrapper {
  display: inline-block !important;
  width: auto !important;
  margin: 22px 12px 0 0 !important;
}

/* Copertine del libro: fronte e retro affiancati (classe as-did-covers
   sulla colonna). Insieme occupano la mezza colonna, larghi come
   il video del gradino sopra. Restano affiancati anche da telefono. */
.as-did-page .as-did-covers.et_pb_column {
  display: flex !important;
  align-items: flex-start !important;
  gap: clamp(12px, 1.4vw, 20px);
}
.as-did-page .as-did-covers.et_pb_column::before,
.as-did-page .as-did-covers.et_pb_column::after { display: none !important; }
.as-did-page .as-did-covers.et_pb_column > .et_pb_module.as-did-cover {
  flex: 1 1 0 !important;
  min-width: 0;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Argomenti del libro: modulo Testo con un elenco puntato normale,
   ogni voce diventa una chip */
.as-did-tags ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
}
body:not(.et-fb) .as-did-tags ul li,
.as-did-tags ul li {
  list-style: none !important;
  margin: 0 !important;
  border: 1px solid var(--as-line);
  border-radius: 999px;
  padding: 6px 14px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--as-ink) !important;
}
.as-did-tags ul li::before,
.as-did-tags ul li::marker { content: none !important; }

/* Video singolo (as-video.js, parte 2): prima dello script e nel
   builder resta un riquadro scuro 16:9 con il link */
.as-yt .et_pb_text_inner {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--as-ink);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 24px;
}
.as-yt .et_pb_text_inner a { color: var(--as-sand) !important; }
.as-yt.is-ready .et_pb_text_inner {
  display: block;
  aspect-ratio: auto;
  background: none;
  padding: 0;
  text-align: left;
}
.as-yt .as-vp-screen { aspect-ratio: 16 / 9; height: auto; }
.as-yt .as-yt-cap {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--as-muted) !important;
}
.as-yt .as-yt-cap::before {
  content: 'In evidenza · ';
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--as-ink);
}

/* Gradino 3: titolo a sinistra, due card a destra */
.as-did-step .as-did-thumb { margin-bottom: 18px !important; }
.as-did-step .as-did-thumb { max-width: 260px !important; }

/* Una colonna sotto l'altra */
@media (max-width: 980px) {
  .as-did-step .et_pb_column:first-child { margin-bottom: 28px !important; }
  .as-did-step.as-did-step-top .et_pb_column { margin-bottom: 40px !important; }
  .as-did-step.as-did-step-top .et_pb_column:last-child { margin-bottom: 0 !important; }
  .as-did-step .as-did-thumb { max-width: 220px !important; }
  .as-did-page .as-did-covers.et_pb_column { max-width: 560px; }
}


/* ==========================================================================
   27. PAGINA VIDEO
   Classi usate dal layout video-saffirio-divi.json. Una sola sezione
   (sabbia, as-sec-first): testata con as-rule, poi la riga as-vp-row.
   Colonna sinistra: modulo Testo as-vp-stage, lo schermo lo costruisce
   assets/as-video.js. Colonna destra: un Blurb per video (titolo,
   link YouTube, formazione). Il cliente aggiunge, toglie e riordina
   i Blurb dal builder, senza toccare codice.
   ========================================================================== */

/* In una colonna flex Divi stringe i moduli: tutti a piena larghezza */
.as-vp-page .et_pb_column > .et_pb_module {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.as-vp-head.et_pb_row { padding-bottom: clamp(28px, 4vw, 56px) !important; }
.as-vp-row.et_pb_row { padding-top: 0 !important; }

/* ── 27.1 SCHERMO ───────────────────────────────────────── */

/* Prima che parta lo script (e nel builder): riquadro scuro 16:9
   con la nota scritta nel modulo Testo */
.as-vp-stage .et_pb_text_inner {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--as-ink);
  color: var(--as-sand-soft);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 24px;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.as-vp-stage .et_pb_text_inner p { color: var(--as-sand-soft) !important; }
.as-vp-stage.is-ready .et_pb_text_inner { display: block; padding: 0; text-transform: none; letter-spacing: 0; }

@media (min-width: 981px) {
  .as-vp-row .et_pb_column:first-child { position: sticky; top: calc(var(--as-nav-h) + 24px); }
}

.as-vp-screen {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  width: 100%;
  height: 100%;
  background-color: var(--as-ink) !important;
  text-decoration: none !important;
}
.as-vp-screen img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: grayscale(1) contrast(1.05) !important;
  opacity: 0.88 !important;
  transition: filter .5s ease, opacity .5s ease, transform .8s ease !important;
}
.as-vp-screen:hover img {
  filter: grayscale(0) !important;
  opacity: 1 !important;
  transform: scale(1.02);
}
.as-vp-play {
  position: absolute !important;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  width: 84px;
  height: 84px;
  border-radius: 50% !important;
  background-color: var(--as-terra) !important;
  color: var(--as-ink) !important;
  display: grid !important;
  place-items: center !important;
  transition: transform .25s ease, background-color .25s ease !important;
}
.as-vp-play svg { width: 20px; height: 20px; margin-left: 3px; }
.as-vp-screen:hover .as-vp-play {
  transform: scale(1.06);
  background-color: var(--as-sand) !important;
}
.as-vp-screen iframe {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}
.as-vp-screen.is-on .as-vp-play { display: none !important; }

/* ── 27.2 ELENCO: un Blurb per video ────────────────────── */

.as-vp-row .et_pb_column:last-child {
  counter-reset: asvp;
  border-top: 1px solid var(--as-ink);
  border-bottom: 1px solid var(--as-line);
}
.as-vp-row .et_pb_blurb {
  counter-increment: asvp;
  position: relative;
  margin: 0 !important;
  padding: 15px 24px 15px 44px !important;
  border-top: 1px solid var(--as-line);
  cursor: pointer;
  transition: padding .25s ease !important;
}
.as-vp-row .et_pb_blurb:first-child { border-top: 0; }
.as-vp-row .et_pb_blurb::before {
  content: counter(asvp, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 19px;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--as-muted);
  transition: left .25s ease, color .2s ease;
}
.as-vp-row .et_pb_blurb::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 22px;
  border-left: 9px solid var(--as-terra);
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
  opacity: 0;
  transition: opacity .2s ease;
}
.as-vp-row .et_pb_main_blurb_image { display: none !important; }
.as-vp-row .et_pb_blurb_content { max-width: none !important; margin: 0 !important; text-align: left !important; }
.as-vp-row .et_pb_blurb .et_pb_module_header,
.as-vp-row .et_pb_blurb .et_pb_module_header a {
  font-family: var(--as-sans) !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--as-muted) !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: color .2s ease !important;
}
.as-vp-row .et_pb_blurb_description,
.as-vp-row .et_pb_blurb_description p {
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--as-muted) !important;
  margin-top: 3px !important;
  padding: 0 !important;
}

.as-vp-row .et_pb_blurb:hover { padding-left: 50px !important; }
.as-vp-row .et_pb_blurb:hover::before { left: 6px; }
.as-vp-row .et_pb_blurb:hover .et_pb_module_header,
.as-vp-row .et_pb_blurb:hover .et_pb_module_header a,
.as-vp-row .et_pb_blurb.is-active .et_pb_module_header,
.as-vp-row .et_pb_blurb.is-active .et_pb_module_header a { color: var(--as-ink) !important; }
.as-vp-row .et_pb_blurb.is-active .et_pb_blurb_description,
.as-vp-row .et_pb_blurb.is-active .et_pb_blurb_description p { color: var(--as-ink) !important; }
.as-vp-row .et_pb_blurb.is-active::before { color: var(--as-terra-ink); }
.as-vp-row .et_pb_blurb.is-active::after { opacity: 1; }
.as-vp-row .et_pb_blurb:focus-visible { outline: 2px solid var(--as-terra); outline-offset: 2px; }

/* Blurb senza un link YouTube valido: non si vede sul sito */
.as-vp-row .et_pb_blurb.as-vp-off { display: none !important; }

/* ── 27.3 MOBILE: elenco sotto lo schermo ───────────────── */

@media (max-width: 980px) {
  .as-vp-row .et_pb_column:first-child { margin-bottom: 28px !important; }
}
@media (max-width: 640px) {
  .as-vp-play { width: 60px; height: 60px; }
  .as-vp-play svg { width: 16px; height: 16px; }
  .as-vp-row .et_pb_blurb .et_pb_module_header,
  .as-vp-row .et_pb_blurb .et_pb_module_header a { font-size: 17px !important; }
}


/* ==========================================================================
   28. PAGINA CONTATTI
   Una sola sezione sabbia (as-sec-first as-ct-page).
   Riga as-wrap as-ct-row 2_5 + 3_5: a sinistra titolo fermo (as-ct-head),
   a destra il form CF7 in un modulo Testo (as-ct-form).
   Sotto 980px il titolo va sopra il form.
   ========================================================================== */

.as-ct-head .as-label { margin-bottom: clamp(20px, 2.4vw, 32px) !important; }

.as-ct-head h1 { margin: 0 !important; padding: 0 !important; }

.as-ct-note,
.as-ct-head p.as-ct-note {
  margin-top: clamp(20px, 2.4vw, 32px) !important;
  max-width: 36ch;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--as-muted) !important;
}

.as-ct-row .et_pb_module { margin-bottom: 0 !important; }

/* Altri siti: due pillole outline (Conservatorio, No Trio For Cats).
   Stesso modulo Testo messo due volte: as-ct-links-desk nella colonna
   del titolo (solo desktop), as-ct-links-mob sotto il form (solo tablet
   e telefono). Visibilità impostata in Divi (Avanzate > Visibilità). */
.as-ct-links .as-label { margin: 0 0 14px !important; }
.as-ct-links .as-btn-group { gap: 10px !important; }
.as-ct-head + .as-ct-links,
.as-ct-links-desk { margin-top: clamp(32px, 3.4vw, 48px) !important; }
.as-ct-links-mob {
  margin-top: clamp(40px, 8vw, 56px) !important;
  padding-top: clamp(28px, 6vw, 40px) !important;
  border-top: 1px solid var(--as-line) !important;
}

@media (min-width: 981px) {
  .as-ct-row {
    display: flex !important;
    align-items: flex-start;
    gap: clamp(40px, 5vw, 96px);
  }
  /* il clearfix di Divi (::before/::after) conterebbe come colonna vuota */
  .as-ct-row::before,
  .as-ct-row::after { display: none !important; }
  .as-ct-row > .et_pb_column {
    width: auto !important;
    margin-right: 0 !important;
  }
  .as-ct-row > .et_pb_column:first-child { flex: 2 1 0; }
  .as-ct-row > .et_pb_column:last-child { flex: 3 1 0; }

  /* titolo fermo mentre si scende lungo il form */
  .as-ct-row > .et_pb_column:first-child {
    position: sticky;
    top: calc(var(--as-nav-h) + 90px);
  }
}

@media (max-width: 980px) {
  .as-ct-row > .et_pb_column:first-child { margin-bottom: clamp(40px, 8vw, 56px) !important; }
}


/* ==========================================================================
   29. ANIMAZIONI AL CARICAMENTO · .as-in
   Per quello che si vede appena si apre la pagina (prima sezione).
   Le classi frg-* partono con lo scroll e passano da GSAP, che arriva
   dopo il resto della pagina: sopra la piega il titolo comparirebbe,
   sparirebbe e poi rientrerebbe. .as-in è solo CSS, parte subito.
   Va sul modulo (o sulla colonna), una per elemento, più il ritardo.
   Nel Visual Builder è spenta.
   ========================================================================== */

@keyframes as-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes as-in-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.as-in {
  animation: as-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.as-in-fade {
  animation: as-in-fade 1200ms ease-out both;
}

.as-in-d1 { animation-delay: 100ms; }
.as-in-d2 { animation-delay: 200ms; }
.as-in-d3 { animation-delay: 350ms; }
.as-in-d4 { animation-delay: 500ms; }

.et-fb .as-in,
.et-fb .as-in-fade {
  animation: none !important;
}


/* ==========================================================================
   30. PAGINA 404
   Theme Builder > Pagina 404 > corpo personalizzato (404-saffirio-divi.json).
   Una sezione sabbia, una colonna centrata: illustrazione (modulo Codice
   as-404-art, SVG della cassetta), testo (as-404-text) e pulsante.
   La matita oscilla piano come se riavvolgesse il nastro: niente nel
   Visual Builder.
   ========================================================================== */

.as-404-page .as-404-row {
  max-width: 720px !important;
  text-align: center;
}

/* meno aria in cima rispetto alle altre pagine: as-sec-first più corto
   (85px a 390, 105px a 1440 invece di 109 / 155) e riga senza padding sopra */
.as-404-page.as-sec-first.et_pb_section {
  padding-top: calc(var(--as-nav-h) + clamp(16px, 2.5vw, 36px)) !important;
}

.as-404-page .as-404-row.et_pb_row {
  padding-top: 0 !important;
}

.as-404-art {
  margin-bottom: clamp(24px, 3vw, 40px) !important;
}

.as-404-art svg {
  display: block;
  width: min(100%, 380px);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}

/* su telefono la cassetta si stringe */
@media (max-width: 767px) {
  .as-404-art svg { width: min(100%, 240px); }
}

.as-404-text h1 {
  margin: 0 0 0.35em;
  padding-bottom: 0;
}

.as-404-text p {
  max-width: 34ch;
  margin: 0 auto;
  padding-bottom: 0;
  text-wrap: balance;
}

.as-404-page .et_pb_button_module_wrapper {
  margin-top: clamp(28px, 3vw, 40px) !important;
}

/* matita e bobine: ruotano attorno al centro della bobina */
.as-404-pencil,
.as-404-spin {
  transform-origin: 0 0;
  animation: as-404-wind 2.8s ease-in-out infinite alternate;
}

@keyframes as-404-wind {
  from { transform: rotate(-10deg); }
  to   { transform: rotate(14deg); }
}

.et-fb .as-404-pencil,
.et-fb .as-404-spin {
  animation: none !important;
}