/* Hallmark: pre-emit critique: P4 H4 E4 S4 R4 V4; weakest: S, hero and photo slots are placeholders until the images exist; nav: wordmark left, text links with a yellow underline on the current page and a round blue Scrivici right; footer: pale band with plain text links; copy: verbatim; palette and fonts taken from diventareoss.it (user site) */

:root {
  --carta: #fbfcfd;
  --fondo: #eef2f7;
  --fondo2: #e1e8f0;
  --inchiostro: #121a26;
  --secondario: #3f4a5a;
  --accento: #16284c;
  --accento-scuro: #0c1a38;
  --su-accento: #fbfcfd;
  --chiaro-su-scuro: #e9eff6;
  --ombra: rgba(36,28,33,0.35);
  --bordo: #66758a;
  --linea: #d0d9e4;
  --font-titoli: "Source Serif 4", Georgia, serif;
  --font-testo: "Figtree", system-ui, sans-serif;
  --sole: #b5975a;
  --arancio: #16284c;
  --raggio: 28px;
  --raggio-piccolo: 16px;
  --larghezza: 72rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--carta); color: var(--inchiostro); font: 400 1.1875rem/1.65 var(--font-testo); }
h1, h2, h3 { font-family: var(--font-titoli); font-weight: 400; line-height: 1.2; margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
a { color: var(--accento); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
a:hover { color: var(--accento-scuro); }
:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; border-radius: 6px; }
.salta { position: absolute; left: -999px; } .salta:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--carta); padding: 0.6rem 1rem; }
.contenitore { max-width: var(--larghezza); margin-inline: auto; padding-inline: max(1rem, env(safe-area-inset-left)); }
.avviso { background: var(--inchiostro); color: var(--carta); font-size: 1rem; }
.avviso p { margin: 0; padding: 0.5rem 0; }

.testata { background: var(--carta); border-bottom: 1px solid var(--linea); }
.testata .contenitore { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.logo { font: 400 1.5rem/1 var(--font-titoli); color: var(--inchiostro); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.6rem; }
.logo svg { width: 2rem; height: 2rem; }
.menu { display: flex; align-items: center; gap: 1.6rem; }
.menu a { color: var(--inchiostro); font-weight: 600; text-decoration: none; padding-block: 0.6rem; border-bottom: 3px solid transparent; }
.menu a[aria-current="page"] { border-bottom-color: var(--accento); }
.menu a:hover { border-bottom-color: var(--linea); }
.menu .pulsante { border-bottom: 0; color: var(--su-accento); padding: 0.55rem 1.3rem; min-height: 3rem; }

.pulsante { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.7rem 1.8rem; border-radius: 999px; background: var(--accento); color: var(--su-accento); font: 700 1.1875rem/1.2 var(--font-testo); text-decoration: none; border: 2px solid var(--accento); cursor: pointer; text-align: center; }
.pulsante:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); color: var(--su-accento); }
.pulsante.bordo { background: var(--carta); color: var(--accento); }
.pulsante.bordo:hover { background: var(--fondo); color: var(--accento-scuro); }
.pulsante.grande { min-height: 3.75rem; padding-inline: 2.2rem; }

.sez { padding-block: 5rem; }
.sez.f1 { background: var(--fondo); }
.sez.f2 { background: var(--fondo2); }
.intro { color: var(--secondario); max-width: 40rem; }
.etichetta, .esempio-tag { display: inline-block; font-size: 0.95rem; font-weight: 700; color: var(--accento-scuro); background: var(--fondo2); border-radius: 999px; padding: 0.15rem 0.75rem; margin-right: 0.5rem; }

/* segnaposto illustrazioni: fondo uguale alla sezione */
.segnaposto { margin: 0; display: grid; place-items: center; text-align: center; color: var(--secondario); font-size: 1rem; border: 2px dashed var(--bordo); border-radius: var(--raggio); padding: 1rem; }
.segnaposto span { max-width: 14rem; }
.f1 .segnaposto { background: var(--fondo); } .f2 .segnaposto { background: var(--fondo2); } .carta .segnaposto { background: var(--carta); }

/* HOME hero */
.hero { padding-block: 0; }
.hero .contenitore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 2.4rem; align-items: stretch; }
.hero-testo { padding-block: 2.4rem; align-self: center; }
.hero-testo > p { color: var(--secondario); max-width: 34rem; }
.hero h1 { font-size: clamp(2rem, 3vw, 2.5rem); }
.hero .segnaposto { align-self: stretch; margin-block: 2.4rem; min-height: 22rem; }
.ricerca { background: var(--carta); border-radius: var(--raggio); padding: 1.4rem; margin-block: 1.4rem 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; box-shadow: 0 2px 0 var(--linea); max-width: 36rem; }
.ricerca .pulsante { grid-column: 1 / -1; }
.campo { display: grid; gap: 0.3rem; }
label { font-weight: 700; }
input, select, textarea { font: inherit; color: var(--inchiostro); background: var(--carta); border: 2px solid var(--bordo); border-radius: var(--raggio-piccolo); min-height: 3.25rem; padding: 0.55rem 1rem; width: 100%; }
textarea { min-height: 8rem; }
.numeri { display: grid; grid-template-columns: repeat(3, auto); gap: 2.4rem; list-style: none; padding: 0; margin: 0; max-width: 36rem; justify-content: start; }
.numeri strong { display: block; font-variant-numeric: tabular-nums; font: 400 2rem/1.1 var(--font-titoli); color: var(--accento); }
.numeri span { font-size: 1rem; color: var(--secondario); display: block; line-height: 1.35; }

