/* ==================================================================
   LA HOME (15 ottobre 2026) - le sezioni sul modello di weroad.it.

   Colori, caratteri, pulsanti, domande e recensioni vengono da
   stile.css, lo stesso della landing: qui solo la scaletta nuova. Le
   variabili (--brand, --accento, --inchiostro) le aggiorna home.js con
   i colori dell'agenzia, come nella landing.
   ================================================================== */

body.home{background:#fff}
.h-larga{max-width:1180px;margin:0 auto}
mark{background:rgba(249,176,0,.28);background:color-mix(in srgb, var(--accento) 30%, transparent);color:inherit;padding:0 .15em;border-radius:3px}

/* ─── testa ─────────────────────────────────────────────────────── */
.h-testa{
  /* bianca piena: lo sfocato dietro (backdrop-filter) bloccava il disegno della pagina mentre arrivavano le foto */
  position:sticky;top:0;z-index:50;background:#fff;
  display:flex;align-items:center;gap:1.5rem;padding:.7rem max(1rem, calc((100% - 1180px) / 2));
  border-bottom:1px solid transparent;transition:border-color .2s ease;
}
.h-testa.staccata{border-bottom-color:var(--linea)}
.h-testa .marchio{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--inchiostro);font-family:var(--titolo-font);font-weight:700;font-size:1.25rem}
.h-testa .marchio img{height:38px;width:auto}
.h-testa .marchio img:not([hidden]) + #marchioNome{display:none}
.h-voci{display:flex;gap:1.4rem;margin:0 auto}
.h-voci a, .h-tel{color:var(--inchiostro);text-decoration:none;font-weight:600;font-size:.93rem}
.h-voci a:hover, .h-tel:hover{color:var(--brand)}
.h-azioni{display:flex;align-items:center;gap:.9rem}
.h-wa{display:inline-flex;align-items:center;gap:.4rem;border:1.5px solid var(--linea);border-radius:999px;padding:.35rem .9rem;
  color:var(--inchiostro);text-decoration:none;font-weight:600;font-size:.88rem}
.h-wa:hover{border-color:var(--brand);color:var(--brand)}
.h-wa svg{width:17px;height:17px;fill:currentColor}

/* ─── la foto grande e la ricerca ──────────────────────────────── */
.h-eroe{position:relative;height:clamp(380px, 56vh, 540px);display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;
  background:linear-gradient(135deg, var(--inchiostro), var(--brand))}
