/* Geometria, colore e movimento del tema ProcidaWiFi.
 *
 * L'idea: l'apertura è l'isola vista dal mare di notte — indaco profondo,
 * le case della Corricella con le finestre accese, il segnale che ci arriva
 * sopra. Da lì in giù la pagina torna bianca e quieta: l'unico momento
 * audace è l'apertura, tutto il resto è spazio, gerarchia e una sola tinta
 * calda (l'ocra delle finestre) usata col contagocce.
 */

/* ---------- Fondamenta ---------- */

:root {
	/* Il margine laterale condiviso da tutte le sezioni a tutta larghezza:
	   una sola dichiarazione, così le sezioni restano allineate fra loro. */
	--pw-margine: max( 1.5rem, calc( ( 100% - 1180px ) / 2 ) );
	--pw-raggio: 14px;
	--pw-notte: var( --wp--preset--color--notte );
	--pw-ocra: var( --wp--preset--color--ocra );
}

/* Il contenitore <main> è un blocco di gruppo: porta il margine verticale
   di default dei blocchi, che qui aprirebbe una striscia bianca fra
   l'intestazione e l'apertura scura. */
main.wp-block-group {
	margin-block-start: 0;
}

/* Stessa ragione per il piè di pagina: il margine di blocco aprirebbe una
   striscia bianca fra la chiusura scura e il piè di pagina, anch'esso scuro. */
footer {
	margin-block-start: 0 !important;
}

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

/* Il focus da tastiera è visibile ovunque, anche sopra il fondo scuro. */
:where( a, button, input, summary ):focus-visible {
	outline: 3px solid var( --wp--preset--color--ciano );
	outline-offset: 2px;
	border-radius: 4px;
}

/* La misura di lettura: il testo lungo non supera mai le ~68 battute. */
.pw-sezione__intro,
.pw-hero__sottotitolo {
	max-width: 34rem;
}

/* Il capoverso che deve andare a capo lo fa in modo pari: niente ultima riga
   con una parola sola. */
.pw-sezione__intro,
.pw-sezione__nota,
.pw-hero__sottotitolo,
.pw-bolletta p {
	text-wrap: pretty;
}

/* Le note e gli occhielli di una frase sola non sono capoversi: la misura di
   lettura li spezzerebbe a metà pagina, con la coda («+7 € al mese», «poi
   100 €») isolata su una seconda riga. Corrono per la larghezza della
   sezione e vanno a capo solo se lo schermo lo impone. */
.pw-sezione__nota,
.pw-sezione__intro--riga {
	max-width: none;
}

/* ---------- Intestazione ---------- */

.pw-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 40;
	/* Semitrasparente: sotto scorre la pagina, e si vede. */
	background: rgba( 255, 255, 255, 0.88 ) !important;
	backdrop-filter: blur( 12px );
}

.pw-logo {
	display: block;
	line-height: 0;
}

.pw-logo img {
	display: block;
	/* Il marchio 2026 e' molto piu' largo che alto del logo 2019 (3,84 contro
	   2,57): a parita' di larghezza si rimpicciolirebbe. Si misura quindi
	   sull'altezza, che e' quello che l'occhio confronta con il menu. */
	height: clamp( 2.4rem, 3.6vw, 3.1rem );
	width: auto;
}

/* Il menu è il blocco core Navigation: il markup è nav > ul > li > a, non
   una fila di <a>. Le distanze vanno quindi sulla lista, non sul <nav>. */
.pw-menu {
	margin-inline-end: 1.5rem;
}

.pw-menu .wp-block-navigation__container {
	gap: 1.5rem;
}

.pw-menu a {
	display: inline-block;
	position: relative;
	color: var( --wp--preset--color--testo-secondario );
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	padding-block: 0.35rem;
}

/* Il sottolineato cresce quando ci passi sopra: risponde al gesto. */
.pw-menu a::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 2px;
	background: var( --wp--preset--color--ciano );
	transform: scaleX( 0 );
	transition: transform 0.18s ease-out;
}

.pw-menu a:hover,
.pw-menu a:focus-visible {
	color: var( --wp--preset--color--blu );
}

.pw-menu a:hover::after,
.pw-menu a:focus-visible::after {
	transform: scaleX( 1 );
}

/* ---------- Pulsante WhatsApp ---------- */

.pw-whatsapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.3rem;
	border-radius: 999px;
	background: var( --wp--preset--color--whatsapp );
	/* Testo scuro, non bianco: sul verde WhatsApp il bianco fa 1,98:1 di
	   contrasto, ben sotto il minimo WCAG di 4,5:1. Il colore testo del
	   tema sullo stesso verde fa 9,01:1. Il verde resta quello di WhatsApp
	   per restare riconoscibile: si cambia il testo, non lo sfondo. */
	color: var( --wp--preset--color--testo );
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	box-shadow: 0 10px 26px -12px rgba( 37, 211, 102, 0.7 );
	transition: transform 0.16s ease-out, box-shadow 0.16s ease-out;
}

.pw-whatsapp:hover,
.pw-whatsapp:focus-visible {
	color: var( --wp--preset--color--testo );
	transform: translateY( -1px );
	box-shadow: 0 14px 30px -12px rgba( 37, 211, 102, 0.85 );
}

/* ---------- Barra WhatsApp su telefono ---------- */

.pw-barra-mobile {
	display: none;
}

@media ( max-width: 781px ) {
	/* Si nasconde il gruppo che contiene menu e pulsante, non solo i due
	   dentro: svuotato, il contenitore resterebbe comunque un elemento della
	   riga e si porterebbe dietro il suo intervallo, e il marchio finirebbe
	   spostato di mezzo intervallo invece che al centro. Misurato: 100px a
	   sinistra contro 124 a destra. */
	.pw-header > .wp-block-group > .wp-block-group,
	.pw-header .pw-whatsapp,
	.pw-menu {
		display: none;
	}

	/* Resta il solo marchio: centrato, e un po' piu' grande, perche' lo
	   spazio liberato e' suo. */
	.pw-header > .wp-block-group {
		justify-content: center;
	}

	.pw-logo img {
		height: clamp( 2.75rem, 12vw, 3.25rem );
	}

	.pw-barra-mobile {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 50;
		display: block;
		padding: 0.75rem 1rem calc( 0.75rem + env( safe-area-inset-bottom ) );
		background: rgba( 255, 255, 255, 0.94 );
		border-top: 1px solid var( --wp--preset--color--bordo );
		backdrop-filter: blur( 8px );
	}

	.pw-whatsapp--pieno {
		display: flex;
		justify-content: center;
	}


	body {
		padding-bottom: 5rem;
	}
}

/* ---------- Apertura ----------
 *
 * Testo a sinistra, l'isola a destra: due colonne di griglia, non un
 * disegno in posizione assoluta sopra il riquadro. La differenza non è
 * accademica — con l'assoluto, fra la colonna di testo e il disegno
 * restava un vuoto che cambiava con la larghezza della finestra e che
 * nessun ritocco ai numeri chiudeva davvero. In griglia la seconda colonna
 * comincia dove finisce la prima.
 */
.pw-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	/* Senza questo, l'altezza minima si somma ai riempimenti invece di
	   comprenderli, e l'apertura cresce di trecento pixel a vuoto. */
	box-sizing: border-box;
	/* Il biglietto da visita occupa la prima schermata: chi arriva vede
	   quello, non quello e mezza sezione dopo. `svh` e non `vh` perché su
	   telefono le barre del browser mangiano la differenza. */
	min-height: min( 92svh, 54rem );
	/* Il colore va dichiarato oltre al gradiente: con la sola scorciatoia
	   `background: linear-gradient(...)` il colore di fondo resta
	   trasparente, e chi legge la pagina vede bianco dove il CSS dice notte. */
	background-color: var( --pw-notte );
	color: #fff;
	padding-block: clamp( 3rem, 7vh, 5.5rem );
	padding-inline: var( --pw-margine );
	display: grid;
	grid-template-columns: minmax( 0, 36rem ) minmax( 0, 1fr );
	gap: clamp( 1rem, 3vw, 2.5rem );
	align-items: center;
}

