/* =========================================================
   Fiume di Vita — foglio di stile principale

   Indice
     1. Font                 6. Componenti
     2. Token                7. Sezioni della home
     3. Palette alternative  8. Pagine interne (ministeri, predicazioni, eventi, articoli)
     4. Base                 9. Pagina articolo ("lettura")
     5. Layout              10. Pagina brand · Utilità · 11. Movimento ridotto
                            12. Stile del sito (classe .stile-nuovo, sempre attiva)

   Breakpoint (max-width salvo dove indicato):
     480 telefono piccolo · 640 telefono · 700 tablet stretto
     880 tablet (colonne affiancate da 881) · 1020 menu a scomparsa (menu completo da 1021)

   ========================================================= */

/* ---------- 1. Font (ospitati sul sito, solo caratteri latini) ----------
   Variabili: un file per famiglia copre tutti i pesi. I font "Fallback" sono Arial/Georgia
   ridimensionati sulle metriche dei font veri, così il testo non salta quando arrivano. */
@font-face { font-family: "Outfit"; src: url("../assets/fonts/outfit.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../assets/fonts/work-sans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Outfit Fallback"; src: local("Arial"); font-weight: 100 500; size-adjust: 97.26%; ascent-override: 102.82%; descent-override: 26.73%; line-gap-override: 0%; }
@font-face { font-family: "Outfit Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 900; size-adjust: 94.07%; ascent-override: 106.3%; descent-override: 27.64%; line-gap-override: 0%; }
@font-face { font-family: "Work Sans Fallback"; src: local("Arial"); size-adjust: 109.5%; ascent-override: 84.93%; descent-override: 22.19%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); font-style: normal; size-adjust: 104.87%; ascent-override: 93.26%; descent-override: 24.31%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia Italic"), local("Georgia-Italic"); font-style: italic; size-adjust: 95.25%; ascent-override: 102.67%; descent-override: 26.77%; line-gap-override: 0%; }

/* ---------- 2. Token ---------- */
:root {
  /* Colori — Palette A "Fiume" */
  --c-primary: #0E5A73;        /* blu fiume profondo */
  --c-primary-ink: #ffffff;
  --c-deep: #0A2E3D;           /* sezioni scure */
  --c-water: #3FB6B2;          /* acqua viva */
  --c-life: #7CC768;           /* verde vita (decorativo) */
  --c-sun: #F4B544;            /* sole — CTA */
  --c-sun-ink: #0A2E3D;
  --c-bg: #FBF7F0;             /* sabbia chiara */
  --c-surface: #ffffff;
  --c-tint: #EAF4F2;
  --c-ink: #12242C;
  --c-ink-soft: #1d2b31;       /* testo lungo dell'articolo */
  --c-muted: #4E6068;
  --c-line: #E3DDD2;           /* linee decorative */
  --c-control: #7F8E94;        /* bordi di campi e chip: contrasto ≥ 3:1 */
  --c-on-deep: #E7F0F2;        /* testo sulle sezioni scure */
  --c-on-deep-muted: #B9CDD3;  /* testo secondario sulle sezioni scure */
  --c-whatsapp: #168243;       /* verde WhatsApp scurito: icona bianca a 4,9:1 */
  --header-glass: rgb(251 247 240 / .92);

  /* Tipografia: tre famiglie; i titoli hanno la loro scala con clamp() in "Base" */
  --f-head: "Outfit", "Outfit Fallback", system-ui, sans-serif;
  --f-body: "Work Sans", "Work Sans Fallback", system-ui, sans-serif;
  --f-accent: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --fs-2xs: .75rem;    /* 12px: etichette maiuscole */
  --fs-xs: .8125rem;   /* 13px: meta, riferimenti */
  --fs-sm: .875rem;    /* 14px: note, chip piccoli */
  --fs-md: .95rem;     /* 15px: testo secondario */
  --fs-base: 1rem;     /* 16px */
  --fs-body: 1.0625rem;/* 17px: testo corrente */

  /* Spaziature */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Raggi, ombre, movimento */
  --r-xs: 4px;         /* focus, foto dell'articolo */
  /* una sola scala, niente pillole: comandi (pulsanti, chip, campi) 6px, etichette piccole 4px,
     schede e video 10px, pannelli grandi 16px; solo le cose davvero rotonde (icone, avatar, play) usano 50% */
  --r-sm: 6px; --r-icon: 8px; --r-md: 10px; --r-lg: 16px;
  --shadow-1: 0 1px 2px rgb(10 46 61 / .06), 0 4px 14px rgb(10 46 61 / .06);
  --shadow-2: 0 10px 40px rgb(10 46 61 / .14);
  --overlay-deep: 10 46 61;    /* RGB delle velature su foto */
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Layout */
  --container: 1200px;
  --header-h: 76px;

  /* Focus: scuro sugli sfondi chiari, giallo su quelli scuri (vedi sotto) */
  --focus: var(--c-deep);
}

/* ---------- 4. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--c-bg); color: var(--c-ink);
  font: 400 var(--fs-body)/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--c-primary); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--f-head); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 var(--s-4); color: var(--c-ink); text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.5vw, 5.4rem); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 750; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 650; letter-spacing: -.01em; }
p { margin: 0 0 var(--s-4); text-wrap: pretty; }
em.accent, .accent { font-family: var(--f-accent); font-style: italic; font-weight: 500; letter-spacing: -.01em; }
::selection { background: var(--c-sun); color: var(--c-sun-ink); }

/* anello di focus: contrasto almeno 3:1 su ogni sfondo */
.section--deep, .hero, .page-hero, .lx-band, .has-hero .site-header:not(.is-solid) { --focus: var(--c-sun); }
/* menu aperto: il pannello è sabbia, quindi anello scuro (vince sulla riga sopra, che vale per l'header sopra la foto) */
.nav-open .site-header, .nav-open.has-hero .site-header:not(.is-solid) { --focus: var(--c-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-xs); }
main:focus { outline: 0; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  background: var(--c-deep); color: #fff; padding: 12px 18px; border-radius: var(--r-sm);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 5. Layout ---------- */
.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
.container--narrow { max-width: 920px; }
/* margine sopra e sotto ogni sezione: tra due sezioni ~144px su PC, ~80px sul telefono (prima 256px: troppo vuoto) */
.section { padding-block: clamp(40px, 5vw, 72px); }
.section--tight { padding-block: clamp(32px, 4vw, 48px); }
.section--deep { background: var(--c-deep); color: var(--c-on-deep); }
.section--deep h2, .section--deep h3 { color: #fff; }
.section--tint { background: var(--c-tint); }
.section--white { background: var(--c-surface); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 var(--fs-xs)/1 var(--f-head); letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-primary); margin-bottom: var(--s-4);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.section--deep .eyebrow { color: var(--c-water); }
.eyebrow--sun { color: var(--c-sun); }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3rem); color: var(--c-muted); max-width: 62ch; }
.section--deep .lead { color: var(--c-on-deep-muted); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-5); margin-bottom: clamp(24px, 3vw, 40px); }   /* uguale in tutte le sezioni */
.section-head > div { max-width: 720px; }
.section-head p:last-child { margin-bottom: 0; }

.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split--top { align-items: start; }
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid > *, .featured > *, .split > *, .info-strip__card > * { min-width: 0; }
@media (max-width: 1020px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-4:has(> .person) { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
}
/* colonna che resta ferma accanto a contenuti lunghi: solo con le colonne affiancate */
@media (min-width: 881px) { .sticky-col { position: sticky; top: calc(var(--header-h) + 40px); } }


/* ---------- 6. Componenti ---------- */

/* Bottoni */
.btn {
  --btn-bg: var(--c-primary); --btn-ink: var(--c-primary-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--r-sm);
  background: var(--btn-bg); color: var(--btn-ink); border: 2px solid var(--btn-bg);
  font: 600 var(--fs-base)/1 var(--f-head); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--sun { --btn-bg: var(--c-sun); --btn-ink: var(--c-sun-ink); }
.btn--ghost { background: transparent; color: var(--btn-ink); --btn-ink: #fff; border-color: rgb(255 255 255 / .55); }
.btn--ghost:hover { background: rgb(255 255 255 / .12); }
.btn--outline { background: transparent; color: var(--c-primary); }
.btn--outline:hover { background: var(--c-primary); color: var(--c-primary-ink); }
.btn--light { --btn-bg: #fff; --btn-ink: var(--c-ink); border-color: var(--c-line); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font: 600 var(--fs-base)/1.2 var(--f-head);
  color: var(--c-primary); text-decoration: none; min-height: 44px;
}
.link-arrow svg { width: 18px; height: 18px; transition: transform .2s var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--deep .link-arrow { color: var(--c-sun); }

/* Chip, filtri e tab */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.chip { min-height: 44px; padding: 0 18px; border-radius: var(--r-sm); border: 1.5px solid var(--c-control); background: var(--c-surface); color: var(--c-ink); font: 600 var(--fs-md)/1 var(--f-head); cursor: pointer; transition: all .2s; }
.chip:hover { border-color: var(--c-primary); }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-ink); }
.chip--sm { min-height: 40px; padding: 0 14px; font-size: var(--fs-sm); }
.chip__count { font-size: var(--fs-md); font-weight: 700; min-width: 28px; height: 26px; padding: 0 7px; border-radius: var(--r-xs); display: inline-grid; place-items: center; background: var(--c-tint); color: var(--c-primary); }
.chip[aria-selected="true"] .chip__count { background: rgb(255 255 255 / .2); color: inherit; }
.tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; margin-inline: -2px; scroll-snap-type: x proximity; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .chip { flex: none; display: inline-flex; align-items: center; gap: 8px; scroll-snap-align: start; white-space: nowrap; }
.tabs[hidden] { display: none; }
@media (min-width: 881px) { .tabs { flex-wrap: wrap; overflow: visible; } }

/* Pulsante rotondo con icona */
.icon-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid currentColor; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; transition: background-color .2s, color .2s; }
.icon-btn:hover { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.section--deep .icon-btn:hover { background: #fff; color: var(--c-deep); border-color: #fff; }
.icon-btn svg { width: 20px; height: 20px; }

/* Header e navigazione */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color .3s, box-shadow .3s, color .3s;
  color: #fff;
}
/* il vetro sta su un livello a parte: un backdrop-filter sull'header intrappolerebbe il menu fisso del telefono */
.site-header::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: var(--header-glass); backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--c-line);
}
.site-header.is-solid, body:not(.has-hero) .site-header { color: var(--c-ink); }
.site-header.is-solid::after, body:not(.has-hero) .site-header::after { opacity: 1; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }

.brand { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-height: 44px; }
.brand__mark { display: inline-flex; flex: none; }
.brand__logo { height: 46px; width: auto; display: block; }
/* sui fondi scuri le linee del logo diventano bianche */
.brand__logo--chiaro,
.has-hero .site-header:not(.is-solid) .brand__logo, .logo-tile.dark .brand__logo { display: none; }
.has-hero .site-header:not(.is-solid) .brand__logo--chiaro, .logo-tile.dark .brand__logo--chiaro { display: block; }
.brand-word { font: 700 1.35rem/1 var(--f-head); letter-spacing: -.03em; white-space: nowrap; }
.brand-word i { font: italic 400 1.2rem/1 var(--f-accent); margin: 0 .18em; opacity: .85; }

.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-sm);
  color: inherit; text-decoration: none; font: 500 var(--fs-base)/1 var(--f-head);
  transition: background-color .2s;
}
.nav-list a:hover { background: rgb(127 127 127 / .14); }
.nav-list a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -2px 0 var(--c-sun); border-radius: 0; }
.nav-cta { margin-left: 8px; }
.nav-cta .btn { min-height: 44px; padding: 10px 20px; }

.nav-toggle {
  display: none; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle svg { width: 26px; height: 26px; }
.nav-toggle__close, .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.nav-desc, .nav-extra { display: none; }

/* Telefono e tablet: pannello chiaro da destra, la pagina resta visibile dietro un velo */
@media (max-width: 1020px) {
  .nav-toggle { display: inline-flex; position: relative; z-index: 5; }
  .site-header::before {
    content: ""; position: fixed; inset: 0; z-index: 3; background: rgb(10 46 61 / .28);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .site-nav {
    position: fixed; inset: 0 0 0 auto; z-index: 4; width: min(86vw, 400px);
    display: flex; flex-direction: column; gap: var(--s-5);
    background: var(--c-bg); color: var(--c-ink); box-shadow: -12px 0 40px rgb(10 46 61 / .12);
    padding: calc(var(--header-h) + 4px) var(--s-5) max(var(--s-5), env(safe-area-inset-bottom)); overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    transition: transform .38s var(--ease-out), visibility .38s;
  }
  .site-nav.is-open { transform: none; visibility: visible; transition: transform .38s var(--ease-out), visibility 0s; }   /* visibile subito: il focus può entrare */
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header::before { opacity: 1; visibility: visible; }
  body.nav-open .nav-toggle { color: var(--c-ink); }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { opacity: 0; transform: translateX(14px); transition: opacity .3s, transform .4s var(--ease-out); }
  .site-nav.is-open .nav-list li { opacity: 1; transform: none; }
  .nav-list li:nth-child(2) { transition-delay: .03s; } .nav-list li:nth-child(3) { transition-delay: .06s; }
  .nav-list li:nth-child(4) { transition-delay: .09s; } .nav-list li:nth-child(5) { transition-delay: .12s; }
  .nav-list li:nth-child(6) { transition-delay: .15s; }
  .nav-list a {
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
    min-height: 60px; padding: 8px 12px; border-radius: var(--r-sm);
    font: 500 1.3rem/1.15 var(--f-head); letter-spacing: -.01em;
  }
  .nav-list a:hover { background: var(--c-tint); }
  .nav-desc { display: block; font: 400 var(--fs-sm)/1.3 var(--f-body); color: var(--c-muted); letter-spacing: 0; }
  /* pagina attuale: l'onda gialla del logo sotto il nome */
  .nav-list a[aria-current="page"] { box-shadow: none; border-radius: var(--r-sm); font-weight: 600; color: var(--c-primary); }
  .nav-list a[aria-current="page"] > span { position: relative; padding-bottom: 9px; }
  .nav-list a[aria-current="page"] > span::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 8px; background: var(--c-sun);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 8'%3E%3Cpath d='M1 4c3.5-3 7-3 10.5 0s7 3 10.5 0 7-3 10.5 0 7 3 10.5 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 8'%3E%3Cpath d='M1 4c3.5-3 7-3 10.5 0s7 3 10.5 0 7-3 10.5 0 7 3 10.5 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  }
  .nav-cta { display: none; }

  .nav-extra { display: flex; flex-direction: column; gap: var(--s-3); margin-top: auto; }
  .nav-sunday { background: var(--c-tint); border-radius: var(--r-md); padding: var(--s-4); }
  .nav-sunday p { margin: 0; }
  .nav-sunday__title { font: 600 var(--fs-base)/1.2 var(--f-head); }
  .nav-sunday__times { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); margin-top: 6px !important; font-size: var(--fs-md); color: var(--c-muted); }
  .nav-sunday__times span, .nav-sunday__map { display: inline-flex; align-items: center; gap: 6px; }
  .nav-sunday svg { width: 16px; height: 16px; color: var(--c-primary); flex: none; }
  .nav-sunday__map {
    margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid rgb(14 90 115 / .14); width: 100%; min-height: 44px;
    color: var(--c-ink); text-decoration: none; font-size: var(--fs-md);
  }
  .nav-sunday__map span { margin-left: auto; font: 600 var(--fs-sm)/1 var(--f-head); color: var(--c-primary); }
  .nav-contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
  .nav-contacts a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px;
    border: 1px solid var(--c-line); border-radius: var(--r-sm); background: var(--c-surface);
    color: var(--c-ink); text-decoration: none; font: 500 var(--fs-xs)/1 var(--f-head);
  }
  .nav-contacts svg { width: 20px; height: 20px; color: var(--c-primary); }
  .nav-extra__cta { width: 100%; min-height: 52px; }
}
@media (max-width: 1020px) and (prefers-reduced-motion: reduce) {
  .site-nav, .nav-list li, .site-header::before { transition: none; }
  .nav-list li { transform: none; }
}
.nav-list a.btn { color: var(--btn-ink); }   /* il CTA non eredita il bianco dell'header né il giallo della pagina attiva */

