/* adadò — foglio di stile del brand (kit ADADO/brand-adado/kit/adado).
   Fonte: design system https://claude.ai/artifact/MHhQCfVvZpG1NXNAy6GA5B.
   Uso: copia la cartella adado/ accanto all'HTML e <link rel="stylesheet" href="adado/adado.css">. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; src: url(fonts/Fraunces-normal-latin.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; src: url(fonts/Fraunces-italic-latin.woff2) format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; src: url(fonts/HankenGrotesk-normal-latin.woff2) format("woff2"); }

:root {
  --blu: #0000ff; --blu-profondo: #2414d6; --blu-testo: #0000ff; --lavanda: #9b9bff; --tinta-blu: #ebebff;
  --arancio: #fb4e1a; --arancio-testo: #d23608; --pesca: #ffd2bd;
  --ink: #0e1238; --testo-2: #3d4466; --muted: #5d6080;
  --superficie: #ffffff; --tinta: #f3f5fb; --carta: #f4f3ef;
  --linea: #dedde6; --linea-card: #e7e9f2; --linea-forte: #b9b8c6; --neutro-barra: #c9c8d6;
  --verde: #16934f; --su-blu: #ffffff;
  --font-display: "Fraunces", Georgia, serif; --font-sans: "Hanken Grotesk", system-ui, sans-serif;
  --space-1: 7px; --space-2: 11px; --space-3: 19px; --space-4: 23px; --space-5: 34px; --space-6: 68px; --space-slide: 136px;
  --radius-s: 5px; --radius-m: 11px; --radius-l: 15px; --radius-xl: 30px; --radius-pill: 999px;
  --rule-hair: 1px; --rule-accento: 5px; --rule-testata: 8px;
  --ombra-card: 0 0 0 2px #e7e9f2; --ombra-card-evidenza: 0 0 0 5px #0000ff; --ombra-screenshot: 0 50px 90px -40px rgba(14,18,56,.5), 0 0 0 2px rgba(14,18,56,.06);
}
html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
* { box-sizing: border-box; }

/* Pagine A4 per PDF: <section class="ad-page ad-cover"> … <section class="ad-page"> */
@page { size: A4; margin: 0; }
.ad-page { position: relative; width: 210mm; height: 297mm; padding: 20mm 18mm 24mm; overflow: hidden; page-break-after: always; break-after: page; background: var(--superficie); }
.ad-page:last-child { page-break-after: auto; break-after: auto; }
.ad-cover { background: var(--blu); color: var(--su-blu); padding: 22mm 20mm; display: flex; flex-direction: column; }
.ad-cover::after { content: ""; position: absolute; right: -40mm; top: 58mm; width: 150mm; height: 150mm; border-radius: 50%; border: 22mm solid rgba(255,255,255,.07); }
.ad-cover > * { position: relative; z-index: 1; }
.ad-cover .ad-logo { width: 46mm; }
.ad-cover .ad-h1 { color: #fff; font-size: 44pt; margin: 34mm 0 6mm; max-width: 150mm; }
.ad-cover .ad-h1 em { color: var(--pesca); }
.ad-cover .ad-eyebrow { color: #fff; opacity: .85; font-size: 8pt; }
.ad-cover .ad-sub { font-size: 13pt; line-height: 1.5; opacity: .92; margin: 0; }
.ad-cover .ad-hero { margin-top: auto; }
.ad-cover-foot { display: flex; justify-content: space-between; font-size: 9pt; margin-top: 9mm; opacity: .85; }
.ad-page > .ad-footer { position: absolute; left: 18mm; right: 18mm; bottom: 11mm; }
/* Documenti a flusso continuo (senza .ad-page): margini di stampa standard */
.ad-flusso { padding: 0; }
@media print { .ad-flusso { margin: 18mm; } }

body { margin: 0; background: var(--superficie); color: var(--ink); font-family: var(--font-sans); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.ad-pad { padding: 20px; }
.ad-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.ad-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }

/* Logo: maschera sul wordmark SVG, prende il colore dal fondo */
.ad-logo { display: inline-block; aspect-ratio: 183.3 / 55.8; width: 90px; background: var(--blu-testo); -webkit-mask: url(logo/adado-wordmark-blu.svg) no-repeat center / contain; mask: url(logo/adado-wordmark-blu.svg) no-repeat center / contain; }
.ad-logo.bianco { background: var(--su-blu); }
.ad-logo.arancio { background: var(--arancio); }

/* Occhiello */
.ad-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--arancio-testo); margin: 0 0 var(--space-3); }
.ad-eyebrow.trattino { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: .12em; }
.ad-eyebrow.trattino::before { content: ""; width: 20px; height: 2px; background: currentColor; border-radius: 1px; }
.ad-blu .ad-eyebrow { color: var(--pesca); }