/* ---------- Il fondo, che si muove ----------
 *
 * Un gradiente fisso è bello per due secondi e poi è piatto. Qui tre
 * nuvole di colore derivano e respirano su periodi di 29, 37 e 23 secondi:
 * numeri **non multipli fra loro**, così la combinazione non si ripete mai
 * uguale e l'occhio non trova il punto in cui il ciclo riparte.
 */
.pw-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -4;
	background-image: linear-gradient( 160deg, #131B52 0%, #0B1130 55%, var( --pw-notte ) 100% );
}

.pw-nube {
	position: absolute;
	z-index: -3;
	border-radius: 50%;
	filter: blur( 70px );
	pointer-events: none;
	will-change: transform;
}

.pw-nube--uno {
	width: 60%;
	height: 78%;
	inset-inline-start: -8%;
	inset-block-start: -18%;
	background-image: radial-gradient( circle, rgba( 18, 74, 163, 0.62 ) 0%, transparent 68% );
	animation: pw-deriva-uno 29s ease-in-out infinite alternate;
}

.pw-nube--due {
	width: 56%;
	height: 74%;
	inset-inline-end: -6%;
	inset-block-start: -10%;
	background-image: radial-gradient( circle, rgba( 0, 174, 239, 0.34 ) 0%, transparent 66% );
	animation: pw-deriva-due 37s ease-in-out infinite alternate;
}

.pw-nube--tre {
	width: 70%;
	height: 60%;
	inset-inline-start: 14%;
	inset-block-end: -24%;
	background-image: radial-gradient( circle, rgba( 0, 90, 180, 0.3 ) 0%, transparent 70% );
	animation: pw-deriva-tre 23s ease-in-out infinite alternate;
}

@keyframes pw-deriva-uno {
	from { transform: translate( 0, 0 ) scale( 1 ); }
	to   { transform: translate( 9%, 7% ) scale( 1.16 ); }
}

@keyframes pw-deriva-due {
	from { transform: translate( 0, 0 ) scale( 1.1 ); }
	to   { transform: translate( -8%, 10% ) scale( 0.94 ); }
}

@keyframes pw-deriva-tre {
	from { transform: translate( 0, 0 ) scale( 1 ); }
	to   { transform: translate( 7%, -8% ) scale( 1.12 ); }
}

/* Una lama di luce che attraversa la schermata ogni quattordici secondi.
   Da sola quasi non si nota, ed è giusto così: serve a togliere la
   sensazione di immagine ferma, non a farsi guardare. */
.pw-spazzata {
	position: absolute;
	z-index: -2;
	inset-block: -30%;
	width: 44%;
	inset-inline-start: -50%;
	pointer-events: none;
	background-image: linear-gradient(
		100deg,
		transparent,
		rgba( 127, 227, 255, 0.07 ) 42%,
		rgba( 127, 227, 255, 0.12 ) 52%,
		transparent
	);
	transform: rotate( 8deg );
	animation: pw-spazza 14s ease-in-out infinite;
}

@keyframes pw-spazza {
	0%   { transform: translateX( 0 ) rotate( 8deg ); opacity: 0; }
	12%  { opacity: 1; }
	70%  { opacity: 1; }
	100% { transform: translateX( 320% ) rotate( 8deg ); opacity: 0; }
}

/* ---------- L'isola ----------
 *
 * Due accorgimenti piccoli che cambiano molto.
 *
 * **Cinque gradi.** A occhio non si leggono come una rotazione: si leggono
 * come una composizione non allineata alla griglia, e tolgono l'aria da
 * «figura incollata in una casella». Girarla di più fa perdere la sagoma,
 * ed era la sagoma il motivo per cui l'apertura è un'isola e non un
 * fondale qualsiasi. Il verso non è indifferente: Procida ha già un asse
 * che corre da nord-est a sud-ovest, e in senso antiorario quell'asse si
 * raddrizza — la diagonale sparirebbe.
 *
 * **Il bordo sinistro sfuma.** Non c'è nessun velo sopra il testo: il
 * pannello opaco fu la prima cosa scartata di tutto questo lavoro. È
 * l'isola che si spegne prima di arrivare sotto il testo, e così può
 * sconfinare verso il titolo senza mai disturbarlo.
 */
