/* ========= THEME (cores da paleta do logo) ========= */
:root {
  /* base */
  --bg: #0b1021;
  --bg2: #0e1426;
  --card: #101a32;
  --line: rgba(255, 255, 255, .09);
  --text: #eaf1ff;
  --muted: #a9b6cf;

  /* brand da paleta */
  --brand1: #36d0ff;
  /* ciano claro */
  --brand2: #36bcff;
  --brand3: #4c00c7;
  /* roxo profundo */
  --brand4: #6d43bb;
  --brand5: #be47e1;

  /* gradientes principais */
  --brand: #3ecbff;
  --grad: linear-gradient(90deg, var(--brand1), var(--brand5));
  --grad-soft: linear-gradient(180deg, rgba(62, 203, 255, .08), rgba(190, 71, 225, .06));

  --radius: 20px;
  --shadow: 0 25px 70px rgba(0, 0, 0, .35);
  --header-h: 74px;

  --ff-text: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --ff-title: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --fw-regular: 400;
  --fw-bold: 700;
}

/* ========= RESET BÁSICO ========= */
* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(70% 70% at 0% 0%, rgba(54, 208, 255, .08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  font-family: var(--ff-title);
  font-size: var(--fs-body);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block
}

a {
  color: var(--brand1);
  text-decoration: none
}

.container {
  width: min(1200px, 92%);
  margin-inline: auto
}

/* ========= SEÇÕES ========= */
.section {
  padding: 86px 0 0
}

/* títulos */
h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  margin: .25rem 0 .75rem
}

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  margin: 0
}

.eyebrow {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b9d8ff;
  font-weight: 800;
  font-size: 1.6rem;
  margin: 0 0 8px;
}

.section-hd {
  text-align: center
}

.lead {
  color: #fff;
  font-size: 19px;
  text-align: center
}

.lead.muted {
  color: var(--muted)
}

.lead-text {
  text-align: center;
  font-size: 20px
}

/* ========= REVEAL ========= */
.reveal:not(.on) {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  filter: blur(6px);
}

.reveal.on {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity .9s ease, transform .9s ease, filter .9s ease;
  transition-delay: var(--d, 0s);
}



/* ========= HEADER ========= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: grid;
  align-items: center;
  background: rgba(11, 17, 35, .55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.logo img {
  height: 44px
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.6rem
}

.nav-menu {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0
}

.nav-menu a {
  color: #d9e7ff;
  font-weight: 600;
  font-size: 20px;
}

.nav-menu a:hover {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(54, 208, 255, .45);
}



/* ========= BOTÕES ========= */
.btn {
  display: inline-grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: var(--shadow);
}

/* ========= HERO ========= */
.hero {
  position: relative;
  min-height: 82svh;
  display: grid;
  align-items: center;
  overflow: clip
}

.hero-media {
  position: absolute;
  inset: 0;
  background: var(--hero, url('')) center/cover no-repeat;
  filter: saturate(110%) contrast(102%) brightness(80%)
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 10, 18, .55), rgba(7, 10, 18, .82))
}

.hero-grid {
  position: relative
}

.hero-card {
  margin: 0 auto;
  width: min(920px, 100%);
  padding: 28px;
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  background: var(--grad-soft);
  text-align: center;
}

.hero-card .lead {
  font-size: 22px;
  margin: 18px auto 14px;
  max-width: 54ch
}

.side-logo {
  width: 160px;
  margin: 0 auto 8px
}

/* ========= BLOCO MVV ========= */
#mvvs {
  padding: 30px 0
}

#mvvs h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px
}

#mvvs .values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 40px
}

#mvvs .card {
  background: #141c2c;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--line)
}

#mvvs .card h3 {
  margin-top: 0;
  color: #9fd8ff
}

#mvvs .card ul {
  margin: 0;
  padding-left: 20px;
  line-height: 1.6
}

/* ========= TÍTULOS PREMIUM (Assessoria + Coordenação) ========= */
.title-hero {
  display: flex;
  gap: 18px;
  margin-top: 8px
}



