/* =====================================================================
   Live4U - site público (F2)
   Depende de app.css para variáveis, botões e avisos.
   ===================================================================== */

.site { background: #fff; }
.site-limite { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Topo ---------- */
.site-topo {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-topo-linha { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 20px; }
.site-marca {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 20px;
  color: var(--brand); text-decoration: none;
}
.site-marca:hover { text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { font-size: 14.5px; color: var(--ink-2); font-weight: 500; }
.site-nav a:hover { color: var(--brand); text-decoration: none; }
.site-nav a.btn { color: #fff; }

/* ---------- Herói ---------- */
.heroi {
  padding: 76px 0 68px;
  background:
    radial-gradient(900px 420px at 82% -8%, rgba(232,163,61,.16), transparent 60%),
    linear-gradient(168deg, #F2F8F8 0%, #FFFFFF 62%);
  border-bottom: 1px solid var(--line-2);
}
.heroi h1 {
  font-size: clamp(30px, 4.6vw, 48px); line-height: 1.12; letter-spacing: -.02em;
  max-width: 17ch; margin: 0 0 18px; color: var(--ink);
}
.heroi p.chamada { font-size: 17.5px; line-height: 1.6; color: var(--ink-2); max-width: 56ch; margin: 0 0 28px; }
.heroi-acoes { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.heroi .btn { padding: 13px 22px; font-size: 15.5px; }
.heroi-selo {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent-soft); color: var(--warn);
  padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 20px;
}
.heroi-abaixo { font-size: 13.5px; color: var(--ink-3); margin-top: 16px; }

/* ---------- Seções ---------- */
.secao { padding: 68px 0; }
.secao-clara { background: var(--bg); }
.secao-cabecalho { max-width: 640px; margin-bottom: 40px; }
.secao-cabecalho .rotulo {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-2); margin-bottom: 10px;
}
.secao-cabecalho h2 { font-size: clamp(23px, 3vw, 31px); line-height: 1.22; margin: 0 0 12px; }
.secao-cabecalho p { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin: 0; }

/* ---------- Cartões de recurso ---------- */
.recursos { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.recurso {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; transition: transform .18s ease, box-shadow .18s ease;
}
.recurso:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.recurso .ic-caixa {
  width: 42px; height: 42px; border-radius: 11px; background: var(--brand);
  color: #fff; display: grid; place-items: center; margin-bottom: 14px;
}
.recurso h3 { font-size: 16.5px; margin: 0 0 7px; }
.recurso p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin: 0; }

/* ---------- Antes e depois ---------- */
.comparativo { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.comparativo-caixa { border-radius: var(--r-lg); padding: 24px 26px; border: 1px solid var(--line); }
.comparativo-caixa h3 { font-size: 16px; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.comparativo-caixa ul { margin: 0; padding-left: 20px; }
.comparativo-caixa li { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }
.comparativo-antes { background: #FCF6F6; border-color: #EFDADA; }
.comparativo-antes h3 { color: var(--danger); }
.comparativo-depois { background: var(--ok-soft); border-color: #C4E4D6; }
.comparativo-depois h3 { color: var(--ok); }

/* ---------- Planos ---------- */
.planos { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); align-items: start; }
.plano {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px; display: flex; flex-direction: column; height: 100%;
}
.plano.destaque { border-color: var(--brand); box-shadow: 0 12px 34px rgba(14,92,99,.13); position: relative; }
.plano .fita {
  position: absolute; top: -12px; left: 24px; background: var(--brand); color: #fff;
  font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 999px; letter-spacing: .02em;
}
.plano h3 { font-size: 18px; margin: 0 0 4px; }
.plano .faixa { font-size: 13.5px; color: var(--ink-3); margin-bottom: 18px; }
.plano .valor { font-family: 'Sora', sans-serif; font-size: 33px; font-weight: 600; color: var(--ink); line-height: 1; }
.plano .valor small { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.plano .por-unidade { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.plano ul { list-style: none; padding: 0; margin: 20px 0 22px; flex: 1; }
.plano li {
  font-size: 14px; color: var(--ink-2); padding: 6px 0 6px 25px; position: relative; line-height: 1.5;
}
.plano li::before {
  content: ""; position: absolute; left: 3px; top: 12px; width: 9px; height: 5px;
  border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.plano .btn { width: 100%; justify-content: center; }
.plano-nota { font-size: 13.5px; color: var(--ink-3); margin-top: 26px; text-align: center; }

/* ---------- Perguntas ---------- */
.pergunta { border-bottom: 1px solid var(--line-2); padding: 20px 0; }
.pergunta:last-child { border-bottom: 0; }
.pergunta h3 { font-size: 16px; margin: 0 0 8px; }
.pergunta p { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; margin: 0; }

/* ---------- Chamada final ---------- */
.chamada-final {
  background: linear-gradient(150deg, var(--brand-3) 0%, var(--brand) 55%, var(--brand-2) 100%);
  color: #fff; padding: 62px 0; text-align: center;
}
.chamada-final h2 { color: #fff; font-size: clamp(24px, 3.2vw, 33px); margin: 0 0 12px; }
.chamada-final p { font-size: 16.5px; opacity: .9; max-width: 52ch; margin: 0 auto 26px; line-height: 1.6; }
.chamada-final .btn { background: #fff; color: var(--brand); border-color: #fff; padding: 13px 26px; font-size: 15.5px; }
.chamada-final .btn:hover { background: var(--accent-soft); }

/* ---------- Formulário de cadastro ---------- */
.cadastro-grade { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: start; padding: 54px 0 70px; }
.cadastro-caixa { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow); }
.cadastro-lado li { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 14px; padding-left: 26px; position: relative; }
.cadastro-lado li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 5px;
  border-left: 2px solid var(--brand-2); border-bottom: 2px solid var(--brand-2); transform: rotate(-45deg);
}
.cadastro-lado ul { list-style: none; padding: 0; margin: 0; }

/* Campo isca: fora da tela, invisível para gente e visível para robô. */
.campo-isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Rodapé ---------- */
.site-rodape { background: var(--brand-3); color: #DCE9EA; padding: 48px 0 24px; margin-top: 0; }
.site-rodape-linha { display: grid; gap: 30px; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.site-rodape h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: #8FB3B6; margin: 0 0 12px; font-weight: 600;
}
.site-rodape a { display: block; color: #CFE2E3; font-size: 13.5px; margin-bottom: 8px; }
.site-rodape a:hover { color: #fff; }
.site-rodape-fim {
  border-top: 1px solid rgba(255,255,255,.1); margin-top: 34px; padding-top: 18px;
  font-size: 12.5px; color: #7EA3A7;
}

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
  .cadastro-grade { grid-template-columns: 1fr; gap: 28px; }
  .site-rodape-linha { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .site-nav { gap: 14px; }
  .site-nav a:not(.btn) { display: none; }
  .heroi { padding: 52px 0 46px; }
  .secao { padding: 48px 0; }
  .site-rodape-linha { grid-template-columns: 1fr; }
  .site-limite { padding: 0 18px; }
}


/* ===============================================================
   SIMULADOR — refeito

   A versão anterior era uma lista de caixas de seleção com um
   número do lado. Funcionava e não ajudava ninguém: a pessoa não
   sabia o que estava marcando nem o que já vinha incluso.

   Agora cada etapa diz o que perguntar e por quê, cada módulo
   mostra quanto custa antes de ser marcado, e a conta fica
   sempre visível.
   =============================================================== */
.sim-abertura{max-width:640px;margin:0 auto 40px}
.sim-abertura h1{font-family:'Sora',sans-serif;font-size:clamp(28px,4vw,40px);
  font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.sim-abertura p{font-size:17px;color:#4F4463;line-height:1.65}

.sim-grade{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:start}
.sim-escolhas{min-width:0}
.sim-conta{min-width:0}

/* --------------------------------------------------------- etapas */
.etapa{background:#fff;border:1px solid #E6E0F0;border-radius:18px;
  padding:26px 28px;margin-bottom:16px}
.etapa-cabeca{display:flex;gap:15px;align-items:flex-start;margin-bottom:20px}
.etapa-num{
  flex:0 0 32px;height:32px;border-radius:16px;background:#6B2FA8;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Sora',sans-serif;font-weight:700;font-size:15px;
}
.etapa-cabeca h2{font-family:'Sora',sans-serif;font-size:19px;font-weight:600;
  margin-bottom:6px;letter-spacing:-.01em}
.etapa-cabeca p{font-size:14.5px;color:#6F6683;line-height:1.6;max-width:52ch}

/* O contador: mais fácil que digitar, principalmente no celular. */
.contador{display:flex;align-items:stretch;gap:0;max-width:280px;margin:0 auto}
.contador-btn{
  width:56px;border:2px solid #E4DCF0;background:#fff;color:#6B2FA8;
  font-size:26px;font-weight:600;cursor:pointer;line-height:1;
  border-radius:14px 0 0 14px;transition:background .15s;
}
.contador-btn:last-of-type{border-radius:0 14px 14px 0}
.contador-btn:hover{background:#F5F0FC}
.contador-btn:active{background:#EDE4F8}
#unidades{
  flex:1;border:2px solid #E4DCF0;border-left:0;border-right:0;
  font-size:34px;font-weight:700;text-align:center;font-family:'Sora',sans-serif;
  color:#171225;padding:12px 0;-moz-appearance:textfield;
}
#unidades::-webkit-outer-spin-button,#unidades::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.sim-barra{width:100%;margin-top:18px;accent-color:#6B2FA8}

.atalhos{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;
  font-size:13px;color:#8B82A0}
.atalhos button{
  border:1px solid #E4DCF0;background:#fff;border-radius:999px;
  padding:7px 14px;font-size:13px;font-family:inherit;color:#4F4463;cursor:pointer;
}
.atalhos button:hover{border-color:#6B2FA8;color:#6B2FA8}

.dica{font-size:13.5px;color:#8B82A0;line-height:1.6;margin-top:16px}
.dica strong{color:#4F4463}

/* -------------------------------------------------------- módulos */
.modulo{display:flex;gap:14px;align-items:flex-start;padding:16px 0;
  border-bottom:1px solid #F0EDF6;cursor:pointer}
.modulo:last-of-type{border-bottom:0}
.modulo input{margin-top:3px;width:20px;height:20px;accent-color:#6B2FA8;flex-shrink:0}
.modulo-texto{flex:1;min-width:0}
.modulo-texto b{display:block;font-size:15.5px;font-weight:600}
.modulo-texto small{display:block;font-size:13.5px;color:#6F6683;margin-top:3px;line-height:1.55}
/* O valor de cada módulo aparece ANTES de marcar: ninguém deveria
   precisar experimentar para descobrir quanto uma opção custa. */
.modulo-valor{flex-shrink:0;font-size:13.5px;color:#8B82A0;
  font-family:ui-monospace,monospace;white-space:nowrap;padding-top:2px}
.modulo input:checked ~ .modulo-valor{color:#6B2FA8;font-weight:600}

.areas{display:flex;flex-wrap:wrap;gap:9px}
.area{display:flex;gap:9px;align-items:center;border:1.5px solid #E4DCF0;
  border-radius:12px;padding:11px 15px;cursor:pointer;font-size:14.5px}
.area:has(input:checked){border-color:#6B2FA8;background:#F5F0FC;font-weight:600}
.area input{accent-color:#6B2FA8;width:17px;height:17px}

/* ---------------------------------------------------------- conta */
.conta-fixa{position:sticky;top:20px;background:#fff;border:1px solid #E6E0F0;
  border-radius:18px;padding:26px 24px;box-shadow:0 14px 40px rgba(22,16,42,.07)}
.conta-rot{font-size:12px;color:#8B82A0;text-transform:none;font-weight:600}
.conta-total{font-family:'Sora',sans-serif;font-size:42px;font-weight:700;
  color:#6B2FA8;line-height:1.1;margin:6px 0 6px;letter-spacing:-.02em}
.conta-unidade{font-size:14px;color:#4F4463;padding-bottom:18px;border-bottom:1px solid #F0EDF6}
.conta-unidade b{color:#171225;font-family:'Sora',sans-serif}
.conta-unidade small{display:block;font-size:12.5px;color:#8B82A0;margin-top:3px}

.conta-detalhe{padding:16px 0;border-bottom:1px solid #F0EDF6}
.conta-detalhe summary{cursor:pointer;font-size:13.5px;color:#6B2FA8;font-weight:600;
  list-style:none;padding:2px 0}
.conta-detalhe summary::-webkit-details-marker{display:none}
.sim-itens{margin-top:12px}
.sim-linha{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  font-size:13.5px;color:#4F4463}
.sim-linha b{color:#171225;font-weight:600;white-space:nowrap;font-family:ui-monospace,monospace}
.sim-linha .sim-como{display:block;font-size:11.5px;color:#8B82A0;margin-top:2px;
  font-family:ui-monospace,monospace}

.conta-promo{background:#DFF8EF;color:#0A6B4A;border-radius:12px;padding:14px 16px;
  font-size:13.5px;line-height:1.6;margin:18px 0}
.conta-promo:empty{display:none}
.conta-promo b{font-weight:700}

.botao-contratar{
  display:block;text-align:center;background:#FF6B4A;color:#fff;
  padding:17px 24px;border-radius:14px;text-decoration:none;font-weight:700;font-size:16.5px;
  box-shadow:0 6px 20px rgba(255,107,74,.28);transition:transform .15s;
}
.botao-contratar:hover{transform:translateY(-2px)}
.conta-garantias{list-style:none;margin-top:18px}
.conta-garantias li{font-size:13px;color:#6F6683;padding:5px 0 5px 22px;position:relative;line-height:1.5}
.conta-garantias li::before{content:"";position:absolute;left:2px;top:10px;
  width:6px;height:10px;border-right:2px solid #12A06F;border-bottom:2px solid #12A06F;
  transform:rotate(42deg)}

.sim-rodape{text-align:center;font-size:14px;color:#8B82A0;margin-top:30px;line-height:1.7}
.sim-rodape a{color:#6B2FA8}

@media (max-width:900px){
  .sim-grade{grid-template-columns:1fr}
  /* No celular a conta vai para o TOPO: a pessoa precisa ver o valor
     mudando enquanto escolhe, e no rodapé ela escolheria no escuro. */
  .sim-conta{order:-1}
  .conta-fixa{position:static}
  .etapa{padding:22px 20px}
}