/*
Theme Name: FARO
Theme URI: https://example.com/faro
Author: Paolo Bonfardeci (Pacibo)
Author URI: https://example.com
Description: Tema WordPress su misura a marchio FARO per formazione, coaching e team building. Homepage modulare con blocchi attivabili e personalizzabili da Aspetto → Personalizza (testi, immagini, dimensioni, animazioni), gestione di logo, menu, colori, font e footer.
Version: 1.43.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: faro
Tags: business, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, threaded-comments, translation-ready
*/

/* =========================================================
   1. RESET & BASI
   ========================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--faro-font-body, sans-serif);
	font-size: var(--faro-base-size, 17px);
	line-height: 1.7;
	color: var(--faro-text, #1c2733);
	background: var(--faro-bg, #fff);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--faro-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--faro-accent); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--faro-font-heading, sans-serif);
	font-weight: var(--faro-h-weight, 800);
	line-height: 1.15;
	color: var(--faro-secondary);
	margin: 0 0 .6em;
	letter-spacing: -0.01em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}
.faro-skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 9999;
	background: var(--faro-secondary); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.faro-skip-link:focus { left: 0; color: #fff; }

/* =========================================================
   2. LAYOUT
   ========================================================= */
.faro-container {
	width: 100%;
	max-width: var(--faro-container, 1200px);
	margin-inline: auto;
	padding-inline: 24px;
}

/* Flag "Allineamento standard" (per blocco) e margini globali:
   le regole effettive sono generate dinamicamente dal Customizer
   (Aspetto → Personalizza → FARO — Margini e allineamento) e stampate
   in wp_head, così i valori sono modificabili senza toccare il CSS. */

.faro-block { position: relative; }
.faro-bg-alt { background: var(--faro-bg-alt, #f4f6f9); }

.faro-eyebrow {
	display: inline-block;
	font-family: var(--faro-font-heading);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--faro-accent);
	margin-bottom: 1rem;
	position: relative;
	padding-left: 38px;
}
.faro-eyebrow::before {
	content: ""; position: absolute; left: 0; top: 50%;
	width: 28px; height: 2px; background: var(--faro-accent); transform: translateY(-50%);
}

.faro-section-head { max-width: 720px; margin-bottom: 48px; }
.faro-section-head__title { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }

/* =========================================================
   3. BOTTONI
   ========================================================= */
.faro-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	font-family: var(--faro-font-heading);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1;
	padding: 15px 30px;
	border-radius: 999px;
	border: 2px solid var(--faro-primary);
	background: var(--faro-primary);
	color: #fff;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
	text-align: center;
}
.faro-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -12px var(--faro-primary); }
/* v1.34.4 — Pulsante con colori personalizzati.
   I colori arrivano come variabili inline (--faro-btn-bg / --faro-btn-color):
   se non sono impostate, il fallback e' il pulsante standard del tema, quindi
   un pulsante senza colori scelti e' identico a tutti gli altri. */
.faro-btn--custom {
	background: var(--faro-btn-bg, var(--faro-primary));
	border-color: var(--faro-btn-bg, var(--faro-primary));
	color: var(--faro-btn-color, #fff);
}
.faro-btn--custom:hover {
	color: var(--faro-btn-color, #fff);
	box-shadow: 0 14px 30px -12px var(--faro-btn-bg, var(--faro-primary));
	opacity: .88;
}
/* Pulsante inserito direttamente nel testo tramite la toolbar "Pulsante".
   Classe separata da .faro-btn perche' vive dentro un paragrafo e non deve
   ereditare i margini dei pulsanti di blocco. Stessa pillola, stessa animazione. */
.faro-btn-inline {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--faro-font-heading);
	font-weight: 600;
	font-size: .92rem;
	line-height: 1;
	padding: 12px 26px;
	border-radius: 999px;
	text-decoration: none !important;
	transition: transform .2s ease, opacity .2s ease;
}
.faro-btn-inline:hover { transform: translateY(-2px); opacity: .88; }
/* Blocco pagina "Pulsante": allineamento della riga che lo contiene. */
.faro-pb-button { display: flex; }
.faro-pb-button--left   { justify-content: flex-start; }
.faro-pb-button--center { justify-content: center; }
.faro-pb-button--right  { justify-content: flex-end; }
.faro-btn--primary { background: var(--faro-primary); border-color: var(--faro-primary); }
.faro-btn--sm { padding: 11px 22px; font-size: .85rem; }
.faro-btn--light { background: #fff; color: var(--faro-secondary); border-color: #fff; }
.faro-btn--light:hover { background: transparent; color: #fff; border-color: #fff; }
.faro-btn--ghost { background: transparent; color: var(--faro-primary); }
.faro-btn--ghost:hover { background: var(--faro-primary); color: #fff; }

/* =========================================================
   4. HEADER & MENU
   ========================================================= */

/* ---- Barra promozionale (sopra o sotto il menu) ----
   I colori sono generati dal Customizer (vedi faro_dynamic_css).
   Variante --top: fuori dall'header, NON sticky, scorre via così l'header
   fisso resta in cima da solo (comportamento storico, invariato).
   Variante --bottom: stampata dentro <header>, quindi eredita lo sticky
   dell'header e resta appiccicata al menu. */
.faro-topbar {
	position: relative;
	z-index: 101;
	font-size: .88rem;
	line-height: 1.3;
}
.faro-header .faro-topbar--bottom {
	border-top: 1px solid rgba(255,255,255,.12);
}
.faro-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 42px;
	padding-top: 6px;
	padding-bottom: 6px;
}
.faro-topbar__text { flex: 1 1 auto; min-width: 0; }
.faro-topbar__text p { margin: 0; }
.faro-topbar__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 18px;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s, color .2s, transform .2s;
}
.faro-topbar__btn:hover,
.faro-topbar__btn:focus-visible {
	transform: translateY(-1px);
	outline: none;
}
@media (max-width: 600px) {
	.faro-topbar { font-size: .82rem; }
	.faro-topbar__inner { min-height: 38px; gap: 10px; }
	.faro-topbar__btn { padding: 6px 14px; font-size: .74rem; }
}

.faro-header {
	position: relative; z-index: 100;
	background: rgba(255,255,255,.96);
	backdrop-filter: saturate(160%) blur(8px);
	border-bottom: 1px solid rgba(0,0,0,.06);
}
.faro-header.is-sticky { position: sticky; top: 0; }
.faro-header.is-scrolled { box-shadow: 0 8px 30px -18px rgba(0,0,0,.35); }

.faro-header__inner {
	display: flex; align-items: center; gap: 28px;
	min-height: 76px;
}
.faro-header__brand { flex: 0 0 auto; margin-right: auto; }
.faro-header__brand img { max-height: 50px; width: auto; }

.faro-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--faro-secondary); }
.faro-logo:hover { color: var(--faro-secondary); }
.faro-logo__mark { color: var(--faro-primary); display: inline-flex; }
.faro-logo__text {
	font-family: var(--faro-font-heading); font-weight: 900; font-size: 1.5rem;
	letter-spacing: .04em; text-transform: uppercase;
}

.faro-nav { flex: 1 1 auto; }
.faro-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.faro-menu li { position: relative; }
.faro-menu a {
	display: block; padding: 10px 14px;
	font-family: var(--faro-font-heading); font-weight: 600; font-size: .82rem;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--faro-secondary); border-radius: 8px;
}
.faro-menu a:hover,
.faro-menu .current-menu-item > a { color: var(--faro-accent); }
.faro-menu .current-menu-item > a { background: var(--faro-bg-alt); }

/* sottomenu */
.faro-menu .sub-menu {
	list-style: none; margin: 0; padding: 8px;
	position: absolute; top: 100%; left: 0; min-width: 220px;
	background: #fff; border-radius: 14px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.3);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: all .2s ease; z-index: 20;
}
.faro-menu li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.faro-menu .sub-menu a { text-transform: none; letter-spacing: 0; font-size: .9rem; }

.faro-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }

.faro-burger {
	display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
	flex-direction: column; justify-content: center; gap: 5px; padding: 0;
}
.faro-burger span { display: block; width: 24px; height: 2px; background: var(--faro-secondary); margin: 0 auto; transition: .25s ease; }
.faro-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.faro-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.faro-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.faro-mobile-nav {
	background: #fff; border-top: 1px solid rgba(0,0,0,.06);
	padding: 16px 24px 28px;
}
.faro-mobile-menu { list-style: none; margin: 0 0 16px; padding: 0; }
.faro-mobile-menu li { border-bottom: 1px solid rgba(0,0,0,.06); }
.faro-mobile-menu a {
	display: block; padding: 14px 4px; font-family: var(--faro-font-heading);
	font-weight: 600; color: var(--faro-secondary); text-transform: uppercase; letter-spacing: .04em; font-size: .9rem;
}
.faro-mobile-menu .sub-menu { list-style: none; margin: 0; padding-left: 16px; }
.faro-mobile-nav__cta { width: 100%; }

/* =========================================================
   5. HERO
   ========================================================= */
.faro-hero {
	position: relative; display: flex; align-items: center;
	background: linear-gradient(135deg, var(--faro-primary) 0%, var(--faro-secondary) 100%);
	background-size: cover; background-position: center;
	color: var(--faro-dark-text, #fff);
	overflow: hidden;
}
.faro-hero.has-image::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(120deg, var(--faro-secondary) 0%, rgba(14,44,69,.4) 100%);
	mix-blend-mode: multiply;
}
.faro-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(120deg, var(--faro-primary), var(--faro-secondary));
}
.faro-hero::before {
	content: ""; position: absolute; right: -10%; top: -30%;
	width: 60vh; height: 60vh; border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
	pointer-events: none;
}
.faro-hero .faro-container { position: relative; z-index: 2; }
.faro-hero__content { max-width: 880px; }
.faro-hero--center { text-align: center; }
.faro-hero--center .faro-hero__content { margin-inline: auto; }
.faro-hero__title {
	color: #fff; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.12; margin-bottom: .5em;
}
/* Contenuto ricco nel titolo hero (immagini / paragrafi inseriti da editor) */
.faro-hero__title img { max-width: 100%; height: auto; display: block; }
.faro-hero--center .faro-hero__title img { margin-inline: auto; }
.faro-hero__title p { margin: 0 0 .25em; }
.faro-hero__title p:last-child { margin-bottom: 0; }
.faro-hero__subtitle { font-size: clamp(1.05rem, 1.8vw, 1.35rem); opacity: .92; max-width: 620px; }
.faro-hero--center .faro-hero__subtitle { margin-inline: auto; }

/* =========================================================
   6. ABOUT / FEATURE (immagine + testo)
   ========================================================= */
/* v1.35.1 — minmax(0, 1fr): vedi la nota su .faro-pb-intro2col__grid.
   Con "1fr" secco il minimo della colonna e' il min-content del contenuto,
   quindi un'immagine con una larghezza massima in px impedisce alla colonna
   di restringersi sotto quella misura. */
.faro-about__grid,
.faro-feature {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center;
}
.faro-feature + .faro-feature { margin-top: 90px; }

.faro-about--img-right .faro-about__media,
.faro-feature--img-right .faro-feature__media { order: 2; }

/* ----- Decoro media: box grande dietro + immagine sporgente ----- */
.faro-media-deco {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 11;
}
/* Fallback per browser senza aspect-ratio (Safari < 15, IE) */
@supports not (aspect-ratio: 16/11) {
	.faro-media-deco { height: 0; padding-top: 68.75%; aspect-ratio: auto; }
}
.faro-media-deco__img {
	position: absolute;
	border-radius: var(--faro-radius, 18px);
	box-shadow: 0 30px 60px -28px rgba(14,44,69,.45);
	object-fit: cover;
	z-index: 2;
}
.faro-media-deco__box {
	position: absolute;
	background: var(--faro-decobox-color, var(--faro-primary));
	border-radius: calc(var(--faro-radius, 18px) + 4px);
	z-index: 1;
}

/* dimensioni immagine in funzione della size della box */
.faro-media-deco[data-deco-size="sm"] .faro-media-deco__img { width: 96%; height: 92%; }
.faro-media-deco[data-deco-size="md"] .faro-media-deco__img { width: 92%; height: 88%; }
.faro-media-deco[data-deco-size="lg"] .faro-media-deco__img { width: 88%; height: 86%; }

/* dimensioni box */
.faro-media-deco[data-deco-size="sm"] .faro-media-deco__box { width: 80%; height: 76%; }
.faro-media-deco[data-deco-size="md"] .faro-media-deco__box { width: 88%; height: 84%; }
.faro-media-deco[data-deco-size="lg"] .faro-media-deco__box { width: 94%; height: 90%; }

/* posizione bl: box in basso a sinistra, immagine in alto a destra (sporge a destra) */
.faro-media-deco[data-deco-pos="bl"] .faro-media-deco__img  { top: 0; right: 0; }
.faro-media-deco[data-deco-pos="bl"] .faro-media-deco__box  { left: 0; bottom: 0; }

/* br: box in basso a destra, immagine in alto a sinistra */
.faro-media-deco[data-deco-pos="br"] .faro-media-deco__img  { top: 0; left: 0; }
.faro-media-deco[data-deco-pos="br"] .faro-media-deco__box  { right: 0; bottom: 0; }

/* tl: box in alto a sinistra, immagine in basso a destra */
.faro-media-deco[data-deco-pos="tl"] .faro-media-deco__img  { bottom: 0; right: 0; }
.faro-media-deco[data-deco-pos="tl"] .faro-media-deco__box  { top: 0; left: 0; }

/* tr: box in alto a destra, immagine in basso a sinistra */
.faro-media-deco[data-deco-pos="tr"] .faro-media-deco__img  { bottom: 0; left: 0; }
.faro-media-deco[data-deco-pos="tr"] .faro-media-deco__box  { top: 0; right: 0; }

