/* =====================================================================
   SKORPION RESORT — CSS frontend (template "journey")
   Costruito sui token di design Skorpion Travel. Nessun valore magico:
   solo var(--sk-*). Le custom property sotto sono FALLBACK: se il sito ha
   già caricato design-system/tokens.css, quelle vincono per cascade.
   Prefisso .sk- per non collidere con Salient.

   Struttura del file (concatenazione 1:1 dei CSS di sezione):
   1. Fallback token + utility tipografiche
   2. _sections-base.css   (shell, eyebrow, titoli, bottoni, reveal, lightbox)
   3. journey-hero / overview / highlights / itinerary / showcase /
      gallery / offers / carriers / related / modal
   4. Archivio (riusa le card .sk-related)
   5. archive-destinazioni.css (indice /destinazioni/: testata a parole)
   6. hub-destinazione.css (hub destinazione: intro editoriale, griglia,
      estensioni rail offerte)
   7. analista-nozze.css (widget multi-step: card destinazione, pill,
      slider budget, proposta, form Forminator inline)
   ===================================================================== */

:root {
	--sk-ocean-navy: #00265A;
	--sk-active-blue: #0068B1;
	--sk-sea-foam: #C7E4E1;
	--sk-pearl: #F7F4EF;
	--sk-shell: #EDE6DD;
	--sk-deep-teal: #005F6A;
	--sk-slate-ink: #1B2B32;
	--sk-copper-sand: #C96F4A;

	/* Forma: spigolo vivo, max 5px (allineato a design-system/tokens.css). */
	--sk-radius-sm: 5px;
	--sk-radius: 0;
	--sk-radius-lg: 0;
	--sk-radius-pill: 0;

	/* Bottoni & CTA */
	--sk-font-cta: "sweet-sans-pro", sans-serif;
	--sk-weight-cta: 700;
}

/* --- Utility tipografiche (allineate a tokens.css) ------------------- */
.sk-display {
	font-family: var(--sk-font-display, "Season-Mix-Trial", Georgia, serif) !important;
	font-weight: var(--sk-weight-display, 300) !important;
}
.sk-label {
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	font-weight: 500 !important;
	text-transform: uppercase;
	color: var(--sk-text-muted, #5a6b72);
	margin: 0;
}

/* =====================================================================
   SKORPION — Sections BASE (sistema condiviso)
   Caricato per primo (prefisso "_" → glob lo mette in testa).
   Qui vive tutto ciò che è TRASVERSALE alle section:
   container, tipografia di sezione, eyebrow, bottoni, hairline, reveal.
   I CSS delle singole section NON ridefiniscono queste cose: le COMPONGONO
   via classe e aggiungono solo il loro layout specifico.
   Solo token var(--sk-*).
   ===================================================================== */

/* --- Container di sezione: stessa larghezza del container di Salient -- */
/* Tutte le sezioni-contenuto condividono questo rail, ancorato alla variabile
   nativa di Salient --container-width (fallback 1425px = default del tema, qui
   il sito la imposta a 2400px). Se nelle Opzioni tema cambia la larghezza del
   container, le sezioni la seguono: niente più valori arbitrari (2000/1200px).
   Override per-sezione ancora possibile via --sk-shell-max. */
.sk-shell {
	width: min(100% - 2 * clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem)), var(--sk-shell-max, var(--container-width, 1425px)));
	margin-inline: auto;
}
.sk-shell--narrow { --sk-shell-max: 1200px; }

/* Full-bleed: esce dal container del page builder e va edge-to-edge. */
.sk-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* --- Eyebrow di sezione --------------------------------------------- */
/* Base: muted, dimensione eyebrow, NON uppercase (per .sk-label usa quella). */
.sk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-3, .75rem);
	margin: 0;
	color: var(--sk-text-muted, #5a6b72);
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	font-weight: 700;
	line-height: 1;
    text-transform: uppercase;
}
.sk-eyebrow--dot::before {           /* puntino accento davanti (es. "· Sistemazioni") */
	content: "";
	flex: none;
	width: .4rem;
	height: .4rem;
	border-radius: 50%;
	background: var(--sk-accent, #C96F4A);
}
.sk-eyebrow--invert { color: rgba(247, 244, 239, .8); }   /* su immagine/scuro */

/* --- Titoli di sezione ---------------------------------------------- */
/* Titolo di sezione (h2): segue la scala nativa di Salient (34px/44px, 600).
   Non ridefiniamo size/weight/line-height: lasciamo governare Salient, così le
   sezioni sono coerenti col resto del sito. Teniamo solo famiglia (Geist, come
   il resto), colore brand e bilanciamento riga. */
.sk-section-title {
	margin: 0;
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	text-wrap: balance;
}
/* Titolo display/serif (hero, sezioni immersive). */
.sk-section-title--display {
	font-family: var(--sk-font-display, "Season-Mix-Trial", serif) !important;
	font-weight: var(--sk-weight-display, 300) !important;
	line-height: var(--sk-lh-tight, 1.08);
}

/* --- Corpo testo ----------------------------------------------------- */
.sk-prose {
	margin: 0;
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-body, 1.0625rem);
	line-height: var(--sk-lh-body, 1.6);
	max-width: 65ch;
}
.sk-prose--muted  { color: var(--sk-text-muted, #5a6b72); }
.sk-prose--invert { color: rgba(247, 244, 239, .92); }
.sk-prose + .sk-prose { margin-top: var(--sk-space-4, 1rem); }

/* --- Hairline divisoria --------------------------------------------- */
.sk-hairline {
	border: 0;
	border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	margin: 0;
}
.sk-hairline--invert { border-top-color: rgba(247, 244, 239, .22); }

/* --- Bottone primario (CTA piena, navy) ----------------------------- */
.sk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sk-space-2, .5rem);
	padding: var(--sk-space-4, 1rem) var(--sk-space-6, 2rem);
	background: var(--sk-ocean-navy, #00265A);
	color: var(--sk-text-invert, #F7F4EF) !important;
	font-family: var(--sk-font-cta, "sweet-sans-pro", sans-serif) !important;
	font-weight: var(--sk-weight-cta, 700) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	text-decoration: none;
	border: 1px solid var(--sk-ocean-navy, #00265A);
	border-radius: var(--sk-radius-sm, 5px);
	cursor: pointer;
	transition:
		background var(--sk-dur, .35s) var(--sk-ease),
		transform  var(--sk-dur, .35s) var(--sk-ease);
}
.sk-btn:hover,
.sk-btn:focus-visible {
	background: var(--sk-cta, #0068B1);
	border-color: var(--sk-cta, #0068B1);
	transform: translateY(-1px);
}
.sk-btn:focus-visible { outline: 2px solid var(--sk-ocean-navy, #00265A); outline-offset: 3px; }

/* --- Bottone chiaro (CTA su immagine / overlay) --------------------- */
.sk-btn-light {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25em 4em;
	background: #fff;
	color: #09264B !important;
	font-size: 16px;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition:
		background-color var(--sk-dur, .35s) var(--sk-ease),
		color            var(--sk-dur, .35s) var(--sk-ease),
		border-color     var(--sk-dur, .35s) var(--sk-ease);
}
.sk-btn-light:hover,
.sk-btn-light:focus-visible {
	background-color: rgba(255, 255, 255, .69) !important;
	color: #fff !important;
	border-color: #fff !important;
}
.sk-btn-light:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* --- Reveal on-scroll condiviso ------------------------------------- */
/* Enhance di un default GIÀ visibile: i figli .sk-reveal partono nascosti solo
   se il contenitore [data-sk-reveal] esiste; il JS aggiunge .is-in.
   Stagger con --i (indice) sul figlio. */
[data-sk-reveal] .sk-reveal {
	opacity: 0;
	transform: translateY(18px);
	pointer-events: none;
	transition:
		opacity   .7s var(--sk-ease, cubic-bezier(.22, 1, .36, 1)),
		transform .7s var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
	transition-delay: calc(var(--i, 0) * .08s);
}
[data-sk-reveal].is-in .sk-reveal {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	[data-sk-reveal] .sk-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =====================================================================
   LIGHTBOX CONDIVISO (<dialog>.sk-gallery) — top-layer, niente clipping.
   Usato da: journey-showcase, journey-gallery. Markup nei rispettivi PHP.
   ===================================================================== */
.sk-gallery {
	width: min(100vw, 1400px);
	max-width: 100vw;
	height: min(100vh, 100dvh);
	max-height: 100dvh;
	margin: 0 auto;
	padding: 0;
	border: 0;
	background: var(--sk-slate-ink, #1B2B32);
	color: var(--sk-text-invert, #F7F4EF);
	overflow: hidden;
}
.sk-gallery::backdrop { background: rgba(0, 17, 40, .92); }
.sk-gallery[open] { display: grid; grid-template-rows: auto 1fr; }

.sk-gallery__bar {
	display: flex;
	align-items: center;
	gap: var(--sk-space-4, 1rem);
	padding: var(--sk-space-4, 1rem) clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem));
	border-bottom: 1px solid rgba(247, 244, 239, .14);
}
.sk-gallery__title {
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-lead, 1.25rem);
	font-weight: 400;
}
.sk-gallery__count {
	margin-left: auto;
	color: rgba(247, 244, 239, .7);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	font-variant-numeric: tabular-nums;
}
.sk-gallery__close {
	display: inline-flex;
	padding: var(--sk-space-2, .5rem);
	background: none;
	border: 0;
	color: var(--sk-text-invert, #F7F4EF);
	cursor: pointer;
	border-radius: var(--sk-radius-sm, 5px);
	transition: background var(--sk-dur, .35s) var(--sk-ease);
}
.sk-gallery__close:hover,
.sk-gallery__close:focus-visible { background: rgba(247, 244, 239, .12); }
.sk-gallery__close:focus-visible { outline: 2px solid var(--sk-surface, #fff); outline-offset: 2px; }

/* Track scorrevole con snap orizzontale: una slide per volta. */
.sk-gallery__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	grid-template-rows: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	min-height: 0;
}
.sk-gallery__track::-webkit-scrollbar { display: none; }
.sk-gallery__slide {
	scroll-snap-align: start;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: clamp(var(--sk-space-4, 1rem), 3vw, var(--sk-space-7, 3rem));
	min-height: 0;
	overflow: hidden;
}
.sk-gallery__slide img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: calc(100dvh - 5rem);
	object-fit: contain;
	margin: auto;
}

/* Frecce nav: ancorate ai lati, centrate sull'area immagine. */
.sk-gallery__nav {
	position: absolute;
	top: calc(50% + 1.5rem);
	transform: translateY(-50%);
	display: inline-flex;
	padding: var(--sk-space-3, .75rem);
	background: rgba(0, 17, 40, .55);
	border: 1px solid rgba(247, 244, 239, .2);
	color: var(--sk-text-invert, #F7F4EF);
	cursor: pointer;
	border-radius: var(--sk-radius-sm, 5px);
	transition: background var(--sk-dur, .35s) var(--sk-ease);
}
.sk-gallery__nav:hover,
.sk-gallery__nav:focus-visible { background: rgba(0, 17, 40, .85); }
.sk-gallery__nav:focus-visible { outline: 2px solid var(--sk-surface, #fff); outline-offset: 2px; }
.sk-gallery__nav--prev { left: clamp(var(--sk-space-4, 1rem), 3vw, var(--sk-space-7, 3rem)); }
.sk-gallery__nav--next { right: clamp(var(--sk-space-4, 1rem), 3vw, var(--sk-space-7, 3rem)); }

@media (prefers-reduced-motion: reduce) {
	.sk-gallery__track { scroll-behavior: auto; }
}

/* ===== journey-hero.css ===== */
/* =====================================================================
   SKORPION — Journey Hero (stile Abercrombie & Kent)
   Hero full-bleed: immagine a tutto schermo, barra in basso (badge + titolo
   serif + luogo a sx, prezzo opzionale a dx) e subnav chiara sotto.
   Solo token var(--sk-*) (con fallback se tokens.css non è caricato).
   Prefisso .sk-jhero per non collidere con la hero del plugin (.sk-hero).
   ===================================================================== */

.sk-jhero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	min-height: 100dvh;   /* hero a piena altezza sotto l'header trasparente */
	overflow: hidden;
	isolation: isolate;
	color: var(--sk-text-invert, #F7F4EF);

	/* Full-bleed: esce dal contenitore del page builder. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Layer immagine separato (come highlights): il parallax trasla QUESTO layer
   con translate3d, non più background-position → effetto leggero e smooth.
   L'immagine arriva via --sk-jhero-img (custom property dal PHP, ereditata). */
.sk-jhero__bg {
	position: absolute;
	inset: -8% 0;                 /* margine extra: il parallax non scopre i bordi */
	z-index: 0;
	background-image: var(--sk-jhero-img, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	will-change: transform, filter;
}

.sk-jhero--tall { min-height: clamp(58vh, 70vh, 760px); }

/* Fallback elegante senza foto: gradiente marino profondo. */
.sk-jhero--no-img {
	background-image: linear-gradient(135deg, var(--sk-deep-teal, #005F6A) 0%, var(--sk-ocean-navy, #00265A) 100%);
}

/* Video hero: copre l'immagine (fallback). Tra il layer immagine (z-index 0)
   e l'overlay (z-index 1). Se il video non parte, sotto resta l'immagine:
   per il file caricato è anche il poster del <video>. */
.sk-jhero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100% !important;   /* Salient forza height:auto sugli img/video → !important */
	height: 100% !important;
	object-fit: cover;
	pointer-events: none;
}
/* Embed YouTube/Vimeo: iframe 16:9 che COPRE il box mantenendo le proporzioni
   (le due max() tengono il rapporto 16:9 e coprono sia landscape sia portrait).
   Lo scale ritaglia ~6% ai bordi per nascondere logo/titolo YouTube. */
.sk-jhero__video--embed { overflow: hidden; }
.sk-jhero__video--embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100vw, calc(100vh * 16 / 9));
	height: max(100vh, calc(100vw * 9 / 16));
	border: 0;
	transform: translate(-50%, -50%) scale(1.06);
}
/* Reduced-motion: niente video di sfondo, resta l'immagine. */
@media (prefers-reduced-motion: reduce) {
	.sk-jhero__video { display: none; }
}

/* Overlay: doppia sfumatura. In basso lo scrim per il titolo (come highlights),
   in alto uno scrim più leggero per rendere leggibili gli elementi dell'header
   trasparente (menu/breadcrumb bianchi) anche su acqua chiara. */
.sk-jhero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 24%),
		linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, 0) 92%);
	pointer-events: none;
}

/* Breadcrumb: top-right, bianco su vignette top. Nessun bg sul componente.
   L'header trasparente di Salient sovrappone la hero: stacchiamo dall'altezza
   reale del menu (--header-nav-height, var globale su :root del tema) + respiro. */
.sk-jhero__bc {
	position: absolute;
	top: calc(var(--header-nav-height, 78px) + clamp(var(--sk-space-3, .75rem), 2vw, var(--sk-space-5, 1.5rem)));
	right: clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem));
	z-index: 2;
}
.sk-jhero__bc-list {
	display: flex;
	align-items: center;
	gap: var(--sk-space-2, .5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.sk-jhero__bc-item {
	display: flex;
	align-items: center;
	gap: var(--sk-space-2, .5rem);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1;
}
/* Separatore ">" generato via CSS, no markup extra. */
.sk-jhero__bc-item + .sk-jhero__bc-item::before {
	content: "›";
	color: rgba(247, 244, 239, .45);
	font-size: .75rem;
	line-height: 1;
	flex: 0 0 auto;
}
.sk-jhero__bc-link {
	color: rgba(247, 244, 239, .75);
	text-decoration: none;
	transition: color var(--sk-dur, .35s) var(--sk-ease, ease);
	display: flex;
	align-items: center;
}
.sk-jhero__bc-link:hover { color: #fff; }
.sk-jhero__bc-link:focus-visible {
	outline: 2px solid var(--sk-copper-sand, #C96F4A);
	outline-offset: 3px;
	border-radius: 2px;
}
/* Ultimo item: copper-sand, nessun hover. */
.sk-jhero__bc-current {
	color:#ffffff;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.4);
	text-underline-offset: .2em;
}

.sk-jhero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-inline: clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem));
	padding-block: clamp(var(--sk-space-6, 2rem), 5vw, var(--sk-space-8, 4rem));
}

/* Riga superiore: titolo a sinistra, descrizione + prezzo a destra (colonna stretta). */
.sk-jhero__row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sk-space-5, 1.5rem);
}

/* Separatore full-bleed sotto titolo/descrizione (stesso trucco di .sk-jhero). */
.sk-jhero__sep {
	width: 100vw;
	max-width: 100vw;
	margin: clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-7, 3rem)) calc(50% - 50vw) 0;
	border: 0;
	border-top: 1px solid rgba(247, 244, 239, .25);
}

/* Riga sotto il separatore: luogo a sx, link "scroll to explore" a dx. */
.sk-jhero__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sk-space-4, 1rem);
	margin-top: clamp(var(--sk-space-4, 1rem), 3vw, var(--sk-space-6, 2rem));
}

/* Gruppo a sinistra sotto il separatore: luogo + prezzo affiancati. */
.sk-jhero__foot-left {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: clamp(var(--sk-space-3, .75rem), 2vw, var(--sk-space-5, 1.5rem));
}
/* Divisore verticale tra luogo e prezzo (solo quando il luogo c'è). */
.sk-jhero__place + .sk-jhero__price {
	padding-left: clamp(var(--sk-space-3, .75rem), 2vw, var(--sk-space-5, 1.5rem));
	border-left: 1px solid rgba(247, 244, 239, .25);
}

.sk-jhero__scroll {
	display: inline-flex;
	align-items: center;
	color: #fff;
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-weight: 700;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none;
	transition: color var(--sk-dur, .35s) var(--sk-ease, ease);
}
.sk-jhero__scroll:hover { text-decoration: underline; text-underline-offset: .2em; }
.sk-jhero__scroll:focus-visible {
	outline: 3px solid var(--sk-copper-sand, #C96F4A);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Badge minimal (stile Here&Away): puntino accento + testo uppercase, no pill. */
.sk-jhero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-2, .5rem);
	margin: 0 0 var(--sk-space-4, 1rem);
	color: #fff;
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-weight: 700;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	text-transform: uppercase;
	line-height: 1;
}
.sk-jhero__badge::before {
	content: "";
	flex: 0 0 auto;
	width: .6em;
	height: .6em;
	border-radius: 50%;
	background: #fff;
}

/* Top row: badge + bottone "Scarica PDF" affiancati sopra al titolo. */
.sk-jhero__toprow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sk-space-3, .75rem);
	margin: 0 0 var(--sk-space-4, 1rem);
}
.sk-jhero__toprow .sk-jhero__badge { margin: 0; }

/* Bottone download: ghost chiaro, posizionato in alto a sinistra dell'hero. */
.sk-jhero__pdf {
	position: absolute;
	top: calc(var(--header-nav-height, 78px) + clamp(var(--sk-space-3, .75rem), 2vw, var(--sk-space-5, 1.5rem)));
	left: clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem));
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-2, .5rem);
	padding: .5rem .85rem;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 0;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	text-decoration: none;
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-weight: 700;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	text-transform: uppercase;
	line-height: 1;
	animation: sk-word-in .6s var(--sk-ease, cubic-bezier(.22, 1, .36, 1)) .1s both;
	transition: background var(--sk-dur, .35s) var(--sk-ease, ease), border-color var(--sk-dur, .35s) var(--sk-ease, ease);
}
.sk-jhero__pdf-icon { flex: 0 0 auto; display: block; }
.sk-jhero__pdf span { font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important; font-weight: 700 !important; }
.sk-jhero__pdf:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.sk-jhero__pdf:focus-visible { outline: 3px solid var(--sk-copper-sand, #C96F4A); outline-offset: 3px; }
/* Variante inline: nel foot accanto al prezzo, non più assoluta in alto a sx. */
.sk-jhero__pdf--inline {
	position: static;
	top: auto;
	left: auto;
	animation-delay: var(--sk-jhero-place-delay, .3s);
}

/* Titolo: serif Season-Mix-Trial weight 300, grande. Vince sul globale con !important. */
.sk-jhero__title {
	margin: 0;
	color: #fff;
	font-family: var(--sk-font-display, "Season-Mix-Trial", Georgia, serif) !important;
	font-weight: var(--sk-weight-display, 300) !important;
	font-size: var(--sk-fs-h1, clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem));
	line-height: var(--sk-lh-tight, 1.08);
	max-width: 30ch;
}

/* Stagger per parola: ogni .sk-jhero__word entra con fade+slide-up in sequenza. */
.sk-jhero__word {
	display: inline-block;
	opacity: 0;
	transform: translateY(22px);
	animation: sk-word-in .7s var(--sk-ease, cubic-bezier(.22, 1, .36, 1)) var(--delay, 0ms) forwards;
}
@keyframes sk-word-in {
	to { opacity: 1; transform: translateY(0); }
}

/* Badge + luogo entrano dopo l'ultima parola. */
.sk-jhero__badge {
	animation: sk-word-in .6s var(--sk-ease, cubic-bezier(.22, 1, .36, 1)) .05s both;
}
/* Stile badge riusato (font/peso/dimensione/maiuscolo): il badge non c'è più,
   il luogo sopra il titolo ne prende il posto — icona pin al posto del pallino. */
.sk-jhero__place {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-2, .5rem);
	margin: 0;
	/* È un <p>: Salient forza p{padding-bottom:1.5em}, va azzerato per allineare al price. */
	padding-block: 0 !important;
	color: #fff;
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-weight: 700;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	text-transform: uppercase;
	line-height: 1;
	animation: sk-word-in .6s var(--sk-ease, cubic-bezier(.22, 1, .36, 1)) var(--sk-jhero-place-delay, .3s) both;
}
/* !important diretto sullo span: stesso motivo del CTA fixed più sopra —
   Salient forza Geist su "span" a livello globale, l'ereditarietà dal
   genitore non basta. */
