/* Variante "testi fusi nelle immagini": le foto sfumano nel colore della pagina,
   senza bordi né riquadri, e i testi ci si appoggiano sopra.
   Si attiva aggiungendo questo foglio dopo foto-marchi.css. */

/* ---------- Apertura della home ---------- */
.hero-foto { background: var(--carta); color: var(--inchiostro); min-height: min(78vh, 720px); }
.hero-foto::before { display: none; }
/* la foto occupa la destra e sfuma verso sinistra e verso il basso, dentro la sabbia */
.hero-foto::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 74%;
  background: var(--foto) 40% center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 30%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 30%);
  mask-composite: intersect;
}
.hero-foto-in { z-index: 1; }
.hero-foto h1 { color: var(--inchiostro); text-shadow: 0 0 30px var(--carta), 0 0 60px var(--carta); max-width: 14ch; }
.hero-foto p { color: var(--grigio); text-shadow: 0 0 18px var(--carta); }
.hero-foto .occhiello { color: var(--primario); }
.hero-foto .btn-chiaro { border-color: var(--inchiostro); color: var(--inchiostro); }
.hero-foto .btn-chiaro:hover { background: var(--inchiostro); color: #fff; }
.hero-foto .credito { color: var(--grigio-chiaro); z-index: 1; }
.medaglione-hero { box-shadow: 0 10px 30px rgba(60, 40, 20, .18); }
@media (max-width: 760px) {
  .hero-foto { display: block; min-height: 0; }
  .hero-foto::after {
    left: 0; width: auto; bottom: auto; height: 68vw; background-position: 42% center;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%); mask-image: linear-gradient(to top, transparent 0%, #000 45%);
  }
  .hero-foto-in { padding-top: 46vw; }
  .medaglione-hero { width: 118px; height: 118px; }
}

/* ---------- Schede dei marchi: la foto sfuma nella scheda e il nome ci entra sopra ---------- */
.marchio-card { position: relative; }
.marchio-card .marchio-foto {
  aspect-ratio: 5 / 4; margin-bottom: -72px;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
}
.marchio-card > :not(.marchio-foto) { position: relative; }
.marchio-card .marchio-nome { font-size: 3rem; text-shadow: 0 0 22px var(--bianco), 0 0 44px var(--bianco); }
.marchio-card .marchio-ruolo { align-self: flex-start; background: var(--bianco); padding: 5px 8px; border-radius: 4px; margin-left: -8px; }

/* ---------- Mosaico: senza cornici, le foto si toccano e il titolo affiora dal basso ---------- */
.mosaico { gap: 4px; }
.mosaico figure { border-radius: 0; }
.mosaico figure:first-child { border-radius: var(--raggio) 0 0 var(--raggio); }
.mosaico figure:nth-child(3) { border-top-right-radius: var(--raggio); }
.mosaico figure:nth-child(5) { border-bottom-right-radius: var(--raggio); }
.mosaico figcaption { padding-top: 70px; background: linear-gradient(180deg, transparent, rgba(28, 24, 21, .78)); }
.mosaico figcaption strong { font-size: 1.7rem; }

/* ---------- "Perché comprare da noi": il mansardato al tramonto affiora dal buio ---------- */
.fascia-scura:has(.punti) { position: relative; overflow: hidden; }
.fascia-scura:has(.punti)::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 58%;
  background: url("img/giottiline-mansardato-tramonto.jpg") center / cover no-repeat;
  opacity: .55;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%), linear-gradient(to top, transparent 42%, #000 80%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 55%), linear-gradient(to top, transparent 42%, #000 80%);
  mask-composite: intersect;
}
.fascia-scura:has(.punti) > .wrap { position: relative; }
@media (max-width: 760px) { .fascia-scura:has(.punti)::before { width: 100%; opacity: .28; } }

/* ---------- Aperture delle pagine: la foto si apre fino al bordo e sfuma sotto il testo ---------- */
.hero-marchio-pagina { overflow: hidden; overflow: clip; }
.hero-marchio-pagina .hero-marchio-in { gap: 0; }
.hero-marchio-pagina .hero-marchio-testo { position: relative; z-index: 1; }
.hero-marchio-pagina .hero-marchio-testo h1 { text-shadow: 0 0 26px var(--carta), 0 0 52px var(--carta); }
.hero-marchio-pagina .hero-marchio-foto {
  border-radius: 0; background: transparent; margin-left: -18%; margin-right: calc((100vw - min(1200px, 100vw - 32px)) / -2);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to top, transparent 0%, #000 22%), linear-gradient(to bottom, transparent 0%, #000 12%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 38%), linear-gradient(to top, transparent 0%, #000 22%), linear-gradient(to bottom, transparent 0%, #000 12%);
  mask-composite: intersect;
}
@media (max-width: 860px) {
  .hero-marchio-pagina .hero-marchio-foto {
    margin: -8px -16px 0; order: -1;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 40%); mask-image: linear-gradient(to top, transparent 0%, #000 40%);
  }
  .hero-marchio-pagina .hero-marchio-testo { margin-top: -64px; }
}

