@charset "UTF-8";

/* ============================================================
   AE24 ANATOMY HERO  (ae24-anatomy-hero widget) — v2.0.0
   The appliance is the "map", parts are the "dots", a glass card
   is the "overlay". Desktop = floating card; mobile = swipe carousel.
   Clean flat cutaways · bilingual · no drop shadow · 770×371 slot.
   ============================================================ */
.ae24-an{
  --an-green:#3d8a2e; --an-green-dk:#2a6320; --an-green-lt:#66B94A;
  --an-sage:#a8b8a3; --an-soft:#f3f9ef; --an-ink:#16181a; --an-muted:#6b7066;
  --an-line:#e6e9e0; --an-r:18px; --an-band:linear-gradient(160deg,#f2f7ef,#e2efdb);

  position:relative; width:100%; min-height:371px; border-radius:var(--an-r); overflow:hidden;
  border:0; box-shadow:inset 0 0 0 1px var(--an-line);
  background:radial-gradient(130% 130% at 78% 30%,#fff,#eef3ec 70%,#e6efe3);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--an-ink); line-height:1.5; box-sizing:border-box;
}
/* defensive: keep theme / Elementor CSS from bleeding in */
.ae24-an *,.ae24-an *::before,.ae24-an *::after{box-sizing:border-box}
.ae24-an h1,.ae24-an h2,.ae24-an h3,.ae24-an h4,.ae24-an p{margin:0;padding:0}
.ae24-an a{text-decoration:none}
.ae24-an a:hover,.ae24-an a:focus{text-decoration:none}
.ae24-an svg{max-width:none;display:block}
.ae24-an button{font-family:inherit}

/* grid wash (toggle via .has-grid) */
.ae24-an__gl{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:0;
  background-image:linear-gradient(rgba(61,138,46,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(61,138,46,.06) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(100% 100% at 60% 50%,#000 58%,transparent);mask-image:radial-gradient(100% 100% at 60% 50%,#000 58%,transparent)}
.ae24-an.has-grid .ae24-an__gl{opacity:1}

/* brand wordmark — desktop watermark, bottom-left */
.ae24-an__word{position:absolute;left:20px;bottom:-14px;z-index:0;pointer-events:none;
  font-weight:800;letter-spacing:-.05em;line-height:.8;color:rgba(22,24,26,.06);
  font-size:120px;white-space:nowrap;opacity:0;transition:opacity .25s}
.ae24-an.has-word .ae24-an__word{opacity:1}

.ae24-an__stage{position:relative;z-index:1;min-height:371px}

/* the appliance "map" — NO drop shadow */
.ae24-an__machine{position:absolute;right:24px;top:50%;transform:translateY(-50%);height:312px;
  display:flex;align-items:center;justify-content:center}
.ae24-an__machine svg{height:312px;width:auto;position:relative;z-index:1}
/* mobile-only wordmark behind the appliance */
.ae24-an__word-m{display:none}

/* hotspots = the "dots" */
.ae24-an .an-hot{cursor:pointer}
.ae24-an .an-hot .halo{fill:var(--an-green);opacity:.16;transform-box:fill-box;transform-origin:center;animation:an-pulse 2.8s ease-out infinite}
.ae24-an .an-hot .dot{fill:var(--an-green);stroke:#fff;stroke-width:2}
.ae24-an .an-hot .n{fill:#fff;font-family:'Manrope',system-ui,sans-serif;font-size:11px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.ae24-an .an-hot.on .dot{fill:var(--an-green-dk)}
.ae24-an .an-hot.on .halo{opacity:.4}
.ae24-an .an-hot:focus{outline:none}
.ae24-an .an-hot:focus-visible .dot{stroke:var(--an-green-dk);stroke-width:3}
@keyframes an-pulse{0%{transform:scale(.6);opacity:.4}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}

/* floating glass overlay = the "card" (desktop) */
.ae24-an__card{position:absolute;left:24px;top:24px;width:286px;max-width:calc(100% - 48px);z-index:2;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid var(--an-line);border-radius:14px;padding:15px 17px;box-shadow:0 16px 36px -22px rgba(22,24,26,.32)}
.ae24-an__eye{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-family:'Manrope',system-ui,sans-serif;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--an-green)}
.ae24-an__eye b{color:var(--an-ink)}
.ae24-an__nm{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:8px 0 3px;color:var(--an-ink)}
.ae24-an__sym{font-size:12.5px;color:#56554c;line-height:1.42;min-height:34px}
.ae24-an__row{display:flex;align-items:center;gap:9px;margin-top:10px}
.ae24-an__price{font-size:21px;font-weight:700;color:var(--an-green);letter-spacing:-.02em;white-space:nowrap}
.ae24-an__pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--an-green);background:var(--an-soft);border:1px solid rgba(102,185,74,.25);border-radius:999px;padding:4px 10px;white-space:nowrap}
.ae24-an__pill .pd{width:7px;height:7px;border-radius:50%;background:var(--an-green-lt)}

/* CTA — optional (only present when .has-cta) */
.ae24-an__cta{margin-top:13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--an-ink);color:#fff;font-weight:700;font-size:13px;padding:11px 15px;border-radius:9px;transition:background .2s}
.ae24-an__cta:hover{background:var(--an-green);color:#fff}
.ae24-an__cta svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.4}

.ae24-an__hint{position:absolute;left:24px;bottom:16px;z-index:1;font-size:11px;color:var(--an-muted)}

/* mobile stepper + carousel — hidden on desktop */
.ae24-an__step{display:none}
.ae24-an__track{display:none}
.ae24-an__mhint{display:none}

/* ─────────────────────────── MOBILE ─────────────────────────── */
@media (max-width:520px){
  .ae24-an{min-height:0}
  .ae24-an__word,.ae24-an__hint{display:none}
  /* keep position:relative (NOT static) so the stage stays above the grid
     overlay (.ae24-an__gl is z-index:0) — otherwise the grid paints over the
     stepper / nav buttons / cards and they look washed-out / semi-transparent. */
  .ae24-an__stage{position:relative;z-index:1;min-height:0;display:flex;flex-direction:column;padding:0}

  /* machine = a rounded green panel that floats with margin (not a full-bleed
     band). Reset right/top/left from the desktop absolute rule so it centres. */
  .ae24-an__machine{position:relative;order:1;left:auto;right:auto;top:auto;transform:none;
    height:auto;background:var(--an-band);padding:18px 0 14px;margin:14px 14px 0;
    border-radius:14px;overflow:hidden}
  .ae24-an__machine svg{height:clamp(206px,56vw,272px);margin:0 auto}
  .ae24-an__word-m{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;
    font-weight:800;letter-spacing:-.05em;line-height:.8;color:rgba(22,24,26,.06);
    font-size:clamp(74px,23vw,120px);white-space:nowrap;pointer-events:none;opacity:0}
  .ae24-an.has-word .ae24-an__word-m{opacity:1}
  /* per-breakpoint hide is handled by the Elementor responsive "Nascondi
     wordmark" control, which emits display:none on .ae24-an__word(-m). */
  .ae24-an .an-hot .dot{r:12px}.ae24-an .an-hot .halo{r:18px}

  .ae24-an__card{display:none}

  /* stepper bar (Tour guidato): prev · counter+progress · next */
  .ae24-an__step{display:flex;order:2;position:relative;z-index:1;align-items:center;gap:10px;padding:12px 14px 4px}
  .ae24-an__nav{width:44px;height:44px;flex:0 0 auto;border:1px solid var(--an-line);background:#fff;border-radius:12px;
    display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:1;box-shadow:none;-webkit-appearance:none;appearance:none;transition:background .15s,border-color .15s}
  /* kill the theme's button focus/active box-shadow (it lingered after a tap) */
  .ae24-an__nav:hover,.ae24-an__nav:focus,.ae24-an__nav:active{box-shadow:none;outline:none}
  .ae24-an__nav:active{background:var(--an-soft)}
  .ae24-an__nav:focus-visible{outline:2px solid var(--an-green);outline-offset:2px}
  .ae24-an__nav[disabled]{background:#f6f8f4;border-color:var(--an-line);cursor:default}
  /* flex:none stops the SVG main-axis (width) collapsing to 0 inside the
     display:flex button — that's why the arrows first looked missing.
     EXPLICIT stroke (not currentColor) so toggling the button's disabled
     state never forces a currentColor repaint that drops the icon. */
  .ae24-an__nav svg{width:18px;height:18px;flex:0 0 auto;display:block;stroke:var(--an-ink);fill:none}
  .ae24-an__nav[disabled] svg{stroke:#c2ccbd}
  .ae24-an__stepmeta{flex:1;min-width:0;text-align:center}
  .ae24-an__counter{font-family:'Manrope',system-ui,sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--an-green);text-transform:uppercase}
  .ae24-an__counter b{color:var(--an-ink)}
  .ae24-an__prog{height:4px;border-radius:99px;background:#e3eadf;margin-top:7px;overflow:hidden}
  .ae24-an__prog i{display:block;height:100%;width:0;background:var(--an-green);border-radius:99px;transition:width .3s}

  /* swipe track (kept — you can swipe OR use the arrows) */
  .ae24-an__track{display:flex;order:3;position:relative;z-index:1;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ae24-an__track::-webkit-scrollbar{display:none}
  .ae24-an__slide{flex:0 0 100%;scroll-snap-align:center;padding:12px 14px 4px}
  .ae24-an__mcard{background:#fff;border:1px solid var(--an-line);border-radius:14px;padding:14px 15px;opacity:1}
  .ae24-an__mcard .top{display:flex;align-items:center;gap:9px;margin-bottom:8px}
  .ae24-an__mcard .badge{width:24px;height:24px;border-radius:50%;background:var(--an-soft);color:var(--an-green);font-family:'Manrope',system-ui,sans-serif;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .ae24-an__mcard .ic{width:20px;height:20px;flex:0 0 auto;color:var(--an-green)}
  .ae24-an__mcard .mn{font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--an-ink)}
  .ae24-an__mcard .ms{font-size:12.5px;color:#56554c;line-height:1.45;min-height:36px;margin:0 0 11px}
  .ae24-an__mcard .mr{display:flex;align-items:center;gap:9px}
  /* price + pill mirror the desktop styling so they're green/bold/mono */
  .ae24-an__mcard .price{font-family:'Manrope',system-ui,sans-serif;font-size:20px;font-weight:700;color:var(--an-green);letter-spacing:-.02em;white-space:nowrap}
  .ae24-an__mcard .ae24-an__pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--an-green);background:var(--an-soft);border:1px solid rgba(102,185,74,.25);border-radius:999px;padding:4px 10px;white-space:nowrap}
  .ae24-an__mcard .ae24-an__pill .pd{width:7px;height:7px;border-radius:50%;background:var(--an-green-lt)}
  .ae24-an__mcard .ae24-an__cta{margin:12px 0 0;width:100%}

  .ae24-an__mhint{display:block;order:4;position:relative;z-index:1;text-align:center;font-size:10.5px;color:var(--an-muted);padding:6px 0 14px}
}