@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&display=swap");

/* Base */
body { margin: 0; background: var(--carta); color: var(--blu-notte); font-family: var(--font-testo); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
.zia-pagina { padding: var(--space-8); }
.zia-fila { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fuoco); outline-offset: 2px; }

/* Voci tipografiche comuni */
.zia-occhiello { margin: 0; font-family: var(--font-testo); font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: 0.16em; color: var(--inchiostro-tenue); }
.zia-numero-giorno { font-family: var(--font-titoli); font-style: italic; font-weight: 400; line-height: 1; color: var(--terra); }
.zia-titolo-sezione { margin: 0 0 var(--space-6); font-family: var(--font-titoli); font-size: 46px; line-height: 1.02; font-weight: 400; letter-spacing: -0.01em; color: var(--blu-zia); }
.zia-titolo-sezione em { font-style: italic; }

/* Testata */
.zia-testata { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-4) var(--space-8); }
.zia-testata__logo { height: 56px; width: auto; }
.zia-testata__menu { display: flex; gap: var(--space-8); }
.zia-testata__voce { font-family: var(--font-testo); font-size: 15px; line-height: 1.3; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; color: var(--blu-zia); padding: var(--space-1) 0; border-bottom: 2px solid transparent; }
.zia-testata__voce:hover, .zia-testata__voce.is-attiva { border-bottom-color: var(--zafferano); }
.zia-testata--su-foto .zia-testata__voce { color: var(--bianco); }
.zia-testata--su-foto :focus-visible { outline-color: var(--zafferano); }

/* Bollino in viaggio ora */
.zia-bollino { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 14px 6px 10px; border-radius: var(--radius-pill); background: var(--zafferano); color: var(--blu-notte); font-family: var(--font-testo); font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: 0.08em; }
.zia-bollino__punto { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--blu-notte); }

/* Bottone */
.zia-bottone { display: inline-flex; align-items: center; gap: var(--space-2); height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-pill); font-family: var(--font-testo); font-size: 15px; line-height: 1.3; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; border: 1.5px solid var(--blu-zia); transition: background-color 200ms, color 200ms; }
.zia-bottone--pieno { background: var(--blu-zia); color: var(--bianco); }
.zia-bottone--pieno:hover { background: var(--blu-notte); border-color: var(--blu-notte); }
.zia-bottone--linea { background: transparent; color: var(--blu-zia); }
.zia-bottone--linea:hover { background: var(--carta-2); }
.zia-bottone--zafferano { background: var(--zafferano); border-color: var(--zafferano); color: var(--blu-notte); }
.zia-bottone--zafferano:hover { background: var(--zafferano-chiaro); border-color: var(--zafferano-chiaro); }
.zia-bottone--zafferano:focus-visible { outline-color: var(--zafferano); }

/* Hero con foto */
.zia-hero { position: relative; min-height: max(100vh, 560px); padding-top: 112px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: var(--bianco); background: var(--blu-notte); }
.zia-hero--media { min-height: max(72vh, 560px); }
.zia-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zia-hero__velo { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(9, 30, 46, 0.4) 0%, rgba(9, 30, 46, 0) 24%, rgba(9, 30, 46, 0) 36%, var(--velo) 62%, var(--velo-forte) 100%); }
.zia-hero__testata { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
.zia-hero__testo { position: relative; z-index: 1; max-width: 1100px; padding: 0 var(--space-8) var(--space-16); }
.zia-hero__marchio { width: min(440px, 70vw); height: auto; margin-bottom: var(--space-8); }
.zia-hero__bollino { margin-bottom: var(--space-6); }
.zia-hero__occhiello { color: var(--bianco); margin-bottom: var(--space-4); }
.zia-hero__titolo { margin: 0; font-family: var(--font-titoli); font-size: 128px; line-height: 0.92; font-weight: 400; letter-spacing: -0.02em; text-wrap: balance; }
.zia-hero__accento { font-style: italic; color: var(--zafferano); }
.zia-hero__sottotitolo { margin: var(--space-6) 0 0; max-width: 32em; font-family: var(--font-testo); font-size: 21px; line-height: 1.5; font-weight: 400; }
.zia-hero__azioni { margin-top: var(--space-8); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.zia-hero :focus-visible { outline-color: var(--zafferano); }
.zia-hero__credito { position: absolute; right: var(--space-4); bottom: var(--space-3); margin: 0; z-index: 1; font-size: 12px; font-style: italic; opacity: 0.85; }
@media (max-width: 720px) {
  .zia-hero__titolo { font-size: 64px; }
  .zia-hero__testo { padding: 0 var(--space-4) var(--space-12); }
  .zia-hero__sottotitolo { font-size: 18px; }
}

/* Card progetto */
.zia-card-progetto { display: block; text-decoration: none; color: var(--blu-notte); padding-bottom: var(--space-4); border-bottom: 1px solid var(--linea); }
.zia-card-progetto__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-s); margin-bottom: var(--space-4); background: var(--carta-2); }
.zia-card-progetto__foto img { width: 100%; height: 100%; object-fit: cover; transition: filter 200ms; }
.zia-card-progetto:hover .zia-card-progetto__foto img { filter: brightness(0.85); }
.zia-card-progetto__bollino { position: absolute; top: var(--space-3); left: var(--space-3); }
.zia-card-progetto__titolo { margin: var(--space-2) 0 var(--space-2); font-family: var(--font-titoli); font-size: 34px; line-height: 1.02; font-weight: 400; letter-spacing: -0.01em; color: var(--blu-zia); }
.zia-card-progetto:hover .zia-card-progetto__titolo { text-decoration: underline; text-decoration-color: var(--zafferano); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.zia-card-progetto__meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: 14px; line-height: 1.45; color: var(--inchiostro-tenue); }

