/*
 Theme Name:     Tangoloft Divi Child
 Theme URI:      https://tangoloftudine.it
 Description:    Tema Child per il Design System di Tangoloft
 Author:         Christian Gregorutti
 Author URI:     https://tangoloftudine.it
 Template:       Divi
 Version:        1.0.0
*/

/* ==========================================================================
   HOGAR DESIGN SYSTEM - SITO PUBBLICO (tangoloftudine.it)
   Architettura: Fluid Native (Zero Pixel) | BEM-like | Divi Override
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CARICAMENTO FONTS ULTRA-PERFORMANCE (Self-Hosted)
   Nota: Assicurati che i font siano in preload nell'header del sito.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  src: url('/wp-content/themes/tangoloft-divi-child/fonts/MontserratVariable.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Scriptina';
    /* Il browser scarica il woff2. Se non lo supporta (rarissimo), passa al woff */
    src: url('/wp-content/themes/tangoloft-divi-child/fonts/Scriptina.woff2') format('woff2'),
         url('/wp-content/themes/tangoloft-divi-child/fonts/Scriptina.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Evita il flash di testo invisibile (FOIT) migliorando la SEO */
}

@font-face {
    font-family: 'Billionaire';
    src: url('/wp-content/themes/tangoloft-divi-child/fonts/BillionaireMediumGrunge.woff2') format('woff2'),
         url('/wp-content/themes/tangoloft-divi-child/fonts/BillionaireMediumGrunge.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* --------------------------------------------------------------------------
       1. PALETTE CROMATICA (Colori Globali)
       -------------------------------------------------------------------------- */
    --colore-primario: #ad974f;          /* Oro: brand identity, link e accenti principali */
    --colore-secondario: #535353;        /* Grigio Antracite: sfondi macro e sezioni strutturali */
    --colore-testo-titoli: #ffffff;      /* Bianco: applicato a tutte le intestazioni native */
    --colore-testo-principale: #ffffff;  /* Bianco: corpo del testo dei paragrafi */
    --colore-link: #ad974f;              /* Oro: stato normale dei collegamenti ipertestuali */
    --colore-accento: #932856;           /* Amaranto/Borgogna: elementi di interruzione visiva o alert */
    --colore-antracite: #2b2b2b;         /* Grigio scurissimo/Nero per testi ad alto contrasto (es. Menu) */

    --colore-sfondo-chiaro: #ffffff;     /* Bianco: per sfondi di sezioni come l'header */
    --colore-testo-scuro: #111111;       /* Nero/Grigio scurissimo: per testi su sfondi chiari/dinamici */    

    /* --------------------------------------------------------------------------
       2. FAMIGLIE TIPOGRAFICHE (Font Family)
       -------------------------------------------------------------------------- */
    --font-titoli: 'Billionaire', sans-serif;    /* Struttura monumentale e geometrica per H1, H2, H3 */
    --font-corpo: 'Montserrat', sans-serif;      /* Linee sans-serif pulite ad alta leggibilità per i testi */
    --font-pretitolo: 'Scriptina', cursive;      /* Corsivo calligrafico fluido per elementi decorativi */

    /* --------------------------------------------------------------------------
       3. SCALA TIPOGRAFICA FLUIDA (Dimensioni Testo via clamp)
       -------------------------------------------------------------------------- */
    --txt-banner: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);       /* Label piccolissime, top-bar o note legali */
    --txt-piccolo: clamp(0.875rem, 0.84rem + 0.16vw, 0.97rem);      /* Riassunti degli articoli (excerpt) o didascalie */
    --txt-paragrafo: clamp(0.95rem, 0.91rem + 0.18vw, 1.05rem);     /* Corpo del testo standard (Tag P) */
    --txt-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);                /* Intestazioni di terzo livello (Montserrat) */
    --txt-h2: clamp(2.2rem, 1.8rem + 2.88vw, 3.84rem);              /* Intestazioni di secondo livello (Dimensione 2XL) */
    --txt-h1: clamp(2.8rem, 2.07rem + 3.66vw, 5rem);                /* Titoli principali delle pagine (Dimensione 3XL) */

    /* Dimensioni fluide specifiche per i pretitoli (Scriptina) */
    --txt-pretitolo-h1: clamp(2.8rem, 2rem + 4.00vw, 5.2rem);       /* Variante monumentale per contesti Hero */
    --txt-pretitolo-h2: clamp(2.7rem, 2.18rem + 2.57vw, 4.5rem);    /* Variante elegante per titoli di sezione standard */

    /* Dettagli Tipografici */
    --spaziatura-lettere-titoli: 0.04em;                            /* Letter-spacing per dare respiro ai font maiuscoli */
    --radius-s: 5px;
    --spessore-linea: 2px;

    /* --------------------------------------------------------------------------
       4. RITMO VERTICALE E SPAZIATURE (Margini e Padding via clamp)
       -------------------------------------------------------------------------- */
    --spazio-xs: clamp(0.25rem, 0.2rem + 0.414vw, 0.8rem);
    --spazio-s: clamp(0.5rem, 0.357rem + 0.714vw, 1rem);            /* Distacco minimo (es. tra pretitolo e titolo) */
    --spazio-m: clamp(1rem, 0.857rem + 0.714vw, 1.5rem);            /* Distacco medio (es. spazio tra blocchi di testo) */
    --spazio-l: clamp(1.5rem, 1.071rem + 2.143vw, 3rem);            /* Distacco grande (es. spazio tra moduli diversi nella riga) */
    --spazio-xl: clamp(3rem, 2.086rem + 4.571vw, 5rem);             /* Padding verticale standard delle Sezioni macro */

    /* --------------------------------------------------------------------------
       5. GEOMETRIA DEL LAYOUT (Dimensionamento Righe)
       -------------------------------------------------------------------------- */
    --larghezza-max-layout: 80rem;       /* 1280px: limite massimo per le righe a contenitore fluido desktop */
    --larghezza-max-lettura: 90ch;       /* Limite di battute orizzontali per ottimizzare l'affaticamento visivo */
    --larghezza-riga-percentuale: 90%;   /* Spazio occupato dalle righe su schermi responsive/mobile (15% di margini) */

    /* --------------------------------------------------------------------------
       6. VARIABILI DI CALCOLO GLOBALI
       -------------------------------------------------------------------------- */
    /* Calcolo esatto dell'ingombro: Banner Top + Altezza Logo + Padding */
    --offset-header: calc((var(--txt-banner) * 1.6) + 5rem + 4vmin);    
}

/* ==========================================================================
   STRUTTURA E COMPONENTI CORE
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SEZIONI MACRO (I Blocchi Verticali)
   -------------------------------------------------------------------------- */
.et_builder_inner_content .et_pb_section {
    padding-top: var(--spazio-xl);
    padding-bottom: var(--spazio-xl);
    background-color: var(--colore-secondario);
    padding-left: 0;
    padding-right: 0;

	/* Toglie la distanza Flexbox nativa tra le Righe */
    gap: 0 !important;
    row-gap: 0 !important;	    
}

/* --------------------------------------------------------------------------
   2. RIGHE PREDEFINITE (I Contenitori di Layout)
   -------------------------------------------------------------------------- */
.et_builder_inner_content .et_pb_row {
    width: var(--larghezza-riga-percentuale);
    max-width: var(--larghezza-max-layout);
    padding-left: var(--spazio-m);
    padding-right: var(--spazio-m);
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA STANDARD (Testo e Intestazioni NATIVE)
   -------------------------------------------------------------------------- */

/* --- Corpo del testo (Paragrafi) --- */
#main-content p,
.et_builder_inner_content p,
.et_builder_inner_content .et_pb_text {
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-paragrafo) !important;
    font-weight: 400 !important; /* Impostazione globale a 300 (Light) */
    color: var(--colore-testo-principale) !important;
    line-height: 1.5em !important;
}

/* Assicuriamoci che anche il testo degli elenchi erediti il peso 300 */
#main-content ul:not([class]) li,
#main-content ol:not([class]) li,
.et_builder_inner_content ul:not([class]) li,
.et_builder_inner_content ol:not([class]) li {
    font-size: var(--txt-paragrafo) !important;
    font-weight: 400 !important;
    line-height: 1.5em !important;
    margin-bottom: 0.5rem !important;
}

/* --- Aumento Contrasto Globale per il Grassetto --- */
#main-content strong,
#main-content b,
.et_builder_inner_content strong,
.et_builder_inner_content b {
    font-weight: 700 !important; /* ExtraBold per staccare nettamente dal testo normale */
    color: var(--colore-testo-titoli) !important;
}

/* Regole comuni per H1 e H2 (Billionaire - Display) */
.et_builder_inner_content h1, 
.et_builder_inner_content h2, 
.et_builder_inner_content .et_pb_module h1,
.et_builder_inner_content .et_pb_module h2 {
    font-family: var(--font-titoli);
    color: var(--colore-testo-titoli);
    letter-spacing: var(--spaziatura-lettere-titoli);
    text-transform: lowercase;
    line-height: 1em;
    margin-top: 0; 
    margin-bottom: var(--spazio-m);
    text-align: center;
}

/* Regole specifiche per H3 (Montserrat - Strutturale) */
.et_builder_inner_content h3,
.et_builder_inner_content .et_pb_module h3 {
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-h3) !important;
    font-weight: 700 !important; /* Grassetto */
    color: var(--colore-testo-titoli);
    text-transform: uppercase !important; /* Effetto Maiuscoletto */
    letter-spacing: 0.08em !important; /* Respiro extra fondamentale per il maiuscolo */
    line-height: 1.3em !important;
    margin-top: 0;
    margin-bottom: var(--spazio-s); /* Margine più compatto rispetto ai titoli grandi */
    text-align: center;
}

/* Dimensioni specifiche per H1 e H2 */
.et_builder_inner_content h1, .et_builder_inner_content .et_pb_module h1 { font-size: var(--txt-h1); }
.et_builder_inner_content h2, .et_builder_inner_content .et_pb_module h2 { font-size: var(--txt-h2); }
/* (La dimensione dell'H3 è già gestita nella sua regola specifica qui sopra) */

/* --- Ripristino Globale Elenchi (Articoli, Pagine, Plugin) --- */
/* Colpisce solo gli elenchi "puri" senza classi di Divi */
#main-content ul:not([class]),
.et_builder_inner_content ul:not([class]) {
    list-style-type: disc !important;
    padding-left: 1rem !important;
    margin-bottom: var(--spazio-m) !important;
}

#main-content ol:not([class]),
.et_builder_inner_content ol:not([class]) {
    list-style-type: decimal !important;
    padding-left: 2rem !important;
    margin-bottom: var(--spazio-m) !important;
}

/* ==========================================================================
   UTILITY CLASSES (Universali)
   ========================================================================== */