.hero-card h2 {
  margin: 6px 0 10px;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: .3px;
  background: linear-gradient(90deg, #ffffff, #e8f0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-card .underline {
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: var(--grad);
  opacity: .95;
  margin: 2px auto 12px
}

/* ========= CATÁLOGO DE SERVIÇOS ========= */
.services-catalog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}



.svc-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .35);
  border-color: rgba(255, 255, 255, .14)
}

.svc-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(180deg, rgba(7, 10, 18, .15), rgba(7, 10, 18, .45)), var(--img) center/cover no-repeat;
}

.svc-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 40% at 20% 0%, rgba(109, 67, 187, .22), transparent 60%);
  opacity: 0;
  transition: opacity .25s ease;
}

.svc-card:hover .svc-media::after {
  opacity: .35
}

.svc-body {
  padding: 16px 16px 18px
}

.svc-body h3 {
  margin: 0 0 6px;
  font-size: 1.06rem;
  letter-spacing: .02em
}

.svc-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: .96rem
}

/* ========= DIFERENCIAIS ========= */
#diferenciais .lead {
  color: var(--muted);
  max-width: 820px;
  margin: 28px auto 0;
  text-align: center
}

.features-pro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 26px;
}



.feat-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
  isolation: isolate;
}

.feat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .32;
  pointer-events: none;
}

.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .35);
  border-color: rgba(255, 255, 255, .14)
}

.feat-card h3 {
  margin: 0 0 6px;
  font-size: 1.06rem;
  letter-spacing: .02em
}

.feat-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: .95rem
}

.trust-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 18px
}

/* .badge-item {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: #dbe6ff;
  font-size: .86rem;
  letter-spacing: .04em;
} */

/* Botão dos selos continua com a sua aparência, só reforça o hover */
.badge-item {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .10);
  color: #dbe7ff;
  font-size: 20px;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.badge-item:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .18);
}

/* ===== MODAL ===== */
.rx-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 90;
}

.rx-modal.is-open {
  display: block;
}

.rx-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, .55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .28s ease;
}

.rx-modal__dialog {
  position: relative;
  width: min(820px, 92vw);
  margin: 7vh auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .55);
  color: #e8f0ff;
  transform: translateY(12px) scale(.985);
  opacity: 0;
  transition: transform .32s ease, opacity .32s ease;
}

.rx-modal.is-open .rx-modal__backdrop {
  opacity: 1;
}

.rx-modal.is-open .rx-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.rx-modal__header {
  padding: 22px 22px 0;
}

.rx-modal__eyebrow {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  opacity: .75;
  margin: 0 0 6px;
}

.rx-modal__title {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  background: linear-gradient(90deg, #36bcff, #4c00c7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rx-modal__content {
  padding: 12px 22px 22px;
}

.rx-modal__lead {
  margin: 0 0 14px;
  color: #cfe0ff;
}

.rx-modal__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 10px;
}

.rx-modal__bullets li {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .10);
  padding: 10px 12px;
  border-radius: 12px;
}

.rx-modal__cta {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.btn.btn-grad {
  background: linear-gradient(90deg, #36bcff, #4c00c7);
  border: none;
  color: #0b1220;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(76, 0, 199, .25);
}

.btn.btn-grad:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.rx-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: #dbe7ff;
  cursor: pointer;
}

/* === PATCH: modal mais legível + CTA central + animação === */

/* Backdrop mais escuro */
.rx-modal__backdrop{
  background: rgba(5, 8, 16, .72);   /* antes .55 */
  backdrop-filter: blur(8px);        /* +blur */
}

/* Card com vidro mais opaco para leitura */
.rx-modal__dialog{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)),
    rgba(10, 16, 28, .88);           /* base mais escura */
  border-color: rgba(255,255,255,.12);
}

/* Título um pouco mais destacado */
.rx-modal__title{
  filter: drop-shadow(0 2px 14px rgba(76,0,199,.18));
}