/* Percorso progetto › tappa */
.zia-percorso { margin: 0; font-family: var(--font-testo); font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: 0.12em; color: var(--inchiostro-tenue); }
.zia-percorso__tappa { color: var(--terra); }

/* Card giorno */
.zia-card-giorno { display: grid; grid-template-columns: 1fr; gap: var(--space-4); text-decoration: none; color: var(--blu-notte); }
.zia-card-giorno--grande { grid-template-columns: 1.3fr 1fr; gap: var(--space-8); align-items: center; }
.zia-card-giorno__foto { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-s); background: var(--carta-2); }
.zia-card-giorno__foto img { width: 100%; height: 100%; object-fit: cover; transition: filter 200ms; }
.zia-card-giorno:hover .zia-card-giorno__foto img { filter: brightness(0.85); }
.zia-card-giorno__riga { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.zia-card-giorno__numero { font-size: 28px; }
.zia-card-giorno__data { font-size: 14px; font-style: italic; color: var(--inchiostro-tenue); }
.zia-card-giorno__titolo { margin: var(--space-2) 0 0; font-family: var(--font-titoli); font-size: 30px; line-height: 1.08; font-weight: 400; color: var(--blu-zia); }
.zia-card-giorno--grande .zia-card-giorno__titolo { font-size: 52px; line-height: 1; letter-spacing: -0.015em; }
.zia-card-giorno:hover .zia-card-giorno__titolo { text-decoration: underline; text-decoration-color: var(--zafferano); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.zia-card-giorno__estratto { margin: var(--space-3) 0 0; font-size: 16px; line-height: 1.65; }
@media (max-width: 720px) { .zia-card-giorno--grande { grid-template-columns: 1fr; gap: var(--space-4); } .zia-card-giorno--grande .zia-card-giorno__titolo { font-size: 38px; } }

/* Bollino video */
.zia-video { position: absolute; left: var(--space-3); bottom: var(--space-3); padding: 4px 12px; border-radius: var(--radius-pill); background: var(--terra); color: var(--bianco); font-family: var(--font-testo); font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: 0.08em; }
.zia-video--piccolo { position: static; padding: 2px 8px; font-size: 11px; }

/* Intestazione del giorno (articolo) */
.zia-intestazione-giorno { max-width: 860px; }
.zia-intestazione-giorno__riga { display: flex; align-items: baseline; gap: var(--space-4); margin: var(--space-6) 0 var(--space-2); }
.zia-intestazione-giorno__numero { font-size: 40px; }
.zia-intestazione-giorno__data { font-size: 15px; font-style: italic; color: var(--inchiostro-tenue); }
.zia-intestazione-giorno__titolo { margin: 0; font-family: var(--font-titoli); font-size: 72px; line-height: 0.98; font-weight: 400; letter-spacing: -0.015em; color: var(--blu-zia); text-wrap: balance; }
.zia-intestazione-giorno__attacco { margin: var(--space-6) 0 0; max-width: 32em; font-size: 21px; line-height: 1.5; }
@media (max-width: 720px) { .zia-intestazione-giorno__titolo { font-size: 46px; } }

/* Tappe del progetto */
.zia-tappe { list-style: none; margin: 0; padding: 0; }
.zia-tappa { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-6); position: relative; padding-bottom: var(--space-12); }
.zia-tappa:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; border-left: 1.5px dashed var(--terra); }
.zia-tappa__segno { width: 56px; height: 56px; border-radius: var(--radius-pill); background: var(--blu-zia); color: var(--zafferano); display: grid; place-items: center; font-family: var(--font-titoli); font-style: italic; font-size: 30px; font-weight: 400; line-height: 1; }
.zia-tappa__occhiello { color: var(--terra); margin-top: var(--space-2); }
.zia-tappa__nome { margin: var(--space-2) 0 0; font-family: var(--font-titoli); font-size: 46px; line-height: 1.02; font-weight: 400; letter-spacing: -0.01em; color: var(--blu-zia); }
.zia-tappa__descrizione { margin: var(--space-3) 0 0; max-width: 36em; }
.zia-tappa__giorni { list-style: none; margin: var(--space-4) 0 0; padding: 0; border-top: 1px solid var(--linea); }
.zia-tappa__giorno { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--linea); text-decoration: none; }
.zia-tappa__numero { flex: 0 0 auto; min-width: 96px; font-size: 24px; }
.zia-tappa__titolo-giorno { flex: 1; font-family: var(--font-testo); font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--blu-notte); }
.zia-tappa__giorno:hover .zia-tappa__titolo-giorno { text-decoration: underline; text-decoration-color: var(--zafferano); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.zia-tappa__vuota { margin: var(--space-3) 0 0; font-size: 14px; font-style: italic; color: var(--inchiostro-tenue); }

/* Tag di raccolta */
.zia-raccolte { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.zia-tag { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: transparent; color: var(--blu-zia); font-family: var(--font-testo); font-size: 15px; line-height: 1.3; font-weight: 500; text-decoration: none; border: 1.5px solid var(--blu-zia); }
.zia-tag:hover { background: var(--zafferano-chiaro); }
.zia-tag.is-attivo { background: var(--blu-zia); color: var(--bianco); }
.zia-tag__conteggio { font-size: 12px; font-weight: 600; opacity: 0.75; }

/* Griglia di foto */
.zia-griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-6); }
.zia-griglia__voce--larga { grid-column: span 2; }
.zia-griglia figure { margin: 0; }
.zia-griglia__cornice { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-s); background: var(--carta-2); }
.zia-griglia__voce--larga .zia-griglia__cornice { aspect-ratio: auto; height: 100%; min-height: 100%; }
.zia-griglia__cornice img { width: 100%; height: 100%; object-fit: cover; }
.zia-griglia__didascalia { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); font-size: 14px; line-height: 1.45; font-style: italic; color: var(--inchiostro-tenue); }
.zia-griglia__raccolte { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--terra); }