/* Abilita lo scorrimento fluido (Smooth Scroll) per tutta la pagina */
html {
    scroll-behavior: smooth;
}

/* Previene lo scroll orizzontale causato da elementi a 100vw (es. Carosello Full Bleed) 
   Applicato a #main-content per non rompere il position: sticky dell'header */
#main-content {
    overflow-x: hidden !important;
}

/* Testo allineato al centro */
.testo-al-centro {
    text-align: center !important;
}

/* Applica il token spazio-s (stretto) al padding superiore */
.padding-top-s {
    padding-top: var(--spazio-s) !important;
}

/* Applica il token spazio-s (stretto) al padding inferiore */
.padding-bottom-s {
    padding-bottom: var(--spazio-s) !important;
}

/* Applica il token spazio-l (grande) al margine superiore e inferiore */
.margine-l {
    margin-top: var(--spazio-l) !important;
    margin-bottom: var(--spazio-l) !important;
}

/* Opzionale ma consigliato: varianti singole per avere controllo totale */
.margine-top-l {
    margin-top: var(--spazio-l) !important;
}

.margine-bottom-l {
    margin-bottom: var(--spazio-l) !important;
}

/* --- Pulsante Globale 1 --- */
.tlf-pulsante-1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--colore-testo-principale);
    border: var(--spessore-linea) solid var(--colore-testo-principale);
    border-radius: var(--radius-s);
    padding: 12px 32px;
    font-family: var(--font-corpo);
    font-size: var(--txt-paragrafo);
    text-transform: none;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tlf-pulsante-1:hover {
    background-color: var(--colore-primario);
    border-color: var(--colore-primario);
    color: var(--colore-testo-principale);
}

/* Pulsante Primario Pieno (Call to Action) */
.tlf-pulsante-primario {
    display: inline-flex; align-items: center; justify-content: center;
    background-color: var(--colore-primario) !important; 
    color: var(--colore-testo-scuro) !important;
    border-radius: var(--radius-s) !important; 
    padding: 1rem 2rem !important;
    font-family: var(--font-corpo) !important; 
    font-size: var(--txt-paragrafo) !important; 
    font-weight: 700 !important;
    text-transform: uppercase !important; 
    text-decoration: none !important; 
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(173, 151, 79, 0.2) !important;
    border: 0 !important;
}
.tlf-pulsante-primario:hover { 
    transform: translateY(-3px) !important; 
    box-shadow: 0 10px 25px rgba(173, 151, 79, 0.5) !important; 
}

@media (max-width: 768px) {
    
    /* 1. Forza la gabbia di Divi ad aprirsi */
    #main-content .et_pb_button_module_wrapper:has(.tlf-pulsante-primario) {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }

    /* 2. Forza il bottone a esplodere al 100% dello spazio disponibile */
    #main-content a.tlf-pulsante-primario,
    #main-content button.tlf-pulsante-primario {
        display: flex !important; 
        width: 100% !important;
        max-width: 100% !important; /* Uccide i limiti nascosti di Divi */
        box-sizing: border-box !important; 
        justify-content: center !important; 
        align-items: center !important;
    }
}

/* Etichetta informativa (Sostituisce Scriptina per testi lunghi) */
.tlf-etichetta-top {
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-piccolo) !important;
    color: var(--colore-primario) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: var(--spazio-s) !important;
}

/* Inversione colori per testi su sfondi chiari */
.tlf-tema-chiaro,
.tlf-tema-chiaro h1,
.tlf-tema-chiaro h2,
.tlf-tema-chiaro h3,
.tlf-tema-chiaro p {
    color: var(--colore-antracite) !important;
}

/* ==========================================================================
   COMPONENTI CUSTOM
   ========================================================================== */

/* --------------------------------------------------------------------------
   COMPONENTE: Pre titoli
   -------------------------------------------------------------------------- */

/* Regole comuni condivise per evitare duplicazioni (DRY) */
.pre-titolo1, 
.pre-titolo2 {
    font-family: var(--font-pretitolo);
    color: var(--colore-primario);
    display: block;
    text-transform: none;
    letter-spacing: 0; /* Scriptina non tollera letter-spacing espansi */
    line-height: 1.1em;
    margin-top: 0;
    margin-bottom: var(--spazio-s); /* Distacco controllato dal token piccolo */
    padding: 0;
}

/* Variante 1: Grandezza monumentale abbinata all'H1 */
.pre-titolo1 {
    font-size: var(--txt-pretitolo-h1);
}

/* Variante 2: Grandezza elegante standard abbinata all'H2 */
.pre-titolo2 {
    font-size: var(--txt-pretitolo-h2);
}

/* Ottimizzazione del modulo successivo (Elimina collisioni di margini) */
.pre-titolo1 + .et_pb_heading,
.pre-titolo2 + .et_pb_heading,
.pre-titolo1 + h1, .pre-titolo1 + h2,
.pre-titolo2 + h1, .pre-titolo2 + h2 {
    margin-top: 0 !important;
}

/* Riga decorativa per i pre-titoli2 */
/* 1. Creiamo respiro sotto l'H2 interessato */
.et_builder_inner_content h2:has(.pre-titolo2) {
    padding-bottom: var(--spazio-s) !important;
}

/* 2. Iniettiamo la linea fisicamente sotto l'intero H2 tramite ::after */
.et_builder_inner_content h2:has(.pre-titolo2)::after {
    content: "" !important;
    display: block !important;
    width: 15svh !important;        /* La tua eccellente scelta di usare l'altezza del viewport */
    height:  var(--spessore-linea) !important;         /* Spessore della linea */
    background-color: var(--colore-sfondo-chiaro) !important;
    
    /* Gestione della spaziatura e dell'allineamento (Centrato di default) */
    margin-top: var(--spazio-s) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --------------------------------------------------------------------------
   COMPONENTE: Banner Top Bar / Avvisi (Applicato alla SEZIONE)
   -------------------------------------------------------------------------- */

/* 1. La Sezione Madre */
.et_builder_inner_content .et_pb_section.banner {
    background-color: var(--colore-primario) !important; /* Forza lo sfondo Oro */
    padding: 1vmin !important;
    margin: 0 !important;
}

/* 2. La Riga Contenuta (Discendente diretta della sezione banner) */
.et_builder_inner_content .et_pb_section.banner .et_pb_row {
    width: 100% !important;       /* Forziamo la riga a estendersi full-width se necessario */
    max-width: 100% !important;   /* Sovrascrive il var(--larghezza-max-layout) delle righe standard */
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 3. Il Modulo di Testo Interno (Discendente del banner) */
.et_builder_inner_content .et_pb_section.banner .et_pb_text {
    padding: 0 !important;
    margin: 0 !important;
    text-align: left;
}

/* 4. Sanificazione dei tag interni al modulo testo del banner */
.et_builder_inner_content .et_pb_section.banner .et_pb_text p,
.et_builder_inner_content .et_pb_section.banner .et_pb_text span {
    font-size: var(--txt-banner) !important;    /* Forza la dimensione microscopica fluida */
    color: var(--colore-testo-titoli) !important; /* Forza il testo bianco per contrasto sull'oro */
    margin: 0 !important;                       /* Elimina i margini del tag paragrafo */
}

/* --------------------------------------------------------------------------
   COMPONENTE: Header / Navigazione Sticky (ID: #menu)
   -------------------------------------------------------------------------- */

/* 1. La sezione madre (#menu)
   ------------------------------------------------------------------------------ */
.et_builder_inner_content #menu.et_pb_section {
    background-color: var(--colore-sfondo-chiaro) !important;     
    position: sticky !important;              
    top: 0;
    z-index: 9999;                            
    
    /* Spaziatura in visualizzazione normale */
    padding: 0 !important;
    margin: 0 !important;
    
    /* Diciamo alla sezione di animare il padding */
    transition: padding 0.3s ease-in-out !important;
}

/* Quando è sticky, la sezione pialla il padding per avvolgere il logo piccolo */
.et_builder_inner_content #menu.et_pb_section.et_pb_sticky {
    padding: 0 !important; 
}

/* Assicura che l'header e il menu sticky siano SEMPRE sopra a tutto, 
   anche fuori dalle pagine costruite con il builder di Divi */
#main-header, 
.et-l--header,
#menu.et_pb_section {
    z-index: 99999 !important;
}

/* 2. La riga interna (Contenitore del modulo menu)
   ------------------------------------------------------------------------------ */
.et_builder_inner_content #menu .et_pb_row {
    padding: 0 !important;                /* Azzeramento totale di padding e margini */
    margin: 0 !important;
    }


/* 3. Il modulo menu nativo
   ------------------------------------------------------------------------------ */
.et_builder_inner_content #menu .et_pb_menu {
    padding: 0 !important;                    /* Pialla qualsiasi spaziatura di fabbrica del modulo */
    margin: 0 !important;
    background-color: transparent !important; /* Forza l'ereditarietà dello sfondo bianco della sezione */
}


/* 4. IL LOGO / ICONA (Gestione della scala responsive)
   ------------------------------------------------------------------------------ */
/* Intercettiamo i selettori dell'immagine del logo usati da Divi */
.et_builder_inner_content #menu .et_pb_menu__logo img,
.et_builder_inner_content #menu .et_pb_menu__logo-wrap img,
.et_builder_inner_content #menu .et_pb_menu img {
    height: 5rem !important;                  /* Dimensione logo normale */
    max-height: 5rem !important;
    width: auto !important;                    /* Mantiene le proporzioni geometriche del logo */
    
    /* Transizione fluida per il ridimensionamento del logo */
    transition: height 0.3s ease-in-out, max-height 0.3s ease-in-out !important;
}

/* Dimensione del Logo / Icona quando la sezione diventa STICKY */
.et_builder_inner_content #menu.et_pb_section.et_pb_sticky .et_pb_menu__logo img,
.et_builder_inner_content #menu.et_pb_section.et_pb_sticky .et_pb_menu__logo-wrap img,
.et_builder_inner_content #menu.et_pb_section.et_pb_sticky .et_pb_menu img {
    height: 2rem !important;                  /* Il logo si rimpicciolisce a 3rem */
    max-height: 2rem !important;
}

/* 5. Tipografia del menu e Colore Antracite
   ------------------------------------------------------------------------------ */
.et_builder_inner_content #menu .et_pb_menu__menu nav ul li a,
.et_builder_inner_content #menu .et-menu-nav li a {
    text-transform: uppercase !important;
    font-family: var(--font-corpo) !important;       
    font-size: var(--txt-piccolo) !important;        
    font-weight: 600 !important; 
    color: var(--colore-antracite) !important; 
    position: relative; 
    /* FIX: Rimosso il transition sul colore per evitare l'effetto oro */
}

