@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/app/fonts/jakarta-latin.woff2) format('woff2'); }
:root { --brand:#2563eb; --brand-d:#1d4ed8; --ink:#0f172a; --mut:#475569; --bg:#f4f7fb; --surf:#fff; --line:#e2e8f0; --soft:#e8f0ff; }
@media (prefers-color-scheme: dark) { :root { --brand:#6aa3ff; --brand-d:#8bb8ff; --ink:#f1f5f9; --mut:#a8b3c5; --bg:#0b1220; --surf:#131c2e; --line:#243049; --soft:#172a4d; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font: 16px/1.6 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--ink); background: var(--bg); }
.w { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
a { color: var(--brand); }
header { background: var(--surf); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
header .w { display:flex; align-items:center; gap:8px; min-height:64px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--ink); text-decoration:none; margin-right:auto; }
.logo svg { width:32px; height:32px; }
.nav { display:flex; align-items:center; gap:2px; }
.nav a, .nav summary { color: var(--ink); text-decoration:none; font-weight:600; font-size:15px; padding: 8px 12px; border-radius:10px; cursor:pointer; list-style:none; }
.nav a:hover, .nav summary:hover { background: var(--soft); }
.nav summary::-webkit-details-marker { display:none; }
.nav summary::after { content:"▾"; margin-left:6px; font-size:11px; color: var(--mut); }
.dd { position:relative; }
.dd .pn { position:absolute; left:0; top:100%; min-width:280px; background:var(--surf); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px rgba(15,23,42,.14); padding:8px; display:grid; }
.dd .pn a { font-weight:500; }
.hm { display:none; }
a.b, a.o { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding: 0 20px; border-radius:12px; font-weight:650; text-decoration:none; }
a.b { background: var(--brand); color:#fff; box-shadow: 0 1px 2px rgba(37,99,235,.35); }
a.b:hover { background: var(--brand-d); }
a.o { border:1px solid var(--line); color: var(--ink); background: var(--surf); }
a:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.hero { padding-top: 56px; padding-bottom: 32px; display:grid; gap:32px; grid-template-columns: 1.1fr .9fr; align-items:center; }
.hero.solo { grid-template-columns: 1fr; padding-bottom: 16px; }
.kick { display:inline-block; background:var(--soft); color:var(--brand); font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; border-radius:999px; margin-bottom:14px; }
h1 { font-size: clamp(30px, 5.4vw, 48px); line-height:1.12; letter-spacing:-.02em; margin:0 0 16px; max-width: 20ch; }
.hero.solo h1 { max-width: 24ch; }
.lead { font-size: clamp(17px, 2.4vw, 20px); color: var(--mut); max-width: 58ch; margin: 0 0 24px; }
.cta { display:flex; flex-wrap:wrap; gap:12px; }
.nota { color: var(--mut); font-size:14px; margin-top:14px; }
.crumb { font-size:14px; color:var(--mut); padding-top:20px; }
.crumb a { color:inherit; }
section { padding: 36px 0; }
h2 { font-size: clamp(24px, 4vw, 32px); line-height:1.2; margin: 0 0 8px; letter-spacing:-.01em; }
h3 { font-size:18px; margin: 0 0 6px; }
.sub { color: var(--mut); margin: 0 0 24px; max-width: 62ch; }
.griglia { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card { background: var(--surf); border:1px solid var(--line); border-radius:16px; padding:20px; }
a.card { text-decoration:none; color:inherit; display:block; transition: border-color .15s, transform .15s; }
a.card:hover { border-color: var(--brand); transform: translateY(-2px); }
.card h3 { margin: 12px 0 6px; }
.card p { margin:0; color: var(--mut); font-size:15px; }
.mais { display:inline-block; margin-top:10px; color:var(--brand); font-weight:650; font-size:14px; }
.ic { width:44px; height:44px; border-radius:12px; background: var(--soft); display:grid; place-items:center; }
.ic svg { width:24px; height:24px; stroke: var(--brand); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.passi { counter-reset: p; display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.passi .card::before { counter-increment: p; content: counter(p); display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background: var(--brand); color:#fff; font-weight:700; margin-bottom:8px; }
.passi .card h3 { margin-top:0; }
.prezzi { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.prezzo { font-size: 40px; font-weight:800; line-height:1.1; margin: 8px 0; }
.prezzo small { font-size:16px; font-weight:500; color: var(--mut); }
ul.v { list-style:none; padding:0; margin: 12px 0 0; }
ul.v li { padding-left: 26px; position:relative; margin: 6px 0; font-size:15px; }
ul.v li::before { content:""; position:absolute; left:2px; top:7px; width:12px; height:7px; border-left:2px solid var(--brand); border-bottom:2px solid var(--brand); transform: rotate(-45deg); }
.riga2 { display:grid; gap:32px; grid-template-columns: 1fr 1fr; align-items:center; padding: 28px 0; }
.riga2.inv > :first-child { order:2; }
.riga2 p { color: var(--mut); margin: 0 0 8px; }
.shot { margin:0; }
.shot img { width:100%; height:auto; border-radius:16px; border:1px solid var(--line); display:block; box-shadow: 0 8px 28px rgba(15,23,42,.10); }
.shot.tel img { max-width:300px; margin:0 auto; }
.shot figcaption { font-size:13px; color:var(--mut); margin-top:8px; text-align:center; }
.shots { display:flex; gap:16px; overflow-x:auto; margin:20px 0 4px; padding-bottom:8px; }
.shots figure { margin:0; flex:0 0 min(560px,88%); }
.shots img { width:100%; height:auto; border-radius:16px; border:1px solid var(--line); display:block; }
.shots figcaption { font-size:14px; color:var(--mut); margin-top:6px; text-align:center; }
.cfg { background:var(--soft); border-radius:12px; padding:12px 16px; margin-top:16px; font-size:15px; }
details.f { background: var(--surf); border:1px solid var(--line); border-radius:12px; padding: 0 16px; margin-bottom:10px; }
details.f summary { cursor:pointer; min-height:48px; display:flex; align-items:center; font-weight:650; }
details.f p { margin: 0 0 14px; color: var(--mut); }
.fine { background: var(--brand); color:#fff; border-radius:20px; padding: 32px 24px; text-align:center; }
.fine h2 { color:#fff; } .fine p { margin: 0 auto 20px; max-width: 50ch; opacity:.92; }
.fine a.b { background:#fff; color: #1d4ed8; box-shadow:none; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 8px; }
.chips a { background:var(--surf); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:14px; font-weight:600; text-decoration:none; color:var(--ink); }
.chips a:hover { border-color:var(--brand); color:var(--brand); }
footer { background: var(--surf); border-top: 1px solid var(--line); padding: 36px 0 48px; color: var(--mut); font-size:14px; margin-top:24px; }
footer .cols { display:grid; gap:24px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
footer h4 { margin:0 0 8px; color:var(--ink); font-size:14px; }
footer a { color: inherit; text-decoration:none; display:block; padding:3px 0; }
footer a:hover { color:var(--brand); }
footer .fin { margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
@media (max-width: 820px) {
  .nav { display:none; }
  .hm { display:block; position:relative; }
  .hm summary { list-style:none; cursor:pointer; padding:10px; border-radius:10px; font-weight:700; }
  .hm summary::-webkit-details-marker { display:none; }
  .hm .pn { position:absolute; right:0; top:100%; width:min(88vw, 320px); max-height:75vh; overflow:auto; background:var(--surf); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px rgba(15,23,42,.14); padding:8px; }
  .hm .pn a { display:block; padding:9px 12px; color:var(--ink); text-decoration:none; font-weight:500; border-radius:8px; }
  .hm .pn b { display:block; padding:10px 12px 2px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--mut); }
  .hero, .riga2 { grid-template-columns: 1fr; }
  .riga2.inv > :first-child { order:0; }
  footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } a.card { transition:none; } }