/* Scuola dell'infanzia Sacro Cuore di Maria
   Motivo guida: l'arco a sesto acuto dell'ingresso della scuola. */

@font-face {
  font-family: 'Gabarito';
  src: url('/assets/fonts/gabarito-normal.woff2') format('woff2');
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/assets/fonts/literata-normal.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'Literata';
  src: url('/assets/fonts/literata-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Palette: Blu Maria, cielo, intonaco della facciata, colori del logo (sezioni e accento "cuore") */
  --blue: #1d3a8a;
  --blue-deep: #142a66;
  --ink: #1a2547;
  --ink-soft: #4a5577;
  --sky: #eaf1fb;
  --sky-line: #cfdcf1;
  --stucco: #f3d98b;
  --stucco-soft: #fbf1d2;
  --white: #ffffff;
  --nido: #3e9b4f;
  --nido-text: #2b7139; /* verde del Nido per i testi: 5,4:1 su bianco */
  --cuore: #e3812b;
  --cuore-text: #a85a10;
  --infanzia: #2f6fd1;

  --display: 'Gabarito', 'Avenir Next', 'Segoe UI', sans-serif;
  --text: 'Literata', Georgia, 'Times New Roman', serif;

  --step--1: 0.889rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem);
  --step-4: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
  --step-5: clamp(2.6rem, 1.7rem + 4vw, 4.6rem);

  --wrap: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --space: clamp(3.5rem, 7vw, 6.5rem);
  --radius: 14px;

  /* Arco a sesto acuto, come l'ingresso della scuola */
  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100V46C0 22 20 6 50 0c30 6 50 22 50 46v54z'/%3E%3C/svg%3E");
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  font-optical-sizing: auto;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--display);
  color: var(--blue);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--cuore); outline-offset: 3px; border-radius: 4px; }
strong { font-weight: 600; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-soft); }

.skip {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--blue); color: var(--white); padding: 0.6rem 1rem; border-radius: 8px;
  font-family: var(--display); font-weight: 600;
}
.skip:focus { top: 1rem; }

/* ------------------------------------------------------------------------
   Arco
   ------------------------------------------------------------------------ */
.arch { margin: 0; overflow: hidden; -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat; }
.arch img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------------
   Pulsanti
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0.7rem 1.4rem;
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem; line-height: 1.2;
  border-radius: 999px; text-decoration: none; text-align: center;
  border: 2px solid var(--blue); transition: background-color .15s, color .15s;
}
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn-ghost { background: transparent; color: var(--blue); }
.btn-ghost:hover { background: var(--white); }
.btn-small { min-height: 2.5rem; padding: 0.45rem 1.1rem; font-size: 1rem; }

/* ------------------------------------------------------------------------
   Topbar e header
   ------------------------------------------------------------------------ */
.topbar { background: var(--blue); color: #dfe7f7; font-family: var(--display); font-size: 0.9375rem; }
.topbar-inner { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; padding-block: 0.45rem; }
.topbar a { color: var(--white); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar-100 { margin-left: auto; font-weight: 600; color: var(--stucco) !important; }
/* Sul telefono: telefono e orari in alto, l'email resta nei contatti */
@media (max-width: 720px) { .topbar-email, .topbar-dopo { display: none; } .topbar-100 { margin-left: 0; } }

/* Niente backdrop-filter: renderebbe l'header il riferimento del menu mobile (position: fixed). */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--sky-line); }
.topbar .wrap, .site-header .wrap { width: min(100% - 2 * var(--gutter), 84rem); }
.header-inner { display: flex; align-items: center; gap: 2rem; min-height: 5rem; }
.brand img { width: 150px; height: auto; }

.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.15rem; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.55rem 0.7rem; border-radius: 999px;
  font: 600 1rem/1.2 var(--display); color: var(--ink); text-decoration: none;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.nav-link:hover, .nav-toggle[aria-expanded='true'] { background: var(--sky); color: var(--blue); }
.nav-link[aria-current='page'], .nav-toggle.is-current { color: var(--blue); box-shadow: inset 0 -3px 0 var(--stucco); border-radius: 0; }
.nav-toggle svg { transition: transform .2s; }
.nav-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }

.has-panel { position: relative; }
.nav-panel { display: none; }
.nav-toggle[aria-expanded='true'] + .nav-panel { display: block; }
.nav-group-title { font-family: var(--display); font-weight: 700; color: var(--ink-soft); font-size: 0.9375rem; margin: 0 0 0.4rem; }
.nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-group a { display: block; padding: 0.3rem 0; font-family: var(--display); font-weight: 500; font-size: 1.0625rem; text-decoration: none; color: var(--ink); }
.nav-group a:hover, .nav-group a[aria-current='page'] { color: var(--blue); text-decoration: underline; }
.nav-panel-all { font-family: var(--display); font-weight: 600; }

.burger { display: none; }

@media (min-width: 1000px) {
  .site-nav { margin-left: auto; }
  .nav-panel {
    position: absolute; top: calc(100% + 0.9rem); left: -1.5rem; width: max-content;
    background: var(--white); border: 1px solid var(--sky-line); border-radius: 20px;
    box-shadow: 0 18px 40px -18px rgba(29, 58, 138, 0.35);
  }
  .nav-panel-inner { display: grid; grid-template-columns: repeat(var(--cols, 3), auto); gap: 0.5rem 2.75rem; padding: 1.5rem 1.75rem 1.25rem; }
  .has-panel:last-of-type .nav-panel, .has-panel:nth-last-child(-n + 3) .nav-panel { left: auto; right: -1.5rem; }
  .nav-panel-all { grid-column: 1 / -1; padding-top: 0.9rem; border-top: 1px solid var(--sky-line); }
}

@media (max-width: 999px) {
  .header-inner { justify-content: space-between; min-height: 4.25rem; }
  .brand img { width: 120px; }
  .burger {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font: 600 1rem var(--display); color: var(--blue);
    background: var(--sky); border: 0; border-radius: 999px; padding: 0.6rem 1rem; cursor: pointer;
  }
  .burger-lines, .burger-lines::before, .burger-lines::after {
    display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s;
  }
  .burger-lines::before, .burger-lines::after { content: ''; position: absolute; left: 0; }
  .burger-lines::before { top: -6px; }
  .burger-lines::after { top: 6px; }
  .burger[aria-expanded='true'] .burger-lines { background: transparent; }
  .burger[aria-expanded='true'] .burger-lines::before { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded='true'] .burger-lines::after { transform: translateY(-6px) rotate(-45deg); }

  .site-nav {
    display: none; position: fixed; inset: var(--header-h, 4.25rem) 0 0 0; z-index: 49;
    background: var(--white); overflow-y: auto; padding: 1rem var(--gutter) 3rem;
  }
  .site-nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--sky-line); }
  .nav-link { width: 100%; justify-content: space-between; padding: 1rem 0.25rem; font-size: 1.25rem; border-radius: 0; }
  .nav-link:hover, .nav-toggle[aria-expanded='true'] { background: none; }
  .nav-link[aria-current='page'], .nav-toggle.is-current { box-shadow: none; text-decoration: underline; text-decoration-color: var(--stucco); text-decoration-thickness: 4px; }
  .nav-panel-inner { display: grid; gap: 1.25rem; padding: 0.25rem 0.25rem 1.5rem; }
  body.nav-open { overflow: hidden; }
}

/* ------------------------------------------------------------------------
   Hero (home)
   ------------------------------------------------------------------------ */
