/* Generato da build.sh — non modificare a mano. Sorgenti: assets/css/ (tokens, base, components, header, footer, sections/, pages/, motion). */

/* ---- tokens.css ---- */
/* ==========================================================================
   DESIGN SYSTEM — TOKEN (redesign "atelier", settembre 2026)
   Ogni valore del tema nasce da qui: colori, tipografia, spazi, griglia,
   forme, movimento, livelli. I componenti usano solo queste variabili.
   Font: Archivo (grottesco a larghezza variabile, OFL) + Literata 72pt
   Light Italic (serif per le parole d'accento, OFL). Sottoinsiemi latini.
   ========================================================================== */

@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo-var.woff2') format('woff2');
	font-weight: 200 700;
	font-stretch: 75% 125%;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Literata';
	src: url('../fonts/literata-light-italic.woff2') format('woff2');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
/* Corsivi in evidenza dal 23/09 (scelta del cliente): DM Serif Display Italic, peso unico 400.
   Per tornare a Literata: in --f-serif rimettere 'Literata' al primo posto e --f-serif-weight: 300. */
@font-face {
	font-family: 'DM Serif Display';
	src: url('../fonts/dm-serif-display-italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
/* Inter resta solo per la landing della fiera, che è una pagina a sé. */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-var.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ---- Colori: marca (verde-petrolio del logo) --------------------- */
	--c-teal-950: #06201F;
	--c-teal-900: #0C2B2F;
	--c-teal-800: #183F44;   /* colore esatto del logo */
	--c-teal-700: #1F5157;
	--c-teal-600: #0F6F6C;   /* link e accenti su fondo chiaro (AA) */
	--c-mint: #A0F4E1;       /* accento su fondo scuro */
	--c-brass: #D9B77E;      /* champagne/ottone: parole in evidenza su fondo scuro */
	--c-bronze: #95682C;     /* stesso tono, più scuro: parole in evidenza su fondo chiaro */

	/* ---- Colori: neutri "materiali" --------------------------------- */
	--c-paper: #F4F2EE;      /* intonaco — fondo principale */
	--c-stone: #E8E4DC;      /* pietra — sezioni alterne */
	--c-sand: #D6CFC3;       /* travertino — cornici, segnaposto */
	--c-white: #FFFFFF;
	--c-ink: #0E2124;        /* inchiostro */
	--c-ink-2: #3D4A4B;      /* testo secondario */
	--c-ink-3: #5F6A68;      /* metadati (AA su intonaco) */
	--c-ink-4: #AEB2AD;      /* testo "spento" prima della rivelazione */
	--c-line: rgba(14, 33, 36, .14);
	--c-line-2: rgba(14, 33, 36, .3);
	--c-line-inv: rgba(255, 255, 255, .16);
	--c-line-inv-2: rgba(255, 255, 255, .34);

	/* ---- Tipografia ------------------------------------------------- */
	--f-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--f-serif: 'DM Serif Display', 'Literata', 'Iowan Old Style', Georgia, serif;
	--f-serif-weight: 400;
	--ac-font-v3: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* solo landing fiera */

	--fs-display: clamp(2.75rem, 1.2rem + 6vw, 8.75rem);
	--fs-h1: clamp(2.5rem, 1.35rem + 4.3vw, 6.5rem);
	--fs-h2: clamp(2.125rem, 1.3rem + 3.2vw, 5rem);
	--fs-h3: clamp(1.5rem, 1.12rem + 1.45vw, 2.625rem);
	--fs-h4: clamp(1.1875rem, 1.05rem + .5vw, 1.5rem);
	--fs-lead: clamp(1.125rem, 1rem + .45vw, 1.4375rem);
	--fs-body: clamp(1rem, .96rem + .16vw, 1.0625rem);
	--fs-small: .875rem;
	--fs-label: .75rem;
	--fs-num: clamp(4.5rem, 2.1rem + 9.6vw, 13rem);
	--fs-hero: clamp(2.5rem, .9rem + 2.8vw, 4rem);   /* titoli degli hero (desktop): 2.6875rem a 1024, 3.4375rem a 1440, max 4rem */

	--lh-display: .92;
	--lh-head: 1;
	--lh-snug: 1.18;
	--lh-body: 1.62;

	--ls-display: -.045em;
	--ls-head: -.035em;
	--ls-snug: -.015em;
	--ls-label: .16em;

	/* ---- Spazi (scala 4/8 + ritmo verticale fluido) ------------------ */
	--s-1: .25rem;
	--s-2: .5rem;
	--s-3: .75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;
	--s-9: 6rem;
	--section: clamp(5rem, 3.3rem + 6.8vw, 10.5rem);
	--section-s: clamp(3.25rem, 2.5rem + 3.4vw, 6rem);
	--stack: clamp(2.5rem, 1.8rem + 3vw, 5.5rem);

	/* ---- Griglia ---------------------------------------------------- */
	--gutter: clamp(1.25rem, .5rem + 3vw, 4rem);
	--gap: clamp(1rem, .65rem + 1.3vw, 2rem);
	--wrap: 115rem;
	--measure: 36rem;

	/* ---- Forme ------------------------------------------------------ */
	--r-0: 0;
	--r-1: 0.25rem;
	--r-pill: 62.438rem;

	/* ---- Movimento -------------------------------------------------- */
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-io: cubic-bezier(.76, 0, .24, 1);
	--ease-soft: cubic-bezier(.22, .61, .36, 1);
	--d-1: .2s;
	--d-2: .38s;
	--d-3: .75s;
	--d-4: 1.15s;
	--stagger: 80ms;

	/* ---- Livelli ---------------------------------------------------- */
	--z-header: 50;
	--z-float: 55;
	--z-cookie: 70;

	/* ---- Header ----------------------------------------------------- */
	--header-h: 4.5rem;
	--logo-h: 2.5rem;
}
@media (min-width: 1024px) {
	:root { --header-h: 5.5rem; --logo-h: 2.875rem; }
}

/* ---- Temi di sezione: impostano colori e accento per tutto il blocco -- */
.t-paper, .t-stone, .t-white {
	--bg: var(--c-paper);
	--fg: var(--c-ink);
	--fg-2: var(--c-ink-2);
	--fg-3: var(--c-ink-3);
	--fg-4: var(--c-ink-4);
	--line: var(--c-line);
	--line-2: var(--c-line-2);
	--accent: var(--c-teal-600);
	--accent-text: var(--c-bronze);
	background-color: var(--bg);
	color: var(--fg);
}
.t-stone { --bg: var(--c-stone); }
.t-white { --bg: var(--c-white); }
.t-dark, .t-brand, .t-deep {
	--bg: var(--c-teal-900);
	--fg: var(--c-white);
	--fg-2: rgba(255, 255, 255, .8);
	--fg-3: rgba(255, 255, 255, .62);
	--fg-4: rgba(255, 255, 255, .28);
	--line: var(--c-line-inv);
	--line-2: var(--c-line-inv-2);
	--accent: var(--c-mint);
	--accent-text: var(--c-brass);
	background-color: var(--bg);
	color: var(--fg);
}
.t-brand { --bg: var(--c-teal-800); }
.t-deep { --bg: var(--c-teal-950); }

/* ---- base.css ---- */
/* ==========================================================================
   BASE — reset, tipografia di base, contenitore, utilità, elementi globali
   (banner cookie, pulsante per riaprirlo, "torna su", selettore lingua).
   La radice resta a 1rem: tutto è fluido con clamp() e vw, niente scala
   proporzionale della pagina (i margini laterali restano contenuti).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}
html, body { margin: 0; padding: 0; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
html.ac-nav-open { overflow: hidden; }
.ac-js { scroll-behavior: smooth; }

body {
	font-family: var(--f-sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: 400;
	color: var(--c-ink);
	background: var(--c-paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: italic; }
strong, b { font-weight: 600; }
::selection { background: var(--c-mint); color: var(--c-teal-900); }
:focus-visible { outline: 0.125rem solid var(--accent, var(--c-teal-600)); outline-offset: 0.1875rem; }
[hidden] { display: none !important; }

/* Transizione morbida tra le pagine (browser che la supportano). */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
}

/* --------------------------------------------------------------------------
   Contenitore e utilità
   -------------------------------------------------------------------------- */
.ac-wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.ac-main { display: block; padding-top: var(--header-h); }
.ac-over-hero .ac-main { padding-top: 0; }
.ac-vh {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.ac-skip { position: absolute; left: -624.94rem; top: 0; z-index: 100; }
.ac-skip:focus { left: 0.75rem; top: 0.75rem; padding: 0.625rem 1rem; background: var(--c-white); color: var(--c-ink); border-radius: var(--r-pill); }

/* Icone inline: dimensione impostata dal contesto. */
.ac-icon { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
.ac-icon--img { object-fit: contain; }

/* --------------------------------------------------------------------------
   Scala tipografica
   -------------------------------------------------------------------------- */
.ac-display {
	font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display);
	font-weight: 300; font-stretch: 108%;
}
.ac-h1 {
	font-size: var(--fs-h1); line-height: .96; letter-spacing: -.042em;
	font-weight: 300; font-stretch: 106%;
}
.ac-h2 {
	font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--ls-head);
	font-weight: 350; font-stretch: 104%;
}
.ac-h3 {
	font-size: var(--fs-h3); line-height: 1.06; letter-spacing: -.028em;
	font-weight: 350; font-stretch: 102%;
}
.ac-h4 { font-size: var(--fs-h4); line-height: 1.22; letter-spacing: -.012em; font-weight: 500; }
.ac-lead { font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -.01em; font-weight: 400; }
.ac-text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2, var(--c-ink-2)); max-width: var(--measure); }
.ac-small { font-size: var(--fs-small); line-height: 1.5; }

/* Parola/riga d'accento: serif corsivo (DM Serif Display, prima Literata), leggermente più grande
   per compensare l'occhio più piccolo, nel colore d'accento della sezione. */
.ac-serif {
	font-family: var(--f-serif); font-style: italic; font-weight: var(--f-serif-weight, 400);
	font-size: 1.06em; letter-spacing: -.012em; font-stretch: 100%;
	color: var(--accent-text, var(--accent, var(--c-teal-600)));
}

/* Titoli a righe: ogni riga è un contenitore che taglia il testo durante la
   comparsa (vedi motion.css). Il padding compensa discendenti e corsivi. */
.ac-line { display: block; overflow: hidden; padding: .06em .12em .14em; margin: -.06em -.12em -.14em; }
.ac-line__in { display: inline-block; }

/* Etichetta: maiuscoletto tecnico, con punto d'accento opzionale. */
.ac-label {
	display: inline-flex; align-items: center; gap: .625rem;
	font-size: var(--fs-label); line-height: 1.25; font-weight: 600; font-stretch: 88%;
	letter-spacing: var(--ls-label); text-transform: uppercase;
	color: var(--fg-2, var(--c-ink-2));
}
.ac-label--dot::before {
	content: ""; width: .5rem; height: .5rem; border-radius: 50%; flex: 0 0 auto;
	background: var(--accent, var(--c-teal-600));
}
/* Etichetta di sezione (il "titoletto" sopra i titoli): solo un riquadro a spigoli vivi con
   un velo leggero (la barra ocra a sinistra è stata tolta su richiesta del cliente, 23/09).
   Testo grande, in grassetto, maiuscoletto spaziato; niente sottolineatura. */
.ac-label--dot {
	width: fit-content; max-width: 100%; justify-self: start; align-self: start; gap: .75rem;
	padding: .74rem 1.3rem .7rem;
	border: 1px solid rgba(14, 33, 36, .2);
	border: 1px solid color-mix(in srgb, var(--fg, var(--c-ink)) 20%, transparent);
	background: color-mix(in srgb, var(--fg, var(--c-ink)) 4%, transparent);
	font-size: clamp(.875rem, .8rem + .3vw, 1.0625rem); font-weight: 700; letter-spacing: .14em;
	justify-content: center; text-align: center; text-decoration: none;
	color: var(--fg, var(--c-ink));
}
.ac-label--dot::before { content: none; display: none; }

/* Firma "La nostra firma, il tuo spazio." — ripetuta negli hero e nel footer. */
.ac-signature {
	margin: 0; font-family: var(--f-serif); font-style: italic; font-weight: var(--f-serif-weight, 400);
	font-size: clamp(.9375rem, .85rem + .3vw, 1.0625rem); line-height: 1.3; letter-spacing: -.005em;
	color: var(--fg-3, var(--c-ink-3));
}

/* --------------------------------------------------------------------------
   Selettore lingua (bandiere Polylang): base neutra, ogni contesto la rifinisce.
   -------------------------------------------------------------------------- */
.ac-lang { display: flex; align-items: center; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
.ac-lang__link {
	display: inline-flex; align-items: center; gap: 0.375rem; height: 1.875rem; padding: 0 0.625rem;
	border: 1px solid transparent; border-radius: var(--r-pill);
	font-family: var(--f-sans); font-size: 0.75rem; font-weight: 600; font-stretch: 90%; letter-spacing: .1em;
	color: inherit; text-decoration: none; transition: background-color var(--d-1) ease, color var(--d-1) ease, border-color var(--d-1) ease;
}
.ac-lang__flag { width: 1rem; height: 0.6875rem; border-radius: 0.125rem; display: block; object-fit: cover; }

/* --------------------------------------------------------------------------
   Banner cookie, pulsante per riaprirlo (in basso a sinistra), "torna su"
   (in basso a destra). Markup in functions.php, logica in main.js.
   -------------------------------------------------------------------------- */
.ac-cookie { position: fixed; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: var(--z-cookie); display: flex; justify-content: center; pointer-events: none; }
.ac-cookie__box {
	pointer-events: auto; width: 100%; max-width: 47.5rem; padding: 1.625rem 1.75rem 1.5rem;
	background: var(--c-white); color: var(--c-ink); border: 1px solid var(--c-line);
	box-shadow: 0 1.875rem 3.75rem -1.25rem rgba(6, 32, 31, .35);
	font-family: var(--f-sans); position: relative;
}
/* Dal 29/09 (proposta da valutare col cliente): un metro lungo il bordo alto, tacche verso il basso, che
   si compone da sinistra a destra quando il banner compare (main.js, lineare); logo in alto. */
.ac-cookie__rule {
	position: absolute; left: -1px; right: -1px; top: -1px; height: 0.75rem; color: var(--c-bronze, #95682C); pointer-events: none;
	background:
		linear-gradient(currentColor, currentColor) left top / 100% 0.125rem no-repeat,
		repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 1.875rem) left top / 100% 0.6875rem no-repeat,
		repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 0.375rem) left top / 100% 0.375rem no-repeat;
}
.ac-js .ac-cookie__box:not(.is-ruled) .ac-cookie__rule { -webkit-clip-path: inset(-0.125rem 100% -0.125rem 0); clip-path: inset(-0.125rem 100% -0.125rem 0); }
.ac-cookie__logo { display: block; width: 9.375rem; height: auto; margin: 0.5rem 0 1rem; }
.ac-cookie__logo--old { width: 7.5rem; }
.ac-cookie__title { margin: 0 0 0.5rem; font-size: 1.125rem; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; }
.ac-cookie__text { margin: 0 0 1.125rem; font-size: .875rem; line-height: 1.55; color: var(--c-ink-2); }
.ac-cookie__text a { color: var(--c-teal-600); text-decoration: underline; text-underline-offset: 0.1875rem; }
.ac-cookie__prefs { display: grid; gap: 0.625rem; margin: 0 0 1.125rem; padding: 0.875rem 1rem; border: 1px solid var(--c-line); background: var(--c-paper); font-size: .875rem; }
.ac-cookie__opt { display: flex; align-items: center; gap: 0.625rem; }
.ac-cookie__opt input { width: 1rem; height: 1rem; accent-color: var(--c-teal-800); }
.ac-cookie__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.ac-cookie__btn {
	display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap;
	height: 2.875rem; padding: 0 1.375rem; border-radius: var(--r-pill); line-height: 1;
	font-size: .75rem; font-weight: 600; font-stretch: 90%; letter-spacing: .12em; text-transform: uppercase;
	transition: background-color var(--d-1) ease, color var(--d-1) ease;
}
.ac-cookie__btn--accept { background: var(--c-teal-800); color: var(--c-white); }
.ac-cookie__btn--accept:hover { background: var(--c-teal-700); }
.ac-cookie__btn--reject { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line-2); }
.ac-cookie__btn--reject:hover { box-shadow: inset 0 0 0 1px var(--c-ink); }
.ac-cookie__btn--save { background: var(--c-teal-600); color: var(--c-white); }
.ac-cookie__link {
	padding: 0 0.375rem; font-size: .75rem; font-weight: 600; font-stretch: 90%; letter-spacing: .12em; text-transform: uppercase;
	color: var(--c-teal-600); text-decoration: underline; text-underline-offset: 0.25rem;
}
.ac-cookie-reopen {
	position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: var(--z-float);
	display: flex; align-items: center; justify-content: center; width: 2.875rem; height: 2.875rem; border-radius: 50%;
	background: var(--c-white); color: var(--c-teal-800); border: 1px solid var(--c-line);
	box-shadow: 0 0.75rem 1.875rem -0.75rem rgba(6, 32, 31, .35); transition: color var(--d-1) ease, transform var(--d-2) var(--ease-out);
}
.ac-cookie-reopen svg { width: 1.375rem; height: 1.375rem; }
.ac-cookie-reopen:hover { color: var(--c-teal-600); transform: rotate(-12deg); }
/* "Torna su" e WhatsApp: stessa misura (--float-size), stessa linea di base,
   bordo bianco e ombra per staccarsi da qualsiasi sfondo, chiaro o scuro. */
