/*
 * Pagina della lista d'attesa. Inter Tight, blu UNERFA, un colore per corso (brand kit).
 * Tutte le regole partono da ".ula .ula-pieno" e le proprietà che i temi toccano di solito
 * (margini, interlinea, colori, maiuscole) sono bloccate: la pagina deve restare uguale su qualsiasi tema.
 */
.ula {
	--blu: #2e40a0;
	--notte: #11163f;
	--inchiostro: #1c2350;
	--nebbia: #f2f3f7;
	--grigio: #4a5175;
	--gutter: 20px;
}
.ula .ula-pieno {
	width: 100vw !important;
	max-width: 100vw !important;
	margin: 0 0 0 calc(50% - 50vw) !important;
	padding: 0 !important;
	overflow-x: clip;
	font-family: "Inter Tight", system-ui, sans-serif !important;
	color: var(--inchiostro);
	font-size: 18px;
	line-height: 1.55;
	text-align: left;
}
.ula .ula-pieno * { box-sizing: border-box; }
.ula .ula-pieno :where(h1, h2, h3, p, ol, ul, li, details, summary) {
	font-family: inherit !important;
	text-transform: none !important;
}
.ula .ula-pieno p { line-height: 1.55 !important; }

/* Colonna del contenuto: tutto parte dallo stesso bordo sinistro. */
.ula .ula-pieno .ula-largo {
	width: 100% !important;
	max-width: 860px !important;
	margin: 0 auto !important;
	padding: 0 var(--gutter) !important;
}

/* ---------- Apertura ---------- */
.ula .ula-pieno .ula-apertura { background: var(--nebbia); padding: 64px 0 56px !important; margin: 0 0 72px !important; }
.ula .ula-pieno .ula-intro { margin: 0 0 12px !important; font-size: 18px !important; font-weight: 600; color: var(--blu) !important; }
.ula .ula-pieno .ula-titolo {
	margin: 0 0 40px !important; padding: 0 !important;
	font-size: clamp(40px, 6.4vw, 76px) !important; line-height: 1 !important; font-weight: 800 !important;
	letter-spacing: -0.025em !important; max-width: 14ch; color: var(--inchiostro) !important;
}

/*
 * Il pezzo forte: i tre corsi su fasce di colore.
 * La fascia sta nella colonna (il testo parte allineato al titolo); il colore prosegue fino al bordo sinistro dello schermo con ::before.
 */
.ula .ula-pieno .ula-fasce { list-style: none !important; margin: 0 0 44px !important; padding: 0 !important; display: grid; gap: 10px; }
.ula .ula-pieno .ula-fasce li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.ula .ula-pieno .ula-fasce li::marker { content: none; }
.ula .ula-pieno a.ula-fascia {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
	width: 100%; margin: 0 !important;
	padding: 18px 28px 18px 0 !important;
	background: var(--c) !important; color: #fff !important; text-decoration: none !important;
	border-radius: 0 999px 999px 0 !important; border: 0 !important; box-shadow: none !important;
}
.ula .ula-pieno a.ula-fascia::before {
	content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 100vw; background: var(--c);
}
.ula .ula-pieno .ula-fasce li:nth-child(2) a.ula-fascia { width: 94%; }
.ula .ula-pieno .ula-fasce li:nth-child(3) a.ula-fascia { width: 88%; }
.ula .ula-pieno a.ula-fascia:hover { filter: brightness(1.08); }
.ula .ula-pieno a.ula-fascia:focus-visible { outline: 4px solid var(--inchiostro); outline-offset: 3px; }
.ula .ula-pieno a.ula-fascia span { color: #fff !important; text-decoration: none !important; }
.ula .ula-pieno .ula-fascia__nome { font-size: clamp(22px, 3vw, 34px) !important; font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.015em; }
.ula .ula-pieno .ula-fascia__mese { font-size: 16px !important; font-weight: 600 !important; line-height: 1.3 !important; opacity: .92; }


.ula .ula-pieno .ula-quota__prezzo { margin: 0 0 8px !important; font-size: 26px !important; line-height: 1.2 !important; font-weight: 800 !important; }
.ula .ula-pieno .ula-quota__frase { margin: 0 0 28px !important; color: var(--grigio) !important; font-size: 16px !important; line-height: 1.5 !important; max-width: 60ch; }
.ula .ula-pieno a.ula-bottone {
	display: inline-block; margin: 0 !important; padding: 16px 28px !important; border-radius: 12px !important; border: 0 !important;
	background: var(--blu) !important; color: #fff !important; font-weight: 800 !important; font-size: 18px !important; line-height: 1.2 !important;
	text-decoration: none !important; text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important;
}
.ula .ula-pieno a.ula-bottone:hover { background: var(--notte) !important; }
.ula .ula-pieno a.ula-bottone:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; }

/* ---------- Sezioni ---------- */
.ula .ula-pieno .ula-sezione { margin: 0 auto 72px !important; }
.ula .ula-pieno h2 { font-size: clamp(28px, 3.6vw, 40px) !important; line-height: 1.12 !important; font-weight: 800 !important; letter-spacing: -0.02em !important; margin: 0 0 20px !important; padding: 0 !important; color: var(--inchiostro) !important; }
.ula .ula-pieno .ula-testo { max-width: 62ch; margin: 0 0 16px !important; font-size: 18px !important; }

