/*
 Theme Name: Terrawatt Child
 Template: Divi
*/

/* ==========================================================================
   CHILD THEME — Terrawatt
   WordPress + Divi

   INDICE
   ------
   0.  FONT
   1.  VARIABILI GLOBALI
   2.  RESET / BASE
   3.  TIPOGRAFIA GLOBALE
   4.  CLASSI LEGENDA — FRG Scroll Page
   5.  CLASSI LEGENDA — Animazioni GSAP
   6.  LAYOUT
   7.  TESTO GRADIENTATO
   8.  HIGHLIGHT
   9.  BOTTONI — base testo (fr-btn-text, fwd, back)
   10. BOTTONI — filled / gradient / outline
   11. BOTTONI — con cerchio (fr-btn-circle--)
   12. BOTTONI — social (fr-btn-social)
   12. COLONNE FLUIDE (formRow)
   13. CONTACT FORM 7
   14. UTILITY — reverse-mobile
   15. REDUCED MOTION
   ========================================================================== */


/* ==========================================================================
   0. FONT

   Google Sans Flex — variable font, copre weight 100–900 da file singolo
   Stack Sans Headline — self-hosted, titoli (300 light, 400 regular)
   Stack Sans Text — self-hosted, tenuto come fallback/alternativa
   ========================================================================== */

/* Google Sans Flex — font primario per body, paragrafi, pulsanti */
@font-face {
  font-family: 'Google Sans Flex';
  src: url('/wp-content/uploads/et-fonts/GoogleSansFlex-Light.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans Flex';
  src: url('/wp-content/uploads/et-fonts/GoogleSansFlex-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Stack Sans Headline — titoli */
@font-face {
  font-family: 'Stack Sans Headline';
  src: url('/wp-content/uploads/et-fonts/StackSansHeadline-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@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;
}

/* Stack Sans Text — fallback / uso alternativo */
@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;
}


/* ==========================================================================
   1. VARIABILI GLOBALI — Terrawatt

   PALETTE
   -------
   Carbone    #1a1713   --color-dark        titoli, header, footer, sfondi scuri
   Grafite    #2e2b28   --color-body        body text, paragrafi
   Bianco     #ffffff   --color-light       background principale, card
   Latte      #faf8f5   --color-light-warm  sezioni alternate chiare
   Cenere     #7a7570   --color-muted       testo secondario, label, caption
   Sole       #ee7400   --color-accent-1    CTA, highlight, accenti — mai sui titoli
   Fuoco      #e6360f   --color-accent-2    gradienti, hover, accenti secondari
   ========================================================================== */

:root {
  --color-dark:        #1a1713;
  --color-body:        #2e2b28;
  --color-light:       #ffffff;
  --color-light-warm:  #faf8f5;
  --color-muted:       #7a7570;
  --color-accent-1:    #ee7400;
  --color-accent-2:    #e6360f;

  --font-primary:      'Google Sans Flex', system-ui, sans-serif;
  --font-secondary:    'Stack Sans Headline', system-ui, sans-serif;

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

  --btn-radius:        100px;
  --btn-padding:       6px 36px;

  /* Animazioni reveal testo gradientato / 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. RESET / BASE
   ========================================================================== */

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

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

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


/* ==========================================================================
   3. TIPOGRAFIA GLOBALE
   Fluid typography con clamp() — scala tra 375px e 1440px.

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

   Scala Terrawatt:
   Display: 40px → 72px   (.fr-display — hero, citazioni)
   H1:      32px → 64px
   H2:      26px → 40px
   H3:      20px → 30px
   H4:      16px → 22px
   H5:      14px → 18px
   H6:      11px → 13px   (eyebrow uppercase)
   Body:    16px → 18px   (base globale)
   ========================================================================== */

/* --- 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: 400 !important;
  line-height: 1.1;
  color: var(--color-dark);
}

h1, .et_pb_module h1 {
  font-size: clamp(32px, 3.00vw + 20.75px, 64px);
  line-height: 1.15;
}
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.2; }
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 */
.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: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-dark);
}

/* Light — peso 300 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: 300 !important;
}

/* H6 / Eyebrow */
h6,
.et_pb_module h6 {
  font-family: var(--font-primary) !important;
  font-size: clamp(11px, 0.19vw + 10.3px, 13px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-accent-1);
}

/* --- Body — Google Sans Flex
   font-family e color sempre dichiarati per battere il default #666666 di Divi.
   font-size e line-height 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_blurb p,
body:not(.et-fb) .et_pb_cta 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(16px, 0.19vw + 15.3px, 18px);
  line-height: 1.7;
  color: var(--color-body) !important;
}




/* --- Classi utility dimensione testo ---
   Combinabili con .fr-text-white per il colore.
   Uso: class="fr-text-base fr-text-white" sul modulo testo in Divi.

   fr-text-base   16px → 20px
   fr-text-small  12px → 17px
   fr-text-large  18px → 22px
   -------------------------------------------------------- */

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.7 !important;
  color: var(--color-body) !important;
}

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.6 !important;
  color: var(--color-muted) !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.6 !important;
  color: var(--color-body) !important;
}

