/* ═══════════════════════════════════════════════════════
   ENRICO VERONESE — Brand Identity v2 "Quota"
═══════════════════════════════════════════════════════ */

/* ── 1. Variables ──────────────────────────────────── */
:root {
  --bg:      #FFFFFF;
  --surface: #F2F2F0;
  --ink:     #16191B;
  --mist:    #5C5550;
  --accent:  #FF5A1F;
  --border:  #E8E8E6;
}

/* ── 2. Reset + Base ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html  { scroll-behavior: smooth; }
body  {
  margin: 0;
  background: var(--bg);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.6;
}
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
p   { margin: 0; }
strong { font-weight: 600; color: var(--ink); }
img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── 3. Utilities ──────────────────────────────────── */
.wrap {
  width: min(1280px, 92vw);
  margin-inline: auto;
}

/* ── 4. Skip link ──────────────────────────────────── */
.skip-link {
  position: absolute; top: -64px; left: 12px; z-index: 3000;
  padding: 0.5rem 1rem;
  background: var(--accent); color: #fff;
  font-family: 'Inter', sans-serif; font-weight: 500;
}
.skip-link:focus { top: 12px; }

/* ── 5. Reveal animation ───────────────────────────── */
.js-anim .reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js-anim .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .js-anim .reveal { opacity: 1; transform: none; }
}

/* ── 6. Mobile full-bleed ──────────────────────────── */
@media (max-width: 639px) {
  .bleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* ── 7. Typography roles ───────────────────────────── */
/* Le due parole del claim in accento: l'arancio qui e' inchiostro, non
   superficie, quindi resta dentro la regola del brand. */
.hero-title em { font-style: normal; color: var(--accent); }
.hero-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(52px, 9vw, 112px);
  color: var(--ink);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
}

.section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}

.eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--mist);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
}

.counter-number {
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: clamp(38px, 5.5vw, 68px);
  color: var(--ink);
  line-height: 1;
  display: block;
}

/* ── 8. Buttons ─────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--ink); color: #fff;
  border: none; border-radius: 100px;
  padding: 14px 28px;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px;
  cursor: pointer; transition: background 200ms;
  text-decoration: none;
}
.btn-primary:hover { background: var(--mist); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 100px;
  padding: 13px 27px;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px;
  cursor: pointer; transition: background 200ms;
  text-decoration: none;
}
.btn-secondary:hover { background: var(--surface); }

.btn-nav {
  display: inline-flex; align-items: center;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 100px;
  padding: 8px 20px;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px;
  cursor: pointer; transition: background 200ms, color 200ms;
  text-decoration: none;
}
.btn-nav:hover { background: var(--ink); color: #fff; }

/* inline-cta (inner pages) */
.inline-cta {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 1.2rem;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 2px;
  transition: border-color 200ms;
}
.inline-cta:hover { border-color: var(--ink); }
.inline-cta--secondary { color: var(--mist); border-color: transparent; }
.inline-cta--secondary:hover { color: var(--ink); border-color: var(--border); }
.cta-pair { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; margin-top: 0.75rem; }
/* La CTA delle schede viaggio e' un <button> (apre la tendina) ma usa
   l'aspetto di .inline-cta, nata per un <a>: senza questo reset restano
   gli stili di default del browser, cioe' un bordo su tutti i lati e uno
   sfondo grigio. */
button.inline-cta {
  background: none;
  border: none;
  border-bottom: 1.5px solid var(--border);
  padding: 0 0 2px;
  text-align: left;
  cursor: pointer;
}
button.inline-cta:hover { border-color: var(--ink); }
button.inline-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Aperta: il bordo passa all'accento, cosi' si vede quale scheda ha la
   tendina aperta anche scorrendo. */
button.inline-cta[aria-expanded="true"] { border-color: var(--accent); }

/* ── 8b. Terrain badge ──────────────────────────────── */
.terrain-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0.9rem 0 0;
  padding: 0.32rem 0.75rem 0.32rem 0.55rem;
  border: 1.5px solid var(--terrain-color, var(--ink));
  border-radius: 100px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--terrain-color, var(--ink));
}
.terrain-badge svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── 9. Tags + Pills ───────────────────────────────── */
.tag {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mist); line-height: 1.4;
}
.tag-row  { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.75rem; }
/* Un tag che e' anche un rimando interno: si distingue dagli altri, che
   sono etichette inerti. */
.tag-pill--link { color: var(--ink); border-color: var(--mist); transition: background 150ms, border-color 150ms; }
.tag-pill--link:hover { background: var(--surface); border-color: var(--ink); }
.tag-pill {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.2rem 0.7rem;
}

/* ── 10. Isoipsa decoration ────────────────────────── */

.site-header { z-index: 10; }

/* Il primo fratello dopo un iso-bg deve stare sopra le linee */
.section-iso-bg + * { position: relative; z-index: 1; }

/* Divisori tra sezioni */
.iso-divider {
  width: 100%; height: 72px;
  overflow: hidden; position: relative;
  pointer-events: none;
}
.iso-div-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* ═══════════════════════════════════════════════════════
   NAV — shared all pages
═══════════════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 1200;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 250ms;
}
.site-header.scrolled { box-shadow: 0 1px 20px rgba(22,25,27,0.07); }

.nav-wrap {
  display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
  height: 64px;
}

.nav-brand {
  display: flex; flex-direction: column;
  line-height: 1.1; gap: 2px;
  text-decoration: none; flex-shrink: 0;
}
.nav-brand-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.01em;
}
.nav-brand-meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 400;
  color: var(--mist);
}
.nav-brand-meta em {
  font-style: normal;
  font-size: 10px;
  opacity: 0.65;
  margin-left: 0.3em;
}

/* Hamburger */
.menu-toggle {
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  gap: 5px;
  padding: 12px; border: none; background: none;
  cursor: pointer; min-height: 44px; min-width: 44px;
}
.menu-toggle-bar {
  display: block; width: 22px; height: 2px;
  background: var(--ink);
  transition: transform 240ms ease, opacity 240ms ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:first-child {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav drawer */
.main-nav {
  position: absolute; top: 100%; left: 0; width: 100%;
  overflow: hidden; max-height: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: max-height 300ms ease;
}
.main-nav.open { max-height: 460px; }

.main-nav ul {
  list-style: none; margin: 0;
  padding: 1.5rem 4vw 2rem;
  display: grid; gap: 0;
}
.main-nav a {
  display: inline-flex; align-items: center;
  min-height: 48px;
  font-family: 'Inter', sans-serif;
  font-size: 18px; font-weight: 500;
  color: var(--ink);
}
.main-nav a:hover, .main-nav a.active { color: var(--accent); }
.nav-cta-li { margin-top: 1rem; }
.nav-cta-li .btn-nav { font-size: 16px; padding: 11px 24px; }

@media (min-width: 768px) {
  .menu-toggle { display: none; }
  .main-nav {
    position: static; width: auto; max-height: none;
    overflow: visible; background: transparent; border-bottom: none;
  }
  .main-nav ul { padding: 0; display: flex; align-items: center; gap: 1.75rem; }
  .main-nav a { font-size: 14px; min-height: auto; }
  .nav-cta-li { margin-top: 0; }
  .nav-cta-li .btn-nav { font-size: 14px; padding: 8px 20px; }
}

/* Breadcrumb (inner pages) */
.breadcrumb { border-bottom: 1px solid var(--border); }
.breadcrumb-inner {
  padding: 0.5rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 400; color: var(--mist);
}

/* ═══════════════════════════════════════════════════════
   HERO — index.html
═══════════════════════════════════════════════════════ */
.hero {
  padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 4rem);
  overflow: hidden;
  position: relative;
}
.hero-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 768px) {
  .hero-wrap { grid-template-columns: 55fr 45fr; gap: 5rem; }
}

