@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --background: 216 50% 8%;
  --foreground: 210 40% 98%;

  --card: 216 45% 12%;
  --card-foreground: 210 40% 98%;

  --popover: 216 45% 10%;
  --popover-foreground: 210 40% 98%;

  --primary: 142 71% 45%;
  --primary-foreground: 216 50% 8%;

  --secondary: 216 40% 16%;
  --secondary-foreground: 210 40% 98%;

  --muted: 216 35% 18%;
  --muted-foreground: 215 20% 65%;

  --accent: 195 90% 50%;
  --accent-foreground: 216 50% 8%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 216 30% 20%;
  --input: 216 30% 20%;
  --ring: 142 71% 45%;

  --radius: 0.75rem;

  /* Custom tokens */
  --gradient-hero: linear-gradient(135deg, hsl(216 50% 8% / 0.9) 0%, hsl(216 50% 8% / 0.7) 50%, hsl(216 50% 8% / 0.5) 100%);
  --gradient-card: linear-gradient(180deg, hsl(216 45% 14%) 0%, hsl(216 45% 10%) 100%);
  --gradient-primary: linear-gradient(135deg, hsl(142 71% 45%) 0%, hsl(142 71% 35%) 100%);
  --shadow-glow: 0 0 40px hsl(142 71% 45% / 0.15);
  --shadow-card: 0 4px 24px hsl(216 50% 4% / 0.4);
}

body {
  font-family: 'Inter', sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Utility classes replacements/extensions */
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
}

.glass-card {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid hsl(var(--border) / 0.5);
  background: var(--gradient-card);
  box-shadow: var(--shadow-card);
}

.glow-effect {
  box-shadow: var(--shadow-glow);
}

.stat-counter {
  font-size: 2.25rem; /* text-4xl */
  font-weight: 800; /* font-extrabold */
  background: linear-gradient(180deg, hsl(var(--foreground)) 0%, hsl(var(--muted-foreground)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (min-width: 768px) {
  .stat-counter {
    font-size: 3rem; /* md:text-5xl */
  }
}

/* Animations */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-fade-up {
  animation: fadeUp 0.6s ease-out forwards;
}

.animate-count {
  animation: countUp 2s ease-out forwards;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes countUp {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* =========================================================
   RD Station embed -> layout "tailwind-like" (escopado)
   ========================================================= */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form {
  padding: 0 !important; /* mata o padding 0 5px da RD */
}

/* 1) GRID no fieldset (substitui o flex da RD) */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__fieldset {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important; /* space-y-6 */
  margin: 0 !important;   /* mata margin-left/right -5px */
}

/* 2) Em telas >= 640px, 2 colunas */
@media (min-width: 640px) {
  #pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__fieldset {
    grid-template-columns: 1fr 1fr !important;
    column-gap: 1rem !important; /* gap-4 */
  }

  /* Nome + Sobrenome lado a lado (1 e 2) */
  #pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__field:nth-child(1),
  #pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__field:nth-child(2) {
    grid-column: span 1 !important;
  }

  /* O resto full width (Email, Telefone, Empresa, Select, Mensagem) */
  #pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__field:nth-child(n+3) {
    grid-column: 1 / -1 !important;
  }
}

/* 3) Field wrapper */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__field {
  width: 100% !important;
  margin: 0 !important;       /* mata margin-bottom: 10px */
  padding: 0 !important;
}

/* 4) Labels */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__label {
  display: block !important;
  margin: 0 0 0.5rem 0 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: inherit !important; /* deixa herdar do teu tema */
}

/* 5) Inputs / Select / Textarea: visual tipo Tailwind */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__input {
  width: 100% !important;
  height: 2.5rem !important; /* h-10 */
  border-radius: 0.375rem !important; /* rounded-md */
  border: 1px solid rgba(148,163,184,.35) !important;
  background: rgba(148,163,184,.12) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.875rem !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* textarea */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps textarea.bricks-form__input {
  height: auto !important;
  min-height: 100px !important;
  resize: vertical !important;
}

/* Placeholder (a RD seta transparente; aqui reativa) */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__input::placeholder {
  color: rgba(148,163,184,.9) !important;
  opacity: 1 !important;
}

/* Focus ring */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__input:focus {
  outline: none !important;
  border-color: rgba(99,102,241,.65) !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,.35) !important;
}

/* 6) Telefone com bandeira (select2): deixa alinhado e com cara igual */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .phone-input-group {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: stretch !important;
}

#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .phone-country {
  width: 4.25rem !important; /* ~68px */
}

#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .phone {
  width: 100% !important;
}

/* Select2 “fake select” (bandeira) */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .select2-container .select2-choice {
  height: 2.5rem !important;
  line-height: 2.5rem !important;
  border-radius: 0.375rem !important;
  border: 1px solid rgba(148,163,184,.35) !important;
  background: rgba(148,163,184,.12) !important;
}

/* 7) Submit: sempre embaixo e full width */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__submit {
  width: 100% !important;
  margin-top: 1.5rem !important;

  background: radial-gradient(1200px 800px at 20% 0%, rgba(255, 255, 255, .06), transparent 55%), rgba(8, 18, 34, .78);
  border: 1px solid rgba(148, 163, 184, .14);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
  backdrop-filter: blur(14px);
  border-radius: 0.75rem;
}

