/*
 * ================================================================
 * IGM 2026 – new igmtouch.it design
 * File: wp-content/themes/Divi-Child/igm-2026.css
 * Edit in WordPress: Appearance -> "Stile IGM 2026"
 * ================================================================
 *
 * HOW TO USE
 * 1. Change the look mainly in section [00] SETTINGS.
 *    Every variable has a comment saying what it controls.
 *    One change applies to the whole site.
 * 2. Looking for something? Ctrl+F the section number, e.g. "[03]".
 * 3. Every element of the new design has a class starting with "igm-".
 *    In the browser: right click -> Inspect -> copy the class -> Ctrl+F here.
 * 4. Rules: only "igm-" classes, never change legacy styles,
 *    !important only with a comment explaining why.
 *    All comments in English.
 *
 * TABLE OF CONTENTS
 * [00] SETTINGS   – colours, fonts, sizes (change the look here)
 * [01] BASE       – container, typography
 * [02] BUTTONS
 * [03] HEADER MENU – desktop + mobile
 * [04] FOOTER
 * [05] DEMO POPUP – "Prenota una demo" (Popups for Divi + Divi contact form)
 * [10] HOMEPAGE   – sections of the new homepage ([10.1] hero, ...)
 * ================================================================
 */


/* ================================================================
 * [00] SETTINGS
 * ================================================================ */
:root {
	/* --- Colours --- */
	--igm-viola: #7F3E98;          /* main purple: buttons, links, active items */
	--igm-viola-hover: #703189;    /* purple on hover */
	--igm-viola-scuro: #4A2259;    /* dark purple: dark backgrounds, cards */
	--igm-rosa: #B0359E;           /* pink: eyebrow labels above headings */
	--igm-inchiostro: #2B2433;     /* main text and heading colour */
	--igm-testo: #5B5566;          /* secondary text, descriptions */
	--igm-lavanda: #F7F4F9;        /* light section background, hover background */
	--igm-lavanda-2: #EADDF2;      /* second lavender shade (background gradients) */
	--igm-icona-sfondo: #EFE4F5;   /* icon tile background */
	--igm-bordo: #EEE7F2;          /* thin lines and borders */
	--igm-prugna: #241A2B;         /* footer background */
	--igm-bianco: #FFFFFF;
	--igm-focus: #B1A1CC;          /* keyboard focus outline */

	/* --- Fonts --- */
	--igm-font: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
	--igm-h1-size: clamp(40px, 5.2vw, 72px);   /* main page title (hero) */
	--igm-h2-size: clamp(32px, 3.8vw, 48px);   /* section headings (min, fluid, max) */
	--igm-lead-size: 19px;                      /* lead text under headings */
	--igm-eyebrow-size: 13px;                   /* small eyebrow label */

	/* --- Layout --- */
	--igm-contenuto: 1200px;       /* maximum content width */
	--igm-margine: 16px;           /* side margin on phones */
	--igm-sezione: 112px;          /* section top/bottom spacing on desktop */
	--igm-sezione-tel: 80px;       /* section top/bottom spacing on phones */

	/* --- Buttons --- */
	--igm-btn-h: 52px;             /* regular button height */
	--igm-btn-h-sm: 44px;          /* small button height (menu) */
	--igm-btn-h-lg: 56px;          /* large button height (hero) */
	--igm-btn-font: 15px;
	--igm-btn-font-sm: 14px;
	--igm-btn-font-lg: 16px;
	--igm-btn-raggio: 6px;         /* button corner radius */
	--igm-btn-maiuscole: uppercase; /* uppercase; "none" = normal case */

	/* --- Cards and panels --- */
	--igm-raggio-card: 20px;       /* large card corner radius */
	--igm-raggio-panel: 14px;      /* menu panel and small card radius */
	--igm-ombra: 0 20px 44px rgba(74, 34, 89, 0.14);   /* panel shadow */

	/* --- Menu --- */
	--igm-nav-h: 80px;             /* menu bar height on desktop */
	--igm-nav-h-tel: 64px;         /* menu bar height on phones */
	--igm-logo-h: 52px;            /* logo height on desktop */
	--igm-logo-h-tel: 40px;        /* logo height on phones */
	--igm-nav-gap: 22px;           /* gap between menu items */
	--igm-nav-link-size: 15px;     /* menu font size */

	/* --- Footer --- */
	--igm-ft-bg: var(--igm-prugna);  /* footer background */
	--igm-ft-text: #D9CCE3;        /* footer links */
	--igm-ft-muted: #B9AAC6;       /* bottom line (copyright, company data) */
	--igm-ft-logo-h: 52px;         /* footer logo height */

	/* --- Demo popup --- */
	--igm-demo-max: 1000px;        /* popup width on desktop */
	--igm-demo-side: 420px;        /* width of the right panel ("Cosa ricevi") */
	--igm-demo-raggio: 24px;       /* popup corner radius */
	--igm-demo-pad: 56px;          /* inner padding of the form side */
	--igm-input-h: 52px;           /* form field height */
	--igm-input-bordo: #DCD0E5;    /* form field border */
	--igm-overlay: rgba(36, 26, 43, 0.55); /* dark layer behind the popup */

	/* --- Homepage --- */
	--igm-badge-bg: #F3E8F7;       /* small pill above the hero title */
	--igm-hero-mock-h: 483;        /* visible height of the hero illustration (of 650) */
	--igm-hero-ovale: 270px;       /* how much of the white oval shows at the hero bottom */
	--igm-trust-speed: 22s;        /* phones: time of one full loop of the moving reasons strip */
	--igm-step-time: 4.5s;         /* Come si inizia: how long each step picture plays (also used by igm-2026.js) */
}


/* ================================================================
 * [01] BASE
 * ================================================================ */
.igm-scope {
	font-family: var(--igm-font);
	color: var(--igm-inchiostro);
	-webkit-font-smoothing: antialiased;
}
.igm-scope *,
.igm-scope *::before,
.igm-scope *::after {
	box-sizing: border-box;
}
.igm-container {
	width: 100%;
	max-width: var(--igm-contenuto);
	margin: 0 auto;
	padding: 0 var(--igm-margine);
}
.igm-eyebrow {
	margin: 0 0 14px;
	color: var(--igm-rosa);
	font-size: var(--igm-eyebrow-size);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.igm-h2 {
	margin: 0 0 20px;
	padding: 0;
	font-family: var(--igm-font);
	font-size: var(--igm-h2-size);
	line-height: 1.08;
	letter-spacing: -0.025em;
	font-weight: 800;
	color: var(--igm-inchiostro);
}
.igm-lead {
	margin: 0 0 28px;
	font-size: var(--igm-lead-size);
	line-height: 1.6;
	color: var(--igm-testo);
}
.igm-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}
.igm-row > * {
	min-width: 0;
}
.igm-scope a:focus-visible,
.igm-scope button:focus-visible {
	outline: 3px solid var(--igm-focus);
	outline-offset: 2px;
}


