@font-face{
  font-family:'InterVar';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/sito/inter.woff2) format('woff2');
}

/* ---------------------------------------------------------------
   La palette nasce dal gestionale, non si impone sopra.
   verde = contato, tornato, a posto.  rosso = manca, da cercare.
   Il rosso non decora mai: se comparisse accanto a qualcosa che va
   bene, insegnerebbe a non fidarsi del rosso in magazzino.
   --------------------------------------------------------------- */
:root{
  --bianco:#FFFFFF;
  --carta:#FAFAFA;
  --inchiostro:#09090B;
  --grigio:#71717A;
  --riga:#E4E4E7;
  --riga-forte:#D4D4D8;
  --verde:#15803D;
  --verde-vivo:#16A34A;
  --verde-velo:#F0FDF4;
  --rosso:#DC2626;
  --rosso-velo:#FEF2F2;
  --su-verde:#FFFFFF;

  --misura:64ch;
  --gutter:clamp(20px,5vw,48px);
  --colonna:1120px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bianco:#09090B; --carta:#131316; --inchiostro:#FAFAFA; --grigio:#A1A1AA;
    --riga:#27272A; --riga-forte:#3F3F46;
    --verde:#4ADE80; --verde-vivo:#22C55E; --verde-velo:#0B1C12;
    --rosso:#F87171; --rosso-velo:#1C0F0F; --su-verde:#052E16;
  }
}
:root[data-theme="dark"]{
  --bianco:#09090B; --carta:#131316; --inchiostro:#FAFAFA; --grigio:#A1A1AA;
  --riga:#27272A; --riga-forte:#3F3F46;
  --verde:#4ADE80; --verde-vivo:#22C55E; --verde-velo:#0B1C12;
  --rosso:#F87171; --rosso-velo:#1C0F0F; --su-verde:#052E16;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bianco);
  color:var(--inchiostro);
  font-family:'InterVar',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.6;
  font-feature-settings:'zero' 1;   /* lo zero barrato: è come si leggono i codici */
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-underline-offset:.18em; text-decoration-thickness:1px; }

.salta{
  position:absolute; left:-9999px;
  background:var(--inchiostro); color:var(--bianco);
  padding:12px 18px; z-index:60;
}
.salta:focus{ left:12px; top:12px; }

/* ---- impalcatura ---- */
.bordo{ height:10px; background:var(--inchiostro); }
.fascia{ border-bottom:1px solid var(--riga); }
.dentro{
  max-width:var(--colonna);
  margin:0 auto;
  padding:clamp(52px,8vw,92px) var(--gutter);
}
.dentro.stretto{ padding-top:clamp(40px,6vw,64px); padding-bottom:clamp(40px,6vw,64px); }
.testata .dentro{ padding-bottom:clamp(40px,6vw,64px); }

/* ---- tipografia: tre ruoli distinti da una sola famiglia ---- */
.etichetta{                 /* la scritta a stampino sul flight case */
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grigio); margin:0 0 20px;
  display:flex; align-items:center; gap:10px;
}
.etichetta::before{ content:""; width:22px; height:2px; background:var(--inchiostro); flex:none; }
.etichetta.verde::before{ background:var(--verde-vivo); }

h1{
  font-size:clamp(33px,5.2vw,58px); line-height:1.05; letter-spacing:-.035em;
  font-weight:800; margin:0 0 22px; max-width:19ch; text-wrap:balance;
}
h2{
  font-size:clamp(26px,3.4vw,40px); line-height:1.11; letter-spacing:-.028em;
  font-weight:800; margin:0 0 20px; max-width:22ch; text-wrap:balance;
}
h3{ font-size:19px; line-height:1.3; letter-spacing:-.015em; font-weight:700; margin:0 0 8px; }
h3 a{ text-decoration-color:var(--riga-forte); }
p{ margin:0 0 18px; max-width:var(--misura); }
p:last-child{ margin-bottom:0; }
.guida{ font-size:19px; color:var(--grigio); line-height:1.55; }
.piccolo{ font-size:14px; color:var(--grigio); line-height:1.5; }
.detto{ font-size:16px; font-weight:600; margin:0; }
strong{ font-weight:700; }
em{ font-style:italic; }

.cifra{
  font-variant-numeric:tabular-nums; font-feature-settings:'zero' 1,'tnum' 1;
  font-weight:800; letter-spacing:-.04em; line-height:.94; display:block;
}
.cifra.enorme{ font-size:clamp(50px,8vw,88px); }
.cifra.grande{ font-size:clamp(33px,4.4vw,46px); }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:'zero' 1,'tnum' 1; }

