@font-face { font-family: "Inter Tight"; src: url("inter-tight.77fefe8ca1.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("jetbrains-mono.18be452724.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --notte: #1A2332;
  --notte-fonda: #121925;
  --blu: #1670A8;
  --blu-chiaro: #3498DB;
  --verde: #1F8A4C;
  --verde-chiaro: #27AE60;
  --chiaro: #F8F9FB;
  --bianco: #FFFFFF;
  --tenue: rgba(248, 249, 251, 0.72);
  --tenue-2: rgba(248, 249, 251, 0.56);
  --riga: rgba(248, 249, 251, 0.14);
  --lato: 48px;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Inter Tight", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  background: var(--notte);
  color: var(--chiaro);
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-text-size-adjust: 100%;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blu-chiaro); outline-offset: 3px; border-radius: 6px; }

.testata {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: 96px;
  padding: 0 var(--lato);
  display: flex;
  align-items: center;
  gap: 28px;
}

.testata::before {
  content: "";
  position: absolute;
  inset: 0 0 -60px 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 25, 37, 0.72) 0%, rgba(18, 25, 37, 0.38) 55%, rgba(18, 25, 37, 0) 100%);
}

.marchio { display: flex; align-items: center; gap: 14px; flex: none; }
.marchio-quadro { width: 52px; height: 52px; display: block; flex: none; border-radius: 23.3%; box-shadow: 0 6px 24px rgba(31, 138, 76, 0.22), 0 0 0 1px rgba(248, 249, 251, 0.08); }
.marchio-nodo { animation: marchio-nodo 3.6s linear infinite; animation-delay: calc(var(--n) * 0.6s); }
@keyframes marchio-nodo { 0% { fill: #FFFFFF; } 8.3% { fill: #3FB873; } 16.7%, 100% { fill: #FFFFFF; } }
.marchio-alone { transform-box: fill-box; transform-origin: center; animation: marchio-alone 3.6s ease-in-out infinite; }
@keyframes marchio-alone { 0%, 100% { transform: scale(0.78); stroke-opacity: 0.7; } 50% { transform: scale(1.22); stroke-opacity: 0; } }
.marchio-piede img { display: block; height: 60px; width: auto; }
.marchio-nome { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; white-space: nowrap; }

.menu { margin-left: auto; }
.menu-voci { display: flex; align-items: center; gap: 4px; }
.menu-voce {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 450;
  color: var(--tenue);
  transition: color 0.25s ease, background-color 0.25s ease;
}
.menu-voce:hover, .menu-gruppo:hover > .menu-voce, .menu-gruppo:focus-within > .menu-voce { color: var(--bianco); background: rgba(248, 249, 251, 0.07); }
.menu-apri-gruppo::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.menu-gruppo { position: relative; }
.menu-tendina {
  position: absolute;
  top: calc(100% + 10px);
  left: -6px;
  min-width: 230px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(20, 28, 41, 0.9);
  border: 1px solid var(--riga);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(5, 10, 18, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.menu-tendina::before { content: ""; position: absolute; inset: -12px 0 auto 0; height: 12px; }
.menu-gruppo:hover .menu-tendina, .menu-gruppo:focus-within .menu-tendina, .menu-gruppo.aperto .menu-tendina {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.menu-tendina a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 15px; color: var(--tenue); }
.menu-tendina a:hover { color: var(--bianco); background: rgba(248, 249, 251, 0.07); }

.pillola {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: var(--chiaro);
  color: var(--notte);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.pillola:hover { background: var(--bianco); transform: translateY(-1px); }
.pillola-punto { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--blu-chiaro), var(--verde-chiaro)); }

.apri-menu { display: none; }

:root {
  --ritmo: clamp(72px, 6vw, 118px);
  --colonne: clamp(16px, 2.5vw, 48px);
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --azzurro: #8CC8F0;
}

@media (max-width: 1180px) {
  .menu-voce { padding: 0 10px; font-size: 14px; }
  .testata { gap: 16px; }
}

@media (max-width: 1000px) {
  :root { --lato: 16px; }
  body { font-size: 16px; }
  .testata { height: 64px; gap: 10px; }
  .marchio { gap: 10px; }
  .marchio-quadro { width: 40px; height: 40px; }
  .marchio-piede img { height: 46px; }
  .marchio-nome { font-size: 14.5px; }
  .pillola { margin-left: auto; height: 38px; padding: 0 14px 0 12px; gap: 8px; font-size: 13.5px; }
  .apri-menu {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    background: rgba(248, 249, 251, 0.1);
    border: 1px solid var(--riga);
  }
  .apri-menu span { display: block; width: 16px; height: 1.5px; background: var(--chiaro); border-radius: 2px; transition: transform 0.35s ease; }
  .menu-aperto .apri-menu span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-aperto .apri-menu span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  .menu {
    position: fixed;
    inset: 0;
    z-index: -1;
    margin: 0;
    padding: 96px 24px 40px;
    background: var(--notte);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  .menu-aperto .menu { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
  .menu-voci { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-voci > li { border-bottom: 1px solid var(--riga); }
  .menu-voce { height: auto; padding: 16px 0; border-radius: 0; font-size: 28px; font-weight: 500; letter-spacing: -0.02em; color: var(--chiaro); background: none; }
  .menu-voce:hover, .menu-gruppo:hover > .menu-voce, .menu-gruppo:focus-within > .menu-voce { background: none; }
  .menu-apri-gruppo { width: 100%; justify-content: space-between; }
  .menu-apri-gruppo::after { width: 9px; height: 9px; margin-right: 6px; }
  .menu-gruppo:has(a[aria-current="page"]) > .menu-apri-gruppo { justify-content: flex-start; }
  .menu-gruppo:has(a[aria-current="page"]) > .menu-apri-gruppo::after { margin-left: auto; }
  .menu-gruppo.aperto .menu-apri-gruppo::after { transform: translateY(3px) rotate(-135deg); }
  .menu-tendina, .menu-gruppo:hover .menu-tendina, .menu-gruppo:focus-within .menu-tendina {
    position: static;
    min-width: 0;
    padding: 0 0 14px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .menu-tendina::before { display: none; }
  .menu-gruppo.aperto .menu-tendina { display: block; }
  .menu-tendina a { padding: 9px 0; font-size: 18px; color: var(--tenue); }
  .menu-tendina a:hover { background: none; }

}

.faq-lato { grid-column: 1 / span 5; }
.faq-lato h2 { margin-top: 0; }
.forma-faq { width: 100%; aspect-ratio: 4 / 3; margin-top: 36px; }
.faq-elenco { grid-column: 7 / span 6; border-bottom: 1px solid var(--riga); }
.faq-voce { border-top: 1px solid var(--riga); }
.faq-voce summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 32px 64px 32px 0;
  font-size: clamp(20px, 1.5vw, 28px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.018em;
  transition: color 0.3s ease;
}
.faq-voce summary::-webkit-details-marker { display: none; }
.faq-voce summary::before, .faq-voce summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 20px; height: 1.6px; background: currentColor; transition: transform 0.5s var(--curva); }
.faq-voce summary::after { transform: rotate(90deg); }
.faq-voce[open] summary::after { transform: rotate(0deg); }
.faq-voce summary:hover { color: var(--bianco); }
.faq-risposta p { padding: 0 64px 34px 0; font-size: 18px; line-height: 1.68; color: var(--tenue); max-width: 62ch; }

.modulo { z-index: 2; margin-top: -48px; border-radius: 48px 48px 0 0; background: var(--notte-fonda); }
.modulo .griglia { align-items: start; }
.modulo-testa { grid-column: 1 / span 5; }
.modulo-testa h2 { margin-top: 0; font-size: clamp(44px, 4.6vw, 88px); }
.modulo-contatti { margin-top: 56px; display: grid; gap: 14px; }
.modulo-contatti a { font-size: clamp(21px, 1.7vw, 30px); letter-spacing: -0.018em; color: var(--chiaro); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 4px; transition: background-size 0.5s var(--curva); }
.modulo-contatti a:hover { background-size: 0 1px; background-position: 100% 100%; }
.modulo-form { grid-column: 7 / span 6; }
.campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
.campo-pieno { grid-column: 1 / -1; }
.campo label { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); }
.campo label span { color: #6FCF97; }
.campo label strong { color: var(--chiaro); font-weight: 500; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 10px 0 14px;
  border: 0;
  border-bottom: 1px solid rgba(248, 249, 251, 0.26);
  border-radius: 0;
  background: transparent;
  color: var(--chiaro);
  font: inherit;
  font-size: 19px;
  outline: none;
  transition: border-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.campo select { cursor: pointer; background: linear-gradient(45deg, transparent 50%, var(--tenue) 50%) calc(100% - 12px) 52% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--tenue) 50%) calc(100% - 6px) 52% / 6px 6px no-repeat; }
.campo select option { background: var(--notte); color: var(--chiaro); }
.campo textarea { resize: vertical; min-height: 128px; line-height: 1.5; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-bottom-color: var(--blu-chiaro); }
.campo input[type="number"]::-webkit-inner-spin-button, .campo input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.campo input[type="number"] { -moz-appearance: textfield; }
.consenso { margin-top: 36px; }
.consenso label { display: flex; align-items: flex-start; gap: 14px; font-size: 15px; line-height: 1.5; color: var(--tenue); cursor: pointer; }
.consenso input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blu-chiaro); }
.consenso a { color: var(--chiaro); text-decoration: underline; text-underline-offset: 3px; }
.trappola { display: none; }
.modulo-invia { margin-top: 40px; }
.modulo-invia:disabled { opacity: 0.6; cursor: progress; }
.modulo-esito { display: none; margin-top: 22px; padding: 16px 20px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.modulo-esito.errore { display: block; background: rgba(245, 185, 113, 0.1); border: 1px solid rgba(245, 185, 113, 0.4); color: #F5CF9E; }
.modulo-esito.successo { display: block; background: rgba(39, 174, 96, 0.12); border: 1px solid rgba(111, 207, 151, 0.45); color: #A9E8C3; }

.piede { position: relative; z-index: 2; padding: 112px var(--lato) 48px; background: var(--notte-fonda); border-top: 1px solid var(--riga); }
.piede-griglia { row-gap: 0; }
.piede-marchio { grid-column: 1 / span 5; }
.piede-motto { margin-top: 28px; font-size: 19px; line-height: 1.55; color: var(--tenue); max-width: 38ch; }
.piede-menu { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--colonne); }
.piede-menu ul { display: grid; gap: 14px; align-content: start; }
.piede-menu a { font-size: 17px; color: var(--tenue); transition: color 0.3s ease; }
.piede-menu a:hover { color: var(--bianco); }
.piede-fondo { grid-column: 1 / -1; margin-top: 104px; padding-top: 28px; border-top: 1px solid var(--riga); display: flex; flex-wrap: wrap; gap: 14px 40px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--tenue-2); }
.piede-fondo a:hover { color: var(--bianco); }
.piede-fondo a[href="https://meraia.it/"] { width: 100%; text-align: center; margin-top: 18px; }
.testata, .testata::before, .marchio-nome, .menu-voce, .pillola, .apri-menu span { transition-property: color, background-color, background, opacity, transform; transition-duration: 0.4s; }
.testata.sul-chiaro::before { background: linear-gradient(180deg, rgba(248, 249, 251, 0.92) 0%, rgba(248, 249, 251, 0.5) 55%, rgba(248, 249, 251, 0) 100%); }
.testata.sul-chiaro .marchio-nome { color: var(--notte); }
.testata.sul-chiaro .menu-voce { color: rgba(26, 35, 50, 0.72); }
.testata.sul-chiaro .menu-voce:hover, .testata.sul-chiaro .menu-gruppo:hover > .menu-voce { color: var(--notte); background: rgba(26, 35, 50, 0.06); }
.testata.sul-chiaro .pillola { background: var(--notte); color: var(--chiaro); }
.testata.sul-chiaro .apri-menu { background: rgba(26, 35, 50, 0.08); border-color: rgba(26, 35, 50, 0.16); }
.testata.sul-chiaro .apri-menu span { background: var(--notte); }
.menu-aperto .testata.sul-chiaro .marchio-nome, .testata.sul-chiaro.menu-aperto .marchio-nome { color: var(--chiaro); }
.testata.sul-chiaro.menu-aperto .apri-menu span { background: var(--chiaro); }

.testata::before { transition: opacity 0.4s ease, background 0.4s ease, inset 0.4s ease; }
.testata.piena::before { inset: 0; background: rgba(18, 25, 37, 0.84); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 1px 0 rgba(248, 249, 251, 0.08); }
.testata.piena.sul-chiaro::before { background: rgba(248, 249, 251, 0.88); box-shadow: 0 1px 0 rgba(26, 35, 50, 0.08); }
.js [data-rivela] { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 1.1s var(--curva) var(--ritardo, 0s), transform 1.3s var(--curva) var(--ritardo, 0s); }
.js [data-rivela].visto { opacity: 1; transform: none; }
.js [data-parole] .pm { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.04em 0.12em; margin: 0 -0.04em -0.12em; }
.js [data-parole] .pi { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1.2s var(--curva) calc(var(--i, 0) * 0.055s); }
.js [data-parole].visto .pi { transform: none; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bottone {
  display: inline-flex;
  align-items: center;
  height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--blu);
  color: var(--bianco);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 10px 36px rgba(22, 112, 168, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.bottone:hover { background: #1a80bf; transform: translateY(-1px); box-shadow: 0 14px 44px rgba(22, 112, 168, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.collegamento {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  color: var(--chiaro);
  padding: 6px 0;
}
.collegamento::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transform-origin: left;
  transition: opacity 0.3s ease;
}
.collegamento:hover::after { opacity: 1; }


.fondale { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at var(--fx, 50%) var(--fy, 30%), #1d2738 0%, var(--notte) 48%, var(--notte-fonda) 100%); }
.costellazione { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; height: 100lvh; display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; }
.costellazione.pronta { opacity: 1; }
.pagina { position: relative; z-index: 1; }
.griglia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colonne); }
.etichetta { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tenue); }
.etichetta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--blu-chiaro), var(--verde-chiaro)); }
.etichetta-piccola { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--azzurro); }
.menu-voce[aria-current="page"], .menu-tendina a[aria-current="page"], .menu-gruppo:has(a[aria-current="page"]) > .menu-voce { color: var(--bianco); }
.menu-voce[aria-current="page"]::before, .menu-gruppo:has(a[aria-current="page"]) > .menu-voce::before, .menu-tendina a[aria-current="page"]::before { content: ""; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--verde-chiaro); box-shadow: 0 0 10px rgba(39, 174, 96, 0.8); }
.menu-tendina a[aria-current="page"]::before { display: inline-block; vertical-align: 0.15em; }

