/*
 Theme Name: Y.Academy Child
 Template: Divi
*/

/* ==========================================================================
   CHILD THEME — Y.Academy
   WordPress + Divi

   INDICE
   ------
   0.  FONT — @font-face e famiglia base
   1.  VARIABILI GLOBALI — palette, font, transizioni
   2.  DEFAULT DIVI — righe e sezioni
   3.  RESET / BASE
   4.  TIPOGRAFIA — titoli, display, eyebrow
   5.  TIPOGRAFIA — serif (DM Serif Display)
   6.  TIPOGRAFIA — body e utility dimensione/peso
   7.  COLORE TESTO — oro, chiaro, scuro, on-dark
   8.  LAYOUT
   9.  SEZIONI — ritmo chiaro/scuro e card
   10. ACCENTI E DECORAZIONI — highlight, filetto, divisori
   11. BOTTONI — testo con freccia (fr-btn-text / fwd / back + varianti colore)
   12. BOTTONI — filled / outline
   13. BOTTONI — con cerchio (fr-btn-circle--)
   14. BOTTONI — social (fr-btn-social)
   15. BOTTONI — dimensioni e disposizione (btn-large, gruppi affiancati, fr-btn-stack)
   16. COLONNE FLUIDE (formRow)
   17. CONTACT FORM 7
   18. UTILITY — reverse-mobile, frosted glass
   19. NAVBAR — stile WPML
   20. PAGINA — Masterclass (singola)
   21. PAGINA — Libro (singola)
   22. ANIMAZIONI — legenda classi e reduced motion
   23. SEZIONI CON IMMAGINE ANCORATA (y-sec-anchor)
   24. HERO OVERLAY DOPPIO (hero-overlay)
   25. REFERENZE — modulo Testimonianza (yc-ref)
   26. CARD CONTENITORE — yc-card / mc-rivolto
   27. IMMAGINI AFFIANCATE — fr-img-col / fr-img-inline
   ========================================================================== */


/* ==========================================================================
   0. FONT — self-hosted (/wp-content/uploads/et-fonts/)

   Stack Sans Headline — titoli e display (400 light-variant, 600 base)
   Stack Sans Text — body, paragrafi, UI, bottoni (300 / 400 / 500 / 700)
   DM Serif Display — serif "voce": claim editoriali e accenti (regular + italic)

   NOTA: qui si dichiara solo la famiglia BASE (body).
   Titoli e serif sono gestiti nelle sezioni 4 e 5 con !important:
   le dichiarazioni duplicate che stavano qui sono state rimosse.
   ========================================================================== */

body,
body .et_pb_module,
body input,
body textarea,
body button,
body select {
  font-family: 'Stack Sans Text', system-ui, sans-serif;
}

