/* Guide di Sagoma Home: stesso aspetto del sito (tavola di progetto), pagine da leggere. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; src: url(/fonts/archivo-400-800-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; src: url(/fonts/archivo-400-800-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-400-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-400-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-500-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-500-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url(/fonts/instrument-sans-400-600-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url(/fonts/instrument-sans-400-600-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --paper: #F3F5F6;
  --sheet: #FFFFFF;
  --ink: #16202A;
  --ink-soft: #4E5B67;
  --line: #D3DAE0;
  --grid: rgba(22, 32, 42, .06);
  --accent: #B84A31;
  --accent-soft: rgba(200, 85, 61, .12);
  --on-accent: #FFFFFF;
  --brand-arc: #C8553D;
  --bezel: #16202A;
  --bezel-ink: #E9EEF2;
  --shadow: 0 1px 2px rgba(22, 32, 42, .06), 0 22px 44px -22px rgba(22, 32, 42, .32);
  /* disegni */
  --t-pav: #FFFFFF;
  --t-muro: #16202A;
  --t-arr: rgba(200, 85, 61, .14);
  --t-arr2: #EEF1F3;
  --t-zona: rgba(78, 91, 103, .07);
  --t-calp: rgba(200, 85, 61, .16);
  --t-line: #4E5B67;
  --t-sole-giu: #D9822B;
  --t-sole-equ: #B84A31;
  --t-sole-dic: #4B6A8A;
  --t-cielo: #F7F9FA;

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.125rem, 1rem + .45vw, 1.3125rem);
  --t-h3: clamp(1.15rem, 1.05rem + .4vw, 1.3rem);
  --t-h2: clamp(1.5rem, 1.15rem + 1.3vw, 2.05rem);
  --t-h1: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem);
  --wrap: 1200px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0E1419; --sheet: #151D25; --ink: #E7ECF0; --ink-soft: #9DABB7; --line: #27333E; --grid: rgba(231, 236, 240, .05);
    --accent: #E8775D; --accent-soft: rgba(232, 119, 93, .15); --on-accent: #16100D; --bezel: #04070A;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 22px 44px -22px rgba(0, 0, 0, .7);
    --t-pav: #151D25; --t-muro: #DCE3E9; --t-arr: rgba(232, 119, 93, .18); --t-arr2: #1E2832; --t-zona: rgba(157, 171, 183, .08);
    --t-calp: rgba(232, 119, 93, .2); --t-line: #9DABB7; --t-sole-giu: #E9A04F; --t-sole-equ: #E8775D; --t-sole-dic: #7FA3C8; --t-cielo: #111921;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0E1419; --sheet: #151D25; --ink: #E7ECF0; --ink-soft: #9DABB7; --line: #27333E; --grid: rgba(231, 236, 240, .05);
  --accent: #E8775D; --accent-soft: rgba(232, 119, 93, .15); --on-accent: #16100D; --bezel: #04070A;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 22px 44px -22px rgba(0, 0, 0, .7);
  --t-pav: #151D25; --t-muro: #DCE3E9; --t-arr: rgba(232, 119, 93, .18); --t-arr2: #1E2832; --t-zona: rgba(157, 171, 183, .08);
  --t-calp: rgba(232, 119, 93, .2); --t-line: #9DABB7; --t-sole-giu: #E9A04F; --t-sole-equ: #E8775D; --t-sole-dic: #7FA3C8; --t-cielo: #111921;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-md)/1.65 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
p, ul, ol, figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }

/* ---------- Testata ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(1px)) { .top { background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.3) blur(12px); } }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; color: var(--ink); text-decoration: none; }
.logo { height: 26px; width: auto; }
.logo .arc { stroke: var(--brand-arc); }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); }
.nav a:not(.btn) { color: var(--ink-soft); text-decoration: none; font-size: var(--t-sm); font-weight: 500; }
.nav a:not(.btn):hover, .nav a[aria-current] { color: var(--ink); }
@media (max-width: 560px) { .nav .hide-s { display: none; } }
.btn { display: inline-flex; align-items: center; gap: .55em; padding: .72em 1.15em; border-radius: 6px; border: 1px solid transparent; font: 600 var(--t-sm)/1.1 var(--f-body); text-decoration: none; cursor: pointer; transition: transform .15s, background-color .15s, border-color .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn-ghost { background: var(--sheet); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-soft); }

/* ---------- Linea di quota (come nel sito) ---------- */
.quota { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.quota .name { color: var(--accent); white-space: nowrap; }
.quota .dim { flex: 1 1 auto; max-width: 360px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.quota .dim b { font-weight: 500; letter-spacing: .04em; text-transform: none; white-space: nowrap; color: var(--ink); }
.quota .dl { flex: 1; height: 1px; background: currentColor; opacity: .55; min-width: 12px; }
.quota .tk { flex: none; width: 10px; height: 10px; margin-inline: -5px; background: linear-gradient(135deg, transparent calc(50% - .8px), currentColor calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px)); }

/* ---------- Apertura della guida ---------- */
.g-head { position: relative; padding-block: clamp(28px, 5vw, 56px) clamp(24px, 4vw, 40px); }
.g-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); }
.g-head .wrap { position: relative; display: grid; gap: 20px; }
.crumbs { font: var(--t-xs)/1.4 var(--f-mono); color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span[aria-hidden] { opacity: .6; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-h1); font-weight: 720; font-stretch: 110%; line-height: 1.02; letter-spacing: -.025em; max-width: 20em; }
.lead { font-size: var(--t-lg); color: var(--ink-soft); max-width: 40em; line-height: 1.55; margin: 0; }
.meta { font: var(--t-xs)/1.4 var(--f-mono); color: var(--ink-soft); margin: 0; }

/* ---------- Corpo: testo + indice laterale ---------- */
.g-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: clamp(48px, 7vw, 88px); }
@media (min-width: 1040px) { .g-body { grid-template-columns: minmax(0, 720px) minmax(0, 1fr); gap: 64px; } }
.toc { order: -1; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); padding: 16px 18px; font-size: var(--t-sm); align-self: start; }
@media (min-width: 1040px) { .toc { order: 0; position: sticky; top: 88px; max-width: 320px; } }
.toc .k { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 10px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 6px; }
.toc li { counter-increment: toc; display: grid; grid-template-columns: 2em minmax(0, 1fr); line-height: 1.4; }
.toc li::before { content: counter(toc, decimal-leading-zero); font: var(--t-xs)/1.6 var(--f-mono); color: var(--ink-soft); }
.toc a { color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }

.prose { min-width: 0; counter-reset: sez; }
.prose > * + * { margin-top: 1.05em; }
.prose p, .prose li { max-width: 40em; }
.prose h2 { font-size: var(--t-h2); font-weight: 700; font-stretch: 106%; line-height: 1.1; letter-spacing: -.018em; margin-top: 2.1em; counter-increment: sez; display: grid; gap: 10px; }
.prose h2::before { content: counter(sez, decimal-leading-zero); font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .09em; color: var(--accent); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--t-h3); font-weight: 650; font-stretch: 104%; line-height: 1.25; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); text-underline-offset: 2px; }
.prose strong { font-weight: 600; }
.prose .num-big { font: 650 1.05em/1 var(--f-display); font-variant-numeric: tabular-nums; }

/* Riquadri */
.box { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--sheet); padding: 16px 18px; }
.box > * + * { margin-top: .6em; }
.box .k { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--accent); display: block; }
.box p { font-size: var(--t-sm); }
.box.nota { border-left-color: var(--ink-soft); }
.box.nota .k { color: var(--ink-soft); }