/* 5.1 Effetto Hover: Linea orizzontale dal centro (Solo Desktop) */
@media (min-width: 981px) {
    .et_builder_inner_content #menu .et_pb_menu__menu nav ul li a::after {
        content: '' !important;
        position: absolute !important;
        
        /* FIX DEFINITIVO: Ancoriamo al centro verticale e spingiamo giù in base al font */
        top: 50% !important; 
        bottom: auto !important; 
        margin-top: 0.8em !important; /* Aumenta o diminuisci questo valore per alzare/abbassare la linea */
        left: 0 !important;
        
        width: 100% !important;
        height: var(--spessore-linea) !important;
        background-color: var(--colore-primario) !important;
        
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .et_builder_inner_content #menu .et_pb_menu__menu nav ul li a:hover::after {
        transform: scaleX(1);
    }
}

/* 5.2 Pulsante Premium "Area Iscritti" (Classe: tlf-menu-btn) */
/* FIX: Usiamo Flexbox sul LI per centrare il bottone senza farlo esplodere in altezza */
@media (min-width: 981px) {
    .et_builder_inner_content #menu .et_pb_menu__menu nav ul li.tlf-menu-btn {
        display: flex !important;
        align-items: center !important;
        margin-left: var(--spazio-m) !important;
    }
}

.et_builder_inner_content #menu .et_pb_menu__menu nav ul li.tlf-menu-btn a,
.et_builder_inner_content #menu .et_mobile_menu li.tlf-menu-btn a {
    background-color: var(--colore-antracite) !important;
    color: var(--colore-testo-titoli) !important; 
    border-radius: var(--radius-s) !important;
    
    /* FIX: Resettiamo il line-height di Divi e applichiamo il nostro padding */
    line-height: 1.2em !important;
    padding: 0.6rem 1.2rem !important;
    display: inline-block !important;
}

/* Disabilita la linea hover per il bottone */
@media (min-width: 981px) {
    .et_builder_inner_content #menu .et_pb_menu__menu nav ul li.tlf-menu-btn a::after {
        display: none !important;
    }
    .et_builder_inner_content #menu .et_pb_menu__menu nav ul li.tlf-menu-btn a:hover {
        box-shadow: 0 4px 15px rgba(173, 151, 79, 0.4);
    }
}

/* 6. ECCEZIONE MOBILE: Controllo dello Shrink e Allineamento
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    
    .et_builder_inner_content #menu.et_pb_section.et_pb_sticky {
        padding-top: var(--spazio-s) !important; 
        padding-bottom: var(--spazio-s) !important;
    }

    .et_builder_inner_content #menu.et_pb_section.et_pb_sticky .et_pb_menu__logo img,
    .et_builder_inner_content #menu.et_pb_section.et_pb_sticky .et_pb_menu__logo-wrap img,
    .et_builder_inner_content #menu.et_pb_section.et_pb_sticky .et_pb_menu img {
        height: 2rem !important; 
        max-height: 2rem !important;
    }

    .et_builder_inner_content #menu.et_pb_section.et_pb_sticky .mobile_menu_bar {
        padding-bottom: 0 !important; 
        margin-bottom: 0 !important;
    }
    
    /* FIX: Allineamento a destra e MAIUSCOLO su Mobile */
    .et_builder_inner_content #menu .et_mobile_menu {
        text-align: right !important;
    }
    
    .et_builder_inner_content #menu .et_mobile_menu li a {
        text-align: right !important;
        padding-right: var(--spazio-m) !important; 
        text-transform: uppercase !important; /* FIX: Forza il maiuscolo */
    }
    
    /* Adattamento del bottone su mobile */
    .et_builder_inner_content #menu .et_mobile_menu li.tlf-menu-btn {
        padding: var(--spazio-s) var(--spazio-m) var(--spazio-m) 0 !important;
    }
    .et_builder_inner_content #menu .et_mobile_menu li.tlf-menu-btn a {
        display: inline-block !important;
    }
}

/* --------------------------------------------------------------------------
   COMPONENTE: Sezione Hero (.hero)
   -------------------------------------------------------------------------- */

.et_builder_inner_content .et_pb_section.hero {
    /* 1. Calcolo matematico per riempire l'altezza esatta */
    /* Usiamo 'svh' (Small Viewport Height) invece di 'vh' per evitare che su mobile 
       la barra degli indirizzi del browser "tagli" la parte inferiore della hero */
    min-height: calc(100svh - var(--offset-header)) !important;
    
    /* 2. Flexbox per centrare il contenuto verticalmente */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    
    /* 3. Rimozione dei padding verticali macro se vuoi che il centramento sia geometricamente puro, 
       altrimenti lasciali di default per avere un margine di sicurezza interno */
    padding-top: var(--spazio-s) !important;
    padding-bottom: var(--spazio-s) !important;
    
    /* Sfondo provvisorio per testare l'ingombro (puoi rimuoverlo dopo) */
    background-color: var(--colore-secondario);
}

/* Assicuriamoci che la riga all'interno della hero supporti il layout flex */
.et_builder_inner_content .et_pb_section.hero .et_pb_row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* VARIANTI HERO: Allineamento verticale guidato dall'immagine di sfondo
   -------------------------------------------------------------------------- */

/* Variante Alto: spinge la riga verso l'alto */
.et_builder_inner_content .et_pb_section.hero.hero--alto {
    justify-content: flex-start !important;
}

/* Variante Basso: spinge la riga verso il basso */
.et_builder_inner_content .et_pb_section.hero.hero--basso {
    justify-content: flex-end !important;
}

/* --------------------------------------------------------------------------
   COMPONENTE: Separatore (Linea)
   -------------------------------------------------------------------------- */

.et_builder_inner_content .et_pb_divider {
    width: 20svh;
    max-width: 100%;
    margin-left: auto; /* Centra la linea orizzontalmente */
    margin-right: auto;
}

/* Colpiamo l'elemento interno che Divi usa per disegnare fisicamente la linea */
.et_builder_inner_content .et_pb_divider::before {
    content: "" ;
    display: block;
    border-top-width:  var(--spessore-linea);
    border-top-style: solid;
    border-top-color: var(--colore-testo-principale);
}

/* --------------------------------------------------------------------------
   COMPONENTE: Calendario Corsi (Tango Loft Plugin)
   -------------------------------------------------------------------------- */

.tlf-calendario-wrapper {
    width: 100%;
    font-family: var(--font-corpo);
}

.tlf-header-giorno {
    text-align: center;
    padding: var(--spazio-m) var(--spazio-s);
    color: var(--colore-testo-titoli);
    font-size: var(--txt-paragrafo);
    letter-spacing: var(--spaziatura-lettere-titoli);
    text-transform: uppercase;
    border-bottom:  var(--spessore-linea) solid var(--colore-testo-principale);
}

.tlf-card-corso {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spazio-s) var(--spazio-s);
    text-decoration: none;
    color: var(--colore-testo-scuro); /* Testo scuro forzato per contrastare i colori di sfondo dinamici dei corsi */
    border-bottom:  var(--spessore-linea) solid var(--colore-testo-principale);
    transition: opacity 0.2s ease;
    flex-grow: 1;
}

.tlf-titolo-corso {
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--txt-piccolo);
    margin-bottom: 0;
    text-align: center;
}

.tlf-orario-corso {
    font-size: var(--txt-piccolo);
    font-weight: 400;
}

/* --- DESKTOP (Grid a 5 colonne) --- */
@media (min-width: 769px) {
    .tlf-calendario-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background-color: var(--colore-secondario); /* Usa il tuo Grigio Antracite */
        border-top:  var(--spessore-linea) solid var(--colore-testo-principale);
        border-left:  var(--spessore-linea) solid var(--colore-testo-principale);
        margin-top: var(--spazio-m);
    }

    .tlf-colonna-giorno {
        border-right:  var(--spessore-linea) solid var(--colore-testo-principale);
        display: flex;
        flex-direction: column;
    }


    .tlf-card-corso:hover {
        opacity: 0.85;
    }

}

/* --- MOBILE (Flexbox impilato) --- */
@media (max-width: 768px) {
    .tlf-calendario-grid {
        display: flex;
        flex-direction: column;
        background-color: var(--colore-secondario);
        padding: var(--spazio-m);
    }

    .tlf-card-corso {
        border-left:  var(--spessore-linea) solid var(--colore-testo-principale);
        border-right:  var(--spessore-linea) solid var(--colore-testo-principale);
    }

    .tlf-colonna-giorno {
        margin-bottom: var(--spazio-l);
    }

    .tlf-colonna-giorno:last-child {
        margin-bottom: 0;
    }

    .tlf-card-corso:last-child {
        border-bottom:  var(--spessore-linea) solid var(--colore-testo-principale);
    }

}

/* ==========================================================================
   COMPONENTE: Elenco Corsi (Shortcode [tangoloft_elenco_corsi])
   ========================================================================== */

.tlf-elenco-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spazio-xl);
}

.tlf-corso-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spazio-l);
    background-color: transparent;
    border: none;
    padding: 0;
    /* Spostato qui dall'H3 per far funzionare perfettamente le ancore */
    scroll-margin-top: calc(var(--offset-header) + var(--spazio-m)); 
}

/* --- Colonna Testo --- */
.tlf-corso-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tlf-corso-desc {
    font-family: var(--font-corpo);
    font-size: var(--txt-paragrafo);
    color: var(--colore-testo-principale);
    margin-bottom: var(--spazio-m);
}

/* --- Infografica Orari (Icone SVG) --- */
.tlf-corso-infografica {
    margin-bottom: var(--spazio-s);
}

.tlf-info-label {
    font-family: var(--font-corpo);
    font-size: var(--txt-piccolo);
    color: var(--colore-testo-principale);
    margin-bottom: var(--spazio-s);
}

.tlf-info-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tlf-info-lista li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.tlf-info-blocco {
    display: flex;
    align-items: center;
}

.tlf-icona-svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    color: var(--corso-colore); /* Eredita il colore dinamico */
    flex-shrink: 0;
}

.tlf-info-testo {
    font-family: var(--font-corpo);
    font-size: var(--txt-paragrafo);
    font-weight: 500;
    color: var(--colore-testo-principale);
}

/* --- Pulsante --- */
.tlf-corso-action {
    margin-top: auto;
}

/* --- Colonna Immagine (Ratio 3:2 e Hover) --- */
.tlf-corso-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-s);
    filter: brightness(1.25);

    /* Su Mobile: Forza l'immagine a stare SOPRA il testo */
    order: -1; 
}

.tlf-corso-image-link {
    display: block;
    width: 100%;
    height: 100%;
}

.tlf-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease; /* Transizione fluida per la luminosità */
}

/* Effetto Hover: Aumenta la luminosità del 50% */
.tlf-corso-image-link:hover .tlf-img-cover {
    filter: brightness(1.25);
}