.pw-isola {
	position: relative;
	z-index: 2;
	grid-column: 2;
	grid-row: 1;
	justify-self: stretch;
	width: 100%;
	height: auto;
	max-height: 88svh;
	overflow: visible;
	margin-inline-start: -6%;
	rotate: 5deg;
	-webkit-mask-image: linear-gradient( 96deg, transparent 0%, rgba( 0, 0, 0, 0.5 ) 15%, #000 34% );
	mask-image: linear-gradient( 96deg, transparent 0%, rgba( 0, 0, 0, 0.5 ) 15%, #000 34% );
}

.pw-costa {
	fill: rgba( 19, 32, 82, 0.46 );
	stroke: rgba( 127, 227, 255, 0.55 );
	stroke-width: 1.6;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* La luce che fa il giro della costa, senza fine. `pathLength="1000"` nel
   disegno normalizza la lunghezza del tracciato: il tratteggio si scrive
   in millesimi e non dipende da quanto è lungo davvero il contorno, quindi
   rigenerare l'isola non obbliga a rifare i conti dell'animazione. */
.pw-giro {
	fill: none;
	stroke: var( --wp--preset--color--ciano-chiaro );
	stroke-width: 3;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 34 966;
	filter: drop-shadow( 0 0 7px rgba( 127, 227, 255, 0.95 ) );
	animation: pw-giro 11s linear infinite;
}

.pw-giro--seconda {
	stroke: var( --wp--preset--color--ciano );
	stroke-width: 2;
	stroke-dasharray: 18 982;
	opacity: 0.8;
	animation-delay: -5.5s;
}

@keyframes pw-giro {
	from { stroke-dashoffset: 1000; }
	to   { stroke-dashoffset: 0; }
}

/* I collegamenti portanti restano sempre disegnati: la rete c'è anche
   quando la luce non ci sta passando sopra. */
.pw-ramo {
	stroke: rgba( 0, 174, 239, 0.36 );
	stroke-width: 1.2;
	vector-effect: non-scaling-stroke;
}

/* Quelli di riserva, tratteggiati, si accendono appena dopo i due nodi che
   uniscono: dicono «se questo ramo cade c'è un'altra strada» senza doverlo
   scrivere. */
.pw-riserva {
	stroke: rgba( 127, 227, 255, 0.34 );
	stroke-width: 1;
	stroke-dasharray: 3 7;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	animation: pw-riserva var( --pw-ciclo ) ease-out var( --ritardo ) infinite;
}

@keyframes pw-riserva {
	0%   { opacity: 0; }
	6%   { opacity: 0.9; }
	46%  { opacity: 0.45; }
	100% { opacity: 0; }
}

/* Il guizzo che percorre il ramo, una volta per ciclo, nell'istante in cui
   la luce arriva al nodo di partenza. */
.pw-salto {
	stroke: var( --wp--preset--color--ciano-chiaro );
	stroke-width: 2.5;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 9 91;
	stroke-dashoffset: 100;
	filter: drop-shadow( 0 0 5px rgba( 127, 227, 255, 0.9 ) );
	animation: pw-salta var( --pw-ciclo ) linear var( --ritardo ) infinite;
}

@keyframes pw-salta {
	0%        { stroke-dashoffset: 100; opacity: 0; }
	1%        { opacity: 1; }
	9%        { stroke-dashoffset: -9; opacity: 1; }
	10%, 100% { stroke-dashoffset: -9; opacity: 0; }
}

.pw-nodo {
	fill: var( --wp--preset--color--ciano-chiaro );
	opacity: 0.3;
	animation: pw-accendi var( --pw-ciclo ) ease-out var( --ritardo ) infinite;
}

@keyframes pw-accendi {
	0%   { opacity: 0.28; filter: none; }
	6%   { opacity: 1; filter: drop-shadow( 0 0 8px rgba( 127, 227, 255, 1 ) ); }
	55%  { opacity: 0.72; filter: drop-shadow( 0 0 4px rgba( 127, 227, 255, 0.6 ) ); }
	100% { opacity: 0.28; filter: none; }
}

.pw-onda {
	fill: none;
	stroke: rgba( 0, 174, 239, 0.6 );
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	transform-box: fill-box;
	transform-origin: center;
	opacity: 0;
	animation: pw-onda var( --pw-ciclo ) ease-out var( --ritardo ) infinite;
}

@keyframes pw-onda {
	0%   { opacity: 0; transform: scale( 0.35 ); }
	4%   { opacity: 0.85; }
	34%  { opacity: 0; transform: scale( 4 ); }
	100% { opacity: 0; transform: scale( 4 ); }
}

/* Il testo sta direttamente sul fondo: bianco su #080C24 fa 19,4:1 e il
   sottotitolo 9,2:1. Niente pannello, niente velo, e nessun conto sul caso
   peggiore — il fondo lo decidiamo noi, e l'isola lì sotto è già spenta. */
.pw-hero__testo {
	position: relative;
	z-index: 4;
	grid-column: 1;
	grid-row: 1;
	max-width: 35rem;
}

.pw-hero h1 {
	font-family: var( --wp--preset--font-family--titoli );
	font-size: clamp( 3rem, 7vw, 5.4rem );
	line-height: 0.96;
	letter-spacing: -0.04em;
	color: #fff;
	margin-block: 1rem;
}

.pw-hero h1 em {
	font-style: normal;
	color: var( --wp--preset--color--ciano-chiaro );
}

.pw-etichetta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.95rem 0.4rem 0.75rem;
	border-radius: 999px;
	border: 1px solid rgba( 127, 227, 255, 0.3 );
	background: rgba( 127, 227, 255, 0.1 );
	color: var( --wp--preset--color--ciano-chiaro );
	font-size: 0.875rem;
	font-weight: 500;
	margin: 0;
}

.pw-punto {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var( --wp--preset--color--ciano );
	animation: pw-pulsa 2.4s infinite;
}

@keyframes pw-pulsa {
	0%   { box-shadow: 0 0 0 0 rgba( 0, 174, 239, 0.7 ); }
	70%  { box-shadow: 0 0 0 10px rgba( 0, 174, 239, 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( 0, 174, 239, 0 ); }
}

.pw-hero__sottotitolo {
	color: rgba( 255, 255, 255, 0.84 );
	font-size: var( --wp--preset--font-size--medio );
	line-height: 1.65;
	max-width: 29rem;
	margin-block-end: 0;
}

.pw-hero__sottotitolo strong {
	color: #fff;
}

/* ---------- I tre numeri ----------
 *
 * Non un grafico: tre riquadri, che è la forma giusta per una manciata di
 * numeri da titolo. Stanno qui e non in fondo in caratteri piccoli perché
 * sono la prima cosa che un cliente vuole sapere, e perché senza di loro
 * la colonna di sinistra era un titolo di due parole e del buio.
 *
 * Il numero è bianco e l'etichetta grigia: l'inchiostro resta inchiostro.
 * Il ciano fa solo da filo sopra il riquadro, cioè da accento, e non porta
 * nessuna informazione da solo.
 */
.pw-numeri {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 0.7rem;
	margin-block-start: 2.2rem;
	max-width: 32rem;
}

.pw-numero {
	position: relative;
	padding: 0.95rem 0.9rem 0.85rem;
	border-radius: 0.7rem;
	border: 1px solid rgba( 127, 227, 255, 0.18 );
	background: rgba( 8, 12, 36, 0.42 );
	backdrop-filter: blur( 3px );
	overflow: hidden;
}

.pw-numero::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 2px;
	background: linear-gradient( 90deg, var( --wp--preset--color--ciano ), transparent );
}

/* Il cappello «fino a»: piccolo, sopra la cifra, senza rubarle l'attacco. */
.pw-numero em {
	display: block;
	margin-block-end: 0.2rem;
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var( --wp--preset--color--testo-chiaro );
}

.pw-numero b {
	display: block;
	font-family: var( --wp--preset--font-family--titoli );
	font-weight: 700;
	font-size: clamp( 1.5rem, 2.6vw, 2.1rem );
	line-height: 1;
	letter-spacing: -0.03em;
	color: #fff;
}

.pw-numero b i {
	font-style: normal;
	font-size: 0.62em;
	font-weight: 500;
	margin-inline-start: 0.12em;
}

/* Una parola non è un numero: alla misura delle cifre «Gratuito» sfonda il
   riquadro. Stessa famiglia, stesso peso, corpo più piccolo. */
.pw-numero--parola b {
	font-size: clamp( 1.05rem, 1.85vw, 1.42rem );
	letter-spacing: -0.015em;
	padding-block: 0.22rem;
}

.pw-numero span {
	display: block;
	margin-block-start: 0.38rem;
	color: var( --wp--preset--color--testo-chiaro );
	font-size: 0.79rem;
	line-height: 1.35;
}

.pw-hero__azioni {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-block-start: 1.75rem;
}

.pw-hero .pw-secondario {
	color: var( --wp--preset--color--ciano-chiaro );
	font-weight: 600;
	text-decoration: none;
	border-block-end: 1px solid rgba( 127, 227, 255, 0.4 );
	padding-block-end: 2px;
}

.pw-hero .pw-secondario:hover {
	border-block-end-color: var( --wp--preset--color--ciano-chiaro );
}

/* Quello che i tre numeri non dicono, e che non merita un riquadro. */
.pw-dati {
	display: flex;
	gap: 2.25rem;
	flex-wrap: wrap;
	margin-block-start: 1.5rem;
	font-size: 0.875rem;
	color: rgba( 255, 255, 255, 0.66 );
}

.pw-dati b {
	color: #fff;
	font-weight: 600;
}

/* Le scie: la velocità che attraversa la chiusura scura. Niente a che
   vedere con l'apertura — vivono nella sezione contatti. */
.pw-scia {
	position: absolute;
	height: 3px;
	border-radius: 9px;
	background: linear-gradient( 90deg, transparent, var( --wp--preset--color--ciano-chiaro ) );
	animation: pw-scorri 2.4s linear infinite;
	opacity: 0.4;
}

.pw-scia--1 { inset-block-start: 18%; inset-inline-end: 4%; width: 190px; animation-duration: 2.6s; }
.pw-scia--2 { inset-block-start: 44%; inset-inline-end: 16%; width: 130px; animation-duration: 3.4s; animation-delay: 0.9s; }
.pw-scia--3 { inset-block-start: 70%; inset-inline-end: 8%; width: 160px; animation-duration: 3s; animation-delay: 1.6s; }

@keyframes pw-scorri {
	from { transform: translateX( -140% ); }
	to   { transform: translateX( 300% ); }
}

@media ( max-width: 1000px ) {
	/* Una colonna sola: il testo sopra, l'isola sotto. L'isola non sparisce
	   — è il contenuto dell'apertura, non un ornamento — ma si raddrizza,
	   perché su una colonna stretta l'inclinazione le fa toccare i bordi. */
	.pw-hero {
		grid-template-columns: minmax( 0, 1fr );
		align-content: start;
		min-height: auto;
		padding-block: 2.5rem 3rem;
	}

	.pw-hero__testo {
		grid-column: 1;
		grid-row: 1;
		max-width: none;
	}

	.pw-isola {
		grid-column: 1;
		grid-row: 2;
		max-height: 52svh;
		margin-block-start: 1.5rem;
		margin-inline-start: 0;
		rotate: 0deg;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.pw-hero h1 {
		margin-block: 0.75rem;
	}

	.pw-hero__sottotitolo {
		font-size: 1rem;
	}

	.pw-numeri {
		max-width: none;
	}

	.pw-hero__azioni {
		gap: 1rem;
		margin-block-start: 1.5rem;
	}
}

@media ( max-width: 520px ) {
	/* Tre riquadri restano tre, affiancati. Erano due sopra e uno sotto, e il
	   terzo, solo sulla sua riga con mezza riga vuota accanto, sembrava
	   avanzato. Stringendo i riempimenti e scalando le cifre con la finestra
	   ci stanno anche su un telefono da 360 px. */
	.pw-numeri {
		gap: 0.45rem;
	}

	.pw-numero {
		padding: 0.75rem 0.6rem 0.7rem;
	}

	.pw-numero em {
		font-size: 0.66rem;
		letter-spacing: 0.02em;
	}

	.pw-numero b {
		font-size: clamp( 1.15rem, 5.8vw, 1.5rem );
	}

	.pw-numero--parola b {
		font-size: clamp( 0.95rem, 4.4vw, 1.1rem );
	}

	.pw-numero span {
		font-size: 0.72rem;
	}
}

/* Chi ha chiesto meno movimento vede la rete accesa e ferma: nessun
   contenuto dipende dall'animazione, quindi non c'è niente da recuperare —
   basta smettere di muoversi. */
@media ( prefers-reduced-motion: reduce ) {
	.pw-giro,
	.pw-salto,
	.pw-nodo,
	.pw-onda,
	.pw-riserva,
	.pw-punto,
	.pw-nube,
	.pw-spazzata,
	.pw-scia {
		animation: none;
	}

	.pw-nodo { opacity: 0.9; }
	.pw-riserva { opacity: 0.4; }
	.pw-salto,
	.pw-spazzata { opacity: 0; }
}

/* ---------- Fascia rassicurazioni ---------- */

/* La fascia sta attaccata all'apertura e ne condivide il fondo: chiude il
   momento scuro invece di aprire subito il bianco. Prima era una striscia
   bianca, ed era il punto in cui la pagina si sgonfiava. */
.pw-rassicurazioni {
	background-color: var( --pw-notte );
	background-image: linear-gradient( to bottom, #0B1130, var( --pw-notte ) );
	/* Il colore va sulla sezione, non solo sull'elenco: qualunque cosa ci
	   finisca dentro domani eredita il bianco invece del testo scuro, che
	   qui sopra sarebbe illeggibile. */
	color: var( --wp--preset--color--bianco );
	padding-block: 1.6rem;
	padding-inline: var( --pw-margine );
}

.pw-rassicurazioni ul {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) );
	gap: 1rem 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	/* Bianco pieno su #080C24: 19,4:1. */
	color: var( --wp--preset--color--bianco );
}

.pw-rassicurazioni .pw-icona {
	color: var( --wp--preset--color--ciano-chiaro );
}

.pw-rassicurazioni li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.pw-icona {
	flex: none;
	width: 24px;
	height: 24px;
	color: var( --wp--preset--color--ciano );
}

/* ---------- Sezioni ---------- */

.pw-copertura,
.pw-listino-fwa,
.pw-listino-fttc,
.pw-comodato,
.pw-bolletta,
.pw-storia,
.pw-perche,
.pw-servizi,
.pw-contatti,
.pw-servizi-dettaglio,
.pw-nota-iva {
	padding-block: var( --wp--preset--spacing--50 );
	padding-inline: var( --pw-margine );
}

/* I due listini stanno su un grigio chiarissimo: le card sono bianche, e su
   bianco sparivano dentro il fondo. */
.pw-listino-fwa,
.pw-listino-fttc {
	background-color: var( --wp--preset--color--superficie );
}

.pw-listino-fwa {
	border-block-start: 1px solid var( --wp--preset--color--bordo );
}

.pw-listino-fttc {
	border-block-end: 1px solid var( --wp--preset--color--bordo );
}

/* Il titolo di sezione porta un trattino ciano: dice «qui comincia una
   sezione nuova» senza aggiungere un'etichetta fatta di parole. */
.pw-sezione__interno > h2,
.pw-copertura__interno > h2 {
	position: relative;
	font-size: var( --wp--preset--font-size--titolo );
	margin-block: 0 0.85rem;
	padding-block-start: 1.35rem;
}

.pw-sezione__interno > h2::before,
.pw-copertura__interno > h2::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 44px;
	height: 4px;
	border-radius: 4px;
	background: var( --wp--preset--color--ciano );
}

.pw-sezione__intro,
.pw-sezione__nota {
	color: var( --wp--preset--color--testo-secondario );
	font-size: var( --wp--preset--font-size--medio );
	line-height: 1.65;
}

.pw-sezione__nota {
	margin-block-start: 1.75rem;
	font-size: 0.9375rem;
}

/* ---------- Verifica copertura ---------- */

.pw-copertura {
	background: var( --wp--preset--color--bianco );
	/* Il pulsante dell'apertura porta qui (vedi copertura.js). Senza questo
	   margine il titolo arrivava a 8 px dal bordo dello schermo: la sezione
	   ha poco riempimento sopra, e al momento del salto sta ancora salendo
	   dei sedici pixel della rivelazione. */
	scroll-margin-block-start: 3rem;
}

.pw-copertura__interno {
	max-width: 44rem;
}

.pw-copertura label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --wp--preset--color--testo );
	margin-block-end: 0.5rem;
}

