/* Animação didática do fluxo: relato, confirmação e aviso.
   Somente a página pública carrega esta folha. Sem JS, os exemplos continuam visíveis. */
.cc-flow-grid{position:relative;isolation:isolate;gap:22px}
.cc-flow-grid .cc-flow-card{position:relative;overflow:visible;isolation:isolate;min-width:0;min-height:430px;padding-bottom:24px}
.cc-flow-grid .cc-flow-card:nth-child(1){--flow-color:#07a9d9;--flow-bg:#d7f5ff;--flow-delay:0ms}
.cc-flow-grid .cc-flow-card:nth-child(2){--flow-color:#02b38f;--flow-bg:#d7fff1;--flow-delay:180ms}
.cc-flow-grid .cc-flow-card:nth-child(3){--flow-color:#e3a01a;--flow-bg:#fff1c5;--flow-delay:360ms}
.cc-flow-grid .cc-flow-card h3{margin-top:19px}
.cc-flow-grid .cc-flow-card>p{margin-bottom:14px}
.cc-flow-grid .cc-flow-card .cc-how-caption{margin-top:auto}
.cc-flow-grid .cc-flow-card::before{
  content:"";position:absolute;top:16px;left:16px;right:16px;height:3px;
  border-radius:100%;background:linear-gradient(90deg,var(--flow-color),transparent);
  opacity:.4;pointer-events:none
}
.cc-flow-grid .cc-flow-card:not(:last-child)::after{
  content:"";position:absolute;z-index:5;top:57%;right:-25px;width:28px;height:6px;
  border-radius:8px;background:linear-gradient(90deg,var(--flow-color),#5ae3db);
  box-shadow:0 0 0 4px #d4fafaa1,0 0 14px #00bdd35c;
  transform-origin:left center;pointer-events:none
}
.cc-flow-grid .cc-flow-card:hover{
  border-color:var(--flow-color);
  box-shadow:0 22px 45px #04b3ce40,0 0 0 3px #92f0e648;
  transform:translateY(-6px)
}
.cc-flow-art{
  position:relative;isolation:isolate;display:flex;flex:1;min-height:148px;max-height:163px;
  align-items:center;justify-content:center;overflow:hidden;
  margin:2px 0 15px;border:1px solid #d0eaf0;border-radius:17px;
  background:radial-gradient(circle at 50% 0%,#ffffffd9 0%,transparent 60%),linear-gradient(145deg,#effaff,#e8fffb);
  box-shadow:inset 0 1px #fff;pointer-events:none
}
.cc-flow-report{background:radial-gradient(circle at 55% 15%,#fff 0%,transparent 65%),linear-gradient(135deg,#e5faff,#cdf7ff)}
.cc-flow-verify{display:flex;flex-direction:column;padding:11px 18px;align-items:stretch;gap:9px;background:linear-gradient(140deg,#f4fffa,#dcfef0)}
.cc-flow-notify{background:radial-gradient(circle at 50% 23%,#fff9df 0%,transparent 60%),linear-gradient(135deg,#fff9e9,#e4faff)}
.cc-flow-phone{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:98px;height:132px;padding:17px 7px 9px;background:#fff;
  border:4px solid #134b68;border-radius:19px;box-shadow:0 9px 22px #098fc740;
  transform:rotate(-6deg)
}
.cc-flow-phone-top{width:30px;height:5px;position:absolute;top:3px;left:50%;transform:translateX(-50%);background:#123d5b;border-radius:0 0 5px 5px}
.cc-flow-drop{display:grid;place-items:center;width:38px;height:38px;background:#dcf8ff;border-radius:50%;font-size:20px}
.cc-flow-phone-caption{font-size:8px;color:#33556b;font-weight:900;white-space:nowrap;margin:8px 0}
.cc-flow-phone-action{font-size:8px;color:#fff;background:linear-gradient(110deg,#04b2e3,#0fd3aa);border-radius:5px;padding:5px 7px;font-weight:900;white-space:nowrap}
.cc-flow-report-bubble{
  position:absolute;z-index:3;left:54%;top:49%;display:flex;gap:6px;align-items:center;
  background:#fff;color:#086385;padding:9px 11px;border-radius:12px;
  box-shadow:0 10px 23px #059dc34a;font-size:10px;font-weight:900;white-space:nowrap;
  border:1px solid #d6f9f1;transform:rotate(3deg)
}
.cc-flow-check{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;background:#d0fff0;color:#008963;font-size:13px;font-weight:900}
.cc-flow-glow{position:absolute;display:block;inset:auto auto 8% -6%;width:170px;height:110px;border-radius:50%;background:radial-gradient(ellipse,#17c7ff49,transparent 72%);filter:blur(5px);z-index:-1}
.cc-flow-verify-caption{text-align:center;color:#0e6b67;font-size:10px;font-weight:900;letter-spacing:.2px}
.cc-flow-people{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cc-flow-person{display:flex;align-items:center;gap:5px;white-space:nowrap;background:#fff;border:1px solid #b8eee0;border-radius:10px;padding:9px 7px;box-shadow:0 6px 14px #0f9d7b19;color:#205960;font-size:9px;font-weight:900}
.cc-flow-person-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#c9f2e8;color:#087963;font-size:13px;font-weight:900;flex:none}
.cc-flow-person-check{margin-left:auto;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;font-weight:900;background:#dbfff0;color:#02ab77;font-size:11px}
.cc-flow-progress{height:7px;border-radius:7px;background:#b7ddd4;overflow:hidden}
.cc-flow-progress>span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#02b6a5,#1ad783);border-radius:7px}
.cc-flow-verify-bottom{text-align:center;color:#15866e;font-size:9px;font-weight:900}
.cc-flow-bell{position:relative;z-index:2;display:grid;place-items:center;font-size:40px;width:79px;height:79px;border-radius:50%;background:linear-gradient(145deg,#ffe69d,#fff7d9);box-shadow:0 0 0 8px #ffffffc5,0 12px 26px #e6b8424a}
.cc-flow-bell-ring{position:absolute;z-index:1;width:82px;height:82px;border:2px solid #eac054;border-radius:50%;opacity:.35}
.cc-flow-ring-two{width:110px;height:110px;border-color:#e5bf60}
.cc-flow-notice{position:absolute;z-index:3;right:5%;bottom:10px;display:flex;align-items:center;gap:6px;padding:8px 9px;background:#fff;border:1px solid #f3deb2;border-radius:11px;box-shadow:0 10px 22px #99975b30;transform:rotate(-4deg)}
.cc-flow-notice strong{display:block;color:#286670;font-size:10px;white-space:nowrap}
.cc-flow-notice small{display:block;color:#7d9294;font-size:8px;white-space:nowrap;margin-top:2px}
.cc-flow-receivers{position:absolute;display:flex;gap:4px;left:5%;bottom:20px}
.cc-flow-receivers>span{width:12px;height:12px;border-radius:50%;color:transparent;box-shadow:0 0 0 3px #ffffffb2;background:#0eb7ce}
.cc-flow-receivers>span:nth-child(2){background:#05c8aa}
.cc-flow-receivers>span:nth-child(3){background:#ffbf4c}
.cc-flow-grid.cc-flow-active .cc-flow-card{animation:cc-flow-card-arrive .65s cubic-bezier(.2,.8,.3,1) backwards;animation-delay:var(--flow-delay)}
.cc-flow-grid.cc-flow-active .cc-flow-card:not(:last-child)::after{animation:cc-flow-connector 4.7s ease-in-out 1.1s infinite}
.cc-flow-grid.cc-flow-active .cc-flow-report-bubble{animation:cc-flow-report-send 6s ease-in-out .5s infinite}
.cc-flow-grid.cc-flow-active .cc-flow-phone-action{animation:cc-flow-phone-action 6s ease-in-out .15s infinite}
.cc-flow-grid.cc-flow-active .cc-flow-person-one .cc-flow-person-check{animation:cc-flow-confirm 6s ease-in-out 1.2s infinite}
.cc-flow-grid.cc-flow-active .cc-flow-person-two .cc-flow-person-check{animation:cc-flow-confirm 6s ease-in-out 2.2s infinite}
.cc-flow-grid.cc-flow-active .cc-flow-progress>span{animation:cc-flow-fill 6s ease-in-out 1.1s infinite}
.cc-flow-grid.cc-flow-active .cc-flow-bell{animation:cc-flow-bell-pulse 6s ease-in-out 2.9s infinite}
.cc-flow-grid.cc-flow-active .cc-flow-bell-ring{animation:cc-flow-ring-pulse 6s ease-out 2.9s infinite}
.cc-flow-grid.cc-flow-active .cc-flow-ring-two{animation-delay:3.2s}
.cc-flow-grid.cc-flow-active .cc-flow-notice{animation:cc-flow-notification 6s ease-in-out 3.2s infinite}
.cc-flow-grid.cc-flow-active .cc-flow-receivers>span{animation:cc-flow-receiver 6s ease-in-out 3.2s infinite}
.cc-flow-grid.cc-flow-active .cc-flow-receivers>span:nth-child(2){animation-delay:3.45s}
.cc-flow-grid.cc-flow-active .cc-flow-receivers>span:nth-child(3){animation-delay:3.7s}
@keyframes cc-flow-card-arrive{
  from{opacity:.38;transform:translateY(22px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes cc-flow-connector{
  0%,12%,100%{opacity:.4;transform:scaleX(.65)}
  30%,65%{opacity:1;transform:scaleX(1);box-shadow:0 0 0 5px #affff4ab,0 0 25px #00d9ce}
}
@keyframes cc-flow-report-send{
  0%,7%,100%{opacity:.72;transform:translateY(12px) rotate(3deg) scale(.91)}
  18%,64%{opacity:1;transform:translateY(0) rotate(3deg) scale(1)}
  72%{opacity:.8;transform:translateY(-3px) rotate(3deg)}
}
@keyframes cc-flow-phone-action{
  0%,10%,100%{filter:brightness(1)}
  20%,32%{filter:brightness(1.23);box-shadow:0 0 0 4px #00cdb92d}
}
@keyframes cc-flow-confirm{
  0%,12%,100%{opacity:.35;transform:scale(.76);filter:saturate(.2)}
  28%,75%{opacity:1;transform:scale(1.13);filter:saturate(1.2)}
  85%{opacity:1;transform:scale(1)}
}
@keyframes cc-flow-fill{
  0%,13%,100%{transform:scaleX(0);transform-origin:left center}
  24%{transform:scaleX(.5)}
  43%,83%{transform:scaleX(1)}
}
@keyframes cc-flow-bell-pulse{
  0%,13%,100%{transform:rotate(0)}
  22%,27%{transform:rotate(-13deg)}
  31%,37%{transform:rotate(12deg)}
  40%{transform:rotate(0)}
}
@keyframes cc-flow-ring-pulse{
  0%,12%,100%{opacity:0;transform:scale(.73)}
  24%,40%{opacity:.65}
  60%{opacity:0;transform:scale(1.43)}
}
@keyframes cc-flow-notification{
  0%,15%,100%{opacity:.76;transform:translateY(8px) rotate(-4deg) scale(.95)}
  25%,75%{opacity:1;transform:translateY(0) rotate(-4deg) scale(1)}
}
@keyframes cc-flow-receiver{
  0%,13%,100%{transform:scale(.7);opacity:.5}
  27%,65%{transform:scale(1.24);opacity:1}
}
@media(max-width:960px){
  .cc-flow-grid .cc-flow-card{padding:19px;min-height:427px}
  .cc-flow-art{min-height:153px}
  .cc-flow-person{padding:6px 4px;gap:3px;font-size:8px}
  .cc-flow-grid .cc-flow-card:not(:last-child)::after{right:-24px;width:26px}
}
@media(max-width:830px){
  .cc-flow-grid{gap:30px}
  .cc-flow-grid .cc-flow-card{min-height:0;padding:23px}
  .cc-flow-art{height:160px;max-height:160px;flex:0 0 160px}
  .cc-flow-grid .cc-flow-card:not(:last-child)::after{
    top:auto;right:auto;left:calc(50% - 3px);bottom:-32px;
    width:6px;height:35px;
    background:linear-gradient(180deg,var(--flow-color),#66e6d8);
    transform-origin:top center;
  }
  .cc-flow-grid.cc-flow-active .cc-flow-card:not(:last-child)::after{animation:cc-flow-connector-mobile 4.7s ease-in-out 1.1s infinite}
  .cc-flow-person{padding:9px;gap:7px;font-size:10px}
}
@keyframes cc-flow-connector-mobile{
  0%,12%,100%{opacity:.45;transform:scaleY(.65)}
  30%,65%{opacity:1;transform:scaleY(1);box-shadow:0 0 0 5px #affff4ab,0 0 22px #02b8ba}
}
@media(max-width:600px){
  .cc-flow-grid{gap:28px}
  .cc-flow-grid .cc-flow-card{padding:22px}
  .cc-flow-grid .cc-flow-card:not(:last-child)::after{bottom:-31px}
  .cc-flow-art{margin:9px 0 16px}
  .cc-flow-grid .cc-flow-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .cc-flow-grid .cc-flow-card,
  .cc-flow-grid .cc-flow-card:hover,
  .cc-flow-grid .cc-flow-card *,
  .cc-flow-grid .cc-flow-card::after,
  .cc-flow-grid.cc-flow-active .cc-flow-card,
  .cc-flow-grid.cc-flow-active .cc-flow-card *{
    animation:none!important;transition:none!important;
  }
  .cc-flow-grid .cc-flow-card:hover{transform:none!important}
  .cc-flow-progress>span{transform:none}
  .cc-flow-person-check{opacity:1!important;transform:none!important}
  .cc-flow-bell-ring{opacity:.28!important}
}