/* Studio Legale Guido — direzione D «Costituzione»
   Grammatica presa dalla misura di Spadaro & Ardita (corpo 17/1.6, piccoli 15/14/13,
   titolo 46, titoli di sezione 40, sezioni 64/88, una sola curva), tutto il resto suo. */

@font-face { font-family: "Brygada 1918"; src: url(fonts/brygada.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Brygada 1918"; src: url(fonts/brygada-i.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(fonts/sourcesans.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --fondo: #DCE0E1;
  --ink: #1B2638;
  --muto: #4A5664;
  --filo: rgba(27, 38, 56, .16);
  --sul-pieno: #F2F0EB;
  --sul-pieno-muto: rgba(242, 240, 235, .80);

  --c29: #5B2C46;   /* prugna */
  --c30: #1C5B5F;   /* ottanio */
  --c32: #27437A;   /* blu */
  --c42: #7F4428;   /* rame */

  --f-titoli: "Brygada 1918", "Iowan Old Style", Georgia, serif;
  --f-testo: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  --margine: max(24px, calc((100vw - 1360px) / 2));
  --alt-testata: 80px;
  --curva: cubic-bezier(.2, .7, .2, 1);

  --grana: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; overflow-x: clip;
  background: var(--fondo); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-testo);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p, figure, blockquote { margin: 0; }
cite { font-style: normal; }

.salta { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--ink); color: var(--sul-pieno); padding: 10px 14px; text-decoration: none; }
.salta:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 20;
  height: var(--alt-testata);
  display: flex; align-items: center; gap: 40px;
  padding: 0 var(--margine);
  background: var(--fondo);
  border-bottom: 1px solid var(--filo);
}
.marchio { display: grid; gap: 4px; text-decoration: none; margin-right: auto; }
.marchio__nome { font: 500 1.625rem/1 var(--f-titoli); letter-spacing: -.005em; }
.marchio__sotto { font-size: .8125rem; line-height: 1.2; color: var(--muto); }
.menu { display: flex; gap: 32px; }
.menu a { font-size: .9375rem; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .18s var(--curva); }
.menu a:hover, .menu a[aria-current="page"] { border-color: var(--ink); }
.menu__apri { display: none; }
.testata__tel {
  font-size: .9375rem; font-weight: 600; letter-spacing: .01em; text-decoration: none;
  background: var(--ink); color: var(--sul-pieno);
  padding: 12px 18px;
}
.testata__tel-corto { display: none; }

/* ---------- impianto: colonna a sinistra, quadro a destra ---------- */
.impianto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.colonna { padding-left: var(--margine); padding-right: 64px; min-width: 0; }

.apertura, .materia {
  min-height: calc(100svh - var(--alt-testata));
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px 0;
  max-width: 560px;
}

.apertura__titolo {
  font: 400 clamp(2.25rem, 3.2vw, 2.875rem)/1.08 var(--f-titoli);
  letter-spacing: -.012em;
  text-wrap: balance;
}
.apertura__testo { margin-top: 24px; font-size: 1.1875rem; line-height: 1.6; color: var(--muto); max-width: 33em; text-wrap: pretty; }

.firma { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--filo); display: grid; gap: 4px; }
.firma__nome { font: 500 1.375rem/1.2 var(--f-titoli); }
.firma__ruolo { font-size: .9375rem; color: var(--muto); text-wrap: balance; }