.pw-copertura__modulo {
	/* Ci si arriva dal pulsante dell'apertura: l'etichetta non deve finire
	   sotto l'intestazione fissa. */
	scroll-margin-block-start: 7rem;
	margin-block-start: 2rem;
	padding: 1.5rem;
	background: var( --wp--preset--color--superficie );
	border: 1px solid var( --wp--preset--color--bordo );
	border-radius: var( --pw-raggio );
}

.pw-copertura__riga {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.pw-copertura input {
	flex: 1 1 16rem;
	min-height: 3.25rem;
	padding: 0.8rem 1rem;
	font: inherit;
	font-size: 1rem;
	color: var( --wp--preset--color--testo );
	background: var( --wp--preset--color--bianco );
	/* #ccd5e8 è un grigio-azzurro più marcato del bordo di tavolozza:
	   su un campo da compilare il bordo deve vedersi. */
	border: 1px solid #ccd5e8;
	border-radius: 10px;
}

.pw-copertura input::placeholder {
	color: var( --wp--preset--color--testo-secondario );
}

/* Le zone dell'isola: dicono «ci siamo davvero, dappertutto» meglio di
   qualunque frase. Sono un elenco, non collegamenti. */
.pw-passi__titolo {
	margin-block: 0 0;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var( --wp--preset--color--testo );
}

/* I numeri sono di CSS, non di markup: sono ordinali di una lista, e la
   lista li ha gia'. Scriverli a mano vuol dire poterli sbagliare. */
.pw-passi {
	counter-reset: pw-passo;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.pw-passi li {
	position: relative;
	counter-increment: pw-passo;
	padding-inline-start: 2.4rem;
	padding-block-end: 1.1rem;
}

.pw-passi li:last-child {
	padding-block-end: 0;
}

.pw-passi li::before {
	content: counter( pw-passo );
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	display: grid;
	place-items: center;
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 999px;
	background: var( --wp--preset--color--bianco );
	border: 1px solid var( --wp--preset--color--bordo );
	font-family: var( --wp--preset--font-family--titoli );
	font-weight: 700;
	font-size: 0.8125rem;
	color: var( --wp--preset--color--blu );
}

.pw-passi b {
	display: block;
	font-size: 0.9375rem;
	margin-block-end: 0.15rem;
	color: var( --wp--preset--color--testo );
}

.pw-passi span {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var( --wp--preset--color--testo-secondario );
}

/* ---------- Piani ---------- */

.pw-piani {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: 1rem;
	margin-block: 2.5rem 0;
	align-items: stretch;
}

.pw-piano {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.6rem 1.4rem 1.4rem;
	background: var( --wp--preset--color--bianco );
	border: 1px solid var( --wp--preset--color--bordo );
	border-radius: var( --pw-raggio );
}

.pw-piano h3 {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--testo );
	margin: 0;
}

.pw-piano__prezzo {
	font-family: var( --wp--preset--font-family--titoli );
	font-size: 2.75rem;
	font-weight: 700;
	letter-spacing: -0.045em;
	color: var( --wp--preset--color--blu );
	margin-block: 0.5rem 0;
	line-height: 1;
}

.pw-piano__prezzo span {
	display: block;
	font-family: var( --wp--preset--font-family--testo );
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0;
	color: var( --wp--preset--color--testo-secondario );
	margin-block-start: 0.35rem;
}

.pw-piano ul {
	list-style: none;
	margin: 1.25rem 0 1.5rem;
	padding: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var( --wp--preset--color--testo-secondario );
}

.pw-piano li {
	padding-block: 0.45rem;
	border-block-start: 1px solid var( --wp--preset--color--bordo );
}

.pw-piano li:first-child {
	border-block-start: 0;
}

.pw-piano__azione {
	margin-block-start: auto;
	align-self: flex-start;
	font-weight: 600;
	color: var( --wp--preset--color--blu );
	text-decoration: none;
	border-block-end: 1px solid rgba( 18, 74, 163, 0.28 );
	padding-block-end: 3px;
}

.pw-piano__azione:hover {
	border-block-end-color: var( --wp--preset--color--blu );
}

/* Il piano consigliato non è una card col bordo diverso: è invertita.
   Chi guarda la fila la vede prima ancora di leggerla. */
.pw-piano--top {
	background: linear-gradient( 165deg, #0C2D6F, var( --wp--preset--color--blu-profondo ) );
	border-color: transparent;
	color: #fff;
	box-shadow: 0 24px 50px -24px rgba( 20, 26, 69, 0.7 );
}

.pw-piano--top h3 {
	color: #fff;
}

/*
 * L'ocra (#FFB43D) sul fondo del piano consigliato fa 7,3:1 sul punto più
 * chiaro (#0C2D6F) e 9,4:1 sul più scuro (#141A45): sopra il minimo WCAG
 * di 4,5:1 su tutta l'estensione del gradiente.
 */
.pw-piano--top .pw-piano__prezzo {
	color: var( --pw-ocra );
}

/* rgba( 255, 255, 255, 0.72 ) fa 6,4:1 sul punto più chiaro del gradiente. */
.pw-piano--top .pw-piano__prezzo span,
.pw-piano--top ul {
	color: rgba( 255, 255, 255, 0.72 );
}

.pw-piano--top li {
	border-block-start-color: rgba( 255, 255, 255, 0.14 );
}

.pw-piano--top .pw-piano__azione {
	color: var( --wp--preset--color--ciano-chiaro );
	border-block-end-color: rgba( 127, 227, 255, 0.4 );
}

.pw-piano--arrivo {
	border-style: dashed;
	/* #c9d2e8 non ha un equivalente esatto in tavolozza: nessun colore
	   dista abbastanza poco da poterlo sostituire senza cambiare la resa. */
	border-color: #c9d2e8;
	background: transparent;
}

.pw-piano--arrivo .pw-piano__prezzo {
	color: var( --wp--preset--color--testo-secondario );
}

/*
 * Fondo ocra pieno con testo scuro: l'ocra col testo del tema fa 10,4:1,
 * ben sopra il minimo WCAG di 4,5:1. Il bollino sta sul bordo alto della
 * card, dove si legge prima del prezzo.
 */
.pw-piano__bollino {
	position: absolute;
	inset-block-start: -0.75rem;
	inset-inline-start: 1.4rem;
	padding: 0.35rem 0.75rem;
	border-radius: 6px;
	background: var( --pw-ocra );
	color: var( --wp--preset--color--testo );
	font-size: 0.75rem;
	font-weight: 700;
}

/*
 * Fondo ciano pieno con testo scuro (non bianco): il bianco su ciano fa
 * solo 2,53:1, sotto il minimo WCAG di 4,5:1. Il testo scuro fa 7,06:1.
 */
.pw-piano__bollino--arrivo {
	background: var( --wp--preset--color--ciano );
	color: var( --wp--preset--color--testo );
}

/* Su telefono i quattro piani dell'antenna scorrono di lato.
 *
 * Uno sotto l'altro erano un chilometro di pagina: quattro card alte quanto
 * uno schermo, prima di arrivare alla fibra. In fila orizzontale occupano
 * l'altezza di una card sola, e la successiva si affaccia dal bordo destro:
 * è quel pezzo che si vede a dire che si scorre, senza bisogno di scriverlo.
 *
 * La fila esce dai margini della sezione fino al bordo dello schermo, così
 * la card scorre via dal vetro e non da una linea invisibile a 24 px dal
 * bordo. Il riempimento in alto lascia posto al bollino «Più scelto», che
 * sporge sopra la card e un contenitore che scorre taglierebbe.
 */
@media ( max-width: 781px ) {
	.pw-piani:not( .pw-piani--due ) {
		display: flex;
		gap: 0.75rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var( --pw-margine );
		margin-inline: calc( -1 * var( --pw-margine ) );
		padding: 1rem var( --pw-margine ) 1.75rem;
		margin-block: 1.5rem 0;
		scrollbar-width: none;
	}

	.pw-piani:not( .pw-piani--due )::-webkit-scrollbar {
		display: none;
	}

	.pw-piani:not( .pw-piani--due ) > .pw-piano {
		flex: 0 0 min( 80%, 17rem );
		scroll-snap-align: start;
	}
}

/* ---------- Fibra e opzioni voce ---------- */

.pw-piani--due {
	grid-template-columns: repeat( auto-fit, minmax( 18rem, 1fr ) );
	max-width: 48rem;
}

.pw-voce {
	background: var( --wp--preset--color--superficie );
}

.pw-voce ul {
	margin-block-start: 1.1rem;
}

/* ---------- Riquadri informativi ---------- */

.pw-riquadri {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
	gap: 1rem;
	margin-block-start: 2.5rem;
}

.pw-riquadro {
	padding: 1.4rem 1.3rem;
	background: var( --wp--preset--color--bianco );
	border: 1px solid var( --wp--preset--color--bordo );
	border-radius: var( --pw-raggio );
}

.pw-riquadro .pw-icona {
	width: 28px;
	height: 28px;
	margin-block-end: 0.9rem;
}

.pw-riquadro h3 {
	font-size: 1.0625rem;
	margin: 0 0 0.4rem;
}

.pw-riquadro p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var( --wp--preset--color--testo-secondario );
}

/* ---------- La valutazione della bolletta ---------- */

/* Dentro la colonna l'occhiello non ha bisogno di una misura sua: gliela dà
   la colonna. */
.pw-bolletta .pw-sezione__intro {
	max-width: none;
}

/* La promessa ha un blocco suo, con la barra ciano a sinistra: e' la frase
   che un venditore non direbbe mai, e in coda a un paragrafo si perdeva.
   È anche l'oggetto che riempie la metà destra della sezione — come le zone
   dell'isola nella verifica copertura — e per reggere quel ruolo ha un fondo
   suo invece di stare appoggiata sul bianco. */
.pw-bolletta__promessa {
	padding: clamp( 1.5rem, 3vw, 2rem );
	padding-inline-start: clamp( 1.5rem, 3vw, 2rem );
	background: var( --wp--preset--color--superficie );
	border: 1px solid var( --wp--preset--color--bordo );
	border-inline-start: 3px solid var( --wp--preset--color--ciano );
	border-radius: var( --pw-raggio );
	font-size: 1.125rem;
	line-height: 1.6;
	color: var( --wp--preset--color--testo );
}

.pw-bolletta__azioni {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-wrap: wrap;
	margin-block-start: 2rem;
}

.pw-bolletta__azioni span {
	font-size: 0.9375rem;
	color: var( --wp--preset--color--testo-secondario );
}

/* ---------- Le tappe di «Chi siamo» ---------- */

/* L'anno sopra il titolo, come il cappello dei numeri dell'apertura: in una
   fila di tappe la data è il dato che si cerca per primo. */
.pw-tappa__anno {
	display: block;
	margin-block-end: 0.5rem;
	font-family: var( --wp--preset--font-family--titoli );
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ciano-scuro, var( --wp--preset--color--blu ) );
}

