/* Menu animado de imunologia (animacoes/abertura.html) */
.imv { --tint: var(--c-imuno); position: relative; overflow: hidden; isolation: isolate; color: var(--dark-ink); background: radial-gradient(900px 500px at 15% 0%, rgba(239,111,99,.28), transparent 60%), radial-gradient(700px 500px at 90% 100%, rgba(20,184,166,.22), transparent 60%), linear-gradient(180deg, #16131c, #100e14); min-height: calc(100svh - var(--nav-h)); padding: clamp(28px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); }
.imv__cells { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.imv__cells i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.35), var(--c, rgba(239,111,99,.6)) 55%, transparent 72%); filter: blur(1px); opacity: .55; animation: imvDrift var(--d, 20s) ease-in-out infinite alternate; }
@keyframes imvDrift { from { transform: translate3d(0,0,0) rotate(0) scale(1); } to { transform: translate3d(var(--x, 40px), var(--y, -60px), 0) rotate(20deg) scale(1.12); } }
.imv__cells i:nth-child(1) { width: 120px; height: 120px; left: -30px; top: 12%; --c: rgba(239,111,99,.5); --d: 24s; --x: 60px; --y: 40px; }
.imv__cells i:nth-child(2) { width: 70px; height: 70px; left: 22%; top: 78%; --c: rgba(139,92,246,.5); --d: 19s; --x: -40px; --y: -70px; }
.imv__cells i:nth-child(3) { width: 160px; height: 160px; left: 60%; top: -8%; --c: rgba(20,184,166,.45); --d: 27s; --x: -70px; --y: 50px; opacity: .4; }
.imv__cells i:nth-child(4) { width: 46px; height: 46px; left: 84%; top: 55%; --c: rgba(245,158,11,.55); --d: 16s; --x: -50px; --y: -40px; }
.imv__cells i:nth-child(5) { width: 90px; height: 90px; left: 45%; top: 88%; --c: rgba(239,111,99,.5); --d: 22s; --x: 50px; --y: -60px; }
.imv__cells i:nth-child(6) { width: 32px; height: 32px; left: 8%; top: 60%; --c: rgba(255,255,255,.5); --d: 14s; --x: 30px; --y: -50px; }
.imv__inner { position: relative; z-index: 1; }
.imv__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4em 1rem; margin-bottom: .5rem; }
.imv__title h1 { color: #fff; margin: 0; font-size: clamp(2rem, 4.6vw, 3.4rem); }
.imv__title em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: #ffd166; font-size: clamp(1.4rem, 3.2vw, 2.4rem); animation: imvWink 3.2s ease-in-out infinite; }
@keyframes imvWink { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-4deg); } 94% { transform: rotate(3deg); } }
.imv__intro { color: var(--dark-muted); max-width: 64ch; font-size: 1.02rem; }
.imv__grid { display: grid; gap: clamp(18px, 3vw, 36px); grid-template-columns: 1fr; margin-top: clamp(20px, 3vw, 36px); }
@media (min-width: 960px) { .imv__grid { grid-template-columns: 1.25fr .85fr; align-items: start; } }
.imv__preview { position: relative; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid rgba(255,255,255,.1); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
.imv__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .45s ease, transform .6s ease; transform: scale(1.03); }
.imv__preview img.is-on { opacity: 1; transform: none; }
.imv__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(14px, 2.4vw, 24px); background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); color: #fff; }
.imv__caption small { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #ffb1a8; margin-bottom: .3rem; }
.imv__caption h2 { color: #fff; font-size: clamp(1.2rem, 2.4vw, 1.7rem); margin: 0 0 .3rem; }
.imv__caption p { color: rgba(255,255,255,.82); font-size: .93rem; margin: 0 0 .8rem; max-width: 60ch; }
.imv__menu { display: grid; gap: .9rem; }
.imv__group { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: .6rem; }
.imv__group h3 { font-family: var(--font-body); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #ffb1a8; margin: .4rem .6rem .5rem; }
.imv__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.imv__item { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 10px; color: rgba(244,241,234,.88); text-decoration: none; font-size: .95rem; font-weight: 500; position: relative; transition: background .2s, transform .2s, color .2s; }
.imv__item .n { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: rgba(255,255,255,.08); color: #ffb1a8; font-family: var(--font-display); }
.imv__item .tag { margin-left: auto; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dark-muted); white-space: nowrap; }
.imv__item:hover, .imv__item:focus-visible, .imv__item.is-active { background: rgba(239,111,99,.16); color: #fff; transform: translateX(4px); text-decoration: none; outline: none; }
.imv__item.is-active .n { background: var(--brand); color: #fff; }
.imv__item::after { content: "→"; opacity: 0; margin-left: .3rem; transition: opacity .2s; }
.imv__item:hover::after, .imv__item.is-active::after { opacity: .8; }
.imv__bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; color: var(--dark-muted); font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .imv__cells i, .imv__title em { animation: none; } .imv__preview img { transition: none; } }