/* ------------------------------------------------------------
   Calculadora 3D (orcamento-aplicativo/3d.php).
   Cena em CSS 3D: o JS marca no .c3 o que foi respondido
   (data-login="email", ...) e o foco da câmera (data-foco),
   e liga as peças com .c3-on / .c3-fantasma.
------------------------------------------------------------ */

/* ---------- layout: perguntas à esquerda, cena à direita ---------- */
.calc3d-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.calc3d-conteudo {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.calc3d-palco {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  height: 640px;
}
.calc3d .calc-step .row > div {
  flex: 0 0 50%;
  max-width: 50%;
}
.calc3d .calc-answer {
  min-height: 90px;
  padding: 20px 24px;
  font-size: 16px;
}
.calc3d .calc-bar {
  margin-bottom: 40px;
}
/* no resultado a cena vira o destaque, em largura total */
.calc3d-final .calc3d-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}
.calc3d-final .calc3d-palco,
.calc3d-final .calc3d-conteudo {
  grid-column: 1;
  grid-row: auto;
}
.calc3d-final .calc3d-palco {
  height: 520px;
}

@media screen and (max-width: 992px) {
  .calc3d-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .calc3d-palco,
  .calc3d-conteudo {
    grid-column: 1;
    grid-row: auto;
  }
  .calc3d-palco,
  .calc3d-final .calc3d-palco {
    height: 380px;
  }
}
@media screen and (max-width: 576px) {
  .calc3d-palco,
  .calc3d-final .calc3d-palco {
    height: 320px;
  }
  .calc3d .calc-step .row > div {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .calc3d .calc-answer {
    min-height: 70px;
  }
}

/* ---------- palco e câmera ---------- */
.c3 {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1400px;
  background: radial-gradient(circle at 50% 40%, rgb(255, 255, 255), rgb(240, 240, 240) 75%);
  font-family: "Outfit", sans-serif;
  /* posição da câmera: afastamento, inclinação, giro e ponto de foco */
  --cam-z: -150px;
  --cam-rx: -8deg;
  --cam-ry: -24deg;
  --cam-x: 0px;
  --cam-y: 0px;
}
.c3-legenda {
  position: absolute;
  top: 24px;
  left: 28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.c3-legenda span {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
}
.c3-legenda b {
  font-size: 20px;
  font-weight: 500;
  color: rgb(0, 0, 0);
}
.c3-dica {
  position: absolute;
  left: 28px;
  bottom: 22px;
  z-index: 2;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
  display: none;
}
@media (hover: hover) {
  .c3[data-foco]:not([data-foco="inicio"]):not([data-foco="resultado"]):not([data-foco="empresa"]):not([data-foco="nome"]):not([data-foco="telefone"]):not([data-foco="email"]) .c3-dica {
    display: block;
  }
}

.c3-escala,
.c3-balanco,
.c3-mundo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.c3-escala {
  transform: scale(0.85);
}
.calc3d-final .c3-escala {
  transform: scale(0.8);
}
@media screen and (max-width: 992px) {
  .c3-escala,
  .calc3d-final .c3-escala {
    transform: scale(0.44);
  }
}
.c3[data-foco="inicio"] .c3-balanco,
.c3[data-foco="empresa"] { --cam-z: 300px; --cam-rx: 0deg; --cam-ry: -4deg; --cam-y: 100px; }
.c3[data-foco="nome"] { --cam-z: 300px; --cam-rx: 0deg; --cam-ry: -4deg; --cam-y: 100px; }
.c3[data-foco="telefone"] { --cam-z: 120px; --cam-rx: 0deg; --cam-ry: -10deg; --cam-y: 140px; }
.c3[data-foco="email"] { --cam-z: -560px; --cam-rx: -10deg; --cam-ry: -12deg; }
.c3[data-foco="resultado"] .c3-balanco {
  animation: c3-balanco 9s ease-in-out infinite alternate;
}
@keyframes c3-balanco {
  from { transform: rotateY(-8deg); }
  to { transform: rotateY(8deg); }
}
.c3-mundo {
  transform: translateZ(var(--cam-z)) rotateX(var(--cam-rx)) rotateY(var(--cam-ry)) translate3d(var(--cam-x), var(--cam-y), 0);
  transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1);
}

/* um ponto de vista para cada pergunta */
.c3[data-foco="acabamento"] { --cam-z: 80px; --cam-rx: -6deg; --cam-ry: -24deg; }
.c3[data-foco="plataforma"] { --cam-z: -170px; --cam-rx: -6deg; --cam-ry: -16deg; --cam-x: -70px; }
.c3[data-foco="tamanho"] { --cam-z: 300px; --cam-rx: 0deg; --cam-ry: -4deg; --cam-y: 20px; }
.c3[data-foco="design"] { --cam-z: 200px; --cam-rx: 6deg; --cam-ry: 14deg; }
.c3[data-foco="login"] { --cam-z: 30px; --cam-rx: -6deg; --cam-ry: -34deg; --cam-x: -90px; }
.c3[data-foco="recursos"] { --cam-z: -40px; --cam-rx: -4deg; --cam-ry: 28deg; --cam-x: 140px; }
.c3[data-foco="receita"] { --cam-z: -40px; --cam-rx: -16deg; --cam-ry: -20deg; --cam-x: -80px; --cam-y: -110px; }
.c3[data-foco="integracao"] { --cam-z: -120px; --cam-rx: -4deg; --cam-ry: 30deg; --cam-x: 250px; }
.c3[data-foco="painel"] { --cam-z: -140px; --cam-rx: -4deg; --cam-ry: -30deg; --cam-x: -330px; }
.c3[data-foco="idiomas"] { --cam-z: -60px; --cam-rx: 10deg; --cam-ry: -8deg; --cam-y: 120px; }
.c3[data-foco="estagio"] { --cam-z: -560px; --cam-rx: -10deg; --cam-ry: -12deg; }
.c3[data-foco="resultado"] { --cam-z: -300px; --cam-rx: -10deg; --cam-ry: -14deg; }

/* ---------- peças: posicionadas pelo centro em (--x, --y, --z) ---------- */
.c3-obj {
  --x: 0px;
  --y: 0px;
  --z: 0px;
  --giro: 0deg;
  --s: 1;
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%) translate3d(var(--x), var(--y), var(--z)) rotateY(var(--giro)) scale(var(--s));
}
.c3 [data-c3] {
  opacity: 0;
  transition: opacity 0.5s, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.c3 .c3-obj[data-c3] {
  --s: 0.6;
}
.c3 [data-c3].c3-on {
  opacity: 1;
}
.c3 .c3-obj[data-c3].c3-on,
.c3 .c3-obj[data-c3].c3-fantasma {
  --s: 1;
}
/* "ainda em aberto": contorno tracejado com uma interrogação */
.c3 [data-c3].c3-fantasma {
  opacity: 0.7;
  border: 2px dashed rgba(204, 5, 5, 0.6) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
}
.c3 [data-c3].c3-fantasma > * {
  opacity: 0.15;
}
.c3 [data-c3].c3-fantasma::after {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  color: rgb(204, 5, 5);
}

/* ---------- chão ---------- */
.c3-chao,
.c3-sombra {
  position: absolute;
  left: 0;
  top: 0;
}
.c3-chao {
  width: 1600px;
  height: 1600px;
  transform: translate(-50%, -50%) translate3d(0, 215px, 0) rotateX(90deg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center;
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 60%);
  mask-image: radial-gradient(circle, #000 15%, transparent 60%);
}
.c3-sombra {
  width: 320px;
  height: 140px;
  transform: translate(-50%, -50%) translate3d(0, 214px, 0) rotateX(90deg);
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.28), transparent 70%);
}

