/* =====================================================================
   FM Portale — home flowmanager.it (www/portale.html)
   Stesso linguaggio delle app della suite (fm-theme.css):
   tema chiaro, sfondo bianco/grigio chiaro, accento blu #1f5f9e,
   barra superiore bianca con logo, schede bianche con bordo sottile.
   ===================================================================== */
/* Inter (SIL Open Font License, fm_ui/fonts/OFL-Inter.txt) servito dal nostro dominio */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url('fonts/inter-latin-wght-normal.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:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --fm-bg:#f5f6f7; --fm-surface:#fff; --fm-line:#e3e5e8; --fm-line-2:#d0d4d9;
  --fm-text:#1b1f24; --fm-text-2:#5b636d; --fm-text-3:#6b737d;
  --fm-accent:#1f5f9e; --fm-accent-2:#184d81; --fm-accent-weak:#eaf1f8;
  --fm-ok:#2f7d4f; --fm-r:8px; --fm-r-lg:12px;
  --fm-font:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  --W:1400px;
  /* variabili della pagina */
  --pri:var(--fm-accent); --pri2:var(--fm-accent-2); --bg:var(--fm-bg); --card:var(--fm-surface);
  --tx:var(--fm-text); --mu:var(--fm-text-2); --bd:var(--fm-line); --ok:var(--fm-ok);
  color-scheme:light;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font:15px/1.5 var(--fm-font);background:var(--fm-bg);color:var(--fm-text);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--fm-accent)}
:focus-visible{outline:2px solid var(--fm-accent);outline-offset:2px}

/* ---------- testata ---------- */
header{background:var(--fm-surface);color:var(--fm-text);padding:0;border-bottom:1px solid var(--fm-line)}
.top{
  position:sticky;top:0;z-index:30;max-width:none;margin:0;height:56px;
  padding:0 max(20px,calc((100% - var(--W))/2 + 20px));
  padding-top:env(safe-area-inset-top);
  display:flex;align-items:center;gap:10px;background:var(--fm-surface);border-bottom:1px solid var(--fm-line)
}
.top img{width:30px;height:30px;border-radius:8px}
.top b{font-size:16px;font-weight:600;color:var(--fm-text);letter-spacing:-.01em}
.lang{margin-left:auto;display:flex;gap:2px;background:var(--fm-bg);border:1px solid var(--fm-line);border-radius:20px;padding:2px}
.lang button{display:flex;align-items:center;gap:6px;font:500 13px var(--fm-font);color:var(--fm-text-2);background:none;border:0;border-radius:16px;padding:4px 10px;cursor:pointer}
.lang button.on{background:var(--fm-surface);color:var(--fm-text);font-weight:600;box-shadow:0 1px 2px rgba(16,24,40,.12)}
.fl{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}

.hero{max-width:var(--W);margin:0 auto;padding:40px 20px 28px;text-align:left}
.hero h1{font-size:clamp(26px,3.4vw,36px);line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--fm-text)}
.hero p{font-size:16px;color:var(--fm-text-2);opacity:1;margin:0;max-width:60ch}

/* ---------- indice delle suite: schede piccole ---------- */
.bus{
  margin:24px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;border:0
}
.bus a{
  display:block;text-decoration:none;color:var(--fm-text);background:var(--fm-surface);
  border:1px solid var(--fm-line);border-radius:var(--fm-r-lg);padding:12px 14px;
  transition:border-color .15s,box-shadow .15s
}
.bus a::before,.bus a::after{display:none}
.bus a:hover,.bus a:focus-visible{border-color:var(--fm-accent);box-shadow:0 2px 8px rgba(31,95,158,.10)}
.bus b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.bus small{display:block;font-size:12.5px;color:var(--fm-text-3);margin-top:3px;line-height:1.35}
.bus a:hover b{color:var(--fm-accent)}