:root { --float-size: 3.375rem; --float-gap: 0.75rem; --float-ring: 0.125rem solid #fff; --float-shadow: 0 0.625rem 1.5rem -0.375rem rgba(0, 0, 0, .45), 0 0.1875rem 0.5rem rgba(0, 0, 0, .22); }
@media (max-width: 599px) { :root { --float-size: 50px; --float-gap: 10px; } }
.ac-totop {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: var(--z-float);
	display: flex; align-items: center; justify-content: center; width: var(--float-size); height: var(--float-size); border-radius: 50%;
	background: var(--c-teal-800); color: var(--c-white); border: var(--float-ring); box-shadow: var(--float-shadow);
	opacity: 0; transform: translateY(0.875rem); pointer-events: none;
	transition: opacity var(--d-2) ease, transform var(--d-2) var(--ease-out), background-color var(--d-1) ease;
}
.ac-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.ac-totop:hover { background: var(--c-teal-600); }
.ac-totop svg { width: 1.25rem; height: 1.25rem; }
/* WhatsApp: pulsante verde in basso a destra e piccola chat con l'operatore.
   Quando compare "torna su" il pulsante scivola a sinistra per non sovrapporsi;
   si nasconde con il banner dei cookie aperto e con il menu a tutto schermo. */
.ac-wa { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: var(--z-float); transition: transform .45s var(--ease-out), opacity .3s ease, visibility .3s ease; }
.ac-totop-on .ac-wa { transform: translateX(calc(-1 * (var(--float-size) + var(--float-gap)))); }
/* Il riquadro della chat non segue lo spostamento del pulsante verde (29/09): resta allineato al bordo destro
   anche quando c'è "torna su", altrimenti da telefono usciva a sinistra. */
.ac-totop-on .ac-wa__panel { right: calc(-1 * (var(--float-size) + var(--float-gap))); }
.ac-cookie-open .ac-wa, html.ac-nav-open .ac-wa { opacity: 0; visibility: hidden; pointer-events: none; }
.ac-wa__toggle {
	display: grid; place-items: center; width: var(--float-size); height: var(--float-size); border-radius: 50%;
	background: #25D366; color: #fff; border: var(--float-ring); box-shadow: var(--float-shadow);
	transition: transform .3s var(--ease-out), background-color .2s ease;
}
.ac-wa__toggle:hover { transform: scale(1.06); background: #1EBE5B; }
.ac-wa__toggle { position: relative; }
.ac-wa__ico { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .25s ease, transform .4s var(--ease-out); }
.ac-wa__toggle .ac-icon { width: 1.625rem; height: 1.625rem; }
.ac-wa__ico--x svg { width: 1.5rem; height: 1.5rem; }
/* Chat aperta: l'icona WhatsApp ruota via e al suo posto compare la X. */
.ac-wa__ico--x { opacity: 0; transform: rotate(-90deg) scale(.5); }
.ac-wa.is-open .ac-wa__ico--wa { opacity: 0; transform: rotate(90deg) scale(.5); }
.ac-wa.is-open .ac-wa__ico--x { opacity: 1; transform: none; }
.ac-wa__panel {
	position: absolute; right: 0; bottom: calc(100% + 0.875rem); width: min(22.5rem, calc(100vw - 1.5rem));
	background: var(--c-white); color: var(--c-ink); border: 1px solid var(--c-line); overflow: hidden;
	box-shadow: 0 1.875rem 3.75rem -1.25rem rgba(6, 32, 31, .45); transform-origin: 100% 100%;
	animation: ac-wa-in .35s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes ac-wa-in { from { opacity: 0; transform: translate3d(0, 0.625rem, 0) scale(.97); } to { opacity: 1; transform: none; } }
.ac-wa__head { display: flex; align-items: center; gap: .85rem; padding: 1rem 1rem 1rem 1.1rem; background: var(--c-teal-800); color: #fff; }
.ac-wa__avatar { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c-teal-950); }
.ac-wa__avatar img { width: 1.375rem; height: 1.375rem; }
.ac-wa__avatar::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 0.6875rem; height: 0.6875rem; border-radius: 50%; background: #25D366; box-shadow: 0 0 0 0.125rem var(--c-teal-800); }
.ac-wa__who { min-width: 0; }
.ac-wa__name { margin: 0; font-size: 1rem; line-height: 1.25; font-weight: 600; }
.ac-wa__status { margin: .15rem 0 0; font-size: .8125rem; line-height: 1.3; color: rgba(255, 255, 255, .75); }
.ac-wa__close { margin-left: auto; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: #fff; opacity: .8; }
.ac-wa__close:hover { opacity: 1; }
.ac-wa__close svg { width: 1.25rem; height: 1.25rem; }
.ac-wa__body { padding: 1.1rem; background: #EFEAE2; }
.ac-wa__bubble {
	width: fit-content; max-width: 88%; margin: 0; padding: .65rem .9rem .7rem;
	background: #fff; border-radius: 0 .75rem .75rem .75rem; box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
	font-size: .9375rem; line-height: 1.45; text-align: left;
}
.ac-wa__bubble strong { display: block; margin-bottom: .15rem; font-size: .75rem; font-weight: 600; color: var(--c-teal-600); }
/* Preselezione della richiesta: quattro scelte sotto il messaggio di benvenuto. */
.ac-wa__topics { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.ac-wa__topics-label { flex: 1 0 100%; margin: 0 0 .1rem; font-size: .8125rem; font-weight: 600; color: var(--c-ink); }
.ac-wa__topic {
	padding: .45rem .8rem; border: 1px solid #25D366; border-radius: 62.438rem; background: #fff; color: #0f5c36;
	font-size: .875rem; font-weight: 600; line-height: 1.2; transition: background-color .2s ease, color .2s ease;
}
.ac-wa__topic:hover { background: #e7f9ee; }
.ac-wa__topic[aria-pressed="true"] { background: #25D366; color: #fff; }
.ac-wa__form { display: grid; gap: .65rem; padding: .9rem 1.1rem 1.1rem; }
.ac-wa__form textarea {
	width: 100%; min-height: 4.5rem; resize: vertical; padding: .7rem .85rem; border-radius: .5rem;
	border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); font: inherit; line-height: 1.45;
	font-size: 1rem; /* almeno 1rem: sotto questa misura Safari su iPhone ingrandisce la pagina quando si tocca il campo */
}
.ac-wa__form textarea:focus { outline: 0.125rem solid #25D366; outline-offset: 1px; }
.ac-wa__send {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.9rem; border-radius: .6rem;
	background: #25D366; color: #fff; font-size: .9375rem; font-weight: 700; transition: background-color .2s ease, opacity .2s ease;
}
.ac-wa__send:hover { background: #1EBE5B; }
.ac-wa__send:disabled { opacity: .5; cursor: not-allowed; }
.ac-wa__send .ac-icon { width: 1.25rem; height: 1.25rem; }
@media (max-width: 599px) {
	.ac-wa { right: 0.75rem; bottom: calc(1.75rem + env(safe-area-inset-bottom)); }
	/* Il pannello resta sempre dentro lo schermo, anche con la tastiera aperta. */
	.ac-wa__panel { max-height: calc(100svh - 7rem); overflow-y: auto; overscroll-behavior: contain; }
}
/* Telefono, mentre si scrive (29/09, richiesta del cliente): il riquadro sale sopra la tastiera (posizione dalla
   parte visibile dello schermo, --vvt/--vvh da main.js) e resta solo intestazione, testo e invio. */
@media (max-width: 767px) {
	.ac-wa.is-typing { transform: none !important; }
	.ac-wa.is-typing .ac-wa__toggle { opacity: 0; visibility: hidden; pointer-events: none; }
	.ac-wa.is-typing .ac-wa__panel {
		position: fixed; left: 0.625rem; right: 0.625rem; width: auto; bottom: auto; top: calc(var(--vvt, 0px) + 0.625rem);
		max-height: calc(var(--vvh, 100svh) - 1.25rem); overflow-y: auto; animation: none;
	}
	.ac-wa.is-typing .ac-wa__body { display: none; }
	.ac-wa.is-typing .ac-wa__form textarea { min-height: 7.5rem; }
	html.ac-wa-typing .ac-cookie-reopen, html.ac-wa-typing .ac-totop { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media print { .ac-wa { display: none !important; } }

/* Con il menu a tutto schermo aperto i pulsanti fissi si fanno da parte. */
html.ac-nav-open .ac-cookie-reopen, html.ac-nav-open .ac-totop { opacity: 0; visibility: hidden; pointer-events: none; }

/* Quando il piè di pagina entra nello schermo il banner sale in alto (classe
   .is-top da main.js), così non copre il footer. Se la testata è visibile si
   mette appena sotto; entra con una breve discesa, in basso con una salita. */
.ac-cookie { transition: top var(--d-2) var(--ease-out); }
.ac-cookie.is-top { top: 1.25rem; bottom: auto; }
html:not(.ac-header-hidden) .ac-cookie.is-top { top: calc(var(--header-h) + 0.75rem); }
.admin-bar .ac-cookie.is-top { margin-top: 2rem; }
@keyframes ac-cookie-up { from { opacity: 0; transform: translate3d(0, 1.5rem, 0); } to { opacity: 1; transform: none; } }
@keyframes ac-cookie-down { from { opacity: 0; transform: translate3d(0, -1.5rem, 0); } to { opacity: 1; transform: none; } }
.ac-cookie__box { animation: ac-cookie-up .5s cubic-bezier(.16, 1, .3, 1) both; }
.ac-cookie.is-top .ac-cookie__box { animation-name: ac-cookie-down; }
@media (max-width: 782px) { .admin-bar .ac-cookie.is-top { margin-top: 46px; } }
@media (max-width: 599px) {
	.ac-cookie { left: 0.625rem; right: 0.625rem; bottom: 0.625rem; }
	.ac-cookie.is-top { top: 0.625rem; bottom: auto; }
	.ac-cookie__box { padding: 1.25rem 1.125rem 1.125rem; }
	.ac-cookie__btn { flex: 1 1 auto; }
	.ac-cookie-reopen { left: 0.75rem; bottom: calc(1.75rem + env(safe-area-inset-bottom)); width: 2.625rem; height: 2.625rem; }
	.ac-totop { right: 0.75rem; bottom: calc(1.75rem + env(safe-area-inset-bottom)); }
}

@media print {
	.ac-cookie, .ac-cookie-reopen, .ac-totop, .ac-header__progress { display: none !important; }
	.ac-header { position: static !important; }
	.ac-main { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important; animation-iteration-count: 1 !important;
		transition-duration: .01ms !important; scroll-behavior: auto !important;
	}
}

/* ---- components.css ---- */
/* ==========================================================================
   COMPONENTI CONDIVISI — pulsanti, link, immagini, intestazioni di sezione,
   hero delle pagine interne, elenco tipologie, numeri, elenchi tecnici,
   quota, CTA finale con pulsante "orbita".
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pulsante a pillola con bollino freccia (due frecce: una esce, l'altra entra)
   -------------------------------------------------------------------------- */
.ac-btn {
	--btn-bg: var(--c-teal-800);
	--btn-fg: var(--c-white);
	--btn-bg-h: var(--c-teal-700);
	--btn-dot: var(--c-mint);
	--btn-dot-fg: var(--c-teal-900);
	position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: 3.5rem; padding: .4375rem .4375rem .4375rem 1.625rem; border-radius: var(--r-pill);
	background: var(--btn-bg); color: var(--btn-fg);
	font-family: var(--f-sans); font-size: .8125rem; line-height: 1.1; font-weight: 600; font-stretch: 90%;
	letter-spacing: .12em; text-transform: uppercase; text-align: left; white-space: nowrap; text-decoration: none;
	transition: background-color var(--d-2) var(--ease-soft), color var(--d-2) var(--ease-soft), box-shadow var(--d-2) var(--ease-soft);
}
.ac-btn__dot {
	position: relative; display: grid; place-items: center; flex: 0 0 auto;
	width: 2.625rem; height: 2.625rem; border-radius: 50%; overflow: hidden;
	background: var(--btn-dot); color: var(--btn-dot-fg);
	transition: transform var(--d-2) var(--ease-out);
}
.ac-btn__dot .ac-icon { grid-area: 1 / 1; width: 0.9375rem; height: 0.75rem; transition: transform .55s var(--ease-out); }
.ac-btn__dot .ac-icon + .ac-icon { transform: translateX(-190%); }
.ac-btn:hover { background: var(--btn-bg-h); }
@media (hover: hover) {
	.ac-btn:hover .ac-btn__dot { transform: scale(1.06); }
	.ac-btn:hover .ac-btn__dot .ac-icon:first-child { transform: translateX(190%); }
	.ac-btn:hover .ac-btn__dot .ac-icon + .ac-icon { transform: none; }
}
.ac-btn--light { --btn-bg: var(--c-white); --btn-fg: var(--c-ink); --btn-bg-h: var(--c-paper); --btn-dot: var(--c-teal-800); --btn-dot-fg: var(--c-white); }
.ac-btn--mint { --btn-bg: var(--c-mint); --btn-fg: var(--c-teal-900); --btn-bg-h: #BDF8EA; --btn-dot: var(--c-teal-900); --btn-dot-fg: var(--c-mint); }
.ac-btn--outline {
	--btn-bg: transparent; --btn-bg-h: transparent; --btn-fg: var(--fg, var(--c-ink));
	--btn-dot: var(--fg, var(--c-ink)); --btn-dot-fg: var(--bg, var(--c-paper));
	box-shadow: inset 0 0 0 1px var(--line-2, var(--c-line-2));
}
.ac-btn--outline:hover { box-shadow: inset 0 0 0 1px var(--fg, var(--c-ink)); }
/* Spigoli vivi, anche il pallino con la freccia. */
.ac-btn--square, .ac-btn--square .ac-btn__dot { border-radius: 0; }
/* "Indietro": freccia rivolta a sinistra e messa prima del testo. */
.ac-btn--back { flex-direction: row-reverse; padding: .4375rem 1.625rem .4375rem .4375rem; }
.ac-btn--back .ac-btn__dot { transform: scaleX(-1); }
.ac-btn--back.ac-btn--sm { padding: .3125rem 1.125rem .3125rem .3125rem; }
@media (hover: hover) { .ac-btn.ac-btn--back:hover .ac-btn__dot { transform: scaleX(-1) scale(1.06); } }
.ac-btn--sm { min-height: 2.75rem; gap: .75rem; padding: .3125rem .3125rem .3125rem 1.125rem; font-size: .71875rem; }
.ac-btn--sm .ac-btn__dot { width: 2.125rem; height: 2.125rem; }
.ac-btn--sm .ac-btn__dot .ac-icon { width: 0.8125rem; height: 0.625rem; }

/* --------------------------------------------------------------------------
   Link testuale: filo sottile che si riempie da sinistra, freccia che avanza
   -------------------------------------------------------------------------- */
.ac-link {
	display: inline-flex; align-items: center; gap: .625rem; padding: .375rem 0 .5rem;
	font-family: var(--f-sans); font-size: .8125rem; line-height: 1.1; font-weight: 600; font-stretch: 90%;
	letter-spacing: .12em; text-transform: uppercase; color: var(--fg, var(--c-ink)); text-decoration: none;
	background:
		linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat,
		linear-gradient(var(--line-2, var(--c-line-2)), var(--line-2, var(--c-line-2))) 0 100% / 100% 1px no-repeat;
	transition: background-size .6s var(--ease-out), color var(--d-1) ease;
}
.ac-link:hover { background-size: 100% 1px, 100% 1px; }
.ac-link .ac-icon { width: 0.9375rem; height: 0.75rem; transition: transform var(--d-2) var(--ease-out); }
.ac-link:hover .ac-icon { transform: translateX(0.25rem); }

/* --------------------------------------------------------------------------
   Immagini: cornice con proporzioni, livello interno per lo zoom al passaggio,
   immagine con parallasse leggera (--p = avanzamento 0→1 calcolato da main.js)
   -------------------------------------------------------------------------- */
.ac-media { position: relative; margin: 0; overflow: hidden; background: var(--c-sand); aspect-ratio: var(--ratio, 3 / 2); }
.ac-media__inner { position: absolute; inset: 0; overflow: hidden; transition: transform 1.2s var(--ease-out); }
.ac-media__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ac-media--parallax .ac-media__img { top: -9%; height: 118%; transform: translate3d(0, calc((var(--p, .5) - .5) * -15%), 0); }
.ac-media--grade .ac-media__img { filter: saturate(.9) contrast(1.03); }
.ac-media--arch { border-radius: 50% 50% 0 0 / 37.5% 37.5% 0 0; }
@media (hover: hover) {
	a:hover .ac-media .ac-media__inner, .ac-zoom:hover .ac-media__inner { transform: scale(1.04); }
}

/* --------------------------------------------------------------------------
   Intestazione di sezione: etichetta, titolo grande, colonna laterale
   -------------------------------------------------------------------------- */
.ac-head {
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.5rem;
	align-items: end; margin-bottom: var(--stack);
}
.ac-head__label { grid-column: 1 / -1; }
.ac-head__title { grid-column: 1 / span 8; }
.ac-head__aside { grid-column: 9 / -1; display: grid; gap: 1.5rem; justify-items: start; padding-bottom: .5em; }
.ac-head__text { color: var(--fg-2); max-width: 28rem; }
@media (max-width: 1023px) {
	.ac-head__title, .ac-head__aside { grid-column: 1 / -1; }
	.ac-head__aside { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Tipologie di locali: indice tipografico, parole che si "accendono"
   -------------------------------------------------------------------------- */
.ac-types { padding-block: var(--section-s); border-bottom: 1px solid var(--line); }
.ac-types + .ac-work { padding-top: var(--section-s); }
.ac-types__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.75rem; align-items: start; }
.ac-types__label { grid-column: 1 / span 3; margin-top: .3rem; }
.ac-types__list {
	grid-column: 4 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15em .4em;
	font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.028em; font-weight: 350; font-stretch: 104%;
}
.ac-types__item { display: inline-flex; align-items: baseline; gap: .4em; color: var(--fg); transition: color .7s var(--ease-soft); transition-delay: calc(var(--i, 0) * 90ms); }
.ac-types__link { display: inline-flex; align-items: baseline; gap: .32em; color: inherit; transition: color var(--d-1) ease; }
.ac-types__icon { display: inline-flex; align-self: center; color: var(--accent); }
.ac-types__icon .ac-icon { width: .6em; height: .6em; }
.ac-types__sep { color: var(--fg-4); font-weight: 200; }
a.ac-types__link:hover { color: var(--accent); }
@media (max-width: 1023px) {
	.ac-types__label, .ac-types__list { grid-column: 1 / -1; }
	.ac-types__label { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Numeri: cifre enormi con un metro sotto, tutte alla stessa altezza (fino al 29/09 erano
   sfalsate: il cliente vuole le linee allineate)
   -------------------------------------------------------------------------- */
.ac-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); border-top: 1px solid var(--line); }
.ac-nums__item { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(2rem, 1.2rem + 3vw, 4rem) 0 clamp(2.25rem, 1.4rem + 3vw, 4.5rem); border-bottom: 1px solid var(--line); min-width: 0; }
.ac-nums__item:nth-child(even) { padding-left: clamp(0rem, -2rem + 6vw, 6rem); border-left: 1px solid var(--line); }
.ac-nums__fig { display: inline-flex; flex-direction: column; max-width: 100%; }
.ac-nums__value {
	display: flex; align-items: flex-start; white-space: nowrap;
	font-size: var(--fs-num); line-height: .8; font-weight: 200; font-stretch: 125%; letter-spacing: -.055em;
	font-variant-numeric: tabular-nums lining-nums;
}
.ac-nums__unit { margin-left: .06em; font-size: .36em; line-height: 1; font-weight: 300; letter-spacing: 0; color: var(--accent); }
.ac-nums__label { margin-bottom: .75rem; color: var(--fg); }
.ac-nums__text { max-width: 24rem; color: var(--fg-2); }
/* Telefono: due colonne, tutto al centro (dal 29/09: in colonna unica i quattro numeri occupavano
   più di uno schermo). */
@media (max-width: 767px) {
	.ac-nums { column-gap: 0; }
	.ac-nums__item { align-items: center; padding: 1.5rem .75rem 1.75rem 0; text-align: center; }
	.ac-nums__item:nth-child(even) { padding-left: .75rem; padding-right: 0; }
	.ac-nums__fig { align-items: center; }
	.ac-nums__value { font-size: clamp(2.5rem, 1rem + 7.5vw, 3.5rem); }
	.ac-nums .ac-dim { margin: .8rem 0 .9rem; }
	.ac-nums__label { margin-bottom: .5rem; }
	.ac-nums__text { font-size: .875rem; line-height: 1.5; }
}

/* Tre numeri (dal 29/09 è stato tolto "unico interlocutore"): da tablet in su tre colonne con le
   cifre un po' più piccole, perché "4.000" ci stia; da telefono i primi due affiancati e il terzo
   sotto, a tutta larghezza. La classe arriva dai template quando i numeri sono tre. */
@media (min-width: 768px) {
	.ac-nums--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ac-nums--3 .ac-nums__item:nth-child(3) { padding-left: clamp(0rem, -2rem + 6vw, 6rem); border-left: 1px solid var(--line); }
	.ac-nums--3 .ac-nums__value { font-size: clamp(3.5rem, 1.2rem + 6.4vw, 9.5rem); }
}
@media (max-width: 767px) {
	.ac-nums--3 .ac-nums__item:nth-child(3) { grid-column: 1 / -1; padding-right: 0; }
}

/* Metro sotto ogni cifra (29/09, richiesta del cliente: "tipo un metro"), lungo quanto la cifra:
   linea di base, tacche ogni 0.375rem, tacche lunghe ogni 1.875rem e due fermi alle estremità. Stesso
   disegno del metro sotto "su misura" nell'hero della home, nel colore d'accento della sezione. */
.ac-dim { position: relative; display: block; width: 100%; height: 0.75rem; margin: 1.15rem 0 1.25rem; color: var(--accent-text, var(--line-2)); }
.ac-dim::before {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat,
		repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 1.875rem) left bottom / 100% 0.625rem no-repeat,
		repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 0.375rem) left bottom / 100% 0.3125rem no-repeat;
}
.ac-dim::after { content: ""; position: absolute; top: -0.125rem; bottom: 0; left: 0; right: 0; border-left: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }

/* --------------------------------------------------------------------------
   Elenco tecnico (punti elenco delle pagine). Fino al 28/09 era numerato 01, 02…:
   dal colloquio del 25/09 i servizi non hanno più numeri, al loro posto un trattino.
   -------------------------------------------------------------------------- */
.ac-spec { border-top: 1px solid var(--line); }
.ac-spec li {
	display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: start;
	padding: .95rem 0; border-bottom: 1px solid var(--line); line-height: 1.45; color: var(--fg);
}
.ac-spec li::before { content: ""; width: .75rem; height: 1px; margin-top: .72em; background: var(--accent); }

/* --------------------------------------------------------------------------
   CTA finale: tipografia enorme, testo, pulsante "orbita" (+ immagine ad arco)
   -------------------------------------------------------------------------- */
.ac-final { position: relative; padding-block: var(--section); overflow: hidden; }
.ac-final__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); align-items: end; }
.ac-final__title { grid-column: 1 / span 10; }
.ac-final__text { grid-column: 1 / span 7; max-width: 44rem; }
.ac-final__action { grid-column: 9 / -1; justify-self: end; }
.ac-final__foot { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.ac-final--image .ac-final__title { grid-column: 1 / span 9; grid-row: 1; }
.ac-final--image .ac-final__media { grid-column: 10 / -1; grid-row: 1 / span 2; align-self: start; --ratio: 3 / 4; }
.ac-final--image .ac-final__text { grid-row: 2; grid-column: 1 / span 6; }
.ac-final--image .ac-final__action { grid-column: 7 / span 3; grid-row: 2; justify-self: center; }
@media (max-width: 1023px) {
	.ac-final__title, .ac-final--image .ac-final__title { grid-column: 1 / -1; }
	.ac-final__text { grid-column: 1 / span 7; }
	.ac-final__action { grid-column: 8 / -1; }
	.ac-final--image .ac-final__media { grid-column: 1 / span 6; grid-row: auto; max-width: 22rem; }
	.ac-final--image .ac-final__text { grid-row: auto; grid-column: 1 / -1; }
	.ac-final--image .ac-final__action { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 767px) {
	.ac-final__text, .ac-final__action { grid-column: 1 / -1; }
	.ac-final__action { justify-self: start; }
	/* Telefono: il cerchio che gira sta a cavallo dell'angolo in basso a destra della foto ad arco.
	   "translate" (non "transform") per non litigare con l'animazione di comparsa. */
	.ac-final--image .ac-final__title { grid-row: 1; }
	.ac-final--image .ac-final__media { grid-row: 2; grid-column: 1 / -1; justify-self: center; width: min(17rem, 78%); max-width: none; }
	.ac-final--image .ac-final__action { grid-row: 2; grid-column: 1 / -1; justify-self: center; align-self: end; z-index: 2; translate: min(8rem, 30vw) 42%; }
	.ac-final--image .ac-final__text { grid-row: 3; margin-top: 3.25rem; }
}

/* "Ti raggiungiamo noi, ovunque tu sia. Gratis e senza impegno." (29/09, richiesta del cliente: messaggio
   importante, "bello evidente, sottolineato, in grande"). Corpo da titolo; la seconda frase nel corsivo
   delle parole in evidenza, sottolineata (ac_note()). Nella chiamata finale di tutte le pagine e sotto
   i punti di forza della home. */
.ac-note { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 400; color: var(--fg); text-wrap: balance; }
.ac-note__lead { display: block; }
.ac-note__mark {
	display: inline-block; margin-top: .12em; text-decoration: underline; text-decoration-thickness: .06em;
	text-underline-offset: .22em; text-decoration-skip-ink: none;
}

/* Pulsante "orbita": testo che gira intorno a un nucleo con la freccia. */
.ac-orbit {
	position: relative; display: inline-grid; place-items: center; flex: 0 0 auto;
	width: clamp(8.75rem, 6rem + 7vw, 12.5rem); aspect-ratio: 1; border-radius: 50%;
	background: var(--c-mint); color: var(--c-teal-900); text-decoration: none;
	transition: transform .6s var(--ease-out), background-color var(--d-2) ease;
}
.ac-orbit__ring { position: absolute; inset: 7%; width: 86%; height: 86%; overflow: visible; }
.ac-orbit__ring text { font-family: var(--f-sans); font-size: 0.65625rem; font-weight: 600; font-stretch: 90%; letter-spacing: .08em; text-transform: uppercase; fill: currentColor; }
.ac-orbit__core {
	position: relative; display: grid; place-items: center; width: 36%; aspect-ratio: 1; border-radius: 50%;
	background: var(--c-teal-900); color: var(--c-mint); transition: transform .6s var(--ease-out);
}
.ac-orbit__core .ac-icon { width: 38%; height: auto; }
.ac-orbit:hover { background: #BDF8EA; }
.ac-orbit:hover .ac-orbit__core { transform: scale(1.14) rotate(-45deg); }
.t-paper .ac-orbit, .t-stone .ac-orbit { background: var(--c-teal-800); color: var(--c-white); }
.t-paper .ac-orbit__core, .t-stone .ac-orbit__core { background: var(--c-mint); color: var(--c-teal-900); }
.t-paper .ac-orbit:hover, .t-stone .ac-orbit:hover { background: var(--c-teal-700); }
@keyframes ac-spin { to { transform: rotate(360deg); } }

/* Telefono: le intestazioni di sezione (etichetta, titolo, testo, pulsante) sono centrate;
   elenchi, schede e testi lunghi restano allineati a sinistra per leggerli meglio. */
@media (max-width: 767px) {
	.ac-head, .ac-head__aside, .ac-svc__aside, .ab-team__intro, .ac-final__grid, .ac-types__grid { justify-items: center; text-align: center; }
	.ac-head .ac-label--dot, .ac-svc__aside .ac-label--dot, .ab-team__intro .ac-label--dot, .ac-types__label, .ac-brand__label, .ev-list__label, .pr-browser__aside-title { justify-self: center; margin-inline: auto; }
	.ac-head__text, .ac-svc__text, .ab-team__text, .ac-final__text { margin-inline: auto; }
	.ac-final__action { justify-self: center; }
	.ac-types__list { justify-content: center; }
}

/* ---- header.css ---- */
/* ==========================================================================
   HEADER — fisso, minimale. Sulla home parte trasparente sopra il video
   (logo bianco), poi diventa "intonaco" sfocato con filo sottile; scendendo
   si nasconde, risalendo riappare. Sotto 73.75rem il menu diventa un pannello
   a tutto schermo con voci numerate, contatti e lingua.
   ========================================================================== */
/* Niente transform sull'header: creerebbe un contenitore per il pannello "fixed"
   del menu. Per nasconderlo si sposta "top" (un solo elemento, costo trascurabile). */
.ac-header {
	--adminbar: 0px;
	position: fixed; top: var(--adminbar); left: 0; right: 0; z-index: var(--z-header);
	height: var(--header-h); color: var(--c-ink);
	transition: top .55s var(--ease-out), color var(--d-2) ease;
}
.admin-bar .ac-header { --adminbar: 2rem; }
@media (max-width: 782px) { .admin-bar .ac-header { --adminbar: 46px; } }
.ac-header::before {
	content: ""; position: absolute; inset: 0;
	background: rgba(244, 242, 238, .9);
	-webkit-backdrop-filter: saturate(1.3) blur(1rem); backdrop-filter: saturate(1.3) blur(1rem);
	box-shadow: inset 0 -1px 0 var(--c-line);
	transition: opacity var(--d-2) ease;
}
.ac-header--over:not(.is-solid) { color: var(--c-white); }
.ac-header--over:not(.is-solid)::before { opacity: 0; }
.ac-header.is-hidden { top: calc(var(--adminbar) - var(--header-h) - 0.1875rem); }
.ac-header.is-open { top: var(--adminbar); color: var(--c-white); }
.ac-header.is-open::before { opacity: 0; }

.ac-header__bar {
	position: relative; z-index: 2; height: 100%;
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-6);
}
.ac-header__logo { grid-column: 1; position: relative; z-index: 3; display: block; height: var(--logo-h); aspect-ratio: 800 / 185; }
/* Logo storico (AC_LOGO_OLD): proporzioni 220/69, un filo più alto del nuovo. */
.ac-logo-old .ac-header__logo { aspect-ratio: 220 / 69; height: calc(var(--logo-h) + 0.25rem); }
.ac-logo { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--d-2) ease; }
.ac-logo--light { opacity: 0; }
.ac-header--over:not(.is-solid) .ac-logo--ink, .ac-header.is-open .ac-logo--ink { opacity: 0; }
.ac-header--over:not(.is-solid) .ac-logo--light, .ac-header.is-open .ac-logo--light { opacity: 1; }

/* Filo di avanzamento della lettura (indicatore di posizione nella pagina). */
.ac-header__progress {
	position: absolute; left: 0; bottom: 0; z-index: 3; width: 100%; height: 0.25rem;
	background: var(--c-teal-600); transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
	opacity: 0; transition: opacity var(--d-2) ease;
}
.ac-header.is-solid:not(.is-open) .ac-header__progress { opacity: 1; }
/* Percentuale di lettura: piccola etichetta squadrata, ferma a sinistra sotto la barra. */
.ac-header__pct {
	position: absolute; top: 100%; left: var(--gutter); z-index: 3;
	transition: opacity var(--d-2) ease;
	padding: .22rem .5rem .2rem; background: var(--c-teal-600); color: var(--c-white);
	font-size: .6875rem; line-height: 1.2; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums;
	opacity: 0; pointer-events: none;
}
.ac-header.is-solid:not(.is-open) .ac-header__pct { opacity: 1; }
.ac-header.is-hidden .ac-header__pct { opacity: 0; }

/* ---- Menu (desktop) ------------------------------------------------ */
.ac-nav { justify-self: center; }
.ac-menu { display: flex; align-items: center; gap: clamp(1.25rem, .1rem + 1.9vw, 2.75rem); }
.ac-menu a {
	position: relative; display: inline-flex; align-items: center; padding: .5rem 0;
	font-size: .9375rem; line-height: 1.2; font-weight: 500; letter-spacing: -.005em; white-space: nowrap;
}
/* Sottolineatura: linea sottile che si allunga al passaggio e resta sotto la voce della pagina aperta.
   (Dal 29/09 al 30/09 c'era un metro: il cliente ha chiesto di tornare alla linea semplice.) */
.ac-menu a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px; background: currentColor;
	transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease-out);
}
.ac-menu a:hover::after,
.ac-menu .current-menu-item > a::after,
.ac-menu .current_page_item > a::after,
.ac-menu .current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: 0 50%; }
.ac-nav__extra { display: none; }

/* ---- Menu a tendina sotto Servizi e Progetti (solo da 1180px) ---------- */
.ac-sub, .ac-sub__caret { display: none; }
@media (min-width: 1180px) {
	.ac-menu > .ac-has-sub { position: relative; display: flex; align-items: center; gap: .45rem; }
	.ac-sub__caret {
		display: block; width: .42rem; height: .42rem; margin-top: -.25rem;
		border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg); opacity: .6; transition: transform .4s var(--ease-out), opacity var(--d-1) ease;
	}
	.ac-has-sub:hover > .ac-sub__caret, .ac-has-sub:focus-within > .ac-sub__caret { transform: translateY(.3rem) rotate(225deg); opacity: 1; }
	/* Il riquadro parte dal filo inferiore dell'header (la voce è centrata in altezza). */
	.ac-sub {
		display: block; position: absolute; left: -1.5rem; top: calc(100% + (var(--header-h) - 100%) / 2);
		min-width: 16rem; margin: 0; padding: .35rem 0; list-style: none;
		background: var(--c-white); border: 1px solid var(--c-line); box-shadow: 0 1.75rem 3.125rem -1.5rem rgba(6, 32, 31, .4);
		opacity: 0; visibility: hidden; transform: translate3d(0, .5rem, 0);
		transition: opacity .25s ease, transform .4s var(--ease-out), visibility 0s linear .4s;
	}
	.ac-sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 2.25rem; }
	.ac-has-sub:hover > .ac-sub, .ac-has-sub:focus-within > .ac-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.ac-sub li + li { border-top: 1px solid var(--c-line); }
	.ac-menu .ac-sub a { display: flex; padding: .85rem 1.5rem; color: var(--c-ink); font-size: .9375rem; font-weight: 450; transition: background-color var(--d-1) ease, color var(--d-1) ease; }
	.ac-menu .ac-sub a::after { display: none; }
	.ac-menu .ac-sub--events a { flex-direction: column; align-items: flex-start; gap: .2rem; }
	.ac-sub__title { font-weight: 500; }
	.ac-sub__meta { font-size: .75rem; font-weight: 600; font-stretch: 90%; letter-spacing: .1em; text-transform: uppercase; color: var(--c-teal-600); }
	.ac-menu .ac-sub a:hover, .ac-menu .ac-sub a:focus-visible { background: var(--c-paper); color: var(--c-teal-700); }
}

/* ---- Lingua, CTA, hamburger ------------------------------------------ */
/* Sempre nell'ultima colonna: sotto i 1180px il menu diventa un pannello fisso ed esce dalla griglia,
   e senza questa regola gli strumenti finivano nella colonna centrale, con 2rem di troppo a destra
   (hamburger più lontano dal bordo del logo). */
.ac-header__tools { grid-column: 3; position: relative; z-index: 3; display: flex; align-items: center; justify-self: end; gap: .75rem; }
.ac-header__tools .ac-lang, .ac-nav__extra .ac-lang { padding: 0.1875rem; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--c-line); }
.ac-header__tools .ac-lang__link { height: 1.875rem; padding: 0 0.625rem; }
.ac-header__tools .ac-lang__link:hover { background: rgba(14, 33, 36, .06); }
.ac-header__tools .ac-lang__item.is-active .ac-lang__link { background: var(--c-ink); color: var(--c-paper); }
.ac-header--over:not(.is-solid) .ac-header__tools .ac-lang { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32); }
.ac-header--over:not(.is-solid) .ac-header__tools .ac-lang__link:hover { background: rgba(255, 255, 255, .12); }
.ac-header--over:not(.is-solid) .ac-header__tools .ac-lang__item.is-active .ac-lang__link { background: var(--c-white); color: var(--c-ink); }
.ac-header--over:not(.is-solid) .ac-header__cta {
	--btn-bg: var(--c-white); --btn-fg: var(--c-ink); --btn-bg-h: var(--c-paper);
	--btn-dot: var(--c-teal-800); --btn-dot-fg: var(--c-white);
}

.ac-burger {
	position: relative; display: none; width: 2.875rem; height: 2.875rem; border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(14, 33, 36, .22);
	transition: box-shadow var(--d-2) ease, background-color var(--d-2) ease;
}
.ac-header--over:not(.is-solid) .ac-burger, .ac-header.is-open .ac-burger { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.ac-burger span {
	position: absolute; left: 0.875rem; right: 0.875rem; height: 1.5px; background: currentColor; border-radius: 1px;
	transition: transform .5s var(--ease-out), top .5s var(--ease-out);
}
.ac-burger span:first-child { top: 1.1875rem; }
.ac-burger span:last-child { top: 1.5938rem; }
.ac-header.is-open .ac-burger span:first-child { top: 1.3906rem; transform: rotate(45deg); }
.ac-header.is-open .ac-burger span:last-child { top: 1.3906rem; transform: rotate(-45deg); }

/* ---- Pannello a tutto schermo (tablet e telefono) --------------------- */
@media (max-width: 1179px) {
	.ac-burger { display: inline-block; }
	.ac-header__tools .ac-lang { display: none; }
	.ac-header.is-open .ac-header__cta { opacity: 0; visibility: hidden; }

	.ac-nav {
		position: fixed; inset: 0; z-index: 1; justify-self: stretch; align-self: stretch;
		display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem;
		padding: calc(var(--header-h) + clamp(1.5rem, 5vh, 3rem)) var(--gutter) max(2rem, env(safe-area-inset-bottom));
		background: var(--c-teal-950); color: var(--c-white);
		overflow-y: auto; overscroll-behavior: contain;
		clip-path: inset(0 0 100% 0); visibility: hidden;
		transition: clip-path .75s var(--ease-io), visibility 0s linear .75s;
	}
	.admin-bar .ac-nav { padding-top: calc(var(--header-h) + 2.875rem + 1.5rem); }
	.ac-header.is-open .ac-nav { clip-path: inset(0); visibility: visible; transition: clip-path .75s var(--ease-io), visibility 0s; }

	.ac-menu { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--c-line-inv); }
	.ac-menu li { border-bottom: 1px solid var(--c-line-inv); opacity: 0; transform: translate3d(0, 1.25rem, 0); transition: opacity .4s ease, transform .6s var(--ease-out); }
	.ac-menu li:nth-child(2) { --i: 1; } .ac-menu li:nth-child(3) { --i: 2; } .ac-menu li:nth-child(4) { --i: 3; }
	.ac-menu li:nth-child(5) { --i: 4; } .ac-menu li:nth-child(6) { --i: 5; } .ac-menu li:nth-child(7) { --i: 6; }
	.ac-header.is-open .ac-menu li { opacity: 1; transform: none; transition-delay: calc(.28s + var(--i, 0) * 60ms); }
	.ac-menu a {
		display: flex; align-items: baseline; gap: 1rem; padding: .9rem 0;
		font-size: clamp(2rem, 1.35rem + 3.4vw, 3.25rem); line-height: 1.02; font-weight: 300; font-stretch: 108%; letter-spacing: -.035em;
	}
	/* Niente numeri 01–06 davanti alle voci (29/09, richiesta del cliente: via i numeri anche qui). */
	.ac-menu a::after { display: none; }
	.ac-menu .current-menu-item > a, .ac-menu .current_page_item > a { color: var(--c-mint); }

	.ac-nav__extra { display: grid; gap: 1.75rem; opacity: 0; transition: opacity .4s ease; }
	.ac-header.is-open .ac-nav__extra { opacity: 1; transition-delay: .55s; }
	.ac-nav__contacts { display: grid; gap: .5rem; }
	.ac-nav__contacts a { display: inline-flex; align-items: center; gap: .75rem; font-size: 1.0625rem; color: rgba(255, 255, 255, .88); }
	.ac-nav__contacts .ac-icon { width: 1.125rem; height: 1.125rem; color: var(--c-mint); }
	.ac-nav__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
	.ac-nav__extra .ac-lang { box-shadow: inset 0 0 0 1px var(--c-line-inv-2); }
	.ac-nav__extra .ac-lang__item.is-active .ac-lang__link { background: var(--c-white); color: var(--c-ink); }
	.ac-nav__extra .ac-signature { color: rgba(255, 255, 255, .6); }
	.ac-nav__extra .ac-btn { justify-self: stretch; }
}
@media (max-width: 639px) {
	.ac-header__cta { display: none; }
}
@media (min-width: 1180px) and (max-width: 1320px) {
	.ac-header__bar { column-gap: var(--s-5); }
	.ac-header__tools { gap: .5rem; }
	.ac-header__tools .ac-lang__link { padding: 0 0.5rem; gap: 0.3125rem; }
}

/* ---- footer.css ---- */
/* ==========================================================================
   FOOTER — petrolio profondo. In alto la firma in grande ("La nostra firma,
   il tuo spazio."), sotto logo bianco e colonne, in fondo copyright e note legali.
   ========================================================================== */
/* In fondo resta una fascia vuota: lì si appoggiano i pulsanti fissi (cookie a sinistra, "torna su" a destra). */
.ac-footer { padding-top: var(--section); padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
@media (max-width: 599px) { .ac-footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); } }
.ac-footer__top {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem;
	padding-bottom: clamp(2.5rem, 1.8rem + 3vw, 5rem); border-bottom: 1px solid var(--line);
}
.ac-footer__sign {
	font-size: var(--fs-h1); line-height: .98; letter-spacing: -.042em; font-weight: 300; font-stretch: 106%;
	color: var(--fg);
}
.ac-footer__grid {
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem;
	padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}
.ac-footer__brand { grid-column: 1 / span 4; display: grid; align-content: start; gap: 1.5rem; }
.ac-footer__logo { display: block; width: clamp(13.5rem, 11rem + 4vw, 16.25rem); aspect-ratio: 800 / 185; }
.ac-logo-old .ac-footer__logo { width: clamp(10rem, 9rem + 2vw, 12rem); aspect-ratio: 220 / 69; }
.ac-footer__logo .ac-logo { position: static; width: 100%; height: auto; opacity: 1; }
.ac-footer__tagline { max-width: 22rem; color: var(--fg-2); }
.ac-footer__col { grid-column: span 2; min-width: 0; }
.ac-footer__col--contacts { grid-column: span 4; }
.ac-footer__title { margin-bottom: 1.25rem; color: var(--fg-3); }
.ac-footer__list { display: grid; gap: .55rem; }
.ac-footer__list a, .ac-footer__contacts a { color: var(--fg-2); transition: color var(--d-1) ease; }
.ac-footer__list a:hover, .ac-footer__contacts a:hover, .ac-footer__legal a:hover { color: var(--accent); }
.ac-footer__list .current-menu-item > a { color: var(--fg); }
.ac-footer__contacts { display: grid; gap: .75rem; }
.ac-footer__contacts li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .75rem; align-items: start; color: var(--fg-2); }
.ac-footer__contacts .ac-icon { width: 1.125rem; height: 1.125rem; margin-top: .2em; color: var(--accent); }
.ac-footer__follow { margin-top: 1.75rem; display: grid; gap: .9rem; }
.ac-footer__follow .ac-label { color: var(--fg-3); }
.ac-footer__social { display: flex; gap: .5rem; }
.ac-footer__social a {
	display: grid; place-items: center; width: 2.625rem; height: 2.625rem; border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg);
	transition: background-color var(--d-2) ease, color var(--d-2) ease, transform var(--d-2) var(--ease-out);
}
.ac-footer__social a:hover { background: var(--c-mint); color: var(--c-teal-900); transform: translateY(-0.125rem); }
.ac-footer__social .ac-icon { width: 1.125rem; height: 1.125rem; }
.ac-footer__bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem;
	padding-top: 1.5rem; border-top: 1px solid var(--line);
	font-size: .8125rem; line-height: 1.5; color: var(--fg-3);
}
.ac-footer__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.ac-footer__legal a { color: var(--fg-2); transition: color var(--d-1) ease; }

