/* Página de vendas do CAIS.
   Mesma marca da interface, mas com respiro de página pública: linha mais
   longa, tipo maior, e tudo empilhando em uma coluna no celular — que é onde
   dono de escritório lê link recebido no WhatsApp. */

:root{
  color-scheme:dark;
  --casco:#0A1721; --doca:#0F2231; --mare:#15304A; --mare-2:#1E415F;
  --azul:#2C7FC4; --azul-forte:#3E9BE0;
  --turquesa:#29D3C0; --ambar:#F2B33D; --vermelho:#E5616B; --neutro:#5E7386;
  --nevoa:#93A9BC; --cal:#E8F0F6;
  --display:"Space Grotesk",'Segoe UI',system-ui,sans-serif;
  --corpo:"Inter",'Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--casco);color:var(--cal);font-family:var(--corpo);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0}
.dentro{max-width:1120px;margin:0 auto;padding:0 20px}
.miudo{font-size:13px;color:var(--nevoa)}
.centro{text-align:center}

/* ------------------------------------------------------------------ topo */
.topo{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;
  padding:12px 20px;background:rgba(15,34,49,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--mare)}
.marca{display:flex;align-items:center;gap:9px;font-family:var(--display);
  font-weight:700;letter-spacing:.16em;font-size:17px}
.marca i{width:9px;height:22px;border-radius:2px;display:block;
  background:linear-gradient(180deg,var(--turquesa),var(--azul))}
.menuTopo{display:flex;gap:20px;margin-left:22px;font-size:14.5px;color:var(--nevoa)}
.menuTopo a:hover{color:var(--cal)}
.topo .botao{margin-left:auto}
.topo .botao+.botao{margin-left:0}
.menuBotao{display:none;margin-left:auto;background:none;border:1px solid var(--mare-2);
  color:var(--cal);border-radius:9px;padding:6px 11px;font-size:17px;cursor:pointer}

.botao{display:inline-block;background:var(--azul);color:#fff;border-radius:10px;
  padding:10px 18px;font-weight:600;font-size:14.5px;white-space:nowrap;
  transition:transform .12s,background .12s;border:1px solid transparent}
.botao:hover{background:var(--azul-forte);transform:translateY(-1px)}
.botao.fantasma{background:transparent;border-color:var(--mare-2);color:var(--cal)}
.botao.fantasma:hover{border-color:var(--azul-forte);background:rgba(62,155,224,.08)}
.botao.grande{padding:14px 26px;font-size:16px}
.botao.largo{display:block;text-align:center;margin-top:auto}

/* ----------------------------------------------------------------- capa */
.capa{padding:64px 0 40px;text-align:center;
  background:radial-gradient(1100px 480px at 50% -8%,rgba(44,127,196,.20),transparent 62%)}
.olho{margin:0 0 14px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--turquesa);font-weight:600}
.capa h1{font-size:clamp(30px,5.2vw,54px);line-height:1.1;margin-bottom:18px}
.chamada{max-width:62ch;margin:0 auto 26px;color:var(--nevoa);font-size:clamp(15px,1.7vw,18.5px)}
.acoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}

/* ------------------------------------------------------ moldura de tela */
.molduraTela{margin:38px auto 0;max-width:980px;background:var(--doca);
  border:1px solid var(--mare-2);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.45)}
.molduraTela.pequena{margin:0;max-width:100%;flex:1;min-width:min(280px,100%)}
.barraTela{display:flex;align-items:center;gap:6px;padding:9px 13px;
  background:var(--mare);border-bottom:1px solid var(--mare-2)}
.barraTela span{width:9px;height:9px;border-radius:50%;background:var(--mare-2)}
.barraTela b{margin-left:10px;font-size:11.5px;color:var(--nevoa);font-weight:500}
.telaDemo{padding:14px;text-align:left;font-size:12px;min-width:0;overflow:hidden}