/* ---------- celular principal ---------- */
.c3-fone {
  width: 200px;
  height: 410px;
  transform-style: preserve-3d;
}
.c3-fone-camada,
.c3-fone-frente {
  position: absolute;
  inset: 0;
  border-radius: 34px;
  transition: background 0.6s, border-color 0.6s, box-shadow 0.6s;
}
.c3-fone-camada {
  transform: translateZ(var(--d));
  background: rgb(45, 45, 45);
}
.c3-fone-frente {
  padding: 9px;
  background: rgb(25, 25, 25);
  border: 2px solid transparent;
}
.c3-tela {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 26px;
  background: rgb(250, 250, 250);
  padding: 34px 12px 0;
  transition: background 0.6s, filter 0.6s;
}
.c3-notch {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 62px;
  height: 18px;
  border-radius: 10px;
  background: rgb(0, 0, 0);
  transform: translateX(-50%);
  transition: width 0.4s, border-radius 0.4s;
}
.c3[data-plataforma="android"] .c3-notch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.c3-status {
  position: absolute;
  top: 10px;
  left: 20px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  color: rgb(0, 0, 0);
}
.c3-bateria {
  width: 18px;
  height: 9px;
  border-radius: 2px;
  border: 1.5px solid currentColor;
}
.c3-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgb(230, 230, 230);
  font-size: 13px;
  transition: background 0.6s, color 0.6s, border-radius 0.6s;
}
/* nomes digitados pela pessoa: até duas linhas */
.c3-topo b,
.c3-login b {
  font-weight: 600;
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.c3-topo b {
  font-size: 12px;
}
.c3-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgb(190, 190, 190);
  color: rgb(255, 255, 255);
  font-size: 12px;
  font-weight: 700;
  transition: background 0.6s;
}
.c3-menu {
  margin-left: auto;
  width: 14px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  position: relative;
}
.c3-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  border-top: 2px solid currentColor;
}
.c3-hero {
  height: 0;
  margin-bottom: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, rgb(204, 5, 5), rgb(40, 40, 40));
  transition: height 0.6s, margin 0.6s;
}
.c3-ola {
  position: relative;
  height: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity 0.5s, height 0.5s, margin 0.5s;
}
.c3-ola.c3-on,
.c3-ola.c3-fantasma {
  height: 26px;
  margin-bottom: 8px;
}
.c3-ola.c3-fantasma::after {
  font-size: 16px;
}
.c3-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.c3-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 64px;
  border-radius: 10px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(232, 232, 232);
  font-size: 9px;
  color: rgb(60, 60, 60);
  transform: scale(0.6);
}
.c3-tile.c3-on,
.c3-tile.c3-fantasma {
  transform: none;
}
.c3-tile svg {
  width: 20px;
  height: 20px;
  color: rgb(120, 120, 120);
  transition: color 0.6s;
}
.c3-tile.c3-fantasma::after {
  font-size: 18px;
}
.c3-anuncio,
.c3-comprar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 52px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}
.c3-anuncio {
  background: repeating-linear-gradient(45deg, rgb(255, 236, 179), rgb(255, 236, 179) 8px, rgb(255, 224, 130) 8px, rgb(255, 224, 130) 16px);
  color: rgb(120, 80, 0);
}
.c3-comprar {
  background: rgb(204, 5, 5);
  color: rgb(255, 255, 255);
}
.c3-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgb(255, 255, 255);
  border-top: 1px solid rgb(235, 235, 235);
}
.c3-nav i {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: rgb(210, 210, 210);
}
.c3-figma {
  position: absolute;
  inset: 80px 8px 50px;
  border: 1.5px solid rgb(123, 97, 255);
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}
.c3-figma span {
  position: absolute;
  top: -18px;
  left: -2px;
  padding: 1px 6px;
  background: rgb(123, 97, 255);
  color: rgb(255, 255, 255);
  font-size: 9px;
  border-radius: 3px;
}
.c3-figma::before,
.c3-figma::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: rgb(255, 255, 255);
  border: 1.5px solid rgb(123, 97, 255);
}
.c3-figma::before {
  top: -4px;
  right: -4px;
}
.c3-figma::after {
  bottom: -4px;
  left: -4px;
}

