@font-face {
  font-family: 'Funnel Display';
  src: url('fonts/FunnelDisplay.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: 'Goli';
  src: url('fonts/Goli.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* --- colori del brand --- */
  --obsidian: #222019;
  --sunset: #FC550B;
  --sunset-deep: #D94405;
  --cobalt: #286B91;
  --cobalt-deep: #1D5171;
  --pebbles: #E1E0C2;   /* riservato al lockup del logo su fondo scuro */
  --night: #1E3444;    /* blu profondo, dalle card social e dall.illustrazione hero */
  --night-soft: #27455C;  /* schede sollevate sulla fascia notte */
  --night-line: #38607E;  /* bordo delle stesse schede */
  --wa: #25D366;          /* verde ufficiale WhatsApp */

  /* --- neutri "Nebbia": grigio freddo con una punta di Cobalt --- */
  --bg: #EEF2F5;        /* fondo pagina */
  --bg-deep: #E4EAEF;   /* fasce alternate, hero interne */
  --surface: #FFFFFF;   /* schede, header, riquadri sollevati */
  --line: #D8E1E8;      /* bordi e separatori */
  --line-soft: #E6ECF1; /* separatori leggeri */
  --ink-soft: #4A5560;  /* testo secondario */

  /* --- inchiostri sulle superfici scure --- */
  --on-dark: #DFE4E8;
  --on-dark-dim: #A3ADB5;
  --on-dark-accent: #DCE6EC;

  --display: 'Funnel Display', 'Trebuchet MS', sans-serif;
  --body: 'Goli', 'Segoe UI', system-ui, sans-serif;
  --radius: 16px;
  --wa-glyph: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347M12.05%2021.785h-.004a9.87%209.87%200%200%201-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%200%201-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%200%201%202.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200%200%2012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%200%200%205.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%200%200-3.48-8.413%22/%3E%3C/svg%3E");
  --shadow: 0 12px 32px rgba(30, 41, 51, .10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  font-family: var(--body);
  /* Testo fluido: cresce con la finestra invece di saltare fra breakpoint.
     ~15.5px su telefono stretto, 17px su laptop, fino a 19px su schermi grandi. */
  font-size: clamp(15.5px, 0.42vw + 14.2px, 19px);
  line-height: 1.65;
  color: var(--obsidian);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.13; text-wrap: balance; }
img, svg { max-width: 100%; }
a { color: var(--cobalt-deep); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 5px; }

/* Contenitore fluido: margini che si stringono sui telefoni e si allargano
   sui monitor grandi, senza far diventare le righe di testo troppo lunghe. */
.wrap { max-width: clamp(1120px, 88vw, 1320px); margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.narrow { max-width: min(780px, 100%); }

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

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-weight: 500; font-size: 12.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cobalt);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--sunset); flex: none; }
.on-dark .eyebrow, .eyebrow.light { color: var(--on-dark-accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body); font-weight: 500; font-size: 16px;
  padding: 14px 26px; border-radius: 999px; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
/* Sunset = solo prenotazione. Ogni altro invito all'azione usa un altro colore
   della palette, così l'arancione resta il segnale univoco del "prenota". */
.btn-primary { background: var(--sunset); color: #fff; box-shadow: 0 6px 18px rgba(252, 85, 11, .26); }
.btn-primary:hover { background: var(--sunset-deep); transform: translateY(-2px); }

/* Cobalt: contatto e messaggi */
.btn-cobalt { background: var(--cobalt); color: #fff; box-shadow: 0 6px 18px rgba(40, 107, 145, .26); }
.btn-cobalt:hover { background: var(--cobalt-deep); transform: translateY(-2px); }

/* Obsidian: azioni di servizio (carica mappa, preferenze cookie) */
.btn-obsidian { background: var(--obsidian); color: var(--pebbles); }
.btn-obsidian:hover { background: #100F0B; transform: translateY(-2px); }

/* Contorno cobalt: approfondimenti, lettura */
.btn-ghost { border-color: var(--cobalt); color: var(--cobalt-deep); }
.btn-ghost:hover { background: var(--cobalt); color: #fff; }

/* Contorno pebbles su fondo scuro */
.btn-pebbles { background: var(--pebbles); color: var(--obsidian); }
.btn-pebbles:hover { background: #EFEEDA; transform: translateY(-2px); }
.btn-light { background: var(--surface); color: var(--cobalt-deep); }
.btn-light:hover { transform: translateY(-2px); }
.btn-outline-light { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--cobalt-deep); }

/* WhatsApp: il glifo del marchio come maschera, cosi eredita il colore del
   testo in ogni variante di bottone. Al passaggio del mouse il bottone va nel
   verde ufficiale, con inchiostro scuro perche il bianco su #25D366 non
   raggiungerebbe il contrasto minimo. */
.btn-wa::before {
  content: ""; flex: none; width: 19px; height: 19px;
  background-color: currentColor;
  -webkit-mask: var(--wa-glyph) center / contain no-repeat;
          mask: var(--wa-glyph) center / contain no-repeat;
}
.btn.btn-wa:hover {
  background: var(--wa); border-color: var(--wa); color: #0A2E23;
  box-shadow: 0 6px 18px rgba(37, 211, 102, .34);
  transform: translateY(-2px);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(238, 242, 245, .93); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--obsidian); }
.brand svg { width: 34px; height: 36px; flex: none; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.1; }
.brand-name small {
  display: block; font-family: var(--body); font-weight: 400; font-size: 10.5px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft);
}
.menu-panel { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.menu-panel a { font-size: 15.5px; font-weight: 500; color: var(--obsidian); text-decoration: none; }
.menu-panel a:hover { color: var(--sunset); }
.menu-panel a[aria-current="page"] { color: var(--sunset); }
.nav .btn { padding: 10px 20px; font-size: 15px; }

/* ---------- Selettore di lingua ---------- */
/* Senza JS resta la coppia di link IT / EN; con JS diventa un menu a tendina. */
.lang-switch { display: flex; align-items: center; gap: 2px; margin-left: 18px; flex: none; }
.lang-switch a {
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-decoration: none;
  color: var(--ink-soft); padding: 5px 7px; border-radius: 7px; line-height: 1;
}
.lang-switch a:hover { color: var(--cobalt); background: var(--bg-deep); }
.lang-switch a[aria-current="true"] { color: var(--obsidian); background: var(--bg-deep); }
.lang-switch > span { color: var(--line); font-size: 12px; }

.flag { width: 20px; height: 14px; border-radius: 3px; flex: none; display: block; box-shadow: 0 0 0 1px rgba(34,32,25,.12) inset; }

/* --- Tendina lingua (creata da nav.js) --- */
.lang-dd { position: relative; margin-left: 16px; flex: none; }
.lang-dd .lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--obsidian);
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; cursor: pointer; line-height: 1;
}
.lang-dd .lang-btn:hover { background: var(--bg-deep); border-color: var(--cobalt); }
.lang-dd .chev { width: 10px; height: 10px; flex: none; transition: transform .18s ease; color: var(--ink-soft); }
.lang-dd.open .chev { transform: rotate(180deg); }
.lang-dd .lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 178px; list-style: none; margin: 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 14px 34px -16px rgba(34,32,25,.35);
  display: none;
}
.lang-dd.open .lang-menu { display: block; }
.lang-dd .lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; font-size: 14.5px; font-weight: 600;
  color: var(--obsidian); text-decoration: none; letter-spacing: 0;
}
.lang-dd .lang-menu a:hover { background: var(--bg-deep); color: var(--cobalt-deep); }
.lang-dd .lang-menu a[aria-current="true"] { background: var(--bg-deep); font-weight: 700; }
.lang-dd .lang-menu .tick { margin-left: auto; color: var(--cobalt); font-size: 13px; }

/* ---------- Pulsante menu a panino ---------- */
.nav-toggle { display: none; }

/* La barra delle pagine e' sempre visibile: si stringe progressivamente e,
   sugli schermi piccoli, passa su una seconda riga scorrevole sotto il logo. */
@media (max-width: 1060px) {
  .nav { gap: 18px; }
  .menu-panel { gap: 17px; }
  .menu-panel a { font-size: 14.5px; }
  .nav .btn { padding: 10px 17px; font-size: 14.5px; }
  .lang-switch { margin-left: 12px; }
}

@media (max-width: 900px) {
  .nav { gap: 13px; }
  .menu-panel { gap: 14px; }
  .menu-panel a { font-size: 13.5px; }
  .brand-name { font-size: 18px; }
  .brand-name small { display: none; }
  .nav .btn { padding: 9px 14px; font-size: 13.5px; white-space: nowrap; }
}

/* Sotto gli 860px il menu passa su una seconda riga.
   Le voci vanno a capo invece di scorrere in orizzontale: con lo scorrimento
   le ultime voci restavano fuori schermo e nessuno le trovava. */
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 0; row-gap: 0; }
  .brand { order: 1; }
  .nav-cta { order: 2; margin-left: auto; }
  .lang-switch { order: 3; margin-left: 10px; }
  /* Senza JS: le voci restano visibili come lista che va a capo */
  .menu-panel {
    order: 4; width: 100%; margin-left: 0;
    flex-wrap: wrap; column-gap: 22px; row-gap: 0;
    padding: 2px 0 6px;
    border-top: 1px solid var(--line-soft); margin-top: 10px;
  }
  .menu-panel a {
    font-size: 15px; white-space: nowrap;
    display: flex; align-items: center; min-height: 44px;   /* area di tocco */
  }
  .brand-name small { display: block; }

  /* --- Con JS: menu a panino --- */
  .nav-js .nav { padding-bottom: 12px; }
  .nav-js .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    order: 3; margin-left: 10px; flex: none;
    width: 46px; height: 46px; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid var(--line); border-radius: 12px;
  }
  .nav-js .nav-toggle:hover { border-color: var(--cobalt); background: var(--bg-deep); }
  .nav-js .nav-toggle .bars { position: relative; display: block; width: 20px; height: 2px; background: var(--obsidian); border-radius: 2px; transition: background .15s ease; }
  .nav-js .nav-toggle .bars::before,
  .nav-js .nav-toggle .bars::after {
    content: ''; position: absolute; left: 0; width: 20px; height: 2px;
    background: var(--obsidian); border-radius: 2px;
    transition: transform .2s ease, top .2s ease;
  }
  .nav-js .nav-toggle .bars::before { top: -6px; }
  .nav-js .nav-toggle .bars::after { top: 6px; }
  .nav-js .nav-open .nav-toggle .bars { background: transparent; }
  .nav-js .nav-open .nav-toggle .bars::before { top: 0; transform: rotate(45deg); }
  .nav-js .nav-open .nav-toggle .bars::after { top: 0; transform: rotate(-45deg); }

  /* Pannello chiuso: niente elenco di sezioni, niente lingua nell'intestazione */
  .nav-js .menu-panel,
  .nav-js .lang-switch,
  .nav-js .lang-dd { display: none; }

  .nav-js .nav-open .menu-panel {
    display: flex; flex-direction: column; order: 4;
    width: 100%; margin: 12px 0 0; padding: 6px 0 0;
    column-gap: 0; border-top: 1px solid var(--line-soft);
  }
  .nav-js .nav-open .menu-panel a {
    font-size: 16.5px; min-height: 50px;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-js .nav-open .menu-panel a:last-child { border-bottom: 0; }

  /* La lingua vive dentro il pannello, sotto le voci */
  .nav-js .nav-open .lang-dd { display: block; order: 5; width: 100%; margin: 4px 0 6px; position: static; }
  .nav-js .nav-open .lang-dd .lang-btn { display: none; }
  .nav-js .nav-open .lang-dd .lang-menu {
    display: block; position: static; min-width: 0; width: 100%;
    border: 0; box-shadow: none; background: transparent; padding: 0;
  }
  .nav-js .nav-open .lang-dd .lang-menu a { min-height: 48px; font-size: 16px; }
  .nav-js .nav-open .lang-switch { display: flex; order: 5; width: 100%; gap: 8px; margin: 6px 0; }
  .nav-js .nav-open .lang-switch a { flex: 1; justify-content: center; border: 1px solid var(--line); border-radius: 10px; }
  .nav-js .nav-open .lang-switch > span { display: none; }
  .nav-js .nav-open .lang-switch a span { display: inline; margin-left: 8px; }

  /* Aree di tocco: lingua (senza JS), footer e righe di contatto */
  .lang-switch a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; }
  .site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .c-row a { display: inline-block; padding: 3px 0; }

  /* Safari iOS ingrandisce la pagina quando si tocca un campo con font < 16px.
     Serve !important perche' i campi hanno font:inherit inline. */
  input, textarea, select { font-size: 16px !important; }
}

