:root {
  --asphalt: #0c0d10;
  --asphalt-2: #141519;
  --asphalt-3: #1c1e24;
  --line: #2a2d35;
  --ink: #f4f2ed;
  --ink-dim: #dbdce0;
  --ink-faint: #999ba3;
  --red: #e10600;
  --red-deep: #b00500;
  --green: #36d399;
  --amber: #f5b945;
  --display: 'Archivo', sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --maxw: 1180px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--display);
  background: var(--asphalt);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--red);

}

::selection {
  background: var(--red);
  color: #fff
}

/* ---------- texture / atmosphere ---------- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2
}

/* ---------- top bar ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(12, 13, 16, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink)
}

.brand .logo {
  height: 46px;
  width: auto;
  display: block
}

.brand-text b {
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: 18px;
  line-height: 1;
  color: var(--ink);
}

.brand-text span {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 3px;
}

.brand .mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 4px;
  background:
    repeating-conic-gradient(#0c0d10 0 25%, #f4f2ed 0 50%) 0 0/12px 12px;
  border: 1.5px solid var(--ink);
}

.nav .cta {
  background: var(--red);
  color: #fff;
  padding: 9px 16px;
  border-radius: 3px;
  transition: .2s;
  text-transform: uppercase;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
}

.nav .cta:hover {
  background: var(--red-deep);
  transform: translateY(-1px);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-faint)
}

.lang-switch .ico {
  width: 14px;
  height: 14px
}

.lang-switch select {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--asphalt-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 8px 8px;
  cursor: pointer;
}

.lang-switch select:hover {
  border-color: var(--red)
}

.lang-switch select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 80px 0 70px;
  overflow: hidden
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(225, 6, 0, .22), transparent 60%),
    radial-gradient(800px 500px at 10% 110%, rgba(54, 211, 153, .06), transparent 55%);
}

.hero .wrap {
  position: relative;
  z-index: 2
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 160px;
  background: linear-gradient(90deg, var(--red), transparent)
}

h1 {
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.035em;
  line-height: .92;
  font-size: clamp(37px, 7.2vw, 94px);
  text-transform: uppercase;
}

h1 .out {
  color: transparent;
  -webkit-text-stroke: 1.6px var(--ink-dim);
}

.hero p.lead {
  margin-top: 26px;
  max-width: 540px;
  font-size: 18px;
  color: var(--ink-dim);
  font-weight: 400;
}

.hero p.lead b {
  color: var(--ink);
  font-weight: 600
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  max-width: 620px
}

.meta-row .cell {
  flex: 1;
  min-width: 140px;
  padding: 18px 22px;
  border-right: 1px solid var(--line)
}

.meta-row .cell:last-child {
  border-right: none
}

.meta-row .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint)
}

.meta-row .v {
  font-weight: 800;
  font-size: 21px;
  margin-top: 6px;
  letter-spacing: -.01em
}

.meta-row .v small {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-dim)
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-top: 38px;
  flex-wrap: wrap
}

.btn {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  padding: 16px 30px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: .18s;
}

.btn-primary {
  background: var(--red);
  color: #fff
}

.btn-primary:hover {
  background: var(--red-deep);
  transform: translateY(-2px)
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line)
}

.btn-ghost:hover {
  border-color: var(--ink-dim)
}

.btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important
}

/* ---------- section frame ---------- */
section.block {
  padding: 74px 0;
  border-top: 1px solid var(--line)
}

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 40px
}

.sec-num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--red);
  font-weight: 700
}

.sec-title {
  font-weight: 900;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: -.025em;
  text-transform: uppercase;
  font-style: italic
}

.sec-sub {
  color: var(--ink-dim);
  margin-top: 8px;
  max-width: 560px
}

/* ---------- configurator ---------- */
.config-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 30px;
  align-items: start
}

.panel {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px
}

.panel+.panel {
  margin-top: 22px
}

.panel h3 {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px
}

.panel h3 .step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  flex: 0 0 30px;
  padding-left: 3px;
}

.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

.seg.seg-2 {
  grid-template-columns: repeat(2, 1fr)
}