.hero-content { display: grid; gap: 1.5rem; align-content: start; }
.hero-claim {
  font-family: 'Inter', sans-serif;
  font-weight: 500; font-size: 13px;
  color: var(--mist);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin: 0;
}
.hero-sub {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: var(--mist);
  line-height: 1.5;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.25rem; }

/* Photo collage */
.hero-media {
  position: relative;
  height: clamp(360px, 58vw, 620px);
}
.hero-photo-main {
  position: absolute;
  top: 0; right: 0;
  width: 78%; height: 88%;
  overflow: hidden;
  border-radius: 3px;
}
.hero-photo-main img { width: 100%; height: 100%; object-fit: cover; }
/* Carosello dell'hero: gira ogni mezzo secondo, quindi la dissolvenza deve
   chiudersi molto prima del cambio successivo — con gli 0.8s di
   .carousel-slide (che gira a 4s nelle pagine attivita') non farebbe in
   tempo ad arrivare a fuoco. Si ferma al passaggio del mouse. */
.hero-carousel { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  /* Durata scritta dal JS: segue la velocita' del carosello. */
  transition: opacity var(--hero-fade, 160ms) linear;
}
.hero-slide.active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
.hero-photo-round {
  position: absolute;
  bottom: 0; left: 0;
  width: 40%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--bg);
  box-shadow: 0 2px 16px rgba(22,25,27,0.10);
}
.hero-photo-round img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  .hero-media { height: clamp(260px, 78vw, 400px); }
  .hero-photo-main { width: 75%; }
  .hero-photo-round { width: 44%; }
}

/* ═══════════════════════════════════════════════════════
   COUNTER — index.html
═══════════════════════════════════════════════════════ */
.counter-section {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.counter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 640px) {
  .counter-grid { grid-template-columns: repeat(4, 1fr); }
}
.counter-item {
  display: grid; gap: 0.4rem;
  text-align: center;
  padding: 2rem 1rem;
  border-right: 1px solid var(--border);
  position: relative;
}
.counter-item:last-child { border-right: none; }
@media (max-width: 639px) {
  .counter-item:nth-child(2) { border-right: none; }
  .counter-item:nth-child(1),
  .counter-item:nth-child(2) { border-bottom: 1px solid var(--border); }
}

.counter-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--mist);
  display: block;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════
   ACTIVITIES PREVIEW — index.html
═══════════════════════════════════════════════════════ */
.activities-section {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.section-header-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--mist);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
  transition: color 200ms, border-color 200ms;
}
.section-header-link:hover { color: var(--ink); border-color: var(--ink); }

.activities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .activities-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
/* Cinque attivita': su schermi larghi stanno in una riga sola, altrimenti
   la quinta resterebbe da sola sotto le altre quattro. */
@media (min-width: 1100px) {
  .activities-grid { grid-template-columns: repeat(5, 1fr); }
}

.activity-card { display: grid; gap: 0.75rem; align-content: start; text-decoration: none; color: inherit; }
.activity-card-thumb {
  aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--surface); border-radius: 3px; position: relative;
}
.activity-card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease;
}
.activity-card:hover .activity-card-thumb img { transform: scale(1.05); }
.activity-card-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--ink); line-height: 1.1;
}
.activity-card-sub { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--mist); }