.sk-jhero__place span {
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

/* Descrizione breve sotto il titolo (opt-in via descrizione="..."). */
.sk-jhero__desc {
	margin: var(--sk-space-3, .75rem) 0 0;
	/* .sk-jhero__desc È un <p>: Salient applica p{padding-bottom:1.5em} globale,
	   qui va azzerato (margin gestisce già lo spazio). */
	padding-bottom: 0 !important;
	color: #fff;
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: calc(var(--sk-fs-body, 1.125rem) * .92);
	line-height: var(--sk-lh-snug, 1.35);
	max-width: 60ch;
	animation: sk-word-in .6s var(--sk-ease, cubic-bezier(.22, 1, .36, 1)) var(--sk-jhero-place-delay, .3s) both;
}

/* Quando il luogo è un link (luogo_url valorizzato). */
a.sk-jhero__place {
	text-decoration: none;
	transition: color var(--sk-dur, .35s) var(--sk-ease, ease), opacity var(--sk-dur, .35s) var(--sk-ease, ease);
}
a.sk-jhero__place:hover { color: #fff; }
a.sk-jhero__place:hover span { text-decoration: underline; text-underline-offset: .2em; }
a.sk-jhero__place:focus-visible { outline: 3px solid var(--sk-copper-sand, #C96F4A); outline-offset: 3px; }

.sk-jhero__icon { flex: 0 0 auto; display: block; }

/* Descrizione + prezzo: colonna stretta a destra del titolo (come da riferimento). */
.sk-jhero__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	flex: 0 1 26rem;
	max-width: 26rem;
}

/* "Guarda il video": stessa logica ghost di .sk-jhero__pdf (bordo chiaro,
   fondo quasi trasparente), più un blur leggero per staccare dal video di
   sfondo, e angoli squadrati come da direzione visiva del sito. Sopra la
   descrizione, non assoluto: segue il flusso della colonna sia da desktop
   che, impilato sotto il titolo, da mobile. */
.sk-jhero__play {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-2, .5rem);
	padding: .5rem .9rem;
	margin-bottom: var(--sk-space-3, .75rem);
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 0;
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-weight: 700;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	text-transform: uppercase;
	line-height: 1;
	animation: sk-word-in .6s var(--sk-ease, cubic-bezier(.22, 1, .36, 1)) .1s both;
	transition: background var(--sk-dur, .35s) var(--sk-ease, ease), border-color var(--sk-dur, .35s) var(--sk-ease, ease);
}
.sk-jhero__play-icon { flex: 0 0 auto; display: block; }
.sk-jhero__play span { font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important; font-weight: 700 !important; }
.sk-jhero__play:hover { background: rgba(255, 255, 255, .2); border-color: #fff; }
.sk-jhero__play:focus-visible { outline: 3px solid var(--sk-copper-sand, #C96F4A); outline-offset: 3px; }

/* Lightbox "guarda il video": <dialog> a sé, centrata — linguaggio visivo
   diverso da .sk-modal (che scorre da destra ed è dedicata al form
   preventivo, un singleton per pagina con la sua stessa initModal()).
   Tenerle separate evita che le due dialog si contendano lo stesso selettore. */
.sk-video-lightbox {
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(92vw, 1100px);
	max-height: 90vh;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #000;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
	/* Fade + zoom leggero, non lo slide-in di .sk-modal (linguaggio diverso,
	   qui è centrata): stessa tecnica @starting-style + allow-discrete per
	   animare anche l'apertura/chiusura del top layer, non solo opacity/transform. */
	opacity: 0;
	transform: scale(.96);
	transition:
		opacity   .32s var(--sk-ease, cubic-bezier(.22, 1, .36, 1)),
		transform .32s var(--sk-ease, cubic-bezier(.22, 1, .36, 1)),
		overlay   .32s allow-discrete,
		display   .32s allow-discrete;
}
.sk-video-lightbox[open] {
	display: block;
	opacity: 1;
	transform: scale(1);
}
@starting-style {
	.sk-video-lightbox[open] { opacity: 0; transform: scale(.96); }
}
.sk-video-lightbox::backdrop {
	background: rgba(0, 17, 40, .8);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition:
		opacity .32s var(--sk-ease, ease),
		overlay .32s allow-discrete,
		display .32s allow-discrete;
}
.sk-video-lightbox[open]::backdrop { opacity: 1; }
@starting-style {
	.sk-video-lightbox[open]::backdrop { opacity: 0; }
}
.sk-video-lightbox__close {
	position: absolute;
	top: var(--sk-space-3, .75rem);
	right: var(--sk-space-3, .75rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 0;
	background: rgba(0, 17, 40, .55);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background var(--sk-dur, .35s) var(--sk-ease, ease);
}
.sk-video-lightbox__close:hover { background: rgba(0, 17, 40, .85); }
.sk-video-lightbox__close:focus-visible { outline: 2px solid var(--sk-surface, #fff); outline-offset: 2px; }
.sk-video-lightbox__inner {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.sk-video-lightbox__media,
.sk-video-lightbox__embed,
.sk-video-lightbox__embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
@media (max-width: 720px) {
	.sk-video-lightbox { width: 96vw; }
}

/* Prezzo: etichetta + valore inline, sopra il titolo (kicker), dimensionati in
   proporzione (non più il numero enorme di prima). Stesso fade-in del badge. */
.sk-jhero__price {
	display: flex;
	align-items: baseline;
	gap: var(--sk-space-2, .5rem);
	margin: 0;
	/* È un <p>: azzero il padding-bottom globale di Salient (padding-left resta per il divisore). */
	padding-block: 0 !important;
	animation: sk-word-in .6s var(--sk-ease, cubic-bezier(.22, 1, .36, 1)) var(--sk-jhero-place-delay, .3s) both;
}
.sk-jhero__price-value {
	color: #fff;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
	line-height: 1;
	font-family: "Season-Mix-Trial", serif;
	font-weight: 400;
}
.sk-jhero__price-label {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-2, .5rem);
	color: rgba(247, 244, 239, .9);
	font-size: var(--sk-fs-eyebrow, .8125rem);
	font-weight: 700;
}

/* Icona info con tooltip on-hover/focus ("Prezzo base a persona"). */
.sk-jhero__info {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: help;
}
.sk-jhero__info::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + var(--sk-space-2, .5rem));
	right: 0;
	z-index: 2;
	width: max-content;
	max-width: 16rem;
	padding: var(--sk-space-2, .5rem) var(--sk-space-3, .75rem);
	background: var(--sk-ocean-navy, #00265A);
	color: var(--sk-pearl, #F7F4EF);
	border-radius: var(--sk-radius-sm, 5px);
	box-shadow: var(--sk-shadow, 0 8px 24px rgba(27, 43, 50, .10));
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif);
	font-size: var(--sk-fs-eyebrow, .8125rem);
	text-transform: none;
	line-height: var(--sk-lh-snug, 1.25);
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--sk-dur, .35s) var(--sk-ease, ease), transform var(--sk-dur, .35s) var(--sk-ease, ease), visibility 0s linear var(--sk-dur, .35s);
}
.sk-jhero__info:hover::after,
.sk-jhero__info:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}
.sk-jhero__info:focus-visible { outline: 3px solid var(--sk-copper-sand, #C96F4A); outline-offset: 3px; }

/* Barra "Check Availability" — normale nel flusso, fixed-bottom dopo lo scroll. */
.sk-jhero-cta {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: var(--sk-pearl, #F7F4EF);
	border-bottom: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	display: flex;
	justify-content: center;
	/* Transizione per l'entrata dal basso. */
	transition: box-shadow var(--sk-dur, .35s) var(--sk-ease, ease);
}

/*
 * Stato fixed: il clone viene appeso a <body> dal JS (portal pattern),
 * quindi non ha antenati con transform — position:fixed funziona sempre.
 */
.sk-jhero-cta--fixed {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	z-index: 9999;
	border-bottom: none;
	border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	box-shadow: 0 -4px 24px rgba(27, 43, 50, .10);
}
/* Contenuto barra: PDF a sinistra, CTA a destra, entro la larghezza pagina. */
.sk-jhero-cta__inner {
	width: min(100% - 2 * clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem)), var(--sk-shell-max, var(--container-width, 1425px)));
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sk-space-4, 1rem);
}
/* Bottone download nella barra: ghost scuro (fondo pearl), allineato a sinistra. */
.sk-jhero-cta__pdf {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-2, .5rem);
	padding: .7rem 1.05rem;
	border: 1px solid var(--sk-border, rgba(27, 43, 50, .28));
	border-radius: 0;
	background: transparent;
	color: var(--sk-text, #1B2B32);
	text-decoration: none;
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-weight: 700;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	text-transform: uppercase;
	line-height: 1;
	transition: background var(--sk-dur, .35s) var(--sk-ease, ease), border-color var(--sk-dur, .35s) var(--sk-ease, ease), color var(--sk-dur, .35s) var(--sk-ease, ease);
}
.sk-jhero-cta__pdf span { font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important; font-weight: 700 !important; }
.sk-jhero-cta__pdf:hover { background: var(--sk-cta, #0068B1); border-color: var(--sk-cta, #0068B1); color: #fff; }
.sk-jhero-cta__pdf:focus-visible { outline: 3px solid var(--sk-copper-sand, #C96F4A); outline-offset: 3px; }

.sk-jhero-cta__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-3, .75rem);
	padding: var(--sk-space-5, 1.5rem) 0;
	color: var(--sk-text, #1B2B32);
	text-decoration: none;
	font-family: var(--sk-font-cta, "sweet-sans-pro", sans-serif) !important;
	font-weight: var(--sk-weight-cta, 700) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	letter-spacing: .0em;
	transition: color var(--sk-dur, .35s) var(--sk-ease, ease), gap var(--sk-dur, .35s) var(--sk-ease, ease);
}
.sk-jhero-cta__icon {
	flex: 0 0 auto;
	display: block;
	transition: transform var(--sk-dur, .35s) var(--sk-ease, ease);
}
/* !important diretto sullo span: Salient forza font-family Geist su "span" a
   livello globale — una dichiarazione sul figlio batte sempre l'ereditarietà
   dal genitore (.sk-jhero-cta__link), quindi va ripetuta qui. */
.sk-jhero-cta__link span {
	text-underline-offset: .25em;
	font-family: var(--sk-font-cta, "sweet-sans-pro", sans-serif) !important;
	font-weight: var(--sk-weight-cta, 700) !important;
	text-transform: uppercase !important;
}
.sk-jhero-cta__link:hover { color: var(--sk-cta, #0068B1); gap: var(--sk-space-4, 1rem); }
.sk-jhero-cta__link:hover span { text-decoration: underline; }
.sk-jhero-cta__link:hover .sk-jhero-cta__icon { transform: rotate(90deg); }
.sk-jhero-cta__link:focus-visible { outline: 3px solid var(--sk-copper-sand, #C96F4A); outline-offset: 3px; }

/* Post-hero mobile: prezzo + download ripetuti sul fondo chiaro subito sotto
   la hero, per alleggerirla su telefono (richiesta 14/09/2026). Nasce
   nascosto: la versione desktop di prezzo/pdf resta quella dentro la hero,
   invariata (vedi @media max-width:720px piu' sotto per l'attivazione e per
   lo spegnimento dei duplicati in hero). */
.sk-jhero__postbar { display: none; }

/* sk-jhero-in non più usato (rimpiazzato da sk-word-in per stagger parole). */

/* --- Responsive ------------------------------------------------------ */

/* La colonna destra ha base 26rem: su un tablet da 768 si prendeva 416px
   dei 768 e schiacciava il titolo, che ha gia' il suo clamp. Il collasso a
   colonna deve avvenire qui, non a 720. Il resto delle regole telefono
   (altezza, breadcrumb, barra) resta sotto. */
@media (max-width: 860px) {
	.sk-jhero__row { flex-direction: column; align-items: flex-start; }
	.sk-jhero__aside { flex-basis: auto; max-width: none; margin-top: var(--sk-space-4, 1rem); }
}

@media (max-width: 720px) {
	.sk-jhero { min-height: 82vh; }
	.sk-jhero__row { flex-direction: column; align-items: flex-start; }
	.sk-jhero__foot { flex-wrap: wrap; row-gap: var(--sk-space-3, .75rem); }
	.sk-jhero__aside { max-width: none; margin-top: var(--sk-space-4, 1rem); }
	/* Barra: su mobile i due bottoni vanno a capo se serve, restano a filo pagina. */
	.sk-jhero-cta__inner { flex-wrap: wrap; gap: var(--sk-space-3, .75rem); }
	.sk-jhero-cta__link { padding-block: var(--sk-space-4, 1rem); }
	.sk-jhero-cta__pdf { padding-block: .6rem; }
	/* Breadcrumb: nascosto su mobile (non c'è spazio senza sovrapposi al titolo). */
	.sk-jhero__bc { display: none; }

	/* --- Alleggerimento hero mobile (richiesta 14/09/2026) --------------- */

	/* "Scroll to explore": tolto solo da mobile, resta su desktop. */
	.sk-jhero__scroll { display: none; }

	/* Prezzo e download passano al postbar qui sotto: spenti qui per non
	   duplicare il contenuto a schermo (restano nel DOM per il fallback
	   no-CSS/no-JS e per non toccare il markup usato da desktop). */
	.sk-jhero__foot-left .sk-jhero__price,
	.sk-jhero__foot-left .sk-jhero__pdf--inline { display: none; }

	.sk-jhero__postbar {
		display: flex;
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		background: var(--sk-pearl, #F7F4EF);
		border-bottom: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
		padding-block: var(--sk-space-4, 1rem);
	}
	.sk-jhero__postbar-inner {
		width: min(100% - 2 * var(--sk-space-5, 1.5rem), var(--sk-shell-max, var(--container-width, 1425px)));
		margin-inline: auto;
		display: flex;
		/* Colonna: prezzo centrato sopra, bottone a piena larghezza sotto
		   (richiesta 14/09/2026 — prima erano affiancati/andavano a capo
		   allineati a sinistra). */
		flex-direction: column;
		align-items: center;
		gap: var(--sk-space-3, .75rem);
	}
	/* Prezzo: stessa tipografia della hero, ricolorata per il fondo chiaro
	   (in hero il prezzo è bianco su overlay scuro; qui serve dark-on-light). */
	.sk-jhero__postbar .sk-jhero__price { padding-block: 0 !important; justify-content: center; }
	.sk-jhero__postbar .sk-jhero__price-value { color: var(--sk-heading, #00265A); }
	.sk-jhero__postbar .sk-jhero__price-label { color: var(--sk-text-muted, #5a6b72); }
	/* Download: piena larghezza, icona+testo centrati dentro. Il modificatore
	   evita di toccare .sk-jhero-cta__pdf base, riusato anche nella barra
	   fixed dove NON deve diventare full-width. */
	.sk-jhero__postbar-pdf {
		align-self: stretch;
		justify-content: center;
	}

	/* Descrizione: read-more dopo ~2 righe. Il modulo JS è generico
	   (initShowcaseReadmore, già usato da .sk-showcase__textwrap): basta
	   dare le stesse data-* qui, nessuna riga di JS in più. Niente sfumatura
	   in fondo come nello showcase: li' sfuma su fondo pearl piatto, qui lo
	   sfondo è una foto qualunque e un colore fisso stonerebbe. */
	.sk-jhero__descwrap[data-sk-readmore] .sk-jhero__desc {
		position: relative;
		max-height: 2.75em; /* ~2 righe a line-height 1.35 (var(--sk-lh-snug)) */
		overflow: hidden;
		transition: max-height var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
	}
	.sk-jhero__desc-more {
		display: none;
		margin-top: var(--sk-space-2, .5rem);
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		color: #fff;
		font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
		font-weight: 700;
		font-size: var(--sk-fs-eyebrow, .8125rem);
		text-transform: uppercase;
		text-decoration: underline;
		text-underline-offset: .25em;
	}
	.sk-jhero__descwrap.has-more .sk-jhero__desc-more { display: inline-block; }
	.sk-jhero__desc-more:focus-visible { outline: 2px solid var(--sk-copper-sand, #C96F4A); outline-offset: 3px; }

	/* Barra CTA: su mobile deve comparire SOLO da sticky (quando si scrolla
	   oltre la hero), non subito nel flusso — richiesta 14/09/2026. L'originale
	   nel flusso (.sk-jhero-cta senza --fixed) va quindi nascosto; il clone
	   creato dal JS (initHero: portal pattern, stesso elemento + classe
	   sk-jhero-cta--fixed) resta intatto e continua a mostrarsi/nascondersi
	   da solo in base all'IntersectionObserver sulla hero. Nessun cambio JS:
	   e' lo stesso identico meccanismo gia' usato per la versione fixed. */
	.sk-jhero-cta:not(.sk-jhero-cta--fixed) { display: none; }

	/* Barra fixed: "Scarica Scheda Resort" -> solo icona, a destra del CTA
	   principale (che resta com'era). Qualificato con l'antenato .sk-jhero-cta
	   per non toccare lo stesso identico bottone riusato nel postbar qui sopra,
	   che invece deve restare per esteso (icona + testo). L'aria-label sul
	   link copre già il nome accessibile: nascondere lo span non toglie nulla
	   a chi usa uno screen reader. */
	.sk-jhero-cta .sk-jhero-cta__link { order: 1; }
	.sk-jhero-cta .sk-jhero-cta__pdf {
		order: 2;
		flex: 0 0 auto;
		gap: 0;
	}
	.sk-jhero-cta .sk-jhero-cta__pdf span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sk-jhero__word,
	.sk-jhero__badge,
	.sk-jhero__pdf,
	.sk-jhero__place,
	.sk-jhero__price,
	.sk-jhero__desc {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.sk-jhero-cta__link, .sk-jhero-cta__icon { transition: none; }
}

/* ===== journey-overview.css ===== */
/* =====================================================================
   SKORPION — Journey Overview (stile Here&Away)
   SOLO LAYOUT + override locali. Tipografia/eyebrow/prose/reveal → _sections-base.css
   Split editoriale dopo la hero: eyebrow + titolo grande a sx, paragrafo a dx.
   ===================================================================== */

.sk-overview {
	color: var(--sk-text, #1B2B32);
	padding-block: var(--sk-section-y, clamp(2.5rem, 2rem + 6vw, 3.5rem));
	scroll-margin-top: var(--header-nav-height, 78px);   /* target di #overview: link "scroll to explore" della hero */
}

.sk-overview__inner {
	margin-inline: auto;
	padding-block: var(--sk-section-y, clamp(1.5rem, 2rem + 6vw, 2rem));
}

/* Grid: titolo (sx, più largo) + paragrafo (dx). Top-aligned come nel riferimento. */
.sk-overview__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	align-items: start;
	gap: clamp(var(--sk-space-6, 2rem), 6vw, var(--sk-space-9, 6rem));
}

/* --- Override locali sulla base (valori tunati a mano) --------------- */
/* Breadcrumb (spostato qui dalla hero): testo scuro su fondo chiaro. */
.sk-overview__bc {
	margin: 0 0 var(--sk-space-5, 1.5rem);
}
.sk-overview__bc-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sk-space-2, .5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.sk-overview__bc-item {
	display: flex;
	align-items: center;
	gap: var(--sk-space-2, .5rem);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1;
}
.sk-overview__bc-item + .sk-overview__bc-item::before {
	content: "›";
	color: var(--sk-border-strong, rgba(27, 43, 50, .4));
	font-size: .75rem;
	line-height: 1;
	flex: 0 0 auto;
}
.sk-overview__bc-link {
	color: var(--sk-text-muted, rgba(27, 43, 50, .6));
	text-decoration: none;
	transition: color var(--sk-dur, .35s) var(--sk-ease, ease);
	display: flex;
	align-items: center;
}
.sk-overview__bc-link:hover { color: var(--sk-text, #1B2B32); }
.sk-overview__bc-link:focus-visible {
	outline: 2px solid var(--sk-copper-sand, #C96F4A);
	outline-offset: 3px;
	border-radius: 2px;
}
.sk-overview__bc-current {
	color: var(--sk-text, #1B2B32);
	font-weight: 500;
}

/* Card brand sotto il titolo: logo + nome catena + mini descrizione. */
.sk-overview__card {
	display: flex;
	align-items: center;
	gap: clamp(var(--sk-space-4, 1rem), 2.5vw, var(--sk-space-6, 2rem));
	margin: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-6, 2rem)) 0 0;
	padding: clamp(var(--sk-space-4, 1rem), 2vw, var(--sk-space-5, 1.5rem));
	max-width: 750px;
	background: var(--sk-pearl, #F7F4EF);
	border: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	border-radius: 3px;
}
/* Slot logo: larghezza fissa riservata, logo centrato al suo interno
   (indipendente dalla larghezza reale del file caricato). */
.sk-overview__card-logo {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(140px, 20vw, 200px);
}
.sk-overview__card .sk-overview__logo {
	height: clamp(52px, 6.5vw, 84px) !important;
	max-width: 100%;
}
.sk-overview__card-body {
	display: flex;
	flex-direction: column;
	gap: var(--sk-space-2, .5rem);
	min-width: 0;
}
.sk-overview__card-title {
	margin: 0;
	color: var(--sk-text, #1B2B32);
	font-size: var(--sk-fs-eyebrow, .8125rem);
	letter-spacing: .04em;
	padding: 0;
}
.sk-overview__card-desc {
	margin: 0;
	padding-bottom: 0 !important;   /* Salient p{padding-bottom:1.5em} */
	color: var(--sk-text-muted, rgba(27, 43, 50, .7));
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: calc(var(--sk-fs-body, 1.0625rem) * .9);
	line-height: var(--sk-lh-snug, 1.4);
}
.sk-overview__card-cta { margin-top: var(--sk-space-1, .25rem); }
@media (max-width: 560px) {
	/* Era align-items:center + text-align:left: in flex-direction:column
	   align-items agisce sull'asse orizzontale, quindi il logo finiva
	   centrato mentre nome catena/descrizione/CTA restavano a sinistra —
	   il disallineamento segnalato il 14/09/2026. Coerenza: tutto a sinistra. */
	.sk-overview__card { flex-direction: column; align-items: flex-start; text-align: left; max-width: none; }
}
/* Testo: base .sk-prose, stessa dimensione degli altri testi editoriali
   (showcase/itinerary/gallery) — nessun override locale. Nessun cap di
   larghezza: la colonna del grid fa già da limite. */
.sk-overview__text {
	max-width: none;
}

/* Leggi di più sull'introduzione: attivo su OGNI larghezza (richiesta
   14/09/2026 — a differenza del "leggi tutto" della hero, che e' solo
   mobile). Soglia 4 righe di .sk-prose (line-height 1.6 -> 6.4em). Un
   testo piu' corto della soglia non attiva nulla: il JS (initShowcaseReadmore,
   generico su [data-sk-readmore]) misura scrollHeight vs clientHeight e
   aggiunge .has-more solo se trabocca davvero. */
.sk-overview__descwrap[data-sk-readmore] .sk-overview__text {
	position: relative;
	max-height: 6.4em;
	overflow: hidden;
	transition: max-height var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
.sk-overview__more {
	display: none;
	margin-top: var(--sk-space-3, .75rem);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-weight: 700;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: .25em;
}
.sk-overview__descwrap.has-more .sk-overview__more { display: inline-block; }
.sk-overview__more:focus-visible { outline: 2px solid var(--sk-cta, #0068B1); outline-offset: 3px; }

.sk-overview__title{
max-width: 40ch;
}

/* Logo del resort sotto il titolo dell'overview.
   Altezza esplicita: gli SVG con solo viewBox con height:auto collasserebbero
   (Salient forza img{height:auto!important}, quindi serve !important). */
.sk-overview__logo {
	display: block;
	width: auto !important;
	height: clamp(64px, 9vw, 120px) !important;   /* logo brand del resort più visibile */
	max-width: clamp(200px, 32vw, 340px);
	margin: 0;   /* la spaziatura è gestita da .sk-overview__brand */
	object-fit: contain;
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 860px) {
	.sk-overview__grid {
		grid-template-columns: 1fr;
		gap: var(--sk-space-5, 1.5rem);
	}
	.sk-overview__title { max-width: 100%; }
	.sk-overview__body  { max-width: 60ch; }
}

/* ===== journey-highlights.css ===== */
/* =====================================================================
   SKORPION — Journey Highlights (informazioni principali)
   Sezione immersiva full-bleed: immagine parallax + scrim scuro dal basso.
   Contenuto ancorato in basso: eyebrow + headline serif (sx), CTA (dx),
   hairline, poi 4 punti con icona. Testo bianco sull'immagine.
   Solo token var(--sk-*) (lo scrim nero è uno scrim fotografico voluto).
   ===================================================================== */

.sk-highlights li::before {
display:none;
}

.sk-highlights {
	position: relative;
	isolation: isolate;            /* contiene gli z-index dei layer interni */
	overflow: hidden;
	/* Full-bleed: esce dal container WPBakery e va edge-to-edge. */
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: flex-end;         /* contenuto in basso, come nel riferimento */
	color: var(--sk-text-invert, #F7F4EF);
	background-color: var(--sk-slate-ink, #1B2B32);
}

/* Layer immagine (separato per il parallax: si trasla senza toccare il layout). */
.sk-highlights__bg {
	position: absolute;
	inset: -8% 0;                  /* margine extra: il parallax non scopre i bordi */
	z-index: 0;
	background-image: var(--sk-hl-img);
	background-size: cover;
	background-position: center;
	will-change: transform;
}

/* Scrim: velo scuro per contrasto col testo bianco sull'immagine. */
.sk-highlights__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, #000 0%, rgb(0 0 0) 40%, transparent 78%);
	opacity: .55;
	pointer-events: none;
}

.sk-highlights__inner {
	position: relative;
	z-index: 2;
	width: min(100% - 2 * clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem)), var(--container-width, 1425px));
	margin-inline: auto;
	padding-block: clamp(var(--sk-space-7, 3rem), 6vw, var(--sk-space-9, 6rem));
}

/* --- Riga superiore: lead (eyebrow + titolo) a sx, CTA a dx ----------- */
.sk-highlights__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem));
	padding-bottom: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-7, 3rem));
	border-bottom: 1px solid rgba(247, 244, 239, .22);   /* hairline su immagine */
}

.sk-highlights__eyebrow {
	display: block;
	margin: 0 0 var(--sk-space-4, 1rem);
	color: rgba(247, 244, 239, .8);
	font-size: var(--sk-fs-eyebrow, .8125rem);
	    font-weight: 700;
}

.sk-highlights__title {
	margin: 0;
	max-width: 30ch;
	color: var(--sk-text-invert, #F7F4EF);
	font-size: var(--sk-fs-h2, clamp(4rem, 3rem + 3vw, 3rem));
	line-height: var(--sk-lh-tight, 1.08);
	font-family: "Season-Mix-Trial", serif;
    font-weight: 500;
}

/* NB: la CTA usa il bottone nativo Salient (.nectar-cta), non più una classe locale.
   Il bottone chiaro generico vive in _sections-base.css (.sk-btn-light). */

/* --- Punti con icona ------------------------------------------------- */
.sk-highlights__points {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-7, 3rem));
	margin: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-7, 3rem)) 0 0;
	padding: 0;
	list-style: none;
}

.sk-highlights__point {
	display: flex;
	align-items: flex-start;
	gap: var(--sk-space-4, 1rem);
}

.sk-highlights__icon {
	flex: none;
	width: 1.75rem !important;
	height: 1.75rem !important;
	object-fit: contain;
	/* L'icona sorgente è scura: la forziamo bianca per leggerla sull'immagine. */
	filter: brightness(0) invert(1);
}
/* Stellina di default (SVG sparkle inline): bianca, tratto sottile, niente filtro. */
.sk-highlights__icon--star {
	color: #fff;
	stroke-width: 1.3;
	opacity: .85;
	filter: none;
}

.sk-highlights__point-text {
	margin: 0;
	color: rgba(247, 244, 239, .92);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-body, 1.0625rem);
	line-height: var(--sk-lh-snug, 1.25);
}

/* Reveal on-scroll: gestito da _sections-base.css ([data-sk-reveal] .sk-reveal).
   lead=--i:0, CTA=--i:1, punti=--i:2+ (vedi journey-highlights.php). */

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 980px) {
	.sk-highlights__points { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
	.sk-highlights { min-height: auto; }
	.sk-highlights__top {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sk-space-5, 1.5rem);
	}
	.sk-highlights__title {
		max-width: 100%;
		/* Il fallback var(--sk-fs-h2, clamp(4rem, 3rem + 3vw, 3rem)) qui sopra
		   ha il minimo (4rem) piu' grande del massimo (3rem): un clamp con
		   min>max risolve sempre al minimo, quindi il titolo e' fisso a 64px
		   OVUNQUE, non solo su mobile. Su desktop il max-width:30ch lo teneva
		   a bada; qui, dove max-width diventa 100%, un h2 lungo va a capo su
		   6-7 righe e riempie lo schermo ("abnorme", segnalato 14/09/2026).
		   --sk-fs-h2 vero non arriva mai: vive solo in design-system/tokens.css,
		   l'archivio non deployato (assets/css/README.md). Correggo solo qui,
		   scala pensata per un h2 su mobile (--sk-fs-h1 della hero scende a
		   ~42px alla stessa larghezza: questo titolo e' un gradino sotto).
		   Il bug di fondo (fallback rotto) resta anche a desktop, dove pero'
		   nessuno l'ha segnalato: non lo tocco per non alterare un risultato
		   gia' approvato senza che sia stato chiesto. */
		font-size: clamp(1.75rem, 1.3rem + 3vw, 2.25rem);
	}
	.sk-highlights__points { grid-template-columns: 1fr; }

	/* Contrasto scrim: su mobile min-height passa ad auto (regola qui sopra),
	   quindi l'altezza della sezione è quella del contenuto — e con i 4 punti
	   impilati (grid a 1 colonna) il blocco eyebrow+titolo+CTA+punti è alto
	   parecchio. Il gradiente base scurisce solo il 40% inferiore e sfuma a
	   trasparente all'78%: l'eyebrow e la parte alta del titolo, in cima a
	   uno stack cosi' lungo, finiscono spesso nella zona sfumata o del tutto
	   scoperta, sopra una foto chiara -> testo bianco che sparisce (segnalato
	   14/09/2026). Estendo lo scuro fino al 62% (copre uno stack piu' lungo) e
	   alzo l'opacita' complessiva: 0.55 non basta su foto chiare, 0.8 tiene il
	   bianco leggibile anche li'. Nessuna trasparenza piena in alto: anche la
	   fascia più chiara resta scurita quanto basta. Desktop non tocco: min-height
	   resta 100dvh e il gradiente originale, che li' funziona, e' invariato. */
	.sk-highlights__scrim {
		background: linear-gradient(0deg, #000 0%, rgb(0 0 0) 62%, rgba(0, 0, 0, .35) 100%);
		opacity: .8;
	}
}

/* ===== journey-itinerary.css ===== */
/* =====================================================================
   SKORPION — Journey Itinerary (tour a tappe)
   SOLO LAYOUT. Tipografia, eyebrow, bottoni, reveal → _sections-base.css.
   Layout più distinto da showcase:
   - Top bar sticky con timeline tappe (dot + label + nome), appare solo
     quando la section è in viewport, scompare appena esce.
   - Step: eyebrow sx | titolo + testo + COPPIA immagini (main+cover) dx.
   - Numero tappa grande in gray come accento decorativo sx.
   ===================================================================== */

/* ======================================================================
   TOP BAR — timeline delle tappe (fixed, fuori dal flow)
   ====================================================================== */

.sk-itinerary__bar {
	/* Fixed, sopra il contenuto ma sotto il nav esistente */
	position: fixed;
	top: var(--sk-bar-top, 0);
	left: 0;
	right: 0;
	z-index: 800;

	/* Stile: fondo pearl con bordo inferiore sottile */
	background: var(--sk-bg, #F7F4EF);
	border-bottom: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	padding-block: var(--sk-space-4, 1rem);

	/* Nascosta di default */
	opacity: 0;
	pointer-events: none;
	transform: translateY(-100%);
	transition:
		opacity    var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1)),
		transform  var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
.sk-itinerary__bar.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* Layout: timeline occupa l'intera larghezza, nessun pulsante next. */
.sk-itinerary__bar-inner {
	display: flex;
	align-items: center;
}

/* Lista: items distribuiti ugualmente su tutta la larghezza. */
.sk-itinerary__bar-list {
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none !important;
	overflow: visible;
}
.sk-itinerary__bar-list::-webkit-scrollbar { display: none; }

/* Tappa: uguale crescita → N giorni = N slot identici full-width. */
.sk-itinerary__bar-item {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	list-style: none !important;
}
.sk-itinerary__bar-item::marker { content: none !important; }

.sk-itinerary__bar-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--sk-space-3, .75rem);
	padding-inline: var(--sk-space-2, .5rem);
	text-decoration: none;
	color: var(--sk-text-muted, #5a6b72);
}
.sk-itinerary__bar-link:focus-visible { outline: 2px solid var(--sk-cta, #0068B1); outline-offset: 3px; border-radius: 2px; }

/* Nome tappa: singola riga, muted, truncato — compare sopra il dot. */
.sk-itinerary__bar-name {
	width: 100%;
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	color: var(--sk-text-muted, #5a6b72);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color var(--sk-dur, .35s) var(--sk-ease);
}
.sk-itinerary__bar-item.is-active .sk-itinerary__bar-name,
.sk-itinerary__bar-link:hover .sk-itinerary__bar-name { color: var(--sk-copper-sand, #C96F4A); }

/* Rail: linea orizzontale che attraversa la tappa, dot centrato sopra. */
.sk-itinerary__bar-rail {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
}
.sk-itinerary__bar-rail::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--sk-border, rgba(27, 43, 50, .2));
	transform: translateY(-50%);
}
/* La linea parte dal primo dot e termina sull'ultimo. */
.sk-itinerary__bar-item:first-child .sk-itinerary__bar-rail::before { left: 50%; }
.sk-itinerary__bar-item:last-child  .sk-itinerary__bar-rail::before { right: 50%; }

.sk-itinerary__bar-dot {
	position: relative;
	z-index: 1;
	width: .85rem;
	height: .85rem;
	border-radius: 50%;
	border: 1.5px solid var(--sk-text-muted, #98a2a8);
	background: var(--sk-bg, #F7F4EF);
	transition:
		background   var(--sk-dur, .35s) var(--sk-ease),
		border-color var(--sk-dur, .35s) var(--sk-ease);
}
.sk-itinerary__bar-item.is-active .sk-itinerary__bar-dot,
.sk-itinerary__bar-link:hover .sk-itinerary__bar-dot {
	background: var(--sk-copper-sand, #C96F4A);
	border-color: var(--sk-copper-sand, #C96F4A);
}

/* Giorno (sotto il dot): "Giorno N", muted; attivo → scuro. */
.sk-itinerary__bar-day {
	font-family: var(--sk-font-label, "sweet-sans-pro", "Geist", sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	color: var(--sk-text-muted, #5a6b72);
	transition: color var(--sk-dur, .35s) var(--sk-ease);
}
.sk-itinerary__bar-item.is-active .sk-itinerary__bar-day { color: var(--sk-copper-sand, #C96F4A); }
.sk-itinerary__bar-link:hover .sk-itinerary__bar-day { color: var(--sk-text, #1B2B32); }

/* Pulsante next: non usato nella distribuzione full-width — nascosto. */
.sk-itinerary__bar-next { display: none; }

/* ======================================================================
   SECTION
   ====================================================================== */

.sk-itinerary {
	color: var(--sk-text, #1B2B32);
	padding-block: var(--sk-section-y, clamp(3.5rem, 2rem + 6vw, 7rem));
}

/* --- Header introduttivo -------------------------------------------- */
.sk-itinerary__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sk-space-4, 1rem);
	padding-bottom: clamp(var(--sk-space-7, 3rem), 5vw, var(--sk-space-9, 6rem));
}
.sk-itinerary__head-left { width: 100%; }
.sk-itinerary__eyebrow   { display: block; margin-bottom: var(--sk-space-3, .75rem); }
.sk-itinerary__heading   { max-width: 28ch; margin: 0 !important; }
.sk-itinerary__intro {
	margin: 0 !important;
	max-width: 60ch;
}

/* Compact head: compatibilità con classi esistenti */
.sk-itinerary__head--single { width: 100%; }

/* --- Tappa singola -------------------------------------------------- */
.sk-itinerary__step {
	display: grid;
	/* Colonna sx: numero/label | Colonna dx: contenuto */
	grid-template-columns: clamp(100px, 14vw, 180px) 1fr;
	gap: clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem));
	padding-block: clamp(var(--sk-space-7, 3rem), 5vw, var(--sk-space-8, 4rem));
	border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
}
/* Prima tappa: bordo più spesso per separare dall'header */
.sk-itinerary__step:first-child { border-top-width: 2px; }

/* Colonna sx: eyebrow + grande numero decorativo */
.sk-itinerary__aside {
	padding-top: var(--sk-space-1, .25rem);
	display: flex;
	flex-direction: column;
	gap: var(--sk-space-3, .75rem);
}
.sk-itinerary__day {
	font-size: var(--sk-fs-eyebrow, .8125rem);
}
/* Numero grande decorativo — accento grafico */
.sk-itinerary__step-num {
	display: block;
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: clamp(3rem, 6vw, 5.5rem);
	font-weight: 300;
	line-height: 1;
	color: var(--sk-border, rgba(27, 43, 50, .12));
	user-select: none;
	pointer-events: none;
	margin-top: var(--sk-space-3, .75rem);
}

/* --- Corpo: titolo + testo + 2 immagini ----------------------------- */
/* Titolo tappa (h3): scala nativa Salient (22px/34px). Solo margine + colore. */
.sk-itinerary__title {
	margin: 0 0 var(--sk-space-3, .75rem) !important;
	color: var(--sk-text, #1B2B32);
}
.sk-itinerary__text {
	max-width: 100ch;   /* misura di lettura confortevole anche col rail più largo */
	margin-bottom: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-7, 3rem)) !important;
}

/* --- Coppia di immagini: main (grande) + cover (stretta dx) --------- */
.sk-itinerary__media {
	display: grid;
	grid-template-columns: 1.9fr 1fr;   /* identico a showcase */
	gap: var(--sk-space-5, 1.5rem);
	align-items: stretch;
}
.sk-itinerary__media--single {
	grid-template-columns: 1fr;   /* singola immagine: occupa tutta la larghezza */
}

.sk-itinerary__fig {
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
	height: clamp(260px, 30vw, 480px);
	background: var(--sk-bg-alt, #EDE6DD);
	border-radius: var(--sk-radius, 0);
}
.sk-itinerary__img {
	display: block;
	/* !important: Salient forza img { height:auto } e romperebbe il cover. */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	transition: transform var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
.sk-itinerary__fig:hover .sk-itinerary__img { transform: scale(1.03); }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 860px) {
	/* Header: una colonna */
	.sk-itinerary__head {
		grid-template-columns: 1fr;
	}
	.sk-itinerary__intro { grid-column: 1; margin-top: var(--sk-space-4, 1rem) !important; }

	/* Step: una colonna */
	.sk-itinerary__step {
		grid-template-columns: 1fr;
		gap: var(--sk-space-4, 1rem);
	}
	.sk-itinerary__aside {
		flex-direction: row;
		align-items: center;
		padding-top: 0;
	}
	.sk-itinerary__step-num { display: none; }

	/* Top bar: era nascosta perche' con N slot a larghezza uguale i nomi si
	   riducevano a "Mal...". Nascondendola pero' il tour perdeva su telefono
	   la sua unica navigazione fra le tappe. Qui diventa un rail orizzontale
	   compatto: il nome esce (si legge comunque nella tappa sotto), restano
	   pallino e giorno, e si scorre. Il JS gia' riporta al centro la tappa
	   attiva quando la lista eccede la larghezza: nessuna modifica JS. */
	.sk-itinerary__bar { padding-block: var(--sk-space-3, .75rem); }
	.sk-itinerary__bar-list {
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.sk-itinerary__bar-item {
		flex: 0 0 auto;
		min-width: 4.75rem;
		scroll-snap-align: center;
	}
	.sk-itinerary__bar-name { display: none; }
	.sk-itinerary__bar-link { gap: var(--sk-space-2, .5rem); }
}
@media (max-width: 600px) {
	/* Immagini: una sola colonna */
	.sk-itinerary__media { grid-template-columns: 1fr; }
	.sk-itinerary__fig--cover { display: none; }   /* nasconde la seconda su mobile */
	.sk-itinerary__fig { height: clamp(200px, 56vw, 340px); }
}

@media (prefers-reduced-motion: reduce) {
	.sk-itinerary__img { transition: none; }
	.sk-itinerary__bar { transition: none; }
}

/* ===== journey-showcase.css ===== */
/* =====================================================================
   SKORPION — Journey Showcase (Sistemazioni / Interni e servizi)
   SOLO LAYOUT. Tipografia, eyebrow, bottoni, reveal → _sections-base.css.
   Righe editoriali: eyebrow (sx) | titolo + testo + 2 immagini (dx).
   La 2ª immagine apre una gallery (lightbox <dialog>).
   ===================================================================== */

.sk-showcase {
	color: var(--sk-text, #1B2B32);
	padding-block: var(--sk-section-y, clamp(3.5rem, 2rem + 6vw, 7rem));
}

/* Headline introduttiva in cima al blocco. */
.sk-showcase__head {
	padding-bottom: clamp(var(--sk-space-6, 2rem), 4vw, var(--sk-space-8, 4rem));
}
.sk-showcase__heading { max-width: 30ch; }

/* --- Riga ------------------------------------------------------------ */
.sk-showcase__row {
	display: grid;
    grid-template-columns: clamp(120px, 40vw, 250px) 1fr;
	gap: clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem));
	padding-block: clamp(var(--sk-space-6, 2rem), 4vw, var(--sk-space-8, 4rem));
	border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
}

/* Colonna eyebrow: allineata in alto, accanto al titolo. */
.sk-showcase__aside { padding-top: var(--sk-space-1, .25rem); }

/* Corpo: titolo (40%) + testo (60%) sulla stessa riga, poi le immagini. */
.sk-showcase__intro {
	display: grid;
	grid-template-columns: 2fr 3fr;   /* ~40% / ~60% */
	gap: clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem));
	align-items: start;
	margin-bottom: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-7, 3rem));
}
/* Titolo riga (h3): scala nativa Salient (22px/34px). Solo margine + colore. */
.sk-showcase__title {
	margin: 0;
	color: var(--sk-text, #1B2B32);
}
.sk-showcase__textwrap { position: relative; }
.sk-showcase__text { margin: 0; }

/* Leggi di più: la descrizione si accorcia e si espande al click (JS). */
.sk-showcase__textwrap[data-sk-readmore] .sk-showcase__text {
	position: relative;
	max-height: 9em;
	overflow: hidden;
	transition: max-height var(--sk-dur, .45s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
/* Sfumatura in fondo solo quando è troncato (non espanso). */
.sk-showcase__textwrap.has-more:not(.is-expanded) .sk-showcase__text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2.6em;
	background: linear-gradient(rgba(247, 244, 239, 0), var(--sk-pearl, #F7F4EF));
	pointer-events: none;
}
.sk-showcase__more {
	display: none;
	margin-top: var(--sk-space-3, .75rem);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-weight: 700;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: .25em;
}
.sk-showcase__textwrap.has-more .sk-showcase__more { display: inline-block; }
.sk-showcase__more:focus-visible { outline: 2px solid var(--sk-cta, #0068B1); outline-offset: 3px; }

/* --- Coppia di immagini --------------------------------------------- */
.sk-showcase__media {
	display: grid;
	grid-template-columns: 1.9fr 1fr;   /* A grande, B (gallery) più stretta */
	gap: var(--sk-space-5, 1.5rem);
	align-items: stretch;
}

.sk-showcase__fig {
	margin: 0;
	padding: 0;
	border: 0;
	position: relative;
	overflow: hidden;
	/* Altezza sulla FIGURA: entrambe le colonne (main + gallery) restano uguali
	   e l'immagine la riempie del tutto (niente spazi vuoti). */
	height: clamp(280px, 32vw, 520px);
	background: var(--sk-bg-alt, #EDE6DD);   /* placeholder mentre l'immagine carica */
	border-radius: var(--sk-radius, 0);
}

.sk-showcase__img {
	display: block;
	/* !important: il tema Salient forza img { height:auto } e romperebbe il cover. */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	transition: transform var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}

/* La cover-gallery è un bottone: full image + barra CTA in basso. */
.sk-showcase__fig--gallery {
	cursor: pointer;
	display: block;
	width: 100%;
	text-align: inherit;
	color: inherit;
	font: inherit;
}
.sk-showcase__fig--gallery::after {     /* velo per leggibilità della CTA */
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 17, 40, .35) 0%, rgba(0, 17, 40, 0) 45%);
	opacity: 0;
	transition: opacity var(--sk-dur, .35s) var(--sk-ease);
	pointer-events: none;
}
.sk-showcase__fig--gallery:hover .sk-showcase__img,
.sk-showcase__fig--gallery:focus-visible .sk-showcase__img { transform: scale(1.04); }
.sk-showcase__fig--gallery:hover::after,
.sk-showcase__fig--gallery:focus-visible::after { opacity: 1; }
.sk-showcase__fig--gallery:focus-visible { outline: 2px solid var(--sk-cta, #0068B1); outline-offset: 3px; }

/* Barra CTA sovrapposta in basso alla cover. */
.sk-showcase__cta {
	position: absolute;
	left: var(--sk-space-4, 1rem);
	right: var(--sk-space-4, 1rem);
	bottom: var(--sk-space-4, 1rem);
	z-index: 1;
	pointer-events: none;   /* il click lo gestisce il <button> padre */
}

/* Hover guidato dalla cover: il bottone non riceve eventi (pointer-events:none),
   quindi l'hover si attiva passando ovunque sulla cover-bottone. */
.sk-showcase__fig--gallery:hover .sk-showcase__cta,
.sk-showcase__fig--gallery:focus-visible .sk-showcase__cta {
	background-color: rgba(255, 255, 255, .69) !important;
	color: #fff !important;
	border-color: #fff !important;
}

/* ===== Hover globale bottoni Salient white (.nectar-cta[data-color="white"]) =====
   Replica hover_color_FFFFFFB0 / text_hover_color_FFFFFF / hover_border_color_FFFFFF.
   Target multipli: Salient mette il bg ora su .link_wrap ora su .link_text e il
   colore testo su .text/.link_text (color esplicito → non eredita da .link_wrap). */
.nectar-cta[data-color="white"] .link_wrap,
.nectar-cta[data-color="white"] .link_text {
	    transition: border-color .45s cubic-bezier(0.25, 1, 0.33, 1), color .45s cubic-bezier(0.25, 1, 0.33, 1), background-color .45s cubic-bezier(0.25, 1, 0.33, 1) !important;
}
.nectar-cta[data-color="white"]:hover .link_wrap {
	background-color: rgba(255, 255, 255, .69) !important;
	border-color: #fff !important;
}
.nectar-cta[data-color="white"]:hover .link_text {
	background-color: transparent !important;   /* evita doppio strato bianco */
}
.nectar-cta[data-color="white"]:hover p,
.nectar-cta[data-color="white"]:hover .link_text,
.nectar-cta[data-color="white"]:hover .text {
	color: #fff !important;
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 860px) {
	.sk-showcase__row { grid-template-columns: 1fr; gap: var(--sk-space-4, 1rem); }
	.sk-showcase__aside { padding-top: 0; }
	.sk-showcase__intro { grid-template-columns: 1fr; gap: var(--sk-space-3, .75rem); }
}
@media (max-width: 600px) {
	.sk-showcase__media { grid-template-columns: 1fr; }
	.sk-showcase__fig { height: clamp(220px, 56vw, 360px); }
}

/* Lightbox <dialog>.sk-gallery → componente condiviso in _sections-base.css. */

@media (prefers-reduced-motion: reduce) {
	.sk-showcase__img { transition: none; }
}

/* ===== journey-gallery.css ===== */
/* =====================================================================
   SKORPION — Journey Gallery (fotogallery filmstrip)
   SOLO LAYOUT. Tipografia/eyebrow/reveal/lightbox → _sections-base.css.
   Striscia orizzontale full-bleed di foto a tutta altezza, trascinabile.
   ===================================================================== */

.sk-photogal {
	color: var(--sk-text, #1B2B32);
	padding-block: clamp(var(--sk-space-6, 2rem), 4vw, var(--sk-space-8, 4rem));
}

/* Header opzionale sopra la strip. */
.sk-photogal__head { margin-bottom: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-7, 3rem)); }

/* Grid: eyebrow + titolo (sx) | testo (dx) — stesso schema di overview/hero. */
.sk-photogal__head-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	align-items: start;
	gap: clamp(var(--sk-space-6, 2rem), 6vw, var(--sk-space-9, 6rem));
}
.sk-photogal__eyebrow { display: block; margin: 0 0 var(--sk-space-4, 1rem); }
.sk-photogal__title { max-width: 24ch; }
.sk-photogal__desc { max-width: none; }

@media (max-width: 860px) {
	.sk-photogal__head-grid { grid-template-columns: 1fr; gap: var(--sk-space-5, 1.5rem); }
	.sk-photogal__desc { margin-top: 0; }
}

/* Viewport full-bleed che contiene la track + le frecce. */
.sk-photogal__viewport { position: relative; }

/* Track: flex orizzontale scorrevole; altezza derivata dall'aspect-ratio degli item. */
.sk-photogal__track {
	display: flex;
	gap: var(--sk-space-2, .5rem);
	margin: 0;
	padding: 0;
	list-style: none !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	cursor: grab;
}
.sk-photogal__track::-webkit-scrollbar { display: none; }
.sk-photogal__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}
.sk-photogal__track:focus-visible {
	outline: 2px solid var(--sk-cta, #0068B1);
	outline-offset: -2px;
}

/* Item: aspect-ratio 3/2, larghezza aumentata. Override con --sk-pg-w. */
.sk-photogal__item {
	flex: 0 0 var(--sk-pg-w, clamp(360px, 48vw, 760px));
	aspect-ratio: 3 / 2;
	height: auto;
	scroll-snap-align: center;
	list-style: none !important;
}
.sk-photogal__item::before,
.sk-photogal__item::marker {
	display: none !important;
	content: none !important;
}

.sk-photogal__btn {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--sk-bg-alt, #EDE6DD);   /* placeholder durante il load */
	cursor: pointer;
	overflow: hidden;
}
.sk-photogal__btn:focus-visible {
	outline: 2px solid var(--sk-cta, #0068B1);
	outline-offset: -3px;
}

.sk-photogal__img {
	display: block;
	/* !important: il tema Salient forza img { height:auto } e romperebbe il cover. */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	-webkit-user-drag: none;
	transition: transform var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
.sk-photogal__btn:hover .sk-photogal__img,
.sk-photogal__btn:focus-visible .sk-photogal__img { transform: scale(1.03); }

/* Frecce: coppia in basso a destra, discrete. */
.sk-photogal__arrows {
	position: absolute;
	right: clamp(var(--sk-space-4, 1rem), 3vw, var(--sk-space-7, 3rem));
	bottom: var(--sk-space-5, 1.5rem);
	display: flex;
	gap: var(--sk-space-2, .5rem);
}
.sk-photogal__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: rgba(0, 17, 40, .55);
	border: 1px solid rgba(247, 244, 239, .25);
	color: var(--sk-text-invert, #F7F4EF);
	border-radius: var(--sk-radius-sm, 5px);
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background var(--sk-dur, .35s) var(--sk-ease), transform var(--sk-dur, .35s) var(--sk-ease);
}
.sk-photogal__arrow:hover { background: rgba(0, 17, 40, .85); transform: translateY(-1px); }
.sk-photogal__arrow:focus-visible { outline: 2px solid var(--sk-surface, #fff); outline-offset: 2px; }

@media (max-width: 720px) {
	.sk-photogal__arrows { display: none; }   /* su touch basta lo swipe */
}

@media (prefers-reduced-motion: reduce) {
	.sk-photogal__img { transition: none; }
}

/* ===== journey-offers.css ===== */
/* =====================================================================
   SKORPION — Journey Offers (carosello offerte)
   SOLO LAYOUT. Tipografia/eyebrow/bottoni/reveal → _sections-base.css.
   Split: intro (headline + CTA) a sx, rail di card-offerta a dx che esce
   dal bordo destro. Sfondo sea-foam.
   ===================================================================== */

.sk-offers {
	position: relative;
	isolation: isolate;   /* contiene gli z-index dei layer bg/overlay */
	background: var(--sk-sea-foam, #C7E4E1);
	color: var(--sk-text, #1B2B32);
	/* Sezione alta e cinematografica: le card sfondano verticalmente */
	padding-block: clamp(3.5rem, 8vw, 8rem);
	overflow: hidden;   /* il rail scrolla internamente, non sfonda la pagina */
}

/* --- Variante con immagine di sfondo (CMS) -------------------------- */
.sk-offers--media { background: var(--sk-slate-ink, #1B2B32); color: var(--sk-text-invert, #F7F4EF); }
.sk-offers__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--sk-offers-img);
	background-size: cover;
	background-position: center;
	filter: blur(22px);
	transform: scale(1.06); /* evita artefatti ai bordi del blur */
}
.sk-offers__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--sk-offers-overlay, rgba(0, 17, 40, .6));
	pointer-events: none;
}
.sk-offers__inner { position: relative; z-index: 1; }
/* Su immagine: titolo bianco e CTA chiara per contrasto. */
.sk-offers--media .sk-offers__title   { color: var(--sk-text-invert, #F7F4EF) !important; }
.sk-offers--media .sk-offers__eyebrow { color: rgba(247, 244, 239, .8); }
.sk-offers--media .sk-offers__cta {
	background: var(--sk-surface, #fff);
	color: var(--sk-ocean-navy, #00265A) !important;
	border-color: var(--sk-surface, #fff);
}
.sk-offers--media .sk-offers__cta:hover,
.sk-offers--media .sk-offers__cta:focus-visible { background: transparent; color: #fff !important; border-color: rgba(247, 244, 239, .6); }
/* Su immagine: anche i titoli card, il link "Dettagli" e le frecce diventano chiari. */
.sk-offers--media .sk-offer__title { color: var(--sk-text-invert, #F7F4EF) !important; }
.sk-offers--media .sk-offer__more  { color: var(--sk-text-invert, #F7F4EF); }
.sk-offers--media .sk-offers__arrow {
	border-color: rgba(247, 244, 239, .6);
	color: var(--sk-text-invert, #F7F4EF);
}
.sk-offers--media .sk-offers__arrow:hover { background: var(--sk-text-invert, #F7F4EF); color: var(--sk-ocean-navy, #00265A); }

/* Grid split: intro a larghezza contenuta, rail che prende il resto e bleeda a dx.
   padding-left allinea l'intro al contenuto; niente padding-right → le card
   escono dal bordo destro del viewport. */
.sk-offers__inner {
	display: grid;
	/* Intro colonna più stretta, card column prende tutto il resto */
	grid-template-columns: minmax(240px, 26%) 1fr;
	align-items: center;
	gap: clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem));
	padding-left: clamp(var(--sk-space-5, 1.5rem), 5vw, clamp(4rem, 6vw, 7rem));
}

/* --- Intro (sx) ------------------------------------------------------ */
.sk-offers__intro { max-width: 36ch; display: flex; flex-direction: column; align-items: flex-start; }
.sk-offers__eyebrow { display: block; margin: 0 0 var(--sk-space-4, 1rem); }
/* Titolo offerte (h2): scala nativa Salient come le altre sezioni; teniamo solo
   il margine inferiore che regge il layout della colonna intro. */
.sk-offers__title {
	margin-bottom: clamp(var(--sk-space-6, 2rem), 3vw, var(--sk-space-8, 4rem)) !important;
}
.sk-offers__cta { align-self: flex-start; margin-top: auto; }
/* Testo della CTA offerte (nectar-cta): sweet-sans-pro 700, uppercase.
   !important diretto su .text/.link_text/p perché Salient forza Geist su questi
   elementi a livello globale (l'ereditarietà dal wrapper non basta). */
.sk-offers__cta .text,
.sk-offers__cta .link_text,
.sk-offers__cta p {
	font-family: var(--sk-font-cta, "sweet-sans-pro", sans-serif) !important;
	font-weight: var(--sk-weight-cta, 700) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem) !important;   /* stessa dimensione della CTA fixed */
	letter-spacing: 0 !important;
	text-transform: uppercase !important;
}
/* Padding laterale ridotto: l'inline style di skorpion_resort_btn() (3em) è
   generico a tutte le CTA "lg dark" del sito — qui lo scopiamo solo a questo
   bottone, senza toccare l'helper condiviso. */
.sk-offers__cta .link_wrap {
	padding-left: 2em !important;
	padding-right: 2em !important;
}

/* --- Rail (dx) ------------------------------------------------------- */
.sk-offers__rail-wrap {
	position: relative;
	min-width: 0;   /* permette all'overflow del grid-item di funzionare */
	/* Le card sfondano fuori dal padding verticale della section */
	margin-block: calc(-1 * clamp(3.5rem, 8vw, 8rem));
	padding-block: clamp(3.5rem, 8vw, 8rem);
}
.sk-offers__rail {
	display: flex;
	/* Gap ridotto per look più compatto come nel riferimento */
	gap: clamp(var(--sk-space-3, .75rem), 1.5vw, var(--sk-space-4, 1rem));
	margin: 0;
	padding: 0 clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem)) 0 0;   /* respiro a fine scroll */
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-padding-left: 0;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	cursor: grab;
}
.sk-offers__rail::-webkit-scrollbar { display: none; }
.sk-offers__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.sk-offers__rail:focus-visible { outline: 2px solid var(--sk-cta, #0068B1); outline-offset: 4px; }

/* --- Card offerta (offerta interna al resort) ------------------------ */
.sk-offer {
	/* Card più larghe, cinematografiche come nel riferimento */
	flex: 0 0 var(--sk-offer-w, clamp(280px, 28vw, 400px));
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}

/* Media: immagine alta e cinematografica come nel riferimento */
.sk-offer__media {
	position: relative;
	/* Altezza fissa che sfonda la section — più cinematografica */
	height: clamp(360px, 55vh, 580px);
	aspect-ratio: unset;
	overflow: hidden;
	background: var(--sk-bg-alt, #EDE6DD);
	border-radius: var(--sk-radius, 0);
}
.sk-offer__img {
	/* !important: Salient forza img { height:auto } e romperebbe il cover. */
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	transition: transform var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}

/* Badge "Offer" (sempre, arancio brand) in alto a sinistra. */
.sk-offer__badges {
	position: absolute;
	top: var(--sk-space-3, .75rem);
	left: var(--sk-space-3, .75rem);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-space-2, .5rem);
}
.sk-offer__badge {
	display: inline-flex;
	align-items: center;
	padding: .45em .8em;
	font-family: var(--sk-font-label, "sweet-sans-pro", "Geist", sans-serif) !important;
	font-size: .6875rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--sk-radius-sm, 5px);
}
/* Offer + Viaggio di nozze: rame brand. */
.sk-offer__badge--offer {
	background: var(--sk-copper-sand, #C96F4A);
	color: #fff;
	border: 1px solid var(--sk-copper-sand, #C96F4A);
}
/* Tour: navy pieno, testo bianco. */
.sk-offer__badge--tour {
	background: #00265A !important;
	color: #fff !important;
	border: 1px solid #00265A;
}

/* Trigger: copre tutta la media → click apre i dettagli (popover). */
.sk-offer__trigger {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.sk-offer__trigger:hover ~ .sk-offer__img,           /* (fallback) */
.sk-offer__media:hover .sk-offer__img { transform: scale(1.04); }
.sk-offer__trigger:focus-visible { outline: 2px solid var(--sk-ocean-navy, #00265A); outline-offset: -3px; }

/* Pillola "i" dettagli, in alto a destra sulla media. */
.sk-offer__info {
	position: absolute;
	top: var(--sk-space-3, .75rem);
	right: var(--sk-space-3, .75rem);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: #fff;
	background: rgba(0, 17, 40, .45);
	border: 1px solid rgba(247, 244, 239, .4);
	border-radius: 50%;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background var(--sk-dur, .35s) var(--sk-ease);
}
.sk-offer__trigger:hover .sk-offer__info,
.sk-offer__trigger:focus-visible .sk-offer__info { background: var(--sk-ocean-navy, #00265A); }

/* Foot: titolo sotto l'immagine — semplice come nel riferimento */
.sk-offer__foot {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sk-space-3, .75rem);
	padding-top: var(--sk-space-4, 1rem);
}
.sk-offer__title {
	/* !important su size/line-height/margin: il CSS h3 globale di Salient li sovrascrive. */
	margin: 0 !important;
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-weight: 400 !important;
	font-size: clamp(.95rem, .9rem + .25vw, 1.0625rem) !important;
	line-height: 1.3 !important;
}
/* Su sfondo scuro: titolo card chiaro come nel riferimento */
.sk-offers--media .sk-offer__title { color: rgba(247, 244, 239, .9) !important; }
.sk-offer__more {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-2, .5rem);
	flex: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--sk-cta, #0068B1);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	white-space: nowrap;
}
.sk-offer__more svg { transition: transform var(--sk-dur, .35s) var(--sk-ease); }
.sk-offer__more:hover svg { transform: translateX(3px); }
.sk-offer__more:focus-visible { outline: 2px solid var(--sk-ocean-navy, #00265A); outline-offset: 2px; }

/* Titolo cresce → "Dettagli" e "Scarica PDF" restano raggruppati a destra. */
.sk-offer__title { flex: 1 1 auto; }
/* Bottone download PDF dell'offerta (stesso stile testuale di "Dettagli"). */
/* Bottone download PDF: fascia full-width bianca in fondo alla foto. */
.sk-offer__pdf {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sk-space-2, .5rem);
	padding: var(--sk-space-4, 1rem) var(--sk-space-5, 1.5rem);
	background: #fff;
	color: var(--sk-ocean-navy, #00265A);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-body, 1.0625rem);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--sk-dur, .35s) var(--sk-ease, ease), color var(--sk-dur, .35s) var(--sk-ease, ease);
}
.sk-offer__pdf svg { flex: none; }
.sk-offer__pdf:hover { background: var(--sk-ocean-navy, #00265A); color: #fff; }
.sk-offer__pdf:focus-visible { outline: 2px solid var(--sk-ocean-navy, #00265A); outline-offset: -3px; }

/* --- Dettagli offerta (popover nativo, top-layer) ------------------- */
.sk-offer__details {
	width: min(560px, 92vw);
	max-height: 80vh;
	margin: auto;                 /* centrato nel viewport */
	padding: clamp(var(--sk-space-6, 2rem), 4vw, var(--sk-space-8, 4rem));
	border: 0;
	border-radius: var(--sk-radius-sm, 5px);
	background: var(--sk-surface, #fff);
	color: var(--sk-text, #1B2B32);
	box-shadow: var(--sk-shadow-lg, 0 24px 60px rgba(0, 38, 90, .18));
	overflow-y: auto;
}
.sk-offer__details::backdrop { background: rgba(27, 43, 50, .55); }
.sk-offer__details-close {
	position: absolute;
	top: var(--sk-space-4, 1rem);
	right: var(--sk-space-4, 1rem);
	display: inline-flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 1px solid var(--sk-border, rgba(27, 43, 50, .2));
	border-radius: 50%;
	color: var(--sk-text-muted, #5a6b72);
	cursor: pointer;
}
.sk-offer__details-close:hover,
.sk-offer__details-close:focus-visible { background: var(--sk-bg-alt, #EDE6DD); color: var(--sk-text, #1B2B32); }
.sk-offer__details .sk-offer__badge { position: static; margin-bottom: var(--sk-space-4, 1rem); }
.sk-offer__details-title {
	margin: 0 0 var(--sk-space-4, 1rem) !important;
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-weight: 500 !important;
	font-size: var(--sk-fs-h3, clamp(1.375rem, 1.2rem + .9vw, 1.75rem)) !important;
	line-height: var(--sk-lh-snug, 1.25) !important;
	max-width: 22ch;
}
.sk-offer__details-text {
	margin: 0;
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-body, 1.0625rem);
	line-height: var(--sk-lh-body, 1.6);
}

@media (prefers-reduced-motion: reduce) {
	.sk-offer__img, .sk-offer__more svg { transition: none; }
}

/* --- Frecce ---------------------------------------------------------- */
.sk-offers__arrows {
	display: flex;
	gap: var(--sk-space-2, .5rem);
	margin-top: var(--sk-space-5, 1.5rem);
	padding-left: 0;
}
.sk-offers__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--sk-ocean-navy, #00265A);
	color: var(--sk-ocean-navy, #00265A);
	border-radius: var(--sk-radius-sm, 5px);
	cursor: pointer;
	transition: background var(--sk-dur, .35s) var(--sk-ease), color var(--sk-dur, .35s) var(--sk-ease);
}
.sk-offers__arrow:hover { background: var(--sk-ocean-navy, #00265A); color: #fff; }
.sk-offers__arrow:focus-visible { outline: 2px solid var(--sk-ocean-navy, #00265A); outline-offset: 2px; }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 860px) {
	.sk-offers__inner {
		grid-template-columns: 1fr;
		gap: var(--sk-space-6, 2rem);
		padding-right: 0;
	}
	.sk-offers__intro { max-width: 100%; }
	.sk-offers__arrows { display: none; }   /* su touch basta lo swipe */
}
/* Fix: ensure Dettagli button is above the trigger overlay */
.sk-offer__more {
  position: relative;
  z-index: 20;
  cursor: pointer;
  pointer-events: auto;
}



/* Ensure the overlay trigger does not block clicks on Dettagli */
.sk-offer__trigger {
  z-index: 1;
  pointer-events: none;
}

/* Enable trigger only on image area */
.sk-offer__media .sk-offer__trigger {
  pointer-events: auto;
}

/* ===== journey-carriers.css ===== */
/* =====================================================================
   SKORPION — Journey Carriers (carosello vettori aerei)
   SOLO LAYOUT. Tipografia → _sections-base.css.
   Marquee auto-scroll di loghi, sfumatura (mask) ai lati, pausa all'hover.
   Nessun JS: animazione CSS + duplicazione del set per il loop continuo.
   ===================================================================== */

.sk-carriers {
	background: #fff;
	color: var(--sk-text, #1B2B32);
	padding-block: clamp(var(--sk-space-7, 3rem), 5vw, var(--sk-space-9, 6rem));
}

/* Headline centrata. */
.sk-carriers__head {
	text-align: center;
	margin-bottom: clamp(var(--sk-space-6, 2rem), 4vw, var(--sk-space-8, 4rem));
}
.sk-carriers__eyebrow {
	display: block;
	justify-content: center;
	margin: 0 0 var(--sk-space-4, 1rem);
	color: var(--sk-text-muted, rgba(27, 43, 50, .6));
}
.sk-carriers__title {
	margin-inline: auto;
	max-width: 24ch;
	color: var(--sk-text, #1B2B32) !important;
	font-family: var(--sk-font-display, "Season-Mix-Trial", serif) !important;
	font-weight: var(--sk-weight-display, 400) !important;
}

/* Griglia: loghi (sotto-grid 3 colonne) + card editoriale a destra, bordati come una tabella. */
.sk-carriers__grid {
	display: grid;
	grid-template-columns: 3fr minmax(260px, 1.1fr);
	border: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
}

.sk-carriers__logos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.sk-carriers__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-7, 3rem));
	border-right: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	border-bottom: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
}
.sk-carriers__logos .sk-carriers__logo:nth-child(3n) { border-right: none; }

.sk-carriers__logo img {
	/* !important: Salient forza img { height:auto; max-width:100% }. */
	display: block;
	height: clamp(26px, 2.6vw, 42px) !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain;
}

/* Card editoriale: titolo + descrizione, occupa tutta l'altezza della griglia loghi. */
.sk-carriers__intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--sk-space-3, .75rem);
	padding: clamp(var(--sk-space-6, 2rem), 4vw, var(--sk-space-7, 3rem));
	background: var(--sk-pearl, #F7F4EF);
	border-left: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
}
.sk-carriers__intro-title {
	margin: 0;
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-display, "Season-Mix-Trial", serif) !important;
	font-size: var(--sk-fs-h5, 1.375rem);
	font-weight: var(--sk-weight-display, 400) !important;
	line-height: var(--sk-lh-snug, 1.25);
}
.sk-carriers__intro-desc {
	margin: 0;
	padding-bottom: 0 !important;   /* Salient p{padding-bottom:1.5em} */
	color: var(--sk-text-muted, rgba(27, 43, 50, .7));
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: calc(var(--sk-fs-body, 1.0625rem) * .9);
	line-height: var(--sk-lh-snug, 1.4);
}

/* --- Responsive ------------------------------------------------------ */

/* La colonna di testo ha un minimo di 260px: fra 721 e 860 restava inchiodata
   al minimo mentre i loghi si prendevano tutto il resto. L'impilamento va
   fatto qui; i loghi scendono a 2 colonne piu' sotto, a 720, dove serve. */
@media (max-width: 860px) {
	.sk-carriers__grid { grid-template-columns: 1fr; }
	.sk-carriers__intro {
		border-left: none;
		border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	}
}

@media (max-width: 720px) {
	.sk-carriers__grid { grid-template-columns: 1fr; }
	.sk-carriers__logos { grid-template-columns: repeat(2, 1fr); }
	.sk-carriers__logos .sk-carriers__logo:nth-child(3n) { border-right: 1px solid var(--sk-border, rgba(27, 43, 50, .12)); }
	.sk-carriers__logos .sk-carriers__logo:nth-child(2n) { border-right: none; }
	.sk-carriers__intro { border-left: none; border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12)); }
}

/* ===== journey-related.css ===== */
/* =====================================================================
   SKORPION — Journey Related (resort/tour correlati)
   SOLO LAYOUT. Tipografia/eyebrow/reveal → _sections-base.css.
   Griglia responsiva di schede (immagine + titolo + luogo + scopri).
   NIENTE prezzo (regola brand).
   ===================================================================== */

.sk-related {
	color: var(--sk-text, #1B2B32);
	padding-block: var(--sk-section-y, clamp(3.5rem, 2rem + 6vw, 7rem));
}

.sk-related__head { margin-bottom: clamp(var(--sk-space-6, 2rem), 4vw, var(--sk-space-8, 4rem)); }
.sk-related__eyebrow { display: block; margin: 0 0 var(--sk-space-4, 1rem); }
.sk-related__heading { max-width: 24ch; }

/* 3 colonne fisse (come da design); collassa su mobile. */
.sk-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Il respiro di 5.5rem regge fra tre colonne, ma a una colonna sola
	   diventano 88px di vuoto fra una scheda e l'altra. Fluido: da 1440px
	   in su vale esattamente 5.5rem come prima, sotto si stringe. */
	row-gap: clamp(2rem, 1rem + 5vw, 5.5rem);
	column-gap: 1rem;
}
@media (max-width: 900px) {
	.sk-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.sk-related__grid { grid-template-columns: 1fr; }
}

/* --- Scheda ---------------------------------------------------------- */
.sk-related__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
.sk-related__link:focus-visible {
	outline: 2px solid var(--sk-ocean-navy, #00265A);
	outline-offset: 3px;
}

.sk-related__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--sk-bg-alt, #EDE6DD);
	border-radius: var(--sk-radius, 0);
}
.sk-related__img {
	/* !important: Salient forza img { height:auto } e romperebbe il cover. */
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	transition: transform var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
.sk-related__link:hover .sk-related__img,
.sk-related__link:focus-visible .sk-related__img { transform: scale(1.04); }

/* Caption impilata: destinazione (piccola, maiuscolo) sopra, titolo resort sotto. */
.sk-related__foot {
	display: flex;
	flex-direction: column;
	padding-top: var(--sk-space-4, 1rem);
}
.sk-related__place {
	display: block;
	color: #757575;                        /* recede: il nome resort è il focus */
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .0em;
}
.sk-related__title {
	/* !important su margin/line-height/letter-spacing: Salient forza globalmente
	   "body h3, .row .col h3, ..." (font-size/line-height/letter-spacing) e
	   ".row .col h3" (margin-bottom) con selettori più specifici dei nostri —
	   quando la card finisce dentro una riga WPBakery (es. homepage) quelle
	   regole vincono senza !important, mentre nei template propri del plugin
	   (single/archivio, non wrappati in .row .col) non se ne accorge nessuno. */
	margin: calc(var(--sk-space-1, .25rem) / 2) 0 0 !important;   /* respiro dal titoletto sopra */
	color: #000;
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-weight: 400 !important;
	font-size: calc(var(--sk-fs-eyebrow, .8rem) * 1.618) !important;   /* proporzione aurea sul titoletto sopra */
	line-height: var(--sk-lh-snug, 1.2) !important;
	letter-spacing: -.035em !important;
}

@media (prefers-reduced-motion: reduce) {
	.sk-related__img { transition: none; }
}

/* ===== journey-modal.css ===== */
/* =====================================================================
   SKORPION — Journey Modal (popup form preventivo)
   <dialog> centrato su backdrop scuro; pannello chiaro, headline + form
   Forminator. Override Forminator SCOPED a .sk-modal (non tocca altri form).
   ===================================================================== */

.sk-modal {
	/* Drawer ANCORATO A DESTRA, tutta altezza, ~50% della viewport (stile CJM). */
	width: 50vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0 0 0 auto;           /* pin a destra, non centrato */
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--sk-pearl, #F7F4EF);
	color: var(--sk-text, #1B2B32);
	box-shadow: -24px 0 60px rgba(0, 38, 90, .22);
	overflow: hidden;
	/* Slide-in da destra (con animazione anche all'apertura via @starting-style). */
	transform: translateX(100%);
	transition:
		transform .42s var(--sk-ease, cubic-bezier(.22, 1, .36, 1)),
		overlay   .42s allow-discrete,
		display   .42s allow-discrete;
}
.sk-modal[open] {
	display: flex;
	flex-direction: column;
	transform: translateX(0);
}
@starting-style {
	.sk-modal[open] { transform: translateX(100%); }
}
.sk-modal::backdrop {
	background: rgba(27, 43, 50, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition:
		opacity .42s var(--sk-ease, ease),
		overlay .42s allow-discrete,
		display .42s allow-discrete;
}
.sk-modal[open]::backdrop { opacity: 1; }
@starting-style {
	.sk-modal[open]::backdrop { opacity: 0; }
}

/* Chiusura: tondo outline in alto a destra. */
.sk-modal__close {
	position: absolute;
	top: clamp(var(--sk-space-4, 1rem), 2vw, var(--sk-space-6, 2rem));
	right: clamp(var(--sk-space-4, 1rem), 2vw, var(--sk-space-6, 2rem));
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--sk-border, rgba(27, 43, 50, .2));
	border-radius: 50%;
	color: var(--sk-text-muted, #5a6b72);
	cursor: pointer;
	transition: background var(--sk-dur, .35s) var(--sk-ease), color var(--sk-dur, .35s) var(--sk-ease);
}
.sk-modal__close:hover,
.sk-modal__close:focus-visible { background: var(--sk-bg-alt, #EDE6DD); color: var(--sk-text, #1B2B32); }
.sk-modal__close:focus-visible { outline: 2px solid var(--sk-ocean-navy, #00265A); outline-offset: 2px; }

/* Contenuto scrollabile. */
.sk-modal__inner {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: clamp(var(--sk-space-6, 2rem), 5vw, var(--sk-space-9, 6rem));
	padding-top: clamp(var(--sk-space-7, 3rem), 6vw, var(--sk-space-9, 6rem));
}

/* Headline grande (sans, peso marcato — vince sul Geist 400 globale). */
.sk-modal__title {
	margin: 0 0 clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-7, 3rem));
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
	line-height: var(--sk-lh-tight, 1.08);
	max-width: 18ch;
}


/* Sotto 'tablet' il drawer prende quasi tutta la larghezza (50vw sarebbe troppo stretto). */
@media (max-width: 860px) {
	.sk-modal { width: min(92vw, 460px); }
}
@media (max-width: 560px) {
	.sk-modal { width: 100vw; max-width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
	.sk-modal { transition: none; transform: none; }
	.sk-modal::backdrop { transition: none; }
}

/* =====================================================================
   ARCHIVIO RESORT / HUB DESTINAZIONE — riusa le card .sk-related
   ===================================================================== */
.sk-archive {
	padding-block: var(--sk-section-y, clamp(3.5rem, 2rem + 6vw, 7rem));
}
.sk-archive__head { margin-bottom: var(--sk-space-8, 4rem); text-align: center; }
.sk-archive__title {
	margin: var(--sk-space-3, .75rem) 0 0;
	color: var(--sk-heading, var(--sk-ocean-navy, #00265A));
	font-size: var(--sk-fs-h1, clamp(2.25rem, 1.6rem + 3vw, 4rem));
	line-height: var(--sk-lh-tight, 1.08);
}
.sk-archive__desc { margin-top: var(--sk-space-4, 1rem); margin-inline: auto; }
.sk-archive__grid { margin-bottom: var(--sk-space-8, 4rem); }
.sk-archive__pagination { text-align: center; }
.sk-archive__pagination .page-numbers {
	display: inline-flex;
	padding: var(--sk-space-2, .5rem) var(--sk-space-4, 1rem);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	color: var(--sk-text, #1B2B32);
	text-decoration: none;
	border: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	border-radius: var(--sk-radius-sm, 5px);
}
.sk-archive__pagination .page-numbers.current {
	background: var(--sk-ocean-navy, #00265A);
	color: var(--sk-text-invert, #F7F4EF);
	border-color: var(--sk-ocean-navy, #00265A);
}
.sk-archive__empty { text-align: center; color: var(--sk-text-muted, #5a6b72); }

/* Pagine brand con più destinazioni: card raggruppate sotto un sottotitolo
   per destinazione (sostituisce la tendina di filtro, rimossa perché con
   l'ordine "evidenza + numero" mescolava destinazioni diverse in griglia). */
.sk-hub__destgroups {
	display: flex;
	flex-direction: column;
	gap: clamp(var(--sk-space-6, 2rem), 3vw, var(--sk-space-7, 3rem));
}
.sk-hub__destgroup-title {
	margin: 0 0 var(--sk-space-5, 1.5rem);
	color: var(--sk-text-muted, #5a6b72);
}

/* Brand presente in una sola destinazione: nota al posto del filtro. */
.sk-hub__dest-note {
	margin-bottom: var(--sk-space-4, 1rem);
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .75rem);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sk-text-muted, #5a6b72);
}
.sk-hub__dest-note a {
	color: var(--sk-ocean-navy, #00265A);
	text-decoration: underline;
	text-underline-offset: .2em;
}
.sk-hub__dest-note a:hover,
.sk-hub__dest-note a:focus-visible { color: var(--sk-cta, #1B6CA8); }

/* Sentinella del caricamento progressivo.
   L'altezza NON è decorativa: un elemento di area nulla non produce
   un'intersezione affidabile, quindi l'IntersectionObserver non scatterebbe
   mai e le pagine successive non verrebbero mai richieste. */
.sk-archive__more {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	margin-top: calc( var(--sk-space-8, 4rem) * -1 );
	margin-bottom: var(--sk-space-6, 2rem);
}
.sk-archive__more[hidden] { display: none; }
.sk-archive__more-spinner {
	width: 26px;
	height: 26px;
	border: 2px solid var(--sk-border, rgba(27, 43, 50, .12));
	border-top-color: var(--sk-cta, #1B6CA8);
	border-radius: 50%;
	opacity: 0;
	transition: opacity var(--sk-dur, .25s) var(--sk-ease, ease);
}
.sk-archive__more.is-loading .sk-archive__more-spinner {
	opacity: 1;
	animation: sk-archive-spin .8s linear infinite;
}
@keyframes sk-archive-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.sk-archive__more.is-loading .sk-archive__more-spinner { animation: none; }
}

/* =====================================================================
   SKORPION — Indice Destinazioni (/destinazioni/) + Offerte (/offerte/)
   Testata "esplora per parole" (stile here-away): kicker piccolo centrato
   + lista inline di destinazioni cliccabili separate da virgola. Le voci
   sono grigie (#AAAAAA, stesso grigio inattivo dell'Explorer, richiesto
   dal design) e passano a Ocean Navy su hover/focus. In /offerte/ le
   parole filtrano per destinazione (.is-current = filtro attivo); in coda
   la selezione "Viaggi di nozze" (.sk-archive__nozze) riusa la testata
   con titolo statico .sk-dindex__title.
   SOLO LAYOUT: tipografia base, reveal e griglia card → _sections-base.css
   e journey-related.css. Solo token var(--sk-*) con fallback.
   ===================================================================== */

.sk-dindex {
	margin-bottom: clamp(var(--sk-space-6, 2rem), 5vw, var(--sk-space-8, 4rem));
	text-align: center;
}

.sk-dindex__kicker {
	margin: 0 0 clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-6, 2rem));
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-body, 1.0625rem);
}
.sk-dindex__kicker a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .25em;
	transition: color var(--sk-dur, .35s) var(--sk-ease, ease);
}
.sk-dindex__kicker a:hover,
.sk-dindex__kicker a:focus-visible { color: var(--sk-cta, #0068B1); }
.sk-dindex__kicker a:focus-visible {
	outline: 2px solid var(--sk-cta, #0068B1);
	outline-offset: 3px;
}

/* Lista inline: le parole scorrono come un paragrafo centrato. */
.sk-dindex__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1180px;
}
.sk-dindex__list .sk-dindex__item,
.sk-dindex__item {
	display: inline !important;
	margin: 0;
	padding: 0;
	list-style: none !important;
}
.sk-dindex__list .sk-dindex__item::before,
.sk-dindex__item::before,
.sk-dindex__list .sk-dindex__item::marker,
.sk-dindex__item::marker {
	display: none !important;
	content: none !important;
}
/* Virgola separatrice generata via CSS: nessun markup extra. */
.sk-dindex__item:not(:last-child)::after {
	content: ", ";
	color: #AAAAAA; /* grigio inattivo Explorer (da design) */
	font-size: clamp(1.625rem, 1.05rem + 2.4vw, 3.125rem);
	line-height: 1.35;
}
.sk-dindex__word {
	color: #AAAAAA; /* stato inattivo, come Explorer (da design) */
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: clamp(1.625rem, 1.05rem + 2.4vw, 3.125rem);
	font-weight: 400;
	line-height: 1.35;
	text-decoration: none;
	transition: color 450ms cubic-bezier(.4, 0, .2, 1);
	letter-spacing: -0.05em;
}
.sk-dindex__word:hover,
.sk-dindex__word:focus-visible,
.sk-dindex__word.is-current { color: var(--sk-heading, #00265A); }
.sk-dindex__word:focus-visible {
	outline: 2px solid var(--sk-cta, #0068B1);
	outline-offset: 3px;
}

/* Titolo statico con la stessa resa delle parole, ma in navy (es. la
   sezione "Viaggi di nozze" in /offerte/). !important sul peso: Salient
   stila gli h2 globalmente. */
.sk-dindex__title {
	margin: 0;
	color: var(--sk-heading, #00265A);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: clamp(1.625rem, 1.05rem + 2.4vw, 3.125rem);
	font-weight: 400 !important;
	line-height: 1.35;
}

/* =====================================================================
   SK-FILTER-BAR — barra filtro compatta (stile screenshot riferimento).
   Label "Filtro" a sinistra + chip link/button a destra.
   Usata su: taxonomy hub destinazione (filtro JS client-side) e
   archivio offerte (filtro URL per destinazione).
   ===================================================================== */
.sk-filter-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sk-space-3, .75rem) var(--sk-space-5, 1.5rem);
	margin-bottom: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-7, 2.5rem));
	padding-bottom: var(--sk-space-4, 1rem);
	border-bottom: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
}
.sk-filter-bar__label {
	flex-shrink: 0;
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-sm, .875rem);
	font-weight: 500;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: .3em;
	text-decoration-thickness: 1px;
}
.sk-filter-bar__options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sk-space-2, .5rem) var(--sk-space-4, 1rem);
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.sk-filter-bar .sk-filter-bar__options li,
.sk-filter-bar__options li {
	list-style: none !important;
	display: flex !important;
	align-items: center;
	margin: 0;
	padding: 0;
}
.sk-filter-bar .sk-filter-bar__options li::before,
.sk-filter-bar__options li::before,
.sk-filter-bar .sk-filter-bar__options li::marker,
.sk-filter-bar__options li::marker {
	display: none !important;
	content: none !important;
}
.sk-filter-chip {
	display: inline-block;
	color: var(--sk-text-muted, #5a6b72);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-sm, .875rem);
	font-weight: 400;
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: color var(--sk-dur, .35s) var(--sk-ease, ease);
}
.sk-filter-chip:hover,
.sk-filter-chip:focus-visible,
.sk-filter-chip.is-active {
	color: var(--sk-heading, #00265A);
}
.sk-filter-chip.is-active {
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: .25em;
	text-decoration-thickness: 1px;
}
.sk-filter-chip:focus-visible {
	outline: 2px solid var(--sk-cta, #0068B1);
	outline-offset: 3px;
	border-radius: 2px;
}
/* Separatore "/" tra le voci */
.sk-filter-bar__options li:not(:last-child)::after {
	content: "/";
	margin-left: var(--sk-space-4, 1rem);
	color: var(--sk-border, rgba(27, 43, 50, .25));
	font-size: var(--sk-fs-sm, .875rem);
	pointer-events: none;
}
.sk-archive__empty--filter {
	grid-column: 1 / -1;
	color: var(--sk-text-muted, #5a6b72);
	padding-block: var(--sk-space-6, 2rem);
}
@media (prefers-reduced-motion: reduce) {
	.sk-filter-chip { transition: none; }
}

/* Testo solo screen reader (es. h1 dell'indice). */
.sk-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sk-dindex__word,
	.sk-dindex__kicker a { transition: none; }
}

/* =====================================================================
   SKORPION — Hub Destinazione (/destinazioni/{slug}/)
   Sezioni proprie della pagina raccoglitore destinazione:
   1) .sk-jhero--hub  → ritocchi minimi alla hero journey riusata
   2) .sk-dintro      → introduzione editoriale (statement serif + collage
                        di 3 foto sfalsate + pillole sintetiche)
   3) .sk-hub__grid   → sezione griglia resort (card journey-related)
   4) estensioni .sk-offers per le card-resort linkate nel rail del hub
   SOLO LAYOUT: tipografia/reveal/bottoni → _sections-base.css; rail e
   card offerta → journey-offers.css; card griglia → journey-related.css.
   Solo token var(--sk-*) con fallback.
   ===================================================================== */

/* --- 1. Hero hub ------------------------------------------------------ */
/* Claim editoriale: respiro un po' più largo del sottotitolo resort. */
.sk-jhero--hub .sk-jhero__desc { max-width: 56ch; }

/* --- 2. Introduzione editoriale --------------------------------------- */
.sk-dintro {
	padding-block: var(--sk-section-y, clamp(3.5rem, 2rem + 6vw, 7rem));
	text-align: center;
}

/* Statement: primo paragrafo dell'introduzione, serif grande centrato. */
.sk-dintro__statement {
	margin: 0 auto;
	max-width: 26ch;
	color: var(--sk-heading, #00265A);
	font-size: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
	line-height: 1.2;
	text-wrap: balance;
}

/* Collage: 3 foto sfalsate — laterali più piccole e fuori asse,
   centrale più alta (eco del riferimento editoriale). */
.sk-dintro__collage {
	display: grid;
	grid-template-columns: 1fr 1.3fr 1fr;
	align-items: center;
	gap: clamp(var(--sk-space-3, .75rem), 2.5vw, var(--sk-space-6, 2rem));
	max-width: 1060px;
	margin: clamp(var(--sk-space-7, 3rem), 6vw, var(--sk-space-9, 6rem)) auto 0;
}
.sk-dintro__fig {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--sk-bg-alt, #EDE6DD);
	border-radius: var(--sk-radius, 0);
}
.sk-dintro__fig--1 { aspect-ratio: 4 / 5; transform: translateY(7%); }
.sk-dintro__fig--2 { aspect-ratio: 3 / 4; }
.sk-dintro__fig--3 { aspect-ratio: 4 / 5; transform: translateY(-7%); }
.sk-dintro__img {
	/* !important: Salient forza img { height:auto } e romperebbe il cover. */
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
}
/* Collage con 1–2 foto: si riadatta senza buchi (niente celle vuote). */
.sk-dintro__collage--1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
.sk-dintro__collage--1 .sk-dintro__fig { transform: none; }
.sk-dintro__collage--2 { grid-template-columns: 1fr 1fr; max-width: 880px; }

/* Paragrafi successivi: prosa centrata sotto il collage. */
.sk-dintro__more {
	max-width: 62ch;
	margin: clamp(var(--sk-space-6, 2rem), 5vw, var(--sk-space-8, 4rem)) auto 0;
}
.sk-dintro__more .sk-prose { margin-inline: auto; }

/* Pillole sintetiche: hairline in testa, label brand + riga breve. */
.sk-dintro__pills {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(var(--sk-space-5, 1.5rem), 4vw, var(--sk-space-8, 4rem));
	max-width: 1060px;
	margin: clamp(var(--sk-space-7, 3rem), 6vw, var(--sk-space-9, 6rem)) auto 0;
	padding: 0;
	text-align: left;
}
/* 1–2 pillole: tante colonne quanti elementi, centrate. */
.sk-dintro__pills--1 { grid-template-columns: minmax(0, 340px); justify-content: center; }
.sk-dintro__pills--2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
.sk-dintro__pill {
	margin: 0;
	padding-top: var(--sk-space-4, 1rem);
	border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
}
.sk-dintro__pill-label {
	display: block;
	color: var(--sk-text-muted, #5a6b72);
	font-size: .75rem;
}
.sk-dintro__pill-text {
	margin: var(--sk-space-3, .75rem) 0 0;
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-body, 1.0625rem);
	line-height: var(--sk-lh-body, 1.6);
}

@media (max-width: 720px) {
	.sk-dintro__collage { gap: var(--sk-space-2, .5rem); }
	.sk-dintro__pills { grid-template-columns: 1fr; gap: var(--sk-space-5, 1.5rem); }
	.sk-dintro__pills--2 { grid-template-columns: 1fr; }

	/* Tre colonne su un telefono davano foto da ~99px: la composizione
	   editoriale c'era ancora ma non si leggeva piu' niente. Qui la centrale
	   guida a tutta larghezza e le due laterali si affiancano sotto.
	   Posizionamento esplicito: l'ordine nel DOM e' 1-2-3, senza grid-row la
	   centrale finirebbe in seconda riga. Solo il collage pieno: le varianti
	   a 1 e 2 foto hanno gia' il loro layout. */
	.sk-dintro__collage:not(.sk-dintro__collage--1):not(.sk-dintro__collage--2) {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
	.sk-dintro__collage:not(.sk-dintro__collage--1):not(.sk-dintro__collage--2) .sk-dintro__fig--2 {
		grid-row: 1;
		grid-column: 1 / -1;
		aspect-ratio: 16 / 10;
	}
	.sk-dintro__collage:not(.sk-dintro__collage--1):not(.sk-dintro__collage--2) .sk-dintro__fig--1 {
		grid-row: 2;
		grid-column: 1;
		transform: translateY(3%);   /* a questa scala il 7% era un salto di 2px: non si leggeva */
	}
	.sk-dintro__collage:not(.sk-dintro__collage--1):not(.sk-dintro__collage--2) .sk-dintro__fig--3 {
		grid-row: 2;
		grid-column: 2;
		transform: translateY(-3%);
	}
}

/* --- 3. Griglia resort del hub ---------------------------------------- */
.sk-hub__grid {
	padding-block: var(--sk-section-y, clamp(3.5rem, 2rem + 6vw, 7rem));
	scroll-margin-top: var(--header-nav-height, 78px);   /* target di #resort: link "scroll to explore" della hub-hero */
}

/* Explorer "Esplora altre destinazioni": stacca visivamente dalla section nozze
   sopra E da quello che segue sotto (stesso respiro sui due lati). */
.sk-hub__explorer-wrap {
	margin-block: var(--sk-section-y, clamp(3.5rem, 2rem + 6vw, 7rem));
}

/* --- 4. Rail offerte del hub: card-resort linkate ---------------------- */
/* L'intera card è un link alla scheda resort (ancora #offerte). */
.sk-offer__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.sk-offer__link:hover .sk-offer__img,
.sk-offer__link:focus-visible .sk-offer__img { transform: scale(1.04); }
.sk-offer__link:focus-visible {
	outline: 2px solid var(--sk-ocean-navy, #00265A);
	outline-offset: 3px;
}

/* Nome resort sopra il titolo offerta (come il "place" delle card griglia). */
.sk-offer__place {
	display: block;
	margin-bottom: var(--sk-space-2, .5rem);
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	font-weight: 500;
	text-transform: uppercase;
}

/* "Scopri": stessa resa del link Dettagli, ma è uno span dentro al link card. */
.sk-offer__scopri {
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-2, .5rem);
	flex: none;
	color: var(--sk-cta, #0068B1);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	white-space: nowrap;
}
.sk-offer__scopri svg { transition: transform var(--sk-dur, .35s) var(--sk-ease, ease); }
.sk-offer__link:hover .sk-offer__scopri svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.sk-offer__scopri svg { transition: none; }
}

/* --- Global section embeddata (teaser lista nozze) -------------------- */
/* Il renderer del plugin avvolge la section nei wrapper nativi di Salient
   (.container-wrap > .container.main-content): servono ai calcoli JS delle
   righe full-width, ma da wrapper di pagina portano padding e fondo propri
   (CSS dinamico del tema, nectar_top_bottom_padding_calc) che qui vanno
   azzerati. !important: vince sul CSS dinamico generato dal tema. */
.sk-gsection.container-wrap {
	padding: 0 !important;
	background: transparent !important;
}
.sk-gsection > .main-content {
	padding-block: 0 !important;
	margin-block: 0 !important;
}

/* --- Explorer nel menu off-canvas Salient ---------------------------- */
/* L'Explorer ([skorpion_explorer]) vive dentro #slide-out-widget-area, con le
   colonne widget subito sotto: gli ultimi item finivano appiccicati. Diamo
   respiro sopra e sotto SENZA toccare la snippet (spaziatura scopata all'off-canvas). */
#slide-out-widget-area .sk-explorer {
	margin-block: clamp(var(--sk-space-6, 2rem), 5vw, var(--sk-space-9, 6rem));
}
#slide-out-widget-area .sk-explorer__inner {
	min-height: 0;   /* nel menu non serve l'altezza minima da 72vh: evita il crampo in basso */
}

/* ===== brand-grid.css ===== */
/* =====================================================================
   SKORPION — Griglia brand [skorpion_brands]
   Card immersive: foto featured del brand a tutta cella + overlay scuro,
   logo del brand centrato in bianco (filtro), CTA "Mostra resort" in basso.
   Ogni card linka alla pagina del brand. Solo token var(--sk-*).
   ===================================================================== */
.sk-brandgrid { width: 100%; }
.sk-brandgrid__head { margin-bottom: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-7, 3rem)); }
.sk-brandgrid__title { max-width: 24ch; }

.sk-brandgrid__grid {
	display: grid;
	grid-template-columns: repeat(var(--sk-brandgrid-cols, 4), 1fr);
	gap: clamp(var(--sk-space-3, .75rem), 1.5vw, var(--sk-space-5, 1.5rem));
	margin: 0;
	padding: 0;
	list-style: none;
}
.sk-brandgrid__cell { margin: 0; list-style: none; }
.sk-brandgrid__cell::before { display: none !important; content: none !important; }

/* Card = link immersivo, foto a tutta cella. */
.sk-brandgrid__link {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--sk-radius-sm, 5px);
	background: var(--sk-ocean-navy, #00265A);   /* fallback senza foto */
	text-decoration: none;
	isolation: isolate;
}
.sk-brandgrid__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	transition: transform var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
.sk-brandgrid__link:hover .sk-brandgrid__photo,
.sk-brandgrid__link:focus-visible .sk-brandgrid__photo { transform: scale(1.05); }

.sk-brandgrid__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(0, 17, 40, .56) 0%, rgba(0, 17, 40, .42) 45%, rgba(0, 17, 40, .88) 100%);
}
.sk-brandgrid__cell--no-photo .sk-brandgrid__overlay {
	background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 17, 40, .35));
}

/* Contenuto sopra la foto: logo centrato, CTA in basso. */
.sk-brandgrid__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-6, 2rem));
	text-align: center;
	/* Esplicito, non ereditato dal tema: con content-box l'altezza sarebbe
	   100% del link PIÙ il padding, sforando la card ad aspect-ratio fissa
	   (che ha overflow:hidden) e tagliando via la CTA in fondo. */
	box-sizing: border-box;
}
.sk-brandgrid__logo {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* Senza questo il logo NON si restringe (min-height:auto è il default dei
	   flex item) e, quando il piede va a due righe su card strette, il
	   contenuto sfora dalla cella portando la CTA fuori dalla card. */
	min-height: 0;
}
.sk-brandgrid__logo img {
	display: block;
	/* Box logo: i loghi lunghi si adattano in larghezza, i quadrati sfruttano
	   tutta l'altezza (object-fit:contain) → i quadrati risultano più grandi. */
	width: clamp(130px, 48%, 210px) !important;
	height: clamp(56px, 7vw, 84px) !important;
	max-width: 82% !important;
	object-fit: contain;
	/* Logo sempre bianco sopra la foto. */
	filter: brightness(0) invert(1);
}
.sk-brandgrid__logo-text {
	color: #fff;
	font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
	line-height: 1.1;
}
/* Riga in fondo alla card: conteggio destinazioni + CTA, allineati. */
.sk-brandgrid__foot {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--sk-space-2, .5rem) var(--sk-space-4, 1rem);
}
.sk-brandgrid__badge {
	display: inline-flex;
	align-items: center;
	padding: .3em .7em;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-size: calc( var(--sk-fs-eyebrow, .8125rem) * .92 );
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}
.sk-brandgrid__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--sk-space-2, .5rem);
	color: #fff;
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-weight: 700;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	text-transform: uppercase;
	line-height: 1;
}
.sk-brandgrid__link:hover .sk-brandgrid__cta { text-decoration: underline; text-underline-offset: .25em; }
.sk-brandgrid__arrow { flex: 0 0 auto; transition: transform var(--sk-dur, .35s) var(--sk-ease, ease); }
.sk-brandgrid__link:hover .sk-brandgrid__arrow { transform: translateX(4px); }
.sk-brandgrid__link:focus-visible { outline: 3px solid var(--sk-copper-sand, #C96F4A); outline-offset: 3px; }

/* --- Responsive ----------------------------------------------------- */
@media (max-width: 1100px) { .sk-brandgrid__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .sk-brandgrid__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .sk-brandgrid__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
	.sk-brandgrid__photo, .sk-brandgrid__arrow { transition: none; }
}

/* =====================================================================
   SKORPION — Pagine informative (Notizie utili / Scheda tecnica /
   Assicurazioni). Layout editoriale su fondo Pearl: indice in alto o a
   lato, testi in colonna stretta per la leggibilità dei testi lunghi.
   ===================================================================== */
.sk-info {
	padding: var(--sk-section-y, clamp(3rem, 7vw, 6rem)) 0;
	background: var(--sk-bg, #F7F4EF);
	color: var(--sk-text, #1B2B32);
}
.sk-info__head { margin-bottom: clamp(var(--sk-space-6, 2rem), 5vw, var(--sk-space-8, 4rem)); }
.sk-info__eyebrow { margin-bottom: var(--sk-space-3, .75rem); }
.sk-info__title { margin: 0; }
.sk-info__intro {
	max-width: 72ch;
	margin-top: var(--sk-space-5, 1.5rem);
	font-size: var(--sk-fs-lead, 1.125rem);
	line-height: var(--sk-lh-body, 1.6);
	color: var(--sk-text-muted, #5a6b72);
}
.sk-info__empty { color: var(--sk-text-muted, #5a6b72); }
.sk-info__cta { margin: var(--sk-space-6, 2rem) 0; }

/* Indice orizzontale (Notizie utili) */
.sk-info__index {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: var(--sk-space-4, 1rem) 0;
	margin-bottom: var(--sk-space-7, 2.5rem);
	background: var(--sk-bg, #F7F4EF);
	border-bottom: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
}
.sk-info__index ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-space-2, .5rem) var(--sk-space-4, 1rem);
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.sk-info__index li { list-style: none !important; margin: 0; }
.sk-info__index li::before, .sk-info__index li::marker { content: none !important; display: none !important; }
.sk-info__index a {
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-sm, .875rem);
	color: var(--sk-text-muted, #5a6b72);
	text-decoration: none;
	transition: color var(--sk-dur, .35s) var(--sk-ease, ease);
}
.sk-info__index a:hover, .sk-info__index a:focus-visible { color: var(--sk-cta, #1B6CA8); }

/* Blocco per destinazione */
.sk-info__paese {
	padding-top: clamp(var(--sk-space-6, 2rem), 4vw, var(--sk-space-8, 4rem));
	scroll-margin-top: 6rem;
}
.sk-info__paese + .sk-info__paese { border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12)); }
.sk-info__paese-nome {
	margin: 0 0 var(--sk-space-5, 1.5rem);
	font-size: var(--sk-fs-h2, clamp(1.75rem, 4vw, 2.75rem));
	line-height: var(--sk-lh-tight, 1.08);
	color: var(--sk-ocean-navy, #00265A);
}

/* Griglia definizioni: etichetta + testo */
.sk-info__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sk-space-5, 1.5rem);
	margin: 0;
}
.sk-info__item {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sk-space-2, .5rem);
	padding-bottom: var(--sk-space-5, 1.5rem);
	border-bottom: 1px solid var(--sk-border, rgba(27, 43, 50, .08));
	/* Un grid item, per default, non si restringe sotto il min-content del
	   suo contenuto: un URL lungo senza spazi (i link ai portali visto in
	   diverse destinazioni) farebbe crescere l'intera riga oltre la
	   larghezza dello schermo su mobile. */
	min-width: 0;
}
.sk-info__label {
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sk-copper-sand, #C96F4A);
}
.sk-info__testo {
	margin: 0;
	/* rem e non ch: nella griglia "etichetta + testo" (Notizie utili) e nel
	   corpo a due colonne (Scheda tecnica) la colonna disponibile è già
	   larga quanto serve — un limite in ch qui lasciava una fascia vuota a
	   destra del testo. 62rem tiene comunque la riga leggibile sui monitor
	   molto larghi, dove la colonna supererebbe altrimenti i 90+ caratteri. */
	max-width: 62rem;
	line-height: var(--sk-lh-body, 1.6);
	/* Stessa ragione del min-width:0 su .sk-info__item, ma qui serve anche
	   nel layout a due colonne della Scheda tecnica (dove .sk-info__testo
	   stesso è un grid item): un URL o un numero di polizza lunghi devono
	   spezzarsi invece di sfondare la colonna. */
	min-width: 0;
	overflow-wrap: break-word;
}
.sk-info__testo p { margin: 0 0 var(--sk-space-3, .75rem); }
.sk-info__testo p:last-child { margin-bottom: 0; }
.sk-info__backtop { margin-top: var(--sk-space-5, 1.5rem); }
.sk-info__backtop a {
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-sm, .875rem);
	color: var(--sk-text-muted, #5a6b72);
}

@media (min-width: 860px) {
	.sk-info__item { grid-template-columns: 15rem 1fr; gap: var(--sk-space-6, 2rem); align-items: start; }
}

/* Scheda tecnica: indice laterale + corpo */
.sk-info__cols { display: grid; grid-template-columns: 1fr; gap: var(--sk-space-7, 2.5rem); }
/* Stesso motivo del min-width:0 su .sk-info__item: senza, un titolo o un
   link lunghi e senza spazi nell'indice o nel corpo farebbero sfondare la
   colonna anche se il contenuto attorno andrebbe regolarmente a capo. */
.sk-info__cols > * { min-width: 0; }
@media (min-width: 960px) {
	.sk-info__cols { grid-template-columns: 16rem 1fr; gap: var(--sk-space-8, 4rem); }
	.sk-info__aside { position: sticky; top: 6rem; align-self: start; }
}
.sk-info__aside-label {
	margin: 0 0 var(--sk-space-4, 1rem);
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .75rem);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sk-copper-sand, #C96F4A);
}
.sk-info__aside ul {
	list-style: none !important;
	margin: 0;
	padding: 0;
	/* Rigo verticale che raccoglie i link in un'unica colonna leggibile,
	   staccata dal corpo del testo accanto. */
	border-left: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
}
.sk-info__aside li { list-style: none !important; margin: 0; }
.sk-info__aside li::before, .sk-info__aside li::marker { content: none !important; display: none !important; }
.sk-info__aside a {
	position: relative;
	display: block;
	margin-left: -1px; /* si sovrappone al border-left dell'ul, sotto al proprio indicatore */
	padding: var(--sk-space-2, .5rem) 0 var(--sk-space-2, .5rem) var(--sk-space-4, 1rem);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-sm, .875rem);
	line-height: var(--sk-lh-snug, 1.5);
	color: var(--sk-text-muted, #5a6b72);
	text-decoration: none;
	border-left: 1px solid transparent;
	transition:
		color var(--sk-dur, .35s) var(--sk-ease, ease),
		border-color var(--sk-dur, .35s) var(--sk-ease, ease);
}
.sk-info__aside a:hover,
.sk-info__aside a:focus-visible {
	color: var(--sk-ocean-navy, #00265A);
	border-left-color: var(--sk-copper-sand, #C96F4A);
}

.sk-info__sezione { scroll-margin-top: 6rem; }
.sk-info__sezione + .sk-info__sezione { margin-top: clamp(var(--sk-space-6, 2rem), 4vw, var(--sk-space-7, 2.5rem)); }
.sk-info__sezione-titolo {
	margin: 0 0 var(--sk-space-3, .75rem);
	font-size: var(--sk-fs-h3, 1.25rem);
	line-height: var(--sk-lh-snug, 1.25);
	color: var(--sk-ocean-navy, #00265A);
}

/* Tabella premi */
.sk-info__tablewrap { overflow-x: auto; }
.sk-info__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sk-fs-sm, .9375rem);
}
.sk-info__table th,
.sk-info__table td {
	padding: var(--sk-space-3, .75rem) var(--sk-space-4, 1rem);
	text-align: left;
	border-bottom: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
}
.sk-info__table th {
	font-family: var(--sk-font-label, "sweet-sans-pro", sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sk-ocean-navy, #00265A);
	white-space: nowrap;
}

/* Assicurazioni: recapiti + avvertenza */
.sk-info__contatti {
	margin: var(--sk-space-6, 2rem) 0;
	padding: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-6, 2rem));
	background: var(--sk-bg-alt, #EDE6DD);
	border-radius: var(--sk-radius, 10px);
}
.sk-info__contatti-title { margin: 0 0 var(--sk-space-4, 1rem); color: var(--sk-ocean-navy, #00265A); }
.sk-info__contatti-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-space-5, 1.5rem) var(--sk-space-8, 4rem);
	list-style: none !important;
	margin: 0;
	padding: 0;
}
.sk-info__contatti-list li { list-style: none !important; margin: 0; }
.sk-info__contatti-list li::before, .sk-info__contatti-list li::marker { content: none !important; display: none !important; }
.sk-info__contatti-label {
	display: block;
	margin-bottom: .2em;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--sk-text-muted, #5a6b72);
}
.sk-info__tel {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 500;
	color: var(--sk-ocean-navy, #00265A);
	text-decoration: none;
	white-space: nowrap;
}
.sk-info__tel:hover, .sk-info__tel:focus-visible { color: var(--sk-cta, #1B6CA8); text-decoration: underline; }

.sk-info__avvertenza {
	margin: var(--sk-space-7, 2.5rem) 0 0;
	padding: clamp(var(--sk-space-4, 1rem), 3vw, var(--sk-space-5, 1.5rem));
	border-left: 3px solid var(--sk-copper-sand, #C96F4A);
	background: rgba(201, 111, 74, .06);
	border-radius: 0 var(--sk-radius-sm, 5px) var(--sk-radius-sm, 5px) 0;
}
.sk-info__avvertenza-title { margin: 0 0 var(--sk-space-2, .5rem); color: var(--sk-copper-sand, #C96F4A); }
.sk-info__avvertenza p:last-child { margin: 0; }

.sk-info__updated {
	margin-top: clamp(var(--sk-space-7, 2.5rem), 5vw, var(--sk-space-8, 4rem));
	padding-top: var(--sk-space-4, 1rem);
	border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	font-size: var(--sk-fs-sm, .875rem);
	color: var(--sk-text-muted, #5a6b72);
}

/* =====================================================================
   ISPIRAZIONI — coppie che sono già partite  [skorpion_ispirazioni]
   Composizione asimmetrica, NON una griglia di card: una lead 4:5 con
   citazione e barra dei contributi, due secondarie 3:2 come didascalie,
   link di coda in fondo alla colonna destra.
   Markup: includes/functions-ispirazioni.php
   SOLO LAYOUT. Tipografia, .sk-shell e reveal stanno più su in questo file.
   ===================================================================== */

.sk-isp { padding-block: var(--sk-section-y, clamp(3.5rem, 2rem + 6vw, 7rem)); }

.sk-isp__head {
	padding-bottom: var(--sk-space-5, 1.5rem);
	border-bottom: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	margin-bottom: clamp(var(--sk-space-6, 2rem), 4vw, var(--sk-space-8, 4rem));
}
/* !important su font-size/line-height: senza, Salient sovrascrive la scala
   dei titoli di sezione (vedi .claude/LESSONS.md #5). */
.sk-isp__heading {
	margin: 0 !important;
	max-width: 20ch;
	color: var(--sk-heading, #00265A);
	font-size: var(--sk-fs-h2, clamp(1.875rem, 1.4rem + 2vw, 3rem)) !important;
	line-height: var(--sk-lh-tight, 1.08) !important;
	letter-spacing: -.015em;
	text-wrap: balance;
}

.sk-isp__layout {
	display: grid;
	grid-template-columns: 1.45fr 1fr;
	gap: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-8, 4rem));
	align-items: stretch;
}
/* La terza riga 1fr assorbe la differenza di altezza fra la lead (4:5) e le
   due secondarie (3:2): il link di coda ci si appoggia in fondo invece di
   lasciare un buco di aria morta accanto alla citazione. */
.sk-isp__side {
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-7, 3rem));
}

/* L'item è un <a> solo se ha una destinazione vera: niente href="#". */
.sk-isp__item { display: block; color: inherit; text-decoration: none; }
a.sk-isp__item:focus-visible { outline: 2px solid var(--sk-ocean-navy, #00265A); outline-offset: 4px; }

.sk-isp__fig {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--sk-bg-alt, #EDE6DD);
	border-radius: var(--sk-radius, 0);
}
.sk-isp__fig--lead { aspect-ratio: 4 / 5; }
.sk-isp__fig--side { aspect-ratio: 3 / 2; }
.sk-isp__img {
	/* !important: Salient forza img { height:auto } e romperebbe il cover. */
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	transition: transform .6s var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
a.sk-isp__item:hover .sk-isp__img,
a.sk-isp__item:focus-visible .sk-isp__img { transform: scale(1.03); }

/* --- Barra contributi: il dato che la sezione esiste per dire --------- */
.sk-isp__contrib {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: clamp(var(--sk-space-6, 2rem), 5vw, var(--sk-space-8, 4rem)) clamp(var(--sk-space-4, 1rem), 2vw, var(--sk-space-5, 1.5rem)) clamp(var(--sk-space-4, 1rem), 2vw, var(--sk-space-5, 1.5rem));
	background: linear-gradient(0deg, rgba(0, 17, 40, .88) 0%, rgba(0, 17, 40, .58) 45%, rgba(0, 17, 40, 0) 100%);
	color: var(--sk-text-invert, #F7F4EF);
	pointer-events: none;
}
/* gap 6px, non 3: a 3px i segmenti si leggono come una riga unica e il
   conteggio dei contributi sparisce. */
.sk-isp__segs { display: flex; gap: 6px; margin-bottom: var(--sk-space-3, .75rem); }
/* Default PIENO: se il JS non gira, la lista non deve leggersi come
   incompleta. Lo stato vuoto (quello che poi si riempie) è opt-in via .sk-js,
   che stampa skorpion_ispirazioni_js_flag() inline prima della sezione. */
.sk-isp__segs > i { flex: 1 1 0; height: 4px; background: var(--sk-copper-sand, #C96F4A); }
.sk-js .sk-isp__segs > i {
	background: rgba(247, 244, 239, .28);
	transition: background-color .5s var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
	transition-delay: calc(var(--i, 0) * 45ms);
}
/* .is-full lo mette lo stesso script inline che ha messo .sk-js: nessuna
   dipendenza dal reveal condiviso, che vive in un altro punto del file. */
.sk-js .sk-isp__contrib.is-full .sk-isp__segs > i { background: var(--sk-copper-sand, #C96F4A); }
.sk-isp__contrib-cap {
	display: block;
	color: rgba(247, 244, 239, .94);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	letter-spacing: .02em;
}

/* --- Didascalie ------------------------------------------------------- */
.sk-isp__body { padding-top: var(--sk-space-5, 1.5rem); }
.sk-isp__side .sk-isp__body { padding-top: var(--sk-space-4, 1rem); }
.sk-isp__name {
	margin: 0 !important;
	color: var(--sk-heading, #00265A);
	font-size: var(--sk-fs-h3, clamp(1.375rem, 1.2rem + .9vw, 1.75rem)) !important;
	line-height: var(--sk-lh-snug, 1.25) !important;
	letter-spacing: -.02em;
}
.sk-isp__name--sm { font-size: calc(var(--sk-fs-eyebrow, .8125rem) * 1.618) !important; }
.sk-isp__meta {
	margin: var(--sk-space-2, .5rem) 0 0;
	color: var(--sk-text-muted, #5a6b72);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.sk-isp__quote {
	margin: var(--sk-space-4, 1rem) 0 0;
	max-width: 46ch;
	color: var(--sk-text, #1B2B32);
	font-family: var(--sk-font-display, "Season-Mix-Trial", Georgia, serif) !important;
	font-weight: var(--sk-weight-display, 300) !important;
	font-size: var(--sk-fs-lead, clamp(1.125rem, 1rem + .6vw, 1.375rem));
	line-height: var(--sk-lh-snug, 1.25);
}
.sk-isp__closed {
	margin: var(--sk-space-5, 1.5rem) 0 0;
	padding-top: var(--sk-space-4, 1rem);
	border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	color: var(--sk-text-muted, #5a6b72);
	font-family: var(--sk-font-sans, "Geist", system-ui, sans-serif) !important;
	font-size: var(--sk-fs-eyebrow, .8125rem);
}

/* --- Link di coda ----------------------------------------------------- */
.sk-isp__more {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sk-space-4, 1rem);
	min-height: 4rem;
	padding-top: var(--sk-space-5, 1.5rem);
	border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	color: var(--sk-heading, #00265A);
	font-family: var(--sk-font-display, "Season-Mix-Trial", Georgia, serif) !important;
	font-weight: var(--sk-weight-display, 300) !important;
	font-size: var(--sk-fs-h3, clamp(1.375rem, 1.2rem + .9vw, 1.75rem));
	line-height: var(--sk-lh-snug, 1.25);
	letter-spacing: -.02em;
	text-decoration: none;
}
.sk-isp__more svg { flex: none; margin-bottom: .35em; transition: transform var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1)); }
.sk-isp__more:hover { color: var(--sk-cta, #0068B1); }
.sk-isp__more:hover svg { transform: translateX(4px); }
.sk-isp__more:focus-visible { outline: 2px solid var(--sk-cta, #0068B1); outline-offset: 4px; }

@media (max-width: 1000px) {
	.sk-isp__layout { grid-template-columns: 1fr; }
	.sk-isp__fig--lead { aspect-ratio: 3 / 2; }
	.sk-isp__side {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		grid-template-rows: none;
	}
	.sk-isp__more { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 560px) {
	.sk-isp__side { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.sk-isp__img,
	.sk-isp__more svg { transition: none; }
	/* Barra piena subito: l'animazione era l'unico motivo dello stato vuoto. */
	.sk-js .sk-isp__segs > i {
		background: var(--sk-copper-sand, #C96F4A);
		transition: none;
	}
}

/* =====================================================================
   7. analista-nozze.css — widget multi-step "Analista Nozze"
   Wizard 4 domande (card destinazione con foto, pill, slider) → proposta
   dal catalogo reale → form Forminator inline.
   Card su --sk-surface (bianco), NON su Pearl: i contrasti sono calcolati
   contro il bianco. Nessun :has() — gli stati usano il selettore fratello
   input:checked ~ …, così funzionano anche senza supporto :has.
   ===================================================================== */

/* Nessun fondo e nessun padding verticale: il widget si inserisce in una riga
   WPBakery che porta già il suo background e il suo respiro. */
.sk-an { background: none; }
/* Il widget nasconde tutto con l'attributo [hidden], ma un display esplicito
   (grid/flex) batte lo stile UA display:none e l'elemento resta visibile:
   senza questa riga la proposta scelta compare INSIEME a tutte le altre. */
.sk-an [hidden] { display: none !important; }
/* Visivamente nascosto ma leggibile dagli screen reader. */
.sk-an__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.sk-an__inner {
	width: min(100% - 2 * var(--sk-space-5, 1.5rem), 62rem);
	margin-inline: auto;
}
.sk-an__head { text-align: center; margin-bottom: var(--sk-space-6, 2rem); }
.sk-an__eyebrow { margin-bottom: var(--sk-space-3, .75rem) !important; }
.sk-an__title {
	color: var(--sk-heading, #00265A);
	font-size: var(--sk-fs-h2, 2.25rem) !important;
	line-height: var(--sk-lh-tight, 1.08) !important;
	margin: 0 0 var(--sk-space-3, .75rem) !important;
}
.sk-an__sub {
	max-width: 52ch;
	margin: 0 auto !important;
	color: var(--sk-text-muted, #5a6b72);
	font-size: var(--sk-fs-body, 1.0625rem);
	line-height: 1.6;
}

.sk-an__card {
	background: var(--sk-surface, #fff);
	border: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	border-radius: var(--sk-radius-sm, 5px);
	padding: clamp(var(--sk-space-5, 1.5rem), 3vw, var(--sk-space-7, 3rem));
	box-shadow: 0 24px 60px -40px rgba(0, 38, 90, .35);
}
.sk-an__noscript {
	margin: 0;
	color: var(--sk-text, #1B2B32);
	font-size: var(--sk-fs-body, 1.0625rem);
}

/* --- Progresso -------------------------------------------------------- */
.sk-an__progress { margin-bottom: var(--sk-space-5, 1.5rem); }
.sk-an__progress-label {
	display: block;
	margin-bottom: var(--sk-space-2, .5rem);
}
.sk-an__bar {
	height: 3px;
	background: var(--sk-border, rgba(27, 43, 50, .12));
	overflow: hidden;
}
.sk-an__bar > i {
	display: block;
	height: 100%;
	background: var(--sk-cta, #0068B1);
	transition: width var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}

/* --- Domanda ---------------------------------------------------------- */
.sk-an__step { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.sk-an__q {
	display: block;
	padding: 0;
	margin: 0 0 var(--sk-space-5, 1.5rem) !important;
	color: var(--sk-heading, #00265A);
	font-size: var(--sk-fs-h3, 1.5rem) !important;
	line-height: var(--sk-lh-snug, 1.25) !important;
}

/* Radio reali: invisibili ma presenti per tastiera e screen reader. */
.sk-an__dest input,
.sk-an__opt input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Step 1: strip orizzontale di card destinazione -------------------- */
.sk-an__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sk-space-4, 1rem);
	margin-bottom: var(--sk-space-4, 1rem);
}
.sk-an__search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	max-width: 22rem;
}
.sk-an__search-icon {
	position: absolute;
	top: 50%;
	left: var(--sk-space-3, .75rem);
	width: 1.0625rem;
	height: 1.0625rem;
	color: var(--sk-text-muted, #5a6b72);
	pointer-events: none;
	transform: translateY(-50%);
}
.sk-an__search input {
	width: 100%;
	padding: var(--sk-space-3, .75rem) var(--sk-space-3, .75rem) var(--sk-space-3, .75rem) 2.5rem;
	border: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	border-radius: var(--sk-radius-sm, 5px);
	background: var(--sk-surface, #fff);
	color: var(--sk-text, #1B2B32);
	font-family: inherit;
	font-size: var(--sk-fs-body, 1.0625rem);
	line-height: 1.2;
}
.sk-an__search input::-webkit-search-cancel-button { cursor: pointer; }
.sk-an__search input:focus-visible {
	outline: 2px solid var(--sk-cta, #0068B1);
	outline-offset: 2px;
	border-color: var(--sk-cta, #0068B1);
}
.sk-an__arrows { display: flex; flex: 0 0 auto; gap: var(--sk-space-2, .5rem); }
.sk-an__arrow {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	border-radius: var(--sk-radius-sm, 5px);
	background: var(--sk-surface, #fff);
	color: var(--sk-heading, #00265A);
	cursor: pointer;
	transition: border-color var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
.sk-an__arrow svg { width: 1.125rem; height: 1.125rem; }
.sk-an__arrow:hover:not(:disabled) { border-color: var(--sk-cta, #0068B1); }
.sk-an__arrow:disabled { opacity: .35; cursor: default; }
.sk-an__arrow:focus-visible { outline: 2px solid var(--sk-cta, #0068B1); outline-offset: 2px; }

/* Quattro per fila, le altre si raggiungono scorrendo. Scroll nativo con
   snap: nessuna libreria, nessuna fisica di drag da mantenere. */
.sk-an__strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--sk-space-4, 1rem)) / 4);
	gap: var(--sk-space-4, 1rem);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* NIENTE scroll-behavior: smooth qui. Con lo smooth in CSS ogni scroll
	   programmatico diventa un'animazione che il JS non controlla (e che in
	   alcuni contesti non parte proprio): lo smooth lo passa scrollBy(), che
	   sa anche disattivarlo con prefers-reduced-motion.
	   Niente padding orizzontale: terrebbe scrollLeft fermo a 4px a riposo e
	   la freccia sinistra non si disabiliterebbe mai. Gli anelli di selezione
	   e focus sono disegnati DENTRO la card, così non vengono tagliati. */
	padding-bottom: var(--sk-space-3, .75rem);
	scrollbar-width: thin;
	scrollbar-color: var(--sk-border, rgba(27, 43, 50, .12)) transparent;
}
.sk-an__strip::-webkit-scrollbar { height: 6px; }
.sk-an__strip::-webkit-scrollbar-track { background: transparent; }
.sk-an__strip::-webkit-scrollbar-thumb {
	background: var(--sk-border, rgba(27, 43, 50, .12));
	border-radius: var(--sk-radius-sm, 5px);
}
.sk-an__noresult {
	margin: var(--sk-space-3, .75rem) 0 0 !important;
	color: var(--sk-text-muted, #5a6b72);
	font-size: var(--sk-fs-eyebrow, .8125rem);
}
.sk-an__dest {
	position: relative;
	display: block;
	cursor: pointer;
	scroll-snap-align: start;
}
.sk-an__dest-media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--sk-radius-sm, 5px);
	background: var(--sk-sea-foam, #C7E4E1);
	box-shadow: inset 0 0 0 0 transparent;
	transition: box-shadow var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
/* Salient forza height:auto sulle img: senza !important object-fit non morde. */
.sk-an__dest-img {
	position: static !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transform: scale(1.02);
	transition: transform 900ms var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
/* Velo scuro in basso: il nome è bianco e deve restare leggibile su
   qualsiasi foto (bianco su Navy 78% = oltre 8:1). */
.sk-an__dest-media::after {
	content: "";
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(to bottom, transparent, rgba(0, 38, 90, .82));
	pointer-events: none;
}
.sk-an__dest-name {
	position: absolute;
	inset-inline: var(--sk-space-3, .75rem);
	bottom: var(--sk-space-3, .75rem);
	z-index: 1;
	color: #fff !important;
	line-height: 1.2;
	pointer-events: none;
}
.sk-an__dest:hover .sk-an__dest-img { transform: scale(1.08); }

/* Selezionato: bordo CTA + spunta. */
.sk-an__dest input:checked ~ .sk-an__dest-media { box-shadow: inset 0 0 0 3px var(--sk-cta, #0068B1); }
.sk-an__dest input:checked ~ .sk-an__dest-media::before {
	content: "";
	position: absolute;
	top: var(--sk-space-2, .5rem);
	right: var(--sk-space-2, .5rem);
	z-index: 2;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	background: var(--sk-cta, #0068B1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / .875rem no-repeat;
}
.sk-an__dest input:focus-visible ~ .sk-an__dest-media {
	outline: 2px solid var(--sk-cta, #0068B1);
	outline-offset: -6px;
}

/* "Sorprendimi": nessuna foto, fondo Sea Foam e icona. */
.sk-an__dest--any .sk-an__dest-media {
	display: grid;
	place-items: center;
	color: var(--sk-deep-teal, #005F6A);
}
.sk-an__dest--any .sk-an__dest-media::after { background: none; }
.sk-an__dest--any .sk-an__dest-media svg { width: 2.25rem; height: 2.25rem; }
/* Su Sea Foam il bianco non si legge: qui il nome torna testo scuro. */
.sk-an__dest--any .sk-an__dest-name {
	color: var(--sk-deep-teal, #005F6A) !important;
	text-align: center;
}

/* --- Step 2/3: pill --------------------------------------------------- */
.sk-an__opts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--sk-space-3, .75rem);
}
.sk-an__opts--3 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.sk-an__opt { position: relative; display: block; cursor: pointer; }
.sk-an__opt > span {
	display: block;
	padding: var(--sk-space-4, 1rem) var(--sk-space-3, .75rem);
	text-align: center;
	border: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	border-radius: var(--sk-radius-sm, 5px);
	background: var(--sk-surface, #fff);
	color: var(--sk-text, #1B2B32);
	font-size: var(--sk-fs-body, 1.0625rem);
	line-height: 1.3;
	transition: border-color var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1)),
		background-color var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
.sk-an__opt:hover > span { border-color: var(--sk-cta, #0068B1); }
.sk-an__opt input:checked ~ span {
	border-color: var(--sk-cta, #0068B1);
	box-shadow: inset 0 0 0 1px var(--sk-cta, #0068B1);
	background: color-mix(in srgb, var(--sk-active-blue, #0068B1) 7%, #fff);
}
.sk-an__opt input:focus-visible ~ span {
	outline: 2px solid var(--sk-cta, #0068B1);
	outline-offset: 3px;
}

/* --- Step 4: slider budget -------------------------------------------- */
.sk-an__range { text-align: center; }
.sk-an__range-out {
	display: block;
	color: var(--sk-heading, #00265A);
	font-size: var(--sk-fs-h2, 2.25rem) !important;
	line-height: var(--sk-lh-tight, 1.08) !important;
	margin-bottom: var(--sk-space-4, 1rem) !important;
}
.sk-an__range input[type="range"] {
	width: 100%;
	accent-color: var(--sk-cta, #0068B1);
}
.sk-an__range-scale {
	display: flex;
	justify-content: space-between;
	margin-top: var(--sk-space-2, .5rem);
	color: var(--sk-text-muted, #5a6b72);
	font-size: var(--sk-fs-eyebrow, .8125rem);
}
.sk-an__range-note {
	margin: var(--sk-space-4, 1rem) auto 0 !important;
	max-width: 44ch;
	color: var(--sk-text-muted, #5a6b72);
	font-size: var(--sk-fs-eyebrow, .8125rem);
	line-height: 1.5;
}

/* --- Navigazione ------------------------------------------------------ */
.sk-an__err {
	margin: var(--sk-space-4, 1rem) 0 0 !important;
	color: var(--sk-accent-ink, #8F4527);
	font-size: var(--sk-fs-eyebrow, .8125rem);
}
.sk-an__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sk-space-4, 1rem);
	margin-top: var(--sk-space-6, 2rem);
}
.sk-an__nav > :only-child { margin-inline-start: auto; }
.sk-an__next,
.sk-an__yes {
	padding: var(--sk-space-3, .75rem) var(--sk-space-6, 2rem);
	border: 0;
	border-radius: 0;
	background: #042a5a;
	color: #fff;
	font-family: var(--sk-font-cta, "sweet-sans-pro", sans-serif);
	font-weight: var(--sk-weight-cta, 700);
	font-size: var(--sk-fs-eyebrow, .8125rem);
	letter-spacing: var(--sk-tracking-eyebrow, .14em);
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity var(--sk-dur, .35s) var(--sk-ease, cubic-bezier(.22, 1, .36, 1));
}
.sk-an__next:hover,
.sk-an__yes:hover { background: #042a5a; opacity: .8; }
.sk-an__back,
.sk-an__no {
	padding: var(--sk-space-3, .75rem) 0;
	border: 0;
	background: none;
	color: var(--sk-text-muted, #5a6b72);
	font-size: var(--sk-fs-eyebrow, .8125rem);
	letter-spacing: var(--sk-tracking-eyebrow, .14em);
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.sk-an__back:hover,
.sk-an__no:hover { color: var(--sk-text, #1B2B32); }
.sk-an__next:focus-visible,
.sk-an__yes:focus-visible,
.sk-an__back:focus-visible,
.sk-an__no:focus-visible {
	outline: 2px solid var(--sk-cta, #0068B1);
	outline-offset: 3px;
}

/* --- Proposta --------------------------------------------------------- */
.sk-an__result-eyebrow {
	margin-bottom: var(--sk-space-4, 1rem) !important;
}
/* Miniatura compatta, non mezza pagina: sotto la proposta deve restare spazio
   per il form senza che l'utente debba scorrere. Il formato è quello delle card
   destinazione usate nel resto del sito (3:4). */
.sk-an__prop {
	display: grid;
	grid-template-columns: clamp(7rem, 15vw, 10.5rem) minmax(0, 1fr);
	gap: clamp(var(--sk-space-4, 1rem), 2.5vw, var(--sk-space-5, 1.5rem));
	align-items: start;
}
.sk-an__prop-media {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--sk-radius-sm, 5px);
	background: var(--sk-bg-alt, #EDE6DD);
}
.sk-an__prop-img {
	position: static !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.sk-an__prop-place {
	margin-bottom: var(--sk-space-2, .5rem) !important;
}
.sk-an__prop-title {
	color: var(--sk-heading, #00265A);
	font-size: var(--sk-fs-h3, 1.5rem) !important;
	line-height: var(--sk-lh-snug, 1.25) !important;
	margin: 0 0 var(--sk-space-3, .75rem) !important;
}
.sk-an__prop-claim {
	margin: 0 0 var(--sk-space-4, 1rem) !important;
	color: var(--sk-text, #1B2B32);
	font-size: var(--sk-fs-body, 1.0625rem);
	line-height: 1.6;
}
.sk-an__prop-meta {
	margin: 0 0 var(--sk-space-4, 1rem) !important;
	padding-top: var(--sk-space-4, 1rem);
	border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	color: var(--sk-text-muted, #5a6b72);
	font-size: var(--sk-fs-eyebrow, .8125rem);
	line-height: 1.6;
}
.sk-an__prop-meta:empty { display: none; }
.sk-an__prop-link {
	color: var(--sk-cta, #0068B1);
	font-size: var(--sk-fs-eyebrow, .8125rem);
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.sk-an__prop-link:focus-visible { outline: 2px solid var(--sk-cta, #0068B1); outline-offset: 3px; }

.sk-an__confirm {
	margin-top: var(--sk-space-6, 2rem);
	padding-top: var(--sk-space-5, 1.5rem);
	border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
	text-align: center;
}
.sk-an__confirm-q {
	margin: 0 auto var(--sk-space-4, 1rem) !important;
	max-width: 40ch;
	color: var(--sk-text, #1B2B32);
	font-size: var(--sk-fs-lead, 1.25rem);
	line-height: 1.4;
}
.sk-an__confirm-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sk-space-5, 1.5rem);
}

/* --- Form Forminator -------------------------------------------------- */
.sk-an__form {
	margin-top: var(--sk-space-6, 2rem);
	padding-top: var(--sk-space-5, 1.5rem);
	border-top: 1px solid var(--sk-border, rgba(27, 43, 50, .12));
}
.sk-an__form-q {
	margin: 0 0 var(--sk-space-4, 1rem) !important;
	color: var(--sk-heading, #00265A);
	font-size: var(--sk-fs-lead, 1.25rem);
	line-height: 1.4;
}
.sk-an__form-missing {
	margin: 0 !important;
	color: var(--sk-accent-ink, #8F4527);
	font-size: var(--sk-fs-eyebrow, .8125rem);
}

@media (max-width: 720px) {
	/* 2,2 card visibili: la mezza card tagliata dice "si scorre" meglio di
	   qualunque freccia. */
	.sk-an__strip { grid-auto-columns: calc((100% - var(--sk-space-3, .75rem)) / 2.2); gap: var(--sk-space-3, .75rem); }
	.sk-an__arrows { display: none; }
	.sk-an__search { max-width: none; }
	/* La miniatura resta affiancata anche sui telefoni: a tutta larghezza
	   mangerebbe mezzo schermo e spingerebbe il form sotto la piega, che è
	   esattamente quello che questo layout deve evitare. */
	.sk-an__prop { grid-template-columns: 6rem minmax(0, 1fr); gap: var(--sk-space-4, 1rem); }
	/* La spiegazione lunga della proposta appesantisce lo schermo piccolo:
	   restano titolo, meta e link, il testo va letto sulla pagina resort. */
	.sk-an__prop-claim { display: none; }
	.sk-an__nav { flex-direction: column-reverse; align-items: stretch; }
	.sk-an__next,
	.sk-an__back { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.sk-an__bar > i,
	.sk-an__dest-img,
	.sk-an__dest-media,
	.sk-an__opt > span,
	.sk-an__arrow,
	.sk-an__next,
	.sk-an__yes { transition: none; }
	.sk-an__dest:hover .sk-an__dest-img { transform: scale(1.02); }
}

/* =====================================================================
   ERGONOMIA TOUCH — aggiunto con l'ottimizzazione mobile/tablet.
   Ogni regola vive dentro una media query max-width: sopra i 1024px il
   desktop e' identico a prima per costruzione, non per verifica.
   I bersagli elencati sono quelli MISURATI su device emulato a
   390/430/768/1024, non dedotti dal codice: erano alti fra 13 e 39px
   contro i 44 di riferimento (WCAG 2.5.8, linee guida iOS e Android).

   Perche' 1024 e non 860: 1024 e' l'iPad in orizzontale, che e' touch a
   tutti gli effetti. Con la soglia a 860 i difetti sparivano da telefono e
   tablet verticale e restavano tutti su iPad — verificato a misura.
   ===================================================================== */

@media (max-width: 1024px) {

	/* Controlli testuali senza padding: col mouse bastano, col pollice no.
	   min-height + centratura invece di padding, cosi' il testo non si sposta
	   e il ritmo verticale della sezione resta quello.
	   .sk-jhero__scroll non c'e' piu' in lista: sotto i 720px e' nascosto del
	   tutto (richiesta 14/09/2026, vedi @media max-width:720px piu' sopra) —
	   un elemento invisibile non ha bisogno di un target touch da 44px, e
	   quella regola (stessa specificita', posizionata dopo in cascata) lo
	   avrebbe rimesso a schermo. */
	.sk-jhero__pdf,
	.sk-jhero-cta__pdf,
	.sk-offer__more,
	.sk-filter-chip {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Il "Leggi tutto" nasce display:none e lo accende il JS aggiungendo
	   .has-more. Mi aggancio alla variante accesa: toccare la regola base
	   lo renderebbe visibile sempre (LESSONS §10). */
	.sk-showcase__textwrap.has-more .sk-showcase__more {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Frecce: 40px -> 44px. */
	.sk-an__arrow { width: 2.75rem; height: 2.75rem; }

	/* Le voci del filtro erano alte 18px ed e' la navigazione principale
	   degli archivi. Il passo verticale diventa 44+8: nessuna sovrapposizione
	   fra le righe quando le voci vanno a capo. */
	.sk-filter-bar__options { gap: var(--sk-space-2, .5rem) var(--sk-space-4, 1rem); }

	/* Badge a 11px: su schermo piccolo, tenuto a distanza di braccio,
	   e' sotto la soglia di leggibilita'. 12px e' il minimo che teniamo. */
	.sk-offer__badge { font-size: .75rem; }

	/* La ricerca guidata e' iniettata in ogni pagina da uno snippet esterno
	   al plugin: i suoi 39x39 si correggono da qui, perche' il CSS non guarda
	   chi ha definito l'elemento. Se lo snippet dovesse vincere per ordine di
	   caricamento, si vede subito alla misura. */
	.sk-rf__back,
	.sk-rf__close {
		min-width: 44px;
		min-height: 44px;
	}
	/* Le pillole destinazione sono i controlli di scelta veri della ricerca,
	   ed erano etichettate a 11px. */
	.sk-rf__pill label,
	.sk-rf__next-label {
		font-size: 12px;
	}
}

@media (max-width: 720px) {
	/* Tabella premi: due sole colonne, ci starebbero. A tagliarla era il
	   nowrap sulle intestazioni, che costringeva a scorrere lateralmente
	   dentro la tabella per leggere "Contributo per persona". Le lascio
	   andare a capo e il padding si stringe: resta una tabella, che per due
	   colonne si legge meglio di una lista di schede. */
	.sk-info__table th { white-space: normal; }
	.sk-info__table th,
	.sk-info__table td {
		padding: var(--sk-space-3, .75rem) var(--sk-space-2, .5rem);
	}
}

/* Difesa dal caso descritto in LESSONS §10: l'attributo hidden non vince su
   un display esplicito dato da una classe. Il JS usa btn.hidden in coppia con
   .has-more, oggi coerenti; questa riga fa si' che restino tali anche se una
   delle due smettesse di essere impostata. */
.sk-showcase__more[hidden] { display: none !important; }

/* Ticker loghi della home (elemento Salient, non nostro). Misurato: la home
   scrolla in orizzontale di 466px a 1024 e di 348px a 1440 — a 1920 no,
   perche' li' le celle ci stanno.
   Causa: Salient dichiara
     .full-width-content .vc_col-sm-12 .nectar-flickity:not(.masonry) .flickity-viewport
       { overflow: visible }
   per lasciare sbordare i caroselli a tutta larghezza. Su un ticker che
   scorre in continuo il ritaglio serve invece sempre, altrimenti le celle
   allargano il documento.
   Restringo al solo ticker-rotate e salgo di specificita' (0,6,0 contro
   0,5,0): gli altri caroselli del tema mantengono il loro comportamento. */
.full-width-content .vc_col-sm-12 .nectar-flickity.ticker-rotate:not(.masonry) .flickity-viewport {
	overflow: hidden;
}

/* =====================================================================
   Analista Nozze — sentinelle come campo Testo, non Hidden Field.
   Trovato nel sorgente di Forminator (v1.57.2, library/fields/hidden.php,
   Forminator_Hidden::get_value()): un campo Hidden con "Default Value:
   Custom Value" restituisce SEMPRE il valore configurato, sia in markup che
   in fase di salvataggio della submission — non legge mai $_POST per quel
   campo. È così che Forminator stesso gestisce il tipo Hidden, non un nostro
   bug: verificato il 14/09/2026 dopo che le sentinelle {sk_dove} ecc.
   arrivavano intatte nell'email nonostante il payload di rete le contenesse
   già sostituite (provato via HAR + confronto col database wp_frmt_form_entry_meta).
   Un campo Testo non ha questa scorciatoia (nessun get_value() nella sua
   classe): usa quello che arriva nel form, esattamente come nome/email/
   telefono. Questa classe nasconde il campo Testo che sostituisce l'Hidden
   Field — funziona qualunque sia l'elemento a cui Forminator applica la
   "Custom CSS Class" (riga, wrapper o input). */
.sk-an-sentinel,
.sk-an-sentinel.forminator-row,
.forminator-row.sk-an-sentinel,
div.sk-an-sentinel,
input.sk-an-sentinel {
	display: none !important;
}

/* Iubenda (privacy policy dentro la modale): il JS li promuove a top layer
   con popover="manual"; azzera gli stili UA di [popover] che altrimenti
   darebbero sfondo bianco, bordo e padding al popup. */
#iubenda-pp[popover],
#iubenda-pp-overlay[popover] {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	max-width: none;
	overflow: visible;
}

/* Wordmark "Skorpion Travel" nel footer: era un h1 su ogni pagina (H1 duplicato
   per la SEO), ora e un h2. Queste regole lo riportano identico all'h1. */
.nectar_hook_global_section_footer .nectar-split-heading h2 {
	letter-spacing: -0.045em;
	margin-bottom: 0;
}
.nectar_hook_global_section_footer .nectar-split-heading h2 span {
	font-weight: 300; /* come "h1 span" del CSS globale */
}