/* ==========================================================================
   Natura e Buona Vita — Home (css/home.css)

   Sistema visivo
   - Tipografia di sistema (SF Pro su Apple, Segoe UI su Windows, Roboto su
     Android): nessun font remoto, nessuna richiesta a terzi.
   - Superfici chiare e scene scure alternate; colore di brand per azioni.
   - Scrollytelling: scene fissate (metodo, zoom, scorrimento orizzontale)
     animate solo con transform e opacity, quindi composte dalla GPU.
   - Base statica completa: senza JavaScript o con "riduci movimento" la
     pagina resta leggibile e ordinata; le scene si attivano con .nh-motion.
   - Prefisso nh- su tutte le classi; stati via attributi data-* (nessuna
     mutazione di classi osservata dal CDN di Tailwind durante lo scorrimento).
   ========================================================================== */

.nh {
    --nh-ink: #1d1d1f;
    --nh-ink-2: #5f5f66;
    --nh-paper: #ffffff;
    --nh-mist: #f5f5f7;
    --nh-line: rgba(0, 0, 0, .09);
    --nh-sage: #246b6a;
    --nh-sage-hover: #1b5453;
    --nh-sage-deep: #0d2625;
    --nh-sage-tint: #e3efec;
    --nh-blush: #fbeef1;
    --nh-rose: #a3264f;

    --nh-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --nh-wrap: 1180px;
    --nh-gutter: clamp(20px, 5vw, 40px);
    --nh-section: clamp(72px, 10vw, 136px);
    --nh-r-xl: 32px;
    --nh-r-l: 28px;
    --nh-r-m: 20px;
    --nh-ease: cubic-bezier(.22, 1, .36, 1);

    interpolate-size: allow-keywords;
    font-family: var(--nh-font);
    font-size: 1.0625rem;
    line-height: 1.47;
    letter-spacing: -0.012em;
    color: var(--nh-ink);
    background: var(--nh-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

.nh [id] { scroll-margin-top: 96px; }

/* <picture> della riserva JPEG: non altera l'impaginazione dell'immagine che contiene */
.nh picture { display: contents; }

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
.nh-display {
    margin: 0;
    font-size: clamp(2.75rem, 1.5rem + 5.6vw, 5.75rem);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -0.038em;
    text-wrap: balance;
}

.nh-h2 {
    margin: 0;
    font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.032em;
    text-wrap: balance;
}

.nh-h3 {
    margin: 0;
    font-size: clamp(1.375rem, 1.2rem + .75vw, 1.875rem);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.024em;
}

.nh-lead {
    margin: 0;
    max-width: 34em;
    font-size: clamp(1.1875rem, 1.06rem + .55vw, 1.5rem);
    line-height: 1.36;
    letter-spacing: -0.018em;
    color: var(--nh-ink-2);
    text-wrap: pretty;
}

.nh-text {
    margin: 0;
    max-width: 38em;
    color: var(--nh-ink-2);
    text-wrap: pretty;
}

.nh-small {
    margin: 0;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--nh-ink-2);
}

.nh-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Azioni
   -------------------------------------------------------------------------- */
.nh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 48px;
    padding: 0 1.4em;
    border-radius: 980px;
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s var(--nh-ease);
}

.nh-btn:active { transform: scale(.98); }

