/* =============================================================================
   HobClick — le pagine dell'app (presentazione, supporto, privacy).

   Lo stesso file serve due siti: lb26.ch (hobclick-mktg, -support, -privacy)
   e hobclick.ch (index, support, privacy). La sorgente sta in hobclick-site;
   strumenti/genera-pagine.py lo copia in lb26-site.

   Colori della cantina di Hob: marrone scuro, ottone, cuoio, verde del
   cappello, carta crema. Titoli in Fraunces (serif), testo in Inter: tutti e
   due serviti dal nostro server (assets/fonts), nessuna richiesta a terzi.

   Movimento: solo transform e opacity, avviato da IntersectionObserver.
   Con «Riduci movimento» tutto resta fermo e visibile.
   ========================================================================== */

:root {
  --hc-cantina: #291709;
  --hc-buio: #120a04;
  --hc-ottone: #FFBD5C;
  --hc-ottone-2: #E0953A;
  --hc-cuoio-a: #9E6633;
  --hc-cuoio-b: #5C3517;
  --hc-verde: #1C5233;
  --hc-carta: #FBF6EB;
  --hc-carta-2: #F4EAD7;
  --hc-ink: #2B1A0B;
  --hc-ink-2: #5E4630;
  --hc-crema: #FBEFD8;
  --hc-crema-2: #E3D2B6;
  --hc-serif: "Fraunces", "New York", Georgia, "Times New Roman", serif;
  --hc-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hc-ease: cubic-bezier(.2, .8, .2, 1);
  --hc-wrap: min(100% - 32px, 1120px);
  --hc-sec: clamp(64px, 40px + 7vw, 128px);
}

/* --- base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--hc-carta); color: var(--hc-ink);
  font: 400 1.0625rem/1.6 var(--hc-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--hc-cuoio-a); text-underline-offset: 3px; }
a:hover { color: var(--hc-cuoio-b); }
h1, h2, h3 { font-family: var(--hc-serif); font-weight: 600; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--hc-ottone); outline-offset: 3px; border-radius: 6px; }
.hc-wrap { width: var(--hc-wrap); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hc-skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--hc-ottone); color: var(--hc-buio);
  padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.hc-skip:focus { top: 10px; }

/* --- lingue: si nascondono le altre, la lingua scelta resta com'e' --------- */
html[data-hl="it"] [data-lang]:not([data-lang="it"]),
html[data-hl="de"] [data-lang]:not([data-lang="de"]),
html[data-hl="fr"] [data-lang]:not([data-lang="fr"]),
html[data-hl="en"] [data-lang]:not([data-lang="en"]) { display: none !important; }

