/*
Theme Name: Enfold Child
Theme URI: https://topinsocialmedia.it
Description: Child theme di Enfold per il sito Top In Social Media. Tutte le personalizzazioni vanno qui, senza toccare il tema padre.
Author: Top In Social Media
Template: enfold
Version: 1.0.0
*/

/* =========================================================================
   FONT  (Helvetica reale -> clone TeX Gyre Heros -> Arial)
   ========================================================================= */
@font-face { font-family:"TeX Gyre Heros"; src:url("fonts/texgyreheros-regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"TeX Gyre Heros"; src:url("fonts/texgyreheros-bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"TeX Gyre Heros Cn"; src:url("fonts/texgyreheroscn-bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
:root {
  --tsm-font: "Helvetica Neue", Helvetica, "TeX Gyre Heros", Arial, sans-serif;
  --tsm-font-cond: "TeX Gyre Heros Cn", "Helvetica Neue Condensed", "Arial Narrow", Arial, sans-serif;
  --tsm-orange: #e8862e;
}
/* Dimensione base dei testi LEGATA ALLA LARGHEZZA DELLO SCHERMO (vw).
   L'hero (1.jpg) e tutto testo "saldato" nell'immagine: scala con la pagina.
   Per restare proporzionati all'hero a QUALSIASI risoluzione, anche i testi reali
   (rem) devono scalare con la larghezza, non essere px fissi. clamp() evita estremi
   su schermi molto stretti o molto larghi. Calibrato sul mockup. */
html { font-size: clamp(13px, 1.0vw, 17px); }
/* Enfold fissa il corpo del testo a 13px: lo leghiamo invece a 1rem (quindi alla
   larghezza, via html sopra) cosi anche i paragrafi scalano e non restano piccoli. */
#top .avia_textblock { font-size: 1.12rem; }
html body, #top button, #top input, #top select, #top textarea,
#top .av-special-heading .av-special-heading-tag,
#top h1, #top h2, #top h3, #top h4, #top h5, #top h6,
#top .av-main-nav > li > a, #top .avia-button, #top .avia_textblock {
  font-family: var(--tsm-font) !important;
}
#top .tsm-box-title, #top .tsm-box-title .av-special-heading-tag {
  font-family: var(--tsm-font-cond) !important; font-weight: 700;
}
/* grassetto = stesso colore del testo (evita il verde oliva di default di Enfold) */
#top .avia_textblock strong, #top .avia_textblock b { color: inherit; }

/* Enfold mette un bordo 1px sopra/sotto ogni sezione colore (avia-section): e' la
   "linea" che si vedeva alla cucitura tra due immagini di sfondo. Le nostre sezioni
   sono a tutta immagine e NON devono mai avere bordi: le immagini si attaccano dirette. */
#top .avia-section, #top .container_wrap { border-top: 0 !important; border-bottom: 0 !important; }
/* Enfold mette su OGNI sezione (classe avia-shadow) un box-shadow INSET in alto
   (inset 0 1px 3px): e' la "linea scura" che si vede alla cucitura tra due immagini.
   La togliamo ovunque; le ombre dove servono le mettiamo noi (con specificita' >). */
#top .avia-section.avia-shadow, #top .container_wrap.avia-shadow { box-shadow: none !important; }

/* Overlay immagini (link/lightbox): MAI il cerchio con la freccia/lente dentro.
   Va tolto OVUNQUE nel sito, ora e per qualunque immagine/elemento futuro.
   Resta solo un velo bianco leggero al passaggio del mouse (consentito). */
#top .image-overlay .image-overlay-inside,
#top .image-overlay .av-icon-char,
#top .avia-image-overlay-bg .image-overlay-inside { display: none !important; }
#top .image-overlay { background-color: rgba(255,255,255,.22) !important; }

/* =========================================================================
   HEADER: gruppo centrato [menu | divisore | social], linea sotto, niente logo,
   niente underline all'hover.
   COLORE MENU (regola del sito): BIANCO solo in HOME, NERO in tutte le altre
   pagine; voce attiva sempre ARANCIONE; icone social sempre scure (#3c3c3b).
   ========================================================================= */
.html_header_transparency #header { position: absolute !important; top: 0; left: 0; width: 100%; z-index: 100; }
/* Da loggato, la barra admin di WordPress (fixed in cima, alta 32px / 46px su mobile)
   non deve coprire il menu: l'header trasparente e' absolute a top:0, quindi lo
   abbassiamo dell'altezza della barra, come WP fa gia' con l'header in flusso delle
   pagine senza hero (es. Privacy). Vale SOLO con la barra visibile (body.admin-bar):
   per i visitatori del sito nessun offset, il menu resta in cima all'hero. */
.html_header_transparency .admin-bar #header { top: 32px; }
@media screen and (max-width: 782px) {
  .html_header_transparency .admin-bar #header { top: 46px; }
}
.html_header_transparency #header, .html_header_transparency #header_main,
.html_header_transparency #header_main .container { background: transparent !important; box-shadow: none !important; }
#top #header .logo { position: absolute !important; opacity: 0; pointer-events: none; }
/* variabili colore: home = chiaro, resto del sito = scuro */
#top.home #header { --tsm-menu: #ffffff; --tsm-line: rgba(255,255,255,.85); --tsm-sep: rgba(255,255,255,.5); }
#top:not(.home) #header { --tsm-menu: #000000; --tsm-line: rgba(26,26,26,.8); --tsm-sep: rgba(26,26,26,.55); }
.html_header_transparency #header #avia-menu > li > a,
.html_header_transparency #header #avia-menu > li > a .avia-menu-text { color: var(--tsm-menu) !important; }
/* voce attiva (pagina corrente) sempre arancione */
#top #header #avia-menu > li.current-menu-item > a, #top #header #avia-menu > li.current-menu-item > a .avia-menu-text,
#top #header #avia-menu > li.current_page_item > a, #top #header #avia-menu > li.current_page_item > a .avia-menu-text,
#top #header #avia-menu > li.current-menu-ancestor > a, #top #header #avia-menu > li.current-menu-ancestor > a .avia-menu-text { color: var(--tsm-orange) !important; }
/* Eccezione: la voce "Home" NON si evidenzia come pagina corrente quando si e' in home;
   resta del colore normale del menu (bianco in home). menu-item-home e' la classe che
   WordPress assegna da se' alla voce che punta alla homepage. */
#top #header #avia-menu > li.menu-item-home.current-menu-item > a, #top #header #avia-menu > li.menu-item-home.current-menu-item > a .avia-menu-text,
#top #header #avia-menu > li.menu-item-home.current_page_item > a, #top #header #avia-menu > li.menu-item-home.current_page_item > a .avia-menu-text,
#top #header #avia-menu > li.menu-item-home.current-menu-ancestor > a, #top #header #avia-menu > li.menu-item-home.current-menu-ancestor > a .avia-menu-text { color: var(--tsm-menu) !important; }
#top #header #avia-menu > li#menu-item-search, #top #header #avia-menu > li.menu-item-search-dropdown { display: none !important; }

/* Layout a riga centrata [menu | divisore | social] SOLO da desktop (>=990px).
   Sotto (tablet+phone) resta il menu nativo Enfold col burger. */
@media only screen and (min-width: 990px) {
  /* Contenitore header a tutta larghezza con padding minimo: da' alla riga del menu
     (centrata) il massimo spazio orizzontale, cosi' con la voce "Home" in piu' non si
     comprime ne' va a capo nemmeno ai desktop piu' stretti / risoluzioni inusuali.
     Il menu resta comunque centrato nel viewport: a larghezze ampie nulla si sposta. */
  #top #header #header_main .container { position: relative; text-align: center; max-width: 100%; padding-left: 12px; padding-right: 12px; }
  /* height:auto -> la nav si stringe al contenuto e la linea sotto sta SUBITO sotto
     le voci (non in fondo all'altezza dell'header). */
  /* padding-bottom:0 -> la linea orizzontale (border-bottom) sta al bordo inferiore
     della riga, esattamente dove finisce il divisore verticale (border-left della
     social): cosi le 2 linee si TOCCANO all'angolo (niente spazio). */
  /* bar ATTACCATA in alto (vertical-align:top): il divisore verticale (border-left
     della social) parte dal bordo superiore della pagina. Il CONTENUTO (voci + icone)
     e' spinto giu' di 10px con padding-top su #avia-menu e .social_bookmarks: cosi'
     tutto il menu scende di 10px ma il divisore resta lungo fino in cima. */
  #top #header .main_menu { position: static !important; float: none !important; display: inline-block; vertical-align: top; height: auto !important; white-space: nowrap; border-bottom: 2px solid var(--tsm-line); padding-bottom: 0; }
  #top #header .main_menu nav { float: none; display: inline-block; vertical-align: middle; }
  #top #header #avia-menu { display: inline-block; vertical-align: middle; white-space: nowrap; padding-top: 10px; }
  #top #header #avia-menu > li { float: none !important; display: inline-block !important; position: relative; }
  #top #header #avia-menu > li > a { line-height: 46px !important; height: 46px !important; padding: 0 14px !important; }
  #top #header .main_menu .social_bookmarks li a { line-height: 46px !important; height: 46px !important; }
  #top #header #avia-menu > li.menu-item-object-page + li.menu-item-object-page > a::before { content: "|"; color: var(--tsm-sep); position: absolute; left: -2px; top: 50%; transform: translateY(-50%); }
  /* niente underline animata all'hover (confligge con la linea sotto) */
  #top #header #avia-menu .avia-menu-fx { display: none !important; }
  /* divisore verticale + social a destra del menu */
  #top #header .main_menu .social_bookmarks { display: inline-block !important; vertical-align: middle; position: static !important; float: none !important; transform: none !important; margin: 0 0 0 18px !important; padding-left: 18px; padding-top: 10px; border-left: 2px solid var(--tsm-line); white-space: nowrap; height: auto; }
  #top #header .main_menu .social_bookmarks li { display: inline-block; border: 0 !important; margin: 0; }
  /* icone social: sempre scure (come nel mockup), su home e su tutte le pagine */
  #top #header .main_menu .social_bookmarks li a { color: #3c3c3b !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  /* burger nascosto da desktop */
  #top #header #avia-menu > li.av-burger-menu-main { display: none !important; }
}

/* =========================================================================
   HERO (1.jpg intera come sfondo) con i 3 BOX dentro, il piu in basso possibile
   ========================================================================= */
#top .tsm-hero-sec {
  background-color: #f0c05e;
  background-image: url("/wp-content/uploads/2026/06/home-hero.jpg?v=2");
  /* 100% auto = l'immagine occupa tutta la larghezza e mantiene la sua altezza
     naturale: cosi la diagonale in basso resta intatta e combacia con la sezione
     successiva (niente "cover" che la ritaglia/sposta). */
  /* 100% 100% = l'immagine riempie ESATTAMENTE il box della sezione (larghezza e
     altezza): cosi sotto l'immagine non resta MAI la banda del background-color
     (la "banda oro" nasceva da min-height in vw -che include la scrollbar- contro
     background 100% che la esclude: ~10px di scarto). La distorsione verticale e'
     <1% e impercettibile; la diagonale resta combaciante con la sezione sotto. */
  background-size: 100% 100%; background-repeat: no-repeat; background-position: center top;
  min-height: 66.2vw;
}
/* i 3 box galleggiano in basso sull'hero, sopra la diagonale: riga flex centrata,
   basi allineate (il box centrale, piu alto, sporge verso l'alto). */