/* -------------------------------------------------------------- faixas */
.faixa{padding:64px 0;opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease}
.faixa.aparece,.capa.aparece,.fechamento.aparece{opacity:1;transform:none}
.capa,.fechamento{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.faixa.alt{background:var(--doca);border-top:1px solid var(--mare);border-bottom:1px solid var(--mare)}
.secao{font-size:clamp(24px,3.4vw,34px);margin-bottom:10px;text-align:center}
.subsecao{max-width:64ch;margin:0 auto 34px;text-align:center;color:var(--nevoa);font-size:16px}

.grade3{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.grade5{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}

/* --------------------------------------------------------------- dores */
.cartaoDor{background:var(--casco);border:1px solid var(--mare);border-radius:14px;padding:20px}
.faixa.alt .cartaoDor{background:var(--doca)}
.cartaoDor h3{font-size:17px;margin-bottom:8px}
.cartaoDor p{margin:0 0 10px;color:var(--nevoa);font-size:14.5px}
.cartaoDor .resposta{color:var(--cal);border-left:2px solid var(--turquesa);
  padding-left:11px;margin-bottom:0}
.cartaoDor .resposta b{color:var(--turquesa)}

/* ------------------------------------------------------------- passos */
.passo{display:flex;gap:30px;align-items:center;margin-bottom:44px;flex-wrap:wrap}
.passo.invertido{flex-direction:row-reverse}
.passoTexto{flex:1;min-width:min(280px,100%)}
.numeroPasso{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--azul);color:#fff;font-family:var(--display);font-weight:700;margin-bottom:12px}
.passoTexto h3{font-size:22px;margin-bottom:10px}
.passoTexto p{color:var(--nevoa);margin:0 0 14px}
.marcadores{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.marcadores li{position:relative;padding-left:24px;font-size:14.5px}
.marcadores li::before{content:"✓";position:absolute;left:0;color:var(--turquesa);font-weight:700}

/* ------------------------------------------------------ departamentos */
.cartaoDep{background:var(--doca);border:1px solid var(--mare);border-radius:14px;padding:18px}
.icDep{font-size:22px;color:var(--azul-forte)}
.cartaoDep h3{font-size:16px;margin:8px 0 10px}
.cartaoDep ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.cartaoDep li{font-size:13px;color:var(--nevoa);padding-left:13px;position:relative}
.cartaoDep li::before{content:"·";position:absolute;left:3px;color:var(--azul-forte);font-weight:700}

.destaqueHonesto{margin-top:26px;background:var(--doca);border:1px solid var(--mare);
  border-left:3px solid var(--ambar);border-radius:14px;padding:22px 24px}
.destaqueHonesto h3{font-size:18px;margin-bottom:8px}
.destaqueHonesto p{margin:0;color:var(--nevoa);max-width:78ch}
.faixa.alt .destaqueHonesto,.faixa.alt .cartaoDep,.faixa.alt .cartaoSimples{background:var(--casco)}

.cartaoSimples{background:var(--doca);border:1px solid var(--mare);border-radius:14px;padding:20px}
.cartaoSimples h3{font-size:16.5px;margin-bottom:8px}
.cartaoSimples p{margin:0;color:var(--nevoa);font-size:14.5px}

/* -------------------------------------------------------------- planos */
.chaveCiclo{display:flex;gap:4px;justify-content:center;margin:0 auto 26px;width:max-content;
  background:var(--casco);border:1px solid var(--mare-2);border-radius:99px;padding:4px}
.faixa.alt .chaveCiclo{background:var(--casco)}
.chaveCiclo button{background:none;border:0;color:var(--nevoa);font:inherit;font-size:14px;
  padding:8px 18px;border-radius:99px;cursor:pointer}
.chaveCiclo button[aria-pressed="true"]{background:var(--azul);color:#fff;font-weight:600}
.chaveCiclo .selo{font-size:11px;background:var(--turquesa);color:#062;border-radius:99px;
  padding:1px 7px;margin-left:5px;font-weight:700}

.planos{align-items:stretch}
.cartaoPlano{position:relative;display:flex;flex-direction:column;background:var(--casco);
  border:1px solid var(--mare);border-radius:16px;padding:24px 22px}
.cartaoPlano.destaque{border-color:var(--azul-forte);box-shadow:0 0 0 1px var(--azul-forte),
  0 24px 50px rgba(44,127,196,.18)}
.seloPlano{position:absolute;top:-11px;left:22px;background:var(--azul-forte);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:99px;padding:3px 11px}
.cartaoPlano h3{font-size:21px;margin-bottom:6px}
.resumoPlano{color:var(--nevoa);font-size:14px;margin:0 0 16px;min-height:42px}
.preco{display:flex;align-items:baseline;gap:5px}
.preco .valor{font-family:var(--display);font-size:34px;font-weight:700}
.preco .por{color:var(--nevoa);font-size:14px}
.cicloNota{font-size:12.5px;color:var(--turquesa);margin:2px 0 16px;min-height:19px}
.limites{list-style:none;padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid var(--mare);
  display:flex;gap:18px;font-size:13.5px;color:var(--nevoa)}
.limites b{color:var(--cal);font-family:var(--display)}
.recursos{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.recursos li{position:relative;padding-left:23px;font-size:14px}
.recursos li.tem::before{content:"✓";position:absolute;left:0;color:var(--turquesa);font-weight:700}
.recursos li.naoTem{color:var(--neutro)}
.recursos li.naoTem::before{content:"—";position:absolute;left:0;color:var(--neutro)}
.carregando{grid-column:1/-1;text-align:center;color:var(--nevoa);padding:30px}

/* ------------------------------------------------------------ dúvidas */
.perguntas{max-width:800px;margin:0 auto;display:grid;gap:10px}
.perguntas details{background:var(--casco);border:1px solid var(--mare);border-radius:12px;
  padding:14px 18px}
.perguntas summary{cursor:pointer;font-weight:600;font-size:15.5px;list-style:none}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"+";float:right;color:var(--azul-forte);font-weight:700}
.perguntas details[open] summary::after{content:"−"}
.perguntas p{margin:10px 0 0;color:var(--nevoa);font-size:14.5px}

/* --------------------------------------------------------- fechamento */
.fechamento{padding:70px 0;text-align:center;
  background:radial-gradient(900px 400px at 50% 110%,rgba(41,211,192,.16),transparent 60%)}
.fechamento h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:12px}
.fechamento p{max-width:56ch;margin:0 auto 22px;color:var(--nevoa)}

.rodape{border-top:1px solid var(--mare);padding:26px 0}
.rodape .dentro{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rodape .miudo{flex:1;min-width:200px}
.rodape a{color:var(--azul-forte)}

/* ------------------------------------------- miniaturas da demonstração */
.dFaixa{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.dFicha{flex:1;min-width:min(96px,100%);background:var(--casco);border:1px solid var(--mare);
  border-radius:9px;padding:8px 10px}
.dFicha .dR{display:block;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--nevoa)}
.dFicha b{font-family:var(--display);font-size:15px}
.dFicha i{font-style:normal;font-size:9px;margin-left:5px}
.dFicha i.ok{color:var(--turquesa)} .dFicha i.ruim{color:var(--vermelho)}
.dFicha.ok b{color:var(--turquesa)}
.dLinha{display:flex;gap:9px;flex-wrap:wrap;min-width:0}
.dPainel{flex:1;min-width:min(190px,100%);background:var(--casco);border:1px solid var(--mare);
  border-radius:10px;padding:10px}
.dTitulo{display:block;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--nevoa);margin-bottom:8px}
.dSub{color:var(--nevoa);font-size:10px}
.dNum{font-variant-numeric:tabular-nums}
.dRosca{width:74px;height:74px;border-radius:50%;margin:2px auto 8px;
  background:conic-gradient(#3E9BE0 0 calc(var(--a)*1%),#5E7386 0 calc((var(--a) + var(--b))*1%),#93A9BC 0);
  position:relative}
.dRosca::after{content:"";position:absolute;inset:22%;border-radius:50%;background:var(--casco)}
.dLegenda{display:grid;gap:4px;font-size:10px;color:var(--nevoa)}
.dLegenda i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px}
.dLegenda b{color:var(--cal);float:right;font-variant-numeric:tabular-nums}
.dBarra{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:10px}
.dRot{width:88px;color:var(--nevoa);flex-shrink:0}
.dPista{flex:1;height:6px;border-radius:99px;background:var(--mare-2);overflow:hidden}
.dPista i{display:block;height:100%;border-radius:99px}
.dBarra b{font-variant-numeric:tabular-nums;width:24px;text-align:right}
.dTabela{display:grid;gap:3px}
.dCab,.dLinhaT{display:grid;grid-template-columns:1.3fr 1.4fr .6fr .9fr;gap:8px;
  align-items:center;padding:6px 8px;font-size:10.5px}
.dCab{color:var(--nevoa);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.dLinhaT{background:var(--casco);border-radius:7px}
.dEtq{font-size:9px;border-radius:99px;border:1px solid var(--mare-2);padding:1px 7px;
  color:var(--nevoa);text-align:center;white-space:nowrap}
.dEtq.ok{color:var(--turquesa);border-color:rgba(41,211,192,.4)}
.dEtq.per{color:var(--ambar);border-color:rgba(242,179,61,.4)}
.dEtq.atr{color:var(--vermelho);border-color:rgba(229,97,107,.45)}
.dEtq.and{color:var(--azul-forte);border-color:rgba(62,155,224,.45)}
.dModal{background:var(--casco);border:1px solid var(--mare-2);border-radius:11px;padding:13px}
.dAviso{background:var(--doca);border:1px dashed var(--mare-2);border-radius:8px;
  padding:7px 10px;font-size:10px;color:var(--nevoa);margin:8px 0}
.dCampo{margin-bottom:8px}
.dCampo span{display:block;font-size:9.5px;color:var(--nevoa);margin-bottom:3px}
.dEntrada,.dArquivo{background:var(--doca);border:1px solid var(--mare-2);border-radius:7px;
  padding:6px 9px;font-size:11px;font-variant-numeric:tabular-nums}
.dArquivo.ok{border-color:rgba(41,211,192,.5);color:var(--turquesa)}
.dGrade{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.dExplica{background:var(--doca);border-left:2px solid var(--azul-forte);border-radius:0 8px 8px 0;
  padding:8px 10px;font-size:10px;color:var(--nevoa);margin-top:8px}
.dExplica b{display:block;color:var(--cal);margin-bottom:2px}
.dKanban{display:flex;gap:7px;overflow:hidden}
.dColuna{flex:1;min-width:0;background:var(--casco);border:1px solid var(--mare);
  border-radius:9px;padding:8px}
.dColunaTopo{display:flex;justify-content:space-between;font-size:9px;color:var(--nevoa);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.dColunaTopo b{color:var(--cal)}
.dTrilho{height:2px;border-radius:99px;margin-bottom:7px}
.dCard{background:var(--doca);border:1px solid var(--mare);border-radius:7px;padding:7px;
  display:grid;gap:2px;font-size:9.5px}
.dCard b{font-size:10px;font-variant-numeric:tabular-nums}
.dCobertura{display:flex;align-items:center;gap:9px;background:var(--casco);
  border:1px solid var(--mare);border-left:2px solid var(--ambar);border-radius:9px;
  padding:7px 10px;margin-bottom:9px;font-size:10px;color:var(--nevoa)}

/* ------------------------------------------------------------- celular */
@media (max-width:860px){
  .menuTopo{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:0;background:var(--doca);border-bottom:1px solid var(--mare);margin:0;padding:6px 0}
  body.menuAberto .menuTopo{display:flex}
  .menuTopo a{padding:12px 20px;border-top:1px solid var(--mare)}
  .menuBotao{display:block}
  .topo .botao{display:none}
  .passo,.passo.invertido{flex-direction:column;gap:20px}
  /* Item de flex tem min-width:auto, então a largura intrínseca do conteúdo
     manda — e o quadro de OS, que é largo, empurrava a página inteira para o
     lado. min-width:0 devolve o controle ao contêiner. */
  .passoTexto,.molduraTela.pequena{min-width:0;width:100%;max-width:100%}
  .dKanban{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .dColuna{min-width:128px;flex:0 0 128px}
}
@media (max-width:620px){
  body{font-size:15px}
  .faixa{padding:44px 0}
  .capa{padding:40px 0 26px}
  .acoes .botao{width:100%;text-align:center}
  .dCab,.dLinhaT{grid-template-columns:1.2fr 1fr .9fr;font-size:9.5px}
  .dCab span:nth-child(3),.dLinhaT span:nth-child(3){display:none}
  .dGrade{grid-template-columns:1fr}
  .limites{flex-direction:column;gap:6px}
  .molduraTela{border-radius:11px}
  .telaDemo{padding:10px}
  .rodape .dentro{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .faixa,.capa,.fechamento{opacity:1;transform:none;transition:none}
  .botao:hover{transform:none}
}