/* Ensafe · sito
   Colori e caratteri dal Business Plan 2027–2031 (edizione grafica v3):
   blu Ensafe con sfere e grana, nero Estia con grafica a punti, accento fiamma.
   Header, pulsanti, hero e footer seguono l'impianto di openai.com. */

@font-face { font-family: Biennale; src: url(../font/Biennale-Book.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Biennale; src: url(../font/Biennale-Bold.woff2) format("woff2"); font-weight: 600 700; font-display: swap; }

:root {
  color-scheme: dark;
  --nero: #000;
  --notte: #0A1F33;
  --notte-2: #071726;
  --bianco: #fff;
  --testo: #fff;
  --testo-2: rgba(255, 255, 255, .66);
  --testo-3: rgba(255, 255, 255, .46);
  --linea: rgba(255, 255, 255, .12);
  --linea-forte: rgba(255, 255, 255, .24);
  --superficie: rgba(255, 255, 255, .05);
  --superficie-2: rgba(255, 255, 255, .09);
  --caldo: #F9B479;
  --caldo-pieno: #F58220;
  --rosso: #FF5252;
  --ciano: #A8D0D5;
  --mare: #21AEA8;
  --blu: #4D9BFF;
  --blu-ensafe: #105AB9;
  --font: Biennale, "Helvetica Neue", Arial, sans-serif;
  --r: 16px;
  --r-s: 10px;
  --largo: 1280px;
  --stretto: 760px;
  --gutter: clamp(16px, 4vw, 32px);
  --header: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--nero); color: var(--testo);
  font-family: var(--font); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--caldo); color: #000; }
:focus-visible { outline: 2px solid var(--caldo); outline-offset: 3px; border-radius: 4px; }

.salta { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 8px 14px; border-radius: 999px; }
.salta:focus { left: 16px; }

/* Grana del BP, sopra tutto ma senza intercettare i clic */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background: url(../media/grana-nero.png) repeat; background-size: 360px; opacity: .22; mix-blend-mode: overlay;
}

.contenitore { width: 100%; max-width: var(--largo); margin: 0 auto; padding: 0 var(--gutter); }
.contenitore--stretto { max-width: calc(var(--stretto) + 2 * var(--gutter)); }

/* ---------- Pulsanti (pillola, come openai.com) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 18px; border-radius: 999px; border: 0;
  font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.btn--primario { background: var(--bianco); color: var(--nero); }
.btn--primario:hover { background: rgba(255, 255, 255, .82); }
.btn--secondario { background: rgba(255, 255, 255, .1); color: var(--bianco); }
.btn--secondario:hover { background: rgba(255, 255, 255, .18); }
.btn--testo { background: transparent; color: var(--bianco); padding: 0 12px; }
.btn--testo:hover { background: rgba(255, 255, 255, .08); }
.btn--grande { height: 48px; padding: 0 24px; font-size: 16px; }
.btn--piccolo { height: 34px; padding: 0 14px; font-size: 14px; }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn[disabled] { opacity: .5; cursor: progress; }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.azioni--centro { justify-content: center; }

.link-freccia { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; font-size: 15px; }
.link-freccia::after { content: "→"; transition: transform .2s ease; }
.link-freccia:hover::after { transform: translateX(3px); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50; height: var(--header);
  transition: background-color .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.header.is-scrolled, .menu-aperto .header { background: rgba(0, 0, 0, .82); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--linea); }
.header__barra { height: 100%; display: flex; align-items: center; gap: 28px; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.header__logo { display: flex; align-items: center; flex: none; }
.header__logo img { width: 96px; height: auto; }
.header__nav { display: flex; align-items: center; gap: 2px; }
.header__nav a {
  font-size: 15px; text-decoration: none; color: var(--testo-2); padding: 8px 12px; border-radius: 999px;
  transition: color .2s ease, background-color .2s ease;
}
.header__nav a:hover { color: var(--bianco); background: rgba(255, 255, 255, .06); }
.header__nav a[aria-current="page"] { color: var(--bianco); }
.header__destra { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.header__burger { display: none; width: 40px; height: 40px; border-radius: 999px; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.header__burger:hover { background: rgba(255, 255, 255, .08); }
.header__burger span, .header__burger span::before, .header__burger span::after { display: block; width: 18px; height: 1.5px; background: #fff; position: relative; transition: transform .25s ease, background-color .25s ease; }
.header__burger span::before, .header__burger span::after { content: ""; position: absolute; left: 0; }
.header__burger span::before { top: -6px; } .header__burger span::after { top: 6px; }
.menu-aperto .header__burger span { background: transparent; }
.menu-aperto .header__burger span::before { transform: translateY(6px) rotate(45deg); }
.menu-aperto .header__burger span::after { transform: translateY(-6px) rotate(-45deg); }

.menu-mobile {
  position: fixed; inset: var(--header) 0 0 0; z-index: 49; background: #000;
  padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto;
  display: none; flex-direction: column; gap: 4px;
}
.menu-aperto .menu-mobile { display: flex; }
.menu-aperto { overflow: hidden; }
.menu-mobile a.voce { font-size: 28px; font-weight: 600; letter-spacing: -.02em; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.menu-mobile .voce small { display: block; font-size: 14px; font-weight: 400; color: var(--testo-3); letter-spacing: 0; margin-top: 2px; }
.menu-mobile .azioni { margin-top: 24px; }
.menu-mobile .azioni .btn { flex: 1; height: 48px; }

@media (max-width: 960px) {
  .header__nav, .header__destra .btn--testo { display: none; }
  .header__burger { display: inline-flex; }
}
@media (max-width: 420px) { .header__destra .btn--primario { display: none; } }

/* ---------- Hero (centrata, come openai.com) ---------- */
.hero { padding: clamp(56px, 10vw, 128px) 0 clamp(32px, 5vw, 56px); text-align: center; }
.hero__occhiello { display: inline-flex; justify-content: center; text-align: left; max-width: 100%; align-items: center; gap: 8px; font-size: 14px; color: var(--testo-2); margin-bottom: 20px; }
.hero__occhiello .punto { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--caldo); box-shadow: 0 0 0 4px rgba(249, 180, 121, .18); }
.hero__occhiello--ensafe .punto { background: var(--mare); box-shadow: 0 0 0 4px rgba(33, 174, 168, .2); }
.hero h1 { font-size: clamp(40px, 7vw, 84px); max-width: 15ch; margin: 0 auto; }
.hero__sotto { font-size: clamp(17px, 1.6vw, 20px); color: var(--testo-2); max-width: 40em; margin: 22px auto 0; }
.hero .azioni { justify-content: center; margin-top: 32px; }
.hero__media { margin-top: clamp(40px, 6vw, 72px); }

