/* ============================================================================
   Rental Cars Monopoli — sito pubblico
   ----------------------------------------------------------------------------
   Direzione: la Puglia di chi ci vive. Pietra calcarea calda al posto del
   bianco freddo, il verde-blu dell'Adriatico, la terracotta dei vasi, il rosso
   del logo per le azioni. Titoli in Fraunces (grazie morbide, carattere
   mediterraneo), interfaccia in Archivo.

   I colori del gestionale (Aspetto) sovrascrivono --gozzo, --ink e --giallo
   dal <style> in testa alla pagina: tutto il resto è costruito per reggere
   anche quando quelli cambiano.
   ========================================================================= */

:root {
  /* --- pietra e terra --- */
  --white: #ffffff;
  --calce: #faf6f0;          /* fondo caldo, muro di calce */
  --calce-scuro: #f2ebe1;
  --sabbia: #efe6d8;
  --ink: #26211d;            /* scuro caldo, non nero */
  --ink-soft: #46403a;
  --muted: #7a7169;
  --line: #e6dccf;
  --line-forte: #d8cab7;

  /* --- mare e terracotta --- */
  --mare: #0e6b70;
  --mare-scuro: #0a5155;
  --mare-chiaro: #e3f0ef;
  --terra: #c9703a;
  --terra-chiara: #f6e7db;
  --ulivo: #6f7d4f;

  /* --- azioni --- */
  --gozzo: #c00d0f;          /* rosso del logo: il colore del "prenota" */
  --gozzo-dark: #9c0a0c;
  --gozzo-fg: #ffffff;
  --giallo: #e0a33c;
  --giallo-dark: #c2862a;
  --giallo-fg: #26211d;
  --rosso: #c00d0f;
  --verde: #1f7a4d;
  --wa: #25d366;
  --wa-dark: #128c4a;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --wide: 105%;
  --wider: 112%;

  --r-sm: 9px;
  --r: 14px;
  --r-lg: 22px;
  --ombra: 0 1px 2px rgba(56, 38, 20, .05), 0 6px 20px rgba(56, 38, 20, .06);
  --ombra-forte: 0 2px 6px rgba(56, 38, 20, .08), 0 18px 44px rgba(56, 38, 20, .13);
  --wrap: 1180px;
  --gutter: 22px;
}

/* ---------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--calce);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; }
figure { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  font-optical-sizing: auto;
}
h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: 1.18rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--mare); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mare-scuro); }

:focus-visible { outline: 3px solid var(--mare); outline-offset: 2px; border-radius: 4px; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.wrap--stretta > * { max-width: 860px; }
.section { padding-block: clamp(40px, 6vw, 68px); }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.lead { font-size: 1.12rem; color: var(--ink-soft); }
.center { text-align: center; }

.kicker {
  font-family: var(--font);
  font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--terra); margin: 0 0 8px;
}

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff;
  padding: 12px 18px; z-index: 100; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.section-head h2 { margin: 0; }
.section-lead { max-width: 62ch; color: var(--ink-soft); margin-bottom: 26px; }
.link-strong { font-weight: 700; color: var(--gozzo); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.link-strong:hover { color: var(--gozzo-dark); }

/* -------------------------------------------------------------- bottoni --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: .98rem;
  padding: 12px 22px; border-radius: var(--r-sm); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-block { display: flex; width: 100%; }

/* aspetto di partenza: se nessuno dice di che colore è, il pulsante si vede comunque */
.btn { background: var(--white); color: var(--ink); border-color: var(--line-forte); }
.btn:hover { background: var(--calce-scuro); }

.btn-primary { background: var(--gozzo); color: var(--gozzo-fg); border-color: var(--gozzo); box-shadow: 0 2px 10px rgba(192, 13, 15, .22); }
.btn-primary:hover { background: var(--gozzo-dark); border-color: var(--gozzo-dark); color: var(--gozzo-fg); box-shadow: 0 6px 18px rgba(192, 13, 15, .28); }

.btn-secondary { background: var(--white); color: var(--ink); border-color: var(--line-forte); }
.btn-secondary:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-forte); }
.btn-ghost:hover { background: var(--calce-scuro); color: var(--ink); }

.btn-accent { background: var(--giallo); color: var(--giallo-fg); border-color: var(--giallo); }
.btn-accent:hover { background: var(--giallo-dark); border-color: var(--giallo-dark); color: var(--giallo-fg); }

/* WhatsApp: verde suo, scritta sempre bianca */
.btn-wa { background: var(--wa-dark); color: #fff !important; border-color: var(--wa-dark); }
.btn-wa:hover { background: #0c6f3a; border-color: #0c6f3a; color: #fff !important; }

.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--mare); text-decoration: underline; cursor: pointer; }