@media (max-width: 560px) {
  .brand { gap: 9px; }
  .brand svg, .brand img { width: 30px; height: 32px; }
  .brand-name { font-size: 17px; }
  .brand-name small { display: none; }
  .nav .btn { padding: 10px 15px; font-size: 14px; }
  .menu-panel { column-gap: 17px; }
}

/* ---------- Sections & tonal bands ---------- */
/* Spaziatura fluida: le fasce si accorciano sui telefoni senza media query */
section { padding: clamp(48px, 7vw, 88px) 0; }
.band-sand { background: var(--bg); }
.band-deep { background: var(--bg-deep); }
.band-surface { background: var(--surface); }
.band-dark { background: var(--night); color: var(--on-dark); }
.band-cobalt { background: var(--cobalt); color: #E3EDF4; }
.band-dark h1, .band-dark h2, .band-dark h3,
.band-cobalt h1, .band-cobalt h2, .band-cobalt h3 { color: #fff; }

.sec-head { max-width: 660px; margin-bottom: 48px; }
.sec-head h2 { font-size: clamp(29px, 4vw, 41px); font-weight: 700; margin-top: 14px; }
.sec-head p { color: var(--ink-soft); margin-top: 14px; }
.band-dark .sec-head p { color: var(--on-dark-dim); }
.band-cobalt .sec-head p { color: #CFE0EB; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: 72px 0 60px; background: var(--bg-deep); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(34px, 5.2vw, 56px); font-weight: 730; margin: 16px 0 18px; }
.page-hero p { font-size: 19px; color: var(--ink-soft); max-width: 40em; }
.page-hero .btn { margin-top: 28px; }

.crumb { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 4px; }
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--sunset); }

/* ---------- Prose ---------- */
.prose p { margin-bottom: 18px; color: var(--ink-soft); max-width: 66ch; }
.prose p b, .prose strong { color: var(--obsidian); font-weight: 620; }
.prose h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; margin: 44px 0 14px; }
.prose h3 { font-size: 21px; font-weight: 650; margin: 30px 0 10px; }
.prose ul { margin: 0 0 18px 20px; color: var(--ink-soft); }
.prose li { margin-bottom: 7px; }
.prose > *:first-child { margin-top: 0; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; background: var(--bg-deep); padding: 2px 6px; border-radius: 5px;
}
.note { font-size: 14.5px; color: var(--ink-soft); font-style: italic; }