/* ================================================================
 * [02] BUTTONS
 * Usage: class="igm-btn igm-btn--primary" (solid purple)
 *        class="igm-btn igm-btn--outline" (white with border)
 *        add "igm-btn--sm" for the small size, "igm-btn--lg" for the large one
 * ================================================================ */
.igm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--igm-btn-h);
	padding: 0 28px;
	border-radius: var(--igm-btn-raggio);
	border: 1.5px solid var(--igm-viola);
	font-family: var(--igm-font);
	font-size: var(--igm-btn-font);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: var(--igm-btn-maiuscole);
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}
.igm-btn--primary,
.igm-scope .igm-btn--primary {
	background: var(--igm-viola);
	color: var(--igm-bianco);
}
.igm-btn--primary:hover,
.igm-scope .igm-btn--primary:hover {
	background: var(--igm-viola-hover);
	border-color: var(--igm-viola-hover);
	color: var(--igm-bianco);
}
.igm-btn--outline,
.igm-scope .igm-btn--outline {
	background: var(--igm-bianco);
	color: var(--igm-viola);
}
.igm-btn--outline:hover,
.igm-scope .igm-btn--outline:hover {
	background: var(--igm-lavanda);
	color: var(--igm-viola);
}
.igm-btn--sm {
	height: var(--igm-btn-h-sm);
	padding: 0 18px;
	font-size: var(--igm-btn-font-sm);
}
.igm-btn--lg {
	height: var(--igm-btn-h-lg);
	padding: 0 32px;
	font-size: var(--igm-btn-font-lg);
}
@media (prefers-reduced-motion: reduce) {
	.igm-btn {
		transition: none;
	}
}


/* ================================================================
 * [03] HEADER MENU
 * HTML: Theme Builder -> "IGM 2026 – Menu" -> Code module.
 * Dropdown script: igm-2026.js
 *
 * [03.1] bar       [03.2] items        [03.3] right side
 * [03.4] small panels (Azienda, Accedi)  [03.5] Prodotti mega panel
 * [03.6] mobile
 * ================================================================ */

/* [03.1] bar */
.igm-nav {
	position: relative;
	z-index: 1000;
	background: var(--igm-bianco);
	border-bottom: 1px solid var(--igm-bordo);
}
.igm-nav a {
	color: var(--igm-inchiostro);
	text-decoration: none;
}
.igm-nav__bar {
	max-width: var(--igm-contenuto);
	height: var(--igm-nav-h);
	margin: 0 auto;
	padding: 0 var(--igm-margine);
	display: flex;
	align-items: center;
	gap: 36px;
}
.igm-nav__logo {
	display: flex;
	flex: none;
}
.igm-nav__logo img {
	height: var(--igm-logo-h);
	width: auto;
	display: block;
}

/* [03.2] items */
.igm-nav__menu {
	display: flex;
	align-items: center;
	gap: var(--igm-nav-gap);
	flex: 1;
}
.igm-nav__item {
	position: relative;
}
.igm-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 4px;
	background: none;
	border: 0;
	font-family: var(--igm-font);
	font-size: var(--igm-nav-link-size);
	font-weight: 600;
	line-height: 1.2;
	color: var(--igm-inchiostro);
	cursor: pointer;
}
.igm-nav .igm-nav__link:hover,
.igm-nav__link[aria-expanded="true"] {
	color: var(--igm-viola);
}
.igm-nav__chev {
	transition: transform .15s;
}
[aria-expanded="true"] > .igm-nav__chev {
	transform: rotate(180deg);
}

/* [03.3] right side: cart, Accedi, buttons */
.igm-nav__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}
.igm-nav__icon {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.igm-nav .igm-nav__icon:hover {
	background: var(--igm-lavanda);
	color: var(--igm-viola);
}

/* Panel texts (title + description) */
.igm-nav__t {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--igm-inchiostro);
}
.igm-nav__d {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: var(--igm-testo);
}

/* [03.4] small panels: Azienda, Accedi */
.igm-nav__dd {
	position: absolute;
	top: calc(100% + 18px);
	left: -16px;
	width: 340px;
	padding: 8px;
	background: var(--igm-bianco);
	border: 1px solid var(--igm-bordo);
	border-radius: var(--igm-raggio-panel);
	box-shadow: var(--igm-ombra);
}
.igm-nav__dd--right {
	left: auto;
	right: 0;
	width: 280px;
}
.igm-nav__dk {
	display: block;
	padding: 12px 14px;
	border-radius: 10px;
}
.igm-nav .igm-nav__dk:hover {
	background: var(--igm-lavanda);
}
.igm-nav__dk:hover .igm-nav__t {
	color: var(--igm-viola);
}

/* [03.5] Prodotti mega panel */
.igm-nav__item:first-child {
	position: static;
}
.igm-nav__mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--igm-bianco);
	border-top: 1px solid var(--igm-bordo);
	box-shadow: 0 24px 40px rgba(43, 36, 51, 0.10);
}
.igm-nav__mega-in {
	max-width: var(--igm-contenuto);
	margin: 0 auto;
	padding: 24px var(--igm-margine) 28px;
	display: flex;
	gap: 32px;
}
.igm-nav__mega-grid {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-content: start;
}
.igm-nav__big {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 16px;
	border-radius: var(--igm-raggio-panel);
}
.igm-nav .igm-nav__big:hover {
	background: var(--igm-lavanda);
}
.igm-nav__big:hover .igm-nav__t {
	color: var(--igm-viola);
}
.igm-nav__big .igm-nav__t {
	font-size: 18px;
}
.igm-nav__big .igm-nav__d {
	font-size: 14px;
}
.igm-nav__ico {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: var(--igm-raggio-panel);
	background: var(--igm-icona-sfondo);
	color: var(--igm-viola);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.igm-nav__promo {
	flex: 0 0 300px;
	display: block;
	overflow: hidden;
	background: var(--igm-bianco);
	border: 1px solid var(--igm-bordo);
	border-radius: var(--igm-raggio-panel);
}
.igm-nav__promo-img {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: cover;
}
.igm-nav__promo-txt {
	display: block;
	padding: 14px 16px;
}
.igm-nav__promo:hover .igm-nav__t {
	color: var(--igm-viola);
}

/* [03.6] mobile */
.igm-nav__burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--igm-inchiostro);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.igm-nav__burger-close {
	display: none;
}
.igm-nav__burger[aria-expanded="true"] .igm-nav__burger-open {
	display: none;
}
.igm-nav__burger[aria-expanded="true"] .igm-nav__burger-close {
	display: block;
}
.igm-nav__mob {
	max-height: calc(100vh - var(--igm-nav-h-tel));
	overflow-y: auto;
	padding: 4px var(--igm-margine) 32px;
	background: var(--igm-bianco);
	border-top: 1px solid var(--igm-bordo);
}
.igm-nav__row {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0;
	border: 0;
	border-bottom: 1px solid var(--igm-bordo);
	background: none;
	font-family: var(--igm-font);
	font-size: 18px;
	font-weight: 700;
	color: var(--igm-inchiostro);
	text-align: left;
	cursor: pointer;
}
.igm-nav__row .igm-nav__chev {
	color: var(--igm-viola);
}
.igm-nav__sub {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--igm-bordo);
}
.igm-nav__sub a {
	display: block;
	padding: 10px 0 10px 12px;
	font-size: 16px;
	font-weight: 600;
}
.igm-nav__mob-cta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 28px;
}
.igm-nav__mob-cta .igm-btn {
	width: 100%;
}
.igm-nav__mob-links {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-top: 22px;
	font-size: 15px;
	font-weight: 600;
}
@media (max-width: 1100px) {
	.igm-nav__desk {
		display: none;
	}
}
@media (max-width: 980px) {
	.igm-nav__bar {
		height: var(--igm-nav-h-tel);
		gap: 8px;
	}
	.igm-nav__logo img {
		height: var(--igm-logo-h-tel);
	}
	.igm-nav__menu,
	.igm-nav__accedi,
	.igm-nav__desk {
		display: none;
	}
	.igm-nav__actions {
		gap: 4px;
	}
	.igm-nav__trial {
		height: 38px;
		margin-right: 4px;
		padding: 0 14px;
		font-size: 13px;
	}
	.igm-nav__burger {
		display: inline-flex;
	}
}
@media (min-width: 981px) {
	.igm-nav__mob {
		display: none;
	}
}