.daempire{
  background:var(--carta); border:1px dashed var(--riga-forte);
  padding:1px 7px; font-size:.92em; color:var(--grigio);
}
.avviso{
  border-left:3px solid var(--riga-forte); background:var(--carta);
  padding:16px 20px; font-size:15px; max-width:var(--misura);
}

/* ---- barra ---- */
.barra{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:16px;
  padding:11px var(--gutter);
  background:color-mix(in srgb,var(--bianco) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--riga);
}
.marchio{ font-size:15px; font-weight:800; letter-spacing:-.02em; text-decoration:none; }
.marchio span{ color:var(--verde); }
.voci{ display:none; gap:20px; margin-left:auto; }
.voci a{
  font-size:14px; font-weight:600; text-decoration:none; color:var(--grigio);
  padding-bottom:2px; border-bottom:2px solid transparent;
}
.voci a:hover{ color:var(--inchiostro); }
.voci a.qui{ color:var(--inchiostro); border-bottom-color:var(--verde-vivo); }
.barra .bottone{ padding:9px 16px; font-size:14px; margin-left:auto; }
.menu{
  margin-left:auto; font-family:inherit; font-size:13px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  background:transparent; color:var(--inchiostro);
  border:1px solid var(--riga-forte); border-radius:2px; padding:8px 13px; cursor:pointer;
}
.voci-mobile{
  display:flex; flex-direction:column;
  border-bottom:1px solid var(--riga); background:var(--carta);
}
.voci-mobile a{
  padding:13px var(--gutter); font-size:15px; font-weight:600;
  text-decoration:none; border-bottom:1px solid var(--riga);
}
.voci-mobile a.qui{ color:var(--verde); }
@media(min-width:1000px){
  .voci{ display:flex; }
  .barra .bottone{ margin-left:0; }
  .menu,.voci-mobile{ display:none !important; }
}

/* ---- pulsanti: il verde è l'unico invito. cliccare = « a posto » ---- */
.azioni{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:28px; }
.bottone{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--verde-vivo); color:var(--su-verde);
  font-family:inherit; font-size:16px; font-weight:700; letter-spacing:-.01em;
  padding:14px 24px;
  border:1px solid var(--verde-vivo); border-radius:2px;
  text-decoration:none; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.bottone:hover{ background:var(--verde); border-color:var(--verde); transform:translateY(-1px); }
.bottone.piano{ background:transparent; color:var(--inchiostro); border-color:var(--riga-forte); }
.bottone.piano:hover{ background:var(--carta); border-color:var(--inchiostro); transform:translateY(-1px); }
a:focus-visible,.bottone:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--verde-vivo); outline-offset:3px;
}

/* ---- casse rettangolari, filo di 1px, nessuna ombra ---- */
.cassa{ border:1px solid var(--riga); background:var(--carta); padding:26px; }
.griglia{ display:grid; gap:1px; background:var(--riga); border:1px solid var(--riga); }
.griglia > *{ background:var(--bianco); padding:26px; }
@media(min-width:760px){
  .griglia.tre{ grid-template-columns:repeat(3,1fr); }
  .griglia.due{ grid-template-columns:repeat(2,1fr); }
}

/* ---- passi numerati: l'ordine è informazione, non decorazione ---- */
.passi{ list-style:none; counter-reset:passo; margin:0; padding:0;
        display:flex; flex-direction:column; gap:1px;
        background:var(--riga); border:1px solid var(--riga); }
.passi li{ counter-increment:passo; background:var(--bianco); padding:22px 26px 22px 68px; position:relative; }
.passi li::before{
  content:counter(passo,decimal-leading-zero);
  position:absolute; left:26px; top:22px;
  font-size:13px; font-weight:800; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; color:var(--grigio);
}
.passi p{ margin:0; font-size:15.5px; color:var(--grigio); }
.passi h3{ margin-bottom:5px; }

/* ---- LA SPUNTA: la schermata vera, che funziona ---- */
.spunta{
  border:1px solid var(--riga-forte); background:var(--bianco);
  max-width:640px; font-variant-numeric:tabular-nums;
}
.spunta-testa{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:14px 18px; border-bottom:1px solid var(--riga);
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--grigio);
}
.spunta-lettore{
  display:flex; align-items:center; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--riga); background:var(--carta);
}
.spunta-campo{
  flex:1; min-width:0;
  font-family:inherit; font-size:15px; font-weight:600;
  color:var(--inchiostro); background:var(--bianco);
  border:1px solid var(--riga-forte); border-radius:2px;
  padding:9px 12px; font-variant-numeric:tabular-nums;
}
.spunta-campo::placeholder{ color:var(--grigio); font-weight:500; }
.spunta-riga{
  display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:center;
  padding:12px 18px;
  border-bottom:1px solid var(--riga); border-left:3px solid transparent;
  transition:background .25s ease, border-color .25s ease;
}
.spunta-riga .voce{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.spunta-riga .conto{ font-size:15px; font-weight:700; color:var(--grigio); white-space:nowrap; }
.spunta-riga .stato{
  grid-column:1/-1; font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--grigio);
}
.spunta-riga[data-stato="fatto"]{ background:var(--verde-velo); border-left-color:var(--verde-vivo); }
.spunta-riga[data-stato="fatto"] .conto,
.spunta-riga[data-stato="fatto"] .stato{ color:var(--verde); }
.spunta-riga[data-stato="manca"]{ background:var(--rosso-velo); border-left-color:var(--rosso); }
.spunta-riga[data-stato="manca"] .conto,
.spunta-riga[data-stato="manca"] .stato{ color:var(--rosso); }