.tlf-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--colore-secondario);
    font-family: var(--font-titoli);
    font-size: var(--txt-h2);
    color: rgba(255,255,255,0.2);
    transition: filter 0.3s ease;
}

.tlf-corso-image-link:hover .tlf-img-placeholder {
    filter: brightness(1.15);
}

/* --- DESKTOP OVERRIDE (2 Colonne) --- */
@media (min-width: 769px) {
    .tlf-corso-row {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
    
    .tlf-corso-content {
        padding-right: var(--spazio-l);
    }
    
    .tlf-corso-image {
        /* Su Desktop: Ripristina l'ordine naturale (Immagine a destra) */
        order: 0; 
    }
}

/* ==========================================================================
   COMPONENTE: Infografica Percorso Corsi (Subway Map)
   Shortcode: [tlf-infografica-corsi]
   ========================================================================== */

.tlf-subway-wrapper {
    width: 100%;
    padding: var(--spazio-xl) 0;
    overflow: hidden; /* Previene scroll orizzontali accidentali */
}

.tlf-subway-track {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* La linea bianca (Binario) */
.tlf-subway-line {
    position: absolute;
    background-color: var(--colore-testo-principale); /* Bianco */
    z-index: 1;
}

/* La singola fermata */
.tlf-subway-stop {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    position: relative;
    z-index: 2;
    flex: 1; /* Distribuisce lo spazio equamente su desktop */
    text-align: center;
    outline: none;
}

/* Il pallino colorato */
.tlf-subway-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--corso-colore);
    border: 2px solid var(--colore-testo-principale); /* Bordo bianco per staccare dalla linea */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Effetto rimbalzo fluido */
    box-shadow: 0 0 0 0 rgba(255,255,255,0);
}

/* Il gruppo che contiene Titolo e Focus */
.tlf-subway-text-group {
    margin-top: var(--spazio-m);
    transition: transform 0.3s ease;
}

/* L'etichetta del corso */
.tlf-subway-label,
#main-content .st-faq-content .tlf-subway-wrapper div.tlf-subway-label {
    font-family: var(--font-titoli) !important;
    font-size: clamp(1.8rem, 1.44rem + 1.68vw, 2.64rem) !important; /* diverso da --txt-h3 che ora è calibrato sul Montserrat */
    color: var(--colore-testo-titoli);
    font-weight: 400 !important;
    text-transform: lowercase;
    letter-spacing: var(--spaziatura-lettere-titoli);
    transition: color 0.3s ease;
    line-height: 0.8 !important;
}

/* Il Focus (Micro-descrizione) */
.tlf-subway-focus,
#main-content .st-faq-content .tlf-subway-wrapper div.tlf-subway-focus {
    font-family: var(--font-corpo);
    font-size: var(--txt-paragrafo);
    font-weight: 300 !important; /* Peso leggero come richiesto */
    color: var(--colore-testo-principale);
    margin-top: var(--spazio-s);
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.2 !important;
}

/* --- EFFETTI HOVER --- */
.tlf-subway-stop:hover .tlf-subway-dot {
    transform: scale(1.5); /* Ingrandisce del 50% */
    box-shadow: 0 0 15px var(--corso-colore); /* Leggero bagliore del colore del corso */
}

.tlf-subway-stop:hover .tlf-subway-text-group {
    transform: translateY(5px); /* Si sposta leggermente in basso per fare spazio al pallino ingrandito */
}

.tlf-subway-stop:hover .tlf-subway-label {
    color: var(--corso-colore); /* Il testo prende il colore del corso */
}

/* --- DESKTOP LAYOUT (Orizzontale) --- */
@media (min-width: 769px) {
    .tlf-subway-line {
        top: calc(12px - (var(--spessore-linea) / 2));
        left: 5%; /* Non parte dal bordo estremo */
        right: 5%;
        height: var(--spessore-linea);
    }
}

/* --- MOBILE LAYOUT (Verticale) --- */
@media (max-width: 768px) {
    .tlf-subway-track {
        flex-direction: column;
        gap: var(--spazio-xl);
        padding-left: 20px; /* Spazio per la linea a sinistra */
    }

    .tlf-subway-line {
        top: 10px;
        bottom: 10px;
        left: calc(32px - (var(--spessore-linea) / 2));
        width: var(--spessore-linea);
        height: auto;
    }

    .tlf-subway-stop {
        flex-direction: row;
        text-align: left;
        width: 100%;
    }

    .tlf-subway-text-group {
        margin-top: 0;
        margin-left: var(--spazio-m);
    }

    .tlf-subway-focus {
        margin-top: var(--spazio-xs)
    }

    .tlf-subway-stop:hover .tlf-subway-label {
        transform: translateX(10px); /* Su mobile si sposta a destra, non in basso */
    }
}

/* ==========================================================================
   COMPONENTE: Pagina Singolo Corso (/corsi/slug/)
   ========================================================================== */

/* Forza lo sfondo grigio scuro su tutta la pagina del singolo corso, sovrascrivendo il bianco di Divi */
.tlf-single-page-bg {
    background-color: var(--colore-secondario) !important;
    min-height: 100vh;
    overflow-x: hidden; /* <-- AGGIUNTO: Previene la scrollbar orizzontale del browser */
}

/* Elimina la linea verticale della sidebar di default di Divi */
.tlf-single-page-bg .container::before {
    display: none !important;
}

/* --- Classe di Accessibilità (Nasconde l'H1 senza penalizzare la SEO) --- */
.tlf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* --- Immagine Hero Effetto Cinematico --- */
.tlf-single-hero {
    position: relative;
    z-index: 1; /* <-- FIX: Crea un contesto chiuso per i figli */
    width: 100%;
    height: auto;
    padding: 0; /* Rimosso il padding: l'altezza ora combacia perfettamente con l'immagine */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    background-color: var(--colore-secondario);
}

/* La magia della sfocatura (Visibile solo ai lati su schermi larghi) */
.tlf-hero-blur-overlay {
    position: absolute;
    inset: -50px; 
    background: inherit;
    filter: blur(25px) brightness(0.8); 
    z-index: 1;
}

/* L'immagine in primo piano (Desktop) */
.tlf-single-hero-img-contain {
    position: relative;
    z-index: 2;
    display: block;
    margin: 0 auto; /* Centra l'immagine orizzontalmente */
    
    /* Allineamento millimetrico con il blocco di testo (.tlf-single-content-wrapper) */
    width: var(--larghezza-riga-percentuale) !important; 
    max-width: var(--larghezza-max-lettura) !important; /* <-- IL SEGRETO È QUI: 90ch invece di 75rem */
    height: auto !important; 
    
    border-radius: 0; 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); 
}

/* --- MOBILE OVERRIDE (Sotto i 768px) --- */
@media (max-width: 768px) {
    .tlf-hero-blur-overlay {
        display: none; /* Inutile su mobile se l'immagine è al 100% */
    }
    
    .tlf-single-hero-img-contain {
        width: 100% !important; /* Full bleed (a tutto schermo) */
        max-width: 100% !important;
        box-shadow: none; /* Rimuoviamo l'ombra perché l'immagine tocca i bordi */
    }
}

/* --- Navigazione Hero (Frecce Precedente/Successivo) --- */
.tlf-hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.4); /* Sfondo scuro semitrasparente */
    backdrop-filter: blur(5px); /* Effetto vetro */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--colore-testo-principale);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.tlf-hero-nav svg {
    width: 30px;
    height: 30px;
}

.tlf-hero-prev {
    left: var(--spazio-m);
}

.tlf-hero-next {
    right: var(--spazio-m);
}

.tlf-hero-nav:hover {
    background-color: var(--colore-primario);
    border-color: var(--colore-primario);
    transform: translateY(-50%) scale(1.1); /* Leggero ingrandimento */
    color: var(--colore-testo-scuro);
}

/* Su mobile le facciamo leggermente più piccole ma le spostiamo più ai bordi per non coprire la foto */
@media (max-width: 768px) {
    .tlf-hero-nav {
        width: 45px;
        height: 45px;
    }
    .tlf-hero-nav svg {
        width: 24px;
        height: 24px;
    }
    .tlf-hero-prev {
        left: 10px;
    }
    .tlf-hero-next {
        right: 10px;
    }
}

/* --- Contenitore Centrale --- */
.tlf-single-container {
    padding-top: var(--spazio-l) !important;
    padding-bottom: var(--spazio-xl);

    /* OVERRIDE DIVI: Diciamo al container di usare i nostri Token invece dell'80%/1080px di default */
    width: var(--larghezza-riga-percentuale) !important;
    max-width: var(--larghezza-max-layout) !important;
}

.tlf-single-content-wrapper {
    max-width: var(--larghezza-max-lettura); /* 90ch: Ottimizza la lettura evitando righe troppo lunghe */
    margin: 0 auto; /* Centra il blocco di testo nella pagina */
}

/* --- Tipografia Specifica per la Pagina Singola --- */
.tlf-single-content-wrapper h2 {
    /* 1. Recuperiamo i superpoteri del Design System */
    font-family: var(--font-titoli);
    font-size: var(--txt-h2);
    color: var(--colore-testo-titoli);
    letter-spacing: var(--spaziatura-lettere-titoli);
    text-transform: lowercase;
    line-height: 1.2em;
    
    /* 2. Azzeriamo gli spazi esagerati */
    margin-top: 0; /* Il container padre ha già il suo padding-top */
    margin-bottom: var(--spazio-m);
    padding: 0;
}

/* H3: Font ordinario, maiuscoletto (Uppercase Bold) */
.tlf-single-content-wrapper h3 {
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-paragrafo) !important;
    font-weight: 700 !important;
    color: var(--colore-testo-titoli) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-top: var(--spazio-l);
    margin-bottom: var(--spazio-s);
}

/* --- Descrizione Lunga --- */
.tlf-single-descrizione {
    margin-bottom: var(--spazio-xl);
}

/* --- Box Dettagli (Durata, Abbonamento, Prova) --- */
.tlf-single-dettaglio-box {
    margin-bottom: var(--spazio-m);
}

.tlf-single-dettaglio-box p {
    font-family: var(--font-corpo);
    font-size: var(--txt-paragrafo);
    color: var(--colore-testo-principale);
    line-height: 1.5;
    margin: 0;
}

/* --- Recensioni --- */
.tlf-single-recensioni {
    margin-top: 0 !important;
    padding-top: var(--spazio-m);
    border-top: var(--spessore-linea) solid rgba(255, 255, 255, 0.1);
    text-align: center; /* Centra il pre-titolo e l'H2 */
}

.tlf-single-recensioni .pre-titolo2 {
    margin-bottom: 0; /* Riduce lo spazio tra "Recensioni" e "Dicono del corso..." */
}