/* Stack Sans Headline */
@font-face {
  font-family: 'Stack Sans Headline';
  src: url('/wp-content/uploads/et-fonts/StackSansHeadline-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stack Sans Headline';
  src: url('/wp-content/uploads/et-fonts/StackSansHeadline-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Stack Sans Text */
@font-face {
  font-family: 'Stack Sans Text';
  src: url('/wp-content/uploads/et-fonts/StackSansText-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stack Sans Text';
  src: url('/wp-content/uploads/et-fonts/StackSansText-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stack Sans Text';
  src: url('/wp-content/uploads/et-fonts/StackSansText-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stack Sans Text';
  src: url('/wp-content/uploads/et-fonts/StackSansText-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* DM Serif Display — serif "voce" (regular + italic) */
@font-face {
  font-family: 'DM Serif Display';
  src: url('/wp-content/uploads/et-fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('/wp-content/uploads/et-fonts/DMSerifDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


/* ==========================================================================
   1. VARIABILI GLOBALI — Y.Academy

   PALETTE
   -------
   Ink        #0f1113   --color-dark        hero, footer, sfondi scuri, titoli su chiaro
   Ink 2      #1c1f22   --color-dark-soft   card scure, blocchi scuri interni
   Ivory      #faf8f4   --color-light       background principale, card chiare
   Mist       #efece6   --color-light-warm  sezioni alternate chiare, divisori
   Gold       #c79a4b   --color-accent      CTA, accenti, dettagli — mai come testo su chiaro
   Gold scuro #9a7433   --color-accent-dk   oro leggibile su fondo chiaro (occhielli, hover)
   Grafite    #3f3b36   --color-body        body text su chiaro
   Cenere     #7a7570   --color-muted       testo secondario, label, caption
   ========================================================================== */

:root {
  --color-dark:        #0f1113;
  --color-dark-soft:   #1c1f22;
  --color-light:       #faf8f4;
  --color-light-warm:  #efece6;
  --color-body:        #3f3b36;
  --color-muted:       #7a7570;
  --color-accent:      #c79a4b;
  --color-accent-dk:   #9a7433;
	--color-white:       #ffffff;

  /* Compatibilità con classi ereditate da Terrawatt:
     accent-1 / accent-2 puntano entrambi all'oro (niente doppio accento). */
  --color-accent-1:    var(--color-accent);
  --color-accent-2:    var(--color-accent-dk);

  --font-primary:      'Stack Sans Text', system-ui, sans-serif;
  --font-secondary:    'Stack Sans Headline', system-ui, sans-serif;
  --font-voice:        'DM Serif Display', Georgia, serif;

  --transition-fast:   350ms;
  --transition-base:   600ms;

  --btn-radius:        100px;
  --btn-padding:       11px 28px;

  /* Animazioni reveal testo / highlight */
  --fr-delay:          500ms;
  --fr-duration:       900ms;
  --fr-text-fallback:  var(--color-light);
  /* Su sfondo chiaro sovrascrivere inline:
     style="--fr-text-fallback: var(--color-dark)" */
}


/* ==========================================================================
   2. DEFAULT DIVI — righe e sezioni (UNIFICATO)

   Copre DUE contesti in un unico blocco:
   - pagine normali:              .et_pb_row / .et_pb_section
   - contenuto via Theme Builder: .et-db #et-boc .et-l .et_pb_row / .et_pb_section
   Il secondo selettore serve perche Divi, dentro il Theme Builder, rigenera
   i default con specificita alta (#et-boc). Lo pareggiamo.

   IMPORTANTE: il padding orizzontale usa proprieta LONGHAND
   (padding-left / padding-right), NON la shorthand. Cosi non tocca mai il
   padding verticale: i valori messi a mano nel Builder e la media query
   desktop di Divi (che usa "padding: 54px 0") restano validi sul verticale
   ma NON possono azzerare i lati.

   Nessun !important: i valori impostati a mano nel Builder vincono comunque.
   ========================================================================== */

/* Righe — larghezza piena, cap a 1600px */
.et_pb_row,
.et-db #et-boc .et-l .et_pb_row {
  width: 100%;
  max-width: 1600px;
}

/* Sezioni — padding orizzontale desktop */
.et_pb_section,
.et-db #et-boc .et-l .et_pb_section {
  padding-left: 100px;
  padding-right: 100px;
}

/* Desktop grande >= 1350px — pareggia la media query di Divi che, con la
   shorthand "padding: 54px 0", azzererebbe i lati sulle pagine Theme Builder.
   Stessa specificita e stesso breakpoint di Divi; caricato dopo, quindi vince
   sui lati. Il verticale (54px) resta gestito da Divi. */
@media only screen and (min-width: 1350px) {
  html body.et-db #et-boc .et-l .et_pb_section {
    padding-left: 100px;
    padding-right: 100px;
  }
}

/* Tablet <= 980px */
@media (max-width: 980px) {
  .et_pb_section,
  .et-db #et-boc .et-l .et_pb_section {
    padding-left: 50px;
    padding-right: 50px;
  }
}

/* Mobile <= 767px */
@media (max-width: 767px) {
  .et_pb_section,
  .et-db #et-boc .et-l .et_pb_section {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* ==========================================================================
   3. RESET / BASE
   ========================================================================== */

.et_pb_with_background {
  overflow: hidden;
  margin-bottom: -1px;
}

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

html { background: var(--color-light); }

h1.entry-title {
  padding-bottom: 0px !important;
}

@media (max-width: 768px) {
  body, #page-container {
    min-height: 100dvh;
  }
}


/* ==========================================================================
   4. TIPOGRAFIA — titoli, display, eyebrow
   Fluid typography con clamp() — scala tra 375px e 1440px.

   Formula:
   vw     = (MAX - MIN) / (1440 - 375) * 100
   offset = MIN - (vw / 100 * 375)

   Scala Y.Academy:
   Display: 40px → 72px   (.fr-display — hero, citazioni)
   H1:      32px → 64px
   H2:      26px → 40px
   H3:      20px → 30px
   H4:      16px → 22px
   H5:      14px → 18px
   H6:      13px → 15px   (eyebrow uppercase)
   Body:    14px → 16px   (base globale, sezione 6)

   Interlinea titoli: 1.2–1.3 · Interlinea testi: 1.8
   ========================================================================== */

/* --- Headings — Stack Sans Headline --- */

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(--font-secondary) !important;
  font-weight: 600 !important;
  line-height: 1.2;
  color: var(--color-dark);
}

h1, .et_pb_module h1 {
  font-size: clamp(32px, 3.00vw + 20.75px, 64px);
  line-height: 1.2;
}
h2, .et_pb_module h2 { font-size: clamp(26px, 1.32vw + 21.06px, 40px); }
h3, .et_pb_module h3 { font-size: clamp(20px, 0.94vw + 16.48px, 30px); line-height: 1.3; }
h4, .et_pb_module h4 { font-size: clamp(16px, 0.56vw + 13.89px, 22px); line-height: 1.3; }
h5, .et_pb_module h5 { font-size: clamp(14px, 0.38vw + 12.59px, 18px); line-height: 1.3; }

/* Display — hero e citazioni grandi (Stack Sans Headline) */
.fr-display,
.et_pb_module .fr-display {
  font-family: var(--font-secondary) !important;
  font-size: clamp(40px, 3.00vw + 28.75px, 72px) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-dark);
}

/* Light — peso 400 sui titoli. Classe da mettere sul modulo testo in Divi. */
body .et_pb_section .fr-light h1,
body .et_pb_section .fr-light h2,
body .et_pb_section .fr-light h3,
body .et_pb_section .fr-light h4,
body .et_pb_section .fr-light h5,
body .et_pb_module.fr-light h1,
body .et_pb_module.fr-light h2,
body .et_pb_module.fr-light h3,
body .et_pb_module.fr-light h4,
body .et_pb_module.fr-light h5,
.fr-light h1, .fr-light h2, .fr-light h3, .fr-light h4, .fr-light h5 {
  font-weight: 400 !important;
}

/* H6 / Eyebrow / occhiello — Stack Sans Text uppercase spaziato */
h6,
.et_pb_module h6 {
  font-family: var(--font-primary) !important;
  font-size: clamp(13px, 0.19vw + 12.30px, 15px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-dk);   /* oro scurito: leggibile su chiaro */
}

/* Eyebrow large — H6 ingrandito */
body .fr-eyebrow-large h6,
body .et_pb_module.fr-eyebrow-large h6,
body h6.fr-eyebrow-large,
body .et_pb_module h6.fr-eyebrow-large {
  font-size: clamp(18px, 0.56vw + 15.89px, 24px) !important;
  letter-spacing: 0.12em;
}


/* ==========================================================================
   5. TIPOGRAFIA — serif (DM Serif Display)

   .serif        = DM Serif Display regular
   .serif-italic = DM Serif Display italic (stessa logica dimensione)
   Il colore è libero (usare gold / light-text / dark-text o il builder).

   Compensazione ottica +15%. DUE casi tecnici distinti:
   A) <span class="serif"> inline dentro un titolo → 1.15em (si aggancia al titolo)
   B) contenitore .serif che AVVOLGE un titolo → clamp del titolo già +15% in
      assoluto (un em si calcolerebbe sul wrapper piccolo e uscirebbe minuscolo).

   NOTA: la lista di selettori è volutamente lunga. Serve a battere per
   specificità le regole !important dei titoli della sezione 4
   (es. "body .et_pb_module h1"). Non accorciare.
   ========================================================================== */

/* --- font-family: sempre, ovunque ci sia .serif o .serif-italic --- */
.serif, .serif-italic,
.et_pb_module .serif, .et_pb_module .serif-italic,
body .serif, body .serif-italic,
body .et_pb_module .serif, body .et_pb_module .serif-italic,
body .et_pb_section .serif, body .et_pb_section .serif-italic,
body h1 .serif, body h2 .serif, body h3 .serif, body h4 .serif, body h5 .serif, 
body h1 .serif-italic, body h2 .serif-italic, body h3 .serif-italic, body h4 .serif-italic, body h5 .serif-italic,
body .et_pb_module h1 .serif, body .et_pb_module h2 .serif,
body .et_pb_module h3 .serif, body .et_pb_module h4 .serif, body .et_pb_module h5 .serif,
body .et_pb_module h1 .serif-italic, body .et_pb_module h2 .serif-italic,
body .et_pb_module h3 .serif-italic, body .et_pb_module h4 .serif-italic, body .et_pb_module h5 .serif-italic,
body .serif h1, body .serif h2, body .serif h3, body .serif h4, body .serif h5,
body .serif-italic h1, body .serif-italic h2, body .serif-italic h3, body .serif-italic h4, body .serif-italic h5,
body .et_pb_module .serif h1, body .et_pb_module .serif h2,
body .et_pb_module .serif h3, body .et_pb_module .serif h4, body .et_pb_module .serif h5,
body .et_pb_module .serif-italic h1, body .et_pb_module .serif-italic h2,
body .et_pb_module .serif-italic h3, body .et_pb_module .serif-italic h4, body .et_pb_module .serif-italic h5,
body .et_pb_section .serif h1, body .et_pb_section .serif h2,
body .et_pb_section .serif h3, body .et_pb_section .serif h4, body .et_pb_section .serif h5,
body .et_pb_section .serif-italic h1, body .et_pb_section .serif-italic h2,
body .et_pb_section .serif-italic h3, body .et_pb_section .serif-italic h4, body .et_pb_section .serif-italic h5 {
  font-family: var(--font-voice) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* --- Stile: regular per .serif, italic per .serif-italic --- */
.serif, .et_pb_module .serif,
body .serif h1, body .serif h2, body .serif h3, body .serif h4, body .serif h5,
body .et_pb_module .serif h1, body .et_pb_module .serif h2,
body .et_pb_module .serif h3, body .et_pb_module .serif h4, body .et_pb_module .serif h5 {
  font-style: normal !important;
}
.serif-italic, .et_pb_module .serif-italic,
body .serif-italic h1, body .serif-italic h2, body .serif-italic h3, body .serif-italic h4, body .serif-italic h5,
body .et_pb_module .serif-italic h1, body .et_pb_module .serif-italic h2,
body .et_pb_module .serif-italic h3, body .et_pb_module .serif-italic h4, body .et_pb_module .serif-italic h5 {
  font-style: italic !important;
}

/* --- CASO A: span/elemento .serif inline dentro un titolo → 1.15em --- */
body h1 .serif, body h2 .serif, body h3 .serif, body h4 .serif, body h5 .serif,
body h1 .serif-italic, body h2 .serif-italic, body h3 .serif-italic, body h4 .serif-italic, body h5 .serif-italic,
body .et_pb_module h1 .serif, body .et_pb_module h2 .serif,
body .et_pb_module h3 .serif, body .et_pb_module h4 .serif, body .et_pb_module h5 .serif,
body .et_pb_module h1 .serif-italic, body .et_pb_module h2 .serif-italic,
body .et_pb_module h3 .serif-italic, body .et_pb_module h4 .serif-italic, body .et_pb_module h5 .serif-italic,
.serif > span, .et_pb_module .serif > span,
.serif-italic > span, .et_pb_module .serif-italic > span {
  font-size: 1.15em !important;
}

/* --- CASO A bis: .serif su un modulo di solo testo → 1.15em sul paragrafo --- */
body:not(.et-fb) .et_pb_module.serif p,
body:not(.et-fb) .et_pb_text.serif p,
body:not(.et-fb) .et_pb_module.serif-italic p,
body:not(.et-fb) .et_pb_text.serif-italic p {
  font-size: 1.15em !important;
}

/* --- CASO B: titolo AVVOLTO da un contenitore .serif → clamp +15% --- */
body .serif h1, body .et_pb_module .serif h1, body .et_pb_section .serif h1,
body .serif-italic h1, body .et_pb_module .serif-italic h1, body .et_pb_section .serif-italic h1 {
  font-size: clamp(36.8px, 3.46vw + 23.84px, 73.6px) !important;
}
body .serif h2, body .et_pb_module .serif h2, body .et_pb_section .serif h2,
body .serif-italic h2, body .et_pb_module .serif-italic h2, body .et_pb_section .serif-italic h2 {
  font-size: clamp(29.9px, 1.51vw + 24.23px, 46.0px) !important;
}
body .serif h3, body .et_pb_module .serif h3, body .et_pb_section .serif h3,
body .serif-italic h3, body .et_pb_module .serif-italic h3, body .et_pb_section .serif-italic h3 {
  font-size: clamp(23.0px, 1.08vw + 18.95px, 34.5px) !important;
}
body .serif h4, body .et_pb_module .serif h4, body .et_pb_section .serif h4,
body .serif-italic h4, body .et_pb_module .serif-italic h4, body .et_pb_section .serif-italic h4 {
  font-size: clamp(18.4px, 0.65vw + 15.97px, 25.3px) !important;
}
body .serif h5, body .et_pb_module .serif h5, body .et_pb_section .serif h5,
body .serif-italic h5, body .et_pb_module .serif-italic h5, body .et_pb_section .serif-italic h5 {
  font-size: clamp(16.1px, 0.43vw + 14.48px, 20.7px) !important;
}

/* LEGACY — scorciatoia per "serif scuro". Il colore serif ora è libero:
   preferire .dark-text. Resta per i moduli già montati. */
.serif-on-light,
.et_pb_module .serif-on-light {
  color: var(--color-dark) !important;
}

/* --- H6 SEMPRE Stack Sans Text ---
   L'occhiello resta sans anche se il modulo Divi ha la classe .serif
   (caso frequente: .serif messa sull'intero modulo che contiene l'H6).
   Caricata dopo il blocco serif, quindi vince a parità di specificità. */
body h6,
body .et_pb_module h6,
body h6.serif, body h6.serif-italic,
body .et_pb_module h6.serif, body .et_pb_module h6.serif-italic,
body .serif h6, body .serif-italic h6,
body .et_pb_module .serif h6, body .et_pb_module .serif-italic h6,
body .et_pb_section .serif h6, body .et_pb_section .serif-italic h6 {
  font-family: var(--font-primary) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}



/* ==========================================================================
   6. TIPOGRAFIA — body e utility dimensione/peso

   font-family e color sempre dichiarati per battere il default #666666 di Divi.
   font-size e line-height del body base senza !important, così il builder
   può sovrascrivere.
   ========================================================================== */

body:not(.et-fb) .et_pb_module p,
body:not(.et-fb) .et_pb_text p,
body:not(.et-fb) .et_pb_text_inner p,
body:not(.et-fb) .et_pb_blurb p,
body:not(.et-fb) .et_pb_cta p,
body:not(.et-fb) .project p,
body:not(.et-fb) ul,
body:not(.et-fb) ul li {
  font-family: var(--font-primary) !important;
  font-weight: 300 !important;
  font-size: clamp(14px, 0.19vw + 13.30px, 16px);
  line-height: 1.8;
  color: var(--color-body) !important;
}

/* --- Dimensione ---
   Combinabili con .light-text / .dark-text (sezione 7) per il colore.
   Uso: class="fr-text-base light-text" sul modulo testo in Divi.

   fr-text-small  11px → 14px
   fr-text-base   16px → 20px
   fr-text-large  18px → 22px
   -------------------------------------------------------- */

body:not(.et-fb) .fr-text-small p,
body:not(.et-fb) .et_pb_module .fr-text-small p {
  font-family: var(--font-primary) !important;
  font-size: clamp(11px, 0.47vw + 10.24px, 14px) !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: var(--color-muted) !important;
}

body:not(.et-fb) .fr-text-base p,
body:not(.et-fb) .et_pb_module .fr-text-base p {
  font-family: var(--font-primary) !important;
  font-size: clamp(16px, 0.38vw + 14.59px, 20px) !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
  color: var(--color-body) !important;
}

body:not(.et-fb) .fr-text-large p,
body:not(.et-fb) .et_pb_module .fr-text-large p {
  font-family: var(--font-primary) !important;
  font-size: clamp(18px, 0.38vw + 16.59px, 22px) !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: var(--color-body) !important;
}

/* --- Peso ---
   Il body di default è 300 (light). Queste sovrascrivono il peso sui P.
   Uso: class="fr-text-regular" oppure "fr-text-large fr-text-bold"
   -------------------------------------------------------- */
body:not(.et-fb) .fr-text-regular p,
body:not(.et-fb) .et_pb_module .fr-text-regular p {
  font-weight: 400 !important;
}
body:not(.et-fb) .fr-text-bold p,
body:not(.et-fb) .et_pb_module .fr-text-bold p {
  font-weight: 700 !important;
}


/* ==========================================================================
   7. COLORE TESTO — oro, chiaro, scuro, on-dark
   Caricate DOPO le classi dimensione (sezione 6) così ne sovrascrivono
   il colore mantenendo la dimensione.
   ========================================================================== */

/* Avorio */
body:not(.et-fb) .light-text p,
body:not(.et-fb) .et_pb_module .light-text p {
  color: var(--color-light) !important;
}

/* Ink */
body:not(.et-fb) .dark-text p,
body:not(.et-fb) .et_pb_module .dark-text p {
  color: var(--color-dark) !important;
}

/* --- Oro ---
   .gold colora di oro il testo. Funziona su elemento diretto (span, h*, p),
   sui paragrafi di un modulo, su uno <span> dentro un titolo, e batte anche
   i colori di .on-dark. Su fondo chiaro l'oro pieno è poco leggibile per testo
   piccolo: preferire corpi grandi (claim, numeri) o usare .gold-dark. */
body:not(.et-fb) .gold,
body:not(.et-fb) .et_pb_module .gold,
body:not(.et-fb) .gold p,
body:not(.et-fb) .et_pb_module .gold p,
body:not(.et-fb) .on-dark .gold,
body:not(.et-fb) .on-dark .et_pb_module .gold,
/* span/elemento .gold dentro un heading (su chiaro) */
body:not(.et-fb) h1 .gold, body:not(.et-fb) h2 .gold,
body:not(.et-fb) h3 .gold, body:not(.et-fb) h4 .gold, body:not(.et-fb) h5 .gold,
body:not(.et-fb) .et_pb_module h1 .gold, body:not(.et-fb) .et_pb_module h2 .gold,
body:not(.et-fb) .et_pb_module h3 .gold, body:not(.et-fb) .et_pb_module h4 .gold,
body:not(.et-fb) .et_pb_module h5 .gold,
/* span/elemento .gold dentro un heading (dentro on-dark) */
body:not(.et-fb) .on-dark h1 .gold, body:not(.et-fb) .on-dark h2 .gold,
body:not(.et-fb) .on-dark h3 .gold, body:not(.et-fb) .on-dark h4 .gold,
body:not(.et-fb) .on-dark h5 .gold,
body:not(.et-fb) .on-dark .et_pb_module h1 .gold,
body:not(.et-fb) .on-dark .et_pb_module h2 .gold,
body:not(.et-fb) .on-dark .et_pb_module h3 .gold,
body:not(.et-fb) .on-dark .et_pb_module h4 .gold,
body:not(.et-fb) .on-dark .et_pb_module h5 .gold {
  color: var(--color-accent) !important;
}

/* Variante oro scuro, leggibile su fondo chiaro */
body:not(.et-fb) .gold-dark,
body:not(.et-fb) .et_pb_module .gold-dark,
body:not(.et-fb) .gold-dark p,
body:not(.et-fb) .et_pb_module .gold-dark p,
body:not(.et-fb) h1 .gold-dark, body:not(.et-fb) h2 .gold-dark,
body:not(.et-fb) h3 .gold-dark, body:not(.et-fb) h4 .gold-dark,
body:not(.et-fb) h5 .gold-dark,
body:not(.et-fb) .et_pb_module h1 .gold-dark,
body:not(.et-fb) .et_pb_module h2 .gold-dark,
body:not(.et-fb) .et_pb_module h3 .gold-dark,
body:not(.et-fb) .et_pb_module h4 .gold-dark,
body:not(.et-fb) .et_pb_module h5 .gold-dark {
  color: var(--color-accent-dk) !important;
}

/* LEGACY — stesse funzioni di .gold / .gold-dark ma senza copertura su
   heading e paragrafi di modulo. Per il nuovo markup usare .gold / .gold-dark. */
.fr-accent    { color: var(--color-accent) !important; }
.fr-accent-dk { color: var(--color-accent-dk) !important; }

/* --- Testo su sfondo scuro ---
   Prefisso body:not(.et-fb) per battere la specificità delle regole colore
   di titoli e paragrafi delle sezioni 4 e 6. */
body:not(.et-fb) .on-dark h1, body:not(.et-fb) .on-dark h2,
body:not(.et-fb) .on-dark h3, body:not(.et-fb) .on-dark h4,
body:not(.et-fb) .on-dark h5,
body:not(.et-fb) .on-dark .et_pb_module h1,
body:not(.et-fb) .on-dark .et_pb_module h2,
body:not(.et-fb) .on-dark .et_pb_module h3,
body:not(.et-fb) .on-dark .et_pb_module h4,
body:not(.et-fb) .on-dark .et_pb_module h5 {
  color: var(--color-light) !important;
}
body:not(.et-fb) .on-dark p,
body:not(.et-fb) .on-dark .et_pb_module p,
body:not(.et-fb) .on-dark ul,
body:not(.et-fb) .on-dark ul li {
  color: var(--color-light) !important;
}
body:not(.et-fb) .on-dark h6,
body:not(.et-fb) .on-dark .et_pb_module h6 {
  color: var(--color-accent) !important;   /* oro pieno: leggibile su scuro */
}
/* Nota: il serif non forza colore. Dentro .on-dark eredita l'avorio come gli
   altri testi; per l'oro usare la classe .gold sull'elemento. */


/* ==========================================================================
   8. LAYOUT
   ========================================================================== */

.sezione-fp {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.et_pb_row {
  min-height: auto !important;
}

.fr-row-full {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
}

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

/* Utility — inverte l'ordine delle colonne su mobile */
@media (max-width: 767px) {
  .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; }
}


/* ==========================================================================
   9. SEZIONI — ritmo chiaro/scuro e card
   ========================================================================== */

.fr-sec-dark,
.fr-sec-dark.et_pb_section {
  background-color: var(--color-dark) !important;
}
.fr-sec-dark-soft,
.fr-sec-dark-soft.et_pb_section {
  background-color: var(--color-dark-soft) !important;
}
.fr-sec-light,
.fr-sec-light.et_pb_section {
  background-color: var(--color-light) !important;
}
.fr-sec-mist,
.fr-sec-mist.et_pb_section {
  background-color: var(--color-light-warm) !important;
}

/* Card / riquadri su fondo Ink 2 */
.fr-card {
  background-color: var(--color-dark-soft) !important;
  border-radius: 16px !important;
  padding: 28px !important;
}
.fr-card--light {
  background-color: var(--color-light) !important;
  border: 1px solid var(--color-light-warm) !important;
}


/* ==========================================================================
   10. ACCENTI E DECORAZIONI — highlight, filetto, divisori
   ========================================================================== */

/* Highlight pieno — testo scuro su oro */
.fr-hl {
  padding: 0 4px;
  margin: 0 -4px;
  background-color: var(--color-accent);
  color: var(--color-dark);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Highlight link — hover scurisce l'oro */
.fr-hl-link {
  padding: 0 4px;
  margin: 0 -4px;
  background-color: var(--color-accent);
  color: var(--color-dark);
  text-decoration: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color var(--transition-fast) ease;
}
.fr-hl-link:hover {
  background-color: var(--color-accent-dk);
  color: var(--color-light);
}

/* Filetto oro decorativo */
.fr-rule::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background-color: var(--color-accent);
  margin-top: 16px;
}
.fr-rule.on-dark::after { background-color: var(--color-accent); }

/* Divisori disciplina — linea verticale con diamante centrale (classe sulla RIGA) */
.fr-disc-row {
  position: relative;
}

/* forza la riga ad avere un'altezza piena e le colonne ad allungarsi */
.fr-disc-row.et_pb_row {
  display: flex;
  align-items: stretch;
}

.fr-disc-row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-accent);
  opacity: .55;
  transform: translateX(-50%);
  z-index: 1;
}

.fr-disc-row::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 11px;
  height: 11px;
  background: var(--color-accent);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 2;
}

@media (max-width: 980px) {
  .fr-disc-row::before,
  .fr-disc-row::after { display: none; }
}


/* ==========================================================================
   11. BOTTONI — testo con freccia

   BASE
   .fr-btn-text       freccia diagonale ↗ (16 → 20px)
   .fr-btn-text-fwd   freccia diagonale ↗ (12 → 14px, allineata ai pill)
   .fr-btn-text-back  chevron indietro ‹

   DIMENSIONI
   .fr-btn-text-small / .fr-btn-text-large

   COLORE (da abbinare a una delle tre base)
   (nessuna)          grafite  → oro scuro
   .on-dark           avorio   → oro
   .btn-gold-ink      oro      → ink       (fondi chiari o medi)
   .btn-gold-ivory    oro      → avorio    (fondi scuri)
   .lb-btn-gold       alias storico di .btn-gold-ivory, nato sulla pagina Libro
   .btn-white-ivory   bianco   → avorio    (fondi scuri)
   ========================================================================== */

.fr-btn-text.et_pb_button,
.fr-btn-text-fwd.et_pb_button,
.fr-btn-text-back.et_pb_button {
  font-family: var(--font-primary) !important;
  font-size: clamp(16px, 0.38vw + 14.59px, 20px) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--color-body) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  padding-right: 1.4em !important;
  position: relative !important;
  transition: color var(--transition-fast) ease !important;
}

.fr-btn-text.et_pb_button:hover,
.fr-btn-text-fwd.et_pb_button:hover,
.fr-btn-text-back.et_pb_button:hover {
  color: var(--color-accent-dk) !important;
}

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

/* fwd: dimensione allineata ai bottoni pill (12→14px), più piccola degli
   altri bottoni testo (16→20px). padding-right più ampio per staccare la freccia. */
.fr-btn-text-fwd.et_pb_button {
  font-size: clamp(12px, 0.19vw + 11.30px, 14px) !important;
  padding-right: 1.8em !important;
}

/* --- Dimensioni --- */
.fr-btn-text-small.fr-btn-text.et_pb_button,
.fr-btn-text-small.fr-btn-text-fwd.et_pb_button,
.fr-btn-text-small.fr-btn-text-back.et_pb_button {
  font-size: clamp(12px, 0.47vw + 10.24px, 17px) !important;
}

.fr-btn-text-large.fr-btn-text.et_pb_button,
.fr-btn-text-large.fr-btn-text-fwd.et_pb_button,
.fr-btn-text-large.fr-btn-text-back.et_pb_button {
  font-size: clamp(20px, 0.56vw + 17.89px, 26px) !important;
}

/* --- Freccia diagonale (fr-btn-text + fr-btn-text-fwd) ---
   Regola unica: fra le due cambia solo la dimensione, gestita subito sotto. --- */
.fr-btn-text.et_pb_button::after,
.fr-btn-text-fwd.et_pb_button::after {
  content: '' !important;
  font-family: initial !important;
  display: block !important;
  width: 0.65em !important;
  height: 0.65em !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='%233f3b36' 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 var(--transition-fast) ease, transform var(--transition-fast) ease !important;
}

/* fwd: freccia più piccola e staccata */
.fr-btn-text-fwd.et_pb_button::after {
  width: 0.5em !important;
  height: 0.5em !important;
}

.fr-btn-text.et_pb_button:hover::after,
.fr-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='%239a7433' 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;
}