.fila-categorie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-top: 2rem; }
.cat { background: var(--carta); border-radius: var(--raggio); padding: 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.cat h3 { margin: 0; }
.cat p { color: var(--secondario); margin: 0; flex: 1; font-size: 1.0625rem; line-height: 1.5; }
.cat .segnaposto { aspect-ratio: 3 / 2; border-radius: 20px; font-size: 0.95rem; }

.passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; list-style: none; padding: 0; margin: 2.4rem 0 0; counter-reset: p; }
.passi li { counter-increment: p; }
.passi li::before { content: counter(p); display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--accento); color: var(--su-accento); font: 400 1.6rem/1 var(--font-titoli); margin-bottom: 1rem; }
.passi h3 { margin-bottom: 0.4rem; }
.passi p { color: var(--secondario); }

.testimonianze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; }
.testimonianza { background: var(--carta); border-radius: var(--raggio); padding: 1.8rem; margin: 0; display: flex; flex-direction: column; gap: 0.8rem; }
.testimonianza blockquote { margin: 0; flex: 1; font-size: 1.2rem; }
.testimonianza figcaption { font-size: 1rem; color: var(--secondario); }
.testimonianza .etichetta { margin: 0 0 0.4rem; align-self: flex-start; }

.faq { max-width: 50rem; margin-top: 2rem; display: grid; gap: 0.8rem; }
.faq details { background: var(--fondo); border-radius: var(--raggio-piccolo); padding: 0 1.4rem; }
.faq summary { cursor: pointer; font-weight: 700; padding: 1.1rem 0; min-height: 3.25rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.6rem; color: var(--accento); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 1.1rem; margin: 0; color: var(--secondario); }

.banda { background: var(--inchiostro); color: var(--carta); border-radius: var(--raggio); padding: 2.6rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.4rem; }
.banda h2 { color: var(--carta); margin: 0 0 0.4rem; } .banda p { margin: 0; color: var(--chiaro-su-scuro); }
.banda .pulsante { background: var(--carta); color: var(--inchiostro); border-color: var(--carta); } .banda .pulsante:hover { background: var(--fondo2); color: var(--inchiostro); }
.banda :focus-visible { outline-color: var(--carta); }

/* LISTA */
.testa-pagina { padding-block: 3rem 2.5rem; }
.briciole ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1rem; font-size: 1rem; }
.briciole li + li::before { content: "›"; margin-right: 0.5rem; color: var(--secondario); }
.lista-pagina { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2.4rem; align-items: start; }
.chip-fila { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.chip { font: 600 1.0625rem/1 var(--font-testo); min-height: 3rem; padding: 0.5rem 1.2rem; border-radius: 999px; border: 2px solid var(--bordo); background: var(--carta); color: var(--inchiostro); cursor: pointer; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--accento); border-color: var(--accento); color: var(--su-accento); }
.conteggio { color: var(--secondario); }
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.4rem; }
.card { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio); padding: 1rem; display: grid; grid-template-columns: 11rem 1fr; gap: 1.4rem; }
.card .segnaposto { aspect-ratio: 1; border-radius: 20px; font-size: 0.9rem; padding: 0.5rem; background: var(--fondo); }
.card h2 { font-size: 1.45rem; margin: 0 0 0.3rem; } .card h2 a { color: var(--inchiostro); text-decoration: none; } .card h2 a:hover { text-decoration: underline; }
.tipo { color: var(--secondario); margin-bottom: 0.6rem; font-size: 1.0625rem; }
.card-testo p.riga { margin: 0 0 0.3rem; font-size: 1.0625rem; }
.azioni { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.8rem; }
.mappa { margin: 0; position: sticky; top: 1rem; background: var(--carta); border-radius: var(--raggio); overflow: hidden; border: 1px solid var(--linea); }
.mappa svg { display: block; width: 100%; height: auto; }
.mappa figcaption { padding: 0.8rem 1rem; font-size: 1rem; color: var(--secondario); }