.apertura-interna { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: var(--colonne); min-height: min(100svh, 980px); padding: 132px var(--lato) 72px; }
.apertura-testo { position: relative; z-index: 2; min-width: 0; }
.briciole { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tenue-2); }
.briciole::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--blu-chiaro), var(--verde-chiaro)); box-shadow: 0 0 12px rgba(39, 174, 96, 0.6); }
.briciole a { color: var(--tenue); transition: color 0.3s ease; }
.briciole a:hover { color: var(--bianco); }
.apertura-testo .etichetta { margin-top: 18px; }
.titolo-pagina { margin: 22px 0 0; font-size: clamp(42px, 4.6vw, 92px); font-weight: 500; line-height: 1; letter-spacing: -0.045em; text-wrap: balance; max-width: 16ch; }
.in-breve { position: relative; margin-top: 36px; padding: 26px 28px 26px; border-radius: 20px; background: linear-gradient(180deg, rgba(29, 39, 56, 0.78), rgba(18, 25, 37, 0.66)); border: 1px solid var(--riga); box-shadow: 0 24px 70px rgba(5, 10, 18, 0.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
.in-breve::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--blu-chiaro), var(--verde-chiaro), rgba(39, 174, 96, 0)); transform-origin: left; transform: scaleX(var(--riga-in, 1)); transition: transform 1.4s var(--curva); }
.js .in-breve:not(.visto)::before { --riga-in: 0; }
.in-breve-etichetta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #6FCF97; }
.in-breve-etichetta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verde-chiaro); box-shadow: 0 0 10px rgba(39, 174, 96, 0.9); animation: batte 2.4s ease-in-out infinite; }
@keyframes batte { 50% { opacity: 0.35; } }
.in-breve p { font-size: clamp(16.5px, 1.05vw, 19px); line-height: 1.68; color: var(--tenue); text-wrap: pretty; }
.in-breve p + p { margin-top: 0.9em; }
.in-breve strong { color: var(--chiaro); font-weight: 600; }
.in-breve a, .capitolo-corpo a:not(.bottone):not(.collegamento):not(.servizio-vai):not(.carta-vai), .modulo a, .nota a { color: var(--chiaro); background: linear-gradient(90deg, var(--blu-chiaro), var(--verde-chiaro)) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; transition: background-size 0.4s var(--curva), color 0.3s ease; }
.in-breve a:hover, .capitolo-corpo a:not(.bottone):not(.collegamento):not(.servizio-vai):not(.carta-vai):hover { color: var(--bianco); background-size: 100% 100%; background-image: linear-gradient(90deg, rgba(52, 152, 219, 0.28), rgba(39, 174, 96, 0.28)); }

