/* Strati di Carta · fogli di stile */
:root {
	--crema: #FDF6EE;
	--sabbia: #F3ECE1;
	--grigio-piede: #E9E7E2;
	--teal: #187C7C;
	--teal-titoli: #157373;
	--navy: #164056;
	--inchiostro: #2E5468;
	--ruggine: #813110;
	--arancio: #F5A540;
	--raggio-foto: 60px;
}

*, *:before, *:after { box-sizing: border-box; }
html { overflow-x: clip; }
body {
	margin: 0px;
	background: var(--crema);
	color: var(--inchiostro);
	font-family: 'DM Sans', Arial, sans-serif;
	font-size: 1.2rem;
	line-height: 1.3;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--arancio); outline-offset: 3px; }
h1, h2, h3 { font-family: 'Poppins', Arial, sans-serif; font-weight: 700; text-transform: uppercase; color: var(--teal-titoli); }
.salto { position: absolute; left: -9999px; }
.salto:focus { left: 12px; top: 12px; background: #FFF; padding: 8px 12px; z-index: 99; }

/* testata */
.intestazione {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 120px;
	padding: 0px 80px;
	border-bottom: 1px solid #C9C4BD;
}
.intestazione__logo img { height: 44px; width: auto; }
.intestazione nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.intestazione nav a { color: #0A0A0A; text-decoration: none; text-transform: uppercase; letter-spacing: .05em; font-size: .86rem; padding: 6px 0; display: inline-block; }
.intestazione nav a:hover, .intestazione nav a[aria-current='page'] { text-decoration: underline; text-underline-offset: 4px; }
.intestazione__tel { font-size: .9rem; color: var(--navy); text-decoration: none; white-space: nowrap; }
.hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 26px; height: 2px; background: #0A0A0A; margin: 6px 0; }

/* nastro in movimento */
.nastro { overflow: hidden; border-bottom: 1px solid #C9C4BD; padding: 26px 0px; }
.nastro__riga { display: flex; width: max-content; animation: nastro 40s linear infinite; }
.nastro__riga span {
	font-family: 'Aboreto', Georgia, serif;
	font-size: 1.98rem;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--ruggine);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 26px;
	padding-right: 26px;
}
.nastro svg { width: 26px; height: 26px; flex: 0 0 auto; }
@keyframes nastro { to { transform: translateX(-50%); } }

/* avviso con le frecce */
.avviso { display: grid; grid-template-columns: 120px 1fr 120px; align-items: center; padding: 44px 40px; text-align: center; }
.avviso svg { width: 100px; height: 100px; margin: 0 auto; }
.avviso h2 { font-size: clamp(1.7rem, 4.2vw, 3.95rem); line-height: .95; margin: 0px 0px 14px; }
.avviso p { margin: 0 0 4px; text-transform: uppercase; font-size: 1.1rem; }
.avviso .rosso { color: #C40000; font-size: .88rem; text-transform: none; margin-top: 12px; }

/* eroe */
.eroe { display: grid; grid-template-columns: 560px 445px; justify-content: space-between; gap: 50px; padding: 50px 100px 90px; align-items: center; }
.eroe > div { min-width: 0; }
.eroe h1 { font-size: clamp(2.2rem, 7.4vw, 5.9rem); line-height: .9; margin: 0px 0px 28px; }
.eroe h1 span { display: block; }
.eroe p { margin: 0 0 18px; }
.eroe__foto img { width: 100%; aspect-ratio: 445 / 760; object-fit: cover; border-radius: var(--raggio-foto); }

.pillola {
	display: inline-block;
	border-radius: 50px;
	padding: 10px 32px;
	font-size: .99rem;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--teal);
	color: #FFF;
	border: 2px solid var(--crema);
	box-shadow: 0 0 0 2px var(--teal);
	cursor: pointer;
	font-family: inherit;
	transition: background .3s;
}
.pillola:hover { background: #0F6363; }
.pillola--navy { background: var(--navy); box-shadow: none; border-color: var(--navy); }
.pillola--navy:hover { background: #0E2E3E; }

/* banda foto e due blocchi */
.banda { display: grid; grid-template-columns: 637px 1fr; gap: 70px; padding: 40px 100px 100px; align-items: start; }
.banda > div { min-width: 0; }
.banda img { width: 100%; aspect-ratio: .8; object-fit: cover; border-radius: var(--raggio-foto); }
.banda h3 { font-size: clamp(1.4rem, 3vw, 2.95rem); line-height: 1; margin: 0px 0px 18px; }
.banda__blocco { margin-bottom: 60px; }
.banda__blocco--destra { text-align: right; }
.banda ol { padding-left: 22px; margin: 0 0 20px; text-align: left; }
.banda li { margin-bottom: 8px; }

/* gli strati: ogni anno una fascia */
.stratigrafia { padding: 60px 100px 100px; }
.stratigrafia h2, .programma h2, .domande h2 { font-size: clamp(1.7rem, 4vw, 3.95rem); line-height: .95; margin: 0px 0px 18px; }
.stratigrafia > p { max-width: 760px; margin: 0 0 30px; }
.strati { display: grid; grid-template-columns: 1fr 380px; gap: 40px; }
.strati > div { min-width: 0; }
.fascia {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	border: 0;
	font: inherit;
	text-align: left;
	color: #FFF;
	padding: 14px 22px;
	cursor: pointer;
	border-radius: 0px;
	margin-bottom: 3px;
}
.fascia b { font-family: 'Poppins', Arial, sans-serif; font-size: 1.3rem; }
.fascia span { font-size: .95rem; }
.fascia[aria-pressed='true'] { outline: 3px solid var(--arancio); outline-offset: -3px; }
.fascia:nth-child(1) { background: #4E6B63; margin-left: 0%; width: 100%; }
.fascia:nth-child(2) { background: #476560; margin-left: 2%; width: 98%; }
.fascia:nth-child(3) { background: #4F6E6E; margin-left: 4%; width: 96%; }
.fascia:nth-child(4) { background: #426062; margin-left: 6%; width: 94%; }
.fascia:nth-child(5) { background: #375455; margin-left: 9%; width: 91%; }
.fascia:nth-child(6) { background: #2C4547; margin-left: 12%; width: 88%; }
.fascia:nth-child(7) { background: #22383A; margin-left: 15%; width: 85%; }
.scheda-strato { background: var(--sabbia); padding: 26px 28px; border-radius: 30px; }
.scheda-strato h3 { font-size: 1.5rem; margin: 0 0 10px; }
.scheda-strato p { margin: 0 0 10px; font-size: 1.05rem; }

/* programma */
.programma { padding: 20px 100px 100px; }
.giorni { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.giorno { background: var(--sabbia); padding: 22px 20px 26px; min-width: 0; }
.giorno.sede { background: var(--navy); color: #FFF; }
.giorno.sede h3 { color: #FFF; }
.giorno time { font-family: 'Handjet', Arial, sans-serif; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .02em; display: block; margin-bottom: 8px; }
.giorno h3 { font-size: 1.05rem; line-height: 1.15; margin: 0 0 8px; }
.giorno p { margin: 0; font-size: 1rem; }
.programma .seconda { margin-top: 18px; font-size: 1rem; }

/* lastra nera col marchio */
.lastra { background: #000; display: flex; align-items: center; justify-content: center; padding: 140px 20px; position: relative; }
.lastra img { width: min(740px, 80%); height: auto; }
.lastra small { position: absolute; left: 20px; top: 16px; color: #BBB; font-size: .8rem; }

/* da Amalfi */
.da-citta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; padding: 100px 100px; align-items: center; }
.da-citta > div { min-width: 0; }
.da-citta img { width: 100%; aspect-ratio: 1.3; object-fit: cover; border-radius: var(--raggio-foto); }
.da-citta h2 { font-size: clamp(1.7rem, 4vw, 3.6rem); line-height: .95; margin: 0 0 18px; }

/* scegli e scrivi: il modulo a passi */
.scelta { display: grid; grid-template-columns: 1fr 360px; gap: 70px; padding: 40px 100px 110px; }
.scelta > div { min-width: 0; }
.scelta h2 { font-size: clamp(1.7rem, 4vw, 3.95rem); line-height: .95; margin: 0 0 22px; }
.scelta__foto img { width: 100%; aspect-ratio: 360 / 410; object-fit: cover; border-radius: var(--raggio-foto); }
.tab-passi { display: flex; gap: 8px; margin-bottom: 26px; }
.tab-passi span {
	background: var(--sabbia);
	padding: 8px 14px;
	font-family: 'Handjet', Arial, sans-serif;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: #000;
}
.tab-passi span.attivo { background: var(--navy); color: #FFF; }
.passo { border: 0; padding: 0px; margin: 0; min-height: 330px; }
.passo legend { font-family: 'Poppins', Arial, sans-serif; font-weight: 700; font-size: 1.3rem; color: var(--navy); margin-bottom: 14px; padding: 0; }
.voce { margin-bottom: 14px; }
.voce label { display: block; font-size: 1rem; margin-bottom: 6px; }
.voce input, .voce select, .voce textarea {
	width: 100%;
	font: inherit;
	font-size: 1.05rem;
	padding: 12px 14px;
	border: 1px solid #9DB0B8;
	border-radius: 14px;
	background: #FFF;
	color: #0A0A0A;
}
.voce input[aria-invalid='true'], .voce select[aria-invalid='true'] { border: 2px solid #A31F00; }
.nota-errore { display: block; min-height: 1.3em; font-size: .9rem; color: #A31F00; margin-top: 4px; }
.scelte-carta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scelte-carta label { display: flex; gap: 10px; align-items: center; background: #FFF; border: 1px solid #C9C4BD; border-radius: 14px; padding: 10px 12px; font-size: 1rem; cursor: pointer; }
.scelte-carta input { width: 18px; height: 18px; accent-color: var(--teal); }
.consenso { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; margin: 8px 0 4px; }
.consenso input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--teal); }
.bottoni-passo { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.pillola--chiara { background: transparent; color: var(--navy); border: 2px solid var(--navy); box-shadow: none; }
.stato-invio { min-height: 1.4em; margin-top: 12px; }
.fatto { background: var(--sabbia); border-radius: 30px; padding: 28px 30px; }
.fatto h3 { margin: 0 0 8px; font-size: 1.6rem; }
.fuori { position: absolute; left: -6000px; width: 1px; height: 1px; overflow: hidden; }

/* le domande prima di iscriversi */
.domande { padding: 20px 100px 90px; }
.domande details { border-top: 1px solid #C9C4BD; }
.domande details:last-child { border-bottom: 1px solid #C9C4BD; }
.domande summary { cursor: pointer; padding: 18px 50px 18px 0px; font-family: 'Poppins', Arial, sans-serif; font-weight: 700; color: var(--navy); font-size: 1.15rem; list-style: none; position: relative; }
.domande summary::-webkit-details-marker { display: none; }
.domande summary:after { content: ''; position: absolute; right: 6px; top: 22px; width: 16px; height: 16px; border-right: 3px solid var(--arancio); border-bottom: 3px solid var(--arancio); transform: rotate(45deg); }
.domande details[open] summary:after { transform: rotate(-135deg); top: 30px; }
.domande details p { margin: 0 0 20px; max-width: 900px; }

/* fuori dal corso e il limite */
.fuori-corso { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 30px 100px 100px; }
.fuori-corso > div { min-width: 0; }
.fuori-corso h2 { font-size: clamp(1.4rem, 3vw, 2.95rem); line-height: 1; margin: 0 0 18px; }
.fuori-corso ul { margin: 0; padding-left: 20px; }
.fuori-corso li { margin-bottom: 10px; }
.limite { background: var(--sabbia); border-radius: 30px; padding: 28px 30px; }

/* piede */
.fondo-pagina { background: var(--grigio-piede); display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 30px; padding: 46px 80px 40px; font-size: .95rem; }
.fondo-pagina > div { min-width: 0; }
.fondo-pagina img { height: 40px; width: auto; }
.fondo-pagina h2 { font-size: 1.25rem; color: var(--navy); margin: 0 0 12px; }
.fondo-pagina ul { list-style: none; margin: 0; padding: 0; }
.fondo-pagina li { margin-bottom: 6px; }
.fondo-pagina a { color: var(--navy); }
.fondo-pagina button { background: none; border: 0; padding: 0; font: inherit; color: var(--navy); text-decoration: underline; cursor: pointer; }
.fondo-pagina .copia { grid-column: 1 / -1; font-size: .8rem; border-top: 1px solid #C9C4BD; padding-top: 16px; }

/* consenso in fondo allo schermo */
.cookie-striscia { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--navy); color: #FFF; padding: 18px 80px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; font-size: .95rem; }
.cookie-striscia p { margin: 0; flex: 1 1 420px; }
.cookie-striscia a { color: #FFF; }
.cookie-striscia button { border-radius: 50px; padding: 9px 20px; font: inherit; font-size: .9rem; cursor: pointer; border: 2px solid #FFF; background: transparent; color: #FFF; margin-right: 6px; }
.cookie-striscia button.ok { background: #FFF; color: var(--navy); }
.cookie-striscia .scelte { flex-basis: 100%; display: flex; gap: 22px; flex-wrap: wrap; }
.cookie-striscia .scelte label { display: flex; gap: 8px; align-items: center; }

/* testate e testo delle altre pagine */
.testa-interna { padding: 60px 100px 40px; display: grid; grid-template-columns: 1fr 340px; gap: 60px; align-items: end; border-bottom: 1px solid #C9C4BD; }
.testa-interna > div { min-width: 0; }
.testa-interna h1 { font-size: clamp(2rem, 5.4vw, 4.6rem); line-height: .92; margin: 8px 0 18px; }
.testa-interna .briciole { font-size: .9rem; }
.testa-interna img { width: 100%; aspect-ratio: .85; object-fit: cover; border-radius: var(--raggio-foto); }
.corpo-interno { padding: 50px 100px 90px; }
.corpo-interno h2 { font-size: clamp(1.3rem, 2.6vw, 2.2rem); line-height: 1; margin: 36px 0 14px; }
.corpo-interno h2:first-child { margin-top: 0; }
.corpo-interno p { margin: 0 0 16px; }
.corpo-legale h2 { font-size: 1.35rem; }
.riquadro-sabbia { background: var(--sabbia); border-radius: 30px; padding: 24px 28px; margin: 26px 0; }
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.due-colonne > div { min-width: 0; }

@media (max-width: 1023px) {
	body { font-size: 1.04rem; }
	.intestazione { padding: 0 20px; min-height: 64px; }
	.intestazione nav { position: fixed; inset: 64px 0 0 0; background: var(--crema); padding: 20px; display: none; z-index: 60; }
	.intestazione nav.aperto { display: block; }
	.intestazione nav ul { flex-direction: column; gap: 6px; }
	.intestazione nav a { font-size: 1.1rem; }
	.intestazione__tel { display: none; }
	.hamburger { display: block; }
	.nastro__riga span { font-size: 1.39rem; }
	.avviso { grid-template-columns: 50px 1fr; padding: 26px 20px; }
	.avviso svg { width: 44px; height: 44px; }
	.avviso svg + div + svg { display: none; }
	.eroe, .banda, .da-citta, .scelta, .fuori-corso, .strati, .testa-interna, .due-colonne { grid-template-columns: 1fr; padding-left: 20px; padding-right: 20px; gap: 30px; }
	.eroe { text-align: center; }
	.eroe h1 { font-size: 2.2rem; }
	.eroe__foto img { aspect-ratio: .9; }
	.banda__blocco, .banda__blocco--destra { text-align: center; }
	.stratigrafia, .programma, .domande, .corpo-interno { padding-left: 20px; padding-right: 20px; }
	.giorni { grid-template-columns: 1fr 1fr; }
	.lastra { padding: 60px 20px; }
	.lastra img { width: 210px; }
	.scelte-carta { grid-template-columns: 1fr; }
	.tab-passi { flex-wrap: wrap; }
	.fondo-pagina { grid-template-columns: 1fr; padding: 34px 20px; }
	.cookie-striscia { padding: 16px 20px; }
}
@media (max-width: 560px) {
	.giorni { grid-template-columns: 1fr; }
	.fascia span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.nastro__riga { animation: none; }
}

/* piccole correzioni */
.fondo-pagina a.pillola { color: #FFF; }
h1, h2, .avviso h2 { text-wrap: balance; }
.compreso { list-style: none; margin: 14px 0 0; padding: 0; }
.compreso li { padding: 4px 0 4px 30px; position: relative; font-size: 1rem; }
.compreso li:before { content: '\2713'; position: absolute; left: 4px; top: 3px; color: var(--teal); font-weight: 700; }

/* quanti strati hai: piccolo conto degli anni */
.quanti-strati { padding: 0px 100px 110px; }
.quanti-strati h2 { font-size: clamp(1.7rem, 4vw, 3.4rem); line-height: .95; margin: 0 0 16px; }
.quanti-strati > p { max-width: 820px; margin: 0 0 22px; }
.quanti-strati__riga { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; background: var(--sabbia); border-radius: 30px; padding: 22px 26px; }
.quanti-strati__riga label { flex-basis: 100%; font-size: 1rem; }
.quanti-strati__riga input { width: 180px; font: inherit; padding: 10px 14px; border: 1px solid #9DB0B8; border-radius: 14px; background: #FFF; }
.quanti-strati__esito { min-height: 2.6em; font-size: 1.15rem; color: var(--navy); margin: 18px 0 8px; }
.quanti-strati__esito b { color: var(--ruggine); }
.quanti-strati__nota { font-size: 1rem; color: #4B6470; }
@media (max-width: 1023px) {
	.quanti-strati { padding: 0px 20px 70px; }
}

/* domande in elenco, senza fisarmonica */
.domande--elenco dl { margin: 0px; max-width: 1100px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.domande--elenco .domanda { background: #F4EFE8; border-top: 4px solid var(--arancio); padding: 20px 22px; }
.domande--elenco dt { font-family: 'Poppins', Arial, sans-serif; font-weight: 700; color: var(--navy); font-size: 1.15rem; }
.domande--elenco dd { margin: 8px 0px 0px; }
@media (max-width: 760px) { .domande--elenco dl { grid-template-columns: 1fr; } }
.date-in-riga { font-size: 1rem; margin: -8px 0 22px; }

/* cosa tenere pronto */
.porta-con-te {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}
.porta-con-te li {
	position: relative;
	padding: 4px 0 4px 26px;
}
.porta-con-te li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: #187C7C;
	font-weight: 700;
}