/*
Theme Name: GT Formazione
Theme URI: https://rwmdemo.it/gtformazione/
Description: Tema figlio di Hello Elementor per GT Formazione. Impianto tipografico e di layout derivato dalla reference Eductix, palette del marchio GTF al posto del verde.
Author: Rossi Web Media
Template: hello-elementor
Version: 15.1.0
Text Domain: gtformazione
*/

/* =====================================================================
   Geist, ospitato qui
   Il Kit dichiara Geist, ma nessuno lo consegnava: chi non ce l'ha
   installato vedeva il sans-serif di sistema. Il file sta nel tema, non
   su un dominio di terzi, cosi' il sito continua a non far partire
   richieste verso l'esterno (ed e' quello che dice la cookie policy).
   Variabile 400-600: un file solo copre testo, titoli e grassetto.
   Licenza SIL Open Font 1.1.
   ===================================================================== */
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("fonts/geist-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


:root{
  --gtf-acc:#386FB3; --gtf-acc-700:#2B5789;
  --gtf-teal:#479E99; --gtf-teal-700:#357A76;
  --gtf-ink:#123A47; --gtf-ink-2:#0E2C36;
  --gtf-body:#3A474E;
  --gtf-bg:#EDF2F3; --gtf-surface:#F3F8F9; --gtf-card:#FFFFFF;
  --gtf-tint:#E4EDEE; --gtf-line:#DCE7E9;
  --gtf-r-card:20px; --gtf-r-inner:10px; --gtf-r-pill:50px; --gtf-r-btn:60px;
}

body{ background-color:var(--gtf-bg); }
html{ scroll-behavior:smooth; }
::selection{ background:rgba(56,111,179,.18); }
[id]{ scroll-margin-top:90px; }

/* Geist come nella reference, con ripiego di sistema */
body, .elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor, .elementor-button{
  font-family:Geist,"Geist Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
}
h1,h2{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* --- eyebrow: pill r50, pad 4/16, 12px, niente maiuscolo (misure Eductix) --- */
.gtf-eyebrow p{
  display:inline-flex; align-items:center; gap:8px; margin:0;
  padding:5px 16px; border-radius:var(--gtf-r-pill);
  background:var(--gtf-surface); color:var(--gtf-ink);
}
.gtf-eyebrow p::before{
  content:""; width:6px; height:6px; flex:0 0 6px; border-radius:50%;
  background:var(--gtf-acc);
}
.gtf-eyebrow--dark p{ background:rgba(255,255,255,.10); color:#fff; }
.gtf-eyebrow--dark p::before{ background:var(--gtf-teal); }

/* --- contenitori che si adattano al contenuto --- */
.e-con.gtf-fit{ width:auto!important; flex:0 0 auto!important; }

/* --- header: trasparente in cima come la reference, con fondo solo da agganciata --- */
.gtf-header-bar-inner{ min-height:62px; }
/* il logo e' un collegamento: niente spazio parassita sotto l'immagine */
.gtf-brand .elementor-widget-image a{ display:block; line-height:0; }
.gtf-brand img{ display:block; height:auto; }
.gtf-header-bar{ transition:background-color .22s ease, box-shadow .22s ease, padding .22s ease; }
/* il fondo arriva da Elementor; qui solo vetro e filo d'ombra */
.gtf-header-bar{ backdrop-filter:saturate(1.3) blur(10px); }
.gtf-header-bar.elementor-sticky--effects{
  box-shadow:0 1px 0 rgba(18,58,71,.07)!important;
  padding-top:12px!important; padding-bottom:12px!important;
}
.gtf-header-bar .elementor-widget-nav-menu{ flex:1 1 auto; }
.gtf-header-bar .elementor-nav-menu--main .elementor-nav-menu{ flex-wrap:nowrap!important; }
.gtf-header-bar .elementor-nav-menu--main .elementor-item{ white-space:nowrap; }

/* il CTA nel menu serve solo alla tendina mobile */
.elementor-nav-menu--main .gtf-menu-cta{ display:none!important; }

/* --- masse di colore di sfondo: le forme circolari giganti della reference --- */
.gtf-blob{ position:relative; overflow:hidden; }
.gtf-blob::before{
  content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:0;
}
.gtf-blob > *{ position:relative; z-index:1; }
.gtf-blob--acc::before{
  width:820px; height:860px; right:-300px; top:-320px;
  background:rgba(56,111,179,.13);
}
.gtf-blob--acc2::before{
  width:700px; height:700px; left:-280px; bottom:-300px;
  background:rgba(71,158,153,.14);
}
.gtf-blob--ink::before{
  width:900px; height:900px; right:-340px; bottom:-380px;
  background:rgba(18,58,71,.07);
}
@media (max-width:900px){ .gtf-blob::before{ display:none; } }

/* --- slot immagine segnaposto --- */
.gtf-image-slot{ transition:background-color .2s ease; }

/* --- card corso: perimetro leggibile, immagini di proporzione unica,
       comando allineato in basso su tutte le card della riga --- */
.e-con.gtf-course-card{
  border:1px solid rgba(18,58,71,.08);
  box-shadow:0 1px 2px rgba(18,58,71,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow:hidden;
}
.e-con.gtf-course-card:hover{
  transform:translateY(-3px);
  border-color:rgba(56,111,179,.22);
  box-shadow:0 1px 2px rgba(18,58,71,.05), 0 18px 38px -18px rgba(18,58,71,.30);
}
/* le foto hanno proporzioni native diverse (da 16/9 a 16/13): qui una sola */
.gtf-course-card .elementor-widget-image img{
  aspect-ratio:16/10; object-fit:cover; width:100%; height:auto; display:block;
}
/* il corpo riempie l'altezza, il bottone si appoggia in fondo */
.gtf-course-card .gtf-course-body{ flex:1 1 auto; }
.gtf-course-card .gtf-course-body > .elementor-widget-button{ margin-top:auto; }
.gtf-course-card .elementor-widget-button .elementor-button{ width:100%; justify-content:center; }

/* --- tutte le altre card: stesso trattamento della card corso --- */
.e-con.gtf-card{
  border:1px solid rgba(18,58,71,.08);
  box-shadow:0 1px 2px rgba(18,58,71,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.e-con.gtf-card:hover{
  transform:translateY(-3px);
  border-color:rgba(56,111,179,.22);
  box-shadow:0 1px 2px rgba(18,58,71,.05), 0 18px 38px -18px rgba(18,58,71,.30);
}
/* su fondo scuro il perimetro e' chiaro, non scuro */
.e-con.gtf-card--ink{
  border-color:rgba(255,255,255,.10);
  box-shadow:none;
}
.e-con.gtf-card--ink:hover{
  border-color:rgba(255,255,255,.22);
  box-shadow:none;
}
/* citazione: il testo cresce, l'attribuzione resta appoggiata in fondo */
.gtf-card--quote > .elementor-widget-text-editor:first-child{ flex:1 1 auto; }
/* tassello con immagine: ritaglio unico come nelle card corso */
.gtf-card--tile .elementor-widget-image img{
  aspect-ratio:16/10; object-fit:cover; width:100%; height:auto; display:block;
}

/* --- accessibilità --- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .elementor-button:focus-visible{
  outline:2px solid var(--gtf-acc); outline-offset:3px; border-radius:6px;
}

/* --- form --- */
.elementor-field-group input:focus, .elementor-field-group textarea:focus,
.elementor-field-group select:focus{
  border-color:var(--gtf-acc)!important;
  box-shadow:0 0 0 3px rgba(56,111,179,.12);
}
.elementor-field-type-acceptance label{ font-size:13.5px; line-height:1.5; }
.elementor-message.elementor-message-success{
  background:rgba(56,111,179,.10); color:var(--gtf-acc-700);
  padding:14px 16px; border-radius:var(--gtf-r-inner);
}

/* --- accordion FAQ --- */
.elementor-accordion .elementor-tab-title{ padding:20px 4px; font-weight:400!important; }
.elementor-accordion .elementor-tab-content{ padding:0 4px 22px; border:0; }
.elementor-accordion .elementor-accordion-item{ border-left:0; border-right:0; border-top:0; }
.elementor-accordion .elementor-accordion-item:first-child{
  border-top:1px solid var(--gtf-line);
}

/* =====================================================================
   Markup dei renderer della scheda corso
   ===================================================================== */
/* --- card corso dentro il Loop Grid --- */
.gtf-card-corso{ display:flex; flex-direction:column; height:100%;
  background:var(--gtf-card); border:1px solid rgba(18,58,71,.08);
  border-radius:var(--gtf-r-card); padding:8px;
  box-shadow:0 1px 2px rgba(18,58,71,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.gtf-card-corso:hover{ transform:translateY(-3px); border-color:rgba(56,111,179,.22);
  box-shadow:0 1px 2px rgba(18,58,71,.05), 0 18px 38px -18px rgba(18,58,71,.30); }
.gtf-card-corso__media{ border-radius:var(--gtf-r-inner); overflow:hidden; }
.gtf-card-corso__img{ display:block; width:100%; height:auto;
  aspect-ratio:16/10; object-fit:cover; }
.gtf-card-corso__corpo{ display:flex; flex-direction:column; align-items:flex-start;
  gap:12px; padding:20px 18px; flex:1 1 auto; }
.gtf-card-corso__sigla{ background:rgba(56,111,179,.10); color:var(--gtf-acc-700);
  border-radius:var(--gtf-r-pill); padding:5px 12px; font-size:11.5px; font-weight:600; }
.gtf-card-corso__titolo{ font-size:21px; font-weight:500; letter-spacing:-.03em;
  line-height:1.3; color:var(--gtf-ink); margin:0; }
.gtf-card-corso__testo{ font-size:14.5px; line-height:1.6; color:var(--gtf-body); margin:0; }
.gtf-card-corso__chip{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.gtf-card-corso__chip li{ background:var(--gtf-surface); border-radius:var(--gtf-r-pill);
  padding:5px 13px; font-size:12.5px; color:var(--gtf-body); }
.gtf-card-corso__cta{ margin-top:auto; background:var(--gtf-surface); color:var(--gtf-ink);
  border:1px solid rgba(0,0,0,.08); border-radius:var(--gtf-r-btn);
  padding:12px 20px; font-size:15px; font-weight:500; }
.gtf-card-corso__cta:hover{ background:var(--gtf-tint); color:var(--gtf-ink); }
/* il Loop Grid deve stirare le card alla stessa altezza: senza questo ogni card
   e' alta quanto il proprio testo e i comandi finiscono a quote diverse */
.elementor-widget-loop-grid .elementor-loop-container{ align-items:stretch; }
.elementor-widget-loop-grid .e-loop-item{ display:flex; height:100%; }
.elementor-widget-loop-grid .e-loop-item > *{ width:100%; display:flex; }
.elementor-widget-loop-grid .e-loop-item .elementor-widget-shortcode,
.elementor-widget-loop-grid .e-loop-item .elementor-widget-container,
.elementor-widget-loop-grid .e-loop-item .elementor-shortcode{ width:100%; display:flex; }

.gtf-titolo{ font-size:48px; font-weight:500; letter-spacing:-.045em; line-height:1.1;
  color:var(--gtf-ink); margin:0; text-wrap:balance; }
@media (max-width:767px){ .gtf-titolo{ font-size:30px; } }

.gtf-meta{ display:flex; flex-wrap:wrap; gap:20px; background:var(--gtf-card);
  border:1px solid rgba(18,58,71,.08); border-radius:var(--gtf-r-card); padding:24px 26px; }
.gtf-meta__cella{ flex:1 1 160px; display:flex; flex-direction:column; gap:5px; }
.gtf-meta__cella i{ color:var(--gtf-acc); font-size:17px; }
.gtf-meta__et{ font-size:12.5px; color:#6B7A82; }
.gtf-meta__cella strong{ font-size:15px; font-weight:500; color:var(--gtf-ink); line-height:1.35; }

.gtf-lista{ display:flex; flex-direction:column; gap:11px; margin:0; padding:0; list-style:none; }
.gtf-lista li{ display:flex; gap:10px; align-items:flex-start; font-size:15.5px; line-height:1.6; }
.gtf-lista li i{ color:var(--gtf-acc); font-size:14px; margin-top:5px; flex:0 0 14px; }

.gtf-ore{ display:flex; flex-wrap:wrap; gap:16px; }
.gtf-ore__blocco{ flex:1 1 180px; background:var(--gtf-surface);
  border:1px solid rgba(18,58,71,.08); border-radius:var(--gtf-r-card); padding:22px; }
.gtf-ore__blocco b{ display:block; font-size:30px; font-weight:500; letter-spacing:-.03em;
  color:var(--gtf-acc); line-height:1.1; }
.gtf-ore__blocco span{ font-size:14px; color:var(--gtf-body); }
.gtf-nota{ font-size:14px; color:#6B7A82; margin-top:14px; }

.gtf-acc{ display:flex; flex-direction:column; }
.gtf-acc__voce{ border-bottom:1px solid var(--gtf-line); }
.gtf-acc__voce:first-child{ border-top:1px solid var(--gtf-line); }
.gtf-acc__voce summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:20px; padding:20px 4px;
  font-size:18px; font-weight:500; color:var(--gtf-ink); }
.gtf-acc__voce summary::-webkit-details-marker{ display:none; }
.gtf-acc__voce summary:hover{ color:var(--gtf-acc); }
.gtf-acc__segno{ position:relative; width:15px; height:15px; flex:0 0 15px; }
.gtf-acc__segno::before,.gtf-acc__segno::after{ content:""; position:absolute;
  background:var(--gtf-acc); border-radius:2px; }
.gtf-acc__segno::before{ inset:6.5px 0; height:2px; }
.gtf-acc__segno::after{ inset:0 6.5px; width:2px; transition:transform .2s; }
.gtf-acc__voce[open] .gtf-acc__segno::after{ transform:scaleY(0); }
.gtf-acc__corpo{ padding:0 4px 22px; font-size:15px; line-height:1.7; color:var(--gtf-body); }
.gtf-acc__corpo ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:7px; }
.gtf-acc__corpo p{ margin:0 0 10px; }

.gtf-tirocinio{ display:flex; flex-wrap:wrap; gap:44px; align-items:center;
  background:var(--gtf-ink); border-radius:var(--gtf-r-card); padding:48px 44px; }
.gtf-tirocinio__testo{ flex:1 1 420px; }
.gtf-tirocinio__eb{ display:inline-block; background:rgba(255,255,255,.10); color:#fff;
  border-radius:var(--gtf-r-pill); padding:5px 16px; font-size:12px; font-weight:500; }
.gtf-tirocinio h2{ color:#fff; font-size:36px; line-height:1.2; letter-spacing:-.04em;
  margin:14px 0 12px; }
.gtf-tirocinio p{ color:rgba(255,255,255,.72); font-size:16px; line-height:1.6; margin:0 0 20px; }
.gtf-tirocinio__cta{ display:inline-flex; background:var(--gtf-acc); color:#fff;
  border-radius:var(--gtf-r-btn); padding:15px 26px; font-size:16px; font-weight:500; }
.gtf-tirocinio__cta:hover{ background:var(--gtf-acc-700); color:#fff; }
.gtf-lista--chiara{ flex:1 1 300px; }
.gtf-lista--chiara li{ color:rgba(255,255,255,.82); }
.gtf-lista--chiara li i{ color:var(--gtf-teal); }

@media (max-width:767px){
  .gtf-tirocinio{ padding:32px 24px; gap:28px; }
  .gtf-tirocinio h2{ font-size:27px; }
  .gtf-meta{ padding:20px; gap:16px; }
  .gtf-meta__cella{ flex:1 1 100%; }
  .gtf-ore__blocco{ flex:1 1 100%; }
}

@media (max-width:1024px){
  .gtf-hide-mobile{ display:none!important; }
}

@media (max-width:767px){
  [id]{ scroll-margin-top:74px; }
  /* barra mobile: solo marchio a sinistra e hamburger a destra */
  .gtf-brand-name{ display:none!important; }
  .gtf-header-actions{ display:none!important; }
  .gtf-header-bar .elementor-widget-nav-menu{ flex:0 0 auto!important; width:auto!important; }
  .gtf-header-bar .elementor-menu-toggle{
    width:40px!important; height:40px!important; padding:0!important; margin-left:auto!important;
    display:flex!important; align-items:center; justify-content:center;
    background:transparent!important; border-radius:50%;
  }
  /* --- menu mobile alla Apple: foglio a tutto schermo che sfuma sopra la pagina ---
     Valori rilevati su apple.com: pannello con transizione .42s cubic-bezier(.4,0,.6,1)
     e ritardo .08s, voci in dissolvenza .24s, barra con blur(20px) saturate(1.8),
     righe piene con testo 19px/600. */
  .gtf-header-bar-inner{ position:relative; }
  .gtf-header-bar .elementor-widget-nav-menu{ position:static!important; }

  .gtf-header-bar .elementor-nav-menu--dropdown{
    position:fixed!important; left:0; right:0; top:0;
    width:auto!important; max-width:none!important;
    max-height:none!important; height:100dvh;
    padding:96px 20px 32px!important;
    /* .86 lasciava trasparire le masse di colore della pagina: qui serve copertura,
       il vetro resta nel filtro e sui bordi */
    background:rgba(237,242,243,.985)!important;
    backdrop-filter:saturate(1.8) blur(28px);
    border-radius:0!important; box-shadow:none!important;
    overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:998;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .42s cubic-bezier(.4,0,.6,1) .08s,
               visibility .42s steps(1,start) .08s;
  }
  .gtf-header-bar .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown{
    opacity:1; visibility:visible; pointer-events:auto;
  }

  /* righe piene, divisori sottili, niente pillole tranne il comando finale */
  .gtf-header-bar .elementor-nav-menu--dropdown .elementor-item{
    font-size:19px!important; font-weight:600!important; line-height:1.3!important;
    padding:17px 4px!important; color:var(--gtf-ink)!important;
    background:transparent!important; border-radius:0!important;
  }
  .gtf-header-bar .elementor-nav-menu--dropdown li:not(.gtf-menu-cta){
    border-bottom:1px solid rgba(18,58,71,.10);
  }
  .gtf-header-bar .elementor-nav-menu--dropdown .elementor-item:hover,
  .gtf-header-bar .elementor-nav-menu--dropdown .elementor-item.elementor-item-active{
    color:var(--gtf-acc)!important; background:transparent!important;
  }

  /* le voci entrano sfalsate, come sul riferimento */
  .gtf-header-bar .elementor-nav-menu--dropdown li{
    opacity:0; transform:translateY(10px);
    transition:opacity .24s cubic-bezier(.4,0,.6,1), transform .24s cubic-bezier(.4,0,.6,1);
  }
  .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li{
    opacity:1; transform:none;
  }
  .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(1){ transition-delay:.14s }
  .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(2){ transition-delay:.19s }
  .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(3){ transition-delay:.24s }
  .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(4){ transition-delay:.29s }
  .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(5){ transition-delay:.34s }
  .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(6){ transition-delay:.39s }
  .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown li:nth-child(7){ transition-delay:.44s }

  /* il comando principale chiude la lista, a pillola piena */
  .elementor-nav-menu--dropdown .gtf-menu-cta{ margin:24px 0 0; border-bottom:0!important; }
  .elementor-nav-menu--dropdown .gtf-menu-cta a.elementor-item{
    background:var(--gtf-acc)!important; color:#fff!important;
    border-radius:var(--gtf-r-btn)!important; justify-content:center; text-align:center;
    padding:17px 20px!important; font-size:17px!important;
  }
  .elementor-nav-menu--dropdown .gtf-menu-cta a.elementor-item:hover{
    background:var(--gtf-acc-700)!important; color:#fff!important;
  }

  /* la barra resta sopra il foglio: senza questo la X non e' cliccabile e il menu
     non si chiude, perche' il pannello e' figlio del widget nav e copre i fratelli */
  .gtf-header-bar{ z-index:999!important; }
  .gtf-header-bar .elementor-menu-toggle{ position:relative; z-index:999; }
  .gtf-header-bar .gtf-fit{ position:relative; z-index:999; }
  .gtf-header-bar .elementor-menu-toggle.elementor-active{
    background:transparent!important; color:var(--gtf-acc)!important;
  }
  /* pagina bloccata mentre il menu e' aperto */
  body:has(.elementor-menu-toggle.elementor-active){ overflow:hidden; }
}

@media print{ .gtf-header-bar, .elementor-widget-form{ display:none!important; } }

/* =====================================================================
   Movimento
   Ingresso delle sezioni, reazioni al passaggio del mouse, rifiniture
   tipografiche. Tutto sotto la soglia del "si nota solo se manca".
   ===================================================================== */

/* --- ingresso in scena: le classi le mette motion.js, senza JS resta visibile --- */
.gtf-motion .gtf-entra{
  opacity:0; transform:translateY(24px) scale(.995);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),
             transform .6s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.gtf-motion .gtf-entra.gtf-dentro{ opacity:1; transform:none; }

/* --- card: sollevamento gia' presente, qui l'immagine respira --- */
.gtf-card-corso__media{ overflow:hidden; }
.gtf-card-corso__img,
.gtf-course-card .elementor-widget-image img,
.gtf-card--tile .elementor-widget-image img{
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.gtf-card-corso:hover .gtf-card-corso__img,
.e-con.gtf-course-card:hover .elementor-widget-image img,
.e-con.gtf-card--tile:hover .elementor-widget-image img{
  transform:translate3d(0, var(--gtf-float, 0px), 0) scale(1.09);
}

/* il comando della card si fa avanti */
.gtf-card-corso__cta{ transition:background-color .2s ease, transform .2s ease,
  border-color .2s ease, color .2s ease; }
.gtf-card-corso:hover .gtf-card-corso__cta{
  background:var(--gtf-acc); border-color:var(--gtf-acc); color:#fff;
}

/* --- bottoni: pressione percepibile --- */
.elementor-button{ transition:background-color .2s ease, color .2s ease,
  border-color .2s ease, transform .12s ease, box-shadow .2s ease; }
.elementor-button:hover{ transform:translateY(-1px); }
.elementor-button:active{ transform:translateY(0); }

/* --- voci di menu: sottolineatura che cresce dal centro --- */
.elementor-nav-menu--main .elementor-item{ position:relative; }
/* la selettivita' alta serve a battere il colore del "pointer" di Elementor */
.elementor-widget-nav-menu .elementor-nav-menu--main.elementor-nav-menu__container .elementor-item::after{
  content:""; position:absolute; left:50%; right:50%; bottom:2px; height:1.5px;
  background-color:var(--gtf-acc); border-radius:2px;
  transition:left .22s ease, right .22s ease;
}
.elementor-nav-menu--main .elementor-item:hover::after,
.elementor-nav-menu--main .elementor-item.elementor-item-active::after{ left:8px; right:8px; }

/* --- elenchi del footer: scorrimento laterale --- */
.elementor-location-footer .elementor-icon-list-item a{
  transition:color .2s ease, transform .2s ease; display:inline-flex;
}
.elementor-location-footer .elementor-icon-list-item a:hover{
  color:var(--gtf-acc); transform:translateX(3px);
}

/* --- accordion: apertura meno secca --- */
.gtf-acc__corpo, .elementor-accordion .elementor-tab-content{
  animation:gtf-apri .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes gtf-apri{ from{ opacity:0; transform:translateY(-6px); } }

/* --- barre piene: si allungano appena --- */
.gtf-motion .e-con[class*="gtf-"] .elementor-widget-icon + .elementor-widget-text-editor{
  transition:transform .2s ease;
}

/* --- forme di sfondo: si muovono col scorrimento, molto poco --- */
@media (prefers-reduced-motion: no-preference){
  .gtf-blob::before{ animation:gtf-respira 18s ease-in-out infinite alternate; }
  @keyframes gtf-respira{
    from{ transform:translate3d(0,0,0) scale(1); }
    to{ transform:translate3d(0,-18px,0) scale(1.06); }
  }
}

/* =====================================================================
   Caratterizzazione tipografica
   Geist e' neutro per natura: qui prende un carattere piu' definito
   senza cambiare famiglia.
   ===================================================================== */
:root{ --gtf-t-display:-.055em; --gtf-t-titolo:-.035em; }

h1, .gtf-titolo, .elementor-widget-heading h1{
  letter-spacing:var(--gtf-t-display);
  font-optical-sizing:auto;
  word-spacing:-.01em;
}
h2, .elementor-widget-heading h2{ letter-spacing:-.042em; }
h3, h4, .gtf-card-corso__titolo{ letter-spacing:var(--gtf-t-titolo); }

/* i numeri sono un elemento di identita': allineati e piu' stretti */
.gtf-ore__blocco b, .gtf-card-corso__chip li,
.elementor-widget-heading .elementor-heading-title{
  font-variant-numeric:tabular-nums lining-nums;
}
.gtf-ore__blocco b{ letter-spacing:-.05em; }

/* il corpo del testo respira, il grassetto stacca davvero */
body{ text-rendering:optimizeLegibility; }
strong, b{ font-weight:600; color:var(--gtf-ink); }

/* eyebrow: piu' definito, resta senza maiuscolo come nel riferimento */
.gtf-eyebrow p{ letter-spacing:.005em; font-feature-settings:"cv05" 1; }

/* le righe lunghe non superano la misura leggibile */
.elementor-widget-text-editor p{ max-width:72ch; }
.gtf-card-corso__testo, .gtf-acc__corpo p{ max-width:none; }

@media (prefers-reduced-motion: reduce){
  .gtf-entra{ opacity:1!important; transform:none!important; }
  .gtf-blob::before{ animation:none!important; }
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* --- il puntatore illumina appena la card che sorvola (coord. da motion.js) --- */
.e-con.gtf-card, .e-con.gtf-course-card, .gtf-card-corso{ position:relative; }
.e-con.gtf-card::after,
.e-con.gtf-course-card::after,
.gtf-card-corso::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  border-radius:inherit; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(220px circle at var(--gtf-mx,50%) var(--gtf-my,50%),
    rgba(56,111,179,.075), transparent 70%);
}
.e-con.gtf-card:hover::after,
.e-con.gtf-course-card:hover::after,
.gtf-card-corso:hover::after{ opacity:1; }
.e-con.gtf-card--ink::after, .e-con.gtf-card--ink:hover::after{
  background:radial-gradient(220px circle at var(--gtf-mx,50%) var(--gtf-my,50%),
    rgba(255,255,255,.07), transparent 70%);
}
.e-con.gtf-card > *, .e-con.gtf-course-card > *, .gtf-card-corso > *{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){
  .e-con.gtf-card::after, .e-con.gtf-course-card::after, .gtf-card-corso::after{ display:none; }
}

/* =====================================================================
   Fasce a contrasto
   Alcune sezioni escono dal fondo chiaro e diventano una massa piena:
   inchiostro (--ink) o blu del marchio (--acc). Il fondo lo mette
   Elementor; qui ribalto i colori del contenuto in un punto solo, cosi'
   ogni widget dentro la fascia si adegua senza essere ricolorato a mano.
   L'!important serve perche' Elementor genera CSS per singolo elemento,
   piu' specifico di qualunque selettore di tema.
   ===================================================================== */
.gtf-band{ position:relative; isolation:isolate; }

.gtf-band--ink h1, .gtf-band--ink h2, .gtf-band--ink h3, .gtf-band--ink h4,
.gtf-band--acc h1, .gtf-band--acc h2, .gtf-band--acc h3, .gtf-band--acc h4,
.gtf-band--ink .elementor-heading-title,
.gtf-band--acc .elementor-heading-title{ color:#fff!important; }

.gtf-band--ink .elementor-widget-text-editor,
.gtf-band--ink .elementor-widget-text-editor p,
.gtf-band--ink .elementor-icon-list-text,
.gtf-band--acc .elementor-widget-text-editor,
.gtf-band--acc .elementor-widget-text-editor p,
.gtf-band--acc .elementor-icon-list-text{ color:rgba(255,255,255,.80)!important; }
.gtf-band--ink strong, .gtf-band--acc strong,
.gtf-band--ink b, .gtf-band--acc b{ color:#fff; }

/* etichetta tonda */
/* La classe .gtf-eyebrow sta sul widget, che e' largo quanto la colonna: il
   fondo va messo sulla <p>, che e' la pillola vera. Prima si vedeva una barra
   chiara larga tutta la sezione, con la scritta bianca su bianco. */
.gtf-band--ink .gtf-eyebrow p, .gtf-band--acc .gtf-eyebrow p{
  background:rgba(255,255,255,.16)!important; color:#fff!important;
}
.gtf-band--ink .gtf-eyebrow p::before{ background:var(--gtf-teal)!important; }
.gtf-band--acc .gtf-eyebrow p::before{ background:#fff!important; }

/* card dentro la fascia: superficie di vetro, non bianco pieno */
.gtf-band--ink .e-con.gtf-card, .gtf-band--acc .e-con.gtf-card,
.gtf-band--ink .gtf-card-corso, .gtf-band--acc .gtf-card-corso{
  background:rgba(255,255,255,.075)!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:none;
}
.gtf-band--ink .e-con.gtf-card:hover, .gtf-band--acc .e-con.gtf-card:hover,
.gtf-band--ink .gtf-card-corso:hover, .gtf-band--acc .gtf-card-corso:hover{
  background:rgba(255,255,255,.12)!important;
  border-color:rgba(255,255,255,.28)!important;
}
.gtf-band--ink .e-con.gtf-card::after, .gtf-band--acc .e-con.gtf-card::after{
  background:radial-gradient(220px circle at var(--gtf-mx,50%) var(--gtf-my,50%),
    rgba(255,255,255,.10), transparent 70%);
}
/* la card scura dentro la fascia blu resta scura: e' il suo contrasto */
.gtf-band--acc .e-con.gtf-card--ink{
  background:var(--gtf-ink)!important; border-color:rgba(255,255,255,.10)!important;
}
.gtf-band--acc .e-con.gtf-card--ink:hover{ background:#0E2C36!important; }

/* chip, sigle e piccoli fondi chiari */
.gtf-band--ink .gtf-card-corso__sigla, .gtf-band--acc .gtf-card-corso__sigla,
.gtf-band--ink .gtf-card-corso__chip li, .gtf-band--acc .gtf-card-corso__chip li{
  background:rgba(255,255,255,.14); color:#fff;
}
.gtf-band--ink .gtf-card-corso__titolo, .gtf-band--acc .gtf-card-corso__titolo,
.gtf-band--ink .gtf-card-corso__testo, .gtf-band--acc .gtf-card-corso__testo{ color:#fff; }
.gtf-band--ink .gtf-card-corso__testo, .gtf-band--acc .gtf-card-corso__testo{
  color:rgba(255,255,255,.78);
}
.gtf-band--ink .gtf-card-corso__cta, .gtf-band--acc .gtf-card-corso__cta{
  background:rgba(255,255,255,.14); color:#fff; border-color:transparent;
}
.gtf-band--ink .gtf-card-corso:hover .gtf-card-corso__cta,
.gtf-band--acc .gtf-card-corso:hover .gtf-card-corso__cta{
  background:#fff; color:var(--gtf-ink); border-color:#fff;
}

/* icone: dentro la fascia diventano bianche, altrimenti spariscono */
.gtf-band--ink .elementor-icon, .gtf-band--acc .elementor-icon,
.gtf-band--ink .elementor-icon-list-icon i, .gtf-band--acc .elementor-icon-list-icon i,
.gtf-band--ink .elementor-icon i, .gtf-band--acc .elementor-icon i{ color:#fff!important; }
.gtf-band--ink .elementor-icon svg, .gtf-band--acc .elementor-icon svg,
.gtf-band--ink .elementor-icon-list-icon svg,
.gtf-band--acc .elementor-icon-list-icon svg{ fill:#fff!important; }

/* bottoni: nella fascia blu il blu non si vede, quindi si inverte */
.gtf-band--acc .elementor-button{ background-color:#fff!important; color:var(--gtf-ink)!important;
  border-color:#fff!important; }
.gtf-band--acc .elementor-button:hover{ background-color:var(--gtf-tint)!important; }
.gtf-band--ink .elementor-button{ background-color:var(--gtf-acc)!important; color:#fff!important;
  border-color:var(--gtf-acc)!important; }
.gtf-band--ink .elementor-button:hover{ background-color:#fff!important; color:var(--gtf-ink)!important;
  border-color:#fff!important; }

/* separatori, accordion e tabelle interne */
.gtf-band--ink .elementor-divider-separator,
.gtf-band--acc .elementor-divider-separator{ border-color:rgba(255,255,255,.18)!important; }
.gtf-band--ink .gtf-acc__voce, .gtf-band--acc .gtf-acc__voce{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);
}
.gtf-band--ink .gtf-acc__titolo, .gtf-band--acc .gtf-acc__titolo{ color:#fff; }
.gtf-band--ink .gtf-acc__corpo, .gtf-band--acc .gtf-acc__corpo{ color:rgba(255,255,255,.78); }
.gtf-band--ink .gtf-meta, .gtf-band--acc .gtf-meta,
.gtf-band--ink .gtf-ore, .gtf-band--acc .gtf-ore{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14);
}
/* l'elemento va incluso insieme ai discendenti: con il solo "*" il testo
   scritto direttamente dentro il blocco restava del colore chiaro di pagina */
.gtf-band--ink .gtf-meta, .gtf-band--acc .gtf-meta,
.gtf-band--ink .gtf-meta *, .gtf-band--acc .gtf-meta *,
.gtf-band--ink .gtf-ore, .gtf-band--acc .gtf-ore,
.gtf-band--ink .gtf-ore *, .gtf-band--acc .gtf-ore *,
.gtf-band--ink .gtf-lista, .gtf-band--acc .gtf-lista,
.gtf-band--ink .gtf-lista li, .gtf-band--acc .gtf-lista li,
.gtf-band--ink .gtf-tirocinio, .gtf-band--acc .gtf-tirocinio,
.gtf-band--ink .gtf-tirocinio *, .gtf-band--acc .gtf-tirocinio *,
.gtf-band--ink .gtf-sintesi, .gtf-band--acc .gtf-sintesi,
.gtf-band--ink .gtf-sintesi *, .gtf-band--acc .gtf-sintesi *{ color:#fff; }
/* eccezione: dentro il modulo bianco il testo resta scuro */
.gtf-band .gtf-form-card *{ color:inherit; }

/* la fascia non deve ereditare le forme decorative del fondo chiaro */
.gtf-band.gtf-blob::before{ display:none; }

/* stacco fra fascia e fondo: un filo di luce, non una riga netta */
.gtf-band::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:rgba(255,255,255,.10); pointer-events:none;
}

/* --- blocco "in sintesi": la risposta diretta in cima alla pagina corso --- */
.gtf-sintesi{ background:var(--gtf-surface); border:1px solid rgba(18,58,71,.08);
  border-radius:var(--gtf-r-card); padding:26px 28px; }
.gtf-sintesi__frase{ font-size:20px; line-height:1.45; font-weight:500;
  letter-spacing:-.03em; color:var(--gtf-ink); margin:0 0 10px; max-width:62ch; }
.gtf-sintesi__sunto{ font-size:15.5px; line-height:1.65; color:var(--gtf-body);
  margin:0; max-width:70ch; }
.gtf-sintesi__fatti{ display:flex; flex-wrap:wrap; gap:10px 12px; margin:20px 0 0; }
.gtf-sintesi__fatti > div{ flex:1 1 160px; background:#fff; border-radius:var(--gtf-r-inner);
  border:1px solid rgba(18,58,71,.07); padding:12px 14px; }
.gtf-sintesi__fatti dt{ font-size:11.5px; letter-spacing:.02em; color:#6B7A82;
  margin:0 0 3px; }
.gtf-sintesi__fatti dd{ margin:0; font-size:15.5px; font-weight:500; color:var(--gtf-ink);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums lining-nums; }
.gtf-band--ink .gtf-sintesi, .gtf-band--acc .gtf-sintesi{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); }
@media (max-width:767px){ .gtf-sintesi{ padding:20px; } .gtf-sintesi__frase{ font-size:18px; } }

/* =====================================================================
   Fluttuazione allo scorrimento
   Le coordinate le calcola motion.js in rAF; qui c'e' solo il modo in cui
   l'elemento le usa. Ampiezze piccole: deve sembrare profondita', non
   un carosello.
   ===================================================================== */
.gtf-motion .gtf-fluttua{ transform:translate3d(0, var(--gtf-float, 0px), 0); }
.gtf-motion .gtf-fluttua--img{ will-change:transform; }
/* l'immagine si muove dentro la sua cornice: la cornice non si muove */
.gtf-motion .gtf-card-corso__media, .gtf-motion .gtf-card--tile,
.gtf-motion .elementor-widget-image, .gtf-motion .elementor-widget-theme-post-featured-image{
  overflow:hidden;
}
.gtf-motion .gtf-fluttua--img img{ transform:translate3d(0, var(--gtf-float, 0px), 0) scale(1.06); }
@media (prefers-reduced-motion: reduce){
  .gtf-fluttua, .gtf-fluttua--img img{ transform:none!important; }
}

/* =====================================================================
   Telefono: togliere l'effetto "tubo di blocchi"
   Il problema non e' la larghezza, e' il ritmo: tutto uguale, tutto
   incolonnato, tutto con la stessa cornice. Qui cambio densita', misura
   dei titoli e alterno le superfici.
   ===================================================================== */
@media (max-width: 767px){
  /* due per riga dove il contenuto e' breve */
  .gtf-due{ flex-direction:row!important; flex-wrap:wrap!important; gap:10px!important; }
  .gtf-due > .e-con{ width:calc(50% - 5px)!important; flex:0 0 calc(50% - 5px)!important; }

  /* card piu' compatte e meno "scatolate" */
  .e-con.gtf-card{ padding:18px 16px!important; border-radius:16px; }
  .gtf-card-corso{ padding:14px; border-radius:16px; }
  .gtf-sintesi{ padding:18px 16px; }

  /* i tasselli brevi perdono la cornice: restano testo su fondo */
  .gtf-due > .e-con > .e-con-inner > .e-con.gtf-card,
  .gtf-due .e-con.gtf-card{ box-shadow:none; }

  /* titoli: scala piu' stretta, cosi' le sezioni si distinguono fra loro */
  .elementor-widget-heading h2{ font-size:29px!important; line-height:1.16!important; }
  .elementor-widget-heading h3{ font-size:19px!important; }
  .elementor-widget-text-editor p{ font-size:15px!important; }

  /* aria verticale: meno dentro la sezione, di piu' fra una sezione e l'altra.
     Solo le sezioni di pagina: "e-parent" in Elementor non vuol dire "di primo
     livello", lo portano anche i contenitori annidati (e l'header). */
  [data-elementor-type="wp-page"] > .e-con.e-parent,
  .elementor-location-single > .e-con.e-parent{
    padding-top:44px!important; padding-bottom:44px!important;
  }
  [data-elementor-type="wp-page"] > .gtf-band.e-con,
  .elementor-location-single > .gtf-band.e-con{
    padding-top:56px!important; padding-bottom:56px!important;
  }

  /* i corsi diventano una fila che scorre: si capisce che ce ne sono altri */
  .elementor-loop-container{
    display:flex!important; flex-wrap:nowrap!important;
    overflow-x:auto; scroll-snap-type:x mandatory; align-items:stretch!important;
    gap:12px; padding-bottom:6px; margin-inline:-18px; padding-inline:18px;
    scrollbar-width:none;
  }
  .elementor-loop-container::-webkit-scrollbar{ display:none; }
  .elementor-loop-container > .e-loop-item{
    flex:0 0 82%!important; width:82%!important; scroll-snap-align:start;
    align-self:stretch!important;
    /* height:100% (regola della griglia) qui impedisce lo stiramento:
       con altezza auto le card si allineano all'elemento piu' alto */
    height:auto!important;
  }
  .elementor-loop-container > .e-loop-item > .e-con,
  .elementor-loop-container > .e-loop-item .gtf-card-corso{ height:100%; }
}

/* --- il modulo dentro una fascia piena resta una card bianca: un form
       trasparente su fondo colorato non si compila --- */
.gtf-band .e-con.gtf-form-card,
.gtf-band .e-con.gtf-form-card:hover{
  background:#fff!important; border-color:rgba(18,58,71,.08)!important;
}
.gtf-band .gtf-form-card .elementor-field-group > label,
.gtf-band .gtf-form-card .elementor-field-subgroup label,
.gtf-band .gtf-form-card p,
.gtf-band .gtf-form-card .elementor-widget-text-editor p{ color:var(--gtf-body)!important; }
.gtf-band .gtf-form-card input, .gtf-band .gtf-form-card select,
.gtf-band .gtf-form-card textarea{ color:var(--gtf-ink)!important; }
.gtf-band .gtf-form-card .elementor-button{
  background-color:var(--gtf-acc)!important; color:#fff!important;
  border-color:var(--gtf-acc)!important;
}
.gtf-band .gtf-form-card .elementor-button:hover{
  background-color:var(--gtf-ink)!important; border-color:var(--gtf-ink)!important;
}
.gtf-band .gtf-form-card::after{ display:none; }

/* =====================================================================
   Fasce: il contenuto generato dai renderer
   I blocchi dei campi (ore, meta, elenchi, testi) arrivano da widget
   "shortcode", non da widget di testo: le regole scritte per il testo non
   li toccavano. Risultato: card bianche con scritte bianche e paragrafi
   scuri su fondo scuro. Qui vengono trattati come tutto il resto.
   ===================================================================== */
.gtf-band--ink .elementor-widget-shortcode :is(p, li, span, dd, td, th, summary, em),
.gtf-band--acc .elementor-widget-shortcode :is(p, li, span, dd, td, th, summary, em),
.gtf-band--ink .gtf-nota, .gtf-band--acc .gtf-nota{
  color:rgba(255,255,255,.82);
}
.gtf-band--ink .elementor-widget-shortcode :is(strong, b, h2, h3, h4, dt),
.gtf-band--acc .elementor-widget-shortcode :is(strong, b, h2, h3, h4, dt){
  color:#fff;
}

/* superfici interne: vetro, non bianco pieno */
.gtf-band--ink .gtf-ore__blocco, .gtf-band--acc .gtf-ore__blocco,
.gtf-band--ink .gtf-meta__cella, .gtf-band--acc .gtf-meta__cella,
.gtf-band--ink .gtf-sintesi__fatti > div, .gtf-band--acc .gtf-sintesi__fatti > div{
  background:rgba(255,255,255,.09)!important;
  border-color:rgba(255,255,255,.16)!important;
}
.gtf-band--ink .gtf-ore__blocco b, .gtf-band--acc .gtf-ore__blocco b{ color:#fff; }
.gtf-band--ink .gtf-meta__et, .gtf-band--acc .gtf-meta__et{ color:rgba(255,255,255,.62); }

/* icone degli elenchi: l'accento blu sul fondo scuro sparisce */
.gtf-band--ink .gtf-lista li i, .gtf-band--ink .gtf-meta__cella i{ color:var(--gtf-teal)!important; }
.gtf-band--acc .gtf-lista li i, .gtf-band--acc .gtf-meta__cella i{ color:#fff!important; }

/* separatori dell'accordion dentro la fascia */
.gtf-band--ink .gtf-acc__voce, .gtf-band--acc .gtf-acc__voce{
  border-color:rgba(255,255,255,.18)!important;
}

/* unica eccezione: dentro la card bianca del modulo il testo resta scuro */
.gtf-band .gtf-form-card :is(p, li, span, label, strong, b, dt, dd){
  color:var(--gtf-body)!important;
}
.gtf-band .gtf-form-card :is(h2, h3, h4){ color:var(--gtf-ink)!important; }

/* --- icone in linea dei renderer (SVG, colore ereditato) --- */
.gtf-ic{ flex:0 0 auto; display:block; }
.gtf-meta__cella{ position:relative; }
.gtf-meta__cella .gtf-ic{ color:var(--gtf-acc); margin-bottom:9px; width:20px; height:20px; }
.gtf-lista li .gtf-ic{ color:var(--gtf-acc); margin-top:3px; width:17px; height:17px; }
.gtf-band--ink .gtf-meta__cella .gtf-ic, .gtf-band--ink .gtf-lista li .gtf-ic{ color:var(--gtf-teal); }
.gtf-band--acc .gtf-meta__cella .gtf-ic, .gtf-band--acc .gtf-lista li .gtf-ic{ color:#fff; }

/* --- WhatsApp assistenza: fisso in basso a destra, sopra ogni cosa --- */
.gtf-wa{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  display:inline-flex; align-items:center; gap:9px;
  background:#25D366; color:#fff; text-decoration:none;
  padding:12px 18px 12px 14px; border-radius:var(--gtf-r-pill);
  box-shadow:0 10px 26px rgba(18,58,71,.22);
  font-size:14.5px; font-weight:500; letter-spacing:-.01em; line-height:1;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.gtf-wa:hover{ transform:translateY(-2px); background:#1FBE5A; color:#fff;
  box-shadow:0 14px 32px rgba(18,58,71,.28); }
.gtf-wa:focus-visible{ outline:3px solid var(--gtf-ink); outline-offset:3px; }
.gtf-wa svg{ flex:0 0 auto; }
@media (max-width:767px){
  .gtf-wa{ right:14px; bottom:14px; padding:13px; }
  .gtf-wa__et{ display:none; }   /* su telefono resta il solo simbolo */
}
@media print{ .gtf-wa{ display:none; } }

/* --- data di aggiornamento delle informative --- */
.gtf-aggiornato{ font-size:13.5px; color:#6B7A82; margin:0; }
