/* ============================================================
   MSN TALK — LANDING PAGE
   Identidade CONNECT
   ============================================================ */

:root{
  /* Cores de marca */
  --blue:        #0069f0;
  --blue-dark:   #0039a0;
  --blue-light:  #4a92ff;
  --blue-bg:     #eaf2ff;
  --green:       #00cc3e;
  --green-dark:  #00a833;
  --green-bg:    #e7fbed;

  --ink:         #0b1f3a;
  --text:        #0b1f3a;
  --text-soft:   #556680;
  --line:        #dbe6f7;

  --bg:          #ffffff;
  --bg-alt:      #f2f7ff;
  --navy:        #051735;

  /* Tipografia */
  --font: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1280px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;

  /* Sombras */
  --sh-sm: 0 2px 8px rgba(9,30,66,.06);
  --sh-md: 0 14px 34px -12px rgba(9,30,66,.22);
  --sh-lg: 0 30px 60px -22px rgba(3,29,77,.45);

  /* Animações */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.85,0,.15,1);
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,picture,svg{display:block;max-width:100%}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}

h1,h2,h3{line-height:1.15;letter-spacing:-.01em}

.ico{width:1.15em;height:1.15em;flex:none}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}

/* ── Botões ────────────────────────────────────────────── */
.btn{
  --btn-bg:var(--green);
  --btn-bg-2:var(--green-dark);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  font-weight:600;
  line-height:1;
  border:none;
  border-radius:14px;
  padding:1em 1.6em;
  cursor:pointer;
  white-space:nowrap;
  text-align:center;
  transition:transform .25s var(--ease-in-out), box-shadow .3s var(--ease-out), background-color .25s var(--ease-out);
}

.btn--whats,
.btn--primary{
  background:linear-gradient(135deg,var(--btn-bg),var(--btn-bg-2));
  color:#fff;
  box-shadow:0 10px 24px -8px rgba(0,204,62,.7);
}
.btn--whats:hover,
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -10px rgba(0,204,62,.85);
}
.btn--whats:active,
.btn--primary:active{transform:translateY(0)}

.btn--sm{padding:.72em 1.15em;font-size:.9rem;border-radius:11px}
.btn--lg{padding:1.15em 2em;font-size:1.06rem;border-radius:16px}
.btn--block{display:flex;width:100%}

/* ── Header ────────────────────────────────────────────── */
.header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--ease-out), border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.header.scrolled{
  box-shadow:0 8px 26px -16px rgba(9,30,66,.35);
  border-color:var(--line);
}
.header__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  min-height:76px;
}
.logo{justify-self:start;display:inline-flex}
.logo__img{height:42px;width:auto}

.header__nav{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:34px;
}
.header__nav a{
  position:relative;
  font-weight:500;
  font-size:.95rem;
  color:var(--text-soft);
  padding:6px 2px;
  transition:color .2s var(--ease-out);
}
.header__nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  border-radius:2px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease-out);
}
.header__nav a:hover{color:var(--blue-dark)}
.header__nav a:hover::after{transform:scaleX(1)}

.header__actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:12px;
}

.header__burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}
.header__burger span{
  display:block;
  width:20px;height:2px;
  margin-inline:auto;
  border-radius:2px;
  background:var(--ink);
  transition:transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.header__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.header__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.header__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Hero ──────────────────────────────────────────────── */
.hero{
  position:relative;
  overflow:hidden;
  display:grid;
  align-content:center;
  min-height:clamp(440px,42vw,680px);
  /* Imagem de fundo aplicada "crua": sem overlay, gradiente, blur ou filtro por cima */
  background-color:var(--blue-dark);
  /* Banner do DESKTOP/TABLET — NÃO REMOVER. A imagem vertical é aplicada
     apenas no mobile (≤760px), que sobrescreve só este background-image. */
  background-image:url("images/acc73b49-1362-4652-a0f7-617c3b2ab4a9.webp");
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  color:#fff;
  padding:clamp(40px,5.5vw,76px) 0 clamp(52px,6vw,84px);
}
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:clamp(22px,2.6vw,34px);
}
/* Texto sobre a imagem: coluna confortável de leitura */
.hero__content{max-width:38em}