/* I due blocchi di testo sotto le tappe: i clienti e il perche'. Larghezza
   di lettura, non di pagina — sotto le card una riga lunga il doppio si
   legge male. */
.pw-storia__blocco {
	max-width: 46rem;
	margin-block-start: 2.75rem;
}

.pw-storia__blocco .pw-storia__titolo {
	font-size: 1.25rem;
	margin: 0 0 0.6rem;
}

.pw-storia__blocco p {
	margin: 0 0 0.9rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var( --wp--preset--color--testo-secondario );
}

.pw-storia__blocco p:last-child {
	margin-block-end: 0;
}

/* ---------- Servizi extra ---------- */

.pw-etichette {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-block-start: 1.75rem;
}

.pw-etichetta-servizio {
	padding: 0.7rem 1.15rem;
	background: var( --wp--preset--color--bianco );
	border: 1px solid var( --wp--preset--color--bordo );
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var( --wp--preset--color--testo );
	text-decoration: none;
	transition: border-color 0.16s ease-out, color 0.16s ease-out;
}

.pw-etichetta-servizio:hover,
.pw-etichetta-servizio:focus-visible {
	border-color: var( --wp--preset--color--ciano );
	color: var( --wp--preset--color--blu );
}

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

.pw-contatti {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var( --pw-notte );
	/*
	 * La sfumatura si esaurisce al 72%, non al bordo. Prima era diagonale e
	 * arrivava al notte pieno solo nell'angolo in basso a destra: in basso a
	 * sinistra si toccavano due blu diversi e si vedeva una riga netta fra
	 * la chiusura e il piè di pagina. Colori simili che non coincidono sono
	 * peggio di colori dichiaratamente diversi, perché sembrano un errore.
	 *
	 * Esaurendola prima, l'ultima fascia è piatta e uguale al piè di pagina:
	 * le due sezioni si leggono come un unico blocco scuro, che è quello che
	 * sono.
	 */
	background-image: linear-gradient( 168deg, #131B52 0%, #0B1130 42%, var( --pw-notte ) 72% );
	/*
	 * rgba( 255, 255, 255, 0.78 ) misurato sui due estremi del fondo:
	 * 8,9:1 su #131B52 e 15,3:1 su #080C24, entrambi ben sopra il minimo
	 * WCAG di 4,5:1.
	 */
	color: rgba( 255, 255, 255, 0.78 );
	padding-block-end: clamp( 10rem, 21vw, 15rem );
}

/* La chiusura riprende l'isola dell'apertura, più bassa: la pagina finisce
   dove è cominciata. */
.pw-contatti__sfondo {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.pw-contatti .pw-isola {
	height: clamp( 8rem, 16vw, 16rem );
	opacity: 0.85;
}

.pw-contatti__interno {
	position: relative;
	z-index: 2;
}

.pw-contatti h2,
.pw-contatti h3 {
	color: #fff;
}

.pw-contatti h3 {
	font-size: 1rem;
	margin-block: 0 0.4rem;
}

.pw-contatti__colonne {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: 2rem;
	margin-block: 2rem;
	max-width: 44rem;
}

.pw-contatti a:not( .pw-whatsapp ) {
	color: var( --wp--preset--color--ciano-chiaro );
}

/* ---------- Piè di pagina ---------- */

/* Il piè di pagina è centrato, non allineato a sinistra: le sue righe sono
   corte e tutte diverse, e a sinistra di una banda larga 1180 px lasciavano
   un vuoto che faceva sembrare la pagina interrotta invece che chiusa. Al
   centro le tre righe si impilano simmetriche sotto il marchio, che è a sua
   volta una figura simmetrica: la pagina chiude con un sigillo. */
.pw-footer {
	color: var( --wp--preset--color--testo-chiaro );
	font-size: 0.875rem;
	line-height: 1.7;
	text-align: center;
	text-wrap: pretty;
}

.pw-logo-footer {
	display: block;
	height: 2.9rem;
	width: auto;
	margin-inline: auto;
	margin-block-end: 1.5rem;
	opacity: 0.9;
}

.pw-footer strong {
	color: var( --wp--preset--color--bianco );
}

.pw-footer a {
	color: var( --wp--preset--color--ciano-chiaro );
	text-decoration: none;
}

.pw-footer a:hover,
.pw-footer a:focus-visible {
	text-decoration: underline;
}

/* Le quattro pagine, sotto il marchio. Su telefono il menu in intestazione
   è nascosto — l'overlay del blocco Navigation costerebbe 40 KB di script —
   e fino a qui le pagine interne non si raggiungevano da nessuna parte. */
.pw-footer__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 1.75rem;
	margin-block: 0 1.25rem;
	font-size: 0.9375rem;
	font-weight: 500;
}

.pw-footer .pw-footer__menu a {
	color: var( --wp--preset--color--bianco );
	/* Un bersaglio da dito: 44 px d'altezza, anche se la riga è più bassa. */
	padding-block: 0.7rem;
}

.pw-footer .pw-footer__menu a:hover,
.pw-footer .pw-footer__menu a:focus-visible {
	color: var( --wp--preset--color--ciano-chiaro );
}

/* Numeri ed email si toccano, ma dentro la riga dei dati societari restano
   dati: stesso colore del testo, sottolineati appena. */
.pw-footer .pw-footer__ragione a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba( 169, 178, 214, 0.45 );
	text-underline-offset: 0.2em;
}

