@charset "UTF-8";
/* ==========================================================================
   BUGLIONE — design system
   Allineato al manuale «BUGLIONE REBRAND 2026».

   Tre invarianti del brand, da non toccare senza tornare al manuale:
     colore    navy #000066 e rosso #FF3300, valori esatti del manuale
     forma     ogni taglio obliquo e' a 30 gradi (--shear)
     voce      display condensato e obliquo, testo grottesco, serif solo
               per le cifre e le date
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONT

   SOSTITUTI PROVVISORI. I font di brand sono Zuume (display), Corsario
   (serif) e Config (testo): sono commerciali e nel PDF del manuale
   esistono solo come sottoinsiemi incorporati, quindi non sono utilizzabili
   sul web. Qui stanno i sostituti liberi piu' vicini:

     Zuume    -> Archivo, asse di larghezza portato a 62% (condensato)
     Config   -> Archivo, larghezza normale
     Corsario -> Playfair Display

   PER SOSTITUIRLI: servono i woff2 con licenza web. Si cambiano i tre
   @font-face qui sotto e le tre variabili --font-* nella sezione 1.
   Nient'altro nel foglio nomina un font.

   Ospitati in locale: il sito non fa nessuna richiesta esterna (GDPR).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304-0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-italic-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-italic-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304-0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-var-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-var-latin-ext.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304-0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. TOKEN
   -------------------------------------------------------------------------- */
