/* Design Contract: identità propria sopra il motore comune (stile.css), seconda prova (26 ottobre 2026).
   Colori del marchio, invariati: blu #013E66, oro #C0972F (chiaro #CFB369), grigi #EDEDED, #D3D4D6, #BBBBBB.
   Contrasto: l'oro del marchio va su linee, barre e segni; il testo piccolo in oro usa l'oro scuro #7E6019
   (5,9:1 su bianco, 5,0:1 sul grigio); sul blu si usa l'oro chiaro #CFB369 (5,5:1).
   Dal motore restano: pannello Accessibilità, lingue, guida laterale a pallini, ritorno in cima, cookie.
   Sono propri di Design Contract: testata, menu a tutto schermo, pulsanti, impaginati, piede. */

@font-face { font-family: "Barlow"; src: url("../font/barlow-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../font/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../font/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../font/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../font/barlow-latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../font/barlow-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --dc-blu: #013E66;
  --dc-blu-notte: #012A45;
  --dc-oro: #C0972F;
  --dc-oro-chiaro: #CFB369;
  --dc-oro-testo: #7E6019;
  --dc-grigio: #EDEDED;
  --dc-grigio-medio: #D3D4D6;
  --dc-grigio-scuro: #BBBBBB;
  --font: "Barlow", "DIN 2014", "DIN Next", "Helvetica Neue", Arial, system-ui, sans-serif;
  --verde: var(--dc-oro);
  --verde-bottone: var(--dc-blu);
  --verde-testo: var(--dc-blu);
  --inchiostro: #1F262C;
  --grafite: #4F5A63;
  --carta: #FFFFFF;
  --tortora: var(--dc-grigio);
  --sabbia: var(--dc-grigio);
  --pietra: var(--dc-grigio-medio);
  --pannello: var(--dc-blu-notte);
  --testo-pannello: #F2F4F6;
  --fascia: rgba(255, 255, 255, .9);
}
:root[data-theme="dark"] {
  --dc-blu: #8FBDE0; --dc-blu-notte: #06121B; --dc-oro-testo: #D9BE73; --dc-grigio: #13202A; --dc-grigio-medio: #22323F; --dc-grigio-scuro: #3A4C5A;
  --inchiostro: #E8ECEF; --grafite: #AEB8C0; --carta: #0C1A24; --verde-bottone: #2B6E9E; --verde-testo: #9CC6E6;
  --pannello: #06121B; --fascia: rgba(12, 26, 36, .88);
}

body.dc { font-weight: 400; letter-spacing: .005em; }
.dc h1, .dc h2, .dc h3 { font-weight: 300; color: var(--dc-blu); letter-spacing: -.005em; }
.dc p { line-height: 1.7; }
.dc .etichetta span { color: var(--dc-oro-testo); font-weight: 500; }
.dc .etichetta::before { width: 2px; background: var(--dc-oro); }

/* ---------- Testata: marchio a sinistra; a destra Accessibilità, lingua e Menu (come nel sito 2024) ---------- */
.dc .testata { box-shadow: 0 1px 0 var(--dc-grigio-medio); }
.dc .testata .contenitore { gap: 1rem; }
.dc .testata .nav { margin-left: auto; }
.dc .testata .nav ul { gap: clamp(.6rem, 1.6vw, 1.6rem); }
.dc .nav .voce-accessibilita { border-left: 0; padding-left: 0; }
@media (max-width: 1100px) {
  .dc .testata .nav { position: static; inset: auto; padding: 0; background: none; visibility: visible; opacity: 1; overflow: visible; transition: none; }
  .dc .testata .nav ul { flex-direction: row; align-items: center; }
  .dc .testata .nav li { border: 0; display: flex; }
  .dc .nav .voce-accessibilita button, .dc .nav .voce-lingua > button { width: auto; font-size: var(--voce); letter-spacing: var(--voce-spaziatura); text-transform: uppercase; padding: .6rem .2rem; font-weight: 400; color: var(--grafite); }
  .dc .nav .voce-accessibilita .ico-accessibilita { width: 20px; height: 20px; }
}
@media (max-width: 700px) { .dc .nav .voce-accessibilita .voce-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.dc-menu-apri { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: .8rem; padding: .7rem 1rem .7rem 1.1rem; margin-left: clamp(.4rem, 1.5vw, 1.4rem);
  color: var(--dc-blu); font-size: var(--voce); letter-spacing: var(--voce-spaziatura); text-transform: uppercase; font-weight: 500; position: relative; isolation: isolate; }
.dc-menu-apri::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dc-blu); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--curva); }
.dc-menu-apri::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dc-oro); }
.dc-menu-apri:hover, .dc-menu-apri:focus-visible, .dc-menu-apri[aria-expanded="true"] { color: #fff; }
.dc-menu-apri:hover::before, .dc-menu-apri:focus-visible::before, .dc-menu-apri[aria-expanded="true"]::before { transform: none; }
.dc-menu-apri:focus-visible { outline: 2px solid var(--dc-oro); outline-offset: 3px; }
.dc-menu-linee { width: 22px; height: 9px; position: relative; }
.dc-menu-linee::before, .dc-menu-linee::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--curva); }
.dc-menu-linee::before { top: 0; } .dc-menu-linee::after { bottom: 0; }
.dc-menu-apri[aria-expanded="true"] .dc-menu-linee::before { transform: translateY(3.75px) rotate(45deg); }
.dc-menu-apri[aria-expanded="true"] .dc-menu-linee::after { transform: translateY(-3.75px) rotate(-45deg); }

/* ---------- Menu a tutto schermo: voci numerate e recapiti, sul blu ---------- */
.dc-menu { position: fixed; inset: calc(88px + env(safe-area-inset-top, 0px)) 0 0; z-index: 28; background: var(--dc-blu-notte); color: #fff; overflow-y: auto; overscroll-behavior: contain; }
.dc-menu:not([hidden]) { animation: dc-menu-entra .5s var(--curva) both; }
.dc-menu::before { content: ""; position: absolute; left: clamp(1rem, 6vw, 6rem); top: 0; bottom: 0; width: 3px; background: var(--dc-oro); }
.dc-menu-griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem clamp(2rem, 6vw, 7rem); padding-block: clamp(2.5rem, 7vh, 5rem) 4rem; padding-left: clamp(2.5rem, 9vw, 9rem); }
.dc-menu-voci { list-style: none; margin: 0; padding: 0; counter-reset: voce; }
.dc-menu-voci > li { border-bottom: 1px solid rgba(255,255,255,.16); }
.dc-menu-voci > li > a { display: flex; align-items: baseline; gap: 1.4rem; padding: 1.1rem 0; color: #fff; text-decoration: none; font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3.2rem); font-weight: 300; line-height: 1.1; transition: color .4s var(--curva), padding-left .5s var(--curva); }
.dc-menu-n { font-size: var(--voce); letter-spacing: .2em; color: var(--dc-oro-chiaro); font-weight: 500; }
.dc-menu-voci > li > a:hover, .dc-menu-voci > li > a:focus-visible, .dc-menu-voci a[aria-current="page"] { color: var(--dc-oro-chiaro); padding-left: .6rem; }
.dc-menu-sotto { list-style: none; margin: -.2rem 0 1.4rem calc(1.4rem + 2.2ch); padding: 0; display: grid; gap: .3rem; }
.dc-menu-sotto a { color: rgba(255,255,255,.86); text-decoration: none; font-size: var(--t-l); font-weight: 300; background: linear-gradient(var(--dc-oro), var(--dc-oro)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--curva), color .4s; }
.dc-menu-sotto a:hover, .dc-menu-sotto a:focus-visible, .dc-menu-sotto a[aria-current="page"] { color: #fff; background-size: 100% 1px; }
.dc-menu a:focus-visible { outline: 2px solid var(--dc-oro-chiaro); outline-offset: 4px; }
.dc-menu-recapiti { align-self: end; display: grid; gap: 1.6rem; padding-bottom: 1rem; }
.dc-menu-recapiti p { margin: 0; font-size: var(--t-m); line-height: 1.55; color: rgba(255,255,255,.9); }
.dc-menu-recapiti span { display: block; font-size: var(--voce-s); letter-spacing: .2em; text-transform: uppercase; color: var(--dc-oro-chiaro); margin-bottom: .35rem; }
.dc-menu-recapiti a { color: #fff; text-decoration: none; font-size: var(--t-l); }
.dc-menu-recapiti a:hover { text-decoration: underline; text-decoration-color: var(--dc-oro); text-underline-offset: .25em; }
html.dc-menu-aperto { overflow: hidden; }
@keyframes dc-menu-entra { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Pulsante di Design Contract: barra oro a sinistra, il blu riempie la superficie ---------- */
.dc-pulsante { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 1.1rem; padding: 1rem 1.3rem 1rem 1.5rem; text-decoration: none;
  color: var(--dc-blu); font-size: var(--voce); letter-spacing: var(--voce-spaziatura); text-transform: uppercase; font-weight: 500; white-space: nowrap; background: var(--dc-grigio); }
.dc-pulsante::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dc-blu); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--curva); }
.dc-pulsante span::after { content: "→"; display: inline-block; margin-left: 1rem; font-size: 1.1em; transition: transform .45s var(--curva); }
.dc-pulsante::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dc-oro); }
.dc-pulsante:hover, .dc-pulsante:focus-visible { color: #fff; }
.dc-pulsante:hover::before, .dc-pulsante:focus-visible::before { transform: none; }
.dc-pulsante:hover span::after, .dc-pulsante:focus-visible span::after { transform: translateX(6px); }
.dc-pulsante:focus-visible { outline: 2px solid var(--dc-oro); outline-offset: 3px; }

/* ---------- Home: apertura grigia con titolo e tre colonne (variante della home 2024) ---------- */
.dc-apertura { background: var(--dc-grigio); padding: calc(88px + clamp(3rem, 8vh, 6rem)) 0 clamp(3.5rem, 8vh, 6rem); min-height: var(--sch, 100vh); display: grid; align-content: center; }
.dc-apertura-testa { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1.2rem, 2.5vw, 2.4rem); margin-bottom: clamp(3rem, 8vh, 5.5rem); }
.dc-apertura-testa::before { content: ""; grid-column: 1; grid-row: 1 / span 3; width: 3px; background: var(--dc-oro); transform-origin: 50% 0; }
.dc-apertura h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem); line-height: 1.04; letter-spacing: -.02em; max-width: 22ch; }
.dc-apertura h1 span { font-weight: 500; }
.dc-motto { margin: 1.2rem 0 0; font-style: italic; font-weight: 300; font-size: var(--t-enunciato); color: var(--dc-oro-testo); }
.dc-tre-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dc-tre-griglia article { padding: 0 clamp(1.4rem, 3vw, 3rem); border-left: 1px solid var(--dc-oro); }
.dc-tre-griglia article:first-child { border-left: 0; padding-left: 0; }
.dc-tre-griglia h2 { font-size: var(--t-titolo); font-weight: 400; margin-bottom: 1.2rem; }
.dc-tre-griglia p { font-size: var(--t-s); margin: 0 0 .9rem; hyphens: auto; }

