/* Inmunología: illustrated, accessible qualitative laboratories. */
#sinapsis-main .snp-category-group + .snp-category-group{margin-top:42px}
#sinapsis-main .snp-immunology{--phg-mint:#8aebd5;border:1px solid #355768;border-radius:26px;background:linear-gradient(145deg,#122e40,#0d1b2d 65%);padding:22px;color:#eaf5f7;box-shadow:0 20px 55px #020c1633;max-width:100%}
#sinapsis-main .phg-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
#sinapsis-main .phg-tabs button,#sinapsis-main .phg-footer button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid #355c6c;background:#142e41;color:#dcecf0;border-radius:12px;padding:11px 14px;min-height:44px;font:inherit;font-size:14px;line-height:1.35;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s}
#sinapsis-main .phg-tabs button:hover{background:#1c4153;border-color:#71b9b5}
#sinapsis-main .phg-tabs button[aria-pressed=true]{background:linear-gradient(120deg,#8bead5,#53c7c0);border-color:#9ff5df;color:#072d34;font-weight:750;box-shadow:0 4px 18px #50c9b51f}
#sinapsis-main .phg-tab-dot{flex:none;width:6px;height:6px;border-radius:50%;border:1px solid #8db2bf}
#sinapsis-main .is-seen .phg-tab-dot{background:#8bead5;border-color:#8bead5}
#sinapsis-main [aria-pressed=true] .phg-tab-dot{background:#124d55;border-color:#124d55}
#sinapsis-main .phg-tabs button:focus-visible,#sinapsis-main .phg-footer button:focus-visible{outline:3px solid #ffe1a3;outline-offset:3px}
#sinapsis-main .phg-stage{border:1px solid #29495b;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 45% 35%,#214b5b66,transparent 74%),#0c2233}
#sinapsis-main .phg-scene-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px 0;font-size:12px;line-height:1.4;letter-spacing:.09em;text-transform:uppercase;color:#b4d3da}
#sinapsis-main .phg-scene-heading>span:last-child{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#89daca;flex:none}
#sinapsis-main .phg-scene{max-width:790px;margin:auto;overflow:hidden}
#sinapsis-main .phg-illustration{display:block;width:100%;height:auto;max-height:360px;overflow:hidden}
#sinapsis-main .phg-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 18px;padding:8px 16px 17px;border-top:1px solid #37566355;font-size:13px;line-height:1.4;color:#cbdfe4}
#sinapsis-main .phg-legend>span{display:inline-flex;align-items:center;gap:7px}
#sinapsis-main .phg-legend i{display:inline-block;flex:none;width:8px;height:8px;border-radius:3px;background:#74dcc8;box-shadow:0 0 8px #74dcc81f}
#sinapsis-main .phg-legend .phg-key-1{background:#b49de2}#sinapsis-main .phg-legend .phg-key-2{background:#efbc7b}#sinapsis-main .phg-legend .phg-key-3{background:#cebcf1}
#sinapsis-main .phg-caption{position:relative;padding:20px 22px;margin-top:17px;border:1px solid #365563;border-left:3px solid #81dfc8;border-radius:16px;background:#102536}
#sinapsis-main .phg-caption-kicker{display:block;font-size:10px;letter-spacing:.16em;font-weight:700;color:#94b9c1;margin-bottom:7px}
#sinapsis-main .phg-caption strong{display:block;font-size:22px;line-height:1.3;letter-spacing:-.02em;color:#a6efdb}
#sinapsis-main .phg-caption p{margin:9px 0 0;font-size:17px;line-height:1.65;color:#d9e7eb}
#sinapsis-main .phg-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-top:17px;color:#bfd7de;font-size:13px;line-height:1.5}
#sinapsis-main .phg-footer button{font-size:13px;padding:9px 13px}
#sinapsis-main .phg-qualitative{display:block;font-size:11px;line-height:1.6;color:#98b5c2;margin-top:12px}
#sinapsis-main .phg-pathway{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:22px 16px 15px}
#sinapsis-main .phg-reaction{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;padding:16px 8px 12px;gap:7px;border:1px solid #477d80;border-radius:18px;background:linear-gradient(165deg,#204755aa,#132e43);text-align:center;overflow:hidden}
#sinapsis-main .phg-reaction:after{content:"";position:absolute;inset:auto 0 0;height:3px;background:linear-gradient(90deg,transparent,#8ce6d1,transparent);background-size:70% 100%;background-repeat:no-repeat;animation:phgEnergy 3s linear infinite}
#sinapsis-main .phg-reaction.is-blocked{border-color:#b67784;background:linear-gradient(155deg,#48314388,#241d30)}
#sinapsis-main .phg-reaction.is-blocked:after{background:#d7989b;animation:none}
#sinapsis-main .phg-reaction-number{align-self:flex-start;font-size:11px;letter-spacing:.12em;color:#9bbac6}
#sinapsis-main .phg-reaction svg{display:block;width:100%;height:86px;max-width:145px;margin:-9px 0 -5px}
#sinapsis-main .phg-reaction strong{font-size:25px;font-weight:750;line-height:1.2;color:#e7f8f4}
#sinapsis-main .phg-reaction small{font-size:13px;line-height:1.5;color:#bfdae1;min-height:40px}
#sinapsis-main .phg-reaction-state{display:block;margin-top:auto;font-size:10px;line-height:1.45;color:#99e5d0}
#sinapsis-main .phg-reaction.is-blocked .phg-reaction-state{color:#ffbdb7}
#sinapsis-main .phg-reaction.is-blocked svg{opacity:.6;filter:saturate(.45)}
#sinapsis-main .phg-reaction.is-blocked svg *{animation-play-state:paused!important}
#sinapsis-main .phg-pathway-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;margin:0;padding:4px 16px 20px;font-size:13px;line-height:1.6;color:#b5d3d9;text-align:center}
#sinapsis-main .phg-pathway-note b{font-weight:400;color:#8fe6d3}
/* Motion depicts the selected mechanism; no movement encodes a measured value. */
#sinapsis-main .phg-scene-enter{animation:phgEnter .5s ease-out both}
#sinapsis-main .phg-cell-body{transform-origin:267px 170px;animation:phgBreathe 5s ease-in-out infinite}
#sinapsis-main .phg-drift{animation:phgDrift 3.4s ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
#sinapsis-main .phg-stream{animation:phgStream 2s linear infinite}
#sinapsis-main .phg-float{animation:phgFloat 3.2s ease-in-out infinite}
#sinapsis-main .phg-approach{animation:phgApproach 4s ease-in-out infinite}
#sinapsis-main .phg-capture{animation:phgCapture 3.5s ease-in-out infinite}
#sinapsis-main .phg-engulf{transform-origin:417px 170px;animation:phgEngulf 3.5s ease-in-out infinite}
#sinapsis-main .phg-actin{animation:phgStream 2s linear infinite}
#sinapsis-main .phg-binding,#sinapsis-main .phg-binding-ring{animation:phgBind 2.6s ease-in-out infinite}
#sinapsis-main .phg-delivery{animation:phgDelivery 4.5s ease-in-out infinite;animation-delay:var(--delay,0s)}
#sinapsis-main .phg-fragments{animation:phgFragments 4s ease-in-out infinite}
#sinapsis-main .phg-kill-ring{transform-origin:366px 170px;animation:phgRing 4s linear infinite}
#sinapsis-main .phg-release{animation:phgRelease 4s ease-in-out infinite}
#sinapsis-main .phg-roll{animation:phgRoll 3.5s ease-in-out infinite}
#sinapsis-main .phg-transit{animation:phgTransit 4.5s ease-in-out infinite}
#sinapsis-main .phg-blood-flow{animation:phgBlood 5s linear infinite;animation-delay:var(--delay,0s)}
#sinapsis-main .phg-cell-rest{animation:phgFloat 4s ease-in-out infinite}
#sinapsis-main .phg-pore,#sinapsis-main .phg-cleave,#sinapsis-main .phg-protein-split{animation:phgBind 2.8s ease-in-out infinite}
#sinapsis-main .phg-iron-capture{animation:phgIron 4.2s ease-in-out infinite;animation-delay:var(--delay,0s)}
#sinapsis-main .phg-electron{animation:phgElectron 2.6s ease-in-out infinite}
#sinapsis-main .phg-molecule{transform-origin:60px 45px;animation:phgMolecule 4s ease-in-out infinite}
#sinapsis-main .snp-immunology.is-paused *,#sinapsis-main .snp-immunology.is-reduced *{animation-play-state:paused!important}
@keyframes phgEnter{from{opacity:.15;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes phgBreathe{50%{transform:scale(1.009,.989)}}
@keyframes phgDrift{to{transform:translate(3px,-5px)}}
@keyframes phgStream{to{stroke-dashoffset:-80}}
@keyframes phgFloat{50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes phgApproach{0%,100%{transform:translateX(14px)}60%{transform:translateX(-16px)}}
@keyframes phgCapture{0%,100%{transform:translateX(4px)}55%,75%{transform:translateX(-17px) rotate(-4deg)}}
@keyframes phgEngulf{0%,100%{transform:scaleX(.94)}55%,75%{transform:scaleX(1.05)}}
@keyframes phgBind{0%,100%{opacity:.55}55%{opacity:1}}
@keyframes phgDelivery{0%,15%{transform:translate(0,0);opacity:.9}70%{transform:translate(var(--dx),var(--dy));opacity:.95}85%,100%{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes phgFragments{50%{transform:rotate(7deg) scale(.88)}}
@keyframes phgRing{to{transform:rotate(360deg)}}
@keyframes phgRelease{0%,10%{transform:translateX(-40px);opacity:0}25%{opacity:1}80%{transform:translateX(75px);opacity:.4}100%{transform:translateX(90px);opacity:0}}
@keyframes phgRoll{0%,100%{transform:translateX(-14px) rotate(-8deg)}50%{transform:translateX(18px) rotate(10deg)}}
@keyframes phgTransit{0%,100%{transform:translateY(-18px) scale(.78,1.15)}55%{transform:translateY(20px) scale(.84,1.1)}}
@keyframes phgBlood{0%{transform:translateX(-15px);opacity:.2}50%{opacity:.65}100%{transform:translateX(35px);opacity:.2}}
@keyframes phgIron{0%,15%{transform:translateX(25px)}70%,85%{transform:translateX(-22px)}100%{transform:translateX(25px)}}
@keyframes phgElectron{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{transform:translateX(73px);opacity:1}100%{transform:translateX(73px);opacity:0}}
@keyframes phgMolecule{50%{transform:rotate(-7deg) translateY(-3px)}}
@keyframes phgEnergy{from{background-position:-230% 0}to{background-position:330% 0}}
@media(max-width:650px){
 #sinapsis-main .snp-immunology{padding:12px;border-radius:20px}
 #sinapsis-main .phg-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:12px}
 #sinapsis-main .phg-tabs button{padding:10px 7px;font-size:13px;min-width:0}
 #sinapsis-main .phg-stage{border-radius:15px}
 #sinapsis-main .phg-scene-heading{padding:13px 12px 1px;font-size:10px;letter-spacing:.06em}
 #sinapsis-main .phg-illustration{min-height:205px}
 #sinapsis-main .phg-legend{justify-content:flex-start;gap:8px 13px;padding:10px 12px 13px;font-size:12px}
 #sinapsis-main .phg-caption{padding:16px 15px;margin-top:12px}
 #sinapsis-main .phg-caption strong{font-size:19px}
 #sinapsis-main .phg-caption p{font-size:16px;line-height:1.6}
 #sinapsis-main .phg-footer{gap:10px;font-size:12px;padding-top:13px}
 #sinapsis-main .phg-pathway{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:16px 10px 12px}
 #sinapsis-main .phg-reaction{border-radius:14px;padding:12px 7px 10px}
 #sinapsis-main .phg-reaction strong{font-size:24px}
 #sinapsis-main .phg-reaction small{font-size:12px;min-height:36px}
 #sinapsis-main .phg-pathway-note{font-size:12px;padding:3px 12px 16px;gap:6px}
}
@media(prefers-reduced-motion:reduce){#sinapsis-main .snp-immunology *{animation:none!important;transition:none!important}}
/* A shared ten-step difficulty scale, shown in every route and catalog card. */
#sinapsis-main .snp-difficulty{--level-color:#8ce4cc;display:inline-flex;align-items:center;gap:12px;max-width:100%;min-height:40px;margin:0 0 18px;padding:10px 12px;border:1px solid #375964;border-radius:12px;background:#0c2531cc;color:#bcd5dd;font-size:11px;line-height:1.2;vertical-align:middle}
#sinapsis-main .snp-difficulty[data-band=medium]{--level-color:#8dcaf5}
#sinapsis-main .snp-difficulty[data-band=advanced]{--level-color:#e6bd81}
#sinapsis-main .snp-difficulty-label{display:flex;align-items:center;gap:8px;white-space:nowrap}
#sinapsis-main .snp-difficulty strong{font-size:19px;font-weight:750;color:var(--level-color);letter-spacing:-.03em}
#sinapsis-main .snp-difficulty strong small{font-size:11px;font-weight:500;color:#a0bac8;letter-spacing:0}
#sinapsis-main .snp-difficulty-meter{display:flex;align-items:center;gap:3px}
#sinapsis-main .snp-difficulty-meter i{display:block;width:5px;height:15px;border-radius:2px;background:#294450}
#sinapsis-main .snp-difficulty-meter i.is-lit{background:var(--level-color);box-shadow:0 0 9px color-mix(in srgb,var(--level-color) 15%,transparent)}
#sinapsis-main .snp-difficulty-band{font-size:10px;white-space:nowrap;color:var(--level-color)}
#sinapsis-main .snp-topic-copy .snp-difficulty{margin:5px 0 17px}
@media(max-width:400px){#sinapsis-main .snp-difficulty{gap:8px;padding:9px 10px;font-size:10px}#sinapsis-main .snp-difficulty-meter{gap:2px}#sinapsis-main .snp-difficulty-meter i{width:4px}#sinapsis-main .snp-difficulty-band{font-size:9px}}