:root {
  /* Colore — valori esatti del manuale, campionati dalla tavola palette.
     Non arrotondare: sono deliberatamente netti. */
  --navy:      #000066;
  --rosso:     #FF3300;
  --panna:     #FFE8DF;
  --sabbia:    #EADFD3;
  --teal:      #336666;
  --mint:      #99CC99;
  --lime:      #DEF853;
  --giallo:    #FFFF99;
  --rosa:      #CC6666;
  --mattone:   #BC3737;
  --inchiostro:#1A1A1A;
  --bianco:    #FFFFFF;

  /* Contrasto — misurato, non stimato.
     Il rosso su navy fa 4,8:1 e regge il testo corrente.
     Il rosso su panna si ferma a 3,1:1: per il testo su fondo chiaro
     si usa il mattone, che e' comunque un colore del manuale (4,8:1).
     Sul rosso il testo va in navy (4,8:1), non in bianco (3,7:1). */
  --rosso-ink:  var(--mattone);
  --su-rosso:   var(--navy);

  /* Ruoli — superficie scura */
  --su-dark-bg:      var(--navy);
  --su-dark-panel:   #000052;
  --su-dark-ink:     var(--panna);
  --su-dark-ink-dim: #9A9AC4;
  --su-dark-rule:    rgba(255, 232, 223, .22);

  /* Ruoli — superficie chiara */
  --su-light-bg:      var(--panna);
  --su-light-panel:   var(--sabbia);
  --su-light-ink:     var(--navy);
  --su-light-ink-dim: #5C5C86;
  --su-light-rule:    rgba(0, 0, 102, .18);

  /* Tipografia — i tre ruoli del manuale.
     Cambiare SOLO qui quando arrivano Zuume / Config / Corsario. */
  --font-display: "Archivo", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Archivo", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Playfair Display", Georgia, "Times New Roman", serif;
  /* alias di compatibilita' col markup gia' scritto */
  --font-body:  var(--font-text);
  --font-slab:  var(--font-serif);

  /* Larghezza del display: e' questa variabile a fare il «condensato».
     Con Zuume andra' rimessa a normal e la condensazione la fara' il font. */
  --display-stretch: 62%;

  /* Scala — salti larghi, perche' la gerarchia si legga da lontano.
     Il display arriva molto piu' in alto di prima: condensato regge
     corpi che un didone non reggerebbe. */
  --fs-mega:    clamp(3.6rem, 15vw, 15rem);
  --fs-display: clamp(3rem, 10.5vw, 9.5rem);
  --fs-h1:      clamp(2.3rem, 6vw, 5.25rem);
  --fs-h2:      clamp(1.9rem, 4.2vw, 3.5rem);
  --fs-h3:      clamp(1.1rem, 1.5vw, 1.375rem);
  --fs-lead:    clamp(1.15rem, 1.65vw, 1.5rem);
  --fs-body:    clamp(1rem, .98vw, 1.0625rem);
  --fs-small:   .9375rem;
  --fs-micro:   .75rem;

  --lh-tight: 1.02;
  --lh-snug:  1.16;
  --lh-body:  1.65;

  /* Spazio */
  --s-1: .375rem;  --s-2: .75rem;   --s-3: 1.125rem;
  --s-4: 1.75rem;  --s-5: 2.5rem;   --s-6: 3.5rem;
  --s-7: 5rem;     --s-8: 7rem;
  --pad-section: clamp(4rem, 9vw, 9rem);
  --pad-inline:  clamp(1.15rem, 4.5vw, 4.5rem);
  --measure:     68ch;
  --shell-max:   1560px;

  /* Forma — la regola geometrica del manuale.
     30 gradi dalla verticale: e' l'angolo del logo, dei triangoli e del
     parallelogramma. Tutto cio' che e' obliquo nel sito usa questi due
     valori e nient'altro. */
  --shear:     -30deg;
  --shear-inv:  30deg;
  --shear-tan: 0.5774; /* tan(30deg): scarto orizzontale per unita' di altezza */

  /* Raggi: il manuale e' quasi tutto a spigolo vivo. Restano piccoli
     raccordi dove il parallelogramma del logo li ha. */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-xl: 22px;  --r-pill: 999px;

  /* Moto */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .22s;  --t-mid: .45s;  --t-slow: .9s;

  /* valori di partenza: fuori da una .su-* si assume fondo scuro */
  --ink:      var(--panna);
  --ink-dim:  var(--su-dark-ink-dim);
  --rule:     var(--su-dark-rule);
  --accent:   var(--rosso);
  --field-bg: rgba(255, 232, 223, .06);
  --surface:  var(--su-dark-bg);

  /* Il lettering come data URI: incorporato, cosi' il marchio si vede
     anche aprendo i file con doppio clic (file://), dove Safari blocca
     le maschere che puntano a un file esterno. */
  --logo-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='232.8 352.87 1454.41 374.27' fill='currentColor'%3E%3Cpath fill-rule='nonzero' d='M 1153.08 505.16 L 1136.8 533.48 C 1130.74 544.01 1121.99 552.79 1111.48 558.88 C 1101.1 564.88 1089.3 568.09 1077.33 568.17 L 1103.77 522.21 L 1109.59 512.12 C 1115.65 501.61 1124.4 492.84 1134.91 486.77 C 1145.27 480.79 1157.05 477.58 1169.02 477.5 Z M 814.32 543.24 C 814.32 543.24 814.32 543.24 814.32 543.25 L 814.31 543.26 C 814.19 543.4 814.07 543.54 813.95 543.68 C 813.83 543.82 813.71 543.97 813.59 544.11 C 813.09 544.68 812.59 545.25 812.08 545.8 C 811.57 546.36 811.05 546.9 810.52 547.44 C 810 547.98 809.46 548.51 808.91 549.03 C 808.64 549.29 808.37 549.55 808.09 549.8 C 807.81 550.06 807.54 550.32 807.25 550.57 C 806.97 550.82 806.69 551.07 806.4 551.31 C 806.26 551.44 806.12 551.56 805.97 551.68 C 805.69 551.93 805.4 552.17 805.11 552.41 C 804.96 552.53 804.82 552.65 804.67 552.77 C 804.66 552.77 804.66 552.77 804.66 552.78 C 804.51 552.89 804.37 553.01 804.23 553.12 C 804.08 553.24 803.93 553.36 803.78 553.47 C 803.68 553.55 803.57 553.64 803.47 553.71 C 803.46 553.72 803.46 553.72 803.46 553.72 C 803.45 553.73 803.44 553.73 803.44 553.74 C 803.42 553.75 803.41 553.77 803.39 553.77 C 803.18 553.94 802.96 554.11 802.75 554.27 C 802.49 554.46 802.23 554.65 801.98 554.84 C 801.67 555.07 801.36 555.29 801.05 555.5 C 800.9 555.61 800.74 555.72 800.59 555.83 C 800.3 556.03 800 556.23 799.71 556.43 C 799.54 556.55 799.36 556.66 799.18 556.78 C 798.55 557.2 797.91 557.61 797.26 558 C 797.1 558.1 796.94 558.2 796.77 558.3 C 796.61 558.39 796.45 558.49 796.29 558.59 C 796.12 558.68 795.96 558.78 795.8 558.88 C 795.47 559.06 795.15 559.25 794.82 559.43 C 794.65 559.52 794.48 559.62 794.31 559.71 C 794.3 559.71 794.28 559.72 794.27 559.73 C 794.25 559.74 794.24 559.75 794.23 559.75 C 794.1 559.82 793.96 559.89 793.83 559.96 C 793.71 560.03 793.59 560.1 793.47 560.16 C 793.26 560.27 793.05 560.38 792.84 560.49 C 792.68 560.57 792.51 560.66 792.34 560.74 C 792.21 560.81 792.07 560.88 791.93 560.95 C 791.91 560.96 791.89 560.97 791.87 560.98 C 791.7 561.07 791.52 561.15 791.34 561.24 C 791 561.4 790.66 561.56 790.33 561.72 C 789.99 561.88 789.65 562.03 789.31 562.18 C 788.97 562.34 788.62 562.48 788.28 562.63 C 787.94 562.78 787.59 562.92 787.25 563.06 C 787.08 563.13 786.91 563.2 786.73 563.27 C 786.56 563.34 786.39 563.41 786.21 563.47 C 786.04 563.54 785.86 563.61 785.69 563.67 C 785.54 563.73 785.4 563.78 785.25 563.84 C 785.14 563.88 785.04 563.91 784.94 563.95 C 784.84 563.99 784.74 564.02 784.64 564.06 C 784.47 564.12 784.29 564.18 784.12 564.25 C 783.94 564.31 783.77 564.37 783.59 564.43 C 783.47 564.47 783.36 564.51 783.24 564.55 C 783.12 564.59 783 564.62 782.89 564.66 C 782.3 564.86 781.71 565.05 781.12 565.22 C 780.88 565.3 780.64 565.37 780.4 565.44 C 780.18 565.5 779.95 565.57 779.73 565.63 C 779.52 565.69 779.31 565.74 779.1 565.8 C 779.1 565.8 779.09 565.8 779.09 565.8 C 779.06 565.81 779.04 565.82 779.01 565.82 C 778.86 565.87 778.7 565.91 778.54 565.95 C 778.52 565.95 778.5 565.96 778.48 565.96 C 778.35 566 778.21 566.03 778.09 566.06 C 777.96 566.09 777.83 566.13 777.7 566.16 C 777.59 566.19 777.48 566.21 777.36 566.24 C 777.25 566.27 777.14 566.3 777.02 566.32 C 776.89 566.36 776.75 566.39 776.61 566.42 C 776.43 566.46 776.25 566.5 776.07 566.54 C 775.71 566.62 775.34 566.7 774.98 566.77 C 774.57 566.86 774.17 566.93 773.76 567.01 C 773.44 567.07 773.11 567.13 772.79 567.18 C 772.6 567.21 772.42 567.25 772.23 567.27 C 771.87 567.34 771.5 567.39 771.13 567.45 C 770.63 567.52 770.13 567.59 769.64 567.65 C 769.54 567.66 769.44 567.67 769.34 567.68 C 769.2 567.7 769.05 567.72 768.91 567.73 C 768.54 567.77 768.17 567.81 767.8 567.85 C 767.61 567.87 767.43 567.89 767.24 567.9 C 766.87 567.93 766.5 567.96 766.12 567.99 C 765.94 568 765.75 568.02 765.57 568.03 C 765.2 568.05 764.82 568.07 764.45 568.09 C 764.26 568.1 764.07 568.11 763.89 568.11 C 763.7 568.12 763.52 568.13 763.33 568.14 C 763.14 568.14 762.95 568.15 762.77 568.15 C 762.75 568.15 762.73 568.15 762.71 568.15 C 762.54 568.16 762.38 568.16 762.21 568.16 C 762.02 568.16 761.84 568.17 761.65 568.17 L 788.1 522.21 L 793.91 512.12 C 799.97 501.61 808.73 492.84 819.23 486.77 C 829.28 480.96 840.67 477.78 852.27 477.51 Z M 747.96 658.3 C 741.91 668.83 733.16 677.61 722.64 683.69 C 712.27 689.7 700.48 692.9 688.5 692.99 C 695.09 681.69 704.56 672.27 715.89 665.71 C 726.14 659.79 737.67 656.35 749.46 655.69 Z M 515.27 437.07 C 514.05 437.76 512.82 438.42 511.58 439.04 C 502.05 443.76 491.52 446.24 480.86 446.24 L 437.41 446.24 L 437.7 445.74 L 437.78 445.6 L 441.84 438.56 L 471.61 387.01 L 526.22 387.01 C 534.9 387.01 539.18 392.84 540.62 395.35 C 542.06 397.86 544.93 404.5 540.55 411.99 C 534.46 422.39 525.72 431.07 515.27 437.07 M 506.21 531.88 C 500.13 542.24 491.39 550.89 480.92 556.87 C 470.45 562.85 458.53 566.01 446.45 566.01 L 368.26 566.01 L 417.7 480.38 L 478.7 480.38 C 484.27 480.73 489.46 482.31 494.14 485.11 C 499.13 488.1 503.34 492.39 506.3 497.52 C 509.27 502.64 510.89 508.41 510.97 514.2 C 511.07 520.38 509.46 526.32 506.21 531.88 M 1425.06 512.12 C 1431.12 501.61 1439.87 492.84 1450.38 486.77 C 1460.73 480.79 1472.5 477.59 1484.46 477.5 L 1480.4 484.09 C 1474.35 494.62 1465.59 503.4 1455.08 509.48 C 1444.79 515.44 1433.1 518.64 1421.22 518.78 Z M 1647.77 467.77 L 1626.19 505.14 L 1626.15 505.22 L 1626.08 505.18 L 1609.81 533.48 L 1609.88 533.52 C 1603.83 544.04 1595.08 552.8 1584.59 558.88 C 1574.07 564.96 1562.1 568.17 1549.95 568.17 L 1392.8 568.17 L 1404 548.7 C 1409 551.46 1414.66 552.93 1420.45 552.93 C 1438.59 552.93 1456.48 548.12 1472.18 539.04 C 1487.78 530.02 1500.79 517.01 1509.82 501.43 L 1509.84 501.39 C 1509.85 501.37 1509.86 501.35 1509.88 501.32 L 1514.05 494.57 L 1514.31 494.13 C 1516.86 489.71 1518.37 484.82 1518.76 479.82 C 1518.84 478.77 1518.88 477.7 1518.86 476.64 C 1518.83 475.35 1518.73 474.06 1518.56 472.79 C 1518.34 471.09 1517.98 469.41 1517.5 467.77 C 1516.73 465.16 1515.66 462.64 1514.29 460.27 C 1513.93 459.63 1513.54 459.01 1513.13 458.4 C 1510.35 454.23 1506.67 450.72 1502.39 448.15 C 1497.17 445.01 1491.14 443.35 1484.97 443.35 C 1482.41 443.35 1479.84 443.45 1477.29 443.64 C 1461.83 444.8 1446.76 449.43 1433.29 457.21 C 1427.97 460.29 1422.95 463.82 1418.29 467.77 C 1409.2 475.45 1401.46 484.69 1395.48 495.07 L 1391.31 502.29 L 1391.31 502.3 L 1391.09 502.17 C 1390.51 503.18 1389.98 504.22 1389.51 505.29 L 1389.32 505.18 L 1373.05 533.48 C 1367 544.01 1358.24 552.79 1347.73 558.88 C 1337.36 564.88 1325.56 568.09 1313.58 568.17 L 1323.88 550.26 L 1324.29 550.5 L 1340.57 522.19 L 1356.74 494.13 C 1359.82 488.78 1361.39 482.73 1361.29 476.64 C 1361.23 473.63 1360.77 470.65 1359.93 467.77 C 1359.16 465.16 1358.09 462.64 1356.72 460.27 C 1353.84 455.29 1349.72 451.09 1344.82 448.15 C 1339.6 445.01 1333.57 443.35 1327.4 443.35 C 1320.11 443.35 1312.87 444.12 1305.79 445.64 C 1295.27 447.89 1285.1 451.79 1275.72 457.21 C 1270.4 460.29 1265.38 463.82 1260.72 467.77 L 1253.59 467.77 L 1246.69 479.73 C 1246.68 479.73 1246.68 479.73 1246.68 479.74 C 1240.69 489.45 1232.36 497.55 1222.46 503.28 C 1212.09 509.28 1200.3 512.49 1188.32 512.57 L 1214.1 467.77 L 1202.03 467.77 C 1201.27 465.16 1200.19 462.64 1198.82 460.27 C 1197.86 458.59 1196.74 457 1195.51 455.52 C 1193.08 452.6 1190.18 450.1 1186.93 448.15 C 1184.31 446.58 1181.5 445.38 1178.57 444.57 C 1175.64 443.77 1172.59 443.35 1169.5 443.35 C 1151.38 443.35 1133.51 448.14 1117.82 457.21 C 1112.5 460.29 1107.48 463.82 1102.82 467.77 C 1093.73 475.45 1085.99 484.69 1080.01 495.07 L 1074.19 505.17 L 1074.08 505.35 L 1073.78 505.18 L 1057.51 533.48 C 1051.46 544.01 1042.7 552.79 1032.19 558.88 C 1021.82 564.88 1010.02 568.09 998.04 568.17 L 1003.89 558 C 1005.58 555.57 1007.17 553.07 1008.65 550.5 L 1024.92 522.2 L 1056.31 467.77 L 1030.98 467.77 L 1048.02 438.26 L 1073.35 438.26 L 1078.55 429.2 L 1090.2 409.02 L 1050.78 409.02 L 1048.96 412.16 L 1048.85 412.36 L 1033.96 438.26 L 1016.89 467.77 L 1008.42 482.45 L 995.33 505.15 L 995.21 505.35 L 994.9 505.17 L 975.1 539.58 C 969.42 547.41 962.14 554 953.73 558.88 C 943.35 564.88 931.55 568.09 919.58 568.17 L 946.02 522.21 L 977.43 467.77 L 1028.25 379.66 L 988.83 379.66 L 938.01 467.77 L 916.45 505.15 L 916.33 505.36 L 916.01 505.18 L 899.74 533.48 C 893.69 544.01 884.93 552.79 874.42 558.88 C 864.05 564.88 852.25 568.09 840.27 568.17 L 846.97 556.53 C 848.29 554.56 849.54 552.55 850.72 550.5 L 866.98 522.21 L 883.16 494.13 C 884.5 491.82 885.55 489.38 886.3 486.86 L 897.32 467.77 L 886.35 467.77 C 885.59 465.16 884.52 462.64 883.15 460.27 C 880.27 455.29 876.15 451.09 871.25 448.15 C 870.75 447.85 870.23 447.56 869.72 447.29 C 864.86 444.71 859.41 443.35 853.82 443.35 C 835.71 443.35 817.84 448.14 802.14 457.21 C 796.82 460.29 791.8 463.82 787.14 467.77 C 778.05 475.45 770.31 484.69 764.33 495.07 L 758.51 505.17 L 758.51 505.17 L 758.44 505.29 L 758.44 505.29 L 758.24 505.18 L 741.97 533.48 C 735.92 544.01 727.16 552.79 716.65 558.88 C 706.28 564.88 694.48 568.09 682.5 568.17 L 689.23 556.48 C 689.23 556.48 689.23 556.48 689.23 556.47 C 690.54 554.53 691.78 552.53 692.95 550.5 L 709.22 522.19 L 740.61 467.77 L 701.2 467.77 L 679.63 505.15 L 679.55 505.28 L 679.36 505.17 L 660.27 538.34 C 660.27 538.35 660.27 538.35 660.27 538.35 C 660.27 538.35 660.27 538.35 660.27 538.36 C 654.47 546.73 646.87 553.75 638.03 558.88 C 627.65 564.88 615.86 568.09 603.88 568.17 L 630.32 522.21 L 661.73 467.77 L 622.31 467.77 L 600.74 505.15 L 600.7 505.23 L 600.61 505.18 L 584.34 533.48 C 578.29 544.01 569.53 552.79 559.02 558.88 C 548.65 564.88 536.85 568.09 524.87 568.17 L 536.17 548.53 L 536.23 548.05 C 541.36 538.99 544.36 528.99 544.99 518.81 C 545.1 517.11 545.14 515.4 545.11 513.7 C 544.94 502.16 541.75 490.72 535.9 480.61 C 533.54 476.52 530.75 472.69 527.62 469.19 C 529.19 468.39 530.73 467.56 532.26 466.68 C 547.88 457.72 560.94 444.77 570.03 429.22 C 574.72 421.2 577.14 412.12 577.01 402.99 C 576.89 394.4 574.55 385.88 570.23 378.36 C 565.92 370.84 559.75 364.52 552.39 360.08 C 545.39 355.86 537.4 353.41 529.14 352.95 C 528.17 352.89 527.2 352.87 526.22 352.87 L 358.78 352.87 C 340.66 352.87 322.79 357.66 307.09 366.73 C 291.41 375.79 278.33 388.88 269.28 404.58 L 263.46 414.68 L 232.8 467.96 L 272.19 467.96 L 293.05 431.72 L 298.86 421.63 C 304.92 411.12 313.68 402.36 324.18 396.29 C 334.68 390.22 346.64 387.01 358.78 387.01 L 432.18 387.01 L 402.42 438.56 L 382.71 472.71 L 309.12 600.16 L 348.55 600.16 L 348.68 599.93 L 446.45 599.93 C 463.83 599.93 480.99 595.54 496.21 587.23 C 496.23 587.25 496.24 587.28 496.25 587.3 C 499.04 591.45 502.7 594.96 506.97 597.52 C 508.71 598.57 510.54 599.45 512.44 600.16 C 516.23 601.58 520.27 602.31 524.39 602.31 C 531.46 602.31 538.49 601.59 545.37 600.16 C 556.12 597.93 566.5 593.99 576.07 588.46 C 578.74 592.11 582.11 595.2 585.98 597.52 C 587.72 598.57 589.55 599.45 591.45 600.16 C 595.23 601.58 599.28 602.31 603.39 602.31 C 610.46 602.31 617.49 601.59 624.37 600.16 C 635.02 597.95 645.31 594.06 654.81 588.61 C 657.46 592.19 660.79 595.23 664.6 597.52 C 666.34 598.57 668.18 599.45 670.07 600.16 C 673.86 601.58 677.91 602.31 682.02 602.31 C 689.09 602.31 696.12 601.59 703 600.16 C 713.77 597.92 724.17 593.97 733.75 588.43 C 733.77 588.42 733.78 588.41 733.8 588.4 C 733.8 588.4 733.8 588.4 733.8 588.4 C 736.48 592.07 739.87 595.19 743.75 597.52 C 743.85 597.58 743.96 597.64 744.06 597.7 C 744.21 597.79 744.37 597.88 744.52 597.97 C 744.68 598.05 744.83 598.14 744.99 598.23 C 745.3 598.4 745.62 598.56 745.94 598.72 C 746.68 599.1 747.43 599.44 748.2 599.76 C 748.5 599.88 748.8 600 749.11 600.11 C 749.14 600.13 749.18 600.14 749.21 600.16 C 749.25 600.17 749.28 600.18 749.31 600.19 C 749.38 600.22 749.45 600.25 749.52 600.27 C 749.53 600.27 749.54 600.28 749.55 600.28 C 749.61 600.3 749.66 600.32 749.72 600.34 C 749.86 600.39 749.99 600.44 750.12 600.48 C 750.13 600.48 750.14 600.49 750.16 600.5 C 750.18 600.5 750.21 600.51 750.23 600.52 C 750.34 600.56 750.45 600.59 750.57 600.63 C 750.58 600.64 750.6 600.64 750.61 600.65 C 750.62 600.65 750.63 600.65 750.64 600.66 C 750.7 600.68 750.75 600.69 750.81 600.71 C 750.82 600.71 750.84 600.72 750.86 600.73 C 750.88 600.73 750.89 600.73 750.91 600.74 C 750.96 600.76 751.02 600.78 751.07 600.79 C 751.14 600.81 751.21 600.84 751.29 600.86 C 751.48 600.92 751.66 600.97 751.86 601.02 C 751.88 601.03 751.9 601.04 751.93 601.05 C 752.02 601.07 752.12 601.1 752.21 601.12 C 752.47 601.19 752.72 601.26 752.98 601.32 C 753 601.33 753.02 601.33 753.05 601.34 C 753.07 601.34 753.09 601.35 753.11 601.35 C 753.17 601.37 753.23 601.39 753.3 601.4 C 753.41 601.43 753.52 601.45 753.62 601.47 C 753.71 601.49 753.79 601.51 753.88 601.53 C 753.96 601.55 754.04 601.57 754.13 601.59 C 754.15 601.59 754.17 601.59 754.19 601.6 C 754.19 601.6 754.19 601.6 754.19 601.6 C 754.23 601.61 754.28 601.61 754.32 601.62 C 754.7 601.7 755.07 601.77 755.44 601.84 C 755.44 601.83 755.45 601.84 755.45 601.84 C 755.82 601.9 756.2 601.96 756.57 602.01 C 756.76 602.03 756.95 602.05 757.14 602.08 C 757.25 602.09 757.37 602.11 757.48 602.12 L 757.49 602.12 C 757.51 602.12 757.54 602.12 757.56 602.12 C 757.57 602.12 757.59 602.12 757.61 602.13 C 757.67 602.14 757.73 602.14 757.8 602.15 C 757.92 602.16 758.04 602.17 758.17 602.18 L 758.23 602.19 C 758.32 602.2 758.4 602.2 758.48 602.21 C 758.64 602.22 758.8 602.23 758.96 602.24 C 759.11 602.25 759.25 602.26 759.4 602.27 C 759.44 602.27 759.47 602.27 759.51 602.27 C 759.64 602.28 759.78 602.29 759.91 602.29 C 759.95 602.29 760 602.3 760.04 602.3 C 760.19 602.3 760.35 602.3 760.5 602.31 C 760.55 602.31 760.59 602.31 760.64 602.31 C 760.81 602.31 760.98 602.31 761.16 602.31 L 761.17 602.31 C 761.43 602.31 761.68 602.31 761.94 602.31 C 762.27 602.31 762.61 602.3 762.94 602.3 C 763.2 602.3 763.45 602.29 763.71 602.28 C 763.99 602.28 764.28 602.27 764.56 602.26 C 764.84 602.25 765.12 602.24 765.41 602.23 C 765.69 602.21 765.97 602.2 766.26 602.19 C 766.54 602.18 766.82 602.16 767.1 602.14 C 767.39 602.12 767.67 602.11 767.95 602.09 C 768.11 602.08 768.28 602.07 768.44 602.05 C 768.67 602.04 768.9 602.02 769.13 602 C 769.16 602 769.18 602 769.21 602 C 769.36 601.99 769.5 601.98 769.64 601.96 C 769.8 601.95 769.97 601.94 770.13 601.92 C 770.18 601.92 770.23 601.91 770.28 601.91 C 770.42 601.9 770.56 601.88 770.7 601.87 C 770.91 601.85 771.12 601.83 771.33 601.81 C 771.59 601.79 771.85 601.76 772.11 601.73 C 772.17 601.72 772.23 601.72 772.29 601.71 C 772.53 601.68 772.77 601.66 773.01 601.63 C 773.29 601.6 773.57 601.56 773.85 601.53 C 774.11 601.5 774.37 601.46 774.63 601.43 C 774.69 601.42 774.75 601.42 774.8 601.41 C 775.05 601.38 775.29 601.34 775.53 601.31 C 775.81 601.27 776.09 601.23 776.36 601.19 L 776.37 601.19 C 776.63 601.15 776.9 601.11 777.16 601.07 C 777.2 601.06 777.25 601.05 777.29 601.05 C 777.54 601 777.79 600.96 778.04 600.92 C 778.31 600.88 778.59 600.83 778.87 600.78 C 779.15 600.73 779.43 600.68 779.7 600.63 C 779.97 600.59 780.24 600.53 780.51 600.48 C 780.79 600.43 781.08 600.37 781.36 600.32 L 781.37 600.32 L 769.18 621.43 L 753.67 621.43 C 734.43 621.43 715.45 626.52 698.79 636.16 C 682.14 645.79 668.26 659.7 658.66 676.38 C 655.58 681.73 654.02 687.77 654.12 693.87 C 654.23 699.58 655.81 705.24 658.7 710.22 C 661.58 715.21 665.69 719.4 670.59 722.34 C 670.77 722.45 670.95 722.55 671.12 722.65 C 676.23 725.59 682.05 727.13 688.01 727.13 C 698.23 727.13 708.38 725.61 718.09 722.65 C 725.62 720.36 732.89 717.21 739.75 713.25 C 755.45 704.16 768.53 691.04 777.57 675.32 L 793.82 647.03 L 820.89 600.16 L 822.4 597.54 C 824.13 598.57 825.95 599.45 827.84 600.16 C 831.62 601.58 835.68 602.31 839.79 602.31 C 846.86 602.31 853.89 601.59 860.77 600.16 C 871.54 597.92 881.94 593.97 891.52 588.43 C 891.57 588.39 891.63 588.36 891.68 588.34 C 894.36 592.04 897.77 595.18 901.68 597.52 C 903.42 598.57 905.25 599.45 907.15 600.16 C 910.93 601.58 914.98 602.31 919.09 602.31 C 926.16 602.31 933.2 601.59 940.07 600.16 C 950.68 597.96 960.93 594.09 970.39 588.67 C 973.04 592.23 976.36 595.25 980.14 597.52 C 981.88 598.57 983.71 599.45 985.61 600.16 C 989.4 601.58 993.45 602.31 997.56 602.31 C 1004.62 602.31 1011.66 601.59 1018.54 600.16 C 1029.31 597.92 1039.71 593.97 1049.29 588.43 C 1049.34 588.4 1049.39 588.37 1049.44 588.34 C 1052.12 592.04 1055.52 595.18 1059.43 597.52 C 1061.17 598.57 1063 599.45 1064.9 600.16 C 1068.68 601.58 1072.73 602.31 1076.84 602.31 C 1083.91 602.31 1090.94 601.59 1097.82 600.16 C 1108.59 597.92 1118.99 593.97 1128.58 588.43 C 1144.28 579.34 1157.36 566.23 1166.4 550.5 L 1171.1 542.32 C 1176.16 545.2 1181.93 546.72 1187.83 546.72 C 1195.07 546.72 1202.28 545.95 1209.32 544.46 L 1177.16 600.16 L 1216.59 600.16 L 1234.86 568.51 L 1234.98 568.59 L 1261.67 522.21 L 1267.49 512.12 C 1273.55 501.61 1282.3 492.84 1292.8 486.77 C 1303.16 480.79 1314.95 477.58 1326.91 477.5 L 1310.97 505.16 L 1310.84 505.4 L 1310.44 505.17 L 1283.74 551.56 C 1280.66 556.91 1279.1 562.96 1279.21 569.05 C 1279.32 574.76 1280.9 580.42 1283.78 585.4 C 1286.66 590.39 1290.78 594.58 1295.68 597.52 C 1297.42 598.57 1299.25 599.45 1301.14 600.16 C 1304.93 601.58 1308.98 602.31 1313.1 602.31 C 1320.16 602.31 1327.2 601.59 1334.07 600.16 C 1344.85 597.92 1355.25 593.97 1364.83 588.43 C 1364.86 588.41 1364.89 588.39 1364.93 588.37 C 1367.61 592.06 1371 595.18 1374.89 597.52 C 1376.64 598.57 1378.46 599.45 1380.36 600.16 C 1384.08 601.55 1388.05 602.29 1392.08 602.31 L 1549.95 602.31 C 1568.09 602.31 1585.98 597.51 1601.69 588.43 C 1617.39 579.34 1630.46 566.23 1639.51 550.5 L 1655.77 522.21 L 1687.2 467.77 Z M 1647.77 467.77 '/%3E%3C/svg%3E");

  --nav-h: 76px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--su-dark-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--rosso); color: var(--navy); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: -100%; left: var(--s-3); z-index: 300;
  padding: var(--s-2) var(--s-3);
  background: var(--rosso); color: var(--navy);
  border-radius: var(--r-sm); font-size: var(--fs-small);
}
.skip-link:focus { top: var(--s-3); }

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   Tre voci, come nel manuale.

     display  condensato e obliquo. E' la voce ribelle: il manuale la usa
              enorme, tagliata, quasi sempre inclinata. Regge corpi che un
              didone non reggerebbe, ed e' qui che il sito smette di
              somigliare a un catalogo nautico.
     testo    stesso carattere a larghezza normale: struttura e leggibilita'.
     serif    solo cifre, date e il 1979. Non fa titoli.

   L'inclinazione del display NON e' un corsivo qualsiasi: e' lo stesso
   gesto dei 30 gradi che regge logo, triangoli e parallelogramma.
   -------------------------------------------------------------------------- */