/* SCHEDA */
.scheda-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.scheda-testa h1 { margin-bottom: 0.3rem; }
.gestita { color: var(--accento-scuro); font-weight: 700; margin: 0.3rem 0 0; }
.foto { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.8rem; margin-top: 1.6rem; }
.foto .segnaposto { border-radius: var(--raggio-piccolo); background: var(--fondo2); }
.foto .segnaposto:first-child { grid-row: 1 / 3; aspect-ratio: 3 / 2; border-radius: var(--raggio) var(--raggio-piccolo) var(--raggio-piccolo) var(--raggio); }
.scheda { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.4rem; align-items: start; }
.scheda section { margin-bottom: 3rem; }
.tabella { width: 100%; border-collapse: collapse; }
.tabella th, .tabella td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabella th { width: 40%; font-weight: 700; }
.laterale { position: sticky; top: 1rem; background: var(--fondo); border-radius: var(--raggio); padding: 1.6rem; }
.laterale .pulsante { width: 100%; } .laterale p { margin: 0.8rem 0 0; font-size: 1.0625rem; color: var(--secondario); }
.piccolo, .nota { font-size: 1rem; color: var(--secondario); }
.info-campo { margin-bottom: 1.2rem; } .info-campo h3 { margin-bottom: 0.2rem; font-size: 1.2rem; }
.modulo-richiesta { background: var(--fondo); border-radius: var(--raggio); padding: 2rem; }
.modulo-richiesta form { display: grid; gap: 1.2rem; max-width: 36rem; }
.spunta { display: grid; grid-template-columns: 1.8rem 1fr; gap: 0.8rem; align-items: start; }
.spunta input { width: 1.6rem; min-height: 1.6rem; height: 1.6rem; margin-top: 0.2rem; accent-color: var(--accento); }
.telefono-struttura { background: var(--fondo2); border-radius: var(--raggio); padding: 1.8rem; }
.telefono { font: 400 1.8rem/1.2 var(--font-titoli); }
.fila-vicine { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 0.6rem; }
.vicina { flex: 0 0 14rem; background: var(--fondo); border-radius: var(--raggio-piccolo); padding: 1rem 1.2rem; }
.vicina h3 { font-size: 1.1rem; margin-bottom: 0.2rem; } .vicina p { margin: 0; font-size: 1rem; color: var(--secondario); }

.piede { background: var(--fondo2); padding-block: 3rem 5.5rem; }
.piede p { max-width: 42rem; }
.piede ul { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 1.4rem 0; }
.piede li a { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.1rem; border-radius: 999px; background: var(--carta); text-decoration: none; font-weight: 600; }
.piede .accesso { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.8rem; border-radius: 999px; background: var(--inchiostro); color: var(--carta); font-weight: 700; text-decoration: none; margin-top: 0.5rem; }
.piede .accesso:hover { background: var(--accento-scuro); color: var(--carta); }

.scrivici-fisso { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 20; display: grid; place-items: center; align-content: center; gap: 0.1rem; width: 5rem; height: 5rem; border-radius: 50%; background: var(--accento); color: var(--su-accento); text-decoration: none; font: 700 0.95rem/1 var(--font-testo); box-shadow: 0 0 0 3px var(--carta), 0 2px 8px var(--ombra); transition: transform 0.2s ease-out; }
.scrivici-fisso svg { width: 1.7rem; height: 1.7rem; }
.scrivici-fisso:hover { background: var(--accento-scuro); color: var(--su-accento); }
.scrivici-fisso:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 5px; }
.scrivici-fisso.nascosto { transform: translateY(calc(100% + 2rem)); }

