/**
 * Componenti di layout — Aestetica Salvati
 *
 * Nascono per risolvere un problema preciso: prima quasi ogni sezione era
 * "occhiello + titolo + paragrafo centrati", senza immagini. Qui ci sono i
 * mattoni per alternare i ritmi: blocchi immagine/testo affiancati, card
 * illustrate, galleria, numeri, citazioni, video verticali, barra CTA mobile.
 *
 * Convenzione: tutto in .as-*, nessuna dipendenza da librerie esterne.
 */

/* ==========================================================================
   1 · Blocco alternato immagine + testo (il sostituto del testo centrato)
   ========================================================================== */

.as-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

/* Nell'HTML il testo viene sempre prima: di base sta a sinistra e l'immagine
   a destra. Con --inverso l'immagine passa a sinistra, così alternando i
   blocchi si ottiene il ritmo a zig-zag che tiene viva la lettura. */
.as-split--inverso .as-split__media { order: -1; }

.as-split__media {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 34px 70px -40px rgba(46, 44, 36, .55);
}

.as-split__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
}

/* Variante con l'arco morbido, richiama la forma dell'hero. */
.as-split__media--arco { border-radius: 190px 190px 18px 18px; }

.as-split__testo h2 { font-size: 40px; line-height: 1.15; margin: 14px 0 20px; }
.as-split__testo p { font-size: 17px; color: var(--as-taupe); margin-bottom: 16px; }
.as-split__testo p:last-of-type { margin-bottom: 0; }
.as-split__testo .as-actions { margin-top: 30px; }

/* Elenco puntato con segno grafico, per i benefici dentro ai blocchi. */
.as-lista-segni { list-style: none; margin: 22px 0 0; padding: 0; }
.as-lista-segni li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 14px;
	font-size: 16px;
	color: var(--as-taupe);
}
.as-lista-segni li::before {
	content: "";
	position: absolute;
	left: 0; top: 9px;
	width: 14px; height: 2px;
	background: var(--as-gold-mid);
}
.as-lista-segni strong { color: var(--as-espresso); font-weight: 500; }

@media (max-width: 900px) {
	.as-split { grid-template-columns: 1fr; gap: 34px; }
	/* Su telefono l'ordine torna sempre testo → immagine. */
	.as-split--inverso .as-split__media { order: 0; }
	.as-split__testo h2 { font-size: 31px; }
	.as-split__media--arco { border-radius: 140px 140px 18px 18px; }
}

/* ==========================================================================
   2 · Card servizio con fotografia
   ========================================================================== */

.as-card-foto {
	background: var(--as-white);
	border: 1px solid var(--as-line);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease;
}
.as-card-foto:hover { transform: translateY(-6px); box-shadow: 0 26px 54px -30px rgba(46, 44, 36, .4); }

.as-card-foto__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.as-card-foto__corpo { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.as-card-foto__corpo h3 { font-size: 23px; margin-bottom: 10px; }
.as-card-foto__corpo h3 a { color: inherit; }
.as-card-foto__corpo h3 a:hover { color: var(--as-gold-text); }
.as-card-foto__corpo p { font-size: 15px; color: var(--as-taupe); flex: 1; margin-bottom: 16px; }

/* Etichetta zone/durata sopra al titolo. */
.as-tag {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--as-gold-text);
	margin-bottom: 10px;
}

/* ==========================================================================
   3 · Fascia numeri
   ========================================================================== */

.as-numeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.as-numeri__n {
	font-family: var(--as-font-serif);
	font-size: 52px;
	line-height: 1;
	color: var(--as-gold-mid);
	display: block;
	margin-bottom: 10px;
}
.as-numeri__e { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--as-taupe); }
@media (max-width: 800px) {
	.as-numeri { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
	.as-numeri__n { font-size: 40px; }
}

/* ==========================================================================
   4 · Galleria dell'ambiente
   ========================================================================== */

.as-galleria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.as-galleria img {
	display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
	border-radius: 12px; transition: transform .4s ease;
}
.as-galleria a:hover img, .as-galleria figure:hover img { transform: scale(1.04); }
/* Il primo riquadro occupa due colonne e due righe: rompe la griglia regolare. */
.as-galleria__grande { grid-column: span 2; grid-row: span 2; }
.as-galleria__grande img { aspect-ratio: 1 / 1; height: 100%; }
@media (max-width: 800px) {
	.as-galleria { grid-template-columns: repeat(2, 1fr); }
	.as-galleria__grande { grid-column: span 2; grid-row: span 1; }
}

/* ==========================================================================
   5 · Citazione editoriale / rassegna stampa
   ========================================================================== */

.as-citazione {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}
.as-citazione blockquote {
	font-family: var(--as-font-serif);
	font-size: 27px;
	line-height: 1.45;
	font-style: italic;
	color: var(--as-espresso);
	margin: 0 0 22px;
}
.as-citazione blockquote::before { content: "«"; color: var(--as-gold); margin-right: 4px; }
.as-citazione blockquote::after  { content: "»"; color: var(--as-gold); margin-left: 4px; }
.as-citazione figcaption { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--as-taupe); }
.as-citazione figcaption strong { color: var(--as-gold-text); font-weight: 500; }

