/* ==========================================================================
   Studio Tratto — presentazioni
   Un solo foglio per entrambe. Font di sistema, nessuna risorsa esterna.
   Pensato prima per la stampa: ogni sezione è una pagina.
   ========================================================================== */
:root{
  --ink:#0B0E14; --ink-2:#1A1F29;
  --accent:#0FBFAE; --accent-text:#0A7A70; --accent-soft:#E6F7F5; --accent-ink:#04211E;
  --canvas:#FAFAF9; --surface:#FFFFFF; --surface-2:#F2F2F0;
  --text:#10141A; --text-2:#5C6470; --text-3:#7C838C;
  --line:#E6E8EB; --line-strong:#CDD2D8;
  --ok-text:#12764A; --warn:#C9821A; --warn-text:#8A5709; --warn-soft:#FCF1E1;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:#E9E9E6;color:var(--text);
  font-family:var(--font);font-size:10.5pt;line-height:1.55;
  -webkit-font-smoothing:antialiased;hyphens:none;-webkit-hyphens:none;
}
h1,h2,h3,h4{margin:0;line-height:1.16;letter-spacing:-.02em;font-weight:650;break-after:avoid;break-inside:avoid;}
p,ul,ol,table{margin:0;}
ul,ol{padding:0;list-style:none;}
b,strong{font-weight:650;}
a{color:var(--accent-text);text-decoration:none;}
svg{display:block;}