/* --- Chevron indietro (fr-btn-text-back) --- */
.fr-btn-text-back.et_pb_button {
  padding-right: 0 !important;
  padding-left: 1.4em !important;
}
.fr-btn-text-back.et_pb_button::after {
  content: '' !important;
  font-family: initial !important;
  display: block !important;
  width: 0.65em !important;
  height: 0.65em !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='%233f3b36' 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 var(--transition-fast) ease, transform var(--transition-fast) ease !important;
}
.fr-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='%239a7433' 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(-3px) !important;
}

/* --- VARIANTE .on-dark: avorio → oro --- */
.fr-btn-text.on-dark.et_pb_button,
.fr-btn-text-fwd.on-dark.et_pb_button,
.fr-btn-text-back.on-dark.et_pb_button {
  color: var(--color-light) !important;
}
.fr-btn-text.on-dark.et_pb_button:hover,
.fr-btn-text-fwd.on-dark.et_pb_button:hover,
.fr-btn-text-back.on-dark.et_pb_button:hover {
  color: var(--color-accent) !important;
}
/* freccia diagonale avorio */
.fr-btn-text.on-dark.et_pb_button::after,
.fr-btn-text-fwd.on-dark.et_pb_button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf8f4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
}
.fr-btn-text.on-dark.et_pb_button:hover::after,
.fr-btn-text-fwd.on-dark.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='%23c79a4b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
}
/* chevron avorio */
.fr-btn-text-back.on-dark.et_pb_button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23faf8f4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}
.fr-btn-text-back.on-dark.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='%23c79a4b' 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(-3px) !important;
}

