/* ==========================================================================
   CLASS – pagina Serramenti (serramenti.html)
   Si appoggia a style.css e componenti.css. Accento blu "vetro" su neutri e
   antracite.
   Animazioni: solo transform, opacity e stroke-dashoffset.
   ========================================================================== */

.sr-page {
  --c-accent: #1273b3;        /* blu vetro: i pulsanti primari del sito lo ereditano */
  --c-accent-hover: #0b5587;
  --c-accent-soft: #e4f1fa;
  --c-glass: #8fd0f5;         /* azzurro chiaro per i dettagli su fondo scuro */
  --acc: var(--c-accent);
  --acc-deep: var(--c-accent-hover);
  --acc-soft: var(--c-accent-soft);
  --acc-ink: #ffffff;
  --acc-link: var(--c-glass);
  --acc-rgb: 18, 115, 179;
}
.sr-page .eyebrow { color: var(--acc-deep); }
.sr-page .trust-item svg, .sr-page .contact-list svg, .sr-page .values svg { fill: var(--c-glass); }
.sr-page .nav-list a::after { background: var(--acc); }
.sr-page :focus-visible { outline-color: var(--acc); }
.sr-page .site-header .btn-primary { background: var(--acc); }
.sr-page .site-header .btn-primary:hover { background: var(--acc-deep); }
.todo { font-weight: 600; }