@media (max-width: 60rem) {
  .hero .contenitore, .lista-pagina, .scheda { grid-template-columns: minmax(0, 1fr); }
  .hero-testo { padding-block: 3rem 1rem; }
  .hero .segnaposto { margin-block: 0 3rem; min-height: 0; aspect-ratio: 4 / 3; }
  .mappa, .laterale { position: static; }
  .scheda .laterale { order: -1; }
  .passi, .testimonianze { grid-template-columns: 1fr; }
  .fila-categorie { grid-template-columns: repeat(4, 16rem); overflow-x: auto; padding-bottom: 0.8rem; scroll-snap-type: x proximity; }
  .cat { scroll-snap-align: start; }
}
@media (max-width: 40rem) {
  body { font-size: 1.125rem; }
  .sez { padding-block: 3.5rem; }
  .menu { gap: 0.9rem; } .menu a { font-size: 1rem; } .menu .nascondi-tel { display: none; }
  .logo { font-size: 1.25rem; } .logo svg { width: 1.6rem; height: 1.6rem; }
  .ricerca { grid-template-columns: 1fr; padding: 1rem; }
  .numeri { gap: 1rem; } .numeri strong { font-size: 1.5rem; } .numeri span { font-size: 0.9375rem; }
  .card { grid-template-columns: 1fr; } .card .segnaposto { aspect-ratio: 3 / 2; }
  .chip-fila { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.4rem; }
  .foto { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .foto .segnaposto:first-child { grid-column: 1 / -1; grid-row: auto; }
  .foto .segnaposto:not(:first-child) { aspect-ratio: 3 / 2; }
  .banda, .modulo-richiesta { padding: 1.5rem; }
  .scrivici-fisso { width: 4.2rem; height: 4.2rem; font-size: 0.85rem; } .scrivici-fisso svg { width: 1.5rem; height: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { html { overflow-x: clip; scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
.pulsante:active, .chip:active, .scrivici-fisso:active { transform: translateY(1px); }
.pulsante:disabled, .chip:disabled, input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.piccolo, .nota, .tipo, .conteggio, .card-testo p.riga, .testimonianza figcaption, .mappa figcaption, .vicina p, .numeri span { font-size: 1.125rem; }
@media (max-width: 40rem) { .numeri span { font-size: 1rem; } }
.menu a { white-space: nowrap; }
@media (max-width: 40rem) { .menu .pulsante { padding-inline: 1rem; } .testata .contenitore { gap: 0.5rem; } }
@media (max-width: 40rem) { .menu .pulsante { display: none; } }

/* Giallo: griglia unica, stessi margini, elementi affiancati di pari altezza */
:root { --gap: 1.5rem; }
.sez { padding-block: 4.5rem; }
.hero.sez { padding-block: 3rem; }
.griglia2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.hero .contenitore { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.hero-testo { padding-block: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap); }
.hero-testo > div p { max-width: 34rem; }
.hero .ricerca { margin: 0; }
.hero .hero-img.segnaposto { margin: 0; align-self: stretch; min-height: 22rem; }
.menu .pulsante { background: var(--accento); color: var(--su-accento); }
.menu .pulsante:hover { background: var(--scuro); color: var(--su-accento); }
.scorri { display: grid; gap: var(--gap); align-items: stretch; }
.scorri.quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scorri.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.art { background: var(--fondo); border-radius: var(--raggio); padding: 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; }
.art .foto.segnaposto { aspect-ratio: 3 / 2; margin: 0; border-radius: 20px; font-size: 0.95rem; background: var(--carta); }
.art h3, .art h2 { margin: 0; font-size: 1.3rem; }
.art h3 a, .art h2 a { color: var(--inchiostro); text-decoration: none; }
.art h3 a:hover, .art h2 a:hover { text-decoration: underline; }
.art p { margin: 0; color: var(--secondario); font-size: 1.0625rem; line-height: 1.5; }
.art .cat-art { font-size: 0.95rem; font-weight: 700; color: var(--accento); }
.art.tutti { background: var(--fondo2); border: 2px solid var(--sole); color: var(--inchiostro); text-decoration: none; justify-content: center; align-items: center; text-align: center; min-height: 100%; }
.art.tutti .grande-testo { font: 400 1.8rem/1.2 var(--font-titoli); }
.art.tutti span:last-child { color: var(--inchiostro); font-size: 1.0625rem; }
.art.tutti:hover { background: var(--linea); }
.sez.f1 .art { background: var(--carta); }
.sez.f1 .cat { background: var(--carta); }
.cat { height: 100%; }
.cat .segnaposto { background: var(--fondo); }
.passi { gap: var(--gap); }
.cta-largo { display: block; width: 100%; background: var(--accento); color: var(--su-accento); text-align: center; text-decoration: none; font: 400 clamp(1.6rem, 4vw, 2.6rem)/1.2 var(--font-titoli); padding: 2.4rem 1rem; }
.cta-largo:hover { background: var(--scuro); color: var(--su-accento); }
.cta-largo:focus-visible { outline-color: var(--su-accento); }
.cta-largo:focus-visible { outline-offset: -8px; }
.due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.blocco { background: var(--fondo); border-radius: var(--raggio); padding: 2.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.blocco p { color: var(--secondario); flex: 1; max-width: 34rem; }
.blocco h2 { margin: 0; }
.testimonianza { height: 100%; }
.testimonianza .foto-t { width: 5rem; height: 5rem; border-radius: 50%; margin: 0; font-size: 0.85rem; padding: 0; }
.faq details { background: var(--fondo); }
.sez.f1 .faq details { background: var(--carta); }
.elenco-blog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.art.orizz { flex-direction: row; align-items: stretch; gap: 1.2rem; }
.art.orizz .foto.segnaposto { flex: 0 0 38%; aspect-ratio: 3 / 2; align-self: flex-start; }
.art.orizz > div { display: flex; flex-direction: column; gap: 0.6rem; }
.testa-blog { padding-block: 3rem; }
.testa-blog h1 { margin-bottom: 0.4rem; }
.briciole ol { list-style: none; display: flex; gap: 0.5rem; padding: 0; margin: 0 0 1rem; font-size: 1rem; }
.briciole li + li::before { content: "/"; margin-right: 0.5rem; }
@media (max-width: 64rem) {
  .scorri { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 0.8rem; margin-right: calc(-1 * max(1rem, env(safe-area-inset-right))); padding-right: 1rem; scrollbar-width: thin; }
  .scorri > * { flex: 0 0 min(78%, 20rem); scroll-snap-align: start; }
}
@media (max-width: 52rem) {
  .griglia2, .hero .contenitore, .due, .elenco-blog { grid-template-columns: minmax(0, 1fr); }
  .hero .hero-img.segnaposto { aspect-ratio: 4 / 3; min-height: 0; }
  .art.orizz { flex-direction: column; }
  .art.orizz .foto.segnaposto { flex: none; width: 100%; }
  .passi { grid-template-columns: minmax(0, 1fr); }
  .blocco { padding: 1.8rem; }
}
@media (max-width: 52rem) {
  .testata .contenitore { flex-wrap: wrap; row-gap: 0; padding-block: 0.5rem 0; }
  .menu { width: 100%; overflow-x: auto; gap: 1.2rem; padding-bottom: 0.6rem; scrollbar-width: none; }
  .menu .pulsante { margin-left: auto; }
}
@media (max-width: 52rem) {
  .menu { gap: 0.8rem; overflow-x: visible; }
  .menu a { font-size: 1rem; }
  .menu .pulsante { margin-left: 0; padding: 0.5rem 0.95rem; min-height: 2.75rem; }
}
.segnaposto { text-align: center; justify-items: center; align-content: center; }
@media (max-width: 40rem) { .menu .pulsante { display: inline-flex; } }

/* Articolo e banner per le RSA */
.testo-articolo { max-width: 46rem; }
.testo-articolo h2 { margin-top: 2.2rem; }
.testo-articolo p { max-width: none; }
.meta-art { color: var(--secondario); font-size: 1rem; }
.sintesi { background: var(--fondo); border-radius: var(--raggio); padding: 1.6rem 1.8rem; }
.sintesi h2 { margin: 0 0 0.4rem; font-size: 1.4rem; }
.sintesi p { margin: 0; }
.nota-art { color: var(--secondario); font-size: 1rem; margin-top: 2rem; }
.banner-rsa { margin: 2.4rem 0; background: var(--accento); color: var(--su-accento); border-radius: var(--raggio); padding: 2rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap); align-items: center; }
.testo-articolo .banner-rsa h2 { margin: 0 0 0.4rem; }
.banner-rsa p { margin: 0; max-width: 30rem; }
.banner-rsa h2, .testo-articolo .banner-rsa h2, .banner-rsa p { color: var(--su-accento); }
.banner-rsa .pulsante { background: var(--carta); color: var(--accento); border-color: var(--carta); }
.banner-rsa .pulsante:hover { background: var(--fondo2); color: var(--accento); }
.banner-rsa :focus-visible { outline-color: var(--su-accento); }
@media (max-width: 52rem) { .banner-rsa { grid-template-columns: minmax(0, 1fr); padding: 1.6rem; } .banner-rsa .pulsante { justify-self: stretch; text-align: center; } }

/* palette sobrie: titoli serif a 600 */
h1, h2, h3, .logo, .cta-largo, .grande-testo, .passi li::before { font-weight: 600; }
.menu a[aria-current="page"] { border-bottom-color: var(--accento); }
.art.tutti .grande-testo { font-weight: 600; }

/* ===== Stile diventareoss.it applicato al layout di m5 (token, font, raggi, componenti) ===== */
@font-face { font-family: "Lexend"; font-weight: 600; font-display: swap; src: url("font/lexend-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("font/atkinson-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("font/atkinson-latin-700.woff2") format("woff2"); }
:root {
  --carta: #ffffff; --fondo: #eef3fa; --fondo2: #e2eaf6; --inchiostro: #22272e; --secondario: #3a4350;
  --accento: #1c3d7a; --accento-scuro: #12295a; --su-accento: #ffffff; --chiaro-su-scuro: #e9eff6;
  --bordo: #6b7a8c; --linea: #d6deea; --sole: #f2b632; --verde: #2f6b57; --ocra: #8a5a00; --bianco: #ffffff; --giallo-chiaro: #fff6dc; --giallo-hover: #ffc94d; --su-giallo: #1b2533; --evid: #ffe39a;
  --font-titoli: "Lexend", "Atkinson Hyperlegible", sans-serif; --font-testo: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --raggio: 12px; --raggio-piccolo: 10px; --larghezza: 68rem;
}
body { font-size: 1.125rem; line-height: 1.6; }
h1, h2, h3, .logo { font-family: var(--font-titoli); font-weight: 600; letter-spacing: -0.015em; color: var(--accento); }
h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.1rem); line-height: 1.12; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.sez { padding-block: 3rem; }
.avviso { background: var(--fondo2); color: var(--inchiostro); }
.testata { border-bottom: 1px solid var(--linea); }
.logo { font-size: 1.25rem; gap: 0.55rem; }
.logo svg { width: 34px; height: 34px; flex: none; }
.menu { gap: 1.2rem; }
.menu a { font-weight: 400; border-bottom: 0; padding: 0.4rem 0.2rem; }
.menu a[aria-current="page"] { font-weight: 700; color: var(--accento); box-shadow: inset 0 -3px 0 var(--sole); }
.menu a:hover { background: none; color: var(--accento-scuro); }
.pulsante, .menu .pulsante { font-family: var(--font-titoli); font-weight: 600; border-radius: 999px; letter-spacing: -0.015em; }
.pulsante.bordo { background: var(--bianco); box-shadow: inset 0 0 0 2px var(--accento); }
.hero { background: var(--fondo); }
.hero h1 { max-width: 18ch; }
.sez.f1 { background: var(--fondo); }
.sez.f2 { background: var(--fondo2); }
.cat-art, .scheda-cat { color: var(--ocra); font-weight: 700; font-size: 0.95rem; letter-spacing: 0; }
.art { border-radius: var(--raggio-piccolo); border: 1px solid var(--linea); background: var(--bianco); }
.art.tutti { background: var(--accento); border: 0; color: var(--bianco); }
.art.tutti h3, .art.tutti a, .art.tutti p { color: var(--bianco); }
.cat, .blocco, .passi li, .vicina { border-radius: var(--raggio-piccolo); }
.cat { background: var(--fondo); border: 0; }
.cat:hover { background: var(--fondo2); }
.cta-largo { background: var(--accento); color: var(--bianco); font-family: var(--font-titoli); font-weight: 600; border-radius: 0; }
.cta-largo:hover { background: var(--accento-scuro); color: var(--bianco); }
.banner-rsa { background: var(--accento); color: var(--bianco); border-radius: var(--raggio); }
.banner-rsa h2, .banner-rsa p { color: var(--bianco); }
.banner-rsa .pulsante { background: var(--sole); color: var(--su-giallo); border-color: var(--sole); }
.banner-rsa .pulsante:hover { background: var(--giallo-hover); color: var(--su-giallo); }
.sintesi, .laterale, .modulo-richiesta, .blocco { background: var(--fondo); border-radius: var(--raggio); border: 0; }
.telefono-struttura { background: var(--fondo2); border-radius: var(--raggio); }
.telefono { font-family: var(--font-titoli); font-weight: 600; }
mark { background: linear-gradient(transparent 55%, var(--evid) 55%); color: inherit; }
.piede { background: var(--fondo); border-top: 0; }
.piede ul { gap: 0.2rem 1.2rem; }
.piede li a { background: none; padding: 0; min-height: 2.75rem; border-radius: 0; text-decoration: underline; color: var(--accento); }
.piede .accesso { background: var(--accento); color: var(--bianco); font-family: var(--font-titoli); font-weight: 600; }
.scrivici-fisso { background: var(--accento); color: var(--bianco); }
.nota-prova { background: var(--fondo); border-radius: var(--raggio-piccolo); padding: 1rem 1.2rem; margin: 0 0 1.5rem; }
@media (max-width: 40rem) { .sez { padding-block: 2.25rem; } }
.art.tutti span, .art.tutti span:last-child, .art.tutti .grande-testo { color: var(--bianco); }
.art.tutti:hover { background: var(--accento-scuro); }
@media (max-width: 40rem) { .menu { gap: 0.6rem; } .menu a { font-size: 1rem; padding-inline: 0.1rem; } .menu .pulsante { padding: 0.4rem 0.9rem; min-height: 2.75rem; } }
/* ===== Accento complementare (come il giallo di diventareoss): 6 punti, mai sulle azioni principali ===== */
.passi li::before { background: var(--sole); color: var(--su-giallo); }
.cta-largo { box-shadow: inset 0 -0.4rem 0 var(--sole); padding-bottom: calc(2.2rem + 0.4rem); }
.cat-art::before, .scheda-cat::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--sole); margin-right: 0.45rem; vertical-align: 0.05em; }
a.pulsante[href="/accesso-rsa/"] { background: var(--sole); color: var(--su-giallo); }
a.pulsante[href="/accesso-rsa/"]:hover { background: var(--giallo-hover); color: var(--su-giallo); }
.hero .contenitore { position: relative; }
@media (min-width: 60em) { .hero .contenitore::after { content: ""; position: absolute; right: 1.2rem; top: 1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--sole); } }

/* ===== Scelta utente 12/11/2026: Contatta e chip selezionato gialli, modulo su giallo chiarissimo ===== */
.card .azioni .pulsante:not(.bordo), .laterale .pulsante { background: var(--sole); color: var(--su-giallo); border-color: var(--sole); }
.card .azioni .pulsante:not(.bordo):hover, .laterale .pulsante:hover { background: var(--giallo-hover); color: var(--su-giallo); border-color: var(--giallo-hover); }
.chip[aria-pressed="true"] { background: var(--sole); border-color: var(--sole); color: var(--su-giallo); }
.modulo-richiesta { background: var(--giallo-chiaro); }
.hero-testo { align-self: center; }

/* ===== Modifiche utente 12/11/2026 (v3): filtri lista, dato assente, recensioni ===== */
.card .azioni { justify-content: center; }
.chip-fila.tipi { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 0.4rem; margin-bottom: 0.8rem; }
.chip-fila.tipi .chip, .chip-fila.tipi .altri { flex: none; }
.chip-fila.tipi .altri { display: flex; gap: 0.6rem; }
.chip-fila.tipi .altri[hidden] { display: none; }
.chip.altro { background: var(--fondo); border-color: var(--fondo2); }
.interruttori { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin-bottom: 1.2rem; }
.interruttore { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; font-weight: 400; cursor: pointer; position: relative; }
.interruttore input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.inter-grafica { flex: none; width: 3rem; height: 1.75rem; border: 2px solid var(--bordo); border-radius: 0.875rem; background: var(--carta); position: relative; }
.inter-grafica::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--bordo); }
.interruttore input:checked + .inter-grafica { background: var(--sole); border-color: var(--sole); }
.interruttore input:checked + .inter-grafica::after { transform: translateX(1.25rem); background: var(--su-giallo); }
.interruttore input:focus-visible + .inter-grafica { outline: 3px solid var(--accento); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .inter-grafica::after { transition: transform .15s; } }
.vuoto { color: var(--secondario); }
.modulo-richiesta h2 { color: var(--inchiostro); }
.fonti { margin-top: 2rem; }
.vuoto-testo { color: var(--secondario); margin: 0; }
.recensioni { display: grid; gap: 1rem; }
.recensione { background: var(--fondo); border-radius: var(--raggio-piccolo); padding: 1.2rem 1.4rem; }
.recensione p { margin: 0 0 0.4rem; }
.rec-testa { display: flex; align-items: center; gap: 0.8rem; }
.stelle { color: var(--ocra); font-size: 1.25rem; letter-spacing: 0.1em; }
.rec-testo { font-size: 1.1rem; }
.chip.altro::after { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.55rem; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.chip.altro[aria-expanded="true"]::after { transform: rotate(-135deg); }

/* Card lista v4: immagine alta quanto il testo, pulsante a tutta larghezza allineato al fondo dell'immagine */
.card { align-items: stretch; }
.card .segnaposto { aspect-ratio: auto; height: 100%; min-height: 11rem; }
.card-testo { display: flex; flex-direction: column; min-width: 0; }
.card-testo .tipi-struttura { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.6rem; }
.tipo-chip { display: inline-block; font-size: 0.95rem; font-weight: 700; color: var(--accento-scuro); background: var(--fondo2); border-radius: 999px; padding: 0.15rem 0.75rem; }
.tipo-chip.piu { background: var(--carta); border: 1px solid var(--linea); }
.card .azioni { margin-top: auto; padding-top: 0.6rem; display: block; }
.card .azioni .pulsante { display: block; width: 100%; text-align: center; box-sizing: border-box; }
@media (max-width: 720px) { .card .segnaposto { height: auto; aspect-ratio: 3 / 2; min-height: 0; } }
.card-testo .tipi-struttura { align-items: center; }
.tipi-struttura .zona { font-size: 1.0625rem; margin-left: 0.3rem; }
.card-testo p.indirizzo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Aggiunte per il sito vero (generatore): stessi token di oss-stile, nessun colore fuori da :root */
.piede-testo { margin-top: 1.4rem; }
.spazio-sopra { margin-top: 1.4rem; }
.briciole li[aria-current="page"] { color: var(--secondario); }
.credito { font-size: 0.875rem; color: var(--secondario); margin-top: 0.4rem; }
.credito a { color: var(--secondario); }

/* home: foto vera al posto del segnaposto */
.hero-img.foto-vera { margin: 0; align-self: stretch; display: flex; flex-direction: column; }
.hero-img.foto-vera img { width: 100%; height: 100%; min-height: 20rem; object-fit: cover; border-radius: var(--raggio); display: block; }
.esito-ricerca { grid-column: 1 / -1; margin: 0; color: var(--inchiostro); font-size: 1rem; }
.esito-ricerca:empty { display: none; }
.ricerca-riga { grid-template-columns: 1fr 1fr auto; align-items: end; max-width: 46rem; }
.ricerca-riga .pulsante { grid-column: auto; }

/* città */
.fila-citta { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.citta { display: flex; flex-direction: column; gap: 0.3rem; background: var(--fondo); border-radius: var(--raggio-piccolo); padding: 1.2rem 1.4rem; color: var(--inchiostro); text-decoration: none; border: 1px solid var(--linea); }
.citta:hover { background: var(--fondo2); }
.citta-nome { font: 600 1.4rem/1.2 var(--font-titoli); color: var(--accento); letter-spacing: -0.015em; }
.sez.f1 .citta { background: var(--bianco); }

/* blog: griglia a 3 colonne */
.griglia-blog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
.carta-art { position: relative; background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; display: flex; flex-direction: column; }
.carta-art[hidden] { display: none; }
.carta-art img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.carta-art .cc { padding: 1rem 1.2rem 1.2rem; display: flex; flex-direction: column; flex: 1; gap: 0.5rem; }
.carta-art .cat-art { margin: 0; }
.carta-art h2, .carta-art h3 { font-size: 1.2rem; line-height: 1.3; margin: 0; }
.carta-art h2 a, .carta-art h3 a { color: var(--inchiostro); text-decoration: none; }
.carta-art h2 a::after, .carta-art h3 a::after { content: ""; position: absolute; inset: 0; }
.carta-art:hover h2 a, .carta-art:hover h3 a { text-decoration: underline; }
.carta-art p:not(.cat-art) { margin: 0; color: var(--secondario); font-size: 1rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carta-art .leggi { margin-top: auto; padding-top: 0.4rem; font: 600 1rem/1.3 var(--font-titoli); color: var(--accento); }
.carta-art:focus-within { outline: 3px solid var(--accento); outline-offset: 2px; }
.carta-art a:focus-visible { outline: none; }
.sez.f1 .carta-art { background: var(--bianco); }
.tutti-art { margin: 1.6rem 0 0; }
.filtri-blog { margin-bottom: 1.6rem; }
.filtri-blog .chip[aria-pressed="true"] { background: var(--sole); border-color: var(--sole); color: var(--su-giallo); }

/* lista comune senza foto delle strutture (le foto solo con permesso) */
.card.senza-foto { grid-template-columns: 1fr; }
.card[hidden] { display: none; }
.riepilogo { position: sticky; top: 1rem; background: var(--fondo); border-radius: var(--raggio); padding: 1.6rem; }
.riepilogo h2 { font-size: 1.4rem; }
.riepilogo .tabella { margin-bottom: 1.6rem; }
.riepilogo .faq details { background: var(--bianco); }
.faq-titolo { margin-top: 0.4rem; }
.riepilogo .fonti { margin-top: 1.4rem; overflow-wrap: anywhere; }
.fonti { overflow-wrap: anywhere; }

/* articolo */
.foto-art { margin: 0 0 2rem; }
.foto-art img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raggio); display: block; }
.testo-articolo h3 { margin-top: 1.8rem; font-size: 1.25rem; }
.testo-articolo ul, .testo-articolo ol { padding-left: 1.4rem; margin: 0 0 1em; }
.testo-articolo li { margin: 0.35rem 0; }
.testo-articolo hr { border: 0; border-top: 1px solid var(--linea); margin: 2rem 0; }
.cat-art a { color: var(--ocra); text-decoration: none; }
.cat-art a:hover { text-decoration: underline; }
.sintesi { margin: 0 0 1.8rem; }
.sintesi ul { margin: 0.4rem 0 0; }
.indice { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 1rem 0; margin: 0 0 2rem; }
.indice-titolo { font: 600 1.1rem/1.3 var(--font-titoli); color: var(--accento); margin: 0 0 0.4rem; }
.indice ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.riquadro { background: var(--giallo-chiaro); border-radius: var(--raggio); padding: 1.3rem 1.5rem; margin: 1.6rem 0; }
.riquadro p:last-child, .riquadro ul:last-child { margin-bottom: 0; }
.tabella-scorri { overflow-x: auto; margin: 0 0 1.4rem; }
.tabella-art { border-collapse: collapse; width: 100%; font-size: 1rem; }
.tabella-art th, .tabella-art td { text-align: left; vertical-align: top; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--linea); }
.tabella-art thead th { font-family: var(--font-titoli); font-weight: 600; color: var(--accento); border-bottom: 2px solid var(--accento); }
.banner-titolo { font: 600 1.3rem/1.25 var(--font-titoli); color: var(--accento); letter-spacing: -0.015em; margin: 0 0 0.4rem; }
.pulsante.giallo { background: var(--sole); color: var(--su-giallo); }
.pulsante.giallo:hover { background: var(--giallo-hover); color: var(--su-giallo); }