/* --- BASE ORO condivisa da .btn-gold-ink, .btn-gold-ivory e .lb-btn-gold ---
   Le varianti partono tutte dall'oro: qui il colore e la freccia base,
   sotto solo gli hover che le differenziano.
   .lb-btn-gold è l'alias storico di .btn-gold-ivory: stessa resa. */
.btn-gold-ink.fr-btn-text.et_pb_button,
.btn-gold-ink.fr-btn-text-fwd.et_pb_button,
.btn-gold-ink.fr-btn-text-back.et_pb_button,
.btn-gold-ivory.fr-btn-text.et_pb_button,
.btn-gold-ivory.fr-btn-text-fwd.et_pb_button,
.btn-gold-ivory.fr-btn-text-back.et_pb_button,
.lb-btn-gold.fr-btn-text.et_pb_button,
.lb-btn-gold.fr-btn-text-fwd.et_pb_button,
.lb-btn-gold.fr-btn-text-back.et_pb_button {
  color: var(--color-accent) !important;
}
/* freccia diagonale oro */
.btn-gold-ink.fr-btn-text.et_pb_button::after,
.btn-gold-ink.fr-btn-text-fwd.et_pb_button::after,
.btn-gold-ivory.fr-btn-text.et_pb_button::after,
.btn-gold-ivory.fr-btn-text-fwd.et_pb_button::after,
.lb-btn-gold.fr-btn-text.et_pb_button::after,
.lb-btn-gold.fr-btn-text-fwd.et_pb_button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c79a4b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
}
/* chevron oro */
.btn-gold-ink.fr-btn-text-back.et_pb_button::after,
.btn-gold-ivory.fr-btn-text-back.et_pb_button::after,
.lb-btn-gold.fr-btn-text-back.et_pb_button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c79a4b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}

/* --- VARIANTE .btn-gold-ink: hover INK (per fondi chiari o medi) --- */
.btn-gold-ink.fr-btn-text.et_pb_button:hover,
.btn-gold-ink.fr-btn-text-fwd.et_pb_button:hover,
.btn-gold-ink.fr-btn-text-back.et_pb_button:hover {
  color: var(--color-dark) !important;
}
.btn-gold-ink.fr-btn-text.et_pb_button:hover::after,
.btn-gold-ink.fr-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='%230f1113' 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;
}
.btn-gold-ink.fr-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='%230f1113' 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(-3px) !important;
}

/* --- VARIANTE .btn-gold-ivory (alias .lb-btn-gold): hover AVORIO (fondi scuri) --- */
.btn-gold-ivory.fr-btn-text.et_pb_button:hover,
.btn-gold-ivory.fr-btn-text-fwd.et_pb_button:hover,
.btn-gold-ivory.fr-btn-text-back.et_pb_button:hover,
.lb-btn-gold.fr-btn-text.et_pb_button:hover,
.lb-btn-gold.fr-btn-text-fwd.et_pb_button:hover,
.lb-btn-gold.fr-btn-text-back.et_pb_button:hover {
  color: var(--color-light) !important;
}
.btn-gold-ivory.fr-btn-text.et_pb_button:hover::after,
.btn-gold-ivory.fr-btn-text-fwd.et_pb_button:hover::after,
.lb-btn-gold.fr-btn-text.et_pb_button:hover::after,
.lb-btn-gold.fr-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='%23faf8f4' 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;
}
.btn-gold-ivory.fr-btn-text-back.et_pb_button:hover::after,
.lb-btn-gold.fr-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='%23faf8f4' 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(-3px) !important;
}

/* --- VARIANTE .btn-white-ivory: bianco puro → avorio (fondi scuri) ---
   Lo scarto di luminosita fra #ffffff e #faf8f4 e minimo: sul testo il
   cambio si percepisce appena, il feedback dell'hover lo da soprattutto
   lo spostamento della freccia. */
.btn-white-ivory.fr-btn-text.et_pb_button,
.btn-white-ivory.fr-btn-text-fwd.et_pb_button,
.btn-white-ivory.fr-btn-text-back.et_pb_button {
  color: var(--color-white) !important;
}
/* freccia diagonale bianca */
.btn-white-ivory.fr-btn-text.et_pb_button::after,
.btn-white-ivory.fr-btn-text-fwd.et_pb_button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H7M17 7V17'/%3E%3C/svg%3E") !important;
}
/* chevron bianco */
.btn-white-ivory.fr-btn-text-back.et_pb_button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}
/* hover avorio */
.btn-white-ivory.fr-btn-text.et_pb_button:hover,
.btn-white-ivory.fr-btn-text-fwd.et_pb_button:hover,
.btn-white-ivory.fr-btn-text-back.et_pb_button:hover {
  color: var(--color-light) !important;
}
.btn-white-ivory.fr-btn-text.et_pb_button:hover::after,
.btn-white-ivory.fr-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='%23faf8f4' 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;
}
.btn-white-ivory.fr-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='%23faf8f4' 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(-3px) !important;
}

/* ==========================================================================
   12. BOTTONI — filled / outline
   .fr-btn-primary        oro → oro scuro
   .fr-btn-dark           ink → avorio
   .fr-btn-light          avorio → oro
   .fr-btn-ink            ink → ink 2
   .fr-btn-white          bianco → mist
   .fr-btn-outline-light  su fondi scuri
   .fr-btn-outline-dark   su fondi chiari
   .fr-btn-outline-gold   bordo oro

   SCATOLA UNIFORME: tutti hanno bordo 1.5px, trasparente sulle piene e
   colorato sulle outline. Serve perche il bordo si somma alle dimensioni:
   senza questo, un bottone con bordo risulta piu grande di uno senza, e
   affiancandoli non si allineano. Non rimettere "border: none" sulle piene.
   ========================================================================== */

.fr-btn-primary.et_pb_button,
.fr-btn-dark.et_pb_button,
.fr-btn-light.et_pb_button,
.fr-btn-outline-light.et_pb_button,
.fr-btn-outline-dark.et_pb_button,
.fr-btn-outline-gold.et_pb_button,
.fr-btn-ink.et_pb_button,
.fr-btn-white.et_pb_button {
  font-family: var(--font-primary) !important;
  font-size: clamp(12px, 0.19vw + 11.30px, 14px) !important;
  font-weight: 300 !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--btn-padding) !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

/* niente freccia nativa Divi */
.fr-btn-primary.et_pb_button::before,
.fr-btn-primary.et_pb_button::after,
.fr-btn-dark.et_pb_button::before,
.fr-btn-dark.et_pb_button::after,
.fr-btn-light.et_pb_button::before,
.fr-btn-light.et_pb_button::after,
.fr-btn-outline-light.et_pb_button::before,
.fr-btn-outline-light.et_pb_button::after,
.fr-btn-outline-dark.et_pb_button::before,
.fr-btn-outline-dark.et_pb_button::after,
.fr-btn-outline-gold.et_pb_button::before,
.fr-btn-outline-gold.et_pb_button::after,
.fr-btn-ink.et_pb_button::before,
.fr-btn-ink.et_pb_button::after,
.fr-btn-white.et_pb_button::before,
.fr-btn-white.et_pb_button::after {
  display: none !important;
}

