/* =========================================================
   Autoscuola Montreal – foglio di stile principale
   Struttura: token → base → layout → componenti → utility
   ========================================================= */

/* ---------- Font locali (nessuna richiesta esterna) ---------- */

@font-face {
	font-family: "Barlow Semi Condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/barlow-semi-condensed-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Barlow Semi Condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/barlow-semi-condensed-600-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Barlow Semi Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/barlow-semi-condensed-700-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Barlow Semi Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/barlow-semi-condensed-700-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-var-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Token ---------- */

:root {
	--brand-blue: #0049AC;
	--brand-blue-dark: #054A96;
	--brand-yellow: #FEE606;
	--brand-gold: #F8CE06;
	--ink: #071A33;
	--white: #FFFFFF;
	--off-white: #F5F8FC;
	--muted: #66758A;

	--hairline: #DCE4EF;
	--ink-soft: #1B3457;
	--blue-wash: #EDF3FC;
	--focus: #0049AC;

	--font-display: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 18px;

	--shadow-sm: 0 1px 2px rgba(7, 26, 51, .06), 0 2px 8px rgba(7, 26, 51, .05);
	--shadow-md: 0 6px 24px rgba(7, 26, 51, .10);

	--wrap: 1200px;
	--gutter: clamp(1rem, 5vw, 2.5rem);
	--header-h: 128px;

	--safe-l: env(safe-area-inset-left, 0px);
	--safe-r: env(safe-area-inset-right, 0px);
	--safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---------- Base ---------- */

body {
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
}

/* clip, non hidden: "hidden" sul body viene propagato al viewport,
   il body smette di ritagliare e position: sticky può rompersi. */
html {
	overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.005em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.125rem, 1.4rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
h4 { font-size: 1.1875rem; }

p { margin: 0 0 1em; }

p, li { max-width: 68ch; }

a { color: var(--brand-blue); text-underline-offset: .18em; }
a:hover { color: var(--brand-blue-dark); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
	border-radius: 4px;
}

.has-dark-surface :where(a, button, summary):focus-visible {
	outline-color: var(--brand-yellow);
}

img { display: block; }

hr { border: 0; border-top: 1px solid var(--hairline); margin: 2rem 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -100px;
	z-index: 200;
	background: var(--brand-yellow);
	color: var(--ink);
	font-weight: 700;
	padding: .75rem 1.25rem;
	border-radius: 0 0 var(--radius) var(--radius);
	transition: top .15s ease;
}

.skip-link:focus { top: 0; }

/* ---------- Layout ---------- */

.wrap {
	width: min(var(--wrap), 100%);
	margin-inline: auto;
	padding-inline: max(var(--gutter), var(--safe-l)) max(var(--gutter), var(--safe-r));
}

.wrap--narrow { width: min(820px, 100%); }

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section--wash { background: var(--off-white); }

/* Quando la pagina si apre con una fascia a tutta larghezza, lo stacco
   dalla testata lo dà la fascia stessa. */
.section--flush { padding-top: 0; }
.section--flush .entry-content > .bleed:first-child { margin-top: 0; }
.section--blue {
	background: var(--brand-blue);
	color: #fff;
}

.section--blue h1, .section--blue h2, .section--blue h3 { color: #fff; }
.section--blue a:not(.btn) { color: var(--brand-yellow); }

.section__head { max-width: 62ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.section__head p { color: var(--muted); font-size: 1.125rem; }
.section--blue .section__head p { color: rgba(255, 255, 255, .82); }

.lede { font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); }

.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1000px) {
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.grid--4,
	.grid--3,
	.grid--2 { grid-template-columns: 1fr; }
}

/* ---------- Pulsanti ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 48px;
	padding: .8rem 1.4rem;
	border: 2px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
	background: var(--brand-yellow);
	border-color: var(--brand-yellow);
	color: var(--ink);
}

.btn--primary:hover {
	background: var(--brand-gold);
	border-color: var(--brand-gold);
	color: var(--ink);
}

.btn--solid {
	background: var(--brand-blue);
	border-color: var(--brand-blue);
	color: #fff;
}

.btn--solid:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); color: #fff; }

.btn--outline {
	background: transparent;
	border-color: var(--brand-blue);
	color: var(--brand-blue);
}

.btn--outline:hover { background: var(--blue-wash); color: var(--brand-blue-dark); }

.btn--ghost {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .5);
	color: #fff;
}

.btn--ghost:hover { background: rgba(255, 255, 255, .18); color: #fff; }

.btn--lg { min-height: 54px; padding: 1rem 1.75rem; font-size: 1.0625rem; }

.btn .icon { flex: none; }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
}

/* ---------- Header ---------- */

/* L'header sta SOPRA la testata, trasparente, e scorre via con la pagina.
   Non è fisso e non diventa mai una barra bianca: quella fascia occupava
   una fetta di schermo senza dare nulla in cambio. */
.site-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: 130;
	background: transparent;
	border-bottom: 0;
}

/* In home l'header è più grande del 20%: c'è una scena a tutto schermo
   dietro, e il marchio deve reggere il confronto. */
.home {
	--header-h: 154px;
}

.home .site-branding img,
.home .site-branding svg { height: 104px; }

@media (min-width: 900px) {
	.home .site-branding img,
	.home .site-branding svg { height: 128px; max-width: 580px; }
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--header-h);
}

.site-branding { flex: none; display: flex; align-items: center; }

/* Il logo si misura in ALTEZZA, non in larghezza.
   Le due versioni — a colori e per sfondi scuri — possono avere proporzioni
   diverse: misurandole in larghezza, quella più squadrata veniva schiacciata
   dal limite di altezza e appariva molto più piccola. È il motivo per cui il
   marchio risultava minuscolo in home, dove si usa la versione chiara, e
   giusto nelle pagine interne, dove si usa quella a colori.
   Con l'altezza fissa le due versioni si vedono uguali. */
.site-branding img,
.site-branding svg {
	height: 86px;
	width: auto;
	max-width: 74vw;
	object-fit: contain;
	object-position: left center;
}

@media (min-width: 900px) {
	.site-branding img,
	.site-branding svg {
		height: 106px;
		max-width: 500px;
	}
}

.site-branding .site-title {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	line-height: 1;
}

.site-header .site-title { color: #fff; }

/* Sopra la hero scura il logo a colori può risultare poco leggibile.
   Se è stato caricato un logo per sfondi scuri, si mostra quello;
   altrimenti resta il logo normale, senza filtri che ne alterino i colori. */
.site-branding .logo--light { display: none; }

.site-header .has-light-logo .logo--light { display: block; }
.site-header .has-light-logo .logo--dark { display: none; }

.primary-nav { margin-inline-start: auto; }

.primary-nav > ul {
	display: flex;
	align-items: center;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav li { max-width: none; position: relative; }

.primary-nav a {
	display: block;
	padding: .6rem .65rem;
	font-size: .9375rem;
	font-weight: 550;
	color: var(--ink);
	text-decoration: none;
	border-radius: var(--radius-sm);
	white-space: nowrap;
}

.site-header .primary-nav a { color: #fff; }

.primary-nav a:hover { background: var(--blue-wash); color: var(--brand-blue); }
.site-header .primary-nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* Voce attiva: filetto giallo, non solo colore */
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a,
.primary-nav .current-menu-ancestor > a {
	box-shadow: inset 0 -3px 0 var(--brand-yellow);
	color: var(--brand-blue);
}

.site-header .primary-nav .current-menu-item > a { color: #fff; }

.primary-nav .menu-item-has-children > a { padding-inline-end: 1.5rem; }

.primary-nav .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	inset-inline-end: .5rem;
	top: 50%;
	width: 8px; height: 8px;
	margin-top: -5px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .7;
}

.primary-nav .sub-menu {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + .35rem);
	min-width: 250px;
	margin: 0;
	padding: .4rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu,
.primary-nav .menu-item-has-children.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-nav .sub-menu a {
	color: var(--ink);
	padding: .55rem .75rem;
	font-weight: 500;
	font-size: .975rem;
	white-space: normal;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex: none;
	/* All'estremità destra: senza questo resta appiccicato al logo, perché
	   entrambi sono elementi flex di larghezza fissa. */
	margin-inline-start: auto;
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	background: transparent;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-sm);
	color: var(--ink);
	cursor: pointer;
}

.site-header .nav-toggle {
	color: #fff;
	border-width: 2px;
	border-color: rgba(255, 255, 255, .85);
	background: rgba(4, 14, 28, .35);
}

@media (max-width: 1200px) {
	.primary-nav { display: none; }
	.nav-toggle { display: inline-flex; margin-inline-start: auto; }
	.header-actions .btn span { display: none; }
	.header-actions .btn { padding-inline: .9rem; }
}

/* ---------- Menu mobile ----------
   Stessa lingua visiva del resto del sito: fondo inchiostro come il footer
   e la testata, accento giallo sulle voci, filetto giallo sulle sottovoci.
   Prima era un elenco bianco generico, che sembrava di un altro sito. */

.mobile-nav {
	position: fixed;
	inset: 0;
	/* Sopra l'header (130) e sopra la barra dei contatti (80): quando il
	   menu è aperto nulla deve restargli davanti a intercettare i tocchi. */
	z-index: 140;
	display: none;
	background: rgba(4, 14, 28, .6);
	backdrop-filter: blur(3px);
}

.mobile-nav[open],
.mobile-nav.is-open { display: block; }

/* Il pannello sta sopra lo sfondo scuro e riceve i tocchi. */
.mobile-nav__panel { position: absolute; z-index: 1; }

.mobile-nav__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(440px, 94vw);
	background: var(--ink);
	color: #fff;
	padding: 1rem max(1.25rem, var(--safe-r)) calc(1.5rem + 72px + var(--safe-b));
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	animation: am-slide-in .22s ease;
}

@keyframes am-slide-in {
	from { transform: translateX(18px); opacity: .4; }
	to { transform: translateX(0); opacity: 1; }
}

.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: var(--header-h);
}

.mobile-nav__close {
	width: 48px; height: 48px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--radius-sm);
	color: #fff;
	cursor: pointer;
}

