/*
 * site.css — landing e guide di Export Button / Bottone Esporta.
 * Stessa identità dell'estensione: carta calda, verde pino, Plus Jakarta Sans (servito da qui, non da Google).
 */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --carta: #F7F2EA;
  --carta-scura: #EFE7DA;
  --scheda: #FFFFFF;
  --velo: #F1EBE2;
  --filetto: #E6DDCF;
  --inchiostro: #1E1B18;
  --grigio: #6B645C;
  --verde: #136F63;
  --verde-scuro: #0E574E;
  --verde-tinta: #E2F0EC;
  --rosso: #B23A2E;
  --rosso-tinta: #F8E6E2;
  --ombra: 0 1px 2px rgba(30,27,24,.05), 0 22px 48px -26px rgba(30,27,24,.28);
  --raggio: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: "Plus Jakarta Sans", system-ui, "Segoe UI", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--verde); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
.contenitore { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- testata ---------- */
.testata { position: sticky; top: 0; z-index: 10; background: rgba(247,242,234,.88); backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; }
.testata .contenitore { display: flex; align-items: center; gap: 16px; height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--inchiostro); text-decoration: none; }
.marca img { width: 32px; height: 32px; border-radius: 8px; }
.lingue { margin-left: auto; display: flex; gap: 4px; font-size: 14px; font-weight: 700; }
.lingue a { color: var(--grigio); text-decoration: none; padding: 6px 9px; border-radius: 8px; }
.lingue a[aria-current="page"] { color: var(--inchiostro); background: var(--velo); }
.lingue a:hover { color: var(--inchiostro); }
.btn-testata { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 11px; background: var(--inchiostro);
  color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; }