.nh-btn--primary { background: var(--nh-sage); color: #fff; }
.nh-btn--primary:hover { background: var(--nh-sage-hover); }

.nh-btn--ghost { background: transparent; color: var(--nh-sage); box-shadow: inset 0 0 0 1.5px currentColor; }
.nh-btn--ghost:hover { background: var(--nh-sage-tint); }

.nh-btn--light { background: #fff; color: var(--nh-sage-deep); }
.nh-btn--light:hover { background: var(--nh-sage-tint); }

.nh-link {
    color: var(--nh-sage);
    font-weight: 600;
    text-decoration: none;
}
.nh-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.nh-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Su schermi stretti i pulsanti affiancati si dividono la riga; se vanno a capo
   occupano l'intera larghezza: niente coppie di larghezza disuguale. */
@media (max-width: 599px) {
    .nh-actions .nh-btn,
    .nh-hero__actions .nh-btn { flex: 1 1 auto; }
}

.nh a:focus-visible,
.nh button:focus-visible,
.nh summary:focus-visible {
    outline: 3px solid rgba(36, 107, 106, .55);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Struttura
   -------------------------------------------------------------------------- */
.nh-wrap {
    width: 100%;
    max-width: calc(var(--nh-wrap) + 2 * var(--nh-gutter));
    margin-left: auto; margin-right: auto;
    padding-left: var(--nh-gutter); padding-right: var(--nh-gutter);
}

.nh-section { padding-top: var(--nh-section); padding-bottom: var(--nh-section); }
.nh-section--mist { background: var(--nh-mist); }

.nh-head {
    display: grid;
    gap: 16px;
    margin-bottom: clamp(36px, 5vw, 64px);
}

.nh-head--split { align-items: end; }

@media (min-width: 900px) {
    .nh-head--split { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; }
    .nh-head__link { padding-bottom: .4em; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.nh-hero { padding-top: clamp(32px, 6vw, 88px); padding-bottom: clamp(64px, 8vw, 112px); }

/* Mobile: presentazione e azioni, poi la fotografia, poi i dettagli.
   Desktop: testo a sinistra su due blocchi, fotografia a destra. */
.nh-hero__grid {
    display: grid;
    grid-template-areas: "intro" "media" "meta";
    row-gap: 36px;
}

.nh-hero__intro { grid-area: intro; }
.nh-hero__media { grid-area: media; }
.nh-hero__meta  { grid-area: meta; }

@media (min-width: 960px) {
    .nh-hero__grid {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
        grid-template-areas: "intro media" "meta media";
        grid-template-rows: auto auto;
        column-gap: 72px;
        row-gap: 0;
    }
    .nh-hero__intro { align-self: end; }
    .nh-hero__meta  { align-self: start; }
    .nh-hero__media { align-self: center; }
}

.nh-hero__name {
    margin: 0 0 14px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--nh-sage);
}

.nh-hero__lead { margin-top: 22px; }

.nh-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.nh-hero__alt {
    margin: 0;
    font-size: .9375rem;
    color: var(--nh-ink-2);
}

@media (min-width: 960px) {
    .nh-hero__meta { padding-top: 18px; }
}

.nh-hero__cred {
    margin: 28px 0 0;
    padding-top: 20px;
    max-width: 34em;
    border-top: 1px solid var(--nh-line);
    font-size: .9375rem;
    color: var(--nh-ink-2);
}

.nh-hero__media {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 520px;
    justify-self: center;
}

.nh-hero__frame {
    aspect-ratio: 4 / 5;
    border-radius: var(--nh-r-xl);
    overflow: hidden;
    background: var(--nh-mist);
}

.nh-hero__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

.nh-hero__chips {
    position: absolute;
    top: auto; right: 14px; bottom: 14px; left: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.nh-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    box-shadow: 0 10px 30px rgba(13, 38, 37, .14);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--nh-ink);
}

.nh-chip__dot {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: var(--nh-sage-tint);
    color: var(--nh-sage);
    font-size: 12px;
}

@media (min-width: 960px) {
    .nh-hero__chips { top: auto; right: auto; bottom: 36px; left: -36px; }
    .nh-chip--b { margin-left: 44px; }
}

/* Riflesso che attraversa il titolo (testo fermo, si sposta solo lo sfondo).
   Applicato a uno <span> interno: l'<h1> conserva la propria animazione d'ingresso.
   Solo dove il ritaglio sul testo è supportato; fermo con "riduci movimento"
   e sospeso quando la presentazione è fuori schermo (data-live). */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .nh-sheen {
        display: inline-block;
        padding-bottom: .14em;
        margin-bottom: -.14em; /* spazio per i discendenti */
        background: linear-gradient(96deg,
            var(--nh-ink) 4%, var(--nh-sage) 16%, #3fa39a 22%, var(--nh-ink) 34%,
            var(--nh-ink) 54%, var(--nh-sage) 66%, #3fa39a 72%, var(--nh-ink) 84%,
            var(--nh-ink) 100%);
        background-size: 200% 100%; /* una copia = due larghezze del titolo, con due riflessi */
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .nh-sheen { animation: nh-sheen 10s linear infinite; }
    .nh-motion .nh-hero:not([data-live]) .nh-sheen { animation-play-state: paused; }
}

/* Spostamento di esattamente una copia del gradiente: ciclo continuo, senza salti;
   con la copia larga il doppio del titolo, -200% equivale a una copia esatta.
   Due riflessi per copia: un passaggio ogni metà ciclo, con una pausa breve. */
@keyframes nh-sheen {
    to { background-position: -200% 0; }
}

/* Sequenza d'ingresso: un solo movimento orchestrato al caricamento */
@media (prefers-reduced-motion: no-preference) {
    .nh-hero [data-nh-enter] {
        animation: nh-rise .9s var(--nh-ease) both;
        animation-delay: calc(var(--i, 0) * 70ms);
    }
    .nh-hero__frame { animation: nh-settle 1.3s var(--nh-ease) both; }
    .nh-chip--a { animation: nh-rise .9s var(--nh-ease) .5s both; }
    .nh-chip--b { animation: nh-rise .9s var(--nh-ease) .6s both; }
}

@keyframes nh-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes nh-settle {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Token aggiuntivi delle scene
   -------------------------------------------------------------------------- */
.nh {
    --nh-mint: #9fd1c9;
    --nh-header: 80px;
    --nh-stage: 100vh;
}

@supports (height: 100svh) {
    .nh { --nh-stage: 100svh; }
}

.nh-btn--ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.nh-btn--ghost-light:hover { background: rgba(255, 255, 255, .1); }

/* Animazioni guidate dallo scorrimento: soltanto transform e opacity.
   will-change è attivo solo mentre la scena è vicina allo schermo (data-live). */
.nh-motion [data-scene][data-live] [data-hero-media],
.nh-motion [data-scene][data-live] [data-hero-copy],
.nh-motion [data-scene][data-live] [data-ring],
.nh-motion [data-scene][data-live] [data-mstep],
.nh-motion [data-scene][data-live] [data-method-bar],
.nh-motion [data-scene][data-live] [data-zoom-frame],
.nh-motion [data-scene][data-live] [data-zoom-shade],
.nh-motion [data-scene][data-live] [data-zoom-copy],
.nh-motion [data-scene][data-live] [data-hs-track],
.nh-motion [data-scene][data-live] [data-panel-item] {
    will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   Comparsa all'ingresso (una sola volta), con ritardo progressivo --i
   -------------------------------------------------------------------------- */
.nh-motion [data-reveal] { opacity: 0; }

.nh-motion [data-reveal][data-in] {
    opacity: 1;
    animation: nh-in .95s var(--nh-ease) calc(var(--i, 0) * 80ms) backwards;
}

@keyframes nh-in {
    from { opacity: 0; transform: translate3d(0, 36px, 0) scale(.97); }
}

/* --------------------------------------------------------------------------
   Nastro delle competenze: striscia sottile sotto il menu
   (--tk-gap: spazio tra le voci, ripetuto in coda a ogni copia per un ciclo senza scatti)
   -------------------------------------------------------------------------- */
.nh-ticker {
    --tk-gap: 18px;
    position: relative;
    overflow: hidden;
    padding-top: 10px; padding-bottom: 10px;
    border-bottom: 1px solid var(--nh-line);
    background: var(--nh-mist);
}

.nh-ticker__track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: var(--nh-gutter); padding-right: var(--nh-gutter);
}

.nh-ticker__group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px var(--tk-gap);
}

.nh-ticker__group + .nh-ticker__group { display: none; }

.nh-ticker__item {
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .01em;
    color: var(--nh-ink-2);
    white-space: nowrap;
}

.nh-ticker__sep { font-size: 8px; color: var(--nh-sage); opacity: .5; }

/* Versione statica: nessun separatore dopo l'ultima voce (nel nastro in movimento
   serve invece a unire una copia alla successiva) */
html:not(.nh-motion) .nh-ticker__sep:last-child { display: none; }

@media (min-width: 960px) {
    .nh-ticker { --tk-gap: 24px; padding-top: 11px; padding-bottom: 11px; }
    .nh-ticker__item { font-size: .875rem; }
}

/* Dissolvenza ai bordi */
.nh-motion .nh-ticker::before,
.nh-motion .nh-ticker::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.nh-motion .nh-ticker::before { left: 0;  width: 40px; background: linear-gradient(90deg, var(--nh-mist), rgba(245, 245, 247, 0)); }
.nh-motion .nh-ticker::after  { right: 0; width: 40px; background: linear-gradient(270deg, var(--nh-mist), rgba(245, 245, 247, 0)); }

.nh-motion .nh-ticker__track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    padding-left: 0; padding-right: 0;
    animation: nh-ticker 44s linear infinite;
    will-change: transform;
}

.nh-motion .nh-ticker__group { flex-wrap: nowrap; padding-right: var(--tk-gap); }
.nh-motion .nh-ticker__group + .nh-ticker__group { display: flex; }

/* Pausa al passaggio del mouse; esclusi i dispositivi touch,
   dove lo stato :hover resta attivo dopo il tocco. */
@media (hover: hover) and (pointer: fine) {
    .nh-ticker__track:hover { animation-play-state: paused; }
}

/* Quattro copie nel markup: si trasla di una copia */
@keyframes nh-ticker {
    to { transform: translate3d(-25%, 0, 0); }
}

/* --------------------------------------------------------------------------
   Il metodo: scena fissata (stato statico come base, scena con .nh-motion)
   -------------------------------------------------------------------------- */
/* Bordo superiore arrotondato: la scena sale sulla presentazione come un foglio */
.nh-method {
    --orbit: min(78vw, 360px);
    position: relative;
    padding-top: var(--nh-section); padding-bottom: var(--nh-section);
    border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
    background: var(--nh-sage-deep);
    color: #fff;
}

.nh-method .nh-lead { color: rgba(255, 255, 255, .72); }

.nh-method__grid {
    display: grid;
    grid-template-areas: "head" "orbit" "steps" "bar";
    gap: 36px;
}

.nh-method__head  { grid-area: head; display: grid; gap: 14px; }
.nh-orbit         { grid-area: orbit; }
.nh-method__steps { grid-area: steps; }
.nh-method__bar   { grid-area: bar; }

@media (min-width: 960px) {
    .nh-method { --orbit: min(40vw, 500px); }
    .nh-method__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "head orbit" "steps orbit" "bar orbit";
        grid-template-rows: auto auto auto;
        column-gap: 72px;
        row-gap: 40px;
        align-items: center;
    }
    .nh-method__head { align-self: end; }
    .nh-method__bar  { align-self: start; }
}

.nh-method__steps {
    list-style: none;
    display: grid;
    gap: 32px;
    margin: 0;
    padding: 0;
}

.nh-mstep__n {
    display: block;
    margin-bottom: 10px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--nh-mint);
}