/* Le grandi aperture — condensato, pesante, in maiuscolo */
.mega, .display, .h1 {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.005em;
  text-wrap: balance;
}
.mega    { font-size: var(--fs-mega);    line-height: .85; font-weight: 900; }
.display { font-size: var(--fs-display); line-height: .88; }
.h1      { font-size: var(--fs-h1);      line-height: .94; }

/* Inclinato: la variante «da manifesto». Va su una riga sola o due,
   mai su un paragrafo. */
.oblique { font-style: italic; }

/* Titoli che strutturano — larghezza normale, peso medio-alto */
.h2, .h3 {
  font-family: var(--font-text);
  font-stretch: normal;
  font-weight: 700;
  text-wrap: balance;
}
.h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.024em; }
.h3 { font-size: var(--fs-h3); line-height: 1.3;  letter-spacing: -.012em; }

/* .em era l'accento in corsivo didone del vecchio impianto.
   Ora e' l'accento ribelle: la parola passa in rosso e si inclina.
   Il markup esistente (<em class="em">) continua a funzionare. */
.em {
  font-style: italic;
  font-weight: inherit;
  color: var(--accent);
  font-synthesis: none;
}
.h1 .em, .display .em, .mega .em { color: inherit; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.01em;
  max-width: 44ch;
  font-weight: 500;
}