.seg label {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 14px;
  cursor: pointer;
  text-align: center;
  transition: .15s;
  position: relative;
  background: var(--asphalt-3);
}

.seg label:hover {
  border-color: var(--ink-dim)
}

.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.seg input:checked+.seg-body {
  color: var(--ink)
}

.seg label:has(input:checked) {
  border-color: var(--red);
  background: rgba(225, 6, 0, .07)
}

/* veicolo sospeso (es. camper): visibile ma in grigio, non selezionabile */
.seg label:has(input:disabled) {
  opacity: .5;
  cursor: not-allowed
}

.seg-ico {
  display: flex;
  justify-content: center;
  color: var(--ink-dim)
}

.seg label:has(input:checked) .seg-ico {
  color: var(--red)
}

.seg-body {
  display: block;
  margin-top: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-dim)
}

/* Usata solo dalle card area (step 1): il tipo veicolo è icona + nome, senza
   riga meta. */
.seg-meta {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 3px
}

/* Step 2 (veicolo): niente riga meta da contenere, quindi stringiamo il box
   invece di lasciare aria vuota sotto il nome. Solo padding verticale, così il
   padding orizzontale resta quello di .seg label anche in mobile. */
#vehicle-seg label {
  padding-block: 12px
}

#vehicle-seg .seg-body {
  margin-top: 6px
}

/* Prezzo di partenza dell'area, riempito da app.js (renderLotPrices): la cifra
   deve essere leggibile QUI, nel momento della scelta, non due step più sotto. */
.seg-price {
  display: block;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  font-variant-numeric: tabular-nums
}

.seg-price:empty {
  display: none
}

/* Step 1 (area): tolta la riga "X min Gate ..." (ora nel lot-hint sotto),
   quindi stringiamo il padding verticale come già fatto per lo step 2. */
#lot-seg label {
  padding-block: 12px
}

/* Nota sotto il selettore area: le due aree servono gate diversi. */
.lot-hint {
  margin-top: 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--red);
  background: rgba(225, 6, 0, .06);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-dim)
}

/* Avviso "prenotazioni online chiuse, acquisto solo in loco" in cima al
   configuratore (index.php, interruttore in inc/flags.php). */
.sale-closed {
  margin-bottom: 22px;
  padding: 14px 18px;
  border: 1px solid var(--red);
  border-left-width: 4px;
  background: rgba(225, 6, 0, .08);
  border-radius: 0 8px 8px 0;
  line-height: 1.5
}

.sale-closed b {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 4px
}

.sale-closed span {
  font-size: 13px;
  color: var(--ink-dim)
}

/* Step in attesa della scelta dell'area (app.js syncLotGate). */
.panel.locked {
  opacity: .55
}

.panel.locked .step-dot {
  background: var(--asphalt-3);
  color: var(--ink-faint)
}

.days-empty {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  border: 1px dashed var(--line);
  border-radius: 7px;
  padding: 18px;
  text-align: center
}

/* Nota contestuale sotto lo step veicolo (es. camper: solo sosta notturna, niente
   servizi, no campeggio). Nascosta finché l'attributo [hidden] non viene rimosso. */
.veh-note {
  margin-top: 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--red);
  background: rgba(225, 6, 0, .06);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-dim)
}

.veh-note[hidden] {
  display: none
}

/* Le due aree condividono lo stesso colore (rosso): icona sempre rossa, bordo
   e sfondo rossi da selezionata seguono la regola generica di .seg label. */
#lot-seg .seg-ico {
  color: var(--red)
}

.days {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.day {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--asphalt-3);
  cursor: pointer;
  transition: .15s;
}

.day:hover {
  border-color: var(--ink-dim)
}

.day.sel {
  border-color: var(--red);
  background: rgba(225, 6, 0, .07)
}

/* Card pass (sab-dom / ven-dom): niente riga desc sotto il nome, quindi più
   basse delle giornate singole; bordo rosso sempre per distinguerle a colpo
   d'occhio, selezionate o no. */
.day.day-pass {
  padding-block: 8px;
  border-color: var(--asphalt-3)
}

.day.day-pass:hover {
  border-color: var(--ink-faint)
}

