/**
 * Home.
 *
 * Accodato solo sulla home. Usa i soli token di style.css.
 */

/* -----------------------------------------------------------------------------
 * Elementi condivisi fra le sezioni della home
 * -------------------------------------------------------------------------- */

/* Occhiello numerato: "01 — Il metodo". Display, non body, e giallo. */
.pao-eyebrow--num {
	font-family: var(--pao-font-display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: none;
	color: var(--pao-accent);
	margin-bottom: var(--pao-space-4);
}

.pao-testa-sezione {
	display: grid;
	gap: var(--pao-space-6);
	margin-bottom: var(--pao-space-8);
}

.pao-titolo-sezione {
	font-family: var(--pao-font-display);
	font-size: var(--pao-fs-section);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--pao-primary);
	margin: 0;
}

/* Il corsivo delle seconde righe ha peso 500, non 400: su un titolo a 800 un
   400 pieno risulterebbe troppo esile alle dimensioni editoriali. */
.pao-titolo-sezione em {
	font-style: italic;
	font-weight: 500;
}

.pao-testa-sezione__testo {
	font-size: 16px;
	line-height: 1.7;
	color: var(--pao-body);
}

.pao-testa-sezione__testo strong {
	color: var(--pao-primary);
}

/*
 * I COLORI dell'intestazione seguono la superficie, non un modificatore scritto
 * nel template. Prima era `--chiara`, messa a mano nella fascia del team: una
 * sezione che il cliente scurisce dal backend non poteva ereditarla, e usciva
 * col titolo teal su fondo teal - invisibile, senza nessun avviso.
 */
.pao-surface-dark .pao-titolo-sezione {
	color: var(--pao-on-dark);
}

.pao-surface-dark .pao-titolo-sezione em {
	color: rgba(255, 255, 255, 0.7);
}

.pao-surface-dark .pao-testa-sezione__testo {
	color: var(--pao-on-dark-muted);
}

/* Il grassetto dentro il testo di sezione e' teal: su fondo scuro sparirebbe. */
.pao-surface-dark .pao-testa-sezione__testo strong {
	color: var(--pao-on-dark);
}

/* L'IMPAGINAZIONE invece resta del modificatore: e' propria della fascia del
   team, non di tutte le sezioni scure. */
.pao-testa-sezione--chiara .pao-testa-sezione__testo {
	max-width: 42ch;
	font-size: 15px;
}

/* -----------------------------------------------------------------------------
 * 01 · Apertura
 * -------------------------------------------------------------------------- */

.pao-hero {
	position: relative;
	overflow: hidden;
	padding-bottom: clamp(64px, 8vw, 100px);
}

/* Vignettatura in basso: stacca la fascia successiva senza una riga di bordo. */
.pao-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 100%, transparent, rgba(6, 43, 46, 0.6));
	pointer-events: none;
}

/* Sopra la vignettatura ::before, che altrimenti coprirebbe il contenuto. */
.pao-hero__inner {
	position: relative;
	z-index: 2;
	padding-top: clamp(48px, 6vw, 80px);
}

.pao-hero__occhiello {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(28px, 4vw, 48px);
}

/* Altezza e non quadrato: il file si carica dal backend e non e' detto che
   sia quadrato. Con width e height fissi un PNG con altre proporzioni si
   schiaccerebbe; cosi' invece si adatta. 52px e' la misura a cui il disegno
   si vedeva prima, dentro il quadrato da 56 con il suo margine interno. */
.pao-hero__pittogramma {
	height: 52px;
	width: auto;
	flex: none;
}

.pao-hero__meta {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pao-on-dark-muted);
}

.pao-hero__meta strong {
	color: var(--pao-on-dark);
}

.pao-hero__top {
	display: grid;
	gap: var(--pao-space-8);
	align-items: center;
	margin-bottom: var(--pao-space-2);
}

/*
 * Misure del design: 84px con interlinea 1,08, non piu' strette. Le avevo
 * fatte piu' grandi (fino a 110px) e piu' serrate (0,92): un titolo di tre
 * righe cosi' compatto diventa un blocco, e le righe si toccano.
 *
 * La larghezza massima cambia a gradini come nell'handoff: 12ch sui grandi
 * schermi, 16ch sotto, nessun limite da telefono - dove imporne uno
 * costringerebbe a righe di due parole.
 */