@media (max-width: 1023px) {
	.ac-footer__brand { grid-column: 1 / -1; }
	.ac-footer__col { grid-column: span 6; }
	.ac-footer__col--contacts { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
	.ac-footer__col { grid-column: span 6; }
	.ac-footer__col--contacts { grid-column: 1 / -1; }
	.ac-footer__list a { font-size: 1rem; line-height: 1.3; }
	.ac-footer__top .ac-btn { width: 100%; }
}

/* ---- hero.css ---- */
/* ==========================================================================
   HOME — HERO cinematografico a tutto schermo.
   Tre livelli per l'immagine: __media (spostamento allo scroll), __zoom
   (entrata al caricamento), img/video (leggero ingrandimento allo scroll).
   --p (0→1) è l'avanzamento dello scroll dentro l'hero, calcolato da main.js.
   ========================================================================== */
.ac-hero {
	position: relative; display: flex; min-height: 100vh; min-height: 100svh;
	overflow: hidden; isolation: isolate; background: var(--c-teal-950); color: var(--c-white);
}
.ac-hero__media { position: absolute; inset: 0; z-index: -2; transform: translate3d(0, calc(var(--p, 0) * 24%), 0); }
.ac-hero__zoom { position: absolute; inset: 0; }
.ac-hero__img, .ac-hero__video {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
	transform: scale(calc(1.02 + var(--p, 0) * .08));
}
.ac-hero__video { opacity: 0; transition: opacity .15s linear; }
.ac-hero__video.is-playing { opacity: 1; }
.ac-hero__shade {
	position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(4, 22, 24, .45) 0%, rgba(4, 22, 24, 0) 24%),
		linear-gradient(0deg, rgba(4, 22, 24, .64) 0%, rgba(4, 22, 24, .24) 40%, rgba(4, 22, 24, 0) 64%),
		linear-gradient(90deg, rgba(4, 22, 24, .36) 0%, rgba(4, 22, 24, 0) 62%);
}