/* Colore bianco — sovrascrive il colore delle classi dimensione */
body:not(.et-fb) .fr-text-white p,
body:not(.et-fb) .et_pb_module .fr-text-white p {
  color: var(--color-light) !important;
}

/* Colore carbone — sovrascrive il colore delle classi dimensione */
body:not(.et-fb) .fr-text-dark p,
body:not(.et-fb) .et_pb_module .fr-text-dark p {
  color: var(--color-dark) !important;
}

/* --- Testo su sfondo scuro --- */
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark h5,
.on-dark .et_pb_module h1, .on-dark .et_pb_module h2,
.on-dark .et_pb_module h3, .on-dark .et_pb_module h4,
.on-dark .et_pb_module h5 {
  color: var(--color-light) !important;
}
.on-dark p,
.on-dark .et_pb_module p {
  color: rgba(255, 255, 255, 0.65) !important;
}
.on-dark h6,
.on-dark .et_pb_module h6 {
  color: var(--color-accent-1) !important;
}


/* ==========================================================================
   4. CLASSI LEGENDA — FRG Scroll Page
   ========================================================================== */

/*
   sezione-fp / hs-section / hs-section--half / hs-section--full
   hs-slide
*/


/* ==========================================================================
   5. CLASSI LEGENDA — Animazioni GSAP
   ========================================================================== */

/*
   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
   frg-fast / frg-slow
*/


/* ==========================================================================
   6. 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;
  }
}


/* ==========================================================================
   7. TESTO GRADIENTATO
   .fr-grad-1        Sole → Fuoco  (statico)
   .fr-grad-2        Fuoco → Sole  (statico)
   .fr-grad-1-link   Sole → Fuoco  (hover inverte)
   .fr-grad-2-link   Fuoco → Sole  (hover inverte)

   Uso: <span class="fr-grad-1">testo</span>
   ========================================================================== */

.fr-grad-1,
.fr-grad-2 {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.fr-grad-1 {
  background-image: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2));
}

.fr-grad-2 {
  background-image: linear-gradient(90deg, var(--color-accent-2), var(--color-accent-1));
}

.fr-grad-1-link,
.fr-grad-2-link {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: left center;
  text-decoration: none;
  transition: background-position 400ms ease;
}

.fr-grad-1-link {
  background-image: linear-gradient(
    90deg,
    var(--color-accent-1),
    var(--color-accent-2) 50%,
    var(--color-accent-1) 100%
  );
}

.fr-grad-2-link {
  background-image: linear-gradient(
    90deg,
    var(--color-accent-2),
    var(--color-accent-1) 50%,
    var(--color-accent-2) 100%
  );
}

.fr-grad-1-link:hover,
.fr-grad-2-link:hover {
  background-position: right center;
}


/* ==========================================================================
   8. HIGHLIGHT
   .fr-hl-1        Sole → Fuoco (testo Bianco — su sfondo scuro)
   .fr-hl-2        Sole → Fuoco (testo Carbone — su sfondo chiaro)
   .fr-hl-1-link   stessa cosa + hover scorre
   .fr-hl-2-link   stessa cosa + hover scorre

   Uso: <span class="fr-hl-1">testo</span>
   ========================================================================== */

.fr-hl-1,
.fr-hl-2 {
  padding: 0 3px;
  margin: 0 -3px;
  background-repeat: no-repeat;
  background-size: 100% 65%;
  background-position: left 68%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.fr-hl-1 {
  background-image: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2));
  color: var(--color-light);
}

.fr-hl-2 {
  background-image: linear-gradient(90deg, var(--color-accent-1), var(--color-accent-2));
  color: var(--color-dark);
}

.fr-hl-1-link,
.fr-hl-2-link {
  padding: 0 3px;
  margin: 0 -3px;
  background-repeat: no-repeat;
  background-size: 200% 65%;
  background-position: left 68%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-decoration: none;
  transition: background-position 400ms ease;
}

