@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-300.woff2?v=23812f6f") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/newsreader-300-italic.woff2?v=ee0e7e45") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight.woff2?v=239e3c12") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Permanent Marker"; src: url("../fonts/permanent-marker.woff2?v=ceedb0aa") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --nero: #000;
  --carta-1: #0E0E0E;
  --carta-2: #141414;
  --campo: #111;
  --bordo: rgba(255, 255, 255, .08);
  --bordo-forte: rgba(255, 255, 255, .16);
  --bianco: #FAFAFA;
  --testo: #B3B3B3;
  --tenue: #A0A0A0;
  --grigio: #8A8A8A;

  
  --acc: #D21F2A;
  --acc-chiaro: #E0303A;
  --acc-scuro: #B3141E;
  --acc-bagliore: rgba(210, 31, 42, .35);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pennarello: "Permanent Marker", "Comic Sans MS", cursive;

  --t-h1: clamp(34px, 3.9vw, 56px);
  --t-h2: clamp(32px, 3.6vw, 52px);

  --margine: clamp(16px, 4vw, 40px);
  --largo: calc(1200px + var(--margine) * 2);
  --spazio: 120px;
  --testa-h: 64px;
  --entra: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--nero); }
body { margin: 0; background: var(--nero); color: var(--bianco); font-family: var(--sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--bianco); outline-offset: 4px; border-radius: 6px; }
::selection { background: var(--acc); color: #fff; }
.solo-lettori { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bianco); color: var(--nero); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.salta:focus { top: 12px; }

.contenuto { width: 100%; max-width: var(--largo); margin: 0 auto; padding: 0 var(--margine); }
.stretto { max-width: calc(1040px + var(--margine) * 2); }
.sezione { position: relative; padding: calc(var(--spazio) / 2) 0; }
main > .sezione:first-child { padding-top: calc(var(--testa-h) + 72px); }
.centro { text-align: center; }

.titolo { font-family: var(--serif); font-weight: 300; color: var(--bianco); letter-spacing: -.01em; margin: 0 0 16px; text-wrap: balance; }
.h1 { font-size: var(--t-h1); line-height: 1.15; }
.h2 { font-size: var(--t-h2); line-height: 1.19; }
.titolo .grigio { color: var(--grigio); }
.titolo .acc { color: var(--acc); }
.sottotitolo { margin: 0; color: var(--testo); font-size: 16px; line-height: 26px; max-width: 560px; text-wrap: pretty; }
.centro .sottotitolo, .eroe .sottotitolo, .chiamata .sottotitolo, .invito .sottotitolo { text-wrap: balance; }
.centro .sottotitolo { margin-inline: auto; }
.testo { color: var(--testo); max-width: 62ch; margin: 0; }
.testo + .testo { margin-top: 14px; }
.testo strong { color: var(--bianco); font-weight: 600; }
.video-parola { color: var(--bianco); font-weight: 700; letter-spacing: .02em; }

.bottoni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.centro .bottoni { justify-content: center; }
.bottone { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; min-width: min(300px, 100%); padding: 0 28px; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; color: #fff; background: linear-gradient(180deg, var(--acc-chiaro), var(--acc-scuro)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 8px 28px var(--acc-bagliore); transition: transform .5s var(--entra), box-shadow .4s ease, filter .3s ease; }
.bottone:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 12px 36px rgba(210, 31, 42, .45); }
.bottone:active { transform: translateY(0) scale(.985); }
.bottone .freccia { width: 17px; height: 17px; transition: transform .5s var(--entra); }
.bottone:hover .freccia { transform: translateX(3px); }

.bottone.vuoto { color: var(--bianco); background: var(--campo); box-shadow: inset 0 0 0 1px var(--bordo-forte); }
.bottone.vuoto:hover { background: #181818; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }

.bottone.piccolo { min-height: 36px; min-width: 0; padding: 0 16px; font-size: 13px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 6px 18px rgba(210, 31, 42, .28); }
.bottone.piccolo::after { content: ""; position: absolute; inset: -4px 0; }
.pallino { width: 8px; height: 8px; border-radius: 50%; background: #25D366; flex: none; }

.collegamento { display: inline-flex; align-items: center; gap: 8px; padding: 12px 0 15px; margin: -12px 0; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--bianco); background: linear-gradient(currentColor, currentColor) 0 calc(100% - 12px) / 100% 1px no-repeat; transition: background-size .5s var(--entra); }
.collegamento:hover { background-size: 0 1px; background-position: 100% calc(100% - 12px); }

.testa { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--testa-h); background: rgba(10, 10, 10, .8); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); transition: transform .5s var(--entra), box-shadow .4s; }
.testa.piena { box-shadow: 0 1px 0 var(--bordo); }
.testa.nascosta { transform: translateY(-100%); }
.testa .contenuto { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.marchio { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1; text-decoration: none; letter-spacing: -.01em; }
.voci { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.voci a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; font-size: 13px; color: var(--tenue); transition: color .3s; }
.voci a:hover { color: var(--bianco); }
.voci a[aria-current="page"] { color: var(--bianco); }
.voci a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; border-radius: 1px; background: var(--acc); }
.azioni { justify-self: end; display: flex; align-items: center; gap: 12px; }
.apri-menu { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; }
.apri-menu .righe { position: relative; width: 20px; height: 12px; }
.apri-menu .righe::before, .apri-menu .righe::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--entra), top .4s var(--entra); }
.apri-menu .righe::before { top: 2px; }
.apri-menu .righe::after { top: 9px; }
.menu-aperto .apri-menu .righe::before { top: 5px; transform: rotate(45deg); }
.menu-aperto .apri-menu .righe::after { top: 5px; transform: rotate(-45deg); }