.nh-mstep__title {
    margin: 0 0 10px;
    font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.875rem);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -0.032em;
}

.nh-mstep__text {
    margin: 0;
    max-width: 28em;
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
    line-height: 1.42;
    color: rgba(255, 255, 255, .76);
}

.nh-method__bar {
    display: none;
    height: 3px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, .14);
}

.nh-method__bar span {
    display: block;
    height: 100%;
    background: var(--nh-mint);
    transform: scaleX(0);
    transform-origin: left center;
}

/* Orbita */
.nh-orbit {
    position: relative;
    justify-self: center;
    width: var(--orbit);
    height: var(--orbit); /* al posto di aspect-ratio: valido anche su Safari < 15 */
}

.nh-orbit__ring {
    position: absolute;
    border-radius: 50%;
}

.nh-orbit__ring--1 { top: 0; right: 0; bottom: 0; left: 0; border: 1px solid rgba(159, 209, 201, .28); }
.nh-orbit__ring--2 { top: 14%; right: 14%; bottom: 14%; left: 14%; border: 1.5px dashed rgba(159, 209, 201, .4); }
.nh-orbit__ring--3 { top: 28%; right: 28%; bottom: 28%; left: 28%; border: 1px solid rgba(159, 209, 201, .2); }

.nh-orbit__ring::after {
    content: "";
    position: absolute;
    top: -4px;
    left: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nh-mint);
}

.nh-orbit__ring--2::after { width: 6px; height: 6px; top: -3.5px; left: calc(50% - 3px); opacity: .7; }
.nh-orbit__ring--3::after { opacity: .5; }

.nh-orbit__node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    transform: rotate(var(--a)) translate3d(calc(var(--orbit) / 2), 0, 0) rotate(calc(var(--a) * -1));
}

.nh-orbit__node span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--nh-sage-deep);
    box-shadow: inset 0 0 0 1.5px rgba(159, 209, 201, .5);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--nh-mint);
    transition: transform .5s var(--nh-ease), background-color .4s ease, color .4s ease;
}