.fr-hl-1-link {
  background-image: linear-gradient(90deg, var(--color-accent-1) 0%, var(--color-accent-2) 50%, var(--color-accent-1) 100%);
  color: var(--color-light);
}

.fr-hl-2-link {
  background-image: linear-gradient(90deg, var(--color-accent-2) 0%, var(--color-accent-1) 50%, var(--color-accent-2) 100%);
  color: var(--color-dark);
}

.fr-hl-1-link:hover,
.fr-hl-2-link:hover {
  background-position: right 68%;
}


/* ==========================================================================
   9. BOTTONI TESTO
   .fr-btn-text       freccia diagonale ↗
   .fr-btn-text-fwd   chevron avanti ›
   .fr-btn-text-back  chevron indietro ‹

   Dimensione default: 16→20px (allineata al body base).
   Modificatori: .fr-btn-text-small (12→17px) / .fr-btn-text-large (20→26px)
   Variante sfondo scuro: .on-dark
   Freccia: 0.85em — scala automaticamente con le varianti.
   ========================================================================== */

.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: 400 !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-1) !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;
}

/* Dimensione small */
.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;
}

/* Dimensione large */
.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.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='%232e2b28' 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-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='%23ee7400' 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 avanti › */
.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='%232e2b28' 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 var(--transition-fast) ease, transform var(--transition-fast) ease !important;
}
.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='%23ee7400' 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(3px) !important;
}

/* Chevron indietro ‹ */
.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='%232e2b28' 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='%23ee7400' 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 su sfondo scuro */
.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-muted) !important;
}
.fr-btn-text.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='%237a7570' 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-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='%237a7570' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}
.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='%237a7570' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}

/* Nota colori SVG hardcoded:
   Grafite  = %232e2b28
   Cenere   = %237a7570
   Sole     = %23ee7400
   Fuoco    = %23e6360f
   Carbone  = %231a1713
   Bianco   = %23ffffff  */


/* ==========================================================================
   10. BOTTONI FILLED / GRADIENT / OUTLINE

   fr-btn-primary      Bianco → hover Fuoco + testo Bianco
   fr-btn-dark         Carbone + testo Bianco → hover Bianco + testo Carbone
   fr-btn-gradient     Sole→Fuoco → hover invertito
   fr-btn-outline-light  Bordo 2px Bianco → fill Bianco + testo Carbone
   fr-btn-outline-dark   Bordo 2px Carbone → fill Carbone + testo Bianco

   padding:       6px 36px  (--btn-padding)
   border-radius: 100px  pill  (--btn-radius)
   ========================================================================== */

.fr-btn-primary.et_pb_button,
.fr-btn-dark.et_pb_button,
.fr-btn-gradient.et_pb_button,
.fr-btn-outline-light.et_pb_button,
.fr-btn-outline-dark.et_pb_button {
  font-family: var(--font-primary) !important;
  font-size: clamp(13px, 0.19vw + 12.3px, 15px) !important;
  font-weight: 500 !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--btn-padding) !important;
  text-decoration: none !important;
  letter-spacing: 0.01em !important;
}

.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-gradient.et_pb_button::before,
.fr-btn-gradient.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 {
  display: none !important;
}

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