/* ---------- corpo ---------- */
main{max-width:var(--W);margin:0 auto;padding:24px 20px 48px;display:flex;flex-direction:column}
.cyc{
  order:0;align-self:flex-start;margin:0 0 6px;box-shadow:none;width:auto;
  display:flex;gap:2px;background:var(--fm-surface);border:1px solid var(--fm-line);border-radius:var(--fm-r);padding:3px
}
.cyc button{font:500 14px var(--fm-font);border:0;background:none;border-radius:6px;padding:6px 14px;color:var(--fm-text-2);cursor:pointer}
.cyc button.on{background:var(--fm-accent);color:#fff}
.save{background:#e6f4ea;color:var(--fm-ok);border-radius:5px;font-weight:600;font-size:11.5px;padding:1px 6px;margin-left:4px}
.cyc button.on .save{background:rgba(255,255,255,.22);color:#fff}
.ivanote{order:1;text-align:left;color:var(--fm-text-3);font-size:13px;margin:0 0 4px}
.how{order:3}

/* ---------- suite: mazzi di carte chiusi, si aprono al clic ---------- */
.bus{display:none}
.suites{order:2;display:flex;flex-wrap:wrap;gap:28px 22px;justify-content:center;align-items:flex-start;margin-top:18px}
.suite{flex:0 1 300px;margin:0;min-width:0;padding:0;border:0;scroll-margin-top:16px}
.suite.open{flex-basis:100%;padding:8px 0 12px}
.suite-h{cursor:pointer;user-select:none;text-align:left}
.suite:not(.open) .suite-h{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;border:0;margin:0 0 12px;padding:0;min-height:64px;justify-content:flex-start}
.suite:not(.open) .suite-h span:not(.tg){font-size:13px}
.suite.open .suite-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:0 0 8px;border-bottom:1px solid var(--fm-line)}
.suite-h h2{font-size:18px;line-height:1.25;font-weight:600;letter-spacing:-.01em;margin:0}
.suite-h span{color:var(--fm-text-2);font-size:14px}
.suite-h .tg{margin-left:auto;color:var(--fm-accent);font-weight:600;font-size:13px;border:1px solid var(--fm-line-2);border-radius:var(--fm-r);padding:3px 10px;background:var(--fm-surface)}
.suite.open .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
/* mazzo chiuso: copertina in tinta unita, ombre leggere */
.suite:not(.open) .grid{width:280px;height:320px}
.suite:not(.open) .card{height:290px;border-radius:12px;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.suite:not(.open) .cover{height:290px;border-radius:12px;padding:20px;background:var(--cv,var(--fm-accent));box-shadow:0 2px 8px rgba(16,24,40,.12)}
.suite:not(.open) .grid:hover .cover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(16,24,40,.14)}
.suite:not(.open) .cover::after{display:none}
.cover .ic{width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12)}
.cover b{font-size:20px;font-weight:650;letter-spacing:-.01em}
.cover small{font-size:13px;line-height:1.4;margin-top:2px;opacity:.9}
.cover .apri{margin-top:14px;font-size:13px;font-weight:600;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.card{
  display:flex;flex-direction:column;gap:0;
  background:var(--fm-surface);border:1px solid var(--fm-line);border-radius:var(--fm-r-lg);
  padding:18px 18px 16px;box-shadow:0 1px 2px rgba(16,24,40,.04)
}
.suite.open .card{transition:border-color .15s,box-shadow .15s}
.suite.open .card:hover{border-color:var(--fm-line-2);box-shadow:0 4px 14px rgba(16,24,40,.07)}
.card::before{display:none}
.card h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0}
.card h3::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c,var(--fm-accent));flex:none}
.card .sub{margin:3px 0 0;color:var(--fm-text-2);font-size:14px}
.card ul{margin:12px 0 0;padding:0;list-style:none;font-size:14px;color:#3a424c}
.card li{margin:0 0 5px;padding-left:18px;position:relative}
.card li::before{content:"";position:absolute;left:2px;top:.5em;width:7px;height:4px;border-left:2px solid var(--fm-ok);border-bottom:2px solid var(--fm-ok);transform:rotate(-45deg)}
.buy{margin-top:auto;padding:14px 0 0;border:0}
.card ul + .buy{margin-top:auto}
.card .pv{margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--fm-line)}
.pv s{color:var(--fm-text-3);margin-right:6px}
.amt{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--fm-text)}
.per{color:var(--fm-text-2);font-size:13.5px}
.bdg{display:inline-block;background:var(--fm-accent-weak);color:var(--fm-accent-2);border:0;border-radius:5px;font-weight:600;font-size:12px;padding:1px 7px;margin:4px 6px 0 0}
.nt{font-size:12.5px;color:var(--fm-text-3);line-height:1.4;margin-top:4px}
.btn{
  display:block;margin-top:12px;border-radius:var(--fm-r);font-weight:600;font-size:14px;padding:10px 14px;text-align:center;
  background:var(--fm-accent);color:#fff;text-decoration:none;border:1px solid var(--fm-accent)
}
.btn:hover{filter:none;background:var(--fm-accent-2);border-color:var(--fm-accent-2)}
.btn + .btn{margin-top:8px}
.btn.alt{background:var(--fm-surface);color:var(--fm-accent);border:1px solid var(--fm-line-2)}
.btn.alt:hover{border-color:var(--fm-accent);background:var(--fm-accent-weak)}
.acc{text-align:left;font-size:12.5px;color:var(--fm-text-3);margin:8px 0 0;line-height:1.4}
.acc a{font-weight:600}
.new{background:#e6f4ea;color:var(--fm-ok);border-radius:5px;font-size:10.5px;font-weight:700;padding:2px 6px;letter-spacing:.02em}

/* ---------- come si accede ---------- */
.how{max-width:none;margin:28px 0 0;padding:0;border:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.how div{background:var(--fm-surface);border:1px solid var(--fm-line);border-radius:var(--fm-r-lg);padding:14px 16px;font-size:13.5px;color:var(--fm-text-2)}
.how b{display:block;color:var(--fm-text);font-size:14px;font-weight:600;margin-bottom:3px}
footer{max-width:var(--W);margin:0 auto;text-align:left;padding:20px 20px 40px;border-top:1px solid var(--fm-line);color:var(--fm-text-3);font-size:13px}

/* ---------- smartphone (stile FM Bilancio) ---------- */
@media (max-width:640px){
  .top{height:52px;padding-left:14px;padding-right:14px}
  .lang button{padding:4px 8px}
  .hero{padding:24px 16px 18px}
  .hero p{font-size:15px}
  main{padding:18px 16px 40px}
  .cyc{align-self:stretch}.cyc button{flex:1;padding:8px 6px}
  .suites{gap:24px}
  .suite.open .grid{grid-template-columns:1fr;gap:12px}
  .suite.open .card{padding:16px 14px 14px}
  .btn{padding:12px 14px;font-size:15px}
}