/* Consiglio */
.zia-consiglio { position: relative; background: var(--zafferano-chiaro); border-radius: var(--radius-m); padding: var(--space-6); color: var(--blu-notte); }
.zia-consiglio__nota { margin: 0 0 var(--space-2); font-family: var(--font-testo); font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: 0.16em; color: var(--terra); }
.zia-consiglio__titolo { margin: 0 0 var(--space-3); font-family: var(--font-titoli); font-size: 30px; line-height: 1.1; font-weight: 400; color: var(--blu-zia); }
.zia-consiglio__testo { font-size: 16px; line-height: 1.65; }
.zia-consiglio__testo p { margin: 0 0 var(--space-2); }
.zia-consiglio__testo p:last-child { margin-bottom: 0; }

/* FAQ */
.zia-faq { border-top: 1.5px solid var(--blu-zia); }
.zia-faq__voce { border-bottom: 1px solid var(--linea); }
.zia-faq__domanda { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; font-family: var(--font-titoli); font-size: 26px; line-height: 1.2; font-weight: 400; color: var(--blu-zia); }
.zia-faq__domanda::-webkit-details-marker { display: none; }
.zia-faq__domanda::after { content: "+"; flex: 0 0 auto; font-family: var(--font-testo); font-size: 24px; line-height: 1; font-weight: 400; color: var(--terra); }
.zia-faq__voce[open] .zia-faq__domanda::after { content: "–"; }
.zia-faq__risposta { padding: 0 0 var(--space-6); max-width: 40em; font-size: 16px; line-height: 1.65; }

/* Piede con foto */
.zia-piede { position: relative; overflow: hidden; color: var(--bianco); background: var(--blu-notte); }
.zia-piede__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zia-piede__velo { position: absolute; inset: 0; background: var(--velo-forte); }
.zia-piede__dentro { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: var(--space-12); align-items: end; padding: var(--space-16) var(--space-8) var(--space-8); }
.zia-piede__marchio { width: 260px; height: auto; }
.zia-piede__frase { margin: var(--space-6) 0 0; max-width: 24em; font-family: var(--font-titoli); font-style: italic; font-size: 30px; line-height: 1.15; }
.zia-piede__menu { display: flex; flex-direction: column; gap: var(--space-2); text-align: right; }
.zia-piede__voce { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--bianco); }
.zia-piede__voce:hover { text-decoration: underline; text-decoration-color: var(--zafferano); text-underline-offset: 4px; }
.zia-piede__nota { position: relative; z-index: 1; margin: 0; padding: var(--space-4) var(--space-8); border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 13px; line-height: 1.4; }
.zia-piede :focus-visible { outline-color: var(--zafferano); }
@media (max-width: 720px) { .zia-piede__dentro { grid-template-columns: 1fr; padding: var(--space-12) var(--space-4) var(--space-6); } .zia-piede__menu { text-align: left; } .zia-piede__nota { padding: var(--space-4); } }