/* box decorativa disattivata: l'immagine occupa tutto lo spazio senza sporgere */
.faro-media-deco--nobox .faro-media-deco__box { display: none; }
.faro-media-deco--nobox .faro-media-deco__img { inset: 0; width: 100%; height: 100%; }

.faro-about__title,
.faro-feature__title { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.faro-about__text,
.faro-feature__text { color: var(--faro-typo-color, var(--faro-muted)); margin-bottom: 1.8em; }
.faro-about__body .faro-btn,
.faro-feature__body .faro-btn { margin-top: .4em; }

/* =========================================================
   7. VALORI
   ========================================================= */
.faro-values__inner { max-width: 880px; }
.faro-values__text {
	font-family: var(--faro-font-heading);
	font-weight: var(--faro-typo-weight, 600);
	font-size: var(--faro-typo-size, clamp(1.15rem, 2.2vw, 1.7rem));
	line-height: var(--faro-typo-lh, 1.45);
	color: var(--faro-typo-color, var(--faro-secondary));
}
/* v1.42.1 — Lo stacco fra paragrafi si governa dal margine SOTTO, non da
   quello sopra.
   La regola globale "p { margin: 0 0 1.1em }" da' a ogni paragrafo circa 24px
   di margine inferiore. Due margini verticali adiacenti collassano e vince il
   maggiore: agire solo sul margin-top (18px) non cambiava nulla, perche' il
   risultato restava 24px. Ora il campo scrive entrambi, cosi' comanda davvero. */
.faro-values__text p { margin-bottom: var(--faro-par-gap, 1.1em); }
.faro-values__text p:last-child { margin-bottom: 0; }
.faro-values__text p + p { margin-top: 0; }
/* v1.42.0 — Respiro dopo le andate a capo con MAIUSC+INVIO.
   Un <br> e' un elemento in linea e non accetta margini: portandolo a
   display:block diventa un elemento a se' e il margine sotto funziona.
   Il content:"" serve a Safari, che altrimenti ignora il blocco vuoto.
   Con la variabile a 0 (default) il comportamento e' identico a prima. */
.faro-values__text br {
	display: block;
	content: "";
	margin-bottom: var(--faro-line-gap, 0);
}

/* =========================================================
   8. VISION MISSION PURPOSE
   ========================================================= */
.faro-vmp__card {
	background: linear-gradient(135deg, var(--faro-primary), var(--faro-secondary));
	border-radius: calc(var(--faro-radius) + 8px);
	padding: clamp(32px, 5vw, 64px);
	color: var(--faro-dark-text, #fff);
	box-shadow: 0 40px 80px -40px rgba(14,44,69,.6);
	position: relative; overflow: hidden;
}
.faro-vmp__card::before {
	content: ""; position: absolute; right: -60px; bottom: -60px;
	width: 280px; height: 280px; border-radius: 50%;
	border: 40px solid rgba(255,255,255,.05);
}
.faro-vmp__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; z-index: 2; }
.faro-vmp__col { padding-left: 22px; border-left: 3px solid rgba(255,255,255,.25); }
.faro-vmp__title { color: #fff; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .6em; }
.faro-vmp__text { opacity: .88; font-size: .98rem; margin: 0; }

/* =========================================================
   9. SERVIZI
   ========================================================= */
.faro-services__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
	border-top: 1px solid rgba(0,0,0,.08);
}
.faro-service {
	padding: 38px 26px;
	border-right: 1px solid rgba(0,0,0,.07);
	border-bottom: 1px solid rgba(0,0,0,.07);
	transition: background .3s ease, transform .3s ease;
}
.faro-service:hover { background: var(--faro-bg-alt); transform: translateY(-4px); }
/* v1.35.0 — Blocco "Ancora": punto di atterraggio invisibile.
   display:block con altezza zero: non occupa spazio e non interrompe il flusso
   fra due sezioni, ma resta un target valido per il salto del browser.
   scroll-margin-top e' l'unica proprieta' che conta: sposta in giu' il punto di
   arrivo dello scroll di tanto quanto e' alto l'header fisso. */
.faro-anchor {
	display: block;
	height: 0;
	overflow: hidden;
	scroll-margin-top: var(--faro-anchor-offset, 100px);
}
/* v1.34.5 — Box servizio cliccabile: il contenitore e' un <a>, quindi va
   neutralizzata la formattazione ereditata dai link (sottolineatura e colore),
   altrimenti titolo e sottotitolo cambierebbero aspetto solo per il fatto di
   avere un link. L'effetto hover resta quello della box, non del testo. */
.faro-service--link {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
.faro-service--link:hover .faro-service__title,
.faro-service--link:hover .faro-service__sub { color: inherit; }
.faro-service--link:focus-visible {
	outline: 2px solid var(--faro-primary);
	outline-offset: -2px;
}
.faro-service__num {
	font-family: var(--faro-font-heading); font-weight: 900;
	font-size: 2.6rem; color: var(--faro-accent); line-height: 1; display: block; margin-bottom: 16px;
	opacity: .9;
}
.faro-service__title { font-size: 1.12rem; margin-bottom: .3em; }
.faro-service__sub { color: var(--faro-muted); font-size: .9rem; margin: 0; }
.faro-services__cta { margin-top: 48px; text-align: center; }

/* =========================================================
   10. EVENTI (banner CTA)
   ========================================================= */
.faro-events__banner {
	position: relative; overflow: hidden;
	background: linear-gradient(120deg, var(--faro-secondary), var(--faro-primary));
	background-size: cover; background-position: center;
	border-radius: calc(var(--faro-radius) + 6px);
	padding: clamp(40px, 6vw, 80px);
	text-align: center; color: #fff;
	box-shadow: 0 40px 80px -45px rgba(14,44,69,.6);
}
.faro-events__overlay { position: absolute; inset: 0; background: var(--faro-secondary); }
.faro-events__content { position: relative; z-index: 2; max-width: 720px; margin-inline: auto; }
.faro-events__title { color: #fff; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: .08em; margin-bottom: .4em; }
.faro-events__text { opacity: .9; margin-bottom: 1.8em; }

/* =========================================================
   11. BLOG CARDS
   ========================================================= */
.faro-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
/* v1.36.1 — Numero di colonne selezionabile. I modificatori esistevano gia'
   ma solo dentro .faro-pb-events: qui diventano generici, cosi' li puo' usare
   anche il blocco Blog della home senza duplicare regole.
   Stanno PRIMA dei breakpoint: a parita' di specificita' le regole delle
   media query, che vengono dopo, continuano a vincere e il collasso su
   tablet e telefono resta quello di sempre. */
.faro-cards--2 { grid-template-columns: repeat(2, 1fr); }
.faro-cards--3 { grid-template-columns: repeat(3, 1fr); }
.faro-cards--4 { grid-template-columns: repeat(4, 1fr); }
.faro-card {
	background: var(--faro-bg, #fff); border-radius: var(--faro-radius);
	overflow: hidden; box-shadow: 0 18px 40px -28px rgba(14,44,69,.4);
	display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease;
}
.faro-card:hover { transform: translateY(-6px); box-shadow: 0 30px 55px -28px rgba(14,44,69,.5); }
.faro-card__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--faro-bg-alt); }
.faro-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.faro-card:hover .faro-card__img { transform: scale(1.05); }
.faro-card__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.faro-card__date { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faro-accent); font-weight: 700; }
.faro-card__title { font-size: 1.22rem; margin: 10px 0 12px; }
.faro-card__title a { color: var(--faro-secondary); }
.faro-card__title a:hover { color: var(--faro-accent); }
.faro-card__excerpt { color: var(--faro-muted); font-size: .95rem; flex: 1; }
.faro-card__link { margin-top: 16px; font-weight: 600; font-family: var(--faro-font-heading); font-size: .9rem; }
.faro-bloglist__cta { margin-top: 48px; text-align: center; }

/* =========================================================
   12. BANNER IMMERSIVO
   ========================================================= */
.faro-banner {
	position: relative; display: flex; align-items: center;
	background: linear-gradient(120deg, var(--faro-secondary), var(--faro-primary));
	background-size: cover; background-position: center; background-attachment: fixed;
	color: #fff; overflow: hidden;
}
.faro-banner__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, var(--faro-secondary), rgba(14,44,69,.3)); }
.faro-banner .faro-container { position: relative; z-index: 2; }
.faro-banner__content { max-width: 760px; padding-block: 40px; }
.faro-banner__text { font-family: var(--faro-font-heading); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.35; margin-bottom: 1.4em; }

/* =========================================================
   13. TESTIMONIANZE
   ========================================================= */
/* Slider testimonianze: riga singola scorrevole con frecce */
.faro-testi__slider { position: relative; }
.faro-testi__track {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 4px 4px 16px;
	scrollbar-width: thin;
}
.faro-testi__track::-webkit-scrollbar { height: 8px; }
.faro-testi__track::-webkit-scrollbar-thumb { background: rgba(14,44,69,.2); border-radius: 8px; }
.faro-testi__item {
	margin: 0;
	background: var(--faro-bg-alt);
	border-radius: var(--faro-radius);
	padding: 34px;
	position: relative;
	scroll-snap-align: start;
	flex: 0 0 clamp(280px, 33%, 380px);
	display: flex;
	flex-direction: column;
}
.faro-testi__item::before {
	content: "\201C"; position: absolute; top: 6px; right: 24px;
	font-family: Georgia, serif; font-size: 5rem; color: var(--faro-accent); opacity: .25; line-height: 1;
}
/* v1.33.1 — La citazione assorbe lo spazio libero della card (flex: 1).
   Le card della slitta hanno già la stessa altezza (il track è flex con
   align-items: stretch di default), quindi facendo "gonfiare" la citazione
   tutto ciò che sta sotto — anteprima e autore — cade sulla stessa riga in
   tutte le card, indipendentemente da quanto testo contengono.
   Prima l'anteprima partiva subito dopo la citazione e scendeva a cascata
   a seconda della lunghezza del testo. */
.faro-testi__quote {
	margin: 0 0 22px;
	font-size: 1.02rem;
	color: var(--faro-secondary);
	font-style: italic;
	flex: 1 1 auto;
}
/* Rete di sicurezza per le testimonianze SENZA citazione: lì non c'è nulla
   che assorba lo spazio, quindi ci pensa il margine automatico. Nelle card
   con citazione il flex-grow ha già consumato tutto e questo margine vale 0,
   perciò le due regole non si pestano i piedi. */
.faro-testi__media { margin-top: auto; }
.faro-testi__foot { margin-top: 0; }

/* v1.33 — Anteprima quadrata del video, con il pulsante sovrapposto.
   Ordine nella card: citazione → anteprima → nome.
   Il pulsante sta SOPRA l'immagine e sotto il centro (58% dall'alto): resta
   leggibile senza coprire i volti, che nelle anteprime stanno in genere
   nella metà superiore. Lo teniamo visibile e non solo al passaggio del
   mouse perché su touch l'hover non esiste e l'azione va sempre dichiarata. */
.faro-testi__media {
	position: relative;
	/* margin-bottom e NON la forma abbreviata "margin: 0 0 18px": quella
	   riscriverebbe anche margin-top azzerando l'auto impostato sopra
	   (v1.33.1), e le anteprime tornerebbero disallineate. */
	margin-bottom: 18px;
	border-radius: calc(var(--faro-radius) - 6px);
	overflow: hidden;
	/* Quadrato garantito a prescindere dalle proporzioni originali. */
	aspect-ratio: 1 / 1;
	background: rgba(14,44,69,.08);
}
.faro-testi__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}
/* Velo scuro solo nella fascia bassa: dà contrasto al pulsante senza
   incupire tutta l'immagine. */
.faro-testi__media::after {
	content: "";
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(180deg, rgba(0,28,71,0) 0%, rgba(0,28,71,.55) 100%);
	pointer-events: none;
}
.faro-testi__videobtn--over {
	position: absolute;
	left: 50%;
	top: 58%;
	transform: translateX(-50%);
	z-index: 2;
	margin: 0;
	box-shadow: 0 10px 24px -10px rgba(0,0,0,.7);
}
.faro-testi__media:hover .faro-testi__poster { transform: scale(1.04); }
.faro-testi__videobtn--over:hover,
.faro-testi__videobtn--over:focus-visible { transform: translateX(-50%) translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
	.faro-testi__poster,
	.faro-testi__videobtn--over { transition: none; }
	.faro-testi__media:hover .faro-testi__poster { transform: none; }
}
/* L'autore deve occupare la stessa altezza ovunque: una scheda senza ruolo
   (una riga invece di due) alzerebbe la propria anteprima rispetto alle
   altre. 52px = altezza dell'avatar. */
.faro-testi__author { display: flex; align-items: center; gap: 14px; min-height: 52px; }
.faro-testi__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.faro-testi__meta { display: flex; flex-direction: column; line-height: 1.3; }
.faro-testi__meta strong { color: var(--faro-secondary); }
.faro-testi__meta span { font-size: .85rem; color: var(--faro-muted); }