/* Hero della home */
.hero {
  --hero-zoom: 1;   /* niente zoom: ingrandire la foto la tagliava in alto e la sgranava */
  /* tutto lo schermo a ogni misura: con il tetto di 920px sugli schermi grandi si vedeva la sezione dopo */
  position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end;
  color: #fff; isolation: isolate; overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 76%;
  transform-origin: 50% 100%; transform: scale(calc(var(--hero-zoom) + .06)); animation: hero-zoom 14s var(--ease-out) forwards;
}
@keyframes hero-zoom { to { transform: scale(var(--hero-zoom)); } }
.hero::after {
  --hero-veil: .2;   /* velo uniforme blu scuro su tutta la foto: 0 = nessuno, .3 = foto già spenta */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgb(var(--overlay-deep) / var(--hero-veil)), rgb(var(--overlay-deep) / var(--hero-veil))),
    linear-gradient(180deg, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / 0) 18%),
    linear-gradient(90deg, rgb(8 16 20 / .62) 0%, rgb(8 16 20 / .28) 45%, rgb(8 16 20 / 0) 75%),
    linear-gradient(180deg, rgb(8 16 20 / 0) 55%, rgb(8 16 20 / .55) 100%);
}
.hero__content { padding-block: calc(var(--header-h) + 48px) clamp(56px, 9vw, 104px); }
/* larghezze dei titoli in em, non in ch: lo «0» di Outfit è molto più largo di quello del font di riserva (13ch = 8,72em) */
.hero h1 { color: #fff; max-width: 8.72em; margin-bottom: var(--s-5); }
.hero h1 .accent { color: var(--c-sun); font-weight: 400; }
.hero p { font-size: clamp(1.1rem, 1.8vw, 1.35rem); max-width: 28.61em; color: rgb(255 255 255 / .9); margin-bottom: var(--s-6); }
.hero .eyebrow, .page-hero .eyebrow, .hero p, .hero h1 { text-shadow: 0 1px 12px rgb(10 46 61 / .55); }
/* telefono: taglio verticale dedicato (niente zoom forte) e hero più basso per far vedere gli orari */
@media (max-width: 700px) {
  .hero { --hero-zoom: 1; min-height: min(80svh, 720px); }
  .hero__media img { object-position: 50% 100%; }
}

/* Intestazione delle pagine interne */
.page-hero {
  position: relative; color: #fff; isolation: isolate; overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(56px, 9vw, 120px)) clamp(48px, 7vw, 96px);
  background: var(--c-deep);
}
.page-hero--compact { padding-bottom: clamp(56px, 8vw, 104px); }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(8 16 20 / .72) 0%, rgb(8 16 20 / .4) 50%, rgb(8 16 20 / .1) 100%); }
.page-hero h1 { color: #fff; font-size: clamp(2.4rem, 5.5vw, 4.4rem); max-width: 10.74em; }
.page-hero .lead { color: rgb(255 255 255 / .88); }
.page-hero .eyebrow { color: var(--c-sun); }
.page-hero--art { background: linear-gradient(135deg, var(--c-primary), var(--c-deep)); }
.page-hero--art::after { display: none; }
/* telefono: il testo occupa tutta la larghezza, quindi il velo è uniforme e più deciso (testo bianco leggibile anche sulle parti chiare della foto) */
@media (max-width: 700px) { .page-hero::after { background: linear-gradient(180deg, rgb(8 16 20 / .5) 0%, rgb(8 16 20 / .62) 55%, rgb(8 16 20 / .72) 100%); } }
.page-hero__art { position: absolute; right: -4%; bottom: -18%; width: min(52vw, 520px); color: rgb(255 255 255 / .08); z-index: -1; }
.page-hero__art svg { width: 100%; height: auto; }

/* Briciole di pane sulle intestazioni */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 500 var(--fs-md)/1.2 var(--f-head); color: rgb(255 255 255 / .75); margin-bottom: var(--s-3); }
.crumbs a { color: #fff; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a:hover { text-decoration: underline; }

/* Striscia informazioni (orari, luogo) sotto l'hero */
.info-strip { position: relative; z-index: 2; margin-top: calc(-1 * clamp(36px, 5vw, 56px)); }
.info-strip__card {
  display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: var(--s-5); align-items: center;
  background: var(--c-surface); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6);
  box-shadow: var(--shadow-2);
}
.info-item { display: flex; gap: 14px; align-items: center; }
.info-item .ico { flex: none; width: 48px; height: 48px; border-radius: var(--r-icon); display: grid; place-items: center; background: var(--c-tint); color: var(--c-primary); }
.info-item .ico svg { width: 24px; height: 24px; }
.info-item strong { display: block; font: 650 var(--fs-body)/1.25 var(--f-head); }
.info-item span { color: var(--c-muted); font-size: var(--fs-md); }
@media (max-width: 880px) { .info-strip__card { grid-template-columns: 1fr; padding: var(--s-5); } .info-strip__card .btn { width: 100%; } }

/* Card con foto (ministeri) */
.card {
  position: relative; display: flex; flex-direction: column; background: var(--c-surface);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-tint); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.05); }
.card__media--art { display: grid; place-items: center; background: linear-gradient(135deg, var(--c-primary), var(--c-deep)); color: var(--c-sun); }
.card__media--art svg { width: 72px; height: 72px; }
.card__media--art.alt { background: linear-gradient(135deg, var(--c-water), var(--c-primary)); color: #fff; }
.card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__body p { color: var(--c-muted); margin: 0; }
.card__body > p:not(.card__when) { flex: 1; }
.card__meta { font: 600 var(--fs-xs)/1.2 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary); }
.card__when { margin-top: var(--s-3) !important; padding-top: var(--s-3); border-top: 1px solid var(--c-line); font-size: var(--fs-md); }
.card h3 { margin: 0; }
.card a.stretched { color: inherit; text-decoration: none; }
.card a.stretched::after { content: ""; position: absolute; inset: 0; }

/* Card a tutta immagine (ministeri nello scroller): tutte della stessa altezza */
.mcard { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3 / 4; color: #fff; isolation: isolate; display: flex; align-items: flex-end; text-decoration: none; background: var(--c-deep); }
.mcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .7s var(--ease-out); }
.mcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--overlay-deep) / 0) 25%, rgb(var(--overlay-deep) / .78) 58%, rgb(var(--overlay-deep) / .96) 100%); }
.mcard:hover img { transform: scale(1.06); }
.mcard__body { width: 100%; padding: var(--s-5); }
.mcard__body h3 { color: #fff; margin: 0 0 4px; font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard__body p { margin: 0; color: rgb(255 255 255 / .85); font-size: var(--fs-md); line-height: 1.45; min-height: calc(2 * 1.45em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard__tag { display: inline-block; font: 600 var(--fs-2xs)/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--c-sun); margin-bottom: 8px; white-space: nowrap; }
/* senza foto: gradiente e icona in alto */
.mcard--art { background: linear-gradient(160deg, var(--c-primary), var(--c-deep)); }
.mcard--art .mcard__body { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.mcard__icon { color: var(--c-sun); width: 56px; }

/* Scroller orizzontale con frecce */
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 22%); gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-4); scrollbar-width: thin; overscroll-behavior-x: contain; }
.scroller > * { scroll-snap-align: start; }
.scroller-controls { display: flex; gap: var(--s-2); }
@media (max-width: 640px) { .scroller { grid-auto-columns: 78%; } }

/* Video "lite": miniatura che diventa player al clic */
.yt {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--r-md); overflow: hidden; background: #000; color: #fff;
}
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out), opacity .3s; }
.yt:hover img { transform: scale(1.03); opacity: .85; }
.yt__play { position: absolute; inset: 0; display: grid; place-items: center; }
.yt__play span { width: 76px; height: 76px; border-radius: 50%; background: var(--c-sun); color: var(--c-sun-ink); display: grid; place-items: center; box-shadow: 0 8px 30px rgb(0 0 0 / .35); transition: transform .25s var(--ease-out); }
.yt:hover .yt__play span { transform: scale(1.08); }
.yt__play svg { width: 30px; height: 30px; margin-left: 4px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt--sm .yt__play span { width: 52px; height: 52px; }
.yt--sm .yt__play svg { width: 22px; height: 22px; }

/* Video in evidenza + testo */
.featured { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.section--deep .featured__desc, .featured__caption { color: var(--c-on-deep-muted); }
.featured__caption { margin: var(--s-4) 0 0; }
.featured__caption strong { color: #fff; font-family: var(--f-head); }
.series-chip { display: inline-flex; gap: 8px; align-items: center; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); border-radius: var(--r-xs); padding: 8px 14px; font: 600 var(--fs-md)/1 var(--f-head); color: #fff; margin-bottom: var(--s-4); }
.series-chip b { color: var(--c-sun); }
@media (max-width: 880px) { .featured { grid-template-columns: 1fr; } }

/* Scelta della lingua del video */
.video-langs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); color: var(--c-muted); font-size: var(--fs-md); }

/* Card predicazione */
.sermon { display: flex; flex-direction: column; gap: var(--s-3); }
.sermon h3 { font-size: 1.15rem; margin: 0; text-transform: none; }
.sermon .who { color: var(--c-muted); font-size: var(--fs-md); margin: 0; }
.sermon .ref { font: 600 var(--fs-xs)/1 var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); }
.section--deep .sermon .who { color: var(--c-on-deep-muted); }
.section--deep .sermon .ref { color: var(--c-water); }
.sermon__info { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }

/* Passi della prima domenica */
.steps { counter-reset: step; }
.step { position: relative; padding: var(--s-6); background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.step::before { counter-increment: step; content: "0" counter(step); display: block; font: 800 2.6rem/1 var(--f-head); color: var(--c-primary); margin-bottom: var(--s-4); letter-spacing: -.04em; }
.step p { color: var(--c-muted); margin: 0; }
.step .time { display: inline-block; font: 650 var(--fs-md)/1 var(--f-head); background: var(--c-tint); color: var(--c-primary); padding: 6px 10px; border-radius: var(--r-xs); margin-bottom: var(--s-3); }
/* telefono: orario e titolo sulla stessa riga, testo sotto, senza numeri grandi */
@media (max-width: 640px) {
  .steps { gap: var(--s-3); }
  .step { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); align-items: center; padding: var(--s-5) var(--s-4); }
  .step::before { display: none; }
  .step .time { margin: 0; white-space: nowrap; }
  .step h3 { margin: 0; font-size: 1.1rem; }
  .step p { grid-column: 1 / -1; margin-top: var(--s-2); }
}

/* Feature (icona + titolo + testo) */
.feature { padding: var(--s-6); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--shadow-1); }
.feature .ico { width: 56px; height: 56px; border-radius: var(--r-icon); display: grid; place-items: center; background: var(--c-tint); color: var(--c-primary); margin-bottom: var(--s-4); }
.feature .ico svg { width: 28px; height: 28px; }
.feature p { color: var(--c-muted); margin: 0; }
.section--deep .feature { background: rgb(255 255 255 / .06); box-shadow: none; border: 1px solid rgb(255 255 255 / .1); }
.section--deep .feature p { color: var(--c-on-deep-muted); }
.section--deep .feature .ico { background: rgb(255 255 255 / .1); color: var(--c-sun); }
/* in riga: icona, testo, pulsante */
.feature--row { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; }
.feature--row .ico { margin: 0; }
.feature--row h3 { margin-bottom: 4px; }
.feature__text { flex: 1; min-width: 220px; }

/* Barra di avanzamento */
.progress { margin: var(--s-5) 0 var(--s-6); }
.progress__bar { height: 10px; border-radius: var(--r-xs); background: rgb(255 255 255 / .2); overflow: hidden; }
.progress__bar span { display: block; height: 100%; width: var(--p, 40%); background: linear-gradient(90deg, var(--c-water), var(--c-sun)); border-radius: inherit; }
.progress__labels { display: flex; justify-content: space-between; font: 600 var(--fs-md)/1.4 var(--f-head); margin-top: 8px; color: rgb(255 255 255 / .8); gap: 8px; }

/* La nostra storia (Chi siamo)
   Un fiume (SVG disegnato da main.js) scende tra le tappe e si "riempie" mentre si scorre la pagina.
   Su PC: foto e testo si alternano ai lati del fiume. Sul telefono il fiume sta a sinistra. */
