/* ════════════════════════════════════════════════════════════════════
   AltivusPress — Sonda de Nível (complementa lp.css)
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero: a sonda é alta e fina ───────────────────────────────────── */
.sonda-hero-img{ position:relative; z-index:2; animation:floatY 7s ease-in-out infinite; }
.sonda-cutout{
    display:block; width:auto; height:min(460px, 60vh);
    filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) drop-shadow(0 0 42px rgba(63,224,197,.14));
}

/* ── Diâmetro (passo 1) ────────────────────────────────────────────── */
.diam-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.diam-opt{
    text-align:left; padding:20px; border-radius:14px; cursor:pointer;
    border:1px solid var(--line); background:rgba(255,255,255,.04);
    transition:all .22s; color:var(--text);
}
.diam-opt:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.diam-opt.is-active{
    background:rgba(63,224,197,.1); border-color:var(--teal);
    box-shadow:0 0 0 1px var(--teal) inset, 0 8px 26px rgba(63,224,197,.16);
}
.diam-num{ display:block; font-family:var(--font-d); font-size:26px; font-weight:700; letter-spacing:-.5px; }
.diam-opt.is-active .diam-num{ color:var(--teal); }
.diam-desc{ display:block; font-size:13.5px; color:var(--muted); margin-top:4px; }
.diam-desc b{ color:var(--text); }

/* ── Preview da sonda (imagem única, troca por diâmetro) ───────────── */
.sonda-preview{ min-height:340px; align-items:center; }
.sonda-preview img{ height:330px; width:auto; filter:drop-shadow(0 20px 40px rgba(0,0,0,.5)); transition:opacity .3s; }
.sonda-preview img.swap{ animation:layerSwap .35s ease; }

/* ── Anatomia (foto + callouts, estático) ──────────────────────────── */
.anatomia{ padding:100px clamp(20px,5vw,64px) 60px; }
.anatomia__grid{
    max-width:1040px; margin:46px auto 0;
    display:grid; grid-template-columns:.8fr 1.2fr; gap:40px; align-items:center;
}
.anatomia__foto{ display:flex; justify-content:center; }
.anatomia__foto img{ height:440px; width:auto; filter:drop-shadow(0 24px 48px rgba(0,0,0,.5)); }
.anatomia__callouts{ display:flex; flex-direction:column; gap:14px; }
/* reusa .exp-callout do lp.css, mas aqui sempre visível (sem animação de pin) */
.anatomia .exp-callout{ position:static; opacity:1; transform:none; max-width:none; }

@media (max-width:880px){
    .anatomia__grid{ grid-template-columns:1fr; }
    .anatomia__foto img{ height:340px; }
    .diam-grid{ grid-template-columns:1fr; }
}