.ac-hero__inner {
	position: relative; flex: 1 1 auto; display: flex; flex-direction: column;
	padding-top: calc(var(--header-h) + clamp(1.25rem, 3vh, 2.75rem));
	padding-bottom: clamp(1rem, 2.4vh, 1.75rem);
	opacity: calc(1 - var(--p, 0) * 1.5);
	transform: translate3d(0, calc(var(--p, 0) * -5rem), 0);
}
/* Etichetta subito sopra il titolo, in un riquadro a spigoli vivi. */
.ac-hero__badge {
	justify-self: start; margin-bottom: -.5rem;
	padding: .62rem 1.05rem .58rem 1.35rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 0;
	background: rgba(6, 32, 31, .35); color: var(--c-white);
	-webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem);
}
.ac-hero__main { margin-block: auto; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2rem; padding: clamp(2rem, 6vh, 4rem) 0 clamp(1.75rem, 4.5vh, 3.5rem); }
.ac-hero__title { color: var(--c-white); max-width: 15ch; }
.ac-hero__title .ac-serif { color: var(--c-brass); }
.ac-hero__side { max-width: 30rem; }
.ac-hero__text { margin-bottom: 1.5rem; font-size: clamp(.9375rem, .9rem + .12vw, 1rem); line-height: 1.6; color: rgba(255, 255, 255, .86); }
.ac-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.ac-link--light { --fg: var(--c-white); --line-2: rgba(255, 255, 255, .42); }

.ac-hero__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .22);
}
.ac-hero__foot .ac-signature { color: rgba(255, 255, 255, .74); }
/* Il pulsante fisso delle preferenze cookie (in basso a sinistra) non deve coprire la firma. */
html:has(#ac-cookie-reopen:not([hidden])) .ac-hero__foot { padding-left: max(0px, calc(5.5rem - var(--gutter))); }
.ac-hero__scroll { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; }
.ac-hero__scroll-line { position: relative; width: 1px; height: 2.25rem; overflow: hidden; background: rgba(255, 255, 255, .28); }
.ac-hero__scroll-line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--c-white); }
.ac-js .ac-hero__scroll-line::after { animation: ac-scrollcue 2.4s var(--ease-io) infinite; }
@keyframes ac-scrollcue {
	0% { transform: translateY(-110%); }
	65%, 100% { transform: translateY(260%); }
}

/* ---- Hero delle pagine interne: stessa struttura, foto che entra da destra ---- */
.ac-hero--page { min-height: 100vh; min-height: 100svh; }
/* Telefono e tablet: la foto resta intera ma si scurisce dove c'è il testo. */
.ac-hero--page .ac-hero__shade {
	background:
		linear-gradient(180deg, rgba(6, 32, 31, .5) 0%, rgba(6, 32, 31, .38) 30%, rgba(6, 32, 31, .72) 58%, rgba(6, 32, 31, .9) 100%);
}
.ac-hero--page .ac-hero__title { max-width: 17ch; }
.ac-hero--page .ac-hero__side .ac-hero__text + .ac-hero__text { margin-top: -.75rem; }
.ac-hero--page .ac-hero__actions { margin-top: .25rem; }

/* Desktop — home e pagine interne con lo stesso impianto: la foto (o il video) occupa
   la parte destra e sfuma nel petrolio; titolo, testo e azioni stanno a sinistra sul
   fondo pieno. Titoli contenuti (--fs-hero), altezza dell'hero invariata. */
@media (min-width: 1024px) {
	/* Titolo, testo e pulsanti centrati in altezza (non più appoggiati in fondo). */
	.ac-hero__main { margin-block: auto; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2rem; align-items: end; }
	.ac-hero__badge { grid-column: 1 / -1; grid-row: 1; }
	.ac-hero .ac-hero__title { grid-column: 1 / span 7; grid-row: 2; max-width: none; font-size: var(--fs-hero); line-height: .98; letter-spacing: -.04em; }
	.ac-hero__side { grid-column: 1 / span 5; grid-row: 3; justify-self: start; width: 100%; max-width: 32rem; padding-bottom: 0; }
	/* La foto (o il video) copre tutto l'hero; la patina petrolio non è più una fascia piena:
	   parte velata dal bordo sinistro e sfuma lentamente fino a sparire verso destra (richiesta
	   del cliente: meno "pesante"). Stessa regola per home e pagine interne
	   (".ac-hero .ac-hero__shade" batte la versione mobile). */
	.ac-hero__media { left: 0; -webkit-mask-image: none; mask-image: none; }
	.ac-hero .ac-hero__shade {
		background:
			linear-gradient(90deg, rgba(6, 32, 31, .86) 0%, rgba(6, 32, 31, .76) 18%, rgba(6, 32, 31, .6) 34%, rgba(6, 32, 31, .38) 50%, rgba(6, 32, 31, .16) 68%, rgba(6, 32, 31, 0) 86%),
			linear-gradient(180deg, rgba(4, 22, 24, .38) 0%, rgba(4, 22, 24, 0) 22%),
			linear-gradient(0deg, rgba(4, 22, 24, .5) 0%, rgba(4, 22, 24, .16) 36%, rgba(4, 22, 24, 0) 60%);
	}
	/* Leggera ombra sotto le scritte: restano leggibili anche dove la foto è chiara. */
	.ac-hero__title, .ac-hero__text, .ac-hero__foot .ac-signature { text-shadow: 0 0.125rem 1.375rem rgba(4, 22, 24, .4); }
}
@media (max-width: 767px) {
	.ac-hero__title { max-width: none; }
	/* Due pulsanti affiancati e compatti: "Progetti" (contorno) e "I servizi" (pieno). */
	.ac-hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; }
	.ac-hero__actions .ac-btn { min-height: 3rem; gap: .75rem; padding: .3125rem .3125rem .3125rem 1.25rem; font-size: .75rem; }
	.ac-hero__actions .ac-btn__dot { width: 2.375rem; height: 2.375rem; }
	.ac-hero__foot .ac-signature { font-size: .875rem; }
	/* Telefono: etichetta, titolo, testo e pulsanti centrati. */
	.ac-hero__main, .ac-hero__side { justify-items: center; text-align: center; }
	.ac-hero__badge, .ac-hero__side { justify-self: center; }
	.ac-hero .ac-hero__title, .ac-hero--page .ac-hero__title { margin-inline: auto; }
	.ac-hero__actions .ac-link { align-self: center; }
	.ac-hero__foot { justify-content: center; text-align: center; }
}

/* Telefono e tablet: patina petrolio uniforme su tutta la foto (home e pagine interne),
   più scura in basso dove stanno testo e pulsanti, così le scritte si leggono sempre. */
@media (max-width: 1023px) {
	.ac-hero .ac-hero__shade {
		background: linear-gradient(180deg, rgba(6, 32, 31, .8) 0%, rgba(6, 32, 31, .76) 35%, rgba(6, 32, 31, .86) 65%, rgba(6, 32, 31, .95) 100%);
	}
}

/* "Progetti" nell'hero: contorno chiaro sul fondo scuro, pallino bianco con freccia scura. */
.ac-hero__btn-outline { --btn-fg: var(--c-white); --btn-dot: var(--c-white); --btn-dot-fg: var(--c-teal-900); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.ac-hero__btn-outline:hover { box-shadow: inset 0 0 0 1.5px var(--c-white); background: rgba(255, 255, 255, .08); }

/* "su misura" nella home: sotto la parola un metro (linea con tacche e due fermi) che si srotola da
   sinistra una volta sola e resta lì. Era così fino al 23/09; il 29/09 il cliente ha chiesto di
   rimetterlo al posto della parola che si scriveva. Lo srotolamento è lineare e guidato da main.js
   fotogramma per fotogramma, come l'entrata dell'hero, per non ripartire su iPhone; si srotola anche
   quando l'hero compare subito (ac-instant), non con indietro/avanti (ac-still).
   Senza animazioni (o senza JS) il metro è già intero. */
.ac-measure { position: relative; display: inline-block; margin-bottom: .3em; }
/* Metro SOTTO la parola con le tacche verso l'alto (30/09, scelta del cliente dopo le prove con il metro
   sopra): linea di base in basso, tacche corte ogni .1em e lunghe ogni .5em che salgono, due fermi.
   Il margine sotto la parola fa spazio al metro prima della riga seguente. */
.ac-measure__rule {
	position: absolute; left: .04em; right: .04em; top: calc(100% + .02em); height: .2em; pointer-events: none;
	background:
		linear-gradient(currentColor, currentColor) left bottom / 100% 0.125rem no-repeat,
		repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px .5em) left bottom / 100% 100% no-repeat,
		repeating-linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px .1em) left bottom / 100% 50% no-repeat;
}
.ac-measure__rule::before, .ac-measure__rule::after {
	content: ""; position: absolute; bottom: 0; width: 0.125rem; height: 100%; background: currentColor;
}
.ac-measure__rule::before { left: 0; }
.ac-measure__rule::after { right: 0; }
.ac-js .ac-measure:not(.is-drawn) .ac-measure__rule { -webkit-clip-path: inset(-50% 100% -50% 0); clip-path: inset(-50% 100% -50% 0); }

/* Le righe del titolo non tagliano il metro sotto "su misura" (il titolo dell'hero entra tutto insieme,
   non riga per riga: il taglio delle righe qui non serve). */
.ac-hero .ac-hero__title .ac-line { overflow: visible; }


/* Home, da tablet in su: titolo e pulsanti più in alto (non più al centro esatto). */
@media (min-width: 768px) {
	.ac-hero:not(.ac-hero--page) .ac-hero__main { margin-top: clamp(1.5rem, 11vh, 7.5rem); margin-bottom: auto; }
}

/* Hero più compatti su tutte le pagine (richiesta 23/09): pulsanti ed etichetta più piccoli,
   titolo più piccolo anche sul telefono (su desktop lo regola --fs-hero). */
.ac-hero__actions .ac-btn { min-height: 3rem; gap: .75rem; padding: .3125rem .3125rem .3125rem 1.25rem; font-size: .75rem; }
.ac-hero__actions .ac-btn__dot { width: 2.375rem; height: 2.375rem; }
.ac-hero__actions .ac-btn__dot .ac-icon { width: 0.8125rem; height: 0.625rem; }
/* Etichetta dell'hero: solo il riquadro, senza la linguetta ocra a sinistra (richiesta 23/09). */
.ac-hero__badge { font-size: clamp(.75rem, .72rem + .12vw, .8125rem); padding: .55rem 1.15rem .5rem; box-shadow: none; }
/* Telefono e tablet: titoli di nuovo più grandi (richiesta 23/09): 41px a 390, max 52px. */
@media (max-width: 1023px) {
	.ac-hero .ac-hero__title { font-size: clamp(2.5rem, 2rem + 2.4vw, 3.25rem); line-height: 1.02; letter-spacing: -.035em; }
}

/* ---- progetti.css ---- */
/* ==========================================================================
   HOME — PROGETTI come portfolio di architettura: quattro tagli diversi
   (verticale, quadrato, panoramico, verticale stretto) sfalsati sulla griglia.
   Le foto hanno parallasse leggera e si rivelano "a tendina".
   ========================================================================== */
.ac-work { padding-block: var(--section); }
/* Dal 29/09 in home resta solo l'intestazione (senza griglia di foto): niente margine sotto. */
.ac-work--intro { padding-block: var(--section-s); }
.ac-work--intro .ac-head { margin-bottom: 0; }
.ac-work__list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(3.5rem, 2rem + 5vw, 7.5rem); }
.ac-work__item { min-width: 0; }
.ac-work__list[data-random] > .ac-work__item:nth-child(n+5) { display: none; }
.ac-work__link { display: block; color: inherit; }
.ac-work__media { --ratio: 4 / 5; }
.ac-work__item--1 { grid-column: 1 / span 6; }
.ac-work__item--2 { grid-column: 8 / -1; margin-top: clamp(4rem, 14vw, 16rem); }
.ac-work__item--2 .ac-work__media { --ratio: 1 / 1; }
.ac-work__item--3 { grid-column: 2 / span 7; }
.ac-work__item--3 .ac-work__media { --ratio: 16 / 10; }
.ac-work__item--4 { grid-column: 10 / -1; margin-top: clamp(3rem, 11vw, 12rem); }
.ac-work__item--4 .ac-work__media { --ratio: 3 / 4; }

.ac-work__caption {
	display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .3rem; align-items: baseline;
	padding-top: 1.15rem;
}
.ac-work__num { grid-row: 1 / span 2; font-size: .75rem; font-weight: 600; font-stretch: 88%; letter-spacing: .16em; color: var(--accent); }
.ac-work__name { grid-column: 2; font-size: var(--fs-h4); line-height: 1.2; font-weight: 450; letter-spacing: -.015em; }
.ac-work__city { grid-column: 2; display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; line-height: 1.4; color: var(--fg-3); }
.ac-work__city .ac-icon { width: 0.875rem; height: 0.875rem; color: var(--accent); }
.ac-work__go {
	grid-column: 3; grid-row: 1 / span 2; align-self: center;
	display: grid; place-items: center; width: 2.875rem; height: 2.875rem; border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg);
	transition: background-color var(--d-2) ease, color var(--d-2) ease, transform .6s var(--ease-out), box-shadow var(--d-2) ease;
}
.ac-work__go .ac-icon { width: 0.9375rem; height: 0.75rem; }
@media (hover: hover) {
	.ac-work__link:hover .ac-work__go { background: var(--c-teal-800); color: var(--c-white); box-shadow: none; transform: rotate(-45deg); }
	.ac-work__link:hover .ac-work__name { color: var(--accent); }
}

