/* =============================================================
   estilo-suave.css — visual "suave" da página inicial (index.html).
   Vai por cima do site-novo.css, sem mudar textos nem estrutura.
   Inspiração: interface "macia" — fundo cinza-claro liso, cartões brancos
   bem arredondados com brilho por dentro e sombra difusa, e botões/ícones
   "gel" em degradê com brilho. As cores são as do Zunzo: azul #2746f8 e
   azul-claro #7edffe (no lugar do laranja/rosa da referência).
   ============================================================= */
:root{
  --fundo:#e9ebf1;
  --cartao:linear-gradient(180deg,#fdfdfe 0%,#f3f4f8 100%);
  /* sombras com poucas camadas e desfoque curto: o navegador redesenha mais rápido ao rolar */
  --macio:inset 0 2px 1px #ffffff, 0 1px 2px #1b2a6a12, 0 16px 34px #1b2a6a14;
  --macio-alto:inset 0 2px 1px #ffffff, 0 2px 4px #1b2a6a14, 0 24px 46px #1b2a6a1f;
  /* botões e etiquetas (estilo C, escolhido em 20/10): degradê leve do azul do Zunzo e sombra curta só embaixo,
     sem brilho por dentro nem auréola */
  --gel:linear-gradient(135deg,#4a72ff 0%,#2746f8 70%);
  /* versão para cartões grandes com texto branco: o brilho claro fica no canto de cima à direita, longe do texto */
  --gel-fundo:radial-gradient(60% 55% at 92% 0%,#a9ecffcc 0%,#7edffe66 35%,#7edffe00 70%),
        radial-gradient(80% 90% at 0% 100%,#1a2fd0 0%,#2746f800 65%),
        linear-gradient(160deg,#3f6cff 0%,#2f55fb 45%,#2746f8 100%);
  --gel-sombra:0 8px 16px -8px #2746f8a6;
  --r:38px;
}

/* ---------- fundo liso, sem manchas fortes ---------- */
body{background:var(--fundo)}
/* leve: no lugar das 6 manchas desfocadas e animadas + granulado (pesados para rolar no celular),
   um degradê parado com o mesmo efeito, que o navegador desenha uma vez só */
.bg{background:radial-gradient(45vw 40vw at 0% 0%,#c9d6ff99,#c9d6ff00 70%),radial-gradient(40vw 40vw at 100% 15%,#bfeeff99,#bfeeff00 70%),
  radial-gradient(50vw 40vw at 100% 100%,#c9d6ff80,#c9d6ff00 70%),var(--fundo)}
.bg i,.grain,.fade{display:none}

/* ---------- cartões macios ---------- */
.glass,.stats div,.tpl,.chip,.site-ben div,.fone-tag,.pill,.btn.glass{
  background:var(--cartao);border:0;box-shadow:var(--macio);backdrop-filter:none;-webkit-backdrop-filter:none}
.glass{border-radius:var(--r)}
.card{padding:34px}
.glass:hover,.tpl:hover{box-shadow:var(--macio-alto)}
.stats div{border-radius:30px;padding:22px 24px}
.stats b{font-size:26px}
.tpl{border-radius:32px;padding:12px}
.tpl .frame{border-radius:22px;box-shadow:inset 0 0 0 1px #1b2a6a0d}
.tpl:hover{transform:translateY(-6px)}

/* ---------- topo: uma pílula macia flutuando ---------- */
.nav,.nav.stuck{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding-top:14px}
.nav .in{background:#fbfbfdf7;border-radius:30px;padding:12px 14px 12px 26px;box-shadow:var(--macio)}
.nav ul a.on::after{height:4px;border-radius:4px;background:var(--gel)}

/* ---------- botões ---------- */
.btn{border-radius:20px}
.btn.primary,.price.hot .btn,.flow .n,.tpl .acts .use,.tpl-filter button[aria-pressed="true"]{
  background:var(--gel);color:#fff;border:0;box-shadow:var(--gel-sombra);text-shadow:none}
.btn.primary:hover{box-shadow:0 12px 20px -8px #2746f8b3}
.btn.glass{color:var(--ink)}
.btn.glass:hover{box-shadow:var(--macio-alto)}
.btn.sm{border-radius:16px}
.tpl .acts .use{border-radius:100px}
.tpl .acts .peek{background:#fff;border:0;box-shadow:inset 0 1px 0 #fff, 0 1px 3px #1b2a6a1f}

/* ---------- etiquetas: texto em caixa alta cinza com um "solzinho" gel (como "☀ MORNING") ---------- */
.eyebrow,.head .eyebrow{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  padding:0;color:#9a9db0;font-size:13px;letter-spacing:.09em;gap:10px}
.eyebrow::before{width:12px;height:12px;background:var(--gel);box-shadow:none}
.pill{border-radius:100px;color:var(--soft)}
.pill b{background:var(--gel);box-shadow:none}

/* ---------- ícones: bolinhas de gel com o emoji por cima ---------- */
.ico{border-radius:20px;box-shadow:0 8px 16px -8px #2746f866}
.ico.a,.ico.b,.ico.c,.ico.d,.ico.e,.ico.f{background:radial-gradient(110% 90% at 20% 0%,#ffffff 0%,#e4f8ff 35%,#bfe9ff 70%,#9ccfff 100%)}

/* ---------- como funciona ---------- */
.flow::before{background:repeating-linear-gradient(90deg,#9fb6ff 0 6px,transparent 6px 14px);height:3px}
.flow .glass{padding:26px 22px}
.flow .n{border-radius:18px;width:50px;height:50px;font-size:18px}

/* ---------- o que você leva ---------- */
.deliver .card::after{opacity:.35;filter:none;background:radial-gradient(circle,var(--c,#a9d6ff),transparent 70%)!important}
.deliver .html::after{--c:#b4e9ff}.deliver .drv::after{--c:#bdeedc}
.tag{background:#fff;box-shadow:inset 0 1px 0 #fff, 0 2px 6px #1b2a6a14;border-radius:10px}
.deliver li::before{background-color:var(--azul);box-shadow:none}

/* ---------- preço ---------- */
.price{border-radius:var(--r);padding:36px}
.val{font-size:54px}
.price.hot{background:var(--gel-fundo);box-shadow:0 30px 60px -24px #2746f880}
.price.hot::before{background:radial-gradient(circle,#ffffff40,#ffffff00 70%);width:340px;height:340px}
.price.hot .btn{background:#fff;color:var(--azul);text-shadow:none;box-shadow:0 8px 16px -8px #14237a80}
.flag{background:#ffffff33;border:0;box-shadow:none}

/* ---------- Zunzo Online ---------- */
.site-dest{background:var(--cartao);border:0;box-shadow:var(--macio);border-radius:44px}
.site-ben div{border-radius:24px}
.fone{border-radius:42px;box-shadow:0 40px 80px #1b2a6a33}

/* ---------- chamada final e dúvidas ---------- */
.final{background:var(--gel-fundo);box-shadow:0 30px 60px -24px #2746f866;border-radius:38px}
/* chamada final mais fina e da largura dos outros blocos (pedido de 20/10) */
.final{max-width:none;margin-top:90px;grid-template-columns:minmax(0,1fr) auto;gap:30px;padding:30px 48px 0 56px}
.final > div:first-child{padding-bottom:34px}
.final h2{font-size:clamp(26px,2.5vw,36px);margin-bottom:10px}
.final h2 .ln{display:inline}
.final p{margin:0 0 20px;max-width:60ch;font-size:15.5px}
.final .figura{width:210px;margin:0 20px 0 0}
.final .figura::before{width:150%}
@media(max-width:620px){
  .final{grid-template-columns:1fr;padding:30px 22px 0;gap:4px}
  .final > div:first-child{padding-bottom:0}
  .final h2 .ln{display:block}
  .final .figura{width:170px;margin:0 auto}
}
.ver-duvidas{border-radius:30px}

/* ---------- cena da dobra: chips macios ---------- */
.chip{border-radius:22px}
.chip .ic{background:var(--gel)!important;box-shadow:var(--gel-sombra)}
.block{background:var(--gel);box-shadow:var(--gel-sombra);border-radius:20px}

@media(max-width:620px){
  .nav{padding-top:8px}
  .nav .in{border-radius:22px;padding:10px 10px 10px 18px}
  .glass{border-radius:30px}
  .card{padding:26px}
  .stats div{border-radius:22px;padding:16px 18px}
}

/* botão principal da dobra: "Comece grátis!" em negrito forte */
.cta-gratis b{font-weight:800;letter-spacing:-.01em}