/* Sito pubblico di Ezea — foglio di stile unico.
 *
 * ⛔ DUE TEMI INDIPENDENTI (regola del progetto). Il tema SCURO è quello di
 * partenza, perché è l'identità del prodotto (nero + arancione). Il tema CHIARO
 * non è "lo scuro schiarito": ha una palette sua, ripresa dalle stesse variabili
 * che usa l'app (src/index.css), dove l'arancione è più profondo (#E85100)
 * perché sul fondo pietra chiaro il #FF7A2F sbiadisce.
 *
 * Ordine obbligato, e il motivo:
 *   1. :root            → palette SCURA completa (nessun colore nasce dentro
 *                         una media query, altrimenti un browser che non la
 *                         valuta resta senza colori);
 *   2. prefers-color-scheme: light → sovrascrive SOLO i token, e solo se
 *                         l'utente non ha scelto a mano (:root:not([data-tema="scuro"]));
 *   3. [data-tema="chiaro"] → la scelta a mano vince sempre, in entrambi i versi.
 *
 * Niente font da CDN esterni: una pagina pubblica che chiama un servizio terzo
 * gli fa vedere l'indirizzo IP di chi la apre, e questo sito non ha (e non vuole)
 * un banner dei cookie. Font di sistema, che su Windows e Mac sono già buoni.
 */

/* ── 1. Tema SCURO (di partenza) ─────────────────────────────────────────── */
:root {
  --bg:        #07080A;
  --bg2:       #0B0D11;
  --sup:       #111418;
  --sup2:      #181C22;
  --bordo:     #282D36;
  --bordo2:    #363B45;
  --testo:     #F2F2F2;
  --testo2:    #AAAAAA;
  --muto:      #8E8E8E;
  /* ⛔ TRE ARANCIONI, NON UNO — e il motivo è misurato, non estetico.
     Lo stesso arancione che su fondo nero si legge benissimo, sul fondo pietra
     chiaro scende a 3,2:1 di contrasto, sotto la soglia leggibile (4,5:1 per un
     testo piccolo). Misurato nel browser il 16 ago 2026 su questo sito.
     Quindi l'arancione ha tre mestieri e tre valori:
       --arancio        decorazione (pallini, bordi, sfumature): non si legge,
                        può restare il colore del marchio;
       --arancio-testo  quando è TESTO (collegamenti, occhielli);
       --arancio-pieno  quando è lo SFONDO di un tasto, col suo colore di testo.
     Nel tema scuro coincidono quasi tutti; nel chiaro no, ed è esattamente il
     motivo per cui i due temi vanno guardati separatamente. */
  --arancio:         #FF7A2F;
  --arancio-testo:   #FF7A2F;   /* su #07080A: 7,7:1 */
  --arancio-testo-su:#FFB07A;   /* stesso testo, col puntatore sopra */
  --arancio-pieno:   #FF7A2F;
  --arancio-pieno-su:#FFB07A;
  --su-arancio:      #0A0B0D;   /* testo sopra il pieno arancione: 7,6:1 */
  --viola:           #9B7CFF;
  --ombra:     0 18px 48px rgba(0, 0, 0, 0.45);
  --ombra-p:   0 10px 30px rgba(255, 122, 47, 0.22);
  --velo:      rgba(255, 255, 255, 0.04);

  color-scheme: dark;
}