/* ═══════════════════════════════════════════════════════
   SELVAGGIO BLU FEATURE — index.html
═══════════════════════════════════════════════════════ */
.selvaggio-section {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.selvaggio-wrap {
  display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start;
}
@media (min-width: 768px) {
  .selvaggio-wrap { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
}
.selvaggio-photo { aspect-ratio: 4/3; overflow: hidden; border-radius: 3px; }
.selvaggio-photo img { width: 100%; height: 100%; object-fit: cover; }
.selvaggio-content { display: grid; gap: 1.2rem; align-content: start; }
.selvaggio-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: 1.05; color: var(--ink); margin: 0;
}
.selvaggio-body { font-size: 15px; line-height: 1.75; color: var(--mist); }
/* Piu' arancio nel blocco: occhiello e bottone in accento. Su fondo
   --surface era tutto inchiostro su grigio e la sezione spariva fra le
   due che ha intorno. */
.selvaggio-content .eyebrow { color: var(--accent); }
.selvaggio-content .btn-primary { background: var(--accent); }
.selvaggio-content .btn-primary:hover { background: var(--ink); }

/* ═══════════════════════════════════════════════════════
   DEPARTURES PANEL — index.html
═══════════════════════════════════════════════════════ */
.departures-section {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.departures-panel {
  display: grid; gap: 0;
  margin-top: 1.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0 1.5rem;
}
.departures-header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 1rem; border-bottom: 1px solid var(--border);
  gap: 1rem; flex-wrap: wrap;
}
.departure-item { border-bottom: 1px solid var(--border); }
.departure-item:last-of-type { border-bottom: none; }
.departure-heading { margin: 0; font: inherit; }
/* La riga e' la stessa per le partenze aperte (dentro un <button>) e per
   quelle esaurite (un <div> inerte): stessa griglia, stesso allineamento. */
.departure-row {
  position: relative;
  padding: 1rem 2rem 1rem 0; width: 100%;
  display: grid; gap: 0.2rem;
  text-align: left;
}
.departure-trigger {
  background: none; border: none; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.departure-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Il segno +/- e' l'unico affordance visibile: niente riempimenti arancio. */
.departure-toggle {
  position: absolute; top: 1rem; right: 0;
  width: 14px; height: 14px; flex: none;
}
.departure-toggle::before,
.departure-toggle::after {
  content: ''; position: absolute; top: 50%; left: 0;
  width: 14px; height: 1.5px; background: var(--ink);
  transform: translateY(-50%);
  transition: transform 200ms, opacity 200ms;
}
.departure-toggle::after { transform: translateY(-50%) rotate(90deg); }
.departure-trigger[aria-expanded="true"] .departure-toggle::after {
  transform: translateY(-50%) rotate(0deg); opacity: 0;
}
@media (min-width: 768px) {
  .departure-row {
    grid-template-columns: 13ch 1fr auto;
    column-gap: 2.5rem; row-gap: 0;
    align-items: center;
    padding: 0.85rem 2rem 0.85rem 0;
  }
  .departure-date   { grid-area: 1 / 1 / 3 / 2; align-self: center; }
  .departure-title  { grid-area: 1 / 2 / 2 / 3; }
  .departure-type   { grid-area: 2 / 2 / 3 / 3; }
  .departure-status { grid-area: 1 / 3 / 3 / 4; align-self: center; text-align: right; white-space: nowrap; }
  .departure-toggle { top: 50%; margin-top: -7px; }
  /* La tendina parte dalla colonna del titolo, non dal bordo: si legge
     come figlia della partenza che l'ha aperta. */
  .departures-panel .request-panel { margin-left: calc(13ch + 2.5rem); }
}
@media (hover: hover) {
  .departure-trigger:hover .departure-title { color: var(--accent); }
}
.departure-date {
  font-family: 'Space Mono', monospace;
  font-size: 11px; color: var(--mist);
}
.departure-title {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 700; line-height: 1.1; color: var(--ink);
}
.departure-type { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--mist); }
.departure-status {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  color: var(--mist); letter-spacing: 0.04em;
}
.departure-status--open { color: var(--accent); }
.departure-status--few  { color: var(--accent); }
/* Esaurito: niente accento, non e' un invito ad agire. Resta in elenco
   perche' una partenza piena dice piu' di una riga in meno. */
.departure-status--soldout { color: var(--mist); }
.departures-footer { padding-top: 1.5rem; padding-bottom: 0.25rem; border-top: 1px solid var(--border); }

/* Tendina richiesta — si apre sotto la partenza scelta */
.request-panel[hidden] { display: none; }
.request-panel {
  display: grid; gap: 0.9rem;
  max-width: 44rem;
  padding: 0 0 1.5rem;
  animation: departureOpen 220ms ease-out both;
}
@keyframes departureOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.request-lead {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px; line-height: 1.6; color: var(--mist);
}
.request-panel .request-note { min-height: 0; }
.request-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.request-actions .btn-primary,
.request-actions .btn-secondary { justify-content: center; }
/* Sotto i 768px i due bottoni andrebbero a capo con larghezze diverse:
   meglio impilarli a piena larghezza, anche per l'area di tocco. */
@media (max-width: 767px) {
  .request-actions { display: grid; gap: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .request-panel { animation: none; }
  .departure-toggle::before, .departure-toggle::after { transition: none; }
}

/* ═══════════════════════════════════════════════════════
   SHARED SECTION SHELL — inner pages
═══════════════════════════════════════════════════════ */
.section-shell { padding: clamp(2.5rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.section-shell-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border);
  margin-bottom: 2rem; flex-wrap: wrap;
}
.section-shell-title {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700; line-height: 1; color: var(--ink);
}

/* ═══════════════════════════════════════════════════════
   ATTIVITÀ — indice + sezioni
═══════════════════════════════════════════════════════ */
.activity-index {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.activity-index-item {
  display: grid; gap: 0.25rem; align-content: start;
  padding: 1.1rem 1.25rem;
  border-right: 1px solid var(--border);
  text-decoration: none; transition: background 150ms;
}
.activity-index-item:last-child  { border-right: none; }
.activity-index-item:hover { background: var(--surface); }
.activity-index-num { font-family: 'Space Mono', monospace; font-size: 11px; color: var(--mist); }
.activity-index-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 700;
  color: var(--ink); line-height: 1; transition: color 150ms;
}
.activity-index-item:hover .activity-index-name { color: var(--accent); }
.activity-index-sub { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--mist); line-height: 1.3; }
@media (max-width: 639px) {
  .activity-index { grid-template-columns: repeat(2, 1fr); }
  .activity-index-item:nth-child(2) { border-right: none; }
  .activity-index-item:nth-child(1),
  .activity-index-item:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* Indice attivita' a cinque voci (con l'heliski). Non si riusa --5col:
   quello e' nato per viaggi e toglie i bordi orizzontali, che qui servono. */
.activity-index--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 639px) {
  .activity-index--5 { grid-template-columns: repeat(2, 1fr); }
  .activity-index--5 .activity-index-item:nth-child(2n) { border-right: none; }
  .activity-index--5 .activity-index-item:nth-child(-n+4) { border-bottom: 1px solid var(--border); }
}

/* Indice viaggi (5 tappe): stessa logica ma con una colonna in piu' su
   desktop — su mobile resta 2 colonne per non forzare lo scroll orizzontale
   (era il bug: prima l'inline style teneva 4 colonne fisse anche su mobile). */
.activity-index--5col { border-top: none; border-bottom: none; grid-template-columns: repeat(5, 1fr); }
@media (max-width: 639px) {
  .activity-index--5col { grid-template-columns: repeat(2, 1fr); }
  .activity-index--5col .activity-index-item:nth-child(2n) { border-right: none; }
  .activity-index--5col .activity-index-item:nth-child(-n+4) { border-bottom: 1px solid var(--border); }
}
/* 7 voci (viaggi): 4 + 3 su desktop, 2 colonne su mobile. Sette celle su
   una riga sola sarebbero troppo strette per i nomi. */
.activity-index--7col { border-top: none; border-bottom: none; grid-template-columns: repeat(4, 1fr); }
.activity-index--7col .activity-index-item:nth-child(4n)   { border-right: none; }
.activity-index--7col .activity-index-item:nth-child(-n+4) { border-bottom: 1px solid var(--border); }
/* Otto destinazioni: due righe piene da quattro, quindi nessuna cella vuota
   in coda come succedeva con sette. */
.activity-index--8col { border-top: none; border-bottom: none; grid-template-columns: repeat(4, 1fr); }
.activity-index--8col .activity-index-item:nth-child(4n)   { border-right: none; }
.activity-index--8col .activity-index-item:nth-child(-n+4) { border-bottom: 1px solid var(--border); }
@media (max-width: 639px) {
  .activity-index--8col { grid-template-columns: repeat(2, 1fr); }
  .activity-index--8col .activity-index-item:nth-child(2n) { border-right: none; }
  .activity-index--8col .activity-index-item:not(:last-child) { border-bottom: 1px solid var(--border); }
  .activity-index--7col { grid-template-columns: repeat(2, 1fr); }
  .activity-index--7col .activity-index-item:nth-child(2n) { border-right: none; }
  .activity-index--7col .activity-index-item:not(:last-child) { border-bottom: 1px solid var(--border); }
}