.h-eroe-foto{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s ease}
.h-eroe-foto.pronta{opacity:1}
.h-eroe::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,20,35,.25), rgba(0,20,35,.15) 40%, rgba(0,20,35,.45))}
.h-eroe-parole{position:relative;z-index:1;color:#fff;padding:0 1.2rem;max-width:46rem;margin-top:-2rem}
.h-eroe h1{color:#fff;font-size:clamp(2.2rem, 5.4vw, 3.8rem);text-shadow:0 2px 24px rgba(0,0,0,.25)}
.h-eroe p{font-size:clamp(1rem, 2vw, 1.2rem);font-weight:500;margin:.6rem 0 0;text-shadow:0 1px 12px rgba(0,0,0,.3)}

.h-cerca{position:relative;z-index:20;display:grid;grid-template-columns:1.3fr 1fr auto;max-width:780px;margin:-38px auto 0;
  background:#fff;border-radius:14px;box-shadow:var(--ombra-alta)}
/* niente overflow:hidden sulla barra: i pannelli escono sotto. Gli
   angoli li tengono i campi. */
.h-cerca-campo{position:relative;display:flex;flex-direction:column;justify-content:center;padding:.7rem 1.1rem;min-width:0;cursor:text}
.h-cerca-campo:first-child{border-radius:14px 0 0 14px}
.h-cerca-campo + .h-cerca-campo{border-left:1px solid var(--linea)}
.h-cerca-campo > label, .h-cerca-campo > span{font-size:.75rem;font-weight:600;color:var(--testo-tenue);cursor:inherit}
.h-cerca-campo input{border:0;outline:0;background:transparent;font:inherit;font-size:1rem;font-weight:600;color:var(--inchiostro);padding:.15rem 0;width:100%}
.h-cerca-campo input::placeholder{color:#8a9aa5;font-weight:500}
.h-cerca-campo.aperto, .h-cerca-campo:focus-within{background:var(--fondo)}
.h-cerca-scelta{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.15rem 0;cursor:pointer;
  font:inherit;font-size:1rem;font-weight:500;color:#8a9aa5}
.h-cerca-scelta.scelto{font-weight:600;color:var(--inchiostro)}
.h-cerca-scelta::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .15s ease}
.h-cerca-campo.aperto .h-cerca-scelta::after{transform:rotate(-135deg) translateY(-2px)}
#campoQuando{cursor:pointer}

/* ─── i pannelli della ricerca ─────────────────────────────────── */
.h-pannello{position:absolute;top:calc(100% + 10px);left:0;z-index:30;width:max(100%, 400px);max-height:min(460px, 64vh);overflow:auto;scrollbar-width:thin;
  background:#fff;border-radius:14px;box-shadow:0 4px 8px rgba(16,32,45,.08), 0 22px 50px rgba(16,32,45,.18);padding:.6rem;text-align:left;cursor:default}
.h-pannello-titolo{margin:.35rem .55rem .45rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--testo-tenue)}
.h-pannello-vuoto{margin:.6rem .7rem;font-size:.9rem;color:var(--testo-tenue)}
.h-meta-riga{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:.8rem;width:100%;padding:.45rem .55rem;border-radius:10px;cursor:pointer}
.h-meta-riga:hover, .h-meta-riga.attiva, .h-meta-riga:focus-visible{background:var(--fondo)}
.h-meta-mini{flex:none;width:44px;height:44px;border-radius:10px;background:var(--fondo) center/cover no-repeat}
.h-meta-mini.segno{display:grid;place-items:center;background:#eaf4fa;color:var(--brand);font-size:1.4rem;font-weight:600}
.h-meta-testo{display:flex;flex-direction:column;min-width:0}
.h-meta-testo b{font-size:.95rem;color:var(--inchiostro);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-meta-testo small{font-size:.8rem;color:var(--testo-tenue)}

.h-pannello-mesi{width:max(100%, 340px);padding:.8rem}
.h-mesi{display:grid;grid-template-columns:repeat(4, 1fr);gap:.4rem;margin-bottom:.4rem}
.h-mese{font:inherit;font-size:.9rem;font-weight:600;color:var(--inchiostro);background:#fff;border:1.5px solid var(--linea);border-radius:10px;
  padding:.55rem 0;cursor:pointer;text-transform:capitalize;transition:border-color .12s ease, background .12s ease}
.h-mese:hover{border-color:var(--brand);color:var(--brand)}
.h-mese[aria-pressed="true"]{background:var(--inchiostro);border-color:var(--inchiostro);color:#fff}
.h-mese-tutti{width:100%;margin-bottom:.3rem;text-transform:none}
.h-cerca-vai{display:flex;align-items:center;gap:.4rem;margin:.55rem;border:0;border-radius:10px;padding:0 1.2rem;background:var(--brand);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.h-cerca-vai:hover{background:var(--brand-scuro)}
.h-cerca-vai svg{width:20px;height:20px;fill:currentColor}
.h-fiducia{display:flex;justify-content:center;margin:1.1rem auto 0;padding:0 1rem;font-size:.9rem;color:var(--testo-tenue)}
.h-fiducia:empty{display:none}
.h-fiducia .recensioni-google{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem;margin:0}
.h-fiducia .recensioni-google b{font-size:1.05rem;color:var(--inchiostro)}

/* ─── le sezioni ───────────────────────────────────────────────── */
.h-sezione{max-width:1180px;margin:0 auto;padding:clamp(2.2rem, 5vw, 3.6rem) clamp(1rem, 3vw, 1.5rem) 0}
.h-sezione h2, .h-banda h2, .h-fine h2{color:var(--inchiostro)}
.h-sotto{color:var(--testo-tenue);margin:-.1rem 0 1.4rem}
.h-centro{text-align:center}
.h-bottone{display:inline-flex;align-items:center;justify-content:center;background:var(--inchiostro);color:#fff;text-decoration:none;font-weight:700;
  border-radius:999px;padding:.8rem 1.6rem;font-size:.98rem;transition:background .15s ease, transform .15s ease}
.h-bottone:hover{background:var(--brand);transform:translateY(-1px)}

/* perche' noi: quattro carte con un tondo */
.h-perche{display:grid;grid-template-columns:repeat(4, 1fr);gap:1rem;margin-top:1.2rem}
.h-perche-voce{display:flex;align-items:center;gap:.9rem;border:1px solid var(--linea);border-radius:14px;padding:1rem;background:#fff}
.h-perche-voce p{margin:0;font-size:.92rem;line-height:1.45;color:var(--testo)}
.h-tondo{flex:none;width:58px;height:58px;border-radius:50%;background:var(--fondo) center/cover no-repeat;box-shadow:0 0 0 3px #fff, 0 0 0 4px var(--linea)}
.h-tondo.grande{width:104px;height:104px}

/* i tipi di viaggio: tessere alte con la foto */
.h-tessere{display:grid;grid-template-columns:repeat(5, 1fr);gap:.9rem}
.h-tessera{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;color:#fff;text-decoration:none;background:var(--inchiostro)}
.h-tessera img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.h-tessera:hover img{transform:scale(1.05)}
.h-tessera::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.72))}
.h-tessera span{position:absolute;left:.8rem;right:.8rem;bottom:.9rem;z-index:1;text-align:center}
.h-tessera b{display:block;font-family:var(--titolo-font);font-size:1.25rem;line-height:1.15}
.h-tessera small{display:block;margin-top:.25rem;font-size:.8rem;opacity:.9}

/* come nasce un viaggio */
.h-come{list-style:none;padding:0;margin:1.6rem auto 0;display:flex;justify-content:center;gap:clamp(1.5rem, 6vw, 5rem);flex-wrap:wrap}
.h-come li{display:flex;flex-direction:column;align-items:center;gap:.55rem;max-width:13rem;text-align:center}
.h-come b{font-size:.95rem;color:var(--inchiostro)}
.h-come small{font-size:.82rem;color:var(--testo-tenue)}

/* la fascia che invita */
.h-fascia{display:grid;grid-template-columns:1fr 1.4fr auto;align-items:center;gap:1.5rem;padding:1.6rem 2rem;border-radius:16px;
  background:linear-gradient(100deg, #e9f4fa, #f3f8fb 60%, #fbf7f0)}
.h-fascia h2{font-size:clamp(1.35rem, 2.6vw, 1.75rem);margin:0}
.h-fascia ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.92rem}
.h-fascia li::before{content:"\2713";color:var(--brand);font-weight:700;margin-right:.5rem}

/* le mete a mosaico: una grande, una larga, due piccole */
.h-mosaico{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto;gap:1rem}
.h-meta{display:block;text-decoration:none;color:var(--testo)}
.h-meta .h-meta-foto{display:block;border-radius:14px;overflow:hidden;background:var(--fondo)}
.h-meta img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.h-meta:hover img{transform:scale(1.04)}
.h-meta small{display:block;margin-top:.55rem;font-size:.8rem;color:var(--testo-tenue)}
.h-meta b{display:block;font-size:.95rem;line-height:1.35;color:var(--inchiostro)}
.h-meta.m0{grid-row:1 / 3}
.h-meta.m0 .h-meta-foto{height:calc(100% - 3.6rem);min-height:320px}
.h-meta.m1{grid-column:2 / 4}
.h-meta.m1 .h-meta-foto{aspect-ratio:2.3/1}
.h-meta.m2 .h-meta-foto, .h-meta.m3 .h-meta-foto{aspect-ratio:1.25/1}

/* le partenze in fila */
.h-testa-fila{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.h-testa-fila a{font-weight:600;font-size:.92rem;color:var(--inchiostro)}
.h-fila-giro{position:relative;margin-top:.8rem}
.h-fila{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * .9rem) / 6);gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:.3rem}
.h-fila::-webkit-scrollbar{display:none}
.scheda-viaggio{scroll-snap-align:start;display:flex;flex-direction:column;gap:.3rem;text-decoration:none;color:var(--testo);min-width:0}
.sv-foto{position:relative;display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--fondo)}
.sv-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.scheda-viaggio:hover .sv-foto img{transform:scale(1.05)}
.sv-notti, .sv-tipo{position:absolute;font-size:.72rem;font-weight:700;border-radius:999px;padding:.15rem .55rem}
.sv-notti{left:.5rem;bottom:.5rem;background:rgba(0,0,0,.55);color:#fff}
.sv-tipo{left:.5rem;top:.5rem;background:#fff;color:var(--inchiostro)}
.sv-tipo.su-misura{background:var(--accento);color:#262626}
.scheda-viaggio b{font-size:.9rem;line-height:1.3;color:var(--inchiostro);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sv-prezzo{font-size:.82rem;color:var(--testo-tenue)}
.sv-prezzo i{font-style:normal}
.h-fila-freccia{position:absolute;top:38%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;background:#fff;box-shadow:var(--ombra);
  font-size:1.5rem;line-height:1;color:var(--inchiostro);cursor:pointer}
.h-fila-freccia.sx{left:-14px}
.h-fila-freccia.dx{right:-14px}
.h-fila-freccia[disabled]{opacity:0;pointer-events:none}

/* prenota senza pensieri */
.h-garanzie{display:grid;grid-template-columns:repeat(4, 1fr);gap:1rem;margin-top:1.2rem}
.h-garanzie > div{border:1px solid var(--linea);border-radius:14px;padding:1.2rem}
.h-garanzie svg{width:24px;height:24px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.h-garanzie h3{font-family:var(--testo-font);font-size:1rem;font-weight:700;margin:.6rem 0 .3rem;color:var(--inchiostro)}
.h-garanzie p{font-size:.86rem;color:var(--testo-tenue);margin:0;line-height:1.5}

/* le domande, su una banda azzurra */
.h-banda{margin-top:clamp(2.5rem, 6vw, 4rem);padding:clamp(2.2rem, 5vw, 3.5rem) 1rem;background:#eaf4fa;text-align:center}
.h-banda .faq{max-width:720px;margin:1.2rem auto 0;text-align:left;background:transparent}
.h-banda .faq:empty{display:none}
.h-banda .faq-voce{background:#fff;border:0;border-radius:10px;margin-bottom:.55rem;padding:0 1rem}
.h-dubbio{margin:1.2rem 0 0;font-size:.92rem;color:var(--testo-tenue)}
.h-dubbio a{font-weight:600;color:var(--inchiostro)}
#recensioni:has(.recensioni:empty){display:none}

/* l'ultimo invito, sopra un paesaggio */
.h-fine{position:relative;margin-top:clamp(2.5rem, 6vw, 4rem);text-align:center;padding-top:1rem}
.h-fine h2{margin-bottom:1rem}
.h-fine-foto{position:relative;height:clamp(220px, 32vw, 380px);margin-top:2rem;background:var(--fondo) center/cover no-repeat}
/* la foto che sfuma nel bianco: un velo sopra, non una maschera - con
   mask-image su una foto larga quanto la pagina il disegno si bloccava */
.h-fine-foto::before{content:"";position:absolute;inset:0 0 auto;height:35%;background:linear-gradient(to bottom, #fff, rgba(255,255,255,0))}

/* il piede scuro */
.h-piede{background:#0d1c27;color:rgba(255,255,255,.72);padding:2.6rem max(1rem, calc((100% - 1180px) / 2)) 1.4rem;font-size:.86rem}
.h-piede-dentro{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.h-piede h3{font-family:var(--testo-font);font-size:.82rem;font-weight:700;color:#fff;margin:0 0 .6rem;text-transform:uppercase;letter-spacing:.06em}
.h-piede a{display:block;color:var(--accento);text-decoration:none;margin-bottom:.35rem}
.h-piede a:hover{text-decoration:underline}
.h-piede p{margin:0 0 .2rem}
.h-piede .pie-nome{color:#fff;font-weight:700}
.h-crediti{margin:2rem 0 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12);font-size:.78rem;color:rgba(255,255,255,.5)}
.h-crediti:empty{display:none}

/* ─── il telefono ──────────────────────────────────────────────── */
@media (max-width:1000px){
  .h-voci{display:none}
  .h-azioni{margin-left:auto}
  .h-perche, .h-garanzie{grid-template-columns:1fr 1fr}
  .h-tessere{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .h-tessera{scroll-snap-align:start}
  .h-fila{grid-auto-columns:44%}
  .h-fascia{grid-template-columns:1fr;text-align:left}
  .h-piede-dentro{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .h-tel{display:none}
  .h-cerca{grid-template-columns:1fr;margin:-30px 1rem 0}
  .h-cerca-campo + .h-cerca-campo{border-left:0;border-top:1px solid var(--linea)}
  .h-cerca-campo:first-child{border-radius:14px 14px 0 0}
  .h-pannello, .h-pannello-mesi{width:100%;top:calc(100% + 6px)}
  .h-cerca-vai{justify-content:center;padding:.8rem}
  .h-perche, .h-garanzie{grid-template-columns:1fr}
  .h-mosaico{grid-template-columns:1fr 1fr}
  .h-meta.m0{grid-row:auto;grid-column:1 / 3}
  .h-meta.m0 .h-meta-foto{height:auto;min-height:0;aspect-ratio:1.4/1}
  .h-meta.m1{grid-column:1 / 3}
  .h-fila-freccia{display:none}
  .h-fila{grid-auto-columns:62%}
  .h-piede-dentro{grid-template-columns:1fr}
}

/* ─── la landing /su-misura (15 ottobre 2026) ──────────────────────
   Stessa testa, stesse sezioni, stesso piede della home; l'eroe col
   modulo e la giostra restano quelli di stile.css. */
.landing .h-testa{border-bottom-color:var(--linea)}
.landing .h-fiducia{margin-top:1.4rem}
.h-come-vai{margin-top:1.8rem}
.landing .h-come li{max-width:16rem}
@media (max-width:820px){ .landing .h-piede{padding-bottom:5.5rem} }