/* ---------- Home: ambiti di intervento, indice navigabile con anteprima ---------- */
.dc-ambiti { padding: clamp(4rem, 9vw, 8rem) 0; border-bottom: 1px solid var(--dc-oro); }
.dc-ambiti-griglia { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 4fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.dc-ambiti h2 { font-size: var(--t-display); margin-bottom: 2rem; }
.dc-recapiti { font-style: normal; font-size: var(--t-s); line-height: 1.75; color: var(--grafite); padding-left: 1.2rem; border-left: 1px solid var(--dc-oro); }
.dc-recapiti strong { color: var(--dc-blu); font-weight: 500; }
.dc-recapiti a { color: inherit; }
.dc-indice { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dc-grigio-medio); }
.dc-indice li { border-bottom: 1px solid var(--dc-grigio-medio); }
.dc-indice a { position: relative; isolation: isolate; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 2rem; grid-template-rows: auto auto; column-gap: 1rem; row-gap: .3rem;
  padding: 1.35rem 1rem 1.35rem 0; text-decoration: none; color: var(--inchiostro); transition: color .45s var(--curva), padding-left .5s var(--curva); }
.dc-indice a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dc-blu); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--curva); }
.dc-indice a::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dc-oro); transform: scaleY(0); transition: transform .45s var(--curva); }
.dc-indice-n { grid-row: 1 / span 2; font-size: var(--voce); letter-spacing: .2em; color: var(--dc-oro-testo); font-weight: 500; padding-top: .45rem; }
.dc-indice-nome { font-size: var(--t-l); color: var(--dc-blu); font-weight: 400; line-height: 1.25; }
.dc-indice-desc { grid-column: 2; font-size: var(--t-s); color: var(--grafite); line-height: 1.5; }
.dc-indice-freccia { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; width: 26px; height: 1px; background: currentColor; position: relative; color: var(--dc-oro); transition: width .45s var(--curva); }
.dc-indice-freccia::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.dc-indice a:hover, .dc-indice a:focus-visible, .dc-indice a.attivo { padding-left: 1.2rem; }
.dc-indice a:hover::before, .dc-indice a:focus-visible::before { transform: none; }
.dc-indice a:hover::after, .dc-indice a:focus-visible::after, .dc-indice a.attivo::after { transform: none; }
.dc-indice a:hover .dc-indice-nome, .dc-indice a:focus-visible .dc-indice-nome, .dc-indice a:hover .dc-indice-desc, .dc-indice a:focus-visible .dc-indice-desc { color: #fff; }
.dc-indice a:hover .dc-indice-n, .dc-indice a:focus-visible .dc-indice-n, .dc-indice a:hover .dc-indice-freccia, .dc-indice a:focus-visible .dc-indice-freccia { color: var(--dc-oro-chiaro); }
.dc-indice a:hover .dc-indice-freccia, .dc-indice a:focus-visible .dc-indice-freccia { width: 40px; }
.dc-indice a:focus-visible { outline: 2px solid var(--dc-oro); outline-offset: 2px; }
.dc-indice-vista { position: sticky; top: 120px; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--dc-grigio); }
.dc-indice-vista img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--curva), transform 1.2s var(--curva); }
.dc-indice-vista img.attiva { opacity: 1; transform: none; }
.dc-indice-vista::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dc-oro); }

/* ---------- Metodo ---------- */
.dc-perche { padding: clamp(4rem, 9vw, 8rem) 0; }
.dc-perche-griglia { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 4rem); }
.dc-perche .etichetta { grid-row: span 3; }
.dc-perche h2 { font-size: var(--t-display); max-width: 20ch; margin-bottom: 2rem; }
.dc-colonne { columns: 2 22rem; column-gap: clamp(2rem, 4vw, 4rem); }
.dc-colonne p { margin: 0 0 1.2rem; break-inside: avoid; }
.dc-perche-azione { margin: 1.2rem 0 0; }