#top .tsm-hero-sec > .container { max-width: 100% !important; padding: 36vw 0 0 0 !important; }
/* basi allineate; le altezze (proporzionali in vw, non px) rendono i box uguali. */
#top .tsm-hero-sec .entry-content-wrapper { display: flex !important; justify-content: center; align-items: flex-end; }

/* BOX: 3 riquadri delle STESSE DIMENSIONI. Di base attaccati; il centrale sta
   leggermente PIU IN ALTO ed e' DAVANTI, i laterali scivolano verso il centro
   DIETRO al centrale (margini negativi). Ombra piccola e densa (ravvicinata). */
#top .tsm-hero-sec .flex_column.tsm-box {
  margin: 0 !important; float: none !important; clear: none !important;
}
#top .tsm-box { box-sizing: border-box; text-align: center; flex: 0 0 24.5vw; max-width: 24.5vw; padding: 3.2vw 1.7vw 3vw; min-height: 17.6vw; position: relative; z-index: 1;
  box-shadow: 0 5px 11px rgba(0,0,0,.33) !important; }
/* centrale: stessa larghezza, un filo piu alto (sporge sopra) e DAVANTI (z-index);
   i laterali gli vanno DIETRO verso il centro (margini negativi orizzontali). */
/* centrale ALZATO di R (translateY) e DAVANTI; i laterali scendono "sotto" e si
   spostano verso il centro di R/2 CIASCUNO (sovrapposizione = R, meta' per lato). */
/* sfalsamento verso l'alto del box centrale ~ meta' di prima: lo "stacco" totale (top)
   sopra i laterali e' ~33px (come nel mockup) = differenza d'altezza (1.6vw) + translateY. */
#top .tsm-box-alt { z-index: 5; min-height: 19.2vw; margin: 0 !important; transform: translateY(-0.55vw); }
#top .tsm-hero-sec .tsm-box.first { transform: translateX(1.3vw); }
#top .tsm-hero-sec .tsm-box:not(.first):not(.tsm-box-alt) { transform: translateX(-1.3vw); }
/* float:none -> il tag <h3> (Enfold lo mette float:right) torna nel flusso e il suo
   wrapper lo contiene in altezza: cosi il margin-top del textblock sotto crea un VERO
   stacco titolo/testo (prima il titolo "sporgeva" sotto il wrapper collassato e il
   testo gli finiva appiccicato). */
#top .tsm-box .av-special-heading, #top .tsm-box .av-special-heading-tag { display: block !important; width: 100% !important; text-align: center !important; float: none !important; }
#top .tsm-box .av-special-heading-tag { color: #000; }
#top .tsm-box .avia_textblock { text-align: center !important; color: #4d4d4d; margin: 1.6vw 0 1.4vw; line-height: 1.4; }
#top .tsm-box .avia-button-wrap, #top .tsm-box .av-buttonrow-wrap { text-align: center !important; }
/* titolo box = stessa dimensione del testo "MISURIAMO LE PERFORMANCE" saldato nell'hero
   (~2.05vw): scala con la pagina come l'hero, e a questa misura entra su UNA riga nei
   box con le proporzioni del mockup. */
#top .tsm-box-title .av-special-heading-tag { font-size: clamp(18px, 2.05vw, 40px); line-height: 1.08; }
/* pulsanti box: piatti, piccoli, centrati (niente gradiente/ombra "generici") */
#top .tsm-box .avia-button { display: inline-block; background-image: none !important; box-shadow: none !important; text-shadow: none !important; border: none !important; border-radius: 3px; font-weight: 400; font-size: .8rem; padding: .5vw 1.4vw; }
/* box grigio centrale: FEATURED (grigio del mockup, testo bianco) */
#top .tsm-box-alt { background-color: #adadad !important; position: relative; z-index: 5; }
#top .tsm-box-alt .av-special-heading-tag, #top .tsm-box-alt .avia_textblock { color: #fff !important; }
/* box centrale: testo piu' grande degli altri due (richiesta utente) */
#top .tsm-box-alt .avia_textblock { font-size: 1.34rem; }

/* ---- MOBILE Home: l'immagine hero resta in alto (aspetto naturale), i 3 box NON piu'
   accostati e minuscoli (24.5vw = ~96px) ma IMPILATI a tutta larghezza e leggibili,
   sul fondo oro sotto l'immagine. (Su desktop i box sono flex item con flex-basis in vw:
   serve sovrascrivere il flex, non basta width.) ---- */
@media only screen and (max-width: 767px) {
  /* mobile: copertina RITAGLIATA (solo logo+testi+grafici, niente fascia vuota in
     basso); piu' bordo in alto per l'hamburger; bordo inferiore sfumato sull'oro della
     sezione (la sfumatura sta SOTTO la grafica, non la copre). L'immagine alta ~55vw ->
     i box partono subito sotto (padding-top = ratio img). */
  #top .tsm-hero-sec { background-image: url("/wp-content/uploads/2026/06/home-hero-mobile.jpg?v=8"); background-size: 100% auto; min-height: 0; }
  #top .tsm-hero-sec > .container { padding: 61vw 6vw 9vw !important; }
  #top .tsm-hero-sec .entry-content-wrapper { flex-direction: column !important; align-items: stretch !important; }
  #top .tsm-hero-sec .flex_column.tsm-box,
  #top .tsm-hero-sec .tsm-box.first,
  #top .tsm-hero-sec .tsm-box:not(.first):not(.tsm-box-alt),
  #top .tsm-hero-sec .tsm-box-alt {
    flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important;
    transform: none !important; margin: 0 0 16px !important; padding: 22px !important; }
  #top .tsm-hero-sec .entry-content-wrapper > .tsm-box:last-child { margin-bottom: 0 !important; }
  #top .tsm-box-title .av-special-heading-tag { font-size: 21px !important; line-height: 1.15; }
  #top .tsm-box .avia_textblock { font-size: 1rem !important; margin: 10px 0 16px !important; }
  #top .tsm-box-alt .avia_textblock { font-size: 1.15rem !important; }
  #top .tsm-box .avia-button { font-size: 1rem !important; padding: 10px 22px !important; }
}

/* =========================================================================
   CERTIFICAZIONE: 2.jpg intera. Testo SCURO; solo riga 1 del titolo bianca;
   barra arancione finale. 2 linee bianche separatrici.
   ========================================================================= */
#top .tsm-cert {
  background-color: #f0c05e;
  background-image: url("/wp-content/uploads/2026/06/home-certificazione-bg.jpg");
  background-size: 100% 100%; background-repeat: no-repeat; background-position: top center;
  min-height: 42.55vw;
  /* le due immagini si ATTACCANO: la cert sale di 2px e copre l'eventuale filo di
     sub-pixel tra una sezione e l'altra (niente gap, niente colore "tappabuchi"). */
  margin-top: -2px; position: relative;
}
#top .tsm-cert > .container { padding: 5vw 0 5vw 0 !important; }
/* colonna testo cert un po' piu larga (come nel mockup): cosi "PER LA PRESENZA NEI
   SOCIAL MEDIA" sta su una riga e il corpo ha la stessa larghezza del mockup. */
#top .tsm-cert .flex_column { width: 54% !important; margin-left: 0 !important; }
#top .tsm-cert .av-special-heading, #top .tsm-cert .avia_textblock { text-align: left; }
#top .tsm-cert .avia_textblock, #top .tsm-cert .avia_textblock * { color: #000; }
#top .tsm-cert .avia_textblock { font-size: 1.2rem; line-height: 1.55; }
/* float:none -> il wrapper contiene il titolo (vedi box hero) cosi il margin-bottom
   sotto crea un vero stacco; nowrap -> le 2 righe del titolo non vanno MAI a capo. */