.day.day-pass.sel {
  background: rgba(225, 6, 0, .07);
  border-color: var(--red-deep)
}

.day.sold {
  opacity: .45;
  cursor: not-allowed
}

/* giornata "disponibile a breve": visibile ma in grigio e non selezionabile */
.day.soon {
  opacity: .6;
  cursor: not-allowed;
  filter: grayscale(1)
}

.day.soon:hover {
  border-color: var(--line)
}

.day.soon .day-tag {
  background: var(--asphalt);
  color: var(--ink-faint);
  border-color: var(--line)
}

.day-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--asphalt);
  color: var(--ink-dim);
  border: 1px solid var(--line)
}

.day-tag.race {
  background: var(--red);
  color: #fff;
  border-color: var(--red)
}

.day-tag.wknd {
  background: #1d2b24;
  color: var(--green);
  border-color: #26443a
}

.day-name {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.01em
}

.day-name small {
  display: block;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--ink-faint);
  font-family: var(--mono);
  letter-spacing: .02em;
  margin-top: 2px
}

.day-avail {
  font-family: var(--mono);
  font-size: 10.5px;
  margin-left: auto;
  text-align: right
}

.avail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-faint)
}

.avail::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green)
}

/* cifra dei posti animata (odometro): larghezza stabile mentre scorre */
.avail-n {
  font-variant-numeric: tabular-nums
}

.avail.low::before {
  background: var(--amber);
  animation: avail-blink 1s ease-out infinite;
}

.avail.none::before {
  background: var(--red)
}

@keyframes avail-blink {
  0%, 100% { opacity: 1 }
  50% { opacity: .35 }
}

.day-price {
  text-align: right;
  min-width: 90px
}

.day-price .from {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block
}

.day-price .amt {
  font-weight: 900;
  font-size: 20px
}

.day-price .amt s {
  color: var(--ink-faint);
  font-size: 16px;
  margin-right: 6px
}

/* etichetta "available soon" (modalità comingSoon) */
.day-price .amt.soon {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--green);
  white-space: normal;
  line-height: 1.25
}

/* Invito a spostarsi su Lesmo sotto la card domenica bloccata a Biassono (solo
   pass 3gg): riga A PARTE, non dentro .day.soon, altrimenti il filter:grayscale(1)
   di quella card desaturerebbe anche questo link. Stesso stile callout di .veh-note. */
.day-suggest {
  margin-top: -4px;
  padding: 8px 12px;
  border-left: 3px solid var(--red);
  background: rgba(225, 6, 0, .06);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  line-height: 1.4
}

.day-suggest a {
  font-weight: 700
}

.sum-box .soon {
  color: var(--green);
  font-weight: 700
}

/* ---------- booking form ---------- */
.field {
  margin-bottom: 16px
}

.field label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7px
}

.field input {
  width: 100%;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 13px 14px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px
}

.field input:focus {
  outline: none;
  border-color: var(--red)
}

.field textarea {
  width: 100%;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 13px 14px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  min-height: 130px;
  resize: vertical
}

.field textarea:focus {
  outline: none;
  border-color: var(--red)
}

.panel.narrow {
  max-width: 620px
}

.c-status {
  font-family: var(--mono);
  font-size: 12px;
  margin-top: 14px;
  min-height: 16px
}

.c-status.ok {
  color: var(--green)
}

.c-status.err {
  color: var(--red)
}

.back-link {
  display: inline-block;
  margin-top: 26px
}

.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden
}

.field.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.field.two>div {
  margin: 0
}

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: var(--ink-dim)
}

.consent input {
  margin-top: 3px;
  accent-color: var(--red);
  width: 16px;
  height: 16px;
  flex: 0 0 16px
}

.consent a {
  color: var(--ink)
}

/* ---------- dati fattura (rivelati dal checkbox "Richiedi fattura") ---------- */
.invoice-fields {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 14px 4px;
  margin: 4px 0 14px;
}

.invoice-fields.hidden {
  display: none;
}

.invoice-fields select {
  width: 100%;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 13px 14px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
}

.invoice-fields select:focus {
  outline: none;
  border-color: var(--red);
}

