/*
	Theme Name:   Tekno Net System
	Theme URI:    https://teknonetsystem.it
	Description:  Tema figlio di Hello Elementor per Tekno Net System. Contiene il livello di design "Segnale": palette del marchio, texture di rete, tracce di luce. Tutto il CSS del sito e qui sotto, modificabile da Aspetto > Editor file dei temi.
	Author:       Tekno Net System
	Template:     hello-elementor
	Version:      1.0.0
	License:      GNU General Public License v3 or later
	License URI:  https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain:  tns
*/

/* ============================================================================
   TNS — Livello di design "Segnale"
   Palette e forme derivate dal marchio: esagono di nodi, traccia in fibra.
   ========================================================================= */

:root {
	/* --- marchio ------------------------------------------------------- */
	--tns-indigo:      #283078; /* esagono del logo                        */
	--tns-azure:       #0E8ECF; /* la parola "Net" — icone, bordi, grafica */
	--tns-cyan:        #3FC8F5; /* accento segnale / velocita, su scuro    */
	--tns-deep:        #111A3D; /* fondo scuro                             */
	--tns-night:       #0B1230; /* fondo scuro profondo                    */

	/* L'azure del marchio sta a 3,63:1 sul bianco: regge icone e bordi
	   (soglia 3:1) ma non il testo (4,5:1). Per il TESTO su fondo chiaro
	   e per i pulsanti pieni si usa questa variante, 5,18:1.              */
	--tns-azure-deep:  #0A73AB;

	/* --- neutri (dal wordmark) ----------------------------------------- */
	--tns-ink:         #1B2438;
	--tns-slate:       #5A6478;
	--tns-slate-2:     #404B6B;
	--tns-on-dark:     #AFC0E8;
	--tns-muted:       #666E82; /* 5,1:1 sul bianco: le label sono piccole */
	--tns-line:        #DDE3EF;
	--tns-paper:       #F5F7FC;

	/* --- profondita: ombre a strati, mai una sola ombra piatta ---------- */
	--tns-sh-1: 0 1px 2px rgba(17,26,61,.06), 0 2px 8px rgba(17,26,61,.04);
	--tns-sh-2: 0 2px 4px rgba(17,26,61,.05), 0 8px 24px rgba(17,26,61,.07);
	--tns-sh-3: 0 4px 8px rgba(17,26,61,.06), 0 18px 48px rgba(17,26,61,.12);
	--tns-glow: 0 0 0 1px rgba(63,200,245,.28), 0 12px 44px rgba(14,142,207,.28);

	/* Nessuna variabile di raggio: il sito e a spigolo vivo, vedi sezione 0. */
	--tns-ease: cubic-bezier(.22,.61,.36,1);
}


/* maglia esagonale del marchio, usata come texture di fondo */
:root {
	--tns-mesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='200' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23AFC8FF' stroke-width='.7'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34'/%3E%3C/g%3E%3Cg fill='%2358D2F5'%3E%3Ccircle cx='28' cy='34' r='1.9'/%3E%3Ccircle cx='0' cy='16' r='1.4'/%3E%3Ccircle cx='56' cy='84' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}


/* ============================================================================
   0. Angoli morbidi ovunque: raggio 6px
   Elementor scrive il raggio per-elemento (--border-radius sui contenitori,
   border-radius diretto su pulsanti e widget) con selettori a tre classi:
   una sola regola con !important li uniforma tutti a 6px senza toccare i dati
   delle 13 pagine, quindi la scelta resta reversibile cancellando questo blocco.
   ATTENZIONE: il valore deve portare l'unita. Scritto "6" invece di "6px" e'
   una dichiarazione invalida e il browser scarta l'intera regola.
   ========================================================================= */

.elementor,
.elementor *,
.elementor *::before,
.elementor *::after,
.xpro-theme-builder-header {
	border-radius: 6px !important;
}

/* i contenitori leggono il raggio da una variabile: va impostata anche quella,
   altrimenti riaffiora negli stati che la rileggono (hover, sticky, popup) */
.elementor .e-con,
.elementor .e-con-inner,
.elementor .elementor-element {
	--border-radius: 6px !important;
}

/* Eccezione: i sei pastiglioni tondi (3 in home, 3 in verifica-copertura)
   devono restare cerchi, il raggio uniforme li ridurrebbe a quadrotti. */
.elementor .elementor-element-8b75b2a,
.elementor .elementor-element-c87f557,
.elementor .elementor-element-8d430e8,
.elementor .elementor-element-1bd9bc1,
.elementor .elementor-element-cddc54d,
.elementor .elementor-element-3c74be9 {
	border-radius: 50% !important;
	--border-radius: 50% !important;
}

/* La testata occupa tutta la larghezza: arrotondarne gli angoli lascerebbe due
   tacche sui bordi dello schermo, quindi resta viva. Pulsanti e riquadri che
   stanno dentro prendono comunque i 6px dalla regola sopra.
   Il piede NON e piu avvolto da .xpro-theme-builder-footer — verificato il
   22 ago 2026: quella classe non compare piu nella pagina, mentre quella della
   testata si. Il selettore del piede e stato tolto da qui e dalla regola dei
   6px perche non agganciava piu niente. */
.xpro-theme-builder-header {
	border-radius: 0 !important;
}

/* I pulsanti, per essere espliciti: stesso raggio di tutto il resto. */
.elementor .elementor-button,
.elementor button,
.elementor input[type="submit"],
.elementor .xpro-contact-form-submit-button,
.tns-btn-primary,
.tns-btn-ghost {
	border-radius: 6px !important;
}


/* ============================================================================
   1. Fondamenta tipografiche
   Archivo per i titoli, Manrope per il corpo, JetBrains Mono per il registro
   tecnico. I livelli restano governati dal Kit: qui rifinisco solo il ritmo.
   ========================================================================= */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #fff;
}

/* I titoli grandi respirano meglio con tracking negativo e interlinea corta */
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title {
	letter-spacing: -.022em;
	line-height: 1.08;
	text-wrap: balance;
}

.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title {
	letter-spacing: -.014em;
	line-height: 1.22;
	text-wrap: balance;
}

.elementor-widget-text-editor {
	line-height: 1.68;
	text-wrap: pretty;
}

/* Larghezza di lettura: oltre i ~70 caratteri l'occhio perde la riga */
.tns-measure .elementor-widget-text-editor,
.tns-measure p {
	max-width: 64ch;
}


