/* =====================================================================================================================
   Restyling di www.temposrl.com (configurazioni *_TEMPO): caricato da _LayoutTempo dopo i CSS di Elementor
   (/sites/tempo/vendor.css), il tema nell'Aspetto "CSS" (/pages/theme.css) e /sites/tempo/site.css.
   I contenuti sono quelli di Tempo (markup di Elementor/WPBakery): qui si cambia l'aspetto, non il markup, quindi le
   regole che devono vincere su quelle per elemento di Elementor (.elementor-65 .elementor-element.elementor-element-x)
   usano !important. La home ha le stesse sezioni e gli stessi testi di quella di Tempo, con markup nuovo
   (tools/tempo/home.html, classi tn-*).

    1. Variabili: colori aziendali, font, ombre
    2. Base e tipografia (anche i font del kit di Elementor)
    3. Header e menù (desktop, sottomenù, mobile)
    4. Pulsanti
    5. Pagine interne (sezioni Elementor, WPBakery)
   5b. Contenuti delle pagine di prodotto e di progetto (tn-contenuto)
   5c. Corsi in evidenza e Archivio corsi: intestazione e testo (tn-intestazione, tn-corsi)
   5d. Intestazioni delle pagine interne alte come lo slider della home (tn-testata)
    6. Pagine dei corsi: pulsanti delle sezioni e sezioni
    7. Moduli (Caldera, Contact Form 7)
    8. Footer
    9. Home: componenti tn-*
   10. Animazioni e accessibilità
   ===================================================================================================================== */


/* 1. Variabili ------------------------------------------------------------------------------------------------------ */
body.tempo {
    /* colori aziendali di Tempo (kit di Elementor): blu, azzurro, celeste, arancio, ghiaccio, testo */
    --tn-blue: #0F549F;
    --tn-blue-dark: #0A3A70;
    --tn-navy: #071E3D;
    --tn-cyan: #11ABE3;
    --tn-sky: #60C6EC;
    --tn-orange: #F39200;
    --tn-ice: #EAF0F6;
    --tn-text: #242D33;
    --tn-muted: #5B6873;
    --tn-line: #DCE4EC;
    --tn-white: #FFFFFF;

    --tn-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --tn-font-title: "Manrope", "Inter", system-ui, sans-serif;

    --tn-radius: 16px;
    --tn-radius-sm: 10px;
    --tn-shadow-sm: 0 1px 2px rgba(7, 30, 61, .06), 0 2px 8px rgba(7, 30, 61, .05);
    --tn-shadow: 0 10px 30px -12px rgba(7, 30, 61, .22);
    --tn-shadow-lg: 0 24px 60px -20px rgba(7, 30, 61, .35);
    --tn-header-h: 76px;
    --tn-container: 1200px;
    /* altezza dello slider della home e delle intestazioni delle pagine interne (5d), la stessa per tutte */
    --tn-hero-h: 520px;

    /* i font del kit di Elementor (Nunito, che il sito originale non caricava): tutti i widget li leggono da qui */
    --e-global-typography-primary-font-family: "Manrope";
    --e-global-typography-secondary-font-family: "Manrope";
    --e-global-typography-text-font-family: "Inter";
    --e-global-typography-accent-font-family: "Manrope";
    --e-global-typography-685285e-font-family: "Inter";
    --e-global-typography-bb96911-font-family: "Inter";
    --e-global-typography-e1d26de-font-family: "Manrope";
}


/* 2. Base e tipografia ---------------------------------------------------------------------------------------------- */
body.tempo {
    font-family: var(--tn-font);
    color: var(--tn-text);
    background: var(--tn-white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body.tempo h1, body.tempo h2, body.tempo h3, body.tempo h4, body.tempo h5,
body.tempo .elementor-heading-title {
    font-family: var(--tn-font-title) !important;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
body.tempo p, body.tempo li, body.tempo .elementor-text-editor, body.tempo .wpb_text_column {
    font-family: var(--tn-font);
}
body.tempo a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
body.tempo ::selection { background: var(--tn-sky); color: var(--tn-navy); }
body.tempo :focus-visible { outline: 3px solid var(--tn-sky); outline-offset: 2px; }
body.tempo img { max-width: 100%; height: auto; }


/* 3. Header e menù -------------------------------------------------------------------------------------------------- */
body.tempo .elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 100;
}
body.tempo .elementor-location-header .elementor-top-section {
    background: rgba(255, 255, 255, .86) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: none !important;
    border-bottom: 1px solid rgba(15, 84, 159, .08);
    transition: box-shadow .25s ease, background-color .25s ease;
}
body.tempo.tn-scrolled .elementor-location-header .elementor-top-section {
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 8px 30px -18px rgba(7, 30, 61, .45) !important;
}
body.tempo .elementor-location-header .elementor-top-section > .elementor-container {
    min-height: var(--tn-header-h) !important;
}
body.tempo .elementor-location-header .elementor-widget-image img {
    max-height: 54px !important;
    width: auto !important;
}
/* seconda sezione dell'header di Elementor, vuota: con lo sfondo traslucido sarebbe una fascia bianca sotto il menù */
body.tempo .elementor-location-header .elementor-element-f3ce756 { display: none !important; }

/* voci di primo livello: niente maiuscolo e niente separatori, sottolineatura animata */
body.tempo .elementor-location-header .elementor-widget-nav-menu {
    --e-nav-menu-divider-content: none !important;
}
body.tempo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li:not(:last-child)::after {
    display: none !important;
}
body.tempo .elementor-location-header .elementor-nav-menu--main .elementor-item {
    position: relative;
    font-family: var(--tn-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--tn-text) !important;
    padding: 10px 16px !important;
    border-radius: 999px;
}
body.tempo .elementor-location-header .elementor-nav-menu--main .elementor-item::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--tn-cyan);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
body.tempo .elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
body.tempo .elementor-location-header .elementor-nav-menu--main .elementor-item:focus-visible,
body.tempo .elementor-location-header .elementor-nav-menu--main li:hover > .elementor-item {
    color: var(--tn-blue) !important;
}
body.tempo .elementor-location-header .elementor-nav-menu--main .elementor-item:hover::after,
body.tempo .elementor-location-header .elementor-nav-menu--main li:hover > .elementor-item::after,
body.tempo .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active::after,
body.tempo .elementor-location-header .elementor-nav-menu--main .current-menu-ancestor > .elementor-item::after {
    transform: scaleX(1);
}
body.tempo .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active,
body.tempo .elementor-location-header .elementor-nav-menu--main .current-menu-ancestor > .elementor-item {
    color: var(--tn-blue) !important;
}
body.tempo .elementor-location-header .elementor-nav-menu--main .sub-arrow { margin-left: 4px; opacity: .6; }

/* sottomenù desktop: card bianca con ombra al posto dei blocchi blu */
body.tempo .elementor-location-header .elementor-nav-menu--main ul.sub-menu {
    background: var(--tn-white) !important;
    border: 1px solid var(--tn-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--tn-shadow-lg) !important;
    padding: 8px !important;
    min-width: 230px !important;
}
body.tempo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu {
    margin-top: 6px !important;
}
body.tempo .elementor-location-header .elementor-nav-menu--main ul.sub-menu ul.sub-menu {
    margin-left: 8px !important;
    top: -9px !important;
}
body.tempo .elementor-location-header .elementor-nav-menu--main ul.sub-menu ul.sub-menu.e-a-sinistra {
    margin-left: 0 !important;
    margin-right: 8px !important;
}
/* ponte invisibile: il sottomenù non si chiude passando nello spazio tra voce e card */
body.tempo .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}
/* lo stesso al terzo livello: tra la voce madre e il sottomenù ci sono il padding della card e il bordo, coperti dal
   margine di 8px; il padding è dell'<ul>, non della voce, e senza ponte la voce perde l'hover e il sottomenù si chiude */
body.tempo .elementor-location-header .elementor-nav-menu--main ul.sub-menu ul.sub-menu::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -18px;
    width: 18px;
}
body.tempo .elementor-location-header .elementor-nav-menu--main ul.sub-menu ul.sub-menu.e-a-sinistra::before {
    left: auto;
    right: -18px;
}body.tempo .elementor-location-header .elementor-nav-menu--main ul.sub-menu li { border: 0 !important; }
body.tempo .elementor-location-header .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item {
    font-family: var(--tn-font) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    color: var(--tn-text) !important;
    background: transparent !important;
    padding: 10px 14px !important;
    border-radius: 9px !important;
    border: 0 !important;
}
body.tempo .elementor-location-header .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:hover,
body.tempo .elementor-location-header .elementor-nav-menu--main ul.sub-menu li:hover > a.elementor-sub-item,
body.tempo .elementor-location-header .elementor-nav-menu--main ul.sub-menu a.elementor-item-active {
    background: var(--tn-ice) !important;
    color: var(--tn-blue) !important;
}

/* menù mobile */
body.tempo .elementor-location-header .elementor-menu-toggle {
    background: var(--tn-ice) !important;
    border-radius: 12px;
    padding: 10px;
}
body.tempo .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    background: var(--tn-white) !important;
    border-top: 1px solid var(--tn-line);
    box-shadow: var(--tn-shadow-lg);
}
/* aperta: scorre al suo interno quando le voci superano lo schermo (altezza da tema.js) */
body.tempo .elementor-location-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
    overflow-y: auto !important;
    overscroll-behavior: contain;
}
body.tempo .elementor-location-header .elementor-nav-menu--dropdown li { border: 0 !important; }
body.tempo .elementor-location-header .elementor-nav-menu--dropdown a {
    font-family: var(--tn-font) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    color: var(--tn-text) !important;
    background: transparent !important;
    padding: 14px 24px !important;
    border-bottom: 1px solid var(--tn-ice) !important;
    justify-content: flex-start !important;
}
/* i sottomenù dentro la tendina hanno anche loro la classe elementor-nav-menu--dropdown, che nel kit di Tempo è blu:
   qui sono un fondo appena azzurrato, rientrati di un livello alla volta */
body.tempo .elementor-location-header .elementor-nav-menu__container ul.sub-menu {
    background: #F6F9FC !important;
}
body.tempo .elementor-location-header .elementor-nav-menu--dropdown ul.sub-menu a {
    font-weight: 500 !important;
    padding-left: 40px !important;
    color: var(--tn-muted) !important;
}
body.tempo .elementor-location-header .elementor-nav-menu--dropdown ul.sub-menu ul.sub-menu a {
    padding-left: 56px !important;
    font-size: 15px !important;
}
body.tempo .elementor-location-header .elementor-nav-menu--dropdown a:hover,
body.tempo .elementor-location-header .elementor-nav-menu--dropdown a.elementor-item-active {
    background: var(--tn-ice) !important;
    color: var(--tn-blue) !important;
}