.pao-hero__titolo {
	margin-bottom: var(--pao-space-5);
	font-size: var(--pao-fs-hero);
	line-height: 1.08;
	letter-spacing: -0.04em;
	font-weight: 800;
	color: var(--pao-on-dark);
}

/* Il punto finale giallo: e' l'unico accento cromatico del titolo. */
.pao-hero__titolo em {
	display: inline-block;
	font-style: italic;
	font-weight: 400;
	color: var(--pao-accent);
}

.pao-hero__lede {
	max-width: 56ch;
	margin-bottom: var(--pao-space-6);
	font-size: 17px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.75);
}

.pao-hero__lede strong {
	color: var(--pao-on-dark);
}

.pao-hero__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.pao-hero__foto {
	position: relative;
	aspect-ratio: 4 / 4.4;
	border-radius: var(--pao-radius-xl);
	border: var(--pao-hairline) solid rgba(255, 255, 255, 0.18);
	box-shadow: var(--pao-shadow-hero);
	background-color: rgba(255, 255, 255, 0.06);
	overflow: hidden;
}

.pao-hero__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Etichetta chiara sulla foto, come nel design. Era stata fatta scura e
 * traslucida con una sfocatura dietro: e' un modo diffuso di posare
 * un'etichetta su una fotografia, ma qui il design dice il contrario - fondo
 * bianco e scritta verde - e non c'era nessuna ragione per discostarsene.
 * Senza sfocatura anche il costo di disegno sparisce.
 */
.pao-hero__chip {
	position: absolute;
	left: 20px;
	bottom: 20px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: var(--pao-radius-pill);
	background-color: rgba(255, 255, 255, 0.95);
	font-size: 13px;
	font-weight: 700;
	color: var(--pao-primary);
}

/* Il pallino e' verde per scelta: nel design e' giallo, ma sul fondo bianco
   con la scritta verde stonava. */
.pao-hero__chip-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--pao-primary);
}

.pao-hero__payoff {
	display: flex;
	flex-direction: column;
	gap: var(--pao-space-3);
	margin-top: var(--pao-space-8);
	padding-top: var(--pao-space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.pao-hero__payoff-testo {
	font-family: var(--pao-font-display);
	font-size: 17px;
	font-style: italic;
	color: var(--pao-on-dark);
}

.pao-hero__payoff-meta {
	font-family: var(--pao-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pao-accent);
}

/* -----------------------------------------------------------------------------
 * 02 · Il metodo
 * -------------------------------------------------------------------------- */

.pao-tappe {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pao-space-5);
}

.pao-tappa {
	display: flex;
	flex-direction: column;
	gap: var(--pao-space-5);
	padding: 36px 32px 32px;
	border-radius: var(--pao-radius-lg);
	background-color: var(--pao-primary-light);
	transition:
		background-color var(--pao-dur-base) var(--pao-ease-out),
		transform var(--pao-dur-base) var(--pao-ease-out);
}

.pao-tappa:hover {
	background-color: var(--pao-primary);
	transform: translateY(-4px);
}

.pao-tappa:hover .pao-tappa__label,
.pao-tappa:hover .pao-tappa__titolo,
.pao-tappa:hover .pao-tappa__desc,
.pao-tappa:hover .pao-tappa__lettera {
	color: var(--pao-on-dark);
}

.pao-tappa__step {
	font-family: var(--pao-font-display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--pao-accent);
}

.pao-tappa__lettera {
	margin-top: var(--pao-space-2);
	font-family: var(--pao-font-display);
	font-size: var(--pao-fs-letter);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--pao-primary);
	transition: color var(--pao-dur-base) var(--pao-ease-out);
}

.pao-tappa__label {
	font-family: var(--pao-font-display);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--pao-primary);
	transition: color var(--pao-dur-base) var(--pao-ease-out);
}

.pao-tappa__titolo {
	margin: -14px 0 -8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--pao-primary);
	transition: color var(--pao-dur-base) var(--pao-ease-out);
}