/* ----------------------------------------------------------------------------
   Occhiello — il segnale tipografico piu identitario del sito.
   Mono maiuscolo spaziato, senza trattino: e la spaziatura a fare il lavoro.
   -------------------------------------------------------------------------- */

.tns-eyebrow .elementor-heading-title {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
	font-size: clamp(11px, .78vw, 12.5px) !important;
	font-weight: 500 !important;
	letter-spacing: .17em !important;
	text-transform: uppercase;
	line-height: 1.5;
	display: inline-block;
}

/* Nelle sezioni scure l'occhiello e cyan, su chiaro resta azure */
.tns-section--dark .tns-eyebrow .elementor-heading-title { color: var(--tns-cyan) !important; }


/* ============================================================================
   2. Traccia di luce — il dispositivo "alta velocita"
   Una linea sottile attraversata lentamente da un impulso, come un segnale
   che percorre la fibra. Usata come divisorio e sul bordo delle schede.
   ========================================================================= */

.tns-trace {
	position: relative;
	height: 1px;
	overflow: hidden;
	background: linear-gradient(90deg, transparent, var(--tns-line) 22%, var(--tns-line) 78%, transparent);
}

.tns-section--dark .tns-trace {
	background: linear-gradient(90deg, transparent, rgba(175,192,232,.24) 22%, rgba(175,192,232,.24) 78%, transparent);
}

.tns-trace::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 28%;
	background: linear-gradient(90deg, transparent, var(--tns-cyan), transparent);
	transform: translateX(-140%);
	animation: tns-run 6.5s var(--tns-ease) infinite;
}

@keyframes tns-run {
	0%        { transform: translateX(-140%); }
	55%, 100% { transform: translateX(460%); }
}


/* ============================================================================
   3. Hero — profondita a strati: fondo, alone, maglia di rete, sfumatura
   ========================================================================= */

.tns-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(74% 96% at 82% -8%, rgba(63,200,245,.20), transparent 58%),
		radial-gradient(62% 78% at 8% 8%,  rgba(40,48,120,.62), transparent 62%),
		linear-gradient(158deg, var(--tns-night) 0%, var(--tns-deep) 48%, #17235C 100%);
}

/* maglia esagonale del marchio */
.tns-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--tns-mesh);
	background-size: 112px 200px;
	opacity: .17;
	-webkit-mask-image: radial-gradient(78% 92% at 72% 12%, #000 12%, transparent 74%);
	        mask-image: radial-gradient(78% 92% at 72% 12%, #000 12%, transparent 74%);
}

/* scie diagonali: due fasci di luce che suggeriscono la fibra */
.tns-hero::after {
	content: "";
	position: absolute;
	inset: -30% -10%;
	z-index: -1;
	background: repeating-linear-gradient(
		107deg,
		transparent 0 88px,
		rgba(63,200,245,.085) 88px 89px,
		transparent 89px 210px
	);
	-webkit-mask-image: radial-gradient(60% 70% at 78% 8%, #000, transparent 72%);
	        mask-image: radial-gradient(60% 70% at 78% 8%, #000, transparent 72%);
	animation: tns-drift 22s linear infinite;
}

@keyframes tns-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-210px, 0, 0); }
}

/* Spente dove i filamenti veri ci sono davvero — gli hero marcati
   tns-hero--fx (home dal 31 lug 2026, contatti dal 1 ago): due volte la
   stessa idea nella stessa sezione, una per accenno con righe dritte e una
   per davvero, si davano fastidio. L'hero di guide-e-documenti porta solo
   .tns-hero: li le scie restano l'unico accenno alla fibra e non si toccano. */
.tns-hero--fx::after { display: none; }

/* Hero basso: 500px invece dei 72vh della home, perche su contatti subito
   sotto c'e il form e non deve toccare scorrere per arrivarci. L'altezza
   minima sta nel contenitore (Elementor), qui si stringe solo il padding:
   il ritmo generale di .tns-section arriva a 122px per lato e da solo
   sfonderebbe la misura. Il contenuto e centrato in verticale, lo spazio
   ce l'ha comunque.
   Due classi nel selettore, non una: .tns-section ha la stessa specificita
   di .tns-hero--short ed e scritta piu avanti nel file, quindi a parita
   vincerebbe lei. Sotto i 768px non si tocca niente: li il testo va a capo
   e i 500px se li mangia il contenuto. */
@media (min-width: 768px) {
	.tns-hero.tns-hero--short { padding-block: 40px !important; }
}

/* Rete di nodi animata. Il canvas lo crea assets/tns-rete-fx.js dopo il
   caricamento della pagina, quindi questa regola resta inerte finche non
   c'e nulla da vestire: l'HTML di Elementor non viene toccato.
   Ordine di stampa nell'hero: maglia esagonale (-2) < filamenti (-2, ma
   dopo la maglia nell'albero) < scie e rete di nodi (-1) < contenuto. */