/* acabamento */
.c3[data-acabamento="mvp"] .c3-fone-camada {
  background: transparent;
  border: 1.5px dashed rgb(170, 170, 170);
}
.c3[data-acabamento="mvp"] .c3-fone-frente {
  background: rgb(245, 245, 245);
  border: 2px dashed rgb(140, 140, 140);
}
.c3[data-acabamento="mvp"] .c3-tela {
  filter: grayscale(1);
}
.c3[data-acabamento="premium"] .c3-fone-camada {
  background: linear-gradient(160deg, rgb(204, 5, 5), rgb(90, 0, 0));
}
.c3[data-acabamento="premium"] .c3-fone-frente {
  background: linear-gradient(150deg, rgb(70, 70, 70), rgb(5, 5, 5));
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 60px rgba(204, 5, 5, 0.35);
}
.c3[data-acabamento="premium"] .c3-tela::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 35%);
  pointer-events: none;
}

/* design */
.c3[data-design="simples"] .c3-topo {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(230, 230, 230);
}
.c3[data-design="simples"] .c3-logo {
  background: rgb(0, 0, 0);
}
.c3[data-design="simples"] .c3-tile svg {
  color: rgb(0, 0, 0);
}
.c3[data-design="marca"] .c3-tela {
  background: linear-gradient(180deg, rgb(255, 240, 240), rgb(255, 255, 255) 60%);
}
.c3[data-design="marca"] .c3-topo {
  background: rgb(204, 5, 5);
  color: rgb(255, 255, 255);
  border-radius: 14px;
}
.c3[data-design="marca"] .c3-logo {
  background: rgb(255, 255, 255);
  color: rgb(204, 5, 5);
}
.c3[data-design="marca"] .c3-tile {
  border-color: transparent;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(204, 5, 5, 0.12);
}
.c3[data-design="marca"] .c3-tile svg,
.c3[data-design="marca"] .c3-nav i:first-child {
  color: rgb(204, 5, 5);
  background-color: currentColor;
}
.c3[data-design="marca"] .c3-tile svg {
  background: none;
}
.c3[data-design="site"] .c3-topo {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  border-radius: 0;
  margin: 0 -12px 0;
}
.c3[data-design="site"] .c3-logo {
  background: rgb(204, 5, 5);
}
.c3[data-design="site"] .c3-hero {
  height: 70px;
  margin: 0 -12px 10px;
  border-radius: 0;
}
.c3[data-design="site"] .c3-tile {
  height: 50px;
}
.c3[data-design="pronto"] .c3-figma {
  opacity: 1;
}

