/* Siti degli studi pediatrici — un foglio, tre direzioni grafiche:
   Giardino (verde, colline e sole), Quaderno (foglio a quadretti, colori a pastello),
   Ambulatorio (blu, geometrico, motivo a croci). Caratteri con licenza OFL ospitati in font/.
   Colori verificati con contrasto.mjs: vedi studi/README.md. */

@font-face { font-family: "Fredoka"; src: url("font/fredoka-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("font/nunito-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("font/nunito-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Baloo 2"; src: url("font/baloo-2-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("font/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("font/dm-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("font/dm-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

@font-face { font-family: "Lora"; src: url("font/lora-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("font/playfair-display-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("font/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("font/source-sans-3-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("font/quicksand-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("font/outfit-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("font/outfit-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("font/manrope-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("font/manrope-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Comfortaa"; src: url("font/comfortaa-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("font/merriweather-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --larghezza: 72rem;
  --lettura: 68ch;
  --sistema: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- Modelli: forma e caratteri ----------
   I colori vengono dalla palette ([data-palette], generata da palette.mjs); testo e testo tenue
   di ogni modello vengono da modelli.mjs. Entrambi sono aggiunti dal generatore in coda al foglio. */
[data-tema] {
  --superficie: #ffffff; --su-accento: #ffffff; --apertura-testo: var(--testo);
  --raggio: 16px; --raggio-piccolo: 10px; --f-titoli: var(--sistema); --f-testo: var(--sistema);
  --il-carta: #ffffff; --il-legno: #b7794f; --il-legno2: #ecd2b4;
}
[data-tema="giardino"] { --raggio: 22px; --raggio-piccolo: 14px; --f-titoli: "Fredoka", var(--sistema); --f-testo: "Nunito", var(--sistema); }
[data-tema="quaderno"] { --raggio: 10px; --raggio-piccolo: 8px; --f-titoli: "Baloo 2", var(--sistema); --f-testo: "Nunito", var(--sistema); }
[data-tema="ambulatorio"] { --raggio: 16px; --raggio-piccolo: 10px; --f-titoli: "Fraunces", Georgia, serif; --f-testo: "DM Sans", var(--sistema); }
[data-tema="cartolina"] { --raggio: 6px; --raggio-piccolo: 4px; --f-titoli: "Lora", Georgia, serif; --f-testo: "Nunito", var(--sistema); }
[data-tema="rivista"] { --raggio: 0; --raggio-piccolo: 0; --f-titoli: "Playfair Display", Georgia, serif; --f-testo: "Source Sans 3", var(--sistema); }
[data-tema="nuvola"] { --raggio: 32px; --raggio-piccolo: 20px; --f-titoli: "Quicksand", var(--sistema); --f-testo: "Nunito", var(--sistema); }
[data-tema="mosaico"] { --raggio: 6px; --raggio-piccolo: 4px; --f-titoli: "Outfit", var(--sistema); --f-testo: "Outfit", var(--sistema); }
[data-tema="essenziale"] { --raggio: 4px; --raggio-piccolo: 4px; --f-titoli: "Manrope", var(--sistema); --f-testo: "Manrope", var(--sistema); }
[data-tema="acquerello"] { --raggio: 20px; --raggio-piccolo: 14px; --f-titoli: "Comfortaa", var(--sistema); --f-testo: "Nunito", var(--sistema); }
[data-tema="classico"] { --raggio: 2px; --raggio-piccolo: 2px; --f-titoli: "Merriweather", Georgia, serif; --f-testo: "Source Sans 3", var(--sistema); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--fondo); color: var(--testo); font: 17px/1.65 var(--f-testo); overflow-x: clip; }
::selection { background: var(--evidenza); color: var(--testo); }
a { color: var(--accento); text-underline-offset: 0.2em; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-titoli); line-height: 1.15; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5.2vw, 3.3rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.2rem; }
p, ul { margin: 0 0 0.85em; max-width: var(--lettura); }
img { max-width: 100%; height: auto; }
mark.da-confermare { background: #fff3b0; color: #3d3200; padding: 0 0.25em; border-radius: 4px; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.salta { position: absolute; left: -999px; }
.salta:focus { left: 1rem; top: 1rem; background: var(--superficie); padding: 0.5rem 1rem; z-index: 20; }
.riga { max-width: var(--larghezza); margin: 0 auto; padding-inline: 16px; }
.stretta { max-width: 52rem; }
.icona { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.2em; }
.icona-grande { width: 2.4rem; height: 2.4rem; }
.occhiello { font-family: var(--f-testo); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accento); margin: 0 0 0.4rem; }
.carta { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 1.25rem; }
@media (min-width: 40rem) { .carta { padding: 1.6rem 1.8rem; } }

/* ---------- Testata ---------- */
/* niente backdrop-filter: renderebbe la testata il riferimento del bottone «Chiama» fisso su telefono */
.testata { position: sticky; top: 0; z-index: 10; background: var(--superficie); border-bottom: 1px solid var(--bordo); }
.testata .riga { display: flex; align-items: center; gap: 1rem; padding-block: 0.6rem; }
.marchio { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--testo); min-width: 0; }
.marchio-segno { width: 2.6rem; height: 2.6rem; flex: none; }
.marchio .nome { display: block; font-family: var(--f-titoli); font-weight: 600; font-size: 1.15rem; line-height: 1.2; }
.marchio .sottotitolo { display: block; color: var(--tenue); font-size: 0.85rem; line-height: 1.3; }
.menu { display: none; margin-left: auto; gap: 0.25rem; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.8rem; color: var(--testo); font-weight: 700; text-decoration: none; border-radius: 999px; }
.menu a:hover { background: var(--tinta); color: var(--accento-scuro); }
@media (min-width: 62rem) { .menu { display: flex; } }

.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 48px; padding: 0.6rem 1.3rem;
  border-radius: 999px; background: var(--accento); color: var(--su-accento); font-weight: 700; text-decoration: none; border: 2px solid var(--accento); }
.bottone:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); }
.bottone.secondario { background: var(--superficie); color: var(--accento); }
.bottone.secondario:hover { background: var(--tinta); }
@media (prefers-reduced-motion: no-preference) { .bottone, .rapida, .elenco-link a { transition: background-color 150ms, transform 150ms, border-color 150ms; } }
.numero { font-variant-numeric: tabular-nums; white-space: nowrap; }
.testata .chiama { margin-left: auto; padding-inline: 1rem; }
.testata .menu + .chiama { margin-left: 0.5rem; }
@media (max-width: 40rem) {
  .testata .chiama { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 15; box-shadow: 0 6px 20px rgb(0 0 0 / 0.22); }
  .marchio .sottotitolo { display: none; }
  body { padding-bottom: 5.5rem; }
}

/* ---------- Apertura ---------- */
.apertura { background: var(--apertura-fondo); color: var(--apertura-testo); position: relative; }
.apertura-griglia { display: grid; gap: 1.5rem; padding-block: 2.5rem 1rem; align-items: center; }
@media (min-width: 56rem) { .apertura-griglia { grid-template-columns: 1.05fr 1fr; gap: 3rem; padding-block: 4rem 1.5rem; } }
.apertura-testo { min-width: 0; }
.introduzione p { font-size: 1.12rem; }
.azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 1rem; }
.oggi-box { display: inline-flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; background: var(--superficie); color: var(--testo); border-radius: var(--raggio-piccolo);
  padding: 0.6rem 1rem; font-variant-numeric: tabular-nums; box-shadow: 0 2px 0 var(--bordo); max-width: 100%; }
.oggi-box strong { color: var(--accento); }
.apertura-figura { min-width: 0; }
.illustrazione, .foto-apertura { width: 100%; height: auto; display: block; }
.foto-apertura { border-radius: var(--raggio); object-fit: cover; aspect-ratio: 32 / 23; }
.divisore { display: block; width: 100%; height: 48px; fill: var(--fondo); }
.apertura .divisore { margin-top: 0.5rem; }

/* colori delle illustrazioni (ruoli generici, valori dalla palette) */
.f-cielo { fill: var(--il-cielo); } .f-sole { fill: var(--il-sole); } .s-sole { stroke: var(--il-sole); }
.f-a { fill: var(--il-a); } .f-b { fill: var(--il-b); } .f-c { fill: var(--il-c); } .s-b { stroke: var(--il-b); }
.f-d { fill: var(--il-d); } .f-e { fill: var(--il-e); } .f-f { fill: var(--il-f); } .s-f { stroke: var(--il-f); }
.f-chiaro { fill: var(--il-chiaro); } .f-legno { fill: var(--il-legno); } .f-legno2 { fill: var(--il-legno2); }
.f-carta { fill: var(--il-carta); } .s-carta { stroke: var(--il-carta); fill: none; }
.f-tratto { fill: var(--testo); } .s-tratto { stroke: var(--testo); }
.f-accento { fill: var(--accento); } .f-tinta { fill: var(--tinta); } .s-tinta { stroke: var(--bordo); } .s-bordo { stroke: var(--bordo); }
.f-scuro { fill: var(--il-scuro); } .s-scuro2 { stroke: var(--il-scuro2); } .f-disco { fill: var(--il-disco); }
.f-vetro { fill: var(--il-vetro); } .s-vetro { stroke: var(--il-vetro); }
.f-ombra { fill: #000; opacity: 0.18; } .f-riflesso { fill: rgb(255 255 255 / 0.45); } .f-riflesso2 { fill: rgb(255 255 255 / 0.85); }
.f-evidenza { fill: var(--evidenza); } .s-accento { stroke: var(--accento); } .s-testo { stroke: var(--testo); fill: none; }
.testo-metro { font: 700 15px var(--f-testo); }

/* ---------- Schede rapide ---------- */
.rapide { margin-top: -0.5rem; }
.rapide-griglia { display: grid; gap: 0.9rem; }
@media (min-width: 48rem) { .rapide-griglia { grid-template-columns: repeat(3, 1fr); } }
.rapida { display: flex; gap: 1rem; align-items: center; min-width: 0; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1rem 1.2rem; color: var(--testo); text-decoration: none; box-shadow: 0 4px 0 var(--bordo); }
.rapida:hover { border-color: var(--accento); }
@media (prefers-reduced-motion: no-preference) { .rapida:hover { transform: translateY(-2px); } }
.rapida .icona-grande { color: var(--accento); background: var(--tinta); border-radius: 50%; padding: 0.55rem; width: 3.2rem; height: 3.2rem; }
.rapida span { min-width: 0; }
.rapida strong { display: block; font-family: var(--f-titoli); font-size: 1.1rem; }

/* ---------- Avvisi e urgenze ---------- */
.avviso, .urgenze { display: flex; gap: 1rem; align-items: flex-start; border-radius: var(--raggio); padding: 1.3rem; margin-top: 1.5rem; }
@media (min-width: 40rem) { .avviso, .urgenze { padding: 1.6rem 1.8rem; gap: 1.4rem; } }
.avviso > div, .urgenze > div { min-width: 0; }
.avviso h2, .urgenze h2 { font-size: 1.3rem; }
.avviso p:last-child, .urgenze p:last-child { margin-bottom: 0; }
.avviso { background: var(--superficie); border: 2px solid var(--evidenza); }
.avviso .icona-grande { color: var(--testo); background: var(--evidenza); border-radius: 50%; padding: 0.5rem; width: 3rem; height: 3rem; }
.urgenze { background: var(--accento-scuro); color: #fff; }
.urgenze .icona-grande { color: var(--accento-scuro); background: #fff; border-radius: 50%; padding: 0.55rem; width: 3rem; height: 3rem; }
.urgenze a { color: #fff; }

/* ---------- Sezioni ---------- */
.sezione { padding-block: 3rem; scroll-margin-top: 4.5rem; }
.sezione-tinta { background: var(--tinta); }
.titolo-sezione { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
.titolo-sezione h2 { margin: 0; }
.icona-sezione { width: 3.4rem; height: 3.4rem; padding: 0.7rem; border-radius: var(--raggio-piccolo); background: var(--accento); color: var(--su-accento); }
.prenota { margin-top: 1rem; }

/* Orari */
.orari-scorri { overflow-x: auto; }
table.orari { border-collapse: separate; border-spacing: 0; width: 100%; font-variant-numeric: tabular-nums; }
.orari th, .orari td { text-align: left; padding: 0.75rem 0.8rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.orari thead th { font-size: 0.88rem; color: var(--tenue); font-weight: 700; }
.orari tbody th { font-family: var(--f-titoli); font-weight: 600; white-space: nowrap; }
.orari tr:last-child th, .orari tr:last-child td { border-bottom: 0; }
.orari tr.oggi th, .orari tr.oggi td { background: var(--tinta); }
.orari tr.oggi th:first-child { box-shadow: inset 5px 0 0 var(--accento); }
.orari tr.oggi th::after { content: "oggi"; margin-left: 0.5rem; font: 700 0.72rem var(--f-testo); text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--accento); color: var(--su-accento); padding: 0.1rem 0.45rem; border-radius: 999px; vertical-align: 0.15em; }
.chiuso { color: var(--tenue); }
.nota { margin-top: 0.8rem; color: var(--tenue); font-size: 0.95rem; }
.vuoto { color: var(--tenue); }

/* Cifre */
.cifre { background: var(--accento); color: var(--su-accento); }
.cifre-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.5rem; padding-block: 2rem; }
.cifre p { margin: 0; display: grid; }
.cifre strong { font-family: var(--f-titoli); font-size: 2.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cifre span { opacity: 0.92; }

/* Sedi */
.sedi { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .sedi { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); } }
.sede { display: grid; gap: 1rem; padding: 0.75rem; overflow: hidden; }
.sede-mappa { display: block; border-radius: var(--raggio-piccolo); overflow: hidden; }
.minimappa { display: block; width: 100%; height: auto; }
.m-fondo { fill: var(--tinta); } .m-parco { fill: var(--il-d); } .m-fiume { stroke: var(--il-cielo); }
.m-strade { stroke: var(--superficie); } .m-pin { fill: var(--accento); stroke: var(--superficie); stroke-width: 3; } .m-pin-centro { fill: var(--superficie); }
.sede-testo { padding: 0.25rem 0.75rem 0.75rem; }
.indirizzo { font-weight: 700; font-size: 1.1rem; }
.collegamento { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; min-height: 44px; }

/* Persone */
.persone { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.persona { background: var(--superficie); border-radius: var(--raggio); padding: 1.5rem; text-align: center; border: 1px solid var(--bordo); min-width: 0; }
.ritratto { width: 7.5rem; height: 7.5rem; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  font: 600 2.4rem var(--f-titoli); color: var(--testo); box-shadow: 0 0 0 6px var(--superficie), 0 0 0 8px var(--bordo); }
.ritratto img { width: 100%; height: 100%; object-fit: cover; }
.r0 { background: var(--r0); } .r1 { background: var(--r1); } .r2 { background: var(--r2); } .r3 { background: var(--r3); }
.persona h3 { margin-bottom: 0.2em; }
.ruolo { color: var(--accento); font-weight: 700; margin-inline: auto; }
.ordine { font-size: 0.9rem; color: var(--tenue); margin-inline: auto; }
.presentazione { text-align: left; font-size: 0.97rem; }
.presentazione p:last-child { margin-bottom: 0; }

/* Come lavoriamo */
.blocchi { columns: 1; column-gap: 1.25rem; }
@media (min-width: 52rem) { .blocchi { columns: 2; } }
.blocco { break-inside: avoid; margin-bottom: 1.25rem; }
.blocco h3 { display: flex; gap: 0.6rem; align-items: center; color: var(--accento-scuro); }
.blocco h3 .icona { color: var(--accento); width: 1.5em; height: 1.5em; }
.blocco p:last-child, .blocco ul:last-child { margin-bottom: 0; }

/* Domande */
details.carta { padding: 0; margin-bottom: 0.75rem; }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1rem 1.25rem; min-height: 56px; font-weight: 700; font-family: var(--f-titoli); font-size: 1.1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--tinta); color: var(--accento); font-size: 1.3rem; }
details[open] summary::after { content: "–"; }
details > :not(summary) { padding-inline: 1.25rem; }
details > :last-child { padding-bottom: 1rem; }

/* Documenti e link */
.letture { display: grid; gap: 2rem; }
.letture > div { min-width: 0; }
.elenco-link { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; max-width: none; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.elenco-link a { display: flex; gap: 0.75rem; align-items: center; min-height: 48px; padding: 0.6rem 0.9rem; background: var(--superficie);
  border-radius: var(--raggio-piccolo); text-decoration: none; color: var(--testo); border: 1px solid var(--bordo); }
.elenco-link a:hover { border-color: var(--accento); color: var(--accento-scuro); }
.elenco-link .icona { color: var(--accento); }

/* Contatti */
.contatti { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); max-width: none; }
.contatti a { display: flex; gap: 1rem; align-items: center; padding: 1.1rem 1.25rem; border-radius: var(--raggio); background: var(--superficie);
  border: 2px solid var(--accento); color: var(--testo); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.contatti a:hover { background: var(--tinta); }
.contatti .icona-grande { color: var(--su-accento); background: var(--accento); border-radius: 50%; padding: 0.6rem; width: 3rem; height: 3rem; }
.contatti .etichetta { display: block; color: var(--tenue); font-size: 0.9rem; }
.contatti .numero { font-family: var(--f-titoli); font-size: 1.3rem; font-weight: 600; }

/* Home del servizio: galleria dei dieci modelli. Ogni voce porta la palette del suo modello
   (data-palette sulla voce), così il disegno di partenza si vede con i suoi colori. */
.galleria-intro { max-width: 70ch; margin-bottom: 1.5rem; }
.galleria { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
@media (min-width: 40rem) { .galleria { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .galleria { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.galleria-voce { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.galleria-voce a { display: block; color: var(--testo); text-decoration: none; }
.galleria-figura { display: block; background: var(--apertura-fondo); padding: 1rem 1.5rem; }
.galleria-figura svg { display: block; width: 100%; height: auto; max-height: 11rem; }
.galleria-nome { display: block; padding: 0.9rem 1.25rem 0; font-family: var(--f-titoli); font-size: 1.25rem; font-weight: 600; color: var(--accento-scuro); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.galleria-voce a:hover .galleria-nome { text-decoration-thickness: 2px; }
.galleria-voce p { padding: 0.3rem 1.25rem 1.1rem; margin: 0; color: var(--tenue); font-size: 0.95rem; }
.galleria-azione { margin-top: 1.75rem; }

/* Home del servizio: i passi per attivare il sito (sequenza vera, quindi numerata) e la riga per i
   genitori in fondo. */
.passi { list-style: none; counter-reset: passo; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); max-width: none; }
.passo { counter-increment: passo; position: relative; padding-top: 3.4rem; }
.passo::before { content: counter(passo); position: absolute; top: 1.1rem; left: 1.25rem; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--accento); color: var(--su-accento); font-family: var(--f-titoli); font-weight: 600; font-variant-numeric: tabular-nums; }
.passo h3 { margin-top: 0; color: var(--accento-scuro); }
.passo p:last-child { margin-bottom: 0; }
.passi-nota { display: flex; gap: 0.75rem; align-items: flex-start; max-width: 70ch; margin-top: 1.5rem; }
.passi-nota .icona { flex: none; color: var(--accento); width: 1.4em; height: 1.4em; margin-top: 0.15em; }
.nota-genitori { margin-top: 1rem; }
.nota-genitori p { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0; padding: 1rem 1.25rem; border-radius: var(--raggio-piccolo, 12px);
  background: var(--tinta); color: var(--testo); font-size: 0.95rem; }
.nota-genitori .icona { flex: none; color: var(--accento); width: 1.4em; height: 1.4em; margin-top: 0.1em; }
@media (max-width: 39.99rem) { .galleria { gap: 0.75rem; } .galleria-figura { padding: 0.6rem; } .galleria-nome { padding: 0.7rem 0.8rem 0; font-size: 1.1rem; } .galleria-voce p { padding: 0.2rem 0.8rem 0.8rem; font-size: 0.88rem; } }

/* Piede */
.piede { margin-top: 2rem; }
.piede .divisore { fill: var(--accento-scuro); }
.piede-corpo { background: var(--accento-scuro); color: #fff; padding-block: 1.5rem 2rem; }
.piede-corpo .riga:first-child { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .piede-corpo .riga:first-child { grid-template-columns: 1fr 1fr; } }
.piede a { color: #fff; }
.piede .nome { font-family: var(--f-titoli); font-size: 1.3rem; }
.piede p { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.piede-medici p { display: block; }
.piede-fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / 0.25); font-size: 0.92rem; }
.piede-fondo p { margin: 0; }
.piede mark.da-confermare { color: #3d3200; }
.testo-legale { padding-block: 2.5rem; }
.testo-legale h2 { font-size: 1.4rem; margin-top: 1.5em; }

/* ---------- Tocchi per modello ---------- */
/* Apertura scura (modelli con aperturaScura in modelli.mjs: il generatore mette data-apertura="scura") */
[data-apertura="scura"] .apertura { background: var(--apertura-scura); color: #ffffff; }
[data-apertura="scura"] .apertura .occhiello { color: var(--apertura-accento); }
[data-apertura="scura"] .apertura .bottone { background: var(--evidenza); border-color: var(--evidenza); color: var(--testo); }
[data-apertura="scura"] .apertura .bottone:hover { filter: brightness(1.08); }
[data-apertura="scura"] .apertura .bottone.secondario { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.7); }
[data-apertura="scura"] .apertura .bottone.secondario:hover { background: rgb(255 255 255 / 0.12); }
[data-apertura="scura"] .apertura a:focus-visible { outline-color: #fff; }


/* Giardino: forme morbide, ombre leggere come carta ritagliata */
[data-tema="giardino"] .carta, [data-tema="giardino"] .persona { border-color: transparent; box-shadow: 0 6px 18px rgb(47 107 74 / 0.10); }
[data-tema="giardino"] .icona-sezione { border-radius: 50% 50% 50% 14px; }
[data-tema="giardino"] .cifre { background: var(--accento); }

/* Quaderno: foglio a quadretti, sottolineature a pastello, schede appuntate col nastro */
[data-tema="quaderno"] body, [data-tema="quaderno"] {
  background-color: var(--fondo);
  background-image: linear-gradient(var(--tinta) 1px, transparent 1px), linear-gradient(90deg, var(--tinta) 1px, transparent 1px);
  background-size: 26px 26px;
}
[data-tema="quaderno"] .titolo-sezione h2 { text-decoration: underline wavy var(--evidenza) 3px; text-underline-offset: 10px; text-decoration-skip-ink: none; }
[data-tema="quaderno"] h1 { background: linear-gradient(transparent 62%, var(--r2) 62%, var(--r2) 92%, transparent 92%); display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-tema="quaderno"] .icona-sezione { transform: rotate(-4deg); background: var(--evidenza); color: var(--testo); }
[data-tema="quaderno"] .carta, [data-tema="quaderno"] .persona, [data-tema="quaderno"] .rapida { border: 2px solid var(--testo); box-shadow: 4px 4px 0 var(--testo); }
[data-tema="quaderno"] .persona { position: relative; }
[data-tema="quaderno"] .persona::before { content: ""; position: absolute; top: -12px; left: 50%; width: 84px; height: 24px; margin-left: -42px; background: var(--evidenza); opacity: 0.8; transform: rotate(-3deg); }
[data-tema="quaderno"] .persona:nth-child(even) { transform: rotate(0.8deg); }
[data-tema="quaderno"] .persona:nth-child(odd) { transform: rotate(-0.6deg); }
[data-tema="quaderno"] .sezione-tinta { background: var(--apertura-fondo); }
[data-tema="quaderno"] .cifre { background: var(--evidenza); color: var(--testo); }
[data-tema="quaderno"] .bottone { box-shadow: 3px 3px 0 var(--testo); border-color: var(--testo); }
[data-tema="quaderno"] .apertura { background-color: var(--apertura-fondo); }

/* Ambulatorio: apertura scura, geometria, motivo a croci */
[data-tema="ambulatorio"] .icona-sezione { border-radius: 12px; }
[data-tema="ambulatorio"] .sezione-tinta { background-color: var(--tinta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 14v12M14 20h12' stroke='%23000' stroke-opacity='0.08' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-tema="ambulatorio"] .cifre { background: var(--apertura-scura); }
[data-tema="ambulatorio"] .cifre strong { color: var(--apertura-accento); }
[data-tema="ambulatorio"] .rapida { box-shadow: 0 10px 24px rgb(15 44 76 / 0.12); border-color: transparent; }


/* Cartolina: l'illustrazione è una cartolina con francobollo; schede con bordo tratteggiato */
[data-tema="cartolina"] .apertura-figura { position: relative; background: var(--superficie); padding: 14px; border-radius: 4px; transform: rotate(-1.5deg);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.14); outline: 2px dashed var(--bordo); outline-offset: -8px; }
[data-tema="cartolina"] .apertura-figura::after { content: ""; position: absolute; top: -14px; right: 18px; width: 58px; height: 70px; background: var(--evidenza);
  border: 4px dotted var(--superficie); outline: 2px solid var(--evidenza); transform: rotate(6deg); }
[data-tema="cartolina"] .carta, [data-tema="cartolina"] .persona, [data-tema="cartolina"] .rapida { border: 2px dashed var(--bordo); box-shadow: none; }
[data-tema="cartolina"] .titolo-sezione h2 { font-style: italic; }
[data-tema="cartolina"] .icona-sezione { border-radius: 50%; }
[data-tema="cartolina"] .cifre { background: var(--accento-scuro); }

/* Rivista: copertina scura, titoli grandi, filetti sottili, nessun arrotondamento */
[data-tema="rivista"] h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.05; }
[data-tema="rivista"] .apertura .occhiello { letter-spacing: 0.18em; }
[data-tema="rivista"] .titolo-sezione { border-top: 3px solid var(--testo); padding-top: 0.9rem; }
[data-tema="rivista"] .titolo-sezione .icona-sezione { display: none; }
[data-tema="rivista"] .titolo-sezione h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
[data-tema="rivista"] .carta, [data-tema="rivista"] .persona, [data-tema="rivista"] .rapida { border: 1px solid var(--testo); box-shadow: none; }
[data-tema="rivista"] .bottone { border-radius: 0; }
[data-tema="rivista"] .ritratto { border-radius: 0; }
[data-tema="rivista"] .cifre { background: var(--apertura-scura); }
[data-tema="rivista"] .cifre strong { color: var(--apertura-accento); font-family: var(--f-titoli); }
[data-tema="rivista"] .apertura-figura .illustrazione { filter: drop-shadow(0 14px 30px rgb(0 0 0 / 0.35)); }

/* Nuvola: tutto tondo, bolle sullo sfondo */
[data-tema="nuvola"] body { background-image: radial-gradient(circle at 8% 20%, var(--tinta) 0 90px, transparent 91px),
  radial-gradient(circle at 92% 45%, var(--tinta) 0 130px, transparent 131px), radial-gradient(circle at 15% 80%, var(--tinta) 0 70px, transparent 71px);
  background-attachment: fixed; }
[data-tema="nuvola"] .carta, [data-tema="nuvola"] .persona, [data-tema="nuvola"] .rapida { border: 0; box-shadow: 0 8px 24px rgb(34 48 74 / 0.10); }
[data-tema="nuvola"] .icona-sezione { border-radius: 50%; }
[data-tema="nuvola"] .apertura-figura .illustrazione { background: var(--superficie); border-radius: 48% 52% 46% 54% / 55% 45% 55% 45%; padding: 4%; }
[data-tema="nuvola"] .cifre { background: var(--tinta); color: var(--testo); }
[data-tema="nuvola"] .cifre strong { color: var(--accento); }

/* Mosaico: tessere colorate e blocchi pieni */
[data-tema="mosaico"] .rapida { border: 0; box-shadow: none; }
[data-tema="mosaico"] .rapida:nth-child(1) { background: var(--r0); } [data-tema="mosaico"] .rapida:nth-child(2) { background: var(--r1); } [data-tema="mosaico"] .rapida:nth-child(3) { background: var(--r2); }
[data-tema="mosaico"] .rapida .icona-grande { background: var(--superficie); color: var(--testo); border-radius: 6px; }
[data-tema="mosaico"] .persona { border: 0; border-top: 10px solid var(--r0); box-shadow: 0 2px 0 var(--bordo); }
[data-tema="mosaico"] .persona:nth-child(4n+2) { border-top-color: var(--r1); } [data-tema="mosaico"] .persona:nth-child(4n+3) { border-top-color: var(--r2); } [data-tema="mosaico"] .persona:nth-child(4n+4) { border-top-color: var(--r3); }
[data-tema="mosaico"] .ritratto { border-radius: 8px; }
[data-tema="mosaico"] .icona-sezione { border-radius: 4px; background: var(--evidenza); color: var(--testo); }
[data-tema="mosaico"] .titolo-sezione h2 { text-transform: uppercase; letter-spacing: 0.02em; }
[data-tema="mosaico"] .blocco { border: 0; border-left: 8px solid var(--r1); }
[data-tema="mosaico"] .cifre-griglia p { background: rgb(255 255 255 / 0.12); padding: 1rem; border-radius: 6px; }

/* Essenziale: tanto bianco, un filo di colore, nessuna cornice */
[data-tema="essenziale"] .apertura { background: var(--superficie); border-bottom: 4px solid var(--accento); }
[data-tema="essenziale"] .carta, [data-tema="essenziale"] .persona, [data-tema="essenziale"] .rapida { border: 0; box-shadow: none; background: transparent; padding-inline: 0; }
[data-tema="essenziale"] .rapida { border-top: 2px solid var(--accento); border-radius: 0; }
[data-tema="essenziale"] .rapida .icona-grande, [data-tema="essenziale"] .icona-sezione { background: transparent; color: var(--accento); padding: 0; }
[data-tema="essenziale"] .sezione + .sezione { border-top: 1px solid var(--bordo); }
[data-tema="essenziale"] .sezione-tinta { background: transparent; }
[data-tema="essenziale"] .persona { text-align: left; }
[data-tema="essenziale"] .ritratto { margin-inline: 0; }
[data-tema="essenziale"] .cifre { background: transparent; color: var(--testo); border-block: 1px solid var(--bordo); }
[data-tema="essenziale"] .cifre strong { color: var(--accento); }
[data-tema="essenziale"] details.carta { border-bottom: 1px solid var(--bordo); border-radius: 0; }

/* Acquerello: macchie di colore morbide dietro l'apertura e le sezioni */
[data-tema="acquerello"] .apertura { background: radial-gradient(ellipse at 15% 25%, var(--r1) 0, transparent 55%), radial-gradient(ellipse at 85% 70%, var(--r2) 0, transparent 50%), var(--apertura-fondo); }
[data-tema="acquerello"] .sezione { position: relative; isolation: isolate; }
[data-tema="acquerello"] .sezione::before { content: ""; position: absolute; z-index: -1; inset: 10% auto auto 2%; width: 38%; height: 70%;
  background: radial-gradient(ellipse at center, var(--r3) 0, transparent 70%); opacity: 0.55; pointer-events: none; }
[data-tema="acquerello"] .sezione:nth-of-type(even)::before { inset: 20% 2% auto auto; background: radial-gradient(ellipse at center, var(--r0) 0, transparent 70%); }
[data-tema="acquerello"] .carta, [data-tema="acquerello"] .persona, [data-tema="acquerello"] .rapida { border: 0; box-shadow: 0 6px 20px rgb(38 42 51 / 0.08); }
[data-tema="acquerello"] .icona-sezione { border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%; }
[data-tema="acquerello"] .sezione-tinta { background: transparent; }

/* Classico: apertura centrata, cornici doppie, titoli con grazie tradizionali */
@media (min-width: 56rem) { [data-tema="classico"] .apertura-griglia { grid-template-columns: 1fr; text-align: center; } }
[data-tema="classico"] .apertura-testo { text-align: center; }
[data-tema="classico"] .apertura-testo p { margin-inline: auto; }
[data-tema="classico"] .azioni { justify-content: center; }
[data-tema="classico"] .apertura-figura { width: 100%; max-width: 44rem; margin: 0 auto; border: 6px double var(--accento); padding: 12px; border-radius: 50% 50% 14px 14px / 34% 34% 14px 14px; overflow: hidden; background: var(--superficie); }
[data-tema="classico"] .titolo-sezione { justify-content: center; text-align: center; }
[data-tema="classico"] .titolo-sezione .icona-sezione { display: none; }
[data-tema="classico"] .titolo-sezione h2::before, [data-tema="classico"] .titolo-sezione h2::after { content: "-"; color: var(--accento); margin-inline: 0.5em; font-weight: 400; }
[data-tema="classico"] .carta, [data-tema="classico"] .persona, [data-tema="classico"] .rapida { border: 4px double var(--bordo); box-shadow: none; }
[data-tema="classico"] .cifre { background: var(--accento-scuro); text-align: center; }

/* ---------- Configuratore (solo pagina dimostrativa) ---------- */
.per-tema { display: contents; }
/* le regole che nascondono le versioni degli altri modelli sono generate in coda */
.configuratore { background: #1b1f24; color: #f2f4f6; font: 15px/1.45 var(--sistema); padding-block: 0.9rem 1rem; }
.cfg-titolo { margin: 0 0 0.6rem; max-width: none; }
.cfg-codice { display: inline-block; margin-left: 0.5rem; color: #c9d1d9; }
.cfg-codice output { color: #ffffff; font-weight: 700; }
.cfg-griglia { display: grid; gap: 0.6rem 1.5rem; }
@media (min-width: 64rem) { .cfg-griglia { grid-template-columns: auto auto 1fr; } }
.cfg-gruppo { border: 0; margin: 0; padding: 0; min-width: 0; }
.cfg-gruppo legend { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #aab4be; padding: 0; margin-bottom: 0.3rem; }
.cfg-opzioni { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cfg-scelta { position: relative; }
.cfg-scelta input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cfg-scelta span { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0.35rem 0.8rem; border-radius: 999px;
  border: 1.5px solid #4a535d; background: #262b31; color: #f2f4f6; white-space: nowrap; }
.cfg-scelta input:checked + span { background: #ffffff; color: #1b1f24; border-color: #ffffff; font-weight: 700; }
.cfg-scelta input:focus-visible + span { outline: 3px solid #8ab4ff; outline-offset: 2px; }
.cfg-scelta:hover span { border-color: #c9d1d9; }
.cfg-colore i { width: 0.85rem; height: 0.85rem; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.5); }
.cfg-colore i:nth-of-type(4) { margin-right: 0.2rem; }

@media (max-width: 40rem) { .cfg-opzioni { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.3rem; } }
/* Configuratore con molte scelte: le illustrazioni sono raggruppate per categoria in un riquadro che scorre */
.cfg-griglia { grid-template-columns: 1fr; }
@media (min-width: 64rem) { .cfg-griglia { grid-template-columns: 1fr 1fr; } .cfg-illustrazioni { grid-column: 1 / -1; } }
.cfg-illustrazioni .cfg-opzioni { display: grid; gap: 0.35rem; max-height: 11.5rem; overflow-y: auto; padding-right: 0.4rem; }
.cfg-categoria { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.cfg-cat-nome { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: #aab4be; min-width: 7.5rem; }
.cfg-scelta span { min-height: 36px; padding: 0.25rem 0.7rem; font-size: 0.9rem; }
@media (max-width: 40rem) { .cfg-illustrazioni .cfg-opzioni { max-height: 9rem; } .cfg-categoria { flex-wrap: nowrap; overflow-x: auto; } }

/* Robustezza con i testi veri dei medici: nomi di file, indirizzi web e parole lunghe vanno a capo
   invece di allargare la pagina su telefono. */
h1, h2, h3, p, li, dd, summary, .elenco-link a span, .indirizzo { overflow-wrap: anywhere; }
.riga > *, .carta, .sede, .persona, .blocco, .avviso > div, .urgenze > div { min-width: 0; }

/* ---------- Palette, testi dei modelli, configuratore (generati da palette.mjs e modelli.mjs) ---------- */
[data-palette="salvia"]{--fondo:#f4f8f2;--tinta:#e3f0e2;--bordo:#d4e3d3;--accento:#2f6b4a;--accento-scuro:#1f4d34;--evidenza:#f4b63f;--apertura-fondo:#e7f3ee;--apertura-scura:#173a2a;--apertura-accento:#f4c76a;--r0:#f4b63f;--r1:#8cc29a;--r2:#f6a08a;--r3:#9fd3e6;--il-cielo:#cfe9e2;--il-sole:#f4b63f;--il-a:#e07a5f;--il-b:#e86f6f;--il-c:#f6a08a;--il-d:#b5dbb2;--il-e:#8cc29a;--il-f:#4f9a6b;--il-chiaro:#7cc08f;--il-scuro:#1f4d34;--il-scuro2:#2f6b4a;--il-disco:#2a5e42;--il-vetro:#d9eee6}
[data-palette="mare"]{--fondo:#f3f8fa;--tinta:#e0eff5;--bordo:#cfe2ea;--accento:#1f6480;--accento-scuro:#154559;--evidenza:#ffc857;--apertura-fondo:#e3f1f6;--apertura-scura:#10394a;--apertura-accento:#ffd27a;--r0:#ffc857;--r1:#8fd0e0;--r2:#f6a08a;--r3:#b5e3c8;--il-cielo:#cde7f0;--il-sole:#ffc857;--il-a:#ef7b5a;--il-b:#f2a65a;--il-c:#ffd6a0;--il-d:#a9d8e6;--il-e:#6fb7cf;--il-f:#3f9a7a;--il-chiaro:#7cc8a6;--il-scuro:#154559;--il-scuro2:#2a6f8c;--il-disco:#1f5a73;--il-vetro:#d4ecf5}
[data-palette="lavanda"]{--fondo:#f7f5fb;--tinta:#ece8f7;--bordo:#ddd7ef;--accento:#5b4b9a;--accento-scuro:#3f3370;--evidenza:#f7c873;--apertura-fondo:#eeeaf8;--apertura-scura:#2c2450;--apertura-accento:#f7c873;--r0:#f7c873;--r1:#c9bdf0;--r2:#f4b6c8;--r3:#b7e0d4;--il-cielo:#e0dbf3;--il-sole:#f7c873;--il-a:#e58fa8;--il-b:#d86f8e;--il-c:#f4b6c8;--il-d:#cfe6c8;--il-e:#a7cf9c;--il-f:#6f9f6a;--il-chiaro:#9cc794;--il-scuro:#3f3370;--il-scuro2:#5b4b9a;--il-disco:#4d3f86;--il-vetro:#e6e1f7}
[data-palette="albicocca"]{--fondo:#fdf7f2;--tinta:#fbeadf;--bordo:#f0dccd;--accento:#a14a24;--accento-scuro:#7a3418;--evidenza:#f2b134;--apertura-fondo:#fcebe0;--apertura-scura:#4a2212;--apertura-accento:#f6c37a;--r0:#f2b134;--r1:#f7c19f;--r2:#b9d48f;--r3:#9fd3e6;--il-cielo:#fde0cc;--il-sole:#f2b134;--il-a:#d0603a;--il-b:#e98a5f;--il-c:#f7c19f;--il-d:#e6dca6;--il-e:#c3c27a;--il-f:#7f9b5a;--il-chiaro:#a9c27f;--il-scuro:#5c2a16;--il-scuro2:#8a4023;--il-disco:#73351c;--il-vetro:#fbe6d6}
[data-palette="pastelli"]{--fondo:#fdfcf6;--tinta:#eef3ff;--bordo:#d9def0;--accento:#2b59c3;--accento-scuro:#1d3f91;--evidenza:#ffd23f;--apertura-fondo:#fff6d6;--apertura-scura:#14285c;--apertura-accento:#ffd23f;--r0:#ffd23f;--r1:#a8d5ff;--r2:#ffb3ba;--r3:#b8ebc8;--il-cielo:#dbe5fb;--il-sole:#ffd23f;--il-a:#e8505b;--il-b:#e8505b;--il-c:#3bb273;--il-d:#bfe6c9;--il-e:#86cfa0;--il-f:#3bb273;--il-chiaro:#8fe0ab;--il-scuro:#1d3f91;--il-scuro2:#2b59c3;--il-disco:#2550ad;--il-vetro:#dfe8fd}
[data-palette="ciliegia"]{--fondo:#fffbf8;--tinta:#fdecef;--bordo:#f2d9de;--accento:#b42a46;--accento-scuro:#861c33;--evidenza:#ffcf56;--apertura-fondo:#ffeef0;--apertura-scura:#4a1020;--apertura-accento:#ffcf56;--r0:#ffcf56;--r1:#ffb3c1;--r2:#a8e0d8;--r3:#c9c2f5;--il-cielo:#fde1e6;--il-sole:#ffcf56;--il-a:#ff9f43;--il-b:#e04866;--il-c:#2f9e8f;--il-d:#cdeedf;--il-e:#8fd3b8;--il-f:#2f9e8f;--il-chiaro:#7fd0bf;--il-scuro:#861c33;--il-scuro2:#b42a46;--il-disco:#9c2440;--il-vetro:#fde6ea}
[data-palette="menta"]{--fondo:#f8fdfa;--tinta:#e4f6ef;--bordo:#cfe8de;--accento:#13795b;--accento-scuro:#0c5741;--evidenza:#ffd166;--apertura-fondo:#e8f8f1;--apertura-scura:#0a3a2c;--apertura-accento:#ffd166;--r0:#ffd166;--r1:#a8dcff;--r2:#ffb8b0;--r3:#c8f0d9;--il-cielo:#d5f0f7;--il-sole:#ffd166;--il-a:#ef6f6c;--il-b:#ef6f6c;--il-c:#3fa7d6;--il-d:#c8f0d9;--il-e:#7fd6a6;--il-f:#3fae7a;--il-chiaro:#86dcac;--il-scuro:#0c5741;--il-scuro2:#13795b;--il-disco:#10684e;--il-vetro:#d8f2ea}
[data-palette="notte"]{--fondo:#f3f7fb;--tinta:#e4eef8;--bordo:#d3e0ec;--accento:#0b5fa5;--accento-scuro:#0a3d6b;--evidenza:#ff7a59;--apertura-fondo:#e3eef8;--apertura-scura:#0f2c4c;--apertura-accento:#ffb59f;--r0:#cfe6f5;--r1:#ffd5c8;--r2:#c9efe7;--r3:#e3dcf7;--il-cielo:#d6e8f7;--il-sole:#ffc857;--il-a:#ff7a59;--il-b:#ff7a59;--il-c:#3cb4c4;--il-d:#c9e6f2;--il-e:#8cc6e0;--il-f:#3cb4a0;--il-chiaro:#7fd6c6;--il-scuro:#16416b;--il-scuro2:#2a5c8c;--il-disco:#1f5a8f;--il-vetro:#cfe6f5}
[data-palette="prugna"]{--fondo:#faf5f9;--tinta:#f5e8f2;--bordo:#e9d5e4;--accento:#7a2e6b;--accento-scuro:#561f4b;--evidenza:#ff8f6b;--apertura-fondo:#f6e9f3;--apertura-scura:#2e1630;--apertura-accento:#ffc2ad;--r0:#f1d9ec;--r1:#ffd2c2;--r2:#cdeee4;--r3:#dcd8f6;--il-cielo:#f1dcec;--il-sole:#ffc46b;--il-a:#ff8f6b;--il-b:#ff8f6b;--il-c:#5cbfa5;--il-d:#e2efd8;--il-e:#b6d6a4;--il-f:#5cbf8a;--il-chiaro:#97dbb5;--il-scuro:#4a2147;--il-scuro2:#6e3a69;--il-disco:#5c2c58;--il-vetro:#f1d9ec}
[data-palette="grafite"]{--fondo:#f4f6f7;--tinta:#e9eef1;--bordo:#d8e0e5;--accento:#2f4858;--accento-scuro:#1e313d;--evidenza:#c6e05a;--apertura-fondo:#e8eef1;--apertura-scura:#1c262d;--apertura-accento:#dff08f;--r0:#dbe6ec;--r1:#e9f4b8;--r2:#cdeee0;--r3:#f5dcd0;--il-cielo:#dde7ec;--il-sole:#e8d04a;--il-a:#c6e05a;--il-b:#f0896b;--il-c:#5fb8c9;--il-d:#dbecd0;--il-e:#a9cf94;--il-f:#6dbb8a;--il-chiaro:#a6dcb6;--il-scuro:#2b3a44;--il-scuro2:#42545f;--il-disco:#364853;--il-vetro:#dbe6ec}
[data-tema="giardino"]{--testo:#1f2d26;--tenue:#4f6158}
[data-tema="quaderno"]{--testo:#1d2a44;--tenue:#4c5874}
[data-tema="ambulatorio"]{--testo:#10233a;--tenue:#4a5d73}
[data-tema="cartolina"]{--testo:#2a2420;--tenue:#5e5650}
[data-tema="rivista"]{--testo:#1a1d24;--tenue:#4f5562}
[data-tema="nuvola"]{--testo:#22304a;--tenue:#52607a}
[data-tema="mosaico"]{--testo:#1b2330;--tenue:#4d5868}
[data-tema="essenziale"]{--testo:#1c2228;--tenue:#525c66}
[data-tema="acquerello"]{--testo:#262a33;--tenue:#565c6a}
[data-tema="classico"]{--testo:#22201c;--tenue:#57524a}
[data-tema="giardino"] .per-tema:not(.per-giardino){display:none}
[data-tema="quaderno"] .per-tema:not(.per-quaderno){display:none}
[data-tema="ambulatorio"] .per-tema:not(.per-ambulatorio){display:none}
[data-tema="cartolina"] .per-tema:not(.per-cartolina){display:none}
[data-tema="rivista"] .per-tema:not(.per-rivista){display:none}
[data-tema="nuvola"] .per-tema:not(.per-nuvola){display:none}
[data-tema="mosaico"] .per-tema:not(.per-mosaico){display:none}
[data-tema="essenziale"] .per-tema:not(.per-essenziale){display:none}
[data-tema="acquerello"] .per-tema:not(.per-acquerello){display:none}
[data-tema="classico"] .per-tema:not(.per-classico){display:none}