/* Home 2026 (01/10/2026) — caricato solo da index.html.
   Sezioni: copertina con foto in dissolvenza, scorciatoie a linguetta, cosa facciamo,
   il negozio, dicono di noi, chiusura. Le file a scorrimento laterale usano .swipe-m (style.css + swipe.js). */

/* ---------- 1. Copertina ---------- */
.h2-hero { position: relative; min-height: min(78vh, 720px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--inchiostro); }
.h2-hero-media { position: absolute; inset: 0; }
.h2-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: 0; animation: h2-fade 24s infinite; }
.h2-hero-media img:nth-child(1) { animation-delay: 0s; }
.h2-hero-media img:nth-child(2) { animation-delay: 6s; }
.h2-hero-media img:nth-child(3) { animation-delay: 12s; }
.h2-hero-media img:nth-child(4) { animation-delay: 18s; }
/* ogni foto: entra in dissolvenza, zoom lento, esce (4 foto × 6 s = ciclo di 24 s) */
@keyframes h2-fade {
  0%   { opacity: 0; transform: scale(1.02); }
  5%   { opacity: 1; }
  25%  { opacity: 1; }
  32%  { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .h2-hero-media img { animation: none; }
  .h2-hero-media img:first-child { opacity: 1; }
}
.h2-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,20,.08) 20%, rgba(20,20,20,.55) 55%, rgba(20,20,20,.85) 100%); }
.h2-hero-body { position: relative; z-index: 2; width: 100%; padding-bottom: 5.8rem; }
.h2-hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 7vw, 4.4rem); line-height: 1.05; margin-bottom: .8rem; color: #fff; }
.h2-hero h1 strong { font-weight: 650; }
.h2-hero p { font-size: clamp(1rem, 1.4vw, 1.15rem); opacity: .93; max-width: 32rem; }
@media (min-width: 900px) {
  .h2-hero::after { background: linear-gradient(90deg, rgba(20,20,20,.8) 0%, rgba(20,20,20,.5) 45%, rgba(20,20,20,.08) 78%); }
  .h2-hero-body { padding-bottom: 7rem; }
}

/* ---------- 2. Scorciatoie: separatori a linguetta ---------- */
.sc-wrap { position: relative; z-index: 3; margin: -3.8rem auto 0; max-width: var(--container, 1180px); padding: 0 1rem; }
.sc-panel { position: relative; background: var(--salvia); border-radius: 26px; padding: 1.3rem 1rem 1.1rem; box-shadow: var(--shadow-float); }
.sc-head { text-align: center; margin-bottom: 1.4rem; }
.sc-badge { display: inline-flex; align-items: center; gap: .35rem; background: var(--giallo); color: var(--inchiostro); font-weight: 800; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; padding: .35rem .75rem .35rem .55rem; border-radius: 999px; margin-bottom: .6rem; }
.sc-badge svg { width: 15px; height: 15px; }
.sc-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; line-height: 1.2; color: var(--inchiostro); }
.sc-head h2 strong { font-weight: 650; }
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem .7rem; }
.sc { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; background: var(--bianco); border-radius: 4px 16px 16px 16px; padding: 1rem .85rem .9rem; text-decoration: none; color: var(--inchiostro); box-shadow: 0 10px 22px -14px rgba(35,32,26,.45); transition: transform .2s ease, box-shadow .2s ease; }
.sc:hover, .sc:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 28px -14px rgba(35,32,26,.5); }
.sc:active { transform: scale(.98); }
.sc-tab { position: absolute; top: -1.15rem; left: 0; height: 1.25rem; padding: 0 .8rem; display: grid; place-items: center; border-radius: 8px 8px 0 0; background: var(--giallo); color: var(--inchiostro); font-weight: 800; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.sc-tab.alt { background: var(--salvia-scuro); color: #fff; }
.sc-ico { width: 50px; height: 50px; border-radius: 14px; background: var(--giallo); display: grid; place-items: center; }
.sc-ico svg { width: 27px; height: 27px; fill: none; stroke: var(--salvia-scuro); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sc-txt { padding-right: 1.6rem; }
.sc-txt b { display: block; font-weight: 800; font-size: .92rem; line-height: 1.2; }
.sc-txt small { display: block; font-size: .78rem; color: var(--inchiostro-70); margin-top: .15rem; line-height: 1.3; }
.sc-go { position: absolute; right: .7rem; bottom: .75rem; width: 28px; height: 28px; border-radius: 50%; background: var(--salvia-scuro); display: grid; place-items: center; transition: transform .2s ease; }
.sc:hover .sc-go { transform: translateX(3px); }
.sc-go svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {
  .sc-wrap { padding: 0 clamp(1.1rem, 4vw, 2.5rem); }
  .sc-panel { padding: 1.5rem 1.6rem; display: grid; grid-template-columns: 250px 1fr; align-items: center; gap: 1.8rem; }
  .sc-head { text-align: left; margin: 0; }
  .sc-head h2 { font-size: 1.55rem; }
  .sc-grid { grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.1rem; }
}

/* ---------- sezioni ---------- */
.h2-block { padding-top: clamp(2.8rem, 6vw, 4.5rem); }
.h2-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.12; margin-bottom: 1.2rem; }

/* 3. card con foto */
.h2-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.h2-card { position: relative; display: block; aspect-ratio: 4/5; border-radius: 22px; overflow: hidden; color: #fff; text-decoration: none; box-shadow: var(--shadow-card); }
.h2-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.h2-card:hover img { transform: scale(1.05); }
.h2-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72)); }
.h2-card span { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2; }
.h2-card b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.15; margin-bottom: .2rem; }
.h2-card small { font-size: .8rem; opacity: .92; }

