/* ============================================================
   Patagucci Trips — shared design system
   Ogni meta ha il suo tema: i componenti usano SOLO token semantici
   (--accent, --theme-900, --tint-100…), mai colori hardcoded.
   Il tema attivo si imposta con data-dest sull'elemento <html>.
   ============================================================ */
:root{
  /* --- TOKEN SEMANTICI — default = tema hub --- */
  --accent:#FFCE00;          /* colore vivo: numeri, tab attivi, rotte, anelli */
  --accent-rgb:255,206,0;
  --accent-deep:#E0AE00;     /* variante scura: gradienti, bordi */
  --accent-ink:#8A6B00;      /* testo accent su fondo chiaro (contrasto AA) */
  --accent-2:#D21034;        /* contrasto: tag evidenziati, pulse */
  --accent-2-deep:#A80E29;
  --accent-2-ink:#A80E29;

  --theme-900:#16362a;       /* titoli su fondo chiaro, pallini giorno */
  --theme-800:#1f4d3a;
  --theme-700:#2a6b4d;       /* link, bottoni mappa */
  --theme-rgb:42,107,77;

  --dark-base:#141414;       /* base dei pannelli scuri */
  --tint-100:#f8f5ef;        /* sfondo pagina */
  --tint-200:#efe8d9;        /* chip, risultati */
  --paper:#fffdf9;           /* card */
  --line:#e2d9c6;

  --ink:#20281f;
  --ink-soft:#5b6a61;
  --shadow:0 10px 30px rgba(20,20,20,0.10);
  --shadow-lg:0 24px 60px rgba(20,20,20,0.22);
  --radius-lg:26px;
  --radius-md:18px;
  --font-display:'Bebas Neue', Impact, "Arial Narrow", sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   TEMI PER META
   ============================================================ */

/* 🇳🇵🇧🇹 Nepal & Bhutan — zafferano dei monasteri, indigo dei cieli himalayani */
html[data-dest="np"]{
  --accent:#F2A64B; --accent-rgb:242,166,75; --accent-deep:#C0721A; --accent-ink:#9A5A0D;
  --accent-2:#D6455A; --accent-2-deep:#A32235; --accent-2-ink:#93202F;
  --theme-900:#1D2A4D; --theme-800:#26365F; --theme-700:#3A5488; --theme-rgb:58,84,136;
  --dark-base:#131A2C; --tint-100:#f6f4ef; --tint-200:#e8e2d4; --line:#dbd3c2; --paper:#fffdf8;
}

/* 🇵🇰 Pakistan — turchese dell'Attabad Lake, verde pino del Karakoram */
html[data-dest="pk"]{
  --accent:#3CC7B4; --accent-rgb:60,199,180; --accent-deep:#12857A; --accent-ink:#0E6D63;
  --accent-2:#E0913C; --accent-2-deep:#B0691A; --accent-2-ink:#96580F;
  --theme-900:#0B3A28; --theme-800:#10513A; --theme-700:#166B4A; --theme-rgb:22,107,74;
  --dark-base:#0C1512; --tint-100:#f3f6f3; --tint-200:#e0eae2; --line:#ccdbd1; --paper:#fdfefc;
}

/* 🇿🇦 Sudafrica — oro della savana, verde del bushveld */
html[data-dest="za"]{
  --accent:#F0B03F; --accent-rgb:240,176,63; --accent-deep:#B87C13; --accent-ink:#8A5A08;
  --accent-2:#DD5B2E; --accent-2-deep:#A93C15; --accent-2-ink:#92330F;
  --theme-900:#14402C; --theme-800:#1D5A3D; --theme-700:#2A7350; --theme-rgb:42,115,80;
  --dark-base:#15120E; --tint-100:#faf6ee; --tint-200:#f0e5d2; --line:#e1d4ba; --paper:#fffdf8;
}

/* 🇮🇳 India — zafferano della bandiera, verde-teal moghul */
html[data-dest="in"]{
  --accent:#FF9F45; --accent-rgb:255,159,69; --accent-deep:#D06A12; --accent-ink:#9C4A08;
  --accent-2:#D6425A; --accent-2-deep:#A5233E; --accent-2-ink:#8E1D35;
  --theme-900:#11463C; --theme-800:#175E4F; --theme-700:#1E7A66; --theme-rgb:30,122,102;
  --dark-base:#17110D; --tint-100:#fbf6ef; --tint-200:#f2e6d5; --line:#e5d6bf; --paper:#fffdf7;
}

/* 🇺🇬 Uganda — giallo della bandiera, verde della foresta di Bwindi */
html[data-dest="ug"]{
  --accent:#FCD116; --accent-rgb:252,209,22; --accent-deep:#BF9C00; --accent-ink:#7A6300;
  --accent-2:#E03A4E; --accent-2-deep:#AE1226; --accent-2-ink:#97101F;
  --theme-900:#123D2A; --theme-800:#1A5B3C; --theme-700:#22764D; --theme-rgb:34,118,77;
  --dark-base:#0E1410; --tint-100:#f7f6ef; --tint-200:#e8ecd8; --line:#d5ddc4; --paper:#fffef8;
}

/* 🇹🇿 Tanzania — ambra della savana al tramonto, verde acacia, blu dell'Indiano */
html[data-dest="tz"]{
  --accent:#EFA13A; --accent-rgb:239,161,58; --accent-deep:#B26A0C; --accent-ink:#8A5205;
  --accent-2:#0E86B8; --accent-2-deep:#0A6288; --accent-2-ink:#095774;
  --theme-900:#153F2B; --theme-800:#1E5B3E; --theme-700:#277852; --theme-rgb:39,120,82;
  --dark-base:#120F0A; --tint-100:#faf6ee; --tint-200:#f0e6d2; --line:#e0d3b6; --paper:#fffdf7;
}

/* 🇺🇿🇰🇬 Uzbekistan & Kirghizistan — maiolica del Registan, terracotta della Via della Seta */
html[data-dest="uk"]{
  --accent:#39B6D8; --accent-rgb:57,182,216; --accent-deep:#157A96; --accent-ink:#12657D;
  --accent-2:#D2683A; --accent-2-deep:#A2441F; --accent-2-ink:#8B3A18;
  --theme-900:#123E52; --theme-800:#185670; --theme-700:#1F6C88; --theme-rgb:31,108,136;
  --dark-base:#0B1620; --tint-100:#f2f7f9; --tint-200:#dde9ee; --line:#c6d9e1; --paper:#fbfdfe;
}

/* 🇬🇱 Groenlandia — azzurro glaciale, rosso della bandiera */
html[data-dest="gl"]{
  --accent:#6FD2EE; --accent-rgb:111,210,238; --accent-deep:#1F8CB0; --accent-ink:#13637C;
  --accent-2:#E14B5A; --accent-2-deep:#B21E31; --accent-2-ink:#97182A;
  --theme-900:#12374D; --theme-800:#194E6B; --theme-700:#1F6488; --theme-rgb:31,100,136;
  --dark-base:#091019; --tint-100:#f1f6fa; --tint-200:#daeaf2; --line:#c2dce7; --paper:#fbfdfe;
}

/* 🇳🇮🇨🇷🇵🇦 Nicaragua, Costa Rica & Panama — verde lime tropicale, magenta dei mola Guna, oceano profondo */
html[data-dest="cx"]{
  --accent:#6ECB3C; --accent-rgb:110,203,60; --accent-deep:#3F8A18; --accent-ink:#2F6B11;
  --accent-2:#E8467C; --accent-2-deep:#B81B54; --accent-2-ink:#9E1548;
  --theme-900:#0E3A34; --theme-800:#145349; --theme-700:#1A6C5F; --theme-rgb:26,108,95;
  --dark-base:#08130F; --tint-100:#f1f9f2; --tint-200:#dcf0de; --line:#c4e2c8; --paper:#fbfefb;
}

/* 🇮🇸 Islanda — verde aurora, blu notte artico, rosso lava */
html[data-dest="is"]{
  --accent:#7BE495; --accent-rgb:123,228,149; --accent-deep:#2E9B5A; --accent-ink:#1F7A44;
  --accent-2:#E9573F; --accent-2-deep:#B8351F; --accent-2-ink:#9C2A17;
  --theme-900:#0E2233; --theme-800:#143249; --theme-700:#1B4160; --theme-rgb:27,65,96;
  --dark-base:#060C12; --tint-100:#f1f8f5; --tint-200:#dcefe4; --line:#c5e0d2; --paper:#fbfefc;
}

/* 🇰🇷 Corea del Sud — rosa dei ciliegi, blu notte della bandiera */
html[data-dest="kr"]{
  --accent:#F2839F; --accent-rgb:242,131,159; --accent-deep:#C24A6B; --accent-ink:#9E3253;
  --accent-2:#3A72C4; --accent-2-deep:#1E4E96; --accent-2-ink:#17407E;
  --theme-900:#1B2A4A; --theme-800:#253A63; --theme-700:#2F4A7C; --theme-rgb:47,74,124;
  --dark-base:#0B0F1A; --tint-100:#fbf5f7; --tint-200:#f4e3e9; --line:#e6cdd6; --paper:#fffcfd;
}

/* 🇬🇪 Georgia — rosso della bandiera, vino del qvevri */
html[data-dest="ge"]{
  --accent:#EE6055; --accent-rgb:238,96,85; --accent-deep:#B93021; --accent-ink:#A32A1C;
  --accent-2:#8C3350; --accent-2-deep:#631E38; --accent-2-ink:#631E38;
  --theme-900:#4A2333; --theme-800:#653044; --theme-700:#7E3B4E; --theme-rgb:126,59,78;
  --dark-base:#140F11; --tint-100:#faf5f4; --tint-200:#f0e1df; --line:#e2cecb; --paper:#fffcfb;
}

/* --- Alias di compatibilità -------------------------------------------------
   Le pagine più vecchie (soprattutto Uganda) usano ancora i nomi storici nei
   loro <style> inline. Rimappandoli sui token semantici si tingono da sole
   col tema della meta, invece di rompersi. NON usarli in codice nuovo.        */
:root{
  --yellow:var(--accent);
  --yellow-deep:var(--accent-deep);
  --red:var(--accent-2);
  --red-deep:var(--accent-2-deep);
  --black:var(--dark-base);
  --black-soft:#1c1c1c;
  --green-950:var(--theme-900);
  --green-900:var(--theme-900);
  --green-800:var(--theme-800);
  --green-700:var(--theme-700);
  --green-600:var(--theme-700);
  --green-500:var(--theme-700);
  --cream-100:var(--tint-100);
  --cream-200:var(--tint-200);
}

*{box-sizing:border-box;}
html{ scroll-behavior:smooth; }
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:var(--tint-100);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-size:16.5px;
  transition:background .5s ease;
}
a{color:var(--theme-700); text-decoration:none;}
::selection{ background:rgba(var(--accent-rgb),0.32); color:var(--ink); }
.icon{ display:inline-block; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }
section{ scroll-margin-top:70px; }
img{ max-width:100%; display:block; }