@media (max-width: 480px) {
  .fr-btn-primary.et_pb_button,
  .fr-btn-dark.et_pb_button,
  .fr-btn-light.et_pb_button,
  .fr-btn-ink.et_pb_button,
  .fr-btn-white.et_pb_button,
  .fr-btn-outline-light.et_pb_button,
  .fr-btn-outline-dark.et_pb_button,
  .fr-btn-outline-gold.et_pb_button {
    padding: 10px 20px !important;
  }
}

/* Primary: Oro → Oro scuro */
.fr-btn-primary.et_pb_button {
  background-color: var(--color-accent) !important;
  color: var(--color-dark) !important;
  border-color: transparent !important;
  transition:
    background-color var(--transition-fast) ease,
    color var(--transition-fast) ease !important;
}
.fr-btn-primary.et_pb_button:hover {
  background-color: var(--color-accent-dk) !important;
  color: var(--color-light) !important;
  border-color: transparent !important;
}

/* Dark: Ink → Ivory */
.fr-btn-dark.et_pb_button {
  background-color: var(--color-dark) !important;
  color: var(--color-light) !important;
  border-color: transparent !important;
  transition:
    background-color var(--transition-fast) ease,
    color var(--transition-fast) ease !important;
}
.fr-btn-dark.et_pb_button:hover {
  background-color: var(--color-light) !important;
  color: var(--color-dark) !important;
  border-color: transparent !important;
}

/* Light: Ivory → Oro */
.fr-btn-light.et_pb_button {
  background-color: var(--color-light) !important;
  color: var(--color-dark) !important;
  border-color: rgba(15, 17, 19, 0.12) !important;
  transition:
    background-color var(--transition-fast) ease,
    color var(--transition-fast) ease,
    border-color var(--transition-fast) ease !important;
}
.fr-btn-light.et_pb_button:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-dark) !important;
  border-color: var(--color-accent) !important;
}

/* Ink: Ink → Ink 2 (fondo scuro, testo avorio fisso) */
.fr-btn-ink.et_pb_button {
  background-color: var(--color-dark) !important;
  color: var(--color-light) !important;
  border-color: transparent !important;
  transition:
    background-color var(--transition-fast) ease,
    color var(--transition-fast) ease !important;
}
.fr-btn-ink.et_pb_button:hover {
  background-color: var(--color-dark-soft) !important;
  color: var(--color-light) !important;
  border-color: transparent !important;
}

/* White: bianco puro → Mist (testo ink fisso) */
.fr-btn-white.et_pb_button {
  background-color: var(--color-white) !important;
  color: var(--color-dark) !important;
  border-color: transparent !important;
  transition:
    background-color var(--transition-fast) ease,
    color var(--transition-fast) ease !important;
}
.fr-btn-white.et_pb_button:hover {
  background-color: var(--color-light-warm) !important;
  color: var(--color-dark) !important;
  border-color: transparent !important;
}

/* Outline light — su sfondi scuri */
.fr-btn-outline-light.et_pb_button {
  background-color: transparent !important;
  color: var(--color-light) !important;
  border-color: var(--color-light) !important;
  transition:
    background-color var(--transition-fast) ease,
    color var(--transition-fast) ease !important;
}
.fr-btn-outline-light.et_pb_button:hover {
  background-color: var(--color-light) !important;
  color: var(--color-dark) !important;
}

/* Outline dark — su sfondi chiari */
.fr-btn-outline-dark.et_pb_button {
  background-color: transparent !important;
  color: var(--color-dark) !important;
  border-color: var(--color-dark) !important;
  transition:
    background-color var(--transition-fast) ease,
    color var(--transition-fast) ease !important;
}
.fr-btn-outline-dark.et_pb_button:hover {
  background-color: var(--color-dark) !important;
  color: var(--color-light) !important;
}

/* Outline gold */
.fr-btn-outline-gold.et_pb_button {
  background-color: transparent !important;
  color: var(--color-accent-dk) !important;
  border-color: var(--color-accent) !important;
  transition:
    background-color var(--transition-fast) ease,
    color var(--transition-fast) ease !important;
}
.fr-btn-outline-gold.et_pb_button:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-dark) !important;
}
.on-dark .fr-btn-outline-gold.et_pb_button {
  color: var(--color-accent) !important;
}


/* ==========================================================================
   13. BOTTONI — con cerchio (.fr-btn-circle)
   Markup a mano (modulo Codice):
   <a class="fr-btn-circle fr-btn-circle--primary">
     <span class="fr-btn-circle__text">Testo</span>
     <span class="fr-btn-circle__icon"><svg>…</svg></span>
   </a>
   ========================================================================== */

.fr-btn-circle {
  font-family: var(--font-primary);
  font-size: clamp(12px, 0.19vw + 11.30px, 14px);
  font-weight: 300;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: none;
  text-align: left !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px;
  border-radius: 100px;
  padding: 8px 8px 8px 26px;
  cursor: pointer;
  transition:
    background-color var(--transition-fast) ease,
    color var(--transition-fast) ease,
    border-color var(--transition-fast) ease;
}

.fr-btn-circle__text {
  flex: 1;
  display: block !important;
  visibility: visible !important;
}

.fr-btn-circle__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.2em !important;
  height: 2.2em !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  visibility: visible !important;
  overflow: hidden;
  background-color: var(--circle-bg, var(--color-light)) !important;
  color: var(--circle-color, var(--color-dark)) !important;
  transition: background-color var(--transition-fast) ease, color var(--transition-fast) ease;
}

.fr-btn-circle__icon svg {
  width: 45% !important;
  height: 45% !important;
  display: block !important;
  visibility: visible !important;
}

.fr-btn-circle--primary {
  background-color: var(--color-accent);
  color: var(--color-dark);
  --circle-bg: var(--color-dark);
  --circle-color: var(--color-accent);
  border: none;
}
.fr-btn-circle--primary:hover {
  background-color: var(--color-accent-dk);
  color: var(--color-light);
}
.fr-btn-circle--primary:hover .fr-btn-circle__icon {
  background-color: var(--color-light) !important;
  color: var(--color-accent-dk) !important;
}

.fr-btn-circle--dark {
  background-color: var(--color-dark);
  color: var(--color-light);
  --circle-bg: var(--color-light);
  --circle-color: var(--color-dark);
  border: none;
}
.fr-btn-circle--dark:hover {
  background-color: var(--color-accent);
  color: var(--color-dark);
}
.fr-btn-circle--dark:hover .fr-btn-circle__icon {
  background-color: var(--color-dark) !important;
  color: var(--color-accent) !important;
}

.fr-btn-circle--light {
  background-color: var(--color-light);
  color: var(--color-dark);
  --circle-bg: var(--color-dark);
  --circle-color: var(--color-light);
  border: 1px solid rgba(15,17,19,0.12);
}
.fr-btn-circle--light:hover {
  background-color: var(--color-accent);
  color: var(--color-dark);
  border-color: var(--color-accent);
}
.fr-btn-circle--light:hover .fr-btn-circle__icon {
  background-color: var(--color-dark) !important;
  color: var(--color-accent) !important;
}

.fr-btn-circle--outline-light {
  background-color: transparent;
  color: var(--color-light);
  --circle-bg: var(--color-light);
  --circle-color: var(--color-dark);
  border: 1.5px solid var(--color-light);
}
.fr-btn-circle--outline-light:hover {
  background-color: var(--color-light);
  color: var(--color-dark);
}
.fr-btn-circle--outline-light:hover .fr-btn-circle__icon {
  background-color: var(--color-dark) !important;
  color: var(--color-light) !important;
}

.fr-btn-circle--outline-dark {
  background-color: transparent;
  color: var(--color-dark);
  --circle-bg: var(--color-dark);
  --circle-color: var(--color-light);
  border: 1.5px solid var(--color-dark);
}
.fr-btn-circle--outline-dark:hover {
  background-color: var(--color-dark);
  color: var(--color-light);
}
.fr-btn-circle--outline-dark:hover .fr-btn-circle__icon {
  background-color: var(--color-light) !important;
  color: var(--color-dark) !important;
}

@media (max-width: 480px) {
  .fr-btn-circle {
    padding: 6px 6px 6px 20px;
    gap: 10px;
  }
  .fr-btn-circle__icon {
    width: 1.9em;
    height: 1.9em;
  }
}


/* ==========================================================================
   14. BOTTONI — social
   .fr-btn-social       pill oro con icona a sinistra
   .fr-btn-social-text  link testuale uppercase con freccia
   ========================================================================== */

.fr-btn-social {
  font-family: var(--font-primary) !important;
  font-size: clamp(12px, 0.19vw + 11.30px, 14px) !important;
  font-weight: 300 !important;
  color: var(--color-dark) !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--btn-padding) !important;
  padding-left: 44px !important;
  border: none !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  background-color: var(--color-accent) !important;
  text-transform: none !important;
  letter-spacing: 0.04em !important;
  transition: background-color var(--transition-base) ease-in-out, color var(--transition-fast) ease !important;
}
.fr-btn-social svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  position: absolute !important;
  left: 18px !important;
}
.fr-btn-social:hover {
  background-color: var(--color-accent-dk) !important;
  color: var(--color-light) !important;
}

.fr-btn-social-text {
  font-family: var(--font-primary) !important;
  font-size: clamp(11px, 0.19vw + 10.3px, 13px) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--color-muted) !important;
  text-decoration: none !important;
  background: transparent !important;
  padding: 4px 0 !important;
  padding-right: 1.8em !important;
  position: relative !important;
  transition: color var(--transition-fast) ease !important;
  display: inline-block !important;
}
.fr-btn-social-text:hover {
  color: var(--color-accent-dk) !important;
}
.fr-btn-social-text::after {
  content: '' !important;
  display: block !important;
  width: 0.65em !important;
  height: 0.65em !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7570' 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 var(--transition-fast) ease, transform var(--transition-fast) ease !important;
}
.fr-btn-social-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='%239a7433' 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;
}


/* ==========================================================================
   15. BOTTONI — dimensioni e disposizione
   Caricata DOPO le definizioni dei bottoni (sezioni 11-14).

   .btn-large        ingrandisce i bottoni filled / outline / circle
   .fr-btn-group     contenitore flex a mano (modulo Codice)
   .lb-hero-actions  come sopra, gap 28px — usato nella hero Libro
   .fr-btn-inline    classe sulla COLONNA Divi: affianca TUTTI i moduli Pulsante
   .fr-btn-stack     classe sulla COLONNA Divi: affianca SOLO i pulsanti marcati
                     fr-btn-half, il resto resta a riga intera
   ========================================================================== */