.pao-tappa__desc {
	flex: 1;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pao-body);
	transition: color var(--pao-dur-base) var(--pao-ease-out);
}

/* -----------------------------------------------------------------------------
 * 03 · Il Report — fondo GIALLO
 * -------------------------------------------------------------------------- */

.pao-report {
	background-color: var(--pao-accent);
	color: var(--pao-primary);
}

.pao-report__inner {
	display: grid;
	gap: var(--pao-space-8);
	align-items: center;
}

/* Sul giallo l'occhiello non puo' essere giallo: diventa teal smorzato. */
.pao-report .pao-eyebrow--num {
	color: var(--pao-primary);
	opacity: 0.7;
}

.pao-report__lede {
	max-width: 48ch;
	margin: 28px 0 var(--pao-space-6);
	font-size: 18px;
	line-height: 1.6;
	color: var(--pao-primary);
}

.pao-report__punti {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.pao-punto {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.pao-punto__check {
	display: grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	border-radius: 50%;
	background-color: var(--pao-primary);
	color: var(--pao-accent);
}

.pao-punto__check svg {
	width: 14px;
	height: 14px;
}

.pao-punto__testo {
	display: block;
}

.pao-punto__titolo {
	display: block;
	font-family: var(--pao-font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--pao-primary);
}

.pao-punto__desc {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pao-primary);
	opacity: 0.75;
}

/* Bottone teal con testo giallo: esiste solo qui, sul fondo giallo. */
.pao-btn--report {
	background-color: var(--pao-primary);
	color: var(--pao-accent);
}

.pao-btn--report:hover {
	background-color: var(--pao-primary-dark);
}

.pao-citazione {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0;
	padding: var(--pao-space-4) 0;
}

.pao-citazione__segno {
	display: block;
	height: 60px;
	margin-bottom: var(--pao-space-6);
	font-family: var(--pao-font-display);
	font-size: var(--pao-fs-quotemark);
	font-weight: 800;
	line-height: 0.6;
	color: var(--pao-primary);
	opacity: 0.35;
}

.pao-citazione__testo {
	margin: 0;
	font-family: var(--pao-font-display);
	font-size: var(--pao-fs-quote);
	font-style: italic;
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--pao-primary);
}

/* -----------------------------------------------------------------------------
 * 04 · Trattamenti in sintesi
 * -------------------------------------------------------------------------- */

.pao-servizi__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
	padding-top: var(--pao-space-7);
	border-top: var(--pao-hairline) solid var(--pao-border-strong);
}

.pao-servizi__nota {
	max-width: 44ch;
	font-size: 14px;
	line-height: 1.55;
	color: var(--pao-muted);
}

/* -----------------------------------------------------------------------------
 * 05 · Le persone
 * -------------------------------------------------------------------------- */

.pao-team {
	padding-block: var(--pao-section-y-tight);
}

/* Il gutter e il limite di larghezza li porta .pao-container, come in ogni
   altra sezione: il carosello si fermava al bordo della finestra mentre nel
   design sta dentro i 1320px come tutto il resto.

   Sotto md il direttore sta a tutta riga e il carosello scorre sotto di lui,
   con tre celle alla volta. Da 900px tornano affiancati (breakpoint in fondo). */
.pao-team__striscia {
	display: flex;
	flex-direction: column;
	gap: var(--pao-space-3);
}

.pao-cella {
	position: relative;
	display: block;
	border-radius: var(--pao-radius-md);
	border: var(--pao-hairline) solid rgba(255, 255, 255, 0.12);
	background-color: rgba(255, 255, 255, 0.04);
	aspect-ratio: 3 / 4;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition:
		transform var(--pao-dur-base) var(--pao-ease-out),
		border-color var(--pao-dur-base) var(--pao-ease-out);
}

.pao-cella img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform var(--pao-dur-base) var(--pao-ease-out);
}

.pao-cella:hover {
	border-color: rgba(255, 255, 255, 0.35);
}

.pao-cella:hover img {
	transform: scale(1.03);
}

.pao-cella--lead {
	aspect-ratio: 4 / 5;
	border: 0;
	background-color: var(--pao-accent);
}

