/* Cedola Chiara
   verde petrolio, bianco, Times: gli stessi dei quaderni di Gaetano */

:root {
	--petrolio: #004A5A;
	--petrolio-notte: #002730;
	--petrolio-velo: rgba(0, 74, 90, .84);
	--grigio-scritte: #5C5C5C;
	--carta: #FFF;
	--cornice: 30px;
	--titoli: "Gloock", "Times New Roman", serif;
	--firma: "Mrs Saint Delafield", cursive;
	--testo: "Times New Roman", Times, serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0px;
	padding: var(--cornice);
	background: var(--carta);
	color: var(--petrolio);
	font-family: var(--testo);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8em;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, table { margin: 0px; }
ul { padding: 0px; list-style: none; }
button, input, select { font: inherit; color: inherit; }

/* titoli */
.titolo_sezione { font-family: var(--titoli); font-weight: 400; font-size: 50px; line-height: 1em; text-transform: uppercase; text-align: center; color: #2B4B5A; letter-spacing: -.01em; }
.titolo_sezione:after { content: ""; display: block; width: 250px; height: 1px; background: var(--petrolio); margin: 28px auto 0px; }
.titolo_modulo { font-family: var(--titoli); font-weight: 400; font-size: 43px; line-height: 1em; text-transform: uppercase; }
.firma { font-family: var(--firma); font-size: 54px; line-height: 1; text-transform: none; }
.pillola { display: inline-block; border: 1px solid currentColor; border-radius: 50px; padding: 8px 18px; font-size: 18px; line-height: 1.4; text-decoration: none; background: transparent; cursor: pointer; transition: all .3s ease; }
.pillola:hover { background: var(--petrolio); color: var(--carta); border-color: var(--petrolio); }
.pillola--chiara:hover { background: var(--carta); color: var(--petrolio-notte); border-color: var(--carta); }

/* testata sopra la foto */
.upperline { position: absolute; top: calc(var(--cornice) + 21px); left: calc(var(--cornice) + 21px); right: calc(var(--cornice) + 21px); z-index: 20; display: flex; justify-content: space-between; align-items: center; }
.upperline .pillola { font-family: var(--titoli); text-transform: uppercase; font-size: 17px; letter-spacing: -.01em; background: rgba(255, 255, 255, .55); }
.hamburger { width: 54px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0px; }
.hamburger span { display: block; height: 2px; background: var(--petrolio); margin: 6px 3px; }
.pagina_interna .hamburger span { background: var(--petrolio); }
.tendina { position: fixed; top: 0px; right: 0px; bottom: 0px; width: 360px; max-width: 88vw; background: var(--petrolio-notte); color: var(--carta); z-index: 50; padding: 80px 40px 40px; transform: translateX(100%); transition: transform .35s ease; }
.tendina a { display: block; padding: 10px 0px; font-family: var(--titoli); font-size: 24px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.tendina .chiudi { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border: 0; background: none; color: var(--carta); font-size: 30px; cursor: pointer; }
.menu-aperto .tendina { transform: none; }

/* sezione 0: foto incorniciata con il marchio */
.sezione_0 { position: relative; height: calc(100vh - 2 * var(--cornice)); min-height: 560px; max-height: 860px; overflow: hidden; }
.sezione_0 > img { width: 100%; height: 100%; object-fit: cover; }
.sezione_0:before { content: ""; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .86) 0, rgba(255, 255, 255, .7) 38%, rgba(255, 255, 255, .15) 75%); z-index: 1; }
.sezione_0 .marchio { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; width: 90%; max-width: 640px; }
.sezione_0 .marchio img { width: 100%; max-width: 520px; margin: 0px auto; }
.sezione_0 .marchio h1 { font-family: var(--titoli); font-weight: 400; font-size: 26px; line-height: 1.25em; margin-top: 22px; text-transform: uppercase; }
.sezione_0 .marchio .firma { display: block; margin-top: 8px; font-size: 48px; }

/* sezione 1: testo centrale */
.sezione_1 { padding: 80px 0px 60px; }
.testo_centro { width: 48%; margin: 60px auto 0px; }
.testo_centro p + p { margin-top: 18px; }
.testo_centro b { font-weight: 700; }

/* sezione 2: due riquadri scuri */
.sezione_2 { width: 66.6%; margin: 40px auto 50px; display: flex; }
.riquadro { flex: 1 1 50%; padding: 46px 30px 50px; padding-top: 50px; text-align: center; color: var(--carta); text-decoration: none; background: var(--petrolio-notte); }
.riquadro + .riquadro { background: var(--petrolio); }
.riquadro i { display: block; font-size: 18px; }
.riquadro b { display: block; font-family: var(--titoli); font-weight: 400; font-size: 36px; line-height: 1.1em; text-transform: uppercase; margin-top: 4px; }
.riquadro small { display: block; font-style: italic; font-size: 16px; margin-top: 8px; }
.riquadro:hover b { text-decoration: underline; text-underline-offset: 6px; }

/* sezione 3: foto sovrapposte con nome e firma */
.sezione_3 { position: relative; width: 82%; margin: 0px auto; padding-bottom: 60px; }
.sezione_3 .foto_grande { width: 70%; }
.sezione_3 .foto_grande img { width: 100%; height: 508px; object-fit: cover; }
.sezione_3 .foto_piccola { position: absolute; right: 0px; top: 194px; width: 35%; border: 0; }
.sezione_3 .foto_piccola img { width: 100%; height: 468px; object-fit: cover; }
.sezione_3 .nome { width: 70%; text-align: center; margin-top: 40px; }
.sezione_3 .nome h2 { font-family: var(--titoli); font-weight: 400; font-size: 43px; line-height: 1em; }
.sezione_3 .nome .firma { display: block; margin-top: 12px; }
.sezione_3 .testo_centro { margin-top: 110px; }

/* sezione 4: foto in bianco e nero con riquadro velato */
.sezione_4 { position: relative; width: 82%; margin: 70px auto 120px; }
.sezione_4 img { width: 70%; height: 600px; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.velo_testo { position: absolute; left: 52%; top: 174px; width: 42%; background: var(--petrolio-velo); color: var(--carta); padding: 44px 50px; }
.velo_testo h2 { font-family: var(--titoli); font-weight: 400; font-size: 38px; line-height: 1.05em; text-transform: uppercase; }
.velo_testo p { margin-top: 18px; line-height: 1.6em; }
.velo_testo em { display: block; margin-top: 6px; }

/* sezione 5: blocco scuro + foto */
.sezione_5 { display: flex; background: var(--petrolio-notte); color: var(--carta); }
.sezione_5 .colonna_1_2 { flex: 1 1 50%; }
.sezione_5 .testo_scuro { padding: 100px 90px; text-align: left; }
.sezione_5 .testo_scuro h2 { font-family: var(--titoli); font-weight: 400; font-size: 43px; line-height: 1em; text-transform: uppercase; text-align: center; }
.sezione_5 .testo_scuro h2:after { content: ""; display: block; width: 250px; height: 1px; background: rgba(255, 255, 255, .35); margin: 28px auto 0px; }
.sezione_5 .testo_scuro p { margin-top: 40px; line-height: 1.8em; }
.sezione_5 .testo_scuro .pillola { margin: 50px auto 0px; display: table; }
.sezione_5 img { width: 100%; height: 100%; min-height: 610px; object-fit: cover; }

/* sezione 6: tre schede con titolo che sporge */
.sezione_6 { padding: 90px 0px 40px; }
.schede { display: flex; column-gap: 2.2%; margin: 56px 4% 0px; }
.scheda { flex: 1 1 0; text-decoration: none; }
.scheda img { width: 100%; height: 286px; object-fit: cover; }
.scheda .etichetta { position: relative; margin: -114px 10% 0px; background: var(--carta); padding: 22px 16px 10px; text-align: center; font-family: var(--titoli); font-weight: 400; font-size: 24px; line-height: 1em; text-transform: uppercase; }
.scheda p { margin: 14px 18%; font-style: italic; color: var(--grigio-scritte); line-height: 1.35em; font-size: 17px; }
.scheda:hover .etichetta { text-decoration: underline; }

/* sezione 7: modulo a frase */
.sezione_7 { padding: 80px 0px 70px; }
.frase { width: 66%; margin: 50px auto 0px; font-size: 26px; line-height: 2.2em; text-align: left; }
.frase label { display: inline; }
.frase select, .frase input[type=text], .frase input[type=email], .frase input[type=tel] {
	font-family: var(--testo);
	font-size: 24px;
	color: var(--petrolio);
	border: 0;
	border-bottom: 1px solid var(--petrolio);
	background: transparent;
	padding: 0px 4px 2px;
	margin: 0px 4px;
	border-radius: 0px;
	-webkit-appearance: none;
	appearance: none;
}
.frase input[type=text] { width: 260px; }
.frase input[type=email] { width: 330px; }
.frase input[type=tel] { width: 210px; }
.frase select { padding-right: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23004a5a'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; }
.frase input:focus, .frase select:focus { outline: 2px solid var(--petrolio); outline-offset: 2px; }
.frase [aria-invalid=true] { border-bottom-color: #A3261B; }
.errore_sotto { display: block; font-size: 15px; line-height: 1.4; color: #A3261B; min-height: 0; font-style: italic; }
.errori { width: 66%; margin: 16px auto 0px; }
.consenso { display: flex; gap: 12px; width: 66%; margin: 26px auto 0px; font-size: 16px; line-height: 1.5em; }
.consenso input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 18px; accent-color: var(--petrolio); }
.invio { width: 66%; margin: 30px auto 0px; }
.invio .pillola { font-size: 20px; padding: 10px 26px; }
.invio .pillola[disabled] { opacity: .55; cursor: wait; }
.esito { width: 66%; margin: 0px auto 30px; padding: 20px 24px; background: var(--petrolio); color: var(--carta); line-height: 1.5em; }
.esito.da_rivedere { background: #FFF4F2; color: #7B1D14; border: 1px solid #A3261B; }
.fuori { position: absolute; left: -5000px; }

/* sezione 8: domande in tabella */
.sezione_8 { padding: 70px 0px 80px; }
.tabella_domande { width: 74%; margin: 50px auto 0px; border-collapse: collapse; }
.tabella_domande th, .tabella_domande td { text-align: left; vertical-align: top; padding: 20px 18px; border-top: 1px solid rgba(0, 74, 90, .3); }
.tabella_domande th { width: 34%; font-family: var(--titoli); font-weight: 400; font-size: 22px; line-height: 1.2em; }
.tabella_domande td { line-height: 1.6em; color: #2B4B5A; }

/* sezione 9: foto larga con cornice */
.sezione_9 { position: relative; height: 560px; overflow: hidden; }
.sezione_9 img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.cornice_box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 7px solid var(--petrolio); background: rgba(0, 39, 48, .5); color: var(--carta); text-align: center; padding: 18px 40px; min-width: 280px; }
.cornice_box b { display: block; font-family: var(--titoli); font-weight: 400; font-size: 43px; line-height: 1em; text-transform: uppercase; }
.cornice_box span { display: block; font-size: 20px; margin-top: 6px; }

/* le altre pagine */
.testa_interna { padding: 120px 0px 40px; text-align: center; }
.testa_interna h1 { font-family: var(--titoli); font-weight: 400; font-size: 50px; line-height: 1.05em; text-transform: uppercase; color: #2B4B5A; max-width: 900px; margin: 0px auto; }
.testa_interna h1:after { content: ""; display: block; width: 250px; height: 1px; background: var(--petrolio); margin: 28px auto 0px; }
.testa_interna p { width: 52%; margin: 34px auto 0px; text-align: left; }
.corpo_interno { width: 52%; margin: 0px auto; padding-bottom: 70px; }
.corpo_interno h2 { font-family: var(--titoli); font-weight: 400; font-size: 32px; line-height: 1.1em; margin-top: 56px; }
.corpo_interno p, .corpo_interno ul, .corpo_interno ol, .corpo_interno table { margin-top: 18px; }
.corpo_interno ul li { padding-left: 22px; position: relative; }
.corpo_interno ul li:before { content: "–"; position: absolute; left: 0px; }
.corpo_interno .foto_inserto { margin: 40px -18% 0px; }
.corpo_interno .foto_inserto img { width: 100%; height: 420px; object-fit: cover; }
.tabella_dati { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5em; }
.tabella_dati th, .tabella_dati td { border-bottom: 1px solid rgba(0, 74, 90, .3); padding: 10px 12px 10px 0px; text-align: left; vertical-align: top; }
.tabella_dati th { font-weight: 700; }
.tabella_dati .coppia td { background: #EEF5F6; }
.scorri { overflow-x: auto; }
.legale { width: 60%; margin: 0px auto; padding-bottom: 80px; line-height: 1.7em; }
.legale h2 { font-family: var(--titoli); font-weight: 400; font-size: 26px; line-height: 1.15em; margin-top: 40px; }
.legale p, .legale ul { margin-top: 14px; }
.legale li { padding-left: 18px; position: relative; margin-top: 6px; }
.legale li:before { content: "·"; position: absolute; left: 4px; }

/* piede */
.closing { margin-top: 50px; background: var(--petrolio-notte); color: #8FA8AE; text-align: center; padding: 110px 30px 80px; }
.closing .emblema img { width: 300px; margin: 0px auto; opacity: .7; filter: brightness(1.9) saturate(.4); }
.closing nav { margin-top: 60px; font-family: var(--titoli); font-size: 18px; }
.closing nav a { text-decoration: none; display: inline-block; padding: 6px 2px; }
.closing nav a:hover { color: var(--carta); }
.closing nav span { margin: 0px 9px; opacity: .6; }
.closing .righe_piccole { margin-top: 50px; font-size: 14px; line-height: 1.8em; }
.closing .righe_piccole a { text-decoration: none; }
.closing .righe_piccole button { background: none; border: 0; color: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; padding: 4px; }

/* scheda dei cookie, in un angolo */
.angolo_cookie { position: fixed; right: 20px; bottom: 20px; z-index: 9999; width: 330px; background: var(--carta); border: 1px solid var(--petrolio); padding: 22px 22px 18px; font-size: 15px; line-height: 1.5em; box-shadow: 0 10px 30px rgba(0, 39, 48, .18); }
.angolo_cookie b { display: block; font-family: var(--titoli); font-weight: 400; font-size: 20px; margin-bottom: 6px; }
.angolo_cookie .bottoni { display: flex; gap: 8px; margin-top: 14px; }
.angolo_cookie .pillola { font-size: 15px; padding: 6px 14px; }
.angolo_cookie .pillola.piena { background: var(--petrolio); color: var(--carta); border-color: var(--petrolio); }

a:focus-visible, button:focus-visible { outline: 2px solid var(--petrolio); outline-offset: 3px; }

@media (max-width: 980px) {
	body { --cornice: 14px; font-size: 17px; }
	.titolo_sezione, .testa_interna h1 { font-size: 38px; }
	.testo_centro, .frase, .consenso, .invio, .errori, .esito, .corpo_interno, .legale, .testa_interna p { width: 80%; }
	.sezione_2 { width: 86%; }
	.sezione_3, .sezione_4 { width: 92%; }
	.sezione_5 .testo_scuro { padding: 70px 40px; }
	.velo_testo { left: 40%; width: 56%; padding: 34px; }
	.schede { margin: 40px 3% 0px; }
	.tabella_domande { width: 90%; }
}
@media (max-width: 767px) {
	.titolo_sezione, .testa_interna h1 { font-size: 30px; }
	.sezione_0 { height: 80vh; min-height: 480px; }
	.sezione_0 .marchio h1 { font-size: 20px; }
	.sezione_0 .marchio .firma, .firma { font-size: 40px; }
	.testo_centro, .frase, .consenso, .invio, .errori, .esito, .corpo_interno, .legale, .testa_interna p { width: 90%; }
	.sezione_2 { flex-direction: column; width: 100%; }
	.sezione_3 .foto_grande, .sezione_3 .nome { width: 100%; }
	.sezione_3 .foto_grande img { height: 340px; }
	.sezione_3 .foto_piccola { position: static; width: 70%; margin: -60px 0px 0px auto; }
	.sezione_3 .foto_piccola img { height: 260px; }
	.sezione_3 .testo_centro { margin-top: 40px; }
	.sezione_4 { width: 100%; margin-bottom: 60px; }
	.sezione_4 img { width: 100%; height: 340px; }
	.velo_testo { position: relative; left: 0px; top: 0px; width: 92%; margin: -80px auto 0px; padding: 28px 24px; }
	.velo_testo h2, .titolo_modulo, .sezione_5 .testo_scuro h2, .sezione_3 .nome h2, .cornice_box b { font-size: 30px; }
	.sezione_5 { flex-direction: column; }
	.sezione_5 .testo_scuro { padding: 60px 24px; }
	.sezione_5 img { min-height: 300px; height: 300px; }
	.schede { flex-direction: column; row-gap: 40px; }
	.frase { font-size: 21px; line-height: 2.1em; }
	.frase select, .frase input[type=text], .frase input[type=email], .frase input[type=tel] { font-size: 19px; max-width: 100%; }
	.frase input[type=text], .frase input[type=email], .frase input[type=tel] { width: 100%; margin: 0px; }
	.tabella_domande, .tabella_domande tbody, .tabella_domande tr, .tabella_domande th, .tabella_domande td { display: block; width: 100%; }
	.tabella_domande th { border-top: 1px solid rgba(0, 74, 90, .3); padding-bottom: 6px; }
	.tabella_domande td { border-top: 0px; padding-top: 0px; }
	.sezione_9 { height: 380px; }
	.corpo_interno .foto_inserto { margin: 30px 0px 0px; }
	.corpo_interno .foto_inserto img { height: 260px; }
	.closing nav span { display: none; }
	.closing nav a { display: block; }
	.angolo_cookie { left: 10px; right: 10px; bottom: 10px; width: auto; }
}
@media (max-width: 479px) {
	.upperline .pillola { font-size: 14px; padding: 6px 12px; }
	.cornice_box { min-width: 0; width: 80%; padding: 14px 18px; }
}

.kicker { text-align: center; font-style: italic; font-size: 19px; margin-bottom: 10px; }
.sezione_0 { height: calc(100dvh - 2 * var(--cornice)); }
.titolo_sezione, .testa_interna h1 { font-size: clamp(30px, 4vw, 50px); text-wrap: balance; }
.testo_centro p, .corpo_interno p { text-wrap: pretty; }
.scheda img { aspect-ratio: 720 / 572; }
.sezione_3 .foto_grande img { aspect-ratio: 1100 / 760; }
@media (prefers-reduced-motion: reduce) {
	.tendina, .pillola { transition: none; }
}
.scheda .etichetta { margin-top: -56px; }
.errore_sotto:empty { display: none; }
.legale,.corpo_interno,.testa_interna p{width:auto;margin-left:6%;margin-right:6%}
.testa_interna h1{max-width:none}
.corpo_interno .foto_inserto{margin-left:0px;margin-right:0px}
@media (max-width:767px){.legale,.corpo_interno,.testa_interna p{margin-left:5%;margin-right:5%}}

/* anno dei pagamenti */
.sezione_anno { padding: 70px 0px 60px; }
.anno { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; width: 82%; margin: 34px auto 0px; }
.anno__mese { position: relative; min-height: 86px; padding: 12px 4px; border: 1px solid var(--petrolio); background: var(--carta); color: var(--petrolio); font-family: var(--titoli); font-size: 0.938rem; text-transform: uppercase; cursor: pointer; }
.anno__mese span { display: block; margin-bottom: 10px; }
.anno__mese--vuoto { border-color: #C9D6D9; color: #8AA3A9; cursor: default; }
.anno__mese.attivo { background: var(--petrolio); color: var(--carta); }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0px 2px; }
.punto--btp { background: #C58B2A; }
.punto--etf { background: #3F8F7C; }
.punto--azione { background: #A24A3B; }
.anno__nota { width: 66.6%; margin: 26px auto 0px; text-align: center; font-size: 1.188rem; line-height: 1.5; min-height: 3em; }
.anno__legenda { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-top: 18px; padding: 0px; list-style: none; font-size: 0.938rem; color: var(--grigio-scritte); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* la sera in Via Malaspina */
.sezione_sera { display: flex; gap: 6%; align-items: center; width: 82%; margin: 40px auto 90px; }
.sezione_sera__foto { flex: 0 0 55%; }
.sezione_sera__foto img { width: 100%; height: 520px; object-fit: cover; }
.sezione_sera__testo h2 { font-family: var(--titoli); font-weight: 400; font-size: 2.25rem; line-height: 1.1; margin-top: 6px; }
.sezione_sera__testo p { margin-top: 16px; font-size: 1.125rem; line-height: 1.55; }

/* domande in elenco */
.elenco_domande { width: 66.6%; margin: 30px auto 0px; }
.elenco_domande div { padding: 18px 0px; border-top: 1px solid var(--petrolio); }
.elenco_domande dt { font-family: var(--titoli); font-size: 1.375rem; }
.elenco_domande dd { margin: 6px 0px 0px; font-size: 1.125rem; line-height: 1.5; }

/* avvisi raccontati */
.casi_avvisi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.caso_avviso { border: 1px solid #C9D6D9; padding: 16px 18px; }
.caso_avviso--attenzione { background: #EEF4F5; border-color: var(--petrolio); }
.caso_avviso p { margin-top: 6px; }

@media (max-width: 768px) {
	.anno { width: 100%; grid-template-columns: repeat(6, 1fr); }
	.anno__nota, .elenco_domande { width: 100%; }
	.sezione_sera { display: block; width: 100%; }
	.sezione_sera__foto img { height: 300px; }
	.sezione_sera__testo { margin-top: 20px; }
	.casi_avvisi { grid-template-columns: 1fr; }
}

/* tre segnali */
.sezione_segnali { background: var(--petrolio); color: #FFF; padding: 70px 0px; }
.sezione_segnali .titolo_sezione { color: #FFF; }
.segnali { list-style: none; width: 83.3%; margin: 36px auto 0px; padding: 0px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.segnali li { text-align: center; }
.segnali svg { width: 56px; height: 56px; }
.segnali b { display: block; margin-top: 14px; font-family: var(--titoli); font-weight: 400; font-size: 1.375rem; }
.segnali span { display: block; margin-top: 8px; font-size: 1.0625rem; line-height: 1.5; }
.segnali_nota { width: 66.6%; margin: 36px auto 0px; text-align: center; font-style: italic; }

@media (max-width: 768px) {
	.segnali { width: 100%; padding: 0px 20px; grid-template-columns: 1fr; gap: 30px; }
	.segnali_nota { width: 100%; padding: 0px 20px; }
}