.section-head--storia { margin-bottom: var(--s-8); }
.storia-wrap { position: relative; --col: 120px; }
.storia { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: clamp(56px, 8vw, 112px); }
.storia__tappa { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--col) minmax(0, 1fr); align-items: center; }
.storia__testo { grid-column: 3; grid-row: 1; max-width: 30em; }
.storia__foto  { grid-column: 1; grid-row: 1; }
.storia__tappa--dx .storia__testo { grid-column: 1; justify-self: end; text-align: right; }
.storia__tappa--dx .storia__foto  { grid-column: 3; }
.storia__punto {
  grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1;
  width: 18px; height: 18px; border-radius: 50%; background: var(--c-bg); border: 2px solid var(--c-control);
  transition: background-color .5s, border-color .5s, box-shadow .5s, transform .5s var(--ease-out);
}
.storia__tappa.is-raggiunta .storia__punto { background: var(--c-water); border-color: var(--c-water); box-shadow: 0 0 0 7px rgb(63 182 178 / .16); transform: scale(1.1); }
.storia__tappa--oggi.is-raggiunta .storia__punto { background: var(--c-sun); border-color: var(--c-sun); box-shadow: 0 0 0 9px rgb(244 181 68 / .22); }
.storia__tappa--futuro .storia__punto { border-style: dashed; border-color: var(--c-sun); }
.storia__tappa--futuro.is-raggiunta .storia__punto { background: var(--c-bg); box-shadow: 0 0 0 7px rgb(244 181 68 / .14); }

.storia__quando { margin: 0 0 var(--s-2); font: italic 400 clamp(2rem, 4.2vw, 3.4rem)/1 var(--f-accent); letter-spacing: -.02em; color: var(--c-primary); }
.storia__tappa--oggi .storia__quando { color: var(--c-ink); }
.storia__testo h3 { margin: 0 0 var(--s-2); font-size: clamp(1.2rem, 2vw, 1.5rem); text-transform: none; }
.storia__testo > p:not(.storia__quando) { margin: 0; color: var(--c-muted); }
.storia__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-3); min-height: 44px; font: 600 var(--fs-md)/1 var(--f-head); color: var(--c-primary); text-decoration: none; }
.storia__link svg { width: 18px; height: 18px; }
.storia__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }

/* il fiume: base chiara, acqua che si riempie, ultimo tratto a puntini verso il futuro */
.storia__fiume { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.storia__fiume path { fill: none; stroke-linecap: round; }
.storia__fiume-base { stroke: var(--c-line); stroke-width: 2; }
.storia__fiume-acqua { stroke-width: 3.5; }
.storia__fiume-futuro { stroke: var(--c-sun); stroke-width: 3; stroke-dasharray: .1 10; opacity: .9; }
/* senza JavaScript: una linea dritta al posto del fiume */
html.no-js .storia::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--c-line); }

.storia__fine { margin: var(--s-6) auto 0; max-width: 26em; text-align: center; font: italic 400 clamp(1.25rem, 2.6vw, 1.7rem)/1.4 var(--f-accent); color: var(--c-ink-soft); }

@media (max-width: 760px) {
  .storia-wrap { --col: 40px; }
  .storia { gap: var(--s-8); }
  .storia__tappa, .storia__tappa--dx { grid-template-columns: var(--col) minmax(0, 1fr); align-items: start; row-gap: var(--s-4); }
  .storia__punto { grid-column: 1; grid-row: 1; margin-top: .55rem; }
  .storia__testo, .storia__tappa--dx .storia__testo { grid-column: 2; grid-row: 1; justify-self: start; text-align: left; }
  .storia__foto, .storia__tappa--dx .storia__foto { grid-column: 2; grid-row: 2; }
  .storia__foto img { border-radius: var(--r-md); }
  html.no-js .storia::before { left: 20px; }
  .storia__fine { margin-left: var(--col); text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .storia__punto { transition: none; } }

/* Timeline (diario del cantiere, come partecipare) */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--c-line); }
.timeline li { position: relative; padding-left: 48px; padding-bottom: var(--s-7); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-surface); border: 4px solid var(--c-primary); }
.timeline li.is-next::before { border-color: var(--c-sun); border-style: dashed; }
.timeline time { font: 650 var(--fs-sm)/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary); }
.timeline h3 { margin: 8px 0; }
.timeline li h3 { margin-top: 0; }
.timeline p { color: var(--c-muted); }
.timeline img { border-radius: var(--r-md); margin-top: var(--s-4); aspect-ratio: 16 / 9; object-fit: cover; width: 100%; max-width: 640px; }

/* Accordion (FAQ, cosa crediamo) */
.accordion { border-top: 1px solid var(--c-line); }
.accordion details { border-bottom: 1px solid var(--c-line); }
.accordion summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  min-height: 64px; padding: var(--s-4) 0; font: 650 1.2rem/1.3 var(--f-head);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .plus { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c-tint); color: var(--c-primary); display: grid; place-items: center; transition: transform .25s var(--ease-out); }
.accordion summary .plus svg { width: 18px; height: 18px; }
.accordion details[open] summary .plus { transform: rotate(45deg); }
.accordion .acc-body { padding: 0 0 var(--s-5); color: var(--c-muted); max-width: 72ch; }
.accordion .acc-body cite { display: block; font: normal 600 var(--fs-md)/1.3 var(--f-head); color: var(--c-primary); margin-top: 6px; }

/* Persone (team, referenti) */
.person { text-align: left; }
.person__photo { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(135deg, var(--c-tint), var(--c-line)); display: grid; place-items: center; color: var(--c-primary); margin-bottom: var(--s-4); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__photo span { font: 800 3rem/1 var(--f-head); opacity: .5; }
.person h3 { margin-bottom: 2px; }
.person p { color: var(--c-muted); margin: 0; }
.contact-card { display: flex; gap: var(--s-5); align-items: center; padding: var(--s-6); background: var(--c-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-1); flex-wrap: wrap; }
.contact-card .person__photo { width: 96px; height: 96px; margin: 0; }
.contact-card .person__photo span { font-size: 1.6rem; }
.contact-card h3 { margin: 4px 0; }
.contact-card__role { color: var(--c-muted); margin: 0 0 var(--s-4); }

/* Contatti */
.contact-box { display: grid; gap: var(--s-3); }
.contact-line { display: flex; gap: 14px; align-items: center; padding: var(--s-4); border-radius: var(--r-md); background: var(--c-surface); text-decoration: none; color: var(--c-ink); box-shadow: var(--shadow-1); min-height: 64px; transition: transform .2s var(--ease-out); }
.contact-line:hover { transform: translateX(4px); }
.contact-line .ico { flex: none; width: 44px; height: 44px; border-radius: var(--r-icon); display: grid; place-items: center; background: var(--c-tint); color: var(--c-primary); }
.contact-line .ico svg { width: 22px; height: 22px; }
.contact-line strong { display: block; font: 650 var(--fs-base)/1.2 var(--f-head); }
.contact-line span { color: var(--c-muted); font-size: var(--fs-md); }

/* Mappa: immagine statica, Google solo dopo il clic */
.map { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); background: var(--c-tint); aspect-ratio: 4 / 3; }
.map iframe { width: 100%; height: 100%; border: 0; }
.map--click { position: relative; isolation: isolate; }
.map--click > img { width: 100%; height: 100%; object-fit: cover; }
.map__overlay { position: absolute; inset: auto 0 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; padding: var(--s-5) var(--s-4) var(--s-4); background: linear-gradient(180deg, rgb(255 255 255 / 0), rgb(255 255 255 / .92) 35%); }
.map__note { flex-basis: 100%; margin: 0; font-size: var(--fs-md); line-height: 1.45; color: var(--c-muted); }
@media (max-width: 480px) { .map--click { aspect-ratio: 3 / 4; } .map__overlay .btn { flex: 1 1 100%; } }

/* Fascia finale con invito */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 12.02em; margin-inline: auto; }
.cta-band .lead { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: var(--s-6); }

/* Contenuti da completare (visibili solo in anteprima) */
.todo { outline: 2px dashed #E0A100; outline-offset: 4px; }
:where(.todo) { border-radius: var(--r-xs); }   /* specificità zero: i componenti tengono il loro raggio */
.todo-note { display: inline-block; font: 600 var(--fs-2xs)/1.3 var(--f-head); background: #FFF4D6; color: #6B4E00; padding: 4px 8px; border-radius: var(--r-xs); margin-bottom: var(--s-3); }
html.hide-todo .todo { outline: 0; }
html.hide-todo .todo-note { display: none; }

/* Footer */
/* Footer blu notte: in alto marchio e riquadro «Ogni domenica», poi l'onda gialla del logo come divisore, poi i link */
.site-footer { position: relative; background: var(--c-deep); color: var(--c-on-deep-muted); padding-block: clamp(56px, 7vw, 88px) var(--s-5); --focus: var(--c-sun); }
.site-footer a { color: var(--c-on-deep); text-decoration: none; }
.site-footer a:hover { color: var(--c-sun); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-6) var(--s-8); padding-bottom: var(--s-6); }
.footer-brand .brand { color: #fff; margin-bottom: var(--s-3); }
.footer-brand .brand__logo { display: none; }
.footer-brand .brand__logo--chiaro { display: block; }
.footer-brand p { margin: 0; max-width: 34ch; }
.footer-domenica { display: grid; gap: 6px; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); min-width: min(100%, 340px); }
.footer-domenica__titolo { margin: 0; font: italic 400 1.2rem/1.2 var(--f-accent); color: var(--c-sun); }
.footer-domenica__orari { margin: 0; display: grid; gap: 2px; color: var(--c-on-deep); }
.footer-domenica__orari strong { display: inline-block; min-width: 3.2em; font-family: var(--f-head); font-weight: 650; color: #fff; }
.site-footer .footer-domenica__dove { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 var(--fs-md)/1.2 var(--f-head); color: var(--c-sun); }
.site-footer .footer-domenica__dove:hover { color: #fff; }
.footer-domenica__dove svg { width: 18px; height: 18px; flex: none; }
/* l'onda gialla del logo come divisore, prolungata da una linea sottile */
.footer-grid { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-6) var(--s-8); padding-top: var(--s-6); }
.footer-grid::before { content: ""; position: absolute; top: 0; left: 0; width: 120px; height: 10px; background: var(--c-sun);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 8'%3E%3Cpath d='M1 4c3.5-3 7-3 10.5 0s7 3 10.5 0 7-3 10.5 0 7 3 10.5 0' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 8'%3E%3Cpath d='M1 4c3.5-3 7-3 10.5 0s7 3 10.5 0 7-3 10.5 0 7 3 10.5 0' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain; }
.footer-grid::after { content: ""; position: absolute; top: 4px; left: 132px; right: 0; height: 1px; background: rgb(255 255 255 / .12); }
.site-footer .footer-title { margin: 0 0 var(--s-2); font: 600 var(--fs-sm)/1.2 var(--f-head); letter-spacing: 0; text-transform: none; color: var(--c-on-deep-muted); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.footer-esplora { grid-template-columns: repeat(4, minmax(0, max-content)); column-gap: var(--s-6) !important; }
.footer-grid ul a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 500 var(--fs-base)/1.2 var(--f-head); }
.footer-grid ul svg { width: 18px; height: 18px; color: var(--c-sun); flex: none; }
.footer-bottom { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid rgb(255 255 255 / .1); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3) var(--s-4); font-size: var(--fs-sm); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer .footer-links a { color: var(--c-on-deep-muted); }
.site-footer .footer-links a:hover { color: var(--c-sun); }
@media (max-width: 1020px) { .footer-esplora { grid-template-columns: repeat(2, minmax(0, max-content)); } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } .footer-domenica { width: 100%; } }

/* WhatsApp fisso: nascosto quando non serve (vedi main.js) */
.fab { position: fixed; right: 16px; bottom: 16px; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: var(--c-whatsapp); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-2); transition: transform .2s var(--ease-out), opacity .25s, visibility .25s; }
.fab:hover { transform: scale(1.08); }
.fab.is-hidden { opacity: 0; visibility: hidden; transform: scale(.85); }
.fab svg { width: 28px; height: 28px; }
@media (max-width: 480px) { .fab { width: 52px; height: 52px; } }

/* Comparsa allo scorrimento */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.is-in, .no-js .reveal { opacity: 1; transform: none; }

/* Foto: leggero ingrandimento al passaggio del mouse (solo con mouse e animazioni attive) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gallery-grid img, img.mini-photo, .timeline img, .marquee img, img.photo {
    transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
  }
  .gallery-grid img:hover, img.mini-photo:hover, .timeline img:hover, .marquee img:hover, img.photo:hover {
    transform: scale(1.04); box-shadow: var(--shadow-2); position: relative; z-index: 1;
  }
}

/* ---------- 7. Sezioni della home ---------- */

/* Benvenuto (home): minimal, una frase e una sola foto. Tanto spazio, nessun elenco. */
.bv { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.bv-testo h2 { margin: 0 0 var(--s-4); }
.bv-testo .lead { margin: 0 0 var(--s-4); max-width: 42ch; }
.bv-foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); }
@media (max-width: 880px) { .bv { grid-template-columns: 1fr; } .bv-foto img { aspect-ratio: 3 / 2; } }

/* Ultima predicazione in home: una sola predica su fondo sabbia calda. Il giallo sole solo sull'onda,
   sull'avanzamento della serie e sul pulsante principale; testo blu notte. */
/* fondo sabbia calda: lo usano l'ultima predicazione e il progetto del Centro, per staccarli dalle sezioni vicine */
:root { --c-sabbia-calda: color-mix(in srgb, var(--c-sun) 13%, var(--c-bg)); }
.home-prediche { background: var(--c-sabbia-calda); color: var(--c-deep); }
.home-prediche .featured { grid-template-columns: 1.35fr 1fr; }
.home-prediche .yt { box-shadow: 0 2px 6px rgb(60 40 0 / .08), 0 24px 48px -28px rgb(60 40 0 / .45); }
.yt--fotogramma img { object-position: 50% 40%; }
.hp-testo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.hp-testo .eyebrow { margin: 0; color: var(--c-deep); opacity: .75; }
.hp-testo h2 { margin: 0; color: var(--c-deep); }
.hp-meta { margin: 0; color: var(--c-muted); font-size: var(--fs-md); }
.hp-ref { font-weight: 600; color: var(--c-deep); }
.hp-serie { width: 100%; max-width: 22em; margin-top: var(--s-2); }
.hp-serie__testo { margin: 0 0 8px; font: 500 var(--fs-md)/1.3 var(--f-head); color: var(--c-deep); }
.hp-serie__testo b { font-weight: 650; }
.hp-serie__testo span { color: var(--c-muted); font-family: var(--f-body); font-weight: 400; }
.hp-serie__barra { height: 6px; border-radius: var(--r-xs); background: rgb(10 46 61 / .1); overflow: hidden; }
.hp-serie__barra span { display: block; height: 100%; width: var(--p); background: var(--c-sun); border-radius: inherit; }
.px-frase.hp-frase { margin: var(--s-3) 0 0; max-width: 24em; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.4; color: var(--c-deep); }
.px-frase.hp-frase::before { width: 46px; height: 8px; margin-bottom: var(--s-3); }
.hp-testo .btn-row { margin-top: var(--s-4); }
.home-prediche .btn--ghost { --btn-ink: var(--c-deep); color: var(--c-deep); background: transparent; border-color: rgb(10 46 61 / .35); }
.home-prediche .btn--ghost:hover { border-color: var(--c-deep); background: var(--c-surface); }
@media (max-width: 880px) { .home-prediche .featured { grid-template-columns: 1fr; } }