.tns-hero > .tns-rete-fx {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;

	/* Come la maglia: la trama si concentra in alto a destra e si spegne
	   sulla colonna del testo. Togli la maschera per averla piena. */
	-webkit-mask-image: radial-gradient(88% 104% at 74% 16%, #000 22%, transparent 78%);
	        mask-image: radial-gradient(88% 104% at 74% 16%, #000 22%, transparent 78%);
}

/* Filamenti di fibra. Un solo canvas per tutta la pagina, creato da
   assets/tns-fibre-fx.js e spostato fra hero e pannello di chiusura secondo
   dove si sta guardando: le due regole qui sotto sono i suoi due vestiti, e
   quella giusta la sceglie il genitore. Vedi anche la sezione 11. */
.tns-hero   > .tns-fibre-fx,
.tns-cta    > .tns-fibre-fx,
.tns-banner > .tns-fibre-fx,
.tns-cta    > .tns-rete-fx,
.tns-banner > .tns-rete-fx {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
	width: 100%;
	pointer-events: none;
}

/* Nell'hero e solo la fascia bassa, sotto la rete di nodi. Il livello -2 lo
   dice a chiare lettere: cosi l'ordine non dipende da quale dei due script
   infila il proprio canvas per primo. */
.tns-hero > .tns-fibre-fx {
	top: auto;
	height: 46%;
	z-index: -2;
	opacity: .78;

	/* i filamenti affiorano dal fondo invece di iniziare con un taglio netto */
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 44%);
	        mask-image: linear-gradient(180deg, transparent 0%, #000 44%);
}

/* chiusura morbida verso la sezione seguente */
.tns-hero > .e-con-inner::after,
.tns-hero::marker { content: none; }

.tns-hero .elementor-widget-text-editor { color: var(--tns-on-dark); }

/* Il titolo dell'hero e l'elemento piu grande del sito: merita una scala propria */
.tns-hero .tns-display .elementor-heading-title {
	font-size: clamp(2.15rem, 5.1vw, 4.05rem) !important;
	line-height: 1.03 !important;
	letter-spacing: -.032em !important;
}

/* "fibra ottica vera" — sfumatura sulle parole chiave marcate con <em> */
.tns-display .elementor-heading-title em {
	font-style: normal;
	background: linear-gradient(96deg, var(--tns-cyan), #8FE3FF 46%, var(--tns-azure));
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
}


/* ============================================================================
   4. Ritmo delle sezioni
   ========================================================================= */

.tns-section        { padding-block: clamp(64px, 8.4vw, 122px) !important; }
.tns-section--tight { padding-block: clamp(44px, 5.2vw, 72px) !important; }

/* La home e una sequenza lunga di sezioni corte: li il respiro di default
   allontana troppo i blocchi. Ritmo piu serrato solo in prima pagina. */
.home .tns-section        { padding-block: clamp(44px, 5.4vw, 78px) !important; }
.home .tns-section--tight { padding-block: clamp(30px, 3.4vw, 48px) !important; }

.tns-section--dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(168deg, var(--tns-deep), var(--tns-night)) !important;
}

.tns-section--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--tns-mesh);
	background-size: 112px 200px;
	opacity: .10;
	-webkit-mask-image: radial-gradient(70% 100% at 88% 0%, #000, transparent 70%);
	        mask-image: radial-gradient(70% 100% at 88% 0%, #000, transparent 70%);
}

.tns-section--dark .elementor-widget-text-editor { color: var(--tns-on-dark); }


/* ============================================================================
   5. Schede — profondita per alone, non per bordo
   ========================================================================= */

.tns-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--tns-line) !important;
	box-shadow: var(--tns-sh-1);
	transition: transform .42s var(--tns-ease), box-shadow .42s var(--tns-ease), border-color .42s var(--tns-ease);
	overflow: hidden;
}

/* filo di luce sul bordo superiore, si accende al passaggio */
.tns-card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--tns-azure), var(--tns-cyan), transparent);
	opacity: 0;
	transform: scaleX(.35);
	transition: opacity .42s var(--tns-ease), transform .42s var(--tns-ease);
}

.tns-card:hover {
	transform: translateY(-5px);
	border-color: rgba(14,142,207,.34) !important;
	box-shadow: var(--tns-sh-3);
}

.tns-card:hover::before { opacity: 1; transform: scaleX(1); }