.spunta-piede{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:14px; padding:16px 18px;
}
.spunta-totale{ font-size:15px; font-weight:700; letter-spacing:-.01em; }
.spunta-totale em{ font-style:normal; color:var(--verde); }
.spunta-totale b{ color:var(--rosso); }
.mini{
  font-family:inherit; font-size:13px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--inchiostro); background:transparent;
  border:1px solid var(--riga-forte); border-radius:2px;
  padding:9px 14px; cursor:pointer;
}
.mini:hover{ border-color:var(--inchiostro); }

.legenda{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:20px; }
.chiave{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; }
.bollo{ width:12px; height:12px; flex:none; border-radius:2px; }
.bollo.v{ background:var(--verde-vivo); }
.bollo.r{ background:var(--rosso); }
.bollo.g{ background:var(--riga-forte); }

/* ---- tabelle: quelle che il titolare gira al commercialista ---- */
.tabella-scorre{ overflow-x:auto; border:1px solid var(--riga); }
table{ border-collapse:collapse; width:100%; min-width:520px; font-size:15px; }
caption{ text-align:left; padding:14px 18px; caption-side:bottom; border-top:1px solid var(--riga); }
th,td{ text-align:left; padding:13px 18px; border-bottom:1px solid var(--riga); vertical-align:baseline; }
thead th{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grigio); background:var(--carta);
}
td.n,th.n{
  text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums; font-feature-settings:'zero' 1,'tnum' 1;
}
tbody tr:last-child td{ border-bottom:0; }
tr.somma td{ font-weight:800; background:var(--carta); border-top:2px solid var(--inchiostro); }
tr.somma td.nostro{ color:var(--verde); }