.mobile-nav__close:hover { background: rgba(255, 255, 255, .2); }

.mobile-nav ul { list-style: none; margin: 0; padding: 0; }

.mobile-nav li {
	max-width: none;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.mobile-nav > nav > ul > li:last-child { border-bottom: 0; }

.mobile-nav a {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: .5rem .25rem;
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}

.mobile-nav a:hover { color: var(--brand-yellow); }

/* Voce corrente: filetto giallo, non solo colore */
.mobile-nav .current-menu-item > a,
.mobile-nav .current_page_item > a,
.mobile-nav .current-menu-ancestor > a { color: var(--brand-yellow); }

/* Sottovoci: rientrate e legate da un filetto giallo */
.mobile-nav .sub-menu {
	position: relative;
	margin: 0 0 .5rem;
	padding-inline-start: 1rem;
	border-top: 0;
}

.mobile-nav .sub-menu::before {
	content: "";
	position: absolute;
	inset-block: .3rem;
	inset-inline-start: 0;
	width: 3px;
	border-radius: 2px;
	background: repeating-linear-gradient(to bottom, var(--brand-yellow) 0 10px, transparent 10px 18px);
}

.mobile-nav .sub-menu li { border-bottom: 0; }

.mobile-nav .sub-menu a {
	min-height: 48px;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	font-weight: 500;
	color: rgba(255, 255, 255, .82);
}

.mobile-nav .sub-menu a:hover { color: #fff; }

/* ---------- Card servizi ---------- */

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.card:hover {
	border-color: var(--brand-blue);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 14px;
	background: var(--blue-wash);
	color: var(--brand-blue);
	margin-bottom: .35rem;
}

.card:hover .card__icon { background: var(--brand-yellow); color: var(--ink); }

.card h3 { margin: 0; font-size: 1.3rem; }
.card p { color: var(--muted); margin: 0; font-size: 1rem; }

.card__link {
	margin-top: auto;
	padding-top: .75rem;
	min-height: 44px;
	align-items: center;
	font-weight: 650;
	color: var(--brand-blue);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

.card__link::after { content: ""; position: absolute; inset: 0; }
.card__link:hover { text-decoration: underline; }

/* ---------- Confronto metodo (due corsie) ---------- */

.lanes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.lanes__col { padding: 1.25rem clamp(1rem, 3vw, 1.75rem) 1.75rem; }

.lanes__col + .lanes__col {
	position: relative;
	background: var(--blue-wash);
}

.lanes__col + .lanes__col::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: -1px;
	width: 4px;
	background: repeating-linear-gradient(to bottom, var(--brand-yellow) 0 16px, transparent 16px 30px);
}

.lanes__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	margin: .5rem 0 1rem;
}

.lanes__col:first-child .lanes__title { color: var(--muted); }
.lanes__col + .lanes__col .lanes__title { color: var(--brand-blue); }

.lanes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }

.lanes li {
	max-width: none;
	padding: .8rem 0;
	border-top: 1px solid var(--hairline);
	font-size: 1.0625rem;
}

.lanes li:first-child { border-top: 0; }
.lanes__col + .lanes__col li { font-weight: 600; }

@media (max-width: 720px) {
	.lanes { grid-template-columns: 1fr; }
	.lanes__col + .lanes__col::before {
		inset: 0 0 auto 0;
		width: auto;
		height: 4px;
		background: repeating-linear-gradient(to right, var(--brand-yellow) 0 16px, transparent 16px 30px);
	}
}

/* ---------- Elenco puntato con segno di spunta ---------- */

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }

.check-list li {
	position: relative;
	padding-inline-start: 2rem;
	max-width: 60ch;
}

.check-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .38em;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--brand-yellow);
	box-shadow: inset 0 0 0 2px var(--ink);
}

.check-list li::after {
	content: "";
	position: absolute;
	inset-inline-start: 5px;
	top: .68em;
	width: 8px; height: 4px;
	border-left: 2px solid var(--ink);
	border-bottom: 2px solid var(--ink);
	transform: rotate(-45deg);
}

.section--blue .check-list li::before { box-shadow: inset 0 0 0 2px var(--brand-blue); }
.section--blue .check-list li::after { border-color: var(--brand-blue); }

/* ---------- Media + testo ---------- */

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: center;
}

.split--reverse .split__media { order: 2; }

.split__media img,
.split__media picture {
	width: 100%;
	border-radius: var(--radius-lg);
}

.split__media img { object-fit: cover; }

@media (max-width: 860px) {
	.split { grid-template-columns: 1fr; }
	.split--reverse .split__media { order: 0; }
}

/* ---------- Video ---------- */

.video-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--ink);
}

.video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: .85rem;
	justify-items: center;
	text-align: center;
	padding: 1.5rem;
	color: #fff;
	background: linear-gradient(160deg, var(--ink-soft), var(--ink));
}

.video-fallback p { color: rgba(255, 255, 255, .85); max-width: 46ch; margin: 0; }
.video-fallback strong { font-family: var(--font-display); font-size: 1.35rem; }

/* ---------- Recensioni ---------- */

.stars { display: inline-flex; gap: 2px; color: var(--brand-gold); }
.stars__item { color: var(--hairline); }
.stars__item.is-on { color: var(--brand-gold); }
.stars__item.is-on svg { fill: currentColor; }

/* Il carrello scorre al proprio interno: senza il clip la sua area
   scorribile allarga l'intero documento e la pagina scorre in orizzontale. */
.reviews {
	position: relative;
	overflow-x: clip;
}

.reviews__track {
	display: grid;
	grid-auto-flow: column;
	/* Larghezza fissa delle colonne: con 1fr le card si comprimerebbero
	   per stare tutte nel contenitore e lo slider non scorrerebbe mai. */
	grid-auto-columns: 85%;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 1rem;
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
}

@media (min-width: 640px) {
	.reviews__track { grid-auto-columns: calc((100% - 1.25rem) / 2); }
}

@media (min-width: 900px) {
	.reviews__track { grid-auto-columns: calc((100% - 2.5rem) / 3); }
}

.review {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
}

.review__text { margin: 0; font-size: 1.0625rem; }
.review__author { margin: auto 0 0; font-weight: 650; color: var(--ink); }
.review__source { font-size: .875rem; color: var(--muted); font-weight: 400; }

.reviews__controls {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: .5rem;
}

.reviews__btn {
	width: 46px; height: 46px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: 50%;
	color: var(--brand-blue);
	cursor: pointer;
}

.reviews__btn:hover { background: var(--blue-wash); }
.reviews__btn[disabled] { opacity: .4; cursor: default; }
.reviews__btn--prev .icon { transform: rotate(180deg); }

.rating-summary {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
	font-size: .95rem;
}

.rating-summary strong { font-family: var(--font-display); font-size: 1.25rem; }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: .75rem; max-width: 860px; }

.faq__item {
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	overflow: hidden;
}

.faq__item[open] { border-color: var(--brand-blue); }

.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.05rem 1.25rem;
	font-family: var(--font-display);
	font-size: 1.1875rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q .icon { flex: none; color: var(--brand-blue); transition: transform .2s ease; }
.faq__item[open] .faq__q .icon { transform: rotate(180deg); }

.faq__a { padding: 0 1.25rem 1.25rem; }
.faq__a p:last-child { margin-bottom: 0; }

/* ---------- Blocchi informativi ---------- */

.note {
	padding: 1rem 1.25rem;
	background: var(--off-white);
	border-inline-start: 4px solid var(--brand-yellow);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: .975rem;
	color: var(--ink-soft);
}

.note p:last-child { margin-bottom: 0; }

.section--blue .note {
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .9);
}

.pill-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }

.pill {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .85rem;
	background: var(--blue-wash);
	color: var(--brand-blue-dark);
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 600;
	max-width: none;
}

.section--blue .pill { background: rgba(255, 255, 255, .14); color: #fff; }

/* ---------- Steps / procedura ---------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1rem; }

.steps li {
	counter-increment: step;
	position: relative;
	padding: 1.1rem 1.25rem 1.1rem 3.75rem;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	max-width: none;
}

.steps li::before {
	content: counter(step);
	position: absolute;
	inset-inline-start: 1.1rem;
	top: 1rem;
	width: 34px; height: 34px;
	display: grid; place-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--ink);
	background: var(--brand-yellow);
	border-radius: 9px;
}

.steps strong { display: block; font-family: var(--font-display); font-size: 1.1875rem; }

/* ---------- Promozioni ---------- */

.promo {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--hairline);
	border-top: 4px solid var(--brand-yellow);
	border-radius: var(--radius-lg);
}