/* Titoli: tondo + corsivo */
.ad-h1, .ad-h2, .ad-h3 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -.01em; font-variation-settings: "opsz" 120; text-wrap: balance; }
.ad-h1 { font-size: 59px; line-height: 1.02; color: var(--ink); }
.ad-h2 { font-size: 40px; line-height: 1.08; color: var(--blu-testo); }
.ad-h3 { font-size: 19px; line-height: 1.2; color: var(--ink); }
.ad-h1 em, .ad-h2 em { font-style: italic; font-weight: 500; color: var(--blu-testo); }
.ad-h2.ink { color: var(--ink); }
.ad-blu .ad-h1, .ad-blu .ad-h2 { color: var(--su-blu); }
.ad-blu .ad-h1 em, .ad-blu .ad-h2 em { color: var(--pesca); }
.ad-lead { font-size: 16px; line-height: 1.55; color: var(--ink); margin: 0; max-width: 600px; }
.ad-nota { font-size: 11px; line-height: 1.45; color: var(--muted); }

/* Superficie blu (copertine, slide forti) */
.ad-blu { background: var(--blu); color: var(--su-blu); position: relative; overflow: hidden; }
.ad-blu.gradiente { background: radial-gradient(50% 70% at 100% 100%, rgba(255,122,54,.5), transparent 70%), linear-gradient(125deg, #0a0af5, #0000ff 45%, #2414d6); }
.ad-blu.anello::after { content: ""; position: absolute; right: -150px; top: 60px; width: 560px; height: 560px; border-radius: 50%; border: 83px solid rgba(255,255,255,.07); pointer-events: none; }

/* Numero chiave */
.ad-stat { background: var(--carta); border-radius: var(--radius-m); padding: var(--space-4) var(--space-4) 19px; border-left: var(--rule-accento) solid var(--blu); }
.ad-stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 33px; line-height: 1.1; color: var(--blu-testo); font-variation-settings: "opsz" 100; }
.ad-stat span { display: block; font-size: 12px; line-height: 1.35; color: var(--muted); margin-top: 6px; }
.ad-stat.slide { background: var(--superficie); border-left: 0; border-radius: var(--radius-xl); box-shadow: var(--ombra-card); }
.ad-stat.slide b { font-size: 56px; line-height: .95; letter-spacing: -.03em; }

/* Scenario */
.ad-scen { background: var(--carta); border-radius: var(--radius-m); padding: 26px var(--space-4) var(--space-4); border-top: 6px solid var(--lavanda); }
.ad-scen .k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ad-scen .n { font-family: var(--font-display); font-weight: 600; font-size: 30px; white-space: nowrap; line-height: 1.1; color: var(--blu-testo); margin: 11px 0 4px; }
.ad-scen .pu { font-size: 12.5px; font-weight: 700; margin-bottom: 11px; }
.ad-scen .d { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.ad-scen.main { background: var(--blu); color: var(--su-blu); border-top-color: var(--arancio); }
.ad-scen.main .k, .ad-scen.main .d { color: var(--su-blu); opacity: .85; }
.ad-scen.main .n { color: var(--su-blu); }

/* Card eroe (numero di copertina) */
.ad-hero { background: var(--superficie); color: var(--ink); border-radius: var(--radius-l); padding: var(--space-5) 38px 30px; border-top: var(--rule-testata) solid var(--arancio); }
.ad-hero .k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ad-hero .n { font-family: var(--font-display); font-weight: 600; font-size: 72px; line-height: 1.05; color: var(--blu-testo); margin: 7px 0; font-variation-settings: "opsz" 144; }
.ad-hero .t { font-size: 14px; }

/* Bottoni */
.ad-btn { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1 var(--font-sans); border-radius: var(--radius-pill); padding: 13px 24px; border: 0; cursor: pointer; text-decoration: none; background: var(--blu); color: var(--su-blu); }
.ad-btn.arancio { background: var(--arancio); color: var(--su-blu); }
.ad-btn.contorno { background: transparent; color: var(--blu-testo); box-shadow: inset 0 0 0 2px currentColor; }
.ad-blu .ad-btn.contorno { color: var(--su-blu); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.ad-btn:focus-visible { outline: 3px solid var(--arancio); outline-offset: 3px; }

/* Banda CTA */
.ad-cta { background: var(--blu); color: var(--su-blu); border-radius: var(--radius-l); padding: 30px 34px; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.ad-cta .k { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.ad-cta .t { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.2; margin-top: 6px; max-width: 400px; }
.ad-cta .url { font-size: 17px; font-weight: 700; white-space: nowrap; border-bottom: 4px solid var(--arancio); padding-bottom: 4px; }

/* Tag e chip */
.ad-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--su-blu); background: var(--blu); border-radius: var(--radius-s); padding: 4px 8px; white-space: nowrap; }
.ad-tag.inv { background: var(--su-blu); color: #0000ff; }
.ad-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ad-chips span { border: 1px solid rgba(255,255,255,.5); border-radius: var(--radius-pill); padding: 4px 11px; font-size: 10px; font-weight: 600; white-space: nowrap; }

/* Elenco a pallini */
.ad-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ad-list li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.4; }
.ad-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--blu); box-shadow: inset 0 0 0 4px var(--tinta-blu); }
.ad-blu .ad-list li::before { background: var(--arancio); box-shadow: inset 0 0 0 4px var(--pesca); }
.ad-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ad-check li { display: flex; gap: 12px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.ad-check li::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--verde); color: #fff; display: grid; place-items: center; font-size: 14px; }

/* Passi del flusso */
.ad-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.ad-fs { position: relative; background: var(--carta); border-radius: var(--radius-m); padding: 19px 17px 17px; }
.ad-fs:not(:last-child)::after { content: ""; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); border-left: 8px solid var(--arancio); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ad-fs .fn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blu); color: var(--su-blu); font-weight: 700; font-size: 12px; }
.ad-fs b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--blu-testo); margin: 11px 0 4px; }
.ad-fs span:last-child { display: block; font-size: 11.5px; line-height: 1.35; color: var(--muted); }