.activity-section { padding: 2.5rem 0; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.activity-section:last-of-type { border-bottom: none; }
.activity-row { display: grid; gap: 2.5rem; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .activity-row              { grid-template-columns: 1fr 1fr; }
  .activity-row.photo-right  { direction: rtl; }
  .activity-row.photo-right > * { direction: ltr; }
}
.activity-img {
  position: relative; aspect-ratio: 4/3;
  overflow: hidden; background: var(--surface); border-radius: 3px;
}
.activity-img img { width: 100%; height: 100%; object-fit: cover; }
.auto-carousel { position: absolute; inset: 0; }
.carousel-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.8s ease;
}
.carousel-slide.active { opacity: 1; }

.activity-text {
  display: grid; gap: 1rem; align-content: start;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1.75rem 2rem;
}
.activity-h2 {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 800; line-height: 0.95;
  color: var(--ink); letter-spacing: -0.02em;
}
.activity-text p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--mist); }

/* ═══════════════════════════════════════════════════════
   CORSI
═══════════════════════════════════════════════════════ */
.course-list { display: grid; gap: 1.25rem; }
.course-item {
  background: rgba(255,255,255,0.90);
  display: grid; grid-template-columns: 1fr;
  gap: 0.75rem; padding: 2rem 1.75rem;
  border: 1px solid var(--border);
}
@media (min-width: 768px) {
  .course-item { grid-template-columns: 18ch 1fr 18ch; gap: 2.5rem; align-items: start; }
}
.course-chapter {
  display: flex; align-items: baseline; gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  scroll-margin-top: 80px;
}
.course-chapter:first-child { border-top: none; padding-top: 0; }
.course-chapter-num {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem; color: var(--accent); letter-spacing: 0.1em; flex-shrink: 0;
}
.course-chapter-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist);
}

/* Corsi: barra indice separata */
.course-index-bar {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Corsi: sezioni separate per ogni corso */
.course-section {
  padding: 3rem 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 72px;
  position: relative; overflow: hidden;
}
.course-section--alt { background: var(--surface); }
.course-section > .wrap { position: relative; z-index: 1; }
.course-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-bottom: 1.25rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--border); flex-wrap: wrap; row-gap: 0.4rem;
}
.course-section-num {
  font-family: 'Space Mono', monospace;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--accent); letter-spacing: -0.02em; line-height: 1; flex-shrink: 0;
}
.course-section-label {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist);
}
.course-section .course-item {
  border: none; background: transparent; padding-left: 0; padding-right: 0;
}
.course-section--alt .course-item {
  background: rgba(255,255,255,0.70); padding: 1.75rem; border: none;
}

/* Prossimamente: 3 card affiancati su desktop, contrasto pieno */
#prossimamente .course-item {
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  #prossimamente .course-list { grid-template-columns: repeat(3, 1fr); }
  #prossimamente .course-item { grid-template-columns: 1fr; }
}

/* Tappe del Selvaggio Blu: i titoli sono due toponimi e nella colonna da
   18ch dei corsi andavano a capo quattro volte, allungando la riga a vuoto.
   Colonna piu' larga, titolo piu' piccolo, meta stretta. */
.stage-list .course-item { padding: 1.5rem 1.75rem; }
@media (min-width: 768px) {
  .stage-list .course-item { grid-template-columns: 24ch 1fr 11ch; gap: 2rem; align-items: start; }
}
.stage-list .course-title { font-size: 1.05rem; line-height: 1.3; }

.course-num-title { display: grid; gap: 0.3rem; }
.course-title {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  font-weight: 700; line-height: 1; color: var(--ink);
}
.course-desc { margin: 0; font-size: 15px; line-height: 1.7; color: var(--mist); }
/* Le descrizioni dei corsi ora sono su piu' paragrafi: senza questo si
   attaccherebbero, perche' .course-desc azzera i margini. */
.course-desc + .course-desc { margin-top: 0.7rem; }
/* Chiusura di una scheda corso: obiettivo o nota sul metodo. */
.course-note {
  margin: 1rem 0 0; padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 14px; line-height: 1.6; color: var(--mist);
}
.course-meta { display: grid; gap: 0.55rem; }
.cmeta-item { font-size: 14px; }
.cmeta-item strong {
  display: block;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.1rem;
}
.cmeta-item span { color: var(--mist); }

/* ═══════════════════════════════════════════════════════
   GITE DETAIL PAGES
═══════════════════════════════════════════════════════ */
.diff-level {
  display: block; color: var(--accent);
  margin-bottom: 0.4rem;
}
/* ── Scala a pallini (sostituisce ● ○ testuali: dimensioni disomogenee
   tra pieno e vuoto a seconda del font) con cerchi disegnati via CSS,
   sempre identici in dimensione. ────────────────────────────────── */
.dot-scale { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.dot-scale .dot {
  width: 6px; height: 6px; border-radius: 50%; box-sizing: border-box;
  border: 1.3px solid currentColor; background: transparent;
}
.dot-scale .dot.is-filled { background: currentColor; }
.dot-scale-sep { margin: 0 1px; opacity: 0.55; font-size: 0.7rem; }
.gita-ideale {
  font-size: 0.82rem; color: var(--mist); margin: 0.9rem 0 0; line-height: 1.5;
}
.gita-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mist); padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: -0.5rem;
}
.gita-section-title.is-diff-hidden,
.course-item.is-diff-hidden { display: none; }

/* ── Filtro difficoltà (funge anche da legenda) ─────── */
.diff-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0 0 2rem; padding: 1rem 1.1rem;
  background: var(--surface); border-radius: 4px;
}
.diff-filter-label {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mist); margin-right: 0.15rem;
}
.diff-filter-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500;
  color: var(--ink);
  background: var(--bg); border: 1px solid var(--border); border-radius: 100px;
  padding: 0.32rem 0.75rem 0.32rem 0.85rem; cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.diff-filter-btn:hover { border-color: var(--ink); }