.azioni { margin-top: 32px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.bottone {
  display: inline-block; text-decoration: none;
  font-weight: 600; font-size: 1.0625rem; line-height: 1;
  padding: 18px 24px;
  background: var(--ink); color: var(--sul-pieno);
  transition: background-color .18s var(--curva);
}
.bottone:hover { background: #2A3A54; }
.collegamento {
  font-weight: 600; text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 1px;
  transition: opacity .18s var(--curva);
}
.collegamento:hover { opacity: .72; }
.apertura__indirizzo { margin-top: 24px; font-size: .9375rem; color: var(--muto); }

/* materie (colonna) */
.materia__fascia, .materia__articolo { display: none; }
.materia__titolo { font: 400 2.5rem/1.1 var(--f-titoli); letter-spacing: -.01em; }
.materia__testo { margin-top: 16px; }
.materia__regola {
  margin-top: 28px; padding-top: 14px;
  border-top: 2px solid var(--c);
  font-size: .9375rem; line-height: 1.6;
}
.materia__regola cite { display: block; margin-top: 4px; font-size: .8125rem; color: var(--muto); }
.materia .collegamento { display: inline-block; margin-top: 28px; }

/* ---------- quadro ---------- */
.quadro {
  --H: calc(100svh - var(--alt-testata));
  --B: clamp(64px, 10.4svh, 92px);   /* fascia in apertura */
  --b: 56px;                          /* fascia chiusa */
  --S: 116px;                         /* striscia di foto durante le materie */
  position: sticky; top: var(--alt-testata);
  height: var(--H);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--ink);
}
.quadro__foto {
  flex: none; height: calc(var(--H) - 4 * var(--B));
  overflow: hidden; position: relative;
  transition: height .5s var(--curva);
}
.quadro__foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
}

.fascia {
  flex: none; height: var(--B);
  position: relative; overflow: hidden;
  background-color: var(--c); color: var(--sul-pieno);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  transition: height .5s var(--curva);
}
.fascia::before {   /* grana della tela */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grana); opacity: .26; mix-blend-mode: multiply;
}
.fascia__testa {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--B); padding: 0 40px 0 48px;
  text-decoration: none;
  transition: height .5s var(--curva);
}
.fascia__testa strong { font: 500 1.375rem/1.15 var(--f-titoli); }
.fascia__testa span { font-size: .875rem; color: var(--sul-pieno-muto); white-space: nowrap; }
.fascia__testa:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.fascia__testa:focus-visible { outline-color: var(--sul-pieno); outline-offset: -6px; }

.fascia__articolo {
  position: relative; z-index: 1;
  padding: 8px 40px 0 48px; max-width: 36em;
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s var(--curva), transform .5s var(--curva);
}
.fascia__articolo p { font: 400 clamp(1.5rem, 2.1vw, 1.875rem)/1.34 var(--f-titoli); letter-spacing: -.005em; text-wrap: pretty; }
.fascia__articolo cite { display: block; margin-top: 20px; font-size: .875rem; color: var(--sul-pieno-muto); }

/* stati: la fascia della materia letta si apre, le altre restano costole */
.quadro:not([data-stato="apertura"]) .quadro__foto { height: var(--S); }
.quadro:not([data-stato="apertura"]) .fascia { height: var(--b); }
.quadro:not([data-stato="apertura"]) .fascia__testa { height: var(--b); }
.quadro[data-stato="0"] .fascia[data-i="0"],
.quadro[data-stato="1"] .fascia[data-i="1"],
.quadro[data-stato="2"] .fascia[data-i="2"],
.quadro[data-stato="3"] .fascia[data-i="3"] { height: calc(var(--H) - var(--S) - 3 * var(--b)); }
.quadro[data-stato="0"] .fascia[data-i="0"] .fascia__testa,
.quadro[data-stato="1"] .fascia[data-i="1"] .fascia__testa,
.quadro[data-stato="2"] .fascia[data-i="2"] .fascia__testa,
.quadro[data-stato="3"] .fascia[data-i="3"] .fascia__testa { height: 96px; }
.quadro[data-stato="0"] .fascia[data-i="0"] .fascia__articolo,
.quadro[data-stato="1"] .fascia[data-i="1"] .fascia__articolo,
.quadro[data-stato="2"] .fascia[data-i="2"] .fascia__articolo,
.quadro[data-stato="3"] .fascia[data-i="3"] .fascia__articolo { opacity: 1; transform: none; transition-delay: .15s, .1s; }

/* =================================================================
   IL RESTO DEL SITO. Stessa grammatica: corpo 17/1.6, titoli di sezione 40,
   sezioni 88/64, filo sottile, colore pieno solo dove c'è una materia.
   ================================================================= */