.pw-footer .pw-footer__ragione a:hover,
.pw-footer .pw-footer__ragione a:focus-visible {
	color: var( --wp--preset--color--bianco );
	text-decoration-color: currentColor;
}

.pw-footer__nota,
.pw-footer__legali {
	font-size: 0.8125rem;
	margin-block-start: 0.75rem;
}

/* I tre documenti contrattuali stanno staccati dal resto: sono l'unica riga
   del piè di pagina su cui si clicca, e vanno letti come tali. */
.pw-footer__legali {
	margin-block-start: 1.35rem;
}

/* ---------- Pagine interne ----------
 *
 * L'intestazione è una banda notte, come l'apertura della home. Era il
 * titolo della pagina in nero su bianco, seguito subito dal titolo grande
 * della prima sezione: due titoli di fila sullo stesso fondo, e le pagine
 * interne sembravano una bozza accanto alla home. Così ogni pagina ha i tre
 * atti della home — si entra nel buio, si legge nella luce, si chiude nel
 * buio — e il titolo della pagina e quello della sezione non si fanno più
 * concorrenza, perché stanno su due fondi diversi.
 */

.pw-pagina__intestazione {
	background-color: var( --pw-notte );
	background-image: linear-gradient( 160deg, #131B52 0%, #0B1130 55%, var( --pw-notte ) 100% );
	/* rgba( 255, 255, 255, 0.78 ) fa 8,9:1 sul punto più chiaro (#131B52). */
	color: rgba( 255, 255, 255, 0.78 );
	padding-block: clamp( 2.75rem, 7vw, 4.75rem );
	padding-inline: var( --pw-margine );
	margin-block: 0 !important;
}

/* Il contenuto della pagina viene subito sotto: senza, il margine a flusso
   di WordPress apre una striscia di fondo pagina fra la banda e la prima
   sezione — lo stesso difetto che le sezioni tolgono con il loro
   `margin-block: 0 !important`. */
.pw-pagina__intestazione + .wp-block-post-content {
	margin-block-start: 0 !important;
}

.pw-pagina__intestazione h1 {
	font-size: var( --wp--preset--font-size--titolo );
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var( --wp--preset--color--bianco );
	margin: 0;
}

.pw-pagina__sommario {
	margin-block: 1rem 0 !important;
}

.pw-pagina__sommario p {
	max-width: 36rem;
	margin: 0;
	font-size: var( --wp--preset--font-size--medio );
	line-height: 1.6;
	text-wrap: pretty;
}

/* ---------- Servizi, due per due ---------- */

.pw-servizi-dettaglio {
	background-color: var( --wp--preset--color--superficie );
}

/* Due colonne fisse, non `auto-fit`: con quattro card e una riga larga
   `auto-fit` ne mette tre sopra e una sola sotto. */
.pw-servizi__griglia {
	display: grid;
	gap: 1rem;
}

@media ( min-width: 700px ) {
	.pw-servizi__griglia {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

.pw-servizio {
	padding: clamp( 1.4rem, 3vw, 2rem );
	background: var( --wp--preset--color--bianco );
	border: 1px solid var( --wp--preset--color--bordo );
	border-radius: var( --pw-raggio );
	/* Le etichette della home portano qui, a un servizio preciso: la card
	   non deve finire sotto l'intestazione fissa. */
	scroll-margin-block-start: 6rem;
}

.pw-servizio .pw-icona {
	width: 32px;
	height: 32px;
	margin-block-end: 1.1rem;
}

.pw-servizio h2 {
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
}

.pw-servizio p {
	margin: 0;
	line-height: 1.6;
	color: var( --wp--preset--color--testo-secondario );
}

.pw-servizi__azione {
	margin-block: 2rem 0;
}

.pw-nota-iva {
	background: var( --wp--preset--color--superficie );
	border-block-start: 1px solid var( --wp--preset--color--bordo );
	font-size: 0.875rem;
	color: var( --wp--preset--color--testo-secondario );
}

/* ---------- Movimento ----------
 *
 * Due movimenti, e nient'altro: l'apertura entra in scena da sola quando la
 * pagina si carica, il resto si rivela scorrendo. Sono lenti e piccoli di
 * proposito — devono togliere la sensazione di pagina stampata, non
 * chiedere attenzione.
 *
 * Tutto ciò che nasconde qualcosa sta sotto `.pw-movimento`, una classe che
 * mette `movimento.js`. Senza JavaScript quella classe non arriva e non c'è
 * una sola regola che possa rendere invisibile del testo. È la ragione per
 * cui lo stato di partenza non è scritto direttamente su `[data-anima]`.
 */

/* La rivelazione sposta con `translate`, non con `transform`. Sono due
   proprietà distinte e si sommano: così il sollevamento al passaggio del
   mouse, che usa `transform`, resta libero di funzionare sulle card che
   nel frattempo sono state rivelate. Con una sola proprietà per entrambi,
   la regola più specifica vince e l'altro effetto sparisce. */
.pw-movimento [data-anima] {
	opacity: 0;
	translate: 0 16px;
	transition: opacity 0.6s ease-out, translate 0.6s ease-out;
}

.pw-movimento [data-anima].pw-visibile {
	opacity: 1;
	translate: none;
}

/* La cascata: il contenitore sta fermo, entrano i figli uno dopo l'altro.
   Il passo è breve — a 90 ms si legge come un'onda, non come una fila di
   elementi in ritardo. */
.pw-movimento [data-anima='cascata'] {
	opacity: 1;
	translate: none;
}

.pw-movimento [data-anima='cascata'] > * {
	opacity: 0;
	translate: 0 16px;
	transition: opacity 0.6s ease-out, translate 0.6s ease-out;
}

.pw-movimento [data-anima='cascata'].pw-visibile > * {
	opacity: 1;
	translate: none;
}

.pw-movimento [data-anima='cascata'].pw-visibile > :nth-child( 2 ) { transition-delay: 0.09s; }
.pw-movimento [data-anima='cascata'].pw-visibile > :nth-child( 3 ) { transition-delay: 0.18s; }
.pw-movimento [data-anima='cascata'].pw-visibile > :nth-child( 4 ) { transition-delay: 0.27s; }
.pw-movimento [data-anima='cascata'].pw-visibile > :nth-child( 5 ) { transition-delay: 0.36s; }
.pw-movimento [data-anima='cascata'].pw-visibile > :nth-child( 6 ) { transition-delay: 0.45s; }

/* ---------- Movimento dell'apertura ----------
 *
 * Qui non serve JavaScript: sono animazioni CSS, partono da sole al
 * caricamento e con `both` lasciano l'elemento al suo stato finale. Se il
 * visitatore ha chiesto meno movimento, il blocco `prefers-reduced-motion`
 * in cima al file le azzera e restano lì, ferme e complete.
 */

@keyframes pw-entra {
	from {
		opacity: 0;
		transform: translateY( 18px );
	}
}

.pw-hero__testo > * {
	animation: pw-entra 0.75s ease-out both;
}

.pw-hero__testo > :nth-child( 2 ) { animation-delay: 0.09s; }
.pw-hero__testo > :nth-child( 3 ) { animation-delay: 0.18s; }
.pw-hero__testo > :nth-child( 4 ) { animation-delay: 0.27s; }
.pw-hero__testo > :nth-child( 5 ) { animation-delay: 0.36s; }


/* ---------- Micro-interazioni ----------
 *
 * Le card erano completamente inerti: il puntatore ci passava sopra e non
 * succedeva niente, ed è metà della ragione per cui la pagina sembrava
 * stampata. Si sollevano di due pixel e prendono un'ombra: quanto basta a
 * far capire che sono oggetti, non rettangoli disegnati.
 *
 * Solo dove esiste davvero un puntatore: su un telefono `:hover` resta
 * appiccicato dopo il tocco, e la card resterebbe sollevata per sempre.
 */
@media ( hover: hover ) {
	.pw-piano,
	.pw-riquadro {
		transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
	}

	.pw-piano:hover,
	.pw-riquadro:hover {
		transform: translateY( -2px );
		border-color: rgba( 0, 174, 239, 0.45 );
		box-shadow: 0 18px 36px -22px rgba( 16, 21, 50, 0.45 );
	}

	/* Le card scure del piano consigliato: l'ombra chiara non si vedrebbe,
	   il bagliore ciano sì. */
	.pw-piano--top:hover {
		border-color: rgba( 127, 227, 255, 0.5 );
		box-shadow: 0 20px 40px -22px rgba( 0, 174, 239, 0.5 );
	}
}

/* Il pulsante premuto torna giù: senza, il clic non ha peso. */
.pw-whatsapp:active {
	transform: translateY( 1px );
	box-shadow: 0 6px 16px -10px rgba( 37, 211, 102, 0.9 );
}

/* ---------- Il ritmo della pagina ----------
 *
 * Il sito sembrava vuoto per due ragioni misurabili: sette sezioni di fila
 * sullo stesso fondo chiaro, e tre sezioni in cui il testo occupava la
 * colonna di sinistra lasciando bianca la destra. Qui si correggono
 * entrambe. Il contenuto non cambia: cambia dove sta e su cosa sta.
 */

/* Due colonne piene, non una colonna e un buco. Sotto i 900 px tornano una
   sopra l'altra: su un telefono la colonna giusta è una sola. */
.pw-copertura__interno,
.pw-contatti__interno,
.pw-bolletta__interno {
	max-width: none;
	display: grid;
	gap: clamp( 2rem, 4vw, 3.5rem );
}

@media ( min-width: 900px ) {
	.pw-copertura__interno,
	.pw-contatti__interno,
	.pw-bolletta__interno {
		grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 1fr );
		align-items: start;
	}

	/* Qui la colonna destra è un blocco solo, molto più corto della sinistra:
	   appeso in cima lascerebbe sotto di sé lo stesso vuoto che si voleva
	   togliere. Sta a metà altezza, all'altezza del testo che commenta. */
	.pw-bolletta__interno {
		align-items: center;
	}
}

/* Il trattino ciano segue il titolo dentro la colonna. */
.pw-colonna > h2 {
	position: relative;
	font-size: var( --wp--preset--font-size--titolo );
	margin-block: 0 0.85rem;
	padding-block-start: 1.35rem;
}

.pw-colonna > h2::before {
	content: '';
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 2.5rem;
	height: 3px;
	border-radius: 3px;
	background: var( --wp--preset--color--ciano );
}

/* Le zone dell'isola diventano un oggetto vero, con un peso suo: è quello
   che riempie la metà destra della verifica copertura. */
.pw-copertura__passi {
	padding: clamp( 1.5rem, 3vw, 2rem );
	background: var( --wp--preset--color--superficie );
	border: 1px solid var( --wp--preset--color--bordo );
	border-radius: var( --pw-raggio );
}

/* ---------- Comodato: la banda scura ----------
 *
 * «L'antenna e il router sono un problema nostro» è la promessa più forte
 * del listino e stava su fondo bianco come tutto il resto. Qui prende il
 * momento di contrasto che merita.
 */
/* Il comodato era diventato una banda scura in mezzo al corpo chiaro, e
   insieme alla dichiarazione fotografica creava la sequenza
   scuro-chiaro-scuro che spezzava la lettura. Torna nel corpo chiaro: il
   buio resta un fatto di inizio e di fine. */
.pw-comodato {
	background-color: var( --wp--preset--color--bianco );
}

/* Le card sul fondo scuro: vetro, non bianco. Un rettangolo bianco pieno
   qui dentro sarebbe un buco di luce. */
/* Sopra la fotografia la card porta il proprio fondo scuro: un velo di
   bianco al 6% lascerebbe passare l'immagine sotto il testo. */
.pw-riquadri--scuri .pw-riquadro {
	background: rgba( 8, 12, 36, 0.55 );
	border-color: rgba( 255, 255, 255, 0.18 );
	backdrop-filter: blur( 8px );
}

@supports not ( backdrop-filter: blur( 1px ) ) {
	.pw-riquadri--scuri .pw-riquadro {
		background: rgba( 8, 12, 36, 0.78 );
	}
}

.pw-riquadri--scuri .pw-riquadro h3 {
	color: var( --wp--preset--color--bianco );
}

.pw-riquadri--scuri .pw-riquadro p {
	color: var( --wp--preset--color--testo-chiaro );
}

.pw-riquadri--scuri .pw-riquadro strong {
	color: var( --wp--preset--color--bianco );
}

/* Il numero dell'assistenza, che si tocca per chiamare. */
.pw-riquadri--scuri .pw-riquadro a {
	color: var( --wp--preset--color--bianco );
	text-underline-offset: 0.2em;
}

.pw-riquadri--scuri .pw-icona {
	color: var( --wp--preset--color--ciano-chiaro );
}

@media ( hover: hover ) {
	.pw-riquadri--scuri .pw-riquadro:hover {
		border-color: rgba( 127, 227, 255, 0.5 );
		box-shadow: 0 20px 40px -22px rgba( 0, 174, 239, 0.5 );
	}
}

/* ---------- «Siamo di Procida»: la banda fotografica ----------
 *
 * Il secondo e ultimo momento fotografico del sito. Regge la stessa regola
 * dell'apertura: due strati fra la fotografia e il testo — il velo e il
 * fondo scuro sotto — così si può cambiare scatto senza rifare i conti sul
 * contrasto.
 */
.pw-perche {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var( --pw-notte );
	color: var( --wp--preset--color--testo-chiaro );
	padding-block: clamp( 4rem, 9vw, 6.5rem );
}

.pw-perche__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 55%;
}

/*
 * Il velo, e i conti che lo tengono onesto. Il caso peggiore è una
 * fotografia bianca piena: sotto un velo a 0,78 resta una luminanza
 * relativa di circa 0,043. Il titolo bianco ci fa sopra 11:1 e il testo
 * chiaro 5,4:1, entrambi oltre il minimo WCAG di 4,5:1. Le card hanno in
 * più un fondo scuro proprio, che porta il loro testo a 7:1.
 *
 * A 0,92, com'era prima, i conti tornavano ma della fotografia non si
 * vedeva più niente: era una banda scura con una texture. Il velo serve a
 * proteggere il testo, non a cancellare l'immagine.
 */
.pw-perche__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba( 8, 12, 36, 0.78 );
}

