/* Pesare Rodo — landing pública (index.php).
   Carregada depois de estilo.css e reaproveita a paleta industrial dele:
   --aco-900/800/700 (aço), --verde (indicador), --ambar (alerta), --papel. */

.lp{display:block}
.lp-largura{width:100%; max-width:1180px; margin:0 auto; padding:0 20px}
/* o topo é fixo: as âncoras precisam parar abaixo dele */
.lp [id]{scroll-margin-top:78px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ------------------------------------------------------------------ topo */
.lp-topo{
  position:sticky; top:0; z-index:20;
  background:var(--aco-900); border-bottom:3px solid var(--verde);
}
.lp-topo .lp-largura{display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.lp-nav{display:flex; gap:4px; flex-wrap:wrap; margin-right:auto}
.lp-nav a{
  color:#9fb1bc; text-decoration:none; font-size:14px; padding:16px 12px;
  border-bottom:3px solid transparent; margin-bottom:-3px;
}
.lp-nav a:hover{color:#fff; background:var(--aco-800)}
.lp-topo .btn{white-space:nowrap}

/* ------------------------------------------------------------------ hero */
.lp-hero{
  background:
    radial-gradient(1100px 420px at 78% -8%, rgba(20,180,106,.16), transparent 62%),
    linear-gradient(180deg, var(--aco-900), var(--aco-800));
  color:#dbe6ec; padding:74px 0 82px; border-bottom:1px solid var(--aco-700);
}
.lp-hero .lp-largura{
  display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center;
}
.lp-selo{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px;
  background:var(--aco-700); color:#a9c6d4; border-radius:99px;
  padding:5px 13px; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
}
.lp-selo::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--verde); box-shadow:0 0 8px var(--verde)}
.lp-hero h1{
  color:#fff; font-size:clamp(29px,4.1vw,45px); line-height:1.12;
  letter-spacing:-.02em; margin:0 0 18px;
}
.lp-hero h1 em{font-style:normal; color:var(--verde)}
.lp-chamada{font-size:17px; line-height:1.62; color:#adc0cb; margin:0 0 28px; max-width:56ch}
.lp-hero .acoes{margin-bottom:26px}
.lp-marcas{display:flex; flex-wrap:wrap; gap:9px; list-style:none; margin:0; padding:0}
.lp-marcas li{
  font-size:12.5px; color:#9fb6c2; border:1px solid var(--aco-700);
  border-radius:99px; padding:5px 12px;
}
.lp-marcas li::before{content:"✓ "; color:var(--verde); font-weight:700}
/* botão secundário sobre fundo escuro */
.btn-claro-escuro{background:transparent; color:#cdd8de; border:1px solid #33505f}
.btn-claro-escuro:hover{color:#fff; border-color:var(--aco-400)}

/* visor de demonstração no hero (mesmo desenho do visor real) */
.lp-visor{border:1px solid var(--aco-700); box-shadow:0 24px 60px -28px #000}
.lp-visor .visor-numero{font-size:clamp(46px,7vw,64px)}
.lp-visor .quadro-bruto{max-height:none}
.lp-visor-rodape{
  display:flex; justify-content:space-between; gap:12px; margin-top:14px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#6d8593;
}

/* --------------------------------------------------------------- seções */
.lp-secao{padding:74px 0}
.lp-secao-clara{background:var(--branco); border-block:1px solid var(--linha)}
.lp-cabeca{max-width:62ch; margin:0 0 38px}
.lp-cabeca h2{
  font-size:clamp(23px,2.7vw,31px); text-transform:none; letter-spacing:-.015em;
  color:var(--texto); margin:0 0 12px; line-height:1.22;
}
.lp-cabeca p{color:var(--texto-fraco); font-size:16px; line-height:1.6; margin:0}
.lp-etiqueta{
  display:block; font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--verde-esc); margin-bottom:10px;
}

/* recursos */
.lp-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:18px}
.lp-card{
  background:var(--branco); border:1px solid var(--linha); border-top:3px solid var(--verde);
  border-radius:var(--raio); padding:22px;
}
.lp-secao-clara .lp-card{background:var(--papel)}
.lp-card h3{margin:0 0 8px; font-size:16.5px; letter-spacing:-.01em}
.lp-card p{margin:0; color:var(--texto-fraco); font-size:14.5px; line-height:1.6}
.lp-icone{
  display:grid; place-items:center; width:38px; height:38px; margin-bottom:14px;
  background:var(--aco-900); border-radius:var(--raio); color:var(--verde);
}
.lp-icone svg{
  width:21px; height:21px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* passos */
.lp-passos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px;
  counter-reset:passo; list-style:none; margin:0; padding:0;
}
.lp-passos li{position:relative; padding-top:52px}
.lp-passos li::before{
  counter-increment:passo; content:counter(passo,decimal-leading-zero);
  position:absolute; top:0; left:0;
  font-family:var(--mono); font-size:15px; font-weight:700; color:var(--verde);
  background:var(--aco-900); border-radius:var(--raio); padding:8px 12px;
}
.lp-passos h3{margin:0 0 6px; font-size:16px}
.lp-passos p{margin:0; color:var(--texto-fraco); font-size:14.5px; line-height:1.6}

/* setores */
.lp-setores{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
.lp-setores li{
  background:var(--branco); border:1px solid var(--linha); border-left:3px solid var(--ambar);
  border-radius:var(--raio); padding:9px 15px; font-size:14.5px;
}
.lp-secao-clara .lp-setores li{background:var(--papel)}

/* faq */
.lp-faq{max-width:860px}
.lp-faq details{
  background:var(--branco); border:1px solid var(--linha); border-radius:var(--raio);
  padding:0 18px; margin-bottom:10px;
}
.lp-faq summary{
  cursor:pointer; font-weight:600; padding:15px 0; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+"; font-family:var(--mono); color:var(--verde-esc); font-size:19px; line-height:1}
.lp-faq details[open] summary::after{content:"–"}
.lp-faq details[open] summary{border-bottom:1px solid var(--linha)}
.lp-faq p{margin:0; padding:14px 0 18px; color:var(--texto-fraco); font-size:14.5px; line-height:1.65}

/* -------------------------------------------------------------- acesso */
.lp-acesso{
  background:linear-gradient(180deg, var(--aco-800), var(--aco-900));
  color:#dbe6ec; padding:74px 0; border-top:3px solid var(--verde);
}
.lp-acesso .lp-largura{
  display:grid; grid-template-columns:1fr minmax(320px,400px); gap:52px; align-items:center;
}
.lp-acesso h2{color:#fff; font-size:clamp(23px,2.7vw,31px); text-transform:none;
  letter-spacing:-.015em; margin:0 0 12px; line-height:1.22}
.lp-acesso p{color:#adc0cb; font-size:15.5px; line-height:1.62; margin:0 0 18px; max-width:52ch}
.lp-acesso .lp-etiqueta{color:var(--verde)}
.lp-acesso .cartao{padding:26px; margin:0}
.lp-acesso .cartao h3{margin:0 0 18px; font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:var(--texto-fraco)}

/* -------------------------------------------------------------- rodapé */
.lp-rodape{background:var(--aco-900); color:#7f96a3; font-size:13.5px; padding:44px 0 30px}
.lp-rodape .lp-largura{display:grid; grid-template-columns:1.5fr 1fr .8fr 1.1fr; gap:32px}
.lp-rodape h4{color:#cdd8de; font-size:12px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 12px}
.lp-rodape ul{list-style:none; margin:0; padding:0}
.lp-rodape li{margin-bottom:7px}
.lp-rodape a{color:#9fb1bc; text-decoration:none}
.lp-rodape a:hover{color:#fff; text-decoration:underline}
.lp-rodape .marca{display:flex; padding:0 0 12px}
.lp-rodape .lp-largura + .lp-largura{display:block}
.lp-rodape p{margin:0; max-width:44ch}
.lp-rodape .lp-fim{
  border-top:1px solid var(--aco-700); margin-top:24px; padding-top:20px;
  font-size:12.5px; color:#61798a; text-align:center; max-width:none;
}

/* contato na coluna do rodapé */
.lp-contato a{display:inline-flex; align-items:center; gap:8px}
.lp-contato svg{
  width:15px; height:15px; flex:none; fill:none; stroke:var(--verde);
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}

/* assinatura de quem desenvolveu, acima da linha final */
.lp-dev{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  border-top:1px solid var(--aco-700); margin-top:34px; padding-top:24px;
}
.lp-dev-logo{width:auto; height:78px; flex:none; opacity:.95}
.lp-dev-rotulo{
  display:block; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#61798a;
}
.lp-dev strong{display:block; color:#cdd8de; font-size:16px; letter-spacing:.02em; margin:3px 0 6px}
.lp-dev p{display:flex; flex-wrap:wrap; gap:8px; max-width:none; font-size:13.5px}
.lp-dev a{color:#9fb1bc; text-decoration:none}
.lp-dev a:hover{color:#fff; text-decoration:underline}

/* ------------------------------------------------------------ responsivo */
@media (max-width:900px){
  .lp-hero .lp-largura,.lp-acesso .lp-largura{grid-template-columns:1fr; gap:38px}
  .lp-rodape .lp-largura{grid-template-columns:1fr 1fr}
  .lp-dev{gap:14px}
  .lp-dev-logo{height:64px}
  .lp-hero{padding:52px 0 58px}
  .lp-secao,.lp-acesso{padding:54px 0}
  .lp-topo .lp-largura{gap:10px}
  .lp-nav{display:none}
}

/* -------------------------------------------------- modal da área de acesso */
.modal-acesso{
  border:0; padding:0; background:transparent; color:#dbe6ec;
  width:min(420px, calc(100vw - 32px)); max-height:calc(100dvh - 32px);
  margin:auto; overflow:visible;
}
.modal-acesso::backdrop{background:rgba(8,18,24,.72)}
.modal-acesso[open]{animation:modal-entra .16s ease-out}
@keyframes modal-entra{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.modal-acesso[open]{animation:none}}

.modal-cartao{
  background:var(--aco-800); border:1px solid var(--aco-700);
  border-top:3px solid var(--verde); border-radius:var(--raio);
  padding:24px; box-shadow:0 30px 70px -24px #000;
  max-height:calc(100dvh - 32px); overflow-y:auto;
}
.modal-cabeca{display:flex; align-items:flex-start; gap:16px}
.modal-cabeca h2{
  color:#fff; font-size:21px; text-transform:none; letter-spacing:-.015em;
  margin:0; line-height:1.2;
}
.modal-cabeca .lp-etiqueta{color:var(--verde)}
.modal-x{
  margin-left:auto; background:transparent; border:0; cursor:pointer;
  color:#8fa5b1; font-size:26px; line-height:1; padding:0 4px;
}
.modal-x:hover{color:#fff}
.modal-texto{color:#adc0cb; font-size:14px; line-height:1.6; margin:12px 0 20px}
.modal-acesso .campo label{color:#9fb6c2}
.modal-acesso .aviso{margin-bottom:16px}