.diff-filter-dots { display: inline-flex; color: var(--accent); }
.diff-filter-btn.is-active {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.diff-filter-btn.is-active .diff-filter-dots { color: #FF8A5C; }
.custom-block {
  margin: 2.5rem 0 0; padding: 1.5rem;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
}
.custom-block p { font-size: 0.93rem; margin-bottom: 1rem; }
.nota-spese {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-family: 'Space Mono', monospace; font-size: 0.73rem; color: var(--mist);
}
.course-contents {
  list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.35rem;
}
.course-contents li {
  font-size: 0.84rem; color: var(--mist); padding-left: 1.1rem; position: relative;
}
.course-contents li::before { content: '—'; position: absolute; left: 0; color: var(--accent); }
.course-day {
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent);
  margin: 0.9rem 0 0.25rem; display: block;
}
.course-day:first-child { margin-top: 0; }

/* ═══════════════════════════════════════════════════════
   SELVAGGIO BLU PAGE
═══════════════════════════════════════════════════════ */
.article-hero { border-bottom: 1px solid var(--border); }
.article-hero-img { aspect-ratio: 16/7; overflow: hidden; background: var(--surface); }
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.article-header { padding: 2rem 0 1.5rem; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.article-kicker {
  display: block; margin-bottom: 0.75rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500; font-size: 12px;
  color: var(--mist); letter-spacing: 0.1em; text-transform: uppercase;
}
.article-title {
  margin: 0 0 0.8rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  font-weight: 800; line-height: 0.95; letter-spacing: -0.02em;
  color: var(--ink); max-width: 20ch;
}
.article-standfirst {
  margin: 0; max-width: 52ch;
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 400; line-height: 1.65; color: var(--mist);
}
.article-body-wrap { padding: 2.5rem 0; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.article-body {
  font-size: 16px; line-height: 1.8; max-width: 68ch;
}
.article-body p { margin: 0 0 1em; }
/* Titoli di sezione ed elenchi: finora il corpo articolo aveva solo
   paragrafi, la pagina privacy porta anche questi. */
.article-body h2 {
  margin: 2.2rem 0 0.8rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700; line-height: 1.2; color: var(--ink);
}
.article-body h2:first-child { margin-top: 0; }
.article-body ul { margin: 0 0 1em; padding-left: 1.1rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body li::marker { color: var(--accent); }
/* Il reset globale toglie colore e sottolineatura a tutti gli <a>: dentro un
   testo corrente un link cosi' sarebbe invisibile. */
.article-body a {
  color: var(--ink);
  border-bottom: 1.5px solid var(--accent);
  transition: background 150ms ease;
}
.article-body a:hover { background: var(--surface); }
.article-gallery { padding: 2rem 0; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.gallery-asym {
  display: grid; grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr; gap: 3px;
}
.gallery-asym .g1 { grid-row: 1/3; aspect-ratio: 2/3; overflow: hidden; background: var(--surface); }
/* Le due foto di destra avevano aspect-ratio 4/3 fisso: siccome g1 occupa
   due righe ed e' alta 3/2 della sua colonna, la colonna stretta restava
   molto piu' corta e sotto le foto si aprivano due buchi. Senza rapporto
   fisso le due righe si dividono l'altezza di g1 e la griglia chiude. */
.gallery-asym .g2, .gallery-asym .g3 {
  overflow: hidden; background: var(--surface); position: relative; min-height: 0;
}
/* La foto va sfilata dal flusso, altrimenti e' lei a dettare l'altezza
   della riga e la colonna di destra torna piu' alta di g1. Cosi' le righe
   le decide solo g1 e le due colonne finiscono pari. */
.gallery-asym .g2 img, .gallery-asym .g3 img { position: absolute; inset: 0; }
@media (max-width: 599px) {
  /* Su telefono la colonna da 1fr diventa una striscia di pochi pixel:
     meglio impilare le tre foto a tutta larghezza. */
  .gallery-asym { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .gallery-asym .g1 { grid-row: auto; aspect-ratio: 3/4; }
  .gallery-asym .g2, .gallery-asym .g3 { aspect-ratio: 4/3; }
}
.gallery-asym img { width: 100%; height: 100%; object-fit: cover; }
.article-info { padding: 2rem 0; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td {
  padding: 0.9rem 0; text-align: left;
  border-bottom: 1px solid var(--border); font-size: 15px;
}
.info-table th {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); width: 12ch; padding-right: 2rem;
}
.info-table td { color: var(--mist); }
.article-cta {
  padding: 3rem 0; text-align: center; border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.article-cta-title {
  margin: 0 0 0.6rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700; color: var(--ink);
}
.article-cta p { margin: 0 0 1.5rem; font-size: 15px; color: var(--mist); }

/* ═══════════════════════════════════════════════════════
   VIAGGI
═══════════════════════════════════════════════════════ */
.trips-group { margin-bottom: 0; }
.trips-group-label {
  padding: 0.7rem 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist);
}
.trip-row {
  display: grid; grid-template-columns: 1fr;
  gap: 2rem; padding: 0.5rem 0 2rem;
}
@media (min-width: 700px) {
  .trip-row { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
}
@media (min-width: 1024px) {
  .trip-row { grid-template-columns: minmax(340px, 52%) 1fr; }
}
.trip-thumb { aspect-ratio: 3/2; overflow: hidden; background: var(--surface); border-radius: 3px; }
.trip-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.trip-thumb img:hover { transform: scale(1.03); }
.trip-text { display: grid; gap: 0.5rem; align-content: start; }
.trip-name {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 700; line-height: 1; color: var(--ink);
}
.trip-type {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist);
}
.trip-desc { margin: 0; font-size: 15px; line-height: 1.65; color: var(--mist); }

/* Mappa interattiva destinazioni */
#tromso, #argentina, #islanda, #svalbard, #georgia { scroll-margin-top: 88px; }
.trips-map { margin-top: 2.25rem; }
.trips-map-frame {
  /* Terra nettamente piu' scura dell'oceano: prima erano quasi lo stesso
     colore e la mappa spariva. Il costiero invece si alleggerisce, cosi' le
     masse continentali si leggono come forme piene e non come contorni. */
  --map-land:  #E4E0D9;
  --map-coast: rgba(22, 25, 27, 0.26);
  --map-grid:  rgba(92, 85, 80, 0.15);
  position: relative; width: 100%; aspect-ratio: 5/3;
  background: #FCFBF9; border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden;
}
.trips-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-graticule { stroke: var(--map-grid); stroke-width: 1; }
.map-equator   { stroke: rgba(92, 85, 80, 0.28); }
.map-routes {
  stroke: var(--accent); stroke-width: 0.28;
  stroke-dasharray: 1.1 1.1; opacity: 0.5;
}
.js-anim .map-routes { animation: map-route-march 3s linear infinite; }
@keyframes map-route-march { to { stroke-dashoffset: -2.2; } }
.map-origin { fill: var(--accent); opacity: 0.75; }
.map-pin {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  text-decoration: none; z-index: 1;
}
/* Per pin ravvicinati (es. Cile/Argentina, stessa area andina): sposta
   l'etichetta sopra invece che sotto il pallino, cosi' due pin vicini non
   si accavallano anche su schermi stretti. */
.map-pin--label-above { flex-direction: column-reverse; }
/* Attive e "in definizione" prima erano due grigi quasi uguali: ora le prime
   sono piene in accento, le seconde vuote e in contorno. La differenza si
   coglie senza leggere la legenda. */
.map-pin-dot {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff;
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(22,25,27,0.22);
  transition: transform 180ms ease, background 180ms ease;
}
.map-pin-dot svg { width: 17px; height: 17px; position: relative; z-index: 1; }
/* Alone pulsante, solo sulle destinazioni attive */
.map-pin-dot::after {
  content: ""; position: absolute; inset: -2px;
  border-radius: 50%; border: 2px solid var(--accent);
  opacity: 0; pointer-events: none;
}
.js-anim .map-pin:not(.map-pin--soon) .map-pin-dot::after {
  animation: map-pin-pulse 2.8s ease-out infinite;
}
@keyframes map-pin-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
.map-pin--soon .map-pin-dot {
  background: #FCFBF9; color: var(--mist);
  border: 1.5px dashed var(--mist);
  box-shadow: none;
}
.map-pin:hover .map-pin-dot,
.map-pin:focus-visible .map-pin-dot { transform: scale(1.15); }
.map-pin--soon:hover .map-pin-dot,
.map-pin--soon:focus-visible .map-pin-dot { background: var(--surface); color: var(--ink); }
.map-pin-label {
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 600;
  color: var(--ink); background: rgba(255,255,255,0.92);
  padding: 2px 8px; border-radius: 100px; white-space: nowrap;
  border: 1px solid var(--border);
}
.trips-map-legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  margin-top: 0.9rem;
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--mist);
}
.legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); display: inline-block; }
.legend-dot--soon { background: transparent; border: 1.5px dashed var(--mist); }
.legend-hint { opacity: 0.75; }
/* Il blocco globale prefers-reduced-motion azzera solo le transition:
   le animazioni della mappa vanno fermate esplicitamente. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .map-routes,
  .js-anim .map-pin:not(.map-pin--soon) .map-pin-dot::after { animation: none; }
}
@media (max-width: 639px) {
  /* La cornice qui e' larga ~350px: pin e etichette vanno rimpiccioliti o si
     accavallano. L'alone pulsante occupa spazio senza aggiungere leggibilita'
     a questa scala, e le etichette delle mete "in definizione" si tolgono —
     restano il pallino tratteggiato e l'elenco qui sotto. */
  .map-pin-dot { width: 24px; height: 24px; }
  .map-pin-dot svg { width: 12px; height: 12px; }
  .map-pin-label { font-size: 9px; padding: 1px 5px; }
  .js-anim .map-pin:not(.map-pin--soon) .map-pin-dot::after { animation: none; }
  /* Le mete "in definizione" sparirebbero comunque sotto le altre (Svalbard
     finisce pure tagliata dal bordo): a questa larghezza restano solo le
     destinazioni confermate, le altre sono nell'elenco qui sotto. */
  .map-pin--soon { display: none; }
  /* Cile e Argentina distano 13px: si allontanano di qualche pixel per non
     sovrapporsi. Lo scarto vale ~8 di longitudine, invisibile a questa scala. */
  .map-pin--cile      { transform: translate(-50%, -50%) translate(-7px, 3px); }
  .map-pin--argentina { transform: translate(-50%, -50%) translate(7px, -3px); }
  /* Islanda e Lofoten sono alla stessa latitudine: qui le etichette si
     accavallano. Si sposta quella di Islanda, non il pallino, che deve
     restare sull'isola. */
  .map-pin--islanda .map-pin-label { transform: translateX(-40%); }
  /* Qui i due pallini norvegesi distano 5px: si allontanano di piu' e
     l'etichetta di Tromso esce del tutto a destra. */
  /* Qui l'etichetta sopra usciva dal bordo alto della cornice, e alzare il
     pallino lo faceva uscire a sua volta: Tromso si sposta solo a destra e
     tiene l'etichetta sotto. Lofoten resta sulla sua posizione reale,
     spostarla la mandava addosso a Islanda. */
  .map-pin--tromso { transform: translate(-50%, -50%) translate(10px, 0); }
  .map-pin--tromso.map-pin--label-above { flex-direction: column; }
  .map-pin--tromso .map-pin-label { transform: translateX(80%); }
}
/* Grappolo norvegese: Lofoten (68,2N 14,5E), Tromso (69,7N 19,0E) e Svalbard
   stanno in ~20px di mappa. I pallini si separano di qualche pixel come per
   Cile/Argentina, e le etichette vanno in tre direzioni diverse: Tromso in
   alto a destra, Lofoten sotto, Svalbard spostata a sinistra. Lo scarto dei
   pallini vale meno di un grado, invisibile a questa scala. */
.map-pin--tromso   { transform: translate(-50%, -50%) translate(11px, -20px); }
.map-pin--tromso .map-pin-label   { transform: translateX(95%); }
/* Svalbard e' una meta "in definizione" ma la sua etichetta e' opaca e
   copriva il pallino attivo di Lofoten: si sposta a sinistra del proprio
   pallino, come si fa per Islanda. */
.map-pin--svalbard .map-pin-label { transform: translateX(-95%); }
/* Sotto i 1100px il varco fra i pallini di Islanda e Lofoten e' ~52px e
   l'etichetta di Svalbard ne occupa 62: non ci sta in nessuna posizione.
   Le mete "in definizione" perdono l'etichetta e restano il pallino
   tratteggiato piu' l'elenco qui sotto, come gia' si fa su telefono.
   Questo risolve anche Georgia, che copriva Kalymnos. */
@media (max-width: 1099px) {
  .map-pin--soon .map-pin-label { display: none; }
}

/* Gallery (viaggi) — keep existing structure */
.lofoten-gallery-section { display: none; scroll-margin-top: 5rem; }
.lofoten-gallery-section.open { display: block; margin: 2rem 0 3.5rem; }
.lofoten-gallery-header {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); margin-bottom: 0.3rem;
}
.lofoten-gallery-header-title {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist);
}
.lofoten-gallery-header-count {
  font-family: 'Space Mono', monospace; font-size: 12px; color: var(--border);
}
.lofoten-viewer { background: var(--surface); }
.viewer-main {
  position: relative; height: 65vh; max-height: 580px; min-height: 280px;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
}
.viewer-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  display: block; transition: opacity 0.15s ease;
}
.viewer-img.fade { opacity: 0; }
.viewer-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.92); border: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; color: var(--ink); transition: background 150ms;
}
.viewer-nav:hover { background: white; }
.viewer-nav--prev { left: 12px; }
.viewer-nav--next { right: 12px; }
.viewer-strip {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px;
  background: var(--surface); scrollbar-width: none;
}
.viewer-strip::-webkit-scrollbar { display: none; }
.viewer-thumb { flex: 0 0 72px; height: 52px; object-fit: cover; opacity: 0.35; cursor: pointer; transition: opacity 150ms; }
.viewer-thumb.active { opacity: 1; outline: 2px solid var(--accent); }
.viewer-meta { padding: 0.4rem 0.8rem; border-top: 1px solid var(--border); }
.viewer-counter { font-family: 'Space Mono', monospace; font-size: 12px; color: var(--mist); }
@media (max-width: 767px) {
  .viewer-main { height: 55vw; max-height: 380px; }
  .viewer-thumb { flex-basis: 56px; height: 40px; }
}