.invoice-fields .hint {
  font-size: 12px;
  color: var(--ink-faint);
}

/* ---------- summary / sticky ---------- */
.summary {
  position: sticky;
  top: 90px
}

.sum-empty {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  padding: 24px 0;
  border: 1px dashed var(--line);
  border-radius: 6px;
  margin-bottom: 18px
}

.sum-box {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-dim);
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px
}

.sum-box .l {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px
}

.sum-box .l.big {
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 4px
}

.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  width: max-content;
  margin-bottom: 18px
}

.qty button {
  width: 36px;
  height: 36px;
  background: var(--asphalt-3);
  border: none;
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  font-family: var(--mono)
}

.qty button:hover {
  background: var(--red);
  color: #fff
}

.qty input {
  width: 44px;
  height: 36px;
  text-align: center;
  background: var(--asphalt);
  border: none;
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button {
  -webkit-appearance: none
}

.np-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 12px;
  line-height: 1.7
}

.np-note b {
  color: var(--ink-dim)
}

/* ---------- parking info ---------- */
.lotmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.lotcard {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--asphalt-2)
}

.lotcard .vis {
  height: 120px;
  position: relative;
  background: var(--asphalt-3);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--red)
}

.lotcard .body {
  padding: 18px
}

.lotcard h4 {
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 8px
}

.pin {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red)
}

.lotcard .dist {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px
}

.lotcard .dist span {
  display: flex;
  align-items: center;
  gap: 8px
}

/* ---------- due aree parcheggio affiancate (sezione 02) ---------- */
.park-areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.park-area {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--asphalt-2);
  padding: 22px 24px
}

.park-area-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line)
}

.park-area-ico {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--asphalt-3);
  color: var(--red)
}

.park-area-ico .ico {
  width: 26px;
  height: 26px
}

.park-area-head h3 {
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-style: italic
}

.park-area-tag {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 3px
}

.park-area .fact {
  padding: 16px 0;
  border-bottom: 1px solid var(--line)
}

.park-area .fact:last-child {
  padding-bottom: 0;
  border-bottom: none
}

.park-area .fact h4 {
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 8px
}

.park-area .dist {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px
}

.park-area .dist span {
  display: flex;
  align-items: center;
  gap: 8px
}

.map-figure {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--asphalt-2)
}

.map-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover
}

.map-figure figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint)
}

.map-figure figcaption .ico {
  width: 14px;
  height: 14px;
  color: var(--red)
}

/* ---------- testo seo ---------- */
.seo-text {
  max-width: 780px;
  margin-top: 46px;
  color: var(--ink-dim)
}

.seo-text h3 {
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: 12px
}

.seo-text p {
  margin-bottom: 12px;
  font-size: 14.5px;
  line-height: 1.7
}

/* ---------- faq ---------- */
.faq {
  max-width: 780px
}

.qa {
  border-bottom: 1px solid var(--line)
}

.qa summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center
}

.qa summary::-webkit-details-marker {
  display: none
}

.qa summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--red);
  font-size: 20px;
  transition: .2s
}

.qa[open] summary::after {
  transform: rotate(45deg)
}

.qa p {
  padding: 0 0 20px;
  color: var(--ink-dim);
  max-width: 680px
}

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 60px;
  color: var(--ink-faint)
}

.foot-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px
}

footer .legal {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.9;
  max-width: 420px
}

footer a {
  color: var(--ink-dim);
  text-decoration: none
}

footer a:hover {
  color: var(--ink)
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em
}

.disclaimer {
  margin-top: 34px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  padding-top: 20px;
  line-height: 1.7
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--asphalt);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 6px;
  z-index: 90;
  opacity: 0;
  transition: .25s;
  pointer-events: none
}

.toast.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0)
}

/* ---------- icone ---------- */
.sprite {
  display: none
}

.ico {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto
}

.ico.mdi {
  fill: currentColor;
  stroke: none
}

/* Icona da file SVG esterno (assets/icons/*.svg), colorata via currentColor con
   la tecnica CSS mask (l'immagine SVG stessa può restare monocromatica: il
   colore lo decide sempre il CSS, come per le icone sprite). L'URL del file
   arriva dalla custom property --icon impostata inline sull'elemento. */