/* Bullets mais contrastadas */
.rx-modal__bullets li{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: #eaf2ff;
}

/* CTA centralizado */
.rx-modal__cta{
  justify-items: center; /* centraliza */
}

/* Botão com largura agradável em desktop e mobile */
.btn.btn-grad{
  min-width: clamp(220px, 60%, 360px);
  text-align: center;
  color: #fff;
}

/* Animação de atenção (pulso suave + brilho correndo) */
.btn-attn{
  position: relative;
  animation: rx-pulse 2.4s ease-in-out infinite 1s;
  overflow: hidden;
}
.btn-attn::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  transform: translateX(-120%);
  animation: rx-shine 2.8s ease-in-out infinite 1.2s;
  pointer-events: none;
}

@keyframes rx-pulse{
  0%, 100% { box-shadow: 0 10px 30px rgba(76,0,199,.25); transform: translateY(0); }
  50%      { box-shadow: 0 16px 44px rgba(76,0,199,.36); transform: translateY(-1px); }
}
@keyframes rx-shine{
  0%   { transform: translateX(-120%) skewX(-12deg); }
  50%  { transform: translateX(120%)  skewX(-12deg); }
  100% { transform: translateX(120%)  skewX(-12deg); }
}

/* Botão fechar com estado hover/active melhores */
.rx-modal__close:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.rx-modal__close:active{
  transform: scale(.98);
}

/* --- PATCH: close sempre clicável --- */
.rx-modal__dialog{
  position: relative;
  overflow: visible; /* evita que algo corte o botão */
}

.rx-modal__close{
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  display: grid; place-items: center; /* clique no centro! */
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #dbe7ff;
  cursor: pointer;
  z-index: 5;                 /* acima de qualquer overlay interno */
  line-height: 1;             /* evita áreas “mortas” no texto */
}

/* impede que ícones internos “roubem” o clique */
.rx-modal__close > * { pointer-events: none; }

/* visual states */
.rx-modal__close:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
.rx-modal__close:active{ transform: scale(.98); }

/* ===== CTA tech/premium ===== */
.cta-tech{
  /* paleta do logo */
  --g1: #36bcff;
  --g2: #6d43bb;
  --g3: #4c00c7;

  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 14px 22px;
  min-width: clamp(260px, 66%, 520px);
  text-align: center;

  font-weight: 800;
  letter-spacing: .2px;
  color: #0b1220;

  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  background-size: 200% 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;

  box-shadow:
    0 12px 34px rgba(76,0,199,.30),
    0 2px 0 rgba(255,255,255,.06) inset;

  position: relative;
  isolation: isolate; /* para os efeitos não vazarem */
  animation: ctaSlide 6s ease-in-out infinite;
}

/* Glow sutil ao redor */
.cta-tech::before{
  content:"";
  position:absolute; inset:-8px;
  border-radius: 18px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(76,0,199,.22), transparent 60%);
  opacity:.65;
  z-index:-1;
  filter: blur(12px);
}

/* “sheen” correndo na diagonal */
.cta-tech::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 60%);
  transform: translateX(-130%) skewX(-18deg);
  border-radius: 14px;
  animation: ctaSheen 3.2s ease-in-out infinite 1.2s;
  pointer-events:none;
}

.cta-tech:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 16px 46px rgba(76,0,199,.42),
    0 2px 0 rgba(255,255,255,.08) inset;
}
.cta-tech:active{ transform: translateY(0); }

/* animações */
@keyframes ctaSlide{
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
@keyframes ctaSheen{
  0%   { transform: translateX(-130%) skewX(-18deg); }
  55%  { transform: translateX(130%)  skewX(-18deg); }
  100% { transform: translateX(130%)  skewX(-18deg); }
}

/* texto abaixo do CTA */
.cta-subcopy{
  margin: 14px auto 0;
  max-width: 42ch;
  text-align: center;
  color: #cfe0ff;
  opacity: .96;
}

/* acessibilidade: se o usuário desativou animações */
@media (prefers-reduced-motion: reduce){
  .cta-tech,
  .cta-tech::after{
    animation: none !important;
    background-position: 50% 50%;
  }
}



@media (max-width:520px) {
  .rx-modal__dialog {
    margin: 5vh auto;
  }
}


/* ========= CONTATO ========= */
#contato .section-hd.center {
  text-align: center
}

