/* ==================================================================
   FUNDO PEROLADO -> BRANCO
   (entra so quando ws_kit_fundo = perola, veja functions.php)

   O tema padrao separa as secoes com faixas chapadas: creme, branco,
   creme. Funciona num salao de bairro; num site de noiva parece
   listrado. Aqui a logica e outra:

     - a pagina inteira e perola;
     - cada secao e uma FOLHA BRANCA apoiada em cima dela, que dissolve
       nas bordas de cima e de baixo.

   Entao o branco nunca encosta no perola com uma linha: ele nasce dele.
   E como nenhuma regra depende da ordem dos blocos, mudar a ordem da
   home, tirar uma secao ou acrescentar outra nao quebra o desenho.

   Uma folha branca so existe se o que esta em volta dela for mais
   escuro. Por isso os cartoes que ficam POR CIMA da folha trocam de
   estrategia: em vez de fundo mais claro que o vizinho (impossivel,
   ja e branco), eles se definem por fio dourado e sombra baixa.
   ================================================================== */

body.wse-fundo-perola{
  background:var(--wse-perola);
  /* o perola nao rola junto com a pagina: fica parado atras de tudo,
     entao a folha branca de cada secao parece deslizar sobre ele */
  background-attachment:fixed;
}

/* ---------- a folha branca ---------- */
.wse-fundo-perola .wsb{
  background:linear-gradient(180deg,
      rgba(255,255,255,0)   0%,
      var(--wse-branco)    12%,
      var(--wse-branco)    88%,
      rgba(255,255,255,0) 100%) !important;
}

/*
 * O respiro entre uma folha e outra. Sem ele as folhas se encostam e o
 * perola nao aparece — o degrade some e volta o branco corrido.
 */
.wse-fundo-perola .wsb + .wsb{ margin-top:18px; }

/*
 * A abertura e a primeira coisa depois do cabecalho: ela comeca no
 * perola, cheia, e so depois vira branco. E a leitura literal do
 * "perolado indo para o branco" logo na chegada.
 */
.wse-fundo-perola .wsb-abertura{
  background:linear-gradient(180deg,
      var(--wse-perola)  0%,
      var(--wse-perola) 14%,
      var(--wse-branco) 72%,
      var(--wse-branco) 88%,
      rgba(255,255,255,0) 100%) !important;
}

/* paginas internas: o texto tambem mora numa folha branca */
.wse-fundo-perola .wse-content{
  background:linear-gradient(180deg,
      rgba(255,255,255,0)   0%,
      var(--wse-branco)     6%,
      var(--wse-branco)    94%,
      rgba(255,255,255,0) 100%);
}
/* o hero da pagina interna tem foto propria: fica fora da folha */
.wse-fundo-perola .wsep-hero{ position:relative; }

/* ---------- o que fica por cima da folha ---------- */

/*
 * Cartao branco sobre folha branca so se ve pelo fio e pela sombra.
 * O fio e o dourado da marca em 1px; a sombra e larga e rasa, do tom
 * da tinta, para o cartao pousar sem parecer recortado.
 */
.wse-fundo-perola .wsb-pac,
.wse-fundo-perola .wsb-card,
.wse-fundo-perola .wsb-hor-end,
.wse-fundo-perola .wsb-semana{
  border:1px solid rgba(var(--wse-rgb-ouro),.30);
  box-shadow:0 14px 34px rgba(var(--wse-rgb-tinta),.06);
}
.wse-fundo-perola .wsb-pac{ background:var(--wse-branco); }
.wse-fundo-perola .wsb-pac--destaque{
  background:linear-gradient(180deg, var(--wse-branco) 0%, rgba(var(--wse-rgb-rosa),.08) 100%);
  border-color:rgba(var(--wse-rgb-rosa),.55);
}

/* as setas do carrossel precisam se destacar do branco atras delas */
.wse-fundo-perola .wsb-seta{
  background:var(--wse-branco);
  border:1px solid rgba(var(--wse-rgb-ouro),.34);
  box-shadow:0 8px 20px rgba(var(--wse-rgb-tinta),.08);
}
.wse-fundo-perola .wsb-seta:hover{ background:var(--wse-perola); }