.promo__meta { font-size: .875rem; color: var(--muted); }
.promo__cta { margin-top: auto; }

/* ---------- Modulo ---------- */

.form-block {
	display: grid;
	grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

@media (max-width: 900px) {
	.form-block { grid-template-columns: 1fr; }
}

.form-block__title { margin-top: 0; }
.form-block__text { color: var(--muted); }

.form-block__contacts {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: .6rem;
}

.form-block__contacts li {
	display: flex;
	align-items: center;
	gap: .75rem;
	max-width: none;
	padding: .85rem 1rem;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	font-weight: 600;
}

.form-block__contacts .icon {
	flex: none;
	width: 38px;
	height: 38px;
	padding: 8px;
	color: var(--brand-blue);
	background: var(--blue-wash);
	border-radius: 10px;
	box-sizing: border-box;
}

.form-block__contacts a { text-decoration: none; }
.form-block__contacts a:hover { text-decoration: underline; }

.am-form {
	position: relative;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: 20px;
	padding: clamp(1.4rem, 3vw, 2rem);
	box-shadow: 0 18px 44px rgba(7, 26, 51, .1);
}

/* Filetto giallo in cima: lega il modulo al resto del sito e dà uno spessore
   alla scheda, che altrimenti resta bianco su bianco. */
.am-form::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: linear-gradient(to right, var(--brand-yellow), var(--brand-gold));
	border-radius: 20px 20px 0 0;
}

.am-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.25rem;
}

@media (max-width: 620px) {
	.am-form__grid { grid-template-columns: 1fr; }
}

.am-field { margin: 0; display: grid; gap: .35rem; }
.am-field--full { grid-column: 1 / -1; }

/* Prima domanda del modulo: è quella che orienta tutta la richiesta. */
.am-field--lead {
	position: relative;
	padding: 1.1rem 1.15rem 1.15rem 1.4rem;
	background: linear-gradient(140deg, var(--blue-wash), #E4EEFB);
	border: 1px solid #C9DAF3;
	border-radius: var(--radius);
	margin-bottom: .5rem;
	overflow: hidden;
}

.am-field--lead::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: var(--brand-blue);
}

.am-field--lead label {
	font-size: 1.0625rem;
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.2;
}

.am-field label {
	font-weight: 600;
	font-size: .95rem;
}

.am-field input[type="text"],
.am-field input[type="email"],
.am-field input[type="tel"],
.am-field select,
.am-field textarea {
	width: 100%;
	min-height: 52px;
	padding: .8rem .9rem;
	font-family: inherit;
	font-size: 1rem; /* evita lo zoom automatico su iOS */
	color: var(--ink);
	background: #F7FAFE;
	border: 1.5px solid #C4D2E4;
	border-radius: 10px;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.am-field input::placeholder,
.am-field textarea::placeholder { color: #8C9BB0; }

.am-field textarea { min-height: 130px; resize: vertical; }

.am-field input:focus,
.am-field select:focus,
.am-field textarea:focus {
	border-color: var(--brand-blue);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(0, 73, 172, .12);
	outline: none;
}

.am-field [aria-invalid="true"] { border-color: #B3261E; background: #FFF7F6; }

.am-field__error:empty { display: none; }

.am-field__error {
	display: block;
	font-size: .875rem;
	font-weight: 600;
	color: #B3261E;
}

.am-field--check label {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .85rem .95rem;
	background: var(--off-white);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
	font-weight: 400;
	font-size: .95rem;
	line-height: 1.5;
	cursor: pointer;
}

.am-field--check label:hover { border-color: #C4D2E4; }

.am-field--check input {
	margin-top: .05rem;
	accent-color: var(--brand-blue);
}

.req { color: #B3261E; font-weight: 700; }

.am-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px; height: 1px;
	overflow: hidden;
}

.am-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 1.75rem 0 0;
}

@media (max-width: 620px) {
	/* Su schermo stretto il pulsante prende tutta la riga: è l'azione
	   principale della pagina, non deve stare in un angolo. */
	.am-form__actions .btn { width: 100%; }
	.am-form__actions { gap: .75rem; }
	.am-form__required { text-align: center; width: 100%; }
}

.am-form__required { font-size: .875rem; color: var(--muted); }

.am-form__status:empty { display: none; }

.notice {
	margin: 0 0 1.25rem;
	padding: .9rem 1.1rem;
	border-radius: var(--radius);
	font-weight: 600;
	max-width: none;
}

.notice--success { background: #E6F4EA; color: #10471F; border-inline-start: 4px solid #1E7B34; }
.notice--error { background: #FDECEA; color: #7A1C15; border-inline-start: 4px solid #B3261E; }

/* ---------- Mappa ---------- */

.map-embed {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--off-white);
	border: 1px solid var(--hairline);
}

.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.map-fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: .85rem;
	text-align: center;
	padding: 1.5rem;
	background:
		repeating-linear-gradient(45deg, #E9EFF8 0 12px, #F5F8FC 12px 24px);
}

.map-fallback p { max-width: 42ch; color: var(--ink-soft); margin: 0; }

/* ---------- Contatti ---------- */

.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
	padding: 1.35rem;
	background: #fff;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-lg);
}

.contact-card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.1875rem; }
.contact-card h3 .icon { color: var(--brand-blue); }
.contact-card p { margin-bottom: .35rem; }
.contact-card a { font-weight: 600; }

/* ---------- Barra CTA fissa (mobile e tablet) ---------- */

.mobile-cta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 80;
	display: flex;
	gap: .5rem;
	padding: .55rem max(.75rem, var(--safe-r)) calc(.55rem + var(--safe-b)) max(.75rem, var(--safe-l));
	background: rgba(7, 26, 51, .92);
	backdrop-filter: blur(10px);
	border-top: 1px solid rgba(255, 255, 255, .16);
	transition: transform .22s ease, opacity .22s ease;
}

.mobile-cta__btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 50px;
	border-radius: var(--radius);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border: 2px solid transparent;
}

.mobile-cta__btn--call {
	background: var(--brand-yellow);
	color: var(--ink);
	box-shadow: 0 4px 14px rgba(254, 230, 6, .22);
}