/* Tabelle informative (cookie policy): scorrono da sole su schermi stretti */
.table-plain {
  width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px;
  display: block; overflow-x: auto; white-space: normal;
}
.table-plain th, .table-plain td {
  border: 1px solid var(--line); padding: 11px 14px; text-align: left; vertical-align: top;
  min-width: 130px;
}
.table-plain th { background: var(--bg-deep); font-weight: 620; color: var(--obsidian); }
.table-plain td { color: var(--ink-soft); }

/* Su telefono le tabelle diventano schede impilate: scorrere di lato una
   tabella a quattro colonne su 360px e' scomodo e si perde l'intestazione. */
@media (max-width: 560px) {
  .table-plain, .table-plain tbody, .table-plain tr, .table-plain td { display: block; width: auto; }
  .table-plain { overflow-x: visible; }
  .table-plain thead { display: none; }
  .table-plain tr {
    border: 1px solid var(--line); border-radius: 12px;
    margin-bottom: 14px; overflow: hidden; background: var(--surface);
  }
  .table-plain td { border: 0; border-bottom: 1px solid var(--line-soft); padding: 11px 15px; min-width: 0; }
  .table-plain tr td:last-child { border-bottom: 0; }
  .table-plain td::before {
    content: attr(data-label); display: block;
    font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 650; margin-bottom: 3px; opacity: .85;
  }
}