/* --- barra in alto ---------------------------------------------------------- */
.hc-bar {
  position: sticky; top: 0; z-index: 30;
  background: rgb(18 10 4 / 0.88);
  border-bottom: 1px solid rgb(255 189 92 / 0.16);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hc-bar { background: rgb(18 10 4 / 0.72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
.hc-bar__in { display: flex; align-items: center; gap: 10px; min-height: 60px; padding-block: 8px; }
.hc-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hc-crema); margin-right: auto; min-width: 0; }
.hc-brand img { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 0 0 1px rgb(255 189 92 / 0.45); flex: none; }
.hc-brand span { font: 600 1.3rem/1 var(--hc-serif); letter-spacing: 0.005em; white-space: nowrap; }
.hc-brand b { font-weight: 600; color: var(--hc-ottone); }
.hc-brand:hover { color: #fff; }
.hc-nav { display: none; gap: 4px; }
.hc-nav a, .hc-up {
  color: var(--hc-crema-2); text-decoration: none; font-size: 0.875rem; font-weight: 500;
  padding: 8px 12px; border-radius: 999px; min-height: 40px; display: inline-flex; align-items: center; gap: 6px;
}
.hc-nav a:hover, .hc-up:hover { background: rgb(255 189 92 / 0.12); color: #fff; }
.hc-nav a[aria-current="page"] { color: var(--hc-ottone); }
.hc-up { border: 1px solid rgb(255 189 92 / 0.35); padding-inline: 10px 12px; }
.hc-up svg { width: 15px; height: 15px; }
.hc-picker { position: relative; display: inline-flex; align-items: center; gap: 4px; color: var(--hc-crema-2); }
.hc-picker svg { width: 16px; height: 16px; opacity: 0.75; flex: none; }
.hc-picker select {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit;
  font: 500 0.875rem/1 var(--hc-sans); padding: 10px 4px; max-width: 7.4rem; cursor: pointer;
  text-overflow: ellipsis;
}
.hc-picker select option { background: var(--hc-cantina); color: var(--hc-crema); }
@media (min-width: 760px) { .hc-nav { display: flex; } }
@media (max-width: 400px) {
  .hc-brand span { font-size: 1.15rem; }
  .hc-brand img { width: 34px; height: 34px; }
  .hc-picker select { max-width: 5.6rem; }
}

/* l'avviso «questa pagina esiste in...» per le lingue senza traduzione */
.hc-note {
  background: #FFE9C2; color: #4A2D10; font-size: 0.9rem; text-align: center;
  padding: 10px 16px; border-bottom: 1px solid #F0CF94;
}

/* --- pulsanti ---------------------------------------------------------------- */
.hc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px;
  font: 600 1rem/1.1 var(--hc-sans); text-decoration: none; cursor: pointer;
  transition: transform 260ms var(--hc-ease), background-color 260ms, box-shadow 260ms;
}
.hc-btn svg { width: 18px; height: 18px; flex: none; }
.hc-btn--oro { background: linear-gradient(180deg, #FFCB7A, var(--hc-ottone) 45%, var(--hc-ottone-2)); color: #2A1606;
  box-shadow: 0 14px 30px -14px rgb(255 189 92 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.5); }
.hc-btn--oro:hover { color: #2A1606; transform: translateY(-2px); }
.hc-btn--vuoto { color: var(--hc-crema); border: 1.5px solid rgb(255 189 92 / 0.5); }
.hc-btn--vuoto:hover { color: #fff; background: rgb(255 189 92 / 0.12); transform: translateY(-2px); }
.hc-btn--cuoio { background: linear-gradient(160deg, var(--hc-cuoio-a), var(--hc-cuoio-b)); color: #FFF4E2; }
.hc-btn--cuoio:hover { color: #fff; transform: translateY(-2px); }
.hc-btn--chiaro { color: var(--hc-cuoio-b); border: 1.5px solid rgb(92 53 23 / 0.35); }
.hc-btn--chiaro:hover { color: var(--hc-cuoio-b); background: rgb(158 102 51 / 0.08); transform: translateY(-2px); }

/* «Presto sull'App Store»: l'app non e' ancora uscita, niente link allo Store */
.hc-presto {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px;
  padding: 8px 16px; border-radius: 999px; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--hc-ottone); background: rgb(255 189 92 / 0.1); border: 1px solid rgb(255 189 92 / 0.45);
}
.hc-presto::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hc-ottone);
  box-shadow: 0 0 10px 2px rgb(255 189 92 / 0.7); flex: none;
}
.hc-presto--chiaro { color: var(--hc-cuoio-b); background: rgb(255 189 92 / 0.22); border-color: rgb(158 102 51 / 0.4); }
.hc-presto--chiaro::before { background: var(--hc-cuoio-a); box-shadow: none; }

/* ==========================================================================
   Apertura: la cantina buia, Hob con la lanterna, il nome, il clic
   ========================================================================== */
.hc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - 60px);
  min-height: calc(100lvh - 60px);
  display: grid; place-items: center; text-align: center;
  padding: 36px 0 84px;
  color: var(--hc-crema);
  background:
    radial-gradient(120% 70% at 50% 34%, #5B3713 0%, #3A2109 30%, var(--hc-cantina) 52%, var(--hc-buio) 100%);
}
.hc-dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hc-hero__in { position: relative; display: grid; justify-items: center; gap: 14px; }

.hc-hob { position: relative; width: clamp(200px, 56vw, 330px); margin-bottom: 8px; }
.hc-hob__alone {                                  /* la luce della lanterna sulla parete */
  position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; z-index: -1;
  translate: -38% -50%;
  background: radial-gradient(circle, rgb(255 189 92 / 0.42) 0%, rgb(255 160 60 / 0.16) 34%, transparent 64%);
}
.hc-hob__quadro {
  position: relative; overflow: hidden; border-radius: 22%;
  aspect-ratio: 1;
  box-shadow: 0 0 0 3px rgb(255 189 92 / 0.62), 0 34px 70px -24px rgb(0 0 0 / 0.85);
  background: var(--hc-cantina);
}
.hc-hob__quadro img { width: 100%; height: 100%; object-fit: cover; }
.hc-hob__lanterna {                               /* il vetro della lanterna che si accende */
  position: absolute; left: 74.5%; top: 52%; width: 44%; aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(255 236 180 / 0.95) 0%, rgb(255 200 110 / 0.55) 22%, rgb(255 170 70 / 0.18) 46%, transparent 68%);
  mix-blend-mode: screen; opacity: .9;
}
.hc-hob__lampo {                                  /* il flash dello scatto */
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 46%, #fff 0%, rgb(255 255 255 / 0.9) 38%, rgb(255 242 214 / 0.35) 70%, transparent 100%);
}
.hc-hob__anello {
  position: absolute; inset: -5%; border-radius: 24%; pointer-events: none;
  border: 2px solid var(--hc-ottone); opacity: 0;
}

.hc-nome { font-size: clamp(3.1rem, 1.8rem + 6.4vw, 6rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.hc-nome span { display: inline-block; }
.hc-nome .h { color: var(--hc-crema); text-shadow: 0 2px 24px rgb(255 189 92 / 0.18); }
.hc-nome .c {
  background: linear-gradient(180deg, #FFD9A0 0%, var(--hc-ottone) 45%, #C97A2E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hc-motto { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: rgb(251 239 216 / 0.66); }
.hc-hero__lead { max-width: 36rem; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); color: #E9D9BF; margin-top: 6px; }
.hc-hero__azioni { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 12px; }
.hc-hero__presto { margin-top: 6px; }
.hc-apparecchi { font-size: 0.85rem; letter-spacing: 0.14em; color: rgb(251 239 216 / 0.55); }
.hc-giu {
  position: absolute; left: 50%; bottom: 22px; translate: -50% 0;
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: rgb(255 189 92 / 0.8); text-decoration: none;
}
.hc-giu svg { width: 24px; height: 24px; }

/* --- la sequenza d'apertura (solo con JS e senza «Riduci movimento») ------- */
@keyframes hc-entra    { from { opacity: 0; translate: 0 18px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes hc-accende  { 0% { opacity: 0; } 30% { opacity: .85; } 42% { opacity: .35; } 60% { opacity: .95; } 100% { opacity: 1; } }
@keyframes hc-pulsa    { from { opacity: .72; scale: .94; } to { opacity: 1; scale: 1.06; } }
@keyframes hc-alone    { from { opacity: 0; } to { opacity: 1; } }
@keyframes hc-respira  { from { opacity: .78; scale: .97; } to { opacity: 1; scale: 1.03; } }
@keyframes hc-lettera  { from { opacity: 0; translate: 0 .45em; } to { opacity: 1; translate: 0 0; } }
@keyframes hc-sale     { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes hc-lampo    { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hc-clic     { 0% { scale: 1; } 30% { scale: .965; } 100% { scale: 1; } }
@keyframes hc-anello   { from { opacity: .9; scale: .97; } to { opacity: 0; scale: 1.14; } }
@keyframes hc-dondola  { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes hc-saltella { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }

html.hc-anima .hc-hob { animation: hc-entra 1s var(--hc-ease) .15s both; }
html.hc-anima .hc-hob__quadro { animation: hc-clic .42s ease-out 2.3s both; }
html.hc-anima .hc-hob__lanterna { animation: hc-accende 1.1s linear .8s both, hc-pulsa 2.4s ease-in-out 1.9s infinite alternate; }
html.hc-anima .hc-hob__alone { animation: hc-alone 1.2s ease-out 1s both, hc-respira 3.2s ease-in-out 2.2s infinite alternate; }
html.hc-anima .hc-hob__lampo { animation: hc-lampo .7s ease-out 2.3s both; }
html.hc-anima .hc-hob__anello { animation: hc-anello 1s ease-out 2.3s both; }
html.hc-anima .hc-nome span { animation: hc-lettera .6s var(--hc-ease) calc(1.05s + var(--i) * 75ms) both; }
html.hc-anima .hc-hero .hc-sale { animation: hc-sale .8s var(--hc-ease) calc(1.9s + var(--d, 0) * 150ms) both; }
html.hc-anima .hc-giu { animation: hc-sale .8s ease-out 3s both; }
html.hc-anima .hc-giu svg { animation: hc-saltella 2s ease-in-out 3.6s infinite; }
html.hc-anima .hc-hob { will-change: transform, opacity; }

/* ==========================================================================
   Sezioni
   ========================================================================== */
.hc-sec { padding-block: var(--hc-sec); position: relative; overflow: hidden; }
@supports (overflow: clip) { .hc-sec { overflow: clip; } }   /* Hob entra di lato: niente scorrimento orizzontale */
.hc-sec--carta2 { background: var(--hc-carta-2); }
.hc-sec--buio {
  color: var(--hc-crema);
  background: radial-gradient(90% 80% at 80% 0%, #4A2B0F 0%, var(--hc-cantina) 46%, var(--hc-buio) 100%);
}
.hc-kicker { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hc-cuoio-a); margin-bottom: 10px; }
.hc-sec--buio .hc-kicker { color: var(--hc-ottone); }
.hc-h2 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem); }
.hc-head { max-width: 42rem; margin-bottom: clamp(28px, 4vw, 48px); }
.hc-head p { margin-top: 14px; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); color: var(--hc-ink-2); }
.hc-sec--buio .hc-head p { color: #E3D2B6; }

/* --- Hob che accompagna: ritaglio rotondo e fumetto ------------------------- */
.hc-guida { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.hc-guida--destra { flex-direction: row-reverse; justify-content: flex-start; }
.hc-guida__hob { flex: none; width: 78px; height: 78px; }
.hc-guida__hob img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 38% 30%;
  box-shadow: 0 0 0 3px var(--hc-ottone), 0 12px 26px -10px rgb(41 23 9 / 0.6);
}
.hc-fumetto {
  position: relative; background: #fff; color: var(--hc-ink);
  font: 600 1.08rem/1.3 var(--hc-serif); padding: 12px 18px; border-radius: 18px;
  box-shadow: 0 10px 28px -14px rgb(41 23 9 / 0.45); max-width: 22rem;
}
.hc-fumetto::before {
  content: ""; position: absolute; left: -8px; top: 50%; width: 16px; height: 16px; background: inherit;
  translate: 0 -50%; rotate: 45deg; border-radius: 3px;
}
.hc-guida--destra .hc-fumetto::before { left: auto; right: -8px; }
.hc-sec--buio .hc-fumetto { background: #FFF3DE; }

html.js .hc-guida__hob { opacity: 0; translate: -36px 0; rotate: -16deg; transition: opacity .6s ease-out, translate .8s var(--hc-ease), rotate .8s var(--hc-ease); }
html.js .hc-guida--destra .hc-guida__hob { translate: 36px 0; rotate: 16deg; }
html.js .hc-fumetto { opacity: 0; scale: .6; transform-origin: 0 50%; transition: opacity .35s ease-out .45s, scale .5s cubic-bezier(.3, 1.5, .5, 1) .45s; }
html.js .hc-guida--destra .hc-fumetto { transform-origin: 100% 50%; }
html.js .hc-guida.is-in .hc-guida__hob { opacity: 1; translate: 0 0; rotate: 0deg; }
html.js .hc-guida.is-in .hc-fumetto { opacity: 1; scale: 1; }
html.hc-anima .hc-guida.is-in .hc-guida__hob img { animation: hc-dondola 3.6s ease-in-out 1.2s infinite alternate; }

/* --- comparsa allo scorrimento --------------------------------------------- */
html.js .hc-r { opacity: 0; translate: 0 26px; transition: opacity .8s ease-out, translate .9s var(--hc-ease); transition-delay: calc(var(--d, 0) * 90ms); }
html.js .hc-r.is-in { opacity: 1; translate: 0 0; }

/* --- il telefono con la schermata, e il clic quando appare ------------------- */
.hc-tel {
  position: relative; width: min(290px, 74vw); aspect-ratio: 620 / 1348; margin-inline: auto;
  padding: 10px; border-radius: 46px;
  background: linear-gradient(160deg, #7A5A3C, #2B1A0B 40%, #5C3F25);
  box-shadow: 0 46px 80px -36px rgb(41 23 9 / 0.75), 0 0 0 1px rgb(0 0 0 / 0.25);
}
.hc-tel img { width: 100%; height: 100%; object-fit: cover; border-radius: 36px; background: var(--hc-carta-2); }
.hc-tel::after { content: ""; position: absolute; top: 21px; left: 50%; translate: -50% 0; width: 30%; height: 18px; border-radius: 999px; background: #0E0804; }
.hc-tel__lampo { position: absolute; inset: 10px; border-radius: 36px; background: #fff; opacity: 0; pointer-events: none; }
.hc-tel-box { position: relative; display: grid; place-items: center; }
.hc-tel-box::before {
  content: ""; position: absolute; width: 92%; max-width: 420px; aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgb(255 189 92 / 0.45), transparent 66%);
}
html.hc-anima .hc-tel.is-in { animation: hc-clic .45s ease-out .35s both; }
html.hc-anima .hc-tel.is-in .hc-tel__lampo { animation: hc-lampo .75s ease-out .35s both; }

/* --- come funziona: tre passi ------------------------------------------------ */
.hc-duo { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 880px) {
  .hc-duo { grid-template-columns: .9fr 1.1fr; }
  .hc-duo--testo { grid-template-columns: 1fr 1.1fr; }
}
.hc-passi { display: grid; gap: 22px; list-style: none; margin: 0; padding: 0; }
.hc-passo { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.hc-passo__n {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font: 700 1.35rem/1 var(--hc-serif); color: #FFF4E2;
  background: linear-gradient(160deg, var(--hc-cuoio-a), var(--hc-cuoio-b));
  box-shadow: 0 0 0 3px rgb(255 189 92 / 0.55);
}
.hc-passo h3 { font-size: 1.35rem; margin: 4px 0 6px; }
.hc-passo p { color: var(--hc-ink-2); }

/* --- Mappa di Hob ------------------------------------------------------------ */
.hc-mappa {
  background: #FFFDF8; border-radius: 24px; padding: clamp(18px, 3vw, 28px);
  box-shadow: 0 30px 60px -36px rgb(41 23 9 / 0.5), 0 0 0 1px rgb(92 53 23 / 0.1);
}
.hc-mappa__cap { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hc-ink-2); margin-bottom: 12px; }
.hc-mappa__riga {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 16px; background: var(--hc-carta);
  margin-left: calc(var(--liv) * clamp(10px, 3vw, 26px));
}
.hc-mappa__riga + .hc-mappa__riga { margin-top: 10px; }
.hc-mappa__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--hc-verde); }
.hc-mappa__ico svg { width: 22px; height: 22px; }
.hc-mappa__nome { font: 600 1.05rem/1.2 var(--hc-serif); min-width: 0; }
.hc-mappa__nome small { display: block; font: 500 0.82rem/1.3 var(--hc-sans); color: var(--hc-ink-2); margin-top: 2px; }
.hc-mappa__val { font: 600 0.95rem/1.2 var(--hc-serif); color: var(--hc-cuoio-a); text-align: right; white-space: nowrap; }
html.js .hc-mappa .hc-mappa__riga { opacity: 0; translate: -18px 0; transition: opacity .6s ease-out, translate .7s var(--hc-ease); transition-delay: calc(var(--liv) * 160ms + 150ms); }
html.js .hc-mappa.is-in .hc-mappa__riga { opacity: 1; translate: 0 0; }
@media (max-width: 420px) {
  .hc-mappa__riga { grid-template-columns: 34px 1fr; }
  .hc-mappa__ico { width: 34px; height: 34px; }
  .hc-mappa__val { grid-column: 2; text-align: left; }
}

/* --- schede delle funzioni --------------------------------------------------- */
.hc-schede { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.hc-scheda {
  background: #FFFDF8; border-radius: 20px; padding: 22px;
  box-shadow: 0 18px 40px -30px rgb(41 23 9 / 0.5), 0 0 0 1px rgb(92 53 23 / 0.1);
}
.hc-scheda__ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 14px;
  color: #FFF4E2; background: linear-gradient(160deg, var(--hc-cuoio-a), var(--hc-cuoio-b));
}
.hc-scheda__ico svg { width: 24px; height: 24px; }
.hc-scheda h3 { font-size: 1.22rem; margin-bottom: 6px; }
.hc-scheda p { color: var(--hc-ink-2); font-size: 0.98rem; }

/* --- Casa e Pro -------------------------------------------------------------- */
.hc-modi { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.hc-modo { border-radius: 24px; padding: clamp(22px, 3vw, 32px); }
.hc-modo h3 { font-size: 1.7rem; margin-bottom: 4px; }
.hc-modo__per { font-weight: 600; margin-bottom: 14px; }
.hc-modo li { display: flex; gap: 10px; align-items: baseline; padding-block: 5px; }
.hc-modo li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; translate: 0 -2px; }
.hc-modo--casa { background: #FFFDF8; box-shadow: 0 0 0 1px rgb(28 82 51 / 0.25), 0 24px 50px -36px rgb(41 23 9 / 0.5); }
.hc-modo--casa h3, .hc-modo--casa .hc-modo__per { color: var(--hc-verde); }
.hc-modo--casa li { color: var(--hc-ink-2); }
.hc-modo--casa li::before { background: var(--hc-verde); }
.hc-modo--pro { color: var(--hc-crema); background: linear-gradient(155deg, var(--hc-cuoio-a), var(--hc-cuoio-b) 60%, #3E220D); box-shadow: 0 24px 50px -30px rgb(41 23 9 / 0.75); }
.hc-modo--pro h3, .hc-modo--pro .hc-modo__per { color: var(--hc-ottone); }
.hc-modo--pro li::before { background: var(--hc-ottone); }
.hc-nota { margin-top: 18px; color: var(--hc-ink-2); font-size: 0.95rem; }

/* --- privacy in breve (fondo scuro) ------------------------------------------ */
.hc-patti { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.hc-patto { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 16px; border-radius: 18px; background: rgb(255 244 223 / 0.05); border: 1px solid rgb(255 189 92 / 0.18); }
.hc-patto svg { width: 34px; height: 34px; color: var(--hc-ottone); }
.hc-patto strong { display: block; font: 600 1.1rem/1.25 var(--hc-serif); color: #FFF1D8; margin-bottom: 4px; }
.hc-patto span { color: #DCCAAC; font-size: 0.97rem; }
.hc-sec--buio .hc-azioni { margin-top: 30px; }
.hc-azioni { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --- requisiti ---------------------------------------------------------------- */
.hc-req { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.hc-req > div { background: #FFFDF8; border-radius: 18px; padding: 18px 20px; box-shadow: 0 0 0 1px rgb(92 53 23 / 0.1); }
.hc-req strong { display: block; font: 600 1.12rem/1.25 var(--hc-serif); margin-bottom: 4px; }
.hc-req p { color: var(--hc-ink-2); font-size: 0.97rem; }

/* --- finale ------------------------------------------------------------------- */
.hc-fine { text-align: center; display: grid; justify-items: center; gap: 16px; }
.hc-fine__hob { position: relative; width: 150px; height: 150px; }
.hc-fine__hob img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 40% 32%; box-shadow: 0 0 0 4px var(--hc-ottone), 0 24px 50px -16px rgb(0 0 0 / 0.8); }
.hc-fine__hob::before {
  content: ""; position: absolute; inset: -60%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 189 92 / 0.4), transparent 62%);
}
html.hc-anima .hc-fine__hob::before { animation: hc-respira 3s ease-in-out infinite alternate; }
.hc-fine .hc-h2 { color: #FFF1D8; }
.hc-fine p { color: #E3D2B6; max-width: 34rem; }
.hc-fine .hc-azioni { justify-content: center; }

/* ==========================================================================
   Pagine di testo: supporto e privacy
   ========================================================================== */
.hc-testa {
  color: var(--hc-crema); padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 56px);
  background: radial-gradient(100% 120% at 85% 0%, #4A2B0F 0%, var(--hc-cantina) 50%, var(--hc-buio) 100%);
  position: relative; overflow: hidden;
}
.hc-testa__in { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); }
.hc-testa__hob { flex: none; width: clamp(76px, 18vw, 120px); aspect-ratio: 1; position: relative; }
.hc-testa__hob img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 40% 32%; box-shadow: 0 0 0 3px var(--hc-ottone), 0 16px 34px -14px rgb(0 0 0 / 0.8); }
.hc-testa__hob::before { content: ""; position: absolute; inset: -55%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgb(255 189 92 / 0.32), transparent 62%); pointer-events: none; }
.hc-testa__hob img { position: relative; z-index: 1; }
html.hc-anima .hc-testa__hob::before { animation: hc-respira 3s ease-in-out infinite alternate; }
html.hc-anima .hc-testa__hob img { animation: hc-entra .9s var(--hc-ease) .1s both; }
.hc-testa h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); color: #FFF1D8; }
.hc-testa .hc-kicker { color: var(--hc-ottone); margin-bottom: 8px; }
.hc-testa p { color: #E3D2B6; margin-top: 10px; max-width: 40rem; }

.hc-doc { padding-block: clamp(36px, 5vw, 64px) var(--hc-sec); }
.hc-doc__corpo { max-width: 46rem; }
.hc-doc__corpo h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); margin: 34px 0 10px; color: var(--hc-cuoio-b); }
.hc-doc__corpo p, .hc-doc__corpo li { color: #3E2A18; }
.hc-doc__corpo p + p { margin-top: 12px; }
.hc-doc__corpo ul { display: grid; gap: 10px; margin-top: 10px; }
.hc-doc__corpo li { position: relative; padding-left: 20px; }
.hc-doc__corpo li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--hc-cuoio-a); }
.hc-doc__data { font-size: 0.9rem; color: var(--hc-ink-2); }
.hc-doc__lead { font-size: 1.15rem; margin-top: 14px; }
.hc-doc__box { margin-top: 22px; padding: 16px 20px; border-radius: 16px; background: #FFF1D6; border-left: 5px solid var(--hc-ottone); }
.hc-doc__box p { color: #4A2D10; }

.hc-faq { border-radius: 18px; background: #FFFDF8; box-shadow: 0 0 0 1px rgb(92 53 23 / 0.12); }
.hc-faq + .hc-faq { margin-top: 12px; }
.hc-faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 12px; align-items: center;
  padding: 18px 20px; font: 600 1.12rem/1.3 var(--hc-serif); color: var(--hc-ink); min-height: 56px;
}
.hc-faq summary::-webkit-details-marker { display: none; }
.hc-faq summary::after {
  content: ""; width: 28px; height: 28px; border-radius: 50%;
  background: var(--hc-carta-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E6633' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: rotate .3s var(--hc-ease);
}
.hc-faq[open] summary::after { rotate: 180deg; }
.hc-faq__r { padding: 0 20px 20px; color: #3E2A18; }
.hc-faq__r p + p { margin-top: 10px; }
.hc-faq__r ol { margin: 10px 0 0; padding-left: 1.3em; display: grid; gap: 6px; }
.hc-contatto { margin-top: 36px; padding: 22px; border-radius: 20px; background: var(--hc-verde); color: #EAF4EC; display: grid; gap: 8px; }
.hc-contatto strong { font: 600 1.3rem/1.2 var(--hc-serif); color: #fff; }
.hc-contatto a { color: #FFD38A; font-weight: 600; }

/* ==========================================================================
   Piede
   ========================================================================== */
.hc-piede { background: var(--hc-buio); color: #CDB998; padding: 40px 0 28px; font-size: 0.93rem; }
.hc-piede__in { display: grid; gap: 18px; }
.hc-piede__marca { display: flex; align-items: center; gap: 12px; }
.hc-piede__marca img { width: 44px; height: 44px; border-radius: 12px; }
.hc-piede__marca strong { display: block; font: 600 1.2rem/1.1 var(--hc-serif); color: var(--hc-crema); }
.hc-piede a { color: var(--hc-ottone); }
.hc-piede__link { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hc-piede__link a { min-height: 32px; display: inline-flex; align-items: center; }
.hc-piede__lb26 { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.hc-giro { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 16px; border-top: 1px solid rgb(255 189 92 / 0.14); font-size: 0.85rem; }
.hc-giro a { color: #CDB998; }
.hc-giro a[aria-current="page"] { color: var(--hc-ottone); }

/* ==========================================================================
   «Riduci movimento»: niente animazioni, tutto subito al suo posto
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .hc-r, html.js .hc-guida__hob, html.js .hc-fumetto, html.js .hc-mappa .hc-mappa__riga { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
  .hc-hob__lanterna, .hc-hob__alone { opacity: 1; }
}
.hc-contatto svg { width: 28px; height: 28px; color: #FFD38A; }
.hc-piede__lb26 svg { width: 16px; height: 16px; flex: none; }
.hc-hero .hc-kicker { color: var(--hc-ottone); margin-bottom: 0; }

/* Hob animato (video di 6 s in loop, primo fotogramma = immagine): sopra l'immagine ferma */
.hc-hob__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.hc-hob__video.is-pronto { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hc-hob__video { display: none; } }