/* --- Variante large --- */
.btn-large.fr-btn-primary.et_pb_button,
.btn-large.fr-btn-dark.et_pb_button,
.btn-large.fr-btn-light.et_pb_button,
.btn-large.fr-btn-ink.et_pb_button,
.btn-large.fr-btn-white.et_pb_button,
.btn-large.fr-btn-outline-light.et_pb_button,
.btn-large.fr-btn-outline-dark.et_pb_button,
.btn-large.fr-btn-outline-gold.et_pb_button {
  font-size: clamp(15px, 0.28vw + 13.95px, 18px) !important;
  padding: 15px 36px !important;
}

@media (max-width: 480px) {
  .btn-large.fr-btn-primary.et_pb_button,
  .btn-large.fr-btn-dark.et_pb_button,
  .btn-large.fr-btn-light.et_pb_button,
  .btn-large.fr-btn-ink.et_pb_button,
  .btn-large.fr-btn-white.et_pb_button,
  .btn-large.fr-btn-outline-light.et_pb_button,
  .btn-large.fr-btn-outline-dark.et_pb_button,
  .btn-large.fr-btn-outline-gold.et_pb_button {
    padding: 13px 26px !important;
  }
}

/* Variante large — versione con cerchio */
.fr-btn-circle.btn-large {
  font-size: clamp(15px, 0.28vw + 13.95px, 18px);
  padding: 10px 10px 10px 32px;
  gap: 16px;
}
@media (max-width: 480px) {
  .fr-btn-circle.btn-large {
    padding: 8px 8px 8px 24px;
    gap: 12px;
  }
}

/* --- Gruppi affiancati in markup a mano (modulo Codice) ---
   <div class="fr-btn-group">
     <a href="#" class="fr-btn-light et_pb_button">Acquista il libro</a>
     <a href="#corso" class="fr-btn-text-fwd et_pb_button btn-gold-ivory">Scopri il corso</a>
   </div> */
.fr-btn-group,
.lb-hero-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
/* lb-hero-actions: stesso comportamento, respiro maggiore (hero Libro) */
.lb-hero-actions {
  gap: 28px !important;
  margin-top: 8px;
}
.fr-btn-group .et_pb_button,
.lb-hero-actions .et_pb_button {
  margin: 0 !important;
}

/* --- .fr-btn-inline — classe sulla COLONNA Divi ---
   Affianca due o più moduli Pulsante SENZA modulo codice.
   La colonna NON diventa flex: resta in flusso normale, quindi i margini
   verticali dei moduli precedenti restano quelli impostati nel Builder.

   Classi colonna (combinabili):
   fr-btn-inline            affianca i pulsanti, allineati a sinistra
   fr-btn-inline--center    li centra
   fr-btn-inline--right     li allinea a destra
   fr-btn-inline--stack     li impila sotto i 767px, con stacco di 16px
   -------------------------------------------------------- */

.fr-btn-inline > .et_pb_button_module_wrapper,
.et-db #et-boc .et-l .fr-btn-inline > .et_pb_button_module_wrapper {
  display: inline-block !important;
  vertical-align: middle !important;
  width: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 28px !important;
}

.fr-btn-inline > .et_pb_button_module_wrapper:last-child,
.et-db #et-boc .et-l .fr-btn-inline > .et_pb_button_module_wrapper:last-child {
  margin-right: 0 !important;
}

.fr-btn-inline .et_pb_button,
.et-db #et-boc .et-l .fr-btn-inline .et_pb_button {
  margin: 0 !important;
}

/* allineamenti alternativi */
.fr-btn-inline--center { text-align: center !important; }
.fr-btn-inline--right  { text-align: right !important; }

/* impila i pulsanti su mobile, con stacco verticale */
@media (max-width: 767px) {
  .fr-btn-inline--stack > .et_pb_button_module_wrapper,
  .et-db #et-boc .et-l .fr-btn-inline--stack > .et_pb_button_module_wrapper {
    display: block !important;
    margin-right: 0 !important;
    margin-bottom: 16px !important;
  }
  .fr-btn-inline--stack > .et_pb_button_module_wrapper:last-child,
  .et-db #et-boc .et-l .fr-btn-inline--stack > .et_pb_button_module_wrapper:last-child {
    margin-bottom: 0 !important;
  }
}

/* --- .fr-btn-stack — classe sulla COLONNA Divi ---
   Serve quando nella STESSA colonna vuoi un pulsante a riga intera e due (o
   piu) affiancati sotto. fr-btn-inline qui non basta: affianca tutto.
   Le due classi NON vanno messe insieme sulla stessa colonna.

   Colonna:                 fr-btn-stack
   Pulsanti da affiancare:  fr-btn-half   (classe sul modulo Pulsante)

   MARGINI: il CSS azzera i margini SOLO ai pulsanti fr-btn-half, perche la
   loro distanza la da il gap della colonna. Tutti gli altri moduli (testi,
   titoli, pulsante singolo) mantengono i margini impostati nel Builder.

   ATTENZIONE AL CONTO: il gap agisce anche fra le righe, quindi fra un
   modulo e la coppia sotto avrai il margin-bottom del Builder PIU il gap.
   Con gap 16px, per ottenere 40px reali imposta 24px nel Builder.

   Distanza: variabile --fr-btn-gap (default 16px). Si cambia per singola
   colonna con uno stile inline in Divi:   --fr-btn-gap: 24px;

   Classi colonna combinabili:
   fr-btn-stack--fill           i mezzi occupano esattamente meta colonna
   fr-btn-stack--center         centra il gruppo
   fr-btn-stack--right          allinea il gruppo a destra
   fr-btn-stack--mobile-stack   sotto i 767px i mezzi tornano impilati

   NOTA TECNICA: il selettore usa :has() perche Divi applica le classi custom
   all'<a class="et_pb_button">, non al wrapper del modulo che serve come
   flex item.
   -------------------------------------------------------- */

html body .fr-btn-stack.et_pb_column {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--fr-btn-gap, 40px);
}

/* default: ogni modulo della colonna occupa la riga intera.
   I margini NON si toccano: restano quelli del Builder. */
html body .fr-btn-stack.et_pb_column > .et_pb_module,
html body .fr-btn-stack.et_pb_column > .et_pb_button_module_wrapper {
  flex: 0 0 100%;
  max-width: 100%;
}

/* i soli pulsanti marcati fr-btn-half si affiancano, e solo su questi
   i margini verticali vengono azzerati */
html body .fr-btn-stack.et_pb_column > .et_pb_button_module_wrapper:has(.fr-btn-half) {
  flex: 0 1 auto;
  max-width: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

html body .fr-btn-stack .fr-btn-half.et_pb_button {
  margin: 0 !important;
}

/* variante: i mezzi esattamente a meta colonna */
html body .fr-btn-stack--fill.et_pb_column > .et_pb_button_module_wrapper:has(.fr-btn-half) {
  flex: 1 1 calc(50% - (var(--fr-btn-gap, 16px) / 2));
}
html body .fr-btn-stack--fill .fr-btn-half.et_pb_button {
  display: block !important;
  text-align: center !important;
}

/* allineamenti alternativi del gruppo */
html body .fr-btn-stack--center.et_pb_column { justify-content: center; }
html body .fr-btn-stack--right.et_pb_column  { justify-content: flex-end; }

/* impila i mezzi su mobile */
@media (max-width: 767px) {
  html body .fr-btn-stack--mobile-stack.et_pb_column > .et_pb_button_module_wrapper:has(.fr-btn-half) {
    flex: 0 0 100%;
  }
}


/* ==========================================================================
   16. COLONNE FLUIDE (formRow)
   ========================================================================== */

.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; }
}


/* ==========================================================================
   17. CONTACT FORM 7
   ========================================================================== */

.wpcf7 p { font-size: 14px !important; }

.wpcf7 label {
  color: var(--color-light) !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(11px, 0.19vw + 10.3px, 13px) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
  color: var(--color-dark) !important;
  background-color: var(--color-light-warm) !important;
  border: 0 !important;
  border-bottom: none !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
}
.wpcf7 input { margin-bottom: 20px !important; }
.wpcf7 textarea { height: 100px !important; }

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

.wpcf7 a {
  color: var(--color-accent) !important;
  transition: color var(--transition-fast) ease !important;
}
.wpcf7 a:hover {
  color: var(--color-accent-dk) !important;
}

.wpcf7 button.wpcf7-submit {
  border: none !important;
}

.wpcf7-form .submit-wrap .full_width {
  display: flex !important;
  flex-direction: row-reverse !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.wpcf7-form .form-note {
  color: rgba(250, 248, 244, 0.45) !important;
  font-size: 0.75em !important;
  margin: 0 !important;
  margin-top: 20px !important;
}


/* ==========================================================================
   18. UTILITY — frosted glass
   (reverse-mobile sta nella sezione 8 insieme al layout)
   ========================================================================== */

.fr-glass,
.fr-glass.et_pb_section,
.fr-glass .et_pb_section_inner {
  background: rgba(15, 17, 19, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.fr-glass::before,
.fr-glass::after {
  display: none !important;
}

.fr-glass--bordered,
.fr-glass--bordered.et_pb_section {
  background: rgba(15, 17, 19, 0.55) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.fr-glass--bordered::before,
.fr-glass--bordered::after {
  display: none !important;
}


/* ==========================================================================
   19. NAVBAR — stile WPML
   NOTA: le variabili --fr-* sono definite dal plugin wp-custom-menu-frg,
   non da questo tema. Non spostare in :root.
   ========================================================================== */

#fr-navbar .fr-nav-links > li.wpml-ls-item > a {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

#fr-navbar .fr-nav-links > li.wpml-ls-item:not(:last-of-type)::after {
  content: "/";
  color: var(--fr-color-transparent);
  transition: color .35s var(--fr-ease);
  font-family: var(--fr-font-desktop);
  font-size: var(--fr-font-size-desktop);
  font-weight: var(--fr-font-weight-desktop);
  line-height: 1;
  pointer-events: none;
}

#fr-navbar.scrolled .fr-nav-links > li.wpml-ls-item:not(:last-of-type)::after {
  color: var(--fr-color-scrolled);
}


/* ==========================================================================
   20. PAGINA — Masterclass (singola)
   Classi custom per il template Masterclass. Le classi fr-sec-*, on-dark,
   serif, gold, fr-btn-* sono definite nelle sezioni sopra.
   ========================================================================== */

/* --- HERO — forza avorio sui campi dinamici ACF (modulo Testo: mc-hero-data) --- */
/* I campi dinamici escono col grigio #666 di Divi: qui li riportiamo ad avorio. */
.et-db #et-boc .et-l .mc-hero-data,
.et-db #et-boc .et-l .mc-hero-data p,
.et-db #et-boc .et-l .mc-hero-data .et_pb_text_inner,
.et-db #et-boc .et-l .mc-hero-data .et_pb_text_inner p {
  color: #FAF8F4 !important;
}
/* le etichette in grassetto (Durata:, Ore:, ecc.) in bianco pieno */
.et-db #et-boc .et-l .mc-hero-data strong {
  color: #ffffff !important;
}