/* ---------- segundo celular ---------- */
.c3-fone2 {
  width: 180px;
  height: 370px;
  padding: 8px;
  border-radius: 28px;
  background: rgb(35, 35, 35);
  box-shadow: 14px 0 0 rgb(55, 55, 55);
}
.c3-fone2-tela {
  position: relative;
  height: 100%;
  border-radius: 21px;
  background: rgb(250, 250, 250);
  padding: 34px 10px 0;
  display: grid;
  grid-template-rows: 40px 64px 64px;
  gap: 8px;
}
.c3-fone2-tela i {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgb(0, 0, 0);
  transform: translateX(-50%);
}
.c3-fone2-tela span {
  border-radius: 10px;
  background: rgb(232, 232, 232);
}

/* ---------- etiquetas, cartões e ícones flutuantes ---------- */
.c3-etiqueta {
  padding: 10px 18px;
  border-radius: 30px;
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.c3-etiqueta-icone,
.c3-estagio span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.c3-etiqueta svg {
  width: 20px;
  height: 20px;
  color: rgb(255, 80, 80);
}
.c3-os span,
.c3-estagio span {
  display: none;
}
.c3[data-plataforma="android"] .c3-os-android,
.c3[data-plataforma="ios"] .c3-os-ios,
.c3[data-plataforma="ambos"] .c3-os-ambos,
.c3[data-estagio="ideia"] .c3-est-ideia,
.c3[data-estagio="esboco"] .c3-est-esboco,
.c3[data-estagio="desenvolvimento"] .c3-est-desenvolvimento,
.c3[data-estagio="pronto"] .c3-est-pronto {
  display: flex;
}
.c3-os.c3-fantasma,
.c3-estagio.c3-fantasma {
  width: 140px;
  height: 44px;
}

.c3-cartao {
  border-radius: 18px;
  background: rgb(255, 255, 255);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.16);
}
.c3-login {
  width: 170px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c3-login-cadeado svg {
  width: 22px;
  height: 22px;
  color: rgb(204, 5, 5);
}
.c3-login b {
  font-size: 15px;
  font-weight: 600;
}
.c3-campo {
  height: 22px;
  border-radius: 6px;
  background: rgb(240, 240, 240);
}
.c3-botao {
  height: 24px;
  border-radius: 6px;
  background: rgb(204, 5, 5);
}
.c3-login-social {
  display: none;
  gap: 6px;
}
.c3[data-login="social"] .c3-login-social {
  display: flex;
}
.c3-login-social span {
  flex: 1;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 600;
  border: 1px solid rgb(225, 225, 225);
}
.c3-login-social span:last-child {
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  border-color: rgb(0, 0, 0);
}

.c3-chip {
  width: 72px;
  height: 72px;
  border-radius: 50%;
}
.c3-chip > div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  color: rgb(204, 5, 5);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
  animation: c3-flutua 3.6s ease-in-out infinite alternate;
}
.c3-chip:nth-of-type(2n) > div {
  animation-delay: -1.8s;
}
.c3-chip svg {
  width: 30px;
  height: 30px;
}
@keyframes c3-flutua {
  from { transform: translateY(-6px); }
  to { transform: translateY(6px); }
}