.hero { background: var(--sky); overflow: hidden; }
/* La hero riempie il primo schermo (meno topbar e header): il testo è centrato,
   l'arco occupa tutta l'altezza e "poggia" sul bordo inferiore come l'ingresso vero. */
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: clamp(2rem, 5vw, 5rem);
  min-height: min(calc(100svh - 7.6rem), 46rem);
}
.hero-text { align-self: center; padding-block: clamp(2rem, 5vh, 4rem); }
/* Il titolo scala con larghezza e altezza dello schermo: su un portatile resta su 3 righe */
.hero h1 { font-size: min(clamp(2.5rem, 1.4rem + 3vw, 4.25rem), 8.6svh); max-width: 15ch; margin-bottom: 0.45em; }
.hero-lead { font-size: var(--step-1); line-height: 1.55; max-width: 34ch; color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero-arch { align-self: end; height: calc(100% - clamp(1.5rem, 5vh, 3.5rem)); min-height: 22rem; background: var(--stucco); }
.hero-arch img { object-position: 52% 20%; }

@media (prefers-reduced-motion: no-preference) {
  .hero-arch { animation: arch-rise 1s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-arch img { animation: arch-settle 1.4s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes arch-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes arch-settle { from { transform: scale(1.12); } to { transform: scale(1); } }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .hero-text { padding-block: clamp(2rem, 6vw, 3rem) 2rem; }
  .hero h1 { font-size: clamp(2.4rem, 1.2rem + 5vw, 3.6rem); }
  .hero-arch { height: 22rem; min-height: 0; width: min(100%, 26rem); margin-inline: auto; }
}

/* ------------------------------------------------------------------------
   Blocchi della home
   ------------------------------------------------------------------------ */
.block { padding-block: var(--space); }
.block-sky { background: var(--sky); }
.block-title { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.025em; max-width: 20ch; }
.block-head { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 4rem; align-items: end; margin-bottom: 2.5rem; }
.block-head p { max-width: 42ch; color: var(--ink-soft); }
.block-more { margin-top: 2rem; font-family: var(--display); font-weight: 600; font-size: 1.125rem; }
@media (max-width: 760px) { .block-head { grid-template-columns: 1fr; } }

.sections { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
.section-card > a { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 0 clamp(1.25rem, 2.5vw, 2rem); align-items: end; color: inherit; text-decoration: none; }
.section-more { display: inline-block; margin-top: 0.9rem; font: 600 1.0625rem var(--display); color: var(--blue); text-decoration: underline; text-underline-offset: 0.2em; }
.section-card > a:hover .section-more { text-decoration-thickness: 2px; }
.section-card > a:hover .arch img { transform: scale(1.04); }
.section-card .arch img { transition: transform .4s ease; }
.section-card .arch { aspect-ratio: 3 / 4; border-bottom: 8px solid var(--c); }
.section-card .arch img { height: 100%; }
.section-card h3 { font-size: var(--step-2); margin-bottom: 0.2rem; }
.section-age { font-family: var(--display); font-weight: 700; color: var(--c-text, var(--c)); margin-bottom: 0.6rem; }
.section-card p:last-child { color: var(--ink-soft); margin-bottom: 0; }
.is-nido { --c: var(--nido); --c-text: var(--nido-text); }
.is-infanzia { --c: var(--infanzia); }
@media (max-width: 900px) { .sections { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .section-card > a { grid-template-columns: 7.5rem 1fr; align-items: center; } }

/* Infografica della giornata: l'arco del sole, uno spicchio per ogni momento */
.dg { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
/* Il viewBox stringe sull'arco: gli orari escono dal riquadro (overflow visibile) e su mobile sono nascosti */
.dg-arc { display: block; width: min(100% - 8rem, 52rem); margin-inline: auto; overflow: visible; }
.dg-glyph path { fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dg-arcname { font: 700 21px var(--display); letter-spacing: 0.01em; }
.dg-ticks line { stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; }
.dg-ticks text { font: 700 22px var(--display); fill: var(--ink-soft); }
.dg-caption { font: 700 26px var(--display); fill: var(--blue); }
.seg, .dg-legend li { transition: filter .2s, opacity .2s; }
/* Evidenziazione: filter e non opacity, che resta libera per l'animazione d'ingresso */
.dg.has-active .seg:not(.is-on) { filter: grayscale(.7) opacity(.25); }
.dg.has-active .dg-legend li:not(.is-on) { opacity: .4; }

.dg-legend { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 2.5rem; }
.dg-legend li { display: grid; grid-template-columns: 2.9rem 1fr; column-gap: 0.9rem; align-items: center; }
.dg-swatch { grid-row: span 2; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; }
.dg-swatch path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dg-time { font: 700 0.9375rem/1.2 var(--display); color: var(--ink-soft); align-self: end; }
.dg-title { font: 700 1.1875rem/1.2 var(--display); color: var(--blue); align-self: start; }
.dg-legend p { grid-column: 2; margin: 0.35rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }
.dg.is-compact .dg-legend { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.1rem 1.5rem; }
.dg.is-compact .dg-title { font-size: 1.0625rem; }
.dg-note { margin: 1.75rem 0 0; color: var(--ink-soft); }
.dg-section { padding-bottom: clamp(2rem, 4vw, 3rem); }
.giornata-intro { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.giornata-intro .block-title { margin-bottom: 1.25rem; }

@media (prefers-reduced-motion: no-preference) {
  .js .dg:not(.is-in) .seg, .js .dg:not(.is-in) .dg-ticks, .js .dg:not(.is-in) .dg-school { opacity: 0; }
  .dg.is-in .seg { transform-box: view-box; transform-origin: 500px 480px; animation: dg-seg 0.7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 120ms); }
  .dg.is-in .dg-school { animation: dg-fade 0.6s both; }
  .dg.is-in .dg-ticks { animation: dg-fade 0.6s 1.1s both; }
}
@keyframes dg-seg { from { opacity: 0; transform: rotate(-14deg) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes dg-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 960px) {
  .dg-legend, .dg.is-compact .dg-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
}
@media (max-width: 600px) {
  /* Su schermi stretti orari e didascalia nell'arco diventerebbero illeggibili: restano nella legenda */
  .dg-ticks text, .dg-caption, .dg-arcname { display: none; }
  .dg-arc { width: 100%; }
  .dg-legend, .dg.is-compact .dg-legend { grid-template-columns: 1fr; }
  .dg.is-compact .dg-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-title { font-size: 1.0625rem; }
}

.two-col { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li { padding: 1.4rem 0; border-top: 1px solid var(--sky-line); }
.news-list li:last-child { border-bottom: 1px solid var(--sky-line); }
.news-list time, .news-meta { font-family: var(--display); font-weight: 500; color: var(--ink-soft); font-size: 0.9875rem; }
.news-list h3 { margin: 0.2rem 0 0.35rem; font-size: var(--step-2); }
.news-list h3 a { text-decoration: none; }
.news-list h3 a:hover { text-decoration: underline; }
.news-list p { margin: 0; color: var(--ink-soft); }

.info-box { background: var(--stucco-soft); border-radius: 28px; padding: clamp(1.5rem, 3vw, 2.25rem); }
.info-box .block-title { font-size: var(--step-3); }
.info-list { margin: 0 0 1.25rem; }
.info-list div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(29, 58, 138, 0.15); }
.info-list dt { font-family: var(--display); font-weight: 600; color: var(--ink-soft); }
.info-list dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.125rem; color: var(--blue); }
.info-list dd span { display: block; font-weight: 500; font-size: 0.9375rem; color: var(--ink-soft); }

.copy-field {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.15rem 1rem;
  background: var(--white); border: 1px solid var(--sky-line); border-radius: 16px; padding: 0.9rem 0.9rem 0.9rem 1.15rem; margin-bottom: 0.75rem;
}
.copy-label { grid-column: 1; font-family: var(--display); font-size: 0.9375rem; font-weight: 500; color: var(--ink-soft); }
.copy-value { grid-column: 1; font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--blue); letter-spacing: 0.02em; overflow-wrap: anywhere; }
.copy-btn {
  grid-column: 2; grid-row: 1 / span 2;
  font: 600 1rem var(--display); color: var(--blue); background: var(--sky);
  border: 0; border-radius: 999px; padding: 0.55rem 1rem; cursor: pointer; min-width: 5.5rem;
}
.copy-btn:hover { background: var(--sky-line); }
.copy-btn.is-done { background: var(--nido-text); color: var(--white); }

.block-spaces { padding-top: 0; }
.spaces { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 13rem); gap: 0.9rem; }
.spaces li:first-child { grid-row: span 2; }
.spaces a { position: relative; display: block; height: 100%; border-radius: var(--radius); overflow: hidden; color: var(--white); text-decoration: none; }
.spaces img { width: 100%; height: 100%; object-fit: cover; }
.spaces span {
  position: absolute; left: 0.75rem; bottom: 0.75rem;
  background: var(--white); color: var(--blue); font: 700 1.0625rem var(--display);
  padding: 0.35rem 0.85rem; border-radius: 999px;
}
.spaces a:hover span { background: var(--stucco); }
@media (max-width: 760px) {
  .spaces { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 10rem; }
  .spaces li:first-child { grid-column: span 2; grid-row: auto; }
}

.block-story { background: var(--blue); color: #e4ebf8; }
.block-story .block-title { color: var(--white); }
.block-story a { color: var(--stucco); }
.block-story .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.story-text p { max-width: 52ch; }
.story-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; font-family: var(--display); font-weight: 600; }
@media (max-width: 900px) { .block-story .wrap { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------
   Pagine interne
   ------------------------------------------------------------------------ */
.page-head { background: var(--sky); padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.25rem, 5vw, 3.5rem); }
.page-head-inner.has-aside { display: grid; grid-template-columns: 1fr auto; gap: 2rem 4rem; align-items: end; }
.page-head h1 { font-size: var(--step-4); max-width: 22ch; margin-bottom: 0.35em; }
.lead { font-size: var(--step-1); line-height: 1.55; max-width: 46ch; margin: 0; }
.head-arch { width: clamp(9rem, 18vw, 14rem); aspect-ratio: 3 / 4; margin-bottom: calc(-1 * clamp(2.25rem, 5vw, 3.5rem)); }
.clock { margin: 0; width: clamp(9rem, 18vw, 13rem); }
.clock img { mix-blend-mode: multiply; }
@media (max-width: 700px) { .page-head-inner.has-aside { grid-template-columns: 1fr; } .head-arch { width: 9rem; } }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0 0 1rem; padding: 0; font-family: var(--display); font-size: 0.9875rem; }
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }

.content { padding-block: clamp(2.5rem, 5vw, 4.5rem) var(--space); }
/* Colonna stretta ma allineata a sinistra con il titolo della pagina */
.narrow > * { max-width: 44rem; }
.narrow-wide > * { max-width: 56rem; }

.prose { max-width: 68ch; }
.prose h2 { font-size: var(--step-3); margin-top: 1.6em; }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--blue); }
.prose blockquote {
  margin: 1.75rem 0; padding: 0.25rem 0 0.25rem 1.5rem; border-left: 4px solid var(--stucco);
  font-style: italic; font-size: var(--step-1); line-height: 1.5; color: var(--blue);
}

.callout { background: var(--stucco-soft); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 28px; margin-top: 3rem; }
.callout h2 { margin-top: 0; }
.callout p:last-child { margin: 0; }

.notice { font-family: var(--display); font-weight: 600; font-size: var(--step-1); color: var(--blue); background: var(--stucco-soft); display: inline-block; padding: 0.6rem 1.2rem; border-radius: 999px; margin-top: 2rem; }

.file-links { list-style: none; padding: 0; margin: 1.5rem 0; }
.file-links li { padding: 0.5rem 0; }
.file-links a { font-family: var(--display); font-weight: 600; font-size: 1.125rem; }
.file-meta { font-family: var(--display); font-size: 0.9375rem; color: var(--ink-soft); white-space: nowrap; }

/* Storia */
.history { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.history li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.5rem; padding: 1.75rem 0; border-top: 1px solid var(--sky-line); }
.history-year { font-family: var(--display); font-weight: 800; font-size: var(--step-3); color: var(--blue); line-height: 1; }
.history p { margin: 0; }
.history p + p { margin-top: 0.6rem; font-family: var(--display); font-weight: 600; }
@media (max-width: 600px) { .history li { grid-template-columns: 1fr; gap: 0.5rem; } }

/* Giornata
   Una barra fissa con le linguette e la traiettoria del sole (l'arco dell'ingresso),
   poi tre fasce di luce: mattino (intonaco), mezzogiorno (bianco), pomeriggio (cielo). */
.tabs { display: inline-flex; gap: 0.35rem; padding: 0.3rem; background: var(--sky); border-radius: 999px; }
.tab { font: 600 1.0625rem var(--display); color: var(--ink); background: none; border: 0; border-radius: 999px; padding: 0.55rem 1.2rem; cursor: pointer; white-space: nowrap; }
.tab[aria-selected='true'] { background: var(--white); color: var(--blue); box-shadow: inset 0 -3px 0 var(--c); }

.day-bar { position: sticky; top: calc(5rem + 1px); z-index: 40; background: var(--white); border-bottom: 1px solid var(--sky-line); }
.day-bar-inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: 0.7rem 0.55rem; }

.sun-track { position: relative; height: 3rem; margin-inline: 3rem; }
.sun-track svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sun-path, .sun-path-done { fill: none; stroke-linecap: round; }
.sun-path { stroke: #aebfdf; stroke-width: 2; stroke-dasharray: 0.006 0.012; }
.sun-path-done { stroke: #ecb92e; stroke-width: 4; stroke-dasharray: 0 1; }
.sun {
  position: absolute; left: 0; top: 100%; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: #f5bd2e; box-shadow: 0 0 0 5px rgba(245, 189, 46, 0.22), 0 0 18px 4px rgba(245, 189, 46, 0.35);
  transform: translate(-50%, -50%);
}
.sun-time { position: absolute; bottom: -0.35rem; font: 600 0.875rem var(--display); color: var(--ink-soft); }
.sun-start { right: calc(100% + 0.6rem); }
.sun-end { left: calc(100% + 0.6rem); }
.day-periods { display: flex; justify-content: space-between; margin: 0.15rem 1.75rem 0; }
.day-periods button {
  font: 600 0.9375rem var(--display); color: var(--ink-soft); background: none; border: 0;
  padding: 0.2rem 0.7rem; border-radius: 999px; cursor: pointer;
}
.day-periods button:hover { color: var(--blue); }
.day-periods button.is-active { color: var(--blue); background: var(--stucco-soft); }

.period { padding-block: clamp(3rem, 6vw, 5rem); }
.period.is-mattino { background: var(--stucco-soft); }
.period.is-pomeriggio { background: var(--sky); }
.period-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.period-head h2 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.025em; margin: 0; }
.period-range { font: 700 var(--step-1) var(--display); color: var(--ink-soft); margin: 0; }

.steps { --time-w: 4.5rem; --gap: 2.75rem; list-style: none; margin: 0; padding: 0; }
.steps.no-times { --time-w: 0rem; --gap: 2.5rem; }
.step { position: relative; display: grid; grid-template-columns: var(--time-w) minmax(0, 1fr); column-gap: var(--gap); padding-bottom: 3.25rem; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ''; position: absolute; left: calc(var(--time-w) + var(--gap) / 2 - 1.5px); top: 1rem; bottom: -1rem; width: 3px;
  background: color-mix(in srgb, var(--c) 28%, transparent); border-radius: 3px;
}
.step:last-child::before { display: none; }
.step::after {
  content: ''; position: absolute; left: calc(var(--time-w) + var(--gap) / 2 - 0.7rem); top: 0.55rem;
  width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--c); border: 4px solid var(--white); box-sizing: border-box;
}
.step-time { font: 800 var(--step-2)/1 var(--display); color: var(--blue); text-align: right; padding-top: 0.45rem; }
.step-main { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: 1.25rem clamp(1.5rem, 4vw, 3rem); align-items: start; }
.step-text h3 { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.45rem; }
.step-text p { color: var(--ink-soft); max-width: 40ch; margin-bottom: 0.75rem; }
.step-link { font: 600 1.0625rem var(--display); }
.step-flag {
  display: inline-block; margin: 0 0 0.6rem !important; padding: 0.2rem 0.8rem; border-radius: 999px;
  background: var(--cuore-text); color: var(--white) !important; font: 700 0.9375rem var(--display);
}

.mosaic { display: grid; gap: 0.6rem; max-width: 40rem; }
.mosaic a { display: block; position: relative; border-radius: 18px; overflow: hidden; background: var(--sky-line); }
.mosaic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.mosaic a:hover img { transform: scale(1.04); }
.mosaic[data-n='1'] { max-width: 25rem; }
.mosaic[data-n='2'], .mosaic[data-n='4'] { grid-template-columns: 1fr 1fr; }
.mosaic[data-n='3'] { grid-template-columns: 1.6fr 1fr; }
.mosaic[data-n='3'] a:first-child { grid-row: span 2; }
.mosaic[data-n='3'] a:first-child img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }

.step.is-minor { padding-bottom: 2.25rem; }
.step.is-minor::after { width: 0.9rem; height: 0.9rem; left: calc(var(--time-w) + var(--gap) / 2 - 0.45rem); top: 1.8rem; background: var(--white); border: 3px solid var(--c); }
.step.is-minor .step-time { font-size: var(--step-1); color: var(--ink-soft); padding-top: 1.55rem; }
.step.is-minor .step-main { display: flex; align-items: center; gap: 1rem; }
.step.is-minor h3 { font-size: var(--step-1); font-weight: 700; color: var(--ink); margin: 0; }
.step.is-minor p { margin: 0.1rem 0 0; font-size: 1rem; color: var(--ink-soft); }
.step-minor-photos { display: flex; flex-shrink: 0; }
.step-minor-photos a { width: 4.5rem; height: 4.5rem; border-radius: 50%; overflow: hidden; border: 3px solid var(--white); }
.step-minor-photos a + a { margin-left: -1.25rem; }
.step-minor-photos img { width: 100%; height: 100%; object-fit: cover; }

.step.is-special .step-main { background: var(--stucco-soft); border-radius: 28px; padding: clamp(1.25rem, 3vw, 2rem); margin-top: -0.75rem; }

.day-note { padding-block: 2.5rem var(--space); color: var(--ink-soft); font-size: 1rem; }