.nh-orbit__node[data-state="done"] span { background: #1f4a48; }
.nh-orbit__node[data-state="on"] span { background: var(--nh-mint); color: var(--nh-sage-deep); transform: scale(1.22); }

.nh-orbit__core {
    position: absolute;
    top: 36%; right: 36%; bottom: 36%; left: 36%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 1px rgba(159, 209, 201, .18), 0 30px 80px rgba(0, 0, 0, .35);
}

.nh-orbit__core i {
    grid-area: 1 / 1;
    font-size: calc(var(--orbit) * .1);
    color: var(--nh-mint);
    opacity: 0;
    transform: scale(.7);
    transition: opacity .45s ease, transform .6s var(--nh-ease);
}

.nh-orbit__core i[data-on] { opacity: 1; transform: none; }

/* Scena fissata (l'ancora #metodo porta esattamente all'inizio della scena) */
.nh-motion .nh-method[id] { scroll-margin-top: 0; }

.nh-motion .nh-method {
    height: calc(var(--nh-stage) * 4.4);
    padding: 0;
}

.nh-motion .nh-method__stage {
    position: -webkit-sticky; position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: var(--nh-stage);
    padding-top: var(--nh-header);
    overflow: hidden;
}

.nh-motion .nh-method__steps {
    position: relative;
    display: block;
    min-height: 13.5em;
}

.nh-motion .nh-mstep {
    position: absolute;
    top: 0; right: 0; bottom: auto; left: 0;
    opacity: 0;
}

.nh-motion .nh-mstep:first-child { opacity: 1; }
.nh-motion .nh-method__bar { display: block; }

@media (max-width: 959px) {
    .nh-motion .nh-method { --orbit: min(54vw, calc(var(--nh-stage) * .32), 380px); }
    .nh-motion .nh-method__grid { gap: 22px; width: 100%; }
    .nh-motion .nh-method__head .nh-lead { display: none; }
    .nh-motion .nh-method__steps { min-height: 11.5em; }
}

/* --------------------------------------------------------------------------
   Percorsi: griglia Bento
   -------------------------------------------------------------------------- */
.nh-bento {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "keto" "tele" "bia" "ffaa" "test" "sposi";
}

@media (min-width: 700px) {
    .nh-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "keto keto" "tele bia" "ffaa bia" "test test" "sposi sposi";
    }
}

@media (min-width: 1080px) {
    .nh-bento {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: minmax(260px, auto);
        grid-template-areas: "keto keto tele bia" "keto keto ffaa bia" "test test test sposi";
    }
}

.nh-tile--keto  { grid-area: keto; }
.nh-tile--tele  { grid-area: tele; }
.nh-tile--bia   { grid-area: bia; }
.nh-tile--ffaa  { grid-area: ffaa; }
.nh-tile--test  { grid-area: test; }
.nh-tile--sposi { grid-area: sposi; }

.nh-tile {
    --glare: rgba(36, 107, 106, .12);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    padding: clamp(26px, 3vw, 36px);
    border-radius: var(--nh-r-l);
    background: var(--nh-paper);
    color: var(--nh-ink);
    text-decoration: none;
}

/* Ombra su livello separato: in hover si anima solo la sua opacità */
.nh-tile::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 34px 70px -28px rgba(13, 38, 37, .45);
    opacity: 0;
    pointer-events: none;
}

.nh-tile__icon { font-size: 26px; line-height: 1; color: var(--nh-sage); }

.nh-tile__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 40px;
}

.nh-tile__tag {
    align-self: flex-start;
    margin-bottom: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    font-size: .8125rem;
    font-weight: 600;
    color: #d8ece8;
}

.nh-tile__title {
    font-size: clamp(1.4375rem, 1.2rem + .7vw, 1.875rem);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -0.028em;
}

.nh-tile__text {
    max-width: 30em;
    font-size: .9875rem;
    line-height: 1.45;
    color: var(--nh-ink-2);
}

.nh-tile__note { margin-top: 4px; font-size: .8125rem; color: rgba(255, 255, 255, .7); }

.nh-tile__go {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--nh-mist);
    color: var(--nh-ink);
}

/* Riflesso che segue il puntatore: un livello ritagliato, spostato con transform */
.nh-tile__glare {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.nh-tile__glare::before {
    content: "";
    position: absolute;
    top: -200px;
    left: -200px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glare) 0%, transparent 62%);
    transform: translate3d(var(--gx, 50%), var(--gy, 50%), 0);
}

/* Dieta chetogenica */
.nh-tile--keto { --glare: rgba(159, 209, 201, .22); background: var(--nh-sage-deep); color: #fff; min-height: 420px; }
.nh-tile--keto .nh-tile__icon { font-size: 32px; color: var(--nh-mint); }
.nh-tile--keto .nh-tile__title { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem); letter-spacing: -0.036em; }
.nh-tile--keto .nh-tile__text { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); color: rgba(255, 255, 255, .76); }
.nh-tile--keto .nh-tile__go { background: rgba(255, 255, 255, .14); color: #fff; }

.nh-phases {
    list-style: none;
    position: relative;
    display: grid;
    gap: 10px;
    margin: 26px 0 0;
    padding: 0;
}

@media (min-width: 700px) {
    .nh-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.nh-phases li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: #e6f2ef;
}

.nh-phases li span {
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--nh-mint);
    box-shadow: 0 0 0 4px rgba(159, 209, 201, .18);
}

/* Riquadri fotografici: immagine a tutto campo, testo in basso su sfumatura */
.nh-tile--photo { color: #fff; min-height: 300px; background: #2a3634; }
.nh-tile--photo .nh-tile__text { color: rgba(255, 255, 255, .86); }
.nh-tile--photo .nh-tile__go { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nh-tile--photo { --glare: rgba(255, 255, 255, .2); }

.nh-tile__media {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    border-radius: inherit;
    overflow: hidden;
}

.nh-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dieta chetogenica: fotografia come sfondo, velatura scura per la leggibilità */
.nh-tile--keto .nh-tile__media img { object-position: 70% 30%; }
.nh-tile--keto .nh-tile__media::after {
    background: linear-gradient(to top, rgba(13, 38, 37, .97) 0%, rgba(13, 38, 37, .86) 42%, rgba(13, 38, 37, .35) 100%);
}

.nh-tile__media::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to top, rgba(13, 38, 37, .88) 0%, rgba(13, 38, 37, .35) 45%, rgba(13, 38, 37, 0) 75%);
}

.nh-tile--bia { min-height: 420px; }

/* Foto luminosa: sfumatura più decisa per la leggibilità del testo bianco */
.nh-tile--bia .nh-tile__media::after {
    background: linear-gradient(to top, rgba(13, 38, 37, .94) 0%, rgba(13, 38, 37, .72) 32%, rgba(13, 38, 37, .2) 58%, rgba(13, 38, 37, 0) 75%);
}

/* Test del mese */
.nh-tile--test {
    --glare: rgba(255, 255, 255, .2);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    background: var(--nh-sage);
    color: #fff;
}

.nh-tile--test .nh-tile__body { margin-top: 0; padding-top: 0; }
.nh-tile--test .nh-tile__text { color: rgba(255, 255, 255, .85); }

.nh-tile__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 1.4em;
    border-radius: 980px;
    background: #fff;
    color: var(--nh-sage-deep);
    font-weight: 600;
    white-space: nowrap;
}

/* Telenutrizione: videoconsulto illustrato in HTML/CSS (nessuna immagine) */
.nh-tile--tele .nh-call { margin-top: 44px; }   /* sotto il pulsante circolare */
.nh-tile--tele .nh-tile__body { padding-top: 28px; }

.nh-call {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 16px;
    border-radius: 20px;
    background: var(--nh-mist);
    box-shadow: inset 0 0 0 1px var(--nh-line);
}

.nh-call__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--nh-ink-2);
}

.nh-call__live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2fb37a;
    box-shadow: 0 0 0 4px rgba(47, 179, 122, .18);
}

.nh-call__people {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.nh-call__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: var(--nh-ink-2);
    font-size: 20px;
    box-shadow: 0 6px 16px -8px rgba(13, 38, 37, .35);
}

.nh-call__avatar--doc { background: var(--nh-sage); color: #fff; }

.nh-call__wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1 1 auto;
    height: 32px;
}

.nh-call__wave i {
    display: block;
    width: 4px;
    height: 100%;
    border-radius: 4px;
    background: var(--nh-sage);
    opacity: .55;
    transform: scaleY(.35);
}

.nh-call__wave i:nth-child(2n) { transform: scaleY(.7); }
.nh-call__wave i:nth-child(3n) { transform: scaleY(.5); }

.nh-call__controls {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.nh-call__controls i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    font-size: 13px;
    color: var(--nh-sage);
}

/* Onde vocali: solo transform, attive solo con movimento consentito */
.nh-motion .nh-call__wave i { animation: nh-voice 1.25s ease-in-out infinite; }
.nh-motion .nh-call__wave i:nth-child(2) { animation-delay: -.2s; }
.nh-motion .nh-call__wave i:nth-child(3) { animation-delay: -.45s; }
.nh-motion .nh-call__wave i:nth-child(4) { animation-delay: -.7s; }
.nh-motion .nh-call__wave i:nth-child(5) { animation-delay: -.3s; }
.nh-motion .nh-call__wave i:nth-child(6) { animation-delay: -.95s; }
.nh-motion .nh-call__wave i:nth-child(7) { animation-delay: -.55s; }

@keyframes nh-voice {
    0%, 100% { transform: scaleY(.3); }
    50%      { transform: scaleY(1); }
}

.nh-motion .nh-tile--tele:hover .nh-call__avatar--doc { transform: scale(1.06); }
.nh-motion .nh-call__avatar { transition: transform .5s var(--nh-ease); }