/* ================================================================
 * [04] FOOTER
 * HTML: Theme Builder -> "IGM 2026 – Footer" -> Code module.
 * Year in the copyright line is set by igm-2026.js ([data-igm-year]).
 *
 * [04.1] layout    [04.2] brand + social    [04.3] link columns
 * [04.4] bottom line    [04.5] mobile
 * ================================================================ */

/* [04.1] layout */
.igm-ft {
	background: var(--igm-ft-bg);
	color: var(--igm-bianco);
	padding: 72px var(--igm-margine) 32px;
}
.igm-ft__in {
	max-width: var(--igm-contenuto);
	margin: 0 auto;
}
.igm-ft__top {
	display: flex;
	justify-content: space-between;
	gap: 64px;
}
.igm-ft a {
	color: var(--igm-ft-text);
	text-decoration: none;
}
.igm-ft a:hover {
	color: var(--igm-bianco);
	text-decoration: underline;
}

/* [04.2] brand + social */
.igm-ft__brand {
	flex: 0 0 300px;
}
.igm-ft__logo {
	display: inline-block;
}
.igm-ft__logo img {
	height: var(--igm-ft-logo-h);
	width: auto;
	display: block;
}
.igm-ft__tag {
	margin: 20px 0 24px;
	padding: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--igm-ft-text);
}
.igm-ft__soc {
	display: flex;
	gap: 10px;
}
.igm-ft .igm-ft__soc a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--igm-bianco);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.igm-ft .igm-ft__soc a:hover {
	background: var(--igm-viola);
	text-decoration: none;
}

/* [04.3] link columns */
.igm-ft__cols {
	flex: 1 1 0;
	max-width: 760px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}
.igm-ft__h {
	margin: 0 0 18px;
	padding: 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--igm-bianco);
}
.igm-ft__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 15px;
	line-height: 1.4;
}
.igm-ft__col li {
	padding: 0;
}

/* [04.4] bottom line */
.igm-ft__bottom {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 13px;
	color: var(--igm-ft-muted);
}
.igm-ft__bottom p {
	margin: 0;
	padding: 0;
}
.igm-ft__legal {
	display: flex;
	gap: 20px;
}
.igm-ft .igm-ft__legal a {
	color: var(--igm-ft-muted);
}

/* [04.5] mobile */
@media (max-width: 900px) {
	.igm-ft__top {
		flex-direction: column;
		gap: 40px;
	}
	.igm-ft__brand {
		flex: none;
	}
	.igm-ft__cols {
		grid-template-columns: 1fr 1fr;
		max-width: none;
	}
	.igm-ft__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ================================================================
 * [05] DEMO POPUP
 * Divi: a section with module_id "demo" + class "popup igm-scope igm-demo"
 * (Popups for Divi turns it into a popup). Inside one 4/4 column:
 * Code "head" -> Contact Form "igm-demo__form" -> Code "legal" -> Code "side".
 * The form stays a native Divi contact form (email to info@, reCAPTCHA).
 * [05.1] box + grid   [05.2] text   [05.3] form   [05.4] right panel
 * [05.5] close button + overlay   [05.6] mobile
 * ================================================================ */

/* [05.1] box + grid */
.et_pb_section.igm-demo {
	max-width: var(--igm-demo-max);
	padding: 0;
	background: var(--igm-bianco);
	border-radius: var(--igm-demo-raggio);
	overflow: hidden;
	box-shadow: 0 40px 80px rgba(28, 23, 32, 0.35);
}
.igm-demo .et_pb_row {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
.igm-demo .et_pb_row > .et_pb_column {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--igm-demo-side);
	grid-template-rows: auto auto 1fr; /* the right panel is taller: the extra space goes under the form */
	width: 100%;
	margin: 0;
	float: none;
}
.igm-demo .et_pb_row::after,
.igm-demo .et_pb_column::after {
	display: none;
}
.igm-demo .et_pb_column > .et_pb_module {
	grid-column: 1;
	margin: 0;
	padding-left: var(--igm-demo-pad);
	padding-right: var(--igm-demo-pad);
}
.igm-demo .et_pb_column > .igm-demo__side-mod {
	grid-column: 2;
	grid-row: 1 / span 3;
	padding: 0;
}

/* [05.2] text */
.igm-demo .igm-demo__head-mod {
	padding-top: var(--igm-demo-pad);
}
.igm-demo__head .igm-eyebrow {
	margin: 0 0 12px;
	padding: 0;
}
.igm-demo__title {
	margin: 0 0 14px;
	padding: 0;
	font-family: var(--igm-font);
	font-size: 36px;
	line-height: 1.1;
	letter-spacing: -0.025em;
	font-weight: 800;
	color: var(--igm-inchiostro);
}
.igm-demo__lead {
	margin: 0 0 28px;
	padding: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--igm-testo);
}
.igm-demo__mob {
	display: none;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--igm-inchiostro);
}
.igm-demo__mob li {
	display: flex;
	gap: 10px;
	padding: 0;
}
.igm-demo__mob svg {
	flex: none;
}
.igm-demo .igm-demo__legal-mod {
	padding-bottom: 48px;
}
.igm-demo__legal {
	margin: 14px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #8A8195;
}
.igm-demo__legal a {
	color: var(--igm-viola);
	text-decoration: underline;
}