/*
 * CARTAO DE SERVICO SEM FOTO
 *
 * No tema padrao ele e escuro embaixo: um veu da cor da marca desce
 * sobre a textura para o nome sair em branco. Numa pagina perolada isso
 * vira um bloco pesado no meio do claro — foi o que apareceu na
 * primeira prova.
 *
 * Aqui o cartao inverte: fundo perola indo para o branco, sem veu, nome
 * na cor da tinta e o botao em fio dourado. Assim que a foto do servico
 * entrar na Biblioteca de Midia o cartao volta a ter veu, porque ai
 * existe uma foto embaixo do texto e o branco precisa dele.
 */
.wse-fundo-perola .wsb-card--sem-foto .wsb-card-foto{
  background:
    var(--wse-simbolo) center 30%/64px no-repeat,
    var(--wse-textura) center top/170% auto no-repeat,
    linear-gradient(180deg, var(--wse-branco) 0%, var(--wse-perola) 100%);
}
@media(max-width:520px){
  .wse-fundo-perola .wsb-card--sem-foto .wsb-card-foto{ background-size:56px, 170% auto, auto; }
}
.wse-fundo-perola .wsb-card--sem-foto .wsb-card-veu{ display:none; }
.wse-fundo-perola .wsb-card--sem-foto .wsb-card-nome{
  color:var(--wse-tinta); text-shadow:none;
}
.wse-fundo-perola .wsb-card--sem-foto .wsb-card-cta{
  background:transparent;
  border:1px solid rgba(var(--wse-rgb-ouro),.55);
  color:var(--wse-ouro-txt);
}
.wse-fundo-perola a.wsb-card-link:hover .wsb-card--sem-foto .wsb-card-cta,
.wse-fundo-perola .wsb-card--sem-foto a.wsb-card-link:hover .wsb-card-cta{
  background:var(--wse-branco);
}
.wse-fundo-perola .wsb-card--sem-foto .wsb-card-link{ background:var(--wse-branco); }

/* videos: mesma logica, sai o painel bege e entra o par perola/branco */
.wse-fundo-perola .wsb-videos{
  background:linear-gradient(180deg,
      rgba(255,255,255,0)   0%,
      var(--wse-branco)    12%,
      var(--wse-branco)    88%,
      rgba(255,255,255,0) 100%) !important;
}

/* galerias alternadas: as duas viram a mesma folha branca */
.wse-fundo-perola .wsb-galeria--impar,
.wse-fundo-perola .wsb-galeria--par{
  background:linear-gradient(180deg,
      rgba(255,255,255,0)   0%,
      var(--wse-branco)    12%,
      var(--wse-branco)    88%,
      rgba(255,255,255,0) 100%) !important;
}

/* ---------- cards de artigo (sugestoes de leitura) ---------- */
/*
 * Mesma historia dos cartoes de servico: sem foto destacada eles ficam
 * escuros para o titulo sair em branco. Tres retangulos escuros no fim
 * de uma pagina perolada pesam mais que o proprio rodape.
 *
 * Quando o post TEM foto o card continua como e — ali o veu escuro nao
 * e enfeite, e o que deixa o titulo legivel por cima da imagem.
 */