.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--s-3); }
.prose p { max-width: 62ch; }

/* Occhiello: maiuscoletto spaziato. La gerarchia la fanno spazio e filetto. */
.eyebrow {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-3);
}
.eyebrow--rule { padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.eyebrow--dim { color: var(--ink-dim); }

/* Occhiello dentro il parallelogramma: la targhetta del manuale.
   Il contenuto e' contro-inclinato, cosi' il testo resta dritto. */
.eyebrow--tag {
  display: inline-flex; align-items: center;
  min-height: 2.3em;
  margin-bottom: var(--s-3);
  padding-inline: 1.7em;
  background: var(--rosso); color: var(--su-rosso);
  transform: skewX(var(--shear));
}
.eyebrow--tag > * { display: inline-block; transform: skewX(var(--shear-inv)); }

/* Cifre e date: e' l'unico posto dove entra il serif del manuale. */
.mark-1979,
.num-serif {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: .01em;
  font-variant-numeric: lining-nums tabular-nums;
  text-transform: none;
}

.text-dim { color: var(--ink-dim); }
.text-rosso { color: var(--accent); }
.text-corallo { color: var(--accent); } /* alias del markup precedente */

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}

.section { padding-block: var(--pad-section); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 5rem); }

/* Superfici */
/* Ogni superficie ridefinisce tre token: inchiostro attenuato, filetto e
   accento. I componenti leggono solo quei tre e non sanno su che fondo
   stanno — cosi' aggiungere una superficie non richiede di ritoccare
   specifiche, tabelle, form e cartellini uno per uno.
   Ogni accoppiata sotto e' verificata a >= 4,5:1. */
.su-dark, .su-navy {
  --surface: var(--su-dark-bg);
  --ink: var(--panna); --ink-dim: #9A9AC4;        /* 6,3:1 su navy */
  --rule: rgba(255, 232, 223, .22); --accent: var(--rosso); /* 4,8:1 su navy */
  --field-bg: rgba(255, 232, 223, .06);
}
.su-light {
  --card-bg: var(--bianco);
  --surface: var(--panna);
  --ink: var(--navy); --ink-dim: #5C5C86;        /* 5,4:1 su panna */
  --rule: rgba(0, 0, 102, .18); --accent: var(--mattone); /* 4,8:1 su panna */
  --field-bg: rgba(0, 0, 102, .04);
}
/* La sabbia e' piu' scura della panna: il mattone qui scende a 4,3:1,
   quindi su questa superficie l'accento passa al navy (13,4:1). Il rosso
   resta disponibile come grafica — per esempio nella targhetta. */
.su-sabbia {
  --card-bg: var(--bianco);
  --surface: var(--sabbia);
  --ink: var(--navy); --ink-dim: #545478;        /* 5,3:1 su sabbia */
  --rule: rgba(0, 0, 102, .2); --accent: var(--navy);
  --field-bg: rgba(0, 0, 102, .04);
}
.su-rosso {
  --card-bg: var(--panna);
  --surface: var(--rosso);
  --ink: var(--navy); --ink-dim: rgba(0, 0, 102, .74);
  --rule: rgba(0, 0, 102, .35); --accent: var(--navy);
  --field-bg: rgba(0, 0, 102, .07);
}
.su-teal {
  --card-bg: rgba(255, 232, 223, .1);
  --surface: var(--teal);
  --ink: var(--panna); --ink-dim: #CBDCD6;
  --rule: rgba(255, 232, 223, .3); --accent: var(--mint);
  --field-bg: rgba(255, 232, 223, .07);
}
.su-lime {
  --card-bg: var(--panna);
  --surface: var(--lime);
  --ink: var(--navy); --ink-dim: #46550F;
  --rule: rgba(0, 0, 102, .3); --accent: var(--rosso-ink);
  --field-bg: rgba(0, 0, 102, .06);
}

.su-dark  { background: var(--su-dark-bg);    color: var(--ink); }
.su-navy  { background: var(--su-dark-panel); color: var(--ink); --surface: var(--su-dark-panel); }
.su-light { background: var(--su-light-bg);   color: var(--ink); }