/* 4. Pulsanti ------------------------------------------------------------------------------------------------------- */
body.tempo .elementor-button,
body.tempo .vc_btn3,
body.tempo .vc_general.vc_btn3 {
    font-family: var(--tn-font-title) !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    border-radius: var(--tn-radius-sm) !important;
    padding: 13px 26px !important;
    box-shadow: var(--tn-shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease !important;
}
body.tempo .elementor-button:hover,
body.tempo .vc_btn3:hover {
    transform: translateY(-2px);
    box-shadow: var(--tn-shadow);
}


/* 5. Pagine interne ------------------------------------------------------------------------------------------------- */
body.tempo .tn-main { display: block; min-height: 50vh; }
body.tempo .elementor-widget-text-editor,
body.tempo .wpb_text_column {
    font-size: 16.5px;
    line-height: 1.75;
}
body.tempo .elementor-widget-text-editor a:not(.elementor-button),
body.tempo .wpb_text_column a:not(.vc_btn3) {
    color: var(--tn-blue);
    text-decoration: underline;
    text-decoration-color: rgba(17, 171, 227, .45);
    text-underline-offset: 3px;
}
body.tempo .elementor-widget-text-editor a:not(.elementor-button):hover,
body.tempo .wpb_text_column a:not(.vc_btn3):hover {
    color: var(--tn-cyan);
    text-decoration-color: var(--tn-cyan);
}
/* immagini dei contenuti, image box e icon box: angoli arrotondati e card leggere */
body.tempo .elementor-widget-image-box .elementor-image-box-img img,
body.tempo .vc_single_image-wrapper img,
body.tempo .elementor-gallery-item {
    border-radius: 12px;
}
body.tempo .elementor-widget-image-box .elementor-image-box-title,
body.tempo .elementor-widget-icon-box .elementor-icon-box-title {
    font-family: var(--tn-font-title) !important;
    letter-spacing: -0.01em;
}
/* griglie WPBakery dei corsi ("Corsi in evidenza", "Archivio corsi"): card con ombra */
body.tempo .vc_grid-item-mini {
    border-radius: var(--tn-radius) !important;
    overflow: hidden;
    box-shadow: var(--tn-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
    background: var(--tn-white);
}
body.tempo .vc_grid-item-mini:hover {
    transform: translateY(-4px);
    box-shadow: var(--tn-shadow);
}
body.tempo .elementor-widget-google_maps iframe { border-radius: var(--tn-radius); box-shadow: var(--tn-shadow-sm); }
/* elenchi con le icone (contatti, caratteristiche dei prodotti) */
body.tempo .elementor-icon-list-text { font-family: var(--tn-font); }


/* 5b. Contenuti delle pagine di prodotto e di progetto (tn-contenuto) ----------------------------------------------- */
/* Video corsi, Easy, Easy SIOPE, i due Downloads, EOLO, NOVA PA, INNOPROCESS: i widget Html dopo l'intestazione hanno la
   classe tn-contenuto (tools/crea_tempo.py, campo "Classe CSS" del builder). I testi restano quelli importati;
   tema.js marca i paragrafi (tn-titoletto, tn-punto, tn-numero, tn-vuoto) e li raggruppa in tn-elenco. */
body.tempo .tn-contenuto > .elementor-section {
    padding: clamp(40px, 5vw, 64px) 0 !important;
    margin: 0 !important;
}
body.tempo .tn-contenuto + .tn-contenuto > .elementor-section { padding-top: 0 !important; }
body.tempo .tn-contenuto .elementor-section-boxed > .elementor-container {
    max-width: var(--tn-container) !important;
    padding: 0 24px;
}
body.tempo .tn-contenuto .elementor-column:not(:has(.elementor-widget)) { display: none; }
body.tempo .tn-contenuto .elementor-column > .elementor-widget-wrap { padding: 0 !important; }

/* testo: colonna di lettura, paragrafi ariosi */
body.tempo .tn-contenuto .elementor-col-100 .elementor-widget-text-editor {
    max-width: 860px;
    margin: 0 auto;
}
body.tempo .tn-contenuto .elementor-widget-text-editor,
body.tempo .tn-contenuto .elementor-widget-text-editor p {
    font-family: var(--tn-font) !important;
    font-size: 17px !important;
    line-height: 1.8 !important;
    color: var(--tn-text) !important;
    text-align: left !important;
}
body.tempo .tn-contenuto .elementor-widget-text-editor p { margin: 0 0 18px !important; }
body.tempo .tn-contenuto .tn-vuoto { display: none !important; }
body.tempo .tn-contenuto p.tn-lead {
    font-size: clamp(18px, 1.6vw, 20px) !important;
    line-height: 1.7 !important;
    color: var(--tn-navy) !important;
    padding-left: 20px;
    border-left: 3px solid var(--tn-cyan);
}
/* "LO SCENARIO:", "L'IDEA:": titoletti di paragrafo */
body.tempo .tn-contenuto p.tn-titoletto {
    margin: 48px 0 16px !important;
    padding-top: 36px;
    border-top: 1px solid var(--tn-line);
    font-family: var(--tn-font-title) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: .14em;
    color: var(--tn-blue) !important;
}
/* elenchi fatti di paragrafi ("– …", "• …", "1) …", "a) …"): un riquadro con i punti */
body.tempo .tn-contenuto .tn-elenco {
    margin: 4px 0 28px;
    padding: 8px 24px;
    background: #F6F9FC;
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
}
body.tempo .tn-contenuto .tn-elenco p {
    position: relative;
    margin: 0 !important;
    padding: 12px 0 12px 32px;
    line-height: 1.65 !important;
}
body.tempo .tn-contenuto .tn-elenco p + p { border-top: 1px solid var(--tn-line); }
body.tempo .tn-contenuto p.tn-punto::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 21px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tn-cyan);
    box-shadow: 0 0 0 4px rgba(17, 171, 227, .15);
}
body.tempo .tn-contenuto p.tn-numero { padding-left: 44px; }
body.tempo .tn-contenuto .tn-segno {
    position: absolute;
    left: 0;
    top: 12px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--tn-blue);
    color: var(--tn-white);
    font-family: var(--tn-font-title);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}
body.tempo .tn-contenuto p.tn-sotto { margin-left: 44px !important; }
body.tempo .tn-contenuto p.tn-sotto .tn-segno { background: var(--tn-ice); color: var(--tn-blue); }
body.tempo .tn-contenuto .tn-voce { color: var(--tn-navy); font-weight: 700; }

/* download: card cliccabili su due colonne */
body.tempo .tn-contenuto .elementor-column:has(.elementor-widget-icon-list) { width: 100% !important; }
body.tempo .tn-contenuto .elementor-icon-list-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0 !important;
    padding: 0 !important;
}
body.tempo .tn-contenuto .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
body.tempo .tn-contenuto .elementor-icon-list-item::after { display: none !important; }
body.tempo .tn-contenuto .elementor-icon-list-item > a {
    display: flex !important;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 16px 20px !important;
    background: var(--tn-white);
    border: 1px solid var(--tn-line);
    border-radius: 14px;
    box-shadow: var(--tn-shadow-sm);
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.tempo .tn-contenuto .elementor-icon-list-item > a:hover {
    transform: translateY(-3px);
    border-color: rgba(17, 171, 227, .5);
    box-shadow: var(--tn-shadow);
}
body.tempo .tn-contenuto .elementor-icon-list-item > a::after {
    content: "→";
    margin-left: auto;
    color: var(--tn-cyan);
    font-weight: 700;
    transition: transform .2s ease;
}
body.tempo .tn-contenuto .elementor-icon-list-item > a:hover::after { transform: translateX(4px); }
body.tempo .tn-contenuto .elementor-icon-list-icon {
    flex: 0 0 44px;
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--tn-ice), #D7E9F7);
}
body.tempo .tn-contenuto .elementor-icon-list-icon i,
body.tempo .tn-contenuto .elementor-icon-list-icon svg {
    color: var(--tn-blue) !important;
    fill: var(--tn-blue) !important;
    font-size: 18px !important;
    width: 18px !important;
    height: auto !important;
}
body.tempo .tn-contenuto .elementor-icon-list-text {
    padding: 0 !important;
    color: var(--tn-navy) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Easy: logo e nome, frase introduttiva, caratteristiche (icon box) in card */
body.tempo .tn-contenuto .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-image) .elementor-widget-image img {
    border-radius: 0;
}
body.tempo .tn-contenuto .elementor-container:has(> .elementor-col-50 .elementor-widget-image) {
    justify-content: center;
    align-items: center;
    gap: 28px;
}
body.tempo .tn-contenuto .elementor-container:has(> .elementor-col-50 .elementor-widget-image) > .elementor-col-50 { width: auto !important; }
body.tempo .tn-contenuto .elementor-container:has(> .elementor-col-50 .elementor-widget-image) .elementor-widget-image img { max-height: 120px; width: auto; }
body.tempo .tn-contenuto .elementor-container:has(> .elementor-col-50 .elementor-widget-image) .elementor-col-50 .elementor-widget-text-editor {
    font-family: var(--tn-font-title) !important;
    font-size: clamp(40px, 5vw, 56px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
    color: var(--tn-navy) !important;
    line-height: 1 !important;
}
body.tempo .tn-contenuto [style*="pre-wrap"] { white-space: normal !important; margin: 0 !important; }
body.tempo .tn-contenuto:has(.elementor-widget-icon-box) {
    background: linear-gradient(180deg, #F5F8FC 0%, var(--tn-ice) 100%);
}
body.tempo .tn-contenuto:has(.elementor-widget-icon-box) > .elementor-section,
body.tempo .tn-contenuto:has(.elementor-widget-icon-box) + .tn-contenuto > .elementor-section { padding-top: clamp(40px, 5vw, 64px) !important; }
body.tempo .tn-contenuto .elementor-container:has(.elementor-widget-icon-box) { align-items: center; gap: 32px; }
body.tempo .tn-contenuto .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box):not(:has(> .elementor-widget-wrap > :not(.elementor-widget-icon-box))) > .elementor-widget-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
body.tempo .tn-contenuto .elementor-widget-icon-box {
    margin: 0 !important;
    padding: 22px;
    background: var(--tn-white);
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    box-shadow: var(--tn-shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}
body.tempo .tn-contenuto .elementor-widget-icon-box:hover { transform: translateY(-4px); box-shadow: var(--tn-shadow); }
body.tempo .tn-contenuto .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: row !important;   /* su mobile Elementor mette l'icona sopra il testo */
    align-items: flex-start;
    gap: 16px;
    text-align: left !important;
}
body.tempo .tn-contenuto .elementor-icon-box-icon { margin: 0 !important; }
body.tempo .tn-contenuto .elementor-icon-box-icon .elementor-icon {
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--tn-cyan) !important;
    color: var(--tn-white) !important;
    fill: var(--tn-white) !important;
    font-size: 20px !important;
}
body.tempo .tn-contenuto .elementor-icon-box-icon .elementor-icon svg { width: 20px !important; height: 20px !important; fill: var(--tn-white) !important; }
body.tempo .tn-contenuto .elementor-icon-box-title { margin: 2px 0 6px !important; }
body.tempo .tn-contenuto .elementor-icon-box-title,
body.tempo .tn-contenuto .elementor-icon-box-title a,
body.tempo .tn-contenuto .elementor-icon-box-title span {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--tn-navy) !important;
}
body.tempo .tn-contenuto .elementor-icon-box-description {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--tn-muted) !important;
}