.wse-fundo-perola .wsec-sugestoes{
  background:linear-gradient(180deg,
      rgba(255,255,255,0)   0%,
      var(--wse-branco)    14%,
      var(--wse-branco)    86%,
      rgba(255,255,255,0) 100%);
  border-top:0;
}
.wse-fundo-perola .wsec-card.wsec-sem-foto{
  background:linear-gradient(180deg, var(--wse-branco) 0%, var(--wse-perola) 100%);
  border:1px solid rgba(var(--wse-rgb-ouro),.30);
  box-shadow:0 14px 34px rgba(var(--wse-rgb-tinta),.07);
}
.wse-fundo-perola .wsec-card.wsec-sem-foto .wsec-veu{
  background:var(--wse-textura);
  background-size:150% auto;
  background-position:center top;
  background-repeat:no-repeat;
  opacity:.55;
}
.wse-fundo-perola .wsec-card.wsec-sem-foto .wsec-link{ color:var(--wse-tinta) !important; }
.wse-fundo-perola .wsec-card.wsec-sem-foto .wsec-titulo{
  color:var(--wse-tinta); text-shadow:none;
}
.wse-fundo-perola .wsec-card.wsec-sem-foto .wsec-sub{ color:var(--wse-suave-2); }
.wse-fundo-perola .wsec-card.wsec-sem-foto .wsec-btn{
  background:var(--wse-branco);
  border:1px solid rgba(var(--wse-rgb-ouro),.55);
  color:var(--wse-ouro-txt);
  box-shadow:0 4px 14px rgba(var(--wse-rgb-tinta),.08);
}

/* ---------- rodape ---------- */
/*
 * O rodape fecha a pagina: aqui ele faz o caminho inverso, sai do
 * branco da ultima secao e volta para o perola, mais denso no fim.
 */
.wse-fundo-perola .wsef-painel{
  background:linear-gradient(180deg,
      var(--wse-branco) 0%,
      var(--wse-perola) 60%,
      var(--wse-perola) 100%);
  border-top:1px solid rgba(var(--wse-rgb-ouro),.26);
}

/* ==================================================================
   O DOURADO

   Fundo perola com texto verde-acinzentado e elegante, mas frio: nada
   ali diz "noiva". O dourado da papelaria dela entra para aquecer, e
   entra em FIO — rotulo, meia-palavra do titulo e um filete no alto de
   cada folha. Dourado chapado em area grande cansa a vista e, sobre
   branco, some; em traco fino ele faz o que se espera dele.

   O tom usado e o --wse-ouro-txt, que e o dourado da marca escurecido
   ate passar em contraste sobre o branco. O --wse-ouro puro fica so
   onde e desenho, nunca onde e leitura.
   ================================================================== */

/* o rotulo em caixa alta de cada secao */
.wse-fundo-perola .wsb-kicker,
.wse-fundo-perola .wsec-sug-sub{ color:var(--wse-ouro-txt); }

/* a meia-palavra em italico dos titulos */
.wse-fundo-perola .wsb-titulo .wse-au,
.wse-fundo-perola .wsec-sug-titulo .wse-au,
.wse-fundo-perola .wsp-titulo .wse-au{ color:var(--wse-ouro-txt); }

/*
 * O filete no alto da folha branca: um fio dourado que nasce e morre no
 * nada, entao ele nao vira uma linha cortando a pagina — vira um brilho
 * na dobra entre o perola e o branco.
 */
.wse-fundo-perola .wsb::before{
  content:''; position:absolute; left:0; right:0; top:0;
  height:1px; pointer-events:none;
  background:linear-gradient(90deg,
      rgba(var(--wse-rgb-ouro),0)   0%,
      rgba(var(--wse-rgb-ouro),.55) 28%,
      rgba(var(--wse-rgb-ouro),.55) 72%,
      rgba(var(--wse-rgb-ouro),0)  100%);
}
.wse-fundo-perola .wsb-abertura::before{ display:none; }   /* a primeira nao precisa */

/* botao de contorno: o fio vira dourado */
.wse-fundo-perola .wsb .wsep-botao--linha{
  border-color:rgba(var(--wse-rgb-ouro),.62) !important;
  color:var(--wse-ouro-txt) !important;
}

/* marcadores das listas de pacote e de extras */
.wse-fundo-perola .wsb-pac-itens li::before,
.wse-fundo-perola .wsb-extras-lista li::before{ background:var(--wse-ouro); }

/* o titulo de cada coluna do rodape */
.wse-fundo-perola .wsef-titulo{ color:var(--wse-ouro-txt); }
.wse-fundo-perola .wsef-kicker{ color:var(--wse-ouro-txt); }