.pull {
  font-family: var(--display); font-weight: 620; font-size: clamp(23px, 3vw, 31px);
  line-height: 1.28; color: var(--obsidian);
  border-left: 4px solid var(--sunset); padding-left: 22px; margin: 26px 0;
}
.pull em { color: var(--cobalt); font-style: normal; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Sui tablet due colonne, non una: una colonna sola sprecava mezzo schermo */
@media (max-width: 1000px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3 { font-size: 20px; font-weight: 680; }
.card p { font-size: 15.5px; color: var(--ink-soft); }
.card .icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--obsidian); }
.card .icon svg { width: 24px; height: 24px; stroke: var(--on-dark-accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Numbered steps: order is meaningful here (a real sequence) */
.steps { counter-reset: step; }
.step {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 30px 26px 26px;
  /* Colonna flessibile: serve solo per poter mettere la foto sopra al numero,
     che e generato da ::before e altrimenti resterebbe per primo. */
  display: flex; flex-direction: column; overflow: hidden;
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .06em;
  color: var(--sunset); display: block; margin-bottom: 12px;
}
.step h3 { font-size: 20px; margin-bottom: 10px; }
.step p { font-size: 15.5px; color: var(--ink-soft); }

/* Benefit / symptom chip lists */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.chips span {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px; font-size: 15px;
  transition: transform .24s cubic-bezier(.2,.7,.3,1), box-shadow .24s ease,
              background .24s ease, border-color .24s ease, color .24s ease;
}
.band-deep .chips span { background: var(--bg); }

/* Al passaggio del mouse la pastiglia si stacca dalla pagina e prende il cobalto.
   Solo su puntatori veri: al tocco lo stato :hover resterebbe attaccato. */
@media (hover: hover) and (pointer: fine) {
  .chips span:hover {
    transform: translateY(-4px);
    background: #F2F8FC;
    border-color: var(--cobalt);
    color: var(--cobalt-deep);
    box-shadow: 0 10px 22px rgba(40, 107, 145, .20);
  }
  .band-deep .chips span:hover { background: var(--surface); }
}
/* Il blocco globale in fondo al foglio azzera gia le transizioni; qui resta
   solo da togliere il sollevamento, che altrimenti scatterebbe di colpo. */
@media (prefers-reduced-motion: reduce) {
  .chips span:hover { transform: none; box-shadow: none; }
}


/* ---------- Fotografie ---------- */
/* Le foto sono servite in due misure: il browser sceglie la seconda solo sugli
   schermi ad alta densita, cosi su un telefono normale non si scarica il doppio. */
.photo {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); background: var(--bg-deep);
}
/* A tutta larghezza una 3:2 diventa altissima su desktop e mangia lo schermo:
   il tetto la tiene entro una fascia, e object-fit evita lo schiacciamento. */
.photo-wide { aspect-ratio: 3 / 2; object-fit: cover; max-height: 440px; }

/* Foto in testa alle schede del percorso: arriva ai bordi della scheda,
   quindi annulla il padding con margini negativi. */
.step-photo {
  display: block; width: auto; order: -1;
  margin: -30px -26px 22px; max-width: none;
  aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bg-deep);
}

