/* =========================================================================
   Clinica Veterinaria Rigo — livello di design
   -------------------------------------------------------------------------
   Caricato dopo style.css. Togliendo la riga che lo richiama in head.php,
   il sito torna esattamente come il template originale.

   La palette e' quella concordata. Quello che rende il sito piu' accogliente
   non e' il colore ma il materiale: angoli morbidi, carta calda al posto del
   grigio freddo, ombre brune invece che grigio-blu, il verde muschio usato
   molto piu' spesso, e i blocchi scuri appoggiati sulla pagina come riquadri
   invece di tagliarla da bordo a bordo.
   ========================================================================= */

:root {
	/* Colori invariati */
	--blu:        #0e5f7d;
	--blu-scuro:  #0a4256;
	--ciano:      #04a1e8;
	--verde:      #5b7553;
	--verde-tinta:#eef2e9;   /* velatura del verde, per gli sfondi tenui */

	--inchiostro: #232a28;
	--grigio:     #5f6a66;
	--grigio-tenue: #8d9691;

	/* Neutri riscaldati: prima erano virati al grigio-verde freddo.
	   Stessa luminosita', temperatura diversa. */
	--carta:      #f8f6f1;
	--carta-scura:#f1ede4;
	--linea:      #e6e0d5;
	--bianco:     #ffffff;

	/* Ombre brune, non grigio-blu: e' il dettaglio che scalda di piu'. */
	--ombra:      0 1px 3px rgba(78,64,44,.05), 0 10px 30px rgba(78,64,44,.08);
	--ombra-alta: 0 2px 6px rgba(78,64,44,.07), 0 18px 44px rgba(78,64,44,.12);

	--raggio:     16px;   /* riquadri */
	--raggio-sm:  10px;   /* campi e controlli */
	--raggio-pill:100px;  /* pulsanti */
}

/* =========================================================================
   1. Fondamenta
   ========================================================================= */

body {
	background: var(--carta);
	color: var(--inchiostro);
	font-family: 'Source Sans Pro', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
}

/* Il template scriveva gran parte del testo in #c1c1c1: contrasto 1,9:1,
   illeggibile. Qui il testo secondario sta a 6,4:1. */
p, li, td, .footer-about li, .copyrights { color: var(--grigio); }

a { color: var(--blu); transition: color .18s; }
a:hover, a:focus { color: var(--ciano); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--ciano);
	outline-offset: 3px;
	border-radius: 3px;
}
::selection { background: rgba(91,117,83,.2); }

h1, h2, h3, h4, h5 {
	font-family: 'Poppins', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	color: var(--inchiostro);
	letter-spacing: -.015em;
	line-height: 1.22;
}
h2 { font-size: 32px; font-weight: 600; }
h3 { font-size: 20px; font-weight: 600; }

.main { padding: 0; }
.content { overflow-x: hidden; }

/* --- Occhiello di sezione ------------------------------------------------ */
.occhiello {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--verde-tinta);
	color: var(--verde) !important;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 15px;
	border-radius: var(--raggio-pill);
	margin: 0 0 16px;
}
.occhiello i { font-size: 15px; }

/* --- Titolo di sezione --------------------------------------------------- */
.top-text { text-align: left !important; margin-bottom: 38px; max-width: 62ch; }
.top-text h2 { margin: 0 0 10px; }
.top-text p { margin: 0; font-size: 18px; }
.top-text .divider { display: none; }   /* l'iconcina nel cerchietto: via */

/* --- Ritmo verticale ----------------------------------------------------- */
.sezione { padding: 84px 0; }
.sezione--alterna { background: var(--carta-scura); }
section { padding: 72px 0; }

/* --- Pulsanti ------------------------------------------------------------ */
.pulsante, .btn, .btn-default, .btn-primary {
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 500;
	padding: 14px 30px;
	border-radius: var(--raggio-pill);
	border: 1.5px solid transparent;
	transition: background-color .2s, border-color .2s, color .2s, transform .15s;
}
.pulsante:active, .btn:active { transform: translateY(1px); }

