.hero .chat-wrap{perspective:1400px}.hero .chat-card{width:min(390px,100%);min-height:680px;border-radius:42px;padding:10px 10px 16px;background:#163e38;border:7px solid #568477;box-shadow:0 35px 80px #001e1b88;transform:rotate(3deg) rotateY(-7deg);position:relative;overflow:hidden;animation:phoneFloat 6s ease-in-out infinite}.hero .chat-card:before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:96px;height:23px;background:#102b28;border-radius:0 0 18px 18px;z-index:4}.hero .chat-card:after{content:'•••';position:absolute;left:30px;bottom:28px;color:#76b9a4;letter-spacing:4px;font-weight:800;animation:typing 2.7s infinite}.hero .chat-top{margin-top:20px;min-height:118px;background:#174e45;border:0;border-radius:28px 28px 6px 6px;padding:22px 17px 16px;color:#effff9;align-items:flex-end}.hero .chat-top b{color:#effff9;font-size:13px}.hero .chat-top small{color:#a8d9c9}.hero .sos-orb{width:58px;height:58px;border-radius:15px;background:#174e45 url('https://educaenpositivo.com/wp-content/uploads/2026/08/Logos-Family-SOS-fondo-oscuro-naranja.png') center/contain no-repeat;font-size:0;border:1px solid #77b9a5}.hero .chat-card>.bubble,.hero .chat-card>.step{position:relative;z-index:1;opacity:0;font-size:13px;line-height:1.48}.hero .chat-card>.bubble.user{animation:messageLoop 8s ease-in-out infinite;background:#167265;color:#effff9;margin:15px 8px 0 48px;border-radius:18px 18px 5px 18px}.hero .chat-card>.bubble.answer{animation:answerLoop 8s ease-in-out infinite;background:#fff;color:#204d46;margin:14px 28px 0 8px;border-radius:18px 18px 18px 5px;box-shadow:0 5px 12px #0b3b3220}.hero .chat-card>.answer:before{content:'Family SOS';display:block;color:#df7650;font-size:10px;font-weight:800;letter-spacing:.05em;margin-bottom:5px}.hero .chat-card>.step{animation:stepLoop 8s ease-in-out infinite;background:#d9f2ec;color:#204d46;border-radius:16px;padding:15px;margin:15px 8px 16px}.hero .step span{background:#59b7a2}.hero .step p{color:#204d46}.hero .available{color:#ee8454;background:#174e45;border:0;border-radius:10px;padding:13px;margin-top:14px}.hero .available span{color:#b3dbcb}.hero .chat-card q{quotes:'“' '”';color:#245b50}.hero .chat-card q:before{content:'“'}.hero .chat-card q:after{content:'”'}.hero .chat-wrap:after{content:'Family SOS en acción';display:block;color:#fff;background:#ee8454;font-weight:800;font-size:11px;width:max-content;padding:8px 13px;border-radius:20px;position:absolute;right:-15px;top:30%;transform:rotate(5deg);box-shadow:0 8px 20px #082f2a66;animation:badgeFloat 4s ease-in-out infinite}.hero .proof{position:relative;z-index:3}.hero .lead{max-width:600px}@keyframes phoneFloat{0%,100%{transform:rotate(3deg) rotateY(-7deg) translateY(0)}50%{transform:rotate(2deg) rotateY(-5deg) translateY(-13px)}}@keyframes messageLoop{0%,8%{opacity:0;transform:translateY(12px)}16%,76%{opacity:1;transform:translateY(0)}88%,100%{opacity:0;transform:translateY(-8px)}}@keyframes answerLoop{0%,25%{opacity:0;transform:translateY(12px)}34%,76%{opacity:1;transform:translateY(0)}88%,100%{opacity:0;transform:translateY(-8px)}}@keyframes stepLoop{0%,43%{opacity:0;transform:translateY(12px)}52%,76%{opacity:1;transform:translateY(0)}88%,100%{opacity:0;transform:translateY(-8px)}}@keyframes badgeFloat{0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(3deg) translateY(-8px)}}@keyframes typing{0%,75%,100%{opacity:.25}80%,90%{opacity:1}}
@media(max-width:800px){.hero .chat-card{width:min(340px,100%);min-height:620px;transform:rotate(2deg)}.hero .chat-wrap:after{right:0}.hero .chat-card:after{bottom:24px}}