/* loghi dei finanziamenti (POR Puglia) e riquadro del progetto finanziato */
body.tempo .tn-contenuto .elementor-col-100 > .elementor-widget-wrap > .elementor-widget-image:only-child {
    padding: 24px 32px;
    background: var(--tn-white);
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    text-align: center;
}
/* INNOPROCESS: la fascia a tutta larghezza con l'immagine del bando diventa una card come le altre */
body.tempo .tn-contenuto > .elementor-section-full_width { background: transparent !important; }
body.tempo .tn-contenuto > .elementor-section-full_width > .elementor-container {
    max-width: var(--tn-container) !important;
    margin: 0 auto;
    padding: 0 24px;
}
body.tempo .tn-contenuto .elementor-widget-image:only-child img { border-radius: 8px; }
body.tempo .tn-contenuto .elementor-section:has(> .elementor-container .elementor-widget-heading) {
    background: transparent !important;
}
body.tempo .tn-contenuto .elementor-widget-heading p.elementor-heading-title {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 32px;
    background: linear-gradient(135deg, #F7FAFD, var(--tn-ice));
    border: 1px solid var(--tn-line);
    border-left: 4px solid var(--tn-blue);
    border-radius: var(--tn-radius);
    font-family: var(--tn-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: var(--tn-navy) !important;
    text-align: center;
}

/* titoli dei contenuti ("Sede uffici", "Contattaci", "Telefono / E-Mail", "Orari") */
body.tempo .tn-contenuto .elementor-widget-heading h2.elementor-heading-title {
    font-size: clamp(30px, 3.4vw, 42px) !important;
    font-weight: 800 !important;
    font-style: normal !important;
    letter-spacing: -0.03em;
    line-height: 1.1 !important;
    color: var(--tn-navy) !important;
    margin: 0 0 12px !important;
}
body.tempo .tn-contenuto .elementor-widget-heading :is(h3, h4, h5).elementor-heading-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tn-blue) !important;
    margin: 28px 0 8px !important;
}
/* Chi siamo: sede (indirizzo e mappa) e contatti (recapiti e modulo), due colonne allineate al centro */
body.tempo .tn-contenuto .elementor-container:has(.elementor-widget-google_maps),
body.tempo .tn-contenuto .elementor-container:has(.wpcf7) {
    align-items: center;
    gap: 40px;
}
/* le due colonne della stessa larghezza; solo da tablet in su: su mobile sono una sotto l'altra (in colonna, con
   flex-basis 0 la sezione non prenderebbe l'altezza del contenuto e la mappa coprirebbe il testo sopra) */
@media (min-width: 768px) {
    body.tempo .tn-contenuto .elementor-container:has(.elementor-widget-google_maps) > .elementor-column,
    body.tempo .tn-contenuto .elementor-container:has(.wpcf7) > .elementor-column { width: auto !important; flex: 1 1 0; }
}
body.tempo .tn-contenuto .elementor-container:has(.elementor-widget-google_maps) > .elementor-column > .elementor-element-populated {
    margin: 0 !important;
}
body.tempo .tn-contenuto .elementor-widget-google_maps iframe {
    display: block;
    height: 380px !important;
    border-radius: 20px;
    box-shadow: var(--tn-shadow);
}
body.tempo .tn-contenuto .elementor-container:has(.elementor-widget-google_maps) > .elementor-column:not(:has(.elementor-widget-google_maps)) > .elementor-widget-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
body.tempo .tn-contenuto .elementor-container:has(.elementor-widget-google_maps) .elementor-widget-icon-box { width: 100%; max-width: 420px; }
body.tempo .tn-contenuto .elementor-container:has(.wpcf7) > .elementor-column:not(:has(.wpcf7)) > .elementor-widget-wrap {
    padding: 40px !important;
    border-radius: 20px;
    background: linear-gradient(160deg, var(--tn-navy), var(--tn-blue) 120%) !important;
    color: var(--tn-white);
}
body.tempo .tn-contenuto .elementor-container:has(.wpcf7) > .elementor-column:not(:has(.wpcf7)) :is(.elementor-heading-title, p, .elementor-icon-list-text, a) {
    color: var(--tn-white) !important;
}
body.tempo .tn-contenuto .elementor-container:has(.wpcf7) > .elementor-column:not(:has(.wpcf7)) :is(h3, h4, h5).elementor-heading-title { color: var(--tn-sky) !important; }
body.tempo .tn-contenuto .elementor-container:has(.wpcf7) > .elementor-column:not(:has(.wpcf7)) .elementor-widget-text-editor,
body.tempo .tn-contenuto .elementor-container:has(.wpcf7) > .elementor-column:not(:has(.wpcf7)) .elementor-widget-text-editor p {
    color: rgba(255, 255, 255, .8) !important;
    font-size: 16px !important;
}
body.tempo .tn-contenuto .elementor-container:has(.wpcf7) > .elementor-column:not(:has(.wpcf7)) .elementor-icon-list-items {
    display: block !important;
}
/* qui gli elenchi con le icone sono recapiti, non download: niente card */
body.tempo .tn-contenuto .elementor-container:has(.wpcf7) .elementor-icon-list-item > a {
    display: inline !important;
    padding: 0 !important;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none !important;
}
body.tempo .tn-contenuto .elementor-container:has(.wpcf7) .elementor-icon-list-item > a::after { content: none; }
body.tempo .tn-contenuto .elementor-container:has(.wpcf7) .elementor-icon-list-text {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
}
body.tempo .tn-contenuto .elementor-container:has(.wpcf7) > .elementor-column:has(.wpcf7) > .elementor-widget-wrap {
    padding: 36px !important;
    background: var(--tn-white);
    border: 1px solid var(--tn-line);
    border-radius: 20px;
    box-shadow: var(--tn-shadow);
}