#top .tsm-cert-title .av-special-heading-tag { color: #ffffff; font-weight: 700; line-height: 1.15; font-size: clamp(20px, 2.3vw, 38px); float: none !important; white-space: nowrap; }
#top .tsm-cert-title .tsm-thin { color: #000; font-weight: 400; }
/* riga vuota tra il titolo e il corpo del testo (come nel mockup) */
#top .tsm-cert-title { margin-bottom: 1.7rem; }
@media only screen and (max-width: 767px) { #top .tsm-cert-title .av-special-heading-tag { white-space: normal; } }
/* 2 linee separatrici bianche, spesse 4px (richiesta utente) */
#top .tsm-wline .hr-inner, #top .tsm-wline .hr-inner-style { border-color: #fff !important; border-top-color: #fff !important; border-top-width: 4px !important; }
/* barra/pulsante "Ogni anno..." : testo grande come il corpo del blocco */
#top .tsm-cert-bar .avia-button { font-size: 1.2rem !important; padding: .7vw 1.6vw; }

/* =========================================================================
   IN EVIDENZA: titolo scuro bold centrato; card con sfondo; didascalie BOLD scure
   ========================================================================= */
#top .av-special-heading .special-heading-border { display: none !important; }
#top .tsm-ev-title.av-special-heading { display: block !important; width: 100% !important; text-align: center !important; }
#top .tsm-ev-title .av-special-heading-tag { color: #000; text-align: center !important; display: block !important; width: 100% !important; font-size: clamp(20px, 2.4vw, 40px); }
/* sfondo del blocco campionato dal mockup (era troppo chiaro) + OMBRA IN BASSO
   marcata: la sezione, sopra (z-index) ai contatti, proietta l'ombra verso il basso. */
#top .tsm-evidenza.avia-shadow { background-color: #f5d696 !important; position: relative; z-index: 2; box-shadow: 0 20px 30px -8px rgba(0,0,0,.5) !important; }
/* 4 card alla STESSA altezza con FLEX (adattivo, NIENTE px fissi): la riga si stira
   all'altezza della card piu alta e la didascalia oro riempie lo spazio sotto la foto,
   cosi anche la card che va a capo resta pari alle altre. */
#top .tsm-evidenza .entry-content-wrapper { display: flex !important; flex-wrap: wrap; align-items: stretch; }
#top .tsm-evidenza .av_one_full { flex: 0 0 100%; }
#top .tsm-ev-card { padding: 0 !important; display: flex !important; flex-direction: column; background-color: #f0c05e !important; }
#top .tsm-ev-img { flex: 0 0 auto; }
#top .tsm-ev-img, #top .tsm-ev-img .avia-image-container, #top .tsm-ev-img .avia-image-container-inner, #top .tsm-ev-img img { width: 100% !important; max-width: 100% !important; display: block; margin: 0 !important; }
/* immagini ad altezza uniforme (stesso aspetto). Ratio ~1.41 = quello NATURALE delle
   immagini (e del mockup, landscape): 1.25 le ritagliava ai lati rendendole piu strette/
   quadrate (effetto "compresso/innaturale"). object-fit cover tiene la griglia uniforme
   anche con future immagini di proporzioni diverse. */
#top .tsm-ev-img img { aspect-ratio: 1.41 / 1; object-fit: cover; }
/* didascalia oro: riempie lo spazio rimanente (flex:1) -> tutte le card pari */
#top .tsm-ev-card .avia_textblock { flex: 1 1 auto; text-align: center; color: #000; font-weight: 700; font-size: 1.12rem; line-height: 1.25; padding: 14px 12px; margin: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }

/* =========================================================================
   CONTATTI: domande centrate; campi a tutta larghezza ma BASSI; pulsante arancione
   ========================================================================= */
#top .tsm-contatti .tsm-cont-q.av-special-heading { display: block !important; width: 100% !important; text-align: center !important; }
#top .tsm-contatti .tsm-cont-q .av-special-heading-tag { color: #000; text-align: center !important; display: block !important; width: 100% !important; font-size: clamp(20px, 1.9vw, 30px); }
#top .tsm-contatti .avia_textblock { text-align: center; color: var(--tsm-orange); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
/* "Contattaci" (titolo del form) grande come il sottotitolo arancione sopra */
#top .tsm-contatti .avia_ajax_form h3 { color: var(--tsm-orange); text-align: center; margin-bottom: 22px; font-size: 1.5rem; font-weight: 700; }
/* etichette dei campi: dimensione standard minima (1rem), MAI piu piccole */
#top .tsm-contatti .avia_ajax_form label { font-weight: 400; margin-bottom: 4px; font-size: 1rem; }
/* unica eccezione: il testo (lungo) della checkbox privacy, un filo piu piccolo */
#top .tsm-contatti .avia_ajax_form p:has(input[type="checkbox"]) label { font-size: .9rem; }
#top .tsm-contatti .text_input { width: 100%; height: 34px; min-height: 34px; padding: 4px 12px; line-height: 1.3; box-sizing: border-box; }
#top .tsm-contatti .avia_ajax_form p:last-child { text-align: center; }
#top .tsm-contatti input.button[type="submit"], #top .tsm-contatti .avia_ajax_form .button {
  background: var(--tsm-orange) !important; border: none !important; color: #fff !important; padding: 11px 40px; box-shadow: none; text-shadow: none; width: auto; display: inline-block;
}

/* in evidenza: cursore a mano (sono cliccabili) */
#top .tsm-ev-card a, #top .tsm-ev-img a, #top .tsm-ev-img img { cursor: pointer; }
/* anche la didascalia (label) e' un link: stesso aspetto del testo (scuro, bold, niente
   sottolineatura) ma cliccabile come l'immagine sopra. */
#top .tsm-ev-card .avia_textblock a { color: inherit; text-decoration: none; }
#top .tsm-ev-card .avia_textblock a:hover { text-decoration: underline; }

/* =========================================================================
   PAGINE SEGNAPOSTO (in evidenza): hero brand col titolo, contenuto in arrivo
   ========================================================================= */
#top .tsm-ph-hero { background-color: #e8862e; padding: 17vh 0 12vh !important; }
#top .tsm-ph-hero .tsm-ph-title.av-special-heading { display: block !important; width: 100% !important; text-align: center !important; }
#top .tsm-ph-hero .tsm-ph-title .av-special-heading-tag { color: #fff; text-align: center !important; display: block !important; width: 100% !important; font-size: clamp(30px, 3.4vw, 56px); line-height: 1.1; }
#top .tsm-ph-hero .avia_textblock { color: #fff; text-align: center; font-size: 1.15rem; margin-top: 10px; opacity: .92; }

/* =========================================================================
   FOOTER: grigio scuro, 3 colonne; socket = sola barra nera
   ========================================================================= */
#top #footer { background-color: #525252; }
#top #footer, #top #footer .widget, #top #footer p, #top #footer li { color: #fff; }
#top #footer .tsm-foot-strong { font-weight: 700; }
#top .tsm-foot-menu { list-style: none; margin: 0; padding: 0; }
#top .tsm-foot-menu li { margin: 0 0 7px; }
#top .tsm-foot-menu a, #top #footer a { color: var(--tsm-orange); }
#top .tsm-foot-line { border: 0; border-top: 2px solid var(--tsm-orange); width: 100%; margin: 16px 0; }
#top .tsm-foot-copy { font-style: italic; }
/* Footer a 3 colonne sbilanciate come nel mockup: menu stretto, colonna EIKON LARGA
   (cosi' l'indirizzo sta su una sola riga e non va a capo), copyright a destra. */
#top #footer .container > .flex_column { margin-left: 4%; }
#top #footer .container > .flex_column:nth-child(1) { width: 18%; margin-left: 0; }
#top #footer .container > .flex_column:nth-child(2) { width: 54%; }
#top #footer .container > .flex_column:nth-child(3) { width: 20%; }
#top #socket { background-color: #1a1a1a; }
#top #socket .copyright, #top #socket .sub_menu_socket, #top #socket .social_bookmarks { display: none; }

/* =========================================================================
   LA CERTIFICAZIONE (pag. 19)
   Hero full-bleed (1.jpg, testo saldato). Contenuti: colonna grigia (32%)
   + arancione, full-bleed come l'hero cosi la diagonale combacia.
   5 righe: etichetta-riquadro | paragrafo (colore alternato), separatori punteggiati.
   ========================================================================= */
#top .tsm-lc-hero {
  background-color: #e4973b;
  background-image: url("/wp-content/uploads/2026/06/lc-hero.jpg?v=2");
  /* 100% 100% = immagine intera, niente ritaglio "cover" (che esponeva una riga
     scura in basso = la "linea scura" della cucitura). Distorsione <1%. */
  background-size: 100% 100%; background-repeat: no-repeat; background-position: center top;
  min-height: 53.4vw;
}
#top .tsm-lc-content {
  background-color: #e4973b;
  background-image: linear-gradient(#a4a4a4, #a4a4a4);
  background-repeat: no-repeat; background-position: left top;
  background-size: 32% calc(100% - 7vw);
  margin-top: -3px;
}
#top .tsm-lc-content > .container { max-width: 100%; padding: 5.5vw 0 9vw; }
/* etichette (riquadro accostato alla colonna grigia, verso il testo) */
#top .tsm-lc-content .tsm-lbl-col { text-align: right; }
#top .tsm-lc-content .tsm-lbl { display: inline-block !important; width: 62%; box-sizing: border-box; text-align: left; margin: 0 -1.7vw 0 0; padding: 9px 15px !important; }
#top .tsm-lc-content .tsm-lbl .av-special-heading-tag { font-family: var(--tsm-font-cond) !important; font-weight: 700; font-size: 1.7rem; line-height: 1.1; letter-spacing: .4px; margin: 0; padding: 0; }
#top .tsm-lc-content .tsm-lbl-w { background: #ffffff; }
#top .tsm-lc-content .tsm-lbl-o { background: #e4973b; }
#top .tsm-lc-content .tsm-lbl-b { background: #000000; }
#top .tsm-lc-content .tsm-lbl-w .av-special-heading-tag,
#top .tsm-lc-content .tsm-lbl-o .av-special-heading-tag { color: #000; }
#top .tsm-lc-content .tsm-lbl-b .av-special-heading-tag { color: #ffffff; }
#top .tsm-lc-content .tsm-lbl .o { color: #e4973b; }
#top .tsm-lc-content .tsm-lbl .w { color: #ffffff; }
/* testi a destra, giustificati, colore alternato bianco/scuro */
#top .tsm-lc-content .tsm-txt-col .avia_textblock { text-align: justify; width: 78%; font-size: 1.42rem; line-height: 1.5; }
#top .tsm-lc-content .tsm-tw .avia_textblock, #top .tsm-lc-content .tsm-tw .avia_textblock * { color: #ffffff; }
#top .tsm-lc-content .tsm-td .avia_textblock, #top .tsm-lc-content .tsm-td .avia_textblock * { color: #000; }
/* separatori punteggiati tra le righe (solo lato testo) + allineamento etichetta */
#top .tsm-lc-content .tsm-rsep.tsm-lbl-col { padding-top: 24px; }
#top .tsm-lc-content .tsm-rsep.tsm-txt-col .avia_textblock { border-top: 2px dotted rgba(0,0,0,.45); padding-top: 22px; }
/* mobile: colonne impilate, niente colonna grigia, etichette e testi a piena larghezza */
@media only screen and (max-width: 767px) {
  #top .tsm-lc-content { background-image: none; }
  #top .tsm-lc-content > .container { padding: 9vw 5% 11vw; }
  #top .tsm-lc-content .tsm-lbl-col { text-align: left; }
  #top .tsm-lc-content .tsm-lbl { width: auto; max-width: 100%; margin: 0 0 6px 0; }
  #top .tsm-lc-content .tsm-txt-col .avia_textblock { width: 100%; }
  #top .tsm-lc-content .tsm-rsep.tsm-lbl-col { padding-top: 16px; }
}