/* ---- listino ---- */
.piano{ display:flex; flex-direction:column; gap:2px; }
.piano .nome{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--grigio); }
.piano .prezzo{ font-size:38px; font-weight:800; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.piano .al{ font-size:15px; font-weight:600; letter-spacing:0; color:var(--grigio); }
.piano ul{ margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; font-size:14.5px; }
.piano li{ padding-left:18px; position:relative; color:var(--grigio); }
.piano li::before{ content:"—"; position:absolute; left:0; color:var(--riga-forte); }
.griglia > .consigliato{ position:relative; padding-top:56px; }
.consigliato::after{
  content:"Il piano di un service da cinque persone";
  position:absolute; top:0; left:0; right:0;
  background:var(--verde-vivo); color:var(--su-verde);
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 26px;
}

/* ---- domande ---- */
.domande{ margin:0; display:flex; flex-direction:column; gap:1px;
          background:var(--riga); border:1px solid var(--riga); }
.domande dt{ background:var(--bianco); padding:20px 26px 0; font-size:18px; font-weight:700; letter-spacing:-.015em; }
.domande dd{ background:var(--bianco); margin:0; padding:8px 26px 20px; color:var(--grigio); max-width:var(--misura); }

/* ---- pagine di solo testo ---- */
.prosa h2{ font-size:22px; margin:34px 0 10px; max-width:none; }
.prosa h2:first-of-type{ margin-top:26px; }
.prosa p{ font-size:16px; }

/* ---- posto per la foto vera ---- */
.foto{ margin:0; }
.foto-vano{
  border:1px dashed var(--riga-forte); background:var(--carta);
  aspect-ratio:4/3;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px; gap:6px;
}
.foto-vano .etichetta{ margin:0; }
.foto-vano p{ font-size:14px; color:var(--grigio); margin:0; }

/* ---- piede ---- */
footer{ background:var(--carta); border-top:1px solid var(--riga); }
.piede-griglia{ display:grid; gap:32px; grid-template-columns:repeat(2,1fr); }
@media(min-width:760px){ .piede-griglia{ grid-template-columns:repeat(4,1fr); } }
.piede-griglia ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.piede-griglia a{ font-size:14.5px; text-decoration:none; }
.piede-griglia a:hover{ text-decoration:underline; }
.piede-coda{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--riga);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 32px;
}
.piede-coda p{ max-width:52ch; margin:0; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ===============================================================
   ACCESSO E AREA DEL TITOLARE

   Stessi materiali del resto: filo di 1px, nessuna ombra, il verde
   solo dove si clicca. Un modulo che sembra un'altra applicazione
   fa dubitare chi sta per scrivere la propria password.
   =============================================================== */

/* ---- coda della barra: lingua, accesso, prova ---- */
.coda-barra{ display:none; margin-left:auto; align-items:center; gap:14px; }
.coda-barra .bottone{ margin-left:0; }
@media(min-width:1000px){ .coda-barra{ display:flex; } }

.lingue{ display:flex; align-items:center; gap:8px; }
.lingue a{
  font-size:12px; font-weight:700; letter-spacing:.08em;
  text-decoration:none; color:var(--grigio); padding:3px 2px;
  border-bottom:2px solid transparent;
}
.lingue a:hover{ color:var(--inchiostro); }
.lingue a.qui{ color:var(--inchiostro); border-bottom-color:var(--verde-vivo); }

.accesso{
  font-size:14px; font-weight:600; text-decoration:none; color:var(--grigio);
  white-space:nowrap;
}
.accesso:hover{ color:var(--inchiostro); text-decoration:underline; }

/* ---- moduli ---- */
.modulo{ max-width:30rem; }
.modulo.largo{ max-width:44rem; }
.modulo h1{ font-size:clamp(28px,4vw,40px); margin-bottom:14px; }
.coda-modulo{ margin-top:26px; padding-top:20px; border-top:1px solid var(--riga); }

.campi{ display:flex; flex-direction:column; gap:20px; margin-top:28px; }
.campi .etichetta{ margin:10px 0 -6px; }

.campo{ display:flex; flex-direction:column; gap:6px; }
.campo label{ font-size:14px; font-weight:700; letter-spacing:-.01em; }
.casella{
  font-family:inherit; font-size:16px; font-weight:500;
  color:var(--inchiostro); background:var(--bianco);
  border:1px solid var(--riga-forte); border-radius:2px;
  padding:11px 13px; width:100%;
  font-variant-numeric:tabular-nums;
}
.casella:focus{ outline:2px solid var(--verde-vivo); outline-offset:2px; border-color:var(--verde-vivo); }
.casella[aria-invalid="true"]{ border-color:var(--rosso); background:var(--rosso-velo); }
select.casella{ appearance:none; background-image:none; cursor:pointer; }

.aiuto{ font-size:13.5px; color:var(--grigio); margin:0; line-height:1.45; }
.errore{ font-size:13.5px; color:var(--rosso); font-weight:600; margin:0; }

.scelta{ display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.45; }
.scelta input{ margin-top:3px; width:17px; height:17px; accent-color:var(--verde-vivo); flex:none; }

/* ---- configuratore ---- */
.configuratore{ display:flex; flex-direction:column; gap:22px; margin-top:26px;
                border:1px solid var(--riga); background:var(--carta); padding:26px; }
.griglia-conf{ display:grid; gap:20px; }
@media(min-width:620px){ .griglia-conf{ grid-template-columns:repeat(2,1fr); } }

.periodo{ border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.periodo legend{ font-size:14px; font-weight:700; padding:0; margin-bottom:4px; }
.periodo em{ font-style:normal; color:var(--verde); font-weight:700; }

.conto{ border-top:1px solid var(--riga-forte); padding-top:20px; }
.conto .cifra{ font-size:clamp(30px,4vw,42px); }
.conto .etichetta{ margin-bottom:10px; }

/* ---- le aziende del titolare ---- */
.azienda{ display:flex; flex-direction:column; gap:4px; }
.azienda .nome{ font-size:21px; font-weight:800; letter-spacing:-.02em; }
.azienda .stato{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; margin:4px 0 0; }
.azienda ul{ margin:14px 0 0; padding:0; list-style:none;
             display:flex; flex-direction:column; gap:6px; font-size:14.5px; color:var(--grigio); }
.azienda .azioni{ margin-top:20px; }

.dettagli{ list-style:none; margin:18px 0 0; padding:0;
           display:flex; flex-direction:column; gap:1px; background:var(--riga); border:1px solid var(--riga); }
.dettagli li{ background:var(--bianco); padding:11px 16px;
              display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; font-size:14.5px; }
.dettagli span{ color:var(--grigio); }
.dettagli strong{ display:flex; align-items:center; gap:8px; }

.avviso.rosso{ border-left-color:var(--rosso); background:var(--rosso-velo); }