.c3-pagamento {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.c3-pagamento svg {
  width: 26px;
  height: 26px;
  color: rgb(204, 5, 5);
}

.c3-servidor {
  width: 150px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 14px;
  background: rgb(30, 30, 30);
  color: rgb(255, 255, 255);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.c3-servidor svg {
  width: 26px;
  height: 26px;
  margin-bottom: 6px;
  color: rgb(255, 80, 80);
}
.c3-servidor b {
  font-size: 16px;
  font-weight: 600;
}
.c3-servidor small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.c3-linhas {
  width: 300px;
  height: 260px;
  overflow: visible;
}
.c3-linhas path {
  fill: none;
  stroke: rgb(204, 5, 5);
  stroke-width: 2.5;
  stroke-dasharray: 8 8;
  animation: c3-fluxo 1.2s linear infinite;
}
@keyframes c3-fluxo {
  to { stroke-dashoffset: -32; }
}

.c3-monitor {
  width: 320px;
}
.c3-monitor-tela {
  height: 200px;
  display: flex;
  border: 8px solid rgb(25, 25, 25);
  border-radius: 12px;
  background: rgb(250, 250, 250);
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
}
.c3-monitor-menu {
  width: 44px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgb(0, 0, 0);
}
.c3-monitor-menu i {
  height: 8px;
  border-radius: 3px;
  background: rgb(80, 80, 80);
}
.c3-monitor-menu i:first-child {
  background: rgb(204, 5, 5);
}
.c3-monitor-corpo {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.c3-monitor-corpo b {
  font-size: 12px;
  font-weight: 600;
}
.c3-kpis {
  display: flex;
  gap: 8px;
}
.c3-kpis span {
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(235, 235, 235);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
}
.c3-kpis small {
  font-size: 8px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
}
.c3-barras {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.c3-barras i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: rgb(204, 5, 5);
}
.c3-barras i:nth-child(odd) {
  background: rgb(40, 40, 40);
}
.c3-monitor-pe {
  width: 70px;
  height: 40px;
  margin: 0 auto;
  background: linear-gradient(rgb(60, 60, 60), rgb(25, 25, 25));
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}

.c3-notificacao {
  width: 250px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
}
.c3-notificacao-icone {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #25d366;
  color: rgb(255, 255, 255);
}
.c3-notificacao-icone svg {
  width: 20px;
  height: 20px;
}
.c3-notificacao b {
  display: block;
  font-size: 13px;
  font-weight: 600;
}
.c3-notificacao small {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.6);
}

.c3-balao {
  width: 64px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px 16px 16px 4px;
  background: rgb(204, 5, 5);
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-weight: 600;
  box-shadow: 0 16px 30px rgba(204, 5, 5, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .c3 *,
  .c3 *::before,
  .c3 *::after {
    animation: none !important;
    transition-duration: 0.01s !important;
  }
}