.btn-testata:hover { background: #000; }

.avviso-lingua { background: var(--verde); color: #fff; font-size: 14px; font-weight: 600; text-align: center; padding: 9px 16px; }
.avviso-lingua a { color: #fff; font-weight: 700; }

/* ---------- apertura ---------- */
.apertura { padding: 64px 0 40px; }
.apertura .contenitore { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 48px; align-items: center; }
.etichetta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--verde);
  background: var(--verde-tinta); padding: 6px 12px; border-radius: 999px; }
h1 { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; margin-top: 18px; }
.sotto { margin-top: 20px; font-size: 19px; color: var(--grigio); max-width: 31em; }
.azioni { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 14px; font-weight: 700; font-size: 17px;
  text-decoration: none; transition: background .15s ease, transform .15s ease; }
.btn-primario { background: var(--verde); color: #fff; box-shadow: 0 12px 28px -14px rgba(19,111,99,.8); }
.btn-primario:hover { background: var(--verde-scuro); transform: translateY(-1px); }
.btn-secondario { background: var(--scheda); color: var(--inchiostro); border: 1px solid var(--filetto); }
.btn-secondario:hover { background: var(--velo); }
.btn svg { width: 20px; height: 20px; flex: none; }
.rassicura { margin-top: 16px; font-size: 14px; color: var(--grigio); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rassicura span { display: inline-flex; align-items: center; gap: 6px; }
.rassicura span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }

/* la scena: una pagina di gestionale con il popup vero sopra */
.scena { position: relative; padding: 0 0 190px 0; }
.finestra { background: var(--scheda); border: 1px solid var(--filetto); border-radius: 16px; box-shadow: var(--ombra); overflow: hidden; }
.finestra-barra { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--velo); border-bottom: 1px solid var(--filetto); }
.finestra-barra i { width: 10px; height: 10px; border-radius: 50%; background: #D9CFC0; display: block; }
.finestra-barra .indirizzo { margin-left: 8px; flex: 1; background: var(--scheda); border-radius: 8px; padding: 5px 12px; font-size: 12.5px; color: var(--grigio);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finestra-corpo { padding: 18px 18px 26px; }
.finestra-corpo .titolo-gestionale { font-size: 14px; font-weight: 700; color: var(--grigio); margin-bottom: 10px; }
.vecchia { width: 100%; border-collapse: collapse; font-family: Verdana, Tahoma, sans-serif; font-size: 12px; color: #222; }
.vecchia th { background: #D8D2C6; text-align: left; padding: 6px 8px; border: 1px solid #B9B1A3; font-weight: 700; }
.vecchia td { padding: 6px 8px; border: 1px solid #CFC8BB; background: #fff; white-space: nowrap; }
.scena .popup { position: absolute; right: -18px; bottom: 0; width: min(54%, 300px); border-radius: 18px;
  box-shadow: 0 2px 4px rgba(30,27,24,.08), 0 30px 60px -20px rgba(30,27,24,.45); border: 1px solid var(--filetto); }

/* ---------- sezioni ---------- */
.sezione { padding: 88px 0; }
.sezione.scura { background: var(--carta-scura); }
.sezione h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; max-width: 18em; }
.sezione .intro { margin-top: 14px; font-size: 18px; color: var(--grigio); max-width: 38em; }

.griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.carta { background: var(--scheda); border: 1px solid var(--filetto); border-radius: var(--raggio); padding: 28px; box-shadow: 0 1px 2px rgba(30,27,24,.04); }
.carta h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; }
.carta p { margin-top: 8px; color: var(--grigio); font-size: 16px; }
.confronto { margin-top: 18px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; font-size: 14px; }
.confronto .prima, .confronto .dopo { border-radius: 10px; padding: 9px 12px; font-variant-numeric: tabular-nums; font-weight: 700; }
.confronto .prima { background: var(--rosso-tinta); color: var(--rosso); }
.confronto .dopo { background: var(--verde-tinta); color: var(--verde); }
.confronto .freccia { color: var(--grigio); }
.confronto small { display: block; font-weight: 500; font-size: 12px; opacity: .85; }

.passi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; counter-reset: passo; }
.passi .carta { position: relative; padding-top: 72px; }
.passi .carta::before { counter-increment: passo; content: counter(passo); position: absolute; top: 24px; left: 28px; width: 34px; height: 34px;
  border-radius: 50%; background: var(--verde-tinta); color: var(--verde); font-weight: 700; display: grid; place-items: center; }

.prezzi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; max-width: 860px; }
.piano .nome { font-weight: 700; font-size: 16px; color: var(--grigio); margin-top: 0; }
.piano .costo { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; margin-top: 6px; color: var(--inchiostro); }
.piano .costo small { font-size: 15px; font-weight: 600; color: var(--grigio); letter-spacing: 0; }
.piano ul { list-style: none; margin-top: 18px; }
.piano li { padding: 7px 0 7px 30px; position: relative; font-size: 16px; }
.piano li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 14px; height: 8px; border-left: 2.5px solid var(--verde);
  border-bottom: 2.5px solid var(--verde); transform: rotate(-45deg); }
.piano.pro { border: 2px solid var(--verde); }

.banda { background: var(--inchiostro); color: #fff; padding: 72px 0; }
.banda h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -0.025em; max-width: 18em; }
.banda .intro { margin-top: 14px; font-size: 18px; max-width: 38em; }
.banda .intro { color: #CFC8BD; }

.guide-elenco { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.guide-elenco a.carta { text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.guide-elenco a.carta:hover { transform: translateY(-2px); box-shadow: var(--ombra); }
.guide-elenco .leggi { margin-top: 14px; font-weight: 700; color: var(--verde); font-size: 15px; }

.chiusura { text-align: left; }
.unito { white-space: nowrap; }
.chiusura .azioni { margin-top: 24px; }

.piede { padding: 40px 0 56px; font-size: 14px; color: var(--grigio); border-top: 1px solid var(--filetto); }
.piede .contenitore { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.piede a { color: var(--grigio); }

/* ---------- guide ---------- */
.articolo { max-width: 760px; margin: 0 auto; padding: 56px 24px 32px; }
.briciole { font-size: 14px; color: var(--grigio); }
.briciole a { color: var(--grigio); }
.articolo h1 { font-size: clamp(32px, 4.6vw, 48px); margin-top: 14px; }
.articolo .sotto { font-size: 19px; }
.articolo h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; margin-top: 48px; }
.articolo h3 { font-size: 19px; margin-top: 28px; }
.articolo p, .articolo li { margin-top: 14px; }
.articolo ul, .articolo ol { padding-left: 22px; }
.articolo li { margin-top: 8px; }
.articolo code, .articolo kbd { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em; background: var(--velo);
  border: 1px solid var(--filetto); border-radius: 6px; padding: 1px 6px; }
.articolo code { overflow-wrap: anywhere; }
.articolo .menu { font-weight: 700; }
.riquadro { margin-top: 24px; background: var(--scheda); border: 1px solid var(--filetto); border-radius: 16px; padding: 20px 22px; }
.riquadro.attenzione { border-left: 4px solid var(--rosso); }
.riquadro.consiglio { border-left: 4px solid var(--verde); }
.riquadro p:first-child { margin-top: 0; }
.esempio { margin-top: 18px; width: 100%; border-collapse: collapse; font-size: 15px; background: var(--scheda); border-radius: 12px; overflow: hidden;
  border: 1px solid var(--filetto); }
.esempio th, .esempio td { padding: 9px 12px; border-bottom: 1px solid var(--filetto); text-align: left; }
.esempio th { background: var(--velo); font-size: 14px; color: var(--grigio); }
.esempio td.sbagliato { color: var(--rosso); font-weight: 700; }
.esempio td.giusto { color: var(--verde); font-weight: 700; }
.cta-guida { margin-top: 48px; background: var(--inchiostro); color: #fff; border-radius: var(--raggio); padding: 30px; }
.cta-guida h2 { color: #fff; margin-top: 0; font-size: 24px; }
.cta-guida p { color: #CFC8BD; }
.cta-guida .azioni { margin-top: 20px; }
.correlate { margin-top: 40px; }
.correlate a { display: block; margin-top: 10px; font-weight: 700; }

/* ---------- telefono ---------- */
@media (max-width: 900px) {
  .apertura { padding-top: 36px; }
  .apertura .contenitore { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .griglia, .passi, .prezzi, .guide-elenco { grid-template-columns: 1fr; }
  .sezione { padding: 64px 0; }
  .scena { padding-bottom: 170px; }
  .scena .popup { right: 8px; width: min(56%, 290px); }
}
@media (max-width: 560px) {
  .contenitore { padding: 0 16px; }
  .testata .contenitore { gap: 10px; }
  .marca span { display: none; }
  .btn-testata { padding: 8px 12px; font-size: 13px; }
  .lingue a { padding: 6px 6px; }
  .btn { width: 100%; justify-content: center; }
  .finestra-corpo { padding: 12px 10px 18px; }
  .vecchia { font-size: 10.5px; }
  .vecchia th, .vecchia td { padding: 5px 5px; }
  .vecchia .nascondi-tel { display: none; }
  .scena { padding-bottom: 150px; }
  .scena .popup { width: 68%; right: 0; }
  .confronto { grid-template-columns: 1fr; }
  .confronto .freccia { transform: rotate(90deg); justify-self: center; }
  .articolo { padding: 36px 16px 24px; }
}