@media (max-width: 999px) {
  .day-bar { top: calc(4.25rem + 1px); }
}
@media (max-width: 860px) {
  .day-bar-inner { grid-template-columns: 1fr; gap: 0.4rem; padding-block: 0.55rem 0.4rem; }
  .tabs { display: flex; }
  .tab { flex: 1; padding: 0.45rem 0.75rem; font-size: 1rem; }
  .sun-track { height: 2rem; margin-inline: 2.6rem; }
  .sun { width: 1.1rem; height: 1.1rem; }
  .day-periods { margin-inline: 0.5rem; }
  .day-periods button { font-size: 0.875rem; padding: 0.15rem 0.55rem; min-height: 2.25rem; }
  .step-main { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .steps, .steps.no-times { --time-w: 0rem; --gap: 2.25rem; }
  .step-time { grid-column: 2; text-align: left; padding: 0 0 0.3rem; font-size: var(--step-1); }
  .step-time:empty { display: none; }
  .step-main { grid-column: 2; }
  .step.is-minor .step-time { padding: 0 0 0.3rem; font-size: var(--step-0); }
  .step.is-minor::after { top: 0.5rem; }
  .step.is-minor:has(.step-time:empty)::after { top: 1.3rem; }
  .step-text h3 { font-size: var(--step-2); }
  .step-minor-photos a { width: 3.5rem; height: 3.5rem; }
  .mosaic[data-n='4'] { grid-template-columns: 1fr 1fr; }
}

/* Gallerie */
.photo-group { margin-top: 3rem; }
.photo-group:first-child { margin-top: 0; }
.photo-group h2 { font-size: var(--step-2); }
.gallery { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.9rem; }
.gallery li { position: relative; }
.gallery a { display: block; border-radius: var(--radius); overflow: hidden; background: var(--sky); }
.gallery img { width: 100%; aspect-ratio: 7 / 5; object-fit: cover; }
.gallery-cap { display: block; margin-top: 0.45rem; font-family: var(--display); font-weight: 500; font-size: 0.9875rem; color: var(--ink-soft); }
@media (max-width: 520px) { .gallery { grid-template-columns: 1fr 1fr; gap: 0.6rem; } }

.sibling-nav { margin-top: 4rem; padding-top: 1.75rem; border-top: 1px solid var(--sky-line); }
.sibling-nav p { font-family: var(--display); font-weight: 700; color: var(--ink-soft); margin-bottom: 0.75rem; }
.sibling-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sibling-nav a { display: inline-block; padding: 0.45rem 1rem; border: 1.5px solid var(--sky-line); border-radius: 999px; font-family: var(--display); font-weight: 600; text-decoration: none; }
.sibling-nav a:hover { border-color: var(--blue); }

.album { margin-top: 3.5rem; }
.album h2 { font-size: var(--step-3); }
.album-index { padding: 1.5rem 1.75rem; background: var(--sky); border-radius: 24px; }
.album-index ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.album-index a { font-family: var(--display); font-weight: 500; }

/* La scuola (indice) */
.hub-group + .hub-group { margin-top: 3rem; }
.hub-group h2 { font-size: var(--step-2); }
.hub { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.hub a { display: block; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: var(--step-1); }
.hub img { width: 100%; aspect-ratio: 7 / 5; object-fit: cover; border-radius: var(--radius); margin-bottom: 0.6rem; }
.hub a:hover span { text-decoration: underline; }
.hub a:not(:has(img)) { padding: 1.1rem 1.25rem; background: var(--stucco-soft); border-radius: var(--radius); }

/* Orari */
.hours { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); }
.hours-col h2 { font-size: var(--step-3); }
.hours-col ul { list-style: none; margin: 0; padding: 0; }
.hours-col li { display: grid; gap: 0.25rem; padding: 1.1rem 0; border-top: 1px solid var(--sky-line); }
.hours-time { font-family: var(--display); font-weight: 800; font-size: var(--step-4); color: var(--blue); line-height: 1; letter-spacing: -0.02em; }
@media (max-width: 700px) { .hours { grid-template-columns: 1fr; } }

/* P.T.O.F. */
.doc-layout { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.doc-toc { position: sticky; top: 7rem; }
.doc-toc-title { font-family: var(--display); font-weight: 700; color: var(--ink-soft); margin-bottom: 0.5rem; }
.doc-toc ol { margin: 0 0 1.5rem; padding-left: 1.25rem; font-family: var(--display); font-weight: 500; }
.doc-toc li { margin-bottom: 0.45rem; }
.doc-toc li::marker { color: var(--ink-soft); }
.doc-toc a { text-decoration: none; }
.doc-toc a:hover, .doc-toc a.is-active { text-decoration: underline; }
.doc-chapter + .doc-chapter { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--sky-line); }
.doc h2 { margin-top: 0; display: flex; gap: 0.9rem; align-items: baseline; }
.doc-num { font-size: 0.8em; color: var(--cuore-text); }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.pillars div { background: var(--sky); border-radius: 20px; padding: 1.25rem 1.4rem; }
.pillars dt { font-family: var(--display); font-weight: 800; font-size: var(--step-2); color: var(--blue); margin-bottom: 0.4rem; }
.pillars dd { margin: 0; font-size: 1rem; line-height: 1.6; }
.chips { list-style: none !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.chips li { margin: 0; padding: 0.4rem 0.95rem; background: var(--stucco-soft); border-radius: 999px; font-family: var(--display); font-weight: 500; font-size: 1rem; line-height: 1.3; }
.schedule { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 1rem; }
.schedule th, .schedule td { text-align: left; padding: 0.65rem 0.75rem 0.65rem 0; border-bottom: 1px solid var(--sky-line); vertical-align: top; }
.schedule thead th { font-family: var(--display); color: var(--ink-soft); font-weight: 600; }
.schedule tbody th { font-family: var(--display); font-weight: 700; color: var(--blue); white-space: nowrap; width: 9rem; }
@media (max-width: 900px) {
  .doc-layout { grid-template-columns: 1fr; }
  .doc-toc { position: static; background: var(--sky); padding: 1.25rem 1.5rem; border-radius: 20px; }
  .pillars { grid-template-columns: 1fr; }
}

/* Attività */
.projects { list-style: none; margin: 0; padding: 0; }
.project { display: grid; grid-template-columns: minmax(0, 22rem) 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); padding: 2.5rem 0; border-top: 1px solid var(--sky-line); align-items: start; }
.project:first-child { border-top: 0; padding-top: 0; }
.project img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.project h2 { font-size: var(--step-3); }
.project p { max-width: 60ch; }
@media (max-width: 760px) { .project { grid-template-columns: 1fr; } }

/* Documenti */
.doc-group + .doc-group { margin-top: 3rem; }
.doc-group h2 { font-size: var(--step-2); }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--sky-line); }
.doc-list li:last-child { border-bottom: 1px solid var(--sky-line); }
.doc-link { font-family: var(--display); font-weight: 600; font-size: 1.1875rem; line-height: 1.3; }
.doc-list p { grid-column: 1; margin: 0; color: var(--ink-soft); font-size: 1rem; }
.doc-list .file-meta { grid-column: 2; grid-row: 1; align-self: center; }
.doc-list li.is-featured { background: var(--stucco-soft); border: 0; border-radius: 20px; padding: 1.4rem 1.5rem; margin-bottom: 0.75rem; }
.doc-list li.is-featured .doc-link { font-size: var(--step-2); }
.doc-list li.is-featured + li { border-top: 0; }
@media (max-width: 600px) { .doc-list li { grid-template-columns: 1fr; } .doc-list .file-meta { grid-column: 1; grid-row: auto; } }