.occhiello { font-size: .875rem; font-weight: 600; letter-spacing: .01em; color: var(--muto); }
.sezione__titolo { font: 400 2.5rem/1.1 var(--f-titoli); letter-spacing: -.01em; text-wrap: balance; }
.segnaposto { color: #7F4428; text-decoration: underline dotted; text-underline-offset: 3px; }
.bottone--chiaro { background: var(--sul-pieno); color: var(--ink); }
.bottone--chiaro:hover { background: #FFFFFF; }
button.bottone { border: 0; cursor: pointer; font-family: var(--f-testo); }
.nota { margin-top: 20px; font-size: .9375rem; color: var(--muto); }

/* ---------- home: lo studio, in inchiostro pieno ---------- */
.studio-home {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 64px;
  padding: 88px var(--margine);
  background: var(--ink); color: var(--sul-pieno);
  --muto: var(--sul-pieno-muto); --filo: rgba(242, 240, 235, .18);
}
.studio-home__testo { max-width: 560px; }
.studio-home__titolo { margin-top: 8px; font: 400 2.5rem/1.1 var(--f-titoli); letter-spacing: -.01em; }
.studio-home__testo p:not(.occhiello) { margin-top: 18px; color: var(--sul-pieno-muto); }
.studio-home .collegamento { display: inline-block; margin-top: 28px; }
.fatti { margin: 0; align-self: center; }
.fatti > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 4px 24px; padding: 16px 0; border-top: 1px solid var(--filo); }
.fatti > div:last-child { border-bottom: 1px solid var(--filo); }
.fatti dt { font-size: .875rem; font-weight: 600; color: var(--muto); padding-top: 2px; }
.fatti dd { margin: 0; font: 400 1.25rem/1.35 var(--f-titoli); }
.fatti--chiaro dd { font: 400 1.0625rem/1.55 var(--f-testo); }
.fatti dd a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- come lavora lo studio ---------- */
.metodo { padding: 88px var(--margine) 64px; }
.passi { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.passi li { padding-top: 20px; border-top: 2px solid var(--ink); }
.passo__num { display: block; font: 400 2rem/1 var(--f-titoli); color: var(--muto); }
.passi h3 { margin: 16px 0 0; font: 500 1.375rem/1.2 var(--f-titoli); }
.passi p { margin-top: 10px; font-size: .9375rem; color: var(--muto); }

/* ---------- guide: una riga per guida, la costola nel colore della materia ---------- */
.guide { padding: 64px var(--margine) 88px; }
.guide__testa { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.guide__elenco { margin: 32px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.guide__elenco a {
  position: relative; display: grid; gap: 8px; height: 100%; align-content: start;
  padding: 24px 28px 26px 36px; text-decoration: none;
  background: #E8EBEC; box-shadow: inset 0 0 0 1px var(--filo);
  transition: background-color .18s var(--curva);
}
.guide__elenco a::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--c); }
.guide__elenco a:hover { background: #F1F3F3; }
.guide__area { font-size: .8125rem; font-weight: 600; color: var(--muto); }
.guide__elenco strong { font: 500 1.375rem/1.25 var(--f-titoli); }
.guide__elenco a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.guide__breve { font-size: .9375rem; color: var(--muto); }
.guide__leggi { margin-top: 6px; font-weight: 600; font-size: .9375rem; }
.guide--pagina { padding-top: 0; }
.guide--pagina .guide__elenco { margin-top: 0; }

/* ---------- chiusa ---------- */
.chiusa {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 64px; align-items: end;
  padding: 72px var(--margine);
  background: var(--ink); color: var(--sul-pieno);
}
.studio-home + .metodo, .guide + .chiusa { border-top: 0; }
.chiusa h2 { font: 400 2.5rem/1.1 var(--f-titoli); letter-spacing: -.01em; }
.chiusa p { margin-top: 14px; max-width: 36em; color: var(--sul-pieno-muto); }
.chiusa__azioni { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.pagina-home .guide { border-bottom: 1px solid var(--filo); }

/* ---------- le materie come fasce impilate ---------- */
.fasce { padding: 88px var(--margine) 0; }
.fasce__titolo { font: 400 2.5rem/1.1 var(--f-titoli); letter-spacing: -.01em; margin-bottom: 32px; }
.fasce__elenco { margin: 0 calc(-1 * var(--margine)); padding: 0; list-style: none; }
.fasce__elenco li { background-color: var(--c); color: var(--sul-pieno); position: relative; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10); }
.fasce__elenco li::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grana); opacity: .26; mix-blend-mode: multiply; }
.fasce__elenco a {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; align-items: center; gap: 24px;
  min-height: 88px; padding: 0 var(--margine); text-decoration: none;
  transition: min-height .5s var(--curva);
}
.fasce__elenco a:hover { min-height: 120px; }
.fasce__elenco strong { font: 500 1.625rem/1.15 var(--f-titoli); }
.fasce__sotto { color: var(--sul-pieno-muto); }
.fasce__art { font-size: .875rem; color: var(--sul-pieno-muto); white-space: nowrap; }
.fasce__elenco a:focus-visible { outline-color: var(--sul-pieno); outline-offset: -6px; }

/* ---------- testata delle pagine interne ---------- */
.briciole ol { display: flex; flex-wrap: wrap; margin: 0 0 28px; padding: 0; list-style: none; font-size: .8125rem; color: var(--muto); }
.briciole li + li::before { content: "/"; margin: 0 10px; opacity: .6; }
.briciole a { text-decoration: none; }
.briciole a:hover { text-decoration: underline; }
.briciole--chiaro ol { color: var(--sul-pieno-muto); }
.testa-pagina { padding: 64px var(--margine) 56px; }
.testa-pagina__titolo { font: 400 2.875rem/1.08 var(--f-titoli); letter-spacing: -.012em; text-wrap: balance; max-width: 18em; }
.testa-pagina__intro { margin-top: 20px; font-size: 1.1875rem; color: var(--muto); max-width: 38em; text-wrap: pretty; }
.testa-pagina__intro a { color: var(--ink); }

/* ---------- pagina di una materia: la fascia aperta sull'articolo ---------- */
.testa-materia {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px 80px; align-items: end;
  padding: 56px var(--margine) 72px;
  background-color: var(--c); color: var(--sul-pieno);
  --muto: var(--sul-pieno-muto);
}
.testa-materia::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--grana); opacity: .26; mix-blend-mode: multiply; }
.testa-materia__art { font-size: .875rem; font-weight: 600; color: var(--sul-pieno-muto); }
.testa-materia__titolo { margin-top: 10px; font: 400 2.875rem/1.08 var(--f-titoli); letter-spacing: -.012em; text-wrap: balance; }
.testa-materia__intro { margin-top: 20px; font-size: 1.1875rem; color: var(--sul-pieno-muto); max-width: 33em; text-wrap: pretty; }
.testa-materia .azioni { margin-top: 32px; }
.testa-materia__articolo { padding-left: 28px; border-left: 2px solid rgba(242, 240, 235, .5); }
.testa-materia__articolo p { font: 400 1.75rem/1.36 var(--f-titoli); letter-spacing: -.005em; text-wrap: pretty; }
.testa-materia__articolo cite { display: block; margin-top: 18px; font-size: .875rem; color: var(--sul-pieno-muto); }