.tlf-single-recensioni h2 {
    margin-top: 0;
}

.tlf-recensioni-content {
    margin-top: var(--spazio-l);
    text-align: left; /* Ripristina l'allineamento a sinistra per le card interne */
}

/* ==========================================================================
   15. MODULO RECENSIONI (Site Toolkit - Splide Carousel per Tango Loft)
   ========================================================================== */

/* 1. IL WRAPPER: FULL BLEED (Da bordo a bordo dello schermo) */
.st-reviews-wrapper {
    /* Il trucco magico per rompere i margini di Divi e toccare i bordi del browser */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    margin-top: var(--spazio-xl) !important;
    margin-bottom: var(--spazio-xl) !important;
}

/* --------------------------------------------------------------------------
   15.1 IL CAROSELLO E LA TRACCIA
   -------------------------------------------------------------------------- */
.st-splide-container {
    padding-bottom: var(--spazio-xl) !important;
}

.st-splide-container .splide__track {
    overflow: hidden !important; /* per evitare che le card fuoriescano dalla pagina allargandola */ 
    padding-top: 0rem !important;
    padding-bottom: 2rem !important; /* spazio ai dots */
    margin-top: -3rem !important;
    margin-bottom: -3rem !important;
}

/* --------------------------------------------------------------------------
   15.2 LE CARD (Stile "Google" - Light & Clean)
   -------------------------------------------------------------------------- */
.st-splide-container .splide__slide {
    width: 85vw !important; 
}

@media (min-width: 981px) {
    .st-splide-container .splide__slide {
        width: calc((100% - 4rem) / 3) !important; 
    }
    
    .st-splide-container .splide__slide:not(.is-active) .st-review-card {
        cursor: pointer !important;
    }
    
    /* --- FRECCE DI NAVIGAZIONE (UX) --- */
    .st-splide-container .splide__slide.is-prev .st-review-card::after {
        font-family: "ETmodules" !important;
        content: "4" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 10rem !important; 
        color: var(--colore-primario) !important;
        z-index: 10 !important;
        pointer-events: none !important;
        transition: all 0.3s ease !important;
    }

    .st-splide-container .splide__slide.is-next .st-review-card::after {
        font-family: "ETmodules" !important;
        content: "5" !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 10rem !important;
        color: var(--colore-primario) !important;
        z-index: 10 !important;
        pointer-events: none !important;
        transition: all 0.3s ease !important;
    }

    .st-splide-container .splide__slide.is-prev:hover .st-review-card::after,
    .st-splide-container .splide__slide.is-next:hover .st-review-card::after {
        color: var(--colore-sfondo-chiaro) !important; /* Freccia bianca al passaggio del mouse */
        transform: translate(-50%, -50%) scale(1.2) !important;
    }
}

.st-review-card {
    /* FIX: Sfondo bianco e testo scuro (Stile Google) */
    background-color: var(--colore-sfondo-chiaro) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important; /* Bordo grigio leggerissimo */
    color: var(--colore-testo-scuro) !important;
    border-radius: 8px !important;
    padding: var(--spazio-m) var(--spazio-m) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    word-wrap: break-word !important;

    opacity: 0.5 !important; /* Leggermente più visibili le laterali rispetto a prima */
    transform: scale(0.85) !important;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; /* Ombra base leggerissima */
}

/* Stato Attivo (La card al centro) */
.splide__slide.is-active .st-review-card {
    opacity: 1 !important;
    transform: scale(1) !important;
    
    /* FIX OMBA: Doppio livello di ombra (Glow + Profondità) con opacità aumentata */
    box-shadow: 0 0 30px rgba(173, 151, 79, 0.4) !important;
    
    border-color: var(--colore-primario) !important;
    border-width: var(--spessore-linea) !important; 
}

/* --------------------------------------------------------------------------
   15.3 TIPOGRAFIA DELLA RECENSIONE
   -------------------------------------------------------------------------- */
.st-review-text {
    flex-grow: 1 !important;
    margin-bottom: var(--spazio-m) !important;
    text-align: center !important;
}

/* FIX SPECIFICITÀ: Aggiungiamo #main-content e .et_builder_inner_content 
   per battere le regole globali di Divi che forzavano il testo bianco */
#main-content .st-reviews-wrapper .st-review-text p,
.et_builder_inner_content .st-reviews-wrapper .st-review-text p {
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-paragrafo) !important;
    color: var(--colore-testo-scuro) !important; /* Ora il testo scuro vincerà */
    line-height: 1.6 !important;
    font-style: italic !important; 
    margin: 0 !important;
    white-space: normal !important;
}

/* --------------------------------------------------------------------------
   15.4 AUTORE E METADATI
   -------------------------------------------------------------------------- */
.st-review-author {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--spazio-s) !important;
    margin-top: auto !important; 
}

.st-review-avatar,
.st-review-avatar-placeholder {
    width: 3.5rem !important;
    height: 3.5rem !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    border: 2px solid var(--colore-primario) !important; /* Bordo Oro */
}

.st-review-avatar-placeholder {
    background-color: rgba(0,0,0,0.05) !important; /* Grigio chiarissimo */
    color: var(--colore-primario) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-titoli) !important;
    font-size: var(--txt-h3) !important;
    line-height: 1 !important;
}

.st-review-meta {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.st-review-name {
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-paragrafo) !important;
    color: var(--colore-primario) !important; /* Nome in Oro */
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
    letter-spacing: var(--spaziatura-lettere-titoli) !important;
}

.st-review-source {
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-piccolo) !important;
    color: var(--colore-testo-scuro) !important; /* FIX: Testo scuro */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    opacity: 0.6 !important;
}

/* --------------------------------------------------------------------------
   15.5 PAGINAZIONE (I pallini di Splide)
   -------------------------------------------------------------------------- */
.st-splide-container .splide__pagination {
    display: flex !important; /* FIX: Forza la visibilità se JS la nasconde */
    bottom: -15px !important; /* FIX: Li spinge in basso nello spazio del padding */
    z-index: 10 !important;
}

.st-splide-container .splide__pagination__page {
    background: rgba(255, 255, 255, 0.3) !important; /* Pallini inattivi bianchi semitrasparenti (sul fondo grigio) */
    opacity: 1 !important;
    width: 8px !important;
    height: 8px !important;
    transition: all 0.3s ease !important;
    margin: 0 6px !important;
}

.st-splide-container .splide__pagination__page.is-active {
    background: var(--colore-primario) !important; /* Pallino attivo Oro */
    opacity: 1 !important;
    transform: scale(1.5) !important;
}

/* ==========================================================================
   16. GRIGLIA BLOG (Divi Blog Module)
   ========================================================================== */

/* --------------------------------------------------------------------------
   16.1 LA CARD (Contenitore Articolo)
   -------------------------------------------------------------------------- */
#main-content .et_pb_blog_posts .et_pb_post {
    background-color: var(--colore-secondario) !important;
    border-radius: var(--radius-s) !important;
    border: none !important; 
    position: relative !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; 
    margin-bottom: var(--spazio-l) !important;
    padding: 0 !important; /* FIX: Rimuove il padding grigio attorno all'immagine */
}

/* --------------------------------------------------------------------------
   16.2 IMMAGINE IN EVIDENZA (Ratio 3:2 e Bordi a filo)
   -------------------------------------------------------------------------- */
#main-content .et_pb_blog_posts .et_pb_post .et_pb_image_container {
    margin: 0 !important;
    padding: 0 !important; 
    width: 100% !important;
    aspect-ratio: 3 / 2 !important;
    border-top-left-radius: var(--radius-s) !important;
    border-top-right-radius: var(--radius-s) !important;
    overflow: hidden !important;
}

#main-content .et_pb_blog_posts .et_pb_post .et_pb_image_container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: static !important; 
}

/* --------------------------------------------------------------------------
   16.3 METADATI: DATA SPORGENTE E AUTORE
   -------------------------------------------------------------------------- */
/* 1. Azzeriamo il testo libero di Divi ("di" e "|") forzando la specificità */
#main-content .et_pb_blog_posts .et_pb_post .post-meta {
    font-size: 0 !important; 
    line-height: 0 !important;
    color: transparent !important; /* FIX: Nasconde visivamente la barra | */
    margin: 0 !important;
    padding: 0 var(--spazio-m) !important;
    text-align: left !important;
}

/* 2. Il Badge della Data (Sporgente) */
#main-content .et_pb_blog_posts .et_pb_post .post-meta .published {
    font-size: var(--txt-piccolo) !important;
    line-height: 1.5 !important;
    font-family: var(--font-corpo) !important;
    color: var(--colore-testo-titoli) !important;
    background-color: var(--colore-accento) !important;
    
    /* Posizionamento Assoluto Sporgente */
    position: absolute !important;
    top: var(--spazio-m) !important;
    left: -1rem !important; 
    z-index: 10 !important;
    
    padding: 0.4rem 1rem !important;
    border-radius: var(--radius-s) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; 
}

/* 3. Ripristino dell'Autore sotto il titolo */
#main-content .et_pb_blog_posts .et_pb_post .post-meta .author {
    display: inline-block !important;
    font-size: var(--txt-piccolo) !important;
    line-height: 1.5 !important;
    font-family: var(--font-corpo) !important;
    color: var(--colore-primario) !important; 
    margin-top: var(--spazio-s) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    visibility: visible !important; /* FIX: Assicura che l'autore sia visibile */
}

/* Re-iniettiamo la parola "di " prima del nome */
#main-content .et_pb_blog_posts .et_pb_post .post-meta .author::before {
    content: "di ";
    color: var(--colore-testo-principale) !important;
    text-transform: none;
    letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   16.4 TITOLO (H2 Ridimensionato) E LINEA ORO
   -------------------------------------------------------------------------- */
#main-content .et_pb_blog_posts .et_pb_post .entry-title {
    padding: var(--spazio-m) var(--spazio-m) 0 var(--spazio-m) !important;
    text-align: left !important; 
}

/* FIX: Titolo proporzionato e interlinea compatta */
#main-content .et_pb_blog_posts .et_pb_post .entry-title a {
    color: var(--colore-testo-titoli) !important;
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem) !important; 
    line-height: 1.1em !important; /* FIX: Elimina lo spazio enorme tra le righe */
    display: block !important;
}

/* Iniezione della linea oro sotto il titolo */
#main-content .et_pb_blog_posts .et_pb_post .entry-title::after {
    content: "" !important;
    display: block !important;
    width: 3rem !important; 
    height: var(--spessore-linea) !important;
    background-color: var(--colore-primario) !important;
    margin-top: var(--spazio-s) !important;
}

/* --------------------------------------------------------------------------
   16.5 RIASSUNTO (Excerpt)
   -------------------------------------------------------------------------- */