/* [05.3] form (native Divi contact form, restyled) */
.igm-demo .igm-demo__form .et_pb_contact_main_title {
	display: none;
}
.igm-demo .igm-demo__form .et_pb_contact_form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 14px;
	margin: 0;
}
.igm-demo .igm-demo__form .et_pb_contact_form::before,
.igm-demo .igm-demo__form .et_pb_contact_form::after {
	display: none;
}
.igm-demo .igm-demo__form p.et_pb_contact_field {
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}
.igm-demo .igm-demo__form .et_pb_contact_form_label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--igm-font);
	font-size: 14px;
	font-weight: 700;
	color: var(--igm-inchiostro);
}
.igm-demo .igm-demo__form p.et_pb_contact_field input.input {
	width: 100%;
	height: var(--igm-input-h);
	padding: 0 14px;
	border: 1.5px solid var(--igm-input-bordo);
	border-radius: 8px;
	background: var(--igm-bianco);
	font-family: var(--igm-font);
	font-size: 16px;
	color: var(--igm-inchiostro);
}
.igm-demo .igm-demo__form p.et_pb_contact_field input.input:focus {
	outline: none;
	border-color: var(--igm-viola);
	box-shadow: 0 0 0 3px var(--igm-icona-sfondo);
}
.igm-demo .igm-demo__form p.et_pb_contact_field input.et_contact_error {
	border-color: #D2334C;
}
.igm-demo .igm-demo__form .et_contact_bottom_container {
	grid-column: 1 / -1;
	display: block;
	float: none;
	width: 100%;
	margin: 0;
	text-align: left;
}
.igm-demo .igm-demo__form .et_pb_contact_right {
	display: none;
}
.igm-demo .igm-demo__form .et_pb_contact_submit.et_pb_button,
.igm-demo .igm-demo__form .et_pb_contact_submit.et_pb_button:hover {
	display: block;
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--igm-btn-raggio);
	background: var(--igm-viola);
	color: var(--igm-bianco);
	font-family: var(--igm-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 56px;
	letter-spacing: 0.04em;
	text-transform: var(--igm-btn-maiuscole);
	cursor: pointer;
}
.igm-demo .igm-demo__form .et_pb_contact_submit.et_pb_button:hover {
	background: var(--igm-viola-hover);
}
.igm-demo .igm-demo__form .et_pb_contact_submit.et_pb_button::after {
	display: none;
}
.igm-demo .igm-demo__form .et-pb-contact-message:empty {
	display: none;
}
.igm-demo .igm-demo__form .et-pb-contact-message {
	margin: 0 0 16px;
	font-size: 15px;
	color: var(--igm-inchiostro);
}
.igm-demo .igm-demo__form .et-pb-contact-message ul {
	padding: 0 0 0 18px;
}

/* [05.4] right panel ("Cosa ricevi" + agenda picture) */
.igm-demo__side {
	height: 100%;
	padding: var(--igm-demo-pad) 0 0;
	background: linear-gradient(160deg, #F6EEF9, var(--igm-lavanda-2));
	overflow: hidden;
}
.igm-demo__side-h {
	margin: 0 40px 18px;
	padding: 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--igm-viola);
}
.igm-demo__cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 40px;
}
.igm-demo__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: var(--igm-raggio-panel);
	background: var(--igm-bianco);
	box-shadow: 0 6px 18px rgba(94, 42, 114, 0.08);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--igm-inchiostro);
}
.igm-demo__ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--igm-icona-sfondo);
}
.igm-demo__img {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 48px;
}

/* [05.5] close button (from Popups for Divi) + overlay */
.area-outer-wrap:has(.igm-demo) .da-close {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--igm-bianco);
	color: var(--igm-inchiostro);
	box-shadow: 0 4px 14px rgba(43, 36, 51, 0.15);
	font-size: 22px;
	line-height: 40px;
	text-align: center;
}
body:has(.da-popup-visible .igm-demo) .da-overlay {
	background-color: var(--igm-overlay);
}

/* [05.6] mobile: only the form, two short points above it */
@media (max-width: 820px) {
	.igm-demo .et_pb_row > .et_pb_column {
		display: block;
	}
	.igm-demo .et_pb_column > .igm-demo__side-mod {
		display: none;
	}
	.igm-demo .et_pb_column > .et_pb_module {
		padding-left: 20px;
		padding-right: 20px;
	}
	.igm-demo .igm-demo__head-mod {
		padding-top: 48px;
	}
	.igm-demo .igm-demo__legal-mod {
		padding-bottom: 28px;
	}
	.igm-demo__title {
		font-size: 30px;
	}
	.igm-demo__mob {
		display: flex;
	}
	.igm-demo .igm-demo__form .et_pb_contact_form {
		grid-template-columns: 1fr;
	}
}

/* ================================================================
 * [10] HOMEPAGE – sections of the new homepage, top to bottom
 * Each section: a Divi section with class "igm-scope igm-<name>",
 * one full-width row, one Code module with the HTML.
 * [10.0] app illustration (shared)   [10.1] hero   [10.2] trust bar
 * [10.3] text + picture sections, Calendario   [10.4] Promemoria WhatsApp
 * [10.5] Come si inizia (steps)   [10.6] Opinioni (video)
 * ================================================================ */

/* [10.0] app illustration: drawn at 1080 x 650 px and scaled to the box
 * width by igm-2026.js (data-igm-mock). Before the script runs it is
 * simply cut off, the box size never changes (no layout shift). */
.igm-mock {
	position: relative;
	width: 1080px;
	height: 650px;
	transform: scale(var(--igm-mock-s, 1));
	transform-origin: top left;
	font-family: var(--igm-font);
	color: var(--igm-inchiostro);
	text-align: left;
	line-height: normal;
}
.igm-mock * {
	box-sizing: border-box;
}

/* [10.0] booking animation inside the illustration (Calendario section):
 * cursor clicks, a ring appears, a new appointment pops in. 9 s loop. */