.regola {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 8px 64px; align-items: baseline;
  padding: 40px var(--margine); border-bottom: 1px solid var(--filo);
}
.regola__testo { font: 400 1.5rem/1.4 var(--f-titoli); max-width: 34em; text-wrap: pretty; }
.regola__norma { grid-column: 2; font-size: .875rem; color: var(--muto); }

.sezione {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px 64px; align-items: start;
  padding: 88px var(--margine) 0;
}
.sezione > .sezione__titolo { position: sticky; top: calc(var(--alt-testata) + 32px); font-size: 2.25rem; }
.servizi { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.servizi li { padding: 22px 0 28px; border-top: 1px solid var(--filo); }
.servizi h3 { margin: 0; font: 500 1.375rem/1.2 var(--f-titoli); }
.servizi p { margin-top: 8px; font-size: 1rem; color: var(--muto); }

/* il percorso: una linea nel colore della materia, i passi appesi */
.percorso { margin: 0; padding: 0; list-style: none; position: relative; }
.percorso::before { content: ""; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: var(--c); }
.percorso li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; padding: 0 0 32px; }
.percorso li:last-child { padding-bottom: 0; }
.percorso__num {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--c); color: var(--sul-pieno); font: 500 1.25rem/1 var(--f-titoli);
}
.percorso h3 { margin: 10px 0 0; font: 500 1.375rem/1.2 var(--f-titoli); }
.percorso p { margin-top: 8px; color: var(--muto); max-width: 36em; }