.protagonista { position: relative; z-index: 1; min-width: 0; aspect-ratio: 1 / 1; width: 100%; max-width: 640px; justify-self: center; perspective: 1100px; }
.protagonista .palco-attore { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(var(--my, 0) * -9deg)) rotateY(calc(var(--mx, 0) * 12deg)); transition: transform 0.9s var(--curva); }
.anello { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.anello text { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; fill: rgba(248, 249, 251, 0.5); }
.anello .anello-giro { transform-origin: 50% 50%; transform-box: view-box; animation: gira var(--durata, 80s) linear infinite; }
.anello .anello-giro.contro { animation-direction: reverse; }
.anello .anello-traccia { fill: none; stroke: rgba(248, 249, 251, 0.08); stroke-width: 1; }
.anello .punto-luce { fill: var(--verde-chiaro); filter: drop-shadow(0 0 6px rgba(39, 174, 96, 0.9)); }
@keyframes gira { to { transform: rotate(360deg); } }

.grafo-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.grafo-svg .arco { stroke: rgba(140, 200, 240, 0.18); stroke-width: 1; fill: none; transition: stroke 0.4s ease, stroke-width 0.4s ease, opacity 0.6s ease; }
.grafo-svg .arco.acceso { stroke: rgba(111, 207, 151, 0.85); stroke-width: 1.6; }
.grafo-svg .arco.disegna { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--curva), stroke 0.4s ease; }
.grafo-svg .arco.disegna.fatto { stroke-dashoffset: 0; }
.grafo-svg .nodo { cursor: default; transition: opacity 0.5s ease; }
.grafo-svg .nodo circle { fill: #233148; stroke: rgba(140, 200, 240, 0.45); stroke-width: 1.2; transition: fill 0.4s ease, stroke 0.4s ease, r 0.4s var(--curva); }
.grafo-svg .nodo text { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; fill: rgba(248, 249, 251, 0.72); transition: fill 0.3s ease; pointer-events: none; }
.grafo-svg .nodo.acceso circle { fill: var(--verde-chiaro); stroke: #A6F0C2; filter: drop-shadow(0 0 8px rgba(39, 174, 96, 0.85)); }
.grafo-svg .nodo.acceso text { fill: var(--bianco); }
.grafo-svg .nodo.vicino circle { fill: var(--blu-chiaro); stroke: #CFE9FA; }
.grafo-svg .nodo.vicino text { fill: var(--bianco); }
.grafo-svg .nodo.spento { opacity: 0.28; }
.grafo-svg .impulso { fill: #A6F0C2; filter: drop-shadow(0 0 6px rgba(39, 174, 96, 1)); }
.js .grafo-svg .nodo { opacity: 0; }
.js .grafo-svg .nodo.dentro { opacity: 1; }
.js .grafo-svg .nodo.dentro.spento { opacity: 0.28; }

.finestra { position: absolute; border-radius: 18px; background: linear-gradient(180deg, rgba(31, 42, 60, 0.92), rgba(20, 28, 41, 0.92)); border: 1px solid var(--riga); box-shadow: 0 30px 80px rgba(4, 8, 14, 0.5); overflow: hidden; font-family: var(--mono); font-size: 12px; color: var(--tenue); transform: translateZ(var(--z, 0px)); transition: border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.6s ease, transform 0.9s var(--curva); }
.finestra.vicino { border-color: rgba(111, 207, 151, 0.6); box-shadow: 0 30px 90px rgba(4, 8, 14, 0.55), 0 0 40px rgba(39, 174, 96, 0.25); }
.finestra-testa { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--riga); letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; color: var(--tenue-2); }
.finestra-testa i { width: 7px; height: 7px; border-radius: 50%; background: rgba(248, 249, 251, 0.18); }
.finestra-testa i:first-child { background: var(--verde-chiaro); box-shadow: 0 0 8px rgba(39, 174, 96, 0.8); }
.finestra-testa span { margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finestra-corpo { padding: 14px; display: grid; gap: 9px; }
.barra { display: block; height: 8px; border-radius: 4px; background: rgba(248, 249, 251, 0.1); width: var(--w, 80%); transform-origin: left; transform: scaleX(0); transition: transform 0.9s var(--curva) calc(var(--i, 0) * 0.08s), background-color 0.5s ease; }
.vivo-in .barra { transform: none; }
.barra.marca { background: linear-gradient(90deg, var(--verde-chiaro), #6FCF97); box-shadow: 0 0 14px rgba(39, 174, 96, 0.5); }
.barra.rivale { background: rgba(245, 185, 113, 0.65); }
.barra.vuoto { background: none; border: 1px dashed rgba(248, 249, 251, 0.28); animation: batte 1.8s ease-in-out infinite; }
.barra.link { background: rgba(52, 152, 219, 0.55); height: 7px; }
.chip { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 6px; border-radius: 6px; background: rgba(52, 152, 219, 0.2); border: 1px solid rgba(140, 200, 240, 0.4); color: #CFE9FA; font-size: 10.5px; opacity: 0; transform: scale(0.6); transition: opacity 0.4s ease, transform 0.5s var(--curva); }
.vivo-in .chip { opacity: 1; transform: none; }
.scrive .lettera { visibility: hidden; }
.scrive .lettera.vista { visibility: visible; }
.cursore { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 2px; vertical-align: -0.16em; background: var(--verde-chiaro); animation: cursore 0.9s steps(1) infinite; }
@keyframes cursore { 50% { opacity: 0; } }
.terminale-fatto .cursore { display: none; }
[data-terminale].scrive .tl { visibility: hidden; }
[data-terminale].scrive .tl.vista { visibility: visible; }
[data-terminale] .cursore { width: 0.42em; height: 0.82em; vertical-align: -0.04em; }

.capitolo-interno { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colonne); padding: clamp(56px, 5vw, 96px) var(--lato); border-top: 1px solid var(--riga); counter-increment: capitolo; }
.pagina { counter-reset: capitolo; }
.capitolo-testa { grid-column: 1 / span 4; align-self: start; position: sticky; top: 120px; }
.capitolo-testa::before { content: counter(capitolo, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 13px; letter-spacing: 0.2em; color: #6FCF97; }
.capitolo-testa h2 { margin: 14px 0 0; font-size: clamp(30px, 2.6vw, 52px); font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.capitolo-mappa { margin-top: 28px; display: grid; gap: 2px; border-left: 1px solid var(--riga); }
.capitolo-mappa a { position: relative; display: block; padding: 7px 0 7px 18px; font-family: var(--mono); font-size: 12px; line-height: 1.45; letter-spacing: 0.02em; color: var(--tenue-2); transition: color 0.3s ease; }
.capitolo-mappa a::before { content: ""; position: absolute; left: -4px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: #2c3a52; border: 1px solid rgba(140, 200, 240, 0.4); transition: background 0.3s ease, box-shadow 0.3s ease; }
.capitolo-mappa a.acceso { color: var(--chiaro); }
.capitolo-mappa a.acceso::before { background: var(--verde-chiaro); border-color: #A6F0C2; box-shadow: 0 0 10px rgba(39, 174, 96, 0.9); }
.capitolo-avanza { position: absolute; left: -1px; top: 0; width: 1px; height: 100%; background: linear-gradient(180deg, var(--blu-chiaro), var(--verde-chiaro)); transform-origin: top; transform: scaleY(var(--avanza, 0)); }
.capitolo-mappa { position: relative; }
.capitolo-corpo { grid-column: 5 / span 8; min-width: 0; display: grid; gap: 22px; align-content: start; }
.senza-testa { counter-increment: none; }
.senza-testa .capitolo-corpo { grid-column: 3 / span 8; }
.capitolo-corpo > p, .capitolo-corpo > ul, .capitolo-corpo > ol { font-size: clamp(17px, 1.06vw, 19.5px); line-height: 1.74; color: var(--tenue); max-width: 68ch; text-wrap: pretty; }
.capitolo-corpo > ul, .capitolo-corpo > ol, .fascia-voci, .faq-risposta ul, .faq-risposta ol { padding: 0; display: grid; gap: 10px; }
.capitolo-corpo > ul > li, .faq-risposta ul > li { position: relative; padding-left: 26px; }
.capitolo-corpo > ul > li::before, .faq-risposta ul > li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(140, 200, 240, 0.6); background: rgba(52, 152, 219, 0.2); }
.capitolo-corpo > ol { counter-reset: voce; }
.capitolo-corpo > ol > li { position: relative; padding-left: 40px; counter-increment: voce; }
.capitolo-corpo > ol > li::before { content: counter(voce, decimal-leading-zero); position: absolute; left: 0; top: 0.12em; font-family: var(--mono); font-size: 13px; color: #6FCF97; }
.capitolo-corpo h3 { margin: 22px 0 0; font-size: clamp(22px, 1.6vw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; scroll-margin-top: 110px; }
.capitolo-corpo h4 { margin: 0; font-size: 18px; font-weight: 600; }
.capitolo-corpo strong, .faq-risposta strong { color: var(--chiaro); font-weight: 600; }
.capitolo-corpo > p strong, .capitolo-corpo > ul strong { background: linear-gradient(90deg, rgba(52, 152, 219, 0.3), rgba(39, 174, 96, 0.3)) 0 88% / var(--evidenza, 0%) 34% no-repeat; transition: background-size 1.1s var(--curva) 0.15s; }
.capitolo-corpo .evidenziato strong { --evidenza: 100%; }
code { font-family: var(--mono); font-size: 0.86em; padding: 1px 6px; border-radius: 6px; background: rgba(140, 200, 240, 0.1); border: 1px solid rgba(140, 200, 240, 0.18); color: #CFE9FA; }
.capitolo-corpo em { font-style: italic; color: var(--chiaro); }

.sintesi { position: relative; padding: 28px 30px 28px 34px; border-radius: 18px; background: linear-gradient(120deg, rgba(22, 112, 168, 0.16), rgba(31, 138, 76, 0.12)); border: 1px solid rgba(140, 200, 240, 0.2); font-size: clamp(18px, 1.25vw, 23px); line-height: 1.55; color: var(--tenue); overflow: hidden; }
.sintesi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--blu-chiaro), var(--verde-chiaro)); transform-origin: top; transform: scaleY(var(--riga-in, 1)); transition: transform 1.2s var(--curva); }
.js .sintesi:not(.visto)::before { --riga-in: 0; }
.sintesi::after { content: ""; position: absolute; inset: 0; background: radial-gradient(360px circle at var(--px, -400px) var(--py, -400px), rgba(111, 207, 151, 0.14), transparent 70%); pointer-events: none; }
.sintesi strong { color: var(--chiaro); }
.sintesi p { font-size: inherit; line-height: inherit; }
.nota { padding: 22px 24px; border-radius: 16px; border: 1px dashed rgba(140, 200, 240, 0.28); background: rgba(18, 25, 37, 0.5); font-size: 15.5px; line-height: 1.65; color: var(--tenue); }
.nota strong { color: var(--chiaro); }
.in-breve:not(.in-breve-apertura) { margin-top: 6px; }

.numeri, .indicatori { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.numero, .indicatore, .servizio, .fascia, .voce, .carta, .termine, .passo, .fase { --px: 50%; --py: 50%; position: relative; border-radius: 18px; background: linear-gradient(180deg, rgba(29, 39, 56, 0.7), rgba(18, 25, 37, 0.6)); border: 1px solid var(--riga); transition: border-color 0.4s ease, transform 0.7s var(--curva), box-shadow 0.5s ease; }
.numero::after, .indicatore::after, .servizio::after, .fascia::after, .voce::after, .carta::after, .termine::after, .passo::after, .fase::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(420px circle at var(--px) var(--py), rgba(140, 200, 240, 0.12), transparent 65%); transition: opacity 0.4s ease; }
.sopra::after { opacity: 1; }
.sopra { border-color: rgba(140, 200, 240, 0.34); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); }
.numero { padding: 24px 22px; }
.numero-cifra { font-size: clamp(40px, 3.4vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; background: linear-gradient(90deg, var(--chiaro), #A6F0C2); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.numero-titolo { margin-top: 14px !important; font-size: 17px; }
.numero-testo { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--tenue-2); }
.indicatore { padding: 22px; }
.indicatore-nome { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: #6FCF97; }
.indicatore-testo { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--tenue); }

.passi { display: grid; gap: 12px; position: relative; }
.passo { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 22px 24px 22px 18px; }
.passo-n { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 15px; color: var(--tenue); border: 1px solid rgba(140, 200, 240, 0.35); background: #1d2738; transition: background 0.5s ease, color 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease; }
.passo.acceso .passo-n { background: var(--verde-chiaro); color: var(--notte); border-color: #A6F0C2; box-shadow: 0 0 22px rgba(39, 174, 96, 0.7); }
.passo.acceso { border-color: rgba(111, 207, 151, 0.42); }
.passo-titolo { font-size: clamp(19px, 1.35vw, 24px); font-weight: 500; letter-spacing: -0.018em; line-height: 1.25; }
.passo-testo { margin-top: 8px; font-size: 16px; line-height: 1.66; color: var(--tenue); }
.fasi { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.fase { padding: 22px; }
.fase::before { content: ""; display: block; height: 2px; margin-bottom: 18px; border-radius: 2px; background: linear-gradient(90deg, var(--blu-chiaro), var(--verde-chiaro)); transform-origin: left; transform: scaleX(0); transition: transform 1.1s var(--curva) calc(var(--i, 0) * 0.18s); }
.fase.acceso::before, .fasi.visto .fase::before { transform: none; }
.fase-quando { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #6FCF97; }
.fase-titolo { margin-top: 10px; font-size: 19px; font-weight: 500; line-height: 1.25; }
.fase-testo { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--tenue); }

.servizi, .listino, .voci, .stampa { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.servizio { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.servizio-numero { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; color: #6FCF97; }
.servizio-titolo { margin: 0 !important; font-size: 20px !important; }
.servizio-testo { font-size: 15px; line-height: 1.62; color: var(--tenue); flex: 1; }
.servizio-vai, .carta-vai { align-self: flex-start; font-size: 15px; font-weight: 500; color: var(--chiaro); padding-bottom: 2px; border-bottom: 1px solid rgba(140, 200, 240, 0.4); transition: border-color 0.3s ease, color 0.3s ease; }
.servizio-vai:hover, .carta-vai:hover { color: var(--bianco); border-color: var(--verde-chiaro); }
.fascia { padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.fascia.in-evidenza { border-color: rgba(111, 207, 151, 0.5); background: linear-gradient(180deg, rgba(31, 138, 76, 0.18), rgba(18, 25, 37, 0.7)); box-shadow: 0 0 60px rgba(39, 174, 96, 0.14); }
.fascia.in-evidenza::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--giro, 0deg), transparent 0 70%, #6FCF97 85%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: giro-bordo 5s linear infinite; pointer-events: none; }
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes giro-bordo { to { --giro: 360deg; } }
.fascia-nome { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #6FCF97; }
.fascia-prezzo { font-size: clamp(28px, 2.2vw, 40px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.fascia-prezzo small { font-size: 0.45em; letter-spacing: 0; color: var(--tenue-2); font-weight: 400; }
.fascia-voci { flex: 1; }
.fascia-voci li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.55; color: var(--tenue); opacity: 1; }
.fascia-voci li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 11px; height: 6px; border-left: 1.6px solid #6FCF97; border-bottom: 1.6px solid #6FCF97; transform: rotate(-45deg) scale(var(--spunta, 1)); transition: transform 0.5s var(--curva) calc(var(--i, 0) * 0.07s); }
.js .fascia:not(.visto) .fascia-voci li::before { --spunta: 0; }
.fascia .bottone, .fascia .collegamento { align-self: flex-start; }
.voce { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.voce-testo { font-size: 16px; line-height: 1.66; color: var(--tenue); flex: 1; }
.voce-testo::before { content: "\201C"; display: block; height: 0.5em; font-size: 46px; line-height: 1; color: #6FCF97; }
.voce-autore { display: flex; align-items: center; gap: 12px; }
.voce-sigla { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--chiaro); background: conic-gradient(from 200deg, var(--blu-chiaro), var(--verde-chiaro), var(--blu-chiaro)); box-shadow: inset 0 0 0 3px #1a2332; }
.voce-nome { font-weight: 600; font-size: 15px; }
.voce-ruolo { font-size: 13px; color: var(--tenue-2); line-height: 1.4; }
.carta { overflow: hidden; display: flex; flex-direction: column; }
.carta-foto { aspect-ratio: 16 / 10; overflow: hidden; background: #1d2738; }
.carta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04) translate(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -8px)); transition: transform 0.9s var(--curva); }
.carta-corpo { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.carta-titolo { margin: 0 !important; font-size: 18px !important; }
.carta-testo { font-size: 14.5px; line-height: 1.55; color: var(--tenue); flex: 1; }
.glossario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.termine { padding: 22px 22px 24px; scroll-margin-top: 110px; }
.termine-nome { margin: 0 !important; font-size: 19px !important; }
.termine-testo { margin-top: 10px; font-size: 15px; line-height: 1.62; color: var(--tenue); }
.termine.acceso { border-color: rgba(111, 207, 151, 0.6); box-shadow: 0 0 40px rgba(39, 174, 96, 0.16); }
.termine .rimando { color: var(--chiaro); background: linear-gradient(90deg, rgba(52, 152, 219, 0.28), rgba(39, 174, 96, 0.28)) 0 90% / 100% 30% no-repeat; }
.azioni { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; margin-top: 8px; }
.capitolo-corpo > .bottone, .capitolo-corpo > p > .bottone { justify-self: start; }

.tabella-involucro { margin-top: 6px; }
.tabella { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tabella caption { caption-side: bottom; padding-top: 18px; text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--tenue-2); }
.tabella thead th { padding: 0 16px 20px; text-align: left; font-size: clamp(18px, 1.4vw, 26px); font-weight: 500; letter-spacing: -0.02em; vertical-align: bottom; }
.tabella thead th:first-child { width: 19%; padding-left: 0; font-family: var(--mono); font-size: 11.5px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tenue-2); }
.tabella tbody th { padding: 20px 16px 20px 0; text-align: left; vertical-align: top; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue-2); }
.tabella tbody tr { border-top: 1px solid var(--riga); transition: background-color 0.3s ease; }
.tabella tbody tr:hover { background: rgba(140, 200, 240, 0.04); }
.tabella tbody tr:last-child { border-bottom: 1px solid var(--riga); }
.tabella td { padding: 20px 16px; vertical-align: top; font-size: 15.5px; line-height: 1.55; color: var(--tenue); }
.tabella .colonna-geo { color: var(--chiaro); background: linear-gradient(180deg, rgba(39, 174, 96, 0.09), rgba(52, 152, 219, 0.06)); }
.tabella thead th:last-child { color: var(--chiaro); background: linear-gradient(90deg, var(--blu-chiaro), var(--verde-chiaro)) left 16px bottom 0 / calc(100% - 32px) 2px no-repeat; }

.faq-elenco { border-bottom: 1px solid var(--riga); }
.faq-voce summary { padding: 24px 56px 24px 0; font-size: clamp(18px, 1.3vw, 23px); }
.faq-risposta { padding: 0 56px 26px 0; display: grid; gap: 12px; }
.faq-risposta p { padding: 0; font-size: 16.5px; }
.faq-voce[open] summary { color: var(--bianco); }

.mappa-luogo { display: grid; gap: 16px; }
.mappa-luogo h2 { margin: 0; font-size: clamp(24px, 1.8vw, 32px); font-weight: 500; letter-spacing: -0.02em; }
.mappa-luogo p { font-size: 16.5px; line-height: 1.65; color: var(--tenue); }
.mappa-cornice { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--riga); aspect-ratio: 16 / 8; background: #1d2738; }
.mappa-cornice iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.4) brightness(0.9); }
.mappa-nota { font-size: 13px !important; color: var(--tenue-2) !important; }

.cl-wrap { display: grid; gap: 14px; }
.cl-scorebar { position: sticky; top: 84px; z-index: 3; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 20px; border-radius: 16px; background: rgba(18, 25, 37, 0.92); border: 1px solid rgba(111, 207, 151, 0.4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 50px rgba(4, 8, 14, 0.45); }
.cl-score { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: #A6F0C2; }
.cl-score small { font-size: 14px; color: var(--tenue-2); font-weight: 400; letter-spacing: 0; }
.cl-verdict { flex: 1; min-width: 200px; font-size: 14.5px; line-height: 1.5; color: var(--tenue); }
.cl-reset { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--riga); color: var(--tenue); }
.cl-reset:hover { color: var(--bianco); border-color: rgba(140, 200, 240, 0.5); }
.cl-misura { position: relative; height: 4px; flex-basis: 100%; border-radius: 2px; background: rgba(248, 249, 251, 0.08); overflow: hidden; }
.cl-misura i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--quota, 0)); background: linear-gradient(90deg, var(--blu-chiaro), var(--verde-chiaro)); transition: transform 0.6s var(--curva); }
.cl-block { margin: 0; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--riga); background: rgba(18, 25, 37, 0.5); }
.cl-block legend { padding: 0 8px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6FCF97; }
.cl-block ul { display: grid; gap: 4px; }
.cl-block label { display: flex; gap: 12px; align-items: flex-start; padding: 8px 6px; border-radius: 10px; font-size: 15px; line-height: 1.5; color: var(--tenue); cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; }
.cl-block label:hover { background: rgba(140, 200, 240, 0.06); }
.cl-block input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--verde-chiaro); }
.cl-block li.is-on label { color: var(--chiaro); background: rgba(39, 174, 96, 0.1); }

.modulo { position: relative; z-index: 2; padding: clamp(64px, 6vw, 112px) var(--lato); border-radius: 40px 40px 0 0; background: var(--notte-fonda); border-top: 1px solid var(--riga); }
.modulo .griglia { align-items: start; }
.modulo-testa h2 { margin-top: 0; font-size: clamp(38px, 3.8vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
.modulo-testa p { margin-top: 22px; font-size: clamp(17px, 1.2vw, 21px); line-height: 1.6; color: var(--tenue); max-width: 40ch; }
.campo label { font-family: var(--mono); }
.campo label span { color: #6FCF97; }
.consenso label span { color: var(--tenue); }
.consenso { margin-top: 30px; }
.modulo-invia { margin-top: 32px; }
.campi > .campo-pieno, .modulo-campi > .campo-pieno { margin-top: 0; }
.modulo-campi > .campo { margin-top: 32px; }

.profilo { position: absolute; inset: 0; }
.profilo img { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; transform: translate(-50%, -50%) translateZ(40px); box-shadow: 0 0 0 1px rgba(248, 249, 251, 0.12), 0 30px 80px rgba(4, 8, 14, 0.6), 0 0 80px rgba(52, 152, 219, 0.25); }
.profilo > div { position: absolute; left: 0; right: 0; bottom: 2%; display: grid; justify-items: center; gap: 4px; text-align: center; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--tenue); transform: translateZ(60px); }
.profilo > div p:first-child { font-family: var(--sans); font-size: 18px; letter-spacing: -0.01em; color: var(--chiaro); }
.profilo a { color: #A6F0C2; border-bottom: 1px solid rgba(111, 207, 151, 0.4); }

.risposta-domanda { position: absolute; left: 6%; right: 6%; top: 13%; padding: 14px 18px; border-radius: 14px; background: rgba(248, 249, 251, 0.06); border: 1px solid var(--riga); font-family: var(--mono); font-size: 13px; color: var(--chiaro); transform: translateZ(50px); }
.risposta-corpo { position: absolute; left: 6%; right: 6%; top: 30%; padding: 18px 20px; border-radius: 16px; background: linear-gradient(180deg, rgba(31, 42, 60, 0.9), rgba(20, 28, 41, 0.9)); border: 1px solid rgba(140, 200, 240, 0.25); font-size: 14.5px; line-height: 1.6; color: var(--tenue); transform: translateZ(30px); box-shadow: 0 30px 80px rgba(4, 8, 14, 0.5); }
.risposta-corpo .rw { opacity: 0.08; transition: opacity 0.35s ease, color 0.4s ease; }
.risposta-corpo .rw.vista { opacity: 1; }
.risposta-corpo .rw.forte { color: var(--chiaro); }
.risposta-fonte { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-family: var(--mono); font-size: 11.5px; color: #A6F0C2; opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.6s var(--curva); }
.vivo-in .risposta-fonte.vista { opacity: 1; transform: none; }

.terzetto { position: absolute; inset: 8% 0 8%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: center; }
.terzetto .finestra { position: relative; height: 100%; }
.terzetto .finestra-corpo { gap: 10px; }
.terzetto .finestra.geo { border-color: rgba(111, 207, 151, 0.45); }
.terzetto .riquadro { padding: 10px; border-radius: 10px; border: 1px solid rgba(140, 200, 240, 0.35); background: rgba(52, 152, 219, 0.08); display: grid; gap: 7px; }
.domanda-comune { position: absolute; left: 0; right: 0; top: 0; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--riga); background: rgba(248, 249, 251, 0.05); }
.domanda-comune .barra { --w: 60%; height: 7px; }

@media (max-width: 1180px) {
  .apertura-interna { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
}

@media (max-width: 1000px) {
  .apertura-interna { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 96px 20px 40px; gap: 26px; }
  .titolo-pagina { font-size: clamp(34px, 9.6vw, 52px); max-width: none; margin-top: 16px; }
  .briciole { font-size: 11px; }
  .etichetta { font-size: 11.5px; letter-spacing: 0.18em; }
  .protagonista { order: 2; max-width: 420px; width: 100%; }
  .in-breve { padding: 20px; margin-top: 22px; }
  .in-breve p { font-size: 15.5px; }
  .capitolo-interno { grid-template-columns: minmax(0, 1fr); padding: 52px 20px; }
  .capitolo-testa, .senza-testa .capitolo-corpo, .capitolo-corpo { grid-column: 1 / -1; position: static; }
  .capitolo-testa h2 { font-size: clamp(28px, 8.2vw, 40px); }
  .capitolo-mappa { display: none; }
  .capitolo-corpo { margin-top: 22px; gap: 18px; }
  .capitolo-corpo > p, .capitolo-corpo > ul, .capitolo-corpo > ol { font-size: 16.5px; line-height: 1.7; }
  .glossario { grid-template-columns: minmax(0, 1fr); }
  .numeri, .indicatori { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .numero { padding: 18px 16px; }
  .numero-cifra { font-size: 38px; }
  .passo { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 18px 16px 18px 12px; }
  .passo-n { width: 38px; height: 38px; font-size: 13px; }
  .sintesi { padding: 22px 20px 22px 24px; font-size: 17.5px; }
  .tabella, .tabella tbody, .tabella tr, .tabella td, .tabella tbody th { display: block; width: auto; }
  .tabella thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabella caption { display: block; padding-top: 0; padding-bottom: 14px; }
  .tabella tbody tr { padding: 18px 0 14px; }
  .tabella tbody th { padding: 0 0 10px; font-size: 11.5px; }
  .tabella td { padding: 7px 0; font-size: 15.5px; }
  .tabella td::before { content: attr(data-colonna); display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--tenue-2); }
  .tabella td.colonna-geo { margin-top: 6px; padding: 10px 14px; border-radius: 12px; }
  .tabella td.colonna-geo::before { color: #6FCF97; }
  .faq-voce summary { padding: 20px 44px 20px 0; font-size: 18px; }
  .faq-risposta { padding: 0 0 22px; }
  .faq-risposta p { font-size: 16px; }
  .modulo { padding: 64px 20px; border-radius: 28px 28px 0 0; }
  .modulo .griglia > * { grid-column: 1 / -1; }
  .modulo-form { margin-top: 40px; }
  .campi { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .campo input, .campo select, .campo textarea { font-size: 17px; }
  .piede { padding: 72px 20px 40px; }
  .piede-griglia > * { grid-column: 1 / -1; }
  .piede-menu { margin-top: 48px; }
  .piede-fondo { margin-top: 56px; flex-direction: column; }
  .cl-scorebar { top: 72px; padding: 12px 14px; gap: 10px; }
  .cl-score { font-size: 26px; }
  .cl-verdict { font-size: 13.5px; min-width: 0; flex-basis: 100%; order: 3; }
  .mappa-cornice { aspect-ratio: 4 / 3; }
  .anello text { font-size: 15px; }
  .terzetto { gap: 7px; }
  .finestra { font-size: 10.5px; }
  .finestra-testa { padding: 8px 10px; font-size: 9.5px; }
  .finestra-corpo { padding: 10px; gap: 7px; }
  .risposta-corpo { font-size: 13px; padding: 14px; }
}

@media (max-width: 380px) {
  .marchio-nome { font-size: 13px; }
  .pillola { padding: 0 11px 0 10px; font-size: 12.5px; }
  .numeri, .indicatori { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1001px) {
  .faq-risposta p { font-size: clamp(16.5px, 1.28vw, 20px); }
  .modulo-testa p { font-size: clamp(17px, 1.36vw, 22px); }
}

@media (prefers-reduced-motion: reduce) {
  .marchio-nodo, .marchio-alone, .anello .anello-giro, .in-breve-etichetta::before, .fascia.in-evidenza::before, .barra.vuoto, .cursore { animation: none; }
  .js [data-rivela], .js [data-parole] .pi { transition: opacity 0.4s ease; transform: none; }
  .protagonista .palco-attore, .sopra { transform: none; }
}

.didascalia { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%) translateZ(70px); text-align: center; font-size: clamp(15px, 1.25vw, 21px); font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; color: var(--chiaro); opacity: 0; transition: opacity 0.35s ease; text-wrap: balance; pointer-events: none; }
.attore-tappe .didascalia { top: 60%; }
.didascalia.vista { opacity: 1; }
.grafo-svg .dentro-nodo { font-size: 12px; fill: var(--chiaro); }
.grafo-svg .nodo.acceso .dentro-nodo { fill: var(--notte); }
.scansione { position: absolute; left: 4%; right: 4%; top: 6%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #6FCF97, transparent); box-shadow: 0 0 18px rgba(39, 174, 96, 0.9); opacity: 0; transform: translateZ(90px); }
.scansione.va { animation: scansiona 2.4s var(--curva) forwards; }
@keyframes scansiona { 0% { opacity: 0; top: 6%; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; top: 92%; } }
.chip-riga { display: flex; gap: 6px; margin-top: 2px; }
.spunta-riga { display: flex; align-items: center; gap: 10px; }
.spunta { flex: none; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(140, 200, 240, 0.4); position: relative; transition: background 0.4s ease calc(var(--i, 0) * 0.12s), border-color 0.4s ease calc(var(--i, 0) * 0.12s); }
.spunta::after { content: ""; position: absolute; left: 3px; top: 2px; width: 6px; height: 4px; border-left: 1.6px solid var(--notte); border-bottom: 1.6px solid var(--notte); transform: rotate(-45deg) scale(0); transition: transform 0.4s var(--curva) calc(var(--i, 0) * 0.12s + 0.1s); }
.vivo-in .spunta { background: var(--verde-chiaro); border-color: #A6F0C2; }
.vivo-in .spunta::after { transform: rotate(-45deg) scale(1); }
.finestra.in-evidenza { border-color: rgba(111, 207, 151, 0.55); box-shadow: 0 30px 80px rgba(4, 8, 14, 0.5), 0 0 50px rgba(39, 174, 96, 0.2); }
.finestra-registro { left: 10%; right: 10%; top: 16%; }
.finestra-registro .finestra-corpo { gap: 4px; }
.riga-registro { display: block; padding: 6px 8px; border-radius: 8px; font-size: 12px; line-height: 1.4; color: var(--tenue-2); transition: color 0.3s ease, background-color 0.3s ease; }
.riga-registro::before { content: "> "; color: #6FCF97; }
.riga-registro.acceso { color: var(--chiaro); background: rgba(39, 174, 96, 0.12); }
.risposta-corpo .rw { display: inline; }
.attore-motori .finestra, .attore-listino .finestra { opacity: 0.55; }
.attore-motori .finestra.vivo-in, .attore-listino .finestra.vivo-in { opacity: 1; }
.domanda-comune .cursore { height: 14px; }
.domanda-comune .barra { transform: scaleX(0); transition: transform 0.9s var(--curva); }
.domanda-comune.vivo-in .barra { transform: none; }
.terzetto { top: 56px; }
.capitolo-largo .capitolo-testa { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--colonne); align-items: end; }
.capitolo-largo .capitolo-testa::before { grid-column: 1 / -1; }
.capitolo-largo .capitolo-testa h2 { grid-column: 1 / span 7; font-size: clamp(34px, 3.4vw, 64px); }
.capitolo-largo .capitolo-corpo { grid-column: 1 / -1; margin-top: 34px; }
.capitolo-largo .capitolo-corpo > p { max-width: 74ch; }
.capitolo-largo .glossario, .capitolo-largo .stampa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.capitolo-largo .voci { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.capitolo-largo .servizi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.capitolo-largo .listino { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.capitolo-largo .cl-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.capitolo-largo .cl-scorebar { grid-column: 1 / -1; }
.carta-foto { position: relative; flex: none; }
.carta-foto img { position: absolute; inset: 0; }
.carta-foto img[src$=".svg"] { object-fit: contain; transform: none; padding: 8%; }
.profilo img { width: 40%; top: 41%; }
.profilo > div { left: 19%; right: 19%; bottom: auto; top: 66%; padding: 10px 6px; border-radius: 16px; background: radial-gradient(closest-side, rgba(18, 25, 37, 0.92), rgba(18, 25, 37, 0.6) 70%, rgba(18, 25, 37, 0)); font-size: 12px; }
.profilo > div p:first-child { font-size: 17px; }
.grafo-svg .nodo.minore text { opacity: 0.7; }
@media (max-width: 1180px) {
  .capitolo-largo .glossario, .capitolo-largo .stampa, .capitolo-largo .servizi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .apertura-testo { display: contents; }
  .apertura-interna > *, .apertura-testo > * { min-width: 0; }
  .briciole { order: 1; }
  .apertura-testo .etichetta { order: 2; margin-top: 0; }
  .titolo-pagina { order: 3; margin-top: 0; }
  .protagonista { order: 4; max-width: 400px; }
  .in-breve-apertura { order: 5; margin-top: 0; }
  .capitolo-largo .capitolo-testa { display: block; }
  .capitolo-largo .capitolo-corpo { margin-top: 22px; }
  .capitolo-largo .glossario, .capitolo-largo .stampa, .capitolo-largo .servizi, .capitolo-largo .listino, .capitolo-largo .cl-wrap { grid-template-columns: minmax(0, 1fr); }
  .grafo-svg .nodo text { font-size: 19px; }
  .grafo-svg .dentro-nodo { font-size: 17px; }
  .grafo-svg .nodo.minore text { display: none; }
  .profilo > div { font-size: 10.5px; left: 12%; right: 12%; }
  .profilo > div p:first-child { font-size: 15px; }
  .didascalia { font-size: 15px; width: 56%; }
}
.risposta-domanda { left: 15%; right: 15%; top: 22%; background: rgba(29, 39, 56, 0.94); }
.risposta-corpo { left: 13%; right: 13%; top: 37%; background: linear-gradient(180deg, rgba(31, 42, 60, 0.97), rgba(20, 28, 41, 0.97)); }
.attore-sito .didascalia { top: 92%; width: 70%; font-size: clamp(14px, 1vw, 17px); }
.attore-canali .grafo-svg .nodo text, .attore-sito .grafo-svg .nodo text { paint-order: stroke; stroke: #1A2332; stroke-width: 4px; }
@media (max-width: 1000px) {
  .risposta-domanda { left: 12%; right: 12%; top: 20%; font-size: 11.5px; padding: 10px 12px; }
  .risposta-corpo { left: 10%; right: 10%; top: 38%; }
  .attore-sito .didascalia { top: 94%; width: 86%; }
}
.attore-tre .domanda-comune { top: 24%; left: 9%; right: 9%; transform: translateZ(60px); }
.attore-tre .terzetto { inset: 33% 5% 23%; top: 33%; align-content: stretch; }
.risposta-domanda { top: 27%; }
.risposta-corpo { top: 41%; }
.riga-registro { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finestra-registro { top: 18%; }
@media (max-width: 1000px) {
  .finestra-registro { left: 8%; right: 8%; top: 15%; }
  .riga-registro { padding: 3px 6px; font-size: 10.5px; }
  .attore-tre .domanda-comune { height: 30px; }
  .risposta-domanda { top: 24%; }
  .risposta-corpo { top: 40%; }
}

.lingue { display: flex; align-items: center; gap: 2px; flex: none; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; }
.lingua { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; color: var(--tenue); transition: color 0.25s ease, background-color 0.25s ease; }
.lingua:hover { color: var(--bianco); background: rgba(248, 249, 251, 0.07); }
.lingua[aria-current] { color: var(--chiaro); }
.lingua[aria-current]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--blu-chiaro), var(--verde-chiaro)); }
.lingue-punto { color: var(--tenue); opacity: 0.55; }
.menu-lingue { display: none; }
.testata.sul-chiaro .lingua { color: rgba(26, 35, 50, 0.66); }
.testata.sul-chiaro .lingua[aria-current], .testata.sul-chiaro .lingua:hover { color: var(--notte); }
.testata.sul-chiaro .lingua:hover { background: rgba(26, 35, 50, 0.06); }
@media (max-width: 1000px) {
  .lingue-testata { display: none; }
  .menu-voci > li.menu-lingue { display: block; padding: 22px 0 4px; border-bottom: 0; }
  .lingue-menu { font-size: 15px; gap: 8px; }
  .lingue-menu .lingua { min-width: 56px; height: 48px; padding: 0 12px; border: 1px solid var(--riga); }
  .lingue-menu .lingua[aria-current] { border-color: rgba(248, 249, 251, 0.32); }
}

#velo-salto { position: fixed; inset: 0; z-index: 19; background: var(--notte); opacity: 0; pointer-events: none; transition: opacity 0.24s ease; }
#velo-salto.acceso { opacity: 1; }

@view-transition { navigation: auto; }
#testata > .marchio { view-transition-name: testata-marchio; }
#testata > .menu { view-transition-name: testata-menu; }
#testata > .lingue { view-transition-name: testata-lingue; }
#testata > .pillola { view-transition-name: testata-pillola; }
#testata > .apri-menu { view-transition-name: testata-apri; }
::view-transition-group(testata-marchio), ::view-transition-group(testata-menu), ::view-transition-group(testata-lingue), ::view-transition-group(testata-pillola), ::view-transition-group(testata-apri) { animation: none; }
::view-transition-old(testata-marchio), ::view-transition-old(testata-menu), ::view-transition-old(testata-lingue), ::view-transition-old(testata-pillola), ::view-transition-old(testata-apri) { display: none; }
::view-transition-new(testata-marchio), ::view-transition-new(testata-menu), ::view-transition-new(testata-lingue), ::view-transition-new(testata-pillola), ::view-transition-new(testata-apri) { animation: none; }
@property --grana { syntax: "<length>"; inherits: false; initial-value: 6px; }
::view-transition-group(root) { animation-duration: 1.1s; }
::view-transition-old(root) {
  -webkit-mask-image: radial-gradient(circle, #000 var(--grana), transparent calc(var(--grana) + 0.6px));
  mask-image: radial-gradient(circle, #000 var(--grana), transparent calc(var(--grana) + 0.6px));
  -webkit-mask-size: 8px 8px;
  mask-size: 8px 8px;
  animation: passa-sgretola 0.6s cubic-bezier(0.25, 0.7, 0.4, 1) both;
}
::view-transition-new(root) { animation: passa-apre 0.75s cubic-bezier(0.3, 0.7, 0.1, 1) 0.34s both; }
@keyframes passa-sgretola {
  0% { --grana: 6px; opacity: 1; transform: none; filter: none; }
  55% { opacity: 1; }
  100% { --grana: 0px; opacity: 0; transform: scale(1.03); filter: brightness(1.6) blur(1px); }
}
@keyframes passa-apre {
  from { clip-path: circle(0% at 50% 55%); filter: blur(10px) brightness(1.5); }
  to { clip-path: circle(80% at 50% 55%); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}