/* ═══════════════════════════════════════════════════════
   CHI SONO
═══════════════════════════════════════════════════════ */
.about-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.about-photo { aspect-ratio: 3/4; overflow: hidden; background: var(--surface); border-radius: 3px; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-copy { display: grid; gap: 1rem; align-content: start; }
.about-copy p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--mist); }
.about-note {
  margin: 0; padding: 1rem 1.2rem;
  border-left: 2.5px solid var(--accent);
  font-size: 15px; line-height: 1.65; color: var(--ink);
}
.cert-row { display: grid; gap: 0; border-top: 1px solid var(--border); margin-top: 1rem; }
.cert-item {
  padding: 0.9rem 0; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.cert-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; font-weight: 700; color: var(--ink); }
.cert-body  { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--mist); max-width: 42ch; }
.cert-logo  { width: 64px; height: 64px; flex-shrink: 0; opacity: 0.85; }

/* ═══════════════════════════════════════════════════════
   CONTATTI
═══════════════════════════════════════════════════════ */
.contact-layout { display: grid; gap: 3rem; }
@media (min-width: 768px) { .contact-layout { grid-template-columns: 1fr 1fr; align-items: start; } }
.contact-copy { display: grid; gap: 1rem; }
.contact-copy p { margin: 0; font-size: 15px; color: var(--mist); line-height: 1.75; }
.contact-list { border-top: 1px solid var(--border); display: grid; }
.contact-item { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.contact-item-label {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mist); margin-bottom: 0.25rem;
}
.contact-item-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 700; color: var(--ink);
}
.contact-item-value a:hover { color: var(--accent); }
.contact-form { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.3rem; }
label { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mist); }
input, textarea {
  width: 100%; padding: 0.8rem 1rem;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--ink); font-size: 15px; font-family: 'Inter', sans-serif;
  border-radius: 4px;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); }