.igm-mock__cur {
	animation: igm-am-cur 9s infinite;
}
.igm-mock__ring {
	opacity: 0;
	animation: igm-am-ring 9s infinite;
}
.igm-mock__new {
	opacity: 0;
	animation: igm-am-new 9s infinite;
}
@keyframes igm-am-cur {
	0% { opacity: 0; transform: translate(150px, 110px); }
	10% { opacity: 1; transform: translate(150px, 110px); }
	32% { opacity: 1; transform: translate(0, 0); }
	35% { transform: translate(0, 0) scale(.85); }
	38% { transform: translate(0, 0) scale(1); }
	55% { opacity: 1; transform: translate(0, 0); }
	66%, 100% { opacity: 0; transform: translate(70px, 60px); }
}
@keyframes igm-am-ring {
	0%, 34% { opacity: 0; transform: scale(.3); }
	36% { opacity: .45; transform: scale(.6); }
	52%, 100% { opacity: 0; transform: scale(2.8); }
}
@keyframes igm-am-new {
	0%, 37% { opacity: 0; transform: scale(.85); }
	43% { opacity: 1; transform: scale(1.04); }
	47%, 88% { opacity: 1; transform: scale(1); }
	95%, 100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.igm-mock__new {
		animation: none;
		opacity: 1;
	}
	.igm-mock__cur,
	.igm-mock__ring {
		display: none;
	}
}

/* [10.1] hero */
.et_pb_section.igm-hero {
	position: relative;
	padding: 0;
	background: linear-gradient(180deg, var(--igm-bianco) 0%, #F6EEF9 100%);
	overflow: hidden;
}
.igm-hero::before {
	/* big white oval behind the bottom of the illustration */
	content: "";
	position: absolute;
	left: -25%;
	right: -25%;
	bottom: calc(var(--igm-hero-ovale) - 900px);
	height: 900px;
	border-radius: 50%;
	background: var(--igm-bianco);
}
.igm-hero .et_pb_row {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
.igm-hero__in {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: var(--igm-contenuto);
	margin: 0 auto;
	padding: 72px var(--igm-margine) 0;
	text-align: center;
}
.igm-hero__badge {
	display: inline-block;
	margin: 0 0 22px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--igm-badge-bg);
	color: var(--igm-viola-scuro);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.igm-hero__title {
	max-width: 900px;
	margin: 0 0 22px;
	padding: 0;
	font-family: var(--igm-font);
	font-size: var(--igm-h1-size);
	line-height: 1.02;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: var(--igm-inchiostro);
	text-wrap: balance;
}
.igm-hero__lead {
	max-width: 640px;
	margin: 0 0 32px;
	padding: 0;
	font-size: 20px;
	line-height: 1.55;
	color: var(--igm-testo);
}
.igm-hero__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 16px;
}
.igm-hero__note {
	margin: 0 0 56px;
	padding: 0;
	font-size: 14px;
	color: var(--igm-testo);
}
.igm-hero__mock {
	position: relative;
	width: 100%;
	max-width: 1080px;
	aspect-ratio: 1080 / var(--igm-hero-mock-h);
	min-height: 0; /* keep the ratio even though the drawing inside is taller */
	padding: 0;
	/* cut only the bottom: the soft shadow stays visible on the sides */
	clip-path: inset(-120px -120px 0 -120px);
}

@media (max-width: 767px) {
	.igm-hero__in {
		padding-top: 40px;
	}
	.igm-hero__badge {
		margin-bottom: 18px;
		font-size: 12px;
	}
	.igm-hero__title {
		margin-bottom: 16px;
		line-height: 1.05;
	}
	.igm-hero__lead {
		margin-bottom: 24px;
		font-size: 17px;
	}
	.igm-hero__cta {
		flex-direction: column;
		width: 100%;
		gap: 10px;
		margin-bottom: 12px;
	}
	.igm-hero__cta .igm-btn {
		width: 100%;
		height: 54px;
	}
	.igm-hero__note {
		margin-bottom: 36px;
		font-size: 13px;
	}
	.igm-hero {
		--igm-hero-mock-h: 650;
		--igm-hero-ovale: 130px;
	}
	.igm-hero::before {
		left: -40%;
		right: -40%;
		height: 500px;
		bottom: calc(var(--igm-hero-ovale) - 500px);
	}
	.igm-hero__mock {
		margin-bottom: 40px;
		clip-path: none;
	}
}

/* [10.2] trust bar (4 short reasons under the hero) */
.et_pb_section.igm-trust {
	padding: 36px var(--igm-margine);
	background: var(--igm-bianco);
	border-bottom: 1px solid #EAE3EF;
}
.igm-trust .et_pb_row {
	width: 100%;
	max-width: var(--igm-contenuto);
	margin: 0 auto;
	padding: 0;
}
.igm-trust__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px 48px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--igm-inchiostro);
}
.igm-trust__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0;
}
.igm-trust__item svg {
	flex: none;
}
/* the copy of the list is only used by the moving strip on phones */
.igm-trust__dup {
	display: none;
}
@media (max-width: 640px) {
	/* phones: the 4 reasons slide sideways in an endless loop
	 * (two identical lists one after the other, moved by half) */
	.et_pb_section.igm-trust {
		padding-left: 0;
		padding-right: 0;
		overflow: hidden;
	}
	.igm-trust .et_pb_row {
		-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
		mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	}
	.igm-trust__track {
		display: flex;
		width: max-content;
		animation: igm-trust-loop var(--igm-trust-speed) linear infinite;
	}
	.et_pb_section.igm-trust .igm-trust__track .igm-trust__list {
		flex-wrap: nowrap;
		gap: 40px;
		padding-right: 40px; /* same space after the last reason as between the others */
		white-space: nowrap;
	}
	.igm-trust__dup {
		display: flex;
	}
}
@keyframes igm-trust-loop {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
	/* no movement: one reason per line instead */
	.igm-trust__track {
		width: auto;
		animation: none;
		padding: 0 var(--igm-margine);
	}
	.igm-trust .et_pb_row {
		-webkit-mask-image: none;
		mask-image: none;
	}
	.et_pb_section.igm-trust .igm-trust__track .igm-trust__list {
		flex-direction: column;
		padding-right: 0;
		align-items: flex-start;
		gap: 14px;
		white-space: normal;
	}
	.igm-trust__dup {
		display: none;
	}
}

/* Divi gives every module a bottom margin; our Code modules sit alone in their row */
.et_pb_section.igm-scope .et_pb_module {
	margin-bottom: 0;
}
/* Divi adds padding and bullets to every list in the page content */
.et_pb_section.igm-scope ul {
	padding: 0;
	list-style: none;
}

/* [10.3] text + picture sections (Calendario, Promemoria, ...) – shared parts */
.et_pb_section.igm-sec {
	padding: var(--igm-sezione) var(--igm-margine);
	background: var(--igm-bianco);
}
.igm-sec .et_pb_row {
	width: 100%;
	max-width: var(--igm-contenuto);
	margin: 0 auto;
	padding: 0;
}
.igm-story {
	display: flex;
	align-items: center;
	gap: 72px;
	text-align: left;
}
.igm-story__txt {
	flex: 1 1 0;
	min-width: 0;
}
.igm-story__vis {
	flex: 1.15 1 0;
	min-width: 0;
}
.igm-story__lead {
	max-width: 480px;
}
.igm-checks {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	font-size: 17px;
	font-weight: 600;
	color: var(--igm-inchiostro);
}
.igm-checks li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
}
.igm-checks svg {
	flex: none;
}
.igm-link-arrow {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--igm-viola);
	text-decoration: none;
}
.igm-link-arrow:hover {
	color: var(--igm-viola-hover);
	text-decoration: underline;
}