/* Testimonianze */
/* Testimonianze in home: tutta la sezione entra in una schermata. A sinistra il video della storia scelta;
   a destra la storia, i due pulsanti e i volti di tutte (toccando un volto la sua storia va nel video, js/main.js).
   La larghezza del video dipende dall'altezza dello schermo, così sui portatili bassi non serve scorrere. */
/* stesso fondo della sezione dei ministeri sopra: niente margine in alto, altrimenti i due margini si sommano */
.tm-sez { padding-top: 0; }
.tm-testa h2 { margin: 0; }
.tm { display: grid; grid-template-columns: minmax(0, min(58%, calc((100svh - var(--header-h) - 300px) * 16 / 9))) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }   /* la colonna di destra parte dal bordo alto della foto */
.tm-video .yt { box-shadow: 0 2px 6px rgb(10 46 61 / .08), 0 24px 48px -28px rgb(10 46 61 / .45); }
.tm-testo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); min-width: 0; }
.tm-storia { display: grid; gap: 6px; }
.tm-serie { margin: 0; font: italic 400 1.15rem/1.2 var(--f-accent); color: var(--c-primary); }
.tm-nome { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; text-wrap: balance; }
.tm-desc { margin: 2px 0 0; color: var(--c-muted); max-width: 32ch; }
.tm-azioni { gap: var(--s-3); }
.tm-altri { width: 100%; padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.tm-altri__titolo { margin: 0 0 var(--s-3); font: 500 var(--fs-sm)/1.2 var(--f-head); color: var(--c-muted); }
.tm-volti { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
.tm-volto { display: grid; justify-items: center; align-content: start; gap: 6px; width: 100%; min-height: 44px; padding: 4px 0; border: 0; background: none; color: var(--c-ink); cursor: pointer; text-align: center; border-radius: var(--r-sm); }
.tm-volto__foto { width: clamp(48px, 4.4vw, 60px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 4px var(--c-line); transition: box-shadow .25s var(--ease-out); }
.tm-volto__foto img { width: 100%; height: 100%; object-fit: cover; display: block; scale: 1.9; }   /* nel cerchio solo il viso: ingrandito verso il punto della persona */
.tm-volto:hover .tm-volto__foto { box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 5px var(--c-control); }
.tm-volto[aria-pressed="true"] .tm-volto__foto { box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 6px var(--c-sun); }
.tm-volto__nome { font: 500 var(--fs-xs)/1.2 var(--f-head); }
.tm-volto[aria-pressed="true"] .tm-volto__nome { font-weight: 650; }
@media (max-width: 880px) {
  .tm { grid-template-columns: 1fr; gap: var(--s-5); }
}
@media (max-width: 640px) {
  .tm-volti { display: flex; overflow-x: auto; gap: var(--s-3); margin-inline: -16px; padding: 6px 16px 8px; scrollbar-width: none; }
  .tm-volti::-webkit-scrollbar { display: none; }
  .tm-volti > li { flex: none; width: 72px; }
  .tm-volto__foto { width: 58px; }
  .tm-azioni .btn { flex: 1 1 auto; }
  /* sul telefono i volti vanno subito sotto il video: la scelta si vede insieme alla storia */
  .tm-altri { order: -1; padding: 0 0 var(--s-3); border-top: 0; border-bottom: 1px solid var(--c-line); }
  .tm-altri__titolo { display: none; }
  .tm { gap: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) { .tm-volto__foto { transition: none; } }

/* Teaser del Centro */
/* Il nostro progetto (home): «prima e adesso». Un cursore da trascinare tra le fondamenta (ottobre 2025) e la struttura (maggio 2026).
   L'<input type=range> invisibile copre la foto: funziona con mouse, dito e tastiera; js/main.js aggiorna --x. */
.centro-home { --sez-bg: var(--c-sabbia-calda); background: var(--sez-bg); }
.ch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.ch-testo h2 { margin: 0 0 var(--s-4); }
.ch-testo .lead { margin: 0 0 var(--s-5); }
.ch-tappe { list-style: none; margin: 0 0 var(--s-6); padding: 0 0 0 22px; display: grid; gap: var(--s-3); position: relative; }
.ch-tappe::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--c-water) 0 62%, var(--c-line) 62%); }
.ch-tappe li { position: relative; color: var(--c-ink); font: 500 var(--fs-base)/1.35 var(--f-head); }
.ch-tappe li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--c-water); box-shadow: 0 0 0 3px var(--sez-bg, var(--c-bg)); }
.ch-tappe b { display: block; font: italic 400 var(--fs-md)/1.2 var(--f-accent); color: var(--c-primary); }
.ch-tappe__ora::before { background: var(--c-sun) !important; box-shadow: 0 0 0 3px var(--sez-bg, var(--c-bg)), 0 0 0 7px rgb(244 181 68 / .3) !important; }
.ch-tappe__poi { color: var(--c-muted) !important; }
.ch-tappe__poi::before { background: var(--sez-bg, var(--c-bg)) !important; border: 2px dashed var(--c-control); }
.ch-confronto { position: relative; aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; background: var(--c-deep); --x: 50%; user-select: none; touch-action: pan-y;
  box-shadow: 0 2px 6px rgb(10 46 61 / .08), 0 24px 48px -28px rgb(10 46 61 / .45); }
.ch-confronto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ch-prima { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ch-linea { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgb(0 0 0 / .4); pointer-events: none; }
.ch-maniglia { position: absolute; top: 50%; left: var(--x); width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--c-sun); color: var(--c-deep); display: grid; place-items: center; box-shadow: 0 6px 18px rgb(0 0 0 / .3); pointer-events: none; transition: transform .2s var(--ease-out); }
.ch-maniglia svg { width: 22px; height: 22px; }
.ch-confronto:hover .ch-maniglia { transform: scale(1.08); }
.ch-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ch-range:focus-visible ~ .ch-maniglia { outline: 3px solid #fff; outline-offset: 3px; }
.ch-tag { position: absolute; bottom: 12px; padding: 6px 10px; border-radius: var(--r-xs); background: rgb(10 46 61 / .78); color: #fff; font: 500 var(--fs-sm)/1.2 var(--f-head); pointer-events: none; }
.ch-tag em { font: italic 400 var(--fs-sm) var(--f-accent); color: var(--c-sun); }
.ch-tag--prima { left: 12px; } .ch-tag--dopo { right: 12px; }
.ch-aiuto { margin: var(--s-3) 0 0; font-size: var(--fs-md); color: var(--c-muted); }
@media (max-width: 880px) { .ch { grid-template-columns: 1fr; } .ch-foto { order: -1; } }   /* sul telefono la foto subito sotto il titolo */
@media (max-width: 520px) { .ch-tag > span { display: none; } }
@media (prefers-reduced-motion: reduce) { .ch-maniglia { transition: none; } }
/* Vieni a trovarci (home): la mappa grande con il segnaposto «Fiume di Vita» e sopra, a sinistra, la scheda con orari, indirizzo e inviti.
   La mappa è ingrandita verso il segnaposto e spostata a destra, così il segnaposto non finisce sotto la scheda. Sul telefono: mappa sopra, scheda sotto. */
.dove-pannello { display: grid; grid-template-areas: "dove"; }
.dove-mappa, .dove-scheda { grid-area: dove; }
.dove-mappa { position: relative; isolation: isolate; aspect-ratio: auto; height: 100%; min-height: clamp(500px, 42vw, 560px); border-radius: var(--r-lg); box-shadow: 0 2px 6px rgb(10 46 61 / .06), 0 24px 48px -30px rgb(10 46 61 / .4); }
.dove-mappa > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; transform-origin: 50% 46%; transform: translateX(16%) scale(1.35); }
.dove-pin { position: absolute; left: 66%; top: 39%; transform: translate(-50%, -100%); padding: 6px 12px; border-radius: var(--r-sm); background: var(--c-deep); color: #fff; font: 600 var(--fs-sm)/1.2 var(--f-head); white-space: nowrap; box-shadow: 0 6px 18px rgb(10 46 61 / .3); pointer-events: none; }
.dove-pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.dove-credito { position: absolute; right: 8px; bottom: 6px; padding: 1px 6px; border-radius: var(--r-xs); background: rgb(255 255 255 / .75); color: var(--c-muted); font-size: .7rem; line-height: 1.4; pointer-events: none; }   /* richiesto dalla licenza della mappa */
.dove-scheda { position: relative; z-index: 1; align-self: center; justify-self: start; margin: clamp(16px, 3vw, 32px); width: min(440px, 44%); padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: 0 2px 6px rgb(10 46 61 / .08), 0 30px 60px -30px rgb(10 46 61 / .5); }
.dove-scheda h2 { margin: 0 0 var(--s-3); font-size: clamp(1.8rem, 3vw, 2.4rem); }
.dove-testo { margin: 0 0 var(--s-4); color: var(--c-muted); }
.dove-orari { list-style: none; margin: 0 0 var(--s-4); padding: var(--s-3) 0; display: grid; gap: 6px; border-block: 1px solid var(--c-line); }
.dove-orari li { display: flex; align-items: baseline; gap: var(--s-3); color: var(--c-ink); font: 500 var(--fs-base)/1.3 var(--f-head); }
.dove-ora { min-width: 3.2em; font: italic 400 1.15rem/1 var(--f-accent); color: var(--c-primary); }
.dove-indirizzo { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 var(--s-5); color: var(--c-muted); }
.dove-indirizzo svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--c-primary); }
.dove-indirizzo strong { display: block; color: var(--c-ink); font: 600 var(--fs-base)/1.3 var(--f-head); }
.dove-scheda .btn-row { gap: var(--s-3); }
.dove-tel { margin: var(--s-4) 0 0; font-size: var(--fs-md); color: var(--c-muted); }
.dove-tel a { color: var(--c-primary); font-weight: 600; }
@media (max-width: 880px) {
  .dove-pannello { display: block; }
  .dove-mappa { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .dove-mappa > img { transform: none; }
  .dove-pin { left: 50%; top: 41%; }
  .dove-credito { top: 6px; bottom: auto; }   /* in basso lo coprirebbe la scheda */
  .dove-scheda { width: auto; margin: calc(-1 * var(--s-6)) var(--s-3) 0; }
}
@media (max-width: 480px) { .dove-scheda .btn { flex: 1 1 auto; } }

/* Galleria che scorre, con pausa */
.marquee-wrap { position: relative; }
.marquee { overflow: hidden; padding-block: var(--s-2); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; gap: var(--s-4); width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee:active .marquee__track { animation-play-state: paused; }   /* si ferma col mouse sopra, col dito o con la tastiera */
.marquee img { height: clamp(200px, 26vw, 320px); width: auto; aspect-ratio: auto; border-radius: var(--r-md); object-fit: cover; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--s-2))); } }

/* ---------- 8. Pagine interne ---------- */

/* Pagine ministero */
.mini-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
div.mini-photo { display: grid; place-items: center; background: linear-gradient(135deg, var(--c-primary), var(--c-deep)); color: var(--c-sun); }
div.mini-photo svg { width: 96px; height: 96px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-4); }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }

/* Predicazioni: playlist e ricerca */
.playlist__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s-5); margin: var(--s-6) 0 var(--s-6); padding-bottom: var(--s-5); border-bottom: 1px solid var(--c-line); }
.playlist__head > div { max-width: 680px; }
.playlist__head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 6px 0 8px; }
.playlist__head .lead { margin: 0; font-size: var(--fs-body); }
/* telefono e tablet piccolo: ogni predicazione è una scheda chiusa, si vede dove inizia e finisce */
@media (max-width: 700px) {
  .playlist .sermon { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--shadow-1); overflow: hidden; padding-bottom: var(--s-4); gap: var(--s-2); }
  .playlist .sermon > :not(.yt) { margin-inline: var(--s-4); }
  .playlist .sermon .yt { border-radius: 0; margin-bottom: var(--s-2); }
}

.pcerca { margin: 0 0 var(--s-5); max-width: 640px; }
.pcerca__label { display: block; font: 650 var(--fs-base)/1.3 var(--f-head); color: var(--c-ink); margin-bottom: .5rem; }
.pcerca__box { position: relative; display: flex; align-items: center; }
.pcerca__box > svg { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--c-muted); pointer-events: none; }
.pcerca__box input { width: 100%; min-height: 54px; padding: 0 52px 0 48px; border: 1.5px solid var(--c-control); border-radius: var(--r-sm); background: var(--c-surface); font: 400 var(--fs-body) var(--f-body); color: var(--c-ink); }
.pcerca__box input:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary); }
.pcerca__box input::-webkit-search-cancel-button { display: none; }
.pcerca__clear { position: absolute; right: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--c-muted); cursor: pointer; display: grid; place-items: center; }
.pcerca__clear:hover { background: var(--c-tint); color: var(--c-ink); }
.pcerca__clear svg { width: 20px; height: 20px; transform: rotate(45deg); }
.pcerca__clear[hidden] { display: none; }
.pcerca__esito { margin: .6rem 0 0; min-height: 1.4em; color: var(--c-muted); font-size: var(--fs-md); }
.pcerca__serie { font-size: var(--fs-sm); color: var(--c-muted); }
.pcerca-risultati { margin-top: var(--s-4); }
.pcerca-vuoto p { color: var(--c-muted); max-width: 52ch; }
.pcerca-vuoto strong { color: var(--c-ink); }