/* ---------- Scrollbar a tema ---------- */
html{ scrollbar-color:var(--accent-deep) var(--dark-base); scrollbar-width:thin; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--dark-base); }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--accent),var(--accent-deep)); border-radius:999px; border:2px solid var(--dark-base); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

/* Colori Patagucci letterali: la flagbar è identità del gruppo, non del tema
   (a runtime viene comunque sostituita dalla bandiera della meta attiva). */
.flagbar{ height:5px; background:linear-gradient(90deg,#141414 0 33%, #FFCE00 33% 66%, #D21034 66% 100%); }

/* ---------- NAV ---------- */
nav.tabs{
  position:sticky; top:var(--switcher-h, 0px); z-index:100;
  display:flex; gap:4px; overflow-x:auto;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.10), transparent), rgba(18,18,18,0.92);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  padding:10px 12px;
  border-bottom:1px solid rgba(var(--accent-rgb),0.18);
}
nav.tabs a{
  flex:0 0 auto; border:1px solid transparent; background:transparent; color:#cfcfcf;
  padding:9px 16px; border-radius:999px; font-size:0.8rem; font-weight:700; cursor:pointer;
  white-space:nowrap; transition:all .2s ease; text-transform:uppercase; letter-spacing:0.04em;
}
nav.tabs a:hover{ background:rgba(255,255,255,0.08); transform:translateY(-1px); }
nav.tabs a.active{ background:var(--accent); color:#10100e; box-shadow:0 4px 14px rgba(var(--accent-rgb),0.35); }
nav.tabs a.home-link{ color:var(--accent); border-color:rgba(var(--accent-rgb),0.4); }
nav.tabs a.home-link.active{ color:#10100e; }

/* ---------- HERO ---------- */
header.hero{
  position:relative; overflow:hidden;
  min-height:88vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fdf9f0; padding:60px 20px 50px;
}
header.hero .bg{
  position:absolute; inset:-20px; z-index:0;
  background-size:cover; background-position:center 30%;
  animation:kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.12); } }