/* Frecce di navigazione */
.faro-testi__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 0;
	background: var(--faro-primary, #16456b);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 22px -8px rgba(14,44,69,.5);
	transition: background .2s, transform .2s, opacity .2s;
}
.faro-testi__nav:hover { background: var(--faro-secondary, #0e2c45); }
.faro-testi__nav--prev { left: -10px; }
.faro-testi__nav--next { right: -10px; }
.faro-testi__nav[disabled] { opacity: .3; cursor: default; pointer-events: none; }

.faro-testi__placeholder {
	border: 2px dashed rgba(0,0,0,.12); border-radius: var(--faro-radius);
	padding: 60px 24px; text-align: center; color: var(--faro-muted);
}
@media (max-width: 900px) {
	.faro-testi__item { flex: 0 0 clamp(260px, 70%, 340px); }
	.faro-testi__nav--prev { left: -6px; }
	.faro-testi__nav--next { right: -6px; }
}
@media (max-width: 600px) {
	.faro-testi__item { flex: 0 0 85%; }
	.faro-testi__nav { width: 40px; height: 40px; font-size: 22px; }
}

/* =========================================================
   14. PLACEHOLDER
   ========================================================= */
.faro-placeholder {
	display: block; width: 100%; border-radius: var(--faro-radius);
	background: repeating-linear-gradient(45deg, var(--faro-bg-alt), var(--faro-bg-alt) 12px, #eef1f5 12px, #eef1f5 24px);
}
.faro-placeholder--feature { aspect-ratio: 4/3; }
.faro-media-deco .faro-placeholder--feature { aspect-ratio: auto; }
.faro-placeholder--card { aspect-ratio: 16/10; }

/* =========================================================
   15. PAGINE / PROSE / BLOG SINGOLO
   ========================================================= */
.faro-page-head {
	background: linear-gradient(135deg, var(--faro-primary), var(--faro-secondary));
	color: #fff; padding: 80px 0 70px;
}
/* Header con immagine di sfondo (featured image della pagina) */
.faro-page-head--has-image {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 120px 0 100px;
}
.faro-page-head--has-image .faro-container { position: relative; z-index: 2; }
.faro-page-head__overlay {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(135deg, rgba(22,69,107,.82), rgba(14,44,69,.82));
}
.faro-page-head__title { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); }
.faro-page-head__title span { opacity: .8; }
.faro-page-head__desc { opacity: .85; max-width: 700px; }
.faro-page-head--post .faro-eyebrow { color: rgba(255,255,255,.85); }

.faro-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 48px; align-items: start; }
.faro-layout:not(:has(.faro-layout__side)) { grid-template-columns: 1fr; }

.faro-entry__thumb { border-radius: var(--faro-radius); overflow: hidden; margin-bottom: 36px; }
.faro-prose { max-width: 760px; }
.faro-prose h2 { font-size: 1.7rem; margin-top: 1.6em; }
.faro-prose h3 { font-size: 1.35rem; margin-top: 1.4em; }
.faro-prose img { border-radius: var(--faro-radius); margin: 1.5em 0; }
.faro-prose blockquote {
	border-left: 4px solid var(--faro-accent); margin: 1.6em 0; padding: .4em 0 .4em 24px;
	font-style: italic; color: var(--faro-secondary);
}
.faro-prose ul, .faro-prose ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.faro-prose li { margin-bottom: .4em; }
.faro-prose a { text-decoration: underline; text-underline-offset: 3px; }

.faro-entry__footer { margin-top: 36px; }
.faro-tags a {
	display: inline-block; font-size: .8rem; padding: 4px 12px; border-radius: 999px;
	background: var(--faro-bg-alt); color: var(--faro-secondary); margin: 0 6px 6px 0;
}

.post-navigation { margin-top: 48px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.post-navigation a { font-weight: 600; color: var(--faro-secondary); }
.faro-navlabel { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faro-accent); }

.faro-layout__side .widget { margin-bottom: 32px; }
.widget-title { font-size: 1.05rem; margin-bottom: 14px; }
.faro-layout__side ul { list-style: none; margin: 0; padding: 0; }
.faro-layout__side li { padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,.06); }

/* paginazione */
.pagination, .nav-links {
	display: flex; gap: 8px; flex-wrap: wrap; margin-top: 48px; justify-content: center;
}
.nav-links .page-numbers {
	display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center;
	border-radius: 10px; background: #fff; color: var(--faro-secondary); font-weight: 600;
	border: 1px solid rgba(0,0,0,.08); padding: 0 12px;
}
.nav-links .page-numbers.current,
.nav-links .page-numbers:hover { background: var(--faro-primary); color: #fff; border-color: var(--faro-primary); }

.faro-empty { padding: 40px 0; color: var(--faro-muted); }

/* form ricerca */
.faro-searchform { display: flex; gap: 10px; max-width: 480px; margin-top: 24px; }
.faro-searchform__input {
	flex: 1; padding: 13px 18px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15);
	font: inherit;
}
.faro-searchform__input:focus { outline: none; border-color: var(--faro-accent); }

/* 404 */
.faro-404__inner { text-align: center; max-width: 600px; margin-inline: auto; }
.faro-404__code { font-family: var(--faro-font-heading); font-weight: 900; font-size: clamp(5rem, 18vw, 11rem); line-height: 1; color: var(--faro-primary); opacity: .15; }
.faro-404__title { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-top: -.3em; }