/* ------------------------------------------------------------- la pagina */
.pagina{
  width:210mm;min-height:297mm;margin:0 auto 8mm;background:var(--surface);
  padding:17mm 18mm 15mm;position:relative;
  display:flex;flex-direction:column;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  break-after:page;overflow:hidden;
}
.pagina:last-child{break-after:auto;margin-bottom:0;}
.pagina--scura{background:var(--ink);color:#EDEFF2;}
.pagina--scura h1,.pagina--scura h2,.pagina--scura h3{color:#fff;}

.testa{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:7mm;margin-bottom:8mm;border-bottom:1px solid var(--line);}
.marca{display:flex;align-items:center;gap:8px;font-weight:650;font-size:11pt;letter-spacing:-.02em;}
.marca svg{width:22px;height:22px;flex:0 0 auto;}
.marca--cop{font-size:12pt;color:#fff;gap:9px;}
.marca--cop svg{width:26px;height:26px;}
.testa .sez{font-family:var(--mono);font-size:7.5pt;letter-spacing:.11em;text-transform:uppercase;color:var(--text-2);}

.piede{margin-top:auto;padding-top:6mm;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:12px;
  font-size:7.5pt;color:var(--text-3);font-family:var(--mono);letter-spacing:.05em;}
.pagina--scura .piede{border-top-color:rgba(255,255,255,.16);color:#8E97A4;}

.occhiello{font-family:var(--mono);font-size:8pt;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:4mm;
  display:flex;align-items:center;gap:8px;}
.occhiello::before{content:"";width:16px;height:1.5px;background:var(--accent);}
.pagina--scura .occhiello{color:#3EE0D0;}
.pagina--scura .occhiello::before{background:#3EE0D0;}

h1{font-size:24pt;letter-spacing:-.028em;}
h2{font-size:17pt;margin-bottom:4mm;}
h3{font-size:11.5pt;}
h4{font-size:10pt;}
.guida{font-size:11.5pt;line-height:1.5;color:var(--text-2);max-width:62ch;}
.pagina--scura .guida{color:#B7BEC9;}
.nota{font-size:8pt;color:var(--text-2);line-height:1.5;}
.mt{margin-top:5mm;} .mt2{margin-top:8mm;} .mb{margin-bottom:5mm;} .mb-s{margin-bottom:3mm;}
.spinto{margin-top:auto;}
.in-blocco{display:inline-block;}
.nota--chiara{color:#98A1AE;}
.nota--tenue{color:#8E97A4;}
.nota--vicina{margin-top:1.5mm;}
.riga-titolo{display:flex;align-items:baseline;justify-content:space-between;gap:8mm;flex-wrap:wrap;}
.riga-titolo h2{margin-bottom:2mm;}
.prezzo-piano{font-size:15pt;font-weight:660;letter-spacing:-.03em;margin:1mm 0 3mm;}
.vl--piccolo{font-size:9.5pt !important;}

/* ------------------------------------------------------------- copertina */
.copertina{justify-content:center;}
.copertina h1{font-size:32pt;max-width:16ch;margin-bottom:6mm;}
.copertina .guida{font-size:13pt;max-width:52ch;}
.cop-cifre{display:flex;gap:10mm;margin-top:12mm;flex-wrap:wrap;}
.cop-cifre div{border-left:2px solid var(--accent);padding-left:5mm;}
.cop-cifre b{display:block;font-size:19pt;letter-spacing:-.03em;color:#fff;}
.cop-cifre span{font-size:8.5pt;color:#98A1AE;}
.cop-piede{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:14px;}
.cop-recapiti{font-size:9pt;color:#B7BEC9;line-height:1.7;}
.cop-recapiti b{color:#fff;display:block;font-size:10pt;margin-bottom:2mm;}
.cop-qr{background:#fff;padding:3mm;border-radius:3mm;}
.cop-qr svg{width:26mm;height:26mm;}
.cop-qr p{font-size:7pt;color:var(--text-2);text-align:center;margin-top:1.5mm;font-family:var(--mono);letter-spacing:.04em;}

/* --------------------------------------------------------------- griglie */
.griglia{display:grid;gap:5mm;}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:repeat(3,1fr);}
.g5{grid-template-columns:repeat(5,1fr);}
.scheda{background:var(--surface-2);border-radius:3mm;padding:5mm;break-inside:avoid;}
.scheda h3,.scheda h4{margin-bottom:2mm;}
.scheda p{font-size:8.5pt;color:var(--text-2);line-height:1.5;}
.pagina--scura .scheda{background:rgba(255,255,255,.06);}
.pagina--scura .scheda p{color:#B7BEC9;}

.passi{counter-reset:ps;display:grid;grid-template-columns:repeat(5,1fr);gap:4mm;}
.passo{position:relative;padding-top:9mm;break-inside:avoid;}
.passo::before{counter-increment:ps;content:counter(ps,decimal-leading-zero);
  position:absolute;top:0;left:0;width:7mm;height:7mm;border-radius:50%;
  background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:7pt;font-weight:600;}
.passo h4{font-size:9.5pt;margin-bottom:1.5mm;}
.passo p{font-size:8pt;color:var(--text-2);line-height:1.45;}

/* -------------------------------------------------------------- livelli */
.livelli{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm;align-items:start;}
.livello{border:1.2pt solid var(--line-strong);border-radius:3mm;padding:5mm;break-inside:avoid;
  display:flex;flex-direction:column;height:100%;}
.livello--flag{border-color:var(--ink);background:var(--surface-2);}
.liv-flag{font-size:7.5pt;font-weight:640;background:var(--accent-soft);color:var(--accent-text);
  border:.8pt solid rgba(10,143,130,.3);border-radius:99px;padding:1mm 3mm;
  align-self:flex-start;margin-bottom:2.5mm;line-height:1.3;}
.liv-nome{font-size:12pt;font-weight:650;}
.liv-prezzo{font-size:22pt;font-weight:660;letter-spacing:-.035em;line-height:1.05;margin:1mm 0 0;}
.liv-tipo{font-size:7.5pt;color:var(--text-2);}
.liv-pagine{display:inline-block;align-self:flex-start;font-size:7.5pt;font-weight:600;
  background:var(--surface-2);color:var(--text-2);padding:1mm 3mm;border-radius:99px;margin:2.5mm 0 3mm;}
.livello--flag .liv-pagine{background:#fff;}
.liv-pitch{font-size:8.5pt;color:var(--text-2);margin-bottom:3mm;line-height:1.45;}
.liv-blocco{margin-bottom:3mm;}
.liv-blocco > b{display:block;font-family:var(--mono);font-size:6.5pt;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:1.5mm;}
.liv-blocco li{font-size:8pt;padding:.6mm 0 .6mm 4mm;position:relative;line-height:1.4;}
.liv-blocco li::before{content:"";position:absolute;left:0;top:2.4mm;width:2.4mm;height:.8pt;background:var(--accent-text);}
.liv-blocco--fuori li{color:var(--text-2);}
.liv-blocco--fuori li::before{background:var(--text-3);}
.liv-tempi{font-size:7.5pt;color:var(--text-2);margin-top:auto;padding-top:3mm;line-height:1.5;}

/* ------------------------------------------------------------- confronto */
table.cmp{width:100%;border-collapse:collapse;}
.cmp th,.cmp td{padding:1.8mm 2.5mm;text-align:left;font-size:8pt;border-bottom:.6pt solid var(--line);}
.cmp thead th{background:var(--surface-2);font-weight:650;font-size:9pt;}
.cmp td.c,.cmp th.c{text-align:center;width:16%;}
.cmp .flag{background:var(--accent-soft);}
.cmp tfoot td{font-weight:650;font-size:11pt;padding-top:3mm;}
.cmp tfoot td:first-child{font-size:8pt;}
.si{width:3.6mm;height:3.6mm;display:inline-block;fill:none;stroke:var(--ok-text);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;}
.no{display:inline-block;width:3.4mm;height:.8pt;background:var(--text-3);vertical-align:middle;}

/* ---------------------------------------------------------------- elenchi */
.elenco li{font-size:8.6pt;padding:.6mm 0 .6mm 5mm;position:relative;color:var(--text-2);line-height:1.38;}
.elenco li::before{content:"";position:absolute;left:0;top:3mm;width:3mm;height:.8pt;background:var(--accent-text);}
.elenco--due{columns:2;column-gap:8mm;}
.elenco--due li{break-inside:avoid;}
.pagina--scura .elenco li{color:#B7BEC9;}

.avviso{background:var(--surface-2);border-left:2.5pt solid var(--accent);border-radius:0 2mm 2mm 0;
  padding:4mm 5mm;font-size:8.5pt;color:var(--text-2);line-height:1.5;break-inside:avoid;}
.avviso b{color:var(--text);}
.avviso--attenzione{background:var(--warn-soft);border-left-color:var(--warn);color:var(--warn-text);}
.avviso--attenzione b{color:var(--warn-text);}
.avviso--chiaro{background:rgba(255,255,255,.07);border-left-color:#3EE0D0;color:#B7BEC9;}
.avviso--chiaro b{color:#fff;}

/* --------------------------------------------------------------- domande */
.domande{columns:2;column-gap:8mm;}
.domanda{break-inside:avoid;margin-bottom:4mm;}
.domanda h4{font-size:8.5pt;margin-bottom:1mm;}
.domanda p{font-size:8pt;color:var(--text-2);line-height:1.45;}

/* ------------------------------------------------------------------- QR */
.qr-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:5mm;}
.qr-blocco{text-align:center;break-inside:avoid;}
.qr-blocco .cornice{background:#fff;border:.8pt solid var(--line);border-radius:2mm;padding:3mm;display:inline-block;}
.qr-blocco svg{width:30mm;height:30mm;}
.qr-blocco h4{font-size:9pt;margin:2.5mm 0 1mm;}
.qr-blocco p{font-size:7.5pt;color:var(--text-2);line-height:1.4;}

/* --------------------------------------------------------------- contatti */
.centro{text-align:center;}
.mt-cop{margin-top:4mm;}
.contatti{display:grid;grid-template-columns:1.1fr .9fr;gap:8mm;align-items:start;}
.recapito{display:flex;gap:4mm;padding:3.5mm 0;border-top:.6pt solid rgba(255,255,255,.16);}
.recapito:first-child{border-top:none;}
.recapito svg{width:5mm;height:5mm;flex:0 0 auto;margin-top:1mm;fill:none;stroke:#3EE0D0;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.recapito .et{font-family:var(--mono);font-size:7pt;letter-spacing:.09em;text-transform:uppercase;color:#8E97A4;}
.recapito .vl{font-size:11pt;font-weight:640;color:#fff;}

/* ------------------------------------------------------------------ indice */
.indice li{display:flex;gap:4mm;align-items:baseline;padding:2mm 0;border-bottom:.6pt dotted var(--line);font-size:9.5pt;}
.indice .n{font-family:var(--mono);font-size:8pt;color:var(--accent-text);width:8mm;flex:0 0 auto;}
.indice .t{font-weight:600;}
.indice .d{color:var(--text-2);font-size:8.5pt;margin-left:auto;text-align:right;max-width:52%;}

/* =========================================================== schermo */
@media screen{
  body{padding:8mm 0;}
  .barra{
    position:sticky;top:0;z-index:10;background:var(--ink);color:#fff;
    padding:10px 18px;display:flex;gap:14px;align-items:center;justify-content:center;
    font-size:13px;flex-wrap:wrap;margin:-8mm 0 8mm;
  }
  .barra a{color:#3EE0D0;font-weight:600;}
}
@media print{
  .barra{display:none !important;}
  body{background:#fff;}
  /* margini di pagina a zero e riquadro interno a tutta pagina:
     così i fondi scuri arrivano davvero al bordo del foglio */
  .pagina{box-shadow:none;margin:0;width:210mm;min-height:296mm;padding:16mm 17mm 14mm;overflow:visible;}
}
@page{ size:A4; margin:0; }