/* Didascalia sotto una foto a tutta larghezza */
.photo-note { font-size: 14.5px; color: var(--ink-soft); margin-top: 12px; }

/* ---------- Split (image + text) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 56px; align-items: center; }
.split.reverse { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 900px) { .split, .split.reverse { grid-template-columns: 1fr; gap: 36px; } }
/* Le colonne della griglia non devono essere allargate dal contenuto (min-width:auto) */
.split > * { min-width: 0; }

/* ---------- Campi modulo ---------- */
/* Senza questo, la larghezza "size" di default degli input sfonda il layout su mobile */
input, textarea, select { max-width: 100%; min-width: 0; box-sizing: border-box; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.figure {
  aspect-ratio: 4 / 4.6; border-radius: var(--radius); overflow: hidden; position: relative;
  background: linear-gradient(160deg, var(--cobalt) 0%, var(--cobalt-deep) 100%);
  display: grid; place-items: center;
}
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure svg { width: 55%; opacity: .9; }
.figure figcaption {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  background: rgba(34, 32, 25, .78); color: #fff; border-radius: 10px;
  padding: 10px 16px; font-size: 13.5px; backdrop-filter: blur(4px);
}

.creds { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.cred { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; }
.cred::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--sunset); margin-top: 8px; }

/* ---------- Testimonials ---------- */
.quote {
  background: var(--night-soft); border: 1px solid var(--night-line); border-radius: var(--radius);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 16px;
}
.quote .stars { color: var(--sunset); font-size: 15px; letter-spacing: 3px; }
.quote p { font-size: 15.5px; color: var(--on-dark); }
.quote cite { font-style: normal; font-weight: 600; color: #fff; font-family: var(--display); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 20px; padding: 22px 4px;
  font-family: var(--display); font-weight: 630; font-size: 19px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+'; font-family: var(--body); font-weight: 300; font-size: 28px;
  color: var(--sunset); line-height: 1; flex: none; transition: transform .2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .answer { padding: 0 4px 26px; color: var(--ink-soft); max-width: 66ch; }
.faq-list .answer p { margin-bottom: 12px; }
.faq-list .answer p:last-child { margin-bottom: 0; }

/* ---------- Price list ---------- */
.price-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 20px;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 24px 26px; margin-bottom: 14px;
}
.price-row h3 { font-size: 20px; font-weight: 680; flex: 1 1 240px; }
.price-row .dur { font-size: 15px; color: var(--ink-soft); }
.price-row .amt {
  font-family: var(--display); font-weight: 750; font-size: 24px;
  color: var(--cobalt-deep); font-variant-numeric: tabular-nums;
}
.price-row p { flex: 1 1 100%; font-size: 15.5px; color: var(--ink-soft); margin-top: -2px; }