/* Su fondo scuro il testo va invertito, altrimenti sparisce. */
.as-sec--espresso .as-citazione blockquote { color: var(--as-ivory); }
.as-sec--espresso .as-citazione figcaption { color: rgba(247, 243, 236, .7); }
.as-sec--espresso .as-citazione figcaption strong { color: var(--as-gold); }

@media (max-width: 700px) { .as-citazione blockquote { font-size: 21px; } }

/* ==========================================================================
   6 · Video verticale del trattamento
   ========================================================================== */

.as-video {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: var(--as-beige);
	box-shadow: 0 34px 70px -40px rgba(46, 44, 36, .55);
	max-width: 340px;
	margin: 0 auto;
}
.as-video video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.as-video__eti {
	position: absolute; left: 16px; bottom: 16px;
	background: rgba(46, 44, 36, .72);
	color: var(--as-ivory);
	font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
	padding: 7px 13px; border-radius: 100px;
	backdrop-filter: blur(4px);
}

/* ==========================================================================
   7 · Riquadri informativi rapidi (durata, zone, frequenza)
   ========================================================================== */

/* Fascia orizzontale invece di una griglia di card: molti di questi dati
   attendono conferma dal cliente, quindi spesso è compilato un solo campo.
   Come riga centrata con separatori funziona bene con qualsiasi numero di
   voci, senza lasciare riquadri orfani in mezzo al vuoto. */
.as-specifiche {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px 0;
	background: var(--as-white);
	border: 1px solid var(--as-line);
	border-radius: 100px;
	padding: 22px 34px;
	max-width: 980px;
	margin: 0 auto;
}
.as-specifiche > div { padding: 0 30px; text-align: center; }
.as-specifiche > div + div { border-left: 1px solid var(--as-line); }
.as-specifiche dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--as-gold-text); margin-bottom: 6px; }
.as-specifiche dd { margin: 0; font-size: 16px; color: var(--as-espresso); }
@media (max-width: 800px) {
	.as-specifiche { border-radius: 20px; padding: 20px 18px; gap: 18px 0; }
	.as-specifiche > div { flex: 1 1 45%; padding: 0 12px; }
	.as-specifiche > div + div { border-left: 0; }
}

/* ==========================================================================
   8 · Barra CTA fissa su mobile
   ========================================================================== */

.as-barra-mobile { display: none; }
@media (max-width: 780px) {
	.as-barra-mobile {
		display: grid;
		grid-template-columns: 1fr 1fr;
		position: fixed; left: 0; right: 0; bottom: 0;
		z-index: 150;
		background: var(--as-white);
		border-top: 1px solid var(--as-line);
		box-shadow: 0 -8px 30px -14px rgba(46, 44, 36, .35);
	}
	.as-barra-mobile a {
		padding: 15px 10px;
		text-align: center;
		font-size: 12px;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--as-espresso);
	}
	.as-barra-mobile a + a { border-left: 1px solid var(--as-line); }
	.as-barra-mobile .as-barra-mobile__primaria { background: var(--as-gold); color: var(--as-espresso); font-weight: 400; }
	/* Spazio in fondo alla pagina per non coprire il footer, e il pulsante
	   WhatsApp tondo si sposta sopra la barra. */
	body { padding-bottom: 54px; }
	.as-wa-btn { bottom: 70px !important; }
}

/* ==========================================================================
   9 · Rifiniture trasversali
   ========================================================================== */

/* Intestazione di sezione allineata a sinistra: alternativa a .as-sec-head. */
.as-sec-head--sx { text-align: left; max-width: 620px; margin-left: 0; }