header.hero .bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,0.4) 100%),
    linear-gradient(200deg, rgba(var(--accent-rgb),0.16), transparent 55%);
}
header.hero .content{ position:relative; z-index:1; max-width:680px; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
header.hero h1{ margin:0 0 14px; font-family:var(--font-display); font-size:clamp(3rem,9vw,5.6rem); letter-spacing:0.02em; font-weight:400; line-height:0.95; text-shadow:0 4px 24px rgba(0,0,0,0.5); text-transform:uppercase; animation:heroUp .8s cubic-bezier(.16,1,.3,1) both; }
header.hero h1::after{
  content:''; display:block; width:78px; height:4px; margin:16px auto 0; border-radius:4px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 18px rgba(var(--accent-rgb),0.65);
}
header.hero p.tagline{ margin:14px auto 0; color:#f1ece0; font-size:clamp(1.05rem,2.2vw,1.3rem); text-shadow:0 1px 12px rgba(0,0,0,0.4); font-weight:500; animation:heroUp .8s cubic-bezier(.16,1,.3,1) .12s both; }
.badge-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:24px; animation:heroUp .8s cubic-bezier(.16,1,.3,1) .24s both; }
.badge{ background:rgba(255,255,255,0.14); border:1px solid rgba(var(--accent-rgb),0.35); color:#fdf9f0; padding:6px 14px; border-radius:20px; font-size:0.82rem; backdrop-filter:blur(6px); transition:transform .2s ease, background .2s ease, border-color .2s ease; }
.badge:hover{ transform:translateY(-2px); background:rgba(var(--accent-rgb),0.18); border-color:rgba(var(--accent-rgb),0.6); }
.scroll-cue{ margin-top:38px; font-size:0.78rem; color:#e8e2d2; opacity:0.75; position:relative; z-index:1; animation:bounce 2.2s ease-in-out infinite, heroUp .8s cubic-bezier(.16,1,.3,1) .36s both; }
@keyframes bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
.photo-credit{ position:absolute; bottom:8px; right:12px; font-size:0.66rem; color:rgba(255,255,255,0.55); z-index:1; }
.photo-credit a{ color:rgba(255,255,255,0.7); }

/* I pannelli vanno da bordo a bordo: è .inner a incolonnare il contenuto,
   così non restano bande di sfondo ai lati sugli schermi larghi. */
main{ max-width:none; margin:0; }

section.panel{ padding:78px 20px 30px; position:relative; }
section.panel:not(:first-of-type)::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(680px, 74%); height:3px; border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
  opacity:0.55;
}
section.panel:not(:first-of-type)::after{
  content:'●'; position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  font-size:0.6rem; color:var(--accent); text-shadow:0 0 12px rgba(var(--accent-rgb),0.7);
}
section.panel.dark{
  background:
    radial-gradient(120% 100% at 15% -10%, rgba(var(--accent-rgb),0.10), transparent 45%),
    radial-gradient(100% 80% at 100% 110%, rgba(var(--theme-rgb),0.20), transparent 50%),
    linear-gradient(160deg,var(--dark-base),#080808 78%);
  color:#f4f1ea; max-width:none;
}
section.panel.dark .section-sub{ color:#c7c2b6; }
section.panel.dark h2.section-title{ color:#fdf9f0; }
section.panel > .inner{ max-width:920px; margin:0 auto; }

.photo-banner{
  border-radius:var(--radius-lg); overflow:hidden; margin-bottom:28px; box-shadow:var(--shadow-lg);
  position:relative; height:240px;
}
.photo-banner img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.photo-banner:hover img{ transform:scale(1.08); }
.photo-banner .credit{
  position:absolute; bottom:0; right:0; background:rgba(0,0,0,0.5); color:#fff; font-size:0.66rem;
  padding:4px 10px; border-radius:10px 0 0 0;
}
.photo-banner .credit a{ color:#fff; }
.photo-banner .fallback{
  position:absolute; inset:0; background:linear-gradient(120deg,var(--theme-700),var(--theme-900)); display:none;
  align-items:center; justify-content:center; color:#fff; font-size:2rem;
}

h2.section-title{ font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.9rem,4.2vw,3rem); color:var(--theme-900); margin:4px 0 8px; display:flex; align-items:center; gap:12px; font-weight:400; letter-spacing:0.01em; line-height:1; }
p.section-sub{ color:var(--ink-soft); margin:0 0 26px; font-size:1.02rem; max-width:640px; position:relative; padding-top:12px; }
p.section-sub::before{
  content:''; position:absolute; top:0; left:0; width:46px; height:3px; border-radius:3px;
  background:var(--accent); opacity:0.9;
}
section.panel.dark p.section-sub::before{ box-shadow:0 0 12px rgba(var(--accent-rgb),0.5); }

.reveal{ opacity:0; transform:translateY(28px) scale(0.98); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.visible{ opacity:1; transform:none; }

/* Cascading stagger for grid children as they reveal */
.info-grid.reveal, .bigfive-grid .reveal, .stats-grid .reveal, .crew-grid .reveal,
.family-grid .reveal, .weather-stats .reveal{ transition-delay:calc(var(--stagger, 0) * 60ms); }
.info-grid > .card:nth-child(1), .bigfive-grid > *:nth-child(1), .stats-grid > *:nth-child(1){ --stagger:0; }
.info-grid > .card:nth-child(2), .bigfive-grid > *:nth-child(2), .stats-grid > *:nth-child(2){ --stagger:1; }
.info-grid > .card:nth-child(3), .bigfive-grid > *:nth-child(3), .stats-grid > *:nth-child(3){ --stagger:2; }
.info-grid > .card:nth-child(4), .bigfive-grid > *:nth-child(4), .stats-grid > *:nth-child(4){ --stagger:3; }
.info-grid > .card:nth-child(5), .bigfive-grid > *:nth-child(5){ --stagger:4; }
.info-grid > .card:nth-child(6), .bigfive-grid > *:nth-child(6){ --stagger:5; }
.info-grid > .card, .bigfive-grid > *, .stats-grid > *{ transition-delay:calc(var(--stagger, 0) * 70ms) !important; }

.card{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow); padding:18px 20px; margin-bottom:14px; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, border-color .3s ease; }
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb),0.35); border-color:var(--accent-deep); }
section.panel.dark .card{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); color:#f4f1ea; }
section.panel.dark .card p{ color:#c7c2b6; }
section.panel.dark .card:hover{ border-color:rgba(var(--accent-rgb),0.45); box-shadow:0 24px 60px rgba(0,0,0,0.4), 0 0 26px rgba(var(--accent-rgb),0.12); }
.info-grid .card h3{ color:var(--theme-900); }
section.panel.dark .info-grid .card h3{ color:#fdf9f0; }

/* ---------- Why go now ---------- */
.why-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:center; }
@media (max-width:760px){ .why-grid{ grid-template-columns:1fr; } }
.why-grid .photo-banner{ height:320px; margin-bottom:0; }
.stat-big{ display:flex; align-items:baseline; gap:10px; margin-bottom:4px; }
.stat-big .num{ font-family:var(--font-display); font-size:3.2rem; font-weight:400; color:var(--accent); line-height:1; text-shadow:0 0 26px rgba(var(--accent-rgb),0.3); }
.stat-big .unit{ font-size:1rem; color:#c7c2b6; }
.stat-line{ font-size:0.9rem; color:#c7c2b6; margin:0 0 18px; }

/* ---------- Crew ---------- */
.crew-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.crew-card{ position:relative; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; background:var(--dark-base); transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.crew-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb),0.4); }
.crew-card img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.crew-card:hover img{ transform:scale(1.08); }
.crew-card.no-photo{ display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 100% at 50% 30%, rgba(var(--accent-rgb),0.2), var(--dark-base) 70%); }
.crew-icon{ font-size:4.5rem; line-height:1; filter:drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.crew-caption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 14px 12px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
  color:#fff; font-size:0.85rem; font-weight:600;
}
.crew-check{ color:var(--accent); }

/* ---------- Group photos — auto-scrolling marquee ---------- */
.group-marquee{ position:relative; overflow:hidden; margin-top:22px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.group-marquee-track{ display:flex; gap:18px; width:max-content; animation:groupMarquee 75s linear infinite; }
.group-marquee:hover .group-marquee-track{ animation-play-state:paused; }
.group-marquee-item{ position:relative; flex:0 0 auto; width:320px; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-lg); }
.group-marquee-item img{ width:320px; height:220px; object-fit:cover; display:block; }
.group-marquee-item .crew-caption{ font-size:0.8rem; }
@keyframes groupMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .group-marquee-track{ animation:none; } }

/* ---------- Itinerary timeline ---------- */
.timeline{ position:relative; padding-left:26px; }
.timeline::before{ content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:linear-gradient(180deg, var(--accent), var(--line) 18%, var(--line) 82%, var(--accent)); opacity:0.75; }
details.day{ position:relative; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius-md); margin-bottom:12px; box-shadow:var(--shadow); overflow:hidden; transition:border-color .25s ease, box-shadow .25s ease; }
details.day:hover{ border-color:var(--accent-deep); box-shadow:var(--shadow), 0 0 0 1px rgba(var(--accent-rgb),0.22); }
details.day::before{ content:""; position:absolute; left:-26px; top:22px; width:11px; height:11px; border-radius:50%; background:var(--accent); border:3px solid var(--paper); box-shadow:0 0 0 2px var(--line); }
details.day[open]{ border-color:var(--accent-deep); }
details.day[open]::before{ box-shadow:0 0 0 2px var(--accent-deep), 0 0 14px rgba(var(--accent-rgb),0.55); }
details.day summary{ list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; gap:12px; font-weight:600; color:var(--theme-900); font-size:1.02rem; }
details.day summary::-webkit-details-marker{ display:none; }
details.day summary .daynum{ background:var(--theme-900); color:var(--accent); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.1rem; flex:0 0 auto; font-weight:400; }
details.day summary .daytitle{ flex:1; font-family:var(--font-display); text-transform:uppercase; font-size:1.2rem; letter-spacing:0.01em; }
details.day summary .chevron{ transition:transform .2s ease; color:var(--ink-soft); font-size:0.8rem; }
details.day[open] summary .chevron{ transform:rotate(90deg); color:var(--accent-ink); }
details.day .day-body{ padding:0 20px 18px 64px; font-size:0.93rem; color:var(--ink); }
section.panel.dark details.day, section.panel.dark details.day .day-body,
section.panel.dark details.day p{ color:var(--ink); }
section.panel.dark details.day summary{ color:var(--theme-900); }
details.day .tag{ display:inline-block; background:var(--tint-200); color:var(--theme-800); border-radius:8px; padding:3px 10px; font-size:0.75rem; margin:2px 5px 8px 0; font-weight:600; }
details.day .tag.highlight{ background:var(--accent-2-ink); color:#fff; }
details.day .maps-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:0.82rem; font-weight:700;
  color:var(--theme-700); border:1px solid var(--line); padding:6px 12px; border-radius:999px;
  transition:background .18s ease, border-color .18s ease;
}
details.day .maps-link:hover{ background:var(--tint-200); border-color:var(--accent-deep); }
details.day .mini-photo{ border-radius:12px; overflow:hidden; margin-top:10px; max-width:280px; }
details.day .mini-photo img{ width:100%; }