/* =========================================================================
   I SETTORI E LE AZIENDE (pag. 20)
   Hero full-bleed (1.jpg) -> sezione grigia full-bleed (2.jpg, cunei+diagonale)
   con label/testo/6 pulsanti -> sezione oro (settore selezionato) -> contatti.
   ========================================================================= */
#top .tsm-sa-hero {
  background-color: #ffffff;
  background-image: url("/wp-content/uploads/2026/06/sa-hero.jpg?v=2");
  background-size: cover; background-repeat: no-repeat; background-position: center top;
  min-height: 53.96vw;
}
#top .tsm-sa-gray {
  background-color: #c0c0c0;
  /* DEFAULT (nessun settore aperto): immagine SENZA la diagonale oro in basso, cosi'
     il fondo grigio e' dritto e va diretto ai contatti. La versione con diagonale
     (sa-gray.jpg) torna solo quando un settore e' aperto (#top.tsm-sel-open, ROUND 8). */
  background-image: url("/wp-content/uploads/2026/06/sa-gray-flat.jpg");
  background-size: 100% auto; background-repeat: no-repeat; background-position: center top;
  min-height: 33.33vw; margin-top: -3px;
}
/* padding-top piccolo: l'etichetta "COME SCEGLIAMO I SETTORI" cade DENTRO il
   rettangolo arancio; i pulsanti scendono sotto (margin-top della riga 1). */
#top .tsm-sa-gray > .container { max-width: 100%; padding: 4vw 14% 5vw; }
/* etichetta/tab (riquadro condensed bold) */
#top .tsm-tab { display: inline-block !important; margin: 0; }
#top .tsm-tab .av-special-heading-tag { font-family: var(--tsm-font-cond) !important; font-weight: 700; font-size: 1.5rem; line-height: 1.12; margin: 0; letter-spacing: .4px; }
/* Etichette "ad angolo" (COME SCEGLIAMO, COME FUNZIONA, EIKON): l'angolo colorato
   dell'immagine pronta e' piu' stretto del pentagono del mockup, quindi l'etichetta
   sforava a destra. La tiriamo a sinistra DENTRO l'angolo con position:relative (cosi'
   il testo a fianco resta al suo posto). */
/* etichetta allineata a DESTRA nella sua colonna e tirata cosi' che il suo BORDO
   DESTRO cada al bordo destro della zona colorata (~32% sezione = bordo colonna ~36%
   meno ~4vw). In % / vw -> resta inchiodata a qualsiasi risoluzione. */
#top .tsm-sa-lblcol, #top .tsm-ca-lblcol, #top .tsm-cs-lblcol, #top .tsm-en-evlblcol { position: relative; left: -4vw; text-align: right !important; }
/* padding SIMMETRICO (Enfold forzava padding-bottom:5px sulle .av-special-heading,
   rendendo i riquadri sbilanciati sopra/sotto): vale per TUTTI i riquadri-etichetta. */
#top .tsm-tab-flat { padding: 13px 22px !important; }
#top .tsm-tab-flat .av-special-heading-tag { text-align: left; }
#top .tsm-tab-w { background: #fff; }
#top .tsm-tab-w .av-special-heading-tag { color: #000; }
#top .tsm-tab .o { color: #e38c3b; }
#top .tsm-sa-lblcol { text-align: left; }
/* testo intro scuro su grigio */
#top .tsm-sa-introcol .avia_textblock, #top .tsm-sa-introcol .avia_textblock * { color: #000; }
#top .tsm-sa-introcol .avia_textblock { font-size: 1.42rem; line-height: 1.5; }
/* intro "Ogni anno monitoriamo" allineato in alto con il riquadro COME SCEGLIAMO a
   sinistra (che e' alzato): lo alzo con position cosi il flusso dei pulsanti sotto NON
   cambia. */
#top .tsm-sa-introcol { position: relative; top: -3vw; }
/* pulsanti settore (bevel + bordo) */
#top .tsm-secbtn-col { text-align: center; }
/* i 6 pulsanti tornano nel FLUSSO naturale subito sotto l'intro (prima 15vw li spingeva
   giu' sopra la diagonale gold); cosi' risale anche tutto il resto della pagina. Il gap
   visivo (~63px come nel mockup) viene dal rialzo dell'intro qui sopra. */
#top .tsm-secbtn-r1 { margin-top: 0; }
#top .tsm-secbtn-col:not(.tsm-secbtn-r1) { margin-top: 2.4vw; }
/* pulsanti settore: cornice BIANCA 2px staccata 4px (outline-offset) tutt'intorno,
   niente bordo grigio; ombra ravvicinata. Il colore del testo viene dallo shortcode. */
#top .tsm-secbtn .avia-button {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 94%; max-width: 300px; min-height: 3.4em; white-space: normal; text-align: center;
  font-family: var(--tsm-font-cond) !important; font-weight: 700; font-size: 1.5rem; letter-spacing: .4px; line-height: 1.12;
  padding: 12px 14px; border: none !important; border-radius: 0; box-shadow: 0 4px 7px rgba(0,0,0,.3); text-shadow: none;
  outline: 2px solid #fff; outline-offset: 4px;
}

/* sezione settore selezionato (oro) */
#top .tsm-sa-sel { background-color: #fabd48; margin-top: -2px; display: none; }
#top .tsm-sa-sel > .container { max-width: 100%; padding: 1.6vw 14% 3.5vw; }
/* il "settore selezionato" e' ora un av_button .tsm-secbtn IDENTICO a quelli dei 6,
   in colonna one_third-first centrata (.tsm-secbtn-col): cosi' coincide per misura,
   centratura testo e allineamento col primo dei 6. Qui solo lo spazio sotto. */
/* il tab settore riusa .tsm-secbtn-col, che eredita margin-top:2.4vw (spaziatura della
   2a riga di pulsanti): qui lo azzeriamo (stessa specificita' del :not, ma dopo), cosi'
   il contenuto del blocco oro parte subito sotto il bordo della sezione. */
#top .tsm-secbtn-col.tsm-sel-tabwrap { margin-top: 0; margin-bottom: 26px; }
/* statistiche */
#top .tsm-statcol { text-align: center; }
/* quando c'e' SOLO la 2a statistica (aziende) e non la 1a (canali), la sua colonna deve
   andare a capo sotto il tab come fa la 1a, non affiancarsi al pulsante (il JS aggiunge
   .tsm-stat-first; serve clear:left perche' le colonne Enfold sono float). */
#top .tsm-sa-sel .tsm-statcol.tsm-stat-first { clear: left; margin-left: 0; }
#top .tsm-stat-num { display: block; margin: 0 0 6px; }
#top .tsm-stat-num .av-special-heading-tag { background: #4d4d4d; color: #fff; font-family: var(--tsm-font) !important; font-weight: 700; font-size: 1.45rem; border-radius: 4px; padding: 9px 0; text-align: center; display: block; width: 100%; }
#top .tsm-stat-cap .avia_textblock { text-align: center; color: #000; font-weight: 400; font-size: 1.12rem; line-height: 1.2; }
/* linea divisoria oro */
#top .tsm-sel-hr .hr-inner, #top .tsm-sel-hr .hr-inner-style { border-color: #c98f2f !important; border-top-color: #c98f2f !important; }
/* griglia aziende certificate (tick arancio + bold) */
#top .tsm-azcol { margin-top: 16px; }
/* lista aziende certificate: una colonna full-width riempita via JS (dal backend),
   disposta in griglia a 3 colonne; ogni voce ha la barretta arancione come nel mockup. */