.hero__title{
  font-size:clamp(2.05rem,4.4vw,3.3rem);
  font-weight:700;
  margin:.45em 0 .36em;
  letter-spacing:-.02em;
}
.hero__sub{
  font-size:clamp(1rem,1.5vw,1.14rem);
  color:#cfe0ff;
  max-width:34em;
}

.hero__cta{margin-top:1.4em}

.hero__benefits{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px 30px;
  margin-top:clamp(12px,1.4vw,18px);
  padding-top:clamp(10px,1.2vw,14px);
  border-top:1px solid rgba(255,255,255,.14);
}
.hero__benefits li{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.7em;
  font-size:.94rem;
  font-weight:500;
  color:#dbe9ff;
}
.hero__benefit-ico{
  flex:none;
  display:grid;
  place-items:center;
  width:38px;height:38px;
  border-radius:11px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#7dffab;
  font-size:1.15rem;
}


/* ── Seção: Simulação → Captura ────────────────────────── */
.simulador{
  position:relative;
  z-index:2;
  display:flow-root; /* contém a margem negativa do .sim-flow (evita faixa clara sobre o hero) */
  background-color:var(--bg-alt);
  /* Textura sutil (CSS puro, sem imagens externas):
     1) grade de pontos em azul da marca
     2) brilho radial suave no topo
     3) linhas diagonais finíssimas (leve sensação de trama) */
  background-image:
    radial-gradient(circle, rgba(0,105,240,.10) 1px, transparent 1.5px),
    repeating-linear-gradient(45deg, rgba(0,105,240,.045) 0 1px, transparent 1px 13px),
    radial-gradient(120% 90% at 50% 0%, rgba(0,204,62,.06), transparent 65%);
  background-size:22px 22px, auto, 100% 100%;
  background-position:0 0, 0 0, 50% 0;
  padding:0 0 clamp(48px,6vw,78px);
  scroll-margin-top:clamp(40px,5vw,72px);
}
/* Em telas muito pequenas a trama fina pode serrilhar — simplifica para só os pontos */
@media (max-width:760px){
  .simulador{
    background-image:
      radial-gradient(circle, rgba(0,105,240,.10) 1px, transparent 1.5px),
      radial-gradient(120% 90% at 50% 0%, rgba(0,204,62,.06), transparent 65%);
    background-size:20px 20px, 100% 100%;
    background-position:0 0, 50% 0;
  }
}
.sim-flow{
  display:flex;
  flex-direction:column;
  gap:clamp(14px,1.4vw,18px);
  margin-top:-40px; /* sobe a caixa 40px sobre o azul do hero */
}
.sim-card{
  width:100%;
  margin-inline:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--sh-md);
  padding:clamp(26px,3.6vw,46px);
}
/* Garante que a etapa oculta continue escondida mesmo com display:grid do .lead-card */
.sim-card[hidden]{display:none}
.sim-steps{display:flex;gap:8px;margin-bottom:24px}
.sim-steps__dot{
  height:6px;width:44px;border-radius:999px;
  background:#dfe8f7;
  transition:background-color .4s var(--ease-out);
}
.sim-steps__dot.is-active{background:var(--blue)}
.sim-steps__dot.is-done{background:var(--green)}

.sim-card__title{
  font-size:clamp(1.5rem,3.2vw,2.1rem);
  font-weight:700;
  color:var(--blue-dark);
  letter-spacing:-.01em;
  line-height:1.2;
}
.sim-card__text{margin-top:.7em;color:var(--text-soft);font-size:clamp(1rem,1.4vw,1.1rem);max-width:58ch}
.sim-card__microcopy{
  margin-top:.55em;
  font-size:.85rem;
  color:#8496b3;
}

/* Calculadora — protagonismo nos campos e no botão */
.calc-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto; /* 1: labels · 2: inputs · 3: erros */
  gap:.45em 22px;
  margin-top:1.7em;
  align-items:start;
}
/* Labels de tamanhos diferentes (uma quebra em 2 linhas, a outra não)
   empurravam os inputs para alturas distintas. Com display:contents, label
   e input deixam de ser caixas isoladas e viram itens da MESMA grade:
   as duas labels ocupam a linha 1 e os dois inputs, a linha 2 — sempre alinhados. */
