/* ============================================================
   DIAGNÓSTICO POLVO — estilos exclusivos desta página
   Carregar depois de styles.css, menu.css e paginas.css.
   Só contém o que não existia: o painel de capa com a curva,
   as duplas rótulo/explicação e o painel de fechamento.
   ============================================================ */

/* ---------- painel de capa ---------- */
/* na referência é um retângulo colorido com uma curva enorme entrando
   pela direita; aqui a curva é um poço de luz, que é o vocabulário do
   hero da home (água iluminada de cima) */
.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%)}

/* a curva: um círculo grande e macio ancorado fora do canto */
.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%)}
/* fio que desenha a borda da curva, para ela não virar só um borrão */
.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:20ch;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:48ch;color:rgba(226,240,248,.72)}
/* o painel é flex-column: sem align-self o botão esticaria a largura toda */
.pcapa .acao{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%}
}

/* ---------- prosa de abertura, coluna estreita centrada ----------
   fundo claro: só o painel de capa acima fica escuro, o resto da
   página segue o padrão claro do site. */
.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)}
/* primeira linha puxa a atenção sem virar título */
.abre-in p:first-child{font-size:clamp(17px,1.8vw,21px);line-height:1.6;
      color:var(--claro-texto);font-weight:300}

/* ---------- duplas rótulo + explicação ---------- */
/* o mesmo par da referência: título curto à esquerda, texto à direita,
   separados por fio. Aqui em coluna única para caber ao lado do venn. */
.pares{margin-top:clamp(34px,5vh,56px);border-top:1px solid rgba(159,208,228,.16)}
.par{display:grid;grid-template-columns:14px minmax(0,1fr);
     gap:6px clamp(12px,1.6vw,18px);align-items:start;
     padding:clamp(20px,2.4vw,28px) 0;
     border-bottom:1px solid rgba(159,208,228,.16)}
.par .ponto{margin-top:9px;width:5px;height:5px;border-radius:50%;
     background:rgba(111,180,210,.6)}
.par h3{grid-column:2;font-size:clamp(15.5px,1.5vw,18px);font-weight:500;
     letter-spacing:-.005em;color:#fff}
.par p{grid-column:2;margin-top:8px;font-size:14px;line-height:1.65;
     color:rgba(214,232,244,.6)}

/* versão clara: esta seção roda dentro de .sec.clara */
.sec.clara .pares{border-top-color:rgba(10,32,56,.14)}
.sec.clara .par{border-bottom-color:rgba(10,32,56,.14)}
.sec.clara .par .ponto{background:var(--claro-acento)}
.sec.clara .par h3{color:var(--claro-texto)}
.sec.clara .par p{color:rgba(10,32,56,.62)}

/* ---------- fechamento em painel azul escuro ---------- */
.remate{max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,56px);
     background:var(--claro-bg);
     box-shadow:0 0 0 100vmax var(--claro-bg);
     clip-path:inset(0 -100vmax)}
.remate-in{position:relative;overflow:hidden;text-align:center;
     border-radius:clamp(22px,2.6vw,32px);
     padding:clamp(46px,8vw,92px) clamp(22px,5vw,56px);
     border:1px solid rgba(159,208,228,.18);
     background:
       radial-gradient(72% 78% at 50% 8%, rgba(120,164,188,.20), transparent 68%),
       linear-gradient(168deg,#053E70 0%,#022A55 46%,#011128 100%)}
.remate-in h2{font-size:clamp(24px,3.2vw,44px);font-weight:300;line-height:1.16;
     letter-spacing:-.02em;color:#fff;max-width:24ch;margin:0 auto}
.remate-in h2 em{font-family:var(--serif);font-style:italic;font-weight:400;
     letter-spacing:-.024em;font-size:1.06em}
.remate-in p{margin:clamp(20px,2.8vh,28px) auto 0;max-width:50ch;
     font-size:clamp(14.5px,1.35vw,16.5px);line-height:1.72;
     color:rgba(226,240,248,.7)}
.remate-in .acao{margin-top:clamp(28px,4vh,38px)}
.remate-fim{height:clamp(60px,10vh,120px);background:var(--claro-bg);
     box-shadow:0 0 0 100vmax var(--claro-bg);clip-path:inset(0 -100vmax)}

/* ---------- nota do que ainda falta definir ---------- */
.nota-pend{max-width:1120px;margin:0 auto;
     padding:clamp(30px,4.4vh,48px) clamp(20px,5vw,56px) clamp(48px,8vh,90px)}
.nota-pend div{max-width:66ch;padding:clamp(18px,2.2vw,26px);
     border:1px dashed rgba(227,185,139,.3);border-radius:16px;
     background:rgba(227,185,139,.05)}
.nota-pend p{font-size:13.5px;line-height:1.7;color:rgba(214,232,244,.6)}
.nota-pend strong{font-weight:500;color:rgba(240,248,252,.88)}

/* o venn precisa respirar dentro de uma seção normal */
.sec .venn{margin-top:clamp(44px,7vh,84px)}