/* Primary: Bianco → Fuoco */
.fr-btn-primary.et_pb_button {
  background-color: var(--color-light) !important;
  color: var(--color-dark) !important;
  border: 1px solid rgba(26, 23, 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-primary.et_pb_button:hover {
  background-color: var(--color-accent-2) !important;
  color: var(--color-light) !important;
  border-color: var(--color-accent-2) !important;
}

/* Dark: Carbone → Bianco */
.fr-btn-dark.et_pb_button {
  background-color: var(--color-dark) !important;
  color: var(--color-light) !important;
  border: none !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;
}

/* Gradient: Sole→Fuoco, hover invertito */
.fr-btn-gradient.et_pb_button {
  background-image: linear-gradient(
    90deg,
    var(--color-accent-1),
    var(--color-accent-2),
    var(--color-accent-1)
  ) !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  color: var(--color-light) !important;
  border: none !important;
  transition: background-position var(--transition-base) ease-in-out !important;
}
.fr-btn-gradient.et_pb_button:hover {
  background-position: right center !important;
  color: var(--color-light) !important;
}

/* Outline light — su sfondi scuri */
.fr-btn-outline-light.et_pb_button {
  background-color: transparent !important;
  color: var(--color-light) !important;
  border: 2px solid 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: 2px solid 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;
}

/* Gruppo bottoni affiancati */
.fr-btn-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}


/* ==========================================================================
   11. BOTTONI CON CERCHIO — .fr-btn-circle
   Solo via modulo codice — NON funziona col modulo bottone nativo Divi.

   Struttura HTML:
   <a href="#" class="fr-btn-circle fr-btn-circle--primary">Scopri di più</a>
   <a href="#" class="fr-btn-circle fr-btn-circle--dark">Scopri di più</a>
   <a href="#" class="fr-btn-circle fr-btn-circle--gradient">Scopri di più</a>
   <a href="#" class="fr-btn-circle fr-btn-circle--outline-light">Scopri di più</a>
   <a href="#" class="fr-btn-circle fr-btn-circle--outline-dark">Scopri di più</a>

   Il cerchio è generato via CSS puro (no JS, no SVG inline).
   Ha un gap dal bordo del pill e una freccia → colorata.
   ========================================================================== */

/* --- Base condivisa ---
   Struttura HTML richiesta:
   <a href="#" class="fr-btn-circle fr-btn-circle--primary">
     <span class="fr-btn-circle__text">Testo</span>
     <span class="fr-btn-circle__icon">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M7 17L17 7M17 7H7M17 7V17"/>
       </svg>
     </span>
   </a>
   ---------------------------------------------------------------- */
.fr-btn-circle {
  font-family: var(--font-primary);
  font-size: clamp(13px, 0.19vw + 12.3px, 15px);
  font-weight: 500;
  letter-spacing: 0.01em;
  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: 5px 5px 5px 20px;
  cursor: pointer;
  transition:
    background-color var(--transition-fast) ease,
    background-position var(--transition-base) ease,
    color var(--transition-fast) ease,
    border-color var(--transition-fast) ease;
}

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

/* Il cerchio con SVG freccia */
.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;
}

/* Rimuoviamo ::after — non più usato */
.fr-btn-circle::after {
  display: none !important;
}

/* --- Variante primary: sfondo Sole, testo Bianco, cerchio Bianco, freccia Sole --- */
.fr-btn-circle--primary {
  background-color: var(--color-accent-1);
  color: var(--color-light);
  border: none;
}
.fr-btn-circle--primary::after {
  background-color: var(--color-light);
  color: var(--color-accent-1);
}
.fr-btn-circle--primary:hover {
  background-color: var(--color-accent-2);
  color: var(--color-light);
}
.fr-btn-circle--primary:hover::after {
  background-color: var(--color-accent-2);
  color: var(--color-light);
}

/* --- Variante dark: sfondo Carbone, testo Bianco, cerchio Bianco, freccia Carbone --- */
.fr-btn-circle--dark {
  background-color: var(--color-dark);
  color: var(--color-light);
  border: none;
}
.fr-btn-circle--dark::after {
  background-color: var(--color-light);
  color: var(--color-dark);
}
.fr-btn-circle--dark:hover {
  background-color: var(--color-light);
  color: var(--color-dark);
}
.fr-btn-circle--dark:hover::after {
  background-color: var(--color-dark);
  color: var(--color-light);
}

/* --- Variante gradient: Sole→Fuoco, testo Bianco, cerchio Bianco, freccia Sole --- */
.fr-btn-circle--gradient {
  background-image: linear-gradient(
    90deg,
    var(--color-accent-1),
    var(--color-accent-2),
    var(--color-accent-1)
  );
  background-size: 200% 100%;
  background-position: left center;
  color: var(--color-light);
  border: none;
}
.fr-btn-circle--gradient::after {
  background-color: var(--color-light);
  color: var(--color-accent-1);
}
.fr-btn-circle--gradient:hover {
  background-position: right center;
}
.fr-btn-circle--gradient:hover::after {
  background-color: var(--color-light);
  color: var(--color-accent-2);
}

/* --- Variante outline-light: bordo Bianco, testo Bianco, cerchio Bianco, freccia Carbone
       Su sfondi scuri --- */
.fr-btn-circle--outline-light {
  background-color: transparent;
  color: var(--color-light);
  border: 2px solid var(--color-light);
}
.fr-btn-circle--outline-light::after {
  background-color: var(--color-light);
  color: var(--color-dark);
}
.fr-btn-circle--outline-light:hover {
  background-color: var(--color-light);
  color: var(--color-dark);
}
.fr-btn-circle--outline-light:hover::after {
  background-color: var(--color-dark);
  color: var(--color-light);
}

/* --- Variante outline-dark: bordo Carbone, testo Carbone, cerchio Carbone, freccia Bianca
       Su sfondi chiari --- */