.calc-row .field{display:contents}
.calc-row .field label{grid-row:1;align-self:start}
.calc-row .field input{grid-row:2;align-self:start}
.calc-row .field .field__error{grid-row:3}
/* Fallback: em telas médias os 3 campos ficam apertados. Usamos 2 colunas
   na 1ª linha e o 3º campo ocupando a largura toda na 2ª linha. */
@media (max-width:1060px){
  .calc-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc-row .field:nth-child(3) label{grid-column:1 / -1;grid-row:4}
  .calc-row .field:nth-child(3) input{grid-column:1 / -1;grid-row:5}
  .calc-row .field:nth-child(3) .field__error{grid-column:1 / -1;grid-row:6}
}
.calc-card .field label{font-size:1rem;font-weight:600}
.calc-card .field input{
  padding:1.05em 1.15em;
  font-size:1.06rem;
  border-radius:14px;
  border-color:#cbdcf5;
}
/* Nota metodológica: registra a tarifa de referência, mas com peso visual
   discreto — não é a mensagem principal da calculadora. */
.calc-note{
  display:flex;
  align-items:flex-start;
  gap:.55em;
  margin-top:1.15em;
  color:#8496b3;
  font-size:.82rem;
  line-height:1.5;
}
.calc-note svg{width:15px;height:15px;flex:none;margin-top:.15em;color:#9aabc6}
.calc-note strong{color:#556680;font-weight:600}

/* Captura — explicação à esquerda, campos à direita */
.lead-card{
  display:grid;
  grid-template-columns:minmax(0,.76fr) minmax(0,1.24fr);
  gap:clamp(18px,2.6vw,38px);
  align-items:stretch;
}
/* Coluna de texto do card de contato: cresce e se distribui
   verticalmente para preencher toda a altura do card. */
.lead-card__intro{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(14px,1.7vw,24px);
}
.lead-card__intro .sim-steps{margin-bottom:0}
.lead-card__intro .sim-card__title{
  font-size:clamp(1.5rem,3.1vw,2.15rem);
  line-height:1.22;
}
.lead-card__intro .sim-card__text{
  margin-top:0;
  font-size:clamp(1.05rem,1.5vw,1.2rem);
}
.lead-card__intro .sim-card__microcopy{
  margin-top:0;
  font-size:clamp(.9rem,1.15vw,.98rem);
}
.lead-card .field{margin-bottom:.8em}

.field{display:flex;flex-direction:column;gap:.45em;margin-bottom:1em}
.field label{
  font-weight:600;
  font-size:.95rem;
  color:var(--ink);
}
.field input{
  width:100%;
  padding:.92em 1.05em;
  border:1.6px solid #d6e2f4;
  border-radius:12px;
  background:#fbfdff;
  transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out);
}
.field input::placeholder{color:#9aabc6}
.field input:hover{border-color:#c2d4ef}
.field input:focus{
  outline:none;
  border-color:var(--blue);
  background:#fff;
  box-shadow:0 0 0 4px rgba(0,105,240,.14);
}
.field__error{
  display:none;
  font-size:.82rem;
  color:#d92d20;
  font-weight:500;
}
.field.has-error input{border-color:#f0a9a3;background:#fff6f5}
.field.has-error .field__error{display:block}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 16px;
}
.field--full{grid-column:1 / -1}

.sim-card .btn--block{margin-top:1.4em}
.calc-card .btn--block{margin-top:1.5em}

/* ── Seção: Diagnóstico / Resultado ────────────────────── */
.resultado{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(0,105,240,.07), rgba(0,105,240,0) 70%),
    #fff;
  /* Base mais enxuta: reduz o vazio entre o diagnóstico e a seção ponte */
  padding:clamp(48px,5.4vw,78px) 0 clamp(28px,3.2vw,46px);
}
.section__header{
  max-width:760px;
  margin:0 auto clamp(38px,5vw,60px);
  text-align:center;
}
.section__title{
  font-size:clamp(1.65rem,3.8vw,2.6rem);
  font-weight:700;
  color:var(--ink);
}
.section__subtitle{
  margin-top:.7em;
  color:var(--text-soft);
  font-size:clamp(1rem,1.6vw,1.12rem);
}

.result-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,28px);
}
.result-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(28px,3.4vw,44px);
  box-shadow:var(--sh-md);
  overflow:hidden;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.result-card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light));
}
.result-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.result-card__icon{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:54px;height:54px;
  border-radius:16px;
  background:var(--blue-bg);
  color:var(--blue);
  font-size:1.5rem;
  margin-bottom:20px;
}
.result-card__label{
  display:block;
  font-size:.98rem;
  font-weight:600;
  color:var(--text-soft);
  margin-bottom:.35em;
}
.result-card__value{
  display:block;
  font-size:clamp(1.95rem,4vw,2.8rem);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--ink);
  line-height:1.08;
}
/* Custo estimado — laranja (atenção) */
.result-card--warn{
  background:linear-gradient(160deg,#fff8f1,#ffedd5);
  border-color:#f6c98b;
}
.result-card--warn::before{background:linear-gradient(90deg,#ea580c,#fbbf24)}
.result-card--warn .result-card__icon{background:#ffe1c2;color:#c2410c}
.result-card--warn .result-card__label{color:#9a5b1e}
.result-card--warn .result-card__value{color:#c2410c}

/* Impacto em 12 meses — vermelho (custo alto) */
.result-card--danger{
  background:linear-gradient(150deg,#991b1b,#dc2626);
  border-color:transparent;
  color:#fff;
  box-shadow:0 18px 40px rgba(220,38,38,.28);
}
.result-card--danger::before{background:linear-gradient(90deg,#fff,rgba(255,255,255,.25))}
.result-card--danger .result-card__icon{background:rgba(255,255,255,.16);color:#fff}
.result-card--danger .result-card__label{color:#ffd7d7}
.result-card--danger .result-card__value{color:#fff}

/* Perfil da operação — resume, abaixo dos cards, os dados informados
   na simulação (atendimentos, mensagens e usuários/atendentes) */
.result-profile{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 14px;
  margin-top:clamp(26px,3.4vw,40px);
}
.result-profile li{
  display:inline-flex;
  align-items:baseline;
  gap:.5em;
  padding:.6em 1.1em;
  border-radius:999px;
  background:var(--blue-bg);
  border:1px solid #d3e3ff;
  font-size:.9rem;
  color:var(--text-soft);
}
.result-profile strong{color:var(--blue-dark);font-weight:700;font-size:1.05rem}

/* Transição do diagnóstico → MSN Talk: o resultado não é o fim da experiência */
.result-cta{
  display:grid;
  justify-items:center;
  gap:.7em;
  text-align:center;
  max-width:800px;
  /* Refinamento: encosta nos cards de resultado e enxuga ~20% da altura,
     para ler como continuação dos cards e não como seção isolada. */
  margin:clamp(16px,2vw,24px) auto 0;
  padding:clamp(20px,2.5vw,32px) clamp(20px,3vw,34px);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,#f4f8ff,#e3eeff);
  border:1px solid #d3e3ff;
  box-shadow:var(--sh-sm);
}
.result-cta__kicker{
  justify-self:center;
  display:inline-block;
  padding:.5em 1.05em;
  border-radius:999px;
  background:#fff;
  border:1px solid #d3e3ff;
  color:var(--blue-dark);
  font-size:.86rem;
  font-weight:700;
  line-height:1.3;
}
.result-cta__title{
  font-size:clamp(1.35rem,3vw,2rem);
  font-weight:700;
  color:var(--blue-dark);
  letter-spacing:-.015em;
  line-height:1.2;
  max-width:30ch;
}
.result-cta__sub{
  color:var(--text-soft);
  font-size:clamp(1rem,1.5vw,1.1rem);
  max-width:62ch;
}
/* Frase personalizada com os números que o próprio usuário informou */
.result-cta__dynamic{
  justify-self:center;
  width:100%;
  max-width:620px;
  color:var(--blue-dark);
  font-size:clamp(1rem,1.5vw,1.1rem);
  padding:.85em 1.1em;
  border-radius:14px;
  background:#fff;
  border:1px dashed #bcd4fb;
}
/* Valores dinâmicos (números que o usuário informou) com mais destaque,
   sem sair da paleta da marca */
.result-cta__dynamic strong{
  font-weight:800;
  font-size:1.12em;
  color:var(--blue-dark);
  background:linear-gradient(transparent 62%, rgba(0,105,240,.16) 62%);
}
/* Rótulos de CTA em caixa alta, sem alterar o estilo do botão */
.result-cta .btn,
.prop-form .btn--block{text-transform:uppercase;letter-spacing:.035em}

/* Seta verde piscando — aponta para a próxima seção */
.result-scroll{
  display:flex;
  justify-content:center;
  /* Aproxima a seta do CTA — fluxo contínuo (sem grande vazio antes da ponte) */
  margin-top:clamp(12px,1.6vw,20px);
}
.result-scroll__arrow{
  width:clamp(46px,5.2vw,62px);
  height:auto;
  color:var(--green);
  filter:drop-shadow(0 8px 18px rgba(0,204,62,.38));
  animation:seta-pisca 1.5s var(--ease-in-out) infinite;
}
@keyframes seta-pisca{
  0%,100%{opacity:.2;transform:translateY(-6px)}
  50%{opacity:1;transform:translateY(6px)}
}
@media (prefers-reduced-motion: reduce){
  .result-scroll__arrow{animation:none;opacity:1;transform:none}
}

/* ── Seção: Ponte (custo × operação) ──────────────────── */
/* Área curta entre o diagnóstico e o bloco azul: mostra que a operação
   envolve mais do que mensagens e prepara a chegada ao MSN Talk. */
.bridge{
  position:relative;
  background:linear-gradient(180deg,#fff 0%,var(--blue-bg) 60%,#e0ebff 100%);
  /* Seção compacta: funciona como ponte, sem virar um novo bloco alto */
  padding:clamp(28px,3.4vw,44px) 0 clamp(26px,3vw,40px);
}
.bridge__head{
  max-width:720px;
  margin:0 auto clamp(18px,2.2vw,26px);
  text-align:center;
}
.bridge__title{
  font-size:clamp(1.35rem,2.8vw,1.9rem);
  font-weight:700;
  color:var(--blue-dark);
  letter-spacing:-.015em;
}
.bridge__sub{
  margin-top:.6em;
  color:var(--text-soft);
  font-size:clamp(1rem,1.5vw,1.08rem);
}
.bridge__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,18px);
}
.bridge__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.6em;
  text-align:center;
  padding:clamp(16px,2vw,22px) clamp(12px,1.6vw,18px);
  background:#fff;
  /* Bordas/sombras com um pouco mais de contraste (leve presença) */
  border:1px solid #bcd4fb;
  border-radius:var(--radius);
  box-shadow:0 10px 26px -14px rgba(0,57,160,.3);
  font-weight:700;
  font-size:.95rem;
  line-height:1.35;
  color:var(--ink);
  transition:border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.bridge__item:hover{
  border-color:var(--blue-light);
  box-shadow:0 16px 32px -16px rgba(0,57,160,.4);
  transform:translateY(-2px);
}
.bridge__item-ico{
  display:grid;
  place-items:center;
  width:50px;height:50px;
  border-radius:13px;
  background:var(--blue-bg);
  color:var(--blue);
  font-size:1.38rem;
}
@media (max-width:900px){
  .bridge__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Seção: Solução / MSN Talk ─────────────────────────── */
.msn{
  position:relative;
  overflow:hidden;
  background-color:var(--blue-dark);
  background-image:linear-gradient(150deg,#03193f 0%,var(--blue-dark) 55%,#0046be 130%);
  color:#fff;
  /* Só o respiro superior foi levemente revisto para emendar com a ponte.
     Estrutura, cores, textos, cards, print e formulário seguem intactos. */
  padding:clamp(34px,3.9vw,56px) 0;
}
.msn__inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(34px,4.6vw,60px);
}

/* Nível superior: título/descrição à esquerda, benefícios à direita */
.msn__top{
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:clamp(28px,4.4vw,64px);
  align-items:center;
}
.msn__intro{min-width:0}
.msn__title{
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.015em;
  max-width:19ch;
}
.msn__sub{
  margin-top:1em;
  color:#cfe0ff;
  font-size:clamp(1rem,1.6vw,1.12rem);
  max-width:48ch;
}
.msn__features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.msn__feature{
  display:flex;
  align-items:center;
  gap:.85em;
  padding:.85em .95em;
  border-radius:14px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  font-weight:500;
  line-height:1.35;
  color:#eaf2ff;
  transition:background .35s var(--ease-out),border-color .35s var(--ease-out),transform .35s var(--ease-out);
}
.msn__feature:hover{
  background:rgba(255,255,255,.13);
  border-color:rgba(255,255,255,.3);
  transform:translateY(-2px);
}
.msn__feature-ico{
  flex:none;
  display:inline-flex;
  align-items:center;justify-content:center;
  width:42px;height:42px;
  border-radius:12px;
  background:linear-gradient(150deg,rgba(0,204,62,.24),rgba(0,105,240,.24));
  border:1px solid rgba(255,255,255,.2);
  color:#7bf0a9;
}
.msn__feature-ico .ico{width:20px;height:20px}
.msn__feature-txt{flex:1;min-width:0}

/* Print principal em destaque: carrossel ocupando toda a largura do bloco */
.msn__media{
  position:relative;
  margin:0;
  padding:clamp(6px,1vw,10px);
  border-radius:calc(var(--radius-lg) + 6px);
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03));
  box-shadow:0 44px 80px -44px rgba(0,0,0,.78);
}
.msn-carousel__viewport{
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:rgba(3,25,63,.55);
}
.msn-carousel__track{
  display:flex;
  transition:transform .65s var(--ease-out);
}
.msn-carousel__slide{flex:0 0 100%;min-width:0}
.msn-carousel__slide img{
  display:block;
  width:100%;
  height:auto;
  /* Mantém a altura estável entre as imagens (evita "pulo" no carrossel) */
  aspect-ratio:1576 / 745;
  object-fit:cover;
  object-position:top center;
}

/* Setas de navegação */
.msn-carousel__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(38px,4.4vw,46px);
  height:clamp(38px,4.4vw,46px);
  padding:0;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(4,22,52,.55);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  color:#fff;
  cursor:pointer;
  transition:background .3s var(--ease-out),border-color .3s var(--ease-out);
}
.msn-carousel__nav:hover{background:var(--blue);border-color:#fff}
.msn-carousel__nav:focus-visible{outline:2px solid #7bf0a9;outline-offset:3px}
.msn-carousel__nav--prev{left:clamp(10px,1.6vw,18px)}
.msn-carousel__nav--next{right:clamp(10px,1.6vw,18px)}
.msn-carousel__nav .ico{width:20px;height:20px}

/* Indicadores (bolinhas) */
.msn-carousel__dots{
  position:absolute;
  left:50%;
  bottom:clamp(14px,1.8vw,20px);
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(4,22,52,.5);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.msn-carousel__dot{
  position:relative;
  width:9px;height:9px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  cursor:pointer;
  transition:background .3s var(--ease-out),transform .3s var(--ease-out);
}
/* Área de toque maior do que o ponto visível (acessibilidade em telas pequenas) */
.msn-carousel__dot::after{content:"";position:absolute;inset:-9px;border-radius:50%}
.msn-carousel__dot:hover{background:rgba(255,255,255,.8)}
.msn-carousel__dot.is-active{background:var(--green);transform:scale(1.4)}
.msn-carousel__dot:focus-visible{outline:2px solid #7bf0a9;outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .msn-carousel__track{transition:none}
}

/* CTA integrado ao próprio bloco azul (sem card branco avulso):
   títulos centralizados no topo, formulário logo abaixo em toda a largura */
.msn__action{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  gap:clamp(24px,3vw,40px);
  margin-top:0;
  padding-top:clamp(28px,3.4vw,44px);
  border-top:1px solid rgba(255,255,255,.16);
}
.msn__action-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6em;
  text-align:center;
  max-width:62ch;
}
.msn__action-title{
  font-size:clamp(1.35rem,2.6vw,1.85rem);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.22;
}
.msn__lead{
  margin:0;
  font-size:clamp(.98rem,1.4vw,1.1rem);
  font-weight:400;
  line-height:1.5;
  max-width:54ch;
  color:#cfe0ff;
}

/* Formulário de proposta sobre o fundo azul — ocupa toda a largura da seção */
.prop-form{width:100%;justify-self:stretch}
.prop-form .form-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 18px;
  justify-items:center;
}
.prop-form .btn--block{max-width:360px;margin-inline:auto}
.prop-form .field{
  width:100%;
  align-items:center;
  text-align:center;
  margin-bottom:1em;
}
.prop-form .field label{text-align:center;color:#dbe9ff;font-weight:600;font-size:.92rem}
.prop-form .field input{
  padding:.9em 1.05em;
  border:1.6px solid rgba(255,255,255,.24);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#fff;
  text-align:center;
}
.prop-form .field input::placeholder{color:rgba(219,233,255,.55)}
.prop-form .field input:hover{border-color:rgba(255,255,255,.42)}
.prop-form .field input:focus{
  outline:none;
  border-color:#7bf0a9;
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 4px rgba(0,204,62,.22);
}
.prop-form .field.has-error input{border-color:#ff9a92;background:rgba(217,45,32,.18)}
.prop-form .field__error{color:#ffb4ad;text-align:center}
.prop-form .btn--block{margin-top:1.3em}
.prop-form__ok{
  margin-top:.9em;
  font-size:.9rem;
  font-weight:500;
  text-align:center;
  color:#8effb5;
}

/* ── Rodapé ────────────────────────────────────────────── */
.footer{
  background:var(--navy);
  color:#c7d5ec;
  padding:clamp(40px,5vw,60px) 0 0;
}
.footer__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding-bottom:34px;
}
.footer__logo{height:42px;width:auto}
.footer__contact{
  display:flex;
  flex-wrap:wrap;
  gap:14px 26px;
}
.footer__contact a{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-weight:500;
  color:#c7d5ec;
  transition:color .2s var(--ease-out);
}
.footer__contact a:hover{color:#fff}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.10);
  padding:20px 0;
  font-size:.85rem;
  color:#8ea3c4;
}

/* ── WhatsApp flutuante ────────────────────────────────── */
.wa-float{
  position:fixed;
  right:clamp(16px,3vw,28px);
  bottom:clamp(16px,3vw,28px);
  z-index:80;
  width:60px;height:60px;
  border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff;
  box-shadow:0 14px 30px -8px rgba(0,204,62,.7);
  transition:transform .3s var(--ease-in-out), box-shadow .3s var(--ease-out);
}
.wa-float svg{width:32px;height:32px}
.wa-float::after{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  border:2px solid rgba(0,204,62,.55);
  animation:wa-pulse 2.6s var(--ease-out) infinite;
}
.wa-float:hover{transform:scale(1.07);box-shadow:0 18px 40px -10px rgba(0,204,62,.85)}

@keyframes wa-pulse{
  0%{transform:scale(1);opacity:.7}
  70%{transform:scale(1.5);opacity:0}
  100%{opacity:0}
}

/* ── Animações de entrada ──────────────────────────────── */
/* O estado inicial (invisível) SÓ se aplica quando o JS está ativo.
   Sem JS — ou se o script falhar/não carregar — todo o conteúdo,
   inclusive as imagens, permanece visível. */
.js [data-animate]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:var(--delay,0ms);
}
.js [data-animate="slide-right"]{transform:translateX(-28px)}
.js [data-animate="fade-in"]{transform:none}
.js [data-animate].visible{opacity:1;transform:none}

/* ── Responsivo ────────────────────────────────────────── */
@media (max-width:980px){
  .hero__inner{gap:28px}
  .hero__content{max-width:none}
  .msn__top{grid-template-columns:1fr;gap:26px}
  .msn__action{grid-template-columns:1fr}
  .prop-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Calculadora: mantém o layout de 2 colunas (com o 3º campo em largura
     total) definido acima, até 760px, onde passa a empilhar em 1 coluna. */
}

@media (max-width:900px){
  .header__inner{display:flex;justify-content:space-between}
  .header__nav{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:14px 24px 20px;
    background:#fff;
    border-bottom:1px solid var(--line);
    box-shadow:0 22px 40px -26px rgba(9,30,66,.5);
    display:none;
  }
  .header__nav.open{display:flex}
  .header__nav a{width:100%;padding:12px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .header__nav a:last-child{border-bottom:none}
  .header__nav a::after{display:none}
  .header__burger{display:flex}
}

@media (max-width:760px){
  html{scroll-padding-top:84px}
  .container{padding-inline:20px}
  /* Somente no mobile: hero usa a imagem vertical enviada, sem as informações
     (título, subtítulo, botão e benefícios). Desktop/tablet permanecem intactos.
     A área acompanha a proporção da imagem (974x1614) para exibi-la inteira, sem corte. */
  .hero{
    background-image:url("images/f2547dde-47ad-486a-b647-8ccb92345470.webp");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    aspect-ratio:974 / 1614;
    min-height:0;
    padding:0;
  }
  .hero__content,
  .hero__benefits{display:none}
  .hero__inner{gap:0}
  /* Sem o hero no mobile, o card do simulador não sobe mais sobre ele */
  .sim-flow{margin-top:0}
  .hero__benefits{grid-template-columns:1fr;gap:10px;margin-top:10px;padding-top:10px}
  .sim-card{padding:24px 20px}
  .calc-row{grid-template-columns:1fr;gap:0}
  /* No mobile volta a empilhar label + input em cada campo */
  .calc-row .field{display:flex;flex-direction:column;gap:.45em;margin-bottom:1em}
  .lead-card{grid-template-columns:1fr;gap:22px}
  .lead-card__intro{justify-content:flex-start;gap:12px}
  .lead-card__intro .sim-card__title{font-size:clamp(1.35rem,5.4vw,1.75rem)}
  .lead-card__intro .sim-card__text{font-size:1.04rem}
  .lead-card__intro .sim-card__microcopy{font-size:.88rem}
  .result-grid{grid-template-columns:1fr;gap:16px}
  .result-card{padding:24px 22px}
  .msn__features{grid-template-columns:1fr;gap:10px}
  .msn__title{max-width:none}
  .msn__action{grid-template-columns:1fr}
  .msn__lead{max-width:none}
  .prop-form .form-grid{grid-template-columns:1fr}
  .prop-form .btn--block{max-width:none}
  .form-grid{grid-template-columns:1fr}
  .footer__inner{flex-direction:column;align-items:center;text-align:center}

  /* ── Centralização geral das informações no mobile ── */

  /* Header / menu aberto */
  .header__nav{align-items:center;text-align:center}
  .header__nav a{text-align:center}

  /* Hero */
  .hero__content{text-align:center;margin-inline:auto}
  .hero__sub{margin-inline:auto}
  .hero__cta{margin-inline:auto}

  /* Calculadora / captura de dados */
  .sim-card{text-align:center}
  .sim-card__text,
  .sim-card__microcopy{margin-inline:auto}
  .sim-steps{justify-content:center}
  .calc-row .field label,
  .calc-row .field input{text-align:center}
  .calc-note{align-items:center;text-align:center}
  .calc-note svg{margin-top:0}

  /* Formulários (captura + proposta) */
  .form-grid .field{align-items:center;text-align:center}
  .field label{text-align:center}
  .field input{text-align:center}

  /* Diagnóstico / resultado */
  .result-card{text-align:center}

  /* MSN Talk */
  .msn__intro{text-align:center}
  .msn__sub{margin-inline:auto}
  .msn__feature{justify-content:center;text-align:center}

  /* Rodapé */
  .footer__contact{justify-content:center}
  .footer__bottom{text-align:center}
}

@media (max-width:520px){
  .header__cta .label{display:none}
  .btn--lg{font-size:1rem;padding:1.05em 1.5em;width:100%}
  .hero__cta{display:flex;width:100%}
  .result-card{padding:22px 20px}
  .result-card__value{font-size:1.85rem}
}

/* ── Acessibilidade ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-animate]{opacity:1;transform:none}
  .wa-float::after{display:none}
}