/* banner famiglie A, a metà articolo: una foto scelta a caso a ogni visita */
.banner-famiglie { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.3rem; align-items: center; background: var(--fondo); border-left: 6px solid var(--sole); border-radius: var(--raggio); padding: 1.1rem; margin: 2rem 0; }
.banner-famiglie img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--raggio-piccolo); display: block; }
.banner-famiglie p { margin: 0 0 0.8rem; color: var(--secondario); }
.banner-famiglie .banner-titolo { color: var(--accento); }
/* banner famiglie B, fine articolo, con la ricerca */
.banner-ricerca { background: var(--accento); border-radius: var(--raggio); padding: 1.6rem; margin: 2.4rem 0 0; }
.banner-ricerca .banner-titolo, .banner-ricerca > p { color: var(--bianco); }
.banner-ricerca > p { margin: 0 0 1rem; }
.ric { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.8rem; align-items: end; background: var(--bianco); border-radius: var(--raggio-piccolo); padding: 1rem; }
.ric .pulsante { background: var(--sole); color: var(--su-giallo); }
.ric .pulsante:hover { background: var(--giallo-hover); color: var(--su-giallo); }
.banner-ricerca :focus-visible { outline-color: var(--sole); }
/* banner gestori A, a metà articolo */
.banner-gestori { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; background: var(--accento); border-top: 6px solid var(--sole); border-radius: var(--raggio); padding: 1.4rem 1.6rem; margin: 2rem 0; }
.banner-gestori .banner-titolo { color: var(--bianco); }
.banner-gestori p { margin: 0; color: var(--chiaro-su-scuro); }
.banner-gestori :focus-visible { outline-color: var(--sole); }
/* banner gestori B, fine articolo: chi siamo */
.banner-chi { background: var(--giallo-chiaro); border-radius: var(--raggio); padding: 1.5rem 1.6rem; margin: 2.4rem 0 0; }
.chi-etichetta { font-weight: 700; color: var(--verde); margin: 0 0 0.3rem; font-size: 1rem; }
.banner-chi ul { margin: 0.4rem 0 1.2rem; padding-left: 1.2rem; }

@media (max-width: 60rem) {
  .griglia-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .riepilogo { position: static; }
}
@media (max-width: 40rem) {
  .griglia-blog { grid-template-columns: minmax(0, 1fr); }
  .banner-famiglie { grid-template-columns: minmax(0, 1fr); }
  .banner-famiglie img { aspect-ratio: 3 / 2; }
  .ric, .ricerca-riga { grid-template-columns: minmax(0, 1fr); }
  .banner-gestori { grid-template-columns: minmax(0, 1fr); }
  .hero-img.foto-vera img { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
}
.menu .pulsante[aria-current="page"] { color: var(--su-accento); box-shadow: inset 0 -3px 0 var(--sole); }