.pulsante--pieno { background: var(--ciano); color: #fff !important; border-color: var(--ciano); }
.pulsante--pieno:hover { background: #0389c6; border-color: #0389c6; color: #fff !important; }
.pulsante--vuoto { color: #fff !important; border-color: rgba(255,255,255,.55); }
.pulsante--vuoto:hover { background: rgba(255,255,255,.14); border-color: #fff; }

.btn-primary { background: var(--blu); color: #fff; border-color: var(--blu); }
.btn-primary:hover, .btn-primary:focus { background: var(--blu-scuro); border-color: var(--blu-scuro); color: #fff; }
.btn-default { background: transparent; color: var(--blu); border-color: var(--blu); }
.btn-default:hover, .btn-default:focus { background: var(--blu); color: #fff; }

/* =========================================================================
   2. Testata del sito
   ========================================================================= */

.top-menu { background: var(--blu-scuro); font-size: 14px; padding: 8px 0; }
.top-menu p, .top-menu a, .orari-top p { color: rgba(255,255,255,.84); }
.top-menu a:hover { color: #fff; }
.top-menu span, .orari-top span { color: rgba(255,255,255,.52); margin-right: 5px; }

.sticky_navigation { background: var(--bianco); border-bottom: 1px solid var(--linea); box-shadow: none; }
.navbar-nav > li > a {
	font-family: 'Poppins', sans-serif;
	font-size: 14px; font-weight: 500;
	letter-spacing: .035em;
	color: var(--inchiostro);
	padding: 26px 16px;
	position: relative;
	background: transparent;
}
.navbar-nav > li > a:hover { color: var(--blu); background: transparent; }
.navbar-nav > li > a::after {
	content: '';
	position: absolute;
	left: 16px; right: 16px; bottom: 17px;
	height: 2px; border-radius: 2px;
	background: var(--verde);
	transform: scaleX(0); transform-origin: left;
	transition: transform .25s ease;
}
.navbar-nav > li.active > a::after, .navbar-nav > li > a:hover::after { transform: scaleX(1); }
.navbar-nav > li.active > a { color: var(--blu) !important; }

.logo-image .normal-span {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	letter-spacing: .02em !important;
	color: var(--blu) !important;
	line-height: 1.15;
}

/* =========================================================================
   3. Hero della home
   ========================================================================= */

.ingresso {
	position: relative; overflow: hidden;
	background: var(--blu-scuro);
	display: flex; align-items: center;
	min-height: 600px;
	padding: 74px 0;
}
.ingresso__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Velatura piu' leggera di prima: la foto e' un luogo vero, va vista. */
.ingresso__velo {
	position: absolute; inset: 0;
	background: linear-gradient(102deg,
		rgba(10,40,54,.88) 0%, rgba(10,40,54,.7) 42%,
		rgba(10,40,54,.24) 74%, rgba(10,40,54,.04) 100%);
}
/* NIENTE width qui: questo elemento ha anche la classe .container, a cui
   Bootstrap assegna una larghezza fissa e centrata. Imporre width:100%
   la annullava e il titolo finiva incollato al bordo della finestra,
   disallineato rispetto al logo e al resto della pagina. */
.ingresso__contenuto { position: relative; }
/* Stato di apertura e luogo sulla stessa riga, in cima: sono le due
   informazioni che il visitatore cerca, e cosi' la colonna di testo
   scende da cinque blocchi sovrapposti a quattro. */
.ingresso__apertura { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.ingresso__luogo { color: rgba(255,255,255,.78) !important; font-size: 15px; letter-spacing: .04em; margin: 0; }
.ingresso__titolo {
	font-family: 'Poppins', sans-serif;
	font-size: 50px; font-weight: 700;
	line-height: 1.08; letter-spacing: -.025em;
	color: #fff; margin: 0 0 16px; max-width: 15ch;
	text-wrap: balance;
}
.ingresso__sottotitolo {
	color: rgba(255,255,255,.9) !important;
	font-size: 19px; line-height: 1.6;
	max-width: 42ch; margin: 0 0 30px;
	text-wrap: balance;
}

/* --- Stato di apertura: l'unico elemento a voce alta --------------------- */
.stato {
	display: inline-flex; align-items: center; gap: 10px;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.24);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	border-radius: var(--raggio-pill);
	padding: 10px 22px 10px 17px;
	margin-bottom: 0;
}
.stato__testo { color: #fff; font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500; }
.stato__spia { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.stato--aperti .stato__spia { background: #7ed19b; animation: pulsa 2.6s infinite; }
.stato--chiusi .stato__spia { background: var(--grigio-tenue); }

@keyframes pulsa {
	0%   { box-shadow: 0 0 0 0 rgba(126,209,155,.6); }
	70%  { box-shadow: 0 0 0 10px rgba(126,209,155,0); }
	100% { box-shadow: 0 0 0 0 rgba(126,209,155,0); }
}

.ingresso__azioni { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Fascia orari --------------------------------------------------------
   Non tocca i bordi: e' una scheda appoggiata, sovrapposta all'hero. */
.fascia-orari { background: transparent; border: 0; padding: 0; margin-top: -42px; position: relative; z-index: 5; }
.fascia-orari__griglia {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
	background: var(--bianco);
	border-radius: var(--raggio);
	box-shadow: var(--ombra-alta);
	padding: 26px 30px;
}
.fascia-orari__griglia > div + div { border-left: 1px solid var(--linea); padding-left: 26px; }
.fascia-orari__griglia > div { padding-right: 20px; }
.fascia-orari__voce { display: block; font-size: 13px; letter-spacing: .04em; color: var(--verde); font-weight: 600; margin-bottom: 4px; }
.fascia-orari strong { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; color: var(--inchiostro); }
.fascia-orari a { color: var(--blu); }

/* =========================================================================
   4. Testata delle sottopagine
   ========================================================================= */

.testata {
	position: relative; overflow: hidden;
	background: var(--blu-scuro);
	display: flex; align-items: center;
	min-height: 340px;
	padding: 56px 0;
}
.testata__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.testata__velo {
	position: absolute; inset: 0;
	background: linear-gradient(102deg, rgba(10,40,54,.9) 0%, rgba(10,40,54,.7) 45%, rgba(10,40,54,.28) 100%);
}
.testata__contenuto { position: relative; }   /* vedi nota sopra */
.testata__occhiello { color: rgba(255,255,255,.72) !important; font-size: 14px; letter-spacing: .05em; margin: 0 0 8px; }
.testata__titolo {
	font-family: 'Poppins', sans-serif;
	font-size: 44px; font-weight: 700;
	letter-spacing: -.02em; color: #fff; margin: 0 0 12px;
}
.testata__testo { color: rgba(255,255,255,.85) !important; font-size: 18px; max-width: 50ch; margin: 0; }

.briciole { background: var(--bianco); border-bottom: 1px solid var(--linea); padding: 13px 0; font-size: 14px; }
.briciole a { color: var(--grigio); }
.briciole a:hover { color: var(--blu); }
.briciole span { color: var(--grigio-tenue); margin: 0 8px; }
.briciole__attuale { color: var(--inchiostro); margin-left: 0; }

/* =========================================================================
   5. Schede
   ========================================================================= */

/* Quattro colonne, non tre: i servizi sono sette e in una griglia da tre
   l'ultima riga restava con una scheda spaiata. Con l'ottava tessera
   (l'invito a telefonare) le righe si chiudono sempre piene: 4+4 oppure 2+2+2+2. */
.servizi-griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.scheda-servizio {
	display: flex; flex-direction: column;
	background: var(--bianco);
	border: 1px solid var(--linea);
	border-radius: var(--raggio);
	overflow: hidden;
	color: inherit;
	transition: border-color .22s, transform .22s, box-shadow .22s;
}
.scheda-servizio:hover, .scheda-servizio:focus-visible {
	border-color: transparent;
	transform: translateY(-4px);
	box-shadow: var(--ombra-alta);
	color: inherit;
}
.scheda-servizio__foto { display: block; overflow: hidden; background: var(--carta-scura); }
.scheda-servizio__foto img { width: 100%; height: 172px; object-fit: cover; display: block; transition: transform .55s ease; }
.scheda-servizio:hover .scheda-servizio__foto img { transform: scale(1.05); }
.scheda-servizio__corpo { display: block; padding: 22px 24px 26px; }
.scheda-servizio__titolo {
	display: block; font-family: 'Poppins', sans-serif;
	font-size: 18px; font-weight: 600; color: var(--inchiostro);
	margin-bottom: 8px; line-height: 1.3;
}
.scheda-servizio__titolo i { color: var(--verde); margin-right: 9px; font-size: 19px; }
.scheda-servizio__testo { display: block; color: var(--grigio); font-size: 16px; line-height: 1.6; }

.scheda-servizio--invito {
	background: var(--verde-tinta);
	border-color: transparent;
	justify-content: center;
}
.scheda-servizio--invito .scheda-servizio__corpo { padding: 26px 24px; }
.scheda-servizio--invito .scheda-servizio__titolo i { color: var(--verde); }
.scheda-servizio--invito .scheda-servizio__testo { color: #4e5c48; }
.scheda-servizio__numero {
	display: block;
	margin-top: 14px;
	font-family: 'Poppins', sans-serif;
	font-size: 20px; font-weight: 600;
	color: var(--verde);
}

/* --- Schede senza foto (gli spazi della clinica) ------------------------- */
.schede-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.scheda {
	background: var(--bianco);
	border: 1px solid var(--linea);
	border-radius: var(--raggio);
	padding: 32px 28px;
	transition: box-shadow .22s, transform .22s, border-color .22s;
}
.scheda:hover { border-color: transparent; box-shadow: var(--ombra); transform: translateY(-3px); }
.scheda__icona {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--verde-tinta);
	margin-bottom: 18px;
}
.scheda__icona i { font-size: 24px; color: var(--verde); }
.scheda h3 { margin: 0 0 9px; }
.scheda p { margin: 0; font-size: 16px; }

/* =========================================================================
   6. Blocchi a due colonne
   ========================================================================= */

.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.due-colonne--specchio .due-colonne__figura { order: 2; }
.due-colonne__figura img {
	width: 100%; height: 420px;
	object-fit: cover; display: block;
	border-radius: var(--raggio);
	box-shadow: var(--ombra);
}
.due-colonne__testo h2 { margin-top: 0; }
.due-colonne__azione { margin-top: 28px; margin-bottom: 0; }

/* I numeri della struttura sono l'argomento, non decorazione:
   per questo hanno peso tipografico e non un'icona sopra. */
.numeri { list-style: none; padding: 0; margin: 28px 0 0; }
.numeri li { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-top: 1px solid var(--linea); }
.numeri li:last-child { border-bottom: 1px solid var(--linea); }
.numeri strong {
	font-family: 'Poppins', sans-serif;
	font-size: 34px; font-weight: 300; color: var(--verde);
	line-height: 1; min-width: 46px; font-variant-numeric: tabular-nums;
}
.numeri span { color: var(--grigio); font-size: 16px; }

.spunte { list-style: none; padding: 0; margin: 20px 0 0; }
.spunte li { position: relative; padding-left: 30px; margin-bottom: 11px; }
.spunte li::before {
	content: '';
	position: absolute; left: 0; top: 9px;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--verde-tinta);
	box-shadow: inset 0 0 0 4px var(--verde);
}

/* --- Indice dei servizi -------------------------------------------------- */
.indice-servizi { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.indice-servizi a {
	display: inline-flex; align-items: center; gap: 9px;
	background: var(--bianco);
	border: 1px solid var(--linea);
	border-radius: var(--raggio-pill);
	padding: 11px 22px;
	font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500;
	color: var(--inchiostro);
	transition: border-color .2s, color .2s, box-shadow .2s;
}
.indice-servizi a:hover { border-color: var(--verde); color: var(--verde); box-shadow: var(--ombra); }
.indice-servizi i { color: var(--verde); font-size: 17px; }

/* =========================================================================
   7. Équipe
   -------------------------------------------------------------------------
   Niente ritratti: le immagini precedenti erano due clipart generiche
   ripetute per sette persone. Le iniziali in un cerchio verde danno un
   riferimento visivo senza fingere fotografie che non ci sono.
   L'elenco delle persone sta in equipe-dati.php.
   ========================================================================= */

/* Quattro colonne, e due schede che ne occupano due ciascuna — il
   direttore sanitario e l'infermiera veterinaria, che sono anche i due
   ruoli diversi da tutti gli altri. Con dieci persone fanno 2 + 8 + 2 = 12
   celle: tre righe piene, nessun buco in fondo. Il conto va rifatto se
   l'elenco in equipe-dati.php cambia di numero. */
.equipe { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.equipe__voce--larga { grid-column: span 2; }
.equipe__voce {
	background: var(--bianco);
	border: 1px solid var(--linea);
	border-radius: var(--raggio);
	padding: 24px 26px;
	display: flex; align-items: center; gap: 16px;
}
.equipe__iniziali {
	flex: 0 0 46px; width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--verde-tinta); color: var(--verde);
	display: flex; align-items: center; justify-content: center;
	font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 600;
}
.equipe__nome { display: block; font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 500; color: var(--inchiostro); }
.equipe__ruolo { display: block; color: var(--grigio-tenue); font-size: 15px; }

/* La specializzazione e l'incarico stanno SOTTO il ruolo, non al suo
   posto: sono tutti medici veterinari, alcuni hanno in più un ambito.
   Il colore pieno li distingue dal ruolo, che è grigio. */
.equipe__ambito,
.equipe__incarico {
	display: block;
	margin-top: 2px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px; font-weight: 500;
	color: var(--verde);
}
.equipe__incarico { color: var(--blu); }
.equipe__voce--guida { background: var(--verde-tinta); border-color: transparent; }
.equipe__voce--guida .equipe__iniziali { background: var(--verde); color: #fff; }
.equipe__voce--guida .equipe__incarico { color: var(--verde); font-weight: 600; }

/* =========================================================================
   8. Riquadri di invito
   -------------------------------------------------------------------------
   Il blu non taglia piu' la pagina da bordo a bordo: e' un riquadro
   appoggiato sulla carta, con gli angoli morbidi.
   ========================================================================= */

.invito, .visita {
	background: var(--blu-scuro);
	border-radius: var(--raggio);
	padding: 48px 52px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
	align-items: center;
}
.invito h2, .visita h2 { color: #fff; margin-top: 0; margin-bottom: 12px; }
.invito p, .visita__testo p { color: rgba(255,255,255,.8) !important; max-width: 44ch; margin-bottom: 0; }
.visita__testo p { margin-bottom: 28px; }
.invito__azioni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.visita__testo .pulsante { margin-right: 10px; margin-bottom: 10px; }
.visita { align-items: start; }

.visita__riga {
	display: grid; grid-template-columns: 140px 1fr; gap: 18px;
	padding: 14px 0;
	border-top: 1px solid rgba(255,255,255,.16);
	align-items: baseline;
}
.visita__riga:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.visita__riga span { color: rgba(255,255,255,.55); font-size: 15px; }
.visita__riga strong { font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 16px; color: #fff; line-height: 1.5; }
.visita__riga a { color: #fff; }
.visita__riga a:hover { color: var(--ciano); }

/* =========================================================================
   9. Carosello, gallery, lightbox
   ========================================================================= */


.galleria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0; }
.galleria-cella { width: auto; padding: 0; }
.galleria-item {
	display: block; position: relative; overflow: hidden;
	border-radius: var(--raggio);
	background: var(--inchiostro);
	box-shadow: var(--ombra);
}
.galleria-item img { width: 100%; height: 250px; object-fit: cover; display: block; transition: transform .55s ease, opacity .3s; }
.galleria-item:hover img { transform: scale(1.05); opacity: .88; }
.galleria-item span {
	position: absolute; left: 0; right: 0; bottom: 0;
	background: linear-gradient(transparent, rgba(10,40,54,.86));
	color: #fff; padding: 42px 18px 16px;
	font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500;
}

.lightbox { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(20,17,13,.95); align-items: center; justify-content: center; }
.lightbox.aperto { display: flex; }
.lightbox__fig { margin: 0; max-width: 88%; max-height: 88vh; text-align: center; }
.lightbox__fig img { max-width: 100%; max-height: 78vh; border-radius: var(--raggio); }
.lightbox__fig figcaption { color: rgba(255,255,255,.82); margin-top: 16px; font-size: 15px; }
.lightbox button { background: none; border: 0; color: #fff; cursor: pointer; opacity: .7; transition: opacity .2s; }
.lightbox button:hover { opacity: 1; }
.lightbox__chiudi { position: absolute; top: 18px; right: 26px; font-size: 40px; line-height: 1; }
.lightbox__prec, .lightbox__succ { font-size: 32px; padding: 22px 16px; }

/* =========================================================================
   10. Modulo contatti
   ========================================================================= */

.contact-page-form { background: var(--bianco); border-top: 1px solid var(--linea); }
.form-control {
	border: 1px solid var(--linea);
	border-radius: var(--raggio-sm);
	box-shadow: none; height: auto;
	padding: 14px 17px; font-size: 16px;
	color: var(--inchiostro); background: var(--carta);
	transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.form-control:focus { border-color: var(--verde); background: var(--bianco); box-shadow: 0 0 0 3px rgba(91,117,83,.14); }
.form-control::placeholder { color: var(--grigio-tenue); }
.privacy-consenso { font-size: 15px; color: var(--grigio); }

.address-details { background: var(--carta); border-radius: var(--raggio); padding: 32px 30px; }
.address-details ul { list-style: none; padding: 0; }
.address-details li { display: flex; gap: 13px; margin-bottom: 14px; align-items: flex-start; }
.address-details i { color: var(--verde); font-size: 18px; margin-top: 5px; }
.address-details h2 { font-size: 25px; margin-top: 0; }
.address-details h3 { font-size: 18px; }

.blocco-consenso {
	background: var(--carta-scura);
	border: 1px dashed var(--linea);
	border-radius: var(--raggio);
	padding: 60px 26px; text-align: center; color: var(--grigio);
}
.blocco-consenso h2 { font-size: 21px; margin-top: 0; }
.blocco-consenso p { max-width: 58ch; margin: 0 auto 22px; font-size: 16px; }
.attiva-contenuto {
	display: inline-block; background: var(--verde); color: #fff; border: 0;
	border-radius: var(--raggio-pill); padding: 13px 30px;
	font-family: 'Poppins', sans-serif; font-weight: 500; cursor: pointer;
}
.attiva-contenuto:hover { background: #4c6345; }
.blocco-consenso .link-mappa { display: block; margin-top: 16px; font-size: 14px; }

/* =========================================================================
   11. Piede pagina
   ========================================================================= */

.footer { background: var(--blu-scuro); }
.footer-widget { padding: 64px 0 44px; }
.footer h2.icon-head {
	font-size: 15px; font-weight: 600; letter-spacing: .03em;
	color: #fff; margin: 0 0 20px; padding-bottom: 13px;
	border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-about ul, .footer-nav-list ul { list-style: none; padding: 0; margin: 0; }
.footer-about li { display: flex; gap: 12px; margin-bottom: 12px; align-items: flex-start; }
.footer-about li, .footer-nav-list a { color: rgba(255,255,255,.74) !important; font-size: 15px; }
.footer-about i { color: var(--ciano); font-size: 16px; margin-top: 5px; }
.footer-about a { color: rgba(255,255,255,.74); }
.footer-about a:hover, .footer-nav-list a:hover { color: #fff !important; }
.footer-nav-list li { margin-bottom: 10px; }
.footer-nav-list i { font-size: 10px; margin-right: 8px; color: var(--ciano); }
.social-list img { border-radius: 4px; opacity: .85; }
.social-list img:hover { opacity: 1; }

.copyright-container { background: rgba(0,0,0,.2); padding: 18px 0; border-top: 1px solid rgba(255,255,255,.08); }
.copyrights { color: rgba(255,255,255,.58) !important; font-size: 14px; margin: 0; }
.copyrights a { color: rgba(255,255,255,.74); }
.copyrights a:hover { color: #fff; }

/* =========================================================================
   12. Banner cookie ed elementi flottanti
   ========================================================================= */

.cookie-banner {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
	background: var(--inchiostro); color: rgba(255,255,255,.84);
	padding: 22px 26px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 22px;
	box-shadow: 0 -4px 30px rgba(0,0,0,.3);
	font-size: 15px; line-height: 1.6;
}
.cookie-banner__testo { flex: 1 1 460px; }
.cookie-banner__testo strong { display: block; margin-bottom: 5px; font-family: 'Poppins', sans-serif; font-size: 16px; color: #fff; }
.cookie-banner__testo p { margin: 0; color: rgba(255,255,255,.74) !important; }
.cookie-banner__testo a { color: #7fd3f7; text-decoration: underline; }
.cookie-banner__azioni { display: flex; gap: 12px; flex: 0 0 auto; }

/* I due pulsanti hanno lo stesso peso grafico: e' un requisito esplicito
   delle linee guida del Garante, non una scelta estetica. */
.cookie-btn {
	border: 1.5px solid var(--ciano);
	border-radius: var(--raggio-pill);
	padding: 12px 32px;
	font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 500;
	cursor: pointer; min-width: 132px; transition: background-color .2s;
}
.cookie-btn--accetta { background: var(--ciano); color: #fff; }
.cookie-btn--accetta:hover { background: #0389c6; }
.cookie-btn--rifiuta { background: transparent; color: var(--ciano); }
.cookie-btn--rifiuta:hover { background: rgba(4,161,232,.14); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10001; background: var(--blu); color: #fff; padding: 12px 20px; font-weight: 600; }
.skip-link:focus { left: 0; color: #fff; }

.torna-su {
	position: fixed; right: 22px; bottom: 22px;
	width: 48px; height: 48px; line-height: 48px; text-align: center;
	background: var(--verde); color: #fff !important;
	border-radius: 50%;
	opacity: 0; visibility: hidden;
	transition: opacity .3s, visibility .3s, background-color .2s;
	z-index: 900; font-size: 19px; box-shadow: var(--ombra);
}
.torna-su.visibile { opacity: 1; visibility: visible; }
.torna-su:hover { background: #4c6345; }

.chiama-mobile {
	display: block; text-align: center;
	background: var(--verde); color: #fff !important;
	padding: 15px; font-family: 'Poppins', sans-serif;
	font-weight: 500; font-size: 17px;
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
}

.campo-trappola { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.esito-invio { margin-bottom: 22px; border-radius: var(--raggio-sm); }

/* Pagine di testo lungo: privacy, cookie policy */
.sezione table.table, .container table.table { background: var(--bianco); border-radius: var(--raggio-sm); overflow: hidden; }

/* =========================================================================
   13. Schermi piccoli
   ========================================================================= */

@media (max-width: 991px) {
	.servizi-griglia, .schede-griglia, .equipe, .galleria { grid-template-columns: repeat(2, 1fr); }
	.equipe__voce--larga { grid-column: span 2; }
	.due-colonne, .visita, .invito { grid-template-columns: 1fr; gap: 36px; }
	.due-colonne__figura, .due-colonne--specchio .due-colonne__figura { order: -1; }
	.due-colonne__figura img, 	.invito__azioni { justify-content: flex-start; }
	.ingresso__titolo { font-size: 42px; }
	.ingresso { min-height: 540px; }
	.fascia-orari__griglia { grid-template-columns: 1fr 1fr; gap: 18px; }
	.fascia-orari__griglia > div:nth-child(3) { border-left: 0; padding-left: 0; grid-column: 1 / -1; border-top: 1px solid var(--linea); padding-top: 18px; }
}

@media (max-width: 767px) {
	body { font-size: 16px; padding-bottom: 54px; }
	.sezione, section { padding: 52px 0; }
	h2 { font-size: 27px; }
	.top-text p { font-size: 17px; }

	.ingresso { min-height: 0; padding: 58px 0; }
	.ingresso__titolo { font-size: 34px; max-width: none; }
	.ingresso__sottotitolo { font-size: 17px; }
	.ingresso__azioni { flex-direction: column; align-items: stretch; }
	.pulsante { text-align: center; }

	.fascia-orari { margin-top: -26px; }
	.fascia-orari__griglia { grid-template-columns: 1fr; padding: 22px 24px; }
	.fascia-orari__griglia > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--linea); padding-top: 15px; }
	.fascia-orari__griglia > div:nth-child(3) { padding-top: 15px; }

	.testata { min-height: 240px; padding: 42px 0; }
	.testata__titolo { font-size: 31px; }
	.testata__testo { font-size: 16px; }

	.servizi-griglia, .schede-griglia, .equipe, .galleria { grid-template-columns: 1fr; }
	.equipe__voce--larga { grid-column: auto; }
	.scheda-servizio__foto img { height: 190px; }
	.invito, .visita { padding: 34px 26px; }
	.visita__riga { grid-template-columns: 1fr; gap: 4px; }
	.visita__testo .pulsante { display: block; margin-right: 0; text-align: center; }
	.numeri strong { font-size: 28px; min-width: 38px; }

	.navbar-nav > li > a { padding: 13px 16px; }
	.navbar-nav > li > a::after { display: none; }
	.navbar-nav > li.active > a { background: var(--verde-tinta); }

	.torna-su { bottom: 70px; }
	.cookie-banner { padding: 16px; }
	.cookie-banner__azioni { width: 100%; }
	.cookie-btn { flex: 1; min-width: 0; padding: 12px 8px; }
	.lightbox__prec, .lightbox__succ { padding: 10px 6px; font-size: 26px; }
	.lightbox__fig { max-width: 94%; }
}

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

/* =========================================================================
   14. CORREZIONI AI DIFETTI DEL TEMPLATE
   -------------------------------------------------------------------------
   Tutto quello che sta qui sotto serve a neutralizzare regole di style.css
   che rovinavano la pagina. Non sono scelte estetiche mie: sono riparazioni.
   ========================================================================= */

/* --- La forma grigia inclinata dietro al menu ----------------------------
   style.css disegnava un parallelogramma #c1c1c1 dietro alla navigazione
   (background + skewX(-45deg)) e poi raddrizzava le voci con uno skew
   opposto. Un residuo del template. Qui si toglie tutto. */
.header .top-container .navbar-primary .sticky_navigation .menu-part {
	background: transparent;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}
.header .top-container .navbar-primary .sticky_navigation .menu-part .navbar-collapse .nav.navbar-nav {
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
}

/* La coda del parallelogramma: uno pseudo-elemento grigio largo quanto il
   contenitore e spostato a right:-779px, che riempiva il bordo destro. */
.header .top-container .navbar-primary .sticky_navigation .menu-part::after,
.header .top-container .navbar-primary .sticky_navigation .search-part { display: none; }

/* Il colore delle voci di menu: il template lo imponeva con un selettore
   lungo sette livelli, che vinceva sulla mia regola. */
.header .top-container .navbar-primary .sticky_navigation .menu-part .navbar-collapse .nav.navbar-nav li a {
	color: var(--inchiostro);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .035em;
	padding: 26px 16px;
}
.header .top-container .navbar-primary .sticky_navigation .menu-part .navbar-collapse .nav.navbar-nav li:hover a,
.header .top-container .navbar-primary .sticky_navigation .menu-part .navbar-collapse .nav.navbar-nav li.active a {
	border-bottom: 0;
	padding-bottom: 26px;
	color: var(--blu);
}
.header .top-container .navbar-primary .sticky_navigation .menu-part .navbar-collapse .nav.navbar-nav li {
	margin-right: 0;
}

/* --- Pulsanti secondari che sembravano disattivati -----------------------
   style.css: .btn.btn-default { background: #8c8a8b } — due classi, quindi
   vinceva sulla mia regola con una sola. Da qui il pulsante grigio spento. */
.btn.btn-default {
	background: transparent;
	border: 1.5px solid var(--blu);
	color: var(--blu);
}
.btn.btn-default:hover, .btn.btn-default:focus {
	background: var(--blu);
	border-color: var(--blu);
	color: #fff;
}
.btn.btn-primary {
	background: var(--blu);
	border: 1.5px solid var(--blu);
	color: #fff;
}
.btn.btn-primary:hover, .btn.btn-primary:focus {
	background: var(--blu-scuro);
	border-color: var(--blu-scuro);
	color: #fff;
}

/* --- Griglie dentro a .container -----------------------------------------
   Bootstrap aggiunge a .container due pseudo-elementi per il clearfix.
   Dentro a un display:grid diventano celle vere e sfasano tutta la riga.
   Protezione valida anche per le griglie future. */
.fascia-orari__griglia::before, .fascia-orari__griglia::after,
.servizi-griglia::before, .servizi-griglia::after,
.schede-griglia::before, .schede-griglia::after,
.due-colonne::before, .due-colonne::after,
.equipe::before, .equipe::after,
.galleria::before, .galleria::after,
.visita::before, .visita::after,
.invito::before, .invito::after { display: none !important; }

/* --- Barra dei contatti in cima ------------------------------------------
   Le etichette erano troppo scariche per essere lette. */
.top-menu p, .top-menu a, .orari-top p { color: rgba(255,255,255,.94); }
.top-menu span, .orari-top span { color: rgba(255,255,255,.68); }
.top-menu a:hover { color: #fff; text-decoration: underline; }

/* --- Testo dell'hero sopra alla fotografia -------------------------------
   La foto ha zone chiare che mangiavano il sottotitolo. */
.ingresso__apertura + .ingresso__titolo { margin-top: 0; }
.ingresso__titolo { text-shadow: 0 2px 18px rgba(6,26,36,.5); }
.ingresso__sottotitolo, .ingresso__luogo { text-shadow: 0 1px 12px rgba(6,26,36,.65); }
.testata__titolo { text-shadow: 0 2px 18px rgba(6,26,36,.5); }
.testata__testo, .testata__occhiello { text-shadow: 0 1px 12px rgba(6,26,36,.65); }

/* --- Spazio vuoto in cima alle sottopagine -------------------------------
   Sotto le briciole di pane 84px erano troppi: la pagina sembrava vuota. */
.main > .sezione:first-child { padding-top: 52px; }

/* =========================================================================
   16. BARRA DEI CONTATTI IN CIMA
   -------------------------------------------------------------------------
   Nel template quel testo e' #606060 su fondo scuro: contrasto 1,9:1.
   Sembrava disattivato perche' di fatto era illeggibile. E i selettori
   originali hanno tre classi, quindi vincevano sulle mie.

   Scelta: fondo chiaro e testo scuro. Sono informazioni di servizio
   (telefono, e-mail, orari), non devono gridare: devono solo leggersi.

   Se preferisci tornare alla barra scura, sostituisci i due valori
   marcati "VARIANTE SCURA" qui sotto.
   ========================================================================= */

.header .top-container .top-menu {
	background: var(--carta-scura);          /* VARIANTE SCURA: var(--blu-scuro) */
	border-bottom: 1px solid var(--linea);
	padding: 11px 0;
}

.header .top-container .top-menu p,
.header .top-container .top-menu .call-now p,
.header .top-container .top-menu .email p,
.header .top-container .top-menu .orari-top p {
	color: var(--inchiostro);                /* VARIANTE SCURA: rgba(255,255,255,.92) */
	font-size: 14px;
	margin: 0;
}

.header .top-container .top-menu .call-now p a,
.header .top-container .top-menu .email p a {
	color: var(--blu);                       /* VARIANTE SCURA: #fff */
	font-weight: 600;
}
.header .top-container .top-menu .call-now p:hover a,
.header .top-container .top-menu .email p:hover a,
.header .top-container .top-menu a:hover {
	color: var(--ciano);
	text-decoration: underline;
}

/* Le etichette ("Contattaci:", "E-mail:", "Orari:") restano piu' tenui
   del dato che introducono, ma senza scendere sotto la soglia leggibile. */
.header .top-container .top-menu span,
.header .top-container .top-menu .orari-top span {
	color: var(--grigio);                    /* VARIANTE SCURA: rgba(255,255,255,.62) */
	font-weight: 400;
	margin-right: 5px;
}

/* Il sottotitolo dell'hero andava a capo su tre righe corte. */
.ingresso__sottotitolo { max-width: 46ch; }

/* =========================================================================
   17. GALLERIA SCORREVOLE (.diapo)
   -------------------------------------------------------------------------
   Sostituisce owl carousel. Punto chiave: la pista e' un contenitore con
   scorrimento orizzontale reale, quindi le foto sono visibili e
   trascinabili anche se il JavaScript non parte. Prima invece
   owl.carousel.css teneva il blocco a display:none finche' lo script non
   lo attivava: se qualcosa andava storto restava un buco nella pagina.
   ========================================================================= */

.diapo {
	position: relative;
	border-radius: var(--raggio);
	overflow: hidden;
	box-shadow: var(--ombra);
	background: var(--carta-scura);
}
.diapo:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }

.diapo__pista {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.diapo__pista::-webkit-scrollbar { display: none; }

.diapo__voce {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	scroll-snap-align: center;
}
.diapo__voce img {
	display: block;
	width: 100%;
	height: 420px;
	object-fit: cover;
}
.diapo__voce figcaption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	background: linear-gradient(transparent, rgba(10,40,54,.88));
	color: #fff;
	padding: 64px 26px 30px;
	font-family: 'Poppins', sans-serif;
	font-size: 19px;
	font-weight: 500;
}

/* --- Frecce: grandi, sempre visibili, con area di tocco adeguata -------- */
.diapo__freccia {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px; height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.94);
	color: var(--blu);
	font-size: 26px;
	line-height: 44px;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(10,40,54,.3);
	transition: background-color .2s, transform .2s;
	z-index: 2;
	padding: 0;
}
.diapo__freccia:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.diapo__freccia--prec { left: 14px; }
.diapo__freccia--succ { right: 14px; }

/* --- Pallini ------------------------------------------------------------ */
.diapo__pallini {
	position: absolute;
	left: 0; right: 0; bottom: 14px;
	display: flex;
	justify-content: center;
	gap: 7px;
	z-index: 2;
}
.diapo__pallino {
	width: 9px; height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.5);
	cursor: pointer;
	transition: width .25s, background-color .25s;
}
.diapo__pallino.attivo { background: #fff; width: 26px; border-radius: 5px; }

@media (max-width: 991px) {
	.diapo__voce img { height: 320px; }
}
@media (max-width: 767px) {
	.diapo__voce img { height: 250px; }
	.diapo__voce figcaption { font-size: 16px; padding: 46px 18px 26px; }
	.diapo__freccia { width: 40px; height: 40px; line-height: 38px; font-size: 22px; }
	.diapo__freccia--prec { left: 8px; }
	.diapo__freccia--succ { right: 8px; }
}

/* Le due colonne partono dall'alto: con l'allineamento centrato una
   colonna piu' corta lasciava spazio vuoto sopra e sotto. */
.due-colonne { align-items: start; }
.due-colonne__testo { padding-top: 4px; }

/* =========================================================================
   18. SECONDO GIRO DI CORREZIONI
   -------------------------------------------------------------------------
   Tre problemi segnalati: il marchio andava a capo, il testo delle pagine
   era piu' piccolo del previsto e nel riquadro Contatti l'occhiello
   "Modulo di contatto" usciva dal bordo.
   ========================================================================= */

/* --- 18.1 Marchio in testata, su una riga sola --------------------------- */
/* Il template scriveva il nome dentro uno <span> con un <br> in mezzo e una
   larghezza fissa di 220px. Ora e' una riga sola che non va mai a capo:
   e' la ragione del white-space e del flex, non l'estetica. */

.marchio {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	white-space: nowrap;
}
.marchio__segno { flex: 0 0 auto; float: none !important; margin: 0 !important; }

.logo-image .normal-span,
.header .top-container .navbar-primary .sticky_navigation .site-logo-part .navbar-header .logo-image a span {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .02em;
	color: var(--blu);
	line-height: 1.2;
	white-space: nowrap;
}

/* Fra 992 e 1199px la colonna del logo si stringe: il nome rimpicciolisce
   quel tanto che basta a stare su una riga senza toccare il menu. */
@media (min-width: 992px) and (max-width: 1199px) {
	.logo-image .normal-span,
	.header .top-container .navbar-primary .sticky_navigation .site-logo-part .navbar-header .logo-image a span {
		font-size: 13px;
		letter-spacing: 0;
	}
	.marchio { gap: 8px; }
}
/* Sotto i 480px il nome per intero non ci sta accanto al tasto del menu:
   li' si accorcia ancora, restando comunque su una riga. */
@media (max-width: 480px) {
	.logo-image .normal-span,
	.header .top-container .navbar-primary .sticky_navigation .site-logo-part .navbar-header .logo-image a span {
		font-size: 12.5px;
		letter-spacing: 0;
	}
}

/* --- 18.2 Il corpo del testo alla misura prevista ------------------------ */
/* style.css contiene una regola  p { font-size: 14px; line-height: 24px }
   che custom.css non aveva mai sovrascritto: la scala 17px / interlinea
   1,72 decisa a progetto non e' mai stata in vigore per i paragrafi.
   Qui viene rimessa. Sotto, i componenti che hanno una misura propria
   se la riprendono, altrimenti erediterebbero i 17px. */

p {
	font-size: 17px;
	line-height: 1.72;
	margin: 0 0 18px;
}
p:last-child { margin-bottom: 0; }

.cookie-banner__testo p { font-size: 15px; line-height: 1.6; }
.help-block { font-size: 12px; }
.invito p, .visita__testo p { font-size: 17px; line-height: 1.7; }

/* --- 18.3 Respiro sotto i titoli ---------------------------------------- */
/* style.css azzerava il margine di h2 e h3: titolo e paragrafo restavano
   incollati. */
h2 { margin-bottom: 14px; }
h3 { margin-bottom: 10px; }
.top-text h2 { margin-bottom: 10px; }

/* --- 18.4 Le sezioni dei singoli servizi -------------------------------- */
.sezione--servizio .due-colonne { align-items: center; }
.sezione--servizio .due-colonne__testo p { max-width: 62ch; }
.sezione--servizio .due-colonne__testo h2 { margin-bottom: 16px; }
.sezione--servizio .spunte { margin-top: 22px; }
.sezione--servizio .spunte li { margin-bottom: 9px; line-height: 1.6; }

/* L'indice a pillole in cima non deve incollarsi al primo servizio. */
.sezione--indice { padding-bottom: 56px; }

/* --- 18.5 Il riquadro del modulo contatti -------------------------------- */
/* Il template dava al riquadro  padding: 0  e affidava la spaziatura al
   solo <form>. Occhiello, titolo e testo introduttivo stanno FUORI dal
   form: restavano quindi appiccicati al bordo, e l'occhiello sporgeva
   sopra il riquadro. La spaziatura ora e' sul riquadro, come dovrebbe. */

.contact-page-form .appoinment-form {
	display: block;
	position: relative;
	bottom: 0;                       /* il template lo alzava di 52px */
	padding: 46px 26px;              /* +15px di colonna Bootstrap = 41px reali */
	background: var(--bianco);
	border-radius: var(--raggio);
	box-shadow: var(--ombra);
	overflow: hidden;                /* contiene le colonne flottanti */
}
.contact-page-form .appoinment-form .help-block { font-size: 12px; margin-top: 10px; }
.contact-page-form .appoinment-form .contact-form-fields {
	display: flow-root;              /* contiene le colonne flottanti */
	padding: 0;
	margin-top: 26px;
}
/* Bootstrap mette il testo del consenso dentro una <label>, che nasce in
   grassetto: la frase piu' importante del modulo era tutta in neretto. */
.privacy-consenso label { font-weight: 400; }
.contact-page-form .appoinment-form .address-details {
	padding: 30px 28px;
	border-radius: var(--raggio);
}
/* Le voci dell'indirizzo avevano 50px di spazio sotto ciascuna: la colonna
   di destra risultava lunga il doppio del modulo. */
.contact-page-form .appoinment-form .address-details ul li { padding-bottom: 0; }

/* --- 18.6 Le pagine di solo testo ---------------------------------------- */
/* Privacy e cookie policy sono lunghe: a tutta larghezza le righe arrivavano
   a 95 caratteri, il doppio della misura leggibile. */
.main .col-md-10.col-md-offset-1 > p,
.main .col-md-10.col-md-offset-1 > ul,
.main .col-md-10.col-md-offset-1 > h2,
.main .col-md-10.col-md-offset-1 > h3 { max-width: 68ch; }
.main .col-md-10.col-md-offset-1 li { margin-bottom: 8px; }

/* --- 18.7 Marchio sui telefoni piu' stretti ------------------------------ */
/* Sotto i 375px lo spazio fra il bordo della pagina e il tasto del menu
   non basta piu' al nome per intero su una riga: il simbolo scende a 28px
   e il nome a 11px. A 320px, il telefono piu' stretto ancora in giro,
   restano 5px di margine dal tasto. Verificato a 320, 360 e 374px. */
@media (max-width: 374px) {
	.marchio { gap: 6px; }
	.marchio__segno { width: 28px; height: 28px; }
	.logo-image .normal-span,
	.header .top-container .navbar-primary .sticky_navigation .site-logo-part .navbar-header .logo-image a span {
		font-size: 11px;
		letter-spacing: -.01em;
	}
}

/* =========================================================================
   21. APPROFONDIMENTI
   -------------------------------------------------------------------------
   Pagine di lettura lunga. Tutte le scelte qui sotto servono a una cosa
   sola: reggere trecento righe di testo senza stancare.
   ========================================================================= */

/* --- 21.1 Il corpo della scheda ------------------------------------------ */
.scheda-appr { padding: 64px 0 84px; }

/* Colonna di lettura. La larghezza e' scelta contando i caratteri, non a
   occhio: in Source Sans Pro a 17px un carattere di prosa misura circa
   7,4px, quindi 560px danno una riga di poco piu' di settanta caratteri.
   Sopra i settantacinque l'occhio comincia a perdere il rigo. */
.corpo-appr,
.scheda-appr .in-breve,
.scheda-appr .faq,
.scheda-appr .nota-clinica,
.scheda-appr .correlati { max-width: 560px; margin-left: auto; margin-right: auto; }

/* style.css contiene una regola  section { padding: 72px 0 }  che colpisce
   anche questi blocchi, perche' sono <section>: sommata al margine faceva
   188px di vuoto fra la fine di un paragrafo e il titolo successivo.
   Lo spazio sopra un titolo deve essere maggiore di quello sotto, ma non
   dieci volte tanto. */
.blocco-appr { padding: 0; margin-bottom: 40px; }
.blocco-appr:last-child { margin-bottom: 0; }
.blocco-appr h2 {
	font-size: 26px;
	line-height: 1.28;
	margin-bottom: 16px;
	color: var(--inchiostro);
}
.blocco-appr .spunte { margin-top: 20px; }
.blocco-appr .spunte li { margin-bottom: 11px; line-height: 1.62; }

/* --- 21.2 Il riquadro "In breve" ----------------------------------------- */
/* Sta in cima perche' molte persone leggono solo quello: deve rispondere
   da solo, non introdurre. */
.in-breve {
	background: var(--verde-tinta);
	border-radius: var(--raggio);
	padding: 28px 32px;
	margin-bottom: 52px;
}
.in-breve__titolo {
	font-size: 13px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--verde);
	margin-bottom: 14px;
}
.in-breve ul { list-style: none; padding: 0; margin: 0; }
.in-breve li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 12px;
	font-size: 17px;
	line-height: 1.62;
	color: var(--inchiostro);
}
.in-breve li:last-child { margin-bottom: 0; }
.in-breve li::before {
	content: "";
	position: absolute;
	left: 0; top: .62em;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--verde);
}

/* --- 21.3 Domande frequenti ---------------------------------------------- */
/* Aperte, non a fisarmonica: e' la stessa ragione per cui i servizi non
   sono piu' schede a scomparsa. Cio' che e' nascosto non viene letto e
   non viene indicizzato. */
.faq {
	margin-top: 48px;
	padding: 36px 0 0;              /* annulla i 72px del template */
	border-top: 1px solid var(--linea);
}
.faq > h2 { font-size: 26px; margin-bottom: 26px; }
.faq__voce { margin-bottom: 26px; }
.faq__voce:last-child { margin-bottom: 0; }
.faq__domanda {
	font-size: 18px;
	line-height: 1.4;
	color: var(--blu);
	margin-bottom: 7px;
}
.faq__risposta { margin: 0; }

/* --- 21.4 La nota di chiusura -------------------------------------------- */
.nota-clinica {
	margin-top: 48px;
	padding: 22px 26px;
	background: var(--carta-scura);
	border-left: 4px solid var(--verde);
	border-radius: var(--raggio-sm);
}
.nota-clinica p { margin: 0; font-size: 16px; line-height: 1.65; }

/* --- 21.5 Voci correlate ------------------------------------------------- */
.correlati { margin-top: 52px; }
.correlati > h2 { font-size: 20px; margin-bottom: 18px; }
.correlati__lista {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	gap: 10px;
}
.correlati__lista a {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 14px 18px;
	background: var(--bianco);
	border: 1px solid var(--linea);
	border-radius: var(--raggio-sm);
	text-decoration: none;
	height: 100%;
	transition: border-color .18s, box-shadow .18s, transform .18s;
}
.correlati__lista a:hover,
.correlati__lista a:focus {
	border-color: var(--verde);
	box-shadow: var(--ombra);
	transform: translateY(-2px);
}
/* Larghezza fissa: le etichette hanno lunghezze diverse, e senza un
   incolonnamento i titoli partirebbero ognuno da un punto diverso. */
.correlati__cat {
	flex: 0 0 152px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--grigio-tenue);
}
.correlati__nome {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--blu);
	line-height: 1.3;
}
.correlati__tutti { margin: 16px 0 0; font-size: 16px; }

/* --- 21.6 La pagina indice ----------------------------------------------- */
.appr-categoria {
	font-size: 13px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--verde);
	margin: 44px 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--linea);
}
/* Quattro colonne per otto schede: due righe piene, nessuna tessera
   spaiata. E' lo stesso criterio della griglia dei servizi in home. */
.appr-griglia {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.appr-scheda__cat {
	display: block;
	font-size: 12px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--verde);
	margin-bottom: 8px;
}
.appr-scheda a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 26px 26px 22px;
	background: var(--bianco);
	border: 1px solid var(--linea);
	border-radius: var(--raggio);
	text-decoration: none;
	transition: border-color .18s, box-shadow .18s, transform .18s;
}
.appr-scheda a:hover,
.appr-scheda a:focus {
	border-color: var(--verde);
	box-shadow: var(--ombra-alta);
	transform: translateY(-3px);
}
.appr-scheda h3 {
	font-size: 20px;
	line-height: 1.25;
	color: var(--inchiostro);
	margin: 0 0 10px;
}
.appr-scheda p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--grigio);
	margin: 0 0 16px;
	flex: 1 1 auto;
}
.appr-scheda__vai {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 15px;
	color: var(--blu);
}

/* --- 21.7 Il rimando dalla pagina Servizi -------------------------------- */
.rimando-appr { margin-top: 22px; }
.rimando-appr a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	background: var(--verde-tinta);
	border-radius: var(--raggio-pill);
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: var(--verde);
	text-decoration: none;
	margin: 0 8px 8px 0;
	transition: background .18s;
}
.rimando-appr a:hover,
.rimando-appr a:focus { background: #e2e9d9; color: var(--verde); }

/* --- 21.8 Schermi stretti ------------------------------------------------ */
@media (max-width: 991px) {
	.appr-griglia { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.scheda-appr { padding: 44px 0 60px; }
	.appr-griglia { grid-template-columns: 1fr; }
	.correlati__lista a { flex-direction: column; align-items: flex-start; gap: 3px; }
	.in-breve { padding: 22px 22px; margin-bottom: 38px; }
	.blocco-appr h2 { font-size: 22px; }
	.faq > h2 { font-size: 22px; }
	.nota-clinica { padding: 18px 20px; }
}

/* --- 21.9 La fascia di rimando in home ------------------------------------ */
.rimando-fascia {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 26px;
	padding: 24px 30px;
	background: var(--verde-tinta);
	border-radius: var(--raggio);
}
.rimando-fascia p { margin: 0; font-size: 17px; line-height: 1.62; max-width: 66ch; }
.rimando-fascia strong { color: var(--verde); }
.pulsante--tenue {
	flex: 0 0 auto;
	background: var(--verde);
	color: #fff !important;
	border-color: var(--verde);
	white-space: nowrap;
}
.pulsante--tenue:hover, .pulsante--tenue:focus {
	background: #4c6345; border-color: #4c6345; color: #fff !important;
}
@media (max-width: 767px) {
	.rimando-fascia { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px; }
}

/* =========================================================================
   22. I DISEGNI DELLE SCHEDE
   -------------------------------------------------------------------------
   Le forme (ossa, organi, metallo) portano dentro l'SVG i propri gradienti,
   perché il volume va costruito lì. Qui restano solo le scritte e i fili
   delle etichette, che devono seguire la tipografia del sito.
   ========================================================================= */

.figura-appr {
	margin: 34px 0 6px;
	padding: 26px 22px 20px;
	/* La colonna di lettura è stretta (560px) per non far perdere il rigo.
	   Un disegno dentro quella misura verrebbe rimpicciolito al punto che
	   le sue scritte scenderebbero sotto gli undici pixel. Le figure
	   sporgono quindi oltre la colonna: il testo resta leggibile, il
	   disegno pure. */
	background: var(--bianco);
	border: 1px solid var(--linea);
	border-radius: var(--raggio);
}
.figura-appr .dis { display: block; width: 100%; height: auto; }
.figura-appr figcaption {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--linea);
	font-size: 15px;
	line-height: 1.55;
	color: var(--grigio);
}

/* Il disegno in apertura non sta dentro la colonna di lettura: è figlio
   diretto del contenitore, e senza un limite si prendeva tutti i 1170px
   della pagina — a schermo pieno, come giustamente segnalato. Gli si dà
   la stessa larghezza delle figure che stanno nel testo. */
.scheda-appr > .container > .figura-appr {
	max-width: 660px;
	margin-left: auto;
	margin-right: auto;
}

/* Le figure dentro il testo, invece, partono da 560px e devono sporgere
   un poco per arrivare alla stessa misura: a 560 le scritte dei disegni
   scenderebbero sotto gli undici pixel. */
@media (min-width: 992px) {
	.corpo-appr .figura-appr { margin-left: -50px; margin-right: -50px; }
}

/* --- scritte dentro i disegni -------------------------------------------- */
.dis text { font-family: 'Source Sans Pro', sans-serif; }

/* intestazione di un pannello: PRIMA, DOPO, NORMALE... */
.e-eti {
	font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12.5px;
	letter-spacing: .09em; text-transform: uppercase; fill: var(--grigio-tenue);
}
/* nome di una parte anatomica, con il suo filo e il pallino d'aggancio */
.e-nome    { font-size: 13px; fill: #4a5450; }
.e-nome-b  { font-size: 13px; font-weight: 600; fill: var(--blu); }
.e-filo    { fill: none; stroke: #b0aba1; stroke-width: 1; }
.e-pallino { fill: #b0aba1; }

/* il rosso segnala il problema, il verde cio' che l'intervento risolve:
   l'occhio impara la convenzione al primo disegno e la ritrova in tutti */
.e-forza-t { font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 500; fill: #b4553a; }
.e-ok-t    { font-family: 'Poppins', sans-serif; font-size: 13.5px; font-weight: 500; fill: var(--verde); }
.e-quota   { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13.5px; fill: var(--blu); }

/* il monitor dell'anestesia: le cifre grandi e le unita' di misura */
.e-num { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 22px; }
.e-um  { font-size: 11px; letter-spacing: .06em; fill: #7f95a0; }

/* Il movimento: un solo elemento si muove per disegno, sempre la freccia
   della spinta, con una pulsazione lenta che dice "questo sta ancora
   succedendo". Chi ha chiesto meno animazioni al sistema non vede nulla. */
@keyframes dis-pulsazione {
	0%, 100% { opacity: 1;   transform: translateX(0); }
	50%      { opacity: .55; transform: translateX(-4px); }
}
@media (prefers-reduced-motion: no-preference) {
	.dis-pulsa { animation: dis-pulsazione 2.6s ease-in-out infinite; }
}

/* Sotto i 640px un disegno ridotto alla larghezza della pagina porterebbe
   le sue scritte a sette pixel. Resta quindi a una larghezza leggibile e
   scorre di lato: scorre il disegno, non la pagina. */
@media (max-width: 640px) {
	.figura-appr { padding: 18px 0 14px; margin: 26px 0 4px; }
	.figura-appr figcaption { font-size: 14px; margin: 16px 16px 0; }
	.figura-appr__scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 16px; }
	.figura-appr .dis { min-width: 500px; }
}

/* =========================================================================
   23. SCHEDE IN DUE TEMPI: SINTESI E APPROFONDIMENTO
   -------------------------------------------------------------------------
   La pagina si apre su quello che serve a tutti — che cos'è, i segnali,
   che cosa fare — e tiene il resto dietro un pulsante. Chi ha fretta
   trova quello che gli serve senza scorrere; chi vuole capire apre.
   ========================================================================= */

.sintesi {
	max-width: 560px;
	margin: 0 auto 8px;
}
.sintesi__titolo { font-size: 30px; line-height: 1.22; margin: 0 0 16px; }
.sintesi__cosa {
	font-size: 19px;
	line-height: 1.62;
	color: var(--inchiostro);
	margin-bottom: 26px;
}

/* I segnali sono la parte che la gente cerca davvero: hanno un riquadro
   loro, così si trovano a colpo d'occhio. */
.sintesi__segnali {
	background: var(--carta-scura);
	border-radius: var(--raggio);
	padding: 24px 28px;
	margin-bottom: 24px;
}
.sintesi__segnali h3 {
	font-size: 13px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--verde);
	margin: 0 0 14px;
}
.sintesi__segnali ul { list-style: none; padding: 0; margin: 0; }
.sintesi__segnali li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 11px;
	font-size: 17px;
	line-height: 1.58;
	color: var(--inchiostro);
}
.sintesi__segnali li:last-child { margin-bottom: 0; }
.sintesi__segnali li::before {
	content: "";
	position: absolute;
	left: 2px; top: .58em;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--verde);
}
.sintesi__azione {
	border-left: 4px solid var(--ciano);
	padding-left: 18px;
	margin: 0;
	font-size: 17px;
	line-height: 1.62;
}

/* --- il pulsante che apre --------------------------------------------- */
.apri-appr {
	max-width: 560px;
	margin: 34px auto 0;
	padding-top: 30px;
	border-top: 1px solid var(--linea);
	text-align: center;
}
.apri-appr__bottone {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--blu);
	color: #fff;
	border: 0;
	border-radius: var(--raggio-pill);
	padding: 15px 30px;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s, transform .15s;
}
.apri-appr__bottone:hover { background: var(--blu-scuro); }
.apri-appr__bottone:active { transform: translateY(1px); }
.apri-appr__freccia {
	width: 10px; height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .25s;
}
.apri-appr.aperto .apri-appr__freccia { transform: rotate(-135deg) translate(-3px, -3px); }
.apri-appr__nota { margin: 14px 0 0; font-size: 15px; color: var(--grigio-tenue); }
.apri-appr.aperto .apri-appr__nota { display: none; }

.approfondimento { margin-top: 44px; }
.approfondimento[hidden] { display: none; }

@media (max-width: 640px) {
	.sintesi__titolo { font-size: 25px; }
	.sintesi__cosa { font-size: 18px; }
	.sintesi__segnali { padding: 20px 20px; }
	.apri-appr__bottone { width: 100%; justify-content: center; }
}

/* In stampa non ha senso nascondere: esce tutto. */
@media print {
	.approfondimento[hidden] { display: block !important; }
	.apri-appr { display: none; }
}