/* ---------- Info grids ---------- */
.info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.info-grid .card h3{ margin:0 0 8px; font-size:1rem; }
.info-grid .card p{ margin:0; font-size:0.88rem; color:var(--ink-soft); }
.rule-list{ margin:0; padding-left:20px; font-size:0.92rem; }
.rule-list li{ margin-bottom:8px; }
.callout{ background:rgba(var(--accent-rgb),0.13); border:1px solid var(--accent-deep); border-left:4px solid var(--accent-deep); border-radius:var(--radius-md); padding:14px 18px; font-size:0.9rem; margin:16px 0; box-shadow:0 6px 16px rgba(var(--accent-rgb),0.12); }
.callout strong{ color:var(--accent-ink); }
section.panel.dark .callout{ background:rgba(var(--accent-rgb),0.1); border-color:rgba(var(--accent-rgb),0.35); border-left-color:var(--accent); color:#f4f1ea; }
section.panel.dark .callout strong{ color:var(--accent); }
.callout.warn{ background:rgba(210,16,52,0.09); border-color:var(--accent-2-deep); border-left-color:var(--accent-2-deep); box-shadow:0 6px 16px rgba(168,14,41,0.08); }
.callout.warn strong{ color:var(--accent-2-ink); }
section.panel.dark .callout.warn{ background:rgba(210,16,52,0.14); border-color:rgba(210,16,52,0.4); border-left-color:#ff9b8a; }
section.panel.dark .callout.warn strong{ color:#ff9b8a; }
.source-note{ font-size:0.74rem; color:var(--ink-soft); margin-top:6px; }
section.panel.dark .source-note{ color:#9b968a; }
/* I link nelle note su fondo scuro prendevano il verde da pannello chiaro */
section.panel.dark .source-note a, .mondo-wrap .source-note a{ color:var(--accent); }

/* ---------- Families / filterable cards ---------- */
.filter-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.filter-row button{ border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); padding:7px 14px; border-radius:999px; font-size:0.83rem; font-weight:600; cursor:pointer; transition:all .15s; }
.filter-row button:hover{ background:var(--tint-200); border-color:var(--accent-deep); }
.filter-row button.active{ background:var(--theme-800); color:#fff; border-color:var(--theme-800); box-shadow:0 4px 12px rgba(var(--theme-rgb),0.3); }
section.panel.dark .filter-row button{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.16); color:#c7c2b6; }
section.panel.dark .filter-row button:hover{ background:rgba(255,255,255,0.12); border-color:rgba(var(--accent-rgb),0.4); }
section.panel.dark .filter-row button.active{ background:var(--accent); color:#10100e; border-color:var(--accent); }
.family-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.family-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow); padding:16px 18px; border-top:3px solid var(--accent); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.family-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
section.panel.dark .family-card{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-top:3px solid var(--accent); }
.family-card .fname{ font-weight:700; color:var(--theme-900); font-size:1.02rem; }
section.panel.dark .family-card .fname{ color:#fdf9f0; }
.family-card .fsector{ font-size:0.78rem; color:var(--ink-soft); margin-bottom:8px; }
section.panel.dark .family-card .fsector{ color:#9b968a; }
.family-card .flevel{ display:inline-block; font-size:0.72rem; font-weight:700; padding:3px 9px; border-radius:7px; margin-bottom:8px; }
.flevel.Facile{ background:rgba(var(--theme-rgb),0.16); color:var(--theme-800); }
.flevel.Media{ background:rgba(var(--accent-rgb),0.22); color:var(--accent-ink); }
.flevel.Impegnativo, .flevel.Impegnativa, .flevel.Difficile{ background:rgba(210,16,52,0.14); color:var(--accent-2-ink); }
section.panel.dark .flevel.Facile{ background:rgba(var(--theme-rgb),0.34); color:#bfe8d2; }
section.panel.dark .flevel.Media{ background:rgba(var(--accent-rgb),0.24); color:var(--accent); }
section.panel.dark .flevel.Impegnativo, section.panel.dark .flevel.Impegnativa, section.panel.dark .flevel.Difficile{ background:rgba(210,16,52,0.28); color:#ff9b8a; }
.family-card .fnote{ font-size:0.85rem; color:var(--ink-soft); margin:0; }
section.panel.dark .family-card .fnote{ color:#c7c2b6; }
.family-card .fsize{ font-size:0.83rem; color:var(--ink); font-weight:600; margin-bottom:4px; }
section.panel.dark .family-card .fsize{ color:#e8e2d2; }

/* ---------- Stats / rings ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; align-items:stretch; }
.ring-card{ text-align:center; }
.ring{ width:150px; height:150px; border-radius:50%; margin:0 auto 14px; background:conic-gradient(var(--accent) calc(var(--pct)*1%), rgba(255,255,255,0.12) 0); display:flex; align-items:center; justify-content:center; position:relative; box-shadow:0 0 30px rgba(var(--accent-rgb),0.18); }
.ring::before{ content:""; position:absolute; inset:12px; border-radius:50%; background:var(--dark-base); }
.ring .ring-label{ position:relative; z-index:1; font-size:1.7rem; font-weight:800; color:var(--accent-ink); }
section.panel.dark .ring .ring-label{ color:#fff; }
.dist-bars{ display:flex; flex-direction:column; gap:12px; }
.dist-row{ display:flex; align-items:center; gap:12px; }
.dist-row .dlabel{ width:130px; font-size:0.83rem; flex:0 0 auto; color:var(--ink-soft); }
section.panel.dark .dist-row .dlabel{ color:#c7c2b6; }
.dist-row .dtrack{ flex:1; height:12px; border-radius:8px; background:rgba(255,255,255,0.12); overflow:hidden; }
.dist-row .dfill{ height:100%; border-radius:8px; background:linear-gradient(90deg,var(--accent-deep),var(--accent)); }
.dist-row .dpct{ width:40px; text-align:right; font-size:0.83rem; font-weight:700; color:var(--ink); }
section.panel.dark .dist-row .dpct{ color:#fff; }
.factor-list{ margin:0; padding-left:20px; font-size:0.9rem; color:#c7c2b6; }
.factor-list li{ margin-bottom:8px; }

/* ---------- Highlight-card grid (Big Five / Big Peaks / etc.) ---------- */
.bigfive-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:16px; }
.bigfive-card{ background:var(--tint-100); border:1px solid var(--line); color:var(--ink);
  /* fondo e testo chiari solo dentro un pannello scuro (vedi sotto) */ border-radius:var(--radius-md); padding:16px; text-align:center; transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease; }
.bigfive-card:hover{ transform:translateY(-4px); border-color:rgba(var(--accent-rgb),0.4); }
.bigfive-card .bf-icon{ font-size:2.4rem; margin-bottom:8px; }
.bigfive-card .bf-name{ font-family:var(--font-display); text-transform:uppercase; font-size:1.2rem; color:var(--theme-900); }
section.panel.dark .bigfive-card{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.14); color:#f4f1ea; }
section.panel.dark .bigfive-card .bf-name{ color:#fff; }
.bigfive-card .bf-diff{ display:inline-block; font-size:0.7rem; font-weight:700; padding:3px 9px; border-radius:7px; margin:6px 0 8px; }
.bf-diff.Facile{ background:rgba(var(--theme-rgb),0.34); color:#bfe8d2; }
.bf-diff.Media{ background:rgba(var(--accent-rgb),0.22); color:var(--accent); }
.bf-diff.Difficile{ background:rgba(210,16,52,0.28); color:#ff9b8a; }
.bf-diff.Assente{ background:#333; color:#999; }
.bigfive-card .bf-fact{ font-size:0.82rem; color:var(--ink-soft); margin:0 0 12px; min-height:44px; }
section.panel.dark .bigfive-card .bf-fact{ color:#c7c2b6; }
.bf-track-btn{ border:none; background:rgba(255,255,255,0.14); color:#fff; padding:8px 14px; border-radius:999px; font-size:0.78rem; font-weight:700; cursor:pointer; transition:background .15s; }
.bf-track-btn:hover{ background:rgba(255,255,255,0.24); }
.bf-track-btn.spotted{ background:var(--accent); color:#10100e; }

/* ---------- Sun simulation ---------- */
.sun-sim-wrap{ text-align:center; }
.sun-sim-wrap svg{ width:100%; max-width:500px; height:auto; }
.sun-arc{ fill:none; stroke:rgba(var(--accent-rgb),0.35); stroke-width:2; stroke-dasharray:4 6; }
.sun-horizon{ stroke:rgba(255,255,255,0.25); stroke-width:1.5; }
.sun-hills{ fill:rgba(var(--theme-rgb),0.35); }
.sun-label{ font-size:12px; fill:var(--ink-soft); }
section.panel.dark .sun-label{ fill:#c7c2b6; }
#sun-marker{ transition:transform .12s ease-out; }
#sun-marker text{ filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),0.85)); }
.sun-readout{ margin-top:10px; font-family:var(--font-display); font-size:1.3rem; color:var(--accent-ink); }
section.panel.dark .sun-readout{ color:var(--accent); }
.sun-slider-row{ margin:16px auto 4px; max-width:460px; }
.sun-slider-row input[type=range]{ width:100%; accent-color:var(--accent); cursor:pointer; }
.sun-slider-ticks{ display:flex; justify-content:space-between; font-size:0.7rem; color:var(--ink-soft); margin-top:2px; }
section.panel.dark .sun-slider-ticks{ color:#8f8b80; }

/* ---------- Weather ---------- */
.weather-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:10px; }
.weather-stats .card{ text-align:center; padding:16px 10px; }
.weather-stats .wval{ font-size:1.5rem; font-weight:800; color:var(--theme-800); }
section.panel.dark .weather-stats .wval{ color:var(--accent); }
.weather-stats .wlabel{ font-size:0.76rem; color:var(--ink-soft); margin-top:2px; }
section.panel.dark .weather-stats .wlabel{ color:#9b968a; }
.weather-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:24px; }
@media (max-width:600px){ .weather-cols{ grid-template-columns:1fr; } }
.weather-cols h4{ margin:0 0 10px; color:var(--theme-800); font-size:0.95rem; }
section.panel.dark .weather-cols h4{ color:var(--accent); }
.rain-chart{ display:flex; align-items:flex-end; gap:14px; height:160px; padding:0 6px 26px; position:relative; }
.rain-chart .bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative; }
.rain-chart .bar{ width:100%; max-width:38px; border-radius:8px 8px 4px 4px; background:var(--theme-700); transition:height .8s ease; }
.rain-chart .bar-col.hl .bar{ background:var(--accent-2); }
.rain-chart .bar-val{ font-size:0.72rem; color:var(--ink-soft); margin-bottom:4px; }
.rain-chart .bar-month{ position:absolute; bottom:-22px; font-size:0.78rem; color:var(--ink-soft); font-weight:600; }
.rain-chart .bar-col.hl .bar-month{ color:var(--accent-2-ink); font-weight:800; }

/* ---------- Jeep/route map animation ---------- */
/* Il riquadro si stringe attorno al disegno: altrimenti resterebbero ~180px
   di fondo vuoto per lato, che si leggono come due bande. */
.jeep-map-wrap{ position:relative; background:radial-gradient(120% 100% at 30% 20%, rgba(var(--theme-rgb),0.45), var(--dark-base) 75%); border:1px solid rgba(var(--accent-rgb),0.18); border-radius:var(--radius-lg); padding:18px; text-align:center; margin:0 auto 24px; box-shadow:var(--shadow-lg); max-width:660px; }
.jeep-map-wrap svg{ width:100%; max-width:620px; height:auto; }
.jeep-map-wrap .terrain{ stroke:rgba(255,255,255,0.1); stroke-width:1.2; }
.jeep-map-wrap .terrain-a{ fill:rgba(var(--theme-rgb),0.3); }
.jeep-map-wrap .terrain-b{ fill:rgba(var(--accent-rgb),0.12); }
.jeep-map-wrap .terrain-c{ fill:rgba(var(--theme-rgb),0.2); }
.jeep-map-wrap .contour{ fill:none; stroke:rgba(255,255,255,0.14); stroke-width:0.8; }
.jeep-map-wrap .border-line{ fill:none; stroke:rgba(255,255,255,0.3); stroke-width:1.4; stroke-dasharray:4 3; }
.jeep-map-wrap .border-label{ font-size:8px; fill:rgba(255,255,255,0.55); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
.jeep-map-wrap .route-shadow{ fill:none; stroke:rgba(0,0,0,0.35); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
.jeep-map-wrap .route-line{ fill:none; stroke:var(--accent); stroke-width:3; stroke-dasharray:2 9; stroke-linecap:round; opacity:0.85; }
.jeep-map-wrap .pulse{ fill:var(--accent-2); opacity:0.35; animation:pulse 1.8s ease-out infinite; }
@keyframes pulse{ 0%{ r:8; opacity:0.5; } 100%{ r:26; opacity:0; } }
.jeep-map-wrap .stop-label{ font-size:10.5px; fill:#f4f1ea; font-weight:700; paint-order:stroke; stroke:rgba(10,10,10,0.75); stroke-width:3px; stroke-linejoin:round; }
.jeep-map-wrap .stop-label.highlight{ fill:var(--accent); font-size:11.5px; }
.jeep-map-wrap .stop-pin text:first-child{ filter:drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
.jeep-map-wrap .stop-pin.minor text:first-child{ font-size:14px; opacity:0.85; }
.jeep-map-wrap .stop-pin.minor .stop-label{ font-size:8.5px; fill:#c7c2b6; }
.jeep-map-wrap .compass{ opacity:0.6; }
.jeep-map-wrap .compass text{ font-size:9px; fill:#f4f1ea; font-weight:700; }
.jeep-map-wrap .compass line{ stroke:#f4f1ea; stroke-width:1; }
.jeep-map-wrap .scale-bar line{ stroke:#f4f1ea; stroke-width:1.5; }
.jeep-map-wrap .scale-bar text{ font-size:8px; fill:rgba(244,241,234,0.7); }
.jeep-map-wrap .map-caption{ font-size:9px; fill:rgba(244,241,234,0.45); font-style:italic; }


/* ---------- Elevation chart ---------- */
.elev-chart{ display:flex; align-items:flex-end; gap:10px; height:220px; padding:0 6px 40px; position:relative; min-width:640px; }
.elev-chart .elev-col{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative; }
.elev-chart .elev-bar{ width:100%; max-width:44px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,var(--accent),var(--accent-2)); transition:height 1s cubic-bezier(.16,1,.3,1); }
.elev-chart .elev-val{ font-size:0.74rem; color:#f4f1ea; margin-bottom:6px; font-weight:700; }
.elev-chart .elev-name{ position:absolute; bottom:-38px; font-size:0.72rem; color:#c7c2b6; text-align:center; width:90px; left:50%; transform:translateX(-50%); line-height:1.3; }

/* ---------- Form / result blocks ---------- */
.currency-form{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; }
.currency-form .field{ display:flex; flex-direction:column; gap:6px; }
.currency-form label{ font-size:0.8rem; font-weight:600; color:var(--theme-900); }
section.panel.dark .currency-form label{ color:#e8e2d2; }
.currency-form input, .currency-form select{ padding:9px 12px; border:1px solid var(--line); border-radius:10px; font-size:0.95rem; background:var(--paper); color:var(--ink); }
.currency-form input:focus, .currency-form select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.currency-form input{ width:130px; }
.cur-result{ font-family:var(--font-display); font-size:2.2rem; color:var(--theme-800); background:var(--tint-200); border-radius:14px; padding:16px 20px; text-align:center; }
section.panel.dark .cur-result{ color:var(--accent); background:rgba(var(--accent-rgb),0.1); border:1px solid rgba(var(--accent-rgb),0.25); }

/* ---------- Flights ---------- */
.flight-form{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:18px; }
.flight-form .field{ display:flex; flex-direction:column; gap:6px; }
.flight-form label{ font-size:0.8rem; font-weight:600; color:var(--theme-900); }
section.panel.dark .flight-form label{ color:#e8e2d2; }
.flight-form select{ padding:9px 12px; border:1px solid var(--line); border-radius:10px; font-size:0.9rem; background:var(--paper); color:var(--ink); min-width:200px; }
.flight-links{ display:flex; gap:10px; flex-wrap:wrap; }
.flight-links button{ border:none; background:linear-gradient(180deg,var(--theme-700),var(--theme-900)); color:#fff; padding:11px 20px; border-radius:12px; font-size:0.9rem; font-weight:700; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 4px 12px rgba(var(--theme-rgb),0.3); }
.flight-links button:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(var(--theme-rgb),0.42); }
.flight-links button.alt{ background:linear-gradient(180deg,var(--accent),var(--accent-deep)); color:#10100e; box-shadow:0 4px 12px rgba(var(--accent-rgb),0.3); }
.flight-links button.alt:hover{ box-shadow:0 8px 20px rgba(var(--accent-rgb),0.42); }
.hub-table{ width:100%; border-collapse:collapse; font-size:0.85rem; margin-bottom:16px; }
.hub-table th{ text-align:left; color:var(--ink-soft); font-size:0.75rem; text-transform:uppercase; border-bottom:2px solid var(--line); padding:6px 8px; }
.hub-table td{ padding:7px 8px; border-bottom:1px solid var(--line); }
section.panel.dark .hub-table th{ color:#9b968a; border-bottom-color:rgba(255,255,255,0.2); }
section.panel.dark .hub-table td{ border-bottom-color:rgba(255,255,255,0.1); }

/* ---------- Map ---------- */
.map-embed{ border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow); margin-bottom:16px; border:1px solid var(--line); }
.map-embed iframe{ width:100%; height:380px; border:0; display:block; }
.map-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.map-actions a, .map-actions button{
  display:inline-flex; align-items:center; gap:8px; border:none; background:linear-gradient(180deg,var(--theme-700),var(--theme-800)); color:#fff;
  padding:11px 18px; border-radius:12px; font-size:0.88rem; font-weight:700; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 4px 12px rgba(var(--theme-rgb),0.3);
}
.map-actions a:hover, .map-actions button:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(var(--theme-rgb),0.42); }
.map-actions button.export{ background:linear-gradient(180deg,var(--accent),var(--accent-deep)); color:#10100e; box-shadow:0 4px 12px rgba(var(--accent-rgb),0.3); }
.map-actions button.export:hover{ box-shadow:0 8px 20px rgba(var(--accent-rgb),0.42); }
table.stops-table{ width:100%; min-width:480px; border-collapse:collapse; font-size:0.83rem; }
table.stops-table th{ text-align:left; color:var(--ink-soft); font-size:0.72rem; text-transform:uppercase; border-bottom:2px solid var(--line); padding:6px 8px; }
table.stops-table td{ padding:7px 8px; border-bottom:1px solid var(--line); }
table.stops-table td.mono{ font-family:ui-monospace,Consolas,monospace; font-size:0.78rem; color:var(--ink-soft); }

/* ---------- FAQ ---------- */
details.faq{ background:var(--paper); border:1px solid var(--line); border-radius:14px; margin-bottom:8px; box-shadow:var(--shadow); transition:border-color .2s ease; }
details.faq:hover{ border-color:var(--accent-deep); }
details.faq[open]{ border-color:var(--accent-deep); box-shadow:var(--shadow), 0 0 0 1px rgba(var(--accent-rgb),0.2); }
details.faq summary{ padding:14px 18px; cursor:pointer; font-weight:600; color:var(--theme-900); list-style:none; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq[open] summary::after{ content:"−"; color:var(--accent-ink); }
details.faq summary::after{ content:"+"; float:right; color:var(--ink-soft); font-weight:400; }
details.faq .faq-body{ padding:0 18px 16px; font-size:0.9rem; color:var(--ink-soft); }

footer{ text-align:center; padding:36px 16px 46px; color:#c7c2b6; font-size:0.82rem; background:linear-gradient(160deg,var(--dark-base),#080808); border-top:3px solid var(--accent); }
footer .credits{ max-width:700px; margin:14px auto 0; font-size:0.72rem; color:#8f8b80; line-height:1.7; }
footer .credits a{ color:#a9a49a; }
footer a.home-link{ color:var(--accent); font-weight:700; }

/* ---------- Trip hub (index page) ---------- */
.trip-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; margin-top:8px; }
.trip-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:4/5; background:var(--dark-base); display:block; transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.trip-card:hover{ transform:translateY(-6px); box-shadow:0 28px 64px rgba(0,0,0,0.4), 0 0 0 1px rgba(var(--accent-rgb),0.35), 0 0 30px rgba(var(--accent-rgb),0.14); }
.trip-card img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.16,1,.3,1); }
.trip-card:hover img{ transform:scale(1.08); }
.trip-card .overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,0.05) 40%, rgba(10,10,10,0.92) 100%);
}
.trip-card .content{ position:absolute; left:0; right:0; bottom:0; padding:22px 22px 20px; color:#fff; }
.trip-card .flag{ font-size:1.6rem; margin-bottom:4px; }
.trip-card .title{ font-family:var(--font-display); font-size:2rem; text-transform:uppercase; line-height:1; margin-bottom:6px; }
.trip-card .meta{ font-size:0.8rem; color:#e8e2d2; opacity:0.85; margin-bottom:8px; }
.trip-card .tagline{ font-size:0.85rem; color:#d8d3c6; margin:0; }
.trip-card.soon{ display:flex; align-items:center; justify-content:center; background:radial-gradient(120% 100% at 50% 30%, rgba(255,255,255,0.06), var(--dark-base) 70%); border:1px dashed rgba(255,255,255,0.2); }
.trip-card.soon .soon-inner{ text-align:center; color:#8f8b80; }
.trip-card.soon .soon-inner .plus{ font-size:2.6rem; line-height:1; margin-bottom:6px; color:#5b6a61; }


/* ============================================================
   MOBILE  (<=760px)
   Il sito era nato desktop: qui sotto ci sono solo gli scostamenti.
   Il problema principale non era la larghezza — le griglie collassano
   gia' da sole — ma l'altezza mangiata dalle due barre appiccicate.
   ============================================================ */
@media (max-width:760px){

  /* --- Barra delle sezioni: una riga sola che scorre --- */
  nav.tabs{ padding:7px 10px; gap:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  nav.tabs::-webkit-scrollbar{ display:none; }
  nav.tabs a{ padding:10px 13px; font-size:0.72rem; letter-spacing:0.03em; }

  /* --- Hero: piu' corto, cosi' il contenuto inizia prima --- */
  header.hero{ min-height:74vh; padding:34px 18px 34px; }
  header.hero h1{ font-size:clamp(2.1rem,10vw,3.4rem); margin-bottom:10px; }
  header.hero .tagline{ font-size:0.94rem; line-height:1.6; }
  .badge-row{ margin-top:16px; gap:6px; }
  .badge{ font-size:0.72rem; padding:5px 11px; }
  .scroll-cue{ margin-top:22px; }

  /* --- Respiro dei pannelli: 78px in cima erano troppi --- */
  section.panel{ padding:44px 16px 26px; }
  h2.section-title{ font-size:clamp(1.5rem,6.6vw,2.1rem); gap:8px; align-items:flex-start; }
  p.section-sub{ font-size:0.93rem; }
  .card{ padding:16px; }
  .callout{ padding:12px 14px; font-size:0.86rem; }
  .info-grid .card h3{ font-size:1rem; }

  /* --- Giorni dell'itinerario ---
     Il rientro da 64px lasciava 225px di testo su 309 di card. */
  details.day summary{ padding:13px 14px; gap:10px; }
  details.day summary .daynum{ width:34px; height:34px; font-size:1rem; }
  details.day summary .daytitle{ font-size:1.02rem; }
  details.day .day-body{ padding:0 16px 16px; }

  .stat-big{ gap:8px; }
  .stat-big .num{ font-size:2.4rem; }
  .stat-big .unit{ font-size:0.88rem; }

  /* --- Mappa e pulsanti a tutta larghezza: piu' facili da centrare col pollice --- */
  .jeep-map-wrap{ padding:12px; }
  .map-actions{ flex-direction:column; gap:8px; }
  .map-actions a, .map-actions button{ width:100%; text-align:center; }

  /* --- Tabelle ---
     La .card che le contiene e' gia' il contenitore che scorre: basta
     renderlo fluido al tocco e segnalarlo, perche' uno scorrimento
     orizzontale senza indizi visivi su mobile non lo trova nessuno. */
  .card{ -webkit-overflow-scrolling:touch; }
  .stops-table th, .stops-table td, .hub-table th, .hub-table td{ padding:8px 10px; }
  /* I link 'Apri' in tabella erano 26x37: troppo stretti per il pollice. */
  .stops-table td a{ display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; min-width:44px; }
  /* Ombra sul bordo destro finche' c'e' tabella oltre il margine: sparisce
     da sola quando si arriva in fondo (background-attachment:local). */
  .card:has(> table.stops-table){
    background-image:
      linear-gradient(to right, var(--paper) 40%, rgba(255,255,255,0)),
      linear-gradient(to left,  var(--paper) 40%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(0,0,0,0.20), rgba(0,0,0,0)),
      linear-gradient(to left,  rgba(0,0,0,0.20), rgba(0,0,0,0));
    background-position:left center, right center, left center, right center;
    background-repeat:no-repeat;
    background-size:24px 100%, 24px 100%, 11px 100%, 11px 100%;
    background-attachment:local, local, scroll, scroll;
  }
  section.panel.dark .card:has(> table.stops-table){
    background-image:
      linear-gradient(to right, #1b1b1b 40%, rgba(0,0,0,0)),
      linear-gradient(to left,  #1b1b1b 40%, rgba(0,0,0,0)),
      linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0)),
      linear-gradient(to left,  rgba(0,0,0,0.5), rgba(0,0,0,0));
  }

  /* --- Grafico delle piogge: sfondava di ~150px --- */
  .rain-chart{ overflow-x:auto; -webkit-overflow-scrolling:touch; gap:8px; padding-bottom:30px; }
  .rain-chart .bar-col{ min-width:24px; flex:0 0 auto; }

  /* --- Moduli ---
     16px sul campo e' la soglia sotto cui iOS zooma da solo al focus. */
  .currency-form, .flight-form{ flex-direction:column; align-items:stretch; gap:12px; }
  .currency-form .field, .flight-form .field{ width:100%; }
  .currency-form input, .currency-form select,
  .flight-form input, .flight-form select{ font-size:16px; width:100%; }
  .flight-links{ flex-direction:column; }
  .flight-links button{ width:100%; }
  .cur-result{ font-size:1.5rem; }

  /* --- Filtri e caroselli --- */
  .filter-row{ gap:6px; }
  .filter-row button{ padding:9px 12px; font-size:0.78rem; }
  .group-marquee-item{ width:210px; }
  .group-marquee-item img{ width:210px; height:145px; }

  .weather-stats{ grid-template-columns:1fr 1fr; gap:10px; }
  .trip-grid{ gap:16px; }

  /* --- Aree toccabili: sotto i 44px si sbaglia bersaglio --- */
  nav.tabs a, .filter-row button, .flight-links button,
  .map-actions a, .map-actions button, details.day summary{ min-height:44px; }
  nav.tabs a{ display:flex; align-items:center; }
  /* "Apri su Maps" e' il comando piu' usato in viaggio: deve essere grosso. */
  details.day .maps-link{ min-height:44px; display:flex; align-items:center; justify-content:center; }
  .bf-track-btn{ min-height:44px; padding:11px 16px; }
  /* Le didascalie delle foto restano piccole: sono attribuzioni, non comandi. */
}

/* Schermi molto stretti (iPhone SE e simili) */
@media (max-width:400px){
  section.panel{ padding:38px 13px 22px; }
  header.hero h1{ font-size:clamp(1.9rem,9.4vw,2.8rem); }
  .weather-stats{ grid-template-columns:1fr; }
}


/* ---------- Home: tab confermati / in programma ---------- */
.trip-tabs{ display:flex; gap:10px; margin:6px 0 4px; flex-wrap:wrap; }
.trip-tab{
  flex:0 0 auto; cursor:pointer; font:inherit; font-size:0.92rem; font-weight:700;
  padding:12px 20px; border-radius:14px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink-soft); letter-spacing:0.02em;
  display:inline-flex; align-items:center; gap:9px; min-height:48px;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.trip-tab:hover{ background:var(--tint-200); color:var(--ink); transform:translateY(-1px); }
.trip-tab .conta{
  font-size:0.76rem; font-weight:800; padding:2px 8px; border-radius:999px;
  background:var(--tint-200); color:var(--theme-900);
}
section.panel.dark .trip-tab{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.16); color:#c7c2b6; }
section.panel.dark .trip-tab:hover{ background:rgba(255,255,255,0.12); color:#f4f1ea; }
section.panel.dark .trip-tab .conta{ background:rgba(255,255,255,0.14); color:inherit; }
.trip-tab.active,
section.panel.dark .trip-tab.active{
  background:var(--theme-800); color:#fff; border-color:var(--theme-800);
  box-shadow:0 6px 18px rgba(var(--theme-rgb),0.32);
}
.trip-tab.active .conta,
section.panel.dark .trip-tab.active .conta{ background:rgba(255,255,255,0.22); color:#fff; }

.trip-gruppo{ display:none; }
.trip-gruppo.attivo{ display:block; animation:destIn .35s cubic-bezier(.16,1,.3,1) both; }
.trip-intro{ font-size:0.9rem; color:var(--ink-soft); margin:14px 0 16px; }
section.panel.dark .trip-intro{ color:#9b968a; }

/* Nel selettore in alto, le mete con la data fissata hanno un segno */
.site-switcher button.confermato::before{
  content:'\2713'; font-size:0.72rem; font-weight:900;
  color:var(--accent); margin-right:5px;
}
.site-switcher button.confermato.active::before{ color:#10100e; }

@media (max-width:760px){
  .trip-tabs{ gap:8px; }
  .trip-tab{ flex:1 1 0; justify-content:center; padding:12px 10px; font-size:0.84rem; }
}

/* Esiti nella tabella storica della fioritura */
.hub-table td.bene{ color:var(--accent-2-ink); font-weight:700; }
.hub-table td.niente{ color:var(--ink-soft); font-style:italic; }
section.panel.dark .hub-table td.bene{ color:#8fe0ac; }
section.panel.dark .hub-table td.niente{ color:#9b968a; }

/* Etichette osservato / previsto nelle tabelle della fioritura */
.hub-table .oss, .hub-table .prev{
  display:inline-block; font-size:0.62rem; font-weight:800; letter-spacing:0.04em;
  text-transform:uppercase; padding:1px 6px; border-radius:6px; margin-left:5px; vertical-align:middle;
}
.hub-table .oss{ background:rgba(var(--theme-rgb),0.16); color:var(--theme-900); }
.hub-table .prev{ background:rgba(var(--accent-2-rgb,120,120,120),0.14); background:var(--tint-200); color:var(--ink-soft); }
section.panel.dark .hub-table .oss{ background:rgba(255,255,255,0.14); color:#f4f1ea; }
section.panel.dark .hub-table .prev{ background:rgba(255,255,255,0.08); color:#c7c2b6; }

/* ---------- Home: bandiere dei paesi già visitati ---------- */
.paesi-fatti{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.paese-fatto{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  border-radius:999px; padding:7px 14px 7px 11px;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.paese-fatto:hover{ background:rgba(255,255,255,0.12); border-color:rgba(var(--accent-rgb),0.45); transform:translateY(-2px); }
.paese-fatto .pf-flag{ font-size:1.35rem; line-height:1; }
.paese-fatto .pf-nome{ font-size:0.84rem; font-weight:600; color:#e8e2d2; letter-spacing:0.01em; }
section.panel:not(.dark) .paese-fatto{ background:var(--paper); border-color:var(--line); }
section.panel:not(.dark) .paese-fatto .pf-nome{ color:var(--ink); }

@media (max-width:760px){
  .paesi-fatti{ gap:8px; }
  .paese-fatto{ padding:7px 12px 7px 10px; }
  .paese-fatto .pf-nome{ font-size:0.8rem; }
}

/* ---------- Mappamondo dei paesi visitati ---------- */
.mondo-wrap{
  background:radial-gradient(120% 100% at 30% 15%, rgba(var(--theme-rgb),0.35), var(--dark-base) 78%);
  border:1px solid rgba(var(--accent-rgb),0.18); border-radius:var(--radius-lg);
  padding:18px 18px 14px; box-shadow:var(--shadow-lg); margin-top:8px;
}
#mondo{ width:100%; height:auto; display:block; }
/* Paesi non visitati: presenti ma spenti, servono a dare la forma del mondo */
#mondo path{ fill:rgba(255,255,255,0.09); stroke:rgba(255,255,255,0.16); stroke-width:0.4; }
#mondo path.visitato{ fill:var(--accent); stroke:var(--accent-deep); stroke-width:0.5; }

.mondo-stat{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:14px; }
.ms-box{ display:flex; flex-direction:column; align-items:center; min-width:96px; }
.ms-num{ font-family:var(--font-display); font-size:2.6rem; line-height:1; color:var(--accent);
  text-shadow:0 0 26px rgba(var(--accent-rgb),0.3); }
.ms-pct{ font-size:1.3rem; margin-left:2px; }
.ms-lab{ font-size:0.76rem; color:#c7c2b6; margin-top:4px; letter-spacing:0.03em; }

/* ---------- Paesi per persona ---------- */
.persona-paesi{ margin-top:20px; }
.pp-nome{ font-family:var(--font-display); text-transform:uppercase; font-size:1.35rem;
  color:var(--accent); margin-bottom:10px; letter-spacing:0.02em; }
section.panel:not(.dark) .pp-nome{ color:var(--accent-ink); }

@media (max-width:760px){
  .mondo-wrap{ padding:12px 12px 10px; }
  .mondo-stat{ gap:8px; }
  .ms-box{ min-width:0; flex:1 1 0; }
  .ms-num{ font-size:2rem; }
  .ms-lab{ font-size:0.7rem; }
}
