/* =========================================================================
   Homepage CralNetwork — template di pagina dedicato
   ========================================================================= */

.cral-home {
	--cral-arancione: #f2761e;
	--cral-arancione-scuro: #d9640f;
	--cral-arancione-chiaro: #fff1e6;
	--cral-testo: #1a1a1a;
	--cral-testo-muted: #6b7280;
	--cral-bordo: #e9e6e2;
	--cral-sfondo-card: #ffffff;
	--cral-sfondo-pagina: #fdfaf7;
	--cral-sfondo-sezione: #f8f0e4;
	--cral-ombra: 0 4px 16px rgba( 20, 20, 20, 0.06 );
	--cral-ombra-forte: 0 14px 34px rgba( 20, 20, 20, 0.14 );
	--cral-raggio: 20px;
	--cral-raggio-piccolo: 12px;
	--cral-blu-scuro: #0e2f3d;
	--cral-blu-scuro-2: #123c4e;
	--cral-teal: #0d6b78;

	/*
	 * La colonna del sito: larghezza massima e margini laterali. Tutte le
	 * sezioni si allineano a questi due valori, che si cambiano qui e
	 * cambiano ovunque.
	 */
	--cral-colonna: 1200px;
	--cral-colonna-lato: 24px;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var( --cral-testo );
	background: var( --cral-sfondo-pagina );
	line-height: 1.6;
}

.cral-home * {
	box-sizing: border-box;
}

.cral-home a {
	color: inherit;
}

.cral-home img {
	max-width: 100%;
	display: block;
}

/*
 * La colonna del sito sta qui, e solo qui.
 *
 * L'elemento resta largo quanto lo schermo — così il suo sfondo (panna,
 * bianco, turchese) arriva da bordo a bordo — mentre il contenuto si
 * ferma dentro una colonna centrata di --cral-colonna. Il margine
 * laterale non scende mai sotto --cral-colonna-lato, nemmeno sul
 * telefono.
 *
 * Le sezioni mettono lo spazio sopra e sotto con "padding-block": la
 * forma abbreviata ("padding: 104px 0") cancellerebbe questi margini.
 */
.cral-home-largo {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	padding-inline: max( var( --cral-colonna-lato ), ( 100% - var( --cral-colonna ) ) / 2 );
}

.cral-home-sezione {
	padding-block: 104px;
	background: var( --cral-sfondo-sezione );
}

/* Alternata a mano, sezione per sezione, nel template: crea uno stacco
   visivo netto tra i blocchi (crema/bianco) senza toccare i colori del
   brand — la crema è solo una tinta più chiara dell'arancione. */
.cral-home-sezione-bianca {
	background: #ffffff;
}

.cral-home-intestazione-sezione {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 48px;
}

.cral-home-intestazione-sezione h2 {
	font-size: 2rem;
	font-weight: 800;
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}

.cral-home-intestazione-sezione p {
	margin: 0;
	color: var( --cral-testo-muted );
}

/* --- Barra di navigazione ------------------------------------------------ */

.cral-home-nav {
	background: #fff;
	border-bottom: 1px solid var( --cral-bordo );
	position: sticky;
	top: 0;
	z-index: 100;
}

.cral-home-nav-riga {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* Solo sopra e sotto: i lati li dà la colonna, come a ogni altra sezione. */
	padding-block: 14px;
}

.cral-home-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 1.15rem;
	text-decoration: none;
	flex-shrink: 0;
}

.cral-home-logo-immagine {
	height: 40px;
	width: auto;
	display: block;
}

.cral-home-logo-badge {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --cral-arancione ), var( --cral-teal ) );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	font-weight: 800;
	flex-shrink: 0;
}