#contato .section-hd.center .lead {
  max-width: 760px;
  margin: 28px auto 0
}

.contact-main {
  display: flex;
  justify-content: center;
  margin-top: 16px
}


/* Info Rail */
.contact-rail {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 0;
  position: relative;
  overflow: hidden;
}

.contact-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 16px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .3;
  pointer-events: none;
}

.rail-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px 14px;
  padding: 12px 40px;
  width: min(780px, 100%);
  border-bottom: 1px dashed rgba(255, 255, 255, .08);
}

.rail-row:last-of-type {
  border-bottom: 0
}

.rail-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(54, 208, 255, .14);
  color: var(--brand1);
  border: 1px solid var(--line)
}

.rail-ico svg {
  width: 20px;
  height: 20px
}

.rail-body h3 {
  margin: 0 0 4px;
  font-size: 1rem
}

.rail-body p {
  margin: 0;
  color: var(--muted)
}

.rail-body a {
  color: #dbe6ff
}

.rail-actions {
  display: flex;
  gap: 8px;
  align-items: center
}

.chip {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chip.ghost {
  background: transparent;
  color: #dbe6ff;
  border: 1px solid var(--line)
}

/* socials internos */
.socials {
  display: flex;
  gap: 8px;
  margin-top: 2px
}

.socials a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  color: #dbe6ff
}

.socials a svg {
  width: 18px;
  height: 18px
}

.small {
  font-size: 20px;
  text-align: center
}

/* ===== WhatsApp: entrada + halo/pulse + nudge ===== */
.float-whats{
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 60;
  display: inline-grid; place-items: center;
  width: 60px; height: 60px;
  border-radius: 999px;
  background: #25D366; /* cor base do botão; o ícone é a imagem */
  box-shadow: 0 14px 32px rgba(0,0,0,.35);
  isolation: isolate;
  /* entrada */
  animation: wpp-pop-in .6s cubic-bezier(.2,.8,.2,1) .2s both;
}

/* ícone */
.icon-wpp{ width: 44px; height: 44px; }

/* halo suave (brilho) */
.float-whats::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 50%, rgba(37,211,102,.45), transparent 70%);
  filter: blur(6px);
  opacity: .0;
  animation: wpp-glow 2.4s ease-in-out .8s infinite;
  z-index: -1;
}

/* anel “pulse” expandindo */
.float-whats::after{
  content:"";
  position:absolute;
  width: 100%; height: 100%;
  border-radius: inherit;
  border: 2px solid rgba(37,211,102,.55);
  transform: scale(1);
  opacity: 0;
  animation: wpp-pulse 2.4s ease-out 1.2s infinite;
}

/* hover: eleva e dá um leve zoom */
.float-whats:hover{
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.05);
  cursor: pointer;
}

/* Keyframes */
@keyframes wpp-pop-in{
  0%   { transform: translateY(12px) scale(.85); opacity:0 }
  60%  { transform: translateY(0)    scale(1.06); opacity:1 }
  100% { transform: translateY(0)    scale(1) }
}
@keyframes wpp-glow{
  0%, 100% { opacity: .0 }
  40%      { opacity: .45 }
}
@keyframes wpp-pulse{
  0%   { transform: scale(1);   opacity: .0 }
  30%  { transform: scale(1.25);opacity: .35 }
  80%  { transform: scale(1.6); opacity: .0 }
  100% { transform: scale(1.6); opacity: .0 }
}