.pao-cella__info {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	padding: var(--pao-space-2);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.pao-cella--lead .pao-cella__info {
	padding: var(--pao-space-4);
	background: linear-gradient(to top, rgba(13, 82, 87, 0.95), transparent 80%);
}

/* Nelle celle da un terzo di riga (~110px a 390) il nome a 16px andava a
   capo su tre righe: sotto md scende, e torna a 16px da 900px. */
.pao-cella__nome {
	display: block;
	font-family: var(--pao-font-display);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--pao-on-dark);
}

.pao-cella__ruolo {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	line-height: 1.25;
	color: rgba(255, 255, 255, 0.6);
}

.pao-cella--lead .pao-cella__nome {
	font-size: 16px;
}

.pao-cella--lead .pao-cella__ruolo {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.85);
}

/* La maschera sfuma i due bordi del nastro, così le celle non appaiono
   tagliate di netto quando entrano ed escono. È un container: sotto md la
   larghezza delle celle è un terzo del nastro, misurato in `cqi`. */
.pao-team__marquee {
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	-webkit-mask: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
	mask: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}

.pao-team__pista {
	--pao-team-gap: var(--pao-space-3);
	display: flex;
	gap: var(--pao-team-gap);
	width: max-content;
	animation: pao-scorrimento-team 38s linear infinite;
}

.pao-team__marquee:hover .pao-team__pista {
	animation-play-state: paused;
}

/* Due celle e mezza nel nastro: la mezza lascia capire che scorre, e le celle
   restano più grandi che a tre intere. In vista ci sono due gap interi. */
.pao-team__pista .pao-cella {
	flex: none;
	width: calc((100cqi - 2 * var(--pao-team-gap)) / 2.5);
}

/* Il mezzo gap compensa lo spazio fra le due passate: senza, a ogni giro il
   nastro salta. Il gap cambia col breakpoint, quindi passa dalla variabile. */
@keyframes pao-scorrimento-team {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-50% - var(--pao-team-gap) / 2));
	}
}

@media (prefers-reduced-motion: reduce) {

	.pao-team__pista {
		animation: none;
	}

	.pao-team__marquee {
		overflow-x: auto;
	}
}

.pao-team__cta {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.pao-team__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 30px;
	border-radius: var(--pao-radius-pill);
	background-color: var(--pao-accent);
	color: var(--pao-text-on-accent);
	font-family: var(--pao-font-display);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition:
		background-color var(--pao-dur-fast) var(--pao-ease-out),
		transform var(--pao-dur-fast) var(--pao-ease-out);
}

.pao-team__cta-link:hover {
	background-color: var(--pao-accent-hover);
}

.pao-team__cta-link:active {
	transform: translateY(1px);
}

/* -----------------------------------------------------------------------------
 * 06 · Domande frequenti
 * -------------------------------------------------------------------------- */

.pao-faq__inner {
	display: grid;
	gap: var(--pao-space-8);
}

.pao-faq .pao-titolo-sezione {
	margin-bottom: var(--pao-space-5);
}

.pao-aiuto {
	margin-top: var(--pao-space-6);
	padding: 28px;
	border-radius: var(--pao-radius-md);
	background-color: var(--pao-primary-light);
	/* Scheda chiara: dichiara il proprio colore, cosi' i titoli lo ereditano
	   anche se la sezione che la contiene viene scurita dal backend. */
	color: var(--pao-body);
}

.pao-aiuto__titolo {
	margin-bottom: 6px;
	font-family: var(--pao-font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--pao-primary);
}

.pao-aiuto__desc {
	margin-bottom: var(--pao-space-4);
	font-size: 14px;
	line-height: 1.55;
	color: var(--pao-body);
}

.pao-aiuto__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pao-space-4);
}

.pao-aiuto__azioni a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--pao-primary);
	text-decoration: none;
}

.pao-aiuto__azioni a:hover {
	text-decoration: underline;
}

.pao-faq__lista {
	display: flex;
	flex-direction: column;
}

.pao-faq__voce {
	padding: var(--pao-space-5) 0;
	border-bottom: var(--pao-hairline) solid var(--pao-border-strong);
}

