/* ============================================================
   interactive.css — estilos das 5 ferramentas UX
   ============================================================ */

/* ===== ROI CALC ===== */
#fb-roi-calc {
  background: rgba(0, 0, 0,0.025);
  border: 0.5px solid rgba(0, 0, 0,0.12);
  border-radius: 14px;
  padding: 28px 30px;
  margin: 32px 0;
}
#fb-roi-calc h3 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.012em;
  margin-bottom: 6px;
  color: #12151c;
  text-transform: none;
}
#fb-roi-calc .fb-roi-sub {
  font-size: 13px;
  color: rgba(18, 21, 28,0.7);
  margin-bottom: 22px;
}
#fb-roi-calc .fb-roi-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
#fb-roi-calc .fb-roi-field label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(18, 21, 28,0.6);
  margin-bottom: 6px;
}
#fb-roi-calc .fb-roi-field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid rgba(0, 0, 0,0.2);
  color: #12151c;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 20px;
  font-weight: 400;
  padding: 8px 0;
  outline: none;
  transition: border-color 200ms ease;
}
#fb-roi-calc .fb-roi-field input:focus {
  border-bottom-color: #1f4fe0;
}
#fb-roi-calc .fb-roi-out {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
#fb-roi-calc .fb-roi-card {
  padding: 18px 20px;
  border-radius: 10px;
  background: rgba(0, 0, 0,0.03);
}
#fb-roi-calc .fb-roi-card.warn {
  border-left: 2px solid #c46060;
}
#fb-roi-calc .fb-roi-card.gain {
  border-left: 2px solid #6aad7a;
}
#fb-roi-calc .fb-roi-card span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(18, 21, 28,0.6);
  margin-bottom: 8px;
}
#fb-roi-calc .fb-roi-card strong {
  display: block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.018em;
  color: #12151c;
}
@media (max-width: 600px) {
  #fb-roi-calc .fb-roi-fields { grid-template-columns: 1fr; }
  #fb-roi-calc .fb-roi-out { grid-template-columns: 1fr; }
}

/* ===== FUNIL VISUAL ===== */
#fb-funil {
  background: rgba(0, 0, 0,0.025);
  border: 0.5px solid rgba(0, 0, 0,0.12);
  border-radius: 14px;
  padding: 28px 30px;
  margin: 32px 0;
}
#fb-funil h3 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.012em;
  margin-bottom: 6px;
  color: #12151c;
  text-transform: none;
}
#fb-funil .fb-funil-sub {
  font-size: 13px;
  color: rgba(18, 21, 28,0.7);
  margin-bottom: 22px;
}
#fb-funil .fb-funil__stages {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
  align-items: center;
}
#fb-funil .fb-funil__stage {
  background: rgba(0, 0, 0,0.04);
  border: 0.5px solid rgba(0, 0, 0,0.12);
  padding: 10px 22px;
  cursor: pointer;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: all 200ms ease;
  color: rgba(18, 21, 28,0.85);
}
#fb-funil .fb-funil__stage:nth-child(1) { width: 100%; max-width: 520px; border-radius: 6px 6px 4px 4px; }
#fb-funil .fb-funil__stage:nth-child(2) { width: 90%; max-width: 470px; border-radius: 4px; }
#fb-funil .fb-funil__stage:nth-child(3) { width: 78%; max-width: 410px; border-radius: 4px; }
#fb-funil .fb-funil__stage:nth-child(4) { width: 64%; max-width: 340px; border-radius: 4px; }
#fb-funil .fb-funil__stage:nth-child(5) { width: 48%; max-width: 260px; border-radius: 4px 4px 6px 6px; }
#fb-funil .fb-funil__stage.dead { background: rgba(196,96,96,0.06); border-color: rgba(196,96,96,0.3); color: rgba(18, 21, 28,0.55); }
#fb-funil .fb-funil__stage:hover,
#fb-funil .fb-funil__stage.active {
  background: rgba(31, 79, 224,0.12);
  border-color: rgba(31, 79, 224,0.5);
  color: #12151c;
  transform: scale(1.02);
}
#fb-funil .fb-funil__detail {
  padding: 18px 22px;
  background: rgba(0, 0, 0,0.04);
  border-radius: 10px;
  min-height: 90px;
}
#fb-funil .fb-funil__detail h4 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #12151c;
  margin-bottom: 6px;
  text-transform: none;
}
#fb-funil .fb-funil__detail p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(18, 21, 28,0.8);
}