/* [10.3] Calendario: the app calendar in a lavender panel, with the booking animation */
.igm-cal__panel {
	padding: 40px 0 0 40px;
	border-radius: 24px;
	background: var(--igm-lavanda);
	overflow: hidden;
}
.igm-cal__win {
	position: relative;
	height: 440px;
	overflow: hidden;
	border-radius: 16px 0 0 0;
	background: var(--igm-bianco);
	box-shadow: 0 12px 40px rgba(94, 42, 114, 0.12);
}
.igm-cal__pos {
	position: absolute;
	left: -86px;
	top: -44px;
	width: 1080px;
	height: 650px;
}

@media (max-width: 860px) {
	.igm-story {
		flex-direction: column;
		align-items: stretch;
		gap: 36px;
	}
	.igm-story__txt,
	.igm-story__vis {
		flex: none;
	}
	.igm-cal__panel {
		padding: 24px 0 0 24px;
	}
	.igm-cal__win {
		height: 300px;
	}
	.igm-cal__pos {
		/* smaller on phones, so the new appointment (2nd column) is visible */
		transform: scale(0.62);
		transform-origin: top left;
		left: -53px;
		top: -27px;
	}
}

/* [10.4] Promemoria WhatsApp: phone with a chat (animated) + text */
.et_pb_section.igm-wa-sec {
	background: var(--igm-lavanda);
	overflow: hidden;
}
.igm-wa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 160px;
	text-align: left;
}
.igm-wa__phone {
	flex: none;
	position: relative;
}
.igm-wa__phone::before {
	/* soft disc behind the phone */
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 460px;
	height: 460px;
	margin: -230px 0 0 -230px;
	border-radius: 50%;
	background: var(--igm-lavanda-2);
}
.igm-wa__txt {
	flex: 0 1 520px;
	min-width: 0;
}
.igm-h2--xl {
	font-size: clamp(34px, 4.2vw, 56px);
	line-height: 1.05;
}
.igm-wa__lead {
	max-width: 500px;
}
.igm-wa__checks {
	margin-bottom: 36px;
}
.igm-wa__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}
.igm-btn--outline.igm-wa__btn {
	background: transparent;
}
.igm-btn--outline.igm-wa__btn:hover {
	background: var(--igm-bianco);
}
.igm-wa__price {
	font-size: 14px;
	color: var(--igm-testo);
}

/* chat background: light beige with small barber doodles (our own drawing) */
.igm-wa__chat {
	background: #EFE7DE url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27120%27 height=%27120%27 viewBox=%270 0 120 120%27 fill=%27none%27 stroke=%27%23DACDBC%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cg transform=%27translate(12 10) rotate(-20 9 10)%27%3E%3Ccircle cx=%274%27 cy=%2715%27 r=%273.5%27/%3E%3Ccircle cx=%2714%27 cy=%2715%27 r=%273.5%27/%3E%3Cpath d=%27M6.5 12.5 16 0M11.5 12.5 2 0%27/%3E%3C/g%3E%3Cg transform=%27translate(66 16) rotate(15 13 6)%27%3E%3Crect width=%2726%27 height=%276%27 rx=%272%27/%3E%3Cpath d=%27M3 6v6M7 6v6M11 6v6M15 6v6M19 6v6M23 6v6%27/%3E%3C/g%3E%3Cpath d=%27M12 80c3 4 8 4 11 0c1-2 3-2 4 0c3 4 8 4 11 0c-1 5-8 7-12 3c-1-1-2-1-3 0c-4 4-11 2-11-3z%27/%3E%3Cg transform=%27translate(70 74) rotate(-30 15 4)%27%3E%3Crect width=%2720%27 height=%277%27 rx=%271.5%27/%3E%3Cpath d=%27M20 3.5h11%27/%3E%3C/g%3E%3Cpath d=%27M56 46l2 4 4 2-4 2-2 4-2-4-4-2 4-2z%27/%3E%3Ccircle cx=%27104%27 cy=%2752%27 r=%271.8%27/%3E%3Ccircle cx=%2748%27 cy=%27106%27 r=%271.8%27/%3E%3Ccircle cx=%27100%27 cy=%27108%27 r=%271.2%27/%3E%3C/svg%3E") repeat;
	background-size: 150px 150px;
}

/* chat animation: "typing" dots, then the message; 12 s loop */
.igm-wa__slot {
	position: relative;
}
.igm-wa__typing {
	position: absolute;
	top: 0;
	display: flex;
	gap: 4px;
	align-items: center;
	padding: 12px 14px;
	border-radius: 12px;
	opacity: 0;
}
.igm-wa__typing i {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #8696A0;
	animation: igm-wa-dot 1s infinite;
}
.igm-wa__typing i:nth-child(2) {
	animation-delay: .15s;
}
.igm-wa__typing i:nth-child(3) {
	animation-delay: .3s;
}
.igm-wa__t1 {
	left: 0;
	background: #FFFFFF;
	animation: igm-wa-t1 12s infinite;
}
.igm-wa__t2 {
	right: 0;
	background: #D9FDD3;
	animation: igm-wa-t2 12s infinite;
}
.igm-wa__m1 {
	animation: igm-wa-m1 12s infinite;
}
.igm-wa__m2 {
	animation: igm-wa-m2 12s infinite;
}
.igm-wa__read {
	animation: igm-wa-read 12s infinite;
}
@keyframes igm-wa-dot {
	0%, 60%, 100% { transform: translateY(0); opacity: .45; }
	30% { transform: translateY(-3px); opacity: 1; }
}
@keyframes igm-wa-t1 {
	0% { opacity: 0; }
	3%, 12% { opacity: 1; }
	14%, 100% { opacity: 0; }
}
@keyframes igm-wa-m1 {
	0%, 13% { opacity: 0; transform: translateY(10px) scale(.97); }
	17%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; }
}
@keyframes igm-wa-t2 {
	0%, 34% { opacity: 0; }
	36%, 46% { opacity: 1; }
	48%, 100% { opacity: 0; }
}
@keyframes igm-wa-m2 {
	0%, 47% { opacity: 0; transform: translateY(10px) scale(.97); }
	51%, 92% { opacity: 1; transform: none; }
	97%, 100% { opacity: 0; }
}
@keyframes igm-wa-read {
	0%, 60% { opacity: 0; }
	63%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.igm-wa__m1,
	.igm-wa__m2,
	.igm-wa__read {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.igm-wa__typing {
		display: none;
	}
}
@media (max-width: 860px) {
	.igm-wa {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 48px;
	}
	.igm-wa__phone {
		align-self: center;
	}
	.igm-wa__txt {
		flex: none;
	}
}
@media (max-width: 400px) {
	.igm-wa__phone::before {
		width: 360px;
		height: 360px;
		margin: -180px 0 0 -180px;
	}
}

/* [10.5] Come si inizia: 3 steps.
 * Computer: three cards side by side. Phone: tabs (one step open) + picture below.
 * Both versions are in the HTML; CSS shows one of them. */
.igm-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.igm-steps__head {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}
.igm-steps__head .igm-h2 {
	margin-bottom: 0;
}
.et_pb_section.igm-scope .igm-steps__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0 0 56px;
	padding: 0;
	list-style: none;
}
.igm-steps__card {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 1px solid #EAE3EF;
	border-radius: 24px;
	overflow: hidden;
	text-align: left;
}
.igm-steps__vis {
	position: relative;
	display: flex;
	align-items: center;
	height: 340px;
	padding: 36px 24px;
	background: var(--igm-lavanda);
}
.igm-steps__vis > div {
	width: 100%;
}
.igm-steps__num,
.igm-steps__tnum {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--igm-viola);
	color: var(--igm-bianco);
	font-size: 17px;
	font-weight: 800;
}
.igm-steps__num {
	/* white badge: stays visible on top of the purple pictures (step 3) */
	position: absolute;
	z-index: 2;
	top: 20px;
	left: 20px;
	background: var(--igm-bianco);
	color: var(--igm-viola);
	box-shadow: 0 4px 14px rgba(94, 42, 114, 0.22);
}
.igm-steps__body {
	padding: 24px 28px 28px;
}
.igm-steps__title {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--igm-font);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--igm-inchiostro);
}
.igm-steps__text {
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--igm-testo);
}
.igm-steps__cta--desk {
	text-align: center;
}