.documenti { margin: 0; padding: 28px 32px; list-style: none; display: grid; gap: 12px; background: #E8EBEC; box-shadow: inset 0 0 0 1px var(--filo); }
.documenti li { position: relative; padding-left: 30px; font-size: 1.0625rem; line-height: 1.5; }
.documenti li::before { content: ""; position: absolute; left: 0; top: .38em; width: 14px; height: 14px; border: 2px solid var(--c); }

.faq { border-bottom: 1px solid var(--filo); }
.faq__voce { border-top: 1px solid var(--filo); }
.faq__voce summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; }
.faq__voce summary::-webkit-details-marker { display: none; }
.faq__voce summary h3 { margin: 0; font: 500 1.3125rem/1.3 var(--f-titoli); }
.faq__voce summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--c, var(--ink)); border-bottom: 2px solid var(--c, var(--ink)); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s var(--curva); }
.faq__voce[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__voce p { padding: 0 48px 26px 0; max-width: 40em; }

.lancio { padding: 72px var(--margine) 0; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 16px 64px; }
.lancio .occhiello { padding-top: 26px; }
.lancio a { display: grid; gap: 8px; padding: 24px 28px 26px; text-decoration: none; background: var(--c); color: var(--sul-pieno); }
.lancio strong { font: 500 1.375rem/1.25 var(--f-titoli); }
.lancio span { color: var(--sul-pieno-muto); }
.lancio a:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* ---------- lo studio ---------- */
.testa-studio { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px 80px; align-items: start; padding: 64px var(--margine) 0; }
.testa-studio__testo .occhiello { margin-bottom: 10px; }
.testa-studio__testo p:not(.occhiello) { margin-top: 18px; max-width: 34em; }
.testa-studio__testo p:nth-of-type(2) { font-size: 1.1875rem; }
.testa-studio__foto { max-width: 600px; justify-self: end; }
.testa-studio__foto img { width: 100%; aspect-ratio: 1200 / 768; object-fit: cover; }
.testa-studio__foto figcaption { margin-top: 12px; font-size: .8125rem; color: var(--muto); }
.principi { margin: 0; padding: 0; list-style: none; }
.principi li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 32px; padding: 22px 0; border-top: 1px solid var(--filo); }
.principi li:last-child { border-bottom: 1px solid var(--filo); }
.principi h3 { margin: 0; grid-row: span 2; font: 500 1.375rem/1.2 var(--f-titoli); }
.principi__norma { font-size: .875rem; color: var(--muto); }
.sede__indirizzo { margin-bottom: 14px; font: 400 1.75rem/1.25 var(--f-titoli); }
.sezione--sede p + p { margin-top: 8px; }
.sede__link { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 20px !important; }
.pagina-studio .metodo { padding-top: 88px; }

/* ---------- guida ---------- */
.guida__fascia {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 64px; padding: 0 var(--margine); text-decoration: none;
  background-color: var(--c); color: var(--sul-pieno); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.guida__fascia::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--grana); opacity: .26; mix-blend-mode: multiply; }
.guida__fascia strong { position: relative; font: 500 1.375rem/1 var(--f-titoli); }
.guida__fascia span { position: relative; font-size: .875rem; color: var(--sul-pieno-muto); }
.guida__fascia:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.guida { max-width: 46rem; margin: 0 auto; padding: 56px 24px 88px; }
.guida__titolo { font: 400 2.875rem/1.08 var(--f-titoli); letter-spacing: -.012em; text-wrap: balance; }
.guida__data { margin-top: 16px; font-size: .9375rem; color: var(--muto); }
.guida__bozza { display: inline-block; margin-top: 14px; padding: 6px 12px; font-size: .8125rem; font-weight: 600; background: var(--ink); color: var(--sul-pieno); }
.guida__breve { margin: 36px 0 12px; padding: 24px 28px 26px; background: #E8EBEC; border-left: 6px solid var(--c, var(--ink)); }
.guida__breve h2 { margin: 0; font-size: .875rem; font-weight: 600; color: var(--muto); }
.guida__breve p { margin-top: 8px; font: 400 1.3125rem/1.45 var(--f-titoli); }
.guida__corpo h2 { margin: 44px 0 0; font: 400 1.75rem/1.2 var(--f-titoli); }
.guida__corpo p { margin-top: 14px; font-size: 1.125rem; line-height: 1.7; }
.guida__corpo ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.guida__corpo li { position: relative; padding-left: 22px; font-size: 1.0625rem; line-height: 1.55; }
.guida__corpo li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 9px; height: 2px; background: var(--c, var(--ink)); }
.guida__norme li { font-size: .9375rem; color: var(--muto); }
.guida__avviso { margin-top: 40px !important; padding-top: 18px; border-top: 1px solid var(--filo); font-size: .9375rem !important; color: var(--muto); }
.guida__area-link { font-size: 1rem !important; }