#main-content .et_pb_blog_posts .et_pb_post .post-content {
    padding: var(--spazio-s) var(--spazio-m) var(--spazio-m) var(--spazio-m) !important;
}

/* Forza il colore bianco sul testo del riassunto */
#main-content .et_pb_blog_posts .et_pb_post .post-content p {
    color: var(--colore-testo-principale) !important;
    font-size: var(--txt-paragrafo) !important;
    line-height: 1.5em !important;
    margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   16.6 FIX MOBILE: FORZA COLONNA SINGOLA E NO-WRAP DATA
   -------------------------------------------------------------------------- */

/* Impedisce alla data di andare a capo (Applicato globalmente) */
#main-content .et_pb_blog_posts .et_pb_post .post-meta .published {
    white-space: nowrap !important;
}

/* Override strutturale per schermi Mobile (sotto i 768px) */
@media (max-width: 768px) {
    
    /* Trasforma la griglia di Divi in una colonna Flexbox pura */
    #main-content .et_pb_blog_posts.et_grid_module {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spazio-l) !important; /* Usa il nostro token per la distanza tra le card */
    }

    /* Forza ogni card a occupare il 100% dello spazio disponibile */
    #main-content .et_pb_blog_posts.et_grid_module .et_pb_post {
        width: 100% !important;
        margin: 0 !important; /* Azzeriamo i margini, ci pensa il 'gap' del padre */
    }
    
    /* Assicuriamoci che l'etichetta sporgente non causi scroll orizzontale 
       spingendola leggermente più dentro se necessario, o allineandola a filo */
    #main-content .et_pb_blog_posts .et_pb_post .post-meta .published {
        left: -0.5rem !important; /* Sporge un po' meno su mobile per sicurezza */
    }
}

/* ==========================================================================
   17. HERO SINGOLO ARTICOLO BLOG (Theme Builder)
   ========================================================================== */

/* 1. La Sezione Hero */
.tlf-hero-articolo {
    min-height: 70svh !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; 
    padding-top: var(--spazio-xl) !important;
    padding-bottom: var(--spazio-l) !important; 
    position: relative;
}

/* Overlay scuro sfumato dal basso per dare profondità al box */
.tlf-hero-articolo::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
    pointer-events: none;
}

/* 2. Il Box Contenuti (Sfondo Scuro Trasparente) */
.tlf-hero-articolo .et_pb_row {
    position: relative;
    z-index: 2;
    
    /* FIX: Grigio Antracite (#535353) al 65% di opacità, NO BLUR */
    background-color: rgba(83, 83, 83, 0.65) !important; 
    
    /* FIX: Padding interno e Radius standard */
    padding: var(--spazio-m) var(--spazio-l) !important;
    border-radius: var(--radius-s) !important;
    
    width: var(--larghezza-riga-percentuale) !important;
    /* FIX: Larghezza massima layout (1280px) invece di lettura */
    max-width: var(--larghezza-max-layout) !important; 
    
    margin-top: auto !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    
    box-shadow: 0 20px 50px rgba(0,0,0,0.4) !important;
}

.tlf-hero-articolo .et_pb_row .et_pb_column {
    gap: 1em;
}

/* 3. Tipografia: Pre-titolo e Titolo */
.tlf-hero-articolo .pre-titolo1 {
    text-align: left !important; 
    color: var(--colore-primario) !important; 
    /* FIX: Dimensione ridotta al livello H2 */
    font-size: var(--txt-pretitolo-h2) !important;
}

.tlf-hero-articolo h1 {
    text-align: left !important; 
    color: var(--colore-testo-titoli) !important;
    /* FIX: Dimensione H2 e interlinea aggressiva a 0.8em */
    font-size: var(--txt-h2) !important;
    line-height: 0.8em !important; 
    
    /* FIX: Azzeramento totale dei margini inferiori */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* FIX: Seghiamo il gap del modulo Divi che contiene il titolo */
.tlf-hero-articolo .et_pb_heading {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 4. Metadati (Autore, Data, Commenti) */
.tlf-hero-articolo .et_pb_title_meta_container {
    text-align: left !important;
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-piccolo) !important;
    color: var(--colore-testo-principale) !important; 
    margin: 0 !important;
    
    /* FIX: Padding minimo (spazio-xs) per staccare appena il testo dalla linea di separazione */
    padding-top: var(--spazio-xs) !important;
    margin-top: var(--spazio-s) !important; /* Spazio tra il titolo compresso e la linea */
    border-top: 1px solid rgba(255,255,255,0.1) !important; 
}

/* Link nei metadati (Nome autore, commenti) */
.tlf-hero-articolo .et_pb_title_meta_container a {
    color: var(--colore-primario) !important; 
    text-decoration: none !important;
    transition: opacity 0.3s ease;
}

.tlf-hero-articolo .et_pb_title_meta_container a:hover {
    opacity: 0.8;
}

/* 6. Tipografia intestazioni articolo (H2 - H6) */
#main-content .tlf-articolo-blog h2,
#main-content .tlf-articolo-blog h3,
#main-content .tlf-articolo-blog h4,
#main-content .tlf-articolo-blog h5,
#main-content .tlf-articolo-blog h6 {
    font-family: var(--font-corpo) !important; /* Passa al Montserrat */
    text-transform: none !important; /* Disabilita il lowercase forzato del Billionaire */
    letter-spacing: normal !important;
    font-weight: 700 !important; /* Grassetto per mantenere la gerarchia visiva */
    color: var(--colore-testo-titoli) !important;
    text-align: left !important; /* Nei blog i titoli si allineano a sinistra */
    line-height: 1.3em !important;
    margin-top: var(--spazio-l) !important; /* Dà respiro rispetto al paragrafo precedente */
    margin-bottom: var(--spazio-s) !important;
}

/* Override delle dimensioni globali (troppo grandi per il Montserrat) */
#main-content .tlf-articolo-blog h2 {
    font-size: clamp(1.6rem, 1.4rem + 1vw, 2.2rem) !important;
}

#main-content .tlf-articolo-blog h3 {
    font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.7rem) !important;
}

#main-content .tlf-articolo-blog h4,
#main-content .tlf-articolo-blog h5,
#main-content .tlf-articolo-blog h6 {
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem) !important;
}

/* 7. Citazioni */
#main-content .tlf-articolo-blog blockquote {
    position: relative !important;
    /* Padding ridotto. Lasciamo spazio-l a sinistra per la virgoletta */
    padding: var(--spazio-xs) 0 var(--spazio-xs) var(--spazio-l) !important;
    margin: var(--spazio-m) 0 !important;
    border: none !important; /* Rimuove la noiosa linea laterale di default di WP/Divi */
    background: transparent !important;
}

/* Il testo della citazione */
#main-content .tlf-articolo-blog blockquote p {
    font-style: italic !important; /* Simula il tag <em> in automatico */
    font-size: var(--txt-paragrafo) !important; /* Stessa grandezza del testo normale */
    color: var(--colore-testo-principale) !important;
    position: relative;
    z-index: 2;
}

/* La Virgoletta Gigante Oro */
#main-content .tlf-articolo-blog blockquote::before {
    content: "\201C" !important; /* Codice Unicode per la virgoletta aperta */
    font-family: var(--font-titoli) !important; /* Usiamo il Billionaire solo per la virgoletta! */
    color: var(--colore-primario) !important;
    font-size: 5rem !important; /* Rimpicciolita per adattarsi al nuovo padding */
    line-height: 1 !important;
    
    /* Posizionamento assoluto a filo col nuovo margine sinistro */
    position: absolute !important;
    left: 0 !important;
    top: -1rem !important; 
    opacity: 0.8 !important;
    z-index: 1;
}

/* 8. Override Mobile */
@media (max-width: 768px) {
    .tlf-hero-articolo .et_pb_row {
        /* Su mobile manteniamo un padding proporzionato */
        padding: var(--spazio-m) !important; 
    }
}

/* ==========================================================================
   18. FAB LANCIO (Floating Action Button)
   ========================================================================== */

.st-lancio-fab {
    /* Colori e Tipografia */
    background-color: var(--colore-primario) !important;
    color: var(--colore-testo-scuro) !important; /* Testo scuro sull'oro per massima leggibilità */
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-piccolo) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;

    /* Struttura (Zero Pixel Rule) */
    padding: 0.8rem 1.6rem !important;
    border-radius: var(--radius-s) !important;
    
    /* Posizionamento */
    position: fixed !important;
    z-index: 99999 !important; /* Sopra ogni cosa, inclusi header sticky */
    bottom: clamp(1.5rem, 4vw, 2.5rem) !important;

    /* Effetti Visivi (Ombra dorata) */
    box-shadow: 0 0.25rem 1rem rgba(173, 151, 79, 0.8) !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease !important;

    /* Necessario per contenere l'animazione del luccichio all'interno del bottone */
    overflow: hidden !important;
}

/* Posizionamento Destra/Sinistra */
.st-fab--right { right: clamp(1.5rem, 4vw, 2.5rem) !important; }
.st-fab--left { left: clamp(1.5rem, 4vw, 2.5rem) !important; }

/* Hover State */
.st-lancio-fab:hover {
    transform: translateY(-0.25rem) !important; /* Si solleva leggermente */
    box-shadow: 0 0.5rem 1.5rem rgba(173, 151, 79, 0.6) !important; /* L'ombra si espande */
    color: var(--colore-testo-scuro) !important;
}

/* --------------------------------------------------------------------------
   18.1 EFFETTO LUCCICHIO (Shimmer Animation)
   -------------------------------------------------------------------------- */
.st-lancio-fab::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    /* Gradiente bianco semitrasparente */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); /* Inclina il raggio di luce */
    animation: tlf-shimmer 4s infinite; /* Durata totale 4s (inclusa la pausa) */
    pointer-events: none; /* Evita che il livello invisibile blocchi il click sul bottone */
}

/* Keyframes per l'animazione */
@keyframes tlf-shimmer {
    0% { left: -100%; }
    15% { left: 200%; } /* Il luccichio attraversa il bottone velocemente (15% del tempo) */
    100% { left: 200%; } /* Resta fermo fuori dal bottone per il restante 85% del tempo (Pausa) */
}

/* ==========================================================================
   19. CARD PREZZI (Lesson Pack)
   ========================================================================== */

/* 1. Contenitore Principale (Il Modulo Divi) */
.tlf-card-prezzi {
    aspect-ratio: 3 / 2 !important;
    border-radius: var(--radius-s) !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    
    padding: var(--spazio-m) !important; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.4) !important;
    margin-bottom: var(--spazio-m) !important;
}

/* 2. Overlay Scuro */
.tlf-card-prezzi::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 1;
    pointer-events: none;
}