/* Cornice interna arrotondata (principio ricorrente nelle reference) */
.inset {
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Blocco editoriale: titolo a sinistra, testo a destra (pattern Saltline) */
.editorial {
  display: grid;
  /* La colonna del titolo un filo piu' larga: i titoli in didone sono ampi
     e a meta' esatta spezzavano in troppe righe. */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: start;
}
.editorial__aside { display: flex; flex-direction: column; gap: var(--s-3); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   4bis. BLOCCO EDITORIALE CON IMMAGINE

   Sostituisce l'impianto precedente — titolo e testo affiancati, poi una
   fotografia a piena larghezza sotto — che schiacciava il testo fra due
   elementi enormi e dava all'immagine un peso che non le compete.

   Qui il testo tiene una colonna sola, continua dall'occhiello alla
   chiamata all'azione, e la fotografia sta di lato in una colonna piu'
   stretta: diventa un appoggio, non un manifesto. Le due sezioni della
   home si specchiano (--flip), cosi' la pagina alterna invece di ripetere.
   -------------------------------------------------------------------------- */
.feature {
  /* Il blocco e' piu' stretto del contenitore: a piena larghezza la
     colonna di testo restava molto piu' larga della sua misura di lettura
     e fra testo e fotografia si apriva un vuoto morto di trecento pixel. */
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
/* Specchiando con order la fotografia finiva nella colonna larga e
   diventava piu' grande del testo: quando si inverte l'ordine vanno
   invertite anche le proporzioni. */
.feature--flip { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.feature--flip .feature__body  { order: 2; }
.feature--flip .feature__media { order: 1; }

.feature__body { max-width: 62ch; }
/* Il titolo qui e' piu' contenuto della scala generale: deve stare in
   dialogo col testo che lo segue, non sovrastarlo. */
.feature__body .h1 { font-size: clamp(2rem, 3.6vw, 3.25rem); }
.feature__body .lead { max-width: none; margin-top: var(--s-3); }
.feature__body .prose { margin-top: var(--s-3); }
.feature__body .btn-row { margin-top: var(--s-5); }

.feature__media { margin: 0; position: relative; }
.feature__media picture { display: block; }
.feature__media img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--r-lg);
}
/* Didascalia sul filo dell'immagine, con il filetto a 30 gradi. */
.feature__cap {
  margin-top: var(--s-3);
  font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim);
  padding-inline-start: .9rem; position: relative;
}
.feature__cap::before {
  content: ""; position: absolute; inset-block: .1em; inset-inline-start: 0;
  width: 2px; background: var(--accent);
  transform: skewX(var(--shear));
}

/* Elenco delle tecnologie: righe con filetto, sotto al testo. */
.feature__body .partners { margin-top: var(--s-4); }

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: var(--s-5); }
  .feature--flip .feature__body,
  .feature--flip .feature__media { order: 0; }
  .feature__media img { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   5. NAVIGAZIONE
   Logo a sinistra — e' la richiesta e anche la lettura giusta del manuale:
   il lettering «Buglione» e' un marchio lungo e orizzontale, a destra
   sarebbe schiacciato dal bordo. A sinistra apre la riga.
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background var(--t-mid) var(--ease), backdrop-filter var(--t-mid);
}
.nav::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 102, .78), rgba(0, 0, 102, 0));
  transition: opacity var(--t-mid) var(--ease);
}
.nav.is-stuck {
  background: rgba(0, 0, 102, .92);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
}
.nav.is-stuck::after { opacity: 0; }

.nav__inner {
  width: 100%; max-width: var(--shell-max); margin-inline: auto;
  padding-inline: var(--pad-inline);
  display: flex; align-items: center; gap: var(--s-4);
}

/* 1. marchio  2. link (spinti a destra)  3. bottone */
.nav__brand {
  flex: none; order: 1; margin-inline-end: auto;
  display: flex; align-items: center; gap: .8rem;
  min-height: 44px;
  color: var(--panna);
}
.nav__brand:hover { color: var(--rosso); }
/* Il lettering e' un SVG applicato come maschera: cosi' prende
   currentColor (panna a riposo, rosso al passaggio) e resta un file
   solo, in cache, invece di 26 KB inline in ogni pagina. */
.nav__brand .logo {
  display: block;
  width: clamp(128px, 13vw, 176px);
  aspect-ratio: 1454 / 374;
  background: currentColor;
  -webkit-mask: var(--logo-mask) no-repeat center / contain;
          mask: var(--logo-mask) no-repeat center / contain;
  transition: background-color var(--t-fast) var(--ease);
}
/* Il payoff sta accanto al marchio, separato dal filetto a 30 gradi:
   ricompare la regola geometrica anche nel dettaglio piu' piccolo. */
.nav__payoff {
  font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-dim); white-space: nowrap;
  padding-inline-start: .9rem; position: relative;
}
.nav__payoff::before {
  content: ""; position: absolute; inset-block: -.15em; inset-inline-start: 0;
  width: 1px; background: var(--rule);
  transform: skewX(var(--shear));
}

.nav__links {
  order: 2;
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.4rem);
}
.nav__links > .btn { margin-left: clamp(.5rem, 1.4vw, 1.5rem); }
.nav__links a:not(.btn) {
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--panna);
}
/* Il filetto di stato e' inclinato a 30 gradi, come tutto il resto. */
.nav__links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--rosso);
  transform: scaleX(0) skewX(var(--shear)); transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.nav__links a:not(.btn):hover::after,
.nav__links a:not(.btn)[aria-current="page"]::after { transform: scaleX(1) skewX(var(--shear)); }
.nav__links a:not(.btn)[aria-current="page"] { color: var(--bianco); }

.nav__toggle {
  display: none; width: 44px; height: 44px; flex: none; order: 3;
  border: 1px solid var(--rule);
  align-items: center; justify-content: center;
  transform: skewX(var(--shear));
}
.nav__toggle > span { transform: skewX(var(--shear-inv)); }
.nav__toggle span {
  display: block; width: 17px; height: 2px; background: var(--panna);
  position: relative; transition: background var(--t-fast);
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 2px;
  background: var(--panna); transition: transform var(--t-fast) var(--ease);
}
.nav__toggle span::before { top: -5.5px; }
.nav__toggle span::after  { top:  5.5px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. BOTTONI
   Parallelogramma a 30 gradi: e' la targhetta del manuale (la stessa del
   badge BUGLIONE) usata come bottone. La pillola precedente e' sparita —
   era il segno piu' generico del vecchio sito.

   Due accortezze necessarie:
     - il contenuto e' contro-inclinato, cosi' il testo resta dritto;
     - lo skew non cambia l'area cliccabile agli angoli, quindi il padding
       laterale e' generoso: niente bersagli sotto i 44px.
   -------------------------------------------------------------------------- */
.btn {
  /* Lo skew tiene l'angolo esatto a 30 gradi qualunque sia l'altezza del
     bottone, anche quando l'etichetta va a capo: cosa che un clip-path a
     scarto fisso non fa (su un bottone alto il doppio l'angolo si
     dimezzerebbe). Il contenuto sta in .btn__label ed e' contro-inclinato,
     cosi' il testo resta dritto e resta selezionabile. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  padding-block: .8em;
  padding-inline: 2.1em;
  font-family: var(--font-text);
  font-size: var(--fs-small); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border: 0; border-radius: 0;
  transform: skewX(var(--shear));
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              translate var(--t-fast) var(--ease);
}
.btn__label {
  display: inline-flex; align-items: center; gap: .6em;
  transform: skewX(var(--shear-inv));
  text-align: center;
}

.btn:hover  { translate: 3px 0; }
.btn:active { translate: 0 0; }

.btn__arrow { transition: transform var(--t-fast) var(--ease); flex: none; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Sul rosso il testo va in navy: fa 4,8:1, mentre il bianco si fermava a 3,7:1. */
.btn--primary { background: var(--rosso); color: var(--su-rosso); }
.btn--primary:hover { background: var(--lime); color: var(--navy); }

/* Il bottone «fantasma»: con lo skew il bordo segue la forma, quindi
   basta un border — non serve piu' il doppio parallelogramma. */
.btn--ghost {
  border: 2px solid var(--rule);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.su-rosso .btn--ghost:hover { border-color: var(--navy); color: var(--navy); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Link con freccia: resta dritto (dentro un paragrafo un link inclinato
   disturberebbe la riga), ma il filetto sotto prende i 30 gradi. */
.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: var(--fs-small); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding-bottom: 3px; position: relative;
}
.link-arrow::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0;
  height: 2px; background: currentColor;
  transform: skewX(var(--shear));
  transition: opacity var(--t-fast) var(--ease);
}
.link-arrow:hover::after { opacity: .45; }
.link-arrow svg { transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover svg { transform: translate(3px, 0); }

/* --------------------------------------------------------------------------
   7. HERO SCROLL-EXPAND
   Lo scroll e' trattenuto: la pagina non si muove finche' la fotografia non
   ha finito di espandersi. Progresso 0 -> 1 accumulato da rotella, tocco e
   tastiera; a 1 lo scroll viene restituito alla pagina.
   -------------------------------------------------------------------------- */
.expand {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--navy);
}

/* Fondo a piena pagina, sfuma man mano che la card cresce */
.expand__bg { position: absolute; inset: 0; z-index: 0; }
.expand__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.expand__bg::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 36, .38);
}

/* Palco a tutta altezza: la card sta dietro, il titolo davanti */
.expand__stage {
  position: relative; z-index: 1;
  width: 100%; height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

/* La card che si espande. Larghezza e altezza sono scritte dal JS. */
.expand__media {
  position: absolute; z-index: 0;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 300px; height: 400px;
  max-width: 95vw; max-height: 85svh;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 0 50px rgba(0, 0, 20, .45);
}
.expand__media img { width: 100%; height: 100%; object-fit: cover; }
.expand__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* --tint viene scritto dal JS: si alleggerisce mentre la card cresce */
  background: rgba(0, 0, 26, var(--tint, .42));
}

/* Le due meta' del titolo, davanti alla card, si allontanano ai lati */
.expand__title {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(.35rem, 1vw, .9rem);
  width: 100%;
  pointer-events: none;
}
.expand__word {
  display: block;
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-style: italic;
  /* La card di partenza e' 300px fissi, non una frazione di viewport:
     quindi anche il corpo e' fisso, e scala solo se lo schermo e' piu'
     stretto della card. A 11rem le parole toccavano i bordi. */
  font-size: min(6.75rem, 34vw);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: .86;
  text-transform: uppercase;
  color: var(--panna);
  white-space: nowrap;
  text-shadow: 0 2px 30px rgba(0, 0, 40, .5);
  will-change: transform;
}

/* Centratura ottica, misurata e non stimata. Con le metriche reali del
   carattere «ORA» risulta simmetrica (sbordo 5,4px a sinistra e 6,0px a
   destra: si annullano), mentre in «48′» l'apostrofo sporge di 11,6px
   oltre la larghezza dichiarata e tira la parola a destra.
   Il margine destro sposta la scatola a sinistra di meta' del suo valore,
   quindi .13em compensa esattamente quello sbordo.
   Il margine, e non transform: quello lo scrive il JS dell'espansione. */