/* ---------- contatti e modulo ---------- */
.contatti { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px 80px; align-items: start; padding: 0 var(--margine) 96px; }
.contatti .azioni { margin-top: 28px; }
.modulo-box {
  --muto: var(--sul-pieno-muto); --filo: rgba(242, 240, 235, .2);
  padding: 40px 44px 40px; background: var(--ink); color: var(--sul-pieno);
  scroll-margin-top: calc(var(--alt-testata) + 16px);
}
.modulo__titolo { font: 400 2.25rem/1.1 var(--f-titoli); letter-spacing: -.01em; }
.modulo__guida { margin-top: 12px; color: var(--muto); max-width: 32em; }
.modulo { margin-top: 28px; display: grid; gap: 18px; }
.modulo__campo { display: grid; gap: 7px; min-width: 0; }
.modulo__campo label, .modulo__preferenza legend { font-size: .875rem; font-weight: 600; }
.modulo input[type="text"], .modulo input[type="tel"], .modulo input[type="email"], .modulo select, .modulo textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 1.0625rem; line-height: 1.4;
  background: var(--sul-pieno); color: var(--ink); border: 0; border-radius: 0;
}
.modulo select { appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.modulo textarea { min-height: 132px; resize: vertical; }
.modulo input:focus-visible, .modulo select:focus-visible, .modulo textarea:focus-visible { outline: 3px solid #8FB3E0; outline-offset: 0; }
.modulo [aria-invalid="true"] { box-shadow: inset 0 0 0 2px #E8806B; }
.modulo__coppia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px 16px; }
.modulo__errore--largo { grid-column: 1 / -1; }
.modulo__nota { font-size: .8125rem; color: var(--muto); }
.modulo__errore { font-size: .875rem; font-weight: 600; color: #F2A898; }
.modulo__preferenza { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.modulo__preferenza legend { margin-bottom: 8px; padding: 0; }
.modulo__preferenza label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.modulo input[type="radio"], .modulo input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--sul-pieno); flex: none; }
.modulo__consenso { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: start; font-size: .9375rem; }
.modulo__consenso input { margin-top: 3px; }
.modulo__consenso .modulo__errore { grid-column: 2; }
.modulo a { color: inherit; text-underline-offset: 3px; }
.modulo__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo__errore-invio { padding: 14px 16px; background: rgba(232, 128, 107, .16); border-left: 3px solid #E8806B; font-size: .9375rem; }
.modulo .bottone { justify-self: start; }
.modulo .bottone:disabled { opacity: .6; cursor: progress; }
.modulo__esito { margin-top: 28px; padding: 20px 0 4px 22px; border-left: 2px solid var(--sul-pieno); }
.modulo__esito:not([hidden]) { animation: esito-entra .3s var(--curva); }
.modulo__esito-titolo { font: 400 1.625rem/1.2 var(--f-titoli); }
.modulo__esito p + p { margin-top: 10px; color: var(--muto); }
.modulo__esito a { color: inherit; }
@keyframes esito-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[tabindex="-1"]:focus { outline: none; }
.modulo__anteprima { margin-top: 10px !important; font-size: .875rem; color: var(--muto); }

/* ---------- piede ---------- */
.piede { padding: 0; background: #CDD3D5; border-top: 0; }
.piede__corpo { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 40px; padding: 64px var(--margine) 56px; }
.piede__marchio { margin-bottom: 14px; font: 500 1.625rem/1 var(--f-titoli); }
.piede address { font-style: normal; font-size: .9375rem; line-height: 1.7; color: var(--muto); }
.piede h2 { margin: 0 0 12px; font-size: .875rem; font-weight: 600; }
.piede ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.piede__colonna { font-size: .9375rem; }
.piede__colonna p { margin-bottom: 10px; color: var(--muto); line-height: 1.55; }
.piede a { text-decoration: none; }
.piede a:hover { text-decoration: underline; text-underline-offset: 4px; }
.piede__firma { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px var(--margine); background: var(--ink); color: var(--sul-pieno-muto); font-size: .8125rem; }

@media (max-width: 1200px) {
  .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .piede__corpo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =================================================================
   TELEFONO: un altro impianto. Foto in testa, poi il testo; le materie
   sono fasce che restano in alto una sotto l'altra mentre si scorre.
   ================================================================= */
@media (max-width: 900px) {
  :root { --alt-testata: 64px; --f: 48px; }
  .testata { gap: 12px; padding: 0 20px; }
  .marchio__nome { font-size: 1.1875rem; white-space: nowrap; }
  .marchio__sotto { display: none; }
  .menu__apri {
    display: inline-flex; padding: 10px 14px; cursor: pointer; font: 600 .9375rem/1 var(--f-testo);
    background: transparent; color: var(--ink); border: 1.5px solid var(--filo);
  }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; padding: 4px 20px 20px;
    background: var(--fondo); border-bottom: 1px solid var(--filo);
    box-shadow: 0 24px 32px -24px rgba(27, 38, 56, .45);
  }
  .menu.aperto { display: flex; }
  .menu a { padding: 16px 0; font-size: 1.125rem; border-bottom: 1px solid var(--filo); }
  .menu a:hover, .menu a[aria-current="page"] { border-color: var(--filo); text-decoration: underline; text-underline-offset: 5px; }
  .testata__tel { padding: 11px 16px; }
  .testata__tel-lungo { display: none; }
  .testata__tel-corto { display: inline; }

  .impianto { display: flex; flex-direction: column; }
  .quadro { order: -1; position: static; height: auto; background: none; }
  .quadro__foto { height: auto; aspect-ratio: 1200 / 768; }
  .fascia { display: none; }

  .colonna { padding: 0; }
  .apertura { min-height: 0; padding: 32px 20px 48px; max-width: none; }
  .apertura__titolo { font-size: 2rem; line-height: 1.1; }
  .apertura__testo { margin-top: 16px; font-size: 1.0625rem; }
  .firma { margin-top: 24px; }
  .azioni { margin-top: 24px; gap: 20px; }
  .bottone { flex: 1 1 100%; text-align: center; }
  .apertura__indirizzo { margin-top: 16px; }

  /* le sezioni si sciolgono: le fasce diventano figlie dello stesso contenitore e si impilano */
  .materie { position: relative; }
  .materia { display: contents; }
  .materia__fascia {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    position: sticky; top: calc(var(--alt-testata) + var(--i) * var(--f)); z-index: 5;
    height: var(--f); padding: 0 20px;
    background-color: var(--c); color: var(--sul-pieno);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  }
  .materia__fascia strong { font: 500 1.1875rem/1 var(--f-titoli); }
  .materia__fascia span { font-size: .8125rem; color: var(--sul-pieno-muto); }
  .materia__corpo {
    padding: 28px 20px 56px;
    scroll-margin-top: calc(var(--alt-testata) + 4 * var(--f));
  }
  .materia__titolo {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .materia__articolo { display: block; padding-left: 16px; border-left: 3px solid var(--c); }
  .materia__articolo p { font: 400 1.25rem/1.4 var(--f-titoli); }
  .materia__articolo cite { display: block; margin-top: 8px; font-size: .8125rem; color: var(--muto); }
  .materia__testo { margin-top: 24px; }
  .materia__regola { margin-top: 20px; }
  .materia .collegamento { display: inline-block; margin-top: 20px; }
}


/* TELEFONO, il resto del sito: una colonna, le fasce restano a tutta larghezza */
@media (max-width: 900px) {
  .testata { position: sticky; }
  .sezione__titolo, .studio-home__titolo, .chiusa h2, .fasce__titolo { font-size: 1.875rem; }
  .studio-home { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 56px 20px; }
  .fatti > div { grid-template-columns: minmax(0, 1fr); padding: 14px 0; }
  .metodo { padding: 56px 20px 40px; }
  .passi { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; }
  .guide { padding: 40px 20px 56px; }
  .guide__elenco { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
  .guide__elenco a { padding: 20px 20px 22px 28px; }
  .guide--pagina { padding-top: 0; }
  .chiusa { grid-template-columns: minmax(0, 1fr); padding: 56px 20px; }
  .chiusa__azioni { gap: 20px; }
  .chiusa .bottone { flex: 1 1 100%; text-align: center; }
  .fasce { padding: 56px 20px 0; }
  .fasce__titolo { margin-bottom: 24px; }
  .fasce__elenco { margin: 0 -20px; }
  .fasce__elenco a { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; min-height: 0; padding: 18px 20px; }
  .fasce__elenco a:hover { min-height: 0; }
  .fasce__elenco strong { font-size: 1.3125rem; }
  .fasce__sotto { grid-column: 1; grid-row: 2; font-size: .9375rem; }
  .fasce__art { grid-column: 2; grid-row: 1; font-size: .8125rem; }

  .testa-pagina { padding: 36px 20px 32px; }
  .testa-pagina__titolo, .testa-materia__titolo, .guida__titolo { font-size: 2rem; line-height: 1.1; }
  .testa-pagina__intro, .testa-materia__intro { margin-top: 14px; font-size: 1.0625rem; }
  .briciole ol { margin-bottom: 20px; }

  .testa-materia { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 20px 40px; }
  .testa-materia .azioni { margin-top: 24px; }
  .testa-materia__articolo { padding-left: 16px; }
  .testa-materia__articolo p { font-size: 1.25rem; line-height: 1.4; }
  .regola { grid-template-columns: minmax(0, 1fr); padding: 32px 20px; }
  .regola__testo { font-size: 1.25rem; }
  .regola__norma { grid-column: 1; }
  .sezione { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 56px 20px 0; }
  .sezione > .sezione__titolo { position: static; font-size: 1.75rem; }
  .servizi { grid-template-columns: minmax(0, 1fr); }
  .percorso li { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
  .percorso::before { left: 19px; }
  .percorso__num { width: 40px; height: 40px; font-size: 1.125rem; }
  .percorso h3 { margin-top: 6px; font-size: 1.25rem; }
  .documenti { padding: 22px 20px; }
  .faq__voce summary h3 { font-size: 1.1875rem; }
  .faq__voce p { padding-right: 0; }
  .lancio { grid-template-columns: minmax(0, 1fr); padding: 48px 20px 0; gap: 10px; }
  .lancio .occhiello { padding-top: 0; }
  .lancio a { padding: 20px; }

  .testa-studio { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 36px 20px 0; }
  .testa-studio__foto { order: -1; justify-self: stretch; margin: -36px -20px 0; max-width: none; }
  .testa-studio__foto figcaption { padding: 0 20px; }
  .principi li { grid-template-columns: minmax(0, 1fr); }
  .principi h3 { grid-row: auto; }
  .pagina-studio .metodo { padding-top: 56px; }

  .guida__fascia { height: 56px; padding: 0 20px; }
  .guida__fascia strong { font-size: 1.1875rem; }
  .guida__fascia span { font-size: .8125rem; }
  .guida { padding: 32px 20px 56px; }
  .guida__breve { padding: 20px 20px 22px; }
  .guida__breve p { font-size: 1.1875rem; }
  .guida__corpo h2 { font-size: 1.5rem; margin-top: 32px; }
  .guida__corpo p { font-size: 1.0625rem; }

  .contatti { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 0 0 56px; }
  .contatti__recapiti { padding: 0 20px; }
  .modulo-box { padding: 28px 20px 28px; }
  .modulo__titolo { font-size: 1.875rem; }
  .modulo__coppia { grid-template-columns: minmax(0, 1fr); }
  .modulo .bottone { justify-self: stretch; text-align: center; }

  .piede__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 48px 20px 40px; gap: 32px 24px; }
  .piede__studio { grid-column: 1 / -1; }
  .piede__firma { padding: 12px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* hidden deve vincere sui display dei componenti (modulo inviato, errori, esito) */
[hidden] { display: none !important; }