/* Gestione del wrapper interno di Divi per il centramento perfetto */
.tlf-card-prezzi .et_pb_text_inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 3. Wrapper Contenuti */
.tlf-card-prezzi__content {
    width: 100%;
    text-align: center;
}

/* 4. Titolo */
.tlf-card-prezzi__title {
    font-family: var(--font-titoli) !important;
    /* FIX: INGRANDITO - Valori clamp più alti per maggiore impatto */
    font-size: clamp(2rem, 1.6rem + 1.5vw, 2.8rem) !important;
    color: var(--colore-testo-titoli) !important;
    line-height: 1em !important;
    margin-bottom: var(--spazio-s) !important; 
    text-transform: uppercase !important;
}

/* 5. Griglia Prezzi */
.tlf-card-prezzi__grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    
    /* Forza SEMPRE 2 righe. Se la seconda è vuota, farà da spaziatore invisibile! */
    grid-template-rows: minmax(1.2em, auto) minmax(1.2em, auto) !important; 
    
    gap: var(--spazio-xs) var(--spazio-s); 
    margin-bottom: var(--spazio-s) !important;
    width: 100%;
    justify-items: center; 
}

/* WordPress aggiunge <br> in automatico. Li nascondiamo per non rompere la griglia! */
.tlf-card-prezzi__grid br {
    display: none !important;
}

/* Se c'è un solo prezzo (es. Corso Base), fagli occupare entrambe le colonne per centrarlo */
.tlf-card-prezzi__grid span:only-of-type {
    grid-column: 1 / -1;
}

.tlf-card-prezzi__grid span {
    font-family: var(--font-corpo) !important;
    /* FIX: INGRANDITO - Clamp personalizzato per dare più peso ai prezzi */
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem) !important;
    color: var(--colore-testo-principale) !important;
    line-height: 1.2em !important; 
}

/* 6. Sezione Vantaggi */
.tlf-card-prezzi__desc {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tlf-card-prezzi__subtitle {
    font-family: var(--font-corpo) !important;
    /* FIX: INGRANDITO - Proporzionato al nuovo testo */
    font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem) !important;
    color: var(--colore-testo-principale) !important;
    margin-bottom: var(--spazio-xs) !important;
    line-height: 1.2em !important; 
}

.tlf-card-prezzi__list {
    list-style-type: disc !important;
    list-style-position: outside !important; 
    padding-left: 1.2rem !important;
    margin: 0 !important;
    text-align: left !important;
}

.tlf-card-prezzi__list li {
    font-family: var(--font-corpo) !important;
    /* FIX: INGRANDITO - Passato dal token piccolo al token paragrafo standard */
    font-size: var(--txt-paragrafo) !important;
    color: var(--colore-testo-principale) !important;
    line-height: 1.3em !important; 
    margin-bottom: 0.2rem !important;
}

/* 7. Override Mobile */
@media (max-width: 480px) {
    .tlf-card-prezzi {
        aspect-ratio: auto !important; 
        padding: var(--spazio-l) var(--spazio-m) !important;
    }
    .tlf-card-prezzi__grid {
        grid-template-columns: 1fr; /* Passa a 1 colonna */
    }
}

/* ==========================================================================
   20. FAQ (Accordion Site Toolkit)
   ========================================================================== */

/* 1. Contenitore Principale */
.st-faq-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spazio-m) !important;
    width: 100% !important;
}

/* 2. La singola Card (Stile Dark & Gold) */
.st-faq-item {
    background-color: var(--colore-secondario) !important; /* Sfondo Grigio Antracite */
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Bordo leggerissimo per staccare dal fondo */
    border-left: 4px solid var(--colore-primario) !important; /* Accento Oro a sinistra */
    border-radius: var(--radius-s) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
}

/* Effetto Hover sulla Card */
.st-faq-item:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
    border-color: rgba(173, 151, 79, 0.3) !important; /* Leggero bagliore oro sul bordo */
}

/* 3. Intestazione (La Domanda) */
/* Rimuove la freccetta di default del browser */
.st-faq-item summary::-webkit-details-marker,
.st-faq-item summary::marker {
    display: none !important;
    content: "" !important;
}

.st-faq-summary {
    padding: var(--spazio-m) !important;
    font-family: var(--font-corpo) !important;
    font-weight: 700 !important;
    font-size: var(--txt-paragrafo);
    color: var(--colore-testo-titoli) !important; /* Testo Bianco */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    list-style: none !important; /* Fallback per nascondere il marker */
    outline: none !important;
}

/* 4. L'Icona (+ o Freccia) */
.st-faq-icon {
    color: var(--colore-primario) !important; /* Oro */
    font-size: 1.5em !important;
    line-height: 1 !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important; /* Impedisce all'icona di schiacciarsi se il testo è lungo */
    margin-left: var(--spazio-s) !important;
}

/* Rotazione dell'icona quando la FAQ è aperta */
.st-faq-item[open] .st-faq-icon {
    transform: rotate(45deg) !important; /* Se è un +, diventa una X. Se è una freccia, punta in basso. */
}

/* 5. Contenuto (La Risposta) */
/* 5. Contenuto (La Risposta) */
.st-faq-content {
    padding: 0 var(--spazio-m) var(--spazio-m) var(--spazio-m) !important;
}

/* FIX: Aumentiamo la specificità e colpiamo qualsiasi tag di testo interno */
#main-content .st-faq-item .st-faq-content,
#main-content .st-faq-item .st-faq-content p,
#main-content .st-faq-item .st-faq-content span,
#main-content .st-faq-item .st-faq-content div {
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-paragrafo) !important;
    color: var(--colore-testo-principale) !important; /* Forza il bianco assoluto */
    line-height: 1.6em !important;
}

/* Margine solo se c'è effettivamente un paragrafo */
#main-content .st-faq-item .st-faq-content p {
    margin-bottom: var(--spazio-s) !important;
}

/* Rimuove il margine dall'ultimo paragrafo */
#main-content .st-faq-item .st-faq-content p:last-child {
    margin-bottom: 0 !important;
}

/* Blindiamo anche i link dentro le FAQ per coerenza */
#main-content .st-faq-item .st-faq-content a {
    color: var(--colore-primario) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: opacity 0.3s ease !important;
}

#main-content .st-faq-item .st-faq-content a:hover {
    opacity: 0.8 !important;
}

/* ==========================================================================
   21. OFF-CANVAS CONTATTI (Site Toolkit)
   ========================================================================== */

/* 1. Il Pannello Principale (Ora fluttuante e centrato verticalmente) */
.st-offcanvas-panel {
    width: clamp(20rem, 85vw, 24rem) !important; 
    
    /* FIX: Auto per avvolgere il contenuto senza esplodere */
    height: auto !important;
    max-height: 95vh !important; 
    
    /* FIX CENTRAMENTO: Usiamo top 50% e demandiamo il resto al transform */
    top: 50% !important;
    bottom: auto !important;
    margin: 0 !important;
    
    border-radius: var(--radius-s) 0 0 var(--radius-s) !important;
    background-color: var(--colore-sfondo-chiaro) !important; 
    box-shadow: -10px 10px 40px rgba(0,0,0,0.2) !important; 
    z-index: 999999 !important; 
    display: flex !important;
    flex-direction: column !important;
}

.st-offcanvas-content {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 2. Pulsante di Chiusura (La X) */
.st-offcanvas-close {
    position: absolute !important;
    top: var(--spazio-m) !important;
    right: var(--spazio-m) !important;
    z-index: 10 !important;
    background: transparent !important;
    border: none !important;
    color: var(--colore-antracite) !important; 
    font-family: var(--font-corpo) !important;
    font-size: 2.5rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
    padding: 0 !important;
}

.st-offcanvas-close:hover {
    color: var(--colore-primario) !important;
    transform: scale(1.1) rotate(90deg) !important; 
}

/* 3. Contenitore Esteso */
.st-contatti-esteso {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important; 
    /* FIX: Aggiunto un border-radius per far tagliare l'immagine di sfondo agli angoli */
    border-radius: var(--radius-s) 0 0 var(--radius-s) !important;
}

/* 4. Immagine di Sfondo e Overlay (Opacità ridotta) */
.st-contatti-bg {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover !important;
    background-position: center center !important;
    z-index: 1 !important;
    border-radius: var(--radius-s) 0 0 var(--radius-s) !important;
}

.st-contatti-bg::after {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: var(--radius-s) 0 0 var(--radius-s) !important;
    /* FIX: Gradiente più trasparente (0.8) che sfuma fino a zero (0) */
    background: linear-gradient(to left, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 100%) !important;
}

/* 5. Contenuto Interno */
.st-contatti-inner {
    position: relative !important;
    z-index: 2 !important;
    padding: var(--spazio-xl) var(--spazio-l) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    align-items: flex-end !important;
    text-align: right !important;
}

/* 6. Tipografia Titoli */
.st-contatti-titolo {
    font-family: var(--font-titoli) !important;
    font-size: var(--txt-h2) !important;
    color: var(--colore-antracite) !important; 
    margin-bottom: var(--spazio-s) !important;
    text-transform: lowercase !important;
    line-height: 1em !important;
}

.st-contatti-sottotitolo {
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-paragrafo) !important;
    color: var(--colore-antracite) !important; 
    margin-bottom: var(--spazio-l) !important;
    font-style: italic !important;
}

/* 7. La Lista dei Contatti */
.st-contatti-lista {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spazio-m) !important; 
    align-items: flex-end !important; 
}

.st-contatti-lista li {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important; 
    gap: 0.2rem !important;
}

.st-contatti-lista .st-label {
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-banner) !important; 
    color: var(--colore-primario) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
}

.st-contatti-lista .st-dati,
.st-contatti-lista .st-dati a {
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-paragrafo) !important;
    color: var(--colore-antracite) !important; 
    text-decoration: none !important;
    line-height: 1.4em !important;
    transition: color 0.3s ease !important;
}

.st-contatti-lista .st-dati a:hover {
    color: var(--colore-primario) !important;
}

/* 8. OVERLAY DEL SITO (Effetto Blur) */
/* Nota: Assicurati che la classe dell'overlay del tuo plugin sia corretta. 
   Spesso è .st-offcanvas-overlay o simile. */
.st-offcanvas-overlay {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Sfondo quasi invisibile */
    backdrop-filter: blur(8px) !important; /* Sfoca il sito sottostante */
    -webkit-backdrop-filter: blur(8px) !important; /* Supporto Safari */
}

/* ==========================================================================
   22. LANDING PAGE - COMPONENTI (Divi Native Approach)
   ========================================================================== */

.tlf-lp-hero {
    max-height: 100vh !important;
    padding: var(--spazio-m) 0 !important;
}