/* ---------- Pagine di settore ---------- */
.dc-hero { position: relative; margin-top: 88px; min-height: calc(var(--sch, 100vh) * .78 - 88px); display: grid; align-items: end; color: #fff; overflow: hidden; }
.dc-hero-immagine { position: absolute; inset: 0; margin: 0; }
.dc-hero-immagine img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.dc-hero-immagine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,30,50,0) 30%, rgba(1,30,50,.2) 50%, rgba(1,25,42,.84) 100%); }
.dc-hero-fascia { position: relative; padding: 0 0 clamp(2.5rem, 7vh, 5rem); }
.dc-hero-fascia::before { content: ""; position: absolute; left: clamp(1rem, 6vw, 6rem); bottom: 0; height: 60%; width: 3px; background: var(--dc-oro); }
.dc-hero h1 { color: #fff; font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem); line-height: 1.04; max-width: 16ch; letter-spacing: -.015em; }
.dc-hero .etichetta { flex-direction: row; gap: .9rem; margin-bottom: 1.2rem; }
.dc-hero .etichetta::before { width: 36px; height: 2px; }
.dc-hero .etichetta span { writing-mode: horizontal-tb; transform: none; color: var(--dc-oro-chiaro); }
.dc-hero .dc-sommario { color: rgba(255,255,255,.92); max-width: 52ch; margin: 1.2rem 0 0; }
.dc-blocco { padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(2rem, 5vw, 4rem); }
.dc-blocco-griglia { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.dc-blocco h2 { font-size: var(--t-display); margin-bottom: 1.6rem; max-width: 18ch; }
.dc-blocco-testo p { max-width: var(--misura); }
.dc-citazione { margin: 4.4rem 0 0; padding: .2rem 0 .2rem 1.6rem; border-left: 3px solid var(--dc-oro); }
.dc-citazione p { font-style: italic; font-weight: 300; font-size: var(--t-enunciato); line-height: 1.45; color: var(--dc-oro-testo); margin: 0; }
.dc-blocco--integrazione { background: var(--dc-grigio); margin-top: clamp(2rem, 5vw, 4rem); }
.dc-blocco--integrazione .dc-blocco-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dc-blocco--integrazione h2 { font-size: var(--t-titolo); }
.dc-figura { margin-top: 0; margin-bottom: 0; }
.dc-tendina { overflow: hidden; aspect-ratio: 16 / 8; position: relative; }
.dc-tendina::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dc-oro); }
.dc-tendina img { width: 100%; height: 100%; object-fit: cover; }
.dc-approfondimenti { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.dc-approfondimenti h2 { font-size: var(--t-titolo); margin-bottom: 1.6rem; }
.dc-porte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.dc-porte a { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: .6rem; min-height: 11rem; padding: 1.6rem 1.6rem 1.6rem 1.9rem; background: var(--dc-grigio); text-decoration: none; color: var(--inchiostro); transition: color .5s var(--curva); }
.dc-porte a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--dc-blu); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--curva); }
.dc-porte a::after { content: "→"; margin-top: auto; color: var(--dc-oro-testo); font-size: 1.3rem; transition: transform .45s var(--curva); }
.dc-porte li { position: relative; }
.dc-porte li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dc-oro); z-index: 1; }
.dc-porta-titolo { font-size: var(--t-l); color: var(--dc-blu); font-weight: 400; transition: color .4s; }
.dc-porta-desc { font-size: var(--t-s); color: var(--grafite); transition: color .4s; }
.dc-porte a:hover::before, .dc-porte a:focus-visible::before { transform: none; }
.dc-porte a:hover span, .dc-porte a:focus-visible span { color: #fff; }
.dc-porte a:hover::after, .dc-porte a:focus-visible::after { transform: translateX(8px); color: var(--dc-oro-chiaro); }
.dc-porte a:focus-visible { outline: 2px solid var(--dc-oro); outline-offset: 3px; }
.dc-domande { padding: clamp(3rem, 7vw, 6rem) 0; background: var(--dc-grigio); }
.dc-domande-griglia { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 5vw, 5rem); }
.dc-domande h2 { font-size: var(--t-display); }
.dc-faq details { border-top: 1px solid var(--dc-grigio-scuro); }
.dc-faq details:last-child { border-bottom: 1px solid var(--dc-grigio-scuro); }
.dc-faq summary { cursor: pointer; list-style: none; padding: 1.3rem 2.4rem 1.3rem 0; position: relative; font-size: var(--t-l); color: var(--dc-blu); }
.dc-faq summary::-webkit-details-marker { display: none; }
.dc-faq summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--dc-oro), var(--dc-oro)) center / 14px 2px no-repeat, linear-gradient(var(--dc-oro), var(--dc-oro)) center / 2px 14px no-repeat; transition: transform .4s var(--curva); }
.dc-faq details[open] summary::after { transform: rotate(45deg); }
.dc-faq summary:hover span, .dc-faq summary:focus-visible span { text-decoration: underline; text-decoration-color: var(--dc-oro); text-underline-offset: .3em; }
.dc-faq-risposta p { margin: 0 0 1.4rem; max-width: var(--misura); }
.dc-sequenza { display: flex; justify-content: flex-end; padding-block: 2.4rem 3.4rem; }
.dc-succ { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; color: var(--dc-blu); font-size: var(--t-l); }
.dc-succ span { font-size: var(--voce-s); letter-spacing: var(--voce-spaziatura); text-transform: uppercase; color: var(--grafite); margin-bottom: .3rem; }
.dc-succ:hover, .dc-succ:focus-visible { text-decoration: underline; text-decoration-color: var(--dc-oro); text-underline-offset: .3em; }

/* ---------- Piede: recapiti in primo piano (sostituisce la chiusura «Raccontaci il tuo progetto») ---------- */
.dc-piede { background: var(--dc-blu); color: #fff; padding: clamp(3.5rem, 7vw, 6rem) 0 2rem; position: relative; }
:root[data-theme="dark"] .dc-piede { background: #0A2B44; }
.dc-piede::before { content: ""; position: absolute; left: clamp(1rem, 6vw, 6rem); top: 0; height: clamp(3rem, 7vw, 6rem); width: 3px; background: var(--dc-oro); }
.dc-piede-contatto { padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid rgba(255,255,255,.2); }
.dc-piede-invito { margin: 0 0 1rem; font-size: var(--voce); letter-spacing: .2em; text-transform: uppercase; color: var(--dc-oro-chiaro); }
.dc-piede-recapiti { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem clamp(2rem, 5vw, 5rem); }
.dc-piede-recapiti a { color: #fff; text-decoration: none; font-size: clamp(1.6rem, 1rem + 2.2vw, 3rem); font-weight: 300; letter-spacing: -.01em;
  background: linear-gradient(var(--dc-oro), var(--dc-oro)) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--curva); }
.dc-piede-recapiti a:hover, .dc-piede-recapiti a:focus-visible { background-size: 100% 2px; }
.dc-piede-griglia { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr)); gap: 2rem; padding-block: 2.8rem; }
.dc-piede-marchio img { height: 34px; width: auto; margin-bottom: 1.2rem; }
.dc-piede address { font-style: normal; font-size: var(--t-s); line-height: 1.7; color: rgba(255,255,255,.88); }
.dc-piede h2 { font-size: var(--voce-s); letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--dc-oro-chiaro); margin: .4rem 0 1rem; }
.dc-piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dc-piede ul a, .dc-piede .piede-comando { color: rgba(255,255,255,.9); text-decoration: none; font-size: var(--t-s); background: linear-gradient(var(--dc-oro-chiaro), var(--dc-oro-chiaro)) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .5s var(--curva); }
.dc-piede .piede-comando { all: unset; cursor: pointer; color: rgba(255,255,255,.9); font-size: var(--t-s); background: linear-gradient(var(--dc-oro-chiaro), var(--dc-oro-chiaro)) 0 100% / 0 1px no-repeat; }
.dc-piede ul a:hover, .dc-piede ul a:focus-visible, .dc-piede .piede-comando:hover, .dc-piede .piede-comando:focus-visible { background-size: 100% 1px; color: #fff; }
.dc-piede a:focus-visible, .dc-piede button:focus-visible { outline: 2px solid var(--dc-oro-chiaro); outline-offset: 3px; }
.dc-piede-legale { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.2); font-size: var(--t-xs); color: rgba(255,255,255,.75); }
.dc-piede-legale p { margin: 0; }