/* --- QUICK NAV — barra ancore sotto la hero (riga: mc-quicknav) --- */
.mc-quicknav.et_pb_row {
  max-width: 1600px !important;
  width: 100% !important;
  display: flex !important;
  padding: 0 !important;
}
.mc-quicknav .et_pb_column {
  flex: 1;
  margin: 0 !important;
  border-right: 1px solid rgba(199,154,75,.15);
  text-align: center;
}
.mc-quicknav .et_pb_column:last-child { border-right: none; }
.mc-quicknav a,
.mc-quicknav p,
.mc-quicknav p a,
.et-db #et-boc .et-l .mc-quicknav a,
.et-db #et-boc .et-l .mc-quicknav p,
.et-db #et-boc .et-l .mc-quicknav p a,
.et-db #et-boc .et-l .mc-quicknav .et_pb_text_inner p,
.et-db #et-boc .et-l .mc-quicknav .et_pb_text_inner p a {
  display: block;
  color: #EFECE6 !important;
  font-family: var(--font-primary) !important;
  font-size: 14px !important;
  letter-spacing: .04em;
  padding: 0 !important;
  margin: 0 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  transition: color .3s ease;
}
/* il padding cliccabile lo mettiamo sul link, non sul paragrafo */
.mc-quicknav a,
.et-db #et-boc .et-l .mc-quicknav a,
.et-db #et-boc .et-l .mc-quicknav .et_pb_text_inner p a {
  padding: 18px 8px !important;
}
.mc-quicknav a:hover,
.mc-quicknav p a:hover,
.mc-quicknav a:hover p,
.et-db #et-boc .et-l .mc-quicknav a:hover,
.et-db #et-boc .et-l .mc-quicknav p a:hover,
.et-db #et-boc .et-l .mc-quicknav .et_pb_text_inner p a:hover,
.et-db #et-boc .et-l .mc-quicknav .et_pb_text_inner a:hover,
/* caso: il link e sul MODULO (et_clickable), non su un <a> interno */
.et-db #et-boc .et-l .mc-quicknav .et_pb_text.et_clickable:hover p,
.et-db #et-boc .et-l .mc-quicknav .et_pb_text.et_clickable:hover .et_pb_text_inner p { color: #C79A4B !important; }

/* rende sticky la sezione quicknav (togliere se non serve) */
.mc-quicknav-sec.et_pb_section {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0 !important;
}

/* --- A CHI E RIVOLTO — card con numero serif oro (modulo Testo: mc-rivolto) ---
   Gli stili di .mc-rivolto sono ora nella sezione 26 (CARD CONTENITORE),
   condivisi con .yc-card. Qui non resta nulla: non riaggiungere regole,
   modificare la sezione 26. */

/* --- DOMANDE — lista con trattino oro (modulo Testo: mc-domande, lista <ul>) --- */
.mc-domande ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mc-domande ul li,
.et-db #et-boc .et-l .mc-domande ul li,
.et-db #et-boc .et-l .mc-domande .et_pb_text_inner ul li {
  position: relative;
  padding: 17px 0 17px 32px !important;
  border-bottom: 1px solid rgba(199,154,75,.2);
  color: #FAF8F4 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}
.mc-domande ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #C79A4B;
}

/* --- PROGRAMMA — fisarmonica Divi stilizzata (modulo Fisarmonica: mc-prog) --- */
/* azzera il margine che Divi mette a ogni modulo dentro la colonna 4/4 */
.mc-prog.et_pb_accordion .et_pb_toggle,
.et-db #et-boc .et-l .mc-prog.et_pb_accordion .et_pb_toggle {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #d3d1c7 !important;
  padding: 24px 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
@media (min-width: 981px) {
  .et-db #et-boc .et-l .mc-prog.et_pb_accordion .et_pb_toggle { margin-bottom: 0 !important; }
}

/* Titolo: piu grande e oro */
.mc-prog.et_pb_accordion .et_pb_toggle h5.et_pb_toggle_title,
.mc-prog.et_pb_accordion .et_pb_toggle_title,
.et-db #et-boc .et-l .mc-prog.et_pb_accordion .et_pb_toggle h5.et_pb_toggle_title,
.et-db #et-boc .et-l .mc-prog.et_pb_accordion h5.et_pb_toggle_title {
  color: #C79A4B !important;
  font-family: var(--font-voice) !important;   /* DM Serif Display */
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(20px, 1vw + 15px, 26px) !important;
  line-height: 1.3 !important;
  padding-left: 0 !important;
  padding-right: 48px !important;
  cursor: pointer;
  position: relative;
}

/* Nascondo l'icona Divi nativa (+/-) */
.mc-prog.et_pb_accordion .et_pb_toggle_title::before,
.et-db #et-boc .et-l .mc-prog.et_pb_accordion h5.et_pb_toggle_title::before {
  display: none !important;
}

/* Icona custom: due trattini che formano un + */
.mc-prog.et_pb_accordion .et_pb_toggle_title::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background:
    linear-gradient(#C79A4B,#C79A4B) center/18px 2px no-repeat,   /* orizzontale */
    linear-gradient(#C79A4B,#C79A4B) center/2px 18px no-repeat;   /* verticale */
  transition: transform .3s ease;
  pointer-events: none;   /* il click passa al toggle Divi sotto */
}
/* quando aperto: ruota di 45 gradi -> il + diventa una x */
.mc-prog.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title::after,
.et-db #et-boc .et-l .mc-prog.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title::after {
  transform: translateY(-50%) rotate(45deg);
}

/* Contenuto: apertura via max-height, stato pilotato dalla classe .is-open (dal JS).
   Nessuna misura JS: massima compatibilita, Safari iOS incluso. */
.mc-prog.et_pb_accordion .et_pb_toggle_content,
.et-db #et-boc .et-l .mc-prog.et_pb_accordion .et_pb_toggle_content {
  color: #3f3b36 !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-right: 48px !important;
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  transition: max-height .55s ease, opacity .4s ease, padding .5s ease;
}
.mc-prog.et_pb_accordion .et_pb_toggle.is-open .et_pb_toggle_content,
.et-db #et-boc .et-l .mc-prog.et_pb_accordion .et_pb_toggle.is-open .et_pb_toggle_content {
  max-height: 500px;
  opacity: 1;
  padding-top: 16px !important;
}
.mc-prog.et_pb_accordion .et_pb_toggle.et_pb_toggle_open,
.et-db #et-boc .et-l .mc-prog.et_pb_accordion .et_pb_toggle.et_pb_toggle_open {
  background: transparent !important;
}

/* --- LIBRO — bordo oro sulla copertina (modulo Immagine: mc-book-cover) --- */
.mc-book-cover img {
  border: 2px solid #C79A4B;
  display: block;
}

/* --- RESPONSIVE — quicknav a colonna su mobile --- */
@media (max-width: 767px) {
  .mc-quicknav.et_pb_row { flex-direction: column !important; }
  .mc-quicknav .et_pb_column {
    border-right: none;
    border-bottom: 1px solid rgba(199,154,75,.15);
  }
  /* nessuna linea sotto l'ultima voce (evita la terza riga dopo Programma) */
  .mc-quicknav .et_pb_column:last-child { border-bottom: none; }
  /* piu respiro verticale tra le voci su mobile */
  .mc-quicknav a,
  .et-db #et-boc .et-l .mc-quicknav a,
  .et-db #et-boc .et-l .mc-quicknav .et_pb_text_inner p a {
    padding: 22px 8px !important;
  }
  /* caso: link sul modulo intero (et_clickable) invece che su <a> */
  .et-db #et-boc .et-l .mc-quicknav .et_pb_text {
    padding: 22px 8px !important;
  }
}


/* ==========================================================================
   21. PAGINA — Libro (singola)
   NOTA: .lb-hero-actions è ora nella sezione 15 (disposizione bottoni)
   e .lb-btn-gold nella sezione 11 (varianti colore bottoni testo),
   dove è diventata alias di .btn-gold-ivory.
   ========================================================================== */

/* --- MANIFESTO — frase serif italic con barra oro a sinistra --- */
.lb-manifesto {
  padding-left: 30px;
  border-left: 2px solid var(--color-accent);
  margin: 12px 0;
}
@media (max-width: 820px) {
  .lb-manifesto { padding-left: 20px; }
}


/* ==========================================================================
   22. ANIMAZIONI — legenda classi e reduced motion
   ========================================================================== */

/* --- LEGENDA — FRG Scroll Page ---
   sezione-fp / hs-section / hs-section--half / hs-section--full / hs-slide */

/* --- LEGENDA — GSAP (frg-scroll-animations.js) ---
   frg-fade-in / frg-slide-up / frg-slide-down
   frg-slide-left / frg-slide-right / frg-zoom-in / frg-zoom-out
   frg-reveal-left / frg-reveal-right
   frg-delay-100 / 200 / 300 / 400 / 500 / 600 / 700
   frg-fast / frg-slow */

@media (prefers-reduced-motion: reduce) {

  .fr-hl-link {
    transition: background-color 400ms ease;
  }

  .fr-btn-text.et_pb_button,
  .fr-btn-text-fwd.et_pb_button,
  .fr-btn-text-back.et_pb_button,
  .fr-btn-primary.et_pb_button,
  .fr-btn-dark.et_pb_button,
  .fr-btn-light.et_pb_button,
  .fr-btn-outline-light.et_pb_button,
  .fr-btn-outline-dark.et_pb_button,
  .fr-btn-outline-gold.et_pb_button {
    transition: none !important;
  }

}