.expand__word--bottom { margin-inline-end: .13em; }

/* Il bottone resta davanti alla fotografia e cliccabile in ogni momento:
   e' la sola azione dell'hero, non deve sparire con l'espansione. */
.expand__cta {
  position: absolute; z-index: 4;
  inset-inline: 0; bottom: clamp(4.5rem, 11vh, 6.5rem);
  display: flex; justify-content: center;
}

/* Invito allo scroll: nessuna parola, solo un segno che pulsa.
   Necessario perche' la pagina e' trattenuta e senza indizio l'utente
   non ha modo di capire che deve scorrere. */
.expand__hint {
  position: absolute; z-index: 3;
  inset-inline: 0; bottom: clamp(1.5rem, 4vh, 2.25rem);
  display: flex; justify-content: center;
  transition: opacity var(--t-mid) var(--ease);
}
.expand__hint span {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, transparent, var(--rosso));
  transform-origin: top;
  animation: hint 1.9s var(--ease-out) infinite;
}
@keyframes hint {
  0%   { transform: scaleY(.2); opacity: 0; }
  40%  { transform: scaleY(1);  opacity: 1; }
  100% { transform: scaleY(1);  opacity: 0; }
}
.expand.is-moving .expand__hint { opacity: 0; }

/* Blocco dello scroll mentre la card si espande.
   Niente overflow:hidden: farebbe sparire la barra di scorrimento e al
   momento dello sblocco la pagina salterebbe di ~15px. Il trattenimento
   e' gestito dal JS (preventDefault + riporto a zero). */
html.is-expand-locked, html.is-expand-locked body {
  overscroll-behavior: none;
  touch-action: none;
}

/* Vista statica: senza JS, con moto ridotto, o a espansione conclusa in
   assenza di animazione. La fotografia e' subito grande e leggibile. */
.no-js .expand__media,
.expand--static .expand__media {
  position: relative; top: auto; left: auto; translate: none;
  width: min(95vw, 1250px); height: min(70svh, 700px);
}
.no-js .expand__bg, .expand--static .expand__bg { opacity: .35; }
.no-js .expand__media::after, .expand--static .expand__media::after { background: rgba(0,0,26,.25); }
.no-js .expand__hint, .expand--static .expand__hint { display: none; }
.no-js .expand__stage, .expand--static .expand__stage { height: auto; padding-block: calc(var(--nav-h) + var(--s-6)) var(--s-7); flex-direction: column; gap: var(--s-5); }
.no-js .expand__title, .expand--static .expand__title { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .expand__hint span { animation: none; opacity: .8; }
}

@media (max-width: 767px) {
  .expand__media { border-radius: var(--r-md); }
}



/* --------------------------------------------------------------------------
   7bis. HERO CLASSICO — usato dalla scheda modello (48')
   Il disegno tecnico si traccia, poi lascia il posto alla fotografia.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(1rem, 3vw, 2.5rem));
  padding-bottom: clamp(2rem, 5vw, 4.5rem);
  background: var(--navy);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 42%; translate: -50% -50%;
  width: min(120vw, 1500px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(11,11,107,.85) 0%, rgba(0,0,58,0) 62%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }
.hero__head { position: relative; }
.hero__title {
  position: relative; z-index: 2;
  text-align: center;
  margin-inline: auto;
  max-width: 20ch;
}
.hero__title .row { display: block; }

/* Lo stage tiene la foto; il blocco testo+CTA gli sta accanto nel DOM cosi'
   su mobile puo' uscire dalla foto senza finire illeggibile sul cielo. */
.hero__media { position: relative; }

.hero__stage {
  position: relative;
  /* Spazio positivo: sovrapporre la foto al titolo ne tagliava i discendenti */
  margin-top: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--navy);
  aspect-ratio: 16 / 9;
}
@media (max-width: 700px) { .hero__stage { aspect-ratio: 4 / 5; } }

.hero__photo, .hero__draw {
  position: absolute; inset: 0;
  transition: opacity 1.1s var(--ease-out);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo { opacity: 0; }

.hero__draw {
  display: grid; place-items: center;
  padding-inline: clamp(1rem, 5vw, 5rem);
  color: var(--panna);
  opacity: 1;
}
.hero__draw svg { width: 100%; height: auto; }

.hero__stage.is-revealed .hero__photo { opacity: 1; }
.hero__stage.is-revealed .hero__draw  { opacity: 0; }

.hero__veil {
  position: absolute; inset-inline: 0; inset-block-end: 0; height: 62%;
  background: linear-gradient(to top, rgba(0,0,58,.9) 0%, rgba(0,0,58,.45) 45%, rgba(0,0,58,0) 100%);
  z-index: 2; pointer-events: none;
}

.hero__foot {
  position: absolute; z-index: 3;
  inset-inline: 0; inset-block-end: 0;
  padding: clamp(1.1rem, 2.6vw, 2.4rem);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}
.hero__claim { max-width: 40ch; font-size: var(--fs-small); color: var(--panna); }


/* --------------------------------------------------------------------------
   8. NUMERI (contatori)
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-5) var(--s-4);
}

/* Ogni dato e' separato dal successivo dal filetto a 30 gradi: la regola
   geometrica del manuale che fa anche un lavoro di lettura. */
.stat { position: relative; padding-inline-start: var(--s-4); }
.stat::before {
  content: ""; position: absolute; inset-block: .1em .4em; inset-inline-start: 0;
  width: 2px; background: currentColor; opacity: .28;
  transform: skewX(var(--shear));
}

/* I numeri sono la voce display: condensati, pesanti, grandi.
   E' il punto in cui la scheda tecnica diventa un manifesto. */
.stat__value {
  display: flex; align-items: baseline; gap: .14em;
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 900; letter-spacing: -.01em; line-height: .88;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.stat__unit {
  font-size: .26em; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; font-stretch: normal;
}
.stat__label {
  margin-top: .7rem;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-dim);
}
/* Sul rosso i numeri vanno in navy: e' l'accoppiata del manuale e fa 4,8:1. */

/* --------------------------------------------------------------------------
   9. ANATOMIA — palco appiccicoso con hotspot
   -------------------------------------------------------------------------- */
.anatomia { position: relative; background: var(--navy); }

.anatomia__track { position: relative; }

.anatomia__stage {
  position: sticky; top: 0;
  height: 100svh; min-height: 640px;
  display: grid; grid-template-rows: auto 1fr auto;
  align-content: center; justify-items: center;
  padding-block: calc(var(--nav-h) + .5rem) var(--s-5);
  padding-inline: var(--pad-inline);
  overflow: hidden;
}

.anatomia__head { text-align: center; }
.anatomia__count {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 800; letter-spacing: .04em;
  color: var(--ink-dim);
}
.anatomia__count__now { color: var(--rosso); }

.anatomia__figure {
  position: relative;
  width: 100%; max-width: 1280px;
  align-self: center;
}
.anatomia__svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Il profilo era un filo sotto il pixel al 50% di opacita': su navy non si
   vedeva. Ora e' un disegno tecnico vero, a piena opacita'. */
.anatomia__svg .hull { color: var(--panna); }

/* Linee guida: si disegnano quando il punto diventa attivo */
.leader {
  stroke: var(--rosso); stroke-width: 1.2;
  stroke-dasharray: 4 4;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.leader.is-active { opacity: 1; }

.dot {
  fill: var(--rosso);
  r: 3.4;
  opacity: .3;
  transition: opacity var(--t-mid) var(--ease), r var(--t-mid) var(--ease);
}
.dot.is-active { opacity: 1; r: 5.5; }

.dot-halo { fill: none; stroke: var(--rosso); stroke-width: 1.2; opacity: 0; }
.dot-halo.is-active { animation: halo 2.4s var(--ease-out) infinite; }
@keyframes halo {
  0%   { r: 5.5; opacity: .85; }
  100% { r: 19;  opacity: 0; }
}

/* I numeri sul disegno: legano il contatore ai punti dello scafo. */
.dotnum {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-size: 19px; font-weight: 800;
  text-anchor: middle;
  fill: var(--ink-dim);
  transition: fill var(--t-mid) var(--ease);
}
.dotnum.is-active { fill: var(--rosso); }

/* Sede unica delle schede: tutte impilate nella stessa cella di griglia,
   solo l'attiva e' visibile. Nessuna puo' piu' finire sopra un'altra. */
.anatomia__panel {
  display: grid;
  width: min(680px, 100%);
  margin-top: var(--s-4);
  align-self: end;
}
.anacard {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s-3);
  align-items: start;
  opacity: 0; visibility: hidden;
  translate: 0 10px;
  /* L'uscita e' immediata, l'entrata in dissolvenza: cosi' non esistono
     due schede visibili nello stesso istante. */
  transition: opacity .01s, visibility .01s, translate .01s;
}
.anacard.is-active {
  opacity: 1; visibility: visible; translate: 0 0;
  transition: opacity var(--t-mid) var(--ease), translate var(--t-mid) var(--ease);
}
.anacard__n {
  font-size: 1.7rem; line-height: 1; color: var(--rosso);
  padding-top: .1em;
  position: relative; padding-inline-end: var(--s-3);
}
.anacard__n::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0;
  width: 2px; background: var(--rule);
  transform: skewX(var(--shear));
}
.anacard h3 { margin-bottom: .35rem; grid-column: 2; }
.anacard p:not(.anacard__n) {
  grid-column: 2;
  color: var(--ink-dim); font-size: var(--fs-small); line-height: 1.55;
}

/* Elenco di riserva: unica vista senza JS o con reduced-motion */
.anatomia__fallback { display: none; }
.anatomia__fallback .grid { margin-top: var(--s-5); }
.anatomia__fallback li h3 { margin-bottom: .4rem; }
.anatomia__fallback li p { color: var(--ink-dim); font-size: var(--fs-small); }
.anatomia__fallback li {
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   10. CARD / CATALOGO
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card-bg, var(--su-dark-panel));
  display: flex; flex-direction: column;
  isolation: isolate;
}

