.phone-story {
  position: relative;
  background: radial-gradient(ellipse at 71% 45%, #53162f 0%, #23101f 42%, #0c090e 78%);
}
.phone-story:focus { outline: none; }
.phone-sticky { display: grid; align-items: center; padding-block: 36px; }
.phone-layout { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 6vw, 100px); max-width: 1040px; }
.phone-kicker { font-size: .7rem; letter-spacing: .17em; color: #ff9eb8; font-weight: 700; }
.phone-copy h2 { font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1; margin: 12px 0; }
.phone-description { min-height: 3.2em; }
.phone-visual { display: grid; justify-items: center; perspective: 1450px; }
.phone-device {
  position: relative;
  width: min(100%, 212px);
  aspect-ratio: 78 / 163.4;
  border: 1px solid #d990ac;
  border-radius: 34px;
  padding: 7px;
  transform: translateY(0px) rotateX(3deg) rotateY(-9deg); transform-style: preserve-3d;
  background: linear-gradient(125deg, #b27391, #321a2b 24%, #140e18 68%, #8c4e71);
  box-shadow: 6px 3px 0 #251625, 8px 4px 0 #70465d, 18px 24px 42px #0009, 0 0 54px #bd416342;
}
.phone-display { position: relative; height: 100%; border: 1px solid #251e2a; border-radius: 27px; overflow: hidden; background: #120f17; }
.phone-camera { position: absolute; z-index: 2; top: 9px; left: 50%; translate: -50% 0; width: 48px; height: 11px; border-radius: 10px; background: #09070b; }
.phone-screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.25,1), visibility 0s .55s; }
.phone-screen.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.demo-app { height: 100%; padding: 32px 13px 12px; font-size: .81rem; }
.demo-app header { display: grid; border-bottom: 1px solid #ffffff26; padding-bottom: 7px; font-size: 1.05rem; font-weight: 750; }
.demo-app small { display: block; color: #d7c5d4; font-size: .68rem; }
.demo-app h3 { margin: 10px 0 8px; }
.chat-app { background: linear-gradient(155deg, #172b26, #141319 68%); }
.bubble { width: fit-content; max-width: 92%; border-radius: 9px 9px 9px 2px; background: #30413d; padding: 8px; margin: 7px 0; }
.bubble.outgoing { margin-left: auto; background: #205843; border-radius: 9px 9px 2px 9px; }
.phone-playing .is-active .bubble { animation: bubble-in .3s ease-out both; }
.is-active .bubble.outgoing { animation-delay: .28s; }
.is-active .bubble.reply { animation-delay: .55s; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(5px); } }
.instagram-app { background: linear-gradient(145deg, #38213e, #15121b 67%); }
.profile-demo { display: flex; align-items: center; gap: 8px; margin: 13px 0; }
.demo-avatar { display: grid; place-items: center; width: 36px; aspect-ratio: 1; border: 2px solid #f479a5; border-radius: 50%; background: #512b4c; }
.demo-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 10px; }
.demo-posts span { display: grid; place-items: center; aspect-ratio: 1; background: linear-gradient(145deg, #793b68, #262034); border-radius: 5px; color: #ffe0ed; }
.report-app { background: linear-gradient(155deg, #421b34, #15121b 69%); }
.report-app ul { list-style: none; padding: 0; }
.report-app li { padding: 7px 0; border-bottom: 1px solid #ffffff24; }
.report-demo-status { color: #ffb9cf; margin-top: 11px; }
.phone-disclaimer { font-size: .71rem; margin-top: 15px; }

.phone-static .phone-device { transform: none; }
.phone-static .phone-screen { transition: none; }
.phone-static .bubble { animation: none; }
@media (max-width: 650px) {
  .phone-sticky { padding-block: 18px; }
  .phone-layout { grid-template-columns: 1fr; gap: 7px; }
  .phone-copy h2 { margin: 5px 0; font-size: clamp(1.6rem, 6.2vw, 2.5rem); }
  .phone-device { width: 178px; border-radius: 26px; padding: 5px; }
  .phone-display { border-radius: 20px; }
  .demo-app { padding: 25px 8px 7px; font-size: .71rem; }
  .bubble { padding: 5px; margin: 5px 0; }
  .phone-disclaimer { margin-top: 8px; }
}
@media (max-height: 540px) and (min-width: 651px) {
  .phone-device { width: min(100%, 185px); }
  .demo-app { padding: 25px 8px 7px; font-size: .71rem; }
}

.phone-story.phone-static .phone-device { transform: none; transition: none; }
.phone-description { margin-top: 16px; }
.phone-description strong { color: #ffb4ce; }

.phone-display { backface-visibility: hidden; transform: translateZ(6px); }
.phone-back {
  position: absolute;
  inset: 0;
  border: 1px solid #b57d9a;
  border-radius: inherit;
  background: linear-gradient(140deg, #755166, #302331 63%, #584052);
  backface-visibility: hidden;
  transform: rotateY(180deg) translateZ(6px);
}
.phone-camera-deck {
  position: absolute;
  inset: 7px 7px auto;
  height: 26%;
  border: 1px solid #ad7895;
  border-radius: 24px;
  background: linear-gradient(135deg, #5e4256, #392735);
}
.phone-camera-deck i {
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #a17b96;
  background: radial-gradient(circle at 38% 32%, #777998, #242035 23%, #090810 56%);
}
.phone-camera-deck i:nth-child(1) { top: 10%; left: 9%; }
.phone-camera-deck i:nth-child(2) { bottom: 10%; left: 9%; }
.phone-camera-deck i:nth-child(3) { top: 31%; left: 33%; }
.phone-camera-deck span { position: absolute; top: 18%; right: 13%; width: 7%; aspect-ratio: 1; border-radius: 50%; background: #ebcbdc; }
.phone-edge { position: absolute; inset: 7% auto 7% 0; width: 12px; background: linear-gradient(90deg, #4c3348, #9b6f8a, #382536); transform-origin: left; transform: translateZ(6px) rotateY(90deg); }
.phone-edge-right { left: auto; right: 0; transform-origin: right; transform: translateZ(6px) rotateY(-90deg); }
.bubble strong { color: #b4ecd0; font-size: .7rem; }

/* Reflexo no vidro, sincronizado com a entrada de cada tela. */
.phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(117deg, transparent 31%, #e977a221 45%, #ffd4e647 50%, transparent 65%);
  opacity: 0;
  transform: translateX(-110%);
}
.phone-playing .phone-screen.is-active::after {
  animation: phone-glass-sweep .9s .36s ease-out both;
}
@keyframes phone-glass-sweep {
  15% { opacity: .62; }
  65% { opacity: .42; }
  to { transform: translateX(110%); opacity: 0; }
}

.phone-training .phone-device { transform: none; width: min(100%, 315px); }
.phone-training .phone-screen.is-active { overflow-y: auto; overscroll-behavior: contain; padding: 25px 8px 10px; }
.phone-training .training { padding: 7px; gap: 8px; font-size: .8rem; }
.phone-training .training-settings { grid-template-columns: 1fr; gap: 5px; }
.phone-training .training-settings select { min-height: 38px; padding: 5px; }
.phone-training .training-thread { padding: 7px; }
.phone-training .training-option { font-size: .8rem; padding: 8px; }
.phone-training .training-replies h2 { font-size: .96rem; }
.phone-training-back { margin-bottom: 7px; }

.phone-training .phone-screen.is-active { display: flex; flex-direction: column; padding: 25px 0 0; overflow: hidden; background: #fff; }
.phone-training-back { align-self: center; min-height: 25px; margin: 1px 0 4px; padding: 3px 8px; font-size: .66rem; }
.chat-sim { display: flex; flex-direction: column; min-height: 0; flex: 1; color: #1c2023; background: #fff; font-size: .79rem; }
.chat-sim button { color: inherit; font: inherit; }
.chat-inbox-head, .chat-contact { padding: 8px; border-bottom: 1px solid #e8e8eb; }
.chat-inbox-head { text-align: center; }
.chat-channel-tabs { display: flex; justify-content: center; gap: 8px; margin-top: 5px; }
.chat-control { background: transparent; border: 0; padding: 6px; }
.chat-channel-tabs button { background: #f0f1f5; border-radius: 10px; }
.chat-search { margin: 8px; display: flex; align-items: center; gap: 5px; border-radius: 8px; background: #f1f1f4; color: #474750; padding-inline: 8px; }
.chat-search input { color: #222; background: transparent; border: 0; padding: 4px 0; min-height: 30px; }
.chat-list-title { padding: 4px 9px; }
.chat-client-list { overflow: auto; }
.chat-client { display: grid; grid-template-columns: 33px minmax(0,1fr) auto; align-items: center; gap: 7px; width: 100%; border: 0; background: #fff; padding: 7px 9px; text-align: left; }
.chat-client:hover { background: #f3f4fa; }
.chat-client small, .chat-contact small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .78; }
.chat-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: #eadcf9; color: #3b2463; font-weight: 700; }
.chat-client:nth-child(2n) .chat-avatar { background: #d9f0e7; color: #125842; }
.chat-no-results { padding: 8px; }
.chat-contact { display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; gap: 4px; align-items: center; }
.chat-contact .chat-control { font-size: 1.35rem; padding: 0 4px; }
.chat-contact-icons { white-space: nowrap; }
.chat-sim.whatsapp .chat-contact, .chat-sim.whatsapp .chat-inbox-head { background: #075c48; color: white; }
.chat-sim.whatsapp .chat-channel-tabs button { background: #ffffff26; }
.chat-sim .training-thread { min-height: 0; flex: 1; overflow: auto; align-content: start; gap: 6px; padding: 9px; }
.chat-sim.whatsapp .training-thread { background-color: #eee6d5; background-image: radial-gradient(#b3a68c50 1px, transparent 1px); background-size: 13px 13px; }
.chat-day { justify-self: center; background: #ececf0; border-radius: 8px; padding: 2px 7px; font-size: .65rem; }
.chat-sim .training-message { background: #eeeef2; padding: 5px 8px; color: #17171c; font-size: .75rem; }
.chat-sim .training-message small { display: block; text-align: right; font-size: .6rem; opacity: .8; }
.chat-sim.whatsapp .training-message { background: #fff; }
.chat-sim.whatsapp .training-message.sent { background: #d5f6bc; }
.chat-sim.whatsapp .training-message.sent span { color: #086c94; }
.chat-sim.instagram .training-message { border-radius: 15px; }
.chat-sim.instagram .training-message.sent { background: #4052ef; color: #fff; }
.chat-sim .training-replies { background: #fff; padding: 7px; border-top: 1px solid #e9e9ef; gap: 4px; }
.chat-coaching { font-size: .68rem; }
.chat-compose summary { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 6px 8px; border-radius: 20px; background: #eeeef3; cursor: pointer; }
.chat-options { display: grid; gap: 4px; margin-top: 5px; max-height: 125px; overflow-y: auto; }
.chat-sim .training-option { background: #f0eff7; border-color: #e1deed; color: #211c32; min-height: 30px; font-size: .72rem; }
.chat-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.phone-screen .chat-app { background: #eee6d5; color: #212822; }
.phone-screen .chat-app header { background: #075c48; color: white; margin: -3px -8px 6px; padding: 4px 8px; }
.phone-screen .chat-app .bubble { background: #fff; }
.phone-screen .chat-app .bubble.outgoing { background: #d5f6bc; }
.phone-screen .chat-app .bubble strong { color: #09654d; }

.report-app .meet-demo-people {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-block: 8px;
}
.report-app .meet-demo-people li {
  padding: 4px 2px;
  font-size: .68rem;
  color: #f4cfdf;
}

.chat-typing { display: flex; align-items: center; gap: 6px; font-size: .67rem; color: #51485d; }
.chat-typing > span { display: flex; gap: 3px; padding: 6px 8px; border-radius: 13px; background: #f1edf5; }
.chat-typing i { width: 4px; height: 4px; border-radius: 50%; background: #675b74; animation: chat-dot .9s infinite alternate; }
.chat-typing i:nth-child(2) { animation-delay: .14s; }
.chat-typing i:nth-child(3) { animation-delay: .28s; }
.chat-wait { padding: 5px 8px; color: #5a5661; font-size: .72rem; }
@keyframes chat-dot { from { opacity: .45; } to { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body:not(.institutional-motion) .chat-typing i { animation: none; } }

.product-hero .phone-story { background: transparent; }
.product-hero .phone-sticky { padding: 0; }
.product-hero .phone-layout { width: 100%; display: flex; flex-direction: column-reverse; gap: 8px; }
.product-hero .phone-copy { text-align: center; }
.product-hero .phone-kicker, .product-hero #phone-title, .product-hero .phone-description { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.product-hero .phone-visual { width: 100%; }
.phone-render { display: none; width: 100%; height: clamp(320px,40vw,570px); }
.phone-render canvas { width: 100%; height: 100%; display: block; }
.phone-has-3d .phone-render { display: block; }
.phone-has-3d .phone-device { display: none; }
.product-hero .phone-disclaimer { margin-top: 2px; }
@media (max-width: 730px) {
  .phone-render { height: 350px; }
}

.phone-training .phone-screen.is-active { background: #14111a; }
.phone-training-back {
  align-self: flex-start; min-height: 30px; margin: 0 12px 4px; padding: 0 5px;
  background: transparent; border: 0; color: #e9dbea; font: inherit; font-size: .71rem; cursor: pointer;
}
.phone-training-back span { font-size: 1.15em; margin-right: 3px; }
.chat-inbox { --channel-accent: #e5a5ff; --channel-surface: #33233e; background: #14111a; color: #f4eef6; }
.chat-inbox.whatsapp { --channel-accent: #77e5bc; --channel-surface: #17392f; background: #101c19; }
.chat-inbox .chat-inbox-head, .chat-inbox.whatsapp .chat-inbox-head {
  text-align: left; padding: 8px 14px 10px; background: transparent; border: 0;
}
.chat-inbox-kicker { font-size: .56rem; font-weight: 750; letter-spacing: .11em; color: var(--channel-accent); }
.chat-inbox-head h3 { margin: 2px 0 9px; font-size: 1.18rem; line-height: 1.2; }
.chat-inbox-head h3:focus { outline: none; }
.chat-inbox .chat-channel-tabs { justify-content: stretch; gap: 4px; padding: 3px; border-radius: 10px; background: #ffffff0e; }
.chat-inbox .chat-channel-tabs button { flex: 1; background: transparent; color: #d6cad9; }
.chat-inbox .chat-channel-tabs [aria-pressed=true] { background: var(--channel-surface); color: var(--channel-accent); font-weight: 700; }
.chat-inbox .chat-search { margin: 0 14px 7px; background: #ffffff0e; color: #d6cad9; border: 1px solid #ffffff1c; }
.chat-inbox .chat-search input { color: #fff; box-shadow: none; outline: none; }
.chat-inbox .chat-search input::placeholder { color: #c0b5c3; }
.chat-inbox .chat-search:focus-within { border-color: var(--channel-accent); }
.chat-inbox .chat-list-title { padding: 4px 14px 6px; font-size: .74rem; }
.chat-inbox .chat-client-list { padding: 0 10px 8px; }
.chat-inbox .chat-client { grid-template-columns: 34px minmax(0,1fr) auto; min-height: 47px; padding: 6px; background: transparent; border-bottom: 1px solid #ffffff12; }
.chat-inbox .chat-client[hidden] { display: none; }
.chat-inbox .chat-client:hover, .chat-inbox .chat-client:focus-visible { background: #ffffff12; }
.chat-inbox .chat-client .chat-avatar { background: var(--channel-surface); color: var(--channel-accent); }
.chat-inbox .chat-client > span:last-child { color: var(--channel-accent); }
.phone-home { flex:1; min-height:0; padding:28px 15px; color:#fff; background:radial-gradient(ellipse at 10% 80%,#ed588d,transparent 60%),radial-gradient(ellipse at 90% 10%,#613bc2,transparent 65%),#24122b; animation:home-unlock .5s ease-out both; }
.home-clock { text-align:center; font-size:3rem; font-weight:650; letter-spacing:-.06em; }
.home-clock small { display:block; font-size:.68rem; letter-spacing:0; font-weight:400; }
.home-notification { display:grid; gap:3px; margin-top:20px; padding:10px; border:1px solid #ffffff40; border-radius:13px; background:#211b348c; backdrop-filter:blur(10px); font-size:.7rem; animation:notification-in .45s .55s both; }
.home-notification-second { margin-top:8px; animation-delay:1.7s; }
.home-apps { display:flex; justify-content:center; gap:25px; margin-top:32px; }
.home-apps button { display:grid; justify-items:center; gap:6px; padding:0; color:#fff; border:0; background:transparent; font:inherit; font-size:.7rem; cursor:pointer; }
.home-apps button > span { display:grid; place-items:center; width:51px; height:51px; border-radius:13px; font-size:2.3rem; line-height:1; box-shadow:0 5px 14px #12051a55; }
.home-instagram { background:linear-gradient(35deg,#ffce64,#df316e,#7953da); }
.home-whatsapp { background:#1cbe70; }
.phone-home > p { text-align:center; margin-top:22px; font-size:.7rem; color:#fff; }
.phone-home-back { align-self:flex-start; margin:0 15px 5px; border:0; color:#d8bbdd; background:transparent; font-size:.65rem; cursor:pointer; }
.phone-training .chat-sim { animation:home-unlock .35s ease-out both; }
@keyframes home-unlock { from { opacity:0; transform:scale(.94) translateY(12px); } }
@keyframes notification-in { from { opacity:0; transform:translateY(-10px); } }

.phone-fallback-canvas{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}
.phone-has-fallback .phone-fallback-canvas{display:block}
.phone-has-fallback .phone-screen{visibility:hidden;opacity:0}