/* Video corsi: filtri in una barra, risultati della ricerca a tendina, video 16:9 */
body.tempo .tn-contenuto .videoengine {
    margin: 0 !important;
    padding: 24px;
    background: var(--tn-white);
    border: 1px solid var(--tn-line);
    border-radius: 20px;
    box-shadow: var(--tn-shadow);
}
body.tempo .tn-contenuto .videoengine .row { margin: 0 !important; }
body.tempo .tn-contenuto .videoengine > .row {
    display: grid !important;
    grid-template-columns: 3fr 2fr;
    gap: 12px;
}
body.tempo .tn-contenuto .videoengine [class*="col-md"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}
body.tempo .tn-contenuto .videoengine > .row > .col-md-2 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
body.tempo .tn-contenuto .videoengine > .row > [class*="col-md"] > .row { display: block !important; position: relative; }
body.tempo .tn-contenuto .videoengine .row .row > [class*="col-md"] { width: 100% !important; }
body.tempo .tn-contenuto .videoengine select,
body.tempo .tn-contenuto .videoengine input {
    width: 100% !important;
    height: 48px;
    padding: 0 14px !important;
    border: 1px solid var(--tn-line) !important;
    border-radius: 12px !important;
    background-color: #F8FAFC;
    color: var(--tn-text);
    font-family: var(--tn-font);
    font-size: 15px;
    text-indent: 0 !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
body.tempo .tn-contenuto .videoengine input {
    padding-left: 44px !important;
    background: #F8FAFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6873' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center / 18px;
}
body.tempo .tn-contenuto .videoengine select:focus,
body.tempo .tn-contenuto .videoengine input:focus {
    outline: none;
    border-color: var(--tn-cyan) !important;
    background-color: var(--tn-white);
    box-shadow: 0 0 0 4px rgba(17, 171, 227, .15);
}
body.tempo .tn-contenuto #searchresult {
    top: calc(100% + 6px);
    left: 0;
    z-index: 20;
    width: 100% !important;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px !important;
    border: 1px solid var(--tn-line);
    border-radius: 12px !important;
    box-shadow: var(--tn-shadow-lg) !important;
}
body.tempo .tn-contenuto #searchresult span { padding: 10px 12px; border-radius: 8px; font-size: 15px; }
body.tempo .tn-contenuto #searchresult span:hover { background-color: var(--tn-ice) !important; color: var(--tn-blue); }
body.tempo .tn-contenuto #videoContainer { margin-top: 24px; min-height: 0 !important; }
body.tempo .tn-contenuto #videoContainer:empty {
    min-height: 320px !important;
    border: 2px dashed var(--tn-line);
    border-radius: var(--tn-radius);
    background: #F8FAFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2311ABE3' stroke-width='1.6' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M10 8.5v7l6-3.5z'/%3E%3C/svg%3E") no-repeat center / 64px;
}
body.tempo .tn-contenuto #videoContainer iframe {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--tn-radius);
    box-shadow: var(--tn-shadow);
    background: var(--tn-navy);
}
body.tempo .tn-contenuto #videoContainer p { margin: 0 0 16px; }

@media (max-width: 1024px) {
    body.tempo .tn-contenuto .videoengine > .row { grid-template-columns: 1fr; }
    body.tempo .tn-contenuto .elementor-container:has(.elementor-widget-icon-box) { flex-direction: column; }
    body.tempo .tn-contenuto .elementor-container:has(.elementor-widget-icon-box) > .elementor-column { width: 100% !important; }
    body.tempo .tn-contenuto .elementor-container:has(.elementor-widget-icon-box) .elementor-widget-image img { max-width: 360px; }
}
@media (max-width: 767px) {
    body.tempo .tn-contenuto .elementor-section-boxed > .elementor-container { padding: 0 16px; }
    body.tempo .tn-contenuto .elementor-icon-list-items,
    body.tempo .tn-contenuto .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box):not(:has(> .elementor-widget-wrap > :not(.elementor-widget-icon-box))) > .elementor-widget-wrap,
    body.tempo .tn-contenuto .videoengine > .row > .col-md-2 { grid-template-columns: 1fr; }
    body.tempo .tn-contenuto .elementor-widget-text-editor,
    body.tempo .tn-contenuto .elementor-widget-text-editor p { font-size: 16px !important; }
    body.tempo .tn-contenuto .tn-elenco { padding: 4px 16px; }
    body.tempo .tn-contenuto p.tn-sotto { margin-left: 20px !important; }
    body.tempo .tn-contenuto .videoengine { padding: 16px; }
    body.tempo .tn-contenuto .elementor-widget-heading p.elementor-heading-title { padding: 20px; font-size: 14px !important; }
}


/* 5c. Corsi in evidenza e Archivio corsi: intestazione e testo (tn-intestazione, tn-corsi) -------------------------- */
/* queste due pagine non hanno l'intestazione con lo sfondo delle altre: il titolo (.page-header di WordPress in Corsi in
   evidenza, la sezione "Archivio Corsi" con la classe tn-intestazione) diventa una fascia blu con la rete luminosa */