/* Promo sposi */
.nh-tile--sposi {
    --glare: rgba(163, 38, 79, .14);
    --nh-gold: #c99a4a;
    background: linear-gradient(160deg, #fdf1f4 0%, #f7d6df 100%);
}
.nh-tile--sposi .nh-tile__go { background: #fff; }
.nh-tile--sposi .nh-tile__text { color: #6e4a55; }

/* Due fedi, disegnate in CSS: si avvicinano e si intrecciano quando il riquadro
   entra nello schermo; poi un cuore sopra il punto d'incontro. */
.nh-rings {
    position: relative;
    z-index: 1;
    display: block;
    width: 74px;
    height: 46px;
    margin-top: 14px; /* spazio per il cuore sopra le fedi */
}

.nh-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 3.5px solid var(--nh-gold);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 4px 10px -4px rgba(120, 70, 20, .45);
}

.nh-ring--b { left: 28px; border-color: #d8b06a; }

/* Intreccio: copia della prima fede, ritagliata sull'incrocio inferiore, che passa
   sopra la seconda; nell'incrocio superiore resta sopra la seconda. */
.nh-ring--over {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
    clip-path: inset(62% 0 0 62%);
}

.nh-motion .nh-tile--sposi .nh-ring {
    transition: transform 1.1s var(--nh-ease) .45s;
}

.nh-motion .nh-tile--sposi .nh-ring--a          { transform: translate3d(-14px, 0, 0); }
.nh-motion .nh-tile--sposi .nh-ring--b          { transform: translate3d(14px, 0, 0); }
.nh-motion .nh-tile--sposi[data-in] .nh-ring    { transform: none; }

/* Cuore sopra il punto d'incontro: compare quando le fedi si uniscono,
   poi ondeggia (contenitore interno) e batte con doppio battito (icona).
   Tre livelli, ciascuno con una sola trasformazione: nessun conflitto tra animazioni. */
.nh-heart {
    position: absolute;
    top: -19px;
    left: 30px;
    width: 14px;
    height: 16px;
    color: var(--nh-rose);
    font-size: 13px;
    line-height: 16px;
    text-align: center;
}

.nh-heart > span { display: block; transform-origin: 50% 130%; }
.nh-heart i { display: block; }

.nh-motion .nh-tile--sposi .nh-heart {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(.3);
    transition: opacity .5s ease 1.35s, transform .7s var(--nh-ease) 1.35s;
}

.nh-motion .nh-tile--sposi[data-in] .nh-heart { opacity: 1; transform: none; }

.nh-motion .nh-tile--sposi[data-in] .nh-heart > span { animation: nh-sway 3.2s ease-in-out 2s infinite; }
.nh-motion .nh-tile--sposi[data-in] .nh-heart i      { animation: nh-beat 1.6s ease-in-out 2s infinite; }

@keyframes nh-sway {
    0%, 100% { transform: rotate(-12deg); }
    50%      { transform: translate3d(0, -3px, 0) rotate(12deg); }
}

@keyframes nh-beat {
    0%, 60%, 100% { transform: scale(1); }
    14%           { transform: scale(1.28); }
    28%           { transform: scale(1); }
    42%           { transform: scale(1.18); }
}

/* Offerta in evidenza */
.nh-offer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.nh-offer__pct {
    font-size: clamp(3rem, 2.4rem + 2.2vw, 4.5rem);
    line-height: .95;
    font-weight: 800;
    letter-spacing: -0.045em;
    color: var(--nh-rose);
}

.nh-offer__on {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--nh-rose);
}

/* Effetti al passaggio del puntatore (solo dispositivi con mouse) */
@media (hover: hover) and (pointer: fine) {
    .nh-motion .nh-tile,
    .nh-motion .nh-post { transition: transform .6s var(--nh-ease); }

    .nh-motion .nh-tile::after,
    .nh-motion .nh-post::after { transition: opacity .6s var(--nh-ease); }

    .nh-motion .nh-tile__media img,
    .nh-motion .nh-post__media img { transition: transform 1s var(--nh-ease); }

    .nh-motion .nh-tile__glare { transition: opacity .45s ease; }
    .nh-motion .nh-tile__go { transition: transform .45s var(--nh-ease), background-color .3s ease, color .3s ease; }

    .nh-motion .nh-tile:hover,
    .nh-motion .nh-post:hover { transform: translate3d(0, -6px, 0) scale(1.012); }

    .nh-motion .nh-tile:hover::after,
    .nh-motion .nh-post:hover::after { opacity: 1; }

    .nh-motion .nh-tile:hover .nh-tile__media img,
    .nh-motion .nh-post:hover .nh-post__media img { transform: scale(1.06); }

    .nh-motion .nh-tile:hover .nh-tile__glare,
    .nh-motion .nh-post:hover .nh-tile__glare { opacity: 1; }

    .nh-motion .nh-tile:hover .nh-tile__go { transform: scale(1.1); background: var(--nh-sage); color: #fff; }
    .nh-motion .nh-tile--keto:hover .nh-tile__go { background: #fff; color: var(--nh-sage-deep); }
    .nh-motion .nh-tile--sposi:hover .nh-tile__go { background: var(--nh-rose); }
}

.nh-tile:active,
.nh-post:active { transform: scale(.99); }

/* --------------------------------------------------------------------------
   Zoom fotografico
   -------------------------------------------------------------------------- */
.nh-zoom { padding-top: var(--nh-section); padding-bottom: var(--nh-section); }

/* Versione statica (base): fotografia con angoli arrotondati, testo sotto.
   È quella mostrata senza JavaScript, con "riduci movimento", sui dispositivi
   esclusi dalle scene e finché la fotografia non è pronta. */
.nh-zoom__frame {
    position: relative;
    max-width: calc(var(--nh-wrap));
    margin: 0 var(--nh-gutter);
    aspect-ratio: 16 / 10;
    border-radius: var(--nh-r-xl);
    overflow: hidden;
    /* Anteprima sfocata (32×20 px, meno di 1 KB) finché la fotografia non è arrivata */
    background: #30685e url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAUACADASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAQDBQYH/8QAHhAAAgICAwEBAAAAAAAAAAAAAQIAEQMEBRIhMYH/xAAYAQEAAwEAAAAAAAAAAAAAAAAEAQIDBf/EABoRAAMAAwEAAAAAAAAAAAAAAAABAgMEETH/2gAMAwEAAhEDEQA/AM3q8lk7UfJeafKla98mJTMf0yy19g9eoabNJ+nNuah9k6FqcmjCmMcTcW7BnP8ADtshsGO4uXYGu0Ll1lQjBuVL4zEgmxG8bFR5CESWyEyZXoi5KuRvtwhJDNH/2Q==") center / cover no-repeat;
}

@media (min-width: 1260px) {
    .nh-zoom__frame { margin-left: auto; margin-right: auto; }
}

/* Stesse condizioni del <source> verticale nel markup */
@media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
    .nh-zoom__frame {
        aspect-ratio: 4 / 5;
        background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAAkABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUDBAb/xAAfEAACAgIDAAMAAAAAAAAAAAAAAQIRAwQSITETMkH/xAAXAQADAQAAAAAAAAAAAAAAAAABAwQF/8QAHBEAAgICAwAAAAAAAAAAAAAAAAEDIQIEEhMx/9oADAMBAAIRAxEAPwC3g2k/07Y5FJWmeRw73FdspYd9OKqQmSImi2m7LfOgTVt2vQTdBato8VHK0k0zoxbTj4yXjyrl10avIrqzXpmC8WizHedegiPJK/sBfFDkq9Jvyzr01tpXYARzRopOvQAEWf/Z");
    }
}

.nh-zoom__frame picture {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.nh-zoom__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nh-zoom__shade {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to top, rgba(13, 38, 37, .9) 0%, rgba(13, 38, 37, .45) 50%, rgba(13, 38, 37, .15) 100%);
    opacity: 0;
}

.nh-zoom__copy {
    display: grid;
    justify-items: start;
    gap: 18px;
    margin-top: 36px;
}

.nh-zoom__text {
    margin: 0;
    max-width: 34em;
    font-size: clamp(1.125rem, 1.02rem + .5vw, 1.4375rem);
    line-height: 1.4;
    color: var(--nh-ink-2);
}

.nh-zoom .nh-btn--light { background: var(--nh-sage); color: #fff; }

/* Scena fissata: solo dopo che home.js ha caricato e decodificato la fotografia
   (data-zoom-ready). Prima di allora resta la versione statica, sempre leggibile. */
.nh-motion .nh-zoom[data-zoom-ready] { height: calc(var(--nh-stage) * 2.4); padding: 0; }

.nh-motion .nh-zoom[data-zoom-ready] .nh-zoom__stage {
    position: -webkit-sticky; position: sticky;
    top: 0;
    height: var(--nh-stage);
    overflow: hidden;
}

.nh-motion .nh-zoom[data-zoom-ready] .nh-zoom__frame {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    max-width: none;
    margin: 0;
    aspect-ratio: auto;
    transform: scale(.6);
}

.nh-motion .nh-zoom[data-zoom-ready] .nh-zoom__copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(48px, 11vh, 120px);
    margin: 0 auto;
    color: #fff;
    opacity: 0;
}

.nh-motion .nh-zoom[data-zoom-ready] .nh-zoom__copy .nh-h2 { font-size: clamp(2.25rem, 1.3rem + 4.2vw, 5rem); }
.nh-motion .nh-zoom[data-zoom-ready] .nh-zoom__text { color: rgba(255, 255, 255, .86); }
.nh-motion .nh-zoom[data-zoom-ready] .nh-btn--light { background: #fff; color: var(--nh-sage-deep); }

/* --------------------------------------------------------------------------
   Browser senza aspect-ratio (Safari < 15): proporzioni ottenute con padding-top.
   Le immagini senza riquadro proprio (articoli, pannelli) seguono già le
   proporzioni dei propri attributi width/height.
   -------------------------------------------------------------------------- */
@supports not (aspect-ratio: 1 / 1) {
    .nh-hero__frame,
    .nh-zoom__frame,
    .nh-panel__media { height: 0; }

    .nh-hero__frame  { position: relative; padding-top: 125%; }
    .nh-zoom__frame  { padding-top: 62.5%; }
    .nh-panel__media { padding-top: 75%; }

    .nh-hero__frame img,
    .nh-panel__media img { position: absolute; top: 0; left: 0; }
}

@supports not (aspect-ratio: 1 / 1) {
    @media (max-width: 767px), (orientation: portrait) and (max-width: 1100px) {
        .nh-zoom__frame { padding-top: 125%; }
    }
}

/* --------------------------------------------------------------------------
   In studio o online: pannelli (verticali di base, orizzontali con data-pinned)
   -------------------------------------------------------------------------- */
.nh-hs { padding-top: var(--nh-section); padding-bottom: var(--nh-section); }

.nh-hs__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(32px, 4vw, 52px);
}

.nh-hs__intro { display: grid; gap: 14px; }

.nh-hs__dots { display: none; gap: 8px; padding-bottom: 12px; }

.nh-hs__dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .18);
    transition: transform .4s var(--nh-ease), background-color .3s ease;
}

.nh-hs[data-panel="0"] .nh-hs__dots span:nth-child(1),
.nh-hs[data-panel="1"] .nh-hs__dots span:nth-child(2),
.nh-hs[data-panel="2"] .nh-hs__dots span:nth-child(3) { background: var(--nh-sage); transform: scale(1.35); }

.nh-hs__track {
    display: grid;
    gap: 16px;
    padding-left: var(--nh-gutter); padding-right: var(--nh-gutter);
    max-width: calc(var(--nh-wrap) + 2 * var(--nh-gutter));
    margin-left: auto; margin-right: auto;
}

.nh-panel {
    display: grid;
    gap: 28px;
    padding: clamp(24px, 3.5vw, 44px);
    border-radius: var(--nh-r-l);
    background: var(--nh-mist);
    transform-origin: center center;
}

.nh-panel__body { display: flex; flex-direction: column; gap: 18px; }

.nh-panel__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--nh-r-m);
    overflow: hidden;
    background: #e3e8e6;
}