.mobile-cta__btn--call:hover { background: var(--brand-gold); color: var(--ink); }

.mobile-cta__btn--wa {
	background: #1FA855;
	color: #fff;
	box-shadow: 0 4px 14px rgba(31, 168, 85, .28);
}

.mobile-cta__btn--wa:hover { background: #17904a; color: #fff; }

/* Non deve coprire il banner cookie né i pulsanti del modulo. */
body.am-cookie-open .mobile-cta,
body.am-form-focus .mobile-cta {
	transform: translateY(110%);
	opacity: 0;
	pointer-events: none;
}

/* La barra vale su tutti gli schermi: il numero non è più nell'header,
   quindi questo è l'unico punto sempre presente in cui trovarlo. */
.mobile-cta { display: flex; }

/* Lo spazio va aggiunto dentro il footer, non al body: altrimenti sotto il
   footer scuro comparirebbe una striscia bianca. */
@media (max-width: 767.98px) {
	.site-footer .footer-bottom { padding-bottom: calc(1.25rem + 62px + var(--safe-b)); }
}

/* Su schermo largo la fascia a tutta larghezza lascerebbe un'ampia striscia
   vuota accanto ai due pulsanti: meglio una pastiglia sospesa in basso a
   destra, che si legge come un elemento voluto e non come un avanzo. */
@media (min-width: 768px) {
	.mobile-cta {
		inset-inline: auto 0;
		bottom: 1.25rem;
		inset-inline-end: max(1.25rem, var(--safe-r));
		width: auto;
		gap: .5rem;
		padding: .45rem;
		border: 1px solid rgba(255, 255, 255, .18);
		border-radius: 999px;
		box-shadow: 0 12px 34px rgba(4, 14, 28, .38);
	}

	.mobile-cta__btn {
		flex: 0 0 auto;
		min-height: 48px;
		padding-inline: 1.25rem;
		border-radius: 999px;
		font-size: .9375rem;
	}
}

@media (max-width: 767.98px) and (orientation: landscape) {
	.mobile-cta__btn { min-height: 44px; font-size: .9375rem; }
	.site-footer .footer-bottom { padding-bottom: calc(1.25rem + 56px + var(--safe-b)); }
}

/* ---------- Footer ---------- */

.site-footer {
	background: var(--ink);
	color: rgba(255, 255, 255, .78);
	padding-block: clamp(2.5rem, 6vw, 4rem) 0;
}

.site-footer h2, .site-footer h3 { color: #fff; font-size: 1.0625rem; letter-spacing: .01em; }
.site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.site-footer a:hover { color: var(--brand-yellow); text-decoration: underline; }

.footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: clamp(1.5rem, 4vw, 3rem);
}

@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer li { max-width: none; }
.site-footer p { color: rgba(255, 255, 255, .72); }

.footer-brand img,
.footer-brand svg {
	height: 66px;
	width: auto;
	max-width: 300px;
	object-fit: contain;
	object-position: left center;
	margin-bottom: .9rem;
}
.footer-brand .site-title { color: #fff; font-family: var(--font-display); font-size: 1.4rem; }

.footer-social { display: flex; gap: .5rem; margin-top: 1rem; }

.footer-social a {
	width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
}

.footer-bottom {
	margin-top: clamp(2rem, 5vw, 3rem);
	padding-block: 1.25rem calc(1.25rem + var(--safe-b));
	border-top: 1px solid rgba(255, 255, 255, .16);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.25rem;
	align-items: center;
	justify-content: space-between;
	font-size: .875rem;
}

.footer-bottom ul { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }

.link-button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: rgba(255, 255, 255, .82);
	text-decoration: underline;
	cursor: pointer;
}

.link-button:hover { color: var(--brand-yellow); }

/* ---------- Breadcrumb ---------- */

.breadcrumbs { font-size: .875rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.breadcrumbs li { max-width: none; display: flex; gap: .35rem; }
.breadcrumbs li + li::before { content: "›"; color: var(--hairline); }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

@media (max-width: 600px) {
	/* Su schermo stretto il nome della pagina raddoppia la riga e ripete
	   il titolo H1 che sta subito sotto: lo accorciamo. */
	.breadcrumbs ol { flex-wrap: nowrap; }

	.breadcrumbs [aria-current="page"] {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 55vw;
	}
}

/* ---------- Hero delle sottopagine ---------- */

.page-hero {
	position: relative;
	background: linear-gradient(140deg, var(--brand-blue-dark), var(--brand-blue) 62%, #0057CC);
	color: #fff;
	padding-block: clamp(1.75rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4rem);
	isolation: isolate;
}

.has-transparent-header .page-hero {
	padding-top: calc(var(--header-h) + clamp(1.75rem, 4vw, 3rem));
}

/* --- Immagine: sfondo su desktop, blocco in alto su smartphone ---
   Un solo elemento immagine per entrambi: cambia solo il modo in cui è
   posizionato, così il browser scarica un file solo. */

.page-hero--cover { padding-block: 0 0; overflow: hidden; }

.page-hero__bg { position: relative; }

.page-hero__bg img,
.page-hero__bg picture {
	display: block;
	width: 100%;
	/* Il <picture> deve avere anche lui l'altezza piena: senza, il
	   height: 100% dell'immagine si misura su un contenitore di altezza
	   automatica, quindi non si applica. L'immagine restava alle sue
	   proporzioni naturali, sbordava dal riquadro e copriva la prima riga
	   del titolo. */
	height: 100%;
}



/* SMARTPHONE — la fotografia sta sopra, il testo sotto. In verticale la
   sfumatura necessaria a leggere il titolo coprirebbe l'immagine. */
@media (max-width: 899.98px) {
	/* Fondo verticale: la sfumatura sotto la foto finisce esattamente nel
	   colore che trova. Con il fondo in diagonale della versione precedente
	   il blu della dissolvenza e quello della sezione non coincidevano, e si
	   vedeva la giunta. */
	.page-hero--cover {
		/* Il fondo resta blu scuro fino alla base della fotografia e comincia
		   a schiarire solo da lì: è l'unico modo perché il colore in cui
		   muore la dissolvenza e quello della sezione coincidano al pixel. */
		background: linear-gradient(
			to bottom,
			var(--brand-blue-dark) max(46svh, 260px),
			#0057CC
		);
	}

	.page-hero--cover .page-hero__bg {
		position: relative;
		height: 46svh;
		min-height: 260px;
	}


	/* L'header trasparente scorre sopra la fotografia: qui lo spazio in alto
	   non serve, perché il testo comincia sotto l'immagine. */
	.has-transparent-header .page-hero--cover { padding-top: 0; }

	.page-hero--cover .page-hero__bg img {
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.page-hero--cover .page-hero__scrim { display: none; }

	.page-hero--cover .page-hero__inner {
		padding-block: clamp(1.5rem, 5vw, 2.25rem) clamp(2rem, 6vw, 3rem);
	}
}

/* DESKTOP — l'immagine torna a tutta larghezza con il testo sopra. */
@media (min-width: 900px) {
	.page-hero--cover {
		display: flex;
		align-items: center;
		min-height: min(74svh, 660px);
		padding-block: calc(var(--header-h) * .25) 0;
		isolation: isolate;
	}

	.page-hero--cover .page-hero__bg {
		position: absolute;
		inset: 0;
		z-index: -2;
	}

	.page-hero--cover .page-hero__bg img {
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	.page-hero--cover .page-hero__scrim {
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			linear-gradient(100deg, rgba(4, 14, 28, .94) 0%, rgba(4, 14, 28, .86) 32%, rgba(4, 14, 28, .5) 54%, rgba(4, 14, 28, .14) 74%, rgba(4, 14, 28, .34) 100%),
			linear-gradient(to top, rgba(4, 14, 28, .55), transparent 46%);
	}

	.page-hero--cover .page-hero__text { max-width: 640px; }
}

/* --- Contenuti della testata --- */

.page-hero__inner { display: grid; gap: 1.5rem; width: 100%; }

/* Il breadcrumb sta su fondo scuro: senza queste regole eredita
   il colore del testo su bianco e diventa illeggibile. */
.page-hero .breadcrumbs { color: rgba(255, 255, 255, .72); }
.page-hero .breadcrumbs a { color: rgba(255, 255, 255, .88); }
.page-hero .breadcrumbs [aria-current="page"] { color: #fff; }
.page-hero .breadcrumbs li + li::before { color: rgba(255, 255, 255, .45); }

/* Su una landing il percorso di navigazione è una via d'uscita in più. */
.is-landing .breadcrumbs { display: none; }

.page-hero h1 {
	color: #fff;
	margin: 0 0 .6rem;
	font-size: clamp(2rem, 1.25rem + 3vw, 3.35rem);
	line-height: 1.04;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}

.page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .9rem;
	padding: .35rem .85rem;
	background: rgba(254, 230, 6, .16);
	border: 1px solid rgba(254, 230, 6, .5);
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 600;
	max-width: none;
}

.page-hero__lede {
	font-size: clamp(1.0625rem, 1rem + .45vw, 1.3rem);
	color: rgba(255, 255, 255, .92);
	max-width: 52ch;
	margin: 0;
}

.page-hero__cta { margin-top: 1.75rem; }

.page-hero__rating {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 1.25rem 0 0;
	font-size: .9375rem;
	color: rgba(255, 255, 255, .88);
}

.page-hero__rating strong { font-family: var(--font-display); font-size: 1.1875rem; color: #fff; }

/* --- Variante con video: resta a due colonne --- */

.page-hero__media img,
.page-hero__media picture {
	width: 100%;
	border-radius: var(--radius-lg);
	display: block;
}

.page-hero__media img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	box-shadow: 0 18px 44px rgba(4, 14, 28, .32);
}

@media (max-width: 899.98px) {
	/* Su schermo stretto l'immagine sta sotto il testo, non dietro: dietro
	   servirebbe una sfumatura così scura da farla sparire. */
	.page-hero__media img { aspect-ratio: 16 / 10; }
}

@media (min-width: 900px) {
	.page-hero--media .page-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
		gap: clamp(2rem, 5vw, 4rem);
		align-items: center;
	}
}

/* ---------- Landing page ---------- */

.site-header--landing { box-shadow: none; }
.site-header--landing .header-inner { justify-content: space-between; }
.is-landing .page-hero { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

.site-footer--landing { padding-block: clamp(2rem, 5vw, 3rem) 0; }

.landing-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	font-size: .9375rem;
}

.landing-footer p { margin: 0 0 .3rem; }
.landing-footer__name { font-family: var(--font-display); font-size: 1.125rem; color: #fff; }

.landing-footer__legal {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.25rem;
	margin: 0;
	padding: 0;
}

.landing-footer__legal li { max-width: none; }

.landing-footer__copy {
	margin: 1.5rem 0 0;
	padding-block: 1.25rem calc(1.25rem + var(--safe-b));
	border-top: 1px solid rgba(255, 255, 255, .16);
	font-size: .875rem;
}

@media (max-width: 767.98px) {
	.landing-footer__copy { padding-bottom: calc(1.25rem + 62px + var(--safe-b)); }
}

/* ---------- Contenuto editoriale ---------- */

.entry-content > * { margin-block: 0 1.25rem; }
.entry-content > h2 { margin-top: 2.5rem; }
.entry-content > h3 { margin-top: 1.75rem; }
.entry-content ul, .entry-content ol { padding-inline-start: 1.35rem; }
.entry-content li { margin-bottom: .4rem; }

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}

.entry-content th, .entry-content td {
	padding: .75rem .85rem;
	border: 1px solid var(--hairline);
	text-align: start;
}

.entry-content thead th { background: var(--off-white); font-family: var(--font-display); }

@media (max-width: 600px) {
	.entry-content table,
	.entry-content thead,
	.entry-content tbody,
	.entry-content tr,
	.entry-content th,
	.entry-content td { display: block; width: 100%; }

	.entry-content thead { display: none; }

	.entry-content tr {
		margin-bottom: 1rem;
		border: 1px solid var(--hairline);
		border-radius: var(--radius);
		overflow: hidden;
	}

	.entry-content td { border: 0; border-bottom: 1px solid var(--hairline); }
	.entry-content tr td:last-child { border-bottom: 0; }
}

/* ---------- Cookie banner ---------- */

.cookie-banner {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 150;
	background: #fff;
	border-top: 3px solid var(--brand-yellow);
	box-shadow: 0 -8px 32px rgba(7, 26, 51, .18);
	padding: clamp(1rem, 3vw, 1.5rem) 0 calc(clamp(1rem, 3vw, 1.5rem) + var(--safe-b));
}

.cookie-banner[hidden] { display: none; }

.cookie-banner__inner { display: grid; gap: 1rem; }

.cookie-banner__title { margin: 0; font-size: 1.375rem; }
.cookie-banner__text { margin: 0; font-size: .975rem; color: var(--ink-soft); max-width: 80ch; }

.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: .65rem; }

/* Rifiutare deve essere semplice quanto accettare */
.cookie-banner__actions .btn { flex: 1 1 200px; }

.cookie-prefs { display: grid; gap: .75rem; margin: 0; padding: 0; border: 0; }
.cookie-prefs[hidden] { display: none; }

.cookie-prefs__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .35rem .75rem;
	align-items: start;
	padding: .9rem 1rem;
	background: var(--off-white);
	border: 1px solid var(--hairline);
	border-radius: var(--radius);
}

.cookie-prefs__item input {
	margin: .1rem 0 0;
	accent-color: var(--brand-blue);
}

.cookie-prefs__item label { font-weight: 650; }
.cookie-prefs__item p { grid-column: 2; margin: 0; font-size: .9rem; color: var(--muted); }

/* ---------- Dimensione dei touch target ----------
   WCAG 2.2 AA (2.5.8) chiede almeno 24x24 px. Sotto i 768 px alziamo
   i bersagli isolati a 44 px, la soglia raccomandata da Apple e Android. */

@media (max-width: 767.98px) {

	.site-footer ul a,
	.site-footer .footer-bottom ul a,
	.link-button,
	.contact-card a,
	.form-block__contacts a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	.site-footer ul { gap: .15rem; }

	.breadcrumbs a,
	.breadcrumbs [aria-current="page"] {
		display: inline-flex;
		align-items: center;
		min-height: 32px;
	}

	.card__link { min-height: 44px; }
}

/* I riquadri di spunta restano toccabili anche su schermi piccoli. */
.am-field--check input,
.cookie-prefs__item input {
	width: 24px;
	height: 24px;
	flex: none;
}


/* ---------- Porta un amico ----------
   La pagina alterna fasce a tutta larghezza con fondi diversi: è la variazione
   di sfondo, scala e sovrapposizione a dare profondità, non gli effetti.
   Il tratteggio del buono riprende la segnaletica orizzontale, lo stesso
   motivo usato nel confronto fra i due metodi in homepage. */

/* Le fasce stanno già fuori dal contenitore stretto (vedi page.php):
   non serve alcun trucco con 100vw, che con la barra di scorrimento
   visibile fa sbordare la pagina di qualche pixel. */
.bleed { width: auto; margin-inline: 0; }

/* Nelle pagine a fasce, il resto del contenuto ritrova il suo contenitore. */
.entry-content--bands > *:not(.bleed) {
	width: min(var(--wrap), 100%);
	margin-inline: auto;
	padding-inline: max(var(--gutter), var(--safe-l)) max(var(--gutter), var(--safe-r));
}

.entry-content--bands > .form-block {
	width: min(var(--wrap), 100%);
	margin-inline: auto;
	margin-block: clamp(3rem, 7vw, 5rem);
}

.band { position: relative; }

.band__inner {
	width: min(var(--wrap), 100%);
	margin-inline: auto;
	padding-inline: max(var(--gutter), var(--safe-l)) max(var(--gutter), var(--safe-r));
}

.band__title {
	font-size: clamp(1.65rem, 1.25rem + 1.8vw, 2.4rem);
	margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}

/* --- Fascia del buono: sale sopra la testata --- */

.band--wash {
	background: var(--off-white);
	padding-block: 0 clamp(2.5rem, 6vw, 4rem);
}

.referral-coupon .band__inner {
	display: grid;
	gap: clamp(1.75rem, 4vw, 2.75rem);
}

.coupon {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	margin-top: clamp(-3.5rem, -6vw, -2rem);
	background: #fff;
	color: var(--ink);
	border-radius: 20px;
	box-shadow: 0 26px 60px rgba(4, 14, 28, .28);
	overflow: hidden;
}

.coupon__main {
	position: relative;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background: linear-gradient(140deg, var(--brand-yellow), var(--brand-gold));
	overflow: hidden;
}

/* Riflesso diagonale: rompe la campitura piatta del giallo. */
.coupon__main::after {
	content: "";
	position: absolute;
	inset-inline-end: -30%;
	top: -60%;
	width: 70%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, .34);
	pointer-events: none;
}

.coupon__label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0 0 .5rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(7, 26, 51, .66);
	max-width: none;
}