/* Comunicazioni */
.news-feed { list-style: none; margin: 0; padding: 0; }
.news-feed > li { display: grid; grid-template-columns: 11rem 1fr; gap: 1.75rem; padding: 1.75rem 0; border-top: 1px solid var(--sky-line); align-items: start; }
.news-feed img, .news-noimg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.news-noimg { display: block; background: var(--stucco-soft); -webkit-mask: var(--arch) center / 55% 75% no-repeat; mask: var(--arch) center / 55% 75% no-repeat; background: var(--stucco); }
.news-feed h2 { font-size: var(--step-2); margin: 0.25rem 0 0.5rem; }
.news-feed h2 a { text-decoration: none; }
.news-feed h2 a:hover { text-decoration: underline; }
.news-img { border-radius: var(--radius); margin-bottom: 1.5rem; }
@media (max-width: 600px) { .news-feed > li { grid-template-columns: 1fr; gap: 1rem; } .news-feed img, .news-noimg { max-width: 14rem; } }

/* Contatti */
.contacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem clamp(2rem, 6vw, 6rem); }
.contacts h2 { font-size: var(--step-2); }
.big-links { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.big-links a { font-family: var(--display); font-weight: 700; font-size: var(--step-2); text-decoration: none; overflow-wrap: anywhere; }
.big-links a:hover { text-decoration: underline; }
.address { font-family: var(--display); font-weight: 600; font-size: var(--step-1); line-height: 1.4; color: var(--blue); }
@media (max-width: 760px) { .contacts { grid-template-columns: 1fr; } }

.legal { font-size: 1rem; }
.legal p:first-child strong { font-family: var(--display); font-size: var(--step-2); color: var(--blue); }

/* ------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */
.site-footer { background: var(--blue-deep); color: #d5def2; font-size: 1rem; }
.site-footer a { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; padding-block: 4rem 3rem; }
.footer-name { font-family: var(--display); font-weight: 800; font-size: var(--step-2); color: var(--white); line-height: 1.15; }
.footer-title { font-size: 1.0625rem; color: var(--stucco); margin-bottom: 0.75rem; }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 0.3rem; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; padding-block: 1.25rem 2rem; border-top: 1px solid rgba(255, 255, 255, 0.15); font-family: var(--display); font-size: 0.9375rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------------------ */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(13, 24, 56, 0.94); color: var(--white); }
.lightbox::backdrop { background: rgba(13, 24, 56, 0.6); }
.lightbox-figure { margin: 0; height: 100%; display: grid; place-items: center; grid-template-rows: 1fr auto; padding: 4rem 5rem 2rem; }
.lightbox-figure img { max-height: calc(100vh - 9rem); max-width: 100%; width: auto; object-fit: contain; border-radius: 8px; }
.lightbox figcaption { font-family: var(--display); padding-top: 0.75rem; min-height: 2rem; }
.lightbox-btn { position: absolute; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: var(--white); cursor: pointer; display: grid; place-items: center; }
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox-btn svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lightbox-next { right: 1rem; top: 50%; translate: 0 -50%; }
.lightbox-close { right: 1rem; top: 1rem; }
.lightbox-count { position: absolute; left: 1.25rem; top: 1.4rem; margin: 0; font-family: var(--display); color: #c6d2ee; }
@media (max-width: 600px) { .lightbox-figure { padding: 4rem 0.75rem 5rem; } .lightbox-prev, .lightbox-next { top: auto; bottom: 1rem; translate: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------------
   Pagine aggiunte nel rinnovamento (autunno 2026)
   ------------------------------------------------------------------------ */
.hero-note { margin: 1.5rem 0 0; font-family: var(--display); font-weight: 600; }
.btn-light { background: var(--stucco); border-color: var(--stucco); color: var(--blue-deep) !important; }
.btn-light:hover { background: var(--white); border-color: var(--white); }
.section-h { font-size: var(--step-3); margin-top: clamp(2.5rem, 5vw, 4rem); }
.content > .section-h:first-child, .content > section:first-child > .section-h:first-child { margin-top: 0; }
.content-note { color: var(--ink-soft); font-size: 1rem; max-width: 68ch; margin-top: 1.5rem; }
.big-quote {
  margin: clamp(2.5rem, 5vw, 4rem) 0; max-width: 30ch;
  font: 700 var(--step-3)/1.2 var(--display); letter-spacing: -0.015em; color: var(--blue); text-wrap: balance;
}
.head-photo { margin: 0; width: clamp(10rem, 22vw, 17rem); margin-bottom: calc(-1 * clamp(2.25rem, 5vw, 3.5rem)); }
.head-photo img { border-radius: 24px 24px 0 0; aspect-ratio: 4 / 3; object-fit: cover; }
.head-arch.is-nido, .head-arch.is-infanzia { width: clamp(10rem, 20vw, 15rem); border-bottom: 8px solid var(--c); }

/* Home: il metodo */
.block-method { padding-top: 0; }
.block-sky + .block-method { padding-top: var(--space); }
.method-teaser { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.care-words { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.care-words li { font: 600 var(--step-1) var(--display); color: var(--ink); }
.care-words span { color: var(--cuore-text); font-weight: 800; }
/* minmax(0, 1fr) e min-height: 0: altrimenti le foto verticali allungano le righe oltre l'altezza del riquadro */
.method-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.8rem; height: clamp(20rem, 38vw, 30rem); }
.method-photos li { min-height: 0; min-width: 0; }
.method-photos li:first-child { grid-row: span 2; }
.method-photos a { display: block; height: 100%; border-radius: var(--radius); overflow: hidden; }
.method-photos img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .method-teaser { grid-template-columns: 1fr; } }

/* L'arco del secolo */
.ca { margin: 0; }
.ca svg { display: block; width: 100%; height: auto; overflow: visible; }
.ca-track { fill: none; stroke: currentColor; opacity: .3; stroke-width: 3; stroke-dasharray: .004 .01; stroke-linecap: round; }
.ca-done { fill: none; stroke: var(--stucco); stroke-width: 6; stroke-linecap: round; }
.ca-mark circle { fill: var(--stucco); stroke: var(--blue); stroke-width: 4; }
.ca-mark.is-now circle { fill: var(--white); }
.ca-mark.is-end circle { fill: var(--blue); stroke: var(--stucco); stroke-width: 5; }
.ca-mark text { font: 700 26px var(--display); fill: currentColor; }
.ca-mark.is-now text { fill: var(--stucco); }
.ca-door path { fill: var(--stucco); opacity: .9; }
.ca-ground { stroke: currentColor; opacity: .35; stroke-width: 3; }
.block-story .ca { color: #e4ebf8; }
.ca-legend { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem 2rem; font-size: 1rem; }
.ca-legend strong { font-family: var(--display); color: var(--stucco); margin-right: 0.4rem; }
@media (prefers-reduced-motion: no-preference) {
  /* Il tratto giallo si disegna dal 1927 a oggi quando l'arco entra nello schermo */
  .js .ca .ca-done { transition: stroke-dashoffset 1.8s cubic-bezier(.3, .6, .2, 1) 0.2s; }
  .js .ca:not(.is-in) .ca-done { stroke-dashoffset: var(--d); }
  .js .ca .ca-mark { transition: opacity .5s ease; }
  .js .ca:not(.is-in) .ca-mark:not(:first-of-type) { opacity: 0; }
}

/* Pagina Verso i 100 anni */
.centenary-hero { background: var(--blue); color: #e4ebf8; padding-block: clamp(2.25rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem); }
.centenary-hero h1 { color: var(--white); font-size: var(--step-5); margin-bottom: 0.3em; }
.centenary-hero .lead { color: #e4ebf8; max-width: 52ch; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.centenary-hero .crumbs a { color: #c6d2ee; }
.centenary-hero .crumbs li + li::before { color: #c6d2ee; }
.centenary-hero .ca { max-width: 62rem; margin-inline: auto; }
.centenary-why { align-items: start; }
.centenary-why .section-h { margin-top: 0; }
.steps-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 960px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps-grid { grid-template-columns: 1fr; } }
.steps-grid li { padding: 1.4rem 1.5rem 1.5rem; border-radius: 20px; background: var(--sky); }
.steps-grid li.is-obiettivo { background: var(--blue); color: #e4ebf8; grid-column: 1 / -1; }
.steps-grid li.is-obiettivo h3 a { color: var(--white); }
.steps-grid h3 { font-size: var(--step-1); margin: 0.6rem 0 0.4rem; }
.steps-grid h3 a { text-decoration: none; }
.steps-grid h3 a:hover { text-decoration: underline; }
.steps-grid p { margin: 0; font-size: 1rem; line-height: 1.55; }
.step-status { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 0.9375rem var(--display); color: var(--ink-soft); }
.steps-grid li.is-obiettivo .step-status { color: var(--stucco); }
.step-status .dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--nido); }
.is-in-corso .step-status .dot { background: transparent; border: 2.5px solid var(--cuore); }
.is-obiettivo .step-status .dot { background: transparent; border: 2.5px dashed var(--stucco); }
.traguardo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 4rem); align-items: center; margin-top: clamp(3rem, 6vw, 5rem); padding: clamp(1.75rem, 4vw, 3rem); border-radius: 28px; background: var(--blue); color: #e4ebf8; }
@media (max-width: 860px) { .traguardo { grid-template-columns: 1fr; } }
.traguardo .section-h { color: var(--white); margin-top: 0.6rem; }
.traguardo .step-status { color: var(--stucco); }
.traguardo .step-status .dot { background: transparent; border: 2.5px dashed var(--stucco); }
.traguardo .big-quote { color: var(--stucco); margin: 0; font-size: var(--step-2); }

/* Nido e Infanzia */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 clamp(2rem, 4vw, 3rem); border-top: 4px solid var(--c); }
.facts div { padding: 1.1rem 1.25rem 0 0; }
.facts dt { font: 700 var(--step-1) var(--display); color: var(--blue); margin-bottom: 0.3rem; }
.facts dd { margin: 0; font-size: 1rem; line-height: 1.55; }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; row-gap: 1rem; } }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } }
.section-intro p:first-child { font-size: var(--step-1); line-height: 1.55; }
.highlights { list-style: none; margin: 1.25rem 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.highlights li { padding: 1.25rem 1.4rem; border-radius: 20px; background: var(--sky); }
.highlights h3 { margin-bottom: 0.35rem; display: flex; align-items: center; gap: 0.55rem; }
.highlights h3::before { content: ''; flex: none; width: 0.85rem; height: 1rem; background: var(--c); -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat; }
.highlights p { margin: 0; font-size: 1rem; line-height: 1.55; }
.cta-band { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: center; margin-top: clamp(3rem, 6vw, 5rem); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 28px; background: var(--stucco-soft); }
.cta-band h2 { font-size: var(--step-3); margin-bottom: 0.4rem; }
.cta-band p { margin: 0; max-width: 52ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } }

/* Domande frequenti */
.faq { border-top: 1px solid var(--sky-line); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--sky-line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font: 600 var(--step-1)/1.3 var(--display); color: var(--blue);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 0.4rem; top: 1.45rem; width: 0.65rem; height: 0.65rem;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(225deg); top: 1.7rem; }
.faq details > div { padding: 0 0 1.25rem; max-width: 64ch; }
.faq details > div p:last-child { margin-bottom: 0; }

/* Il nostro metodo */
.care-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.care-grid li { position: relative; padding: 1.75rem 1.75rem 1.5rem; border-radius: 24px; background: var(--sky); overflow: hidden; }
.care-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.75rem; }
.care-letter {
  flex: none; display: grid; place-items: center; width: 2.9rem; height: 3.3rem; padding-top: 0.45rem;
  background: var(--blue); color: var(--stucco); font: 800 1.6rem/1 var(--display);
  -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat;
}
.care-grid h3 { font-size: var(--step-2); margin: 0; }
.care-story { position: relative; font-style: italic; color: var(--ink); }
.care-point { position: relative; margin: 0; font: 600 1.0625rem/1.4 var(--display); color: var(--blue); }
@media (max-width: 760px) { .care-grid { grid-template-columns: 1fr; } }
.metodo-row { margin-top: clamp(1rem, 3vw, 2rem); }
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
.lang-table { width: 100%; min-width: 42rem; border-collapse: collapse; font-size: 1rem; }
.lang-table th, .lang-table td { text-align: left; vertical-align: top; padding: 0.75rem 1rem 0.75rem 0; border-bottom: 1px solid var(--sky-line); }
.lang-table thead th { font-family: var(--display); color: var(--ink-soft); font-weight: 600; }
.lang-table tbody th { font: 700 1.0625rem var(--display); color: var(--blue); white-space: nowrap; }
.method-strip { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.method-strip a { display: block; border-radius: var(--radius); overflow: hidden; }
.method-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.method-strip span { display: block; margin-top: 0.45rem; font: 500 0.9375rem/1.35 var(--display); color: var(--ink-soft); }
@media (max-width: 760px) { .method-strip { grid-template-columns: 1fr 1fr; } }
.cycle { list-style: none; counter-reset: c; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.cycle::before { content: ''; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.4rem; height: 3px; background: var(--stucco); }
.cycle li { counter-increment: c; position: relative; padding-right: 1rem; }
.cycle li::before {
  content: counter(c); display: grid; place-items: center; position: relative;
  width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--blue); color: var(--white);
  font: 800 1.25rem var(--display); margin-bottom: 0.9rem;
}
.cycle h3 { margin-bottom: 0.3rem; }
.cycle p { margin: 0; font-size: 1rem; line-height: 1.55; }
@media (max-width: 900px) {
  .cycle { grid-template-columns: 1fr; gap: 1.25rem; }
  .cycle::before { left: 1.4rem; right: auto; top: 1rem; bottom: 1rem; width: 3px; height: auto; }
  .cycle li { padding: 0 0 0 4rem; }
  .cycle li::before { position: absolute; left: 0; top: 0; margin: 0; }
}
.tick-list { list-style: none; padding: 0; margin: 1rem 0 1.25rem; }
.tick-list li { position: relative; padding: 0.35rem 0 0.35rem 1.75rem; }
.tick-list li::before { content: ''; position: absolute; left: 0.2rem; top: 0.95rem; width: 0.7rem; height: 0.7rem; background: var(--stucco); -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat; }

/* Per le famiglie */
.fam-portal { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: start; }
.fam-portal .section-h { margin-top: 0; }
.portal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.portal-grid li { padding: 1rem 1.2rem; border-radius: 16px; background: var(--sky); }
.portal-grid h3 { font-size: 1.125rem; margin-bottom: 0.25rem; }
.portal-grid p { margin: 0; font-size: 0.9875rem; line-height: 1.5; }
@media (max-width: 860px) { .fam-portal { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .portal-grid { grid-template-columns: 1fr; } }
.seasons { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.seasons > li { padding: 1.25rem; border-radius: 20px; background: var(--stucco-soft); }
.seasons > li:last-child { background: var(--sky); }
.seasons h3 { font-size: var(--step-1); }
.seasons ul { list-style: none; margin: 0; padding: 0; }
.seasons ul li + li { margin-top: 0.9rem; }
.seasons strong { display: block; font: 700 1.0625rem/1.3 var(--display); color: var(--blue); }
.seasons span { display: block; font-size: 0.9375rem; line-height: 1.5; margin-top: 0.2rem; }
@media (max-width: 1100px) { .seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .seasons { grid-template-columns: 1fr; } }

/* Essere soci */
.soci-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem 2.5rem; }
.soci-grid li { padding-top: 1.1rem; border-top: 4px solid var(--stucco); }
.soci-grid h2 { font-size: var(--step-2); }
.soci-grid p { font-size: 1rem; line-height: 1.6; }
.callout.book { max-width: 52rem; }

.project-who { margin: 0 0 0.35rem; font: 600 0.9875rem var(--display); color: var(--cuore-text); }

/* ------------------------------------------------------------------------
   Transizioni tra le pagine (View Transitions API, Chrome/Edge/Safari recenti)
   La pagina nuova si apre dentro un arco che cresce dal basso, come entrare
   dall'ingresso della scuola. Header e topbar restano fermi.
   ------------------------------------------------------------------------ */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.site-header { view-transition-name: site-header; }
::view-transition-group(topbar), ::view-transition-group(site-header) { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 0.45s ease both; }
  ::view-transition-new(root) {
    animation: vt-arch 0.75s cubic-bezier(.3, .7, .15, 1) both;
    -webkit-mask: var(--arch) 50% 100% / 260% 230% no-repeat;
    mask: var(--arch) 50% 100% / 260% 230% no-repeat;
  }
  ::view-transition-group(*) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(.3, .7, .15, 1); }
}
@keyframes vt-out { to { opacity: 0.35; transform: scale(0.985); } }
@keyframes vt-arch {
  from { -webkit-mask-size: 18% 0%; mask-size: 18% 0%; }
  to { -webkit-mask-size: 260% 230%; mask-size: 260% 230%; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (max-width: 600px) {
  .ca-mark text { font-size: 46px; }
  .ca-mark:not(:first-of-type):not(.is-now):not(.is-end) text { display: none; }
}

/* Indirizzi web lunghi nei testi (es. nella cookie policy): vanno a capo invece di allargare la pagina sul telefono */
.prose a, .legal a { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------------
   Rifinitura (ottobre 2026)
   ------------------------------------------------------------------------ */
/* Giornata su telefono: l'arco del sole è decorativo, lo togliamo per lasciare spazio alle foto */
@media (max-width: 640px) {
  .day-sky .sun-track { display: none; }
  .day-bar-inner { padding-block: 0.45rem; gap: 0.35rem; }
}
/* L'arco del secolo non tocca i bordi dello schermo */
@media (max-width: 600px) { .ca svg { padding-inline: 1.75rem; box-sizing: border-box; } }

/* Riquadro "Da tenere a portata di mano": campi da copiare come righe, non card dentro la card */
.info-box .copy-field { background: transparent; border: 0; border-top: 1px solid rgba(29, 58, 138, 0.15); border-radius: 0; padding: 0.9rem 0 0.2rem; margin: 0; }
.info-box .copy-btn { background: var(--white); }

/* Documenti */
.doc-group-note { margin: -0.25rem 0 0.75rem; color: var(--ink-soft); font-size: 1rem; }
.doc-group.is-archive .doc-link { font-weight: 500; font-size: 1.0625rem; }
.doc-back { margin-top: 1.5rem; font: 600 1rem var(--display); }
@media (min-width: 901px) { .doc-back { display: none; } }

/* Iscrizioni */
.isc-who { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.isc-who li { padding: 1.4rem 1.5rem; border-radius: 24px; background: var(--sky); border-top: 6px solid var(--c); }
.isc-who h3 { font-size: var(--step-2); margin-bottom: 0.2rem; }
.isc-who h3 a { text-decoration: none; }
.isc-who h3 a:hover { text-decoration: underline; }
.isc-age { font: 700 var(--step-1) var(--display); color: var(--c-text, var(--c)); margin-bottom: 0.4rem; }
.isc-who p:last-child { margin: 0; }
.isc-steps { list-style: none; counter-reset: s; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; position: relative; }
.isc-steps::before { content: ''; position: absolute; left: 1.45rem; right: 1.45rem; top: 1.45rem; height: 3px; background: var(--stucco); }
.isc-steps li { counter-increment: s; position: relative; }
.isc-steps li::before {
  content: counter(s); display: grid; place-items: center; position: relative;
  width: 2.9rem; height: 3.3rem; padding-top: 0.45rem; margin-bottom: 0.9rem;
  background: var(--blue); color: var(--white); font: 800 1.25rem var(--display);
  -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat;
}
.isc-steps h3 { margin-bottom: 0.35rem; }
.isc-steps p { font-size: 1rem; line-height: 1.55; margin-bottom: 0.5rem; }
.isc-contacts { display: flex; flex-direction: column; gap: 0.15rem; font: 600 1rem var(--display); }
.isc-docs { margin-top: 0.5rem; }
@media (max-width: 960px) {
  .isc-steps { grid-template-columns: 1fr 1fr; }
  .isc-steps::before { display: none; }
}
@media (max-width: 600px) {
  .isc-who, .isc-steps { grid-template-columns: 1fr; }
  .isc-steps li { padding-left: 4rem; min-height: 3.3rem; }
  .isc-steps li::before { position: absolute; left: 0; top: 0; margin: 0; }
}

/* ------------------------------------------------------------------------
   Doposcuola: widget e pagina
   ------------------------------------------------------------------------ */
.dsw { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); margin: clamp(1.5rem, 3vw, 2.5rem) 0; border-radius: 28px; overflow: hidden; background: var(--sky); }
.dsw-time { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--blue); color: #e4ebf8; overflow: hidden; }
.dsw-time::after {
  content: ''; position: absolute; right: -2.5rem; bottom: -1rem; width: 9rem; height: 11rem; opacity: .14;
  background: var(--stucco); -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat;
}
.dsw-title { margin: 0 0 0.35rem; font-size: var(--step-1); color: var(--stucco); }
.dsw-hours { display: flex; align-items: baseline; gap: 0.3rem; margin: 0; font: 800 clamp(2.6rem, 2rem + 2.6vw, 3.9rem)/1 var(--display); letter-spacing: -0.03em; color: var(--white); font-variant-numeric: tabular-nums; }
.dsw-days { margin: 0.6rem 0 1.5rem; font: 500 1.0625rem var(--display); }
.dsw-track { position: relative; display: grid; grid-template-columns: 1fr 4fr; height: 0.9rem; border-radius: 999px; overflow: hidden; margin-bottom: 1.6rem; max-width: 22rem; }
.dsw-school { background: rgba(255, 255, 255, 0.25); font-size: 0; }
.dsw-after { background: var(--stucco); font-size: 0; }
.dsw-tick { position: absolute; top: 1.2rem; left: calc(20% + 80% * var(--t)); translate: -50% 0; font: 600 0.875rem var(--display); color: #c6d2ee; }
.dsw-tick:first-of-type { translate: 0 0; }
.dsw-tick:last-of-type { translate: -100% 0; }
.dsw-track { overflow: visible; }
.dsw-school { border-radius: 999px 0 0 999px; }
.dsw-after { border-radius: 0 999px 999px 0; }

.dsw-calc { padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: 1.1rem; }
.dsw-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-bottom: 1px solid var(--sky-line); }
.dsw-plan { padding: 0 1rem 1rem 0; border-top: 4px solid var(--sky-line); padding-top: 0.8rem; transition: border-color .2s, opacity .2s; }
.dsw-plan + .dsw-plan { padding-left: 1rem; }
.dsw-plan dt { font: 600 0.9875rem var(--display); color: var(--ink-soft); }
.dsw-plan dd { margin: 0.15rem 0 0; font-family: var(--display); color: var(--ink); }
.dsw-plan strong { font-size: var(--step-3); font-weight: 800; color: var(--blue); font-variant-numeric: tabular-nums; }
.dsw-plan dd span { display: block; font-size: 0.9375rem; color: var(--ink-soft); }
.dsw-plan.is-best { border-top-color: var(--blue); }
.dsw-plan.is-best dt::after { content: 'conviene'; margin-left: 0.45rem; padding: 0 0.5rem; border-radius: 999px; background: var(--blue); color: var(--white); font-size: 0.8125rem; }
.dsw-plan.is-off { opacity: .45; }

.dsw-label { display: flex; justify-content: space-between; gap: 1rem; font: 600 1.0625rem var(--display); color: var(--ink); }
.dsw-ore { color: var(--blue); font-weight: 800; font-variant-numeric: tabular-nums; }
.dsw-range { -webkit-appearance: none; appearance: none; width: 100%; height: 2.75rem; background: transparent; cursor: pointer; margin: -0.4rem 0; }
.dsw-range::-webkit-slider-runnable-track { height: 0.5rem; border-radius: 999px; background: linear-gradient(to right, var(--blue) var(--p, 10%), var(--sky-line) var(--p, 10%)); }
.dsw-range::-moz-range-track { height: 0.5rem; border-radius: 999px; background: var(--sky-line); }
.dsw-range::-moz-range-progress { height: 0.5rem; border-radius: 999px; background: var(--blue); }
.dsw-range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.6rem; height: 1.6rem; margin-top: -0.55rem; border-radius: 50%; background: var(--white); border: 4px solid var(--blue); box-shadow: 0 2px 6px rgba(29, 58, 138, 0.25); }
.dsw-range::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--white); border: 4px solid var(--blue); }
.dsw-range:focus-visible { outline: 3px solid var(--cuore); outline-offset: 4px; border-radius: 8px; }
.dsw-result { margin: 0; font: 600 1.0625rem/1.45 var(--display); color: var(--blue); min-height: 3em; }
.dsw-static { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.dsw-more { margin: 0; font: 600 1.0625rem var(--display); }
/* Senza JavaScript resta la frase statica; con JavaScript il calcolatore */
.dsw-live { display: none; }
.dsw.is-live .dsw-live { display: block; }
.dsw.is-live .dsw-static { display: none; }
@media (max-width: 860px) { .dsw { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .dsw-plans { grid-template-columns: 1fr; } .dsw-plan + .dsw-plan { padding-left: 0; } }

.ds-info { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.5rem clamp(2rem, 5vw, 4rem); margin-top: clamp(2rem, 4vw, 3rem); }
.ds-info h2 { font-size: var(--step-2); margin-top: 0; }
@media (max-width: 860px) { .ds-info { grid-template-columns: 1fr; } }

/* Servizi a richiesta (anticipo, doposcuola) nell'infografica e negli orari */
.dg-tag { display: inline-block; margin-left: 0.3rem; padding: 0 0.45rem; border-radius: 999px; background: var(--stucco-soft); color: var(--cuore-text); font: 600 0.8125rem/1.5 var(--display); }
.dg-title a { color: inherit; }
.hours-col li.is-extra .hours-time { font-size: var(--step-2); color: var(--ink-soft); }

/* ------------------------------------------------------------------------
   Doposcuola con mensa (scuole elementari): widget e pagina
   Il verde scuro del volantino diventa il colore di questo servizio.
   ------------------------------------------------------------------------ */
:root { --dopo: #1f5a35; --dopo-soft: #e7f1e9; }
.dpw { --now: 0; position: relative; margin: clamp(1.5rem, 3vw, 2.5rem) 0; padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 28px; background: var(--dopo); color: #e3efe6; overflow: hidden; }
.dpw::after {
  content: ''; position: absolute; left: -3rem; bottom: -5rem; width: 12rem; height: 14rem; opacity: .1; pointer-events: none;
  background: var(--stucco); -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat;
}
.dpw-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.25rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); position: relative; }
.dpw-title { margin: 0 0 0.3rem; font-size: var(--step-1); color: var(--stucco); }
.dpw-hours { margin: 0; font: 800 clamp(2.6rem, 2rem + 2.6vw, 3.9rem)/1 var(--display); letter-spacing: -0.03em; color: var(--white); font-variant-numeric: tabular-nums; }
.dpw-days { margin: 0.55rem 0 0; font: 500 1.0625rem var(--display); }
.dpw-price { text-align: right; font-family: var(--display); }
.dpw-price p { margin: 0; }
.dpw-price strong { font-size: var(--step-4); font-weight: 800; color: var(--stucco); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dpw-price p + p { font-size: 0.9875rem; color: #c3dcc9; }

/* Linea del tempo: ogni tratto è largo quanto dura (--w in minuti) */
.dpw-line { position: relative; list-style: none; margin: 0; padding: 0; display: flex; }
.dpw-step { flex: var(--w) 1 0; min-width: 0; position: relative; padding-top: 1.6rem; padding-right: 0.75rem; }
.dpw-step::before { content: ''; position: absolute; left: 0; right: 3px; top: 0; height: 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.22); transition: background .3s; }
.dpw-step:nth-child(1)::before { background: #f3d98b; }
.dpw-step:nth-child(2)::before { background: #9fd0a9; }
.dpw-step:nth-child(3)::before { background: #f7b955; }
.dpw-step:nth-child(4)::before { background: #e8a0b4; }
.dpw-end { flex: none; width: 0; position: relative; padding-top: 1.6rem; }
.dpw-end::before { content: ''; position: absolute; left: -0.55rem; top: -0.2rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--white); border: 3px solid var(--dopo); box-shadow: 0 0 0 2px var(--white); }
.dpw-end .dpw-time, .dpw-end .dpw-name { position: absolute; right: 0; white-space: nowrap; text-align: right; }
.dpw-end .dpw-name { top: 2.85rem; }
.dpw-time { display: block; font: 800 var(--step-1)/1 var(--display); color: var(--white); font-variant-numeric: tabular-nums; }
.dpw-name { display: block; margin-top: 0.35rem; font: 500 1rem/1.3 var(--display); }
.dpw-step.is-now .dpw-name { color: var(--white); font-weight: 700; }
.dpw-step.is-now::before { box-shadow: 0 0 0 3px var(--white); }
.dpw.has-now .dpw-line::after {
  content: ''; position: absolute; top: -0.45rem; left: calc(var(--now) * 100%); width: 4px; height: 1.65rem; border-radius: 4px; background: var(--white); translate: -50% 0;
}
.dpw-now { margin: 1rem 0 0; min-height: 1.5em; font: 600 1rem var(--display); color: var(--stucco); }
.dpw-now:empty { display: none; }
.dpw-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.dpw-foot p { margin: 0; max-width: 46ch; }
.btn-outline-light { background: transparent; color: var(--white) !important; border-color: rgba(255, 255, 255, 0.6); }
.btn-outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); }
.dpw .btn-light { color: var(--dopo) !important; }
@media (max-width: 760px) {
  .dpw-price { text-align: left; }
  /* Sul telefono la linea diventa verticale */
  .dpw-line { flex-direction: column; gap: 0; }
  .dpw-step, .dpw-end { flex: none; width: auto; padding: 0 0 1.1rem 1.75rem; }
  .dpw-step::before { left: 0; top: 0.25rem; bottom: 0; right: auto; width: 0.6rem; height: auto; border-radius: 999px; }
  .dpw-end { padding-bottom: 0; }
  .dpw-end::before { left: -0.25rem; top: 0.15rem; }
  .dpw-end .dpw-time, .dpw-end .dpw-name { position: static; text-align: left; }
  .dpw-name { margin-top: 0.2rem; }
  .dpw.has-now .dpw-line::after { display: none; }
}

.block-dopo { padding-top: 0; padding-bottom: 0; }
.facts.is-dopo { --c: var(--dopo); }
.dpw > * { position: relative; z-index: 1; }
.dp-intro { font-size: var(--step-1); line-height: 1.55; max-width: 52ch; }
.dp-offer { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.dp-offer li { padding-top: 1rem; border-top: 4px solid var(--dopo); }
.dp-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.75rem; border-radius: 50%; background: var(--dopo-soft); color: var(--dopo); }
.dp-icon path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dp-offer h3 { margin-bottom: 0.35rem; }
.dp-offer p { margin: 0; font-size: 1rem; line-height: 1.55; }
@media (max-width: 900px) { .dp-offer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .dp-offer { grid-template-columns: 1fr; } }