#top .tsm-azlist { display: flex; flex-wrap: wrap; align-items: flex-start; width: 100%; }
#top .tsm-azitem { box-sizing: border-box; width: 33.333%; margin-top: 16px; padding: 3px 2% 3px 12px; color: #000; font-weight: 700; font-size: 1.3rem; line-height: 1.25; border-left: 4px solid #e38c3b; }
#top .tsm-azlist:empty { display: none; }
@media only screen and (max-width: 767px) { #top .tsm-azitem { width: 50%; } }
/* mobile pag.20: sezioni a tinta piatta, colonne impilate */
@media only screen and (max-width: 767px) {
  #top .tsm-sa-gray { background-image: none; min-height: 0; }
  #top .tsm-sa-gray > .container { padding: 10vw 6% 10vw; }
  #top .tsm-secbtn-r1, #top .tsm-secbtn-col:not(.tsm-secbtn-r1) { margin-top: 12px; }
  #top .tsm-secbtn .avia-button { width: 100%; max-width: none; }
  #top .tsm-sa-sel > .container { padding: 9vw 6% 9vw; }
  #top .tsm-statcol { display: inline-block; width: 48%; vertical-align: top; }
}

/* =========================================================================
   COME ADERIRE (pag. 21)
   Hero full-bleed (1.jpg) -> sezione arancio (2.jpg, gray corner) con
   COME FUNZIONA + 2 colonne (separatore tratteggiato) -> contatti.
   ========================================================================= */
#top .tsm-ca-hero {
  background-color: #ffffff;
  background-image: url("/wp-content/uploads/2026/06/ca-hero.jpg?v=2");
  background-size: cover; background-repeat: no-repeat; background-position: center top;
  min-height: 54.58vw;
}
#top .tsm-ca-mid {
  background-color: #e38c3c;
  background-image: url("/wp-content/uploads/2026/06/ca-mid.jpg");
  background-size: 100% auto; background-repeat: no-repeat; background-position: left top;
  margin-top: -3px;
}
#top .tsm-ca-mid > .container { max-width: 100%; padding: 4vw 14% 5vw; }
#top .tsm-tab-b { background: #000; }
#top .tsm-tab-b .av-special-heading-tag { color: #fff; }
/* COME FUNZIONA + intro (corpo scuro su arancio) */
#top .tsm-ca-introcol .avia_textblock, #top .tsm-ca-introcol .avia_textblock * { color: #000; }
#top .tsm-ca-introcol .avia_textblock { text-align: justify; font-size: 1.42rem; line-height: 1.5; }
/* intro allineata in alto col riquadro COME FUNZIONA (alzato), come nei Settori */
#top .tsm-ca-introcol { position: relative; top: -3vw; }
/* 2 colonne servizi: divisione 35/65 (la linea cade ~40% pagina), divisore BIANCO */
#top .tsm-ca-colL { width: 35% !important; margin: 5vw 0 0 0 !important; }
#top .tsm-ca-colR { width: 65% !important; margin: 5vw 0 0 0 !important; border-left: 2px dotted rgba(255,255,255,.85); padding-left: 4%; }
#top .tsm-ca-colL .avia_textblock, #top .tsm-ca-colL .avia_textblock *,
#top .tsm-ca-colR .avia_textblock, #top .tsm-ca-colR .avia_textblock * { color: #000; }
#top .tsm-ca-colL .avia_textblock, #top .tsm-ca-colR .avia_textblock { font-size: 1.42rem; line-height: 1.5; }
/* colR: i grassetti inline sono NERI (come ovunque); SOLO i titoli sezione
   (.ca-sub) restano bianchi come una sorta di intestazione. */
#top .tsm-ca-colR .avia_textblock strong { color: #000; font-weight: 700; }
#top .tsm-ca-colR .avia_textblock strong.ca-sub { color: #fff; }
/* "SEI UN'AZIENDA CERTIFICATA?" e "SERVIZI DEDICATI": rettangoli COMPATTI (non a
   tutta riga), allineati a SINISTRA, con il testo CENTRATO dentro. */
#top .tsm-ca-colL .tsm-tab, #top .tsm-ca-colR .tsm-tab { display: inline-block !important; width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 0 0 18px 0 !important; }
#top .tsm-ca-colL .tsm-tab .av-special-heading-tag, #top .tsm-ca-colR .tsm-tab .av-special-heading-tag { text-align: center !important; }
/* contatti: seconda domanda sotto il form */
#top .tsm-ca-q2 { margin-top: 30px; }

/* =========================================================================
   CHI SIAMO (pag. 23)
   Hero (word cloud) -> sezione EIKON (gold + gray corner, testo + 2 box obliqui)
   -> IL TEAM (griglia membri).
   ========================================================================= */
#top .tsm-cs-hero {
  background-color: #f9c14e;
  background-image: url("/wp-content/uploads/2026/06/cs-hero.jpg?v=2");
  background-size: cover; background-repeat: no-repeat; background-position: center top;
  min-height: 58.02vw;
}
#top .tsm-cs-eikon {
  background-color: #fabd48;
  background-image: url("/wp-content/uploads/2026/06/cs-eikon.jpg");
  background-size: 100% auto; background-repeat: no-repeat; background-position: left top;
  margin-top: -3px;
}
#top .tsm-cs-eikon > .container { max-width: 100%; padding: 4vw 14% 6vw; }
/* etichetta EIKON piu piccola */
#top .tsm-cs-lblcol .tsm-tab .av-special-heading-tag { font-size: 1.3rem; line-height: 1.18; }
/* testo intro scuro giustificato */
#top .tsm-cs-introcol .avia_textblock, #top .tsm-cs-introcol .avia_textblock * { color: #000; }
#top .tsm-cs-introcol .avia_textblock { text-align: justify; font-size: 1.4rem; line-height: 1.5; }
/* link inline nel testo EIKON (S-Assessment, BIC, Caring Index): scuri come il testo
   - l'arancio su oro avrebbe poco contrasto - solo sottolineati per riconoscerli. */
#top .tsm-cs-introcol .avia_textblock a { color: inherit; text-decoration: underline; }
/* l'intero riquadro EIKON a sinistra e' cliccabile (link a eikonsc.com): overlay
   "stretched link" che copre tutto il box, non solo il testo. */
#top .tsm-cs-lblcol .tsm-tab { position: relative; }
#top .tsm-cs-lblcol .av-heading-link { color: inherit; text-decoration: none; }
#top .tsm-cs-lblcol .av-heading-link::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
/* intro allineata in alto col riquadro EIKON (alzato), come nelle altre pagine */
#top .tsm-cs-introcol { position: relative; top: -3vw; }
/* box obliqui (clip-path) */
#top .tsm-cs-box { margin-top: 22px; }
#top .tsm-cs-box .avia_textblock { display: flex; align-items: center; gap: 3%; padding: 40px 5% 24px; }
#top .tsm-cs-box1 .avia_textblock { background: #e38c3c; clip-path: polygon(0 34%, 100% 0, 100% 100%, 0 100%); }
/* box grigio: bordo SUPERIORE piatto, bordo INFERIORE inclinato (come mockup) */
#top .tsm-cs-box2 .avia_textblock { background: #dadada; clip-path: polygon(0 0, 100% 0, 100% 72%, 0 100%); padding: 26px 5% 40px; }
#top .tsm-cs-box .bx-lbl { flex: 0 0 27%; font-family: var(--tsm-font-cond); font-weight: 700; font-size: 1.45rem; line-height: 1.12; letter-spacing: .3px; }
#top .tsm-cs-box .bx-lbl .d { color: #000; }
#top .tsm-cs-box .bx-lbl .w { color: #fff; }
#top .tsm-cs-box .bx-lbl .o { color: #e38c3c; }
#top .tsm-cs-box .bx-txt { flex: 1; position: relative; padding-left: 24px; font-size: 1.4rem; line-height: 1.45; color: #000; }
#top .tsm-cs-box .bx-txt::before { content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; width: 28px; border-left: 2px solid #e38c3c; border-bottom: 2px solid #e38c3c; }
/* box1 (arancio): la L dev'essere BIANCA (l'arancio su arancio era invisibile,
   per questo l'utente la vedeva solo sul box grigio sotto). */
#top .tsm-cs-box1 .bx-txt::before { border-left-color: #fff; border-bottom-color: #fff; }
#top .tsm-cs-box .bx-txt strong { font-weight: 700; }

/* IL TEAM (sfondo bianco) */
#top .tsm-cs-team { background-color: #ffffff; }
#top .tsm-cs-team > .container { max-width: 100%; padding: 3vw 14% 4vw; }
#top .tsm-cs-teamlbl .av-special-heading-tag { color: #000; font-weight: 700; position: relative; padding-left: 22px; }
#top .tsm-cs-teamlbl .av-special-heading-tag::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 28px; border-left: 2px solid #e38c3c; border-bottom: 2px solid #e38c3c; }
#top .tsm-cs-teamintro .avia_textblock, #top .tsm-cs-teamintro .avia_textblock * { color: #000; }
#top .tsm-cs-teamintro .avia_textblock { text-align: justify; font-size: 1.4rem; line-height: 1.5; position: relative; padding-left: 28px; padding-bottom: 8px; }
#top .tsm-cs-teamintro .avia_textblock::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 0; width: 28px; border-left: 2px solid #e38c3c; border-bottom: 2px solid #e38c3c; }
#top .tsm-tm-col { margin-top: 26px; text-align: center; }
#top .tm-photo { width: 100%; padding-bottom: 100%; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.16); border: 1px solid #eee; }
#top .tm-name { font-weight: 700; color: #000; margin-top: 12px; font-size: 1rem; line-height: 1.2; }
#top .tm-title { color: #777; font-size: 1rem; }
/* mobile pag.23 */
@media only screen and (max-width: 767px) {
  #top .tsm-cs-eikon { background-size: cover; }
  #top .tsm-cs-eikon > .container { padding: 9vw 6% 10vw; }
  #top .tsm-cs-box .avia_textblock { flex-direction: column; align-items: flex-start; gap: 10px; clip-path: none !important; }
  #top .tsm-cs-box .bx-lbl { flex: none; }
  #top .tsm-cs-team > .container { padding: 9vw 6% 9vw; }
  /* team: 2 per riga (non 1 gigante). Selettore forte + !important per battere la
     regola Enfold .flex_column { width:100% } che vince per specificita'. */
  #top .tsm-cs-team .flex_column.tsm-tm-col { display: inline-block !important; width: 48% !important; max-width: 48% !important; float: none !important; vertical-align: top; margin: 18px 0 0 !important; }
}

/* =========================================================================
   EVENTI E NOTIZIE (pag. 22)
   Hero -> Prima edizione (galleria) -> Eventi passati (gold, carosello)
   -> Notizie (grigio chiaro, carosello). Immagini = segnaposto.
   ========================================================================= */