textarea { min-height: 140px; resize: vertical; }
.btn-submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 32px; background: var(--ink); color: #fff;
  border: none; border-radius: 100px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  transition: background 200ms;
}
.btn-submit:hover { background: var(--mist); }
.form-note { margin: 0; font-size: 13px; color: var(--mist); }
/* Conferma dopo la consegna a mail o WhatsApp: stessa riga della nota,
   in accento, cosi' si vede che e' cambiata qualcosa senza spostare
   niente nel layout. */
.form-note--done { color: var(--accent); }
.form-error {
  margin: 0; font-size: 13px; color: var(--accent); font-weight: 500;
}
.contact-form [aria-invalid="true"] { border-color: var(--accent); }

/* ═══════════════════════════════════════════════════════
   SPONSOR
═══════════════════════════════════════════════════════ */
.sponsor-section { padding: 2.5rem 0 3.5rem; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
/* Le linee erano lo sfondo del contenitore che traspariva da gap di 1px.
   Funziona solo se ogni riga e' piena: con sette sponsor (numero primo)
   l'ultima riga resta incompleta a quasi tutte le larghezze e le celle
   vuote diventavano blocchi grigi. Ora le linee le disegnano i riquadri,
   quindi dove non c'e' un riquadro non c'e' niente. */
.sponsor-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0; background: var(--bg);
  border: 1px solid var(--border); border-right: 0; border-bottom: 0;
  margin-top: 1.75rem;
}
.sponsor-tile {
  /* Prima era aspect-ratio 16/9: l'altezza dipendeva dalla larghezza della
     colonna, quindi con la copy su due righe (Salewa, e altri alle larghezze
     intermedie) il testo finiva a 40px dal bordo invece di 48 e la linea
     sotto sembrava mangiata. Con min-height il riquadro ha sempre lo spazio
     per due righe e la griglia pareggia le altezze da se'. */
  background: var(--bg); min-height: 132px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  /* Griglia e non flex: in colonna flex il blocco logo+copy veniva centrato
     tutto insieme, quindi un logo alto (Salewa, 52px) spingeva la sua copy
     piu' in basso e un logo basso (Scarpa, 9px) la tirava su. Con una banda
     logo di altezza fissa il logo sta sempre nella stessa fascia e la prima
     riga di copy parte sempre alla stessa quota. */
  display: grid; grid-template-rows: 44px auto; align-content: center;
  justify-items: center; gap: 0.55rem;
  text-align: center; padding: 1rem;
  filter: grayscale(1); opacity: 0.55;
  transition: filter 250ms ease, opacity 250ms ease, background 250ms ease;
}
.sponsor-tile:hover, .sponsor-tile:focus-visible {
  filter: grayscale(0); opacity: 1; background: var(--surface); outline: none;
}
/* In px e non in %: senza aspect-ratio l'altezza del riquadro non e' piu'
   definita a priori, e una max-height percentuale non si risolverebbe. */
.sponsor-logo { max-width: 78%; max-height: 44px; object-fit: contain; align-self: center; }
.sponsor-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }
.sponsor-role {
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--mist);
  /* Due righe riservate a tutte le copy, anche a quelle che ne usano una:
     altrimenti la copy piu' lunga (Salewa) si centrava piu' in basso e
     lasciava 8px in meno verso la linea inferiore, che sembrava mangiata.
     Cosi' logo e prima riga di testo stanno alla stessa altezza in tutti
     i riquadri. */
  line-height: 1.6; min-height: 3.2em;
  /* In cima al suo blocco: centrata, la copy su una riga sola si sarebbe
     abbassata di mezza riga rispetto a quella di Salewa, che ne usa due. */
  align-self: start;
}