.ico-file {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}

.seg-ico .ico {
  width: 26px;
  height: 26px;
  stroke-width: 1.5
}

.lotcard .vis .ico {
  width: 46px;
  height: 46px;
  stroke-width: 1.4
}

.trust .ico {
  width: 15px;
  height: 15px;
  color: var(--ink-dim)
}

.np-note .ico {
  width: 12px;
  height: 12px;
  vertical-align: -2px;
  margin-right: 4px
}

.day .tick .ico {
  width: 12px;
  height: 12px;
  stroke-width: 3.2
}

/* ---------- ux extras ---------- */
.trust {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint)
}

.trust span {
  display: flex;
  align-items: center;
  gap: 7px
}

.day:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px
}

.day .tick {
  display: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 22px
}

.day.sel .tick {
  display: grid
}

.hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber);
  text-align: center;
  margin-top: 10px;
  min-height: 16px
}

.field input.err {
  border-color: var(--red)
}

.qty-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7px
}

#book-btn {
  width: 100%;
  justify-content: center
}

.mbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: rgba(12, 13, 16, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line)
}

.mbar .mb-info {
  flex: 1;
  min-width: 0
}

.mbar .mb-t {
  font-weight: 800;
  font-size: 15px
}

.mbar .mb-s {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint)
}

.mbar .btn {
  padding: 13px 20px
}

@media(max-width:860px) {
  .config-grid {
    grid-template-columns: 1fr
  }

  .summary {
    position: static
  }

  .lotmap {
    grid-template-columns: 1fr
  }

  .park-areas {
    grid-template-columns: 1fr
  }

  .meta-row .cell {
    min-width: 50%
  }

  .day {
    flex-wrap: wrap;
    gap: 12px
  }

  .day-avail {
    margin-left: 0;
    width: 100%;
    text-align: left;
    order: 5
  }

  .day-price {
    margin-left: auto
  }

  .mbar.on {
    display: flex
  }

  footer {
    padding-bottom: 130px
  }
}

@media(max-width:560px) {
  .wrap {
    padding: 0 18px
  }

  .hero {
    padding: 52px 0 48px
  }

  section.block {
    padding: 52px 0
  }

  .panel {
    padding: 20px 16px
  }

  .hero p.lead {
    font-size: 16px
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center
  }

  .meta-row .cell {
    min-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--line)
  }

  .meta-row .cell:last-child {
    border-bottom: none
  }

  .sec-head {
    flex-direction: column;
    gap: 6px;
    margin-bottom: 30px
  }

  .seg {
    gap: 8px
  }

  .seg label {
    padding: 12px 8px
  }

  .seg-body {
    font-size: 12.5px
  }

  .seg-meta {
    display: none
  }

  .field.two {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .qty button {
    width: 44px;
    height: 44px
  }

  .qty input {
    height: 44px
  }

  .day {
    padding: 14px
  }

  .day-name {
    font-size: 15px
  }

  .day-price .amt {
    font-size: 18px
  }

  .trust {
    gap: 12px 18px
  }

  .nav .cta {
    padding: 8px 12px;
    font-size: 11px
  }

  .nav-right {
    gap: 8px
  }

  .lang-switch .ico {
    display: none
  }

  .lang-switch select {
    padding: 7px 6px;
    font-size: 11px
  }

  .brand-text span {
    display: none
  }

  .foot-grid {
    flex-direction: column
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important
  }
}

/* ---------- cookie consent ---------- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateY(140%);
  transition: transform .32s ease;
  pointer-events: none;
}

.cookie-banner.on {
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-inner {
  width: 100%;
  max-width: var(--maxw);
  display: flex;
  align-items: center;
  gap: 22px;
  background: rgba(20, 21, 25, .97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
}

.cookie-text b {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  margin-bottom: 5px;
  color: var(--ink);
}

.cookie-text p {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-dim);
}

.cookie-text a {
  color: var(--red);
}

.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-actions .btn {
  padding: 13px 24px;
}

@media(max-width:720px) {
  .cookie-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .cookie-actions .btn {
    flex: 1;
    justify-content: center;
  }
}