.pw-perche__interno {
	position: relative;
	z-index: 2;
}

/* Il salto di scala: questa è una dichiarazione, non un titolo di sezione.
   Senza il salto tutti i titoli pesano uguale e la pagina non ha gerarchia. */
.pw-perche h2 {
	font-size: var( --wp--preset--font-size--gigante );
	letter-spacing: -0.035em;
	color: var( --wp--preset--color--bianco );
	margin-block: 0 1rem;
	padding-block-start: 0;
	max-width: 16ch;
}

.pw-perche h2::before {
	content: none;
}

.pw-perche .pw-sezione__intro {
	color: var( --wp--preset--color--testo-chiaro );
	font-size: 1.125rem;
	max-width: 38rem;
}

/* ---------- Contatti: la metà destra piena ---------- */

/* Vetro smerigliato, non vetro trasparente: le scie passano dietro la scheda
   e, col fondo al 5% e basta, attraversavano nitide «Assistenza clienti».
   Sfocate diventano un chiarore che si muove, e il testo resta pulito. */
.pw-contatti__scheda {
	display: grid;
	gap: 1.75rem;
	padding: clamp( 1.5rem, 3vw, 2.25rem );
	background: rgba( 255, 255, 255, 0.05 );
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-radius: var( --pw-raggio );
	backdrop-filter: blur( 14px );
}