body.tempo .tn-corsi .page-header,
body.tempo .tn-intestazione > .elementor-section {
    position: relative;
    max-width: none !important;
    margin: 0 calc(50% - 50vw) !important;   /* a tutta larghezza anche dentro il contenitore della pagina */
    padding: clamp(64px, 8vw, 112px) 24px !important;
    text-align: center;
    background:
        linear-gradient(90deg, rgba(7, 30, 61, .94) 0%, rgba(10, 58, 112, .82) 55%, rgba(15, 84, 159, .55) 100%),
        url("/media/tempo/2023/10/508917664-2560x600-1-1.jpg") center / cover !important;
}
body.tempo .tn-corsi .page-header .entry-title,
body.tempo .tn-intestazione .elementor-heading-title {
    margin: 0 auto !important;
    max-width: 900px;
    font-family: var(--tn-font-title) !important;
    font-size: clamp(34px, 5vw, 58px) !important;
    font-weight: 800 !important;
    font-style: normal !important;
    letter-spacing: -0.03em;
    line-height: 1.08 !important;
    color: var(--tn-white) !important;
}
/* Corsi in evidenza: accreditamento in un'etichetta, materie in testo normale (nel contenuto sono tutto grassetto blu) */
body.tempo .tn-corsi .page-content { padding-top: clamp(40px, 5vw, 64px); }
body.tempo .tn-corsi .wpb_text_column :is(p, b, font) {
    font-weight: inherit;
    color: inherit;
}
body.tempo .tn-corsi .wpb_text_column p {
    max-width: 920px;
    margin: 0 auto 20px !important;
    text-align: center;
    font-size: 17px;
    line-height: 1.8;
    color: var(--tn-muted);
}
body.tempo .tn-corsi .wpb_text_column p:first-child:not(:only-child) {
    width: fit-content;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--tn-ice);
    color: var(--tn-blue);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}
body.tempo .tn-corsi .vc_row:first-child .wpb_text_column:not(:has(:is(p, h2):not(:empty))) { display: none; }
body.tempo .tn-corsi .vc_grid-container-wrapper { margin-top: 32px; }
/* Archivio corsi: la griglia nel contenitore della pagina (il container di Elementor è largo 1400px e toccava i bordi) */
body.tempo .tn-corsi > .elementor-section { padding: clamp(40px, 5vw, 64px) 0 !important; }
body.tempo .tn-corsi .elementor-section-boxed > .elementor-container { max-width: var(--tn-container) !important; padding: 0 24px; }


/* 5d. Intestazioni delle pagine interne alte come lo slider della home (tn-testata) ---------------------------------- */
/* la prima sezione (sfondo, titolo, descrizione) delle pagine di tools/crea_tempo.py PAGINE_TESTATA ha la classe
   tn-testata; in Corsi in evidenza l'intestazione è la fascia .page-header (5c). Altezza --tn-hero-h, contenuto al
   centro: le altezze di Elementor (min-height e padding per elemento) non contano più */
body.tempo .tn-testata > .elementor-section {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.tempo .tn-testata > .elementor-section > .elementor-container {
    min-height: var(--tn-hero-h) !important;
    height: auto !important;
    align-items: center !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}
body.tempo .tn-testata .elementor-column > .elementor-element-populated { padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; }
body.tempo .tn-corsi .page-header,
body.tempo .tn-intestazione > .elementor-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--tn-hero-h);
}
body.tempo .tn-intestazione > .elementor-section > .elementor-container { width: 100%; }
@media (max-width: 1024px) {
    /* la colonna vuota a sinistra (solo <br>, serviva a spostare il testo) su tablet e mobile occupa solo spazio */
    body.tempo .tn-testata .elementor-col-33:not(:has(img, h1, h2, p)) { display: none; }
}
@media (max-width: 767px) {
    body.tempo { --tn-hero-h: 460px; }
    body.tempo .tn-testata > .elementor-section > .elementor-container { padding: 40px 16px !important; }
    /* Easy SIOPE ha il logo sopra il titolo, Easy una descrizione lunga: più compatti per stare nell'altezza */
    body.tempo .tn-testata .elementor-widget-image img { max-height: 84px; width: auto; }
    body.tempo .tn-testata .elementor-widget-image { margin-bottom: 12px !important; }
    body.tempo .tn-testata .elementor-widget-text-editor,
    body.tempo .tn-testata .elementor-widget-text-editor p { font-size: 15px !important; line-height: 1.5 !important; }
}


/* 6. Pagine dei corsi: pulsanti delle sezioni accanto all'immagine e sezioni una sotto l'altra (Views/Eventi/Show) ---- */
body.tempo .ev-pulsanti a {
    padding: 14px 22px;
    border-radius: 999px;
    border: 1px solid var(--tn-line);
    background: var(--tn-white);
    color: var(--tn-blue);
    font-family: var(--tn-font);
    font-weight: 600;
    box-shadow: var(--tn-shadow-sm);
}
body.tempo .ev-pulsanti a:hover,
body.tempo .ev-pulsanti a:focus-visible {
    background: var(--tn-blue);
    border-color: var(--tn-blue);
    color: var(--tn-white);
    box-shadow: 0 6px 16px -8px rgba(15, 84, 159, .7);
}
body.tempo .ev-sezione .ev-testo {
    background: var(--tn-white);
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    box-shadow: var(--tn-shadow-sm);
    padding: 24px 28px;
}