/* Eventi */
.event { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s-5); align-items: center; padding: var(--s-5); background: var(--c-surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.event + .event { margin-top: var(--s-4); }
.event__date { text-align: center; background: var(--c-tint); color: var(--c-primary); border-radius: var(--r-sm); padding: 12px 8px; font-family: var(--f-head); }
.event__date b { display: block; font-size: 2rem; line-height: 1; font-weight: 800; }
.event__date span { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.event--fisso .event__date b { font-size: 1.35rem; }
.event h3 { margin: 0 0 4px; }
.event p { margin: 0; color: var(--c-muted); }
.event .tag { display: inline-block; font: 600 var(--fs-2xs)/1 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 6px; }
.events-sub { margin: var(--s-7) 0 var(--s-4); font-size: 1.25rem; }
.events-empty { color: var(--c-muted); margin: 0; padding: var(--s-5); border: 1.5px dashed var(--c-line); border-radius: var(--r-md); }
@media (max-width: 640px) { .event { grid-template-columns: 72px 1fr; } .event .btn { grid-column: 1 / -1; } }

/* Articoli: card, filtri, stati vuoti */
.agrid { align-items: stretch; }
.acard { position: relative; display: flex; flex-direction: column; background: var(--c-surface); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); cursor: pointer; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.acard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.acard[hidden] { display: none; }
.acard__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-tint); }
.acard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.acard:hover .acard__media img { transform: scale(1.05); }
.acard__art { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--c-primary), var(--c-deep)); color: #fff; padding: var(--s-5); text-align: center; }
.acard__art span { font: italic 500 clamp(1.3rem, 2.2vw, 1.7rem)/1.2 var(--f-accent); opacity: .9; }
.acard__body { padding: var(--s-5); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.acard__tag { font: 600 var(--fs-2xs)/1.3 var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: var(--c-primary); }
.acard h3 { margin: 0; font-size: 1.25rem; line-height: 1.25; }
.acard h3 a { color: inherit; text-decoration: none; }
.acard p { margin: 0; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.acard__meta { margin-top: auto; padding-top: var(--s-3); font-size: var(--fs-md); color: var(--c-muted); }
/* tutta la card apre l'articolo (foto compresa); il focus si vede sulla card */
.acard a.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.acard a.stretched:focus-visible { outline: 0; }
.acard:has(a.stretched:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
/* pochi articoli in home: card orizzontale a tutta larghezza invece di una griglia mezza vuota */
.agrid--few { grid-template-columns: 1fr; }
.acard--big { flex-direction: row; }
.acard--big .acard__media { flex: 0 0 48%; aspect-ratio: 16 / 10; }
.acard--big .acard__body { padding: var(--s-6); justify-content: center; }
.acard--big h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.acard--big .acard__meta { margin-top: var(--s-3); }
@media (max-width: 700px) { .acard--big { flex-direction: column; } .acard--big .acard__media { flex: none; } .acard--big .acard__body { padding: var(--s-5); } }

.afilters { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.afilters .filter-bar { margin-bottom: 0; }
.afilters__sub { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.afilters__desc { margin: var(--s-2) 0 0; font-size: var(--fs-body); }
.afilters__sub[hidden], .afilters__desc[hidden] { display: none; }
.aempty { text-align: center; color: var(--c-muted); padding: var(--s-7) 0; }
.aempty button { background: none; border: 0; color: var(--c-primary); font: 600 var(--fs-base) var(--f-head); cursor: pointer; text-decoration: underline; min-height: 44px; }
.aempty-start { text-align: center; }
.aempty-start .lead { margin: 0 auto var(--s-6); }
.aempty-start .feature { text-align: left; }
.acats { margin-top: var(--s-3) !important; font: 600 var(--fs-sm)/1.5 var(--f-head); color: var(--c-primary) !important; }

/* ---------- 9. Pagina articolo — "lettura" ----------
   Una colonna di testo in Fraunces, la foto come striscia d'orizzonte,
   note a margine come in una Bibbia da studio. Niente schede con ombra. */
.lx, .lx-band, .lx-more, .lx-invite { --lx-text: 41rem; --lx-margin: 15.5rem; --lx-gap: clamp(2.5rem, 5vw, 5rem); }
.lx-wide { max-width: calc(var(--lx-text) + var(--lx-margin) + var(--lx-gap)) !important; }

/* intestazione */
.lx-head { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.lx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font: 500 var(--fs-md)/1.3 var(--f-body); color: var(--c-muted); margin-bottom: 1.5rem; }
.lx-crumbs a { color: var(--c-primary); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.lx-crumbs a:hover { text-decoration: underline; }
.lx-head h1 { font: 800 clamp(2.4rem, 5.6vw, 4.25rem)/1.02 var(--f-head); letter-spacing: -.035em; max-width: 11.41em; margin: 0 0 1.1rem; color: var(--c-ink); }
.lx-sub { font: italic 400 clamp(1.2rem, 2.1vw, 1.5rem)/1.45 var(--f-accent); color: var(--c-muted); max-width: 36ch; margin: 0 0 2rem; }
.lx-byline { display: flex; align-items: center; gap: .9rem; }
.lx-byline p { margin: 0; display: flex; flex-direction: column; font: 400 var(--fs-md)/1.45 var(--f-body); color: var(--c-muted); }
.lx-byline strong { font: 600 var(--fs-base)/1.35 var(--f-head); color: var(--c-ink); }
.lx-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: var(--c-tint); }
.lx-avatar--iniziali { display: inline-grid; place-items: center; background: var(--c-primary); color: #fff; font: 700 var(--fs-body)/1 var(--f-head); }
.lx-avatar--lg { width: 72px; height: 72px; font-size: 1.4rem; }

/* la foto: una striscia d'orizzonte, non un poster */
.lx-horizon { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.lx-horizon img { width: 100%; height: clamp(170px, 24vw, 260px); object-fit: cover; object-position: center 62%; border-radius: var(--r-xs); display: block; }
.lx-horizon figcaption { margin-top: .6rem; font: 400 var(--fs-md)/1.45 var(--f-body); color: var(--c-muted); max-width: var(--lx-text); }

/* testo + margine */
.lx-grid { display: grid; grid-template-columns: minmax(0, var(--lx-text)) var(--lx-margin); gap: var(--lx-gap); align-items: start; padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.lx-text { font: 400 1.19rem/1.78 var(--f-accent); font-optical-sizing: auto; color: var(--c-ink-soft); }
.lx-text > * { margin: 0; }
.lx-text > * + * { margin-top: 1.15em; }
.lx-text > :first-child::first-line { font-weight: 600; }
.lx-text h2 { font: 700 clamp(1.45rem, 2.4vw, 1.75rem)/1.2 var(--f-head); letter-spacing: -.015em; color: var(--c-ink); margin-top: 2.1em; }
.lx-text h3 { font: 650 1.25rem/1.3 var(--f-head); color: var(--c-ink); margin-top: 1.7em; }
.lx-text h2 + *, .lx-text h3 + * { margin-top: .6em; }
.lx-text strong { font-weight: 600; color: var(--c-ink); }
.lx-text a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lx-text ul, .lx-text ol { padding-left: 1.25em; }
.lx-text li + li { margin-top: .35em; }
.lx-text li::marker { color: var(--c-water); }
.lx-text img { border-radius: var(--r-xs); max-height: 480px; width: auto; max-width: 100%; }
.lx-text .lx-avatar { border-radius: 50%; max-height: none; }   /* vince su .lx-text img */
.lx-text hr { border: 0; height: 1px; background: var(--c-line); margin: 2.5em 0; }

/* il versetto: l'unico elemento "forte" della pagina */
.lx-text blockquote { margin: 1.9em 0; padding: .2em 0 .2em 1.4rem; border-left: 3px solid var(--c-sun); }
.lx-text blockquote p { font: italic 400 clamp(1.3rem, 2.3vw, 1.55rem)/1.5 var(--f-accent); color: var(--c-deep); margin: 0; }
.lx-text blockquote cite { display: block; margin-top: .7rem; font: normal 600 var(--fs-md)/1.3 var(--f-head); color: var(--c-primary); }

/* note a margine */
.lx-margin { position: sticky; top: calc(var(--header-h) + 2rem); display: grid; gap: 1.75rem; font-family: var(--f-body); }
.lx-note { padding-top: 1rem; border-top: 2px solid var(--c-ink); }
.lx-note h2 { font: 650 var(--fs-base)/1.3 var(--f-head); margin: 0 0 .75rem; color: var(--c-ink); letter-spacing: 0; }
.lx-note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.lx-note li a { display: flex; align-items: center; min-height: 44px; font: 600 var(--fs-base)/1.3 var(--f-head); color: var(--c-primary); text-decoration: none; border-bottom: 1px solid var(--c-line); }
.lx-note li a:hover { color: var(--c-deep); border-bottom-color: var(--c-primary); }
.lx-note .yt { border-radius: var(--r-xs); }
.lx-hint { margin: .6rem 0 0; font-size: var(--fs-md); line-height: 1.45; color: var(--c-muted); }
.lx-sermon { margin: .7rem 0 0; font-size: var(--fs-md); line-height: 1.45; color: var(--c-muted); }
.lx-sermon strong { display: block; font: 650 var(--fs-base)/1.3 var(--f-head); color: var(--c-ink); margin-bottom: .15rem; }
.lx-share { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: 0; }
.lx-share a, .lx-share button { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0; background: none; border: 0; font: 600 var(--fs-base)/1 var(--f-head); color: var(--c-primary); text-decoration: none; cursor: pointer; }
.lx-share svg { width: 18px; height: 18px; }
.lx-share a:hover, .lx-share button:hover { text-decoration: underline; }

/* chi ha scritto: in linea con il testo, senza scatola */
.lx-author { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 3.25rem !important; padding-top: 1.75rem; border-top: 1px solid var(--c-line); font-family: var(--f-body); }
.lx-author p { margin: 0; }
.lx-author__name { font: 400 var(--fs-body)/1.4 var(--f-body); color: var(--c-muted); }
.lx-author__name strong { font: 650 1.15rem/1.3 var(--f-head); color: var(--c-ink); }
.lx-author__role { font-size: var(--fs-md); color: var(--c-muted); margin-top: .1rem !important; }
.lx-author__bio { font: 400 var(--fs-base)/1.6 var(--f-body); color: var(--c-ink-soft); margin-top: .65rem !important; max-width: 56ch; }
.lx-author__more { font-size: var(--fs-md); margin-top: .65rem !important; }

/* predicazioni sullo stesso brano */
.lx-band { background: var(--c-deep); color: var(--c-on-deep); padding: clamp(3rem, 6vw, 4.5rem) 0; }
.lx-band h2 { color: #fff; font: 700 clamp(1.6rem, 3vw, 2.1rem)/1.15 var(--f-head); margin: 0 0 .5rem; }
.lx-band__lead { color: var(--c-on-deep-muted); margin: 0 0 2rem; max-width: 52ch; }
.lx-sermons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); max-width: 54rem; }
.lx-sermons h3 { color: #fff; font: 650 1.1rem/1.3 var(--f-head); margin: .85rem 0 .2rem; }
.lx-sermons p { margin: 0; color: var(--c-on-deep-muted); font-size: var(--fs-md); }
.lx-sermons .yt { border-radius: var(--r-xs); }
.lx-band .lx-sermons + * { margin-top: 0; }

/* continua a leggere */
.lx-more { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(1rem, 3vw, 2rem); }
.lx-more h2 { font: 700 clamp(1.5rem, 2.6vw, 1.9rem)/1.2 var(--f-head); margin: 0 0 1rem; }
.lx-more__lead { color: var(--c-muted); max-width: 52ch; margin: 0 0 1.25rem; }
.lx-list { list-style: none; margin: 0 0 1.25rem; padding: 0; border-top: 1px solid var(--c-line); }
.lx-list a { display: grid; gap: .2rem; padding: 1rem 0; border-bottom: 1px solid var(--c-line); text-decoration: none; color: var(--c-ink); }
.lx-list a:hover strong { color: var(--c-primary); }
.lx-list__cat { font: 500 var(--fs-sm)/1.3 var(--f-body); color: var(--c-primary); }
.lx-list strong { font: 650 1.2rem/1.3 var(--f-head); }
.lx-list span:last-child:not(.lx-list__cat) { color: var(--c-muted); font-size: var(--fs-base); }
.lx-link { font: 600 var(--fs-base)/1 var(--f-head); color: var(--c-primary); }

/* invito finale: breve, nella stessa colonna */
.lx-invite { padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.lx-invite p { max-width: 60ch; font-size: var(--fs-body); margin: 0 0 1.25rem; padding-top: 1.75rem; border-top: 1px solid var(--c-line); }
.lx-invite strong { font-family: var(--f-head); color: var(--c-ink); }
.lx-invite__actions { display: flex; flex-wrap: wrap; gap: .75rem; border: 0 !important; padding: 0 !important; }

@media (max-width: 1020px) {
  .lx-grid { grid-template-columns: minmax(0, 1fr); }
  .lx-margin { position: static; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem 2rem; }
  .lx-text { max-width: var(--lx-text); }
}
@media (max-width: 640px) {
  .lx-text { font-size: 1.1rem; line-height: 1.72; }
  .lx-sermons { grid-template-columns: 1fr; }
}

/* ---------- 9b. Pagina di una predicazione — video in testa, poi il messaggio "in una frase" ----------
   Stessa griglia di lettura degli articoli (.lx-grid, .lx-text, .lx-note). Il video sta tutto dentro la fascia scura,
   con spazio sotto: si guarda, poi si legge. */
.px, .px-serie { --lx-text: 41rem; --lx-margin: 15.5rem; --lx-gap: clamp(2.5rem, 5vw, 5rem); }
.px-wide { max-width: calc(var(--lx-text) + var(--lx-margin) + var(--lx-gap)); }

.px-head { background: var(--c-deep); color: var(--c-on-deep); padding: calc(var(--header-h) + clamp(28px, 5vw, 56px)) 0 clamp(36px, 6vw, 72px); }
.px-crumbs, .px-crumbs a { color: var(--c-on-deep-muted); }
.px-crumbs a { color: var(--c-water); }
.px-head h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.05; max-width: 16em; margin: 0 0 var(--s-4); text-wrap: balance; }
.px-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; font-size: var(--fs-md); color: var(--c-on-deep-muted); }
.px-meta > * { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.px-meta > a { min-height: 44px; }   /* il brano si tocca facilmente anche col dito */
.px-meta > * + * { margin-left: 14px; padding-left: 14px; border-left: 1px solid rgb(255 255 255 / .2); }
.px-meta__chi { font: 600 var(--fs-base)/1.2 var(--f-head); color: #fff; }
.px-meta__brano { color: var(--c-water); text-decoration: none; font-weight: 500; }
.px-meta__brano:hover { text-decoration: underline; }
.px-meta svg { width: 16px; height: 16px; }
.px-video { margin-top: clamp(28px, 4vw, 44px); }
.px-video .yt { border-radius: var(--r-md); box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }

/* "in una frase": il cuore del messaggio, grande e in corsivo */
.px-frase {
  margin: clamp(44px, 7vw, 80px) 0 clamp(40px, 6vw, 64px); max-width: 27em;
  font: italic 400 clamp(1.5rem, 3.3vw, 2.35rem)/1.32 var(--f-accent); color: var(--c-deep); text-wrap: pretty;
}
.px-frase::before {   /* l'onda gialla del logo, come nel menu */
  content: ""; display: block; width: 58px; height: 10px; margin-bottom: var(--s-4); background: var(--c-sun);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 8'%3E%3Cpath d='M1 4c3.5-3 7-3 10.5 0s7 3 10.5 0 7-3 10.5 0 7 3 10.5 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 8'%3E%3Cpath d='M1 4c3.5-3 7-3 10.5 0s7 3 10.5 0 7-3 10.5 0 7 3 10.5 0' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* i punti principali: numerati solo quando sono davvero una sequenza */
.px-punti { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-width: var(--lx-text); }
.px-punti h2 { font: 700 clamp(1.45rem, 2.4vw, 1.75rem)/1.2 var(--f-head); letter-spacing: -.015em; margin: 0 0 var(--s-4); }
.px-punti__lista { list-style: none; margin: 0; padding: 0; counter-reset: punto; }
.px-punto { display: grid; gap: var(--s-2); padding: var(--s-5) 0; border-top: 1px solid var(--c-line); }
.px-punti__lista--ol .px-punto { grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--s-3); }
.px-punti__lista--ol .px-punto::before {
  counter-increment: punto; content: counter(punto); grid-row: 1 / span 2;
  font: italic 400 2.6rem/1 var(--f-accent); color: var(--c-water);
}
.px-punto__tit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.px-punto h3 { margin: 0; font: 650 1.25rem/1.3 var(--f-head); text-transform: none; }
.px-punto__anti { margin: 0; font: 600 var(--fs-md)/1.2 var(--f-head); color: var(--c-primary); background: var(--c-tint); padding: 6px 10px; border-radius: var(--r-xs); }
.px-punto__anti::before { content: "Antidoto: "; font-weight: 400; color: var(--c-muted); }
.px-punto > p { margin: 0; color: var(--c-ink-soft); font-size: var(--fs-body); line-height: 1.65; }
.px-punti__lista--ol .px-punto > p { grid-column: 2; }

.px-domande ol { margin: 0; padding-left: 1.2em; display: grid; gap: .7rem; }
.px-domande li { font: 400 var(--fs-base)/1.5 var(--f-body); color: var(--c-ink-soft); }
.px-domande li::marker { font-family: var(--f-head); font-weight: 650; color: var(--c-primary); }
.px-nota { margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--c-line); font-size: var(--fs-md); color: var(--c-muted); max-width: var(--lx-text); }
.px-vuoto { padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.px-vuoto p { margin: 0; max-width: 40em; font-size: var(--fs-body); color: var(--c-muted); }

/* la serie: precedente e successiva */
.px-serie { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--c-tint); }
.px-serie h2 { font: 700 clamp(1.3rem, 2.2vw, 1.6rem)/1.2 var(--f-head); margin: 0 0 var(--s-5); }
.px-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.px-nav__link { display: grid; gap: 4px; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); text-decoration: none; border: 1px solid transparent; transition: border-color .2s; }
.px-nav__link:hover { border-color: var(--c-primary); }
.px-nav__link--next { grid-column: 2; text-align: right; }
.px-nav__dir { font: 600 var(--fs-md)/1.2 var(--f-head); color: var(--c-primary); }
.px-nav__link strong { font: 650 1.1rem/1.3 var(--f-head); }
.px-nav__link > span:last-child:not(.px-nav__dir) { font-size: var(--fs-md); color: var(--c-muted); }
.px-serie__tutte { margin: var(--s-5) 0 0; }

/* nella pagina Predicazioni: il titolo porta alla pagina, e c'è il link al riassunto */
.sermon h3 a { color: inherit; text-decoration: none; padding-block: 11px; }   /* area di tocco più alta, senza cambiare l'impaginazione (padding su un elemento in linea) */
.sermon h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sermon__more { display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--fs-md)/1 var(--f-head); color: var(--c-primary); text-decoration: none; }
.sermon__more:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .px-meta { gap: 2px 18px; }
  .px-meta > * + * { margin-left: 0; padding-left: 0; border-left: 0; }
  .px-video .yt { border-radius: var(--r-sm); }
  .px-nav { grid-template-columns: minmax(0, 1fr); }
  .px-nav__link--next { grid-column: 1; }
  .px-punti__lista--ol .px-punto { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .px-punti__lista--ol .px-punto::before { font-size: 2.1rem; }
}

/* ---------- 10. Pagina brand (solo anteprima) ---------- */
.logo-tile { background: var(--c-surface); border-radius: var(--r-lg); padding: var(--s-7) var(--s-5); display: grid; place-items: center; gap: var(--s-4); box-shadow: var(--shadow-1); }
.logo-tile.dark { background: var(--c-deep); color: #fff; }
.logo-tile svg { width: 120px; height: 120px; }
.logo-lockup { display: flex; align-items: center; gap: 14px; font: 700 2rem/1 var(--f-head); letter-spacing: -.03em; }
.logo-lockup .brand__logo { height: 64px; }
.logo-lockup i { font: italic 400 1.8rem/1 var(--f-accent); margin: 0 .15em; opacity: .85; }

/* ---------- Utilità (in fondo: vincono sui margini dei componenti) ---------- */
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-5 { margin-top: var(--s-5); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-7 { margin-top: var(--s-7); }
.u-mt-8 { margin-top: var(--s-8); }
.u-mb-6 { margin-bottom: var(--s-6); }
.nowrap { white-space: nowrap; }

/* foto nel flusso del testo */
.photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.photo--lg { border-radius: var(--r-lg); }

/* ---------- 11. Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { animation: none; flex-wrap: nowrap; }
  .marquee { overflow-x: auto; }
}

/* ---------- 12. Stile del sito (quieter + animate + delight) ----------
   Era la prova ?stile=nuovo; dal 2026-11-13 è lo stile di tutti. La classe .stile-nuovo è sempre su <html> (vedi head() in _build/build.py). */

/* quieter: titoli meno pesanti, giallo raro, meno blocchi scuri, schede piatte, movimento più calmo */
.stile-nuovo h1 { font-weight: 700; letter-spacing: -.03em; }
.stile-nuovo h2 { font-weight: 650; font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -.015em; }
.stile-nuovo h3 { font-weight: 600; }
.stile-nuovo .hero h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.stile-nuovo .eyebrow { color: var(--c-muted); letter-spacing: .12em; }
.stile-nuovo .eyebrow::before { width: 18px; height: 1px; }
.stile-nuovo :is(.hero, .page-hero) .eyebrow { color: rgb(255 255 255 / .85); }
.stile-nuovo .yt__play span { background: rgb(255 255 255 / .92); color: var(--c-deep); box-shadow: 0 4px 16px rgb(0 0 0 / .18); }
.stile-nuovo .yt:hover .yt__play span { transform: scale(1.04); }
.stile-nuovo .progress__bar span { background: var(--c-water); }
.stile-nuovo .mcard__tag { color: rgb(255 255 255 / .85); }
/* le fasce blu scuro diventano chiare (restano scuri la fascia finale d'invito, il footer e le foto) */
.stile-nuovo .section--deep:not(.cta-band) { background: var(--c-tint); color: var(--c-ink); --focus: var(--c-deep); }
.stile-nuovo .section--deep:not(.cta-band) :is(h2, h3) { color: var(--c-ink); }
.stile-nuovo .section--deep:not(.cta-band) :is(.lead, .featured__desc, .featured__caption, .feature p) { color: var(--c-muted); }
.stile-nuovo .section--deep:not(.cta-band) .sermon .who { color: var(--c-muted); }
.stile-nuovo .section--deep:not(.cta-band) :is(.sermon .ref, .eyebrow, .link-arrow) { color: var(--c-primary); }
.stile-nuovo .section--deep:not(.cta-band) .featured__caption strong { color: var(--c-ink); }
.stile-nuovo .section--deep:not(.cta-band) .series-chip { background: var(--c-surface); border-color: var(--c-line); color: var(--c-ink); }
.stile-nuovo .section--deep:not(.cta-band) .series-chip b { color: var(--c-primary); }
.stile-nuovo .section--deep:not(.cta-band) .btn--sun { --btn-bg: var(--c-primary); --btn-ink: #fff; }
.stile-nuovo .section--deep:not(.cta-band) .btn--ghost { --btn-ink: var(--c-primary); color: var(--c-primary); border-color: var(--c-primary); }
.stile-nuovo .section--deep:not(.cta-band) .btn--ghost:hover { background: var(--c-surface); }
.stile-nuovo .section--deep:not(.cta-band) .feature { background: var(--c-surface); border: 0; box-shadow: 0 0 0 1px var(--c-line); }
.stile-nuovo .section--deep:not(.cta-band) .feature .ico { background: var(--c-tint); color: var(--c-primary); }
.stile-nuovo .section--deep:not(.cta-band) .icon-btn:hover { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.stile-nuovo .section--deep:not(.cta-band) .progress__bar { background: rgb(14 90 115 / .15); }
.stile-nuovo .section--deep:not(.cta-band) .progress__labels { color: var(--c-muted); }
.stile-nuovo .section--white { background: var(--c-bg); }
.stile-nuovo .step::before { display: none; }
.stile-nuovo :is(.card, .step, .feature, .contact-line, .acard) { box-shadow: 0 0 0 1px var(--c-line); }
.stile-nuovo :is(.card, .acard):hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-1); }
.stile-nuovo .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.stile-nuovo .info-strip__card { box-shadow: 0 8px 30px rgb(10 46 61 / .08); }
.stile-nuovo .mcard::after { background: linear-gradient(180deg, rgb(var(--overlay-deep) / 0) 35%, rgb(var(--overlay-deep) / .62) 65%, rgb(var(--overlay-deep) / .88) 100%); }
.stile-nuovo .hero__media img { animation: none; transform: scale(var(--hero-zoom)); }
.stile-nuovo .marquee__track { animation-duration: 100s; }

/* animate: un solo momento firmato, l'onda del logo che si disegna piano sotto la parola in corsivo dell'hero.
   Una sola linea continua (non più un motivo ripetuto, che lasciava dei tagli) allungata quanto la parola. */
.stile-nuovo .hero h1 .accent { position: relative; display: inline-block; }
.stile-nuovo .hero h1 .accent::after {
  content: ""; position: absolute; left: .02em; right: .1em; bottom: -.2em; height: .26em; background: var(--c-sun);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 234 12' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C8 1.6 16 1.6 25 6 S39 10.4 48 6 S62 1.6 71 6 S85 10.4 94 6 S108 1.6 117 6 S131 10.4 140 6 S154 1.6 163 6 S177 10.4 186 6 S200 1.6 209 6 S223 10.4 232 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 234 12' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C8 1.6 16 1.6 25 6 S39 10.4 48 6 S62 1.6 71 6 S85 10.4 94 6 S108 1.6 117 6 S131 10.4 140 6 S154 1.6 163 6 S177 10.4 186 6 S200 1.6 209 6 S223 10.4 232 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  animation: fdv-onda 2.4s cubic-bezier(.45, 0, .25, 1) .6s both;
}
@keyframes fdv-onda { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.stile-nuovo .hero__content > * { animation: fdv-arrivo 1.2s cubic-bezier(.22, 1, .36, 1) .15s both; }
.stile-nuovo .hero__content > :nth-child(2) { animation-delay: .32s; }
.stile-nuovo .hero__content > :nth-child(3) { animation-delay: .49s; }
.stile-nuovo .hero__content > :nth-child(4) { animation-delay: .66s; }
.stile-nuovo .hero__content > :nth-child(n+5) { animation-delay: .83s; }
@keyframes fdv-arrivo { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
/* la foto dell'hero e la striscia degli orari arrivano piano, senza scatti */
.stile-nuovo .hero__media { animation: fdv-dissolvi 1.4s ease-out both; }
.stile-nuovo .hero + .info-strip { animation: fdv-arrivo 1.2s cubic-bezier(.22, 1, .36, 1) 1s both; }
@keyframes fdv-dissolvi { from { opacity: 0; } to { opacity: 1; } }
/* passaggio da una pagina all'altra: una dissolvenza breve invece del cambio secco (Chrome, Edge, Safari recenti) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fdv-esci .35s ease-in both; }
::view-transition-new(root) { animation: fdv-dissolvi .55s ease-out both; }
@keyframes fdv-esci { to { opacity: 0; } }
/* entrata morbida: i blocchi salgono di poco e si schiariscono con calma, uno dopo l'altro (--d = ritardo) */
.stile-nuovo .reveal { transform: translateY(18px); transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1), transform 1.3s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(var(--d, 0s) * 1.8); }
.stile-nuovo .reveal.is-in, .stile-nuovo.no-js .reveal { transform: none; }
.stile-nuovo.fdv-anim .progress__bar span { transform-origin: left center; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.16, 1, .3, 1) .2s; }
.stile-nuovo.fdv-anim .progress.is-in .progress__bar span { transform: none; }
.stile-nuovo :is(.btn, .chip, .icon-btn):active { transform: scale(.97); transition-duration: .1s; }
.stile-nuovo .yt:active .yt__play span { transform: scale(.94); transition-duration: .1s; }

/* delight: il vapore del caffè e "quanto manca a domenica" nella striscia degli orari */
.stile-nuovo .info-item--caffe .ico { position: relative; overflow: visible; }
.stile-nuovo .info-item--caffe .ico::before, .stile-nuovo .info-item--caffe .ico::after {
  content: ""; position: absolute; top: 4px; width: 4px; height: 12px; background: var(--c-primary); opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 12'%3E%3Cpath d='M2 11c-1.4-1.6-1.4-3.2 0-4.8S3.4 3 2 1' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 12'%3E%3Cpath d='M2 11c-1.4-1.6-1.4-3.2 0-4.8S3.4 3 2 1' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.stile-nuovo .info-item--caffe .ico::before { left: 17px; }
.stile-nuovo .info-item--caffe .ico::after { left: 24px; }
.stile-nuovo .info-item--caffe.is-steaming .ico::before { animation: fdv-vapore 2.4s ease-out 3; }
.stile-nuovo .info-item--caffe.is-steaming .ico::after { animation: fdv-vapore 2.4s ease-out .5s 3; }
.stile-nuovo .info-item--caffe:hover .ico::before { animation: fdv-vapore 2.4s ease-out infinite; }
.stile-nuovo .info-item--caffe:hover .ico::after { animation: fdv-vapore 2.4s ease-out .5s infinite; }
@keyframes fdv-vapore {
  0% { opacity: 0; transform: translateY(4px) scaleY(.6); }
  30% { opacity: .55; }
  100% { opacity: 0; transform: translateY(-9px) scaleY(1.1); }
}
.stile-nuovo .fdv-quando { color: var(--c-primary) !important; font-weight: 600; }
.stile-nuovo .fdv-quando--oggi { color: var(--c-ink) !important; }
.stile-nuovo .fdv-quando--oggi::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--c-life); vertical-align: 1px; }

@media (prefers-reduced-motion: reduce) {
  .stile-nuovo .hero h1 .accent::after, .stile-nuovo .hero__content > *, .stile-nuovo .info-item--caffe .ico::before, .stile-nuovo .info-item--caffe .ico::after { animation: none !important; }
  .stile-nuovo.fdv-anim .progress__bar span { transform: none; transition: none; }
}

/* --- stile nuovo sulle altre pagine --- */
/* quieter: la fascia "predicazioni sullo stesso brano" degli articoli diventa chiara */
.stile-nuovo .lx-band { background: var(--c-tint); color: var(--c-ink); --focus: var(--c-deep); }
.stile-nuovo .lx-band h2, .stile-nuovo .lx-sermons h3 { color: var(--c-ink); }
.stile-nuovo .lx-band__lead, .stile-nuovo .lx-sermons p { color: var(--c-muted); }

/* animate: la stessa onda firmata sotto la parola in corsivo dei titoli delle pagine interne */
.stile-nuovo .page-hero h1 .accent { position: relative; display: inline-block; }
.stile-nuovo .page-hero h1 .accent::after {
  content: ""; position: absolute; left: .02em; right: .1em; bottom: -.18em; height: .24em; background: var(--c-sun);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 234 12' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C8 1.6 16 1.6 25 6 S39 10.4 48 6 S62 1.6 71 6 S85 10.4 94 6 S108 1.6 117 6 S131 10.4 140 6 S154 1.6 163 6 S177 10.4 186 6 S200 1.6 209 6 S223 10.4 232 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 234 12' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C8 1.6 16 1.6 25 6 S39 10.4 48 6 S62 1.6 71 6 S85 10.4 94 6 S108 1.6 117 6 S131 10.4 140 6 S154 1.6 163 6 S177 10.4 186 6 S200 1.6 209 6 S223 10.4 232 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  animation: fdv-onda 2.2s cubic-bezier(.45, 0, .25, 1) .5s both;
}
.stile-nuovo .page-hero .container > * { animation: fdv-arrivo 1.1s cubic-bezier(.22, 1, .36, 1) .1s both; }
.stile-nuovo .page-hero .container > :nth-child(2) { animation-delay: .26s; }
.stile-nuovo .page-hero .container > :nth-child(3) { animation-delay: .42s; }
.stile-nuovo .page-hero .container > :nth-child(n+4) { animation-delay: .58s; }

/* animate: l'onda sopra "il cuore della predica in una frase" si disegna quando la frase arriva sullo schermo */
.stile-nuovo.fdv-anim .px-frase::before { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.16, 1, .3, 1) .15s; }
.stile-nuovo.fdv-anim .px-frase.is-in::before { clip-path: inset(0 0 0 0); }

/* animate: nel menu del telefono l'onda sotto la pagina attuale si disegna quando il menu si apre */
@media (max-width: 1020px) {
  .stile-nuovo .site-nav.is-open .nav-list a[aria-current="page"] > span::after { animation: fdv-onda .8s cubic-bezier(.16, 1, .3, 1) .25s both; }
}

/* animate: le domande frequenti si aprono e si chiudono morbide (dove il browser lo permette; altrove come prima) */
@supports selector(::details-content) {
  .stile-nuovo { interpolate-size: allow-keywords; }
  .stile-nuovo .accordion details::details-content { block-size: 0; overflow: clip; transition: block-size .3s cubic-bezier(.16, 1, .3, 1), content-visibility .3s allow-discrete; }
  .stile-nuovo .accordion details[open]::details-content { block-size: auto; }
}

/* animate: quando cambi filtro (articoli, playlist) le schede compaiono con una dissolvenza breve */
.stile-nuovo :is(.acard, [role="tabpanel"]) { transition: opacity .25s ease-out; }
@starting-style { .stile-nuovo :is(.acard, [role="tabpanel"]) { opacity: 0; } }

/* delight: "quanto manca a domenica" anche nel riquadro "Ogni domenica" del menu */
.stile-nuovo .nav-sunday__quando { margin: 8px 0 0 !important; font: 600 var(--fs-md)/1.3 var(--f-head); }

@media (prefers-reduced-motion: reduce) {
  .stile-nuovo .hero__media, .stile-nuovo .hero + .info-strip, ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .stile-nuovo .reveal { transform: none; transition: none; }
  .stile-nuovo .page-hero h1 .accent::after, .stile-nuovo .page-hero .container > *, .stile-nuovo .site-nav.is-open .nav-list a[aria-current="page"] > span::after { animation: none !important; }
  .stile-nuovo.fdv-anim .px-frase::before { clip-path: none; transition: none; }
  .stile-nuovo .accordion details::details-content { transition: none; }
}

/* Home: la striscia degli orari sta dentro la foto dell'hero (solo la home ha .hero; le pagine dei ministeri tengono la loro striscia): in fondo, sotto una linea sottile, testo bianco e icone gialle.
   Sotto gli 880px gli orari scendono su una fascia scura che continua la foto. */
.hero, .hero + .info-strip { --strip-h: 112px; }   /* altezza della riga degli orari: la usano l'hero e la striscia */
@media (min-width: 881px) {
  .stile-nuovo .hero__content { padding-bottom: calc(var(--strip-h) + clamp(32px, 4vw, 56px)); }
  .stile-nuovo .hero + .info-strip { margin-top: calc(-1 * var(--strip-h)); }
  .stile-nuovo .hero + .info-strip .info-strip__card {
    min-height: var(--strip-h); padding: 0; background: transparent; box-shadow: none; border-radius: 0;
    border-top: 1px solid rgb(255 255 255 / .4); color: #fff;
  }
}
.stile-nuovo .hero::after {
  background:
    linear-gradient(rgb(var(--overlay-deep) / .2), rgb(var(--overlay-deep) / .2)),
    linear-gradient(180deg, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / 0) 18%),
    linear-gradient(90deg, rgb(8 16 20 / .62) 0%, rgb(8 16 20 / .28) 45%, rgb(8 16 20 / 0) 75%),
    linear-gradient(180deg, rgb(8 16 20 / 0) 50%, rgb(8 16 20 / .78) 100%);
}
.stile-nuovo .hero + .info-strip .info-item .ico { width: auto; height: auto; background: none; color: var(--c-sun); }
.stile-nuovo .hero + .info-strip .info-item .ico svg { width: 28px; height: 28px; stroke-width: 1.6; }
.stile-nuovo .hero + .info-strip .info-item strong { color: #fff; font-weight: 600; }
.stile-nuovo .hero + .info-strip .info-item span { color: rgb(255 255 255 / .82); }
.stile-nuovo .hero + .info-strip .info-strip__card .btn {
  --btn-bg: transparent; --btn-ink: var(--c-sun); border: 0; border-left: 1px solid rgb(255 255 255 / .4); border-radius: 0;
  padding-left: var(--s-6); box-shadow: none;
}
.stile-nuovo .hero + .info-strip .info-strip__card .btn:hover { --btn-ink: #fff; transform: none; box-shadow: none; }
@media (max-width: 880px) {
  .stile-nuovo .hero::after { background:
    linear-gradient(rgb(var(--overlay-deep) / .2), rgb(var(--overlay-deep) / .2)),
    linear-gradient(180deg, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / 0) 18%),
    linear-gradient(180deg, rgb(10 46 61 / 0) 45%, rgb(10 46 61 / 1) 100%); }
  .stile-nuovo .hero + .info-strip { margin-top: 0; background: var(--c-deep); padding-bottom: var(--s-6); }
  .stile-nuovo .hero + .info-strip .info-strip__card { background: transparent; box-shadow: none; border-radius: 0; padding: var(--s-5) 0 0; border-top: 1px solid rgb(255 255 255 / .2); color: #fff; }
  .stile-nuovo .hero + .info-strip .info-strip__card .btn { border-left: 0; padding-left: 0; justify-content: flex-start; width: auto; }
}

/* ================= Il Centro: un racconto in tre capitoli =================
   Apertura a tutto schermo, una striscia ferma con le case di prima, poi la visione,
   il cantiere (le foto scorrono a tutto schermo, didascalie piccole) e il grande giorno. */
.cx-cap { display: flex; align-items: center; gap: 10px; font: 600 .95rem/1 var(--f-head); color: var(--c-primary); margin-bottom: var(--s-4); }
.cx-cap::before { content: ""; width: 28px; height: 2px; background: currentColor; }

/* apertura */
.cx-apertura { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; color: #fff; isolation: isolate; overflow: hidden; }
.cx-apertura__media { position: absolute; inset: 0; z-index: -2; }
.cx-apertura__media img { width: 100%; height: 100%; object-fit: cover; }
.cx-apertura::after { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgb(10 46 61 / .78) 0%, rgb(10 46 61 / .45) 50%, rgb(10 46 61 / .1) 85%),
  linear-gradient(180deg, rgb(10 46 61 / 0) 55%, rgb(10 46 61 / .7) 100%); }
.cx-apertura .container { padding-block: calc(var(--header-h) + 64px) clamp(56px, 9vh, 104px); }
.cx-apertura h1 { font-size: clamp(2.6rem, 7.2vw, 6.2rem); font-weight: 700; line-height: .98; letter-spacing: -.03em; max-width: 11em; color: #fff; margin: 0; }
.cx-riga { display: block; animation: cx-entra 1.1s var(--ease-out) both; }
.cx-riga + .cx-riga { color: var(--c-sun); animation-delay: .5s; }
@keyframes cx-entra { from { opacity: 0; transform: translateY(24px); } }
.cx-apertura p { margin: 24px 0 0; font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 34em; color: rgb(255 255 255 / .9); animation: cx-entra 1s var(--ease-out) 1s both; }
.cx-scendi { margin-top: 40px; display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font: 500 1rem/1 var(--f-head); animation: cx-entra 1s var(--ease-out) 1.4s both; }
.cx-scendi span { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .7); display: grid; place-items: center; }
.cx-scendi svg { width: 18px; height: 18px; transform: rotate(90deg); }
.cx-scendi:hover span { background: rgb(255 255 255 / .12); }

/* da dove veniamo: sei case, poi il centro */
.cx-sette { background: var(--c-deep); color: #fff; padding-block: 28px; }
.cx-sette__strada { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); position: relative; }
.cx-sette__strada::before { content: ""; position: absolute; left: 6px; right: 14%; top: 6px; height: 2px; background: rgb(255 255 255 / .35); }
.cx-sette__strada li { position: relative; display: grid; gap: 4px; align-content: start; padding: 22px 12px 0 0; font: 500 .9rem/1.3 var(--f-head); color: rgb(255 255 255 / .75); }
.cx-sette__strada li::before { content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--c-deep); border: 3px solid rgb(255 255 255 / .6); }
.cx-sette__strada b { font: italic 400 1.05rem/1 var(--f-accent); color: #fff; }
.cx-sette__strada .cx-sette__qui { color: #fff; }
.cx-sette__strada .cx-sette__qui::before { background: var(--c-sun); border-color: var(--c-sun); box-shadow: 0 0 0 6px rgb(244 181 68 / .25); }
.cx-sette__qui b { color: var(--c-sun); }

/* 1 · la visione */
.cx-visione { background: var(--c-tint); padding-block: clamp(80px, 12vw, 160px); }
.cx-cit { font: italic 400 clamp(2rem, 4.6vw, 3.8rem)/1.15 var(--f-accent); color: var(--c-deep); max-width: 17em; margin: 0; letter-spacing: -.01em; }
.cx-visione__griglia { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: clamp(56px, 8vw, 96px); scroll-margin-top: calc(var(--header-h) + 24px); }
.cx-visione__testo { display: grid; gap: 18px; }
.cx-visione__testo h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; margin: 0; }
.cx-visione__testo p { color: var(--c-muted); margin: 0; }
.cx-per-chi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cx-per-chi li { padding: 8px 14px; border-radius: 999px; background: var(--c-surface); font: 500 .95rem/1.2 var(--f-head); color: var(--c-deep); }
.cx-lingue { margin: 0; }

/* 2 · il cantiere: la foto a tutto schermo segue la tappa che stai leggendo */
.cx-cantiere { position: relative; background: var(--c-deep); }
.cx-palco { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.cx-palco figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s var(--ease-out); }
.cx-palco figure.qui { opacity: 1; }
.cx-palco img { width: 100%; height: 100%; object-fit: cover; }
.cx-palco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(10 46 61 / .35) 0%, rgb(10 46 61 / 0) 35%); pointer-events: none; }
.cx-palco__futuro { background: var(--c-deep); display: grid; place-items: center; }
.cx-palco__futuro svg { width: min(60vw, 560px); height: auto; color: var(--c-sun); }
.cx-tappe { position: relative; z-index: 1; margin-top: -100vh; }
.cx-intro { min-height: 90vh; display: grid; align-items: center; }
.cx-pannello { background: rgb(251 247 240 / .96); border-radius: 12px; padding: clamp(24px, 3vw, 40px); max-width: 520px; box-shadow: 0 20px 60px rgb(10 46 61 / .25); }
.cx-intro h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 700; letter-spacing: -.025em; line-height: 1; color: var(--c-deep); margin: 0; }
.cx-intro p { margin: 16px 0 0; color: var(--c-muted); }
.cx-tappa { min-height: 120vh; display: grid; align-items: end; padding-bottom: 12vh; }
.cx-tappa .cx-pannello { display: grid; gap: 8px; max-width: 460px; padding: 24px 28px 26px; border-radius: 12px; background: rgb(251 247 240 / .93); box-shadow: 0 10px 30px rgb(10 46 61 / .25); }
.cx-tappa__conta { font: 500 .9rem/1 var(--f-head); color: var(--c-muted); display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.cx-punti { display: flex; gap: 4px; }
.cx-punti i { width: 22px; height: 5px; border-radius: 2px; background: var(--c-line); }
.cx-punti i.on { background: var(--c-primary); }
.cx-punti i.dopo { background: repeating-linear-gradient(90deg, var(--c-sun) 0 4px, transparent 4px 7px); }
.cx-tappa time { font: italic 400 1.5rem/1.1 var(--f-accent); color: var(--c-primary); }
.cx-tappa h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; color: var(--c-ink); margin: 0; }
.cx-tappa p { color: var(--c-muted); font-size: 1.0625rem; line-height: 1.55; margin: 0; }
.cx-tappa img { display: none; }
.cx-tappa--futura time { color: #8A5C0C; }
.cx-coda { height: 40vh; }

/* 3 · il grande giorno */
.cx-giorno { background: #FCEBC4; padding-block: clamp(88px, 13vw, 168px); position: relative; overflow: hidden; }
.cx-giorno .cx-cap { color: #8A5C0C; }
.cx-giorno h2 { font-size: clamp(2.8rem, 7.4vw, 6rem); font-weight: 700; line-height: .95; letter-spacing: -.035em; color: var(--c-deep); max-width: 10em; margin: 0; }
.cx-giorno__sotto { margin: 24px 0 0; font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 32em; color: var(--c-ink); }
.cx-modi { list-style: none; margin: clamp(48px, 7vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--c-deep); }
.cx-modi li { padding: 24px 28px 0 0; display: grid; gap: 8px; align-content: start; }
.cx-modi li + li { padding-left: 28px; border-left: 1px solid rgb(10 46 61 / .2); }
.cx-modi h3 { font-size: 1.35rem; font-weight: 600; color: var(--c-deep); margin: 0; }
.cx-modi p { color: var(--c-ink); opacity: .82; margin: 0; }
.cx-azioni { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.cx-azioni small { color: #8A5C0C; font: 500 .95rem/1.3 var(--f-head); }
.cx-porta { position: absolute; right: max(20px, 6vw); bottom: 0; width: clamp(140px, 22vw, 300px); color: var(--c-deep); opacity: .1; pointer-events: none; }

/* telefono e tablet: le tappe diventano foto con la didascalia sotto */
@media (max-width: 860px) {
  .cx-sette .container { overflow-x: auto; scrollbar-width: none; }
  .cx-sette__strada { grid-template-columns: repeat(7, 132px); width: max-content; }
  .cx-visione__griglia { grid-template-columns: minmax(0, 1fr); }
  .cx-palco { display: none; }
  .cx-cantiere { background: var(--c-bg); }
  .cx-tappe { margin-top: 0; padding-block: 72px; }
  .cx-intro, .cx-tappa { min-height: 0; margin-bottom: 40px; padding-bottom: 0; }
  .cx-pannello, .cx-tappa .cx-pannello { box-shadow: none; padding: 0; background: transparent; max-width: none; border-radius: 0; }
  .cx-tappa img { display: block; order: -1; border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-bottom: 8px; }
  .cx-coda { display: none; }
  .cx-modi { grid-template-columns: minmax(0, 1fr); }
  .cx-modi li, .cx-modi li + li { padding: 20px 0; border-left: 0; border-bottom: 1px solid rgb(10 46 61 / .2); }
}
/* senza animazioni: tutto fermo e in fila, leggibile */
@media (prefers-reduced-motion: reduce) {
  .cx-riga, .cx-apertura p, .cx-scendi { animation: none !important; }
  .cx-palco { display: none; }
  .cx-cantiere { background: var(--c-bg); }
  .cx-tappe { margin-top: 0; padding-block: 72px; }
  .cx-intro, .cx-tappa { min-height: 0; margin-bottom: 48px; padding-bottom: 0; }
  .cx-pannello, .cx-tappa .cx-pannello { box-shadow: none; max-width: 640px; }
  .cx-tappa img { display: block; order: -1; border-radius: 10px; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
  .cx-coda { display: none; }
}

/* ================= Home, «Trova il tuo posto»: il fiume delle età con la vetrina =================
   Un ministero è sempre aperto nella vetrina: si capisce subito che ogni bolla porta da qualche parte. */
.fv { background: var(--c-tint); }
.fv-testa { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.fv-testa .lead { margin-bottom: 0; }
.fv-aiuto { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px; border-radius: 999px; background: var(--c-surface); font: 500 .95rem/1.2 var(--f-head); color: var(--c-deep); box-shadow: 0 0 0 1px rgb(14 90 115 / .15); }
.fv-aiuto svg { width: 20px; height: 20px; color: var(--c-primary); flex: none; }
.fv-aiuto [data-dito] { display: none; }
@media (hover: none) { .fv-aiuto [data-mouse] { display: none; } .fv-aiuto [data-dito] { display: inline; } }
.fv-fiume { position: relative; margin-top: 44px; }
.fv-onda { position: absolute; left: 0; right: 0; top: 34px; height: 40px; width: 100%; color: var(--c-water); pointer-events: none; }
.fv-fasce { display: grid; grid-template-columns: 1fr 1fr 4fr 3fr; position: relative; }
.fv-fascia { display: grid; justify-items: center; align-content: start; gap: 12px; border-left: 1px dashed rgb(14 90 115 / .25); padding: 0 4px; }
.fv-fascia:first-child { border-left: 0; }
.fv-eta { order: 2; margin: 0; font: italic 400 1.15rem/1 var(--f-accent); color: var(--c-primary); }
.fv-bolle { display: flex; justify-content: space-around; width: 100%; }
.fv-bolla { position: relative; display: grid; justify-items: center; gap: 8px; width: 104px; padding-bottom: 18px; text-decoration: none; color: var(--c-deep); }
.fv-cerchio { position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; border: 4px solid var(--c-surface); box-shadow: 0 6px 18px rgb(10 46 61 / .18); background: var(--c-deep); color: var(--c-sun); display: grid; place-items: center; transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s; }
.fv-cerchio img { width: 100%; height: 100%; object-fit: cover; }
.fv-cerchio svg { width: 34px; height: 34px; }
.fv-piu { position: absolute; right: 6px; top: 58px; width: 26px; height: 26px; border-radius: 50%; background: var(--c-sun); color: var(--c-deep); display: grid; place-items: center; box-shadow: 0 2px 6px rgb(10 46 61 / .25); transition: transform .3s var(--ease-out), opacity .3s; }
.fv-piu svg { width: 14px; height: 14px; }
.fv-nome { font: 600 .95rem/1.2 var(--f-head); text-align: center; }
.fv-bolla:hover .fv-cerchio { transform: scale(1.08); border-color: var(--c-sun); }
.fv-bolla[aria-current] .fv-cerchio { transform: scale(1.12); border-color: var(--c-sun); box-shadow: 0 0 0 5px rgb(244 181 68 / .35), 0 8px 22px rgb(10 46 61 / .22); }
.fv-bolla[aria-current] .fv-piu { opacity: 0; transform: scale(.5); }
.fv-bolla[aria-current]::after { content: ""; position: absolute; bottom: -14px; left: 50%; width: 22px; height: 22px; background: var(--c-surface); transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.fv-bolla:focus-visible { outline: none; }
.fv-bolla:focus-visible .fv-cerchio { outline: 3px solid var(--focus); outline-offset: 3px; }
.fv-bolla.fv-saluta .fv-cerchio { animation: fv-saluta 1.6s var(--ease-out) 2; }
@keyframes fv-saluta { 40% { transform: scale(1.14); box-shadow: 0 0 0 10px rgb(244 181 68 / .3); } }
.fv-vetrina { margin-top: 14px; }
.fv-scheda { background: var(--c-surface); border-radius: 16px; box-shadow: 0 20px 50px rgb(10 46 61 / .12); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); overflow: hidden; min-height: 340px; }
.fv-scheda[hidden] { display: none; }
.fv-scheda.fv-entra > * { animation: fv-entra .45s var(--ease-out); }
@keyframes fv-entra { from { opacity: 0; transform: translateY(8px); } }
.fv-scheda__foto { position: relative; background: var(--c-deep); min-height: 260px; }
.fv-scheda__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv-scheda__foto--icona { display: grid; place-items: center; color: var(--c-sun); background: var(--c-primary); }
.fv-scheda__foto--icona svg { width: 72px; height: 72px; }
.fv-scheda__testo { padding: clamp(24px, 3vw, 40px); display: grid; gap: 10px; align-content: center; }
.fv-scheda__testo > * { margin: 0; }
.fv-tag { font: 500 .95rem/1.2 var(--f-head); color: var(--c-primary); }
.fv-scheda h3 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; }
.fv-motto { font: italic 400 1.3rem/1.25 var(--f-accent); color: var(--c-primary); }
.fv-scheda__testo p:not(.fv-motto) { color: var(--c-muted); }
.fv-info { display: flex; flex-wrap: wrap; gap: 6px; }
.fv-info span { padding: 6px 12px; border-radius: 999px; background: var(--c-tint); font: 500 .9rem/1.3 var(--f-head); color: var(--c-deep); }
.fv-piede { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.fv-frecce { display: flex; align-items: center; gap: 8px; font: 500 .9rem/1 var(--f-head); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.fv-tutti { margin: var(--s-5) 0 0; }
@media (max-width: 860px) {
  .fv-onda { display: none; }
  .fv-fasce { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * 16px); padding: 4px 16px 6px; }
  .fv-fasce::-webkit-scrollbar { display: none; }
  .fv-fascia { border-left: 0; padding: 0; justify-items: start; gap: 6px; flex: none; }
  .fv-fascia + .fv-fascia { border-left: 1px dashed rgb(14 90 115 / .3); padding-left: 6px; }
  .fv-eta { order: -1; font-size: 1rem; padding-left: 8px; }
  .fv-bolle { gap: 2px; }
  .fv-bolla { width: 86px; scroll-snap-align: start; }
  .fv-cerchio { width: 70px; height: 70px; }
  .fv-piu { top: 48px; right: 4px; width: 22px; height: 22px; }
  .fv-nome { font-size: .85rem; }
  .fv-scheda { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .fv-scheda__foto { aspect-ratio: 16 / 10; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fv-bolla.fv-saluta .fv-cerchio, .fv-scheda.fv-entra > * { animation: none; }
  .fv-cerchio, .fv-piu { transition: none; }
}

/* «Trova il tuo posto» sul telefono: piccole foto in alto come indice, sotto le card da sfogliare col dito
   (una spinta = una card; le vicine più piccole e un po' più scure). Sul PC resta il fiume con la vetrina. */
.fm { display: none; }
@media (max-width: 860px) {
  .fv .fv-aiuto, .fv .fv-fiume, .fv .fv-vetrina { display: none; }
  .fm { display: block; }
  .fm-bolle { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 20px -16px 0; padding: 8px 16px 4px; scroll-padding-inline: 16px; overscroll-behavior-x: contain; }
  .fm-bolle::-webkit-scrollbar { display: none; }
  .fm-bolla { all: unset; box-sizing: border-box; flex: none; width: 68px; display: grid; justify-items: center; gap: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .fm-cerchio { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 3px solid var(--c-surface); box-shadow: 0 3px 10px rgb(10 46 61 / .18); background: var(--c-deep); color: var(--c-sun); display: grid; place-items: center; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease-out); }
  .fm-cerchio img { width: 100%; height: 100%; object-fit: cover; }
  .fm-cerchio svg { width: 24px; height: 24px; }
  .fm-n { font: 500 .76rem/1.15 var(--f-head); text-align: center; color: var(--c-muted); }
  .fm-bolla[aria-current] .fm-cerchio { border-color: var(--c-sun); box-shadow: 0 0 0 3px rgb(244 181 68 / .5), 0 3px 10px rgb(10 46 61 / .18); transform: scale(1.06); }
  .fm-bolla[aria-current] .fm-n { color: var(--c-deep); font-weight: 650; }
  .fm-bolla:active .fm-cerchio { transform: scale(.94); }
  .fm-bolla:focus-visible .fm-cerchio { outline: 3px solid var(--focus); outline-offset: 2px; }
  .fm-fila { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 12px -16px 0; padding: 4px 16px 8px; scroll-padding-inline: 16px; overscroll-behavior-x: contain; }
  .fm-fila::-webkit-scrollbar { display: none; }
  .fm-fila li { scroll-snap-align: start; scroll-snap-stop: always; }
  .fm-card { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none; background: linear-gradient(160deg, var(--c-primary), var(--c-deep)); transform: scale(var(--s, 1)); filter: brightness(var(--b, 1)); box-shadow: 0 12px 28px rgb(10 46 61 / .18); will-change: transform; -webkit-tap-highlight-color: transparent; }
  .fm-card img { width: 100%; height: 100%; object-fit: cover; }
  .fm-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 46 61 / .28) 0%, rgb(10 46 61 / 0) 22%, rgb(10 46 61 / 0) 42%, rgb(10 46 61 / .6) 64%, rgb(10 46 61 / .94) 100%); }
  .fm-ic { position: absolute; inset: 0 0 42%; display: grid; place-items: center; color: var(--c-sun); }
  .fm-ic svg { width: 64px; height: 64px; }
  .fm-eta { position: absolute; top: 14px; left: 14px; z-index: 1; font: 500 .78rem/1 var(--f-head); color: #fff; padding: 7px 10px 7px 22px; border-radius: 999px; background: rgb(10 46 61 / .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .fm-eta::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--c-sun); }
  .fm-testo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 16px 18px 18px; display: grid; gap: 4px; }
  .fm-riga { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .fm-testo b { font: 700 1.55rem/1.08 var(--f-head); letter-spacing: -.015em; }
  .fm-freccia { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c-sun); color: var(--c-deep); display: grid; place-items: center; box-shadow: 0 4px 12px rgb(0 0 0 / .2); transition: transform .25s var(--ease-out); }
  .fm-freccia svg { width: 16px; height: 16px; }
  .fm-testo em { font: italic 400 1rem/1.25 var(--f-accent); color: var(--c-sun); }
  .fm-d { font-size: .88rem; line-height: 1.4; color: rgb(255 255 255 / .82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
  .fm-card:active .fm-freccia { transform: translateX(3px); }
  .fm-card:focus-visible { outline: 3px solid var(--c-sun); outline-offset: 3px; }
  .fm-aiuto { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font: 500 .85rem/1.2 var(--f-head); color: var(--c-muted); transition: opacity .4s; }
  .fm-aiuto svg { width: 18px; height: 18px; color: var(--c-primary); animation: fm-spinta 1.8s var(--ease-out) infinite; }
  .fm-aiuto.via { opacity: 0; }
  @keyframes fm-spinta { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } }
  .fm-piede { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
  .fm-conto { font: 500 .9rem/1 var(--f-head); color: var(--c-muted); font-variant-numeric: tabular-nums; }
  .fm-punti { display: flex; gap: 5px; }
  .fm-punti i { width: 6px; height: 6px; border-radius: 3px; background: rgb(14 90 115 / .25); transition: background .3s; }
  .fm-punti i.on { width: 18px; background: var(--c-primary); }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .fm-aiuto svg { animation: none; }
  .fm-card { transform: none; filter: none; }
}