/* [10.5] step pictures are animated: 1) the form fills in, 2) our team writes and the
 * setup completes, 3) appointments drop into the calendar.
 * igm-2026.js adds "igm-steps-js" (start state) and then "is-play" to one card after
 * another, so the steps play strictly in order and reset together.
 * Without the script (or with reduced motion) the pictures simply show the end state. */
.igm-steps-js .igm-sv1__t1,
.igm-steps-js .igm-sv1__t2 {
	clip-path: inset(0 100% 0 0);
}
.igm-steps-js .igm-sv1__done,
.igm-steps-js .igm-sv2__msg,
.igm-steps-js .igm-sv2__k1,
.igm-steps-js .igm-sv2__k2,
.igm-steps-js .igm-sv2__c2,
.igm-steps-js .igm-sv2__c3,
.igm-steps-js .igm-sv3__r1,
.igm-steps-js .igm-sv3__r2,
.igm-steps-js .igm-sv3__r3,
.igm-steps-js .igm-sv3__r4 {
	opacity: 0;
}
.igm-steps-js .igm-sv2__bar {
	transform: scaleX(.34);
}
.igm-sv2__dots,
.igm-sv2__c1 {
	opacity: 0;
}
.igm-steps-js .igm-sv2__c1 {
	opacity: 1;
}
.igm-sv1__t1,
.igm-sv1__t2 {
	display: inline-block;
	white-space: nowrap;
	vertical-align: bottom;
}
.igm-sv2__dots i {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #A79BB5;
}
.igm-steps-js .is-play .igm-sv,
.igm-steps-js .is-play .igm-sv * {
	animation-duration: var(--igm-step-time);
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}
.igm-steps-js .is-play .igm-sv1__t1 { animation-name: igm-sv1-t1; animation-timing-function: steps(17, end); }
.igm-steps-js .is-play .igm-sv1__t2 { animation-name: igm-sv1-t2; animation-timing-function: steps(24, end); }
.igm-steps-js .is-play .igm-sv1__f2 { animation-name: igm-sv1-f2; }
.igm-steps-js .is-play .igm-sv1__btn { animation-name: igm-sv1-btn; }
.igm-steps-js .is-play .igm-sv1__done { animation-name: igm-sv1-done; }
.igm-steps-js .is-play .igm-sv2__dots { animation-name: igm-sv2-dots; }
.igm-steps-js .is-play .igm-sv2__msg { animation-name: igm-sv2-msg; }
.igm-steps-js .is-play .igm-sv2__bar { animation-name: igm-sv2-bar; }
.igm-steps-js .is-play .igm-sv2__k1 { animation-name: igm-sv2-k1; }
.igm-steps-js .is-play .igm-sv2__k2 { animation-name: igm-sv2-k2; }
.igm-steps-js .is-play .igm-sv2__c1 { animation-name: igm-sv2-c1; }
.igm-steps-js .is-play .igm-sv2__c2 { animation-name: igm-sv2-c2; }
.igm-steps-js .is-play .igm-sv2__c3 { animation-name: igm-sv2-c3; }
.igm-steps-js .is-play .igm-sv3__r1 { animation-name: igm-sv3-r1; }
.igm-steps-js .is-play .igm-sv3__r2 { animation-name: igm-sv3-r2; }
.igm-steps-js .is-play .igm-sv3__r3 { animation-name: igm-sv3-r3; }
.igm-steps-js .is-play .igm-sv3__r4 { animation-name: igm-sv3-r4; }
@keyframes igm-sv1-t1 { 0%, 5% { clip-path: inset(0 100% 0 0); } 35%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes igm-sv1-t2 { 0%, 40% { clip-path: inset(0 100% 0 0); } 78%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes igm-sv1-f2 { 0%, 38% { border-color: #EAE3EF; } 40%, 100% { border-color: #7F3E98; } }
@keyframes igm-sv1-btn { 0%, 82% { transform: scale(1); } 86% { transform: scale(.95); } 90%, 100% { transform: scale(1); } }
@keyframes igm-sv1-done { 0%, 88% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes igm-sv2-dots { 0% { opacity: 0; } 4%, 20% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes igm-sv2-msg { 0%, 22% { opacity: 0; transform: translateY(8px); } 32%, 100% { opacity: 1; transform: none; } }
@keyframes igm-sv2-bar { 0%, 44% { transform: scaleX(.34); } 52%, 72% { transform: scaleX(.67); } 80%, 100% { transform: scaleX(1); } }
@keyframes igm-sv2-k1 { 0%, 46% { opacity: 0; transform: scale(.4); } 52%, 100% { opacity: 1; transform: none; } }
@keyframes igm-sv2-k2 { 0%, 74% { opacity: 0; transform: scale(.4); } 80%, 100% { opacity: 1; transform: none; } }
@keyframes igm-sv2-c1 { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes igm-sv2-c2 { 0%, 49% { opacity: 0; } 50%, 77% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes igm-sv2-c3 { 0%, 77% { opacity: 0; } 78%, 100% { opacity: 1; } }
@keyframes igm-sv3-r1 { 0%, 4% { opacity: 0; transform: translateX(-14px); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes igm-sv3-r2 { 0%, 26% { opacity: 0; transform: translateX(-14px); } 40%, 100% { opacity: 1; transform: none; } }
@keyframes igm-sv3-r3 { 0%, 48% { opacity: 0; transform: translateX(-14px); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes igm-sv3-r4 { 0%, 70% { opacity: 0; transform: translateX(-14px); } 84%, 100% { opacity: 1; transform: none; } }
.igm-steps__mob {
	display: none;
}

@media (max-width: 860px) {
	.igm-steps__head {
		margin: 0 0 32px;
		text-align: left;
	}
	.et_pb_section.igm-scope .igm-steps__cards,
	.igm-steps__cta--desk {
		display: none;
	}
	.igm-steps__mob {
		display: block;
		text-align: left;
	}
	.igm-steps__tabs {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin-bottom: 32px;
	}
	.igm-steps__tab {
		display: flex;
		align-items: flex-start;
		gap: 16px;
		width: 100%;
		padding: 16px;
		border: 0;
		border-radius: 14px;
		background: transparent;
		font: inherit;
		text-align: left;
		color: var(--igm-inchiostro);
		cursor: pointer;
	}
	.igm-steps__tab[aria-selected="true"] {
		background: var(--igm-badge-bg);
	}
	.igm-steps__tab:focus-visible {
		outline: 3px solid var(--igm-focus);
		outline-offset: 2px;
	}
	.igm-steps__tnum {
		flex: none;
		background: var(--igm-bianco);
		color: var(--igm-viola);
		border: 2px solid #CBC0DD;
	}
	.igm-steps__tab[aria-selected="true"] .igm-steps__tnum {
		background: var(--igm-viola);
		color: var(--igm-bianco);
		border-color: var(--igm-viola);
	}
	.igm-steps__tbody {
		display: block;
		padding-top: 8px;
	}
	.igm-steps__ttitle {
		display: block;
		font-size: 19px;
		font-weight: 800;
		line-height: 1.3;
	}
	.igm-steps__ttext {
		display: none;
		margin-top: 6px;
		font-size: 15px;
		line-height: 1.55;
		color: var(--igm-testo);
	}
	.igm-steps__tab[aria-selected="true"] .igm-steps__ttext {
		display: block;
	}
	.igm-steps__mob .igm-steps__cta {
		margin-top: 32px;
	}
	.igm-steps__mob .igm-btn {
		width: 100%;
		height: 54px;
	}
	.igm-steps__stage {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 28px;
		min-height: 420px;
		padding: 40px 20px;
		border-radius: 24px;
		background: var(--igm-lavanda);
	}
	.igm-steps__panel {
		width: 100%;
	}
	.igm-steps__panel[hidden] {
		display: none;
	}
	.igm-steps__dots {
		display: flex;
		gap: 8px;
	}
	.igm-steps__dot {
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background: #CBC0DD;
		transition: width .2s;
	}
	.igm-steps__dot.is-on {
		width: 28px;
		background: var(--igm-viola);
	}
}

/* [10.6] Opinioni: one big vertical video (9:16) + quote, stars, and a list of other videos.
 * Video data lives on each list button (data-name, data-salon, data-quote, data-len,
 * data-bg, data-video = .mp4 address, data-poster = cover image). igm-2026.js swaps them. */
.et_pb_section.igm-op-sec {
	background: var(--igm-lavanda);
}
.igm-op {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 72px;
	text-align: left;
}
.igm-op__vid {
	flex: 0 0 340px;
}
.igm-op__side {
	flex: 0 1 560px;
	min-width: 0;
}
.igm-op__frame {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba(94, 42, 114, 0.22);
	background-size: cover;
	background-position: center;
}
.igm-op__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}
.igm-op__badge,
.igm-op__len {
	position: absolute;
	top: 14px;
	color: var(--igm-bianco);
	font-weight: 700;
}
.igm-op__badge {
	left: 14px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.igm-op__len {
	right: 14px;
	padding: 4px 9px;
	border-radius: 6px;
	background: rgba(28, 23, 32, 0.55);
	font-size: 12px;
}
.igm-op__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--igm-bianco);
	box-shadow: 0 10px 30px rgba(28, 23, 32, 0.3);
	cursor: pointer;
	transition: transform .15s;
}
.igm-op__play:hover {
	transform: scale(1.06);
}
.igm-op__play:focus-visible,
.igm-op__pick:focus-visible {
	outline: 3px solid var(--igm-focus);
	outline-offset: 2px;
}
.igm-op__subs {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 18px;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(28, 23, 32, 0.65);
	color: var(--igm-bianco);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}
.igm-op__title {
	font-size: clamp(30px, 3.4vw, 44px);
	margin-bottom: 28px;
}
.igm-op__quote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(22px, 2.2vw, 28px);
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: -0.01em;
	font-style: normal;
	color: var(--igm-inchiostro);
}
.igm-op__stars {
	display: flex;
	gap: 3px;
	margin: 18px 0 8px;
}
.igm-op__who {
	margin: 0 0 32px;
	padding: 0;
	font-size: 15px;
	color: var(--igm-testo);
}
.igm-op__who strong {
	color: var(--igm-inchiostro);
}
.igm-op__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.igm-op__pick {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 10px 14px 10px 10px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	font: inherit;
	color: var(--igm-inchiostro);
	text-align: left;
	cursor: pointer;
}
.igm-op__pick:hover {
	background: var(--igm-bianco);
}
.igm-op__pick[aria-selected="true"] {
	background: var(--igm-bianco);
	box-shadow: 0 6px 20px rgba(94, 42, 114, 0.10);
}
.igm-op__thumb {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 64px;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
}
.igm-op__pinfo {
	flex: 1;
	min-width: 0;
}
.igm-op__pname {
	display: block;
	font-size: 15px;
	font-weight: 800;
}
.igm-op__psalon,
.igm-op__plen {
	display: block;
	font-size: 13px;
	color: var(--igm-testo);
}
.igm-op__plen {
	font-weight: 700;
}
@media (max-width: 860px) {
	.igm-op {
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}
	.igm-op__vid {
		flex: none;
		width: min(300px, 100%);
		align-self: center;
	}
	.igm-op__side {
		flex: none;
	}
}

/* ================================================================
 * Section spacing on phones (value from [00])
 * ================================================================ */
@media (max-width: 640px) {
	:root {
		--igm-sezione: var(--igm-sezione-tel);
	}
}