.demo{border-radius:var(--radio);box-shadow:var(--sombra);--baby-skin:#c99a78;background:#fff;margin:16px 0;padding:16px}.demo-tabs{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.demo .tab{font:inherit;border:2px solid var(--lila);background:var(--crema);cursor:pointer;color:var(--texto);border-radius:999px;padding:8px 14px;font-weight:700}.demo .tab[aria-pressed=true]{background:var(--menta);border-color:var(--menta-fuerte)}.demo[data-mode=mal] .tab[aria-pressed=true]{background:var(--durazno);border-color:var(--durazno-fuerte)}.demo-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start;gap:16px;display:grid}.postura{text-align:center}.postura .mom{width:190px}.chips{gap:6px;margin:8px 0 0;padding:0;list-style:none;display:grid}.chips li{background:var(--lila);opacity:0;border-radius:999px;padding:6px 12px;font-size:.9rem;animation:.5s forwards chipin}.chips li:nth-child(2){animation-delay:.5s}.chips li:nth-child(3){animation-delay:1s}@keyframes chipin{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.demo .stage{background:var(--durazno);border-radius:28px;width:280px;height:280px;margin:0 auto;position:relative;overflow:hidden}.demo .stage>*{position:absolute}.breast{background:radial-gradient(circle at 35% 30%,#f3d0b7,#d9a385 65%,#c68d72);border-radius:50%;width:220px;height:220px;top:20px;left:30px;box-shadow:inset -10px -14px 24px #783c2840,0 6px 14px #783c282e}.areola{background:radial-gradient(circle at 40% 35%,#c98a74,#a8624f);border-radius:50%;width:110px;height:110px;top:75px;left:85px;box-shadow:inset 0 -4px 8px #501e144d}.nipple{background:radial-gradient(circle at 40% 35%,#b4705c,#8f4c3b);border-radius:50%;width:26px;height:26px;transition:transform .6s;top:117px;left:127px}.mouthgroup{width:280px;height:280px;transition:transform 1s;top:0;left:0}.mouthgroup>*{transition:all .9s;position:absolute}.lips{background:0 0;border:12px solid #e8798f;border-bottom-width:18px;border-radius:50%;box-shadow:0 3px 8px #781e3c40}.chin{background:radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--baby-skin) 85%, #fff), var(--baby-skin));border-radius:45px 45px 50% 50%;box-shadow:inset 0 -6px 10px #0000001f}.cheek{background:radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--baby-skin) 85%, #fff), var(--baby-skin));border-radius:50%;width:50px;height:50px;box-shadow:inset 0 -5px 8px #0000001f}.demo[data-mode=ok] .lips{width:132px;height:76px;top:112px;left:74px}.demo[data-mode=ok] .chin{width:90px;height:70px;top:190px;left:95px}.demo[data-mode=ok] .cheek-l{top:122px;left:40px}.demo[data-mode=ok] .cheek-r{top:122px;left:190px}.demo[data-mode=ok][data-step="0"] .mouthgroup{transform:translateY(150px)scale(.9)}.demo[data-mode=ok][data-step="0"] .lips{border-width:8px;height:28px}.demo[data-mode=ok][data-step="1"] .mouthgroup{transform:translateY(95px)}.demo[data-mode=ok][data-step="2"] .mouthgroup,.demo[data-mode=ok][data-step="3"] .mouthgroup,.demo[data-mode=ok][data-step="4"] .mouthgroup{transform:none}.demo[data-mode=ok][data-step="4"] .lips{animation:1s ease-in-out infinite suck}.demo[data-mode=ok] .nipple{transform:translateY(6px)scale(.8)}.demo[data-mode=mal] .lips{border:4px solid #a8475d;width:64px;height:34px;top:113px;left:108px}.demo[data-mode=mal] .chin{width:90px;height:70px;top:262px;left:95px}.demo[data-mode=mal] .cheek{opacity:0}.demo[data-mode=mal] .nipple{transform:scaleX(1.5)scaleY(.7)rotate(-10deg)}.demo[data-mode=mal][data-step="2"] .ouch{opacity:1;animation:.5s infinite shake}.dot{color:#fff;opacity:0;background:#4a3f45;border-radius:50%;place-items:center;width:22px;height:22px;font-size:.8rem;font-weight:800;transition:opacity .5s;display:grid}.d1{top:78px;left:130px}.d2{top:176px;left:130px}.d3{top:222px;left:129px}.d4{top:136px;left:46px}.demo[data-mode=ok][data-step="3"] .dot,.demo[data-mode=ok][data-step="4"] .dot{opacity:.92}.ouch{opacity:0;font-size:2rem;top:10px;right:12px}.demo-baby{width:54px;top:8px;left:8px}.heart{opacity:0;width:34px;top:10px;right:12px}.demo[data-mode=ok][data-step="4"] .heart{opacity:1;animation:1.2s ease-in-out infinite pop}.caption{text-align:center;min-height:3.2em;margin:12px 4px 4px;font-weight:700}.legend{color:var(--texto-suave);gap:4px;padding-left:0;font-size:.88rem;list-style:none;display:grid}.legend b{color:#fff;background:#4a3f45;border-radius:50%;place-items:center;width:18px;height:18px;margin-right:6px;font-size:.72rem;display:inline-grid}.demo[data-mode=mal] .legend,.demo:not([data-step="3"]):not([data-step="4"]) .legend{display:none}.controls{justify-content:center;align-items:center;gap:8px;display:flex}.controls button{font:inherit;background:var(--lila);cursor:pointer;border:0;border-radius:50%;width:36px;height:36px}.steps{gap:6px;margin-left:8px;display:inline-flex}.steps i{background:var(--lila);border-radius:50%;width:9px;height:9px}.steps i.on{background:var(--durazno-fuerte)}.demo-nota{color:var(--texto-suave);text-align:center;margin:10px 0 0;font-size:.8rem}@keyframes suck{0%,to{transform:scale(1)}50%{transform:scale(1.04,.94)}}@keyframes shake{0%,to{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}@keyframes pop{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@media (prefers-reduced-motion:reduce){.demo *{transition:none!important;animation:none!important}}