/* ---------- Animazioni (ferme con «Ferma le animazioni» e con la riduzione del movimento) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.pref-fermo) .dc-apertura-testa::before { animation: dc-traccia 1.4s var(--curva) .2s both; }
  html:not(.pref-fermo) .dc-apertura-testa > * { animation: dc-sale 1.1s var(--curva) .15s both; }
  html:not(.pref-fermo) .dc-apertura-testa > .dc-motto { animation-delay: .4s; }
  html:not(.pref-fermo) .dc-tre-griglia article { animation: dc-sale 1.1s var(--curva) both; }
  html:not(.pref-fermo) .dc-tre-griglia article:nth-child(1) { animation-delay: .55s; }
  html:not(.pref-fermo) .dc-tre-griglia article:nth-child(2) { animation-delay: .7s; }
  html:not(.pref-fermo) .dc-tre-griglia article:nth-child(3) { animation-delay: .85s; }
  html:not(.pref-fermo) .dc-hero-immagine img { animation: dc-avvicina 2.4s var(--curva) both; }
  html:not(.pref-fermo) .dc-hero-fascia > .contenitore > * { animation: dc-sale 1.1s var(--curva) .4s both; }
  html:not(.pref-fermo) .dc-hero-fascia::before { animation: dc-traccia-su 1.4s var(--curva) .3s both; }
  html:not(.pref-fermo) .dc-tendina { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--curva); }
  html:not(.pref-fermo) .dc-tendina.chiusa { clip-path: inset(0 0 0 18%); }
  html:not(.pref-fermo) .dc-tendina img { transition: transform 1.8s var(--curva); }
  html:not(.pref-fermo) .dc-tendina.chiusa img { transform: scale(1.06); }
}
html.pref-fermo .dc-menu:not([hidden]) { animation: none; }
/* mai del tutto invisibile all'apertura: il testo parte già al 40% e poco spostato */
@keyframes dc-sale { from { opacity: .4; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes dc-traccia { from { transform: scaleY(.1); } to { transform: none; } }
@keyframes dc-traccia-su { from { transform: scaleY(.1); transform-origin: 50% 100%; } to { transform: none; transform-origin: 50% 100%; } }
@keyframes dc-avvicina { from { transform: scale(1.06); } to { transform: none; } }

/* ---------- Schermi stretti ---------- */
@media (max-width: 1000px) {
  .dc-tre-griglia { grid-template-columns: 1fr; gap: 2.2rem; }
  .dc-tre-griglia article { border-left: 0; border-top: 1px solid var(--dc-oro); padding: 1.8rem 0 0; }
  .dc-tre-griglia article:first-child { border-top: 0; padding-top: 0; }
  .dc-ambiti-griglia { grid-template-columns: 1fr; }
  .dc-ambiti-testa { display: grid; grid-template-columns: 1fr; }
  .dc-recapiti { display: none; }
  .dc-indice-vista { display: none; }
  .dc-menu-griglia { grid-template-columns: 1fr; padding-left: clamp(2rem, 8vw, 4rem); }
  .dc-menu-recapiti { align-self: start; }
  .dc-blocco-griglia, .dc-blocco--integrazione .dc-blocco-griglia, .dc-domande-griglia { grid-template-columns: 1fr; gap: 1.6rem; }
  .dc-citazione { margin-top: 0; }
  .dc-porte { grid-template-columns: 1fr; }
  .dc-piede-griglia { grid-template-columns: 1fr 1fr; }
  .dc-piede-marchio { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .dc-perche-griglia { grid-template-columns: 1fr; }
  .dc-perche .etichetta { display: none; }
  .dc-tendina { aspect-ratio: 4 / 3; }
  .dc-indice a { grid-template-columns: 2.2rem minmax(0, 1fr) 1.6rem; }
  .dc-apertura { min-height: 0; }
  .dc-piede-griglia { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .dc-menu-apri { padding: .8rem .9rem .8rem 1rem; margin-left: .2rem; }
  .dc-menu-etichetta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dc .testata .nav ul { gap: .2rem; }
}

/* ---------- Home: sottotitolo di posizionamento e sottotitolo italiano di «Design Services» ---------- */
.dc-sottotitolo { max-width: 46rem; margin: .9rem 0 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--dc-blu); }
.dc-ambiti-sotto { margin: -1.2rem 0 1.4rem; font-size: var(--voce); letter-spacing: .14em; text-transform: uppercase; color: var(--dc-oro-testo); font-weight: 500; }
.dc-apertura-testa > * { grid-column: 2; min-width: 0; }
.dc-perche { position: relative; overflow: hidden; }
.dc-perche-disegno { position: absolute; right: -4vw; bottom: -2rem; width: min(46vw, 560px); height: auto; opacity: .22; pointer-events: none; }
:root[data-theme="dark"] .dc-perche-disegno, :root[data-theme="dark"] .dc-testa-disegno { filter: invert(1); opacity: .14; }
.dc-perche-griglia { position: relative; }

/* ---------- Monogramma d|c del marchio ---------- */
.dc-piede-marchio img.dc-piede-monogramma { display: block; width: clamp(96px, 10vw, 140px); height: auto !important; margin-bottom: 1.6rem !important; }
.dc-dati-monogramma { width: clamp(140px, 18vw, 240px); height: auto; justify-self: end; align-self: start; }

/* ---------- Apertura tipografica delle pagine interne, con il disegno dell'edificio del sito 2024 ---------- */
.dc-testa { position: relative; overflow: hidden; background: var(--dc-grigio); padding: calc(88px + clamp(3rem, 8vh, 5.5rem)) 0 clamp(3rem, 7vh, 5rem); }
.dc-testa-disegno { position: absolute; right: clamp(-6rem, -3vw, 0rem); bottom: -1.5rem; width: min(44vw, 520px); height: auto; opacity: .35; pointer-events: none; }
.dc-testa-griglia { position: relative; border-left: 3px solid var(--dc-oro); padding-left: clamp(1.2rem, 2.5vw, 2.4rem); }
.dc-testa h1 { font-size: clamp(2.3rem, 1.3rem + 3.3vw, 4.3rem); line-height: 1.05; letter-spacing: -.02em; max-width: 20ch; }
.dc-testa .dc-sommario { max-width: 52ch; margin: 1.2rem 0 0; font-size: var(--t-enunciato); line-height: 1.5; color: var(--grafite); }
.dc-testa-sopra { margin: 0 0 1rem; font-size: var(--voce); letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }
.dc-testa-sopra a { color: var(--dc-oro-testo); text-decoration: none; }
.dc-testa-sopra a::before { content: "← "; }
.dc-testa-sopra a:hover, .dc-testa-sopra a:focus-visible { text-decoration: underline; text-underline-offset: .3em; }
.dc-testa + .dc-figura { margin-top: clamp(2.5rem, 6vw, 4.5rem); }

/* ---------- Sezioni di testo: titolo a sinistra, testo a destra ---------- */
.dc-sezioni, .dc-ruoli { padding: clamp(3rem, 7vw, 5.5rem) 0 0; }
.dc-sezioni:last-of-type { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.dc-sezione-griglia { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 5vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--dc-grigio-medio); }
.dc-sezione-griglia h2 { font-size: var(--t-titolo); line-height: 1.2; }
.dc-sezione-testo p, .dc-sezione-testo li { max-width: var(--misura); }
.dc-sezione-testo p:first-child { margin-top: 0; }
.dc-elenco { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.dc-elenco li { margin-bottom: .5rem; line-height: 1.6; }
.dc-elenco li::marker { color: var(--dc-oro); }
.dc-nota { font-size: var(--t-s); color: var(--grafite); }
.dc-nota a { color: inherit; }

/* ---------- Segnaposto di un'immagine ancora da scegliere (solo prototipo) ---------- */
.dc-segnaposto > div { aspect-ratio: 16 / 7; display: grid; align-content: center; justify-items: start; gap: .3rem; padding: clamp(1.5rem, 5vw, 4rem);
  border: 2px dashed var(--dc-oro); background: repeating-linear-gradient(135deg, var(--dc-grigio) 0 14px, transparent 14px 28px); }
.dc-segnaposto p { margin: 0; max-width: 60ch; background: var(--carta); padding: .2rem .5rem; color: var(--inchiostro); }
.dc-segnaposto-titolo { font-size: var(--voce); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--dc-oro-testo) !important; }
.dc-segnaposto-ricerca { font-size: var(--t-s); color: var(--grafite) !important; }

/* ---------- Caso tipo ---------- */
.dc-caso { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--dc-blu); color: #fff; }
:root[data-theme="dark"] .dc-caso { background: #0A2B44; }
.dc-caso-griglia { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 5vw, 5rem); }
.dc-caso h2 { color: #fff; font-size: var(--t-titolo); line-height: 1.2; }
.dc-caso-etichetta { margin: 0 0 1rem; font-size: var(--voce); letter-spacing: .18em; text-transform: uppercase; color: var(--dc-oro-chiaro); font-weight: 500; padding-left: 1rem; border-left: 3px solid var(--dc-oro); }
.dc-caso-testo p { max-width: var(--misura); color: rgba(255,255,255,.92); }
.dc-caso-testo p:first-child { margin-top: 0; }
.dc-caso .dc-caso-nota { font-size: var(--t-s); color: rgba(255,255,255,.78); font-style: italic; }

/* ---------- Sequenza: ambito precedente e successivo ---------- */
.dc-sequenza { justify-content: space-between; gap: 1.5rem; border-top: 1px solid var(--dc-grigio-medio); }
.dc-prec { display: flex; flex-direction: column; text-decoration: none; color: var(--dc-blu); font-size: var(--t-l); }
.dc-prec span { font-size: var(--voce-s); letter-spacing: var(--voce-spaziatura); text-transform: uppercase; color: var(--grafite); margin-bottom: .3rem; }
.dc-prec:hover, .dc-prec:focus-visible { text-decoration: underline; text-decoration-color: var(--dc-oro); text-underline-offset: .3em; }
.dc-succ { text-align: right; }

/* ---------- Come lavoriamo: le fasi ---------- */
.dc-fasi { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(1rem, 3vw, 2rem); }
.dc-fasi h2 { font-size: var(--t-display); max-width: 20ch; margin-bottom: 2.4rem; }
.dc-fasi-elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0; border-top: 1px solid var(--dc-oro); }
.dc-fasi-elenco li { padding: 1.6rem 1.6rem 1.8rem 0; border-bottom: 1px solid var(--dc-grigio-medio); }
.dc-fase-n { display: block; font-size: var(--voce); letter-spacing: .2em; color: var(--dc-oro-testo); font-weight: 500; margin-bottom: .8rem; }
.dc-fasi-elenco h3 { font-size: var(--t-l); font-weight: 400; color: var(--dc-blu); margin: 0 0 .6rem; }
.dc-fasi-elenco p { font-size: var(--t-s); margin: 0; color: var(--inchiostro); }

/* ---------- Tabelle ---------- */
.dc-ruoli { padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.dc-tabella-avvolgi { overflow-x: auto; }
.dc-tabella { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.dc-tabella th, .dc-tabella td { text-align: left; vertical-align: top; padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--dc-grigio-medio); line-height: 1.5; }
.dc-tabella thead th { font-size: var(--voce-s); letter-spacing: .14em; text-transform: uppercase; color: var(--dc-oro-testo); font-weight: 500; border-bottom: 1px solid var(--dc-oro); }
.dc-tabella tbody th { font-weight: 400; color: var(--inchiostro); }
.dc-tabella td { color: var(--dc-blu); }

/* ---------- Chi siamo: dati societari ---------- */
.dc-dati { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--dc-grigio); margin-top: clamp(2rem, 5vw, 4rem); }
.dc-dati-griglia { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); gap: clamp(1.5rem, 5vw, 4rem); }
.dc-dati h2 { font-size: var(--t-titolo); }
.dc-dati dl { margin: 0; display: grid; gap: 1.1rem; }
.dc-dati dt { font-size: var(--voce-s); letter-spacing: .14em; text-transform: uppercase; color: var(--dc-oro-testo); font-weight: 500; margin-bottom: .2rem; }
.dc-dati dd { margin: 0; color: var(--inchiostro); line-height: 1.6; }
.dc-dati dd a { color: var(--dc-blu); }
.dc-dati ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Contatti ---------- */
.dc-contatti { padding: clamp(3rem, 7vw, 5rem) 0 0; }
.dc-contatti-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.dc-contatto { border-left: 3px solid var(--dc-oro); padding-left: 1.2rem; }
.dc-contatto-etichetta { margin: 0 0 .5rem; font-size: var(--voce-s); letter-spacing: .18em; text-transform: uppercase; color: var(--dc-oro-testo); font-weight: 500; }
.dc-contatto p:not(.dc-contatto-etichetta), .dc-contatto address { margin: 0; font-style: normal; font-size: var(--t-l); line-height: 1.45; color: var(--dc-blu); overflow-wrap: anywhere; }
.dc-contatto a { color: var(--dc-blu); text-decoration: none; background: linear-gradient(var(--dc-oro), var(--dc-oro)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--curva); }
.dc-contatto a:hover, .dc-contatto a:focus-visible { background-size: 100% 1px; }

/* ---------- Pagine legali ---------- */
.dc-legale { padding-block: clamp(3rem, 7vw, 5rem); max-width: calc(var(--misura) + 4rem); }
.dc-legale section { padding-top: 1.6rem; margin-top: 1.6rem; border-top: 1px solid var(--dc-grigio-medio); }
.dc-legale section:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.dc-legale h2 { font-size: var(--t-titolo); margin-bottom: 1rem; }
.dc-legale a { color: var(--dc-blu); }
.dc-legale-data { margin-top: 2.4rem; font-size: var(--t-s); color: var(--grafite); }

/* ---------- Pagina non trovata ---------- */
.dc-404 { min-height: calc(var(--sch, 100vh) * .8); display: grid; align-content: center; }
.dc-404-monogramma { position: absolute; right: clamp(1rem, 8vw, 8rem); top: 50%; transform: translateY(-40%); width: min(36vw, 420px); height: auto; opacity: .16; pointer-events: none; }

@media (max-width: 1000px) {
  .dc-sezione-griglia, .dc-caso-griglia, .dc-dati-griglia { grid-template-columns: 1fr; gap: 1rem; }
  .dc-dati-monogramma { justify-self: start; }
  .dc-contatti-griglia { grid-template-columns: 1fr; gap: 1.6rem; }
  .dc-testa-disegno { width: 70vw; opacity: .18; }
}
@media (max-width: 620px) {
  .dc-sequenza { flex-direction: column; }
  .dc-succ { align-items: flex-start; text-align: left; }
  .dc-segnaposto > div { aspect-ratio: auto; }
  .dc-perche-disegno { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.pref-fermo) .dc-testa-griglia > * { animation: dc-sale 1.1s var(--curva) .1s both; }
  html:not(.pref-fermo) .dc-testa-disegno { animation: dc-disegno 2.2s var(--curva) both; }
}
@keyframes dc-disegno { from { opacity: 0; transform: translateX(24px); } }

/* ---------- Ritmo dei paragrafi nei blocchi di testo ---------- */
.dc-blocco-testo p, .dc-caso-testo p, .dc-sezione-testo p, .dc-legale p { margin: 0 0 1rem; }
.dc-blocco-testo p:last-child, .dc-sezione-testo > :last-child { margin-bottom: 0; }
/* l'etichetta dell'apertura resta leggibile anche su cieli e superfici chiare */
.dc-hero-immagine::after { background: linear-gradient(180deg, rgba(1,30,50,.1) 0%, rgba(1,30,50,.35) 40%, rgba(1,25,42,.86) 100%); }
.dc-hero .etichetta span { text-shadow: 0 1px 8px rgba(0,20,35,.6); }

/* ---------- Home: il segno d|c animato (dalla prima prova), a destra del titolo ---------- */
.dc-apertura-alto { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; margin-bottom: clamp(3rem, 8vh, 5.5rem); }
.dc-apertura-alto .dc-apertura-testa { margin-bottom: 0; }
.dc-apertura-segno { position: relative; height: min(48vh, 440px); display: grid; place-items: center; }
.dc-barra { display: block; width: 4px; background: var(--dc-oro); transform-origin: 50% 0; }
.dc-apertura-segno .dc-barra { position: absolute; left: 50%; top: 0; height: 100%; margin-left: -2px; }
.dc-dc { position: relative; font-size: clamp(6rem, 3rem + 8vw, 12rem); font-weight: 300; color: var(--dc-blu); letter-spacing: .02em; line-height: 1;
  display: grid; grid-template-columns: 1fr 4px 1fr; align-items: center; gap: .22em; }
.dc-dc i { display: block; height: 1em; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.pref-fermo) .dc-apertura-segno .dc-barra { animation: dc-traccia 1.6s var(--curva) .35s both; }
  html:not(.pref-fermo) .dc-dc { animation: dc-affiora 1.4s var(--curva) .9s both; }
}
@keyframes dc-affiora { from { opacity: .3; } to { opacity: 1; } }
@media (max-width: 1000px) {
  .dc-apertura-alto { grid-template-columns: 1fr; }
  .dc-apertura-segno { display: none; }
}

/* ---------- Home: tre colonne di pari larghezza; titoli allineati in basso, testi che partono sulla stessa riga ---------- */
.dc-tre-griglia { --dc-tre-gap: clamp(2.4rem, 5vw, 5.5rem); column-gap: var(--dc-tre-gap); row-gap: 0; grid-template-rows: auto auto; }
.dc-tre-griglia article { position: relative; padding: 0; border-left: 0; display: grid; grid-row: span 2; grid-template-rows: subgrid; }
.dc-tre-griglia article + article::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--dc-tre-gap) / -2); width: 1px; background: var(--dc-oro); }
.dc-tre-griglia h2 { align-self: end; margin: 0 0 1.2rem; }
@media (max-width: 1000px) {
  .dc-tre-griglia { grid-template-rows: none; row-gap: 2.2rem; }
  .dc-tre-griglia article { grid-row: auto; grid-template-rows: none; display: block; border-top: 1px solid var(--dc-oro); padding-top: 1.8rem; }
  .dc-tre-griglia article:first-child { border-top: 0; padding-top: 0; }
  .dc-tre-griglia article + article::before { display: none; }
}

/* ---------- Home, «Un solo interlocutore»: il disegno dell'edificio occupa tutta la sezione e si traccia all'arrivo ---------- */
.dc-perche { min-height: min(92vh, 860px); display: grid; align-items: center; background: linear-gradient(90deg, var(--carta) 0%, var(--carta) 30%, var(--dc-grigio) 100%); }
.dc-perche-disegno { position: absolute; inset: 0; right: auto; bottom: auto; width: 100%; height: 100%; opacity: 1; pointer-events: none; }
.dc-perche-disegno * { fill: none; stroke: var(--dc-blu); stroke-width: .9px; vector-effect: non-scaling-stroke; stroke-linecap: round; opacity: .32; }
.dc-perche-griglia { z-index: 1; }
/* fascia chiara dietro al testo: il disegno resta visibile ma non disturba la lettura */
.dc-perche-griglia::before { content: ""; position: absolute; inset: -2.5rem -2rem; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.85) 60%, rgba(255,255,255,0) 100%); }
:root[data-theme="dark"] .dc-perche { background: var(--carta); }
:root[data-theme="dark"] .dc-perche-griglia::before { background: linear-gradient(90deg, rgba(12,26,36,.92) 0%, rgba(12,26,36,.8) 60%, rgba(12,26,36,0) 100%); }
:root[data-theme="dark"] .dc-perche-disegno { filter: none; opacity: 1; }
:root[data-theme="dark"] .dc-perche-disegno * { stroke: #8FBDE0; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.pref-fermo) .dc-perche-disegno.da-tracciare * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html:not(.pref-fermo) .dc-perche-disegno.tracciato * { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.8s var(--curva); }
}
@media (max-width: 620px) {
  .dc-perche-disegno { display: block; }
  .dc-perche-disegno * { opacity: .18; }
  .dc-perche { min-height: 0; }
}
/* revisione: disegno intero e riconoscibile, ancorato a destra su tutta l'altezza; niente riquadro dietro al testo */
.dc-perche { background: var(--carta); }
.dc-perche-disegno { inset: 2rem clamp(0rem, 3vw, 3rem) 0 auto; width: min(78%, 1100px); height: calc(100% - 2rem); }
.dc-perche-disegno * { opacity: .5; stroke-width: 1px; }
.dc-perche-griglia::before { inset: -2rem 0 -2rem -2rem; right: 45%; background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.75) 75%, rgba(255,255,255,0) 100%); }
.dc-perche .dc-colonne > p:last-child { background: rgba(255,255,255,.72); box-shadow: 0 0 0 .8rem rgba(255,255,255,.72); }
:root[data-theme="dark"] .dc-perche .dc-colonne > p:last-child { background: rgba(12,26,36,.75); box-shadow: 0 0 0 .8rem rgba(12,26,36,.75); }
@media (max-width: 620px) { .dc-perche-disegno { width: 100%; inset: auto 0 0 auto; height: 60%; } .dc-perche-disegno * { opacity: .25; } .dc-perche .dc-colonne > p:last-child { background: none; box-shadow: none; } }
.dc-perche .dc-colonne > p:last-child, :root[data-theme="dark"] .dc-perche .dc-colonne > p:last-child { background: none; box-shadow: none; }
.dc-perche .dc-colonne p { text-shadow: 0 0 6px var(--carta), 0 0 2px var(--carta); }
.dc-perche-disegno * { opacity: .55; }
/* disegno più trasparente; spessore in unità del disegno (niente vector-effect, che altera i tratteggi dell'animazione) */
.dc-perche-disegno * { vector-effect: none; stroke-width: .5; opacity: .44; }
.dc-perche-disegno.da-tracciare *, .dc-perche-disegno.tracciato * { stroke-dasharray: none; stroke-dashoffset: 0; }
@media (max-width: 620px) { .dc-perche-disegno * { opacity: .2; } }


