/* ==========================================================================
   SILK — onde o fundo animado encosta no desenho do site   (17/09/2026)

   Esta folha ENTRA POR ULTIMO nas duas paginas que usam o shader (login e
   landing). Ela nao redesenha nada: so abre lugar para o canvas atras do
   conteudo e garante que o texto continue com o mesmo contraste de antes.

   O UNICO NUMERO QUE VOCE VAI QUERER MEXER e o --silk-veu la embaixo: e a
   forca do veu claro que fica entre o shader e o texto da hero. 1 = o texto
   fica como estava e o shader some; 0 = shader cru e titulo ilegivel.
   O valor de hoje e 0.92 do lado do texto.
   ========================================================================== */

:root {
  --silk-veu: .92;          /* veu da hero no desktop, do lado do texto */
  --silk-veu-celular: .90;  /* no celular o texto cobre a largura toda */
  --silk-papel: 242, 247, 248;  /* #F2F7F8 — a nevoa do design system */
}

/* --------------------------------------------------------------- o canvas
   O elemento com data-silk e so uma moldura: o <canvas> nasce dentro dele,
   por JS, e ocupa tudo. Nem um nem outro recebe clique. */
.silk-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ds-atlantico);   /* a cor mais baixa da paleta, antes do 1o quadro */
}
.silk-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* SEM WEBGL (navegador velho, GPU bloqueada por politica) o silk.js poe esta
   classe e desiste. O degrade usa as MESMAS 4 cores, na mesma ordem. */
.silk-sem-webgl {
  background: linear-gradient(135deg,
    var(--ds-atlantico) 0%, var(--ds-verde) 45%, var(--ds-sucesso-claro) 78%, var(--ds-menta-tenue) 100%);
}

@media print { .silk-fundo { display: none !important; } }


/* ==========================================================================
   1) LOGIN — a folha da direita vira o shader
   --------------------------------------------------------------------------
   Em 16/09 a porta virou uma folha so, centralizada, sobre o verde chapado.
   Agora a segunda folha volta, mas SEM a foto do escritorio e SEM os
   argumentos de venda: e o shader e mais nada. O formulario da esquerda nao
   muda em nada — continua a mesma caixa branca, na mesma largura.
   PARA VOLTAR A UMA COLUNA SO: tire a linha do silk.css do login.html.
   ========================================================================== */

body.v5-login .porta {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  place-items: stretch !important;
  padding: 0 !important;
}

/* a coluna do formulario volta a ocupar a metade inteira, mas o conteudo
   continua numa faixa de 452px centralizada — feito com padding, para nao
   encostar em nenhuma regra das filhas (.caixa, .porta-topo, .rodape-porta) */
body.v5-login .porta-conta {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 32px max(20px, calc((100% - 452px) / 2)) 36px !important;
}

body.v5-login .porta-prova {
  display: block !important;
  position: relative !important;
  padding: 16px !important;
  background: var(--ds-atlantico) !important;
  overflow: hidden;
}
body.v5-login .porta-prova:before { display: none !important; }
body.v5-login .porta-prova .silk-fundo {
  inset: 16px;
  border-radius: 26px;
}

/* CELULAR — a folha da direita nao some: ela vira o fundo da pagina inteira,
   fixa atras do formulario. A caixa e branca, entao o texto continua com o
   mesmo contraste de sempre por cima do shader. */
@media (max-width: 940px) {
  body.v5-login .porta { grid-template-columns: minmax(0, 1fr) !important; }
  body.v5-login .porta-prova {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
    z-index: 0 !important;
    pointer-events: none;
  }
  body.v5-login .porta-prova .silk-fundo { inset: 0; border-radius: 0; }
  body.v5-login .porta-conta {
    position: relative;
    z-index: 1;
    padding: 28px 18px 32px !important;
  }
  /* UM VEU ESCURO POR CIMA, SO NO CELULAR.
     No desktop a logo branca e o link "Ver os produtos e precos" ficam na
     coluna da esquerda, sobre o verde chapado — leem bem. No celular eles
     caem em cima do shader, e a parte clara da paleta (#F4FFC7) apagava os
     dois. O veu e mais forte no topo, que e exatamente onde eles estao. */
  body.v5-login .porta-prova .silk-fundo:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(var(--ds-atlantico-rgb),.82) 0%,
      rgba(var(--ds-atlantico-rgb),.64) 24%,
      rgba(var(--ds-atlantico-rgb),.40) 58%,
      rgba(var(--ds-atlantico-rgb),.56) 100%);
  }
}


/* ==========================================================================
   2) LANDING — o shader atras da hero, de ponta a ponta
   --------------------------------------------------------------------------
   A hero mora dentro de .section-wrap (1240px). O shader ignora esse limite
   e vai de borda a borda da janela; o conteudo nao sai do lugar.
   ========================================================================== */

.hero { position: relative; }

/* as duas colunas da hero sobem para cima do canvas */
.hero > *:not(.silk-fundo) { position: relative; z-index: 1; }

.hero > .silk-fundo {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}

/* O VEU — e ele que mantem o titulo escuro legivel sobre o verde.
   Duas camadas: a de baixo funde a hero no papel da pagina (topo e pe), a de
   cima e mais forte do lado esquerdo, que e onde o texto esta. */
.hero > .silk-fundo:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgb(var(--silk-papel)) 0%,
      rgba(var(--silk-papel), 0) 22%,
      rgba(var(--silk-papel), 0) 68%,
      rgb(var(--silk-papel)) 100%),
    linear-gradient(104deg,
      rgba(var(--silk-papel), var(--silk-veu)) 0%,
      rgba(var(--silk-papel), var(--silk-veu)) 32%,
      rgba(var(--silk-papel), .54) 58%,
      rgba(var(--silk-papel), .24) 100%);
}

/* Abaixo de 1000px a hero vira uma coluna so e o texto passa a ocupar a
   largura inteira — o veu tem de ser parelho, nao mais forte de um lado. */
@media (max-width: 1000px) {
  .hero > .silk-fundo:after {
    background:
      linear-gradient(to bottom,
        rgb(var(--silk-papel)) 0%,
        rgba(var(--silk-papel), 0) 26%,
        rgba(var(--silk-papel), 0) 62%,
        rgb(var(--silk-papel)) 100%),
      linear-gradient(
        rgba(var(--silk-papel), var(--silk-veu-celular)),
        rgba(var(--silk-papel), var(--silk-veu-celular)));
  }
}