.testa.sola .contenuto { grid-template-columns: 1fr auto 1fr; }
.testa.sola .marchio { justify-self: center; }
.torna { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 13px; color: var(--tenue); text-decoration: none; white-space: nowrap; }
.torna:hover { color: var(--bianco); }

.tendina { position: fixed; inset: 0; z-index: 45; background: var(--nero); display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--testa-h) + 32px) var(--margine) calc(28px + env(safe-area-inset-bottom)); opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.menu-aperto .tendina { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.tendina ul { list-style: none; margin: auto 0; padding: 0; text-align: center; }
.tendina a.voce { display: inline-flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 16px; font-family: var(--serif); font-weight: 300; font-size: 32px; text-decoration: none; opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity .7s var(--entra), transform .7s var(--entra), filter .7s var(--entra); transition-delay: calc(var(--i) * 80ms); }
.tendina a.voce[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.menu-aperto .tendina a.voce { opacity: 1; transform: none; filter: none; }
.tendina .bottone { width: 100%; }

.eroe { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 100svh; padding: calc(var(--testa-h) + 48px) 0 96px; text-align: center; overflow: hidden; overflow: clip; }
.eroe.interno { min-height: 0; padding: calc(var(--testa-h) + 96px) 0 48px; }
.eroe .titolo { margin: 0 auto 20px; }
.eroe.interno .titolo { max-width: 18ch; }
.eroe .riga { margin: 0 auto 32px; font-size: 15px; line-height: 24px; color: #CFCFCF; }
.eroe .sottotitolo { margin: 0 auto 32px; }
.eroe .bottoni { justify-content: center; }

.bagliore { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(42% 34% at 50% 46%, rgba(210, 31, 42, .12), transparent 70%); }
.eroe.interno .bagliore { background: radial-gradient(50% 60% at 50% 0%, rgba(210, 31, 42, .10), transparent 70%); }

.fumo { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.fumo canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s ease; }
.fumo.webgl canvas { opacity: .85; }
.fumo .nebbia { position: absolute; inset: 0; opacity: .85; background: url("../img/fumo-largo.webp?v=87b8615e") center / cover no-repeat; }
@media (max-aspect-ratio: 3/4) { .fumo .nebbia { background-image: url("../img/fumo-alto.webp?v=7fc18aeb"); } }
.fumo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(85% 75% at 50% 45%, transparent 45%, var(--nero) 100%), linear-gradient(180deg, transparent 70%, var(--nero)); }

.neon { color: var(--acc-chiaro); text-shadow: 0 0 6px rgba(224, 48, 58, .75), 0 0 22px rgba(210, 31, 42, .55), 0 0 52px rgba(210, 31, 42, .35); }

.dentro .neon { animation: neon .3s linear .55s; }
@keyframes neon { 0% { opacity: 1; } 18% { opacity: .45; } 34% { opacity: 1; } 52% { opacity: .5; } 68% { opacity: 1; } 84% { opacity: .7; } 100% { opacity: 1; } }

.griglia-c { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: -1; pointer-events: none; overflow: hidden; -webkit-mask-image: radial-gradient(60% 90% at 50% 100%, #000 30%, transparent 75%); mask-image: radial-gradient(60% 90% at 50% 100%, #000 30%, transparent 75%); }
.griglia-c::before { content: ""; position: absolute; left: -50%; right: -50%; top: 0; bottom: -40%; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 48px 48px; background-position: center top; transform: perspective(520px) rotateX(58deg); transform-origin: 50% 0; }
.griglia-c.piena { top: 0; height: auto; -webkit-mask-image: radial-gradient(55% 55% at 50% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(55% 55% at 50% 50%, #000 20%, transparent 75%); }
.griglia-c.piena::before { left: 0; right: 0; bottom: 0; transform: none; }

.filo-rosso { position: relative; z-index: 0; height: 240px; margin: -140px auto -100px; max-width: 1200px; pointer-events: none; }
.filo-rosso svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px rgba(210, 31, 42, .55)); }
.filo-rosso .tratti { fill: none; stroke: var(--acc-chiaro); stroke-width: 1.6; stroke-dasharray: 7 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.filo-rosso .rivela { fill: none; stroke: #fff; stroke-width: 14; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.filo-rosso.fine { margin: -40px auto -60px; height: 200px; }

.video { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #0c0c0c; isolation: isolate; box-shadow: 0 0 0 1px var(--bordo); }
.v-9x16 { aspect-ratio: 9 / 16; }
.v-16x9 { aspect-ratio: 16 / 9; }
.v-1x1 { aspect-ratio: 1; }
.video video { width: 100%; height: 100%; object-fit: cover; }

.guarda-audio { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; color: #fff; cursor: pointer; background: linear-gradient(180deg, var(--acc-chiaro), var(--acc-scuro)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .22), 0 8px 28px var(--acc-bagliore); transition: filter .3s ease, transform .3s var(--entra); }
.guarda-audio:hover { filter: brightness(1.07); }
.guarda-audio:active { transform: translate(-50%, -50%) scale(.97); }
.guarda-audio:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.guarda-audio svg { width: 20px; height: 20px; flex: none; }
.senza-js .guarda-audio { display: none; }

.video .muto { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #c9c9c9; background: rgba(0, 0, 0, .5); pointer-events: none; }
.video .muto svg { width: 16px; height: 16px; }

.segnaposto { display: grid; place-items: end center; text-align: center; background: radial-gradient(80% 50% at 50% 100%, rgba(210, 31, 42, .16), transparent 70%), linear-gradient(180deg, #121212, #070707); }
.segnaposto::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent); }
.segnaposto figcaption { padding: 18px; }
.segnaposto .nota { display: block; font-size: 12px; letter-spacing: .04em; color: var(--tenue); }
.segnaposto .grande-titolo { display: block; margin-bottom: 6px; font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.1; color: var(--bianco); }

.etichetta-carta { position: absolute; left: 50%; top: 14%; z-index: 2; max-width: 84%; padding: 9px 18px 7px; transform: translateX(-50%) rotate(-2deg); font-family: var(--pennarello); font-size: clamp(17px, 1.7vw, 24px); line-height: 1.1; letter-spacing: .02em; color: #A8141C; text-transform: uppercase; width: max-content; text-align: center; text-wrap: balance; background: #EFE6D6; box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  clip-path: polygon(0% 6%, 6% 0%, 13% 5%, 21% 1%, 29% 6%, 38% 0%, 47% 4%, 56% 0%, 64% 5%, 73% 1%, 81% 6%, 90% 0%, 100% 5%, 98% 50%, 100% 95%, 92% 100%, 84% 95%, 75% 100%, 66% 94%, 57% 100%, 48% 95%, 39% 100%, 30% 94%, 21% 100%, 12% 95%, 4% 100%, 0% 94%, 2% 50%); }

.perche-bucan { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(36px, 6vw, 80px); align-items: center; }
.perche-bucan .video, .perche-bucan .marchio-grande, .perche-bucan .foto { max-width: 280px; }
.firma { margin: 22px 0 0; font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 28px; line-height: 1.2; color: var(--bianco); }

.vetrina { position: relative; margin-top: 48px; padding: 16px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .005)); box-shadow: inset 0 0 0 1px var(--bordo); }
.vetrina::before { content: ""; position: absolute; top: 0; left: 50%; width: 120px; height: 2px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--acc), transparent); box-shadow: 0 0 16px var(--acc); }
.carte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.carte.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.carta { position: relative; display: block; padding: 40px 28px 36px; border-radius: 16px; color: inherit; text-decoration: none; background: linear-gradient(180deg, var(--carta-1), var(--carta-2)); box-shadow: inset 0 0 0 1px var(--bordo); text-align: center; overflow: hidden; isolation: isolate; }
.carta::before { content: ""; position: absolute; top: 0; left: 22px; width: 16px; height: 2px; background: var(--acc); }
.carta .icona { width: 48px; height: 48px; margin: 0 auto 22px; }
.carta h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 300; font-size: 22px; line-height: 1.2; }
.carta p { margin: 0 auto; max-width: 34ch; font-size: 15px; line-height: 24px; color: var(--testo); }
.carta.sinistra { text-align: left; }
.carta.sinistra p { margin: 0; }
.icona { fill: none; stroke: var(--acc); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.mattoni { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 48px; text-align: left; }
.mattone { position: relative; display: flex; flex-direction: column; min-height: 360px; padding: 20px 20px 24px; border-radius: 16px; background: linear-gradient(180deg, var(--carta-1), var(--carta-2)); box-shadow: inset 0 0 0 1px var(--bordo); overflow: hidden; }
.mattone.largo { grid-column: span 2; }
.mattone .finto { position: relative; flex: 1; min-height: 190px; margin-bottom: 20px; }
.mattone h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.mattone p { margin: 0; font-size: 15px; line-height: 24px; color: var(--testo); max-width: 46ch; }

.f-montaggio { position: absolute; inset: 0; display: grid; grid-template-rows: auto repeat(3, 1fr); gap: 8px; padding: 14px; border-radius: 12px; background: #0a0a0a; box-shadow: inset 0 0 0 1px var(--bordo); }
.f-montaggio .righello { position: relative; display: flex; justify-content: space-between; font-size: 11px; color: var(--grigio); font-variant-numeric: tabular-nums; padding-bottom: 20px; }
.f-montaggio .traccia { position: relative; border-radius: 6px; background: rgba(255, 255, 255, .035); overflow: hidden; }
.f-montaggio .clip { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; background: linear-gradient(180deg, #2a2a2a, #1d1d1d); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.f-montaggio .clip.forte { background: linear-gradient(180deg, var(--acc-chiaro), var(--acc-scuro)); box-shadow: 0 0 22px -4px var(--acc); }
.f-montaggio .onda-audio { position: absolute; inset: 5px 6px; display: flex; align-items: center; gap: 2px; }
.f-montaggio .onda-audio i { flex: 1; height: var(--h); border-radius: 1px; background: rgba(255, 255, 255, .22); }
.f-montaggio .testina { position: absolute; top: 40px; bottom: 10px; left: 14px; width: 2px; background: var(--acc-chiaro); box-shadow: 0 0 10px var(--acc); animation: testina 6s linear infinite; }
.f-montaggio .testina::before { content: ""; position: absolute; top: -7px; left: -5px; width: 12px; height: 8px; border-radius: 2px; background: var(--acc-chiaro); }
@keyframes testina { from { transform: translateX(0); } to { transform: translateX(var(--corsa, 300px)); } }
.f-montaggio .segno { position: absolute; bottom: 0; left: 2%; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; background: var(--acc-scuro); color: #fff; white-space: nowrap; }

.f-curva { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px; border-radius: 12px; background: #0a0a0a; box-shadow: inset 0 0 0 1px var(--bordo); }
.f-curva .intestazione { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--grigio); margin-bottom: 8px; }
.f-curva .intestazione b { color: var(--bianco); font-weight: 600; font-size: 12px; }
.f-curva .intestazione span:last-child { padding: 2px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--bordo-forte); }
.f-curva svg { flex: 1; width: 100%; height: 100%; min-height: 120px; overflow: visible; }
.f-curva .assi line { stroke: rgba(255, 255, 255, .07); }
.f-curva .linea { fill: none; stroke: var(--acc-chiaro); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: disegna 5s var(--entra) infinite; vector-effect: non-scaling-stroke; }
.f-curva .maniglia { fill: var(--bianco); }
.f-curva .braccio { stroke: rgba(255, 255, 255, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
@keyframes disegna { 0% { stroke-dashoffset: 600; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -600; } }

.f-suono { position: absolute; inset: 0; display: grid; place-items: center; }
.f-suono .barre { display: flex; align-items: center; gap: 4px; width: 100%; height: 160px; }
.f-suono .barre i { flex: 1; height: 12%; border-radius: 3px; background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .15)); animation: barra 1.3s ease-in-out infinite; animation-delay: calc(var(--i) * -97ms); }
.f-suono .barre i:nth-child(5n) { background: linear-gradient(180deg, var(--acc-chiaro), var(--acc-scuro)); }
@keyframes barra { 0%, 100% { height: 12%; } 35% { height: var(--h, 70%); } 60% { height: 30%; } }

.f-cubo { position: absolute; inset: 0; display: grid; place-items: center; perspective: 700px; }
.f-cubo .cubo { position: relative; width: 104px; height: 104px; transform-style: preserve-3d; animation: ruota 14s linear infinite; }
.f-cubo .faccia { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .015); }
.f-cubo .faccia:nth-child(1) { transform: translateZ(52px); border-color: var(--acc-chiaro); box-shadow: 0 0 18px -6px var(--acc), inset 0 0 18px -10px var(--acc); }
.f-cubo .faccia:nth-child(2) { transform: rotateY(180deg) translateZ(52px); }
.f-cubo .faccia:nth-child(3) { transform: rotateY(90deg) translateZ(52px); }
.f-cubo .faccia:nth-child(4) { transform: rotateY(-90deg) translateZ(52px); }
.f-cubo .faccia:nth-child(5) { transform: rotateX(90deg) translateZ(52px); }
.f-cubo .faccia:nth-child(6) { transform: rotateX(-90deg) translateZ(52px); }
.f-cubo .ombra { position: absolute; bottom: 14%; left: 50%; width: 150px; height: 18px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(210, 31, 42, .28), transparent); }
@keyframes ruota { from { transform: rotateX(-22deg) rotateY(0deg); } to { transform: rotateX(-22deg) rotateY(360deg); } }

.f-parola { position: absolute; inset: 0; display: grid; place-items: center; }
.f-parola .riquadro { position: relative; width: min(100%, 240px); height: 72px; border-radius: 12px; background: #0a0a0a; box-shadow: inset 0 0 0 1px var(--bordo); overflow: hidden; }
.f-parola .riquadro::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 12px; height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .1); }
.f-parola .p { position: absolute; inset: 0 0 6px; display: grid; place-items: center; font-family: var(--serif); font-weight: 300; font-size: 34px; opacity: 0; transform: translateY(24px); filter: blur(6px); animation: parola 7.5s var(--entra) infinite; animation-delay: calc(var(--i) * 2.5s); }
.f-parola .p:nth-child(2) { color: var(--acc-chiaro); }
@keyframes parola { 0% { opacity: 0; transform: translateY(24px); filter: blur(6px); } 8%, 28% { opacity: 1; transform: none; filter: none; } 36%, 100% { opacity: 0; transform: translateY(-20px); filter: blur(6px); } }

.f-formati { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; }
.f-formati .formato { display: grid; place-items: center; border-radius: 10px; font-size: 12px; color: var(--tenue); background: linear-gradient(180deg, #171717, #0e0e0e); box-shadow: inset 0 0 0 1px var(--bordo-forte); animation: galleggia 4s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
.f-formati .formato:nth-child(1) { width: 74px; aspect-ratio: 9 / 16; box-shadow: inset 0 0 0 1px var(--acc-chiaro), 0 0 24px -8px var(--acc); color: var(--bianco); }
.f-formati .formato:nth-child(2) { width: 96px; aspect-ratio: 1; }
.f-formati .formato:nth-child(3) { width: 128px; aspect-ratio: 16 / 9; }
@keyframes galleggia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.metodo { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.schema-d { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; max-width: 1000px; margin: 56px auto 0; text-align: left; }
.anello { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin: 0 auto; }
.anello svg { width: 100%; height: 100%; overflow: visible; }
.anello .base { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 1.2; }
.anello .tacche { stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.anello .arco { fill: none; stroke: var(--acc-chiaro); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(210, 31, 42, .7)); }
.anello .tappa circle { fill: #0d0d0d; stroke: rgba(255, 255, 255, .22); stroke-width: 1; transition: fill .5s var(--entra), stroke .5s var(--entra); }
.anello .tappa text { font-family: var(--serif); font-weight: 300; font-size: 15px; fill: var(--grigio); text-anchor: middle; dominant-baseline: central; transition: fill .5s var(--entra); }
.anello .tappa.accesa circle { fill: var(--acc); stroke: var(--acc-chiaro); filter: drop-shadow(0 0 8px rgba(210, 31, 42, .8)); }
.anello .tappa.accesa text { fill: #fff; }
.anello .centro-anello { font-family: var(--serif); font-weight: 300; font-size: 46px; fill: var(--bianco); text-anchor: middle; dominant-baseline: central; }
.anello .sotto-anello { font-family: var(--sans); font-size: 7.5px; letter-spacing: .08em; fill: var(--grigio); text-anchor: middle; }
.regole { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: regola; }
.regole li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 22px 22px 22px 18px; border-radius: 16px; background: linear-gradient(180deg, var(--carta-1), var(--carta-2)); box-shadow: inset 0 0 0 1px var(--bordo); opacity: .4; transition: opacity .6s var(--entra), box-shadow .6s var(--entra); }
.regole li.accesa { opacity: 1; box-shadow: inset 0 0 0 1px rgba(210, 31, 42, .45), 0 0 30px -18px var(--acc); }
.regole .n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-family: var(--serif); font-size: 17px; color: var(--grigio); box-shadow: inset 0 0 0 1px var(--bordo-forte); transition: background .5s, color .5s, box-shadow .5s; }
.regole li.accesa .n { background: var(--acc); color: #fff; box-shadow: none; }
.regole h3 { margin: 4px 0 4px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.regole p { margin: 0; font-size: 15px; line-height: 24px; color: var(--testo); }

.griglia-lavori { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.griglia-lavori.quanti-2 { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; }
.griglia-lavori.quanti-1 { grid-template-columns: 1fr; }
.carta-lavoro { display: block; padding: 10px 10px 16px; border-radius: 20px; text-decoration: none; color: inherit; background: linear-gradient(180deg, var(--carta-1), var(--carta-2)); box-shadow: inset 0 0 0 1px var(--bordo); transition: box-shadow .4s; }
a.carta-lavoro:hover { box-shadow: inset 0 0 0 1px var(--bordo-forte); }
.carta-lavoro .video { border-radius: 12px; box-shadow: none; transition: transform .8s var(--entra); }
a.carta-lavoro:hover .video { transform: scale(.985); }
.carta-lavoro .info { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; padding: 14px 6px 0; }
.carta-lavoro h3 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: 24px; line-height: 1.15; }
.carta-lavoro .tipo { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--tenue); }
.carta-lavoro .tipo-breve { display: none; }
.carta-lavoro.nascosta { display: none; }
.carta-lavoro.grande { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(12px, 1.6vw, 20px); }
.carta-lavoro.grande .video { width: 100%; max-width: min(380px, calc(80svh * 9 / 16)); justify-self: end; }
.carta-lavoro.grande .info { display: block; padding: 0 12px 0 0; }
.carta-lavoro.grande h3 { font-size: var(--t-h2); margin-bottom: 10px; }
.carta-lavoro.grande .tipo { white-space: normal; }
.carta-lavoro.grande .descrizione { color: var(--testo); max-width: 40ch; margin: 18px 0 26px; }
.filtri { position: sticky; top: var(--testa-h); z-index: 5; display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; margin: 0 calc(var(--margine) * -1) 28px; padding: 10px var(--margine); overflow-x: auto; scrollbar-width: none; background: var(--nero); }
.filtri::-webkit-scrollbar { display: none; }

.filtri.altro { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.filtri button { flex: none; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--campo); box-shadow: inset 0 0 0 1px var(--bordo); font-size: 14px; font-weight: 500; color: var(--tenue); white-space: nowrap; transition: background .3s, color .3s; }
.filtri button:hover { color: var(--bianco); }
.filtri button[aria-pressed="true"] { background: var(--bianco); color: var(--nero); box-shadow: none; }

.respiro { display: grid; place-items: center; min-height: 70vh; min-height: 70svh; margin: calc(var(--spazio) / 2) 0; background: #fff; color: #000; }
.respiro p { margin: 0; font-family: var(--sans); font-weight: 500; font-size: 22px; line-height: 1.3; letter-spacing: -.005em; }

.passi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 48px; text-align: left; }
.passo { position: relative; padding: 26px 22px 24px; border-radius: 16px; background: linear-gradient(180deg, var(--carta-1), var(--carta-2)); box-shadow: inset 0 0 0 1px var(--bordo); }
.passo .n { display: block; margin-bottom: 28px; font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 1; color: var(--acc-chiaro); }
.passo h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.passo p { margin: 0; color: var(--testo); font-size: 15px; line-height: 24px; }
.passo::after { content: ""; position: absolute; top: 48px; left: 64px; right: 22px; height: 1px; background: linear-gradient(90deg, var(--bordo-forte), transparent); }

.servizi-elenco { display: grid; gap: 16px; }
.servizio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: 16px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .005)); box-shadow: inset 0 0 0 1px var(--bordo); scroll-margin-top: calc(var(--testa-h) + 20px); }
.servizio .schema { position: relative; min-height: 300px; border-radius: 16px; background: linear-gradient(180deg, var(--carta-1), var(--carta-2)); box-shadow: inset 0 0 0 1px var(--bordo); overflow: hidden; }
.servizio .schema > * { position: absolute; inset: 16px; }
.servizio .testo-servizio { padding: 8px 12px 8px 0; }
.servizio:nth-child(even) .schema { order: 2; }
.servizio:nth-child(even) .testo-servizio { padding: 8px 0 8px 12px; }
.servizio h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; margin: 0 0 12px; }
.ottieni { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 11px; }
.ottieni li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15.5px; color: var(--bianco); }
.ottieni svg { width: 18px; height: 18px; margin-top: 4px; stroke: var(--acc-chiaro); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.domande { max-width: 820px; margin: 48px auto 0; display: grid; gap: 10px; text-align: left; }
.domanda { border-radius: 16px; background: linear-gradient(180deg, var(--carta-1), var(--carta-2)); box-shadow: inset 0 0 0 1px var(--bordo); }
.domanda summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 60px; padding: 14px 22px; font-size: 16px; font-weight: 500; }
.domanda summary::-webkit-details-marker { display: none; }
.domanda .piu { position: relative; flex: none; width: 16px; height: 16px; }
.domanda .piu::before, .domanda .piu::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; border-radius: 1px; background: var(--acc-chiaro); transition: transform .5s var(--entra); }
.domanda .piu::after { transform: rotate(90deg); }
.domanda[open] .piu::after { transform: rotate(0deg); }
.domanda .risposta { overflow: hidden; }
.domanda .risposta p { margin: 0; padding: 0 22px 20px; color: var(--testo); max-width: 64ch; }

.tesi { margin: 0 auto; max-width: 22ch; font-family: var(--serif); font-weight: 300; font-size: var(--t-h2); line-height: 1.19; letter-spacing: -.01em; text-align: center; color: var(--bianco); }
.tesi .acc { color: var(--acc-chiaro); }

.principi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 48px; text-align: left; }
.principio { display: flex; flex-direction: column; padding: 20px; border-radius: 16px; background: linear-gradient(180deg, var(--carta-1), var(--carta-2)); box-shadow: inset 0 0 0 1px var(--bordo); }
.principio h3 { margin: 20px 0 6px; font-size: 18px; font-weight: 600; line-height: 1.3; }
.principio p { margin: 0; color: var(--testo); font-size: 15px; line-height: 24px; }
.demo { position: relative; height: 170px; border-radius: 12px; background: #0a0a0a; box-shadow: inset 0 0 0 1px var(--bordo); overflow: hidden; }
.demo-tre .barra { position: absolute; left: 24px; right: 24px; top: 50%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); }
.demo-tre .barra i { position: absolute; inset: 0; border-radius: 2px; background: var(--acc-chiaro); transform: scaleX(0); transform-origin: left; animation: tresec 3s linear infinite; }
.demo-tre .lampo { position: absolute; inset: 0; background: var(--bianco); opacity: 0; animation: lampo 3s linear infinite; }
.demo-tre .s { position: absolute; top: calc(50% + 16px); font-size: 12px; color: var(--grigio); }
@keyframes tresec { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lampo { 0%, 96% { opacity: 0; } 97% { opacity: .85; } 100% { opacity: 0; } }
.demo-silenzio { display: grid; place-items: center; }
.demo-silenzio .parola { font-family: var(--serif); font-weight: 300; font-size: 40px; animation: svanisce 4s ease-in-out infinite; }
.demo-silenzio .piatta { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 3px; height: 24px; }
.demo-silenzio .piatta i { flex: 1; background: var(--acc-chiaro); border-radius: 2px; animation: spegne 4s ease-in-out infinite; animation-delay: calc(var(--i) * 18ms); }
@keyframes svanisce { 0%, 30% { opacity: 1; letter-spacing: 0; } 60%, 85% { opacity: 0; letter-spacing: .3em; } 100% { opacity: 1; letter-spacing: 0; } }
@keyframes spegne { 0%, 30% { height: var(--h, 60%); } 55%, 85% { height: 2px; } 100% { height: var(--h, 60%); } }
.demo-suono .palla { position: absolute; left: 28%; width: 24px; height: 24px; border-radius: 50%; background: var(--acc-chiaro); animation: rimbalza 1.4s cubic-bezier(.5, 0, .5, 1) infinite; }
.demo-suono .picco { position: absolute; right: 22px; left: 52%; top: 50%; height: 2px; background: rgba(255, 255, 255, .25); }
.demo-suono .picco i { position: absolute; left: 30%; bottom: 0; width: 3px; height: 4px; background: var(--acc-chiaro); animation: picco 1.4s linear infinite; }
@keyframes rimbalza { 0%, 100% { top: 14px; } 50% { top: calc(100% - 38px); } }
@keyframes picco { 0%, 45% { height: 2px; transform: translateY(1px); } 50% { height: 54px; transform: translateY(27px); } 62%, 100% { height: 2px; transform: translateY(1px); } }

.strumenti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 48px 0 0; padding: 0; text-align: left; }
.strumenti li { padding: 26px 22px; border-radius: 16px; background: linear-gradient(180deg, var(--carta-1), var(--carta-2)); box-shadow: inset 0 0 0 1px var(--bordo); }
.strumenti span { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; }
.strumenti small { display: block; margin-top: 10px; font-size: 14px; color: var(--testo); }

.foto { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; background: #111; box-shadow: 0 0 0 1px var(--bordo); }
.foto { position: relative; }
.foto picture { display: block; width: 100%; height: 100%; }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }

.foto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20%; background: linear-gradient(180deg, transparent, #000); pointer-events: none; }
.marchio-grande { display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 16px; background: linear-gradient(180deg, var(--carta-1), var(--carta-2)); box-shadow: inset 0 0 0 1px var(--bordo); font-family: var(--serif); font-weight: 300; font-size: clamp(56px, 7vw, 88px); }
.marchio-grande span { position: relative; }
.marchio-grande span::after { content: ""; position: absolute; right: -14px; bottom: 20%; width: 9px; height: 9px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 14px var(--acc); }

.chiamata { position: relative; isolation: isolate; overflow: hidden; padding: clamp(72px, 9vw, 120px) 24px; border-radius: 24px; text-align: center; background: var(--nero); box-shadow: inset 0 0 0 1px var(--bordo); }
.chiamata::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(70% 70% at 50% 115%, rgba(210, 31, 42, .42), rgba(210, 31, 42, .08) 55%, transparent 75%); }

.chiamata::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); }
.chiamata .titolo { max-width: 16ch; margin-inline: auto; }
.chiamata .sottotitolo { margin: 0 auto 32px; }
.chiamata .bottoni { justify-content: center; }

.piede { padding: 72px 0 24px; }
.piede .alto { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.piede .marchio { font-size: 24px; }
.piede .social { display: flex; gap: 4px; margin-right: -10px; }
.piede .social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--tenue); transition: color .3s, background .3s; }
.piede .social a:hover { color: var(--bianco); background: rgba(255, 255, 255, .05); }
.piede .social svg { width: 19px; height: 19px; }
.piede .nota { margin: 14px 0 28px; max-width: 64ch; font-size: 12.5px; line-height: 20px; color: var(--grigio); }
.piede .basso { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 20px; padding-top: 12px; border-top: 1px solid var(--bordo); font-size: 12.5px; color: var(--grigio); }
.piede .basso a { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--tenue); }
.piede .basso a:hover { color: var(--bianco); }

