/* ============================================================================
   AURORA — sistema visivo della piattaforma.
   Fonte: catalogo-direzioni-design-v1.html, concept 02 «Aurora».
   Effetti tridimensionali: catalogo-direzioni-design-v2.html, concept 01.

   L'idea in una riga: fondo chiarissimo, mesh di colore che si muove piano
   dietro tutto, superfici in vetro bianco smerigliato che lo lasciano
   trasparire. Niente scuro, niente bagliori al neon: la luce viene dal fondo,
   non dagli oggetti.

   Tre regole che tengono insieme il sistema:
   · il colore vive nello SFONDO e negli accenti, mai nelle superfici, che
     restano bianche e silenziose;
   · l'elevazione è OMBRA MORBIDA viola, non contorno: le card sembrano
     appoggiate su un foglio, non disegnate sopra;
   · il TRIDIMENSIONALE è un premio, non un rumore: vive nella scena della
     vetrina e in micro-inclinazioni al passaggio del mouse. Dentro l'app,
     dove si lavora, resta quasi invisibile.
   ============================================================================ */

:root{
  /* Fondali */
  --bg:      #F7F7FD;   /* bianco appena lilla: il foglio su cui poggia tutto */
  --bg2:     #FFFFFF;   /* sezioni alternate */
  --panel:   rgba(255,255,255,.66);  /* vetro smerigliato */
  --panel2:  rgba(255,255,255,.86);  /* vetro attivo/hover */

  /* Inchiostri */
  --ink:     #211D33;   /* testo primario, viola quasi nero */
  --mut:     #7B7691;   /* testo secondario */
  --dim:     #A29DB8;   /* testo terziario ed etichette */

  /* Accenti */
  --acc:     #6C5CE7;   /* viola: azioni, stati positivi, tutto ciò che conta */
  --acc2:    #FF8FC8;   /* rosa: secondo colore del mesh e dei gradienti */
  --acc3:    #6EE7F5;   /* ciano: terzo colore del mesh */
  --accInk:  #FFFFFF;   /* testo sulle superfici viola */

  /* Stati */
  --ok:      #12A97B;
  --warn:    #E8951F;
  --bad:     #E0455F;

  /* Linee e raggi */
  --line:    rgba(120,110,180,.18);
  --line2:   rgba(120,110,180,.32);
  --r:       16px;
  --rL:      24px;
  --rXL:     30px;

  /* Ombre: sempre viola, mai nere. Il nero su fondo chiaro sporca. */
  --sh:      0 16px 44px rgba(108,92,231,.14);
  --sh-alta: 0 26px 60px rgba(108,92,231,.20);
  --sh-bassa:0 4px 14px rgba(108,92,231,.10);

  --fd:'Outfit',system-ui,sans-serif;   /* display */
  --fb:'Outfit',system-ui,sans-serif;   /* testo */
  --fm:'Space Grotesk',ui-monospace,monospace;  /* etichette tecniche */
}

*{margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--fb);
  -webkit-font-smoothing:antialiased; min-height:100vh;
  font-weight:400;
}
h1,h2,h3,h4{font-family:var(--fd); font-weight:700; letter-spacing:-.02em;
            line-height:1.15; color:var(--ink)}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline}

/* ── Il mesh: tre macchie di colore che si muovono piano dietro tutto ─────
   Sta dietro ogni pagina, fisso, e non si tocca. È l'unica sorgente di
   colore del fondo: le superfici sopra restano bianche. */
.sky{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.sky i{
  position:absolute; border-radius:50%; filter:blur(80px);
  animation:meshmove 18s ease-in-out infinite;
}
.sky i:nth-child(1){width:52vw; height:52vw; left:-10vw; top:-14vw;
                    background:radial-gradient(circle,rgba(108,92,231,.34),transparent 68%)}
.sky i:nth-child(2){width:46vw; height:46vw; right:-8vw; top:6vh;
                    background:radial-gradient(circle,rgba(255,143,200,.30),transparent 68%);
                    animation-delay:-6s}
.sky i:nth-child(3){width:44vw; height:44vw; left:22vw; bottom:-16vw;
                    background:radial-gradient(circle,rgba(110,231,245,.30),transparent 68%);
                    animation-delay:-11s}
/* Dentro l'app il mesh si fa da parte: si lavora, non si guarda. */
.sky.tenue i{opacity:.5; filter:blur(100px)}
.sky.forte i{opacity:1}
@keyframes meshmove{
  0%,100%{transform:translate(0,0) scale(1)}
  50%    {transform:translate(4%,-5%) scale(1.12)}
}

/* ── Superfici ───────────────────────────────────────────────────────────
   Vetro bianco smerigliato: lascia intravedere il mesh senza mostrarlo. */
.glass, .card{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.75);
  border-radius:var(--rXL);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:var(--sh);
}
.card{padding:24px 26px}
.card:hover{box-shadow:var(--sh-alta)}