/* Rimosse .as-stampa e .as-ancore: non usate da nessun template (28/07/2026). */

/* ==========================================================================
   9-bis · Blocco introduttivo a tutta larghezza
   ==========================================================================
   Usato quando non c'è un video né una seconda fotografia sensata: meglio una
   sezione dichiaratamente tipografica che ripetere l'immagine dell'hero.
   ========================================================================== */

.as-intro { max-width: 900px; margin: 0 auto; text-align: center; }
.as-intro h2 { font-size: 40px; line-height: 1.15; margin: 14px 0 26px; }
.as-intro__testo { text-align: left; column-gap: 48px; font-size: 17px; color: var(--as-taupe); }
.as-intro__testo p { margin-bottom: 16px; }
.as-intro__testo p:last-child { margin-bottom: 0; }
@media (min-width: 901px) { .as-intro__testo { column-count: 2; } }
@media (max-width: 900px) { .as-intro h2 { font-size: 31px; } }

/* ==========================================================================
   10 · Comparsa dei contenuti allo scorrimento
   ==========================================================================
   Un solo effetto, discreto: il blocco sale di pochi pixel mentre appare.
   La classe .as-anim viene messa dal JS solo se il browser la supporta e se
   il visitatore non ha chiesto meno animazioni: senza JS il sito resta
   perfettamente visibile, perché lo stato di partenza è già quello finale.
   ========================================================================== */

/* Regola di sicurezza: il contenuto è visibile per definizione. Nessuna
   animazione può nasconderlo. Solo gli elementi che al caricamento stanno
   sotto la piega ricevono da JS la classe .as-nascosto, e il JS garantisce
   di toglierla comunque entro pochi secondi. */
.as-anim [data-as-appari].as-nascosto { opacity: 0; }

@keyframes as-appari {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}

.as-anim [data-as-appari].is-visibile {
	animation: as-appari .7s cubic-bezier(.22, .61, .36, 1) both;
}

/* Rispetto delle preferenze di movimento ridotto. */
@media (prefers-reduced-motion: reduce) {
	.as-card-foto, .as-galleria img { transition: none; }
	.as-card-foto:hover { transform: none; }
	.as-galleria a:hover img, .as-galleria figure:hover img { transform: none; }
	.as-anim [data-as-appari] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   11 · Icone al tratto dentro i cerchi delle card
   ========================================================================== */

.as-ic__svg {
	width: 26px;
	height: 26px;
	color: var(--as-gold-text);
	display: block;
}

/* ==========================================================================
   12 · Nota in evidenza dentro un blocco di testo
   ==========================================================================
   Per un fatto che merita di uscire dall'elenco puntato senza diventare una
   sezione a sé: fondo più chiaro del blocco che la contiene, filo d'oro a
   sinistra e un'icona al tratto. Nata per la sterilizzazione degli strumenti
   nella pagina Il Centro (07/09/2026). */

.as-nota-forte {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 26px;
	padding: 18px 22px;
	background: var(--as-ivory-light);
	border-left: 3px solid var(--as-gold);
	border-radius: 0 14px 14px 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--as-taupe);
}

.as-nota-forte strong { color: var(--as-espresso); font-weight: 500; }

/* L'icona non deve restringersi quando il testo va a capo. */
.as-nota-forte__ic { flex: 0 0 auto; margin-top: 2px; }
.as-nota-forte__ic .as-ic__svg { width: 22px; height: 22px; color: var(--as-gold-mid); }

@media (max-width: 900px) {
	.as-nota-forte { padding: 16px 18px; font-size: 14px; }
}

/* ==========================================================================
   13. Elenco benefici senza foto a fianco
   --------------------------------------------------------------------------
   Quando un trattamento non ha ancora la sua foto, il blocco "Cosa puoi
   aspettarti" perde la colonna immagine. Per non lasciare una riga di testo
   larga tutta la pagina, l'elenco si stringe e si centra come blocco,
   mantenendo però il testo allineato a sinistra: è più leggibile.
   ========================================================================== */

.as-lista-segni--centrata {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* Card senza foto: una fascia dorata sottile prende il posto dell'immagine,
   così la card resta alta come le altre e la griglia non si sfalsa. */
.as-card-foto--senza-foto::before {
	content: "";
	display: block;
	height: 6px;
	background: linear-gradient(90deg, var(--as-gold), var(--as-gold-mid));
}
.as-card-foto--senza-foto .as-card-foto__corpo { padding-top: 30px; }