/* ═══════════════════════════════════════════════════════
   RELATED — "Leggi anche"
═══════════════════════════════════════════════════════ */
.related { padding: 2.5rem 0; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.related-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border);
  margin-bottom: 1.6rem;
}
.related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.related-item {
  display: grid; gap: 0.75rem; align-content: start;
  text-decoration: none; color: inherit;
}
.related-thumb { aspect-ratio: 3/2; overflow: hidden; background: var(--surface); border-radius: 3px; }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms; }
.related-item:hover .related-thumb img { transform: scale(1.04); }
.related-title {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 700; line-height: 1.2; color: var(--ink); transition: color 200ms;
}
.related-item:hover .related-title { color: var(--accent); }
.related-arrow { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--mist); }
@media (max-width: 639px) {
  .related-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.site-footer {
  padding: 3rem 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid; gap: 2.5rem; grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}
.footer-brand-block { display: grid; gap: 0.2rem; align-content: start; }
.footer-brand-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px; font-weight: 700; color: var(--ink); display: block;
}
.footer-brand-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--mist); display: block;
}
.footer-brand-nation {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: var(--mist); display: block; opacity: 0.65;
}
.footer-claim {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 12px;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em;
  display: block; margin-top: 0.6rem;
}
.footer-uiagm { display: block; width: 64px; height: 64px; opacity: 0.65; margin-top: 0.75rem; }
.footer-col-title {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mist); display: block; margin-bottom: 1rem;
}
.footer-links { display: grid; gap: 0; }
.footer-links a {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 400;
  padding: 0.45rem 0; border-bottom: 1px solid var(--border); color: var(--ink);
}
.footer-links a:last-child { border-bottom: none; }
.footer-links a:hover { color: var(--accent); }
.footer-contact-item { margin-bottom: 0.9rem; }
.footer-contact-label {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mist); display: block; margin-bottom: 0.2rem;
}
.footer-contact-value { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink); }
.footer-contact-value a:hover { color: var(--accent); }
.footer-copy {
  margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--mist);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.footer-copy a:hover { color: var(--ink); }
/* La riga di partnership sta in mezzo fra copyright e "torna su": con
   space-between su tre elementi finisce centrata da se'. Il nome e'
   l'unico link in accento della riga, cosi' si vede che e' cliccabile
   senza aggiungere una sottolineatura in piu' al footer. */
.footer-partner { text-align: center; }
.footer-partner a { color: var(--accent); }
.footer-partner a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 767px) {
  .footer-copy { justify-content: flex-start; }
  .footer-partner { text-align: left; }
}
@media (max-width: 767px) {
  .footer-uiagm { width: 48px; height: 48px; }
}


/* ═══════════════════════════════════════════════════════
   404 — pagina non trovata
═══════════════════════════════════════════════════════ */
.notfound-section {
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.notfound-wrap { position: relative; z-index: 1; }
.notfound-row {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .notfound-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
/* Il codice di errore e' un dato tecnico: Space Mono, come le quote. */
.notfound-code {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 1rem;
}
.notfound-title { margin-bottom: 0.6rem; }
.notfound-quota {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 13px; color: var(--mist);
  margin-bottom: 1.4rem;
}
.notfound-body {
  margin: 0; max-width: 34rem;
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.6vw, 18px); line-height: 1.7;
  color: var(--mist);
}
.notfound-photo {
  margin: 0;
  background: var(--surface);
  /* La foto e' verticale (1333x2000): una cornice 4/3 orizzontale ne
     buttava via meta'. 4/5 la tiene quasi intera e regge la colonna. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.notfound-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.notfound-links { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem; border-top: 1px solid var(--border); }
.notfound-grid {
  display: grid; gap: 1px;
  margin-top: 1.1rem;
  background: var(--border);
  border: 1px solid var(--border);
}
@media (min-width: 640px)  { .notfound-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .notfound-grid { grid-template-columns: repeat(3, 1fr); } }
.notfound-grid a {
  display: grid; gap: 0.25rem; align-content: start;
  padding: 1.1rem 1.2rem;
  background: var(--bg);
  transition: background 200ms;
}
.notfound-grid a:hover { background: var(--surface); }
.notfound-link-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem; font-weight: 700; color: var(--ink);
}
.notfound-link-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13px; line-height: 1.5; color: var(--mist);
}


/* ═══════════════════════════════════════════════════════
   POWDER — l'easter egg del footer
═══════════════════════════════════════════════════════ */
/* Il richiamo sta nella barra in alto, ma piu' piccolo delle altre voci:
   e' uno scherzo, non una sezione del sito. E' un <button> e non un <a>
   perche' non porta da nessuna parte. */
.powder-trigger {
  padding: 0; background: none; border: 0; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 500;
  color: var(--mist); text-align: left;
  transition: color 200ms;
}
.powder-trigger:hover { color: var(--accent); }
/* Nel menu a tendina del telefono resta comodo da toccare. */
.nav-powder-li .powder-trigger {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 15px;
}
@media (min-width: 768px) {
  .nav-powder-li .powder-trigger { min-height: auto; font-size: 12px; }
}
.powder-note { margin: 0.4rem 0 0; font-size: 12px; color: var(--accent); max-width: 30ch; }

.powder-layer { position: fixed; inset: 0; z-index: 9999; }
/* Neve bianca su una pagina quasi bianca non si vede. Il velo scurisce il
   sito sotto di un blu freddo, la luce di una giornata di tormenta, e da'
   ai fiocchi qualcosa su cui staccare. */
.powder-dim {
  position: absolute; inset: 0; background: #0E1C2B;
  opacity: 0; transition: opacity 700ms ease;
}
.powder-dimmed .powder-dim { opacity: 0.42; }
@media (prefers-reduced-motion: reduce) { .powder-dim { transition: none; } }
.powder-canvas { position: absolute; inset: 0; display: block; }
/* Mentre nevica la pagina resta usabile: i click passano attraverso.
   Quando si spala no, il cursore serve a scavare. */
.powder-layer .powder-canvas { pointer-events: none; }
.powder-layer.powder-shovelling .powder-canvas { pointer-events: auto; cursor: none; }
body.powder-on { overflow: hidden; }

/* Il messaggio compare quando lo schermo e' ormai pieno di neve bianca,
   ma mentre spali riaffiora la pagina scurita: chiaro su bianco o scuro
   su scuro, in un caso o nell'altro sparirebbe. Un pannello scuro sotto
   risolve entrambi i fondi senza dover indovinare. */
.powder-hud {
  position: absolute; left: 50%; top: 7%; transform: translateX(-50%);
  width: min(90vw, 32rem); text-align: center; pointer-events: none;
  background: rgba(14,28,43,0.88); border-radius: 14px;
  padding: 1.1rem 1.4rem 1rem;
  box-shadow: 0 10px 40px rgba(14,28,43,0.3);
}
.powder-copy {
  margin: 0 0 0.9rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800; font-size: clamp(1.2rem, 3.4vw, 2rem);
  line-height: 1.15; color: #fff;
}
.powder-bar { height: 4px; background: rgba(255,255,255,0.25); border-radius: 100px; overflow: hidden; }
.powder-bar span {
  display: block; height: 100%; background: var(--accent);
  transform-origin: left center; transform: scaleX(1);
}
.powder-close {
  position: absolute; right: 1rem; bottom: 1rem;
  background: var(--ink); color: #fff; border: 0; border-radius: 100px;
  padding: 10px 18px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 13px;
}
.powder-close:hover { background: var(--accent); }
@media (max-width: 600px) { .powder-hud { padding: 0.9rem 1rem 0.8rem; } }