#top .tsm-en-hero {
  background-color: #ffffff;
  background-image: url("/wp-content/uploads/2026/06/en-hero.jpg?v=2");
  background-size: cover; background-repeat: no-repeat; background-position: center top;
  min-height: 54.64vw;
}
#top .tsm-en-prima {
  background-color: #d5d5d5;
  /* en-prima-straight = en-prima senza la diagonale oro in basso -> il confine col
     blocco "Notizie e approfondimenti" (giallo) e' DRITTO, etichetta a filo. */
  background-image: url("/wp-content/uploads/2026/06/en-prima-straight.jpg");
  background-size: 100% auto; background-repeat: no-repeat; background-position: left top;
  margin-top: -3px;
}
#top .tsm-en-prima > .container { max-width: 100%; padding: 4vw 14% 9vw; }
#top .tsm-en-evtxtcol .avia_textblock, #top .tsm-en-evtxtcol .avia_textblock * { color: #000; }
#top .tsm-en-evtxtcol .avia_textblock { font-size: 1.42rem; line-height: 1.5; }
/* "Consegna delle certificazioni": in alto allineato con L'EVENTO ANNUALE (alzato) e
   spostato a destra cosi' non finisce sopra l'angolo arancione del riquadro. */
#top .tsm-en-evtxtcol { position: relative; top: -2.9vw; left: -4.5vw; }
/* Prima edizione header con bracket */
#top .tsm-en-pehead { margin-top: 3vw; }
#top .tsm-en-pehead .avia_textblock { position: relative; padding-left: 22px; }
#top .tsm-en-pehead .avia_textblock::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 28px; border-left: 2px solid #e38c3c; border-bottom: 2px solid #e38c3c; }
#top .pe-k { color: #e38c3c; font-weight: 700; font-size: 1.17rem; }
#top .pe-t { color: #000; font-weight: 700; font-size: 1.35rem; line-height: 1.2; }
#top .pe-d { color: #000; font-style: italic; font-size: 1.17rem; }
/* segnaposto immagini */
#top .ph-img { width: 100%; padding-bottom: 100%; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.16); border: 1px solid #ececec; box-sizing: border-box; }
#top .ph-land { padding-bottom: 60%; }
/* card "Save the date" al posto del grande placeholder della Prima edizione */
#top .en-savecard { display: block; width: 100%; height: auto; box-shadow: 0 3px 10px rgba(0,0,0,.16); }
#top .ph-tall { padding-bottom: 122%; }
#top .ph-sq { padding-bottom: 100%; }
#top .ph-gray { background: #dadada; }
#top .ph-cap { color: #000; font-size: 1rem; line-height: 1.25; margin-top: 9px; }
#top .tsm-en-gcol, #top .tsm-en-gtxtcol { margin-top: 22px; }
#top .tsm-en-thumbcol { margin-top: 18px; }
#top .tsm-en-gtxtcol .avia_textblock { color: #000; font-size: 1rem; line-height: 1.45; }
#top .tsm-en-gsep { border-left: 2px solid #e38c3c; }
#top .tsm-en-gsep .avia_textblock { padding-left: 10%; }
/* Eventi passati = blocco GRIGIO, sotto al giallo Notizie (invertiti). Niente piu'
   diagonale: stacco netto e dritto col giallo sopra. */
#top .tsm-en-eventi {
  background-color: #f1f1f1;
  margin-top: 0;
}
#top .tsm-en-eventi > .container { max-width: 100%; padding: 5vw 14% 6vw; }
#top .tsm-en-h2 .av-special-heading-tag, #top .nz-lbl { font-weight: 700; }
#top .tsm-en-h2 .av-special-heading-tag { color: #000; position: relative; padding-left: 18px; }
/* "Eventi passati": SOLO linea verticale 2px scura a fianco (no L), alta come il testo */
#top .tsm-en-h2 .av-special-heading-tag::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 0; border-left: 2px solid #1a1a1a; }
#top .tsm-en-cardcol { margin-top: 20px; }
/* Notizie e approfondimenti = blocco GIALLO dritto (stacco netto col grigio sopra),
   etichetta-tab in cima. Invertito con Eventi passati (prima notizie, poi eventi). */
#top .tsm-en-notizie { background-color: #fabd48; margin-top: 0; }
#top .tsm-en-notizie > .container { max-width: 100%; padding: 0 14% 6vw; }
#top .tsm-en-nzbox { margin-bottom: 6px; }
/* NOTIZIE: lati DRITTI verticali, BASE inclinata (top piatto); linea verticale 2px
   scura a fianco del testo; attaccata alla parte gialla sopra. */
#top .nz-lbl { display: inline-block; position: relative; background: #e38c3c; color: #fff; font-family: var(--tsm-font-cond); font-weight: 700; font-size: 1.3rem; line-height: 1.15; padding: 20px 70px 46px 46px; clip-path: polygon(0 0, 100% 0, 100% 52%, 0 100%); }
/* linea verticale "di pari passo" col testo (2 righe): parte all'altezza della 1a riga
   e finisce in fondo alla 2a, non piu' alta del testo. */
#top .nz-lbl::before { content: ""; position: absolute; left: 26px; top: 31px; height: 40px; border-left: 2px solid #1a1a1a; }
/* === SLIDER Eventi passati / Notizie (Enfold Content Slider, tipo curaperlapersona) === */
#top .tsm-en-slider .slide-entry-title { display: none !important; }   /* via il "Slide Title" di default */
#top .tsm-en-slider .slide-entry { padding: 0 9px; box-sizing: border-box; background: transparent !important; }
#top .tsm-en-slider .avia-image-container, #top .tsm-en-slider .avia-image-container .avia-image-container-inner { margin: 0 !important; }
#top .tsm-en-slider .avia-image-container img { width: 100% !important; max-width: 100% !important; display: block; aspect-ratio: 1 / 1.25; object-fit: cover; box-shadow: 0 3px 10px rgba(0,0,0,.16); }
#top .tsm-en-slider-nz .avia-image-container img { aspect-ratio: 1 / 1; }
#top .tsm-en-slider .slide-entry-excerpt { color: #000; font-size: 1.12rem; line-height: 1.35; margin-top: 12px; padding: 0 2px; text-align: center; }
#top .tsm-en-slider .slide-entry-excerpt p { margin: 0; color: #000; }
/* frecce slider ai LATI (come mockup < >), niente dots */
#top .tsm-en-slider .avia-content-slider { position: relative; }
#top .tsm-en-slider .avia-slideshow-dots { display: none !important; }
#top .tsm-en-slider .avia-slideshow-controls { position: static; }
#top .tsm-en-slider .avia-slideshow-controls a.prev-slide,
#top .tsm-en-slider .avia-slideshow-controls a.next-slide {
  position: absolute; top: 38%; transform: translateY(-50%); margin: 0; width: 38px; height: 52px; line-height: 52px; text-align: center;
  font-size: 2rem; background: transparent !important; border: 0 !important; color: #000 !important; box-shadow: none !important;
}
#top .tsm-en-slider .avia-slideshow-controls a.prev-slide { left: -3%; right: auto; }
#top .tsm-en-slider .avia-slideshow-controls a.next-slide { right: -3%; left: auto; }

/* frecce carosello (vecchio statico, non piu' usato) */
#top .tsm-en-carou { position: relative; }
#top .tsm-en-carou::before, #top .tsm-en-carou::after { position: absolute; top: 64%; font-size: 2.2rem; font-weight: 700; color: #000; line-height: 1; }
#top .tsm-en-carou::before { content: "\003C"; left: 4%; }
#top .tsm-en-carou::after { content: "\003E"; right: 4%; }
/* mobile pag.22 */
@media only screen and (max-width: 767px) {
  #top .tsm-en-prima { background-size: cover; }
  #top .tsm-en-prima > .container, #top .tsm-en-eventi > .container { padding: 9vw 6% 8vw; }
  #top .tsm-en-notizie > .container { padding: 0 6% 9vw; }
  #top .tsm-en-thumbcol, #top .tsm-en-cardcol { display: inline-block; width: 48%; vertical-align: top; }
  #top .tsm-en-carou::before, #top .tsm-en-carou::after { display: none; }
}

/* =========================================================================
   CONTATTI (pag. 24)
   Hero -> form esteso (campi + interessi + privacy) -> box RIFERIMENTI.
   ========================================================================= */
#top .tsm-co-hero {
  background-color: #ffffff;
  background-image: url("/wp-content/uploads/2026/06/co-hero.jpg?v=2");
  background-size: cover; background-repeat: no-repeat; background-position: center top;
  min-height: 51.35vw;
}
#top .tsm-co-form { background-color: #e8e8e8; margin-top: -3px; }
#top .tsm-co-form > .container { max-width: 100%; padding: 4vw 15% 0; }
/* form: titolo nascosto, label scure, campi pieni e bassi */
#top .tsm-co-form .avia_ajax_form .main_title, #top .tsm-co-form .avia_ajax_form h3:empty { display: none; }
#top .tsm-co-form .avia_ajax_form label { color: #000; font-weight: 400; margin-bottom: 4px; font-size: 1rem; }
#top .tsm-co-form .text_input { width: 100%; height: 34px; min-height: 34px; padding: 4px 12px; line-height: 1.3; box-sizing: border-box; }
#top .tsm-co-form .av-form-labelinput-wrapper { width: 100%; }
/* sottotitolo "Sono interessato a*" */
#top .tsm-co-form .av_contact_form_element.av_headline, #top .tsm-co-form .avia_ajax_form .av-headline { color: #000; font-weight: 700; margin: 14px 0 6px; font-size: 1.05rem; }
/* checkbox interessi: in colonna, label scure (>=1rem), righe ravvicinate */
#top .tsm-co-form .av_checkbox label, #top .tsm-co-form .av-custom-checkbox label,
#top .tsm-co-form .avia_ajax_form p:has(input[type="checkbox"]) label { color: #000; font-weight: 400; font-size: 1rem; }
/* eccezione: SOLO l'ultima checkbox (informativa privacy) un filo piu piccola */
#top .tsm-co-form .avia_ajax_form p.form_element:last-of-type label { font-size: .9rem; }
/* "Sono interessato a*:" a SINISTRA, lista checkbox a DESTRA (come mockup) */
/* "Sono interessato a*:" stretto sul testo, abbassato per ALLINEARSI alla 1a checkbox;
   checkbox subito di seguito (poco distanti), non spinte a destra. */