.fr-btn-circle--outline-dark {
  background-color: transparent;
  color: var(--color-dark);
  border: 2px solid var(--color-dark);
}
.fr-btn-circle--outline-dark::after {
  background-color: var(--color-dark);
  color: var(--color-light);
}
.fr-btn-circle--outline-dark:hover {
  background-color: var(--color-dark);
  color: var(--color-light);
}
.fr-btn-circle--outline-dark:hover::after {
  background-color: var(--color-light);
  color: var(--color-dark);
}

/* fr-btn-circle--white
   Sfondo Bianco, testo Carbone, cerchio Carbone, freccia Bianca
   Hover: sfondo Carbone, testo Bianco, cerchio Carbone (sparisce) */
.fr-btn-circle--white {
  background-color: var(--color-light);
  color: var(--color-dark);
  --circle-bg: var(--color-dark);
  --circle-color: var(--color-light);
}
.fr-btn-circle--white:hover {
  background-color: var(--color-dark);
  color: var(--color-light);
}
.fr-btn-circle--white:hover .fr-btn-circle__icon {
  background-color: var(--color-dark) !important;
  color: var(--color-light) !important;
}

@media (max-width: 480px) {
  .fr-btn-circle {
    padding: 4px 4px 4px 18px;
    gap: 8px;
  }
  .fr-btn-circle__icon {
    width: 1.9em;
    height: 1.9em;
  }
}


/* ==========================================================================
   12. BOTTONI SOCIAL
   ========================================================================== */

.fr-btn-social {
  font-family: var(--font-primary) !important;
  font-size: clamp(13px, 0.19vw + 12.3px, 15px) !important;
  font-weight: 500 !important;
  color: var(--color-light) !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-image: linear-gradient(
    90deg,
    var(--color-accent-2),
    var(--color-accent-1),
    var(--color-accent-2)
  ) !important;
  background-size: 200% 100% !important;
  background-position: left center !important;
  transition: background-position var(--transition-base) ease-in-out !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-position: right center !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.07em !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-1) !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='%23ee7400' 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;
}


/* ==========================================================================
   12. COLONNE FLUIDE
   ========================================================================== */

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


/* ==========================================================================
   13. CONTACT FORM 7
   ========================================================================== */

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

/* Label */
.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;
}

/* Campi */
.wpcf7 input,
.wpcf7 textarea {
  color: var(--color-dark) !important;
  background-color: #F5F1EB !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; }

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

/* Link */
.wpcf7 a {
  color: var(--color-accent-1) !important;
  transition: color var(--transition-fast) ease !important;
}
.wpcf7 a:hover {
  color: var(--color-accent-2) !important;
}

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

/* Layout submit row */
.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(255, 255, 255, 0.45) !important;
  font-size: 0.75em !important;
  margin: 0 !important;
  margin-top: 20px !important;
}

/* ==========================================================================
   14. UTILITY — reverse-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; }
}


/* ==========================================================================
   16. FROSTED GLASS
   Sfondo vetro scuro con blur — applicabile a section, row, colonna, modulo.
   Aggiungere .fr-glass alla CSS Class in Divi → Avanzate.

   Richiede che la section/row abbia un'immagine o sfondo sottostante.
   ========================================================================== */

/* Frosted glass — applicare sulla section con immagine di sfondo.
   Azzera eventuali layer di Divi che bloccherebbero il blur. */
.fr-glass,
.fr-glass.et_pb_section,
.fr-glass .et_pb_section_inner {
  background: rgba(20, 18, 15, 0.55) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Azzera i pseudo-elementi di Divi che possono coprire il bg */
.fr-glass::before,
.fr-glass::after {
  display: none !important;
}

/* Variante con bordo sottile */
.fr-glass--bordered,
.fr-glass--bordered.et_pb_section {
  background: rgba(20, 18, 15, 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;
}

/* ==========================================================================
   15. REDUCED MOTION
   ========================================================================== */

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

  .fr-grad-1,
  .fr-grad-2 {
    background-position: left center;
    transition: none;
  }

  .fr-grad-1-link,
  .fr-grad-2-link {
    background-position: center center;
    transition: background-position 400ms ease;
  }

  .fr-hl-1,
  .fr-hl-2 {
    background-size: 100% 65%;
    transition: none;
  }

  .fr-hl-1-link,
  .fr-hl-2-link {
    background-size: 200% 65%;
    transition: background-position 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-gradient.et_pb_button,
  .fr-btn-outline-light.et_pb_button,
  .fr-btn-outline-dark.et_pb_button {
    transition: none !important;
  }

}