/* La scheda in evidenza: fondo notte e alone cyan, cosi la griglia ha un fuoco */
.tns-card--featured {
	background: linear-gradient(166deg, #1A2455, var(--tns-night)) !important;
	border-color: rgba(63,200,245,.30) !important;
	box-shadow: var(--tns-glow);
}

.tns-card--featured::before { opacity: 1; transform: scaleX(1); }

.tns-card--featured .elementor-heading-title { color: #fff !important; }
.tns-card--featured .elementor-widget-text-editor { color: var(--tns-on-dark) !important; }
.tns-card--featured:hover { transform: translateY(-7px); }

/* dentro la scheda scura il prezzo e l'etichetta di tecnologia restano cyan,
   altrimenti la regola bianca qui sopra appiattirebbe tutta la gerarchia */
.tns-card--featured .tns-price .elementor-heading-title,
.tns-card--featured .tns-tier  .elementor-heading-title { color: var(--tns-cyan) !important; }

.tns-card--featured .tns-note .elementor-heading-title { color: var(--tns-on-dark) !important; }

/* il pulsante secondario deve reggere il fondo scuro */
.tns-card--featured .tns-btn-ghost--light .elementor-button {
	border-color: rgba(175,192,232,.4) !important;
	color: #fff !important;
}

.tns-card--featured .tns-btn-ghost--light .elementor-button:hover {
	background: rgba(255,255,255,.09) !important;
	border-color: var(--tns-cyan) !important;
	color: #fff !important;
}

/* etichetta di tecnologia (FTTH, FTTC, FWA): registro tecnico, mono spaziato */
.tns-tier .elementor-heading-title {
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase;
}

@media (min-width: 1025px) {
	.tns-card--featured { transform: scale(1.035); }
	.tns-card--featured:hover { transform: scale(1.035) translateY(-7px); }
}


/* etichetta "PIU SCELTA" */
.tns-badge .elementor-heading-title {
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	letter-spacing: .13em !important;
	text-transform: uppercase;
	padding: 6px 11px;
	background: linear-gradient(96deg, var(--tns-cyan), #7FDCFF);
	color: var(--tns-night) !important;
	box-shadow: 0 4px 14px rgba(63,200,245,.4);
}


/* ============================================================================
   6. Numeri e prezzi — il dato deve pesare piu della didascalia
   ========================================================================= */

.tns-stat-value .elementor-heading-title {
	font-size: clamp(2rem, 3.5vw, 3rem) !important;
	line-height: 1 !important;
	letter-spacing: -.036em !important;
	/* il gradiente si ferma sull'azure: spingendolo fino al cyan l'estremo
	   chiaro scenderebbe a 1,95:1 sul bianco, sotto il 3:1 del testo grande */
	background: linear-gradient(148deg, var(--tns-indigo), var(--tns-azure));
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent !important;
}

.tns-stat-label .elementor-heading-title {
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	font-size: 11.5px !important;
	letter-spacing: .1em !important;
	text-transform: uppercase;
	color: var(--tns-muted) !important;
}

.tns-price .elementor-heading-title {
	font-size: clamp(1.9rem, 2.7vw, 2.5rem) !important;
	letter-spacing: -.03em !important;
	line-height: 1 !important;
}

/* velocita dell'offerta: secondo dato per peso, dopo il prezzo */
.tns-speed .elementor-heading-title {
	font-size: clamp(1.55rem, 2.2vw, 2rem) !important;
	letter-spacing: -.03em !important;
	line-height: 1 !important;
}

.tns-card--featured .tns-speed .elementor-heading-title { color: #fff !important; }


/* ============================================================================
   7. Pulsanti
   ========================================================================= */

.elementor-button {
	font-weight: 600 !important;
	letter-spacing: -.006em;
	transition: transform .3s var(--tns-ease), box-shadow .3s var(--tns-ease),
	            background-color .3s var(--tns-ease), color .3s var(--tns-ease);
	will-change: transform;
}

.elementor-button:hover { transform: translateY(-2px); }

/* primario: gradiente di marchio con alone che si accende.
   Parte dall'azure profondo: il testo e bianco e deve restare sopra 4,5:1
   anche sull'estremo piu chiaro del gradiente. */
.tns-btn-primary .elementor-button {
	background-image: linear-gradient(96deg, var(--tns-azure-deep), #0D82C2 52%, var(--tns-indigo)) !important;
	background-size: 160% 100%;
	background-position: 0% 50%;
	color: #fff !important;
	box-shadow: 0 3px 10px rgba(14,142,207,.28);
	transition: background-position .55s var(--tns-ease), transform .3s var(--tns-ease), box-shadow .3s var(--tns-ease);
}

.tns-btn-primary .elementor-button:hover {
	background-position: 100% 50%;
	box-shadow: 0 8px 26px rgba(14,142,207,.42), 0 0 0 1px rgba(63,200,245,.35);
}

/* secondario: filo sottile, si riempie appena */
.tns-btn-ghost .elementor-button {
	background: transparent !important;
	border: 1px solid rgba(175,192,232,.42) !important;
	color: #fff !important;
}

.tns-btn-ghost .elementor-button:hover {
	background: rgba(255,255,255,.08) !important;
	border-color: var(--tns-cyan) !important;
	color: #fff !important;
}

/* I form di Xpro non usano il widget pulsante di Elementor ma un <button>
   proprio, quindi non prendono le classi tns-*: senza questa regola restano
   coi colori del Kit. Stesso gradiente del primario, per coerenza. */
.xpro-contact-form-submit-button {
	background-image: linear-gradient(96deg, var(--tns-azure-deep), #0D82C2 52%, var(--tns-indigo)) !important;
	background-color: var(--tns-azure-deep) !important;
	background-size: 160% 100%;
	background-position: 0% 50%;
	color: #fff !important;
	border: 0 !important;
	font-weight: 600 !important;
	min-height: 48px;
	box-shadow: 0 3px 10px rgba(14,142,207,.28);
	transition: background-position .55s var(--tns-ease), transform .3s var(--tns-ease),
	            box-shadow .3s var(--tns-ease);
}

.xpro-contact-form-submit-button:hover {
	background-position: 100% 50%;
	transform: translateY(-2px);
	box-shadow: 0 8px 26px rgba(14,142,207,.42), 0 0 0 1px rgba(63,200,245,.35);
}

/* su fondo chiaro il fantasma diventa scuro */
.tns-btn-ghost--light .elementor-button {
	border-color: var(--tns-line) !important;
	color: var(--tns-deep) !important;
}

.tns-btn-ghost--light .elementor-button:hover {
	background: var(--tns-paper) !important;
	border-color: var(--tns-azure) !important;
	color: var(--tns-azure-deep) !important;
}


/* ============================================================================
   8. Testata — bianca piena
   Niente trasparenza ne sfocatura: il logo ha bisogno di un fondo opaco per
   staccare. La testata resta quella che Xpro fissa in alto dopo 220px.
   ========================================================================= */

.tns-header {
	background: #FFFFFF !important;
	border-bottom: 1px solid var(--tns-line) !important;
	transition: box-shadow .35s var(--tns-ease);
}

.tns-header .elementor-widget-image img {
	transition: transform .4s var(--tns-ease);
}

.tns-header .elementor-widget-image a:hover img { transform: scale(1.035); }

/* voci di menu: sottolineatura che cresce dal centro */
.tns-header .xpro-menu-item > a,
.tns-header .xpro-horizontal-menu a {
	position: relative;
	font-weight: 500;
}


/* ============================================================================
   9. Piè di pagina — chiaro e minimale
   Fondo bianco, marchio a colori a destra, gerarchia affidata solo al peso
   del testo: nessun riquadro, nessuna ombra. In cima un filo di marchio.
   ========================================================================= */

/* position:relative regge la velatura che Elementor dipinge sul ::before del
   contenitore. Elementor la mette gia da se sui .e-con: resta come rete di
   sicurezza. Il ::before del TEMA — la riga di marchio del piede chiaro di
   luglio — e stato tolto il 22 ago 2026: era rimasto col solo content e
   position, senza dimensioni ne colore, quindi non dipingeva piu niente e
   occupava lo stesso pseudo-elemento su cui Elementor stende la velatura. */
.tns-footer {
	position: relative;
}

/* i collegamenti in lista prendono il colore globale dei link del Kit:
   qui vince il grigio-ardesia del disegno, l'azure resta per il passaggio */
.tns-footer .elementor-icon-list-item a {
	color: var(--tns-slate-2) !important;
	transition: color .25s var(--tns-ease);
}

.tns-footer .elementor-icon-list-item a:hover {
	color: var(--tns-azure-deep) !important;
}

/* i collegamenti dentro i blocchi di testo: contatti e note legali */
.tns-foot-contatti a,
.tns-foot-legal a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .25s var(--tns-ease), border-color .25s var(--tns-ease);
}

.tns-foot-contatti a:hover,
.tns-foot-legal a:hover {
	color: var(--tns-azure-deep);
	border-bottom-color: rgba(14,142,207,.45);
}

.tns-foot-contatti .elementor-widget-container { line-height: 1.9; }

/* I contenitori di Elementor hanno 10px di spazio laterale di serie e si
   sommano a ogni livello di annidamento: qui li azzero, cosi etichette,
   marchio e riga finale cadono tutti sullo stesso margine. */
.tns-footer .e-con-inner .e-con { padding-inline: 0 !important; }

.tns-foot-brand .elementor-widget-image img { max-width: 176px; }


/* ============================================================================
   10. Elenchi con spunta, righe documento, citazione
   ========================================================================= */

/* Lo scostamento di 2px dell'icona al passaggio del mouse è stato tolto
   (22 ago 2026): non si vedeva come movimento ma come scatto secco, sulle
   due icone social del piè di pagina in particolare, dove l'icona è tutto
   il collegamento. Motivo: Elementor scrive per-elemento
   `.elementor-NN .elementor-element-XXX .elementor-icon-list-icon svg
   { transition: fill .3s }` — specificità 0,3,1 contro lo 0,2,1 di questa
   regola — e la scorciatoia `transition` azzera transition-property, quindi
   la transizione sul transform non è MAI entrata in gioco: il transform
   scattava di colpo all'entrata e all'uscita.
   Se lo si vuole rimettere, non basta ridichiarare qui la transizione:
   serve un selettore almeno altrettanto specifico, oppure impostare la
   transizione dal pannello Elementor del widget (che scrive fill+transform
   sullo stesso elemento). */

/* riga di documento scaricabile */
.tns-doc {
	border: 1px solid var(--tns-line) !important;
	background: #fff;
	transition: border-color .3s var(--tns-ease), box-shadow .3s var(--tns-ease), transform .3s var(--tns-ease);
}

.tns-doc:hover {
	border-color: rgba(14,142,207,.4) !important;
	box-shadow: var(--tns-sh-2);
	transform: translateY(-2px);
}

/* citazione: barra di marchio a sinistra invece delle virgolette */
.tns-quote {
	position: relative;
	padding-left: clamp(20px, 2.4vw, 32px) !important;
}

.tns-quote::before {
	content: "";
	position: absolute;
	left: 0;
	top: .28em;
	bottom: .28em;
	width: 3px;
	background: linear-gradient(180deg, var(--tns-cyan), var(--tns-azure) 55%, transparent);
}

.tns-quote .elementor-widget-text-editor {
	font-size: clamp(1.02rem, 1.35vw, 1.24rem);
	line-height: 1.58;
	color: var(--tns-deep);
}


/* ============================================================================
   11. Chiusura di pagina: pannello e banner, stesso vestito
   Due classi per la stessa cosa, perche vengono da due impianti diversi:
   `.tns-cta` e il pannello di home (15) e guide-e-documenti (44), costruito
   con la sua sfumatura; `.tns-banner` e la fascia di chiusura delle altre 9
   pagine (connettivita e i 4 servizi, telefonia e i 2 servizi, contatti), che
   in Elementor ha un fondo "profondo" pieno. Da qui in giu sono la stessa
   cosa: sfumatura, maglia esagonale, ombra e filamenti identici.
   Il fondo porta !important perche deve scavalcare il colore per-elemento che
   Elementor scrive sul contenitore.
   Su verifica-copertura (43) e chi-siamo (48) non c'e ne l'uno ne l'altro.
   ========================================================================= */

.tns-cta,
.tns-banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		radial-gradient(84% 130% at 88% 6%, rgba(63,200,245,.26), transparent 56%),
		linear-gradient(152deg, #1A2455, var(--tns-night)) !important;
	box-shadow: var(--tns-sh-3);
}

/* Ordine di stampa nella chiusura, dal fondo al contenuto:
   maglia esagonale (-3) < filamenti di fibra (-2) < rete di nodi (-1).
   Sono tre livelli espliciti apposta: qui dentro finiscono due canvas creati
   da due script diversi, e l'ordine non puo dipendere da chi arriva primo. */
.tns-cta::before,
.tns-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -3;
	background-image: var(--tns-mesh);
	background-size: 112px 200px;
	opacity: .14;
	-webkit-mask-image: radial-gradient(66% 90% at 84% 10%, #000, transparent 72%);
	        mask-image: radial-gradient(66% 90% at 84% 10%, #000, transparent 72%);
}

/* Il secondo vestito del canvas dei filamenti (il primo e nella sezione 3):
   qui prende tutta l'area. Lo shader disegna solo la luce su fondo
   trasparente, quindi la sfumatura qui sopra resta la base e senza WebGL il
   pannello non cambia di una virgola. */
.tns-cta > .tns-fibre-fx,
.tns-banner > .tns-fibre-fx {
	height: 100%;
	z-index: -2;
	opacity: .82;

	/* Il testo e centrato: la maschera svuota il centro e tiene i filamenti
	   sui fianchi, dove non hanno nulla da attraversare. */
	-webkit-mask-image: radial-gradient(54% 74% at 50% 50%, transparent 6%, #000 76%);
	        mask-image: radial-gradient(54% 74% at 50% 50%, transparent 6%, #000 76%);
}

/* Il secondo vestito della rete di nodi: qui sta sopra i filamenti, come
   nell'hero, e si concentra a destra — dove i filamenti sono piu radi e la
   maglia esagonale gli fa da fondo. A sinistra e al centro resta pulito per
   il testo. Piu discreta che nell'hero: e una fascia bassa, non un mezzo
   schermo, e sotto ha gia due texture. */
.tns-cta > .tns-rete-fx,
.tns-banner > .tns-rete-fx {
	height: 100%;
	z-index: -1;
	opacity: .78;

	/* Stesse proporzioni della maschera dell'hero, adattate a una fascia
	   bassa: presa piu stretta e la rete si riduce a quattro puntini sul
	   bordo, non si legge piu come una rete. */
	-webkit-mask-image: radial-gradient(86% 122% at 76% 14%, #000 16%, transparent 78%);
	        mask-image: radial-gradient(86% 122% at 76% 14%, #000 16%, transparent 78%);
}

.tns-cta .elementor-widget-text-editor,
.tns-banner .elementor-widget-text-editor { color: var(--tns-on-dark); }


/* ============================================================================
   12. Comparsa allo scorrimento — un solo gesto, ripetuto
   ========================================================================= */

/* DISATTIVATA il 30 lug 2026 — causava schermate bianche.
   Con animation-timeline:view() + fill:both le sezioni .tns-reveal restavano
   a opacity 0 finche non si scorreva (misurato: prima sezione di /contatti/
   a 0,133 appena aperta la pagina), e ogni sezione veniva promossa a livello
   di compositing. Il backup del file precedente e in backup-tns/.
   Per riattivarla in forma sicura, usare un range legato solo a entry
   e mai applicarla alle sezioni del primo schermo. */

.tns-reveal { opacity: 1; }


/* ============================================================================
   13. Accessibilita e preferenze di movimento
   ========================================================================= */

:where(a, button, .elementor-button, input, select, textarea):focus-visible {
	outline: 2px solid var(--tns-cyan);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.tns-card:hover,
	.tns-doc:hover,
	.elementor-button:hover { transform: none !important; }

	/* Gli script non creano nemmeno il canvas quando il sistema chiede meno
	   movimento; queste regole coprono chi cambia idea a pagina aperta. */
	.tns-hero > .tns-rete-fx,
	.tns-hero > .tns-fibre-fx,
	.tns-cta > .tns-fibre-fx,
	.tns-banner > .tns-fibre-fx,
	.tns-cta > .tns-rete-fx,
	.tns-banner > .tns-rete-fx { display: none; }
}


/* ============================================================================
   14. Adattamenti mobile
   ========================================================================= */

@media (max-width: 767px) {
	.tns-section        { padding-block: 52px !important; }
	.tns-section--tight { padding-block: 36px !important; }

	.home .tns-section        { padding-block: 38px !important; }
	.home .tns-section--tight { padding-block: 26px !important; }

	/* sul telefono il marchio apre il piè di pagina invece di chiuderlo */
	.tns-foot-brand { order: -1; }

	.tns-hero::after { display: none; }          /* le scie affollano lo schermo stretto */

	/* Stessa ragione, piu la batteria: sul telefono l'hero e alto e stretto, la
	   fascia di filamenti si vedrebbe appena e il conto si pagherebbe proprio
	   mentre la pagina si apre. Lo script gia non li accende sotto i 768px,
	   questa e la rete di sicurezza per chi restringe la finestra a pagina
	   aperta. Nel pannello di chiusura invece restano: li si arriva scorrendo. */
	.tns-hero > .tns-fibre-fx { display: none; }
	.tns-card--featured { transform: none !important; }

	/* area toccabile decente anche sui pulsanti-collegamento senza fondo */
	.elementor-button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Sul telefono il pulsante della testata va anche rimpicciolito: a piena
	   misura il suo testo non lascia spazio al logo. Il dimensionamento della
	   riga sta invece nella sezione 15, perche serve gia da 1024px in giu. */
	.tns-header .elementor-button {
		padding: 10px 13px !important;
		font-size: 12.5px !important;
	}

	.tns-header > .e-con-inner { gap: 10px !important; }
}


/* ============================================================================
   14b. La riga della testata sotto i 1200px
   La testata e una riga a nowrap con tre larghezze pensate per il desktop: il
   menu al 66% e il pulsante a 200px. Insieme chiedono circa 1190px di finestra;
   sotto quella soglia il pulsante sporge dal bordo e trascina di lato l'intera
   pagina. Misurato prima della correzione: 6px di troppo a 1165 di viewport,
   33px a 1085, 50px a 1035, 215px a 375. Qui menu e pulsante si dimensionano
   sul contenuto e il logo si prende lo spazio libero, cosi restano appaiati a
   destra (col menu orizzontale sopra i 1024px, con l'hamburger sotto).
   Nota per il futuro: il pannello a scomparsa di Xpro e fixed e non allarga mai
   il documento. Se la pagina si trascina di lato, il colpevole non e lui.
   ========================================================================= */

@media (max-width: 1200px) {

	.tns-header .elementor-widget-button,
	.tns-header .elementor-widget-xpro-horizontal-menu {
		width: auto !important;
		max-width: none !important;
		flex: 0 0 auto !important;
		--container-widget-width: auto !important;
	}

	.tns-header .elementor-widget-image { margin-inline-end: auto; }
	.tns-header .elementor-widget-button { order: 2; }
	.tns-header .elementor-widget-xpro-horizontal-menu { order: 3; }
}


/* Tra 1025 e 1200 il menu resta orizzontale e da solo chiede 711px: con logo
   e pulsante non entra nemmeno dimensionato sul contenuto (107px di troppo a
   1025). Qui le voci si stringono, il pulsante perde fianchi e la riga chiude
   il passo. Sotto i 1025 il problema non si pone: c'e l'hamburger. */
@media (max-width: 1200px) and (min-width: 1025px) {

	.tns-header .xpro-elementor-horizontal-navbar-nav .menu-item > a {
		padding-inline: 4px !important;
		font-size: 13px !important;
	}

	.tns-header .elementor-button { padding-inline: 18px !important; }
	.tns-header > .e-con-inner { gap: 12px !important; }

	/* Sopra i 1024 il menu e ancora orizzontale, quindi si tiene l'ordine del
	   desktop: logo, menu, pulsante. L'inversione della sezione 14b serve solo
	   quando c'e l'hamburger, che deve restare l'ultimo elemento a destra. */
	.tns-header .elementor-widget-xpro-horizontal-menu { order: 2; }
	.tns-header .elementor-widget-button { order: 3; }
}


/* Sotto i 360px la riga e sempre troppo stretta per logo, pulsante e hamburger
   affiancati: mancavano 17px a 305. Il pulsante cede il resto dei fianchi. */
@media (max-width: 359px) {

	/* I pulsanti portano 30px di fianchi per parte e su questi schermi sporgono
	   dalla colonna: i dieci "Scarica" di guide-e-documenti uscivano di 3px.
	   Restano comodi da toccare grazie al min-height di 44px della sezione 14. */
	.elementor .elementor-button {
		padding-inline: 14px !important;
		max-width: 100%;
	}

	/* Quello della testata deve stringersi ancora di piu, perche divide la riga
	   con logo e hamburger: mancavano 17px a 305. Sta DOPO la regola qui sopra
	   apposta: stessa specificita e stesso !important, vince chi viene per ultimo.
	   Invertirle rimette i 6px di scorrimento laterale su tutte le pagine. */
	.tns-header .elementor-button {
		padding: 9px 8px !important;
		font-size: 12px !important;
	}

	.tns-header > .e-con-inner { gap: 6px !important; }
}


/* ============================================================================
   15. Menu a scomparsa (fino a 1024px)
   Tre difetti del menu di Xpro da correggere qui:
   — apri e chiudi sono <button> senza stile proprio, quindi ereditano fondo e
     spaziatura dei pulsanti del Kit: e quello il rettangolo ambra;
   — l'icona hamburger arriva come SVG di Elementor senza misure e resta 0x0;
   — le voci del pannello sono #b5b5b5 su #f5f5f5, cioe 1,9:1, illeggibili.
   ========================================================================= */

@media (max-width: 1024px) {

	.tns-header .xpro-elementor-horizontal-menu-toggler,
	.tns-header .xpro-elementor-horizontal-menu-close {
		background: transparent !important;
		color: var(--tns-deep) !important;
		border: 0 !important;
		padding: 9px !important;
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 0;
		box-shadow: none !important;
		transition: color .25s var(--tns-ease);
	}

	.tns-header .xpro-elementor-horizontal-menu-toggler:hover,
	.tns-header .xpro-elementor-horizontal-menu-close:hover {
		color: var(--tns-azure-deep) !important;
	}

	.tns-header .xpro-elementor-horizontal-menu-toggler svg {
		width: 26px;
		height: 26px;
		fill: currentColor;
	}

	.tns-header .xpro-elementor-horizontal-menu-close i {
		font-size: 21px;
		line-height: 1;
	}

	/* il pannello: bianco come la testata, non il grigio di serie */
	.tns-header .xpro-elementor-horizontal-navbar-wrapper {
		background: #fff !important;
	}

	.tns-header .xpro-elementor-horizontal-navbar-nav .menu-item > a {
		color: var(--tns-ink) !important;
		background: transparent !important;
		font-weight: 600;
		border-bottom: 1px solid var(--tns-line);
	}

	.tns-header .xpro-elementor-horizontal-navbar-nav .menu-item > a:hover,
	.tns-header .xpro-elementor-horizontal-navbar-nav .current-menu-item > a,
	.tns-header .xpro-elementor-horizontal-navbar-nav .current_page_item > a {
		color: var(--tns-azure-deep) !important;
	}

	/* sottovoci: rientrate e su carta, cosi si legge la gerarchia */
	.tns-header .xpro-elementor-dropdown-menu a {
		color: var(--tns-slate-2) !important;
		background: var(--tns-paper) !important;
		padding-left: 30px !important;
		font-weight: 500;
	}

	/* la freccetta usa un font di icone che non viene caricato: la disegno */
	.tns-header .xpro-dropdown-menu-toggle {
		color: var(--tns-slate) !important;
	}

	.tns-header .xpro-dropdown-menu-toggle::before { content: none !important; }

	.tns-header .xpro-dropdown-menu-toggle::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 8px;
		height: 8px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translate(-50%, -70%) rotate(45deg);
		transition: transform .25s var(--tns-ease);
	}

	/* aperto: jQuery lascia display:block nell'attributo style della lista */
	.tns-header .menu-item-has-children:has(> ul[style*="block"]) .xpro-dropdown-menu-toggle::after {
		transform: translate(-50%, -20%) rotate(-135deg);
	}
}



/* ============================================================================
   16. Margine laterale fra 768 e 1263px
   Le sezioni hanno i lati a 0 e contano sulla scatola da 1200px per staccarsi
   dai bordi. Sotto i 1264px di finestra la scatola e larga quanto lo schermo
   e il testo finiva incollato al bordo (misurato a 1100px: da 1 a 12 sezioni
   per pagina, su tutte le pagine). Qui si garantiscono 32px per lato ai
   contenitori di primo livello a larghezza "boxed"; chi ha gia un margine suo
   piu largo lo tiene. Sotto i 768px valgono i margini mobile dei singoli
   elementi, a 1264px la scatola da 1200 ha gia 32px liberi per lato.
   ========================================================================= */

@media (min-width: 768px) and (max-width: 1263px) {
	.elementor[data-elementor-type="wp-page"] > .e-con.e-con-boxed {
		padding-left: max(32px, var(--padding-left, 0px)) !important;
		padding-right: max(32px, var(--padding-right, 0px)) !important;
	}
}


/* ============================================================================
   17. Pagine legali (privacy, cookie)
   Il testo sta in un solo widget Editor di testo con classe `tns-legal`.
   I titoletti sono h2/h3 veri, ma i 34px che il Kit da agli h2 sono da titolo
   di sezione, non da capoverso di un'informativa: qui scendono di scala.
   ========================================================================= */

.elementor .tns-legal {
	max-width: 800px;
}

.elementor .tns-legal h2 {
	margin: 36px 0 10px;
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -.012em;
	color: var(--tns-deep);
}

.elementor .tns-legal h3 {
	margin: 22px 0 8px;
	font-size: 18px;
	line-height: 1.35;
	color: var(--tns-deep);
}

.elementor .tns-legal h2:first-child { margin-top: 0; }

.elementor .tns-legal ol,
.elementor .tns-legal ul {
	margin: 0 0 16px;
	padding-left: 22px;
}

.elementor .tns-legal li { margin-bottom: 8px; }

/* gli indirizzi scritti per esteso sono piu larghi di uno schermo da telefono */
.elementor .tns-legal a { overflow-wrap: anywhere; }

/* =========================================================================
   18. reCAPTCHA nei moduli
   Il riquadro di Google e largo 304px fissi e non si adatta. Sui telefoni la
   scheda del modulo e piu stretta: lo si rimpicciolisce perche non ne esca.
   Tre scalini, calcolati sulla larghezza utile della scheda (schermo meno
   132px): coprono i telefoni da 320px in su. L'altezza segue la scala, cosi
   sotto non resta un vuoto.
   ========================================================================= */

@media (max-width: 435px) {
	.xpro-contact-form .g-recaptcha {
		transform: scale(.84);
		transform-origin: 0 0;
		height: 66px;
	}
}

@media (max-width: 387px) {
	.xpro-contact-form .g-recaptcha {
		transform: scale(.75);
		height: 59px;
	}
}

@media (max-width: 359px) {
	.xpro-contact-form .g-recaptcha {
		transform: scale(.61);
		height: 48px;
	}
}


/* =========================================================================
   19. Banner dei cookie (CookieYes)
   Il banner arriva dal servizio di CookieYes con i suoi stili e con i colori
   scritti direttamente sugli elementi: per questo qui servono gli !important.
   Viene riportato alla paletta e alle misure del sito e rimpicciolito: su
   telefono copriva tre quarti dello schermo, con tre pulsanti alti 60px in
   un blu che non e del marchio.
   Accetta e Rifiuta hanno la stessa misura e lo stesso peso: rifiutare non
   deve essere piu difficile che accettare. Il testo dell'informativa resta
   tutto, si scorre dentro il riquadro.
   ========================================================================= */

.cky-consent-container {
	width: 400px !important;
	max-width: calc(100vw - 32px) !important;
}

.cky-consent-container.cky-box-bottom-right { right: 24px !important; bottom: 24px !important; }
.cky-consent-container.cky-box-bottom-left  { left: 24px !important;  bottom: 24px !important; }

.cky-consent-container .cky-consent-bar {
	position: relative;
	padding: 18px 20px 16px !important;
	background: #fff !important;
	border: 1px solid var(--tns-line) !important;
	border-radius: 6px !important;
	box-shadow: var(--tns-sh-3) !important;
}

/* la traccia di luce del sito, in testa al riquadro */
.cky-consent-container .cky-consent-bar::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 3px;
	border-radius: 6px 6px 0 0;
	background: linear-gradient(90deg, var(--tns-azure-deep), var(--tns-cyan));
}

.cky-consent-container .cky-notice .cky-title {
	margin: 0 0 6px !important;
	padding: 0 28px 0 0 !important;
	font-family: "Archivo", sans-serif;
	font-size: 15px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	letter-spacing: -.01em;
	color: var(--tns-deep) !important;
}

.cky-consent-container .cky-notice-group,
.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des * {
	font-size: 12.5px !important;
	line-height: 1.5 !important;
}

/* sette righe a vista, il resto si scorre: le due ombre dicono che c'e altro */
.cky-consent-container .cky-notice-des {
	max-height: 10.5em !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	padding: 0 8px 0 0 !important;
	color: var(--tns-slate-2) !important;
	scrollbar-width: thin;
	scrollbar-color: var(--tns-line) transparent;
	background:
		linear-gradient(#fff 30%, rgba(255,255,255,0)) center top / 100% 22px no-repeat local,
		linear-gradient(rgba(255,255,255,0), #fff 70%) center bottom / 100% 22px no-repeat local,
		radial-gradient(farthest-side at 50% 0, rgba(17,26,61,.16), rgba(17,26,61,0)) center top / 100% 7px no-repeat scroll,
		radial-gradient(farthest-side at 50% 100%, rgba(17,26,61,.16), rgba(17,26,61,0)) center bottom / 100% 7px no-repeat scroll;
}

.cky-consent-container .cky-notice-des p { margin: 0 !important; }

.cky-consent-container .cky-notice-des a.cky-policy {
	color: var(--tns-azure-deep) !important;
	background: transparent !important;
	border: 0 !important;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* pulsanti: Personalizza come collegamento, Rifiuta e Accetta gemelli */
.cky-consent-container .cky-notice-btn-wrapper {
	display: grid !important;
	grid-template-columns: auto 1fr 1fr;
	align-items: center;
	gap: 8px !important;
	margin: 14px 0 0 !important;
	padding: 0 !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn {
	width: auto !important;
	min-height: 38px;
	margin: 0 !important;
	padding: 8px 10px !important;
	font-family: inherit;
	font-size: 13px !important;
	line-height: 1.25 !important;
	font-weight: 700 !important;
	letter-spacing: -.006em;
	border-width: 1px !important;
	border-style: solid !important;
	border-radius: 6px !important;
	opacity: 1 !important;
	transition: background-color .25s var(--tns-ease), border-color .25s var(--tns-ease), color .25s var(--tns-ease);
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize {
	order: 1 !important;
	padding: 8px 6px 8px 0 !important;
	background: transparent !important;
	border-color: transparent !important;
	color: var(--tns-slate-2) !important;
	font-weight: 600 !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize:hover { color: var(--tns-azure-deep) !important; }

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject {
	order: 2 !important;
	background: var(--tns-deep) !important;
	border-color: var(--tns-deep) !important;
	color: #fff !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject:hover {
	background: var(--tns-indigo) !important;
	border-color: var(--tns-indigo) !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept {
	order: 3 !important;
	background: var(--tns-azure-deep) !important;
	border-color: var(--tns-azure-deep) !important;
	color: #fff !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept:hover {
	background: #085F8E !important;
	border-color: #085F8E !important;
}

.cky-consent-container .cky-btn:focus-visible,
.cky-consent-container .cky-banner-btn-close:focus-visible {
	outline: 2px solid var(--tns-azure) !important;
	outline-offset: 2px;
}

/* la X: stessa posizione, ma con un'area che il dito trova */
.cky-consent-container .cky-consent-bar .cky-banner-btn-close {
	top: 6px !important;
	right: 6px !important;
	padding: 11px !important;
	border-radius: 6px;
	opacity: .6;
}

.cky-consent-container .cky-consent-bar .cky-banner-btn-close:hover { opacity: 1; }

.cky-consent-container .cky-consent-bar .cky-banner-btn-close img {
	width: 10px !important;
	height: 10px !important;
}

/* telefono: una striscia in basso staccata dai bordi, non mezzo schermo */
@media (max-width: 576px) {
	.cky-consent-container,
	.cky-consent-container.cky-box-bottom-right,
	.cky-consent-container.cky-box-bottom-left {
		left: 8px !important;
		right: 8px !important;
		bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
		width: auto !important;
		max-width: none !important;
	}

	.cky-consent-container .cky-consent-bar { padding: 16px 16px 14px !important; }

	.cky-consent-container .cky-notice-des { max-height: 7.5em !important; }
}

/* schermi stretti: Personalizza scende sotto, i due pulsanti restano affiancati */
@media (max-width: 359px) {
	.cky-consent-container .cky-notice-btn-wrapper { grid-template-columns: 1fr 1fr; }

	.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize {
		order: 4 !important;
		grid-column: 1 / -1;
		min-height: 0;
		padding: 4px 0 0 !important;
	}
}

/* finestra delle preferenze e pulsantino per riaprirla: stessa paletta */
.cky-modal .cky-preference-center,
.cky-modal .cky-preference-center * { font-family: inherit; }

.cky-modal .cky-preference-center { border-radius: 6px !important; }

.cky-modal .cky-prefrence-btn-wrapper .cky-btn {
	min-height: 40px;
	padding: 9px 12px !important;
	line-height: 1.25 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-radius: 6px !important;
	opacity: 1 !important;
}

.cky-modal .cky-prefrence-btn-wrapper .cky-btn-reject {
	background: var(--tns-deep) !important;
	border-color: var(--tns-deep) !important;
	color: #fff !important;
}

.cky-modal .cky-prefrence-btn-wrapper .cky-btn-preferences {
	background: #fff !important;
	border-color: var(--tns-azure-deep) !important;
	color: var(--tns-azure-deep) !important;
}

.cky-modal .cky-prefrence-btn-wrapper .cky-btn-accept {
	background: var(--tns-azure-deep) !important;
	border-color: var(--tns-azure-deep) !important;
	color: #fff !important;
}

.cky-modal .cky-show-desc-btn,
.cky-modal .cky-preference-content-wrapper a { color: var(--tns-azure-deep) !important; }

.cky-modal .cky-switch input[type="checkbox"]:checked { background: var(--tns-azure-deep) !important; }

.cky-btn-revisit-wrapper { background-color: var(--tns-deep) !important; }


/* =========================================================================
   20. Occhielli sulle fasce grigie della home
   Sul grigio #ECECEC l'azure profondo (#0A73AB) scende a 4,39:1, sotto la
   soglia di 4,5:1 per il testo piccolo. Un filo piu scuro arriva a 4,64:1;
   a occhio e lo stesso colore. Vale per i due soli occhielli che stanno su
   quel grigio: "Connettivita" e "Aziende".
   ========================================================================= */

.elementor-element-735ee6a.tns-eyebrow .elementor-heading-title,
.elementor-element-847ee2a.tns-eyebrow .elementor-heading-title { color: #096FA5 !important; }