/* commenti */
.faro-comments { margin-top: 56px; max-width: 760px; }
.faro-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.faro-comments .comment-body { padding: 18px 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.faro-comments .children { list-style: none; padding-left: 28px; }
.faro-comments input[type="text"],
.faro-comments input[type="email"],
.faro-comments input[type="url"],
.faro-comments textarea {
	width: 100%; padding: 12px 16px; border: 1px solid rgba(0,0,0,.15); border-radius: 12px; font: inherit; margin-bottom: 14px;
}

/* =========================================================
   16. FOOTER
   ========================================================= */
.faro-footer {
	background: var(--faro-footer-bg, #0b2236);
	color: rgba(255,255,255,.78);
	padding-top: 70px;
}
/* v1.34.3 — Footer a 5 colonne:
   logo | descrizione | dati aziendali | contattaci | social.
   Le posizioni sono esplicite (grid-column) e non lasciate al flusso: cosi'
   una colonna assente non fa scivolare a sinistra tutte le altre, e i social
   restano ancorati a destra anche quando manca qualcosa in mezzo.
   Il vecchio wrapper .faro-footer__info (un flex che teneva insieme azienda e
   contatti, facendoli contare come UNA colonna sola) e' stato rimosso. */
.faro-footer__top {
	display: grid;
	grid-template-columns: auto minmax(170px, 1.1fr) minmax(160px, 1fr) minmax(170px, 1fr) auto;
	gap: 40px; align-items: start;
	padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.faro-footer__brand      { grid-column: 1; }
.faro-footer__desc       { grid-column: 2; }
.faro-footer__azienda    { grid-column: 3; }
.faro-footer__contatti   { grid-column: 4; }
/* Widget/menu footer: se attivi non hanno piu' una colonna in riga 1, quindi
   vanno a tutta larghezza sulla riga sotto invece di sovrapporsi ai social. */
.faro-footer__widgets    { grid-column: 1 / -1; }
.faro-footer__coltitle { color: #fff; font-size: 1rem; margin: 0 0 14px; font-family: var(--faro-font-heading); }
.faro-footer__data { list-style: none; margin: 0; padding: 0; font-size: .95rem; line-height: 1.5; }
.faro-footer__data li { padding: 4px 0; }
.faro-footer__ragione { color: #fff; font-weight: 600; }
.faro-footer__note { font-size: .85rem; color: rgba(255,255,255,.6); }
.faro-footer__contact a { display: inline-flex; align-items: center; gap: 8px; }
.faro-footer__label { color: rgba(255,255,255,.55); font-size: .82rem; }
.faro-footer__waicon { display: inline-flex; color: #25d366; }
.faro-footer__contact--wa a:hover .faro-footer__waicon { color: #fff; }
.faro-footer__logo { font-family: var(--faro-font-heading); font-weight: 900; font-size: 1.6rem; color: #fff; text-transform: uppercase; letter-spacing: .04em; display: block; }
.faro-footer__brand img {
	max-height: 56px;
	max-width: 240px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
	margin-bottom: 18px;
	display: block;
}
.faro-footer__about { margin: 0; max-width: 360px; font-size: .95rem; }
/* v1.34.2 — Colonna social ancorata alla posizione piu' a destra della riga.
   grid-column esplicito: le icone restano a destra anche quando la colonna
   widget/menu e' assente (caso del sito attuale), dove altrimenti scivolerebbero
   nel primo slot libero. 4 icone disposte 2 colonne x 2 righe. */
.faro-footer__social-col { grid-column: 5; grid-row: 1; justify-self: end; }
.faro-footer__social { display: grid; grid-template-columns: repeat(2, auto); gap: 12px; }
.faro-social {
	width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.08); color: #fff; transition: background .2s ease, color .2s ease;
}
.faro-social svg { display: block; }
.faro-social:hover { background: var(--faro-accent); color: #fff; }

.faro-footer__widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; }
.faro-footer .widget-title { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.faro-footer .widget ul { list-style: none; margin: 0; padding: 0; }
.faro-footer .widget li { padding: 6px 0; }
.faro-footer a { color: rgba(255,255,255,.78); }
.faro-footer a:hover { color: #fff; }
.faro-footer-menu, .faro-footer-bottom-menu { list-style: none; margin: 0; padding: 0; }
.faro-footer-menu li { padding: 6px 0; }

.faro-footer__bottom {
	display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
	padding: 26px 0; font-size: .85rem; color: rgba(255,255,255,.55);
}
.faro-footer-bottom-menu { display: flex; gap: 18px; flex-wrap: wrap; }

/* v1.43.1 — Link legali nella riga del copyright.
   I servizi tipo iubenda stampano i propri <a> con classi loro: qui si governa
   solo il contenitore e il colore del testo, senza combattere il loro stile. */
.faro-footer__legal {
	display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
}
.faro-footer__legal a {
	color: rgba(255,255,255,.72);
	text-decoration: none;
	transition: color .2s ease;
}
.faro-footer__legal a:hover,
.faro-footer__legal a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* torna su */
.faro-totop {
	position: fixed; right: 22px; bottom: 22px; z-index: 90;
	width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
	background: var(--faro-primary); color: #fff; font-size: 1.1rem;
	opacity: 0; visibility: hidden; transform: translateY(12px); transition: .3s ease;
	box-shadow: 0 12px 26px -10px var(--faro-primary);
}
.faro-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* =========================================================
   17. ANIMAZIONI ALLO SCROLL
   ========================================================= */
/* v1.36.0 — I blocchi MOLTO ALTI non vengono nascosti in partenza.
   Un blocco piu' alto di due schermate non entra mai in scena tutto insieme:
   l'animazione non si apprezza, mentre il rischio che resti invisibile e'
   concreto (vedi la nota sul threshold in main.js). Per quelli lo stato di
   riposo e' "visibile", coerente con il criterio del tema: se lo script non
   gira si perde un effetto, mai il contenuto. */
[data-faro-anim] { opacity: 0; transition: opacity var(--faro-anim-duration, 700ms) ease, transform var(--faro-anim-duration, 700ms) cubic-bezier(.22,.61,.36,1); transition-delay: var(--faro-delay, 0ms); will-change: opacity, transform; }
.faro-pb-glossary__list[data-faro-anim] { opacity: 1; transform: none; }
[data-faro-anim="fade-up"] { transform: translateY(40px); }
[data-faro-anim="fade-in"] { transform: none; }
[data-faro-anim="zoom-in"] { transform: scale(.92); }
[data-faro-anim="slide-left"] { transform: translateX(-50px); }
[data-faro-anim="slide-right"] { transform: translateX(50px); }
[data-faro-anim].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-faro-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
	.faro-banner { background-attachment: scroll; }
}

/* =========================================================
   18. RESPONSIVE
   ========================================================= */
/* v1.34.3 — Passaggio intermedio del footer: 5 colonne stanno strette sotto i
   1200px. Qui le posizioni esplicite vengono azzerate e le colonne si
   dispongono da sole su piu' righe. Deve stare PRIMA dei breakpoint 1024 e
   900, altrimenti li sovrascriverebbe a parita' di specificita'. */
@media (max-width: 1200px) {
	.faro-footer__top { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 36px; }
	.faro-footer__brand,
	.faro-footer__desc,
	.faro-footer__azienda,
	.faro-footer__contatti,
	.faro-footer__widgets,
	.faro-footer__social-col {
		grid-column: auto; grid-row: auto; justify-self: start;
	}
}

@media (max-width: 1024px) {
	.faro-services__grid { grid-template-columns: repeat(2, 1fr); }
	.faro-cards { grid-template-columns: repeat(2, 1fr); }
	/* Su tablet 3 e 4 colonne diventano 2; chi ne ha gia' 2 le tiene. */
	.faro-pb-showcase__grid--3,
	.faro-pb-showcase__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.faro-vmp__grid { grid-template-columns: 1fr; gap: 28px; }
	.faro-vmp__col { border-left: 0; border-top: 3px solid rgba(255,255,255,.25); padding: 18px 0 0; }
}

/* =========================================================
   Margini testo personalizzati (impostati nei blocchi).
   Applicati via CSS variables: valgono su desktop, si azzerano
   su mobile per non schiacciare il testo (vedi media query sotto).
   ========================================================= */
.faro-pb-intro2col__text--custom-margin,
.faro-pb-introtext__inner--custom-margin,
.faro-values__inner--custom-margin {
	padding-left: var(--faro-text-ml, 0);
	padding-right: var(--faro-text-mr, 0);
}

@media (max-width: 900px) {
	.faro-nav, .faro-header__cta { display: none; }
	.faro-burger { display: flex; }
	/* Azzera i margini testo personalizzati: su mobile il testo torna a piena
	   larghezza (i valori px pensati per desktop qui schiaccerebbero il testo). */
	.faro-pb-intro2col__text--custom-margin,
	.faro-pb-introtext__inner--custom-margin,
	.faro-values__inner--custom-margin {
		padding-left: 0;
		padding-right: 0;
	}
	/* Intro 2 colonne: su mobile una colonna sola (testo sopra, immagine sotto) */
	.faro-pb-intro2col__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.faro-pb-intro2col--img-left .faro-pb-intro2col__media { order: 0; }
	.faro-about__grid, .faro-feature { grid-template-columns: 1fr; gap: 36px; }
	.faro-about--img-right .faro-about__media,
	.faro-feature--img-right .faro-feature__media { order: 0; }
	.faro-feature + .faro-feature { margin-top: 56px; }
	.faro-footer__top { grid-template-columns: 1fr; gap: 40px; }
	.faro-footer__brand,
	.faro-footer__desc,
	.faro-footer__azienda,
	.faro-footer__contatti,
	.faro-footer__widgets,
	.faro-footer__social-col {
		grid-column: 1; grid-row: auto; justify-self: start;
	}
	.faro-footer__about { max-width: 100%; }
	.faro-layout { grid-template-columns: 1fr; }
	.faro-banner { background-attachment: scroll; }
}

@media (max-width: 640px) {
	.faro-container { padding-inline: 18px; }
	.faro-services__grid, .faro-cards { grid-template-columns: 1fr; }
	.faro-pb-showcase__grid { grid-template-columns: minmax(0, 1fr) !important; }
	.faro-service { border-right: 0; }
	.faro-footer__bottom { flex-direction: column; align-items: flex-start; }
	.faro-btn { width: 100%; }
	.faro-header__actions .faro-btn { width: auto; }
	.faro-media-deco { aspect-ratio: 4/3; }
	.faro-media-deco .faro-media-deco__img { inset: 0; width: 100%; height: 100%; }
	.faro-media-deco .faro-media-deco__box { display: none; }
}

/* =========================================================
   PAGINE A BLOCCHI (v1.2) — stili frontend
   ========================================================= */

/* Sfondi di sezione comuni */
.faro-bg-alt     { background: #f4f6f8; }
.faro-bg-primary { background: var(--faro-primary); color: #fff; }
.faro-bg-primary .faro-eyebrow,
.faro-bg-primary h2, .faro-bg-primary h3, .faro-bg-primary p { color: #fff; }
.faro-eyebrow--on-dark { color: rgba(255,255,255,.85); }

/* ---------- 1. Page head ---------- */
.faro-pb-pagehead {
	position: relative; color: #fff;
	display: flex; align-items: flex-end; padding: 60px 0 50px;
	background-size: cover; background-position: center; background-color: var(--faro-primary);
}
/* v1.33.2 — Layer dedicato per l'immagine, così la sfocatura non tocca il
   testo. overflow:hidden sulla sezione ritaglia l'ingrandimento applicato
   per nascondere l'alone che il blur lascia sui bordi. */
.faro-pb-pagehead { overflow: hidden; }
.faro-pb-pagehead__bg {
	position: absolute; inset: 0; z-index: 0;
	background-size: cover; background-position: center;
	pointer-events: none;
}
.faro-pb-pagehead__overlay {
	position: absolute; inset: 0; background: var(--faro-primary); z-index: 1;
}
.faro-pb-pagehead .faro-container { position: relative; z-index: 2; }
.faro-pb-pagehead__title {
	font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0 0 10px;
	font-family: var(--faro-font-heading); font-weight: 600; color: #fff;
}
.faro-pb-pagehead__sub { font-size: 1.1rem; color: rgba(255,255,255,.85); margin: 0; }

/* ---------- 2. Intro two col ---------- */
/* v1.35.1 — minmax(0, ...) invece di 1fr secco.
   "1fr" significa "minmax(auto, 1fr)", e quel minimo "auto" vale il
   min-content dell'elemento: per un'immagine con max-width 480px il
   min-content E' 480px, quindi la colonna non poteva scendere sotto quella
   soglia. Su uno schermo da 390px la griglia restava larga 480px e il testo
   accanto veniva trascinato fuori dallo schermo, dove overflow-x:clip lo
   tagliava di netto. minmax(0, ...) toglie quel pavimento. */
.faro-pb-intro2col__grid {
	display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 60px; align-items: center;
}
.faro-pb-intro2col--img-left .faro-pb-intro2col__media { order: -1; }
.faro-pb-intro2col__text p { color: var(--faro-text); line-height: 1.65; margin-bottom: 1em; }
.faro-pb-intro2col__media { display: flex; justify-content: center; min-width: 0; }
.faro-pb-intro2col__text { min-width: 0; }
/* I preset passano da "max-width: Npx" a "min(100%, Npx)": la misura scelta
   resta il tetto su schermo largo, ma non puo' mai superare lo spazio
   disponibile. Vale a ogni larghezza, non solo sotto una media query. */
.faro-pb-intro2col__img { max-width: 100%; height: auto; }
.faro-pb-intro2col--size-sm .faro-pb-intro2col__img { max-width: min(100%, 200px); }
.faro-pb-intro2col--size-md .faro-pb-intro2col__img { max-width: min(100%, 340px); }
.faro-pb-intro2col--size-lg .faro-pb-intro2col__img { max-width: min(100%, 480px); }
/* Larghezza personalizzata dal campo del blocco: se la variabile non c'e',
   il fallback e' 100% e la regola non cambia nulla. Sta DOPO i preset,
   quindi a parita' di specificita' li sovrascrive come deve. */
.faro-pb-intro2col__img[style*="--faro-i2c-imgw"] { max-width: min(100%, var(--faro-i2c-imgw, 100%)); }

/* ---------- 3. Intro testo ---------- */
.faro-pb-introtext__inner { max-width: 920px; }
.faro-pb-introtext--center .faro-pb-introtext__inner { margin: 0 auto; text-align: center; }
/* v1.18: quando align = left o right, rilascio il max-width per far espandere
   il testo fino al bordo del container (1200px). Pacibo può comunque imporre
   un limite custom tramite il campo "Larghezza massima testo" del blocco. */
.faro-pb-introtext--left  .faro-pb-introtext__inner { max-width: none; text-align: left; }
.faro-pb-introtext--right .faro-pb-introtext__inner { max-width: none; text-align: right; }
.faro-pb-introtext__title {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 8px 0 16px; color: var(--faro-secondary);
}
.faro-pb-introtext__body p { color: var(--faro-text); line-height: 1.7; margin-bottom: 1em; }

/* ---------- 4. Book promo ---------- */
.faro-pb-bookpromo { position: relative; }
.faro-pb-bookpromo__overlay {
	position: absolute; inset: 0; background: #fff; z-index: 1;
}
.faro-pb-bookpromo .faro-container { position: relative; z-index: 2; }
/* v1.35.1 — La prima colonna era fissa a 280px: sommata al gap di 50px
   superava lo spazio utile gia' su un telefono da 390px. min(280px, 38%)
   la lascia intatta su schermo largo e la fa cedere quando serve. */
.faro-pb-bookpromo__grid {
	display: grid; grid-template-columns: min(280px, 38%) minmax(0, 1fr); gap: 50px; align-items: center;
	max-width: 1080px; margin: 0 auto;
}
.faro-pb-bookpromo__img,
.faro-pb-bookpromo__placeholder {
	width: 100%; max-width: 280px; height: auto; aspect-ratio: 3/4;
	border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(14,44,69,.35);
	display: block;
}
.faro-pb-bookpromo__title {
	font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 6px 0 14px;
	color: var(--faro-secondary); line-height: 1.4;
}
.faro-pb-bookpromo__text p { color: var(--faro-text); line-height: 1.65; margin-bottom: 1em; }

/* ---------- 5. Text banner — supporta fino a 3 testi indipendenti ---------- */
.faro-pb-textbanner {
	position: relative; /* per overlay e isolation dei testi */
}
.faro-pb-textbanner > .faro-container {
	display: flex; flex-direction: column; gap: 28px;
	max-width: 1080px; position: relative; z-index: 2;
}
.faro-pb-textbanner__text {
	max-width: 1000px; margin: 0 auto; width: 100%; text-align: center;
}
.faro-pb-textbanner__body p {
	font-size: clamp(1.1rem, 1.9vw, 1.45rem); color: var(--faro-secondary);
	font-weight: 600; margin: 0 0 .8em;
	/* v1.32 — interlinea configurabile per singolo testo (campo "Interlinea"
	   del blocco). Se la variabile non c'è si torna all'1.5 storico. Un
	   line-height messo dall'editor sul singolo <p> resta comunque prioritario
	   perché è inline. */
	line-height: var(--faro-tb-lh, 1.5);
}
.faro-pb-textbanner__body li,
.faro-pb-textbanner__body blockquote { line-height: var(--faro-tb-lh, inherit); }
.faro-pb-textbanner__body p:last-child { margin-bottom: 0; }
.faro-pb-textbanner__body h2,
.faro-pb-textbanner__body h3,
.faro-pb-textbanner__body h4 { color: var(--faro-secondary); margin: 0 0 .4em; }
.faro-pb-textbanner__cta { margin-top: 22px; }

/* ----- Tabelle nei blocchi richtext (stile "Word") ----- */
/* v1.40.0 — Testo su piu' colonne SENZA tabelle.
   La proprieta' "columns" del CSS divide il contenuto in colonne vere: un
   elenco puntato unico si ripartisce da solo, e su telefono basta riportare
   il valore a 1 perche' torni in colonna unica. E' quello che una tabella a
   due colonne non puo' fare, perche' una riga di tabella resta una riga.
   break-inside: avoid impedisce che una voce dell'elenco venga spezzata
   a meta' fra il fondo di una colonna e l'inizio della successiva. */
/* v1.40.1 — Gli elenchi si allineano a sinistra.
   .faro-pb-textbanner__text centra tutto il contenuto del blocco: va bene per
   paragrafi e titoli, non per un elenco puntato, dove il pallino resta al suo
   posto e il testo gli si allontana riga per riga. Con la tabella il problema
   non si vedeva perche' le celle non ereditavano quella centratura; tolta la
   tabella, e' emerso.
   La regola vale per TUTTI gli elenchi del Banner testo, non solo per quelli
   su piu' colonne: un elenco centrato e' sbagliato in ogni caso. */
.faro-pb-textbanner__body ul,
.faro-pb-textbanner__body ol { text-align: left; }
.faro-pb-textbanner__body--cols-2 { columns: 2; column-gap: 40px; }
.faro-pb-textbanner__body--cols-3 { columns: 3; column-gap: 34px; }
.faro-pb-textbanner__body--cols-2 li,
.faro-pb-textbanner__body--cols-3 li,
.faro-pb-textbanner__body--cols-2 p,
.faro-pb-textbanner__body--cols-3 p { break-inside: avoid; }
/* Il primo elemento non deve staccarsi dal bordo alto della colonna. */
.faro-pb-textbanner__body--cols-2 > *:first-child,
.faro-pb-textbanner__body--cols-3 > *:first-child { margin-top: 0; }
@media (max-width: 700px) {
	.faro-pb-textbanner__body--cols-2,
	.faro-pb-textbanner__body--cols-3 { columns: 1; }
}

/* v1.35.2 — table-layout: fixed.
   Con il valore automatico le colonne si dimensionano sul contenuto e la
   tabella non scende MAI sotto il proprio min-content: "width: 100%" viene
   ignorato quando il contenuto e' piu' largo, e su schermo stretto la
   seconda colonna finiva fuori dal riquadro (dove overflow-x:clip la
   tagliava). Con "fixed" la larghezza dichiarata comanda davvero e le
   colonne si dividono lo spazio disponibile.
   overflow-wrap sulle celle: una parola lunga da sola non deve poter
   allargare la colonna oltre il suo spazio. */
.faro-pb-textbanner__body table,
.faro-block .faro-rich table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
	max-width: 100%;
	margin: 18px 0;
	text-align: left;
	font-size: 1rem;
	line-height: 1.5;
}
.faro-pb-textbanner__body table td,
.faro-pb-textbanner__body table th,
.faro-block .faro-rich table td,
.faro-block .faro-rich table th {
	border: 1px solid rgba(14,44,69,.28);
	padding: 10px 14px;
	vertical-align: top;
	overflow-wrap: break-word;
	word-break: normal;
}
.faro-pb-textbanner__body table th,
.faro-block .faro-rich table th {
	background: rgba(22,69,107,.08);
	font-weight: 700;
}
/* Variante senza bordi/cornice (toggle "Bordi tabella" nell'editor) */
.faro-pb-textbanner__body table.faro-table--noborder,
.faro-pb-textbanner__body table.faro-table--noborder td,
.faro-pb-textbanner__body table.faro-table--noborder th,
.faro-block .faro-rich table.faro-table--noborder,
.faro-block .faro-rich table.faro-table--noborder td,
.faro-block .faro-rich table.faro-table--noborder th {
	border: 0;
}
.faro-pb-textbanner__body table.faro-table--noborder th,
.faro-block .faro-rich table.faro-table--noborder th {
	background: transparent;
}
/* Su sezione scura, i bordi tabella diventano chiari */
.faro-pb-textbanner.on-dark .faro-pb-textbanner__body table td,
.faro-pb-textbanner.on-dark .faro-pb-textbanner__body table th,
.faro-pb-textbanner.faro-bg-primary .faro-pb-textbanner__body table td,
.faro-pb-textbanner.faro-bg-primary .faro-pb-textbanner__body table th {
	border-color: rgba(255,255,255,.3);
}

/* v1.35.4 — Tabelle nei blocchi rich text: NESSUNA modifica al loro
   display. Due tentativi hanno dimostrato che si rompe qualcosa ogni volta:
   la 1.35.2 (display:block su tbody/tr/td) sovrapponeva le celle perche' il
   browser smette di calcolare l'altezza delle righe; la 1.35.3
   (display:block sulla sola tabella) faceva collassare il contenuto ad
   altezza zero.
   Resta solo table-layout:fixed + overflow-wrap, che agiscono DENTRO il
   modello tabellare invece di scavalcarlo: bastano a impedire lo
   sfondamento, che era il difetto da correggere.
   Una tabella usata per impaginare due colonne di testo non e' rendibile
   responsive per via del CSS: va sostituita con il blocco "Testi in
   griglia", che si impila da solo. */

/* Box bianco */
.faro-pb-textbanner__text--white-on-blue .faro-pb-textbanner__body,
.faro-pb-textbanner__text--white-on-blue > .faro-pb-textbanner__body {
	background: #fff; border-radius: 14px; padding: 44px 56px;
	box-shadow: 0 30px 60px -28px rgba(14,44,69,.18);
}

/* Box blu */
.faro-pb-textbanner__text--blue-on-white .faro-pb-textbanner__body {
	background: var(--faro-primary); color: #fff; border-radius: 14px; padding: 44px 56px;
}
.faro-pb-textbanner__text--blue-on-white .faro-pb-textbanner__body p,
.faro-pb-textbanner__text--blue-on-white .faro-pb-textbanner__body h2,
.faro-pb-textbanner__text--blue-on-white .faro-pb-textbanner__body h3,
.faro-pb-textbanner__text--blue-on-white .faro-pb-textbanner__body h4 { color: #fff; }

/* Trasparente: solo testo, niente box. Padding ridotto. */
.faro-pb-textbanner__text--transparent .faro-pb-textbanner__body {
	padding: 8px 12px;
}
/* Quando la sezione ha sfondo scuro (blu) o overlay scuro, il testo trasparente è bianco */
.faro-pb-textbanner.on-dark .faro-pb-textbanner__text--transparent .faro-pb-textbanner__body p,
.faro-pb-textbanner.faro-bg-primary .faro-pb-textbanner__text--transparent .faro-pb-textbanner__body p,
.faro-pb-textbanner.faro-bg-primary .faro-pb-textbanner__text--transparent .faro-pb-textbanner__body h2,
.faro-pb-textbanner.faro-bg-primary .faro-pb-textbanner__text--transparent .faro-pb-textbanner__body h3,
.faro-pb-textbanner.faro-bg-primary .faro-pb-textbanner__text--transparent .faro-pb-textbanner__body h4 { color: #fff; }

/* Quando un box (bianco/blu) è dentro una sezione blu navy, va comunque benissimo: il box ha il suo bg */

/* ---------- 6. Interventi ---------- */
.faro-pb-interventi {
	position: relative; background-color: var(--faro-primary);
	background-size: cover; background-position: center;
	color: #fff;
}
.faro-pb-interventi__overlay {
	position: absolute; inset: 0; background: var(--faro-primary); opacity: .85; z-index: 1;
}
.faro-pb-interventi .faro-container { position: relative; z-index: 2; }
.faro-pb-interventi__head { text-align: center; margin-bottom: 40px; color: #fff; }
.faro-pb-interventi__title {
	font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 8px 0 8px; color: #fff;
}
.faro-pb-interventi__sub { font-size: 1.05rem; color: rgba(255,255,255,.9); margin: 0; }
.faro-pb-interventi__cards { display: grid; gap: 24px; }
.faro-pb-interventi__cards--1 { grid-template-columns: minmax(0, 800px); justify-content: center; }
.faro-pb-interventi__cards--2 { grid-template-columns: repeat(1, 1fr); }
.faro-pb-interventi__cards--3 { grid-template-columns: repeat(2, 1fr); }
.faro-pb-interventi__cards--4 { grid-template-columns: repeat(2, 1fr); }
.faro-pb-interventi__card {
	background: #fff; color: var(--faro-text);
	border-radius: 12px; padding: 30px 34px;
}
.faro-pb-interventi__card-title {
	font-size: 1.2rem; color: var(--faro-secondary); margin: 0 0 16px;
}
.faro-pb-interventi__card-body { color: var(--faro-text); line-height: 1.65; }
.faro-pb-interventi__card-body p  { margin-bottom: 1em; }
.faro-pb-interventi__card-body strong,
.faro-pb-interventi__card-body b  { color: var(--faro-secondary); }
.faro-pb-interventi__card-cta     { margin-top: 16px; }

/* ---------- 7. Team grid ---------- */
.faro-pb-team__head { margin-bottom: 30px; padding-bottom: 14px; border-bottom: 1px solid #e6e8ec; }
.faro-pb-team__title { font-size: 1.6rem; margin: 8px 0 0; color: var(--faro-secondary); }
.faro-pb-team__grid  { display: grid; gap: 36px 28px; }
.faro-pb-team__grid--2 { grid-template-columns: repeat(2, 1fr); }
.faro-pb-team__grid--3 { grid-template-columns: repeat(3, 1fr); }
.faro-pb-team__grid--4 { grid-template-columns: repeat(4, 1fr); }
.faro-pb-team__member { text-align: center; }
.faro-pb-team__photo {
	aspect-ratio: 1/1; max-width: 260px; margin: 0 auto 16px;
	border-radius: 12px; overflow: hidden; background: #d8dde3;
}
.faro-pb-team__photo .faro-pb-team__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.faro-pb-team__placeholder { width: 100%; height: 100%; aspect-ratio: 1/1; }
.faro-pb-team__name { font-size: 1.05rem; color: var(--faro-secondary); margin: 0 0 4px; font-weight: 700; }
.faro-pb-team__role { color: var(--faro-muted); font-size: .9rem; margin: 0 0 8px; }
.faro-pb-team__bio  { color: var(--faro-text); font-size: .9rem; line-height: 1.5; margin: 0; }

/* ---------- 8. Glossary ---------- */
.faro-pb-glossary__list { display: flex; flex-direction: column; gap: 14px; max-width: 1080px; margin: 0 auto; }
.faro-pb-glossary__letter {
	background: var(--faro-primary); color: #fff;
	border-radius: 999px; overflow: hidden; transition: border-radius .2s;
}
.faro-pb-glossary__letter[open] {
	background: #fff; border: 1px solid var(--faro-primary); border-radius: 16px;
}
.faro-pb-glossary__summary {
	display: flex; align-items: center; gap: 14px; padding: 18px 28px;
	font-weight: 600; cursor: pointer; list-style: none;
	color: #fff; background: var(--faro-primary); border-radius: 999px;
	transition: background .2s;
}
.faro-pb-glossary__letter[open] .faro-pb-glossary__summary { border-radius: 16px 16px 0 0; }
.faro-pb-glossary__summary::-webkit-details-marker { display: none; }
.faro-pb-glossary__letter-label { font-size: 1.3rem; font-family: var(--faro-font-heading); }
.faro-pb-glossary__count { margin-left: auto; opacity: .8; font-size: .85rem; font-weight: 400; }
.faro-pb-glossary__chevron { font-size: 1.4rem; transition: transform .2s; }
.faro-pb-glossary__letter[open] .faro-pb-glossary__chevron { transform: rotate(180deg); }
.faro-pb-glossary__body { background: #fff; padding: 22px 32px 28px; color: var(--faro-text); }
.faro-pb-glossary__entries { margin: 0; }
.faro-pb-glossary__entries dt {
	font-weight: 700; color: var(--faro-secondary);
	margin-top: 12px; font-size: 1rem;
}
.faro-pb-glossary__entries dt:first-child { margin-top: 0; }
.faro-pb-glossary__entries dd {
	margin: 4px 0 0 0; color: var(--faro-text); line-height: 1.6; padding-left: 0;
}
.faro-pb-glossary__empty { color: var(--faro-muted); font-style: italic; margin: 0; }

/* ---------- 12. Services grid (card grandi) ---------- */
.faro-pb-srvgrid__head { margin-bottom: 30px; }
.faro-pb-srvgrid__eyebrow-row {
	display: flex; align-items: center; gap: 16px; margin-bottom: 8px;
}
.faro-pb-srvgrid__rule { flex: 1; height: 1px; background: #d4d9e0; }
.faro-pb-srvgrid__title {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--faro-secondary); margin: 0;
}
.faro-pb-srvgrid__grid { display: grid; gap: 20px; }
.faro-pb-srvgrid__grid--2 { grid-template-columns: repeat(2, 1fr); }
.faro-pb-srvgrid__grid--3 { grid-template-columns: repeat(3, 1fr); }
.faro-pb-srvgrid__grid--4 { grid-template-columns: repeat(4, 1fr); }
.faro-pb-srvgrid__card {
	background: #fff; border-radius: 14px;
	padding: 28px 26px; text-align: center;
	box-shadow: 0 10px 30px -18px rgba(14,44,69,.25);
	transition: transform .2s, box-shadow .2s;
	text-decoration: none; color: inherit;
	display: flex; flex-direction: column; justify-content: center;
	min-height: 130px;
}
.faro-pb-srvgrid__card.is-link:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px -16px rgba(14,44,69,.35);
}
.faro-pb-srvgrid__card-title { font-size: 1rem; color: var(--faro-secondary); margin: 0 0 6px; line-height: 1.3; font-weight: 700; }
.faro-pb-srvgrid__card-sub   { color: var(--faro-muted); font-size: .9rem; margin: 0; }

/* ---------- 13. Additional services ---------- */
.faro-pb-addserv__head {
	display: flex; align-items: center; gap: 16px; margin-bottom: 26px;
}
.faro-pb-addserv__rule { flex: 1; height: 1px; background: #d4d9e0; }
.faro-pb-addserv__grid { display: grid; gap: 22px 28px; }
.faro-pb-addserv__grid--2 { grid-template-columns: repeat(2, 1fr); }
.faro-pb-addserv__grid--3 { grid-template-columns: repeat(3, 1fr); }
.faro-pb-addserv__grid--4 { grid-template-columns: repeat(4, 1fr); }
.faro-pb-addserv__item    { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.faro-pb-addserv__title   {
	font-size: .95rem; color: var(--faro-secondary); margin: 0;
	font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}

/* ---------- 14. Events list (riusa .faro-cards della home) ---------- */
.faro-pb-events .faro-cards--2 { grid-template-columns: repeat(2, 1fr); }
.faro-pb-events .faro-cards--3 { grid-template-columns: repeat(3, 1fr); }
.faro-pb-events .faro-cards--4 { grid-template-columns: repeat(4, 1fr); }
.faro-empty { text-align: center; color: var(--faro-muted); padding: 40px 0; }

/* ---------- 15. CTA banner pagine ---------- */
.faro-pb-cta {
	background-size: cover; background-position: center; color: #fff;
	display: flex; align-items: center; padding: 60px 0;
}
.faro-pb-cta--center .faro-banner__content { text-align: center; margin: 0 auto; }
.faro-pb-cta--right  .faro-banner__content { margin-left: auto; text-align: right; max-width: none; }
/* v1.18: stesso fix di intro_text — left rilascia il max-width per usare tutta
   la larghezza del container (default era ereditato da .faro-banner__content = 760px). */
.faro-pb-cta--left   .faro-banner__content { text-align: left; max-width: none; }
.faro-pb-cta__title  {
	font-size: clamp(1.6rem, 3vw, 2.4rem); color: #fff; margin: 8px 0 16px;
	line-height: 1.25; font-weight: 600;
}

/* ---------- 16. Contact form ---------- */
.faro-pb-contact__head { text-align: center; margin-bottom: 28px; }
/* v1.39.0 — Dimensioni regolabili di titolo e sottotitolo.
   La variabile non viene emessa quando il campo vale 0, quindi il fallback
   del var() e' il clamp() responsivo di sempre: chi non tocca il campo non
   vede cambiare nulla, e il testo continua a scalare con lo schermo. */
.faro-pb-contact__title {
	font-size: var(--faro-cf-title, clamp(1.6rem, 2.8vw, 2.2rem));
	color: var(--faro-secondary); margin: 0 0 8px;
}
.faro-pb-contact__sub {
	font-size: var(--faro-cf-sub, 1rem);
	color: var(--faro-muted); margin: 0; line-height: 1.6;
}
/* Numero WhatsApp cliccabile dentro al sottotitolo: sottolineato da subito,
   perche' un link riconoscibile solo al passaggio del mouse non aiuta chi
   naviga da telefono — che poi e' chi usera' WhatsApp. */
.faro-pb-contact__wa-link {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
.faro-pb-contact__wa-link:hover { color: #25d366; }
/* Pulsante WhatsApp: stessa forma degli altri pulsanti del tema, colore
   proprio del marchio perche' qui il colore E' il riconoscimento. */
.faro-pb-contact__wa { margin: 18px 0 0; }
.faro-btn--wa {
	background: #25d366;
	border-color: #25d366;
	color: #fff;
	gap: 9px;
}
.faro-btn--wa:hover {
	background: #1eb855;
	border-color: #1eb855;
	color: #fff;
	box-shadow: 0 14px 30px -12px rgba(37,211,102,.7);
}
.faro-btn__wa-icon { flex: 0 0 auto; }
.faro-pb-contact__form { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.faro-pb-contact__row  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.faro-pb-contact__form input[type="text"],
.faro-pb-contact__form input[type="email"],
.faro-pb-contact__form input[type="tel"],
.faro-pb-contact__form textarea {
	width: 100%; padding: 14px 18px;
	background: #f4f6f8; border: 1px solid #e6e8ec; border-radius: 8px;
	font-family: inherit; font-size: 1rem; color: var(--faro-text);
	transition: border-color .15s, background .15s;
}
.faro-pb-contact__form input:focus,
.faro-pb-contact__form textarea:focus {
	outline: 0; border-color: var(--faro-accent); background: #fff;
}
.faro-pb-contact__form textarea { resize: vertical; min-height: 140px; }
.faro-pb-contact__check {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: .85rem; color: var(--faro-muted); line-height: 1.5;
}
.faro-pb-contact__check input { margin-top: 3px; flex: 0 0 auto; }
.faro-pb-contact__actions { display: flex; justify-content: flex-end; }

.faro-pb-contact__notice {
	max-width: 900px; margin: 0 auto 20px; padding: 14px 20px;
	background: #e8f5e9; border-left: 4px solid #2e7d32; border-radius: 4px;
	color: #1b5e20;
}
.faro-pb-contact__notice--error {
	background: #ffebee; border-left-color: #c62828; color: #b71c1c;
}

/* ---------- Section head (riuso) ---------- */
.faro-section-head { text-align: left; margin-bottom: 26px; }
.faro-section-head__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 6px 0 0; color: var(--faro-secondary); }

/* ---------- Prose (contenuto editor) ---------- */
.faro-prose { max-width: 800px; margin: 0 auto; }
.faro-prose p { color: var(--faro-text); line-height: 1.7; margin-bottom: 1em; }
.faro-prose h2 { color: var(--faro-secondary); font-size: 1.6rem; margin: 1.4em 0 .6em; }
.faro-prose h3 { color: var(--faro-secondary); font-size: 1.25rem; margin: 1.2em 0 .5em; }
.faro-prose ul, .faro-prose ol { padding-left: 1.4em; margin-bottom: 1em; }
.faro-prose li { margin-bottom: .35em; line-height: 1.6; }
.faro-prose img { max-width: 100%; height: auto; border-radius: 8px; }

/* ---------- Button piccolo ---------- */
.faro-btn--sm { padding: 9px 18px; font-size: .85rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.faro-pb-intro2col__grid,
	.faro-pb-bookpromo__grid { grid-template-columns: 1fr; gap: 36px; }
	.faro-pb-bookpromo__grid { max-width: 480px; }
	.faro-pb-srvgrid__grid--4,
	.faro-pb-srvgrid__grid--3 { grid-template-columns: repeat(2, 1fr); }
	.faro-pb-addserv__grid--4,
	.faro-pb-addserv__grid--3 { grid-template-columns: repeat(2, 1fr); }
	.faro-pb-team__grid--4,
	.faro-pb-team__grid--3 { grid-template-columns: repeat(2, 1fr); }
	.faro-pb-interventi__cards--3,
	.faro-pb-interventi__cards--4 { grid-template-columns: 1fr; }
	.faro-pb-events .faro-cards--4,
	.faro-pb-events .faro-cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.faro-pb-pagehead { padding: 40px 0 30px; }
	.faro-pb-textbanner__text--white-on-blue .faro-pb-textbanner__body,
	.faro-pb-textbanner__text--blue-on-white .faro-pb-textbanner__body { padding: 32px 24px; }
	.faro-pb-interventi__card { padding: 22px 22px; }
	.faro-pb-glossary__summary { padding: 14px 20px; }
	.faro-pb-glossary__body { padding: 18px 22px 22px; }
	.faro-pb-srvgrid__grid,
	.faro-pb-addserv__grid,
	.faro-pb-team__grid,
	.faro-pb-events .faro-cards { grid-template-columns: 1fr !important; }
	.faro-pb-contact__row { grid-template-columns: 1fr; }
	.faro-pb-contact__actions { justify-content: stretch; }
	.faro-pb-contact__actions .faro-btn { width: 100%; }
}

/* Markdown semplice nei blocchi pagina (h4 generato da ##) */
.faro-md-h {
	font-size: 1rem; color: var(--faro-secondary); margin: 1.2em 0 .35em;
	font-weight: 700; line-height: 1.4;
}

/* =========================================================
   v1.4 — Nuovi blocchi: events_cards, text_grid
   ========================================================= */

/* ---------- Events Cards ---------- */
.faro-pb-evgrid__grid { display: grid; gap: 28px; }
.faro-pb-evgrid__grid--2 { grid-template-columns: repeat(2, 1fr); }
.faro-pb-evgrid__grid--3 { grid-template-columns: repeat(3, 1fr); }
.faro-pb-evgrid__grid--4 { grid-template-columns: repeat(4, 1fr); }

.faro-pb-evgrid__card {
	display: flex; flex-direction: column;
	background: #fff; border-radius: 12px; overflow: hidden;
	box-shadow: 0 10px 30px -16px rgba(14,44,69,.18);
	text-decoration: none; color: inherit;
	transition: transform .2s, box-shadow .2s;
}
.faro-pb-evgrid__card.is-link:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 42px -16px rgba(14,44,69,.3);
}
.faro-pb-evgrid__media {
	aspect-ratio: 16/10; background: #d8dde3; overflow: hidden;
}
.faro-pb-evgrid__media .faro-pb-evgrid__img,
.faro-pb-evgrid__media .faro-placeholder--card {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.faro-pb-evgrid__body {
	padding: 22px 24px 24px;
	display: flex; flex-direction: column; gap: 6px;
}
.faro-pb-evgrid__date {
	font-size: .75rem; color: var(--faro-muted);
	text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.faro-pb-evgrid__title {
	font-size: 1.05rem; color: var(--faro-secondary);
	margin: 4px 0 0; font-weight: 700; line-height: 1.35;
}
.faro-pb-evgrid__sub {
	font-style: italic; color: var(--faro-muted);
	margin: 0; font-size: .9rem;
}
.faro-pb-evgrid__text {
	margin-top: 6px; color: var(--faro-text); font-size: .9rem; line-height: 1.55;
}
.faro-pb-evgrid__text p { margin: 0 0 .5em; }
.faro-pb-evgrid__text p:last-child { margin-bottom: 0; }

/* ---------- Text Grid (gruppo box testuali) ---------- */
.faro-pb-txtgrid__head { margin-bottom: 30px; }
.faro-pb-txtgrid__eyebrow-row {
	display: flex; align-items: center; gap: 16px; margin-bottom: 8px;
}
.faro-pb-txtgrid__rule { flex: 1; height: 1px; background: #d4d9e0; }
.faro-pb-txtgrid__title {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--faro-secondary); margin: 0;
}

.faro-pb-txtgrid__grid { display: grid; gap: 22px; }
.faro-pb-txtgrid__grid--2 { grid-template-columns: repeat(2, 1fr); }
.faro-pb-txtgrid__grid--3 { grid-template-columns: repeat(3, 1fr); }
.faro-pb-txtgrid__grid--4 { grid-template-columns: repeat(4, 1fr); }

.faro-pb-txtgrid__card {
	background: #fff; border-radius: 14px;
	padding: 30px 22px; text-align: center;
	box-shadow: 0 10px 30px -18px rgba(14,44,69,.22);
	color: var(--faro-secondary);
	min-height: 140px;
	display: flex; align-items: center; justify-content: center;
	text-decoration: none;
	transition: transform .2s, box-shadow .2s;
}
.faro-pb-txtgrid__card.is-link:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -18px rgba(14,44,69,.32);
}
.faro-pb-txtgrid__body {
	font-weight: 700; line-height: 1.4; font-size: 1rem;
}
.faro-pb-txtgrid__body p { margin: 0 0 .25em; color: var(--faro-secondary); }
.faro-pb-txtgrid__body p:last-child { margin-bottom: 0; }
.faro-pb-txtgrid__body strong { color: var(--faro-secondary); }

/* Responsive nuovi blocchi */
@media (max-width: 960px) {
	.faro-pb-evgrid__grid--4, .faro-pb-evgrid__grid--3 { grid-template-columns: repeat(2, 1fr); }
	.faro-pb-txtgrid__grid--4, .faro-pb-txtgrid__grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.faro-pb-evgrid__grid, .faro-pb-txtgrid__grid { grid-template-columns: 1fr !important; }
	.faro-pb-txtgrid__card { min-height: 0; padding: 26px 22px; }
}

/* =========================================================
   v1.6 — Parallax banner + box decorativa full-bleed
   ========================================================= */

/* ---------- Banner Parallax ---------- */
.faro-pb-parallax {
	position: relative;
	overflow-x: clip; /* il bg sticky non deve generare scrollbar orizzontale */
}
.faro-pb-parallax__bg {
	position: sticky;
	top: 0;
	height: 100vh;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: var(--faro-secondary);
	z-index: 1;
}
.faro-pb-parallax__bg--placeholder {
	background-image: linear-gradient(135deg, var(--faro-primary), var(--faro-secondary));
}
.faro-pb-parallax__overlay {
	position: absolute; inset: 0;
	pointer-events: none;
	background: rgba(14,44,69,.5);
}
.faro-pb-parallax__content {
	position: relative;
	z-index: 2;
	margin-top: -100vh; /* sovrappongo al bg che è 100vh */
}
.faro-pb-parallax__slide {
	min-height: var(--faro-parallax-text-h, 80vh);
	display: flex;
	/* v1.16: align-items configurabile via classe .faro-pb-parallax--valign-{top|center|bottom}.
	   Il default è 'top' così i padding-top/bottom hanno EFFETTO sul posizionamento del testo
	   (con align-items: center il flex ricentrava sempre, neutralizzando i padding). */
	align-items: flex-start;
	padding-top: var(--faro-parallax-text-pt, 60px);
	padding-bottom: var(--faro-parallax-text-pb, 60px);
	color: #fff;
}
.faro-pb-parallax--valign-top    .faro-pb-parallax__slide { align-items: flex-start; }
.faro-pb-parallax--valign-center .faro-pb-parallax__slide { align-items: center; }
.faro-pb-parallax--valign-bottom .faro-pb-parallax__slide { align-items: flex-end; }
.faro-pb-parallax--align-left  .faro-pb-parallax__slide .faro-pb-textbanner__text { margin-right: auto; margin-left: 0; }
.faro-pb-parallax--align-right .faro-pb-parallax__slide .faro-pb-textbanner__text { margin-left: auto; margin-right: 0; }
.faro-pb-parallax--align-center .faro-pb-parallax__slide .faro-pb-textbanner__text { margin: 0 auto; }

/* I testi "transparent" sopra al bg parallax sono bianchi (il bg è sempre scuro/colorato) */
.faro-pb-parallax__slide .faro-pb-textbanner__text--transparent .faro-pb-textbanner__body,
.faro-pb-parallax__slide .faro-pb-textbanner__text--transparent .faro-pb-textbanner__body p,
.faro-pb-parallax__slide .faro-pb-textbanner__text--transparent .faro-pb-textbanner__body h2,
.faro-pb-parallax__slide .faro-pb-textbanner__text--transparent .faro-pb-textbanner__body h3,
.faro-pb-parallax__slide .faro-pb-textbanner__text--transparent .faro-pb-textbanner__body h4 {
	color: #fff;
}

/* Disattiva parallax su mobile (sticky + 100vh genera problemi su iOS Safari) */
@media (max-width: 900px) {
	.faro-pb-parallax__bg {
		position: relative;
		height: 60vh;
	}
	.faro-pb-parallax__content {
		margin-top: 0;
	}
	.faro-pb-parallax__slide {
		min-height: 0;
		padding: 40px 0;
		background: var(--faro-secondary);
	}
	.faro-pb-parallax__slide:first-child {
		padding-top: 60px;
	}
}

/* ---------- Box decorativa "full-bleed" ---------- */
/* Quando la sezione contiene una box che esce dal viewport, attiva il clipping */
.faro-about--has-bleed {
	overflow-x: clip;
}
/* v1.32.4 — .faro-feature--has-bleed NON deve ritagliare: è un div DENTRO
   .faro-container (max 1000px), quindi il clip tagliava la box molto prima
   del bordo dello schermo. Il ritaglio va fatto sulla sezione, che è larga
   quanto il viewport. */
.faro-features { overflow-x: clip; }

/* v1.38.0 — Blocco "Vetrina prodotti e servizi".
   minmax(0, 1fr) e non "1fr": vedi la nota su .faro-pb-intro2col__grid — con
   "1fr" il minimo della colonna e' il min-content del contenuto e
   un'immagine puo' impedire alla griglia di restringersi. */
.faro-pb-showcase__head { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.faro-pb-showcase__title { font-size: clamp(1.5rem, 2.8vw, 2.1rem); color: var(--faro-secondary); margin: 0 0 14px; }
.faro-pb-showcase__intro p { color: var(--faro-text); line-height: 1.65; margin: 0 0 .8em; }
.faro-bg-primary .faro-pb-showcase__title,
.faro-bg-primary .faro-pb-showcase__intro p { color: #fff; }

.faro-pb-showcase__grid { display: grid; gap: 30px; }
.faro-pb-showcase__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faro-pb-showcase__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.faro-pb-showcase__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* La card e' una colonna flex con il pulsante spinto in fondo da
   margin-top:auto: cosi' i pulsanti restano allineati fra card di altezza
   diversa. Il margin va in forma estesa, mai abbreviata, o azzererebbe
   l'auto (regola gia' imparata altrove nel tema). */
.faro-pb-showcase__card {
	display: flex; flex-direction: column;
	background: #fff; border-radius: 14px; overflow: hidden;
	box-shadow: 0 22px 50px -30px rgba(14,44,69,.35);
	transition: transform .25s ease, box-shadow .25s ease;
}
.faro-pb-showcase__card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(14,44,69,.45); }
.faro-bg-alt .faro-pb-showcase__card { box-shadow: 0 22px 50px -32px rgba(14,44,69,.28); }

.faro-pb-showcase__media { width: 100%; background: var(--faro-bg-alt); }
.faro-pb-showcase__media--4x3  { aspect-ratio: 4 / 3; }
.faro-pb-showcase__media--1x1  { aspect-ratio: 1 / 1; }
.faro-pb-showcase__media--3x4  { aspect-ratio: 3 / 4; }
.faro-pb-showcase__media--16x9 { aspect-ratio: 16 / 9; }
.faro-pb-showcase__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.faro-pb-showcase__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 24px 26px; }
.faro-pb-showcase__card-title { font-size: 1.15rem; color: var(--faro-secondary); margin: 0 0 10px; line-height: 1.3; }
.faro-pb-showcase__text p { color: var(--faro-text); font-size: .96rem; line-height: 1.6; margin: 0 0 .7em; }
.faro-pb-showcase__cta { margin-top: auto; margin-bottom: 0; padding-top: 16px; }
.faro-pb-showcase__cta .faro-btn { width: 100%; justify-content: center; }

/* v1.34.2 — Blocco home 7.5 "Shortcode Video Esterno".
   Solo il contenitore: il markup interno appartiene allo shortcode ospitato
   (es. faro_video_inline), che porta il proprio CSS. */
.faro-home-shortcode__inner > *:first-child { margin-top: 0; }
.faro-home-shortcode__inner > *:last-child { margin-bottom: 0; }

/* ---------- v1.34.0 — Blocco pagina "Elenco articoli" ----------
   Solo intestazione e CTA: la griglia delle card è già stilata dalle regole
   .faro-art-* dello shortcode [faro_articoli], che restano invariate.
   Selettori nuovi, nessuno usato da markup esistente.
   NB: queste regole stanno PRIMA del blocco bleed qui sotto, che per
   contratto deve restare in fondo al foglio. */
.faro-pb-articoli__head { margin-bottom: 30px; }
.faro-pb-articoli__title {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--faro-secondary); margin: 0;
}
.faro-pb-articoli__cta { margin: 34px 0 0; text-align: center; }
.faro-bg-primary .faro-pb-articoli__title { color: #fff; }

/* =========================================================
   v1.14 — Bleed box decorativa: +50% larghezza con eccedenza fuori viewport
   =========================================================
   Quando l'utente sceglie data-deco-bleed="left" o "right", la box decorativa
   mantiene la sua posizione di default (ancorata dov'era), ma la larghezza
   visiva viene aumentata del 50% con la parte aggiuntiva che esce dal viewport
   sul lato selezionato. Usiamo transform: scaleX(1.5) con transform-origin
   sul lato OPPOSTO al bleed (il bordo del lato opposto resta fisso, l'altro
   bordo si estende). Funziona uniformemente per TUTTE le 8 posizioni
   (bl/br/tl/tr/sl/sr/sl50/sr50) e a qualunque viewport. */

/* v1.32.2 — Estensione REGOLABILE, senza transform.
   Il vecchio scaleX(1.5) aveva due limiti: quantità fissa (+50% e basta, spesso
   insufficiente a raggiungere il bordo del monitor) e deformazione del
   border-radius, che veniva stirato orizzontalmente insieme alla box.

   Ora si ancora la box al lato opposto al bleed e si forza una larghezza
   minima con min-width: l'ancoraggio tiene fermo un bordo e l'altro si estende.
   min-width (e non width) preserva le percentuali di data-deco-size come base,
   e il raggio degli angoli resta perfettamente circolare.

   --faro-deco-bleed arriva inline dal template: valore in px scelto
   dall'utente, oppure 50vw quando ha lasciato 0 ("fino al bordo dello
   schermo"). L'eccedenza è ritagliata dall'overflow-x: clip della sezione. */
/* v1.32.3 — Le regole del bleed sono state SPOSTATE IN FONDO al foglio.
   Motivo: qui venivano prima delle posizioni sl/sr/sl50/sr50 (righe ~1500),
   che hanno la stessa specificità (0,3,0) e riancorano la box con left/right.
   A parità di specificità vince l'ultima regola scritta, quindi la posizione
   annullava l'ancoraggio del bleed e la box usciva dal lato SBAGLIATO.
   Vedi "BLEED BOX DECORATIVA" alla fine del file. */

/* Quando bleed è attivo, applico overflow-x: clip al wrapper di sezione per
   evitare che la parte uscita generi scrollbar orizzontali. Le classi
   .faro-about--has-bleed e .faro-feature--has-bleed sono già aggiunte dai
   template-parts della home. Per i blocchi pagina image_text aggiungo
   anche .faro-pb-imgtext--has-bleed (vedi template). */
.faro-pb-imgtext--has-bleed { overflow-x: clip; }

/* Safety net globale: se la sezione padre per qualche motivo non ha overflow
   clip, almeno il body lo gestisce per evitare scrollbar di pagina. */
body { overflow-x: clip; }

/* =========================================================
   v1.7 — Valori 4 box + VMP bg image + box "accanto" (sl/sr)
   ========================================================= */

/* ---------- Home: Valori 4 box (faro-vgrid) ---------- */
.faro-vgrid__head { text-align: center; margin-bottom: 32px; }
.faro-vgrid__title {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--faro-secondary);
	margin: 8px 0 0;
}
.faro-vgrid__grid {
	display: grid; gap: 28px;
	max-width: 1100px; margin: 0 auto;
}
.faro-vgrid__grid--2 { grid-template-columns: repeat(2, 1fr); }
.faro-vgrid__grid--3 { grid-template-columns: repeat(3, 1fr); }
.faro-vgrid__grid--4 { grid-template-columns: repeat(4, 1fr); }
.faro-vgrid__card {
	background: #fff; border-radius: 20px;
	padding: 40px 38px;
	text-align: center;
	box-shadow: 0 14px 40px -20px rgba(14,44,69,.22);
	display: flex; flex-direction: column; align-items: center;
	gap: 12px;
	transition: transform .2s, box-shadow .2s;
}
.faro-vgrid__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 50px -22px rgba(14,44,69,.32);
}
.faro-vgrid__card-title {
	font-size: clamp(1.2rem, 2vw, 1.55rem);
	color: var(--faro-primary);
	font-weight: 700;
	margin: 0;
	line-height: 1.25;
}
.faro-vgrid__card-text { color: var(--faro-muted); line-height: 1.55; }
.faro-vgrid__card-text p { margin: 0 0 .6em; }
.faro-vgrid__card-text p:last-child { margin-bottom: 0; }
.faro-vgrid__card-cta { margin-top: 4px; }

@media (max-width: 900px) {
	.faro-vgrid__grid--3, .faro-vgrid__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.faro-vgrid__grid { grid-template-columns: 1fr !important; }
	.faro-vgrid__card { padding: 30px 26px; }
}

/* ---------- Box decorativa: posizioni "Accanto a sinistra/destra" (sl/sr) ---------- */

/* SL — box a sinistra, immagine a destra dello stesso container. Box +20% in altezza. */
.faro-media-deco[data-deco-pos="sl"] .faro-media-deco__img {
	top: 10%; right: 0; width: 72%; height: 80%;
}
.faro-media-deco[data-deco-pos="sl"] .faro-media-deco__box {
	top: 0; left: 0; width: 60%; height: 100%; /* 100% > 80% immagine = +20% */
}
/* dimensione "sm" — box meno alta */
.faro-media-deco[data-deco-pos="sl"][data-deco-size="sm"] .faro-media-deco__img { width: 76%; height: 84%; }
.faro-media-deco[data-deco-pos="sl"][data-deco-size="sm"] .faro-media-deco__box { width: 52%; height: 96%; }
/* "md" — intermedio */
.faro-media-deco[data-deco-pos="sl"][data-deco-size="md"] .faro-media-deco__img { width: 74%; height: 82%; }
.faro-media-deco[data-deco-pos="sl"][data-deco-size="md"] .faro-media-deco__box { width: 56%; height: 98%; }

/* SR — box a destra, immagine a sinistra (specchiato di SL). */
.faro-media-deco[data-deco-pos="sr"] .faro-media-deco__img {
	top: 10%; left: 0; width: 72%; height: 80%;
}
.faro-media-deco[data-deco-pos="sr"] .faro-media-deco__box {
	top: 0; right: 0; width: 60%; height: 100%;
}
.faro-media-deco[data-deco-pos="sr"][data-deco-size="sm"] .faro-media-deco__img { width: 76%; height: 84%; }
.faro-media-deco[data-deco-pos="sr"][data-deco-size="sm"] .faro-media-deco__box { width: 52%; height: 96%; }
.faro-media-deco[data-deco-pos="sr"][data-deco-size="md"] .faro-media-deco__img { width: 74%; height: 82%; }
.faro-media-deco[data-deco-pos="sr"][data-deco-size="md"] .faro-media-deco__box { width: 56%; height: 98%; }

/* Bleed obsoleto per sl/sr/bl/tl rimosso in v1.14: la nuova regola transform:
   scaleX(1.5) sopra (.faro-media-deco[data-deco-bleed="left"|"right"]) si
   applica uniformemente a tutte le posizioni, incluse sl/sr/sl50/sr50, senza
   bisogno di override per posizione. */

@media (max-width: 700px) {
	/* Su mobile le posizioni "accanto" perdono senso: torno a layout sovrapposto centrato */
	.faro-media-deco[data-deco-pos="sl"] .faro-media-deco__img,
	.faro-media-deco[data-deco-pos="sr"] .faro-media-deco__img { inset: 0; width: 100%; height: 100%; }
	.faro-media-deco[data-deco-pos="sl"] .faro-media-deco__box,
	.faro-media-deco[data-deco-pos="sr"] .faro-media-deco__box { display: none; }
}

/* =========================================================
   v1.9 — Posizioni decobox "Accanto a sinistra/destra +50%"
   ========================================================= */

/* SL50 — box +50% dell'immagine, accanto a sinistra.
   Immagine occupa 67% del container (height 70%), box 80% del container (height 120%).
   Quindi box è ~150% dell'immagine in area visiva, sporge molto sopra e sotto. */
.faro-media-deco[data-deco-pos="sl50"] .faro-media-deco__img {
	top: 15%; right: 0; width: 65%; height: 70%;
}
.faro-media-deco[data-deco-pos="sl50"] .faro-media-deco__box {
	top: 0; left: 0; width: 70%; height: 100%;
}
.faro-media-deco[data-deco-pos="sl50"][data-deco-size="sm"] .faro-media-deco__img { width: 70%; height: 78%; }
.faro-media-deco[data-deco-pos="sl50"][data-deco-size="sm"] .faro-media-deco__box { width: 60%; height: 96%; }
.faro-media-deco[data-deco-pos="sl50"][data-deco-size="md"] .faro-media-deco__img { width: 68%; height: 74%; }
.faro-media-deco[data-deco-pos="sl50"][data-deco-size="md"] .faro-media-deco__box { width: 65%; height: 98%; }

/* SR50 — specchiata. */
.faro-media-deco[data-deco-pos="sr50"] .faro-media-deco__img {
	top: 15%; left: 0; width: 65%; height: 70%;
}
.faro-media-deco[data-deco-pos="sr50"] .faro-media-deco__box {
	top: 0; right: 0; width: 70%; height: 100%;
}
.faro-media-deco[data-deco-pos="sr50"][data-deco-size="sm"] .faro-media-deco__img { width: 70%; height: 78%; }
.faro-media-deco[data-deco-pos="sr50"][data-deco-size="sm"] .faro-media-deco__box { width: 60%; height: 96%; }
.faro-media-deco[data-deco-pos="sr50"][data-deco-size="md"] .faro-media-deco__img { width: 68%; height: 74%; }
.faro-media-deco[data-deco-pos="sr50"][data-deco-size="md"] .faro-media-deco__box { width: 65%; height: 98%; }

/* Bleed obsoleto per sl50/sr50 rimosso in v1.14 — gestito ora dalla regola
   universale min-width + ancoraggio all'inizio del file (v1.32.2). */

@media (max-width: 700px) {
	.faro-media-deco[data-deco-pos="sl50"] .faro-media-deco__img,
	.faro-media-deco[data-deco-pos="sr50"] .faro-media-deco__img { inset: 0; width: 100%; height: 100%; }
	.faro-media-deco[data-deco-pos="sl50"] .faro-media-deco__box,
	.faro-media-deco[data-deco-pos="sr50"] .faro-media-deco__box { display: none; }
}

/* Su mobile disattiviamo l'effetto "bleed" su TUTTI i decobox: su schermo
   stretto sporge oltre il bordo e trascina l'immagine fuori margine.
   v1.32.2: il bleed non usa più transform ma min-width + ancoraggio, quindi
   qui vanno azzerati quelli (un "transform: none" ora non annullerebbe nulla
   e il bleed resterebbe attivo su mobile). */
@media (max-width: 900px) {
	.faro-media-deco .faro-media-deco__img {
		inset: 0;
		width: 100%;
		height: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	.faro-media-deco .faro-media-deco__box {
		margin-left: 0;
		margin-right: 0;
	}
	/* safety: niente sforamenti dal contenitore immagine su mobile */
	.faro-media-deco { overflow: hidden; }
}

/* =========================================================
   v1.11 — Margini fine-tuning immagine/box decorativa
   Applicati via CSS variables (--faro-img-ml/mr, --faro-box-ml/mr)
   impostate dal template inline sul .faro-media-deco.
   ========================================================= */

/* Su tutti i data-deco-pos, i 4 valori si comportano come "shift" rispetto
   alla posizione naturale dell'elemento absolute. Margin su absolute funziona:
   sposta l'elemento mantenendo i suoi anchor (left/right/top). */
.faro-media-deco .faro-media-deco__img {
	margin-left:  var(--faro-img-ml, 0);
	margin-right: var(--faro-img-mr, 0);
}
.faro-media-deco .faro-media-deco__box {
	margin-left:  var(--faro-box-ml, 0);
	margin-right: var(--faro-box-mr, 0);
}

/* Su viewport piccoli (mobile) i margini negativi possono causare overflow:
   neutralizzo se hanno valore negativo che potrebbe rompere il layout. */
@media (max-width: 640px) {
	.faro-media-deco .faro-media-deco__img,
	.faro-media-deco .faro-media-deco__box {
		margin-left: 0;
		margin-right: 0;
	}
}

/* =========================================================
   v1.11 — Margini orizzontali immagine + box decorativa
   ========================================================= */
/* Margine sx/dx applicato a immagine e box decorativa indipendentemente.
   Si "stringe" l'elemento verso il centro creando spazio bianco ai lati.
   Le CSS variables vengono settate inline dal template tramite
   style="--faro-img-ml:Npx;--faro-img-mr:Npx;--faro-box-ml:Npx;--faro-box-mr:Npx" */
.faro-media-deco__img {
	margin-left: var(--faro-img-ml, 0);
	margin-right: var(--faro-img-mr, 0);
}
.faro-media-deco__box {
	margin-left: var(--faro-box-ml, 0);
	margin-right: var(--faro-box-mr, 0);
}

/* Su viewport ≤700px i margini vengono ridotti per non comprimere troppo. */
@media (max-width: 700px) {
	.faro-media-deco__img,
	.faro-media-deco__box {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* =========================================================
   v1.12 — Shortcode [faro_articoli]
   ========================================================= */
.faro-art-shortcode { margin: 30px 0; }
.faro-art-shortcode__list { display: grid; gap: 28px; }
.faro-art-shortcode__list--cols-1 { grid-template-columns: 1fr; }
.faro-art-shortcode__list--cols-2 { grid-template-columns: repeat(2, 1fr); }
.faro-art-shortcode__list--cols-3 { grid-template-columns: repeat(3, 1fr); }
.faro-art-shortcode__list--cols-4 { grid-template-columns: repeat(4, 1fr); }

.faro-art-card {
	background: #fff;
	border-radius: var(--faro-radius, 14px);
	overflow: hidden;
	box-shadow: 0 10px 30px -16px rgba(14,44,69,.18);
	transition: transform .2s, box-shadow .2s;
}
.faro-art-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -16px rgba(14,44,69,.3); }
.faro-art-card__link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.faro-art-card__media { aspect-ratio: 16/10; background: #d8dde3; overflow: hidden; }
.faro-art-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.faro-art-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.faro-art-card__date {
	font-size: .75rem; font-weight: 700; color: var(--faro-muted);
	letter-spacing: .08em; text-transform: uppercase;
}
.faro-art-card__title {
	font-size: 1.1rem; margin: 4px 0 0;
	color: var(--faro-secondary); font-weight: 700; line-height: 1.3;
}
.faro-art-card__cats { margin: 0; font-size: .8rem; color: var(--faro-primary); font-weight: 600; }
.faro-art-card__text { margin-top: 4px; color: var(--faro-muted); font-size: .9rem; line-height: 1.5; }

/* View "list" — immagine a sinistra */
.faro-art-shortcode--list .faro-art-shortcode__list { grid-template-columns: 1fr !important; }
.faro-art-shortcode--list .faro-art-card__link { flex-direction: row; }
.faro-art-shortcode--list .faro-art-card__media { flex: 0 0 240px; aspect-ratio: auto; }
.faro-art-shortcode--list .faro-art-card__body { flex: 1; }

/* Pagination */
.faro-art-pagination {
	margin-top: 40px;
	display: flex; justify-content: center; gap: 6px;
	flex-wrap: wrap;
}
.faro-art-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border-radius: 999px; background: #fff; color: var(--faro-secondary);
	font-weight: 600; text-decoration: none; font-size: .9rem;
	box-shadow: 0 6px 18px -10px rgba(14,44,69,.2);
	transition: background .2s, color .2s;
}
.faro-art-pagination .page-numbers:hover { background: var(--faro-primary); color: #fff; }
.faro-art-pagination .page-numbers.current { background: var(--faro-primary); color: #fff; }

.faro-art-empty { text-align: center; color: var(--faro-muted); padding: 50px 20px; font-style: italic; }

@media (max-width: 960px) {
	.faro-art-shortcode__list--cols-4,
	.faro-art-shortcode__list--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.faro-art-shortcode__list { grid-template-columns: 1fr !important; }
	.faro-art-shortcode--list .faro-art-card__link { flex-direction: column; }
	.faro-art-shortcode--list .faro-art-card__media { flex: 0 0 auto; aspect-ratio: 16/10; }
}

/* =========================================================
   v1.13 — Hero full-screen
   ========================================================= */
.faro-hero--fullscreen {
	min-height: 100vh;
	min-height: 100svh;  /* mobile: viewport "small" esclude UI bar dinamiche */
}

/* =========================================================
   v1.13 — Eyebrow variante con linea di separazione
   ========================================================= */
/* Variante "testo seguito da linea lunga" (stile editoriale).
   Quando .faro-eyebrow--line, l'elemento diventa full-width flex con:
   - testo a sinistra (con il colore custom inline applicato via style)
   - linea che si estende fino al bordo del container parent
   Colori: il colore del testo è impostato come 'color' inline.
   La linea usa la CSS variable --faro-eyebrow-line-color (default = currentColor). */
.faro-eyebrow--line {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding-left: 0;
	max-width: none;
}
.faro-eyebrow--line::before { display: none; }
.faro-eyebrow--line .faro-eyebrow__text {
	flex-shrink: 0;
	white-space: nowrap;
}
.faro-eyebrow--line::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--faro-eyebrow-line-color, currentColor);
	align-self: center;
}
/* Quando senza linea, il wrapper interno .faro-eyebrow__text si comporta come prima */
.faro-eyebrow:not(.faro-eyebrow--line) .faro-eyebrow__text {
	display: inline;
}

/* =========================================================
   v1.13 — Team: icone social per membro
   ========================================================= */
.faro-pb-team__social {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 14px;
}
.faro-pb-team__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--faro-primary);
	color: #fff;
	text-decoration: none;
	transition: transform .18s, background .18s, box-shadow .18s;
}
.faro-pb-team__social-link:hover,
.faro-pb-team__social-link:focus-visible {
	transform: translateY(-3px);
	background: var(--faro-secondary);
	box-shadow: 0 10px 22px -8px rgba(14,44,69,.4);
	color: #fff;
}
.faro-pb-team__social-link svg {
	display: block;
	width: 18px;
	height: 18px;
}
/* Override colore brand-aware per le 3 piattaforme (visibile solo on hover) */
.faro-pb-team__social-link--instagram:hover { background: #E1306C; }
.faro-pb-team__social-link--linkedin:hover  { background: #0A66C2; }
.faro-pb-team__social-link--youtube:hover   { background: #FF0000; }

/* =========================================================
   Testimonianze — pulsante video + popup YouTube
   ========================================================= */
.faro-testi__videobtn {
	appearance: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 14px;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--faro-primary, #16456b);
	color: #fff;
	font: inherit;
	font-size: .85rem;
	font-weight: 700;
	transition: background .2s, transform .2s;
}
.faro-testi__videobtn:hover,
.faro-testi__videobtn:focus-visible {
	background: var(--faro-secondary, #0e2c45);
	transform: translateY(-1px);
	outline: none;
}
.faro-testi__videobtn-icon {
	display: inline-flex;
	width: 22px; height: 22px;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.2);
}

/* Popup YouTube */
.faro-yt-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(8, 22, 36, .85);
	opacity: 0;
	transition: opacity .25s ease;
}
.faro-yt-overlay[hidden] { display: none; }
.faro-yt-overlay.is-open { opacity: 1; }
.faro-yt-dialog {
	position: relative;
	width: 100%;
	max-width: 900px;
	transform: translateY(16px) scale(.98);
	transition: transform .25s ease;
}
.faro-yt-overlay.is-open .faro-yt-dialog { transform: translateY(0) scale(1); }
.faro-yt-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 40px 80px -30px rgba(0,0,0,.8);
}
@supports not (aspect-ratio: 16 / 9) {
	.faro-yt-frame { height: 0; padding-bottom: 56.25%; }
}
.faro-yt-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.faro-yt-close {
	position: absolute;
	top: -14px;
	right: -14px;
	z-index: 2;
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	color: var(--faro-secondary, #0e2c45);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px -6px rgba(0,0,0,.6);
	transition: background .2s, transform .2s, color .2s;
}
.faro-yt-close:hover,
.faro-yt-close:focus-visible {
	background: var(--faro-primary, #16456b);
	color: #fff;
	transform: scale(1.06);
	outline: none;
}
@media (max-width: 600px) {
	.faro-yt-close { top: 6px; right: 6px; }
	.faro-yt-overlay { padding: 12px; }
}
body.faro-yt-lock { overflow: hidden; }

/* =========================================================
   v1.32.1 — Velo colore sopra l'immagine di sfondo di sezione
   =========================================================
   BUG STORICO: i template text_banner.php e intro_text.php emettevano da
   sempre <span class="faro-pb-bg-overlay"> con il colore inline, ma la classe
   non aveva NESSUNA regola in questo foglio. Uno <span> senza stili è inline e
   non ha dimensioni: il velo esisteva nell'HTML e non si vedeva mai. Il
   Banner Parallax invece funzionava perché usa .faro-pb-parallax__overlay,
   che il CSS lo aveva.

   Le sezioni sono .faro-block { position: relative }, quindi l'inset:0
   si ancora correttamente al riquadro della sezione. */
.faro-pb-bg-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
/* Il contenuto deve stare SOPRA il velo. Per .faro-pb-textbanner il
   > .faro-container ha già z-index:2; introtext no, lo aggiungo qui. */
.faro-pb-introtext > .faro-container { position: relative; z-index: 1; }

/* =========================================================
   v1.32 — Sfondo condiviso tra blocchi consecutivi
   =========================================================
   Un'unica immagine di sfondo che attraversa due o più sezioni (tipicamente
   la coppia immagine+testo / testo+immagine invertiti). Il layer è dentro un
   wrapper isolato con z-index negativo: resta dietro alle sezioni figlie
   senza dover toccare lo z-index dei singoli blocchi.

   NOTA (lezione v1.23.2): nessuna regola globale su img/html/body qui —
   tutto è scoped a .faro-bggroup. */
.faro-bggroup {
	position: relative;
	isolation: isolate; /* confina lo z-index:-1 del layer dentro il wrapper */
}
.faro-bggroup__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-repeat: no-repeat;
}
/* Attivo solo quando c'è sfocatura: il layer viene ingrandito del 6% per
   evitare l'alone chiaro ai bordi, e qui lo ritagliamo. */
.faro-bggroup--clip { overflow: hidden; }

@media (max-width: 900px) {
	/* background-attachment:fixed è inaffidabile sui browser mobile: lo
	   neutralizzo per evitare immagini stirate o ferme a metà. */
	.faro-bggroup__bg { background-attachment: scroll !important; }
}

/* =========================================================
   v1.32.2 — Tipografia per blocco (home)
   =========================================================
   Ogni sezione della home può ricevere inline le variabili --faro-typo-*
   (vedi faro_typo_attrs / faro_section_pad). Qui le si consuma sui
   contenitori di testo dei vari blocchi, SEMPRE con fallback al valore
   storico: se l'utente non tocca nulla, il rendering resta identico.

   Il perché di questi controlli: i blocchi hanno tipografie diverse per
   scelta di design, ma dal pannello non si vedeva e due testi impostati
   allo stesso modo nell'editor apparivano diversi senza spiegazione.

   NOTA: un font-size messo a mano nell'editor sul singolo <span> resta
   prioritario (è inline sull'elemento, non sulla sezione). E se in
   "FARO — Margini e allineamento" è attivo "Forza interlinea generale",
   quello ha !important e vince su --faro-typo-lh. */
.faro-about__text,
.faro-feature__text,
.faro-vmp__text,
.faro-events__text,
.faro-banner__text,
.faro-card__body,
.faro-about__body,
.faro-feature__body {
	font-size: var(--faro-typo-size, inherit);
	font-weight: var(--faro-typo-weight, inherit);
	line-height: var(--faro-typo-lh, inherit);
}
.faro-vmp__text,
.faro-events__text,
.faro-banner__text,
.faro-card__body { color: var(--faro-typo-color, inherit); }

/* I paragrafi interni ereditano: senza questo, un <p> dentro al contenitore
   ripartirebbe dal font-size del body e la variabile non si vedrebbe. */
.faro-about__text p,
.faro-feature__text p,
.faro-vmp__text p,
.faro-events__text p,
.faro-banner__text p,
.faro-card__body p,
.faro-values__text p {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* =========================================================
   BLEED BOX DECORATIVA — deve restare in FONDO al foglio (v1.32.3)
   =========================================================
   Queste regole hanno la stessa specificità (0,3,0) di quelle che
   posizionano la box (data-deco-pos "bl/br/tl/tr/sl/sr/sl50/sr50"), quindi
   l'unica cosa che decide chi vince è l'ordine di scrittura. Stando in
   fondo, il bleed riancora sempre la box dal lato giusto.

   NON spostare queste regole più in alto e non inserire regole di
   posizionamento della box dopo di esse.

   Come funziona: si ancora il lato OPPOSTO a quello di uscita e si forza una
   larghezza minima. L'ancoraggio tiene fermo un bordo, l'altro si estende.
   min-width (e non width) lascia le percentuali di data-deco-size come base
   e non deforma il border-radius (limite del vecchio scaleX).

   --faro-deco-bleed arriva inline dal template: px scelti dall'utente, o
   50vw quando ha lasciato 0 ("fino al bordo dello schermo"). L'eccedenza è
   ritagliata da overflow-x: clip sulla sezione.

   --faro-deco-inset (v1.32.4) sposta il bordo INTERNO della box verso il
   centro dell'immagine, così l'immagine sporge oltre la box invece di
   combaciarci. Il valore è calcolato in PHP da faro_deco_bleed_inset(),
   che conosce larghezza e allineamento dell'immagine per ogni
   posizione/dimensione. */

/* Esce a DESTRA: fermo il bordo sinistro, cresce verso destra. */
.faro-media-deco[data-deco-bleed="right"] .faro-media-deco__box {
	left: var(--faro-deco-inset, 0%);
	right: auto;
	min-width: calc(100% + var(--faro-deco-bleed, 50vw));
}

/* Esce a SINISTRA: fermo il bordo destro, cresce verso sinistra. */
.faro-media-deco[data-deco-bleed="left"] .faro-media-deco__box {
	right: var(--faro-deco-inset, 0%);
	left: auto;
	min-width: calc(100% + var(--faro-deco-bleed, 50vw));
}

/* Su mobile il bleed va disattivato: su schermo stretto sporgerebbe oltre il
   bordo trascinando fuori anche l'immagine. Questa media query deve stare
   DOPO le due regole qui sopra, altrimenti a parità di specificità
   vincerebbero loro e il bleed resterebbe attivo. */
@media (max-width: 900px) {
	.faro-media-deco[data-deco-bleed="left"] .faro-media-deco__box,
	.faro-media-deco[data-deco-bleed="right"] .faro-media-deco__box {
		min-width: 0;
		left: auto;
		right: auto;
	}
}