.pao-faq__domanda {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pao-space-5);
	font-family: var(--pao-font-display);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--pao-primary);
	cursor: pointer;
	list-style: none;
}

.pao-faq__domanda::-webkit-details-marker {
	display: none;
}

/* Il segno e' disegnato con due barrette, non scritto con i caratteri "+" e
   "−": un glifo si posiziona secondo le metriche del font e nel cerchio
   usciva decentrato. Le barrette stanno al centro geometrico. */
.pao-faq__domanda::after {
	content: "";
	flex: none;
	width: 32px;
	height: 32px;
	border: 1px solid var(--pao-border-strong);
	border-radius: 50%;
	color: var(--pao-primary);
	background:
		linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
}

.pao-faq__voce[open] .pao-faq__domanda::after {
	background-size: 14px 1.5px, 0 0;
}

.pao-faq__risposta {
	max-width: 60ch;
	padding-top: 18px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--pao-body);
}

.pao-faq__toggle {
	align-self: flex-start;
	margin-top: var(--pao-space-6);
	padding: 14px 28px;
	border: 1px solid var(--pao-border-strong);
	border-radius: var(--pao-radius-pill);
	background-color: transparent;
	font-family: var(--pao-font-display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--pao-primary);
	cursor: pointer;
	transition:
		background-color var(--pao-dur-fast) var(--pao-ease-out),
		border-color var(--pao-dur-fast) var(--pao-ease-out);
}

.pao-faq__toggle:hover {
	background-color: var(--pao-primary-light);
	border-color: var(--pao-primary);
}

.pao-faq__toggle:active {
	transform: translateY(1px);
}

/* -----------------------------------------------------------------------------
 * 07 · Contatti — fondo teal SCURO, senza texture
 * -------------------------------------------------------------------------- */

.pao-contatti {
	position: relative;
	background-color: var(--pao-primary-dark);
	color: var(--pao-on-dark);
	overflow: hidden;
}

.pao-contatti__inner {
	display: grid;
	gap: var(--pao-space-8);
	align-items: start;
}

.pao-contatti .pao-titolo-sezione {
	margin-bottom: 28px;
	color: var(--pao-on-dark);
}

.pao-contatti .pao-titolo-sezione em {
	color: rgba(255, 255, 255, 0.65);
}

.pao-contatti__lede {
	max-width: 44ch;
	margin-bottom: 40px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--pao-on-dark-muted);
}

.pao-recapiti {
	display: flex;
	flex-direction: column;
	gap: var(--pao-space-5);
	padding: 28px var(--pao-space-6);
	border: var(--pao-hairline) solid rgba(255, 255, 255, 0.12);
	border-radius: var(--pao-radius-md);
	background-color: rgba(255, 255, 255, 0.04);
}

.pao-recapito {
	display: flex;
	/*
	 * Sempre in alto, mai centrata. Le righe sono alte in modo diverso - una
	 * riga sola, due con la nota, l'intera tabella degli orari - e centrando
	 * ognuna nella propria altezza le icone finiscono a quote diverse: la
	 * colonna gialla si sfalsa. Ancorate in alto restano incolonnate.
	 */
	align-items: flex-start;
	gap: var(--pao-space-4);
}

.pao-recapito__testo {
	/* Serve alla riga degli orari: senza, la tabella si stringe sul contenuto. */
	flex: 1;
	min-width: 0;
}

.pao-recapito__icona {
	flex: none;
	color: var(--pao-accent);
	line-height: 0;
	/* L'icona e' 20px, l'occhiello sopra 11px: senza questo scarto l'icona
	   parte piu' in alto della prima riga di testo invece che accanto. */
	margin-top: 2px;
}

