/* Ciclo pensamento → emoção → comportamento (seção TCC). Tudo com prefixo cy- para não afetar o resto do site. */
.cyc{max-width:760px;margin:10px auto 0;padding:6px 0 4px}
.cy-hide{position:absolute;width:0;height:0;overflow:hidden}
.cy-line{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:start;justify-items:center}
.cy-n{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0}
.cy-n b{font:700 .74rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--deep);text-align:center}
.cy-ic{width:96px;height:96px;display:grid;place-items:center;background:#f6efe9;border-radius:50%;color:var(--terra);border:0;padding:0}
.cy-ic>svg{width:48px;height:48px;display:block}
.cy-brain{perspective:300px}.cy-brain>svg{animation:cy-spin 7s linear infinite;transform-style:preserve-3d}
.cy-heart{cursor:pointer;color:#c4574a;transition:color .35s,transform .2s}
.cy-heart>svg{width:58px;height:58px;animation:cy-beat 1.5s ease-in-out infinite}
.cy-heart:hover{transform:scale(1.05)}
.cy-heart:focus-visible{outline:2px solid var(--terra);outline-offset:4px}
.cyc[data-e="0"] .cy-heart{color:#c99a2e}.cyc[data-e="1"] .cy-heart{color:#6f86a6}.cyc[data-e="2"] .cy-heart{color:#5b86c9}.cyc[data-e="3"] .cy-heart{color:#d2493f}.cyc[data-e="4"] .cy-heart{color:#e08a3c}.cyc[data-e="5"] .cy-heart{color:#c4574a}
@keyframes cy-spin{to{transform:rotateY(360deg)}}
@keyframes cy-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.16)}28%{transform:scale(1)}42%{transform:scale(1.1)}60%{transform:scale(1)}}
.cy-flow{width:clamp(34px,9vw,80px);height:6px;margin-top:45px;background:radial-gradient(circle,var(--nude) 2.2px,transparent 2.7px) 0 50%/12px 6px repeat-x;animation:cy-flow 1s linear infinite}
@keyframes cy-flow{to{background-position:12px 50%}}
.cy-hint{text-align:center;font:700 .66rem var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#a08560;margin:14px 0 0;transition:opacity .3s}
.cy-hint.off{opacity:0}
.cy-cap{text-align:center;font:italic 1.2rem var(--serif);color:var(--deep);margin:12px auto 0;max-width:560px;min-height:3.4em}
/* roxinho neutro */
.cy-beh .cy-blob{width:54px;height:62px;display:block;overflow:visible}
.cy-x{display:none}
.cyc[data-e="0"] .cy-happy,.cyc[data-e="1"] .cy-sad,.cyc[data-e="2"] .cy-cry,.cyc[data-e="3"] .cy-angry,.cyc[data-e="4"] .cy-wow,.cyc[data-e="5"] .cy-calm{display:inline}
.cy-bd{transform-box:fill-box;transform-origin:50% 100%}
.cy-arm{transform-box:fill-box;transform-origin:50% 10%;transition:transform .3s}
.cy-tears path{animation:cy-tear 1.1s ease-in infinite;opacity:0}.cy-tears .cy-t2{animation-delay:.5s}
.cy-steam circle{animation:cy-steam 1.2s ease-out infinite;opacity:0}.cy-steam .cy-s2{animation-delay:.5s}
.cy-bang{animation:cy-pop .5s ease-out both}
@keyframes cy-tear{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@keyframes cy-steam{0%{opacity:0;transform:translateY(6px) scale(.6)}40%{opacity:.9}100%{opacity:0;transform:translateY(-12px) scale(1.4)}}
@keyframes cy-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
.cyc[data-e="0"] .cy-bd{animation:cy-hop .7s ease-in-out infinite}.cyc[data-e="0"] .cy-l{transform:rotate(-70deg)}.cyc[data-e="0"] .cy-r{transform:rotate(70deg)}
.cyc[data-e="1"] .cy-bd{animation:cy-droop 3s ease-in-out infinite}.cyc[data-e="1"] .cy-l{transform:rotate(8deg)}.cyc[data-e="1"] .cy-r{transform:rotate(-8deg)}
.cyc[data-e="2"] .cy-bd{animation:cy-cry .3s linear infinite}.cyc[data-e="2"] .cy-l{transform:rotate(-35deg) translateY(-8px)}.cyc[data-e="2"] .cy-r{transform:rotate(35deg) translateY(-8px)}
.cyc[data-e="3"] .cy-bd{animation:cy-shake .12s linear infinite}.cyc[data-e="3"] .cy-l{transform:rotate(-30deg)}.cyc[data-e="3"] .cy-r{transform:rotate(30deg)}
.cyc[data-e="4"] .cy-bd{animation:cy-scare 1.6s ease-out infinite}.cyc[data-e="4"] .cy-l{transform:rotate(-100deg)}.cyc[data-e="4"] .cy-r{transform:rotate(100deg)}
.cyc[data-e="5"] .cy-bd{animation:cy-breath 3s ease-in-out infinite}
@keyframes cy-hop{0%,100%{transform:translateY(0) scale(1.02,.97)}45%{transform:translateY(-12px) scale(.97,1.03)}}
@keyframes cy-droop{0%,100%{transform:scaleY(.93) rotate(-2deg)}50%{transform:scaleY(.9) rotate(2deg)}}
@keyframes cy-cry{0%,100%{transform:scaleY(.93) translateX(-1.5px)}50%{transform:scaleY(.93) translateX(1.5px)}}
@keyframes cy-shake{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
@keyframes cy-scare{0%,45%,100%{transform:translate(0,0) rotate(0)}8%{transform:translate(-8px,-12px) rotate(-8deg)}25%{transform:translate(-5px,0) rotate(-3deg)}}
@keyframes cy-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@media (max-width:560px){
  .cy-ic{width:72px;height:72px}.cy-ic>svg{width:36px;height:36px}.cy-heart>svg{width:44px;height:44px}
  .cy-beh .cy-blob{width:42px;height:48px}
  .cy-n b{font-size:.6rem;letter-spacing:.06em}
  .cy-flow{margin-top:33px;width:clamp(18px,7vw,34px)}
  .cy-cap{font-size:1.05rem;min-height:4.6em}
}
@media (prefers-reduced-motion:reduce){.cy-brain>svg,.cy-heart>svg,.cy-flow,.cy-bd,.cy-tears path,.cy-steam circle{animation:none!important}}
.cy-beh .cy-blob{width:64px;height:74px}
@media (max-width:560px){.cy-beh .cy-blob{width:46px;height:53px}}
.cy-hint{display:none}

/* personagem Sofia (substitui o bichinho) */
.cy-beh .sf{width:80px;height:auto;display:block;overflow:visible}
.cyc .sf-f{display:none}
.sf-bd,.sf-arm,.sf-ear{transform-box:fill-box}
.sf-bd{transform-origin:50% 100%}.sf-arm{transform-origin:50% 8%;transition:transform .35s}.sf-ear{transform-origin:50% 100%;transition:transform .35s}
.sf-sh{transform-box:fill-box;transform-origin:center}
.sf-f{display:none}
.cyc[data-e="0"] .sf-f0,.cyc[data-e="1"] .sf-f1,.cyc[data-e="2"] .sf-f2,.cyc[data-e="3"] .sf-f3,.cyc[data-e="4"] .sf-f4,.cyc[data-e="5"] .sf-f5{display:inline}
.sf-tear path{animation:sf-tear 1.1s ease-in infinite;opacity:0;transform-box:fill-box}.sf-tear .sf-t2 path{animation-delay:.5s}
.sf-steam circle{animation:sf-steam 1.2s ease-out infinite;opacity:0}.sf-steam .sf-s2{animation-delay:.5s}
.sf-bang{animation:sf-pop .5s ease-out both;transform-box:fill-box;transform-origin:50% 100%}
.sf-cheek{transition:fill .3s}
.cyc[data-e="3"] .sf-cheek{fill:#e8665a}
.sf-blink{animation:sf-blink 4s infinite;transform-box:fill-box;transform-origin:center}
@keyframes sf-blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes sf-tear{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(22px)}}
@keyframes sf-steam{0%{opacity:0;transform:translateY(8px) scale(.6)}40%{opacity:.85}100%{opacity:0;transform:translateY(-16px) scale(1.5)}}
@keyframes sf-pop{0%{transform:scale(0)}100%{transform:scale(1)}}
/* 0 alegria */
.cyc[data-e="0"] .sf-bd{animation:sf-hop .7s ease-in-out infinite}
.cyc[data-e="0"] .sf-sh{animation:sf-shadow .7s ease-in-out infinite}
.cyc[data-e="0"] .sf-arm.sf-l{transform:rotate(145deg)}.cyc[data-e="0"] .sf-arm.sf-r{transform:rotate(-145deg)}
.cyc[data-e="0"] .sf-ear.sf-l{animation:sf-wigl .5s ease-in-out infinite}.cyc[data-e="0"] .sf-ear.sf-r{animation:sf-wigr .5s ease-in-out infinite}
/* 1 tristeza */
.cyc[data-e="1"] .sf-bd{animation:sf-droop 3s ease-in-out infinite}
.cyc[data-e="1"] .sf-arm.sf-l{transform:rotate(4deg)}.cyc[data-e="1"] .sf-arm.sf-r{transform:rotate(-4deg)}
.cyc[data-e="1"] .sf-ear.sf-l{transform:rotate(-20deg)}.cyc[data-e="1"] .sf-ear.sf-r{transform:rotate(20deg)}
/* 2 choro */
.cyc[data-e="2"] .sf-bd{animation:sf-cry .3s linear infinite}
.cyc[data-e="2"] .sf-arm.sf-l{transform:rotate(-50deg) translateY(-14px)}.cyc[data-e="2"] .sf-arm.sf-r{transform:rotate(50deg) translateY(-14px)}
.cyc[data-e="2"] .sf-ear.sf-l{transform:rotate(-22deg)}.cyc[data-e="2"] .sf-ear.sf-r{transform:rotate(22deg)}
/* 3 raiva */
.cyc[data-e="3"] .sf-bd{animation:sf-shake .12s linear infinite}
.cyc[data-e="3"] .sf-arm.sf-l{transform:rotate(28deg)}.cyc[data-e="3"] .sf-arm.sf-r{transform:rotate(-28deg)}
.cyc[data-e="3"] .sf-ear.sf-l{transform:rotate(-12deg) scaleY(.9)}.cyc[data-e="3"] .sf-ear.sf-r{transform:rotate(12deg) scaleY(.9)}
/* 4 surpresa */
.cyc[data-e="4"] .sf-bd{animation:sf-scare 1.6s ease-out infinite}
.cyc[data-e="4"] .sf-arm.sf-l{transform:rotate(80deg)}.cyc[data-e="4"] .sf-arm.sf-r{transform:rotate(-80deg)}
.cyc[data-e="4"] .sf-ear.sf-l,.cyc[data-e="4"] .sf-ear.sf-r{transform:scaleY(1.12)}
/* 5 calma */
.cyc[data-e="5"] .sf-bd{animation:sf-breath 3s ease-in-out infinite}
.cyc[data-e="5"] .sf-arm.sf-l{transform:rotate(10deg)}.cyc[data-e="5"] .sf-arm.sf-r{transform:rotate(-10deg)}
@keyframes sf-hop{0%,100%{transform:translateY(0) scale(1.03,.96)}45%{transform:translateY(-16px) scale(.97,1.04)}}
@keyframes sf-shadow{0%,100%{transform:scale(1);opacity:.14}45%{transform:scale(.75);opacity:.08}}
@keyframes sf-wigl{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes sf-wigr{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-6deg)}}
@keyframes sf-droop{0%,100%{transform:scaleY(.94) rotate(-2deg)}50%{transform:scaleY(.91) rotate(2deg)}}
@keyframes sf-cry{0%,100%{transform:scaleY(.94) translateX(-1.5px)}50%{transform:scaleY(.94) translateX(1.5px)}}
@keyframes sf-shake{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
@keyframes sf-scare{0%,45%,100%{transform:translate(0,0) rotate(0)}8%{transform:translate(-8px,-14px) rotate(-7deg)}25%{transform:translate(-4px,0) rotate(-3deg)}}
@keyframes sf-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.sf-bd,.sf-sh,.sf-ear,.sf-tear path,.sf-steam circle,.sf-blink{animation:none!important}}

@media (max-width:560px){.cy-beh .sf{width:60px}.cy-flow{margin-bottom:54px}}