/* ==========================================================================
   23. SEZIONI CON IMMAGINE ANCORATA AL FONDO (y-sec-anchor)
   ========================================================================== */

.et-db #et-boc .et-l .y-sec-anchor .et_pb_row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.et-db #et-boc .et-l .y-sec-anchor .y-col-img {
  padding: 0 !important;
  align-self: flex-end;
}

/* elimina lo spazio fantasma sotto l'immagine */
.et-db #et-boc .et-l .y-sec-anchor .y-col-img .et_pb_image {
  margin-bottom: 0;
  line-height: 0;
}
.et-db #et-boc .et-l .y-sec-anchor .y-col-img .et_pb_image img {
  display: block;
}

/* la colonna testo resta centrata verticalmente */
.et-db #et-boc .et-l .y-sec-anchor .y-col-text {
  align-self: center;
}

/* Mobile: si impila, l'immagine torna sopra con un minimo di respiro */
@media (max-width: 980px) {
  .et-db #et-boc .et-l .y-sec-anchor .et_pb_row {
    display: block;
  }
  .et-db #et-boc .et-l .y-sec-anchor .y-col-img {
    margin-bottom: 0 !important;
  }
}


/* ==========================================================================
   24. HERO OVERLAY DOPPIO (sx + top) — classe sulla SEZIONE: hero-overlay
   ========================================================================== */

.et-db #et-boc .et-l .hero-overlay {
  position: relative;
}

.et-db #et-boc .et-l .hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    /* verticale: dall'alto verso il basso, per il menu */
    linear-gradient(to bottom,
      rgba(15, 17, 19, 0.85) 0%,
      rgba(15, 17, 19, 0.45) 22%,
      rgba(15, 17, 19, 0) 50%),
    /* orizzontale: da sinistra, per il testo */
    linear-gradient(to right,
      rgba(15, 17, 19, 0.98) 0%,
      rgba(15, 17, 19, 0.95) 18%,
      rgba(15, 17, 19, 0.7) 38%,
      rgba(15, 17, 19, 0.25) 60%,
      rgba(15, 17, 19, 0) 80%);
}

.et-db #et-boc .et-l .hero-overlay > .et_pb_row,
.et-db #et-boc .et-l .hero-overlay > .et_pb_row_inner {
  position: relative;
  z-index: 2;
}


/* ==========================================================================
   25. REFERENZE — modulo Testimonianza Divi
   Classe sulla SEZIONE: yc-ref. Nessuna classe sui singoli moduli.
   Sfondo e ombra della card restano impostati in Divi.
   Scala: nome = H4, ruolo = H5, citazione = Body.
   ========================================================================== */

html body .yc-ref .et_pb_testimonial {
  display: flex;
  align-items: center;
  gap: 32px;
  border: none !important;
  border-radius: 10px !important;
  padding: 20px 22px !important;
}

/* Virgolette native: spente */
html body .yc-ref .et_pb_testimonial::before { display: none !important; }

/* Foto a sinistra, centrata verticalmente sul blocco testo */
html body .yc-ref .et_pb_testimonial_portrait {
  flex: 0 0 170px;
  width: 170px !important;
  height: 170px !important;
  margin: 0 !important;
  position: static !important;
  border-radius: 18px !important;
  overflow: hidden;
}
html body .yc-ref .et_pb_testimonial_portrait::before {
  display: none !important;
}

/* Blocco testo */
html body .yc-ref .et_pb_testimonial_description {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin-left: 0 !important;
}
html body .yc-ref .et_pb_testimonial_description_inner {
  display: flex;
  flex-direction: column;
}

/* Nome: scala H4, oro */
html body .yc-ref .et_pb_testimonial_author,
html body .yc-ref .et_pb_testimonial_description_inner .et_pb_testimonial_author {
  order: -2;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: clamp(16px, calc(16px + 6 * (100vw - 480px) / 920), 22px);
  color: #C79A4B;
  line-height: 1.3;
}

/* Ruolo: scala H5, stesso peso del nome */
html body .yc-ref .et_pb_testimonial_meta,
html body .yc-ref .et_pb_testimonial_description_inner .et_pb_testimonial_meta {
  order: -1;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: clamp(14px, calc(14px + 4 * (100vw - 480px) / 920), 18px);
  color: rgba(15,17,19,.6);
  line-height: 1.4;
  margin-bottom: 22px;
}

/* Citazione: eredita il Body globale, nessun font-size dichiarato */
html body .yc-ref .et_pb_testimonial_content,
html body .yc-ref .et_pb_testimonial_description_inner p {
  order: 0;
  line-height: 1.7 !important;
  color: #3f3b36 !important;
}

/* Mobile: foto sopra, testo sotto */
@media (max-width: 767px) {
  html body .yc-ref .et_pb_testimonial {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 18px 16px !important;
  }
  html body .yc-ref .et_pb_testimonial_portrait {
    flex: 0 0 auto;
    width: 120px !important;
    height: 120px !important;
    border-radius: 14px !important;
  }
}


/* ==========================================================================
   26. CARD CONTENITORE — .yc-card (e alias legacy .mc-rivolto)

   Classe sulla COLONNA (funziona anche su sezione o riga).
   Sfondo bianco pieno.
   Per pareggiare le altezze: nella riga attivare "Pareggia altezze colonne".

   IMPORTANTE: non dichiara display, quindi si combina con .fr-img-col
   (sezione 27) sulla stessa colonna. Non aggiungere qui regole su
   .et_pb_image: toglierebbero l'allineamento Divi alle immagini.

   NON TOCCARE: sezione lasciata identica, ripetizioni comprese.
   ========================================================================== */

html body .et_pb_column.yc-card,
html body .mc-rivolto {
  background: var(--color-white);
  padding: 28px 34px !important;
  box-sizing: border-box;
  height: 100%;
}

html body .yc-card > .et_pb_module:last-child,
html body .mc-rivolto > .et_pb_module:last-child {
  margin-bottom: 0 !important;
}

/* numero serif oro — modulo Testo con classe mc-num dentro la card */
html body .yc-card .mc-num,
html body .mc-rivolto .mc-num,
.et-db #et-boc .et-l .yc-card .mc-num,
.et-db #et-boc .et-l .mc-rivolto .mc-num,
.et-db #et-boc .et-l .yc-card .et_pb_text_inner .mc-num,
.et-db #et-boc .et-l .mc-rivolto .et_pb_text_inner .mc-num {
  font-family: var(--font-voice) !important;   /* DM Serif Display */
  color: var(--color-accent) !important;
  font-size: 34px !important;
  line-height: 1 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

html body .yc-card h4,
html body .mc-rivolto h4,
.et-db #et-boc .et-l .yc-card h4,
.et-db #et-boc .et-l .mc-rivolto h4 {
  color: var(--color-dark) !important;
  margin: 0 0 6px !important;
}

@media (max-width: 767px) {
  html body .yc-card,
  html body .mc-rivolto {
    padding: 24px 22px !important;
  }
}

html body .et_pb_column.yc-card .mc-num,
html body .mc-rivolto .mc-num,
.et-db #et-boc .et-l .et_pb_column.yc-card .mc-num,
.et-db #et-boc .et-l .mc-rivolto .mc-num,
.et-db #et-boc .et-l .et_pb_column.yc-card .et_pb_text_inner .mc-num,
.et-db #et-boc .et-l .mc-rivolto .et_pb_text_inner .mc-num {
  font-family: var(--font-voice) !important;
  color: var(--color-accent) !important;
  font-size: 34px !important;
  line-height: 1 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

html body .et_pb_column.yc-card h4,
html body .mc-rivolto h4,
.et-db #et-boc .et-l .et_pb_column.yc-card h4,
.et-db #et-boc .et-l .mc-rivolto h4 {
  color: var(--color-dark) !important;
  margin: 0 0 6px !important;
}

/* ==========================================================================
   27. IMMAGINI AFFIANCATE dentro una colonna

   Classe sulla COLONNA:        fr-img-col
   Classe sui moduli Immagine:  fr-img-inline

   Le DIMENSIONI si impostano in Divi, sul modulo Immagine:
   Design > Dimensionamento > Larghezza (o Larghezza massima).
   Qui il CSS non tocca mai la larghezza.

   Funziona sia in colonna normale sia dentro .yc-card: le due classi si
   combinano sulla stessa colonna → class="yc-card fr-img-col".
   Testi, pulsanti e ogni altro modulo restano a riga intera.

   Distanza fra le immagini: variabile --fr-img-gap (default 20px).
   Si cambia per singola colonna con uno stile inline sulla colonna in Divi:
   --fr-img-gap: 12px;

   Allineamento del gruppo: fr-img-col--center / fr-img-col--right
   Impila su mobile:        fr-img-col--stack
   ========================================================================== */

html body .fr-img-col.et_pb_column {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0 var(--fr-img-gap, 20px);
}

/* tutti i moduli occupano la riga intera, come nel flusso normale */
html body .fr-img-col.et_pb_column > .et_pb_module,
html body .fr-img-col.et_pb_column > .et_pb_button_module_wrapper {
  flex: 0 0 100%;
  max-width: 100%;
}

/* le sole immagini marcate si affiancano; la larghezza la decide Divi */
html body .fr-img-col.et_pb_column > .fr-img-inline {
  flex: 0 1 auto;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body .fr-img-col .fr-img-inline .et_pb_image_wrap {
  display: block;
  width: 100%;
}
html body .fr-img-col .fr-img-inline img {
  display: block;
  width: 100%;
  height: auto;
}

/* allineamenti alternativi del gruppo */
html body .fr-img-col--center.et_pb_column { justify-content: center; }
html body .fr-img-col--right.et_pb_column  { justify-content: flex-end; }

/* opzionale: impila le due immagini su mobile */
@media (max-width: 767px) {
  html body .fr-img-col--stack.et_pb_column > .fr-img-inline {
    flex: 0 0 100%;
  }
}

html body .fr-img-col .fr-img-inline--md img { width: 120px !important; }
html body .fr-img-col .fr-img-inline--md1 img { width: 90px !important; }


/* le colonne di una riga "pareggia altezze" ereditano un allineamento
   centrato da Divi: sulla card lo riportiamo a sinistra */
html body .yc-card.et_pb_column {
  text-align: left;
}