.pao-recapito__etichetta {
	display: block;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.pao-recapito__valore {
	display: block;
	font-family: var(--pao-font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--pao-on-dark);
	text-decoration: none;
}

a.pao-recapito__valore:hover {
	color: var(--pao-accent);
}

/* La riga piccola sotto il valore: parcheggio, tempi di risposta. Non e' un
   recapito a se', precisa quello sopra - da qui il peso e il contrasto minori. */
.pao-recapito__nota {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
}

/* Fascia con la foto sotto la scheda dei recapiti. La sfumatura scura in basso
   serve alla didascalia: senza, su una foto chiara sparirebbe. */
/* 1400x640, cioe' 35:16: la proporzione sta qui e non in un'altezza fissa,
   cosi' vale identica a ogni larghezza, telefono compreso. Cambiandola, va
   cambiata anche la riga della tabella delle risoluzioni nel CLAUDE.md. */
.pao-contatti__foto {
	position: relative;
	aspect-ratio: 35 / 16;
	margin: var(--pao-space-5) 0 0;
	border: var(--pao-hairline) solid rgba(255, 255, 255, 0.12);
	border-radius: var(--pao-radius-lg);
	overflow: hidden;
}

.pao-contatti__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pao-contatti__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(6, 43, 46, 0.6), rgba(6, 43, 46, 0.05));
}

.pao-contatti__didascalia {
	position: absolute;
	z-index: 2;
	left: 22px;
	bottom: 18px;
	font-family: var(--pao-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 16px;
	color: var(--pao-on-dark);
}

.pao-orari {
	width: 100%;
	margin-top: 6px;
	border-collapse: collapse;
	/*
	 * Fissa e non automatica: e' una questione di DOVE va a capo, non di
	 * sbordamento (dentro ci sta in entrambi i casi). Con la larghezza
	 * automatica il browser spezza "08:30-13:00 / 15:00-19:00" dopo il
	 * trattino, cioe' in mezzo a un intervallo: "15:00-" su una riga e
	 * "19:00" sull'altra. Con le colonne dichiarate il capo cade sulla barra,
	 * fra le due fasce, che e' l'unico punto in cui ha senso.
	 */
	table-layout: fixed;
	font-size: 14px;
}

.pao-orari th,
.pao-orari td {
	padding: 10px 0;
	border-bottom: var(--pao-hairline) solid rgba(255, 255, 255, 0.12);
	text-align: left;
	font-weight: 400;
}

.pao-orari th {
	/* Col layout fisso le colonne servono dichiarate: i nomi dei giorni stanno
	   in un terzo abbondante, il resto va agli orari, che sono piu' lunghi. */
	width: 38%;
	color: var(--pao-on-dark-muted);
}

.pao-orari td {
	color: var(--pao-on-dark);
	font-weight: 600;
	text-align: right;
}

.pao-orari tr:last-child th,
.pao-orari tr:last-child td {
	border-bottom: 0;
}

.pao-form {
	padding: var(--pao-space-6);
	border-radius: var(--pao-radius-lg);
	background-color: var(--pao-bg);
	color: var(--pao-body);
}

.pao-form__titolo {
	margin-bottom: 6px;
	font-size: 24px;
	letter-spacing: -0.015em;
	color: var(--pao-primary);
}

/*
 * Il titolo del modulo e' teal, mentre il testo della scheda e' grigio: e'
 * l'unico punto in cui una scheda vuole per l'intestazione un colore diverso
 * dal proprio, quindi l'ereditarieta' da sola non basta.
 *
 * ⚠ Servono tre classi. La regola che rende ereditate le intestazioni sulle
 * superfici scure ne pesa due piu' un elemento, e con meno di cosi' vince lei:
 * il titolo usciva grigio invece che teal, senza che niente lo segnalasse.
 */
.pao-surface-dark .pao-form .pao-form__titolo {
	color: var(--pao-primary);
}

.pao-form__sub {
	margin-bottom: 28px;
	font-size: 14px;
	color: var(--pao-body);
}

/* Avviso visibile solo a chi ha i permessi di modifica. */
.pao-form__avviso {
	padding: var(--pao-space-4);
	border: 1px dashed var(--pao-border-strong);
	border-radius: var(--pao-radius-sm);
	font-size: 14px;
	line-height: 1.5;
	color: var(--pao-muted);
}

.pao-recensioni {
	margin-top: var(--pao-space-5);
	padding: var(--pao-space-6) 34px;
	border-radius: var(--pao-radius-lg);
	background-color: var(--pao-accent);
	color: var(--pao-primary);
}

.pao-recensioni__stelle {
	display: flex;
	gap: 4px;
	margin-bottom: var(--pao-space-3);
	color: var(--pao-primary);
	line-height: 0;
}

/*
 * ⚠ Le stelle vanno piene, e il `fill` va messo sul PATH.
 *
 * Il disegno del catalogo porta `fill="none"` addosso al path: una regola sul
 * tag <svg> non lo raggiunge, perche' l'attributo del figlio vince su quello
 * che eredita dal padre. Restavano cinque contorni, che si leggono come cinque
 * stelle vuote - cioe' come un voto di zero, il contrario di quello che il
 * riquadro vuole dire. Nel design sono piene.
 *
 * `stroke: none` toglie il tratto, che sommato al riempimento le ingrossava.
 */
.pao-recensioni__stelle svg path {
	fill: currentColor;
	stroke: none;
}

/* La stella oltre il voto torna a contorno: serve solo quando Google riporta
   meno di cinque, ed e' l'unico caso in cui un contorno dice il vero. */
.pao-recensioni__stella--vuota svg path {
	fill: none;
	stroke: currentColor;
	opacity: 0.45;
}

.pao-recensioni__voto {
	margin: 0 0 var(--pao-space-3);
	font-size: 14px;
	color: var(--pao-primary);
}

.pao-recensioni__voto strong {
	font-family: var(--pao-font-display);
	font-weight: 800;
}

.pao-recensioni__titolo {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--pao-primary);
}

