/* ==========================================================================
Roboto, ospitato in locale
Niente richieste a fonts.googleapis.com: un dominio in meno da contattare,
nessun problema di consenso e nessun round-trip DNS prima del testo.
unicode-range fa scaricare latin-ext solo se la pagina usa quei caratteri;
font-display:swap mostra subito il testo con il font di sistema.
========================================================================== */
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;
src:url(/assets/fonts/roboto-latin-400.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;
src:url(/assets/fonts/roboto-latin-ext-400.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;
src:url(/assets/fonts/roboto-latin-700.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:normal;font-weight:700;font-display:swap;
src:url(/assets/fonts/roboto-latin-ext-700.woff2) format('woff2');
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Del carattere si caricano due pesi soli, 400 e 700: il 600 e l'800 usati
nel foglio li ricava il browser da quelli. Il peso 500 aveva un'unica
dichiarazione — il prezzo barrato nella barra fissa — e per quella si
scaricavano 37 KB su ogni scheda tour. */
/* ==========================================================================
Vacanze in Marocco — Design System
Zero web-font requests (system stack), single CSS file, mobile-first.
========================================================================== */
:root{
--brand:#ae5f4d; /* primary action */
--brand-dark:#94503f;
/* Il terracotta di marca passa appena sul bianco (4,62:1) ma non sui fondi
tinta, dove finiscono molti link. Per il testo si usa questa versione piu'
scura; sfondi, bordi e icone restano --brand. */
--brand-text:#9c4f3d;
--brand-tint:#f9efec;
--hero-tint:#5c4326; /* bruno-giallo sotto la foto dell'hero */
--ink:#0f294d; /* headings / primary text */
--ink-2:#42556e; /* body text */
/* Il grigio dei testi secondari era 4,26:1 sul bianco e 3,77:1 sui riquadri
colorati: sotto il minimo AA di 4,5:1 per il testo normale, e questo grigio
porta prezzi barrati, note e briciole di pane. Scurito quanto basta per
passare anche sui fondi tinta (4,53:1 sul rosa del listino). */
--ink-3:#5d6f8a; /* muted — AA su bianco, #f6f8fa e #f9efec */
--line:#e4e8ee;
--bg:#fff;
--bg-2:#f6f8fa;
--gold:#ffb400; /* rating stars */
--green:#0a8754; /* trust / free cancellation */
--green-tint:#e8f5ef;
--focus:#1a73e8;
/* Lo stacco fra una sezione e la successiva. Lo stesso numero lo usa il
padding di .info-sec, cosi' le pagine a sezioni riquadrate e quelle a
testo scorrevole respirano uguale. */
--gap-sez:clamp(2rem,1.4rem + 2vw,3rem);
--radius:12px;
--radius-lg:16px;
--shadow-1:0 1px 2px rgba(15,41,77,.06),0 2px 8px rgba(15,41,77,.06);
--shadow-2:0 4px 16px rgba(15,41,77,.10);
--maxw:1180px;
--font:Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
margin:0;font-family:var(--font);font-size:16px;line-height:1.6;
color:var(--ink-2);background:var(--bg);-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink);line-height:1.25;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.75rem,1.2rem + 2.4vw,2.75rem)}
h2{font-size:clamp(1.375rem,1.1rem + 1.2vw,1.875rem)}
h3{font-size:1.125rem}
p{margin:0 0 1rem}
a{color:var(--brand-text);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 1rem;padding-left:1.25rem}
li{margin-bottom:.35rem}
/* Accessibility: visible focus for keyboard users only */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip-link{
position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
padding:.75rem 1.25rem;z-index:9999;border-radius:0 0 8px 0
}
.skip-link:focus{left:0}
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0
}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
/* Pagine di testo (chi siamo, destinazioni, legali, articoli del blog):
una sola colonna centrata. Prima il testo era limitato a 70ch dentro un
contenitore da 1180px, quindi restava un vuoto a destra che sembrava una
barra laterale mancante. */
.container--doc{max-width:840px}
.container--doc .prose{max-width:none}
.container--doc figure{margin:0}
/* Guide alle destinazioni: stessa larghezza delle altre pagine, ma il testo
non arriva da bordo a bordo.
Con .container--doc queste pagine erano larghe 840px contro i 1180 di tutte
le altre, e accanto a "Chi siamo" sembravano una colonna stretta in mezzo al
vuoto. Allargare e basta pero' avrebbe portato le righe di testo a 150
caratteri, che non si leggono: qui la pagina e' larga quanto le altre — e
quindi lo sono la foto di apertura e le schede dei tour, che stanno fuori dal
testo — mentre la prosa resta su una misura leggibile, centrata. */
.container--guida{max-width:var(--maxw)}
/* Il limite di lettura sta sui paragrafi, non sul blocco: titoli, tabelle ed
elenchi usano tutta la larghezza — sono loro a far sembrare stretta la
pagina — mentre il testo continuato resta su una riga leggibile e allineato
a sinistra come tutto il resto. Limitare l'intero .prose e centrarlo
lasciava invece una colonna di testo isolata sotto una foto larga il doppio. */
.container--guida .prose{max-width:none}
.container--guida .prose > p{max-width:78ch}
.container--guida figure{margin:0}
/* solo verticale: .section si usa insieme a .container, e la scorciatoia
"padding: X 0" gli toglierebbe i 16px laterali su ogni pagina */
.section{padding-block:clamp(2rem,1.4rem + 3vw,3.5rem)}
/* --- Ritmo verticale fra i blocchi di una pagina -------------------------
Nelle pagine scritte di seguito — noleggio, servizi, chi siamo — lo stacco
fra un blocco e il successivo era il margine inferiore del blocco di sopra:
32 px dopo una griglia, zero dopo una tabella o due riquadri affiancati.
Cosi' «Le formule piu' richieste» finiva incollata al paragrafo precedente
mentre «La nostra flotta» respirava. Le misure diventano due sole: un titolo
apre una sezione e si stacca di --gap-sez, tutto il resto di 1,5rem.
Il margine sta SOPRA il titolo e non sotto, cosi' il titolo resta attaccato
al paragrafo che introduce; e nulla si applica dopo un titolo, per lo stesso
motivo. Le sezioni che hanno gia' un bordo e un padding propri (.info-sec
nelle pagine a elenco) restano fuori: il loro stacco ce l'hanno dentro. */
main .container:not(.hero-inner) > * + h2{margin-top:var(--gap-sez)}
main .container:not(.hero-inner) > :not(h1):not(h2):not(h3):not(h4) + :not(h2):not(section){margin-top:1.5rem}
.section--tint{background:var(--bg-2)}
/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;gap:1rem;height:76px}
/* Il logo è un'immagine con trasparenza: niente sfondo, altezza legata
all'intestazione. Su schermo stretto si rimpicciolisce per lasciare
spazio al pulsante del menu. */
.logo{display:flex;align-items:center;flex:none}
.logo:hover{text-decoration:none}
.logo img{height:52px;width:auto;display:block}
@media(max-width:900px){.header-inner{height:64px}.logo img{height:42px}}
@media(max-width:520px){.logo img{height:38px}}
.nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.nav a{
color:var(--ink);font-weight:600;font-size:.9375rem;padding:.5rem .75rem;
border-radius:8px;white-space:nowrap
}
.nav a:hover{background:var(--bg-2);text-decoration:none}
.nav a[aria-current="page"]{color:var(--brand-text)}
.header-cta{
background:var(--brand);color:#fff!important;padding:.6rem 1.1rem!important;
border-radius:999px;font-weight:700;
/* icona e testo sulla stessa linea di base, senza spazi bianchi fantasma */
display:inline-flex;align-items:center;gap:.4rem
}
.header-cta svg{flex:none}
.header-cta:hover{background:var(--brand-dark)!important}
.nav-toggle{
display:none;margin-left:auto;background:none;border:1px solid var(--line);
border-radius:8px;width:44px;height:44px;cursor:pointer;color:var(--ink);
align-items:center;justify-content:center
}
@media(max-width:900px){
.nav-toggle{display:flex}
.nav{
position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;
background:#fff;padding:.5rem 16px 1.25rem;gap:0;border-bottom:1px solid var(--line);
box-shadow:var(--shadow-2);max-height:calc(100dvh - 64px);overflow:auto
}
.nav[hidden]{display:none}
.nav a{padding:.9rem .5rem;border-bottom:1px solid var(--line);border-radius:0}
.header-cta{margin-top:.75rem;text-align:center;border-bottom:0!important}
}
/* ---------- Buttons ---------- */
/* L'attributo hidden deve vincere: classi come .btn impostano display e
altrimenti lo annullano. */
[hidden]{display:none !important}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
font-family:inherit;font-weight:700;font-size:1rem;line-height:1;
padding:.875rem 1.5rem;border-radius:999px;border:2px solid transparent;
cursor:pointer;text-align:center;min-height:48px;transition:background .15s,color .15s
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{background:var(--brand-dark)}
.btn--outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--outline:hover{border-color:var(--ink-3);background:var(--bg-2)}
/* Bianco su verde WhatsApp e' 1,98:1: illeggibile al sole e fuori norma.
Il verde e' quello che rende il bottone riconoscibile, quindi resta: cambia
il testo, che su questo verde arriva a 7,3:1. */
.btn--wa{background:#25d366;color:#08301c}
.btn--wa:hover{background:#1fbe5c;color:#08301c}
.btn--wa:hover{background:#1eb959}
.btn--block{width:100%}
.btn--lg{font-size:1.0625rem;padding:1rem 1.75rem;min-height:52px}
/* ---------- Hero ---------- */
/* Sfondo bruno-giallo caldo sotto la foto. Con l'immagine al 35% e' lo sfondo
a dominare la mescolanza, quindi il tono va scelto scuro abbastanza da tenere
il bianco leggibile: qui il titolo resta a 4,7:1, sopra la soglia AA. */
.hero{position:relative;background:var(--hero-tint);color:#fff;overflow:hidden}
.hero img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.40;
/* La fascia dell'hero e' molto piu' larga che alta, quindi "cover" taglia
sopra e sotto. Centrata, la fetta visibile cadeva sulle dune e il tramonto
restava fuori: si sposta l'inquadratura verso l'alto della foto. */
object-position:50% 20%
}
/* Il blocco dell'hero è anche .container: se qui rimettiamo un max-width più
stretto, il container lo centra e il testo finisce spostato a destra rispetto
al resto della pagina. Teniamo la larghezza del container e limitiamo solo
la riga di testo, che resta leggibile e allineata a sinistra come tutto
il resto. */
.hero-inner{
/* solo padding verticale: la scorciatoia "padding: X 0" azzererebbe i 16px
laterali di .container, e su schermo stretto il testo finirebbe attaccato
ai bordi */
position:relative;padding-block:clamp(2.5rem,2rem + 6vw,5.5rem)
}
.hero-inner > *{max-width:680px}
/* Fascia d'apertura delle pagine interne (chi siamo, servizi).
Piu' bassa di quella della home, che deve reggere da sola tutto lo schermo:
qui sotto c'e' subito il contenuto, e una fascia alta uguale spingerebbe
fuori vista la prima sezione. La foto resta la stessa che c'era sotto il
titolo, ma diventa lo sfondo dell'invito invece di un'immagine muta. */
/* Velo scuro sul lato del testo. Senza, il bianco su una foto chiara — il
cielo al tramonto di "Chi siamo" — scende a 4,5:1 di contrasto, cioe' il
minimo di legge misurato sulla media: sulle chiazze piu' chiare va sotto.
Il velo copre solo la meta' sinistra, dove sta il testo, e lascia la foto
leggibile a destra. */
.hero--pagina::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(10,22,35,.62) 0%,rgba(10,22,35,.44) 45%,rgba(10,22,35,0) 82%)
}
.hero--pagina .hero-inner{position:relative;z-index:1;
padding-block:clamp(2rem,1.6rem + 3.5vw,3.5rem)}
.hero--pagina h1{font-size:clamp(1.75rem,1.4rem + 2.2vw,2.75rem)}
.hero--pagina p{font-size:1.0625rem;max-width:62ch}
.hero h1{color:#fff;margin-bottom:.75rem;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero p{font-size:1.125rem;color:#f0f3f7;margin-bottom:1.5rem;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
/* ---------- Trust bar ---------- */
.trustbar{background:var(--bg-2);border-bottom:1px solid var(--line);padding:.875rem 0}
.trustbar ul{
display:flex;flex-wrap:wrap;gap:.5rem 2rem;list-style:none;margin:0;padding:0;
justify-content:center;font-size:.875rem;font-weight:600;color:var(--ink)
}
.trustbar li{display:flex;align-items:center;gap:.4rem;margin:0}
.trustbar .ic{color:var(--green)}
/* ---------- Card grid ---------- */
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.card{
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-1);
transition:box-shadow .18s,transform .18s
}
.card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
/* La card e un contenitore flex, quindi .card-media eredita min-height:auto e
una foto verticale la fa crescere oltre il proprio aspect-ratio. Togliendo
l'immagine dal flusso, l'altezza la decide solo il rapporto 4/3 e la foto
viene ritagliata, qualunque sia il suo formato originale. */
.card-media{position:relative;aspect-ratio:4/3;background:var(--bg-2);overflow:hidden;min-height:0}
/* Il titolo e' l'unico collegamento della scheda, e su una riga sola e' alto
19 px: col dito e' un bersaglio piccolo. Il collegamento si allarga a tutta
la scheda — che e' anche il modo in cui la gente si aspetta che una scheda
funzioni — senza aggiungere un secondo link che si leggerebbe due volte. */
.card{position:relative}
.card-title a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-badge{
position:absolute;top:10px;left:10px;background:rgba(15,41,77,.88);color:#fff;
font-size:.75rem;font-weight:700;padding:.3rem .6rem;border-radius:6px;
max-width:52%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.card-body{padding:.875rem 1rem 1rem;display:flex;flex-direction:column;flex:1}
.card-eyebrow{font-size:.75rem;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem}
.card-title{font-size:1rem;line-height:1.35;margin:0 0 .4rem}
.card-title a{color:var(--ink)}
.card-title a:hover{color:var(--brand-text);text-decoration:none}
.card-desc{font-size:.875rem;color:var(--ink-2);margin:0 0 .6rem}
.card-foot{margin-top:auto;padding-top:.6rem;border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem}
.price{text-align:right;line-height:1.2}
.price small{display:block;font-size:.6875rem;color:var(--ink-3);font-weight:600}
.price strong{font-size:1.125rem;color:var(--ink);font-weight:800}
.price span{font-size:.6875rem;color:var(--ink-3);display:block}
/* ---------- Icons ---------- */
.ic{flex:none;vertical-align:-.15em}
/* ---------- Rating ---------- */
.rating{display:inline-flex;align-items:center;gap:.3rem;font-size:.8125rem;color:var(--ink-2)}
.stars{display:inline-flex;gap:1px;color:var(--gold);line-height:0}
.st{display:block}
.st--full{fill:currentColor}
.st--empty{fill:none;stroke:currentColor;stroke-width:1.4;opacity:.42}
.st--half{fill:currentColor;opacity:.55}
.rating b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.rating .muted{font-size:.75rem}
.card .rating{margin-bottom:.4rem}
.rating--none{color:var(--ink-3);font-size:.75rem}
/* ---------- Breadcrumbs ---------- */
.crumbs{padding:.8125rem 0;font-size:.8125rem;color:var(--ink-3)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.crumbs li{margin:0;display:flex;align-items:center;gap:.35rem}
.crumbs li+li::before{content:"›";color:var(--ink-3)}
/* Il bersaglio da toccare deve arrivare a 24px (WCAG 2.5.8): il testo da
solo ne misura 21. Si allarga la riga del link, non il carattere, e si
toglie un pixel al riempimento del contenitore per non spostare nulla. */
.crumbs a{color:var(--ink-3);display:inline-block;line-height:1.85}
.crumbs [aria-current]{color:var(--ink-2);font-weight:600}
/* ---------- Tour detail layout ---------- */
.tour-layout{display:grid;gap:2rem;grid-template-columns:1fr;align-items:stretch}
/* La colonna di destra deve essere alta quanto la riga: con align-items:start
si accorciava all'altezza del riquadro e position:sticky non aveva spazio
per scorrere, quindi spariva subito. */
.tour-layout>aside{align-self:stretch}
/* senza questo, il contenuto piu largo (una tabella) sfonda la colonna */
.tour-layout>*{min-width:0}
.table-wrap{min-width:0;max-width:100%}
@media(min-width:1000px){.tour-layout{grid-template-columns:minmax(0,1fr) 348px}}
.tour-head{margin-bottom:1.25rem}
.tour-head h1{margin-bottom:.5rem}
.tour-head .lead{margin-bottom:.75rem}
.tour-head .meta-row{margin:.75rem 0 0}
.tour-gallery{position:relative;display:grid;gap:8px;grid-template-columns:2fr 1fr;border-radius:var(--radius-lg);overflow:hidden}
.tour-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
.tour-gallery .g-side{display:grid;gap:8px}
/* i riquadri sono pulsanti: azzeriamo lo stile nativo ma teniamo il focus visibile */
.tour-gallery button{padding:0;border:0;background:none;cursor:pointer;display:block;position:relative;overflow:hidden}
.tour-gallery button:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}
.g-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.6);
color:#fff;font-size:1.35rem;font-weight:700;letter-spacing:.02em}
.g-count{position:absolute!important;right:10px;bottom:10px;display:inline-flex!important;align-items:center;
gap:.4rem;background:rgba(255,255,255,.94);color:var(--ink);border-radius:999px;
/* min-height: e' il bottone che apre la galleria, va premuto col dito */
min-height:32px;padding:.42rem .8rem;font-size:.85rem;font-weight:600;box-shadow:0 1px 6px rgba(0,0,0,.22)}
.g-count .ic{flex:0 0 auto}
@media(max-width:700px){
.tour-gallery{grid-template-columns:1fr}
.tour-gallery .g-side{display:none}
}
/* Dialogo galleria: su desktop una foto per volta, su mobile uno slider. */
.g-modal{border:0;padding:0;width:min(96vw,1000px);max-width:96vw;max-height:94vh;
background:#111;color:#fff;border-radius:14px;overflow:hidden}
.g-modal::backdrop{background:rgba(0,0,0,.82)}
.g-modal-bar{display:flex;align-items:center;justify-content:space-between;
padding:.5rem .75rem;font-size:.9rem}
.g-close{background:none;border:0;color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;padding:0 .3rem}
.g-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.g-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.g-rail::-webkit-scrollbar{display:none}
.g-slide{flex:0 0 100%;scroll-snap-align:center;margin:0;display:flex;flex-direction:column}
.g-slide img{width:100%;max-height:74vh;object-fit:contain;background:#000;display:block}
.g-slide figcaption{padding:.6rem .9rem;font-size:.85rem;color:#d8d8d8;text-align:center}
.g-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.55);
color:#fff;border:0;width:44px;height:44px;border-radius:50%;font-size:1.8rem;line-height:1;
cursor:pointer;display:grid;place-items:center}
.g-nav:hover{background:rgba(0,0,0,.8)}
.g-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.g-prev{left:8px}.g-next{right:8px}
@media(max-width:700px){.g-nav{display:none}} /* su mobile si scorre col dito */
/* Mappa del percorso: SVG fluido, nessuna dipendenza esterna. */
.tour-map{margin:0}
.tour-map figcaption{font-size:.85rem;color:var(--muted);margin-top:.5rem;line-height:1.45}
.meta-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.chip{
display:inline-flex;align-items:center;gap:.45rem;background:var(--bg-2);
border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;
font-size:.8125rem;font-weight:600;color:var(--ink)
}
/* Lo stato acceso esisteva solo nel foglio del pannello: sul sito un filtro
selezionato era identico agli altri, e non si capiva quale fosse attivo. */
.chip.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.booking-box{
border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.25rem;
box-shadow:var(--shadow-2);background:#fff
}
@media(min-width:1000px){
.booking-box{
position:sticky;
/* 64px intestazione + 49px sotto-menu + un po' d'aria */
top:calc(64px + 49px + 16px);
max-height:calc(100dvh - 64px - 49px - 32px);
overflow-y:auto;
}
/* se il riquadro e piu alto della finestra, si scorre da solo */
.booking-box::-webkit-scrollbar{width:6px}
.booking-box::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
}
.booking-rating{
display:flex;align-items:center;gap:.4rem;
padding-bottom:.75rem;margin-bottom:.75rem;border-bottom:1px solid var(--line)
}
.booking-rating .rating{font-size:.875rem}
.booking-rating .stars svg{width:16px;height:16px}
.booking-box .from{font-size:.8125rem;color:var(--ink-3);font-weight:600}
.price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem}
.booking-box .amount{font-size:2rem;font-weight:800;color:var(--ink);line-height:1.1}
.price-was{color:var(--ink-3);font-size:1.0625rem;text-decoration-thickness:1.5px}
.price-off{
background:var(--brand-tint);color:var(--brand-dark);font-size:.75rem;font-weight:800;
padding:.15rem .4rem;border-radius:4px;letter-spacing:.02em
}
.booking-box .per{font-size:.8125rem;color:var(--ink-3);margin-bottom:1rem}
.itinerary{list-style:none;padding:0;margin:0}
.itinerary li{
border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.6rem;
overflow:hidden;background:#fff
}
.itinerary summary{
cursor:pointer;padding:1rem 1.1rem;font-weight:700;color:var(--ink);
list-style:none;display:flex;align-items:center;gap:.75rem
}
.itinerary summary::-webkit-details-marker{display:none}
.itinerary summary::after{content:"+";margin-left:auto;font-size:1.35rem;color:var(--ink-3);font-weight:400}
.itinerary details[open] summary::after{content:"−"}
.day-num{
background:var(--brand-tint);color:var(--brand-dark);font-size:.75rem;font-weight:800;
padding:.3rem .55rem;border-radius:6px;flex:none
}
.itinerary .day-body{padding:0 1.1rem 1.1rem;color:var(--ink-2)}
.incl{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:700px){.incl{grid-template-columns:1fr 1fr}}
.incl ul{list-style:none;padding:0}
.incl li{display:flex;gap:.55rem;align-items:flex-start;font-size:.9375rem}
.incl li .ic{margin-top:.25rem}
.incl .yes .ic{color:var(--green)}
.incl .no .ic{color:#c33}
.faq details{border-bottom:1px solid var(--line);padding:.25rem 0}
.faq summary{cursor:pointer;padding:1rem 0;font-weight:700;color:var(--ink);list-style:none;display:flex;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--ink-3);font-size:1.35rem;font-weight:400}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 1rem;color:var(--ink-2)}
/* ---------- Review ---------- */
.review{border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;background:#fff}
.review-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.avatar{
width:40px;height:40px;border-radius:50%;background:var(--brand-tint);color:var(--brand-dark);
display:grid;place-items:center;font-weight:800;flex:none
}
.review-meta{font-size:.8125rem;color:var(--ink-3)}
.review p{font-size:.9375rem;margin:0}
/* ---------- Forms ---------- */
.form-row{margin-bottom:1rem}
label{display:block;font-weight:600;font-size:.875rem;color:var(--ink);margin-bottom:.35rem}
.req{color:var(--brand)}
/* input:not([type]) e' obbligatorio: un senza attributo type e' un
campo di testo a tutti gli effetti, ma non corrisponde a input[type=text].
Venticinque campi del pannello erano scritti cosi' e restavano larghi
150px, la misura predefinita del browser: sembrava un modulo rotto. */
input:not([type]),
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=month],
input[type=number],input[type=password],input[type=url],input[type=search],select,textarea{
width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
padding:.75rem .875rem;border:1px solid var(--line);border-radius:8px;
background:#fff;min-height:48px
}
textarea{min-height:120px;resize:vertical}
/* Chrome e Safari danno a date/month una larghezza intrinseca:
senza questo il campo resta stretto e non si allinea agli altri. */
input[type=date],input[type=month]{-webkit-appearance:none;appearance:none;min-width:0}
/* Menu a tendina: la resa nativa cambia da un sistema all'altro e su Windows
e' un rettangolo grigio che stona con gli altri campi. Si toglie l'aspetto
di sistema e si disegna la freccia, lasciando spazio a destra perche' non
finisca sopra il testo delle voci piu' lunghe. */
select{
-webkit-appearance:none;appearance:none;cursor:pointer;
padding-right:2.5rem;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b6b7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right .75rem center;
/* il testo di una voce lunga si taglia invece di allargare il campo */
text-overflow:ellipsis
}
select:hover{border-color:var(--ink-3)}
/* Le intestazioni dei gruppi devono distinguersi dalle voci: senza, l'elenco
dei tour e' un muro di righe tutte uguali. */
select optgroup{font-weight:700;color:var(--ink-3);font-style:normal}
select option{font-weight:400;color:var(--ink);padding:.35rem 0}
input:focus,select:focus,textarea:focus{border-color:var(--focus);outline:2px solid var(--focus);outline-offset:0}
.hint{font-size:.8125rem;color:var(--ink-3);margin-top:.3rem}
.error{color:#c33;font-size:.8125rem;margin-top:.3rem;font-weight:600}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#c33}
.hp{position:absolute;left:-9999px}
.alert{padding:1rem 1.1rem;border-radius:var(--radius);margin-bottom:1.25rem;font-size:.9375rem}
.alert--ok{background:var(--green-tint);color:#075c3a;border:1px solid #b6e0cd}
.alert--err{background:#fdecec;color:#a12020;border:1px solid #f5c6c6}
/* ---------- Barra fissa su mobile ----------
Compatta: prezzo su una riga, WhatsApp come icona, CTA con etichetta che si
accorcia sui telefoni piu stretti. Prima occupava 66px e lasciava un vuoto
al centro fra prezzo e pulsante.
------------------------------------------------------------------------ */
.sticky-cta{
/* --cookie-h e' l'altezza del banner cookie, misurata da main.js: finche' il
banner e' aperto la barra si alza sopra di lui invece di finirci sotto. */
position:fixed;bottom:var(--cookie-h,0px);left:0;right:0;z-index:90;background:#fff;
border-top:1px solid var(--line);
padding:.5rem 12px;padding-bottom:calc(.5rem + env(safe-area-inset-bottom));
display:none;gap:.5rem;align-items:center;
box-shadow:0 -4px 16px rgba(15,41,77,.10)
}
.cta-price{flex:0 0 auto;display:flex;flex-direction:column;line-height:1.1;min-width:0}
.cta-now{display:flex;align-items:baseline;gap:.25rem;white-space:nowrap}
.cta-now small{font-size:.6875rem;color:var(--ink-3);font-weight:600}
.cta-now strong{font-size:1.125rem;font-weight:800;color:var(--ink)}
.cta-price s{font-size:.6875rem;color:var(--ink-3);font-weight:400}
.cta-req{font-size:.875rem;color:var(--ink);white-space:nowrap}
.cta-wa{
flex:0 0 auto;margin-left:auto;width:44px;height:44px;border-radius:50%;
background:#25d366;color:#08301c;display:grid;place-items:center
}
.cta-wa:hover{background:#1eb959}
.cta-main{
flex:0 1 auto;font-size:.9375rem;padding:.65rem 1rem;min-height:44px;
white-space:nowrap;border-radius:999px;
/* .btn e inline-flex con gap:.5rem: sullo span "gratuito" quel gap si
sommava allo spazio, sembrava un doppio spazio. Qui lo spazio e il nbsp. */
gap:0
}
@media(max-width:359px){
.cta-extra{display:none} /* "Preventivo" invece di "Preventivo gratuito" */
.cta-main{padding:.65rem .85rem}
}
@media(max-width:999px){
.sticky-cta{display:flex}
body.has-sticky{padding-bottom:72px}
}
/* ---------- Footer ---------- */
/* Il padding in basso non e' decorativo: i pulsanti fissi (torna su, chat)
stanno nell'angolo in basso a destra dello schermo, e arrivati in fondo alla
pagina si appoggiavano sull'ultima riga del piede — copyright, link legali e
firma. Questo spazio e' quello che occupano, cosi' la riga resta leggibile.
Sulle schede tour, dove c'e' anche la barra fissa di prenotazione, i pulsanti
salgono ancora: vedi la regola piu' sotto. */
.site-footer{background:var(--ink);color:#c6d0dd;padding:3rem 0 5rem;margin-top:3rem}
.footer-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.site-footer h3{color:#fff;font-size:.875rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.9rem}
/* Il marchio nel piede usa la versione in negativo (logo-chiaro-*.webp).
Quella a colori e' disegnata per il bianco: misurata sul fondo blu notte,
il 70% del tratto stava sotto 3:1 di contrasto e il logo si leggeva a
fatica. Il negativo e' la stessa forma dipinta di bianco. */
.footer-logo{width:150px;height:auto;margin:.1rem 0 .5rem;opacity:.92}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.5rem}
.site-footer a{color:#c6d0dd;font-size:.9375rem}
/* Nel piede il fondo e' blu scuro: il grigio dei testi secondari, pensato per
il bianco, ci scomparirebbe sopra (3,4:1). */
.site-footer .muted,.site-footer .hint{color:#c6d0dd}
/* La firma di chi ha fatto il sito: sta sulla stessa riga del copyright e dei
collegamenti legali, e della stessa misura e dello stesso colore — e' una
riga sola, non tre pezzi accostati. */
.footer-firma{letter-spacing:.02em}
.site-footer a:hover{color:#fff}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.14);margin-top:2rem;padding-top:1.25rem;
font-size:.8125rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
/* I pulsanti fissi sono due, impilati nell'angolo in basso a destra: la chat
in fondo e il «torna su» ottantaquattro pixel piu' su. Il piede lascia
spazio sotto per la prima (padding-bottom di .site-footer) e a destra per
il secondo, che altrimenti si appoggia proprio sull'ultima voce di questa
riga. Due misure piccole invece di un vuoto grande in fondo alla pagina. */
padding-right:4rem
}
/* I collegamenti del piede sono piu' grandi (.9375rem): in questa riga, accanto
alla riga di copyright, devono essere della stessa misura o sembrano due
testi diversi messi vicini per sbaglio. */
.footer-bottom a{font-size:inherit}
/* ---------- Utilities ---------- */
.lead{font-size:1.0625rem;color:var(--ink-2)}
.muted{color:var(--ink-3)}
.center{text-align:center}
.mb-0{margin-bottom:0}
.mt-2{margin-top:2rem}
.stack>*+*{margin-top:1.25rem}
.prose{max-width:70ch}
/* Immagine di apertura di una pagina di testo: mai piu alta di una 16/9. */
.doc-hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:2rem}
.doc-fig{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-lg);margin:1.75rem 0}
.prose h2{margin-top:2rem}
.prose h3{margin-top:1.5rem}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.9375rem;min-width:min(480px,100%)}
.table-wrap table{min-width:480px}
th,td{text-align:left;padding:.7rem .75rem;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--bg-2);color:var(--ink);font-weight:700;font-size:.8125rem}
/* ---------- Homepage: offers, editorial ---------- */
.offer{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.offer .card-media{min-height:0}
.ribbon{
position:absolute;top:10px;right:10px;z-index:2;background:var(--brand);color:#fff;
font-size:.6875rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
padding:.32rem .6rem;border-radius:5px;
max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.split{display:grid;gap:2rem;grid-template-columns:1fr;align-items:center}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr;gap:3rem}
.split--flip>*:first-child{order:2}}
.split img{border-radius:var(--radius-lg);width:100%}
.figs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:1.5rem 0}
.fig{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.fig b{display:block;font-size:1.5rem;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.fig span{font-size:.8125rem;color:var(--ink-3)}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.steps li{counter-increment:s;position:relative;padding-left:2.75rem}
.steps li::before{
content:counter(s);position:absolute;left:0;top:-2px;width:2rem;height:2rem;border-radius:50%;
background:var(--brand-tint);color:var(--brand-dark);font-weight:800;font-size:.9375rem;
display:grid;place-items:center
}
.steps h3{font-size:1rem;margin-bottom:.25rem}
.steps p{font-size:.9375rem;margin:0}
/* ==========================================================================
Rail: sezioni scorrevoli orizzontalmente
Scorrimento nativo con scroll-snap, quindi funziona a JS spento e con lo
swipe sul telefono. Le frecce le aggiunge il JS solo quando c'e davvero
qualcosa oltre il bordo. Su mobile si vede mezza card in piu (peek), cosi
e evidente che si puo scorrere.
========================================================================== */
.rail-wrap{
position:relative;
/* Il rail interno scorre da solo, ma la larghezza del suo contenuto gonfiava
comunque lo scrollWidth di tutti gli antenati fino a : su mobile il
browser lasciava spostare lateralmente la vista, con una fascia bianca a
destra. "clip" ferma la propagazione senza creare un secondo scroll, e
lascia libero l'asse verticale per l'ombra delle card. */
overflow-x:clip; overflow-y:visible
}
.rail{
--gap:1.25rem; --visible:4;
display:flex; gap:var(--gap);
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
/* spazio verticale perche l'ombra delle card non venga tagliata.
Niente margine negativo laterale: rendeva il rail piu largo del contenitore. */
padding:4px 0 14px; margin:-4px 0 -14px;
scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail>*{
flex:0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
scroll-snap-align:start;
}
@media(min-width:1101px){ .rail[data-visible="3"]{--visible:3} }
@media(max-width:1100px){ .rail{--visible:3} }
@media(max-width:860px) { .rail{--visible:2.2} }
@media(max-width:600px) { .rail{--visible:1.12; --gap:.875rem} }
/* Frecce — inserite dal JS */
.rail-nav{
position:absolute; top:calc(var(--media-center, 50%) - 22px); z-index:5;
width:44px; height:44px; border-radius:50%;
background:#fff; border:1px solid var(--line); color:var(--ink);
box-shadow:var(--shadow-2); cursor:pointer;
display:none; align-items:center; justify-content:center;
transition:opacity .15s, background .15s;
}
.rail-nav:hover{background:var(--bg-2)}
.rail-nav[disabled]{opacity:.35; cursor:default}
.rail-nav--prev{left:-18px}
.rail-nav--next{right:-18px}
/* sotto i 1240px non c'e margine esterno: le frecce rientrano sul bordo */
@media(max-width:1240px){
.rail-nav--prev{left:2px}
.rail-nav--next{right:2px}
}
.rail-wrap.is-scrollable .rail-nav{display:flex}
@media(max-width:860px){
/* sul telefono si scorre con il dito: le frecce coprirebbero le foto */
.rail-wrap.is-scrollable .rail-nav{display:none}
}
/* La card dentro un rail non si alza al passaggio del mouse: durante lo
scorrimento il sollevamento fa "ballare" la fila. */
.rail .card:hover{transform:none}
/* Indicatore di posizione, solo su mobile */
/* I pallini si vedono solo su telefono, cioe' proprio dove si preme col dito:
erano bersagli di 7x7 px, sotto i 24x24 richiesti. Il pallino disegnato resta
di 7 px — cambia solo l'area che risponde al tocco, che ora e' il bottone
intero. */
/* Con molte schede i puntini sono sedici e in 390px non ci stanno: senza
flex-wrap l'ultimo finiva mezzo fuori dallo schermo. */
.rail-dots{display:none; gap:2px; justify-content:center; flex-wrap:wrap; margin-top:.5rem}
.rail-dots button{
flex:0 0 24px; width:24px; height:24px; padding:0; border:0; background:none;
cursor:pointer; display:grid; place-items:center
}
.rail-dots button::before{
content:""; width:7px; height:7px; border-radius:50%; background:var(--line)
}
.rail-dots button[aria-current="true"]::before{background:var(--brand); width:20px; border-radius:4px}
@media(max-width:860px){ .rail-wrap.is-scrollable .rail-dots{display:flex} }
@media(prefers-reduced-motion:no-preference){ .rail{scroll-behavior:smooth} }
/* ==========================================================================
Scheda tour: intestazione a piena larghezza, scheda tecnica, sotto-menu
========================================================================== */
/* Titolo a tutta larghezza, valutazione in fondo alla stessa riga */
.tour-head{margin:0 0 1.5rem}
.tour-head-top{
display:flex;align-items:flex-end;justify-content:space-between;
gap:1.5rem;flex-wrap:wrap;margin-bottom:.5rem
}
.tour-head h1{margin:0;flex:1 1 460px;min-width:0}
.tour-head-rating{flex:0 0 auto;padding-bottom:.35rem}
.tour-head-rating .rating{font-size:.9375rem}
.tour-head-rating .stars svg{width:17px;height:17px}
.tour-head .lead{margin:0;max-width:80ch}
/* Scheda tecnica */
.specs{
/* niente trucco del gap colorato: con una riga incompleta le celle vuote
resterebbero grigie. I bordi stanno sulle celle. */
display:grid;gap:0;background:#fff;border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden;margin:1.25rem 0 0;
grid-template-columns:repeat(auto-fit,minmax(158px,1fr))
}
.spec{
background:#fff;padding:.7rem .9rem;display:flex;gap:.6rem;align-items:flex-start;
border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0
}
.spec .ic{color:var(--ink-3);margin-top:.15rem}
.spec dt{
font-size:.6875rem;font-weight:700;color:var(--ink-3);
text-transform:uppercase;letter-spacing:.05em;margin:0 0 .1rem
}
.spec dd{margin:0;font-size:.875rem;font-weight:600;color:var(--ink);line-height:1.35}
.spec dd small{display:block;font-weight:400;color:var(--ink-3);font-size:.75rem}
.spec--code dd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em}
/* Da tablet in su la tabella sta su una riga sola, qualunque sia il numero di
voci: sono otto, o sette sulle escursioni per cui non e' indicato un
chilometraggio. Con le colonne a larghezza fissa una scheda da otto voci
andava a capo e la riga spaiata sembrava un errore di impaginazione;
grid-auto-flow:column le mette tutte in fila e se le divide lo spazio. */
@media(min-width:900px){
.specs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.spec{padding:.7rem .75rem;gap:.45rem}
.spec dt{font-size:.65rem;letter-spacing:.03em}
.spec dd{font-size:.8125rem;overflow-wrap:anywhere}
.spec .ic{width:15px;height:15px;flex:none}
}
/* Sotto-menu con indicatore della sezione corrente */
.subnav{
position:sticky;top:76px;z-index:80;background:#fff;
border-bottom:1px solid var(--line);margin:0 0 1.5rem
}
.subnav-inner{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;padding:.35rem 0}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav a{
flex:0 0 auto;padding:.6rem .8rem;font-size:.875rem;font-weight:600;
color:var(--ink-3);border-bottom:2px solid transparent;white-space:nowrap
}
.subnav a:hover{color:var(--ink);text-decoration:none}
.subnav a[aria-current="true"]{color:var(--brand-text);border-bottom-color:var(--brand)}
@media(max-width:600px){.subnav{top:64px}.subnav a{padding:.55rem .65rem;font-size:.8125rem}}
/* le ancore non devono finire sotto le due barre appiccicate */
.tour-section{scroll-margin-top:136px}
/* ---------- Valutazione complessiva ---------- */
.rating-overall{
display:grid;gap:1.25rem;align-items:center;
grid-template-columns:1fr;
/* la scatola non prende tutta la larghezza del contenitore: a 1150px le
barre diventavano lunghe il doppio delle recensioni che riassumono, e
il riquadro pesava piu' del contenuto vero */
max-width:42rem;
border:1px solid var(--line);border-radius:var(--radius-lg);
padding:1.25rem 1.5rem;margin:0 0 1.5rem;background:var(--bg-2)
}
@media(min-width:640px){.rating-overall{grid-template-columns:auto 1fr;gap:2rem}}
.ro-brand{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
/* Sulla home il riepilogo apre la sezione da solo: titolo e riquadro al
centro. Altrove (/recensioni, scheda tour) resta allineato al testo. */
/* Titolo dell'elenco tour in pagina categoria: deve esserci per la struttura
dei titoli, ma non deve rubare la scena all'h1 poche righe sopra. */
.cat-list-h2{font-size:1.0625rem;font-weight:700;color:var(--ink-2);margin:0 0 .9rem}
.recensioni-home > h2{text-align:center}
.recensioni-home > .rating-overall{margin-left:auto;margin-right:auto}
/* Sulla scheda di un tour il riquadro sta in una colonna gia' stretta: il
limite di 42rem lo comprimeva ancora, e il marchio ripetuto a meta' pagina
non serve. Qui torna a occupare tutta la colonna, come prima. */
.tour-section .rating-overall{max-width:none}
.tour-section .ro-logo{display:none}
.tour-section .ro-brand{gap:0}
/* Riquadro centrato nella pagina e contenuto centrato dentro di lui: senza il
marchio a sinistra, voto e barre allineati a sinistra lasciavano un vuoto
fuori squadra sul lato opposto. */
.rating-overall--centro{margin-left:auto;margin-right:auto}
@media(min-width:640px){
.rating-overall--centro{grid-template-columns:auto 1fr;justify-content:center}
}
.rating-overall--centro .ro-brand{align-items:center}
.rating-overall--centro .ro-score{align-items:center}
.ro-logo{width:96px;height:auto;flex:none}
.ro-score{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem}
.ro-score b{font-size:2.75rem;font-weight:800;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.ro-out{font-size:.8125rem;color:var(--ink-3);font-weight:600}
.ro-score .rating{margin-top:.35rem}
.ro-count{font-size:.8125rem;color:var(--ink-3);font-weight:600}
.ro-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem;min-width:0}
.ro-bars li{display:flex;align-items:center;gap:.6rem;margin:0;font-size:.8125rem}
.ro-lab{flex:0 0 2.2rem;color:var(--ink-2);font-weight:600;display:flex;gap:.15rem;align-items:center}
.ro-lab span{color:var(--gold)}
.ro-track{flex:1;height:8px;background:var(--surface-2,#e6edf2);border-radius:4px;overflow:hidden;min-width:0}
.ro-track i{display:block;height:100%;background:var(--gold);border-radius:4px}
.ro-n{flex:0 0 1.6rem;text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* ==========================================================================
Hub Marocco Tour: componenti della parte informativa
========================================================================== */
/* Fascia informativa a piena larghezza, non dentro .prose */
/* «1.4rem+2vw» senza spazi non e' un'espressione valida: nelle funzioni di
calcolo del CSS il piu' e il meno vogliono lo spazio da entrambe le parti,
e senza il browser buttava via tutta la dichiarazione. Il risultato erano
sezioni con zero padding verticale, attaccate una all'altra e separate solo
dalla riga di bordo — su /marocco-tour/, sulle pagine categoria, sulle
combinate e sulla mappa del sito. Adesso usa lo stesso valore del resto. */
.info-sec{padding:var(--gap-sez) 0;border-top:1px solid var(--line)}
.info-sec > h2{margin-bottom:.4rem}
.info-sec > .lead{max-width:72ch;margin-bottom:1.75rem}
/* Prezzo per durata */
.price-cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
border-radius:var(--radius-lg);overflow:hidden;
grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.price-card{background:#fff;padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.2rem}
.price-card .pc-d{font-family:var(--font);font-size:.75rem;font-weight:700;color:var(--ink-3);
text-transform:uppercase;letter-spacing:.05em}
.price-card .pc-p{font-size:1.5rem;font-weight:800;color:var(--ink);line-height:1.1}
.price-card .pc-p small{font-size:.6875rem;color:var(--ink-3);font-weight:600;display:block}
.price-card .pc-w{font-size:.8125rem;color:var(--ink-2);margin-top:.35rem}
.price-card--hi{background:var(--brand-tint)}
.price-card--hi .pc-p{color:var(--brand-dark)}
/* Matrice delle distanze */
.matrix{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin:0}
.matrix table{min-width:660px;font-size:.875rem}
.matrix th{background:var(--surface-2);white-space:nowrap}
.matrix th:first-child,.matrix td:first-child{
position:sticky;left:0;background:var(--surface-2);font-weight:700;color:var(--ink);z-index:1}
.matrix td{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.matrix td b{color:var(--ink);display:block;line-height:1.2}
.matrix td span{font-size:.6875rem;color:var(--ink-3)}
.matrix td.self{background:var(--bg-2);color:var(--ink-3)}
/* Clima mese per mese */
.climate{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.climate table{min-width:620px;font-size:.875rem}
.climate td{text-align:center;font-variant-numeric:tabular-nums}
.climate td:first-child{text-align:left;font-weight:700;color:var(--ink)}
.pill{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:.6875rem;font-weight:700;white-space:nowrap}
.pill--top{background:var(--ok-soft,#e5f2ea);color:var(--ok,#17703f)}
.pill--ok{background:var(--accent-soft,#e2f0ef);color:var(--accent,#0d6e6e)}
.pill--no{background:#fdecec;color:#a12020}
/* Colonne di testo affiancate */
.cols2{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:860px){.cols2{grid-template-columns:1fr 1fr;gap:2.5rem}}
.cols2 h3{margin-top:0}
.cols2 p:last-child{margin-bottom:0}
/* Blocchi "cosa si vede" */
.see{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.see article{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.see .see-media{aspect-ratio:16/10;position:relative;overflow:hidden;min-height:0;background:var(--bg-2)}
.see .see-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.see .see-b{padding:.9rem 1.05rem 1.1rem}
.see h3{font-size:1rem;margin:0 0 .35rem}
.see p{font-size:.875rem;margin:0}
.see .see-n{font-size:.75rem;color:var(--ink-3);font-weight:600;margin-top:.5rem;display:block}
/* ---------- Griglia delle categorie ---------- */
.cat-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.cat-tile{
display:flex;align-items:flex-start;gap:.7rem;
border:1px solid var(--line);border-radius:var(--radius);
padding:.85rem .95rem;background:#fff;color:var(--ink);
transition:border-color .15s,box-shadow .15s,background .15s
}
.cat-tile:hover{border-color:var(--brand);box-shadow:var(--shadow-1);text-decoration:none}
.ct-ico{
flex:0 0 auto;width:40px;height:40px;border-radius:10px;
background:var(--brand-tint);color:var(--brand-dark);
display:grid;place-items:center
}
.cat-tile:hover .ct-ico{background:var(--brand);color:#fff}
.ct-t{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ct-name{font-weight:700;font-size:.9375rem;line-height:1.3}
.ct-n{font-size:.75rem;color:var(--ink-3);font-weight:600}
/* titolo della pagina categoria con la sua icona */
.cat-h1{display:flex;align-items:center;gap:.75rem}
.cat-h1-ico{
flex:0 0 auto;width:52px;height:52px;border-radius:14px;
background:var(--brand-tint);color:var(--brand-dark);display:grid;place-items:center
}
@media(max-width:600px){.cat-h1-ico{width:42px;height:42px}}
/* ---- Elenco tour con filtro laterale ---------------------------------- */
.tours-layout{display:grid;grid-template-columns:230px 1fr;gap:1.75rem;align-items:start;margin-top:1.5rem}
.tours-layout>*{min-width:0} /* la griglia non deve allargare la colonna */
.filters{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:.9rem 1rem;background:#fff}
.filters-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.35rem}
.filters-head h2{font-size:1rem;margin:0}
.f-group{border-top:1px solid var(--line);padding:.6rem 0}
.f-group:first-of-type{border-top:0}
.f-group>summary{cursor:pointer;font-weight:600;font-size:.92rem;list-style:none;padding:.15rem 0}
.f-group>summary::-webkit-details-marker{display:none}
.f-group>summary::after{content:"−";float:right;color:var(--muted)}
.f-group:not([open])>summary::after{content:"+"}
.f-opt{display:flex;align-items:center;gap:.5rem;padding:.28rem 0;font-size:.9rem;cursor:pointer}
.f-opt input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--brand);cursor:pointer}
.f-item{display:contents} /* il wrapper non deve rompere la griglia di card */
.f-item[hidden]{display:none}
.tours-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.f-toggle{display:none}
.linklike{background:none;border:0;padding:0;color:var(--brand-text);text-decoration:underline;cursor:pointer;font:inherit}
.f-empty{padding:1.5rem 0}
@media(max-width:900px){
.tours-layout{grid-template-columns:1fr;gap:1rem}
.f-toggle{display:inline-flex}
/* su mobile il pannello è un foglio a scomparsa, non una colonna */
.filters{position:fixed;inset:auto 0 0 0;top:auto;max-height:82vh;overflow:auto;z-index:60;
border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.22);
transform:translateY(101%);transition:transform .22s ease;padding-bottom:1.25rem}
.filters[data-open]{transform:translateY(0)}
.filters-head{position:sticky;top:0;background:#fff;padding:.4rem 0 .5rem;
border-bottom:1px solid var(--line);margin-bottom:.4rem}
}
@media(prefers-reduced-motion:reduce){.filters{transition:none}}
/* Schede destinazione in fondo all'elenco tour. */
.dest-links{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-top:1rem}
.dest-link{display:flex;align-items:flex-start;gap:.6rem;padding:.8rem .9rem;border:1px solid var(--line);
border-radius:var(--radius-lg);text-decoration:none;color:inherit;background:#fff;transition:border-color .15s}
.dest-link:hover{border-color:var(--brand)}
.dest-link .ic{flex:0 0 auto;margin-top:.15rem;color:var(--brand)}
.dest-link span{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.dest-link small{color:var(--muted);font-size:.85rem;line-height:1.35}
/* Mappa del tour: l'immagine statica sta sotto, la mappa viva le va sopra
quando è pronta. Così non c'è salto di layout e senza JavaScript resta
comunque il percorso. */
.map-shell{
position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#eeece7;
/* Leaflet assegna ai suoi riquadri e controlli z-index fra 400 e 1000, molto
piu' alti dell'intestazione appiccicata (100), della sottonavigazione (80)
e dei pulsanti fissi (120-121). Senza un contesto di impilamento proprio
quei valori finiscono nella radice e la mappa passa sopra al menu mentre
si scorre. isolation:isolate li richiude tutti qui dentro. */
isolation:isolate
}
.map-shell>img{display:block;width:100%;height:auto;aspect-ratio:800/560;object-fit:cover}
.map-ph{width:100%;aspect-ratio:800/560;background:#eeece7}
.map-live{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
.map-shell[data-live] .map-live{opacity:1}
.map-shell[data-live]>img{visibility:hidden} /* resta a tenere lo spazio */
/* le tessere non devono ereditare le regole globali sulle immagini:
Leaflet le posiziona lui, a 256px, e qualsiasi width/height le rompe */
.leaflet-container img{max-width:none;height:auto;display:block}
.leaflet-container .leaflet-tile{width:256px;height:256px}
.map-live .leaflet-container{width:100%;height:100%;background:#eeece7;font:inherit}
.leaflet-popup-content{margin:.6rem .8rem;font-size:.9rem;line-height:1.4}
.leaflet-container a{color:var(--brand-text)}
.leaflet-control-attribution svg{width:auto;height:1em;display:inline;vertical-align:-.1em}
@media(prefers-reduced-motion:reduce){.map-live{transition:none}}
/* Indice dell'articolo e immagini nel corpo del testo. */
.toc{border:1px solid var(--line);border-radius:var(--radius-lg);padding:1rem 1.15rem;margin:1.75rem 0;background:#fff}
.toc-h{font-weight:700;margin:0 0 .5rem;font-size:.95rem}
.toc ol{margin:0;padding-left:1.15rem;display:grid;gap:.3rem}
.toc li{font-size:.94rem;line-height:1.45}
.toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.toc a:hover{color:var(--brand-text);border-bottom-color:currentColor}
.prose h2{scroll-margin-top:96px} /* l'ancora non finisce sotto l'intestazione */
.art-img{margin:1.75rem 0}
.art-img img{width:100%;height:auto;border-radius:var(--radius-lg);display:block}
.art-img figcaption{font-size:.85rem;color:var(--muted);margin-top:.5rem;line-height:1.45}
/* Elenco dei servizi: due o tre colonne su schermo largo, una sola sul telefono.
Ogni voce e' un blocco cliccabile intero, non solo il titolo. */
.serv-list{
list-style:none;padding:0;margin:0 0 2rem;
display:grid;gap:.75rem;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr))
}
.serv-list a{
display:block;height:100%;padding:.9rem 1rem;
border:1px solid var(--line);border-radius:var(--radius);
background:#fff;text-decoration:none;color:inherit;
transition:border-color .15s,box-shadow .15s
}
.serv-list a:hover,.serv-list a:focus-visible{
border-color:var(--brand);box-shadow:0 2px 10px rgba(0,0,0,.06)
}
.serv-list strong{display:block;color:var(--brand-dark);margin-bottom:.15rem}
.serv-list span{display:block;font-size:.875rem;color:var(--ink-2);line-height:1.45}
/* Hero delle pagine a larghezza piena: il 16/9 a 1180px diventa alto 664px e
spinge tutto il contenuto sotto la piega. Sul telefono, dove la larghezza e'
poca, si torna a un formato piu' alto o l'immagine diventa una striscia. */
.doc-hero--wide{aspect-ratio:16/9}
@media (min-width:700px){ .doc-hero--wide{aspect-ratio:2.6/1} }
/* Pagine a larghezza piena: il testo puo' usare tutta la colonna, ma una riga
da 140 caratteri non si legge, quindi i blocchi lunghi vanno in due colonne. */
.prose--wide{max-width:none}
.cols-2{columns:1}
@media (min-width:860px){
.cols-2{columns:2;column-gap:3rem}
.cols-2 > p{break-inside:avoid;margin-top:0}
}
/* Schede della flotta: una griglia di riquadri, uno per categoria di veicolo.
I modelli stanno su una riga sola, le specifiche in una lista descrittiva
cosi' restano leggibili anche da uno screen reader. */
.fleet-grid{
display:grid;gap:1.25rem;margin:1.5rem 0 2rem;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr))
}
.fleet{
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:1.25rem 1.35rem
}
.fleet-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;margin-bottom:.5rem}
.fleet-head h3{margin:0;font-size:1.125rem;color:var(--ink)}
.fleet-pax{
margin-left:auto;font-size:.8125rem;font-weight:700;white-space:nowrap;
color:var(--brand-dark);background:var(--brand-tint);
border-radius:999px;padding:.2rem .7rem
}
.fleet-models{
font-size:.9375rem;color:var(--ink-2);margin:0 0 .9rem;
padding-bottom:.9rem;border-bottom:1px solid var(--line)
}
.fleet-spec{margin:0 0 .9rem;font-size:.9375rem}
.fleet-spec dt{font-weight:700;color:var(--ink);font-size:.8125rem;
text-transform:uppercase;letter-spacing:.03em}
.fleet-spec dd{margin:0 0 .6rem;color:var(--ink-2)}
.fleet-notes{margin:0;padding-left:1.1rem;font-size:.9375rem;color:var(--ink-2)}
.fleet-notes li{margin-bottom:.35rem}
/* Schede dei singoli veicoli: griglia compatta, la foto c'e' solo dove ne
abbiamo una vera — meglio una scheda senza immagine che una foto di un
mezzo che non e' quello. */
.veh-grid{
display:grid;gap:1rem;margin:1.25rem 0 2rem;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr))
}
.veh{
display:flex;flex-direction:column;overflow:hidden;
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg)
}
.veh-media{aspect-ratio:16/9;overflow:hidden;background:var(--brand-tint)}
.veh-media img{width:100%;height:100%;object-fit:cover;display:block}
.veh-body{padding:1rem 1.1rem;display:flex;flex-direction:column;flex:1}
.veh-cat{
margin:0;font-size:.6875rem;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--brand-dark)
}
.veh-name{margin:.15rem 0 .75rem;font-size:1.0625rem;color:var(--ink)}
.veh-spec{list-style:none;margin:0 0 .85rem;padding:0;display:grid;gap:.4rem}
.veh-spec li{
display:flex;align-items:flex-start;gap:.5rem;
font-size:.875rem;color:var(--ink-2);line-height:1.35
}
.veh-spec svg{flex:none;margin-top:.15rem;color:var(--brand)}
.veh-spec small{color:var(--ink-3);font-size:.8125rem}
.veh-use{
margin:auto 0 .85rem;padding-top:.75rem;border-top:1px solid var(--line);
font-size:.8125rem;color:var(--ink-3)
}
/* Il pulsante chiude la scheda e resta in fondo anche quando le schede
accanto hanno piu' righe di testo. */
.veh-cta{margin-top:auto}
/* --- filtro dei veicoli --- */
/* Due campi corti sulla stessa riga nel modulo delle recensioni; sotto i
520 px tornano uno sopra l'altro, che a quella larghezza e' l'unico modo
perche' restino leggibili. */
/* --- Rimando a Tripadvisor --------------------------------------------
Sta sotto la media dei voti: e' li' che uno si chiede se quei numeri se li
siano scritti da soli. Il verde e' quello di Tripadvisor, ma il testo e'
scuro: bianco su quel verde chiarissimo sarebbe illeggibile. */
.ta-box{
max-width:44rem;margin:1.5rem auto 0;padding:1.25rem 1.5rem;text-align:center;
background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg)
}
.ta-logo{display:block;margin:0 auto .6rem;height:28px;width:auto}
.ta-wordmark{
display:block;margin-bottom:.5rem;font-size:1.25rem;font-weight:800;
letter-spacing:-.02em;color:#00674b
}
.ta-testo{margin:0 auto 1rem;max-width:52ch;font-size:.9375rem;color:var(--ink-2)}
.btn--ta{background:#34e0a1;color:#00351f;border:1px solid #16b97f;font-weight:700}
.btn--ta:hover{background:#25cf91;color:#00351f;text-decoration:none}
/* Il titolo che scrive chi recensisce: sta fra le stelle e il testo, e le
stelle gli fanno gia' da stacco sopra. */
.review-title{font-size:1rem;margin:.15rem 0 .35rem;color:var(--ink)}
.rev-due{display:grid;gap:0 1rem;grid-template-columns:1fr 1fr}
@media(max-width:520px){.rev-due{grid-template-columns:1fr}}
.veh-filtri{margin:1.25rem 0 .25rem}
.veh-filtri-lab{
display:block;font-size:.8125rem;font-weight:700;color:var(--ink-3);
text-transform:uppercase;letter-spacing:.04em;margin-bottom:.5rem
}
.veh-filtri-btn{display:flex;flex-wrap:wrap;gap:.5rem}
.veh-filtri-btn .chip{cursor:pointer;font:inherit;font-size:.875rem;min-height:36px}
.veh-n{
display:inline-block;margin-left:.35rem;padding:0 .35rem;border-radius:99px;
background:var(--bg-2);color:var(--ink-3);font-size:.75rem;font-weight:700
}
.chip.is-on .veh-n{background:rgba(255,255,255,.22);color:#fff}
.veh-filtri-esito{margin:.6rem 0 0;font-size:.8125rem;color:var(--ink-3)}
/* ============ Elementi fissi: torna su, contatti, banner cookie ============ */
/* Stanno in basso a destra e non devono coprire i pulsanti della barra sticky
sulle pagine tour: da li' il margine inferiore piu' generoso sul telefono. */
.to-top,.chat-btn{
position:fixed;right:16px;z-index:120;border:0;cursor:pointer;
box-shadow:0 4px 16px rgba(0,0,0,.18);transition:transform .15s,opacity .2s
}
.to-top{
bottom:calc(84px + env(safe-area-inset-bottom));
width:44px;height:44px;border-radius:50%;
background:#fff;color:var(--ink);border:1px solid var(--line);
display:grid;place-items:center
}
.to-top svg{transform:rotate(-90deg)}
.to-top:hover{transform:translateY(-2px)}
.chat-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:121}
.chat-btn{
position:static;display:inline-flex;align-items:center;gap:.5rem;
height:52px;padding:0 1.15rem;border-radius:999px;
background:var(--brand);color:#fff;font:inherit;font-weight:700
}
.chat-btn:hover{transform:translateY(-2px)}
.chat-label{font-size:.9375rem}
.chat-panel{
position:absolute;right:0;bottom:64px;width:min(310px,calc(100vw - 32px));
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
box-shadow:0 12px 40px rgba(0,0,0,.18);padding:.6rem;
display:grid;gap:.3rem
}
.chat-title{margin:.35rem .5rem .5rem;font-size:.8125rem;font-weight:700;color:var(--ink-3);
text-transform:uppercase;letter-spacing:.04em}
.chat-opt{
display:flex;align-items:center;gap:.7rem;padding:.6rem .55rem;
border-radius:var(--radius);text-decoration:none;color:inherit
}
.chat-opt:hover,.chat-opt:focus-visible{background:var(--brand-tint)}
.chat-ic{
flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
background:var(--brand-tint);color:var(--brand-dark)
}
.chat-opt--wa .chat-ic{background:#e7f7ec;color:#1d9c4a}
.chat-opt strong{display:block;font-size:.9375rem;line-height:1.2}
.chat-opt small{display:block;font-size:.8125rem;color:var(--ink-3)}
.cookie-bar{
position:fixed;left:0;right:0;bottom:0;z-index:200;
background:#fff;border-top:1px solid var(--line);
box-shadow:0 -6px 30px rgba(0,0,0,.12);
padding:1rem 0 calc(1rem + env(safe-area-inset-bottom))
}
.cookie-inner{
max-width:var(--maxw);margin:0 auto;padding:0 16px;
display:grid;gap:1rem;align-items:center
}
@media(min-width:860px){.cookie-inner{grid-template-columns:1fr auto}}
.cookie-tit{margin:0 0 .25rem;font-weight:700;color:var(--ink)}
.cookie-txt{margin:0;font-size:.875rem;color:var(--ink-2);line-height:1.5;max-width:70ch}
.cookie-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.cookie-actions .btn{white-space:nowrap}
/* mentre il banner e' aperto i pulsanti flottanti salgono, per non sovrapporsi */
/* Con il banner aperto i pulsanti flottanti salgono della sua altezza vera,
non di un numero fisso: il testo del banner va a capo diversamente su ogni
schermo e le misure a mano sbagliavano quasi sempre. */
body.has-cookie .chat-fab{bottom:calc(16px + var(--cookie-h,0px) + env(safe-area-inset-bottom))}
body.has-cookie .to-top{bottom:calc(84px + var(--cookie-h,0px) + env(safe-area-inset-bottom))}
@media(min-width:860px){
body.has-cookie .chat-fab{bottom:calc(16px + var(--cookie-h,0px) + env(safe-area-inset-bottom))}
body.has-cookie .to-top{bottom:calc(84px + var(--cookie-h,0px) + env(safe-area-inset-bottom))}
}
@media(max-width:560px){ .chat-label{display:none} .chat-btn{padding:0;width:52px;justify-content:center} }
/* ============ Modulo breve in home ============ */
/* Tre campi soli: nome, email e due righe di testo. Chi vuole dettagliare va
al modulo completo di /contatti, linkato qui sotto. */
.quick-form{max-width:640px;margin:1.5rem auto 0;text-align:left}
.quick-grid{display:grid;gap:0 1rem;grid-template-columns:1fr}
@media(min-width:640px){.quick-grid{grid-template-columns:1fr 1fr}}
.quick-foot{display:grid;gap:.75rem;justify-items:center;text-align:center;margin-top:.5rem}
.quick-foot .hint{margin:0;max-width:46ch}
/* ============ Video con caricamento al clic ============ */
.video-yt{margin:1.5rem 0}
.video-play{
position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
background:none;border-radius:var(--radius-lg);overflow:hidden;line-height:0
}
.video-play img{width:100%;height:auto;display:block;transition:transform .3s}
.video-play:hover img{transform:scale(1.02)}
.video-play::after{
content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);transition:background .2s
}
.video-play:hover::after{background:rgba(0,0,0,.06)}
.video-ic{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
background:var(--brand);color:#fff;z-index:1;
box-shadow:0 6px 24px rgba(0,0,0,.3);transition:transform .2s
}
.video-play:hover .video-ic{transform:translate(-50%,-50%) scale(1.08)}
.video-yt iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius-lg);display:block}
.video-yt figcaption{
margin-top:.6rem;font-size:.875rem;color:var(--ink-3);line-height:1.5
}
/* ============ Scheda "Il Marocco in pratica" ============ */
/* Formato a schede invece che a paragrafi: sono informazioni che si consultano,
non si leggono, e su una pagina lunga danno respiro fra due blocchi di prosa. */
.fatti{
display:grid;gap:1rem;margin:1.5rem 0 2rem;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr))
}
.fatto{
background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
padding:1rem 1.15rem
}
.fatto dt{
font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
color:var(--brand-dark);margin-bottom:.35rem
}
.fatto dd{margin:0;font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
.section--tint .fatto{background:#fff}
/* icona nell'intestazione di ogni scheda pratica */
.fatto dt{display:flex;align-items:center;gap:.45rem}
.fatto dt svg{flex:none;color:var(--brand);width:18px;height:18px}
/* ==========================================================================
Prenotazione online sulla scheda tour
========================================================================== */
/* L'ultima sezione della scheda tour sta dentro un contenitore che ha gia'
la sua spaziatura di sezione: i due padding-bottom si sommavano e fra i tag
delle categorie e il footer restavano oltre 170 px di vuoto. */
.container.section > section.section:last-child{padding-bottom:0}
/* Sezioni annidate in fila (destinazioni, articoli, coda della scheda tour).
La prima apre un blocco nuovo dopo il testo della pagina e si stacca come
ogni altra sezione; dalla seconda in poi lo spazio ce l'ha gia' messo il
padding inferiore di quella sopra, e sommarli farebbe due vuoti di seguito.
Prima questa distinzione non c'era: tutte avevano padding-top:0 scritto nel
markup, e su /destinazioni/fes «Tour che partono da Fes» finiva a 16 px dal
paragrafo precedente invece che a 56. */
.container.section > section.section + section.section{padding-top:0}
.btn--book{background:var(--brand);color:#fff!important;display:inline-flex;
align-items:center;justify-content:center;gap:.5rem}
.btn--book:hover{filter:brightness(.94)}
.book{margin-top:1rem;border-top:1px solid var(--line);padding-top:1rem;
display:flex;flex-direction:column;gap:1rem}
.book-row{display:flex;flex-direction:column;gap:.4rem;border:0;padding:0;margin:0;min-width:0}
.book-row>label,.book-row>legend{font-weight:700;font-size:.875rem;padding:0}
.book-row input[type=date],.book-row input[type=text],.book-row input[type=email],
.book-row input[type=tel],.book-row textarea{
width:100%;padding:.6rem .7rem;border:1px solid var(--line-2,#c6ced5);
border-radius:8px;font:inherit;background:#fff;color:var(--ink)}
.book-row textarea{resize:vertical}
.book .hint{font-size:.8125rem;color:var(--ink-3,#6d7b87);margin:0}
/* contatore partecipanti: i due pulsanti devono restare tappabili sul telefono */
.stepper{display:flex;align-items:stretch;gap:0;width:max-content;
border:1px solid var(--line-2,#c6ced5);border-radius:8px;overflow:hidden;background:#fff}
.stepper button{width:44px;border:0;background:var(--bg-2,#f2f5f7);font-size:1.15rem;
line-height:1;cursor:pointer;color:var(--ink)}
.stepper button:hover{background:var(--line)}
.stepper input{width:64px;border:0;text-align:center;font:inherit;font-weight:700;
padding:.6rem 0;background:#fff;color:var(--ink);
font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* una scelta per riga: l'etichetta intera è cliccabile, non solo il pallino */
.opt{display:flex;gap:.6rem;align-items:flex-start;padding:.6rem .7rem;
border:1px solid var(--line);border-radius:8px;cursor:pointer;background:#fff;font-weight:400}
.opt:hover{border-color:var(--line-2,#c6ced5)}
.opt input{margin:.2rem 0 0;flex:none}
.opt span{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.opt strong{font-size:.9rem}
.opt small{font-size:.8125rem;color:var(--ink-3,#6d7b87);line-height:1.35}
.opt:has(input:checked){border-color:var(--brand);background:var(--bg-2,#f7f5f2)}
.book-total{border:1px solid var(--line);border-radius:8px;padding:.8rem .9rem;
background:var(--bg-2,#f7f8f9);display:flex;flex-direction:column;gap:.35rem}
.bt-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.9rem}
.bt-row b{font-variant-numeric:tabular-nums;white-space:nowrap}
.bt-now b{font-size:1.25rem;font-weight:800;color:var(--brand)}
.book-err{margin:0;padding:.6rem .75rem;border-radius:8px;font-size:.875rem;
background:#fbeeee;color:#9c2a2a;border:1px solid #f0d2d2}
.book-pay{min-height:3rem}
.book-done{margin-top:1rem;border:1px solid #cfe6da;background:#eef7f2;
border-radius:8px;padding:.9rem 1rem;font-size:.9rem}
.book-done .bd-tit{display:flex;align-items:center;gap:.45rem;font-weight:800;
color:#1d6a4c;margin:0 0 .35rem}
.book-done p{margin:0}
/* Prezzo in promozione: il pieno barrato accanto allo scontato. Il barrato
resta piccolo e grigio — deve essere leggibile, non gridare. */
.price-row{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.price-row .was,.price .was,.cta-was{
text-decoration:line-through;color:var(--ink-3,#6d7b87);font-weight:600;font-size:.9rem}
.price-row .off{
background:var(--brand);color:#fff;font-size:.75rem;font-weight:800;
padding:.15rem .4rem;border-radius:4px;letter-spacing:.02em}
.price .was{font-size:.8rem;margin-right:.15rem}
.cta-was{font-size:.75rem;margin-left:.3rem}
.alert--warn{background:#fdf6e3;color:#8a6100;border:1px solid #f0dfae}
/* Prenota / Preventivo affiancati sopra il riquadro di prenotazione. */
.cta-pair{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.cta-pair .btn{width:100%;justify-content:center;padding:.55rem .5rem;
display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;
min-height:42px;white-space:nowrap}
.cta-pair .btn svg{flex:none}
/* Data e partecipanti affiancati: due campi corti in colonna sprecavano
mezzo riquadro e allontanavano il totale dal pulsante di pagamento. */
.book-duo{display:grid;grid-template-columns:1fr auto;gap:.75rem;align-items:start}
.book-duo .book-row{margin:0;min-width:0}
@media(max-width:380px){.book-duo{grid-template-columns:1fr}}
/* Sezioni a comparsa del modulo: alloggio, extra, quando pagare.
Chiuse mostrano la scelta corrente sulla destra, cosi' si legge tutta la
configurazione senza aprirne nessuna. */
.book-fold{border:1px solid var(--line);border-radius:8px;background:#fff}
.book-fold>summary{
cursor:pointer;list-style:none;padding:.65rem .75rem;display:flex;align-items:center;
gap:.6rem;font-size:.875rem}
.book-fold>summary::-webkit-details-marker{display:none}
.book-fold>summary::after{
content:"";margin-left:auto;width:.5rem;height:.5rem;flex:none;
border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
transform:rotate(45deg);transition:transform .15s ease}
.book-fold[open]>summary::after{transform:rotate(-135deg)}
.book-fold>summary:hover{background:var(--bg-2)}
.bf-lab{font-weight:700;color:var(--ink);flex:none}
.bf-val{color:var(--ink-3);text-align:right;flex:1;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-body{padding:0 .75rem .75rem;display:flex;flex-direction:column;gap:.4rem}
@media(prefers-reduced-motion:reduce){.book-fold>summary::after{transition:none}}
/* Riga del supplemento nel riepilogo. */
.bt-fee b{color:var(--ink-2)}
.bt-fee[hidden]{display:none}
/* Alloggio ed extra affiancati: sono due scelte brevi e indipendenti, in
colonna allontanavano il totale dal pulsante di pagamento. Con auto-fit un
figlio solo (tour senza attività extra) occupa comunque tutta la riga. */
.book-pair{display:grid;gap:.45rem;grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr));
align-items:start}
.book-pair>.book-fold{min-width:0}
.book-pair>.book-fold>summary{flex-wrap:wrap;gap:.15rem .5rem;padding:.55rem .6rem}
.book-pair .bf-lab{font-size:.8125rem}
.book-pair .bf-val{font-size:.8125rem;flex-basis:100%;text-align:left}
.book-pair>.book-fold>summary::after{position:absolute;right:.6rem;top:.9rem}
.book-pair>.book-fold>summary{position:relative;padding-right:1.6rem}
/* ==========================================================================
Finestra di prenotazione
Il checkout ha bisogno di spazio: data, opzioni, riepilogo e pulsanti di
pagamento in una colonna da 300px si leggevano male proprio nel momento in
cui si decide se pagare.
========================================================================== */
.book-modal{
border:0;padding:0;border-radius:14px;background:#fff;color:var(--ink);
width:min(920px,94vw);max-width:none;max-height:90vh;overflow:hidden;
box-shadow:0 24px 60px rgba(12,18,24,.28)}
.book-modal::backdrop{background:rgba(12,18,24,.55)}
.book-modal[open]{display:flex;flex-direction:column}
.bm-head{display:flex;align-items:flex-start;gap:1rem;padding:1.1rem 1.3rem;
border-bottom:1px solid var(--line);background:var(--bg-2)}
.bm-eyebrow{margin:0 0 .15rem;font-size:.7rem;font-weight:800;letter-spacing:.08em;
text-transform:uppercase;color:var(--brand)}
.bm-head h2{margin:0;font-size:1.0625rem;line-height:1.3}
.bm-close{margin-left:auto;flex:none;width:36px;height:36px;border-radius:50%;
border:1px solid var(--line);background:#fff;font-size:1.4rem;line-height:1;
cursor:pointer;color:var(--ink-2)}
.bm-close:hover{background:var(--line);color:var(--ink)}
.bm-cols{display:grid;gap:0;overflow:auto;min-height:0;
/* flex:1 e' indispensabile: senza, in una finestra piu' corta del contenuto
e' il dialog a traboccare, e con overflow:hidden il fondo del modulo — i
pulsanti di pagamento — resta irraggiungibile. Cosi' invece scorre questa
parte e l'intestazione resta ferma in alto. */
flex:1 1 auto;-webkit-overflow-scrolling:touch}
@media(min-width:820px){.bm-cols{grid-template-columns:1fr 22.5rem}}
.bm-scelte{padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:1rem;min-width:0}
.bm-pagare{padding:1.2rem 1.3rem;background:var(--bg-2);border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:1rem;min-width:0}
@media(min-width:820px){
.bm-pagare{border-top:0;border-left:1px solid var(--line)}
}
/* Il