.coupon__value {
	position: relative;
	margin: 0 0 .55rem;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: .98;
	font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);
	color: var(--ink);
	text-wrap: balance;
}

.coupon__note { position: relative; margin: 0; font-size: .95rem; color: rgba(7, 26, 51, .74); }

.coupon__stub {
	position: relative;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .35rem;
}

/* Linea di strappo tratteggiata. */
.coupon__stub::before {
	content: "";
	position: absolute;
	inset-block: 1.5rem;
	inset-inline-start: 0;
	width: 3px;
	background: repeating-linear-gradient(to bottom, rgba(7, 26, 51, .26) 0 8px, transparent 8px 16px);
}

.coupon__or {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .8125rem;
	color: var(--muted);
	max-width: none;
}

.coupon__alt {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem);
	line-height: 1.1;
	color: var(--brand-blue);
	max-width: none;
}

.coupon__alt .icon { flex: none; color: var(--brand-blue); }

@media (max-width: 720px) {
	.coupon { grid-template-columns: 1fr; }

	.coupon__stub::before {
		inset: 0 1.5rem auto 1.5rem;
		width: auto;
		height: 3px;
		background: repeating-linear-gradient(to right, rgba(7, 26, 51, .26) 0 8px, transparent 8px 16px);
	}
}

/* Condizioni su fondo chiaro: nella fascia dei passaggi il testo è scuro. */
.referral__terms--chiaro {
	margin-top: clamp(2rem, 5vw, 3rem);
	border-top-color: var(--hairline);
	color: var(--muted);
}