.ula .ula-pieno .ula-passi { margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: passo; display: grid; gap: 16px; max-width: 62ch; }
.ula .ula-pieno .ula-passi li { counter-increment: passo; position: relative; margin: 0 !important; padding: 4px 0 0 52px !important; min-height: 36px; list-style: none !important; line-height: 1.5 !important; }
.ula .ula-pieno .ula-passi li::before {
	content: counter(passo); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
	background: var(--blu); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 17px; line-height: 1;
}

.ula .ula-pieno .ula-corsi { display: grid; gap: 40px; }
.ula .ula-pieno .ula-corso { border-left: 6px solid var(--c) !important; margin: 0 !important; padding: 2px 0 2px 24px !important; scroll-margin-top: 90px; }
.ula .ula-pieno .ula-corso h3 { font-size: 26px !important; line-height: 1.15 !important; font-weight: 800 !important; margin: 0 0 6px !important; padding: 0 !important; color: var(--inchiostro) !important; }
.ula .ula-pieno .ula-corso__info { margin: 0 0 12px !important; color: var(--c) !important; font-weight: 700 !important; font-size: 16px !important; }
.ula .ula-pieno .ula-corso p { max-width: 64ch; margin: 0 0 10px !important; }
.ula .ula-pieno .ula-corso__per { font-size: 16px !important; color: var(--grigio) !important; }
.ula .ula-pieno .ula-corso__per span { font-weight: 700; color: var(--inchiostro) !important; margin-right: 4px; }
.ula .ula-pieno a.ula-corso__link { display: inline-block; margin-top: 4px; font-weight: 700 !important; color: var(--c) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* ---------- Modulo ---------- */
.ula .ula-pieno .ula-modulo { background: var(--nebbia); padding: 64px 0 !important; margin: 0 0 72px !important; }
.ula .ula-pieno .ula-modulo .unerfa-la { max-width: none !important; margin: 0 !important; }
.ula .ula-pieno .ula-modulo .unerfa-la__corso { background: #fff; }

/* ---------- Domande ---------- */
.ula .ula-pieno details { border: 0 !important; border-bottom: 1px solid #d6d9e6 !important; margin: 0 !important; padding: 16px 0 !important; max-width: 70ch; background: none !important; }
.ula .ula-pieno summary { cursor: pointer; font-weight: 700 !important; font-size: 18px !important; line-height: 1.4 !important; color: var(--inchiostro) !important; padding: 0 !important; margin: 0 !important; }
.ula .ula-pieno summary:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; }
.ula .ula-pieno details p { margin: 10px 0 0 !important; color: var(--grigio) !important; }

@media (max-width: 600px) {
	.ula .ula-pieno { font-size: 17px; }
	.ula .ula-pieno .ula-apertura { padding: 44px 0 40px !important; margin-bottom: 52px !important; }
	.ula .ula-pieno .ula-titolo { margin-bottom: 32px !important; }
	.ula .ula-pieno a.ula-fascia { padding: 16px 22px 16px 0 !important; border-radius: 0 28px 28px 0 !important; }
	.ula .ula-pieno .ula-fasce li:nth-child(2) a.ula-fascia,
	.ula .ula-pieno .ula-fasce li:nth-child(3) a.ula-fascia { width: 100%; }
	.ula .ula-pieno .ula-sezione { margin-bottom: 52px !important; }
	.ula .ula-pieno .ula-modulo { padding: 44px 0 !important; margin-bottom: 52px !important; }
}

/* Il riquadro di selezione compare solo usando la tastiera, non al clic (alcuni temi lo mostrano sempre). */
.ula .ula-pieno a.ula-fascia:focus:not(:focus-visible),
.ula .ula-pieno a.ula-bottone:focus:not(:focus-visible),
.ula .ula-pieno a.ula-corso__link:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }

/* ================================================================
   Movimento (v1.4). Un solo momento in apertura, che porta l'occhio al pulsante;
   poi solo risposte a ciò che fa la persona. Con «riduci movimento» è tutto fermo.
   ================================================================ */
@keyframes ula-su { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ula-entra { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.ula .ula-pieno .ula-intro { animation: ula-su .5s cubic-bezier(.2,.7,.2,1) both; }
	.ula .ula-pieno .ula-titolo { animation: ula-su .55s cubic-bezier(.2,.7,.2,1) .06s both; }
	.ula .ula-pieno .ula-fasce li:nth-child(1) a.ula-fascia { animation: ula-entra .6s cubic-bezier(.2,.7,.2,1) .24s both; }
	.ula .ula-pieno .ula-fasce li:nth-child(2) a.ula-fascia { animation: ula-entra .6s cubic-bezier(.2,.7,.2,1) .34s both; }
	.ula .ula-pieno .ula-fasce li:nth-child(3) a.ula-fascia { animation: ula-entra .6s cubic-bezier(.2,.7,.2,1) .44s both; }
	.ula .ula-pieno .ula-quota { animation: ula-su .5s cubic-bezier(.2,.7,.2,1) .7s both; }
	.ula .ula-pieno a.ula-fascia { transition: filter .2s, transform .2s; }
	.ula .ula-pieno a.ula-fascia:hover { transform: translateX(6px); }

	/* Schede dei corsi: la linea colorata si disegna dall'alto. */
	.ula.ula--js .ula-pieno .ula-corso { position: relative; border-left-color: transparent !important; }
	.ula.ula--js .ula-pieno .ula-corso::before {
		content: ""; position: absolute; left: -6px; top: 0; bottom: 0; width: 6px; background: var(--c);
		transform: scaleY(0); transform-origin: top; transition: transform .7s cubic-bezier(.2,.7,.2,1);
	}
	.ula.ula--js .ula-pieno .ula-corso.is-visibile::before { transform: scaleY(1); }
}