/* /viaggi nello stile della home HoEscape (owner 17/10/2026).
* Spec: agent-os/specs/2026-10-17-0617-viaggi-stile-home/.
* I blocchi (banner, garanzie, card offerte, fasce delle mete, motore
* .hoe-travel, barra fissa) vengono da hoescape-home.css, attivo perché il
* body ha la classe hoe-home. Qui solo ciò che è di /viaggi: titolo e
* fascia del motore, colori dei banner per zona, pastiglie degli
* aeroporti, contatti. Scoped a body.vx-hoe, mobile-first. */
html[data-skin="hoe"] body.vx-hoe {
background: #fff;
}
/* ── titolo + motore ───────────────────────────────────────────────── */
html[data-skin="hoe"] body.vx-hoe .vxh-top {
background: linear-gradient(#fff 0, #fff 120px, #f3f6fb 120px);
padding: 20px 0 18px;
}
html[data-skin="hoe"] body.vx-hoe .vxh-wrap {
max-width: 1320px;
margin: 0 auto;
padding: 0 16px;
}
html[data-skin="hoe"] body.vx-hoe .vxh-title {
margin: 0;
color: var(--hoescape-primary, #1e3c72);
font-size: 26px;
font-weight: 800;
line-height: 1.14;
letter-spacing: -0.02em;
text-wrap: balance;
}
html[data-skin="hoe"] body.vx-hoe .vxh-sub {
margin: 8px 0 16px;
color: #4d5966;
font-size: 14px;
line-height: 1.45;
}
html[data-skin="hoe"] body.vx-hoe .vxh-top .hoe-travel .vl-search {
border: 1px solid #dfe6f1;
}
/* ── «Destinazioni in evidenza»: un colore per zona ─────────────────── */
html[data-skin="hoe"] body.vx-hoe .hoe-pb[data-theme="egitto"] { --pb: #0f5f8c; }
html[data-skin="hoe"] body.vx-hoe .hoe-pb[data-theme="canarie"] { --pb: #b4561f; }
html[data-skin="hoe"] body.vx-hoe .hoe-pb[data-theme="africa"] { --pb: #2f6b5e; }
html[data-skin="hoe"] body.vx-hoe .hoe-pb[data-theme="med"] { --pb: #1e3c72; }
html[data-skin="hoe"] body.vx-hoe .hoe-pb[data-theme="tour"] { --pb: #6a3f8f; }
/* ── «Le nostre offerte»: aeroporti a pastiglie ─────────────────────── */
html[data-skin="hoe"] body.vx-hoe .vxh-pills {
display: flex;
gap: 6px;
margin: 0 -12px 12px 0;
padding: 0 12px 2px 0;
overflow-x: auto;
scrollbar-width: none;
}
html[data-skin="hoe"] body.vx-hoe .vxh-pills::-webkit-scrollbar { display: none; }
html[data-skin="hoe"] body.vx-hoe .vxh-pill {
flex: 0 0 auto;
padding: 6px 13px;
border: 1.5px solid #dbe2ef;
border-radius: 999px;
background: #fff;
color: var(--hoescape-primary, #1e3c72);
font: inherit;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
}
html[data-skin="hoe"] body.vx-hoe .vxh-pill[aria-pressed="true"] {
background: var(--hoescape-primary, #1e3c72);
border-color: var(--hoescape-primary, #1e3c72);
color: #fff;
}
html[data-skin="hoe"] body.vx-hoe .vxh-pill:focus-visible {
outline: 3px solid var(--hoescape-accent, #a4c639);
outline-offset: 2px;
}
html[data-skin="hoe"] body.vx-hoe .vxh-offers-body {
transition: opacity 0.15s;
}
html[data-skin="hoe"] body.vx-hoe .vxh-offers-body.is-loading {
opacity: 0.45;
pointer-events: none;
}
html[data-skin="hoe"] body.vx-hoe .vxh-offers-empty {
margin: 8px 0 16px;
color: #4d5966;
font-size: 15px;
}
html[data-skin="hoe"] body.vx-hoe .vxh-offers-empty a {
color: var(--hoescape-primary, #1e3c72);
font-weight: 700;
}
html[data-skin="hoe"] body.vx-hoe .hoe-ocard-badge.vxh-ocard-soon {
background: #e08a1e;
color: #fff;
}
html[data-skin="hoe"] body.vx-hoe .vxh-ocard-seats {
position: absolute;
right: 6px;
bottom: 6px;
padding: 2px 7px;
border-radius: 6px;
background: #e0532f;
color: #fff;
font-size: 11px;
font-weight: 800;
}
/* ── contatti ──────────────────────────────────────────────────────── */
html[data-skin="hoe"] body.vx-hoe .vxh-cta {
margin-top: 12px;
padding: 26px 0 28px;
background: var(--hoescape-primary, #1e3c72);
color: #fff;
}
html[data-skin="hoe"] body.vx-hoe .vxh-cta-kicker {
margin: 0 0 6px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
opacity: 0.9;
}
html[data-skin="hoe"] body.vx-hoe .vxh-cd {
font-variant-numeric: tabular-nums;
}
html[data-skin="hoe"] body.vx-hoe .vxh-cta-title {
margin: 0;
color: #fff;
font-size: 22px;
font-weight: 800;
line-height: 1.2;
text-wrap: balance;
}
html[data-skin="hoe"] body.vx-hoe .vxh-cta-sub {
margin: 6px 0 14px;
font-size: 15px;
opacity: 0.85;
}
html[data-skin="hoe"] body.vx-hoe .vxh-cta-actions {
display: grid;
gap: 8px;
}
html[data-skin="hoe"] body.vx-hoe .vxh-cta-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 18px;
border-radius: 12px;
font-size: 16px;
font-weight: 800;
text-decoration: none;
}
html[data-skin="hoe"] body.vx-hoe .vxh-cta-btn--phone { background: #fff; color: var(--hoescape-primary, #1e3c72); }
html[data-skin="hoe"] body.vx-hoe .vxh-cta-btn--wa { background: #25d366; color: #0b3d1d; }
html[data-skin="hoe"] body.vx-hoe .vxh-cta-btn--ghost { border: 1.5px solid rgba(255, 255, 255, 0.6); color: #fff; }
/* ── desktop ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
html[data-skin="hoe"] body.vx-hoe .vxh-top {
padding: 36px 0 26px;
background: linear-gradient(#fff 0, #fff 150px, #f3f6fb 150px);
}
html[data-skin="hoe"] body.vx-hoe .vxh-wrap { padding: 0 24px; }
html[data-skin="hoe"] body.vx-hoe .vxh-title { font-size: 44px; line-height: 1.1; letter-spacing: -0.025em; }
html[data-skin="hoe"] body.vx-hoe .vxh-sub { margin: 10px 0 20px; font-size: 18px; }
html[data-skin="hoe"] body.vx-hoe .vxh-pills { margin-right: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; }
html[data-skin="hoe"] body.vx-hoe .vxh-cta { padding: 34px 0; }
html[data-skin="hoe"] body.vx-hoe .vxh-cta-title { font-size: 28px; }
html[data-skin="hoe"] body.vx-hoe .vxh-cta-actions { grid-template-columns: repeat(3, max-content); }
}
/* ══ pagina di meta /viaggi/ (owner 17/10/2026) ══════════════════
* destinazione_hoe.html: stesse sezioni di /viaggi più «Le strutture»
* (aeroporti, schede, fascia dei mesi di viaggi-dest-calendar.js, card
* .vn-card disegnate come .hoe-ocard) e « in breve». */
html[data-skin="hoe"] body.vx-dest .vxd-kicker {
margin: 0 0 6px;
color: var(--hoescape-accent-hover, #7fa31f);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
html[data-skin="hoe"] body.vx-dest .vxh-sub strong { color: var(--hoescape-primary, #1e3c72); }
html[data-skin="hoe"] body.vx-dest .vxd-crumbs {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
align-items: center;
margin-top: 12px;
color: #5b6785;
font-size: 13px;
}
html[data-skin="hoe"] body.vx-dest .vx-crumbs { display: flex; gap: 6px; align-items: center; }
html[data-skin="hoe"] body.vx-dest .vx-crumbs a,
html[data-skin="hoe"] body.vx-dest .vx-chip--link {
color: var(--hoescape-primary, #1e3c72);
font-weight: 700;
text-decoration: underline;
}
html[data-skin="hoe"] body.vx-dest .vx-airports { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
html[data-skin="hoe"] body.vx-dest .vx-airports-label { font-weight: 700; }
html[data-skin="hoe"] body.vx-dest .vx-chip--current { font-weight: 800; color: var(--hoescape-primary, #1e3c72); }
html[data-skin="hoe"] body.vx-dest .vxh-pill.is-active {
background: var(--hoescape-primary, #1e3c72);
border-color: var(--hoescape-primary, #1e3c72);
color: #fff;
}
html[data-skin="hoe"] body.vx-dest .vxd-strutture .hoe-offers-tabs { margin-bottom: 12px; }
html[data-skin="hoe"] body.vx-dest .vxd-charter { margin-bottom: 8px; }
html[data-skin="hoe"] body.vx-dest .vxd-stars { color: #f5a623; letter-spacing: 1px; }
html[data-skin="hoe"] body.vx-dest .vxd-more-dates {
margin-left: 4px;
padding: 1px 6px;
border-radius: 6px;
background: #eef6d8;
color: #2a3a0a;
font-size: 11.5px;
font-weight: 700;
white-space: nowrap;
}
html[data-skin="hoe"] body.vx-dest .vn-card[hidden],
html[data-skin="hoe"] body.vx-dest .vn-row[hidden] { display: none; }
/* righe: titolo nascosto quando la fascia dei mesi è attiva (il mese
scelto si legge sulla pastiglia), una riga alla volta */
html[data-skin="hoe"] body.vx-dest .vxd-row-head { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 6px; }
html[data-skin="hoe"] body.vx-dest .vxd-row-title { margin: 0; color: var(--hoescape-primary, #1e3c72); font-size: 18px; font-weight: 800; }
html[data-skin="hoe"] body.vx-dest .vn-row-sub { color: #6b7280; font-size: 13px; }
html[data-skin="hoe"] body.vx-dest #partenze.vx-cal-on .vxd-row-head { display: none; }
html[data-skin="hoe"] body.vx-dest .vxd-panel[data-vxd-panel]:not([data-vxd-panel="all"]) .vxd-row-head { display: none; }
html[data-skin="hoe"] body.vx-dest .vx-month-off { display: none; }
html[data-skin="hoe"] body.vx-dest .vxd-row:not(.is-open) .vn-card:nth-child(n+9) { display: none; }
html[data-skin="hoe"] body.vx-dest button.hoe-offers-more { background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
html[data-skin="hoe"] body.vx-dest .vxd-cal-lead { margin: 0 0 8px; color: #4d5966; font-size: 14px; }
/* fascia dei mesi (costruita da viaggi-dest-calendar.js) a pastiglie */
html[data-skin="hoe"] body.vx-dest .vx-months {
display: flex;
gap: 6px;
margin: 0 -12px 12px 0;
padding: 0 12px 2px 0;
overflow-x: auto;
scrollbar-width: none;
}
html[data-skin="hoe"] body.vx-dest .vx-months::-webkit-scrollbar { display: none; }
html[data-skin="hoe"] body.vx-dest .vx-m {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: flex-start;
padding: 7px 12px;
border: 1.5px solid #dbe2ef;
border-radius: 12px;
background: #fff;
color: var(--hoescape-primary, #1e3c72);
font: inherit;
line-height: 1.2;
cursor: pointer;
}
html[data-skin="hoe"] body.vx-dest .vx-m[hidden] { display: none; }
html[data-skin="hoe"] body.vx-dest .vx-m-bar { display: none; }
html[data-skin="hoe"] body.vx-dest .vx-m-name { font-size: 14px; font-weight: 800; }
html[data-skin="hoe"] body.vx-dest .vx-m-price { font-size: 12.5px; font-weight: 700; }
html[data-skin="hoe"] body.vx-dest .vx-m-count { color: #6b7280; font-size: 11.5px; font-weight: 600; }
html[data-skin="hoe"] body.vx-dest .vx-m[aria-pressed="true"] {
background: var(--hoescape-primary, #1e3c72);
border-color: var(--hoescape-primary, #1e3c72);
color: #fff;
}
html[data-skin="hoe"] body.vx-dest .vx-m[aria-pressed="true"] .vx-m-count { color: #cfd8ea; }
/* « in breve» */
html[data-skin="hoe"] body.vx-dest .vxd-breve { padding: 22px 0 8px; }
html[data-skin="hoe"] body.vx-dest .vxd-facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 14px;
margin: 0 0 18px;
padding: 0;
list-style: none;
}
html[data-skin="hoe"] body.vx-dest .vxd-facts-ic { display: block; font-size: 26px; line-height: 1; }
html[data-skin="hoe"] body.vx-dest .vxd-facts-h { margin: 6px 0 2px; color: var(--hoescape-primary, #1e3c72); font-size: 16px; font-weight: 800; }
html[data-skin="hoe"] body.vx-dest .vxd-facts p { margin: 0; color: #4d5966; font-size: 14px; line-height: 1.4; }
html[data-skin="hoe"] body.vx-dest .vxd-exc {
display: flex;
gap: 10px;
margin: 0 -12px 6px 0;
padding: 0 12px 4px 0;
overflow-x: auto;
scrollbar-width: none;
}
html[data-skin="hoe"] body.vx-dest .vxd-exc::-webkit-scrollbar { display: none; }
html[data-skin="hoe"] body.vx-dest .vxd-exc-card { flex: 0 0 68%; padding: 14px; border-radius: 14px; background: #f3f6fb; }
html[data-skin="hoe"] body.vx-dest .vxd-exc-h { margin: 0 0 4px; color: var(--hoescape-primary, #1e3c72); font-size: 16px; font-weight: 800; }
html[data-skin="hoe"] body.vx-dest .vxd-exc-card p { margin: 0; color: #4d5966; font-size: 14px; line-height: 1.4; }
html[data-skin="hoe"] body.vx-dest .vxd-exc-note { margin: 4px 0 18px; color: #6b7280; font-size: 13px; }
html[data-skin="hoe"] body.vx-dest .vxd-desc { position: relative; max-height: 118px; overflow: hidden; }
html[data-skin="hoe"] body.vx-dest .vxd-desc::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 56px;
background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}
html[data-skin="hoe"] body.vx-dest .vxd-desc.is-open { max-height: none; }
html[data-skin="hoe"] body.vx-dest .vxd-desc.is-open::after { display: none; }
html[data-skin="hoe"] body.vx-dest .vxd-desc p { margin: 0 0 8px; color: #4d5966; font-size: 15px; line-height: 1.5; }
html[data-skin="hoe"] body.vx-dest .vxd-readmore {
margin: 4px 0 0;
padding: 0;
border: 0;
background: none;
color: var(--hoescape-primary, #1e3c72);
font: inherit;
font-weight: 800;
text-decoration: underline;
cursor: pointer;
}
@media (min-width: 768px) {
html[data-skin="hoe"] body.vx-dest .vx-months { margin-right: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; }
html[data-skin="hoe"] body.vx-dest .vxd-facts { grid-template-columns: repeat(4, 1fr); }
html[data-skin="hoe"] body.vx-dest .vxd-exc { margin-right: 0; padding-right: 0; overflow: visible; }
html[data-skin="hoe"] body.vx-dest .vxd-exc-card { flex: 1 1 0; }
}
/* ══ pagina di meta /viaggi/ (owner 17/10/2026) ══════════════════
* destinazione_hoe.html: stesse sezioni di /viaggi più «Le strutture»
* (aeroporti, schede, fascia dei mesi di viaggi-dest-calendar.js, card
* .vn-card disegnate come .hoe-ocard) e « in breve». */
html[data-skin="hoe"] body.vx-dest .vxd-kicker {
margin: 0 0 6px;
color: var(--hoescape-accent-hover, #7fa31f);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
html[data-skin="hoe"] body.vx-dest .vxh-sub strong { color: var(--hoescape-primary, #1e3c72); }
html[data-skin="hoe"] body.vx-dest .vxd-crumbs {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
align-items: center;
margin-top: 12px;
color: #5b6785;
font-size: 13px;
}
html[data-skin="hoe"] body.vx-dest .vx-crumbs { display: flex; gap: 6px; align-items: center; }
html[data-skin="hoe"] body.vx-dest .vx-crumbs a,
html[data-skin="hoe"] body.vx-dest .vx-chip--link {
color: var(--hoescape-primary, #1e3c72);
font-weight: 700;
text-decoration: underline;
}
html[data-skin="hoe"] body.vx-dest .vx-airports { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
html[data-skin="hoe"] body.vx-dest .vx-airports-label { font-weight: 700; }
html[data-skin="hoe"] body.vx-dest .vx-chip--current { font-weight: 800; color: var(--hoescape-primary, #1e3c72); }
html[data-skin="hoe"] body.vx-dest .vxh-pill.is-active {
background: var(--hoescape-primary, #1e3c72);
border-color: var(--hoescape-primary, #1e3c72);
color: #fff;
}
html[data-skin="hoe"] body.vx-dest .vxd-strutture .hoe-offers-tabs { margin-bottom: 12px; }
html[data-skin="hoe"] body.vx-dest .vxd-charter { margin-bottom: 8px; }
html[data-skin="hoe"] body.vx-dest .vxd-stars { color: #f5a623; letter-spacing: 1px; }
html[data-skin="hoe"] body.vx-dest .vxd-more-dates {
margin-left: 4px;
padding: 1px 6px;
border-radius: 6px;
background: #eef6d8;
color: #2a3a0a;
font-size: 11.5px;
font-weight: 700;
white-space: nowrap;
}
html[data-skin="hoe"] body.vx-dest .vn-card[hidden],
html[data-skin="hoe"] body.vx-dest .vn-row[hidden] { display: none; }
/* righe: col calendario dei mesi acceso il titolo si legge sulla
pastiglia scelta, e si vede una riga alla volta */
html[data-skin="hoe"] body.vx-dest .vxd-row-head { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 6px; }
html[data-skin="hoe"] body.vx-dest .vxd-row-title { margin: 0; color: var(--hoescape-primary, #1e3c72); font-size: 18px; font-weight: 800; }
html[data-skin="hoe"] body.vx-dest .vn-row-sub { color: #6b7280; font-size: 13px; }
html[data-skin="hoe"] body.vx-dest #partenze.vx-cal-on .vxd-row-head { display: none; }
html[data-skin="hoe"] body.vx-dest .vxd-panel:not([data-vxd-panel="all"]) .vxd-row-head { display: none; }
html[data-skin="hoe"] body.vx-dest .vx-month-off { display: none; }
html[data-skin="hoe"] body.vx-dest .vxd-row:not(.is-open) .vn-card:nth-child(n+9) { display: none; }
html[data-skin="hoe"] body.vx-dest button.hoe-offers-more { background: #fff; font: inherit; font-weight: 800; cursor: pointer; }
html[data-skin="hoe"] body.vx-dest .vxd-cal-lead { margin: 0 0 8px; color: #4d5966; font-size: 14px; }
/* fascia dei mesi (costruita da viaggi-dest-calendar.js) a pastiglie */
html[data-skin="hoe"] body.vx-dest .vx-months {
display: flex;
gap: 6px;
margin: 0 -12px 12px 0;
padding: 0 12px 2px 0;
overflow-x: auto;
scrollbar-width: none;
}
html[data-skin="hoe"] body.vx-dest .vx-months::-webkit-scrollbar { display: none; }
html[data-skin="hoe"] body.vx-dest .vx-m {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: flex-start;
padding: 7px 12px;
border: 1.5px solid #dbe2ef;
border-radius: 12px;
background: #fff;
color: var(--hoescape-primary, #1e3c72);
font: inherit;
line-height: 1.2;
cursor: pointer;
}
html[data-skin="hoe"] body.vx-dest .vx-m[hidden] { display: none; }
html[data-skin="hoe"] body.vx-dest .vx-m-bar { display: none; }
html[data-skin="hoe"] body.vx-dest .vx-m-name { font-size: 14px; font-weight: 800; }
html[data-skin="hoe"] body.vx-dest .vx-m-price { font-size: 12.5px; font-weight: 700; }
html[data-skin="hoe"] body.vx-dest .vx-m-count { color: #6b7280; font-size: 11.5px; font-weight: 600; }
html[data-skin="hoe"] body.vx-dest .vx-m[aria-pressed="true"] {
background: var(--hoescape-primary, #1e3c72);
border-color: var(--hoescape-primary, #1e3c72);
color: #fff;
}
html[data-skin="hoe"] body.vx-dest .vx-m[aria-pressed="true"] .vx-m-count { color: #cfd8ea; }
/* « in breve» */
html[data-skin="hoe"] body.vx-dest .vxd-breve { padding: 22px 0 8px; }
html[data-skin="hoe"] body.vx-dest .vxd-facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 14px;
margin: 0 0 18px;
padding: 0;
list-style: none;
}
html[data-skin="hoe"] body.vx-dest .vxd-facts-ic { display: block; font-size: 26px; line-height: 1; }
html[data-skin="hoe"] body.vx-dest .vxd-facts-h { margin: 6px 0 2px; color: var(--hoescape-primary, #1e3c72); font-size: 16px; font-weight: 800; }
html[data-skin="hoe"] body.vx-dest .vxd-facts p { margin: 0; color: #4d5966; font-size: 14px; line-height: 1.4; }
html[data-skin="hoe"] body.vx-dest .vxd-exc {
display: flex;
gap: 10px;
margin: 0 -12px 6px 0;
padding: 0 12px 4px 0;
overflow-x: auto;
scrollbar-width: none;
}
html[data-skin="hoe"] body.vx-dest .vxd-exc::-webkit-scrollbar { display: none; }
html[data-skin="hoe"] body.vx-dest .vxd-exc-card { flex: 0 0 68%; padding: 14px; border-radius: 14px; background: #f3f6fb; }
html[data-skin="hoe"] body.vx-dest .vxd-exc-h { margin: 0 0 4px; color: var(--hoescape-primary, #1e3c72); font-size: 16px; font-weight: 800; }
html[data-skin="hoe"] body.vx-dest .vxd-exc-card p { margin: 0; color: #4d5966; font-size: 14px; line-height: 1.4; }
html[data-skin="hoe"] body.vx-dest .vxd-exc-note { margin: 4px 0 18px; color: #6b7280; font-size: 13px; }
html[data-skin="hoe"] body.vx-dest .vxd-desc { position: relative; max-height: 118px; overflow: hidden; }
html[data-skin="hoe"] body.vx-dest .vxd-desc::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 56px;
background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}
html[data-skin="hoe"] body.vx-dest .vxd-desc.is-open { max-height: none; }
html[data-skin="hoe"] body.vx-dest .vxd-desc.is-open::after { display: none; }
html[data-skin="hoe"] body.vx-dest .vxd-desc p { margin: 0 0 8px; color: #4d5966; font-size: 15px; line-height: 1.5; }
html[data-skin="hoe"] body.vx-dest .vxd-readmore {
margin: 4px 0 0;
padding: 0;
border: 0;
background: none;
color: var(--hoescape-primary, #1e3c72);
font: inherit;
font-weight: 800;
text-decoration: underline;
cursor: pointer;
}
@media (min-width: 768px) {
html[data-skin="hoe"] body.vx-dest .vx-months { margin-right: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; }
html[data-skin="hoe"] body.vx-dest .vxd-facts { grid-template-columns: repeat(4, 1fr); }
html[data-skin="hoe"] body.vx-dest .vxd-exc { margin-right: 0; padding-right: 0; overflow: visible; }
html[data-skin="hoe"] body.vx-dest .vxd-exc-card { flex: 1 1 0; }
}
/* nel motore con la meta fissa (pagine meta + aeroporto) il secondo campo è
la data: icona del calendario, non dello spillo. Col campo Destinazione
(owner 18/10/2026, variante B) resta lo spillo della home. */
html[data-skin="hoe"] body.vx-dest .hoe-travel .vl-search-grid:not(:has(select[name="dest"])) > label:nth-child(2) .vl-field-label::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a3a5c' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.500'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
html[data-skin="hoe"] body.vx-dest .vxd-sub { margin-bottom: 4px; }
html[data-skin="hoe"] body.vx-dest .vxd-price { margin: 0 0 16px; color: #4d5966; font-size: 14px; }
html[data-skin="hoe"] body.vx-dest .vxd-price-val { color: var(--hoescape-primary, #1e3c72); font-size: 1.15em; }
@media (min-width: 768px) {
html[data-skin="hoe"] body.vx-dest .vxd-price { margin-bottom: 20px; font-size: 16px; }
}
/* testata della meta: titolo e h2 su bianco, fascia chiara dal motore in
giù a tutta larghezza (owner 17/10/2026) */
html[data-skin="hoe"] body.vx-dest .vxh-top { background: #fff; padding-bottom: 0; }
html[data-skin="hoe"] body.vx-dest .vxd-h2 {
margin: 8px 0 16px;
color: #4d5966;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0;
}
/* Fondo a tutta larghezza con border-image allargato ai lati, senza
clip-path: il ritaglio tagliava anche la tendina degli aeroporti che
esce in basso (owner 17/10/2026). */
html[data-skin="hoe"] body.vx-dest .vxd-band {
padding: 14px 0 18px;
border-image: linear-gradient(#f3f6fb, #f3f6fb) fill 0 / 0 / 0 100vmax;
}
/* Meta fissa: un campo in meno (partenza da, data, adulti, bambini, tasto),
i campi riempiono tutta la scheda (owner 17/10/2026). */
@media (min-width: 1024px) {
html[data-skin="hoe"] body.vx-dest .hoe-travel .vl-search-grid:not(:has(select[name="dest"])) {
grid-template-columns: 1.3fr 1.3fr 1fr 1fr 110px;
}
}
@media (min-width: 768px) {
html[data-skin="hoe"] body.vx-dest .vxd-h2 { margin: 10px 0 20px; font-size: 18px; }
html[data-skin="hoe"] body.vx-dest .vxd-band { padding: 18px 0 26px; }
}
/* ══ /tour nello stile della home (owner 17/10/2026) ══════════════════════
* tour/index_hoe.html riusa testata, card e righe della pagina di meta
* (body.vx-dest); qui le corsie da 5 tour e il catalogo 10 alla volta. */
html[data-skin="hoe"] body.vx-tour .vxd-row:not(.is-open) .vn-card:nth-child(n+6) { display: none; }
html[data-skin="hoe"] body.vx-tour .vxt-off { display: none !important; }
/* pastiglie sopra il catalogo al posto delle file «I nostri tour» (owner 17/10/2026) */
html[data-skin="hoe"] body.vx-tour .vxt-out { display: none !important; }
html[data-skin="hoe"] body.vx-tour .vxt-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px;
scrollbar-width: none; }
html[data-skin="hoe"] body.vx-tour .vxt-chips::-webkit-scrollbar { display: none; }
html[data-skin="hoe"] body.vx-tour .vxt-chip { flex: 0 0 auto; border: 1.5px solid #dfe5ee; background: #fff; border-radius: 999px;
padding: 7px 14px; font: inherit; font-weight: 700; font-size: 14px; color: var(--hoescape-primary, #1e3c72); cursor: pointer; }
html[data-skin="hoe"] body.vx-tour .vxt-chip.is-on { background: var(--hoescape-primary, #1e3c72); border-color: var(--hoescape-primary, #1e3c72); color: #fff; }
html[data-skin="hoe"] body.vx-tour .vxt-catalogo { padding: 22px 0 6px; }
html[data-skin="hoe"] body.vx-tour .vxt-catalogo-sub { margin: -4px 0 4px; color: #6b7280; font-size: 14px; }
html[data-skin="hoe"] body.vx-tour .vxt-more { display: block; margin: 8px auto 0; }
/* Filtri delle strutture della meta (owner 18/10/2026): le schede a sinistra,
* la tendina «Partenza da» a destra, niente pillole degli aeroporti. */
html[data-skin="hoe"] body.vx-dest .vxd-filters {
display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: 6px 24px; margin-bottom: 12px; border-bottom: 1px solid #e3e7ef;
}
html[data-skin="hoe"] body.vx-dest .vxd-strutture .vxd-filters .hoe-offers-tabs {
flex: 1 1 auto; min-width: 0; margin-bottom: 0; border-bottom: 0;
}
html[data-skin="hoe"] body.vx-dest .vxd-airsel {
display: flex; align-items: center; gap: 10px; margin: 0 0 8px auto;
color: #5b6785; font-size: 14px; font-weight: 600;
}
html[data-skin="hoe"] body.vx-dest .vxd-airsel-field {
min-height: 44px; padding: 8px 38px 8px 12px; border: 1px solid #c9d2e0; border-radius: 8px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231e3c72' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
-webkit-appearance: none; appearance: none;
color: var(--hoescape-primary, #1e3c72); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
html[data-skin="hoe"] body.vx-dest .vxd-airsel-field:focus-visible {
outline: 3px solid var(--hoescape-accent, #a4c639); outline-offset: 2px;
}
@media (max-width: 575.98px) {
html[data-skin="hoe"] body.vx-dest .vxd-airsel {
width: 100%; flex-direction: column; align-items: stretch; gap: 4px; margin-left: 0;
}
}