.pao-recensioni__testo {
	margin: var(--pao-space-2) 0 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pao-primary);
	opacity: 0.8;
}

.pao-recensioni__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pao-space-3);
}

/* Bottone con bordo su fondo giallo: il ghost chiaro qui sparirebbe. */
.pao-btn--ghost-scuro {
	background-color: transparent;
	border: 1.5px solid var(--pao-primary);
	color: var(--pao-primary);
}

.pao-btn--ghost-scuro:hover {
	background-color: rgba(13, 82, 87, 0.08);
}

/* -----------------------------------------------------------------------------
 * Breakpoint
 * -------------------------------------------------------------------------- */

@media (min-width: 640px) {

	.pao-hero__payoff {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.pao-servizi__cta {
		flex-direction: row;
		align-items: center;
	}

	.pao-tappe {
		grid-template-columns: repeat(2, 1fr);
	}

	/* A tutta riga fra 640 e 899 una cella 4:5 supera i 900px di altezza. */
	.pao-cella--lead {
		aspect-ratio: 3 / 2;
	}
}

@media (min-width: 900px) {

	.pao-hero__titolo {
		max-width: 16ch;
		margin-bottom: var(--pao-space-6);
	}

	/* Da qui la fascia è quella del design: direttore fisso a sinistra,
	   nastro che scorre a destra, alla stessa altezza. */
	.pao-team__striscia {
		flex-direction: row;
		gap: var(--pao-space-5);
		align-items: stretch;
		height: 440px;
	}

	.pao-cella,
	.pao-cella--lead {
		aspect-ratio: auto;
	}

	.pao-cella__info {
		padding: var(--pao-space-4);
	}

	.pao-cella__nome {
		font-size: 16px;
	}

	.pao-cella__ruolo {
		font-size: 11px;
	}

	.pao-cella--lead {
		flex: none;
		width: 330px;
		height: 100%;
	}

	.pao-team__marquee {
		flex: 1 1 0;
		min-width: 0;
		height: 100%;
		-webkit-mask: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
		mask: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
	}

	.pao-team__pista {
		--pao-team-gap: var(--pao-space-4);
		height: 100%;
	}

	.pao-team__pista .pao-cella {
		flex: none;
		width: 300px;
		height: 100%;
	}

	.pao-form {
		padding: 40px;
	}
}

@media (min-width: 1200px) {

	.pao-hero__titolo {
		max-width: 12ch;
	}

	.pao-testa-sezione {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--pao-space-9);
		align-items: end;
	}

	.pao-hero__top {
		grid-template-columns: 1.05fr 0.95fr;
	}

	.pao-hero__lede {
		font-size: 19px;
	}

	.pao-tappe {
		grid-template-columns: repeat(4, 1fr);
	}

	.pao-tappa {
		min-height: 360px;
	}

	.pao-report__inner {
		grid-template-columns: 1.15fr 1fr;
		gap: 80px;
	}

	.pao-faq__inner {
		grid-template-columns: 0.85fr 1.15fr;
		gap: var(--pao-space-9);
	}

	.pao-contatti__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--pao-space-9);
	}
}