/* ---------- Tema scuro chiesto dal dispositivo: stesse regole di :root[data-theme="dark"] (il sito non ha un selettore del tema) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --dc-blu: #8FBDE0; --dc-blu-notte: #06121B; --dc-oro-testo: #D9BE73; --dc-grigio: #13202A; --dc-grigio-medio: #22323F; --dc-grigio-scuro: #3A4C5A;
  --inchiostro: #E8ECEF; --grafite: #AEB8C0; --carta: #0C1A24; --verde-bottone: #2B6E9E; --verde-testo: #9CC6E6;
  --pannello: #06121B; --fascia: rgba(12, 26, 36, .88);
}
  :root:not([data-theme="light"]) .dc-piede { background: #0A2B44; }
  :root:not([data-theme="light"]) .dc-perche-disegno, :root:not([data-theme="light"]) .dc-testa-disegno { filter: invert(1); opacity: .14; }
  :root:not([data-theme="light"]) .dc-caso { background: #0A2B44; }
  :root:not([data-theme="light"]) .dc-perche { background: var(--carta); }
  :root:not([data-theme="light"]) .dc-perche-griglia::before { background: linear-gradient(90deg, rgba(12,26,36,.92) 0%, rgba(12,26,36,.8) 60%, rgba(12,26,36,0) 100%); }
  :root:not([data-theme="light"]) .dc-perche-disegno { filter: none; opacity: 1; }
  :root:not([data-theme="light"]) .dc-perche-disegno * { stroke: #8FBDE0; }
  /* riempimenti al passaggio: blu più profondo, il testo bianco resta sopra 4,5:1 */
  :root:not([data-theme="light"]) .dc-menu-apri::before, :root:not([data-theme="light"]) .dc-pulsante::before,
  :root:not([data-theme="light"]) .dc-indice a::before, :root:not([data-theme="light"]) .dc-porte a::before { background: #1D5A85; }
}
:root[data-theme="dark"] .dc-menu-apri::before, :root[data-theme="dark"] .dc-pulsante::before, :root[data-theme="dark"] .dc-indice a::before, :root[data-theme="dark"] .dc-porte a::before { background: #1D5A85; }

/* ---------- Schermi molto stretti (320 px) e testo ingrandito ---------- */
@media (max-width: 380px) {
  .dc .testata .contenitore { gap: .3rem; }
  .dc-menu-apri { padding: .7rem .55rem .7rem .7rem; margin-left: 0; }
  .dc .testata .marchio img { width: 150px; height: auto; }
}
/* eccezione WCAG 1.4.4 e 1.4.12: con testo grande o spaziatura l'etichetta di un pulsante può andare a capo */
:is(.pref-testo-1, .pref-testo-2, .pref-spaziatura) .dc-pulsante { white-space: normal; }
:is(.pref-testo-1, .pref-testo-2, .pref-spaziatura) .dc-contatto a, :is(.pref-testo-1, .pref-testo-2, .pref-spaziatura) .dc-piede-recapiti a { overflow-wrap: anywhere; }
.dc-tabella-avvolgi:focus-visible { outline: 2px solid var(--dc-oro); outline-offset: 3px; }
@media (max-width: 380px) {
  :is(.pref-testo-1, .pref-testo-2, .pref-spaziatura, .pref-leggibile) .testata .marchio img { width: 112px; }
  :is(.pref-testo-1, .pref-testo-2, .pref-spaziatura, .pref-leggibile) .dc-menu-apri { padding-inline: .45rem; }
  .dc-pulsante { letter-spacing: .1em; padding: .95rem 1rem .95rem 1.2rem; gap: .5rem; }
  .dc-pulsante span::after { margin-left: .5rem; }
}
.dc-sezione-griglia > *, .dc-caso-griglia > *, .dc-dati-griglia > *, .dc-contatti-griglia > * { min-width: 0; }
.dc-fasi-elenco { grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); }