/* ===== COMPARADOR ANTES/DEPOIS ===== */
#fb-comparador {
  position: relative;
  background: rgba(0, 0, 0,0.025);
  border: 0.5px solid rgba(0, 0, 0,0.12);
  border-radius: 14px;
  overflow: hidden;
  margin: 32px 0;
  user-select: none;
  height: 380px;
}
#fb-comparador .fb-comp__side {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
}
#fb-comparador .fb-comp__antes {
  background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  color: rgba(18, 21, 28,0.75);
}
#fb-comparador .fb-comp__depois {
  clip-path: inset(0 50% 0 0);
  background: linear-gradient(135deg, #1a1612 0%, #2a1f15 100%);
  color: #12151c;
}
#fb-comparador .fb-comp__content {
  max-width: 360px;
}
#fb-comparador .fb-comp__label {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
}
#fb-comparador .fb-comp__antes .fb-comp__label { background: rgba(196,96,96,0.15); color: #c46060; }
#fb-comparador .fb-comp__depois .fb-comp__label { background: rgba(31, 79, 224,0.2); color: #d4994a; }
#fb-comparador .fb-comp__title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin-bottom: 10px;
}
#fb-comparador .fb-comp__desc {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.85;
}
#fb-comparador .fb-comp__handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: rgba(18, 21, 28,0.5);
  cursor: ew-resize;
  z-index: 10;
  transform: translateX(-1px);
}
#fb-comparador .fb-comp__handle::after {
  content: '⇄';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  background: #12151c;
  color: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}

/* ===== AUDITORIA GBP ===== */
#fb-auditoria-gbp {
  background: linear-gradient(180deg, rgba(0, 0, 0,0.04), rgba(0, 0, 0,0.015));
  border: 0.5px solid rgba(0, 0, 0,0.15);
  border-radius: 14px;
  padding: 32px 30px;
  margin: 32px 0;
}
#fb-auditoria-gbp h3 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.014em;
  margin-bottom: 8px;
  color: #12151c;
  text-transform: none;
}
#fb-auditoria-gbp .fb-gbp-sub {
  font-size: 13px;
  color: rgba(18, 21, 28,0.7);
  margin-bottom: 22px;
}
#fb-auditoria-gbp .fb-gbp-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
#fb-auditoria-gbp .fb-gbp-form input {
  flex: 1;
  background: rgba(0,0,0,0.3);
  border: 0.5px solid rgba(0, 0, 0,0.2);
  color: #12151c;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 16px;
  border-radius: 8px;
  outline: none;
}
#fb-auditoria-gbp .fb-gbp-form input:focus { border-color: #1f4fe0; }
#fb-auditoria-gbp .fb-gbp-form button {
  background: #12151c;
  color: #000;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  padding: 12px 22px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 200ms ease;
}
#fb-auditoria-gbp .fb-gbp-form button:hover { transform: translateY(-1px); }
#fb-auditoria-gbp [data-gbp-loader] {
  text-align: center;
  padding: 20px;
  font-size: 12px;
  color: rgba(18, 21, 28,0.6);
  letter-spacing: 0.04em;
}
#fb-auditoria-gbp [data-gbp-loader]::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(18, 21, 28,0.3);
  border-top-color: #1f4fe0;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 8px;
  animation: fb-spin 800ms linear infinite;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }
#fb-auditoria-gbp [data-gbp-result] {
  background: rgba(0, 0, 0,0.04);
  border-radius: 10px;
  padding: 20px 22px;
}
#fb-auditoria-gbp .fb-gbp-score {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #1f4fe0;
  text-align: center;
  margin-bottom: 18px;
}
#fb-auditoria-gbp .fb-gbp-score span {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(18, 21, 28,0.6);
  display: block;
  margin-top: 4px;
}
#fb-auditoria-gbp .fb-bar {
  display: grid;
  grid-template-columns: 130px 1fr 50px;
  gap: 12px;
  align-items: center;
  padding: 7px 0;
  font-size: 12px;
  border-bottom: 0.5px solid rgba(0, 0, 0,0.06);
}
#fb-auditoria-gbp .fb-bar:last-child { border: none; }
#fb-auditoria-gbp .fb-bar__label {
  font-size: 11px;
  color: rgba(18, 21, 28,0.7);
  letter-spacing: 0.02em;
}
#fb-auditoria-gbp .fb-bar__track {
  height: 5px;
  background: rgba(0, 0, 0,0.06);
  border-radius: 100px;
  overflow: hidden;
}
#fb-auditoria-gbp .fb-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #1f4fe0, #d4994a);
  border-radius: 100px;
  width: 0;
  transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
#fb-auditoria-gbp .fb-bar__val {
  text-align: right;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: #12151c;
}
#fb-auditoria-gbp .fb-gbp-cta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 0.5px solid rgba(0, 0, 0,0.08);
  text-align: center;
}
#fb-auditoria-gbp .fb-gbp-cta a {
  display: inline-block;
  background: #1f4fe0;
  color: #000;
  padding: 10px 22px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.hidden { display: none !important; }

/* ===== CHAT DEMO ===== */
#fb-chat-demo {
  background: rgba(0, 0, 0,0.025);
  border: 0.5px solid rgba(0, 0, 0,0.12);
  border-radius: 14px;
  margin: 32px 0;
  overflow: hidden;
}
#fb-chat-demo .fb-chat__header {
  background: rgba(0, 0, 0,0.04);
  padding: 12px 18px;
  border-bottom: 0.5px solid rgba(0, 0, 0,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(18, 21, 28,0.85);
}
#fb-chat-demo .fb-chat__dot {
  width: 8px; height: 8px;
  background: #6aad7a;
  border-radius: 50%;
}
#fb-chat-demo [data-chat-feed] {
  height: 320px;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#fb-chat-demo .fb-chat__bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.45;
}
#fb-chat-demo .fb-chat__bubble.ai {
  background: rgba(18, 21, 28,0.08);
  color: #12151c;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
#fb-chat-demo .fb-chat__bubble.user {
  background: #1f4fe0;
  color: #000;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
#fb-chat-demo .fb-chat__bubble.typing {
  background: rgba(18, 21, 28,0.06);
  padding: 12px 16px;
}
#fb-chat-demo .fb-chat__bubble.typing span {
  display: inline-block;
  width: 6px; height: 6px;
  background: rgba(18, 21, 28,0.5);
  border-radius: 50%;
  margin: 0 1px;
  animation: fb-bounce 1.2s infinite;
}
#fb-chat-demo .fb-chat__bubble.typing span:nth-child(2) { animation-delay: 0.2s; }
#fb-chat-demo .fb-chat__bubble.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes fb-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}
#fb-chat-demo .fb-chat__input {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.3);
  border-top: 0.5px solid rgba(0, 0, 0,0.08);
}
#fb-chat-demo .fb-chat__input input {
  flex: 1;
  background: rgba(0, 0, 0,0.04);
  border: 0.5px solid rgba(0, 0, 0,0.1);
  color: #12151c;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 100px;
  outline: none;
}
#fb-chat-demo .fb-chat__input button {
  background: #1f4fe0;
  color: #000;
  border: none;
  padding: 9px 18px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}