/* ── 2. Tema CHIARO da preferenza di sistema (solo se non c'è scelta manuale) ── */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="scuro"]) {
    --bg:        #EFEEEB;
    --bg2:       #E7E5DE;
    --sup:       #F6F5F1;
    --sup2:      #EFEEEB;
    --bordo:     #D8D5CC;
    --bordo2:    #C5C1B5;
    --testo:     #1C1B17;
    --testo2:    #2F2D27;
    --muto:      #6A655C;
    /* Vedi la nota sui tre arancioni in cima. Numeri misurati sul fondo più
       chiaro E su quello alternato (#EFEEEB e #E7E5DE), perché il testo passa
       sopra tutti e due:
         #E85100 come testo → 3,2:1  ✗ (era il colore di partenza)
         #B83600 come testo → 4,7:1  ✓
         bianco su #C53A00  → 5,3:1  ✓ */
    --arancio:         #E85100;
    --arancio-testo:   #B83600;
    --arancio-testo-su:#8F2900;
    --arancio-pieno:   #C53A00;
    --arancio-pieno-su:#A32F00;
    --su-arancio:      #FFFFFF;
    --viola:           #7C3AED;
    --ombra:     0 18px 44px rgba(28, 27, 23, 0.10);
    --ombra-p:   0 10px 26px rgba(232, 81, 0, 0.20);
    --velo:      rgba(28, 27, 23, 0.03);

    color-scheme: light;
  }
}

/* ── 3. Tema CHIARO scelto a mano: vince su tutto ────────────────────────── */
:root[data-tema="chiaro"] {
  --bg:        #EFEEEB;
  --bg2:       #E7E5DE;
  --sup:       #F6F5F1;
  --sup2:      #EFEEEB;
  --bordo:     #D8D5CC;
  --bordo2:    #C5C1B5;
  --testo:     #1C1B17;
  --testo2:    #2F2D27;
  --muto:      #6A655C;
  --arancio:         #E85100;
  --arancio-testo:   #B83600;
  --arancio-testo-su:#8F2900;
  --arancio-pieno:   #C53A00;
  --arancio-pieno-su:#A32F00;
  --su-arancio:      #FFFFFF;
  --viola:           #7C3AED;
  --ombra:     0 18px 44px rgba(28, 27, 23, 0.10);
  --ombra-p:   0 10px 26px rgba(232, 81, 0, 0.20);
  --velo:      rgba(28, 27, 23, 0.03);

  color-scheme: light;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;   /* iPhone in orizzontale non ingrandisce da solo */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--testo);
  font-family: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;              /* nessuna barra orizzontale, mai */
}

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

a { color: var(--arancio-testo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--arancio-testo-su); }

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

h1, h2, h3 { line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 14px; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 700; }
p  { margin: 0 0 16px; }

.contenitore { width: min(1120px, 100% - 40px); margin-inline: auto; }
@media (max-width: 560px) { .contenitore { width: min(1120px, 100% - 28px); } }

.sezione { padding: clamp(56px, 9vw, 104px) 0; }
.sezione--alt { background: var(--bg2); border-block: 1px solid var(--bordo); }

.occhiello {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arancio-testo);
  margin-bottom: 10px;
}

.sottotitolo { color: var(--testo2); font-size: 1.06rem; max-width: 62ch; }
.piccolo { font-size: 0.87rem; color: var(--muto); line-height: 1.55; }

/* ⛔ NESSUNO STILE SCRITTO DENTRO I TAG (`style="..."`), e non è pignoleria.
   Il sito dichiara `style-src 'self'`: il browser BLOCCA gli stili scritti nel
   tag, esattamente come blocca il codice iniettato in una pagina. Il 16 ago
   2026 le pagine ne avevano sedici: non venivano applicati, la console era
   piena di errori e la pagina restava sbilanciata — senza che niente si
   rompesse in modo visibile. Le poche misure che servivano stanno qui sotto,
   con un nome. */
.nota-sotto { margin-top: 20px; max-width: 62ch; }
.riga-tasto { margin-top: 8px; }
.marchio--piede { margin-bottom: 12px; }
.piede__intro { max-width: 34ch; }