/* L'ultima riga della citazione torna dritta e piena: e' l'accento del blocco. */
.pao-citazione__testo b {
	font-style: normal;
	font-weight: 800;
}

/* -----------------------------------------------------------------------------
 * Fluent Forms vestito col design system
 *
 * Il modulo lo genera il plugin: qui si sovrascrive solo l'aspetto, senza
 * toccare il markup. I selettori usano i NOMI dei campi (via :has) e non la
 * posizione: cosi' se il cliente riordina i campi dall'editor, il layout
 * regge lo stesso.
 * -------------------------------------------------------------------------- */

.pao-form .ff-el-group {
	margin-bottom: var(--pao-space-4);
}

.pao-form .ff-el-input--label label {
	font-family: var(--pao-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--pao-primary);
}

.pao-form .ff-el-form-control {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--pao-border-strong);
	border-radius: var(--pao-radius-sm);
	background-color: var(--pao-bg);
	font-family: var(--pao-font-body);
	font-size: 15px;
	color: var(--pao-body);
	transition:
		border-color var(--pao-dur-fast) var(--pao-ease-out),
		box-shadow var(--pao-dur-fast) var(--pao-ease-out);
}

.pao-form .ff-el-form-control::placeholder {
	color: var(--pao-muted);
}

.pao-form .ff-el-form-control:focus {
	outline: none;
	border-color: var(--pao-primary);
	box-shadow: var(--pao-shadow-focus);
}

.pao-form textarea.ff-el-form-control {
	min-height: 90px;
	resize: vertical;
}

/* Consenso GDPR: la riga di spunta e' testo piccolo, non un'etichetta di campo. */
.pao-form .ff-el-form-check label {
	font-size: 13px;
	line-height: 1.5;
	color: var(--pao-muted);
}

.pao-form .ff-el-form-check-input {
	accent-color: var(--pao-primary);
}

.pao-form .ff-btn-submit {
	padding: 16px 32px;
	border: 0;
	border-radius: var(--pao-radius-pill);
	background-color: var(--pao-accent);
	color: var(--pao-text-on-accent);
	font-family: var(--pao-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color var(--pao-dur-base) var(--pao-ease-out),
		transform var(--pao-dur-fast) var(--pao-ease-out);
}

.pao-form .ff-btn-submit:hover {
	background-color: var(--pao-accent-hover);
}

.pao-form .ff-btn-submit:active {
	transform: translateY(1px);
}

.pao-form .ff-el-is-error .ff-el-form-control {
	border-color: #b3261e;
}

.pao-form .error-text,
.pao-form .text-danger {
	font-size: 13px;
	color: #b3261e;
}

/* Nome e telefono affiancati, come nel design. Il :has() lega la regola al
   NOME del campo: riordinare i campi non rompe la griglia. */
@media (min-width: 640px) {

	/* La griglia va sul <fieldset>: Fluent Forms avvolge i campi li' dentro,
	   quindi i gruppi NON sono figli diretti del <form>. */
	.pao-form .frm-fluent-form fieldset {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 var(--pao-space-4);
	}

	.pao-form .frm-fluent-form fieldset > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	.pao-form .frm-fluent-form fieldset > .ff-el-group:has(input[name="nome"]),
	.pao-form .frm-fluent-form fieldset > .ff-el-group:has(input[name="telefono"]) {
		grid-column: span 1;
	}
}

/* Riga legale sotto il modulo. */
.pao-form__legale {
	margin-top: var(--pao-space-4);
	font-size: 12px;
	line-height: 1.5;
	color: var(--pao-muted);
}

.pao-form__legale a {
	font-weight: 600;
	color: var(--pao-primary);
}