/* 7. Moduli --------------------------------------------------------------------------------------------------------- */
body.tempo .caldera-grid .form-control,
body.tempo .wpcf7-form-control:not(.wpcf7-submit),
body.tempo .tnp-email,
body.tempo .tnp-field input[type="email"] {
    font-family: var(--tn-font) !important;
    font-size: 15px !important;
    color: var(--tn-text) !important;
    background: var(--tn-white) !important;
    border: 1px solid var(--tn-line) !important;
    border-radius: var(--tn-radius-sm) !important;
    padding: 12px 14px !important;
    box-shadow: none !important;
    height: auto !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.tempo .caldera-grid .form-control:focus,
body.tempo .wpcf7-form-control:not(.wpcf7-submit):focus {
    border-color: var(--tn-cyan) !important;
    box-shadow: 0 0 0 4px rgba(17, 171, 227, .15) !important;
    outline: none;
}
body.tempo .caldera-grid .control-label,
body.tempo .wpcf7-form label {
    font-size: 14px;
    font-weight: 600;
    color: var(--tn-text);
    margin-bottom: 6px;
}
body.tempo .caldera-grid input[type="submit"],
body.tempo .wpcf7-submit,
body.tempo .tnp-submit {
    font-family: var(--tn-font-title) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--tn-white) !important;
    background: var(--tn-blue) !important;
    border: 0 !important;
    border-radius: var(--tn-radius-sm) !important;
    padding: 13px 28px !important;
    cursor: pointer;
    box-shadow: var(--tn-shadow-sm);
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
body.tempo .caldera-grid input[type="submit"]:hover,
body.tempo .wpcf7-submit:hover,
body.tempo .tnp-submit:hover {
    background: var(--tn-blue-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--tn-shadow);
}
body.tempo .caldera-grid .has-error .help-block,
body.tempo .wpcf7-not-valid-tip { color: #C62828 !important; font-size: 13px; }
body.tempo .caldera-grid .alert,
body.tempo .wpcf7-response-output {
    border-radius: var(--tn-radius-sm) !important;
    padding: 14px 16px !important;
    border: 1px solid var(--tn-line) !important;
    background: var(--tn-ice) !important;
    color: var(--tn-text) !important;
}
/* il riquadro dei messaggi di Contact Form 7 compare solo quando ha un testo; i campi tecnici nascosti senza bordo */
body.tempo .wpcf7-response-output:empty { display: none !important; }
body.tempo .wpcf7 .hidden-fields-container { border: 0; padding: 0; margin: 0; display: none; }
body.tempo .caldera-grid .alert-success,
body.tempo .wpcf7-form.sent .wpcf7-response-output {
    background: #E8F6EE !important;
    border-color: #A5D6B7 !important;
    color: #1B5E3A !important;
}
body.tempo .caldera-grid .alert-danger,
body.tempo .wpcf7-form.failed .wpcf7-response-output,
body.tempo .wpcf7-form.invalid .wpcf7-response-output {
    background: #FDECEC !important;
    border-color: #F2B8B8 !important;
    color: #8E1C1C !important;
}


/* 8. Footer --------------------------------------------------------------------------------------------------------- */
body.tempo .elementor-element-2307e2e6 {
    background: radial-gradient(1200px 400px at 85% 0%, rgba(17, 171, 227, .22), transparent 60%),
                linear-gradient(160deg, var(--tn-navy) 0%, var(--tn-blue-dark) 60%, var(--tn-blue) 100%) !important;
    position: relative;
}
body.tempo .elementor-element-2307e2e6 .elementor-container {
    max-width: var(--tn-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px;
    padding-right: 24px;
}
body.tempo .elementor-element-2307e2e6 .elementor-container .elementor-container { padding-left: 0; padding-right: 0; }
body.tempo .elementor-element-2307e2e6::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tn-cyan), var(--tn-sky), var(--tn-orange));
}
body.tempo .elementor-element-2307e2e6,
body.tempo .elementor-element-2307e2e6 .elementor-icon-list-text,
body.tempo .elementor-element-2307e2e6 .elementor-heading-title,
body.tempo .elementor-element-2307e2e6 p {
    font-family: var(--tn-font) !important;
    color: rgba(255, 255, 255, .82) !important;
}
body.tempo .elementor-element-2307e2e6 .elementor-heading-title {
    font-family: var(--tn-font-title) !important;
    color: var(--tn-white) !important;
}
body.tempo .elementor-element-2307e2e6 a:hover,
body.tempo .elementor-element-2307e2e6 a:hover .elementor-icon-list-text {
    color: var(--tn-sky) !important;
}
body.tempo .elementor-element-2307e2e6 .elementor-icon-list-icon i,
body.tempo .elementor-element-2307e2e6 .elementor-icon-list-icon svg {
    color: var(--tn-sky) !important;
    fill: var(--tn-sky) !important;
}
body.tempo .elementor-element-2307e2e6 .elementor-widget-image img { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25)); }


/* 9. Home: componenti tn-* ------------------------------------------------------------------------------------------ */
body.tempo .tn-container {
    width: 100%;
    max-width: var(--tn-container);
    margin: 0 auto;
    padding: 0 24px;
}
body.tempo .tn-section { padding: 96px 0; }
body.tempo .tn-section--soft { background: linear-gradient(180deg, #F5F8FC 0%, var(--tn-ice) 100%); }
body.tempo .tn-section__head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
body.tempo .tn-section__head h2,
body.tempo .tn-cta h2,
body.tempo .tn-partners h2 {
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    color: var(--tn-navy);
    margin: 0 0 12px;
}
body.tempo .tn-section__head p { color: var(--tn-muted); font-size: 18px; margin: 0; }
body.tempo .tn-grid { display: grid; gap: 24px; }
body.tempo .tn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* pulsanti della home */
body.tempo .tn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--tn-font-title);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    padding: 16px 26px;
    border-radius: 12px;
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
body.tempo .tn-btn:hover { transform: translateY(-2px); }
body.tempo .tn-btn--accent { background: var(--tn-orange); color: var(--tn-white); box-shadow: 0 10px 24px -10px rgba(243, 146, 0, .7); }
body.tempo .tn-btn--accent:hover { background: #DB8300; color: var(--tn-white); }

/* slider in testa alla home: le tre slide della home di Tempo, una sopra l'altra nella stessa cella della griglia
   (l'altezza è quella della più alta, niente salti); con JavaScript (tn-js) se ne vede una alla volta, in dissolvenza */
body.tempo .tn-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    min-height: var(--tn-hero-h);
    color: var(--tn-white);
    background: var(--tn-navy);
}
body.tempo .tn-slide {
    position: relative;
    display: flex;
    align-items: center;
    padding: clamp(96px, 4vw, 160px) 0 clamp(120px, 4vw, 170px);
}
body.tempo.tn-js .tn-slide {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease, visibility .8s ease;
}
body.tempo.tn-js .tn-slide.is-attiva { opacity: 1; visibility: visible; }
body.tempo .tn-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 70% center;
    transform: scale(1.06);
    transition: transform 6s ease-out;
}
body.tempo .tn-slide.is-attiva .tn-hero__bg { transform: scale(1); }
body.tempo .tn-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(7, 30, 61, .94) 0%, rgba(7, 30, 61, .78) 45%, rgba(7, 30, 61, .2) 100%),
        radial-gradient(700px 360px at 12% 110%, rgba(17, 171, 227, .35), transparent 70%);
}
body.tempo .tn-hero__inner { position: relative; z-index: 2; }
body.tempo.tn-js .tn-slide .tn-hero__inner { transform: translateY(16px); transition: transform .8s ease; }
body.tempo.tn-js .tn-slide.is-attiva .tn-hero__inner { transform: none; }
body.tempo .tn-hero__title {
    font-size: clamp(44px, 7vw, 84px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--tn-white);
    margin: 0 0 24px;
    max-width: 12ch;
}
body.tempo .tn-hero__title span {
    background: linear-gradient(90deg, var(--tn-cyan), var(--tn-sky));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.tempo .tn-hero__lead {
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
    max-width: 600px;
    margin: 0;
}
/* frecce e punti dello slider (i punti li crea tema.js); senza JavaScript non servono */
body.tempo .tn-slider__nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(32px, 5vw, 56px);
    z-index: 3;
    align-items: center;
    gap: 16px;
}
body.tempo.tn-js .tn-slider__nav { display: flex; }
body.tempo .tn-slider__freccia {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .06);
    color: var(--tn-white);
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
body.tempo .tn-slider__freccia:hover { background: rgba(255, 255, 255, .16); border-color: var(--tn-white); }
body.tempo .tn-slider__freccia svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.tempo .tn-slider__punti { display: flex; gap: 8px; }
body.tempo .tn-slider__punti button {
    width: 28px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}