/* ---------- Servizi: la foto del furgoncino sfuma dentro la scheda ---------- */
.altro-servizio img { -webkit-mask-image: linear-gradient(to right, #000 55%, transparent 100%); mask-image: linear-gradient(to right, #000 55%, transparent 100%); }
@media (max-width: 520px) {
  .altro-servizio img { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
}
/* niente ingrandimento: la scritta incisa nei banner del furgoncino finisce comunque nella sfumatura */
.hero-marchio-pagina .hero-marchio-foto { aspect-ratio: 16 / 11; }
.hero-marchio-pagina .hero-marchio-foto img { transform: none !important; }
.hero-marchio-pagina .hero-marchio-foto.foto-destra img { object-position: 100% 50%; }
@media (max-width: 860px) { .hero-marchio-pagina .hero-marchio-foto { aspect-ratio: 16 / 10; } }
/* banner del furgoncino con scritta incisa a sinistra: sfumatura più lunga, così la scritta sparisce */
@media (min-width: 861px) {
  .hero-marchio-pagina .hero-marchio-foto.foto-destra {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 18%, #000 58%), linear-gradient(to top, transparent 0%, #000 22%), linear-gradient(to bottom, transparent 0%, #000 12%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 18%, #000 58%), linear-gradient(to top, transparent 0%, #000 22%), linear-gradient(to bottom, transparent 0%, #000 12%);
  }
}

/* ---------- Apertura con il cane davanti alla scritta LINEA CAMPER ----------
   Il cane sta a sinistra nella foto: la foto va a sinistra e sfuma verso destra,
   il testo sta a destra. La foto è indicata qui, col percorso relativo a questo file. */
.hero-cane { min-height: min(84vh, 780px); }
.hero-cane::after {
  left: 0; right: auto; width: 70%;
  background-image: url("foto/cane-scritta-dolomiti.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 42% 60%;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 40%), linear-gradient(to top, transparent 0%, #000 22%);
  mask-image: linear-gradient(to left, transparent 0%, #000 40%), linear-gradient(to top, transparent 0%, #000 22%);
}
.hero-cane .hero-foto-in { padding-left: 50%; }
.hero-cane h1 { max-width: 12ch; }
@media (max-width: 760px) {
  .hero-cane::after {
    width: auto; right: 0; height: 104vw; background-position: 40% 88%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 40%); mask-image: linear-gradient(to top, transparent 0%, #000 40%);
  }
  .hero-cane .hero-foto-in { padding-left: 16px; padding-top: 96vw; }
}

/* ---------- Accoglienza: il primo piano del cane sfuma nella pagina ---------- */
.accoglienza-foto {
  border-radius: 0; background: transparent;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 30%), linear-gradient(to top, transparent 0%, #000 22%), linear-gradient(to bottom, transparent 0%, #000 10%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to left, transparent 0%, #000 30%), linear-gradient(to top, transparent 0%, #000 22%), linear-gradient(to bottom, transparent 0%, #000 10%);
  mask-composite: intersect;
}
.accoglienza-in { gap: 0; }
.accoglienza-testo { position: relative; z-index: 1; margin-left: -10%; }
.accoglienza-testo h2 { text-shadow: 0 0 26px var(--carta), 0 0 52px var(--carta); }
@media (max-width: 820px) {
  .accoglienza-foto { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 40%); mask-image: linear-gradient(to top, transparent 0%, #000 40%); margin: 0 -16px; }
  .accoglienza-testo { margin: -70px 0 0; }
}

/* =====================================================================
   TELEFONO E TABLET: i testi non si sovrappongono mai alle foto.
   Le foto sfumano solo verso il basso e il testo comincia sotto, sul colore pieno.
   ===================================================================== */
@media (max-width: 900px) {
  /* apertura della home: il testo parte dopo la foto */
  .hero-cane .hero-foto-in { padding-top: calc(104vw + 8px); }
  .hero-foto h1, .hero-foto p { text-shadow: none; }
  /* schede dei marchi: il nome sotto la foto, non sopra */
  .marchio-card .marchio-foto { margin-bottom: 14px; -webkit-mask-image: none; mask-image: none; }
  .marchio-card .marchio-ruolo { background: none; padding: 0; margin-left: 0; }
  .marchio-card .marchio-nome { text-shadow: none; }
  /* sezione scura: niente foto dietro il testo */
  .fascia-scura:has(.punti)::before { display: none; }
  /* aperture delle pagine: testo sotto la foto */
  .hero-marchio-pagina .hero-marchio-testo { margin-top: 12px; }
  .hero-marchio-pagina .hero-marchio-testo h1 { text-shadow: none; }
  /* accoglienza con Leo: testo sotto la foto */
  .accoglienza-testo { margin: 16px 0 0; }
  .accoglienza-testo h2 { text-shadow: none; }
  /* mosaico: titoli leggibili su fondo scuro pieno */
  .mosaico figcaption { padding-top: 44px; background: linear-gradient(180deg, transparent, rgba(28, 24, 21, .9) 55%); }
}

/* Prima immagine: foto spostata più in alto (si perde un po' di montagna) e sfumatura
   in basso più corta, così Leo si vede bene. */
.hero-cane::after {
  background-position: 42% 84%;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 40%), linear-gradient(to top, transparent 0%, #000 9%);
  mask-image: linear-gradient(to left, transparent 0%, #000 40%), linear-gradient(to top, transparent 0%, #000 9%);
}
@media (max-width: 760px) {
  .hero-cane::after {
    background-position: 40% 100%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 14%); mask-image: linear-gradient(to top, transparent 0%, #000 14%);
  }
}
/* Apertura più bassa dello schermo: titolo più compatto e medaglione più piccolo, così la foto
   si può far salire (si vede Leo) e tutto sta nella prima schermata. */
@media (min-width: 761px) {
  .hero-cane { min-height: min(76vh, 680px); height: auto; }
  .hero-cane .hero-foto-in { padding-block: 28px; }
  .hero-cane h1 { font-size: clamp(2.1rem, 3.5vw, 3.1rem); max-width: 16ch; margin-bottom: 12px; }
  .hero-cane .medaglione-hero { width: clamp(104px, 9vw, 136px); height: clamp(104px, 9vw, 136px); margin-bottom: 12px; }
  .hero-cane p { font-size: 1.05rem; }
  .hero-cane .contatto-veloce { margin-top: 12px; }
}

/* foto delle schede dei marchi fino al bordo (la regola generale delle immagini le limitava) */
.marchio-card .marchio-foto { max-width: none; }

/* Telefono e tablet: la foto di apertura in versione leggera (900 px, circa 180 KB) */
@media (max-width: 900px) {
  .hero-cane::after { background-image: url("foto/cane-scritta-dolomiti-900.jpg"); }
}

/* ---------- Telefono: foto dei servizi intere, così si leggono le scritte (LINEA CAMPER, GIOTTILINE, ETRUSCO) ---------- */
@media (max-width: 520px) {
  .altro-servizio img { aspect-ratio: 4 / 3; object-position: 50% 45% !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }
}

/* ---------- Telefono e tablet: Leo inquadrato quadrato, con il muso intero ---------- */
@media (max-width: 820px) {
  .accoglienza-foto { aspect-ratio: 1 / 1; max-height: 560px;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 16%); mask-image: linear-gradient(to top, transparent 0%, #000 16%); }
  .accoglienza-foto img { object-position: 47% 17%; }
}

/* =====================================================================
   RITOCCHI FOTO SUL TELEFONO (8/11/2026, richiesta di Andrea)
   Regola: sul telefono nessun testo sopra le foto; foto con bordi e proporzioni regolari,
   testi sotto, allineati a sinistra.
   ===================================================================== */

/* Occhiello su più righe: la bandierina resta accanto alla prima riga */
.occhiello { align-items: flex-start; line-height: 1.35; }
.occhiello::before { flex: none; margin-top: .55em; }

@media (max-width: 760px) {
  .occhiello { letter-spacing: .1em; }

  /* Apertura della home: foto un po' più bassa, medaglione più piccolo appoggiato sul bordo
     della foto, così titolo e testo arrivano nella prima schermata */
  .hero-cane::after { height: 86vw; background-position: 40% 100%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 18%); mask-image: linear-gradient(to top, transparent 0%, #000 18%); }
  .hero-cane .hero-foto-in { padding-top: calc(86vw - 52px); padding-bottom: 40px; }
  .hero-cane .medaglione-hero { width: 92px; height: 92px; margin-bottom: 16px; }
  .hero-cane h1 { font-size: clamp(2.1rem, 9.4vw, 2.6rem); max-width: none; margin-bottom: 14px; }
  .hero-cane p { font-size: 1.05rem; }

  /* Mosaico "L'Italia, a modo tuo": i titoli escono dalla foto e vanno sotto */
  .mosaico { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 20px 12px; }
  .mosaico figure, .mosaico figure:first-child, .mosaico figure:nth-child(3), .mosaico figure:nth-child(5) {
    border-radius: 0; overflow: visible; background: none; grid-row: auto; }
  .mosaico figure:first-child { grid-column: span 2; }
  .mosaico img { height: auto; aspect-ratio: 1 / 1; border-radius: var(--raggio); background: var(--segnaposto); }
  .mosaico figure:first-child img { aspect-ratio: 16 / 9; }
  .mosaico figure:hover img { transform: none; }
  .mosaico figcaption { position: static; display: block; padding: 10px 2px 0; background: none; color: var(--inchiostro); }
  .mosaico figcaption strong { display: block; font-size: 1.3rem; line-height: 1.1; }
  .mosaico figcaption small { display: block; margin-top: 3px; font-size: .78rem; color: var(--grigio); opacity: 1; }

  /* Medaglione della fascia scura: più piccolo */
  .medaglione-grande { width: 112px; height: 112px; }

  /* Galleria del camper in vendita: miniature su una riga che si scorre di lato */
  .miniature { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 23%; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .miniature::-webkit-scrollbar { display: none; }
  .miniature button { scroll-snap-align: start; }
  .galleria-principale { touch-action: pan-y; }
  .galleria-conta { display: block; margin-top: 8px; font-size: .9rem; color: var(--grigio); }

  /* Orari: una fascia per riga */
  .orari-chiari .fascia { display: block; white-space: nowrap; }
  .orari-chiari .sep { display: none; }
}
@media (min-width: 761px) { .galleria-conta { display: none; } }
.orari-chiari .fascia { white-space: nowrap; }

/* Aperture delle pagine (Chi siamo, Assistenza, Noleggio, Ricambi, Valuta) sul telefono:
   foto in alto a tutta larghezza, medaglione piccolo sul bordo della foto, testo a sinistra */
@media (max-width: 860px) {
  .hero-marchio-pagina { padding-top: 0; }
  .hero-marchio-pagina .hero-marchio-foto { margin-top: 0; aspect-ratio: 4 / 3; }
  .hero-marchio-pagina .hero-marchio-testo { text-align: left; margin-top: -40px; }
  .hero-marchio-pagina .hero-marchio-testo h1,
  .hero-marchio-pagina .hero-marchio-testo .intro { margin-inline: 0; }
  .hero-marchio-pagina .hero-marchio-testo .riga-btn { justify-content: flex-start; }
  .hero-marchio-pagina .medaglione-pagina { width: 80px; height: 80px; margin: 0 0 14px; position: relative; }
}
/* Home sul telefono: medaglione sotto la foto (non copre Leon), con la scritta della concessionaria accanto */
@media (max-width: 760px) {
  .hero-cane .hero-foto-in { display: grid; grid-template-columns: 84px 1fr; column-gap: 16px; align-items: center; padding-top: calc(86vw + 2px); }
  .hero-cane .hero-foto-in > * { grid-column: 1 / -1; }
  .hero-cane .hero-foto-in > .medaglione-hero { grid-column: 1; width: 84px; height: 84px; margin: 0 0 18px; }
  .hero-cane .hero-foto-in > .occhiello { grid-column: 2; margin: 0 0 18px; font-size: .84rem; }
  .hero-cane .hero-foto-in > .occhiello::before { display: none; }
}
.unito { white-space: nowrap; }
@media (max-width: 760px) {
  .hero-cane .hero-foto-in { grid-template-columns: 84px minmax(0, 1fr); }
  .hero-cane .hero-foto-in > .occhiello { display: block; }
}
/* Scheda del camper in vendita sul telefono: foto, poi nome e prezzo, poi la descrizione */
@media (max-width: 900px) {
  .scheda { display: flex; flex-direction: column; gap: 24px; }
  .scheda > .galleria { display: contents; }
  .scheda .galleria-principale, .scheda .miniature, .scheda .galleria-conta { order: 1; }
  .scheda .miniature { margin-top: -14px; }
  .scheda .galleria-conta { margin-top: -18px; }
  .scheda > .scheda-lato { order: 2; }
  .scheda .scheda-descrizione { order: 3; margin-top: 0; }
}
/* Schede dei modelli: la cornice della foto grande prende la forma più comune delle foto (impostata dal
   generatore) e il fondo è quello della pagina, così le foto panoramiche Giottiline non hanno bande nere */
.modello-galleria-grande { background: transparent; touch-action: pan-y; }
.modello-galleria-grande img { height: 100%; aspect-ratio: auto; object-fit: contain; }
.modello-galleria .galleria-conta { margin: 0; }
/* scritta della concessionaria in home: testo unico (le due marche restano sulla stessa riga) */
.hero-cane .occhiello { display: block; }
.hero-cane .occhiello::before { content: ""; display: inline-block; vertical-align: middle; margin: -3px 10px 0 0; }

/* =====================================================================
   ANNUNCI DEI MODELLI (8/11/2026): ogni modello Giottiline ed Etrusco ha una scheda
   uguale a quella dei camper in vendita; nelle gamme e nelle pagine di scelta i modelli
   sono card come gli annunci, con l'etichetta "Su ordinazione" e la piantina.
   ===================================================================== */
.etichetta-ordine { right: 12px; background: var(--bianco); color: var(--inchiostro); box-shadow: 0 0 0 1px var(--linea); }
.etichetta-showroom { right: 12px; background: var(--primario); color: #fff; }
.card-foto.su-bianco { background: #fff; }
.card-foto.su-bianco img { object-fit: contain; padding: 8px 8px 0; }
.card-camper:hover .card-foto.su-bianco img { transform: none; }
.card-pianta { display: block; margin: 4px 0 14px; padding: 8px; background: #fff; border: 1px solid var(--linea); border-radius: 6px; }
.card-pianta img { display: block; width: 100%; height: 76px; object-fit: contain; }
.prezzo strong.su-richiesta { font-size: 1.25rem; color: var(--inchiostro); }
.prezzo-grande strong.su-richiesta { font-size: 1.9rem; color: var(--primario); }
.annuncio-modello .galleria-principale { background: var(--bianco); border: 1px solid var(--linea); }
.annuncio-modello .galleria-principale.su-bianco { background: #fff; }
.annuncio-modello .galleria-principale img { object-fit: contain; }
.annuncio-modello .galleria-sagoma { display: grid; place-items: center; color: var(--grigio); padding: 8%; }
.annuncio-modello .miniature button { background: #fff; }
.scheda-sottotitolo { font-size: 1.2rem; font-weight: 600; color: var(--inchiostro); }
.annuncio-modello .modello-vetrina { margin: 4px 0 18px; }
.annuncio-modello .modello-piante-sez h2 { margin-bottom: 18px; }
.annuncio-modello .scheda-info { padding-top: 48px; }
.annuncio-modello .scheda-info .nota .link-esterno { white-space: nowrap; }
.griglia-modelli { margin-top: 8px; }
.annuncio-modello .scheda-info .approfondisci + .approfondisci { margin-top: 14px; }
.annuncio-modello .scheda-descrizione p { margin: 0 0 .8em; }
@media (max-width: 900px) { .annuncio-modello .scheda-info { padding-top: 32px; gap: 14px; padding-bottom: 40px; } }
.card-vetrina { margin: 0 0 10px; font-weight: 700; color: var(--primario); font-size: .95rem; }

/* Card delle gamme sul telefono: foto quadrata in alto a sinistra (prima si allungava per tutta l'altezza
   della card e le foto Etrusco, panoramiche, tagliavano fuori il camper) */
@media (max-width: 640px) {
  .gamma-scheda { grid-template-columns: 124px minmax(0, 1fr); align-items: start; }
  .gamma-foto { aspect-ratio: 1; height: auto; min-height: 0; margin: 12px 0 12px 12px; border-radius: 8px; }
}
.scheda-descrizione .dotazioni-titolo { margin: 18px 0 8px; font-size: 1.25rem; }

/* Avviso in home (dalla gestione) e messaggio delle chiusure straordinarie accanto agli orari */
.avviso-home { padding-block: 12px; font-weight: 600; }
.avviso-home-in { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center; text-align: center; }
.avviso-home p { margin: 0; max-width: 70ch; }
.avviso-evidenza { background: var(--primario); color: #fff; }
.avviso-discreto { background: var(--primario-tenue); color: var(--inchiostro); border-bottom: 1px solid var(--linea); }
.avviso-chiusura { background: var(--notte); color: var(--su-notte); }
.avviso-home-btn { display: inline-block; padding: 8px 16px; border-radius: 999px; font-weight: 700; text-decoration: none; white-space: nowrap;
  background: #fff; color: var(--primario-scuro); }
.avviso-discreto .avviso-home-btn { background: var(--primario); color: #fff; }
.orari-chiusura { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; background: var(--primario-tenue); color: var(--inchiostro); font-weight: 600; }

/* Tour 360° del camper */
.btn-tour { margin-top: 12px; gap: 10px; }
.tour-segno { font: 700 .8rem/1 var(--testo); background: var(--inchiostro); color: #fff; border-radius: 5px; padding: 4px 6px; letter-spacing: .04em; }
.etichetta-360 { right: 12px; top: auto; bottom: 12px; background: rgba(0, 0, 0, .7); color: #fff; }
body.tour-aperto { overflow: hidden; }
.tour-velo { position: fixed; inset: 0; z-index: 1000; background: #111; color: #fff; display: grid; grid-template-rows: auto 1fr auto;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.tour-testa { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; }
.tour-testa strong { display: block; font-size: 1.1rem; }
.tour-testa span { font-size: .85rem; color: #ccc; }
.tour-testa .btn { background: #fff; color: var(--inchiostro); }
.tour-visore { position: relative; min-height: 0; }
.tour-attesa { margin: 0; position: absolute; inset: 0; display: grid; place-items: center; color: #ccc; }
.tour-punti { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 14px; scrollbar-width: none; }
.tour-punti button { flex: none; border: 1px solid #555; background: #222; color: #fff; border-radius: 999px; padding: 9px 16px; font: 600 .95rem var(--testo); cursor: pointer; }
.tour-punti button[aria-current="true"] { background: #fff; color: var(--inchiostro); border-color: #fff; }
.card-foto img.su-bianco { object-fit: contain; padding: 8px 8px 0; background: #fff; }
.card-camper:hover .card-foto img.su-bianco { transform: none; }

/* ---------- articoli («Consigli») e pagine nuove scritte dalla gestione ---------- */
.articolo-corpo { max-width: 760px; padding-block: 12px 40px; }
.articolo-corpo h1 { margin-bottom: 8px; }
.articolo-corpo h2 { margin: 32px 0 10px; font-size: 1.5rem; }
.articolo-corpo p, .articolo-corpo li { font-size: 1.08rem; line-height: 1.65; }
.articolo-corpo .intro { color: var(--grigio); font-weight: 600; }
.articolo-data { margin: 0 0 14px; font-size: .9rem; color: var(--grigio); }
.articolo-foto { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--raggio); margin: 18px 0 8px; }
.articolo-fine { max-width: 760px; padding-bottom: 48px; }
.griglia-articoli { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 24px; }
.card-articolo { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--raggio); overflow: hidden; transition: transform .18s, box-shadow .18s; }
.card-articolo a { display: block; color: inherit; text-decoration: none; height: 100%; }
.card-articolo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.card-articolo .card-corpo { padding: 16px 18px 20px; }
.card-articolo h2 { font-size: 1.25rem; margin: 0 0 8px; color: inherit; text-decoration: none; }
.card-articolo a, .card-articolo a:hover { text-decoration: none; }
.card-articolo p { margin: 0 0 12px; color: var(--grigio); }
.card-articolo .leggi { font-weight: 700; }
.card-articolo:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgb(0 0 0 / .08); }
@media (prefers-reduced-motion: reduce) { .card-articolo, .card-articolo:hover { transition: none; transform: none; } }

/* avviso privacy sotto i moduli */
.nota-privacy { font-size: .85rem; color: var(--grigio); margin: 4px 0 0; }
.nota-privacy a { color: inherit; }

/* mappa e video: segnaposto finché il visitatore non li apre */
.incorpora { display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: var(--segnaposto, #e9e2d6); color: var(--testo, #1f1b16); }
.incorpora-testo { max-width: 34ch; font-size: .95rem; color: var(--grigio); }
.incorpora-testo strong { display: block; font-size: 1.1rem; color: inherit; margin-bottom: 4px; }
.video-cornice.incorpora { position: relative; background: #1f1b16; color: #f3ede3; }
.video-cornice.incorpora .incorpora-testo { color: #d9cfc2; }
.incorpora .riga-btn { justify-content: center; }