@media (min-width: 768px) and (max-width: 1023px) {
	.ac-work__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ac-work__item--1, .ac-work__item--3 { grid-column: 1; margin-top: 0; }
	.ac-work__item--2, .ac-work__item--4 { grid-column: 2; margin-top: 6rem; }
	.ac-work__item .ac-work__media { --ratio: 4 / 5; }
}
@media (max-width: 767px) {
	.ac-work__list { grid-template-columns: minmax(0, 1fr); }
	.ac-work__item { grid-column: 1 / -1 !important; margin-top: 0 !important; }
	.ac-work__item--2 .ac-work__media, .ac-work__item--4 .ac-work__media { --ratio: 4 / 5; }
	.ac-work__item--1 .ac-work__media, .ac-work__item--3 .ac-work__media { --ratio: 4 / 3; }
}

/* ---- numeri.css ---- */
/* ==========================================================================
   HOME — AZIENDA IN NUMERI (capitolo scuro): numeri enormi fuori asse con la
   quota tecnica (in components.css) + indice dei sei punti di forza.
   ========================================================================== */
.ac-brand { padding-block: var(--section); }
.ac-brand__label { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.ac-values { margin-top: var(--section-s); border-top: 1px solid var(--line); }
.ac-values__item {
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline;
	padding-block: clamp(1.4rem, 1rem + 1.4vw, 2.25rem); border-bottom: 1px solid var(--line);
}
.ac-values__title {
	grid-column: 1 / span 6; font-size: var(--fs-h3); line-height: 1.06; letter-spacing: -.03em; font-weight: 300; font-stretch: 106%;
	transition: transform .7s var(--ease-out), color var(--d-2) ease;
}
.ac-values__text { grid-column: 8 / span 4; color: var(--fg-2); max-width: 28rem; }
.ac-values__icon { grid-column: 12; justify-self: end; align-self: center; color: var(--accent); }
.ac-values__icon .ac-icon { width: 1.75rem; height: 1.75rem; }
/* Pulsante in chiusura dell'elenco, centrato, con la nota "gratuito e senza impegno" sotto. */
.ac-values__cta { display: grid; justify-items: center; gap: 1.75rem; padding-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); text-align: center; }
.ac-values__note { margin: 0; max-width: 46rem; }
@media (hover: hover) {
	.ac-values__item:hover .ac-values__title { transform: translateX(.3em); color: var(--accent); }
}
@media (max-width: 1023px) {
	.ac-values__item { grid-template-columns: minmax(0, 1fr) auto; row-gap: .6rem; }
	.ac-values__title { grid-column: 1; grid-row: 1; }
	.ac-values__icon { grid-column: 2; grid-row: 1; }
	.ac-values__text { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- servizi.css ---- */
/* ==========================================================================
   HOME — SERVIZI: racconto "sticky". A sinistra (ferma durante lo scroll)
   titolo, testo, pulsante e cornice fotografica; a destra i sei servizi:
   quello attivo si accende, apre la descrizione e cambia la foto.
   ========================================================================== */
.ac-svc { padding-block: var(--section); }
.ac-svc__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--stack); align-items: start; }
.ac-svc__aside { grid-column: 1 / span 5; display: grid; gap: 1.5rem; justify-items: start; }
.ac-svc__text { max-width: 26rem; color: var(--fg-2); }
.ac-svc__stage { position: relative; width: 100%; margin-top: .75rem; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-sand); }
.ac-svc__stage-img {
	position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
	opacity: 0; transform: scale(1.06); filter: saturate(.9);
	transition: opacity .8s var(--ease-soft), transform 1.4s var(--ease-out);
}
.ac-svc__stage-img.is-active { opacity: 1; transform: none; }

.ac-svc__main { grid-column: 7 / -1; min-width: 0; }
.ac-svc__list { border-top: 1px solid var(--line); }
/* Pulsante in fondo all'elenco dei servizi. */
.ac-svc__main > .ac-svc__cta { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); }
.ac-svc__item { border-bottom: 1px solid var(--line); }
.ac-svc__link {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: start;
	padding-block: clamp(1.6rem, 1.1rem + 1.8vw, 2.75rem); color: var(--fg-4);
	transition: color .5s var(--ease-soft);
}
.ac-svc__num { padding-top: .9em; font-size: .75rem; font-weight: 600; font-stretch: 88%; letter-spacing: .16em; color: inherit; transition: color .5s var(--ease-soft); }
.ac-svc__body { display: grid; min-width: 0; }
.ac-svc__name { font-size: var(--fs-h3); line-height: 1.06; letter-spacing: -.03em; font-weight: 300; font-stretch: 106%; }
.ac-svc__desc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); }
.ac-svc__desc-in { overflow: hidden; min-height: 0; padding-top: 0; color: var(--fg-2); opacity: 0; transition: opacity .5s ease, padding .6s var(--ease-out); max-width: 30rem; }
.ac-svc__icon { padding-top: .5em; color: inherit; transition: color .5s var(--ease-soft); }
.ac-svc__icon .ac-icon { width: 1.875rem; height: 1.875rem; }
.ac-svc__thumb { display: none; }
.ac-svc__item.is-active .ac-svc__link { color: var(--fg); }
.ac-svc__item.is-active .ac-svc__num, .ac-svc__item.is-active .ac-svc__icon { color: var(--accent); }
.ac-svc__item.is-active .ac-svc__desc { grid-template-rows: 1fr; }
.ac-svc__item.is-active .ac-svc__desc-in { opacity: 1; padding-top: .9rem; }
/* Senza JavaScript (o con meno movimento) tutti i servizi restano leggibili. */
html:not(.ac-js) .ac-svc__link { color: var(--fg); }
html:not(.ac-js) .ac-svc__desc { grid-template-rows: 1fr; }
html:not(.ac-js) .ac-svc__desc-in { opacity: 1; padding-top: .9rem; }

@media (min-width: 1024px) {
	.ac-svc__aside { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}
@media (max-width: 1023px) {
	.ac-svc__aside, .ac-svc__list, .ac-svc__main { grid-column: 1 / -1; }
	.ac-svc__stage { display: none; }
	.ac-svc__link { color: var(--fg); grid-template-columns: minmax(0, 1fr) 5.5rem; }
	.ac-svc__num, .ac-svc__icon { color: var(--accent); }
	.ac-svc__icon { display: none; }
	.ac-svc__desc { grid-template-rows: 1fr; }
	.ac-svc__desc-in { opacity: 1; padding-top: .6rem; }
	.ac-svc__thumb { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.9); }
}

/* ---- fiera.css ---- */
/* ==========================================================================
   HOME — FIERA: manifesto dell'evento con tabella tecnica e foto vera dello
   stand (dal 29/09) in un riquadro con gli angoli arrotondati.
   ========================================================================== */
.ac-fair { padding-block: var(--section); overflow: hidden; }
.ac-fair__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 3rem; align-items: center; }
.ac-fair__info { grid-column: 1 / span 5; display: grid; gap: 1.5rem; justify-items: start; }
.ac-fair__when { display: grid; gap: .35rem; }
.ac-fair__place { font-size: var(--fs-h4); line-height: 1.25; font-weight: 500; letter-spacing: -.01em; }
.ac-fair__dates { font-size: var(--fs-h3); line-height: 1.1; }
.ac-fair__data { align-self: stretch; margin-top: 1rem; border-top: 1px solid var(--line); }
.ac-fair__row { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
/* Desktop: sotto padiglione e stand (colonna sinistra); telefono: sotto la foto dello stand. */
.ac-fair__cta { grid-column: 1 / span 5; grid-row: 2; margin-top: calc(-3rem + 1.25rem); }
.ac-fair__row dd { font-size: var(--fs-h4); line-height: 1.25; font-weight: 500; letter-spacing: -.01em; }
/* Foto vera dello stand (29/09): più stretta, così il titolo lungo non le va sopra, angoli arrotondati. */
.ac-fair__media { grid-column: 8 / -1; margin: 0; overflow: hidden; border-radius: 1.125rem; aspect-ratio: 3 / 2; box-shadow: 0 1.875rem 3.75rem -2.25rem rgba(6, 32, 31, .45); }
.ac-fair__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
@media (max-width: 1023px) {
	.ac-fair__info, .ac-fair__media, .ac-fair__cta { grid-column: 1 / -1; }
	.ac-fair__cta { grid-row: auto; margin-top: 0; }
	.ac-fair__media { margin: 0; border-radius: 0.875rem; }
}

/* ---- page.css ---- */
/* ==========================================================================
   PAGINE GENERICHE — note legali, singolo progetto, archivi, 404.
   ========================================================================== */
.pg-doc { padding-bottom: var(--section); }
.pg-doc__head { padding-top: clamp(2.5rem, 1.5rem + 5vw, 7rem); padding-bottom: clamp(2rem, 1.5rem + 2.5vw, 4rem); }
.pg-doc__head .ac-wrap { display: grid; gap: 1.5rem; justify-items: start; }
.pg-doc__title { max-width: 18ch; }
.pg-doc__gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--section-s); }
.pg-doc__photo--lead { grid-column: 1 / -1; --ratio: 16 / 9; }
.pg-doc__photo--more { grid-column: span 4; --ratio: 4 / 3; }
.pg-doc__body { border-top: 1px solid var(--line); padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.pg-doc__back { margin-top: 1rem; }
.pg-doc__return { margin-bottom: .25rem; }
.pg-doc__foot { display: flex; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); border-top: 1px solid var(--line); }
.pg-doc__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--gap); }
.pg-card { display: grid; gap: .6rem; align-content: start; }
.pg-card__media { --ratio: 4 / 5; }
.pg-card__title { font-size: var(--fs-h4); line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.pg-card__meta { color: var(--fg-3); font-size: .9375rem; }

/* Testo lungo (note legali, articoli): colonna di lettura e ritmo tipografico. */
.ac-prose { max-width: 46rem; color: var(--fg-2); font-size: var(--fs-body); line-height: 1.7; }
.ac-prose > * + * { margin-top: 1.1em; }
.ac-prose h2 {
	margin-top: 2.4em; padding-top: 1.25rem; border-top: 1px solid var(--line);
	font-size: var(--fs-h4); line-height: 1.25; font-weight: 500; letter-spacing: -.012em; color: var(--fg);
}
.ac-prose h3 { margin-top: 1.8em; font-size: 1.125rem; font-weight: 500; color: var(--fg); }
.ac-prose > :first-child { margin-top: 0; }
.ac-prose p > em:only-child { display: block; font-family: var(--f-serif); font-weight: var(--f-serif-weight, 400); font-size: 1.125rem; color: var(--fg-3); }
.ac-prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.1875rem; }
.ac-prose a:hover { text-decoration-thickness: 0.125rem; }
.ac-prose ul, .ac-prose ol { padding-left: 1.25rem; }
.ac-prose ul { list-style: none; padding-left: 0; }
.ac-prose ul li { position: relative; padding-left: 1.5rem; }
.ac-prose ul li + li { margin-top: .6em; }
.ac-prose ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: .5rem; height: 1px; background: var(--accent); }
.ac-prose ol { list-style: decimal; }
.ac-prose strong { color: var(--fg); }
.ac-prose img { height: auto; }

@media (max-width: 767px) {
	.pg-doc__photo--more { grid-column: span 6; }
}

/* ---- servizi.css ---- */
/* ==========================================================================
   PAGINA SERVIZI — indice dei capitoli (fisso sotto l'header), quattro
   capitoli con numero enorme e titolo fermi a sinistra, foto e testo a destra.
   ========================================================================== */
.sv-index {
	position: -webkit-sticky; position: sticky; top: var(--header-h); z-index: 20;
	background: rgba(244, 242, 238, .92); -webkit-backdrop-filter: blur(0.875rem); backdrop-filter: blur(0.875rem);
	border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
	transition: top .55s var(--ease-out);
}
.admin-bar .sv-index { top: calc(var(--header-h) + 2rem); }
html.ac-header-hidden .sv-index { top: 0; }
html.ac-header-hidden .admin-bar .sv-index { top: 2rem; }
.sv-index__list {
	display: flex; gap: clamp(1.25rem, 3vw, 3.5rem); overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
	overscroll-behavior-x: contain; margin: 0; padding: 0; list-style: none;
	/* Solo scorrimento orizzontale (29/09): con overflow-x: auto anche l'asse verticale diventava scorrevole
	   e da telefono la barra si spostava su e giù (la linea sotto la voce sporgeva di 1px). */
}
.sv-index__list::-webkit-scrollbar { display: none; }
.sv-index__link {
	position: relative; display: inline-flex; align-items: baseline; gap: .6rem; padding: 1.05rem 0;
	font-size: .9375rem; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; color: var(--c-ink-3);
	transition: color var(--d-2) ease;
}
.sv-index__link::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.125rem; background: var(--c-teal-600);
	transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out);
}
.sv-index__num { font-size: .6875rem; font-weight: 600; font-stretch: 88%; letter-spacing: .16em; color: var(--c-teal-600); }
.sv-index__link:hover, .sv-index__link.is-active { color: var(--c-ink); }
.sv-index__link.is-active::after { transform: scaleX(1); }

.sv-ch { padding-block: var(--section-s); scroll-margin-top: calc(var(--header-h) + 4rem); }
.sv-ch + .sv-ch .sv-ch__grid { border-top: 1px solid var(--line); padding-top: var(--section-s); }
.sv-ch__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2rem; align-items: start; }
.sv-ch__head { grid-column: 1 / span 5; }
.sv-ch__num {
	margin-bottom: 1rem; font-size: clamp(4.5rem, 2.8rem + 7vw, 11rem); line-height: .8;
	font-weight: 200; font-stretch: 125%; letter-spacing: -.06em; color: var(--c-teal-600);
	font-variant-numeric: lining-nums;
}
.sv-ch__body { grid-column: 7 / -1; display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.sv-ch__content { display: grid; gap: 1.5rem; justify-items: start; max-width: 40rem; }
.sv-ch__text { color: var(--fg); }
.sv-ch__strong { padding-left: 1rem; border-left: 0.125rem solid var(--accent); font-weight: 500; color: var(--fg); }
.sv-ch__content .ac-spec, .sv-ch__content .sv-boxes { justify-self: stretch; }
.sv-ch__cta { padding-top: .5rem; }
/* Confronto prima/dopo (Progettazione 3D, 30/09): render a sinistra, farmacia realizzata a destra, divisi da una
   linea con maniglia che si trascina (main.js). touch-action: pan-y lascia scorrere la pagina col dito in verticale. */
.ac-compare .ac-media__inner { --pos: 50%; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.ac-compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.ac-compare__before { position: absolute; inset: 0; z-index: 2; -webkit-clip-path: inset(0 calc(100% - var(--pos)) 0 0); clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ac-compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3; width: 0.125rem; margin-left: -1px; background: var(--c-white); box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); pointer-events: none; }
.ac-compare__handle {
	position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; transform: translate(-50%, -50%);
	border: 0.125rem solid var(--c-white); border-radius: 50%; background: rgba(7, 19, 21, .35); color: var(--c-white);
	-webkit-backdrop-filter: blur(0.25rem); backdrop-filter: blur(0.25rem); box-shadow: 0 0.5rem 1.375rem rgba(0, 0, 0, .3);
}
.ac-compare__handle svg { width: 1.375rem; height: 1.375rem; }
.ac-compare:focus-within .ac-compare__handle { outline: 0.125rem solid var(--c-mint); outline-offset: 0.1875rem; }
/* Etichette in azzurro fosforescente (30/09): "Realizzato" sta sotto il render, quindi sparisce quando il render
   copre tutta la foto; "In progettazione" sta dentro lo strato del render e sparisce con lui. */
.ac-compare__tag {
	position: absolute; bottom: .9rem; z-index: 1; padding: .5rem .85rem; background: #00E5FF; color: #04191C;
	font-size: .8125rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
	box-shadow: 0 0 0 0.1875rem rgba(0, 229, 255, .28), 0 0.5rem 1.5rem rgba(0, 229, 255, .45);
}
.ac-compare__tag--before { left: .75rem; }
.ac-compare__tag--after { right: .75rem; }
.ac-compare__range { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }

.sv-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.sv-box { display: grid; gap: 1rem; align-content: start; padding: 1.5rem 1.5rem 1.6rem; border: 1px solid var(--line); background: rgba(255, 255, 255, .45); }
.sv-box__icon { color: var(--accent); }
.sv-box__icon .ac-icon { width: 1.875rem; height: 1.875rem; }
.sv-box p { color: var(--fg-2); }
.sv-box strong { display: block; margin-bottom: .35rem; font-size: var(--fs-h4); line-height: 1.2; font-weight: 500; letter-spacing: -.01em; color: var(--fg); }

.sv-types { border-top: 1px solid var(--line); }

@media (min-width: 1024px) {
	.sv-ch__head { position: sticky; top: calc(var(--header-h) + 5.5rem); }
}
@media (max-width: 1023px) {
	.sv-ch__head, .sv-ch__body { grid-column: 1 / -1; }
	.sv-ch__num { margin-bottom: .5rem; }
}
@media (max-width: 599px) {
	.sv-boxes { grid-template-columns: minmax(0, 1fr); }
}

/* ---- chi-siamo.css ---- */
/* ==========================================================================
   PAGINA CHI SIAMO — hero scuro, i numeri, "La nostra storia" con l'intervista,
   il video verticale, la squadra in composizione asimmetrica, il metodo in
   5 passi su un filo che si riempie con lo scroll.
   ========================================================================== */
/* "In breve" (dal 29/09 sera; prima "La nostra storia"): intervista 16:9 a sinistra, testo corto a destra;
   da telefono prima il testo. Il lettore di YouTube arriva solo al clic (main.js): prima c'è il fotogramma. */
.ab-story { padding-block: var(--section); }
.ab-story__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-items: center; }
.ab-story__intro { grid-column: 8 / -1; grid-row: 1; display: grid; gap: 1.5rem; justify-items: start; }
.ab-story__text { display: grid; gap: 1rem; max-width: 32rem; color: var(--fg-2); }
.ab-story__lead { max-width: 32rem; color: var(--fg-2); }
/* "La nostra storia" col video verticale: testo lungo a sinistra, un po' più largo. */
.ab-video--story .ab-story__text { max-width: 38rem; }
.ab-story__player {
	grid-column: 1 / span 7; grid-row: 1; position: relative; margin: 0; aspect-ratio: 16 / 9;
	overflow: hidden; background: var(--c-teal-900); box-shadow: 0 2.5rem 5rem -2.5rem rgba(6, 32, 31, .6);
}
.ab-story__poster, .ab-story__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ab-story__poster { object-fit: cover; }
.ab-story__play, .ab-story__soon {
	position: absolute; inset: 0; display: grid; grid-auto-flow: column; place-content: end; align-items: center; gap: 1rem;
	margin: 0; padding: clamp(1rem, .5rem + 1.5vw, 1.75rem); color: #fff;
	background: linear-gradient(to top left, rgba(6, 32, 31, .5), rgba(6, 32, 31, 0) 60%);
}
.ab-story__play { cursor: pointer; transition: background-color .3s ease; }
.ab-story__play:hover { background-color: rgba(6, 32, 31, .12); }
.ab-story__play .ab-video__icon { width: 4.25rem; height: 4.25rem; }
.ab-story__play:hover .ab-video__icon, .ab-story__play:focus-visible .ab-video__icon { transform: scale(1.06); background: #fff; color: var(--c-teal-800); }
.ab-story__player.is-playing .ab-story__poster { display: none; }

/* Video verticale: testo a sinistra, telefono-cornice a destra. Parte solo con il play. */
.ab-video { padding-block: var(--section); }
.ab-video__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-items: center; }
.ab-video__intro { grid-column: 1 / span 6; display: grid; gap: 1.5rem; justify-items: start; }
.ab-video__text { max-width: 32rem; color: var(--fg-2); }
.ab-video__player {
	grid-column: 8 / -1; justify-self: center; position: relative; margin: 0; width: min(100%, 22.5rem); aspect-ratio: 9 / 16;
	overflow: hidden; background: var(--c-teal-900); box-shadow: 0 2.5rem 5rem -2.5rem rgba(6, 32, 31, .6);
}
.ab-video__el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b1f20; }
.ab-video__play {
	position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem;
	background: rgba(6, 32, 31, .14); color: #fff; cursor: pointer; transition: background-color .3s ease;
}
.ab-video__play[hidden] { display: none; }
.ab-video__play:hover { background: rgba(6, 32, 31, .26); }
.ab-video__icon {
	display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%;
	background: rgba(255, 255, 255, .16); border: 0.125rem solid #fff; -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem);
	box-shadow: 0 0.875rem 2.125rem -0.625rem rgba(0, 0, 0, .55); transition: transform .3s var(--ease-out), background-color .2s ease, color .2s ease;
}
.ab-video__icon svg { width: 1.625rem; height: 1.625rem; margin-left: 0.25rem; }
.ab-video__play:hover .ab-video__icon, .ab-video__play:focus-visible .ab-video__icon { transform: scale(1.06); background: #fff; color: var(--c-teal-800); }
.ab-video__cta {
	padding: .4rem .75rem; background: rgba(6, 32, 31, .55); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	text-shadow: 0 1px 0.125rem rgba(0, 0, 0, .3);
}
.ab-video__time { margin-left: .35rem; font-weight: 500; opacity: .85; }
.ab-video__player.is-playing .ab-video__play { display: none; }

.ab-team { padding-block: var(--section); }
.ab-team__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 3rem; align-items: start; }
.ab-team__intro { grid-column: 1 / span 5; display: grid; gap: 1.5rem; justify-items: start; }
.ab-team__text { max-width: 30rem; color: var(--fg-2); }
.ab-person { margin: 0; min-width: 0; }
.ab-people { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(2rem, 1.25rem + 2vw, 3.25rem); align-items: start; }
.ab-person figcaption { display: grid; gap: .3rem; padding-top: 1rem; }
.ab-person__name { font-size: var(--fs-h4); line-height: 1.2; font-weight: 500; letter-spacing: -.01em; }
.ab-person__role { color: var(--fg-3); }