/* Il testo che serve solo a chi usa un lettore di schermo. */
.solo-lettori {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Intestazione ────────────────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordo);
}
.testata__riga {
  display: flex; align-items: center; gap: 18px;
  min-height: 64px;
}
.marchio {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.18rem; letter-spacing: -0.02em;
  color: var(--testo); text-decoration: none;
}
.marchio__segno {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--arancio), var(--viola));
  display: grid; place-items: center;
  color: #fff; font-size: 0.95rem; font-weight: 800;
}
.menu { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.menu a {
  color: var(--testo2); text-decoration: none;
  font-size: 0.93rem; font-weight: 600;
}
.menu a:hover { color: var(--testo); }
@media (max-width: 780px) { .menu { display: none; } }

.tasto-tema {
  margin-left: auto; flex: 0 0 auto;
  /* 44×44 è la misura minima perché un dito lo prenda al primo colpo: sotto,
     sul telefono si sbaglia e si finisce per toccare il collegamento accanto. */
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--bordo2); background: var(--sup2);
  color: var(--testo2); cursor: pointer;
  display: grid; place-items: center; font-size: 1rem; line-height: 1;
}
.menu + .tasto-tema { margin-left: 4px; }
.tasto-tema:hover { color: var(--testo); border-color: var(--arancio); }

/* ── Tasti ───────────────────────────────────────────────────────────────── */
.tasto {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  padding: 15px 26px; border-radius: 14px;
  font-size: 1rem; font-weight: 700; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  min-height: 52px;                /* dito, non puntatore */
}
.tasto:hover { transform: translateY(-1px); }
/* ⚠️ `background-color` invece della scorciatoia `background`: dice esattamente
   cosa cambia, ed è la sola proprietà che questo tasto colora.
   Nota per chi misurerà i colori con gli strumenti da sviluppatore (16 ago 2026):
   cambiando tema al volo, per 0,15 secondi il fondo risulta ancora quello
   vecchio. Non è un difetto ed è la transizione qui sopra, che sta sfumando da
   un colore all'altro: a transizione finita il valore è quello giusto —
   verificato. Chi misura subito dopo il clic legge un colore di passaggio. */
.tasto--primario {
  background-color: var(--arancio-pieno); color: var(--su-arancio);
  box-shadow: var(--ombra-p);
}
.tasto--primario:hover { background-color: var(--arancio-pieno-su); color: var(--su-arancio); }
/* ⛔ IL MAC NON E' LA SECONDA SCELTA (16 ago 2026, visto guardando lo scatto).
   I due tasti di scarico erano uno arancione pieno e uno grigio: letto da un
   agente col Mac, quel grigio dice «il tuo sistema lo supportiamo meno». E non
   e' vero — il pacchetto Mac si costruisce e si firma esattamente come l'altro.
   Ora hanno lo stesso peso: contorno arancione pieno su fondo neutro, cosi'
   nessuno dei due sembra un ripiego. Il tasto davvero secondario resta
   `--quieto`, che serve altrove. */
.tasto--pari {
  background: var(--sup2); color: var(--testo);
  border-color: var(--arancio); border-width: 2px;
}
.tasto--pari:hover { background: color-mix(in srgb, var(--arancio) 10%, var(--sup2)); }

.tasto--quieto {
  background: var(--sup2); color: var(--testo);
  border-color: var(--bordo2);
}
.tasto--quieto:hover { border-color: var(--arancio); color: var(--testo); }
.tasto__nota {
  display: block; width: 100%;
  font-size: 0.78rem; font-weight: 600; opacity: 0.75;
  line-height: 1.3;
}

/* ── Copertina ───────────────────────────────────────────────────────────── */
.copertina { padding: clamp(52px, 8vw, 96px) 0 clamp(44px, 7vw, 80px); }
.copertina__testo { max-width: 46ch; }
.copertina h1 { margin-bottom: 20px; }
.copertina h1 em { font-style: normal; color: var(--arancio); }
.copertina .sottotitolo { font-size: 1.13rem; }
.copertina__tasti { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.avviso {
  margin-top: 30px; padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--bordo2);
  background: var(--velo);
  font-size: 0.92rem; color: var(--testo2);
  max-width: 56ch;
}
.avviso strong { color: var(--testo); }

/* ── Blocchi "cosa fa" ───────────────────────────────────────────────────── */
.schermate { display: grid; gap: 26px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .schermate { grid-template-columns: 1fr; } }