/* ---------- 1. Hero ---------- */
.hm-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
  display: grid; align-items: center;
  background: linear-gradient(160deg, #f4f9fd 0%, #e2f1fa 45%, #cfe7f6 100%);
  color: var(--c-heading);
}
.hm-hero-grid { display: grid; gap: var(--s-6); padding-top: var(--s-7); padding-bottom: var(--s-8); align-items: center; }
.hm-hero h1 {
  font-size: clamp(2.4rem, 1.2rem + 4.8vw, 4.9rem); letter-spacing: -0.025em; line-height: 1.04;
  margin-bottom: var(--s-5); text-wrap: balance;
}
.hm-h1-line { display: block; }
.hm-h1-swap { display: inline-block; color: var(--acc-deep); min-width: 4.2ch; }
.hm-h1-strong { color: var(--c-heading); }
.hm-hero-sub { font-size: clamp(1.125rem, 1rem + 0.9vw, 1.4rem); max-width: 40ch; color: #3b4652; margin-bottom: var(--s-6); font-weight: 500; }
.hm-hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.hm-hero-note { margin: var(--s-5) 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--c-heading); }
.hm-hero-art { position: relative; margin-inline: auto; width: min(100%, 560px); }
.hm-window { width: 100%; height: auto; filter: drop-shadow(0 30px 60px rgba(18, 60, 100, 0.25)); will-change: transform; }
.hm-window .hw-far, .hm-window .hw-near, .hm-window .hw-clouds, .hm-window .hw-sky { will-change: transform; }
.hm-hero-glow {
  position: absolute; inset: 12% -10% -10% -10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(143, 208, 245, 0.75), rgba(143, 208, 245, 0));
}
@media (min-width: 600px) { .hm-hero-actions { flex-direction: row; align-items: center; flex-wrap: wrap; } }
@media (min-width: 900px) {
  .hm-hero-grid { grid-template-columns: 1.05fr 1fr; gap: var(--s-8); padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .hm-hero-art { width: min(100%, 640px); justify-self: end; }
}

/* ---------- 2. Fascia fiducia ---------- */
.hm-trust { background: var(--c-anth); }
.hm-badge { will-change: transform, opacity; }
.hm-stat { font-size: 1.25em; color: var(--c-glass); font-family: var(--f-head); line-height: 1; vertical-align: baseline; transform-origin: left bottom; }
.hm-trust .trust-item strong { font-size: 1.125rem; }

/* ---------- 4. Fuori / dentro ---------- */
.io { background: #0f1620; color: #fff; position: relative; }
.io { --ctl-bg: rgba(255, 255, 255, 0.08); --ctl-fg: #fff; --ctl-track: rgba(255, 255, 255, 0.22); --ctl-dot: rgba(255, 255, 255, 0.35); }
.io-pin {
  height: 100vh; height: 100svh; display: flex; align-items: stretch;
  padding-top: var(--header-h); padding-bottom: 84px;
  box-sizing: border-box;
}
.io-grid { display: grid; grid-template-rows: auto 1fr; gap: var(--s-4); height: 100%; padding-block: var(--s-3) var(--s-4); align-content: start; }
.io-text { position: relative; display: grid; grid-template-rows: auto auto 1fr; align-content: stretch; min-height: 0; }
.io .eyebrow { color: var(--c-glass); margin-bottom: var(--s-1); }
.io-title { color: #fff; font-size: 1.125rem; margin-bottom: var(--s-2); opacity: 0.8; }
.io-captions { position: relative; font-size: clamp(1.3rem, 0.9rem + 2vw, 2.3rem); line-height: 1.18; min-height: 3.6em; }
.io-caption {
  position: absolute; inset: 0; margin: 0; opacity: 0; will-change: transform, opacity;
  display: flex; align-items: center; font-family: var(--f-head); font-weight: 700; letter-spacing: -0.015em;
  font-size: inherit; text-wrap: balance; color: #fff;
}
.io-stage { display: grid; grid-template-columns: 1fr; gap: var(--s-3); align-content: center; min-height: 0; }
.io-panel { position: relative; margin: 0; min-width: 0; }
.io-panel figcaption {
  position: absolute; left: var(--s-3); top: var(--s-3); z-index: 1; padding: 0.3rem 0.7rem; border-radius: var(--r-pill);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-anth); background: rgba(255,255,255,0.9);
}
.io-panel-new figcaption { background: #ffd98a; }
.io-panel-old figcaption { background: var(--c-glass); }
.io-svg {
  width: 100%; height: auto; max-height: calc((100svh - var(--header-h) - 15rem) / 2);
  aspect-ratio: 1000 / 620; border-radius: var(--r-md); box-shadow: 0 20px 50px rgba(0,0,0,0.45); margin-inline: auto;
}
.io-grid .io-stage { order: -1; }
.io-grid { max-width: 1400px; }
.ex-grid { max-width: 1360px; }
@media (max-width: 899px) {
  .io-text { grid-template-rows: none; align-content: start; }
  .io-captions { min-height: 3em; }
  .io-grid { align-content: center; }
}
@media (min-width: 600px) {
  .io-stage { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .io-svg { max-height: calc(100svh - var(--header-h) - 17rem); }
}
@media (min-width: 1024px) { .io-pin { padding-bottom: 0; } }
@media (min-width: 900px) {
  /* Testo sopra, due riquadri sotto a tutta larghezza */
  .io-grid { grid-template-rows: auto auto; align-content: center; gap: var(--s-5); }
  .io-stage { align-content: start; }
  .io-grid .io-stage { order: 0; }
  .io-text { grid-template-rows: none; align-content: end; }
  .io-captions { min-height: 2.6em; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); }
  .io-title { font-size: 1.25rem; }
  .io-stage { gap: var(--s-5); }
  .io-svg { max-height: calc(100svh - var(--header-h) - 15rem); }
}

/* Movimenti continui della scena (solo transform/opacity). I gruppi spenti
   (.is-off) fermano le animazioni per non consumare risorse. */
.io-svg .is-off, .io-svg .is-off * { animation-play-state: paused !important; }
.io-svg .snow { animation: io-snow 6s linear infinite; }
.io-svg .snow-b { animation-duration: 8s; animation-delay: -3s; }
@keyframes io-snow { from { transform: translate(0, -60px); } to { transform: translate(-40px, 300px); } }
.io-svg .gust { animation: io-gust 2.4s ease-in-out infinite; transform-origin: 360px 200px; }
@keyframes io-gust { 0% { transform: translateX(-80px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(120px); opacity: 0; } }
.io-svg .tree-top { animation: io-tree 2.2s ease-in-out infinite alternate; transform-origin: 401px 384px; }
@keyframes io-tree { from { transform: rotate(-2deg); } to { transform: rotate(7deg); } }
.io-svg .rain { animation: io-rain 0.9s linear infinite; }
.io-svg .rain-b { animation-duration: 1.1s; animation-delay: -0.5s; }
@keyframes io-rain { from { transform: translate(8px, -60px); } to { transform: translate(-8px, 320px); } }
.io-svg .drop { animation: io-drop 4s ease-in infinite; }
.io-svg .drop-2 { animation-delay: -1.5s; animation-duration: 5s; }
.io-svg .drop-3 { animation-delay: -2.8s; animation-duration: 4.5s; }
@keyframes io-drop { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(160px); opacity: 0; } }
.io-svg .car-a { animation: io-car 5s linear infinite; }
.io-svg .car-b { animation: io-car 6.5s linear infinite; animation-delay: -2.6s; }
.io-svg .car-c { animation: io-car-back 7.5s linear infinite; animation-delay: -1.2s; }
@keyframes io-car { from { transform: translateX(300px); } to { transform: translateX(840px); } }
@keyframes io-car-back { from { transform: translateX(840px) scaleX(-1); } to { transform: translateX(300px) scaleX(-1); } }
.io-svg .wv, .io-svg .wi, .io-svg .ws { transform-origin: 586px 404px; transform-box: view-box; }
.io-svg .wv { animation: io-wave 2.4s ease-out infinite; }
.io-svg .wv-2 { animation-delay: -0.8s; } .io-svg .wv-3 { animation-delay: -1.6s; }
@keyframes io-wave { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
.io-svg .wi { animation: io-wave-in 2.4s ease-out infinite; }
.io-svg .wi-2 { animation-delay: -0.8s; } .io-svg .wi-3 { animation-delay: -1.6s; }
@keyframes io-wave-in { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(5); opacity: 0; } }
.io-svg .ws { animation: io-wave-stop 2.4s ease-out infinite; }
.io-svg .ws-2 { animation-delay: -0.8s; } .io-svg .ws-3 { animation-delay: -1.6s; }
@keyframes io-wave-stop { 0% { transform: scale(0.6); opacity: 0.9; } 55% { transform: scale(2.2); opacity: 0.7; } 68% { transform: scale(2.05); opacity: 0.5; } 100% { transform: scale(2.1); opacity: 0; } }
.io-svg .dr-left { animation: io-dr-left 2.2s ease-out infinite; }
.io-svg .dr-right { animation: io-dr-right 2.6s ease-out infinite; animation-delay: -0.9s; }
.io-svg .dr-bottom { animation: io-dr-bottom 2.4s ease-out infinite; animation-delay: -0.5s; }
.io-svg .dr-d2 { animation-delay: -1.3s; }
@keyframes io-dr-left { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(-90px); opacity: 0; } }
@keyframes io-dr-right { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(70px); opacity: 0; } }
@keyframes io-dr-bottom { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
.io-svg .bn-l { animation: io-bn-l 2.6s ease-in-out infinite; }
.io-svg .bn-b { animation: io-bn-b 2.6s ease-in-out infinite; }
.io-svg .bn-d2 { animation-delay: -0.9s; } .io-svg .bn-d3 { animation-delay: -1.7s; }
@keyframes io-bn-l { 0% { transform: translateX(70px); opacity: 0; } 20% { opacity: 1; } 55% { transform: translateX(2px); } 62% { transform: translateX(10px); } 70% { transform: translateX(4px); } 100% { transform: translateX(40px); opacity: 0; } }
@keyframes io-bn-b { 0% { transform: translateY(-70px); opacity: 0; } 20% { opacity: 1; } 55% { transform: translateY(-2px); } 62% { transform: translateY(-10px); } 70% { transform: translateY(-4px); } 100% { transform: translateY(-40px); opacity: 0; } }
.io-svg .sun-rays { animation: io-rays 18s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes io-rays { to { transform: rotate(360deg); } }

/* Versione statica: 4 card con confronto vecchia/nuova */
.io-static { padding-block: var(--section-y); display: grid; gap: var(--s-6); }
.io-static .io-static-head { grid-column: 1 / -1; }
.io-static .io-static-head h2 { color: #fff; }
.io-static figure { margin: 0; display: grid; gap: var(--s-3); }
.io-static .io-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.io-static .io-pair div { display: grid; gap: var(--s-2); }
.io-static .io-pair span { font-size: var(--fs-sm); color: rgba(255,255,255,0.7); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.io-static .io-svg { max-height: none; box-shadow: var(--sh-md); border-radius: var(--r-md); }
.io-static figcaption { font-family: var(--f-head); font-weight: 700; font-size: 1.125rem; line-height: 1.3; color: #fff; }
@media (min-width: 900px) { .io-static { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 5. Com'è fatta una finestra ---------- */
.ex { background: var(--c-bg); position: relative; }
.ex-pin { height: 100vh; height: 100svh; display: flex; align-items: stretch; padding-top: var(--header-h); padding-bottom: 84px; box-sizing: border-box; }
.ex-grid { display: grid; grid-template-rows: auto 1fr; gap: var(--s-4); height: 100%; padding-block: var(--s-3) var(--s-4); align-content: start; }
.ex-text { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; align-content: stretch; min-height: 0; }
.ex-title { font-size: 1.125rem; margin-bottom: var(--s-2); opacity: 0.8; }
.ex-captions { position: relative; min-height: 9em; }
.ex-caption { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; display: flex; flex-direction: column; justify-content: center; }
.ex-caption strong { font-family: var(--f-head); font-size: clamp(1.4rem, 1rem + 1.8vw, 2.1rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--c-heading); margin-bottom: var(--s-2); }
.ex-caption p { margin: 0; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem); color: var(--c-text-muted); max-width: 34ch; }
.ex-caption-final strong { color: var(--acc-deep); }
.ex-scroll-hint { display: none; margin: var(--s-3) 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.ex-list { display: none; gap: var(--s-3); counter-reset: ex; }
.ex-list li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); align-items: start; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); counter-increment: ex; }
.ex-list li::before { content: counter(ex); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--acc); color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 0.9rem; }
.ex-list li > * { grid-column: 2; }
.ex-list strong { font-family: var(--f-head); color: var(--c-heading); }
.ex-list span { color: var(--c-text-muted); font-size: var(--fs-sm); }
.ex-list-final { border-bottom: 0 !important; }
.ex-list-final::before { content: "✓" !important; }
.ex-list-final strong { color: var(--acc-deep); }
.ex-stage { display: grid; align-content: center; min-height: 0; }
.ex-svg { width: 100%; height: auto; max-height: calc(100svh - var(--header-h) - 17rem); aspect-ratio: 1000 / 700; margin-inline: auto; }
.ex-layer { will-change: transform, opacity; }
.ex-label line { stroke-dasharray: 400; stroke-dashoffset: 400; }
.ex-grid .ex-stage { order: -1; }
@media (max-width: 899px) {
  .ex-pin { height: auto; padding-bottom: 0; padding-top: 0; }
  .ex-grid { height: auto; padding-block: var(--section-y); }
  .ex-captions, .ex-scroll-hint { display: none; }
  .ex-list { display: grid; }
  .ex-list li { opacity: 0; transform: translateX(-18px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
  .ex-list li.is-in, .pv-static .ex-list li, .hm-scene-static .ex-list li { opacity: 1; transform: none; }
  .ex-svg { max-height: 70svh; }
}
@media (min-width: 900px) {
  .ex-grid { grid-template-columns: 0.9fr 1.5fr; grid-template-rows: none; align-items: center; align-content: center; gap: var(--s-7); }
  .ex-grid .ex-stage { order: 0; }
  .ex-title { font-size: 1.25rem; }
  .ex-scroll-hint { display: block; }
  .ex-svg { max-height: calc(100svh - var(--header-h) - 6rem); }
}
@media (min-width: 1024px) { .ex-pin { padding-bottom: 0; } }
/* Statica (reduced-motion / senza GSAP): esploso fermo ed elenco */
.pv-static .ex-pin, .hm-scene-static .ex-pin { height: auto; padding-top: 0; padding-bottom: 0; }
.pv-static .ex-grid, .hm-scene-static .ex-grid { height: auto; padding-block: var(--section-y); align-items: start; }
.pv-static .ex-captions, .pv-static .ex-scroll-hint, .hm-scene-static .ex-captions, .hm-scene-static .ex-scroll-hint { display: none; }
.pv-static .ex-list, .hm-scene-static .ex-list { display: grid; }
.pv-static .ex-svg, .hm-scene-static .ex-svg { max-height: none; }

/* ---------- 6. PVC o alluminio ----------
   Le due facce stanno nella stessa cella di una griglia: la card è alta quanto
   la faccia più lunga, così il retro non esce mai dai bordi. */
.hm-flip-grid { display: grid; gap: var(--s-5); }
.hm-flip {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent;
  text-align: left; perspective: 1400px; color: inherit; border-radius: var(--r-lg);
}
.hm-flip-inner { position: relative; display: grid; width: 100%; transform-style: preserve-3d; transition: transform 650ms var(--ease); will-change: transform; }
.hm-flip:hover .hm-flip-inner, .hm-flip:focus-visible .hm-flip-inner, .hm-flip[aria-pressed="true"] .hm-flip-inner { transform: rotateY(180deg); }
@media (hover: none) { .hm-flip:hover:not([aria-pressed="true"]) .hm-flip-inner { transform: none; } }
.hm-flip-face {
  position: relative; grid-area: 1 / 1; min-width: 0; min-height: 340px; display: flex; flex-direction: column; justify-content: center; gap: var(--s-3);
  padding: var(--s-5); border-radius: var(--r-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1px solid var(--c-line); box-shadow: var(--sh-md);
}
.hm-flip-front { background: linear-gradient(160deg, #ffffff, var(--acc-soft)); color: var(--c-heading); }
.hm-flip-front svg { width: 56px; height: 56px; color: var(--acc); }
.hm-flip-front strong { font-family: var(--f-head); font-size: 2rem; line-height: 1; }
.hm-flip-front span { color: var(--c-text-muted); font-size: 1.0625rem; max-width: 30ch; }
.hm-flip-front em { font-style: normal; font-size: var(--fs-sm); font-weight: 700; color: var(--acc-deep); margin-top: auto; }
.hm-flip-back { background: var(--c-anth); color: #fff; transform: rotateY(180deg); justify-content: flex-start; }
.hm-flip-back strong { font-family: var(--f-head); font-size: 1.5rem; color: var(--c-glass); }
.hm-flip-back ul { display: grid; gap: var(--s-3); }
.hm-flip-back li { position: relative; padding-left: 1.4em; line-height: 1.45; color: rgba(255,255,255,0.88); font-size: 1rem; }
.hm-flip-back li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--c-glass); }
.hm-mat-conclusion { margin: var(--s-7) 0 0; text-align: center; font-family: var(--f-head); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); color: var(--c-heading); }
@media (min-width: 700px) { .hm-flip-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } .hm-flip-face { min-height: 380px; padding: var(--s-6); } .hm-flip-back li { font-size: 1.0625rem; } }

/* ---------- 7. Avvolgibili e zanzariere ---------- */
.hm-osc-grid { display: grid; gap: var(--s-6); }
.hm-osc-card { margin: 0; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); display: grid; }
.hm-osc-svg { width: 100%; height: auto; aspect-ratio: 400 / 420; max-height: 460px; margin-inline: auto; touch-action: pan-y; cursor: ns-resize; }
#zz-scene { cursor: default; }
.hm-osc-card figcaption { padding: var(--s-5); display: grid; gap: var(--s-2); }
.hm-osc-card figcaption strong { font-family: var(--f-head); font-size: 1.35rem; line-height: 1.2; color: var(--c-heading); }
.hm-osc-card figcaption span { color: var(--c-text-muted); }
.hm-osc-card figcaption small { color: var(--c-text-muted); font-size: 0.8rem; }
.hm-range { display: block; margin-top: var(--s-2); }
.hm-range input { width: 100%; accent-color: var(--acc); cursor: ew-resize; }
.hm-replay { justify-self: start; margin-top: var(--s-2); min-height: 40px; padding: 0.4rem 1rem; font-size: var(--fs-sm); }
.tap-slats { will-change: transform; }
.zz-mesh, .zz-bar { will-change: transform; }
.bug { will-change: transform; }
@media (min-width: 768px) { .hm-osc-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); } .hm-osc-card figcaption { padding: var(--s-6); } }

/* ---------- 8. Detrazioni ---------- */
.hm-det-cards { grid-template-columns: 1fr; }
.hm-det-next { margin: var(--s-5) 0 0; font-weight: 600; color: var(--c-heading); }
.hm-sim { margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--c-line); }
.hm-sim-title { font-size: var(--fs-h2); font-weight: 700; margin-bottom: var(--s-4); }
.hm-det-also { font-weight: 600; color: var(--c-heading); }
.hm-det-also a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .hm-det-cards { grid-template-columns: 1fr 1fr; } }

/* ---------- 9. Come lavoriamo ---------- */
.hm-how .todo { font-size: 0.75em; vertical-align: middle; }

/* ---------- 11. Contatti ---------- */
.hm-cta .pv-cta h2, .hm-cta h2 { max-width: 16ch; }
.hm-contact-list { margin: var(--s-7) 0 var(--s-5); gap: var(--s-4); }
.hm-contact-list .label { color: rgba(255,255,255,0.6); }
.hm-contact-list a, .hm-contact-list span { color: #fff; }
.hm-contact-list a { color: var(--c-glass); }
.hm-map { min-height: 220px; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #fff; }
.hm-map .map-placeholder small, .hm-map .map-placeholder small a { color: rgba(255,255,255,0.65); }
.hm-map .map-placeholder small a { text-decoration: underline; }
.hm-map iframe { min-height: 260px; }
@media (min-width: 900px) { .hm-contact-list { grid-template-columns: 1fr 1fr; } }

/* ---------- Scene con cursore (touch / schermi stretti) ----------
   Le sezioni non sono fissate: titolo, scena, poi didascalia e cursore nello stesso riquadro. */
.pv-manual .io-pin, .pv-manual .ex-pin { height: auto; padding: 0; display: block; }
.pv-manual .io-grid, .pv-manual .ex-grid {
  height: auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
  gap: var(--s-4); padding-block: var(--section-y); align-content: start; align-items: start;
}
.pv-manual .io-text, .pv-manual .ex-text { display: contents; }
.pv-manual .io-text > .eyebrow, .pv-manual .ex-text > .eyebrow { order: 1; margin-bottom: 0; }
.pv-manual .io-title, .pv-manual .ex-title { order: 2; margin-bottom: 0; }
.pv-manual .io-grid > .io-stage, .pv-manual .ex-grid > .ex-stage { order: 3; }
.pv-manual .io-captions, .pv-manual .ex-captions { order: 4; display: block; }
.pv-manual .io-grid > .pv-scene-ctl, .pv-manual .ex-grid > .pv-scene-ctl { order: 5; }
.pv-manual .ex-scroll-hint, .pv-manual .ex-list { display: none; }
.pv-manual .io-captions { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem); min-height: calc(3.7em + var(--s-4)); }
.pv-manual .io-caption { inset: var(--s-4) var(--s-4) 0; align-items: flex-start; }
.pv-manual .ex-captions { min-height: calc(6.8em + var(--s-4)); }
.pv-manual .ex-caption { inset: var(--s-4) var(--s-4) 0; justify-content: flex-start; }
.pv-manual .ex-caption strong { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); }
.pv-manual .ex-caption p { font-size: 1rem; }
.pv-manual .io-svg { max-height: none; }
.pv-manual .ex-svg { max-height: 62svh; }
.pv-manual .ex-labels { font-size: 26px; }
@media (min-width: 900px) {
  /* Tablet in orizzontale: testo, didascalia e cursore a sinistra, esploso a destra */
  .pv-manual .ex-grid { grid-template-columns: 0.9fr 1.5fr; column-gap: var(--s-7); row-gap: 0; align-items: center; }
  .pv-manual .ex-text { display: grid; grid-template-rows: none; gap: var(--s-4); align-content: end; grid-column: 1; grid-row: 1; }
  .pv-manual .ex-captions { margin-bottom: 0; }
  .pv-manual .ex-grid > .pv-scene-ctl { grid-column: 1; grid-row: 2; align-self: start; }
  .pv-manual .ex-grid > .ex-stage { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .pv-manual .ex-captions { min-height: calc(7.5em + var(--s-4)); }
  .pv-manual .ex-svg { max-height: none; }
}

/* ---------- Modalità presentazione ---------- */
.is-presenting .io-pin, .is-presenting .ex-pin { padding-top: 0; padding-bottom: 0; }

/* ---------- Versione statica ---------- */
.pv-static .io-caption { position: static; opacity: 1; display: block; }
.pv-static .ex-layer { opacity: 1 !important; }
.pv-static .hm-badge { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .io-svg .snow, .io-svg .gust, .io-svg .tree-top, .io-svg .rain, .io-svg .drop, .io-svg .car, .io-svg .wv, .io-svg .wi, .io-svg .ws,
  .io-svg .dr-left, .io-svg .dr-right, .io-svg .dr-bottom, .io-svg .bn-l, .io-svg .bn-b, .io-svg .sun-rays { animation: none; }
  .hm-flip-inner { transition: none; }
  .hm-window { filter: none; }
}

@media print {
  .io-pin, .ex-pin { height: auto; }
  .hm-flip-back { position: static; transform: none; }
}