/* Tabelle */
.tab-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--sheet); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
caption { text-align: left; padding: 12px 14px 0; font: 500 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
th, td { text-align: left; padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
thead th { border-top: 0; font: 500 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:first-child th, tbody tr:first-child td { border-top: 1px solid var(--line); }
tfoot td, tfoot th { font-weight: 600; }

/* Disegni */
.tav { margin: 1.6em 0 0; display: grid; gap: 10px; }
.tav-frame { border: 1px solid var(--line); border-radius: 10px; background: var(--sheet); padding: clamp(10px, 2vw, 22px); box-shadow: var(--shadow); }
.tav-svg { width: 100%; height: auto; display: block; max-height: 78vh; }
.tav figcaption { font: var(--t-xs)/1.5 var(--f-mono); color: var(--ink-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.tav figcaption b { color: var(--ink); font-weight: 500; }
.tav-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .tav-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tav-grid figure { margin: 0; display: grid; gap: 8px; }
.tav-grid figcaption { font: var(--t-xs)/1.45 var(--f-mono); color: var(--ink-soft); }
.tav-grid figcaption b { color: var(--ink); font-weight: 500; display: block; }
.legenda { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px 22px; font-size: var(--t-sm); }
@media (min-width: 640px) { .legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.legenda li { display: grid; grid-template-columns: 1.9em minmax(0, 1fr); align-items: baseline; margin: 0 !important; }
.legenda .n { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: 600 .78em/1 var(--f-mono); }
.foto { margin: 1.6em 0 0; display: grid; gap: 10px; }
.foto img { border-radius: 8px; border: 1px solid var(--line); background: var(--sheet); width: 100%; }
.foto figcaption { font: var(--t-xs)/1.5 var(--f-mono); color: var(--ink-soft); }
.foto figcaption b { color: var(--ink); font-weight: 500; }
.foto-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 640px) { .foto-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foto-3 figure { margin: 0; position: relative; }
.foto-3 img { border-radius: 8px; border: 1px solid var(--line); }
.foto-3 .ora { position: absolute; top: 8px; left: 8px; font: 500 var(--t-xs)/1 var(--f-mono); padding: 6px 8px; border-radius: 4px; background: rgba(255, 255, 255, .92); color: #16202A; }

/* elementi SVG (1 unità = 1 cm) */
.tav-svg text { font-family: var(--f-body); }
.tav-svg .pav { fill: var(--t-pav); }
.tav-svg .vano { fill: var(--t-pav); }
.tav-svg .muro { fill: var(--t-muro); }
.tav-svg .fin { fill: none; stroke: var(--t-muro); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.tav-svg .fin-l { stroke: var(--t-muro); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.tav-svg .anta { stroke: var(--t-muro); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tav-svg .anta-tr { stroke: var(--t-line); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.tav-svg .arco { fill: none; stroke: var(--t-line); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.tav-svg .arr { fill: var(--t-arr); stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.tav-svg .arr-sporg { fill: var(--t-arr); stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.tav-svg .arr2 { fill: var(--t-arr2); stroke: var(--t-line); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.tav-svg .san-in { fill: none; stroke: var(--t-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tav-svg .tratt { fill: none; stroke: var(--t-line); stroke-width: 1.2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.tav-svg .tratt-pieno { fill: var(--t-zona); stroke: var(--t-line); stroke-width: 1.2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.tav-svg .zona { fill: var(--t-zona); stroke: var(--t-line); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.tav-svg .aperto { fill: none; stroke: var(--t-line); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.tav-svg .tappeto { fill: none; stroke: var(--t-line); stroke-width: 1; stroke-dasharray: 1 3; vector-effect: non-scaling-stroke; }
.tav-svg .tv { stroke: var(--t-muro); stroke-width: 3; vector-effect: non-scaling-stroke; }
.tav-svg .calp { fill: var(--t-calp); }
.tav-svg .lorda { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; }
.tav-svg .balc { fill: var(--t-zona); }
.tav-svg .diag { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
.tav-svg .q, .tav-svg .q-t, .tav-svg .q-e { stroke: var(--t-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tav-svg .q-t { stroke-width: 1.4; }
.tav-svg .q-txt { font-family: var(--f-mono); fill: var(--ink); paint-order: stroke; stroke: var(--t-pav); stroke-width: 3px; stroke-linejoin: round; }
.tav-svg .lab { fill: var(--ink-soft); paint-order: stroke; stroke: var(--t-pav); stroke-width: 3px; stroke-linejoin: round; }
.tav-svg .lab-st { fill: var(--ink); font-family: var(--f-display); paint-order: stroke; stroke: var(--t-pav); stroke-width: 3px; stroke-linejoin: round; }
.tav-svg .lab-arr { fill: var(--accent); font-weight: 600; }
.tav-svg .lab-zona { fill: var(--ink-soft); font-family: var(--f-mono); }
.tav-svg .num { fill: var(--accent); }
.tav-svg .num-t { fill: var(--on-accent); font-family: var(--f-mono); }
.tav-svg .nord-c { fill: none; stroke: var(--t-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tav-svg .nord-f { fill: var(--t-muro); }
.tav-svg .pers { fill: var(--t-line); opacity: .55; }
.tav-svg .cielo { fill: var(--t-cielo); stroke: var(--t-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tav-svg .giro { fill: none; stroke: var(--t-line); stroke-width: .8; stroke-dasharray: 2 4; opacity: .7; vector-effect: non-scaling-stroke; }
.tav-svg .casa { fill: var(--t-muro); opacity: .9; }
.tav-svg .casa + text { fill: var(--t-pav); stroke: none; }
.tav-svg .sole-giu, .tav-svg .sole-equ, .tav-svg .sole-dic { fill: none; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tav-svg .sole-giu { stroke: var(--t-sole-giu); }
.tav-svg .sole-equ { stroke: var(--t-sole-equ); }
.tav-svg .sole-dic { stroke: var(--t-sole-dic); }
.tav-svg .sole-p { fill: var(--t-pav); stroke: var(--t-line); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.tav-svg .sole-dot { fill: #F2C14E; stroke: var(--t-pav); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tav-svg .zocc { fill: var(--t-line); opacity: .28; }
.tav-svg .anta-l { fill: none; stroke: var(--t-muro); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.tav-svg .anta-r { fill: var(--t-muro); }
.tav-svg .gruccia { stroke: var(--t-line); stroke-width: .9; vector-effect: non-scaling-stroke; }
.tav-svg .lamp { fill: #F2C14E; stroke: var(--t-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tav-svg .luce { fill: #F2C14E; opacity: .16; }
.tav-svg .demo { fill: #F2C14E; stroke: #A87A12; stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.tav-svg .nuovo { fill: var(--accent); }

/* Domande */
.faq { border-top: 1px solid var(--line); margin-top: 1.2em; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 36px 16px 0; position: relative; font: 600 var(--t-md)/1.4 var(--f-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: linear-gradient(var(--ink-soft), var(--ink-soft)) center / 12px 1.5px no-repeat, linear-gradient(var(--ink-soft), var(--ink-soft)) center / 1.5px 12px no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--ink-soft); font-size: var(--t-sm); margin: 0; }

/* Invito all'app */
.cta { margin-top: 2.4em !important; border-radius: 10px; background: var(--bezel); color: var(--bezel-ink); padding: clamp(20px, 3.5vw, 32px); display: grid; gap: 14px; }
.cta .k { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: #E8775D; }
.cta h2, .cta .h { font-family: var(--f-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 700; font-stretch: 106%; line-height: 1.1; letter-spacing: -.015em; margin: 0; }
.cta h2::before { content: none; }
.cta p { color: color-mix(in srgb, var(--bezel-ink) 76%, transparent); font-size: var(--t-sm); max-width: 36em; margin: 0; }
.cta .row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.cta .btn-primary { background: #E8775D; color: #16100D; }
.cta .btn-ghost { background: transparent; color: var(--bezel-ink); border-color: color-mix(in srgb, var(--bezel-ink) 30%, transparent); }

/* Altre guide */
.more { border-top: 1px solid var(--line); padding-block: clamp(40px, 6vw, 72px); }
.more h2 { font-size: var(--t-h2); font-weight: 700; font-stretch: 106%; letter-spacing: -.018em; margin-top: 14px; margin-bottom: 24px; }
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 680px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--sheet); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--ink-soft); transform: translateY(-2px); }
.card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border-bottom: 1px solid var(--line); background: var(--paper); }
.card .c-body { padding: 14px 16px 18px; display: grid; gap: 6px; align-content: start; }
.card .c-k { font: 500 var(--t-xs)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.card h2, .card h3 { font-size: var(--t-h3); font-weight: 650; font-stretch: 104%; line-height: 1.2; letter-spacing: -.01em; }
.card p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; }

/* Indice delle guide */
.gruppo + .gruppo { margin-top: clamp(40px, 6vw, 64px); }
.gruppo > .quota { margin-bottom: 18px; }

/* ---------- Cartiglio ---------- */
.foot { padding-block: 32px 48px; border-top: 1px solid var(--line); }
.cartiglio { display: grid; grid-template-columns: 1.3fr 2.4fr 1.6fr; border: 1.5px solid var(--ink); border-radius: 2px; }
.cartiglio > div { padding: 12px 14px; border-left: 1px solid var(--ink); display: grid; gap: 4px; align-content: start; min-width: 0; }
.cartiglio > div:first-child { border-left: 0; align-content: center; }
.cartiglio .k { font: 500 .6875rem/1.2 var(--f-mono); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .09em; }
.cartiglio .v { font-size: var(--t-sm); font-weight: 500; }
.cartiglio a.v { text-decoration: none; }
.cartiglio a.v:hover { text-decoration: underline; }
.cartiglio .logo { height: 22px; }
@media (max-width: 760px) {
  .cartiglio { grid-template-columns: minmax(0, 1fr); }
  .cartiglio > div { border-left: 0; border-top: 1px solid var(--ink); }
  .cartiglio > div:first-child { border-top: 0; }
}
.foot small { display: block; margin-top: 16px; font-size: .8125rem; color: var(--ink-soft); line-height: 1.6; max-width: 70em; }