/* ---------- Contact ---------- */
.contact-card {
  background: var(--surface); color: var(--obsidian); border-radius: var(--radius);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 18px;
}
.contact-card h3 { font-size: 20px; }
.c-row { display: flex; gap: 14px; align-items: flex-start; font-size: 15.5px; }
.c-row svg { width: 20px; height: 20px; flex: none; margin-top: 3px; stroke: var(--cobalt); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c-row a { color: var(--obsidian); text-decoration-color: var(--sunset); }
.c-row small { display: block; color: var(--ink-soft); font-size: 13px; }

.map-embed { border: 0; width: 100%; height: 340px; border-radius: var(--radius); display: block; }
/* Segnaposto della mappa: Google Maps si carica solo dopo un clic esplicito */
.map-consent {
  background: var(--surface); border: 1px dashed var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 28px 24px; height: 340px; box-sizing: border-box;
}
.map-consent p { color: var(--ink-soft); font-size: 15.5px; max-width: 42ch; margin: 0; }
.map-consent .map-alt { font-size: 14px; }
/* Versione compatta, per le risposte delle FAQ */
.map-sm, iframe.map-embed.map-sm { height: 240px; padding: 20px; }
.map-sm p { font-size: 14.5px; }

/* ---------- Article list ---------- */
.article-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.article-card h3 { font-size: 20px; font-weight: 680; }
.article-card p { font-size: 15.5px; color: var(--ink-soft); }
.article-card .more { font-size: 15px; color: var(--sunset); font-weight: 500; margin-top: auto; padding-top: 6px; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
.cta-band p { color: #CFE0EB; max-width: 44em; margin: 0 auto 30px; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--obsidian); color: var(--on-dark-dim); padding: 58px 0 40px; font-size: 14.5px; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }
.foot-brand { display: flex; align-items: center; gap: 12px; color: var(--pebbles); }
.foot-brand svg { width: 30px; flex: none; }
.foot-brand span { font-family: var(--display); font-weight: 700; font-size: 18px; }
.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--sunset); }

.accred { margin-top: 40px; }
.accred-title { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-dim); font-weight: 500; margin-bottom: 16px; }
.accred-row { display: flex; flex-wrap: wrap; gap: 14px; }
.accred-row a {
  background: #fff; border-radius: 12px; padding: 12px 18px; display: inline-flex; align-items: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.accred-row a:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .34); }
.accred-row img { height: 44px; width: auto; display: block; }

.foot-legal {
  border-top: 1px solid #3A382E; margin-top: 36px; padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}