.ab-steps { padding-block: var(--section); }
.ab-steps__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--gap); padding-top: 2.25rem; }
.ab-steps__list::before, .ab-steps__list::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); }
.ab-steps__list::after { height: 0.125rem; top: -.5px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(clamp(0, calc(var(--p, 1) * 1.6 - .35), 1)); }
html:not(.ac-js) .ab-steps__list::after { transform: none; }
.ab-step { position: relative; display: grid; gap: .9rem; align-content: start; min-width: 0; }
.ab-step__dot { position: absolute; left: 0; top: calc(-2.25rem - 0.3125rem); width: 0.6875rem; height: 0.6875rem; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 0.125rem var(--accent); }
.ab-step__num { font-size: .75rem; font-weight: 600; font-stretch: 88%; letter-spacing: .16em; color: var(--accent); }
.ab-step__icon { color: var(--fg); }
.ab-step__icon .ac-icon { width: 2.125rem; height: 2.125rem; }
.ab-step__title { font-size: var(--fs-h4); line-height: 1.2; font-weight: 500; letter-spacing: -.012em; }
.ab-step__text { color: var(--fg-2); font-size: .9375rem; line-height: 1.55; }

@media (max-width: 1023px) {
	.ab-story__intro, .ab-story__player { grid-column: 1 / -1; grid-row: auto; }
	.ab-video__intro, .ab-video__player { grid-column: 1 / -1; }
	.ab-video__player { width: min(100%, 21rem); }
	.ab-team__intro { grid-column: 1 / -1; }
	.ab-people { grid-column: 1 / -1; }
	.ab-steps__list { grid-template-columns: minmax(0, 1fr); row-gap: 2.25rem; padding-top: 0; padding-left: 2.25rem; }
	.ab-steps__list::before, .ab-steps__list::after { left: 0.3125rem; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
	.ab-steps__list::after { width: 0.125rem; transform-origin: 50% 0; transform: scaleY(clamp(0, calc(var(--p, 1) * 1.6 - .35), 1)); }
	html:not(.ac-js) .ab-steps__list::after { transform: none; }
	.ab-step__dot { left: calc(-2.25rem + 0px); top: .2rem; }
}
@media (max-width: 599px) {
	.ab-story__play .ab-video__icon { width: 3.25rem; height: 3.25rem; }
	.ab-story__play .ab-video__icon svg { width: 1.25rem; height: 1.25rem; margin-left: 0.1875rem; }
	.ab-people { column-gap: .75rem; }
}

/* "Come lavoriamo" da desktop: la sezione diventa una pista più alta dello schermo; il blocco
   resta fermo al centro e lo scorrimento fa avanzare la linea dal passo 1 al 5 (--p da main.js,
   modo data-scroll="pin"); a linea completa la pagina riprende a scorrere. I passi non ancora
   raggiunti restano attenuati. Senza animazioni (o senza JS) resta la sezione normale. */
@media (min-width: 1024px) {
	.ac-js .ab-steps { height: 240vh; padding-block: 0; }
	.ac-js .ab-steps__pin {
		position: -webkit-sticky; position: sticky; top: 0; min-height: 100vh;
		display: flex; align-items: center; padding: calc(var(--header-h) + 2rem) 0 3rem;
	}
	.ac-js .ab-steps__pin > .ac-wrap { width: 100%; }
	.ac-js .ab-steps .ab-steps__list::after { transform: scaleX(var(--p, 0)); transition: transform .12s linear; }
	.ac-js .ab-steps .ab-step { transition: opacity .5s ease; }
	.ac-js .ab-steps .ab-step:not(.is-on) { opacity: .32; }
	.ac-js .ab-steps .ab-step.is-on .ab-step__dot { background: var(--accent); }
}

/* ---- contatti.css ---- */
/* ==========================================================================
   PAGINA CONTATTI — recapiti come righe tipografiche enormi, "Dove siamo"
   con dati e mappa.
   ========================================================================== */
.ct-channels { padding-bottom: var(--section); }
.ct-channels__list { border-top: 1px solid var(--line); }
.ct-row {
	display: grid; grid-template-columns: minmax(9rem, 3fr) minmax(0, 9fr) auto; column-gap: var(--gap); row-gap: .5rem; align-items: center;
	padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-bottom: 1px solid var(--line); color: var(--fg);
}
.ct-row__label { gap: .6rem; }
.ct-row__label .ac-icon { width: 1rem; height: 1rem; color: var(--accent); }
.ct-row__value {
	font-size: var(--fs-h2); line-height: 1.02; letter-spacing: -.035em; font-weight: 300; font-stretch: 104%;
	overflow-wrap: anywhere; transition: transform .7s var(--ease-out), color var(--d-2) ease;
}
@media (min-width: 1024px) { .ct-row__value { white-space: nowrap; overflow-wrap: normal; } }
.ct-row__value { grid-column: 2; grid-row: 1; }
.ct-row__note { grid-column: 2; grid-row: 2; color: var(--fg-3); }
.ct-row__label { grid-row: 1 / span 2; }
.ct-row__go { grid-column: 3; grid-row: 1 / span 2; }
.ct-row__go {
	display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%;
	box-shadow: inset 0 0 0 1px var(--line-2); transition: background-color var(--d-2) ease, color var(--d-2) ease, transform .6s var(--ease-out), box-shadow var(--d-2) ease;
}
.ct-row__go .ac-icon { width: 1rem; height: 0.8125rem; }
@media (hover: hover) {
	.ct-row:hover .ct-row__value { transform: translateX(.2em); color: var(--accent); }
	.ct-row:hover .ct-row__go { background: var(--c-teal-800); color: var(--c-white); box-shadow: none; transform: rotate(-45deg); }
}

.ct-where { padding-block: var(--section); }
.ct-where__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 3rem; align-items: center; }
.ct-where__info { grid-column: 1 / span 5; display: grid; gap: 1.75rem; justify-items: start; }
.ct-where__dot { color: var(--accent); }
.ct-where__addr { display: grid; font-style: normal; font-size: var(--fs-h4); line-height: 1.35; font-weight: 400; letter-spacing: -.01em; }
.ct-where__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.ct-where__data { align-self: stretch; border-top: 1px solid var(--line); }
.ct-where__data div { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr; gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.ct-where__data dd { font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.ct-where__map { grid-column: 7 / -1; justify-self: end; width: min(100%, 34rem); --ratio: 4 / 3; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 1.875rem 3.75rem -2.125rem rgba(6, 32, 31, .45); }
.ct-where__map .ac-media__inner, .ct-map__frame, .ct-map__cover { border-radius: inherit; }

@media (max-width: 1023px) {
	.ct-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .6rem; }
	.ct-row__label { grid-column: 1 / -1; grid-row: 1; }
	.ct-row__value { grid-column: 1; grid-row: 2; font-size: var(--fs-h3); }
	.ct-row__note { grid-column: 1; grid-row: 3; }
	.ct-row__go { grid-column: 2; grid-row: 2 / span 2; }
	.ct-where__info, .ct-where__map { grid-column: 1 / -1; }
	.ct-where__map { --ratio: 4 / 3; justify-self: stretch; width: 100%; border-radius: 1.25rem; }
}

/* Mappa di Google: prima la foto con il pulsante, poi l'iframe (col consenso o con un clic). */
.ct-map__cover {
	position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: .9rem; padding: 1.5rem;
	text-align: center; background: linear-gradient(0deg, rgba(6, 32, 31, .6), rgba(6, 32, 31, .2)); color: var(--c-white);
}
.ct-map__note { max-width: 22rem; font-size: .8125rem; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.ct-map__frame { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: var(--c-stone); }
.ct-map.is-loaded .ct-map__cover { display: none; }

/* ---- progetti.css ---- */
/* ==========================================================================
   PAGINA PROGETTI — archivio: indice numerato a sinistra (con gruppi per
   tipologia, le voci senza scheda restano in grigio), scheda a destra con
   foto grande, miniature, titolo e testo su due colonne.
   ========================================================================== */
.pr-browser { padding-bottom: var(--section); }
.pr-browser__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-items: start; border-top: 1px solid var(--line); padding-top: var(--section-s); }
.pr-browser__bar {
	grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
	padding-bottom: 1.5rem; border-bottom: 1px solid var(--line);
}
/* Categorie: dicono subito che non ci sono solo farmacie. Niente conteggi (colloquio del 25/09). */
.pr-cats { display: flex; flex-wrap: wrap; gap: .5rem; }
.pr-cat {
	display: inline-flex; align-items: center; gap: .7rem; height: 2.875rem; padding: 0 1.25rem; border-radius: var(--r-pill);
	box-shadow: inset 0 0 0 1px var(--line-2); color: var(--fg);
	font-size: .8125rem; font-weight: 600; font-stretch: 90%; letter-spacing: .12em; text-transform: uppercase;
	transition: background-color var(--d-2) ease, color var(--d-2) ease, box-shadow var(--d-2) ease;
}
.pr-cat__count {
	display: grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: var(--r-pill);
	background: var(--c-stone); color: var(--c-ink); font-size: .8125rem; letter-spacing: 0; font-variant-numeric: tabular-nums;
	transition: background-color var(--d-2) ease, color var(--d-2) ease;
}
.pr-cat:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.pr-cat.is-active { background: var(--c-teal-800); color: var(--c-white); box-shadow: none; }
.pr-cat.is-active .pr-cat__count { background: var(--c-mint); color: var(--c-teal-900); }
.pr-browser__aside { grid-column: 1 / span 4; min-width: 0; }
.pr-browser__scroll {
	position: relative; max-height: min(72vh, 46rem); overflow-y: auto; overscroll-behavior: contain;
	border-top: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--c-line-2) transparent;
}
.pr-browser__scroll::-webkit-scrollbar { width: 0.375rem; }
.pr-browser__scroll::-webkit-scrollbar-thumb { background: var(--c-line-2); }
/* Intestazione di gruppo (Farmacie / Parafarmacie / Sanitarie): resta ferma in cima
   mentre si scorre l'elenco, così è sempre chiaro in quale tipologia ci si trova. */
.pr-group {
	position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	margin: 0; padding: 1.1rem .75rem .7rem 0; background: var(--bg); border-bottom: 1px solid var(--line-2);
	font-size: 1.1875rem; line-height: 1.2; font-weight: 500; letter-spacing: -.012em; color: var(--fg);
}
.pr-group + .pr-item, .pr-group + .pr-row { border-top: 0; }
.pr-group:not(:first-child) { margin-top: 1.75rem; }
.pr-group__count { font-size: .75rem; font-weight: 600; font-stretch: 88%; letter-spacing: .14em; color: var(--accent); font-variant-numeric: tabular-nums; }
.pr-item, .pr-row {
	display: grid; grid-template-columns: minmax(0, 1fr); column-gap: .5rem; width: 100%;
	margin: 0; padding: .85rem .75rem .9rem 0; border-bottom: 1px solid var(--line); text-align: left;
}
.pr-item { cursor: pointer; transition: background-color var(--d-2) ease, padding var(--d-2) var(--ease-out); }
.pr-item__num { grid-row: 1 / span 2; padding-top: .3em; font-size: .6875rem; font-weight: 600; font-stretch: 88%; letter-spacing: .14em; color: var(--fg-3); }
.pr-item__name { font-size: 1.0625rem; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--fg); transition: color var(--d-2) ease; }
.pr-item__city, .pr-row__city { font-size: .8125rem; line-height: 1.4; color: var(--fg-3); }
.pr-row { cursor: default; }
.pr-row__name { font-size: 1rem; line-height: 1.3; color: var(--fg-3); }
.pr-item:hover { background: rgba(14, 33, 36, .035); }
.pr-item.is-active { padding-left: .75rem; background: var(--c-teal-800); border-bottom-color: var(--c-teal-800); }
.pr-item.is-active .pr-item__num { color: var(--c-mint); }
.pr-item.is-active .pr-item__name { color: var(--c-white); }
.pr-item.is-active .pr-item__city { color: rgba(255, 255, 255, .7); }

.pr-browser__main { grid-column: 6 / -1; min-width: 0; }
@keyframes pr-panel-in { from { opacity: 0; transform: translate3d(0, 0.75rem, 0); } to { opacity: 1; transform: none; } }
.pr-panel { display: none; }
.pr-panel.is-active { display: block; animation: pr-panel-in .5s var(--ease-out) both; }
.pr-panel__frame { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--c-sand); }
.pr-panel__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.02); transition: transform 1.2s var(--ease-out); }
.pr-panel__thumbs { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .75rem; }
.pr-thumb { flex: 0 0 auto; width: 4.5rem; height: 4.5rem; padding: 0; overflow: hidden; background: var(--c-sand); opacity: .55; outline-offset: 0.125rem; transition: opacity var(--d-2) ease, box-shadow var(--d-2) ease; }
.pr-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.pr-thumb:hover { opacity: .9; }
.pr-thumb.is-active { opacity: 1; box-shadow: 0 0 0 0.125rem var(--c-teal-800); }
/* Dal 30/09: foto grande + 2 miniature + riquadro "+N foto" che apre il visore con tutte le foto. */
.ac-js .pr-panel__thumbs .pr-thumb.is-more { display: none; }
.ac-js .pr-panel__frame { cursor: zoom-in; }
.pr-thumbs__more {
	flex: 0 0 auto; display: grid; place-content: center; justify-items: center; gap: .15rem; width: 4.5rem; height: 4.5rem; padding: 0;
	background: var(--c-teal-800); color: var(--c-white); transition: background-color var(--d-2) ease;
}
.pr-thumbs__more[hidden] { display: none; }
.pr-thumbs__more:hover { background: var(--c-teal-700); }
.pr-thumbs__count { font-size: 1.25rem; line-height: 1; font-weight: 600; letter-spacing: -.01em; }
.pr-thumbs__label { font-size: .625rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }

/* Visore a tutto schermo: foto intera, frecce, contatore, chiusura (Esc, clic sul fondo, X). */
.ac-lb {
	position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem; grid-template-rows: 3.5rem minmax(0, 1fr) 3rem;
	background: rgba(7, 19, 21, .95); color: var(--c-white);
}
.ac-lb[hidden] { display: none; }
.ac-lb__title { grid-column: 1 / -1; grid-row: 1; align-self: center; margin: 0; padding: 0 4.5rem 0 1.25rem; font-size: .9375rem; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-lb__stage { grid-column: 2; grid-row: 2; display: grid; place-items: center; min-width: 0; min-height: 0; margin: 0; }
.ac-lb__img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.ac-lb__close, .ac-lb__nav {
	display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: var(--c-white);
	background: rgba(255, 255, 255, .1); transition: background-color var(--d-2) ease;
}
.ac-lb__close:hover, .ac-lb__nav:hover { background: rgba(255, 255, 255, .22); }
.ac-lb__close svg, .ac-lb__nav svg { width: 1.375rem; height: 1.375rem; }
.ac-lb__close { position: absolute; top: .5rem; right: .75rem; }
.ac-lb__nav { grid-row: 2; align-self: center; justify-self: center; }
.ac-lb__nav--prev { grid-column: 1; }
.ac-lb__nav--next { grid-column: 3; }
.ac-lb__count { grid-column: 1 / -1; grid-row: 3; align-self: center; margin: 0; text-align: center; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; color: rgba(255, 255, 255, .75); }
html.ac-lb-open { overflow: hidden; }
html.ac-lb-open .ac-wa, html.ac-lb-open .ac-totop, html.ac-lb-open .ac-cookie-reopen { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 767px) {
	/* Telefono: la foto usa tutta la larghezza, frecce in basso ai lati del contatore (e si scorre col dito). */
	.ac-lb { grid-template-columns: 0 minmax(0, 1fr) 0; grid-template-rows: 3.5rem minmax(0, 1fr) 4.5rem; }
	.ac-lb__nav { grid-row: 3; position: absolute; bottom: .75rem; }
	.ac-lb__nav--prev { left: 1rem; }
	.ac-lb__nav--next { right: 1rem; }
}
/* Le realizzazioni senza scheda (solo nome e città) si aprono con "Vedi tutte le realizzazioni". */
.ac-js .pr-browser:not(.is-all) .is-extra { display: none; }
.pr-all { margin: 0; padding: 1.1rem 0 .6rem; }
.pr-all__btn { font-size: .8125rem; }
.pr-panel__body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.5rem; padding-top: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.pr-panel__head { grid-column: 1 / span 3; display: grid; gap: .75rem; align-content: start; }
.pr-panel__num { font-size: .75rem; font-weight: 600; font-stretch: 88%; letter-spacing: .16em; color: var(--accent); }
.pr-panel__title { font-size: var(--fs-h3); line-height: 1.06; letter-spacing: -.03em; font-weight: 350; font-stretch: 104%; }
.pr-panel__city { display: inline-flex; align-items: center; gap: .45rem; font-size: .9375rem; color: var(--fg-3); }
.pr-panel__pin { width: 1rem; height: 1rem; color: var(--accent); }
.pr-panel__text { grid-column: 4 / -1; color: var(--fg-2); }
.pr-panel__text p { margin: 0 0 1em; }
.pr-panel__text p:last-child { margin-bottom: 0; }
@media (hover: hover) {
	.pr-panel__frame:hover .pr-panel__img { transform: scale(1.025); }
	.pr-thumb:hover img { transform: scale(1.06); }
}

/* Fascia "Non solo farmacie": tutte le tipologie di locale, subito dopo l'archivio. */
.pr-more { padding-block: var(--section-s); }
.pr-more__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2rem; align-items: end; }
.pr-more__title { grid-column: 1 / span 5; }
.pr-more__text { grid-column: 7 / -1; max-width: 36rem; color: var(--fg-2); padding-bottom: .4rem; }
.pr-more__list { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid var(--line); }