/* ---------- Apertura delle pagine di settore: il filetto oro segue il margine del testo, non lo attraversa ---------- */
.dc-hero-fascia::before { display: none; }
.dc-hero-fascia .contenitore { position: relative; }
.dc-hero-fascia .contenitore::before { content: ""; position: absolute; left: max(4px, calc(max(var(--gutter), env(safe-area-inset-left, 0px)) - 1.4rem)); bottom: calc(-1 * clamp(2.5rem, 7vh, 5rem)); height: 70%; width: 3px; background: var(--dc-oro); transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.pref-fermo) .dc-hero-fascia .contenitore::before { animation: dc-traccia-su 1.4s var(--curva) .3s both; }
}
/* «Descrizioni delle immagini»: la descrizione sta dentro l'immagine, non nel margine della pagina */
.dc-figura.contenitore > .descrizione-immagine { left: max(var(--gutter), env(safe-area-inset-left, 0px)); right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.dc-hero-immagine > .descrizione-immagine { top: calc(88px + .8rem); bottom: auto; left: max(var(--gutter), env(safe-area-inset-left, 0px)); right: auto; max-width: min(60ch, calc(100% - 32px)); }

/* ---------- Contatti: il disegno dell'edificio nell'apertura si traccia come nella home ---------- */
.dc-testa-disegno--linee { aspect-ratio: 464 / 392; height: auto; opacity: 1; }
.dc-testa-disegno--linee * { fill: none; stroke: var(--dc-blu); stroke-width: .5; stroke-linecap: round; opacity: .42; }
html:not(.pref-fermo) .dc-testa-disegno--linee { animation: none; }
@media (max-width: 1000px) { .dc-testa-disegno--linee { opacity: 1; } .dc-testa-disegno--linee * { opacity: .22; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dc-testa-disegno--linee { filter: none; } :root:not([data-theme="light"]) .dc-testa-disegno--linee * { stroke: #8FBDE0; } }
/* l'edificio si vede intero: apertura più alta e disegno alto quanto l'apertura */
.dc-testa:has(.dc-testa-disegno--linee) { min-height: min(62vh, 560px); display: grid; align-content: end; }
.dc-testa-disegno--linee { top: calc(88px + 1rem); bottom: 0; right: clamp(0rem, 4vw, 4rem); height: calc(100% - 88px - 1rem); width: auto; max-width: 62%; }
@media (max-width: 1000px) { .dc-testa-disegno--linee { max-width: 90%; right: 0; } }
.dc-testa:has(.dc-testa-disegno--linee) > .contenitore { width: 100%; }

/* ---------- Testata trasparente sull'apertura, piena scorrendo (motore comune: .hero-scena e data-scena-chiara) ---------- */
.dc-hero { margin-top: 0; min-height: calc(var(--sch, 100vh) * .78); }
.dc .testata.su-immagine, .dc .testata.su-chiaro { box-shadow: none; }
.dc .testata.su-chiaro { background: transparent; }
.testata.su-immagine .dc-menu-apri { color: #fff; }
.testata.su-immagine .dc-menu-apri:hover, .testata.su-immagine .dc-menu-apri:focus-visible { color: #fff; }
.dc .testata { transition: background-color .4s var(--curva), box-shadow .4s var(--curva); }

/* ---------- Pannello Accessibilità e preferenze: nessun verde del motore comune, colori di Design Contract ---------- */
:root.pref-contrasto { --verde: #7E6019; --verde-testo: #013E66; --verde-bottone: #013E66; }
:root.pref-contrasto .dc-pulsante::before, :root.pref-contrasto .dc-indice a::before, :root.pref-contrasto .dc-porte a::before, :root.pref-contrasto .dc-menu-apri::before { background: #013E66; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --verde: #CFB369; --sabbia: var(--dc-grigio); --tortora: var(--dc-grigio); --pietra: var(--dc-grigio-medio); --bianco: #13202A; --testo-pannello: #E8ECEF; --in-cima-fondo: #E8ECEF; --in-cima-bordo: #E8ECEF; }
  :root.pref-contrasto:not([data-theme="light"]) { --verde: #E3C46E; --verde-testo: #E3C46E; --verde-bottone: #1D5A85; }
}
:root[data-theme="dark"] { --verde: #CFB369; --sabbia: var(--dc-grigio); --tortora: var(--dc-grigio); --pietra: var(--dc-grigio-medio); --bianco: #13202A; }
:root.pref-contrasto[data-theme="dark"] { --verde: #E3C46E; --verde-testo: #E3C46E; --verde-bottone: #1D5A85; }
/* scena dimostrativa del contrasto: grigi e blu di Design Contract al posto dei toni sabbia */
.dimostra-contrasto { background: #D3D4D6 !important; }
.dimostra-contrasto .prima { color: #8E979E !important; }
.dimostra-contrasto .dopo { color: #8E979E; border-left-color: #013E66 !important; }
.dimostra-contrasto .dopo small { color: #013E66 !important; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes annerisce { 0% { color: #8E979E; transform: scale(1); } 60% { color: #013E66; transform: scale(1.12); } 100% { color: #013E66; transform: scale(1); } }
}
.testata.su-immagine .voce-accessibilita .ico-accessibilita { color: #fff; }

/* ---------- Home, ambiti: su tablet e telefono l'anteprima grande sparisce e ogni ambito ha la sua fotografia ---------- */
.dc-indice-foto { display: none; }
@media (max-width: 1000px) {
  .dc-indice a { grid-template-columns: 2.4rem clamp(96px, 24vw, 200px) minmax(0, 1fr) 2rem; column-gap: clamp(.8rem, 2.5vw, 1.6rem); align-items: center; padding-block: 1.1rem; }
  .dc-indice-n { grid-column: 1; grid-row: 1 / span 2; padding-top: 0; align-self: center; }
  .dc-indice-foto { display: block; grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 4 / 3; overflow: hidden; position: relative; background: var(--dc-grigio); }
  .dc-indice-foto::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dc-oro); }
  .dc-indice-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
  .dc-indice a:hover .dc-indice-foto img, .dc-indice a:focus-visible .dc-indice-foto img { transform: scale(1.05); }
  .dc-indice-nome { grid-column: 3; align-self: end; }
  .dc-indice-desc { grid-column: 3; align-self: start; }
  .dc-indice-freccia { grid-column: 4; }
}
@media (max-width: 620px) {
  .dc-indice a { grid-template-columns: clamp(92px, 28vw, 130px) minmax(0, 1fr) 1.4rem; }
  .dc-indice-n { display: none; }
  .dc-indice-foto { grid-column: 1; }
  .dc-indice-nome, .dc-indice-desc { grid-column: 2; }
  .dc-indice-freccia { grid-column: 3; }
}

/* ---------- Aperture degli ambiti: movimento lento di circa dieci secondi (avvicinamento o allontanamento) ---------- */
.dc-hero-immagine img { transform-origin: var(--fuoco, 50% 50%); will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.pref-fermo) .dc-hero-immagine img.moto-in { animation: dc-moto-in 10s cubic-bezier(.33, .1, .25, 1) both; }
  html:not(.pref-fermo) .dc-hero-immagine img.moto-out { animation: dc-moto-out 10s cubic-bezier(.33, .1, .25, 1) both; }
}
@keyframes dc-moto-in { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.13) translate(var(--verso, 0, 0)); } }
@keyframes dc-moto-out { from { transform: scale(1.16) translate(var(--verso, 0, 0)); } to { transform: scale(1.02) translate(0, 0); } }
html.pref-fermo .dc-hero-immagine img { transform: none; }

/* ---------- Marchio: al passaggio (e al fuoco) la barra tra «design» e «contract» si ridisegna in un altro colore ---------- */
.dc-logo { position: relative; display: inline-block; line-height: 0; vertical-align: middle; --dc-barra-attiva: var(--dc-blu); }
.dc-logo-barra { position: absolute; left: 41.9%; top: 23.5%; width: 1.1%; height: 50.5%; background: var(--dc-oro); }
.dc-logo-barra::after { content: ""; position: absolute; inset: 0; background: var(--dc-barra-attiva); transform: scaleY(0); transform-origin: 50% 100%; }
.testata.su-immagine .dc-logo, .dc-piede .dc-logo { --dc-barra-attiva: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dc-logo { --dc-barra-attiva: #FFFFFF; } }
:root[data-theme="dark"] .dc-logo { --dc-barra-attiva: #FFFFFF; }
:is(.marchio, .dc-piede-logo):is(:hover, :focus-visible) .dc-logo-barra::after { transform: scaleY(1); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.pref-fermo) :is(.marchio, .dc-piede-logo):is(:hover, :focus-visible) .dc-logo-barra { animation: dc-barra-ritira .7s cubic-bezier(.65, 0, .35, 1) both; }
  html:not(.pref-fermo) :is(.marchio, .dc-piede-logo):is(:hover, :focus-visible) .dc-logo-barra::after { animation: dc-barra-traccia .9s cubic-bezier(.22, .7, .12, 1) .12s both; }
}
@keyframes dc-barra-traccia { 0% { transform: scaleY(0); } 70% { transform: scaleY(1.18); } 100% { transform: scaleY(1); } }
@keyframes dc-barra-ritira { 0% { background-color: var(--dc-oro); } 35% { background-color: transparent; } 100% { background-color: transparent; } }
.dc-piede-logo { display: inline-block; margin-bottom: 1.2rem; }
.dc-piede-logo:focus-visible { outline: 2px solid var(--dc-oro-chiaro); outline-offset: 6px; }
.dc-piede-marchio .dc-piede-logo img { margin-bottom: 0; }
.dc-logo-barra::after { transition: transform .45s var(--curva); }

/* ---------- Penna del disegno: un punto oro con un alone blu leggero guida il tratto ---------- */
.dc-disegno-tracciabile .dc-penna { fill: var(--dc-oro) !important; stroke: none !important; opacity: 1 !important; transition: opacity .8s var(--curva); }
.dc-disegno-tracciabile .dc-penna-alone { fill: var(--dc-blu) !important; stroke: none !important; opacity: .16 !important; transition: opacity .8s var(--curva); }
.dc-disegno-tracciabile .finita { opacity: 0 !important; }

/* ---------- Home su telefono: il disegno dell'edificio resta, sotto il testo, intero e leggibile ---------- */
@media (max-width: 620px) {
  .dc-perche { display: flex; flex-direction: column; min-height: 0; padding-bottom: 2rem; }
  .dc-perche-griglia { order: 1; }
  .dc-perche-griglia::before { display: none; }
  .dc-perche .dc-perche-disegno { order: 2; display: block; position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 464 / 392; margin-top: 1rem; }
  .dc-perche .dc-perche-disegno line, .dc-perche .dc-perche-disegno path { stroke-width: .8; opacity: .55; }
  .dc-perche .dc-colonne p { text-shadow: none; }
}

/* ---------- Home, ambiti: su tablet la foto si allinea alla prima riga del titolo; su telefono diventa una scheda ---------- */
@media (max-width: 1000px) {
  .dc-indice a { align-items: start; }
  .dc-indice-foto { align-self: start; margin-top: .35rem; }
  .dc-indice-n { align-self: start; padding-top: .55rem; }
  .dc-indice-nome { align-self: start; }
  .dc-indice-freccia { align-self: center; }
}
@media (max-width: 620px) {
  .dc-indice a { grid-template-columns: minmax(0, 1fr) 1.6rem; grid-template-rows: auto auto auto; row-gap: .45rem; padding: 1.4rem 0 1.5rem; }
  .dc-indice-foto { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9; margin: 0 0 .5rem; }
  .dc-indice-nome { grid-column: 1; grid-row: 2; }
  .dc-indice-desc { grid-column: 1; grid-row: 3; }
  .dc-indice-freccia { grid-column: 2; grid-row: 2; align-self: center; }
  .dc-indice a:hover, .dc-indice a:focus-visible, .dc-indice a.attivo { padding-left: 0; }
}
@media (min-width: 621px) and (max-width: 1000px) {
  .dc-indice a { grid-template-rows: auto auto 1fr; row-gap: .35rem; }
  .dc-indice-n, .dc-indice-foto, .dc-indice-freccia { grid-row: 1 / span 3; }
}
.dc-disegno-tracciabile .dc-penna-scia { fill: none !important; stroke: var(--dc-oro) !important; stroke-width: 1.1 !important; stroke-linecap: round; stroke-linejoin: round; opacity: .75 !important; transition: opacity .8s var(--curva); }
/* descrizione dell'anteprima degli ambiti (home, computer) */
.dc-indice-vista > .descrizione-immagine { z-index: 4; }
.dc-disegno-tracciabile .dc-penna-scia.finita { opacity: 0 !important; }
/* telefono: il testo della scheda ha un margine interno, così anche col fondo blu non tocca il bordo */
@media (max-width: 620px) {
  .dc-indice-nome, .dc-indice-desc { padding-left: 1.1rem; }
  .dc-indice-freccia { margin-right: .9rem; }
  .dc-indice a { padding-bottom: 1.6rem; }
}
/* testata sopra le fotografie: accessibilità e lingua sempre bianche, a ogni larghezza (il motore comune le scuriva sotto i 1100 px) */
.dc .testata.su-immagine .nav .voce-accessibilita button, .dc .testata.su-immagine .nav .voce-lingua > button,
.dc .testata.su-immagine .nav .voce-lingua > button *, .dc .testata.su-immagine .nav .voce-accessibilita button * { color: #fff; }

/* ---------- Disegno dell'edificio più presente (27 ottobre): linee più piene dove non sta sotto il testo ---------- */
.dc-perche-disegno line, .dc-perche-disegno path { opacity: .58; stroke-width: .55; }
.dc-testa-disegno--linee line, .dc-testa-disegno--linee path { opacity: .78; stroke-width: .75; }
@media (max-width: 1000px) { .dc-testa-disegno--linee line, .dc-testa-disegno--linee path { opacity: .78; } }
@media (max-width: 620px) {
  .dc-perche .dc-perche-disegno line, .dc-perche .dc-perche-disegno path { opacity: .85; stroke-width: 1; }
  /* Contatti su telefono: il disegno esce da dietro il titolo e si mette sotto il testo, intero */
  .dc-testa:has(.dc-testa-disegno--linee) { display: flex; flex-direction: column; min-height: 0; padding-bottom: 1.5rem; }
  .dc-testa:has(.dc-testa-disegno--linee) > .contenitore { order: 1; }
  .dc-testa-disegno--linee { order: 2; position: relative; inset: auto; right: auto; top: auto; width: 100%; max-width: none; height: auto; aspect-ratio: 464 / 392; margin-top: 1.2rem; }
  .dc-testa-disegno--linee line, .dc-testa-disegno--linee path { opacity: .85; stroke-width: 1; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dc-perche-disegno line, :root:not([data-theme="light"]) .dc-perche-disegno path,
  :root:not([data-theme="light"]) .dc-testa-disegno--linee line, :root:not([data-theme="light"]) .dc-testa-disegno--linee path { stroke: #8FBDE0; }
}

/* ---------- Puntatore: anello oro che segue il mouse e si allarga sugli elementi attivi ---------- */
.dc-cursore { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .3s var(--curva); }
.dc-cursore.visibile { opacity: 1; }
.dc-cursore-anello { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  border: 1px solid var(--dc-oro); background: transparent; transform: translate(var(--ax), var(--ay)) scale(1);
  transition: width .35s var(--curva), height .35s var(--curva), margin .35s var(--curva), background-color .35s var(--curva), border-color .35s var(--curva), border-width .35s; }
.dc-cursore-punto { position: absolute; left: 0; top: 0; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--dc-blu); transform: translate(var(--px), var(--py)); transition: opacity .25s; }
.dc-cursore.su-scuro .dc-cursore-punto { background: #fff; }
.dc-cursore.su-attivo .dc-cursore-anello { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(192, 151, 47, .12); border-width: 1.5px; }
.dc-cursore.su-attivo .dc-cursore-punto { opacity: 0; }
.dc-cursore.premuto .dc-cursore-anello { width: 22px; height: 22px; margin: -11px 0 0 -11px; background: rgba(192, 151, 47, .3); }
@media (prefers-reduced-motion: reduce) { .dc-cursore { display: none; } }
html.pref-fermo .dc-cursore, html.pref-contrasto .dc-cursore { display: none; }
@media (hover: none), (pointer: coarse) { .dc-cursore { display: none; } }

/* tema scuro: il disegno animato delle aperture (Chi siamo, Come lavoriamo, Contatti) non va velato né invertito */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dc-testa-disegno--linee { filter: none; opacity: 1; }
  :root:not([data-theme="light"]) .dc-testa-disegno--linee line, :root:not([data-theme="light"]) .dc-testa-disegno--linee path { stroke: #8FBDE0; opacity: .85; }
}
:root[data-theme="dark"] .dc-testa-disegno--linee { filter: none; opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dc-perche .dc-perche-disegno line, :root:not([data-theme="light"]) .dc-perche .dc-perche-disegno path { opacity: .8; } }
/* ambiti: al passaggio il testo scorre senza cambiare la larghezza della colonna, così i titoli non vanno a capo */
.dc-indice a:hover, .dc-indice a:focus-visible, .dc-indice a.attivo { padding-left: 0; }
.dc-indice-n, .dc-indice-nome, .dc-indice-desc, .dc-indice-foto { transition: transform .5s var(--curva), color .45s var(--curva); }
.dc-indice a:hover .dc-indice-n, .dc-indice a:focus-visible .dc-indice-n, .dc-indice a.attivo .dc-indice-n,
.dc-indice a:hover .dc-indice-nome, .dc-indice a:focus-visible .dc-indice-nome, .dc-indice a.attivo .dc-indice-nome,
.dc-indice a:hover .dc-indice-desc, .dc-indice a:focus-visible .dc-indice-desc, .dc-indice a.attivo .dc-indice-desc { transform: translateX(1rem); }
@media (min-width: 621px) and (max-width: 1000px) {
  .dc-indice a:hover .dc-indice-foto, .dc-indice a:focus-visible .dc-indice-foto, .dc-indice a.attivo .dc-indice-foto { transform: translateX(.8rem); }
  .dc-indice a:hover .dc-indice-n, .dc-indice a:focus-visible .dc-indice-n, .dc-indice a.attivo .dc-indice-n,
  .dc-indice a:hover .dc-indice-nome, .dc-indice a:focus-visible .dc-indice-nome, .dc-indice a.attivo .dc-indice-nome,
  .dc-indice a:hover .dc-indice-desc, .dc-indice a:focus-visible .dc-indice-desc, .dc-indice a.attivo .dc-indice-desc { transform: translateX(.8rem); }
}
@media (max-width: 620px) {
  .dc-indice a:hover .dc-indice-nome, .dc-indice a:focus-visible .dc-indice-nome, .dc-indice a.attivo .dc-indice-nome,
  .dc-indice a:hover .dc-indice-desc, .dc-indice a:focus-visible .dc-indice-desc, .dc-indice a.attivo .dc-indice-desc { transform: none; }
}
@media (min-width: 621px) {
  .dc-indice-freccia { transition: width .45s var(--curva), transform .5s var(--curva); }
  .dc-indice a:hover .dc-indice-freccia, .dc-indice a:focus-visible .dc-indice-freccia { transform: translateX(.75rem); }
}