/* 1. La Card Bianca (Applicata alla Riga Divi) */
.tlf-lp-row-scheda-bianca-top,
.tlf-lp-row-scheda-bianca-bottom {
    background-color: var(--colore-sfondo-chiaro) !important;
    border-radius: var(--radius-s) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15) !important;
    padding: var(--spazio-l) var(--spazio-l) !important; 
    text-align: center !important; 
    max-width: 600px !important; 
    margin-left: 0 !important;
    margin-right: auto !important;
    position: relative;
    z-index: 10;
}

.tlf-lp-row-pad {
        height: 10vh !important;
    }

/* FIX: Opzione Nucleare contro i margini di Divi. */
.tlf-lp-row-scheda-bianca-bottom .et_pb_column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    /* RIDOTTO: da spazio-m a spazio-s per recuperare spazio verticale */
    gap: var(--spazio-s) !important; 
}

/* Rimuoviamo qualsiasi margine o padding residuo generato dai wrapper di Divi */
.tlf-lp-row-scheda-bianca-bottom .et_pb_column > div {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 1.1 Override Mobile: Card in alto, Foto in basso */
@media (max-width: 980px) {
    .tlf-lp-hero {
        padding-top: 0 !important;
        padding-bottom: 0 !important; 
        background-position: center 40% !important; 
    }

    .tlf-lp-row-scheda-bianca-top {
        border-radius: 0 0 var(--radius-s) var(--radius-s) !important; 
        margin-top: 0 !important;
        padding: var(--spazio-m) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .tlf-lp-row-pad {
        height: 18em !important;
    }
    
    .tlf-lp-row-scheda-bianca-bottom {
        border-radius: var(--radius-s) !important; 
        margin-top: 0 !important;
        padding: var(--spazio-m) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: -5em !important;
    }

    .tlf-lp-row-scheda-bianca-bottom .tlf-lp-sottotitolo {
        text-align: center !important;
    }
}

/* 2. Colori di Utilità */
.tlf-lp-testo-oro { color: var(--colore-primario) !important; }

/* 3. Il Titolo Principale (Ora è un div pulito) */
.tlf-lp-h1 {
    font-family: var(--font-corpo) !important;
    font-size: 1.7rem !important;
    font-weight: 500 !important;
    color: var(--colore-antracite) !important;
    text-align: center !important;
    line-height: 1em !important;
    text-transform: uppercase !important;
    letter-spacing: -0.04em !important;
    margin: 0 0 var(--spazio-xs) 0 !important;
}

/* La parola TANGO ARGENTINO gigante */
.tlf-lp-tango-argentino {
    font-family: var(--font-titoli) !important;
    color: var(--colore-primario) !important;
    font-size: clamp(2.2rem, 8vw + 2rem, 4.5rem) !important;
    text-transform: lowercase !important;
    font-weight: normal !important;
    line-height: 1em !important;
    letter-spacing: normal !important;
    margin-top: 0 !important;
}

/* 4. Il Sottotitolo */
.tlf-lp-sottotitolo {
    font-family: var(--font-corpo) !important; 
    font-size: clamp(1rem, 0.9rem + 0.2vw, 1.1rem) !important; 
    color: var(--colore-antracite) !important;
    line-height: 1.4em !important;
    text-align: center !important;
    margin: 0 !important;
}

/* FIX SPECIFICITÀ: Vince sulla regola globale e forza il grassetto in Oro */
#main-content .tlf-lp-sottotitolo strong,
#main-content .tlf-lp-sottotitolo b {
    color: var(--colore-primario) !important;
    font-weight: 600 !important;
}

/* 5. Lista informazioni con icone (Layout Centrato) */

/* Reset della lista e spaziatura verticale */
.tlf-lp-info-lista-icone {
    list-style: none !important;
    padding: 0 !important;
    margin: var(--spazio-xs) auto !important;
    display: flex;
    flex-direction: column;
    gap: var(--spazio-m); /* Spazio per far respirare i blocchi */
    max-width: 400px; 
}

/* Il singolo blocco (Testo centrato, flusso naturale) */
.tlf-lp-info-lista-icone li {
    display: block !important; 
    text-align: center !important;
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-paragrafo) !important;
    line-height: 1.5em !important;
}

/* Le Icone SVG (Grandi, centrate e sopra il testo) */
.tlf-lp-info-lista-icone .tlf-lp-icona-svg {
    display: block !important; 
    margin: 0 auto !important; 
    width: 3rem !important; 
    height: 3rem !important;
}

/* FIX SPECIFICITÀ: Colore Oro per l'ultima riga (Testo, Grassetto e Icona SVG) */
#main-content .tlf-lp-info-evidenza,
#main-content .tlf-lp-info-evidenza span,
#main-content .tlf-lp-info-evidenza strong,
#main-content .tlf-lp-info-evidenza .tlf-lp-icona-svg {
    color: var(--colore-primario) !important;
}

/* ==========================================================================
   23. BADGE RECENSIONI GOOGLE
   ========================================================================== */

.tlf-badge-recensioni {
    display: inline-flex; 
    align-items: center;
    background-color: var(--colore-sfondo-chiaro);
    /* RIDOTTO: Padding più compatto per salvare spazio */
    padding: var(--spazio-s) var(--spazio-m); 
    border-radius: var(--radius-s);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    gap: var(--spazio-s); /* OLD: spazio-m */
    font-family: var(--font-corpo);
    margin: 0; /* Tolto il margine verticale per affidarsi al gap di Flexbox */
}

/* Il cerchio dorato con la stella bianca */
.tlf-badge-icona {
    /* OLD: 50px / 1.8rem */
    width: 40px;
    height: 40px;
    background-color: var(--colore-primario); 
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; 
    flex-shrink: 0; 
}

/* Contenitore dei testi */
.tlf-badge-contenuto {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    text-align: left;
}

/* Riga 1: Nome e Stelle */
.tlf-badge-riga1 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tlf-badge-nome {
    font-size: 1.05rem; /* OLD: 1.2rem */
    font-weight: 700;
    color: var(--colore-antracite);
    line-height: 1;
}

.tlf-badge-stelle {
    color: #fbbc05; 
    font-size: 1rem; /* OLD: 1.1rem */
    letter-spacing: 1px;
    line-height: 1;
}

/* Riga 2: Testo e Logo */
.tlf-badge-riga2 {
    display: block !important; 
    font-size: 0.85rem; /* OLD: 0.95rem */
    color: var(--colore-antracite);
    line-height: 1.4;
}

.tlf-badge-google {
    height: 14px !important; /* OLD: 16px */
    width: auto !important;
    vertical-align: baseline !important; 
    position: relative;
    top: 2px; 
    margin-left: 4px;
}

/* Adattamento per schermi molto piccoli (Mobile) */
@media (max-width: 480px) {
    .tlf-badge-recensioni {
        padding: var(--spazio-s);
        gap: var(--spazio-s);
    }
    .tlf-badge-icona {
        width: 35px; height: 35px; font-size: 1.2rem; /* OLD: 40px / 1.4rem */
    }
    .tlf-badge-nome { font-size: 0.95rem; } /* OLD: 1.1rem */
    .tlf-badge-riga2 { font-size: 0.75rem; } /* OLD: 0.85rem */
}

/* ==========================================================================
   24. CARD GENERICHE (Stile "Luxury Spa" 5 Stelle)
   ========================================================================== */

/* 1. Contenitore Principale (Dark Glass & Gold Frame) */
.tlf-card {
    /* Sfondo: un velo scuro quasi impercettibile */
    background-color: rgba(0, 0, 0, 0.2) !important; 
    
    /* Cornice: Filo d'oro semitrasparente su tutti i lati */
    border: var(--spessore-linea) solid rgba(173, 151, 79, 0.25) !important; 
        
    border-radius: var(--radius-s) !important;
    padding: var(--spazio-l) var(--spazio-m) !important;
    
    /* Ombra: Profonda ma morbidissima */
    box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important; 
        
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    height: 100% !important; 
}

/* Effetto Hover (Glow Dorato e Sollevamento) */
.tlf-card:hover {
    transform: translateY(-5px) !important;
    /* Il bordo si illumina */
    border-color: rgba(173, 151, 79, 0.8) !important; 
    /* Bagliore dorato diffuso */
    box-shadow: 0 20px 40px rgba(173, 151, 79, 0.15) !important; 
}

/* 2. FIX DIVI: Il wrapper interno */
.tlf-card .et_pb_text_inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    height: 100% !important;
}

/* 3. Tipografia: Titolo (Instrument Serif in Oro) */
.tlf-card h3 {
    font-family: var(--font-titoli) !important; 
    font-size: clamp(1.8rem, 2vw + 1.4rem, 2.2rem) !important;
    font-weight: normal !important;
    color: var(--colore-primario) !important; /* Titolo Oro */
    text-align: center !important; 
    margin-top: 0 !important;
    margin-bottom: var(--spazio-m) !important;
    line-height: 1.1em !important;
    text-transform: none !important;
}

/* Rimuoviamo la vecchia linea sotto il titolo, ora la cornice fa il lavoro */
.tlf-card h3::after {
    display: none !important;
}

/* 4. Tipografia: Testo (Montserrat pulito e arioso) */
.tlf-card p {
    font-family: var(--font-corpo) !important;
    font-size: var(--txt-paragrafo) !important;
    /* Bianco leggermente attenuato per non accecare */
    color: rgba(255, 255, 255, 0.85) !important; 
    text-align: center !important; 
    line-height: 1.7em !important; /* Interlinea ampia, tipica del lusso */
    font-weight: 300 !important; /* Peso leggero per massima eleganza */
    margin-bottom: 0 !important;
    flex-grow: 1 !important; 
}

/* ==========================================================================
   25. GALLERIA SEDE (Splide Center Mode)
   ========================================================================== */

.tlf-gallery-splide {
    padding: var(--spazio-xl) 0 !important;
    /* Rompe i margini di Divi per andare a tutto schermo come le recensioni */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Il contenitore della singola foto */
.tlf-gallery-img-wrap {
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-s);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* Stato inattivo (Foto laterali) */
    transform: scale(0.85);
    opacity: 0.4;
    filter: grayscale(30%);
}

.tlf-gallery-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Stato Attivo (Foto Centrale) */
.splide__slide.is-active .tlf-gallery-img-wrap {
    transform: scale(1);
    opacity: 1;
    filter: grayscale(0%);
    box-shadow: 0 20px 50px rgba(173, 151, 79, 0.3); /* Bagliore dorato */
    border: 2px solid var(--colore-primario);
}

/* Frecce e Pallini (Ereditano lo stile dorato che avevamo fatto per le recensioni) */
.tlf-gallery-splide .splide__arrow {
    background: var(--colore-secondario) !important;
    border: 1px solid var(--colore-primario) !important;
}
.tlf-gallery-splide .splide__arrow svg {
    fill: var(--colore-primario) !important;
}