/* --------------------------------------------------------------- header --- */
.topstrip {
  background: var(--ink); color: #cfc6bb; font-size: .84rem;
}
.topstrip .wrap { display: flex; align-items: center; gap: 18px; min-height: 38px; flex-wrap: wrap; }
.topstrip a { color: #cfc6bb; text-decoration: none; }
.topstrip a:hover { color: #fff; }
.topstrip a[aria-current="true"] { color: #fff; font-weight: 700; }
.topstrip a[href^="mailto"] { margin-left: auto; }

.site-header {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.header-bar { display: flex; align-items: center; gap: 22px; min-height: 74px; }

.brand { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand--logo { display: flex; align-items: center; }
.brand--logo img { max-height: 52px; max-width: 220px; width: auto; display: block; }

.site-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.site-nav ul { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.site-nav ul a {
  display: block; color: var(--ink-soft); text-decoration: none;
  font-weight: 650; font-size: .93rem; padding: 8px 12px; border-radius: 999px;
  white-space: nowrap; transition: background .14s, color .14s;
}
.site-nav ul a:hover { background: var(--calce-scuro); color: var(--ink); }
.site-nav ul a[aria-current="page"] { background: var(--mare-chiaro); color: var(--mare-scuro); }

.nav-extra { display: flex; align-items: center; gap: 12px; }
.nav-extra .btn-wa { padding: 10px 16px; font-size: .94rem; border-radius: 999px; }
.lang { display: flex; gap: 2px; }
.lang a {
  font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--muted);
  text-decoration: none; padding: 5px 8px; border-radius: 6px;
}
.lang a:hover { background: var(--calce-scuro); color: var(--ink); }
.lang a[aria-current="true"] { background: var(--ink); color: #fff; }
@media (min-width: 981px) { .site-nav .lang { display: none; } }

.nav-toggle {
  display: none; margin-left: auto; font: inherit; font-weight: 700;
  background: var(--white); border: 1.5px solid var(--line-forte); border-radius: var(--r-sm);
  padding: 9px 16px; color: var(--ink); cursor: pointer;
}

@media (max-width: 980px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    box-shadow: var(--ombra-forte);
    padding: 12px var(--gutter) 20px; flex-direction: column; align-items: stretch; gap: 14px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; align-items: stretch; }
  .site-nav ul a { padding: 13px 10px; border-radius: var(--r-sm); border-bottom: 1px solid var(--line); }
  .nav-extra { justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  .nav-extra .btn-wa { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .brand--logo img { max-height: 40px; max-width: 150px; }
  .header-bar { gap: 12px; min-height: 64px; }
  .topstrip { font-size: .78rem; }
  .topstrip a[href^="mailto"] { display: none; }
}

/* ----------------------------------------------------------------- hero --- */
.hero {
  position: relative; color: #fff; padding: clamp(34px, 5vw, 56px) 0 0;
  background: linear-gradient(135deg, #1d2a2b 0%, #24211d 55%, #3a2a20 100%);
  background-size: cover; background-position: center;
  padding-bottom: clamp(30px, 4vw, 46px);
}
.hero--photo { background-blend-mode: normal; }
.hero > .wrap { position: relative; z-index: 1; }
.hero-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--giallo); margin: 0 0 10px; }
.hero-title { font-size: clamp(2.05rem, 4.4vw, 3.3rem); color: #fff; max-width: 22ch; margin-bottom: 12px; text-wrap: balance; }
.hero-lead { font-size: 1.08rem; max-width: 50ch; color: rgba(255, 255, 255, .86); margin-bottom: 22px; }
.hero :focus-visible { outline-color: var(--giallo); }

/* ------------------------------------------------------------- ricerca --- */
.search { background: var(--white); border-radius: var(--r-lg); color: var(--ink); }
.search--hero {
  padding: 20px 22px 18px; box-shadow: var(--ombra-forte);
  border: 1px solid var(--line); overflow: hidden;
}
.search--compact { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.search :focus-visible { outline-color: var(--mare); }

.search-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 12px; align-items: end; }
.search--compact .search-row { grid-template-columns: 1.1fr 1fr 1fr auto; }
.field { display: grid; gap: 5px; min-width: 0; align-content: start; }
.field > label, .search label { font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.field-pair { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.field-error { color: var(--gozzo); font-size: .85rem; font-weight: 600; }
.search-note { font-size: .88rem; color: var(--muted); margin: 12px 0 0; }
.search-note--spicca {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--terra) 12%, var(--white));
  border: 1px solid color-mix(in srgb, var(--terra) 34%, transparent);
  color: var(--ink); font-size: .95rem; font-weight: 600; line-height: 1.45;
}
.search-note--spicca svg { flex: none; color: var(--terra); margin-top: 1px; }
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .search-note--spicca { background: #fdf3ec; border-color: #e5c3ab; }
}

/* `input:not([type])` serve perché un campo senza type scritto a mano è
   comunque un campo di testo, ma non viene preso da input[type="text"]. */
input:not([type]), input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="time"], input[type="number"], input[type="search"],
input[type="url"], input[type="password"], select, textarea {
  font: inherit; width: 100%; padding: 11px 13px; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line-forte); border-radius: var(--r-sm);
  transition: border-color .14s, box-shadow .14s;
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--mare); box-shadow: 0 0 0 3px var(--mare-chiaro);
}
textarea { min-height: 110px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7169' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 17px;
  padding-right: 36px;
}
.check { display: flex; align-items: flex-start; gap: 9px; font-size: .96rem; cursor: pointer; }
.check input { width: auto; margin-top: 3px; accent-color: var(--gozzo); flex: none; }

/* la costiera: la SS16 da Bari a Brindisi con i punti di ritiro */
.coast { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.coast legend { font-family: var(--display); font-weight: 700; font-size: 1.1rem; padding: 0; margin-bottom: 6px; }
.coast-map { position: relative; height: 142px; margin: 0 6px; }
.coast-sea { position: absolute; left: -30px; right: -30px; bottom: 0; width: calc(100% + 60px); height: 46px; fill: var(--mare-chiaro); }
.coast-road {
  position: absolute; left: -6px; right: -6px; top: 66px; height: 6px; border-radius: 3px;
  background: var(--ink) repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.8) 14px 24px) center / 100% 1.5px no-repeat;
}
.road-shield {
  position: absolute; left: 24%; top: 50%; transform: translate(-50%, -50%);
  background: var(--gozzo); color: #fff; font-size: .7rem; font-weight: 800;
  padding: 2px 7px; border: 2px solid var(--white); border-radius: 4px;
}
.pin { position: absolute; left: var(--x); top: 0; bottom: 0; width: 0; cursor: pointer; }
.pin input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pin-dot {
  position: absolute; left: 0; top: 69px; width: 18px; height: 18px; transform: translate(-50%, -50%);
  background: var(--white); border: 4px solid var(--ink); border-radius: 50%; transition: all .15s;
}
.pin-label {
  position: absolute; left: 0; white-space: nowrap; transform: translateX(calc(var(--x) * -1));
  font-size: .93rem; font-weight: 550; color: var(--muted); padding: 2px 4px; border-radius: 6px;
}
.pin-label small { font-weight: 700; color: var(--terra); }
.pin--above .pin-label { bottom: calc(100% - 50px); }
.pin--below .pin-label { top: 90px; }
.pin:hover .pin-label { color: var(--ink); }
.pin input:checked ~ .pin-dot { background: var(--gozzo); border-color: var(--gozzo); width: 24px; height: 24px; }
.pin input:checked ~ .pin-label { color: var(--ink); font-weight: 800; }
.pin input:focus-visible ~ .pin-dot { outline: 3px solid var(--mare); outline-offset: 3px; }
.pin-alt {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 14px;
  border: 1.5px solid var(--line-forte); border-radius: var(--r-sm); cursor: pointer; font-weight: 600;
}
.pin-alt:hover { border-color: var(--mare); background: var(--mare-chiaro); }
.pin-alt svg { color: var(--terra); flex: none; }
.pin-alt input { accent-color: var(--gozzo); }
.luogo-results { margin-top: 8px; }

/* Sotto gli 860px la mappa non ci sta: diventa un elenco di luoghi, uno sotto
   l'altro. Prima le etichette si sovrapponevano ed era illeggibile. */
@media (max-width: 860px) {
  .coast-map { height: auto; margin: 0; display: grid; gap: 8px; }
  .coast-sea, .coast-road { display: none; }
  .pin {
    position: static; width: auto; display: flex; align-items: center; gap: 11px;
    border: 1.5px solid var(--line-forte); border-radius: var(--r-sm); padding: 12px 13px;
    background: var(--white);
  }
  .pin:hover { border-color: var(--mare); }
  .pin-dot { position: static; top: auto; left: auto; transform: none; width: 18px; height: 18px; border-width: 3px; flex: none; }
  .pin input:checked ~ .pin-dot { width: 18px; height: 18px; }
  .pin-label { position: static; transform: none; white-space: normal; font-size: .98rem; padding: 0; }
  .pin--above .pin-label, .pin--below .pin-label { bottom: auto; top: auto; }
  .pin:has(input:checked) { border-color: var(--gozzo); background: #fdf3f3; }
  .pin:has(input:focus-visible) { outline: 3px solid var(--mare); outline-offset: 2px; }
}

/* ---------------------------------------------------------- rassicura --- */
.trust { background: var(--white); border-block: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-block: 20px; }
.trust-item { display: flex; align-items: center; gap: 11px; font-size: .95rem; font-weight: 600; color: var(--ink-soft); line-height: 1.3; }
.trust-item svg { width: 24px; height: 24px; color: var(--mare); flex: none; }

/* ------------------------------------------------------------ highlights --- */
.highlights { background: var(--mare); color: #fff; padding-block: clamp(34px, 5vw, 52px); }
.highlights h2 { color: #fff; }
.highlights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.highlight h3 { color: #fff; font-size: 1.1rem; margin-bottom: 6px; }
.highlight p { color: rgba(255, 255, 255, .85); font-size: .96rem; margin: 0; }
.highlight-icon { display: block; width: 34px; height: 34px; color: var(--giallo); margin-bottom: 12px; }
.highlight-icon svg { width: 100%; height: 100%; display: block; }
/* ogni svg dentro un contenitore misurato non deve mai sfondarlo */
.blk-punto svg, .trust-item svg, .chips svg, .pin-alt svg, .wa-float svg { flex: none; }

/* ---------------------------------------------------------- auto: liste --- */
.car-list { display: grid; gap: 14px; }
.car {
  display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: 20px; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px; transition: box-shadow .16s, border-color .16s, transform .16s;
}
.car:hover { box-shadow: var(--ombra); border-color: var(--line-forte); transform: translateY(-1px); }
.car--busy { opacity: .62; }
.car-img { position: relative; margin: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--calce-scuro); }
.car-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.car-badge {
  position: absolute; top: 9px; left: 9px; background: var(--gozzo); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.car-body { min-width: 0; }
.car-cat { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--terra); margin: 0 0 3px; }
.car-name { font-family: var(--display); font-size: 1.3rem; font-weight: 700; margin: 0 0 10px; }
.car-name a { color: var(--ink); text-decoration: none; }
.car-name a:hover { color: var(--gozzo); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.chips li {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--calce); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; font-size: .84rem; color: var(--ink-soft); white-space: nowrap;
}
.chips svg { width: 15px; height: 15px; color: var(--muted); flex: none; }

.car-incluso { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.car-incluso li { font-size: .91rem; color: var(--verde); font-weight: 600; padding-left: 20px; position: relative; }
.car-incluso li::before {
  content: ''; position: absolute; left: 0; top: .42em; width: 12px; height: 7px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.car-incluso--detail { margin-bottom: 22px; }

.car-price { text-align: right; display: grid; gap: 7px; justify-items: end; min-width: 160px; }
.car-price .amount { font-family: var(--display); font-size: 1.75rem; font-weight: 700; color: var(--gozzo); line-height: 1.05; }
.car-price .per { font-size: .85rem; color: var(--muted); }
.car-price .from { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.car-price .save { font-size: .83rem; font-weight: 700; color: var(--verde); line-height: 1.3; }
.car-price .busy { font-size: .9rem; font-weight: 700; color: var(--muted); }
.car-price .btn { width: 100%; }
.car-price .btn-secondary { background: var(--gozzo); color: #fff; border-color: var(--gozzo); }
.car-price .btn-secondary:hover { background: var(--gozzo-dark); border-color: var(--gozzo-dark); color: #fff; }

/* auto in evidenza: riquadri grandi */
.focus-section { padding-top: clamp(34px, 5vw, 56px); }
.focus-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.focus-car {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .16s, transform .16s;
}
.focus-car:hover { box-shadow: var(--ombra-forte); transform: translateY(-3px); }
.focus-img { position: relative; margin: 0; background: var(--calce-scuro); }
.focus-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.focus-badge {
  position: absolute; top: 12px; left: 12px; background: var(--giallo); color: var(--giallo-fg);
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.focus-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.focus-cat { font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--terra); margin: 0; }
.focus-body h3 { font-size: 1.22rem; margin: 0; }
.focus-body h3 a { color: var(--ink); text-decoration: none; }
.focus-body h3 a:hover { color: var(--gozzo); }
.focus-price { margin-top: auto; display: flex; align-items: baseline; gap: 6px; font-size: .92rem; color: var(--muted); }
.focus-price b { font-family: var(--display); font-size: 1.4rem; color: var(--gozzo); font-weight: 700; }

/* ------------------------------------------------------- pagina risultati --- */
.page-head { background: var(--white); border-bottom: 1px solid var(--line); padding: clamp(22px, 3vw, 32px) 0 0; }
.page-head h1 { margin-bottom: 8px; }
.page-head .lead { max-width: 58ch; margin-bottom: 16px; font-size: 1rem; }
.page-head--plain { padding-bottom: clamp(22px, 3vw, 32px); }
.page-head .search--compact { padding-bottom: 18px; }

.ricerca-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 26px; align-items: start; }
.filtri-col {
  position: sticky; top: 96px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px; display: grid; gap: 14px;
}
.filtri-col h2 { font-family: var(--font); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.filtri-col label { display: grid; gap: 5px; font-size: .88rem; font-weight: 700; color: var(--ink-soft); }
.filtri-azzera { font-size: .88rem; color: var(--gozzo); font-weight: 600; }

.risultati-testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.risultati-n { font-family: var(--display); font-size: 1.25rem; font-weight: 700; margin: 0; }
.ordina label { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); font-weight: 600; }
.ordina label span { white-space: nowrap; }
.ordina select { min-width: 190px; }
.period { font-weight: 600; color: var(--ink-soft); background: var(--mare-chiaro); border-radius: var(--r-sm); padding: 11px 15px; margin-bottom: 18px; }
.empty { color: var(--muted); padding: 30px 0; }

/* --------------------------------------------------------- scheda auto --- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 44px; align-items: start; padding-block: 26px 60px; }
.detail--book { grid-template-columns: minmax(0, 1fr) 400px; }
.detail-img { margin: 0 0 20px; background: var(--calce-scuro); border-radius: var(--r); overflow: hidden; }
.detail-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.detail-main h2 { margin-top: 34px; }
.detail-main h3 { margin-top: 20px; }
.detail-main .chips { margin: 10px 0; }

.crumbs { font-size: .9rem; color: var(--muted); padding: 16px 0 0; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }

.specs, .prices { width: 100%; border-collapse: collapse; }
.specs th, .specs td, .prices th, .prices td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; }
.specs td, .prices td { text-align: right; font-weight: 700; white-space: nowrap; }
.specs th, .prices th { font-weight: 500; color: var(--ink-soft); }
.prices th small { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; }
.prices--compact th, .prices--compact td { padding: 7px 0; font-size: .95rem; }
.included { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.included li { padding-left: 24px; position: relative; }
.included li::before {
  content: ''; position: absolute; left: 2px; top: .42em; width: 12px; height: 7px;
  border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg);
}

/* ------------------------------------------------------- riquadro prenota --- */
.book-box {
  position: sticky; top: 96px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px; box-shadow: var(--ombra);
}
.book-box h2 { font-size: 1.22rem; margin-bottom: 16px; }
.book-box .field { margin-bottom: 13px; }
.book-box .field-pair { grid-template-columns: 1fr; gap: 7px; }
.quote-form .extras { border: 0; padding: 0; margin: 16px 0 0; }
.quote-form .extras legend { font-weight: 800; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 9px; }
.extra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.extra:last-child { border-bottom: 0; }
.extra label { font-size: .95rem; font-weight: 600; }
.extra small { color: var(--muted); font-weight: 400; }
.extra select { width: 72px; flex: none; }
.extra .check { flex: 1; }

.quote-result { margin-top: 16px; padding-top: 14px; border-top: 2px solid var(--line); }
.quote-placeholder { color: var(--muted); font-size: .95rem; margin: 0; }
.quote-error { color: var(--gozzo); font-weight: 650; font-size: .94rem; margin: 0 0 8px; }
.quote-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.quote-table td { padding: 5px 0; }
.quote-table td:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
.quote-table .save td { color: var(--gozzo); font-weight: 700; }
.quote-table .summary td { border-top: 1.5px solid var(--ink); padding-top: 10px; font-family: var(--display); font-size: 1.22rem; font-weight: 700; }
.quote-note { font-size: .88rem; color: var(--muted); margin: 8px 0 0; }

.short-banner { background: var(--terra-chiara); border: 1px solid #e8c8ab; border-radius: var(--r); padding: 16px 18px; margin: 16px 0; }
.short-banner-title { font-weight: 800; margin: 0 0 5px; }
.short-banner-text { font-size: .95rem; color: var(--ink-soft); margin: 0 0 12px; }
.short-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------------------------- fasce --- */
.delivery {
  background: var(--ink); color: #fff; padding: clamp(42px, 6vw, 68px) 0;
  background-size: cover; background-position: center; margin-block: 0;
}
.delivery-inner { max-width: 640px; }
.delivery h2 { color: #fff; }
.delivery p { color: rgba(255, 255, 255, .86); margin-bottom: 20px; }
.delivery .kicker { color: var(--giallo); }

.band { background: var(--sabbia); padding-block: clamp(32px, 4vw, 48px); }
.band-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.band-inner h2 { margin-bottom: 6px; }
.band-inner p { color: var(--ink-soft); margin: 0; max-width: 62ch; }

.strip { background: var(--white); border-block: 1px solid var(--line); padding-block: 26px; }
.strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.strip h2 { margin-bottom: 6px; }
.strip p { margin: 0; color: var(--ink-soft); max-width: 62ch; }

/* ------------------------------------------------------------ recensioni --- */
.reviews { background: transparent; }
.review-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.review {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px; margin: 0; position: relative;
}
.review::before {
  content: '\201C'; position: absolute; top: 2px; right: 18px;
  font-family: var(--display); font-size: 4rem; color: var(--sabbia); line-height: 1;
}
.review blockquote { margin: 0; position: relative; }
.review p { font-size: .98rem; color: var(--ink-soft); }
.review figcaption { margin-top: 12px; font-weight: 700; font-size: .93rem; }
.review figcaption span { color: var(--muted); font-weight: 400; }
.review-stars { color: var(--giallo); letter-spacing: 2px; }
.review-reply { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.review-list--page { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rev-avg { display: flex; align-items: center; gap: 12px; font-size: 1.05rem; font-weight: 700; margin-bottom: 20px; }
.review-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: grid; gap: 14px; }

/* ------------------------------------------------------- blocchi pagine --- */
.blk { padding-block: clamp(34px, 5vw, 56px); }
.blk + .blk { padding-top: 0; }
.blk--chiaro { background: var(--white); border-block: 1px solid var(--line); padding-block: clamp(40px, 5vw, 60px); }
.blk--chiaro + .blk { padding-top: clamp(34px, 5vw, 56px); }
.blk--scuro { background: var(--ink); color: #fff; padding-block: clamp(42px, 5vw, 62px); }
.blk--scuro h2, .blk--scuro h3 { color: #fff; }
.blk--scuro .prose { color: rgba(255, 255, 255, .86); }
.blk--scuro a { color: var(--giallo); }

.blk-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.blk--duo + .blk--duo { padding-top: 8px; }
.blk--duo-inv .blk-duo-testo { order: 2; }
.blk-duo-foto { border-radius: var(--r); overflow: hidden; background: var(--calce-scuro); box-shadow: var(--ombra); }
.blk-duo-foto img { width: 100%; aspect-ratio: 3 / 2; max-height: 360px; object-fit: cover; display: block; }

.blk--foto .wrap img { width: 100%; border-radius: var(--r); display: block; box-shadow: var(--ombra); }
.blk-foto-piena img { width: 100%; max-height: 520px; object-fit: cover; display: block; }
.blk--foto figcaption { margin-top: 10px; color: var(--muted); font-size: .94rem; }

.blk-punti { display: grid; grid-template-columns: repeat(var(--col, 3), minmax(0, 1fr)); gap: 18px; }
.blk-punto {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 24px;
  transition: box-shadow .16s, transform .16s;
}
.blk-punto:hover { box-shadow: var(--ombra); transform: translateY(-2px); }
.blk-punto svg { width: 30px; height: 30px; color: var(--terra); margin-bottom: 12px; }
.blk-punto h3 { font-size: 1.1rem; margin-bottom: 7px; }
.blk-punto p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

/* Il punto che si apre al clic: resta il riquadro di prima, con sotto la riga
   «Leggi di più» che dice che c'è dell'altro. Senza quella riga il riquadro
   sembra uguale agli altri e nessuno ci prova a cliccare. */
/* Con un riquadro aperto gli altri non devono allungarsi a vuoto: la griglia
   smette di pareggiare le altezze solo in quel momento. */
.blk-punti:has(.blk-punto--apribile[open]) { align-items: start; }
.blk-punto--apribile { padding: 0; }
.blk-punto--apribile > summary {
  cursor: pointer; padding: 24px; list-style: none; display: block; border-radius: var(--r);
}
.blk-punto--apribile > summary::-webkit-details-marker { display: none; }
.punto-apri {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  color: var(--terra); font-weight: 700; font-size: .92rem;
}
.punto-apri::after { content: '+'; font-size: 1.15rem; line-height: 1; }
.blk-punto--apribile[open] > summary .punto-apri::after { content: '\2212'; }
.blk-punto--apribile[open] > summary { padding-bottom: 6px; }
.blk-punto--apribile > summary:focus-visible { outline: 3px solid var(--mare); outline-offset: 2px; }
.punto-dettaglio { padding: 0 24px 24px; color: var(--ink-soft); font-size: .96rem; }
.punto-dettaglio > :first-child { margin-top: 0; }
.punto-dettaglio p { margin: 0 0 10px; }
.punto-dettaglio ul { margin: 0 0 10px; padding-left: 20px; }
.punto-dettaglio li { margin-bottom: 4px; }
.punto-dettaglio > :last-child { margin-bottom: 0; }

.blk-faq details { border-bottom: 1px solid var(--line); }
.blk-faq summary {
  cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 1.05rem;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.blk-faq summary::-webkit-details-marker { display: none; }
.blk-faq summary::after { content: '+'; color: var(--terra); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.blk-faq details[open] summary { color: var(--mare-scuro); }
.blk-faq details[open] summary::after { content: '\2212'; }
.blk-faq details > .prose { padding-bottom: 16px; color: var(--ink-soft); }

.blk--richiamo {
  background: var(--mare); color: #fff; padding-block: clamp(40px, 5vw, 58px);
  background-size: cover; background-position: center;
}
.blk--richiamo + .blk--richiamo { background: var(--ink); }
.blk--richiamo + .blk--richiamo.blk--richiamo-foto { background-color: var(--ink); }
.blk-richiamo { display: flex; flex-wrap: wrap; gap: 24px 36px; align-items: center; justify-content: space-between; }
.blk-richiamo > div { flex: 1 1 420px; }
/* su fondo scuro il pulsante è chiaro, qualunque colore d'evidenza sia impostato */
.blk--richiamo .btn, .delivery .btn, .highlights .btn {
  background: var(--white); color: var(--ink); border-color: var(--white);
}
.blk--richiamo .btn:hover, .delivery .btn:hover, .highlights .btn:hover {
  background: var(--giallo); border-color: var(--giallo); color: var(--giallo-fg);
}
.blk-richiamo h2 { color: #fff; margin-bottom: 8px; }
.blk-richiamo p { color: rgba(255, 255, 255, .88); margin: 0; max-width: 60ch; }
.blk-richiamo .kicker { color: var(--giallo); }

.blk-galleria { display: grid; grid-template-columns: repeat(var(--col, 3), minmax(0, 1fr)); gap: 14px; }
.blk-galleria figure { border-radius: var(--r); overflow: hidden; background: var(--calce-scuro); }
.blk-galleria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .3s; }
.blk-galleria figure:hover img { transform: scale(1.04); }

.blk-mappa--due { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 30px; align-items: start; }
.blk-contatti p { margin-bottom: 14px; }

/* -------------------------------------------------------------- pagine --- */
.cms { display: grid; gap: 40px; }
.cms--aside { grid-template-columns: minmax(0, 1fr) 300px; }
.cms--map { grid-template-columns: minmax(0, 1fr) 420px; }
.cms-aside { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: grid; gap: 12px; align-content: start; }
.cms-aside h2 { font-size: 1.12rem; margin: 0; }
.cms-aside p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.cms-aside-contact { font-size: .93rem; line-height: 1.8; }
.cms-aside .btn { margin-top: 4px; }
.cms-aside dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 6px; }
.cms-aside dt { color: var(--muted); }
.cms-aside dd { margin: 0; text-align: right; font-weight: 600; }
.map-embed { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: var(--calce-scuro); }
.map-embed iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

.prose { color: var(--ink-soft); }
.prose h2 { color: var(--ink); margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: var(--ink); margin-top: 1.3em; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1em; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--r); margin: 1em 0; }
.prose a { font-weight: 600; }
.prose table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.prose th, .prose td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--calce-scuro); font-weight: 700; }

/* Campo trappola per i robot dello spam: invisibile a chi usa il sito.
   Senza questa regola compariva un campo "Website" in cima al modulo. */
.hp {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}

/* ------------------------------------------------------ avvisi e stati --- */
.notice { padding: 14px 18px; border-radius: var(--r-sm); margin-bottom: 18px; font-weight: 600; border: 1px solid transparent; }
.notice--success { background: #e7f5ec; color: #14603a; border-color: #bfe3cd; }
.notice--error { background: #fdeaea; color: #8d1113; border-color: #f3c2c2; }
.notice--warn { background: var(--terra-chiara); color: #8a4a18; border-color: #e8c8ab; }
.hint { font-size: .9rem; color: var(--muted); }
.status { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--calce-scuro); color: var(--ink-soft); }

/* ------------------------------------------------------------ prenota --- */
.steps { display: flex; gap: 10px; flex-wrap: wrap; list-style: none; margin: 0 0 24px; padding: 0; font-size: .88rem; color: var(--muted); }
.steps li { display: flex; align-items: center; gap: 7px; }
.steps li::after { content: '›'; margin-left: 6px; color: var(--line-forte); }
.steps li:last-child::after { display: none; }
.steps .is-new, .steps [aria-current] { color: var(--ink); font-weight: 700; }

.summary-car { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.summary-car img { width: 108px; border-radius: var(--r-sm); }
.summary-name { font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.summary-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: .95rem; margin: 0; }
.summary-dl dt { color: var(--muted); }
.summary-dl dd { margin: 0; font-weight: 600; text-align: right; }

.pay-options { display: grid; gap: 12px; margin-bottom: 18px; }
/* La scelta di quanto pagare. Il corpo era un elemento in linea, quindi
   l'importo e la spiegazione finivano appiccicati sulla stessa riga —
   «Caparra 160,80 € Il resto, 375,20 €, lo paghi al ritiro.» tutto di
   seguito. E l'opzione scelta non si distingueva in nessun modo. */
.pay-option {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start;
  border: 1.5px solid var(--line-forte); border-radius: var(--r); padding: 16px; cursor: pointer;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.pay-option:hover { border-color: var(--mare); background: var(--calce); }
.pay-option input { width: auto; margin: 3px 0 0; }
.pay-option:has(input:checked) { border-color: var(--gozzo); background: #fff; box-shadow: inset 0 0 0 1px var(--gozzo); }
.pay-option-body { margin: 0; display: grid; gap: 3px; }
.pay-option-body > strong { font-size: 1rem; }
.pay-option-body > small { color: var(--ink-soft); line-height: 1.5; }
.pay-option-body > input[type=number] { margin-top: 8px; max-width: 170px; }
.pay-amount { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--gozzo); line-height: 1.1; }
.pay-box, .contact-box, .contract-box { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.pay-message { margin-top: 12px; font-size: .94rem; }
.confirm { display: grid; gap: 22px; }
.confirm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.consents { display: grid; gap: 10px; margin: 16px 0; }
/* Si chiama grid-2 e deve fare due colonne. Con auto-fit ne faceva tre
   appena c'era spazio: nel modulo di prenotazione i sei campi finivano
   tre per riga, con gli aiuti sotto di lunghezza diversa che sfalsavano
   le righe e lasciavano «Numero di patente» appeso più in basso. */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
@media (max-width: 620px) { .grid-2 { grid-template-columns: 1fr; } }
.form { display: grid; gap: 14px; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

/* -------------------------------------------------------------- footer --- */
.site-footer { background: var(--ink); color: #c9c0b6; padding: clamp(40px, 5vw, 58px) 0 26px; margin-top: clamp(40px, 6vw, 70px); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; margin-bottom: 30px; }
.footer-brand { font-family: var(--display); font-size: 1.3rem; font-weight: 800; color: #fff; margin-bottom: 10px; display: block; }
.footer-brand img { max-height: 54px; filter: brightness(0) invert(1); opacity: .95; }
.footer-about { font-size: .95rem; line-height: 1.7; max-width: 42ch; }
.site-footer h3 { color: #fff; font-family: var(--font); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: #c9c0b6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, .13); padding-top: 18px; font-size: .86rem; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.footer-pay img { max-height: 26px; opacity: .85; }

.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%; background: var(--wa);
  display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  color: #fff; transition: transform .16s;
}
.wa-float:hover { transform: scale(1.07); color: #fff; }
.wa-float svg { width: 30px; height: 30px; }

/* ------------------------------------------------------------- media --- */
.media-page { display: grid; gap: 22px; }
.media-form, .media-grid, .media-checklist { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.media-drop { border: 2px dashed var(--line-forte); border-radius: var(--r); padding: 30px; text-align: center; background: var(--calce); }
.media-drop-title { font-weight: 700; margin-bottom: 5px; }
.media-drop-hint { color: var(--muted); font-size: .92rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.media-item img { width: 100%; border-radius: var(--r-sm); aspect-ratio: 4 / 3; object-fit: cover; }
.media-phase { font-size: .82rem; color: var(--muted); }
.media-missing { color: var(--gozzo); font-weight: 600; }
.media-pair, .media-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* --------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
  .detail, .detail--book { grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; }
}
@media (max-width: 980px) {
  .ricerca-layout { grid-template-columns: 1fr; }
  .filtri-col { position: static; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); display: grid; gap: 10px; padding: 14px; }
  .filtri-col h2 { grid-column: 1 / -1; }
  .filtri-col label { font-size: .82rem; }
  .filtri-col select { padding: 9px 11px; }
  .filtri-azzera { grid-column: 1 / -1; }
  .detail, .detail--book, .cms--aside, .cms--map { grid-template-columns: 1fr; gap: 26px; }
  .book-box { position: static; }
  .search-row, .search--compact .search-row { grid-template-columns: 1fr 1fr; }
  .search-row > .btn { grid-column: 1 / -1; }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .blk-duo, .blk-mappa--due { grid-template-columns: 1fr; gap: 24px; }
  .blk--duo-inv .blk-duo-testo { order: 0; }
  .blk-punti, .blk-galleria { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}
@media (max-width: 760px) {
  .car { grid-template-columns: 150px minmax(0, 1fr); gap: 14px; }
  .car-price { grid-column: 1 / -1; text-align: left; justify-items: stretch; min-width: 0;
               display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
               border-top: 1px solid var(--line); padding-top: 12px; }
  .car-price .btn { width: auto; flex: 1 1 140px; }
  .band-inner, .blk-richiamo, .delivery-inner { text-align: left; }
  .section-head { align-items: flex-start; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; }
  .search-row, .search--compact .search-row, .field-pair { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; gap: 12px; padding-block: 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .blk-punti, .blk-galleria, .media-pair, .media-compare { grid-template-columns: 1fr; }
  .car { grid-template-columns: 1fr; }
  .car-img img { aspect-ratio: 16 / 9; }
  .summary-car { flex-direction: column; align-items: flex-start; }
  .wa-float { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .wa-float svg { width: 26px; height: 26px; }
  .delivery, .band, .blk--richiamo { text-align: left; }
  .btn { width: 100%; }
  .btn-ghost, .steps .btn, .inline-form .btn, .short-banner-actions .btn,
  .carrello-barra .btn { width: auto; }
  .nav-extra { flex-direction: column; align-items: stretch; }
  .nav-extra .lang { justify-content: center; }
}

/* ---------------------------------------------------------------- stampa --- */
@media print {
  .site-header, .site-footer, .topstrip, .wa-float, .no-print, .book-box form, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap { width: 100%; }
  a { color: #000; text-decoration: none; }
}

/* pagamento con carta */
.pay-carta { margin-top: 16px; }
.pay-oppure { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .9rem; margin: 18px 0 14px; }
.pay-oppure::before, .pay-oppure::after { content: ''; flex: 1; height: 1px; background: var(--line); }
#stripe-element { margin-bottom: 14px; }

/* ======================================================================
   Movimento
   Appena percettibile: i blocchi salgono di poco entrando nello schermo,
   le cose cliccabili rispondono al passaggio del mouse. Chi ha chiesto al
   sistema operativo di ridurre le animazioni non vede niente di tutto questo
   (la regola sta in cima al foglio).
   ====================================================================== */
.rivela { opacity: 0; transform: translateY(18px); }
.rivela-on { opacity: 1; transform: none; transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1); }
.rivela-on:nth-child(2) { transition-delay: .07s; }
.rivela-on:nth-child(3) { transition-delay: .14s; }
.rivela-on:nth-child(4) { transition-delay: .21s; }

/* il titolo e la ricerca dell'apertura entrano da soli al caricamento */
.hero-kicker, .hero-title, .hero-lead, .hero .search { animation: entra .6s cubic-bezier(.2,.7,.3,1) both; }
.hero-title { animation-delay: .06s; }
.hero-lead { animation-delay: .12s; }
.hero .search { animation-delay: .18s; }
@keyframes entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* foto che respira piano dietro l'apertura */
.hero--photo { animation: respiro 24s ease-in-out infinite alternate; }
@keyframes respiro { from { background-size: 100% auto; } to { background-size: 108% auto; } }

/* la foto dell'auto si avvicina appena quando ci passi sopra */
.car-img img, .focus-img img, .detail-img img { transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.car:hover .car-img img, .focus-car:hover .focus-img img { transform: scale(1.045); }
.car-img, .focus-img { overflow: hidden; }

/* i pulsanti rispondono al tocco */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.22);
  transform: translateX(-101%); transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.btn-primary:hover::after { transform: translateX(101%); }

/* le domande frequenti si aprono senza scatto */
.blk-faq summary { transition: color .18s; }
.blk-faq summary::after { transition: transform .22s; display: inline-block; }
.blk-faq details[open] summary::after { transform: rotate(180deg); }

/* le targhette e i link si accendono */
.chips li { transition: border-color .18s, background .18s; }
.car:hover .chips li { border-color: var(--line-forte); }
.site-nav ul a, .link-strong, .topstrip a, .site-footer a { transition: color .16s, background .16s; }
.link-strong { background-image: linear-gradient(var(--gozzo), var(--gozzo)); background-size: 0 2px;
  background-repeat: no-repeat; background-position: left bottom; border-bottom: 0; padding-bottom: 3px;
  transition: background-size .28s cubic-bezier(.2,.7,.3,1); }
.link-strong:hover { background-size: 100% 2px; }

/* il tasto WhatsApp fisso pulsa una volta ogni tanto, senza disturbare */
.wa-float { animation: battito 6s ease-in-out 3s infinite; }
@keyframes battito {
  0%, 92%, 100% { transform: scale(1); }
  94% { transform: scale(1.1); }
  96% { transform: scale(.97); }
  98% { transform: scale(1.04); }
}
.wa-float:hover { animation-play-state: paused; }

/* ======================================================================
   Noleggi brevi: la pagina che apre il cliente dal link
   Pensata per il telefono: un passo alla volta, bottoni grandi.
   ====================================================================== */
.checkin { max-width: 720px; margin-inline: auto; }
.checkin > * { max-width: none; }

.ci-riepilogo {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px 22px; margin-bottom: 26px;
}
.ci-riepilogo h2 { font-size: 1.05rem; margin-bottom: 12px; }
.ci-riepilogo .summary-dl { grid-template-columns: auto 1fr; gap: 7px 18px; }

.ci-passo {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px; margin-bottom: 16px; transition: border-color .2s, box-shadow .2s;
}
.ci-passo h2 { display: flex; align-items: center; gap: 12px; font-size: 1.2rem; margin-bottom: 14px; }
.ci-n {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; background: var(--calce-scuro); color: var(--muted);
  font-family: var(--font); font-size: .95rem; font-weight: 800;
}
.ci-passo.is-ora { border-color: var(--gozzo); box-shadow: 0 0 0 3px rgba(192,13,15,.08); }
.ci-passo.is-ora .ci-n { background: var(--gozzo); color: #fff; }
.ci-passo.is-fatto .ci-n { background: var(--verde); color: #fff; }
.ci-passo.is-fatto { opacity: .9; }
.ci-sunto { color: var(--ink-soft); margin-bottom: 8px; }
.ci-passo details summary { cursor: pointer; color: var(--mare); font-weight: 600; margin-bottom: 12px; }
.ci-form .grid-2 { gap: 12px; }
.ci-form .field { margin-bottom: 12px; }

.ci-docs { display: grid; gap: 10px; margin-bottom: 16px; }
.ci-doc {
  display: grid; gap: 6px; padding: 14px; border: 1.5px dashed var(--line-forte);
  border-radius: var(--r-sm); background: var(--calce); cursor: pointer;
}
.ci-doc:hover { border-color: var(--mare); }
.ci-doc-nome { font-weight: 700; }
.ci-doc-stato { font-size: .88rem; color: var(--muted); }
.ci-doc.is-ok { border-style: solid; border-color: var(--verde); background: #f1f8f3; }
.ci-doc.is-ok .ci-doc-stato { color: var(--verde); font-weight: 700; }
.ci-doc input[type="file"] { font-size: .92rem; }

.ci-garanzia { background: var(--mare-chiaro); border-radius: var(--r-sm); padding: 16px 18px; margin-bottom: 18px; }
.ci-garanzia p { margin-bottom: 10px; font-weight: 600; }
.ci-accetto {
  background: var(--calce); border: 1.5px solid var(--line-forte); border-radius: var(--r-sm);
  padding: 14px; margin: 16px 0; font-size: .95rem; line-height: 1.5; align-items: flex-start;
}
.ci-accetto:hover { border-color: var(--mare); }
#ci-card-element { margin-bottom: 12px; }

.ci-ok { text-align: center; padding: 20px 0 10px; }
.ci-ok svg { width: 56px; height: 56px; color: var(--verde); margin-bottom: 10px; }
.ci-aiuto { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

@media (max-width: 560px) {
  .ci-passo { padding: 18px 16px; }
  .ci-riepilogo { padding: 16px; }
  .ci-form .grid-2 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- foto delle auto: intere ---
   Le foto dei veicoli sono scatti da catalogo, su fondo chiaro e con l'auto
   già inquadrata. Ritagliarle per riempire un rettangolo le ingrandiva e
   tagliava i paraurti: sembravano zoomate. Ora si vedono per intero, dentro
   una cornice chiara che tiene le righe allineate.                          */
.car-img { background: #fff; border: 1px solid var(--line); }
.car-img img { aspect-ratio: 4 / 3; object-fit: contain; padding: 6px; }
.detail-img { background: #fff; border: 1px solid var(--line); }
.detail-img img { aspect-ratio: 3 / 2; object-fit: contain; padding: 18px; }
.focus-img img { object-fit: contain; background: #fff; padding: 10px; }
@media (max-width: 760px) {
  .car-img img { aspect-ratio: 4 / 3; }
  .detail-img img { padding: 10px; }
}

/* Il voto di Google in testa alle recensioni */
.rev-avg--google { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 1.05rem; }
.rev-avg--google strong { font-family: var(--display); font-size: 1.7rem; line-height: 1; }
.rev-avg--google span { color: var(--ink-soft); }

/* Contatti: orari, luoghi di consegna e mappa accanto al modulo */
.contact-h { font-size: 1rem; margin: 22px 0 8px; }
.contact-luoghi { list-style: none; margin: 0; padding: 0; }
.contact-luoghi li {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .95rem;
}
.contact-luoghi li:last-child { border-bottom: 0; }
.contact-luoghi b { white-space: nowrap; color: var(--mare); }
.contact-mappa { line-height: 0; border-top: 1px solid var(--line); }
.contact-mappa iframe { width: 100%; height: 380px; border: 0; display: block; filter: saturate(.9); }
@media (max-width: 760px) { .contact-mappa iframe { height: 280px; } }

/* ======================================================= footer rifatto ===
   Due cose non andavano. La prima: i titoli erano <h2> ma lo stile era
   scritto per <h3>, così "Orari di ritiro e riconsegna" usciva nel serif
   grande del titolo di pagina, sproporzionato. La seconda: tre colonne
   quasi vuote. Ora sono quattro, con dentro le auto più richieste, i punti
   di consegna con il costo e il voto di Google.                           */
.site-footer {
  background:
    linear-gradient(180deg, rgba(224,163,60,.10), transparent 120px),
    var(--ink);
  border-top: 3px solid var(--terra);
  color: #c7bdb2;
  padding: clamp(42px, 5vw, 64px) 0 22px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1.1fr 1fr;
  gap: 24px 40px; margin-bottom: 34px; align-items: start;
}
.site-footer h2 {
  color: #fff; font-family: var(--font);
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 13px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.site-footer .footer-h2-2 { margin-top: 24px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .94rem; }
.site-footer a { color: #c7bdb2; text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer p { font-size: .94rem; line-height: 1.65; }

.footer-col--brand .footer-brand {
  font-family: var(--display); font-size: 1.35rem; font-weight: 700;
  color: #fff; margin: 0 0 10px; display: block;
}
.footer-about { font-size: .94rem; line-height: 1.7; max-width: 40ch; margin: 0 0 14px; }
.footer-voto { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: .9rem; }
.footer-voto span { color: #9d948b; }
.site-footer address {
  font-style: normal; font-size: .94rem; line-height: 1.8; margin: 0 0 16px;
  padding-left: 14px; border-left: 2px solid rgba(255,255,255,.16);
}
.btn-sm { padding: 9px 16px; font-size: .88rem; }

.footer-luogo-nota { margin-top: 10px; font-size: .9rem; }
.footer-tutte { color: #fff !important; font-weight: 700; }

.footer-pay { margin-bottom: 20px; }
.footer-pay img { max-height: 30px; opacity: .72; }

.footer-legal {
  border-top: 1px solid rgba(255,255,255,.13); padding-top: 18px;
  font-size: .85rem; color: #9d948b;
  display: flex; gap: 10px 26px; flex-wrap: wrap; justify-content: space-between; align-items: center;
}
.footer-legal p { margin: 0; font-size: .85rem; }
.footer-lingue { display: flex; gap: 4px; }
.footer-lingue a { padding: 3px 9px; border-radius: 999px; font-size: .82rem; }
.footer-lingue a[aria-current] { background: rgba(255,255,255,.13); color: #fff; }

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-legal { justify-content: flex-start; }
}
/* il richiamo sopra fa già da stacco: niente aria morta prima del footer */
.site-footer { margin-top: 0; }
/* il pulsante WhatsApp galleggiante non deve coprire "Area riservata" */
.footer-legal > :last-child { margin-right: 66px; }
@media (max-width: 560px) { .footer-legal > :last-child { margin-right: 0; } }

/* ------------------------------------------------- richiami affiancati ---
   Quando due richiami si trovano vicini non fanno più due fasce piatte una
   sull'altra: diventano due carte della stessa altezza, con il pulsante
   appoggiato in fondo. Si leggono in un colpo e non lasciano mezza riga
   vuota a destra.                                                         */
.blk--richiami { padding-block: clamp(34px, 4.4vw, 56px); background: var(--calce-scuro); }
.richiami-griglia {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.richiamo-carta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: clamp(24px, 3vw, 34px); border-radius: var(--r); color: #fff;
  background-size: cover; background-position: center;
  box-shadow: var(--ombra);
}
.richiamo-carta--mare { background-color: var(--mare); }
.richiamo-carta--notte { background-color: var(--ink); }
.richiamo-carta .kicker { color: var(--giallo); margin: 0; }
.richiamo-carta h2 { color: #fff; margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.richiamo-carta p { color: rgba(255,255,255,.9); margin: 0; max-width: 46ch; }
.richiamo-carta .btn {
  margin-top: auto; padding-top: 11px; padding-bottom: 11px;
  background: var(--white); color: var(--ink); border-color: var(--white);
}
.richiamo-carta .btn:hover { background: var(--giallo); border-color: var(--giallo); color: var(--giallo-fg); }

/* Regolamento: le sezioni occupano tutta la riga, e la risposta dentro resta
   su una misura leggibile invece di correre da un bordo all'altro */
.blk--faq .blk-faq { max-width: none; }
.blk-faq details > .prose { max-width: 92ch; }
.blk-faq details > .prose p { margin: 0 0 12px; }
.blk-faq details > .prose p:last-child { margin-bottom: 0; }
.blk-faq details > .prose ul { margin: 0 0 12px; padding-left: 20px; }
.blk-faq details > .prose li { margin-bottom: 5px; }

/* ---------------------------------------- spazio sopra i blocchi colorati ---
   Fra due blocchi di seguito il margine in alto si toglie, perché sullo
   stesso fondo chiaro due spazi uno sull'altro fanno un buco. Ma un blocco
   che ha il colore suo — la fascia verde del richiamo, quella scura, le due
   carte affiancate — con il margine azzerato si ritrovava il testo appiccicato
   al bordo di sopra e tutto il vuoto sotto. Qui lo spazio torna da entrambe
   le parti, che è l'unico modo perché la fascia sia equilibrata.           */
.blk + .blk--richiamo,
.blk + .blk--richiami,
.blk + .blk--scuro,
.blk + .blk--chiaro { padding-top: clamp(40px, 5vw, 58px); }

/* e il blocco che viene subito dopo una fascia colorata ricomincia da capo */
.blk--richiamo + .blk,
.blk--richiami + .blk,
.blk--scuro + .blk { padding-top: clamp(34px, 5vw, 56px); }

/* ============================================= il telefono, sul serio ===
   Su schermo largo il riquadro del prezzo sta nella colonna di destra, sempre
   sott'occhio. In colonna unica finiva in fondo, e succedeva questo:
   — sulla scheda auto, il riquadro "Calcola il prezzo e prenota" cascava dopo
     1440 px di tabelle, cioè due schermate sotto;
   — nel modulo di prenotazione, il Riepilogo con il totale stava 550 px DOPO
     il pulsante di invio: si prenotava senza aver mai visto quanto si spende.
   In colonna unica il riquadro va per primo.                               */
@media (max-width: 860px) {
  .detail, .detail--book { display: flex; flex-direction: column; }
  .detail > .book-box { order: -1; }
  .detail-main { order: 1; }
}

/* Le schede auto sul telefono: foto accanto al testo, non sopra.
   A tutta larghezza la foto occupava 247 px e ogni scheda ne prendeva 560:
   quindici auto facevano novemila pixel di scorrimento. Di fianco, la stessa
   scheda sta in poco più di trecento, e l'elenco si guarda davvero. */
@media (max-width: 560px) {
  .car { grid-template-columns: 124px minmax(0, 1fr); gap: 12px; align-items: start; }
  .car-img img { aspect-ratio: 4 / 3; }
  .car-name { font-size: 1.08rem; margin-bottom: 6px; }
  .car-cat { font-size: .68rem; }
  .car .chips { gap: 4px; }
  .car .chip { font-size: .72rem; padding: 2px 7px; }
  .car-price { grid-column: 1 / -1; }
  .car-price .amount { font-size: 1.45rem; }
}
@media (max-width: 560px) {
  /* nella colonna stretta le pastiglie si stringono, così ne stanno due per
     riga invece di una sola e la scheda non si allunga */
  .car .chips { gap: 5px; margin: 5px 0 7px; }
  .car .chips li { font-size: .78rem; padding: 3px 8px; gap: 4px; }
  .car .chips li svg { width: 13px; height: 13px; }
  .car-badge { font-size: .6rem; padding: 3px 7px; top: 6px; left: 6px; }
}

/* ------------------------------------------- piè di pagina sul telefono ---
   Le quattro colonne, messe in verticale, facevano quasi due schermate di
   link. Su schermo largo restano aperte e identiche a prima; sotto i 760 px
   diventano tre cassetti che si aprono con un tocco.                       */
.footer-col--pieghevole > summary { list-style: none; cursor: default; }
.footer-col--pieghevole > summary::-webkit-details-marker { display: none; }
.footer-col--pieghevole > summary h2 { margin: 0 0 13px; }

@media (min-width: 761px) {
  /* su schermo largo il cassetto è sempre aperto: nessuno deve cliccare */
  .footer-col--pieghevole > summary { pointer-events: none; }
}

@media (max-width: 760px) {
  .footer-col--pieghevole > summary {
    cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 2px 0;
  }
  .footer-col--pieghevole > summary h2 {
    margin: 0; padding: 13px 0; border-bottom: 0; flex: 1 1 auto;
  }
  .footer-col--pieghevole > summary::after {
    content: ""; flex: none; width: 9px; height: 9px; margin-right: 3px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transform-origin: 60% 60%; transition: transform .18s; opacity: .75;
  }
  .footer-col--pieghevole[open] > summary::after { transform: rotate(-135deg); }
  .footer-col--pieghevole { border-bottom: 1px solid rgba(255,255,255,.13); }
  .footer-col--pieghevole > ul,
  .footer-col--pieghevole > p,
  .footer-col--pieghevole > .footer-h2-2 { padding-bottom: 14px; }
  .footer-grid { gap: 0 32px; margin-bottom: 24px; }
  .footer-col--brand { padding-bottom: 22px; }
}

/* ------------------------------ la ricerca su "Le nostre auto" ------------
   Su schermo largo resta com'era, sempre aperta. Sul telefono si chiude,
   perché prima occupava tutta la prima schermata e le auto cominciavano
   soltanto a novecento pixel.                                             */
.ricerca-cassetto > summary { list-style: none; }
.ricerca-cassetto > summary::-webkit-details-marker { display: none; }
@media (min-width: 761px) {
  .ricerca-cassetto > summary { display: none; }
}
@media (max-width: 760px) {
  .ricerca-cassetto > summary {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    margin-top: 14px; padding: 13px 16px;
    background: var(--white); border: 1px solid var(--line-forte); border-radius: var(--r-sm);
    font-weight: 700; box-shadow: var(--ombra);
  }
  .ricerca-cassetto > summary::before {
    content: ""; flex: none; width: 17px; height: 17px;
    background: currentColor; opacity: .8;
    -webkit-mask: var(--ico-cal) center/contain no-repeat; mask: var(--ico-cal) center/contain no-repeat;
  }
  .ricerca-cassetto > summary::after {
    content: ""; margin-left: auto; flex: none; width: 8px; height: 8px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg); transform-origin: 60% 60%; transition: transform .18s;
  }
  .ricerca-cassetto[open] > summary::after { transform: rotate(-135deg); }
  .ricerca-cassetto-dati { color: var(--mare); font-weight: 700; font-size: .9rem; }
  .ricerca-cassetto-tit { flex: 0 1 auto; }
  .ricerca-cassetto[open] > summary { border-radius: var(--r-sm) var(--r-sm) 0 0; margin-bottom: 0; }
  .ricerca-cassetto .search { margin-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); }
}
:root { --ico-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E"); }

/* ------------------------------------ il pulsante WhatsApp galleggiante ---
   Stando fisso in basso a destra copriva il testo e, nei moduli, l'ultimo
   campo. Sul telefono si rimpicciolisce e si sposta in un angolo più pulito,
   e ogni pagina lascia sotto lo spazio che gli serve, così non si appoggia
   mai su qualcosa da leggere o da toccare.                                 */
body { padding-bottom: env(safe-area-inset-bottom, 0); }
.site-footer { padding-bottom: 86px; }

@media (max-width: 760px) {
  .wa-float { width: 48px; height: 48px; right: 12px; bottom: 12px; }
  .wa-float svg { width: 25px; height: 25px; }
  /* i moduli finiscono con un po' d'aria, così il pulsante non ci si appoggia */
  .form > .form-foot:last-child,
  .book-box > .btn:last-child,
  .richiesta-form > .btn:last-child { margin-bottom: 58px; }
}

/* mentre si scrive in un campo il pulsante si fa da parte: sulle tastiere
   del telefono finiva proprio sopra il campo attivo */
body:has(input:focus, textarea:focus, select:focus) .wa-float {
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.pay-riga { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* ------------------------------------------- il carrello lasciato a metà ---
   Prima era una fascia in cima: spingeva giù tutta la pagina, copriva
   l'apertura e scorrendo spariva, proprio quando serviva. Ora è una striscia
   sottile incollata in fondo allo schermo: non toglie spazio a niente,
   resta sempre lì e i minuti scendono da soli.                            */
.carrello-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--ink); color: #fff;
  border-top: 3px solid var(--giallo);
  box-shadow: 0 -4px 22px rgba(38, 33, 29, .26);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  animation: carrello-su .26s cubic-bezier(.2,.7,.3,1);
}
@keyframes carrello-su { from { transform: translateY(100%); } to { transform: none; } }
.carrello-barra[hidden] { display: none; }

.carrello-barra-dentro { display: flex; align-items: center; gap: 14px; }
.carrello-icona { flex: none; width: 24px; height: 24px; color: var(--giallo); }
.carrello-icona svg { width: 100%; height: 100%; display: block; }

.carrello-testo { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 5px 10px; flex-wrap: wrap; }
.carrello-testo b { font-size: .98rem; }
.carrello-auto { color: #d8d1c8; font-size: .93rem; }
.carrello-tempo {
  font-size: .82rem; font-weight: 700; white-space: nowrap;
  color: var(--giallo); background: rgba(224, 163, 60, .16);
  padding: 2px 9px; border-radius: 999px;
}
.carrello-tempo--poco { color: #ffd9d9; background: rgba(192, 13, 15, .4); }

.carrello-barra .btn-primary { flex: none; }
.btn-sm { padding: 9px 18px; font-size: .9rem; }
.carrello-chiudi {
  flex: none; width: 30px; height: 30px; padding: 0; line-height: 1;
  background: none; border: 0; color: #9d948b; font-size: 1.5rem; cursor: pointer;
}
.carrello-chiudi:hover { color: #fff; }

/* il pulsante WhatsApp si alza per non finirci sopra */
body:has(.carrello-barra:not([hidden])) .wa-float { bottom: 84px; }

@media (max-width: 620px) {
  /* sul telefono deve stare in due righe strette: il nome dell'auto si
     capisce già dal resto e la striscia non deve rubare mezzo schermo */
  .carrello-barra { padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); }
  .carrello-barra-dentro { gap: 10px; align-items: center; }
  .carrello-icona { display: none; }
  .carrello-auto { display: none; }
  .carrello-testo { display: block; font-size: .88rem; line-height: 1.35; flex: 1 1 0; min-width: 0; }
  .carrello-testo b { font-size: .9rem; display: block; }
  .carrello-tempo { display: inline-block; margin-top: 2px; font-size: .76rem; padding: 1px 8px; }
  .btn-sm { padding: 9px 14px; font-size: .86rem; }
  .carrello-chiudi { width: 26px; height: 26px; font-size: 1.3rem; }
  body:has(.carrello-barra:not([hidden])) .wa-float { bottom: 76px; }
}
.quote-error--mio { background: #fff8ea; border: 1px solid var(--giallo); border-radius: var(--r-sm); padding: 10px 12px; color: var(--ink); }
.quote-error--mio a { font-weight: 700; white-space: nowrap; }

/* --------------------------------------------------- mete e gite in zona ---
   Le schede dei posti da visitare. La foto è facoltativa: quando non c'è, al
   suo posto va un disegno fatto con le tinte del sito, così la pagina si può
   pubblicare anche prima di avere le fotografie e non sembra incompiuta. */
.blk--mete .wrap > h2 { margin-bottom: 22px; }
.mete { display: grid; grid-template-columns: repeat(var(--col, 3), minmax(0, 1fr)); gap: 20px; align-items: start; }
.meta {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .16s, transform .16s, border-color .16s;
}
.meta:hover { box-shadow: var(--ombra); transform: translateY(-2px); border-color: var(--line-forte); }
.meta-foto { aspect-ratio: 20 / 13; background: var(--calce-scuro); overflow: hidden; }
.meta-foto img, .meta-disegno { width: 100%; height: 100%; object-fit: cover; display: block; }
.meta-disegno {
  --d-cielo: #e3f0ef; --d-mare: #0e6b70; --d-sole: #f0cf8e; --d-terra: #d8cab7;
  --d-muro: #faf6f0; --d-tetto: #46403a; --d-grotta: #46403a; --d-sabbia: #efe6d8;
  --d-tronco: #8a7a63; --d-foglia: #6f7d4f; --d-barca: #c9703a; --d-vela: #ffffff;
}
.meta-testo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.meta-testo h3 { font-size: 1.12rem; margin: 0; }
.meta-km {
  margin: 0; font-size: .86rem; font-weight: 700; color: var(--terra);
  letter-spacing: .01em;
}
.meta-testo p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.meta-piu { margin-top: 4px; }
.meta-piu > summary {
  cursor: pointer; list-style: none; color: var(--terra); font-weight: 700; font-size: .92rem;
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 0;
}
.meta-piu > summary::-webkit-details-marker { display: none; }
.meta-piu > summary::after { content: '+'; font-size: 1.15rem; line-height: 1; }
.meta-piu[open] > summary::after { content: '\2212'; }
.meta-piu > summary:focus-visible { outline: 3px solid var(--mare); outline-offset: 3px; }
.meta-piu .punto-dettaglio { padding: 8px 0 0; font-size: .93rem; }

@media (max-width: 900px) { .mete { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .mete { grid-template-columns: 1fr; gap: 16px; }
  .meta-foto { aspect-ratio: 16 / 9; }
}

/* nel gestionale: una casella foto per ogni meta */
.car-mete { margin: 10px 0 0; font-weight: 700; font-size: .95rem; }
.car-mete a { color: var(--terra); }

/* ===========================================================================
   Banner dei cookie. «Accetta» e «Rifiuta» hanno lo stesso peso: rifiutare
   deve costare un clic come accettare, non tre.
   =========================================================================== */
.cookie-banner {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  background: #fff; border-top: 3px solid var(--gozzo, #c00d0f);
  box-shadow: 0 -8px 30px rgba(0,0,0,.14);
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom));
}
.cookie-banner-dentro {
  max-width: 1120px; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; align-items: start;
}
.cookie-titolo { margin: 0 0 4px; font-weight: 800; font-size: 1.05rem; }
.cookie-testo p { margin: 0; max-width: 72ch; font-size: .94rem; line-height: 1.5; }
.cookie-azioni { display: flex; gap: 10px; flex-wrap: wrap; align-self: center; }
.cookie-azioni .btn { min-width: 132px; justify-content: center; }
.cookie-scelte { grid-column: 1 / -1; }
.cookie-scelte > summary {
  cursor: pointer; font-weight: 650; font-size: .9rem; padding: 6px 0;
  text-decoration: underline; text-underline-offset: 3px;
}
.cookie-categorie { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 10px; }
.cookie-cat { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: .9rem; }
.cookie-cat input { margin-top: 3px; }

@media (max-width: 760px) {
  .cookie-banner-dentro { grid-template-columns: 1fr; }
  .cookie-azioni .btn { flex: 1 1 140px; }
  .cookie-banner { max-height: 80vh; overflow-y: auto; }
}

/* La mappa in attesa del consenso. */
.mappa-ferma {
  display: grid; place-items: center; min-height: 240px; padding: 24px 16px;
  background: #f4f4f6; border: 1px dashed #c9c9d1; border-radius: 6px; text-align: center;
}
.mappa-ferma-dentro { max-width: 46ch; }
.mappa-ferma p { margin: 0 0 8px; }
.mappa-ferma-azioni { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

/* Il riquadro del codice usa e getta, sopra alla firma. */
.otp-box {
  border: 2px solid var(--gozzo, #c00d0f); border-radius: 8px;
  padding: 18px 20px; margin: 22px 0; background: #fff;
}
.otp-box--ok { border-color: #0f7a40; background: #f4fbf6; }
.otp-box h2 { margin: 0 0 8px; font-size: 1.15rem; }
.otp-box p { margin: 0 0 10px; max-width: 64ch; }
.otp-fatto { color: #0f7a40; }
.otp-canali { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 14px 0 6px; }
.otp-canale { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.otp-dove { font-size: .9rem; color: #6b6b73; }
.otp-canali--riprova { gap: 8px 18px; margin-top: 4px; }
.otp-mandato { font-weight: 600; }
.otp-verifica { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.otp-verifica label { display: block; font-size: .9rem; margin-bottom: 4px; }
.otp-input {
  font-size: 1.5rem; letter-spacing: .32em; text-align: center;
  width: 10ch; padding: 8px 10px;
}
.otp-privacy { margin-top: 14px; padding-top: 10px; border-top: 1px solid #ededf1; }

/* Cosa vuol dire firmare, dentro al modulo di accettazione. */
.firma-nota {
  background: #f7f7f9; border-left: 4px solid #c9c9d1; border-radius: 4px;
  padding: 12px 16px; margin: 0 0 16px;
}
.firma-nota-titolo { margin: 0 0 6px; font-weight: 700; }
.firma-nota ul { margin: 0; padding-left: 18px; font-size: .92rem; }
.firma-nota li { margin-bottom: 4px; max-width: 70ch; }

/* ===========================================================================
   Il contratto è un documento che si legge dall'inizio alla fine: una
   barra appiccicata in alto che copre il testo mentre si scorre, su un
   telefono, è solo spazio rubato alla lettura. Qui sta ferma.
   =========================================================================== */
body:has(.contract-page) .site-header { position: static; }

/* Il banner dei cookie su un telefono non deve mangiarsi mezzo schermo. */
@media (max-width: 560px) {
  .cookie-banner { padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
  .cookie-banner-dentro { gap: 10px; }
  .cookie-titolo { font-size: .98rem; margin-bottom: 2px; }
  .cookie-testo p { font-size: .86rem; line-height: 1.45; }
  .cookie-azioni { gap: 8px; }
  .cookie-azioni .btn { min-width: 0; padding: 10px 12px; font-size: .92rem; }
  .cookie-scelte > summary { padding: 4px 0; }
}

/* Perché non puoi ancora firmare, scritto per esteso. */
.firma-bloccata ul { margin: 6px 0 0; padding-left: 18px; }
.firma-bloccata li { margin-bottom: 3px; }

/* La riga di informativa sotto ai moduli: uguale ovunque. */
.nota-privacy {
  font-size: .85rem; color: #6b6b73; margin: 10px 0 0; line-height: 1.5;
  padding-top: 8px; border-top: 1px solid #ededf1;
}
.nota-privacy a { color: inherit; }


/* «Scrivici» sulla pagina della prenotazione */
.panel-scrivici { margin: 26px 0 0; padding: 20px 22px; background: var(--calce, #faf6f0);
  border: 1px solid var(--bordo, #e6dccf); border-radius: 12px; }
.panel-scrivici h2 { margin: 0 0 4px; }
.panel-scrivici .muted { margin: 0 0 12px; }
.form-scrivici textarea { width: 100%; font: inherit; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--bordo, #d8cab7); background: #fff; resize: vertical; }
.form-scrivici button { margin-top: 10px; }
.form-scrivici .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }