/* M-Pellet — FORGIA, affumicatore a legna. Personalità della pagina: fumo, cottura lenta, legna.
   Si appoggia a prodotto.css (hero, sezioni, scheda, FAQ, correlati) ed experience.css (token, .opts).
   Prefisso f-: solo questa pagina. Colore d'accento sempre il giallo del logo; l'arancio è solo la brace dello schema.
   Immagini (28/10/2026, docs/strategia-immagini-2026-10-28.md): FORGIA è gruppo B. La foto da studio resta sul suo
   sfondo bianco originale, in pannello: nessuno scontorno, nessun drop-shadow. La cornice quadrata (.f-quadro,
   .f-fumo__tela) nasconde solo le prime 480 righe della tela 1920 x 2400, che sono bianco puro (verificato). */

/* le sezioni .p-sec sono griglie con una traccia implicita "auto": un'immagine con width intrinseca grande
   (es. il render ETNA da 1620 px nei correlati) la allarga oltre lo schermo su mobile. Traccia vincolata. */
.forgia .p-sec,.forgia .p-card,.forgia .p-card__img{grid-template-columns:minmax(0,1fr)}
.forgia .p-grid>li,.forgia .p-card{min-width:0}
/* correlati: tre schede, tre colonne. Il render ETNA è su tela 4:5 uniforme (base al 94%): riempie il riquadro come
   il pannello POMPEI e la provvisoria VESUVIO, così le schede hanno stessa proporzione e linea di base.
   Solo figli diretti (>img): le immagini dentro .p-visual seguono le regole del componente (limite --px compreso). */