@supports not ( backdrop-filter: blur( 1px ) ) {
	.pw-contatti__scheda {
		background: rgba( 13, 19, 52, 0.92 );
	}
}

.pw-contatti .pw-sezione__intro {
	color: var( --wp--preset--color--testo-chiaro );
}

/* La chiusura non ha più bisogno dello spazio che teneva libero in fondo
   per il disegno dell'isola: adesso lì sotto non c'è niente da mostrare. */
.pw-contatti {
	padding-block-end: clamp( 4rem, 8vw, 6rem );
}

/* Le sezioni si toccano.
 *
 * L'impaginazione a flusso di WordPress mette 24 px di margine fra un blocco
 * e l'altro, con una regola generata (`.is-layout-flow > *`) più specifica di
 * qualunque selettore di classe singola. Finché le sezioni erano tutte
 * bianche il margine non si vedeva; adesso che i fondi cambiano diventa una
 * riga chiara fra una banda e l'altra. Ogni sezione ha già il suo respiro
 * interno: quello esterno va tolto. È lo stesso motivo per cui più in alto
 * il piè di pagina porta un `!important`. */
.pw-hero,
.pw-rassicurazioni,
.pw-copertura,
.pw-listino-fwa,
.pw-listino-fttc,
.pw-bolletta,
.pw-comodato,
.pw-storia,
.pw-perche,
.pw-servizi,
.pw-servizi-dettaglio,
.pw-nota-iva,
.pw-contatti {
	margin-block: 0 !important;
}

/* «Facciamo anche» era l'ultima sezione con mezza pagina vuota: il testo a
   sinistra, il nulla a destra. Le etichette dei servizi ci stanno benissimo
   accanto al titolo invece che sotto. */
.pw-servizi__interno {
	display: grid;
	gap: clamp( 1.5rem, 3vw, 3rem );
	align-items: center;
}

@media ( min-width: 900px ) {
	.pw-servizi__interno {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}

	.pw-servizi__interno .pw-etichette {
		margin-block-start: 0;
		justify-content: flex-end;
	}
}

/* ---------------------------------------------------------------- legali

   Condizioni di contratto, privacy, cookie. Sono documenti da leggere per
   intero, non pagine da scorrere: la misura della riga scende a 68 caratteri
   e la scala dei titoli si appiattisce, perché qui la gerarchia serve a
   trovare un articolo, non a dare ritmo. Nessuna animazione: il testo c'è
   subito, anche se lo si apre da un collegamento diretto a metà pagina. */

.pw-legale {
	padding-block: var( --wp--preset--spacing--40 );
}

/* Il contenitore è largo quanto quello del titolo della pagina, così il testo
   parte dallo stesso bordo sinistro; è la misura della riga a stringersi, non
   la colonna a centrarsi. */
.pw-legale__interno {
	max-width: 1180px;
	padding-inline: var( --pw-margine );
	margin-inline: auto;
	/* Il resto del sito ragiona in `content-box`: qui il `max-width` misura
	   la colonna di testo, e il margine laterale le sta fuori. Da quando la
	   sezione è fatta di blocchi, il contenitore porta anche la classe
	   `wp-block-group`, e la libreria dei blocchi di WordPress le attacca
	   `box-sizing: border-box`: il margine finirebbe dentro il `max-width` e
	   la colonna si stringerebbe di 260 px, spostando tutto il testo a
	   destra. Questa riga rimette il modello di box che il resto del foglio
	   dà per scontato — non è un aggiustamento a occhio. */
	box-sizing: content-box;
}

.pw-legale__interno > * {
	max-width: 44rem;
}

.pw-legale__fonte {
	color: var( --wp--preset--color--testo-secondario );
	font-size: 0.875rem;
	margin-block: -0.5rem 2.5rem;
	padding-block-end: 1.5rem;
	border-block-end: 1px solid var( --wp--preset--color--bordo );
}

.pw-legale h2 {
	font-size: 1.0625rem;
	line-height: 1.35;
	margin-block: 2.25rem 0.6rem;
}

.pw-legale h2:first-of-type {
	margin-block-start: 0;
}

.pw-legale p {
	margin-block: 0 0.85rem;
}

/* Il numero del comma: fa da appiglio per l'occhio che cerca «5.4» in una
   colonna di testo lungo, senza spezzare il capoverso in un titolo. */
.pw-legale p > strong:first-child {
	color: var( --wp--preset--color--blu );
}