.nh-panel__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nh-panel__media iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; }

@media (min-width: 900px) {
    .nh-panel--studio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 44px; }
}

.nh-panel--online { background: var(--nh-sage-deep); color: #fff; }
.nh-panel--online .nh-text { color: rgba(255, 255, 255, .76); }

.nh-facts {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 18px 0;
    border-top: 1px solid var(--nh-line);
    border-bottom: 1px solid var(--nh-line);
}

.nh-facts dt { font-weight: 600; }
.nh-facts dd { margin: 2px 0 0; color: var(--nh-ink-2); }

.nh-map__control { display: grid; gap: 2px; margin: 0; }

.nh-map__toggle {
    justify-self: start;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--nh-sage);
    cursor: pointer;
}

.nh-map__toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.nh-map__toggle[hidden] { display: none; }
.nh-map__note { font-size: .8125rem; color: var(--nh-ink-2); }

.nh-steps { list-style: none; margin: 0; padding: 0; }

.nh-steps li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.nh-steps li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }

.nh-steps__n {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(159, 209, 201, .16);
    color: var(--nh-mint);
    font-size: .9375rem;
    font-weight: 700;
}

.nh-steps h4,
.nh-store h4 { margin: 4px 0 4px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.018em; }
.nh-steps p { margin: 0; color: rgba(255, 255, 255, .72); font-size: .9375rem; }