body.tempo .tn-slider__punti button[aria-current="true"] { width: 48px; background: var(--tn-cyan); }

/* card generiche */
body.tempo .tn-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tn-white);
    border: 1px solid var(--tn-line);
    border-radius: var(--tn-radius);
    padding: 32px;
    box-shadow: var(--tn-shadow-sm);
    color: var(--tn-text);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.tempo .tn-card h3 {
    font-size: 21px;
    font-weight: 700;
    color: var(--tn-navy);
    margin: 0 0 10px;
}
body.tempo .tn-card p { color: var(--tn-muted); margin: 0; font-size: 16px; line-height: 1.7; }

/* prodotti */
body.tempo .tn-product:hover {
    transform: translateY(-6px);
    box-shadow: var(--tn-shadow-lg);
    border-color: rgba(17, 171, 227, .45);
}
body.tempo .tn-product__logo {
    display: flex;
    align-items: center;
    height: 72px;
    margin-bottom: 20px;
}
body.tempo .tn-product__logo img { max-height: 56px; max-width: 200px; width: auto; object-fit: contain; }
body.tempo .tn-product p { flex: 1; margin-bottom: 24px; }
body.tempo .tn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--tn-blue);
}
body.tempo .tn-link::after { content: "→"; transition: transform .2s ease; }
body.tempo .tn-card:hover .tn-link::after { transform: translateX(4px); }

/* numeri */
body.tempo .tn-stats {
    padding: 72px 0;
    color: var(--tn-white);
    background:
        radial-gradient(600px 300px at 90% 120%, rgba(96, 198, 236, .35), transparent 70%),
        linear-gradient(120deg, var(--tn-blue-dark), var(--tn-blue) 55%, #1373BF);
}
body.tempo .tn-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}
body.tempo .tn-stat {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;  /* numeri allineati in alto anche quando un'etichetta va su due righe */
    padding: 8px 24px;
    border-left: 1px solid rgba(255, 255, 255, .18);
}
body.tempo .tn-stat:first-child { border-left: 0; padding-left: 0; }
body.tempo .tn-stat dd {
    margin: 0 0 6px;
    font-family: var(--tn-font-title);
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--tn-white);
    font-variant-numeric: tabular-nums;
}
body.tempo .tn-stat dt { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .78); }

/* invito ai corsi */
body.tempo .tn-cta {
    display: grid;
    grid-template-columns: 1.4fr auto;
    align-items: center;
    gap: 32px;
    padding: 48px 56px;
    border-radius: 24px;
    background:
        radial-gradient(500px 240px at 100% 0%, rgba(243, 146, 0, .14), transparent 70%),
        linear-gradient(135deg, #F7FAFD, var(--tn-ice));
    border: 1px solid var(--tn-line);
}
body.tempo .tn-cta h2 { margin: 0; }
body.tempo .tn-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* loghi di clienti e partner */
body.tempo .tn-logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
body.tempo .tn-logos li {
    display: grid;
    place-items: center;
    height: 96px;
    padding: 14px 18px;
    background: var(--tn-white);
    border: 1px solid var(--tn-line);
    border-radius: 14px;
    transition: transform .25s ease, box-shadow .25s ease;
}
body.tempo .tn-logos li:hover { transform: translateY(-3px); box-shadow: var(--tn-shadow); }
body.tempo .tn-logos img {
    max-height: 64px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .75;
    transition: filter .3s ease, opacity .3s ease;
}
body.tempo .tn-logos li:hover img { filter: none; opacity: 1; }
body.tempo .tn-partners { padding: 80px 0; }
body.tempo .tn-partners__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; }
body.tempo .tn-logos--partner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.tempo .tn-logos--partner li { height: 140px; padding: 10px 24px; }
body.tempo .tn-logos--partner img { max-height: 120px; filter: none; opacity: 1; }

/* citazione */
body.tempo .tn-quote {
    padding: 104px 0;
    background: linear-gradient(180deg, var(--tn-white), #F5F8FC);
    text-align: center;
}
body.tempo .tn-quote blockquote { position: relative; max-width: 900px; margin: 0 auto; padding: 0; border: 0; }
body.tempo .tn-quote blockquote::before {
    content: "“";
    display: block;
    font-family: Georgia, serif;
    font-size: 120px;
    line-height: .6;
    color: var(--tn-cyan);
    opacity: .35;
    margin-bottom: 8px;
}
body.tempo .tn-quote p {
    font-family: var(--tn-font-title);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--tn-navy);
    margin: 0 0 28px;
}
body.tempo .tn-quote footer img { max-height: 70px; width: auto; opacity: .85; }

/* responsive */
@media (max-width: 1024px) {
    body.tempo .tn-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.tempo .tn-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
    body.tempo .tn-stat:nth-child(3) { border-left: 0; padding-left: 0; }
    body.tempo .tn-cta { padding: 40px; }
    body.tempo .tn-partners__inner { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    body.tempo { --tn-header-h: 64px; }
    body.tempo .tn-section { padding: 64px 0; }
    body.tempo .tn-container { padding: 0 16px; }
    body.tempo .tn-grid--3 { grid-template-columns: 1fr; }
    body.tempo .tn-card { padding: 26px; }
    body.tempo .tn-slide { padding: 72px 0 120px; }
    body.tempo .tn-stat { padding: 0 0 0 16px; }
    body.tempo .tn-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
    body.tempo .tn-cta { grid-template-columns: 1fr; padding: 28px 22px; border-radius: 18px; }
    body.tempo .tn-cta__actions .tn-btn { flex: 1 1 100%; }
    body.tempo .tn-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    body.tempo .tn-logos li { height: 84px; }
    body.tempo .ev-sezione .ev-testo { padding: 16px; }
    body.tempo .elementor-location-header .elementor-widget-image img { max-height: 44px !important; }
    /* titoli delle pagine (i corsi hanno titoli lunghi in maiuscolo): su mobile non devono riempire lo schermo */
    body.tempo .elementor-widget-heading h1.elementor-heading-title { font-size: 28px !important; line-height: 1.2 !important; }
    body.tempo .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(22px, 6vw, 28px) !important; }
}


/* 10. Animazioni e accessibilità ------------------------------------------------------------------------------------ */
/* tn-reveal: compare salendo quando entra nello schermo (tema.js aggiunge tn-visibile); senza JavaScript resta visibile */
body.tempo.tn-js .tn-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
body.tempo.tn-js .tn-reveal.tn-visibile { opacity: 1; transform: none; }
body.tempo.tn-js .tn-grid .tn-reveal:nth-child(2) { transition-delay: .08s; }
body.tempo.tn-js .tn-grid .tn-reveal:nth-child(3) { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
    body.tempo *, body.tempo *::before, body.tempo *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    body.tempo.tn-js .tn-reveal { opacity: 1; transform: none; }
}