/* nudge (balancinho curto) — ativado por classe .nudge via JS */
@keyframes wpp-nudge{
  0% { transform: translateY(0) rotate(0deg) }
  20%{ transform: translateY(-2px) rotate(-6deg) }
  40%{ transform: translateY(0) rotate(6deg) }
  60%{ transform: translateY(-1px) rotate(-3deg) }
  80%{ transform: translateY(0) rotate(3deg) }
  100%{ transform: translateY(0) rotate(0deg) }
}
.float-whats.nudge{
  animation: wpp-nudge .6s ease both, wpp-pop-in .6s cubic-bezier(.2,.8,.2,1) .2s both;
}




/* Lead Capture */
/* ===========================
   LEAD CAPTURE — CARD PRO
   =========================== */

/* Card centralizado e com largura limitada */
.lead-card{
  max-width: 880px;
  margin: 28px auto;
  padding: 22px 22px 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow:
    0 10px 34px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.04) inset;
  overflow: hidden; /* segura brilhos do CTA dentro do card */
}

/* Título e subtítulo */
.lead-title{
  margin: 0 0 6px;
  text-align: center;
  font-weight: 800;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  letter-spacing: .2px;
}
.lead-sub{
  margin: 0 0 18px;
  text-align: center;
  color: #cfe0ff;
  opacity: .95;
}

/* Campos empilhados (nome em cima, telefone embaixo) */
.lead-grid{
  display: grid;
  grid-template-columns: 1fr; /* forçado 1 coluna */
  gap: 12px;
}

.lead-card label{
  display: grid;
  gap: 6px;
  font-size: 1rem;
  color: #e6eefc;
}

.lead-card input[type="text"],
.lead-card input[type="tel"]{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0c1426;
  border: 1px solid #1a2a4a;
  color: #e6eefc;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.lead-card input::placeholder{ color: #9db4d4; opacity: .85; }
.lead-card input:focus{
  border-color: #36bcff;
  box-shadow: 0 0 0 3px rgba(54,188,255,.16);
  background: #0d1830;
}

/* Consentimento */
.lead-consent{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 10px;
  line-height: 1.35;
  color: #d9e6ff;
}
.lead-consent input{
  width: 18px; height: 18px;
  margin: 0;
  transform: none;            /* remove ajuste anterior */
  flex: 0 0 auto;
  accent-color: #36bcff;      /* mantém cor do check */
  transform: translateY(1px);
}

.lead-consent span{
  line-height: 1.2;           /* melhora leitura em 2 linhas */
}
.lead-consent span{
  line-height: 1.2;           /* melhora leitura em 2 linhas */
}
/* Ações (botões) centralizadas */
.lead-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* CTA tecnológico — usa seu gradiente e animações, mas confinado */
.cta-tech{
  --g1: #36bcff;
  --g2: #6d43bb;
  --g3: #4c00c7;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: min(440px, 100%);     /* nunca vaza */
  padding: 14px 22px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);

  letter-spacing: .2px;
  color: #fff;
  text-align: center;

  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  background-size: 200% 100%;
  box-shadow:
    0 12px 32px rgba(76,0,199,.28),
    0 2px 0 rgba(255,255,255,.06) inset;

  position: relative;
  isolation: isolate;
  animation: ctaSlide 6s ease-in-out infinite;
}
.cta-tech::after{
  content:"";
  position:absolute; inset:0;
  border-radius: 14px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 60%);
  transform: translateX(-130%) skewX(-18deg);
  animation: ctaSheen 3.2s ease-in-out infinite 1.2s;
  pointer-events:none;
}
.cta-tech:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    0 16px 44px rgba(76,0,199,.4),
    0 2px 0 rgba(255,255,255,.08) inset;
}
.cta-tech:active{ transform: translateY(0); }

/* Botão secundário */
.btn.ghost{
  min-width: 240px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  color: #cfe0ff;
  background: transparent;
  text-align: center;
}
.btn.ghost:hover{ border-color: rgba(255,255,255,.26); }