#top .tsm-co-form .avia_ajax_form .av-form-headline { float: left; width: 16%; text-align: left; padding-right: 0; margin: 6px 0 0; box-sizing: border-box; font-size: 1.05rem; position: relative; top: 22px; }
#top .tsm-co-form .avia_ajax_form .form_element:has(input.input_checkbox):not(.av-last-visible-form-element) { margin-left: 17%; width: 83%; margin-bottom: 3px; box-sizing: border-box; }
/* Campo "Specifica" (compare quando spunti "Altro, specificare"): stessa colonna delle
   checkbox (17%/83%), allineato SOTTO la checkbox che lo attiva, NON a tutta larghezza
   sulla sinistra. Marcato con .tsm-co-specifica da js/contatti.js (i due .form_element
   hanno classi identiche e non sarebbero distinguibili via solo CSS). */
#top .tsm-co-form .avia_ajax_form .form_element.tsm-co-specifica { margin-left: 17%; width: 83%; box-sizing: border-box; }
#top .tsm-co-form .avia_ajax_form .av-last-visible-form-element { clear: both; padding-top: 12px; }

/* TUTTI i moduli di contatto: meno spazio verticale tra gli elementi */
#top .avia_ajax_form .form_element { margin-bottom: 9px; }
#top .avia_ajax_form label { margin-bottom: 3px; }
#top .tsm-co-form .avia_ajax_form p.form_element:has(input[type="checkbox"]) { margin-top: 4px; margin-bottom: 4px; }
/* pulsante INVIA RICHIESTA arancione */
#top .tsm-co-form input.button[type="submit"], #top .tsm-co-form .avia_ajax_form .button {
  background: var(--tsm-orange) !important; border: none !important; color: #fff !important; padding: 11px 36px; box-shadow: none; text-shadow: none; width: auto; display: inline-block;
}
/* box RIFERIMENTI: SOLO il bordo superiore inclinato (verso il basso), bordo
   inferiore DRITTO, a tutta larghezza e INCOLLATO al footer (niente sotto). */
/* riferimenti: NON a tutta larghezza -> poco piu' largo dei campi del modulo (74vw,
   centrato = ~13%..87%, contro 15%..85% dei campi). */
#top .tsm-co-rif { margin: 34px 0 0; position: relative; left: 50%; margin-left: -37vw; width: 74vw; }
#top .tsm-co-rif .avia_textblock { display: flex; gap: 4%; align-items: flex-start; background: #e38c3c; clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%); padding: 60px 5% 40px; color: #000; font-size: 1.3rem; line-height: 1.5; }
#top .tsm-co-rif .rif-lbl { flex: 0 0 18%; color: #fff; font-weight: 700; font-size: 1.4rem; letter-spacing: .3px; }
#top .tsm-co-rif .rif-c1 { flex: 1.2; padding-right: 4%; }
#top .tsm-co-rif .rif-c2 { flex: 1; border-left: 1px solid rgba(255,255,255,.5); padding-left: 5%; }
#top .tsm-co-rif strong { color: #000; font-weight: 700; }
/* mobile pag.24 */
@media only screen and (max-width: 767px) {
  #top .tsm-co-form > .container { padding: 9vw 6% 9vw; }
  /* riferimenti: su mobile Enfold annulla il margin-left:-37vw ma resta left:50% ->
     il box sforava a destra (testo tagliato). Lo riporto in flusso a tutta larghezza. */
  #top .tsm-co-rif { position: static !important; left: auto !important; right: auto !important; margin: 26px 0 0 !important; width: 100% !important; }
  #top .tsm-co-rif .avia_textblock { flex-direction: column; gap: 14px; clip-path: none; padding: 26px 7%; word-break: break-word; }
  #top .tsm-co-rif .rif-c2 { border-left: 0; padding-left: 0; }
}
/* mobile pag.21 */
@media only screen and (max-width: 767px) {
  #top .tsm-ca-mid { background-size: cover; }
  #top .tsm-ca-mid > .container { padding: 9vw 6% 10vw; }
  #top .tsm-ca-colL, #top .tsm-ca-colR { margin-top: 26px; }
  #top .tsm-ca-colR { border-left: 0; padding-left: 0; }
}


/* ===================== ROUND 7 — rifiniture uniformi ===================== */
/* team: galleria a griglia (foto segnaposto quadrata + didascalia Nome/Titolo) */
/* foto team: ombra DECISA come nel mockup */
#top .tm-photo-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; box-shadow: 0 9px 20px rgba(0,0,0,.4); }

/* etichette "ad angolo": alzate (~30px) e non incollate in basso */
#top .tsm-sa-lblcol, #top .tsm-ca-lblcol, #top .tsm-cs-lblcol, #top .tsm-en-evlblcol { top: -2vw; }

/* certificazione: separatori a puntini PIU' GRANDI e PIU' DIRADATI (radial-gradient) */
#top .tsm-lc-content .tsm-rsep.tsm-txt-col .avia_textblock { border-top: 0 !important; background-image: radial-gradient(circle, rgba(0,0,0,.5) 2.3px, transparent 2.7px); background-size: 16px 6px; background-repeat: repeat-x; background-position: left top; padding-top: 12px; }
/* linea puntinata centrata tra i due testi: sta sul bordo SUPERIORE del textblock, quindi
   sopra agiva il column-top-margin Enfold (50px) + margine <p> (~18.5) = ~68px, sotto solo
   padding 30 + margine <p> = ~49px -> sbilanciata in alto. Pareggio: column-top-margin e
   padding-top entrambi a 12px -> gap SIMMETRICO (~30px sopra e sotto) e molto piu' contenuto. */
#top .tsm-lc-content .column-top-margin { margin-top: 12px; }

/* come aderire: rettangoli piu' larghi (il 2o di piu'); testo bollino non sulla linea; divisore a puntini */
#top .tsm-ca-colL .tsm-tab.tsm-tab-flat { padding-left: 34px !important; padding-right: 34px !important; }
#top .tsm-ca-colR .tsm-tab.tsm-tab-flat { padding-left: 54px !important; padding-right: 54px !important; }
#top .tsm-ca-colL .avia_textblock { padding-right: 8%; }
#top .tsm-ca-colR { border-left: 0 !important; background-image: radial-gradient(circle, rgba(255,255,255,.85) 2.3px, transparent 2.7px); background-size: 6px 16px; background-repeat: repeat-y; background-position: left top; }

/* linee verticali / L: spessore uniforme 3px; verticali scure al 70% di opacita' */
/* barre verticali / L: +1px su tutto il sito -> 4px */
#top .tsm-en-h2 .av-special-heading-tag::before { border-left: 4px solid rgba(26,26,26,.7) !important; }
#top .nz-lbl::before { border-left: 4px solid rgba(26,26,26,.7) !important; }
/* IL TEAM + prima edizione: SOLO linea verticale (niente L), 4px (era 3) */
#top .tsm-cs-teamlbl .av-special-heading-tag::before, #top .tsm-en-pehead .avia_textblock::before { width: 0 !important; border-bottom: 0 !important; border-left: 4px solid #e38c3c !important; }
/* team intro (lorem ipsum): L COMPLETA (linea verticale + piede), 4px; braccio orizzontale
   RADDOPPIATO (45->90px). Stesso spazio VISIVO sotto e a sinistra del testo: il piede e' a
   filo del box (bottom:0) e padding-bottom e' 8px (non 28 come a sinistra) perche' l'interlinea
   1.5 aggiunge gia' ~24px di spazio sotto l'ultima riga -> gap reali ~29px (sx) vs ~33px (giu). */
#top .tsm-cs-teamintro .avia_textblock::before { width: 90px !important; border-left: 4px solid #e38c3c !important; border-bottom: 4px solid #e38c3c !important; }
/* chi siamo box: L con orizzontale ~x3 + padding testo dalla L (come dal lato verticale) */
/* L dei box: ENTRAMBE color giallo dello sfondo globale dell'area (#fabd48), spessore 4px (era 3) */
#top .tsm-cs-box .bx-txt::before { width: 80px !important; border-left: 4px solid #fabd48 !important; border-bottom: 4px solid #fabd48 !important; }
#top .tsm-cs-box .bx-txt { padding-bottom: 22px; }
/* chi siamo box1 (arancio) PIU' ALTO: la diagonale (clip-path 0 34%) tagliava in alto a
   sinistra l'etichetta "UNA CULTURA..."; piu' padding-top -> il contenuto scende e libera
   la diagonale (come nel mockup, box piu' alto). */
#top .tsm-cs-box1 .avia_textblock { padding-top: 84px; padding-bottom: 44px; }
/* box1: il testo introduttivo (non bold) e' BIANCO, il bold resta scuro (come nel mockup) */
#top .tsm-cs-box1 .bx-txt { color: #fff; }
#top .tsm-cs-box1 .bx-txt strong { color: #000; }

/* 2a riga certificazioni (box "LE CERTIFICAZIONI DI EIKON"): logo EPHMRA — EcoVadis,
   dentro la stessa L del .bx-txt; il trattino separa le 2 come nella riga sopra. */