#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .rd-button {
  width: 100% !important;
  max-width: none !important; /* remove max-width 558px */
  height: 3rem !important;    /* h-12 */
  border-radius: 0.375rem !important;
  border: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  background: rgba(99,102,241,1) !important;
  color: #fff !important;
  margin: 0 !important;       /* mata margin-top/bottom da RD */
}

/* hover */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .rd-button:hover {
  filter: brightness(0.92) !important;
}

/* =========================================================
   TEMA DARK / GLASS (cores e fundos) — RD Station
   ========================================================= */

/* 0) (Opcional) Se você tiver um wrapper .glass-card, aplica o glass aqui */
.glass-card {
  background: radial-gradient(1200px 800px at 20% 0%, rgba(255,255,255,.06), transparent 55%),
  rgba(8, 18, 34, .78);
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}

/* 1) Variáveis (facilita micro-ajustes) */
#pagina-comercial-a5aeda1b3dfc4d896257 {
  --fg: rgba(226, 232, 240, .92);         /* texto principal */
  --muted: rgba(148, 163, 184, .78);      /* texto secundário */
  --field-bg: rgba(15, 23, 42, .55);      /* fundo input */
  --field-bg-hover: rgba(15, 23, 42, .65);
  --border: rgba(148, 163, 184, .16);     /* borda input */
  --border-strong: rgba(148, 163, 184, .24);
  --ring: rgba(99, 102, 241, .45);        /* focus ring */
  --ring-border: rgba(99, 102, 241, .65);
  --btn: #22c55e;                         /* green do botão */
  --btn-hover: #16a34a;

  background: radial-gradient(1200px 800px at 20% 0%, rgba(255, 255, 255, .06), transparent 55%), rgba(8, 18, 34, .78);
  border: 1px solid rgba(148, 163, 184, .14);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
  backdrop-filter: blur(14px);
}

/* 2) Labels (branco suave) */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__label {
  color: var(--fg) !important;
  letter-spacing: .1px;
}

#pagina-comercial-a5aeda1b3dfc4d896257 #rd-section-mm21y6pl {
  background: radial-gradient(1200px 800px at 20% 0%, rgba(255, 255, 255, .06), transparent 55%), rgba(8, 18, 34, .78) !important;
  border: none !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .35) !important;
  backdrop-filter: blur(14px) !important;
}

#rd-column-mm21y6pr > div{
  background: radial-gradient(1200px 800px at 20% 0%, rgba(255, 255, 255, .06), transparent 55%), rgba(8, 18, 34, .78) !important;
  border: none !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .35) !important;
  backdrop-filter: blur(14px) !important;
}

/* 3) Inputs/Select/Textarea: dark + glass */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__input {
  background: var(--field-bg) !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;

  /* sensação "pill/soft" como no print */
  border-radius: 0.75rem !important; /* mais arredondado que rounded-md */
  box-shadow:
          inset 0 1px 0 rgba(255,255,255,.06),
          0 10px 25px rgba(0,0,0,.18) !important;
}

#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__input:hover {
  background: var(--field-bg-hover) !important;
  border-color: var(--border-strong) !important;
}

/* placeholder igual ao print */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__input::placeholder {
  color: var(--muted) !important;
  opacity: .85 !important;
}

/* focus */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .bricks-form__input:focus {
  border-color: var(--ring-border) !important;
  box-shadow:
          0 0 0 3px var(--ring),
          inset 0 1px 0 rgba(255,255,255,.06),
          0 12px 28px rgba(0,0,0,.22) !important;
}

/* textarea com “card” maior */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps textarea.bricks-form__input {
  border-radius: 0.9rem !important;
}

/* 4) Select “normal” (não select2) — seta e fundo ok */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps select.bricks-form__input {
  appearance: none;
  background-image:
          linear-gradient(45deg, transparent 50%, var(--muted) 50%),
          linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
          calc(100% - 18px) 50%,
          calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem !important;
}

/* 5) Telefone (select2 bandeira) – casar 100% com o input */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .select2-container .select2-choice {
  background: var(--field-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  box-shadow:
          inset 0 1px 0 rgba(255,255,255,.06),
          0 10px 25px rgba(0,0,0,.18) !important;
}

#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .select2-container .select2-choice:hover {
  background: var(--field-bg-hover) !important;
  border-color: var(--border-strong) !important;
}

/* remove a “seta” default do select2 (RD mexe nisso, mas garantimos) */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .select2-container .select2-choice .select2-arrow {
  background: transparent !important;
  border: 0 !important;
}

/* 6) Botão verde do print */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .rd-button {
  background: var(--btn) !important;
  color: rgba(0,0,0,.85) !important; /* texto escuro como no print */
  border-radius: 0.75rem !important;
  height: 3.25rem !important; /* um pouco mais alto */
  font-weight: 700 !important;
  letter-spacing: .2px;
  box-shadow: 0 16px 35px rgba(34,197,94,.20) !important;
}

#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps .rd-button:hover {
  background: var(--btn-hover) !important;
  filter: none !important;
}

/* 7) Mensagens de erro (se aparecer) */
#pagina-comercial-a5aeda1b3dfc4d896257 #rd-form-mm21y6ps label.error {
  color: #fb7185 !important;
}