.schermata {
  padding: 30px; border-radius: 20px;
  background: var(--sup); border: 1px solid var(--bordo);
  box-shadow: var(--ombra);
}
.schermata__numero {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: color-mix(in srgb, var(--arancio) 16%, transparent);
  color: var(--arancio-testo); font-weight: 800; font-size: 0.95rem;
}
.schermata p { color: var(--testo2); }
.elenco { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; }
.elenco li {
  position: relative; padding-left: 24px;
  font-size: 0.95rem; color: var(--testo2);
}
.elenco li::before {
  content: ""; position: absolute; left: 6px; top: 0.66em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--arancio);
}

/* ── Griglia funzioni ────────────────────────────────────────────────────── */
.griglia { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); margin-top: 34px; }
@media (max-width: 900px) { .griglia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .griglia { grid-template-columns: 1fr; } }

.scheda {
  padding: 22px; border-radius: 16px;
  background: var(--sup); border: 1px solid var(--bordo);
}
.scheda h3 { margin-bottom: 8px; }
.scheda p { margin: 0; font-size: 0.93rem; color: var(--testo2); }

/* ── Prezzi ──────────────────────────────────────────────────────────────── */
.piani { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); margin-top: 36px; align-items: start; }
@media (max-width: 940px) { .piani { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.piano {
  padding: 28px 26px; border-radius: 20px;
  background: var(--sup); border: 1px solid var(--bordo);
  display: flex; flex-direction: column; height: 100%;
}
.piano--spicca {
  border-color: var(--arancio);
  box-shadow: var(--ombra-p);
}
.piano__nome { font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; }
.piano__prezzo {
  font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.1; margin-top: 10px;
}
.piano__prezzo span { font-size: 1rem; font-weight: 600; color: var(--muto); letter-spacing: 0; }
.piano__anno {
  margin-top: 6px; font-size: 0.9rem; color: var(--testo2);
  padding-bottom: 18px; border-bottom: 1px solid var(--bordo);
}
.piano__anno strong { color: var(--testo); font-weight: 700; }
.piano .elenco { margin-top: 18px; }
.piano .elenco li { font-size: 0.92rem; }

.nota-fiscale {
  margin-top: 28px; padding: 18px 20px;
  border-radius: 14px; border: 1px solid var(--bordo);
  background: var(--velo); font-size: 0.88rem; color: var(--testo2);
}

/* ── Scarica ─────────────────────────────────────────────────────────────── */
.scarico { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); margin-top: 32px; max-width: 720px; }
@media (max-width: 640px) { .scarico { grid-template-columns: 1fr; } }
.scarico .tasto { width: 100%; flex-direction: column; gap: 4px; padding: 20px 22px; text-align: center; }
.scarico .tasto strong { font-size: 1.02rem; }

.riga-versione { margin-top: 18px; font-size: 0.9rem; color: var(--muto); }
.riga-versione[hidden] { display: none; }

/* ── Piede ───────────────────────────────────────────────────────────────── */
.piede {
  border-top: 1px solid var(--bordo);
  background: var(--bg2);
  padding: 52px 0 40px;
  font-size: 0.9rem; color: var(--muto);
}
.piede__griglia {
  display: grid; gap: 30px;
  grid-template-columns: 1.4fr 1fr 1fr;
  margin-bottom: 34px;
}
@media (max-width: 780px) { .piede__griglia { grid-template-columns: 1fr; } }
.piede h4 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--testo2); margin: 0 0 12px;
}
.piede ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.piede a { color: var(--testo2); text-decoration: none; }
.piede a:hover { color: var(--arancio-testo); text-decoration: underline; }
.piede__dati {
  border-top: 1px solid var(--bordo);
  padding-top: 24px; line-height: 1.7;
}
.piede__dati--nudo { border-top: none; padding-top: 0; }
.piede__dati p { margin: 0; }
.piede__dati p + p { margin-top: 14px; }
.piede__dati strong { color: var(--testo2); font-weight: 600; }