#top .tsm-cs-box .bx-txt .cert-r2 { display: inline-block; margin-top: 12px; line-height: 1.1; }
#top .tsm-cs-box .bx-txt .cert-ephmra { height: 2.7em; width: auto; vertical-align: middle; margin-right: 2px; }
/* footer: logo EPHMRA in linea, per ultimo; raddoppiato (era 26px) */
#top #footer .foot-ephmra { height: 52px; width: auto; vertical-align: middle; margin: 0 0 2px 4px; }

/* eventi: "Consegna delle certificazioni" piu' vicina al confine di colore */
#top .tsm-en-gsep .avia_textblock { padding-left: 4%; }
/* eventi: etichetta NOTIZIE piu' alta/spessa e attaccata al giallo sopra */
#top .nz-lbl { padding: 28px 70px 58px 50px; }
#top .tsm-en-nzbox { position: relative; z-index: 3; }

/* contatti: "Sono interessato" allineato a SINISTRA (punto naturale) */
#top .tsm-co-form .avia_ajax_form .av-form-headline { text-align: left !important; padding-right: 0 !important; }
/* riferimenti: NIENTE linea verticale bianca (non e' nel mockup) */
#top .tsm-co-rif .rif-c2 { border-left: 0 !important; }

/* chi siamo EIKON: immagine gold-only (senza il bianco in fondo, che con il
   background-color creava la striscia gialla e portava il 2o box sul bianco).
   Il bg-color #fabd48 = stesso oro, quindi i box stanno su oro uniforme; il bianco
   (IL TEAM) parte pulito dopo il 2o box. */
#top .tsm-cs-eikon { background-image: url("/wp-content/uploads/2026/06/cs-eikon-gold.jpg") !important; }
#top .tsm-cs-eikon > .container { padding-bottom: 3vw !important; }

/* notizie: tocca davvero il giallo sopra */
/* etichetta "Notizie e approfondimenti": lato SUPERIORE inchiodato al confine grigio/giallo
   (top della sezione) a QUALSIASI risoluzione -> nessun offset in vw, label a top sezione. */
#top .tsm-en-nzbox { margin-top: 0 !important; }
#top .tsm-en-nzbox .avia_textblock { margin: 0 !important; }
/* la sezione ha padding='large' -> .template-page ha 70px di padding-top fisso che
   spingeva giu' l'etichetta: azzerato (solo qui) cosi' il lato superiore combacia col
   confine. Lo spazio sotto l'etichetta lo da' il padding-bottom del rettangolo stesso. */
#top .tsm-en-notizie .template-page { padding-top: 0 !important; }

/* pagine legali (Privacy ecc.): testo leggibile, larghezza giusta, titoli di sezione */
#top .tsm-legal { max-width: 900px; margin: 0 auto; padding: 1vw 0 3vw; }
#top .tsm-legal p, #top .tsm-legal li { font-size: 1.12rem; line-height: 1.65; color: #333; }
#top .tsm-legal p { margin: 0 0 1em; text-align: justify; }
#top .tsm-legal h2 { font-size: 1.18rem; font-weight: 700; color: #000; margin: 1.7em 0 .5em; letter-spacing: .3px; }
#top .tsm-legal ul { margin: 0 0 1.1em 1.4em; list-style: disc; }
#top .tsm-legal li { margin: 0 0 .4em; }
#top .tsm-legal a { color: var(--tsm-orange); }
#top .tsm-legal strong, #top .tsm-legal b { font-weight: 700; color: #000; }


/* =========================================================================
   RIFINITURE MOBILE (<=767px) — coerenza e leggibilita' su telefono.
   Messe in fondo cosi' vincono per ordine di sorgente dove serve.
   ========================================================================= */
@media only screen and (max-width: 767px) {
  /* FOOTER (globale, tutte le pagine): le 3 colonne non devono restare affiancate e
     strette (testo spezzato "La certificaz/ione", una parola per riga): impilate a
     tutta larghezza. Selettore forte (#top #footer) per battere le larghezze di Enfold. */
  #top #footer .flex_column { width: 100% !important; max-width: 100% !important; margin: 0 0 24px !important; float: none !important; clear: both !important; }
  #top #footer .flex_column:last-child { margin-bottom: 0 !important; }

  /* HOME sezione "Una certificazione scientifica": il testo non resta schiacciato nel
     54% sinistro (righe cortissime) ma usa quasi tutta la larghezza. */
  #top .tsm-cert .flex_column { width: 90% !important; }

  /* COME ADERIRE: le due colonne "Ottieni il bollino" (colL ~35%, solo 116px) e
     "Su richiesta puoi accedere a" (colR ~65%) restano affiancate e strette su mobile:
     le impilo a tutta larghezza. */
  #top .tsm-ca-colL, #top .tsm-ca-colR { width: 100% !important; max-width: 100% !important; display: block !important; float: none !important; clear: both !important; }
}

/* ===================== ROUND 8 — modifiche 13/06/2026 ===================== */
/* SETTORI: il blocco "settore selezionato" (oro) + la diagonale compaiono SOLO dopo
   il primo clic su un settore. Default = nascosti; al primo clic js/settori.js mette
   la classe .tsm-sel-open su #top (e da li' in poi non la toglie). */
#top.tsm-sel-open .tsm-sa-gray { background-image: url("/wp-content/uploads/2026/06/sa-gray.jpg"); background-size: 100% 100%; min-height: 46.72vw; }
#top.tsm-sel-open .tsm-sa-sel { display: block; }

/* SETTORI: nota esplicativa (tra i due riquadri-statistica e la linea divisoria).
   Nel frontend nessuna etichetta: solo il testo, e nulla se non compilata. */
#top .tsm-sel-notawrap { margin: 8px 0 2px; }
#top .tsm-sel-notawrap .avia_textblock { margin: 0 !important; }
#top .tsm-sel-nota { color: #000; font-size: 1.12rem; line-height: 1.5; }
#top .tsm-sel-nota:empty { display: none; }

/* SETTORI: etichetta "Le N aziende certificate:" sopra l'elenco aziende. */
#top .tsm-azcount { color: #000; font-weight: 700; font-size: 1.2rem; line-height: 1.3; margin: 4px 0 2px; }
#top .tsm-azcount:empty { display: none; }

/* PAGINA "Approfondimenti" (slug approfondimenti; In evidenza, riquadro 2): i Reel
   Instagram, centrati nella riga (stesso schema robusto di .tsm-spk-grid). */
#top .tsm-vid-sec { background-color: #ffffff; }
#top .tsm-vid-sec > .container { max-width: 1120px; padding: 4vw 4% 6vw; }
#top .tsm-vid-sec .entry-content-wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 36px; }
#top .tsm-vid-sec .entry-content-wrapper::before,
#top .tsm-vid-sec .entry-content-wrapper::after { content: none; display: none; }
#top .tsm-vid-sec .flex_column.tsm-vid-cell { float: none; width: auto; max-width: 100%; margin: 26px 0 0; }
/* Reel Instagram "puliti": l'embed di IG mostra header (profilo/Segui) e barra
   like/commenti che NON vogliamo. L'iframe (creato da js/approfondimenti.js) viene reso a
   340px di larghezza, dove l'embed ha header ~50px in alto e l'area video ~430px: lo teniamo
   a 340px e lo ritagliamo in una finestra 340x430 spostandolo in alto (top -52px), cosi' si
   vede SOLO il video. Se Instagram cambia layout, basta ritoccare top/height qui sotto. */
#top .tsm-vid-embed { position: relative; width: 340px; max-width: 100%; height: 430px; overflow: hidden; border-radius: 4px; background: #efefef; }
#top .tsm-vid-ig { position: absolute; top: -52px; left: 50%; transform: translateX(-50%); width: 340px; height: 700px; border: 0; }

/* PAGINA "I protagonisti": griglia di card speaker (immagini verticali 9:16, gia' complete
   di nome/ruolo nell'immagine: nessuna didascalia aggiunta). 3 per riga, centrate. Le righe
   incomplete (1-2 card: per numero dispari o per finestra/risoluzione ridotta) restano
   centrate e spaziate come le righe da 3, grazie a flex-wrap + justify-content:center. */
#top .tsm-spk-sec { background-color: #ffffff; }
#top .tsm-spk-sec > .container { max-width: 100%; padding: 4vw 6% 6vw; }
#top .tsm-spk-grid.flex_column {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 28px; max-width: 1180px; margin-left: auto; margin-right: auto; float: none;
}
/* il clearfix di Enfold su .flex_column (::before/::after) diventerebbe un flex-item
   fantasma in testa e spingerebbe la 3a card a capo: va neutralizzato. */
#top .tsm-spk-grid.flex_column::before,
#top .tsm-spk-grid.flex_column::after { content: none; display: none; }
#top .tsm-spk-grid .tsm-spk-card {
  /* 60 (non 56) = ~4px di slack sul totale riga: evita che il rounding sub-pixel
     mandi 3 card -> 2 per riga. La riga resta centrata, lo scarto e' impercettibile. */
  flex: 0 0 calc((100% - 60px) / 3); max-width: calc((100% - 60px) / 3);
  margin: 0; padding: 0;
}
#top .tsm-spk-grid .tsm-spk-card .avia-image-container-inner,
#top .tsm-spk-grid .tsm-spk-card img {
  width: 100%; max-width: 100%; height: auto; display: block; margin: 0; border-radius: 6px;
}
/* 2 per riga su schermi medi, 1 su mobile: sempre centrate (stessa logica) */
@media only screen and (max-width: 989px) {
  #top .tsm-spk-grid.flex_column { gap: 22px; }
  #top .tsm-spk-grid .tsm-spk-card { flex-basis: calc((100% - 26px) / 2); max-width: calc((100% - 26px) / 2); }
}
@media only screen and (max-width: 600px) {
  #top .tsm-spk-grid .tsm-spk-card { flex-basis: min(82vw, 340px); max-width: min(82vw, 340px); }
}
/* (i 2 Reel su mobile vanno a capo e restano centrati da soli, grazie al flex-wrap sopra) */