/* Mensagens (status) */
.lead-msg{
  min-height: 20px;
  margin-top: 8px;
  text-align: center;
  color: #9fd7ff;
}
.lead-msg.error{ color: #ff9f9f; }

/* Animações CTA */
@keyframes ctaSlide{
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
@keyframes ctaSheen{
  0%   { transform: translateX(-130%) skewX(-18deg); }
  55%  { transform: translateX(130%)  skewX(-18deg); }
  100% { transform: translateX(130%)  skewX(-18deg); }
}

/* Acessibilidade: sem animação caso usuário prefira */
@media (prefers-reduced-motion: reduce){
  .cta-tech, .cta-tech::after{ animation: none !important; }
}

/* Responsivo refinado */
@media (max-width: 620px){
  .lead-card{ padding: 18px 16px; }
  .btn.ghost{ min-width: 100%; }
  .cta-tech{ width: 100%; }
}


/* Força o consentimento a usar flex (e não grid) */
.lead-card label.lead-consent{
  display: flex !important;
  align-items: center;       /* centraliza verticalmente checkbox + texto */
  gap: 10px;
  margin: 12px 0 10px;
}

/* Checkbox sem deslocamentos */
.lead-card label.lead-consent input{
  width: 18px;
  height: 18px;
  margin: 0;                 /* zera qualquer margem herdada */
  transform: none;
  flex: 0 0 auto;
  accent-color: #36bcff;
}

/* Texto alinhado e com boa leitura */
.lead-card label.lead-consent span{
  line-height: 1.25;
  display: block;
}






/* ========= FOOTER SLIM ========= */
.site-footer.slim {
  border-top: 1px solid var(--line);
  background: #0b1222;
  padding: 16px 0;
  color: #b9c7e6;
}

.f-row {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 24px
}

.f-nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

.f-nav a {
  color: #9ec2ff;
  font-size: 1rem
}

.f-nav a:hover {
  text-decoration: underline
}

.f-copy {
  margin: 0;
  font-size: .92rem;
  color: #9fb0d1
}


/* RESPONSIVIDADE  */

@media (prefers-reduced-motion:reduce) {
  .reveal:not(.on) {
    opacity: 0;
    transform: none;
    filter: none
  }

  .reveal.on {
    transition: none
  }

  .float-whats,
    .float-whats::before,
    .float-whats::after {
      animation: none !important
    }
  
    .float-whats:hover {
      transform: none;
      filter: none
    }
}

@media (max-width:1024px) {
  .features-pro {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:1000px) {
  .services-catalog {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:980px) {
  .contact-main {
    flex-direction: column
  }
}

@media (max-width:900px) {
  .title-hero {
    flex-direction: column
  }
}

/* mobile menu */
@media (max-width:760px) {
  .nav-toggle {
    display: inline-block
  }

  .nav-menu {
    display: none;
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: #0d172b;
    border-top: 1px solid var(--line);
    padding: 20px;
    flex-direction: column
  }

  .nav-menu.show {
    display: flex
  }
}

@media (max-width:640px) {
  .services-catalog {
    grid-template-columns: 1fr
  }

  .features-pro {
    grid-template-columns: 1fr
  }
}

/* mobile: um pouco menor */
@media (max-width:540px) {
  .float-whats {
      width: 56px;
      height: 56px;
      right: 14px;
      bottom: 14px;
    }
  
    .icon-wpp {
      width: 40px;
      height: 40px;
    }

  /* 2 colunas: ícone + texto; o botão desce */
  .rail-row {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px 12px;
    padding: 12px 16px;
  }

  /* botão ocupa a linha inteira abaixo */
  .rail-actions {
    grid-column: 1 / -1;      /* expande nas 2 colunas */
    justify-self: center;      /* alinha à esquerda (ou use center/right) */
    margin-top: 8px;
  }

  /* ajusta um pouco os tamanhos */
  .rail-ico {
    width: 38px; height: 38px;
  }
  .rail-ico svg {
    width: 18px; height: 18px;
  }

  /* redes sociais: quebrar linha se faltar espaço */
  .socials {
    flex-wrap: wrap;
    gap: 8px;
  }
  .socials a {
    width: 34px; height: 34px;
  }

  



}