.media-scheda {
  position: relative; border-radius: var(--r); overflow: hidden; background: var(--notte);
  aspect-ratio: 16 / 9; max-width: 1440px; margin: 0 auto;
}
.media-scheda > img { width: 100%; height: 100%; object-fit: cover; }
.media-scheda--nero { background: #000; }
.media-scheda__didascalia {
  position: absolute; left: 20px; bottom: 18px; right: 20px; display: flex; justify-content: space-between; gap: 16px;
  font-size: 13px; color: rgba(255, 255, 255, .78); pointer-events: none;
}
@media (max-width: 720px) {
  .media-scheda { aspect-ratio: 4 / 5; }
  .media-scheda--resta { aspect-ratio: 16 / 9; }
  .media-scheda__didascalia { display: none; }
}
.hero__media .contenitore { max-width: 1440px; }

/* ---------- Sezioni ---------- */
.sezione { padding: clamp(72px, 10vw, 136px) 0; position: relative; }
.sezione--compatta { padding: clamp(48px, 7vw, 88px) 0; }
.sezione + .sezione--continua { padding-top: 0; }
.sezione__testa { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.sezione__testa--centro { margin-left: auto; margin-right: auto; text-align: center; }
.occhiello { display: block; font-size: 14px; color: var(--testo-3); margin-bottom: 14px; letter-spacing: .01em; }
.occhiello--caldo { color: var(--caldo); }
.occhiello--mare { color: var(--ciano); }
.h-sezione { font-size: clamp(32px, 4.6vw, 56px); }
.h-media { font-size: clamp(24px, 2.8vw, 34px); }
.testo-lungo { font-size: clamp(17px, 1.5vw, 19px); color: var(--testo-2); margin-top: 18px; }
.testo-lungo + .testo-lungo { margin-top: 14px; }
.testo-lungo strong { color: var(--bianco); font-weight: 600; }

/* Fondi: blu Ensafe (sfere fuse + grana), nero Estia */
.fondo-ensafe {
  background:
    radial-gradient(60% 70% at 85% 80%, rgba(16, 90, 185, .95), transparent 70%),
    radial-gradient(55% 65% at 15% 15%, rgba(33, 174, 168, .75), transparent 70%),
    radial-gradient(70% 80% at 40% 110%, rgba(6, 54, 118, .95), transparent 70%),
    linear-gradient(160deg, #0B3C5A 0%, #0A1F33 100%);
}
.fondo-notte { background: var(--notte-2); }
.fondo-nero { background: #000; }
.bordo-alto { border-top: 1px solid var(--linea); }

/* ---------- Griglie e schede ---------- */
.griglia { display: grid; gap: 16px; }
.griglia--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .griglia--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .griglia--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .griglia--2, .griglia--4 { grid-template-columns: minmax(0, 1fr); } }

.scheda {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r);
  padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px;
}
.scheda h3 { font-size: 21px; letter-spacing: -.01em; }
.scheda p { color: var(--testo-2); font-size: 16px; }
.scheda__num { font-size: 13px; color: var(--testo-3); font-variant-numeric: tabular-nums; }
.scheda__icona { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--superficie-2); margin-bottom: 6px; }
.scheda__icona svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scheda--caldo .scheda__icona { color: var(--caldo); background: rgba(249, 180, 121, .12); }
.scheda--mare .scheda__icona { color: var(--ciano); background: rgba(168, 208, 213, .12); }

/* Le tre linee: schede grandi cliccabili con immagine (come le card di openai.com) */
.linea {
  position: relative; display: flex; flex-direction: column; text-decoration: none; border-radius: var(--r);
  overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); min-height: 100%;
  transition: border-color .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.linea:hover { border-color: var(--linea-forte); }
.linea__img { aspect-ratio: 4 / 3; overflow: hidden; background: #000; position: relative; }
.linea__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.linea__img--prodotto img { object-fit: contain; padding: 18px; }
.linea:hover .linea__img img { transform: scale(1.035); }
.linea__corpo { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.linea__tag { font-size: 13px; color: var(--testo-3); }
.linea h3 { font-size: 24px; }
.linea p { color: var(--testo-2); font-size: 16px; flex: 1; }
.linea .link-freccia { margin-top: 8px; }
.linea--estia .linea__tag { color: var(--caldo); }
.linea--firmware .linea__tag { color: var(--ciano); }
.linea--dispositivi .linea__tag { color: var(--blu); }

/* Numeri */
.numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.numero { padding: 28px 24px 8px 0; }
.numero + .numero { padding-left: 24px; border-left: 1px solid var(--linea); }
.numero__valore { font-size: clamp(44px, 6vw, 76px); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.numero__valore--caldo { color: var(--caldo); }
.numero__etichetta { color: var(--testo-2); margin-top: 12px; font-size: 16px; max-width: 22ch; }
.numero__fonte { color: var(--testo-3); font-size: 13px; margin-top: 8px; }
@media (max-width: 720px) {
  .numeri { grid-template-columns: minmax(0, 1fr); }
  .numero, .numero + .numero { padding: 22px 0; border-left: 0; }
  .numero + .numero { border-top: 1px solid var(--linea); }
}

/* Testo + immagine affiancati */
.affianco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.affianco--inverso > :first-child { order: 2; }
.affianco__media { border-radius: var(--r); overflow: hidden; background: #000; }
.affianco__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .affianco { grid-template-columns: minmax(0, 1fr); }
  .affianco--inverso > :first-child { order: 0; }
}

.elenco-spunte { display: grid; gap: 12px; margin-top: 24px; }
.elenco-spunte li { display: flex; gap: 12px; color: var(--testo-2); }
.elenco-spunte li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; background: rgba(249, 180, 121, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23F9B479' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.elenco-spunte--mare li::before { background-color: rgba(168, 208, 213, .14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23A8D0D5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.elenco-spunte li strong { color: var(--bianco); font-weight: 600; }

/* Passi numerati */
.passi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linea); counter-reset: passo; }
.passo { padding: 24px 24px 0 0; counter-increment: passo; }
.passo + .passo { padding-left: 24px; border-left: 1px solid var(--linea); }
.passo::before { content: counter(passo, decimal-leading-zero); display: block; font-size: 13px; color: var(--testo-3); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.passo h3 { font-size: 20px; letter-spacing: -.01em; }
.passo p { color: var(--testo-2); font-size: 15.5px; margin-top: 8px; }
@media (max-width: 960px) {
  .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passo:nth-child(3) { padding-left: 0; border-left: 0; }
  .passo:nth-child(n+3) { padding-top: 28px; }
}
@media (max-width: 560px) {
  .passi { grid-template-columns: minmax(0, 1fr); }
  .passo, .passo + .passo { padding: 22px 0; border-left: 0; }
  .passo + .passo { border-top: 1px solid var(--linea); }
}

/* Selettore modalità (Ordinaria / Emergenza) */
.modalita { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--superficie-2); gap: 2px; }
.modalita button { height: 36px; padding: 0 18px; border-radius: 999px; border: 0; background: transparent; color: var(--testo-2); font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .2s, color .2s; }
.modalita button[aria-selected="true"] { background: var(--bianco); color: var(--nero); }
.modalita button[data-modo="emergenza"][aria-selected="true"] { background: var(--rosso); color: #fff; }
.pannello-modo { display: none; }
.pannello-modo.is-attivo { display: grid; animation: compari .4s ease; }
@keyframes compari { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.schermo-modo { border-radius: var(--r); overflow: hidden; background: #000; border: 1px solid var(--linea); transition: box-shadow .4s ease; }
.is-emergenza .schermo-modo { box-shadow: 0 0 0 1px rgba(255, 82, 82, .5), 0 30px 120px -20px rgba(255, 82, 82, .35); }

/* Catena del valore (Firmware) */
.catena { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.anello { position: relative; border-radius: var(--r); padding: 22px; background: rgba(4, 16, 30, .4); border: 1px solid rgba(168, 208, 213, .22); }
.anello--centro { background: var(--bianco); color: var(--nero); border-color: transparent; }
.anello--centro p { color: rgba(0, 0, 0, .64) !important; }
.anello small { display: block; font-size: 13px; color: var(--testo-3); margin-bottom: 10px; }
.anello--centro small { color: rgba(0, 0, 0, .5); }
.anello h3 { font-size: 19px; }
.anello p { color: var(--testo-2); font-size: 15px; margin-top: 6px; }
.anello:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: #0A2B45; border: 1px solid rgba(168, 208, 213, .3); color: var(--ciano); }
@media (max-width: 900px) {
  .catena { grid-template-columns: minmax(0, 1fr); }
  .anello:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -17px; transform: translateX(-50%); }
}

/* Dispositivi */
.prodotto { display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); }
.prodotto__img { background: #000; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; }
.prodotto__img img { width: 100%; height: 100%; object-fit: contain; padding: 28px; }
.prodotto__img--grafica { background: radial-gradient(60% 60% at 50% 45%, #10283c, #000 75%); }
.prodotto__img--grafica svg { width: 46%; height: auto; }
.prodotto__corpo { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.prodotto__tipo { font-size: 13px; color: var(--testo-3); }
.prodotto h3 { font-size: 24px; }
.prodotto p { color: var(--testo-2); font-size: 15.5px; }
.prodotto__spec { display: grid; gap: 0; border-top: 1px solid var(--linea); margin-top: 4px; }
.prodotto__spec li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 14.5px; }
.prodotto__spec li span:first-child { color: var(--testo-3); }
.prodotto__spec li span:last-child { text-align: right; }
.prodotto__piede { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; }
.quantita { display: inline-flex; align-items: center; border-radius: 999px; background: var(--superficie-2); height: 40px; }
.quantita button { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 999px; font-size: 18px; cursor: pointer; }
.quantita button:hover { background: rgba(255, 255, 255, .08); }
.quantita input { width: 56px; text-align: center; border: 0; background: transparent; font-variant-numeric: tabular-nums; font-weight: 600; -moz-appearance: textfield; }
.quantita input::-webkit-outer-spin-button, .quantita input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.riepilogo-preventivo { position: sticky; bottom: 16px; z-index: 20; margin-top: 24px; display: none; }
.riepilogo-preventivo.is-visibile { display: block; }
.riepilogo-preventivo__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 10px 10px 22px; border-radius: 999px; background: rgba(20, 22, 26, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--linea-forte); max-width: 640px; margin: 0 auto; font-size: 15px; }

/* Storia: capitoli in timeline */
.storia { position: relative; display: grid; gap: 0; }
.capitolo { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); padding: clamp(36px, 5vw, 56px) 0; border-top: 1px solid var(--linea); }
.capitolo__quando { font-size: 15px; color: var(--testo-3); position: relative; padding-left: 22px; }
.capitolo__quando::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--bianco); }
.capitolo--oggi .capitolo__quando::before { background: var(--caldo); box-shadow: 0 0 0 5px rgba(249, 180, 121, .2); }
.capitolo--futuro .capitolo__quando::before { background: transparent; border: 1.5px solid var(--caldo); }
.capitolo h3 { font-size: clamp(24px, 2.8vw, 34px); }
.capitolo p { color: var(--testo-2); font-size: 17.5px; margin-top: 14px; max-width: 42em; }
.capitolo figure { margin: 26px 0 0; border-radius: var(--r); overflow: hidden; background: #000; }
@media (max-width: 720px) { .capitolo { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

.citazione { font-size: clamp(26px, 3.6vw, 44px); font-weight: 600; letter-spacing: -.02em; line-height: 1.18; max-width: 24ch; text-wrap: balance; }
.citazione em { font-style: normal; color: var(--caldo); }

/* Team */
.persona { display: flex; flex-direction: column; gap: 4px; }
.persona img { border-radius: var(--r); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; background: var(--notte); margin-bottom: 14px; }
.persona h3 { font-size: 19px; letter-spacing: -.01em; }
.persona span { color: var(--testo-2); font-size: 15px; }

/* Domande frequenti */
.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 24px; line-height: 1; color: var(--testo-2); transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--testo-2); padding: 0 0 24px; max-width: 46em; }

/* Banda di chiusura (CTA) */
.cta-banda { text-align: center; }
.cta-banda h2 { font-size: clamp(34px, 5vw, 64px); max-width: 16ch; margin: 0 auto; }
.cta-banda p { color: var(--testo-2); font-size: 18px; max-width: 34em; margin: 18px auto 0; }
.cta-banda .azioni { justify-content: center; margin-top: 30px; }

/* Nota di trasparenza */
.nota { font-size: 14px; color: var(--testo-3); border-left: 2px solid var(--linea-forte); padding: 2px 0 2px 14px; margin-top: 28px; max-width: 52em; }

/* ---------- Moduli ---------- */
.modulo-blocco { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) { .modulo-blocco { grid-template-columns: minmax(0, 1fr); } }
.modulo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo--pieno { grid-column: 1 / -1; }
@media (max-width: 560px) { .modulo { grid-template-columns: minmax(0, 1fr); } }
.campo label, .campo legend { font-size: 14px; color: var(--testo-2); }
.campo .facoltativo { color: var(--testo-3); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: var(--r-s);
  background: rgba(0, 0, 0, .35); border: 1px solid var(--linea-forte); color: var(--bianco);
  font-size: 16px; transition: border-color .2s ease, background-color .2s ease;
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='white' stroke-opacity='.7' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 36px; }
.campo select option { background: #111; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: rgba(255, 255, 255, .4); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--bianco); background: rgba(0, 0, 0, .5); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--testo-3); }
.scelte { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.scelte legend { float: left; width: 100%; }
.scelte legend { margin-bottom: 8px; }
.scelta { position: relative; }
.scelta input { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
.scelta span { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linea-forte); font-size: 14.5px; cursor: pointer; transition: all .2s ease; }
.scelta span:hover { border-color: rgba(255, 255, 255, .5); }
.scelta input:checked + span { background: var(--bianco); color: var(--nero); border-color: var(--bianco); }
.scelta input:focus-visible + span { outline: 2px solid var(--caldo); outline-offset: 2px; }
.consenso { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--testo-2); }
.consenso input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--caldo); }
.modulo__invio { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; margin-top: 4px; }
.modulo__invio small { color: var(--testo-3); font-size: 13px; max-width: 34em; }
.modulo__esito { grid-column: 1 / -1; display: none; padding: 14px 16px; border-radius: var(--r-s); font-size: 15px; }
.modulo__esito.is-ok { display: block; background: rgba(33, 174, 168, .14); border: 1px solid rgba(33, 174, 168, .5); }
.modulo__esito.is-errore { display: block; background: rgba(255, 82, 82, .1); border: 1px solid rgba(255, 82, 82, .45); }
.campo.is-invalido input, .campo.is-invalido select, .campo.is-invalido textarea { border-color: var(--rosso); }
.campo .errore { font-size: 13px; color: #ff9b9b; display: none; }
.campo.is-invalido .errore { display: block; }

.contatti-diretti { display: grid; gap: 18px; margin-top: 28px; }
.contatti-diretti a { text-decoration: none; }
.contatti-diretti div { display: flex; flex-direction: column; gap: 2px; }
.contatti-diretti small { color: var(--testo-3); font-size: 13px; }

/* ---------- Footer (come openai.com) ---------- */
.footer { padding: clamp(56px, 8vw, 96px) 0 32px; border-top: 1px solid var(--linea); background: #000; position: relative; }
.footer__colonne { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; }
.footer__colonna h4 { font-size: 14px; font-weight: 400; color: var(--testo-3); letter-spacing: 0; margin-bottom: 14px; }
.footer__colonna ul { display: grid; gap: 10px; }
.footer__colonna a { font-size: 14px; text-decoration: none; color: var(--testo-2); transition: color .2s ease; }
.footer__colonna a:hover { color: var(--bianco); }
.footer__fondo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(48px, 7vw, 88px); font-size: 13px; color: var(--testo-3); }
.footer__fondo-sx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.footer__fondo a { text-decoration: none; color: var(--testo-3); }
.footer__fondo a:hover { color: var(--bianco); }
.footer__social { display: flex; gap: 4px; }
.footer__social a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; }
.footer__social a:hover { background: rgba(255, 255, 255, .08); }
.footer__social svg { width: 16px; height: 16px; fill: currentColor; }
.footer__lingua { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linea); color: var(--testo-2); }
.footer__marchio { margin-top: clamp(48px, 7vw, 80px); opacity: .9; }
.footer__marchio img { width: 100%; height: auto; }
.footer__nota { margin-top: 20px; font-size: 12.5px; color: var(--testo-3); max-width: 70em; }
@media (max-width: 960px) { .footer__colonne { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .footer__colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Comparsa allo scorrimento ---------- */
.rivela { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.rivela.is-visibile { opacity: 1; transform: none; }
.no-js .rivela { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rivela { opacity: 1; transform: none; transition: none; } }

.solo-desktop { display: initial; }
@media (max-width: 720px) { .solo-desktop { display: none; } }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.media-scheda picture { display: block; width: 100%; height: 100%; }
.media-scheda picture img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .media-scheda picture img { object-position: 50% 30% !important; } }

/* ===================== v2: header sopra le hero, dot a codice ===================== */
.header { position: fixed; left: 0; right: 0; top: 0; }
main { padding-top: var(--header); }
.hero-piena main { padding-top: 0; }
.hero-piena .header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; }

/* Scena a dot (assets/punti.js): il canvas riempie il riquadro */
.punti { position: relative; overflow: hidden; background: #000; touch-action: pan-y; }
.punti > canvas { position: absolute; inset: 0; display: block; }
.punti--trasparente { background: transparent; }
.punti--errore { background: #000 center / cover no-repeat; }
.punti--16-9 { aspect-ratio: 16 / 9; }
.punti--4-3 { aspect-ratio: 4 / 3; }
.punti--1-1 { aspect-ratio: 1 / 1; }
.punti--4-5 { aspect-ratio: 4 / 5; }
.punti--tondo { border-radius: var(--r); }

/* Banda a tutta larghezza: la scena a dot dietro, il testo sopra */
.banda { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; overflow: hidden; background: #000; }
.banda > .punti { position: absolute; inset: 0 0 0 32%; }
.banda::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.92) 34%, rgba(0,0,0,.5) 52%, transparent 72%), linear-gradient(0deg, rgba(0,0,0,.75), transparent 40%); }
.banda > .contenitore { position: relative; z-index: 1; padding-top: 120px; padding-bottom: clamp(48px, 8vw, 96px); pointer-events: none; }
.banda > .contenitore a, .banda > .contenitore .numeri { pointer-events: auto; }
.banda__testo { max-width: 620px; }
@media (max-width: 720px) {
  .banda { min-height: 0; flex-direction: column; align-items: stretch; }
  .banda > .punti { position: relative; inset: auto; aspect-ratio: 4 / 3.4; }
  .banda::after { background: linear-gradient(0deg, #000 0%, transparent 18%); height: calc(100vw * 3.4 / 4); }
  .banda > .contenitore { padding-top: 8px; }
}

/* Hero blu Ensafe (pagine firmware, storia, investire): sfere fuse + grana del BP, dot ciano a codice */
.hero-blu { position: relative; min-height: min(100svh, 920px); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero-blu::before { content: ""; position: absolute; inset: -10%; z-index: -2; filter: blur(40px);
  background:
    radial-gradient(38% 46% at 82% 70%, #105AB9, transparent 70%),
    radial-gradient(34% 40% at 18% 22%, #21AEA8, transparent 70%),
    radial-gradient(40% 50% at 55% 110%, #063676, transparent 70%),
    radial-gradient(30% 36% at 60% 20%, #12486C, transparent 70%),
    #0A1F33;
  animation: sfere 22s ease-in-out infinite alternate; }
@keyframes sfere { to { transform: translate3d(-3%, 2%, 0) scale(1.06) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .hero-blu::before { animation: none; } }
.hero-blu::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0.02  0 0 0 0 0.05  0 0 0 1.15 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px;
  animation: grana-trema .9s steps(1) infinite; }
@keyframes grana-trema { 0% { background-position: 0 0; } 20% { background-position: -53px 31px; } 40% { background-position: 37px -71px; } 60% { background-position: -89px -23px; } 80% { background-position: 61px 83px; } }
.hero-blu > .punti { position: absolute; inset: calc(var(--header) + 8px) 0 0 46%; background: transparent; }
.hero-blu__testo { position: relative; z-index: 1; width: 100%; max-width: var(--largo); margin: 0 auto; padding: calc(var(--header) + 48px) var(--gutter) 64px; pointer-events: none; }
.hero-blu__testo > * { max-width: 600px; }
.hero-blu__testo a { pointer-events: auto; }
.hero-blu h1 { font-size: clamp(40px, 6vw, 76px); }
.hero-blu .hero__sotto { margin-left: 0; color: rgba(255,255,255,.82); }
.hero-blu .hero__occhiello { color: var(--ciano); }
.hero-blu .azioni { justify-content: flex-start; margin-top: 30px; }
@media (max-width: 860px) {
  .hero-blu { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-blu > .punti { position: relative; inset: auto; aspect-ratio: 1 / 1; margin-top: var(--header); order: -1; }
  .hero-blu__testo { padding-top: 0; }
}

/* Sezione blu del BP (sfere statiche) */
.fondo-ensafe { position: relative; isolation: isolate; }

/* Schede delle tre linee con la scena a dot in alto */
.linea .punti { aspect-ratio: 4 / 3; }

/* Modalità: la scena cambia con un morph quando si passa all'emergenza */
.schermo-modo .punti { aspect-ratio: 16 / 10; }

/* Link con sottolineatura animata della hero di dea.html */
.dea__link { color: #fff; }

/* ===================== v3: hero iniziali centrate (impianto openai.com) ===================== */
/* Home: la hero di dea.html con il testo centrato e la sfera di rete nella zona sotto */
.dea.dea--centrata { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
.dea--centrata .dea__testo { text-align: center; padding: calc(var(--header) + clamp(56px, 9vw, 112px)) var(--gutter) 0; }
.dea--centrata .dea__testo > * { max-width: none; margin-left: auto; margin-right: auto; }
.dea--centrata h1 { font-size: clamp(40px, 7vw, 84px); max-width: 14ch; letter-spacing: -.035em; line-height: 1.02; }
.dea--centrata .dea__sotto { max-width: 36em; }
.dea--centrata .dea__azioni { justify-content: center; gap: 10px; }
.dea--centrata .dea__zona { display: block; position: relative; width: 100%; height: clamp(380px, 64vh, 720px); margin: clamp(8px, 2vw, 24px) 0 clamp(24px, 4vw, 48px); }
.dea--centrata .dea__velo { background: radial-gradient(70% 45% at 50% 18%, rgba(10, 31, 51, .55), transparent 70%); }
@media (orientation: portrait), (max-width: 639px) {
  .dea.dea--centrata { grid-template-rows: none; }
  .dea--centrata .dea__testo { grid-row: auto; padding-bottom: 0; }
  .dea--centrata .dea__zona { grid-row: auto; margin-top: 8px; height: min(100vw, 460px); }
  .dea--centrata h1 { font-size: clamp(36px, 10vw, 56px); }
}

/* Estia: la dea a dot occupa lo schermo, poi il testo compare centrato */
.est-hero .est-hero__testo { align-items: center; text-align: center; justify-content: center; }
.est-hero .est-hero__testo > * { max-width: min(100%, 52rem); }
.est-hero .est-hero__logo { margin: 0 auto; }
.est-hero .est-hero__titolo { font-size: clamp(40px, 6.4vw, 80px); letter-spacing: -.035em; line-height: 1.02; }
.est-hero .est-hero__sotto { max-width: 38em; }
.est-hero .est-hero__azioni { justify-content: center; }
@media (orientation: portrait), (max-width: 759px) { .est-hero .est-hero__testo { justify-content: center; } }

/* Pagine con la hero blu: testo centrato in alto, scena a dot grande sotto */
.hero-blu--centro { flex-direction: column; align-items: stretch; min-height: 0; }
.hero-blu--centro .hero-blu__testo { text-align: center; padding: calc(var(--header) + clamp(56px, 9vw, 112px)) var(--gutter) 0; }
.hero-blu--centro .hero-blu__testo > * { max-width: none; margin-left: auto; margin-right: auto; }
.hero-blu--centro h1 { max-width: 15ch; font-size: clamp(40px, 7vw, 84px); }
.hero-blu--centro .hero__sotto { max-width: 40em; margin-left: auto; }
.hero-blu--centro .azioni { justify-content: center; }
.hero-blu--centro > .punti { position: relative; inset: auto; order: 0; width: min(100% - 2 * var(--gutter), 1440px); margin: clamp(24px, 4vw, 48px) auto clamp(40px, 6vw, 72px); aspect-ratio: 16 / 8; }
@media (max-width: 860px) {
  .hero-blu--centro > .punti { margin-top: 24px; aspect-ratio: 1 / 1; }
  .hero-blu--centro .hero-blu__testo { padding-top: calc(var(--header) + 40px); }
}

/* ===================== v4: dot come sfondo, hero alta al massimo uno schermo ===================== */
.hero-blu--centro { min-height: min(100svh, 940px); justify-content: center; }
.hero-blu--centro > .punti {
  position: absolute; inset: var(--header) 0 0 0; width: auto; margin: 0; aspect-ratio: auto; z-index: 0;
  opacity: .7;
  -webkit-mask-image: radial-gradient(62% 58% at 50% 50%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.5) 45%, #000 85%);
          mask-image: radial-gradient(62% 58% at 50% 50%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.5) 45%, #000 85%);
}
.hero-blu--centro .hero-blu__testo { position: relative; z-index: 1; padding: calc(var(--header) + 48px) var(--gutter) 72px; text-shadow: 0 2px 24px rgba(6, 30, 52, .55); }
@media (max-width: 860px) {
  .hero-blu--centro { min-height: min(100svh, 760px); }
  .hero-blu--centro > .punti { margin: 0; aspect-ratio: auto; opacity: .55; }
  .hero-blu--centro .hero-blu__testo { padding-top: calc(var(--header) + 40px); }
}

/* Home: tutto in una schermata, la sfera prende lo spazio che resta sotto il testo */
.dea.dea--centrata { height: min(100svh, 1000px); min-height: 640px; }
.dea--centrata .dea__testo { flex: none; padding-top: calc(var(--header) + clamp(24px, 5vh, 64px)); }
.dea--centrata h1 { font-size: clamp(38px, min(6vw, 8.4vh), 80px); }
.dea--centrata .dea__sotto { margin-top: clamp(12px, 2.4vh, 24px); }
.dea--centrata .dea__azioni { margin-top: clamp(16px, 3.2vh, 32px); }
.dea--centrata .dea__zona { flex: 1 1 auto; height: auto; min-height: 220px; margin: 8px 0 clamp(12px, 3vh, 32px); }
@media (orientation: portrait), (max-width: 639px) {
  .dea.dea--centrata { height: auto; min-height: 0; }
  .dea--centrata .dea__zona { flex: none; height: min(92vw, 400px); }
}

/* ===================== v5: la prima hero sfuma nella sezione dopo ===================== */
.sfuma {
  position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(160px, 30vh, 320px);
  pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.86) 84%, #000 100%);
}
.dea .dea__testo, .hero-blu__testo, .est-hero__testo { z-index: 1; }
.est-hero .sfuma { z-index: 1; height: clamp(80px, 14vh, 160px); }
/* la sezione dopo comincia senza bordo: continua la sfumatura */
.dea + .sezione, .hero-blu--centro + .sezione, .est-hero + script ~ .banda:first-of-type { border-top: 0; }
.storia .capitolo:first-child { border-top: 0; padding-top: 0; }

/* v5.1: sfumatura più dolce, lunga e con curva morbida (easing a molti passi, niente gradino) */
.sfuma {
  height: clamp(280px, 55vh, 560px);
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.013) 8%, rgba(0,0,0,.049) 16%, rgba(0,0,0,.104) 24%,
    rgba(0,0,0,.175) 32%, rgba(0,0,0,.259) 40%, rgba(0,0,0,.352) 48%, rgba(0,0,0,.45) 56%,
    rgba(0,0,0,.55) 64%, rgba(0,0,0,.648) 72%, rgba(0,0,0,.741) 79%, rgba(0,0,0,.825) 86%,
    rgba(0,0,0,.896) 92%, rgba(0,0,0,.951) 96%, #000 100%);
}
.est-hero .sfuma { height: clamp(140px, 24vh, 260px); }

/* v5.2: sfumatura ancora più dolce. La hero non arriva al nero: scende verso un blu notte profondissimo,
   e la sezione dopo comincia da quello stesso colore e finisce nel nero. Il passaggio si spalma su due sezioni. */
:root { --notte-fondo: #04101C; }
.dea--centrata .sfuma, .hero-blu--centro .sfuma {
  height: clamp(360px, 72vh, 760px);
  background: linear-gradient(180deg,
    rgba(4,16,28,0) 0%, rgba(4,16,28,.02) 10%, rgba(4,16,28,.07) 20%, rgba(4,16,28,.15) 30%,
    rgba(4,16,28,.26) 40%, rgba(4,16,28,.39) 50%, rgba(4,16,28,.53) 60%, rgba(4,16,28,.67) 70%,
    rgba(4,16,28,.8) 80%, rgba(4,16,28,.91) 90%, rgba(4,16,28,.97) 96%, var(--notte-fondo) 100%);
}
.dea--centrata + .sezione, .hero-blu--centro + .sezione {
  background: linear-gradient(180deg, var(--notte-fondo) 0%, rgba(4,16,28,.82) 22%, rgba(4,16,28,.55) 45%, rgba(4,16,28,.28) 68%, rgba(4,16,28,.08) 88%, rgba(0,0,0,0) 100%) top / 100% clamp(360px, 60vh, 640px) no-repeat, #000;
}

/* v5.3: lieve disturbo anche sul nero. La grana di prima era in overlay e sul nero non si vedeva:
   ora è la stessa della hero di estia.html (rumore bianco a bassa opacità che trema a scatti), su tutta la pagina. */
body::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.6 0 0 0 -.68'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 220px;
  mix-blend-mode: normal; opacity: .075;
  animation: grana-trema .9s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* v6: home senza sfera; il pittogramma Ensafe 3D a dot sta dietro al testo, la hero è alta uno schermo */
.dea.dea--centrata { height: min(100svh, 940px); min-height: 600px; justify-content: center; }
.dea--centrata .dea__testo { padding: calc(var(--header) + 24px) var(--gutter) 64px; }
.dea .logo-punti {
  position: absolute; left: 0; right: 0; top: var(--header); bottom: 0; width: 100%; height: calc(100% - var(--header));
  z-index: 0; pointer-events: none; opacity: .78;
  -webkit-mask-image: radial-gradient(56% 50% at 50% 48%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.72) 50%, #000 90%);
          mask-image: radial-gradient(56% 50% at 50% 48%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.72) 50%, #000 90%);
}
.dea--centrata .dea__testo { text-shadow: 0 2px 28px rgba(6, 30, 52, .6); }
@media (orientation: portrait), (max-width: 639px) {
  .dea.dea--centrata { height: min(100svh, 760px); min-height: 560px; }
  .dea .logo-punti { opacity: .7; }
}

/* v7: le sezioni che cambiano colore (blu Ensafe, blu notte) entrano dal nero e tornano nel nero con la stessa curva morbida della hero */
.fondo-ensafe, .fondo-notte, .hero-blu--affianco { position: relative; isolation: isolate; }
.fondo-ensafe > .contenitore, .fondo-notte > .contenitore, .hero-blu--affianco > .hero-blu__testo { position: relative; z-index: 1; }
.sfuma--alto, .sfuma--basso { position: absolute; left: 0; right: 0; height: clamp(180px, 34vh, 380px); pointer-events: none; z-index: 0; }
.sfuma--alto { top: -1px; bottom: auto;
  background: linear-gradient(0deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.02) 10%, rgba(0,0,0,.07) 20%, rgba(0,0,0,.15) 30%,
    rgba(0,0,0,.26) 40%, rgba(0,0,0,.39) 50%, rgba(0,0,0,.53) 60%, rgba(0,0,0,.67) 70%,
    rgba(0,0,0,.8) 80%, rgba(0,0,0,.91) 90%, rgba(0,0,0,.97) 96%, #000 100%); }
.sfuma--basso { bottom: -1px; top: auto;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.02) 10%, rgba(0,0,0,.07) 20%, rgba(0,0,0,.15) 30%,
    rgba(0,0,0,.26) 40%, rgba(0,0,0,.39) 50%, rgba(0,0,0,.53) 60%, rgba(0,0,0,.67) 70%,
    rgba(0,0,0,.8) 80%, rgba(0,0,0,.91) 90%, rgba(0,0,0,.97) 96%, #000 100%); }
/* niente linee di confine dove ora c'è la sfumatura */
.fondo-ensafe.bordo-alto, .fondo-notte.bordo-alto { border-top: 0; }
.fondo-notte + .footer, .fondo-ensafe + .footer { border-top: 0; }

/* v8: sfumature più dolci: curva smootherstep a 24 passi e più lunghe */
.sfuma--alto { height: clamp(260px, 52vh, 600px); background: linear-gradient(0deg, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.001) 4.2%, rgba(0,0,0,0.005) 8.3%, rgba(0,0,0,0.016) 12.5%, rgba(0,0,0,0.035) 16.7%, rgba(0,0,0,0.065) 20.8%, rgba(0,0,0,0.104) 25.0%, rgba(0,0,0,0.152) 29.2%, rgba(0,0,0,0.210) 33.3%, rgba(0,0,0,0.275) 37.5%, rgba(0,0,0,0.347) 41.7%, rgba(0,0,0,0.422) 45.8%, rgba(0,0,0,0.500) 50.0%, rgba(0,0,0,0.578) 54.2%, rgba(0,0,0,0.653) 58.3%, rgba(0,0,0,0.725) 62.5%, rgba(0,0,0,0.790) 66.7%, rgba(0,0,0,0.848) 70.8%, rgba(0,0,0,0.896) 75.0%, rgba(0,0,0,0.935) 79.2%, rgba(0,0,0,0.965) 83.3%, rgba(0,0,0,0.984) 87.5%, rgba(0,0,0,0.995) 91.7%, rgba(0,0,0,0.999) 95.8%, rgba(0,0,0,1.000) 100.0%); }
.sfuma--basso { height: clamp(260px, 52vh, 600px); background: linear-gradient(180deg, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.001) 4.2%, rgba(0,0,0,0.005) 8.3%, rgba(0,0,0,0.016) 12.5%, rgba(0,0,0,0.035) 16.7%, rgba(0,0,0,0.065) 20.8%, rgba(0,0,0,0.104) 25.0%, rgba(0,0,0,0.152) 29.2%, rgba(0,0,0,0.210) 33.3%, rgba(0,0,0,0.275) 37.5%, rgba(0,0,0,0.347) 41.7%, rgba(0,0,0,0.422) 45.8%, rgba(0,0,0,0.500) 50.0%, rgba(0,0,0,0.578) 54.2%, rgba(0,0,0,0.653) 58.3%, rgba(0,0,0,0.725) 62.5%, rgba(0,0,0,0.790) 66.7%, rgba(0,0,0,0.848) 70.8%, rgba(0,0,0,0.896) 75.0%, rgba(0,0,0,0.935) 79.2%, rgba(0,0,0,0.965) 83.3%, rgba(0,0,0,0.984) 87.5%, rgba(0,0,0,0.995) 91.7%, rgba(0,0,0,0.999) 95.8%, rgba(0,0,0,1.000) 100.0%); }
.dea--centrata .sfuma, .hero-blu--centro .sfuma { height: clamp(420px, 80vh, 860px); background: linear-gradient(180deg, rgba(4,16,28,0.000) 0.0%, rgba(4,16,28,0.001) 4.2%, rgba(4,16,28,0.005) 8.3%, rgba(4,16,28,0.016) 12.5%, rgba(4,16,28,0.035) 16.7%, rgba(4,16,28,0.065) 20.8%, rgba(4,16,28,0.104) 25.0%, rgba(4,16,28,0.152) 29.2%, rgba(4,16,28,0.210) 33.3%, rgba(4,16,28,0.275) 37.5%, rgba(4,16,28,0.347) 41.7%, rgba(4,16,28,0.422) 45.8%, rgba(4,16,28,0.500) 50.0%, rgba(4,16,28,0.578) 54.2%, rgba(4,16,28,0.653) 58.3%, rgba(4,16,28,0.725) 62.5%, rgba(4,16,28,0.790) 66.7%, rgba(4,16,28,0.848) 70.8%, rgba(4,16,28,0.896) 75.0%, rgba(4,16,28,0.935) 79.2%, rgba(4,16,28,0.965) 83.3%, rgba(4,16,28,0.984) 87.5%, rgba(4,16,28,0.995) 91.7%, rgba(4,16,28,0.999) 95.8%, rgba(4,16,28,1.000) 100.0%); }
.dea--centrata + .sezione, .hero-blu--centro + .sezione { background: linear-gradient(0deg, rgba(4,16,28,0.000) 0.0%, rgba(4,16,28,0.001) 4.2%, rgba(4,16,28,0.005) 8.3%, rgba(4,16,28,0.016) 12.5%, rgba(4,16,28,0.035) 16.7%, rgba(4,16,28,0.065) 20.8%, rgba(4,16,28,0.104) 25.0%, rgba(4,16,28,0.152) 29.2%, rgba(4,16,28,0.210) 33.3%, rgba(4,16,28,0.275) 37.5%, rgba(4,16,28,0.347) 41.7%, rgba(4,16,28,0.422) 45.8%, rgba(4,16,28,0.500) 50.0%, rgba(4,16,28,0.578) 54.2%, rgba(4,16,28,0.653) 58.3%, rgba(4,16,28,0.725) 62.5%, rgba(4,16,28,0.790) 66.7%, rgba(4,16,28,0.848) 70.8%, rgba(4,16,28,0.896) 75.0%, rgba(4,16,28,0.935) 79.2%, rgba(4,16,28,0.965) 83.3%, rgba(4,16,28,0.984) 87.5%, rgba(4,16,28,0.995) 91.7%, rgba(4,16,28,0.999) 95.8%, rgba(4,16,28,1.000) 100.0%) top / 100% clamp(420px, 70vh, 760px) no-repeat, #000; }
.est-hero .sfuma { height: clamp(180px, 30vh, 320px); background: linear-gradient(180deg, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.001) 4.2%, rgba(0,0,0,0.005) 8.3%, rgba(0,0,0,0.016) 12.5%, rgba(0,0,0,0.035) 16.7%, rgba(0,0,0,0.065) 20.8%, rgba(0,0,0,0.104) 25.0%, rgba(0,0,0,0.152) 29.2%, rgba(0,0,0,0.210) 33.3%, rgba(0,0,0,0.275) 37.5%, rgba(0,0,0,0.347) 41.7%, rgba(0,0,0,0.422) 45.8%, rgba(0,0,0,0.500) 50.0%, rgba(0,0,0,0.578) 54.2%, rgba(0,0,0,0.653) 58.3%, rgba(0,0,0,0.725) 62.5%, rgba(0,0,0,0.790) 66.7%, rgba(0,0,0,0.848) 70.8%, rgba(0,0,0,0.896) 75.0%, rgba(0,0,0,0.935) 79.2%, rgba(0,0,0,0.965) 83.3%, rgba(0,0,0,0.984) 87.5%, rgba(0,0,0,0.995) 91.7%, rgba(0,0,0,0.999) 95.8%, rgba(0,0,0,1.000) 100.0%); }

/* v9: niente sfumature lunghe. Stacco netto fra le sezioni con un'ombra interna: le fasce colorate
   sembrano incassate rispetto al nero (luce dall'alto: ombra più forte sul bordo alto, più lieve in basso,
   e un filo di luce sullo spigolo inferiore). I livelli .sfuma restano e diventano l'ombra. */
.sfuma, .sfuma--alto, .sfuma--basso {
  top: 0; bottom: 0; height: auto !important; background: none !important; pointer-events: none;
}
/* hero: lo spigolo in basso */
.dea--centrata .sfuma, .hero-blu--centro .sfuma, .est-hero .sfuma {
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .09),
    inset 0 -18px 28px -14px rgba(0, 0, 0, .55),
    inset 0 -70px 90px -50px rgba(0, 0, 0, .55);
}
/* sezioni colorate: incassate */
.sfuma--alto {
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, .9),
    inset 0 22px 30px -16px rgba(0, 0, 0, .7),
    inset 0 80px 100px -60px rgba(0, 0, 0, .6);
}
.sfuma--basso {
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    inset 0 -16px 26px -14px rgba(0, 0, 0, .5),
    inset 0 -60px 80px -50px rgba(0, 0, 0, .4);
}
/* la sezione dopo la hero torna nera piena */
.dea--centrata + .sezione, .hero-blu--centro + .sezione { background: #000; }
.sfuma--alto, .sfuma--basso { z-index: 1; }
.fondo-ensafe > .contenitore, .fondo-notte > .contenitore, .hero-blu--affianco > .hero-blu__testo { z-index: 2; }
.sfuma--alto {
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, .95),
    inset 0 26px 34px -16px rgba(0, 0, 0, .8),
    inset 0 110px 120px -70px rgba(0, 0, 0, .7);
}

/* v10: la PRIMA hero torna sfumata (curva dolce, lunga); l'ombra interna resta solo sulle sezioni colorate sotto */
.dea--centrata .sfuma, .hero-blu--centro .sfuma { top: auto; bottom: -1px; height: clamp(420px, 80vh, 860px) !important; box-shadow: none; background: linear-gradient(180deg, rgba(4,16,28,0.000) 0.0%, rgba(4,16,28,0.001) 4.2%, rgba(4,16,28,0.005) 8.3%, rgba(4,16,28,0.016) 12.5%, rgba(4,16,28,0.035) 16.7%, rgba(4,16,28,0.065) 20.8%, rgba(4,16,28,0.104) 25.0%, rgba(4,16,28,0.152) 29.2%, rgba(4,16,28,0.210) 33.3%, rgba(4,16,28,0.275) 37.5%, rgba(4,16,28,0.347) 41.7%, rgba(4,16,28,0.422) 45.8%, rgba(4,16,28,0.500) 50.0%, rgba(4,16,28,0.578) 54.2%, rgba(4,16,28,0.653) 58.3%, rgba(4,16,28,0.725) 62.5%, rgba(4,16,28,0.790) 66.7%, rgba(4,16,28,0.848) 70.8%, rgba(4,16,28,0.896) 75.0%, rgba(4,16,28,0.935) 79.2%, rgba(4,16,28,0.965) 83.3%, rgba(4,16,28,0.984) 87.5%, rgba(4,16,28,0.995) 91.7%, rgba(4,16,28,0.999) 95.8%, rgba(4,16,28,1.000) 100.0%) !important; }
.est-hero .sfuma { top: auto; bottom: -1px; height: clamp(180px, 30vh, 320px) !important; box-shadow: none; background: linear-gradient(180deg, rgba(0,0,0,0.000) 0.0%, rgba(0,0,0,0.001) 4.2%, rgba(0,0,0,0.005) 8.3%, rgba(0,0,0,0.016) 12.5%, rgba(0,0,0,0.035) 16.7%, rgba(0,0,0,0.065) 20.8%, rgba(0,0,0,0.104) 25.0%, rgba(0,0,0,0.152) 29.2%, rgba(0,0,0,0.210) 33.3%, rgba(0,0,0,0.275) 37.5%, rgba(0,0,0,0.347) 41.7%, rgba(0,0,0,0.422) 45.8%, rgba(0,0,0,0.500) 50.0%, rgba(0,0,0,0.578) 54.2%, rgba(0,0,0,0.653) 58.3%, rgba(0,0,0,0.725) 62.5%, rgba(0,0,0,0.790) 66.7%, rgba(0,0,0,0.848) 70.8%, rgba(0,0,0,0.896) 75.0%, rgba(0,0,0,0.935) 79.2%, rgba(0,0,0,0.965) 83.3%, rgba(0,0,0,0.984) 87.5%, rgba(0,0,0,0.995) 91.7%, rgba(0,0,0,0.999) 95.8%, rgba(0,0,0,1.000) 100.0%) !important; }
.dea--centrata + .sezione, .hero-blu--centro + .sezione { background: linear-gradient(0deg, rgba(4,16,28,0.000) 0.0%, rgba(4,16,28,0.001) 4.2%, rgba(4,16,28,0.005) 8.3%, rgba(4,16,28,0.016) 12.5%, rgba(4,16,28,0.035) 16.7%, rgba(4,16,28,0.065) 20.8%, rgba(4,16,28,0.104) 25.0%, rgba(4,16,28,0.152) 29.2%, rgba(4,16,28,0.210) 33.3%, rgba(4,16,28,0.275) 37.5%, rgba(4,16,28,0.347) 41.7%, rgba(4,16,28,0.422) 45.8%, rgba(4,16,28,0.500) 50.0%, rgba(4,16,28,0.578) 54.2%, rgba(4,16,28,0.653) 58.3%, rgba(4,16,28,0.725) 62.5%, rgba(4,16,28,0.790) 66.7%, rgba(4,16,28,0.848) 70.8%, rgba(4,16,28,0.896) 75.0%, rgba(4,16,28,0.935) 79.2%, rgba(4,16,28,0.965) 83.3%, rgba(4,16,28,0.984) 87.5%, rgba(4,16,28,0.995) 91.7%, rgba(4,16,28,0.999) 95.8%, rgba(4,16,28,1.000) 100.0%) top / 100% clamp(420px, 70vh, 760px) no-repeat, #000; }

/* ===================== v12: niente bianco. Le sezioni che cambiavano colore sono TONALITÀ DI NERO
   (neri freddi, appena tinti del blu notte di Estia), stacco netto, nessuna ombra. ===================== */
.fondo-tono { background: #0B0F14; box-shadow: none; }
.fondo-tono.fondo-tono--2 { background: #10151C; }
.fondo-tono::before, .fondo-tono::after { display: none !important; }
.fondo-tono .sfuma, .fondo-tono .sfuma--alto, .fondo-tono .sfuma--basso { display: none !important; }
.fondo-tono .scheda, .fondo-tono .modulo { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .07); }
.fondo-tono .campo input, .fondo-tono .campo select, .fondo-tono .campo textarea { background: rgba(0, 0, 0, .45); }
.fondo-tono .citazione em { color: var(--caldo); }
/* la scheda di accento (listino firmware) è chiara: l'unico pieno bianco della sezione */
.scheda--scura { background: #fff !important; color: #0A1F33; border-color: transparent !important; }
.scheda--scura h3, .scheda--scura .link-freccia { color: #0A1F33 !important; }
.scheda--scura p { color: rgba(10, 31, 51, .68) !important; }
.scheda--scura .scheda__num { color: rgba(10, 31, 51, .5); }
.hero-blu--affianco.fondo-tono { min-height: 0; }
.hero-blu--affianco.fondo-tono .hero-blu__testo { text-shadow: none; }

/* v13: "È nata da una domanda semplice": l'infografica (torcia a dot) occupa tutta la metà destra, a piena altezza */
.hero-blu--affianco { min-height: min(100svh, 920px) !important; }
.hero-blu--affianco > .punti--infografica { inset: 0 0 0 40%; }
@media (max-width: 860px) {
  .hero-blu--affianco { min-height: 0 !important; }
  .hero-blu--affianco > .punti--infografica { position: relative; inset: auto; aspect-ratio: 4 / 5; margin-top: 0; }
}
.hero-blu--affianco > .punti--infografica { inset: 4% 2% 4% 50%; }
@media (max-width: 860px) { .hero-blu--affianco > .punti--infografica { inset: auto; } }

/* v14: scroll morbido (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ===================== v15: La nostra storia per scene ===================== */
/* barra dei capitoli: resta sotto l'header mentre si legge, il capitolo in vista si accende */
.capitoli-nav { position: sticky; top: var(--header); z-index: 30; background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); }
.capitoli-nav__riga { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 1440px; margin: 0 auto; padding: 10px var(--gutter); }
.capitoli-nav__riga::-webkit-scrollbar { display: none; }
.capitoli-nav a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--testo-3); text-decoration: none; white-space: nowrap; transition: color .25s, background-color .25s; }
.capitoli-nav a span { font-variant-numeric: tabular-nums; font-size: 12px; opacity: .7; }
.capitoli-nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.capitoli-nav a.is-attivo { color: #000; background: #fff; }
.capitoli-nav a.is-attivo span { opacity: .55; }
.capitoli-nav__progresso { height: 2px; background: transparent; }
.capitoli-nav__progresso span { display: block; height: 100%; width: 0; background: var(--caldo); transition: width .15s linear; }

/* una scena: i dot occupano più di metà pagina e si sciolgono nel nero, il testo sta dall'altra parte */
.scena { position: relative; min-height: min(100svh, 900px); display: flex; align-items: center; overflow: hidden; background: #000; }
.scena__punti { position: absolute !important; top: 0; bottom: 0; right: 0; width: 64%; background: transparent; }
.scena--sx .scena__punti { right: auto; left: 0; }
.scena::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.92) 30%, rgba(0,0,0,.35) 48%, transparent 62%); }
.scena--sx::after { background: linear-gradient(270deg, #000 0%, rgba(0,0,0,.92) 30%, rgba(0,0,0,.35) 48%, transparent 62%); }
.scena > .contenitore { position: relative; z-index: 1; width: 100%; pointer-events: none; }
.scena__testo { position: relative; max-width: 540px; padding: clamp(80px, 12vh, 140px) 0; pointer-events: auto; }
.scena--sx .scena__testo { margin-left: auto; }
.scena__num { position: absolute; top: clamp(10px, 6vh, 60px); left: -.06em; z-index: -1; font-size: clamp(140px, 18vw, 260px); font-weight: 600; line-height: 1; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .14); user-select: none; }
.scena__quando { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--caldo); margin-bottom: 18px; }
.scena__quando::before { content: ""; width: 28px; height: 1px; background: var(--caldo); }
.scena h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; }
.scena p { color: var(--testo-2); font-size: clamp(17px, 1.4vw, 19px); margin-top: 18px; }
.scena .azioni { margin-top: 28px; }
@media (max-width: 860px) {
  .scena { min-height: 0; flex-direction: column; align-items: stretch; }
  .scena__punti { position: relative !important; width: 100%; aspect-ratio: 4 / 3.2; }
  .scena::after { background: linear-gradient(0deg, #000 0%, #000 48%, transparent 64%); }
  .scena--sx::after { background: linear-gradient(0deg, #000 0%, #000 48%, transparent 64%); }
  .scena__testo { padding: 0 0 72px; margin-top: -40px; }
  .scena__num { top: -60px; font-size: 120px; }
}

/* le frasi fra un capitolo e l'altro: una pausa nel racconto */
.frase { padding: clamp(96px, 16vh, 180px) 0; background: #000; text-align: center; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.frase__testo { font-size: clamp(32px, 5vw, 68px); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; max-width: 20ch; margin: 0 auto; text-wrap: balance; }
.frase__testo em { font-style: normal; color: var(--caldo); }

/* ===================== v16: safe area dei telefoni (notch, isola dinamica, barra home) =====================
   La pagina usa tutto lo schermo (viewport-fit=cover): header, menu, contenuti e piè di pagina
   si spostano dentro l'area sicura, e il fondo dietro le barre di sistema resta nero. */
:root {
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);
  --sa-right: env(safe-area-inset-right, 0px);
}
html { background: #000; }
.header { height: calc(var(--header) + var(--sa-top)); padding-top: var(--sa-top); }
.header__barra { height: var(--header); padding-left: max(var(--gutter), var(--sa-left)); padding-right: max(var(--gutter), var(--sa-right)); }
main { padding-top: calc(var(--header) + var(--sa-top)); }
.hero-piena main { padding-top: 0; }
.menu-mobile { inset: calc(var(--header) + var(--sa-top)) 0 0 0; padding-left: max(var(--gutter), var(--sa-left)); padding-right: max(var(--gutter), var(--sa-right)); padding-bottom: calc(24px + var(--sa-bottom)); }
.contenitore, .capitoli-nav__riga { padding-left: max(var(--gutter), var(--sa-left)); padding-right: max(var(--gutter), var(--sa-right)); }
.capitoli-nav { top: calc(var(--header) + var(--sa-top)); }
html { scroll-padding-top: calc(var(--header) + var(--sa-top) + 16px); }
/* le hero che stanno sotto l'header trasparente lasciano spazio anche alla barra di stato */
.dea--centrata .dea__testo { padding-top: calc(var(--header) + var(--sa-top) + clamp(24px, 5vh, 64px)); }
.hero-blu--centro .hero-blu__testo { padding-top: calc(var(--header) + var(--sa-top) + 48px); }
.hero-blu--centro > .punti { top: calc(var(--header) + var(--sa-top)); }
.dea .logo-punti { top: calc(var(--header) + var(--sa-top)); height: calc(100% - var(--header) - var(--sa-top)); }
.est-hero__testo { padding-top: calc(var(--header) + var(--sa-top) + 32px) !important; padding-bottom: calc(40px + var(--sa-bottom)) !important; }
@media (max-width: 860px) {
  .hero-blu--centro .hero-blu__testo { padding-top: calc(var(--header) + var(--sa-top) + 40px); }
}
/* in fondo: piè di pagina e barra del preventivo sopra la barra home */
.footer { padding-bottom: calc(32px + var(--sa-bottom)); }
.riepilogo-preventivo { bottom: calc(16px + var(--sa-bottom)); }
.est-hero .hero__suono { bottom: calc(20px + var(--sa-bottom)); right: max(20px, var(--sa-right)); }
/* area della barra di stato: sempre nera piena, i contenuti non passano mai sotto l'orologio e il notch */
.header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--sa-top); background: #000; pointer-events: none; }
.header.is-scrolled, .menu-aperto .header { background: rgba(0, 0, 0, .9); }
/* v16.1: header nero pieno quando la pagina scorre: niente trasparenze sotto cui si vedono i contenuti */
.header.is-scrolled, .menu-aperto .header { background: #000; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* v16.2: l'header si ESTENDE sotto la barra di stato. Il suo fondo (trasparente sopra la hero, nero quando si scorre)
   continua verso l'alto oltre il bordo dello schermo: copre notch, orologio e il rimbalzo dello scroll. */
.header::before { top: auto; bottom: 100%; height: 240px; background: inherit; }
.header { padding-top: var(--sa-top); height: calc(var(--header) + var(--sa-top)); }

body { background-color: #000; }

/* v16.4: Safari iOS 26 colora la zona della barra di stato con il fondo dell'elemento fisso PIÙ IN ALTO.
   La grana (body::after, fissa e a tutto schermo) stava sopra l'header e Safari vedeva "trasparente":
   ora la grana sta SOTTO l'header (z-index 45 < 50), così quando l'header diventa nero il nero sale fino all'orologio.
   L'header nero non ha transizione sul colore, così Safari lo legge subito pieno. */
body::after { z-index: 45; }
.header.is-scrolled, .menu-aperto .header { transition: none; }

/* v16.6: il fondo di base (html) è del colore della cima della hero (vedi style su <html>): Safari lo usa per la zona
   dell'orologio quando l'header è trasparente. Il corpo della pagina resta nero. */
body { background-color: #000; }

/* v16.7: html e body hanno il colore della cima della hero (Safari lo usa sotto l'orologio);
   il nero del sito lo danno il contenuto e il piè di pagina */
main { background-color: #000; }
.footer { background-color: #000; }

/* v16.8: niente stacco sotto l'orologio. Safari riempie quella zona con un colore pieno (il fondo del body = --cima):
   il bordo alto della hero parte esattamente da quel colore e sfuma dolcemente nella hero. */
.cima-sfuma { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--header) + var(--sa-top) + 120px); pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, var(--cima, transparent) 0%, color-mix(in srgb, var(--cima, transparent) 70%, transparent) 28%, color-mix(in srgb, var(--cima, transparent) 30%, transparent) 60%, transparent 100%); }
.dea--centrata .dea__testo, .hero-blu--centro .hero-blu__testo { z-index: 2; }

/* v16.9: Safari tiene l'ultimo colore pieno dell'header: tornando in cima restava nero.
   Su telefono e tablet, in cima alla pagina l'header ha un fondo PIENO del colore della cima della hero (--cima)
   e la hero è di quel colore esatto sotto l'header, poi sfuma: l'header non si vede, ma Safari ha sempre un colore pieno. */
@media (max-width: 960px) {
  .hero-piena .header:not(.is-scrolled):not(.menu-aperto .header) { background-color: var(--cima, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; transition: none; }
  .cima-sfuma { height: calc(var(--header) + var(--sa-top) + 140px);
    background: linear-gradient(180deg, var(--cima, transparent) 0, var(--cima, transparent) calc(var(--header) + var(--sa-top)), color-mix(in srgb, var(--cima, transparent) 55%, transparent) calc(var(--header) + var(--sa-top) + 50px), transparent 100%); }
}

/* v17: prestazioni della prima hero su telefono (stesso aspetto, molto meno lavoro per frame) */
@media (max-width: 900px) {
  .dea__sfere { filter: saturate(1.2) blur(22px) !important; transform: scale(1.12) !important; }
  .dea__vetro, .hero-blu::after, body::after { animation: none !important; }
  .dea--centrata .dea__testo, .hero-blu--centro .hero-blu__testo { text-shadow: none !important; }
  .dea .logo-punti { will-change: auto; }
}

.est-hero .est-hero__testo { z-index: 2; }

/* v19: entrata dei pulsanti della home più morbida (salgono e si accendono, senza scatto di scala) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes dea-pulsante { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .dea__azioni .btn { animation: dea-pulsante 900ms cubic-bezier(.22, 1, .36, 1) var(--btn, 1400ms) both !important; }
}

/* v20: entrate della home, stesso linguaggio della prima hero (curva .22,1,.36,1 · parole che salgono di .3em e si accendono) */
@media (prefers-reduced-motion: no-preference) {
  .con-entrate .rivela { transition-duration: 1s; transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
  /* blocco in sequenza: il contenitore non si muove, si muovono i suoi pezzi in ordine */
  .con-entrate .rivela--sequenza { opacity: 1; transform: none; }
  .con-entrate .rivela--sequenza > .pezzo { opacity: 0; transform: translateY(16px); transition: opacity .9s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms), transform .9s cubic-bezier(.22, 1, .36, 1) var(--d, 0ms); }
  .con-entrate .rivela--sequenza > .pezzo--titolo { opacity: 1; transform: none; }
  .con-entrate .rivela--sequenza.is-visibile > .pezzo { opacity: 1; transform: none; }
  .con-entrate .parola { display: inline-block; white-space: nowrap; opacity: 0; transform: translateY(.3em);
    transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--d, 0ms) + var(--n) * 55ms); }
  .con-entrate .rivela--sequenza > .pezzo--titolo .parola { transition-delay: calc(var(--d, 0ms) + var(--n) * 55ms); }
  .con-entrate .rivela--sequenza.is-visibile .parola, .con-entrate .is-visibile .parola, .con-entrate .is-visibile.pezzo--titolo-libero .parola { opacity: 1; transform: none; }
  /* immagine dell'app: sale e si assesta */
  .con-entrate .affianco__media.rivela { transform: translateY(28px) scale(.97); }
  .con-entrate .affianco__media.rivela.is-visibile { transform: none; }
}

/* v21: barra del preventivo (Dispositivi): fissa in basso mentre si scorre, icone dei dispositivi scelti con la quantità */
.riepilogo-preventivo { position: fixed; left: 0; right: 0; bottom: calc(18px + var(--sa-bottom, 0px)); z-index: 40; margin: 0; padding: 0 var(--gutter); display: block;
  opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .35s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.22, 1, .36, 1); }
.riepilogo-preventivo.is-visibile { opacity: 1; transform: none; pointer-events: auto; }
.riepilogo-preventivo__barra { display: flex; align-items: center; gap: 14px; max-width: 680px; margin: 0 auto; padding: 8px 8px 8px 10px;
  border-radius: 999px; background: rgba(18, 20, 24, .9); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .8); font-size: 15px; }
.riepilogo-preventivo__voci { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex: none; }
.riepilogo-preventivo__voce { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.riepilogo-preventivo__voce img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #000; border: 1px solid rgba(255, 255, 255, .12); }
.riepilogo-preventivo__voce span { font-weight: 600; font-variant-numeric: tabular-nums; }
.riepilogo-preventivo__voce em { font-style: normal; font-size: 13px; color: var(--testo-3); }
.riepilogo-preventivo__totale { flex: 1; text-align: right; color: var(--testo-2); font-size: 14px; white-space: nowrap; }
.riepilogo-preventivo .btn { flex: none; }
@media (max-width: 640px) {
  .riepilogo-preventivo__barra { gap: 8px; padding: 6px 6px 6px 6px; }
  .riepilogo-preventivo__voce { padding-right: 10px; }
  .riepilogo-preventivo__voce em, .riepilogo-preventivo__totale { display: none; }
  .riepilogo-preventivo .btn { margin-left: auto; height: 44px; padding: 0 16px; font-size: 14px; }
}
.riepilogo-preventivo__voce img { object-fit: contain; padding: 3px; }
.btn-corto { display: none; }
@media (max-width: 640px) {
  .btn-lungo { display: none; } .btn-corto { display: inline; }
  .riepilogo-preventivo__voci { gap: 4px; min-width: 0; overflow: hidden; }
  .riepilogo-preventivo__voce { height: 40px; gap: 6px; padding: 3px 9px 3px 3px; }
  .riepilogo-preventivo__voce img { width: 34px; height: 34px; }
}

/* ===================== v22: header e menu su telefono/tablet: elegante, pulito, semplice ===================== */
@media (max-width: 960px) {
  :root { --header: 56px; }
  .header__logo img { width: 88px; }
  .header__destra { gap: 4px; margin-right: -10px; }
  /* icona: due linee sottili che diventano una X */
  .header__burger { width: 44px; height: 44px; background: transparent !important; border-radius: 0; }
  .header__burger span { width: 20px; height: 1.5px; background: transparent !important; position: relative; }
  .header__burger span::before, .header__burger span::after { width: 20px; height: 1.5px; background: #fff; border-radius: 2px; transition: transform .35s cubic-bezier(.22, 1, .36, 1), top .35s cubic-bezier(.22, 1, .36, 1); }
  .header__burger span::before { top: -4px; }
  .header__burger span::after { top: 4px; }
  .menu-aperto .header__burger span::before { top: 0; transform: rotate(45deg); }
  .menu-aperto .header__burger span::after { top: 0; transform: rotate(-45deg); }

  /* pannello: sempre nel DOM, entra in dissolvenza; le voci salgono una dopo l'altra; esce rapido */
  .menu-mobile {
    display: flex !important; flex-direction: column; gap: 0;
    inset: calc(var(--header) + var(--sa-top, 0px)) 0 0 0; padding: 12px var(--gutter) calc(24px + var(--sa-bottom, 0px));
    background: #000; visibility: hidden; opacity: 0; pointer-events: none;
    transition: opacity .22s ease, visibility 0s linear .22s;
  }
  .menu-aperto .menu-mobile { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .3s ease; }
  .menu-mobile__voci { list-style: none; margin: 0; padding: 0; }
  .menu-mobile__voci li, .menu-mobile__fondo {
    opacity: 0; transform: translateY(14px);
    transition: opacity .18s ease, transform .18s ease;
  }
  .menu-aperto .menu-mobile__voci li, .menu-aperto .menu-mobile__fondo {
    opacity: 1; transform: none;
    transition: opacity .55s cubic-bezier(.22, 1, .36, 1) calc(80ms + var(--i) * 45ms), transform .55s cubic-bezier(.22, 1, .36, 1) calc(80ms + var(--i) * 45ms);
  }
  .menu-mobile a.voce {
    display: flex; flex-direction: column; gap: 2px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: 22px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: #fff; text-decoration: none;
  }
  .menu-mobile a.voce small { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--testo-3); margin: 0; }
  .menu-mobile a.voce[aria-current="page"] span { display: inline-flex; align-items: center; gap: 10px; }
  .menu-mobile a.voce[aria-current="page"] span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--caldo); }
  .menu-mobile a.voce:active { opacity: .6; }
  .menu-mobile__fondo { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .menu-mobile__fondo .btn { width: 100%; }
  .menu-mobile__mail { text-align: center; font-size: 14px; color: var(--testo-3); text-decoration: none; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .menu-mobile, .menu-mobile__voci li, .menu-mobile__fondo, .header__burger span::before, .header__burger span::after { transition: none !important; transform: none !important; }
}

/* v23: la prima hero della home parte già del colore della zona dell'orologio (--cima): le sfere compaiono sopra
   lo stesso blu, niente fondo scuro iniziale con la barra azzurra in cima */
.dea.dea--centrata { background-color: var(--cima, #0A1F33); }

/* v24: su telefono/tablet "Richiedi una demo" (nel menu e nella barra in alto) è a contorno, non bianco pieno */
@media (max-width: 960px) {
  .menu-mobile__fondo .btn--primario, .header__destra .btn--primario {
    background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
  }
  .menu-mobile__fondo .btn--primario:hover, .header__destra .btn--primario:hover,
  .menu-mobile__fondo .btn--primario:active, .header__destra .btn--primario:active { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px #fff; }
}

/* v25: menu aperto → header nero (anche sopra la hero, dove è trasparente); chiudendo torna com'era, con dissolvenza */
html.menu-aperto .header, html.menu-aperto .hero-piena .header, html.menu-aperto .hero-piena .header:not(.is-scrolled) {
  background-color: #000 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
@media (max-width: 960px) {
  .header { transition: background-color .3s ease !important; }
}
/* tablet verticale: la torcia della storia non deve occupare uno schermo intero */
@media (min-width: 561px) and (max-width: 860px) { .hero-blu--affianco > .punti--infografica { aspect-ratio: 4 / 3; } }

/* v26: al caricamento il menu non deve mai comparire, nemmeno per un istante (Safari a volte esegue le transizioni
   al primo disegno). Finché la pagina non è pronta il menu è display:none e header/menu non hanno transizioni. */
html:not(.pronto) .menu-mobile { display: none !important; }
html:not(.pronto) .header, html:not(.pronto) .header *, html:not(.pronto) .menu-mobile * { transition: none !important; }

/* v27: il colore dell'header cambia di colpo (niente transizione): Safari copia quel colore nella zona dell'orologio,
   e con la transizione restava nero per mezzo secondo tornando in cima */
.header, .hero-piena .header, .header.is-scrolled { transition: none !important; }

/* v28: catena "Per chi è" (Firmware): card della stessa altezza, icona in testa, frecce nello spazio fra le card (mai sopra) */
.catena { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr; align-items: stretch; gap: 0; }
.catena .anello { display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 28px; border-radius: var(--r); background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .1); }
.catena .anello::after { content: none !important; }
.catena .anello h3 { font-size: 19px; line-height: 1.2; }
.catena .anello p { color: var(--testo-2); font-size: 15px; margin: 0; }
.anello__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.anello__testa small { margin: 0; font-size: 13px; color: var(--testo-3); font-variant-numeric: tabular-nums; }
.anello__icona { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(168, 208, 213, .1); color: var(--ciano); }
.anello__icona svg, .catena__freccia svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.catena .anello--centro { background: #fff; border-color: transparent; color: #000; box-shadow: 0 24px 60px -24px rgba(168, 208, 213, .45); }
.catena .anello--centro h3 { color: #000; }
.catena .anello--centro p { color: rgba(0, 0, 0, .62) !important; }
.catena .anello--centro .anello__testa small { color: rgba(0, 0, 0, .5); }
.catena .anello--centro .anello__icona { background: #0A1F33; color: #fff; }
.catena__freccia { display: grid; place-items: center; color: rgba(255, 255, 255, .35); }
@media (max-width: 1024px) and (min-width: 721px) {
  .catena { grid-template-columns: 1fr 36px 1fr; row-gap: 8px; }
  /* fra la 2ª e la 3ª card si va a capo: la freccia diventa una riga che scende e torna a sinistra */
  .catena__freccia:nth-child(4) { grid-column: 1 / -1; height: 28px; margin: -8px 0; }
  .catena__freccia:nth-child(4) svg { transform: rotate(135deg); }
}
@media (max-width: 720px) {
  .catena { grid-template-columns: 1fr; }
  .catena__freccia { height: 36px; }
  .catena__freccia svg { transform: rotate(90deg); }
  .anello__testa { margin-bottom: 8px; }
}

/* v29: La nostra storia: stesse entrate della home (parole che salgono, pezzi in ordine di lettura) e parallax sui dot */
@media (prefers-reduced-motion: no-preference) {
  .con-entrate .frase .rivela { opacity: 1; transform: none; }
  .con-entrate .scena__num { transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1); }
}

/* v30: niente zoom da doppio tocco (iOS) quando si premono + e − velocemente, e in generale su pulsanti e link */
a, button, input, select, textarea, label, .quantita, .btn { touch-action: manipulation; }
.quantita button { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.quantita input { font-size: 16px; }   /* sotto i 16 px iOS ingrandisce la pagina quando si tocca il campo */


/* icone della barra del preventivo: cliccabili, portano alla scheda del dispositivo */
a.riepilogo-preventivo__voce { color: #fff; text-decoration: none; transition: background-color .2s; }
a.riepilogo-preventivo__voce:hover, a.riepilogo-preventivo__voce:active { background: rgba(255, 255, 255, .16); }
.prodotto { scroll-margin-top: calc(var(--header) + env(safe-area-inset-top, 0px) + 16px); }
.prodotto:target { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); transition: box-shadow .4s; }

/* Made in Italy → Made in Ensafe: firma piccola e centrata in fondo al footer (componente della landing, madein.js) */
.mi { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--linea); text-align: center; color: rgba(255, 255, 255, .62); }
.mi__titolo { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: .26em; font-size: 14px; line-height: 1; letter-spacing: -.01em; }
.mi__casella { position: relative; display: inline-grid; height: 1.45em; margin-block: -.22em; overflow: clip; width: var(--w, auto); }
.mi__voce { grid-area: 1 / 1; display: flex; align-items: center; justify-content: flex-start; white-space: nowrap; font-weight: 600; color: #fff;
  transition: transform 900ms cubic-bezier(.65, 0, .25, 1), opacity 900ms cubic-bezier(.65, 0, .25, 1); }
.mi__voce--logo img { height: .85em; width: auto; display: block; }
.mi__voce.su { transform: translateY(-105%); opacity: 0; }
.mi__voce.giu { transform: translateY(105%); opacity: 0; }
.mi__voce.senza { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .mi__titolo { opacity: 0; transform: translateY(10px); transition: opacity 1s cubic-bezier(.4, .02, .18, 1), transform 1s cubic-bezier(.4, .02, .18, 1); }
  .mi.visto .mi__titolo { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .mi__casella, .mi__voce { transition: none; } }

/* v32: in basso (barra home e rimbalzo dello scroll) il colore deve essere nero, non quello della hero.
   html è nero (il "canvas" che Safari mostra oltre la pagina); il body resta del colore della cima per la zona dell'orologio.
   Una sottile fascia fissa nera sul bordo inferiore dà a Safari iOS 26 il colore da usare sotto la barra degli strumenti. */
html { background-color: #000 !important; }

/* v33: il body è nero (Safari lo usa anche in basso). In cima il colore della zona dell'orologio lo dà l'header,
   che su telefono è pieno del colore della hero (v16.9) */
body { background-color: #000 !important; }

/* v34: "La nostra storia" in home, telefono e tablet verticale: meno spazio fra la torcia e il testo */
@media (max-width: 860px) {
  .hero-blu--affianco .hero-blu__testo { padding-top: 8px !important; padding-bottom: 64px !important; }
}
@media (max-width: 560px) {
  .hero-blu--affianco > .punti--infografica { aspect-ratio: 1 / 1; }
}

/* v35: al caricamento della home l'header entrava in dissolvenza (trasparente per 1 s): Safari colorava la zona
   dell'orologio di nero e non la aggiornava più. Ora il fondo dell'header è subito pieno; entrano solo logo e pulsanti. */
.pagina-home .header { animation: none !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .pagina-home .header__barra { animation: dea-header 1000ms cubic-bezier(.4, .02, .18, 1) 1000ms both; }
}
/* v36: pagina Estia: stesse entrate della home; i passi (01–04) arrivano a cascata */
@media (prefers-reduced-motion: no-preference) {
  .con-entrate .passi.rivela { opacity: 1; transform: none; }
  .con-entrate .passi.rivela > .passo { opacity: 0; transform: translateY(16px); transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1); }
  .con-entrate .passi.rivela > .passo:nth-child(2) { transition-delay: 110ms; }
  .con-entrate .passi.rivela > .passo:nth-child(3) { transition-delay: 220ms; }
  .con-entrate .passi.rivela > .passo:nth-child(4) { transition-delay: 330ms; }
  .con-entrate .passi.rivela.is-visibile > .passo { opacity: 1; transform: none; }
}
/* v37: pagina Firmware: la catena "Per chi è" arriva a cascata (card e frecce nell'ordine della filiera) */
@media (prefers-reduced-motion: no-preference) {
  .con-entrate .catena.rivela { opacity: 1; transform: none; }
  .con-entrate .catena.rivela > li { opacity: 0; transform: translateY(16px); transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1); }
  .con-entrate .catena.rivela > .catena__freccia { transform: translateX(-8px); }
  .con-entrate .catena.rivela > li:nth-child(2) { transition-delay: 90ms; }
  .con-entrate .catena.rivela > li:nth-child(3) { transition-delay: 180ms; }
  .con-entrate .catena.rivela > li:nth-child(4) { transition-delay: 270ms; }
  .con-entrate .catena.rivela > li:nth-child(5) { transition-delay: 360ms; }
  .con-entrate .catena.rivela > li:nth-child(6) { transition-delay: 450ms; }
  .con-entrate .catena.rivela > li:nth-child(7) { transition-delay: 540ms; }
  .con-entrate .catena.rivela.is-visibile > li { opacity: 1; transform: none; }
}

/* v38: schede-link (Contatti "Come possiamo aiutarti?"): freccia in alto a destra e risposta al passaggio, per far capire che si cliccano */
a.scheda { position: relative; padding-right: 64px; color: #fff; border-color: rgba(255, 255, 255, .1); }
a.scheda::after {
  content: ""; position: absolute; top: 50%; right: 22px; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%;
  background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), background-color .25s ease;
}
a.scheda:hover, a.scheda:focus-visible { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); }
a.scheda:hover::after, a.scheda:focus-visible::after { transform: translateX(4px); background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
a.scheda:active { transform: scale(.99); }

/* v39: rimbalzo in cima: sopra l'inizio della pagina c'è un riquadro del colore della hero, che Safari mostra quando
   si tira la pagina verso il basso (niente fascia nera fra header e hero). Non allunga la pagina: sta sopra lo 0. */
.sopra-pagina { position: absolute; left: 0; right: 0; top: -100vh; height: 100vh; background: var(--cima, #000); pointer-events: none; }



/* v41: Contatti: titolo parola per parola (sito.js), schede-link a cascata, contatti diretti e campi del modulo in sequenza */
@media (prefers-reduced-motion: no-preference) {
  .con-entrate section.hero h1.rivela { opacity: 1; transform: none; }
  .con-entrate .modulo-blocco > .rivela { opacity: 1; transform: none; }
  .con-entrate .modulo-blocco > .rivela .griglia > .scheda,
  .con-entrate .modulo-blocco > .rivela .contatti-diretti > div,
  .con-entrate .modulo-blocco > form.rivela > * {
    opacity: 0; transform: translateY(14px);
    transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
  }
  .con-entrate .modulo-blocco > .rivela.is-visibile .griglia > .scheda,
  .con-entrate .modulo-blocco > .rivela.is-visibile .contatti-diretti > div,
  .con-entrate .modulo-blocco > form.rivela.is-visibile > * { opacity: 1; transform: none; }
  .con-entrate .modulo-blocco .griglia > .scheda:nth-child(1) { transition-delay: 0ms; }
  .con-entrate .modulo-blocco .griglia > .scheda:nth-child(2) { transition-delay: 90ms; }
  .con-entrate .modulo-blocco .griglia > .scheda:nth-child(3) { transition-delay: 180ms; }
  .con-entrate .modulo-blocco .griglia > .scheda:nth-child(4) { transition-delay: 270ms; }
  .con-entrate .modulo-blocco .contatti-diretti > div:nth-child(1) { transition-delay: 380ms; }
  .con-entrate .modulo-blocco .contatti-diretti > div:nth-child(2) { transition-delay: 450ms; }
  .con-entrate .modulo-blocco .contatti-diretti > div:nth-child(3) { transition-delay: 520ms; }
  .con-entrate .modulo-blocco > form.rivela > *:nth-child(2) { transition-delay: 60ms; }
  .con-entrate .modulo-blocco > form.rivela > *:nth-child(3) { transition-delay: 120ms; }
  .con-entrate .modulo-blocco > form.rivela > *:nth-child(4) { transition-delay: 180ms; }
  .con-entrate .modulo-blocco > form.rivela > *:nth-child(5) { transition-delay: 240ms; }
  .con-entrate .modulo-blocco > form.rivela > *:nth-child(6) { transition-delay: 300ms; }
  .con-entrate .modulo-blocco > form.rivela > *:nth-child(n+7) { transition-delay: 360ms; }
  /* dopo l'entrata la scheda torna reattiva al passaggio, senza ritardi */
  .con-entrate .modulo-blocco .griglia > .scheda:hover { transition-delay: 0ms; }
}

/* v42: menu: il fondo nero del pannello compare e sparisce nello stesso istante di header e zona dell'orologio
   (niente dissolvenza del fondo); restano animate solo le voci, che salgono una dopo l'altra */
@media (max-width: 960px) {
  .menu-mobile, .menu-aperto .menu-mobile { transition: none !important; }
}
/* v43: header su telefono stabile: niente effetti costosi da ricalcolare mentre cambia colore */
@media (max-width: 960px) {
  .header, .header.is-scrolled { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; will-change: background-color; transform: translateZ(0); }
}

/* v45: le card-link (Contatti) al caricamento mostravano per un attimo un bordo blu: Safari animava il bordo partendo
   dal colore dei link (blu). Bordo e colore sono dichiarati subito, e le transizioni al passaggio si attivano solo
   a pagina pronta. */
html.pronto a.scheda { transition: background-color .25s ease, border-color .25s ease, transform .25s ease, opacity .8s cubic-bezier(.22, 1, .36, 1); }
a.scheda, a.scheda:visited { -webkit-tap-highlight-color: transparent; outline: none; }
a.scheda:focus-visible { outline: 2px solid var(--caldo); outline-offset: 3px; }

/* ===================== v46: pesi dei testi come nel Business Plan =====================
   Biennale ha due pesi (Book 400 e Bold 700). Come nel BP: titoli grandi in Book, con le parole chiave in Bold;
   titoli piccoli (card, voci) in Bold; occhielli in Bold maiuscolo spaziato; corpo e numeri in Book. */
h1, h2, .h-sezione, .h-media, .hero h1, .hero-blu h1, .citazione, .frase__testo, .scena h2, .cta-banda h2,
.est-hero__titolo, .dea h1, .numero__valore, .capitolo h3 {
  font-weight: 400; letter-spacing: -.035em;
}
h1 b, h2 b, h1 strong, h2 strong, .citazione b, .frase__testo b, .est-hero__titolo b, .dea h1 b { font-weight: 700; letter-spacing: -.045em; }
.citazione em, .frase__testo em { font-weight: 700; }
h3, h4, .scheda h3, .linea h3, .prodotto h3, .passo h3, .anello h3, .persona h3, .faq summary { font-weight: 700; letter-spacing: -.01em; }
.btn, .link-freccia, .menu-mobile a.voce span { font-weight: 700; }
.menu-mobile a.voce { font-weight: 700; }
/* occhielli: Bold, maiuscolo, spaziato (come "SICUREZZA PER PERSONE E BENI" e gli occhielli del BP) */
.occhiello, .hero__occhiello, .scena__quando, .dea__occhiello {
  font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4;
}
.hero__occhiello { font-size: 12px; }
/* etichette piccole delle card e delle specifiche: Book, discrete */
.linea__tag, .prodotto__tipo, .scheda__num, .numero__fonte, .anello__testa small { font-weight: 400; }
/* testi correnti: Book; il grassetto nel testo resta Bold */
p, li, .testo-lungo, .hero__sotto { font-weight: 400; }
p b, p strong, li strong, .elenco-spunte strong { font-weight: 700; }

/* v47: occhielli lunghi della hero su telefono: due righe centrate (titolo / specifica), senza il punto che salta a sinistra */
.hero__occhiello-sec i { font-style: normal; margin: 0 .25em; opacity: .7; }
@media (max-width: 560px) {
  .hero__occhiello:has(.hero__occhiello-sec) { flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .hero__occhiello-sec { flex-basis: 100%; text-align: center; font-weight: 400; letter-spacing: .08em; opacity: .85; }
  .hero__occhiello-sec i { display: none; }
}
/* v48: parola chiave in Bold dentro i titoli (anche spezzati parola per parola dalle entrate) */
h1 b .parola, h2 b .parola, h1 b, h2 b { font-weight: 700; }
/* v49: "Una tecnologia che diventi norma": la torcia intera nel suo riquadro, come in home */
#visione .scena__punti { top: 6%; bottom: 6%; width: 52%; left: 2%; }
@media (max-width: 860px) { #visione .scena__punti { top: auto; bottom: auto; left: auto; width: 100%; aspect-ratio: 1 / 1; } }

/* Hero nera (pagina Grazie): sfondo nero pieno, niente sfere blu né sfumature blu notte */
.hero-blu--nero { background: #000; }
.hero-blu--nero::before { display: none; }
.hero-blu--nero .cima-sfuma, .hero-blu--nero .sfuma { display: none !important; }
.hero-blu--nero .hero-blu__testo { text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }

/* Errori dei moduli: informativa privacy non accettata */
.errore--consenso { grid-column: 1 / -1; display: none; font-size: 13px; color: #ff9b9b; margin-top: -8px; }
.consenso.is-invalido + .errore--consenso { display: block; }
.consenso.is-invalido input { outline: 2px solid var(--rosso); outline-offset: 2px; }
.consenso.is-invalido { color: #ffd0d0; }

/* Pagina 404: testo a sinistra, "404" a puntini a destra; sul telefono i puntini passano sopra il testo */
.hero--404 { min-height: 0; display: flex; align-items: flex-start; padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(64px, 10vh, 120px); }
.hero--404__griglia { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); align-items: center; gap: clamp(20px, 4vw, 56px); width: 100%; }
.hero--404__testo { text-align: left; }
.hero--404__testo > * { max-width: 34em; margin-left: 0; margin-right: 0; }
.hero--404__testo .hero__sotto { margin-left: 0; }
.hero--404__testo .azioni { justify-content: flex-start; flex-wrap: wrap; }
.hero--404__punti { width: 100%; aspect-ratio: 5 / 2.6; }
@media (max-width: 900px) {
  .hero--404 { padding-top: clamp(24px, 6vw, 48px); }
  .hero--404__griglia { grid-template-columns: 1fr; }
  .hero--404__punti { order: -1; aspect-ratio: 1.8 / 1; }
  .hero--404__testo { text-align: center; }
  .hero--404__testo > * { margin-left: auto; margin-right: auto; }
  .hero--404__testo .azioni { justify-content: center; }
}

.hero--404__testo h1 { max-width: none; font-size: clamp(34px, 4.4vw, 62px); text-wrap: balance; }

/* Barra del preventivo: con quantità a due cifre (es. 20 tag, 1 beacon, 1 gateway) la barra si adatta al contenuto
   e il pulsante resta dentro, con lo stesso margine a destra */
.riepilogo-preventivo__barra { width: max-content; max-width: min(100%, 920px); box-sizing: border-box; }
.riepilogo-preventivo__voci { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.riepilogo-preventivo__voce { flex: none; }
.riepilogo-preventivo__totale { flex: 1 1 auto; min-width: 0; margin-left: 4px; }
.riepilogo-preventivo .btn { flex: none; margin-left: auto; }
@media (max-width: 900px) {
  .riepilogo-preventivo__voce em { display: none; }
  .riepilogo-preventivo__voce { padding-right: 12px; }
}
@media (max-width: 760px) {
  .riepilogo-preventivo__totale { display: none; }
}
@media (max-width: 640px) {
  .riepilogo-preventivo__barra { width: 100%; }
}

/* Barra del preventivo su telefono: compatta, quantità sempre leggibili, pulsante sempre dentro */
@media (max-width: 640px) {
  .riepilogo-preventivo { padding-left: max(12px, var(--gutter)); padding-right: max(12px, var(--gutter)); }
  .riepilogo-preventivo__barra { width: 100%; gap: 6px; padding: 5px; font-size: 14px; }
  .riepilogo-preventivo__voci { flex: 1 1 0; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .riepilogo-preventivo__voci::-webkit-scrollbar { display: none; }
  .riepilogo-preventivo__voce { height: 40px; gap: 5px; padding: 3px 10px 3px 3px; }
  .riepilogo-preventivo__voce img { width: 32px; height: 32px; padding: 3px; }
  .riepilogo-preventivo__voce span { font-size: 15px; font-weight: 700; }
  .riepilogo-preventivo .btn { height: 40px; padding: 0 16px; font-size: 14px; flex: none; margin-left: 0; }
}
@media (max-width: 380px) {
  .riepilogo-preventivo__voce { gap: 4px; padding-right: 8px; }
  .riepilogo-preventivo__voce img { width: 28px; height: 28px; }
  .riepilogo-preventivo .btn { padding: 0 13px; }
}