html,
	body {
		font-family: 'Open Sans', sans-serif;
		font-size: 20px;
		margin: 0 auto;
		padding: 0;
		scroll-behavior: smooth;
		background: white;
	}

	a {
		scroll-behavior: smooth;
		text-decoration: none;
	}

	.mob {
		display: none;
	}

	input[type=number] {
		-moz-appearance: textfield;
	}

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}


	.logo {
		width: 15%;
		margin: 0.5%;
		max-width: min-content;
		margin: 1% auto;
	}

	.interno {
		width: 1000px;
		margin: 0 auto;
		display: block;
	}

	.trust {
		float: right;
		vertical-align: inherit;
		margin-top: 2%;
		width: 13%;
		margin-top: 0.5%;
		margin-bottom: 0;
	}

	.fascianera {
		padding: 0.2%;
		text-align: center;
		color: white;
		font-size: 20px;
		background-color: black;
	}


	h1 {
		font-size: 53px;
		font-weight: 800;
		/* font-family: 'Open sans'; */
		text-align: center;
		margin-top: 2%;
	}

	.calcola {
		font-size: 17px;
		text-align: center;
		margin-top: 3%;
	}

	/* ===== BASE ===== */

	.ico {
		width: 40%;
		vertical-align: middle;
		position: relative;
		top: -10%;
	}

	/* input usati dal form finale (caricato via form.php) */
	#telefono,
	#email,
	#nome,
	#cognome {
		color: black;
	}

	/* ===== CONTENITORI WIZARD ===== */
	.cont_esterno {
		background: #f5f5f5;
	}

	.cont_esterno_dentro {
		width: 100%;
		margin: 0 auto;
	}

	.cont_esterno_dentro_est {
		background: white;
		/* border-radius: 24px; */
		/* padding-top: 20px; */
		/* margin-top: 30px; */
	}

	/* ===== HEADER WIZARD (titolo rosso + contatore) ===== */
	.headers {
		width: 100%;
		margin: 0 auto;
		background: #E4464E;
		/* border-bottom-left-radius: 15px; */
		/* border-bottom-right-radius: 15px; */
		/* height: 50px; */
		line-height: 47px;
		text-align: center;
		/* margin-top: 15px; */
		/* border-radius: 20px; */
	}

	.header1,
	.header2,
	.header3 {
		display: inline-block;
	}

	.header1 {
		color: white;
		font-weight: 100;
		font-size: 23px;
		text-align: left;
		width: 95%;
		line-height: normal;
		text-align: center;
		width: 45%;
		padding: 2%;
	}

	.header2 {
		font-size: 25px;
	}

	.alarmes {
		font-weight: bold;
	}

	.header1_sopra {
		display: inline-block;
		margin: 0 auto;
		display: block;
	}

	.header1_sopra_mobile {
		display: none;
	}

	#sedici_fascia_hogar .prima_fascia_titolo {
		width: 50%;

	}

	.numeri_count {
		display: inline-block;
		position: relative;
		left: 8px;
		background: white;
		color: black;
		border-radius: 20px;
		width: 40px;
		text-align: center;
		height: 40px;
		top: -3px;
		line-height: 40px;
		font-size: 17px;
	}

	.numeri_count_dentro {
		display: inline-block;
	}

	/* ===== BARRE PROGRESS ===== */
	.cont_barra {
		width: 60%;
		margin: 0 auto;
		display: flex;
		margin-top: 20px !important;
	}

	.prima_barra,
	.seconda_barra,
	.terza_barra {
		background: whitesmoke;
		height: 10px;
		width: 30%;
		margin: 0 auto;
		border-radius: 20px;
	}

	#popup-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 20000;
	}

	#popup-condizioni {
		display: none;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: min(92vw, 560px);
		max-height: 80vh;
		overflow: auto;
		background: #fff;
		border-radius: 16px;
		padding: 18px 18px 14px;
		z-index: 20001;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	}

	#popup-condizioni .closeCond {
		position: absolute;
		top: 10px;
		right: 12px;
		text-decoration: none;
		font-size: 20px;
		line-height: 1;
		color: #111;
	}

	.foo2 {
		font-size: 14px;
	}

	.prima_barra_dentro,
	.seconda_barra_dentro,
	.terza_barra_dentro {
		background: #E4464E;
		height: 10px;
		border-radius: 20px;
		width: 0%;
	}

	.prima_barra_dentro {
		width: 25%;
	}

	.pallino {
		width: 20px;
		height: 20px;
		background: whitesmoke;
		border-radius: 20px;
		margin-top: -5px;
	}

	/* ===== STEP / FASCE ===== */
	.prima_fascia {
		display: none;
		text-align: center;
		margin-top: 30px;
	}

	#prima_fascia {
		display: block;
	}

	#dieci_fascia_negocio .prima_fascia_titolo {
		width: 50%;
	}

	.prima_fascia_titolo {
		font-weight: bold;
		width: 100%;
		margin: 0 auto;
		font-size: 25px;
	}

	.prima_fascia_cont_pulsanti {
		display: flex;
		justify-content: center;
	}

	/* pulsanti scelta */
	.pulsante {
		border-radius: 4vw;
		padding: 21px;
		line-height: 20px;
		background: white;
		color: #000000;
		font-weight: 400;
		display: flex;
		margin: 3%;
		width: 31%;
		padding-inline: 22px;
		font-size: 20px;
		justify-content: space-between;
		cursor: pointer;
		text-align: left;
		border: 1px solid;
		margin-inline: 1%;
	}

	.pulsante:hover {
		background: #E4464E;
		color: white;
	}

	/* varianti per label lunghe */
	.local {
		line-height: 16px;
		max-width: 112%;
	}

	/* pallini interni ai pulsanti */
	.pallino_bianco {
		min-width: 20px;
		min-height: 20px;
		border: 1px solid;
		border-radius: 20px;
	}

	.pallino_bianco2 {
		width: 20px;
		height: 20px;
		border: 1px solid;
		border-radius: 20px;
	}

	.pallino_bianco_dentro,
	.pallino_bianco_dentro2 {
		width: 12px;
		height: 12px;
		border-radius: 20px;
		position: relative;
		top: 4px;
		left: 4px;
	}

	.pulsante:hover .pallino_bianco_dentro {
		background: orange;
	}

	.pulsante:hover .pallino_bianco {
		background: white;
	}

	.pulsante:hover .pallino_bianco_dentro2 {
		background: orange;
	}

	.pulsante:hover .pallino_bianco2 {
		background: white;
	}

	/* ===== STEP CAP (contenitore ajax cap.php + bottone continuar) ===== */
	.cont_cont {
		margin-top: 20px;
		display: flex;
	}

	.continuar {
		width: 200px;
		height: 45px;
		line-height: 45px;
		border-radius: 23px;
		border: 1px solid;
		border-color: #E4464E;
		margin-left: 20px;
		margin-top: 12px;
		background: #E4464E;
		color: white;
		cursor: pointer;
	}

	.continuar:hover {
		background: white;
		color: #e4464e;
	}

	.introduce {
		color: red;
		font-weight: bold;
		display: none;
	}

	/* ===== BLOCCO FORM FINALE (contenuto ajax form.php) ===== */
	.form {
		width: 100%;
		margin-top: 0%;
		position: relative;
		top: -2vw;
		margin-top: 6%;
	}

	.cont_form {
		display: block;
		top: 70px;
		margin: 0 auto;
		max-width: 550px;
	}

	/* (se nel form finale ci sono input number) */
	input[type=number] {
		-moz-appearance: textfield;
	}

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* container form */
	.prima_fascia_cont_input {
		text-align: center;
		width: max-content;
		margin: 0 auto;
	}

	/* input stile “pulsante” */
	.pulsante_input {
		border-radius: 20px;
		padding: 10px;
		line-height: 20px;
		background: white;
		color: grey;
		font-weight: 300;
		display: flex;
		margin: 3%;
		width: 500px;
		padding-inline: 15px;
		font-size: 17px;
		justify-content: space-between;
		cursor: pointer;
		text-align: left;
	}

	/* messaggi errore */
	.introduce {
		color: red;
		font-weight: bold;
		display: none;
	}

	.introduce2 {
		margin-top: -10px;
	}

	/* checkbox privacy wrapper */
	#aaa {
		position: relative;
		left: 15px;
	}

	/* tabella privacy */
	.formetto {
		font-size: 13px;
		margin-top: 0.5vw;
		margin-bottom: 1vw;
		display: flex;
	}

	/* checkbox */
	#c1 {
		margin-top: 10px;
		cursor: pointer;
	}

	/* bottone submit */
	.continuar2 {
		width: 500px;
		height: 53px;
		line-height: 50px;
		border-radius: 23px;
		border: 1px solid;
		border-color: #E4464C;
		margin-left: 15px;
		margin-top: 10px;
		background: #E4464E;
		color: white;
		cursor: pointer;
		font-size: 23px;
		margin-bottom: 20px;
	}

	.continuar2:hover {
		background: #E4464E;
		color: white;
	}

	/* input ID (solo colore testo) */
	#telefono,
	#email,
	#nome,
	#cognome {
		color: black;
	}

	/* number: rimuove spinner */
	input[type=number] {
		-moz-appearance: textfield;
	}

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	.centrale {
		max-width: 1000px;
		margin: 0 auto;
		/* margin-top: 2%; */
	}

	.sfondo_grigio {
		background-color: #f5f5f5;
	}

	.triangolo-down {
		width: 0;
		height: 0;
		border-left: 18px solid transparent;
		border-right: 19px solid transparent;
		border-top: 18px solid #E4464E;
		/* colore triangolo */
		margin: 0 48.2% 0% 48.1%;
	}

	.video-wrap {
		position: relative;
		width: 100%;
		/* border-radius: 12px; */
		overflow: hidden;
	}

	.video-wrap video {
		width: 95%;
		height: auto;
		display: block;
	}

	.video-overlay {
		position: absolute;
		inset: 0;
		border: 0;
		padding: 0;
		cursor: pointer;
		background: rgba(255, 255, 255, 0.15);
		/* leggero velo */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.play-icon {
		width: 72px;
		height: 72px;
		fill: #000;
		/* freccia nera */
		background: rgba(255, 255, 255, 0.75);
		border-radius: 999px;
		padding: 14px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	}

	.video-wrap.is-playing .video-overlay {
		display: none;
	}

	.contenuti {
		width: 1000px;
		margin: 0 auto;
		display: flex;
	}

	.sx {
		width: 90%;
	}

	.check-list {
		list-style: none;
		padding: 0;
		margin: 0;
		margin-top: 5%;
	}

	.check-list li {
		display: inline-block;
		/* align-items: flex-start; */
		gap: 12px;
		margin-bottom: 14px;
		font-size: 15px;
		line-height: 0;
		VERTICAL-ALIGN: super;
	}

	.check-icon {
		width: 40px;
		height: 40px;
		flex-shrink: 0;
		vertical-align: middle;
		position: relative;
		top: -0.2vw;
	}



	.tp-slider {
		position: relative;
		max-width: 83%;
		margin: 0 auto;
		background: white;
		padding: 0 44px;
		/* spazio per le frecce */
		/* border-radius: 10px; */
		box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
	}

	.tp-viewport {
		overflow: hidden;
	}

	.tp-track {
		display: flex;
		transition: transform .35s ease;
		will-change: transform;
	}

	.tp-slide {
		min-width: 100%;
		/* padding: 10px 0; */
	}

	.tp-slide img {
		width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
		padding: 0;
		max-width: max-content;
		position: relative;
		left: -1%;
		top: 30%;
	}

	/* frecce */
	.tp-arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 34px;
		height: 34px;
		border-radius: 50%;
		border: 1px solid #cfcfcf;
		background: #fff;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		line-height: 1;
		color: #333;
	}

	.tp-prev {
		left: 8px;
	}

	.tp-next {
		right: 8px;
	}

	.tp-arrow:disabled {
		opacity: .35;
		cursor: default;
	}

	.dx {
		width: 45%;
		margin-left: 5%;
	}





	.tp-card {
		width: 420px;
		/* cambia se vuoi */
		background: #fff;
		border-radius: 0;
		/* nello screenshot sembra squadrata */
		padding: 20px 8px 16px;
		/* box-shadow: 0 10px 22px rgba(0, 0, 0, .25); */
		font-family: Arial, Helvetica, sans-serif;
		color: #111;
	}

	.tp-top {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 14px;
	}

	.tp-badge {
		height: 18px;
		/* regola a piacere */
		width: auto;
		display: block;
		padding: 0 !important;
		margin-left: 0 !important;
	}

	.tp-title {
		font-weight: 700;
		font-size: 19px;
		margin: 0 0 10px 0;
		width: 80%;
	}

	.tp-text {
		font-size: 16px;
		line-height: 1.35;
		margin: 0 0 16px 0;
		width: 85%;
	}

	.tp-author {
		font-weight: 700;
		font-size: 15px;
		margin-top: 2px;
	}

	.tp-bottom {
		display: flex;
		justify-content: flex-end;
		margin-top: 8px;
	}

	.tp-logo {
		height: 22px;
		/* come nello screenshot */
		width: 22% !important;
		display: block;
		margin-left: 57% !important;
		PADDING: 0;
		bottom: 0;
		margin-top: 10%;
	}

	.pulsantev {
		border-radius: 4vw;
		padding: 21px;
		/* line-height: 20px; */
		background: #3ca07a;
		color: white;
		font-weight: 400;
		display: block;
		margin: 3%;
		width: 75%;
		padding-inline: 22px;
		font-size: 25px;
		justify-content: space-between;
		cursor: pointer;
		text-align: center;

		margin: 0 auto;
		text-align: center;
	}

	.ban {
		background-color: white;
		position: relative;
		max-width: 100%;
		margin: 0 auto;
		background: white;
		padding: 10px 4px;
		/* border-radius: 10px; */
		box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
		margin-top: 10%;
		border-top: 6px solid #e4464d;
	}

	.camera {
		max-width: max-content;
		width: 100%;
		margin-top: -9%;
	}

	.tb {
		text-align: center;
		width: 80%;
		margin: 2% auto;
	}

	.foo1 {
		font-size: 10px;
		background-color: white;
		padding: 1%;
		padding-inline: 0;
		text-align: center;
		width: 100%;
	}

	.foo2 {
		background-color: #000;
		padding: 1%;
		padding-inline: 0;
		text-align: center;
		width: 100%;
		color: white;
	}

	/* icona base */
	.pulsante .ico {
		width: 58px;
		/* regola a piacere */
		margin-right: 10px;
		vertical-align: middle;
		transition: filter .15s ease;
	}

	/* quando passi col mouse sul pulsante */
	.pulsante:hover .ico {
		filter: brightness(0) invert(1);
	}

	/* opzionale: se al hover il bottone diventa rosso e testo bianco */
	.pulsante:hover {
		background: #e4464e;
		color: #fff;
	}









	/* responsive */
	@media screen and (max-width:1000px) {

		.interno {
			width: 95%;
		}

		.header {
			width: 100%;
		}


		.contenuti {
			display: block;
			width: 100%;
		}

		.sx {
			width: 100%;
		}

		.video-wrap video {
			width: 100%;
			height: auto;
			display: block;
		}

		.check-icon {
			width: 35px;
			height: 35px;
			flex-shrink: 0;
			vertical-align: middle;
			position: relative;
			top: -0.2vw;
			float: left;
			margin-right: 4%;
		}

		.dx {
			width: 100%;
			margin: 0 auto;
		}

		.tp-slide img {
			width: 50%;
			height: auto;
			display: block;
			margin: 0 auto;
			padding: 0;
			max-width: max-content;
			position: relative;
			left: -1%;
			top: 30%;
		}

		.tp-title {
			font-weight: 700;
			font-size: 15px;
			margin: 0 0 10px 0;
			width: 64%;
		}

		.tp-text {
			font-size: 14px;
			line-height: 1.35;
			margin: 0 0 16px 0;
			width: 85%;
		}

		h1 {
			font-size: 30px;
			font-weight: 800;
			/* font-family: 'Open sans'; */
			text-align: center;
			margin-top: 2%;
		}



		.tp-card {
			width: 310px;
			background: #fff;
		}

		.tp-logo {
			width: 25% !important;
			margin-left: 54% !important;
			MARGIN-TOP: 5% !IMPORTANT;
		}
	}

	/* ===== MOBILE FIX FORM/WIZARD ===== */
	@media screen and (max-width: 767px) {

		body {
			font-size: 16px;
		}

		.cont_esterno_dentro,
		.cont_esterno_dentro_est,
		.cont_form {
			width: 96% !important;
			max-width: 100% !important;
			margin: 0 auto;
		}

		.cont_esterno_dentro_est {
			padding: 10px 12px;
			margin-top: 10px;
			border-radius: 16px;
			width: 95%;
			padding: 0;
		}

		.headers {
			width: 95% !important;
			height: auto;
			line-height: normal;
			padding: 10px 12px;
			border-radius: 14px;
			margin-top: 10px;
			padding: 0;
		}

		.header1 {
			font-size: 20px;
			text-align: center;
			display: block;
			width: 70%;
			margin: -1% auto;
		}

		/* progress bar */
		.cont_barra {
			width: 95% !important;
		}

		/* titolo step */
		.prima_fascia_titolo {
			width: 100% !important;
			max-width: 100% !important;
			font-size: 24px;
			padding: 0 10px 10PX 0PX;
			box-sizing: border-box;
		}

		/* bottoni step */
		.prima_fascia_cont_pulsanti {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			padding: 0 8px;
			box-sizing: border-box;
		}

		/* 1 colonna (più leggibile) */
		.pulsante {
			width: 100% !important;
			margin: 0 !important;
			box-sizing: border-box;
			justify-content: flex-start;
			gap: 10px;
			padding: 12px 14px;
			border-radius: 16px;
			font-size: 15px;
		}

		/* se vuoi 2 colonne invece di 1, usa questo al posto di width:100%:
     .pulsante{ width: calc(50% - 5px) !important; }
  */

		.pulsante_input {
			width: 100% !important;
			margin: 10px 0 0 0 !important;
			box-sizing: border-box;
		}

		/* cap + bottone continua */
		.cont_cont {
			flex-direction: column;
			gap: 10px;
			width: 95%;
		}

		.continuar {
			width: 100% !important;
			margin-left: 0 !important;
			margin-top: 0 !important;
		}

		.continuar2 {
			width: 100% !important;
			margin-left: 0 !important;
			font-size: 18px;
		}

		/* form interno (se hai input grandi) */
		.mezzo {
			height: auto;
			font-size: 16px;
			padding: 10px;
		}

		.bottone {
			height: auto;
			font-size: 18px;
			padding: 12px;
			border-radius: 14px;
		}

		/* evita overflow */
		img,
		video {
			max-width: 100%;
			height: auto;
		}

		.check-list {
			list-style: none;
			padding: 0;
			margin: 0;
			margin-top: 5%;
			width: 66%;
			margin: 5% auto;
		}

		.foo1,
		.foo2 {
			padding: 2%;
			box-sizing: border-box;
		}

		.check-list li {
			display: inline-block;
			/* align-items: flex-start; */
			gap: 12px;
			margin-bottom: 14px;
			font-size: 16px;
			line-height: 120%;
			VERTICAL-ALIGN: super;
		}

		.trust {
			float: right;
			vertical-align: inherit;
			margin-top: 1%;
			width: 20%;
		}


		.logo {
			width: 25%;
			margin: 0.5%;
			max-width: min-content;
			margin: 1% auto;
		}

		.trust {
			display: none;
		}

		.mob {
			float: none;
			display: block;
			width: fit-content;

			margin: 0 auto;

		}

		.logo {
			width: 15%;
			margin: 0.5%;
			max-width: min-content;
			margin: 1% auto;
			display: block;
		}
	}