.nh-store { list-style: none; margin: 0; padding: 0; }
.nh-store li { padding: 14px 0; border-top: 1px solid var(--nh-line); }
.nh-store li:last-child { border-bottom: 1px solid var(--nh-line); }
.nh-store p { margin: 0; color: var(--nh-ink-2); font-size: .9375rem; }

/* Scorrimento orizzontale fissato (desktop, impostato da home.js) */
.nh-hs[data-pinned] { padding: 0; }
.nh-hs[data-pinned] [data-reveal] { opacity: 1; animation: none; }

.nh-hs[data-pinned] .nh-hs__stage {
    position: -webkit-sticky; position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: var(--nh-stage);
    padding-top: var(--nh-header);
    overflow: hidden;
}

.nh-hs[data-pinned] .nh-hs__dots { display: flex; }
.nh-hs[data-pinned] .nh-hs__head { margin-bottom: clamp(20px, 3.5vh, 44px); }

@media (max-height: 860px) {
    .nh-hs[data-pinned] .nh-hs__intro .nh-lead { display: none; }
}
.nh-hs[data-pinned] .nh-hs__viewport { overflow: clip; }

.nh-hs[data-pinned] .nh-hs__track {
    display: flex;
    align-items: center;
    gap: 24px;
    width: max-content;
    max-width: none;
    margin: 0;
    padding-left: max(var(--nh-gutter), calc((100vw - var(--nh-wrap)) / 2));
    padding-right: max(var(--nh-gutter), calc((100vw - var(--nh-wrap)) / 2));
}

.nh-hs[data-pinned] .nh-panel { width: min(920px, 72vw); padding: clamp(24px, 2.8vw, 40px); }
.nh-hs[data-pinned] .nh-panel--online,
.nh-hs[data-pinned] .nh-panel--store { width: min(660px, 56vw); }

/* --------------------------------------------------------------------------
   Blog: Bento editoriale
   -------------------------------------------------------------------------- */
.nh-posts {
    list-style: none;
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
    .nh-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nh-posts__item:first-child { grid-column: span 2; }
}

@media (min-width: 1080px) {
    .nh-posts { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
    .nh-posts__item:first-child { grid-column: auto; grid-row: span 2; }
}

.nh-posts__item { display: flex; min-width: 0; }

.nh-post {
    --glare: rgba(36, 107, 106, .1);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--nh-r-l);
    background: var(--nh-mist);
    color: inherit;
    text-decoration: none;
}

.nh-post::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 30px 60px -28px rgba(13, 38, 37, .38);
    opacity: 0;
    pointer-events: none;
}

.nh-post__media {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    border-radius: var(--nh-r-l) var(--nh-r-l) 0 0;
    overflow: hidden;
    background: #e7ebe9;
    color: rgba(36, 107, 106, .35);
    font-size: 40px;
}

.nh-posts__item:first-child .nh-post__media { aspect-ratio: 16 / 10; }

@media (min-width: 1080px) {
    .nh-posts__item:first-child .nh-post__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 320px; }
}

.nh-post__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.nh-post__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 26px 28px;
}

.nh-post__cat { font-size: .875rem; font-weight: 600; color: var(--nh-sage); }

.nh-post__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 1.3125rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.022em;
}

.nh-posts__item:first-child .nh-post__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); }

.nh-post__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: .9375rem;
    color: var(--nh-ink-2);
}

.nh-post__date { margin-top: 4px; font-size: .8125rem; color: var(--nh-ink-2); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.nh-faq {
    display: grid;
    gap: 36px;
}

@media (min-width: 960px) {
    .nh-faq { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: start; }
    .nh-faq__head { position: -webkit-sticky; position: sticky; top: 112px; }
}

.nh-faq__head { display: grid; gap: 16px; }

.nh-qa { border-top: 1px solid var(--nh-line); }
.nh-qa:last-child { border-bottom: 1px solid var(--nh-line); }

.nh-qa__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 44px;
    padding: 22px 0;
    list-style: none;
    cursor: pointer;
    font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3125rem);
    font-weight: 600;
    letter-spacing: -0.018em;
}

.nh-qa__q::-webkit-details-marker { display: none; }

.nh-qa__icon {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    transition: transform .3s var(--nh-ease), background-color .2s ease;
}

.nh-qa__icon::before,
.nh-qa__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.8px;
    border-radius: 2px;
    background: var(--nh-ink);
    transform: translate(-50%, -50%);
}

.nh-qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.nh-qa[open] .nh-qa__icon { transform: rotate(45deg); background: var(--nh-sage-tint); }

.nh-qa__a {
    margin: 0;
    padding: 0 54px 24px 0;
    max-width: 40em;
    color: var(--nh-ink-2);
}

/* Apertura animata dove il browser lo consente (Chrome/Edge recenti) */
.nh-qa::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size .35s var(--nh-ease), content-visibility .35s allow-discrete;
}

.nh-qa[open]::details-content { block-size: auto; }

/* --------------------------------------------------------------------------
   Movimento ridotto: nessuna animazione, nessuna scena fissata
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nh *,
    .nh *::before,
    .nh *::after {
        animation: none !important;
        transition: none !important;
    }
}