.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--su-dark-panel); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--t-slow) var(--ease-out); }
.card:hover .card__media img { scale: 1.035; }

.card__body { padding: clamp(1.1rem, 2vw, 1.75rem); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card__body > .btn-row, .card__body > .link-arrow { margin-top: auto; }

.card__over {
  position: absolute; z-index: 2; top: var(--s-3); left: var(--s-3);
}

/* Modello in costruzione: disegno al posto della foto */
.card__media--draw {
  display: grid; place-items: center;
  background: var(--navy);
  padding: var(--s-4);
}
.card__media--draw svg { width: 100%; color: rgba(247,233,224,.38); }

/* --------------------------------------------------------------------------
   11. SPECIFICHE
   -------------------------------------------------------------------------- */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 var(--s-5); }
.specs > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  padding-block: .95rem;
  border-bottom: 1px solid var(--rule);
}
.specs dt { color: var(--ink-dim); font-size: var(--fs-small); }
.specs dd { font-weight: 500; text-align: right; }

/* Tabella consumi */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  min-width: 460px;
}
table.data caption { text-align: left; margin-bottom: var(--s-3); color: var(--ink-dim); font-size: var(--fs-small); }
table.data th, table.data td { padding: .9rem var(--s-3); text-align: left; border-bottom: 1px solid var(--rule); }
table.data th {
  font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-dim);
}
table.data td:first-child { font-weight: 500; }
table.data tr:last-child th, table.data tr:last-child td { border-bottom: 0; }

/* Elenco caratteristiche */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4) var(--s-5); }
.features li { padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.features h3 { margin-bottom: .4rem; }
.features p { font-size: var(--fs-small); color: var(--ink-dim); }

/* --------------------------------------------------------------------------
   12. GALLERIA
   -------------------------------------------------------------------------- */
.gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.6rem, 1.2vw, 1rem); }
.gallery figure { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--navy); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.g-6 { grid-column: span 6; aspect-ratio: 3 / 2; }
.g-4 { grid-column: span 4; aspect-ratio: 1; }
.g-8 { grid-column: span 8; aspect-ratio: 16 / 9; }
.g-12 { grid-column: span 12; aspect-ratio: 21 / 9; }
.g-tall { grid-column: span 4; aspect-ratio: 2 / 3; }

/* Modulo video contenuto */
.videobox { border-radius: var(--r-lg); overflow: hidden; background: var(--navy); position: relative; }
.videobox video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.videobox__note {
  padding: var(--s-3);
  font-size: var(--fs-micro); color: var(--ink-dim);
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   13. PARTNER
   -------------------------------------------------------------------------- */
.partners { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; }
.partners li {
  font-size: var(--fs-small); font-weight: 500; letter-spacing: .04em;
  color: var(--ink-dim);
}

/* --------------------------------------------------------------------------
   14. FORM
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--s-3); }
.field { display: grid; gap: .45rem; }
.field > label {
  font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim);
}

.field input, .field textarea, .field select {
  font: inherit; color: inherit;
  padding: .85rem 1rem;
  background: var(--field-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), background var(--t-fast);
  width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent); outline: none;
}
.field textarea { resize: vertical; min-height: 7.5rem; }

.field__error {
  font-size: var(--fs-micro); color: var(--accent);
  min-height: 1em;
}
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--rosso); }

.form__consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-small); }
.form__consent input { width: 18px; height: 18px; flex: none; margin-top: .22em; accent-color: var(--rosso); }

.form__status {
  padding: var(--s-3); border-radius: var(--r-sm);
  background: var(--field-bg); border: 1px solid var(--rule);
  color: var(--ink); font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   15. CONTATTI
   -------------------------------------------------------------------------- */
.sedi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.sedi li { padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.sedi strong { display: block; font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--rosso); margin-bottom: .35rem; font-weight: 600; }

.contact-direct { display: grid; gap: var(--s-3); }
.contact-direct a { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -.015em;
  display: inline-flex; align-items: center; min-height: 44px; }
.contact-direct a:hover { color: var(--rosso); }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--navy); color: var(--su-dark-ink); padding-block: var(--s-7) var(--s-4); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-5); }
.footer h2 { font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--s-3); font-weight: 600; }
.footer__brand img { width: 190px; margin-bottom: var(--s-3); }
.footer__brand .logo--footer { margin-bottom: var(--s-4); }
/* I link del piede sono navigazione, non parole dentro una frase: vanno
   dimensionati come bersagli, non come testo. */
.footer nav ul { display: grid; }
.footer nav a {
  font-size: var(--fs-small); color: var(--panna);
  display: inline-flex; align-items: center; min-height: 44px;
}
.footer nav a:hover { color: var(--rosso); }

/* Rete di siti Buglione */
.network li { display: flex; flex-direction: column; gap: .1rem; margin-bottom: var(--s-2); }
.network a, .network .soon { display: inline-flex; align-items: center; min-height: 34px; }
.network a, .network span.soon { font-size: var(--fs-small); font-weight: 500; }
.network small { font-size: var(--fs-micro); color: var(--ink-dim); }
.network .soon { color: var(--ink-dim); }
.network .soon::after {
  content: "in arrivo"; margin-left: .5em;
  font-size: .72em; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lime); opacity: .75;
}

.footer__bottom {
  margin-top: var(--s-6); padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between; align-items: center;
  font-size: var(--fs-micro); color: var(--ink-dim);
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
.footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__bottom a:hover { color: var(--rosso); }

/* --------------------------------------------------------------------------
   17. CTA A PIENA LARGHEZZA
   -------------------------------------------------------------------------- */
.cta {
  /* E' un pannello scuro dentro qualunque sezione, anche una rossa:
     quindi ridichiara i token di superficie, altrimenti erediterebbe
     l'inchiostro della sezione e sparirebbe. */
  --surface: var(--navy);
  --ink: var(--panna); --ink-dim: #9A9AC4;
  --rule: rgba(255, 232, 223, .22); --accent: var(--rosso);
  color: var(--ink);
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--navy);
  padding: clamp(2.25rem, 6vw, 5.5rem);
  text-align: center;
  isolation: isolate;
}
.cta__hull {
  position: absolute; z-index: -1; left: 50%; bottom: -8%;
  width: 130%; translate: -50% 0;
  color: rgba(247,233,224,.09);
  pointer-events: none;
}
.cta .lead { margin-inline: auto; max-width: 44ch; }

/* --------------------------------------------------------------------------
   18. BANNER COOKIE
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed; z-index: 250;
  inset-inline: var(--s-3); inset-block-end: var(--s-3);
  max-width: 560px; margin-inline: auto;
  padding: var(--s-3) var(--s-4);
  background: rgba(0,0,58,.96);
  backdrop-filter: blur(14px);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  font-size: var(--fs-small); color: var(--panna);
  translate: 0 130%;
  transition: translate var(--t-slow) var(--ease-out);
}
.cookie.is-open { translate: 0 0; }
.cookie p { flex: 1 1 240px; font-size: var(--fs-small); }
.cookie a { text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   19. RIVELAZIONE ALLO SCROLL
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; translate: 0 22px; transition: opacity .85s var(--ease-out), translate .85s var(--ease-out); }
.reveal.is-in { opacity: 1; translate: 0 0; }
.reveal-d1 { transition-delay: .09s; }
.reveal-d2 { transition-delay: .18s; }
.reveal-d3 { transition-delay: .27s; }

/* Tracciamento del disegno.
   Lo scafo è riusato via <use>: dasharray e dashoffset sono proprietà SVG
   ereditate, quindi vanno sull'elemento esterno per raggiungere il clone. */
/* Lo scafo entrava tracciandosi, con dasharray + dashoffset e un
   pathLength dichiarato sul tracciato. Non si vedeva in Safari: dentro un
   <use> il pathLength non viene applicato in modo affidabile, quindi il
   tratteggio non copriva mai la lunghezza reale del percorso e il profilo
   restava invisibile. Il disegno ora e' semplicemente visibile: un effetto
   che si vede in un browser solo su tre non e' un effetto.
   L'ingresso e' affidato all'opacita', che si comporta uguale ovunque. */
.hull { opacity: 1; }

/* --------------------------------------------------------------------------
   19bis. GEOMETRIA DI BRAND — i 30 gradi

   Il manuale ha una sola regola di forma: ogni obliquo e' a 30 gradi dalla
   verticale. Vale per il logo, per i triangoli del marchio, per il
   parallelogramma tricolore. Qui diventa un insieme di primitive, cosi'
   l'angolo sta scritto in un posto solo (--shear) e non si sparpaglia.

   Nota sul perche' non ci sono bordi obliqui a piena sezione: a 30 gradi
   dalla verticale una diagonale che attraversa 1560px richiederebbe 2700px
   di altezza. L'angolo funziona alla scala della mano — targhette, bottoni,
   cornici, filetti — non a quella della pagina.
   -------------------------------------------------------------------------- */

/* Targhetta: il badge rosso del manuale. */
.badge {
  display: inline-flex; align-items: center;
  min-height: 2.4em;
  padding-inline: 1.9em;
  background: var(--rosso); color: var(--su-rosso);
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  transform: skewX(var(--shear));
}
.badge > * { display: inline-block; transform: skewX(var(--shear-inv)); }
.badge--navy  { background: var(--navy); color: var(--panna); }
.badge--lime  { background: var(--lime); color: var(--navy); }

/* Stato del modello sulle card del catalogo: stessa forma, corpo piccolo. */
.badge--ok, .badge--wip { font-size: var(--fs-micro); letter-spacing: .12em; }
.badge--ok  { background: var(--lime); color: var(--navy); }
.badge--wip { background: var(--panna); color: var(--navy); }

/* Cornice a parallelogramma per le fotografie.
   L'immagine e' contro-inclinata e ingrandita quanto basta a coprire gli
   angoli: --unskew-scale = 1 + tan(30)/rapporto d'aspetto, arrotondato. */