/* ── Tipografia di servizio ─────────────────────────────────────────────── */
.mono{font-family:var(--fm)}
.eyebrow{
  font-family:var(--fm); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
}
.mut{color:var(--mut)}
.dim{color:var(--dim)}
/* Titoli e numeri che contano: gradiente viola→rosa, mai su testo lungo. */
.chrome, .grad{
  background:linear-gradient(100deg,var(--acc),var(--acc2) 60%,var(--acc3));
  background-size:200%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:hueflow 8s ease-in-out infinite;
}
@keyframes hueflow{0%,100%{background-position:0% 50%} 50%{background-position:100% 50%}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .chrome, .grad{color:var(--acc); background:none}
}

/* ── Bottoni ─────────────────────────────────────────────────────────────
   Il primario si solleva: ombra che cresce e traslazione, come un tasto
   fisico premuto al contrario. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--fd); font-weight:600; font-size:14.5px;
  padding:13px 24px; border-radius:var(--r); border:none; cursor:pointer;
  text-decoration:none; min-height:46px;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s, background .2s, color .2s;
}
.btn:hover{text-decoration:none}
.btn.pri{
  background:linear-gradient(120deg,var(--acc),#8B6BF5);
  color:var(--accInk);
  box-shadow:0 10px 26px rgba(108,92,231,.32);
}
.btn.pri:hover{transform:translateY(-3px); box-shadow:0 18px 38px rgba(108,92,231,.42)}
.btn.pri:active{transform:translateY(-1px)}
.btn.ghost{background:rgba(255,255,255,.7); color:var(--ink);
           border:1.5px solid var(--line); box-shadow:var(--sh-bassa)}
.btn.ghost:hover{border-color:var(--acc); color:var(--acc); transform:translateY(-2px)}
.btn.danger{background:rgba(255,255,255,.7); color:var(--bad);
            border:1.5px solid rgba(224,69,95,.32)}
.btn.danger:hover{border-color:var(--bad); transform:translateY(-2px)}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none; box-shadow:none}
.btn.piccolo{font-size:13px; padding:9px 16px; min-height:38px; border-radius:12px}

/* ── Selettore di file ───────────────────────────────────────────────────
   Il controllo nativo scrive "Choose File" in inglese e non è traducibile:
   l'input vero resta nascosto, si mostra un'etichetta nostra.
   `!important` è voluto — senza, la regola dei campi lo faceva riapparire
   largo mezzo schermo e la pagina scorreva in orizzontale sul telefono. */
.carica{display:flex; flex-direction:column; gap:9px; width:100%}
.carica input[type=file], .file-nascosto{
  position:absolute !important; width:1px !important; height:1px !important;
  opacity:0 !important; min-height:0 !important; padding:0 !important;
  border:0 !important; overflow:hidden; clip:rect(0 0 0 0);
}
.carica .scegli{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--fd); font-weight:600; font-size:13.5px; cursor:pointer;
  background:rgba(255,255,255,.7); color:var(--ink);
  border:1.5px solid var(--line); border-radius:12px;
  padding:11px 18px; min-height:46px; transition:all .2s;
}
.carica .scegli:hover{border-color:var(--acc); color:var(--acc)}
.carica input[type=file]:focus-visible + .scegli{outline:2px solid var(--acc); outline-offset:2px}
.carica .nomefile{font-size:12px; color:var(--dim); text-align:center;
                  word-break:break-all; line-height:1.5}

/* ── Badge di stato ─────────────────────────────────────────────────────── */
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:600; padding:6px 13px; border-radius:999px;
  color:var(--mut); background:rgba(123,118,145,.10);
}
.badge i{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}
.badge.ok{color:var(--ok); background:rgba(18,169,123,.12)}
.badge.corso{color:var(--acc); background:rgba(108,92,231,.13)}
.badge.corso i{animation:pulse 1.4s ease-in-out infinite}
.badge.attesa{color:var(--warn); background:rgba(232,149,31,.14)}
.badge.bad{color:var(--bad); background:rgba(224,69,95,.12)}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.4; transform:scale(.7)}}

/* ── Form ────────────────────────────────────────────────────────────────
   Campi pieni e morbidi, senza contorni duri: il bordo compare solo quando
   il campo è in uso. */
.campo{display:flex; flex-direction:column; gap:7px; margin-bottom:17px}
.campo label{
  font-family:var(--fm); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.campo input, .campo select, .campo textarea{
  background:rgba(255,255,255,.82); border:1.5px solid var(--line);
  border-radius:14px; padding:13px 16px; color:var(--ink);
  font-family:var(--fb); font-size:14.5px; min-height:48px; width:100%;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color:var(--acc); background:#fff;
  box-shadow:0 0 0 4px rgba(108,92,231,.13);
}
.campo input::placeholder{color:var(--dim)}
.campo .aiuto{font-size:12.5px; color:var(--dim); line-height:1.55}
.campo.errore input, .campo.errore select{border-color:var(--bad)}
.campo .msg-errore{font-size:12.5px; color:var(--bad)}

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--acc); outline-offset:2px;
}

/* ── Tabelle ─────────────────────────────────────────────────────────────
   Senza griglia: solo righe separate da una linea sottilissima. */
