/* ============================================================
   TIRE SUA IDEIA DO PAPEL — estilos exclusivos desta página
   Carregar depois de styles.css, menu.css e paginas.css.
   Reaproveita o vocabulário visual do Diagnóstico Polvo (.pcapa/.abre)
   e só acrescenta o que essa página tem de próprio: o CTA que rola
   até o formulário (sem abrir o modal de orçamento) e o espaçamento
   da seção do formulário.
   ============================================================ */

/* ---------- painel de capa ----------
   o fundo da seção é claro (mesmo vazamento de luz usado em
   .abertura-fundo nas outras páginas); só o cartão .pcapa-in
   dentro dela permanece escuro. */
.pcapa{position:relative;max-width:1280px;margin:0 auto;
       padding:calc(env(safe-area-inset-top,0px) + clamp(96px,13vh,128px)) clamp(20px,5vw,56px) clamp(28px,4vh,44px);
       background:var(--claro-bg);
       box-shadow:0 0 0 100vmax var(--claro-bg);
       clip-path:inset(0 -100vmax)}
.pcapa-in{position:relative;isolation:isolate;overflow:hidden;
          border-radius:clamp(22px,2.6vw,34px);
          min-height:clamp(400px,60vh,600px);
          display:flex;flex-direction:column;justify-content:flex-end;
          padding:clamp(28px,5vw,68px);
          border:1px solid rgba(159,208,228,.18);
          background:linear-gradient(158deg,#011A3F 0%,#000C24 52%,#00060F 100%)}
.pcapa-in::before{content:"";position:absolute;z-index:-2;
          top:-34%;right:-16%;width:74%;aspect-ratio:1;border-radius:50%;
          background:radial-gradient(circle at 34% 30%,
                     rgba(120,164,188,.34) 0%,
                     rgba(5,62,112,.62) 44%,
                     rgba(3,49,102,.30) 72%,
                     transparent 100%)}
.pcapa-in::after{content:"";position:absolute;z-index:-1;
          top:-34%;right:-16%;width:74%;aspect-ratio:1;border-radius:50%;
          border:1px solid rgba(159,208,228,.16)}
.pcapa .marca{display:block;margin-bottom:clamp(18px,2.6vh,26px);
          font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
          color:rgba(159,208,228,.82)}
.pcapa h1{font-family:var(--ui);font-weight:300;
          font-size:clamp(32px,4.6vw,58px);line-height:1.08;letter-spacing:-.024em;
          max-width:22ch;color:#fff;text-shadow:none;transform:none}
.pcapa h1 em{font-family:var(--serif);font-style:italic;font-weight:400;
          letter-spacing:-.028em;font-size:1.06em}
.pcapa .lead{margin:clamp(18px,2.6vh,26px) 0 0;text-align:left;
          max-width:52ch;color:rgba(226,240,248,.72)}
.pcapa .acao-scroll{align-self:flex-start;margin-top:clamp(26px,3.6vh,36px)}
@media (max-width:620px){
  .pcapa-in{min-height:0}
  .pcapa-in::before,.pcapa-in::after{top:-20%;right:-30%;width:96%}
}

/* botão sólido idêntico ao .acao (mesmo vidro azul), só que sem o
   gatilho global do modal de orçamento — js/modal.js escuta cliques
   em .acao em qualquer lugar do site. Este botão só rola até o
   formulário desta página. */
.acao-scroll{display:inline-flex;align-items:center;gap:10px;font-family:inherit;font-size:13.5px;
      font-weight:500;letter-spacing:.01em;cursor:pointer;text-decoration:none;color:#fff;
      padding:13px 28px;border-radius:12px;
      border:1px solid rgba(159,208,228,.26);
      background:linear-gradient(158deg, rgba(120,164,188,.18), rgba(5,62,112,.32));
      -webkit-backdrop-filter:blur(5px) saturate(150%);backdrop-filter:blur(5px) saturate(150%);
      box-shadow:0 20px 46px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(159,208,228,.16);
      text-shadow:0 1px 3px rgba(0,0,0,.35);
      transition:filter .2s,transform .3s}
.acao-scroll:hover,.acao-scroll:focus-visible{transform:translateY(-2px)}
.acao-scroll:active{filter:brightness(.92)}
.acao-scroll:focus-visible{outline:2px solid #9FD0E4;outline-offset:3px}
.acao-scroll i{font-style:normal;transition:transform .3s}
.acao-scroll:hover i{transform:translate(2px,-2px)}

/* ---------- prosa de abertura, coluna estreita centrada ----------
   fundo claro (mesma técnica de vazamento de luz usada em .sec.clara):
   o resto do site é majoritariamente claro fora do herói, então esta
   seção segue o mesmo padrão em vez de ficar escura. */
.abre{position:relative;max-width:1120px;margin:0 auto;
      padding:clamp(56px,9vh,110px) clamp(20px,5vw,56px);
      background:var(--claro-bg);
      box-shadow:0 0 0 100vmax var(--claro-bg);
      clip-path:inset(0 -100vmax)}
.abre-in{max-width:58ch;margin:0 auto}
.abre-in p{font-size:clamp(15.5px,1.5vw,18px);line-height:1.78;
      color:rgba(10,32,56,.66)}
.abre-in p + p{margin-top:18px}
.abre-in strong{font-weight:500;color:var(--claro-texto)}
.abre-in p:first-child{font-size:clamp(17px,1.8vw,21px);line-height:1.6;
      color:var(--claro-texto);font-weight:300}

/* ---------- seção do formulário: mesmos campos do modal de orçamento,
   soltos direto na página em vez de dentro da caixa ---------- */
.form-ideia{max-width:720px;margin:clamp(36px,5vh,52px) auto 0}