.shear-frame {
  overflow: hidden;
  transform: skewX(var(--shear));
  --unskew-scale: 1.36;
}
.shear-frame > img,
.shear-frame > picture,
.shear-frame > picture > img,
.shear-frame > video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.shear-frame > img,
.shear-frame > picture,
.shear-frame > video {
  transform: skewX(var(--shear-inv)) scale(var(--unskew-scale));
}

/* Filetto inclinato: sostituisce la riga orizzontale dove serve un accento. */
.rule-30 {
  height: 2px; border: 0; margin: 0;
  background: currentColor; opacity: .3;
  transform: skewX(var(--shear));
}

/* Tessitura di linee a 30 gradi — le linee di costruzione del manuale.
   Decorativa: sempre sotto al testo, mai sopra. */
.stripes-30 {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    60deg,
    currentColor 0 1px,
    transparent 1px 26px
  );
  opacity: .13;
}

/* I marchi estratti dal manuale, in SVG. */
.mark { display: block; flex: none; }
.mark--w   { width: clamp(44px, 5vw, 68px); }
.mark--tri { width: clamp(64px, 7vw, 96px); height: auto; margin-bottom: var(--s-3); }

/* --------------------------------------------------------------------------
   19ter. SUPERFICI DELLA GAMMA SECONDARIA

   Navy, rosso e panna reggono la struttura. Teal, sabbia e lime entrano
   una sezione per volta, per scandire il ritmo: due sezioni chiare di
   fila appiattiscono la pagina.
   Ogni accoppiata qui sotto e' verificata: nessuna scende sotto 4,5:1.
   -------------------------------------------------------------------------- */
.su-rosso  { background: var(--rosso);  color: var(--su-rosso); }          /* 4,8:1 */
.su-teal   { background: var(--teal);   color: var(--panna); }             /* 7,6:1 */
.su-sabbia { background: var(--sabbia); color: var(--navy); --surface: var(--sabbia); }              /* 13,7:1 */
.su-lime   { background: var(--lime);   color: var(--navy); }              /* 14,8:1 */

.su-rosso .btn--primary { background: var(--navy); color: var(--panna); }
.su-rosso .btn--primary:hover { background: var(--lime); color: var(--navy); }



.su-lime .btn--primary { background: var(--navy); color: var(--panna); }
/* --------------------------------------------------------------------------
   19quater. I DUE PONTI
   I piani vengono dalla brochure, con lo sfondo bianco reso trasparente:
   cosi' poggiano sulla superficie della sezione invece di portarsi
   dietro un rettangolo.
   -------------------------------------------------------------------------- */
.ponti {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
}
.ponte { margin: 0; display: grid; gap: var(--s-3); }
.ponte img { width: 100%; height: auto; display: block; }

.ponte__cap {
  display: grid;
  grid-template-columns: auto minmax(0, 14ch) minmax(0, 1fr);
  gap: 0 var(--s-3);
  align-items: baseline;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.ponte__n { font-size: 1.5rem; color: var(--rosso-ink); line-height: 1; }
.ponte__t {
  font-family: var(--font-display); font-stretch: var(--display-stretch);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 800;
  text-transform: uppercase; line-height: 1;
}
.ponte__d { font-size: var(--fs-small); line-height: 1.5; }

.ponti__nota {
  margin-top: var(--s-4);
  font-size: var(--fs-micro); letter-spacing: .04em;
}

@media (max-width: 760px) {
  .ponte__cap { grid-template-columns: auto 1fr; }
  .ponte__d { grid-column: 1 / -1; margin-top: var(--s-2); }
  /* In verticale un piano largo 14 metri diventa illeggibile: si fa
     scorrere lateralmente al doppio della larghezza, invece di ridurlo. */
  .ponte > picture { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ponte > picture img { width: 200%; max-width: none; }
}

/* Il marchio nel piede: stessa maschera dell'intestazione, misura maggiore. */
.logo--footer {
  display: block;
  width: clamp(160px, 18vw, 220px);
  aspect-ratio: 1454 / 374;
  background: var(--panna);
  -webkit-mask: var(--logo-mask) no-repeat left center / contain;
          mask: var(--logo-mask) no-repeat left center / contain;
}

/* --------------------------------------------------------------------------
   20. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  :root { --nav-h: 64px; }

  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-3) var(--pad-inline) var(--s-5);
    background: rgba(0,0,58,.98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--rule);
    translate: 0 -102%;
    transition: translate var(--t-mid) var(--ease);
    visibility: hidden;
    overflow: hidden;
  }
  .nav__links.is-open { translate: 0 0; visibility: visible; }
  .nav__links a:not(.btn) { padding-block: var(--s-3); border-bottom: 1px solid var(--rule); font-size: var(--fs-lead); }
  .nav__links a:not(.btn)::after { display: none; }
  .nav__links .btn { margin-top: var(--s-3); justify-content: center; }

  .editorial { grid-template-columns: 1fr; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }

  .g-6, .g-4, .g-8, .g-12, .g-tall { grid-column: span 12; }
  .g-4 { aspect-ratio: 3 / 2; }
  .g-tall { aspect-ratio: 3 / 4; }

  .specs { grid-template-columns: 1fr; }
  /* Il blocco testo esce dalla foto e va su fondo navy: leggibile e senza velo */
  .hero__foot {
    position: static;
    padding: var(--s-4) 0 0;
    flex-direction: column; align-items: stretch;
    gap: var(--s-3);
  }
  .hero__claim { max-width: none; }
  .hero__foot .btn-row .btn { justify-content: center; flex: 1 1 auto; }
  .hero__veil { display: none; }
  .hero__stage { border-radius: var(--r-lg); }

  /* Anatomia: niente palco appiccicoso su mobile, si passa all'elenco.
     Il disegno resta, ma si ritagliano le fasce vuote riservate alle
     linee guida e alle schede, che qui non vengono mostrate. */
  .anatomia__track { min-height: 0 !important; }
  .anatomia__stage { position: static; height: auto; min-height: 0; padding-block: 0; padding-inline: 0; }
  /* Ritaglia le fasce riservate a linee e schede senza margini negativi,
     che facevano collidere il disegno col titolo. */
  .anatomia__figure {
    aspect-ratio: 842 / 200;
    overflow: hidden;
    margin-block: var(--s-4) var(--s-5);
  }
  .anatomia__svg {
    position: absolute; inset-inline: 0;
    top: 50%; translate: 0 -50%;
  }
  /* Alle dimensioni mobili il tratto va rinforzato per restare leggibile */
  .anatomia__svg .hull { color: var(--panna); }
  .anacard, .anatomia__panel, .dot, .dot-halo, .leader { display: none; }
  .anatomia__count { display: none; }
  .anatomia__fallback { display: block; }
  .cta { border-radius: var(--r-lg); }
}

@media (max-width: 520px) {
  .gallery { grid-template-columns: repeat(6, 1fr); }
  .g-6, .g-4, .g-8, .g-12, .g-tall { grid-column: span 6; }
  .cookie { inset-inline: var(--s-2); inset-block-end: var(--s-2); }
}

/* --------------------------------------------------------------------------
   20bis. TENUTA DELL'INCLINAZIONE SUI SCHERMI STRETTI

   Un elemento inclinato occupa piu' spazio di quanto ne dichiari: lo skew
   allarga il rettangolo visibile di (altezza x tan30) / 2 per lato. Su uno
   schermo da 320px un bottone andato a due righe sporgeva quindi oltre il
   margine e faceva comparire lo scorrimento orizzontale.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* Marchio e payoff insieme non entrano accanto al pulsante del menu:
     il payoff, che e' informazione secondaria, si ritira. */
  .nav__payoff { display: none; }
  .nav__brand .logo { width: 124px; }

  /* Etichette piu' compatte: i bottoni restano su una riga, quindi alti
     46px, e la sporgenza (13px) rientra nel margine di pagina (18px). */
  .btn {
    font-size: .8125rem; letter-spacing: .04em;
    padding-inline: 1.6em;
  }
  .btn__label { text-wrap: balance; }
}

/* Rete di sicurezza: se un'etichetta futura andasse comunque a capo, la
   punta del parallelogramma viene tagliata invece di allargare la pagina.
   Si usa `clip` e non `hidden` perche' `hidden` creerebbe un contenitore di
   scorrimento e romperebbe il `position: sticky` dell'anatomia. */
body { overflow-x: clip; }

/* --------------------------------------------------------------------------
   21. MOTO RIDOTTO / STAMPA
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; translate: none; }
  .hero__photo { opacity: 1; }
  .hero__draw { opacity: 0; }
  /* Senza moto l'elenco sostituisce la sequenza appiccicosa */
  .anatomia__track { min-height: 0 !important; }
  .anatomia__stage { position: static; height: auto; min-height: 0; }
  .anacard, .anatomia__panel, .dot, .dot-halo, .leader, .anatomia__count { display: none; }
  .anatomia__fallback { display: block; }
}

/* Senza JS: mostra sempre i contenuti */
.no-js .reveal { opacity: 1; translate: none; }
.no-js .hero__photo { opacity: 1; }
.no-js .hero__draw { opacity: 0; }
.no-js .anatomia__stage { position: static; height: auto; min-height: 0; }
.no-js .anacard, .no-js .anatomia__panel, .no-js .dot, .no-js .dot-halo,
.no-js .leader, .no-js .anatomia__count { display: none; }
.no-js .anatomia__fallback { display: block; }

@media print {
  .nav, .cookie, .hero__draw { display: none; }
  body { background: #fff; color: #000; }
}

/* Avanzamento della striscia orizzontale nella scheda 48'. Il pieno e' a
   30 gradi come tutti gli obliqui del manuale; la sede resta dritta, cosi'
   l'inclinazione si legge come un movimento e non come un errore. */
.o48-bar {
  flex: 1 1 140px; max-width: 320px; min-width: 120px;
  height: 2px; background: var(--rule); overflow: hidden;
}
.o48-bar > span {
  display: block; width: 0; height: 100%;
  background: var(--rosso);
  transform: skewX(var(--shear));
}