table{width:100%; border-collapse:collapse; font-size:14px}
thead th{
  font-family:var(--fm); font-size:10.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--dim);
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--line);
}
tbody td{padding:15px 14px; border-bottom:1px solid rgba(120,110,180,.09)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(108,92,231,.045)}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ── Avvisi ─────────────────────────────────────────────────────────────── */
.avviso{
  border-radius:var(--r); padding:15px 19px; font-size:14px; line-height:1.6;
  background:rgba(108,92,231,.07); color:var(--mut); margin-bottom:20px;
  border-left:3px solid var(--acc);
}
.avviso.ok{background:rgba(18,169,123,.09); border-left-color:var(--ok)}
.avviso.attenzione{background:rgba(232,149,31,.10); border-left-color:var(--warn)}
.avviso.errore{background:rgba(224,69,95,.08); border-left-color:var(--bad)}
.avviso b{color:var(--ink)}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.nascosto{display:none !important}
.wrap{max-width:1180px; margin:0 auto; padding:0 26px; position:relative; z-index:2}
.centro{min-height:100vh; display:flex; align-items:center; justify-content:center;
        padding:44px 20px; position:relative; z-index:2}
.stack{display:flex; flex-direction:column; gap:16px}
.riga{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.spazio{flex:1}
.griglia{display:grid; gap:18px}
@media(min-width:760px){
  .griglia.due{grid-template-columns:1fr 1fr}
  .griglia.tre{grid-template-columns:repeat(3,1fr)}
}
/* Un figlio di griglia nasce con min-width:auto e non può restringersi sotto
   il proprio contenuto: basta un blocco di codice lungo e la colonna si
   gonfia buttando fuori pagina il resto. */
.griglia > *, .colonne > *, .builder > *, .due > *, .guscio > *{min-width:0}

/* ── Marchio ─────────────────────────────────────────────────────────────
   Il quadratino è l'unico posto dove i tre colori del mesh stanno insieme. */
.logo{display:flex; align-items:center; gap:11px; font-family:var(--fd);
      font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--ink)}
.logo:hover{text-decoration:none}
.logo b{
  width:30px; height:30px; border-radius:10px; flex:none;
  background:linear-gradient(135deg,var(--acc),var(--acc2) 55%,var(--acc3));
  box-shadow:0 6px 16px rgba(108,92,231,.34);
}
.logo small{
  font-family:var(--fm); font-size:9.5px; color:var(--dim);
  letter-spacing:.14em; display:block; margin-top:1px; font-weight:500;
}

/* ════════════════════════════════════════════════════════════════════════
   TRIDIMENSIONALE
   Vive in tre forme, in ordine di intensità. Nella vetrina si vede, nell'app
   si sente appena: chi lavora non deve inseguire oggetti che si muovono.
   ════════════════════════════════════════════════════════════════════════ */

/* 1. La scena: dà profondità a ciò che contiene. */
.scena{perspective:1500px; perspective-origin:50% 40%}

/* 2. La carta che ruota piano su due assi, con un riflesso che la percorre. */
.carta3d{
  position:relative; width:100%; max-width:360px; aspect-ratio:1.62;
  border-radius:22px; transform-style:preserve-3d;
  animation:cardspin 9s ease-in-out infinite;
  background:linear-gradient(130deg,var(--acc),#8B6BF5 42%,var(--acc2) 78%,var(--acc3));
  box-shadow:0 34px 70px rgba(108,92,231,.34), 0 8px 20px rgba(33,29,51,.10);
  padding:24px; display:flex; flex-direction:column; justify-content:space-between;
  color:#fff;
}
.carta3d::before{
  content:''; position:absolute; inset:0; border-radius:22px; pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 46%,transparent 60%);
  background-size:260%; animation:sweep 4.5s linear infinite;
}
.carta3d > *{position:relative; z-index:2}
@keyframes cardspin{
  0%,100%{transform:rotateY(-17deg) rotateX(7deg)}
  50%    {transform:rotateY(17deg)  rotateX(-5deg)}
}
@keyframes sweep{0%{background-position:200% 0} 100%{background-position:-60% 0}}

/* 3. Micro-inclinazione: la card si alza e si gira di un grado al passaggio
      del mouse. Solo dove c'è un puntatore — su un dito non ha senso. */
@media (hover:hover) and (pointer:fine){
  .tilt{transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
        transform-style:preserve-3d}
  .tilt:hover{transform:translateY(-6px) rotateX(2deg) rotateY(-2deg);
              box-shadow:var(--sh-alta)}
}

/* Il foglio del documento: bianco pieno, sollevato, appena inclinato. */
.foglio3d{
  background:#fff; border-radius:18px; box-shadow:0 30px 64px rgba(108,92,231,.22);
  transform:rotateX(4deg) rotateY(-3deg); transform-style:preserve-3d;
  animation:fluttua 7s ease-in-out infinite;
}
@keyframes fluttua{0%,100%{translate:0 0} 50%{translate:0 -10px}}

/* ── Movimento: si spegne tutto su richiesta del sistema. Obbligatorio. ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .carta3d, .foglio3d{transform:none !important}
}