.cral-home-menu {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.cral-home-menu a {
	text-decoration: none;
	font-size: 0.92rem;
	font-weight: 600;
	color: #444;
	white-space: nowrap;
}

.cral-home-menu a:hover {
	color: var( --cral-arancione );
}

.cral-home-nav-destra {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

/* Selettore "a.cral-home-pulsante" (non solo ".cral-home-pulsante"):
   serve pari specificità della regola generica ".cral-home a { color:
   inherit; }" più in alto nel file, altrimenti quella vince e il testo
   dei pulsanti eredita il colore scuro del testo circostante invece del
   bianco previsto (bug reale riscontrato sul pulsante "Contattaci"). */
a.cral-home-pulsante {
	display: inline-block;
	background: var( --cral-arancione );
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 10px 22px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

a.cral-home-pulsante:hover {
	background: var( --cral-arancione-scuro );
	color: #fff;
}

/*
 * Lo stesso pulsante può essere un <button> (moduli) invece di un link:
 * la regola qui sopra vale solo per gli <a>, quindi il testo bianco va
 * garantito anche qui. Un pulsante arancione ha sempre scritte bianche.
 */
button.cral-home-pulsante,
button.cral-home-pulsante:hover,
input[type="submit"].cral-home-pulsante,
.cral-home-pulsante:visited {
	background: var( --cral-arancione );
	color: #fff;
}

button.cral-home-pulsante:hover,
input[type="submit"].cral-home-pulsante:hover {
	background: var( --cral-arancione-scuro );
}

.cral-home-pulsante-outline {
	background: transparent;
	border: 1.5px solid #fff;
	color: #fff;
}

.cral-home-pulsante-outline:hover {
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
}

.cral-home-menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 9px;
	/* Area di tocco di almeno 44px, come consigliato per dita e touch screen. */
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}

.cral-home-menu-toggle svg {
	width: 26px;
	height: 26px;
}

/* --- Hero ------------------------------------------------------------------ */

.cral-home-hero {
	padding-block: 72px 56px;
	text-align: center;
	background: var( --cral-teal );
}

.cral-home-hero-titolo {
	font-size: 3rem;
	font-weight: 800;
	margin: 0 0 16px;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: #fff;
}

.cral-home-hero-sottotitolo {
	font-size: 1.15rem;
	color: rgba( 255, 255, 255, 0.85 );
	margin: 0 0 36px;
}

.cral-home-hero-ricerca {
	max-width: 900px;
	margin: 0 auto;
	text-align: left;
}

.cral-home-popolari-fascia {
	padding-block: 28px 0;
}

/* Blocco di ricerca in stile "cartellina" (come eDreams): le tab delle
   categorie sono le linguette, il motore di ricerca sotto è un unico
   rettangolo bianco compatto. La tab attiva è bianca e si fonde senza
   soluzione di continuità con il rettangolo; le altre restano su un
   tono smorzato, staccate visivamente, così il blocco attivo risalta
   chiaramente invece di sembrare una fila di riquadri tutti uguali. */
/* La fila delle linguette non va mai a capo: scorre di lato. Il numero
   di categorie lo decide l'operatore dal pannello, quindi una seconda
   riga staccata dal blocco bianco sarebbe solo questione di tempo. */
.cral-home-ricerca-tab-fascia {
	position: relative;
	z-index: 1;
}

.cral-home-ricerca-tab-categorie {
	display: flex;
	flex-wrap: nowrap;
	gap: 3px;
	position: relative;
	z-index: 1;
	overflow-x: auto;
	overflow-y: hidden;

	/*
	 * Lo scorrimento resta immediato: quello morbido, applicato qui, viene
	 * ereditato anche da rotellina e trascinamento e li rende gommosi. Per
	 * lo spostamento automatico sulla linguetta attiva l'animazione viene
	 * chiesta di volta in volta dallo script.
	 */

	/* La barra grigia di sistema resta nascosta: al suo posto ci sono le
	   sfumature ai bordi. Senza questo, comparirebbe sotto le linguette e
	   il blocco bianco si abbasserebbe di qualche pixel. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.cral-home-ricerca-tab-categorie::-webkit-scrollbar {
	display: none;
}

/* Durante il trascinamento col mouse lo scorrimento deve seguire il dito
   all'istante, senza l'animazione morbida usata per i salti automatici. */
.cral-home-ricerca-tab-categorie.cral-in-trascinamento {
	cursor: grabbing;
	user-select: none;
}

/* Indizio ai bordi: una sfumatura verso il colore dello sfondo con una
   piccola freccia. Compare solo dal lato in cui c'è ancora qualcosa da
   vedere e sparisce quando si è arrivati in fondo.
   Il colore è scritto per esteso perché una sfumatura ha bisogno dello
   stesso colore anche in versione trasparente, che non si può ricavare
   dalla variabile --cral-teal. */
.cral-home-ricerca-tab-fascia::before,
.cral-home-ricerca-tab-fascia::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 58px;
	z-index: 3;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
	background-repeat: no-repeat;
	background-size: 100% 100%, 15px 15px;
}

.cral-home-ricerca-tab-fascia::before {
	left: 0;
	background-image:
		linear-gradient( to right, #0d6b78 30%, rgba( 13, 107, 120, 0 ) 100% ),
		url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E" );
	background-position: left center, left 6px center;
}

.cral-home-ricerca-tab-fascia::after {
	right: 0;
	background-image:
		linear-gradient( to left, #0d6b78 30%, rgba( 13, 107, 120, 0 ) 100% ),
		url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E" );
	background-position: right center, right 6px center;
}

.cral-home-ricerca-tab-fascia.cral-ha-inizio::before,
.cral-home-ricerca-tab-fascia.cral-ha-fine::after {
	opacity: 1;
}

.cral-home-ricerca-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	white-space: nowrap;
	background: rgba( 255, 255, 255, 0.18 );
	color: rgba( 255, 255, 255, 0.92 );
	border: none;
	border-radius: 12px 12px 0 0;
	padding: 12px 18px;
	font-size: 0.86rem;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cral-home-ricerca-tab-icona {
	display: flex;
}

.cral-home-ricerca-tab-icona svg {
	width: 16px;
	height: 16px;
}

.cral-home-ricerca-tab:hover {
	background: rgba( 255, 255, 255, 0.3 );
	color: #fff;
}

.cral-home-ricerca-tab-attiva,
.cral-home-ricerca-tab-attiva:hover {
	background: #fff;
	color: var( --cral-arancione-scuro );
}

/* Lo shortcode [cralnetwork_ricerca] porta con sé il proprio contenitore
   .cral-conv-container: qui è già dentro un contenitore della homepage,
   quindi si annulla la sua spaziatura per evitare di raddoppiarla. */
.cral-home-hero-ricerca .cral-conv-container {
	max-width: none;
	padding: 0;
}

/* Il motore di ricerca è un unico rettangolo bianco, senza bordo,
   sollevato dallo sfondo con un'ombra morbida. I due angoli superiori
   sono piatti, così le tab sopra vi si appoggiano senza alcuno spazio
   vuoto, a formare un solo blocco compatto. */
.cral-home-hero-ricerca .cral-conv-ricerca-barra {
	background: #fff;
	border: none;
	border-radius: 0 0 20px 20px;
	box-shadow: 0 24px 48px rgba( 0, 0, 0, 0.35 );
	position: relative;
	z-index: 0;
	flex-wrap: nowrap;
	gap: 12px;
}

/* Campi dimensionati apposta per stare compatti su un'unica riga alla
   larghezza massima del blocco (900px), invece di spargersi su righe
   sbilanciate come con le proporzioni generiche condivise altrove. */
.cral-home-hero-ricerca .cral-conv-ricerca-campo-termine,
.cral-home-hero-ricerca .cral-conv-ricerca-campo-indirizzo {
	flex: 1 1 0;
	min-width: 190px;
}

.cral-home-hero-ricerca .cral-conv-ricerca-campo:not( .cral-conv-ricerca-campo-termine ):not( .cral-conv-ricerca-campo-indirizzo ):not( :has( select[name="categoria"] ) ) {
	flex: 0 1 110px;
	min-width: 100px;
}

/* La select "Categoria" ha un testo più lungo ("Tutte le categorie") e
   uscirebbe tagliata con la stessa larghezza di "Raggio": le si dà più
   spazio, togliendone un po' a "Raggio" per restare in una riga sola.
   Va esclusa dalla regola sopra (non solo aggiunta dopo) perché ha meno
   specificità di quella coi due ":not()" e verrebbe sovrascritta. */
.cral-home-hero-ricerca .cral-conv-ricerca-campo:has( select[name="categoria"] ) {
	flex: 0 1 185px;
	min-width: 160px;
}

/* Sotto i 640px la barra passa a colonna (vedi frontend.css): lì il
   flex-basis pensato per la larghezza (150px/190px) verrebbe riletto
   come altezza, gonfiando i campi con spazio vuoto. Va azzerato perché
   ogni campo torni alto solo quanto il suo contenuto. */
@media ( max-width: 640px ) {
	.cral-home-hero-ricerca .cral-conv-ricerca-campo-termine,
	.cral-home-hero-ricerca .cral-conv-ricerca-campo-indirizzo,
	.cral-home-hero-ricerca .cral-conv-ricerca-campo:not( .cral-conv-ricerca-campo-termine ):not( .cral-conv-ricerca-campo-indirizzo ),
	.cral-home-hero-ricerca .cral-conv-ricerca-campo:has( select[name="categoria"] ) {
		flex-basis: auto;
		min-width: 0;
	}
}

.cral-home-hero-ricerca .cral-conv-ricerca-bottone {
	flex-shrink: 0;
}

.cral-home-popolari {
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 0.9rem;
}

.cral-home-popolari span {
	color: var( --cral-testo-muted );
	font-weight: 600;
	margin-right: 4px;
}

.cral-home-popolari a {
	background: #fff;
	border: 1px solid var( --cral-bordo );
	border-radius: 999px;
	padding: 9px 16px;
	text-decoration: none;
	font-weight: 600;
	color: #444;
	display: inline-flex;
	align-items: center;
}

.cral-home-popolari a:hover {
	border-color: var( --cral-arancione );
	color: var( --cral-arancione-scuro );
}

/* --- Esplora le categorie --------------------------------------------------- */

.cral-home-categorie-griglia {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 16px;
}

.cral-home-categoria-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	text-decoration: none;
	background: var( --cral-sfondo-card );
	border: 1px solid var( --cral-bordo );
	border-radius: var( --cral-raggio );
	padding: 22px 12px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cral-home-categoria-card:hover {
	transform: translateY( -3px );
	box-shadow: var( --cral-ombra );
}

.cral-home-categoria-icona {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: var( --cral-arancione );
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cral-home-categoria-icona svg {
	width: 22px;
	height: 22px;
}

.cral-home-categoria-card span.cral-home-categoria-nome {
	font-size: 0.85rem;
	font-weight: 700;
	color: var( --cral-testo );
}

/* --- Valorizziamo il lavoro pubblico -------------------------------------------- */

.cral-home-valore {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

/*
 * Al posto dell'illustrazione: il mosaico delle fotografie vere delle
 * convenzioni pubblicate, lo stesso dell'apertura di "Chi siamo". Se non
 * ci fossero foto resta il fondo scuro, mai un riquadro vuoto.
 */
.cral-home-valore-immagine {
	border-radius: var( --cral-raggio );
	overflow: hidden;
	box-shadow: var( --cral-ombra-forte );
	aspect-ratio: 4 / 3;
	background: var( --cral-blu-scuro, #0e2f3d );
}

.cral-home-valore-mosaico {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	width: 100%;
	height: 100%;
}

.cral-home-valore-scatto {
	background-size: cover;
	background-position: center;
}

.cral-home-valore-eyebrow {
	display: inline-block;
	color: var( --cral-arancione );
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 10px;
}

.cral-home-valore-testo h2 {
	font-size: 1.9rem;
	font-weight: 800;
	margin: 0 0 16px;
	letter-spacing: -0.01em;
}

.cral-home-valore-testo p {
	color: var( --cral-testo-muted );
	margin: 0 0 24px;
}

.cral-home-valore-numeri {
	display: flex;
	gap: 40px;
	margin-bottom: 28px;
}

.cral-home-valore-numero .valore {
	font-size: 2rem;
	font-weight: 800;
	color: var( --cral-arancione );
	line-height: 1;
}

.cral-home-valore-numero .etichetta {
	font-size: 0.82rem;
	color: var( --cral-testo-muted );
	margin-top: 4px;
}

/* --- Banner weekend di lusso ------------------------------------------------------ */

.cral-home-banner-lusso {
	background: linear-gradient( 120deg, var( --cral-blu-scuro ) 0%, var( --cral-blu-scuro-2 ) 55%, #1a5568 100% );
	border-radius: var( --cral-raggio );
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	color: #fff;
	box-shadow: var( --cral-ombra-forte );
}

.cral-home-banner-lusso-testo {
	padding: 48px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}

.cral-home-banner-lusso-badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	background: var( --cral-arancione );
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 6px 14px;
	border-radius: 999px;
}

.cral-home-banner-lusso-testo h2 {
	font-size: 1.9rem;
	font-weight: 800;
	margin: 0;
	line-height: 1.2;
}

.cral-home-banner-lusso-testo p {
	margin: 0;
	color: rgba( 255, 255, 255, 0.78 );
	max-width: 380px;
}

.cral-home-banner-lusso-immagine {
	background: linear-gradient( 160deg, #2c8f9c, #1c6a78 45%, #0e4552 ), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E");
	background-blend-mode: normal;
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
}

.cral-home-banner-lusso-immagine svg {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}

/* --- Carosello generico: slider a 3 card, ruota su più gruppi -----------------
   Riusato da "Offerte in evidenza" e "Recensioni" tramite le stesse
   classi strutturali; ".cral-home-offerte-carosello"/"-recensioni-carosello"
   sul contenitore esterno servono solo per eventuali stili specifici. --- */

.cral-home-carosello {
	position: relative;
	padding: 0 8px;
}

.cral-home-carosello-viewport {
	overflow: hidden;
}

.cral-home-carosello-pista {
	display: flex;
	transition: transform 0.45s ease;
}

.cral-home-carosello-pista > * {
	flex: 0 0 calc( ( 100% - 48px ) / 3 );
	margin-right: 24px;
}

.cral-home-carosello-pista > *:last-child {
	margin-right: 0;
}

.cral-home-carosello-pista .cral-conv-card-vetrina-foto {
	background: linear-gradient( 135deg, #e9e4dd, #d9d2c6 );
}

.cral-home-offerte-cta {
	margin-top: auto;
	align-self: flex-start;
	font-size: 0.82rem;
	padding: 8px 18px;
}

.cral-home-carosello-freccia {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var( --cral-bordo );
	box-shadow: var( --cral-ombra );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	line-height: 1;
	color: var( --cral-testo );
	cursor: pointer;
	z-index: 2;
	padding: 0;
}

.cral-home-carosello-freccia:hover {
	background: var( --cral-arancione );
	color: #fff;
	border-color: var( --cral-arancione );
}

.cral-home-carosello-freccia-sx {
	left: -8px;
}

.cral-home-carosello-freccia-dx {
	right: -8px;
}

.cral-home-carosello-puntini {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
}

.cral-home-carosello-puntino {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: var( --cral-bordo );
	cursor: pointer;
	transition: width 0.2s ease, background-color 0.2s ease;
}

.cral-home-carosello-puntino.attivo {
	width: 22px;
	background: var( --cral-arancione );
}

/* --- Partner --------------------------------------------------------------------- */

.cral-home-partner-striscia {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px;
}

.cral-home-partner-logo {
	width: 130px;
	height: 52px;
	background: var( --cral-sfondo-card );
	border: 1px solid var( --cral-bordo );
	border-radius: var( --cral-raggio-piccolo );
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b5b0a8;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
}

.cral-home-partner-logo-immagine {
	padding: 8px 14px;
}

.cral-home-partner-logo-immagine img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* --- Recensioni (carosello, vedi classi ".cral-home-carosello-*") ------------------- */

.cral-home-recensione-card {
	background: var( --cral-sfondo-card );
	border: 1px solid var( --cral-bordo );
	border-radius: var( --cral-raggio );
	box-shadow: var( --cral-ombra );
	padding: 26px 24px;
}

.cral-home-stelle {
	color: var( --cral-arancione );
	display: flex;
	gap: 2px;
	margin-bottom: 14px;
}

.cral-home-stelle svg {
	width: 16px;
	height: 16px;
}

.cral-home-recensione-card p.testo {
	margin: 0 0 20px;
	font-size: 0.95rem;
	color: #333;
}

.cral-home-recensione-autore {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cral-home-recensione-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var( --cral-arancione-chiaro );
	color: var( --cral-arancione-scuro );
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.cral-home-recensione-autore .nome {
	font-weight: 700;
	font-size: 0.92rem;
}

.cral-home-recensione-autore .ruolo {
	font-size: 0.8rem;
	color: var( --cral-testo-muted );
}

/* --- Statistiche ------------------------------------------------------------------- */

.cral-home-statistiche {
	background: var( --cral-teal );
	color: #fff;
	padding-block: 72px;
}

.cral-home-statistiche-griglia {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 24px;
	text-align: center;
}

.cral-home-statistica .valore {
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
}

.cral-home-statistica .etichetta {
	margin-top: 8px;
	font-size: 0.85rem;
	color: rgba( 255, 255, 255, 0.8 );
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* --- Newsletter ------------------------------------------------------------------------ */

.cral-home-newsletter-card {
	background: var( --cral-sfondo-card );
	border: 1px solid var( --cral-bordo );
	border-radius: var( --cral-raggio );
	box-shadow: var( --cral-ombra );
	max-width: 720px;
	margin: 0 auto;
	padding: 44px 40px;
	text-align: center;
}

.cral-home-newsletter-card h2 {
	margin: 0 0 8px;
	font-size: 1.5rem;
	font-weight: 800;
}

.cral-home-newsletter-card p {
	margin: 0 0 26px;
	color: var( --cral-testo-muted );
}

.cral-home-newsletter-form {
	display: flex;
	gap: 10px;
	max-width: 460px;
	margin: 0 auto;
}

.cral-home-newsletter-form input[type="email"] {
	flex: 1;
	padding: 12px 16px;
	border-radius: 999px;
	border: 1px solid var( --cral-bordo );
	font-size: 0.92rem;
	font-family: inherit;
}

.cral-home-newsletter-form button {
	background: var( --cral-arancione );
	color: #fff;
	border: none;
	font-weight: 700;
	font-size: 0.88rem;
	padding: 12px 24px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
}

.cral-home-newsletter-form button:hover {
	background: var( --cral-arancione-scuro );
}

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

.cral-home-footer {
	background: var( --cral-blu-scuro );
	color: rgba( 255, 255, 255, 0.75 );
	padding-block: 56px 24px;
	margin-top: 0;
}

.cral-home-footer-griglia {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 40px;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.12 );
}

.cral-home-footer-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 1.1rem;
	color: #fff;
	margin-bottom: 14px;
}

/* Il logo ha colori e testo scuri: su sfondo scuro serve un riquadro
   chiaro dietro per restare leggibile, senza toccare i suoi colori. */
.cral-home-footer-logo-immagine {
	height: 38px;
	width: auto;
	display: block;
	background: #fff;
	padding: 6px 10px;
	border-radius: 8px;
}

.cral-home-footer-descrizione {
	font-size: 0.88rem;
	max-width: 300px;
	margin: 0 0 18px;
}

.cral-home-footer-social {
	display: flex;
	gap: 10px;
}

.cral-home-footer-social a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.08 );
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.cral-home-footer-social svg {
	width: 15px;
	height: 15px;
	color: #fff;
}

.cral-home-footer-colonna h3 {
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.cral-home-footer-colonna ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 0.88rem;
}

.cral-home-footer-colonna a {
	text-decoration: none;
	color: rgba( 255, 255, 255, 0.75 );
}

.cral-home-footer-colonna a:hover {
	color: #fff;
}

.cral-home-footer-bottom {
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 0.8rem;
	color: rgba( 255, 255, 255, 0.55 );
}

/* --- Responsive -------------------------------------------------------------------------- */

@media ( max-width: 960px ) {
	/* Sotto i 900px del blocco di ricerca (vedi .cral-home-hero-ricerca,
	   max-width:900px) il vincolo "una riga sola" imposto per il desktop
	   va tolto, altrimenti i campi si schiaccerebbero troppo stretti. */
	.cral-home-hero-ricerca .cral-conv-ricerca-barra {
		flex-wrap: wrap;
	}

	/* Quando il menu è chiuso, <nav> è vuoto (il suo unico figlio è
	   display:none) e non deve interferire con "logo ... Contattaci" sulla
	   stessa riga. Da aperto, invece, deve andare a capo su una riga
	   propria a piena larghezza: da qui flex-wrap sulla riga e "order"
	   per spostarlo dopo gli altri due elementi. */
	.cral-home-nav-riga {
		flex-wrap: wrap;
	}

	.cral-home-menu {
		display: none;
	}

	.cral-home-menu-toggle {
		display: inline-flex;
	}

	.cral-home-nav-aperta .cral-home-nav-principale {
		width: 100%;
		order: 10;
	}

	.cral-home-nav-aperta .cral-home-menu {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		width: 100%;
		padding: 18px 24px 22px;
		border-top: 1px solid var( --cral-bordo );
	}

	.cral-home-sezione {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	.cral-home-statistiche {
		padding-block: 56px;
	}

	.cral-home-categorie-griglia {
		grid-template-columns: repeat( 4, 1fr );
	}

	/* Sotto i 960px i caroselli (offerte, recensioni) mostrano una card alla volta. */
	.cral-home-carosello-pista > * {
		flex: 0 0 100%;
		margin-right: 0;
	}

	.cral-home-carosello-freccia-sx {
		left: 0;
	}

	.cral-home-carosello-freccia-dx {
		right: 0;
	}

	.cral-home-valore,
	.cral-home-banner-lusso {
		grid-template-columns: 1fr;
	}

	.cral-home-banner-lusso-immagine {
		min-height: 220px;
		order: -1;
	}

	.cral-home-statistiche-griglia {
		grid-template-columns: repeat( 2, 1fr );
		gap: 32px;
	}

	.cral-home-footer-griglia {
		grid-template-columns: 1fr 1fr;
	}

	.cral-home-hero-titolo {
		font-size: 2.3rem;
	}
}

@media ( max-width: 620px ) {
	/*
	 * Sul telefono si stringono solo i margini della colonna: una riga
	 * sola. Va scritta sullo stesso elemento che li definisce (.cral-home),
	 * altrimenti quella di partenza resta più forte e non cambia nulla.
	 */
	.cral-home {
		--cral-colonna-lato: 16px;
	}

	.cral-home-nav-riga {
		padding-block: 12px;
		gap: 10px;
	}

	.cral-home-logo {
		font-size: 1rem;
		gap: 8px;
	}

	.cral-home-logo-badge {
		width: 32px;
		height: 32px;
		font-size: 0.95rem;
	}

	.cral-home-logo-immagine {
		height: 30px;
	}

	.cral-home-nav-destra {
		gap: 8px;
	}

	.cral-home-nav-destra .cral-home-pulsante {
		padding: 11px 14px;
		font-size: 0.82rem;
	}

	.cral-home-categorie-griglia {
		grid-template-columns: repeat( 3, 1fr );
	}

	.cral-home-statistiche-griglia,
	.cral-home-footer-griglia {
		grid-template-columns: 1fr;
	}

	.cral-home-hero-titolo {
		font-size: 1.9rem;
	}

	/* Spazi verticali dell'hero ridotti su telefono: meno margine sopra
	   il titolo e tra sottotitolo e barra di ricerca, così la prima
	   schermata risulta più compatta. */
	.cral-home-hero {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.cral-home-hero-sottotitolo {
		margin: 0 0 20px;
	}

	.cral-home-popolari-fascia {
		padding-top: 20px;
	}

	.cral-home-sezione {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.cral-home-statistiche {
		padding-block: 48px;
	}

	.cral-home-newsletter-card {
		padding: 32px 22px;
	}

	.cral-home-newsletter-form {
		flex-direction: column;
	}

	.cral-home-banner-lusso-testo {
		padding: 32px 26px;
	}

	.cral-home-footer-bottom {
		flex-direction: column;
	}
}

/* Icone di categoria caricate come immagine (invece di quelle disegnate) */

.cral-home-ricerca-tab-icona img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	display: block;
}

.cral-home-categoria-icona img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	display: block;
}

/* =========================================================================
   Pagine del portale CralNetwork (modello "CralNetwork – Pagina")
   Il contenuto sta fuori dal contenitore .cral-home: qui gli si dà solo
   la stessa larghezza della barra in alto e del piè di pagina, così le tre
   cose risultano allineate.
   ========================================================================= */

.cral-conv-pagina-corpo {
	/*
	 * Qui dentro finiscono card, pulsanti e badge presi in prestito dalla
	 * scheda della convenzione, che si aspettano questi colori. Senza
	 * dichiararli, un pulsante arancione con scritta bianca diventerebbe
	 * bianco su bianco: invisibile.
	 */
	--cral-arancione: #f2761e;
	--cral-arancione-scuro: #d9640f;
	--cral-arancione-chiaro: #fff1e6;
	--cral-testo: #1a1a1a;
	--cral-testo-muted: #6b7280;
	--cral-bordo: #e9e6e2;
	--cral-sfondo-card: #ffffff;
	--cral-sfondo-pagina: #fdfaf7;
	--cral-ombra: 0 4px 16px rgba( 20, 20, 20, 0.06 );
	--cral-raggio: 16px;
	--cral-raggio-piccolo: 10px;

	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 24px 72px;
	box-sizing: border-box;
}

.cral-conv-pagina-titolo {
	margin: 0 0 28px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 34px;
	line-height: 1.2;
	color: #1a1a1a;
}

@media ( max-width: 600px ) {

	.cral-conv-pagina-corpo {
		padding: 28px 16px 56px;
	}

	.cral-conv-pagina-titolo {
		font-size: 26px;
	}
}

/* Elenchi di card fuori dalla ricerca per zona (archivio, ricerca di WordPress) */

.cral-conv-elenco-card {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) );
	gap: 16px;
}

.cral-conv-card-collegamento {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	/*
	 * Senza questo la card non si lascia stringere: la griglia allarga la
	 * colonna fino a contenere l'indirizzo per intero e su telefono la
	 * pagina scorre di lato.
	 */
	min-width: 0;
}

.cral-conv-card-collegamento:hover,
.cral-conv-card-collegamento:focus {
	color: inherit;
	text-decoration: none;
}

.cral-conv-risultato-semplice {
	display: block;
	padding: 18px 20px;
}

.cral-conv-risultato-semplice h3 {
	margin: 0 0 6px;
	font-size: 1rem;
	font-weight: 700;
}

.cral-conv-risultato-semplice p {
	margin: 0;
	font-size: 0.88rem;
	color: #6b7280;
}

.cral-conv-nessun-risultato,
.cral-conv-404-testo {
	margin: 0 0 24px;
	font-size: 1.05rem;
	color: #444;
	max-width: 640px;
}

.cral-conv-ritorno {
	margin: 28px 0 0;
}

.cral-conv-ritorno .cral-conv-pulsante-cta {
	display: inline-block;
}

.cral-conv-pagina-corpo .nav-links {
	display: flex;
	gap: 12px;
	margin-top: 28px;
	font-weight: 700;
}

@media ( max-width: 600px ) {

	.cral-conv-elenco-card {
		grid-template-columns: 1fr;
	}
}

/* --- Banner premium (menu Banner › Premium homepage) --------------------------------
   Uno alla volta, a tutta larghezza, dentro il carosello generico. Con i testi
   ha l'aspetto del vecchio banner: testi a sinistra e immagine a destra.
   Senza testi l'immagine prende tutta la fascia. L'immagine si vede sempre
   intera; lo spazio che avanza si riempie con la stessa immagine sfocata,
   come nelle card della striscia. --- */

.cral-home-premium .cral-home-carosello-viewport {
	border-radius: var( --cral-raggio );
	box-shadow: var( --cral-ombra-forte );
}

.cral-home-premium .cral-home-carosello-pista > * {
	flex: 0 0 100%;
	margin-right: 0;
}

.cral-home-premium-slide {
	min-height: 320px;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	text-decoration: none;
}

/* "a." davanti: serve a battere ".cral-home a { color: inherit }", come per a.cral-home-pulsante. */
a.cral-home-premium-slide,
a.cral-home-premium-slide:hover,
a.cral-home-premium-slide:focus-visible {
	color: #fff;
}

a.cral-home-premium-slide:focus-visible {
	outline: 3px solid var( --cral-arancione );
	outline-offset: -3px;
}

.cral-home-premium-titolo {
	display: block;
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1.2;
}

.cral-home-premium-sottotitolo {
	display: block;
	max-width: 380px;
	color: rgba( 255, 255, 255, 0.78 );
}

.cral-home-premium-immagine {
	position: relative;
	display: block;
	min-height: 320px;
	overflow: hidden;
	background: #0b2531;
}

.cral-home-premium-immagine::before {
	content: "";
	position: absolute;
	inset: -30px;
	background-image: var( --cral-banner-sfondo, none );
	background-position: center;
	background-size: cover;
	filter: blur( 24px ) saturate( 1.1 );
	opacity: 0.55;
}

.cral-home-premium-immagine img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cral-home-premium-immagine-vuota {
	background: var( --cral-arancione );
}

.cral-home-premium-solo-immagine {
	grid-template-columns: 1fr;
}

.cral-home-premium-solo-immagine .cral-home-premium-immagine {
	min-height: 360px;
}

.cral-home-premium-badge-immagine {
	position: absolute;
	z-index: 1;
	top: 16px;
	left: 16px;
}

.cral-home-premium .cral-vetrina-banner-apri {
	right: 16px;
	bottom: 16px;
}

a.cral-home-premium-slide:hover .cral-vetrina-banner-apri,
a.cral-home-premium-slide:focus-visible .cral-vetrina-banner-apri {
	background: var( --cral-arancione-scuro );
	color: var( --cral-testo-su-scuro, #fff );
}

@media ( max-width: 960px ) {

	.cral-home-premium-immagine {
		order: -1;
		min-height: 220px;
	}

	.cral-home-premium-solo-immagine .cral-home-premium-immagine {
		min-height: 0;
		aspect-ratio: 1 / 1;
	}
}

@media ( max-width: 620px ) {

	.cral-home-premium-titolo {
		font-size: 1.5rem;
	}
}

/* --- Dati dell'azienda nel piè di pagina (sedi, PEC, partita IVA) ------------------ */

.cral-home-footer-dati {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.82rem;
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.75 );
}

.cral-home-footer-dati li {
	margin-bottom: 4px;
}

.cral-home-footer-dato-etichetta {
	display: block;
	font-weight: 600;
	color: rgba( 255, 255, 255, 0.55 );
}

.cral-home-footer-dati a {
	color: rgba( 255, 255, 255, 0.75 );
}

/* =========================================================================
   Pagine del portale: "I nostri partners", "Chi siamo", "Il nostro circuito".
   Le guardano i commerciali in trattativa: titoli grandi, molta aria, un
   solo elemento forte per sezione, e le fotografie vere delle convenzioni.
   ========================================================================= */

/* --- Comparse all'ingresso ------------------------------------------------
   Lo stato nascosto vale solo quando il JavaScript ha dichiarato di esserci
   (classe sull'elemento <html>): senza JavaScript la pagina è tutta visibile,
   e chi ha chiesto meno movimento non vede nessuna animazione. --- */

.cral-anima-pronta .cral-anima {
	opacity: 0;
	transform: translateY( 18px );
	transition: opacity 0.55s ease var( --cral-ritardo, 0ms ), transform 0.55s ease var( --cral-ritardo, 0ms );
}

.cral-anima-pronta .cral-anima.cral-visibile {
	opacity: 1;
	transform: none;
}

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

	.cral-anima-pronta .cral-anima {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* --- Ritmo e scala -------------------------------------------------------- */

.cral-pagina > * + * {
	margin-top: 112px;
}

.cral-titolo-enorme {
	margin: 0;
	font-size: clamp( 2.6rem, 6.4vw, 4rem );
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.03em;
}

.cral-titolo-grande {
	margin: 0;
	font-size: clamp( 2.1rem, 4.6vw, 3rem );
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.cral-occhiello {
	max-width: 720px;
	margin: 18px 0 0;
	font-size: 1.15rem;
	line-height: 1.6;
	color: var( --cral-testo-muted );
}

.cral-occhiello-chiaro {
	max-width: 640px;
	margin: 18px 0 0;
	font-size: 1.15rem;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.88 );
}

.cral-pagina-apertura-larga {
	max-width: 860px;
}

/* Il testo del sito è chiaro e largo il giusto: niente riquadri intorno. */
.cral-pagina-apertura p,
.cral-pagina-testo p {
	max-width: 760px;
	margin: 0 0 18px;
	font-size: 1.08rem;
	line-height: 1.75;
	color: var( --cral-testo );
}

.cral-pagina-apertura p:first-child,
.cral-pagina-testo p:first-child {
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -0.01em;
}

.cral-pagina-apertura p:last-child,
.cral-pagina-testo p:last-child {
	margin-bottom: 0;
}

.cral-pagina-vuota {
	margin: 0;
	padding: 32px 28px;
	background: var( --cral-sfondo-sezione, #f8f0e4 );
	border-radius: 20px;
	color: var( --cral-testo-muted );
	text-align: center;
}

/* --- Chi siamo: il mosaico delle fotografie vere -------------------------- */

.cral-mosaico {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 440px;
	padding: 56px 48px 48px;
	overflow: hidden;
	border-radius: 28px;
	background: var( --cral-blu-scuro, #0e2f3d );
	color: #fff;
}

.cral-mosaico-foto {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat( 6, 1fr );
	opacity: 0.85;
}

.cral-mosaico-scatto {
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
}

/* Le foto restano riconoscibili ma il titolo deve vincere: velo scuro sopra. */
.cral-mosaico::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 200deg, rgba( 14, 47, 61, 0.72 ) 0%, rgba( 14, 47, 61, 0.88 ) 55%, rgba( 14, 47, 61, 0.96 ) 100% );
}

.cral-mosaico-testo {
	position: relative;
	z-index: 1;
	max-width: 780px;
}

/* --- Chi siamo: i numeri sono il protagonista ----------------------------- */

.cral-numeri-grandi {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 28px;
}

.cral-numero {
	border-top: 3px solid var( --cral-arancione );
	padding-top: 20px;
}

.cral-numero-valore {
	display: block;
	font-size: clamp( 2.8rem, 5.4vw, 4.2rem );
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --cral-blu-scuro, #0e2f3d );
	/* Cifre di larghezza fissa: i numeri restano incolonnati mentre contano. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.cral-numero-etichetta {
	display: block;
	margin-top: 12px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --cral-testo-muted );
}

/* --- Chi siamo: i tre blocchi, senza card -------------------------------- */

.cral-pagina-blocchi {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 48px;
}

.cral-pagina-blocco {
	border-top: 2px solid var( --cral-bordo );
	padding-top: 22px;
}

.cral-pagina-blocco h3 {
	margin: 0 0 12px;
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.cral-pagina-blocco p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var( --cral-testo-muted );
}

/* --- Il richiamo finale: qui sì, un riquadro, perché è l'invito ---------- */

.cral-pagina-richiamo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 44px 48px;
	background: var( --cral-sfondo-sezione, #f8f0e4 );
	border-radius: 28px;
}

.cral-pagina-richiamo h3 {
	margin: 0 0 8px;
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.cral-pagina-richiamo p {
	margin: 0;
	max-width: 560px;
	color: var( --cral-testo-muted );
}

.cral-pagina-richiamo .cral-home-pulsante {
	flex: 0 0 auto;
	font-size: 1rem;
	padding: 14px 28px;
}

/* --- Partners: ricerca ---------------------------------------------------- */

.cral-partners-cerca {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 520px;
	padding: 6px 18px 6px 16px;
	background: #fff;
	border: 1px solid var( --cral-bordo );
	border-radius: 999px;
	box-shadow: var( --cral-ombra );
}

.cral-partners-cerca[hidden] {
	display: none;
}

.cral-partners-cerca-icona {
	display: flex;
	color: var( --cral-testo-muted );
}

.cral-partners-cerca input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 0;
	border: 0;
	background: none;
	font-size: 1rem;
	font-family: inherit;
	color: var( --cral-testo );
}

.cral-partners-cerca input:focus {
	outline: none;
}

.cral-partners-cerca:focus-within {
	border-color: var( --cral-arancione );
}

.cral-partners-conteggio {
	flex: 0 0 auto;
	font-size: 0.82rem;
	font-weight: 700;
	color: var( --cral-testo-muted );
	font-variant-numeric: tabular-nums;
}

.cral-partners-nessuno {
	margin: 0;
	padding: 28px;
	text-align: center;
	color: var( --cral-testo-muted );
}

/* --- Partners: le tessere ------------------------------------------------- */

.cral-partners-griglia {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 20px;
	margin-top: 36px;
}

.cral-partner-tessera[hidden] {
	display: none;
}

.cral-partner-tessera {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 28px 24px 24px;
	background: var( --cral-sfondo-card );
	border: 1px solid var( --cral-bordo );
	border-radius: 22px;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cral-partner-tessera:hover,
.cral-partner-tessera:focus-visible {
	transform: translateY( -4px );
	box-shadow: 0 14px 30px rgba( 20, 30, 40, 0.10 );
	border-color: var( --cral-partner-colore, var( --cral-arancione ) );
}

/*
 * Il marchio dell'area: lo stesso carattere delle vetrine, dove il logo
 * mancante diventa un cerchio con le iniziali nel colore del sindacato.
 * Qui è più grande, perché la tessera deve reggere anche da sola.
 */
.cral-partner-marchio {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 22px;
	background: var( --cral-partner-chiaro, #fff1e6 );
}

.cral-partner-iniziali {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var( --cral-partner-scuro, var( --cral-arancione ) );
}

.cral-partner-con-logo .cral-partner-marchio {
	background: #fff;
	border: 1px solid var( --cral-bordo );
}

.cral-partner-marchio img {
	max-width: 56px;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.cral-partner-nome {
	font-size: 1.08rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var( --cral-testo );
}

.cral-partner-conteggio {
	margin-top: -6px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var( --cral-testo-muted );
}

.cral-partner-vai {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 9px 16px;
	border-radius: 999px;
	background: var( --cral-partner-chiaro, #fff1e6 );
	color: var( --cral-partner-scuro, var( --cral-arancione ) );
	font-size: 0.85rem;
	font-weight: 700;
	transition: background-color 0.18s ease, color 0.18s ease, gap 0.18s ease;
}

.cral-partner-tessera:hover .cral-partner-vai,
.cral-partner-tessera:focus-visible .cral-partner-vai {
	background: var( --cral-partner-colore, var( --cral-arancione ) );
	color: #fff;
	gap: 12px;
}

/* --- Il circuito: lo schema della filiera --------------------------------- */

.cral-filiera {
	position: relative;
}

.cral-filiera-linea {
	position: absolute;
	top: 36px;
	left: 0;
	width: 100%;
	height: 12px;
	overflow: visible;
}

.cral-filiera-binario {
	stroke: var( --cral-bordo );
	stroke-width: 2;
	fill: none;
}

/* La linea arancione si completa mentre si scorre; ferma resta comunque visibile. */
.cral-filiera-tracciato {
	stroke: var( --cral-arancione );
	stroke-width: 3;
	stroke-linecap: round;
	fill: none;
}

.cral-filiera-passaggi {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: passaggio;
}

.cral-filiera-passaggio {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.cral-filiera-pallino {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var( --cral-arancione );
	color: var( --cral-arancione );
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1;
}

.cral-filiera-dettaglio summary {
	display: flex;
	flex-direction: column;
	gap: 8px;
	cursor: pointer;
	list-style: none;
}

.cral-filiera-dettaglio summary::-webkit-details-marker {
	display: none;
}

.cral-filiera-titolo {
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var( --cral-testo );
}

.cral-filiera-numero {
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 999px;
	background: var( --cral-arancione-chiaro );
	color: var( --cral-arancione-scuro );
	font-size: 0.8rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.cral-filiera-apri {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var( --cral-testo-muted );
	transition: transform 0.2s ease;
}

.cral-filiera-dettaglio[open] .cral-filiera-apri {
	transform: rotate( 180deg );
}

.cral-filiera-righe p {
	margin: 14px 0 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var( --cral-testo-muted );
}

/* --- Il circuito: la freccia finale, che è il messaggio commerciale ------- */

.cral-filiera-diretto {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 36px 44px;
	border-radius: 28px;
	background: var( --cral-blu-scuro, #0e2f3d );
	color: #fff;
}

.cral-filiera-diretto-freccia {
	flex: 0 0 auto;
	color: var( --cral-arancione );
}

.cral-filiera-diretto p {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: -0.01em;
}

/* --- Il circuito: contatti ------------------------------------------------ */

.cral-pagina-contatto {
	padding: 36px 44px;
	background: var( --cral-arancione-chiaro, #fff1e6 );
	border-radius: 28px;
}

.cral-pagina-contatto p {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.6;
}

/*
 * Solo i link dentro la frase, non i pulsanti: senza ":not()" questa
 * regola vinceva su quella del pulsante (stessa specificità, ma scritta
 * dopo) e "Chiamaci ora" diventava arancione su arancione.
 */
.cral-pagina-contatto p a:not( .cral-home-pulsante ) {
	color: var( --cral-arancione-scuro );
	font-weight: 700;
}

.cral-pagina-contatto-pulsanti {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px !important;
}

.cral-pagina-contatto-pulsanti .cral-home-pulsante {
	font-size: 1rem;
	padding: 13px 26px;
}

a.cral-pagina-pulsante-chiaro,
a.cral-pagina-pulsante-chiaro:hover {
	background: #fff;
	color: var( --cral-arancione-scuro );
	border: 1.5px solid var( --cral-arancione );
}

.cral-pagina-sotto {
	margin: 0;
}

.cral-pagina-sotto a {
	font-size: 1.02rem;
	font-weight: 700;
	color: var( --cral-arancione-scuro );
	text-decoration: none;
}

.cral-pagina-sotto a:hover {
	text-decoration: underline;
}

/* --- Schermi medi --------------------------------------------------------- */

@media ( max-width: 980px ) {

	.cral-numeri-grandi {
		grid-template-columns: repeat( 2, 1fr );
		gap: 36px;
	}

	.cral-pagina-blocchi {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.cral-mosaico {
		min-height: 380px;
		padding: 40px 32px 36px;
	}

	.cral-mosaico-foto {
		grid-template-columns: repeat( 4, 1fr );
	}

	/* Sotto questa misura la filiera diventa una colonna con la linea a sinistra. */
	.cral-filiera-linea {
		display: none;
	}

	.cral-filiera-passaggi {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.cral-filiera-passaggio {
		flex-direction: row;
		align-items: flex-start;
		gap: 20px;
		padding-bottom: 32px;
	}

	.cral-filiera-passaggio::before {
		content: "";
		position: absolute;
		top: 72px;
		bottom: 0;
		left: 35px;
		width: 2px;
		background: var( --cral-bordo );
	}

	.cral-filiera-passaggio:last-child::before {
		display: none;
	}

	.cral-filiera-pallino {
		flex: 0 0 auto;
	}

	.cral-filiera-dettaglio {
		flex: 1 1 auto;
		padding-top: 8px;
	}

	.cral-pagina-richiamo {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.cral-filiera-diretto {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		text-align: left;
	}
}

/* --- Telefono ------------------------------------------------------------- */

@media ( max-width: 600px ) {

	.cral-pagina > * + * {
		margin-top: 72px;
	}

	.cral-mosaico {
		min-height: 320px;
		padding: 32px 22px 28px;
		border-radius: 22px;
	}

	.cral-mosaico-foto {
		grid-template-columns: repeat( 3, 1fr );
	}

	.cral-numeri-grandi {
		gap: 26px;
	}

	.cral-partners-griglia {
		grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
		gap: 14px;
		margin-top: 28px;
	}

	.cral-partner-tessera {
		padding: 22px 18px 18px;
		border-radius: 18px;
	}

	.cral-partner-marchio {
		width: 56px;
		height: 56px;
		border-radius: 18px;
	}

	.cral-partner-nome {
		font-size: 0.98rem;
	}

	.cral-pagina-richiamo,
	.cral-pagina-contatto,
	.cral-filiera-diretto {
		padding: 28px 22px;
		border-radius: 22px;
	}

	.cral-filiera-diretto p {
		font-size: 1.08rem;
	}

	.cral-filiera-pallino {
		width: 56px;
		height: 56px;
		font-size: 1.2rem;
	}

	.cral-filiera-passaggio::before {
		top: 56px;
		left: 27px;
	}
}