/* 4. il negozio */
.h2-chips { justify-content: flex-start; margin: 0 0 1.2rem; }
.h2-shop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.h2-shop img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow-card); }

/* 5. recensioni */
.h2-reviews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.h2-review { background: var(--bianco); border-radius: 20px; padding: 1.3rem; box-shadow: var(--shadow-card); font-size: .95rem; line-height: 1.55; }
.h2-review footer { margin-top: .8rem; font-weight: 800; font-size: .85rem; }
.h2-review .stars { color: var(--giallo-scuro); letter-spacing: .08em; }
.h2-more { margin-top: 1rem; font-weight: 800; }
.h2-more a { color: var(--salvia-scuro); }

@media (max-width: 1100px) and (min-width: 861px) {
  .h2-cards { grid-template-columns: repeat(3, 1fr); }
  .h2-reviews { grid-template-columns: repeat(2, 1fr); }
}
/* su smartphone le file scorrono di lato (.swipe-m): card un po' più strette */
@media (max-width: 860px) {
  .h2-cards.swipe-m > * { flex-basis: 72%; }
  .h2-shop.swipe-m > * { flex: 0 0 62%; width: 62%; }
}

/* ---------- 3. Prova il laser (v3) ---------- */
.laser-sec { padding-top: clamp(2.6rem, 6vw, 4rem); padding-bottom: 0; }
.laser-box {
  position: relative; overflow: hidden; border-radius: 28px; color: var(--inchiostro);
  background: radial-gradient(900px 520px at 72% 45%, #d3e6df 0%, var(--salvia) 55%, var(--salvia-2) 100%);
  display: grid; grid-template-columns: 1fr; gap: 1.6rem; padding: clamp(1.4rem, 4vw, 3rem);
  box-shadow: var(--shadow-float);
}
/* il piano a nido d'ape della macchina laser */
.laser-box::before { content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, transparent 5px, rgba(65,103,91,.55) 5.6px, transparent 6.4px);
  background-size: 16px 14px; -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000 15%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 50%, #000 15%, transparent 75%); }
.laser-copy, .laser-stage { position: relative; z-index: 1; }
.laser-copy h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.1; margin-bottom: 1.2rem; color: var(--inchiostro); }
.laser-copy h2 strong { font-weight: 650; }
.laser-form label, .laser-lab { display: block; font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--salvia-scuro); margin-bottom: .5rem; }
.laser-lab { margin-top: 1rem; }
.laser-form input {
  width: 100%; max-width: 26rem; background: var(--bianco); color: var(--inchiostro); border: 1.5px solid rgba(35,32,26,.14);
  border-radius: 14px; padding: .85rem 1rem; font: 600 1.15rem var(--font-body); outline: none;
}
.laser-form input:focus { border-color: var(--salvia-scuro); box-shadow: 0 0 0 3px rgba(65,103,91,.2); }
.laser-fonts { justify-content: flex-start; max-width: 26rem; margin-top: 0; }
.laser-fonts button { min-width: 0; flex: 1 0 calc(25% - .5rem); }
.laser-go {
  margin-top: 1.2rem; background: var(--giallo); color: var(--inchiostro); border: 0; cursor: pointer;
}
.laser-go svg { width: 18px; height: 18px; fill: currentColor; }
.laser-go:hover { background: var(--giallo-scuro); }
.laser-go[disabled] { opacity: .7; cursor: progress; animation: none; }
@keyframes laser-pulse { 70% { box-shadow: 0 0 0 14px rgba(251,185,22,0), 0 12px 24px -10px rgba(251,185,22,.6); } 100% { box-shadow: 0 0 0 0 rgba(251,185,22,0), 0 12px 24px -10px rgba(251,185,22,.6); } }
.laser-link { display: inline-block; margin-top: 1.1rem; color: var(--salvia-scuro); font-weight: 800; text-decoration: none; }
.laser-link:hover { text-decoration: underline; }
#laser-board { display: block; width: 100%; aspect-ratio: 4/3; filter: drop-shadow(0 22px 26px rgba(35,50,40,.35)); }
@media (min-width: 900px) {
  .laser-box { grid-template-columns: .95fr 1.05fr; align-items: center; gap: 2.5rem; }
}
@media (max-width: 899px) {
  /* su smartphone: titolo, poi il tagliere, poi il modulo, così l'effetto si vede subito */
  .laser-box { gap: 1rem; }
  .laser-copy { display: contents; }
  .laser-copy > * { position: relative; z-index: 1; }
  .laser-copy h2 { order: 1; margin-bottom: 0; }
  .laser-stage { order: 2; margin: 0 -.4rem; }
  .laser-form { order: 3; }
  .laser-link { order: 4; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .laser-go { animation: none; } }