/*
 * ThemaRMsistemi — stili del front-end.
 * I colori arrivano dalle variabili generate dal pannello del plugin.
 */

:root{
	--display:'Archivo','Helvetica Neue',Arial,sans-serif;
	--body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
	--rosso:#e2001a;
	--rosso-scuro:#9c0012;
	--nero:#0b0c0e;
	--superficie:#15171a;
	--linea:#262a2f;
	--testo:#f2f3f5;
	--testo-soft:#98a0a8;
	--raggio:5px;
	--larghezza:1180px;
	color-scheme:dark;
}

*{box-sizing:border-box}

body{
	margin:0;
	background:var(--nero);
	color:var(--testo);
	font-family:var(--body);
	font-size:16px;
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}

/* Il menu a scomparsa sta fuori dallo schermo: non deve allargare la pagina. */
html,body{overflow-x:clip}

img,svg,iframe{max-width:100%}
img{height:auto}
a{color:inherit}

h1,h2,h3,h4{font-family:var(--display);margin:0;text-wrap:balance}

.sr,.salta{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.salta:focus{
	position:fixed;top:12px;left:12px;z-index:999;width:auto;height:auto;
	clip:auto;margin:0;padding:11px 18px;background:var(--rosso);color:#fff;
	border-radius:var(--raggio);font-weight:600;
}

:focus-visible{outline:2px solid var(--rosso);outline-offset:3px}

/* ------------------------------------------------------------------ *
 * Impianto
 * ------------------------------------------------------------------ */

.in{width:100%;max-width:var(--larghezza);margin:0 auto;padding-inline:24px}
.in--stretta{max-width:820px}
.centrato{text-align:center}

.sez{position:relative;border-bottom:1px solid var(--linea)}
.sez--nero{background:var(--nero)}
.sez--superficie{background:var(--superficie)}
.sez--accento{background:linear-gradient(135deg,var(--rosso-scuro),var(--rosso));border-bottom-color:transparent}

.p-sm{padding-block:36px}
.p-md{padding-block:60px}
.p-lg{padding-block:84px}
.p-xl{padding-block:96px}

.testa{max-width:62ch;margin-bottom:46px}
.testa:last-child{margin-bottom:0}

.occhiello{
	font-family:var(--display);font-size:12px;font-weight:600;
	letter-spacing:.18em;text-transform:uppercase;color:var(--rosso);margin:0 0 14px;
}
.sez--accento .occhiello{color:rgba(255,255,255,.85)}

.tit{font-weight:700;letter-spacing:-.02em;line-height:1.1}
.tit--xl{font-size:clamp(32px,4.4vw,54px)}
.tit--lg{font-size:clamp(26px,3vw,36px)}
.tit em{font-style:normal;color:var(--rosso)}
.sez--accento .tit em{color:#fff;text-decoration:underline;text-underline-offset:5px}

.testo{color:var(--testo-soft);margin:16px 0 0;font-size:16.5px;max-width:62ch}
.testo--grande{font-size:18px}
.sez--accento .testo{color:rgba(255,255,255,.9)}

.azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ------------------------------------------------------------------ *
 * Pulsanti
 * ------------------------------------------------------------------ */

.btn{
	position:relative;overflow:hidden;
	display:inline-flex;align-items:center;gap:9px;
	font-family:var(--display);font-weight:600;font-size:15px;
	padding:14px 26px;border-radius:3px;text-decoration:none;border:1px solid transparent;
	transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
	cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn::after{
	content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
	background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
	transform:skewX(-18deg);transition:left .5s ease;
}
.btn:hover::after{left:120%}

.btn--primario{background:var(--rosso);color:#fff}
.btn--primario:hover{background:var(--rosso-scuro);box-shadow:0 10px 26px -10px rgba(226,0,26,.75)}
.sez--accento .btn--primario{background:#fff;color:var(--rosso)}

.btn--fantasma{border-color:var(--linea);color:var(--testo)}
.btn--fantasma:hover{border-color:var(--testo-soft)}
.sez--accento .btn--fantasma{border-color:rgba(255,255,255,.55);color:#fff}

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

.testata{
	position:sticky;top:0;z-index:40;
	background:color-mix(in srgb,var(--nero) 96%,transparent);
	border-bottom:1px solid var(--linea);
}
.admin-bar .testata{top:32px}
@media (max-width:782px){.admin-bar .testata{top:46px}}
@media (max-width:600px){.admin-bar .testata{top:0}}

.testata__in{display:flex;align-items:center;gap:26px;padding-block:14px}
.testata__logo{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.testata__logo img{display:block;height:var(--logo-h,50px);width:auto;max-width:60vw}
.testata__nome{font-family:var(--display);font-weight:700;font-size:19px}

.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav__rete,.nav__contattaci{display:none}
.nav__lista{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;font-size:14.5px;font-weight:500}
.nav__lista li{position:relative}
.nav__lista a{position:relative;display:block;text-decoration:none;color:var(--testo-soft);transition:color .18s;padding-block:5px}
.nav__lista a::after{
	content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--rosso);
	transform:scaleX(0);transform-origin:right;transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.nav__lista a:hover,.nav__lista .current-menu-item > a{color:var(--testo)}
.nav__lista a:hover::after,.nav__lista .current-menu-item > a::after{transform:scaleX(1);transform-origin:left}

.nav__lista .sub-menu{
	position:absolute;top:100%;left:-14px;min-width:216px;margin:0;padding:8px;list-style:none;
	background:var(--superficie);border:1px solid var(--linea);border-radius:var(--raggio);
	opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s;
	box-shadow:0 20px 44px -24px rgba(0,0,0,.95);
}
.nav__lista li:hover > .sub-menu,.nav__lista li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.nav__lista .sub-menu a{padding:9px 12px}
.nav__lista .sub-menu a::after{display:none}
.nav__lista .sub-menu a:hover{background:var(--nero);border-radius:3px}

.nav__azioni{display:flex;align-items:center;gap:9px}
.testata__tel{
	display:inline-flex;align-items:center;gap:8px;text-decoration:none;
	font-family:var(--display);font-weight:600;font-size:14.5px;
	padding:10px 18px;border:1px solid var(--rosso);border-radius:3px;
	transition:background .18s;white-space:nowrap;
}
.testata__tel:hover{background:var(--rosso)}
.testata__wa{
	display:inline-flex;align-items:center;text-decoration:none;font-size:14px;font-weight:500;
	color:var(--testo-soft);padding:10px 12px;transition:color .18s;
}
.testata__wa:hover{color:var(--testo)}
.squilla{animation:squilla 3.4s ease-in-out infinite}
@keyframes squilla{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-12deg)}92%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}

.apri-menu{display:none;background:none;border:0;padding:9px;margin-left:auto;cursor:pointer;color:var(--testo)}
.apri-menu__barre{display:grid;gap:5px;width:24px}
.apri-menu__barre i{display:block;height:2px;background:currentColor;transition:transform .25s,opacity .2s}
.menu-aperto .apri-menu__barre i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-aperto .apri-menu__barre i:nth-child(2){opacity:0}
.menu-aperto .apri-menu__barre i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ------------------------------------------------------------------ *
 * Hero e console
 * ------------------------------------------------------------------ */

.sez--hero{overflow:hidden;border-bottom:1px solid var(--linea)}
.hero__sfondo{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero__sfondo canvas{width:100%;height:100%;display:block;opacity:1}
.sez--hero::after{
	content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
	background:radial-gradient(760px 420px at 76% 18%,color-mix(in srgb,var(--rosso) 20%,transparent),transparent 64%);
	animation:respiro 9s ease-in-out infinite;
}
@keyframes respiro{0%,100%{opacity:.75}50%{opacity:1}}

.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .9fr;gap:52px;align-items:center}
.hero__in--solo{grid-template-columns:1fr;max-width:860px}
.hero__nota{margin-top:26px;font-size:13.8px;color:var(--testo-soft);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero__nota b{color:var(--testo);font-weight:600}

.pallino{position:relative;width:8px;height:8px;border-radius:50%;background:#2ecc71;flex:none}
.pallino::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2ecc71;animation:eco 2.2s ease-out infinite}
@keyframes eco{0%{transform:scale(1);opacity:.65}100%{transform:scale(3.4);opacity:0}}

.pavimento{
	position:absolute;left:0;right:0;bottom:0;height:230px;pointer-events:none;z-index:1;
	background-image:
		linear-gradient(to right,color-mix(in srgb,var(--rete-colore,var(--rosso)) var(--rete-griglia,38%),transparent) 1px,transparent 1px),
		linear-gradient(to bottom,color-mix(in srgb,var(--rete-colore,var(--rosso)) var(--rete-griglia,38%),transparent) 1px,transparent 1px);
	background-size:62px 62px;
	transform:perspective(320px) rotateX(62deg);
	transform-origin:bottom center;
	mask-image:linear-gradient(to bottom,transparent,#000 42%,transparent);
	-webkit-mask-image:linear-gradient(to bottom,transparent,#000 42%,transparent);
	animation:avanza 5.5s linear infinite;
}
@keyframes avanza{to{background-position:0 62px}}

.console{position:relative}
.schermo{
	position:relative;background:var(--superficie);border:1px solid var(--linea);
	border-radius:7px;overflow:hidden;min-height:316px;
	box-shadow:0 26px 60px -34px rgba(0,0,0,.95);
}
.schermo::before{
	content:"";position:absolute;top:0;left:-100%;width:100%;height:2px;z-index:4;
	background:linear-gradient(90deg,transparent,var(--rosso),transparent);
	animation:scorri 3.6s linear infinite;
}
@keyframes scorri{to{left:100%}}

.schermo__testa{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--linea);background:color-mix(in srgb,var(--nero) 55%,var(--superficie))}
.bollo{width:9px;height:9px;border-radius:50%;background:#2b3036;flex:none}
.bollo--vivo{background:var(--rosso)}
.schermo__titolo{margin-left:6px;font-family:var(--display);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--testo-soft);font-weight:600}

.atto{
	position:absolute;inset:44px 0 0;padding:22px;
	opacity:0;transform:translateY(14px);pointer-events:none;
	transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
.atto.in{opacity:1;transform:none}
.atto h3{font-size:19px;font-weight:600;margin:0 0 4px}
.atto > div > p{margin:0 0 18px;color:var(--testo-soft);font-size:13.8px;line-height:1.55}

.riga{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-top:1px solid var(--linea);font-size:14px}
.riga span{color:var(--testo-soft)}
.riga b{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}

.spunta{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:2px solid #2ecc71;color:#2ecc71;margin:4px auto 14px}
.spunta svg{stroke-width:2.6;stroke-dasharray:30;stroke-dashoffset:30}
.atto.in .spunta svg{animation:traccia .55s ease forwards .12s}
@keyframes traccia{to{stroke-dashoffset:0}}

.cartellino{
	position:absolute;right:-16px;top:-26px;z-index:5;
	background:color-mix(in srgb,var(--superficie) 70%,var(--nero));
	border:1px solid var(--rosso);border-radius:var(--raggio);padding:11px 14px;
	font-size:12.6px;line-height:1.45;max-width:218px;
	box-shadow:0 18px 40px -20px rgba(0,0,0,.95);
	opacity:0;transform:translateY(12px) scale(.96);
	transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1);
}
.cartellino.in{opacity:1;transform:none}
.cartellino b{display:block;font-family:var(--display);color:var(--rosso);font-size:12px;letter-spacing:.06em;margin-bottom:3px}
.cartellino span{color:var(--testo-soft)}

.capitoli{display:flex;gap:10px;align-items:flex-end;margin-top:16px}
.capitolo{flex:1;background:none;border:0;padding:0;text-align:left;min-width:0;cursor:pointer}
.capitolo i{display:block;height:2px;background:#24282d;overflow:hidden;margin-bottom:7px}
.capitolo i::after{content:"";display:block;height:100%;width:0;background:var(--rosso)}
.capitolo.fatto i::after{width:100%}
.capitolo.ora i::after{animation:riempi 4.2s linear forwards}
@keyframes riempi{from{width:0}to{width:100%}}
.capitolo span{font-family:var(--display);font-size:11.8px;font-weight:600;color:#6b727a;transition:color .25s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.capitolo.ora span,.capitolo.fatto span{color:var(--testo)}

.pausa{
	flex:none;width:30px;height:30px;border-radius:50%;cursor:pointer;
	border:1px solid var(--linea);background:var(--superficie);color:var(--testo-soft);
	display:grid;place-items:center;transition:border-color .2s,color .2s;
}
.pausa:hover{border-color:var(--rosso);color:var(--rosso)}
.pausa svg{width:11px;height:11px}

/* ------------------------------------------------------------------ *
 * Griglie e schede
 * ------------------------------------------------------------------ */

.griglia{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.scheda{
	position:relative;overflow:hidden;min-width:0;
	background:var(--superficie);border:1px solid var(--linea);border-radius:var(--raggio);
	padding:26px 24px 24px;display:flex;flex-direction:column;
	transition:border-color .22s,transform .22s,box-shadow .22s;
}
.sez--superficie .scheda{background:var(--nero)}
.scheda::before{
	content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--rosso);
	transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.scheda:hover{border-color:#3a4047;transform:translateY(-5px);box-shadow:0 18px 40px -22px rgba(0,0,0,.9)}
.scheda:hover::before{transform:scaleX(1)}

.scheda__icona{color:var(--rosso);margin-bottom:16px;transition:transform .3s;flex:none}
.scheda:hover .scheda__icona{transform:translateY(-3px) scale(1.06)}
.scheda h3{font-size:17.5px;font-weight:600;margin-bottom:5px}
.scheda h3 a{text-decoration:none}
.scheda__sotto{font-size:12.5px;color:var(--rosso);font-weight:500;margin:0 0 11px}
.scheda p{margin:0;color:var(--testo-soft);font-size:14.3px;line-height:1.6}
.scheda__img{display:block;margin:-26px -24px 18px;border-bottom:1px solid var(--linea)}
.scheda__img img{display:block;width:100%}
.scheda__link{
	margin-top:auto;padding-top:18px;text-decoration:none;
	font-family:var(--display);font-weight:600;font-size:13.5px;
	display:inline-flex;gap:6px;align-items:center;transition:color .18s,gap .22s;
}
.scheda:hover .scheda__link{color:var(--rosso);gap:11px}

/* numeri */
.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--raggio);overflow:hidden}
.numero{background:var(--superficie);padding:28px 20px;text-align:center;transition:background .22s;min-width:0}
.sez--nero .numero{background:var(--nero)}
.numero:hover{background:color-mix(in srgb,var(--rosso) 7%,var(--superficie))}
.numero b{display:block;font-family:var(--display);font-size:34px;font-weight:700;color:var(--rosso);line-height:1;font-variant-numeric:tabular-nums}
.numero span{display:block;margin-top:8px;font-size:13.5px;color:var(--testo-soft)}

/* punti di forza */
.forze{display:grid;gap:38px}
.forza{position:relative;padding-top:20px;min-width:0}
.forza::before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--linea)}
.forza::after{content:"";position:absolute;top:0;left:0;width:0;height:2px;background:var(--rosso);transition:width .7s cubic-bezier(.4,0,.2,1)}
.forza.viva::after{width:100%}
.forza h3{font-size:17px;font-weight:600;margin-bottom:8px}
.forza p{margin:0;color:var(--testo-soft);font-size:15px}

/* percorso numerato */
.percorso{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:8px}
.tappa{position:relative;min-width:0}
.tappa::before,.tappa::after{content:"";position:absolute;top:15px;left:33px;right:-19px;height:2px}
.tappa::before{background:var(--linea)}
.tappa::after{background:var(--rosso);transform:scaleX(0);transform-origin:left;transition:transform .5s linear}
.tappa:last-child::before,.tappa:last-child::after{display:none}
.percorso.viva .tappa::after{transform:scaleX(1)}
.percorso.viva .tappa:nth-child(1)::after{transition-delay:.25s}
.percorso.viva .tappa:nth-child(2)::after{transition-delay:.55s}
.percorso.viva .tappa:nth-child(3)::after{transition-delay:.85s}
.percorso.viva .tappa:nth-child(4)::after{transition-delay:1.15s}
.percorso.viva .tappa:nth-child(5)::after{transition-delay:1.45s}
.tappa b{
	position:relative;z-index:2;display:grid;place-items:center;width:33px;height:33px;border-radius:50%;
	background:var(--superficie);border:2px solid var(--linea);color:#6b727a;
	font-family:var(--display);font-size:14px;font-weight:700;margin-bottom:14px;
	transition:border-color .35s,color .35s,background .35s;
}
.percorso.viva .tappa b{border-color:var(--rosso);color:#fff;background:var(--rosso)}
.percorso.viva .tappa:nth-child(1) b{transition-delay:.1s}
.percorso.viva .tappa:nth-child(2) b{transition-delay:.4s}
.percorso.viva .tappa:nth-child(3) b{transition-delay:.7s}
.percorso.viva .tappa:nth-child(4) b{transition-delay:1s}
.percorso.viva .tappa:nth-child(5) b{transition-delay:1.3s}
.tappa h3{font-size:15.5px;font-weight:600;margin-bottom:5px}
.tappa p{margin:0;color:var(--testo-soft);font-size:13.8px;line-height:1.55}

/* due colonne */
.duecol{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.duecol--sinistra > div:first-child{order:2}
.duecol__img,.duecol img{display:block;border-radius:var(--raggio);width:100%}
.finta-img{
	aspect-ratio:4/3;border-radius:var(--raggio);border:1px solid var(--linea);
	background:repeating-linear-gradient(45deg,var(--superficie),var(--superficie) 11px,color-mix(in srgb,var(--superficie) 80%,#fff) 11px,color-mix(in srgb,var(--superficie) 80%,#fff) 22px);
}

/* domande frequenti */
.faq{border-top:1px solid var(--linea)}
.faq__voce{border-bottom:1px solid var(--linea)}
.faq__voce summary{
	display:flex;justify-content:space-between;align-items:center;gap:18px;
	padding:17px 0;cursor:pointer;list-style:none;
	font-family:var(--display);font-weight:600;font-size:16.5px;transition:color .18s;
}
.faq__voce summary::-webkit-details-marker{display:none}
.faq__voce summary:hover{color:var(--rosso)}
.faq__voce summary i{
	position:relative;flex:none;width:18px;height:18px;
}
.faq__voce summary i::before,.faq__voce summary i::after{
	content:"";position:absolute;background:var(--rosso);border-radius:2px;
	top:50%;left:50%;transform:translate(-50%,-50%);
}
.faq__voce summary i::before{width:15px;height:2px}
.faq__voce summary i::after{width:2px;height:15px;transition:transform .25s}
.faq__voce[open] summary i::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__risposta{padding:0 0 18px;color:var(--testo-soft);max-width:70ch}
.faq__risposta p{margin:0}

/* loghi */
.loghi{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px;align-items:center;margin-top:26px}
.logo{display:grid;place-items:center;padding:14px;opacity:.62;filter:grayscale(1);transition:opacity .22s,filter .22s}
.logo:hover{opacity:1;filter:none}
.logo img{max-height:52px;width:auto;object-fit:contain}

/* richiamo finale */
.cta{display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.cta .azioni{margin-top:0}
.sez--cta{overflow:hidden}
.sez--cta::before{
	content:"";position:absolute;inset:-40%;pointer-events:none;
	background:conic-gradient(from 0deg,transparent 0%,rgba(255,255,255,.07) 12%,transparent 26%);
	animation:ruota 16s linear infinite;
}
.sez--cta .in{position:relative;z-index:2}

@keyframes ruota{to{transform:rotate(360deg)}}

/* modulo contatti */
.recapiti{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.recapiti li{display:flex;align-items:flex-start;gap:11px;color:var(--testo-soft);font-size:15px}
.recapiti svg{color:var(--rosso);flex:none;margin-top:3px}
.recapiti a{text-decoration:none;transition:color .18s}
.recapiti a:hover{color:var(--rosso)}

.modulo{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--raggio);padding:26px}
.sez--superficie .modulo{background:var(--nero)}
.campo{margin:0 0 15px}
.campo label{display:block;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--testo-soft);margin-bottom:6px}
.campo input,.campo textarea,.cerca input{
	width:100%;background:var(--nero);border:1px solid var(--linea);border-radius:3px;
	color:var(--testo);padding:11px 13px;font-family:var(--body);font-size:15px;
	transition:border-color .18s;
}
.sez--superficie .campo input,.sez--superficie .campo textarea{background:var(--superficie)}
.campo input:focus,.campo textarea:focus{outline:0;border-color:var(--rosso)}
.campo textarea{resize:vertical;min-height:110px}
.campo--trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.modulo__nota{display:block;margin-top:13px;color:#6b727a;font-size:12.6px;line-height:1.5}
.modulo__esito{margin:14px 0 0;padding:11px 14px;border-radius:3px;font-size:14.3px}
.modulo__esito--ok{background:color-mix(in srgb,#2ecc71 14%,transparent);border:1px solid #2ecc71;color:#8ce7b4}
.modulo__esito--ko{background:color-mix(in srgb,var(--rosso) 14%,transparent);border:1px solid var(--rosso);color:#ffb3bc}

.cerca{display:flex;gap:10px;margin-bottom:34px}
.cerca input{max-width:420px}

.mappa{position:relative;aspect-ratio:16/11;border-radius:var(--raggio);overflow:hidden;border:1px solid var(--linea)}
.mappa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.5) invert(.92) hue-rotate(180deg) contrast(.9)}

/* ------------------------------------------------------------------ *
 * Testo lungo
 * ------------------------------------------------------------------ */

.prosa{font-size:17px;color:#d7dce1}
.prosa > * + *{margin-top:1.15em}
.prosa h2{font-size:26px;margin-top:1.8em;color:var(--testo)}
.prosa h3{font-size:20px;margin-top:1.6em;color:var(--testo)}
.prosa a{color:var(--rosso);text-underline-offset:3px}
.prosa ul,.prosa ol{padding-left:1.3em}
.prosa li + li{margin-top:.45em}
.prosa img{border-radius:var(--raggio)}
.prosa blockquote{margin:0;padding-left:20px;border-left:3px solid var(--rosso);color:var(--testo-soft);font-style:italic}
.prosa code{background:var(--superficie);border:1px solid var(--linea);border-radius:3px;padding:2px 6px;font-size:.9em}
.prosa pre{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--raggio);padding:18px;overflow-x:auto}
.prosa table{width:100%;border-collapse:collapse;font-size:15px}
.prosa th,.prosa td{border:1px solid var(--linea);padding:10px 12px;text-align:left}
.prosa__copertina{margin:0 0 32px}
.prosa__copertina img{border-radius:var(--raggio);width:100%}

.briciole{font-size:13.5px;color:var(--testo-soft);margin-bottom:22px;display:flex;gap:9px;flex-wrap:wrap}
.briciole a{text-decoration:none}
.briciole a:hover{color:var(--rosso)}

.servizio__icona{color:var(--rosso);margin-bottom:18px}
.sez--servizio-testa{overflow:hidden}
.sez--servizio-testa>.in{position:relative;z-index:2}
.servizio__in{position:relative;z-index:2}
.sez--servizio-testa .tit--xl{margin-bottom:12px}

.pagination,.navigation{margin-top:44px}
.page-numbers{
	display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 12px;margin-right:6px;
	border:1px solid var(--linea);border-radius:3px;text-decoration:none;font-weight:600;font-size:14.5px;
	transition:border-color .18s,background .18s;
}
.page-numbers:hover{border-color:var(--rosso)}
.page-numbers.current{background:var(--rosso);border-color:var(--rosso);color:#fff}

.commenti{margin-top:10px}
.commenti__lista{list-style:none;margin:0 0 34px;padding:0}
.commenti__lista ol{list-style:none;padding-left:26px}
.commenti__lista .comment-body{border-top:1px solid var(--linea);padding:20px 0}

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

.piede{background:var(--nero);border-top:1px solid var(--linea);padding-block:54px 28px;font-size:14.8px}
.piede__griglia{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:42px}
.piede__logo{height:var(--logo-piede-h,46px);width:auto;max-width:100%;margin-bottom:16px}
.piede__ribbon{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px}
.piede__ribbon img{height:var(--ribbon-h,90px);width:auto;max-width:100%}
.piede__nome{font-family:var(--display);font-weight:700;font-size:19px;margin:0 0 14px}
.piede p{color:var(--testo-soft);margin:0 0 10px;max-width:46ch}
.piede__titolo{font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 16px;font-weight:600}
.piede__lista,.piede__social{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.piede__social{flex-direction:row;gap:16px;margin-top:18px}
.piede__lista a,.piede__social a{color:var(--testo-soft);text-decoration:none;transition:color .18s,padding-left .18s}
.piede__lista a:hover{color:var(--testo);padding-left:5px}
.piede__social a:hover{color:var(--rosso)}
.piede__lista span{color:var(--testo-soft)}
.piede__coda{
	margin-top:40px;padding-top:20px;border-top:1px solid var(--linea);
	color:var(--testo-soft);font-size:13px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;
}
.piede__legale{list-style:none;display:flex;gap:18px;margin:0;padding:0;flex-wrap:wrap}
.piede__legale a{text-decoration:none}
.piede__legale a:hover{color:var(--rosso)}

/* ------------------------------------------------------------------ *
 * Comparsa allo scorrimento
 * ------------------------------------------------------------------ */

.js .sali{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.js .sali.viva{opacity:1;transform:none}

/* ------------------------------------------------------------------ *
 * Schermi stretti
 * ------------------------------------------------------------------ */

@media (max-width:1040px){
	.g4{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:980px){
	.percorso{grid-template-columns:1fr;gap:0}
	.tappa{padding:0 0 26px 52px}
	.tappa b{position:absolute;left:0;top:0;margin:0}
	.tappa::before,.tappa::after{top:33px;bottom:0;left:15px;right:auto;width:2px;height:auto}
	.tappa::after{transform:scaleY(0);transform-origin:top}
	.percorso.viva .tappa::after{transform:scaleY(1)}
}

@media (max-width:900px){
	.hero__in{grid-template-columns:1fr;gap:38px}
	.duecol{grid-template-columns:1fr;gap:30px}
	.duecol--sinistra > div:first-child{order:0}
	.g3,.forze{grid-template-columns:repeat(2,1fr)}
	.forze{gap:28px}
	.piede__griglia{grid-template-columns:1fr 1fr}
	.cartellino{right:0;top:-22px;max-width:200px}

	.apri-menu{display:block}
	.testata__logo,.apri-menu{position:relative;z-index:60}
	.nav{
		position:fixed;inset:0;z-index:50;
		display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
		gap:0;padding:calc(var(--testata-h,78px) + 40px) 24px 32px;margin:0;
		background:var(--nero);
		opacity:0;visibility:hidden;transform:translateY(-12px);
		transition:opacity .3s,transform .35s cubic-bezier(.22,1,.36,1),visibility .3s;
		overflow-y:auto;
	}
	.nav::before{content:"";position:absolute;left:0;right:0;top:var(--testata-h,78px);height:1px;background:var(--linea);z-index:1}
	.menu-aperto .nav{opacity:1;visibility:visible;transform:none}
	html:has(body.menu-aperto){overflow:hidden}
	.nav__rete{display:block;position:absolute;inset:0;pointer-events:none;opacity:.8}
	.nav__rete::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 50% 40%,color-mix(in srgb,var(--nero) 70%,transparent),transparent 75%)}
	.nav__lista{position:relative;z-index:1;flex-direction:column;align-items:center;gap:4px;font-size:32px;width:100%;text-align:center}
	.nav__lista > li{border:0;opacity:0;transform:translateY(16px)}
	.menu-aperto .nav__lista > li{animation:voce-menu .5s cubic-bezier(.22,1,.36,1) forwards}
	.menu-aperto .nav__lista > li:nth-child(2){animation-delay:.07s}
	.menu-aperto .nav__lista > li:nth-child(3){animation-delay:.14s}
	.menu-aperto .nav__lista > li:nth-child(4){animation-delay:.21s}
	.menu-aperto .nav__lista > li:nth-child(5){animation-delay:.28s}
	.menu-aperto .nav__lista > li:nth-child(6){animation-delay:.35s}
	.menu-aperto .nav__lista > li:nth-child(n+7){animation-delay:.42s}
	@keyframes voce-menu{to{opacity:1;transform:none}}
	.nav__lista a{padding:10px 0;color:var(--testo);font-family:var(--display);font-weight:700;letter-spacing:-.01em}
	.nav__lista .current-menu-item > a,.nav__lista a:hover{color:var(--rosso)}
	.nav__lista a::after{display:none}
	.nav__contattaci{display:flex;position:relative;z-index:1;margin-top:auto;width:100%;max-width:420px;justify-content:center;min-height:52px;font-size:16px;opacity:0;transform:translateY(16px)}
	.menu-aperto .nav__contattaci{animation:voce-menu .5s .3s cubic-bezier(.22,1,.36,1) forwards}
	.nav__lista .sub-menu{
		position:static;opacity:1;visibility:visible;transform:none;
		background:none;border:0;box-shadow:none;padding:0 0 10px 14px;min-width:0;
	}
	.nav__lista .sub-menu a{font-size:16px;font-weight:500;color:var(--testo-soft);padding:9px 0}
	.nav__lista .sub-menu{padding:0 0 8px}
	.nav__azioni{position:relative;z-index:1;flex-direction:column;align-items:stretch;gap:10px;margin-top:12px;width:100%;max-width:420px}
	.testata__tel,.testata__wa{justify-content:center;font-size:16px;padding:14px 18px}
	.testata__wa{border:1px solid var(--linea);border-radius:3px}
}

@media (max-width:600px){
	.g2,.g3,.g4,.forze{grid-template-columns:1fr}
	.piede__griglia{grid-template-columns:1fr}
	.p-lg{padding-block:58px}
	.p-xl{padding-block:64px}
	.p-md{padding-block:48px}
	.testata__logo img{height:calc(var(--logo-h,50px) * .8)}
	.capitolo span{font-size:10.8px}
	.cerca{flex-direction:column}
	.cerca input{max-width:none}
}

/* ------------------------------------------------------------------ *
 * Animazioni 1.3: aurora, titoli a parole, icone animate, scheda viva
 * ------------------------------------------------------------------ */

/* aurora */
.aurora{--a:var(--alone,var(--rosso));--as:color-mix(in srgb,var(--a) 72%,#000);--a1:var(--alone-1,var(--a));--as2:color-mix(in srgb,var(--alone-2,var(--a)) 72%,#000);--a3:var(--alone-3,var(--a));position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;contain:strict}
.aurora i{position:absolute;border-radius:50%;will-change:transform;backface-visibility:hidden}
.aurora i:nth-child(1){width:56vw;height:40vw;left:44%;top:-6%;background:radial-gradient(closest-side,color-mix(in srgb,var(--a1) 30.0%,transparent) 0%,color-mix(in srgb,var(--a1) 24.6%,transparent) 18%,color-mix(in srgb,var(--a1) 18.0%,transparent) 34%,color-mix(in srgb,var(--a1) 11.4%,transparent) 50%,color-mix(in srgb,var(--a1) 6.0%,transparent) 64%,color-mix(in srgb,var(--a1) 2.4%,transparent) 78%,color-mix(in srgb,var(--a1) 0.6%,transparent) 90%,color-mix(in srgb,var(--a1) 0.0%,transparent) 100%);animation:aurora-1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:42vw;height:32vw;left:60%;top:34%;background:radial-gradient(closest-side,color-mix(in srgb,var(--as2) 40.0%,transparent) 0%,color-mix(in srgb,var(--as2) 32.8%,transparent) 18%,color-mix(in srgb,var(--as2) 24.0%,transparent) 34%,color-mix(in srgb,var(--as2) 15.2%,transparent) 50%,color-mix(in srgb,var(--as2) 8.0%,transparent) 64%,color-mix(in srgb,var(--as2) 3.2%,transparent) 78%,color-mix(in srgb,var(--as2) 0.8%,transparent) 90%,color-mix(in srgb,var(--as2) 0.0%,transparent) 100%);animation:aurora-2 28s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:34vw;height:26vw;left:4%;top:56%;background:radial-gradient(closest-side,color-mix(in srgb,var(--a3) 13.0%,transparent) 0%,color-mix(in srgb,var(--a3) 10.7%,transparent) 18%,color-mix(in srgb,var(--a3) 7.8%,transparent) 34%,color-mix(in srgb,var(--a3) 4.9%,transparent) 50%,color-mix(in srgb,var(--a3) 2.6%,transparent) 64%,color-mix(in srgb,var(--a3) 1.0%,transparent) 78%,color-mix(in srgb,var(--a3) 0.3%,transparent) 90%,color-mix(in srgb,var(--a3) 0.0%,transparent) 100%);animation:aurora-1 32s ease-in-out infinite alternate-reverse}
/* alone che cambia colore (Sito RMsistemi → Aspetto) */
@property --ac{syntax:'<color>';inherits:true;initial-value:#e2001a}
.alone-ciclo .aurora i{--a1:var(--ac);--a3:var(--ac);--as2:color-mix(in srgb,var(--ac) 72%,#000)}
.alone-ciclo .aurora i:nth-child(1){animation:aurora-1 22s ease-in-out infinite alternate,alone-ciclo var(--alone-durata,30s) linear infinite}
.alone-ciclo .aurora i:nth-child(2){animation:aurora-2 28s ease-in-out infinite alternate,alone-ciclo var(--alone-durata,30s) linear infinite;animation-delay:0s,calc(var(--alone-durata,30s) / -3)}
.alone-ciclo .aurora i:nth-child(3){animation:aurora-1 32s ease-in-out infinite alternate-reverse,alone-ciclo var(--alone-durata,30s) linear infinite;animation-delay:0s,calc(var(--alone-durata,30s) / -1.5)}
@keyframes alone-ciclo{0%,100%{--ac:var(--alone-1)}33.333%{--ac:var(--alone-2)}66.666%{--ac:var(--alone-3)}}

@keyframes aurora-1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-8vw,4vw,0) scale(1.12)}100%{transform:translate3d(3vw,-2vw,0) scale(.94)}}
@keyframes aurora-2{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-12vw,-5vw,0) scale(1.18)}}

/* titolo che entra parola per parola */
.js [data-parole] .parola{display:inline-block;opacity:0;transform:translateY(.42em);filter:blur(8px);animation:parola .75s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--p,0) * 75ms + 120ms)}
@keyframes parola{to{opacity:1;transform:none;filter:none}}

/* scheda "dati vivi" */
.pannello{
	position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--superficie) 92%,#fff),var(--superficie));
	border:1px solid var(--linea);border-radius:calc(var(--raggio) + 6px);padding:6px 22px 20px;
	box-shadow:0 30px 70px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.02) inset;min-width:0;
}
.pannello::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,color-mix(in srgb,var(--rosso) 60%,transparent),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pannello__testa{display:flex;align-items:center;gap:11px;padding:16px 0 14px;border-bottom:1px solid var(--linea);margin-bottom:4px}
.pannello__testa b{font-family:var(--display);font-size:15px;font-weight:600;flex:1;min-width:0}
.pannello__stato{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#3ddc84;background:color-mix(in srgb,#3ddc84 10%,transparent);border:1px solid color-mix(in srgb,#3ddc84 30%,transparent);border-radius:99px;padding:3px 10px 3px 8px}
.pannello__stato i{width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 #3ddc84;animation:iv-eco 2s ease-out infinite}
@keyframes iv-eco{0%{box-shadow:0 0 0 0 color-mix(in srgb,#3ddc84 70%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
.pannello__riga{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px dashed color-mix(in srgb,var(--linea) 80%,transparent);font-size:14px}
.pannello__riga span{color:var(--testo-soft)}
.pannello__riga b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.pannello__codice{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--rosso);font-size:13px;letter-spacing:.02em}
.pannello__barra{padding:14px 0 4px}
.pannello__barra div{display:flex;justify-content:space-between;font-size:13px;color:var(--testo-soft);margin-bottom:8px}
.pannello__barra div b{color:var(--testo)}
.pannello__barra i{display:block;height:6px;border-radius:9px;background:var(--linea);overflow:hidden}
.pannello__barra em{display:block;height:100%;width:var(--pct);border-radius:inherit;background:linear-gradient(90deg,var(--rosso-scuro),var(--rosso))}
.pannello__timbro{margin-top:16px;display:flex;align-items:center;gap:9px;padding:11px 14px;border-radius:var(--raggio);background:color-mix(in srgb,var(--rosso) 12%,transparent);border:1px solid color-mix(in srgb,var(--rosso) 40%,transparent);color:#fff;font-weight:600;font-size:14px}
.pannello__timbro .iv{color:#fff}

.js .pannello .pannello__riga,.js .pannello .pannello__barra{opacity:0;transform:translateX(-10px);transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 260ms + 300ms)}
.js .pannello .pannello__barra em{width:0;transition:width 1.2s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 260ms + 500ms)}
.js .pannello .pannello__timbro{opacity:0;transform:scale(1.25) rotate(-3deg);transition:opacity .25s ease,transform .45s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i) * 260ms + 700ms)}
.js .pannello.viva .pannello__riga,.js .pannello.viva .pannello__barra{opacity:1;transform:none}
.js .pannello.viva .pannello__barra em{width:var(--pct)}
.js .pannello.viva .pannello__timbro{opacity:1;transform:none}

@media (max-width:900px){
	.pannello{padding:4px 16px 16px}
}

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{transition:none!important;animation:none!important}
	.js .sali{opacity:1;transform:none}
	.forza::after{width:100%}
	.tappa::after{transform:none}
	.js [data-parole] .parola{opacity:1;transform:none;filter:none}
	.js .pannello .pannello__riga,.js .pannello .pannello__barra,.js .pannello .pannello__timbro{opacity:1;transform:none}
	.js .pannello .pannello__barra em{width:var(--pct)}
	.aurora{display:none}
}