.referral__terms--chiaro summary { color: var(--ink); }

.referral__terms--chiaro summary::before {
	border-right-color: var(--brand-blue);
	border-bottom-color: var(--brand-blue);
}

.referral-doppio {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--brand-yellow);
	color: var(--ink);
	border-radius: var(--radius);
	max-width: none;
	font-size: 1.0625rem;
	box-shadow: 0 8px 22px rgba(254, 230, 6, .3);
}

.referral-doppio .icon { flex: none; color: var(--ink); }
.referral-doppio strong { font-family: var(--font-display); font-size: 1.15rem; }

@media (max-width: 560px) {
	.referral-doppio { align-items: flex-start; font-size: 1rem; }
}

.referral-intro { max-width: 62ch; }
.referral-intro h2 { margin: 0 0 .5rem; font-size: clamp(1.65rem, 1.25rem + 1.8vw, 2.4rem); }
.referral-intro .lede { margin: 0; color: var(--muted); font-size: clamp(1.0625rem, 1rem + .4vw, 1.2rem); }

/* --- Fascia dei passaggi: quattro tappe su una linea --- */

.band--steps { background: #fff; padding-block: clamp(3rem, 7vw, 5rem); }

.track {
	position: relative;
	list-style: none;
	counter-reset: tr;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 860px) {
	.track { grid-template-columns: repeat(4, 1fr); }

	/* La linea collega i quattro cerchi, e passa dietro. */
	.track::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 31px;
		inset-inline: 12.5%;
		height: 2px;
		background: repeating-linear-gradient(to right, var(--hairline) 0 8px, transparent 8px 16px);
	}
}