.forgia #correlati .p-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.forgia .p-card__img{grid-template-rows:minmax(0,1fr);overflow:hidden}
.forgia .p-card__img>img{inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
@media (max-width:760px){.forgia #correlati .p-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- HERO: foto da studio in pannello, fumo che sale dietro ---------- */
.f-hero__media{background:radial-gradient(55% 48% at 70% 60%,#2b1a0f 0%,transparent 70%),radial-gradient(40% 40% at 18% 20%,rgba(160,160,155,.08) 0%,transparent 70%)}
.f-hero__media .p-visual--hero{position:relative;z-index:1;max-width:min(100%,540px,calc(74vh - 90px))}
@media (max-width:900px){.f-hero__media .p-visual--hero{max-width:min(100%,460px,calc(60vh - 70px))}}
/* cornice quadrata: la foto (4:5) resta intera in larghezza, si vede dalla riga 480 in giù (sopra c'è solo bianco puro) */
.f-quadro__tela{display:block;width:100%;aspect-ratio:1;overflow:hidden;background:#fff}
.f-quadro .f-quadro__tela img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.f-smoke{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.f-smoke i{position:absolute;left:8%;bottom:30%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(200,200,195,.10),transparent);filter:blur(18px);animation:f-sale 14s linear infinite;opacity:0}
.f-smoke i:nth-child(2){left:2%;width:38%;animation-delay:-5s}
.f-smoke i:nth-child(3){left:14%;width:30%;animation-delay:-9.5s}
@keyframes f-sale{0%{transform:translate(0,30%) scale(.6);opacity:0}20%{opacity:1}100%{transform:translate(-10%,-120%) scale(1.5);opacity:0}}

/* ---------- IL PERCORSO DEL FUMO (schema sul render) ---------- */
.f-fumo .p-sec__head{max-width:none}
.f-fumo__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.f-fumo__fig{position:relative;margin:0;max-width:640px;width:100%;justify-self:center;padding-bottom:30px}
/* pannello bianco quadrato con la foto da studio; lo schema SVG ha lo stesso quadrato come viewBox (0 480 1920 1920) */
.f-fumo__tela{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;background:#fff;box-shadow:0 34px 60px -34px rgba(0,0,0,.7)}
.f-fumo__tela img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 100%}
.f-fumo__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.f-fumo__fig figcaption{position:absolute;left:0;bottom:0;font:500 11px var(--mono);color:var(--dim)}
.f-fumo__brace{mix-blend-mode:screen;animation:f-brace 2.6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes f-brace{from{opacity:.55;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
/* schema su fondo bianco: scia e tracciato scuri, flusso giallo */
.f-fumo__scia{stroke:rgba(12,12,13,.10);stroke-width:30;stroke-linecap:round;stroke-linejoin:round;filter:blur(6px)}
.f-fumo__via{stroke:rgba(12,12,13,.55);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.f-fumo__flusso{stroke:var(--yellow);stroke-width:7;stroke-linecap:round;stroke-dasharray:3 30;animation:f-flusso 1.6s linear infinite}
@keyframes f-flusso{to{stroke-dashoffset:-66}}
.f-fumo__pin circle{fill:var(--void);stroke:var(--yellow);stroke-width:4;transition:fill .4s var(--ease)}
.f-fumo__pin text{font:700 30px var(--mono);fill:var(--ink);text-anchor:middle;transition:fill .4s}
.f-fumo__pin.is-on circle{fill:var(--yellow)}
.f-fumo__pin.is-on text{fill:var(--yellow-ink)}
.f-fumo__tappe{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.f-fumo__tappe li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);opacity:.72;transition:opacity .5s var(--ease)}
.f-fumo__tappe li.is-on{opacity:1}
.f-fumo__n{font-size:13px;font-weight:700;color:var(--yellow);padding-top:5px}
.f-fumo__tappe h3{font-size:clamp(20px,1.8vw,26px);font-weight:800;font-stretch:112%;letter-spacing:-.01em;line-height:1.15;margin-bottom:6px}
.f-fumo__tappe p{color:#cfcfcb;font-size:15px;max-width:46ch}
/* senza JS (o con movimento ridotto) tutte le tappe sono accese */
.f-fumo:not(.is-js) .f-fumo__tappe li{opacity:1}
@media (max-width:900px){
  .f-fumo__grid{grid-template-columns:1fr}
  .f-fumo__tappe li{opacity:1}
}

/* ---------- CARATTERISTICHE: griglia + vista aperta ---------- */
.f-car{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.f-car .p-feat{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
/* foto reale quadrata (1080 px) a coperchio aperto, intera: mai oltre 702 px CSS (limite HiDPI) */
.f-aperta{margin:0;display:grid;grid-template-rows:auto auto;align-content:start;align-self:start;gap:0;width:100%;max-width:702px;justify-self:center;background:#111112;border:1px solid var(--line)}
.f-aperta img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.f-aperta figcaption{padding:12px 16px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line)}
@media (max-width:900px){
  .f-car{grid-template-columns:1fr}
}

/* ---------- SCENA IN GIARDINO ---------- */
/* foto 1080 x 1080 intera e quadrata: al massimo 702 px CSS (1,3x su HiDPI), mai stirata in altezza */
.f-scena{position:relative;display:grid;grid-template-columns:minmax(0,min(50%,702px)) minmax(0,1fr);align-items:center;border-top:1px solid var(--line);background:#0e0c0b}
.f-scena__media{margin:0;position:relative;overflow:hidden;width:100%;max-width:702px}
.f-scena__media img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.f-scena__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,#0e0c0b 100%);pointer-events:none}
.f-scena__txt{display:grid;gap:24px;align-content:center;padding:clamp(48px,7vw,110px) var(--gutter)}
.f-scena__txt .lead{max-width:40ch}
@media (max-width:900px){
  .f-scena{grid-template-columns:minmax(0,1fr)}
  .f-scena__media{justify-self:center}
  .f-scena__media::after{background:linear-gradient(180deg,transparent 65%,#0e0c0b 100%)}
  .f-scena__txt{padding-top:36px}
}

/* ---------- OPTIONAL ---------- */
.f-opt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.f-opt .p-config{max-width:none}
@media (max-width:900px){.f-opt{grid-template-columns:1fr}}

/* ---------- PREZZO (chiusura): componente .p-prezzo esteso di prodotto.css (regole 28/10/2026) ---------- */
.f-buy{display:grid;gap:clamp(22px,3vw,34px);max-width:1180px}
.f-buy .p-sec__head .p-nota{margin:0}

/* ---------- movimento ridotto: niente fumo animato ---------- */
@media (prefers-reduced-motion:reduce){
  .f-smoke i,.f-fumo__brace,.f-fumo__flusso{animation:none}
  .f-smoke{display:none}
}

/* barra mobile: "Richiedi disponibilità" non si comprime (regole 28/10/2026); il testo a sinistra va a capo */
.buybar .btn{flex:none}
.buybar span{line-height:1.35}