.pillola { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 14px; border-radius: 999px; font-size: 13px; color: var(--bianco); background: var(--campo); box-shadow: inset 0 0 0 1px var(--bordo-forte); }
.pillola::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc-chiaro); box-shadow: 0 0 8px var(--acc); }
.scheda-modulo { max-width: 760px; margin: 0 auto; padding: clamp(22px, 3.4vw, 40px); border-radius: 24px; text-align: left; background: linear-gradient(180deg, var(--carta-1), #0a0a0a); box-shadow: inset 0 0 0 1px var(--bordo); scroll-margin-top: calc(var(--testa-h) + 20px); }
.scheda-modulo .aiuto { margin: 0 0 24px; font-size: 15px; line-height: 24px; color: var(--testo); }
.modulo { display: grid; gap: 16px; }
.modulo .due { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modulo .esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.campo { display: grid; gap: 8px; }
.campo label { font-size: 13px; font-weight: 500; color: var(--bianco); }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 52px; font: inherit; font-size: 16px; color: var(--bianco); background: var(--campo); border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); padding: 13px 15px; transition: box-shadow .3s; }
.campo input::placeholder, .campo textarea::placeholder { color: #707070; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.campo [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--acc-chiaro); }
.campo select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.campo select option { color: #000; }
.campo textarea { min-height: 128px; resize: vertical; }

.consenso { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 13px; line-height: 20px; color: var(--testo); align-items: start; }
.consenso input { appearance: none; -webkit-appearance: none; width: 44px; height: 44px; margin: -12px -13px -12px; padding: 0; border: 0; cursor: pointer; background: no-repeat 13px 13px / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='.75' y='.75' width='16.5' height='16.5' rx='4.5' fill='none' stroke='%23A0A0A0' stroke-width='1.5'/%3E%3C/svg%3E"); }
.consenso input:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect width='18' height='18' rx='5' fill='%23FAFAFA'/%3E%3Cpath d='M4.5 9.5l3 3 6-6.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.consenso input[aria-invalid="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='1' y='1' width='16' height='16' rx='4.5' fill='none' stroke='%23E0303A' stroke-width='2'/%3E%3C/svg%3E"); }
.consenso input:focus-visible { outline: 2px solid var(--bianco); outline-offset: -11px; }
.consenso a { padding: 12px 2px; margin: 0 -2px; }
.modulo .bottone { width: 100%; }
.esito { font-size: 15px; min-height: 1.5em; margin: 0; color: var(--testo); }
.esito.errore { color: var(--bianco); }
.esito.ok { color: var(--bianco); }
.esito.ok::before { content: "✓"; margin-right: 8px; color: var(--acc-chiaro); font-weight: 700; }
.esito.errore::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--acc-chiaro); vertical-align: middle; }
.altri-modi { max-width: 760px; margin: 28px auto 0; text-align: center; }
.altri-modi p { margin: 0 0 16px; font-size: 15px; color: var(--testo); }
.altri-modi .bottoni { justify-content: center; }
.altri-modi .bottone { min-width: 0; flex: 1 1 240px; }

.lavoro-testa { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.lavoro-testa .video-fisso { position: sticky; top: calc(var(--testa-h) + 24px); }
.lavoro-testa .video-fisso .video { width: 100%; max-width: calc(min(80vh, 100svh - var(--testa-h) - 48px) * 9 / 16); margin-inline: auto; }
.meta, .pillole { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.meta li, .pillole li { padding: 6px 13px; border-radius: 999px; background: var(--campo); box-shadow: inset 0 0 0 1px var(--bordo); font-size: 13.5px; color: var(--testo); }
.pillole { margin: 0; }
.pillole li { color: var(--bianco); }
.parte { padding: 32px 0; border-top: 1px solid var(--bordo); }
.parte h2 { margin: 0 0 14px; font-size: 13px; letter-spacing: .06em; color: var(--tenue); font-weight: 500; }
.parte > p { margin: 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; }
.perche { display: grid; gap: 12px; }
.perche .uno { display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: center; padding: 12px; border-radius: 16px; background: linear-gradient(180deg, var(--carta-1), var(--carta-2)); box-shadow: inset 0 0 0 1px var(--bordo); }
.perche .fotogramma { aspect-ratio: 9 / 16; width: 88px; border-radius: 10px; }
.perche img.fotogramma { object-fit: cover; }
.perche .fotogramma .n { font-family: var(--serif); font-weight: 300; font-size: 28px; color: var(--bianco); }
.perche .fotogramma.segnaposto { place-items: center; }
.perche h3 { margin: 0 0 4px; font-family: var(--serif); font-weight: 300; font-size: 24px; line-height: 1.15; }
.perche p { margin: 0; color: var(--testo); font-size: 15px; line-height: 24px; }
.nota-ai { margin: 12px 0 0; font-size: 14px; color: var(--testo); }
.navigazione-lavori { display: flex; justify-content: space-between; gap: 20px; padding-top: 32px; border-top: 1px solid var(--bordo); }

.testo-legale { max-width: 720px; margin: 0 auto; text-align: left; }
.testo-legale h2 { font-family: var(--serif); font-weight: 300; font-size: 28px; line-height: 1.2; margin: 44px 0 10px; }
.testo-legale p { color: var(--testo); }
.testo-legale a { padding: 12px 0; }

[data-anim="su"] { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity .7s var(--entra), transform .7s var(--entra), filter .7s var(--entra); transition-delay: var(--ritardo, 0ms); }
[data-anim="su"].dentro { opacity: 1; transform: none; filter: none; }
[data-anim="gruppo"] > * { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity .7s var(--entra), transform .7s var(--entra), filter .7s var(--entra); transition-delay: calc(var(--i, 0) * 80ms + var(--ritardo, 0ms)); }
[data-anim="gruppo"].dentro > * { opacity: 1; transform: none; filter: none; }

[data-anim="gruppo"] > :nth-child(2) { --i: 1; } [data-anim="gruppo"] > :nth-child(3) { --i: 2; } [data-anim="gruppo"] > :nth-child(4) { --i: 3; } [data-anim="gruppo"] > :nth-child(5) { --i: 4; } [data-anim="gruppo"] > :nth-child(6) { --i: 5; } [data-anim="gruppo"] > :nth-child(7) { --i: 6; } [data-anim="gruppo"] > :nth-child(8) { --i: 7; } [data-anim="gruppo"] > :nth-child(9) { --i: 8; } [data-anim="gruppo"] > :nth-child(10) { --i: 9; } [data-anim="gruppo"] > :nth-child(11) { --i: 10; } [data-anim="gruppo"] > :nth-child(12) { --i: 11; }

.eroe .h1[data-anim="su"] { opacity: 1; filter: none; transform: translateY(12px); }
.eroe .h1[data-anim="su"].dentro { transform: none; }

@media (max-width: 1000px) {
  .voci, .testa nav { display: none; }
  .apri-menu { display: inline-flex; }
  .testa:not(.sola) .contenuto { grid-template-columns: 1fr auto; }
  .perche-bucan { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 40px; }
  .carte.tre, .principi { grid-template-columns: 1fr; }
  .mattoni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mattone.largo:first-child, .mattone.largo:last-child { grid-column: 1 / -1; }
  .mattone.largo { grid-column: auto; }
  .schema-d { grid-template-columns: 1fr; gap: 36px; }
  .anello { max-width: 280px; }
  .griglia-lavori { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  
  .griglia-lavori:not(.quanti-1) > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  .carta-lavoro.grande { grid-template-columns: 1fr; }
  .carta-lavoro.grande .video { justify-self: center; max-width: 380px; }
  .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servizio { grid-template-columns: 1fr; }
  .servizio:nth-child(even) .schema { order: 0; }
  .servizio .testo-servizio, .servizio:nth-child(even) .testo-servizio { padding: 6px 6px 10px; }
  .lavoro-testa { grid-template-columns: 1fr; }
  .lavoro-testa .video-fisso { position: static; }
  .lavoro-testa .video-fisso .video { max-width: min(380px, calc(80svh * 9 / 16)); }
  .strumenti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  :root { --testa-h: 60px; --spazio: 72px; }
  .h1 { line-height: 40px; }
  .h2 { line-height: 38px; }
  .marchio { font-size: 24px; }
  .eroe { min-height: 100svh; padding-bottom: 80px; }
  .eroe.interno { padding-top: calc(var(--testa-h) + 64px); }
  .bottoni .bottone { width: 100%; }
  .perche-bucan { grid-template-columns: 1fr; text-align: left; }
  .perche-bucan .video, .perche-bucan .marchio-grande, .perche-bucan .foto { width: 100%; max-width: 360px; }
  .carte { grid-template-columns: 1fr; }
  .mattoni { grid-template-columns: 1fr; }
  .mattone { min-height: 0; }
  .mattone .finto { min-height: 200px; }
  .filo-rosso { height: 180px; margin: -110px auto -70px; }
  .filo-rosso.fine { height: 150px; margin: -30px auto -40px; }
  .anello { max-width: 200px; }
  .regole li { grid-template-columns: 36px 1fr; gap: 12px; padding: 18px 16px; }
  .griglia-lavori.quanti-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carta-lavoro { padding: 6px 6px 12px; border-radius: 16px; }
  .carta-lavoro h3 { font-size: 20px; }
  .griglia-lavori:not(.quanti-1) .carta-lavoro .tipo-lungo { display: none; }
  .griglia-lavori:not(.quanti-1) .carta-lavoro .tipo-breve { display: inline; }
  .carta-lavoro .info { padding: 10px 4px 0; }
  .etichetta-carta { font-size: 15px; padding: 7px 12px 5px; }
  .passi { grid-template-columns: 1fr; }
  .modulo .due { grid-template-columns: 1fr; }
  .perche .uno { grid-template-columns: 72px 1fr; }
  .perche .fotogramma { width: 72px; }
  .filtri { justify-content: flex-start; }
  .filtri button { padding: 0 14px; }
}
@media (max-width: 380px) {
  .chiamata { padding-inline: 14px; border-radius: 18px; }
  .bottone { padding: 0 18px; gap: 8px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  [data-anim], [data-anim] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .f-parola .p:first-child { opacity: 1; transform: none; filter: none; }
}
.senza-js [data-anim], .senza-js [data-anim] > * { opacity: 1; transform: none; filter: none; }
.eroe.interno.alto { min-height: 82svh; padding-bottom: 72px; }