.track__step {
	position: relative;
	counter-increment: tr;
	padding-inline-start: 4.75rem;
	max-width: none;
}

@media (min-width: 860px) {
	.track__step { padding: 0; text-align: center; }
}

.track__dot {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	z-index: 1;
	width: 62px;
	height: 62px;
	display: grid;
	place-content: center;
	background: var(--brand-yellow);
	color: var(--ink);
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(254, 230, 6, .38);
}

.track__dot::after {
	content: counter(tr);
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: -6px;
	width: 26px;
	height: 26px;
	display: grid;
	place-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .9375rem;
	color: #fff;
	background: var(--brand-blue);
	border: 3px solid #fff;
	border-radius: 50%;
}

@media (min-width: 860px) {
	.track__dot { position: static; margin: 0 auto 1rem; }
	.track__dot::after { inset-inline-end: calc(50% - 45px); inset-block-start: 0; }
}

.track__step strong {
	display: block;
	font-family: var(--font-display);
	font-size: 1.3rem;
	line-height: 1.15;
	margin-bottom: .25rem;
}

.track__text { color: var(--muted); }

/* --- Fascia della prova sociale --- */

.band--proof {
	background:
		radial-gradient(120% 100% at 85% 0%, rgba(0, 87, 204, .9), transparent 60%),
		linear-gradient(155deg, #043771, var(--brand-blue) 60%, #003C90);
	color: #fff;
	padding-block: clamp(3rem, 7vw, 5rem);
}

.band--proof .band__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 900px) {
	.band--proof .band__inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

.proof {
	margin: 0;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 18px;
	backdrop-filter: blur(6px);
}

.proof blockquote {
	margin: .85rem 0 1rem;
	padding: 0;
	border: 0;
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
	line-height: 1.25;
	color: #fff;
}

.proof figcaption { font-weight: 650; color: #fff; }
.proof figcaption span { display: block; font-weight: 400; font-size: .875rem; color: rgba(255, 255, 255, .7); }

.proof__cta h2 { color: #fff; margin: 0 0 .5rem; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); }
.proof__cta p { color: rgba(255, 255, 255, .88); }
.proof__cta .btn-row { margin-top: 1.5rem; }

.referral__terms {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .2);
	font-size: .9375rem;
	color: rgba(255, 255, 255, .8);
}

.referral__terms summary {
	cursor: pointer;
	font-weight: 650;
	color: #fff;
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: .5rem;
	list-style: none;
}

.referral__terms summary::-webkit-details-marker { display: none; }

.referral__terms summary::before {
	content: "";
	width: 9px; height: 9px;
	border-right: 2px solid var(--brand-yellow);
	border-bottom: 2px solid var(--brand-yellow);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s ease;
}

.referral__terms[open] summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.referral__terms p { margin: .5rem 0 0; max-width: 78ch; }

/* ---------- Richiamo "Porta un amico" in homepage ---------- */

.referral-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1.25rem, 4vw, 2.5rem);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: linear-gradient(150deg, var(--brand-blue-dark), var(--brand-blue) 70%);
	border-radius: var(--radius-lg);
	color: #fff;
}

.referral-band h2 { color: #fff; margin: 0 0 .4rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.referral-band p { color: rgba(255, 255, 255, .88); margin: 0; }

.referral-band__doppio {
	margin: .9rem 0 0;
	padding: .5rem .9rem;
	display: inline-block;
	background: var(--brand-yellow);
	color: var(--ink);
	border-radius: 999px;
	font-size: .9375rem;
	max-width: none;
}

.referral-band__rewards {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.1rem 0 0;
	padding: 0;
}

.referral-band__rewards li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .9rem;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: 999px;
	font-weight: 600;
	font-size: .95rem;
	max-width: none;
}

.referral-band__rewards .icon { color: var(--brand-yellow); }
.referral-band__cta { margin: 0; }

@media (max-width: 780px) {
	.referral-band { grid-template-columns: 1fr; }
	.referral-band__cta .btn { width: 100%; }
}

/* ---------- Video nella testata ---------- */

.page-hero__media--video .video-embed,
.header-video {
	width: 100%;
	border-radius: var(--radius-lg);
	box-shadow: 0 18px 44px rgba(4, 14, 28, .32);
}

.header-video {
	display: block;
	aspect-ratio: 16 / 9;
	background: #000;
	object-fit: cover;
}

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

	.btn:hover,
	.card:hover { transform: none; }
}

/* ---------- Stampa ---------- */

@media print {
	.site-header, .site-footer, .mobile-cta, .cookie-banner, .am-form { display: none !important; }
}