/* Tabella numerica */
.ad-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.ad-table th { text-align: right; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 0 7px; border-bottom: 1px solid var(--ink); }
.ad-table td { text-align: right; padding: 6px 0; border-bottom: 1px solid var(--linea); }
.ad-table th:first-child, .ad-table td:first-child { text-align: left; }
.ad-table td.forte { font-weight: 700; color: var(--blu-testo); }
.ad-table tfoot td { font-weight: 700; border-bottom: 0; border-top: 1px solid var(--ink); padding-top: 8px; }

/* Waterfall lordo → netto */
.ad-wf { display: flex; flex-direction: column; gap: 7px; }
.ad-wf-row { display: grid; grid-template-columns: 200px 1fr 130px; align-items: center; gap: 15px; }
.ad-wf-row .l { font-size: 12.5px; font-weight: 700; }
.ad-wf-row .tr { height: 24px; background: var(--carta); border-radius: 7px; overflow: hidden; }
.ad-wf-row .br { height: 100%; border-radius: 7px; background: var(--neutro-barra); }
.ad-wf-row .v { font-family: var(--font-display); font-weight: 600; font-size: 17px; text-align: right; white-space: nowrap; }
.ad-wf-row.lordo .br { background: var(--ink); }
.ad-wf-row.meno .l, .ad-wf-row.meno .v { color: var(--muted); font-weight: 600; }
.ad-wf-row.fee .br { background: var(--arancio); }
.ad-wf-row.fee .l, .ad-wf-row.fee .v { color: var(--arancio-testo); }
.ad-wf-row.netto .br { background: var(--blu); }
.ad-wf-row.netto .l, .ad-wf-row.netto .v { color: var(--blu-testo); }
.ad-wf-row.netto .v { font-size: 22px; }

/* Citazione */
.ad-quote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 32px; line-height: 1.15; color: var(--arancio-testo); margin: 0; }

/* Nota a margine */
.ad-aside { font-size: 12px; color: var(--muted); border-left: 4px solid var(--arancio); padding-left: 11px; }

/* Piè di pagina documento */
.ad-footer { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; color: var(--muted); border-top: 1px solid var(--linea); padding-top: 11px; }
.ad-footer .ad-logo { width: 56px; }