/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(media/font/archivo-latin-ext-c422bf.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url(media/font/archivo-latin-b92029.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(media/font/instrument-sans-latin-ext-284bb9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(media/font/instrument-sans-latin-046090.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(media/font/instrument-sans-latin-ext-284bb9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(media/font/instrument-sans-latin-046090.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(media/font/instrument-sans-latin-ext-284bb9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(media/font/instrument-sans-latin-046090.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(media/font/jetbrains-mono-latin-ext-ba1653.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(media/font/jetbrains-mono-latin-480c06.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(media/font/jetbrains-mono-latin-ext-ba1653.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(media/font/jetbrains-mono-latin-480c06.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ZONA · sito
   Layout: pagine chiare color calce con fasce petrolio; titoli larghi e pesanti, griglie che diventano una colonna sul telefono.
   Un solo aspetto voluto (chiaro con fasce scure): tutti i colori sono espliciti. */
:root {
  --petrolio: #0e1621;      /* inchiostro e fasce scure */
  --petrolio-2: #182335;
  --petrolio-3: #0b63f2;
  --giallo: #f97316;        /* il marcatore del logo: bottoni e accenti */
  --giallo-scuro: #c2410c;  /* giallo leggibile su fondo chiaro */
  --giallo-tenue: #ffedd5;
  --calce: #eef0f4;
  --calce-2: #e1e4ea;
  --bianco: #ffffff;
  --testo: #111827;
  --grigio: #5b6474;
  --grigio-chiaro: #a3adbd;
  --linea: #dde1e7;
  --linea-scura: #26324a;
  --verde: #1f8a5b;
  --rosso: #c4402f;
  --ombra: 0 1px 2px rgb(14 22 33 / .06), 0 14px 34px rgb(14 22 33 / .08);
  --ombra-grande: 0 34px 80px rgb(14 22 33 / .22);

  --f-titolo: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-testo: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --f-dati: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bianco); color: var(--testo); font: 400 1.0625rem/1.65 var(--f-testo); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
.pagina { max-width: 76rem; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
h1, h2, h3, h4 { font-family: var(--f-titolo); margin: 0; text-wrap: balance; color: var(--petrolio); font-stretch: 112%; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; border-radius: 6px; }
.num { font-family: var(--f-dati); font-variant-numeric: tabular-nums; font-size: .92em; }
.evid { color: #ea580c; }
.scuro .evid { background: none; color: var(--giallo); padding: 0; }
svg.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* fondi */
.calce { background: var(--calce); }
.griglia-carta { background: var(--calce); }
.scuro { background: var(--petrolio); color: #c8d0dc; }
.scuro h1, .scuro h2, .scuro h3, .scuro h4 { color: var(--bianco); }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--petrolio); }
.logo svg { height: 28px; width: auto; display: block; }
.scuro .logo, footer .logo { color: var(--bianco); }

/* ---------- barra ---------- */
.barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: rgb(255 255 255 / .94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
.barra .pagina { display: flex; align-items: center; gap: 28px; padding-block: 16px; }
.barra nav { display: flex; gap: 6px; margin-left: auto; font-size: .95rem; }
.barra nav a { text-decoration: none; padding: 8px 12px; border-radius: 8px; color: #3f4a5c; }
.barra nav a:hover { background: var(--calce); color: var(--petrolio); }
.barra nav a[aria-current="page"] { color: var(--petrolio); font-weight: 600; box-shadow: inset 0 -2px 0 var(--giallo); border-radius: 0; }
.menu { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--linea); background: var(--bianco); color: var(--petrolio); cursor: pointer; place-items: center; }
@media (max-width: 960px) {
  .menu { display: grid; }
  .barra .pagina { flex-wrap: wrap; }
  .barra nav { display: none; order: 3; width: 100%; flex-direction: column; gap: 0; margin: 0; padding-bottom: 8px; }
  .barra nav.aperto { display: flex; }
  .barra nav a { padding: 12px 4px; border-bottom: 1px solid var(--linea); }
  .barra nav a[aria-current="page"] { box-shadow: none; }
  .barra .bottone.demo { display: none; }
}

/* ---------- bottoni ---------- */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 24px; border-radius: 10px; border: 0; cursor: pointer; text-decoration: none; font: 600 1rem/1 var(--f-testo); background: #c2410c; color: var(--bianco); transition: transform .15s, background .15s, box-shadow .15s; box-shadow: 0 1px 0 rgb(14 22 33 / .15); }
.bottone:hover { transform: translateY(-1px); background: #ea580c; }
.bottone.contorno { background: transparent; color: var(--petrolio); box-shadow: inset 0 0 0 1.5px var(--petrolio); }
.bottone.contorno:hover { background: var(--petrolio); color: var(--bianco); }
.scuro .bottone.contorno { color: var(--bianco); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .4); }
.scuro .bottone.contorno:hover { background: var(--bianco); color: var(--petrolio); }
.barra .bottone { padding: 11px 18px; font-size: .93rem; }
.link-freccia { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--petrolio); border-bottom: 2px solid var(--giallo); padding-bottom: 2px; }
.scuro .link-freccia { color: var(--bianco); }

/* ---------- sezioni ---------- */
section { padding-block: clamp(64px, 9vw, 116px); }
.occhiello { display: inline-flex; align-items: center; gap: 10px; font: 500 .76rem/1 var(--f-dati); letter-spacing: .14em; text-transform: uppercase; color: var(--petrolio-3); }
.occhiello::before { content: ""; width: 9px; height: 9px; background: var(--giallo); }
.scuro .occhiello { color: var(--grigio-chiaro); }
.intesta { max-width: 48rem; display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 60px); }
.intesta.centro { margin-inline: auto; text-align: center; justify-items: center; }
.intesta h2 { font-size: clamp(2.1rem, 4.8vw, 3.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; }
.intesta p { font-size: 1.12rem; color: var(--grigio); max-width: 40rem; }
.scuro .intesta p { color: var(--grigio-chiaro); }

/* ---------- apertura home ---------- */
.apertura { padding-block: clamp(48px, 7vw, 100px) clamp(64px, 8vw, 110px); overflow: hidden; }
.apertura .griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (max-width: 1000px) { .apertura .griglia { grid-template-columns: minmax(0, 1fr); } }
.apertura h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; margin-top: 22px; }
.apertura .sotto { font-size: 1.18rem; color: var(--grigio); margin-top: 24px; max-width: 34rem; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.fiducia { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 30px; font-size: .92rem; color: #3f4a5c; }
.fiducia span { display: inline-flex; align-items: center; gap: 8px; }
.fiducia svg { color: var(--verde); width: 18px; height: 18px; }

/* apertura delle pagine interne */
.testa-pagina { padding-block: clamp(48px, 7vw, 92px) clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--linea); }
.testa-pagina h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; margin-top: 20px; max-width: 52rem; }
.testa-pagina p { font-size: 1.15rem; color: var(--grigio); margin-top: 20px; max-width: 42rem; }

/* ---------- finestra app (dati inventati) ---------- */
.scena { position: relative; min-width: 0; }
.app { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--ombra-grande); overflow: hidden; min-width: 0; font-family: var(--f-testo); }
.app .testata { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--calce); border-bottom: 1px solid var(--linea); }
.app .testata i { width: 10px; height: 10px; border-radius: 50%; background: var(--linea); }
.app .testata b { margin-left: 10px; font: 500 .74rem var(--f-dati); color: var(--grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app .dentro { display: grid; grid-template-columns: 140px minmax(0, 1fr); }
.app aside { background: var(--petrolio); padding: 16px 10px; display: grid; gap: 3px; align-content: start; font-size: .76rem; color: #9aa5b8; }
.app aside .lg { color: var(--bianco); margin: 0 6px 14px; }
.app aside .lg svg { height: 13px; width: auto; display: block; }
.app aside div:not(.lg) { padding: 6px 9px; border-radius: 6px; }
.app aside .on { background: rgb(249 115 22 / .16); color: var(--giallo); }
.app .corpo { padding: 16px; display: grid; gap: 12px; min-width: 0; }
.app .corpo h4 { font-size: 1.02rem; font-weight: 700; font-stretch: 100%; }
.app .corpo .sott { font-size: .74rem; color: var(--grigio); margin-top: -9px; }
@media (max-width: 560px) { .app .dentro { grid-template-columns: minmax(0, 1fr); } .app aside { display: none; } }
.tessere { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 460px) { .tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tessera { border: 1px solid var(--linea); border-radius: 9px; padding: 8px 10px; min-width: 0; }
.tessera.rossa { box-shadow: inset 0 3px 0 var(--rosso); }
.tessera small { display: block; font-size: .66rem; color: var(--grigio); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tessera b { font: 700 1.3rem/1.2 var(--f-titolo); color: var(--petrolio); }
.riq { border: 1px solid var(--linea); border-radius: 10px; padding: 12px; min-width: 0; }
.riq .tit { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 700 .82rem var(--f-titolo); color: var(--petrolio); margin-bottom: 6px; }
.voce { display: grid; gap: 5px; padding-block: 7px; }
.voce + .voce { border-top: 1px solid var(--linea); }
.voce .r { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .76rem; }
.voce .r > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce .r .num { flex-shrink: 0; color: var(--grigio); font-size: .7rem; }
.voce .r .num b { color: var(--petrolio); font-weight: 500; }
.barretta { height: 5px; border-radius: 3px; background: var(--calce-2); overflow: hidden; }
.barretta i { display: block; height: 100%; border-radius: 3px; background: var(--petrolio-3); }
.barretta i.g { background: var(--giallo); }
.chip { font: 600 .66rem/1 var(--f-testo); padding: 4px 8px; border-radius: 99px; flex-shrink: 0; }
.chip.alta { background: #fbe3df; color: #9b2c1e; }
.chip.media { background: #e6efff; color: #0a4fc0; }
.chip.ok { background: #dff2e8; color: #17694a; }
.chip.att { background: var(--giallo-tenue); color: var(--giallo-scuro); }

.flottante { position: absolute; background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--ombra); padding: 11px 15px; display: flex; align-items: center; gap: 11px; font-size: .8rem; color: var(--grigio); animation: galleggia 7s ease-in-out infinite; }
.flottante b { display: block; font: 700 1rem var(--f-titolo); color: var(--petrolio); }
.flottante .bollo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--giallo); color: var(--bianco); }
.flottante .bollo.p { background: var(--petrolio); color: var(--giallo); }
.f1 { left: -26px; bottom: -26px; }
.f2 { right: -18px; top: 60px; animation-delay: -3.5s; }
@keyframes galleggia { 50% { transform: translateY(-7px); } }
@media (max-width: 1140px) { .f1 { left: 10px; } .f2 { right: 10px; } }
@media (max-width: 560px) { .flottante { display: none; } }

/* ---------- nastro di ciò che gestisci ---------- */
.nastro { display: flex; overflow: hidden; border-block: 1px solid var(--linea); padding-block: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.nastro-scorre { display: flex; flex: none; list-style: none; margin: 0; padding: 0; }
.nastro-scorre li { display: flex; align-items: center; gap: 10px; white-space: nowrap; font: 700 clamp(1rem, 1.6vw, 1.2rem)/1 var(--f-titolo); font-stretch: 108%; color: var(--petrolio); }
.nastro-scorre li svg { width: 20px; height: 20px; color: var(--grigio); }
.nastro-scorre li::after { content: ""; width: 8px; height: 8px; background: var(--giallo); margin-inline: 30px; }
.nastro .copia { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .nastro .copia { display: flex; }
  .nastro-scorre { animation: nastro 45s linear infinite; }
  .nastro:hover .nastro-scorre { animation-play-state: paused; }
}
@keyframes nastro { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .nastro { justify-content: center; mask-image: none; -webkit-mask-image: none; } .nastro-scorre { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 14px; padding-inline: 16px; } }

/* ---------- schede ---------- */
.griglia-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.griglia-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.griglia-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1040px) { .griglia-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .griglia-3, .griglia-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .griglia-4 { grid-template-columns: minmax(0, 1fr); } }
.scheda { border-radius: 14px; padding: 26px; display: grid; gap: 12px; align-content: start; min-width: 0; background: var(--bianco); border: 1px solid var(--linea); }
.scuro .scheda { background: var(--petrolio-2); border-color: var(--linea-scura); }
.scheda h3 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; }
.scheda p { color: var(--grigio); font-size: .97rem; }
.scuro .scheda p { color: var(--grigio-chiaro); }
.icona { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 11px; background: var(--giallo-tenue); color: var(--petrolio); }
.scuro .icona { background: rgb(249 115 22 / .14); color: var(--giallo); }
.chiusa { margin-top: 48px; font: 700 clamp(1.25rem, 2.6vw, 1.75rem)/1.3 var(--f-titolo); color: var(--bianco); font-stretch: 105%; text-wrap: balance; }

/* ---------- moduli funzione ---------- */
.modulo-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.modulo-f + .modulo-f { margin-top: clamp(64px, 8vw, 104px); }
.modulo-f.inverti > :first-child { order: 2; }
@media (max-width: 920px) { .modulo-f { grid-template-columns: minmax(0, 1fr); } .modulo-f.inverti > :first-child { order: 0; } }
.modulo-f h3 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; margin-top: 14px; }
.modulo-f .descr { color: var(--grigio); margin-top: 16px; font-size: 1.08rem; }
.scuro .modulo-f .descr { color: var(--grigio-chiaro); }
.spunte { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.spunte li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.spunte li::before { content: ""; width: 18px; height: 18px; margin-top: 4px; border-radius: 4px; background: var(--giallo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.colonne { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; height: 96px; }
.colonne div { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 100%; text-align: center; font: 400 .64rem var(--f-dati); color: var(--grigio); }
.colonne i { display: block; border-radius: 3px 3px 0 0; background: var(--petrolio-3); }
.colonne div:last-child i { background: var(--giallo); }

/* altre funzioni */
.altra { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px; border-radius: 14px; background: var(--bianco); border: 1px solid var(--linea); }
.altra h3 { font-size: 1.05rem; font-weight: 700; }
.altra p { color: var(--grigio); font-size: .94rem; margin-top: 4px; }

/* ---------- passi ---------- */
.passo { background: var(--bianco); border: 1px solid var(--linea); border-radius: 16px; padding: 26px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.passo .lab { font: 500 .74rem/1 var(--f-dati); letter-spacing: .1em; color: var(--petrolio-3); text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.passo .lab b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--petrolio); color: var(--giallo); font: 700 .9rem var(--f-titolo); letter-spacing: 0; }
.passo h3 { font-size: 1.22rem; font-weight: 700; }
.passo p { color: var(--grigio); font-size: .97rem; }
.passo .vista { border-radius: 10px; background: var(--calce); padding: 14px; display: grid; gap: 9px; font-size: .82rem; min-height: 128px; align-content: center; }
.passo .vista .r { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.passo .vista .r > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona { display: flex; align-items: center; gap: 9px; }
.persona i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--petrolio); color: var(--bianco); font: 600 .6rem var(--f-testo); font-style: normal; flex-shrink: 0; }

/* ---------- per chi ---------- */
.profilo { border-radius: 16px; padding: 30px; display: grid; gap: 14px; align-content: start; background: var(--bianco); border: 1px solid var(--linea); min-width: 0; }
.profilo h3 { font-size: 1.5rem; font-weight: 800; }
.profilo p { color: var(--grigio); }
.profilo .spunte { margin-top: 4px; font-size: .97rem; }
.profilo .link-freccia { justify-self: start; margin-top: 6px; }

/* ---------- prezzi ---------- */
.interruttore { display: inline-flex; padding: 5px; border-radius: 12px; background: var(--calce-2); gap: 4px; margin: 0 auto 36px; }
.interruttore button { border: 0; background: transparent; padding: 10px 18px; border-radius: 9px; font: 600 .92rem var(--f-testo); color: var(--grigio); cursor: pointer; }
.interruttore button[aria-pressed="true"] { background: var(--bianco); color: var(--petrolio); box-shadow: var(--ombra); }
.interruttore .sconto { font: 500 .7rem var(--f-dati); color: #9a3412; margin-left: 6px; }
.centro-blocco { display: flex; justify-content: center; }
.piano { background: var(--bianco); border: 1px solid var(--linea); border-radius: 18px; padding: 32px; display: grid; gap: 18px; align-content: start; position: relative; min-width: 0; }
.piano.top { background: var(--petrolio); color: #c8d0dc; border-color: var(--petrolio); box-shadow: var(--ombra-grande); }
.piano.top h3, .piano.top .cifra { color: var(--bianco); }
.piano .targa { position: absolute; top: -13px; left: 32px; padding: 6px 12px; border-radius: 6px; background: #c2410c; color: var(--bianco); font: 600 .74rem/1 var(--f-testo); }
.piano h3 { font-size: 1.4rem; font-weight: 800; }
.piano .descr { color: var(--grigio); font-size: .96rem; min-height: 3em; }
.piano.top .descr { color: var(--grigio-chiaro); }
.piano .cifra { font: 800 3rem/1 var(--f-titolo); color: var(--petrolio); letter-spacing: -.03em; font-stretch: 105%; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.piano .cifra small { font: 400 .95rem var(--f-testo); color: var(--grigio); letter-spacing: 0; }
.piano.top .cifra small { color: var(--grigio-chiaro); }
.piano .nota-prezzo { font-size: .85rem; color: var(--grigio); margin-top: -8px; }
.piano.top .nota-prezzo { color: var(--grigio-chiaro); }
.piano .bottone { width: 100%; }
.piano .spunte { margin-top: 0; font-size: .96rem; }
.piano hr { border: 0; border-top: 1px solid var(--linea); margin: 0; width: 100%; }
.piano.top hr { border-color: var(--linea-scura); }

.tabella-scorri { overflow-x: auto; border: 1px solid var(--linea); border-radius: 14px; background: var(--bianco); }
table.confronto { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.confronto th, .confronto td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--linea); }
.confronto thead th { font: 700 1rem var(--f-titolo); color: var(--petrolio); background: var(--calce); font-stretch: 105%; }
.confronto td:not(:first-child), .confronto th:not(:first-child) { text-align: center; }
.confronto tbody th { font-weight: 500; color: var(--testo); }
.confronto .gruppo th { background: var(--calce); font: 500 .74rem var(--f-dati); letter-spacing: .1em; text-transform: uppercase; color: var(--petrolio-3); }
.confronto .si { color: var(--verde); font-weight: 700; }
.confronto .no { color: var(--grigio-chiaro); }
.confronto tr:last-child > * { border-bottom: 0; }

/* ---------- FAQ ---------- */
.faq { max-width: 52rem; display: grid; gap: 0; border-top: 1px solid var(--linea); }
.faq.centro { margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; list-style: none; padding-block: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font: 700 1.08rem var(--f-titolo); color: var(--petrolio); font-stretch: 105%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--calce); color: var(--petrolio); font: 500 1.2rem/1 var(--f-dati); flex-shrink: 0; transition: transform .2s, background .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--giallo); }
.faq details p { padding-bottom: 22px; color: var(--grigio); max-width: 44rem; }

/* ---------- chiamata finale ---------- */
.finale .pagina { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: end; }
@media (max-width: 860px) { .finale .pagina { grid-template-columns: minmax(0, 1fr); } }
.finale h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; }
.finale p { color: var(--grigio-chiaro); font-size: 1.12rem; margin-top: 18px; max-width: 34rem; }
.finale .azioni { margin-top: 0; justify-content: flex-start; }

/* ---------- modulo demo ---------- */
.modulo-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; background: var(--bianco); border: 1px solid var(--linea); border-radius: 18px; padding: clamp(22px, 4vw, 36px); box-shadow: var(--ombra); }
@media (max-width: 600px) { .modulo-demo { grid-template-columns: minmax(0, 1fr); } }
.modulo-demo label { display: grid; gap: 7px; font-size: .88rem; font-weight: 500; color: var(--testo); }
.modulo-demo .tutta { grid-column: 1 / -1; }
.modulo-demo input, .modulo-demo select, .modulo-demo textarea { font: inherit; font-size: 1rem; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--linea); background: var(--calce); color: var(--testo); width: 100%; }
.modulo-demo textarea { min-height: 110px; resize: vertical; }
.modulo-demo input:focus, .modulo-demo select:focus, .modulo-demo textarea:focus { outline: 2px solid var(--giallo); outline-offset: 0; background: var(--bianco); }
.modulo-demo .bottone { grid-column: 1 / -1; padding-block: 17px; }
.esito { grid-column: 1 / -1; font-size: .92rem; color: var(--giallo-scuro); min-height: 1.4em; }
.contatti-lato { display: grid; gap: 22px; align-content: start; }
.contatti-lato .riga-c { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: center; }
.contatti-lato .riga-c b { display: block; color: var(--petrolio); }
.contatti-lato .riga-c span { color: var(--grigio); font-size: .95rem; }

/* ---------- chi siamo ---------- */
.racconto { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); }
@media (max-width: 900px) { .racconto { grid-template-columns: minmax(0, 1fr); } }
.racconto .testo { display: grid; gap: 18px; font-size: 1.1rem; max-width: 40rem; }
.racconto .testo p { color: #374151; }
.principio { display: grid; gap: 10px; padding-top: 22px; border-top: 3px solid var(--petrolio); }
.principio b { font: 500 .76rem var(--f-dati); letter-spacing: .1em; color: var(--petrolio-3); }
.principio h3 { font-size: 1.3rem; font-weight: 800; }
.principio p { color: var(--grigio); }
.bozza { display: inline-block; margin-top: 18px; padding: 8px 12px; border-radius: 8px; background: var(--giallo-tenue); color: var(--giallo-scuro); font-size: .88rem; }

/* ---------- piede ---------- */
footer { background: var(--petrolio); color: var(--grigio-chiaro); padding-block: 64px 32px; font-size: .93rem; }
footer .colonne-p { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
@media (max-width: 860px) { footer .colonne-p { grid-template-columns: repeat(2, minmax(0, 1fr)); } footer .colonne-p > div:first-child { grid-column: 1 / -1; } }
footer h5 { margin: 0 0 16px; font: 500 .74rem/1 var(--f-dati); letter-spacing: .14em; text-transform: uppercase; color: var(--bianco); }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--bianco); }
footer .descr { margin-top: 18px; max-width: 22rem; }
footer .fondo-p { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--linea-scura); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .84rem; }

/* ---------- marchio ---------- */
.tavola-logo { display: grid; place-items: center; padding: clamp(40px, 8vw, 96px) 24px; border-radius: 18px; }
.tavola-logo svg { width: min(520px, 100%); height: auto; }
.costruzione { background: var(--bianco); border: 1px solid var(--linea); }
.costruzione svg { width: min(640px, 100%); }
.campioni { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .campioni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campione { border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); background: var(--bianco); }
.campione i { display: block; height: 96px; }
.campione div { padding: 12px 14px; font-size: .88rem; }
.campione b { display: block; color: var(--petrolio); }
.campione span { font: 400 .8rem var(--f-dati); color: var(--grigio); }
.icone-app { display: flex; flex-wrap: wrap; gap: 28px; align-items: end; }
.icone-app svg { display: block; }
.icone-app figure { margin: 0; display: grid; gap: 10px; justify-items: center; font: 400 .78rem var(--f-dati); color: var(--grigio); }
.griglia-2 .tavola-logo svg { width: min(340px, 84%); }

/* ---------- accedi ---------- */
.barra nav a.accedi { margin-left: 10px; padding-left: 18px; border-left: 1px solid var(--linea); border-radius: 0; color: var(--petrolio); font-weight: 600; }
@media (max-width: 960px) { .barra nav a.accedi { margin: 0; padding-left: 4px; border-left: 0; } }

/* ---------- giro dell'app a schede ---------- */
.tour { display: grid; gap: 28px; }
.schede { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .schede { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.schede button { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--linea); background: var(--bianco); cursor: pointer; font: 400 .84rem/1.35 var(--f-testo); color: var(--grigio); transition: border-color .15s, box-shadow .15s; min-width: 0; }
.schede button b { display: block; font: 700 1rem/1.3 var(--f-titolo); color: var(--petrolio); font-stretch: 105%; }
.schede button svg { width: 22px; height: 22px; color: var(--grigio); }
.schede button:hover { border-color: var(--grigio-chiaro); }
.schede button[aria-selected="true"] { border-color: var(--giallo); box-shadow: 0 0 0 1px var(--giallo), var(--ombra); }
.schede button[aria-selected="true"] svg { color: var(--giallo); }
.pannello { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(22px, 4vw, 44px); border-radius: 20px; background: var(--calce); }
@media (max-width: 900px) { .pannello { grid-template-columns: minmax(0, 1fr); } }
.pannello-testo { display: grid; gap: 14px; align-content: start; }
.pannello-testo h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; }
.pannello-testo p { color: var(--grigio); }
.pannello-testo .spunte { margin-top: 2px; }
.pannello-testo .link-freccia { justify-self: start; margin-top: 6px; }

/* ---------- prima e dopo ---------- */
.prima-dopo { border-radius: 18px; overflow: hidden; border: 1px solid var(--linea); background: var(--bianco); }
.pd-testa, .pd-riga { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pd-testa span { padding: 16px 24px; font: 500 .76rem var(--f-dati); letter-spacing: .12em; text-transform: uppercase; }
.pd-testa span:first-child { color: var(--grigio); background: var(--calce); }
.pd-testa span:last-child { color: var(--bianco); background: var(--petrolio); }
.pd-riga { border-top: 1px solid var(--linea); }
.pd-riga p { padding: 20px 24px; }
.pd-riga p:first-child { color: var(--grigio); background: var(--calce); text-decoration: line-through; text-decoration-color: rgb(91 100 116 / .35); }
.pd-riga p:last-child { color: var(--testo); font-weight: 500; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.pd-riga p:last-child::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 4px; background: var(--giallo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 640px) {
  .pd-testa { display: none; }
  .pd-riga { grid-template-columns: minmax(0, 1fr); }
  .pd-riga p { padding: 14px 18px; }
}

/* ---------- incluso in ogni piano ---------- */
.incluso { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--linea); border-radius: 16px; background: var(--bianco); overflow: hidden; }
@media (max-width: 860px) { .incluso { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .incluso { grid-template-columns: minmax(0, 1fr); } }
.incluso div { padding: 22px; display: grid; gap: 8px; align-content: start; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); margin: 0 -1px -1px 0; }
.incluso b { font: 700 1.02rem var(--f-titolo); color: var(--petrolio); font-stretch: 105%; }
.incluso span { color: var(--grigio); font-size: .93rem; }

/* ---------- FAQ per gruppi ---------- */
.faq-pagina { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .faq-pagina { grid-template-columns: minmax(0, 1fr); } .faq-indice { display: none; } }
.faq-indice { position: sticky; top: 110px; display: grid; gap: 4px; }
.faq-indice a { text-decoration: none; padding: 9px 12px; border-radius: 8px; color: var(--grigio); font-size: .95rem; }
.faq-indice a:hover { background: var(--calce); color: var(--petrolio); }
.faq-gruppo + .faq-gruppo { margin-top: 56px; }
.faq-gruppo h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-weight: 800; margin-bottom: 18px; scroll-margin-top: 100px; }

/* ---------- 404 ---------- */
.nontrovata { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.nontrovata .grande { font: 800 clamp(5rem, 16vw, 9rem)/1 var(--f-titolo); color: var(--petrolio); font-stretch: 112%; }
.nontrovata .grande span { color: var(--giallo); }

/* ---------- chi siamo ---------- */
.fondatore { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .fondatore { grid-template-columns: minmax(0, 1fr); } }
.ritratto { aspect-ratio: 4 / 5; max-width: 100%; border-radius: 20px; background: var(--petrolio); display: grid; place-items: center; align-content: center; gap: 10px; position: relative; overflow: hidden; }
.ritratto::after { content: ""; position: absolute; right: 22px; bottom: 22px; width: 22px; height: 22px; background: var(--giallo); }
.ritratto span { font: 800 clamp(4rem, 9vw, 6rem)/1 var(--f-titolo); color: var(--bianco); font-stretch: 112%; }
.ritratto small { font: 400 .78rem var(--f-dati); color: var(--grigio-chiaro); letter-spacing: .08em; text-transform: uppercase; }
.fondatore-testo { display: grid; gap: 14px; }
.fondatore-testo h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.02em; }
.fondatore-testo .ruolo { font: 500 .9rem var(--f-dati); color: var(--petrolio-3); margin-top: -4px; }
.fondatore-testo > p:not(.ruolo) { color: var(--grigio); font-size: 1.1rem; max-width: 36rem; }
.fronti { display: grid; gap: 12px; margin-top: 8px; }
.fronti > div { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--linea); border-radius: 14px; }
.fronti .icona { grid-row: span 2; }
.fronti b { font: 700 1.05rem var(--f-titolo); color: var(--petrolio); font-stretch: 105%; }
.fronti span:not(.icona) { color: var(--grigio); font-size: .95rem; }
.tappe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: t; }
@media (max-width: 900px) { .tappe { grid-template-columns: minmax(0, 1fr); } }
.tappa { padding: 28px 28px 30px 0; border-top: 3px solid var(--linea); display: grid; gap: 12px; align-content: start; position: relative; }
.tappa::before { content: ""; position: absolute; top: -3px; left: 0; width: 56px; height: 3px; background: var(--giallo); }
.tappa:last-child { border-top-color: var(--petrolio); }
.tappa b { font: 500 .8rem var(--f-dati); color: var(--petrolio-3); letter-spacing: .1em; }
.tappa h3 { font-size: 1.35rem; font-weight: 800; }
.tappa p { color: var(--grigio); }
.scala { display: grid; gap: 14px; padding: clamp(22px, 4vw, 36px); border-radius: 20px; background: var(--calce); }
.gradino { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; }
.gradino .n { font: 800 1.6rem/1 var(--f-titolo); color: var(--petrolio); font-stretch: 112%; text-align: right; }
.gradino div { display: grid; gap: 8px; }
.gradino b { font-weight: 600; font-size: .98rem; color: var(--testo); }
.gradino i { display: block; height: 10px; border-radius: 3px; background: var(--petrolio-3); }
.gradino:nth-child(3) i { background: #ea580c; }
.gradino:nth-child(4) i { background: var(--rosso); }
.nota-scala { font: 400 .78rem var(--f-dati); color: var(--grigio); margin-top: 6px; }
.citazione { margin: 0; max-width: 52rem; padding-left: clamp(20px, 3vw, 32px); border-left: 4px solid var(--giallo); }
.citazione p { font: 600 clamp(1.3rem, 2.6vw, 1.9rem)/1.35 var(--f-titolo); color: var(--bianco); font-stretch: 102%; }
.citazione footer { margin-top: 16px; font: 500 .85rem var(--f-dati); color: var(--grigio-chiaro); letter-spacing: .06em; background: none; padding: 0; border: 0; }

/* ---------- racconto della O ---------- */
.racconto-o { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1040px) { .racconto-o { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .racconto-o { grid-template-columns: minmax(0, 1fr); } }
.racconto-o li { display: grid; gap: 10px; align-content: start; position: relative; }
.racconto-o figure { margin: 0 0 8px; aspect-ratio: 1; border-radius: 16px; background: var(--calce); display: grid; place-items: center; padding: 14px; }
.racconto-o figure svg { width: 100%; height: 100%; display: block; }
.racconto-o li:not(:last-child)::after { content: "→"; position: absolute; top: calc(25% - 10px); right: -18px; font: 500 1.1rem var(--f-dati); color: var(--grigio-chiaro); }
@media (max-width: 1040px) { .racconto-o li::after { display: none; } }
.racconto-o li:last-child figure { background: var(--bianco); box-shadow: inset 0 0 0 2px var(--giallo); }
.racconto-o b { font: 500 .76rem var(--f-dati); letter-spacing: .1em; color: var(--petrolio-3); text-transform: uppercase; }
.racconto-o h3 { font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.racconto-o p { color: var(--grigio); font-size: .96rem; }
.morale { margin: clamp(40px, 5vw, 64px) 0 0; padding: clamp(24px, 4vw, 40px); border-radius: 20px; background: var(--petrolio); }
.morale p { font: 700 clamp(1.25rem, 2.6vw, 1.8rem)/1.35 var(--f-titolo); color: var(--bianco); font-stretch: 102%; max-width: 54rem; }
.morale .evid { color: var(--giallo); }
@media (max-width: 560px) { .racconto-o figure { max-width: 240px; } .racconto-o li:last-child figure { max-width: 100%; aspect-ratio: 2 / 1; } }

/* ---------- storia breve del nome (home) ---------- */
.nome-breve { border-top: 1px solid var(--linea); }
.nome-breve .pagina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .nome-breve .pagina { grid-template-columns: minmax(0, 1fr); } }
.nb-figure { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; }
.nb-figure figure { margin: 0; display: grid; gap: 10px; justify-items: center; }
.nb-figure svg { width: 100%; max-width: 230px; aspect-ratio: 1; display: block; background: var(--calce); border-radius: 16px; padding: 10px; }
.nb-figure figcaption { font: 500 .74rem var(--f-dati); letter-spacing: .1em; text-transform: uppercase; color: var(--petrolio-3); }
.nb-freccia { font: 500 1.3rem var(--f-dati); color: var(--grigio-chiaro); }
.nb-testo { display: grid; gap: 16px; }
.nb-testo h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
.nb-testo p { color: var(--grigio); font-size: 1.08rem; max-width: 38rem; }
.nb-testo .link-freccia { justify-self: start; }

/* ---------- schermate vere dell'app ---------- */
.schermata { margin: 0; border-radius: 14px; overflow: hidden; background: var(--bianco); border: 1px solid var(--linea); box-shadow: var(--ombra-grande); min-width: 0; }
.schermata img, .schermata video { display: block; width: 100%; height: auto; }
.schermata video { aspect-ratio: 1280 / 800; background: var(--calce); }
.barra-browser { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--calce); border-bottom: 1px solid var(--linea); }
.barra-browser i { width: 10px; height: 10px; border-radius: 50%; background: var(--linea); }
.barra-browser span { margin-left: 10px; font: 500 .74rem var(--f-dati); color: var(--grigio); }
.apertura .schermata.grande { transform: perspective(1800px) rotateY(-6deg) rotateX(2deg); transform-origin: left center; }
@media (max-width: 1000px) { .apertura .schermata.grande { transform: none; } }
.video-sezione { padding-top: clamp(56px, 7vw, 96px); }
.video-sezione .schermata { max-width: 1100px; margin-inline: auto; }
.nota-dati { text-align: center; margin-top: 16px; font: 400 .8rem var(--f-dati); color: var(--grigio); }
.telefono-vero { margin: 0; width: 280px; max-width: 100%; padding: 10px; border-radius: 40px; background: var(--petrolio); box-shadow: var(--ombra-grande); }
.telefono-vero img { display: block; width: 100%; height: auto; border-radius: 30px; }

/* ---------- blog ---------- */
.card-articolo { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: 16px; background: var(--bianco); border: 1px solid var(--linea); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; min-width: 0; }
.card-articolo:hover { border-color: var(--grigio-chiaro); box-shadow: var(--ombra); transform: translateY(-2px); }
.card-articolo h3 { font-size: 1.22rem; font-weight: 800; line-height: 1.2; }
.card-articolo p { color: var(--grigio); font-size: .96rem; }
.cat { justify-self: start; font: 500 .72rem var(--f-dati); letter-spacing: .12em; text-transform: uppercase; color: var(--petrolio-3); }
.meta { font: 400 .8rem var(--f-dati); color: var(--grigio); }
.in-evidenza { display: grid; gap: 14px; padding: clamp(26px, 4vw, 48px); border-radius: 20px; background: var(--petrolio); text-decoration: none; margin-bottom: 40px; }
.in-evidenza .cat { color: var(--giallo); }
.in-evidenza h2 { color: var(--bianco); font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.08; max-width: 46rem; }
.in-evidenza p { color: var(--grigio-chiaro); font-size: 1.08rem; max-width: 42rem; }
.in-evidenza .meta { color: var(--grigio-chiaro); }
.in-evidenza .link-freccia { color: var(--bianco); justify-self: start; }
.filtri-blog { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filtri-blog button { border: 1px solid var(--linea); background: var(--bianco); padding: 9px 16px; border-radius: 99px; font: 500 .9rem var(--f-testo); color: var(--grigio); cursor: pointer; }
.filtri-blog button[aria-pressed="true"] { background: var(--petrolio); border-color: var(--petrolio); color: var(--bianco); }
.testa-articolo { padding-block: clamp(40px, 6vw, 80px) 28px; max-width: 52rem; display: grid; gap: 14px; }
.testa-articolo .torna { text-decoration: none; color: var(--grigio); font-size: .92rem; }
.testa-articolo h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.testa-articolo .sommario { font-size: 1.2rem; color: var(--grigio); }
.corpo-articolo { max-width: 46rem; padding-bottom: clamp(56px, 8vw, 96px); display: grid; gap: 18px; font-size: 1.09rem; line-height: 1.75; color: #2b3445; }
.corpo-articolo h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); font-weight: 800; margin-top: 22px; line-height: 1.2; }
.corpo-articolo a { color: var(--petrolio); text-decoration-color: var(--giallo); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.avviso-articolo { padding: 16px 20px; border-radius: 12px; background: var(--giallo-tenue); color: #7c2d12; font-size: .98rem; }
.riepilogo, .segnali { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.esempio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
@media (max-width: 520px) { .esempio { grid-template-columns: minmax(0, 1fr); } }
.esempio div { padding: 18px; display: grid; gap: 4px; border-right: 1px solid var(--linea); }
.esempio div:last-child { border-right: 0; }
.esempio span { font: 500 .74rem var(--f-dati); letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.esempio b { font: 800 1.5rem var(--f-titolo); color: var(--petrolio); font-stretch: 105%; }
.esempio .evidenza { background: var(--petrolio); }
.esempio .evidenza span { color: var(--grigio-chiaro); }
.esempio .evidenza b { color: var(--giallo); }
.fonti { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--linea); font-size: .92rem; }
.fonti h2 { font-size: 1.05rem; margin: 0 0 10px; }
.fonti ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* ---------- prezzi per profilo ---------- */
.scelta-profilo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 56rem; margin: 0 auto 26px; }
@media (max-width: 700px) { .scelta-profilo { grid-template-columns: minmax(0, 1fr); } }
.scelta-profilo button { display: flex; align-items: center; gap: 12px; text-align: left; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--linea); background: var(--bianco); cursor: pointer; font: 400 .85rem/1.35 var(--f-testo); color: var(--grigio); min-width: 0; }
.scelta-profilo button b { display: block; font: 700 1.05rem/1.3 var(--f-titolo); color: var(--petrolio); font-stretch: 105%; }
.scelta-profilo button svg { width: 24px; height: 24px; color: var(--grigio); }
.scelta-profilo button[aria-selected="true"] { border-color: var(--giallo); box-shadow: 0 0 0 1px var(--giallo), var(--ombra); }
.scelta-profilo button[aria-selected="true"] svg { color: var(--giallo); }
.piano-singolo { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 64rem; margin: 0 auto; }
@media (max-width: 860px) { .piano-singolo { grid-template-columns: minmax(0, 1fr); } }
.perche { display: grid; gap: 14px; }
.perche h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; line-height: 1.1; }
.perche p { color: var(--grigio); font-size: 1.05rem; }
.su-misura { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(22px, 3vw, 32px); border-radius: 18px; background: var(--bianco); border: 1px dashed var(--grigio-chiaro); }
.su-misura > div { display: grid; gap: 8px; max-width: 40rem; }
.su-misura h3 { font-size: 1.4rem; font-weight: 800; }
.su-misura p { color: var(--grigio); }

/* ---------- rifiniture della revisione ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.modulo-f .scheda h3 { font-size: 1.18rem; margin-top: 0; line-height: 1.25; }
.evid { color: #c2410c; }
.confronto tbody th, .confronto thead th:first-child { position: sticky; left: 0; background: var(--bianco); z-index: 1; min-width: 190px; }
.confronto thead th:first-child, .confronto .gruppo th { background: var(--calce); }
.cta-mobile { display: none; }
@media (max-width: 960px) {
  .cta-mobile { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgb(255 255 255 / .96); backdrop-filter: blur(10px); border-top: 1px solid var(--linea); }
  .cta-mobile .bottone { flex: 1; padding: 14px 12px; font-size: .95rem; }
  body.con-cta, body:has(.cta-mobile) { padding-bottom: 76px; }
}
.box-articolo { margin-top: 18px; display: grid; gap: 10px; padding: 24px; border-radius: 16px; background: var(--petrolio); color: var(--grigio-chiaro); }
.box-articolo b { font: 800 1.25rem var(--f-titolo); color: var(--bianco); font-stretch: 105%; }
.box-articolo .azioni { margin-top: 6px; }
.corpo-articolo .box-articolo a.bottone { color: var(--bianco); text-decoration: none; }

/* ---------- modulo, pagine legali, beta ---------- */
.modulo-demo .consenso { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-weight: 400; color: var(--grigio); font-size: .88rem; }
.modulo-demo .consenso input { width: 18px; height: 18px; margin-top: 2px; padding: 0; accent-color: #c2410c; }
.modulo-demo .consenso a { color: var(--petrolio); }
.da-compilare { background: var(--giallo-tenue); color: #7c2d12; padding: 0 .3em; border-radius: 4px; font-weight: 600; }
.legale h2 { font-size: 1.3rem; }
.legale .indice { display: grid; gap: 6px; padding: 18px 22px; border-radius: 12px; background: var(--calce); font-size: .95rem; }
.banner-beta { background: var(--petrolio); color: var(--grigio-chiaro); font-size: .92rem; }
.banner-beta .pagina { padding-block: 10px; }
.banner-beta b { color: var(--bianco); }
.banner-beta a { color: var(--giallo); font-weight: 600; text-decoration: none; margin-left: 6px; }
.modulo-demo input.sr-only { width: 1px; height: 1px; padding: 0; border: 0; }

/* ================= MOVIMENTO ================= */
/* Barra in alto e barra di lettura (anche con movimento ridotto) */
.barra { transition: box-shadow .25s, background-color .25s; }
.barra.scorsa { box-shadow: 0 8px 28px rgb(14 22 33 / .09); background: rgb(255 255 255 / .985); }
.barra .logo svg { transition: scale .25s; transform-origin: left center; }
.barra.scorsa .logo svg { scale: .9; }
.lettura { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.lettura i { display: block; height: 100%; background: var(--giallo); transform: scaleX(0); transform-origin: left; }

/* Avvisi dal vivo sullo screenshot della home */
.avvisi-live { position: absolute; left: -26px; bottom: -22px; width: min(320px, 80%); height: 100px; pointer-events: none; z-index: 2; }
.avviso { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; align-items: center; background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--ombra-grande); padding: 12px 15px; font-size: .8rem; line-height: 1.35; color: var(--grigio); opacity: 0; translate: 0 22px; scale: .96; transition: opacity .45s, translate .6s cubic-bezier(.2,.8,.2,1), scale .5s; }
.avviso b { display: block; font: 700 .95rem/1.25 var(--f-titolo); color: var(--petrolio); }
.avviso .bollo { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--giallo); color: var(--bianco); }
.avviso .bollo.p { background: var(--petrolio); color: var(--giallo); }
.avviso .bollo svg { width: 18px; height: 18px; }
.avviso.ora { opacity: 1; translate: 0 0; scale: 1; z-index: 3; }
.avviso.prima { opacity: 1; translate: 0 -14px; scale: .93; z-index: 2; box-shadow: var(--ombra); }
.avviso.prima > * { opacity: 0; transition: opacity .3s; }
.avviso.via { opacity: 0; translate: 0 -26px; scale: .86; z-index: 1; }
@media (max-width: 900px) { .avvisi-live { left: 10px; bottom: -30px; width: min(300px, 86%); } }

.intro { display: none; }
@property --r { syntax: '<length>'; inherits: true; initial-value: 0px; }

@media (prefers-reduced-motion: no-preference) {
  /* ---------- Intro: il tracciamento della zona ---------- */
  .intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; cursor: pointer; background: #0e1621;
    --u: calc(min(74vw, 540px) / 368);
    clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
      calc(50% - 5 * var(--r)) calc(50% - 29 * var(--r)), calc(50% + 5 * var(--r)) calc(50% - 29 * var(--r)),
      calc(50% + 21 * var(--r)) calc(50% - 13 * var(--r)), calc(50% + 21 * var(--r)) calc(50% + 13 * var(--r)),
      calc(50% + 5 * var(--r)) calc(50% + 29 * var(--r)), calc(50% - 5 * var(--r)) calc(50% + 29 * var(--r)),
      calc(50% - 21 * var(--r)) calc(50% + 13 * var(--r)), calc(50% - 21 * var(--r)) calc(50% - 13 * var(--r)),
      calc(50% - 5 * var(--r)) calc(50% - 29 * var(--r)));
    animation: buco .75s cubic-bezier(.7, 0, .9, .45) 2.95s forwards, intro-fine .3s ease 3.5s forwards; }
  .senza-intro .intro { display: none; }
  .intro-attesa .intro, .intro-attesa .intro *, .intro-attesa .apertura .griglia > div:first-child > *, .intro-attesa .apertura .scena { animation-play-state: paused !important; }
  .intro.salta { animation: intro-fine .3s ease forwards; }
  @keyframes intro-fine { to { opacity: 0; visibility: hidden; } }
  @keyframes buco { from { --r: var(--u); } to { --r: calc(var(--u) * 26); } }
  .intro-logo { width: min(74vw, 540px); height: auto; overflow: visible; transform-origin: 36.413% 50%;
    animation: intro-centra .3s cubic-bezier(.6, 0, .3, 1) 2.65s both, intro-zoom .75s cubic-bezier(.7, 0, .9, .45) 2.95s both; }
  @keyframes intro-centra { to { translate: 13.587% 0; } }
  @keyframes intro-zoom { to { scale: 26; } }
  .intro-logo * { transform-box: fill-box; transform-origin: center; }
  .i-asse { stroke: #f97316; stroke-width: 1px; vector-effect: non-scaling-stroke; opacity: .75; transform-box: view-box; transform-origin: 134px 50px; }
  .i-h { animation: i-assex .6s cubic-bezier(.6,0,.2,1) .05s both, i-via .35s ease 1.55s forwards; }
  .i-v { animation: i-assey .6s cubic-bezier(.6,0,.2,1) .15s both, i-via .35s ease 1.55s forwards; }
  @keyframes i-assex { from { transform: scaleX(0); } }
  @keyframes i-assey { from { transform: scaleY(0); } }
  .i-pic { fill: #f97316; animation: i-pop .3s cubic-bezier(.3,1.7,.5,1) calc(.35s + var(--k) * .045s) both, i-via .2s ease 1.1s forwards; }
  @keyframes i-pop { from { transform: scale(0); } }
  .i-per { fill: none; stroke: #f97316; stroke-width: 1.4; stroke-dasharray: 1; animation: i-traccia .6s ease-in-out .55s both, i-via .25s ease 1.15s forwards; }
  @keyframes i-traccia { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .i-o { fill: #fff; animation: i-o .35s cubic-bezier(.2,.8,.2,1) 1s both; }
  @keyframes i-o { from { opacity: 0; transform: scale(.9); } }
  .i-cap { fill: #f97316; animation: i-cade .4s cubic-bezier(.3,1.6,.5,1) 1.25s both; }
  @keyframes i-cade { from { opacity: 0; transform: translateY(-46px) scale(1.5); } }
  .i-onda { fill: none; stroke: #f97316; stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: 0; animation: i-onda .7s ease-out 1.55s; }
  @keyframes i-onda { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(5); } }
  .i-l { fill: #fff; animation: i-lettera .55s cubic-bezier(.2,.8,.2,1) calc(1.5s + var(--k) * .05s) both; }
  @keyframes i-lettera { from { transform: translateX(var(--dx)); } }
  @keyframes i-entra { from { opacity: 0; } }
  @keyframes i-via { to { opacity: 0; } }
  .intro-motto { position: absolute; left: 16px; right: 16px; top: calc(50% + min(74vw, 540px) * .136 + 34px); text-align: center; font: 500 clamp(.72rem, 2.9vw, .92rem) var(--f-dati); letter-spacing: .2em; text-transform: uppercase; color: #d4dae3; animation: i-sale .45s ease 1.55s both, i-via .2s ease 2.6s forwards; }
  @keyframes i-sale { from { opacity: 0; transform: translateY(10px); } }

  /* ---------- Apertura della home ---------- */
  body { --d0: .1s; }
  body.con-intro { --d0: 3.1s; }
  .senza-intro body.con-intro { --d0: .1s; }
  .apertura .griglia > div:first-child > * { animation: sale .8s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d0) + var(--i, 0) * .09s); }
  .apertura .griglia > div:first-child > :nth-child(2) { --i: 1; }
  .apertura .griglia > div:first-child > :nth-child(3) { --i: 2; }
  .apertura .griglia > div:first-child > :nth-child(4) { --i: 3; }
  .apertura .griglia > div:first-child > :nth-child(5) { --i: 4; }
  .apertura .scena { animation: schermo 1.1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d0) + .2s); }
  @keyframes sale { from { opacity: 0; translate: 0 28px; } }
  @keyframes schermo { from { opacity: 0; translate: 70px 40px; scale: .94; } }

  /* Testata delle altre pagine */
  .entra .pagina > *, .testa-articolo.entra > * { animation: sale .7s cubic-bezier(.2,.7,.2,1) both; }
  .entra .pagina > :nth-child(2), .testa-articolo.entra > :nth-child(2) { animation-delay: .08s; }
  .entra .pagina > :nth-child(3), .testa-articolo.entra > :nth-child(3) { animation-delay: .16s; }
  .entra .pagina > :nth-child(n+4), .testa-articolo.entra > :nth-child(n+4) { animation-delay: .24s; }

  /* ---------- Sezioni che entrano mentre scorri ---------- */
  .svela { animation: sale .75s cubic-bezier(.2,.7,.2,1) both paused; animation-delay: var(--sd, 0s); }
  .svela.visto { animation-play-state: running; }

  /* Barra delle quantità (Chi siamo) */
  .gradino.svela i { animation: cresce 1.1s cubic-bezier(.2,.7,.2,1) both paused; animation-delay: calc(var(--sd, 0s) + .25s); }
  .gradino.visto i { animation-play-state: running; }
  @keyframes cresce { from { width: 0; } }

  /* ---------- Prima / dopo ---------- */
  .pd-riga p:first-child:has(.barrato) { text-decoration: none; }
  .barrato { background: linear-gradient(rgb(91 100 116 / .6), rgb(91 100 116 / .6)) no-repeat 0 58% / 0 1.5px; }
  .pd-riga.svela .barrato { animation: barra .8s ease-in-out both paused; animation-delay: calc(var(--sd, 0s) + .45s); }
  .pd-riga.svela p:last-child { animation: da-sinistra .6s cubic-bezier(.2,.7,.2,1) both paused; animation-delay: calc(var(--sd, 0s) + 1s); }
  .pd-riga.svela p:last-child::before { animation: i-pop .4s cubic-bezier(.3,1.7,.5,1) both paused; animation-delay: calc(var(--sd, 0s) + 1.35s); }
  .pd-riga.visto .barrato, .pd-riga.visto p:last-child, .pd-riga.visto p:last-child::before { animation-play-state: running; }
  @keyframes barra { to { background-size: 100% 1.5px; } }
  @keyframes da-sinistra { from { opacity: 0; translate: -24px 0; } }
  @keyframes i-pop { from { transform: scale(0); } }

  /* ---------- Disegni della O che si tracciano ---------- */
  .disegno * { transform-box: fill-box; transform-origin: center; }
  .svela .disegno *, .svela.disegno * { animation-play-state: paused !important; }
  .visto .disegno *, .visto.disegno * { animation-play-state: running !important; }
  .disegno .tr { stroke-dasharray: 1; animation: i-traccia 1.2s ease-in-out both; animation-delay: calc(var(--sd, 0s) + var(--dd, 0s) + var(--k) * .15s); }
  .disegno .per { animation: d-per .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--sd, 0s) + var(--dd, 0s)); }
  @keyframes d-per { from { opacity: 0; scale: 1.18; } }
  .disegno .pic { animation: i-pop .35s cubic-bezier(.3,1.7,.5,1) both; animation-delay: calc(var(--sd, 0s) + var(--dd, 0s) + .3s + var(--k) * .06s); }
  .disegno .o { animation: d-o .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--sd, 0s) + var(--dd, 0s)); }
  @keyframes d-o { from { opacity: 0; scale: .85; } }
  .disegno .assi { transform-box: view-box; transform-origin: 80px 80px; animation: d-assi .6s ease both; animation-delay: calc(var(--sd, 0s) + var(--dd, 0s) + .3s); }
  @keyframes d-assi { from { opacity: 0; scale: .2; } }
  .disegno .cap { animation: d-cade .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--sd, 0s) + var(--dd, 0s) + .65s); }
  @keyframes d-cade { from { opacity: 0; translate: 0 -40px; scale: 1.4; } }
  .disegno .lt { animation: d-lettera .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--sd, 0s) + var(--dd, 0s) + var(--k) * .12s); }
  @keyframes d-lettera { from { opacity: 0; translate: 0 22px; } }

  /* ---------- Tour: avanzamento automatico ---------- */
  .tour.auto .schede button { position: relative; overflow: hidden; }
  .tour.auto .schede button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--giallo); transform-origin: left; animation: riempi 7s linear both; }
  .tour.auto.fuori .schede button::after, .tour.auto.sopra .schede button::after { animation-play-state: paused; }
  @keyframes riempi { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .pannello:not([hidden]) { animation: comparsa .5s cubic-bezier(.2,.7,.2,1) both; }
  .pannello:not([hidden]) .schermata { animation: schermo-tab .6s cubic-bezier(.2,.7,.2,1) .05s both; }
  @keyframes comparsa { from { opacity: 0; } }
  @keyframes schermo-tab { from { opacity: 0; translate: 24px 0; } }

  /* Card che reagiscono al passaggio */
  .scheda, .profilo, .passo { transition: translate .25s ease, box-shadow .25s ease; }
  .profilo:hover, .passo:hover { translate: 0 -3px; }
}

/* ---------- anteprime "Per chi è": commessa e cantiere ---------- */
.modulo-f .link-freccia { margin-top: 22px; }
.scuro .link-freccia { color: var(--bianco); }
.anteprima { position: relative; padding: 0 0 50px; min-width: 0; }
.mock { background: var(--bianco); color: var(--testo); border: 1px solid var(--linea); border-radius: 18px; box-shadow: var(--ombra-grande); padding: clamp(20px, 3vw, 30px); display: grid; gap: 4px; font-size: .92rem; }
.mock-testa { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mock-tipo { display: inline-flex; align-items: center; gap: 8px; font: 500 .72rem var(--f-dati); letter-spacing: .12em; text-transform: uppercase; color: var(--petrolio-3); }
.mock-tipo svg { width: 16px; height: 16px; }
.mock h4 { font: 800 clamp(1.2rem, 2vw, 1.45rem)/1.2 var(--f-titolo); font-stretch: 105%; color: var(--petrolio); letter-spacing: -.01em; }
.mock-sotto { color: var(--grigio); font-size: .88rem; }
.mock-num { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.mock-num div { background: var(--calce); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; min-width: 0; }
.mock-num small { font: 500 .66rem var(--f-dati); letter-spacing: .1em; text-transform: uppercase; color: var(--grigio); }
.mock-num b { font: 800 clamp(.98rem, 1.6vw, 1.15rem)/1.1 var(--f-titolo); color: var(--petrolio); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mock .arancio { color: #c2410c; }
.mock-barra { position: relative; height: 8px; border-radius: 99px; background: var(--calce); overflow: hidden; margin-top: 16px; }
.mock-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--giallo); }
.mock-barra.doppia i:first-child { background: rgb(249 115 22 / .3); }
.mock-nota { font-size: .82rem; color: var(--grigio); margin-top: 6px; }
.mock-righe { list-style: none; margin: 16px 0 0; padding: 0; display: grid; border-top: 1px solid var(--linea); }
.mock-righe li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--linea); }
.mock-righe li:last-child { border-bottom: 0; padding-bottom: 0; }
.mock-righe li > svg { width: 18px; height: 18px; color: var(--grigio); }
.mock-righe em { font: 600 .8rem var(--f-testo); font-style: normal; color: var(--petrolio); white-space: nowrap; }
.mock-righe em.attesa { color: #a35a12; }
.pallino { width: 10px; height: 10px; border-radius: 50%; justify-self: center; }
.pallino.alta { background: var(--rosso); }
.pallino.media { background: var(--petrolio-3); }
.pallino.attesa { background: var(--giallo); }
.persone { display: flex; }
.persone i { width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; font: 700 .58rem var(--f-testo); font-style: normal; letter-spacing: -.02em; background: var(--petrolio); color: var(--bianco); border: 2px solid var(--bianco); margin-left: -7px; }
.persone i:nth-child(2) { background: var(--petrolio-3); }
.persone i:nth-child(3) { background: #c2410c; }
.persone i:last-child { background: var(--calce); color: var(--petrolio); }
.mock-avviso { position: absolute; right: -18px; bottom: 0; display: flex; align-items: center; gap: 12px; max-width: min(330px, 86%); background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--ombra-grande); padding: 12px 15px; font-size: .8rem; line-height: 1.35; color: var(--grigio); }
.mock-avviso b { display: block; font: 700 .92rem/1.25 var(--f-titolo); color: var(--petrolio); }
.mock-avviso .bollo { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--giallo); color: var(--bianco); }
.mock-avviso .bollo.p { background: var(--petrolio); color: var(--giallo); }
.mock-avviso .bollo svg { width: 18px; height: 18px; }
@media (max-width: 920px) { .mock-avviso { right: 10px; } }
@media (max-width: 520px) { .mock-num { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mock-num div:last-child { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: no-preference) {
  .svela .mock-barra i { animation: cresce 1.2s cubic-bezier(.2,.7,.2,1) both paused; animation-delay: .45s; }
  .svela .mock-barra i + i { animation-delay: .7s; }
  .visto .mock-barra i { animation-play-state: running; }
  .svela .mock-avviso { animation: avviso-arriva .6s cubic-bezier(.2,.8,.2,1) both paused; animation-delay: 1.1s; }
  .visto .mock-avviso { animation-play-state: running; }
  @keyframes avviso-arriva { from { opacity: 0; translate: 0 18px; scale: .95; } }
}

/* ================= TELEFONO ================= */
.telefono-apertura, .scorri-lato { display: none; }
@media (max-width: 700px) {
  /* Apertura: al posto dello screenshot da computer, ZONA sul telefono */
  .apertura .schermata.grande { display: none; }
  .telefono-apertura { display: block; width: min(300px, 82%); margin: 8px auto 0; max-height: 470px; overflow: hidden; border-radius: 40px 40px 0 0; padding-bottom: 0; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  .telefono-apertura img { border-radius: 30px 30px 0 0; }
  .avvisi-live { left: 50%; translate: -50% 0; bottom: 6px; width: min(310px, 92%); }
  .apertura .azioni .bottone { flex: 1 1 100%; }

  /* Schede più compatte: icona a sinistra, testo a destra */
  .scheda, .profilo { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; padding: 20px; }
  .scheda > .icona, .profilo > .icona { grid-row: span 3; width: 44px; height: 44px; align-self: start; }
  .scheda > :not(.icona), .profilo > :not(.icona) { grid-column: 2; }
  .profilo .link-freccia { justify-self: start; margin-top: 6px; }
  .scheda h3, .profilo h3 { font-size: 1.08rem; }
  .scheda p, .profilo p { font-size: .93rem; }
  .griglia-4, .griglia-3, .griglia-2 { gap: 12px; }

  /* Tre passi: meno spazio */
  .passo { padding: 20px; gap: 12px; }
  .passo .vista { min-height: 0; }

  /* Chi siamo: ritratto più piccolo, storia della O in righe compatte */
  .ritratto { width: 132px; aspect-ratio: 1; border-radius: 18px; }
  .ritratto span { font-size: 2.6rem; }
  .ritratto small { font-size: .56rem; }
  .ritratto::after { width: 12px; height: 12px; right: 12px; bottom: 12px; }
  .racconto-o li { grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .racconto-o li > figure { grid-row: span 3; margin: 0; max-width: none; padding: 8px; }
  .racconto-o li > :not(figure) { grid-column: 2; }
  .racconto-o li:last-child figure { max-width: none; aspect-ratio: 1; }

  /* Meno aria tra le sezioni */
  section { padding-block: 52px; }
  .intesta { margin-bottom: 30px; }

  /* Prezzi: avviso che la tabella si scorre */
  .scorri-lato { display: block; font: 500 .74rem var(--f-dati); letter-spacing: .06em; color: var(--petrolio-3); margin: 0 0 10px; }
}

#inizio { position: absolute; top: 0; left: 0; width: 1px; height: 1px; outline: none; }