@media (min-width: 1024px) {
	.pr-browser__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
@media (max-width: 1023px) {
	.pr-browser__aside, .pr-browser__main { grid-column: 1 / -1; }
	/* Da telefono e tablet (29/09, richiesta del cliente) l'elenco è un riquadro a tutta larghezza, con bordo:
	   in alto il nome del gruppo resta fermo, in fondo una sfumatura dice che si può scorrere; a fine elenco lo
	   spazio della sfumatura lascia vedere intera l'ultima voce. */
	.ac-main .pr-browser__aside { justify-self: stretch; width: 100%; }
	.pr-browser__scroll { max-height: 24rem; padding: 0 1rem; border: 1px solid var(--line-2); background: var(--bg); }
	.pr-browser__scroll::after {
		content: ""; position: -webkit-sticky; position: sticky; bottom: 0; display: block; height: 2.5rem; margin: 0 -1rem;
		background: linear-gradient(to bottom, rgba(244, 242, 238, 0), var(--bg) 85%); pointer-events: none;
	}
	.pr-panel__head, .pr-panel__text { grid-column: 1 / -1; }
	.pr-more__title, .pr-more__text { grid-column: 1 / -1; }
}

/* ---- fiera.css ---- */
/* ==========================================================================
   LANDING FIERA (/fiera/) — pagina a sé, raggiunta dal QR allo stand.
   Colonna verticale stretta (nata per il telefono), fondo scuro, accento menta.
   Ha testata e piede propri: non usa header/footer del sito. Prefisso "fl-".
   ========================================================================== */
.fl-body { background: #061A1D; color: #EAF6F4; font-family: var(--ac-font-v3); overflow-x: hidden; }
.fl-body .ac-totop { bottom: 5.625rem; }
.fl-body .ac-cookie-reopen { bottom: 5.625rem; }
.fl-body .ac-cookie { bottom: 5.25rem; }

.fl-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 47.5rem; margin: 0 auto; padding: 1.375rem 1.375rem 0.625rem; }
.fl-top__logo img { display: block; width: 11.875rem; height: auto; }
.fl-top__logo img.fl-top__logo-old { width: 9.375rem; }
.fl-top__right { display: flex; align-items: center; gap: 0.875rem; }
.fl-top .ac-lang { position: static; margin: 0; gap: 0.25rem; }
.fl-top .ac-lang__link { height: 1.875rem; padding: 0 0.5625rem; border-color: rgba(255, 255, 255, .22); color: #EAF6F4; font-size: 0.71875rem; }
.fl-top .ac-lang__link:hover { border-color: rgba(255, 255, 255, .5); }
.fl-top .ac-lang__item.is-active .ac-lang__link { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .14); }
.fl-top__back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: .3px; color: #A0F4E1; text-decoration: none; white-space: nowrap; }
.fl-arrow { width: 0.875rem; height: 0.625rem; }

.fl-main { max-width: 47.5rem; margin: 0 auto; padding: 0.5rem 1.375rem 2.25rem; }
.fl-kicker { margin: 0 0 0.75rem; font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: #A0F4E1; }
.fl-kicker--dark { color: #0F7B79; }
.fl-section__title { margin: 0 0 0.75rem; font-size: 1.625rem; line-height: 2rem; font-weight: 700; color: #FFFFFF; }
.fl-section__text { margin: 0 0 1.125rem; font-size: 1rem; line-height: 1.625rem; color: rgba(234, 246, 244, .86); }
.fl-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: #A0F4E1; text-decoration: none; }
.fl-link:hover { text-decoration: underline; }

/* Hero */
.fl-hero { padding: 1.125rem 0 0.5rem; }
.fl-hero__title { margin: 0 0 0.625rem; font-size: 2.5rem; line-height: 3rem; font-weight: 700; letter-spacing: -.5px; color: #FFFFFF; }
/* Stand nel titolo: riquadro menta che pulsa (29/09, richiesta del cliente), mai spezzato a metà. */
.fl-hero__stand {
	display: inline-block; margin-left: .06em; padding: .04em .26em; border: 0.1875rem solid #A0F4E1; border-radius: 0.75rem;
	font-size: .66em; line-height: 1.12; white-space: nowrap; vertical-align: .1em; box-shadow: 0 0 0 0 rgba(160, 244, 225, .55); animation: fl-stand 2s ease-out infinite;
}
@keyframes fl-stand { 0% { box-shadow: 0 0 0 0 rgba(160, 244, 225, .55); } 70% { box-shadow: 0 0 0 0.875rem rgba(160, 244, 225, 0); } 100% { box-shadow: 0 0 0 0 rgba(160, 244, 225, 0); } }
@media (prefers-reduced-motion: reduce) { .fl-hero__stand { animation: none; } }
.fl-hero__sub { margin: 0 0 1.375rem; font-size: 1rem; line-height: 1.5625rem; color: rgba(234, 246, 244, .8); }
/* Date in un unico riquadro squadrato: giorni a caratteri cubitali, mese una volta sola. */
.fl-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 1.125rem; margin: 0 0 1.375rem; padding: 1rem 1.25rem 1.125rem; background: #A0F4E1; color: #013F44; }
.fl-date__days { font-size: 3.75rem; line-height: .95; font-weight: 800; letter-spacing: -0.125rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fl-date__month { font-size: 1.25rem; line-height: 1.1; font-weight: 800; letter-spacing: 0.15625rem; text-transform: uppercase; white-space: nowrap; }
.fl-count { margin: 0 0 1.375rem; padding: 1.125rem 1.25rem; border: 1px solid rgba(160, 244, 225, .22); border-radius: 1.125rem; background: rgba(255, 255, 255, .04); }
.fl-count__label { margin: 0 0 0.625rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(234, 246, 244, .7); }
.fl-count__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.fl-count__cell { text-align: center; }
.fl-count__cell b { display: block; font-size: 1.875rem; line-height: 2.125rem; font-weight: 800; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.fl-count__cell span { display: block; margin-top: 0.125rem; font-size: 0.6875rem; letter-spacing: 1px; text-transform: uppercase; color: rgba(234, 246, 244, .62); }
.fl-count__msg { margin: 0; font-size: 1.125rem; font-weight: 700; color: #A0F4E1; }
/* Coppie di pulsanti sempre affiancate su una riga, compatte anche sul telefono. */
.fl-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; margin: 0 0 1.625rem; }
.fl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 0; min-height: 2.875rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; font-size: 0.71875rem; line-height: 1.25; font-weight: 700; letter-spacing: .3px; text-align: center; text-transform: uppercase; text-decoration: none; transition: transform .25s cubic-bezier(.22, .61, .36, 1), opacity .2s ease; }
.fl-btn .ac-icon { flex: 0 0 auto; width: 1.0625rem; height: 1.0625rem; }
.fl-btn .fl-arrow { flex: 0 0 auto; width: 0.8125rem; height: 0.5625rem; }
.fl-btn--primary { background: #A0F4E1; color: #013F44; }
.fl-btn--ghost { border: 1.5px solid rgba(255, 255, 255, .55); color: #FFFFFF; background: transparent; }
.fl-btn--dark { background: #013F44; color: #FFFFFF; }
.fl-btn:hover { transform: translateY(-1px); opacity: .92; }
.fl-stand { position: relative; margin: 0; }
.fl-stand img { display: block; width: 100%; height: auto; border-radius: 1.375rem; }
/* QR della pagina, piccolo in basso a destra sulla foto dello stand (29/09). */
.fl-stand .fl-stand__qr { position: absolute; right: 0.75rem; bottom: 0.75rem; width: 5.25rem; height: 5.25rem; padding: 0.3125rem; border-radius: 0.75rem; background: #fff; box-shadow: 0 0.5rem 1.375rem rgba(0, 0, 0, .4); }

/* Card informative */
.fl-cards { display: grid; gap: 0.875rem; padding: 1.125rem 0 0.5rem; }
.fl-card { padding: 1.375rem 1.375rem 1.25rem; border-radius: 1.25rem; background: #FFFFFF; color: #0F2F33; }
.fl-card__icon { display: flex; align-items: center; justify-content: center; width: 2.625rem; height: 2.625rem; margin: 0 0 0.875rem; border-radius: 0.75rem; background: #EAF3F2; color: #0F7B79; }
.fl-card__icon .ac-icon { width: 1.375rem; height: 1.375rem; }
.fl-card__title { margin: 0 0 0.625rem; font-size: 1.1875rem; line-height: 1.5rem; font-weight: 700; color: #0A2428; }
.fl-card__text { margin: 0 0 0.5rem; font-size: 0.96875rem; line-height: 1.5rem; color: #2E3F42; }
.fl-card__note { margin: 0 0 0.75rem; font-size: 0.84375rem; line-height: 1.25rem; color: #5A6B6E; }
.fl-card__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.375rem; }
.fl-card .fl-link { color: #0F7B79; }
.fl-hours { margin: 0; padding: 0; list-style: none; }
.fl-hours li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.5625rem 0; border-bottom: 1px solid #EDF2F2; font-size: 0.9375rem; }
.fl-hours li:last-child { border-bottom: 0; }
.fl-hours b { color: #0A2428; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Stand e planimetria */
.fl-plan { padding: 1.75rem 0 0.5rem; }
.fl-meta { display: flex; gap: 1.75rem; margin: 0 0 1rem; }
.fl-meta div { margin: 0; }
.fl-meta dt { margin: 0 0 0.125rem; font-size: 0.71875rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(234, 246, 244, .62); }
.fl-meta dd { margin: 0; font-size: 1.625rem; line-height: 1.875rem; font-weight: 800; color: #FFFFFF; }
.fl-meta__accent { color: #A0F4E1; }
/* Planimetria vera (29/09): zoom sui tre box e pianta intera, con evidenziazioni HTML sopra le immagini. */
.fl-map { position: relative; margin: 0 0 0.75rem; overflow: hidden; border-radius: 1.125rem; background: #fff; }
.fl-map img { display: block; width: 100%; height: auto; }
.fl-map__mark {
	position: absolute; border: 0.1875rem solid #0F7B79; border-radius: 0.25rem; background: rgba(160, 244, 225, .45);
	box-shadow: 0 0 0 0 rgba(15, 123, 121, .55); animation: fl-ring 1.8s ease-out infinite;
}
.fl-map__mark--small { border-width: 0.125rem; border-radius: 0.125rem; }
@keyframes fl-ring { 0% { box-shadow: 0 0 0 0 rgba(15, 123, 121, .55); } 70% { box-shadow: 0 0 0 0.75rem rgba(15, 123, 121, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 123, 121, 0); } }
.fl-map__tag {
	position: absolute; transform: translateX(-50%); padding: 0.375rem 0.75rem; border-radius: 62.438rem; white-space: nowrap;
	background: #0A2428; color: #fff; font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
}
.fl-map__tag::before { content: ""; position: absolute; left: 50%; top: -0.375rem; margin-left: -0.375rem; border: 0.375rem solid transparent; border-top: 0; border-bottom-color: #0A2428; }
.fl-map__hall { position: absolute; border: 0.1875rem solid #0F7B79; border-radius: 0.375rem; background: rgba(15, 123, 121, .08); }
.fl-map__pin {
	position: absolute; width: 1.125rem; height: 1.125rem; margin: -0.5625rem 0 0 -0.5625rem; border-radius: 50%; background: #0F7B79;
	box-shadow: 0 0 0 0.1875rem #fff, 0 0 0 0 rgba(15, 123, 121, .6); animation: fl-pin 1.8s ease-out infinite;
}
@keyframes fl-pin { 0% { box-shadow: 0 0 0 0.1875rem #fff, 0 0 0 0 rgba(15, 123, 121, .6); } 70% { box-shadow: 0 0 0 0.1875rem #fff, 0 0 0 1rem rgba(15, 123, 121, 0); } 100% { box-shadow: 0 0 0 0.1875rem #fff, 0 0 0 0 rgba(15, 123, 121, 0); } }
.fl-map__caption { margin: 0; padding: 0.75rem 1rem 0.875rem; background: #EDF6F4; color: #0F2F33; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .fl-map__mark, .fl-map__pin { animation: none; } }

/* Cosa portiamo */
.fl-show { padding: 1.75rem 0 0.5rem; }
.fl-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.625rem; }
.fl-list li { position: relative; padding-left: 1.875rem; font-size: 0.96875rem; line-height: 1.5rem; }
.fl-list .ac-icon { position: absolute; left: 0; top: 0.1875rem; width: 1.125rem; height: 1.125rem; color: #A0F4E1; }

/* Proposta riservata: dal 29/09 in cima alla pagina, subito dopo l'apertura, e "pulsante" perché si noti
   (richiesta del cliente): un alone menta che si allarga e sparisce, e un pallino che batte. */
.fl-offer {
	position: relative; margin: 1.625rem 0 1.875rem; padding: 1.625rem 1.5rem 1.625rem; border-radius: 1.375rem; background: #EDF6F4; color: #0F2F33;
	box-shadow: 0 0 0 0.125rem #A0F4E1, 0 0 0 0 rgba(160, 244, 225, .6); animation: fl-pulse 2.2s ease-out infinite;
}
@keyframes fl-pulse {
	0% { box-shadow: 0 0 0 0.125rem #A0F4E1, 0 0 0 0 rgba(160, 244, 225, .6); }
	70% { box-shadow: 0 0 0 0.125rem #A0F4E1, 0 0 0 1.125rem rgba(160, 244, 225, 0); }
	100% { box-shadow: 0 0 0 0.125rem #A0F4E1, 0 0 0 0 rgba(160, 244, 225, 0); }
}
.fl-offer .fl-kicker::before {
	content: ""; display: inline-block; width: 0.5625rem; height: 0.5625rem; margin-right: 0.5625rem; border-radius: 50%;
	background: #0F7B79; vertical-align: 1px; animation: fl-beat 1.1s ease-in-out infinite alternate;
}
@keyframes fl-beat { to { opacity: .3; transform: scale(.65); } }
@media (prefers-reduced-motion: reduce) { .fl-offer, .fl-offer .fl-kicker::before { animation: none; } }
.fl-offer__title { margin: 0 0 0.5rem; font-size: 1.625rem; line-height: 2rem; font-weight: 700; color: #0A2428; }
.fl-offer__text { margin: 0 0 1.125rem; font-size: 0.96875rem; line-height: 1.5625rem; color: #1E3235; }

/* La fiera */
.fl-fair { padding: 1.75rem 0 0.5rem; }
.fl-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; margin: 0 0 1.125rem; padding: 0; list-style: none; }
.fl-stats li { padding: 1rem 1rem 0.875rem; border-radius: 1rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.fl-stats b { display: block; font-size: 1.75rem; line-height: 2rem; font-weight: 800; color: #A0F4E1; }
.fl-stats span { display: block; margin-top: 0.125rem; font-size: 0.78125rem; letter-spacing: .6px; text-transform: uppercase; color: rgba(234, 246, 244, .7); }
.fl-fair__org { margin: 1rem 0 0; font-size: 0.8125rem; line-height: 1.25rem; color: rgba(234, 246, 244, .6); }

/* Soggiorno */
.fl-stay { padding: 1.75rem 0 0.5rem; }

/* Contatti */
.fl-contact { padding: 1.75rem 0 0; }
.fl-contact__list { margin: 0 0 1.25rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.fl-contact__list a { display: flex; align-items: center; gap: 0.75rem; padding: 0.8125rem 1rem; border-radius: 0.875rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: #FFFFFF; font-size: 0.96875rem; font-weight: 600; text-decoration: none; }
.fl-contact__list .ac-icon { width: 1.25rem; height: 1.25rem; color: #A0F4E1; flex: 0 0 auto; }

/* Piede */
.fl-foot { max-width: 47.5rem; margin: 0 auto; padding: 1.125rem 1.375rem 8.125rem; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 0.78125rem; line-height: 1.25rem; color: rgba(234, 246, 244, .55); }
.fl-foot p { margin: 0 0 0.25rem; }
.fl-foot a { color: rgba(234, 246, 244, .75); text-decoration: none; }

/* Barra fissa in basso */
.fl-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 0.625rem; padding: 0.625rem 0.875rem calc(0.625rem + env(safe-area-inset-bottom)); background: rgba(6, 26, 29, .92); border-top: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(0.5rem); }
/* Tre pulsanti su una riga: sito (marchio), WhatsApp, telefono. */
.fl-bar__btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.4375rem; height: 3.125rem; padding: 0 0.5rem; border-radius: 0.75rem; background: rgba(255, 255, 255, .08); color: #FFFFFF; font-size: 0.75rem; font-weight: 700; letter-spacing: .2px; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.fl-bar__btn .ac-icon { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
.fl-bar__btn--site { flex: 0 0 auto; padding: 0 0.875rem; }
.fl-bar__btn--site img { display: block; width: 1.375rem; height: 1.375rem; }
.fl-bar__btn--wa { background: #A0F4E1; color: #013F44; }

@media (min-width: 700px) {
	.fl-top { padding-top: 1.875rem; }
	/* 44px: "Ci trovi allo stand [B202 – B204]" sta su una riga sola nella colonna da 716px (a 48px no). */
	.fl-hero__title { font-size: 2.75rem; line-height: 3.5rem; }
	.fl-btn { min-height: 3.125rem; padding: 0.5rem 1rem; font-size: 0.78125rem; }
	.fl-stats { grid-template-columns: repeat(4, 1fr); }
	.fl-bar { left: 50%; right: auto; width: 47.5rem; max-width: calc(100% - 1.75rem); transform: translateX(-50%); bottom: 0.875rem; border-radius: 1.125rem; border: 1px solid rgba(255, 255, 255, .1); }
}
@media (max-width: 599px) {
	.fl-top__logo img { width: 9.375rem; }
	.fl-top__back span { display: none; }
	.fl-count__cell b { font-size: 1.625rem; }
	.fl-date__days { font-size: 3.25rem; }
	.fl-date__month { font-size: 1.125rem; }
}

/* ---- esteso.css ---- */
/* ==========================================================================
   PROPOSTA /esteso — mood ispirato a progetta.sartorettoverna.it: sfondo
   video, nero, verde acido, tipografia enorme (Anton + Barlow, font liberi
   auto-ospitati). Riguarda SOLO l'hero: tutte le sezioni sotto sono le
   stesse, invariate, della home reale — serve per confrontare i due mood a
   parità di contenuto. Tutto scoperto sotto .ac-page-esteso, zero impatto
   sul resto del sito.
   ========================================================================== */

@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/barlow-800.woff2') format('woff2'); }

.ac-page-esteso { --es-lime: #CCFF00; --es-bg: #0A0A0A; background: #FFFFFF; }

.es-hero { position: relative; overflow: hidden; background: var(--es-bg); color: #FFFFFF; }

.es-hero__media { position: absolute; inset: 0; bottom: 5.75rem; overflow: hidden; background: var(--es-bg); }
.es-hero__media::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(100deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .58) 32%, rgba(0, 0, 0, .42) 58%, rgba(0, 0, 0, .5) 100%);
}
.es-hero__bg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.es-hero__content {
	position: absolute; inset: 0; bottom: 5.75rem; z-index: 2;
	max-width: 90rem; margin: 0 auto; padding: 2.75rem 2.75rem 2.5rem;
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.es-hero__eyebrow {
	margin: 0 0 1.375rem; font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.9375rem; line-height: 1; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--es-lime);
}
.es-hero__title {
	margin: 0 0 1.625rem; max-width: 48.75rem; font-family: 'Anton', 'Arial Black', sans-serif;
	font-size: 5.25rem; line-height: 5.5rem; font-weight: 400; letter-spacing: -.5px; text-transform: uppercase; color: #FFFFFF;
}
.es-hero__accent { color: var(--es-lime); }
.es-hero__text {
	margin: 0 0 1.625rem; max-width: 33.75rem; font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
	font-size: 1.125rem; line-height: 1.75rem; font-weight: 400; color: rgba(255, 255, 255, .85);
}
.es-hero__stat {
	margin: 0 0 2.125rem; font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.90625rem; line-height: 1; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: rgba(255, 255, 255, .62);
}
.es-hero__actions { display: flex; align-items: center; gap: 1.125rem; }

.es-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
	height: 3.625rem; padding: 0 1.875rem; border-radius: 0;
	font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; font-weight: 700;
	letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none; white-space: nowrap;
	transition: opacity .2s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
}
.es-btn--primary { background: #FFFFFF; color: var(--es-bg); }
.es-btn--ghost { background: transparent; color: #FFFFFF; border: 0.125rem solid rgba(255, 255, 255, .55); }
.es-btn--lime { height: 3.125rem; padding: 0 1.5rem; background: var(--es-lime); color: var(--es-bg); }
.es-btn__arrow { width: 0.9375rem; height: 0.6875rem; }
@media (hover: hover) and (pointer: fine) {
	.es-btn:hover { opacity: .88; transform: translateY(-1px); }
}

.es-hero__bar {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 5.75rem;
	background: #050505; border-top: 1px solid rgba(255, 255, 255, .08);
	display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 0 2.75rem;
}
.es-hero__bar-label {
	margin: 0; flex: 0 0 auto; font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.8125rem; line-height: 1; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.es-hero__bar-links { display: flex; align-items: center; gap: 2.125rem; margin: 0; padding: 0; list-style: none; flex: 1 1 auto; justify-content: center; }
.es-hero__bar-links a { display: flex; align-items: center; gap: 0.625rem; color: #FFFFFF; text-decoration: none; font-family: 'Barlow', 'Helvetica Neue', Arial, sans-serif; font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
.es-hero__bar-links .ac-icon { width: 1.125rem; height: 1.125rem; color: var(--es-lime); flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) {
	.es-hero__bar-links a:hover { color: var(--es-lime); }
}

@media (min-width: 1024px) {
	.es-hero { height: calc(100vh - var(--header-h, 5.5rem)); min-height: 42.5rem; }
	.es-hero { height: calc(100svh - var(--header-h, 5.5rem)); }
}

@media (max-width: 1023px) {
	.es-hero { height: auto; }
	.es-hero__media { position: relative; inset: auto; bottom: auto; width: 100%; aspect-ratio: 4 / 5; }
	.es-hero__content { position: relative; inset: auto; bottom: auto; padding: 2rem 1.5rem 2.5rem; }
	.es-hero__title { font-size: 2.875rem; line-height: 3rem; margin-bottom: 1.125rem; }
	.es-hero__eyebrow { font-size: 0.78125rem; margin-bottom: 1rem; }
	.es-hero__text { font-size: 1rem; line-height: 1.5625rem; margin-bottom: 1.25rem; }
	.es-hero__stat { font-size: 0.78125rem; margin-bottom: 1.5rem; }
	.es-hero__actions { flex-wrap: wrap; gap: 0.75rem; }
	.es-btn { height: 3.25rem; padding: 0 1.375rem; font-size: 0.78125rem; }
	.es-hero__bar { position: relative; left: auto; right: auto; bottom: auto; height: auto; flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.5rem; }
	.es-hero__bar-links { flex-wrap: wrap; justify-content: flex-start; gap: 1.25rem; width: 100%; }
	.es-hero__bar .es-btn--lime { width: 100%; }
}

/* Redesign 2026: il video dell'/esteso usa la classe dell'hero per l'autoplay,
   ma qui resta sempre visibile (ha il suo poster) e senza parallasse. */
.es-hero__bg.ac-hero__video { opacity: 1; transform: none; }

/* ---- eventi.css ---- */
/* ==========================================================================
   PAGINA EVENTI — elenco di fiere ed eventi: data in un riquadro menta a
   spigoli vivi (giorni a caratteri cubitali), titolo e luogo, foto a destra.
   ========================================================================== */
.ev-list { padding-block: var(--section); }
.ev-list--past { padding-block: var(--section-s); }
.ev-list__label { margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.ev-items { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ev-item { border-bottom: 1px solid var(--line); }
.ev-item__link {
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.5rem; align-items: center;
	padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem); color: inherit; text-decoration: none;
}
.ev-item__date {
	grid-column: 1 / span 3; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: .5rem;
	margin: 0; padding: clamp(1.25rem, 1rem + 1vw, 2rem); background: var(--c-mint); color: var(--c-teal-900);
}
.ev-item__days { font-size: clamp(3rem, 2rem + 3vw, 5.25rem); line-height: .9; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.ev-item__month { font-size: .9375rem; line-height: 1.2; font-weight: 700; font-stretch: 90%; letter-spacing: .16em; text-transform: uppercase; }
.ev-item__body { grid-column: 4 / span 4; display: grid; gap: .9rem; justify-items: start; }
.ev-item__type { margin: 0; font-size: .75rem; font-weight: 600; font-stretch: 88%; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.ev-item__title { margin: 0; font-size: var(--fs-h3); line-height: 1.02; letter-spacing: -.03em; font-weight: 400; transition: color var(--d-2) ease; }
.ev-item__place { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--fg-2); }
.ev-item__place .ac-icon { width: 1.125rem; height: 1.125rem; color: var(--accent); flex: 0 0 auto; }
.ev-item__go {
	display: inline-flex; align-items: center; gap: .75rem; margin-top: .5rem; padding-bottom: .35rem; border-bottom: 1px solid currentColor;
	font-size: .8125rem; font-weight: 600; font-stretch: 90%; letter-spacing: .12em; text-transform: uppercase;
}
.ev-item__go .ac-icon { width: 0.9375rem; height: 0.75rem; transition: transform .45s var(--ease-out); }
.ev-item__media { grid-column: 8 / -1; --ratio: 3 / 2; background: var(--c-stone); }
.ev-item__media .ac-media__img { object-fit: cover; transition: transform 1.2s var(--ease-out); }
@media (hover: hover) {
	.ev-item__link:hover .ev-item__title { color: var(--accent); }
	.ev-item__link:hover .ev-item__go .ac-icon { transform: translateX(.35rem); }
	.ev-item__link:hover .ev-item__media .ac-media__img { transform: scale(1.03); }
}
.ev-item--past .ev-item__date { background: var(--c-sand); }
.ev-item--past .ev-item__media { filter: grayscale(.6); }

@media (max-width: 1023px) {
	.ev-item__date { grid-column: 1 / span 5; }
	.ev-item__body { grid-column: 6 / -1; }
	.ev-item__media { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
	.ev-item__date, .ev-item__body { grid-column: 1 / -1; }
	.ev-item__date { flex-direction: row; align-items: baseline; flex-wrap: wrap; column-gap: 1rem; }
}

/* ---- motion.css ---- */
/* ==========================================================================
   MOVIMENTO — si animano solo opacity, transform e clip-path (GPU).
   Tutto lo stato "nascosto" vive sotto html.ac-js: la classe viene aggiunta
   nel <head> solo se l'utente non ha chiesto meno movimento. Senza JS o con
   prefers-reduced-motion la pagina è completa e ferma.
   Tipi di comparsa (attributo data-reveal):
     (vuoto) sale e appare · "fade" appare · "lines" righe dal basso
     "img" tendina dal basso + ingrandimento che rientra · "fill" parole che si accendono
   ========================================================================== */

/* ---- Base: sale e appare ------------------------------------------------ */
.ac-js [data-reveal], .ac-js .fl-reveal {
	transition: opacity .9s var(--ease-soft), transform 1.1s var(--ease-out);
	transition-delay: calc(var(--i, 0) * var(--stagger) + var(--rv-delay, 0ms));
}
.ac-js [data-reveal]:not(.is-in), .ac-js .fl-reveal:not(.is-in) { opacity: 0; transform: translate3d(0, var(--rv-y, 1.75rem), 0); }
.ac-js [data-reveal="fade"]:not(.is-in) { transform: none; }

/* ---- Titoli a righe ------------------------------------------------------ */
.ac-js [data-reveal="lines"] { transition: none; }
.ac-js [data-reveal="lines"]:not(.is-in) { opacity: 1; transform: none; }
.ac-js [data-reveal="lines"] .ac-line__in {
	transition: transform 1.05s var(--ease-out);
	transition-delay: calc(var(--l, 0) * 95ms + var(--rv-delay, 0ms));
}
.ac-js [data-reveal="lines"]:not(.is-in) .ac-line__in { transform: translate3d(0, 112%, 0); }

/* Hero di tutte le pagine: entrata secca e lineare (0,5 s), guidata da main.js fotogramma per
   fotogramma e non da transizioni CSS. Su iPhone (Safari, Chrome e Brave, iOS 26) il browser,
   passando da una pagina all'altra, fa una dissolvenza e poi ricrea i livelli grafici. Le
   animazioni CSS in corso ripartivano da capo: il titolo "si caricava due volte" (video del
   cliente, 23/09). Qui c'è solo lo stato di partenza; il titolo entra tutto insieme. */
.ac-js .ac-hero [data-reveal], .ac-js .ac-hero [data-reveal] .ac-line__in { transition: none !important; }
.ac-js .ac-hero [data-reveal="lines"] .ac-line__in { transform: none; }
.ac-js .ac-hero .ac-hero__title[data-reveal="lines"]:not(.is-in) { opacity: 0; transform: translate3d(0, 0.875rem, 0); }
.ac-js .ac-hero [data-reveal]:not([data-reveal="lines"]) { --rv-y: 0.75rem; }

/* Stessa pagina caricata di nuovo entro pochi secondi (classe ac-instant, vedi functions.php):
   l'hero e l'header compaiono subito come erano, nessuna entrata ripetuta. */
html.ac-instant .ac-hero [data-reveal], html.ac-instant .ac-hero [data-reveal] .ac-line__in {
	opacity: 1 !important; transform: none !important; transition: none !important;
}
html.ac-instant .ac-hero__zoom, html.ac-instant .ac-header, html.ac-instant .ac-header__logo, html.ac-instant .ac-header__tools { animation: none !important; }
html.ac-still .ac-measure__rule { -webkit-clip-path: none !important; clip-path: none !important; }

/* ---- Immagini: tendina + ingrandimento che rientra ------------------------
   La tendina è un pannello del colore della sezione che si ritira verso l'alto
   (niente clip-path sull'elemento: così il browser lo vede e carica la foto). */
.ac-js [data-reveal="img"] { position: relative; overflow: hidden; }
.ac-js [data-reveal="img"]:not(.is-in) { opacity: 1; transform: none; }
.ac-js [data-reveal="img"]::after {
	content: ""; position: absolute; inset: -1px; z-index: 4; pointer-events: none;
	background: var(--bg, var(--c-paper));
	transform-origin: 50% 0; transition: transform 1.3s var(--ease-io); transition-delay: var(--rv-delay, 0ms);
}
.ac-js [data-reveal="img"].is-in::after { transform: scaleY(0); }
.ac-js [data-reveal="img"]:not(.is-in) .ac-media__inner,
.ac-js [data-reveal="img"]:not(.is-in) .ac-fair__img,
.ac-js [data-reveal="img"]:not(.is-in) .ac-svc__stage-img.is-active { transform: scale(1.16); }
.ac-fair__img { transition: transform 1.8s var(--ease-out); }

/* ---- Foto in dissolvenza, senza tendina né movimento ----------------------
   Capitoli di Servizi (29/09, richiesta del cliente: un'animazione "più sobria"): la foto passa
   da trasparente a piena, ferma. */
.ac-js [data-reveal="photo"] { transition: opacity 1.1s linear; transition-delay: var(--rv-delay, 0ms); }
.ac-js [data-reveal="photo"]:not(.is-in) { opacity: 0; transform: none; }

/* ---- Parole che si accendono (indice tipologie) -------------------------- */
.ac-js [data-reveal="fill"] { transition: none; }
.ac-js [data-reveal="fill"]:not(.is-in) { opacity: 1; transform: none; }
.ac-js [data-reveal="fill"]:not(.is-in) .ac-types__item { color: var(--fg-4); }

/* ---- Quota tecnica sotto i numeri: il filo si stende ---------------------- */
/* Il metro sotto le cifre si srotola da sinistra, lineare, quando la cifra compare. Serve un "inset" anche
   nello stato finale: tra un inset e "none" il browser non anima e il metro compariva di colpo. */
.ac-js .ac-nums__item .ac-dim { -webkit-clip-path: inset(-50% 0 -50% 0); clip-path: inset(-50% 0 -50% 0); transition: clip-path 1.2s linear .35s, -webkit-clip-path 1.2s linear .35s; }
.ac-js .ac-nums__item:not(.is-in) .ac-dim { -webkit-clip-path: inset(-50% 100% -50% 0); clip-path: inset(-50% 100% -50% 0); }

/* ---- Entrate al caricamento ---------------------------------------------- */
/* Niente più zoom della foto dell'hero né dissolvenza dell'header al caricamento (23/09): erano
   animazioni CSS e su iPhone ripartivano a fine dissolvenza del browser. Restano il parallasse
   della foto allo scorrimento e l'entrata del testo dell'hero (main.js). */
@keyframes ac-fade { from { opacity: 0; } }
@keyframes ac-drop { from { opacity: 0; transform: translate3d(0, -40%, 0); } }

/* ---- Pulsante orbita: l'anello gira piano -------------------------------- */
.ac-js .ac-orbit__ring { animation: ac-spin 26s linear infinite; }
.ac-js .ac-magnet { transition: transform .6s var(--ease-out), background-color var(--d-2) ease; }

/* ---- mobile.css ---- */
/* ==========================================================================
   TELEFONO — tutto centrato (richiesta del cliente): titoli, testi, etichette,
   pulsanti e link in ogni sezione e nel footer. Restano a sinistra solo i testi
   lunghi (note legali, descrizione del progetto), l'elenco dei progetti e la
   linea del tempo "Come lavoriamo", che ha il filo e i pallini sul bordo sinistro.
   Caricato per ultimo, così vince sulle regole delle singole sezioni.
   ========================================================================== */
@media (max-width: 767px) {
	.ac-main, .ac-footer { text-align: center; }

	/* Eccezioni: testi lunghi ed elenchi strutturati. */
	.ac-main .ac-prose, .ac-main .pg-doc__content, .ac-main .pr-browser__aside, .ac-main .pr-panel__text,
	.ac-main .ab-steps__list, .ac-cookie { text-align: left; }

	/* Etichette, pulsanti, link: sempre al centro della loro colonna. */
	.ac-main .ac-label--dot, .ac-main .ac-btn, .ac-main .ac-link, .ac-main .ac-orbit,
	.ac-footer .ac-btn, .ac-footer .ac-label { justify-self: center; align-self: center; margin-inline: auto; }
	.ac-main [class*="__cta"], .ac-main [class*="__actions"], .ac-main [class*="__action"], .ac-main [class*="__foot"],
	.ac-main [class*="__intro"], .ac-main [class*="__info"], .ac-main [class*="__aside"]:not(.pr-browser__aside), .ac-main [class*="__head"],
	.ac-main [class*="__body"], .ac-main [class*="__content"]:not(.pg-doc__content), .ac-main [class*="__side"], .ac-main [class*="__grid"] {
		justify-items: center; justify-content: center; text-align: center;
	}
	.ac-main [class*="__text"], .ac-main [class*="__lead"], .ac-main .ac-lead { margin-inline: auto; }
	/* Righe con icona + testo (luogo, città, recapiti, elenchi puntati): centrate. */
	.ac-main [class*="__place"], .ac-main [class*="__city"], .ac-main [class*="__bullets"] li, .ac-main .sv-box,
	.ac-footer__social, .ac-footer__legal, .ac-footer__bottom { justify-content: center; }
	.ac-main .sv-boxes { justify-items: center; }
	/* Etichette (ruoli, didascalie) centrate anche quando sono elementi di una griglia. */
	.ac-main .ac-label { justify-content: center; justify-self: center; }
	.ac-main .ab-person figcaption { justify-items: center; }
	/* Le foto restano larghe quanto la loro colonna (con "justify-items: center" si stringerebbero a zero). */
	.ac-main .ac-media:not(.ac-final__media), .ac-main figure:not(.ac-final__media) { justify-self: stretch; width: 100%; }
	/* Due pulsanti affiancati (hero): vicini e centrati. Con i margini automatici Safari su iPhone
	   distribuiva lo spazio libero intorno ai pulsanti e li allontanava. */
	.ac-main .ac-hero__actions .ac-btn { margin-inline: 0; }

	/* Footer: logo, frase, colonne e riga finale al centro. */
	.ac-footer__top { justify-content: center; }
	.ac-footer__logo { margin-inline: auto; }
	.ac-footer__brand { justify-items: center; }
	.ac-footer__bottom { flex-direction: column; align-items: center; }

	/* Unica eccezione: i recapiti del footer restano a sinistra, testo subito dopo l'icona. */
	.ac-footer__col--contacts { text-align: left; justify-items: start; }
	.ac-footer__col--contacts .ac-label { margin-inline: 0; justify-self: start; }
	.ac-footer__contacts li { justify-content: flex-start; }
	.ac-footer__col--contacts .ac-footer__social { justify-content: flex-start; }
}

/* ==========================================================================
   TELEFONO PIÙ COMPATTO (colloquio del 25/09: "ottimizzare dimensioni e spazi
   per il traffico da mobile"). Meno aria tra le sezioni; foto e video meno alti.
   ========================================================================== */
@media (max-width: 767px) {
	:root { --section: 3.5rem; --section-s: 2.5rem; --stack: 2rem; }
	.ac-brand__label { margin-bottom: 2rem; }
	.ac-values__item { padding-block: 1.1rem; }
	/* Punti di forza in home (01/10, richiesta del cliente): niente icona a destra, che spingeva il titolo
	   fuori centro rispetto al testo; il titolo è sottolineato per staccarsi dal testo sotto. La linea è la
	   menta dell’accento al 25%: il cliente la voleva più vicina al colore dello sfondo, poco evidente. */
	.ac-values__item { grid-template-columns: minmax(0, 1fr); }
	.ac-values__icon { display: none; }
	.ac-values__title {
		text-decoration: underline; text-decoration-color: rgba(160, 244, 225, .25);
		text-decoration-thickness: 1px; text-underline-offset: .3em;
	}
	/* Video verticale di Chi siamo e foto ad arco della chiamata finale: meno alti. Il video ha bisogno
	   di "figure." davanti per battere la regola "foto larghe quanto la colonna" qui sopra. */
	.ac-main figure.ab-video__player { justify-self: center; width: min(100%, 16rem); }
	.ac-final--image .ac-final__media { width: min(15rem, 70%); }
	/* Elenchi dei servizi: testo al centro, quindi niente trattino a sinistra. */
	.ac-main .ac-spec li { grid-template-columns: minmax(0, 1fr); }
	.ac-main .ac-spec li::before { display: none; }
}